2258 files changed, 324503 insertions, 0 deletions

diff --git a/files/de/_redirects.txt b/files/de/_redirects.txt
new file mode 100644
index 0000000000..7213b61764
--- /dev/null
+++ b/files/de/_redirects.txt
@@ -0,0 +1,606 @@
+# FROM-URL	TO-URL
+/de/docs/%C3%9Cber_das_Mozilla_Developer_Center	/en-US/docs/Project:de/%C3%9Cber_das_Mozilla_Developer_Center
+/de/docs/AJAX	/de/docs/Web/Guide/AJAX
+/de/docs/AJAX/Getting_Started	/de/docs/AJAX/Einf%C3%BChrung
+/de/docs/AJAX:Getting_Started	/de/docs/AJAX/Einf%C3%BChrung
+/de/docs/Apps/Progressiv	/de/docs/Web/Progressive_web_apps
+/de/docs/Apps/Progressiv/Introduction	/de/docs/Web/Progressive_web_apps/Introduction
+/de/docs/Barrierefreiheit	/de/docs/Web/Barrierefreiheit
+/de/docs/Barrierefreiheit/ARIA	/de/docs/Web/Barrierefreiheit/ARIA
+/de/docs/Barrierefreiheit/ARIA/ARIA_Live_Regionen	/de/docs/Web/Barrierefreiheit/ARIA/ARIA_Live_Regionen
+/de/docs/Barrierefreiheit/An_overview_of_accessible_web_applications_and_widgets	/de/docs/Web/Barrierefreiheit/An_overview_of_accessible_web_applications_and_widgets
+/de/docs/Barrierefreiheit/Webentwicklung	/de/docs/Web/Barrierefreiheit/Webentwicklung
+/de/docs/Bug-Entdecken_Leitfaden	/de/docs/Richtlinien_zum_Schreiben_eines_Bugreports
+/de/docs/Building_an_Extension	/de/docs/Erweiterung_erstellen
+/de/docs/CSS	/de/docs/Web/CSS
+/de/docs/CSS/-moz-border-radius	/de/docs/Web/CSS/border-radius
+/de/docs/CSS/-moz-border-radius-bottomleft	/de/docs/Web/CSS/border-bottom-left-radius
+/de/docs/CSS/-moz-border-radius-bottomright	/de/docs/Web/CSS/border-bottom-right-radius
+/de/docs/CSS/-moz-border-radius-topleft	/de/docs/Web/CSS/border-top-left-radius
+/de/docs/CSS/-moz-border-radius-topright	/de/docs/Web/CSS/border-top-right-radius
+/de/docs/CSS/-moz-box-shadow	/de/docs/Web/CSS/box-shadow
+/de/docs/CSS/-moz-image-region	/de/docs/Web/CSS/-moz-image-region
+/de/docs/CSS/-moz-user-input	/de/docs/Web/CSS/-moz-user-input
+/de/docs/CSS/-moz-user-modify	/de/docs/Web/CSS/-moz-user-modify
+/de/docs/CSS/-moz-user-select	/de/docs/Web/CSS/-moz-user-select
+/de/docs/CSS/:empty	/de/docs/Web/CSS/:empty
+/de/docs/CSS/:lang	/de/docs/Web/CSS/:lang
+/de/docs/CSS/@import	/de/docs/Web/CSS/@import
+/de/docs/CSS/Attributselektoren	/de/docs/Web/CSS/Attributselektoren
+/de/docs/CSS/Border-bottom-width	/de/docs/Web/CSS/Border-bottom-width
+/de/docs/CSS/Border-left-width	/de/docs/Web/CSS/Border-left-width
+/de/docs/CSS/Border-right-width	/de/docs/Web/CSS/Border-right-width
+/de/docs/CSS/Border-top-width	/de/docs/Web/CSS/Border-top-width
+/de/docs/CSS/Bottom	/de/docs/Web/CSS/Bottom
+/de/docs/CSS/Boxmodell	/de/docs/Web/CSS/CSS_Boxmodell/Einf%C3%BChrung_in_das_CSS_Boxmodell
+/de/docs/CSS/CSS_Reference/Property_Template	/de/docs/Web/CSS/Property_Template
+/de/docs/CSS/CSS_Unterst%C3%BCtzung	/de/docs/Web/CSS/CSS_Unterst%C3%BCtzung
+/de/docs/CSS/CSS_Werte_Geltung	/de/docs/Web/CSS
+/de/docs/CSS/CSS_animated_properties	/de/docs/Web/CSS
+/de/docs/CSS/CSS_animierbare_Eigenschaften	/de/docs/Web/CSS
+/de/docs/CSS/CSS_prozentuale_werte	/de/docs/Web/CSS
+/de/docs/CSS/CSS_werte_syntax	/de/docs/Web/CSS
+/de/docs/CSS/Einf%C3%BChrung	/de/docs/Web/Guide/CSS/Getting_started
+/de/docs/CSS/Einheiten	/de/docs/Web/CSS/Einheiten
+/de/docs/CSS/Farben	/de/docs/Web/CSS/Farben
+/de/docs/CSS/Getting_Started	/de/docs/Web/Guide/CSS/Getting_started
+/de/docs/CSS/Getting_Started-weiterleitung-1	/de/docs/Web/Guide/CSS/Getting_started
+/de/docs/CSS/Initialwert	/de/docs/Web/CSS/Initialwert
+/de/docs/CSS/Left	/de/docs/Web/CSS/Left
+/de/docs/CSS/Right	/de/docs/Web/CSS/Right
+/de/docs/CSS/Top	/de/docs/Web/CSS/Top
+/de/docs/CSS/Vererbung	/de/docs/Web/CSS/Vererbung
+/de/docs/CSS/Vorlage	/de/docs/Web/CSS/Property_Template
+/de/docs/CSS/Wertdefinitionssyntax	/de/docs/Web/CSS/Wertdefinitionssyntax
+/de/docs/CSS/azimuth	/de/docs/CSS/Refrerenz/Azimuth
+/de/docs/CSS/background	/de/docs/Web/CSS/background
+/de/docs/CSS/background-attachment	/de/docs/Web/CSS/background-attachment
+/de/docs/CSS/background-clip	/de/docs/Web/CSS/background-clip
+/de/docs/CSS/background-color	/de/docs/Web/CSS/background-color
+/de/docs/CSS/background-image	/de/docs/Web/CSS/background-image
+/de/docs/CSS/background-origin	/de/docs/Web/CSS/background-origin
+/de/docs/CSS/background-position	/de/docs/Web/CSS/background-position
+/de/docs/CSS/background-repeat	/de/docs/Web/CSS/background-repeat
+/de/docs/CSS/background-size	/de/docs/Web/CSS/background-size
+/de/docs/CSS/berechneter_Wert	/de/docs/Web/CSS/berechneter_Wert
+/de/docs/CSS/border	/de/docs/Web/CSS/border
+/de/docs/CSS/border-bottom	/de/docs/Web/CSS/border-bottom
+/de/docs/CSS/border-bottom-color	/de/docs/Web/CSS/border-bottom-color
+/de/docs/CSS/border-bottom-left-radius	/de/docs/Web/CSS/border-bottom-left-radius
+/de/docs/CSS/border-bottom-right-radius	/de/docs/Web/CSS/border-bottom-right-radius
+/de/docs/CSS/border-bottom-style	/de/docs/Web/CSS/border-bottom-style
+/de/docs/CSS/border-collapse	/de/docs/Web/CSS/border-collapse
+/de/docs/CSS/border-color	/de/docs/Web/CSS/border-color
+/de/docs/CSS/border-left	/de/docs/Web/CSS/border-left
+/de/docs/CSS/border-left-color	/de/docs/Web/CSS/border-left-color
+/de/docs/CSS/border-left-style	/de/docs/Web/CSS/border-left-style
+/de/docs/CSS/border-radius	/de/docs/Web/CSS/border-radius
+/de/docs/CSS/border-right	/de/docs/Web/CSS/border-right
+/de/docs/CSS/border-right-color	/de/docs/Web/CSS/border-right-color
+/de/docs/CSS/border-right-style	/de/docs/Web/CSS/border-right-style
+/de/docs/CSS/border-spacing	/de/docs/Web/CSS/border-spacing
+/de/docs/CSS/border-style	/de/docs/Web/CSS/border-style
+/de/docs/CSS/border-top	/de/docs/Web/CSS/border-top
+/de/docs/CSS/border-top-color	/de/docs/Web/CSS/border-top-color
+/de/docs/CSS/border-top-left-radius	/de/docs/Web/CSS/border-top-left-radius
+/de/docs/CSS/border-top-right-radius	/de/docs/Web/CSS/border-top-right-radius
+/de/docs/CSS/border-top-style	/de/docs/Web/CSS/border-top-style
+/de/docs/CSS/border-width	/de/docs/Web/CSS/border-width
+/de/docs/CSS/box-shadow	/de/docs/Web/CSS/box-shadow
+/de/docs/CSS/box-sizing	/de/docs/Web/CSS/box-sizing
+/de/docs/CSS/calc	/de/docs/Web/CSS/calc()
+/de/docs/CSS/clear	/de/docs/Web/CSS/clear
+/de/docs/CSS/color	/de/docs/Web/CSS/color
+/de/docs/CSS/cursor	/de/docs/Web/CSS/cursor
+/de/docs/CSS/display	/de/docs/Web/CSS/display
+/de/docs/CSS/empty-cells	/de/docs/Web/CSS/empty-cells
+/de/docs/CSS/float	/de/docs/Web/CSS/float
+/de/docs/CSS/font	/de/docs/Web/CSS/font
+/de/docs/CSS/height	/de/docs/Web/CSS/height
+/de/docs/CSS/hyphens	/de/docs/Web/CSS/hyphens
+/de/docs/CSS/laenge	/de/docs/Web/CSS/Einheiten
+/de/docs/CSS/list-style	/de/docs/Web/CSS/list-style
+/de/docs/CSS/margin	/de/docs/Web/CSS/margin
+/de/docs/CSS/margin-bottom	/de/docs/Web/CSS/margin-bottom
+/de/docs/CSS/margin-left	/de/docs/Web/CSS/margin-left
+/de/docs/CSS/margin-right	/de/docs/Web/CSS/margin-right
+/de/docs/CSS/margin-top	/de/docs/Web/CSS/margin-top
+/de/docs/CSS/max-height	/de/docs/Web/CSS/max-height
+/de/docs/CSS/max-width	/de/docs/Web/CSS/max-width
+/de/docs/CSS/min-height	/de/docs/Web/CSS/min-height
+/de/docs/CSS/min-width	/de/docs/Web/CSS/min-width
+/de/docs/CSS/opacity	/de/docs/Web/CSS/opacity
+/de/docs/CSS/overflow	/de/docs/Web/CSS/overflow
+/de/docs/CSS/padding	/de/docs/Web/CSS/padding
+/de/docs/CSS/padding-bottom	/de/docs/Web/CSS/padding-bottom
+/de/docs/CSS/padding-left	/de/docs/Web/CSS/padding-left
+/de/docs/CSS/padding-right	/de/docs/Web/CSS/padding-right
+/de/docs/CSS/padding-top	/de/docs/Web/CSS/padding-top
+/de/docs/CSS/page-break-after	/de/docs/Web/CSS/page-break-after
+/de/docs/CSS/page-break-before	/de/docs/Web/CSS/page-break-before
+/de/docs/CSS/page-break-inside	/de/docs/Web/CSS/page-break-inside
+/de/docs/CSS/position	/de/docs/Web/CSS/position
+/de/docs/CSS/resize	/de/docs/Web/CSS/resize
+/de/docs/CSS/text-align	/de/docs/Web/CSS/text-align
+/de/docs/CSS/text-decoration	/de/docs/Web/CSS/text-decoration
+/de/docs/CSS/text-decoration-color	/de/docs/Web/CSS/text-decoration-color
+/de/docs/CSS/text-shadow	/de/docs/Web/CSS/text-shadow
+/de/docs/CSS/text-shadow/text-shadow	/en-US/docs/User:Elchi3/text-shadow
+/de/docs/CSS/time	/de/docs/Web/CSS/time
+/de/docs/CSS/vertical-align	/de/docs/Web/CSS/vertical-align
+/de/docs/CSS/visibility	/de/docs/Web/CSS/visibility
+/de/docs/CSS/width	/de/docs/Web/CSS/width
+/de/docs/CSS/xx	/de/docs/Web/CSS/xx
+/de/docs/CSS:-moz-border-radius	/de/docs/Web/CSS/border-radius
+/de/docs/CSS:-moz-border-radius-bottomleft	/de/docs/Web/CSS/border-bottom-left-radius
+/de/docs/CSS:-moz-border-radius-bottomright	/de/docs/Web/CSS/border-bottom-right-radius
+/de/docs/CSS:-moz-border-radius-topleft	/de/docs/Web/CSS/border-top-left-radius
+/de/docs/CSS:-moz-border-radius-topright	/de/docs/Web/CSS/border-top-right-radius
+/de/docs/CSS:-moz-user-input	/de/docs/Web/CSS/-moz-user-input
+/de/docs/CSS:-moz-user-modify	/de/docs/Web/CSS/-moz-user-modify
+/de/docs/CSS:-moz-user-select	/de/docs/Web/CSS/-moz-user-select
+/de/docs/CSS::empty	/de/docs/Web/CSS/:empty
+/de/docs/CSS::lang	/de/docs/Web/CSS/:lang
+/de/docs/CSS:@import	/de/docs/Web/CSS/@import
+/de/docs/CSS:Boxmodell	/de/docs/Web/CSS/CSS_Boxmodell/Einf%C3%BChrung_in_das_CSS_Boxmodell
+/de/docs/CSS:Einheiten	/de/docs/Web/CSS/Einheiten
+/de/docs/CSS:Farben	/de/docs/Web/CSS/Farben
+/de/docs/CSS:Vorlage	/de/docs/Web/CSS/Property_Template
+/de/docs/CSS:azimuth	/de/docs/CSS/Refrerenz/Azimuth
+/de/docs/CSS:background	/de/docs/Web/CSS/background
+/de/docs/CSS:background-attachment	/de/docs/Web/CSS/background-attachment
+/de/docs/CSS:background-color	/de/docs/Web/CSS/background-color
+/de/docs/CSS:background-image	/de/docs/Web/CSS/background-image
+/de/docs/CSS:background-position	/de/docs/Web/CSS/background-position
+/de/docs/CSS:background-repeat	/de/docs/Web/CSS/background-repeat
+/de/docs/CSS:border	/de/docs/Web/CSS/border
+/de/docs/CSS:border-bottom	/de/docs/Web/CSS/border-bottom
+/de/docs/CSS:border-bottom-color	/de/docs/Web/CSS/border-bottom-color
+/de/docs/CSS:border-bottom-style	/de/docs/Web/CSS/border-bottom-style
+/de/docs/CSS:border-collapse	/de/docs/Web/CSS/border-collapse
+/de/docs/CSS:border-color	/de/docs/Web/CSS/border-color
+/de/docs/CSS:border-left	/de/docs/Web/CSS/border-left
+/de/docs/CSS:border-left-color	/de/docs/Web/CSS/border-left-color
+/de/docs/CSS:border-left-style	/de/docs/Web/CSS/border-left-style
+/de/docs/CSS:border-right	/de/docs/Web/CSS/border-right
+/de/docs/CSS:border-right-color	/de/docs/Web/CSS/border-right-color
+/de/docs/CSS:border-right-style	/de/docs/Web/CSS/border-right-style
+/de/docs/CSS:border-spacing	/de/docs/Web/CSS/border-spacing
+/de/docs/CSS:border-style	/de/docs/Web/CSS/border-style
+/de/docs/CSS:border-top	/de/docs/Web/CSS/border-top
+/de/docs/CSS:border-top-color	/de/docs/Web/CSS/border-top-color
+/de/docs/CSS:border-top-style	/de/docs/Web/CSS/border-top-style
+/de/docs/CSS:border-width	/de/docs/Web/CSS/border-width
+/de/docs/CSS:clear	/de/docs/Web/CSS/clear
+/de/docs/CSS:color	/de/docs/Web/CSS/color
+/de/docs/CSS:cue	/de/docs/CSS/cue
+/de/docs/CSS:cue-after	/de/docs/CSS/cue-after
+/de/docs/CSS:cue-before	/de/docs/CSS/cue-before
+/de/docs/CSS:cursor	/de/docs/Web/CSS/cursor
+/de/docs/CSS:display	/de/docs/Web/CSS/display
+/de/docs/CSS:empty-cells	/de/docs/Web/CSS/empty-cells
+/de/docs/CSS:float	/de/docs/Web/CSS/float
+/de/docs/CSS:font	/de/docs/Web/CSS/font
+/de/docs/CSS:height	/de/docs/Web/CSS/height
+/de/docs/CSS:laenge	/de/docs/Web/CSS/Einheiten
+/de/docs/CSS:list-style	/de/docs/Web/CSS/list-style
+/de/docs/CSS:margin	/de/docs/Web/CSS/margin
+/de/docs/CSS:margin-bottom	/de/docs/Web/CSS/margin-bottom
+/de/docs/CSS:margin-left	/de/docs/Web/CSS/margin-left
+/de/docs/CSS:margin-right	/de/docs/Web/CSS/margin-right
+/de/docs/CSS:margin-top	/de/docs/Web/CSS/margin-top
+/de/docs/CSS:max-height	/de/docs/Web/CSS/max-height
+/de/docs/CSS:max-width	/de/docs/Web/CSS/max-width
+/de/docs/CSS:min-height	/de/docs/Web/CSS/min-height
+/de/docs/CSS:min-width	/de/docs/Web/CSS/min-width
+/de/docs/CSS:opacity	/de/docs/Web/CSS/opacity
+/de/docs/CSS:overflow	/de/docs/Web/CSS/overflow
+/de/docs/CSS:padding	/de/docs/Web/CSS/padding
+/de/docs/CSS:padding-bottom	/de/docs/Web/CSS/padding-bottom
+/de/docs/CSS:padding-left	/de/docs/Web/CSS/padding-left
+/de/docs/CSS:padding-right	/de/docs/Web/CSS/padding-right
+/de/docs/CSS:padding-top	/de/docs/Web/CSS/padding-top
+/de/docs/CSS:page-break-after	/de/docs/Web/CSS/page-break-after
+/de/docs/CSS:page-break-before	/de/docs/Web/CSS/page-break-before
+/de/docs/CSS:page-break-inside	/de/docs/Web/CSS/page-break-inside
+/de/docs/CSS:pause	/de/docs/CSS/pause
+/de/docs/CSS:pause-after	/de/docs/CSS/pause-after
+/de/docs/CSS:pause-before	/de/docs/CSS/pause-before
+/de/docs/CSS:play-during	/de/docs/CSS/play-during
+/de/docs/CSS:position	/de/docs/Web/CSS/position
+/de/docs/CSS:speak	/de/docs/CSS/speak
+/de/docs/CSS:speak-header	/de/docs/CSS/speak-header
+/de/docs/CSS:speak-numeral	/de/docs/CSS/speak-numeral
+/de/docs/CSS:speak-punctuation	/de/docs/CSS/speak-punctuation
+/de/docs/CSS:text-align	/de/docs/Web/CSS/text-align
+/de/docs/CSS:text-decoration	/de/docs/Web/CSS/text-decoration
+/de/docs/CSS:vertical-align	/de/docs/Web/CSS/vertical-align
+/de/docs/CSS:visibility	/de/docs/Web/CSS/visibility
+/de/docs/CSS:volume	/de/docs/CSS/volume
+/de/docs/CSS:width	/de/docs/Web/CSS/width
+/de/docs/CSS_Referenz	/de/docs/Web/CSS/CSS_Referenz
+/de/docs/CSS_Referenz/Mozilla_CSS_Erweiterungen	/de/docs/Web/CSS/Mozilla_Extensions
+/de/docs/CSS_in_HTML_einbinden	/de/docs/Web/CSS/@import
+/de/docs/Code_snippets	/de/docs/Codeschnipsel
+/de/docs/Code_snippets/Scrollbar	/de/docs/Codeschnipsel/Scrollbar
+/de/docs/Code_snippets/Windows	/de/docs/Codeschnipsel/Windows
+/de/docs/Code_snippets:Tree	/de/docs/Code_snippets/Tree
+/de/docs/Creating_a_Skin_for_Firefox	/de/docs/Theme_erstellen
+/de/docs/Creating_a_Skin_for_Firefox/contents.rdf	/de/docs/Theme_erstellen/contents.rdf
+/de/docs/Creating_a_Skin_for_Firefox/install.rdf	/de/docs/Theme_erstellen/install.rdf
+/de/docs/Creating_a_Skin_for_Firefox:contents.rdf	/de/docs/Theme_erstellen/contents.rdf
+/de/docs/Creating_a_Skin_for_Firefox:install.rdf	/de/docs/Theme_erstellen/install.rdf
+/de/docs/DOM/File.fileName	/de/docs/Web/API/File/fileName
+/de/docs/DOM/File.fileSize	/de/docs/Web/API/File/fileSize
+/de/docs/DOM/File.getAsText	/de/docs/Web/API/File/getAsText
+/de/docs/DOM/File.lastModifiedDate	/de/docs/Web/API/File/lastModifiedDate
+/de/docs/DOM/File.name	/de/docs/Web/API/File/name
+/de/docs/DOM/File.size	/de/docs/Web/API/Blob/size
+/de/docs/DOM/File.type	/de/docs/Web/API/File/type
+/de/docs/DOM/Node	/de/docs/Web/API/Node
+/de/docs/DOM/Node.childNodes	/de/docs/Web/API/Node/childNodes
+/de/docs/DOM/Node.firstChild	/de/docs/Web/API/Node/firstChild
+/de/docs/DOM/Node.lastChild	/de/docs/Web/API/Node/lastChild
+/de/docs/DOM/Node.nextSibling	/de/docs/Web/API/Node/nextSibling
+/de/docs/DOM/Node.parentNode	/de/docs/Web/API/Node/parentNode
+/de/docs/DOM/Node.previousSibling	/de/docs/Web/API/Node/previousSibling
+/de/docs/DOM/Node.replaceChild	/de/docs/Web/API/Node/replaceChild
+/de/docs/DOM/Node.textContent	/de/docs/Web/API/Node/textContent
+/de/docs/DOM/XMLHttpRequest	/de/docs/Web/API/XMLHttpRequest
+/de/docs/DOM/document	/de/docs/Web/API/Document
+/de/docs/DOM/document.createElement	/de/docs/Web/API/Document/createElement
+/de/docs/DOM/element	/de/docs/Web/API/Element
+/de/docs/DOM/navigator.id	/de/docs/Web/API/Navigator/id
+/de/docs/DOM/window	/de/docs/Web/API/Window
+/de/docs/DOM/window.dump	/de/docs/Web/API/Window/dump
+/de/docs/DOM/window.openDialog	/de/docs/Web/API/Window/openDialog
+/de/docs/DOM/window.setTimeout	/de/docs/Web/API/WindowTimers/setTimeout
+/de/docs/Developer_Guide	/de/docs/Mozilla/Developer_guide
+/de/docs/Developer_Guide/firefox_erfolgreich_erstellt	/de/docs/Mozilla/Developer_guide/firefox_erfolgreich_erstellt
+/de/docs/Eine_erste_Erweiterung_erstellen	/de/docs/Erweiterung_erstellen
+/de/docs/Einf%C3%BChrung_in_den_Gebrauch_von_XPath_in_JavaScript	/de/docs/Web/JavaScript/Einf%C3%BChrung_in_den_Gebrauch_von_XPath_in_JavaScript
+/de/docs/Einfacher_Thunderbird_build	/de/docs/Mozilla/Developer_guide/Build_Anweisungen/Einfacher_Thunderbird_build
+/de/docs/Einleitung	/de/docs/Mozilla/Developer_guide/Einleitung
+/de/docs/Entwicklerhandbuch	/de/docs/Mozilla/Developer_guide
+/de/docs/Entwicklerhandbuch/Build_Anweisungen	/de/docs/Mozilla/Developer_guide/Build_Anweisungen
+/de/docs/Entwicklerhandbuch/Build_Anweisungen/TOC	/de/docs/Mozilla/Developer_guide/Build_Anweisungen/TOC
+/de/docs/Entwicklerhandbuch/Build_Anweisungen/Windows_Build_Voraussetzungen	/de/docs/Mozilla/Developer_guide/Build_Anweisungen/Windows_Build_Voraussetzungen
+/de/docs/Entwicklerhandbuch/Quelltexte	/de/docs/Mozilla/Developer_guide/Quelltexte
+/de/docs/Entwicklerhandbuch/Quelltexte/Mozilla_Quelltexte_herunterladen	/de/docs/Mozilla/Developer_guide/Quelltexte/Mozilla_Quelltexte_herunterladen
+/de/docs/Entwicklerhandbuch/Quelltexte/Verzeichnis_struktur	/de/docs/Mozilla/Developer_guide/Quelltexte/Verzeichnis_struktur
+/de/docs/Error_Console	/de/docs/Fehlerkonsole
+/de/docs/Firefox_1.5_Beta	/de/docs/Firefox_1.5_f%C3%BCr_Entwickler
+/de/docs/HTML	/de/docs/Web/HTML
+/de/docs/HTML/Block-level_elemente	/de/docs/Web/HTML/Block-level_elemente
+/de/docs/HTML/Element	/de/docs/Web/HTML/Element
+/de/docs/HTML/Element/Input	/de/docs/Web/HTML/Element/Input
+/de/docs/HTML/Element/b	/de/docs/Web/HTML/Element/b
+/de/docs/HTML/Element/br	/de/docs/Web/HTML/Element/br
+/de/docs/HTML/Element/canvas	/de/docs/Web/HTML/Element/canvas
+/de/docs/HTML/Element/datalist	/de/docs/Web/HTML/Element/datalist
+/de/docs/HTML/Element/h1	/de/docs/Web/HTML/Element/h1-h6
+/de/docs/HTML/Element/h1-h6	/de/docs/Web/HTML/Element/h1-h6
+/de/docs/HTML/Element/h2	/de/docs/Web/HTML/Element/h1-h6
+/de/docs/HTML/Element/h3	/de/docs/Web/HTML/Element/h1-h6
+/de/docs/HTML/Element/h4	/de/docs/Web/HTML/Element/h1-h6
+/de/docs/HTML/Element/h5	/de/docs/Web/HTML/Element/h1-h6
+/de/docs/HTML/Element/h6	/de/docs/Web/HTML/Element/h1-h6
+/de/docs/HTML/Element/head	/de/docs/Web/HTML/Element/head
+/de/docs/HTML/Element/hr	/de/docs/Web/HTML/Element/hr
+/de/docs/HTML/Element/html	/de/docs/Web/HTML/Element/html
+/de/docs/HTML/Element/iframe	/de/docs/Web/HTML/Element/iframe
+/de/docs/HTML/Element/li	/de/docs/Web/HTML/Element/li
+/de/docs/HTML/Element/noscript	/de/docs/Web/HTML/Element/noscript
+/de/docs/HTML/Element/ol	/de/docs/Web/HTML/Element/ol
+/de/docs/HTML/Element/p	/de/docs/Web/HTML/Element/p
+/de/docs/HTML/Element/pre	/de/docs/Web/HTML/Element/pre
+/de/docs/HTML/Element/strong	/de/docs/Web/HTML/Element/strong
+/de/docs/HTML/Element/time	/de/docs/Web/HTML/Element/time
+/de/docs/HTML/Element/ul	/de/docs/Web/HTML/Element/ul
+/de/docs/HTML/Element/var	/de/docs/Web/HTML/Element/var
+/de/docs/HTML/HTML5	/de/docs/Web/HTML/HTML5
+/de/docs/HTML/HTML5/HTML5_element_list	/de/docs/Web/HTML/HTML5/HTML5_element_list
+/de/docs/HTML/HTML5/liste_der_HTML5_elemente	/de/docs/Web/HTML/HTML5/HTML5_element_list
+/de/docs/HTML/HTML_Lernen_f%C3%BCr_Anf%C3%A4nger	/de/docs/HTML/HTML_beginner
+/de/docs/HTML/Inline_elemente	/de/docs/Web/HTML/Inline_elemente
+/de/docs/HTML/Using_HTML5_audio_and_video	/de/docs/Web/HTML/Using_HTML5_audio_and_video
+/de/docs/HTML/Using_the_application_cache	/de/docs/Web/HTML/Using_the_application_cache
+/de/docs/HTML:Beispiele	/de/docs/HTML/Beispiele
+/de/docs/HTML:Element	/de/docs/Web/HTML/Element
+/de/docs/HTML:Element:b	/de/docs/Web/HTML/Element/b
+/de/docs/HTML:Element:h1	/de/docs/Web/HTML/Element/h1-h6
+/de/docs/HTML:Element:h2	/de/docs/Web/HTML/Element/h1-h6
+/de/docs/HTML:Element:h3	/de/docs/Web/HTML/Element/h1-h6
+/de/docs/HTML:Element:h4	/de/docs/Web/HTML/Element/h1-h6
+/de/docs/HTML:Element:h5	/de/docs/Web/HTML/Element/h1-h6
+/de/docs/HTML:Element:h6	/de/docs/Web/HTML/Element/h1-h6
+/de/docs/HTML:Element:head	/de/docs/Web/HTML/Element/head
+/de/docs/HTML:Element:hr	/de/docs/Web/HTML/Element/hr
+/de/docs/HTML:Element:html	/de/docs/Web/HTML/Element/html
+/de/docs/HTML:Element:iframe	/de/docs/Web/HTML/Element/iframe
+/de/docs/HTML:Element:li	/de/docs/Web/HTML/Element/li
+/de/docs/HTML:Element:ol	/de/docs/Web/HTML/Element/ol
+/de/docs/HTML:Element:p	/de/docs/Web/HTML/Element/p
+/de/docs/HTML:Element:strong	/de/docs/Web/HTML/Element/strong
+/de/docs/HTML:Element:ul	/de/docs/Web/HTML/Element/ul
+/de/docs/HTML:Element:var	/de/docs/Web/HTML/Element/var
+/de/docs/HTTP_Request_Header_setzen	/de/docs/XPCOM/HTTP_Request_Header_setzen
+/de/docs/Hauptseite	/de/docs/Web
+/de/docs/IndexedDB	/de/docs/Web/API/IndexedDB_API
+/de/docs/IndexedDB/Browser_storage_limits_and_eviction_criteria	/de/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria
+/de/docs/IndexedDB/Grundkonzepte_hinter_IndexedDB	/de/docs/Web/API/IndexedDB_API/Grundkonzepte_hinter_IndexedDB
+/de/docs/IndexedDB/IndexedDB_verwenden	/de/docs/Web/API/IndexedDB_API/IndexedDB_verwenden
+/de/docs/JavaScript	/de/docs/Web/JavaScript
+/de/docs/JavaScript/%C3%9Cber_Javascript	/de/docs/Web/JavaScript/Guide/Einführung
+/de/docs/JavaScript/Eine_Wiedereinfuehrung_in_JavaScript	/de/docs/Web/JavaScript/Eine_Wiedereinfuehrung_in_JavaScript
+/de/docs/JavaScript/Guide	/de/docs/Web/JavaScript/Guide
+/de/docs/JavaScript/Guide/%C3%9Cber_Javascript	/de/docs/Web/JavaScript/Guide/Einführung
+/de/docs/JavaScript/Guide/%C3%9Cber_diese_Einf%C3%BChrung	/de/docs/Web/JavaScript/Guide/Einführung
+/de/docs/JavaScript/Guide/Ausdruecke_und_Operatoren	/de/docs/Web/JavaScript/Guide/Ausdruecke_und_Operatoren
+/de/docs/JavaScript/Guide/Closures	/de/docs/Web/JavaScript/Closures
+/de/docs/JavaScript/Guide/Feinheiten_des_Objektmodells	/de/docs/Web/JavaScript/Guide/Feinheiten_des_Objektmodells
+/de/docs/JavaScript/Guide/Funktionen	/de/docs/Web/JavaScript/Guide/Funktionen
+/de/docs/JavaScript/Guide/Iteratoren_und_Generatoren	/de/docs/Web/JavaScript/Guide/Iteratoren_und_Generatoren
+/de/docs/JavaScript/Guide/Mit_Objekten_arbeiten	/de/docs/Web/JavaScript/Guide/Mit_Objekten_arbeiten
+/de/docs/JavaScript/Guide/Regular_Expressions	/de/docs/Web/JavaScript/Guide/Regular_Expressions
+/de/docs/JavaScript/Guide/Statements	/de/docs/Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung
+/de/docs/JavaScript/Guide/Ueber_JavaScript	/de/docs/Web/JavaScript/Guide/Einführung
+/de/docs/JavaScript/Guide/Ueber_diese_Einfuehrung	/de/docs/JavaScript/Guide/Über_diese_Einführung
+/de/docs/JavaScript/Guide/Vererbung_ueberdacht	/de/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
+/de/docs/JavaScript/Guide/Vordefinierte_Kernobjekte	/de/docs/Web/JavaScript/Guide
+/de/docs/JavaScript/Guide/Werte_Variablen_und_Literale	/de/docs/Web/JavaScript/Guide/Grammatik_und_Typen
+/de/docs/JavaScript/JQuery	/de/docs/Web/JavaScript/JQuery
+/de/docs/JavaScript/Javascript_lernen_f%C3%BCr_Anf%C3%A4nger	/de/docs/Web/JavaScript/Guide
+/de/docs/JavaScript/Language_Resources	/de/docs/Web/JavaScript/Language_Resources
+/de/docs/JavaScript/Neu_in_JavaScript	/de/docs/Web/JavaScript/Neu_in_JavaScript
+/de/docs/JavaScript/Neu_in_JavaScript/1.5	/de/docs/Web/JavaScript/Neu_in_JavaScript/1.5
+/de/docs/JavaScript/Neu_in_JavaScript/1.6	/de/docs/Web/JavaScript/Neu_in_JavaScript/1.6
+/de/docs/JavaScript/Neu_in_JavaScript/1.7	/de/docs/Web/JavaScript/Neu_in_JavaScript/1.7
+/de/docs/JavaScript/Neu_in_JavaScript/1.8	/de/docs/Web/JavaScript/Neu_in_JavaScript/1.8
+/de/docs/JavaScript/Neu_in_JavaScript/1.8.1	/de/docs/Web/JavaScript/Neu_in_JavaScript/1.8.1
+/de/docs/JavaScript/Neu_in_JavaScript/1.8.5	/de/docs/Web/JavaScript/Neu_in_JavaScript/1.8.5
+/de/docs/JavaScript/Reference	/de/docs/Web/JavaScript/Reference
+/de/docs/JavaScript/Reference/Global_Objects	/de/docs/Web/JavaScript/Reference/Global_Objects
+/de/docs/JavaScript/Reference/Global_Objects/Array	/de/docs/Web/JavaScript/Reference/Global_Objects/Array
+/de/docs/JavaScript/Reference/Global_Objects/Array/isArray	/de/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray
+/de/docs/JavaScript/Reference/Global_Objects/Array/pop	/de/docs/Web/JavaScript/Reference/Global_Objects/Array/pop
+/de/docs/JavaScript/Reference/Global_Objects/Array/push	/de/docs/Web/JavaScript/Reference/Global_Objects/Array/push
+/de/docs/JavaScript/Reference/Global_Objects/Array/reverse	/de/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse
+/de/docs/JavaScript/Reference/Global_Objects/Array/shift	/de/docs/Web/JavaScript/Reference/Global_Objects/Array/shift
+/de/docs/JavaScript/Reference/Global_Objects/Date	/de/docs/Web/JavaScript/Reference/Global_Objects/Date
+/de/docs/JavaScript/Reference/Global_Objects/Date/now	/de/docs/Web/JavaScript/Reference/Global_Objects/Date/now
+/de/docs/JavaScript/Reference/Global_Objects/NaN	/de/docs/Web/JavaScript/Reference/Global_Objects/NaN
+/de/docs/JavaScript/Reference/Global_Objects/Number	/de/docs/Web/JavaScript/Reference/Global_Objects/Number
+/de/docs/JavaScript/Reference/Global_Objects/Number/EPSILON	/de/docs/Web/JavaScript/Reference/Global_Objects/Number/EPSILON
+/de/docs/JavaScript/Reference/Global_Objects/Object	/de/docs/Web/JavaScript/Reference/Global_Objects/Object
+/de/docs/JavaScript/Reference/Global_Objects/Object/constructor	/de/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor
+/de/docs/JavaScript/Reference/Global_Objects/Object/is	/de/docs/Web/JavaScript/Reference/Global_Objects/Object/is
+/de/docs/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable	/de/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable
+/de/docs/JavaScript/Reference/Global_Objects/RegExp	/de/docs/Web/JavaScript/Reference/Global_Objects/RegExp
+/de/docs/JavaScript/Reference/Global_Objects/String	/de/docs/Web/JavaScript/Reference/Global_Objects/String
+/de/docs/JavaScript/Reference/Global_Objects/String/replace	/de/docs/Web/JavaScript/Reference/Global_Objects/String/replace
+/de/docs/JavaScript/Speicherverwaltung	/de/docs/Web/JavaScript/Speicherverwaltung
+/de/docs/JavaScript/java_guide	/de/docs/Web/JavaScript/Guide
+/de/docs/JavaScript/javascript_guide	/de/docs/Web/JavaScript/Guide
+/de/docs/JavaScript/javascript_guide/%C3%9Cber_Javascript	/de/docs/Web/JavaScript/Guide/Einführung
+/de/docs/JavaScript/javascript_guide/%C3%9Cber_diese_Einf%C3%BChrung	/de/docs/JavaScript/Guide/Über_diese_Einführung
+/de/docs/JavaScript/javascript_guide/Anweisungen	/de/docs/Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung
+/de/docs/JavaScript/javascript_guide/Ausdr%C3%BCcke_und_Operatoren	/de/docs/Web/JavaScript/Guide/Ausdruecke_und_Operatoren
+/de/docs/JavaScript/javascript_guide/Funktionen	/de/docs/Web/JavaScript/Guide/Funktionen
+/de/docs/JavaScript/javascript_guide/Javascript_%C3%9Cbersicht	/de/docs/Web/JavaScript/Guide/Einführung
+/de/docs/JavaScript/javascript_guide/Mit_Objekten_arbeiten	/de/docs/Web/JavaScript/Guide/Mit_Objekten_arbeiten
+/de/docs/JavaScript/javascript_guide/Regul%C3%A4re_Ausdr%C3%BCcke	/de/docs/Web/JavaScript/Guide/Regular_Expressions
+/de/docs/JavaScript/javascript_guide/Werte,_Variable_und_Literale	/de/docs/Web/JavaScript/Guide/Grammatik_und_Typen
+/de/docs/JavaScript/javascript_guide/Werte,_Variablen_und_Literale	/de/docs/Web/JavaScript/Guide/Grammatik_und_Typen
+/de/docs/JavaScript/javascript_guide/ueber_javascript	/de/docs/Web/JavaScript/Guide/Einführung
+/de/docs/JavaScript/javascript_guide/ueber_javascript/%C3%9Cber_Javascript	/de/docs/Web/JavaScript/Guide/Einführung
+/de/docs/JavaScript/ueber_JavaScript	/de/docs/Web/JavaScript/Guide/Einführung
+/de/docs/JavaScript/ueber_JavaScript/%C3%9Cber_Javascript	/de/docs/Web/JavaScript/Guide/Einführung
+/de/docs/Learn/CSS/Introduction_to_CSS	/en-US/docs/Learn/CSS/First_steps
+/de/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors	/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors
+/de/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance	/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance
+/de/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors	/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators
+/de/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works	/en-US/docs/Learn/CSS/First_steps/How_CSS_works
+/de/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements	/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements
+/de/docs/Learn/CSS/Introduction_to_CSS/Simple_selectors	/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors
+/de/docs/Learn/CSS/Introduction_to_CSS/Syntax	/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured
+/de/docs/Learn/CSS/Introduction_to_CSS/Values_and_units	/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
+/de/docs/Learn/CSS/Styling_boxes	/en-US/docs/Learn/CSS/Building_blocks
+/de/docs/MDC_style_guide/MDC_style_guide	/en-US/docs/Project:En/MDC_style_guide
+/de/docs/MDN/Contribute/Content	/de/docs/MDN/Guidelines
+/de/docs/MDN/Contribute/Content/Style_guide	/de/docs/MDN/Guidelines/Style_guide
+/de/docs/MDN/Contribute/Guidelines	/de/docs/MDN/Guidelines
+/de/docs/MDN/Contribute/Guidelines/Style_guide	/de/docs/MDN/Guidelines/Style_guide
+/de/docs/MDN/Contribute/Structures	/de/docs/MDN/Structures
+/de/docs/MDN/Contribute/Structures/Kompatibilitaets_Tabellen	/de/docs/MDN/Structures/Kompatibilitaets_Tabellen
+/de/docs/MDN/Erste_Schritte	/de/docs/MDN/Contribute/Getting_started
+/de/docs/MDN/Feedback	/de/docs/MDN/Contribute/Feedback
+/de/docs/MindTouch_Deki_bug_priorities	/en-US/docs/User:Sheppy/MindTouch_Deki_bug_priorities
+/de/docs/Mozilla_Quelltexte_herunterladen	/de/docs/Mozilla/Developer_guide/Quelltexte/Mozilla_Quelltexte_herunterladen
+/de/docs/Mozilla_entwickeln	/de/docs/Mozilla/Developer_guide
+/de/docs/Neuste_Version	/de/docs/Mozilla/Developer_guide/Quelltexte/Mozilla_Quelltexte_herunterladen
+/de/docs/Online_and_offline_events	/de/docs/Web/API/NavigatorOnLine/Online_and_offline_events
+/de/docs/Profilmanager	/de/docs/Profile_Manager
+/de/docs/QA/Stress_Testing	/de/docs/Qualit%C3%A4tssicherung/Stress_Testing
+/de/docs/QA:Stress_Testing	/de/docs/Qualit%C3%A4tssicherung/Stress_Testing
+/de/docs/SVG	/de/docs/Web/SVG
+/de/docs/SVG/Element	/de/docs/Web/SVG/Element
+/de/docs/SVG/Element/animate	/de/docs/Web/SVG/Element/animate
+/de/docs/SVG/Element/foreignObject	/de/docs/Web/SVG/Element/foreignObject
+/de/docs/SVG/Element/image	/de/docs/Web/SVG/Element/image
+/de/docs/SVG/Tutorial	/de/docs/Web/SVG/Tutorial
+/de/docs/SVG/Tutorial/Einf%C3%BChrung	/de/docs/Web/SVG/Tutorial/Einf%C3%BChrung
+/de/docs/SVG_In_HTML_Introduction	/de/docs/Web/SVG/Tutorial/SVG_In_HTML_Introduction
+/de/docs/SeaMonkey_mit_VC8_Express_Kompilieren	/de/docs/Mozilla/Developer_guide/Build_Anweisungen/Windows_Build_Voraussetzungen
+/de/docs/SeaMonkey_mit_VC_8_Express_Kompilieren	/de/docs/Mozilla/Developer_guide/Build_Anweisungen/Windows_Build_Voraussetzungen
+/de/docs/Simple_Firefox_build	/de/docs/Mozilla/Developer_guide/Build_Anweisungen/Simple_Firefox_build
+/de/docs/Simple_Firefox_build/Linux_and_MacOS_build_preparation	/de/docs/Mozilla/Developer_guide/Build_Anweisungen/Simple_Firefox_build/Linux_and_MacOS_build_preparation
+/de/docs/Suche_Plugins	/de/docs/OpenSearch_Plugin_für_Firefox_erstellen
+/de/docs/Theme_erstellen:Einf%C3%BChrung	/de/docs/Theme_erstellen/Einf%C3%BChrung
+/de/docs/Theme_erstellen:UUID	/de/docs/Theme_erstellen/UUID
+/de/docs/Theme_erstellen:contents.rdf	/de/docs/Theme_erstellen/contents.rdf
+/de/docs/Theme_erstellen:install.rdf	/de/docs/Theme_erstellen/install.rdf
+/de/docs/Themen	/de/docs/Themes
+/de/docs/Tools/Seiten_Inspektor/Style_panel	/de/docs/Tools/Seiten_Inspektor
+/de/docs/Verwenden_des_Cache_beim_Firefox_1.5	/de/docs/Benutzen_des_Zwischenspeichers_in_Firefox_1.5_(caching)
+/de/docs/Web/API/CSSRule.cssText	/de/docs/Web/API/CSSRule/cssText
+/de/docs/Web/API/Element.querySelector	/de/docs/Web/API/Element/querySelector
+/de/docs/Web/API/File/size	/de/docs/Web/API/Blob/size
+/de/docs/Web/API/MozMobileConnection.selectNetworkAutomatically	/de/docs/Web/API/MozMobileConnection/selectNetworkAutomatically
+/de/docs/Web/API/Node.cloneNode	/de/docs/Web/API/Node/cloneNode
+/de/docs/Web/API/WebGL_API/3D-Objekte_mit_WebGL_erstellen	/de/docs/Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen
+/de/docs/Web/API/WebGL_API/Animierte_Texturen_in_WebGL	/de/docs/Web/API/WebGL_API/Tutorial/Animierte_Texturen_in_WebGL
+/de/docs/Web/API/WebGL_API/Beleuchtung_in_WebGL	/de/docs/Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL
+/de/docs/Web/API/WebGL_API/Einf%C3%BChrung_in_WebGL	/de/docs/Web/API/WebGL_API/Tutorial/Einf%C3%BChrung_in_WebGL
+/de/docs/Web/API/WebGL_API/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzuf%C3%BCgen	/de/docs/Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzuf%C3%BCgen
+/de/docs/Web/API/WebGL_API/Hinzuf%C3%BCgen_von_2D_Inhalten_in_einen_WebGL-Kontext	/de/docs/Web/API/WebGL_API/Tutorial/Hinzuf%C3%BCgen_von_2D_Inhalten_in_einen_WebGL-Kontext
+/de/docs/Web/API/WebGL_API/Objekte_mit_WebGL_animieren	/de/docs/Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren
+/de/docs/Web/API/WebGL_API/Texturen_in_WebGL_verwenden	/de/docs/Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden
+/de/docs/Web/API/Window.alert	/de/docs/Web/API/Window/alert
+/de/docs/Web/API/Window/setTimeout	/de/docs/Web/API/WindowTimers/setTimeout
+/de/docs/Web/API/document.documentElement	/de/docs/Web/API/Document/documentElement
+/de/docs/Web/CSS/-moz-alias	/de/docs/Web/CSS/cursor
+/de/docs/Web/CSS/-moz-appearance	/de/docs/Web/CSS/appearance
+/de/docs/Web/CSS/-moz-background-inline-policy	/de/docs/Web/CSS/box-decoration-break
+/de/docs/Web/CSS/-moz-border-radius	/de/docs/Web/CSS/border-radius
+/de/docs/Web/CSS/-moz-border-radius-bottomleft	/de/docs/Web/CSS/border-bottom-left-radius
+/de/docs/Web/CSS/-moz-border-radius-bottomright	/de/docs/Web/CSS/border-bottom-right-radius
+/de/docs/Web/CSS/-moz-border-radius-topleft	/de/docs/Web/CSS/border-top-left-radius
+/de/docs/Web/CSS/-moz-border-radius-topright	/de/docs/Web/CSS/border-top-right-radius
+/de/docs/Web/CSS/-moz-box-shadow	/de/docs/Web/CSS/box-shadow
+/de/docs/Web/CSS/-moz-context-menu	/de/docs/Web/CSS/cursor
+/de/docs/Web/CSS/-moz-copy	/de/docs/Web/CSS/cursor
+/de/docs/Web/CSS/-moz-spinning	/de/docs/Web/CSS/cursor
+/de/docs/Web/CSS/-webkit-mask-position	/de/docs/Web/CSS/mask-position
+/de/docs/Web/CSS/Adjacent_sibling_combinator	/de/docs/Web/CSS/Angrenzende_Geschwisterselektoren
+/de/docs/Web/CSS/Adjacent_sibling_selectors	/de/docs/Web/CSS/Angrenzende_Geschwisterselektoren
+/de/docs/Web/CSS/Boxmodell	/de/docs/Web/CSS/CSS_Boxmodell/Einf%C3%BChrung_in_das_CSS_Boxmodell
+/de/docs/Web/CSS/CSS_Box_Model	/de/docs/Web/CSS/CSS_Boxmodell
+/de/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator	/de/docs/Web/CSS/CSS_Boxmodell/Box-shadow_generator
+/de/docs/Web/CSS/CSS_Referenz/%3Cbasic-shape%3E	/de/docs/Web/CSS/basic-shape
+/de/docs/Web/CSS/CSS_Referenz/::backdrop	/de/docs/Web/CSS/::backdrop
+/de/docs/Web/CSS/CSS_Referenz/@viewport	/de/docs/Web/CSS/@viewport
+/de/docs/Web/CSS/CSS_Referenz/Mozilla_CSS_Erweiterungen	/de/docs/Web/CSS/Mozilla_Extensions
+/de/docs/Web/CSS/CSS_Referenz/Webkit_Extensions	/de/docs/Web/CSS/WebKit_Extensions
+/de/docs/Web/CSS/CSS_Referenz/line-break	/de/docs/Web/CSS/line-break
+/de/docs/Web/CSS/CSS_Referenz/mix-blend-mode	/de/docs/Web/CSS/mix-blend-mode
+/de/docs/Web/CSS/CSS_Werte_Geltung	/de/docs/Web/CSS
+/de/docs/Web/CSS/CSS_animierbare_Eigenschaften	/de/docs/Web/CSS
+/de/docs/Web/CSS/CSS_prozentuale_werte	/de/docs/Web/CSS
+/de/docs/Web/CSS/CSS_werte_syntax	/de/docs/Web/CSS
+/de/docs/Web/CSS/Child_selectors	/de/docs/Web/CSS/Kindselektoren
+/de/docs/Web/CSS/Getting_Started	/de/docs/Web/Guide/CSS/Getting_started
+/de/docs/Web/CSS/Pseudoklasse	/de/docs/Web/CSS/Pseudo-classes
+/de/docs/Web/CSS/Referenz	/de/docs/Web/CSS/CSS_Referenz
+/de/docs/Web/CSS/Replaced_element	/de/docs/Web/CSS/ersetztes_Element
+/de/docs/Web/CSS/attr	/de/docs/Web/CSS/attr()
+/de/docs/Web/CSS/azimuth	/de/docs/CSS/Refrerenz/Azimuth
+/de/docs/Web/CSS/calc	/de/docs/Web/CSS/calc()
+/de/docs/Web/CSS/hidden	/de/docs/Web/CSS/visibility
+/de/docs/Web/CSS/laenge	/de/docs/Web/CSS/Einheiten
+/de/docs/Web/CSS/linear-gradient	/de/docs/Web/CSS/linear-gradient()
+/de/docs/Web/CSS/marks	/de/docs/Web/CSS/%40page/marks
+/de/docs/Web/CSS/mq-boolean	/de/docs/Web/CSS/Media_Queries/Using_media_queries
+/de/docs/Web/CSS/text-shadow/text-shadow	/en-US/docs/User:Elchi3/text-shadow
+/de/docs/Web/CSS/visible	/de/docs/Web/CSS/visibility
+/de/docs/Web/Events/fullscreenchange	/de/docs/Web/API/Document/fullscreenchange_event
+/de/docs/Web/Events/popstate	/de/docs/Web/API/Window/popstate_event
+/de/docs/Web/Events/submit	/de/docs/Web/API/HTMLFormElement/submit_event
+/de/docs/Web/Events/touchstart	/de/docs/Web/API/Element/touchstart_event
+/de/docs/Web/Events/webglcontextcreationerror	/de/docs/Web/API/HTMLCanvasElement/webglcontextcreationerror_event
+/de/docs/Web/Events/webglcontextlost	/de/docs/Web/API/HTMLCanvasElement/webglcontextlost_event
+/de/docs/Web/Events/webglcontextrestored	/de/docs/Web/API/HTMLCanvasElement/webglcontextrestored_event
+/de/docs/Web/Guide/AJAX/Getting_Started	/de/docs/AJAX/Einf%C3%BChrung
+/de/docs/Web/Guide/CSS	/de/docs/Learn/CSS
+/de/docs/Web/Guide/CSS/CSS_Animationen_nutzen	/de/docs/Web/CSS/CSS_Animations/CSS_Animationen_nutzen
+/de/docs/Web/Guide/CSS/Flexible_boxes	/de/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
+/de/docs/Web/Guide/CSS/mehrere_Hintergr%C3%BCnde_verwenden	/de/docs/Web/CSS/CSS_Background_and_Borders/Mehrere_Hintergr%C3%BCnde_in_CSS_verwenden
+/de/docs/Web/Guide/HTML	/de/docs/Learn/HTML
+/de/docs/Web/Guide/HTML/Einf%C3%BChrung	/de/docs/Learn/HTML/Einf%C3%BChrung_in_HTML
+/de/docs/Web/HTML/Element/Schaltfl%C3%A4che	/de/docs/Web/HTML/Element/button
+/de/docs/Web/HTML/Element/h1	/de/docs/Web/HTML/Element/h1-h6
+/de/docs/Web/HTML/Element/h2	/de/docs/Web/HTML/Element/h1-h6
+/de/docs/Web/HTML/Element/h3	/de/docs/Web/HTML/Element/h1-h6
+/de/docs/Web/HTML/Element/h4	/de/docs/Web/HTML/Element/h1-h6
+/de/docs/Web/HTML/Element/h5	/de/docs/Web/HTML/Element/h1-h6
+/de/docs/Web/HTML/Element/h6	/de/docs/Web/HTML/Element/h1-h6
+/de/docs/Web/HTML/HTML_Lernen_f%C3%BCr_Anf%C3%A4nger	/de/docs/HTML/HTML_beginner
+/de/docs/Web/JavaScript/%C3%9Cber_Javascript	/de/docs/Web/JavaScript/Guide/Einführung
+/de/docs/Web/JavaScript/Datenstruktures	/de/docs/Web/JavaScript/Datenstrukturen
+/de/docs/Web/JavaScript/Getting_Started	/de/docs/Learn/Getting_started_with_the_web/JavaScript_basics
+/de/docs/Web/JavaScript/Guide/%C3%9Cber_Javascript	/de/docs/Web/JavaScript/Guide/Einführung
+/de/docs/Web/JavaScript/Guide/%C3%9Cber_diese_Einf%C3%BChrung	/de/docs/Web/JavaScript/Guide/Einführung
+/de/docs/Web/JavaScript/Guide/Closures	/de/docs/Web/JavaScript/Closures
+/de/docs/Web/JavaScript/Guide/Statements	/de/docs/Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung
+/de/docs/Web/JavaScript/Guide/Ueber_JavaScript	/de/docs/Web/JavaScript/Guide/Einführung
+/de/docs/Web/JavaScript/Guide/Ueber_diese_Einfuehrung	/de/docs/JavaScript/Guide/Über_diese_Einführung
+/de/docs/Web/JavaScript/Guide/Vererbung_ueberdacht	/de/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
+/de/docs/Web/JavaScript/Guide/Vergleiche_auf_Gleichheit_und_deren_Verwendung	/de/docs/Web/JavaScript/Vergleiche_auf_Gleichheit_und_deren_Verwendung
+/de/docs/Web/JavaScript/Guide/Vordefinierte_Kernobjekte	/de/docs/Web/JavaScript/Guide
+/de/docs/Web/JavaScript/Guide/Werte_Variablen_und_Literale	/de/docs/Web/JavaScript/Guide/Grammatik_und_Typen
+/de/docs/Web/JavaScript/Javascript_lernen_f%C3%BCr_Anf%C3%A4nger	/de/docs/Web/JavaScript/Guide
+/de/docs/Web/JavaScript/Reference/Anweisungen	/de/docs/Web/JavaScript/Reference/Statements
+/de/docs/Web/JavaScript/Reference/Anweisungen/const	/de/docs/Web/JavaScript/Reference/Statements/const
+/de/docs/Web/JavaScript/Reference/Anweisungen/for...in	/de/docs/Web/JavaScript/Reference/Statements/for...in
+/de/docs/Web/JavaScript/Reference/Anweisungen/let	/de/docs/Web/JavaScript/Reference/Statements/let
+/de/docs/Web/JavaScript/Reference/Anweisungen/var	/de/docs/Web/JavaScript/Reference/Statements/var
+/de/docs/Web/JavaScript/Reference/Global_Objects/Array/flatten	/de/docs/Web/JavaScript/Reference/Global_Objects/Array/flat
+/de/docs/Web/JavaScript/Reference/Global_Objects/Collator	/de/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator
+/de/docs/Web/JavaScript/Reference/Global_Objects/Collator/compare	/de/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/compare
+/de/docs/Web/JavaScript/Reference/Global_Objects/Collator/prototype	/de/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/prototype
+/de/docs/Web/JavaScript/Reference/Global_Objects/Collator/resolvedOptions	/de/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/resolvedOptions
+/de/docs/Web/JavaScript/Reference/Global_Objects/Collator/supportedLocalesOf	/de/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/supportedLocalesOf
+/de/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat	/de/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
+/de/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/format	/de/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format
+/de/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/formatToParts	/de/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts
+/de/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/prototype	/de/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype
+/de/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/resolvedOptions	/de/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions
+/de/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/supportedLocalesOf	/de/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/supportedLocalesOf
+/de/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat	/de/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+/de/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/format	/de/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/format
+/de/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/prototype	/de/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype
+/de/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/supportedLocalesOf	/de/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/supportedLocalesOf
+/de/docs/Web/JavaScript/Reference/Global_Objects/PluralRules	/de/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules
+/de/docs/Web/JavaScript/Reference/Global_Objects/PluralRules/supportedLocalesOf	/de/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/supportedLocalesOf
+/de/docs/Web/JavaScript/Reference/Methods_Index	/de/docs/Web/JavaScript/Reference
+/de/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators	/de/docs/Web/JavaScript/Reference/Operators
+/de/docs/Web/JavaScript/Reference/Properties_Index	/de/docs/Web/JavaScript/Reference
+/de/docs/Web/JavaScript/Tutorials	/de/docs/Web/JavaScript
+/de/docs/Web/JavaScript/java_guide	/de/docs/Web/JavaScript/Guide
+/de/docs/Web/JavaScript/javascript_guide	/de/docs/Web/JavaScript/Guide
+/de/docs/Web/JavaScript/javascript_guide/%C3%9Cber_Javascript	/de/docs/Web/JavaScript/Guide/Einführung
+/de/docs/Web/JavaScript/javascript_guide/%C3%9Cber_diese_Einf%C3%BChrung	/de/docs/JavaScript/Guide/Über_diese_Einführung
+/de/docs/Web/JavaScript/javascript_guide/Ausdr%C3%BCcke_und_Operatoren	/de/docs/Web/JavaScript/Guide/Ausdruecke_und_Operatoren
+/de/docs/Web/JavaScript/javascript_guide/Javascript_%C3%9Cbersicht	/de/docs/Web/JavaScript/Guide/Einführung
+/de/docs/Web/JavaScript/javascript_guide/Werte,_Variable_und_Literale	/de/docs/Web/JavaScript/Guide/Grammatik_und_Typen
+/de/docs/Web/JavaScript/javascript_guide/Werte,_Variablen_und_Literale	/de/docs/Web/JavaScript/Guide/Grammatik_und_Typen
+/de/docs/Web/JavaScript/javascript_guide/ueber_javascript	/de/docs/Web/JavaScript/Guide/Einführung
+/de/docs/Web/JavaScript/javascript_guide/ueber_javascript/%C3%9Cber_Javascript	/de/docs/Web/JavaScript/Guide/Einführung
+/de/docs/Web/JavaScript/ueber_JavaScript	/de/docs/Web/JavaScript/Guide/Einführung
+/de/docs/Web/JavaScript/ueber_JavaScript/%C3%9Cber_Javascript	/de/docs/Web/JavaScript/Guide/Einführung
+/de/docs/Web/WebGL	/de/docs/Web/API/WebGL_API
+/de/docs/Web/WebGL/3D-Objekte_mit_WebGL_erstellen	/de/docs/Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen
+/de/docs/Web/WebGL/Animierte_Texturen_in_WebGL	/de/docs/Web/API/WebGL_API/Tutorial/Animierte_Texturen_in_WebGL
+/de/docs/Web/WebGL/Beleuchtung_in_WebGL	/de/docs/Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL
+/de/docs/Web/WebGL/Einf%C3%BChrung_in_WebGL	/de/docs/Web/API/WebGL_API/Tutorial/Einf%C3%BChrung_in_WebGL
+/de/docs/Web/WebGL/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzuf%C3%BCgen	/de/docs/Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzuf%C3%BCgen
+/de/docs/Web/WebGL/Hinzuf%C3%BCgen_von_2D_Inhalten_in_einen_WebGL-Kontext	/de/docs/Web/API/WebGL_API/Tutorial/Hinzuf%C3%BCgen_von_2D_Inhalten_in_einen_WebGL-Kontext
+/de/docs/Web/WebGL/Objekte_mit_WebGL_animieren	/de/docs/Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren
+/de/docs/Web/WebGL/Texturen_in_WebGL_verwenden	/de/docs/Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden
+/de/docs/WebGL	/de/docs/Web/API/WebGL_API
+/de/docs/WebGL/3D-Objekte_mit_WebGL_erstellen	/de/docs/Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen
+/de/docs/WebGL/Animierte_Texturen_in_WebGL	/de/docs/Web/API/WebGL_API/Tutorial/Animierte_Texturen_in_WebGL
+/de/docs/WebGL/Beleuchtung_in_WebGL	/de/docs/Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL
+/de/docs/WebGL/Einf%C3%BChrung_in_WebGL	/de/docs/Web/API/WebGL_API/Tutorial/Einf%C3%BChrung_in_WebGL
+/de/docs/WebGL/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzuf%C3%BCgen	/de/docs/Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzuf%C3%BCgen
+/de/docs/WebGL/Hinzuf%C3%BCgen_von_2D_Inhalten_in_einen_WebGL-Kontext	/de/docs/Web/API/WebGL_API/Tutorial/Hinzuf%C3%BCgen_von_2D_Inhalten_in_einen_WebGL-Kontext
+/de/docs/WebGL/Objekte_mit_WebGL_animieren	/de/docs/Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren
+/de/docs/WebGL/Texturen_in_WebGL_verwenden	/de/docs/Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden
+/de/docs/Webbasierte_protokoll-handler	/de/docs/Web/API/Navigator/registerProtocolHandler/Webbasierte_protokoll-handler
+/de/docs/Werkzeuge	/de/docs/Tools
+/de/docs/XML_Einf%C3%BChrung	/de/docs/Web/XML/XML_Einf%C3%BChrung
+/de/docs/XSLT	/de/docs/Web/XSLT
+/de/docs/Zugriff_auf_Dateien_von_Webapplikationen	/de/docs/Web/API/File/Zugriff_auf_Dateien_von_Webapplikationen
+/de/docs/en	/en-US/
+/de/docs/install.rdf	/de/docs/Installationsmanifest
+/de/docs/meta:Help:External_editors	/de/docs/meta/Help/External_editors
diff --git a/files/de/_wikihistory.json b/files/de/_wikihistory.json
new file mode 100644
index 0000000000..7085c26dd5
--- /dev/null
+++ b/files/de/_wikihistory.json
@@ -0,0 +1,14744 @@
+{
+  "Benutzen_des_Zwischenspeichers_in_Firefox_1.5_(caching)": {
+    "modified": "2019-03-24T00:04:22.542Z",
+    "contributors": [
+      "wbamberg",
+      "fscholz",
+      "-=Renegade=-",
+      "Doozer"
+    ]
+  },
+  "CSS3_Columns": {
+    "modified": "2019-03-24T00:05:49.925Z",
+    "contributors": [
+      "SJW",
+      "fscholz",
+      "Mapag"
+    ]
+  },
+  "DOM": {
+    "modified": "2019-03-24T00:03:18.662Z",
+    "contributors": [
+      "TheNT87",
+      "Barfooz",
+      "ethertank",
+      "fscholz",
+      "Crash",
+      "Takenbot",
+      "M@d Man"
+    ]
+  },
+  "DOM/Ueber_das_Document_Object_Model": {
+    "modified": "2019-12-23T07:48:22.460Z",
+    "contributors": [
+      "Cerberooo",
+      "StevenS77",
+      "Barfooz"
+    ]
+  },
+  "DOM_Inspector": {
+    "modified": "2020-07-16T22:36:24.131Z",
+    "contributors": [
+      "wbamberg",
+      "nw520"
+    ]
+  },
+  "DragDrop": {
+    "modified": "2019-03-23T23:26:04.264Z",
+    "contributors": [
+      "drewp"
+    ]
+  },
+  "Erweiterung_erstellen": {
+    "modified": "2019-03-24T00:04:52.753Z",
+    "contributors": [
+      "tregagnon",
+      "fscholz",
+      "SeSchneider",
+      "Yozh88",
+      "Jules Papillon",
+      "Alopix",
+      "Pl4yer",
+      "Masterdschecker",
+      "Michael2402",
+      "Undertaker",
+      "Thomas147",
+      "Felix.Schwarz",
+      "Verruckt",
+      "Slosd",
+      "Philipp",
+      "Indigo",
+      "Jonny",
+      "Takenbot",
+      "Manuel Strehl",
+      "Ar-sch.de",
+      "DDSD",
+      "Dria"
+    ]
+  },
+  "Erweiterungen_für_Firefox_3_aktualisieren": {
+    "modified": "2019-12-13T20:33:28.025Z",
+    "contributors": [
+      "wbamberg",
+      "fscholz",
+      "Sheppy",
+      "Editmonkey",
+      "Jules Papillon"
+    ]
+  },
+  "Farbverläufe_in_CSS": {
+    "modified": "2019-03-23T23:13:15.166Z",
+    "contributors": [
+      "Bennyville",
+      "wizAmit",
+      "slayslot",
+      "Sebastianz",
+      "floEdelmann"
+    ]
+  },
+  "Firefox_1.5_für_Entwickler": {
+    "modified": "2019-03-24T00:04:17.420Z",
+    "contributors": [
+      "wbamberg",
+      "fscholz",
+      "Jules Papillon",
+      "Agoist",
+      "Umifa",
+      "Crash"
+    ]
+  },
+  "Firefox_1.5_für_Entwickler/Changing_the_priority_of_HTTP_requests": {
+    "modified": "2019-10-30T20:00:38.264Z",
+    "contributors": [
+      "sklicek"
+    ]
+  },
+  "Firefox_3.5_für_Entwickler": {
+    "modified": "2019-03-24T00:04:29.361Z",
+    "contributors": [
+      "wbamberg",
+      "Timmi",
+      "fscholz",
+      "niels"
+    ]
+  },
+  "Firefox_3_für_Entwickler": {
+    "modified": "2019-03-24T00:04:33.617Z",
+    "contributors": [
+      "wbamberg",
+      "fscholz",
+      "niels",
+      "Lukas Skywalker"
+    ]
+  },
+  "Games": {
+    "modified": "2019-09-09T15:31:03.156Z",
+    "contributors": [
+      "SphinxKnight",
+      "ctexxx",
+      "wbamberg",
+      "Ja3ar",
+      "RewoSiedge",
+      "fscholz",
+      "Chris-CR",
+      "wiegels",
+      "sonjaka",
+      "F6F"
+    ]
+  },
+  "Glossary": {
+    "modified": "2020-10-07T11:07:28.731Z",
+    "contributors": [
+      "peterbe",
+      "wbamberg",
+      "duckymirror",
+      "Siphalor",
+      "schwemmer",
+      "PercyGitarrist",
+      "Clijsters",
+      "Jeremie"
+    ]
+  },
+  "Glossary/404": {
+    "modified": "2019-03-23T22:25:58.962Z",
+    "contributors": [
+      "cob",
+      "SebinNyshkim",
+      "PercyGitarrist"
+    ]
+  },
+  "Glossary/502": {
+    "modified": "2019-03-23T22:25:51.694Z",
+    "contributors": [
+      "Siphalor",
+      "PercyGitarrist"
+    ]
+  },
+  "Glossary/AJAX": {
+    "modified": "2019-09-29T09:22:43.314Z",
+    "contributors": [
+      "StuNNixX",
+      "SebinNyshkim",
+      "Johann150",
+      "amelzer",
+      "Tyrandus",
+      "Siphalor",
+      "PeterMader"
+    ]
+  },
+  "Glossary/API": {
+    "modified": "2019-01-17T01:20:03.588Z",
+    "contributors": [
+      "GreenPepper",
+      "Tyrandus"
+    ]
+  },
+  "Glossary/ARIA": {
+    "modified": "2019-03-18T21:25:14.758Z",
+    "contributors": [
+      "timvancleef"
+    ]
+  },
+  "Glossary/ARPA": {
+    "modified": "2019-09-26T16:01:34.595Z",
+    "contributors": [
+      "StuNNixX"
+    ]
+  },
+  "Glossary/ASCII": {
+    "modified": "2019-03-23T22:12:48.337Z",
+    "contributors": [
+      "Tyrandus",
+      "Siphalor"
+    ]
+  },
+  "Glossary/ATAG": {
+    "modified": "2019-07-16T20:07:08.739Z",
+    "contributors": [
+      "christianheinrichs",
+      "Tyrandus"
+    ]
+  },
+  "Glossary/Abstraktion": {
+    "modified": "2019-03-23T22:15:58.737Z",
+    "contributors": [
+      "Sebastianz",
+      "ursingold",
+      "t1m0fej"
+    ]
+  },
+  "Glossary/Accessibility": {
+    "modified": "2019-03-18T21:41:37.798Z",
+    "contributors": [
+      "fhwfzfge"
+    ]
+  },
+  "Glossary/Adobe_Flash": {
+    "modified": "2019-03-18T21:38:09.234Z",
+    "contributors": [
+      "duckymirror"
+    ]
+  },
+  "Glossary/Algorithmus": {
+    "modified": "2019-03-23T22:10:22.994Z",
+    "contributors": [
+      "herbmaier",
+      "Tyrandus"
+    ]
+  },
+  "Glossary/Anweisung": {
+    "modified": "2019-04-20T19:38:11.191Z",
+    "contributors": [
+      "GreenPepper",
+      "Tyrandus"
+    ]
+  },
+  "Glossary/Apple_Safari": {
+    "modified": "2019-03-23T22:12:52.875Z",
+    "contributors": [
+      "Siphalor"
+    ]
+  },
+  "Glossary/Argument": {
+    "modified": "2019-07-31T17:50:44.168Z",
+    "contributors": [
+      "DavidBarke",
+      "Siphalor"
+    ]
+  },
+  "Glossary/Asynchron": {
+    "modified": "2019-06-18T06:50:55.111Z",
+    "contributors": [
+      "dbraun"
+    ]
+  },
+  "Glossary/Attribute": {
+    "modified": "2019-03-23T22:12:44.567Z",
+    "contributors": [
+      "CennoxX",
+      "Siphalor"
+    ]
+  },
+  "Glossary/Bandbreite": {
+    "modified": "2019-03-23T22:08:37.747Z",
+    "contributors": [
+      "sigoa",
+      "Rebecca70"
+    ]
+  },
+  "Glossary/Block": {
+    "modified": "2019-03-23T22:10:15.560Z",
+    "contributors": [
+      "Tyrandus"
+    ]
+  },
+  "Glossary/Block/CSS": {
+    "modified": "2019-03-23T22:10:18.354Z",
+    "contributors": [
+      "Tyrandus"
+    ]
+  },
+  "Glossary/Block/Scripting": {
+    "modified": "2019-07-31T17:47:15.023Z",
+    "contributors": [
+      "DavidBarke",
+      "Tyrandus"
+    ]
+  },
+  "Glossary/Boolean": {
+    "modified": "2020-05-06T18:18:55.401Z",
+    "contributors": [
+      "zuzuzu",
+      "Siphalor"
+    ]
+  },
+  "Glossary/Bootstrap": {
+    "modified": "2020-04-26T05:37:23.217Z",
+    "contributors": [
+      "Klingohle"
+    ]
+  },
+  "Glossary/Browser": {
+    "modified": "2019-03-23T22:19:19.624Z",
+    "contributors": [
+      "fhwfzfge",
+      "pixelwiese"
+    ]
+  },
+  "Glossary/CDN": {
+    "modified": "2019-03-18T21:36:11.693Z",
+    "contributors": [
+      "Sixl-Daniel"
+    ]
+  },
+  "Glossary/CMS": {
+    "modified": "2019-07-09T09:57:48.292Z",
+    "contributors": [
+      "marcelalmesberger"
+    ]
+  },
+  "Glossary/CORS": {
+    "modified": "2019-03-18T21:25:15.532Z",
+    "contributors": [
+      "timvancleef"
+    ]
+  },
+  "Glossary/CORS-zugelassener-anfrage-header": {
+    "modified": "2020-01-30T18:28:06.437Z",
+    "contributors": [
+      "TorbenKoehn"
+    ]
+  },
+  "Glossary/CRLF": {
+    "modified": "2019-07-03T15:43:20.749Z",
+    "contributors": [
+      "PercyGitarrist"
+    ]
+  },
+  "Glossary/CSS": {
+    "modified": "2019-03-23T22:15:58.284Z",
+    "contributors": [
+      "Johann150",
+      "42triangles",
+      "th1nk3th",
+      "Siphalor"
+    ]
+  },
+  "Glossary/CSS_Praeprozessor": {
+    "modified": "2019-03-18T21:36:27.239Z",
+    "contributors": [
+      "Sixl-Daniel"
+    ]
+  },
+  "Glossary/Cache": {
+    "modified": "2019-03-18T21:14:43.666Z",
+    "contributors": [
+      "inverted-hat"
+    ]
+  },
+  "Glossary/CalDAV": {
+    "modified": "2019-07-16T22:22:01.791Z",
+    "contributors": [
+      "christianheinrichs"
+    ]
+  },
+  "Glossary/Canvas": {
+    "modified": "2019-03-18T21:27:17.671Z",
+    "contributors": [
+      "timvancleef",
+      "duckymirror"
+    ]
+  },
+  "Glossary/Card_sorting": {
+    "modified": "2019-03-18T21:18:41.531Z",
+    "contributors": [
+      "tschach"
+    ]
+  },
+  "Glossary/Character": {
+    "modified": "2019-07-16T20:34:30.794Z",
+    "contributors": [
+      "christianheinrichs"
+    ]
+  },
+  "Glossary/Chrome": {
+    "modified": "2019-03-18T21:22:37.925Z",
+    "contributors": [
+      "DanielNL"
+    ]
+  },
+  "Glossary/Codec": {
+    "modified": "2019-07-03T15:06:19.710Z",
+    "contributors": [
+      "PercyGitarrist"
+    ]
+  },
+  "Glossary/Compile_time": {
+    "modified": "2019-07-16T20:23:03.824Z",
+    "contributors": [
+      "christianheinrichs"
+    ]
+  },
+  "Glossary/Cookie": {
+    "modified": "2019-03-18T21:14:43.300Z",
+    "contributors": [
+      "inverted-hat"
+    ]
+  },
+  "Glossary/Crawler": {
+    "modified": "2019-03-18T21:16:18.027Z",
+    "contributors": [
+      "pastparty"
+    ]
+  },
+  "Glossary/DHTML": {
+    "modified": "2019-07-16T20:42:27.987Z",
+    "contributors": [
+      "christianheinrichs"
+    ]
+  },
+  "Glossary/DNS": {
+    "modified": "2019-03-23T22:12:52.961Z",
+    "contributors": [
+      "Siphalor"
+    ]
+  },
+  "Glossary/DOM": {
+    "modified": "2019-03-18T21:32:34.579Z",
+    "contributors": [
+      "axelrindle"
+    ]
+  },
+  "Glossary/DOS_attack": {
+    "modified": "2019-03-23T22:12:27.718Z",
+    "contributors": [
+      "PercyGitarrist"
+    ]
+  },
+  "Glossary/DTD": {
+    "modified": "2019-07-04T23:44:01.071Z",
+    "contributors": [
+      "PercyGitarrist"
+    ]
+  },
+  "Glossary/Data_structure": {
+    "modified": "2019-07-16T20:37:24.466Z",
+    "contributors": [
+      "christianheinrichs"
+    ]
+  },
+  "Glossary/Datenkapselung": {
+    "modified": "2020-09-30T06:05:42.392Z",
+    "contributors": [
+      "Klingohle"
+    ]
+  },
+  "Glossary/Denial_of_Service": {
+    "modified": "2019-01-17T02:56:58.052Z",
+    "contributors": [
+      "ahmadnourallah"
+    ]
+  },
+  "Glossary/Doctype": {
+    "modified": "2019-03-18T21:31:08.161Z",
+    "contributors": [
+      "PlayLikeLars"
+    ]
+  },
+  "Glossary/Domain_Name": {
+    "modified": "2019-03-23T22:09:23.052Z",
+    "contributors": [
+      "Anonymous"
+    ]
+  },
+  "Glossary/ECMA": {
+    "modified": "2019-03-23T22:38:22.610Z",
+    "contributors": [
+      "Siphalor",
+      "manumiu"
+    ]
+  },
+  "Glossary/ECMAScript": {
+    "modified": "2019-07-16T20:45:49.886Z",
+    "contributors": [
+      "christianheinrichs",
+      "sigoa"
+    ]
+  },
+  "Glossary/Element": {
+    "modified": "2019-03-18T21:32:38.372Z",
+    "contributors": [
+      "axelrindle"
+    ]
+  },
+  "Glossary/FTP": {
+    "modified": "2019-07-16T21:16:05.354Z",
+    "contributors": [
+      "christianheinrichs"
+    ]
+  },
+  "Glossary/Falsy": {
+    "modified": "2020-04-04T11:10:35.168Z",
+    "contributors": [
+      "axelrindle",
+      "Ryuno-Ki",
+      "sspringer82",
+      "Eiknheimer"
+    ]
+  },
+  "Glossary/Firefox_OS": {
+    "modified": "2019-07-16T20:57:14.425Z",
+    "contributors": [
+      "christianheinrichs"
+    ]
+  },
+  "Glossary/Flex": {
+    "modified": "2020-07-03T19:19:31.495Z",
+    "contributors": [
+      "duckymirror"
+    ]
+  },
+  "Glossary/Flexbox": {
+    "modified": "2020-04-28T14:38:18.338Z",
+    "contributors": [
+      "Klingohle"
+    ]
+  },
+  "Glossary/Funktion_erster-Klasse": {
+    "modified": "2019-03-18T21:30:30.219Z",
+    "contributors": [
+      "king-tom"
+    ]
+  },
+  "Glossary/GPU": {
+    "modified": "2019-01-17T02:50:36.393Z",
+    "contributors": [
+      "duckymirror"
+    ]
+  },
+  "Glossary/GZip_compression": {
+    "modified": "2019-03-18T21:16:18.586Z",
+    "contributors": [
+      "pastparty"
+    ]
+  },
+  "Glossary/Git": {
+    "modified": "2019-03-23T22:03:45.932Z",
+    "contributors": [
+      "PeterMader"
+    ]
+  },
+  "Glossary/Graceful_degradation": {
+    "modified": "2019-03-18T21:18:41.082Z",
+    "contributors": [
+      "tschach"
+    ]
+  },
+  "Glossary/Grid": {
+    "modified": "2019-04-30T16:22:31.119Z",
+    "contributors": [
+      "janklaeger"
+    ]
+  },
+  "Glossary/Gutters": {
+    "modified": "2019-06-28T17:18:01.309Z",
+    "contributors": [
+      "hellschu"
+    ]
+  },
+  "Glossary/HTML": {
+    "modified": "2019-03-23T22:45:13.400Z",
+    "contributors": [
+      "ursingold",
+      "GerhardStingl",
+      "jumpball",
+      "22samuelk"
+    ]
+  },
+  "Glossary/HTML5": {
+    "modified": "2019-05-21T11:16:16.898Z",
+    "contributors": [
+      "Exblosis"
+    ]
+  },
+  "Glossary/HTTP": {
+    "modified": "2019-03-23T22:18:56.738Z",
+    "contributors": [
+      "jens1o",
+      "cob"
+    ]
+  },
+  "Glossary/Herstellerpräfix": {
+    "modified": "2019-03-23T22:29:22.756Z",
+    "contributors": [
+      "Tyrandus",
+      "1903Daniel"
+    ]
+  },
+  "Glossary/Hoisting": {
+    "modified": "2019-03-18T20:48:10.960Z",
+    "contributors": [
+      "SebinNyshkim",
+      "eluchsinger"
+    ]
+  },
+  "Glossary/Hyperlink": {
+    "modified": "2019-03-18T21:38:11.272Z",
+    "contributors": [
+      "duckymirror"
+    ]
+  },
+  "Glossary/IDE": {
+    "modified": "2020-04-27T12:50:30.779Z",
+    "contributors": [
+      "Klingohle"
+    ]
+  },
+  "Glossary/IETF": {
+    "modified": "2019-07-16T22:29:20.265Z",
+    "contributors": [
+      "christianheinrichs"
+    ]
+  },
+  "Glossary/IIFE": {
+    "modified": "2020-08-24T06:52:59.941Z",
+    "contributors": [
+      "anme98"
+    ]
+  },
+  "Glossary/IMAP": {
+    "modified": "2020-06-01T13:05:53.063Z",
+    "contributors": [
+      "Klingohle"
+    ]
+  },
+  "Glossary/ISO": {
+    "modified": "2019-03-18T21:32:20.907Z",
+    "contributors": [
+      "axelrindle"
+    ]
+  },
+  "Glossary/Identifier": {
+    "modified": "2019-03-18T21:32:54.530Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Glossary/IndexedDB": {
+    "modified": "2019-03-23T22:25:48.301Z",
+    "contributors": [
+      "PercyGitarrist"
+    ]
+  },
+  "Glossary/Informationsarchitektur": {
+    "modified": "2019-03-18T21:18:25.933Z",
+    "contributors": [
+      "tschach"
+    ]
+  },
+  "Glossary/Internet": {
+    "modified": "2019-03-23T22:09:31.438Z",
+    "contributors": [
+      "Anonymous"
+    ]
+  },
+  "Glossary/JSON": {
+    "modified": "2019-07-31T17:39:12.065Z",
+    "contributors": [
+      "DavidBarke",
+      "Siphalor"
+    ]
+  },
+  "Glossary/Jank": {
+    "modified": "2019-03-23T22:07:46.052Z",
+    "contributors": [
+      "sigoa",
+      "janakue"
+    ]
+  },
+  "Glossary/JavaScript": {
+    "modified": "2020-01-08T09:15:04.165Z",
+    "contributors": [
+      "pastparty",
+      "sigoa",
+      "amelzer",
+      "Siphalor"
+    ]
+  },
+  "Glossary/Klasse": {
+    "modified": "2019-03-18T21:37:57.063Z",
+    "contributors": [
+      "duckymirror"
+    ]
+  },
+  "Glossary/Konstruktor": {
+    "modified": "2019-03-23T22:04:35.334Z",
+    "contributors": [
+      "klug_mario"
+    ]
+  },
+  "Glossary/Leeres_Element": {
+    "modified": "2019-03-18T21:32:36.396Z",
+    "contributors": [
+      "axelrindle"
+    ]
+  },
+  "Glossary/Local_scope": {
+    "modified": "2020-04-28T14:50:32.479Z",
+    "contributors": [
+      "Klingohle"
+    ]
+  },
+  "Glossary/Local_variable": {
+    "modified": "2020-04-30T14:20:25.467Z",
+    "contributors": [
+      "Klingohle"
+    ]
+  },
+  "Glossary/MIME_type": {
+    "modified": "2019-03-18T21:19:21.810Z",
+    "contributors": [
+      "DoDecaDence"
+    ]
+  },
+  "Glossary/Middleware": {
+    "modified": "2020-08-20T08:17:41.343Z",
+    "contributors": [
+      "a962017"
+    ]
+  },
+  "Glossary/Mixin": {
+    "modified": "2019-03-18T21:42:40.394Z",
+    "contributors": [
+      "CennoxX"
+    ]
+  },
+  "Glossary/Mozilla_Firefox": {
+    "modified": "2019-03-23T22:12:18.078Z",
+    "contributors": [
+      "PercyGitarrist"
+    ]
+  },
+  "Glossary/Namespace": {
+    "modified": "2020-04-25T11:20:23.323Z",
+    "contributors": [
+      "Klingohle"
+    ]
+  },
+  "Glossary/Node.js": {
+    "modified": "2019-03-23T22:25:53.895Z",
+    "contributors": [
+      "GreenPepper",
+      "PercyGitarrist"
+    ]
+  },
+  "Glossary/Null": {
+    "modified": "2019-01-17T01:09:59.257Z",
+    "contributors": [
+      "GreenPepper",
+      "sfraenkel"
+    ]
+  },
+  "Glossary/Number": {
+    "modified": "2019-03-23T22:12:46.665Z",
+    "contributors": [
+      "GreenPepper",
+      "Siphalor"
+    ]
+  },
+  "Glossary/OOP": {
+    "modified": "2019-03-18T21:31:39.740Z",
+    "contributors": [
+      "CloudMaker97"
+    ]
+  },
+  "Glossary/Objekt": {
+    "modified": "2019-03-23T22:08:37.828Z",
+    "contributors": [
+      "LazerPhil"
+    ]
+  },
+  "Glossary/Operand": {
+    "modified": "2020-04-28T14:20:36.934Z",
+    "contributors": [
+      "Klingohle"
+    ]
+  },
+  "Glossary/Operator": {
+    "modified": "2020-04-28T14:35:42.540Z",
+    "contributors": [
+      "Klingohle"
+    ]
+  },
+  "Glossary/PHP": {
+    "modified": "2019-03-23T22:40:22.272Z",
+    "contributors": [
+      "Siphalor",
+      "BernhardRubow"
+    ]
+  },
+  "Glossary/PNG": {
+    "modified": "2019-03-18T21:18:26.058Z",
+    "contributors": [
+      "tschach"
+    ]
+  },
+  "Glossary/Polyfill": {
+    "modified": "2019-03-18T21:18:41.266Z",
+    "contributors": [
+      "tschach"
+    ]
+  },
+  "Glossary/Progressive_Enhancement": {
+    "modified": "2019-03-18T21:18:33.079Z",
+    "contributors": [
+      "tschach"
+    ]
+  },
+  "Glossary/Protokoll": {
+    "modified": "2019-03-23T22:09:31.349Z",
+    "contributors": [
+      "Anonymous"
+    ]
+  },
+  "Glossary/Prototype": {
+    "modified": "2020-07-08T01:49:32.204Z",
+    "contributors": [
+      "Klingohle"
+    ]
+  },
+  "Glossary/Prototype-based_programming": {
+    "modified": "2020-09-20T06:51:43.983Z",
+    "contributors": [
+      "ThomasSpornraft",
+      "Klingohle"
+    ]
+  },
+  "Glossary/REST": {
+    "modified": "2019-10-21T09:12:57.318Z",
+    "contributors": [
+      "GR_Fuchs"
+    ]
+  },
+  "Glossary/RGB": {
+    "modified": "2019-04-04T19:03:47.057Z",
+    "contributors": [
+      "aaarichter"
+    ]
+  },
+  "Glossary/RSS": {
+    "modified": "2020-04-28T03:21:36.086Z",
+    "contributors": [
+      "Klingohle"
+    ]
+  },
+  "Glossary/Regular_expression": {
+    "modified": "2019-03-23T22:32:07.829Z",
+    "contributors": [
+      "trideon3"
+    ]
+  },
+  "Glossary/Repo": {
+    "modified": "2019-03-23T22:22:59.067Z",
+    "contributors": [
+      "schwemmer"
+    ]
+  },
+  "Glossary/Responsive_web_design": {
+    "modified": "2020-04-26T12:37:06.892Z",
+    "contributors": [
+      "Klingohle"
+    ]
+  },
+  "Glossary/Robots.txt": {
+    "modified": "2020-10-15T22:23:51.763Z",
+    "contributors": [
+      "LoVo666"
+    ]
+  },
+  "Glossary/SQL": {
+    "modified": "2019-03-18T21:39:17.726Z",
+    "contributors": [
+      "Dieter2019"
+    ]
+  },
+  "Glossary/SVG": {
+    "modified": "2019-03-23T22:07:22.255Z",
+    "contributors": [
+      "Claas",
+      "th1nk3th"
+    ]
+  },
+  "Glossary/Scope": {
+    "modified": "2020-08-21T16:14:18.225Z",
+    "contributors": [
+      "steevn",
+      "jewuma"
+    ]
+  },
+  "Glossary/Server": {
+    "modified": "2019-03-23T22:08:18.228Z",
+    "contributors": [
+      "axelrindle",
+      "Siphalor"
+    ]
+  },
+  "Glossary/Sloppy_mode": {
+    "modified": "2019-03-18T20:48:46.771Z",
+    "contributors": [
+      "SebinNyshkim",
+      "sigoa"
+    ]
+  },
+  "Glossary/Slug": {
+    "modified": "2020-04-25T11:40:48.940Z",
+    "contributors": [
+      "Klingohle"
+    ]
+  },
+  "Glossary/Specification": {
+    "modified": "2019-07-18T11:06:17.494Z",
+    "contributors": [
+      "christianheinrichs"
+    ]
+  },
+  "Glossary/String": {
+    "modified": "2019-03-18T20:53:19.356Z",
+    "contributors": [
+      "GreenPepper",
+      "Shidigital"
+    ]
+  },
+  "Glossary/Symbol": {
+    "modified": "2019-03-23T22:34:59.987Z",
+    "contributors": [
+      "schwemmer",
+      "wirmar"
+    ]
+  },
+  "Glossary/TCP": {
+    "modified": "2019-07-16T23:18:48.078Z",
+    "contributors": [
+      "christianheinrichs"
+    ]
+  },
+  "Glossary/TLS": {
+    "modified": "2019-03-18T21:46:43.987Z",
+    "contributors": [
+      "vssn"
+    ]
+  },
+  "Glossary/Tag": {
+    "modified": "2020-04-29T16:59:11.235Z",
+    "contributors": [
+      "Klingohle"
+    ]
+  },
+  "Glossary/Truthy": {
+    "modified": "2019-03-18T20:48:41.042Z",
+    "contributors": [
+      "ctexxx",
+      "Shiryk"
+    ]
+  },
+  "Glossary/Typ": {
+    "modified": "2020-04-04T13:54:03.839Z",
+    "contributors": [
+      "axelrindle"
+    ]
+  },
+  "Glossary/Type_Conversion": {
+    "modified": "2020-04-04T13:56:57.290Z",
+    "contributors": [
+      "axelrindle"
+    ]
+  },
+  "Glossary/UI": {
+    "modified": "2020-04-25T12:00:27.819Z",
+    "contributors": [
+      "Klingohle"
+    ]
+  },
+  "Glossary/URI": {
+    "modified": "2019-07-05T05:49:16.810Z",
+    "contributors": [
+      "PercyGitarrist"
+    ]
+  },
+  "Glossary/URL": {
+    "modified": "2019-09-29T13:23:24.583Z",
+    "contributors": [
+      "StuNNixX",
+      "Anonymous"
+    ]
+  },
+  "Glossary/UX": {
+    "modified": "2019-03-18T21:18:40.937Z",
+    "contributors": [
+      "tschach"
+    ]
+  },
+  "Glossary/User_agent": {
+    "modified": "2020-05-06T18:06:41.662Z",
+    "contributors": [
+      "zuzuzu",
+      "Laubersheini"
+    ]
+  },
+  "Glossary/Validator": {
+    "modified": "2020-04-29T17:05:25.109Z",
+    "contributors": [
+      "Klingohle"
+    ]
+  },
+  "Glossary/Value": {
+    "modified": "2019-03-18T20:53:19.213Z",
+    "contributors": [
+      "GreenPepper",
+      "Siphalor"
+    ]
+  },
+  "Glossary/Variable": {
+    "modified": "2019-03-23T22:12:40.993Z",
+    "contributors": [
+      "schlagi123",
+      "Siphalor"
+    ]
+  },
+  "Glossary/Viewport": {
+    "modified": "2019-07-05T01:01:06.329Z",
+    "contributors": [
+      "PercyGitarrist"
+    ]
+  },
+  "Glossary/Visual_Viewport": {
+    "modified": "2019-07-05T00:40:39.361Z",
+    "contributors": [
+      "PercyGitarrist"
+    ]
+  },
+  "Glossary/VoIP": {
+    "modified": "2019-07-05T00:15:51.322Z",
+    "contributors": [
+      "PercyGitarrist"
+    ]
+  },
+  "Glossary/W3C": {
+    "modified": "2019-03-23T22:08:17.042Z",
+    "contributors": [
+      "Johann150",
+      "Siphalor"
+    ]
+  },
+  "Glossary/WAI": {
+    "modified": "2019-03-18T21:41:34.671Z",
+    "contributors": [
+      "fhwfzfge"
+    ]
+  },
+  "Glossary/WebDAV": {
+    "modified": "2019-07-16T22:18:47.130Z",
+    "contributors": [
+      "christianheinrichs"
+    ]
+  },
+  "Glossary/WebRTC": {
+    "modified": "2020-11-06T01:48:25.235Z",
+    "contributors": [
+      "Technikhighknee"
+    ]
+  },
+  "Glossary/WebSockets": {
+    "modified": "2019-03-23T22:55:04.865Z",
+    "contributors": [
+      "Siphalor",
+      "Clijsters",
+      "Nys"
+    ]
+  },
+  "Glossary/Wrapper": {
+    "modified": "2020-04-27T17:16:28.102Z",
+    "contributors": [
+      "Klingohle"
+    ]
+  },
+  "Glossary/XML": {
+    "modified": "2019-03-23T22:12:27.346Z",
+    "contributors": [
+      "duckymirror",
+      "Siphalor",
+      "PercyGitarrist"
+    ]
+  },
+  "Glossary/array": {
+    "modified": "2019-08-22T07:09:45.701Z",
+    "contributors": [
+      "devtarek",
+      "SebinNyshkim",
+      "Shidigital"
+    ]
+  },
+  "Glossary/buffer": {
+    "modified": "2019-03-18T21:31:44.605Z",
+    "contributors": [
+      "CloudMaker97"
+    ]
+  },
+  "Glossary/einfache_datenelemente": {
+    "modified": "2019-03-23T22:46:44.221Z",
+    "contributors": [
+      "Siphalor",
+      "andreas_inkoeln"
+    ]
+  },
+  "Glossary/firewall": {
+    "modified": "2019-07-16T21:05:22.003Z",
+    "contributors": [
+      "christianheinrichs"
+    ]
+  },
+  "Glossary/gif": {
+    "modified": "2019-03-18T21:38:05.982Z",
+    "contributors": [
+      "tschach",
+      "duckymirror"
+    ]
+  },
+  "Glossary/https": {
+    "modified": "2019-03-18T21:37:59.410Z",
+    "contributors": [
+      "duckymirror"
+    ]
+  },
+  "Glossary/jpeg": {
+    "modified": "2019-03-18T21:18:26.401Z",
+    "contributors": [
+      "tschach"
+    ]
+  },
+  "Glossary/undefined": {
+    "modified": "2019-03-23T22:12:50.044Z",
+    "contributors": [
+      "Siphalor"
+    ]
+  },
+  "Glossary/verbotener_header_name": {
+    "modified": "2019-03-23T22:03:16.612Z",
+    "contributors": [
+      "timmyRS"
+    ]
+  },
+  "Glossary/webm": {
+    "modified": "2019-03-18T21:18:37.955Z",
+    "contributors": [
+      "tschach"
+    ]
+  },
+  "Glossary/webp": {
+    "modified": "2019-03-18T21:18:22.556Z",
+    "contributors": [
+      "tschach"
+    ]
+  },
+  "Learn": {
+    "modified": "2020-08-11T06:37:37.645Z",
+    "contributors": [
+      "Towdo",
+      "hrfischer1983",
+      "methodx",
+      "SphinxKnight",
+      "Shidigital",
+      "babylinda1973",
+      "sigoa",
+      "makobasuri",
+      "Ayaka",
+      "LeBasti",
+      "wittmern",
+      "kscarfone"
+    ]
+  },
+  "Learn/Accessibility": {
+    "modified": "2020-07-16T22:39:56.105Z",
+    "contributors": [
+      "lkreimann",
+      "Dschubba",
+      "marcschoeni"
+    ]
+  },
+  "Learn/Accessibility/Accessibility_troubleshooting": {
+    "modified": "2020-07-16T22:40:34.377Z",
+    "contributors": [
+      "marcelalmesberger"
+    ]
+  },
+  "Learn/CSS": {
+    "modified": "2020-07-16T22:25:32.758Z",
+    "contributors": [
+      "Johann150",
+      "optimus-yarnspinner"
+    ]
+  },
+  "Learn/CSS/Building_blocks": {
+    "modified": "2020-07-16T22:28:07.153Z",
+    "contributors": [
+      "GiovanniHD201E"
+    ]
+  },
+  "Learn/CSS/Building_blocks/Organizing": {
+    "modified": "2020-11-22T15:02:52.846Z",
+    "contributors": [
+      "hellschu"
+    ]
+  },
+  "Learn/CSS/Building_blocks/Werten_Einheiten": {
+    "modified": "2020-07-16T22:28:56.210Z",
+    "contributors": [
+      "GiovanniHD201E"
+    ]
+  },
+  "Learn/CSS/CSS_layout": {
+    "modified": "2020-08-05T14:18:54.916Z",
+    "contributors": [
+      "chrisdavidmills"
+    ]
+  },
+  "Learn/CSS/CSS_layout/Flexbox": {
+    "modified": "2020-08-05T14:18:57.862Z",
+    "contributors": [
+      "getthepoint"
+    ]
+  },
+  "Learn/CSS/First_steps": {
+    "modified": "2020-09-03T14:11:36.912Z",
+    "contributors": [
+      "wm75"
+    ]
+  },
+  "Learn/CSS/Styling_text": {
+    "modified": "2020-09-05T15:36:12.926Z",
+    "contributors": [
+      "chrisdavidmills"
+    ]
+  },
+  "Learn/Common_questions": {
+    "modified": "2020-07-16T22:35:21.824Z"
+  },
+  "Learn/Common_questions/Upload_files_to_a_web_server": {
+    "modified": "2020-07-16T22:35:41.440Z",
+    "contributors": [
+      "christianheinrichs",
+      "LH-10"
+    ]
+  },
+  "Learn/Common_questions/Wie_das_Internet_funktioniert": {
+    "modified": "2020-07-16T22:35:36.371Z",
+    "contributors": [
+      "frankwinter",
+      "NetiHeft"
+    ]
+  },
+  "Learn/Getting_started_with_the_web": {
+    "modified": "2020-11-24T12:50:40.168Z",
+    "contributors": [
+      "FrederikWeitz",
+      "GiovanniHD201E",
+      "DavidBarke",
+      "PercyGitarrist",
+      "Dschubba",
+      "cookiekoenig",
+      "sigoa",
+      "Aryx",
+      "Shidigital",
+      "sbruder",
+      "greasan",
+      "d_jan"
+    ]
+  },
+  "Learn/Getting_started_with_the_web/CSS_basics": {
+    "modified": "2020-07-16T22:34:56.746Z",
+    "contributors": [
+      "urewig",
+      "jess-e-bee",
+      "Aryx",
+      "Shidigital",
+      "sbruder",
+      "AlexanderZiegler"
+    ]
+  },
+  "Learn/Getting_started_with_the_web/HTML_basics": {
+    "modified": "2020-11-24T12:59:37.280Z",
+    "contributors": [
+      "FrederikWeitz",
+      "blopesfo",
+      "nitramrelpmur",
+      "Aryx",
+      "Shidigital",
+      "sbruder",
+      "Bissmarc",
+      "AndreasL",
+      "dobra",
+      "janjo",
+      "maybe"
+    ]
+  },
+  "Learn/Getting_started_with_the_web/Installing_basic_software": {
+    "modified": "2020-11-24T12:58:01.692Z",
+    "contributors": [
+      "FrederikWeitz",
+      "Dschubba",
+      "Aryx",
+      "Shidigital",
+      "Oliver_Schafeld",
+      "spiotro",
+      "Fl0tallicA",
+      "d_jan"
+    ]
+  },
+  "Learn/Getting_started_with_the_web/JavaScript_basis": {
+    "modified": "2020-07-16T22:35:08.850Z",
+    "contributors": [
+      "jorgemontoyab",
+      "urewig",
+      "loicyondjeu",
+      "ilonaherr",
+      "SaschaHeyer",
+      "fxmt",
+      "Shidigital",
+      "hapeit",
+      "danielsimon1",
+      "nuracubeTranslations",
+      "QuaGS",
+      "monja-schreppel",
+      "Purple-Vampire"
+    ]
+  },
+  "Learn/Getting_started_with_the_web/Publishing_your_website": {
+    "modified": "2020-07-16T22:34:23.783Z",
+    "contributors": [
+      "KadirTopal",
+      "metafon",
+      "Shidigital"
+    ]
+  },
+  "Learn/Getting_started_with_the_web/What_will_your_website_look_like": {
+    "modified": "2020-11-24T12:45:53.560Z",
+    "contributors": [
+      "FrederikWeitz",
+      "michaelhochleitner",
+      "Aryx",
+      "Shidigital",
+      "Bissmarc",
+      "AndreasL",
+      "d_jan"
+    ]
+  },
+  "Learn/Getting_started_with_the_web/Wie_das_Internet_funktioniert": {
+    "modified": "2020-07-16T22:33:59.338Z",
+    "contributors": [
+      "Shidigital"
+    ]
+  },
+  "Learn/Getting_started_with_the_web/dateien_nutzen": {
+    "modified": "2020-07-16T22:34:32.214Z",
+    "contributors": [
+      "michaelhochleitner",
+      "Aryx",
+      "vosspl",
+      "Shidigital",
+      "Bissmarc",
+      "janjo",
+      "d_jan"
+    ]
+  },
+  "Learn/HTML": {
+    "modified": "2020-07-16T22:22:15.700Z",
+    "contributors": [
+      "sigoa",
+      "Shidigital",
+      "Christian2507",
+      "urshensler",
+      "Marlonzockt",
+      "Trollderim"
+    ]
+  },
+  "Learn/HTML/Einführung_in_HTML": {
+    "modified": "2020-07-16T22:22:45.948Z",
+    "contributors": [
+      "PercyGitarrist",
+      "mprofitl",
+      "LeifMensing",
+      "Shidigital"
+    ]
+  },
+  "Learn/HTML/Einführung_in_HTML/Der_Kopf_Metadaten_in_HTML": {
+    "modified": "2020-07-16T22:23:17.212Z",
+    "contributors": [
+      "Shidigital"
+    ]
+  },
+  "Learn/HTML/Einführung_in_HTML/Document_and_website_structure": {
+    "modified": "2020-07-16T22:24:03.053Z",
+    "contributors": [
+      "DiscW0rld",
+      "fdeberle",
+      "Shidigital",
+      "Woehe2010",
+      "fataly01"
+    ]
+  },
+  "Learn/HTML/Einführung_in_HTML/Einfache_Textformatierung_in_HTML": {
+    "modified": "2020-07-16T22:23:30.695Z",
+    "contributors": [
+      "Hofei",
+      "Shidigital"
+    ]
+  },
+  "Learn/HTML/Einführung_in_HTML/Erstellen_von_Hyperlinks": {
+    "modified": "2020-07-16T22:23:43.017Z",
+    "contributors": [
+      "Shidigital"
+    ]
+  },
+  "Learn/HTML/Einführung_in_HTML/Fehlersuche_in_HTML": {
+    "modified": "2020-07-16T22:24:11.946Z",
+    "contributors": [
+      "LeniTastic",
+      "Shidigital"
+    ]
+  },
+  "Learn/HTML/Einführung_in_HTML/Fortgeschrittene_Textformatierung": {
+    "modified": "2020-07-16T22:23:51.933Z",
+    "contributors": [
+      "Shidigital"
+    ]
+  },
+  "Learn/HTML/Einführung_in_HTML/Lerne_HTML_kennen": {
+    "modified": "2020-11-19T12:58:27.172Z",
+    "contributors": [
+      "fiji-flo",
+      "Kometheus",
+      "nitramrelpmur",
+      "Shidigital"
+    ]
+  },
+  "Learn/HTML/Einführung_in_HTML/Marking_up_a_letter": {
+    "modified": "2020-07-16T22:23:11.514Z",
+    "contributors": [
+      "DiscW0rld",
+      "LeniTastic",
+      "msifrt"
+    ]
+  },
+  "Learn/HTML/Einführung_in_HTML/Structuring_a_page_of_content": {
+    "modified": "2020-07-16T22:24:17.990Z",
+    "contributors": [
+      "DiscW0rld"
+    ]
+  },
+  "Learn/HTML/Forms": {
+    "modified": "2020-07-16T22:20:54.604Z",
+    "contributors": [
+      "Ryuno-Ki",
+      "PercyGitarrist",
+      "F.nn"
+    ]
+  },
+  "Learn/HTML/Multimedia_and_embedding": {
+    "modified": "2020-10-08T13:45:43.288Z",
+    "contributors": [
+      "Reinhard_Welsing",
+      "DiscW0rld"
+    ]
+  },
+  "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page": {
+    "modified": "2020-07-16T22:25:06.237Z",
+    "contributors": [
+      "DiscW0rld"
+    ]
+  },
+  "Learn/HTML/Tables": {
+    "modified": "2020-07-16T22:25:10.661Z",
+    "contributors": [
+      "PercyGitarrist"
+    ]
+  },
+  "Learn/HTML/Tables/Grund_tabelle_HTML": {
+    "modified": "2020-07-16T22:25:19.143Z",
+    "contributors": [
+      "GiovanniHD201E"
+    ]
+  },
+  "Learn/JavaScript": {
+    "modified": "2020-07-16T22:29:37.369Z",
+    "contributors": [
+      "ManfredHTML",
+      "DrunkenTaunt"
+    ]
+  },
+  "Learn/JavaScript/Bausteine": {
+    "modified": "2020-07-16T22:31:06.733Z",
+    "contributors": [
+      "Osslack"
+    ]
+  },
+  "Learn/JavaScript/Bausteine/Ereignisse": {
+    "modified": "2020-07-16T22:31:36.524Z",
+    "contributors": [
+      "kaip-e",
+      "GiovanniHD201E"
+    ]
+  },
+  "Learn/JavaScript/First_steps": {
+    "modified": "2020-07-16T22:29:48.847Z",
+    "contributors": [
+      "CruzR",
+      "Elllenn"
+    ]
+  },
+  "Learn/JavaScript/First_steps/Erster_Blick": {
+    "modified": "2020-07-16T22:30:16.778Z",
+    "contributors": [
+      "GiovanniHD201E",
+      "Thomas-Zenkel"
+    ]
+  },
+  "Learn/JavaScript/First_steps/Useful_string_methods": {
+    "modified": "2020-07-16T22:30:45.510Z",
+    "contributors": [
+      "Mugges"
+    ]
+  },
+  "Learn/JavaScript/First_steps/Variables": {
+    "modified": "2020-07-16T22:29:58.071Z",
+    "contributors": [
+      "felix23.fn",
+      "mermolaev"
+    ]
+  },
+  "Learn/JavaScript/First_steps/Was_ist_JavaScript": {
+    "modified": "2020-09-29T09:38:57.543Z",
+    "contributors": [
+      "Devoryo",
+      "mchoeti",
+      "GreenPepper",
+      "hpawe01",
+      "Bissmarc",
+      "woiddale",
+      "JorisGutjahr"
+    ]
+  },
+  "Learn/JavaScript/First_steps/lustige_geschichten_generator": {
+    "modified": "2020-07-16T22:31:00.101Z",
+    "contributors": [
+      "Strubinator"
+    ]
+  },
+  "Learn/JavaScript/Objects": {
+    "modified": "2020-07-16T22:31:47.973Z",
+    "contributors": [
+      "CloudMaker97",
+      "Ch0coL8te"
+    ]
+  },
+  "Learn/JavaScript/Objects/Basics": {
+    "modified": "2020-08-25T16:52:03.284Z",
+    "contributors": [
+      "steevn",
+      "Timbuktu1982",
+      "22tcp"
+    ]
+  },
+  "Learn/JavaScript/Objects/Inheritance": {
+    "modified": "2020-07-16T22:32:11.988Z",
+    "contributors": [
+      "MrFootwork"
+    ]
+  },
+  "Learn/JavaScript/Objects/JSON": {
+    "modified": "2020-07-16T22:32:24.377Z",
+    "contributors": [
+      "MuellerRi",
+      "DirkMassmann"
+    ]
+  },
+  "Learn/JavaScript/Objects/Object-oriented_JS": {
+    "modified": "2020-07-16T22:32:04.669Z",
+    "contributors": [
+      "Timbuktu1982",
+      "bluefor2"
+    ]
+  },
+  "Learn/JavaScript/Objects/Object_prototypes": {
+    "modified": "2020-07-16T22:32:18.828Z",
+    "contributors": [
+      "Timbuktu1982"
+    ]
+  },
+  "Learn/Mitarbeiten": {
+    "modified": "2020-07-16T22:33:42.823Z",
+    "contributors": [
+      "SphinxKnight",
+      "1000eyes",
+      "der_rofler"
+    ]
+  },
+  "Learn/Server-side": {
+    "modified": "2020-07-16T22:35:55.694Z",
+    "contributors": [
+      "LeifMensing",
+      "PercyGitarrist"
+    ]
+  },
+  "Learn/Server-side/Erste_Schritte": {
+    "modified": "2020-07-16T22:36:07.662Z",
+    "contributors": [
+      "LeifMensing",
+      "Dschubba"
+    ]
+  },
+  "Learn/Server-side/Erste_Schritte/Introduction": {
+    "modified": "2020-07-16T22:36:12.624Z",
+    "contributors": [
+      "NetiHeft",
+      "Dschubba"
+    ]
+  },
+  "Learn/Server-side/Express_Nodejs": {
+    "modified": "2020-07-16T22:37:51.185Z",
+    "contributors": [
+      "Oliver_Schafeld",
+      "Steffen1998"
+    ]
+  },
+  "Learn/Server-side/Express_Nodejs/mongoose": {
+    "modified": "2020-07-16T22:38:19.573Z",
+    "contributors": [
+      "Chorris"
+    ]
+  },
+  "Learn/Tools_and_testing": {
+    "modified": "2020-07-16T22:38:53.810Z",
+    "contributors": [
+      "Skasi",
+      "alex_hammerschmied"
+    ]
+  },
+  "Learn/Tools_and_testing/Cross_browser_testing": {
+    "modified": "2020-07-16T22:38:59.366Z",
+    "contributors": [
+      "wbamberg"
+    ]
+  },
+  "Lokalisierung": {
+    "modified": "2019-03-24T00:15:25.257Z",
+    "contributors": [
+      "taralushi",
+      "fscholz",
+      "WayneSchlegel",
+      "DirkS",
+      "maik666",
+      "René Schwarz",
+      "Ak120"
+    ]
+  },
+  "MDN": {
+    "modified": "2019-09-10T15:39:15.802Z",
+    "contributors": [
+      "SphinxKnight",
+      "wbamberg",
+      "GeMine",
+      "Jeremie",
+      "sbarthel",
+      "teoli",
+      "fscholz",
+      "Sheppy"
+    ]
+  },
+  "MDN/Community": {
+    "modified": "2019-06-15T16:58:37.273Z",
+    "contributors": [
+      "sklicek",
+      "rs-github",
+      "wbamberg",
+      "BavarianMax",
+      "Jeremie",
+      "SvenSaarland",
+      "msebastian100",
+      "Stefan_hr4u"
+    ]
+  },
+  "MDN/Community/Bleibe_auf_dem_Laufenden": {
+    "modified": "2019-03-23T23:27:28.266Z",
+    "contributors": [
+      "wbamberg",
+      "Sebastianz",
+      "UweDirk"
+    ]
+  },
+  "MDN/Contribute": {
+    "modified": "2019-03-23T23:20:05.396Z",
+    "contributors": [
+      "wbamberg",
+      "matze",
+      "sbarthel",
+      "Sheppy"
+    ]
+  },
+  "MDN/Contribute/Feedback": {
+    "modified": "2020-11-28T23:34:47.349Z",
+    "contributors": [
+      "chrisdavidmills",
+      "jswisher",
+      "SphinxKnight",
+      "Streamities",
+      "wbamberg",
+      "Sebastianz"
+    ]
+  },
+  "MDN/Contribute/Getting_started": {
+    "modified": "2020-09-30T17:09:44.157Z",
+    "contributors": [
+      "chrisdavidmills",
+      "wbamberg",
+      "Kairyon",
+      "matze",
+      "sbarthel"
+    ]
+  },
+  "MDN/Contribute/Howto": {
+    "modified": "2019-03-23T23:17:41.242Z",
+    "contributors": [
+      "wbamberg",
+      "sbarthel",
+      "Sheppy"
+    ]
+  },
+  "MDN/Contribute/Howto/Convert_code_samples_to_be_live": {
+    "modified": "2019-01-16T23:07:11.407Z",
+    "contributors": [
+      "wbamberg",
+      "lmoench",
+      "Tutz"
+    ]
+  },
+  "MDN/Contribute/Howto/Do_a_technical_review": {
+    "modified": "2019-01-16T19:26:44.220Z",
+    "contributors": [
+      "wbamberg",
+      "jordylol2006",
+      "Sebastianz"
+    ]
+  },
+  "MDN/Contribute/Howto/Do_an_editorial_review": {
+    "modified": "2019-01-16T19:26:12.299Z",
+    "contributors": [
+      "wbamberg",
+      "sigoa",
+      "Sebastianz"
+    ]
+  },
+  "MDN/Contribute/Howto/Document_a_CSS_property": {
+    "modified": "2020-02-19T18:56:54.852Z",
+    "contributors": [
+      "jswisher",
+      "SphinxKnight",
+      "wbamberg",
+      "teoli"
+    ]
+  },
+  "MDN/Contribute/Howto/ERstellung_eines_MDN_Profils": {
+    "modified": "2019-07-28T03:19:41.741Z",
+    "contributors": [
+      "wbamberg",
+      "darkfeile",
+      "lutzip0",
+      "Dev201",
+      "jumpball",
+      "jogi23",
+      "Clonkh"
+    ]
+  },
+  "MDN/Contribute/Howto/Schlagwörter_für_JavaScript_Seiten": {
+    "modified": "2019-01-16T21:20:05.744Z",
+    "contributors": [
+      "wbamberg",
+      "hictox"
+    ]
+  },
+  "MDN/Contribute/Howto/Set_the_summary_for_a_page": {
+    "modified": "2019-01-16T19:16:53.470Z",
+    "contributors": [
+      "wbamberg",
+      "githubsvc",
+      "4680",
+      "maxsu"
+    ]
+  },
+  "MDN/Contribute/Howto/Tag": {
+    "modified": "2019-07-04T23:25:18.289Z",
+    "contributors": [
+      "PercyGitarrist",
+      "wbamberg",
+      "Sixl-Daniel",
+      "vssn",
+      "hictox",
+      "ichlebelangeweb.de",
+      "drillmeister",
+      "clone"
+    ]
+  },
+  "MDN/Contribute/Localize": {
+    "modified": "2019-01-16T18:27:04.795Z",
+    "contributors": [
+      "wbamberg",
+      "matze",
+      "sbarthel",
+      "Sheppy"
+    ]
+  },
+  "MDN/Contribute/Localize/Translating_pages": {
+    "modified": "2019-12-08T20:42:59.132Z",
+    "contributors": [
+      "DavidBarke",
+      "wbamberg",
+      "fhwfzfge",
+      "PercyGitarrist",
+      "yckart",
+      "skl",
+      "Jeremie",
+      "Econ",
+      "jlelse4ever",
+      "jokofox",
+      "RalphSchwarz",
+      "rausven24"
+    ]
+  },
+  "MDN/Contribute/zu_tun_im_MDN": {
+    "modified": "2019-01-16T20:30:11.342Z",
+    "contributors": [
+      "wbamberg",
+      "dario.bloch"
+    ]
+  },
+  "MDN/Guidelines": {
+    "modified": "2020-09-30T15:28:44.297Z",
+    "contributors": [
+      "chrisdavidmills",
+      "wbamberg",
+      "Jeremie",
+      "Sheppy"
+    ]
+  },
+  "MDN/Guidelines/Style_guide": {
+    "modified": "2020-09-30T15:28:44.875Z",
+    "contributors": [
+      "chrisdavidmills",
+      "stephanduesterhoeft",
+      "jswisher",
+      "Dschubba",
+      "wbamberg",
+      "Jeremie",
+      "PaddyKfg",
+      "Montana7755"
+    ]
+  },
+  "MDN/Kuma": {
+    "modified": "2020-04-22T10:45:47.041Z",
+    "contributors": [
+      "clemens.klapp",
+      "SphinxKnight",
+      "wbamberg",
+      "JorisGutjahr",
+      "Jeremie",
+      "Sheppy"
+    ]
+  },
+  "MDN/Kuma/Beheben_von_KumaScript_Fehlern": {
+    "modified": "2019-01-16T21:24:01.701Z",
+    "contributors": [
+      "wbamberg",
+      "rolandm"
+    ]
+  },
+  "MDN/Structures": {
+    "modified": "2020-09-30T09:04:48.225Z",
+    "contributors": [
+      "chrisdavidmills",
+      "wbamberg",
+      "SphinxKnight",
+      "hartmann2012"
+    ]
+  },
+  "MDN/Structures/Kompatibilitaets_Tabellen": {
+    "modified": "2020-10-15T22:06:38.248Z",
+    "contributors": [
+      "chrisdavidmills",
+      "thunderhook",
+      "wbamberg",
+      "jogemu"
+    ]
+  },
+  "MDN/nutzer_leitfaden": {
+    "modified": "2019-03-23T22:50:19.741Z",
+    "contributors": [
+      "wbamberg",
+      "jezdez",
+      "LeindK"
+    ]
+  },
+  "MDN/Über": {
+    "modified": "2019-09-10T08:51:50.833Z",
+    "contributors": [
+      "SphinxKnight",
+      "Streamities",
+      "wbamberg",
+      "rs-github"
+    ]
+  },
+  "MDN/Über/Link_zu_MDN": {
+    "modified": "2019-01-17T03:01:28.772Z",
+    "contributors": [
+      "wbamberg",
+      "sklicek"
+    ]
+  },
+  "MDN_at_ten": {
+    "modified": "2019-03-23T22:49:50.216Z",
+    "contributors": [
+      "1000eyes",
+      "stephaniehobson",
+      "Evotopid",
+      "Sheppy"
+    ]
+  },
+  "MDN_at_ten/History_of_MDN": {
+    "modified": "2019-03-23T22:49:53.083Z",
+    "contributors": [
+      "stephaniehobson",
+      "Sebastianz"
+    ]
+  },
+  "MDN_at_ten/Zum_MDN_beitragen": {
+    "modified": "2020-02-19T18:50:24.408Z",
+    "contributors": [
+      "jswisher",
+      "1000eyes"
+    ]
+  },
+  "Mozilla": {
+    "modified": "2019-03-23T23:36:50.960Z",
+    "contributors": [
+      "lucago",
+      "ethertank",
+      "ziyunfei"
+    ]
+  },
+  "Mozilla/Add-ons": {
+    "modified": "2020-05-31T03:10:31.630Z",
+    "contributors": [
+      "hellerdave1983",
+      "SphinxKnight",
+      "schlagi123",
+      "DeniseHenni",
+      "icarus1966",
+      "survivalluc",
+      "Trollderim",
+      "schenja885",
+      "Denise.",
+      "PaddyKfg",
+      "Croydon",
+      "antiphp",
+      "Basu8179",
+      "Luccie",
+      "ata.sah",
+      "Tinchen977",
+      "Sven2405",
+      "thorstochter1488",
+      "fscholz",
+      "aleks607",
+      "Angel",
+      "astoriaedde"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions": {
+    "modified": "2019-03-18T21:06:43.476Z",
+    "contributors": [
+      "rs-github",
+      "Artist-sumo",
+      "SphinxKnight",
+      "Bodo1445",
+      "Clown77",
+      "Abro"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/API": {
+    "modified": "2019-11-26T22:20:15.387Z",
+    "contributors": [
+      "wbamberg",
+      "andrewtruongmoz"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/API/Lesezeich.": {
+    "modified": "2020-10-15T21:55:55.060Z",
+    "contributors": [
+      "wbamberg",
+      "nw520",
+      "matschibatschi"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/API/browserAction": {
+    "modified": "2020-10-15T22:26:32.419Z"
+  },
+  "Mozilla/Add-ons/WebExtensions/API/browserAction/setPopup": {
+    "modified": "2020-10-15T22:26:30.812Z",
+    "contributors": [
+      "DJM"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/API/commands": {
+    "modified": "2020-10-15T22:08:08.658Z",
+    "contributors": [
+      "wbamberg",
+      "Sorbzilla"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/API/downloads": {
+    "modified": "2020-10-15T22:18:21.095Z",
+    "contributors": [
+      "ErichWilli"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension": {
+    "modified": "2019-03-18T21:02:49.105Z",
+    "contributors": [
+      "Asozialist"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/Arbeiten_mit_Taps_API": {
+    "modified": "2019-06-11T16:28:12.442Z",
+    "contributors": [
+      "Patrick5555"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/Beispiele": {
+    "modified": "2019-03-18T21:04:08.698Z",
+    "contributors": [
+      "StefanM"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs": {
+    "modified": "2020-10-15T20:55:14.782Z",
+    "contributors": [
+      "frido1973"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/Deine_erste_WebErweiterung": {
+    "modified": "2019-07-04T07:03:49.181Z",
+    "contributors": [
+      "trych",
+      "SyntaxCacao",
+      "HillOTech",
+      "Asozialist",
+      "twizzz",
+      "serv-inc",
+      "Draphar",
+      "flosommerfeld"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/Deine_zweite_Erweiterung": {
+    "modified": "2019-07-04T06:11:16.199Z",
+    "contributors": [
+      "trych",
+      "Draphar"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools": {
+    "modified": "2019-10-28T22:25:20.040Z",
+    "contributors": [
+      "LoVo666"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/Match_patterns": {
+    "modified": "2020-10-15T22:26:32.716Z",
+    "contributors": [
+      "gyz678"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/What_are_WebExtensions": {
+    "modified": "2019-03-18T21:06:04.054Z",
+    "contributors": [
+      "Asozialist",
+      "SphinxKnight",
+      "Sebastianz",
+      "Artist-sumo",
+      "Stefanius67"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/manifest.json": {
+    "modified": "2020-10-15T21:57:12.603Z",
+    "contributors": [
+      "RaspberryPiFan",
+      "wbamberg",
+      "DaysieDuck",
+      "andrewtruongmoz"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/manifest.json/commands": {
+    "modified": "2020-10-15T22:08:08.705Z",
+    "contributors": [
+      "wbamberg",
+      "Sorbzilla"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/manifest.json/devtools_page": {
+    "modified": "2020-10-15T21:57:09.587Z",
+    "contributors": [
+      "wbamberg",
+      "modding-dreams"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/manifest.json/theme": {
+    "modified": "2020-10-15T22:32:55.534Z",
+    "contributors": [
+      "zogger"
+    ]
+  },
+  "Mozilla/Developer_guide": {
+    "modified": "2019-03-24T00:04:47.887Z",
+    "contributors": [
+      "chrisdavidmills",
+      "SJW",
+      "tessarakt3",
+      "fscholz",
+      "Lukas Skywalker",
+      "Jules Papillon",
+      "Ak120",
+      "PowerToaster"
+    ]
+  },
+  "Mozilla/Developer_guide/Quelltexte": {
+    "modified": "2019-03-24T00:04:33.890Z",
+    "contributors": [
+      "chrisdavidmills",
+      "fscholz",
+      "Anonymous",
+      "gamemaster7riesen"
+    ]
+  },
+  "Mozilla/Developer_guide/firefox_erfolgreich_erstellt": {
+    "modified": "2019-03-23T22:13:23.971Z",
+    "contributors": [
+      "chrisdavidmills",
+      "friedger"
+    ]
+  },
+  "Mozilla/Firefox": {
+    "modified": "2020-01-18T12:42:37.514Z",
+    "contributors": [
+      "leela52452",
+      "SphinxKnight",
+      "wbamberg",
+      "dario.bloch",
+      "Chrisgamma",
+      "loki",
+      "fscholz",
+      "LarsS",
+      "pollti",
+      "Timmi"
+    ]
+  },
+  "Mozilla/Firefox/Releases": {
+    "modified": "2019-03-23T23:27:18.715Z",
+    "contributors": [
+      "wbamberg",
+      "ziyunfei"
+    ]
+  },
+  "Mozilla/Firefox/Releases/16": {
+    "modified": "2019-03-23T23:24:48.916Z",
+    "contributors": [
+      "wbamberg",
+      "mrstork",
+      "Micky261"
+    ]
+  },
+  "Mozilla/Firefox/Releases/27": {
+    "modified": "2019-03-23T23:24:54.141Z",
+    "contributors": [
+      "wbamberg",
+      "globalavocado",
+      "schlagi123",
+      "Micky261"
+    ]
+  },
+  "Mozilla/Firefox/Releases/28": {
+    "modified": "2019-03-18T21:31:27.153Z",
+    "contributors": [
+      "globalavocado"
+    ]
+  },
+  "Mozilla/Firefox/Releases/3.6": {
+    "modified": "2019-12-13T20:33:15.876Z",
+    "contributors": [
+      "wbamberg",
+      "SphinxKnight",
+      "Timmi"
+    ]
+  },
+  "Mozilla/Firefox/Releases/34": {
+    "modified": "2019-03-23T23:08:51.454Z",
+    "contributors": [
+      "wbamberg",
+      "schlagi123",
+      "barning"
+    ]
+  },
+  "Mozilla/Firefox/Releases/47": {
+    "modified": "2019-03-23T22:30:31.890Z",
+    "contributors": [
+      "wbamberg",
+      "kdex",
+      "Schwarzer-Bob"
+    ]
+  },
+  "Mozilla/Firefox/Releases/5": {
+    "modified": "2020-11-20T04:48:59.432Z",
+    "contributors": [
+      "wbamberg"
+    ]
+  },
+  "Mozilla/Firefox/Releases/56": {
+    "modified": "2019-03-23T22:08:20.554Z",
+    "contributors": [
+      "wbamberg",
+      "equakaralad04"
+    ]
+  },
+  "Mozilla/Firefox/Releases/57": {
+    "modified": "2019-03-23T22:07:56.031Z",
+    "contributors": [
+      "wbamberg",
+      "equakaralad04"
+    ]
+  },
+  "Mozilla/Firefox/Releases/58": {
+    "modified": "2019-03-23T22:02:48.354Z",
+    "contributors": [
+      "wbamberg",
+      "FredIde"
+    ]
+  },
+  "Mozilla/Firefox/Releases/60": {
+    "modified": "2019-03-18T21:37:55.301Z",
+    "contributors": [
+      "wbamberg",
+      "mario.p"
+    ]
+  },
+  "Mozilla/Firefox/Releases/68": {
+    "modified": "2019-06-21T08:05:41.440Z",
+    "contributors": [
+      "Conzz"
+    ]
+  },
+  "OpenSearch_Plugin_für_Firefox_erstellen": {
+    "modified": "2019-03-24T00:04:54.552Z",
+    "contributors": [
+      "fscholz",
+      "Lexhawkins"
+    ]
+  },
+  "Plugins/Flash-Aktivierung:_Browser-Vergleich": {
+    "modified": "2019-03-23T22:03:23.868Z",
+    "contributors": [
+      "Artist-sumo",
+      "Sheppy",
+      "HoLuLuLu"
+    ]
+  },
+  "Tools": {
+    "modified": "2020-07-16T22:44:14.027Z",
+    "contributors": [
+      "SphinxKnight",
+      "schlampa7",
+      "marcaltmann",
+      "wbamberg",
+      "rugk",
+      "maximelore",
+      "Artist-sumo",
+      "devSchnitzel",
+      "alberts+",
+      "suriyaa",
+      "TRoskop",
+      "Langer39",
+      "VJSchneid",
+      "Tim_Lehmann",
+      "sympatovit",
+      "fscholz",
+      "teoli",
+      "Jolo",
+      "Mozilla-fan",
+      "snopy234",
+      "AlexPl"
+    ]
+  },
+  "Tools/3D_untersuchung": {
+    "modified": "2020-07-16T22:34:25.058Z",
+    "contributors": [
+      "wbamberg",
+      "pollti",
+      "SJW"
+    ]
+  },
+  "Tools/Add-ons": {
+    "modified": "2020-07-16T22:36:23.223Z",
+    "contributors": [
+      "wbamberg",
+      "mfluehr"
+    ]
+  },
+  "Tools/Barrierefreiheits_inspektor": {
+    "modified": "2020-07-16T22:36:39.466Z",
+    "contributors": [
+      "hrfischer1983",
+      "hellschu"
+    ]
+  },
+  "Tools/Browser_Console": {
+    "modified": "2020-07-16T22:35:42.070Z",
+    "contributors": [
+      "wbamberg",
+      "atze79"
+    ]
+  },
+  "Tools/Browser_Werkzeuge": {
+    "modified": "2020-07-16T22:35:55.309Z",
+    "contributors": [
+      "wbamberg",
+      "res60",
+      "Dev_Falko",
+      "Microgamer"
+    ]
+  },
+  "Tools/Debugger": {
+    "modified": "2020-07-16T22:35:04.001Z",
+    "contributors": [
+      "jewuma",
+      "wbamberg",
+      "Andi21",
+      "achimbode",
+      "Nostra",
+      "fscholz",
+      "Hecky77",
+      "AngelSankturio",
+      "isoewa",
+      "hexefatale"
+    ]
+  },
+  "Tools/Debugger/How_to": {
+    "modified": "2020-07-16T22:35:07.165Z",
+    "contributors": [
+      "wbamberg"
+    ]
+  },
+  "Tools/Debugger/How_to/Open_the_debugger": {
+    "modified": "2020-07-16T22:35:08.927Z",
+    "contributors": [
+      "Drachenfrucht1"
+    ]
+  },
+  "Tools/Debugger/How_to/Use_a_source_map": {
+    "modified": "2020-07-16T22:35:12.233Z",
+    "contributors": [
+      "flyhighmartin"
+    ]
+  },
+  "Tools/Debugger/Source_map_errors": {
+    "modified": "2020-07-16T22:35:19.061Z",
+    "contributors": [
+      "clemens.klapp"
+    ]
+  },
+  "Tools/Firefox_OS_1.1_Simulator": {
+    "modified": "2020-07-16T22:35:57.569Z",
+    "contributors": [
+      "wbamberg",
+      "aquorange",
+      "MaleCat",
+      "Kbaby",
+      "Andi85er",
+      "AngelSankturio"
+    ]
+  },
+  "Tools/Index": {
+    "modified": "2020-07-16T22:36:02.468Z",
+    "contributors": [
+      "wbamberg",
+      "fscholz"
+    ]
+  },
+  "Tools/JSON_viewer": {
+    "modified": "2020-07-16T22:36:31.343Z",
+    "contributors": [
+      "tobiasdegen"
+    ]
+  },
+  "Tools/Keyboard_shortcuts": {
+    "modified": "2020-07-16T22:35:45.057Z",
+    "contributors": [
+      "Djfe",
+      "wbamberg",
+      "robert7k",
+      "maybe",
+      "mkohler",
+      "Coce"
+    ]
+  },
+  "Tools/Page_Inspector/How_to": {
+    "modified": "2020-07-16T22:34:30.881Z",
+    "contributors": [
+      "GiovanniHD201E",
+      "wbamberg",
+      "sidgan"
+    ]
+  },
+  "Tools/Page_Inspector/How_to/Event_Listener_untersuchen": {
+    "modified": "2020-07-16T22:34:35.556Z",
+    "contributors": [
+      "wbamberg",
+      "Sebastianz"
+    ]
+  },
+  "Tools/Page_Inspector/How_to/Raster_Layout_untersuchen": {
+    "modified": "2020-07-16T22:34:46.944Z",
+    "contributors": [
+      "oolong32",
+      "wbamberg",
+      "Micky261"
+    ]
+  },
+  "Tools/Page_Inspector/How_to/Schriftarten_Bearbeitung": {
+    "modified": "2020-08-13T20:23:50.743Z",
+    "contributors": [
+      "cama240601",
+      "GiovanniHD201E"
+    ]
+  },
+  "Tools/Paint_Flashing_Tool": {
+    "modified": "2020-07-16T22:35:43.400Z",
+    "contributors": [
+      "wbamberg",
+      "marioszymanski",
+      "dawide2010"
+    ]
+  },
+  "Tools/Performance": {
+    "modified": "2020-07-16T22:36:12.453Z",
+    "contributors": [
+      "SebinNyshkim",
+      "wbamberg",
+      "hackbart"
+    ]
+  },
+  "Tools/Remote_Debugging": {
+    "modified": "2020-07-16T22:35:37.082Z",
+    "contributors": [
+      "wbamberg",
+      "Micky261",
+      "Ilka25",
+      "Zander29",
+      "Coerlin-C-83",
+      "fscholz",
+      "mkohler",
+      "cube1988",
+      "Allie71",
+      "eedenharter"
+    ]
+  },
+  "Tools/Remote_Debugging/Debugging_Firefox_Desktop": {
+    "modified": "2020-10-11T07:49:13.330Z",
+    "contributors": [
+      "kateBorderline"
+    ]
+  },
+  "Tools/Remote_Debugging/Firefox_for_Android": {
+    "modified": "2020-07-16T22:35:38.869Z",
+    "contributors": [
+      "wbamberg",
+      "EikeKre",
+      "mkohler",
+      "popeye007"
+    ]
+  },
+  "Tools/Seiten_Inspektor": {
+    "modified": "2020-07-16T22:34:26.882Z",
+    "contributors": [
+      "wbamberg",
+      "maybe",
+      "mozjan",
+      "One",
+      "MikeWalde",
+      "libelle17"
+    ]
+  },
+  "Tools/Seiten_Inspektor/Tastenkombinationen": {
+    "modified": "2020-07-16T22:34:50.445Z",
+    "contributors": [
+      "GiovanniHD201E"
+    ]
+  },
+  "Tools/Shader-Editor": {
+    "modified": "2020-07-16T22:35:54.224Z",
+    "contributors": [
+      "wbamberg",
+      "olhaar",
+      "cgtom"
+    ]
+  },
+  "Tools/Storage_Inspector": {
+    "modified": "2020-07-16T22:36:09.538Z",
+    "contributors": [
+      "hennr",
+      "Borgitowner",
+      "Nuzoo"
+    ]
+  },
+  "Tools/Storage_Inspector/Cache_Storage": {
+    "modified": "2020-07-16T22:36:11.182Z",
+    "contributors": [
+      "ColadaMDNWebDocs"
+    ]
+  },
+  "Tools/Storage_Inspector/Cookies": {
+    "modified": "2020-12-04T12:52:15.534Z",
+    "contributors": [
+      "MDN_David",
+      "ColadaMDNWebDocs"
+    ]
+  },
+  "Tools/Storage_Inspector/IndexedDB": {
+    "modified": "2020-07-16T22:36:11.541Z",
+    "contributors": [
+      "ColadaMDNWebDocs"
+    ]
+  },
+  "Tools/Storage_Inspector/Local_Storage_Session_Storage": {
+    "modified": "2020-07-16T22:36:11.347Z",
+    "contributors": [
+      "ColadaMDNWebDocs"
+    ]
+  },
+  "Tools/Style_Editor": {
+    "modified": "2020-07-16T22:34:59.759Z",
+    "contributors": [
+      "hellschu",
+      "wbamberg",
+      "maba001",
+      "maybe",
+      "Kbaby",
+      "fscholz",
+      "Helmcke42"
+    ]
+  },
+  "Tools/WebIDE_clone": {
+    "modified": "2019-03-23T23:03:21.499Z",
+    "contributors": [
+      "wbamberg",
+      "VJSchneid",
+      "maybe",
+      "AARADEANCA"
+    ]
+  },
+  "Tools/Web_Konsole": {
+    "modified": "2020-07-16T22:34:04.628Z",
+    "contributors": [
+      "Loilo",
+      "SphinxKnight",
+      "talikanews",
+      "wbamberg",
+      "realsplatscream",
+      "kleinegnomfee",
+      "maybe",
+      "PsychoMg",
+      "mozjan"
+    ]
+  },
+  "Tools/Web_Konsole/Hilfe": {
+    "modified": "2020-07-16T22:34:11.469Z",
+    "contributors": [
+      "wbamberg",
+      "AlexFunk",
+      "mherczegh"
+    ]
+  },
+  "Tools/about:debugging": {
+    "modified": "2020-08-16T17:45:15.524Z",
+    "contributors": [
+      "papacemal"
+    ]
+  },
+  "Tools/bildschirmgroessen-testen": {
+    "modified": "2020-07-16T22:35:21.080Z",
+    "contributors": [
+      "wbamberg",
+      "mozjan"
+    ]
+  },
+  "Tools/netzwerkanalyse": {
+    "modified": "2020-07-16T22:35:29.556Z",
+    "contributors": [
+      "wbamberg",
+      "ThomasLendo"
+    ]
+  },
+  "Updating_web_applications_for_Firefox_3": {
+    "modified": "2019-03-24T00:04:30.175Z",
+    "contributors": [
+      "wbamberg",
+      "Sheppy",
+      "fscholz",
+      "niels"
+    ]
+  },
+  "Web": {
+    "modified": "2019-09-19T09:01:12.041Z",
+    "contributors": [
+      "GanJix91",
+      "tirein",
+      "Ninomilani",
+      "schlagi123",
+      "Beder3004",
+      "Simix2017",
+      "AxelK",
+      "ascii4rt",
+      "axelrindle",
+      "sbarthel",
+      "j.bjbb",
+      "Pascal",
+      "petzichen",
+      "Sheppy"
+    ]
+  },
+  "Web/API": {
+    "modified": "2019-03-23T23:27:33.499Z",
+    "contributors": [
+      "schlagi123",
+      "jswisher",
+      "TheNT87",
+      "Novo1987",
+      "inselmensch",
+      "ethertank"
+    ]
+  },
+  "Web/API/AesCbcParams": {
+    "modified": "2019-06-14T14:42:07.860Z",
+    "contributors": [
+      "1siegi"
+    ]
+  },
+  "Web/API/AnimationEvent": {
+    "modified": "2019-03-23T22:44:28.627Z",
+    "contributors": [
+      "fscholz",
+      "teoli",
+      "Sheppy"
+    ]
+  },
+  "Web/API/AudioContext": {
+    "modified": "2019-03-23T22:41:23.906Z",
+    "contributors": [
+      "suedsaft",
+      "mwalter"
+    ]
+  },
+  "Web/API/AudioContext/decodeAudioData": {
+    "modified": "2019-03-23T22:38:20.001Z",
+    "contributors": [
+      "Thalhammer"
+    ]
+  },
+  "Web/API/AudioDestinationNode": {
+    "modified": "2019-03-23T22:30:19.717Z",
+    "contributors": [
+      "fl1p"
+    ]
+  },
+  "Web/API/AudioNode": {
+    "modified": "2019-03-23T22:29:50.278Z",
+    "contributors": [
+      "fl1p"
+    ]
+  },
+  "Web/API/AudioTrack": {
+    "modified": "2020-10-15T22:12:54.347Z",
+    "contributors": [
+      "Germling"
+    ]
+  },
+  "Web/API/Battery_Status_API": {
+    "modified": "2020-10-15T22:19:51.134Z",
+    "contributors": [
+      "1siegi"
+    ]
+  },
+  "Web/API/Blob": {
+    "modified": "2019-03-23T23:01:44.965Z",
+    "contributors": [
+      "Anonymous",
+      "XChrome",
+      "HendrikRunte",
+      "manni66",
+      "omniskop",
+      "fscholz"
+    ]
+  },
+  "Web/API/Body": {
+    "modified": "2020-10-15T22:15:22.404Z",
+    "contributors": [
+      "fmeyertoens"
+    ]
+  },
+  "Web/API/Body/arrayBuffer": {
+    "modified": "2020-10-15T22:15:22.326Z",
+    "contributors": [
+      "SebinNyshkim"
+    ]
+  },
+  "Web/API/Body/blob": {
+    "modified": "2020-10-15T22:15:22.311Z",
+    "contributors": [
+      "SebinNyshkim"
+    ]
+  },
+  "Web/API/Body/body": {
+    "modified": "2020-10-15T22:15:22.169Z",
+    "contributors": [
+      "SebinNyshkim"
+    ]
+  },
+  "Web/API/Body/bodyUsed": {
+    "modified": "2020-10-15T22:15:22.317Z",
+    "contributors": [
+      "SebinNyshkim"
+    ]
+  },
+  "Web/API/Body/formData": {
+    "modified": "2020-10-15T22:15:22.274Z",
+    "contributors": [
+      "SebinNyshkim"
+    ]
+  },
+  "Web/API/Body/json": {
+    "modified": "2020-10-15T22:15:23.782Z",
+    "contributors": [
+      "SebinNyshkim"
+    ]
+  },
+  "Web/API/Body/text": {
+    "modified": "2020-10-15T22:15:23.627Z",
+    "contributors": [
+      "SebinNyshkim"
+    ]
+  },
+  "Web/API/CSS": {
+    "modified": "2020-10-15T22:34:59.314Z",
+    "contributors": [
+      "Wind1808"
+    ]
+  },
+  "Web/API/CSS/escape": {
+    "modified": "2020-10-15T22:34:58.253Z",
+    "contributors": [
+      "vssn"
+    ]
+  },
+  "Web/API/CSSMediaRule": {
+    "modified": "2019-03-23T22:44:07.681Z",
+    "contributors": [
+      "Sebastianz",
+      "HenryZeitler"
+    ]
+  },
+  "Web/API/CSSPageRule": {
+    "modified": "2019-03-23T23:10:58.894Z",
+    "contributors": [
+      "fscholz",
+      "Sebastianz"
+    ]
+  },
+  "Web/API/CSSRule": {
+    "modified": "2019-03-23T23:01:40.917Z",
+    "contributors": [
+      "fscholz"
+    ]
+  },
+  "Web/API/CSSRule/cssText": {
+    "modified": "2019-03-23T23:11:11.321Z",
+    "contributors": [
+      "fscholz",
+      "Sebastianz"
+    ]
+  },
+  "Web/API/CSS_Painting_API": {
+    "modified": "2020-11-24T15:05:28.361Z",
+    "contributors": [
+      "estelle"
+    ]
+  },
+  "Web/API/CSS_Painting_API/Guide": {
+    "modified": "2020-11-28T04:24:11.006Z",
+    "contributors": [
+      "FrederikWeitz"
+    ]
+  },
+  "Web/API/Cache": {
+    "modified": "2019-03-23T22:25:01.147Z",
+    "contributors": [
+      "jpmedley"
+    ]
+  },
+  "Web/API/Cache/add": {
+    "modified": "2020-10-15T22:26:45.761Z",
+    "contributors": [
+      "lucas-walter"
+    ]
+  },
+  "Web/API/Cache/addAll": {
+    "modified": "2019-03-23T22:25:02.546Z",
+    "contributors": [
+      "ChrisEbner"
+    ]
+  },
+  "Web/API/CanvasRenderingContext2D": {
+    "modified": "2020-10-15T21:35:31.419Z",
+    "contributors": [
+      "Dschubba",
+      "ksm2",
+      "Aloso",
+      "aisnjo"
+    ]
+  },
+  "Web/API/CanvasRenderingContext2D/canvas": {
+    "modified": "2020-10-15T22:34:43.014Z",
+    "contributors": [
+      "PlumChaos"
+    ]
+  },
+  "Web/API/CanvasRenderingContext2D/fillRect": {
+    "modified": "2019-03-23T22:46:53.534Z",
+    "contributors": [
+      "marco-a",
+      "t.krapp"
+    ]
+  },
+  "Web/API/CanvasRenderingContext2D/getImageData": {
+    "modified": "2019-03-23T22:18:42.586Z",
+    "contributors": [
+      "modev"
+    ]
+  },
+  "Web/API/CanvasRenderingContext2D/isPointInPath": {
+    "modified": "2019-03-23T22:41:50.769Z",
+    "contributors": [
+      "obama"
+    ]
+  },
+  "Web/API/CanvasRenderingContext2D/scale": {
+    "modified": "2019-03-18T21:47:04.467Z",
+    "contributors": [
+      "SimonBuxx"
+    ]
+  },
+  "Web/API/CanvasRenderingContext2D/setLineDash": {
+    "modified": "2019-01-17T00:14:20.097Z",
+    "contributors": [
+      "Xenoage"
+    ]
+  },
+  "Web/API/CanvasRenderingContext2D/textAlign": {
+    "modified": "2020-10-15T22:05:18.597Z",
+    "contributors": [
+      "marco-a"
+    ]
+  },
+  "Web/API/ChildNode": {
+    "modified": "2019-03-23T22:06:18.037Z",
+    "contributors": [
+      "stevenwdv"
+    ]
+  },
+  "Web/API/ChildNode/remove": {
+    "modified": "2020-10-15T22:05:03.102Z",
+    "contributors": [
+      "sv3m0r"
+    ]
+  },
+  "Web/API/Console": {
+    "modified": "2020-10-15T21:47:34.377Z",
+    "contributors": [
+      "SebinNyshkim",
+      "Claas",
+      "nilsding"
+    ]
+  },
+  "Web/API/Console/assert": {
+    "modified": "2020-10-15T21:53:31.494Z",
+    "contributors": [
+      "SebinNyshkim",
+      "amlang"
+    ]
+  },
+  "Web/API/Console/clear": {
+    "modified": "2020-10-15T22:03:59.269Z",
+    "contributors": [
+      "SebinNyshkim",
+      "Claas"
+    ]
+  },
+  "Web/API/Console/count": {
+    "modified": "2020-10-15T22:03:54.713Z",
+    "contributors": [
+      "SebinNyshkim",
+      "Claas"
+    ]
+  },
+  "Web/API/Console/debug": {
+    "modified": "2020-10-15T22:15:25.961Z",
+    "contributors": [
+      "SebinNyshkim"
+    ]
+  },
+  "Web/API/Console/dir": {
+    "modified": "2020-10-15T21:47:32.910Z",
+    "contributors": [
+      "SebinNyshkim",
+      "fl1p"
+    ]
+  },
+  "Web/API/Console/log": {
+    "modified": "2019-03-18T21:45:58.072Z",
+    "contributors": [
+      "mikoMK"
+    ]
+  },
+  "Web/API/Console/table": {
+    "modified": "2019-03-23T22:03:53.765Z",
+    "contributors": [
+      "jewuma"
+    ]
+  },
+  "Web/API/Console/time": {
+    "modified": "2020-10-15T22:15:52.847Z",
+    "contributors": [
+      "Drachenfrucht1"
+    ]
+  },
+  "Web/API/Console/timeEnd": {
+    "modified": "2020-10-15T22:15:53.315Z",
+    "contributors": [
+      "Drachenfrucht1"
+    ]
+  },
+  "Web/API/Console/warn": {
+    "modified": "2019-03-23T22:22:21.546Z",
+    "contributors": [
+      "occcy"
+    ]
+  },
+  "Web/API/Crypto": {
+    "modified": "2020-10-15T22:16:58.486Z",
+    "contributors": [
+      "MonsieurLeSuisse"
+    ]
+  },
+  "Web/API/CustomElementRegistry": {
+    "modified": "2020-10-15T22:22:33.015Z"
+  },
+  "Web/API/CustomElementRegistry/define": {
+    "modified": "2020-10-15T22:22:28.920Z",
+    "contributors": [
+      "vssn"
+    ]
+  },
+  "Web/API/DOMError": {
+    "modified": "2019-03-23T22:50:32.748Z",
+    "contributors": [
+      "MatthiasRubin"
+    ]
+  },
+  "Web/API/DOMParser": {
+    "modified": "2019-03-31T11:19:33.896Z",
+    "contributors": [
+      "flying-sheep",
+      "michaeljaekel",
+      "wskc",
+      "pinguin0815"
+    ]
+  },
+  "Web/API/DOMString": {
+    "modified": "2019-06-02T12:14:00.624Z",
+    "contributors": [
+      "RAnders00",
+      "rkeller1"
+    ]
+  },
+  "Web/API/DOMTokenList": {
+    "modified": "2019-03-18T20:54:26.903Z",
+    "contributors": [
+      "WaldemarEnns",
+      "StevenS77"
+    ]
+  },
+  "Web/API/DOMTokenList/add": {
+    "modified": "2020-10-15T22:14:47.337Z",
+    "contributors": [
+      "WaldemarEnns"
+    ]
+  },
+  "Web/API/DedicatedWorkerGlobalScope": {
+    "modified": "2020-10-15T22:07:36.059Z",
+    "contributors": [
+      "Jonafran"
+    ]
+  },
+  "Web/API/DedicatedWorkerGlobalScope/message_event": {
+    "modified": "2020-10-15T22:30:43.733Z",
+    "contributors": [
+      "peterneverland"
+    ]
+  },
+  "Web/API/Document": {
+    "modified": "2020-10-21T11:20:23.142Z",
+    "contributors": [
+      "MooMoo1971",
+      "wif10",
+      "fscholz",
+      "khalid32",
+      "Crash"
+    ]
+  },
+  "Web/API/Document/Document": {
+    "modified": "2020-12-03T12:10:02.784Z",
+    "contributors": [
+      "Gismo1337"
+    ]
+  },
+  "Web/API/Document/URL": {
+    "modified": "2019-03-18T21:19:32.388Z",
+    "contributors": [
+      "termoyer"
+    ]
+  },
+  "Web/API/Document/adoptNode": {
+    "modified": "2019-03-23T22:05:48.291Z",
+    "contributors": [
+      "wbamberg",
+      "amelzer"
+    ]
+  },
+  "Web/API/Document/alinkColor": {
+    "modified": "2020-10-15T22:00:36.438Z",
+    "contributors": [
+      "SphinxKnight",
+      "MuellerRi"
+    ]
+  },
+  "Web/API/Document/body": {
+    "modified": "2019-03-18T21:43:52.106Z",
+    "contributors": [
+      "Maugo",
+      "MuellerRi"
+    ]
+  },
+  "Web/API/Document/createAttribute": {
+    "modified": "2019-03-23T22:44:53.939Z",
+    "contributors": [
+      "frhd"
+    ]
+  },
+  "Web/API/Document/createDocumentFragment": {
+    "modified": "2019-08-29T05:25:49.142Z",
+    "contributors": [
+      "mwallnoefer",
+      "n4nos",
+      "dennissterzenbach"
+    ]
+  },
+  "Web/API/Document/createElement": {
+    "modified": "2020-10-15T21:21:30.716Z",
+    "contributors": [
+      "Ryuno-Ki",
+      "Lyian",
+      "Johann150",
+      "jakobpack",
+      "StevenS77",
+      "Johann",
+      "fscholz",
+      "jsx",
+      "MikeSierra"
+    ]
+  },
+  "Web/API/Document/createElementNS": {
+    "modified": "2019-03-23T22:05:31.821Z",
+    "contributors": [
+      "Univream",
+      "mrm2m"
+    ]
+  },
+  "Web/API/Document/createTextNode": {
+    "modified": "2019-03-23T22:13:09.431Z",
+    "contributors": [
+      "R-Steffens"
+    ]
+  },
+  "Web/API/Document/createTreeWalker": {
+    "modified": "2019-03-18T21:15:37.770Z",
+    "contributors": [
+      "bbarnickel"
+    ]
+  },
+  "Web/API/Document/dir": {
+    "modified": "2019-03-23T22:16:28.287Z",
+    "contributors": [
+      "StevenS77"
+    ]
+  },
+  "Web/API/Document/documentElement": {
+    "modified": "2019-03-23T23:10:21.581Z",
+    "contributors": [
+      "Padarom",
+      "clemenshelm",
+      "kensanata",
+      "Okimoka",
+      "fscholz",
+      "Hasilt",
+      "conradk"
+    ]
+  },
+  "Web/API/Document/fullscreenchange_event": {
+    "modified": "2019-03-23T21:59:50.017Z",
+    "contributors": [
+      "irenesmith",
+      "fscholz",
+      "axelrindle"
+    ]
+  },
+  "Web/API/Document/getElementById": {
+    "modified": "2019-03-23T22:48:39.836Z",
+    "contributors": [
+      "helmrich"
+    ]
+  },
+  "Web/API/Document/getElementsByClassName": {
+    "modified": "2019-03-23T22:39:59.051Z",
+    "contributors": [
+      "Ctwx"
+    ]
+  },
+  "Web/API/Document/head": {
+    "modified": "2020-10-15T22:05:22.313Z",
+    "contributors": [
+      "Maugo"
+    ]
+  },
+  "Web/API/Document/importNode": {
+    "modified": "2020-10-15T21:56:58.261Z",
+    "contributors": [
+      "fscholz",
+      "wbamberg",
+      "amelzer"
+    ]
+  },
+  "Web/API/Document/querySelector": {
+    "modified": "2020-10-15T21:34:44.215Z",
+    "contributors": [
+      "SebinNyshkim",
+      "StevenS77",
+      "Xan2063",
+      "rillig",
+      "cqcumber"
+    ]
+  },
+  "Web/API/Document/querySelectorAll": {
+    "modified": "2020-10-15T21:36:31.203Z",
+    "contributors": [
+      "Cerberooo",
+      "SebinNyshkim",
+      "basteyy"
+    ]
+  },
+  "Web/API/Document/readyState": {
+    "modified": "2019-03-23T22:50:12.472Z",
+    "contributors": [
+      "mdnde",
+      "NHoeller",
+      "felixbarny"
+    ]
+  },
+  "Web/API/Document/referrer": {
+    "modified": "2020-10-15T22:05:23.720Z",
+    "contributors": [
+      "ssgl",
+      "Maugo"
+    ]
+  },
+  "Web/API/Document/registerElement": {
+    "modified": "2019-03-23T22:05:54.510Z",
+    "contributors": [
+      "istvank",
+      "amelzer"
+    ]
+  },
+  "Web/API/Document/title": {
+    "modified": "2020-10-15T22:30:18.787Z",
+    "contributors": [
+      "dmitrijkiltau"
+    ]
+  },
+  "Web/API/Document/width": {
+    "modified": "2019-03-18T21:44:04.786Z",
+    "contributors": [
+      "MuellerRi"
+    ]
+  },
+  "Web/API/Document/write": {
+    "modified": "2019-03-18T21:40:02.182Z",
+    "contributors": [
+      "Johann150",
+      "AlexWayhill"
+    ]
+  },
+  "Web/API/Document/writeln": {
+    "modified": "2020-11-13T09:58:09.106Z",
+    "contributors": [
+      "sklicek"
+    ]
+  },
+  "Web/API/DocumentFragment": {
+    "modified": "2019-03-23T22:08:16.482Z",
+    "contributors": [
+      "dennissterzenbach"
+    ]
+  },
+  "Web/API/DragEvent": {
+    "modified": "2019-03-23T22:49:37.460Z",
+    "contributors": [
+      "fscholz",
+      "ulrobin"
+    ]
+  },
+  "Web/API/Element": {
+    "modified": "2019-03-18T21:09:00.608Z",
+    "contributors": [
+      "fscholz",
+      "jsx",
+      "Crash"
+    ]
+  },
+  "Web/API/Element/classList": {
+    "modified": "2020-08-13T04:39:26.061Z",
+    "contributors": [
+      "andi-hda",
+      "lupus92",
+      "GuidoJansen",
+      "macjohnny",
+      "ygoe",
+      "Heblkraft",
+      "StevenS77"
+    ]
+  },
+  "Web/API/Element/className": {
+    "modified": "2019-03-18T21:37:02.027Z",
+    "contributors": [
+      "BamBamXXL",
+      "Frexeptabel"
+    ]
+  },
+  "Web/API/Element/getBoundingClientRect": {
+    "modified": "2020-10-15T21:37:23.206Z",
+    "contributors": [
+      "napengam",
+      "SphinxKnight",
+      "phlmn",
+      "screeny05",
+      "giffeler",
+      "danieldiekmeier",
+      "jens-duttke",
+      "ohlupo"
+    ]
+  },
+  "Web/API/Element/hasAttribute": {
+    "modified": "2019-03-23T22:09:30.403Z",
+    "contributors": [
+      "JhonnyJason"
+    ]
+  },
+  "Web/API/Element/innerHTML": {
+    "modified": "2020-10-15T21:48:27.953Z",
+    "contributors": [
+      "SebinNyshkim",
+      "SphinxKnight",
+      "StevenS77",
+      "sfraenkel"
+    ]
+  },
+  "Web/API/Element/insertAdjacentHTML": {
+    "modified": "2019-03-23T22:07:41.635Z",
+    "contributors": [
+      "Oliver_Schafeld"
+    ]
+  },
+  "Web/API/Element/querySelector": {
+    "modified": "2019-03-23T23:07:46.285Z",
+    "contributors": [
+      "Wombosvideo",
+      "fscholz",
+      "NikxDa"
+    ]
+  },
+  "Web/API/Element/querySelectorAll": {
+    "modified": "2019-05-03T00:57:19.062Z",
+    "contributors": [
+      "wbamberg",
+      "Wombosvideo"
+    ]
+  },
+  "Web/API/Element/removeAttribute": {
+    "modified": "2019-03-23T22:56:58.413Z",
+    "contributors": [
+      "Harleqin"
+    ]
+  },
+  "Web/API/Element/requestFullScreen": {
+    "modified": "2019-03-23T22:03:55.933Z",
+    "contributors": [
+      "axelrindle"
+    ]
+  },
+  "Web/API/Element/scrollIntoView": {
+    "modified": "2020-10-15T21:45:57.703Z",
+    "contributors": [
+      "webwelten",
+      "movedoa",
+      "denssle",
+      "petacat"
+    ]
+  },
+  "Web/API/Element/scrollLeft": {
+    "modified": "2020-10-15T21:53:34.546Z",
+    "contributors": [
+      "SphinxKnight",
+      "floheller"
+    ]
+  },
+  "Web/API/Element/scrollWidth": {
+    "modified": "2020-10-15T21:37:53.393Z",
+    "contributors": [
+      "SphinxKnight",
+      "ureimers"
+    ]
+  },
+  "Web/API/Element/setAttribute": {
+    "modified": "2019-03-23T22:57:40.120Z",
+    "contributors": [
+      "mw76",
+      "ConnyOnny"
+    ]
+  },
+  "Web/API/Event": {
+    "modified": "2020-02-29T22:13:32.369Z",
+    "contributors": [
+      "HeroicKatora",
+      "rpozarickij"
+    ]
+  },
+  "Web/API/Event/Event": {
+    "modified": "2020-10-15T21:56:14.330Z",
+    "contributors": [
+      "fscholz",
+      "Sharian"
+    ]
+  },
+  "Web/API/Event/bubbles": {
+    "modified": "2019-03-23T22:07:43.481Z",
+    "contributors": [
+      "Sharian"
+    ]
+  },
+  "Web/API/EventListener": {
+    "modified": "2019-03-23T22:39:43.594Z",
+    "contributors": [
+      "skanne",
+      "StevenS77",
+      "Ctwx"
+    ]
+  },
+  "Web/API/EventSource": {
+    "modified": "2019-09-20T07:55:13.564Z",
+    "contributors": [
+      "Locour",
+      "nexus511"
+    ]
+  },
+  "Web/API/EventTarget": {
+    "modified": "2019-03-23T22:15:39.970Z",
+    "contributors": [
+      "kamoroso94"
+    ]
+  },
+  "Web/API/FederatedCredential": {
+    "modified": "2019-03-23T22:07:15.338Z",
+    "contributors": [
+      "amelzer"
+    ]
+  },
+  "Web/API/Fetch_API": {
+    "modified": "2020-10-15T22:15:21.740Z",
+    "contributors": [
+      "SebinNyshkim"
+    ]
+  },
+  "Web/API/File": {
+    "modified": "2019-03-23T23:01:44.475Z",
+    "contributors": [
+      "marjot",
+      "fscholz"
+    ]
+  },
+  "Web/API/File/Typ": {
+    "modified": "2020-10-15T22:20:09.678Z",
+    "contributors": [
+      "sklicek"
+    ]
+  },
+  "Web/API/File/Zugriff_auf_Dateien_von_Webapplikationen": {
+    "modified": "2019-03-18T20:49:17.436Z",
+    "contributors": [
+      "Holger.Persch",
+      "MatthiasApsel",
+      "gunnarbittersmann",
+      "chrisdavidmills",
+      "icy",
+      "matschu"
+    ]
+  },
+  "Web/API/File/fileName": {
+    "modified": "2019-03-23T23:33:53.570Z",
+    "contributors": [
+      "fscholz",
+      "nothine"
+    ]
+  },
+  "Web/API/File/fileSize": {
+    "modified": "2019-03-23T23:33:53.208Z",
+    "contributors": [
+      "fscholz",
+      "nothine"
+    ]
+  },
+  "Web/API/File/getAsText": {
+    "modified": "2019-03-23T23:33:47.440Z",
+    "contributors": [
+      "fscholz",
+      "nothine"
+    ]
+  },
+  "Web/API/File/name": {
+    "modified": "2019-03-23T23:33:48.935Z",
+    "contributors": [
+      "rehne93",
+      "fscholz",
+      "nothine"
+    ]
+  },
+  "Web/API/FileReader": {
+    "modified": "2019-03-23T22:50:30.774Z",
+    "contributors": [
+      "migg24",
+      "S0mmerD",
+      "nlang",
+      "MatthiasRubin"
+    ]
+  },
+  "Web/API/FileReader/onload": {
+    "modified": "2019-03-23T22:41:15.437Z",
+    "contributors": [
+      "rehne93",
+      "Stoffo"
+    ]
+  },
+  "Web/API/FormData": {
+    "modified": "2020-10-15T21:49:26.043Z",
+    "contributors": [
+      "kaljak",
+      "niorad",
+      "amelzer",
+      "Craeckerffm",
+      "ageiss",
+      "julidau"
+    ]
+  },
+  "Web/API/FormData/FormData": {
+    "modified": "2019-03-23T22:15:29.095Z",
+    "contributors": [
+      "DenisSabo",
+      "Xerus"
+    ]
+  },
+  "Web/API/FormData/get": {
+    "modified": "2019-03-23T22:14:12.132Z",
+    "contributors": [
+      "ageiss"
+    ]
+  },
+  "Web/API/FormData/getAll": {
+    "modified": "2020-10-15T22:14:40.601Z",
+    "contributors": [
+      "marjot"
+    ]
+  },
+  "Web/API/FullscreenOptions": {
+    "modified": "2020-10-15T22:20:23.450Z",
+    "contributors": [
+      "Gerak842"
+    ]
+  },
+  "Web/API/GainNode": {
+    "modified": "2019-03-23T22:30:22.800Z",
+    "contributors": [
+      "fl1p"
+    ]
+  },
+  "Web/API/Gamepad_API": {
+    "modified": "2020-10-15T22:22:10.242Z",
+    "contributors": [
+      "jogemu"
+    ]
+  },
+  "Web/API/Geolocation": {
+    "modified": "2020-10-15T22:29:39.241Z",
+    "contributors": [
+      "sideshowbarker"
+    ]
+  },
+  "Web/API/Geolocation/getCurrentPosition": {
+    "modified": "2020-10-15T22:29:40.838Z",
+    "contributors": [
+      "zuzuzu"
+    ]
+  },
+  "Web/API/GlobalEventHandlers": {
+    "modified": "2019-03-23T22:40:26.306Z",
+    "contributors": [
+      "matschibatschi",
+      "AFBarstow"
+    ]
+  },
+  "Web/API/GlobalEventHandlers/onclick": {
+    "modified": "2019-03-23T22:40:31.019Z",
+    "contributors": [
+      "patrickGold",
+      "MrTroble"
+    ]
+  },
+  "Web/API/GlobalEventHandlers/onload": {
+    "modified": "2019-03-23T22:09:19.030Z",
+    "contributors": [
+      "Anonymous"
+    ]
+  },
+  "Web/API/GlobalEventHandlers/onresize": {
+    "modified": "2019-03-23T22:10:57.097Z",
+    "contributors": [
+      "mecograph"
+    ]
+  },
+  "Web/API/HTMLCanvasElement": {
+    "modified": "2019-03-23T22:34:59.417Z",
+    "contributors": [
+      "Aloso"
+    ]
+  },
+  "Web/API/HTMLCanvasElement/toDataURL": {
+    "modified": "2019-03-18T20:33:40.334Z",
+    "contributors": [
+      "bubens",
+      "frth",
+      "rkeller1"
+    ]
+  },
+  "Web/API/HTMLCanvasElement/webglcontextcreationerror_event": {
+    "modified": "2019-03-18T20:55:30.956Z",
+    "contributors": [
+      "fscholz",
+      "XChrome"
+    ]
+  },
+  "Web/API/HTMLCanvasElement/webglcontextlost_event": {
+    "modified": "2019-03-18T20:55:30.751Z",
+    "contributors": [
+      "fscholz",
+      "XChrome"
+    ]
+  },
+  "Web/API/HTMLCanvasElement/webglcontextrestored_event": {
+    "modified": "2019-03-18T20:55:30.549Z",
+    "contributors": [
+      "fscholz",
+      "XChrome"
+    ]
+  },
+  "Web/API/HTMLCollection": {
+    "modified": "2019-03-23T22:51:48.387Z",
+    "contributors": [
+      "Dargmuesli"
+    ]
+  },
+  "Web/API/HTMLFormElement": {
+    "modified": "2019-03-23T22:03:37.984Z",
+    "contributors": [
+      "chrisdavidmills"
+    ]
+  },
+  "Web/API/HTMLFormElement/elements": {
+    "modified": "2020-12-04T04:24:55.583Z",
+    "contributors": [
+      "Gismo1337",
+      "grandmalovesyou"
+    ]
+  },
+  "Web/API/HTMLFormElement/submit_event": {
+    "modified": "2019-04-12T00:15:26.183Z",
+    "contributors": [
+      "estelle",
+      "fscholz",
+      "Silv3rFlame"
+    ]
+  },
+  "Web/API/HTMLInputElement": {
+    "modified": "2020-10-15T22:24:07.999Z",
+    "contributors": [
+      "chrisdavidmills"
+    ]
+  },
+  "Web/API/HTMLInputElement/select": {
+    "modified": "2020-10-15T22:23:56.047Z",
+    "contributors": [
+      "bluefireoly"
+    ]
+  },
+  "Web/API/HTMLSlotElement": {
+    "modified": "2020-10-15T22:06:32.529Z",
+    "contributors": [
+      "fscholz"
+    ]
+  },
+  "Web/API/HTMLSlotElement/assignedNodes": {
+    "modified": "2020-10-15T22:06:32.229Z",
+    "contributors": [
+      "td8"
+    ]
+  },
+  "Web/API/HTMLTableElement": {
+    "modified": "2020-10-15T22:32:18.729Z",
+    "contributors": [
+      "jyasskin"
+    ]
+  },
+  "Web/API/HTMLTableElement/createCaption": {
+    "modified": "2020-10-15T22:32:16.249Z",
+    "contributors": [
+      "Rolf_B"
+    ]
+  },
+  "Web/API/HTMLTableElement/insertRow": {
+    "modified": "2020-10-15T22:32:17.952Z",
+    "contributors": [
+      "Rolf_B"
+    ]
+  },
+  "Web/API/HTMLUnknownElement": {
+    "modified": "2020-11-01T23:01:21.360Z",
+    "contributors": [
+      "sgadola"
+    ]
+  },
+  "Web/API/IndexedDB_API": {
+    "modified": "2020-02-19T04:36:45.707Z",
+    "contributors": [
+      "SanQu",
+      "chrisdavidmills",
+      "Oliver_Schafeld",
+      "jdoose",
+      "syncopation",
+      "braeutigamj",
+      "senk",
+      "tleilax",
+      "NiklasMerz",
+      "Patrick_St.",
+      "Huan"
+    ]
+  },
+  "Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria": {
+    "modified": "2020-01-13T04:47:56.415Z",
+    "contributors": [
+      "chrisdavidmills",
+      "StefanSurkamp",
+      "grubec"
+    ]
+  },
+  "Web/API/IndexedDB_API/Grundkonzepte_hinter_IndexedDB": {
+    "modified": "2020-01-13T04:47:55.526Z",
+    "contributors": [
+      "chrisdavidmills",
+      "gmagholder",
+      "Julini"
+    ]
+  },
+  "Web/API/IndexedDB_API/IndexedDB_verwenden": {
+    "modified": "2020-01-13T04:47:56.201Z",
+    "contributors": [
+      "chrisdavidmills",
+      "p.root",
+      "mdieblich",
+      "floheller",
+      "HendrikRunte",
+      "Nys",
+      "Julini"
+    ]
+  },
+  "Web/API/KeyboardEvent": {
+    "modified": "2019-03-18T21:09:07.273Z",
+    "contributors": [
+      "fscholz",
+      "wbamberg",
+      "th1nk3th"
+    ]
+  },
+  "Web/API/KeyboardEvent/altKey": {
+    "modified": "2019-03-23T22:03:19.040Z",
+    "contributors": [
+      "uki9"
+    ]
+  },
+  "Web/API/KeyboardEvent/getModifierState": {
+    "modified": "2020-10-15T22:06:57.788Z",
+    "contributors": [
+      "amlang"
+    ]
+  },
+  "Web/API/KeyboardEvent/keyCode": {
+    "modified": "2020-10-15T22:11:25.377Z",
+    "contributors": [
+      "bastiion"
+    ]
+  },
+  "Web/API/LinkStyle": {
+    "modified": "2019-03-23T23:11:18.020Z",
+    "contributors": [
+      "fscholz",
+      "Sebastianz"
+    ]
+  },
+  "Web/API/MessageEvent": {
+    "modified": "2019-03-18T21:34:29.406Z",
+    "contributors": [
+      "sv3m0r"
+    ]
+  },
+  "Web/API/MouseEvent": {
+    "modified": "2019-03-18T21:46:34.463Z",
+    "contributors": [
+      "vssn"
+    ]
+  },
+  "Web/API/MutationObserver": {
+    "modified": "2019-10-29T08:01:54.030Z",
+    "contributors": [
+      "Locour",
+      "fscholz",
+      "achimbode"
+    ]
+  },
+  "Web/API/Navigator": {
+    "modified": "2019-03-23T23:01:44.074Z",
+    "contributors": [
+      "wbamberg",
+      "fscholz"
+    ]
+  },
+  "Web/API/Navigator/registerProtocolHandler": {
+    "modified": "2019-03-23T22:01:55.616Z",
+    "contributors": [
+      "chrisdavidmills"
+    ]
+  },
+  "Web/API/Navigator/registerProtocolHandler/Webbasierte_protokoll-handler": {
+    "modified": "2019-03-23T22:33:54.067Z",
+    "contributors": [
+      "chrisdavidmills",
+      "Faibk"
+    ]
+  },
+  "Web/API/Navigator/sendBeacon": {
+    "modified": "2019-03-23T22:27:50.837Z",
+    "contributors": [
+      "Oliver_Schafeld"
+    ]
+  },
+  "Web/API/Navigator/vibrate": {
+    "modified": "2019-05-12T10:32:06.632Z",
+    "contributors": [
+      "jannnis",
+      "petzichen"
+    ]
+  },
+  "Web/API/NavigatorOnLine": {
+    "modified": "2019-03-23T22:47:26.289Z",
+    "contributors": [
+      "teoli"
+    ]
+  },
+  "Web/API/NavigatorOnLine/Online_and_offline_events": {
+    "modified": "2019-03-23T22:59:48.853Z",
+    "contributors": [
+      "chrisdavidmills",
+      "terabaud"
+    ]
+  },
+  "Web/API/NavigatorOnLine/onLine": {
+    "modified": "2019-03-23T22:47:22.054Z",
+    "contributors": [
+      "TRoskop"
+    ]
+  },
+  "Web/API/Node": {
+    "modified": "2019-10-07T12:42:22.118Z",
+    "contributors": [
+      "fscholz",
+      "khalid32",
+      "wepunkt_empunkt"
+    ]
+  },
+  "Web/API/Node/appendChild": {
+    "modified": "2020-05-05T11:21:55.640Z",
+    "contributors": [
+      "Coding-Boss",
+      "prozax",
+      "saldor",
+      "yampus",
+      "StevenS77"
+    ]
+  },
+  "Web/API/Node/childNodes": {
+    "modified": "2019-03-23T23:38:40.521Z",
+    "contributors": [
+      "fscholz",
+      "AshfaqHossain",
+      "wepunkt_empunkt"
+    ]
+  },
+  "Web/API/Node/cloneNode": {
+    "modified": "2019-03-23T23:21:01.873Z",
+    "contributors": [
+      "martin_ti",
+      "Haftmann",
+      "Hativ3",
+      "fscholz",
+      "herom",
+      "pixunil"
+    ]
+  },
+  "Web/API/Node/firstChild": {
+    "modified": "2019-03-23T23:38:33.888Z",
+    "contributors": [
+      "marcows",
+      "fscholz",
+      "khalid32",
+      "wepunkt_empunkt"
+    ]
+  },
+  "Web/API/Node/hasChildNodes": {
+    "modified": "2019-03-23T22:05:54.908Z",
+    "contributors": [
+      "dekatko"
+    ]
+  },
+  "Web/API/Node/innerText": {
+    "modified": "2019-03-23T22:05:48.154Z",
+    "contributors": [
+      "dekatko"
+    ]
+  },
+  "Web/API/Node/lastChild": {
+    "modified": "2019-03-23T23:38:33.584Z",
+    "contributors": [
+      "fscholz",
+      "khalid32",
+      "wepunkt_empunkt"
+    ]
+  },
+  "Web/API/Node/nextSibling": {
+    "modified": "2019-03-23T23:38:40.167Z",
+    "contributors": [
+      "fscholz",
+      "Hasilt",
+      "wepunkt_empunkt"
+    ]
+  },
+  "Web/API/Node/nodeValue": {
+    "modified": "2019-03-18T21:15:27.736Z",
+    "contributors": [
+      "dekatko"
+    ]
+  },
+  "Web/API/Node/normalize": {
+    "modified": "2019-03-23T22:38:55.076Z",
+    "contributors": [
+      "jsiebern"
+    ]
+  },
+  "Web/API/Node/parentNode": {
+    "modified": "2019-03-23T23:38:33.082Z",
+    "contributors": [
+      "fscholz",
+      "khalid32",
+      "wepunkt_empunkt"
+    ]
+  },
+  "Web/API/Node/previousSibling": {
+    "modified": "2019-03-23T23:38:39.575Z",
+    "contributors": [
+      "fscholz",
+      "AshfaqHossain",
+      "wepunkt_empunkt"
+    ]
+  },
+  "Web/API/Node/removeChild": {
+    "modified": "2019-03-23T22:50:31.643Z",
+    "contributors": [
+      "funkhauscreative",
+      "opatut"
+    ]
+  },
+  "Web/API/Node/replaceChild": {
+    "modified": "2019-09-29T03:47:24.159Z",
+    "contributors": [
+      "grumpy-cat",
+      "fscholz",
+      "jsx",
+      "Jonas"
+    ]
+  },
+  "Web/API/Node/setUserData": {
+    "modified": "2019-03-23T22:05:46.565Z",
+    "contributors": [
+      "Nonononoki"
+    ]
+  },
+  "Web/API/Node/textContent": {
+    "modified": "2020-10-15T21:19:51.146Z",
+    "contributors": [
+      "kaljak",
+      "tordans",
+      "user-4",
+      "Tar-Minyatur",
+      "fscholz",
+      "wepunkt_empunkt"
+    ]
+  },
+  "Web/API/Page_Visibility_API": {
+    "modified": "2019-03-23T22:13:05.174Z",
+    "contributors": [
+      "dennissterzenbach"
+    ]
+  },
+  "Web/API/Performance": {
+    "modified": "2020-10-15T21:56:24.244Z",
+    "contributors": [
+      "fscholz",
+      "Sheppy"
+    ]
+  },
+  "Web/API/Performance/now": {
+    "modified": "2019-03-23T22:07:09.095Z",
+    "contributors": [
+      "mknospe",
+      "nylki",
+      "lionralfs",
+      "amelzer"
+    ]
+  },
+  "Web/API/PushManager": {
+    "modified": "2019-09-30T11:38:12.645Z",
+    "contributors": [
+      "Callahad"
+    ]
+  },
+  "Web/API/PushManager/subscribe": {
+    "modified": "2019-03-23T22:37:33.601Z",
+    "contributors": [
+      "f0rkB0mb"
+    ]
+  },
+  "Web/API/Push_API": {
+    "modified": "2019-03-18T21:23:15.619Z",
+    "contributors": [
+      "aquorange"
+    ]
+  },
+  "Web/API/RTCIceCandidate": {
+    "modified": "2019-03-23T22:06:19.046Z",
+    "contributors": [
+      "PixelSnake"
+    ]
+  },
+  "Web/API/RTCPeerConnection": {
+    "modified": "2019-03-23T22:39:31.626Z",
+    "contributors": [
+      "TheA13X"
+    ]
+  },
+  "Web/API/RTCRtpTransceiver": {
+    "modified": "2020-10-15T22:26:06.821Z",
+    "contributors": [
+      "Sheppy"
+    ]
+  },
+  "Web/API/RTCRtpTransceiver/direction": {
+    "modified": "2020-10-15T22:26:02.417Z",
+    "contributors": [
+      "NasskalteJuni"
+    ]
+  },
+  "Web/API/Range": {
+    "modified": "2019-03-23T22:16:01.377Z",
+    "contributors": [
+      "timdream"
+    ]
+  },
+  "Web/API/Range/Range": {
+    "modified": "2019-03-23T22:16:05.966Z",
+    "contributors": [
+      "StevenS77"
+    ]
+  },
+  "Web/API/ReadableStream": {
+    "modified": "2020-10-15T21:56:17.020Z",
+    "contributors": [
+      "Nerixyz",
+      "jcsahnwaldt",
+      "ksm2"
+    ]
+  },
+  "Web/API/RenderingContext": {
+    "modified": "2020-11-02T01:51:10.279Z",
+    "contributors": [
+      "sgadola"
+    ]
+  },
+  "Web/API/Response": {
+    "modified": "2020-10-15T22:15:25.221Z",
+    "contributors": [
+      "dritter",
+      "SebinNyshkim"
+    ]
+  },
+  "Web/API/Response/Response": {
+    "modified": "2020-10-15T22:15:23.753Z",
+    "contributors": [
+      "SebinNyshkim"
+    ]
+  },
+  "Web/API/ServiceWorker": {
+    "modified": "2020-11-19T03:27:18.281Z",
+    "contributors": [
+      "SphinxKnight",
+      "DieLokoMotive"
+    ]
+  },
+  "Web/API/ServiceWorkerContainer": {
+    "modified": "2019-03-23T22:38:55.614Z",
+    "contributors": [
+      "jsx"
+    ]
+  },
+  "Web/API/ServiceWorkerContainer/register": {
+    "modified": "2019-03-23T22:38:49.419Z",
+    "contributors": [
+      "Keviddle",
+      "SimonIT"
+    ]
+  },
+  "Web/API/Service_Worker_API": {
+    "modified": "2020-12-02T13:46:48.121Z",
+    "contributors": [
+      "daazb001",
+      "DavidVieweg",
+      "bitbruder",
+      "TobiDo",
+      "SimonIT"
+    ]
+  },
+  "Web/API/Service_Worker_API/Using_Service_Workers": {
+    "modified": "2019-03-23T22:38:54.934Z",
+    "contributors": [
+      "mattweb",
+      "wischi-chr",
+      "amelzer",
+      "pbdevch",
+      "nicam",
+      "sspringer82",
+      "SimonIT"
+    ]
+  },
+  "Web/API/SharedWorker": {
+    "modified": "2020-10-15T22:22:26.754Z",
+    "contributors": [
+      "ChristianReifberger"
+    ]
+  },
+  "Web/API/SpeechSynthesis": {
+    "modified": "2020-10-15T22:08:29.021Z",
+    "contributors": [
+      "rs-github"
+    ]
+  },
+  "Web/API/Storage": {
+    "modified": "2019-03-23T22:16:52.557Z",
+    "contributors": [
+      "mdnde2",
+      "RewoSiedge",
+      "mdnde"
+    ]
+  },
+  "Web/API/Storage/clear": {
+    "modified": "2020-10-15T22:07:15.610Z",
+    "contributors": [
+      "mdnde2"
+    ]
+  },
+  "Web/API/Storage/getItem": {
+    "modified": "2020-10-15T22:04:15.816Z",
+    "contributors": [
+      "mdnde2",
+      "RewoSiedge"
+    ]
+  },
+  "Web/API/Storage/key": {
+    "modified": "2020-10-15T22:07:14.945Z",
+    "contributors": [
+      "mdnde2"
+    ]
+  },
+  "Web/API/Storage/length": {
+    "modified": "2020-10-15T22:07:13.917Z",
+    "contributors": [
+      "mdnde2"
+    ]
+  },
+  "Web/API/Storage/removeItem": {
+    "modified": "2020-10-15T22:07:15.302Z",
+    "contributors": [
+      "mdnde2"
+    ]
+  },
+  "Web/API/Storage/setItem": {
+    "modified": "2019-03-18T21:36:51.942Z",
+    "contributors": [
+      "mdnde2",
+      "RewoSiedge"
+    ]
+  },
+  "Web/API/Transferable": {
+    "modified": "2019-03-18T21:45:46.055Z",
+    "contributors": [
+      "dennissterzenbach"
+    ]
+  },
+  "Web/API/URL": {
+    "modified": "2019-03-23T22:53:00.444Z",
+    "contributors": [
+      "myakura"
+    ]
+  },
+  "Web/API/URL/createObjectURL": {
+    "modified": "2019-03-23T22:53:03.628Z",
+    "contributors": [
+      "icy",
+      "mbolli",
+      "tuschcarsten"
+    ]
+  },
+  "Web/API/URL/protocol": {
+    "modified": "2020-10-15T22:23:16.608Z",
+    "contributors": [
+      "atopion"
+    ]
+  },
+  "Web/API/URLSearchParams": {
+    "modified": "2019-03-23T22:08:03.108Z",
+    "contributors": [
+      "Stefie",
+      "bendlas"
+    ]
+  },
+  "Web/API/USVString": {
+    "modified": "2019-03-18T21:30:46.256Z",
+    "contributors": [
+      "Keviddle"
+    ]
+  },
+  "Web/API/Vollbild_API": {
+    "modified": "2019-07-07T13:00:37.918Z",
+    "contributors": [
+      "wbamberg",
+      "lazercaveman",
+      "Johann150",
+      "axelrindle"
+    ]
+  },
+  "Web/API/WebGLActiveInfo": {
+    "modified": "2019-03-23T22:35:02.340Z",
+    "contributors": [
+      "firefligher"
+    ]
+  },
+  "Web/API/WebGLProgram": {
+    "modified": "2019-03-23T22:35:02.729Z",
+    "contributors": [
+      "firefligher"
+    ]
+  },
+  "Web/API/WebGLRenderingContext": {
+    "modified": "2019-03-23T22:35:00.582Z",
+    "contributors": [
+      "fscholz"
+    ]
+  },
+  "Web/API/WebGLRenderingContext/canvas": {
+    "modified": "2020-10-15T22:08:19.734Z",
+    "contributors": [
+      "JulianHilbers"
+    ]
+  },
+  "Web/API/WebGLRenderingContext/getActiveAttrib": {
+    "modified": "2019-03-23T22:35:02.539Z",
+    "contributors": [
+      "firefligher"
+    ]
+  },
+  "Web/API/WebGLRenderingContext/getAttribLocation": {
+    "modified": "2020-10-15T22:08:19.909Z",
+    "contributors": [
+      "JulianHilbers"
+    ]
+  },
+  "Web/API/WebGL_API": {
+    "modified": "2019-03-24T00:05:46.812Z",
+    "contributors": [
+      "XChrome",
+      "fscholz",
+      "Faldrian",
+      "teoli"
+    ]
+  },
+  "Web/API/WebGL_API/Tutorial": {
+    "modified": "2019-03-23T22:52:40.621Z",
+    "contributors": [
+      "fscholz"
+    ]
+  },
+  "Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen": {
+    "modified": "2019-03-24T00:04:47.020Z",
+    "contributors": [
+      "fscholz",
+      "teoli"
+    ]
+  },
+  "Web/API/WebGL_API/Tutorial/Animierte_Texturen_in_WebGL": {
+    "modified": "2019-03-24T00:04:47.741Z",
+    "contributors": [
+      "fscholz",
+      "teoli"
+    ]
+  },
+  "Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL": {
+    "modified": "2019-03-24T00:04:49.766Z",
+    "contributors": [
+      "fscholz",
+      "teoli"
+    ]
+  },
+  "Web/API/WebGL_API/Tutorial/Einführung_in_WebGL": {
+    "modified": "2019-03-24T00:05:30.371Z",
+    "contributors": [
+      "noxafy",
+      "Oliver_Schafeld",
+      "H3ndr1k",
+      "xhallix",
+      "manni66",
+      "fscholz",
+      "teoli"
+    ]
+  },
+  "Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen": {
+    "modified": "2019-03-24T00:09:11.465Z",
+    "contributors": [
+      "fscholz",
+      "teoli",
+      "WNC7"
+    ]
+  },
+  "Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext": {
+    "modified": "2019-03-18T20:49:18.784Z",
+    "contributors": [
+      "jsinge",
+      "noxafy",
+      "fscholz",
+      "teoli",
+      "TimN",
+      "WNC7"
+    ]
+  },
+  "Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren": {
+    "modified": "2019-03-18T21:15:16.400Z",
+    "contributors": [
+      "fscholz",
+      "teoli"
+    ]
+  },
+  "Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden": {
+    "modified": "2019-03-24T00:04:48.015Z",
+    "contributors": [
+      "fscholz",
+      "teoli"
+    ]
+  },
+  "Web/API/WebSocket": {
+    "modified": "2019-10-02T19:29:23.339Z",
+    "contributors": [
+      "BoyTheBoy",
+      "firefligher"
+    ]
+  },
+  "Web/API/WebSocket/binaryType": {
+    "modified": "2020-10-15T22:23:15.714Z",
+    "contributors": [
+      "axelrindle"
+    ]
+  },
+  "Web/API/WebSocket/close": {
+    "modified": "2020-10-15T22:23:16.488Z",
+    "contributors": [
+      "axelrindle"
+    ]
+  },
+  "Web/API/WebSocket/extensions": {
+    "modified": "2020-10-15T22:23:14.946Z",
+    "contributors": [
+      "axelrindle"
+    ]
+  },
+  "Web/API/WebSocket/onclose": {
+    "modified": "2019-10-02T19:24:05.254Z",
+    "contributors": [
+      "axelrindle"
+    ]
+  },
+  "Web/API/WebSocket/protocol": {
+    "modified": "2020-10-15T22:23:16.820Z",
+    "contributors": [
+      "axelrindle"
+    ]
+  },
+  "Web/API/WebSocket/readyState": {
+    "modified": "2020-10-15T22:23:15.511Z",
+    "contributors": [
+      "axelrindle"
+    ]
+  },
+  "Web/API/WebSocket/url": {
+    "modified": "2020-10-15T22:23:17.351Z",
+    "contributors": [
+      "axelrindle"
+    ]
+  },
+  "Web/API/WebXR_Device_API": {
+    "modified": "2020-10-15T22:29:16.503Z",
+    "contributors": [
+      "SphinxKnight",
+      "katjah4rms08"
+    ]
+  },
+  "Web/API/Web_Animations_API": {
+    "modified": "2019-03-18T21:09:35.736Z",
+    "contributors": [
+      "bitbruder"
+    ]
+  },
+  "Web/API/Web_Storage_API": {
+    "modified": "2020-05-10T13:24:40.006Z",
+    "contributors": [
+      "tobysoby",
+      "jswisher",
+      "mhash17"
+    ]
+  },
+  "Web/API/Web_Workers_API": {
+    "modified": "2020-04-30T05:09:05.345Z",
+    "contributors": [
+      "ustark",
+      "Guchen",
+      "daknuett"
+    ]
+  },
+  "Web/API/Window": {
+    "modified": "2019-03-24T00:07:16.651Z",
+    "contributors": [
+      "rowild",
+      "Eddcapone",
+      "fl1p",
+      "fscholz",
+      "khalid32",
+      "fryn",
+      "Crash"
+    ]
+  },
+  "Web/API/Window/alert": {
+    "modified": "2019-03-23T23:14:26.063Z",
+    "contributors": [
+      "Anonymous",
+      "fscholz",
+      "Fxedel"
+    ]
+  },
+  "Web/API/Window/applicationCache": {
+    "modified": "2019-03-23T22:45:08.850Z",
+    "contributors": [
+      "Hansschmucker"
+    ]
+  },
+  "Web/API/Window/cancelAnimationFrame": {
+    "modified": "2020-10-15T21:37:50.737Z",
+    "contributors": [
+      "thunderhook",
+      "rhulha"
+    ]
+  },
+  "Web/API/Window/close": {
+    "modified": "2020-10-15T22:23:30.810Z",
+    "contributors": [
+      "vssn"
+    ]
+  },
+  "Web/API/Window/confirm": {
+    "modified": "2019-03-23T22:04:30.930Z",
+    "contributors": [
+      "Aloso"
+    ]
+  },
+  "Web/API/Window/console": {
+    "modified": "2019-06-13T07:23:43.074Z",
+    "contributors": [
+      "AndreasWebdev"
+    ]
+  },
+  "Web/API/Window/dump": {
+    "modified": "2019-03-23T23:34:35.263Z",
+    "contributors": [
+      "fscholz",
+      "jsx",
+      "Jon_Deo"
+    ]
+  },
+  "Web/API/Window/history": {
+    "modified": "2019-03-23T22:06:44.422Z",
+    "contributors": [
+      "kilrogg"
+    ]
+  },
+  "Web/API/Window/length": {
+    "modified": "2020-10-15T22:10:25.849Z",
+    "contributors": [
+      "thunderhook"
+    ]
+  },
+  "Web/API/Window/localStorage": {
+    "modified": "2020-10-15T21:37:58.478Z",
+    "contributors": [
+      "thunderhook",
+      "mdnde",
+      "MirkoSbr"
+    ]
+  },
+  "Web/API/Window/name": {
+    "modified": "2020-10-15T22:10:27.977Z",
+    "contributors": [
+      "thunderhook"
+    ]
+  },
+  "Web/API/Window/navigator": {
+    "modified": "2020-10-15T21:36:44.039Z",
+    "contributors": [
+      "vssn",
+      "Hansschmucker",
+      "AdamNiezielinski"
+    ]
+  },
+  "Web/API/Window/ondevicemotion": {
+    "modified": "2019-03-18T21:15:10.920Z",
+    "contributors": [
+      "clepsydra",
+      "m9898"
+    ]
+  },
+  "Web/API/Window/openDialog": {
+    "modified": "2020-11-15T17:34:16.679Z",
+    "contributors": [
+      "arndissler",
+      "Schepp",
+      "fscholz",
+      "xuancanh",
+      "nurfz",
+      "j3s.ch"
+    ]
+  },
+  "Web/API/Window/opener": {
+    "modified": "2019-03-23T22:31:18.645Z",
+    "contributors": [
+      "frickth"
+    ]
+  },
+  "Web/API/Window/performance": {
+    "modified": "2019-03-23T22:07:15.480Z",
+    "contributors": [
+      "amelzer"
+    ]
+  },
+  "Web/API/Window/print": {
+    "modified": "2020-10-15T21:39:45.899Z",
+    "contributors": [
+      "nopeJS",
+      "Hansschmucker"
+    ]
+  },
+  "Web/API/Window/prompt": {
+    "modified": "2019-03-23T22:28:55.418Z",
+    "contributors": [
+      "Aloso",
+      "G3nadi"
+    ]
+  },
+  "Web/API/Window/screenX": {
+    "modified": "2019-03-23T22:26:08.473Z",
+    "contributors": [
+      "baumanno"
+    ]
+  },
+  "Web/API/Window/scroll": {
+    "modified": "2019-03-23T22:51:52.606Z",
+    "contributors": [
+      "Hansschmucker",
+      "Dargmuesli"
+    ]
+  },
+  "Web/API/Window/scrollTo": {
+    "modified": "2020-10-15T22:20:10.130Z",
+    "contributors": [
+      "bigjilm",
+      "AndreasWebdev"
+    ]
+  },
+  "Web/API/Window/sessionStorage": {
+    "modified": "2020-10-15T21:44:31.143Z",
+    "contributors": [
+      "thunderhook",
+      "mdnde",
+      "filecage",
+      "HendrikRunte",
+      "occcy"
+    ]
+  },
+  "Web/API/Window/stop": {
+    "modified": "2019-03-23T22:48:41.577Z",
+    "contributors": [
+      "Dargmuesli"
+    ]
+  },
+  "Web/API/WindowBase64": {
+    "modified": "2019-03-23T22:50:32.909Z",
+    "contributors": [
+      "teoli"
+    ]
+  },
+  "Web/API/WindowBase64/btoa": {
+    "modified": "2019-03-23T22:50:32.544Z",
+    "contributors": [
+      "cami"
+    ]
+  },
+  "Web/API/WindowEventHandlers": {
+    "modified": "2019-03-23T22:50:03.877Z",
+    "contributors": [
+      "teoli"
+    ]
+  },
+  "Web/API/WindowEventHandlers/onafterprint": {
+    "modified": "2019-03-23T22:23:55.422Z",
+    "contributors": [
+      "maxx-dev"
+    ]
+  },
+  "Web/API/WindowEventHandlers/onhashchange": {
+    "modified": "2019-03-23T22:49:53.661Z",
+    "contributors": [
+      "flosommerfeld",
+      "ulrobin"
+    ]
+  },
+  "Web/API/WindowEventHandlers/onpopstate": {
+    "modified": "2019-03-23T22:35:53.667Z",
+    "contributors": [
+      "checkdotdot",
+      "Oliver_Schafeld"
+    ]
+  },
+  "Web/API/WindowTimers": {
+    "modified": "2019-03-23T23:01:42.969Z",
+    "contributors": [
+      "teoli"
+    ]
+  },
+  "Web/API/WindowTimers/setTimeout": {
+    "modified": "2019-03-23T23:36:28.621Z",
+    "contributors": [
+      "mdnde",
+      "Eschon",
+      "fscholz",
+      "c0ffm3k4r",
+      "wartab"
+    ]
+  },
+  "Web/API/Worker": {
+    "modified": "2019-03-18T21:45:39.485Z",
+    "contributors": [
+      "dennissterzenbach"
+    ]
+  },
+  "Web/API/XMLHttpRequest": {
+    "modified": "2019-05-02T20:00:09.647Z",
+    "contributors": [
+      "wbamberg",
+      "sebastianroming",
+      "fscholz",
+      "Sebastianz",
+      "ethertank",
+      "paul_thomann"
+    ]
+  },
+  "Web/API/XMLHttpRequest/Using_XMLHttpRequest": {
+    "modified": "2020-10-15T22:34:13.485Z",
+    "contributors": [
+      "Mellbabe"
+    ]
+  },
+  "Web/API/notification": {
+    "modified": "2019-03-23T22:55:22.604Z",
+    "contributors": [
+      "DonChef660",
+      "jukiki",
+      "DoomyTheFroomy",
+      "thomalow"
+    ]
+  },
+  "Web/API/notification/permission": {
+    "modified": "2019-03-23T22:19:13.782Z",
+    "contributors": [
+      "schlagi123",
+      "mwsh2005"
+    ]
+  },
+  "Web/Accessibility/Understanding_WCAG": {
+    "modified": "2020-01-27T09:01:40.600Z"
+  },
+  "Web/Accessibility/Understanding_WCAG/Perceivable": {
+    "modified": "2020-01-27T09:01:40.941Z",
+    "contributors": [
+      "chrisdavidmills"
+    ]
+  },
+  "Web/Barrierefreiheit": {
+    "modified": "2019-09-09T14:09:32.470Z",
+    "contributors": [
+      "SphinxKnight",
+      "alippold",
+      "teoli",
+      "fscholz",
+      "Mgalpha"
+    ]
+  },
+  "Web/Barrierefreiheit/ARIA": {
+    "modified": "2019-03-23T23:21:04.985Z",
+    "contributors": [
+      "a.lippold",
+      "marc-se",
+      "iMeta",
+      "eminor",
+      "teoli"
+    ]
+  },
+  "Web/Barrierefreiheit/ARIA/ARIA_Live_Regionen": {
+    "modified": "2019-03-23T23:15:24.210Z",
+    "contributors": [
+      "teoli",
+      "eminor"
+    ]
+  },
+  "Web/Barrierefreiheit/ARIA/ARIA_Techniken": {
+    "modified": "2019-03-18T21:43:56.504Z",
+    "contributors": [
+      "juliankern"
+    ]
+  },
+  "Web/Barrierefreiheit/An_overview_of_accessible_web_applications_and_widgets": {
+    "modified": "2019-03-23T23:17:39.742Z",
+    "contributors": [
+      "juliankern",
+      "christophfink",
+      "teoli",
+      "eminor"
+    ]
+  },
+  "Web/Barrierefreiheit/Tastaturgesteuerte_JavaScript_Komponenten": {
+    "modified": "2019-03-23T23:11:54.393Z",
+    "contributors": [
+      "eminor"
+    ]
+  },
+  "Web/Barrierefreiheit/Webentwicklung": {
+    "modified": "2019-03-18T20:35:27.144Z",
+    "contributors": [
+      "chrisdavidmills",
+      "teoli",
+      "eminor"
+    ]
+  },
+  "Web/CSS": {
+    "modified": "2020-12-03T15:50:42.872Z",
+    "contributors": [
+      "Johuspect",
+      "duckymirror",
+      "SphinxKnight",
+      "prayash",
+      "Sebastianz",
+      "fscholz",
+      "bee8bit",
+      "SJW",
+      "ethertank",
+      "DavidWalsh",
+      "Michael2402",
+      "Takenbot",
+      "Yor.feix"
+    ]
+  },
+  "Web/CSS/-moz-box-flex": {
+    "modified": "2020-10-15T21:40:01.205Z",
+    "contributors": [
+      "chrisdavidmills",
+      "SJW",
+      "teoli",
+      "crasher666",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/-moz-box-ordinal-group": {
+    "modified": "2019-03-23T22:45:29.807Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/-moz-box-pack": {
+    "modified": "2020-10-15T21:39:56.493Z",
+    "contributors": [
+      "SJW",
+      "teoli",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/-moz-cell": {
+    "modified": "2019-03-23T23:11:42.748Z",
+    "contributors": [
+      "Sebastianz",
+      "teoli"
+    ]
+  },
+  "Web/CSS/-moz-float-edge": {
+    "modified": "2019-03-23T22:44:51.739Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/-moz-force-broken-image-icon": {
+    "modified": "2019-03-18T21:16:01.306Z",
+    "contributors": [
+      "Sebastianz",
+      "teoli"
+    ]
+  },
+  "Web/CSS/-moz-image-rect": {
+    "modified": "2019-03-23T22:43:51.533Z",
+    "contributors": [
+      "mrstork",
+      "SphinxKnight",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/-moz-image-region": {
+    "modified": "2019-03-24T00:03:45.581Z",
+    "contributors": [
+      "Sebastianz",
+      "teoli",
+      "fscholz",
+      "SJW",
+      "Lukas Skywalker"
+    ]
+  },
+  "Web/CSS/-moz-orient": {
+    "modified": "2020-10-15T21:39:42.190Z",
+    "contributors": [
+      "SJW",
+      "SphinxKnight",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/-moz-outline-radius": {
+    "modified": "2019-03-23T22:43:58.788Z",
+    "contributors": [
+      "teoli",
+      "Simplexible",
+      "Prinz_Rana",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/-moz-outline-radius-bottomleft": {
+    "modified": "2019-03-23T22:44:02.081Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/-moz-outline-radius-bottomright": {
+    "modified": "2019-03-23T22:44:02.996Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/-moz-outline-radius-topleft": {
+    "modified": "2019-03-23T22:43:54.596Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/-moz-outline-radius-topright": {
+    "modified": "2019-03-23T22:43:59.421Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/-moz-user-focus": {
+    "modified": "2019-03-23T22:45:03.777Z",
+    "contributors": [
+      "teoli",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/-moz-user-input": {
+    "modified": "2019-03-24T00:03:50.218Z",
+    "contributors": [
+      "Sebastianz",
+      "fscholz",
+      "SJW",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/-moz-user-modify": {
+    "modified": "2019-03-24T00:04:27.330Z",
+    "contributors": [
+      "teoli",
+      "Sebastianz",
+      "fscholz",
+      "SJW",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/-moz-user-select": {
+    "modified": "2019-03-24T00:03:51.678Z",
+    "contributors": [
+      "fscholz",
+      "SJW",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/-webkit-box-reflect": {
+    "modified": "2019-03-23T22:45:19.920Z",
+    "contributors": [
+      "teoli",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/-webkit-mask-origin": {
+    "modified": "2019-03-23T22:44:52.161Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/-webkit-mask-position-x": {
+    "modified": "2019-03-18T21:41:43.515Z",
+    "contributors": [
+      "teoli",
+      "felixhaeberle"
+    ]
+  },
+  "Web/CSS/-webkit-mask-position-y": {
+    "modified": "2019-03-18T21:41:54.720Z",
+    "contributors": [
+      "teoli",
+      "felixhaeberle"
+    ]
+  },
+  "Web/CSS/-webkit-mask-repeat": {
+    "modified": "2019-03-23T22:45:10.485Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/-webkit-mask-repeat-x": {
+    "modified": "2019-03-18T21:41:42.607Z",
+    "contributors": [
+      "felixhaeberle"
+    ]
+  },
+  "Web/CSS/-webkit-mask-repeat-y": {
+    "modified": "2019-03-18T21:41:44.223Z",
+    "contributors": [
+      "felixhaeberle"
+    ]
+  },
+  "Web/CSS/-webkit-overflow-scrolling": {
+    "modified": "2019-03-23T22:42:43.885Z",
+    "contributors": [
+      "teoli",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/-webkit-print-color-adjust": {
+    "modified": "2019-03-23T22:42:45.125Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/-webkit-tap-highlight-color": {
+    "modified": "2019-03-18T21:41:41.637Z",
+    "contributors": [
+      "felixhaeberle"
+    ]
+  },
+  "Web/CSS/-webkit-text-fill-color": {
+    "modified": "2019-03-23T22:45:21.560Z",
+    "contributors": [
+      "teoli",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/-webkit-text-stroke": {
+    "modified": "2020-11-09T04:48:13.997Z",
+    "contributors": [
+      "sideshowbarker",
+      "codingdudecom",
+      "teoli",
+      "cachius",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/-webkit-text-stroke-color": {
+    "modified": "2019-03-23T22:44:44.432Z",
+    "contributors": [
+      "teoli",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/-webkit-text-stroke-width": {
+    "modified": "2019-03-23T22:44:59.950Z",
+    "contributors": [
+      "teoli",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/-webkit-touch-callout": {
+    "modified": "2019-03-23T22:44:02.217Z",
+    "contributors": [
+      "teoli",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/:-moz-broken": {
+    "modified": "2019-03-18T21:16:55.826Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/:-moz-drag-over": {
+    "modified": "2019-03-23T22:45:19.500Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/:-moz-first-node": {
+    "modified": "2019-03-23T22:45:27.549Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/:-moz-focusring": {
+    "modified": "2019-03-23T22:45:19.298Z",
+    "contributors": [
+      "teoli",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/:-moz-handler-blocked": {
+    "modified": "2019-03-23T22:45:31.823Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/:-moz-handler-crashed": {
+    "modified": "2019-03-23T22:45:39.224Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/:-moz-handler-disabled": {
+    "modified": "2019-03-18T21:15:58.423Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/:-moz-last-node": {
+    "modified": "2019-03-23T22:45:38.353Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/:-moz-list-bullet": {
+    "modified": "2019-03-23T22:45:32.268Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/:-moz-list-number": {
+    "modified": "2019-03-23T22:45:15.840Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/:-moz-loading": {
+    "modified": "2019-03-23T22:45:32.162Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/:-moz-locale-dir(ltr)": {
+    "modified": "2019-03-23T22:44:58.165Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/:-moz-locale-dir(rtl)": {
+    "modified": "2019-03-23T22:44:55.227Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/:-moz-only-whitespace": {
+    "modified": "2019-03-23T22:45:18.314Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/:-moz-placeholder": {
+    "modified": "2019-03-23T23:11:34.619Z",
+    "contributors": [
+      "teoli",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/:-moz-submit-invalid": {
+    "modified": "2020-10-15T21:39:39.769Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/:-moz-suppressed": {
+    "modified": "2019-03-23T22:45:39.319Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/:-moz-ui-invalid": {
+    "modified": "2019-03-23T22:42:35.620Z",
+    "contributors": [
+      "teoli",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/:-moz-ui-valid": {
+    "modified": "2019-03-23T22:42:34.212Z",
+    "contributors": [
+      "teoli",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/:-moz-user-disabled": {
+    "modified": "2019-03-23T22:44:53.355Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/:-moz-window-inactive": {
+    "modified": "2020-10-15T21:39:59.789Z",
+    "contributors": [
+      "SJW",
+      "teoli",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/:-webkit-autofill": {
+    "modified": "2019-03-23T22:43:43.075Z",
+    "contributors": [
+      "teoli",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/::-moz-page": {
+    "modified": "2019-03-23T22:44:43.530Z",
+    "contributors": [
+      "teoli",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/::-moz-page-sequence": {
+    "modified": "2019-03-23T22:45:17.973Z",
+    "contributors": [
+      "teoli",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/::-moz-placeholder": {
+    "modified": "2019-03-23T23:08:23.797Z",
+    "contributors": [
+      "teoli",
+      "Sebastianz",
+      "icy"
+    ]
+  },
+  "Web/CSS/::-moz-progress-bar": {
+    "modified": "2019-03-23T22:44:41.295Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/::-moz-scrolled-page-sequence": {
+    "modified": "2019-03-18T21:15:12.656Z",
+    "contributors": [
+      "teoli",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/::after": {
+    "modified": "2020-10-15T21:29:20.506Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/::backdrop": {
+    "modified": "2020-10-15T21:40:01.051Z",
+    "contributors": [
+      "SJW",
+      "ExE-Boss",
+      "marc-se",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/::before": {
+    "modified": "2020-10-15T21:26:19.550Z",
+    "contributors": [
+      "stephanduesterhoeft",
+      "jhard",
+      "SJW",
+      "LevitatingOrange",
+      "Sebastianz",
+      "tim_kraut"
+    ]
+  },
+  "Web/CSS/::placeholder": {
+    "modified": "2020-10-15T22:16:04.444Z",
+    "contributors": [
+      "sklicek"
+    ]
+  },
+  "Web/CSS/::selection": {
+    "modified": "2020-10-15T21:28:39.218Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz",
+      "iGadget"
+    ]
+  },
+  "Web/CSS/:active": {
+    "modified": "2020-10-15T21:25:36.592Z",
+    "contributors": [
+      "SJW",
+      "virtusmaior",
+      "jwhitlock",
+      "yckart",
+      "Sebastianz",
+      "webtobesocial"
+    ]
+  },
+  "Web/CSS/:default": {
+    "modified": "2020-10-15T21:28:32.800Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/:dir": {
+    "modified": "2020-10-15T21:40:13.117Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/:disabled": {
+    "modified": "2020-10-15T21:29:29.796Z",
+    "contributors": [
+      "SJW",
+      "Volker-E",
+      "klepek42",
+      "Sebastianz",
+      "gruntswilldie"
+    ]
+  },
+  "Web/CSS/:empty": {
+    "modified": "2020-10-15T21:13:59.334Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz",
+      "Strongground",
+      "fscholz",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/:enabled": {
+    "modified": "2020-10-15T21:40:12.250Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/:first": {
+    "modified": "2020-10-15T21:39:40.240Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/:first-child": {
+    "modified": "2020-10-15T21:28:28.227Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/:first-of-type": {
+    "modified": "2020-10-15T21:28:41.905Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/:focus": {
+    "modified": "2020-10-15T21:25:43.461Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/:fullscreen": {
+    "modified": "2020-10-15T21:25:34.953Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/:hover": {
+    "modified": "2020-10-15T21:30:31.117Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz",
+      "felhe",
+      "Hecky77"
+    ]
+  },
+  "Web/CSS/:in-range": {
+    "modified": "2020-10-15T22:05:48.695Z",
+    "contributors": [
+      "danieldeichfuss"
+    ]
+  },
+  "Web/CSS/:indeterminate": {
+    "modified": "2020-10-15T21:29:20.109Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/:invalid": {
+    "modified": "2020-10-15T21:54:12.121Z",
+    "contributors": [
+      "SJW",
+      "forrestkirby"
+    ]
+  },
+  "Web/CSS/:lang": {
+    "modified": "2020-10-15T21:13:55.617Z",
+    "contributors": [
+      "SJW",
+      "teoli",
+      "Sebastianz",
+      "fscholz",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/:last-child": {
+    "modified": "2020-10-15T21:26:43.574Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz",
+      "Florian_1990"
+    ]
+  },
+  "Web/CSS/:last-of-type": {
+    "modified": "2020-10-15T21:28:37.047Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/:link": {
+    "modified": "2020-10-15T21:25:36.539Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/:not": {
+    "modified": "2020-10-15T21:25:38.458Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/:nth-child": {
+    "modified": "2020-10-15T21:37:14.005Z",
+    "contributors": [
+      "forrestkirby",
+      "SJW",
+      "Faldrian",
+      "DagmarTimmreck",
+      "teoli",
+      "Sebastianz",
+      "antonharald"
+    ]
+  },
+  "Web/CSS/:only-child": {
+    "modified": "2020-10-15T21:28:16.690Z",
+    "contributors": [
+      "SJW",
+      "RmnWtnkmp",
+      "HerrSerker"
+    ]
+  },
+  "Web/CSS/:optional": {
+    "modified": "2020-10-15T21:25:35.468Z",
+    "contributors": [
+      "SJW",
+      "schlagi123",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/:out-of-range": {
+    "modified": "2020-10-15T21:28:37.407Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/:required": {
+    "modified": "2020-10-15T21:25:36.354Z",
+    "contributors": [
+      "SJW",
+      "schlagi123",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/:root": {
+    "modified": "2020-10-15T21:29:10.328Z",
+    "contributors": [
+      "bitbruder",
+      "SJW",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/:visited": {
+    "modified": "2020-10-15T21:25:40.147Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz",
+      "teoli",
+      "felhe"
+    ]
+  },
+  "Web/CSS/@charset": {
+    "modified": "2020-10-15T21:29:01.737Z",
+    "contributors": [
+      "SJW",
+      "Krenair",
+      "fscholz",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/@document": {
+    "modified": "2020-10-15T21:25:35.781Z",
+    "contributors": [
+      "SJW",
+      "teoli",
+      "fscholz",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/@import": {
+    "modified": "2020-10-15T21:13:54.228Z",
+    "contributors": [
+      "SJW",
+      "Guillaume-Heras",
+      "mrstork",
+      "Sebastianz",
+      "fscholz",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/@keyframes": {
+    "modified": "2020-10-15T21:28:16.476Z",
+    "contributors": [
+      "SJW",
+      "bermudaa",
+      "clone",
+      "Sebastianz",
+      "fscholz",
+      "danners",
+      "Sheppy",
+      "Fxedel"
+    ]
+  },
+  "Web/CSS/@media": {
+    "modified": "2020-10-15T21:40:00.321Z",
+    "contributors": [
+      "SJW",
+      "fscholz",
+      "cvrebert"
+    ]
+  },
+  "Web/CSS/@media/any-pointer": {
+    "modified": "2020-10-15T21:39:58.352Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/@media/pointer": {
+    "modified": "2020-10-15T22:00:22.214Z",
+    "contributors": [
+      "fscholz",
+      "schlesingermatthias"
+    ]
+  },
+  "Web/CSS/@media/prefers-reduced-motion": {
+    "modified": "2020-10-15T22:33:51.417Z",
+    "contributors": [
+      "DanielNL"
+    ]
+  },
+  "Web/CSS/@media/width": {
+    "modified": "2020-10-15T21:46:53.407Z",
+    "contributors": [
+      "SJW",
+      "HighTower79"
+    ]
+  },
+  "Web/CSS/@page": {
+    "modified": "2020-10-15T21:39:37.782Z",
+    "contributors": [
+      "chrisdavidmills",
+      "SJW",
+      "Prinz_Rana",
+      "fscholz",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/@page/bleed": {
+    "modified": "2020-10-15T21:39:36.423Z",
+    "contributors": [
+      "SJW",
+      "Prinz_Rana",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/@page/marks": {
+    "modified": "2020-10-15T21:29:09.846Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/@viewport": {
+    "modified": "2020-10-15T21:36:26.323Z",
+    "contributors": [
+      "SJW",
+      "ExE-Boss",
+      "stefankahlau",
+      "fscholz",
+      "holgerjakobs"
+    ]
+  },
+  "Web/CSS/Alias": {
+    "modified": "2019-03-23T22:43:38.581Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/Alternative_style_sheets": {
+    "modified": "2019-03-23T22:43:32.591Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/Angrenzende_Geschwisterselektoren": {
+    "modified": "2020-10-15T21:39:56.944Z",
+    "contributors": [
+      "ExE-Boss",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/At-rule": {
+    "modified": "2019-03-23T22:44:51.883Z",
+    "contributors": [
+      "Claas",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/Attributselektoren": {
+    "modified": "2020-10-15T21:25:18.388Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz",
+      "hansspiess",
+      "fscholz",
+      "iGadget",
+      "J5lx"
+    ]
+  },
+  "Web/CSS/Aural": {
+    "modified": "2019-03-23T22:45:45.488Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/Border-bottom-width": {
+    "modified": "2020-10-15T21:12:48.685Z",
+    "contributors": [
+      "SJW",
+      "fscholz",
+      "Yuichiro",
+      "The Witcher"
+    ]
+  },
+  "Web/CSS/Border-left-width": {
+    "modified": "2019-01-17T08:08:40.829Z",
+    "contributors": [
+      "fscholz",
+      "Yuichiro",
+      "The Witcher"
+    ]
+  },
+  "Web/CSS/Border-right-width": {
+    "modified": "2019-03-24T00:08:35.563Z",
+    "contributors": [
+      "fscholz",
+      "SJW",
+      "Yuichiro",
+      "The Witcher"
+    ]
+  },
+  "Web/CSS/Border-top-width": {
+    "modified": "2019-03-24T00:08:03.094Z",
+    "contributors": [
+      "fscholz",
+      "SJW",
+      "Yuichiro",
+      "The Witcher"
+    ]
+  },
+  "Web/CSS/Bottom": {
+    "modified": "2020-10-15T21:14:11.021Z",
+    "contributors": [
+      "SJW",
+      "fscholz",
+      "The Witcher"
+    ]
+  },
+  "Web/CSS/CSSOM_View": {
+    "modified": "2019-03-23T22:43:37.520Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/CSS_Animations": {
+    "modified": "2020-10-15T21:40:15.062Z",
+    "contributors": [
+      "SJW",
+      "teoli"
+    ]
+  },
+  "Web/CSS/CSS_Animations/CSS_Animationen_nutzen": {
+    "modified": "2020-04-22T06:24:42.427Z",
+    "contributors": [
+      "Ryuno-Ki",
+      "hamvocke",
+      "hudri",
+      "JorisGutjahr",
+      "awaigand",
+      "Honig",
+      "connexo",
+      "SphinxKnight",
+      "teoli",
+      "Simu"
+    ]
+  },
+  "Web/CSS/CSS_Background_and_Borders": {
+    "modified": "2019-03-23T22:44:11.176Z",
+    "contributors": [
+      "teoli"
+    ]
+  },
+  "Web/CSS/CSS_Background_and_Borders/Border-image_generator": {
+    "modified": "2019-03-18T21:15:52.768Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/CSS_Background_and_Borders/Border-radius_generator": {
+    "modified": "2019-03-23T22:43:49.105Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/CSS_Background_and_Borders/Mehrere_Hintergründe_in_CSS_verwenden": {
+    "modified": "2019-03-23T23:02:41.693Z",
+    "contributors": [
+      "terwortH",
+      "benmann",
+      "teoli",
+      "Sebastianz",
+      "srhjg"
+    ]
+  },
+  "Web/CSS/CSS_Basic_User_Interface": {
+    "modified": "2019-03-18T21:18:47.038Z",
+    "contributors": [
+      "SphinxKnight"
+    ]
+  },
+  "Web/CSS/CSS_Boxmodell": {
+    "modified": "2019-03-23T22:43:35.662Z",
+    "contributors": [
+      "Sebastianz",
+      "teoli"
+    ]
+  },
+  "Web/CSS/CSS_Boxmodell/Box-shadow_generator": {
+    "modified": "2019-03-18T20:43:44.623Z",
+    "contributors": [
+      "BychekRU",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/CSS_Boxmodell/Einführung_in_das_CSS_Boxmodell": {
+    "modified": "2019-03-24T00:03:52.006Z",
+    "contributors": [
+      "Sebastianz",
+      "fscholz",
+      "SJW",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/CSS_Boxmodell/Zusammenfallen_von_Außenabständen_meistern": {
+    "modified": "2019-03-23T22:41:18.965Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/CSS_Charsets": {
+    "modified": "2020-10-15T21:40:18.836Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/CSS_Colors": {
+    "modified": "2019-03-23T22:45:11.820Z",
+    "contributors": [
+      "Sebastianz",
+      "teoli"
+    ]
+  },
+  "Web/CSS/CSS_Colors/farbauswahl_werkzeug": {
+    "modified": "2019-03-23T22:45:05.902Z",
+    "contributors": [
+      "22samuelk"
+    ]
+  },
+  "Web/CSS/CSS_Columns": {
+    "modified": "2019-07-23T07:54:16.299Z",
+    "contributors": [
+      "SphinxKnight",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/CSS_Compositing_and_Blending": {
+    "modified": "2019-03-23T22:41:20.151Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/CSS_Conditional_Rules": {
+    "modified": "2019-03-23T22:41:19.119Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/CSS_Device_Adaptation": {
+    "modified": "2019-03-23T22:30:44.810Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/CSS_Flexible_Box_Layout": {
+    "modified": "2019-03-23T22:43:45.116Z",
+    "contributors": [
+      "fscholz"
+    ]
+  },
+  "Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container": {
+    "modified": "2020-10-01T01:42:20.706Z",
+    "contributors": [
+      "Gerak842"
+    ]
+  },
+  "Web/CSS/CSS_Flexible_Box_Layout/Flex_Elemente_Sortieren": {
+    "modified": "2020-10-26T12:12:41.192Z",
+    "contributors": [
+      "Raqhael"
+    ]
+  },
+  "Web/CSS/CSS_Flexible_Box_Layout/Grundlegende_Konzepte_der_Flexbox": {
+    "modified": "2019-03-18T21:33:01.162Z",
+    "contributors": [
+      "prproksch",
+      "td8"
+    ]
+  },
+  "Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes": {
+    "modified": "2019-03-18T20:58:13.468Z",
+    "contributors": [
+      "KadirTopal",
+      "wiegels",
+      "AccNeeder",
+      "rroehrig",
+      "thorsten.rinne",
+      "fscholz",
+      "elker",
+      "thandwerker",
+      "Honig"
+    ]
+  },
+  "Web/CSS/CSS_Fonts": {
+    "modified": "2019-03-23T22:42:29.712Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/CSS_Generated_Content": {
+    "modified": "2020-10-15T21:40:53.620Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/CSS_Grid_Layout": {
+    "modified": "2019-03-23T22:03:28.993Z",
+    "contributors": [
+      "hellschu",
+      "mfluehr"
+    ]
+  },
+  "Web/CSS/CSS_Images": {
+    "modified": "2019-03-18T21:15:48.131Z",
+    "contributors": [
+      "wizAmit",
+      "mrstork",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS": {
+    "modified": "2019-03-23T22:41:21.256Z",
+    "contributors": [
+      "patrick-hintermayer",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/CSS_Lists_and_Counters": {
+    "modified": "2019-03-23T22:42:24.617Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/CSS_Lists_and_Counters/CSS_Zähler_verwenden": {
+    "modified": "2019-03-23T22:41:18.157Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/CSS_Lists_and_Counters/Konsistente_Listeneinrückung": {
+    "modified": "2019-03-23T22:42:20.521Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/CSS_Logical_Properties": {
+    "modified": "2019-03-23T22:42:21.102Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/CSS_Masken": {
+    "modified": "2020-10-15T21:41:26.449Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/CSS_Namensräume": {
+    "modified": "2020-10-15T21:41:25.833Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/CSS_Positioning": {
+    "modified": "2020-11-24T17:04:06.334Z",
+    "contributors": [
+      "wbamberg"
+    ]
+  },
+  "Web/CSS/CSS_Positioning/Understanding_z_index": {
+    "modified": "2020-11-24T17:04:06.642Z",
+    "contributors": [
+      "mfuji09"
+    ]
+  },
+  "Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index": {
+    "modified": "2020-11-25T07:01:24.676Z",
+    "contributors": [
+      "Johuspect"
+    ]
+  },
+  "Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context": {
+    "modified": "2020-11-25T07:36:50.008Z",
+    "contributors": [
+      "Johuspect"
+    ]
+  },
+  "Web/CSS/CSS_Referenz": {
+    "modified": "2019-03-24T00:14:12.141Z",
+    "contributors": [
+      "SJW",
+      "plathub",
+      "Claas",
+      "condottiero1985",
+      "Sebastianz",
+      "fscholz",
+      "tregagnon",
+      "Jürgen Jeka",
+      "The Witcher",
+      "Michael2402",
+      "Jech",
+      "Nathymig"
+    ]
+  },
+  "Web/CSS/CSS_Ruby": {
+    "modified": "2019-03-23T22:43:34.576Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/CSS_Selectors": {
+    "modified": "2019-08-13T05:55:17.230Z",
+    "contributors": [
+      "vaxul",
+      "ExE-Boss",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/CSS_Shapes": {
+    "modified": "2019-03-23T22:41:19.731Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/CSS_Table": {
+    "modified": "2019-03-23T22:41:17.252Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/CSS_Text": {
+    "modified": "2019-03-18T21:16:59.183Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/CSS_Textdekoration": {
+    "modified": "2019-07-23T07:57:58.435Z",
+    "contributors": [
+      "SphinxKnight",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/CSS_Transforms": {
+    "modified": "2019-03-23T22:43:34.303Z",
+    "contributors": [
+      "Sebastianz",
+      "Prinz_Rana",
+      "teoli"
+    ]
+  },
+  "Web/CSS/CSS_Transforms/CSS_Transformationen_verwenden": {
+    "modified": "2019-03-23T22:43:37.336Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/CSS_Transitions": {
+    "modified": "2019-03-23T22:43:32.259Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/CSS_Typen": {
+    "modified": "2020-04-21T12:32:32.615Z",
+    "contributors": [
+      "kleinesfilmroellchen",
+      "Claas"
+    ]
+  },
+  "Web/CSS/CSS_User_Interface": {
+    "modified": "2019-03-23T22:43:34.455Z",
+    "contributors": [
+      "SphinxKnight",
+      "ExE-Boss",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/CSS_Writing_Modes": {
+    "modified": "2019-03-23T22:44:48.500Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/Farben": {
+    "modified": "2020-10-15T21:14:08.521Z",
+    "contributors": [
+      "Borgitowner",
+      "SJW",
+      "Sebastianz",
+      "Simplexible",
+      "fscholz",
+      "Jürgen Jeka",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/ID-Selektoren": {
+    "modified": "2020-10-15T21:41:21.317Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/Index": {
+    "modified": "2019-01-16T19:56:04.663Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/Initialwert": {
+    "modified": "2019-03-23T22:18:48.927Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/Kindselektoren": {
+    "modified": "2020-10-15T21:41:20.031Z",
+    "contributors": [
+      "SJW",
+      "iCON",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/Klassenselektoren": {
+    "modified": "2020-10-15T21:41:19.898Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/Kurzformat_Eigenschaft": {
+    "modified": "2020-11-22T12:51:55.372Z",
+    "contributors": [
+      "Johuspect"
+    ]
+  },
+  "Web/CSS/Layout_mode": {
+    "modified": "2019-03-23T22:43:30.465Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/Left": {
+    "modified": "2020-10-15T21:14:00.888Z",
+    "contributors": [
+      "SJW",
+      "fscholz",
+      "Simplexible",
+      "Prinz_Rana",
+      "Sebastianz",
+      "The Witcher"
+    ]
+  },
+  "Web/CSS/Media_Queries": {
+    "modified": "2020-10-15T21:40:17.095Z",
+    "contributors": [
+      "SJW",
+      "teoli"
+    ]
+  },
+  "Web/CSS/Media_Queries/Using_media_queries": {
+    "modified": "2019-03-23T22:43:31.909Z",
+    "contributors": [
+      "Sebastianz",
+      "mrstork",
+      "malayaleecoder",
+      "teoli"
+    ]
+  },
+  "Web/CSS/Motion_Path": {
+    "modified": "2019-03-23T22:43:35.895Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/Mozilla_Extensions": {
+    "modified": "2019-03-24T00:14:14.332Z",
+    "contributors": [
+      "ExE-Boss",
+      "Sebastianz",
+      "Prinz_Rana",
+      "Saschlong",
+      "SJW",
+      "fscholz",
+      "ethertank",
+      "tregagnon"
+    ]
+  },
+  "Web/CSS/Paged_Media": {
+    "modified": "2020-12-03T15:47:57.918Z",
+    "contributors": [
+      "Johuspect",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/Property_Template": {
+    "modified": "2019-01-16T14:33:16.131Z",
+    "contributors": [
+      "wbamberg",
+      "SphinxKnight",
+      "Sebastianz",
+      "fscholz",
+      "ethertank",
+      "The Witcher",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/Pseudo-classes": {
+    "modified": "2019-03-23T23:23:46.291Z",
+    "contributors": [
+      "Claas",
+      "Sebastianz",
+      "SJW"
+    ]
+  },
+  "Web/CSS/Pseudo-elements": {
+    "modified": "2019-03-23T23:23:47.421Z",
+    "contributors": [
+      "Sebastianz",
+      "nilssolanki",
+      "SJW"
+    ]
+  },
+  "Web/CSS/Right": {
+    "modified": "2020-10-15T21:08:55.796Z",
+    "contributors": [
+      "SJW",
+      "fscholz",
+      "Sebastianz",
+      "FredB",
+      "The Witcher"
+    ]
+  },
+  "Web/CSS/Spezifität": {
+    "modified": "2019-03-23T23:11:49.533Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/Tools": {
+    "modified": "2019-03-23T22:43:38.676Z",
+    "contributors": [
+      "Sebastianz",
+      "creativenitish"
+    ]
+  },
+  "Web/CSS/Tools/Cubic_Bezier_Generator": {
+    "modified": "2019-03-23T22:43:38.857Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/Tools/Linear-gradient_Generator": {
+    "modified": "2019-03-23T22:43:38.482Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/Top": {
+    "modified": "2020-10-15T21:14:05.827Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz",
+      "fscholz",
+      "The Witcher"
+    ]
+  },
+  "Web/CSS/Tutorials": {
+    "modified": "2019-03-18T21:41:12.646Z",
+    "contributors": [
+      "fhwfzfge"
+    ]
+  },
+  "Web/CSS/Type_selectors": {
+    "modified": "2020-10-15T21:39:36.648Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/Universal_selectors": {
+    "modified": "2020-10-15T21:39:37.486Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/Vererbung": {
+    "modified": "2019-03-23T23:13:09.412Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/WebKit_Extensions": {
+    "modified": "2019-03-23T23:23:45.505Z",
+    "contributors": [
+      "ExE-Boss",
+      "jlnr",
+      "SJW"
+    ]
+  },
+  "Web/CSS/Wertdefinitionssyntax": {
+    "modified": "2019-03-23T23:11:56.504Z",
+    "contributors": [
+      "Sebastianz",
+      "Prinz_Rana",
+      "Krenair",
+      "prayash"
+    ]
+  },
+  "Web/CSS/align-content": {
+    "modified": "2020-10-15T21:29:16.776Z",
+    "contributors": [
+      "SJW",
+      "fscholz",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/align-items": {
+    "modified": "2020-10-15T21:29:16.055Z",
+    "contributors": [
+      "SJW",
+      "d4rkne55",
+      "fscholz",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/align-self": {
+    "modified": "2020-10-15T21:29:18.265Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz",
+      "fscholz"
+    ]
+  },
+  "Web/CSS/all": {
+    "modified": "2020-10-15T21:29:17.609Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz",
+      "fscholz",
+      "levito"
+    ]
+  },
+  "Web/CSS/angle": {
+    "modified": "2020-10-15T21:25:35.659Z",
+    "contributors": [
+      "kleinesfilmroellchen",
+      "SJW",
+      "JankingDE",
+      "Sebastianz",
+      "fscholz"
+    ]
+  },
+  "Web/CSS/angle-percentage": {
+    "modified": "2020-10-15T22:29:17.516Z",
+    "contributors": [
+      "kleinesfilmroellchen"
+    ]
+  },
+  "Web/CSS/animation": {
+    "modified": "2020-10-15T21:25:41.266Z",
+    "contributors": [
+      "SJW",
+      "mrstork",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/animation-delay": {
+    "modified": "2020-10-15T21:28:29.055Z",
+    "contributors": [
+      "SJW",
+      "beachespecially",
+      "teoli",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/animation-direction": {
+    "modified": "2020-10-15T21:28:33.320Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/animation-duration": {
+    "modified": "2020-10-15T21:25:38.068Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz",
+      "fscholz"
+    ]
+  },
+  "Web/CSS/animation-fill-mode": {
+    "modified": "2020-10-15T21:25:33.173Z",
+    "contributors": [
+      "SJW",
+      "teoli",
+      "Sebastianz",
+      "maxn"
+    ]
+  },
+  "Web/CSS/animation-iteration-count": {
+    "modified": "2020-10-15T21:25:43.696Z",
+    "contributors": [
+      "SJW",
+      "teoli",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/animation-name": {
+    "modified": "2020-10-15T21:25:41.797Z",
+    "contributors": [
+      "SJW",
+      "teoli",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/animation-play-state": {
+    "modified": "2020-11-03T09:19:42.618Z",
+    "contributors": [
+      "keckelt",
+      "SJW",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/animation-timing-function": {
+    "modified": "2020-10-15T21:29:19.438Z",
+    "contributors": [
+      "AlexWayhill",
+      "SJW",
+      "mrstork",
+      "Sebastianz",
+      "fscholz"
+    ]
+  },
+  "Web/CSS/appearance": {
+    "modified": "2019-03-23T23:20:00.251Z",
+    "contributors": [
+      "ExE-Boss",
+      "wbamberg",
+      "teoli",
+      "Sebastianz",
+      "bee8bit"
+    ]
+  },
+  "Web/CSS/attr()": {
+    "modified": "2020-11-04T08:51:28.043Z",
+    "contributors": [
+      "chrisdavidmills",
+      "SJW",
+      "DerAppelt",
+      "mrstork",
+      "prayash",
+      "Sebastianz",
+      "screeny05"
+    ]
+  },
+  "Web/CSS/auto": {
+    "modified": "2019-03-23T23:23:49.598Z",
+    "contributors": [
+      "SJW"
+    ]
+  },
+  "Web/CSS/backdrop-filter": {
+    "modified": "2020-10-15T21:39:39.277Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/backface-visibility": {
+    "modified": "2020-10-15T21:29:19.302Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz",
+      "fscholz"
+    ]
+  },
+  "Web/CSS/background": {
+    "modified": "2020-12-04T17:14:04.407Z",
+    "contributors": [
+      "Johuspect",
+      "fscholz",
+      "SphinxKnight",
+      "Sebastianz",
+      "Yuichiro",
+      "Jürgen Jeka",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/background-attachment": {
+    "modified": "2020-12-04T17:12:16.200Z",
+    "contributors": [
+      "Johuspect",
+      "SphinxKnight",
+      "fscholz",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/background-blend-mode": {
+    "modified": "2020-12-04T16:41:14.228Z",
+    "contributors": [
+      "Johuspect",
+      "ExE-Boss",
+      "SJW",
+      "mrstork",
+      "Sebastianz",
+      "fscholz",
+      "kapep"
+    ]
+  },
+  "Web/CSS/background-clip": {
+    "modified": "2019-05-01T09:47:01.419Z",
+    "contributors": [
+      "fscholz",
+      "SJW",
+      "AickeSchulz"
+    ]
+  },
+  "Web/CSS/background-color": {
+    "modified": "2020-10-15T21:12:31.914Z",
+    "contributors": [
+      "Paulb-dev",
+      "SJW",
+      "Sebastianz",
+      "SphinxKnight",
+      "fscholz",
+      "ethertank",
+      "Yuichiro",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/background-image": {
+    "modified": "2019-03-24T00:05:41.878Z",
+    "contributors": [
+      "Oliver_Schafeld",
+      "splendid_twd",
+      "SphinxKnight",
+      "fscholz",
+      "SJW",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/background-origin": {
+    "modified": "2019-03-24T00:05:06.053Z",
+    "contributors": [
+      "fscholz"
+    ]
+  },
+  "Web/CSS/background-position": {
+    "modified": "2019-03-24T00:05:05.700Z",
+    "contributors": [
+      "fscholz",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/background-repeat": {
+    "modified": "2019-03-24T00:05:04.054Z",
+    "contributors": [
+      "SphinxKnight",
+      "fscholz",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/background-size": {
+    "modified": "2020-10-15T21:25:02.569Z",
+    "contributors": [
+      "SJW",
+      "HolgerJeromin",
+      "fscholz",
+      "Simplexible",
+      "Prinz_Rana",
+      "Sebastianz",
+      "mikoMK",
+      "tyler"
+    ]
+  },
+  "Web/CSS/basic-shape": {
+    "modified": "2020-10-15T21:28:55.443Z",
+    "contributors": [
+      "kleinesfilmroellchen",
+      "SJW",
+      "ExE-Boss",
+      "Prinz_Rana",
+      "Simplexible",
+      "mrstork",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/berechneter_Wert": {
+    "modified": "2019-03-23T23:13:10.466Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/border": {
+    "modified": "2020-10-15T21:12:38.393Z",
+    "contributors": [
+      "SJW",
+      "schlagi123",
+      "Sebastianz",
+      "fscholz",
+      "Yuichiro",
+      "Jürgen Jeka",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/border-bottom": {
+    "modified": "2020-10-15T21:12:37.622Z",
+    "contributors": [
+      "SJW",
+      "fscholz",
+      "Sebastianz",
+      "Yuichiro",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/border-bottom-color": {
+    "modified": "2020-10-15T21:12:47.340Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz",
+      "fscholz",
+      "Yuichiro",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/border-bottom-left-radius": {
+    "modified": "2020-10-15T21:09:26.025Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz",
+      "fscholz",
+      "FredB",
+      "Yuichiro",
+      "Jürgen Jeka",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/border-bottom-right-radius": {
+    "modified": "2020-10-15T21:12:51.045Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz",
+      "fscholz",
+      "Yuichiro",
+      "Jürgen Jeka",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/border-bottom-style": {
+    "modified": "2020-10-15T21:12:48.275Z",
+    "contributors": [
+      "SJW",
+      "fscholz",
+      "Yuichiro",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/border-collapse": {
+    "modified": "2020-11-24T04:57:52.157Z",
+    "contributors": [
+      "Johuspect",
+      "SJW",
+      "fscholz",
+      "MattDiMu",
+      "Jürgen Jeka",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/border-color": {
+    "modified": "2020-10-15T21:12:46.664Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz",
+      "fscholz",
+      "Yuichiro",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/border-image": {
+    "modified": "2020-10-15T21:28:30.192Z",
+    "contributors": [
+      "SJW",
+      "d4rkne55",
+      "teoli",
+      "Sebastianz",
+      "tyrann0us"
+    ]
+  },
+  "Web/CSS/border-image-outset": {
+    "modified": "2020-10-15T21:28:40.542Z",
+    "contributors": [
+      "SJW",
+      "Simplexible",
+      "Sebastianz",
+      "Prinz_Rana",
+      "teoli"
+    ]
+  },
+  "Web/CSS/border-image-repeat": {
+    "modified": "2020-10-15T21:29:19.620Z",
+    "contributors": [
+      "SJW",
+      "iGadget",
+      "Sebastianz",
+      "fscholz"
+    ]
+  },
+  "Web/CSS/border-image-slice": {
+    "modified": "2020-10-15T21:28:59.381Z",
+    "contributors": [
+      "SJW",
+      "d4rkne55",
+      "Sebastianz",
+      "fscholz",
+      "Simplexible",
+      "Prinz_Rana",
+      "tilman"
+    ]
+  },
+  "Web/CSS/border-image-source": {
+    "modified": "2020-10-15T21:29:22.891Z",
+    "contributors": [
+      "SJW",
+      "wizAmit",
+      "Sebastianz",
+      "teoli"
+    ]
+  },
+  "Web/CSS/border-image-width": {
+    "modified": "2020-10-15T21:29:19.294Z",
+    "contributors": [
+      "SJW",
+      "d4rkne55",
+      "Sebastianz",
+      "fscholz",
+      "supermueller"
+    ]
+  },
+  "Web/CSS/border-left": {
+    "modified": "2019-03-24T00:08:38.506Z",
+    "contributors": [
+      "fscholz",
+      "Yuichiro",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/border-left-color": {
+    "modified": "2019-03-18T21:16:13.487Z",
+    "contributors": [
+      "fscholz",
+      "Yuichiro",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/border-left-style": {
+    "modified": "2019-03-24T00:08:38.236Z",
+    "contributors": [
+      "fscholz",
+      "SJW",
+      "Yuichiro",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/border-radius": {
+    "modified": "2020-10-15T21:07:23.981Z",
+    "contributors": [
+      "SJW",
+      "iGadget",
+      "Sebastianz",
+      "Prinz_Rana",
+      "fscholz",
+      "Matthias.Apsel",
+      "Yuichiro",
+      "Jürgen Jeka",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/border-right": {
+    "modified": "2019-03-24T00:08:39.783Z",
+    "contributors": [
+      "fscholz",
+      "Yuichiro",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/border-right-color": {
+    "modified": "2019-03-18T21:16:13.299Z",
+    "contributors": [
+      "fscholz",
+      "Yuichiro",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/border-right-style": {
+    "modified": "2019-03-24T00:08:32.792Z",
+    "contributors": [
+      "fscholz",
+      "SJW",
+      "Yuichiro",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/border-spacing": {
+    "modified": "2020-12-04T16:23:27.298Z",
+    "contributors": [
+      "Johuspect",
+      "jdus",
+      "fscholz",
+      "SJW",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/border-style": {
+    "modified": "2020-11-06T10:11:26.500Z",
+    "contributors": [
+      "tim-we",
+      "SJW",
+      "fscholz",
+      "serv-inc",
+      "Sebastianz",
+      "Yuichiro",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/border-top": {
+    "modified": "2019-03-24T00:07:48.019Z",
+    "contributors": [
+      "fscholz",
+      "SJW",
+      "Yuichiro",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/border-top-color": {
+    "modified": "2019-03-24T00:08:39.066Z",
+    "contributors": [
+      "fscholz",
+      "SJW",
+      "Yuichiro",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/border-top-left-radius": {
+    "modified": "2020-10-15T21:09:25.403Z",
+    "contributors": [
+      "SJW",
+      "fscholz",
+      "FredB",
+      "Yuichiro",
+      "Jürgen Jeka",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/border-top-right-radius": {
+    "modified": "2020-10-15T21:09:23.128Z",
+    "contributors": [
+      "SJW",
+      "fscholz",
+      "FredB",
+      "Jürgen Jeka",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/border-top-style": {
+    "modified": "2019-03-24T00:08:34.497Z",
+    "contributors": [
+      "fscholz",
+      "SJW",
+      "Yuichiro",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/border-width": {
+    "modified": "2019-03-24T00:08:32.950Z",
+    "contributors": [
+      "fscholz",
+      "SJW",
+      "Yuichiro",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/box-decoration-break": {
+    "modified": "2020-10-15T21:39:28.136Z",
+    "contributors": [
+      "SJW",
+      "teoli"
+    ]
+  },
+  "Web/CSS/box-shadow": {
+    "modified": "2020-10-15T21:13:28.481Z",
+    "contributors": [
+      "SJW",
+      "wiegels",
+      "Sebastianz",
+      "Prinz_Rana",
+      "Eschon",
+      "supermueller",
+      "fscholz",
+      "Jürgen Jeka",
+      "The Witcher"
+    ]
+  },
+  "Web/CSS/box-sizing": {
+    "modified": "2020-12-04T16:21:46.208Z",
+    "contributors": [
+      "Johuspect",
+      "SJW",
+      "Volker-E",
+      "Sebastianz",
+      "tronsha",
+      "fscholz",
+      "maxstrebel"
+    ]
+  },
+  "Web/CSS/break-after": {
+    "modified": "2020-10-15T21:38:17.962Z",
+    "contributors": [
+      "SJW",
+      "tobias47n9e",
+      "fscholz",
+      "Sebastianz",
+      "spiegelp"
+    ]
+  },
+  "Web/CSS/break-inside": {
+    "modified": "2020-10-15T22:19:22.072Z",
+    "contributors": [
+      "bershanskiy",
+      "tonra"
+    ]
+  },
+  "Web/CSS/calc()": {
+    "modified": "2020-11-04T09:07:46.370Z",
+    "contributors": [
+      "chrisdavidmills",
+      "zuzuzu",
+      "SJW",
+      "giffeler",
+      "mrstork",
+      "prayash",
+      "teoli",
+      "hansspiess",
+      "dominikschreiber",
+      "fscholz"
+    ]
+  },
+  "Web/CSS/caption-side": {
+    "modified": "2020-12-04T16:19:59.716Z",
+    "contributors": [
+      "Johuspect",
+      "SJW",
+      "fscholz",
+      "Sebastianz",
+      "Sheppy"
+    ]
+  },
+  "Web/CSS/clear": {
+    "modified": "2020-11-24T16:51:40.305Z",
+    "contributors": [
+      "Johuspect",
+      "SJW",
+      "wbamberg",
+      "fscholz",
+      "Sebastianz",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/clip": {
+    "modified": "2020-10-15T21:29:22.068Z",
+    "contributors": [
+      "SJW",
+      "mrstork",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/clip-path": {
+    "modified": "2020-10-15T21:28:31.008Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/color": {
+    "modified": "2020-10-15T21:13:28.890Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz",
+      "wizAmit",
+      "slayslot",
+      "fscholz",
+      "Jürgen Jeka",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/column-count": {
+    "modified": "2019-03-23T23:22:21.773Z",
+    "contributors": [
+      "Sebastianz",
+      "fscholz",
+      "vaupeh",
+      "SJW"
+    ]
+  },
+  "Web/CSS/column-fill": {
+    "modified": "2020-10-15T21:25:38.904Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz",
+      "fscholz"
+    ]
+  },
+  "Web/CSS/column-gap": {
+    "modified": "2020-10-15T21:25:43.274Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz",
+      "Prinz_Rana",
+      "fscholz"
+    ]
+  },
+  "Web/CSS/column-rule": {
+    "modified": "2020-10-15T21:28:37.320Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz",
+      "Prinz_Rana",
+      "fscholz"
+    ]
+  },
+  "Web/CSS/column-rule-color": {
+    "modified": "2020-10-15T21:28:41.960Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz",
+      "fscholz"
+    ]
+  },
+  "Web/CSS/column-rule-style": {
+    "modified": "2020-10-15T21:28:36.751Z",
+    "contributors": [
+      "SJW",
+      "fscholz",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/column-rule-width": {
+    "modified": "2020-10-15T21:28:34.842Z",
+    "contributors": [
+      "duduindo",
+      "SJW",
+      "Prinz_Rana",
+      "fscholz",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/column-span": {
+    "modified": "2020-10-15T21:25:41.497Z",
+    "contributors": [
+      "SJW",
+      "fscholz",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/column-width": {
+    "modified": "2020-10-15T21:25:50.342Z",
+    "contributors": [
+      "SJW",
+      "Prinz_Rana",
+      "teoli",
+      "Sebastianz",
+      "eseifert"
+    ]
+  },
+  "Web/CSS/columns": {
+    "modified": "2020-12-04T17:15:37.070Z",
+    "contributors": [
+      "Johuspect",
+      "SJW",
+      "Sebastianz",
+      "Prinz_Rana",
+      "fscholz"
+    ]
+  },
+  "Web/CSS/content": {
+    "modified": "2020-10-15T21:29:22.645Z",
+    "contributors": [
+      "escattone",
+      "Editmonkey",
+      "SJW",
+      "Sebastianz",
+      "webdesignberlin"
+    ]
+  },
+  "Web/CSS/counter-increment": {
+    "modified": "2020-10-15T21:29:17.920Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz",
+      "fscholz"
+    ]
+  },
+  "Web/CSS/counter-reset": {
+    "modified": "2020-10-15T21:29:21.512Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz",
+      "fscholz"
+    ]
+  },
+  "Web/CSS/cursor": {
+    "modified": "2020-10-15T21:13:40.945Z",
+    "contributors": [
+      "nikcani",
+      "SJW",
+      "R0bin",
+      "Sebastianz",
+      "bee8bit",
+      "fscholz",
+      "Jürgen Jeka",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/custom-ident": {
+    "modified": "2019-03-23T22:44:45.016Z",
+    "contributors": [
+      "schlagi123",
+      "Guillaume-Heras",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/direction": {
+    "modified": "2020-10-15T21:42:48.562Z",
+    "contributors": [
+      "SJW",
+      "Dev201"
+    ]
+  },
+  "Web/CSS/display": {
+    "modified": "2020-10-15T21:14:06.910Z",
+    "contributors": [
+      "felixhaeberle",
+      "SJW",
+      "Sebastianz",
+      "Volker-E",
+      "fscholz",
+      "Jürgen Jeka",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/empty-cells": {
+    "modified": "2020-10-15T21:14:02.728Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz",
+      "fscholz",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/ersetztes_Element": {
+    "modified": "2019-03-23T22:00:32.824Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/filter": {
+    "modified": "2020-10-15T21:28:35.076Z",
+    "contributors": [
+      "SJW",
+      "Univream",
+      "Sebastianz",
+      "Prinz_Rana",
+      "teoli"
+    ]
+  },
+  "Web/CSS/flex-flow": {
+    "modified": "2020-10-15T21:25:37.797Z",
+    "contributors": [
+      "SJW",
+      "udvlp",
+      "fscholz",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/flex-grow": {
+    "modified": "2020-10-15T21:25:37.976Z",
+    "contributors": [
+      "vssn",
+      "SJW",
+      "Sebastianz",
+      "fscholz"
+    ]
+  },
+  "Web/CSS/flex-shrink": {
+    "modified": "2020-10-15T21:29:17.989Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz",
+      "fscholz"
+    ]
+  },
+  "Web/CSS/flex-wrap": {
+    "modified": "2020-10-15T21:25:39.113Z",
+    "contributors": [
+      "SJW",
+      "brainscript",
+      "fscholz",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/float": {
+    "modified": "2020-10-15T21:14:18.304Z",
+    "contributors": [
+      "SJW",
+      "fscholz",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/font": {
+    "modified": "2019-03-25T11:07:06.420Z",
+    "contributors": [
+      "KaiVolland",
+      "tim_kraut",
+      "MI5",
+      "fscholz",
+      "SJW",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/font-family": {
+    "modified": "2020-10-15T21:28:35.462Z",
+    "contributors": [
+      "SJW",
+      "fscholz",
+      "dio",
+      "Sebastianz",
+      "timbernasley"
+    ]
+  },
+  "Web/CSS/font-feature-settings": {
+    "modified": "2020-10-15T21:26:12.551Z",
+    "contributors": [
+      "SJW",
+      "Guillaume-Heras",
+      "fscholz",
+      "Volker-E",
+      "elomatreb"
+    ]
+  },
+  "Web/CSS/font-size": {
+    "modified": "2020-10-15T21:55:36.707Z",
+    "contributors": [
+      "SJW",
+      "Anonymous"
+    ]
+  },
+  "Web/CSS/font-style": {
+    "modified": "2020-10-15T22:29:43.767Z",
+    "contributors": [
+      "zuzuzu"
+    ]
+  },
+  "Web/CSS/font-variant": {
+    "modified": "2020-10-15T21:25:39.056Z",
+    "contributors": [
+      "zuzuzu",
+      "cgebel",
+      "SJW",
+      "fscholz",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/font-weight": {
+    "modified": "2020-10-15T21:25:38.147Z",
+    "contributors": [
+      "zuzuzu",
+      "kaljak",
+      "SphinxKnight",
+      "fscholz",
+      "Sebastianz",
+      "dio",
+      "SJW"
+    ]
+  },
+  "Web/CSS/frequency": {
+    "modified": "2019-03-23T23:23:30.111Z",
+    "contributors": [
+      "Sebastianz",
+      "fscholz",
+      "SJW"
+    ]
+  },
+  "Web/CSS/gradient": {
+    "modified": "2019-03-23T23:23:41.931Z",
+    "contributors": [
+      "Sebastianz",
+      "fscholz",
+      "SJW"
+    ]
+  },
+  "Web/CSS/grid": {
+    "modified": "2020-10-15T21:52:44.744Z",
+    "contributors": [
+      "SJW",
+      "ksm2"
+    ]
+  },
+  "Web/CSS/grid-gap": {
+    "modified": "2020-10-15T22:00:43.740Z",
+    "contributors": [
+      "AlexWayhill",
+      "Craeckerffm"
+    ]
+  },
+  "Web/CSS/grid-template-areas": {
+    "modified": "2020-10-15T22:02:47.559Z",
+    "contributors": [
+      "hutattedonmyarm"
+    ]
+  },
+  "Web/CSS/height": {
+    "modified": "2020-10-15T21:14:22.159Z",
+    "contributors": [
+      "SJW",
+      "mrstork",
+      "Sebastianz",
+      "fscholz",
+      "Jürgen Jeka",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/hyphens": {
+    "modified": "2020-10-15T21:23:04.048Z",
+    "contributors": [
+      "michelbalzer",
+      "SJW",
+      "tobias47n9e",
+      "julianhirt",
+      "SphinxKnight",
+      "Sebastianz",
+      "fscholz"
+    ]
+  },
+  "Web/CSS/image": {
+    "modified": "2020-10-15T21:28:54.360Z",
+    "contributors": [
+      "SJW",
+      "slayslot",
+      "mrstork",
+      "fscholz",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/image-orientation": {
+    "modified": "2020-10-15T21:36:43.065Z",
+    "contributors": [
+      "fscholz",
+      "prayash",
+      "Sebastianz",
+      "Dargmuesli"
+    ]
+  },
+  "Web/CSS/image-rendering": {
+    "modified": "2020-10-15T21:32:42.453Z",
+    "contributors": [
+      "SJW",
+      "Djfe",
+      "Sebastianz",
+      "Sheppy",
+      "robinboening",
+      "vale981"
+    ]
+  },
+  "Web/CSS/inherit": {
+    "modified": "2020-10-15T21:29:21.425Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/initial": {
+    "modified": "2019-03-23T23:22:15.583Z",
+    "contributors": [
+      "ralfstx",
+      "ansgar",
+      "SJW"
+    ]
+  },
+  "Web/CSS/integer": {
+    "modified": "2020-10-15T21:25:43.258Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz",
+      "fscholz"
+    ]
+  },
+  "Web/CSS/justify-content": {
+    "modified": "2020-10-15T21:29:14.742Z",
+    "contributors": [
+      "SJW",
+      "fscholz",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/length": {
+    "modified": "2020-10-15T21:25:36.832Z",
+    "contributors": [
+      "zuzuzu",
+      "kleinesfilmroellchen",
+      "SJW",
+      "mdnde",
+      "Sebastianz",
+      "supermueller",
+      "fscholz",
+      "Lucky42"
+    ]
+  },
+  "Web/CSS/letter-spacing": {
+    "modified": "2020-10-15T21:40:15.968Z",
+    "contributors": [
+      "SJW",
+      "tyrann0us",
+      "Prinz_Rana",
+      "teoli",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/line-break": {
+    "modified": "2020-10-15T21:39:35.382Z",
+    "contributors": [
+      "SJW",
+      "ExE-Boss",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/linear-gradient()": {
+    "modified": "2020-11-16T08:56:43.415Z",
+    "contributors": [
+      "chrisdavidmills",
+      "marcus-at-localhost",
+      "JuSchu",
+      "sahin",
+      "Sebastianz",
+      "prayash",
+      "auranvesdranor"
+    ]
+  },
+  "Web/CSS/list-style": {
+    "modified": "2019-03-24T00:03:48.208Z",
+    "contributors": [
+      "hansspiess",
+      "SphinxKnight",
+      "Aryx",
+      "teoli",
+      "screeny05",
+      "fscholz",
+      "SJW",
+      "ethertank",
+      "Jürgen Jeka",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/list-style-image": {
+    "modified": "2020-10-15T21:29:20.423Z",
+    "contributors": [
+      "SJW",
+      "wizAmit",
+      "SphinxKnight",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/list-style-position": {
+    "modified": "2020-10-15T21:29:19.736Z",
+    "contributors": [
+      "SJW",
+      "SphinxKnight",
+      "fscholz",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/list-style-type": {
+    "modified": "2020-10-15T21:28:59.236Z",
+    "contributors": [
+      "SJW",
+      "mdnde",
+      "Guillaume-Heras",
+      "Sebastianz",
+      "SphinxKnight"
+    ]
+  },
+  "Web/CSS/margin": {
+    "modified": "2019-03-24T00:08:49.174Z",
+    "contributors": [
+      "fscholz",
+      "SJW",
+      "Yuichiro",
+      "Jürgen Jeka",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/margin-bottom": {
+    "modified": "2019-03-24T00:08:42.855Z",
+    "contributors": [
+      "fscholz",
+      "SJW",
+      "Yuichiro",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/margin-left": {
+    "modified": "2019-03-23T23:18:57.876Z",
+    "contributors": [
+      "fscholz",
+      "SJW",
+      "Yuichiro",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/margin-right": {
+    "modified": "2019-03-24T00:08:48.817Z",
+    "contributors": [
+      "fscholz",
+      "SJW",
+      "Yuichiro",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/margin-top": {
+    "modified": "2019-03-23T23:13:12.430Z",
+    "contributors": [
+      "fscholz",
+      "SJW",
+      "Yuichiro",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/mask": {
+    "modified": "2020-10-15T21:29:04.125Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/max-height": {
+    "modified": "2020-10-15T21:14:01.543Z",
+    "contributors": [
+      "SJW",
+      "Simplexible",
+      "Sebastianz",
+      "Prinz_Rana",
+      "fscholz",
+      "Jürgen Jeka",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/max-width": {
+    "modified": "2019-03-18T21:16:49.107Z",
+    "contributors": [
+      "fscholz",
+      "SJW",
+      "Jürgen Jeka",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/min-height": {
+    "modified": "2019-03-24T00:03:51.575Z",
+    "contributors": [
+      "fscholz",
+      "SJW",
+      "Jürgen Jeka",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/min-width": {
+    "modified": "2019-03-24T00:03:50.944Z",
+    "contributors": [
+      "fscholz",
+      "SJW",
+      "Jürgen Jeka",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/mix-blend-mode": {
+    "modified": "2020-10-15T21:37:36.115Z",
+    "contributors": [
+      "ExE-Boss",
+      "SJW",
+      "Vainamo",
+      "Oliver_Schafeld",
+      "mrstork",
+      "Sebastianz",
+      "MaxKoehler"
+    ]
+  },
+  "Web/CSS/none": {
+    "modified": "2019-03-23T23:23:49.504Z",
+    "contributors": [
+      "SJW"
+    ]
+  },
+  "Web/CSS/normal": {
+    "modified": "2019-03-23T23:23:47.885Z",
+    "contributors": [
+      "dio",
+      "SJW"
+    ]
+  },
+  "Web/CSS/number": {
+    "modified": "2020-10-15T21:25:33.936Z",
+    "contributors": [
+      "duduindo",
+      "SJW",
+      "Sebastianz",
+      "fscholz"
+    ]
+  },
+  "Web/CSS/object-fit": {
+    "modified": "2020-10-15T21:31:57.582Z",
+    "contributors": [
+      "sp1r1t",
+      "SJW",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/object-position": {
+    "modified": "2019-03-23T22:11:15.878Z",
+    "contributors": [
+      "Craeckerffm"
+    ]
+  },
+  "Web/CSS/opacity": {
+    "modified": "2020-10-15T21:09:12.150Z",
+    "contributors": [
+      "SJW",
+      "MaxValue",
+      "Sebastianz",
+      "fscholz",
+      "FredB",
+      "Jürgen Jeka",
+      "j.j.",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/order": {
+    "modified": "2020-10-15T21:29:16.145Z",
+    "contributors": [
+      "SJW",
+      "fscholz",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/orphans": {
+    "modified": "2020-12-04T16:16:08.297Z",
+    "contributors": [
+      "Johuspect",
+      "SebinNyshkim"
+    ]
+  },
+  "Web/CSS/outline": {
+    "modified": "2020-12-04T16:15:02.597Z",
+    "contributors": [
+      "Johuspect"
+    ]
+  },
+  "Web/CSS/outline-color": {
+    "modified": "2019-03-23T22:19:25.777Z",
+    "contributors": [
+      "jmartsch"
+    ]
+  },
+  "Web/CSS/overflow": {
+    "modified": "2020-10-15T21:13:53.383Z",
+    "contributors": [
+      "SJW",
+      "KittMedia",
+      "fscholz",
+      "Jürgen Jeka",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/overscroll-behavior": {
+    "modified": "2020-10-15T22:17:19.963Z",
+    "contributors": [
+      "PPElite"
+    ]
+  },
+  "Web/CSS/overscroll-behavior-y": {
+    "modified": "2020-10-15T22:24:50.460Z",
+    "contributors": [
+      "jewuma"
+    ]
+  },
+  "Web/CSS/padding": {
+    "modified": "2020-10-15T21:12:30.556Z",
+    "contributors": [
+      "SJW",
+      "fscholz",
+      "Sebastianz",
+      "Yuichiro",
+      "Jürgen Jeka",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/padding-bottom": {
+    "modified": "2019-03-24T00:08:49.006Z",
+    "contributors": [
+      "fscholz",
+      "SJW",
+      "Yuichiro",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/padding-left": {
+    "modified": "2019-03-24T00:08:45.424Z",
+    "contributors": [
+      "dio",
+      "fscholz",
+      "SJW",
+      "Yuichiro",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/padding-right": {
+    "modified": "2019-03-24T00:08:45.285Z",
+    "contributors": [
+      "fscholz",
+      "SJW",
+      "Yuichiro",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/padding-top": {
+    "modified": "2019-03-24T00:08:43.442Z",
+    "contributors": [
+      "fscholz",
+      "SJW",
+      "Yuichiro",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/page-break-after": {
+    "modified": "2019-03-24T00:04:28.971Z",
+    "contributors": [
+      "fscholz",
+      "SJW",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/page-break-before": {
+    "modified": "2019-03-24T00:04:28.120Z",
+    "contributors": [
+      "fscholz",
+      "SJW",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/page-break-inside": {
+    "modified": "2019-03-24T00:04:23.699Z",
+    "contributors": [
+      "sibbl",
+      "wbamberg",
+      "fscholz",
+      "SJW",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/percentage": {
+    "modified": "2020-10-15T21:28:53.357Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz",
+      "Prinz_Rana",
+      "fscholz"
+    ]
+  },
+  "Web/CSS/pointer-events": {
+    "modified": "2019-03-23T22:46:26.785Z",
+    "contributors": [
+      "burnaDLX",
+      "avalanche",
+      "HendrikRunte",
+      "OppaHeinz"
+    ]
+  },
+  "Web/CSS/position": {
+    "modified": "2020-10-15T21:10:31.814Z",
+    "contributors": [
+      "MeiKatz",
+      "SJW",
+      "rimace",
+      "Sebastianz",
+      "lfuelling",
+      "fscholz",
+      "facial",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/position_value": {
+    "modified": "2020-10-15T21:41:09.046Z",
+    "contributors": [
+      "SJW",
+      "mrstork",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/quotes": {
+    "modified": "2020-10-15T21:28:32.529Z",
+    "contributors": [
+      "SJW",
+      "Krenair",
+      "Sebastianz",
+      "fscholz"
+    ]
+  },
+  "Web/CSS/ratio": {
+    "modified": "2020-10-15T21:25:37.478Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz",
+      "fscholz"
+    ]
+  },
+  "Web/CSS/resize": {
+    "modified": "2020-12-04T15:35:06.800Z",
+    "contributors": [
+      "Johuspect",
+      "SJW",
+      "SphinxKnight",
+      "Sebastianz",
+      "fscholz"
+    ]
+  },
+  "Web/CSS/resolution": {
+    "modified": "2019-03-23T23:13:45.403Z",
+    "contributors": [
+      "Sebastianz",
+      "fscholz"
+    ]
+  },
+  "Web/CSS/row-gap": {
+    "modified": "2020-12-07T11:33:06.603Z",
+    "contributors": [
+      "Borgitowner",
+      "hellschu"
+    ]
+  },
+  "Web/CSS/ruby-align": {
+    "modified": "2020-10-15T21:39:35.553Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/scroll-behavior": {
+    "modified": "2020-10-15T22:01:09.546Z",
+    "contributors": [
+      "Ryuno-Ki",
+      "jmartsch",
+      "diverent2",
+      "Goldfischpeter"
+    ]
+  },
+  "Web/CSS/shape": {
+    "modified": "2020-10-15T21:28:32.233Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz",
+      "Prinz_Rana",
+      "fscholz"
+    ]
+  },
+  "Web/CSS/string": {
+    "modified": "2020-10-15T21:39:38.004Z",
+    "contributors": [
+      "SJW",
+      "fscholz",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/tab-size": {
+    "modified": "2020-10-15T21:25:37.063Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz",
+      "Prinz_Rana"
+    ]
+  },
+  "Web/CSS/table-layout": {
+    "modified": "2020-12-04T16:11:25.312Z",
+    "contributors": [
+      "Johuspect"
+    ]
+  },
+  "Web/CSS/tatsächlicher_Wert": {
+    "modified": "2019-03-23T22:43:32.481Z",
+    "contributors": [
+      "schlagi123",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/text-align": {
+    "modified": "2020-12-04T16:04:32.676Z",
+    "contributors": [
+      "Johuspect",
+      "SJW",
+      "wbamberg",
+      "Sebastianz",
+      "fscholz",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/text-align-last": {
+    "modified": "2020-10-15T22:20:45.740Z",
+    "contributors": [
+      "MichaelGellings"
+    ]
+  },
+  "Web/CSS/text-decoration": {
+    "modified": "2020-10-15T21:14:00.052Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz",
+      "fscholz",
+      "Jürgen Jeka",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/text-decoration-color": {
+    "modified": "2019-03-23T23:33:25.614Z",
+    "contributors": [
+      "Sebastianz",
+      "fscholz",
+      "Fxedel",
+      "ethertank",
+      "TheRojam"
+    ]
+  },
+  "Web/CSS/text-decoration-line": {
+    "modified": "2020-10-15T21:28:36.449Z",
+    "contributors": [
+      "SJW",
+      "teoli",
+      "fscholz",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/text-indent": {
+    "modified": "2020-10-15T21:34:09.488Z",
+    "contributors": [
+      "SJW",
+      "fscholz",
+      "Simplexible",
+      "Prinz_Rana",
+      "Sebastianz",
+      "nVentis"
+    ]
+  },
+  "Web/CSS/text-justify": {
+    "modified": "2020-10-15T22:20:47.319Z",
+    "contributors": [
+      "MichaelGellings"
+    ]
+  },
+  "Web/CSS/text-overflow": {
+    "modified": "2020-10-15T21:27:57.701Z",
+    "contributors": [
+      "SJW",
+      "Glogau",
+      "Guillaume-Heras",
+      "Sebastianz",
+      "DavidArndt"
+    ]
+  },
+  "Web/CSS/text-rendering": {
+    "modified": "2020-10-15T21:27:06.900Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz",
+      "powerswitch"
+    ]
+  },
+  "Web/CSS/text-shadow": {
+    "modified": "2020-10-15T21:13:25.181Z",
+    "contributors": [
+      "SJW",
+      "Prinz_Rana",
+      "Sebastianz",
+      "fscholz"
+    ]
+  },
+  "Web/CSS/text-transform": {
+    "modified": "2019-10-21T08:20:30.891Z",
+    "contributors": [
+      "decay42",
+      "fscholz",
+      "Sebastianz",
+      "nVentis",
+      "julian.weinert"
+    ]
+  },
+  "Web/CSS/text-underline-position": {
+    "modified": "2020-10-15T21:28:31.332Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz",
+      "fscholz",
+      "Lucky42"
+    ]
+  },
+  "Web/CSS/time": {
+    "modified": "2020-10-15T21:23:00.694Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz",
+      "Prinz_Rana",
+      "fscholz"
+    ]
+  },
+  "Web/CSS/touch-action": {
+    "modified": "2020-10-15T21:34:13.763Z",
+    "contributors": [
+      "SJW",
+      "fscholz",
+      "teoli",
+      "Sebastianz",
+      "fboes",
+      "chrros"
+    ]
+  },
+  "Web/CSS/transform": {
+    "modified": "2020-10-15T21:31:19.370Z",
+    "contributors": [
+      "LoVo666",
+      "SJW",
+      "wilmaedd",
+      "Sebastianz",
+      "fscholz",
+      "MatzeMarcel"
+    ]
+  },
+  "Web/CSS/transform-origin": {
+    "modified": "2020-10-15T22:00:48.518Z",
+    "contributors": [
+      "mack3457",
+      "spotbot2k"
+    ]
+  },
+  "Web/CSS/transition": {
+    "modified": "2020-10-15T21:57:36.200Z",
+    "contributors": [
+      "Ryuno-Ki",
+      "SJW",
+      "Kairyon"
+    ]
+  },
+  "Web/CSS/transition-property": {
+    "modified": "2020-10-15T21:33:33.457Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz",
+      "felhe",
+      "StephenJB"
+    ]
+  },
+  "Web/CSS/unicode-bidi": {
+    "modified": "2020-10-15T21:42:38.107Z",
+    "contributors": [
+      "SJW",
+      "Dev201"
+    ]
+  },
+  "Web/CSS/unset": {
+    "modified": "2020-10-15T21:37:37.480Z",
+    "contributors": [
+      "SJW",
+      "seemann",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/url": {
+    "modified": "2020-10-15T22:01:29.787Z",
+    "contributors": [
+      "valentinprotiuc"
+    ]
+  },
+  "Web/CSS/vertical-align": {
+    "modified": "2020-10-15T21:14:21.203Z",
+    "contributors": [
+      "nw520",
+      "iGadget",
+      "Artjom",
+      "fscholz",
+      "SJW",
+      "patpir",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/visibility": {
+    "modified": "2020-10-15T21:14:04.715Z",
+    "contributors": [
+      "SJW",
+      "fscholz",
+      "Sebastianz",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/white-space": {
+    "modified": "2020-12-04T16:00:27.642Z",
+    "contributors": [
+      "Johuspect",
+      "SJW",
+      "fscholz",
+      "Sebastianz",
+      "kelunik",
+      "bee8bit",
+      "Unity"
+    ]
+  },
+  "Web/CSS/widows": {
+    "modified": "2020-12-03T14:57:27.603Z",
+    "contributors": [
+      "Johuspect",
+      "SebinNyshkim",
+      "SJW",
+      "Sebastianz",
+      "fscholz"
+    ]
+  },
+  "Web/CSS/width": {
+    "modified": "2020-10-15T21:14:05.278Z",
+    "contributors": [
+      "PPElite",
+      "SJW",
+      "Simplexible",
+      "Prinz_Rana",
+      "Sebastianz",
+      "fscholz",
+      "Jürgen Jeka",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/word-break": {
+    "modified": "2020-10-15T21:37:33.900Z",
+    "contributors": [
+      "SJW",
+      "okj579",
+      "teoli",
+      "fscholz",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/word-spacing": {
+    "modified": "2020-10-15T21:39:36.068Z",
+    "contributors": [
+      "SJW",
+      "Prinz_Rana",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/word-wrap": {
+    "modified": "2020-10-15T21:38:14.535Z",
+    "contributors": [
+      "SJW",
+      "ksuess",
+      "screeny05",
+      "Clubfan22",
+      "fscholz",
+      "Sebastianz",
+      "spiegelp"
+    ]
+  },
+  "Web/CSS/z-index": {
+    "modified": "2020-11-24T17:13:13.731Z",
+    "contributors": [
+      "Johuspect",
+      "SJW",
+      "chrisdavidmills",
+      "steve-stnhbr",
+      "Sebastianz",
+      "fscholz",
+      "rwetzlmayr",
+      "axlwaii"
+    ]
+  },
+  "Web/Demos_of_open_web_technologies": {
+    "modified": "2019-03-23T22:39:34.270Z",
+    "contributors": [
+      "sigoa",
+      "pixelwiese",
+      "Dev201"
+    ]
+  },
+  "Web/Events": {
+    "modified": "2019-09-15T10:58:54.372Z",
+    "contributors": [
+      "grumpy-cat",
+      "wbamberg",
+      "StevenS77",
+      "teoli"
+    ]
+  },
+  "Web/Events/DOMContentLoaded": {
+    "modified": "2019-04-30T14:16:07.184Z",
+    "contributors": [
+      "wbamberg",
+      "timvancleef",
+      "forrestkirby",
+      "fscholz",
+      "Sewi",
+      "horlabs"
+    ]
+  },
+  "Web/Events/change": {
+    "modified": "2019-03-23T23:08:15.170Z",
+    "contributors": [
+      "fscholz",
+      "spiegelp"
+    ]
+  },
+  "Web/Events/load": {
+    "modified": "2019-09-11T09:06:16.530Z",
+    "contributors": [
+      "wbamberg",
+      "fscholz",
+      "LeoDecking"
+    ]
+  },
+  "Web/Events/readystatechange": {
+    "modified": "2019-03-23T22:13:59.735Z",
+    "contributors": [
+      "fscholz",
+      "mdnde",
+      "cussack",
+      "Lepstr"
+    ]
+  },
+  "Web/Guide": {
+    "modified": "2019-03-23T23:28:10.493Z",
+    "contributors": [
+      "olhaar",
+      "loki",
+      "Sheppy"
+    ]
+  },
+  "Web/Guide/AJAX": {
+    "modified": "2019-03-24T00:04:53.836Z",
+    "contributors": [
+      "chrisdavidmills",
+      "DineshMv",
+      "fscholz",
+      "hrctelekom",
+      "DavidWalsh",
+      "Locke",
+      "M@d Man"
+    ]
+  },
+  "Web/Guide/AJAX/Erste_Schritte": {
+    "modified": "2020-08-11T10:37:53.338Z",
+    "contributors": [
+      "merlincom"
+    ]
+  },
+  "Web/Guide/CSS/Getting_started": {
+    "modified": "2019-03-24T00:05:49.642Z",
+    "contributors": [
+      "teoli",
+      "fscholz",
+      "DavidWalsh"
+    ]
+  },
+  "Web/Guide/CSS/Getting_started/Farbe": {
+    "modified": "2019-03-23T23:08:03.393Z",
+    "contributors": [
+      "spiegelp",
+      "thkoch"
+    ]
+  },
+  "Web/Guide/CSS/Getting_started/Kaskadierung_und_vererbung": {
+    "modified": "2019-03-23T22:49:16.030Z",
+    "contributors": [
+      "spiegelp"
+    ]
+  },
+  "Web/Guide/CSS/Getting_started/Lesbares_CSS": {
+    "modified": "2019-03-23T22:41:33.439Z",
+    "contributors": [
+      "spiegelp"
+    ]
+  },
+  "Web/Guide/CSS/Getting_started/Selektoren": {
+    "modified": "2019-03-23T23:11:23.467Z",
+    "contributors": [
+      "woiddale",
+      "spiegelp",
+      "hpkainz"
+    ]
+  },
+  "Web/Guide/CSS/Getting_started/Textstyles": {
+    "modified": "2019-03-23T22:49:16.242Z",
+    "contributors": [
+      "spiegelp"
+    ]
+  },
+  "Web/Guide/CSS/Getting_started/Was_ist_CSS": {
+    "modified": "2020-05-05T12:04:06.710Z",
+    "contributors": [
+      "Helge-HH",
+      "fhwfzfge",
+      "msc1979",
+      "fscholz",
+      "Palmstroem",
+      "barning"
+    ]
+  },
+  "Web/Guide/CSS/Getting_started/Why_use_CSS": {
+    "modified": "2019-03-23T22:57:29.159Z",
+    "contributors": [
+      "fhwfzfge",
+      "Palmstroem"
+    ]
+  },
+  "Web/Guide/CSS/Getting_started/Wie_CSS_funktioniert": {
+    "modified": "2019-03-23T22:57:04.436Z",
+    "contributors": [
+      "Palmstroem"
+    ]
+  },
+  "Web/Guide/CSS/Scaling_background_images": {
+    "modified": "2019-03-23T23:06:19.663Z",
+    "contributors": [
+      "sos4nt",
+      "mrstork",
+      "webwirbel"
+    ]
+  },
+  "Web/Guide/DOM": {
+    "modified": "2019-03-23T23:28:11.671Z",
+    "contributors": [
+      "Sheppy"
+    ]
+  },
+  "Web/Guide/DOM/Manipulating_the_browser_history": {
+    "modified": "2019-03-23T23:28:10.854Z",
+    "contributors": [
+      "wanst",
+      "NiklasMerz",
+      "daniel-evers",
+      "Adowrath",
+      "serv-inc",
+      "Oliver_Schafeld",
+      "BugHunter2k",
+      "christian314159",
+      "darksider3"
+    ]
+  },
+  "Web/Guide/Events": {
+    "modified": "2019-03-18T21:10:49.464Z",
+    "contributors": [
+      "stef4412",
+      "gportioli"
+    ]
+  },
+  "Web/Guide/Events/Creating_and_triggering_events": {
+    "modified": "2019-03-18T20:36:47.550Z",
+    "contributors": [
+      "td8"
+    ]
+  },
+  "Web/Guide/Graphics": {
+    "modified": "2019-03-23T23:05:58.536Z",
+    "contributors": [
+      "mdschweda",
+      "Aloso",
+      "Cginybetty"
+    ]
+  },
+  "Web/Guide/HTML/Canvas_Tutorial": {
+    "modified": "2020-07-31T10:20:16.447Z",
+    "contributors": [
+      "mgrubinger",
+      "sigoa",
+      "surferboy250",
+      "GeorgKern",
+      "Leun4m",
+      "medium-endian",
+      "manni66",
+      "pixunil"
+    ]
+  },
+  "Web/Guide/HTML/Canvas_Tutorial/Advanced_animations": {
+    "modified": "2019-03-23T22:48:52.383Z",
+    "contributors": [
+      "teoli",
+      "jumpball"
+    ]
+  },
+  "Web/Guide/HTML/Canvas_Tutorial/Applying_styles_and_colors": {
+    "modified": "2019-10-10T16:33:46.525Z",
+    "contributors": [
+      "Sebastianz",
+      "GeorgKern"
+    ]
+  },
+  "Web/Guide/HTML/Canvas_Tutorial/Basic_animations": {
+    "modified": "2019-03-18T21:45:29.279Z",
+    "contributors": [
+      "RmnWtnkmp"
+    ]
+  },
+  "Web/Guide/HTML/Canvas_Tutorial/Bilder": {
+    "modified": "2019-03-23T23:12:04.746Z",
+    "contributors": [
+      "sombrastudios",
+      "teoli",
+      "Leun4m",
+      "thedaft",
+      "pixunil"
+    ]
+  },
+  "Web/Guide/HTML/Canvas_Tutorial/Canvas_optimieren": {
+    "modified": "2019-03-18T21:47:09.896Z",
+    "contributors": [
+      "SimonBuxx"
+    ]
+  },
+  "Web/Guide/HTML/Canvas_Tutorial/Drawing_text": {
+    "modified": "2019-03-18T21:38:17.565Z",
+    "contributors": [
+      "Johann150"
+    ]
+  },
+  "Web/Guide/HTML/Canvas_Tutorial/Formen_zeichnen": {
+    "modified": "2019-10-06T12:20:20.273Z",
+    "contributors": [
+      "I_I",
+      "oezpeda",
+      "Siphalor",
+      "teoli",
+      "Leun4m",
+      "thedaft",
+      "pixunil"
+    ]
+  },
+  "Web/Guide/HTML/Canvas_Tutorial/Grundlagen": {
+    "modified": "2019-10-06T12:11:53.548Z",
+    "contributors": [
+      "I_I",
+      "fheckl",
+      "FelixLehmann",
+      "P5ych0",
+      "teoli",
+      "Leun4m",
+      "medium-endian",
+      "pixunil"
+    ]
+  },
+  "Web/Guide/HTML/Content_Editable": {
+    "modified": "2020-02-12T02:09:56.043Z",
+    "contributors": [
+      "blackjack4494",
+      "lxdiamond"
+    ]
+  },
+  "Web/Guide/HTML/Inhaltskategorien": {
+    "modified": "2020-07-16T11:12:55.534Z",
+    "contributors": [
+      "matthiasulrich",
+      "Sebastianz",
+      "jumpball"
+    ]
+  },
+  "Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document": {
+    "modified": "2019-03-18T20:37:20.242Z",
+    "contributors": [
+      "SebinNyshkim",
+      "BlackRebell89"
+    ]
+  },
+  "Web/HTML": {
+    "modified": "2019-09-10T15:19:11.194Z",
+    "contributors": [
+      "SphinxKnight",
+      "NoldoArnion",
+      "Darkterror45",
+      "sigoa",
+      "lumberplumber",
+      "Draussenduscher",
+      "VJSchneid",
+      "skl",
+      "alippold",
+      "fscholz",
+      "kklein",
+      "LexAndreessen",
+      "Henry-usa",
+      "Timmi"
+    ]
+  },
+  "Web/HTML/Applying_color": {
+    "modified": "2019-03-18T21:41:16.488Z",
+    "contributors": [
+      "DasRudelndeRudel",
+      "fhwfzfge"
+    ]
+  },
+  "Web/HTML/Attributes": {
+    "modified": "2020-08-17T16:24:34.561Z",
+    "contributors": [
+      "Gitti039",
+      "steemit-halloworld",
+      "lkreimann",
+      "schlagi123",
+      "LazerPhil",
+      "Anonymous",
+      "StevenS77"
+    ]
+  },
+  "Web/HTML/Block-level_elemente": {
+    "modified": "2020-05-07T06:16:30.382Z",
+    "contributors": [
+      "zuzuzu",
+      "Loilo",
+      "mdschweda",
+      "drgn",
+      "VJSchneid",
+      "teoli",
+      "lukas.oppermann"
+    ]
+  },
+  "Web/HTML/Canvas": {
+    "modified": "2019-03-23T23:16:11.989Z",
+    "contributors": [
+      "sigoa",
+      "petacat",
+      "Aloso",
+      "barning",
+      "andreas.remdt"
+    ]
+  },
+  "Web/HTML/Element": {
+    "modified": "2020-01-27T05:32:14.694Z",
+    "contributors": [
+      "lucas-walter",
+      "PascalKlassen",
+      "SJW",
+      "schlagi123",
+      "denis.zygann@gmail.com",
+      "teoli",
+      "ethertank",
+      "adrianfischer",
+      "fscholz",
+      "Crash"
+    ]
+  },
+  "Web/HTML/Element/Frame": {
+    "modified": "2020-10-15T22:10:35.778Z",
+    "contributors": [
+      "thunderhook"
+    ]
+  },
+  "Web/HTML/Element/Input": {
+    "modified": "2020-03-21T07:28:26.249Z",
+    "contributors": [
+      "Ryuno-Ki",
+      "evayde",
+      "accessabilly",
+      "Skasi",
+      "JorisGutjahr",
+      "chrillek",
+      "yannick_versley",
+      "Sebastianz",
+      "dio",
+      "teoli",
+      "thaddeus"
+    ]
+  },
+  "Web/HTML/Element/Input/button": {
+    "modified": "2020-01-04T13:22:17.254Z",
+    "contributors": [
+      "use-x",
+      "Breaker222",
+      "Sebastianz",
+      "Sweapz"
+    ]
+  },
+  "Web/HTML/Element/Input/checkbox": {
+    "modified": "2020-10-15T22:29:32.835Z",
+    "contributors": [
+      "clemens.klapp"
+    ]
+  },
+  "Web/HTML/Element/Shadow": {
+    "modified": "2019-04-09T10:21:03.813Z",
+    "contributors": [
+      "nnscr",
+      "AndreasSchantl"
+    ]
+  },
+  "Web/HTML/Element/a": {
+    "modified": "2019-03-23T23:13:37.609Z",
+    "contributors": [
+      "dio",
+      "dhcgn",
+      "Abro",
+      "omicron81",
+      "Type-Style",
+      "Sebastianz",
+      "skl",
+      "Lucky42"
+    ]
+  },
+  "Web/HTML/Element/abbr": {
+    "modified": "2020-10-15T21:28:46.526Z",
+    "contributors": [
+      "SebinNyshkim",
+      "Sebastianz",
+      "fscholz"
+    ]
+  },
+  "Web/HTML/Element/acronym": {
+    "modified": "2020-10-15T21:28:43.905Z",
+    "contributors": [
+      "SebinNyshkim",
+      "kklein"
+    ]
+  },
+  "Web/HTML/Element/address": {
+    "modified": "2019-03-23T23:13:25.598Z",
+    "contributors": [
+      "Sebastianz",
+      "kklein"
+    ]
+  },
+  "Web/HTML/Element/applet": {
+    "modified": "2019-03-23T23:13:28.644Z",
+    "contributors": [
+      "kklein"
+    ]
+  },
+  "Web/HTML/Element/area": {
+    "modified": "2020-10-15T21:34:00.314Z",
+    "contributors": [
+      "fscholz",
+      "Sebastianz",
+      "spiegelp"
+    ]
+  },
+  "Web/HTML/Element/article": {
+    "modified": "2020-10-15T21:28:44.586Z",
+    "contributors": [
+      "SebinNyshkim",
+      "eluchsinger",
+      "Sebastianz"
+    ]
+  },
+  "Web/HTML/Element/aside": {
+    "modified": "2020-10-15T21:28:45.868Z",
+    "contributors": [
+      "fscholz",
+      "Qowyn",
+      "Sebastianz",
+      "kklein"
+    ]
+  },
+  "Web/HTML/Element/b": {
+    "modified": "2019-03-24T00:12:26.873Z",
+    "contributors": [
+      "Maugo",
+      "schlagi123",
+      "tobiasfabian",
+      "teoli",
+      "DD0101",
+      "fscholz",
+      "Crash"
+    ]
+  },
+  "Web/HTML/Element/base": {
+    "modified": "2019-03-18T20:55:12.966Z",
+    "contributors": [
+      "nerdbeere",
+      "fabsenet",
+      "marymar",
+      "Sebastianz",
+      "xomz",
+      "SJW"
+    ]
+  },
+  "Web/HTML/Element/bdi": {
+    "modified": "2019-03-23T22:05:29.691Z",
+    "contributors": [
+      "grandmalovesyou",
+      "Leun4m"
+    ]
+  },
+  "Web/HTML/Element/bdo": {
+    "modified": "2019-03-23T23:13:23.713Z",
+    "contributors": [
+      "Sebastianz",
+      "kklein"
+    ]
+  },
+  "Web/HTML/Element/bgsound": {
+    "modified": "2019-03-23T23:08:23.063Z",
+    "contributors": [
+      "MorningCrafter"
+    ]
+  },
+  "Web/HTML/Element/big": {
+    "modified": "2019-03-23T23:13:20.974Z",
+    "contributors": [
+      "kklein"
+    ]
+  },
+  "Web/HTML/Element/blink": {
+    "modified": "2019-03-23T23:13:22.754Z",
+    "contributors": [
+      "Aryx",
+      "kklein"
+    ]
+  },
+  "Web/HTML/Element/blockquote": {
+    "modified": "2019-03-23T23:13:24.036Z",
+    "contributors": [
+      "Sebastianz",
+      "kklein"
+    ]
+  },
+  "Web/HTML/Element/body": {
+    "modified": "2019-03-23T23:06:05.733Z",
+    "contributors": [
+      "Sebastianz",
+      "felhe",
+      "loki"
+    ]
+  },
+  "Web/HTML/Element/br": {
+    "modified": "2019-03-23T23:37:55.770Z",
+    "contributors": [
+      "schlagi123",
+      "dio",
+      "teoli",
+      "Sprottenwels"
+    ]
+  },
+  "Web/HTML/Element/canvas": {
+    "modified": "2019-03-24T00:07:16.201Z",
+    "contributors": [
+      "benediktp",
+      "teoli",
+      "pixunil",
+      "xaky",
+      "iab"
+    ]
+  },
+  "Web/HTML/Element/caption": {
+    "modified": "2019-03-18T21:14:29.827Z",
+    "contributors": [
+      "JustAnotherJavaProgrammer",
+      "RmnWtnkmp"
+    ]
+  },
+  "Web/HTML/Element/center": {
+    "modified": "2019-03-23T23:13:30.135Z",
+    "contributors": [
+      "kklein"
+    ]
+  },
+  "Web/HTML/Element/cite": {
+    "modified": "2019-03-23T23:13:24.867Z",
+    "contributors": [
+      "Sebastianz",
+      "kklein"
+    ]
+  },
+  "Web/HTML/Element/code": {
+    "modified": "2019-09-16T08:58:23.052Z",
+    "contributors": [
+      "ThomasSpornraft",
+      "Sebastianz",
+      "Slashcat",
+      "kklein"
+    ]
+  },
+  "Web/HTML/Element/col": {
+    "modified": "2020-10-15T21:58:35.643Z",
+    "contributors": [
+      "RmnWtnkmp",
+      "dio",
+      "grandmalovesyou"
+    ]
+  },
+  "Web/HTML/Element/data": {
+    "modified": "2019-03-23T22:03:47.937Z",
+    "contributors": [
+      "grandmalovesyou"
+    ]
+  },
+  "Web/HTML/Element/datalist": {
+    "modified": "2020-10-15T21:21:57.425Z",
+    "contributors": [
+      "rivalitaet",
+      "fscholz",
+      "mfranzke",
+      "Sebastianz",
+      "SJW",
+      "teoli",
+      "nothine"
+    ]
+  },
+  "Web/HTML/Element/dd": {
+    "modified": "2019-03-23T23:13:01.544Z",
+    "contributors": [
+      "Sebastianz",
+      "kklein"
+    ]
+  },
+  "Web/HTML/Element/del": {
+    "modified": "2019-03-23T23:13:03.883Z",
+    "contributors": [
+      "Sebastianz",
+      "kklein"
+    ]
+  },
+  "Web/HTML/Element/details": {
+    "modified": "2020-10-15T21:28:48.213Z",
+    "contributors": [
+      "chrisdavidmills",
+      "SJW",
+      "wbamberg",
+      "flying-sheep",
+      "Sebastianz",
+      "kklein"
+    ]
+  },
+  "Web/HTML/Element/dialog": {
+    "modified": "2019-03-23T22:49:25.564Z",
+    "contributors": [
+      "webD97",
+      "Sebastianz",
+      "kiloalphaindia"
+    ]
+  },
+  "Web/HTML/Element/dir": {
+    "modified": "2019-03-23T23:13:01.665Z",
+    "contributors": [
+      "kklein"
+    ]
+  },
+  "Web/HTML/Element/div": {
+    "modified": "2020-05-07T06:47:07.777Z",
+    "contributors": [
+      "zuzuzu",
+      "Sebastianz",
+      "kklein"
+    ]
+  },
+  "Web/HTML/Element/dl": {
+    "modified": "2019-03-23T23:13:02.194Z",
+    "contributors": [
+      "schlagi123",
+      "Sebastianz",
+      "ThomasLandauer",
+      "idmean",
+      "wtw",
+      "kklein"
+    ]
+  },
+  "Web/HTML/Element/dt": {
+    "modified": "2019-03-23T23:12:59.924Z",
+    "contributors": [
+      "tyrann0us",
+      "Sebastianz",
+      "kklein"
+    ]
+  },
+  "Web/HTML/Element/em": {
+    "modified": "2019-03-23T22:44:49.981Z",
+    "contributors": [
+      "grandmalovesyou",
+      "dio"
+    ]
+  },
+  "Web/HTML/Element/embed": {
+    "modified": "2019-03-23T22:03:35.260Z",
+    "contributors": [
+      "grandmalovesyou"
+    ]
+  },
+  "Web/HTML/Element/fieldset": {
+    "modified": "2019-03-23T22:03:44.029Z",
+    "contributors": [
+      "duncancumming",
+      "Cerberooo",
+      "grandmalovesyou"
+    ]
+  },
+  "Web/HTML/Element/font": {
+    "modified": "2019-03-18T21:17:40.865Z",
+    "contributors": [
+      "RmnWtnkmp"
+    ]
+  },
+  "Web/HTML/Element/footer": {
+    "modified": "2020-10-15T21:28:59.142Z",
+    "contributors": [
+      "fscholz",
+      "Sebastianz",
+      "kklein"
+    ]
+  },
+  "Web/HTML/Element/h1-h6": {
+    "modified": "2019-03-24T00:04:35.426Z",
+    "contributors": [
+      "schlagi123",
+      "teoli",
+      "fscholz"
+    ]
+  },
+  "Web/HTML/Element/head": {
+    "modified": "2019-03-24T00:04:41.043Z",
+    "contributors": [
+      "schlagi123",
+      "teoli",
+      "fscholz",
+      "Crash"
+    ]
+  },
+  "Web/HTML/Element/header": {
+    "modified": "2019-03-23T23:12:58.526Z",
+    "contributors": [
+      "Sebastianz",
+      "supermueller",
+      "kklein"
+    ]
+  },
+  "Web/HTML/Element/hr": {
+    "modified": "2019-03-24T00:04:16.306Z",
+    "contributors": [
+      "schlagi123",
+      "Shidigital",
+      "dio",
+      "teoli",
+      "fscholz",
+      "Crash"
+    ]
+  },
+  "Web/HTML/Element/html": {
+    "modified": "2019-04-01T00:07:49.772Z",
+    "contributors": [
+      "ToBeFree",
+      "giffeler",
+      "Sebastianz",
+      "Slashcat",
+      "AickeSchulz",
+      "teoli",
+      "fscholz",
+      "Crash"
+    ]
+  },
+  "Web/HTML/Element/i": {
+    "modified": "2019-03-23T22:30:02.803Z",
+    "contributors": [
+      "RmnWtnkmp"
+    ]
+  },
+  "Web/HTML/Element/iframe": {
+    "modified": "2019-03-24T00:04:37.363Z",
+    "contributors": [
+      "schlagi123",
+      "teoli",
+      "fscholz",
+      "Crocki"
+    ]
+  },
+  "Web/HTML/Element/image": {
+    "modified": "2020-10-15T22:02:53.775Z",
+    "contributors": [
+      "teoli",
+      "jackyscript"
+    ]
+  },
+  "Web/HTML/Element/img": {
+    "modified": "2019-03-23T22:44:40.885Z",
+    "contributors": [
+      "emanpresu",
+      "mdnde",
+      "jumpball"
+    ]
+  },
+  "Web/HTML/Element/ins": {
+    "modified": "2019-03-23T23:10:24.798Z",
+    "contributors": [
+      "Sebastianz",
+      "kklein"
+    ]
+  },
+  "Web/HTML/Element/legend": {
+    "modified": "2020-10-15T22:04:07.283Z",
+    "contributors": [
+      "annivin"
+    ]
+  },
+  "Web/HTML/Element/li": {
+    "modified": "2019-06-06T11:33:12.993Z",
+    "contributors": [
+      "humbapa",
+      "Sebastianz",
+      "jumpball",
+      "dio",
+      "teoli",
+      "Aybee",
+      "fscholz",
+      "Crash"
+    ]
+  },
+  "Web/HTML/Element/link": {
+    "modified": "2019-03-23T23:03:06.561Z",
+    "contributors": [
+      "hagbard42",
+      "Sebastianz",
+      "Rudi3"
+    ]
+  },
+  "Web/HTML/Element/main": {
+    "modified": "2019-03-23T23:02:25.206Z",
+    "contributors": [
+      "marymar",
+      "Sebastianz",
+      "MarauderXtreme",
+      "Slashcat",
+      "dennis_sari"
+    ]
+  },
+  "Web/HTML/Element/map": {
+    "modified": "2020-10-15T21:31:08.460Z",
+    "contributors": [
+      "fscholz",
+      "Sebastianz",
+      "RmnWtnkmp",
+      "nathankuechler"
+    ]
+  },
+  "Web/HTML/Element/marquee": {
+    "modified": "2019-04-01T09:05:38.364Z",
+    "contributors": [
+      "trollkotze",
+      "Scurch"
+    ]
+  },
+  "Web/HTML/Element/nav": {
+    "modified": "2020-10-15T22:14:07.749Z",
+    "contributors": [
+      "NoldoArnion"
+    ]
+  },
+  "Web/HTML/Element/noembed": {
+    "modified": "2020-10-15T22:15:59.878Z",
+    "contributors": [
+      "SebinNyshkim"
+    ]
+  },
+  "Web/HTML/Element/noscript": {
+    "modified": "2020-10-15T21:24:04.151Z",
+    "contributors": [
+      "schlagi123",
+      "Sebastianz",
+      "greiner",
+      "teoli",
+      "G_hi3"
+    ]
+  },
+  "Web/HTML/Element/object": {
+    "modified": "2019-03-23T23:11:21.869Z",
+    "contributors": [
+      "Sebastianz",
+      "isaraystanz"
+    ]
+  },
+  "Web/HTML/Element/ol": {
+    "modified": "2019-03-24T00:04:15.805Z",
+    "contributors": [
+      "somaGFX",
+      "schlagi123",
+      "dio",
+      "teoli",
+      "fscholz",
+      "Crash"
+    ]
+  },
+  "Web/HTML/Element/optgroup": {
+    "modified": "2019-03-23T23:12:58.044Z",
+    "contributors": [
+      "scherii",
+      "Sebastianz"
+    ]
+  },
+  "Web/HTML/Element/option": {
+    "modified": "2019-03-23T23:05:53.035Z",
+    "contributors": [
+      "Sebastianz",
+      "hschieck"
+    ]
+  },
+  "Web/HTML/Element/p": {
+    "modified": "2020-10-15T21:13:54.778Z",
+    "contributors": [
+      "zuzuzu",
+      "schlagi123",
+      "FlorianBrinkmann",
+      "dio",
+      "teoli",
+      "fscholz",
+      "ethertank",
+      "Crash"
+    ]
+  },
+  "Web/HTML/Element/picture": {
+    "modified": "2020-10-15T21:41:41.688Z",
+    "contributors": [
+      "SJW",
+      "tobias47n9e",
+      "tobiasfabian",
+      "ViciousPecan"
+    ]
+  },
+  "Web/HTML/Element/pre": {
+    "modified": "2019-03-23T23:37:55.984Z",
+    "contributors": [
+      "born2webdesign",
+      "schlagi123",
+      "teoli",
+      "Sprottenwels"
+    ]
+  },
+  "Web/HTML/Element/progress": {
+    "modified": "2020-04-22T07:16:43.825Z",
+    "contributors": [
+      "Breaker222",
+      "thuhh",
+      "Volker-E",
+      "wbamberg",
+      "phlppn",
+      "DrMabuse23",
+      "Sebastianz",
+      "teoli",
+      "Slashcat"
+    ]
+  },
+  "Web/HTML/Element/q": {
+    "modified": "2019-03-18T21:14:29.591Z",
+    "contributors": [
+      "JustAnotherJavaProgrammer",
+      "Sebastianz",
+      "kklein"
+    ]
+  },
+  "Web/HTML/Element/s": {
+    "modified": "2019-03-23T23:11:49.678Z",
+    "contributors": [
+      "Sebastianz",
+      "kklein"
+    ]
+  },
+  "Web/HTML/Element/section": {
+    "modified": "2020-03-22T16:15:05.047Z",
+    "contributors": [
+      "GiovanniHD201E",
+      "lkreimann",
+      "Sebastianz",
+      "wolfrabe"
+    ]
+  },
+  "Web/HTML/Element/strong": {
+    "modified": "2019-03-24T00:04:39.876Z",
+    "contributors": [
+      "schlagi123",
+      "Slashcat",
+      "teoli",
+      "fscholz",
+      "Crash"
+    ]
+  },
+  "Web/HTML/Element/summary": {
+    "modified": "2020-10-15T21:28:58.977Z",
+    "contributors": [
+      "SJW",
+      "wbamberg",
+      "kklein"
+    ]
+  },
+  "Web/HTML/Element/table": {
+    "modified": "2019-03-23T23:17:42.079Z",
+    "contributors": [
+      "Dev201",
+      "fscholz",
+      "Jublo-Solutions"
+    ]
+  },
+  "Web/HTML/Element/td": {
+    "modified": "2020-10-15T22:21:01.174Z",
+    "contributors": [
+      "colsceg"
+    ]
+  },
+  "Web/HTML/Element/template": {
+    "modified": "2019-03-23T22:54:16.252Z",
+    "contributors": [
+      "Metaa",
+      "Sebastianz",
+      "phil-schreiber"
+    ]
+  },
+  "Web/HTML/Element/th": {
+    "modified": "2019-03-23T22:02:40.278Z",
+    "contributors": [
+      "dio"
+    ]
+  },
+  "Web/HTML/Element/time": {
+    "modified": "2019-03-23T23:21:37.890Z",
+    "contributors": [
+      "Sebastianz",
+      "dennis_sari",
+      "teoli",
+      "tim_kraut"
+    ]
+  },
+  "Web/HTML/Element/title": {
+    "modified": "2019-09-11T09:06:33.827Z",
+    "contributors": [
+      "podarcis",
+      "Sebastianz",
+      "kklein"
+    ]
+  },
+  "Web/HTML/Element/tr": {
+    "modified": "2019-03-23T23:03:57.305Z",
+    "contributors": [
+      "Martin.Kraft",
+      "schlagi123",
+      "dio",
+      "skl"
+    ]
+  },
+  "Web/HTML/Element/tt": {
+    "modified": "2019-03-23T23:09:07.482Z",
+    "contributors": [
+      "RmnWtnkmp",
+      "mkuhn"
+    ]
+  },
+  "Web/HTML/Element/u": {
+    "modified": "2019-03-23T23:02:37.406Z",
+    "contributors": [
+      "skl"
+    ]
+  },
+  "Web/HTML/Element/ul": {
+    "modified": "2019-03-24T00:04:22.186Z",
+    "contributors": [
+      "dio",
+      "teoli",
+      "fscholz",
+      "ethertank",
+      "Crash"
+    ]
+  },
+  "Web/HTML/Element/var": {
+    "modified": "2019-03-24T00:04:40.794Z",
+    "contributors": [
+      "schlagi123",
+      "teoli",
+      "fscholz",
+      "ethertank",
+      "Crash"
+    ]
+  },
+  "Web/HTML/Element/video": {
+    "modified": "2019-03-23T22:58:58.710Z",
+    "contributors": [
+      "nylki",
+      "marc-se",
+      "Sebastianz",
+      "spiegelp"
+    ]
+  },
+  "Web/HTML/Globale_Attribute": {
+    "modified": "2020-10-15T21:26:14.135Z",
+    "contributors": [
+      "LoVo666",
+      "qjubic",
+      "pixunil"
+    ]
+  },
+  "Web/HTML/Globale_Attribute/accesskey": {
+    "modified": "2020-10-15T22:03:59.818Z",
+    "contributors": [
+      "Claas"
+    ]
+  },
+  "Web/HTML/Globale_Attribute/autocapitalize": {
+    "modified": "2020-10-15T22:05:02.265Z",
+    "contributors": [
+      "alaskaa"
+    ]
+  },
+  "Web/HTML/Globale_Attribute/class": {
+    "modified": "2019-03-23T22:53:31.655Z",
+    "contributors": [
+      "sigoa",
+      "lxdiamond"
+    ]
+  },
+  "Web/HTML/Globale_Attribute/contenteditable": {
+    "modified": "2019-03-18T21:36:35.603Z",
+    "contributors": [
+      "4223",
+      "Claas"
+    ]
+  },
+  "Web/HTML/Globale_Attribute/dir": {
+    "modified": "2020-10-15T22:05:39.463Z",
+    "contributors": [
+      "RewoSiedge"
+    ]
+  },
+  "Web/HTML/Globale_Attribute/draggable": {
+    "modified": "2019-03-23T22:47:23.466Z",
+    "contributors": [
+      "schlagi123",
+      "RmnWtnkmp",
+      "rstarke-dd"
+    ]
+  },
+  "Web/HTML/Globale_Attribute/dropzone": {
+    "modified": "2020-10-15T21:40:11.332Z",
+    "contributors": [
+      "kaljak",
+      "RmnWtnkmp"
+    ]
+  },
+  "Web/HTML/Globale_Attribute/hidden": {
+    "modified": "2020-10-15T21:38:08.779Z",
+    "contributors": [
+      "fscholz",
+      "Oliver_Schafeld",
+      "RmnWtnkmp",
+      "skl"
+    ]
+  },
+  "Web/HTML/Globale_Attribute/id": {
+    "modified": "2019-03-18T21:47:05.388Z",
+    "contributors": [
+      "BlaM",
+      "skl"
+    ]
+  },
+  "Web/HTML/Globale_Attribute/inputmode": {
+    "modified": "2020-10-15T22:14:49.189Z",
+    "contributors": [
+      "sklicek"
+    ]
+  },
+  "Web/HTML/Globale_Attribute/is": {
+    "modified": "2020-10-15T22:23:53.794Z",
+    "contributors": [
+      "LoVo666"
+    ]
+  },
+  "Web/HTML/Globale_Attribute/kontextmenu": {
+    "modified": "2020-03-26T16:11:41.701Z",
+    "contributors": [
+      "MarcusRiemer",
+      "SphinxKnight",
+      "ctexxx"
+    ]
+  },
+  "Web/HTML/Globale_Attribute/lang": {
+    "modified": "2020-10-15T21:51:21.501Z",
+    "contributors": [
+      "kaljak",
+      "RmnWtnkmp"
+    ]
+  },
+  "Web/HTML/Globale_Attribute/style": {
+    "modified": "2020-08-18T11:36:01.283Z",
+    "contributors": [
+      "FelixSchwarz",
+      "tairt",
+      "RmnWtnkmp"
+    ]
+  },
+  "Web/HTML/Globale_Attribute/tabindex": {
+    "modified": "2020-10-15T22:17:29.883Z",
+    "contributors": [
+      "Michael-1",
+      "vssn"
+    ]
+  },
+  "Web/HTML/Globale_Attribute/title": {
+    "modified": "2019-03-23T22:32:47.288Z",
+    "contributors": [
+      "alaskaa",
+      "klausinger",
+      "eluchsinger"
+    ]
+  },
+  "Web/HTML/Globale_Attribute/translate": {
+    "modified": "2019-10-21T21:28:23.890Z",
+    "contributors": [
+      "LoVo666"
+    ]
+  },
+  "Web/HTML/HTML5": {
+    "modified": "2019-03-23T23:33:45.828Z",
+    "contributors": [
+      "suriyaa",
+      "teoli",
+      "timausk",
+      "thorsten.rinne",
+      "matze",
+      "nothine"
+    ]
+  },
+  "Web/HTML/HTML5/HTML5_element_list": {
+    "modified": "2019-03-23T23:37:56.525Z",
+    "contributors": [
+      "gk-freiheit",
+      "rawcat",
+      "teoli",
+      "AickeSchulz",
+      "jwl"
+    ]
+  },
+  "Web/HTML/Inline_elemente": {
+    "modified": "2019-03-23T23:18:01.940Z",
+    "contributors": [
+      "Aryx",
+      "petergloor",
+      "teoli",
+      "lukas.oppermann"
+    ]
+  },
+  "Web/HTML/Referenz": {
+    "modified": "2019-09-09T07:16:32.387Z",
+    "contributors": [
+      "SphinxKnight",
+      "mprofitl",
+      "wbamberg",
+      "legalbit"
+    ]
+  },
+  "Web/HTML/Using_the_application_cache": {
+    "modified": "2019-03-23T23:31:27.651Z",
+    "contributors": [
+      "petzichen",
+      "freimuth82",
+      "fscholz",
+      "gr2m",
+      "teoli",
+      "fiona89"
+    ]
+  },
+  "Web/HTTP": {
+    "modified": "2020-10-17T06:15:21.236Z",
+    "contributors": [
+      "hpkainz",
+      "rs-github",
+      "stef4412",
+      "Claas",
+      "fscholz",
+      "Anoian",
+      "fulle81",
+      "groovecoder"
+    ]
+  },
+  "Web/HTTP/Basics_of_HTTP": {
+    "modified": "2019-09-15T04:45:42.906Z"
+  },
+  "Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web": {
+    "modified": "2019-09-15T13:08:30.896Z",
+    "contributors": [
+      "reyemDarnok"
+    ]
+  },
+  "Web/HTTP/CORS": {
+    "modified": "2020-10-15T22:10:02.077Z",
+    "contributors": [
+      "Dschubba",
+      "htlvil-paulk",
+      "MauTauReen",
+      "ghayth.mkh"
+    ]
+  },
+  "Web/HTTP/CORS/Errors": {
+    "modified": "2019-03-18T21:24:22.309Z",
+    "contributors": [
+      "nchevobbe"
+    ]
+  },
+  "Web/HTTP/CORS/Errors/CORSDidNotSucceed": {
+    "modified": "2019-05-16T11:43:09.527Z",
+    "contributors": [
+      "vaupeh",
+      "scherii",
+      "quicksanddiver"
+    ]
+  },
+  "Web/HTTP/CORS/Errors/CORSFehlenderAllowHeaderAusPreflight": {
+    "modified": "2020-03-31T09:46:01.871Z",
+    "contributors": [
+      "cradloff"
+    ]
+  },
+  "Web/HTTP/CORS/Errors/CORSFehltQuelleErlauben": {
+    "modified": "2019-07-24T08:48:05.259Z",
+    "contributors": [
+      "kai-oswald",
+      "SAvB"
+    ]
+  },
+  "Web/HTTP/CORS/Errors/CORSRequestNotHttp": {
+    "modified": "2019-05-21T09:09:00.472Z",
+    "contributors": [
+      "EastFreezian"
+    ]
+  },
+  "Web/HTTP/Caching_FAQ": {
+    "modified": "2019-03-23T23:05:15.113Z",
+    "contributors": [
+      "jugmac00",
+      "Johann150",
+      "VoodooDS"
+    ]
+  },
+  "Web/HTTP/Headers": {
+    "modified": "2019-05-30T17:47:25.618Z",
+    "contributors": [
+      "King2500",
+      "SebinNyshkim",
+      "fl1p"
+    ]
+  },
+  "Web/HTTP/Headers/Accept": {
+    "modified": "2020-10-15T22:26:49.610Z",
+    "contributors": [
+      "TorbenKoehn"
+    ]
+  },
+  "Web/HTTP/Headers/Age": {
+    "modified": "2020-10-15T21:59:14.135Z",
+    "contributors": [
+      "zuzuzu",
+      "TimHi"
+    ]
+  },
+  "Web/HTTP/Headers/Cache-Control": {
+    "modified": "2020-10-15T22:02:19.949Z",
+    "contributors": [
+      "King2500",
+      "Univream",
+      "fawei"
+    ]
+  },
+  "Web/HTTP/Headers/Connection": {
+    "modified": "2020-10-15T22:35:15.341Z",
+    "contributors": [
+      "cheitmanntrade"
+    ]
+  },
+  "Web/HTTP/Headers/Cookie": {
+    "modified": "2020-10-15T22:00:20.631Z",
+    "contributors": [
+      "Wipster"
+    ]
+  },
+  "Web/HTTP/Headers/DNT": {
+    "modified": "2020-10-15T21:58:41.249Z",
+    "contributors": [
+      "timmyRS"
+    ]
+  },
+  "Web/HTTP/Headers/Expect-CT": {
+    "modified": "2020-10-15T22:29:47.313Z",
+    "contributors": [
+      "dennissterzenbach"
+    ]
+  },
+  "Web/HTTP/Headers/Expires": {
+    "modified": "2020-10-15T22:09:33.622Z",
+    "contributors": [
+      "ThomasHartz"
+    ]
+  },
+  "Web/HTTP/Headers/Referer": {
+    "modified": "2020-10-15T22:13:36.881Z",
+    "contributors": [
+      "bsotodo",
+      "Megamezzomixer"
+    ]
+  },
+  "Web/HTTP/Headers/Server": {
+    "modified": "2020-10-15T21:58:46.872Z",
+    "contributors": [
+      "timmyRS"
+    ]
+  },
+  "Web/HTTP/Headers/Set-Cookie": {
+    "modified": "2020-12-03T07:50:32.705Z",
+    "contributors": [
+      "hamishwillee"
+    ]
+  },
+  "Web/HTTP/Headers/Set-Cookie/SameSite": {
+    "modified": "2020-12-03T07:50:35.793Z",
+    "contributors": [
+      "dega"
+    ]
+  },
+  "Web/HTTP/Headers/Tk": {
+    "modified": "2019-03-23T22:03:12.387Z",
+    "contributors": [
+      "timmyRS"
+    ]
+  },
+  "Web/HTTP/Headers/User-Agent": {
+    "modified": "2020-10-15T21:58:47.163Z",
+    "contributors": [
+      "fscholz"
+    ]
+  },
+  "Web/HTTP/Headers/X-Content-Type-Options": {
+    "modified": "2020-11-30T18:36:23.304Z",
+    "contributors": [
+      "Johuspect",
+      "claui",
+      "AnthyG",
+      "peschuster",
+      "Joeatc"
+    ]
+  },
+  "Web/HTTP/Headers/X-Frame-Options": {
+    "modified": "2020-10-15T21:53:15.450Z",
+    "contributors": [
+      "fscholz",
+      "javafrog",
+      "Lars-Wunderlich"
+    ]
+  },
+  "Web/HTTP/Methods": {
+    "modified": "2020-10-15T22:09:56.258Z",
+    "contributors": [
+      "aichbauer"
+    ]
+  },
+  "Web/HTTP/Methods/CONNECT": {
+    "modified": "2020-10-15T22:09:55.098Z",
+    "contributors": [
+      "td8"
+    ]
+  },
+  "Web/HTTP/Methods/DELETE": {
+    "modified": "2020-10-15T22:10:04.775Z",
+    "contributors": [
+      "Dschubba",
+      "td8"
+    ]
+  },
+  "Web/HTTP/Methods/GET": {
+    "modified": "2020-10-15T22:24:06.028Z",
+    "contributors": [
+      "sklicek"
+    ]
+  },
+  "Web/HTTP/Status": {
+    "modified": "2020-11-15T16:45:22.616Z",
+    "contributors": [
+      "1elf-me",
+      "fscholz"
+    ]
+  },
+  "Web/HTTP/Status/100": {
+    "modified": "2020-10-15T21:50:37.477Z",
+    "contributors": [
+      "markobr",
+      "Marenthyu",
+      "SebinNyshkim"
+    ]
+  },
+  "Web/HTTP/Status/200": {
+    "modified": "2020-10-15T22:09:04.712Z",
+    "contributors": [
+      "markobr",
+      "Saebbi"
+    ]
+  },
+  "Web/HTTP/Status/201": {
+    "modified": "2020-11-15T16:56:37.808Z",
+    "contributors": [
+      "1elf-me"
+    ]
+  },
+  "Web/HTTP/Status/302": {
+    "modified": "2020-10-15T21:56:04.030Z",
+    "contributors": [
+      "markobr",
+      "RaisingAgent",
+      "DanielR92"
+    ]
+  },
+  "Web/HTTP/Status/304": {
+    "modified": "2020-10-15T21:57:39.598Z",
+    "contributors": [
+      "markobr",
+      "MGoelles24",
+      "TheHater21"
+    ]
+  },
+  "Web/HTTP/Status/400": {
+    "modified": "2019-07-10T16:01:00.065Z",
+    "contributors": [
+      "markobr",
+      "liltv.media"
+    ]
+  },
+  "Web/HTTP/Status/401": {
+    "modified": "2020-10-15T22:09:12.130Z",
+    "contributors": [
+      "markobr",
+      "liltv.media"
+    ]
+  },
+  "Web/HTTP/Status/403": {
+    "modified": "2020-10-15T22:11:03.536Z",
+    "contributors": [
+      "markobr",
+      "Meisterfuchs"
+    ]
+  },
+  "Web/HTTP/Status/404": {
+    "modified": "2020-10-15T21:50:37.640Z",
+    "contributors": [
+      "markobr",
+      "liltv.media",
+      "SebinNyshkim"
+    ]
+  },
+  "Web/HTTP/Status/409": {
+    "modified": "2019-09-15T04:47:27.346Z",
+    "contributors": [
+      "reyemDarnok"
+    ]
+  },
+  "Web/HTTP/Status/410": {
+    "modified": "2020-10-15T21:50:37.425Z",
+    "contributors": [
+      "markobr",
+      "Marenthyu",
+      "SebinNyshkim"
+    ]
+  },
+  "Web/HTTP/Status/414": {
+    "modified": "2019-07-12T06:43:55.384Z",
+    "contributors": [
+      "markobr"
+    ]
+  },
+  "Web/HTTP/Status/418": {
+    "modified": "2020-10-15T22:11:00.109Z",
+    "contributors": [
+      "markobr",
+      "Meisterfuchs"
+    ]
+  },
+  "Web/HTTP/Status/500": {
+    "modified": "2020-10-15T21:50:37.325Z",
+    "contributors": [
+      "markobr",
+      "SebinNyshkim"
+    ]
+  },
+  "Web/HTTP/Status/503": {
+    "modified": "2020-10-15T22:21:06.347Z",
+    "contributors": [
+      "markobr"
+    ]
+  },
+  "Web/HTTP/Status/504": {
+    "modified": "2020-10-15T22:21:06.738Z",
+    "contributors": [
+      "markobr"
+    ]
+  },
+  "Web/HTTP/Status/505": {
+    "modified": "2019-07-10T13:40:21.212Z",
+    "contributors": [
+      "markobr"
+    ]
+  },
+  "Web/HTTP/Status/511": {
+    "modified": "2019-07-10T13:54:20.094Z",
+    "contributors": [
+      "markobr"
+    ]
+  },
+  "Web/JavaScript": {
+    "modified": "2020-09-16T15:12:04.337Z",
+    "contributors": [
+      "steevn",
+      "Jonydaboy19",
+      "SphinxKnight",
+      "chrisdavidmills",
+      "ivan-pan",
+      "tirein",
+      "rs-github",
+      "schlagi123",
+      "dontbyte",
+      "Sixl-Daniel",
+      "sigoa",
+      "gjungb",
+      "Old-Lady",
+      "tieftoener",
+      "fscholz",
+      "Patrick_St.",
+      "mcweba",
+      "omniskop",
+      "loki",
+      "Airblader",
+      "eminor",
+      "ethertank",
+      "shapeshifta",
+      "Philipp"
+    ]
+  },
+  "Web/JavaScript/About_JavaScript": {
+    "modified": "2020-03-12T19:39:49.162Z",
+    "contributors": [
+      "schlagi123",
+      "judy55",
+      "loki"
+    ]
+  },
+  "Web/JavaScript/Aufzählbarkeit_und_Zugehörigkeit_von_Eigenschaften": {
+    "modified": "2020-05-27T07:04:55.127Z",
+    "contributors": [
+      "zuzuzu"
+    ]
+  },
+  "Web/JavaScript/Closures": {
+    "modified": "2020-08-14T08:33:52.378Z",
+    "contributors": [
+      "ManuelKiessling",
+      "m4con",
+      "tirein",
+      "MehrzahlVonKorn",
+      "_trng",
+      "schlagi123",
+      "cami",
+      "ChriBack",
+      "JohannesDienst",
+      "mbelas",
+      "Oliver_Schafeld",
+      "maybe",
+      "fscholz",
+      "AickeSchulz",
+      "eminor"
+    ]
+  },
+  "Web/JavaScript/Datenstrukturen": {
+    "modified": "2020-03-12T19:40:01.103Z",
+    "contributors": [
+      "BenjHawk",
+      "GR_Fuchs",
+      "fL03",
+      "schlagi123",
+      "twarncke",
+      "yampus",
+      "ChristianLuxem",
+      "nodexo",
+      "fscholz",
+      "siggi-heltau",
+      "FabianBeiner",
+      "spiegelp"
+    ]
+  },
+  "Web/JavaScript/Eine_Wiedereinfuehrung_in_JavaScript": {
+    "modified": "2020-05-19T18:28:46.915Z",
+    "contributors": [
+      "AlexanderLaska",
+      "Timbuktu1982",
+      "Dusty4848",
+      "Meiqian",
+      "Nikolai_Kucksdorf",
+      "kisjoke91",
+      "Space42",
+      "Univream",
+      "tomscholz",
+      "schlagi123",
+      "PinheadLarry",
+      "sigoa",
+      "acetous",
+      "martinhoffmann",
+      "Coke_and_Pepsi",
+      "ibafluss",
+      "creitiv",
+      "fscholz",
+      "eminor"
+    ]
+  },
+  "Web/JavaScript/Einführung_in_den_Gebrauch_von_XPath_in_JavaScript": {
+    "modified": "2019-03-23T22:12:16.123Z",
+    "contributors": [
+      "chrisdavidmills",
+      "QClonesClan"
+    ]
+  },
+  "Web/JavaScript/EventLoop": {
+    "modified": "2020-03-12T19:41:21.053Z",
+    "contributors": [
+      "chrkhl",
+      "schlagi123",
+      "HaayeHenricus",
+      "marymar",
+      "pkleindienst",
+      "clemens",
+      "Broetchen1234"
+    ]
+  },
+  "Web/JavaScript/Guide": {
+    "modified": "2020-03-12T19:35:23.827Z",
+    "contributors": [
+      "mschleeweiss",
+      "schlagi123",
+      "tieftoener",
+      "fscholz",
+      "eminor",
+      "teoli",
+      "marc971"
+    ]
+  },
+  "Web/JavaScript/Guide/Ausdruecke_und_Operatoren": {
+    "modified": "2020-03-12T19:38:40.241Z",
+    "contributors": [
+      "occcy",
+      "stefboll",
+      "HaayeHenricus",
+      "schlagi123",
+      "MelanieVeigl",
+      "Kevinci",
+      "fscholz",
+      "DavidWalsh",
+      "eminor"
+    ]
+  },
+  "Web/JavaScript/Guide/Einführung": {
+    "modified": "2020-03-12T19:40:52.952Z",
+    "contributors": [
+      "woiddale",
+      "schlagi123",
+      "aldec-dv",
+      "NedNisW",
+      "janjo",
+      "Chtheile",
+      "miniemuff",
+      "fscholz",
+      "Sir.Codewright"
+    ]
+  },
+  "Web/JavaScript/Guide/Feinheiten_des_Objektmodells": {
+    "modified": "2020-10-03T02:52:53.149Z",
+    "contributors": [
+      "c0dewalker",
+      "wbamberg",
+      "schlagi123",
+      "sigoa",
+      "DoctypeRosenthal",
+      "Venhaus",
+      "crasher666",
+      "IngoB",
+      "fscholz",
+      "eminor"
+    ]
+  },
+  "Web/JavaScript/Guide/Funktionen": {
+    "modified": "2020-03-12T19:38:37.078Z",
+    "contributors": [
+      "dmho",
+      "cami",
+      "loicyondjeu",
+      "stefboll",
+      "woiddale",
+      "schlagi123",
+      "b-lack",
+      "vetoCode",
+      "fscholz",
+      "eminor"
+    ]
+  },
+  "Web/JavaScript/Guide/Grammatik_und_Typen": {
+    "modified": "2020-09-16T18:03:08.891Z",
+    "contributors": [
+      "FFFutureflo",
+      "Tionran",
+      "schlagi123",
+      "TomasRiker",
+      "aldec-dv",
+      "SaschaHeyer",
+      "yampus",
+      "FocusCookie",
+      "Randomfinger",
+      "NedNisW",
+      "vetoCode",
+      "didierCH",
+      "baxstar",
+      "fscholz",
+      "siggi-heltau",
+      "eminor",
+      "NickRussler",
+      "Hans_Mueller"
+    ]
+  },
+  "Web/JavaScript/Guide/Indexed_collections": {
+    "modified": "2020-03-12T19:46:38.832Z",
+    "contributors": [
+      "G_hi3"
+    ]
+  },
+  "Web/JavaScript/Guide/Keyed_collections": {
+    "modified": "2020-07-15T01:51:42.838Z",
+    "contributors": [
+      "kre",
+      "Cerberooo",
+      "cami",
+      "Julian-B90",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung": {
+    "modified": "2020-03-12T19:37:55.717Z",
+    "contributors": [
+      "cami",
+      "deklesen",
+      "woiddale",
+      "schlagi123",
+      "SaschaHeyer",
+      "PreCodeEU",
+      "StevenS77",
+      "jwhitlock",
+      "KarolineCat",
+      "fscholz",
+      "vsenol",
+      "eminor"
+    ]
+  },
+  "Web/JavaScript/Guide/Meta_programming": {
+    "modified": "2020-03-12T19:47:40.641Z",
+    "contributors": [
+      "mschleeweiss",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Guide/Mit_Objekten_arbeiten": {
+    "modified": "2020-03-12T19:38:32.446Z",
+    "contributors": [
+      "schlagi123",
+      "Dr-Oetker",
+      "SphinxKnight",
+      "papper371",
+      "timosperisen",
+      "serv-inc",
+      "fw-zirkusdigitalo",
+      "fscholz",
+      "DavidWalsh",
+      "stephaniehobson",
+      "cyclodev",
+      "eminor"
+    ]
+  },
+  "Web/JavaScript/Guide/Modules": {
+    "modified": "2020-10-15T22:29:06.922Z",
+    "contributors": [
+      "christophbinner"
+    ]
+  },
+  "Web/JavaScript/Guide/Numbers_and_dates": {
+    "modified": "2020-03-12T19:43:42.890Z",
+    "contributors": [
+      "mrmoree",
+      "schlagi123",
+      "kdex"
+    ]
+  },
+  "Web/JavaScript/Guide/Regular_Expressions": {
+    "modified": "2020-03-12T19:37:54.891Z",
+    "contributors": [
+      "woiddale",
+      "SphinxKnight",
+      "0xflotus",
+      "hinzundcode",
+      "nextlevelshit",
+      "ddBenny",
+      "schlagi123",
+      "tyrasd",
+      "fscholz",
+      "eminor"
+    ]
+  },
+  "Web/JavaScript/Guide/Textformatierung": {
+    "modified": "2020-03-12T19:46:53.213Z",
+    "contributors": [
+      "schlagi123",
+      "patpir",
+      "SEBv15"
+    ]
+  },
+  "Web/JavaScript/Guide/Using_promises": {
+    "modified": "2020-07-30T16:41:03.762Z",
+    "contributors": [
+      "venven-de",
+      "scarcloud",
+      "matze19831211"
+    ]
+  },
+  "Web/JavaScript/Guide/schleifen_und_iterationen": {
+    "modified": "2020-03-12T19:43:05.832Z",
+    "contributors": [
+      "schlagi123",
+      "j0ck",
+      "moreadrenalin"
+    ]
+  },
+  "Web/JavaScript/Inheritance_and_the_prototype_chain": {
+    "modified": "2020-03-12T19:41:37.015Z",
+    "contributors": [
+      "Meiqian",
+      "trollkotze",
+      "sigoa",
+      "schlagi123",
+      "kdex",
+      "Semnodime",
+      "rocco",
+      "neekibo",
+      "antonharald"
+    ]
+  },
+  "Web/JavaScript/Introduction_to_Object-Oriented_JavaScript": {
+    "modified": "2020-03-12T19:39:48.552Z",
+    "contributors": [
+      "ant1d0t",
+      "nemo182",
+      "christianhegedues",
+      "BurnerPat",
+      "schlagi123",
+      "neverendingo",
+      "creitiv",
+      "DunklesBlut88",
+      "paesku",
+      "bricks",
+      "fabiankreutz",
+      "spiegelp"
+    ]
+  },
+  "Web/JavaScript/JavaScript_technologieuebersicht": {
+    "modified": "2020-03-12T19:39:42.418Z",
+    "contributors": [
+      "lesch",
+      "fl1p",
+      "spiegelp"
+    ]
+  },
+  "Web/JavaScript/Language_Resources": {
+    "modified": "2020-03-12T19:38:27.478Z",
+    "contributors": [
+      "schlagi123",
+      "hapeit",
+      "fscholz",
+      "Aurel"
+    ]
+  },
+  "Web/JavaScript/Reference": {
+    "modified": "2020-03-12T19:38:00.390Z",
+    "contributors": [
+      "schlagi123",
+      "Deppenapostroph",
+      "rbarisic",
+      "RaymondFleck",
+      "timbernasley",
+      "fscholz",
+      "ethertank"
+    ]
+  },
+  "Web/JavaScript/Reference/About": {
+    "modified": "2020-03-12T19:39:52.145Z",
+    "contributors": [
+      "schlagi123",
+      "andrehuf",
+      "Morbid2903",
+      "timbernasley"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler": {
+    "modified": "2020-03-12T19:43:41.868Z",
+    "contributors": [
+      "schlagi123",
+      "akumagamo"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Already_has_pragma": {
+    "modified": "2020-03-12T19:47:20.172Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Array_sort_argument": {
+    "modified": "2020-03-12T19:47:33.148Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Bad_octal": {
+    "modified": "2020-03-12T19:47:25.600Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Bad_radix": {
+    "modified": "2020-03-12T19:47:40.678Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Bad_regexp_flag": {
+    "modified": "2020-03-12T19:47:43.378Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Bad_return_or_yield": {
+    "modified": "2020-03-12T19:47:36.755Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Called_on_incompatible_type": {
+    "modified": "2020-03-12T19:47:23.087Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Cant_access_lexical_declaration_before_init": {
+    "modified": "2020-03-12T19:47:39.951Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Cant_access_property": {
+    "modified": "2020-03-12T19:48:57.195Z",
+    "contributors": [
+      "micschwarz"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Cant_define_property_object_not_extensible": {
+    "modified": "2020-03-12T19:47:37.913Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Cant_delete": {
+    "modified": "2020-03-12T19:47:33.700Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Cant_redefine_property": {
+    "modified": "2020-03-12T19:47:33.994Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Cyclic_object_value": {
+    "modified": "2020-03-12T19:47:32.067Z",
+    "contributors": [
+      "martinr1604",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Dead_object": {
+    "modified": "2020-03-12T19:47:34.842Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Delete_in_strict_mode": {
+    "modified": "2020-03-12T19:47:47.727Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Deprecated_String_generics": {
+    "modified": "2020-03-12T19:47:17.153Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Deprecated_caller_or_arguments_usage": {
+    "modified": "2020-03-12T19:47:44.593Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Deprecated_expression_closures": {
+    "modified": "2020-03-12T19:47:23.525Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Deprecated_octal": {
+    "modified": "2020-03-12T19:47:46.456Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Deprecated_source_map_pragma": {
+    "modified": "2020-03-12T19:47:46.265Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Deprecated_toLocaleFormat": {
+    "modified": "2020-03-12T19:47:24.103Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Equal_as_assign": {
+    "modified": "2020-03-12T19:47:33.976Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/For-each-in_loops_are_deprecated": {
+    "modified": "2020-03-12T19:47:22.797Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Getter_only": {
+    "modified": "2020-03-12T19:47:33.589Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Identifier_after_number": {
+    "modified": "2020-03-12T19:47:39.577Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Illegal_character": {
+    "modified": "2020-03-12T19:47:40.583Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Invalid_array_length": {
+    "modified": "2020-03-12T19:43:36.993Z",
+    "contributors": [
+      "schlagi123",
+      "yampus",
+      "akumagamo"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Invalid_assignment_left-hand_side": {
+    "modified": "2020-03-12T19:46:39.233Z",
+    "contributors": [
+      "schlagi123",
+      "Cripi"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Invalid_const_assignment": {
+    "modified": "2020-03-12T19:47:33.651Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Invalid_date": {
+    "modified": "2020-03-12T19:47:16.548Z",
+    "contributors": [
+      "schlagi123",
+      "fire-stone"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Invalid_for-in_initializer": {
+    "modified": "2020-03-12T19:47:50.395Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Invalid_for-of_initializer": {
+    "modified": "2020-03-12T19:47:46.412Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/JSON_bad_parse": {
+    "modified": "2020-03-12T19:47:34.652Z",
+    "contributors": [
+      "schlagi123",
+      "Jannik99"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Malformed_URI": {
+    "modified": "2020-05-11T08:04:02.475Z",
+    "contributors": [
+      "Skasi",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Malformed_formal_parameter": {
+    "modified": "2020-03-12T19:43:43.986Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Missing_bracket_after_list": {
+    "modified": "2020-03-12T19:46:42.895Z",
+    "contributors": [
+      "schlagi123",
+      "Stolzenhain"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Missing_colon_after_property_id": {
+    "modified": "2020-03-12T19:47:39.916Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Missing_curly_after_function_body": {
+    "modified": "2020-03-12T19:47:34.109Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Missing_curly_after_property_list": {
+    "modified": "2020-03-12T19:45:33.319Z",
+    "contributors": [
+      "schlagi123",
+      "fire-stone"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Missing_formal_parameter": {
+    "modified": "2020-03-12T19:47:38.482Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Missing_initializer_in_const": {
+    "modified": "2020-03-12T19:47:35.587Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Missing_name_after_dot_operator": {
+    "modified": "2020-03-12T19:47:35.523Z",
+    "contributors": [
+      "sicLotus",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Missing_parenthesis_after_argument_list": {
+    "modified": "2020-03-12T19:44:04.052Z",
+    "contributors": [
+      "schlagi123",
+      "iimog",
+      "rolandbgd",
+      "akumagamo"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Missing_parenthesis_after_condition": {
+    "modified": "2020-03-12T19:47:39.363Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Missing_semicolon_before_statement": {
+    "modified": "2020-03-12T19:44:24.631Z",
+    "contributors": [
+      "flufflepuff91",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/More_arguments_needed": {
+    "modified": "2020-03-12T19:47:35.019Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Negative_repetition_count": {
+    "modified": "2020-03-12T19:47:46.475Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/No_non-null_object": {
+    "modified": "2020-03-12T19:47:33.684Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/No_properties": {
+    "modified": "2020-03-12T19:46:21.338Z",
+    "contributors": [
+      "schlagi123",
+      "timosperisen"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/No_variable_name": {
+    "modified": "2020-03-12T19:47:35.139Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Non_configurable_array_element": {
+    "modified": "2020-03-12T19:47:37.860Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Not_a_codepoint": {
+    "modified": "2020-03-12T19:44:01.592Z",
+    "contributors": [
+      "schlagi123",
+      "akumagamo"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Not_a_constructor": {
+    "modified": "2020-03-12T19:46:54.349Z",
+    "contributors": [
+      "NiklasMerz",
+      "schlagi123",
+      "klug_mario"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Not_a_function": {
+    "modified": "2020-03-12T19:45:23.396Z",
+    "contributors": [
+      "flufflepuff91",
+      "schlagi123",
+      "fire-stone"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Not_defined": {
+    "modified": "2020-03-12T19:44:11.129Z",
+    "contributors": [
+      "flufflepuff91",
+      "schlagi123",
+      "BennoKieselstein",
+      "Bernd_L",
+      "akumagamo"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Precision_range": {
+    "modified": "2020-03-12T19:44:05.096Z",
+    "contributors": [
+      "schlagi123",
+      "akumagamo"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Property_access_denied": {
+    "modified": "2020-03-12T19:44:01.071Z",
+    "contributors": [
+      "schlagi123",
+      "akumagamo"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Read-only": {
+    "modified": "2020-03-12T19:47:33.685Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Redeclared_parameter": {
+    "modified": "2020-03-12T19:47:37.067Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Reduce_of_empty_array_with_no_initial_value": {
+    "modified": "2020-03-12T19:47:39.369Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Reserved_identifier": {
+    "modified": "2020-03-12T19:47:46.391Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Resulting_string_too_large": {
+    "modified": "2020-03-12T19:47:46.172Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Stmt_after_return": {
+    "modified": "2020-03-12T19:43:39.489Z",
+    "contributors": [
+      "schlagi123",
+      "akumagamo"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Strict_Non_Simple_Params": {
+    "modified": "2020-03-12T19:47:45.620Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Too_much_recursion": {
+    "modified": "2020-03-12T19:43:58.453Z",
+    "contributors": [
+      "schlagi123",
+      "olhaar",
+      "yampus",
+      "julmot",
+      "akumagamo"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Typed_array_invalid_arguments": {
+    "modified": "2020-03-12T19:47:33.971Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Undeclared_var": {
+    "modified": "2020-03-12T19:47:43.541Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Undefined_prop": {
+    "modified": "2020-03-12T19:44:10.591Z",
+    "contributors": [
+      "schlagi123",
+      "ThomasFe",
+      "akumagamo"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Unexpected_token": {
+    "modified": "2020-03-12T19:45:02.701Z",
+    "contributors": [
+      "schlagi123",
+      "albasiba"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Unexpected_type": {
+    "modified": "2020-03-12T19:45:54.249Z",
+    "contributors": [
+      "schlagi123",
+      "thegeg",
+      "SusiHutzler",
+      "fire-stone",
+      "netalp"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Unnamed_function_statement": {
+    "modified": "2020-03-12T19:47:45.907Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Unterminated_string_literal": {
+    "modified": "2020-03-12T19:47:34.534Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/Var_hides_argument": {
+    "modified": "2020-03-12T19:47:33.618Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/in_operator_no_object": {
+    "modified": "2020-03-12T19:47:34.037Z",
+    "contributors": [
+      "matthias85",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/invalid_right_hand_side_instanceof_operand": {
+    "modified": "2020-03-12T19:47:33.003Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Fehler/is_not_iterable": {
+    "modified": "2020-03-12T19:48:02.116Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Functions": {
+    "modified": "2020-10-15T21:32:23.734Z",
+    "contributors": [
+      "steevn",
+      "ibiBgOR",
+      "julianpollmann",
+      "schlagi123",
+      "P0lip"
+    ]
+  },
+  "Web/JavaScript/Reference/Functions/Default_parameters": {
+    "modified": "2020-10-15T21:51:29.730Z",
+    "contributors": [
+      "schlagi123",
+      "Eiknheimer",
+      "serv-inc",
+      "StevenS77",
+      "kdex",
+      "leonschwanitz"
+    ]
+  },
+  "Web/JavaScript/Reference/Functions/Methoden_Definitionen": {
+    "modified": "2020-03-12T19:40:25.737Z",
+    "contributors": [
+      "kdex",
+      "schlagi123",
+      "siggi-heltau"
+    ]
+  },
+  "Web/JavaScript/Reference/Functions/Pfeilfunktionen": {
+    "modified": "2020-10-15T21:50:51.602Z",
+    "contributors": [
+      "schlagi123",
+      "Sixl-Daniel",
+      "kdex",
+      "sja",
+      "Eiknheimer",
+      "GuidoSchweizer",
+      "mhash17"
+    ]
+  },
+  "Web/JavaScript/Reference/Functions/arguments": {
+    "modified": "2020-10-15T21:32:34.952Z",
+    "contributors": [
+      "tonitone",
+      "StefKrie",
+      "haveyaseen",
+      "schlagi123",
+      "niorad",
+      "a-ctor",
+      "fscholz"
+    ]
+  },
+  "Web/JavaScript/Reference/Functions/arguments/@@iterator": {
+    "modified": "2020-10-15T22:04:50.730Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Functions/arguments/callee": {
+    "modified": "2020-10-15T21:32:40.831Z",
+    "contributors": [
+      "schlagi123",
+      "fscholz"
+    ]
+  },
+  "Web/JavaScript/Reference/Functions/arguments/length": {
+    "modified": "2020-10-15T21:32:35.168Z",
+    "contributors": [
+      "schlagi123",
+      "fscholz"
+    ]
+  },
+  "Web/JavaScript/Reference/Functions/get": {
+    "modified": "2020-10-15T22:04:49.671Z",
+    "contributors": [
+      "schlagi123",
+      "JPeer264"
+    ]
+  },
+  "Web/JavaScript/Reference/Functions/rest_parameter": {
+    "modified": "2020-10-15T21:56:07.951Z",
+    "contributors": [
+      "sonicdoe",
+      "schlagi123",
+      "Simmarith"
+    ]
+  },
+  "Web/JavaScript/Reference/Functions/set": {
+    "modified": "2020-10-15T22:04:49.802Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects": {
+    "modified": "2020-03-12T19:38:16.835Z",
+    "contributors": [
+      "jazevo",
+      "schlagi123",
+      "Deppenapostroph",
+      "SphinxKnight",
+      "timbernasley",
+      "fscholz",
+      "ziyunfei"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array": {
+    "modified": "2020-10-15T21:25:30.625Z",
+    "contributors": [
+      "grumpy-cat",
+      "SebinNyshkim",
+      "schlagi123",
+      "henje",
+      "JayEn84",
+      "Eiknheimer",
+      "StevenS77",
+      "kdex",
+      "antonharald",
+      "fscholz",
+      "Airblader"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/@@iterator": {
+    "modified": "2020-10-15T22:01:02.252Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/@@species": {
+    "modified": "2020-10-15T22:01:02.767Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/@@unscopables": {
+    "modified": "2020-10-15T22:01:03.125Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/Prototypen": {
+    "modified": "2020-10-15T21:52:42.525Z",
+    "contributors": [
+      "Stoeoeoe",
+      "schlagi123",
+      "StevenS77"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/Reduce": {
+    "modified": "2020-10-15T21:52:43.889Z",
+    "contributors": [
+      "duckymirror",
+      "isnot2bad",
+      "NiklasMerz",
+      "schlagi123",
+      "molerat619",
+      "LeisureLarry",
+      "sol-idsnake",
+      "istvank",
+      "StevenS77"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/ReduceRight": {
+    "modified": "2020-10-15T21:52:47.826Z",
+    "contributors": [
+      "schlagi123",
+      "StevenS77"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/concat": {
+    "modified": "2020-10-15T21:34:08.129Z",
+    "contributors": [
+      "schlagi123",
+      "ghost23",
+      "pecoes",
+      "oliver-j",
+      "FelixSebastianLange"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/copyWithin": {
+    "modified": "2020-10-15T21:38:19.886Z",
+    "contributors": [
+      "schlagi123",
+      "GR_Fuchs",
+      "Flummi",
+      "oliver-j"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/entries": {
+    "modified": "2020-10-15T21:38:18.243Z",
+    "contributors": [
+      "Tharkun86",
+      "schlagi123",
+      "oliver-j",
+      "AndyTheDandy"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/every": {
+    "modified": "2020-10-15T21:47:07.289Z",
+    "contributors": [
+      "schlagi123",
+      "orion-z",
+      "longstone"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/fill": {
+    "modified": "2020-10-15T21:38:18.545Z",
+    "contributors": [
+      "schlagi123",
+      "Andreas_Dyballa",
+      "oliver-j",
+      "AndyTheDandy"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/filter": {
+    "modified": "2020-12-01T06:41:38.166Z",
+    "contributors": [
+      "Gismo1337",
+      "caca123-nz",
+      "SebinNyshkim",
+      "michelgotta",
+      "schlagi123",
+      "xdevs23",
+      "midnightmare",
+      "oliver-j",
+      "occcy"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/find": {
+    "modified": "2020-10-15T21:34:07.173Z",
+    "contributors": [
+      "SebinNyshkim",
+      "schlagi123",
+      "mrkosim",
+      "psychotammi",
+      "mreu",
+      "db6edr",
+      "oliver-j",
+      "MelanieVeigl"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/findIndex": {
+    "modified": "2020-10-15T21:50:45.238Z",
+    "contributors": [
+      "SebinNyshkim",
+      "schlagi123",
+      "psychotammi",
+      "sosnet",
+      "labcode-de"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/flat": {
+    "modified": "2020-10-15T22:01:54.920Z",
+    "contributors": [
+      "fscholz",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/flatMap": {
+    "modified": "2020-10-15T22:02:19.086Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/forEach": {
+    "modified": "2020-10-15T21:31:37.392Z",
+    "contributors": [
+      "SebinNyshkim",
+      "schlagi123",
+      "Martin.Kraft",
+      "Anonymous",
+      "StevenS77",
+      "L15t3",
+      "langco",
+      "sudave",
+      "olastor"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/from": {
+    "modified": "2020-10-15T21:38:18.396Z",
+    "contributors": [
+      "manfredkogler",
+      "schlagi123",
+      "Maugo",
+      "odysseuscm",
+      "kdex",
+      "oliver-j",
+      "stehefan"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/includes": {
+    "modified": "2020-10-15T21:39:40.373Z",
+    "contributors": [
+      "oliver-gramberg",
+      "MichelBahl",
+      "mikakruschel",
+      "schlagi123",
+      "adabru"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/indexOf": {
+    "modified": "2020-10-15T21:39:59.907Z",
+    "contributors": [
+      "SebinNyshkim",
+      "schlagi123",
+      "Athyrion"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/isArray": {
+    "modified": "2020-10-15T21:26:02.361Z",
+    "contributors": [
+      "schlagi123",
+      "oliver-j",
+      "fscholz",
+      "yacchatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/join": {
+    "modified": "2020-10-15T21:32:45.888Z",
+    "contributors": [
+      "SebinNyshkim",
+      "timlg07",
+      "schlagi123",
+      "wattafot",
+      "Saschlong",
+      "mieth"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/keys": {
+    "modified": "2020-10-15T21:55:10.261Z",
+    "contributors": [
+      "jfi",
+      "schlagi123",
+      "Arlind"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf": {
+    "modified": "2020-10-15T21:55:15.610Z",
+    "contributors": [
+      "schlagi123",
+      "Arlind"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/length": {
+    "modified": "2020-10-15T21:38:16.165Z",
+    "contributors": [
+      "jfi",
+      "schlagi123",
+      "AndyTheDandy"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/map": {
+    "modified": "2020-10-15T21:32:29.489Z",
+    "contributors": [
+      "mwiehl",
+      "felix_geenen",
+      "SebinNyshkim",
+      "MerlindlH",
+      "schlagi123",
+      "kdex",
+      "FNGR2911",
+      "annnoo",
+      "StevenS77",
+      "schellmax",
+      "justb81",
+      "mexn",
+      "leMaik",
+      "derhagen",
+      "Arminmsg"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/of": {
+    "modified": "2020-10-15T21:38:18.269Z",
+    "contributors": [
+      "schlagi123",
+      "dennissterzenbach",
+      "almai",
+      "mormahr",
+      "oliver-j"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/pop": {
+    "modified": "2020-10-15T21:25:28.942Z",
+    "contributors": [
+      "schlagi123",
+      "maoberlehner",
+      "fscholz",
+      "Airblader"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/push": {
+    "modified": "2020-10-15T21:25:28.923Z",
+    "contributors": [
+      "SebinNyshkim",
+      "schlagi123",
+      "k7sleeper",
+      "marzepani",
+      "yacchatta",
+      "Arminmsg",
+      "fscholz",
+      "Airblader"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/reverse": {
+    "modified": "2020-10-15T21:25:28.957Z",
+    "contributors": [
+      "schlagi123",
+      "cepharum",
+      "vog",
+      "mieth",
+      "fscholz",
+      "Airblader"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/shift": {
+    "modified": "2020-10-15T21:25:29.071Z",
+    "contributors": [
+      "schlagi123",
+      "OlegBr",
+      "HendrikRunte",
+      "fscholz",
+      "Airblader"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/slice": {
+    "modified": "2020-10-15T21:38:17.986Z",
+    "contributors": [
+      "DATADEER",
+      "schlagi123",
+      "wiegels",
+      "OlegBr",
+      "oliver-j"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/some": {
+    "modified": "2020-10-15T21:51:10.415Z",
+    "contributors": [
+      "schlagi123",
+      "Jumace",
+      "ddBenny",
+      "MaxKr",
+      "StevenS77",
+      "ThorstenHans"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/sort": {
+    "modified": "2020-10-15T21:50:45.209Z",
+    "contributors": [
+      "SebinNyshkim",
+      "schlagi123",
+      "xerox",
+      "Huargh"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/splice": {
+    "modified": "2020-10-15T21:30:49.791Z",
+    "contributors": [
+      "montapro",
+      "Huegelkoenig",
+      "SebinNyshkim",
+      "leon-jasper",
+      "GateKeeper",
+      "Horitsu",
+      "Breaker222",
+      "schlagi123",
+      "ndresx",
+      "n4nos",
+      "valentinmanthei",
+      "Andorxor",
+      "rillke",
+      "cepharum",
+      "TMR",
+      "BlaM",
+      "shentschel",
+      "casarock",
+      "depoulo",
+      "rhulha"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/toLocaleString": {
+    "modified": "2020-10-15T21:59:23.526Z",
+    "contributors": [
+      "schlagi123",
+      "SphinxKnight",
+      "vssn"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/toSource": {
+    "modified": "2020-10-15T22:01:02.840Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/toString": {
+    "modified": "2020-10-15T21:55:07.803Z",
+    "contributors": [
+      "schlagi123",
+      "Arlind"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/unshift": {
+    "modified": "2020-10-15T21:47:41.247Z",
+    "contributors": [
+      "schlagi123",
+      "stefanwimmer128"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/values": {
+    "modified": "2020-10-15T21:47:50.418Z",
+    "contributors": [
+      "schlagi123",
+      "Semnodime"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/ArrayBuffer": {
+    "modified": "2020-10-15T21:54:09.221Z",
+    "contributors": [
+      "schlagi123",
+      "bpaetzold",
+      "Steinweber",
+      "ionree"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/@@species": {
+    "modified": "2020-10-15T22:01:09.595Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/byteLength": {
+    "modified": "2020-10-15T22:01:09.711Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/isView": {
+    "modified": "2020-10-15T22:01:15.297Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype": {
+    "modified": "2020-10-15T22:01:15.339Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/slice": {
+    "modified": "2020-10-15T22:01:09.307Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/AsyncFunction": {
+    "modified": "2020-10-15T22:01:12.299Z",
+    "contributors": [
+      "schlagi123",
+      "fscholz"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype": {
+    "modified": "2020-10-15T22:01:09.829Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Atomics": {
+    "modified": "2020-10-15T22:01:14.609Z",
+    "contributors": [
+      "Cortys",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Atomics/add": {
+    "modified": "2020-10-15T22:01:23.490Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Atomics/and": {
+    "modified": "2020-10-15T22:01:14.178Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Atomics/compareExchange": {
+    "modified": "2020-10-15T22:01:23.524Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Atomics/exchange": {
+    "modified": "2020-10-15T22:01:23.804Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Atomics/isLockFree": {
+    "modified": "2020-10-15T22:01:23.367Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Atomics/load": {
+    "modified": "2020-10-15T22:01:23.437Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Atomics/or": {
+    "modified": "2020-10-15T22:01:12.332Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Atomics/store": {
+    "modified": "2020-10-15T22:01:23.350Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Atomics/sub": {
+    "modified": "2020-10-15T22:01:23.514Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Atomics/wait": {
+    "modified": "2020-10-15T22:01:24.450Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Atomics/wake": {
+    "modified": "2020-10-15T22:01:24.441Z",
+    "contributors": [
+      "Cortys",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Atomics/xor": {
+    "modified": "2020-10-15T22:01:13.324Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Boolean": {
+    "modified": "2020-10-15T21:34:05.047Z",
+    "contributors": [
+      "schlagi123",
+      "FatihSyrox",
+      "rbarisic"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Boolean/prototype": {
+    "modified": "2020-10-15T21:45:26.885Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Boolean/toSource": {
+    "modified": "2020-10-15T21:45:27.090Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Boolean/toString": {
+    "modified": "2020-10-15T21:45:27.278Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Boolean/valueOf": {
+    "modified": "2020-10-15T21:45:25.930Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/DataView": {
+    "modified": "2020-10-15T21:46:54.170Z",
+    "contributors": [
+      "schlagi123",
+      "fscholz"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/DataView/buffer": {
+    "modified": "2020-10-15T21:46:47.193Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/DataView/byteLength": {
+    "modified": "2020-10-15T21:47:07.178Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/DataView/byteOffset": {
+    "modified": "2020-10-15T21:47:08.642Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/DataView/getFloat32": {
+    "modified": "2020-10-15T21:47:06.658Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/DataView/getFloat64": {
+    "modified": "2020-10-15T21:47:05.154Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/DataView/getInt16": {
+    "modified": "2020-10-15T21:47:04.973Z",
+    "contributors": [
+      "Univream",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/DataView/getInt32": {
+    "modified": "2020-10-15T21:47:05.070Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/DataView/getInt8": {
+    "modified": "2020-10-15T21:47:04.948Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/DataView/getUint16": {
+    "modified": "2020-10-15T21:47:05.220Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/DataView/getUint32": {
+    "modified": "2020-10-15T21:47:05.094Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/DataView/getUint8": {
+    "modified": "2020-10-15T21:47:05.304Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/DataView/prototype": {
+    "modified": "2020-10-15T21:46:53.689Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/DataView/setFloat32": {
+    "modified": "2020-10-15T21:47:06.918Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/DataView/setFloat64": {
+    "modified": "2020-10-15T21:47:05.889Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/DataView/setInt16": {
+    "modified": "2020-10-15T21:47:06.130Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/DataView/setInt32": {
+    "modified": "2020-10-15T21:47:06.080Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/DataView/setInt8": {
+    "modified": "2020-10-15T21:47:06.022Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/DataView/setUint16": {
+    "modified": "2020-10-15T21:47:06.573Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/DataView/setUint32": {
+    "modified": "2020-10-15T21:47:07.408Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/DataView/setUint8": {
+    "modified": "2020-10-15T21:47:06.396Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date": {
+    "modified": "2020-10-15T21:26:50.406Z",
+    "contributors": [
+      "Coding-Boss",
+      "pop1989bb",
+      "1siegi",
+      "Streamities",
+      "herbmaier",
+      "schlagi123",
+      "tweini",
+      "mreu",
+      "JohannesStadler",
+      "cedisupersoccer",
+      "xhronos",
+      "decatur",
+      "fscholz",
+      "teoli",
+      "IchMoritz"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/@@toPrimitive": {
+    "modified": "2020-10-15T21:45:49.430Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/UTC": {
+    "modified": "2020-10-15T21:46:03.247Z",
+    "contributors": [
+      "herbmaier",
+      "schlagi123",
+      "jaller94"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/getDay": {
+    "modified": "2020-10-15T21:45:27.743Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/getFullYear": {
+    "modified": "2020-10-15T21:45:26.276Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/getHours": {
+    "modified": "2020-10-15T21:45:25.193Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds": {
+    "modified": "2020-10-15T21:45:26.861Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/getMinutes": {
+    "modified": "2020-10-15T21:45:26.279Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/getMonth": {
+    "modified": "2020-10-15T21:45:28.693Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/getSeconds": {
+    "modified": "2020-10-15T21:45:29.298Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/getTime": {
+    "modified": "2020-10-15T21:45:29.479Z",
+    "contributors": [
+      "schlagi123",
+      "davidwittenbrink"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset": {
+    "modified": "2020-10-15T21:45:28.937Z",
+    "contributors": [
+      "schlagi123",
+      "douira",
+      "ozcelebi"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/getUTCDate": {
+    "modified": "2020-10-15T21:45:20.226Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/getUTCDay": {
+    "modified": "2020-10-15T21:45:21.504Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/getUTCFullYear": {
+    "modified": "2020-10-15T21:45:23.446Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/getUTCHours": {
+    "modified": "2020-10-15T21:45:19.205Z",
+    "contributors": [
+      "dotperinch",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/getUTCMilliseconds": {
+    "modified": "2020-10-15T21:45:30.061Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/getUTCMinutes": {
+    "modified": "2020-10-15T21:45:24.536Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/getUTCMonth": {
+    "modified": "2020-10-15T21:45:18.574Z",
+    "contributors": [
+      "schlagi123",
+      "Artenuvielle"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/getUTCSeconds": {
+    "modified": "2020-10-15T21:45:22.596Z",
+    "contributors": [
+      "schlagi123",
+      "HendrikRunte"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/getYear": {
+    "modified": "2020-10-15T21:45:31.158Z",
+    "contributors": [
+      "danieldiekmeier",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/now": {
+    "modified": "2020-10-15T21:29:19.444Z",
+    "contributors": [
+      "Khazl",
+      "schlagi123",
+      "J000S",
+      "gurix",
+      "fscholz",
+      "LOK"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/parse": {
+    "modified": "2020-10-15T21:30:28.964Z",
+    "contributors": [
+      "BuZZ-T",
+      "schlagi123",
+      "PapaBravo",
+      "GottZ",
+      "TheSuspiciousWombat",
+      "MrMartiniMo",
+      "danieldiekmeier",
+      "Drasive"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/prototype": {
+    "modified": "2020-10-15T21:45:25.297Z",
+    "contributors": [
+      "schlagi123",
+      "Schollator"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/setDate": {
+    "modified": "2020-10-15T21:45:35.204Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/setFullYear": {
+    "modified": "2020-10-15T21:45:37.723Z",
+    "contributors": [
+      "dritter",
+      "schlagi123",
+      "derhofbauer"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/setHours": {
+    "modified": "2020-10-15T21:45:35.032Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/setMilliseconds": {
+    "modified": "2020-10-15T21:45:36.061Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/setMinutes": {
+    "modified": "2020-10-15T21:45:36.748Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/setMonth": {
+    "modified": "2020-10-15T21:45:38.160Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/setSeconds": {
+    "modified": "2020-10-15T21:45:36.906Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/setTime": {
+    "modified": "2020-10-15T21:33:01.056Z",
+    "contributors": [
+      "schlagi123",
+      "jhnnslschnr"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/setUTCDate": {
+    "modified": "2020-10-15T21:45:41.852Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/setUTCFullYear": {
+    "modified": "2020-10-15T21:45:48.630Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/setUTCHours": {
+    "modified": "2020-10-15T21:45:48.619Z",
+    "contributors": [
+      "schlagi123",
+      "stephtr"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/setUTCMilliseconds": {
+    "modified": "2020-10-15T21:45:41.573Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/setUTCMinutes": {
+    "modified": "2020-10-15T21:45:41.649Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/setUTCMonth": {
+    "modified": "2020-10-15T21:45:41.116Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/setUTCSeconds": {
+    "modified": "2020-10-15T21:45:41.484Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/setYear": {
+    "modified": "2020-10-15T21:45:41.405Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/toDateString": {
+    "modified": "2020-10-15T21:45:49.664Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/toGMTString": {
+    "modified": "2020-10-15T21:45:51.459Z",
+    "contributors": [
+      "schlagi123",
+      "bentzibentz"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/toISOString": {
+    "modified": "2020-10-15T21:45:50.222Z",
+    "contributors": [
+      "NiklasMerz",
+      "schnellboot",
+      "botic",
+      "schlagi123",
+      "WikiMarc"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/toJSON": {
+    "modified": "2020-10-15T21:42:32.875Z",
+    "contributors": [
+      "schlagi123",
+      "Chips100"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString": {
+    "modified": "2020-10-15T21:45:58.511Z",
+    "contributors": [
+      "schlagi123",
+      "gunnarbittersmann"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/toLocaleString": {
+    "modified": "2020-10-15T21:45:59.947Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString": {
+    "modified": "2020-10-15T21:46:02.185Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/toSource": {
+    "modified": "2020-10-15T21:45:56.411Z",
+    "contributors": [
+      "teoli",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/toString": {
+    "modified": "2020-10-15T21:45:57.842Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/toTimeString": {
+    "modified": "2020-10-15T21:45:50.302Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/toUTCString": {
+    "modified": "2020-10-15T21:45:55.020Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/valueOf": {
+    "modified": "2020-10-15T21:45:55.002Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Error": {
+    "modified": "2020-10-15T21:46:20.812Z",
+    "contributors": [
+      "Flur3x",
+      "nnals",
+      "schlagi123",
+      "jens1o",
+      "shaedrich",
+      "andreasf",
+      "AlexanderFradiani"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Error/Stack": {
+    "modified": "2020-10-15T21:48:37.021Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Error/columnNumber": {
+    "modified": "2020-10-15T21:46:22.573Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Error/fileName": {
+    "modified": "2020-10-15T21:46:29.467Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Error/lineNumber": {
+    "modified": "2020-10-15T21:46:24.762Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Error/message": {
+    "modified": "2020-10-15T21:46:22.605Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Error/name": {
+    "modified": "2020-10-15T21:46:26.394Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Error/prototype": {
+    "modified": "2020-10-15T21:46:17.159Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Error/toSource": {
+    "modified": "2020-10-15T21:46:53.703Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Error/toString": {
+    "modified": "2020-10-15T21:46:20.003Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/EvalError": {
+    "modified": "2020-10-15T22:01:27.828Z",
+    "contributors": [
+      "schlagi123",
+      "fscholz"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/EvalError/prototype": {
+    "modified": "2020-10-15T22:01:29.746Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Float32Array": {
+    "modified": "2020-10-15T22:01:33.350Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Float64Array": {
+    "modified": "2020-10-15T22:01:34.687Z",
+    "contributors": [
+      "pastparty",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Function": {
+    "modified": "2020-10-15T21:30:33.103Z",
+    "contributors": [
+      "woiddale",
+      "schlagi123",
+      "TDesjardins",
+      "StevenS77",
+      "Mingun"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Function/apply": {
+    "modified": "2020-10-15T21:47:39.222Z",
+    "contributors": [
+      "schlagi123",
+      "fscholz"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Function/arguments": {
+    "modified": "2020-10-15T22:01:34.868Z",
+    "contributors": [
+      "rossler123",
+      "trollkotze",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Function/bind": {
+    "modified": "2020-10-15T21:37:23.019Z",
+    "contributors": [
+      "axelrindle",
+      "chikovanreuden",
+      "rendner",
+      "matz3",
+      "schlagi123",
+      "Leitschiff",
+      "roman.seidelsohn",
+      "sepastian"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Function/call": {
+    "modified": "2020-10-15T21:30:32.549Z",
+    "contributors": [
+      "ffriedl89",
+      "alexander-heimbuch",
+      "schlagi123",
+      "Oekel",
+      "Abro",
+      "haryl",
+      "loki",
+      "nelf"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Function/caller": {
+    "modified": "2020-10-15T22:01:48.453Z",
+    "contributors": [
+      "buschco",
+      "Obiwahn",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Function/displayName": {
+    "modified": "2020-10-15T22:01:52.215Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Function/length": {
+    "modified": "2020-10-15T21:34:09.689Z",
+    "contributors": [
+      "schlagi123",
+      "Eiknheimer",
+      "timoweiss"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Function/name": {
+    "modified": "2020-10-15T21:37:34.115Z",
+    "contributors": [
+      "BoyTheBoy",
+      "schlagi123",
+      "Eiknheimer",
+      "MoritzKn",
+      "DavidVollmers"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Function/prototype": {
+    "modified": "2020-10-15T22:01:36.587Z",
+    "contributors": [
+      "xdevs23",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Function/toSource": {
+    "modified": "2020-10-15T22:01:47.277Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Function/toString": {
+    "modified": "2020-10-15T22:01:46.451Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Generator": {
+    "modified": "2020-10-15T22:01:57.503Z",
+    "contributors": [
+      "schlagi123",
+      "fscholz"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Generator/next": {
+    "modified": "2020-10-15T22:01:55.076Z",
+    "contributors": [
+      "GarfieldKlon",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Generator/return": {
+    "modified": "2020-10-15T22:01:56.757Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Generator/throw": {
+    "modified": "2020-10-15T22:01:58.175Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/GeneratorFunction": {
+    "modified": "2020-10-15T22:02:04.667Z",
+    "contributors": [
+      "schlagi123",
+      "fscholz"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype": {
+    "modified": "2020-10-15T22:02:06.474Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Infinity": {
+    "modified": "2020-10-15T21:32:07.008Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Int16Array": {
+    "modified": "2020-10-15T22:01:32.923Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Int32Array": {
+    "modified": "2020-10-15T22:01:33.440Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Int8Array": {
+    "modified": "2020-10-15T22:01:34.152Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/InternalError": {
+    "modified": "2020-10-15T22:02:06.176Z",
+    "contributors": [
+      "schlagi123",
+      "fscholz"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/InternalError/prototype": {
+    "modified": "2020-10-15T22:02:05.813Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Intl": {
+    "modified": "2020-10-15T22:02:07.140Z",
+    "contributors": [
+      "TorstenDittmann",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Intl/Collator": {
+    "modified": "2020-10-15T22:02:08.820Z",
+    "contributors": [
+      "fscholz",
+      "schlagi123",
+      "wbamberg"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Intl/Collator/compare": {
+    "modified": "2020-10-15T22:02:10.077Z",
+    "contributors": [
+      "fscholz",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Intl/Collator/prototype": {
+    "modified": "2020-10-15T22:02:09.634Z",
+    "contributors": [
+      "fscholz",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Intl/Collator/resolvedOptions": {
+    "modified": "2020-10-15T22:02:19.729Z",
+    "contributors": [
+      "fscholz",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Intl/Collator/supportedLocalesOf": {
+    "modified": "2020-10-15T22:02:18.509Z",
+    "contributors": [
+      "fscholz",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat": {
+    "modified": "2020-10-15T21:45:59.649Z",
+    "contributors": [
+      "fscholz",
+      "gunnarbittersmann",
+      "BuZZ-T",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format": {
+    "modified": "2020-10-15T22:02:19.143Z",
+    "contributors": [
+      "fscholz",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts": {
+    "modified": "2020-10-15T22:02:19.130Z",
+    "contributors": [
+      "fscholz",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype": {
+    "modified": "2020-10-15T21:46:02.893Z",
+    "contributors": [
+      "fscholz",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions": {
+    "modified": "2020-10-15T22:03:23.205Z",
+    "contributors": [
+      "fscholz",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/supportedLocalesOf": {
+    "modified": "2020-10-15T22:02:43.009Z",
+    "contributors": [
+      "fscholz",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat": {
+    "modified": "2020-10-15T21:45:21.440Z",
+    "contributors": [
+      "fscholz",
+      "nw520",
+      "schlagi123",
+      "sdeitmer"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/format": {
+    "modified": "2020-10-15T22:03:25.553Z",
+    "contributors": [
+      "fscholz",
+      "apfelbox",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype": {
+    "modified": "2020-10-15T22:03:24.903Z",
+    "contributors": [
+      "fscholz",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/supportedLocalesOf": {
+    "modified": "2020-10-15T22:02:57.962Z",
+    "contributors": [
+      "fscholz",
+      "SebastianSpeitel",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Intl/PluralRules": {
+    "modified": "2020-10-15T22:02:58.225Z",
+    "contributors": [
+      "fscholz"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/supportedLocalesOf": {
+    "modified": "2020-10-15T22:02:59.909Z",
+    "contributors": [
+      "fscholz",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Intl/getCanonicalLocales": {
+    "modified": "2020-10-15T22:02:08.681Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/JSON": {
+    "modified": "2020-10-15T21:34:42.140Z",
+    "contributors": [
+      "schlagi123",
+      "RewoSiedge",
+      "Abro",
+      "markokr"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/JSON/parse": {
+    "modified": "2020-10-15T21:34:37.174Z",
+    "contributors": [
+      "schlagi123",
+      "mdnde",
+      "fscholz",
+      "ccoenen",
+      "maxkl",
+      "dguhl"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/JSON/stringify": {
+    "modified": "2020-10-15T21:38:21.975Z",
+    "contributors": [
+      "duckymirror",
+      "powerpaul17",
+      "schlagi123",
+      "einfallstoll",
+      "sahin",
+      "DoctypeRosenthal",
+      "HighTower79",
+      "m3t4lukas",
+      "blub0hr"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Map": {
+    "modified": "2020-10-15T21:39:41.133Z",
+    "contributors": [
+      "verij51",
+      "Streamities",
+      "kdex",
+      "Flonk",
+      "schlagi123",
+      "the-bluesnik",
+      "GinoHereIam",
+      "Chris-CR",
+      "Fearodin"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Map/@@iterator": {
+    "modified": "2020-10-15T22:01:27.148Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Map/@@species": {
+    "modified": "2020-10-15T22:01:26.820Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Map/@@toStringTag": {
+    "modified": "2020-10-15T22:01:26.636Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Map/clear": {
+    "modified": "2020-10-15T22:01:24.339Z",
+    "contributors": [
+      "shaedrich",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Map/delete": {
+    "modified": "2020-10-15T22:01:25.242Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Map/entries": {
+    "modified": "2020-10-15T22:01:26.606Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Map/forEach": {
+    "modified": "2020-10-15T21:53:59.055Z",
+    "contributors": [
+      "schlagi123",
+      "Techworker"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Map/get": {
+    "modified": "2020-10-15T22:01:25.184Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Map/has": {
+    "modified": "2020-10-15T22:01:25.655Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Map/keys": {
+    "modified": "2020-10-15T21:57:34.550Z",
+    "contributors": [
+      "schlagi123",
+      "patpir"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Map/prototype": {
+    "modified": "2020-10-15T22:01:26.449Z",
+    "contributors": [
+      "Morphbreed",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Map/set": {
+    "modified": "2020-10-15T22:01:24.339Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Map/size": {
+    "modified": "2020-10-15T22:01:24.292Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Map/values": {
+    "modified": "2020-10-15T22:01:25.714Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math": {
+    "modified": "2020-10-15T21:32:16.402Z",
+    "contributors": [
+      "schlagi123",
+      "Artist-sumo"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/E": {
+    "modified": "2020-10-15T21:32:14.403Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/LN10": {
+    "modified": "2020-10-15T21:32:13.398Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/LN2": {
+    "modified": "2020-10-15T21:32:14.601Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/LOG10E": {
+    "modified": "2020-10-15T21:32:15.382Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/LOG2E": {
+    "modified": "2020-10-15T21:32:15.299Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/PI": {
+    "modified": "2020-10-15T21:32:12.966Z",
+    "contributors": [
+      "intxcc",
+      "schlagi123",
+      "JulianBuerger",
+      "KillerCodeMonkey"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/SQRT1_2": {
+    "modified": "2020-10-15T21:32:13.657Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/SQRT2": {
+    "modified": "2020-10-15T21:32:13.993Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/acos": {
+    "modified": "2020-10-15T21:32:14.868Z",
+    "contributors": [
+      "schlagi123",
+      "hictox"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/acosh": {
+    "modified": "2020-10-15T21:38:20.524Z",
+    "contributors": [
+      "schlagi123",
+      "hictox"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/asin": {
+    "modified": "2020-10-15T21:38:20.385Z",
+    "contributors": [
+      "schlagi123",
+      "hictox"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/asinh": {
+    "modified": "2020-10-15T21:38:17.929Z",
+    "contributors": [
+      "schlagi123",
+      "hictox"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/atan": {
+    "modified": "2020-10-15T21:38:19.032Z",
+    "contributors": [
+      "schlagi123",
+      "hictox"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/atan2": {
+    "modified": "2020-10-15T21:38:18.649Z",
+    "contributors": [
+      "schlagi123",
+      "hictox"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/cbrt": {
+    "modified": "2020-10-15T21:38:16.861Z",
+    "contributors": [
+      "itsdevdom",
+      "schlagi123",
+      "hictox"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/ceil": {
+    "modified": "2020-10-15T21:32:47.773Z",
+    "contributors": [
+      "scor-ch",
+      "schlagi123",
+      "LuiSlacker",
+      "hictox",
+      "hanswer01"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/clz32": {
+    "modified": "2020-10-15T21:45:08.913Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/cos": {
+    "modified": "2020-10-15T21:45:11.097Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/cosh": {
+    "modified": "2020-10-15T21:45:13.156Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/exp": {
+    "modified": "2020-10-15T21:45:11.971Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/expm1": {
+    "modified": "2020-10-15T21:45:13.158Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/floor": {
+    "modified": "2020-10-15T21:40:05.734Z",
+    "contributors": [
+      "schlagi123",
+      "mcmunder",
+      "flottokarotto"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/fround": {
+    "modified": "2020-10-15T21:45:14.992Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/hypot": {
+    "modified": "2020-10-15T21:45:16.601Z",
+    "contributors": [
+      "gunnarbittersmann",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/imul": {
+    "modified": "2020-10-15T21:45:04.964Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/log": {
+    "modified": "2020-10-23T10:19:29.166Z",
+    "contributors": [
+      "sttzr",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/log10": {
+    "modified": "2020-10-15T21:45:15.451Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/log1p": {
+    "modified": "2020-10-15T21:45:15.457Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/log2": {
+    "modified": "2020-10-15T21:45:15.290Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/math.random": {
+    "modified": "2020-10-15T21:36:41.048Z",
+    "contributors": [
+      "grumpy-cat",
+      "schlagi123",
+      "cami",
+      "serv-inc",
+      "Dargmuesli"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/max": {
+    "modified": "2020-10-15T21:37:55.703Z",
+    "contributors": [
+      "tzimmermann",
+      "schlagi123",
+      "screeny05",
+      "Elytherion",
+      "ptitmouton"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/min": {
+    "modified": "2020-10-15T21:33:32.757Z",
+    "contributors": [
+      "Stnieder",
+      "schlagi123",
+      "cedrichaase",
+      "SSchnitzler"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/pow": {
+    "modified": "2020-10-15T21:39:55.052Z",
+    "contributors": [
+      "schlagi123",
+      "alice-wl"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/round": {
+    "modified": "2020-10-15T21:34:19.737Z",
+    "contributors": [
+      "aserraric",
+      "schlagi123",
+      "RefToDev",
+      "Krayzeee92",
+      "DanMyshkin",
+      "michaelkoehne"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/sign": {
+    "modified": "2020-10-15T21:45:13.058Z",
+    "contributors": [
+      "schlagi123",
+      "cedrichaase"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/sin": {
+    "modified": "2020-10-15T21:45:12.206Z",
+    "contributors": [
+      "ModellbahnFreak",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/sinh": {
+    "modified": "2020-10-15T21:45:14.822Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/sqrt": {
+    "modified": "2020-10-15T21:45:14.468Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/tan": {
+    "modified": "2020-10-15T21:45:14.142Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/tanh": {
+    "modified": "2020-10-15T21:45:13.983Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/trunc": {
+    "modified": "2020-10-15T21:45:15.988Z",
+    "contributors": [
+      "4typen",
+      "schlagi123",
+      "giffeler"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/NaN": {
+    "modified": "2020-10-15T21:24:05.253Z",
+    "contributors": [
+      "schlagi123",
+      "boppy",
+      "SphinxKnight",
+      "fscholz",
+      "Jens_Verneuer"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Number": {
+    "modified": "2020-10-15T21:26:52.848Z",
+    "contributors": [
+      "schlagi123",
+      "mreu",
+      "StevenS77",
+      "mrcktz",
+      "fscholz",
+      "AngelSankturio"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Number/EPSILON": {
+    "modified": "2020-10-15T21:26:52.886Z",
+    "contributors": [
+      "mitch3ls",
+      "schlagi123",
+      "Steditor",
+      "Tilli81",
+      "fscholz",
+      "AngelSankturio"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER": {
+    "modified": "2020-10-15T21:45:17.017Z",
+    "contributors": [
+      "EpsilonBoo",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE": {
+    "modified": "2020-10-15T21:45:17.604Z",
+    "contributors": [
+      "schlagi123",
+      "Fuzzyma"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER": {
+    "modified": "2020-10-15T21:45:17.586Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE": {
+    "modified": "2020-10-30T06:50:59.921Z",
+    "contributors": [
+      "thefabicraft-github",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY": {
+    "modified": "2020-10-15T21:32:05.912Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Number/NaN": {
+    "modified": "2020-10-15T21:31:59.627Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY": {
+    "modified": "2020-10-15T21:32:00.956Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Number/isFinite": {
+    "modified": "2020-10-15T21:32:05.695Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Number/isInteger": {
+    "modified": "2020-10-15T21:45:17.315Z",
+    "contributors": [
+      "schlagi123",
+      "MauriceAyasse"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Number/isNaN": {
+    "modified": "2020-10-15T21:32:02.637Z",
+    "contributors": [
+      "schlagi123",
+      "mazilema",
+      "renemaas"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger": {
+    "modified": "2020-10-15T21:45:20.941Z",
+    "contributors": [
+      "Frdnspnzr",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Number/parseFloat": {
+    "modified": "2020-10-15T21:45:17.199Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Number/parseInt": {
+    "modified": "2020-10-15T21:45:18.357Z",
+    "contributors": [
+      "schlagi123",
+      "daugsbi",
+      "DennisAhaus"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Number/prototype": {
+    "modified": "2020-10-15T21:45:14.479Z",
+    "contributors": [
+      "schlagi123",
+      "doeck"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Number/toExponential": {
+    "modified": "2020-10-15T21:45:19.048Z",
+    "contributors": [
+      "joebau0815",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Number/toFixed": {
+    "modified": "2020-10-15T21:45:19.906Z",
+    "contributors": [
+      "gunnarbittersmann",
+      "schlagi123",
+      "mack3457",
+      "mzur",
+      "phax"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Number/toLocaleString": {
+    "modified": "2020-10-15T21:45:20.416Z",
+    "contributors": [
+      "Hanmac",
+      "schlagi123",
+      "mreu",
+      "sdeitmer",
+      "PierreCorell"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Number/toPrecision": {
+    "modified": "2020-10-15T21:45:20.364Z",
+    "contributors": [
+      "schlagi123",
+      "phax"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Number/toSource": {
+    "modified": "2020-10-15T21:45:18.319Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Number/toString": {
+    "modified": "2020-10-15T21:45:18.952Z",
+    "contributors": [
+      "schlagi123",
+      "giffeler"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Number/valueOf": {
+    "modified": "2020-10-15T21:45:19.158Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object": {
+    "modified": "2020-10-15T21:21:51.304Z",
+    "contributors": [
+      "bobbor",
+      "wbamberg",
+      "fscholz",
+      "mholland1337"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__": {
+    "modified": "2019-03-23T22:08:08.241Z",
+    "contributors": [
+      "Christian2507"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/assign": {
+    "modified": "2020-10-15T21:46:53.703Z",
+    "contributors": [
+      "Stefie",
+      "schlagi123",
+      "Yogu",
+      "henrymoews",
+      "KuhnEDV"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/constructor": {
+    "modified": "2019-03-23T23:24:06.881Z",
+    "contributors": [
+      "Olli64",
+      "fscholz",
+      "Airblader"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/create": {
+    "modified": "2019-03-23T23:03:06.202Z",
+    "contributors": [
+      "arothweiler",
+      "peter30mar2017",
+      "fmsy",
+      "BurnerPat",
+      "Hendrikto"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/defineProperty": {
+    "modified": "2019-07-01T07:52:37.430Z",
+    "contributors": [
+      "JanSchuermannPH",
+      "Univream",
+      "tvormweg"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/entries": {
+    "modified": "2020-10-15T22:19:15.987Z",
+    "contributors": [
+      "franca"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/freeze": {
+    "modified": "2020-10-15T21:33:52.609Z",
+    "contributors": [
+      "SebinNyshkim",
+      "christophfriedrich",
+      "asilberschneider",
+      "clemenshelm",
+      "schlagi123",
+      "sbusch",
+      "in0x"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames": {
+    "modified": "2019-03-23T22:20:00.098Z",
+    "contributors": [
+      "janbiasi"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf": {
+    "modified": "2019-03-23T22:16:28.123Z",
+    "contributors": [
+      "StevenS77",
+      "klausbx"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty": {
+    "modified": "2019-03-23T22:50:54.746Z",
+    "contributors": [
+      "bambebituna",
+      "ilkercat",
+      "schlagi123",
+      "juicyarts"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/is": {
+    "modified": "2020-10-15T21:25:28.677Z",
+    "contributors": [
+      "rioderelfte",
+      "SphinxKnight",
+      "kdex",
+      "level420",
+      "giffeler",
+      "StevenS77",
+      "fscholz",
+      "Airblader"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/isExtensible": {
+    "modified": "2019-03-23T22:15:34.012Z",
+    "contributors": [
+      "dthdyver"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/isFrozen": {
+    "modified": "2020-10-15T22:20:16.815Z",
+    "contributors": [
+      "bobbor"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/keys": {
+    "modified": "2019-03-23T23:05:44.528Z",
+    "contributors": [
+      "p2k",
+      "kdex",
+      "schlagi123",
+      "cepharum",
+      "Bavragor"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/proto": {
+    "modified": "2019-04-16T09:05:23.152Z",
+    "contributors": [
+      "barcmoehm",
+      "StevenS77"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/prototype": {
+    "modified": "2019-03-23T22:30:41.741Z",
+    "contributors": [
+      "peter30mar2017",
+      "fl1p"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/toSource": {
+    "modified": "2019-03-23T22:08:15.191Z",
+    "contributors": [
+      "teoli",
+      "Christian2507"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/valueOf": {
+    "modified": "2020-10-15T22:05:39.564Z",
+    "contributors": [
+      "paulkoegel",
+      "dennissterzenbach"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/values": {
+    "modified": "2019-03-18T20:58:26.548Z",
+    "contributors": [
+      "filmor",
+      "rhoio",
+      "andresattler"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Promise": {
+    "modified": "2020-09-11T07:37:54.436Z",
+    "contributors": [
+      "sebenns",
+      "semmelbroesl",
+      "Dschubba",
+      "mrmoree",
+      "CorvusRohan",
+      "jnnkm",
+      "SphinxKnight",
+      "0xflotus",
+      "HendrikRunte",
+      "1blankz7"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Promise/all": {
+    "modified": "2020-10-15T21:33:48.453Z",
+    "contributors": [
+      "Dschubba",
+      "anniekao",
+      "SphinxKnight",
+      "kdex",
+      "davidrockt",
+      "Sharian"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Promise/finally": {
+    "modified": "2020-10-15T22:05:15.072Z",
+    "contributors": [
+      "tminich",
+      "wasabiNorman"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Promise/race": {
+    "modified": "2020-10-15T22:04:13.810Z",
+    "contributors": [
+      "pkimmlinger",
+      "cepharum",
+      "DaAitch"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Promise/reject": {
+    "modified": "2020-10-15T21:53:18.040Z",
+    "contributors": [
+      "ManuelKiessling",
+      "marco-a",
+      "modev"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Promise/then": {
+    "modified": "2019-03-23T22:48:57.241Z",
+    "contributors": [
+      "dbraun",
+      "SphinxKnight",
+      "kdex",
+      "DanielMSchmidt",
+      "florianb"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/RangeError": {
+    "modified": "2019-03-23T22:12:22.680Z",
+    "contributors": [
+      "jameshkramer"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/RangeError/prototype": {
+    "modified": "2019-03-23T22:12:08.670Z",
+    "contributors": [
+      "ThomasFe"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Reflect": {
+    "modified": "2020-10-15T22:13:20.309Z",
+    "contributors": [
+      "Tjerk-Haaye-Henricus"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Reflect/apply": {
+    "modified": "2020-10-15T22:13:35.547Z",
+    "contributors": [
+      "Tjerk-Haaye-Henricus"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Reflect/construct": {
+    "modified": "2020-10-15T22:13:50.733Z",
+    "contributors": [
+      "Tjerk-Haaye-Henricus"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/RegExp": {
+    "modified": "2020-08-17T16:16:42.469Z",
+    "contributors": [
+      "MoPaMo",
+      "ModProg",
+      "D3rT1m",
+      "wbamberg",
+      "rmcproductions",
+      "Wiimm",
+      "doeck",
+      "StevenS77",
+      "Abro",
+      "Simmarith",
+      "fscholz",
+      "powerswitch",
+      "def00111",
+      "clone",
+      "lightspirit"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/RegExp/flags": {
+    "modified": "2020-10-15T22:08:09.837Z",
+    "contributors": [
+      "vortami"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/RegExp/input": {
+    "modified": "2019-03-23T22:37:59.302Z",
+    "contributors": [
+      "teoli",
+      "RewoSiedge",
+      "jumpball"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/RegExp/test": {
+    "modified": "2020-10-15T22:29:51.696Z",
+    "contributors": [
+      "MrFootwork",
+      "jan.kaiser1952"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Set": {
+    "modified": "2020-11-14T21:15:03.891Z",
+    "contributors": [
+      "ottahe",
+      "MichaelGellings",
+      "cami",
+      "AndyLnd",
+      "mdnde2",
+      "Flonk",
+      "schlagi123",
+      "sspringer82"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Set/add": {
+    "modified": "2020-11-14T20:25:16.685Z",
+    "contributors": [
+      "ottahe"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Set/delete": {
+    "modified": "2020-11-14T20:17:34.638Z",
+    "contributors": [
+      "ottahe"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Set/has": {
+    "modified": "2019-03-23T22:10:20.086Z",
+    "contributors": [
+      "mdnde2",
+      "psychotammi"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String": {
+    "modified": "2020-10-15T21:30:10.579Z",
+    "contributors": [
+      "kdex",
+      "Anonymous",
+      "schlagi123",
+      "fscholz"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/Trim": {
+    "modified": "2020-10-15T21:34:43.401Z",
+    "contributors": [
+      "schlagi123",
+      "janpawellek",
+      "Codebryo"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/TrimLeft": {
+    "modified": "2020-10-15T21:48:35.629Z",
+    "contributors": [
+      "teoli",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/TrimRight": {
+    "modified": "2020-10-15T21:47:40.889Z",
+    "contributors": [
+      "teoli",
+      "schlagi123",
+      "Zertrax"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/charAt": {
+    "modified": "2019-05-13T20:26:27.144Z",
+    "contributors": [
+      "Huegelkoenig",
+      "PascalAOMS"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/concat": {
+    "modified": "2019-03-23T22:36:31.275Z",
+    "contributors": [
+      "schlagi123",
+      "Saschlong"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/endsWith": {
+    "modified": "2019-03-23T22:28:08.246Z",
+    "contributors": [
+      "THX138"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/fromCharCode": {
+    "modified": "2019-03-23T22:22:43.486Z",
+    "contributors": [
+      "NielsNet",
+      "Huargh"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/includes": {
+    "modified": "2020-10-15T21:49:46.614Z",
+    "contributors": [
+      "vssn",
+      "kdex",
+      "PascalAOMS"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/indexOf": {
+    "modified": "2019-03-23T23:04:28.715Z",
+    "contributors": [
+      "JohannesKuehnel",
+      "schlagi123",
+      "sroe",
+      "pascalhofmann",
+      "c4re"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/lastIndexOf": {
+    "modified": "2019-03-23T22:56:44.027Z",
+    "contributors": [
+      "BenB",
+      "Chips100",
+      "flottokarotto"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/length": {
+    "modified": "2020-10-15T21:34:41.966Z",
+    "contributors": [
+      "Stuhl",
+      "schlagi123",
+      "labcode-de",
+      "flottokarotto"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/match": {
+    "modified": "2020-10-15T21:54:33.157Z",
+    "contributors": [
+      "alberts+",
+      "d4rkne55",
+      "Tosch110",
+      "afoeder",
+      "tobiasherber"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/prototype": {
+    "modified": "2020-10-15T22:24:44.810Z",
+    "contributors": [
+      "Symtex99"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/raw": {
+    "modified": "2019-03-23T22:34:12.947Z",
+    "contributors": [
+      "kdex",
+      "bfncs",
+      "schlagi123",
+      "cnu301"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/repeat": {
+    "modified": "2020-10-15T22:06:26.477Z",
+    "contributors": [
+      "AlexWayhill"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/replace": {
+    "modified": "2019-11-20T12:28:26.785Z",
+    "contributors": [
+      "fools-mate",
+      "danieldiekmeier",
+      "kkoop",
+      "HdHeiniDev",
+      "giffeler",
+      "TobiGe",
+      "fancyFranci",
+      "schlagi123",
+      "Saschlong",
+      "mower",
+      "tspaeth",
+      "fscholz",
+      "powerswitch"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/slice": {
+    "modified": "2019-03-23T22:18:04.121Z",
+    "contributors": [
+      "napengam",
+      "didierCH",
+      "jay-bricksoft"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/split": {
+    "modified": "2020-10-15T21:34:44.394Z",
+    "contributors": [
+      "SebinNyshkim",
+      "Ruupatt",
+      "shaedrich",
+      "virtusmaior",
+      "josephinepanda"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/startsWith": {
+    "modified": "2019-09-27T21:50:55.652Z",
+    "contributors": [
+      "daluege",
+      "MWojt",
+      "kdex",
+      "Aaric",
+      "schlagi123",
+      "christ2go"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/substr": {
+    "modified": "2019-03-26T09:57:55.345Z",
+    "contributors": [
+      "F4k3rzZ",
+      "schlagi123",
+      "jazzpi"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/substring": {
+    "modified": "2019-05-22T10:50:37.923Z",
+    "contributors": [
+      "DragonPerl",
+      "thebigbla",
+      "KillerCodeMonkey"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/suchen": {
+    "modified": "2020-10-15T22:11:40.635Z",
+    "contributors": [
+      "tobipch",
+      "blackjack4494",
+      "Cr4zyG4m3rLP"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/toLowerCase": {
+    "modified": "2020-10-15T21:37:54.853Z",
+    "contributors": [
+      "schlagi123",
+      "Chips100"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/toUpperCase": {
+    "modified": "2019-03-23T22:31:03.601Z",
+    "contributors": [
+      "nextlevelshit",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/SyntaxError": {
+    "modified": "2020-10-15T21:46:23.938Z",
+    "contributors": [
+      "schlagi123",
+      "fscholz"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype": {
+    "modified": "2020-10-15T21:46:29.639Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/TypeError": {
+    "modified": "2020-10-15T21:51:09.089Z",
+    "contributors": [
+      "schlagi123",
+      "Sheggy"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/TypeError/prototype": {
+    "modified": "2020-10-15T21:58:39.373Z",
+    "contributors": [
+      "schlagi123",
+      "Sheggy"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/WebAssembly": {
+    "modified": "2020-10-15T22:14:29.365Z",
+    "contributors": [
+      "vssn"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/WebAssembly/compile": {
+    "modified": "2020-10-15T22:14:53.372Z",
+    "contributors": [
+      "vssn"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/WebAssembly/compileStreaming": {
+    "modified": "2020-10-15T22:15:11.252Z",
+    "contributors": [
+      "vssn"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/decodeURIComponent": {
+    "modified": "2020-03-12T19:44:41.805Z",
+    "contributors": [
+      "Saerdn"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/encodeURI": {
+    "modified": "2020-03-12T19:46:14.428Z",
+    "contributors": [
+      "eras0r",
+      "knurzl"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/encodeURIComponent": {
+    "modified": "2020-03-12T19:42:09.480Z",
+    "contributors": [
+      "giffeler",
+      "kaenganxt",
+      "dbohn",
+      "ViciousPecan"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/escape": {
+    "modified": "2020-03-12T19:44:36.899Z",
+    "contributors": [
+      "gappeh"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/globalThis": {
+    "modified": "2020-10-15T22:34:14.804Z",
+    "contributors": [
+      "vssn"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/isFinite": {
+    "modified": "2020-10-15T21:32:05.093Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/isNaN": {
+    "modified": "2020-10-15T21:32:07.461Z",
+    "contributors": [
+      "Steditor",
+      "schlagi123",
+      "SerkanSipahi",
+      "mazilema",
+      "zf2timo"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/null": {
+    "modified": "2020-10-15T21:32:16.691Z",
+    "contributors": [
+      "schlagi123",
+      "HolgerJeromin",
+      "cuatro"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/parseFloat": {
+    "modified": "2020-10-15T21:34:09.121Z",
+    "contributors": [
+      "hellerim",
+      "schlagi123",
+      "bsotodo",
+      "crood"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/parseInt": {
+    "modified": "2020-10-15T21:45:22.117Z",
+    "contributors": [
+      "schlagi123",
+      "giffeler",
+      "macahi",
+      "mazilema"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/undefined": {
+    "modified": "2020-10-15T21:32:16.777Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/unescape": {
+    "modified": "2020-03-12T19:41:42.907Z",
+    "contributors": [
+      "thusslack"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/uneval": {
+    "modified": "2020-03-12T19:44:53.530Z",
+    "contributors": [
+      "teoli",
+      "SamBrishes"
+    ]
+  },
+  "Web/JavaScript/Reference/Iteration_protocols": {
+    "modified": "2020-03-12T19:47:50.502Z",
+    "contributors": [
+      "P215W",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Klassen": {
+    "modified": "2020-03-12T19:41:32.478Z",
+    "contributors": [
+      "schlagi123",
+      "Daniel_Sixl",
+      "Husi012",
+      "dehenne",
+      "DPangerl",
+      "jaller94",
+      "chiborg",
+      "akumagamo",
+      "neutr0nis",
+      "LevitatingOrange"
+    ]
+  },
+  "Web/JavaScript/Reference/Klassen/constructor": {
+    "modified": "2020-03-12T19:43:34.404Z",
+    "contributors": [
+      "kdex",
+      "schlagi123",
+      "akumagamo"
+    ]
+  },
+  "Web/JavaScript/Reference/Klassen/extends": {
+    "modified": "2020-03-12T19:43:31.080Z",
+    "contributors": [
+      "hporten",
+      "kdex",
+      "buboh",
+      "schlagi123",
+      "akumagamo"
+    ]
+  },
+  "Web/JavaScript/Reference/Klassen/static": {
+    "modified": "2020-10-15T21:45:38.442Z",
+    "contributors": [
+      "kdex",
+      "schlagi123",
+      "Nimelrian",
+      "jahe",
+      "marvhock",
+      "kannix",
+      "akumagamo"
+    ]
+  },
+  "Web/JavaScript/Reference/Lexical_grammar": {
+    "modified": "2020-10-15T22:03:30.555Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators": {
+    "modified": "2020-10-15T21:31:28.975Z",
+    "contributors": [
+      "schlagi123",
+      "fscholz",
+      "loki"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/Addition": {
+    "modified": "2020-10-15T22:34:37.156Z",
+    "contributors": [
+      "cs.schueler"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/Bitwise_Operatoren": {
+    "modified": "2020-10-15T21:51:28.246Z",
+    "contributors": [
+      "fscholz",
+      "kaljak",
+      "schlagi123",
+      "mizhac",
+      "MemoWalk"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/Comma_Operator": {
+    "modified": "2020-10-15T21:59:30.294Z",
+    "contributors": [
+      "schlagi123",
+      "vssn"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/Conditional_Operator": {
+    "modified": "2020-10-15T21:41:29.204Z",
+    "contributors": [
+      "Coding-Boss",
+      "nopeJS",
+      "Binnox",
+      "schlagi123",
+      "JWPapi",
+      "chauthai",
+      "terrluhr"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/Dekrement": {
+    "modified": "2020-10-15T22:34:53.783Z",
+    "contributors": [
+      "Klingohle"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/Destrukturierende_Zuweisung": {
+    "modified": "2020-10-15T21:41:28.452Z",
+    "contributors": [
+      "manner",
+      "ldtr89",
+      "Aoke87",
+      "apguru",
+      "schlagi123",
+      "himynameissteve",
+      "kdex",
+      "yampus",
+      "chaoran-chen",
+      "Alexa",
+      "sbusch"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/Grouping": {
+    "modified": "2020-10-15T22:05:46.615Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/Inkrement": {
+    "modified": "2020-10-15T22:34:54.059Z",
+    "contributors": [
+      "Klingohle"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/Logische_Operatoren": {
+    "modified": "2020-10-15T21:43:07.470Z",
+    "contributors": [
+      "schlagi123",
+      "LeisureLarry",
+      "Webastronaut"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/Modulo": {
+    "modified": "2020-10-15T22:34:54.665Z",
+    "contributors": [
+      "Klingohle"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/Objekt_Initialisierer": {
+    "modified": "2020-10-15T21:32:25.926Z",
+    "contributors": [
+      "Callirius",
+      "fmeyertoens",
+      "schlagi123",
+      "JohannesDienst",
+      "nnmrts",
+      "kdex",
+      "siggi-heltau"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/Operator_Precedence": {
+    "modified": "2020-03-12T19:43:04.570Z",
+    "contributors": [
+      "oliver-gramberg",
+      "Heronils",
+      "schlagi123",
+      "Karpfador",
+      "dcodeIO",
+      "LK-Reichl-F",
+      "wLikeFish"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/Optionale_Verkettung": {
+    "modified": "2020-10-15T22:26:51.885Z",
+    "contributors": [
+      "TorbenKoehn"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/Pipeline_operator": {
+    "modified": "2020-10-15T22:05:45.089Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/Property_Accessors": {
+    "modified": "2020-10-15T21:55:35.876Z",
+    "contributors": [
+      "schlagi123",
+      "timosperisen"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/Spread_operator": {
+    "modified": "2020-03-12T19:42:35.849Z",
+    "contributors": [
+      "developitz",
+      "mschleeweiss",
+      "kdex",
+      "theRealBaccata",
+      "schlagi123",
+      "sbusch",
+      "olhaar"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/Spread_syntax": {
+    "modified": "2020-10-15T22:05:09.977Z",
+    "contributors": [
+      "mischah",
+      "shaedrich",
+      "schlagi123",
+      "mschleeweiss"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/Vergleichsoperatoren": {
+    "modified": "2020-10-15T21:37:40.074Z",
+    "contributors": [
+      "Hocdoc",
+      "christophfriedrich",
+      "schlagi123",
+      "Elyasin",
+      "loki"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/Zuweisungsoperator": {
+    "modified": "2020-10-15T21:48:40.239Z",
+    "contributors": [
+      "wbamberg",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/async_function": {
+    "modified": "2020-10-15T22:05:47.683Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/await": {
+    "modified": "2020-10-15T22:05:59.887Z",
+    "contributors": [
+      "joebau0815",
+      "saschbro",
+      "chrkhl",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/class": {
+    "modified": "2020-03-12T19:42:53.976Z",
+    "contributors": [
+      "kdex",
+      "Eiknheimer",
+      "schlagi123",
+      "terrluhr"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/delete": {
+    "modified": "2020-10-15T21:38:04.252Z",
+    "contributors": [
+      "kowarschick",
+      "schlagi123",
+      "pascaliske",
+      "enexusde",
+      "CaptainStone",
+      "olhaar"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/function": {
+    "modified": "2020-10-15T21:56:30.909Z",
+    "contributors": [
+      "m5yu",
+      "jakobpack",
+      "schlagi123",
+      "christianrhansen",
+      "vssn",
+      "amelzer"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/function*": {
+    "modified": "2020-10-15T22:05:42.272Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/in": {
+    "modified": "2020-10-15T21:39:06.431Z",
+    "contributors": [
+      "mfranzke",
+      "schlagi123",
+      "kdex",
+      "xergon"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/instanceof": {
+    "modified": "2020-10-15T21:39:26.955Z",
+    "contributors": [
+      "schlagi123",
+      "HolgerJeromin",
+      "flipace",
+      "weedukind"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/new": {
+    "modified": "2020-10-15T21:38:03.135Z",
+    "contributors": [
+      "FelixSab",
+      "schlagi123",
+      "Maugo",
+      "michiruckstuhl",
+      "danbru1211"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/new.target": {
+    "modified": "2020-10-15T22:05:44.821Z",
+    "contributors": [
+      "hporten",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/super": {
+    "modified": "2020-10-15T21:47:20.372Z",
+    "contributors": [
+      "schlagi123",
+      "kdex",
+      "Skycro"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/this": {
+    "modified": "2020-10-15T21:46:51.232Z",
+    "contributors": [
+      "KratosAurion",
+      "schlagi123",
+      "kelthuzad",
+      "eluchsinger"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/typeof": {
+    "modified": "2020-11-06T10:38:36.219Z",
+    "contributors": [
+      "mschleeweiss",
+      "schlagi123",
+      "dmarku"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/void": {
+    "modified": "2020-10-15T21:34:41.746Z",
+    "contributors": [
+      "schlagi123",
+      "amelzer",
+      "JohannesDienst"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/yield": {
+    "modified": "2020-10-15T22:05:44.303Z",
+    "contributors": [
+      "kevinfoerster",
+      "ionxenia",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/yield*": {
+    "modified": "2020-10-15T22:05:43.798Z",
+    "contributors": [
+      "jborsch",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements": {
+    "modified": "2020-10-15T21:30:44.678Z",
+    "contributors": [
+      "Galajda",
+      "schlagi123",
+      "JorisGutjahr",
+      "fscholz",
+      "SphinxKnight",
+      "timbernasley"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/Empty": {
+    "modified": "2020-03-12T19:43:34.145Z",
+    "contributors": [
+      "KuhnEDV"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/async_function": {
+    "modified": "2020-10-15T22:13:51.356Z",
+    "contributors": [
+      "Dodo-the-Coder",
+      "vssn",
+      "Galajda"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/block": {
+    "modified": "2020-10-15T21:32:12.580Z",
+    "contributors": [
+      "zuzuzu",
+      "yampus",
+      "mdschweda",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/break": {
+    "modified": "2020-03-12T19:40:27.998Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/class": {
+    "modified": "2020-03-12T19:43:47.910Z",
+    "contributors": [
+      "kdex",
+      "Idrinth",
+      "schlagi123",
+      "eluchsinger"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/const": {
+    "modified": "2020-10-15T21:32:07.805Z",
+    "contributors": [
+      "zuzuzu",
+      "evayde",
+      "timlg07",
+      "SphinxKnight",
+      "kdex",
+      "marcelglaeser",
+      "andreashofer123",
+      "fscholz",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/continue": {
+    "modified": "2020-10-15T21:45:50.193Z",
+    "contributors": [
+      "schlagi123",
+      "KuhnEDV"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/debugger": {
+    "modified": "2020-10-15T22:30:09.075Z",
+    "contributors": [
+      "zuzuzu"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/default": {
+    "modified": "2020-10-15T21:46:29.118Z",
+    "contributors": [
+      "schlagi123",
+      "eluchsinger"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/do...while": {
+    "modified": "2020-03-12T19:42:19.798Z",
+    "contributors": [
+      "schlagi123",
+      "jumpball"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/export": {
+    "modified": "2020-10-15T21:41:31.690Z",
+    "contributors": [
+      "hoelzlmanuel",
+      "wheelmaker24",
+      "xchange11",
+      "schlagi123",
+      "Snapstromegon",
+      "thomaskempel",
+      "yampus",
+      "rroehrig",
+      "tuffi111",
+      "sbusch"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/for": {
+    "modified": "2020-03-12T19:42:06.001Z",
+    "contributors": [
+      "schlagi123",
+      "Elyasin"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/for...in": {
+    "modified": "2020-05-27T10:00:58.351Z",
+    "contributors": [
+      "zuzuzu",
+      "baasti",
+      "koedev",
+      "Vitroxyn",
+      "schlagi123",
+      "KuhnEDV",
+      "JohannesDienst",
+      "fscholz",
+      "lupo72"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/for...of": {
+    "modified": "2020-03-12T19:41:38.990Z",
+    "contributors": [
+      "pastparty",
+      "Xan2063",
+      "SphinxKnight",
+      "kdex",
+      "Narigo"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/function*": {
+    "modified": "2020-10-15T21:45:47.005Z",
+    "contributors": [
+      "oliver-gramberg",
+      "arothweiler",
+      "schlagi123",
+      "xstable",
+      "yampus",
+      "kdex",
+      "KuhnEDV"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/funktion": {
+    "modified": "2020-03-12T19:42:16.537Z",
+    "contributors": [
+      "yampus",
+      "trillerpfeife",
+      "neverendingo"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/if...else": {
+    "modified": "2020-10-15T21:32:18.484Z",
+    "contributors": [
+      "schlagi123",
+      "yampus"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/import": {
+    "modified": "2020-10-15T21:39:21.688Z",
+    "contributors": [
+      "fmeyertoens",
+      "kdex",
+      "Snapstromegon",
+      "Kani1013",
+      "michaelze",
+      "yampus",
+      "yannick_versley",
+      "BennyAlex",
+      "Marzelpan",
+      "schlagi123",
+      "Breaker222",
+      "Simmarith",
+      "matbad"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/label": {
+    "modified": "2020-03-12T19:43:50.191Z",
+    "contributors": [
+      "schlagi123",
+      "eluchsinger"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/let": {
+    "modified": "2020-03-12T19:40:29.227Z",
+    "contributors": [
+      "evayde",
+      "rs-github",
+      "cami",
+      "Flonk",
+      "kdex",
+      "sigoa",
+      "TheFaithfulCritic",
+      "FliegenKLATSCH",
+      "gtmn",
+      "rimace",
+      "schlagi123",
+      "AndreeWille",
+      "th-we",
+      "chk1",
+      "fscholz"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/return": {
+    "modified": "2020-03-12T19:44:07.700Z",
+    "contributors": [
+      "christophfriedrich",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/switch": {
+    "modified": "2020-03-12T19:41:30.012Z",
+    "contributors": [
+      "schlagi123",
+      "Elyasin"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/throw": {
+    "modified": "2020-03-12T19:43:13.297Z",
+    "contributors": [
+      "StanE"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/try...catch": {
+    "modified": "2020-03-12T19:45:01.106Z",
+    "contributors": [
+      "SpikePy",
+      "timomeh",
+      "stepdate"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/var": {
+    "modified": "2020-03-12T19:40:22.049Z",
+    "contributors": [
+      "rs-github",
+      "trillerpfeife",
+      "Epiglottis",
+      "schlagi123",
+      "rkoch",
+      "th-we",
+      "fscholz"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/while": {
+    "modified": "2020-10-15T21:37:40.413Z",
+    "contributors": [
+      "dmho",
+      "schlagi123",
+      "Jintzo",
+      "Elyasin"
+    ]
+  },
+  "Web/JavaScript/Reference/Strict_mode": {
+    "modified": "2020-05-27T12:41:43.793Z",
+    "contributors": [
+      "zuzuzu",
+      "SebinNyshkim",
+      "fscholz"
+    ]
+  },
+  "Web/JavaScript/Reference/Veraltete_und_abgeschaffte_Features": {
+    "modified": "2020-03-12T19:43:15.969Z",
+    "contributors": [
+      "PointedEars",
+      "jumpball"
+    ]
+  },
+  "Web/JavaScript/Reference/Veraltete_und_abgeschaffte_Features/The_legacy_Iterator_protocol": {
+    "modified": "2020-03-12T19:48:53.999Z",
+    "contributors": [
+      "ctexxx"
+    ]
+  },
+  "Web/JavaScript/Reference/template_strings": {
+    "modified": "2020-10-15T21:38:21.925Z",
+    "contributors": [
+      "zuzuzu",
+      "sandrosc",
+      "antstei",
+      "FelixSchwarzmeier",
+      "Editmonkey",
+      "SphinxKnight",
+      "0815fox",
+      "chrillek",
+      "22samuelk",
+      "stehefan"
+    ]
+  },
+  "Web/JavaScript/Speicherverwaltung": {
+    "modified": "2020-03-12T19:38:43.251Z",
+    "contributors": [
+      "FERNman",
+      "fscholz",
+      "Mitja",
+      "eminor"
+    ]
+  },
+  "Web/JavaScript/Typed_arrays": {
+    "modified": "2020-03-12T19:40:57.461Z",
+    "contributors": [
+      "flying-sheep",
+      "ksm2",
+      "Adowrath",
+      "schlagi123",
+      "sspringer82",
+      "fscholz",
+      "rogerraetzel"
+    ]
+  },
+  "Web/JavaScript/Vergleiche_auf_Gleichheit_und_deren_Verwendung": {
+    "modified": "2020-03-12T19:40:00.637Z",
+    "contributors": [
+      "schlagi123",
+      "outverness",
+      "kdex",
+      "fscholz",
+      "spiegelp"
+    ]
+  },
+  "Web/Manifest": {
+    "modified": "2020-08-31T08:04:51.977Z",
+    "contributors": [
+      "Zyndoras",
+      "gpion",
+      "SphinxKnight",
+      "tomknig",
+      "Lanseuo",
+      "lionralfs",
+      "hrjhn",
+      "McSodbrenner",
+      "fscholz",
+      "mojoaxel",
+      "tempelgogo",
+      "yzanomi"
+    ]
+  },
+  "Web/Manifest/short_name": {
+    "modified": "2020-10-15T22:31:31.945Z",
+    "contributors": [
+      "kevin98"
+    ]
+  },
+  "Web/MathML": {
+    "modified": "2019-03-23T22:48:05.789Z",
+    "contributors": [
+      "Draussenduscher",
+      "jumpball"
+    ]
+  },
+  "Web/MathML/Attribute": {
+    "modified": "2019-03-23T22:41:26.024Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Attribute/Werte": {
+    "modified": "2019-03-18T21:17:29.433Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Beispiele": {
+    "modified": "2019-03-23T22:41:30.288Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Beispiele/MathML_Satz_des_Pythagoras": {
+    "modified": "2019-03-18T21:15:50.621Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Beispiele/Quadratische_Gleichung": {
+    "modified": "2019-03-23T22:41:16.866Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element": {
+    "modified": "2019-03-23T22:41:28.276Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/maction": {
+    "modified": "2019-03-23T22:35:35.054Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/math": {
+    "modified": "2019-03-18T21:15:50.121Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/menclose": {
+    "modified": "2019-03-23T22:35:37.131Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/merror": {
+    "modified": "2019-03-23T22:35:42.535Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/mfenced": {
+    "modified": "2019-03-23T22:35:44.635Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/mfrac": {
+    "modified": "2019-03-23T22:39:13.573Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/mi": {
+    "modified": "2019-03-23T22:39:56.494Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/mn": {
+    "modified": "2019-03-23T22:40:17.694Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/mo": {
+    "modified": "2019-03-23T22:40:19.804Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/mover": {
+    "modified": "2019-03-23T22:35:41.970Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/mpadded": {
+    "modified": "2019-03-23T22:35:41.097Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/mphantom": {
+    "modified": "2019-03-23T22:35:42.968Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/mroot": {
+    "modified": "2019-03-23T22:40:25.676Z",
+    "contributors": [
+      "Draussenduscher",
+      "jumpball"
+    ]
+  },
+  "Web/MathML/Element/mrow": {
+    "modified": "2019-03-23T22:40:55.520Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/ms": {
+    "modified": "2019-03-23T22:35:40.687Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/mspace": {
+    "modified": "2019-03-23T22:35:41.572Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/msqrt": {
+    "modified": "2019-03-23T22:40:04.280Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/mstyle": {
+    "modified": "2020-10-15T21:41:26.425Z",
+    "contributors": [
+      "bershanskiy",
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/msub": {
+    "modified": "2019-03-18T21:15:46.910Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/msubsup": {
+    "modified": "2019-03-23T22:35:33.789Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/msup": {
+    "modified": "2019-03-23T22:35:34.021Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/mtable": {
+    "modified": "2019-03-23T22:35:58.744Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/mtd": {
+    "modified": "2019-03-23T22:36:01.471Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/mtext": {
+    "modified": "2019-03-23T22:35:39.496Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/mtr": {
+    "modified": "2019-03-23T22:36:03.515Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/munder": {
+    "modified": "2019-03-23T22:35:33.540Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/munderover": {
+    "modified": "2019-03-23T22:35:34.263Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/Performance": {
+    "modified": "2020-05-22T10:23:33.706Z",
+    "contributors": [
+      "chrisdavidmills"
+    ]
+  },
+  "Web/Performance/dns-prefetch": {
+    "modified": "2020-05-22T10:23:34.773Z",
+    "contributors": [
+      "chryxf"
+    ]
+  },
+  "Web/Progressive_web_apps": {
+    "modified": "2019-08-19T03:49:08.791Z",
+    "contributors": [
+      "fschaupp",
+      "chrisdavidmills",
+      "friedger"
+    ]
+  },
+  "Web/Reference": {
+    "modified": "2020-07-03T18:35:25.162Z",
+    "contributors": [
+      "duckymirror",
+      "fhwfzfge",
+      "Patrick_St.",
+      "Nickolay"
+    ]
+  },
+  "Web/Reference/API": {
+    "modified": "2019-03-23T23:18:19.126Z",
+    "contributors": [
+      "goligo",
+      "Hanibal1963",
+      "AngelSankturio"
+    ]
+  },
+  "Web/SVG": {
+    "modified": "2019-03-24T00:13:09.048Z",
+    "contributors": [
+      "teoli",
+      "ethertank",
+      "DavidWalsh",
+      "nicolasmn",
+      "fscholz",
+      "Mickiboy",
+      "-=Renegade=-",
+      "Ak120"
+    ]
+  },
+  "Web/SVG/Attribute": {
+    "modified": "2019-03-23T22:14:31.297Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/SVG/Attribute/class": {
+    "modified": "2019-03-23T22:11:26.719Z",
+    "contributors": [
+      "grobmeier"
+    ]
+  },
+  "Web/SVG/Attribute/preserveAspectRatio": {
+    "modified": "2019-09-30T23:24:10.073Z",
+    "contributors": [
+      "JackLeEmmerdeur",
+      "jbvsusj"
+    ]
+  },
+  "Web/SVG/Element": {
+    "modified": "2019-03-23T23:33:28.131Z",
+    "contributors": [
+      "Sebastianz",
+      "teoli",
+      "ethertank"
+    ]
+  },
+  "Web/SVG/Element/animate": {
+    "modified": "2020-10-15T21:26:19.629Z",
+    "contributors": [
+      "Dschubba",
+      "Sebastianz",
+      "fscholz",
+      "teoli",
+      "martin_ti"
+    ]
+  },
+  "Web/SVG/Element/circle": {
+    "modified": "2019-03-23T23:02:17.743Z",
+    "contributors": [
+      "wbamberg",
+      "Sebastianz",
+      "Oliver_Schafeld",
+      "ppk42"
+    ]
+  },
+  "Web/SVG/Element/foreignObject": {
+    "modified": "2019-03-23T23:21:17.052Z",
+    "contributors": [
+      "Sebastianz",
+      "gluecksmelodie",
+      "teoli",
+      "powerswitch"
+    ]
+  },
+  "Web/SVG/Element/path": {
+    "modified": "2020-10-15T22:17:06.133Z",
+    "contributors": [
+      "MyLittlePenguin"
+    ]
+  },
+  "Web/SVG/Element/polygon": {
+    "modified": "2019-03-23T22:09:13.846Z",
+    "contributors": [
+      "Peremptor"
+    ]
+  },
+  "Web/SVG/Element/rect": {
+    "modified": "2019-03-18T21:41:17.238Z",
+    "contributors": [
+      "philSixZero"
+    ]
+  },
+  "Web/SVG/Element/svg": {
+    "modified": "2020-10-15T21:43:06.785Z",
+    "contributors": [
+      "Volker-E",
+      "Dschubba",
+      "mattenmad"
+    ]
+  },
+  "Web/SVG/Element/textPath": {
+    "modified": "2019-03-23T22:46:20.244Z",
+    "contributors": [
+      "Sebastianz",
+      "modellking"
+    ]
+  },
+  "Web/SVG/Element/view": {
+    "modified": "2019-03-18T21:15:30.402Z",
+    "contributors": [
+      "Crucion"
+    ]
+  },
+  "Web/SVG/Namespaces_Crash_Course": {
+    "modified": "2019-03-23T22:26:27.398Z",
+    "contributors": [
+      "bgueth",
+      "Oliver_Schafeld"
+    ]
+  },
+  "Web/SVG/Tutorial": {
+    "modified": "2019-01-16T14:32:30.945Z",
+    "contributors": [
+      "teoli",
+      "fscholz",
+      "Mickiboy"
+    ]
+  },
+  "Web/SVG/Tutorial/Einführung": {
+    "modified": "2019-01-16T14:32:58.426Z",
+    "contributors": [
+      "teoli",
+      "fscholz",
+      "Mickiboy"
+    ]
+  },
+  "Web/SVG/Tutorial/Fills_and_Strokes": {
+    "modified": "2019-03-23T22:15:38.417Z",
+    "contributors": [
+      "kevinfoerster",
+      "sebastianbarfurth"
+    ]
+  },
+  "Web/SVG/Tutorial/Pfade": {
+    "modified": "2019-11-01T07:41:48.434Z",
+    "contributors": [
+      "michelgotta",
+      "ringostarr80",
+      "Wombosvideo"
+    ]
+  },
+  "Web/SVG/Tutorial/SVG_Image_Tag": {
+    "modified": "2019-04-14T13:23:03.557Z",
+    "contributors": [
+      "Heupferdchenritter",
+      "RmnWtnkmp"
+    ]
+  },
+  "Web/SVG/Tutorial/SVG_Schriftarten": {
+    "modified": "2019-04-14T13:08:23.758Z",
+    "contributors": [
+      "Heupferdchenritter"
+    ]
+  },
+  "Web/SVG/Tutorial/Tools_for_SVG": {
+    "modified": "2019-04-14T13:43:24.617Z",
+    "contributors": [
+      "Heupferdchenritter"
+    ]
+  },
+  "Web/Security": {
+    "modified": "2019-09-10T16:31:42.422Z",
+    "contributors": [
+      "SphinxKnight",
+      "Dschubba",
+      "marumari"
+    ]
+  },
+  "Web/Security/Certificate_Transparency": {
+    "modified": "2020-05-12T09:08:53.446Z",
+    "contributors": [
+      "dennissterzenbach"
+    ]
+  },
+  "Web/Security/Public_Key_Pinning": {
+    "modified": "2020-10-15T21:39:59.794Z",
+    "contributors": [
+      "Dschubba",
+      "GanbaruTobi",
+      "rugk",
+      "TheAlxH",
+      "mozjan"
+    ]
+  },
+  "Web/WebAPI": {
+    "modified": "2019-03-23T23:21:31.048Z",
+    "contributors": [
+      "wbamberg",
+      "fscholz",
+      "casarock",
+      "sbarthel",
+      "TitanNano"
+    ]
+  },
+  "Web/WebAPI/verwenden_von_geolocation": {
+    "modified": "2019-03-23T22:52:49.349Z",
+    "contributors": [
+      "shaedrich",
+      "42triangles",
+      "silend"
+    ]
+  },
+  "Web/Web_Components": {
+    "modified": "2019-03-18T20:58:34.307Z",
+    "contributors": [
+      "SetTrend",
+      "vssn",
+      "pkos98",
+      "dreitzner",
+      "DomenicDenicola"
+    ]
+  },
+  "Web/Web_Components/Custom_Elements": {
+    "modified": "2019-03-23T22:05:53.556Z",
+    "contributors": [
+      "amelzer"
+    ]
+  },
+  "Web/Web_Components/Using_custom_elements": {
+    "modified": "2020-03-12T05:58:55.117Z",
+    "contributors": [
+      "napengam",
+      "stekoe",
+      "hermann77",
+      "Maik",
+      "td8"
+    ]
+  },
+  "Web/XML": {
+    "modified": "2019-03-24T00:03:04.279Z",
+    "contributors": [
+      "ExE-Boss"
+    ]
+  },
+  "Web/XML/XML_Einführung": {
+    "modified": "2019-05-01T21:51:49.890Z",
+    "contributors": [
+      "ExE-Boss",
+      "fscholz",
+      "XxPlay9xX",
+      "Mowtrains",
+      "Maxemil",
+      "Tammo",
+      "M@d Man"
+    ]
+  },
+  "Web/XSLT": {
+    "modified": "2019-03-24T00:03:43.722Z",
+    "contributors": [
+      "ExE-Boss",
+      "ysi",
+      "fscholz",
+      "Joda"
+    ]
+  },
+  "WebSockets": {
+    "modified": "2019-03-23T22:59:48.670Z",
+    "contributors": [
+      "Johann150",
+      "mvb1996"
+    ]
+  },
+  "WebSockets/Writing_WebSocket_servers": {
+    "modified": "2020-08-15T02:07:04.944Z",
+    "contributors": [
+      "otde2016"
+    ]
+  },
+  "Web_Development/Mobile": {
+    "modified": "2019-03-23T23:29:04.325Z",
+    "contributors": [
+      "wbamberg"
+    ]
+  },
+  "Web_Development/Mobile/Responsive_design": {
+    "modified": "2019-03-23T23:29:04.477Z",
+    "contributors": [
+      "HolgerSinn.Com"
+    ]
+  },
+  "Webentwicklung": {
+    "modified": "2019-03-24T00:03:49.652Z",
+    "contributors": [
+      "TornadoIDS",
+      "fscholz",
+      "Mrueegg"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/files/de/archive/add-ons/index.html b/files/de/archive/add-ons/index.html
new file mode 100644
index 0000000000..9c0f942944
--- /dev/null
+++ b/files/de/archive/add-ons/index.html
@@ -0,0 +1,11 @@
+---
+title: Add-ons
+slug: Archive/Add-ons
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/Add-ons
+---
+<p>Archived add-ons documentation.</p>
+
+<p>{{SubpagesWithSummaries}}</p>
diff --git a/files/de/archive/add-ons/seamonkey_2/index.html b/files/de/archive/add-ons/seamonkey_2/index.html
new file mode 100644
index 0000000000..ff0a0bcde2
--- /dev/null
+++ b/files/de/archive/add-ons/seamonkey_2/index.html
@@ -0,0 +1,281 @@
+---
+title: Extensions support in SeaMonkey 2
+slug: Archive/Add-ons/SeaMonkey_2
+translation_of: Archive/Add-ons/SeaMonkey_2
+---
+<p>{{AddonSidebar}}</p>
+
+<p>Starting with SeaMonkey 2 Alpha 1 SeaMonkey supports toolkit/-style extensions. These type of extensions have many advantages for both users and developers compared to the old xpinstall/-style extensions.</p>
+
+<h3 id="The_Basics">The Basics</h3>
+
+<p>To support SeaMonkey 2 as a target application, you need to add it to the list of target applications in the extension's<a class="internal" href="/en/Install_Manifests" title="En/Install Manifests"> install.rdf</a> file. The code for that will look something like this:</p>
+
+<pre>&lt;em:targetApplication&gt;
+  &lt;!-- SeaMonkey --&gt;
+  &lt;Description&gt;
+    &lt;em:id&gt;{92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}&lt;/em:id&gt;
+    &lt;em:minVersion&gt;2.0&lt;/em:minVersion&gt;
+    &lt;em:maxVersion&gt;2.*&lt;/em:maxVersion&gt;
+  &lt;/Description&gt;
+&lt;/em:targetApplication&gt;</pre>
+
+<p>The install.js is not supported any more and should be removed.</p>
+
+<h3 id="Differences_as_compared_to_other_toolkit-based_applications">Differences as compared to other toolkit/-based applications</h3>
+
+<ul>
+ <li>
+  <p>You need to overlay/open different chrome URLs as compared to Firefox. Some URLs are listed below:</p>
+
+  <table style="height: 69px; width: 100%;">
+   <tbody>
+    <tr style="background-color: rgb(204, 255, 204);">
+     <td>URL in Firefox</td>
+     <td>URL in SeaMonkey</td>
+     <td>Overlays</td>
+    </tr>
+    <tr>
+     <td><a class="external" rel="freelink">chrome://browser/content/browser.xul</a></td>
+     <td><a class="external" rel="freelink">chrome://navigator/content/navigator.xul</a></td>
+     <td>Main browser window</td>
+    </tr>
+    <tr>
+     <td><a class="external" rel="freelink">chrome://browser/content/pageinfo/pageInfo.xul</a></td>
+     <td><a class="external" rel="freelink">chrome://navigator/content/pageinfo/pageInfo.xul</a></td>
+     <td>Page Info window</td>
+    </tr>
+    <tr>
+     <td><a class="external" rel="freelink">chrome://browser/content/preferences/permissions.xul</a></td>
+     <td><a class="external" rel="freelink">chrome://communicator/content/permis...onsManager.xul</a></td>
+     <td>Permissions Manager dialog</td>
+    </tr>
+   </tbody>
+  </table>
+
+
+  <table style="width: 100%;">
+   <caption>URLs added in 2.1</caption>
+   <tbody>
+    <tr style="background-color: rgb(204, 255, 204);">
+     <td>URL in Firefox</td>
+     <td>URL in Seamonkey</td>
+    </tr>
+    <tr>
+     <td><a class="external" rel="freelink">chrome://browser/content/bookmarks/bookmarksPanel.xul</a></td>
+     <td><a class="external" rel="freelink">chrome://communicator/content/bookmarks/bm-panel.xul</a></td>
+    </tr>
+    <tr>
+     <td><a class="external" rel="freelink">chrome://browser/content/places/places.xul</a></td>
+     <td><a class="external" rel="freelink">chrome://communicator/content/bookma...rksManager.xul</a></td>
+    </tr>
+   </tbody>
+  </table>
+  <strong>Thunderbird</strong> uses mostly the same chrome URLs for overlaying as SeaMonkey. There are exceptions, but these are few and far between.</li>
+ <li>
+  <p>SeaMonkey also uses different IDs for the menu items. Some important menu IDs are listed below, menu IDs are based on Firefox 3 source code:</p>
+
+  <table style="height: 223px; width: 800px;">
+   <tbody>
+    <tr style="background-color: rgb(204, 255, 255);">
+     <td><strong>Menu id in Firefox</strong></td>
+     <td><strong>Menu id in SeaMonkey 1.x and 2.0</strong></td>
+     <td><strong>SeaMonkey 2.1</strong></td>
+     <td><strong>Overlays</strong></td>
+    </tr>
+    <tr>
+     <td>menu_FilePopup</td>
+     <td>menu_FilePopup</td>
+     <td>menu_FilePopup</td>
+     <td>File menu popup</td>
+    </tr>
+    <tr>
+     <td>menu_EditPopup</td>
+     <td>menu_Edit_Popup</td>
+     <td>menu_EditPopup</td>
+     <td>Edit menu popup</td>
+    </tr>
+    <tr>
+     <td>menu_viewPopup</td>
+     <td>menu_View_Popup</td>
+     <td>menu_View_Popup</td>
+     <td>View menu popup</td>
+    </tr>
+    <tr>
+     <td>-</td>
+     <td>goPopup</td>
+     <td>goPopup</td>
+     <td>Go menu popup</td>
+    </tr>
+    <tr>
+     <td>placesPopup</td>
+     <td>-</td>
+     <td>-</td>
+     <td>History menu popup</td>
+    </tr>
+    <tr>
+     <td>bookmarksMenuPopup</td>
+     <td>menu_BookmarksPopup</td>
+     <td>menu_BookmarksPopup</td>
+     <td>Bookmarks menu popup</td>
+    </tr>
+    <tr>
+     <td>menu_ToolsPopup</td>
+     <td>taskPopup</td>
+     <td>taskPopup</td>
+     <td>Tools menu popup</td>
+    </tr>
+    <tr>
+     <td>-</td>
+     <td>windowPopup</td>
+     <td>windowPopup</td>
+     <td>Window menu popup</td>
+    </tr>
+    <tr>
+     <td>menu_HelpPopup</td>
+     <td>helpPopup</td>
+     <td>helpPopup</td>
+     <td>Help menu popup</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+</ul>
+
+<h3 id="URLbar_Icons">URLbar Icons</h3>
+
+<p>To display a button with a menupopup in the urlbar-icons for both Firefox and SeaMonkey 2.0, use this code:</p>
+
+<p><code>    &lt;hbox id="urlbar-icons"&gt;<br>
+         &lt;image popup="myExt-menu"/&gt;<br>
+     &lt;/hbox&gt;<br>
+      &lt;window id="main-window"&gt;<br>
+         &lt;menupopup id="myExt-menu"&gt;<br>
+             &lt;menuitem label="menuitem"/&gt;<br>
+             &lt;menuitem label="menuitem"/&gt;<br>
+         &lt;/menupopup&gt;<br>
+     &lt;/window&gt;</code></p>
+
+<p>Instead of</p>
+
+<p><span style="font-family: helvetica;"><code>    &lt;hbox id="urlbar-icons"&gt;<br>
+         &lt;button type="menu"&gt;<br>
+             &lt;menupopup&gt;<br>
+                 &lt;menuitem label="menuitem"/&gt;<br>
+                 &lt;menuitem label="menuitem"/&gt;<br>
+                 &lt;menuitem label="menuitem"/&gt;<br>
+             &lt;/menupopup&gt;<br>
+         &lt;/button&gt;<br>
+    &lt;/hbox&gt;</code></span></p>
+
+<p><strong>Technical Note:</strong> The code that opens the URL history popup just looks for any menupopup, so it goes wrong if you add your own. Ordinary popups are fine of course.</p>
+
+<h3 id="The_Statusbar">The Statusbar</h3>
+
+<p>In Firefox 3 a new <code>vbox</code> has been added, called "browser-bottombox", which encloses the find bar and status bar at the bottom of the browser window. Although this doesn't affect the appearance of the display, it may affect your extension if it overlays chrome relative to these elements.</p>
+
+<p>For example, if you overlay some chrome before the status bar, like this:</p>
+
+<pre>&lt;vbox id="browser-bottombox"&gt;
+  &lt;something insertbefore="status-bar" /&gt;
+&lt;/vbox&gt;
+</pre>
+
+<p>Use the following technique to make your overlay work on both SeaMonkey 2 and Firefox 3:</p>
+
+<pre>&lt;window id="main-window"&gt;
+  &lt;vbox id="browser-bottombox" insertbefore="status-bar"&gt;
+    &lt;something insertbefore="status-bar" /&gt;
+  &lt;/vbox&gt;
+&lt;/window&gt;
+</pre>
+
+<h3 id="Thunderbird_3">Thunderbird 3</h3>
+
+<h4 id="gFolderDisplay_API">gFolderDisplay API</h4>
+
+<p>SeaMonkey 2.0 only supports a reduced set of methods:</p>
+
+<ul>
+ <li>selectedCount</li>
+ <li>selectedMessage</li>
+ <li>selectedMessageIsFeed</li>
+ <li>selectedMessageIsImap</li>
+ <li>selectedMessageIsNews</li>
+ <li>selectedMessageIsExternal</li>
+ <li>selectedIndices</li>
+ <li>selectedMessages</li>
+ <li>selectedMessageUris</li>
+ <li>messageDisplay</li>
+</ul>
+
+<h4 id="gMessageDisplay_API">gMessageDisplay API</h4>
+
+<p>SeaMonkey 2.0 only supports a reduced set of methods:</p>
+
+<ul>
+ <li>displayedMessage</li>
+ <li>visible</li>
+</ul>
+
+<h3 id="JavaScript_Tweaks">JavaScript Tweaks</h3>
+
+<p>Firefox supports some shorthand in various places. These are so commonly available that developers often forget that they are not built-ins. SeaMonkey on the other hand defaults to not support them so they either need to be expanded to their proper forms or matching constants/variables need to be defined in custom code.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr style="background-color: rgb(204, 255, 204);">
+   <td>Shorthand</td>
+   <td>Expansion</td>
+  </tr>
+  <tr>
+   <td>Cc</td>
+   <td>Components.classes</td>
+  </tr>
+  <tr>
+   <td>Ci</td>
+   <td>Components.interfaces</td>
+  </tr>
+  <tr>
+   <td>Cr</td>
+   <td>Components.results</td>
+  </tr>
+  <tr>
+   <td>Cu</td>
+   <td>Components.utils</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Multi-browser_compatibility">Multi-browser compatibility</h3>
+
+<p>To make an extension compatible with SeaMonkey as well as Firefox/Thunderbird, you may need to do different things depending on which application is running the extension.</p>
+
+<h4 id="In_JavaScript_code">In JavaScript code</h4>
+
+<p>You can use the following technique to detect the application:</p>
+
+<pre class="brush: js">const FIREFOX_ID = "{ec8030f7-c20a-464f-9b0e-13a3a9e97384}";
+const THUNDERBIRD_ID = "{3550f703-e582-4d05-9a08-453d09bdfdc6}";
+const SEAMONKEY_ID = "{92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}";
+var appInfo = Components.classes["@mozilla.org/xre/app-info;1"]
+                        .getService(Components.interfaces.nsIXULAppInfo);
+if(appInfo.ID == FIREFOX_ID) {
+  // running under Firefox
+} else if(appInfo.ID == THUNDERBIRD_ID) {
+  // running under Thunderbird
+} else if(appInfo.ID == SEAMONKEY_ID) {
+  // running under SeaMonkey
+} else {
+  // another app
+}</pre>
+
+<p>See <a href="/en-US/docs/Using_nsIXULAppInfo">Using nsIXULAppInfo</a> for more details.</p>
+
+<h4 id="In_manifest_file">In manifest file</h4>
+
+<p>SeaMonkey uses different overlays than other applications. You can use the application flag to select which overlay should be used with which application:</p>
+
+<pre class="brush: js"><code class="language-html">overlay chrome://browser/content/browser.xul chrome://myaddon/content/ffOverlay.xul application={ec8030f7-c20a-464f-9b0e-13a3a9e97384}
+overlay chrome://messenger/content/mailWindowOverlay.xul chrome://myaddon/content/tbOverlay.xul application={3550f703-e582-4d05-9a08-453d09bdfdc6}
+overlay </code>chrome://navigator/content/navigator.xul<code class="language-html"> chrome://myaddon/content/smOverlay.xul application=</code>{92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}</pre>
diff --git a/files/de/archive/apps/index.html b/files/de/archive/apps/index.html
new file mode 100644
index 0000000000..bd2e2cad5c
--- /dev/null
+++ b/files/de/archive/apps/index.html
@@ -0,0 +1,35 @@
+---
+title: Apps
+slug: Archive/Apps
+tags:
+  - Apps
+  - Deutsch
+  - Firefox OS
+  - Web
+translation_of: Archive/Apps
+---
+<p class="summary">Diese Seite enthält archivierten Inhalt für Apps, einschließlich veraltetem Web-App-Inhalt, Firefox OS-App-bezogenen Inhalten usw.</p>
+
+
+
+<dl>
+ <dd></dd>
+ <dt class="landingPageList"><a href="/en-US/docs/Archive/Apps/Advanced_topics">Erweiterte Themen </a>  </dt>
+ <dd class="landingPageList">Diese Artikel enthalten zusätzliche Informationen zu erweiterten Open Web Apps-Themen. Themen wie Dokumentationen zur App-Architektur, die beim Entwurf und der Implementierung offener Web-Apps hilfreich sind, und andere Dokumentationen zum Erstellen eines Geschäfts für den Verkauf und Vertrieb offener Web-Apps.  </dd>
+ <dt class="landingPageList"><a href="/en-US/docs/Archive/Apps/Reference">API-Referenz für die App-Entwicklung </a>  </dt>
+ <dd class="landingPageList">Technische Überprüfung abgeschlossen. Redaktionelle Prüfung abgeschlossen.  </dd>
+ <dt class="landingPageList"><a href="/en-US/docs/Archive/Apps/Design">Entwerfen von Open Web Apps </a>  </dt>
+ <dd class="landingPageList">Die Elemente in diesem Abschnitt gelten allgemein für das Design von Webanwendungen.  </dd>
+ <dt class="landingPageList"><a href="/en-US/docs/Archive/Apps/Graphics_and_UX">Grafiken und UX </a>  </dt>
+ <dd class="landingPageList">Beim Erstellen von Open Web Apps müssen Sie das Erscheinungsbild, die Benutzererfahrung und den Workflow Ihrer Anwendungen sehr berücksichtigen. In früheren Teilen dieses Materials haben wir uns mit der Anwendungsplanung und den flexiblen Layouts für Anwendungen befasst. In diesem Abschnitt werden wir uns sowohl mit allgemeinen Mustern als auch mit Entwurfstechniken befassen, die für Open Web Apps funktionieren, und mit bestimmten Techniken und Ressourcen, die Ihnen helfen Stellen Sie großartig aussehende Firefox OS-Apps zusammen, die der Erfahrung der Standardanwendungen des Geräts entsprechen.  </dd>
+ <dt class="landingPageList"><a href="/en-US/docs/Archive/Apps/Architecture">Öffnen Sie die Web-App-Architektur </a>  </dt>
+ <dd class="landingPageList">Apps können von dem Server, auf dem sie gehostet werden ("Self-Hosting"), oder von einem Store aus installiert werden. Mozilla startete den Firefox Marketplace 2012 in einem Testmodus für Apps. Andere App Stores von Drittanbietern sind mit dieser Architektur ebenfalls möglich. Apps können kostenlos oder kostenpflichtig sein. Stores können die Überprüfung von Einkäufen unterstützen, um sicherzustellen, dass Apps nur von Benutzern ausgeführt werden, die sie gekauft haben. Der Firefox-Marktplatz unterstützt dies.  </dd>
+ <dt class="landingPageList"><a href="/en-US/docs/Archive/Apps/Rec_Room_-Animation_and_Graphics">Aufenthaltsraum - Animation und Grafik </a>  </dt>
+ <dd class="landingPageList">Es gibt verschiedene Tools im Internet, mit denen Sie Animationen und Grafiken für Ihre Arbeit erstellen können. In diesem Artikel gehen wir auf einige dieser Optionen ein, damit Sie Ihr Projekt hervorheben können! Zum Beispiel ist CSS eine Möglichkeit, Animationen auf HTML-Elemente anzuwenden, während Chartist ein großartiges Werkzeug zum Erstellen von Diagrammen und Diagrammen ist.  </dd>
+ <dt class="landingPageList"><a href="/en-US/docs/Archive/Apps/Tools_and_frameworks">Tools und Frameworks </a>  </dt>
+ <dd class="landingPageList"></dd>
+ <dt class="landingPageList"><a href="/en-US/docs/Archive/Apps/App_validator">Überprüfen von Web-Apps mit dem App Validator </a>  </dt>
+ <dd class="landingPageList">Einige Überprüfungen, die der Validator durchführt, umfassen:
+
+ </dd>
+</dl>
diff --git a/files/de/archive/b2g_os/anwendungsentwicklung/index.html b/files/de/archive/b2g_os/anwendungsentwicklung/index.html
new file mode 100644
index 0000000000..0c09cc1103
--- /dev/null
+++ b/files/de/archive/b2g_os/anwendungsentwicklung/index.html
@@ -0,0 +1,12 @@
+---
+title: Firefox OS Anwendungsentwicklung
+slug: Archive/B2G_OS/Anwendungsentwicklung
+translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_apps_for_Firefox_OS
+---
+<p>Firefox OS apps sind nichts anderes als <a href="/en/Apps" title="https://developer.mozilla.org/en/Apps">Open Web apps</a>, die auf einem Smartphone mit Firefox OS installiert werden.</p>
+<ul>
+  <li><a href="/en/Apps/Getting_Started" title="Getting started with making apps">Erste Schritte zur App Programmierung</a></li>
+  <li><a href="/en/Mozilla/Boot_to_Gecko/Writing_a_web_app_for_B2G" title="Writing a web app">Eine Web app für Boot2Gecko erstellen</a></li>
+</ul>
+<div class="note">
+  <strong>Note:</strong> Firefox OS currently identifies using the same UA string as Firefox for Android, except without the "Android;" clause. For example: "Mozilla/5.0 (Mobile; rv:15.0) Gecko/15.0 Firefox/15.0a1".</div>
diff --git a/files/de/archive/b2g_os/api/index.html b/files/de/archive/b2g_os/api/index.html
new file mode 100644
index 0000000000..706080ff54
--- /dev/null
+++ b/files/de/archive/b2g_os/api/index.html
@@ -0,0 +1,156 @@
+---
+title: B2G OS APIs
+slug: Archive/B2G_OS/API
+tags:
+  - API
+  - B2G API
+  - NeedsTranslation
+  - TopicStub
+  - b2g os api's
+translation_of: Archive/B2G_OS/API
+---
+<p id="B2G_OS_uses_standard_Web_API's">List of B2G OS APIs </p>
+
+<p></p><div class="index">
+<span>A</span><ul>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/AudioChannelManager" title="The AudioChannelManager interface of the AudioChannels API includes features for managing your device's audio channels, including setting what channel's volume to affect when the volume buttons are pressed inside a particular app."><code>AudioChannelManager</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+</ul>
+<span>B</span><ul>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/BluetoothAdapter" title="The BluetoothAdapter interface of the Web Bluetooth API is used to handle all the operations requested by Bluetooth networks. A Bluetooth adapter is the physical interface which is used to interact with local Bluetooth device."><code>BluetoothAdapter</code> (Firefox OS)</a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/BluetoothAdapterEvent" title="The BluetoothAdapterEvent interface of the Web Bluetooth API provides access to a BluetoothAdapter object and its address as the parameter of a adapteradded or adapterremoved event handler (see BluetoothManager.onadapteradded and BluetoothManager.onadapterremoved), when fired."><code>BluetoothAdapterEvent</code> (Firefox OS)</a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/BluetoothAttributeEvent" title="The BluetoothAttributeEvent interface of the Web Bluetooth API provides access to changed attributes and their new values as the parameter of attributechanged event handlers (including BluetoothManager.onattributechanged, BluetoothAdapter.onattributechanged, and BluetoothDevice.onattributechanged), when fired."><code>BluetoothAttributeEvent</code> (Firefox OS)</a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/BluetoothClassOfDevice" title="The BluetoothClassOfDevice interface of the Web Bluetooth API provides identifying/classification information about a given remote Bluetooth device, available at discovery stage."><code>BluetoothClassOfDevice</code> (Firefox OS)</a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/BluetoothDevice" title="The BluetoothDevice interface of the Web Bluetooth API provides information regarding a given Bluetooth device."><code>BluetoothDevice</code> (Firefox OS)</a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/BluetoothDeviceEvent" title="The BluetoothDeviceEvent interface of the Web Bluetooth API provides access to a found/paired device (BluetoothDevice) object or the address or an unpaired device as the parameter of a devicefound, devicepaired or deviceunpaired event handler (see BluetoothDiscoveryHandle.ondevicefound, BluetoothAdapter.ondevicepaired, and BluetoothAdapter.ondeviceunpaired), when fired."><code>BluetoothDeviceEvent</code> (Firefox OS)</a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/BluetoothDiscoveryHandle" title="The BluetoothDiscoveryHandle interface of the Web Bluetooth API is used to notify the current application about the discovery of a remote bluetooth device."><code>BluetoothDiscoveryHandle</code> (Firefox OS)</a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/BluetoothGatt" title="The BluetoothGatt interface of the Web Bluetooth API handles initial communications and connections with Gatt services."><code>BluetoothGatt</code> (Firefox OS)</a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/BluetoothGattCharacteristic" title="The BluetoothGattCharacteristic interface of the Web Bluetooth API represents a GATT service characteristic, which includes characteristic definition, value, properties and configuration info, and a list of descriptors that provide related information."><code>BluetoothGattCharacteristic</code> (Firefox OS)</a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/BluetoothGattCharacteristicEvent" title="The BluetoothGattCharacteristicEvent interface of the Web Bluetooth API provides access to an updated BluetoothGattCharacteristic object as the parameter of the BluetoothGatt.oncharacteristicchanged, handler, when the characteristicchanged event is fired."><code>BluetoothGattCharacteristicEvent</code> (Firefox OS)</a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/BluetoothGattDescriptor" title="The BluetoothGattDescriptor interface of the Web Bluetooth API represents a GATT descriptor, which contains related information about a characteristic value."><code>BluetoothGattDescriptor</code> (Firefox OS)</a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/BluetoothGattServer" title="The BluetoothGattServer interface of the Web Bluetooth API provides Bluetooth GATT server functionality to allow creation of Bluetooth Smart/LE services and characteristics."><code>BluetoothGattServer</code> (Firefox OS)</a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/BluetoothGattService" title="The BluetoothGattService interface of the Web Bluetooth API represents a service provided by a GATT server, including the service definition, a list of referenced services, and a list of the characteristics of this service."><code>BluetoothGattService</code> (Firefox OS)</a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/BluetoothLeDeviceEvent" title="The BluetoothLeDeviceEvent interface of the Web Bluetooth API provides access to an LE device BluetoothDevice object and its RSSI value and advertisement record, as the parameter of a devicefound event handler (see BluetoothDiscoveryHandle.ondevicefound), when fired."><code>BluetoothLeDeviceEvent</code> (Firefox OS)</a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/BluetoothManager" title="The BluetoothManager interface of the Web Bluetooth API allows to access all Bluetooth adapters available on the device. Adapters are the connection interface to connect a Bluetooth device to that device."><code>BluetoothManager</code> (Firefox OS)</a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/BluetoothPairingEvent" title="The BluetoothPairingEvent interface of the Web Bluetooth API provides access to a device's name and the BluetoothPairingHandle object required for pairing devices as the parameter of pairing-related handlers (for example including BluetoothPairingListener.ondisplaypasskeyreq and BluetoothPairingListener.onenterpincodereq), when fired."><code>BluetoothPairingEvent</code> (Firefox OS)</a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/BluetoothPairingHandle" title="The BluetoothPairingHandle interface of the Web Bluetooth API contains the functionality required for completing a device pairing operation, including passkeys, and mechanisms to reply to user-entered pin codes and confirm passkeys."><code>BluetoothPairingHandle</code> (Firefox OS)</a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/BluetoothPairingListener" title="The BluetoothPairingListener interface of the Web Bluetooth API defines event handlers triggered for different pairing operations."><code>BluetoothPairingListener</code> (Firefox OS)</a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+</ul>
+<span>C</span><ul>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/CallEvent" title="The CallEvent interface of the Web Telephony API represents events related to telephone calls."><code>CallEvent</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/CameraCapabilities" title="The CameraControl.capabilities property returns a CameraCapabilities object, which describes all the camera's capabilities."><code>CameraCapabilities</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/CameraControl" title="When you use the CameraManager.getCamera() method to get a reference to a camera, you specify a callback function to be invoked on success. That function receives as a parameter a CameraControl object. You can use its methods and properties to manage and make use of the camera."><code>CameraControl</code></a></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/CameraManager" title="The CameraManager interface provides access to any cameras available on the device being used."><code>CameraManager</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/ContactManager" title="The ContactManager interface is used to access and manage the contact available on the device."><code>ContactManager</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+</ul>
+<span>D</span><ul>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/DOMApplication" title="In the Open Web apps JavaScript API, an App object is a JavaScript object that represents an app that is or could be installed in the user's app repository."><code>DOMApplication</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/DOMCursor" title="A DOMCursor object represents an ongoing operation over a list of results. It is an enhanced DOMRequest that allows to iterate through a list of results asynchronously. Each time its continue() method is called, the DOMCursor tries to reach the next result in the list and calls its result's success or error accordingly."><code>DOMCursor</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/DOMRequest" title="A DOMRequest object represents an ongoing operation. It provides callbacks that are called when the operation completes, as well as a reference to the operation's result. A DOM method that initiates an ongoing operation may return a DOMRequest object that you can use to monitor the progress of that operation."><code>DOMRequest</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/DataStore" title="The DataStore interface of the Data Store API represents a retrieved set of data, and includes standard properties for accessing the store's name, owner, etc., methods for reading, modifying and syncing data, and the onchange event handler for reacting to changes to the data."><code>DataStore</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/DataStoreChangeEvent" title="The DataStoreChangeEvent interface of the Data Store API represents the event related to a record changed in the data store, i.e. this is returned once a change is made and the change event is fired (see DataStore.onchange for the handler)."><code>DataStoreChangeEvent</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/DataStoreCursor" title="The DataStoreCursor interface of the Data Store API represents a cursor that allows apps to iterate through a list of DataStoreTask objects representing the change history of the data store, for use when synchronizing the data."><code>DataStoreCursor</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/DataStoreTask" title="The DataStoreTask interface of the Data Store API represents a record changed in the data store when a DataStoreCursor is used to iterate through the data store's change history."><code>DataStoreTask</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/DeviceStorage" title="The DeviceStorage interface is used to access files on a specific storage area available on the device. A storage area is, in essence, a file system repository even if it hides the reality of the underlying file system."><code>DeviceStorage</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/DeviceStorageChangeEvent" title="The DeviceStorageChangeEvent provides information about any change made to a file inside a given storage area. It extends the Event interface."><code>DeviceStorageChangeEvent</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+</ul>
+
+
+<span>F</span><ul>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/FMRadio" title="The WebFM API provides access to the device FM radio. This interface lets you turn the FM radio on and off and tune it to different stations. It is accessible through the navigator.mozFMRadio property."><code>FMRadio</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+</ul>
+
+
+<span>H</span><ul>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/HTMLMediaElement" title=""><code>HTMLMediaElement</code> (Firefox OS extensions)</a></span></span></li>
+</ul>
+
+
+
+
+
+
+
+
+<span>M</span><ul>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/MMICall" title="The MMICall interface of the Web Telephony API represents an MMI call, allowing us to receive the result of the call."><code>MMICall</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/MozActivity" title="The MozActivity interface allows apps to delegate an activity to another app."><code>MozActivity</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/MozActivityOptions" title="The MozActivityOptions interface allows apps to declare the activity they want to create and also to access information of activities they want to handle."><code>MozActivityOptions</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/MozActivityRequestHandler" title="The MozActivityRequestHandler interface allows apps that handle activities to access and interact with the request made by a third party app that tries to delegate an activity."><code>MozActivityRequestHandler</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/MozAlarmsManager" title="The MozAlarmsManager API allows to schedule notifications or applications to be started at a specific time."><code>MozAlarmsManager</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/MozContact" title="The MozContact interface is used to describe a single contact in the device's contact database."><code>MozContact</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/MozContactChangeEvent" title="The MozContactChangeEvent interface provides information about the contact that has changed. It inherits from the Event interface."><code>MozContactChangeEvent</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/MozIccManager" title="The MozIccManager interface gives access to ICC related functionalities."><code>MozIccManager</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/MozMmsEvent" title="The DOM MozMmsEvent represents events related to WebSMS MMS messages."><code>MozMmsEvent</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/MozMmsMessage" title="The DOM MozMmsMessage object represents an MMS message and has all the information about sender, recipient, body content, attachements, and date of the message itself."><code>MozMmsMessage</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/MozMobileCFInfo" title="The MozMobileCFInfo interface defines options used to retrieve or define call forwarding settings."><code>MozMobileCFInfo</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/MozMobileCellInfo" title="The MozMobileCellInfo interface allow to access to cell location information."><code>MozMobileCellInfo</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/MozMobileConnection" title="This API is used to get information about the current mobile voice and data connection states of the device. It is accessible through navigator.mozMobileConnections, which returns an array of MozMobileConnection objects."><code>MozMobileConnection</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/MozMobileConnectionInfo" title="The MozMobileConnectionInfo interface allows to access connection information for voice or data. The navigator.mozMobileConnection uses it through its voice and data properties."><code>MozMobileConnectionInfo</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/MozMobileCCInfo" title="The MozMobileICCInfo interface allow to access access to information stored in the device's ICC card. The navigator.mozMobileConnection uses it through its iccInfo property."><code>MozMobileICCInfo</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/MozMobileMessageManager" title="Provides support for sending and managing both MMS and SMS messages on a device with WebSMS."><code>MozMobileMessageManager</code></a></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/MozMobileMessageThread" title="The DOM MozMobileMessageThread object represents a thread of messages."><code>MozMobileMessageThread</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/MozMobileNetworkInfo" title="The MozMobileNetworkInfo interface allows access to information related to the network carrier. The navigator.mozMobileConnection uses it through its voice.network and data.network properties."><code>MozMobileNetworkInfo</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/MozNDEFRecord" title="MozNDEFRecord is a data structure that implements the NFC Data Exchange Format (NDEF). It is a standard common format for NFC-related data communication between applications, NFC tags, and devices."><code>MozNDEFRecord</code></a></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/MozNFC" title="MozNFC is the top level API for operating in NFC Reader/Writer mode, NFC P2P mode and NFC Card Emulation mode."><code>MozNFC</code></a></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/MozNFCPeer" title="The NFC implementation in Gecko follows the NFC Forum specifications."><code>MozNFCPeer</code></a></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/MozNFCTag" title="MozNFCTag contains the basic functions needed to read, write, and inspect NDEF-compatible NFC Tags."><code>MozNFCTag</code></a></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/MozNetworkStats" title="The MozNetworkStats object gives access to statistics about the data usage for a given network."><code>MozNetworkStats</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/MozNetworkStatsData" title="The MozNetworkStatsData objects represent a chunk of data usage statistics."><code>MozNetworkStatsData</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/MozNetworkStatsManager" title="The MozNetworkStatsManager interface provides methods and properties to monitor data usage."><code>MozNetworkStatsManager</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/MozPowerManager" title="The MozPowerManager interface allows to explicitly control the part of the device that uses power."><code>MozPowerManager</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/MozSettingsEvent" title="The MozSettingsEvent represents a settingchange event, providing information about a change to the value of a setting on the device. It extends the DOM Event interface."><code>MozSettingsEvent</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/MozSmsEvent" title="The DOM MozSmsEvent represents events related to WebSMS text messages."><code>MozSmsEvent</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/MozSmsFilter" title="The MozSmsFilter interface provides a way to filter out MozSmsMessage or MozMmsMessage objects through the MozMobileMessageManager.getMessages() method."><code>MozSmsFilter</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/MozSmsManager" title="Provides support for sending and managing SMS messages on a device with WebSMS."><code>MozSmsManager</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span> <span title="This is an obsolete API and is no longer guaranteed to work."><i class="icon-trash"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/MozSmsMessage" title="The DOM MozSmsMessage object represents an SMS text message and has all the information about sender, recipient, body text and date of the message itself."><code>MozSmsMessage</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/MozSmsSegmentInfo" title="The DOM MozSmsSegmentInfo interface provides information about how a string of text will be automatically split into segments. Each segment represents a single SMS of a multi-part SMS message."><code>MozSmsSegmentInfo</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/MozTimeManager" title="The MozTimeManager interface is used to set the system time on a device."><code>MozTimeManager</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/MozVoicemail" title="The MozVoicemail interface allows access to the information regarding the voicemail features available through the RIL of a Firefox OS device."><code>MozVoicemail</code></a></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/MozVoicemailEvent" title="The MozVoicemailEvent API provides access to the event information when a statuschange event is triggered."><code>MozVoicemailEvent</code></a></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/MozVoicemailStatus" title="The MozVoicemailStatus API provides access to a voicemail status."><code>MozVoicemailStatus</code></a></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/MozWakeLock" title="The MozWakeLock interface of the Wake Lock API tracks a wake lock set on any resource set on the device."><code>MozWakeLock</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/MozWifiConnectionInfoEvent" title="The MozWifiConnectionInfoEvent interface provides developers with information regarding the state of the current Wifi connection."><code>MozWifiConnectionInfoEvent</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/MozWifiP2pGroupOwner" title="The MozWifiP2pGroupOwner is an interface that represents the group owner of WiFi Direct connection."><code>MozWifiP2pGroupOwner</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/MozWifiP2pManager" title="The MozWifiP2pManager is an interface that allows to control Wi-Fi connection with other computers using Wi-Fi Direct."><code>MozWifiP2pManager</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/MozWifiStatusChangeEvent" title="The MozWifiStatusChangeEvent interface provides developers with information regarding the current status of the Wifi connection."><code>MozWifiStatusChangeEvent</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+</ul>
+<span>N</span><ul>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/Navigator" title="The Navigator interface represents the state and the identity of the user agent. It allows scripts to query it and to register themselves to carry on some activities. This page represents the list of properties and methods added to Navigator on Firefox OS devices. For the list of properties and methods available to any Web sites, consult Navigator."><code>Navigator</code> (Firefox OS extensions)</a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+</ul>
+
+
+<span>P</span><ul>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/PermissionSettings" title="The PermissionSettings interface provides ways to let the user manage all the permissions requested by all apps on a Firefox OS device."><code>PermissionSettings</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+</ul>
+
+
+
+
+<span>S</span><ul>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/SettingsLock" title="The SettingsLock interface represents a lock on settings. it allows a script to modify settings asynchronously, but in a safe way: ordering is guaranteed and the no other script will modify the settings until the modification are done (the next lock objects will start processing after it has been closed)."><code>SettingsLock</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/SettingsManager" title="Provides access to the device's settings."><code>SettingsManager</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+</ul>
+<span>T</span><ul>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/TCPServerSocket" title="The TCPServerSocket interface provides an API to handle a persistent server that will listen for incoming connections on a given port."><code>TCPServerSocket</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/TCPSocket" title="The TCPSocket interface provides access to a raw TCP socket."><code>TCPSocket</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/Telephony" title="The Telephony interface of the Web Telephony API provides support for dialing, answering, and managing phone calls on a device with telephony support."><code>Telephony</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/TelephonyCall" title="The TelephonyCall interface of the Web Telephony API represents one telephone call, providing information about the call and offering mechanisms for controlling it and detecting changes to its status."><code>TelephonyCall</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/TelephonyCallGroup" title="The TelephonyCallGroup interface of the Web Telephony API represents a multi-person/conference call, providing functions to allow callers to be added and removed from the conference call, hanging up of the entire call, and more."><code>TelephonyCallGroup</code></a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+</ul>
+<span>U</span><ul>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/UDPSocket" title=""><code>UDPSocket</code></a></span></span></li>
+</ul>
+
+
+<span>W</span><ul>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/WifiManager" title="The WifiManager API provides access to the wifi device capability."><code>WifiManager</code></a></span></span></li>
+<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Archive/B2G_OS/API/Window" title="The Window interface represents a window containing a DOM document. This page represents the list of properties and methods added to Window on Firefox OS devices. For the list of properties and methods available to any Web sites, consult Window."><code>Window</code> (Firefox OS extensions)</a></span><span class="indexListBadges"> <span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span></span></li>
+</ul>
+
+
+
+
+
+
+
+</div><p></p>
diff --git a/files/de/archive/b2g_os/api/navigator/index.html b/files/de/archive/b2g_os/api/navigator/index.html
new file mode 100644
index 0000000000..553b9dd513
--- /dev/null
+++ b/files/de/archive/b2g_os/api/navigator/index.html
@@ -0,0 +1,19 @@
+---
+title: Navigator (Firefox OS extensions)
+slug: Archive/B2G_OS/API/Navigator
+tags:
+  - API
+  - Firefox OS
+  - Interface
+  - Navigator
+  - Non-standard
+  - Reference
+translation_of: Archive/B2G_OS/API/Navigator
+---
+<p>{{APIRef("Firefox OS")}}{{Draft}}{{Non-standard_Header}}</p>
+
+<p>The <code><strong>Navigator</strong></code> interface represents the state and the identity of the user agent. It allows scripts to query it and to register themselves to carry on some activities. This page represents the list of properties and methods added to <code>Navigator</code> on Firefox OS devices. For the list of properties and methods available to any Web sites, consult <a href="/en-US/docs/Web/API/Navigator" title="The Navigator interface represents the state and the identity of the user agent. It allows scripts to query it and to register themselves to carry on some activities."><code>Navigator</code></a>.</p>
+
+<p>A <code>Navigator</code> object can be retrieved using the read-only <a href="/en-US/docs/Web/API/Window/navigator" title="The Window.navigator read-only property returns a reference to the Navigator object, which can be queried for information about the application running the script."><code>Window.navigator</code></a> property.</p>
+
+<p>{{SubpagesWithSummaries}}</p>
diff --git a/files/de/archive/b2g_os/api/navigator/requestwakelock/index.html b/files/de/archive/b2g_os/api/navigator/requestwakelock/index.html
new file mode 100644
index 0000000000..49d5275686
--- /dev/null
+++ b/files/de/archive/b2g_os/api/navigator/requestwakelock/index.html
@@ -0,0 +1,37 @@
+---
+title: Navigator.requestWakeLock()
+slug: Archive/B2G_OS/API/Navigator/requestWakeLock
+translation_of: Archive/B2G_OS/API/Navigator/requestWakeLock
+---
+<p>{{APIRef("Wake Lock API")}}{{ non-standard_header() }}</p>
+
+<p>This <code><strong>Navigator.requestWakeLock()</strong></code> method of the <a href="/en-US/docs/Web/API/Wake_Lock_API">Wake Lock API</a> is used to request a {{ domxref("MozWakeLock") }} on any resource of the device. This means that you can prevent that resource from becoming unavailable as long as your app holds a lock for that resource. For example, a voice recording app can obtain a lock to keep the screen on during recording so that it can give prover visual feedback to the user that recording is progressing.</p>
+
+<div class="note">
+<p><strong>Note:</strong> When the window that requested one or more wake locks is closed or destroyed, any wake locks it acquired are implicitly released; no manual release is necessary.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>lock</em> = window.navigator.requestWakeLock(<em>resourceName</em>);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt>resourceName</dt>
+ <dd>A string representing the name of the resource to lock. <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia">Gaia</a> uses four basic resources names: <code>screen</code>, <code>cpu</code>,  <code>wifi</code>, and <a href="/en-US/docs/Web/API/Wake_Lock_API/Keeping_the_geolocation_on_when_the_application_is_invisible">gps</a>, but any certified application can expose new resources.</dd>
+</dl>
+
+<h3 id="Value" name="Value">Return value</h3>
+
+<p>Returns a {{domxref("MozWakeLock")}} object you can use to keep track of or release the lock..</p>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<p>W3C tracks <a href="https://www.w3.org/TR/2014/NOTE-wake-lock-use-cases-20140814">Wake Lock: Use cases</a> and is working on the Editor's traft <a href="https://w3c.github.io/wake-lock">API</a>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Navigator.mozPower")}}</li>
+</ul>
diff --git a/files/de/archive/b2g_os/apps/eine_app_für_firefox_os_schreiben/index.html b/files/de/archive/b2g_os/apps/eine_app_für_firefox_os_schreiben/index.html
new file mode 100644
index 0000000000..915a3be22d
--- /dev/null
+++ b/files/de/archive/b2g_os/apps/eine_app_für_firefox_os_schreiben/index.html
@@ -0,0 +1,48 @@
+---
+title: Eine App für Firefox OS schreiben
+slug: Archive/B2G_OS/Apps/eine_app_für_firefox_os_schreiben
+tags:
+  - Apps
+  - Firefox OS
+  - Handy
+translation_of: Web/Apps/Fundamentals/Quickstart
+---
+<p>Firefox OS Apps sind Web-Apps, die in HTML, CSS und JavaScript geschrieben sind. Die App wird im Internet publiziert, wie Sie es mit jeder anderen Website auch tun. Um die Website als installierbare Web-App auf dem Gerät zu erstellen, müssen Sie die App mit einem <span id="cke_bm_77S" style="display: none;"> </span><em>manifest</em><span id="cke_bm_77E" style="display: none;"> </span> und einem <em>hock up</em>, einem Installations-Button, wie nachfolgend erläutert, versehen.<span id="cke_bm_78E" style="display: none;"> </span></p>
+<p>Die folgenden Themen können als Ausgangspunkt genutzt werden:</p>
+<ul>
+  <li><a href="/en-US/docs/Web/Apps/Getting_Started">Starten Web-Apps zu schreiben (en)</a></li>
+  <li><a href="/en-US/docs/Web/Apps/Manifest">App manifest (en)</a></li>
+</ul>
+<p>Natürlich können Sie auch tiefer in die Technologie von Web-Apps eintauchen.</p>
+<h2 id="Die_Web-App_installieren">Die Web-App installieren</h2>
+<p>Mit der App und dem <em>manifest</em> im Internet, müssen Sie es Gecko bekannt machen. Während der Installationsphase schaut Gecko nach dem <em>manifest </em>und fügt die wichtigsten Einträge dem HomeScreen u.a. hinzu.</p>
+<p>Um die App zu installieren, müssen sie die <a href="/en-US/docs/Web/API/Apps.install"><code>navigator.mozApps.install</code> API</a> aufrufen. Hier finden Sie ein Beispiel für einen Installations-Button, den Sie in ihre App einbinden können, wenn Sie sie selbst hosten.</p>
+<pre class="brush: html">&lt;button id="install"&gt;
+  Installieren Sie diese App auf Ihrem HomeScreen!
+&lt;/button&gt;
+
+&lt;script&gt;
+(function(){
+  function install(ev) {
+    ev.preventDefault();
+    // Definierung der Manifest URL
+    var manifest_url = "http://my.webapp.com/manifest.webapp";
+    // App installieren
+    var myapp = navigator.mozApps.install(manifest_url);
+    myapp.onsuccess = function(data) {
+      // App ist installiert, Entfernen-Button
+      this.parentNode.removeChild(this);
+    };
+    myapp.onerror = function() {
+      // App war noch nicht installiert, Info ist in this.error.name definiert
+      console.log('Es ist ein Fehler bei der Installation aufgetreten., error: ' + this.error.name);
+     };
+  };
+  // Ein Verweis auf den Button und Aufruf von install() beim betätigen.
+  var button = document.getElementById('install');
+  button.addEventListener('click', install, false);
+})();
+&lt;/script&gt;
+</pre>
+<p>Tipp: DenInstallations-Button können Sie auch in App-Stores, wie zum Beispiel dem <a href="/en-US/docs/Web/Apps/Publishing/Submitting_an_app">Firefox Marketplace</a>, einbinden, aber es ist oft sehr praktisch den Installations-Button auf der Startseite des Projekts zu haben.</p>
+<p>Nun besuchen Sie Ihre Website mit der Firefox OS Browser App und benutzen Sie den Installations-Button.</p>
diff --git a/files/de/archive/b2g_os/apps/index.html b/files/de/archive/b2g_os/apps/index.html
new file mode 100644
index 0000000000..6846cbffe7
--- /dev/null
+++ b/files/de/archive/b2g_os/apps/index.html
@@ -0,0 +1,50 @@
+---
+title: Apps entwickeln für Firefox OS
+slug: Archive/B2G_OS/Apps
+translation_of: Web/Apps/Fundamentals
+---
+<p>Applikationen für Firefox OS Geräte sind einfach offene Web Apps die komplett auf offenen Web Technologien basieren, wie etwa Javascript, HTML oder CSS. Unsere hauptsächliche Dokumentation erklärt Dir alles grundlegende was Du wissen musst und es gibt speziellere Artikel über das Entwickeln und das Testen von Apps für Firefox OS.</p>
+<div class="row topicpage-table">
+  <div class="section">
+    <h2 class="Documentation" id="Documentation" name="Documentation">DoKumentation und Anleitungen</h2>
+    <dl>
+      <dt>
+        <a href="/en-US/docs/Mozilla/Firefox_OS/Apps/Writing_a_web_app_for_Firefox_OS">Eine App für Firefox OS schreiben</a></dt>
+      <dd>
+        Anleitung wie Du deine eigene erste Web Applikation für Firefox OS entwickelst.</dd>
+      <dt>
+        <a href="/en-US/docs/Mozilla/Firefox_OS/UX" title="/en-US/docs/Mozilla/Firefox_OS/UX">Benutzererlebnis</a></dt>
+      <dd>
+        Leitfaden der Dir helfen soll deine Apps mit einem aufgeräumten und attraktiven Erlebnis für den Benutzer auszustatten inklusive Codebeispielen und Templates.</dd>
+      <dt>
+        <a href="/en-US/docs/Mozilla/Firefox_OS/Apps/Tips_and_techniques">Tipps und Techniken</a></dt>
+      <dd>
+        Ein Sortiment mit Tipps und Tricks (wie auch möglichen Problemlösungen) die unsere Entwickler für Dich ausgewählt haben!</dd>
+    </dl>
+    <p><span class="alllinks"><a href="/en-US/docs/tag/Apps">Alle anzeigen...</a></span></p>
+  </div>
+  <div class="section">
+    <h2 class="Community" id="Community" name="Community">Hol dir Hilfe von der Community</h2>
+    <p>Du brauchst Hilfe bei einem Problem mit deiner App und kannst keine Lösung in der Dokumentation finden?</p>
+    <ul>
+      <li>Konsultiere das Web Apps Forum: {{DiscussionList("dev-webapps", "mozilla.dev.webapps")}}</li>
+      <li>Konsultiere das Layout Forum, welches sich mit HTML und CSS beschätigt: {{ DiscussionList("dev-tech-css", "mozilla.dev.tech.layout") }}
+        <ul>
+          <li>Frage im Mozilla IRC Channel nach: <a class="link-irc" href="irc://irc.mozilla.org/openwebapps">#openwebapps</a></li>
+        </ul>
+      </li>
+    </ul>
+    <p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html">Vergiss die Netiquette nicht...</a></span></p>
+    <h2 class="Tools" id="Tools" name="Tools">Werkzeuge</h2>
+    <ul>
+      <li><span class="external">Der Firefox <a href="/en-US/docs/Tools/Debugger">Debugger</a> liefert dir Möglichkeiten deine Firefox OS Apps aus der Ferne zu debuggen</span></li>
+      <li><span class="external">Andere <a href="/en-US/docs/Tools">Entwickler Werkzeuge</a></span></li>
+    </ul>
+    <p><span class="alllinks"><a href="/en-US/docs/tag/Tools">Alle anzeigen...</a></span></p>
+    <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Weitere Themen</h2>
+    <ul>
+      <li><a href="/en-US/docs/Apps">Apps</a></li>
+    </ul>
+  </div>
+</div>
+<p> </p>
diff --git a/files/de/archive/b2g_os/arbeiten_mit_dem_b2g_desktop_client/index.html b/files/de/archive/b2g_os/arbeiten_mit_dem_b2g_desktop_client/index.html
new file mode 100644
index 0000000000..14e53a827e
--- /dev/null
+++ b/files/de/archive/b2g_os/arbeiten_mit_dem_b2g_desktop_client/index.html
@@ -0,0 +1,135 @@
+---
+title: Arbeiten mit dem B2G Desktop-Client
+slug: Archive/B2G_OS/Arbeiten_mit_dem_B2G_Desktop_Client
+translation_of: Archive/B2G_OS/Building_the_B2G_OS_simulator
+---
+<p>Der Firefox OS desktop client, auch bekannt als <em>B2G desktop client</em>, bietet die Möglichkeit an Gaia and Web apps in einer Gecko-basierten Umgebung auf dem Desktop laufen zu lassen. Dabei wird die Geräte-Hardware jedoch nicht emuliert, sodass es zum Testen von Geräte-Api nicht taugt. Auch ist es kein Ersatz um auf einem Gerät zu testen. Dennoch, hat es einige aktivierte APIs, welche nicht im Firefox verfügbar sind, wie z.B. Kontakt- und Einstellungs-API. Es kann also durchaus nützlich sein, wenn man eine Anwendung entwickelt oder während man am Gaia-Inteface direkt arbeitet. Dieser Artikel behandelt das Downloaden bzw. zusammenbauen des Firefox OS Desktop Clients, jedoch auch wie man ihn benutzt.</p>
+<div class="note">
+  <p><strong>Note:</strong> The easiest way to use the Firefox OS desktop client is to use the <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Using_Firefox_OS_simulator" title="/en-US/docs/Mozilla/Boot_to_Gecko/Using_Firefox_OS_simulator">Firefox OS Simulator</a>. It does not require you to build the desktop client yourself.</p>
+</div>
+<h2 id="Download_a_nightly_build">Download a nightly build</h2>
+<div class="note">
+  <p><strong>Note:</strong> Firefox OS version 1.0 is based on a branch of Gecko 18. There are also nightly builds based on <code>mozilla-central</code> here:<br>
+    <a href="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central/" title="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central/">http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central/</a></p>
+</div>
+<p>Just like <a href="http://nightly.mozilla.org" title="http://nightly.mozilla.org">Firefox Nightlies</a>, the Firefox OS desktop client is built every day from the latest source code. The latest build is <a href="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central/" title="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central/">available from the Mozilla FTP server</a>. Be sure to pick the latest version and the right archive for your operating system. This lets you bypass having to build it yourself. In addition, you don't have to download Gaia on your own either.</p>
+<p>Be sure to install the application in a writeable location; the application needs to be able to update included the Gaia profile.</p>
+<p>You can now skip ahead to <a href="#Running_the_desktop_client" title="#Running_the_desktop_client">Running the desktop client</a>, unless you actually want to build it for yourself.</p>
+<h2 id="Building_the_desktop_client">Building the desktop client</h2>
+<p>The first thing we need to do is set up a <a href="/En/Developer_Guide/Build_Instructions#Build_prerequisites" title="En/Developer_Guide/Build_Instructions#Build_prerequisites">standard Mozilla build environment</a>. Once we have that, we can pull down the code we'll need and configure to build the Firefox OS desktop client.</p>
+<h3 id="Downloading_the_code_for_the_first_time">Downloading the code for the first time</h3>
+<p>In a directory where we'd like the source code to go, let's clone the <code>mozilla-central</code> repository that contains all of Gecko:</p>
+<pre> hg clone http://hg.mozilla.org/mozilla-central
+</pre>
+<h3 id="Updating_the_code">Updating the code</h3>
+<p>When we do subsequent builds later, we'll want to make sure we have the latest code. Here's how to pull the latest changes:</p>
+<pre>cd mozilla-central
+hg pull -u
+</pre>
+<h3 id="Create_a_mozconfig">Create a mozconfig</h3>
+<p>Next, we need to create a <code>mozconfig</code> file in the <code>mozilla-central</code> directory to configure the build system to build the Boot to Gecko client instead of Firefox:</p>
+<pre>. "$topsrcdir/b2g/config/mozconfigs/common"
+
+mk_add_options MOZ_OBJDIR=../build
+mk_add_options MOZ_MAKE_FLAGS="-j9 -s"
+
+ac_add_options --enable-application=b2g
+ac_add_options --disable-libjpeg-turbo
+
+# This option is required if you want to be able to run Gaia's tests
+ac_add_options --enable-tests
+
+# turn on mozTelephony/mozSms interfaces
+# Only turn this line on if you actually have a dev phone
+# you want to forward to. If you get crashes at startup,
+# make sure this line is commented.
+#ac_add_options --enable-b2g-ril</pre>
+<h3 id="Building">Building</h3>
+<p>Now we're ready to build the desktop client with the following command issued from the <code>mozilla-central</code> directory:</p>
+<pre>make -f client.mk
+</pre>
+<p>The built client will be placed in the <code>../build/dist</code> directory (based on the value you specify for <code>MOZ_OBJDIR</code> in the <code>mozconfig</code> file).</p>
+<h2 id="Downloading_Gaia">Downloading Gaia</h2>
+<p>By default the desktop client will show an empty screen because it doesn't know which Web app to load initially as the system app. The collection of system apps and default apps that come with Firefox OS is called Gaia.</p>
+<p>To download Gaia for the first time, let's clone the source code repository on GitHub:</p>
+<pre>git clone https://github.com/mozilla-b2g/gaia
+cd gaia</pre>
+<p>To update an already existing clone of Gaia, we can pull in the latest changes from GitHub:</p>
+<pre>cd gaia
+git pull
+</pre>
+<h3 id="Generating_a_profile">Generating a profile</h3>
+<p>Next we need to set up Gaia's apps for the desktop client. This includes packaging the Gaia apps in the same way like they would be installed on the device, as well as setting up the permissions for the privileged system apps. We do this by generating a profile. The following command (run in the <code>gaia</code> directory) will take care of that:</p>
+<pre>DEBUG=1 make
+</pre>
+<p>This should create a <code>profile-debug</code> directory below the <code>gaia</code> directory. The new profile contains a customized extension and other configuration needed to make B2G run properly.</p>
+<h2 id="Running_the_desktop_client">Running the desktop client</h2>
+<p>Once you've built the client and downloaded Gaia (or downloaded and installed the nightly desktop application), you're ready to fire up the Firefox OS desktop client.</p>
+<h3 id="Running_on_Linux">Running on Linux</h3>
+<p>To run the desktop client on Linux using the embedded Gaia profile, just run the <code>b2g</code> executable. If you want to specify a different Gaia profile, you need to bypass the <code>b2g</code> wrapper program and run the <code>b2g-bin</code> binary. The binary is in the archive you downloaded earlier or in the <code>../build/dist/bin</code> directory if you built the client yourself.</p>
+<pre>.../b2g-bin -profile gaia/profile-debug
+</pre>
+<p>You may experience annoying rendering problems. To avoid them, add the following line to your <code>gaia/profile/user.js</code> file:</p>
+<pre>user_pref("layers.acceleration.disabled", true);
+</pre>
+<h3 id="Running_on_Mac">Running on Mac</h3>
+<p>If you downloaded the nightly build, you can simply launch it from the Finder as usual. Any console output is visible by running the standard Console utility program included with your Mac.</p>
+<p>If you want to specify a different Gaia profile, you need to bypass the <code>b2g</code> wrapper program and run the <code>b2g-bin</code> binary. The command line is slightly more complicated due to the location of the <code>b2g-bin</code> binary and the need for absolute paths when specifying the profile directory:</p>
+<pre>.../B2G.app/Contents/MacOS/b2g-bin -profile /full/path/to/gaia/profile-debug
+</pre>
+<h3 id="Running_on_Windows">Running on Windows</h3>
+<p>Running the nightly build on Windows is as simple as launching <code>b2g.exe</code>. If you want to customize the execution, you can do so by running the <code>b2g-bin.exe</code> executable instead; this bypasses the wrapper program that automatically uses the bundled Gaia.</p>
+<h2 id="Command_line_options">Command line options</h2>
+<p>There are a number of command line options you can use to adjust the runtime experience while using the desktop client. You can get a list by using the <code>-help</code> option. This section covers some of the particularly interesting ones.</p>
+<h3 id="option-screen" name="option-screen">Specifying the screen size</h3>
+<p>You can specify the screen size of the device you want to simulate using the <code>--screen</code> option:</p>
+<pre>b2g --screen=<em>&lt;width&gt;</em>x<em>&lt;height&gt;</em>[@<em>&lt;dpi&gt;</em>]</pre>
+<p>Where <em>&lt;width&gt;</em>, <em>&lt;height&gt;</em>, and <em>&lt;dpi&gt;</em> are fairly self-explanatory parameters: the width and height of the device's screen in pixels and the device resolution in DPI. For example:</p>
+<pre>b2g --screen=320x480
+b2g --screen=320x480@160
+</pre>
+<p>Optionally, you can specify certain devices by name to simulate their screen size and resolution:</p>
+<ul>
+  <li><code>iphone</code></li>
+  <li><code>ipad</code></li>
+  <li><code>nexus_s</code></li>
+  <li><code>galaxy_nexus</code></li>
+  <li><code>galaxy_tab</code></li>
+  <li><code>wildfire</code></li>
+  <li><code>tattoo</code></li>
+  <li><code>salsa</code></li>
+  <li><code>chacha</code></li>
+</ul>
+<h3 id="option-console" name="option-console">Opening the JavaScript console</h3>
+<p>You can open the JavaScript console when launching the desktop B2G client by launching it from the command line with the <code>-jsconsole</code> flag. After building, just do:</p>
+<pre>.../b2g -jsconsole -profile <em>/path/to/your/profile</em></pre>
+<p>If you've installed the nightly build on a Mac, you can do the following:</p>
+<pre>/Applications/B2G.app/Contents/MacOS/b2g-bin -jsconsole -profile <em>/path/to/your/profile-debug</em></pre>
+<div class="note">
+  <p><strong>Note:</strong> On production builds of Firefox OS, console logging (such as by {{domxref("console.log()")}}) is disabled by default. In order to enable it, open the Settings app and navigate down through Device Information-&gt;More Information-&gt;Developer, then toggle on the "Console Enabled" preference.</p>
+</div>
+<h3 id="option-runapp" name="option-runapp">Launching a specific application at startup</h3>
+<p>You can now specify an application to be launched automatically when b2g starts up in the desktop client. This is done as soon as the rest of the system is done loading up. To do this, just use the <code>--runapp</code> option, which takes as a parameter the name of the application to run. For example:</p>
+<pre> .../b2g-bin -profile <em>/path/to/your/gaia/profile-debug</em> --runapp email</pre>
+<p>Before looking for an app to launch, the specified name is normalized by converting it to all lower case and removing all dashes and spaces. This normalized name is then compared to similarly normalized names from the manifests of available apps' manifests.</p>
+<p>For example, the name of the email app is currently "E-mail", but <code>--runapp email</code> will work because of this normalization.</p>
+<p>If you specify the <code>--runapp</code> option without an argument, or with an empty argument, the b2g client will output to your terminal a list of the known applications as well as a brief usage message.</p>
+<div class="note">
+  <p><strong>Note:</strong> Using the <code>--runapp</code> option disables the lock screen as a side effect and does not re-enable it. It's assumed that you won't use this command on a profile on which you will be testing the lock screen, or you will turn it back on manually in Settings application. Feel free to contribute a patch to change this behavior if it's a problem.</p>
+</div>
+<h2 id="Usage_tips">Usage tips</h2>
+<p>This section provides a few helpful tips to using the B2G desktop client.</p>
+<ul>
+  <li>ESC key performs the same function as the "back" button.</li>
+  <li>Home key performs the same function as the "home" button; if you're on a Mac, Home key is available as Fn+← (Fn + Left Arrow).</li>
+  <li>End key performs the same function as the "power" button; if you're on a Mac, End key is available as Fn+→ (Fn + Right Arrow).</li>
+  <li>Page Up and Page Down keys perform the same function as "Volume Up" and "Volume Down" buttons respectively; if you're on a Mac, Page Up key is available as Fn+↑ (Fn + Up Arrow) and Page Down key is available as Fn+↓ (Fn + Down Arrow).</li>
+  <li>Long press to Home key opens the "Card View"; if you're on Mac, Cmd+Fn+← (Cmd + Fn + Left Arrow) opens the "Card View".</li>
+</ul>
+<h2 id="Next_steps">Next steps</h2>
+<p>Now that you have a desktop build of Boot to Gecko running, you can do testing, development, and other work in it:</p>
+<ul>
+  <li><a href="/en/Mozilla/Boot_to_Gecko/Debugging_on_Boot_to_Gecko" title="en/Mozilla/Boot_to_Gecko/Debugging_on_Boot_to_Gecko">Debugging on Boot to Gecko</a></li>
+  <li><a href="/en/Mozilla/Boot_to_Gecko/Testing_Boot_to_Gecko" title="en/Mozilla/Boot_to_Gecko/Testing_Boot_to_Gecko">Testing Boot to Gecko</a></li>
+  <li><a href="http://blog.johnford.org/desktop-b2g-include-gaia/" title="http://blog.johnford.org/desktop-b2g-include-gaia/">Desktop B2G builds now include Gaia</a></li>
+</ul>
diff --git a/files/de/archive/b2g_os/benutzung_des_app_managers/index.html b/files/de/archive/b2g_os/benutzung_des_app_managers/index.html
new file mode 100644
index 0000000000..5a03b1fb3b
--- /dev/null
+++ b/files/de/archive/b2g_os/benutzung_des_app_managers/index.html
@@ -0,0 +1,264 @@
+---
+title: Benutzung des App Managers
+slug: Archive/B2G_OS/Benutzung_des_App_Managers
+translation_of: Archive/B2G_OS/Using_the_App_Manager
+---
+<div class="summary">
+<p>Der App Manager ist ein neues Tool, das in Firefox für Desktop integriert wurde. Es stellt einige nützliche Werkzeuge zum Testen, Verteilen und Debuggen von HTML5-Webapps mit Firefox OS Smartphones und dem Firefox OS Simulator bereit, welche direkt im Browser benutzt werden können.</p>
+
+<p>Der App Manager ist an Entwickler, die Firefox OS Version 1.2 oder später entwickeln, gerichtet. Wenn Sie Apps für Firefox OS 1.1 entwickeln, werfen Sie stattdessen einen Blick auf die Dokumentation für den <a href="/de/docs/Tools/Firefox_OS_1.1_Simulator">Firefox OS Simulator 1.1</a>.</p>
+</div>
+
+<p style="text-align: center;">{{EmbedYouTube("z1Bxg1UJVf0")}}</p>
+
+<p>Der App Manager besteht aus folgenden Komponenten:</p>
+
+<ul>
+ <li>Ein <a href="#Apps_panel"><em>Apps-Panel</em></a> zur Verwaltung von lokalen Apps (Source Code ist auf dem eigenen Computer gespeichert) und Apps, die extern gehostet sind. Diese können paketiert, auf einem Gerät oder im Simulator installiert und mit Toolboxes getestet werden.</li>
+ <li>Ein <a href="#Device_panel"><em>Device-Panel</em></a>, welches Informationen über das verbundene Gerät, wie installierte Firefox OS Version, benötigte Rechte für die Benutzung der APIs auf dem Gerät und installierte Apps anzeigt.</li>
+ <li><a href="/en-US/docs/Tools_Toolbox"><em>Toolboxes</em></a>, die sich aus Komponenten der Entwickler-Werkzeuge zusammensetzen (Web-Konsole, Inspektor, Debugger, etc.) und über das Apps-Panel mit einer laufenden App verbunden werden können, um Debugging zu betreiben.</li>
+</ul>
+
+<h2 id="Schnelleinstieg"><a name="Configuring_device">Schnelleinstieg:</a></h2>
+
+<p>Dieser Abschnitt soll einen möglichst schnellen Einstieg ermöglichen. Falls genauere Erklärungen benötigt werden, überspringen Sie bitte diesen Abschnitt und lesen Sie {{ anch("Device and system configuration") }}. Bei Problemen könnte außerdem der Abschnitt {{ anch("Troubleshooting") }} weiterhelfen.</p>
+
+<ol>
+ <li>Stellen Sie sicher, dass Firefox Desktop 26+ installiert ist.</li>
+ <li>Öffnen Sie den App Manager (tippen Sie <code>about:app-manager</code> in die URL-Leiste).</li>
+ <li>Falls kein echtes Gerät mit Firefox OS zur Verfügung steht:
+  <ol>
+   <li><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/">Installieren Sie den Firefox OS Simulator</a></li>
+   <li>Klicken Sie auf <em>Start Simulator</em> in der unteren Werkzeugleiste des App Managers und anschließend auf den Namen des installierten Simulators.</li>
+  </ol>
+ </li>
+ <li>Falls Sie ein echtes Gerät besitzen:
+  <ol>
+   <li>Stellen Sie sicher, dass auf dem Gerät Firefox OS 1.2+ läuft.</li>
+   <li>Wenn Sie unter Windows arbeiten, stellen Sie sicher, dass Sie die bereitgestellten Treiber Ihres Handys installiert haben.</li>
+   <li>Deaktivieren Sie die Bildschirmsperre in den Einstellungen des Geräts (<code>Settings &gt; <code>Screen Lock) </code></code>und aktivieren Sie Remote Debugging (<code>Settings &gt; Device information &gt; More information &gt; Developer</code>).</li>
+   <li><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/">Installieren Sie das ADB Helper Add-on</a> in Firefox Desktop.</li>
+   <li>Verbinden Sie ihr Gerät über ein USB-Kabel mit dem Computer.</li>
+   <li>Der Name des Geräts sollte nun in der unteren Leiste des App Managers erscheinen. Klicken Sie den Namen an.</li>
+  </ol>
+ </li>
+ <li>Die untere Leiste sollte anzeigen "Connected to: xxx".</li>
+ <li>Klicken Sie auf das <em>Apps-Panel</em> und fügen Sie eine App hinzu (paketiert oder gehostet).</li>
+ <li>Der <em>Refresh</em>-Button validiert Ihre App und installiert sie auf dem Simulator/Gerät.</li>
+ <li>Der <em>Debug</em>-Button verbindet die Entwickler-Tools mit der laufenden App.</li>
+</ol>
+
+<h2 id="Geräte-_und_System-Konfiguration">Geräte- und System-Konfiguration</h2>
+
+<p>Bei der Benutzung des App Manager sollte man zuerst sicherstellen, dass System und Gerät korrekt konfiguriert sind. Dieser Abschnitt beschreibt alle dafür nötigen Schritte.</p>
+
+<h3 id="Firefox_1.2_wird_benötigt">Firefox 1.2+ wird benötigt</h3>
+
+<p>Stellen Sie sicher, dass auf Ihrem Gerät Firefox OS 1.2/Boot2Gecko 1.2 oder höher läuft. Die Versionsnummer von Firefox OS wird unter <code>Settings &gt; Device Information &gt; Software</code> angezeigt.</p>
+
+<p>Falls die installierte Version nicht hoch genug ist, muss je nachdem welches Gerät Sie verwenden, eine der verfügbaren Nightly-Builds von Firefox 1.2+ installiert oder eine Version selbst kompiliert werden.</p>
+
+<p>Verfügbare Builds:</p>
+
+<ul>
+ <li><a href="http://downloads.geeksphone.com/">Geeksphone Keon/Peak Builds</a> (für mehr Informationen lesen Sie <a href="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide/Updating_and_Tweaking_Geeksphone">Updating and Tweaking your Firefox OS Developer Preview phone/Geeksphone</a>).</li>
+ <li>Weitere Builds folgen später.</li>
+</ul>
+
+<div class="note">
+<p>Hinweis: Für die Erstellung eines eigenen Builds von Firefox OS 1.2+, folgen Sie den Anweisungen unter <a href="/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS">Building and installing Firefox OS</a> und starten Sie mit <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites">Firefox OS build prerequisites</a>.</p>
+</div>
+
+<h3 id="Remote-Debugging">Remote-Debugging</h3>
+
+<p>Als nächstes muss Remote Debugging in Firefox OS aktiviert werden. Navigieren Sie zu <code>Settings &gt; Device information &gt; More information &gt; Developer</code> und aktivieren Sie die Checkbox bei Remote Debugging.</p>
+
+<h3 id="Adb_Helper_Add-on" name="Adb_Helper_Add-on">ADB oder ADB Helper</h3>
+
+<p>Über die Android Debug Bridge (ADB) wird die Verbindung und Kommunikation zwischen Gerät und Computer geregelt. Es gibt zwei Möglichkeiten ADB einzusetzen:</p>
+
+<ul>
+ <li>
+  <p>Lassen Sie Firefox die Kontrolle über ADB übernehmen (empfohlen). <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/">Installieren Sie das ADB Helper Add-on</a>, welches den Vorgang vereinfacht. Auf diese Weise brauchen Sie weder ADB installieren noch den Befehl <code>adb forward</code> ausführen - alles wird automatisch vom Add-on erledigt.</p>
+  <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/" style="margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;" title="https://addons.mozilla.org">Download ADB Helper Add-on</a></li>
+ <li>Benutzen Sie ADB manuell. Hierfür muss ADB auf dem Computer installiert sein - downloaden und installieren Sie <code>adb</code> (genauer erläutert unter: <a href="/de/Firefox_OS/Debugging/Installing_ADB">Installieren von ADB</a>). Damit die Verbindung funktioniert, muss die Port-Weiterleitung mit folgendem Terminal-Befehl aktiviert werden:
+  <pre>adb forward tcp:6000 localfilesystem:/data/local/debugger-socket</pre>
+  Der Befehl muss nach jedem Neustart des Telefons oder Aus- und wieder Einstecken erneut ausgeführt werden.</li>
+</ul>
+
+<div class="note">
+<p>Achtung: Es ist nicht nötig diesen Befehl auszuführen, wenn Sie das ADB Helper Add-on installiert haben.</p>
+</div>
+
+<h2 id="Verbinden_des_Geräts_mit_dem_App_Manager">Verbinden des Geräts mit dem App Manager</h2>
+
+<p>Nachdem alles konfiguriert wurde, ist es nun an der Zeit, das Gerät mit dem Computer zu verbinden und den App Manager zu starten:</p>
+
+<ol>
+ <li>Verbinden Sie das Gerät via USB mit dem Computer.</li>
+ <li>Deaktivieren Sie Screen lock auf dem Gerät, indem Sie zu <code>Settings &gt; Screen Lock</code> navigieren und die Checkbox bei <code>Lock Screen</code> deaktivieren. Dieses Vorgehen ist sehr ratsam, da die Verbindung abbricht, sobald sich die Bildschirmsperre aktiviert.</li>
+ <li>Starten Sie den App Manager — klicken Sie in der Menüleiste von Firefox Desktop <code>Extras &gt; Web-Entwickler &gt; App Manager</code> an oder tippen Sie <code>about:app-manager</code> in die URL-Leiste.</li>
+ <li>An der Unterseite des App Manager Tabs sehen Sie nun eine Anzeige für den Verbindungsstatus (siehe Screenshot unten). Es sollte nun möglich sein das Gerät durch einen Klick auf den "Connect to localhost:6000" Button zu verbinden.</li>
+ <li>Falls die Verbindung erfolgreich hergestellt wurde, erscheint eine Frage auf dem Gerät: "An incoming request to permit remote debugging connection was detected. Allow connection?". Bestätigen Sie mit dem OK-Button (evtl. müssen Sie den Power-Button am Gerät betätigen, damit Sie die Frage sehen können). Der Verbindungsstatus in der Leiste sollte dann "Connected to B2G" und einen Disconnect-Button zum Abbruch der Verbindung anzeigen.</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6263/connection-status.png" style="display: block; height: 30px; margin: 0px auto; width: 600px;"></p>
+
+<div class="note">
+<p>Die anderen Bedienelemente in der Verbindungstatus-Leiste ermöglichen die Verbindung eines Simulators mit dem App Manager. Dies wird im nächsten Abschnitt behandelt, wobei der Port für die Verbindung geändert wird. Wenn der Port gewechselt wird, muss auch Portweiterleitung für diesen Port aktiviert werden, wie unter {{anch("Enable port forwarding")}} beschrieben.</p>
+</div>
+
+<h2 id="Firefox_OS_Simulator_Add-on"><a name="Simulator">Firefox OS Simulator Add-on</a></h2>
+
+<p>Steht kein echtes Gerät zur Verfügung, das mit dem App Manager benutzt werden kann, kann es dennoch zusammen einem Firefox OS Simulator Add-on ausprobiert werden. Installieren Sie hierzu einen Simulator, passend für Ihr Betriebssystem (mehrere Versionen verfügbar, es ist ratsam alle zu installieren, für maximale Flexibilität):</p>
+
+<p><a class="download-button external ignore-external" href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/" rel="noopener">Simulator installieren</a></p>
+
+
+<p>Nach der Installation des Simulators/der Simulatoren gehen Sie auf about:app-manager und klicken Sie in der Verbindungsstatus-Leiste unten den "Start Simulator"-Button. Daraufhin erscheinen drei weitere Buttons:</p>
+
+<ul>
+ <li>"Firefox OS 1.2" ... etc (oder ähnliches): Der Button ganz links zeigt den Namen der installieten Version des Simulators an. Klicken Sie hier, um die Verbindung mit dem Simulator aufzubauen.</li>
+ <li>"Add": der mittlere Button verweist auf die Links zur Installation der Simulatoren in diesem Artikel zum Hinzufügen neuer Simulatoren (Firefox OS 1.2, Firefox OS 1.3, ...).</li>
+ <li>"Cancel": Der Button mit der rechten Hand bricht die Verbindung ab.</li>
+</ul>
+
+<h2 id="Apps-Panel"><a name="Apps_panel">Apps-Panel</a></h2>
+
+<p>Da nun alles soweit funktionert, wird nun die Funktionalität des App Managers beschrieben, beginnend mit dem Apps Panel. Von hier aus können Sie eine bereits existierende App importieren, auf Ihr Gerät übertragen und debuggen:</p>
+
+<ul>
+ <li>Für die Installation einer lokalen App, klicken Sie auf das Plus neben "Add Packaged App"-Label und wählen Sie über den Datei-Auswahldialog den Ordner aus, in dem die App gespeichert ist.</li>
+ <li>Um eine extern gehostete App zu installieren, geben Sie die vollständige URL zur Manifest-Datei der App in das Textfeld in der "Add Hosted App" Box ein und klicken Sie den Plus-Button.</li>
+</ul>
+
+<p>Ist dieser Schritt gelungen, sollten auf der rechten Seite des Fensters Informationen über die App angezeigt werden:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6261/apps-panel.png" style="display: block; height: 375px; margin: 0px auto; width: 600px;"></p>
+
+<h3 id="Manifest_Editor">Manifest Editor</h3>
+
+<p>Mit Firefox 28 und später findet sich im Apps Panel ein Editor für das App-Manifest:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6613/apps-panel-fx-28.png" style="display: block; margin: 0px auto; width: 600px;"></p>
+
+<h3 id="Debugging">Debugging</h3>
+
+<p>Ein Klick auf <em>"Update"</em> überträgt (installiert) die App auf das Gerät. Mit einem Klick auf <em>"Debug"</em>  wird eine Toolbox mit der App verbunden, womit die App getestet werden kann:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6265/debug.png" style="display: block; height: 375px; margin: 0px auto; width: 600px;"></p>
+
+<div class="note">
+<p>Anmerkung: Es wird Ihnen gefallen mit der Toolbox herumzuspielen - ändern Sie den DOM, CSS etc. und Sie werden sehen, dass die Änderung in Echtzeit auf dem Gerät ablaufen. Die Änderungen werden im Code der installierten App gespeichert und beim nächsten Öffnen der App auf dem Gerät wieder angezeigt.</p>
+</div>
+
+<p>Before Firefox 28, the tools are launched in a separate window. From Firefox 28 onwards, the tools are launched in a separate tab in the App Manager itself, alongside the Apps and Device tabs. The tab is given your app's icon so it's easy to find:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6615/toolbox-fx-28.png" style="display: block; height: 375px; margin: 0px auto; width: 600px;"></p>
+
+<h3 id="Fehler">Fehler</h3>
+
+<p>Falls eine App nicht erfolgreich hinzugefügt werden konnte - zum Beispiel weil die angegebene URL nicht korrekt ist oder ein gepackter App-Ordner ausgewählt wurde - wird dennoch ein Eintrag für die App hinzugefügt, dieser enthält jedoch Fehlermeldungen.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6259/apps-error.png" style="display: block; height: 375px; margin: 0px auto; width: 600px;"></p>
+
+<p>Bei dieser Ansicht ist es auch möglich, eine installierte App zu deinstallieren. Halten Sie hierfür den Mauszeiger über den Namen oder die Beschreibung der jeweiligen App auf der linken Seite und klicken Sie den X-Button an. Die App wird dadurch jedoch nicht vom Gerät entfernt. Um dies zu tun, muss das Gerät selbst benutzt werden.</p>
+
+<h2 id="Device-Panel"><a name="Device_panel">Device-Panel</a></h2>
+
+<p>Im Tab unter <em>Device</em> werden Informationen zum verbundenen Gerät angezeigt. Von dem Fenster "Installed Apps" aus können die Apps auf dem Gerät gestartet und gedebuggt werden.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6267/device-tab.png" style="display: block; height: 375px; margin: 0px auto; width: 600px;"></p>
+
+<div class="note">
+<p>Anmerkung: Zertifizierte Apps werden standardmäßig nicht aufgelistet. <a href="#Debugging_Certified_Apps">Weitere Informationen zum Debuggen von zertifizierten Apps</a>.</p>
+</div>
+
+<p>Das Fenster "Permissions" zeigt die benötigten Rechte für verschiedene <a href="/en-US/docs/WebAPI">Web-APIs</a> des Geräts:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6269/permissions.png" style="display: block; height: 375px; margin: 0px auto; width: 600px;"></p>
+
+<p>Abschließend können Sie einen Screenshot mit dem Bildschirminhalt des Geräts erstellen, indem Sie den Screenshot-Button anklicken. Der Screenshot wird dann in einem neuen Tab in Firefox geöffnet und kann von dort aus gespeichert oder verworfen werden.</p>
+
+<h2 id="Debuggen_von_zertifizierten_Apps"><a name="Debugging_Certified_Apps">Debuggen von zertifizierten Apps</a></h2>
+
+<p>Bis dato können nur Geräte, welche mit einem Development-Build von Firefox OS 1.2 laufen, für das Debuggen von zertifizierten Apps benutzt werden. Falls auf ihrem Gerät ein Development-Build installiert ist, können Sie das Debuggen von zertifzierten Apps erlauben, indem Sie die Einstellung <code>devtools.debugger.forbid-certified-apps</code> in ihrem Firefox-Profil auf <code>false</code> setzen. Gehen sie hierfür wie folgt vor:</p>
+
+<ol>
+ <li>
+  <p>Geben Sie auf ihrem Computer den folgenden Befehl in ein Terminal/Konsole ein, um über die Shell auf das Dateisystem des Geräts zuzugreifen:</p>
+
+  <pre class="brush: bash">adb shell</pre>
+
+  <p>Daraufhin sollte sich der Prompt zu <code>root@android </code>ändern.</p>
+ </li>
+ <li>
+  <p>Als nächstes stoppen sie B2G mit dem Befehl:</p>
+
+  <pre class="brush: bash">stop b2g</pre>
+ </li>
+ <li>
+  <p>Wechseln Sie mit folgenden Befehl zum Profilordner:</p>
+
+  <pre>cd /data/b2g/mozilla/*.default/</pre>
+ </li>
+ <li>
+  <p>Und fügen Sie mit folgendem Befehl eine Zeile für die Einstellung in die Datei prefs.js ein:</p>
+
+  <pre class="brush: js">echo 'user_pref("devtools.debugger.forbid-certified-apps", false);' &gt;&gt; prefs.js</pre>
+ </li>
+ <li>
+  <p>Nachdem die Datei bearbeitet und gespeichert wurde, starten Sie B2G erneut:</p>
+
+  <pre class="brush: bash">start b2g</pre>
+ </li>
+ <li>
+  <p>Verlassen Sie das Android-Dateisystem mit der Eingabe des Befehls <code>exit</code>. Damit kehren Sie zum normalen Terminal-Prompt zurück.</p>
+ </li>
+ <li>
+  <p>Stellen Sie nun eine Verbindung mit dem App Manger her. Die zertifizierten Apps sollten nun angezeigt werden.</p>
+ </li>
+</ol>
+
+<div class="note">
+<p>Anmerkung: Falls Sie diese Einstellung ihrem Gaia build hinzufügen möchten, sodass sie aktiv ist auch wenn ihr Telefon zurückgesetzt wird, fügen Sie die Einstellung in der Datei <code>build/custom-prefs.js</code> hinzu und führen Sie <code>make reset-gaia</code> aus.</p>
+</div>
+
+<h2 id="Running_custom_builds_in_the_App_Manager">Running custom builds in the App Manager</h2>
+
+<p>You can run custom B2G Desktop and Gaia builds in the App Manager via the simulator. Read <a href="https://developer.mozilla.org/en-US/Firefox_OS/Running_custom_builds_in_the_App_Manager">Running custom Firefox OS/Gaia builds in the App Manager</a> for more details.</p>
+
+<h2 id="Fehlerbehandlung"><a name="Troubleshooting">Fehlerbehandlung</a></h2>
+
+<p id="My_device_is_not_recognized">Falls das Gerät nicht gefunden wird:</p>
+
+<ul>
+ <li>Lesen Sie den Abschnitt <a href="#Configuring_device">Device and system configuration</a> sorgfältig und überprüfen Sie, ob alle Schritte korrekt durchgeführt wurden:</li>
+ <li>Läuft auf dem Gerät mindestens Firefox OS 1.2?</li>
+ <li>Fehlen Apps? Ist <a href="https://developer.mozilla.org/de/docs/Mozilla/Firefox_OS/Benutzung_des_App_Managers#Debugging_Certified_Apps">Debuggen von zertifizierten Apps</a> aktiviert?</li>
+ <li>Ist "Remote Debugging" in den Einstellungen des Telefons aktiviert?</li>
+ <li>Falls Sie das <a href="#Adb_Helper_Add-on">ADB Helper add-on</a> nicht verwenden:
+  <ul>
+   <li>Wurde der Befehl <code>adb forward</code> erfolgreich ausgeführt?</li>
+  </ul>
+ </li>
+ <li>Falls Sie das <a href="#Adb_Helper_Add-on">ADB Helper add-on</a> verwenden und das Gerät in der unteren Leiste nicht angezeigt wird:
+  <ul>
+   <li>Falls Sie Linux als Betriebssystem einsetzen, vergewissern Sie sich<a href="http://developer.android.com/tools/device.html#setting-up"> dass udev korrekt konfiguriert ist.</a></li>
+   <li>Falls Sie Windows als Betriebssystem einsetzen, <a href="http://developer.android.com/tools/device.html#setting-up">stellen Sie sicher, dass die benötigten Treiber installiert sind.</a></li>
+  </ul>
+ </li>
+ <li>You can also enable verbose logging to gather diagnostics:
+  <ul>
+   <li>Use about:config to set the pref "<span class="message"><span class="content"><span class="email">extensions.adbhelper@mozilla.org.sdk</span>.console.logLevel"</span></span> to the string value "all"</li>
+   <li>Disable and re-enable the ADB Helper add-on from the add-ons manager, or restart Firefox</li>
+   <li>Open the App Manager again</li>
+   <li>In the <a href="https://developer.mozilla.org/docs/Tools/Browser_Console">Browser Console</a>, you should now see additional output lines that mention "adbhelper"</li>
+   <li>If you see them but aren't sure what they mean, stop by the <a href="https://wiki.mozilla.org/DevTools/GetInvolved#Communication">#devtools room on IRC</a> or <a href="https://bugzilla.mozilla.org/enter_bug.cgi?alias=&amp;assigned_to=nobody%40mozilla.org&amp;attach_text=&amp;blocked=&amp;bug_file_loc=http%3A%2F%2F&amp;bug_ignored=0&amp;bug_severity=normal&amp;bug_status=NEW&amp;cf_blocking_b2g=---&amp;cf_crash_signature=&amp;cf_status_b2g18=---&amp;cf_status_b2g_1_1_hd=---&amp;cf_status_b2g_1_2=---&amp;cf_status_firefox24=---&amp;cf_status_firefox25=---&amp;cf_status_firefox26=---&amp;cf_status_firefox27=---&amp;cf_status_firefox_esr17=---&amp;cf_status_firefox_esr24=---&amp;cf_tracking_b2g18=---&amp;cf_tracking_firefox24=---&amp;cf_tracking_firefox25=---&amp;cf_tracking_firefox26=---&amp;cf_tracking_firefox27=---&amp;cf_tracking_firefox_esr17=---&amp;cf_tracking_firefox_esr24=---&amp;cf_tracking_firefox_relnote=---&amp;cf_tracking_relnote_b2g=---&amp;comment=&amp;component=Developer%20Tools%3A%20App%20Manager&amp;contenttypeentry=&amp;contenttypemethod=autodetect&amp;contenttypeselection=text%2Fplain&amp;data=&amp;defined_groups=1&amp;dependson=&amp;description=&amp;flag_type-203=X&amp;flag_type-37=X&amp;flag_type-41=X&amp;flag_type-5=X&amp;flag_type-607=X&amp;flag_type-720=X&amp;flag_type-721=X&amp;flag_type-737=X&amp;flag_type-748=X&amp;flag_type-781=X&amp;flag_type-787=X&amp;flag_type-791=X&amp;flag_type-799=X&amp;flag_type-800=X&amp;flag_type-802=X&amp;flag_type-803=X&amp;flag_type-809=X&amp;flag_type-825=X&amp;form_name=enter_bug&amp;keywords=&amp;maketemplate=Remember%20values%20as%20bookmarkable%20template&amp;op_sys=All&amp;priority=--&amp;product=Firefox&amp;qa_contact=developer.tools%40firefox.bugs&amp;rep_platform=x86&amp;requestee_type-203=&amp;requestee_type-41=&amp;requestee_type-5=&amp;requestee_type-607=&amp;requestee_type-748=&amp;requestee_type-781=&amp;requestee_type-787=&amp;requestee_type-791=&amp;requestee_type-800=&amp;short_desc=&amp;status_whiteboard=&amp;target_milestone=---&amp;version=Trunk">file a bug</a> with the log output</li>
+  </ul>
+ </li>
+ <li>See <strong>"???????"</strong> instead of the device name on Linux? You have permissions issues. <a href="http://developer.android.com/tools/device.html#setting-up">Make sure to setup udev correctly</a>.</li>
+ <li>Ist die Bildschirmsperre deaktiviert?</li>
+</ul>
+
+<p>Die Verbindung des Geräts mit dem App Manager funktioniert nicht oder der Simulator kann nicht gestartet werden? <a href="https://wiki.mozilla.org/DevTools/GetInvolved#Communication">Lassen Sie es uns wissen </a>oder <a href="https://bugzilla.mozilla.org/enter_bug.cgi?alias=&amp;assigned_to=nobody%40mozilla.org&amp;attach_text=&amp;blocked=&amp;bug_file_loc=http%3A%2F%2F&amp;bug_ignored=0&amp;bug_severity=normal&amp;bug_status=NEW&amp;cf_blocking_b2g=---&amp;cf_crash_signature=&amp;cf_status_b2g18=---&amp;cf_status_b2g_1_1_hd=---&amp;cf_status_b2g_1_2=---&amp;cf_status_firefox24=---&amp;cf_status_firefox25=---&amp;cf_status_firefox26=---&amp;cf_status_firefox27=---&amp;cf_status_firefox_esr17=---&amp;cf_status_firefox_esr24=---&amp;cf_tracking_b2g18=---&amp;cf_tracking_firefox24=---&amp;cf_tracking_firefox25=---&amp;cf_tracking_firefox26=---&amp;cf_tracking_firefox27=---&amp;cf_tracking_firefox_esr17=---&amp;cf_tracking_firefox_esr24=---&amp;cf_tracking_firefox_relnote=---&amp;cf_tracking_relnote_b2g=---&amp;comment=&amp;component=Developer%20Tools%3A%20App%20Manager&amp;contenttypeentry=&amp;contenttypemethod=autodetect&amp;contenttypeselection=text%2Fplain&amp;data=&amp;defined_groups=1&amp;dependson=&amp;description=&amp;flag_type-203=X&amp;flag_type-37=X&amp;flag_type-41=X&amp;flag_type-5=X&amp;flag_type-607=X&amp;flag_type-720=X&amp;flag_type-721=X&amp;flag_type-737=X&amp;flag_type-748=X&amp;flag_type-781=X&amp;flag_type-787=X&amp;flag_type-791=X&amp;flag_type-799=X&amp;flag_type-800=X&amp;flag_type-802=X&amp;flag_type-803=X&amp;flag_type-809=X&amp;flag_type-825=X&amp;form_name=enter_bug&amp;keywords=&amp;maketemplate=Remember%20values%20as%20bookmarkable%20template&amp;op_sys=All&amp;priority=--&amp;product=Firefox&amp;qa_contact=developer.tools%40firefox.bugs&amp;rep_platform=x86&amp;requestee_type-203=&amp;requestee_type-41=&amp;requestee_type-5=&amp;requestee_type-607=&amp;requestee_type-748=&amp;requestee_type-781=&amp;requestee_type-787=&amp;requestee_type-791=&amp;requestee_type-800=&amp;short_desc=&amp;status_whiteboard=&amp;target_milestone=---&amp;version=Trunk">schreiben Sie einen Bugreport</a>.</p>
diff --git a/files/de/archive/b2g_os/building/index.html b/files/de/archive/b2g_os/building/index.html
new file mode 100644
index 0000000000..3b0c91142b
--- /dev/null
+++ b/files/de/archive/b2g_os/building/index.html
@@ -0,0 +1,268 @@
+---
+title: Building Firefox OS
+slug: Archive/B2G_OS/Building
+translation_of: Archive/B2G_OS/Building
+---
+<div>
+ </div>
+<div class="summary">
+ <p>Once you've <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites" title="Mozilla/Firefox_OS/Firefox_OS_build_prerequisites">set up your build system</a> and performed your <a href="/en-US/docs/Mozilla/Firefox_OS/Preparing_for_your_first_B2G_build" title="Mozilla/Firefox_OS/Preparing_for_your_first_B2G_build">initial pull and configure</a> of the code, you can build Boot to Gecko. This guide explains how.</p>
+</div>
+<h2 id="Updating_your_code">Updating your code</h2>
+<p>If this isn't your very first time building B2G, you might want to pull the latest code before you start to build. To do that, you should update both the B2G tools and the dependencies, using the following two commands:</p>
+<pre>git pull
+./repo sync -d
+</pre>
+<p>The -d option switches the various projects HEAD back to their Android manifest revision (i.e the default mainstream repository version). It is helpful if you made modifications to the repos (and have associated source changes) but you want to revert back to the master version temporarily. It will indeed leave your staged or working directory changes untouched (see <a href="http://stackoverflow.com/questions/11448864/what-is-the-usage-for-repo-sync-d-in-android-source-repository">the following SO question</a> for the full explanation). If you did not touch the source code, you can use the normal command:</p>
+<pre>git pull
+./repo sync</pre>
+<p>You can update a specific make target's repository by specifying its name:</p>
+<pre>./repo sync gaia
+</pre>
+<p>The repo command has other options available that might be interesting; <code>repo help</code> will give you a lot of information.</p>
+<h2 id="Building">Building</h2>
+<div class="note">
+ <p><strong>Note:</strong> Before building, you may want to set up a <code>.userconfig</code> file to customize the build. See <a href="/en-US/docs/Mozilla/Firefox_OS/Customization_with_the_.userconfig_file" title="Mozilla/Firefox_OS/Customization_with_the_.userconfig_file">Customization with the .userconfig file</a> for details.</p>
+</div>
+<p>To build Boot to Gecko, simply use the <code>build.sh</code> tool:</p>
+<pre>cd B2G
+./build.sh
+</pre>
+<p>Time for another coffee break, or possibly a nap (especially if this is your first build, it takes about 30 min on a Core i7 with 8GB of RAM). As in the configure step on the previous page, if you are using a directory of previously-extracted Android system files, you should set <code>ANDROIDFS_DIR</code> before running <code>build.sh</code>.</p>
+<div class="note">
+ <p><strong>Note</strong>: For more instructions on flashing your new build to a phone, read <a href="/en-US/Firefox_OS/Installing_on_a_mobile_device">Installing Firefox OS on a mobile device</a>.</p>
+</div>
+<h3 id="Building_specific_modules">Building specific modules</h3>
+<p>If you want to build just a particular module, such as Gecko, you can specify it by name:</p>
+<pre>./build.sh gecko
+</pre>
+<p>In order to refresh only one application, you can build only <code>gaia</code> module by using the <code>BUILD_APP_NAME</code> environment variable:</p>
+<pre>BUILD_APP_NAME=calendar ./build.sh gaia</pre>
+<p>To get a list of the modules you can build, you can do:</p>
+<pre>./build.sh modules
+</pre>
+<h3 id="Setting_the_number_of_processor_cores_to_use">Setting the number of processor cores to use</h3>
+<p>By default, the B2G build scripts use the number of cores your system has plus two as the number of parallel tasks to run. You can change this by specifying the <code>-j</code> parameter when running <code>build.sh</code>. This can be handy if you're using your system for other things while building in the background and need to reduce CPU load a bit. It's also handy when you're having build problems, as it can make reading error output from the build process easier if you have just one task going at a time!</p>
+<p>For example, to build using just two parallel tasks:</p>
+<pre>./build.sh -j2
+</pre>
+<p>The most common use case for this, however, is to prevent builds from running in parallel at all. This makes the output of the process much easier to read, making it easier to sort out build problems. To do this:</p>
+<pre>./build.sh -j1
+</pre>
+<h3 id="Building_multilocale">Building multilocale</h3>
+<p>To create a multilocale build, do the following:</p>
+<h4 id="Gaia">Gaia</h4>
+<ol>
+ <li>Determine which Gaia languages file to use. We're currently using <a href="https://github.com/mozilla-b2g/gaia/blob/master/locales/languages_dev.json"><code>locales/languages_dev.json</code></a> and <a href="https://github.com/mozilla-b2g/gaia/blob/master/locales/languages_all.json"><code>locales/languages_all.json</code></a> as our Gaia languages files.</li>
+ <li>Clone the appropriate locales from <a href="http://hg.mozilla.org/gaia-l10n">http://hg.mozilla.org/gaia-l10n</a> into a directory; we use <code>gaia-l10n/</code>. You could use the <code>locales/</code> directory . You'll need to clone a repo for each locale listed in the languages file.</li>
+ <li>In your environment, set <code>LOCALE_BASEDIR</code> to the absolute path of the directory in step 2. Set <code>LOCALES_FILE</code> to the absolute path of the file in step 1.</li>
+ <li>Also, you can set a <code>GAIA_DEFAULT_LOCALE</code> if you want to set a default locale.</li>
+</ol>
+<pre style="font-size: 12px;">cd gaia/locales/
+hg clone https://hg.mozilla.org/releases/gaia-l10n/v1_2/es</pre>
+<div>
+ Set your environment variables:</div>
+<div>
+  </div>
+<pre>export LOCALE_BASEDIR=$PWD/locales
+export LOCALES_FILE=$PWD/locales/languages_dev.json
+export GAIA_DEFAULT_LOCALE=es
+</pre>
+<p>And the <code>languages-dev.json</code> could be replaced by your own <code>languages-own.json</code> path, which could formed like this. <span style="line-height: 1.5;">You would need to add an entry per each repo cloned in your locales directory.</span><span style="line-height: 1.5;">:</span></p>
+<pre>{
+  "en-US"     : "English (US)",
+  "es"        : "Español"
+}
+</pre>
+<div>
+ <p>Since bug 884752 landed (November 2013), to add keyboard layouts (if available in Gaia), you can use parameter GAIA_KEYBOARD_LAYOUTS. </p>
+ <p>Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=884752</p>
+ <p>Layouts: https://github.com/mozilla-b2g/gaia/tree/v1.2/keyboard/layouts</p>
+ <p>For example, to add Spanish and Italian keyboard layout, run the previous command adding</p>
+ <pre>  GAIA_KEYBOARD_LAYOUTS=en,es,it</pre>
+ <p><span style="line-height: 1.5;">At this point you're ready to flash Gaia to the phone for the first time. Connect the phone and make sure Remote Debugging is checked in Settings &gt; Device Information &gt; More Information &gt; Developer.  You only need to do this once, for your own build of Gaia will have that pref turned on thanks to REMOTE_DEBUGGER=1:</span></p>
+ <pre> make clean &amp;&amp; make production LOCALES_FILE=locales/languages-own.json</pre>
+ <div class="note">
+  <p>If you want to clone and/or update all supported locales for a particular branch, you can use <a href="https://gist.github.com/TheoChevalier/254461892d8bf118e1bc">this script</a></p>
+ </div>
+ <h4 id="Gecko">Gecko</h4>
+ <ol>
+  <li>Determine which Gecko languages file to use. We're currently using <a href="http://hg.mozilla.org/releases/mozilla-b2g18/file/default/b2g/locales/all-locales">b2g/locales/all-locales</a> as our Gecko languages file.</li>
+  <li>Clone the appropriate locales into a directory; this can be <code>gecko-l10n/</code> .
+   <ul>
+    <li>For mozilla-central, use <a href="http://hg.mozilla.org/l10n-central/">http://hg.mozilla.org/l10n-central/</a></li>
+    <li>For mozilla-aurora, use <a href="http://hg.mozilla.org/releases/l10n/mozilla-aurora/">http://hg.mozilla.org/releases/l10n/mozilla-aurora/</a></li>
+    <li>For mozilla-beta or mozilla-b2g18 or mozilla-b2g26_v1_2, use <a href="http://hg.mozilla.org/releases/l10n/mozilla-beta/">http://hg.mozilla.org/releases/l10n/mozilla-beta/</a></li>
+   </ul>
+  </li>
+  <li>Clone <a href="http://hg.mozilla.org/build/compare-locales">compare-locales</a>.</li>
+  <li>
+   <p>In your environment, set <code>L10NBASEDIR</code> to the absolute path of the directory in step 2. Set <code>MOZ_CHROME_MULTILOCALE</code> to a string of space-delimited locales from step 1.</p>
+   <p>Add the <code>compare-locales/scripts</code> dir to your <code>PATH</code>, and <code>compare-locales/lib</code> to your <code>PYTHONPATH</code>.</p>
+   For instance,
+   <pre>export L10NBASEDIR=$PWD/gecko-l10n
+export MOZ_CHROME_MULTILOCALE="ja zh-TW"
+export PATH="$PATH:$PWD/compare-locales/scripts"
+export PYTHONPATH="$PWD/compare-locales/lib"
+</pre>
+   <p>Once you have the above set up, you can run build.sh.</p>
+   <p>You can <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=818560#c9/">use .userconfig</a> as well:</p>
+   <pre>## Gaia
+export GAIA_DEFAULT_LOCALE=es
+export LOCALE_BASEDIR=/b2g/gaia-l10n-transifex-v1.2/
+export LOCALES_FILE=/b2g/languages_propio.json
+
+## Gecko
+export L10NBASEDIR='/b2g/gecko-l10n-v1.2'
+export MOZ_CHROME_MULTILOCALE="es-ES eu ca gl pt-BR"
+export PATH="$PATH:/b2g/compare-locales/scripts"
+export PYTHONPATH="/b2g/compare-locales/lib"
+  </pre>
+  </li>
+ </ol>
+ <div class="note">
+  <p>There are some mappings between Gaia languages and Gecko ones. For example, in Gaia, Spanish is "es", but on Gecko is tranlated to "Spanish of Spain" (es-ES)</p>
+ </div>
+ <p>These instructions may change as we smooth things out.</p>
+ <h2 id="Known_errors">Known errors</h2>
+ <h3 id="Build_failed!">"Build failed!"</h3>
+ <p><span id="cke_bm_81S" style="display: none;"> </span>If you get a general "Build failed" message, you should always try reconnecting your phone to your computer; sometimes the phone can become unmounted for a variety of reasons.</p>
+ <div class="note">
+  <p><strong>Note that configuring and building B2G for Keon DOESN'T WORK on Mac</strong>. You'll need to use Linux to build for this device.<span id="cke_bm_81E" style="display: none;"> </span></p>
+ </div>
+ <h3 id="Mountain_Lion-specific_build_errors">Mountain Lion-specific build errors</h3>
+ <div>
+  <p>1. If you are building on OS X 10.8 "Mountain Lion" (Xcode 4.4.1 or later) and encounter the following error:</p>
+  <pre style="font-size: 14px;">external/qemu/android/skin/trackball.c:130:25: error: 'M_PI' undeclared (first use in this function)</pre>
+  Edit the file: <code style="font-size: 14px;">B2G/external/qemu/Makefile.android</code> and add in line 78:<br>
+  <pre style="font-size: 14px;">MY_CFLAGS += -DM_PI=3.14159265358979323846264338327950288   #/* B2G_fix: not finding M_PI constant */
+</pre>
+ </div>
+ <div>
+  2. If you are on Mountain Lion and you receive an error during ./build.sh like:</div>
+ <div>
+  <pre>/System/Library/Frameworks/IOKit.framework/Headers/usb/USB.h:797:9: error: too many #pragma options align=reset</pre>
+  <p>Replace all instances of '#pragma options align=reset' with '#pragma pack()' inside /System/Library/Frameworks/IOKit.framework/Headers/usb/USB.h</p>
+ </div>
+ <h3 id="Undefined_symbols__sqlite3_androidopt_handle_pragma_and__sqlite3_androidopt_open">Undefined symbols "_sqlite3_androidopt_handle_pragma" and "_sqlite3_androidopt_open"</h3>
+ <p>This error appears if you are building on OS X 10.7 or newer with Xcode 4.5 or newer. To fix this, apply the patch at <a href="https://groups.google.com/forum/#!msg/android-building/yAfPyUqCsiQ/7zvICk4GWjYJ">https://groups.google.com/forum/#!msg/android-building/yAfPyUqCsiQ/7zvICk4GWjYJ</a> to the external/sqlite/dist/Android.mk file.</p>
+ <h3 id="KeyedVector.h19331_error_indexOfKey_was_not_declared_in_this_scope">KeyedVector.h:193:31: error: indexOfKey was not declared in this scope</h3>
+ <p>This error appears when your gcc version is too recent. Install gcc/g++/g++-multilib 4.6.x versions. See <a href="/en-US/docs/Mozilla/Firefox_OS/Customization_with_the_.userconfig_file" title="Mozilla/Firefox_OS/Customization_with_the_.userconfig_file">Customizing with the .userconfig file</a> for more information.</p>
+ <div class="note">
+  <p><strong>Community Note:</strong> It is possible to use gcc 4.7.x with slight modifications to the B2G code (gcc will guide you) but you won't get any help! Neither with modifying the code nor with bugs you encounter.</p>
+ </div>
+ <h3 id="arm-linux-androideabi-g_Internal_error_Killed_program_cc1plus">arm-linux-androideabi-g++: Internal error: Killed (program cc1plus)</h3>
+ <p>If you see this message, it most likely means that free memory is lacking. Ensure there is enough free memory before running <code>./build.sh</code>. It should run fine if your system has 4GB of RAM.</p>
+ <h3 id="...is_referenced_by_DSO_error">"...is referenced by DSO" error</h3>
+ <p>While building the emulator, if you get /usr/bin/ld: out/host/linux-x86/obj/EXECUTABLES/triangleCM_intermediates/triangleCM: hidden symbol `_XGetRequest' in out/host/linux-x86/obj/STATIC_LIBRARIES/libSDL_intermediates/libSDL.a(SDL_x11dyn.o) is referenced by DSO.</p>
+ <p>You can get this with some versions in binutils. If you run Debian Stable, you can use the <em>gold</em> linker by installing the package <code>binutils-gold</code>. Note that the <em>gold</em> linker is already installed by <code>binutils</code>, but it's not used by default; <code>binutils-gold</code> does just that.</p>
+ <h3 id="If_you_get_build_errors_while_the_build_system_is_running_tests">If you get build errors while the build system is running tests</h3>
+ <p>Sometimes (especially after build tool or operating system updates) you'll get weird errors like this when the build system runs its post-build tests:</p>
+ <pre>Generating permissions.sqlite...
+test -d profile || mkdir -p profile
+run-js-command  permissions
+WARNING: permission unknown:offline-app
+WARNING: permission unknown:indexedDB-unlimited
+build/permissions.js:122: NS_ERROR_UNEXPECTED: Component returned failure code: 0x8000ffff (NS_ERROR_UNEXPECTED) [nsIPermissionManager.add]
+make[1]: *** [permissions] Error 3
+make: *** [gaia/profile.tar.gz] Error 2</pre>
+ <p>In this situation, try deleting the <code>gaia/xulrunner-sdk</code> directory and re-pulling the code:</p>
+ <pre>rm -r gaia/xulrunner-sdk
+</pre>
+ <p>This deletes the downloaded, precompiled copy of <a href="/en-US/docs/XULRunner" title="/en-US/docs/XULRunner">XULRunner</a> that the build system retrieves automatically; on your next build, a new copy of XULRunner will be automatically retrieved.</p>
+ <h3 id="Cannot_fetch_platformlibcore">Cannot fetch platform/libcore</h3>
+ <p>If you tried to configure your B2G build for Nexus S (<code>./config.sh nexus-s</code>) and got an error related to libcore, it is because of a problem with the linaro git that feeds into this. To fix this, checkout the B2G manifest like so:</p>
+ <pre class="brush: bash">git clone https://github.com/mozilla-b2g/b2g-manifest.git</pre>
+ <p>Edit the <code>nexus-s.xml</code> file in this repo, replacing the linaro git entry with a reference to the aosp entry, which should read like so:</p>
+ <pre class="brush: xml">&lt;default revision="refs/tags/android-4.0.4_r1.2"
+              remote="aosp"
+              sync-j="4" /&gt;</pre>
+ <p>Commit these changes (<code>git commit -a</code>) and then change the <code>config.sh</code> file in the master branch of the main B2G repo that you checked out to point to your modified local manifest instead of the Mozilla one:</p>
+ <pre class="brush: bash">GITREPO=${GITREPO:-"file:///home/path/to/my/b2g-manifest"}</pre>
+ <h3 id="clang_errors_when_building_with_Xcode_5_on_Mac">clang errors when building with Xcode 5 on Mac</h3>
+ <p>If you are building on Mac OS X 10.8 with Xcode 5, you will likely see errors like the following:</p>
+ <pre class="brush: bash">clang: error: argument unused during compilation: '-include system/core/include/arch/darwin-x86/AndroidConfig.h'
+clang: error: argument unused during compilation: '-U DEBUG'
+clang: error: argument unused during compilation: '-U DEBUG'
+clang: error: argument unused during compilation: '-MF out/host/darwin-x86/obj/EXECUTABLES/obbtool_intermediates/Main.d'
+make: *** [out/host/darwin-x86/obj/EXECUTABLES/obbtool_intermediates/Main.o] Error 1</pre>
+ <p>This is because Xcode 5 changes the g++ compiler in <code>/usr/bin</code>, which breaks the build process if you try to use it to compile. In order to work around the problem, edit the following line in <code>build/core/combo/HOST_darwin-x86.mk:</code></p>
+ <pre class="brush: bash">HOST_CXX := g++</pre>
+ <p>to</p>
+ <pre class="brush: bash">HOST_CXX := g++-4.6
+ifeq (,$(wildcard /usr/local/bin/g++-4.6))
+ HOST_CXX := g++
+endif</pre>
+ <p>Next, you'll want to uninstall gcc, using brew (this assumes you've run the <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites#Run_Firefox_OS_Mac_Bootstrap">Mac OS bootstrap script</a> — if not, you'll need to complete that step before continuing):</p>
+ <pre class="brush: bash">brew uninstall gcc-4.6</pre>
+ <p>Now reinstall gcc with multilib and c++ support:</p>
+ <pre class="brush: bash">brew install --enable-cxx https://gist.github.com/artlogic/6988658/raw/aeb9d1ea098274ad3f3fe2637b9df7f308a8a120/gcc-4.6.rb</pre>
+ <p>Make sure /usr/local/bin is on your PATH. You can do this temporarily by typing the following into the command prompt:</p>
+ <pre class="brush: bash">export PATH=/usr/local/bin:$PATH</pre>
+ <p>You can make the above change permanent by adding it to the <code>.bash_profile</code> file in your home directory.</p>
+ <p>After you've set your PATH, make sure you can run both of the following commands:</p>
+ <pre class="brush: bash">gcc-4.6 -v
+
+g++-4.6 -v</pre>
+ <p>If either of these commands fail, you may need to relink your gcc using brew with the following command:</p>
+ <pre class="brush: bash">brew link --overwrite gcc-4.6</pre>
+ <p>It's also possible that <code>/usr/bin/c++</code> is not pointing at clang++ as it should be with Xcode 5 installed. You can determine if it is by typing the following:</p>
+ <pre class="brush: bash">ls -l /usr/bin/c++</pre>
+ <p>It should return something that looks like this:</p>
+ <pre class="brush: bash">lrwxr-xr-x 1 root admin 7 Sep 19 11:40 /usr/bin/c++ -&gt; clang++
+</pre>
+ <p>If c++ is pointing at something other than clang++, update it with the following commands:</p>
+ <pre class="brush: bash">sudo rm /usr/bin/c++
+
+sudo ln -s /usr/bin/clang++ /usr/bin/c++</pre>
+ <h3 id="Cannot_pull_files_from_backup_directory">Cannot pull files from backup directory</h3>
+ <p>This could happen when the USB connection is broken while the script pulls data from device to computer.</p>
+ <p>When you run the script again, you'll probably get the following (the example is for the Peak device):</p>
+ <pre class="brush: bash"><code>Pulling files from ../../../backup-peak
+cat: ../../../backup-peak/system/build.prop: No such file or directory
+Found firmware with build ID
+Pulling "libaudioeq.so"
+cp: cannot stat `../../../backup-peak/system/lib/libaudioeq.so': No such file or directory
+Failed to pull libaudioeq.so. Giving up.
+
+&gt; Build failed! &lt;
+
+Build with |./build.sh -j1| for better messages
+If all else fails, use |rm -rf objdir-gecko| to clobber gecko and |rm -rf out| to clobber everything else.</code></pre>
+ <p>To solve this, it is not necessary to remove the whole objdir-gecko or out directories. Just remove the backup directory, like this (for the example above):</p>
+ <pre class="brush: bash"><code class="brush: bash">$rm -rf backup-peak</code></pre>
+ <h3 id="Emulator_build_issues"><strong>Emulator build issues</strong></h3>
+ <p>If you are making an <strong>emulator</strong> build, you need to pay attention to these issues:</p>
+ <div class="note">
+  <p><strong>First, note that you shouldn't use the x86 emulator — it is hard to install and not well supported.</strong></p>
+ </div>
+ <p>Next, the build-system for the emulator builds both 32bit and 64bit versions of the emulator. As the emulator depends on OpenGL, this means that you need to have both 32bit and 64bit versions of OpenGL libraries installed on your system. See the discussion in <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=897727" title="https://bugzilla.mozilla.org/show_bug.cgi?id=897727">bug 897727</a>.</p>
+ <p>There are two ways that you can solve this problem:</p>
+ <h4 id="Solution_1_have_both_32bit_and_64bit_OpenGL_libs_installed_with_the_right_symlinks">Solution #1: have both 32bit and 64bit OpenGL libs installed, with the right symlinks</h4>
+ <p>If your linux distro has multilib packages for OpenGL libraries, you can attempt installing them. You might then have to manually create some symlinks.</p>
+ <p>For example, here is the situation on Ubuntu 12.04 LTS x86-64. On this distribution, the <code>libgl1-mesa-dev</code> package cannot be installed simultaneously in x86-64 and i386 versions, but you can have the following combination of packages simultaneously installed:</p>
+ <pre class="bz_comment_text" id="comment_text_12">sudo apt-get install libgl1-mesa-dev libglapi-mesa:i386 libgl1-mesa-glx:i386</pre>
+ <p>After having run this command, you will still have to manually create some symlinks for the emulator build to succeed:</p>
+ <pre class="note">sudo ln -s /usr/lib/i386-linux-gnu/libX11.so.6 /usr/lib/i386-linux-gnu/libX11.so
+sudo ln -s /usr/lib/i386-linux-gnu/mesa/libGL.so.1 /usr/lib/i386-linux-gnu/libGL.so</pre>
+ <h4 id="Solution_2_just_patch_the_emulator_so_it_only_builds_64bit">Solution #2: just patch the emulator so it only builds 64bit</h4>
+ <p>Just apply <a href="https://bug897727.bugzilla.mozilla.org/attachment.cgi?id=786280" title="https://bug897727.bugzilla.mozilla.org/attachment.cgi?id=786280">this patch</a> to the sdk/ git repository under the B2G repo. This will cause the B2G emulator to only attempt to build the 64bit emulator if you're on a 64bit system, thus avoiding any multilib issues. The 32bit emulator is unused anyway on a 64bit system. This is the simplest solution, until this patch eventually bit-rots.</p>
+ <h2 id="Next_steps">Next steps</h2>
+ <p>After building, your next step depends on whether you built Boot to Gecko for the emulator or for a real mobile device; see the following articles for details:</p>
+ <ul>
+  <li><a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_emulators" title="Mozilla/Firefox_OS/Using_the_B2G_emulators">Using the B2G emulators</a></li>
+  <li><a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client" title="Mozilla/Firefox_OS/Using_the_B2G_desktop_client">Using the B2G desktop client</a></li>
+  <li><a href="/en-US/docs/Mozilla/Firefox_OS/Installing_on_a_mobile_device" title="Mozilla/Firefox_OS/Installing_on_a_mobile_device">Installing Boot to Gecko on a mobile device</a></li>
+  <li><a href="/en-US/docs/Mozilla/Firefox_OS/Pandaboard" title="Mozilla/Firefox_OS/Pandaboard">Installing Boot to Gecko on a pandaboard</a></li>
+ </ul>
+</div>
+<h3 id="Submitting_bugs_on_B2GFirefox_OSGaia">Submitting bugs on B2G/Firefox OS/Gaia</h3>
+<p>Once you've got a B2G/Firefox OS build running, you'll probably want to start to file bugs against this specific version, so the Firefox OS community can improve things as effectively as possible. You'll want to <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox%20OS">file the bug on Bugzilla</a>, under the "Firefox OS" project, but you should include version specifics:</p>
+<ol>
+ <li>To start with, tell us the major version number, e.g. <em>1.4.0.0-prerelease</em>. This can be found on the device under <em>Settings &gt; Device Information</em>.</li>
+ <li>You can provide more specific version identifiers by  returning the current hashes from the gaia and gecko repositories. This can be done like so:
+  <pre class="brush: bash">#!/bin/bash
+(cd gaia;  echo "gaia  $(git rev-parse HEAD)")
+(cd gecko; echo "gecko $(git rev-parse HEAD)")</pre>
+ </li>
+</ol>
diff --git a/files/de/archive/b2g_os/building_and_installing_firefox_os/compatible_devices/index.html b/files/de/archive/b2g_os/building_and_installing_firefox_os/compatible_devices/index.html
new file mode 100644
index 0000000000..ea95805479
--- /dev/null
+++ b/files/de/archive/b2g_os/building_and_installing_firefox_os/compatible_devices/index.html
@@ -0,0 +1,357 @@
+---
+title: Kompatible Geräte
+slug: Archive/B2G_OS/Building_and_installing_Firefox_OS/Compatible_Devices
+translation_of: Archive/B2G_OS/Building_and_installing_B2G_OS/Compatible_Devices
+---
+<div class="note">
+<p><strong>Install B2G OS in you device easily</strong> with <a href="/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS/B2G_installer_add-on">B2G installer </a>- a Firefox Add-on.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: All devices have the <strong>recommended build target below its name</strong> (see <strong>nickname or codenames</strong>). For example to build for Nexus 6 do <code>./build.sh nexus-6-l</code>.<span class="rendered_qtext"> Device codenames where given directly by manufacturers. You can find it in <code>build.prop</code> file of a stock ROM.</span></p>
+</div>
+
+<h2 id="Development_Devices">Development Devices</h2>
+
+<p>These devices are official reference devices for developing B2G OS.</p>
+
+<table class="standard-table" style="height: 380px; width: 680px;">
+ <tbody>
+  <tr>
+   <td style="text-align: center;"><strong>Image</strong></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/13384/Z3C_B2G.png" style="height: 154px; width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12039/generic.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12039/generic.png" style="max-width: 133px;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><strong>Name<br>
+    (Android version)</strong></td>
+   <td style="text-align: center;"><strong>Z3 Compact (Kitkat)</strong><br>
+    Sony Shinano platform</td>
+   <td style="text-align: center;"><strong>Z3</strong> <strong>(Kitkat)</strong><br>
+    Sony Shinano platform</td>
+   <td style="text-align: center;"><strong>Flame (Kitkat)</strong></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><strong>Nickname</strong></td>
+   <td style="text-align: center;">aries-kk</td>
+   <td style="text-align: center;">leo-kk</td>
+   <td style="text-align: center;">flame-kk</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><strong>Build and installation information</strong></td>
+   <td style="text-align: center;"><a href="https://discourse.mozilla-community.org/t/building-b2g-os-for-aries-z3c/8082">https://discourse.mozilla-community.org/t/building-b2g-os-for-aries-z3c/8082</a></td>
+   <td style="text-align: center;"> </td>
+   <td style="text-align: center;"><a href="https://discourse.mozilla-community.org/t/flame-builds/8548">https://discourse.mozilla-community.org/t/flame-builds/8548</a></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><strong>Available in B2G Installer</strong></td>
+   <td style="text-align: center;">Yes</td>
+   <td style="text-align: center;">No</td>
+   <td style="text-align: center;">Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Community_Supported_Devices">Community Supported Devices</h2>
+
+<p>Those devices are supported by community efforts. Feel free to help them !</p>
+
+<div class="note">
+<p><strong>Builds distribution frequency may vary</strong> depending of maintainers number and time available.</p>
+</div>
+
+<h3 id="Working_devices">Working devices</h3>
+
+<p>These devices have builds available running B2G OS :</p>
+
+<table class="standard-table" style="height: 380px; width: 355px;">
+ <tbody>
+  <tr>
+   <td style="text-align: center;"><strong>Image</strong></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12039/generic.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12035/nexus5.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/13665/WileyFoxSwift_B2G.png" style="height: 157px; width: 79px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12039/generic.png" style="max-width: 133px;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><strong>Name<br>
+    (Android version)</strong></td>
+   <td style="text-align: center;"><strong>ZTE Open C</strong></td>
+   <td style="text-align: center;"><strong>Nexus 5</strong></td>
+   <td style="text-align: center;"><strong>WileyFox Swift</strong></td>
+   <td style="text-align: center;"><strong>Fairphone 2</strong></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><strong>Nickname</strong></td>
+   <td style="text-align: center;">openc-fr / openc-ebay</td>
+   <td style="text-align: center;"> </td>
+   <td style="text-align: center;">                       </td>
+   <td style="text-align: center;"> </td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><strong>Build and installation information</strong></td>
+   <td style="text-align: center;"><a href="https://discourse.mozilla-community.org/t/zte-open-c/8402/">https://discourse.mozilla-community.org/t/zte-open-c/8402/</a></td>
+   <td style="text-align: center;">
+    <p><a href="https://discourse.mozilla-community.org/t/test-b2gos-on-nexus-5/9405/1">https://discourse.mozilla-community.org/t/test-b2gos-on-nexus-5/9405/1</a></p>
+   </td>
+   <td style="text-align: center;"> </td>
+   <td style="text-align: center;">
+    <p><a href="https://discourse.mozilla-community.org/t/fairphone-2-build/8641/">https://discourse.mozilla-community.org/t/fairphone-2-build/8641/</a><br>
+     <a href="https://discourse.mozilla-community.org/t/fairphone-2-support-for-b2g-installer-landed/8334">https://discourse.mozilla-community.org/t/fairphone-2-support-for-b2g-installer-landed/8334</a></p>
+   </td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><strong>Available in B2G Installer</strong></td>
+   <td style="text-align: center;">
+    <p>No</p>
+
+    <p>(but a buildbot is available)</p>
+   </td>
+   <td style="text-align: center;">Yes</td>
+   <td style="text-align: center;">Yes</td>
+   <td style="text-align: center;">Not yet, but almost done. Blobfull build working.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Work_in_progress">Work in progress</h3>
+
+<p>Work is going on to support these devices :</p>
+
+<table class="standard-table" style="height: 380px; width: 680px;">
+ <tbody>
+  <tr>
+   <td style="text-align: center;"><strong>Image</strong></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12025/flamingo.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12017/amami.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"> </td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><strong>Name<br>
+    (Android version)</strong></td>
+   <td style="text-align: center;"><strong>E3</strong><br>
+    Sony Yukon platform</td>
+   <td style="text-align: center;"><strong>Z1 Compact (Lollipop)</strong><br>
+    Sony Rhine platform</td>
+   <td style="text-align: center;"><strong>Xiaomi Redmi 1S</strong></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><strong>Nickname</strong></td>
+   <td style="text-align: center;">flamingo-l</td>
+   <td style="text-align: center;">amami-l</td>
+   <td style="text-align: center;">armani</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><strong>Build and installation information</strong></td>
+   <td style="text-align: center;"><a href="https://discourse.mozilla-community.org/t/b2g-os-flamingo-sony-xperia-e3-builds/8361">https://discourse.mozilla-community.org/t/b2g-os-flamingo-sony-xperia-e3-builds/8361</a></td>
+   <td style="text-align: center;"><a href="https://discourse.mozilla-community.org/t/support-for-amami-xperia-z1c-building-debugging-providing-builds/8348">https://discourse.mozilla-community.org/t/support-for-amami-xperia-z1c-building-debugging-providing-builds/8348</a></td>
+   <td style="text-align: center;"><a href="https://discourse.mozilla-community.org/t/wip-xiaomi-redmi-1s-hongmi-1s/10273">https://discourse.mozilla-community.org/t/wip-xiaomi-redmi-1s-hongmi-1s/10273</a></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><strong>Support status</strong></td>
+   <td style="text-align: center;">Blocked, problem with flashing tools</td>
+   <td style="text-align: center;">Early building tests</td>
+   <td style="text-align: center;">Early building tests</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Devices_with_porting_possibilities">Devices with porting possibilities</h2>
+
+<p>This is a (<em>non-exhaustive</em>) list of devices with porting <em>potential</em>, thanks to available AOSP or Cyanogen Mod version, or because they supported Firefox OS until version 2.6.</p>
+
+<div class="note">
+<p><strong>Note:</strong> There aren't currently any ports for these phones, but it is possible to build B2G OS. See<a href="/en-US/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS"> how to build</a> section for more info. You are welcome to maintain these builds.</p>
+</div>
+
+<h3 id="Nexus_Devices">Nexus Devices</h3>
+
+<p>These devices are (almost) automatically supported by B2G OS because they are Google's reference devices for AOSP.</p>
+
+<table class="standard-table" style="height: 282px; line-height: 1.5; width: 451px;">
+ <tbody>
+  <tr>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12037/nexus6.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12033/nexus4.png" style="max-width: 133px;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><strong>Nexus 6</strong></td>
+   <td style="text-align: center;"><strong>Nexus 4</strong></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"> </td>
+   <td style="text-align: center;"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Sony_Devices">Sony Devices</h3>
+
+<p>These devices use Sony Mobile's Open Devices initiative, which aims to support all modern Xperia devices in AOSP.</p>
+
+<p>These devices are built on a Lollipop AOSP base.</p>
+
+<div class="note">
+<p>Right now most of the Sony devices are missing camera support. This depends on work in progress by Sony developers.<br>
+ Also, we need contributors to maintain these ports.</p>
+</div>
+
+<p>Devices where support for B2G OS is ongoing are not listed here.</p>
+
+<h4 id="Sony_Shinano_Platform">Sony Shinano Platform</h4>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12007/leo.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"> </td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12011/scorpion.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12013/sirius.png" style="max-width: 133px;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><strong>Z3</strong></td>
+   <td style="text-align: center;"> </td>
+   <td style="text-align: center;"><strong>Z3 Tablet Compact</strong></td>
+   <td style="text-align: center;"><strong>Z2</strong></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">leo-l</td>
+   <td style="text-align: center;"> </td>
+   <td style="text-align: center;">scorpion-l</td>
+   <td style="text-align: center;">sirius-l</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+</dl>
+
+<h4 id="Sony_Rhine_Platform">Sony Rhine Platform</h4>
+
+<div class="note">
+<p>Rhine devices use a legacy NFC chip so this feature is currently missing. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1226720">bug 1226720 </a>We need contributors to maintain these ports.</p>
+</div>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12015/honami.png" style="max-width: 133px;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><strong>Z1</strong></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">honami-l</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Sony_Yukon_Platform">Sony Yukon Platform</h4>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12019/tianchi.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12021/seagull.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12023/eagle.png" style="max-width: 133px;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><strong>T2 Ultra</strong></td>
+   <td style="text-align: center;"><strong>T3</strong></td>
+   <td style="text-align: center;"><strong>M2</strong></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">tianchi-l</td>
+   <td style="text-align: center;">seagull-l</td>
+   <td style="text-align: center;">eagle-l</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="CyanogenMod_Supported_Devices"><strong>CyanogenMod Supported Devices</strong></h3>
+
+<p>Here be dragons! (To be completed)</p>
+
+<h2 id="Legacy_Devices">Legacy Devices</h2>
+
+<p>Some old devices are no longer maintained by the community, but it is still possible for volunteers to keep them alive (Yay Open-Source!). Feel free to contact the team previously working on these devices to get some help.</p>
+
+<p>No device here right now.</p>
+
+<h2 id="Obsolete_Devices">Obsolete Devices</h2>
+
+<div class="warning">
+<p>Forget about these device's support if you have one.</p>
+</div>
+
+<p>Several old devices are no longer maintained for B2G OS , and we do not have a community to keep them alive. The current status of these devices is unknown, which probably means they cannot be built on B2G OS master branches.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12069/peak.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12067/keon.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12071/inari.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12077/hamachi.png" style="max-width: 133px;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><strong>Geeksphone Peak</strong></td>
+   <td style="text-align: center;"><strong>Geeksphone Keon</strong></td>
+   <td style="text-align: center;"><strong>ZTE Open</strong></td>
+   <td style="text-align: center;"><strong>TCL Fire</strong></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">peak</td>
+   <td style="text-align: center;">keon</td>
+   <td style="text-align: center;">inari</td>
+   <td style="text-align: center;">hamachi</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12083/galaxy-s2.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12085/galaxy-nexus.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12087/nexus-s.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12087/nexus-s.png" style="max-width: 133px;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><strong>Samsung Galaxy S2</strong></td>
+   <td style="text-align: center;"><strong>Galaxy Nexus</strong></td>
+   <td style="text-align: center;"><strong><a href="/en-US/docs/Mozilla/Firefox_OS/Samsung_Nexus_S">Nexus S</a></strong></td>
+   <td style="text-align: center;"><strong><a href="/en-US/docs/Mozilla/Firefox_OS/Samsung_Nexus_S">Nexus S 4G</a></strong></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">galaxy-s2</td>
+   <td style="text-align: center;">galaxy-nexus</td>
+   <td style="text-align: center;">nexus-s</td>
+   <td style="text-align: center;">nexus-s-4g</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12073/flatfish.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12075/vixen.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12079/pandaboard.png" style="max-width: 133px;"></td>
+   <td style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/12081/rpi.png" style="max-width: 133px;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><strong>Foxconn InFocus</strong></td>
+   <td style="text-align: center;"><strong>Via Vixen</strong></td>
+   <td style="text-align: center;"><strong><a href="/en-US/Firefox_OS/Pandaboard">Pandaboard</a></strong></td>
+   <td style="text-align: center;"><strong>Raspberry Pi</strong></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;">flatfish</td>
+   <td style="text-align: center;">vixen</td>
+   <td style="text-align: center;">pandaboard</td>
+   <td style="text-align: center;">rpi</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/de/archive/b2g_os/building_and_installing_firefox_os/firefox_os_build_overview/index.html b/files/de/archive/b2g_os/building_and_installing_firefox_os/firefox_os_build_overview/index.html
new file mode 100644
index 0000000000..56422c4cf6
--- /dev/null
+++ b/files/de/archive/b2g_os/building_and_installing_firefox_os/firefox_os_build_overview/index.html
@@ -0,0 +1,155 @@
+---
+title: 'Firefox OS Build Prozess: Übersicht'
+slug: Archive/B2G_OS/Building_and_installing_Firefox_OS/Firefox_OS_build_overview
+tags:
+  - Firefox OS
+  - build
+  - install
+translation_of: Archive/B2G_OS/Building_and_installing_B2G_OS/B2G_OS_build_process_summary
+---
+<div class="summary">
+<p>Firefox OS zu kompilieren und zu installieren erfordert eine erhebliche Menge Zeit, Netzwerkbandbreite und Rechenleistung. Leider können auch Dinge schiefgehen. Dieser Artikel beschreibt die Ziele und Schritte des Build-Prozesses, um Benutzern während der Firefox OS Installation zu helfen. Details der einzelnen Schritte werden in den verlinkten Seiten erläutert.</p>
+</div>
+
+<div class="note">
+<p><strong style="font-weight: bold;">Anmerkung:</strong> Der Firefox OS Build Prozess ist voll von Bezügen zu 'B2G' oder 'Boot2Gecko'. 'Boot2Gecko' war der ursprüngliche Codename des Firefox OS Projekts.</p>
+</div>
+
+<h2 id="Das_Ziel_vier_'image'-Dateien">Das Ziel: vier 'image'-Dateien</h2>
+
+<p>Der grundsätzliche Zweck des Build Prozesses ist es vier Dateien zu erzeugen, die auf das Firefox OS-Gerät kopiert werden können.</p>
+
+<table style="margin: 4px auto; vertical-align: top; width: 90%;">
+ <tbody>
+  <tr>
+   <td><strong>boot.img</strong></td>
+   <td>Der Linux-Kernel und ein Image des root-Dateisystems, wobei letzteres ein Set von grundlegenden UNIX-Tools zur Verfügung stellt.</td>
+  </tr>
+  <tr>
+   <td><strong>system.img</strong></td>
+   <td>Der Kern von Firefox OS inklusive einiger Teile von Gonk, der Portierung von Gecko, und dem ausführbaren Programm b2g.</td>
+  </tr>
+  <tr>
+   <td><strong>userdata.img</strong></td>
+   <td>Das Gecko-Profil des Benutzers und die Gaia Web-Anwendungen für das Gerät.</td>
+  </tr>
+  <tr>
+   <td><strong>recovery.img</strong></td>
+   <td>Ein Linux-Kernel und ein Image des root-Dateisystems zusammen mit einem einfachen Werkzeug, um eine defekte Installation zu reparieren.</td>
+  </tr>
+ </tbody>
+</table>
+
+
+<p>Wenn diese 4 Images erzeugt wurden, können sie auf das Gerät übertragen werden.</p>
+
+<p>Firefox OS setzt auf dem Android Open Source Project (AOSP) auf. Die AOSP-Werkzeuge <code>adb</code> und <code>fastboot</code> bieten Möglichkeiten auf ein Gerät zuzugreifen und es zu verändern. Insbesondere kann das Kommando <code>adb reboot-bootloader</code> ein angeschlossenes Gerät dazu bringen, neu zu starten und in einem frühen Bootloaderstadium zu pausieren, während das Kommando <code>fastboot flash $partition $image</code> dazu benutzt werden kann, ein Image auf das Gerät zu kopieren.</p>
+
+<h3 id="Das_Boot-Image">Das Boot-Image</h3>
+
+<p>Das Boot-Image (<code>boot.img</code>) ist eine Kombination aus dem Linux-Kernel und einer initialen root Partition, die die grundlegenden Werkzeuge und Initialisierungs-Skripte bereit stellt. Letzteres wird für eine effektive Nutzung durch das Gerät in den Gerätespeicher kopiert und wird deshalb als "ramdisk" (RAM-Disk) bezeichnet. Das Boot-Image wird in die boot Partition des Gerätes kopiert und die Inhalte der RAM-Disk erscheinen unter dem root-Verzeichnis, wenn zur Laufzeit auf das Geräte-Dateisystem zugegriffen wird; zum Beispiel beim Ausführen von <code>adb shell</code>.</p>
+
+<p>Das Boot-Image richtet auch die Berechtigungen des root-Benutzers in der Datei <code>default.prop</code> im root-Verzeichnis ein.</p>
+
+<p>Es ist auch möglich vorhandene Boot-Images zu verändern, indem man die Datei untersucht, sie in Kernel und RAM-Disk trennt, die Inhalte der RAM-Disk extrahiert, diese ändert, das RAM-Disk-Image neu zusammenstetzt und daraus eine funktionierende boot.img-Datei erzeugt. Ein Beispiel findet man auf der <a href="http://k.japko.eu/alcatel-otf-hackers-guide-1.html">Alcatel One Touch Fire Hacking (Mini) Guide</a>-Seite.</p>
+
+<p>Boot-Images können vor der Installation getestet werden, indem man sie dem Gerät "unterschiebt" (sideload). Der Geräte-Start kann im Bootloader angehalten werden. Im Bootloader-Modus kann man dann mit <code>fastboot</code> von einem eigenen Boot-Image booten, indem man das Kommando <code>fastboot boot /some/path/to/boot.img</code> verwendet.</p>
+
+<h3 id="Das_System-Image">Das System-Image</h3>
+
+<p>Das System-image (<code>system.img</code>) stellt die Grundfunktionen von Firefox OS bereit:</p>
+
+<ul>
+ <li><strong>Gonk</strong>: systemnahe Komponenten des Betriebssystems</li>
+ <li><strong>Gecko</strong>: Laufzeitumgebung für HTML, CSS und JavaScript</li>
+ <li><strong>B2G</strong>: Laufzeitkomponenten des Betriebssystems</li>
+ <li><strong>Gaia</strong>: User Interface (UI) für Apps</li>
+</ul>
+
+<div class="note">
+<p>Siehe <a href="https://developer.mozilla.org/de/Firefox_OS/Platform">Firefox OS platform guide</a> für nähere Informationen zur System-Architektur.</p>
+</div>
+
+<p>Das System-Image wird in die <code>system</code> Partition des Geräts kopiert und ist im laufenden Betrieb im Verzeichnis <code>/system/</code> zu sehen wenn das Dateisystem gemountet wurde.</p>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Das System-Image stellt zudem vom Gerät genutze Binär-Programme zur Verfügung, insbesondere den RIL (Radio Interface Layer) für die Funk-Verbindungen.</p>
+</div>
+
+<h3 id="Das_User_Data_Image">Das User Data Image</h3>
+
+<p>Das User Data Image (<code>userdata.img</code>) enthält die Gaia Apps des Anwenders.</p>
+
+<p>Das User Data Image wird in die <code>userdata</code> Partition des Gerätes kopiert. Der Inhalt ist im laufenden Betrieb im Verzeichnis <code>/data/</code> zu sehen wenn das Dateisystem gemountet wurde. Das Verzeichnis <code>/data/b2g/</code> enthält das Mozilla Gecko Profil des Anwenders, das Verzeichnis <code>/data/local/webapps/</code> enthält die verfügbaren Apps.</p>
+
+<h3 id="Das_Recovery_Image">Das Recovery Image</h3>
+
+<p>Das Recovery Image (<code>recovery.img</code>) enthält denselben Kernel und eine vergleichbare RAM-Disk wie die Boot Image Partition. Das Recovery Image verwendet allerdings ein anderes Initialisierungs-Skript, welches dem Anwender verschiedene Recovery-Funktionen zur Verfügung stellt die mit den Tasten des Gerätes bedient werden können.</p>
+
+<p>Das Recovery Image wird in die <code>recovery</code> Partition des Gerätes kopiert, welche im Normalbetrieb nicht ins Dateisystem gemountet wird.</p>
+
+<h2 id="Der_Build_Prozess_setup_configure_build_install">Der Build Prozess: setup, configure, build, install</h2>
+
+<p>Build Prozess und Installation von Firefox OS  bestehen aus 4 Schritten:</p>
+
+<table style="margin: 4px auto; vertical-align: top; width: 90%;">
+ <tbody>
+  <tr>
+   <td><strong>Setup</strong></td>
+   <td>Bereitstellen aller für den Build Prozess benötigten Programme wie z.B. Compiler und Bibliotheken.</td>
+  </tr>
+  <tr>
+   <td><strong>Configure</strong></td>
+   <td>Download des Quellcodes und Erzeugen einer <code>configure</code> Datei welche Umgebungsvariablen definiert in denen die benötigten Pfade und Parameter gespeichert werden.</td>
+  </tr>
+  <tr>
+   <td><strong>Build</strong></td>
+   <td>Erzeugen des Gecko Anwender-Profils und der Gaia Anwendungen des Gerätes.</td>
+  </tr>
+  <tr>
+   <td><strong>Install</strong></td>
+   <td>Installieren der Dateien auf dem Gerät.</td>
+  </tr>
+ </tbody>
+</table>
+
+
+<p> </p>
+
+<h3 id="Setup">Setup</h3>
+
+<p>Die Setup-Phase ist notwendig um sicher zu stellen dass sämtliche für den Build Prozess benötigte Software zur Verfügung steht, z.B. Compiler und Build Tools.</p>
+
+<p>Dieser Schritt kann manuell oder per Skript durchgeführt werden. Details hierzu findest Du auf <a href="/de/Firefox_OS/Firefox_OS_build_prerequisites" title="Firefox OS build prerequisites">Firefox OS build prerequisites</a>.</p>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Auf UNIX und UNIX-artigen Computern kann man mit dem Kommando which prüfen, ob ein für den Build Prozess benötigtes Programm vorhanden ist. Als Parameter erwartet which den Namen des benötigten Programms.</p>
+</div>
+
+<h3 id="Configuration">Configuration</h3>
+
+<p>Der eigentliche Build Prozess startet mit dem Erstellen einer Kopie der Firefox OS (bzw. B2G) Software, gewöhnlich wird ein Git Clone des <code>B2G</code> Projekts erstellt. Der Schritt Configuration kopiert den gesamten benötigten Quellcode und erzeugt eine <code>config</code> Datei, welche die benötigten Installations-Parameter enthält.</p>
+
+<p>Ausgeführt wird dieser Schritt mit dem <code>config.sh</code> Skript. Details findest Du auf der <a href="/en-US/Firefox_OS/Preparing_for_your_first_B2G_build" title="Preparing for your first B2G build">Preparing for your first B2G build</a> Seite.</p>
+
+<p>Das Configure Skript benötigt einen Parameter mit dem der Gerätetyp spezifiziert wird. Diese sogenannten Code Names fliessen in den Build Namen ein und stehen für eine bestimmte CPU Architektur und nicht für ein spezielles Gerät. Momentan kann man also nicht anhand des Build Names bestimmen ob ein Build auf einem bestimmten Gerät lauffähig ist.  Eine Liste der verfügbaren Code Names findest Du <a href="/de/Firefox_OS/Phone_guide/Phone_specs">hier</a>.</p>
+
+<p>Der Schritt Configure nutzt <code>repo</code>, ein Tool des Android Open Source Projekts, für den Download der für den Build benötigten Software. Die Software wird gespeichert im Verzeichnis <code>repo/projects</code>. Aufgrund der herunter zu ladenden Datenmenge und der durchzuführenden Schritte kann der Schritt Configure länger dauern.</p>
+
+<h3 id="Build">Build</h3>
+
+<p>Im Schritt Build wird der Quellcode kompiliert und die Image-Dateien werden erzeugt.</p>
+
+<p>Hierzu wurd das <code>build.sh</code> Skript ausgeführt. Details hierzu findest Du in <a href="/de/Firefox_OS/Building" title="Building">Building Firefox OS</a>.</p>
+
+<p>Das Skript versucht alle Quellcodes in einem Schritt zu kompilieren: Die Android Open Source Project Tools, den Linux Kernel und die Gaia Web Anwendungen. Wenn dieser Schritt fehl schlägt ist nicht immer klar, an welcher Stelle der Build ein Problem hatte.</p>
+
+<p>Es ist möglich, nur einzelne Komponenten des Gesamtpakets zu kompilieren. Z.B. kann Gecko einzeln kompiliert werden, indem das Build Skript mit dem <code>gecko</code> Parameter aufgerufen wird. Das gleiche gilt für Gaia, wo das Build Skript mit dem  <code>gaia</code> Parameter gestartet wird. Diese Pakete können einzeln installiert werden,wie im folgenden beschrieben Abschnitt wird.</p>
+
+<p>Ebenso ist es möglich die oben beschriebenen Image-Dateien zu erzeugen. Z.B. kann man das System-Image mit <code>./build.sh out/platform/$target/system.img</code> erzeugen, wobei der Parameter <code>$target</code> derselbe ist wie im Schritt Configuration.</p>
+
+<h3 id="Install">Install</h3>
+
+<p>Im Schritt Install wird der neu kompilierte Code auf das Gerät kopiert. Hierzu wird das Skript <code>flash.sh</code> ausgeführt.</p>
+
+<p>Es können auch gezielt einzelne Komponenten des neu erstellten Build-Pakets installiert werden, indem das Flash Skript mit den entsprechenden Parametern gestartet wird . Zum Beispiel können die Gaia Web Anwendungen durch <code>./flash.sh gaia</code> installiert werden.</p>
diff --git a/files/de/archive/b2g_os/building_and_installing_firefox_os/index.html b/files/de/archive/b2g_os/building_and_installing_firefox_os/index.html
new file mode 100644
index 0000000000..51b1e0f6d4
--- /dev/null
+++ b/files/de/archive/b2g_os/building_and_installing_firefox_os/index.html
@@ -0,0 +1,45 @@
+---
+title: Erstellen und Installieren von Firefox OS
+slug: Archive/B2G_OS/Building_and_installing_Firefox_OS
+translation_of: Archive/B2G_OS/Building_and_installing_B2G_OS
+---
+<p>B2GOS befindet sich derzeit in aktiver Entwicklung und ist daher im Status einer Vorveröffentlichung. Um sicher die aktuellste Version zu benutzen empfiehlt es sich B2GOS selbst zu erstellen und zu installieren. Die Artikel auf dieser Seite führen dich durch die Prozesse um B2GOS für den Emulator, ein kompatibles Endgerät, oder das <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia/Introduction_to_Gaia" title="Mozilla/Firefox_OS/Platform/Gaia/Introduction to Gaia">Gaia</a> Benutzer Interface im Firefox Browser, zu erstellen.</p>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 class="Documentation" id="Beschaffen_und_Erstellen_von_B2GOS">Beschaffen und Erstellen von B2GOS</h2>
+
+    <dl>
+     <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites" title="Mozilla/Firefox_OS/Firefox OS build prerequisites">Voraussetzungen zum Erstellen von B2GOS</a></dt>
+     <dd>Was du vor der Ersterstellung von B2GOS brauchst und tun musst.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Preparing_for_your_first_B2G_build" title="Mozilla/Firefox_OS/Preparing for your first B2G build">Vorbereitungen zum Erstellen von B2GOS</a></dt>
+     <dd>Um B2GOS zu erstellen müssen zuerst die Quelldaten heruntergeladen werden. Was du dazu tun musst und wie es funktioniert wird in diesem Artikel erklärt. </dd>
+     <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Building" title="Mozilla/Firefox_OS/Building">Erstellen von B2GOS</a></dt>
+     <dd>Erstellen von B2GOS für die Zielplattform.</dd>
+    </dl>
+
+    <p><span class="alllinks"><a href="/en-US/docs/tag/B2G" title="tag/B2G">View All...</a></span></p>
+   </td>
+   <td>
+    <h2 class="Community" id="Installieren_von_B2GOS_undoder_Gaia">Installieren von B2GOS und/oder Gaia</h2>
+
+    <dl>
+     <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Choosing_how_to_run_Gaia_or_B2G" title="Mozilla/Firefox_OS/Choosing how to run Gaia or B2G">Möglichkeiten B2GOS zu testen</a></dt>
+     <dd>Hier wird erklärt welche verschiedenen Möglichkeiten es gibt B2GOS zu testen. Ob direkt im Browser mittels Gaia, auf dem Mobiltelefon oder im Emulator? Hier kannst du dir einen Überblick über die Möglichkeiten verschaffen.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Using_Gaia_in_Firefox" title="Mozilla/Firefox_OS/Using Gaia in Firefox">Gaia im Browser</a></dt>
+     <dd>Wie man Gaia im Webbrowser testet.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client" title="Mozilla/Firefox_OS/Using the B2G desktop client">B2GOS als Desktop Anwendung</a></dt>
+     <dd>Firefox OS kannst du in einer Desktop Anwendung die die Gaia Umgebung simuliert testen. Damit erzielst du bessere Ergebnisse als im Browser, es ist aber noch nicht so akkurat wie im Emulator.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_emulators" title="Mozilla/Firefox_OS/Using the B2G emulators">B2GOS im Emulator</a></dt>
+     <dd>Eine Anleitung zur Benutzung von B2GOS im Emulator, und eine Einführung in die Auswahl des richtigen Emulators zur entsprechenden Aufgabe.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Installing_on_a_mobile_device" title="Mozilla/Firefox_OS/Installing on a mobile device">B2GOS auf deinem Gerät</a></dt>
+     <dd>Anleitung zur Installation von B2GOS auf Mobiltelefonen.</dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/de/archive/b2g_os/debugging/developer_settings/index.html b/files/de/archive/b2g_os/debugging/developer_settings/index.html
new file mode 100644
index 0000000000..1a614927b3
--- /dev/null
+++ b/files/de/archive/b2g_os/debugging/developer_settings/index.html
@@ -0,0 +1,197 @@
+---
+title: Developer settings for Firefox OS
+slug: Archive/B2G_OS/Debugging/Developer_settings
+translation_of: Archive/B2G_OS/Debugging/Developer_settings
+---
+<div class="summary">
+ <p><span class="seoSummary">Die Entwicklereistellungen befinden sich in den Firefox OS Einstellungen. Dieses Panel bietet eine Vielzahl an Optionen, die das Debugging deiner Open Web Anwendung für Firefox OS erleichtern.</span> Dieser Artikel beschreibt die verfügbaren Optionen und erklärt wie diese benutzt werden können.</p>
+</div>
+<p>Der Einstellungsbereich für die Entwickler-Optionen wurde bewusst in einem Untermenüpunkt versteckt, um ein versehentliches Aktivieren durch unerfahrene Benutzer zu vermeiden, was eine Beeinträchtigung der Performance oder Auswirkungen auf die visuelle Darstellung von Firefox haben kann. Das Entwicklermenü sieht ähnlich aus wie auf der folgenden Darstellung gezeigt (dieses Bild wurde mit einem Geeksphone Keon mit einer im April 2014 erzeugten Version von Firefox OS 2.0 erstellt):</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/7801/developermenu-short.png" style="width: 320px; height: 480px; display: block; margin: 0px auto;"></p>
+<p>Das Entwicklermenü kann folgendermaßen erreicht werden:</p>
+<ul>
+ <li>In Firefox OS &lt; 1.4 befindet sich das Entwicklermenü unter <em>Settings &gt; Device information &gt; More Information &gt; Developer</em>.</li>
+ <li>In Firefox &gt; 1.4  befindet sich das Entwicklermenü unter <em>Settings &gt; Device information &gt; More Information &gt; Check the Developer Menu checkbox</em>.  Sobald das Menü aktiviert wurde, kann es direkt unter <em>Settings &gt; Developer</em> aufgerufen werden.</li>
+</ul>
+<p>Im folgenden Abschnitt werden alle Optionen einzeln vorgestellt und erklärt wie diese verwendet werden können.</p>
+<div class="warning">
+ <p><strong>Wichtig</strong>: Diese Tools sind hilfreich, aber können Probleme im normalen Gebrauch des Telefons versursachen. Einstellungen, die dafür bekannt sind, dass sie Probleme verursachen können, sind per default abgeschaltet. Falls du Probleme mit den Funktionen feststellen solltes, versuche die entsprechenden Funktionen wieder zu deaktivieren.</p>
+</div>
+<h2 id="Einstellungen_der_Developer_Tools">Einstellungen der Developer Tools</h2>
+<h3 id="Debugging_via_USB">Debugging via USB</h3>
+<p>Die "Remote debugging" Option aktiviert das <a href="/en-US/docs/Tools/Debugger" title="/en-US/docs/Tools/Debugger">ferngesteuerte debugging</a> deines Firefox OS Gerätes. Außerdem wird die <a href="/en-US/Firefox_OS/Debugging/Installing_ADB">ADB</a> Kommando-Eingabe aktiviert.<strong> </strong>In Firefox &lt; 1.4 gibt es dafür nur ein aktivierbares Kontrollkästchen; ab Firefox 1.4 sind es drei Optionen:</p>
+<ul>
+ <li>Inaktiv: ferngesteuertes debugging ist ausgeschaltet (default.)</li>
+ <li>ADB only: Erlaubt Zugriff zum Gerät durch ADB.</li>
+ <li>ADB and Devtools: Erlaubt Zugriff zum Gerät durch ADB und Firefox Devtools, wie den <a href="/en-US/Firefox_OS/Using_the_App_Manager">App Manager</a>.</li>
+</ul>
+<h3 id="Developer_HUD">Developer HUD</h3>
+<p>Ab Firefox OS 1.4, öffnet ein Berühren des Menüeintrages <strong>Developer HUD </strong>folgendes Auswahlmenü:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/8361/Firefox%20OS%202.1%20Developer%20HUD.png" style="width: 320px; display: block; margin: 0px auto; height: 569px;"></p>
+<p>Die beiden ersten Kontrollboxen (immer aktiv) sind:</p>
+<ul>
+ <li><strong>Frames per second</strong>: Zeigt die frames pro Sekunde, wie im späteren Abschnitt <em>Frames per second</em> erklärt.</li>
+ <li><strong>Time to load</strong>: Zeigt die Zeit zum Laden von Information an, wie im späteren Abschnitt <em>Time to load</em> erklärt.</li>
+</ul>
+<p>Anschließend folgt ein Slider, mit dem weitere Entwickler-Optionen ('Developer Tools') aktiviert werden können , auch weitere Checkboxen sind verfügbar:</p>
+<ul>
+ <li><strong>Log changes in adb</strong>: Enables logging of device changes to adb logcat.</li>
+ <li><strong>Show system HUD</strong>: When checked, enables the display of several different pieces of information overlaid on top of the device display.</li>
+ <li><strong>Warnings</strong>: Displays console warnings.</li>
+ <li><strong>Errors</strong>: Displays console errors.</li>
+ <li><strong>Security issues</strong>: Displays potential security issues.</li>
+ <li><strong>Reflows</strong>: Displays reflows as they occur.</li>
+ <li><strong><a href="/en-US/Firefox_OS/Platform/Architecture#Jank">Jank</a>/Jank threshold</strong>: Notify the phone user about occurrences of unacceptably high jank, the threshold for which can be customised.</li>
+ <li><strong>Unique set size</strong>: This is a measure of the memory used by an application that is unique to that application. This is the most important measurement to inform memory usage optimizations (trying to reduce the memory apps are using), but there are others. See this <a href="/en-US/Firefox_OS/Developing_Gaia/Testing_Gaia_code_changes#Performance_tests">Performance tests</a> section for more information.</li>
+ <li><strong>App memory</strong>: Displays information on how much memory the app is using, and allows you to enable or disable the different memory usage factors. See {{ anch("App_memory") }} below for more details.</li>
+</ul>
+<h4 id="Frames_per_second">Frames per second</h4>
+<p>Enabling this option reports three numbers in the top left of the Firefox OS display; the values reported are an average of recent results within a sliding window, meant to be "instantaneous" but fairly accurate. As such, all numbers are "guesses":</p>
+<ul>
+ <li>The left number is the <strong>composition rate</strong>: the estimated number of times per second Firefox OS is drawing frames to the hardware framebuffer. This is an estimate of the user-perceived framerate, and only an estimate. For example, the counter may report 60 compositions per second even if the screen is not changing. In that case the user-perceived framerate would be 0. However, when used with this caveat in mind and corroborated with other measurements, the monitor can be a useful and simple tool.</li>
+ <li>The middle number is the <strong>layer transaction rate</strong>, the estimated number of times per second processes are repainting and notifying the compositor. This number is mostly useful for Gecko platform engineers, but it should be less than or equal to the composition rate number on the left.</li>
+ <li>The right hand number is a measure of the number of pixels drawn as a percentage of the screen size. A number of 273 means the screen was painted 2.73 times. Ideally this number should be as close to 100 as possible.</li>
+</ul>
+<p><img alt="A screenshot of Firefox OS, showing three numbers in the top left hand corner that are measurements of app framerate." src="https://mdn.mozillademos.org/files/6889/framerate-fxos.jpg" style="width: 357px; height: 640px; display: block; margin: 0px auto;"></p>
+<h4 id="Time_to_load">Time to load</h4>
+<p>Firefox OS also has a tool that can help measure startup time, specifically the "first paint" time. The value shown by the tool — in the top right of the Firefox OS display — is the elapsed time between when the most recent application was launched, and an estimate of the first time that application painted its UI, in milliseconds. This number only approximates the real "first paint" time, and in particular underestimates it. However, lowering this number almost always correlates to improvements in real startup time, so it can be useful to quickly measure optimization ideas.</p>
+<p><img alt="A screenshot of Firefox OS, showing a number in the top right hand corner that is a measurement of the current app startup time, in milliseconds." src="https://mdn.mozillademos.org/files/6891/startup-time-fxos.jpg" style="width: 378px; height: 640px; display: block; margin: 0px auto;"></p>
+<h4 id="App_memory">App memory</h4>
+<p>Displays information on how much memory the app is using, and allows you to enable or disable the different items that use memory to show much each one is using in the current app. For example, the screen shot below only has <em>App memory</em> and <em>JS objects</em> checked, and the indicator on the bottom right is showing that the Settings app is using 414.77KB for JS objects.</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/7731/memory-usage.png" style="width: 320px; height: 480px; display: block; margin: 0px auto;"></p>
+<h3 id="Pseudo-localization">Pseudo-localization</h3>
+<p>When enabled, pseudo-languages like <em>Accented English</em> and <em>Mirrored English</em> are available for selection in <em>Settings &gt; Languages</em>.  With pseudo-localizations, you can test the localizability of your code in regular Gaia builds without having to add real language resources nor having to speak a foreign language.  For instance, you can make sure the layout scales well with longer strings, you can preview the app in a fake RTL language, or spot HTML elements wihout the <code>data-l10n-id</code> attribute (they will be displayed in regular English).</p>
+<p><img alt="Screenshot of pseudolocales" src="http://informationisart.com/images/qps.png" style="width: 600px; height: 440px; display: block; margin: 0px auto;"></p>
+<p>You can turn pseudo-localizations on by default when you build Gaia by adding the following line into <a href="https://github.com/mozilla-b2g/gaia/blob/master/build/config/common-settings.json">gaia/build/config/common-settings.json</a>:</p>
+<pre class="brush: json"> "devtools.qps.enabled": true</pre>
+<p><strong>Note:</strong> Pseudo-localizations are generated completely dynamically, each time an app is launched.  The performance and memory characteristics may be different than those of regular localizations.  If you specifically want to test performance of non-English languages, <a href="/en-US/Firefox_OS/Building#Building_multilocale">build multilocale Gaia</a> with real locales.</p>
+<h2 id="Graphics_settings">Graphics settings</h2>
+<h3 id="Flash_repainted_area">Flash repainted area</h3>
+<p>In this mode, every time a region of the screen is painted by Gecko, Gecko blits a random translucent color over the painted region. Ideally, only parts of the screen that visually change between frames will "flash" with a new color. But sometimes more area than is needed is repainted, causing large areas to "flash". This symptom may indicate that application code is forcing too much of its scene to update. It may also indicate bugs in Gecko itself.</p>
+<p><img alt="A screenshot of Firefox OS with a number of transparent overlays, showing the parts of the screen repainted with each new animation frame." src="https://mdn.mozillademos.org/files/6893/paint-update-fxos.jpg" style="width: 378px; height: 640px; display: block; margin: 0px auto;"></p>
+<h3 id="Enable_APZ_for_all_content_(Async_PanZoom)">Enable APZ for all content (Async Pan/Zoom)</h3>
+<p>When enabled, the Async Pan/Zoom module allows panning and zooming to be performed on asynchronously, on another thread, with some noticeable differences to rendering behaviour. To find out more, read the <a href="https://wiki.mozilla.org/Platform/GFX/APZ">MozillaWiki APZ</a> article.</p>
+<h3 id="Overscrolling">Overscrolling</h3>
+<p>This enables and disables the behaviour in Firefox 2.1+ where the display stretches in an elastic manner when you scroll past the end of a page, then shrinks back again when you stop dragging the display. The behaviour's full name is <em>elastic overscroll</em>.</p>
+<h3 id="Tiling_(was_Layers_Enable_tiles)">Tiling (was Layers: Enable tiles)</h3>
+<p>Introduced in Firefox OS 1.4, this feature enables the painting of content to the screen in smaller chunks ("tiles") rather than painting the whole screen at once. This is mainly useful for platform QA work involving reducing checkerboarding and finding regression windows.</p>
+<h3 id="Simple_tiling_(was_Layers_Simple_tiles)">Simple tiling (was Layers: Simple tiles)</h3>
+<p>This flips between the two different content painting implementations described in the section above.</p>
+<h3 id="Low-precision_painting">Low-precision painting</h3>
+<p>Enabling this option makes Gecko paint a low-precision (blurry) version of the content when scrolling really fast. This is useful because it's quicker to paint, and so helps us avoid displaying blank areas (i.e. checkerboarding) while scrolling quickly. It should only be visible to the user temporarily; once the user stops scrolling we fill in the low-precision areas with high-precision content.</p>
+<h3 id="Low-precision_transparency">Low-precision transparency</h3>
+<p>This is an additional flag for low-precision painting, which makes the low-precision content half transparent. This makes it a little more subtle and less jarring for the user.</p>
+<h3 id="Hardware_composer_(was_Enable_hardware_compositing)">Hardware composer (was Enable hardware compositing)</h3>
+<p>When enabled, this setting causes the device to use its <a href="https://source.android.com/devices/graphics.html#hwc">Hardware Composer</a> to composite visual elements (surfaces) to the screen.</p>
+<h3 id="Draw_tile_borders_(was_Layers_Draw_tile_borders)">Draw tile borders (was Layers: Draw tile borders)</h3>
+<p>This is very similar to the {{ anch("Draw layer borders") }} option, the difference being that it also draws the borders for individual tiles as well as the borders around layers.</p>
+<h3 id="Draw_layer_borders">Draw layer borders</h3>
+<p>When this setting is enabled, a brightly colored border is added around all the different layers painted to the display — great for diagnosing layout issues.</p>
+<p><img alt="A screenshot from Firefox OS showing an opened select form with the draw layers borders option enabled, resulting in colored borders being drawn on all the different rendered layers." src="https://mdn.mozillademos.org/files/6897/paint-layers-borders.png" style="width: 320px; height: 480px; display: block; margin: 0px auto;"></p>
+<h3 id="Dump_layers_tree">Dump layers tree</h3>
+<p>This option enables <code>layers.dump</code>, which causes a copy of the compositor's layer tree to be dumped to logcat on every frame composited to the screen; this is mainly useful for platform graphics performance work, rather than regular web development.</p>
+<h3 id="Cards_View_Screenshots">Cards View: Screenshots</h3>
+<p>When enabled, this specifies that app screenshots will be taken when the open apps are displayed in card view. If disabled, app icons are shown in the center of blank cards for the card view instead.</p>
+<h2 id="Window_management_settings">Window management settings</h2>
+<h3 id="Software_home_button">Software home button</h3>
+<p>Enabling this option creates a software home button that can provide the same functionality as the equivalent hardware button if it is not available. This is intended for future use on devices that are likely to not have hardware home buttons, like tablets.</p>
+<h3 id="Home_gesture">Home gesture</h3>
+<p>Enabling this option allows you to swipe upwards towards the center from outside the screen to bring up the homescreen. Again, this can provide the same functionality as the equivalent hardware button if it is not available, and is intended for future use on devices that are likely to not have hardware home buttons, like tablets.</p>
+<h3 id="Continuous_transition">Continuous transition</h3>
+<p>This setting allows you to decide whether app keyboards open immediately or continuously (with a  transition). Disabling such transition effects are useful on low end devices, when they cause performance to suffer.</p>
+<h3 id="App_transition">App transition</h3>
+<p>Turn this on and then off again and you will disable all app closing/opening transitions: all apps will now just show immediately, without the smooth animation, and keyboards will also open/close without animation. Like "Continuous transition enabled", this is meant for improving performance on low end devices, but it has more of an effect.</p>
+<h3 id="App_suspending">App suspending</h3>
+<p>If enabled, this specifies that when an app is killed in the background, it will be kept in history and reopened when you open it from homescreen/card view. If disabled, such apps are not kept in history/card view.</p>
+<h2 id="Debug_settings">Debug settings</h2>
+<h3 id="Log_slow_animations">Log slow animations</h3>
+<p>This tool tries to help developers understand why animations are not offloaded to the compositor to be run efficiently as possible. It reports "bugs" like trying to animate elements that are too large, or trying to animate CSS properties that can't be offloaded. The messages you'll get on the device will look like the following:</p>
+<pre>I/Gecko   ( 5644): Performance warning: Async animation disabled because frame size (1280, 410) is bigger than the viewport (360, 518) [div with id 'views']
+</pre>
+<h3 id="Geolocation_output_in_ADB">Geolocation output in ADB</h3>
+<p>Enables logging of geolocation data to adb logcat. This helps with debugging both the GPS stack (namely we get NMEA callback) and MLS use.</p>
+<h3 id="Wi-Fi_output_in_adb">Wi-Fi output in adb</h3>
+<p>Enabling this option adds information about Wi-Fi to the adb logs (error logs from the console can be accessed using <code>adb logcat | grep "Error"</code> in the Terminal.)</p>
+<h3 id="Bluetooth_output_in_adb">Bluetooth output in adb</h3>
+<p>Enabling this option adds information about Bluetooth to the adb logs (error logs from the console can be accessed using <code>adb logcat | grep "Error"</code> in the Terminal.)</p>
+<h3 id="Console_enabled">Console enabled</h3>
+<p>When enabled, this option lets you use the <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Using_the_Remote_Web_Console" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/Using_the_Remote_Web_Console">Web Console</a> in Firefox to remotely access the console output on the device; without this option enabled, the {{domxref("console.log()")}} function does nothing.</p>
+<h3 id="Gaia_debug_traces">Gaia debug traces</h3>
+<p>Enabling this directly enables DEBUG traces in Gaia; see {{ bug("881672") }} for more details.</p>
+<div class="note">
+ <p><strong>Note</strong>: Unfortunately, not every app supports this mechanism to print their debug log. Instead, they control a "DEBUG" flag in code directly, so enabling this flag does NOT ensure that you'll see all debug logs.</p>
+</div>
+<h3 id="Show_accessibility_settings">Show accessibility settings</h3>
+<p>This enables the accessibility settings menu, subsequently found at <em>Settings &gt; Accessibility</em>. The options contained within the accessibility settings are as follows:</p>
+<h4 id="Screen_reader">Screen reader</h4>
+<p>Enabling this option turns on Firefox OS's screen reader. This is technology that allows a blind person to use a Firefox OS device. Currently at a very early stage, it changes the way the standard touch events work. When the screen reader is on, you must interact with the screen as follows:</p>
+<ul>
+ <li>Touch somewhere to focus that app (or whatever) and be alerted as to what it is. This is indicated both by audible speech output and a rectangle around the selected item. Double tap anywhere on the screen (two taps in rapid succession) to activate the item that has the rectangle around it.</li>
+ <li>Swipe from left to right to move sequentially through items on the screen. Items are moved through from left to right, then top to bottom, including scrolling the screen vertically if there are more items to display, and you will be alerted as to each one's name via speech output and a rectangle. Swiping right to left moves through the items in reverse order. Again, double-tap the screen to execute the currently highlighted item.</li>
+ <li>Do a swipe with two fingers — left, right, up or down — to scroll the screen in that direction. This is equivalent to swiping one finger across the screen in the given direction when the screen reader is not running. For example, a two-finger swipe left on the first home screen will flip to the second one, and a two-finger swipe upwards on a home screen or browser would cause the screne to scroll downwards to show more content.</li>
+</ul>
+<div class="note">
+ <p><strong>Note</strong>: If you have turned the screen reader on and wish to disable it again, you must navigate back to the setting via these new gestures and double-tap the checkbox once it is highlighted to turn it off again. That will restore the touch screen functionality to its default behaviour.</p>
+</div>
+<p><strong>Note</strong>: In Firefox 1.4 and above, there is a quick toggle for the screen reader. Press volume up, then down, three times (up, down, up, down, up, down). The screen reader will instruct you to perform this same action again (volume up, down, up, down, up, down) to turn it on if it is not running, or to turn it off if it is already running. If you do not want to change the current toggle state, simply do something else. That way, you can turn it on and off at will to test your web application for accessibility without having to navigate the accessibility settings menu each time.</p>
+<h4 id="Speech_volume">Speech volume</h4>
+<p>A slider that controls how loud the speech is delivered.</p>
+<h4 id="Speech_rate">Speech rate</h4>
+<p>A slider that controls how fast the speech is delivered.</p>
+<h3 id="Use_Marketplace_reviewer_certs">Use Marketplace reviewer certs</h3>
+<p>TBD</p>
+<h3 id="Shake_to_save_system_log">Shake to save system log</h3>
+<p>TBD</p>
+<h3 id="Verbose_app_permissions">Verbose app permissions</h3>
+<div class="note">
+ <p><strong>Note</strong>: Introduced with Firefox 2.1</p>
+</div>
+<p>When this is enabled, developers (and privacy enthusiasts) may modify all permissions granted to installed privileged apps, using The "App Permission" pane in the Settings app. The app sub-pages under here are updated upon enabling the setting to provide a list of each API permission is requested for in the app's manifest file, along with choices to set that permission to. For example, "Schedule Alarms" appears with choices of <em>Ask</em>, <em>Deny</em> and <em>Grant</em>. Note that some apps may be unable to deal with changed permissions. If you experience any odd behavior, consider resetting the permission or re-installing the app.</p>
+<h3 id="Launch_first_time_use">Launch first time use</h3>
+<p>The "Launch first time use" button runs the "First-Time Use" (FTU) program; this lets you go through the initial setup and tutorial process, and is useful when trying to debug that process, or if you want to re-configure your device from scratch.</p>
+<h2 id="Software_updates">Software updates</h2>
+<h3 id="Update_channel">Update channel</h3>
+<p>Enables you to specify different update channels to get software updates from when your device receives OTA updates. Options are <code>nightly</code>, <code>aurora</code> ... (others?)</p>
+<h3 id="Update_URL">Update URL</h3>
+<p>Enables you to specify different URLs from which to receive your updates.</p>
+<h2 id="Obsolete_settings">Obsolete settings</h2>
+<p>This section lists settings that are no longer provided, or no longer exist in the same state, but might still be interesting if you are running an older version of Firefox OS.</p>
+<h3 id="Accessibility">Accessibility</h3>
+<p>In versions of Firefox earlier than newer 1.4 versions, this controls the accessibility settings, as explained in the {{ anch("Show_accessibility_settings") }} section above.</p>
+<h3 id="Grid">Grid</h3>
+<p>The "Grid" option, when enabled, causes the Firefox OS display to be overlaid with a grid pattern to help you gauge positioning and alignment of items. For example, below we see the Browser app running with the Grid option enabled:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5071/Grid.png" style="width: 320px; height: 480px; display: block; margin: 0px auto;"></p>
+<p>The grid's heavier lines are 32 pixels apart, both horizontally and vertically.</p>
+<h3 id="Show_frames_per_second">Show frames per second</h3>
+<p>In Firefox OS versions older than newer 1.4, enabling this displays frames per second, as explained in the {{ anch("Frames_per_second") }} section above.</p>
+<h3 id="Show_time_to_load">Show time to load</h3>
+<p>In Firefox OS versions older than newer 1.4, enabling this displays time to load information, as explained in the {{ anch("Time_to_load") }} section above.</p>
+<h3 id="Rocketbar_enabled">Rocketbar enabled</h3>
+<p>In Firefox OS versions older than newer 1.4, this option enables the new <a href="https://groups.google.com/forum/#!topic/mozilla.dev.gaia/Nlfbrq1KMP0">Firefox Rocketbar</a> on your device, which provides a useful new way to switch between apps, search, and more. When enabled, you'll find a search icon at the top left of the device, and the RocketBar can be brought up by swiping from the top left of the device towards the bottom left.</p>
+<div class="note">
+ <p><strong>Note</strong>: In newer versions of Firefox OS, Rocketbar is enabled automatically and cannot be turned off.</p>
+</div>
+<h3 id="Contacts_debugging_output_in_adb">Contacts debugging output in adb</h3>
+<p>Enabling this option adds debugging information about contacts to the adb logs (error logs from the console can be accessed using <code>adb logcat | grep "Error"</code> in the Terminal.)</p>
+<h3 id="Progressive_paint_(was_Layers_Progressive_paint)">Progressive paint (was Layers: Progressive paint)</h3>
+<p>This was introduced to help with debugging of the <a href="https://wiki.mozilla.org/Platform/GFX/APZ">Async Panning/Zoom module</a> (APZ) during its implementation. Now APZ implementation is complete, this option is deprecated, and will be removed from future versions (see {{ Bug("1003228") }}).</p>
+<h3 id="Displayport_Heuristics">Displayport Heuristics</h3>
+<ul>
+ <li>Default</li>
+ <li>Center displayport</li>
+ <li>Assume perfect paints</li>
+ <li>Taller displayport</li>
+ <li>Faster paints</li>
+ <li>No checkerboarding</li>
+</ul>
+<p>These options were introduced to help with debugging of the <a href="https://wiki.mozilla.org/Platform/GFX/APZ">Async Panning/Zoom module</a> (APZ) during its implementation, specifically to allow QA to experiment with different repainting heuristics to see which resulted in the least amount of checkboarding.. Now APZ implementation is complete, these options are deprecated, and will be removed from future versions (see {{ Bug("1003228") }}).</p>
+<h3 id="Edges_gesture">Edges gesture</h3>
+<p>Enabling this option allows you to swipe left and right from outside the screen towards the center, to navigate to the next and previous sheets (either web pages in the browser, or views inside another app.) This basically works like the browser navigator bar in Firefox, but is enabled by default in Firefox 2.1+.</p>
+<h2 id="Keyboard_layouts">Keyboard layouts</h2>
+<p>In addition to the developer-specific options listed above, Firefox OS &lt; 1.4's developer settings featured keyboard layout options. These let you toggle on and off the then-experimental Chinese input methods:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5079/InputMethods.png"></p>
+<p>As of Firefox 1.4, these options have been removed. This is because the Chinese keyboard layout implementations (zhuyin and pinyin) have now been completed.</p>
+<div class="note">
+ <p><strong>Note</strong>: For other keyboard layouts still under development, such as Japanese, we now have a build-time config to opt them in.</p>
+</div>
+<p> </p>
diff --git a/files/de/archive/b2g_os/debugging/index.html b/files/de/archive/b2g_os/debugging/index.html
new file mode 100644
index 0000000000..a83bb6ae67
--- /dev/null
+++ b/files/de/archive/b2g_os/debugging/index.html
@@ -0,0 +1,80 @@
+---
+title: Debugging on Firefox OS
+slug: Archive/B2G_OS/Debugging
+tags:
+  - B2G
+  - Debugging
+  - Firefox OS
+  - NeedsTranslation
+  - QA
+  - Testing
+  - TopicStub
+translation_of: Archive/B2G_OS/Debugging
+---
+<div class="summary">
+ <p><span class="seoSummary">There are two main types of debugging you'll want to with Firefox OS: debugging apps, and debugging other aspects of the system.</span> This section of the site provides articles covering the different tools at your disposal to debug your Firefox OS code.</p>
+</div>
+<h2 id="Debugging_apps">Debugging apps</h2>
+<p>When debugging your web apps, the best tool at your disposal is Mozilla's powerful <a href="/en-US/Firefox_OS/Using_the_App_Manager">App Manager</a>, which allows you to run your apps directly on a real device or simulator, update any changes instantly, and debug them directly on the device using Mozilla's excellent <a href="https://developer.mozilla.org/en-US/docs/Tools" title="en-US/docs/Tools">developer tools</a>. This should be your first choice, especially for app/Gaia debugging.</p>
+<dl>
+ <dt>
+  <a href="/en-US/Firefox_OS/Using_the_App_Manager">Using the App Manager</a></dt>
+ <dd>
+  The App Manager is a new tool available in Firefox for Desktop, which provides a number of useful tools to help you test, deploy and debug HTML5 web apps on Firefox OS phones and the Firefox OS Simulator, directly from your browser.</dd>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Debugging_OOMs">Debugging out of memory errors on Firefox OS</a></dt>
+ <dd>
+  This article describes how B2G's multiprocess architecture affects what the phone does when we run out of memory, and how to understand and debug OOM crashes.</dd>
+</dl>
+<h2 id="Debugging_GaiaB2G">Debugging Gaia/B2G</h2>
+<p>If you want to debug code from the Gaia apps suite or B2G itself, the following tools will be of use to you.</p>
+<dl>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Debugging_using_the_desktop_B2G_client" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/Debugging_using_the_desktop_B2G_client">Debugging using the desktop B2G client</a></dt>
+ <dd>
+  You can use the dedicated B2G desktop application (and associated tools) to debug multiple aspects of B2G and Gaia.</dd>
+ <dt>
+  <a href="/en-US/Firefox_OS/Hacking_Firefox_OS/Quickstart_guide_to_Gaia_development">Quickstart guide to Gaia development</a></dt>
+ <dd>
+  This guide provides a very quick easy guide to developing and debugging Gaia apps, including running Gaia inside desktop Firefox, and debugging Gaia with App Manager.</dd>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Debugging_B2G_using_gdb" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/Debugging_B2G_using_gdb">Debugging B2G using gdb</a></dt>
+ <dd>
+  The popular gdb debugger can be used to debug Firefox OS and web apps running on a device, or on an emulator. This guide will show you how it's done.</dd>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Debugging_B2G_using_valgrind" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/Debugging_B2G_using_gdb">Debugging B2G using Valgrind</a></dt>
+ <dd>
+  Valgrind gives developers access to information about memory allocations, threads, and other information important to performance. This guide shows how to run Valgrind either on desktop B2G or select phone hardware.</dd>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Debugging/HTTP_logging#Firefox_OS_phones" title="/en-US/docs/Mozilla/Debugging/HTTP_logging#Firefox_OS_phones">Getting NSPR logs in B2G</a></dt>
+ <dd>
+  You can use NSPR logs to record HTTP and other networking.</dd>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Debugging/Debugging_OpenGL" title="/en-US/docs/Mozilla/Debugging/Debugging_OpenGL">Debugging OpenGL</a></dt>
+ <dd>
+  How to debug OpenGL code on Firefox OS.</dd>
+</dl>
+<h2 id="General_setup_and_information"><strong>General setup and information</strong></h2>
+<p>The following articles provide information on individual aspects of setup for Firefox OS development. The chances are that you won't need these, especially if you are just debugging apps using the App Manager. But we have made them available here in case you do.</p>
+<dl>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Developer_settings" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/Developer_settings">Developer settings for Firefox OS</a></dt>
+ <dd>
+  There are a number of settings options available for developers on Firefox OS. This guide explains what they do and how to take advantage of them.</dd>
+ <dt>
+  <a href="/en-US/Firefox_OS/Debugging/Installing_ADB">Installing and using ADB</a></dt>
+ <dd>
+  Many aspects of Firefox OS development require installation of <code>adb</code>, the Android Debug Bridge. This article explains how to do that, and shares some common useful ADB commands.</dd>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging">On-device console logging</a></dt>
+ <dd>
+  How to log to console on a Firefox OS device, and how to access the resulting logs for review on your computer.</dd>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Connecting_a_Firefox_OS_device_to_the_desktop" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/Debugging_Firefox_OS_apps_in_desktop_Firefox">Connecting a Firefox OS device to the desktop</a></dt>
+ <dd>
+  This short guide explains how to set up your Firefox OS device and your desktop so that the desktop can communicate with the device over USB.</dd>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Setting_up" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/Setting_up">Setting up to debug Firefox OS code</a></dt>
+ <dd>
+  Before you can begin using most of the tools integrated into Firefox for debugging code running under Firefox OS, you need to do a little configuration work. This article explains what you need to do.</dd>
+</dl>
diff --git a/files/de/archive/b2g_os/debugging/installing_adb/index.html b/files/de/archive/b2g_os/debugging/installing_adb/index.html
new file mode 100644
index 0000000000..9e49cc786b
--- /dev/null
+++ b/files/de/archive/b2g_os/debugging/installing_adb/index.html
@@ -0,0 +1,70 @@
+---
+title: ADB installieren und benutzen
+slug: Archive/B2G_OS/Debugging/Installing_ADB
+tags:
+  - ADB
+  - B2G
+  - Debugging
+  - Firefox OS
+  - Installation
+  - mobil
+translation_of: Archive/B2G_OS/Debugging/Installing_ADB
+---
+<div class="summary">
+ <p>Viele Aspekte der Firefox OS Entwicklung erfordern die Installation von ADB, der Android Debug Bridge. Dieser Artikel erklärt, wie das geht und zeigt einige häufig verwendete und nützliche ADB Befehle.</p>
+</div>
+<h2 id="ADB_Installieren">ADB Installieren</h2>
+<p>ADB kann als Bestandteil des Android SDK Pakets für Mac, Linux oder Windows heruntergeladen und installiert werden - besuchen Sie dazu die <a href="http://developer.android.com/sdk/index.html">Get the Android SDK</a> Seite.</p>
+<p>Bei neueren Linux Distributionen ist <code>adb </code>bereits in den Repositories verfügbar. Für Ubuntu 12.10 und neuere, führen Sie folgenden Befehl aus:</p>
+<pre>sudo apt-get install android-tools-adb</pre>
+<p>Oder für Fedora 18/19:</p>
+<pre>sudo yum install android-tools</pre>
+<p>Oder auf OSX mit <a href="http://brew.sh/">Homebrew</a>:</p>
+<pre>brew install android-platform-tools</pre>
+<p>Falls ihre Distribution kein Paket für <code>adb </code>zur Verfügung stellt (z.B. Ubuntu 12.04 oder Fedora 17), müssen Sie das <a class="external" href="http://developer.android.com/sdk/index.html" title="http://developer.android.com/sdk/index.html">Android SDK starter package</a> für ihre Plattform installieren (wählen Sie die Option<em> ADT Bundle</em>, nicht <em>SDK Tools Only</em>). Führen Sie dann deren Paketmanager, <code>$SDK_HOME/tools/android </code>aus und nutzen Sie dann die GUI zum Installieren von "Android SDK Platform-tools".</p>
+<p>Finden Sie heraus, wo <code>adb</code> installiert wurde (üblicherweise in <code>usr/bin</code>, unter Umständen zusätzlich in <code>adt/platform-tools</code>, je nach Installationsart). Stellen Sie sicher, dieses Verzeichnis zu ihrem <code>PATH</code> hinzuzufügen. Dies erreichen Sie durch Hinzufügen  der Zeile</p>
+<pre>PATH=$SDK_HOME:$PATH</pre>
+<p>in der Sie <code>$SDK_HOME</code> durch den Pfad ihres android sdk  ersetzen, zu ihrer <code>~/.bashrc</code> oder vergleichbarem.</p>
+<h2 id="Fehlerbehebung">Fehlerbehebung</h2>
+<p>Wenn Sie eine 64-bit Installation verwenden, und Sie den Fehler "File not found" bei der Ausführung von 'adb' bekommen, obwohl diese Datei vorhanden ist, müssen Sie 32-bit Kompatibilitätsbibliotheken installieren. Um das mit apt zu tun:</p>
+<pre>sudo apt-get install ia32-libs</pre>
+<h2 id="Häufig_verwendete_ADB_Befehle">Häufig verwendete ADB Befehle</h2>
+<p>Der folgende Abschnitt erklärt einige häufig verwendete, nützliche <code>adb</code> Befehle.</p>
+<h2 id="Den_b2g_Prozess_neu_starten">Den b2g Prozess neu starten</h2>
+<p>b2g ist das Äquivalent einer <a href="/en-US/docs/XULRunner" title="/en-US/docs/XULRunner">XULRunner </a>Anwendung die auf einem Smartphone auf einem Android-basierten Kernel ausgeführt wird. Manchmal kann ein Neustart dieser Anwendung nützlich sein; so können Sie die Anwendungsumgebung zurücksetzen ohne das Gerät neu zu starten. Sie können dies tun indem Sie folgendes in ihr Terminal eingeben, während ihr Gerät mit ihrem Computer verbunden ist (oder während der Ausführung des Debuggers):</p>
+<pre>adb shell killall b2g</pre>
+<h2 id="Portweiterleitung_zum_Debuggen_aktivieren">Portweiterleitung zum Debuggen aktivieren</h2>
+<p>Um einfach eine Portweiterleitung zu aktivieren (zum Beispiel wenn Sie den App Manager nutzen um Apps auf ihrem Firefox OS Gerät zu debuggen), geben Sie folgenden Befehl in Ihrem Terminal ein:</p>
+<pre class="language-html">adb forward tcp:6000 localfilesystem:/data/local/debugger-socket</pre>
+<p>Dies müssen Sie jedesmal beim neu Starten oder Aus- und wieder Einstecken des Smartphones tun. Sie können die Socket Nummer ändern, wenn gewünscht.</p>
+<h2 id="Portweiterleitung_zu_einem_lokalen_Rechner">Portweiterleitung zu einem lokalen Rechner</h2>
+<p>Um Ports zu einem lokalen Rechner weiterzuleiten, müssen Sie die <a href="http://people.mozilla.org/~jmuizelaar/forward/">netcat and ssh binaries </a>herunterladen und folgende Befehle ausführen:</p>
+<pre class="brush: bash"># this is an awful hack but does in fact work...
+host$ adb forward tcp:7979 tcp:6969
+
+# make some named pipes so that we can make a bidirectional netcat
+phone$ mknod readback p
+host$ mknod readback p
+
+# this sets up a one time use connection to back to the host
+# listen on ports 6969 and 5959 and forward all the information between them
+phone$ ./netcat -l -p 6969 &lt; readback | ./netcat -l -p 5959 &gt; readback
+# connect to port 7979 (port 6969 on the device) and the local ssh server and forward all information between them
+host$ ./netcat localhost 7979 &lt; readback | ./netcat localhost 22 &gt; readback
+
+# now when we connect to port 5959 on the phone it will be like connecting to ssh server on the host
+
+# use the netcat reversal to set up an ssh connection back to the host and forward port 9999 on the device to 'localhost:8000' (this could be anything like 'google.com:80')
+phone$ ./ssh localhost -p 5959 -L 9999:localhost:8000</pre>
+<p>Das wird Port 9999 auf dem Gerät zu Port 8000 des Hosts weiterleiten.</p>
+<p>Alternativ können Sie einen SSH-Server (<a href="http://people.mozilla.org/~jmuizelaar/forward/dropbear">dropbear</a> und <a href="http://people.mozilla.org/~jmuizelaar/forward/host_key">host_key</a>) mit folgenden Befehlen direkt auf dem Gerät verwenden:</p>
+<pre class="brush: bash">phone$ DROPBEAR_PASSWORD=root ./dropbear -p 9000 -F -v -a -r host_key ./dropbear
+host$ adb forward tcp:8888 tcp:9000
+# public key authentication has been hard coded to succeed (make sure you have a public key for ssh to use)
+host$ ssh -vvv root@localhost -p 8888 -R 9999:people.mozilla.org:80
+</pre>
+<p>Weitere Anleitungen:</p>
+<ul>
+ <li><a href="http://k.japko.eu/android-dropbear.html">Instructions for building dropbear</a></li>
+ <li><a href="http://people.mozilla.org/~jmuizelaar/forward/dropbear-b2g.patch">dropbear patch</a> to disable the crash from missing environment variables and hard code authetication sucess.</li>
+</ul>
diff --git a/files/de/archive/b2g_os/debugging/verbinden_eines_firefox_os_geräts_mit_dem_rechner/index.html b/files/de/archive/b2g_os/debugging/verbinden_eines_firefox_os_geräts_mit_dem_rechner/index.html
new file mode 100644
index 0000000000..d82f69789d
--- /dev/null
+++ b/files/de/archive/b2g_os/debugging/verbinden_eines_firefox_os_geräts_mit_dem_rechner/index.html
@@ -0,0 +1,41 @@
+---
+title: Connecting a Firefox OS device to the desktop
+slug: Archive/B2G_OS/Debugging/Verbinden_eines_Firefox_OS_Geräts_mit_dem_Rechner
+tags:
+  - ADB
+  - Firefox OS
+translation_of: Archive/B2G_OS/Debugging/Connecting_a_Firefox_OS_device_to_the_desktop
+---
+<div class="summary">
+ <p><span class="seoSummary">Diese Anleitung erklärt, wie man ein Firefox OS  Gerät mit dem Rechner über USB verbindet.</span></p>
+</div>
+<div class="note">
+ <p><strong>Achtung</strong>: Um Apps auf einem Firefox OS Gerät zu debuggen und wenn auf dem Gerät Firefox 1.2+ läuft, ist der beste Weg den App Manager zu benutzen. Details können unter <a href="/en-US/Firefox_OS/Using_the_App_Manager">Benutzung des App Mangers</a> nachgelesen werden. Wird eine Version von Firefox OS kleiner 1.2 benutzt, kann man unter <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Setting_up">Einrichtung des Firefox OS Debugging Modus unter Verwendung der Entwickler Tools</a> mehr über das Standard Remote Debugging  erfahren.</p>
+</div>
+<h2 id="Einrichtung_des_Geräts">Einrichtung des Geräts</h2>
+<p>Auf deinem Firefox OS Gerät (<a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Developer_settings#The_Developer_panel">see the layout</a>):</p>
+<ol>
+ <li>öffnen der App Einstellungen, dann <code>Geräteinformationen</code> &gt; <code>Weitere Informationen</code> &gt; Entwickler.</li>
+ <li>Im Entwickler Menü  "Debugging über USB" aktivieren.</li>
+</ol>
+<h2 id="Einrichtung_des_Rechners">Einrichtung des Rechners</h2>
+<p>Um ein Gerät mit dem Rechner zu verbinden muss die <a class="external" href="http://developer.android.com/tools/help/adb.html" title="http://developer.android.com/tools/help/adb.html">Android Debug Bridge (adb)</a> installiert sein. Beachte dass das <a href="/en-US/docs/Tools/Firefox_OS_Simulator" title="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> add-on eine adb mitbringt.</p>
+<p>Instructions for setting up your desktop are specific to your operating system and are detailed in point 3 of <a class="external" href="https://developer.android.com/tools/device.html" title="https://developer.android.com/tools/device.html">"Setting up a Device for Development"</a> on the Android developer site. We've listed some additional instructions below.</p>
+<h3 id="Spezielle_Anweisungen_für_Mac_OS_X">Spezielle Anweisungen für Mac OS X</h3>
+<p>If you're running Mac OS X, you have downloaded a package which has a name along <code>adt-bundle-mac-x86_64-20130522</code>. Put that folder into the Applications folder, so that you get <code>/Applications/adt-bundle-mac-x86_64-20130522/</code> which contains two directories: <code>eclipse</code> and <code>sdk</code>. Then you can edit your <code>~/.bashrc</code> and add</p>
+<pre>export PATH="/Applications/adt-bundle-mac-x86_64-20130522/sdk/platform-tools:$PATH"</pre>
+<p>(It will be ready for the next time you start your shell). You can now type on the CLI of the shell:</p>
+<pre>adb devices
+</pre>
+<p>and it will return a list of connected devices such as:</p>
+<pre>List of devices attached
+AA:BB:A5:B5:AA:BB    device</pre>
+<h3 id="Spezielle_Anweisungen_für_Linux">Spezielle Anweisungen für Linux</h3>
+<p>If you're running Linux, the vendor ID to use for Firefox OS Geeksphone devices is <code>05c6</code>, so your <code>/etc/udev/rules.d/51-android.rules</code> file should contain an entry similar to:</p>
+<pre class="bash" style="font-family: monospace;"><span style="color: #007800;">SUBSYSTEM</span>=="usb", ATTR<span style="color: #7a0874; font-weight: bold;">{</span>idVendor<span style="color: #7a0874; font-weight: bold;">}</span>=="05c6", <span style="color: #007800;">MODE</span>="0666", <span style="color: #007800;">GROUP</span>="plugdev"</pre>
+<h3 id="Spezielle_Anweisungen_für_Windows">Spezielle Anweisungen für Windows</h3>
+<p>You can download Windows drivers for the Geeksphone from the <a href="http://www.geeksphone.com/downloads/fos/fos_usb_driver.zip" title="http://www.geeksphone.com/downloads/fos/fos_usb_driver.zip">Geeksphone website</a>.</p>
+<p>Windows 8 by default will not let you install unsigned drivers. See this tutorial on <a href="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html" title="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html">"How to install an unsigned driver on Windows 8"</a>.</p>
+<p>Since Windows XP Home Edition doesn't include <code>tasklist.exe</code>, Simulator won't detect the device. This can be solved downloading that file from <a href="http://www.computerhope.com/download/winxp.htm">ComputerHope website</a> and putting it in <code>Windows\System32</code> folder.</p>
+<h2 id="Einrichtung_überprüfen">Einrichtung überprüfen</h2>
+<p>Once you've followed these instructions, attach the device to the desktop using a USB cable, open a command prompt and type "<code>adb devices</code>" (ensuring that adb is in your path). You should see your Firefox OS device listed in the output.</p>
diff --git a/files/de/archive/b2g_os/developing_firefox_os/filing_bugs_against_firefox_os/index.html b/files/de/archive/b2g_os/developing_firefox_os/filing_bugs_against_firefox_os/index.html
new file mode 100644
index 0000000000..6a269b17bc
--- /dev/null
+++ b/files/de/archive/b2g_os/developing_firefox_os/filing_bugs_against_firefox_os/index.html
@@ -0,0 +1,183 @@
+---
+title: Firefox OS Fehler melden
+slug: Archive/B2G_OS/Developing_Firefox_OS/Filing_bugs_against_Firefox_OS
+tags:
+  - Abbruch
+  - Bugs
+  - Bugzilla
+  - Fehler
+  - Firefox OS
+translation_of: Archive/B2G_OS/Developing_Firefox_OS/Filing_bugs_against_Firefox_OS
+---
+<div class="summary">
+<p>Dieser Artikel enthält eine Anleitung zum Melden von Fehlern zum Firefox OS Projekt, zu Gaia und zu B2G (Boot to Gecko).</p>
+</div>
+
+<h2 id="Bugzilla">Bugzilla</h2>
+
+<p>Wie die meisten Mozilla-Projekte nutzen wir <a href="https://developer.mozilla.org/de/docs/Mozilla/Bugzilla">Bugzilla</a> für die Fehler- und Problemverfolgung. Du kannst Fehler an <a href="https://bugzilla.mozilla.org/">Bugzilla</a> melden, wenn Du Fehler entdeckt hast — wir haben eine <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox%20OS">eigene Bugzilla Kategorie (Product) für Firefox OS</a> mit Unter-Kategorien (Components) für <a href="https://developer.mozilla.org/de/Firefox_OS/Platform/Gaia">Gaia</a>, <a href="https://developer.mozilla.org/en-US/Firefox_OS/Platform/Gonk">Gonk</a> und <a href="https://developer.mozilla.org/de/docs/Mozilla/Gecko">Gecko</a>. Du solltest diese Kategorien verwenden, um Fehler und Probleme bezüglich Firefox OS, Gaia etc. zu melden.</p>
+
+<h3 id="Fehler_melden">Fehler melden</h3>
+
+<p>Zum effektiven Melden von Fehlern und Problemen kannst Du dieses <a href="http://mzl.la/1KL4ktp">Bugzilla Template</a> verwenden. Hinweise zum Ausfüllen des Templates findest Du weiter unten.</p>
+
+<h3 id="Pflichtfelder_und_optionale_Felder">Pflichtfelder und optionale Felder</h3>
+
+<p>Die folgenden Felder in Bugzilla sind immer auszufüllen:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><strong>Feld</strong></th>
+   <th scope="col"><strong>Beschreibung</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Component</td>
+   <td>Kategorie, in die der Fehler gehört. Wenn der Fehler in keine der vorhandenen Kategorien passt kannst Du "General" verwenden.</td>
+  </tr>
+  <tr>
+   <td>Summary</td>
+   <td>Zusammenfassung, die den Fehler kurz und treffend beschreibt.</td>
+  </tr>
+  <tr>
+   <td>Description</td>
+   <td>Aussagefähige Beschreibung des Fehlers. Eine gute Fehlermeldung sollte die Schritte zum Reproduzieren (steps to reproduce, STR) des Fehlers, die erwarteten und die tatsächlichen Ergebnisse enthalten. Bitte gib auch an, wie oft dieser Fehler auftritt (z.B. wenn Du die Schritte öfter wiederholst).</td>
+  </tr>
+  <tr>
+   <td>Build Information</td>
+   <td>Gehe zu Einstellungen &gt; Geräteinformationen &gt; Weitere Informationen und füge folgende Informationen in die Fehlermeldung ein: Betriebssystemversion, Plattform-Version, Build-ID, Updatekanal und die Informationen zum Commit auf Git. Falls Du einen Mac oder Linux Computer mit adb hast und dort git installiert ist, dann kannst Du <a href="https://github.com/Mozilla-TWQA/B2G-flash-tool/blob/master/check_versions.py">dieses Skript</a> ausführen und dessen Ergebnis in die Meldung kopieren.</td>
+  </tr>
+  <tr>
+   <td>Screenshots</td>
+   <td>Bitte füge Bildschirmfotos ein. Das kann uns helfen, den Fehler zu analysieren. Auf dem Flame Smartphone drückst Du dafür 2 Sekunden lang gleichzeitig den Ein-/Aus Schalter und die "Lautstärke runter/leiser" Taste bis auf dem Display eine Bestätigung des Bildschirmfotos angezeigt wird. Anschließend überträgst Du dieses Foto via USB auf Deinen Computer.</td>
+  </tr>
+  <tr>
+   <td>Video</td>
+   <td>Falls sich Dein Fehler auf ungewöhnliche Veränderungen des Displays bezieht die mit einem Bildschirmfoto nicht dargestellt werden können, dann mach bitte ein Video davon. Dieses Video kannst Du dann als Anhang zur Fehlermeldung hinzufügen. Du kannst das Video auch nach YouTube hochladen und die URL in die Fehlermeldung einfügen.</td>
+  </tr>
+  <tr>
+   <td>ADB logs</td>
+   <td>Falls adb auf Deinem Computer installiert ist: Schließe bitte Dein Smartphone an den Computer an und führe das Kommando |adb logcat| aus. Bitte füge das Ergebnis dieses Kommandos in eine Text-Datei ein und füge diese als Anhang zur Fehlermeldung hinzu.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Die folgenden Felder sind optional:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><strong>Feld</strong></th>
+   <th scope="col"><strong>Beschreibung</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Depends/Block</td>
+   <td>Zeige uns Abhängigkeiten zu anderen Fehlermeldungen.</td>
+  </tr>
+  <tr>
+   <td>Keywords</td>
+   <td>Schlüsselwörter für Bugzilla. Bestimmte Support-Abteilungen nutzen diese zur Statusverfolgung von Fehlern.</td>
+  </tr>
+  <tr>
+   <td>Whiteboard</td>
+   <td>Beinhaltet Tags. Füge beliebige Tags zur Statusverfolgung hinzu. Du solltest keine vorhandenen Tags ohne Erlaubnis löschen.</td>
+  </tr>
+  <tr>
+   <td>See Also</td>
+   <td>Hin und wieder haben Fehler Bezug zu einem anderen Fehler. Das kannst Du hier angeben.</td>
+  </tr>
+  <tr>
+   <td>Flags</td>
+   <td>Kennzeichen für die Statusverfolgung; das am häufigsten verwendete Kennzeichen in Firefox OS Fehlern ist blocking-b2g. Wenn eine Meldung als blocking-b2g gekennzeichnet ist, dann kann der Fehler die Veröffentlichung eines Releases gefährden und ist somit besonders zu beachten.</td>
+  </tr>
+  <tr>
+   <td>Security</td>
+   <td>Wenn ein Fehler die Sicherheit der persönlichen Daten gefährdet, monetäre Verluste oder ähnliches verursacht, dann solltest Du dieses Feld ankreuzen. Somit ist die Fehlermeldung nur noch für ausgewählte Mitarbeiter sichtbar.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Nähere Informationen zu den Bugzilla-Feldern findest Du auf <a href="https://bugzilla.mozilla.org/page.cgi?id=fields.html">Bugzilla Fields</a>.</p>
+
+<h3 id="Lokalisierungs-Probleme_melden">Lokalisierungs-Probleme melden</h3>
+
+<p>Wenn Du eine nicht übersetzte Zeichenkette siehst, dann kann das zwei Gründe haben:</p>
+
+<ul>
+ <li>Der Übersetzer hat dies bewußt nicht übersetzt. In diesem Fall melde bitte keinen Fehler!</li>
+ <li>Der Übersetzer konnte dies wegen eines Problems mit der Lokalisierungs-Funktion nicht übersetzen (l12y). In diesem Fall melde bitte einen Fehler.</li>
+</ul>
+
+<h4 id="Wie_Lokalisierungs-Probleme_(l12y)_gemeldet_werden">Wie Lokalisierungs-Probleme (l12y) gemeldet werden</h4>
+
+<ol>
+ <li>Lege eine Meldung in Bugzilla an, als "Product" wählst Du 'Firefox OS'. Wähle unter "Component" die Firefox OS Komponente, in der das Lokalisierungsproblem auftritt. Trage bitte 'l12y' als Schlüsselwort in das Feld "Keyword" ein.</li>
+ <li>Fülle alle anderen Pflichtfelder aus.</li>
+</ol>
+
+<h3 id="Besondere_Schlüsselwörter_(Keywords)">Besondere Schlüsselwörter (Keywords)</h3>
+
+<p>Die folgende Tabelle enthält Informationen zu speziellen Schlüsselwörten, die Du in Firefox OX Fehlermeldungen häufiger finden wirst.</p>
+
+<p><br>
+ Du solltest immer die Kombination Build-Version/Betriebssystem/Plattform, unter der der Fehler behoben ist, ins Kommentarfeld der Fehlermeldung eintragen bevor Du den <em>Status</em> auf <em>Verified </em>setzt. Wenn der Fehler auf allen Plattformen gemeldet ist und Du die Behebung des Fehlers nur auf einer bestimmten Plattform verifizieren kannst, dann gebe dies bitte in der Fehlermeldung an. Bitte setze den <em>Status</em> der Meldung in einem solchen Fall nicht auf <em>Verified</em>. Es müssen erst alle Plattformen erfolgreich getestet worden sein, bevor der <em>Status</em> auf <em>Verified</em> gesetzt wird.<br>
+ <br>
+ Zu guter Letzt: Falls andere Meldungen als Duplikat Deiner Meldung markiert wurden und Du Deine Meldung auf <em>Verified</em> setzt, dann prüfe diese Duplikate bitte ebenfalls und kommentiere diese Meldungen entsprechend. Oftmals markieren Entwickler eine Meldung als Duplikat obwohl der Fehler nur ähnlich, aber nicht identisch ist. Solche Fehlermeldungen können übersehen werden, wenn der Status ungeprüft auf <em>Verified</em> gesetzt wird.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><strong>Keyword</strong></th>
+   <th scope="col"><strong>Beschreibung</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>meta</td>
+   <td>Zeigt an, dass eine Meldung nur zur Statusverfolgung genutzt wird. Mozilla benutz dies, um die Stati mehrerer Meldungen einer komplexeren Entwicklung in einer einzigen Meldung zu verfolgen. Meldungen mit diesem Keyword sollten von Entwicklern nicht in die Patch-Planung einbezogen werden. Bitte denk daran, dass Projektleiter und Tester dieses Keyword für die Statusverfolgung nutzen.</td>
+  </tr>
+  <tr>
+   <td>qablocker</td>
+   <td>Dieses Keyword wird benutzt, wenn eine Meldung das Testen in der Qualitätssicherung blockiert (manueller oder automatisierter Test eine neuen Entwicklung) und der Fehler daher im nächsten Projekt-Meilenstein der Beta-Phase bzw. Release-Veröffentlichung behoben sein muss.</td>
+  </tr>
+  <tr>
+   <td>qawanted</td>
+   <td>Nutze dieses Keyword für Meldungen die mehr Informationen, mehr Testfälle oder weitere Informationen zur Reproduzierbarkeit benötigen oder als Duplikat gekennzeichnet sind, ohne dass Du die duplizierte Original-Meldung finden kannst. Der über dieses Keyword angeforderte Qualitätssicherungs-Prozess wird im sogenannten Whiteboard aufgezeichnet. Wenn die Qualitätssicherung ihre Arbeit erledigt hat, sollte dieses Keyword entfernt werden.</td>
+  </tr>
+  <tr>
+   <td>regression</td>
+   <td>Dieses Keyword bedeutet, dass das Problem gelöst war und wieder aufgetreten ist (regressed). Um dieses Wiederauftreten des Problems zu verfolgen wird eine neue Meldung mit Keyword "regression" angelegt. Es wird ebenso für Fehler verwendet, die in früheren Releases behoben waren und im aktuellen Release wieder auftreten. Das Nachverfolgen dieser Probleme hilft uns fehleranfällige und instabile Bereiche zu identifizieren, die beim Testen besonders beachtet werden sollten.</td>
+  </tr>
+  <tr>
+   <td>regressionwindow-wanted</td>
+   <td>Kennzeichnet eine Meldung als "regression" Meldung bei der es sehr hilfreich wäre zu wissen, wann genau der Fehler aufgetreten ist (Zeitpunkt oder Zeitraum).</td>
+  </tr>
+  <tr>
+   <td>steps-wanted</td>
+   <td>Bei Meldungen mit diesem Keyword wäre es sehr hilfreich zu wissen, wie der Fehler reproduziert werden kann.</td>
+  </tr>
+  <tr>
+   <td>verifyme</td>
+   <td>So gekennzeichnete Probleme sollten von einem Dritten zusätzlich verifiziert werden, auch wenn der Fehler für den Melder und die Qualitätssicherung behoben zu sein scheint.  Die Meldung enthält dann spezielle Angaben zur Hardware und zur Konfiguration, für die die Lösung zusätzlich noch verifiziert werden soll. Du solltest versuchen, diesen Fehler zu reproduzieren. Wenn Du dann bestätigen kannst, dass der Fehler bei Dir ebenfalls behoben ist, dann kann der <em>Status</em> von <em>Fixed</em> auf <em>Verified</em> geändert werden.<br>
+     </td>
+  </tr>
+  <tr>
+   <td>crash</td>
+   <td>Nutze dieses Keyword, wenn Du Abbrüche in Firefox OS bekommst.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Weitere Informationen erhälst Du auf der Seite <a href="/de/docs/Mozilla/QA/Bug_writing_guidelines">Bug writing guidelines</a>. Das Mozilla <a href="https://wiki.mozilla.org/B2G/QA">B2G QA Wiki</a> enthält zudem nützliche Informationen zum Melden von Firefox OS Fehlern; die hilfreichsten Seiten sind <a href="https://wiki.mozilla.org/B2G/QA/Bugzilla">Bugzilla Usage</a> und <a href="https://wiki.mozilla.org/Bugmasters/Projects/FirefoxOS">Incoming bug triage for Firefox OS</a>.</p>
+</div>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Nähere Informationen zum Umgang mit Fehlern in der Gaia-Entwicklung findes Du auf  <a href="/en-US/Firefox_OS/Developing_Gaia/Submitting_a_Gaia_patch">Submitting a Gaia patch</a>.</p>
+</div>
+
+<p> </p>
diff --git a/files/de/archive/b2g_os/developing_firefox_os/index.html b/files/de/archive/b2g_os/developing_firefox_os/index.html
new file mode 100644
index 0000000000..29f0a9c290
--- /dev/null
+++ b/files/de/archive/b2g_os/developing_firefox_os/index.html
@@ -0,0 +1,26 @@
+---
+title: Hacking Firefox OS
+slug: Archive/B2G_OS/Developing_Firefox_OS
+translation_of: Archive/B2G_OS/Developing_Firefox_OS
+---
+<div class="summary">
+ <p>This section provides some useful articles covering different ways in which the Firefox OS experience can be modified/customized during the build or app writing process.</p>
+</div>
+<dl>
+ <dt>
+  <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Tips_and_tricks/modifying_hosts_file" title="/en-US/docs/Mozilla/Firefox_OS/Tips_and_tricks/modifying_hosts_file">Modifying the hosts file</a></dt>
+ <dd>
+  A guide to what can be achieved by modifying the Firefox OS hosts file.</dd>
+ <dt>
+  <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Customization_with_the_.userconfig_file" title="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Customization_with_the_.userconfig_file">Customization with the .userconfig file</a></dt>
+ <dd>
+  How to customize the build and execution of Firefox OS by changing the <code>.userconfig</code> file.</dd>
+ <dt>
+  <a href="/en-US/docs/Firefox_OS/Hacking_Firefox_OS/Localizing_Firefox_OS" title="/en-US/docs/Firefox_OS/Hacking_Firefox_OS/Localizing_Firefox_OS">Localizing Firefox OS</a></dt>
+ <dd>
+  A guide to localising the Firefox OS platform, making it available in your preferred languages.</dd>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Firefox_OS/Hacking_Firefox_OS/Customizing_the_keyboard">Customizing the keyboard in Firefox OS apps</a></dt>
+ <dd>
+  This guide shows how to customize the keyboard in your Firefox OS apps.</dd>
+</dl>
diff --git a/files/de/archive/b2g_os/firefox_os_build_prerequisites/index.html b/files/de/archive/b2g_os/firefox_os_build_prerequisites/index.html
new file mode 100644
index 0000000000..0c2f90d39c
--- /dev/null
+++ b/files/de/archive/b2g_os/firefox_os_build_prerequisites/index.html
@@ -0,0 +1,446 @@
+---
+title: Firefox OS build prerequisites
+slug: Archive/B2G_OS/Firefox_OS_build_prerequisites
+translation_of: Archive/B2G_OS/B2G_OS_build_prerequisites
+---
+<p>Vor dem Holen des Codes zum Bauen von Firefox OS benötigt man ein geeignet konfiguriertes <a href="https://developer.mozilla.org/en-US/docs/Developer_Guide/Build_Instructions" title="https://developer.mozilla.org/en-US/docs/Developer_Guide/Build_Instructions">Build-System</a>. Im folgenden wird dieser Vorgang beschrieben. Zur Zeit eignen sich 64-bit-Linux-Distributionen und Mac OS X.</p>
+<div class="note">
+ <p><strong>Anmerkung:</strong> Wenn man Firefox OS auf ein Telefon installieren will, beginnt man, ohne das Telefon an den Computer angeschlossen zu haben. Im Text wird dann später erklärt, wann man das Telefon anschließen muß.</p>
+</div>
+<h2 id="Kompatibles_Gerät_oder_Emulator_besorgen">Kompatibles Gerät oder Emulator besorgen</h2>
+<p><span id="answer_long0" style="display: block;">Das System kann nur für ein kompatibles Gerät (i.a. ein Smartphone) oder einen Emulator gebaut werden. Obwohl wir diverse Geräte unterstützen, gibt es für einige von diesen unterschiedliche Ausführungen. Von diesen Ausführungen unterstützen wir zur Zeit nur bestimmte, und außerdem werden einige Geräte besser unterstützt als andere.</span></p>
+<div class="note">
+ <p><span style="display: block;"><strong>Anmerkung:</strong> Mozillas <a href="https://github.com/mozilla-b2g/B2G">B2G-Quellcode</a> ist die Referenzimplementation von B2G, aber Telefonherstellern ist es freigestellt, Fehlerkorrekturen ("Patches") hinzuzufügen oder andere Änderungen vorzunehmen. Wenn man zum Beispiel ein Alcatel One Touch kauft, läuft darauf eine herstellerspezifische Version. Das ist für die installierten Apps irrelevant, aber unter Umständen kann es auf  Plattform-Ebene Unterschiede geben. Die Version für das  Nexus-4 ("Nexus 4 Port") wird direkt von Mozilla gepflegt, also ist es viel wahrscheinlicher, dass dieses Telefon mit unserer Gecko-Version auf Anhieb funktioniert, als zum Beispiel bei Rang-3-Geräten.</span></p>
+</div>
+<h3 id="Rang_1_(Tier_1)">Rang 1 (Tier 1)</h3>
+<p>Tier-1-Geräte werden bei der Entwicklung bevorzugt und sind typischerweise die ersten, die Fehlerkorrekturen ("bugfixes") und Erweiterungen ("feature updates") erhalten.</p>
+<dl>
+ <dt>
+  Keon</dt>
+ <dd>
+  Keon ist ein Gerät der FIrma <a href="http://www.geeksphone.com/" title="http://www.geeksphone.com/">Geeksphone</a> und eines der ersten Entwicklertelefone. Beachte, dass Binärpakete ("builds") für diese Geräte von Geeksphone bereitgestellt werden.</dd>
+ <dt>
+  Inari</dt>
+ <dd>
+  Inari ist ein weiteres Testgerät. Benutze diese Konfiguration, um FirefoxOS für die ZTE-Open-Geräte zu bauen. <strong>Warnung:</strong> Neuere Firefox-OS-Builds könnten auf ZTE Open Probleme beim Booten von der Standard-Boot-Partition machen.</dd>
+ <dt>
+  Flame</dt>
+ <dd>
+  Flame is Mozillas neues Standard-Referenztelefon für Firefox OS. Die Konfiguration für Flame sollte auch verwendet werden, wenn man für das Gerät ZTE Open C baut, weil beide Geräte auf der Android-Jellybean-Basis aufbauen.</dd>
+ <dt>
+   </dt>
+ <dt>
+  <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_emulators" title="en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_emulators">Emulatoren (ARM und x86)</a></dt>
+ <dd>
+  Zur Zeit gibt es zwei Emulatoren, einen für die Emulation eines ARM-Prozessors und einen für die Emulation eines x86-Prozessors. <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_emulators" title="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_emulators">Hier erfährt man mehr über die Installation und die Verwendung der Emulatoren</a>.</dd>
+ <dd>
+  <strong>Achtung: Der x86-Emulator ist derzeit nicht praxistauglich, sowohl was die Installation angeht als auch die Unterstützung.</strong></dd>
+ <dt>
+   </dt>
+ <dt>
+  <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client" title="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client">Desktop</a></dt>
+ <dd>
+  Man kann auch eine Version von Firefox OS für Desktop-Rechner bauen; diese führt <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Gecko" title="/en-US/docs/Mozilla/Gecko">Gecko</a> in einer <a href="https://developer.mozilla.org/en-US/docs/XULRunner" title="/en-US/docs/XULRunner">XULRunner</a>-Anwendung aus und darin Benutzerumgebung <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia/Introduction_to_Gaia" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia/Introduction_to_Gaia">Gaia</a>.</dd>
+ <dt>
+  Flatfish</dt>
+ <dd>
+  Flatfish ist das erste für Firefox OS entwickelte Tablet, auf dem jedoch einige Telefoniefunktionen fehlen. Es werden ein paar <a href="https://github.com/flatfish-fox/flatfish-kernel">spezielle Einstellungen</a> benötigt, um den Code zu bauen.</dd>
+</dl>
+<p>Natürlich kann man den <a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client" title="en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client">Desktop-Client</a> und die <a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_emulators" title="en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_emulators">Emulatoren</a> auch bauen, ohne ein Telefon zu benutzen.</p>
+<h3 id="Rang_2_(Tier_2)">Rang 2 (Tier 2)</h3>
+<p><span id="answer_long1" style="display: block;">Bei den Tier-2-Geräten ist die Grundfunktionalität gegeben, und viele Entwickler, insbesondere App-Entwickler, arbeiten damit, daher sind es üblicherweise die nächsten Geräte (nach Tier-1), für die Änderungen bereitgestellt werden.</span></p>
+<dl>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Firefox_OS/Samsung_Nexus_S" title="/en-US/docs/Mozilla/Firefox_OS/Samsung_Nexus_S"><span class="link-https">Samsung Nexus S</span></a></dt>
+ <dd>
+  Die einzigen Varianten dieses Smartphones, von denen bekannt ist, daß sie mit Firefox OS funktionieren, sind GT-I9020A (mit Amoled-Bildschirm) and GT-I9023 (Billigmodell mit LCD). Möglicherweise funktionieren aber auch weitere.</dd>
+ <dt>
+  Samsung Nexus S 4G</dt>
+ <dd>
+  The SPH-D720 is supported as a tier 2 device.</dd>
+</dl>
+<h3 id="Rang_3_(Tier_3)">Rang 3 (Tier 3)</h3>
+<p><span id="answer_long1" style="display: block;">Man kann Firefox OS für diese Geräte bauen, aber die Hauptentwickler verwenden sie nicht regelmäßig. Bezüglich Stabilität, Zuverlässigkeit und Funktionsvielfalt stehen sie daher den Tier-1- und Tier-2- Geräten möglicherweise nach.</span></p>
+<dl>
+ <dt>
+  Samsung Galaxy S2</dt>
+ <dd>
+  Nur die Variante i9100 funktioniert, keine andere, zumindest nicht offiziell (i9100P könnte auch funktionieren, da sie sie sich nur durch einen zusätzlichen NFC-Baustein unterscheidet.)</dd>
+ <dt>
+  Samsung Galaxy Nexus</dt>
+ <dd>
+  Zur Zeit ist keine Variante bekannt, die nicht funktioniert.</dd>
+ <dt>
+  Nexus 4</dt>
+ <dd>
+  Einige Anwender haben laut IRC dieses Gerät mit Erfolg getestet. Möglicherweise muß man für den Fall, daß man Android 4.4 installiert hat, vorher auf 4.3 zurückgehen (Android- <a href="https://developers.google.com/android/nexus/images#occamjwr66y">Betriebssystem-Images sind bei Google erhältlich</a>)</dd>
+ <dt>
+  Nexus 5</dt>
+ <dd>
+  Einige Anwender haben laut IRC dieses Gerät mit Erfolg getestet.</dd>
+ <dt>
+  Tara</dt>
+ <dd>
+  Tara ist ebenfalls ein Testgerät. Das "Manifest" für Tara existiert nur im "master branch". Um den Tara-Code zu erhalten, ruft man folgendes Script auf: "BRANCH=master ./config.sh tara".</dd>
+ <dt>
+  Unagi</dt>
+ <dd>
+  Unagi ist ein Telefon, das als Test- und Entwicklungsplattform für einfache bis Mittelklasse- Smartphones verwendet wird. Viele Core-Firefox-OS-Entwickler arbeiten auf Unagi.</dd>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Firefox_OS/Pandaboard" title="/en-US/docs/Mozilla/Firefox_OS/Pandaboard">Pandaboard</a></dt>
+ <dd>
+  Das Pandaboard ist eine Entwicklungsplatine ("Board"), die auf der OMAP-4-Architektur basiert, und wird verwendet, um auf mobilen Plattformen zu entwickeln.</dd>
+</dl>
+<div class="warning">
+ <strong>Wichtig</strong>: Nur solche Geräte werden unterstützt, auf denen mindestens <strong>Android 4</strong> (alias <strong>Ice Cream Sandwich</strong>) lauffähig ist. Für den Fall, daß ein Gerät oben aufgeführt ist, aber ein älteres Android-System installiert ist, muß man erst eine neuere Android-Version installieren.</div>
+<div class="note">
+ <p>Bemerkung: Tier-2 und Tier-3-Geräte haben einen virtuellen, d.h durch Software dargestellten, Home-Button anstelle eines physikalischen.</p>
+ <p>Alle Tier-1-Geräte haben  dagegen einen physikalischen "Home"-Button, mit dem man bei Betätigen stets auf den Startbildschirm zurückkehrt. Die meisten Android-Geräte für Version 4 oder später haben einen auf dem Bildschirm dargestellten "Home"-Button. Auch Firefox OS kann solch eine Schaltfläche darstellen; sie wird automatisch bei entsprechenden Geräten aktiviert. Wenn dies versagen sollte, muß man die Einstellungen öffnen und zu den Geräteinformationen navigieren, dort dann "<span style="line-height: 1.5em; font-size: 14px;">Weitere Informationen" öffnen und "Entwicklermenü" einschalten (falls noch nicht geschehen). Dann wieder zurück zu den Einstellungen navigieren und das Entwickler-Menü öffnen, dort "Software-Startschaltfläche" einschalten.</span></p>
+</div>
+<h2 id="Anforderungen_für_Linux">Anforderungen für Linux</h2>
+<p>Um auf Linux bauen zu können, benötigt man:</p>
+<ul>
+ <li>eine installierte <strong>64bit GNU/Linux</strong>-Distribution (wir empfehlen Ubuntu 12.04).</li>
+ <li>mindestens <strong>4 GB</strong> RAM/swap</li>
+ <li>mindestens <strong>20 GB</strong> verfügbaren Massenspeicher</li>
+</ul>
+<p>Das ist zwar etwas mehr, als tatsächlich benötigt wird, aber mitunter kommt es vor, daß der Erstellungsprozeß gerade deswegen fehlschlägt, weil ein wenig Speicher fehlt.</p>
+<p>Außerdem werden folgende Dienstprogramme benötigt und müssen ggf. nachinstalliert werden:</p>
+<ul>
+ <li><strong>autoconf 2.13</strong></li>
+ <li><strong>bison</strong></li>
+ <li><strong>bzip2</strong></li>
+ <li><strong>ccache</strong></li>
+ <li><strong>curl</strong></li>
+ <li><strong>flex</strong></li>
+ <li><strong>gawk</strong></li>
+ <li><strong>git</strong></li>
+ <li><strong>gcc / g++ / g++-multilib</strong></li>
+ <li><strong>make</strong></li>
+ <li><strong>OpenGL shared libraries</strong></li>
+ <li><strong>patch</strong></li>
+ <li><strong>X11 headers</strong></li>
+ <li><strong>32-bit ncurses</strong></li>
+ <li><strong>32-bit zlib</strong></li>
+</ul>
+<h3 id="Installation_im_Falle_eines_64-Bit-Linux">Installation im Falle eines 64-Bit-Linux</h3>
+<p>Im folgenden werden die Kommandos aufgeführt, mit denen man die notwendigen Programmpakete für das Bauen von Firefox OS installieren kann.</p>
+<h4 id="Ubuntu_12.04_Linux_Mint_13_Debian_6">Ubuntu 12.04 / Linux Mint 13 / Debian 6</h4>
+<p>Diese Kommandos in einem Terminal-Fenster ausführen:</p>
+<pre class="language-html"><code class="language-html">sudo apt-get update
+sudo apt-get install autoconf2.13 bison bzip2 ccache curl flex gawk gcc g++ g++-multilib git ia32-libs lib32ncurses5-dev lib32z1-dev libgl1-mesa-dev libx11-dev make zip</code></pre>
+<p>Für den Fall, daß Firefox OS für das Referenzgerät <a href="https://developer.mozilla.org/en-US/Firefox_OS/Developer_phone_guide/Flame">"Flame"</a> oder Nexus 5 gebaut wird, diese Kommandos auführen:</p>
+<p><code class="language-html">sudo apt-get install libxml2-utils</code></p>
+<p>Ein Java-Entwicklungspaket ("JDK") kann von <a href="http://www.webupd8.org/2012/01/install-oracle-java-jdk-7-in-ubuntu-via.html">dieser Paketquelle (ppa</a>)  installiert werden.</p>
+<p>Bitte auch die obigen Anmerkungen berücksichtigen, die die Probleme beschreiben, die auftreten, wenn man für einen Emulator baut!</p>
+<h4 id="Ubuntu_12.10_Debian_7">Ubuntu 12.10 / Debian 7</h4>
+<p>Das folgende Kommando im Terminal-Fenster ausführen:</p>
+<pre>$ sudo apt-get install autoconf2.13 bison bzip2 ccache curl flex gawk gcc g++ g++-multilib gcc-4.6 g++-4.6 g++-4.6-multilib git ia32-libs lib32ncurses5-dev lib32z1-dev libgl1-mesa-dev libx11-dev make zip</pre>
+<p>Zusätzlich zu den oben erwähnte Schwierigkeiten beim Bauen für einen Emlator tritt hier noch das Problem auf, daß standardmäßig der Compiler in der Version gcc-4.7 verwendet wird, welcher den Compiliervorgang mit folgender Fehlermeldung abbricht:</p>
+<p>"<code>KeyedVector.h:193:31: error: indexOfKey was not declared in this scope, and no declarations were found by argument-dependent lookup at the point of instantiation"</code></p>
+<p>Um diesen Fehler zu beheben, muß man auf die ältere Version gcc-4.6 als Standard-Compiler zurückgehen, und zwar am besten unmittelbar, nachdem man die Quellen für B2G heruntergeladen hat. Der Vorgang wird in der Anleitung "<a href="/en-US/docs/Mozilla/Firefox_OS/Customization_with_the_.userconfig_file#Changing_the_default_host_compiler">Changing the default host compiler</a>" (engl.) beschrieben.</p>
+<p class="note">Bei einer unveränderten Ubuntu-12.10-Version gibt es eine Fehlermeldung wegen nicht erfüllter Abhängigkeiten der Systembibliotheken "ia32-libs". Dies wird mit diesen Befehlen behoben:</p>
+<pre>sudo dpkg --add-architecture i386
+sudo apt-get update
+sudo apt-get install ia32-libs</pre>
+<h4 id="Ubuntu_13.04">Ubuntu 13.04</h4>
+<p>Die folgenden Kommandos sind im Terminal-Fenster auszuführen:</p>
+<pre>$ sudo apt-get install --no-install-recommends autoconf2.13 bison bzip2 ccache curl flex gawk gcc g++ g++-multilib gcc-4.6 g++-4.6 g++-4.6-multilib git ia32-libs lib32ncurses5-dev lib32z1-dev zlib1g:amd64 zlib1g-dev:amd64 zlib1g:i386 zlib1g-dev:i386 libgl1-mesa-dev libx11-dev make zip</pre>
+<p>Auch hier muß von gcc-4.7 auf gcc-4.6 zurückgegangen werden, wie oben für Ubuntu 12.10 beschrieben.</p>
+<h4 id="Ubuntu_13.10">Ubuntu 13.10</h4>
+<p>With Ubuntu 13.10, multi-arch packages are now the main way to support multiple architectures (e.g. 32-bit on a 64-bit install).  You must tell your Ubuntu system that you want to support 32-bit packages as well:<br>
+  </p>
+<pre class="language-html"><code class="language-html">sudo dpkg --add-architecture i386
+sudo apt-get update</code></pre>
+<p>Once you've completed that, then you can install the necessary packages:</p>
+<pre class="language-html" style="font-family: 'Open Sans', sans-serif; line-height: 21px;"><code class="language-html">sudo apt-get install --no-install-recommends autoconf2.13 bison bzip2 ccache curl flex gawk gcc g++ g++-multilib gcc-4.6 g++-4.6 g++-4.6-multilib git lib32ncurses5-dev lib32z1-dev zlib1g:amd64 zlib1g-dev:amd64 zlib1g:i386 zlib1g-dev:i386 libgl1-mesa-dev libx11-dev make zip libxml2-utils
+
+sudo update-alternatives --install /usr/bin/gcc gcc /usr/bin/gcc-4.6 1
+
+sudo update-alternatives --install /usr/bin/gcc gcc /usr/bin/gcc-4.8 2
+
+sudo update-alternatives --install /usr/bin/g++ g++ /usr/bin/g++-4.6 1
+
+sudo update-alternatives --install /usr/bin/g++ g++ /usr/bin/g++-4.8 2
+
+sudo update-alternatives --set gcc "/usr/bin/gcc-4.6"
+
+sudo update-alternatives --set g++ "/usr/bin/g++-4.6"</code></pre>
+<p>you can install the jdk via <a href="http://www.webupd8.org/2012/01/install-oracle-java-jdk-7-in-ubuntu-via.html">this ppa</a>.</p>
+<h4 id="Ubuntu_14.04">Ubuntu 14.04</h4>
+<p>Follow the instructions given for Ubuntu 13.10.</p>
+<h4 id="Fedora_1920">Fedora 19/20</h4>
+<p>Run the following command in Terminal:</p>
+<pre class="note  language-html"><code class="language-html">sudo yum install autoconf213 bison bzip2 ccache curl flex gawk gcc-c++ git glibc-devel glibc-static libstdc++-static libX11-devel make mesa-libGL-devel ncurses-devel patch zlib-devel ncurses-devel.i686 readline-devel.i686 zlib-devel.i686 libX11-devel.i686 mesa-libGL-devel.i686 glibc-devel.i686 libstdc++.i686 libXrandr.i686 zip perl-Digest-SHA wget</code></pre>
+<p>The project should build correctly using the default compiler shipped with Fedora but if you encounter compilation errors you might need to install GCC 4.6.x:</p>
+<ul>
+ <li><a href="http://people.mozilla.org/%7Egsvelto/gcc-4.6.4-fc19.tar.xz">Pre-compiled GCC 4.6.x for Fedora 19/20</a></li>
+</ul>
+<p>Download the tarball then install it to <code>/opt,</code> with the following command on Fedora 19/20:</p>
+<pre class="note  language-html"><code class="language-html">curl -O http://people.mozilla.org/~gsvelto/gcc-4.6.4-fc19.tar.xz
+sudo tar -x -a -C /opt -f gcc-4.6.4-fc19.tar.xz</code></pre>
+<p>To use GCC 4.6.x as the default host compiler you will have to set it explicitly after having retrieved the B2G sources: read <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Customization_with_the_.userconfig_file#Changing_the_default_host_compiler">Changing the default host compiler</a> to find out how to do it.</p>
+<h4 id="Arch_Linux"><strong>Arch Linux</strong></h4>
+<p>Run the following command in Terminal:</p>
+<pre class="note  language-html"><code class="language-html">sudo pacman -S --needed alsa-lib autoconf2.13 bison ccache curl firefox flex gcc-multilib git gperf libnotify libxt libx11 mesa multilib-devel wget wireless_tools yasm zip lib32-mesa lib32-mesa-libgl lib32-ncurses lib32-readline lib32-zlib</code></pre>
+<p>To install the lib32-* packages you need to have the multilib repository enabled.</p>
+<p>B2G <a href="https://developer.mozilla.org/en-US/Firefox_OS/Building#KeyedVector.h.3A193.3A31.3A_error.3A_indexOfKey_was_not_declared_in_this_scope">can only be compiled with gcc4.6.4</a>, and because Arch Linux always has bleeding edge software you will need to install <a href="https://aur.archlinux.org/packages/gcc46-multilib">gcc46-multilib from AUR</a>. Note that you will have to edit the PKGBUILD and add <code>staticlibs</code> to the <code>options</code> array, or gcc will be unable to compile B2G and give you a <code>cannot find -lgcc</code> error when compiling. You will also need to add the following to your <code>.userconfig</code> file:</p>
+<pre class="language-html"><code class="language-html">export CC=gcc-4.6.4
+export CXX=g++-4.6.4</code></pre>
+<p>By default, Arch Linux uses Python3. You'll have to force it to use the old python2. You can do that by linking the python2 executable to python but this is discouraged and considered error-prone. This will also break python 3 if it is installed on your system. A better way is to use <code>virtualenv</code>/<code>virtualenvwrapper</code>:</p>
+<pre class="language-html"><code class="language-html">sudo pacman -S python-virtualenvwrapper
+source /usr/bin/virtualenvwrapper.sh
+mkvirtualenv -p `which python2` firefoxos
+workon firefoxos</code></pre>
+<p>Android will complain that you need make 3.81 or make 3.82 instead of 4.0. You can download <a href="https://aur.archlinux.org/packages/make-3.81/">make 3.81 from AUR</a>.  This will install the make-3.81 binary on your path, you need to create a symlink named make to a location earlier in the PATH variable for the build to use the correct version.</p>
+<pre class="language-html"><code class="language-html">mkdir -p ~/bin
+ln -s `which make-3.81` ~/bin/make
+export PATH=~/bin:$PATH</code></pre>
+<p>Android also needs the Java6 SDK and Arch only has Java7.  Unfortunately the aur build is broken, but you can still download the <a href="http://www.oracle.com/technetwork/java/javasebusiness/downloads/java-archive-downloads-javase6-419409.html#jdk-6u45-oth-JPR">Java 6 SDK</a> and install it manually.  You will then need to put it in your path.</p>
+<pre class="language-html"><code class="language-html">cp ~/Downloads/jdk-6u45-linux-x64.bin /opt
+su
+cd /opt
+chmod +x jdk-6u45-linux-x64.bin
+./jdk-6u45-linux-x64.bin
+exit
+ln -s /opt/jdk1.6.0_45/bin/java ~/bin/java</code></pre>
+<h4 id="Gentoo_Linux"><strong>Gentoo Linux</strong></h4>
+<h5 id="Installing_ccache">Installing ccache</h5>
+<p>You will need to install <strong><a href="http://www.gentoo.org/doc/en/handbook/handbook-x86.xml?part=2&amp;chap=3#doc_chap3">ccache</a></strong>, a tool for caching partial builds.</p>
+<pre class="language-html"><code class="language-html"># emerge -av ccache</code></pre>
+<p>Because ccache is known to frequently cause support issues, Gentoo encourages you to use it <em>explicitly</em> and <em>sparingly</em>.</p>
+<p>To enable the required use of ccache, on <em>the subsequent step</em> of this guide where the <code>./build.sh</code> script is called, Gentoo users should instead run the command with an explicitly extended path, ie.</p>
+<pre class="language-html"><code class="language-html">PATH=/usr/lib64/ccache/bin:$PATH ./build.sh</code></pre>
+<h5 id="Generating_Partition_Images">Generating Partition Images</h5>
+<p>If you are building B2G for actual physical hardware, then you may at some point also wish to generate some partition images for upload to your device. (For example, to restore backed up files to the device via the <strong><em>fastboot</em></strong> utility)</p>
+<p>The filesystem image format used in this case is YAFFS2 (Yet Another Filesystem 2). Gentoo has support for the very latest (ie. git HEAD) <code>yaffs2-utils</code> userland package in portage. (Note: You will also need kernel patches if you want to mount YAFFS2 images, but this is not really required since you can deconstruct and rebuild them instead.)</p>
+<pre class="language-html"><code class="language-html"># emerge --autounmask-write yaffs2-utils; etc-update; emerge -av yaffs2-utils</code></pre>
+<p>In order to generate such an image, simply change to the parent directory of the partition filesystem tree you wish to package, and issue a command like this:</p>
+<pre class="language-html"><code class="language-html">mkyaffs2image system/ system.img</code></pre>
+<h2 id="sect1"> </h2>
+<h2 id="Anforderungen_für_Mac_OS_X">Anforderungen für Mac OS X</h2>
+<p>Um Firefox OS unter Mac OS X zu bauen, benötigt man etwas Vorarbeit, die unten detailiert beschrieben ist.  Außerdem werden typische Irrtümer und Fehler und ihre Lösungen erläutert.</p>
+<div class="note">
+ <p><strong>Anmerkung: Das Bauen (und Konfigurieren der Quellen) von B2G für das Gerät Keon funktioniert nicht auf einem Mac OS-Rechner</strong>. Stattdessen muß man unter Linux bauen, ggf. auf demselben Rechner, auf dem auch Mac OS läuft.</p>
+</div>
+<h3 id="Passende_XCode-Versionen_für_Mac_OS_10.9"><strong>Passende XCode-Versionen</strong> für Mac OS 10.9</h3>
+<p>XCode 4.2 oder älter sind nicht kompatibel mit OS X 10.9 ("Mavericks") und fallen daher ganz aus. Ansonsten gilt, daß man den ICS-Emulator nicht mit OS X 10.9 oder neuer bauen kann, und für das Gerät "flatfish" scheitert das Bauen mit allen Entwicklungsumgebungen der Versionen XCode 5.x.</p>
+<table class="standard-table">
+ <caption>
+  Version compatibility of OS X 10.9.x</caption>
+ <tbody>
+  <tr>
+   <td> </td>
+   <td>emulator (ICS)</td>
+   <td>flatfish/vixen (JB-4.2)</td>
+   <td>emulator-jb (JB-4.3)</td>
+   <td>emulator-kk (KitKat-4.4)</td>
+  </tr>
+  <tr>
+   <td>XCode 4.3.3</td>
+   <td style="text-align: center;">X</td>
+   <td style="text-align: center;">X</td>
+   <td style="text-align: center;">X</td>
+   <td style="text-align: center;">X</td>
+  </tr>
+  <tr>
+   <td>XCode 4.4.1</td>
+   <td style="text-align: center;">X</td>
+   <td style="text-align: center;">O[1]</td>
+   <td style="text-align: center;">O</td>
+   <td style="text-align: center;">O</td>
+  </tr>
+  <tr>
+   <td>XCode 4.5.2</td>
+   <td style="text-align: center;">X</td>
+   <td style="text-align: center;">O[1]</td>
+   <td style="text-align: center;">O</td>
+   <td style="text-align: center;">O</td>
+  </tr>
+  <tr>
+   <td>XCode 4.6.3</td>
+   <td style="text-align: center;">X</td>
+   <td style="text-align: center;">O[1]</td>
+   <td style="text-align: center;">O</td>
+   <td style="text-align: center;">O</td>
+  </tr>
+  <tr>
+   <td>XCode 5.0.2</td>
+   <td style="text-align: center;">X</td>
+   <td style="text-align: center;">X</td>
+   <td style="text-align: center;">O</td>
+   <td style="text-align: center;">O</td>
+  </tr>
+  <tr>
+   <td>XCode 5.1.1</td>
+   <td style="text-align: center;">X</td>
+   <td style="text-align: center;">X</td>
+   <td style="text-align: center;">O</td>
+   <td style="text-align: center;">O</td>
+  </tr>
+  <tr>
+   <td>XCode 6.0.1</td>
+   <td style="text-align: center;">X</td>
+   <td style="text-align: center;">X</td>
+   <td style="text-align: center;">X</td>
+   <td style="text-align: center;">X</td>
+  </tr>
+  <tr>
+   <td>XCode 6.1beta2</td>
+   <td style="text-align: center;">X</td>
+   <td style="text-align: center;">X</td>
+   <td style="text-align: center;">X</td>
+   <td style="text-align: center;">X</td>
+  </tr>
+ </tbody>
+</table>
+<ol>
+ <li>You must have environment variable <strong>BUILD_MAC_SDK_EXPERIMENTAL=1</strong> exported to build flatfish/vixen.</li>
+</ol>
+<h3 id="Install_XCode_Command_Line_Utilities"><strong>Install XCode Command Line Utilities</strong></h3>
+<p>You need to install Xcode's Command Line Utilities. You can download <em>just</em> the Command Line Utilities from <a href="https://developer.apple.com/downloads/" title="https://developer.apple.com/downloads/">Apple's developer downloads page</a> for your particular version of OS X, however if you would like the entire Xcode suite of applications, you can <a class="external" href="http://itunes.apple.com/us/app/xcode/id497799835?mt=12" style="line-height: 1.572;" title="http://itunes.apple.com/us/app/xcode/id497799835?mt=12">install Xcode</a><span style="line-height: 1.572;"> through the Mac App Store. </span></p>
+<p>Xcode 4.3.1 (OS X 10.7 "Lion") and other newer versions such as 4.4.1+ (that is, Mac OS X10.8 "Mountain Lion"), won't necessarily include the required Command Line Utilities. When you install Xcode, make sure to go into Preferences, then the Downloads panel, and install the Command Line Utilities. In addition, make sure you have at least 20 GB of free disk space.</p>
+<p><img alt="Screenshot of Xcode Downloads Command Line Tools" src="/files/4557/xcode_downloads_command_line_tools.png" style="width: 750px; height: 528px;"></p>
+<div class="note">
+ <strong>Note:</strong> The Firefox OS emulator requires a Core 2 Duo processor or later; that is, a system that is compatible with Mac OS X 10.7 "Lion." You do not actually have to be running Lion, you just have to be compatible with it. You can, however, build any Firefox OS build on many older Macs.</div>
+<h3 id="Run_Firefox_OS_Mac_Bootstrap">Run Firefox OS Mac Bootstrap</h3>
+<p>Next, open a terminal and run the following command:</p>
+<pre class="brush: bash">curl -fsSL https://raw.github.com/mozilla-b2g/B2G/master/scripts/bootstrap-mac.sh | bash</pre>
+<p>This will pull and run a bootstrap script that makes sure you have all the prerequisites met to build the emulator. It will also prompt you for permission to install anything you're missing, and provide warnings and suggested fixes to problems. The script will check for and install the following items:</p>
+<ul>
+ <li><code>git</code></li>
+ <li><code>gpg</code></li>
+ <li><code>ccache</code></li>
+ <li><code>yasm</code></li>
+ <li><code>autoconf-213</code></li>
+ <li><code>gcc-4.6</code></li>
+ <li><code>homebrew</code></li>
+</ul>
+<h4 id="Xcode_wrangling">Xcode wrangling</h4>
+<p>If you have already upgraded to Xcode 4.4+ and get the message that Xcode is outdated, check the Xcode path with:</p>
+<pre>xcode-select -print-path</pre>
+<p>If it still points to <code>/Developer</code> you can update the path with:</p>
+<pre>sudo xcode-select -switch /Applications/Xcode.app</pre>
+<h4 id="Making_the_Mac_OS_X_10.6_SDK_available">Making the Mac OS X 10.6 SDK available</h4>
+<p>You also need to have the Mac OS X 10.6 SDK available. The SDK needs to be available at</p>
+<pre>/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/</pre>
+<p>If it cannot be found there you will need to extract and copy it from Xcode 4.3. To do this:</p>
+<ol>
+ <li>Download the XCode 4.3 .dmg file from the <a class="external" href="https://developer.apple.com/downloads/index.action">Apple Developer</a> portal (you'll need an <a href="https://developer.apple.com/register/index.action" title="https://developer.apple.com/register/index.action">Apple Developer account</a>).</li>
+ <li>Download the utility <a href="http://www.charlessoft.com/" title="http://www.charlessoft.com/">Pacifist</a> and use it to extract the 10.6 SDK from the XCode 4.3 .dmg file. Click on the "Extract Package" button, find the SDK by searching for 10.6 in the search box, then <em>Ctrl + click</em> on the MacOSX10.6.sdk directory and Extract it to a suitable location.</li>
+ <li>Add a symlink from the 10.6 SDK location to the <code>/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/</code> directory. For example, if you put the 10.6 SDK on your desktop, the comment would be</li>
+</ol>
+<pre>ln -s /Users/<em>&lt;yourusername&gt;</em>/Desktop/MacOSX10.6.sdk /Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/</pre>
+<div class="note">
+ <p><strong>Note</strong>: We can drop the 10.6 SDK requirement after <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=784227" title="https://bugzilla.mozilla.org/show_bug.cgi?id=784227">bug 784227</a> has been fixed, and our version of <a href="https://github.com/mozilla-b2g/B2G/issues/189" title="https://github.com/mozilla-b2g/B2G/issues/189">platform_build has been updated</a>.</p>
+</div>
+<h3 id="Be_aware_of_Mac_file_system_case_sensitivity">Be aware of Mac file system case sensitivity</h3>
+<p>By default, Mac OS X ships with a case-insensitive file system.  This is problematic because the Linux kernel has a number of files with the same name, but different case.  For example, see the header files <code>xt_CONNMARK.h</code> and <code>xt_connmark.h</code>.  This results in a number of files appearing to be modified in <code>/kernel</code> after a fresh <code>./config.sh</code>.</p>
+<p>In many cases you can run the build just fine; for some platforms, however, you may encounter the following error:</p>
+<pre><span class="quote">ERROR: You have uncommited changes in kernel
+You may force overwriting these changes
+with |source build/envsetup.sh force|
+
+ERROR: Patching of kernel/ failed.</span></pre>
+<p><span class="quote">Please see <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=867259" title="https://bugzilla.mozilla.org/show_bug.cgi?id=867259">bug 867259</a></span> for more discussion and possible fixes for this problem.</p>
+<p>Alternatively, it will always be safest to build on a case sensitive file system.  The easiest way to do this is to create a separate, mountable disk image with case-sensitivity enabled.  You can do this using Apple's Disk Utility application or from the command line:</p>
+<pre>hdiutil create -volname 'firefoxos' -type SPARSE -fs 'Case-sensitive Journaled HFS+' -size 40g ~/firefoxos.sparseimage</pre>
+<p>Mount the drive with:</p>
+<pre>open ~/firefoxos.sparseimage</pre>
+<p>Change into the mounted drive with:</p>
+<pre>cd /Volumes/firefoxos/</pre>
+<p>You can then check out the code and compile from this location without worrying about case-sensitivity problems.</p>
+<h3 id="Mountain_Lion_homebrew_gotcha">Mountain Lion homebrew gotcha</h3>
+<div>
+ <div>
+  If you are on Mountain Lion and you receive an error during the installation of the dependencies via homebrew, such as:</div>
+</div>
+<div>
+ <pre>clang: error: unable to execute command: Segmentation fault: 11</pre>
+ ... try reinstalling the dependency manually adding the --use-gcc flag, for example:
+ <pre>brew install mpfr --use-gcc</pre>
+</div>
+<h3 id="Follow_Samsung_Galaxy_S2_extra_steps">Follow Samsung Galaxy S2 extra steps</h3>
+<p>If you plan to build for the Samsung Galaxy S2, you will also need to install heimdall. See {{ anch("Installing heimdall") }} for details. This is <strong>not</strong> done for you by the bootstrap script!</p>
+<div class="note">
+ <strong>Note:</strong> If you have installed the <a class="external" href="http://www.samsung.com/us/kies/" title="http://www.samsung.com/us/kies/">Samsung Kies</a> tool, which is used to manage the contents of many Samsung phones, you will have to remove it before you can flash Firefox OS onto your device. You can use the standard application removal process on Windows; on Mac, the Kies install disk image has a utility to fully remove Kies from your system. Flashing <strong>will not work</strong> if you have Kies installed. If you forget to remove Kies, the build system will detect it and remind you to uninstall it. Note also that the uninstall tool does not correctly remove the folder <code>~/Library/Application Support/.FUS</code>, and leaves a reference to a utility there in your user startup items list. You will want to remove these manually.</div>
+<h3 class="note" id="Fix_libmpc_dependency_if_broken">Fix libmpc dependency if broken</h3>
+<p>gcc 4.6 was built with libmpc 0.9; if you then use homebrew to update packages, libmpc gets updated to version 1.0, but homebrew doesn't rebuild gcc 4.6 after the library version changes. So you need to create a symlink to make things work again, like this:</p>
+<pre>cd /usr/local/lib/
+ln -s libmpc.3.dylib libmpc.2.dylib</pre>
+<h3 id="Optional_Install_HAX">Optional: Install HAX</h3>
+<p>Intel provides a special driver that lets the B2G emulator run its code natively on your Mac instead of being emulated, when you're using the x86 emulator. If you wish to use this, you can <a class="external" href="http://software.intel.com/en-us/articles/intel-hardware-accelerated-execution-manager/" title="http://software.intel.com/en-us/articles/intel-hardware-accelerated-execution-manager/">download and install</a> it. It's not required, but it can improve emulation performance and stability.  </p>
+<p>Before you install HAX you will need to install the <a href="http://developer.android.com/sdk/index.html" title="http://developer.android.com/sdk/index.html">Android SDK</a>.</p>
+<h2 class="note" id="Install_adb">Install adb</h2>
+<p>The build process needs to pull binary blobs from the Android installation on the phone before building B2G (unless you're building the emulator, of course).  For this, you will need <code>adb</code>, the Android Debug Bridge.</p>
+<p>You can download and install <code>adb</code> as part of the Android SDK package, for Mac, Linux or Windows - visit the <a href="http://developer.android.com/sdk/index.html">Get the Android SDK</a> page.</p>
+<p>Newer Linux distributions have <code>adb</code> already in their repositories. For Ubuntu 12.10 and later, run the following command:</p>
+<pre>sudo apt-get install android-tools-adb</pre>
+<p>Or for Fedora 18/19:</p>
+<pre>sudo yum install android-tools</pre>
+<p>If your distribution does not have packages for <code>adb </code>available (i.e. Ubuntu 12.04 or Fedora 17), you'll need to install the <a class="external" href="http://developer.android.com/sdk/index.html" title="http://developer.android.com/sdk/index.html">Android SDK starter package</a> for your platform (you'll want the <em>ADT Bundle</em>, not the <em>SDK Tools Only</em> option). Then run their package manager, <code>$SDK_HOME/tools/android</code>, and use the GUI to install "Android SDK Platform-tools".</p>
+<p>Find out where <code>adb</code> is installed (usually in <code>usr/bin</code>, possibly additionally inside <code>adt/platform-tools</code>, depending on how you installed it). Be sure to add this directory to your <code>PATH</code>. This can be done by adding the line</p>
+<pre>PATH=$SDK_HOME:$PATH</pre>
+<p>replacing <code>$SDK_HOME</code> with the location of the android sdk, to your <code>~/.bashrc</code> or equivalent.</p>
+<h2 class="note" id="Install_heimdall">Install heimdall</h2>
+<p>Heimdall is a utility for flashing the Samsung Galaxy S2. It's used by the Boot to Gecko flash utility to replace the contents of the phone with Firefox OS, as well as to flash updated versions of B2G and Gaia onto the device. You'll need it if you want to install Firefox OS on a Galaxy S2; it is <strong>not</strong> needed for any other device. For other devices, we build and use the fastboot utility instead.</p>
+<div class="note">
+ <strong>Note:</strong> Again, it's important to note that this is <strong>only required for installing Firefox OS on the Samsung Galaxy S2</strong>.</div>
+<p>There are two ways to install heimdall:</p>
+<ul>
+ <li>You can <a class="link-https" href="https://github.com/Benjamin-Dobell/Heimdall" title="https://github.com/Benjamin-Dobell/Heimdall">download the code</a> GitHub and build it yourself.</li>
+ <li>Use a package manager to install it.
+  <ul>
+   <li>On Linux: <code>sudo apt-get install libusb-1.0-0 libusb-1.0-0-dev</code></li>
+   <li>On Mac, you can <a class="link-https" href="https://github.com/downloads/Benjamin-Dobell/Heimdall/heimdall-suite-1.3.2-mac.dmg" title="https://github.com/downloads/Benjamin-Dobell/Heimdall/heimdall-suite-1.3.2-mac.dmg">download an installer package</a> and use that.</li>
+  </ul>
+ </li>
+</ul>
+<h2 id="Configure_ccache">Configure ccache</h2>
+<p>The B2G build process uses ccache. The default cache size for ccache is 1GB, but the B2G build easily saturates this; around 3GB is recommended. You can configure your cache by running the following command inside terminal:</p>
+<pre><code>$ ccache --max-size 3GB</code></pre>
+<h2 id="For_Linux_configure_the_udev_rule_for_your_phone">For Linux: configure the udev rule for your phone</h2>
+<div class="note">
+ <p>Note: This section is specific to Linux; Mac OSX has the necessary device permissions set up already.</p>
+</div>
+<p>Next, you need to confingure the udev rule for your phone,</p>
+<p>You can get the USB vendor ID by running <code>lsusb</code> with your phone plugged in, but typically it's Google <code>18d1,</code> Samsung <code>04e8</code>, ZTE <code>19d2</code>, Geeksphone/Qualcomm <code>05c6</code>. Add this line in your <code>/etc/udev/rules.d/android.rules</code> file (replacing <code>XXXX</code> with the ID for your device):</p>
+<pre>SUBSYSTEM=="usb", ATTR{idVendor}=="XXXX", MODE="0666", GROUP="plugdev"</pre>
+<p>Take ZTE for example, the content in android.rules will be</p>
+<pre style="font-size: 14px;">SUBSYSTEM=="usb", ATTR{idVendor}=="19d2", MODE="0666", GROUP="plugdev"</pre>
+<div class="note">
+ <p><span style="line-height: 1.572;">If the file doesn't exist, create it. The <code>rules.d</code> directory is usually read only by default, so you may have to use <code>chmod</code> to make the directory writeable, or the file, or both.</span></p>
+</div>
+<p><span style="line-height: 1.572;">Once you've saved the file, and closed it,  make the file readable:</span></p>
+<pre>$ sudo chmod a+r /etc/udev/rules.d/android.rules
+</pre>
+<p>Now that the udev rules have been updated, restart the udev daemon. For ubuntu:</p>
+<pre>sudo service udev restart</pre>
+<p>Finally, unplug and the USB cable but don't replug it in because we need to enable remote debugging on the phone first.</p>
+<h2 id="Enable_remote_debugging">Enable remote debugging</h2>
+<p>Before you plug your phone back into your USB port, put it USB developer mode. This allows you to debug and flash the phone. To enable developer mode, on your phone select <code>Settings app</code> -&gt; <code>Device information</code> -&gt; <code>More Information</code> -&gt; <code>Developer</code> -&gt; <code>Remote debugging</code> (this was called Developer mode on older versions.) Once the option is checked, remote debugging is enabled, and you are ready to go.</p>
+<p>At this point, connect your phone to your computer via a USB cable (if you created the udev rule before, this will trigger udev to detect the phone and create the device node with the right permissions). Now you can check if you can list your device via the <code>adb devices</code> command. If everything has worked ok, you should see an output similar to this (the following is for a Geeksphone Keon):</p>
+<pre style="font-size: 14px;">$ adb devices
+List of devices attached
+full_keon       device</pre>
+<p>If the device did not list as expect, check the file name and the script are all correct (see previous section), then restart the computer and retype the command again. Note also that if your device uses fastboot, the bootloader may identify itself with a different vendor ID than the one you see when the device boots normally.</p>
+<h2 id="Backup_the_phone_system_partition">Backup the phone system partition</h2>
+<div class="warning">
+ <p><strong>Note:</strong> You have to do this before you build your device if you do not have existing system backup. Because some libraries will be referenced in build time. These library might be proprietary so we can't provide in our code base.</p>
+</div>
+<p>It is recommended to back up the entire Android system partition on your phone.</p>
+<p>You can use this copy of the binary blobs for Android in case you later delete your B2G tree. To do this, run:</p>
+<pre>adb pull /system &lt;backup target dir&gt;/system
+</pre>
+<p> Depending on the phone, you may also need to pull the /data and/or /vendor directories:</p>
+<pre>adb pull /data &lt;backup target dir&gt;/data
+adb pull /vendor &lt;backup target dir&gt;/vendor
+</pre>
+<p>If the pull commands fail with "insufficient permission" message, try the following:</p>
+<ul>
+ <li>stop and restart the adb server, or if that fails,</li>
+ <li>double-check that you have granted <em>root</em> permissions to the 'adb' tool within your custom ROM (e.g. under CyanogenMod, change 'Settings -&gt; System -&gt; Developer Options -&gt; Root Access' to 'Apps and ADB' or 'ADB only').</li>
+ <li>Verify that you have set up the udev rule correctly (see {{ anch("For Linux: configure the udev rule for your phone") }}.</li>
+</ul>
+<h2 id="On_to_the_next_step">On to the next step</h2>
+<pre>At this point, you should be ready to <a href="/en-US/docs/Mozilla/Firefox_OS/Preparing_for_your_first_B2G_build" title="en-US/docs/Mozilla/Firefox_OS/Preparing_for_your_first_B2G_build">fetch the Firefox OS code</a>!</pre>
diff --git a/files/de/archive/b2g_os/firefox_os_faq/index.html b/files/de/archive/b2g_os/firefox_os_faq/index.html
new file mode 100644
index 0000000000..0cc309dbfe
--- /dev/null
+++ b/files/de/archive/b2g_os/firefox_os_faq/index.html
@@ -0,0 +1,41 @@
+---
+title: Firefox OS FAQ DE
+slug: Archive/B2G_OS/Firefox_OS_FAQ
+translation_of: Archive/B2G_OS/Introduction
+---
+<dl>
+  <dt>
+    <span id="result_box" lang="de"><span class="hps">Wie bekomme ich</span> <span class="hps">ein</span> <span class="hps">Developer Preview</span> <span class="hps">Telefon?</span></span></dt>
+  <dd>
+    Weitere Informationen werden bald auf der <span id="result_box" lang="de"><span class="hps">Geeksphone</span> <span class="hps">Website zur Verfügung</span></span> stehen.</dd>
+  <dt>
+    Wenn ich kein Entwickler-Telefon kaufen möchte, kann ich trotzdem eine App für Firefox OS entwickeln?</dt>
+  <dd>
+    Selbstverständlich! Sie können die App über Android testen, oder auf dem Computer mit dem (using <a href="https://hacks.mozilla.org/2012/10/firefox-marketplace-aurora/">Marketplace for Firefox</a>)  <a href="https://hacks.mozilla.org/2012/12/firefox-os-simulator-1-0-is-here/">Firefox OS simulator</a>.</dd>
+  <dt>
+    Wann wird das "fertige" Telefon verfügbar sein?</dt>
+  <dd>
+    Wir werden mit mehreren Partnern gemeinsam das Telefon auf den Markt bringen, jedoch besprechen wir uns diesbezüglich zu einem späteren Zeitpunkt nochmal.</dd>
+  <dt>
+    Wo kann ich mir Firefox OS auf mein Handy laden?</dt>
+  <dd>
+    <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS">https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS</a></dd>
+  <dt>
+    Wie kann ich meine Firefox OS App testen?</dt>
+  <dd>
+    Auf Android oder über unseren OS Simulator.</dd>
+  <dt>
+    Was ist Firefox OS?</dt>
+  <dd>
+    <span id="result_box" lang="de"><span class="hps">Es ist ein neues</span> <span class="hps">Handy-Betriebssystem, dass komplett auf offenen  Web-Standards basieren wird. Es ermöglicht für jede Geräte-Funktion </span></span><span id="result_box" lang="de"><span class="hps atn">(</span><span>Telefonie,</span> <span class="hps">Messaging</span><span>, Browsen</span> <span class="hps">usw.)</span></span> eine eigenenständige auf dem HTML5-Standard basierende Applikation zu entwickeln, die grundsätzlich (theoretisch) auf jedem anderen Gerät (<font><font lang="de">nur verfügbar in systemeigene Anwendungen)</font></font> funktionieren würde.</dd>
+  <dt>
+    Wie ist die Liste der vollständigen Web APIs; Werden diese standardisiert werden?</dt>
+  <dd>
+    <font><font lang="de">Eine große Anzahl von WebAPIs wird in die erste Implementierung des Firefox-OS aufgenommen werden. </font><font lang="de">Eine vollständige Liste finden Sie auf</font></font></dd>
+  <dd>
+    <a href="https://wiki.mozilla.org/WebAPI#APIs"><font><font lang="de">https://wiki.mozilla.org</font></font>https://wiki.mozilla.org/WebAPI#APIs</a>.</dd>
+  <dt>
+    <font lang="de">Sind die Web-APIs für den plattformübergreifenden Einsatz standardisiert?</font></dt>
+  <dd>
+    <font><font lang="de">Ja, die APIs sind das Ergebnis von Arbeiten mit mehreren Partnern, die bereits auch für andere Plattformen entwickelt haben. Das Umsetzen stellt in Bezug auf die unterschiedlichen Hardware-Anforderungen der Benutzer ein Problem dar, das nicht nur Mozilla beschäftigt</font></font>. Unsere Anwendungen sind ein guter Anhalts&amp;Ausgangspunkt für weitere zukünftige Plattformen und Entwicklungen.</dd>
+</dl>
diff --git a/files/de/archive/b2g_os/gaia/gaia_apps/index.html b/files/de/archive/b2g_os/gaia/gaia_apps/index.html
new file mode 100644
index 0000000000..e4f64963a0
--- /dev/null
+++ b/files/de/archive/b2g_os/gaia/gaia_apps/index.html
@@ -0,0 +1,86 @@
+---
+title: Gaia apps
+slug: Archive/B2G_OS/Gaia/Gaia_apps
+translation_of: Archive/B2G_OS/Platform/Gaia/Gaia_apps
+---
+<div class="summary">
+<p><span class="seoSummary">Gaia is the front-end of Firefox OS, which contains system administration functionality and the built-in suite of apps shipped with Firefox OS devices. All the Gaia source code — even the system, and keyboard IMEs — is fully implemented with HTML5 (HTML + CSS + JavaScript) &amp; Open WebAPIs. This set of documents contains information on how each of the default apps available in the Gaia family works.</span></p>
+</div>
+
+<h2 id="Gaia_functionality_categories">Gaia functionality categories</h2>
+
+<p>The different apps inside Gaia can be roughly categorized into the groups listed below.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Many of the pages linked to for more explanation of how the individual apps work are README pages inside the <a href="https://github.com/mozilla-b2g/gaia/">Gaia Github repo</a>. This is because many of the apps are on rapid development cycles and therefore subject to rapid (often daily) change, so it would make little sense to try to keep MDN pages updated with these changes. The engineer-maintained README pages are currently the most accurate source of information.</p>
+</div>
+
+<h3 id="Platform">Platform</h3>
+
+<p>Including the System, Settings, Lockscreen, build scripts, and Bluetooth apps.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7503/platform_team.png" style="display: block; height: 269px; margin: 0px auto; width: 355px;"></p>
+
+<h4 id="Platform_apps_further_explanation">Platform apps: further explanation</h4>
+
+<dl>
+ <dt><a href="/en-US/Firefox_OS/Platform/Gaia/Gaia_apps/System">System</a></dt>
+ <dd>The System app is the first web app loaded by Gecko during the <a href="https://developer.mozilla.org/en-US/Firefox_OS/Platform/Architecture#Firefox_OS_bootup_procedure">Firefox OS bootup procedure</a>, and it handles numerous responsibilities that are required generally for the running of the system, and are therefore not scoped per individual web app.</dd>
+ <dt><a href="/en-US/Firefox_OS/Platform/Gaia/Gaia_apps/Browser">Browser</a></dt>
+ <dd>The Browser app (which is now part of System) provides browser-like functionality where it is needed — including page navigation, search and bookmarks.</dd>
+ <dt><a href="/en-US/Firefox_OS/Platform/Gaia/Gaia_apps/Window_Management">Window Management</a></dt>
+ <dd>Firefox OS's window management functionality — including app life cycle and interaction, notifications, animations and much more — is handled by a specific part of the System app. This article looks at Firefox OS Window Management in detail.</dd>
+ <dt><a href="/en-US/Firefox_OS/Platform/Gaia/Gaia_apps/Settings">Settings</a></dt>
+ <dd>The Settings app allows Firefox OS users to configure device settings, and responds to incoming activities (<a href="/en-US/docs/WebAPI/Web_Activities">Web activities</a> with a name of <code>configure</code>), which allows other apps to jump to different panels inside the Settings app to handle configuration as required (for example showing the wifi settings panel if no data connection is available.)</dd>
+</dl>
+
+<h3 id="Communication">Communication</h3>
+
+<p>Including the Dialer, Contact, SMS apps and FTU apps.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7499/comms_team.png" style="display: block; height: 246px; margin: 0px auto; width: 317px;"></p>
+
+<h4 id="Communication_apps_further_explanation">Communication apps: further explanation</h4>
+
+<p>TBD</p>
+
+<h3 id="Productivity">Productivity</h3>
+
+<p>Including the Email, Calendar, and Clock apps.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7505/productivity_team.png" style="display: block; height: 178px; margin: 0px auto; width: 303px;"></p>
+
+<h4 id="Productivity_apps_further_explanation">Productivity apps: further explanation</h4>
+
+<dl>
+ <dt><a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/calendar/README.md">Calendar</a></dt>
+ <dd>The Firefox OS built-in calendar app.</dd>
+ <dt><a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/clock/README.md">Clock</a></dt>
+ <dd>Firefox OS's default Clock app, which includes alarm, timer and stopwatch functionality.</dd>
+ <dt><a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/email/README.md">Email</a></dt>
+ <dd>The Gaia e-mail app.</dd>
+</dl>
+
+<h3 id="Media">Media</h3>
+
+<p>Including the Camera, Gallery, Music, and Video apps, and some media related functions such as forward lock DRM and wallpapers.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7501/media_team.png" style="display: block; height: 250px; margin: 0px auto; width: 386px;"></p>
+
+<h4 id="Media_apps_further_explanation">Media apps: further explanation</h4>
+
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia/Gaia_apps/Video">Video</a></dt>
+ <dd>Video is a simple video player app that will play videos present on your Firefox OS device's storage media.</dd>
+ <dt><a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/camera/README.md">Camera</a></dt>
+ <dd>Camera allows Firefox OS users to capture and manage videos and photos from the device camera(s), and responding the <a href="/en-US/docs/WebAPI/Web_Activities">Web activities</a> of type <code>pick</code> from other apps that want to grab media using Camera's functionality.</dd>
+</dl>
+
+<h3 id="Other_Gaia_features">Other Gaia features</h3>
+
+<p>Besides these functions, there are several other major features such as browser, homescreen, marketplace, test framework, PDF viewer, and app manager, which are developed closely alongside Gaia.</p>
+
+<dl>
+ <dt><a href="https://github.com/mozilla/pdf.js/blob/master/README.md">pdf.js</a></dt>
+ <dd>pdf.js is an HTML5-based PDF viewer, used inside Gaia for viewing PDFs. Note that the codebase for pdf.js is maintained in a separate repo, outside Gaia.</dd>
+</dl>
diff --git a/files/de/archive/b2g_os/gaia/hacking/index.html b/files/de/archive/b2g_os/gaia/hacking/index.html
new file mode 100644
index 0000000000..64b9be9f79
--- /dev/null
+++ b/files/de/archive/b2g_os/gaia/hacking/index.html
@@ -0,0 +1,181 @@
+---
+title: Hacking Gaia
+slug: Archive/B2G_OS/Gaia/Hacking
+translation_of: Firefox_OS/Developing_Gaia
+---
+<p>Gaia ist die Sammlung von Webapps, die das Front-End des Firefox OS (Codename Boot to Gecko) bilden.</p>
+<p>Alles was Sie auf dem Bildschirm von Firefox OS sehen, inklusive dem Homescreen, wurde nur mit Hilfe von freien Web-Technologien erstellt, </p>
+<p> </p>
+<h2 id="Quellcode_besorgen" style="margin: 0px 0px 1em; padding: 0px; line-height: 20px; color: rgb(68, 68, 68); font-family: Arial, sans-serif;">Quellcode besorgen</h2>
+<p>To get the source code for Gaia, <a href="https://github.com/mozilla-b2g/gaia" title="https://github.com/mozilla-b2g/gaia">fork us on GitHub</a> and then clone your fork using <a href="http://git-scm.com/" title="http://git-scm.com/">git</a>.</p>
+<pre>$ git clone https://github.com/<span style="color: #a9a9a9;">username</span>/gaia.git</pre>
+<h2 id="Gaia_starten" style="margin: 0px 0px 1em; padding: 0px; line-height: 20px; color: rgb(68, 68, 68); font-family: Arial, sans-serif;">Gaia starten</h2>
+<p>Sie können Gaia entweder auf Ihrem Desktop nutzen oder mit einem kompatiblem mobilen Gerät.</p>
+<p> </p>
+<p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.428em; line-height: inherit;">B2G Desktop</span></p>
+<p><span style="color: rgb(68, 68, 68); font-family: Arial, sans-serif; line-height: 20px;">B2G Desktop is a desktop build of the app runtime used on Firefox OS devices which you can use to run Gaia on your desktop computer.</span></p>
+<p>You can download a nightly build of B2G Desktop from <a href="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/" title="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/">here</a>. Currently we recommend installing the latest <a href="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-beta/" title="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-beta/">beta build</a> for your platform. There are builds for Linux (32 bit and 64 bit), OS X and Windows.</p>
+<p><span style="line-height: 20px; color: rgb(68, 68, 68); font-family: Arial, sans-serif;">Nightly builds come packaged with a recent version of gaia. Once you've downloaded the archive, all your need to do is extract it to a folder and run the b2g binary from the extracted folder.</span></p>
+<p><strong>Note:</strong> 64 bit Linux builds do not currently work on some distributions, this is <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=812484" title="https://bugzilla.mozilla.org/show_bug.cgi?id=812484">bug </a><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=812484" title="https://bugzilla.mozilla.org/show_bug.cgi?id=812484">812484</a>. If you have problems try a 32-bit build instead.</p>
+<pre>$ cd b2g
+$ ./b2g</pre>
+<p>To run B2G with your own version of Gaia for development purposes you first need build a profile from your clone:</p>
+<pre>$ cd <span style="color: #a9a9a9;">/path/to/gaia</span>
+$ DEBUG=1 make</pre>
+<p>This will generate a directory in your gaia directory called "profile". The DEBUG part runs Gaia as hosted apps on a built-in web server, rather than the default packaged apps which have to be re-packaged after every change.</p>
+<p><strong>Note: </strong>Debug builds are currently broken on B2G Desktop, so until <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=816957" title="https://bugzilla.mozilla.org/show_bug.cgi?id=816957">bug 816957</a> is fixed you need to run "make" without the "DEBUG=1" part, then re-run make every time you make a change to Gaia.</p>
+<p> </p>
+<p>You can then run B2G Desktop with your generated profile like so:</p>
+<pre>$ <span style="color: #a9a9a9;">/path/to/b2g/</span>b2g-bin -profile <span style="color: #a9a9a9;">/path/to/gaia/</span>profile</pre>
+<p>If you want to you can build your own B2G Desktop from source.</p>
+<h3 id="B2G_Device">B2G Device</h3>
+<p> </p>
+<p>If you have a compatible mobile device you can also run Gaia by flashing it with Firefox OS. Please see <a href="https://github.com/mozilla-b2g/B2G/blob/master/README.md" rel="nofollow">documentation here</a>.</p>
+<p>There is also <a href="https://wiki.mozilla.org/B2G/DeveloperPhone#Gaia.2FB2G_Development_Environment" rel="nofollow">documentation here</a> about testing changes on your device.</p>
+<h2 id="Unit_Tests">Unit Tests</h2>
+<p> </p>
+<p>See <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Boot_to_Gecko/Gaia_Unit_Tests" rel="nofollow">here</a> for information about writing and running unit tests for Gaia.</p>
+<h2 id="Filing_Bugs">Filing Bugs</h2>
+<p> </p>
+<p>Bugs are filed on Bugzilla under <a href="https://bugzilla.mozilla.org/buglist.cgi?product=Boot2Gecko&amp;component=Gaia&amp;resolution=---" rel="nofollow">Boot2Gecko &gt; Gaia</a>.</p>
+<p>File a new bug under the Gaia component (or one of the sub-components) <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Boot2Gecko" rel="nofollow">here</a>.</p>
+<h2 id="Contributing_Code">Contributing Code</h2>
+<p> </p>
+<p>Mozilla depends on contributions from the open source community to help develop Gaia apps and we'd love you to get involved.</p>
+<p>Some great places to find some bugs to start hacking on:</p>
+<ul>
+  <li><a href="https://bugzilla.mozilla.org/buglist.cgi?quicksearch=component:gaia%20sw:polish%20@nobody;list_id=4566236" rel="nofollow">Unowned Gaia polish bugs on Bugzilla</a></li>
+  <li><a href="http://www.joshmatthews.net/bugsahoy/?b2g=1" rel="nofollow">Mentored bugs</a></li>
+</ul>
+<h3 id="Coding_Style">Coding Style</h3>
+<p> </p>
+<ul style="margin: 10px 0px 1em 25px; padding: 0px; line-height: 20px; color: rgb(68, 68, 68); font-family: Arial, sans-serif;">
+  <li style="margin: 0px; padding: 0px 0px 0px 5px; line-height: 1.4;">Background:
+    <ul style="margin: 0px 0px 0px 10px; padding: 0px; line-height: 1.4;">
+      <li style="margin: 0px; padding: 0px 0px 0px 5px; line-height: 1.4;"><a class="extiw" href="https://developer.mozilla.org/en/Developer_Guide/Coding_Style#General_practices" style="margin: 0px; padding: 0px; line-height: 1.4; color: rgb(0, 51, 153);" title="mdc:Developer Guide/Coding Style">MDC:Developer Guide/Coding Style#General practices</a></li>
+      <li style="margin: 0px; padding: 0px 0px 0px 5px; line-height: 1.4;"><a class="extiw" href="https://developer.mozilla.org/en/Developer_Guide/Coding_Style#JavaScript_practices" style="margin: 0px; padding: 0px; line-height: 1.4; color: rgb(0, 51, 153);" title="mdc:Developer Guide/Coding Style">MDC:Developer Guide/Coding Style#JavaScript practices</a></li>
+      <li style="margin: 0px; padding: 0px 0px 0px 5px; line-height: 1.4;"><a class="extiw" href="https://developer.mozilla.org/en/Developer_Guide/Coding_Style#Naming_and_Formatting_code" style="margin: 0px; padding: 0px; line-height: 1.4; color: rgb(0, 51, 153);" title="mdc:Developer Guide/Coding Style">MDC:Developer Guide/Coding Style#Naming and Formatting code</a></li>
+    </ul>
+  </li>
+</ul>
+<ul style="margin: 10px 0px 1em 25px; padding: 0px; line-height: 20px; color: rgb(68, 68, 68); font-family: Arial, sans-serif;">
+  <li style="margin: 0px; padding: 0px 0px 0px 5px; line-height: 1.4;">make sure HTML files are declared &lt;!DOCTYPE html&gt; (i.e., HTML5). IE9+ will load them in compatibility mode otherwise.</li>
+</ul>
+<ul style="margin: 10px 0px 1em 25px; padding: 0px; line-height: 20px; color: rgb(68, 68, 68); font-family: Arial, sans-serif;">
+  <li style="margin: 0px; padding: 0px 0px 0px 5px; line-height: 1.4;">add a <code style="margin: 0px; padding: 0px; line-height: 1.4; font-size: 15px;">"use strict";</code> statement (exactly that!) to the top of your JS files</li>
+</ul>
+<ul style="margin: 10px 0px 1em 25px; padding: 0px; line-height: 20px; color: rgb(68, 68, 68); font-family: Arial, sans-serif;">
+  <li style="margin: 0px; padding: 0px 0px 0px 5px; line-height: 1.4;">2 spaces for indentation - do not use tab.</li>
+</ul>
+<ul style="margin: 10px 0px 1em 25px; padding: 0px; line-height: 20px; color: rgb(68, 68, 68); font-family: Arial, sans-serif;">
+  <li style="margin: 0px; padding: 0px 0px 0px 5px; line-height: 1.4;">Line break are free (I promise) don't hesitate to use them to separate logical block inside your functions.</li>
+</ul>
+<ul style="margin: 10px 0px 1em 25px; padding: 0px; line-height: 20px; color: rgb(68, 68, 68); font-family: Arial, sans-serif;">
+  <li style="margin: 0px; padding: 0px 0px 0px 5px; line-height: 1.4;">Files are named <code style="margin: 0px; padding: 0px; line-height: 1.4; font-size: 15px;">like_this.js</code>.</li>
+</ul>
+<ul style="margin: 10px 0px 1em 25px; padding: 0px; line-height: 20px; color: rgb(68, 68, 68); font-family: Arial, sans-serif;">
+  <li style="margin: 0px; padding: 0px 0px 0px 5px; line-height: 1.4;">Use single quote instead of double quotes.</li>
+</ul>
+<ul style="margin: 10px 0px 1em 25px; padding: 0px; line-height: 20px; color: rgb(68, 68, 68); font-family: Arial, sans-serif;">
+  <li style="margin: 0px; padding: 0px 0px 0px 5px; line-height: 1.4;">Additional rules:</li>
+</ul>
+<p style="margin: 0px 0px 1em; padding: 0px; line-height: 20px; color: rgb(68, 68, 68); font-family: Arial, sans-serif;">Bad:</p>
+<pre style="margin-right: 1em; margin-left: 1em; padding: 1em; line-height: 1.4; background-color: rgb(238, 238, 238); border-style: solid; border-color: rgb(204, 204, 204); color: rgb(68, 68, 68);">if (expression) doSomething();
+</pre>
+<p style="margin: 0px 0px 1em; padding: 0px; line-height: 20px; color: rgb(68, 68, 68); font-family: Arial, sans-serif;">Correct:</p>
+<pre style="margin-right: 1em; margin-left: 1em; padding: 1em; line-height: 1.4; background-color: rgb(238, 238, 238); border-style: solid; border-color: rgb(204, 204, 204); color: rgb(68, 68, 68);">if (expression)
+  doSomething();</pre>
+<p> </p>
+<p>If you're working on the system app, check out the guidance listed <a href="See_here_for_some_rules._https://groups.google.com/d/msg/mozilla.dev.gaia/rEhSrw6XmT4/UNvE7qW9pgYJ" title="See_here_for_some_rules._https://groups.google.com/d/msg/mozilla.dev.gaia/rEhSrw6XmT4/UNvE7qW9pgYJ">here</a>.</p>
+<p>Before submitting a patch we recommend you run gjslint on it to check for any style errors:</p>
+<p> </p>
+<pre>gjslint --nojsdoc <span style="color: #a9a9a9;">my_file.js</span></pre>
+<p> </p>
+<h3 id="Submitting_a_Patch">Submitting a Patch</h3>
+<p>First file or assign a bug to yourself on <a href="https://bugzilla.mozilla.org/buglist.cgi?product=Boot2Gecko&amp;component=Gaia&amp;resolution=---" title="https://bugzilla.mozilla.org/buglist.cgi?product=Boot2Gecko&amp;component=Gaia&amp;resolution=---">Bugzilla</a>, you'll need a Bugzilla account.</p>
+<p>Then create a branch on your fork of Gaia:</p>
+<pre>$ git branch <span style="color: #a9a9a9;">branchname</span>
+$ git checkout <span style="color: #a9a9a9;">branchname</span></pre>
+<p>Commit your changes:</p>
+<pre>$ git add <span style="color: #a9a9a9;">/file/to/add</span>
+$ git commit -m "<span style="color: #a9a9a9;">commit message including bug number</span>"</pre>
+<p>Push your branch:</p>
+<pre>$ git push origin <span style="color: #a9a9a9;">branchname</span></pre>
+<p>Send a pull request by navigating to the branch in your fork on GitHub and finding the pull request button.</p>
+<p>To request a review of your patch, add an attachment to the bug in Bugzilla referencing the URL of the pull request and set the review ("r") flag to "?" and enter the bugzilla ID of one of the module owners and peers listed <a href="https://wiki.mozilla.org/Modules/Boot2Gecko" title="https://wiki.mozilla.org/Modules/Boot2Gecko">here</a>.</p>
+<p>The reviewer may ask you to make some changes. Once they're is happy with your patch, they will merge it into the master branch for you. Before they do this they would prefer it if you could squash all your changes into a single commit and add "r=<span style="color: rgb(169, 169, 169);">reviewername</span>" to the end of the commit message.</p>
+<h2 id="Contacting_the_Team">Contacting the Team</h2>
+<p> </p>
+<ul>
+  <li><a href="https://lists.mozilla.org/listinfo/dev-gaia" rel="nofollow">Gaia Mailing List</a></li>
+  <li>#gaia IRC channel on irc.mozilla.org</li>
+</ul>
+<h2 id="Tips">Tips</h2>
+<h3 id="Linux_B2G_Desktop_support">Linux B2G Desktop support</h3>
+<p> </p>
+<h4 id="The_homescreen_is_empty_2" style="margin: 0.85em 0px; padding: 0px; line-height: 1.4; color: rgb(42, 42, 42); font-family: MetaBold, 'Trebuchet MS', sans-serif; font-size: 15px;"><span class="mw-headline" id="The_homescreen_is_empty" style="margin: 0px; padding: 0px; line-height: 1.4;">The homescreen is empty</span></h4>
+<p style="margin: 0px 0px 1em; padding: 0px; line-height: 20px; color: rgb(68, 68, 68); font-family: Arial, sans-serif;">Currently, under Linux, OOP frame aren't rendered properly. The homescreen isn't actually rendered here...</p>
+<p style="margin: 0px 0px 1em; padding: 0px; line-height: 20px; color: rgb(68, 68, 68); font-family: Arial, sans-serif;">If you just want to happily hack on pure UI (css and JS) you can safely run with OOP disabled and avoid those issues. Change the line in build/settings.py</p>
+<pre style="margin-right: 1em; margin-left: 1em; padding: 1em; line-height: 1.4; background-color: rgb(238, 238, 238); border-style: solid; border-color: rgb(204, 204, 204); color: rgb(68, 68, 68);"> "debug.oop.disabled": False,
+</pre>
+<p style="margin: 0px 0px 1em; padding: 0px; line-height: 20px; color: rgb(68, 68, 68); font-family: Arial, sans-serif;">to</p>
+<pre style="margin-right: 1em; margin-left: 1em; padding: 1em; line-height: 1.4; background-color: rgb(238, 238, 238); border-style: solid; border-color: rgb(204, 204, 204); color: rgb(68, 68, 68);"> "debug.oop.disabled": True,
+</pre>
+<p style="margin: 0px 0px 1em; padding: 0px; line-height: 20px; color: rgb(68, 68, 68); font-family: Arial, sans-serif;">To the profile/user.js in your gaia directory.</p>
+<h3 id="Port_Forwarding">Port Forwarding</h3>
+<p> </p>
+<p style="margin: 0px 0px 1em; padding: 0px; line-height: 20px; color: rgb(68, 68, 68); font-family: Arial, sans-serif;">To forward the socket on the phone to the desktop (for desktop development), you first need to get rilproxy to expose it as such, rather than exposing it to Gecko. In the gaia directory:</p>
+<pre style="margin-right: 1em; margin-left: 1em; padding: 1em; line-height: 1.4; background-color: rgb(238, 238, 238); border-style: solid; border-color: rgb(204, 204, 204); color: rgb(68, 68, 68);"> $ make forward
+</pre>
+<p style="margin: 0px 0px 1em; padding: 0px; line-height: 20px; color: rgb(68, 68, 68); font-family: Arial, sans-serif;">This runs the commands:</p>
+<pre style="margin-right: 1em; margin-left: 1em; padding: 1em; line-height: 1.4; background-color: rgb(238, 238, 238); border-style: solid; border-color: rgb(204, 204, 204); color: rgb(68, 68, 68);">$ adb shell touch /data/local/rilproxyd
+$ adb shell killall rilproxy
+$ adb forward tcp:6200 localreserved:rilproxyd
+</pre>
+<p style="margin: 0px 0px 1em; padding: 0px; line-height: 20px; color: rgb(68, 68, 68); font-family: Arial, sans-serif;">The file located at /data/local/rilproxyd will be deleted once the rilproxy daemon will start again. As a consequence you have to do this manipulation every time your device restarts.</p>
+<h3 id="Restarting_B2G_on_a_device_from_the_desktop">Restarting B2G on a device from the desktop</h3>
+<p> </p>
+<pre style="margin-right: 1em; margin-left: 1em; padding: 1em; line-height: 1.4; background-color: rgb(238, 238, 238); border-style: solid; border-color: rgb(204, 204, 204); color: rgb(68, 68, 68);">adb shell killall b2g
+</pre>
+<h3 id="B2G_Desktop_JavaScript_Console">B2G Desktop JavaScript Console</h3>
+<p> </p>
+<p style="margin: 0px 0px 1em; padding: 0px; line-height: 20px; color: rgb(68, 68, 68); font-family: Arial, sans-serif;">You can run B2G Desktop with the JavaScript console by using the -jsconsole flag</p>
+<pre style="margin-right: 1em; margin-left: 1em; padding: 1em; line-height: 1.4; background-color: rgb(238, 238, 238); border-style: solid; border-color: rgb(204, 204, 204); color: rgb(68, 68, 68);">$ /path/to/b2g-bin -jsconsole
+</pre>
+<h3 id="Launching_an_app_directly">Launching an app directly</h3>
+<p> </p>
+<p style="margin: 0px 0px 1em; padding: 0px; line-height: 20px; color: rgb(68, 68, 68); font-family: Arial, sans-serif;">A "--runapp" option has been added to the B2G Desktop command-line to automatically start an application. The system app is loaded and everything happens like normal; this is not like the old trick where we loaded your app instead of the system app.</p>
+<p style="margin: 0px 0px 1em; padding: 0px; line-height: 20px; color: rgb(68, 68, 68); font-family: Arial, sans-serif;">"--runapp" takes an argument that it normalizes by lower-casing and removing dashes and spaces, and then checks the argument against the similarly normalized app names from app manifests. For example, the name of the e-mail app is currently "E-Mail", but "--runapp email" will run it. Partial matching is not supported right now, but you can enhance b2g/chrome/content/runapp.js if your app name is unwieldy.</p>
+<p style="margin: 0px 0px 1em; padding: 0px; line-height: 20px; color: rgb(68, 68, 68); font-family: Arial, sans-serif;">If you invoke "--runapp" without an argument (or an empty argument), the command will print out a list of all the apps it knows about as well as a brief usage message.</p>
+<p style="margin: 0px 0px 1em; padding: 0px; line-height: 20px; color: rgb(68, 68, 68); font-family: Arial, sans-serif;">One important note is that this command disables the lock-screen as part of its magic and does not re-enable it. The assumption is that you won't use this command on a profile where you are testing the lock screen, or will turn it back on manually. Feel free to enhance the command to behave better if this is a problem for you.</p>
+<p style="margin: 0px 0px 1em; padding: 0px; line-height: 20px; color: rgb(68, 68, 68); font-family: Arial, sans-serif;">In summary:</p>
+<pre style="margin-right: 1em; margin-left: 1em; padding: 1em; line-height: 1.4; background-color: rgb(238, 238, 238); border-style: solid; border-color: rgb(204, 204, 204); color: rgb(68, 68, 68);">./b2g -profile /path/to/your/gaia/profile --runapp email
+</pre>
+<p style="margin: 0px 0px 1em; padding: 0px; line-height: 20px; color: rgb(68, 68, 68); font-family: Arial, sans-serif;">runs the e-mail app.</p>
+<h3 id="reset-gaia_and_install-gaia_make_targets">reset-gaia and install-gaia make targets</h3>
+<p> </p>
+<p style="margin: 0px 0px 1em; padding: 0px; line-height: 20px; color: rgb(68, 68, 68); font-family: Arial, sans-serif;">The reset-gaia and install-gaia make targets can be used interchangeably. reset-gaia will purge all the existing profiles, database before push Gaia from your working directory (new setting database will also be initialized); install-gaia will just push updates of Gaia.</p>
+<h3 id="Blank_screen_when_B2G_Desktop_starts">Blank screen when B2G Desktop starts</h3>
+<p> </p>
+<p style="margin: 0px 0px 1em; padding: 0px; line-height: 20px; color: rgb(68, 68, 68); font-family: Arial, sans-serif;">When you start b2g using b2g -profile $GAIA/profile a blank screen shows up and you see an error Cannot reach app://system.gaiamobile.org. To fix this there are a couple of things you can check</p>
+<ul style="margin: 10px 0px 1em 25px; padding: 0px; line-height: 20px; color: rgb(68, 68, 68); font-family: Arial, sans-serif;">
+  <li style="margin: 0px; padding: 0px 0px 0px 5px; line-height: 1.4;">Rebuild the gaia profile using DEBUG=1 make profile in the $GAIA directory</li>
+  <li style="margin: 0px; padding: 0px 0px 0px 5px; line-height: 1.4;">Run b2g again</li>
+  <li style="margin: 0px; padding: 0px 0px 0px 5px; line-height: 1.4;">If this doesn't fix it, check if there is any other process listening on port 8080. The default profile of gaia starts httpd.js, which listens on port 8080. When running a debug profile, b2g connects to localhost:8080. If some other process is running on port 8080, b2g will fail to display the home screen of gaia
+    <ul style="margin: 0px 0px 0px 10px; padding: 0px; line-height: 1.4;">
+      <li style="margin: 0px; padding: 0px 0px 0px 5px; line-height: 1.4;">To find out if this is the case, you can enable logging on httpd.js. The httpd.js in the profile resides in this location - $GAIA/profile/extensions/httpd/content/httpd.js. Edit the variable var DEBUG=false; to change the DEBUG to true. Save the file and restart b2g. On the console now, you will be able to view the httpd's logs</li>
+    </ul>
+  </li>
+</ul>
+<h3 id="Diagnosing_OOM_problems">Diagnosing OOM problems</h3>
+<p> </p>
+<p style="margin: 0px 0px 1em; padding: 0px; line-height: 20px; color: rgb(68, 68, 68); font-family: Arial, sans-serif;"><a class="external text" href="https://bugzilla.mozilla.org/show_bug.cgi?id=798747#c7" rel="nofollow" style="margin: 0px; padding: 0px; line-height: 1.4; color: rgb(0, 51, 153);">From Cjones</a>:</p>
+<p style="margin: 0px 0px 1em; padding: 0px; line-height: 20px; color: rgb(68, 68, 68); font-family: Arial, sans-serif;">Another way to diagnose possible OOMs is to open a terminal and run</p>
+<p style="margin: 0px 0px 1em; padding: 0px; line-height: 20px; color: rgb(68, 68, 68); font-family: Arial, sans-serif;">$ watch -n 1 'adb shell b2g-procrank'</p>
+<p style="margin: 0px 0px 1em; padding: 0px; line-height: 20px; color: rgb(68, 68, 68); font-family: Arial, sans-serif;">If you see the "USS" of one of the app processes go up near 100MB and then that process disappear from the process list (accompanied by some sort of visual crash in gaia), then you've almost certainly seen an OOM kill.</p>
+<p> </p>
+<p> </p>
+<p> </p>
+<p> </p>
+<p> </p>
+<p> </p>
diff --git a/files/de/archive/b2g_os/gaia/index.html b/files/de/archive/b2g_os/gaia/index.html
new file mode 100644
index 0000000000..1405dd58c9
--- /dev/null
+++ b/files/de/archive/b2g_os/gaia/index.html
@@ -0,0 +1,56 @@
+---
+title: Gaia
+slug: Archive/B2G_OS/Gaia
+tags:
+  - B2G
+  - Gaia
+  - Mobile
+translation_of: Archive/B2G_OS/Platform/Gaia
+---
+<p>Gaia ist die Benutzeroberfläche von <a href="https://developer.mozilla.org/de/Firefox_OS">Firefox OS</a>. Alles was auf dem Bildschirm nach dem Start von Firefox OS erscheint, wird von Gaia gemalt. Einschließlich des Sperrbildschirmes, Homescreen, Dialer und anderen Programmen. Gaia ist komplett in <a href="/en-US/docs/en-US/HTML" title="HTML">HTML</a>, <a href="/en-US/docs/CSS" title="CSS">CSS</a>, und <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a> geschrieben. Seine einzige Schnittstelle zu dem zugrunde liegenden Betriebssystem und Hardware wird über Standart Web APIs ermöglicht, welche von <a href="https://developer.mozilla.org/de/docs/Gecko">Gecko</a> implementiert werden.</p>
+<p>Wegen diesem Aufbaus kann Gaia nicht nur auf Firefox OS Geräten, sondern auch auf anderen Betriebssystemen und Webbrowsern (wenn auch, je nach Fähigkeiten des Browsers, möglicherweise Eingeschränkt) betrieben werden.</p>
+<p>Anwendungen von Drittanbietern, welchen neben Gaia installiert wurden, können von Gaia gestartet werden.</p>
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 class="Documentation" id="Documentation" name="Documentation">Dokumentationen über Gaia</h2>
+    <dl>
+     <dt>
+      <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Introduction_to_Gaia">Einführungen zu Gaia</a></dt>
+     <dd>
+      Gaia ist die Benutzeroberfläche für Firefox OS Geräte; Es ist eine Internetapplikation welche auf der Firefox OS Applikationsumgebung läuft. Dieses Handbuch bietete eine Einführung zu Gaia auf einem hohen Niveau.</dd>
+     <dt>
+      <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Gaia_hacking_guide" title="Mozilla/Boot_to_Gecko/Gaia hacking guide">Gaia hacking guide</a></dt>
+     <dd>
+      Ein Leitfaden für Hacking und Modifizierung der Gaia-Schnittstelle.</dd>
+    </dl>
+    <p><span class="alllinks"><a href="/en-US/docs/tag/Gaia" title="tag/B2G">View All...</a></span></p>
+   </td>
+   <td>
+    <h2 class="Community" id="Community" name="Community">Hilfe von der Community</h2>
+    <p>Wenn du mit Gaia, oder an Gaia Anwendungen arbeitest, könnten dir diese Community-Ressourcen helfen<span style="line-height: 1.5;">!</span></p>
+    <ul>
+     <li>Besuche das Boot to Gecko Projekt Forum: {{ DiscussionList("dev-gaia", "mozilla.dev.gaia") }}</li>
+    </ul>
+    <ul>
+     <li>Stelle deine Fragen im Mozilla's Gaia IRC channel: <a href="irc://irc.mozilla.org/gaia" title="irc://irc.mozilla.org/gaia">#gaia</a></li>
+    </ul>
+    <p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">Don't forget about the <em>netiquette</em>...</a></span></p>
+    <br>
+    <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Verwandte Themen</h2>
+    <ul>
+     <li><a href="/en-US/docs/Mobile" title="Mobile">Mobile</a></li>
+     <li><a href="/de/docs/Web/HTML" title="HTML">HTML</a></li>
+     <li><a href="/de/docs/Web/Css" title="CSS">CSS</a></li>
+     <li><a href="/de/docs/Web/JavaScript" title="JavaScript">JavaScript</a></li>
+    </ul>
+    <h2 class="Tools" id="Resources" name="Resources">Ressourcen</h2>
+    <ul>
+     <li><a href="https://developer.mozilla.org/de/Firefox_OS/Platform/Architektur">Übersicht der </a><a href="/en-US/docs/Mozilla/Firefox_OS/Architecture" title="Mozilla/Firefox_OS/Architecture">Firefox OS Architektur</a></li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<p> </p>
diff --git a/files/de/archive/b2g_os/gaia/introduction_to_gaia/index.html b/files/de/archive/b2g_os/gaia/introduction_to_gaia/index.html
new file mode 100644
index 0000000000..2b121e8274
--- /dev/null
+++ b/files/de/archive/b2g_os/gaia/introduction_to_gaia/index.html
@@ -0,0 +1,35 @@
+---
+title: Introduction to Gaia
+slug: Archive/B2G_OS/Gaia/Introduction_to_Gaia
+translation_of: Archive/B2G_OS/Platform/Gaia/Introduction_to_Gaia
+---
+<div class="summary">
+<p>Gaia is the user interface for Boot to Gecko (B2G); it's a set of Web applications that runs locally on a B2G device, emulator, desktop build, or Firefox build. All you need to know in order to add apps or make changes to Gaia are Web technologies like <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a>, <a href="/en/HTML" title="en/HTML">HTML</a>, and <a href="/en/CSS" title="en/CSS">CSS</a>.</p>
+</div>
+
+<h2 id="The_Gaia_lock_screen">The Gaia lock screen</h2>
+
+<p>The lock screen shows the network carrier, current time and date, and a slidebar allowing the user to unlock the phone or go straight to the camera to take a picture. If the user has got a passcode lock set, the lock screen will also show a passcode entry interface.</p>
+
+<p><img src="https://mdn.mozillademos.org/files/7611/gaia-lockscreen.png" style="display: block; height: 480px; margin: 0px auto; width: 320px;" alt=""></p>
+
+<p>Note that on some devices the passcode is enabled by default; in these cases the default PIN to unlock the device is "0000". This most likely will change over time as this feature is fleshed out.</p>
+
+<h2 id="The_default_Gaia_interface">The default Gaia interface</h2>
+
+<p>The default interface in Gaia, as seen here, is similar to what you see on most typical smartphones.</p>
+
+<p><img src="https://mdn.mozillademos.org/files/7613/device-2013-01-24-163623.png" style="display: block; height: 480px; margin: 0px auto; width: 320px;" alt=""></p>
+
+<p>This image is obviously of a prerelease version of the operating system, with placeholder icons (and some test applications). The status bar at the top indicates the network on which the phone is operating (or "No SIM card" for a device without any network), the network strength, WiFi signal strength, battery level, and current time.</p>
+
+<p>The middle area of the display shows icons for the applications; swiping left and right pages through screens of icons. You can find more about the default suite of apps that comes with Gaia on our <a href="/en-US/Firefox_OS/Platform/Gaia/Gaia_apps">Gaia apps</a> page.</p>
+
+<p>At the bottom of the screen is a dock with room for up to seven of your most commonly used applications. You can drag and drop apps to the dock from the middle area.</p>
+
+<h2 id="See_also" style="">See also</h2>
+
+<ul>
+ <li><a href="/en-US/Firefox_OS/Platform/Gaia/Gaia_apps">Gaia apps</a>: This page includes further information about each app, such as how to use them, and how to modify them.</li>
+ <li><a href="/en-US/Firefox_OS/Debugging/Developer_settings">Developer settings</a>: An explanation of the different developer settings that you can enable via the Gaia Settings app.</li>
+</ul>
diff --git a/files/de/archive/b2g_os/gaia_entwickeln/build_system_primer/index.html b/files/de/archive/b2g_os/gaia_entwickeln/build_system_primer/index.html
new file mode 100644
index 0000000000..8f6f0c7379
--- /dev/null
+++ b/files/de/archive/b2g_os/gaia_entwickeln/build_system_primer/index.html
@@ -0,0 +1,190 @@
+---
+title: 'Gaia Build System: Grundlagen'
+slug: Archive/B2G_OS/Gaia_Entwickeln/Build_System_Primer
+tags:
+  - Building
+  - Firefox OS
+  - Gaia Grundlagen
+  - Gaia build
+translation_of: Archive/B2G_OS/Developing_Gaia/Build_System_Primer
+---
+<div class="summary">
+<p><span class="seoSummary">Dieser Artikel beschreibt die grundlegende Funktionsweise des Gaia Build Systems inklusive make-Datei, Build-Prozess, Umgebungsvariablen und Anpassungsmöglichkeiten</span>.</p>
+</div>
+
+<p>Die wichtigen Schritte eines Builds werden größtenteils von den im Gaia-Unterverzeichnis <code>build/</code> liegenden Skripten erledigt. Augerufen werden diese mit make, node.js und <a href="https://developer.mozilla.org/en-US/docs/XPConnect/xpcshell" title="https://developer.mozilla.org/en-US/docs/XPConnect/xpcshell">XPCShell</a> (auch bekannt als JS Shell), einer Laufzeitumgebung von <a href="/de/docs/Mozilla/Projects/XULRunner">XULRunner</a>. Das Gaia Build System enthält viele Werkzeuge zum Installieren, Testen und Lokalisieren von Apps und um diese als Paket auf ein Gerät zu bringen. Zudem können Entwickler das Gaia-Paket anpassen, z.B. können Hintergrundbilder, Klingeltöne, Apps und Einstellungen geändert werden.</p>
+
+<div class="note">
+<p><strong>Hinweis</strong>: XPCShell ist ähnlich wie node.js, bietet aber zusätzlich die Möglichkeit zum Ausführen von Mozilla-spezifischen javascripts. Zudem können Gaia-Skripte mit Hilfe von XPCShell in einer Firefox Erweiterung laufen.</p>
+</div>
+
+<h2 id="Die_make-Datei">Die make-Datei</h2>
+
+<p>Die make-Datei enthält eine Menge nützlicher Funktionen. Dieses Kapitel bechreibt die nützlichsten davon.</p>
+
+<h3 id="install-gaia">install-gaia</h3>
+
+<p>Gestartet mit dieser Option installiert make alle Apps auf Deinem Gerät. Wenn Du nur eine bestimmte App installieren möchtest, dann starte make wie folgt mit der <code>APP</code> Option:</p>
+
+<pre class="brush: bash">APP=calendar make install-gaia</pre>
+
+<p>Dieses Verzeichnis muss im Gaia-Verzeichnisbaum existieren (z.B. <code>apps</code>).</p>
+
+<h3 id="reset-gaia">reset-gaia</h3>
+
+<p>Funktioniert genauso wie <code>install-gaia</code> mit dem Unterschied, dass zuerst alle Apps deinstalliert und anschließend wieder mit den Standard-Zugriffsrechten installiert werden. Die Apps befinden sich in <code>/data/local</code> wie bei den Entwickler-Builds. Test- und Debugging-Apps werden hier ebenfalls installiert.</p>
+
+<div class="warning">
+<p><strong>Vorsicht</strong>: Wenn beim Aufruf von make mit der Option <code>reset-gaia</code> die Umgebungsvariable <code>APP</code> gesetzt ist, dann wird dies Dein Gerät in einen unbrauchbaren Zustand versetzen (das kann allerdings behoben werden durch Aufruf von make mit der Option <code>reset-gaia</code> ohne die <code>APP</code> Umgebungsvariable). Also mach das bitte nicht.</p>
+</div>
+
+<h3 id="production">production</h3>
+
+<p>Genauso wie <code>reset-gaia</code>, aber der Quellcode wird optimiert. Das ermöglicht grundsätzlich die Emulation von User Builds (stabilen Builds). Mit dieser Option werden dieselben Apps installiert wie bei User Builds.</p>
+
+<div class="warning">
+<p><strong>Vorsicht</strong>: Wenn beim Aufruf von make mit der Option <code>production</code> die Umgebungsvariable <code>APP</code> gesetzt ist, dann wird dies Dein Gerät in einen unbrauchbaren Zustand versetzen (das kann allerdings behoben werden durch Aufruf von make mit der Option <code>production</code> ohne die <code>APP</code> Umgebungsvariable). Also mach das bitte nicht.</p>
+</div>
+
+<h3 id="reference_workloads">reference workloads</h3>
+
+<p>Diese Option installiert unterschiedlich große Pakete für Laufzeittests auf dem Gerät, um eventuell auftretende Geschwindigkeits- und Skalierungsprobleme debuggen und beheben zu können. Diese Option akzeptiert die APP Umgebungsvariable und auch die APPS Umgebungsvariable mit mehreren durch Leerzeichen voneinander getrennten App-Namen, z.B.:</p>
+
+<pre class="brush: bash">APP=sms make reference-workload-light
+APPS="sms communications/contacts" make reference-workload-heavy
+</pre>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Weitere Informationen findest Du auf <a href="/de/Firefox_OS/Platform/Gaia/Hacking#Reference_Workloads">Hacking Gaia: Reference workloads</a>.</p>
+</div>
+
+<h2 id="Umgebungsvariablen">Umgebungsvariablen</h2>
+
+<p>Mit einigen Umgebungsvariablen kannst Du den Build und die Installation auf dem Gerät steuern, z.B.:</p>
+
+<h4 id="P1">P=1</h4>
+
+<p>Das ermöglicht parallele Build-Erzeugungen auf Multikern CPU Architekturen und verkürzt die Laufzeit von Build-Erzeugungen, der Standardwert ist <strong>0</strong>.</p>
+
+<div class="warning">
+<p><strong>Vorsicht</strong>: Parallele Build-Erzeugung ist noch in der Test-Phase und somit vielleicht nicht stabil.</p>
+</div>
+
+<h4 id="GAIA_OPTIMIZE1">GAIA_OPTIMIZE=1</h4>
+
+<p>Hiermit wird eine Optimierung der JavaScript Dateien angestossen. Diese Umgebungsvariable wird automatisch beim Ausführen von <code>make production</code> gesetzt. Die Variable kann für <code>install-gaia</code> und <code>reset-gaia</code> verwendet werden.</p>
+
+<h4 id="PRODUCTION1">PRODUCTION=1</h4>
+
+<p>Das ist im Grunde ein Alias für <code>make production</code>.</p>
+
+<h4 id="DEBUG1">DEBUG=1</h4>
+
+<p>Mit dieser Umgebungsvariablen wird eine Debugging-Umgebung aufgebaut, die Du für Gaia <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Gaia_unit_tests" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Gaia_unit_tests">unit tests</a> oder für die Entwicklung eigener Apps in Firefox OS nutzen kannst. Du musst ein bereits bestehendes Debugging-Profilverzeichnis löschen, bevor Du ein neues generieren kannst.</p>
+
+<h4 id="DEVICE_DEBUG1">DEVICE_DEBUG=1</h4>
+
+<p>Deaktiviert die Bildschirmsperre auf dem Gerät.</p>
+
+<h4 id="GAIA_DEVICE_TYPEphone">GAIA_DEVICE_TYPE=phone</h4>
+
+<p>Diese Umgebungsvariable ermöglicht eine individuelle Installation mit mehreren 'app.list' Dateien. Alle 'app.list' Dateien müssen in /build/config/$(GAIA_DEVICE_TYPE)/  Verzeichnissen liegen.</p>
+
+<p>Der Standardwert von GAIA_DEVICE_TYPE ist <strong>phone</strong>.</p>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Weitere Details und optionen findest Du auf <a href="/de/Firefox_OS/Platform/Gaia/Hacking#Make_options">Hacking Gaia make options</a>.</p>
+</div>
+
+<h2 id="Build-Prozess">Build-Prozess</h2>
+
+<p>Das Ablaufdiagramm, wie ein Build für Gaia erzeugt wird:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8635/gaia-build-system-seq-diagram.png" style="height: 1497px; width: 2222px;"></p>
+
+<p>pre-app.js, app.js &amp; post-app.js werden von make gestartet und die meisten Build-Schritte werden in den xpcshell Skripten ausgeführt, make ermittelt das Betriebssystem und lädt den b2g-desktop herunter. Wir planen, mehr Build-Schritte von make in die xpcshell Skripte zu migrieren.</p>
+
+<p>Vielleicht fragst Du Dich, warum wir pre-app, app and post-app nutzen. Das liegt daran, dass wir immer mehr Abhängigkeiten von make in die xpcshell Skripte verlagern. Deshalb entwickelten wir pre-app.js und post-app.js basierend auf  <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1021051">bug 1021051</a>, um den Großteil der Abhängigkeiten in die xpcshell Skripte zu verlagern. Am Ende werden dann app.js, pre-app.js und post-app.js auf Basis von  <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1053703">bug 1053703</a> migriert.</p>
+
+<p>Wir haben drei Typen von Verzeichnissen in einem Gaia Build System:</p>
+
+<ol>
+ <li>Source-Verzeichnisse: apps, dev_apps, gemeinsame Verzeichnisse</li>
+ <li>Stage-Verzeichnis: build_stage (stage = Plattform)</li>
+ <li>Profil-Verzeichnisse: profile, profile-debug oder profile-test</li>
+</ol>
+
+<p>Unser Ziel ist es, keine Dateien in die Source-Verzeichnisse hinein zu generieren. Leider haben wir immer noch ein paar Stellen, an denen Dateien in die Source-Verzeichnisse generiert werden. Wir planen, diese Probleme zu beheben. Die folgende Tabelle listet auf, von welchen Modulen Dateien ins Source-, ins Stage- und in die Profil-Verzeichnisse generiert werden.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8653/file-accessing.png" style="height: 1250px; width: 1136px;"></p>
+
+<p>Der Build-Prozess führt bei Aufruf von <code>make</code> im Gaia-Verzeichnis die folgenden Schritte in der angegebenen Reihenfolge aus:</p>
+
+<ol>
+ <li><strong>b2g_sdk</strong>: b2g-desktop startet die xpcshell Skripte in <code>GAIA_DIR/build/</code>.</li>
+ <li><strong>svoperapps</strong>: Download der Apps und Generieren der Konfigurations-Dateien der App-Installation pro SIM-Karten-Anbieter und Land.</li>
+ <li><strong>webapp-manifests</strong>: Generieren der Metadaten der Web-Apps für den Build.</li>
+ <li><strong>keyboard-layouts</strong>: Generieren der Layout-Konfiguration der Standard-Tastatur.</li>
+ <li><strong>settings.json (settings.js)</strong>: Dieses JavaScript generiert die Standard-Einstellungen für Firefox OS, die von Gaia gelesen werden.</li>
+ <li><strong>webapp-shared</strong>: Kopieren der von den Apps benötigten Dateien vom gemeinsamen Source-Verzeichnis ins Stage-Verzeichnis.</li>
+ <li><strong>preferences</strong>: Generiert die Standard-Umgebung für Firefox OS; generiert die Datei <code>user.js</code> und kopiert diese auf das Gerät, wo sie von Gecko gelesen wird. Bitte beachte, dass die Standard-Umgebung abhängig von den Umgebungsvariablen (wie z.B. <code>DEBUG=1</code>) variieren kann.</li>
+ <li><strong>app.js</strong>: make-Dateien in den jeweiligen <code>app</code> Verzeichnissen: Sie werden ausgeführt, wenn sie existieren. Für jede App ohne eigene make-Datei kopiert die Gaia make-Datei das App-Verzeichnis ins Stage-Verzeichnis <code>build_stage</code> und führt <code>[app-directory]/build/build.js</code> aus, falls vorhanden. Siehe {{ anch("Build script for apps") }} für weitere Details.</li>
+ <li><strong>test-agent-bootstrap &amp; test-agent-config</strong>: Einrichten der zwei make Regeln <code>test-agent-config</code> &amp; <code>test-agent-bootstrap-apps</code>, welche für den Aufbau von Test-Umgebungen pro App benötigt werden.</li>
+ <li><strong>webapp-optimize</strong>: Dieses Skript enthält verschiedene Optimierungs-Prozeduren inklusive JavaScript Minimierung, Zusammenfügen von Lokalisierungs-Dateien in die JSON-Dateien und Generieren von HTML-Dateien für die Standard-Sprache, falls nötig.</li>
+ <li><strong>webapp-zip</strong>: Hier wird jede App in eine eigene zip-Datei komprimiert und diese im Verzeichnis <code>profile/</code> abgelegt.</li>
+ <li><strong>optimize-clean</strong>: <code>optimize-clean</code> bereinigt die HTML-Dateien für die Standard-Sprache.</li>
+ <li><strong>contacts</strong>: Kopiert eine vorgefertigte Kontakte-Datei in Dein Profil in <code>GAIA_DISTRIBUTION_DIR</code>, falls vorhanden.</li>
+ <li><strong>extensions</strong>: Kopiert die in <code>GAIA_DIR/tools/extensions</code> liegenden Erweiterungen in Dein Profil-Verzeichnis; verschiedene Konfigurationen ermöglichen das Kopieren verschiedener Erweiterungen.</li>
+ <li><strong>installed-extensions.json (additional-extensions.js)</strong>: Zu guter Letzt: Dieses Skript kopiert per Download verschiedene zusätzliche Erweiterungen in Dein Profil-Verzeichnis.</li>
+</ol>
+
+<h2 id="Build-Skript_für_Apps">Build-Skript für Apps</h2>
+
+<p>Standardmäßig wird als App Build Skript <span style="font-family: courier new,andale mono,monospace; line-height: 1.5;">[app directory]/build/build.js</span><span style="line-height: 1.5;"> von  app.js </span><span style="line-height: 1.5;">ausgeführt, falls vorhanden. Wenn $APP/build/build.js nicht vorhanden ist, dann kopiert app.js die App ins Stage-Verzeichnis build_stage.</span></p>
+
+<p>Die Dateien im App-Verzeichnis sollten vom App Build-Skript ins Stage-Verzeichnis build_stage kopiert werden; denn app.js kopiert sie nicht, wenn ein App Build-Skript existiert. Beispiel: Die App "Kalender" hat ein Skript build/build.js und <a href="https://github.com/mozilla-b2g/gaia/blob/a0fa29db8e9e15afe3b1787bf494caa86a033f10/apps/calendar/build/build.js#L8">utils.copyToStage()</a> sollte in build.js für die "Kalender" App aufgerufen werden.</p>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Sourcen, die nicht zu Deiner App gehören (wie in shared/) kannst Du in der index.html in den &lt;head&gt; Bereich einfügen, damit sie von shared/ in Deine App kopiert werden.</p>
+</div>
+
+<p>Build-Skripte für Apps benötigen möglicherweise alle Build Module im Verzeichnis  $GAIA_DIR/build; speziell das utils Modul, ein sehr nützliches Modul für den Build von Apps, kannst Du require('utils') verwenden um das Modul einzubinden.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8651/flow-diagram.png" style="height: 952px; width: 1004px;"></p>
+
+<h2 id="Anpassen_der_Voreinstellungen">Anpassen der Voreinstellungen</h2>
+
+<p>Wenn Du eine eigene Konfiguration mit Einstellungen und Apps immer wieder beim Flashen Deines Gerätes benötigst, dann kannst Du eine Datei namens <code>custom-prefs.js</code> mit all Deinen Präferenzen im Verzeichnis <code>build/config</code> ablegen. Dort ist sie vor Überschreiben geschützt und unterliegt nicht der Source-Steuerung.</p>
+
+<p>Hier sind einige sinnvolle Voreinstellungen:</p>
+
+<pre class="brush: js">// Aktivieren von marionette für Performance-Tests
+// siehe https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Gaia_performance_tests
+user_pref("marionette.defaultPrefs.enabled", true);
+
+// Setzen des Ports für remote Debugging Deiner Anwendung auf Deinem Gerät
+user_pref("devtools.debugger.remote-port", 60000);
+
+// Aktivieren des remote Debuggers
+user_pref("devtools.debugger.remote-enabled", true);
+
+// Ausgeben der Debug-Meldungen über den Radio Interface Layer in logcat
+user_pref("ril.debugging.enabled", true);
+</pre>
+
+<p>Diese Datei wird immer gelesen, wenn Du ein Profil generierst. Der sicherste Weg sicherzustellen, dass alles generiert wurde ist das vorherige Löschen des vorhandenen Profils:</p>
+
+<pre class="brush: bash">rm -rf profile &amp;&amp; make profile</pre>
+
+<p>Anschließend kannst Du beruhigt die <code>install-gaia </code>Option von make verwenden.</p>
+
+<h2 id="FAQ">FAQ</h2>
+
+<h3 id="Das_Display_bleibt_Schwarz_nach_einem_flash">Das Display bleibt Schwarz nach einem flash</h3>
+
+<p>Das kann manchmal passieren, wenn das Gerät im Ruhemodus geflasht wird. Um das Problem zu beheben starte B2G einfach durch das folgende Kommando neu:</p>
+
+<pre class="brush: bash">adb shell stop b2g &amp;&amp; adb shell start b2g</pre>
+
+<p><br>
+  </p>
diff --git a/files/de/archive/b2g_os/gaia_entwickeln/customizing_build-time_apps/index.html b/files/de/archive/b2g_os/gaia_entwickeln/customizing_build-time_apps/index.html
new file mode 100644
index 0000000000..928799c864
--- /dev/null
+++ b/files/de/archive/b2g_os/gaia_entwickeln/customizing_build-time_apps/index.html
@@ -0,0 +1,117 @@
+---
+title: 'Gaia-Apps: Build anpassen'
+slug: Archive/B2G_OS/Gaia_Entwickeln/Customizing_build-time_apps
+tags:
+  - Anpassung
+  - Apps
+  - Firefox OS
+  - Gaia
+  - build
+translation_of: Archive/B2G_OS/Developing_Gaia/Customizing_build-time_apps
+---
+<div class="summary">
+<p><span class="seoSummary">Entwickler und Geräte-Hersteller wollen die App-Pakete oftmals beim Erzeuen eines Builds aus verschiedenen Gründen anpassen. Dieser Artikel erklärt die unterschiedlichen Mechanismen dafür.</span></p>
+</div>
+
+<h2 id="Pfade_für_App-Dateien_in_Gaia">Pfade für App-Dateien in Gaia</h2>
+
+<p>Alle Firefox OS Apps befinden sich in einem der folgenden Pfade im Gaia Verzeichnisbaum:</p>
+
+<ul>
+ <li><a href="https://github.com/mozilla-b2g/gaia/tree/master/apps">gaia/apps/</a>: Hier liegen die Standard-Apps von Firefox OS wie Kalender, E-Mail, Einstellungen etc.</li>
+ <li><a href="https://github.com/mozilla-b2g/gaia/tree/master/dev_apps">gaia/dev-apps</a>: Hier sind die anderen Apps zu finden, z.B. die  kundenspezifischen Apps.</li>
+</ul>
+
+<p>Falls Du in Deinem Gaia/B2G Build Apps herauslassen oder hinzufügen möchtest, dann kannst Du das auf verschiedene Weise tun. Details dazu werden nachfolgend erläutert.</p>
+
+<h2 id="Die_harte_Methode">Die harte Methode</h2>
+
+<p>Bei der harten Methode werden einfach die Apps gelöscht, die man nicht in den Build mit einbeziehen will.</p>
+
+<h2 id="Anpassen_der_Konfigurations-Dateien">Anpassen der Konfigurations-Dateien</h2>
+
+<p>Die etwas elegantere Methode ist das Anpassen der <code>apps-*.list</code> Dateien (zu finden in den verschiedenen gerätespezifischen Verzeichnissen, die in <a href="https://github.com/mozilla-b2g/gaia/tree/master/build/config">gaia/build/config/</a> aufgelistet sind, z.B. <code>phone/</code> und <code>tablet/</code>), um die für den Build gewünschten Apps zu konfigurieren. Zum Beispiel könnte die Konfigurations-Datei <a href="https://github.com/mozilla-b2g/gaia/blob/master/build/config/phone/apps-production.list">gaia/build/config/phone/apps-production.list</a> wie folgt aussehen:</p>
+
+<pre class="brush: bash">apps/bluetooth
+apps/bookmark
+apps/browser
+apps/calendar
+apps/callscreen
+etc.</pre>
+
+<p>Du kannst hier auch alle Apps eines Verzeichnisses einbinden, und zwar so:</p>
+
+<pre class="brush: bash">apps/*</pre>
+
+<p>Welche <code>apps-*.list</code> Dateien wiederum für den Build verwendet werden um die verfügbaren Apps zu ermitteln ist in der Datei <a href="https://github.com/mozilla-b2g/gaia/blob/master/Makefile">gaia/Makefile</a> hinterlegt, die etwa so aussieht:</p>
+
+<pre class="brush: cpp"><span class="nv">GAIA_DEVICE_TYPE</span><span class="o">?=</span>phone
+  ...
+GAIA_APP_TARGET?=engineering
+  ...
+ifeq ($(MAKECMDGOALS), demo)
+GAIA_DOMAIN=thisdomaindoesnotexist.org
+GAIA_APP_TARGET=demo
+else ifeq ($(MAKECMDGOALS), dogfood)
+DOGFOOD=1
+else ifeq ($(MAKECMDGOALS), production)
+PRODUCTION=1
+endif
+  ...
+ifeq ($(PRODUCTION), 1)
+GAIA_OPTIMIZE=1
+GAIA_APP_TARGET=production
+endif
+
+ifeq ($(DOGFOOD), 1)
+GAIA_APP_TARGET=dogfood
+endif
+  ...
+ifndef GAIA_APP_CONFIG
+GAIA_APP_CONFIG=build$(SEP)config$(SEP)apps-$(GAIA_APP_TARGET).list
+endif</pre>
+
+<p>Standardmaßig ist die Variable <code>GAIA_APP_TARGET</code> auf <code>engineering</code> gesetzt und die Variable <code><span class="nv">GAIA_DEVICE_TYPE</span></code> auf <code>phone</code>, so dass beim Build von Gaia per Default die Datei <a href="https://github.com/mozilla-b2g/gaia/blob/master/build/config/phone/apps-engineering.list">gaia/config/phone/app-engineering.list</a> verwendet wird (die alle Apps enthält, u.a. auch Test- und Demo-Apps).</p>
+
+<p>Um andere <code>apps-*.list</code> Dateien zu verwenden musst Du entsprechende Parameter beim Aufruf des <code>make</code> Kommandos mitgeben. Um z.B. den Build mit <a href="https://github.com/mozilla-b2g/gaia/blob/master/build/config/phone/apps-production.list">gaia/build/config/phone/apps-production.list</a> zu starten müsstest Du das hier verwenden:</p>
+
+<pre class="brush: bash">PRODUCTION=1 make</pre>
+
+<p>Wenn Du den Build mit <code>DEMO=1</code> startest, dann wird die Datei <a href="https://github.com/mozilla-b2g/gaia/blob/master/build/config/phone/apps-demo.list">apps-demo.list</a> verwendet. Und wenn Du den Build mit <code>DOGFOOD=1</code> startest, dann wird die Datei <a href="https://github.com/mozilla-b2g/gaia/blob/master/build/config/phone/apps-dogfood.list">apps-dogfood.list</a> verwendet.</p>
+
+<p>Du kannst dieses Verhalten komplett übersteuern, indem Du die Variable <code>GAIA_APP_CONFIG</code> in der Datei <a href="https://github.com/mozilla-b2g/gaia/blob/master/Makefile">gaia/Makefile</a> änderst und dort eine eigene <code>apps-*.list</code> Datei einträgst.</p>
+
+<p><a href="https://github.com/mozilla-b2g/gaia/blob/master/Android.mk#L24-L28">gaia/Android.mk</a> enthält diese Zeilen:</p>
+
+<pre class="brush: cpp">ifneq ($(filter user userdebug, $(TARGET_BUILD_VARIANT)),)
+GAIA_MAKE_FLAGS += PRODUCTION=1
+B2G_SYSTEM_APPS := 1
+endif</pre>
+
+<p>Wenn Du den Build mit <code>VARIANT=user</code> oder <code>VARIANT=userdebug</code> startest (dieses Übersteuern spiegelt sich auch in der Variable <code>TARGET_BUILD_VARIANT</code> wieder), dann wird <code>PRODUCTION=1</code> automatisch gesetzt.</p>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Weitere Optionen für make findest Du in der <a href="/en-US/Firefox_OS/Developing_Gaia/make_options_reference">make options reference</a>.</p>
+</div>
+
+<h2 id="Verwenden_eigener_Distributionen">Verwenden eigener Distributionen</h2>
+
+<p>Die dritte und eleganteste (allerdings auch komplexeste) Methode ist das Verwenden eigener Distributionen. Dies ermöglicht das Einbinden eigener Konfigurationen und Pakete ohne das Gaia Paket selbst zu ändern. Du kannst für Deine angepassten Konfigurationen und Pakete eigene Verzeichnisse oder die mit Gaia ausgelieferten Verzeichnisse verwenden.</p>
+
+<p>Du kannst Deine Distribution durch Setzen der Umgebungsvariable <code>GAIA_DISTRIBUTION_DIR</code> in den Build einbinden, zum Beispiel so:</p>
+
+<pre class="brush: bash"><code class="language-html">GAIA_DISTRIBUTION_DIR=<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>DISTRIBUTION_PATH</span><span class="punctuation token">&gt;</span></span> make production</code></pre>
+
+<p>Mehr Informationen zum Erstellen individueller Distributionen findest Du auf <a href="https://github.com/mozilla-b2g/gaia/tree/master/customization">https://github.com/mozilla-b2g/gaia/tree/master/customization</a>.</p>
+
+<p>Dieses komplexe Thema hat eine komplett eigene Dokumentation. Mehr zum Thema erfährst Du unter <a href="/en-US/Firefox_OS/Developing_Firefox_OS/Market_customizations_guide">Market Customizations guide</a>.</p>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Wenn Du Apps von Drittanbietern in Deinen Gaia Build einbinden willst, dann müssen diese auf spezielle Art erzeugt werden bevor sie im Verzeichnis <code>gaia/dev-apps/</code> abgelegt werden. Nähere Informationen findest Du auf <a href="https://developer.mozilla.org/en-US/Firefox_OS/Developing_Firefox_OS/Market_customizations_guide#Building_Prebundled_web_apps">Building Prebundled web apps</a>.</p>
+</div>
+
+<div class="warning">
+<p><strong>Wichtig</strong>: Wenn Sie als Geräte-Hersteller einen angepassten B2G/Gaia Build für Ihre Distribution verwenden möchten, dann müssen Sie bestimmte Voraussetzungen erfüllen bevor Sie Firefox OS Marketplace Apps auf Ihrem Smartphone, Tablet etc. anbieten dürfen. Bitte kontaktieren Sie in einem solchen Fall Mozilla für nähere Informationen.</p>
+</div>
+
+<p> </p>
diff --git a/files/de/archive/b2g_os/gaia_entwickeln/durchfuehrung_der_gaia_codebase/index.html b/files/de/archive/b2g_os/gaia_entwickeln/durchfuehrung_der_gaia_codebase/index.html
new file mode 100644
index 0000000000..eef4cb0c8e
--- /dev/null
+++ b/files/de/archive/b2g_os/gaia_entwickeln/durchfuehrung_der_gaia_codebase/index.html
@@ -0,0 +1,71 @@
+---
+title: Durchführung der Gaia codebase
+slug: Archive/B2G_OS/Gaia_Entwickeln/Durchfuehrung_der_Gaia_codebase
+tags:
+  - B2G
+  - Firefox
+  - Firefox OS
+  - Firefox OS lokal ausführen
+  - Gaia
+  - beitragen
+  - 'l10n:priority'
+translation_of: Archive/B2G_OS/Developing_Gaia/Running_the_Gaia_codebase
+---
+<div class="summary">
+<p><span class="seoSummary">Dieser Artikel beschreibt im Detail die lokale Durchführung der Gaia Codebase und welche Werkzeuge in diesem Setup verfügbar sind.</span></p>
+</div>
+
+<p>Zuerst sei erwähnt, dass Du NICHT Gecko oder B2G erstellen musst, um zu Gaia beizutragen. Du musst lediglich den Gaia Quellcode herunterladen und die Möglichkeit haben, diesen auszuführen und zu editieren.<br>
+ <br>
+ Es gibt verschiedene Möglichkeiten, Gaia auszuführen:</p>
+
+<ul>
+ <li>Flashe Dein Smartphone mit der aktuellen Gaia Version.</li>
+ <li>Starte Gaia innerhalb einer B2G Desktop Version.</li>
+ <li>Führe Gaia innerhalb von WebIDE aus.</li>
+ <li>Starte Gaia innerhalb Deines Firefox Mulet Tools aus, um Gaia auf dem Desktop auszuführen.</li>
+</ul>
+
+<p>Du findest auf der <a href="/en-US/Firefox_OS/Developing_Gaia/Different_ways_to_run_Gaia">Different ways to run Gaia</a> Seite kurzgefasste Informationen über jede der genannten Möglichkeiten, zusammen mit Links zu detailierten Beschreibungen - je nach Bedarf. Generell sind diese nach Komplexität geordnet, absteigend von der komplexesten zur einfachsten (aber unwahrscheinlichsten) Methode.</p>
+
+<p>In diesem Artikel konzentrieren wir uns auf das Ausführen von Gaia innerhalb von Firefox Mulet oder in WebIDE. Für die meisten Änderungen, die Du in der Gaia Codebase machen möchtest, bietet dies den schnellsten Mechanismus, Updates zu testen aber offensichtlich gibt es einige Funktionen (z. B. das Testen von Geräte-APIs oder Interaktion mit der Smartphone Hardware ), für die ein physisches Gerät benötigt wird.</p>
+
+<div class="note">
+<p><strong>Info</strong>: Um weitere Hilfe zu Gaia zu bekommen, der beste Platz ist der #gaia IRC Channel (siehe auch <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> für weitere Informationen hierzu) und die <a href="https://lists.mozilla.org/listinfo/dev-gaia">dev-gaia mailing list</a>.</p>
+</div>
+
+<h2 id="Ausführen_der_eigenen_Gaia_Version">Ausführen der eigenen Gaia Version</h2>
+
+<ol>
+ <li>Erstelle zuerst eine Verzweigung von der <a href="https://github.com/mozilla-b2g/gaia">Gaia repo on Github</a>.</li>
+ <li>Als nächstes, klone Deine Verzweigung lokal:
+  <pre class="brush: bash">git clone https://github.com/your-username/gaia.git</pre>
+ </li>
+ <li>Füge den Upstream wie folgt hinzu:
+  <pre class="brush: bash">cd gaia
+git remote add upstream https://github.com/mozilla-b2g/gaia</pre>
+ </li>
+ <li>Nun musst Du ein Gaia Profil anlegen. Führe <code>make</code> innerhalb Deines repo Ordners aus, um ein Profil in der <code>profile</code> Directory anzulegen, die für optimales Debugging konfiguriert ist. Dies erzeugt ungepackte (hosted) Versionen der Gaia Apps, welche dazu fungieren, gebündelt und direkt über den lokalen HTTPD Server -zusammen als Erweiterung für Firefox Desktop- übertragen zu werden. Wenn Du Änderungen gemacht hast, musst Du nur Dein Browser Fenster aktualisieren, um das Ergebnis zu sehen (wie Du es später sehen wirst), statt Dein Profil erneuern zu müssen, erneut auf das Gerät übertragen u.s.w..<br>
+  Dies ist sehr gut für schnelles CSS/JS/HTML Hacking.</li>
+ <li>Mit Deinem angelegten Debug Profil, führe es in <a href="/en-US/Firefox_OS/Developing_Gaia/Different_ways_to_run_Gaia#Using_Gaia_in_Firefox_Mulet">Mulet</a> or <a href="/en-US/Firefox_OS/Developing_Gaia/Different_ways_to_run_Gaia#Using_Gaia_inside_WebIDE_with_a_Firefox_OS_Simulator">WebIDE</a> aus, mithilfe der Anleitungen hinter den Links.</li>
+</ol>
+
+<h2 id="Troubleshooting_und_bekannte_Probleme">Troubleshooting und bekannte Probleme</h2>
+
+<h3 id="Error_Python_executable_python3_is_v3.x_which_is_not_supported_by_gyp.">Error: Python executable "python3" is v3.x, which is not supported by gyp.</h3>
+
+<p>In manchen Linux Versionen (eg: Archlinux), ist <code>python3</code> der Standard <code>python</code>. Dadurch scheitert <code>npm</code> beim Ausführen mancher Befehle (z B. beim Testen). Um dies permanent zu beheben, führe folgenden Befehl aus:</p>
+
+<pre>npm config set python python2</pre>
+
+<p>Weiter Lösungen findest Du auch auf dieser Seite: <a href="http://stackoverflow.com/questions/20454199/how-to-use-a-different-version-of-python-duing-npm-install">Stack Overflow page</a>.</p>
+
+<p>Danach solltest Du Deine <code>node_modules</code> Directory löschen und den gescheiterten Befehl erneut ausführen.</p>
+
+<h3 id="Please_Install_NodeJS_--_(use_aptitude_on_linux_or_homebrew_on_osx)">Please Install NodeJS -- (use aptitude on linux or homebrew on osx)</h3>
+
+<p>Nun bekommst Du diesen Fehler obwohl Du NodeJS installiert hast. Möglicherweise benutzt Du Debian oder andere Debian-basierende Versionen wie zum Beispiel Ubuntu. Bei diesen Versionen ist NodeJS im <code>nodejs</code> Paket und Du kannst das <code>nodejs-legacy</code> Paket folgendermaßen installieren, um alles korrekt aufzusetzen:</p>
+
+<pre>sudo aptitude install nodejs-legacy</pre>
+
+<p>Solltest Du bei der Installation des Paketes Probleme haben, benutzt Du eventuell <a href="http://www.ubuntuupdates.org/ppa/chris_lea_nodejs">Chris Lea's PPA for Node</a>; bitte entferne diese bevor Du weitermachst.</p>
diff --git a/files/de/archive/b2g_os/gaia_entwickeln/index.html b/files/de/archive/b2g_os/gaia_entwickeln/index.html
new file mode 100644
index 0000000000..d6f1d582d6
--- /dev/null
+++ b/files/de/archive/b2g_os/gaia_entwickeln/index.html
@@ -0,0 +1,52 @@
+---
+title: Gaia entwickeln
+slug: Archive/B2G_OS/Gaia_Entwickeln
+tags:
+  - B2G
+  - Bugs
+  - Firefox OS
+  - Gaia
+  - Mozilla
+  - beitragen
+translation_of: Archive/B2G_OS/Developing_Gaia
+---
+<div class="summary">
+<p><span class="seoSummary">Gaia ist das User Interface von Firefox OS, sowie eine Suite für die Standard-Apps. Gaia beinhaltet den Sperr- und Startbildschirm, die Telefonie-App und weitere Apps. Im Grunde ist Gaia eine Menge an Web-Apps, welche auf Firefox OS laufen. Diese Artikel behandelt alles, was zur Mitentwicklung an Gaia wissenswert ist.</span></p>
+</div>
+
+<p>In diesem Guide zeigen wir dir einen produktiven Workflow, um an Gaia mitzuarbeiten - und damit meinen wir, neue Features zu Gaia hinzuzufügen und an Bugs im Gaia Projekt zu arbeiten. Die ersten paar Artikel können in gegebener Reihenfolge durchgearbeitet werden oder du überspringst sie und gehst direkt zum relevanten Abschnitt, wenn du dein Wissen über ein bestimmtes Thema auffrischen möchtest.</p>
+
+<p>Danach stellen wir Referenzmaterialien und Informationen zu weiteren Themen zur Verfügung.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7951/gaia-2.0-screen.png" style="float: right; height: 533px; padding: 0px 0px 30px 30px; width: 320px;"></p>
+
+<h2 id="Die_Grundlagen">Die Grundlagen</h2>
+
+<ol>
+ <li><a href="/de/Firefox_OS/Developing_Gaia/Running_the_Gaia_codebase">Die Gaia Codebase zum Laufen bringen</a></li>
+ <li><a href="/de/Firefox_OS/Developing_Gaia/Understanding_the_Gaia_codebase">Die Gaia Codebase verstehen</a></li>
+ <li><a href="/de/Firefox_OS/Developing_Gaia/Making_Gaia_code_changes">Änderungen am Gaia Code machen</a></li>
+ <li><a href="/de/Firefox_OS/Developing_Gaia/Test_Gaia_code_changes">Änderungen am Gaia Code testen</a></li>
+ <li><a href="/de/Firefox_OS/Developing_Gaia/Submitting_a_Gaia_patch">Einen Gaia Patch einreichen</a></li>
+</ol>
+
+<h2 id="Gaia_Build_Referenzen">Gaia Build Referenzen</h2>
+
+<ul>
+ <li><a href="/de/Firefox_OS/Developing_Gaia/Build_System_Primer">Leitfaden des Gaia Build-Systems</a></li>
+ <li><a href="/de/Firefox_OS/Developing_Gaia/Customizing_build-time_apps">Apps für den Erststart anpassen</a></li>
+ <li><a href="/de/Firefox_OS/Developing_Gaia/make_options_reference">Optionen für make</a></li>
+ <li><a href="/de/Firefox_OS/Developing_Gaia/Gaia_tools_reference">Referenz zu den Gaia Tools</a></li>
+</ul>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/Firefox_OS/Developing_Firefox_OS/Filing_bugs_against_Firefox_OS">Bug-Meldungen für Firefox OS einreichen</a></li>
+ <li><a href="/de/Firefox_OS/Platform/Gaia/Gaia_apps">Apps Guide zu Gaia</a></li>
+ <li><a href="/de/Firefox_OS/Developing_Gaia/Different_ways_to_run_Gaia">Verschiedene Wege, um Gaia zum Laufen zu bringen</a></li>
+ <li><a href="/de/Firefox_OS/Developing_Gaia/Market_customizations_guide">Guide zur Market-Anpassung</a></li>
+ <li><a href="/de/Firefox_OS/Developing_Gaia/Customizing_the_keyboard">Anpassung der Tastatur in Firefox OS Apps</a></li>
+ <li><a href="/de/Firefox_OS/Developing_Gaia/Localizing_Firefox_OS">Firefox OS übersetzen (Übersetzer)</a></li>
+ <li><a href="/de/Firefox_OS/Developing_Gaia/L10n_Best_Practices">Praktiken für den Einbau von übersetzbaren Code (Entwickler)</a></li>
+</ul>
diff --git a/files/de/archive/b2g_os/gaia_entwickeln/making_gaia_code_changes/index.html b/files/de/archive/b2g_os/gaia_entwickeln/making_gaia_code_changes/index.html
new file mode 100644
index 0000000000..18a2a01cf5
--- /dev/null
+++ b/files/de/archive/b2g_os/gaia_entwickeln/making_gaia_code_changes/index.html
@@ -0,0 +1,85 @@
+---
+title: Gaia Coding ändern
+slug: Archive/B2G_OS/Gaia_Entwickeln/Making_Gaia_code_changes
+tags:
+  - Anleitung
+  - Code
+  - Firefox OS
+  - Gaia
+  - Änderungen
+translation_of: Archive/B2G_OS/Developing_Gaia/Making_Gaia_code_changes
+---
+<div class="summary">
+<p><span class="seoSummary">Jetzt, wo Gaia auf Deinem Desktop läuft und Du zu einem gewissen Grad die Arbeitweise der Codebase verstehst, solltest Du in der Lage sein Änderungen am Gaia Code durchzuführen. Dieser Artikel beschreibt, wie Änderungen durchgeführt werden und wie man Fehler findet um sie zu beheben.</span></p>
+</div>
+
+<h2 id="Git_Best_Practices">Git Best Practices</h2>
+
+<ol>
+ <li>Vor dem Ändern von Gaia solltest Du zuerst den master Zweig (branch) aktualisieren:
+  <pre class="brush: bash">cd path/to/gaia
+git checkout master
+git pull upstream master</pre>
+ </li>
+ <li>Als nächstes  brauchst Du einen eigenen Zweig für Deine Änderungen:
+  <pre class="brush: bash">git checkout -b my-code-fix</pre>
+ </li>
+ <li>Anschließend gehst Du ins Verzeichnis <code>gaia/apps</code> und führst Deine Änderungen an den App-Dateien durch.</li>
+</ol>
+
+<h2 id="Beispiel_einer_einfachen_Code-Änderung">Beispiel einer einfachen Code-Änderung</h2>
+
+<p>Um Code-Änderungen anzuzeigen:</p>
+
+<ol>
+ <li>Führe die gewünschten  Änderungen an der Gaia Codebase durch und speichere die Änderungen.</li>
+ <li>Beende Firefox Mulet oder den WebIDE Simulator.</li>
+ <li>Erneuere Dein Gaia Profil mit <code>make</code>.</li>
+ <li>Starte Firefox Mulet oder den WebIDE Simulator erneut.</li>
+</ol>
+
+<p>Lass uns etwas Einfaches ändern wie die Textfarbe der Uhr auf dem Sperrbildschirm:</p>
+
+<p><img alt="Gaia lockscreen showing the clock display in white text" src="https://mdn.mozillademos.org/files/7929/gaia-lockscreen-clock.png" style="display: block; height: 623px; margin: 0px auto; width: 369px;"></p>
+
+<ol>
+ <li>Der beste Weg um herauszufinden wo dieser Stil geändert wird ist über die Entwickler-Werkzeuge. Verwende hier Strg/rechte Maustaste + Klick auf die Uhr im Firefox Desktop und wähle im Kontext-Menü <em>Element untersuchen</em>.</li>
+ <li>Nun kannst Du die zu ändernde CSS Datei suchen — in diesem Fall  <code>gaia/apps/system/lockscreen/style/lockscreen.css</code> — und die Änderungen an den CSS Styles auf der rechten Seite des Displays nach Deinen Vorstellungen vornehmen.</li>
+ <li>Wenn Du mit Deinen Änderungen zufrieden bist, dann öffne die Datei und mache dort Deine Änderungen direkt.</li>
+ <li>Als nächstes führst Du die oben aufgeführten Schritte durch, um Dir Deine Änderungen anzusehen.</li>
+</ol>
+
+<p><img alt="Gaia lockscreen showing the clock display modified from white to red text" src="https://mdn.mozillademos.org/files/7931/gaia-lockscreen-clock-modified.png" style="display: block; height: 622px; margin: 0px auto; width: 366px;"><br>
+ <br>
+ <br>
+ Einschränkungen im Gaia Firefox Mulet Rendering:</p>
+
+<ul>
+ <li>Im Desktop Firefox Rendering werden die Apps im Vergleich zur Smartphone-Version so originalgtreu wie möglich simuliert, aber an einigen Stellen wirst Du ein paar Unterschiede feststellen.</li>
+ <li>Nicht alle Geräte-APIs werden im Desktop Firefox unterstützt; eine Liste der unterstützten APIs findest Du auf <a href="https://github.com/mozilla-b2g/gaia/blob/master/build/preferences.js">preferences.js</a>.</li>
+</ul>
+
+<h2 id="Wo_man_zu_bearbeitende_Fehler_findet">Wo man zu bearbeitende Fehler findet</h2>
+
+<p>Am besten nutzt Du <a href="http://www.joshmatthews.net/bugsahoy/?b2g=1">Josh Matthews' Bugs Ahoy app</a> um Fehler zu finden, die Du bearbeiten kannst — diese Seite liest die vorhandenen Bugs direkt aus Mozilla's Bugzilla und stellt sie im Browser inklusive Suchfunktion dar. Wenn Du einen Fehler gefunden hast den Du bearbeiten willst, dann gehe zu dessen Bugzilla-Seite, trage Dich als Bearbeiter im Feld "assigned to" ein und beginne mit der Arbeit wie oben beschrieben.</p>
+
+<h3 id="Nützliche_Tipps">Nützliche Tipps</h3>
+
+<ul>
+ <li>Wenn Du an Bugs arbeitest die einem Mentor zugewiesen sind wird jemand aus dem Gaia Core Team diesen Vorgang beobachten und Dir mit Rat und Tat zur Seite stehen. Falls Du ein neuer Mitwirkender im Firefox OS Verbesserungs-Prozess bist, dann kann das Bearbeiten von solchen Fehlern sehr hilfreich sein. Einem Mentor zugewiesene Bugs haben in den Firefox OS Bugzilla-Seiten einen Eintrag im Feld "Mentors". Bugs Ahoy listet solche Bugs ebenfallls auf.</li>
+ <li>Wenn Du ein komplett neuer Bugzilla-Anwender bist, dann wirst Du Dich vielleicht nicht selbst einem Bug als Bearbeiter zuordnen können. Falls Du damit Probleme haben solltest, wende Dich an den im Bug angegebenen Mentor (falls vorhanden) oder schildere Dein Problem im Kommentar-Feld.</li>
+ <li>Wenn Du ein bischen mehr Erfahrung hast, dann kannst Du jemanden nach den entsprechenden Berechtigungen fragen, um Dir selbst Bugs zuzuweisen.</li>
+ <li>Eine andere gute Möglichkeit zum Finden offener Bugs ist <code>[good first bug]</code>, speziell wenn Du als Neu-Einsteiger mit etwas Einfacherem anfangen möchtest. Diese speziell für Neu-Einsteiger gefilterte Liste findest Du auf <a href="http://www.joshmatthews.net/bugsahoy/?b2g=1&amp;simple=1">http://www.joshmatthews.net/bugsahoy/?b2g=1&amp;simple=1</a>.</li>
+ <li>Du solltest Deine Suche nach für Dich geeigneten Projekten speichern. Beispiel für eine Bug-Suche für die Gaia App "Uhr" :</li>
+</ul>
+
+<p><a href="https://bugzilla.mozilla.org/buglist.cgi?columnlist=product%2Ccf_blocking_b2g%2Cbug_status%2Cresolution%2Cshort_desc&amp;resolution=---&amp;query_based_on=CLOCK&amp;query_format=advanced&amp;bug_status=UNCONFIRMED&amp;bug_status=NEW&amp;bug_status=ASSIGNED&amp;bug_status=REOPENED&amp;component=Gaia%3A%3AClock&amp;product=Boot2Gecko&amp;known_name=CLOCK&amp;list_id=10497922">https://bugzilla.mozilla.org/buglist.cgi?columnlist=product%2Ccf_blocking_b2g%2Cbug_status%2Cresolution%2Cshort_desc&amp;resolution=---&amp;query_based_on=CLOCK&amp;query_format=advanced&amp;bug_status=UNCONFIRMED&amp;bug_status=NEW&amp;bug_status=ASSIGNED&amp;bug_status=REOPENED&amp;component=Gaia%3A%3AClock&amp;product=Boot2Gecko&amp;known_name=CLOCK&amp;list_id=9776392</a></p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="https://mozilla.app.box.com/s/wzgsb3lkqglv0dnfdgzs">Gaia powerpoints for visual/interaction specifications</a></li>
+ <li><a href="https://etherpad.mozilla.org/gaia-meeting-notes">Weekly Gaia meeting Etherpad</a></li>
+ <li><a href="https://datazilla.mozilla.org/">Datazilla</a>: Mozilla's Performance Test Werkzeug<br>
+   </li>
+</ul>
diff --git a/files/de/archive/b2g_os/index.html b/files/de/archive/b2g_os/index.html
new file mode 100644
index 0000000000..4447e3c024
--- /dev/null
+++ b/files/de/archive/b2g_os/index.html
@@ -0,0 +1,163 @@
+---
+title: B2GOS
+slug: Archive/B2G_OS
+tags:
+  - Anfangen
+  - Anfänger
+  - B2G OS
+  - Basic
+  - Firefox OS
+  - Gaia
+  - Gecko
+  - Gonk
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/B2G_OS
+---
+<div class="summary">
+<p><span class="seoSummary">B2G OS ist ein vollständiges, selbstständig arbeitendes Betriebssystem für das offene Web. Es ist ein von der Mozilla-Community entwickeltes Open-Source-Projekt und bildet die Grundlage der Firefox OS-Produkte.</span></p>
+</div>
+
+<p><strong>B2G</strong> <strong>OS</strong> ist ein von der Community gepflegtes Open-Source-Betriebssystem für Smartphones, Tablets, Smart TVs und andere internetfähige Geräte. Das Projekt startete ursprünglich 2011 und basiert auf dem Linux-Kernel und der Rendering-Engine Gecko. Die komplette Nutzeroberfläche ist mit Web-Technologien geschrieben und kann zum Starten und Benutzen von <a href="/de/Apps">Web-Anwendungen</a> benutzt werden. Nachdem die Mozilla Corporation ihr kommerzielles Firefox OS Smartphone-Programm eingestellt hat, wird das Projekt für Smartphones von Mozillas Community weiterentwickelt und als B2G OS geführt.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13140/B2g_wordmark.png" style="height: 193px; width: 555px;"></p>
+
+<div class="note">
+<p><strong>Hinweis</strong>: <a href="https://wiki.mozilla.org/B2G/Transition_Project/Call_For_Contribution">Aufruf zur Mitarbeit</a> &amp; <a href="https://discourse.mozilla-community.org/t/updated-13th-july-call-for-app-maintainers-adopt-an-app/9300">Aufruf zur Appanpassung</a> um mehr Personen zu beteiligen. Hilf uns und teile ihn!</p>
+</div>
+
+<div class="column-container">
+<div class="column-third">
+<h2 id="Mithelfen">Mithelfen</h2>
+
+<ul>
+ <li>Melde &amp; behebe Fehler (Meta-Bug ist <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1252143">Bug 1252143</a>)</li>
+ <li>Hilf uns, fehlschlagende <a href="/en-US/docs/Archive/Firefox_OS/Automated_testing">Tests</a> zu reparieren</li>
+ <li>Portiere eine Gaia <a href="https://mozilla-b2g.github.io/gaia/">Smartphone-App</a>:
+  <ol>
+   <li>in eine Web-App (oder)</li>
+   <li>in eine chrome://-Anwendung (<a href="https://discourse.mozilla-community.org/t/why-gaia-apps-are-turned-to-chrome/8011">warum?</a>) und berichte darüber</li>
+  </ol>
+ </li>
+ <li><a href="/en-US/docs/Mozilla/B2G_OS/Porting_B2G_OS">Portiere B2G OS für dein Smartphone</a> und hilf uns, den Port zu pflegen</li>
+ <li>Hilf uns, diese Dokumentation und das Wiki zu verbessern und zu übersetzen</li>
+ <li>Schlage neue Smartphone-Funktionen vor und implementiere sie</li>
+</ul>
+</div>
+
+<div class="column-third">
+<h2 id="Mitreden">Mitreden</h2>
+
+<ul>
+ <li>Mailing-Liste (<a href="https://lists.mozilla.org/listinfo/dev-fxos">dev-fxos</a>)</li>
+ <li><a href="https://wiki.mozilla.org/IRC">IRC</a> (irc.mozilla.org #fxos)</li>
+ <li><a href="https://discourse.mozilla-community.org/c/b2g-os-participation">Discourse</a></li>
+ <li><a href="https://telegram.me/B2GOS">Telegram-Gruppe</a></li>
+ <li><a href="https://wiki.mozilla.org/B2G/Transition_Project/FAQ">Projekt-Wiki</a></li>
+ <li><a href="https://wiki.mozilla.org/B2G/Meeting">B2G Wöchentliches Meeting</a> für Status-Updates zum Engineering</li>
+ <li>Dokumentations-Probleme werden auf <a href="https://github.com/mozilla-b2g/B2GOS-community/issues">GitHub</a> gesammelt</li>
+ <li>Um an Meetings und Community Working Group-Meetings teilzunehmen, trage dich in diesen <a href="https://calendar.google.com/calendar/embed?src=mozilla.com_2d3638353137343333373332@resource.calendar.google.com">Kalender</a> ein. Sie werden auf <a href="https://discourse.mozilla-community.org/c/b2g-os-participation">Discourse</a> angekündigt. Dort findest du auch weitere Informationen dazu, wie du dich anmeldest und die Notizen.</li>
+ <li><a href="/en-US/docs/Mozilla/Firefox_OS/Preparing_for_your_first_B2G_build" title="Mozilla/Firefox_OS/Preparing for your first B2G build">Vorbereitung des ersten Builds</a></li>
+ <li><a href="/en-US/docs/Mozilla/Firefox_OS/Building" title="Mozilla/Firefox_OS/Building">B2G OS erstellen</a></li>
+</ul>
+</div>
+
+<div class="column-third">
+<h2 id="Geräte">Geräte</h2>
+
+<p>Informationen zu unterstützten Geräten, auf denen B2G OS laufen kann:</p>
+
+<ul>
+ <li><a href="https://discourse.mozilla-community.org/t/building-b2g-os-for-aries-z3c/8082">Sony Xperia Z3C</a> (Entwicklergerät)</li>
+ <li><a href="https://discourse.mozilla-community.org/t/flame-builds/8548">Flame</a> (Entwicklergerät)</li>
+ <li><a href="https://discourse.mozilla-community.org/t/zte-open-c/8402">ZTE Open C</a> (in Arbeit)</li>
+ <li>WileyFox Swift</li>
+ <li>Nexus 4 (in Arbeit)</li>
+ <li><a href="https://discourse.mozilla-community.org/t/fairphone-2-support-for-b2g-installer-landed/8334">Fairphone 2</a> (in Arbeit)</li>
+ <li><a href="https://discourse.mozilla-community.org/t/support-for-amami-xperia-z1c-building-debugging-providing-builds/8348">Sony Xperia Z1C</a> (in Arbeit)</li>
+ <li><a href="https://discourse.mozilla-community.org/t/b2g-os-flamingo-sony-xperia-e3-builds/8361">Sony Xperia E3</a> (in Arbeit)</li>
+</ul>
+
+<p>Mehr Informationen finden sich <a href="/en-US/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/Compatible_Devices">hier</a>.</p>
+
+<p>Dein Gerät ist nicht dabei? Probier die <a href="https://wiki.mozilla.org/Mulet">Mulet</a>-Desktopanwendung aus.</p>
+</div>
+</div>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Einige Seiten wurden in das <a href="/en-US/docs/Archive/Firefox_OS">MDN-Archiv</a> verschoben. Lass es uns wissen, wenn du Schwierigkeiten hast, etwas zu finden oder ein Abschnitt aus dem Archiv hierher zurückgeholt werden sollte.</p>
+</div>
+
+<p> </p>
+
+<h2 id="Subnav">Subnav</h2>
+
+<ol>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/B2G_OS_Architecture">B2G OS Architecture</a>
+
+  <ol>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/B2G_OS_Architecture">B2G OS Architecture</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/API">B2G OS APIs</a></li>
+  </ol>
+ </li>
+ <li><a class="toggler" href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Developing_Gaia">Gaia</a>
+  <ol>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Developing_Gaia">Gaia overview</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Developing_Gaia/Different_ways_to_run_Gaia">Different ways to run Gaia</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Developing_Gaia/Running_the_Gaia_codebase">Running the Gaia codebase</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Developing_Gaia/Understanding_the_Gaia_codebase">Developing Gaia</a>
+    <ol>
+     <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Developing_Gaia/Understanding_the_Gaia_codebase">Understanding the Gaia codebase</a></li>
+     <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Developing_Gaia/Making_Gaia_code_changes">Making Gaia code changes</a></li>
+     <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Developing_Gaia/Testing_Gaia_code_changes">Testing Gaia code changes</a></li>
+     <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Developing_Gaia/Submitting_a_Gaia_patch">Submitting a Gaia patch</a></li>
+     <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Developing_Gaia/Build_System_Primer">Gaia build system primer</a></li>
+     <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Developing_Gaia/make_options_reference">Make options reference</a></li>
+     <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Developing_Gaia/Gaia_tools_reference">Gaia tools reference</a></li>
+    </ol>
+   </li>
+  </ol>
+ </li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS">Build B2G OS</a>
+  <ol>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS">Build overview</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_OS_build_process_summary">B2G OS build process summary</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/B2G_OS_build_prerequisites">Build prerequisites</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Preparing_for_your_first_B2G_build">Preparing for your first build</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Building">Building B2G OS</a>
+    <ol>
+     <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Building">Building B2G OS</a></li>
+     <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/Building_for_Flame_on_OS_X">Building B2G OS for Flame on Mac OS X</a></li>
+     <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Building/Building_for_Fairphone">Building for Fairphone</a></li>
+     <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_Build_Variables_Reference_Sheet">B2G build variables reference sheet</a></li>
+    </ol>
+   </li>
+  </ol>
+ </li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Choosing_how_to_run_Gaia_or_B2G">Run B2G OS on Desktop</a>
+  <ol>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Choosing_how_to_run_Gaia_or_B2G">Choosing how to run Gaia or B2G OS</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Mulet">Run B2G OS on desktop using Mulet</a></li>
+  </ol>
+ </li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Installing_on_a_mobile_device">Install B2G OS on mobile</a>
+  <ol>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Installing_on_a_mobile_device">Installing B2G OS on a mobile device</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_installer_add-on">B2G installer add-on</a></li>
+  </ol>
+ </li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/Compatible_Devices">Compatible Devices</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_OS_update_packages">Create updates for B2G OS</a>
+  <ol>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_OS_update_packages">Creating and applying B2G OS update packages</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Building/FOTA_community_builds">Building and installing FOTA community build</a></li>
+  </ol>
+ </li>
+ <li><a class="toggler" href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Porting_B2G_OS">Porting B2G OS</a>
+  <ol>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Porting_B2G_OS">Porting overview</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Porting_B2G_OS/basics">Porting basics</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Porting_B2G_OS/Porting_on_CyanogenMod">Porting on CyanogenMod</a></li>
+  </ol>
+ </li>
+</ol>
diff --git a/files/de/archive/b2g_os/installing_on_a_mobile_device/index.html b/files/de/archive/b2g_os/installing_on_a_mobile_device/index.html
new file mode 100644
index 0000000000..96a469353c
--- /dev/null
+++ b/files/de/archive/b2g_os/installing_on_a_mobile_device/index.html
@@ -0,0 +1,81 @@
+---
+title: Installing Firefox OS on a mobile device
+slug: Archive/B2G_OS/Installing_on_a_mobile_device
+translation_of: Archive/B2G_OS/Installing_on_a_mobile_device
+---
+<div class="summary">
+ <p><span class="seoSummary">Once you've built Boot to Gecko for a <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites#Have_a_compatible_device_or_use_an_emulator">supported mobile device</a>, you can install it. This article will guide you through the process.</span></p>
+</div>
+<div class="note">
+ <strong>Note:</strong> The first time you flash your phone, it <strong>must</strong> have Android 4 (Ice Cream Sandwich) installed. The process will not work correctly otherwise. Once you've done your first install of B2G, however, you can simply update on top of it.</div>
+<h2 id="Installing_ADB">Installing ADB</h2>
+<p><strong>On OSX</strong></p>
+<p>If you have homebrew on OSX:</p>
+<pre>brew install android-platform-tools</pre>
+<p>Otherwise, download the Android Developer Tools and add the binaries to your PATH.</p>
+<p><strong>On Ubuntu</strong></p>
+<pre>sudo apt-get install android-tools-adb</pre>
+<h2 id="Flashing_your_phone">Flashing your phone</h2>
+<p>To flash everything to your phone, simply connect your phone and type:</p>
+<pre>./flash.sh
+</pre>
+<p>That's it. The B2G you've currently got built will flash onto your device.</p>
+<p>Note that If you are updating across revisions with significant Gaia changes, you might need also do:</p>
+<pre class="brush: bash">cd gaia
+make reset-gaia</pre>
+<p>This will wipe all of your data stored in Gaia, but also clear out obsolete Gaia settings and prefs so that you'll boot into a "clean" Gaia. In theory <code>./flash.sh</code> should do this already, but for some devices (e.g. hamachi) <code>./flash.sh</code> only flashes a subset of modules (<code>./flash.sh -f</code> will force flash everything.)</p>
+<h3 id="Configuring_the_udev_rule_for_your_device">Configuring the udev rule for your device</h3>
+<p>On Linux, if you get this,</p>
+<pre>&lt; waiting for device &gt;</pre>
+<p>that probably means that you haven't added a udev rule for the fastboot device, which is not the same as the one for adb. (Though it also might just mean you need to run ./flash.sh with sudo) You can get the USB vendor ID by running <code>lsusb</code> now, but typically it's Google's: 18d1, so adding this line in your <code>/etc/udev/rules.d/51-android.rules</code> would work:</p>
+<pre>SUBSYSTEM=="usb", ATTR{idVendor}=="18d1", MODE="0666", GROUP="plugdev"</pre>
+<div class="note">
+ <strong>Note:</strong> If you get a very helpful <code>libusb</code> error "-3" on Linux, it means you need to be root to have the needed access to the USB device. Run the script again using <code>sudo</code>.</div>
+<div class="note">
+ <strong>Note 2</strong>: If you have an Unagi or a Geeksphone Keon phone, you need two lines like this - one for the original phone vendor's ID, and one for Google's.</div>
+<h3 id="Special_notes_for_Hamachi_Helix_and_Leo_devices">Special notes for Hamachi, Helix, and Leo devices</h3>
+<p>If your phone is a hamachi, helix or leo device, the ./flash.sh script will now default to flashing only gecko and gaia.  It is recommended that you flash with the OEM as a base build to get the firmware and the gonk layers and then flash the gecko and gaia on top.  If you want to flash using the images, there is an override flash where you can ./flash.sh -f and it will use the image files to flash your device.</p>
+<h3 id="Special_notes_for_the_Samsung_Galaxy_S2">Special notes for the Samsung Galaxy S2</h3>
+<p>If your phone is a Galaxy S2 and you are using heimdall 1.3.2 (the latest version; use <code>heimdall version</code> to check), you may see an alarming error "FACTORYFS upload failed!" followed by "Heimdall flashing failed" and some additional information. This is actually a success condition, and you can ignore the advice.</p>
+<p>To get rid of this strange behavior, grab a <a class="link-https" href="https://github.com/Benjamin-Dobell/Heimdall" title="https://github.com/Benjamin-Dobell/Heimdall">source copy</a> of heimdall, downgrading to the 1.3.1 release ("<code>git checkout fbbed42c1e5719cc7a4dceeba098981f19f37c06</code>"), then compile it  according to the <code>README</code>, then install that to make the error go away. However, this isn't strictly necessary.</p>
+<p>All versions of heimdall are unable to flash a system.img larger than 100MB. Do:</p>
+<pre>ls -l ./out/target/product/galaxys2/system.img
+</pre>
+<p>to see how big yours is. If it's too large, ask in IRC for advice; there are ways to do it in two stages.</p>
+<h2 id="Added_step_for_the_Samsung_Galaxy_S2">Added step for the Samsung Galaxy S2</h2>
+<p>If you're flashing onto the Galaxy S2, there is an additional step to follow. Gaia does not get flashed automatically by the <code>flash.sh</code> script; you'll need to also do:</p>
+<pre>./flash.sh gaia
+</pre>
+<h2 id="Flashing_specific_partitions_to_fastboot_phones">Flashing specific partitions to fastboot phones</h2>
+<p>You can flash specific partitions to fastboot phones (that is, any phone other than the Samsung Galaxy S2). For example:</p>
+<pre>./flash.sh system
+./flash.sh boot
+./flash.sh user
+</pre>
+<p><strong>WARNING</strong>: flashing user (at least) may delete your user-specific data (contacts, etc.).</p>
+<h2 id="Updating_specific_modules">Updating specific modules</h2>
+<p>You can update specific components of B2G by specifying their names when flashing. For example:</p>
+<pre>./flash.sh gaia
+./flash.sh gecko
+</pre>
+<p>In order to update only one application you can use BUILD_APP_NAME environment variable:</p>
+<pre>BUILD_APP_NAME=calendar ./flash.sh gaia</pre>
+<p>If your phone is not for developer (you aren't interested on test apps and/or require optimization), you can update gaia using:</p>
+<pre>VARIANT=user ./flash.sh gaia</pre>
+<h2 id="Next_steps">Next steps</h2>
+<p>At this point, your phone should be running Boot to Gecko! It's time to experiment, <a href="/en-US/docs/Mozilla/Firefox_OS/Application_development" title="en-US/docs/Mozilla/Firefox_OS/Application_development">write some code</a>, <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing" title="en-US/docs/Mozilla/Firefox_OS/Platform/Testing">test</a>, or <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging" title="en-US/docs/Mozilla/Firefox_OS/Debugging">do some debugging</a>!</p>
+<div class="note">
+ <strong>Note:</strong> A helpful usage tip: if your build of B2G starts up with the lock screen requesting a pass code to unlock the phone, the default code is 0000.</div>
+<h2 class="note" id="Troubleshooting">Troubleshooting</h2>
+<p>Here are a some tips for what to do if your device doesn't work right after installing B2G, or updating it to a new version</p>
+<h3 class="note" id="If_the_UI_doesnt_start_up">If the UI doesn't start up</h3>
+<p>If you update your phone and the user interface doesn't start up, you can reset it to clear out out-of-date configuration and the like. This may bring it back to life, but note that it may also delete your user-specific data (contacts, etc.). Here's how:</p>
+<pre>cd gaia
+make reset-gaia
+</pre>
+<h3 class="note" id="If_you_want_change_from_developer_to_production_mode">If you want change from developer to production mode</h3>
+<pre>cd gaia
+make reset-gaia PRODUCTION=1</pre>
+<p><strong>WARNING</strong>: reset-gaia may delete your user-specific data (contacts, etc.).</p>
+<h3 class="note" id="image_is_too_large_error_message_on_.flash.sh_execution">"image is too large" error message on ./flash.sh execution</h3>
+<p>It might mean that you phone needs to be rooted first before flashing it. As b2g needs to be written on root partition, your phone needs to be rooted in order to install it.</p>
diff --git a/files/de/archive/b2g_os/introduction/index.html b/files/de/archive/b2g_os/introduction/index.html
new file mode 100644
index 0000000000..606b63f0e7
--- /dev/null
+++ b/files/de/archive/b2g_os/introduction/index.html
@@ -0,0 +1,84 @@
+---
+title: Einführung in Firefox OS
+slug: Archive/B2G_OS/Introduction
+translation_of: Archive/B2G_OS/Introduction
+---
+<p><strong>Firefox OS</strong> (auch unter seinem Codenamen "Boot to Gecko" oder "B2G" bekannt) ist Mozillas Open Source Betriebssystem für mobile Endgeräte, das auf Linux und Mozillas Gecko-Technologie basiert. Firefox OS ist ein mobiles Betriebssystem, das ohne proprietäre Technologie auskommt und dennoch Anwendungsentwicklern eine leistungsstarke Plattform bietet, um hervorragende Produkte zu erstellen. Darüber hinaus ist es flexibel und leistungsfähig genug, um auch den Endprodukt-Nutzer glücklich zu machen.</p>
+<p>Für Web-Entwickler ist es am Wichtigsten zu verstehen, dass die gesamte Benutzeroberfläche eine Web-Anwendung ist, von der aus sich andere Web-Anwendungen anzeigen und ausführen lassen. Jede deiner Veränderungen an der Benutzeroberfläche und jegliche Anwendung, die du für den Betrieb unter Firefox OS erstellst, sind Webseiten. Allerdings: Mit erweitertem Zugriff auf Hardware und Dienste des mobilen Endgeräts.</p>
+<p>Wie man Firefox OS installiert, kannst du unserer <a href="/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS" title="en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS">Handy-Anleitung entnehmen</a>.</p>
+<h2 id="Hardware-Voraussetzungen">Hardware-Voraussetzungen</h2>
+<p>Die Portierung von Firefox OS sollte für die meisten aktuellen Mobilgeräte mit ARM-Chips gelingen. Der vorliegende Abschnitt beschreibt die grundlegenden Hardware-Anforderungen sowie empfohlene Eigenschaften der Hardware.</p>
+<p> </p>
+<table>
+  <thead>
+    <tr>
+      <th scope="col">Komponente</th>
+      <th scope="col">Minimum</th>
+      <th scope="col">Empfohlen</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">CPU</th>
+      <td>ARMv6</td>
+      <td>Cortex A5 class oder besser<br>
+        ARMv7a mit NEON</td>
+    </tr>
+    <tr>
+      <th scope="row">GPU</th>
+      <td>—</td>
+      <td>Adreno 200 class oder besser</td>
+    </tr>
+    <tr>
+      <th scope="row">Verbindungen</th>
+      <td>—</td>
+      <td>WiFi<br>
+        3G</td>
+    </tr>
+    <tr>
+      <th scope="row">Sensoren</th>
+      <td>—</td>
+      <td>Accelerometer<br>
+        Proximity<br>
+        Ambient light<br>
+        A-GPS</td>
+    </tr>
+  </tbody>
+</table>
+<p>Es wird außerdem empfohlen, dass die Geräte ein einheitliches Farbprofil anbieten sollen (was über den Treiber der Grafikeinheit zu implementieren wäre). Ebenso sollen sie das Stummstellen und die Wiedergabe-Funktion via Kopfhörer-Fernbedienung unterstützen. Beides sind gängige Fähigkeiten moderner Smartphones.</p>
+<h2 id="Hinweise_zur_Benutzung">Hinweise zur Benutzung</h2>
+<p>Dieser Abschnitt bietet dir einige Hinweise zur Verwendung von Firfox OS. Dabei handelt es sich um eine Art Platzhalter, bis wir eine echte Benutzer-Dokumentation zur Verfügung haben.</p>
+<h3 id="Entsperren_des_Telefons">Entsperren des Telefons</h3>
+<p>Falls dein aus dem Quellcode erstelltes Firefox OS mit der Frage nach einem Entsperr-Code hochfährt, so lautet dieser standardmäßig 0000. Das liegt daran, dass wir bei diesen Code-Versionen mit der Entwicklung und dem Testen des Sperr-Bildschirms (Lock-Screen) beschäftigt sind.</p>
+<h3 id="Erstellen_eines_Screenshots">Erstellen eines Screenshots</h3>
+<p>Ein Screenshot lässt sich ganz einfach durch gleichzeitiges Drücken von Power- und Home-Taste erzeugen. Das entsprechende Bild wird unter <code>/sdcard/screenshots</code> auf deinem Gerät abgelegt. Du kannst darauf auch mit Hilfe der Galerie-App deines Telefons zugreifen.</p>
+<p>Sollte das aus irgendeinem Grund nicht funktionieren, kannst du auch jederzeit über ein Terminal des Linux- oder MacOSX-Computers, auf dem ein Firefox OS installiert ist, darauf zugreifen.</p>
+<ol>
+  <li>Stell sicher, dass bei dir <code>ffmpeg</code> installiert ist.
+    <ol>
+      <li>Wenn Du MacPorts verwendest, kannst du das auf dem Mac mit <code>sudo port install ffmpeg</code> nachholen. Mit homebrew verwende <code>brew install ffmpeg</code>.</li>
+      <li>Unter Linux (Ubuntu/Debian) verwende <code>sudo apt-get install ffmpeg</code>.</li>
+    </ol>
+  </li>
+  <li>Schließe dein Telefon mit einem USB-Kabel an deinen Rechner an.</li>
+  <li>Erzeuge auf deinem Telefon die Situation, von der Du einen Screenshot willst.</li>
+  <li>Wechsle mit <code>cd</code> ins <code>B2G/gaia</code> Verzeichnis.</li>
+  <li><code>make screenshot</code></li>
+  <li>Du hast einen Screenshot namens <code>screenshot.png</code> erstellt.</li>
+</ol>
+<h3 id="Tasten_und_Bedienelemente">Tasten und Bedienelemente</h3>
+<p>Ein typisches Firefox OS-Gerät verfügt hardwareseitig nur über eine geringe Zahl physischer Bedienelemente:</p>
+<dl>
+  <dt>
+    Home-Taste</dt>
+  <dd>
+    Diese Taste befindet sich im Allgemeinen mittig unterhalb des Bildschirms. Bei Tastendruck wird man zum App-Launcher zurückgeführt. Bei Halten der Taste wird die Ansicht zum Umschalten der Karten geöffnet: Hochwischen auf einer App entfernt diese.</dd>
+  <dt>
+    Lautstärken-Wippe</dt>
+  <dd>
+    Entlang der linken Seite befindet sich die Lautstärken-Wippe. Druck auf die obere Hälfte erhöht die Lautstärke, Druck auf die untere senkt sie.</dd>
+  <dt>
+    Power-Taste</dt>
+  <dd>
+    Die Power-Taste befindet sich an der oberen rechten Ecke des Geräts.</dd>
+</dl>
diff --git a/files/de/archive/b2g_os/phone_guide/alcatel_one_touch_fire/index.html b/files/de/archive/b2g_os/phone_guide/alcatel_one_touch_fire/index.html
new file mode 100644
index 0000000000..4ba54a945b
--- /dev/null
+++ b/files/de/archive/b2g_os/phone_guide/alcatel_one_touch_fire/index.html
@@ -0,0 +1,102 @@
+---
+title: Alcatel One Touch Fire
+slug: Archive/B2G_OS/Phone_guide/Alcatel_One_Touch_Fire
+tags:
+  - Alcatel One Touch Fire
+  - Firefox OS
+translation_of: Archive/B2G_OS/Phone_guide/Alcatel_One_Touch_Fire
+---
+<div class="column-container">
+<div class="column-half"><img alt="" src="https://mdn.mozillademos.org/files/10285/alcatel-onetouchfire.7e8f7701bbff.png" style="height: 366px; width: 200px;"></div>
+
+<div class="column-half">
+<p>Das Alcatel One Touch Fire Smartphone mit Firefox OS verfügt über einen 1 GHz Prozessor und einer rückseitigen 3.2 Megapixel Kamera. Es wird von einer großen Vielzahl von Mobilfunkanbietern in verschiedenen Teilen der Welt angeboten.</p>
+
+<h2 id="Besorge_dir_ein_Gerät">Besorge dir ein Gerät</h2>
+
+<p>Das Alcatel One Touch Fire ist im allgemeinen Handel erhältlich.</p>
+
+<h2 id="Verfügbare_Länder">Verfügbare Länder</h2>
+
+<div class="column-container">
+<div class="column-half">
+<ul>
+ <li>Brasilien</li>
+ <li>Chile</li>
+ <li>Kolumbien</li>
+ <li>Deutschland</li>
+ <li>Griechenland</li>
+ <li>Ungarn</li>
+ <li>Italien</li>
+</ul>
+</div>
+
+<div class="column-half">
+<ul>
+ <li>Mexico</li>
+ <li>Montenegro</li>
+ <li>Peru</li>
+ <li>Polen</li>
+ <li>Serbien</li>
+ <li>Venezuela</li>
+</ul>
+</div>
+</div>
+
+<h2 id="Mobilfunkanbieter">Mobilfunkanbieter</h2>
+
+<div class="column-container">
+<div class="column-half">
+<ul class="comma-list">
+ <li>Congstar</li>
+ <li>Cosmote</li>
+ <li>Movistar</li>
+ <li>T-Mobile</li>
+</ul>
+</div>
+
+<div class="column-half">
+<ul>
+ <li>Telcel</li>
+ <li>Telenor</li>
+ <li>TIM</li>
+ <li>Vivo</li>
+</ul>
+</div>
+</div>
+</div>
+</div>
+
+<h2 id="Software_-_Updates_Upgrades">Software - Updates &amp; Upgrades</h2>
+
+<p>Das Systemabbild des Gerätes ist durch den Mobilfunkanbieter gesperrt. Aus diesem Grund kann ein Update der Software nur durchgeführt werden wenn der Netzbetreiber ein OTA Update veröffentlicht.</p>
+
+<h2 id="Geräteeigenschaften">Geräteeigenschaften</h2>
+
+<p>Mehr Geräteeigenschaften sind auf der <a href="http://www.alcatelonetouch.com/global-en/products/smartphones/one_touch_fire.html#.VQPk8DWnWPs">Alcatel Website</a> unter dem Reiter "Specification" aufgelistet.</p>
+
+<ul>
+ <li><strong>CPU</strong>: Qualcomm Snapdragon MSM7227A, 1 GHz CPU</li>
+ <li><strong>Kamera</strong>: 3.2 megapixel rear</li>
+ <li><strong>Batterie</strong>: 1400 mAh</li>
+ <li><strong>Display</strong>: 3.5” HVGA  TFT 262K color display</li>
+ <li><strong>Auflösung</strong>: 320x480 pixels</li>
+ <li><strong>Interner Speicher</strong>: 512MB NAND + 256MB RAM</li>
+ <li><strong>Externer Speicher</strong>: MicroSD Card: up to 32GB</li>
+ <li><strong>Maße</strong>: <span>115 x 62.3 x 12.2 mm</span></li>
+ <li><strong>Gewicht</strong>: Approx. <span>108g</span></li>
+</ul>
+
+<h2 id="Verfügbare_Farben">Verfügbare Farben</h2>
+
+<ul>
+ <li>Mozilla Orange</li>
+ <li>Pure White</li>
+ <li>Apple Green</li>
+</ul>
+
+<h2 id="Weitere_Informationen">Weitere Informationen</h2>
+
+<ul>
+ <li><a href="http://www.alcatelonetouch.com/global-en/products/smartphones/one_touch_fire.html#.VQPk8DWnWPs">Alcatel One Touch Fire</a><a href="http://www.zenmobile.in/category-ultrafone/105-fire"> </a></li>
+</ul>
diff --git a/files/de/archive/b2g_os/phone_guide/flame/index.html b/files/de/archive/b2g_os/phone_guide/flame/index.html
new file mode 100644
index 0000000000..b8e75bb09a
--- /dev/null
+++ b/files/de/archive/b2g_os/phone_guide/flame/index.html
@@ -0,0 +1,39 @@
+---
+title: Flame
+slug: Archive/B2G_OS/Phone_guide/Flame
+translation_of: Archive/B2G_OS/Phone_guide/Flame
+---
+<div>
+ <h3 id="Coming_soon"><img alt="A picture of the Flame device, showing the Firefox OS homescreen containing several app icons." src="https://mdn.mozillademos.org/files/7697/Firefox-OS-Flame-Reference-Device-small.png" style="float: left; margin-right: 50px; margin-bottom: 20px;">Coming soon</h3>
+ <p><span class="seoSummary">The Flame developer reference phone is a milestone in Firefox OS device releases. The Flame hardware offers a representative set of specs — including FWVGA display and dual-core processor (see <a href="/en-US/Firefox_OS/Developer_phone_guide/Phone_specs">Phone and device specs</a> for full specs) — to help developers build great content and experiences. A single hardware platform is also good for testers, making it easier to test and address specific software issues without having to worry about device model-specific bugs, etc.</span></p>
+</div>
+<p>If you have your phone in hand and want to start playing with it, developing and distributing apps, or contributing to the Firefox platform, the following links will get you where you need to go:</p>
+<ul>
+ <li><a href="/en-US/Firefox_OS">Firefox OS zone</a>: For creating your own Firefox OS builds and contributing to the B2G and Gaia projects.</li>
+ <li><a href="/en-US/Apps">App Center zone</a>: For building open web apps compatible with Firefox OS.</li>
+ <li><a href="/en-US/Marketplace">Marketplace zone</a>: For information on publishing and distributing apps.</li>
+ <li><a href="https://marketplace.firefox.com/">Firefox Marketplace</a>: The best source to find and publish new Firefox OS apps.</li>
+</ul>
+<p style="">If you’d like to purchase a phone or find out more about using it, you’ll find the information you need below.</p>
+<h2 id="Purchasing_a_device">Purchasing a device</h2>
+<p>Our device manufacturer partner is making the device available for purchase in the latter part of Q2, 2014, retailing at approximately US$170, global shipping included. Available for pre-order soon!</p>
+<h2 id="Emergency_download_mode">Emergency download mode</h2>
+<p>When flashing a new build to your phone fails to work, your phone becomes unresponsive, and the phone cannot enter fastboot mode, you can use emergency download mode for recovery.</p>
+<p>A USB cable and the Emergency Download Tool are required to enter emergency download mode. (Tool download coming soon.)</p>
+<h2 id="Recovery_mode">Recovery mode</h2>
+<p>You can enter recovery mode to clear your phone data or manually update the firmware. There are two ways to enter this mode:</p>
+<ul>
+ <li>If <a href="/en-US/Firefox_OS/Debugging/Installing_ADB">ADB</a> tools are available, make sure Remote debugging is turned on in the phone's <a href="/en-US/Firefox_OS/Debugging/Developer_settings#Remote_debugging">Developer settings</a>, connect your phone to your computer via USB and enter <code>adb reboot recovery</code> on the command line.</li>
+ <li>If your phone is powered off, press the Volume Up + Power buttons together.</li>
+</ul>
+<p>When in recovery mode, press the Volume up/down keys to move the selection highlight, and the Power key to select. Make sure you have your phone data (Contacts, SMS, etc.) backed up before clearing data, and your upgrade packages downloaded before updating.</p>
+<h2 id="RAM_adjustment">RAM adjustment</h2>
+<p>You can adjust the available RAM capacity to see how apps perform on Firefox OS phones with lower memory footprints.</p>
+<p>This is accomplished by entering fastboot mode (install fastboot first, which is available in the same SDK page as <a href="/en-US/Firefox_OS/Debugging/Installing_ADB">ADB</a>) and typing:</p>
+<pre class="brush: bash">fastboot oem mem [0|256-1024]</pre>
+<p>“0” is the memory automatically detected and “256-1024” is the number of megabytes. For example, if you want to adjust device RAM capacity to 512M, enter <code>fastboot oem mem 512</code>.</p>
+<p>You'll need to then reboot your device for the settings to take effect. This can be done using:</p>
+<pre class="brush: bash">fastboot reboot</pre>
+<p>The current memory size can be returned by entering fastboot mode and typing:</p>
+<pre class="brush: bash">fastboot getvar mem
+</pre>
diff --git a/files/de/archive/b2g_os/phone_guide/geeksphone/index.html b/files/de/archive/b2g_os/phone_guide/geeksphone/index.html
new file mode 100644
index 0000000000..b9bc2572df
--- /dev/null
+++ b/files/de/archive/b2g_os/phone_guide/geeksphone/index.html
@@ -0,0 +1,202 @@
+---
+title: Geeksphone
+slug: Archive/B2G_OS/Phone_guide/Geeksphone
+translation_of: Archive/B2G_OS/Phone_guide/Geeksphone
+---
+<div class="summary">
+<p><span class="seoSummary">Developer Preview editions of the Firefox OS phone are now becoming widely available to the community, mainly through <a href="http://www.geeksphone.com/">Geeksphone</a>. Since these are for developers, naturally we want to encourage you to tinker and play with them as much as possible! In this article we cover some basic tips on how to keep your phone up to date and how to tweak the system Gaia applications.</span></p>
+</div>
+
+<div class="note">
+<p><strong>Bitte beachten</strong>: Diese Anleitungen sind für die älteren Modelle Keon und Peak gedacht und nicht für das aktuellste Geeksphone Revolution.</p>
+</div>
+
+<h2 id="Geeksphone_auf_das_letzte_Abbild_upgraden">Geeksphone auf das letzte Abbild upgraden</h2>
+
+<p>Firefox OS Updates können über die Settings App heruntergeladen werden. Die Funktionalität befindet sich unter Device Informationen. Das Smartphone kann so eingestellt werden, dass es auf neue Updates täglich, wöchentlich oder monatlich prüft. Zusätzlich besteht die Möglichkeit über den "check now" Button eine Aktualisierung durchzuführen. Sobald ein neues Update verfügbar ist wird dies angezeigt und der Download und die Installation der aktuellen Version kann beginnen.</p>
+
+<p><img alt="The screen for checking updates on the Firefox OS settings app" src="https://mdn.mozillademos.org/files/6051/checkupate.png" style="width: 318px; height: 478px; display: block; margin: 0px auto;"></p>
+
+<h2 id="Das_Telefon_flashen">Das Telefon flashen</h2>
+
+<p>Das Team von Geeksphone stellt die "latest stable" und die "nightly builds" als eigenständige Downloads zum selbstständigen flashen zur Verfügung.</p>
+
+<h3 id="Telefon_und_Computer_vorbereiten">Telefon und Computer vorbereiten</h3>
+
+<p><span style="line-height: 1.572;">Bevor man mit dem flashen des Smartphone beginnen sollte, sollte man die Anleitung im Abschnitt  “Setting Up the Geeksphone Device” in </span><a href="https://hacks.mozilla.org/2013/05/pushing-firefox-os-apps-to-the-geeksphone/" style="line-height: 1.572;">Pushing Firefox OS Apps to the Geeksphone</a><span style="line-height: 1.572;"> beachten und die dort beschriebenen Voraussetzungen schaffen. Diese stellt sicher, dass man Daten an das Telefon übertragen kann. Ebenfalls sollte man, die im gleichen Abschnitt beschriebene  Anleitung zur Installation der korrekten USB-Treiber beachten.</span></p>
+
+<div class="note">
+<p><strong>Bitte beachten:</strong> Es ist besonders wichtig, dass auf Windows Computer die korrekten Treiber installiert sind.</p>
+</div>
+
+<p>Die aktuellen Build befinden sich auf der <a href="http://downloads.geeksphone.com/">Geeksphone Download-Seite</a>. Auf dieser Seite erhält man nun die Option das korrekte Gerät und den gewünschten Build auszuwählen.</p>
+
+<p><img alt="Two phone images side by side, the Geeksphone Keon and Peak, with different software download options below each one." src="https://mdn.mozillademos.org/files/6055/geeksphone-download.png" style="width: 530px; height: 486px; display: block; margin: 0px auto;"></p>
+
+<p>Lade nun den zu deinem Gerät passenden Build herunten und entpacke die Archive-Datei auf deine Festplatte. Das Archive beinhaltet das Abbild und die benötigten Befehle um das Gerät zu aktualisieren. Dabei stehen Befehle für Windows, Mac OS oder Linux zur Verfügung. Um das Gerät nun zu aktualisieren muss "Remote debugging" unter Einstellungen aktiviert sein.</p>
+
+<p><code><strong>Settings</strong> -&gt; <strong>Device information</strong> -&gt; <strong>More information</strong> -&gt; <strong>Developer</strong></code><strong> tab</strong>.</p>
+
+<div class="note">
+<p><strong>Bitte beachten:</strong> Stelle sicher dass dein Handy eine Akkuladung von mit 50% aufweist. Um die System-Dateien zu verändern Bedarf es mehrere Restarts, welche im Falle von fehlender Akkuleistung zu einer Beschädigung führen kann.</p>
+</div>
+
+<p><img alt="Enabling remote debugging on the Firefox OS Settings app" src="https://mdn.mozillademos.org/files/6049/remote-debugging.png" style="width: 320px; height: 480px; display: block; margin: 0px auto;"></p>
+
+<div class="note">
+<p><strong>Bitte beachten:</strong> Sollte dein Gerät, obwohl es angesteckt ist, von den mitgelieferten Skripten in den ersten Schritten nicht erkannt werden, musst ggf. das Handy entsperren und warten bis das USB-Zeichen im System-Tray auftaucht.</p>
+</div>
+
+<div class="note">
+<p><strong>Bitte beachten:</strong> Das Flashen des Smartphone wird all deine Daten vom Telefon entfernen. Wenn du deine Daten zuvor sichern möchtest, solltest du die folgende Anleitung befolgen:<span style="line-height: 1.5;"> </span><a href="/en-US/Firefox_OS/Firefox_OS_build_prerequisites#Backup_the_phone_system_partition" style="line-height: 1.5;">Back up the phone system partition</a><span style="line-height: 1.5;">.</span></p>
+</div>
+
+<h3 id="Windows">Windows</h3>
+
+<div class="note">
+<p><strong>Bitte Beachten:</strong> Es müssten möglicherweise USB-Treiber für Windows installiert werden. Eine Anleitung befindet sich in der folgenden Anleitung<span style="line-height: 1.572;"> “Setting Up the Geeksphone Device” in </span><a href="https://hacks.mozilla.org/2013/05/pushing-firefox-os-apps-to-the-geeksphone/" style="line-height: 1.572;">Pushing Firefox OS Apps to the Geeksphone</a><span style="line-height: 1.572;">.</span></p>
+</div>
+
+<p>Öffne zuerst eine Konsole (Start &gt; Tippe <code>cmd</code> in der Suchfeld &gt; Enter drücken, Unter Windows 7, Windows Taste + X &gt; Wähle Command Prompt unter Windows 8) und wechsel in das Verzeichnis wo sich die entpackten Daten befinden. Führe den folgenden Befehlt aus:</p>
+
+<pre class="brush: bash" lang="bash">flash.bat
+</pre>
+
+<p>Dieser Befehl sollte nun das neue Abbild auf das Telefon flashen. Das Telefon muss nun nochmals erneut aufgesetzt werden, da ja wie zuvor beschrieben alle Daten gelöscht wurden.</p>
+
+<h3 id="Mac_OS">Mac OS</h3>
+
+<p>Öffnen eines Terminals(<code>Cmd + space -&gt; type terminal -&gt; enter</code>) Fensters und wechsle mit cd in das Verzeichnis wo sich die entpackten Daten befinden. Führe den folgenden Befehlt aus:</p>
+
+<pre class="brush: bash" lang="bash">./flash_mac.sh
+</pre>
+
+<p>Dieser Befehl sollte nun das neue Abbild auf das Telefon flashen. Das Telefon muss nun nochmals erneut aufgesetzt werden, da ja wie zuvor beschrieben alle Daten gelöscht wurden.</p>
+
+<h3 id="Linux">Linux</h3>
+
+<p>Um ein Keon unter Ubuntu zu fläschen müssten die folgenden Regeln in  /etc/udev/rules.d/51-android.rules hinzugefügt werden:</p>
+
+<div>SUBSYSTEM=="usb", ATTR{idVendor}=="05c6", ATTR{idProduct}=="8013", MODE="0666"</div>
+
+<div>SUBSYSTEM=="usb", ATTR{idVendor}=="18d1", ATTR{idProduct}=="d00d", MODE="0666"</div>
+
+<div> </div>
+
+<p>Öffne nun ein Terminal (control-alt-t unter Ubuntu) Fehnster und welche in das Verzeichnis wo sich die entapckten Daten befinden. Führe den folgenden Befehl aus:</p>
+
+<pre class="brush: bash" lang="bash">./flash.sh
+</pre>
+
+<p>Dieser Befehl sollte nun das neue Abbild auf das Telefon flashen. Das Telefon muss nun nochmals erneut aufgesetzt werden, da ja wie zuvor beschrieben alle Daten gelöscht wurden.</p>
+
+<div class="note">
+<p><strong>Ein anderer Weg das Keon unter Ubuntu zu aktualisieren ist der folgende:-</strong></p>
+</div>
+
+<p>Schritt 1: Das Gerät verbinden</p>
+
+<p>Schritt 2: Ein Terminal öffnen</p>
+
+<p>Schritt 3: Den Befehl  <span class="st"><em>sudo nautilus </em>eintippen und das Root-Passwort eingeben um den Root-Ordner zu öffnen</span></p>
+
+<pre class="brush: bash" lang="bash"><span class="st"><em>sudo nautilus</em></span></pre>
+
+<pre class="brush: bash" lang="bash"><span class="st"><em>sudo nautilus "root password"</em></span></pre>
+
+<p>Schritt 4: Kopiere den Download des Firefox O.S Geeks Phone Builds in das Root-Verzeichnis</p>
+
+<p>Schritt 5: Klicke auf die Datei mit dem Namen "flash.sh"</p>
+
+<pre class="brush: bash" lang="bash">./flash.sh</pre>
+
+<p> </p>
+
+<h2 id="If_you_have_an_'unagi'_or_developer_preview_phone_that_is_not_a_Geeksphone">If you have an 'unagi' or developer preview phone that is not a Geeksphone</h2>
+
+<p>If you have a developer phone that is not a Geeksphone such as an 'unagi' or a previously Android-based device, you may need to perform the following steps. If this is not you, please skip to the next section.</p>
+
+<p>You will need to install <strong>adb</strong> and <strong>fastboot</strong>. These utilities can be found in the Android Developer Toolkit.</p>
+
+<p>It is not necessary to install the entire toolkit. Download the toolkit from here and extract the contents. adb and fastboot are found in the /platform-tools/ folder. They can be copied to the /usr/bin of your Linux or Mac OS machine, or copied to another folder as long as that folder is added to your $PATH.</p>
+
+<p>If you are attempting to flash your device and have another device plugged in via USB, your phone may not be detected by these utilities correctly. Only have your phone plugged in while trying to flash it.</p>
+
+<h2 id="Tweaking_Gaia">Tweaking Gaia</h2>
+
+<p>If you are the industrious sort, you may want to tweak the default applications in Gaia — the UI in Firefox OS. In this section we will cover some of the basics for cloning Gaia and making changes to the default system apps. Bear in mind these tips are “at your own risk” and may involve you later referring to the section “Ok, I bricked my phone”. Before proceeding make sure that you have adb and fastboot installed on your system. To verify if these are installed open a terminal and type adb devices with your phone connected. You should see your phone listed under the attached devices.</p>
+
+<p>You should also be able to run fastboot from the terminal. If you run fastboot, a set of parameter options should be displayed. If you do not have adb or fastboot installed, a quick Google search with your operating system will return several quick starts on how to install them. In addition to adb and fastboot you will need Git. If you do not currently have Git installed, have a look at this <a href="https://help.github.com/articles/set-up-git">setup guide</a>. Finally make sure your phone is set up for remote debugging as described in the previous section.</p>
+
+<p>Once you have the prerequisites you can open a terminal and cd to the directory you would like to clone the Gaia source code to. Type the following commands:</p>
+
+<pre class="brush: bash" lang="bash">git clone git://github.com/mozilla-b2g/gaia.git gaia
+cd gaia
+</pre>
+
+<p>This will clone the current Gaia code to your system.</p>
+
+<div class="warning">
+<p>If you plan on submitting changes back to the Gaia source, be sure to fork the source before cloning as described in <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia/Hacking">Hacking Gaia</a>.</p>
+</div>
+
+<p>Currently the Geeksphone Keon uses the v1.0.1 branch of Gaia code, so set the proper branch using the following command before you do anything else:</p>
+
+<pre class="brush: bash" lang="bash">git checkout -b v1.0.1 origin/v1.0.1
+</pre>
+
+<p>Most of the system apps are located in the apps subdirectory of gaia. You can now make any changes to these Firefox OS apps you wish. Once you have made changes, make sure your device is mounted properly by first running:</p>
+
+<pre class="brush: bash">adb remount</pre>
+
+<p>Next, run the following command to push the modified apps to your phone. This will by default push all the system apps to the phone:</p>
+
+<pre class="brush: bash" lang="bash">B2G_SYSTEM_APPS=1 make install-gaia
+</pre>
+
+<p>If you only changed one of the apps you can specify the particular app using similar syntax. In this example only the calendar app will be pushed to the phone:</p>
+
+<pre class="brush: bash" lang="bash">APP=calendar B2G_SYSTEM_APPS=1 make install-gaia
+</pre>
+
+<p>If you have issues while making the changes, you can reset the phone to default values using either of the following commands:</p>
+
+<pre class="brush: bash" lang="bash">make production
+make reset-gaia
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Bear in mind that either of the above commands will clear any data or apps that you have pushed to the phone. If you want to back up your data and restore afterwards, you can follow the instructions at <a href="/en-US/Firefox_OS/Firefox_OS_build_prerequisites#Backup_the_phone_system_partition">Back up the phone system partition</a>.</p>
+</div>
+
+<h2 id="Ok_I_bricked_my_phone">"Ok, I bricked my phone"</h2>
+
+<p>If you are in the process of modifying your phone and it becomes “unresponsive” you should be able to recover it using fastboot with a simple procedure. The following illustrates resetting the Keon but other phones should have a similar process. You will also need to verify that you have fastboot and ADB installed (try typing <code>fastboot</code> and <code>adb</code> in the command line if you are not sure).</p>
+
+<ol>
+ <li>Remove the USB cable and then remove the battery from the phone for 30 seconds.</li>
+ <li>Reinsert the battery and hold down the volume up and power buttons at the same time, for a few seconds, until the system recovery menu appears.</li>
+ <li>Reconnect the USB cable</li>
+ <li>Type in the command run adb reboot bootloader.</li>
+ <li>When the phone reboots and starts to show the Geeskphone logo, you are now in fastboot mode; run the following commands from a terminal window in the directory that contains the latest img files described in the first section of this post:</li>
+</ol>
+
+<pre class="brush: bash" lang="bash">fastboot flash recovery recovery.img
+fastboot flash boot boot.img
+fastboot flash userdata userdata.img
+fastboot flash system system.img
+fastboot reboot
+</pre>
+
+<p>This process should recover your phone. If it doesn't seem to work, you may have to try it a second time.</p>
+
+<h2 id="Go_play!">Go play!</h2>
+
+<p>We hope these instructions are useful to you, and naturally we want you to be as happy about Firefox OS and the possibilities as we are! Feel free to play around with updating your devices, make changes/updates to Gaia apps, and also be inspired to build you own open web apps.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/Firefox_OS/Developer_phone_guide/Geeksphone/Geeksphone_FAQ">Geeksphone FAQ</a></li>
+ <li><a href="/en-US/Apps/Quickstart/Build/Intro_to_open_web_apps">Introduction to open web apps</a></li>
+</ul>
diff --git a/files/de/archive/b2g_os/phone_guide/index.html b/files/de/archive/b2g_os/phone_guide/index.html
new file mode 100644
index 0000000000..472fcd195f
--- /dev/null
+++ b/files/de/archive/b2g_os/phone_guide/index.html
@@ -0,0 +1,44 @@
+---
+title: Firefox OS developer phone guide
+slug: Archive/B2G_OS/Phone_guide
+tags:
+  - B2G
+  - Firefox OS
+  - NeedsTranslation
+  - Phones
+  - TopicStub
+translation_of: Archive/B2G_OS/Phone_guide
+---
+<div class="summary">
+ <p>This section contains developer information relevant to specific phones that run Firefox OS. We have general information available on <a href="/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS" title="Building and installing Firefox OS">Building and installing Firefox OS</a> and <a href="/en-US/docs/Mozilla/Firefox_OS/Hacking_Firefox_OS" title="/en-US/docs/Mozilla/Firefox_OS/Hacking_Firefox_OS">Hacking Firefox OS</a>, so please go there for information about building and installing the platform from scratch. Developers with specific phones in their possession may however find the following articles useful.</p>
+</div>
+<h2 id="Specific_device_information">Specific device information</h2>
+<dl>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Firefox_OS/Phones">Firefox OS phone data</a></dt>
+ <dd>
+  In this article we list the various available Firefox OS phones along with information such as their code names, availability, and specific hardware features.</dd>
+ <dt>
+  <a href="/en-US/Firefox_OS/Developer_phone_guide/Geeksphone">Geeksphone</a></dt>
+ <dd>
+  In this article we cover some basic tips on how to keep your Geeksphone up-to-date and how to tweak the system Gaia applications.</dd>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide/ZTE_OPEN">The Firefox OS ZTE OPEN</a></dt>
+ <dd>
+  This article exists to share the information we have available on the ZTE OPEN Firefox OS device.</dd>
+</dl>
+<h2 id="General_Firefox_OS_information">General Firefox OS information</h2>
+<dl>
+ <dt>
+  <a href="/en-US/Firefox_OS/Developer_phone_guide/Firefox_OS_device_features">General device features</a></dt>
+ <dd>
+  This page lists typical Firefox OS hardware features and minimum hardware requirements.</dd>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Firefox_OS/Troubleshooting">Troubleshooting</a></dt>
+ <dd>
+  This article provides tips for resolving common problems you may have while using Firefox OS.</dd>
+ <dt>
+  <a href="/en-US/Firefox_OS/Developer_phone_guide/Best_practices_open_reference_devices">Best practices for open reference devices</a></dt>
+ <dd>
+  A set of best practices that we believe should come highly recommended for any widely available open reference devices. All of the recent Firefox OS reference devices have followed these practices.</dd>
+</dl>
diff --git a/files/de/archive/b2g_os/phone_guide/phone_specs/index.html b/files/de/archive/b2g_os/phone_guide/phone_specs/index.html
new file mode 100644
index 0000000000..8cf863e090
--- /dev/null
+++ b/files/de/archive/b2g_os/phone_guide/phone_specs/index.html
@@ -0,0 +1,800 @@
+---
+title: Firefox OS Geräte und Spezifikationen
+slug: Archive/B2G_OS/Phone_guide/Phone_specs
+tags:
+  - Firefox OS
+  - Gerät
+  - Handy
+  - Smartphone
+translation_of: Archive/B2G_OS/Phone_guide/Phone_specs
+---
+<div class="summary">
+<p><span class="seoSummary">Dieser Artikel enthält Informationen über Firefox OS Geräte und deren Spezifikationen, Code-Namen, standardmäßig installierten FIrefox OS Versionen und mehr.</span></p>
+</div>
+
+<h2 id="Verfügbare_Firefox_OS_Smartphones">Verfügbare Firefox OS Smartphones</h2>
+
+<p>Die folgende Tabelle enthält Informationen zu den verfügbaren und ehemals verfügbaren Firefox OS Smartphones.</p>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Nähere Informationen zu den verfügbaren Firefox OS Smartphones und die Länder, in denen sie verfügbar sind, findest Du auf <a href="http://www.mozilla.org/en-US/firefox/os/devices/">Firefox OS devices</a>.</p>
+</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">
+    <p>Name / Code-Name</p>
+   </th>
+   <th scope="col">
+    <p>Datum der Veröffentlichung</p>
+   </th>
+   <th scope="col">FxOS<br>
+    version</th>
+   <th scope="col">Verfügbarkeit</th>
+   <th scope="col">Weitere Informationen</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <p><a href="https://developer.mozilla.org/en-US/Firefox_OS/Phone_guide/Alcatel_One_Touch_Fire">Alcatel One Touch Fire</a></p>
+
+    <p><em>hamachi, buri</em></p>
+   </td>
+   <td>12. Juli 2013</td>
+   <td>1.0.1</td>
+   <td>Zur Zeit verfügbar</td>
+   <td>Verfügbar in Brasilien, Uruguay, Italien, Deutschland, Griechenland, Serbien, Ungarn und Polen.<br>
+    Erhältlich auf eBay.</td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/Firefox_OS/Phone_guide/Alcatel_One_Touch_Fire_E">Alcatel One Touch Fire E</a></td>
+   <td>18. Juli 2014</td>
+   <td>1.3.0</td>
+   <td>Zur Zeit verfügbar</td>
+   <td>Verfügbar in Tschechien, Deutschland, Ungarn, Polen, Russland.</td>
+  </tr>
+  <tr>
+   <td><em>otoro, unagi, inari</em></td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td>nicht erhältliche ZTE Entwicklermodelle, Vorgänger des ZTE Open.</td>
+  </tr>
+  <tr>
+   <td>
+    <p><a href="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide/ZTE_OPEN">ZTE Open</a></p>
+
+    <p><em>ikura</em></p>
+   </td>
+   <td>2. Juli 2013</td>
+   <td>1.0.1</td>
+   <td>Zur Zeit verfügbar</td>
+   <td>Baugleich mit inari, erhältlich auf eBay.</td>
+  </tr>
+  <tr>
+   <td>
+    <p><a href="https://developer.mozilla.org/en-US/Firefox_OS/Phone_guide/LG_fireweb">LG Fireweb</a></p>
+
+    <p><em>leo</em></p>
+   </td>
+   <td>24. Oktober 2013</td>
+   <td>1.1</td>
+   <td>Zur Zeit verfügbar</td>
+   <td>Verfügbar in Brasilien.</td>
+  </tr>
+  <tr>
+   <td>
+    <p><a href="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide/Updating_and_Tweaking_Geeksphone">Geeksphone Keon</a></p>
+
+    <p><em>keon</em></p>
+   </td>
+   <td>24. April 2013</td>
+   <td>1.0.1</td>
+   <td>
+    <p>Zur Zeit nicht verfügbar</p>
+   </td>
+   <td>Nur für Entwickler</td>
+  </tr>
+  <tr>
+   <td>
+    <p><a href="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide/Updating_and_Tweaking_Geeksphone">Geeksphone Peak</a></p>
+
+    <p><em>peak</em></p>
+   </td>
+   <td>24. April 2013</td>
+   <td>1.0.1</td>
+   <td>Zur Zeit nicht verfügbar</td>
+   <td>ehemaliger Code-Name "twist", nur für Entwickler</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide/Updating_and_Tweaking_Geeksphone">Geeksphone Peak+</a></td>
+   <td>-</td>
+   <td>-</td>
+   <td>-</td>
+   <td><a href="http://www.geeksphone.com/?wysija-page=1&amp;controller=email&amp;action=view&amp;email_id=15">gestoppt</a></td>
+  </tr>
+  <tr>
+   <td>Geeksphone Revolution</td>
+   <td>4. März 2014</td>
+   <td>1.3pre</td>
+   <td>Zur Zeit verfügbar</td>
+   <td><a href="http://shop.geeksphone.com/moviles/9-revolution.html">Online erhältlich</a></td>
+  </tr>
+  <tr>
+   <td>
+    <p>LG Google Nexus 4</p>
+
+    <p><em>nexus-4</em></p>
+   </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td>Test-Gerät. Weder von LG noch von Google unterstützt. Nicht mehr unterstützte Hardware.</td>
+  </tr>
+  <tr>
+   <td>
+    <p><a href="/en-US/Firefox_OS/Developer_phone_guide/Flame">Flame</a></p>
+
+    <p><em>Mozillas Referenz-Gerät</em></p>
+   </td>
+   <td>April 2014</td>
+   <td>1.3</td>
+   <td> </td>
+   <td>
+    <p><a href="http://www.everbuying.com/product549652.html">Auf Vorbestellung erhältlich</a></p>
+
+    <p>Ausverkauft seit Dezember 2014</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>Spreadtrum</p>
+
+    <p><em>tarako</em></p>
+   </td>
+   <td>Ende Q2 2014?</td>
+   <td> </td>
+   <td>Demnächst verfügbar</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/Firefox_OS/Phone_guide/ZTE_OPEN_C">ZTE Open C</a></td>
+   <td>13. Mai 2014</td>
+   <td>1.3</td>
+   <td>Zur Zeit verfügbar</td>
+   <td><a href="http://www.ebay.co.uk/itm/eBay-exclusive-ZTE-OPEN-C-Latest-Firefox-OS-Dual-Core-3G-Unlocked-Smartphone-/171301269724?pt=UK_Mobile_Phones&amp;hash=item27e259f0dc">Online erhältlich</a></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/Firefox_OS/Phone_guide/Symphony_GoFox_F15">Symphony GoFox F15</a></td>
+   <td>16. September 2014</td>
+   <td>1.4</td>
+   <td>Zur Zeit verfügbar</td>
+   <td>Nur in Bangladesch erhältlich bei Grameenphone Vertriebspartnern</td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/Firefox_OS/Phone_guide/Intex_Cloud_FX">Intex Cloud Fx</a></td>
+   <td> </td>
+   <td>1.3 </td>
+   <td>Nicht mehr verfügbar</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/Firefox_OS/Phone_guide/Spice_Fire_One_MI_FX1">Spice Fire One (Mi-FX1)</a></td>
+   <td> </td>
+   <td>1.3 </td>
+   <td>Nicht mehr verfügbar</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/Firefox_OS/Phone_guide/Alcatel_Onetouch_Fire_C_4020D">Alcatel OneTouch Fire C 4020D</a></td>
+   <td>1. Oktober 2014</td>
+   <td>1.3 </td>
+   <td>Nicht mehr verfügbar</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/Firefox_OS/Phone_guide/Zen_U105_Fire">Zen U105 Fire</a></td>
+   <td>16. Oktober 2014</td>
+   <td>1.3 </td>
+   <td>Zur Zeit verfügbar</td>
+   <td>Erhältlich auf <a href="http://www.homeshop18.com/zen-fire-fox-phone-u105/mobiles/mobile-phones/product:32873765/cid:3027/">Homeshop18</a>, Indien</td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/Firefox_OS/Phone_guide/Cherry_Mobile_Ace">Cherry Mobile Ace</a></td>
+   <td>November 2014</td>
+   <td>1.3T</td>
+   <td>Zur Zeit verfügbar</td>
+   <td>Erhältlich auf den Philippinen.</td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/Firefox_OS/Phone_guide/Fx0">Fx0</a></td>
+   <td>Dezember 2014</td>
+   <td>2.0</td>
+   <td>Zur Zeit verfügbar</td>
+   <td>Erhältlich in Japan (KDDI.)</td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Phone_guide/Orange_Klif">Orange Klif</a></td>
+   <td>2015</td>
+   <td>2.0</td>
+   <td>Zur Zeit verfügbar</td>
+   <td>Erhältlich in vielen afrikanischen Ländern.</td>
+  </tr>
+  <tr>
+   <td>ZTE Open C2</td>
+   <td>2015</td>
+   <td>2.1</td>
+   <td>Zur Zeit verfügbar</td>
+   <td>Online erhältlich</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Firefox_OS_Versionen">Firefox OS Versionen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Version</th>
+   <th scope="col">
+    <p>Feature Complete (FC) Datum</p>
+   </th>
+   <th scope="col">Release To Partner<br>
+    (RTP) Datum</th>
+   <th scope="col">Codename</th>
+   <th scope="col">Gecko Version</th>
+   <th scope="col">Enthaltene Security Fixes</th>
+   <th scope="col">Release Infos</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>1.0</td>
+   <td>22. Dezember 2012</td>
+   <td>21. Februar 2013</td>
+   <td>TEF</td>
+   <td>Gecko 18</td>
+   <td>Gecko 18</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>1.0.1</td>
+   <td>15. Januar 2013</td>
+   <td>6. September 2013</td>
+   <td>Shira</td>
+   <td>Gecko 18</td>
+   <td>Gecko 20</td>
+   <td><a href="https://developer.mozilla.org/en-US/Firefox_OS/Releases/1.0.1">Entwickler</a><br>
+    <a href="https://support.mozilla.org/en-US/kb/whats-new-firefox-os-v11">Anwender</a></td>
+  </tr>
+  <tr>
+   <td>1.1</td>
+   <td>29. März 2013</td>
+   <td>9. Oktober 2013</td>
+   <td>Leo</td>
+   <td>Gecko 18+ (new <a href="http://en.wikipedia.org/wiki/Application_programming_interface" title="Application programming interface">APIs</a>)</td>
+   <td>Gecko 23</td>
+   <td><a href="https://developer.mozilla.org/en-US/Firefox_OS/Releases/1.1">Entwickler</a><br>
+    <a href="http://www.mozilla.org/en-US/firefox/os/notes/1.1/">Anwender</a></td>
+  </tr>
+  <tr>
+   <td>1.1.1</td>
+   <td> </td>
+   <td>TBD</td>
+   <td>HD</td>
+   <td>Wie 1.1.0 mit WVGA</td>
+   <td>Gecko 23</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>1.2</td>
+   <td>15. September 2013</td>
+   <td>9. Dezember 2013</td>
+   <td>Koi</td>
+   <td>Gecko 26<sup><a href="http://en.wikipedia.org/wiki/Firefox_OS#cite_note-39"><span>[</span>39<span>]</span></a></sup></td>
+   <td>Gecko 26</td>
+   <td><a href="/en-US/Firefox_OS/Releases/1.2">Entwickler</a><br>
+    <a href="http://www.mozilla.org/en-US/firefox/os/notes/1.2/">Anwender</a></td>
+  </tr>
+  <tr>
+   <td>1.3</td>
+   <td>9. December 2013</td>
+   <td>TBD</td>
+   <td> </td>
+   <td>Gecko 28</td>
+   <td>Gecko 28</td>
+   <td><a href="/en-US/Firefox_OS/Releases/1.3">Entwickler</a><br>
+    <a href="http://www.mozilla.org/en-US/firefox/os/notes/1.3/">Anwender</a></td>
+  </tr>
+  <tr>
+   <td>1.4</td>
+   <td>17. März 2014</td>
+   <td>TBD</td>
+   <td> </td>
+   <td>Gecko 30</td>
+   <td>Gecko 30</td>
+   <td><a href="/en-US/Firefox_OS/Releases/1.4">Entwickler</a><br>
+    Anwender (TBD)</td>
+  </tr>
+  <tr>
+   <td>2.0</td>
+   <td>TBD</td>
+   <td>TBD</td>
+   <td> </td>
+   <td>Gecko 32</td>
+   <td>Gecko 32</td>
+   <td><a href="/en-US/Firefox_OS/Releases/2.0">Entwickler</a><br>
+    Anwender (TBD)</td>
+  </tr>
+  <tr>
+   <td>2.1</td>
+   <td>Januar 2015?</td>
+   <td>TBD</td>
+   <td> </td>
+   <td>Gecko 34</td>
+   <td>Gecko 34</td>
+   <td><a href="https://developer.mozilla.org/en-US/Firefox_OS/Releases/2.1">Entwickler</a></td>
+  </tr>
+  <tr>
+   <td>2.2</td>
+   <td>Juni 2015</td>
+   <td>TBD</td>
+   <td> </td>
+   <td>Gecko 37</td>
+   <td>Gecko 37</td>
+   <td><a href="https://developer.mozilla.org/en-US/Firefox_OS/Releases/2.2">Entwickler</a></td>
+  </tr>
+  <tr>
+   <td>2.5</td>
+   <td>November 2015</td>
+   <td>TBD</td>
+   <td> </td>
+   <td>TBD</td>
+   <td>TBD</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Geräte-Spezifikationen">Geräte-Spezifikationen</h2>
+
+<p>Bitte beachte, dass wir in einigen Fällen bereits vor öffentlicher Verfügbarkeit eines angekündigten Gerätes dessen Code-Namen und einige seiner Eigenschaften hier veröffentlichen. Bitte FÜGE KEINE zusätzlichen Informationen zu diesen Geräten hinzu bevor Andreas Gal oder jemand vergleichbares diese Informationen veröffentlicht hat. Im Zweifelsfall wende Dich bitte an den Firefox OS Program Manager.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Name</th>
+   <th scope="col">Versionen</th>
+   <th scope="col">Auflösung</th>
+   <th scope="col">Display (Inches)</th>
+   <th scope="col">CPU</th>
+   <th scope="col">Kamera(s), Mpx</th>
+   <th scope="col">RAM</th>
+   <th scope="col">ROM</th>
+   <th scope="col">Speicher</th>
+   <th scope="col">Batterie (mAh)</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <p>Alcatel One Touch Fire</p>
+
+    <p><em>hamachi, buri</em></p>
+   </td>
+   <td>v1.0.1/v1.1</td>
+   <td>
+    <p>320 x 480<br>
+     PX=1</p>
+   </td>
+   <td>3.5</td>
+   <td>Qualcomm Snapdragon S1 MSM7227A 1 GHz</td>
+   <td>Rückseite: 3.2</td>
+   <td>256MB</td>
+   <td>512MB</td>
+   <td>/data: wahrscheinlich identisch mit inari; <a href="http://www.alcatelonetouch.com/global-en/products/smartphones/one_touch_fire.html#.Unyg5UOVt1M">laut Hersteller</a> 160MB Speicher für Anwendungen;<br>
+    Wahrscheinlich kein interner DeviceStorage, MicroSD Karte (max. 32GB) benötigt<br>
+     </td>
+   <td>1400</td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/Firefox_OS/Phone_guide/Alcatel_One_Touch_Fire_E">Alcatel One Touch Fire E</a></td>
+   <td>v1.3.0</td>
+   <td>540 x 960</td>
+   <td>4.5</td>
+   <td>Qualcomm Snapdragon 200<br>
+    MSM8210<br>
+    1.2 GHz<br>
+    dual-core</td>
+   <td>Rückseite: 5.0</td>
+   <td>512MB</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>
+    <p>ZTE Open / variants</p>
+
+    <p><em>ikura</em></p>
+   </td>
+   <td>v1.0.1 (as shipped)</td>
+   <td>320 x 480<br>
+    PX=1</td>
+   <td>3.5</td>
+   <td>Qualcomm Snapdragon S1 MSM7225A 800 MHz</td>
+   <td>Rückseite: 3.2</td>
+   <td>256MB</td>
+   <td>512MB</td>
+   <td>
+    <p>/data: 152M<br>
+     Kein interner DeviceStorage, MicroSD Karte benötigt</p>
+   </td>
+   <td>1200</td>
+  </tr>
+  <tr>
+   <td>
+    <p>LG Fireweb</p>
+
+    <p><em>leo</em></p>
+   </td>
+   <td>v1.1</td>
+   <td>320 x 480<br>
+    PX=1</td>
+   <td>4</td>
+   <td>Qualcomm  Snapdragon S1 MSM7227A 1 GHz</td>
+   <td>Rückseite: 5.0</td>
+   <td>512MB</td>
+   <td>4GB</td>
+   <td>
+    <p>/data: 1007.90M<br>
+     interner DeviceStorage: ja, Größe ungewiss, möglicherweise 3.7G, könnte aber auch eine falsche Berechnung sein. Der Wert von /sys/devices/platform/msm_sdcc.3/mmc_host/mmc0/mmc0:0001/block/mmcblk0/block ist 7733248, bei einer angenommenen Blockgröße von 512 byte kommen wir auf 3.7G.</p>
+   </td>
+   <td>1540</td>
+  </tr>
+  <tr>
+   <td>
+    <p><a href="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide/Updating_and_Tweaking_Geeksphone">Geeksphone Keon</a></p>
+
+    <p><em>keon</em></p>
+   </td>
+   <td>
+    <p>v1.0.1 - nightly<br>
+     <a href="/en-US/docs/">downloads here</a></p>
+   </td>
+   <td>320 x 480<br>
+    PX=1</td>
+   <td>3.5</td>
+   <td>Qualcomm Snapdragon S1 7225AB 1 GHz</td>
+   <td>Rückseite: 3.0</td>
+   <td>512MB</td>
+   <td>4GB</td>
+   <td>
+    <p>/data: 1.5G<br>
+     interner DeviceStorage: 1023.4M</p>
+   </td>
+   <td>1580</td>
+  </tr>
+  <tr>
+   <td>
+    <p><a href="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide/Updating_and_Tweaking_Geeksphone">Geeksphone Peak</a></p>
+
+    <p><em>peak</em></p>
+   </td>
+   <td>v1.0.1 - nightly<br>
+    <a href="/en-US/docs/">downloads here</a></td>
+   <td>540 x 960<br>
+    PX=1.5</td>
+   <td>4.3</td>
+   <td>Qualcomm Snapdragon S4 8225 1.2 GHz dual-core</td>
+   <td>
+    <p>Frontseite: 2.0<br>
+     Rückseite: 8.0</p>
+   </td>
+   <td>512MB</td>
+   <td>4GB</td>
+   <td>/data: 1.5G<br>
+    interner DeviceStorage: 1023.4M</td>
+   <td>1800</td>
+  </tr>
+  <tr>
+   <td>Geeksphone Revolution</td>
+   <td>v1.3pre (as shipped)</td>
+   <td>540 x 960 PX=1.5</td>
+   <td>4.7</td>
+   <td><span class="mini-text">Dual-core Intel® Atom™ processor Z2560<span class="mini-text"> with up to 1.6GHz</span></span></td>
+   <td>
+    <p>Frontseite: 1.3 Rückseite: 8.0</p>
+   </td>
+   <td>1GB</td>
+   <td>4GB</td>
+   <td>
+    <p>/data: 2G<br>
+     interner DeviceStorage: 2.5GB</p>
+   </td>
+   <td>2000</td>
+  </tr>
+  <tr>
+   <td>
+    <p>Nexus 4</p>
+
+    <p><em>nexus-4</em></p>
+   </td>
+   <td>v1.3 - nightly</td>
+   <td>768 x 1280<br>
+    720p</td>
+   <td>4.7</td>
+   <td>
+    <p>Qualcomm<br>
+     <span class="mw-redirect">Snapdragon S4 Pro</span><br>
+     1.5 GHz quad-core</p>
+   </td>
+   <td>Rückseite: 8.0</td>
+   <td>2GB</td>
+   <td>8 or 16GB</td>
+   <td>Hier wird alles in einem ziemlich undurchsichtigen Bereich gespeichert, es gibt keinen externen Speicher (MicroSD).  Die Größe des Bereichs variiert je nach dem, welches Nexus 4 Modell Du hast.</td>
+   <td>2100</td>
+  </tr>
+  <tr>
+   <td>
+    <p><a href="https://wiki.mozilla.org/FirefoxOS/TCP">Foxconn InFocus</a></p>
+
+    <p><em>flatfish</em></p>
+   </td>
+   <td> </td>
+   <td>1280 x 800</td>
+   <td>10</td>
+   <td>Allwinner A31, Cortex A7 Quad-Core 1.0 GHz</td>
+   <td>
+    <p>Frontseite: 2.0<br>
+     Rückseite: 5.0</p>
+   </td>
+   <td>2GB</td>
+   <td>16GB</td>
+   <td> </td>
+   <td>7000</td>
+  </tr>
+  <tr>
+   <td>
+    <p><a href="https://wiki.mozilla.org/Platform/2013-11-05">some phone thing</a></p>
+
+    <p><em>fugu</em></p>
+   </td>
+   <td>v1.2f (branch) <a href="https://groups.google.com/d/msg/mozilla.dev.b2g/JKAu9UNjBf8/9zj5Y3m6518J">per</a></td>
+   <td>320 x 480</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td>256MB</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>
+    <p><a href="https://wiki.mozilla.org/FirefoxOS/Tarako">Spreadtrum SC6821</a></p>
+
+    <p><em>tarako</em></p>
+   </td>
+   <td>v1.3 <a href="https://wiki.mozilla.org/FirefoxOS/Tarako">per</a></td>
+   <td>HVGA<br>
+    320 x 480</td>
+   <td>3.5</td>
+   <td>Spreadtrum SC6821, Cortex A5 1GHz</td>
+   <td>0.3 (nur Rückseite?)</td>
+   <td>128MB (zram)</td>
+   <td>2GB NAND flash (external) + 1GB LPDDR1 (embedded)</td>
+   <td>32GB micro SD card</td>
+   <td>1100</td>
+  </tr>
+  <tr>
+   <td>
+    <p><a href="https://hacks.mozilla.org/2014/02/open-applications-tcp/">VIA Vixen</a></p>
+
+    <p><em><a href="https://wiki.mozilla.org/Platform/2014-03-18">community-driven customization of flatfish</a>?</em></p>
+   </td>
+   <td> </td>
+   <td>1024 x 600</td>
+   <td>7</td>
+   <td>Cortex-A9 Dual Core 1.2 GHz</td>
+   <td>
+    <p>Frontseite: 0.3 Rückseite: 2.0</p>
+   </td>
+   <td>1GB</td>
+   <td>8GB</td>
+   <td> </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>
+    <p><a href="https://blog.mozilla.org/press/2014/02/developer-momentum-2/">Flame</a></p>
+
+    <p><em>Mozillas Referenz-Gerät</em></p>
+   </td>
+   <td>v1.3</td>
+   <td>
+    <p>FWVGA<br>
+     854 × 480<br>
+     PX=1.5<br>
+      </p>
+   </td>
+   <td>4.5 capacitive touch</td>
+   <td>
+    <p>Qualcomm Snapdragon 200 MSM8210, 1.2GHZ Dual core processor</p>
+   </td>
+   <td>
+    <p>Frontseite: 2.0<br>
+     Rückseite: 5.0 Auto-Fokus und Blitz<br>
+      </p>
+   </td>
+   <td>256MB–1GB (adjustable by developer)</td>
+   <td>8GB</td>
+   <td>32GB micro SD card (USB 2.0)</td>
+   <td>1800</td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/Firefox_OS/Phone_guide/ZTE_OPEN_C">ZTE Open C</a></td>
+   <td>v1.3</td>
+   <td>800 x 480</td>
+   <td>4</td>
+   <td>Qualcomm Snapdragon 200 MSM8210, 1.2GHZ Dual core processor</td>
+   <td>Rückseite: 3.0</td>
+   <td>512MB</td>
+   <td>4GB</td>
+   <td>
+    <p>/data: 1G</p>
+   </td>
+   <td>1400</td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/Firefox_OS/Phone_guide/Symphony_GoFox_F15">Symphony GoFox F15</a></td>
+   <td>v1.4</td>
+   <td>320 x 480<br>
+    PX=?</td>
+   <td>3.5</td>
+   <td>Spreadtrum 1 GHz Single Core Processor</td>
+   <td>Frontseite: 0.3<br>
+    Rückseite: 3.2 mit Blitz</td>
+   <td>512MB</td>
+   <td>512MB</td>
+   <td> </td>
+   <td>1450</td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/Firefox_OS/Phone_guide/Intex_Cloud_FX">Intex Cloud Fx</a></td>
+   <td>V 1.3</td>
+   <td>320 x 480</td>
+   <td>3.5</td>
+   <td>Spreadtrum 1 GHz</td>
+   <td>Rückseite: 2.0 ohne Blitz</td>
+   <td>128 MB</td>
+   <td>256MB</td>
+   <td>
+    <p>Data : 2G</p>
+
+    <p>Interner Speicher: 46 MB (User Memory)</p>
+
+    <p>Externer Speicher (Micro SD Card): max. 4GB</p>
+   </td>
+   <td>1250</td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/Firefox_OS/Phone_guide/Spice_Fire_One_MI_FX1">Spice Fire One (Mi-FX1)</a></td>
+   <td>V 1.3</td>
+   <td>320 x 480</td>
+   <td>3.5</td>
+   <td>Spreadtrum 1 GHz</td>
+   <td>
+    <p>Frontseite: VGA</p>
+
+    <p>Rückseite: 1.3</p>
+   </td>
+   <td>128 MB</td>
+   <td>512MB</td>
+   <td>
+    <p>Data : 2G</p>
+
+    <p>Interner Speicher: 67.9 MB (User Memory)</p>
+
+    <p>Externer Speicher (Micro SD Card): max. 4GB</p>
+   </td>
+   <td>1400</td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/Firefox_OS/Phone_guide/Alcatel_Onetouch_Fire_C_4020D">Alcatel OneTouch Fire C 4020D</a></td>
+   <td>V 1.3</td>
+   <td>320 x 480</td>
+   <td>3.5</td>
+   <td>Spreadtrum 1 GHz</td>
+   <td> </td>
+   <td>128 MB</td>
+   <td>256MB</td>
+   <td>
+    <p>Data : 2G</p>
+
+    <p>Interner Speicher : 65 MB (User Memory)</p>
+
+    <p>Externer Speicher (Micro SD Card): max. 32GB</p>
+   </td>
+   <td>1000</td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/Firefox_OS/Phone_guide/Zen_U105_Fire">Zen U105 Fire</a></td>
+   <td>V 1.3</td>
+   <td>320 x 480</td>
+   <td>3.5</td>
+   <td>Spreadtrum 1 GHz</td>
+   <td>
+    <p>Frontseite: VGA</p>
+    Rückseite: 2.0</td>
+   <td>128 MB</td>
+   <td>256MB</td>
+   <td>
+    <p>Data : 2G</p>
+
+    <p>Externer Speicher (Micro SD Card): max. 16GB</p>
+   </td>
+   <td>1200</td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/Firefox_OS/Phone_guide/Fx0">Fx0</a></td>
+   <td>V 2.0</td>
+   <td>1280 x 720</td>
+   <td>4.7</td>
+   <td>Qualcomm Snapdragon S4 MSM8926 1.2GHz quad-core</td>
+   <td>
+    <p>Frontseite: 8.0</p>
+
+    <p>Rückseite: 2.1</p>
+   </td>
+   <td>1.5 GB</td>
+   <td>16GB</td>
+   <td>microSDXC Karte: max. 64GB</td>
+   <td>2370</td>
+  </tr>
+  <tr>
+   <td>Orange Klif</td>
+   <td>V 2.0</td>
+   <td>480 x 320</td>
+   <td>3.5</td>
+   <td>MediaTek dual-core 1Ghz MT6572M</td>
+   <td>Rückseite: 2.0</td>
+   <td>256MB</td>
+   <td>512MB</td>
+   <td>TBC</td>
+   <td>1300</td>
+  </tr>
+  <tr>
+   <td>ZTE Open C 2</td>
+   <td>V 2.1</td>
+   <td>WVGA</td>
+   <td>4.0</td>
+   <td>Spreadturn  SC7715 1GB</td>
+   <td>Rückseite: 2.0</td>
+   <td>512MB</td>
+   <td>4GB</td>
+   <td>Externer Speicher (Micro SD Card): max. 32GB</td>
+   <td>1400</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Anmerkungen zu den Spalten:</p>
+
+<ul>
+ <li>Auflösung:
+  <ul>
+   <li>horizontal x vertikal</li>
+   <li>PX=1, PX=1.5, oder PX=2 ist die GAIA_DEV_PIXELS_PER_PX Einstellung, die für dieses Gerät verwendet werden sollte</li>
+  </ul>
+ </li>
+ <li>Speicher:
+  <ul>
+   <li>"/data" ist der interne Speicher. Hier wird u.a. die IndexedDB gespeichert. Jede App bekommt hier einen separaten Bereich zugewiesen. Auf diesen Speicher kann nicht über USB zugegriffen werden. Ein Zugriff über adb ist bei entsprechenden Berechtigungen möglich.</li>
+   <li>Im DeviceStorage werden die Daten des <a href="https://developer.mozilla.org/en-US/docs/WebAPI/Device_Storage">DeviceStorage API</a> gespeichert. Manche Geräte haben einen internen Speicher (ex: leo), andere wiederum haben einen externen Speicher auf einer MicroSD Karte und einige Geräte unterstützen sowohl internen als auch externen Speicher (ex: leo).  Der Zugriff auf diesen Speicher ist bei entsprechenden Berechtigungen sowohl für die Apps als auch über USB möglich.</li>
+   <li>Einige Werte in der Spalte "Speicher" wurden mit "adb shell df" ermittelt und sind deshalb nicht unbedingt schön und rund.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/de/archive/b2g_os/phone_guide/zte_open_c/index.html b/files/de/archive/b2g_os/phone_guide/zte_open_c/index.html
new file mode 100644
index 0000000000..7b74fddbf2
--- /dev/null
+++ b/files/de/archive/b2g_os/phone_guide/zte_open_c/index.html
@@ -0,0 +1,82 @@
+---
+title: ZTE OPEN C
+slug: Archive/B2G_OS/Phone_guide/ZTE_OPEN_C
+tags:
+  - Update
+  - Upgrade
+  - ZTE Open C
+  - reagiert nicht mehr
+translation_of: Archive/B2G_OS/Phone_guide/ZTE_OPEN_C
+---
+<div class="summary">
+ <p><span class="seoSummary">Das ZTE Open C Firefox OS Handy ist ein fortgeschrittenes Firefox OS Gerät von ZTE das über bessere Hardware verfügt, die unter anderem eine 3MP Kamera und einen 4-inch WVGA Display umfasst und bei dem Firefox OS 1.3 vorinstalliert ist. Dieser Artikel enthält Informationen über das Gerät, darunter Anleitungen zum Updaten und zur Fehlerbeseitigung.</span></p>
+</div>
+<div class="note">
+ <p><strong>Bitte Beachten: </strong>Diese Anleitungen sind<strong> nicht </strong>für das ZTE Open. Wenn Sie ein ZTE Open haben, sollten Sie stattdessen zu unterer <a href="/en-US/Firefox_OS/Developer_phone_guide/ZTE_OPEN">ZTE Open</a> Seite gehen.</p>
+</div>
+<div class="note">
+ <p><strong>Bitte beachten</strong>: Das Upgrade-Programm welches Sie benötigen, um das Handy zu entsprechen (s.u.) ist derzeit nur für Windows erhältlich. Kaufen Sie das Handy nicht, wenn Sie nicht über ein Windows-System verfügen und trotzdem selbst Ihre eigenen Versionen von Firefox OS installieren wollen.</p>
+</div>
+<p>Das ZTE Open C ist das erste Handy mit dem jüngsten<a href="http://blog.mozilla.org/futurereleases/2014/05/08/firefox-os-update-adds-new-features-including-dual-sim-support-and-enhancements-for-music-lovers-and-gamers"> update für Firefox OS</a>. Es bietet viele neue Funktionen, darunter den Direktzugriff auf den Musikplayer vom Sperrbildschirm oder dem Benachrichtigungsfeld aus und Bluetooth sharing, mit dem dem Sie mehrere Dateien gleichzeitig übertragen können. Nutzer können jetzt schneller durch die Menüs navigieren mithilfe von intelligenten Ordnern, die automatisch Apps oder die Suche nach Apps nach Kategorien ordnen mit verbesserter Geschwindigkeit beim Scrollen und einem schnelleren Start von Systen-Apps wie Kalender, Addressbuch und Kamera.</p>
+<h2 id="Der_Kauf_eines_Geräts">Der Kauf eines Geräts</h2>
+<p>Das Gerät kostet US$99.99, es ist bei eBay erhältlich:</p>
+<ul>
+ <li><a href="http://item.ebay.com/291125433026">ZTE eBay US store</a></li>
+ <li><a href="http://item.ebay.co.uk/171301269724">ZTE eBay UK store</a> (Kunden aus Frankreich und einiger angrenzender Länder sollten diesen Store benutzen)</li>
+ <li><a href="http://cgi.ebay.de/ws/eBayISAPI.dll?ViewItem&amp;item=131151681046&amp;ssPageName=STRK:MESE:IT">ZTE eBay DE store</a></li>
+ <li><a href="http://www.ebay.com/itm/111326263156">ZTE eBay RU and EU stores</a></li>
+</ul>
+<div class="note">
+ <p><strong>Bitte beachten</strong>: Sie erhalten das Gerät ohne dass irgendwelche Netzwerk-spezifischen Apps oder Dienste installert wären. Es handelt sich um eine entsperrte, global erhältliche Variante, die für early Adopters gedacht ist.</p>
+</div>
+<h2 id="Einzelheiten_zum_Handy">Einzelheiten zum Handy</h2>
+<p>Siehe <a href="/en-US/Firefox_OS/Developer_phone_guide/Phone_specs">Phone and device specs</a>.</p>
+<h2 id="Wie_Sie_Firefox_OS_upgraden">Wie Sie Firefox OS upgraden</h2>
+<p>Der einfachste Weg, um die Software Ihres Open C upzugraden ist es, die Dateien von der ZTE-Webseite zu verwenden. Um die richtige Datei zu finden, gehen Sie zu <a href="http://www.ztedevices.com/support/selectproduct.html?type=software">ZTE's Software support page</a>, wählen Sie Ihre Region aus der Liste auf der linken Seite, wählen Sie <em>Smart Phones</em> in der mittleren Liste und Open C(European Standard) bzw. Open C(American Standard), je nachdem, wo Sie das Gerät gekauft haben. Klicken Sie dann auf <em>Selected</em> um zu Ihrer Download-Seite zu gelangen.</p>
+<p>Sobald Ihr Download beendet ist, finden Sie ein PDF in der ZIP-Datei, das Ihnen erklärt, wie das Upgrade zu installieren ist.</p>
+<h2 id="Manuelle_Updates">"Manuelle" Updates</h2>
+<p>Wenn Sie selbst Gecko oder Gaia updaten wollen, ist der Vorgang etwas verzwickter, weil das Handy standardmäßig gesperrt ist und Sie keinen Root-Zugang haben. Um das Gerät zu entsperren, können Sie folgendes Programm von comebuy.com benutzen:<a href="http://en.comebuy.com/developer-firefox-os-open-c.html">Open_C_upgrade_Tool</a>. Durch die Installation dieses Programms wird die Fimware Ihres Geräts so verändert, dass der Root-Zugang Fastboot aktiviert werden und Sie die Möglichkeit haben, Ihr Telefon mit neuen Softwarekomponenten zu flashen.</p>
+<div class="note">
+ <p><strong>Bitte beachten</strong>: Dieses Upgrade-Programm ist derzeit nur für Windows verfügbar.</p>
+</div>
+<h3 id="Gecko_und_Gaia_upgraden">Gecko und Gaia upgraden</h3>
+<p>Sobald Sie Fastboot aktiviert haben, können Sie neue Firefox OS/B2G Gecko und Gaia Komponenten erstellen und installieren: <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS">build and install new Firefox OS/B2G</a>.</p>
+<ol>
+ <li>Beginnen Sie mit folgender Anleitung: <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites">build prerequisite</a>, wobei Sie das Open C zum Zwecke der Konfiguration wie ein Flame behandeln: Beide, Flame und Open C basieren auf dem Android Jellybean Basissystem.</li>
+ <li>Während der Konfiguration müssen Sie ein sog. "Custom Manifest File" für das Open C referenzieren. Laden Sie den Anhang zur Fehlermeldung auf folgender Seite herunter: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1016867">Download the attachment on this bug</a> und speichern Sie ihn an einem Ort auf ihrem Computer, den Sie leicht wiederfinden unter dem Dateinamen openc.xml.</li>
+ <li>Räumen Sie das B2G Verzeichnis auf und löschen Sie nicht benötigte Unterverzeichnisse:<br>
+  <pre class="brush: bash" id="comment_text_2">rm -rf objdir-gecko/ out/ backup-flame/</pre>
+ </li>
+ <li>Konfigurieren Sie jetzt Firefox OS mit dem nachfolgenden Befehl:<br>
+  <pre class="brush: bash  language-html">./config.sh flame /PATH/TO/openc.xml</pre>
+ </li>
+ <li>Sie können jetzt die Gecko Komponenten mit den nachfolgenden Befehlen bauen und auf Ihr Gerät flashen:
+  <pre class="brush: bash  language-html">./build.sh gecko
+./flash.sh gecko</pre>
+ </li>
+ <li>Jetzt sollten Sie auch Gaia upgraden, damit die upgegradete Version von Gecko mit der Gaia-Version auf Ihrem Gerät zusammenarbeietet:
+  <pre class="brush: bash  language-html">cd gaia
+make reset-gaia</pre>
+ </li>
+</ol>
+<div class="warning">
+ <p><strong>Achtung</strong>: Der Versuch, ein Image für das Flame auf Ihr Gerät zu flashen würde dieses unbrauchbar machen, weswegen hiervon abgeraten wird.</p>
+</div>
+<h3 id="Gaia_upgraden">Gaia upgraden</h3>
+<p>Wenn Sie nur ein Update von Gaia und nicht auch von Gecko durchführen wollen, müssen Sie zunächst das Gaia Repo auf Github forken und klonen und das Ergebnis auf Ihr Gerät flashen.</p>
+<ol dir="ltr">
+ <li>Stellen Sie sicher dass <a href="https://developer.mozilla.org/en-US/Firefox_OS/Debugging/Installing_ADB">ADB</a> installiert ist.</li>
+ <li>Gehen Sie zu <a href="https://github.com/mozilla-b2g/gaia">https://github.com/mozilla-b2g/gaia</a>, klicken Sie dann auf den "fork" button in der oben rechten Ecke um in Ihr eigenes Repo zu forken.</li>
+ <li>Klonen Sie den Code von ihrem geforkten Repo auf Ihren eigenen Rechner, indem Sie folgenden Befehl ausführen:
+  <pre class="brush: bash  language-html">git clone https://github.com/your-github-username/gaia.git</pre>
+ </li>
+ <li><code>Wechseln Sie in das hierdurch erstellte Verzeichnis.</code></li>
+ <li>Schalten Sie auf ihrem Gerät <a href="https://developer.mozilla.org/en-US/Firefox_OS/Debugging/Developer_settings#Debugging_via_USB">remote debugging</a> ein (wählen Sie die ADB und Devtools option).</li>
+ <li>Verbinden Sie jetzt Ihr Handy per USB mit Ihrem Computer, stellen Sie sicher, dass das Gerät erkannt wird, indem Sie den Befehl <code>adb devices</code> im terminal eingeben.</li>
+ <li>Führen Sie folgenden Befehl aus, um Ihr Handy neu zu starten und es mit dem neuesten Gaia Sourcecode upzudaten
+  <pre class="brush: bash  language-html">make reset-gaia</pre>
+ </li>
+</ol>
+<h2 id="Mein_Handy_reagiert_nicht_mehr">Mein Handy reagiert nicht mehr</h2>
+<p>Wenn Ihr Gerät nicht mehr reagiert, ist es unter Umständen möglich, es mit der unter  <a href="http://www.ztedevices.com/support/smart_phone/65229ec9-3165-424e-a7dd-3759356325fd.html">ZTE Open C user manual</a> auf der Webseite von ZTE verfügbaren Anleitung und der  Anleitung auf dieser Seite wieder zum  Leben zu erwecken.</p>
+<p>Weitere Informationen sind unter Umständen hier: <a href="https://support.mozilla.org/en-US/questions/1003136">reference this support entry</a> verfügbar.</p>
diff --git a/files/de/archive/b2g_os/platform/app_architektur/index.html b/files/de/archive/b2g_os/platform/app_architektur/index.html
new file mode 100644
index 0000000000..315efb5b4e
--- /dev/null
+++ b/files/de/archive/b2g_os/platform/app_architektur/index.html
@@ -0,0 +1,29 @@
+---
+title: Firefox OS App-Architektur
+slug: Archive/B2G_OS/Platform/App_Architektur
+tags:
+  - Anleitung
+  - Apps
+  - B2G
+  - Firefox OS
+translation_of: Archive/B2G_OS/Platform/Apps_architecture
+---
+<div class="summary">
+ <p>Dieser Artikel beschreibt die Details, wie Apps in Firefox OS gestartet und verwaltet werden. Diese Informationen sind hilfreich sowohl für Firefox OS-Plattformentwickler als auch für Gruppen, die das Betriebssystem auf neue Hardware portieren. Als App-Entwickler benötigt man diesen Artikel nicht unbedingt, aber er könnte trotzdem interessant sein.</p>
+</div>
+<h2 id="Der_App-Startprozess">Der App-Startprozess</h2>
+<p>Wenn der Nutzer eine App, die er starten möchte, auswählt oder eine App auf andere Weise gestartet werden soll, startet die  Home-Screen-App, indem sie sich eine App-Referenz von der {{domxref("App")}}-API holt  und dann die Methode {{domxref("App.launch()")}} aufruft, um die App zu starten.</p>
+<p>Gecko empfängt diese Anforderung und sendet das {{domxref("mozChromeEvent")}} mit den App-Details zur System-App. Die System-App verarbeitet dieses Ereignis, indem sie ein neues {{HTMLElement("iframe")}}-Element in den DOM-Baum einfügt und die App in dieses neue {{HTMLElement("iframe")}}-Element lädt. Dieser Rahmen ist dann die Heimat der App, bis sie beendet wird.</p>
+<p>Jede App benötigt ein Manifest, das sie beschreibt, und hat eine spezielle Dateihierarchie im Paket. Details stehen im Artikel <a href="/en-US/docs/Web/Apps/App_Manifest">App manifest</a>.</p>
+<h2 id="Kommunikation_mit_Gecko">Kommunikation mit Gecko</h2>
+<p>Die Kommunikation zwischen Gecko und Gaia's System-App passiert über {{domxref("mozChromeEvent")}} und {{domxref("mozContentEvent")}}. <code>mozChromeEvent</code>s werden von Chrome zum Inhalt und <code>mozContentEvent</code>s vom Inhalt zu Chrome gesendet. Diese Kommunikation wird benutzt, um die Erzeugung und das Schließen der vertrauten Benutzeroberfläche zu steuern und die benötigten Funktionen für Benachrichtigungen und andere Aufgaben bereitzustellen, dazu gehört auch, der System-App mitzuteilen, dass eine App gestartet werden soll.</p>
+<div class="note">
+ <p><strong>Anmerkung:</strong> Mehr dazu, wie diese Ereignisse funktionieren, findet man in der <a href="/en-US/Firefox_OS/Platform/Gaia/Gaia_apps/System">System-App-Dokumentation</a>. Eine andere Quelle, wie man die Ereignisse benutzt, findet man im Quellcode in {{source("b2g/chrome/content/shell.js")}}.</p>
+</div>
+<h2 id="See_also">See also</h2>
+<ul>
+ <li><a href="/en-US/docs/Web/Apps">Apps</a></li>
+ <li>{{domxref("App")}}</li>
+ <li><a href="/en-US/Firefox_OS/Platform/Gaia/Gaia_apps/System">System app</a></li>
+ <li><a href="/en-US/Firefox_OS/Platform/Architecture">Firefox OS architecture</a></li>
+</ul>
diff --git a/files/de/archive/b2g_os/platform/architektur/index.html b/files/de/archive/b2g_os/platform/architektur/index.html
new file mode 100644
index 0000000000..c438e89c9f
--- /dev/null
+++ b/files/de/archive/b2g_os/platform/architektur/index.html
@@ -0,0 +1,740 @@
+---
+title: Firefox OS Architektur
+slug: Archive/B2G_OS/Platform/Architektur
+translation_of: Archive/B2G_OS/Architecture
+---
+<div class="summary">
+<p><span class="seoSummary">Dieser Artikel gibt eine Übersicht über die Architektur der Firefox OS Plattform und beschreibt die grundlegenden Konzepte und wie die einzelnen Komponenten prinzipiell zusammen arbeiten.</span></p>
+</div>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Bitte denke daran, dass Firefox OS noch nicht veröffentlicht ist. Die hier beschriebene Architektur ist möglicherweise noch nicht endgültig und es können sich noch ein paar Dinge ändern.</p>
+</div>
+
+<h2 id="Firefox_OS_Begriffserklärungen">Firefox OS Begriffserklärungen</h2>
+
+<p>Einige Begriffe solltest Du kennen, bevor Du die Dokumentation von Firefox OS liest.</p>
+
+<dl>
+ <dt>B2G</dt>
+ <dd>Kurzform von "Boot to Gecko"</dd>
+ <dt>Boot to Gecko</dt>
+ <dd>Der interne Code-Name für das Firefox OS Betriebssystem. Du wirst diesen Begriff häufig als Synonym für Firefox OX finden, weil dieser Code-Name schon lange genutzt wurde bevor das Projekt einen offiziellen Namen hatte.</dd>
+ <dt>Firefox OS</dt>
+ <dd>Firefox OS stellt im Grunde das Mozilla Branding (und das von OEM Partnern) und verschiedene Support-Programme über der <strong>Boot to Gecko</strong> Ebene bereit, um aus den einzelnen Komponenten ein marktfähiges Produkt zu machen.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Gaia" title="/en-US/docs/Mozilla/Firefox_OS/Gaia">Gaia</a></dt>
+ <dd>Das ist die Benutzeroberfläche (User Interface) der Firefox OS Plattform. Alles, was nach dem Start von Firefox OS auf dem Bildschirm zu sehen ist wird von der Gaia Schicht erzeugt. Gaia implementiert den Sperrbildschirm, die Startseite und alle Apps, die man von einem modernen Smartphone erwartet. Die Gaia Schicht wurde vollständig in HTML, CSS und JavaScript geschrieben. Gaia kommuniziert mit dem darunter liegenden Betriebssystem ausschließlich über offene Web APIs, die durch Gecko bereit gestellt werden. Anwendungen von Drittanbietern können neben Gaia installiert werden.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Gecko">Gecko</a></dt>
+ <dd>Gecko ist die Laufzeitumgebung von Firefox OS. Diese Schicht stellt alles zur Verfügung, was für die drei offenen Standards HTML, CSS und JavaScript benötigt wird. Gecko stellt sicher, dass diese APIs auf jedem von Gecko unterstützten Betriebssystem gut funktionieren. Zu diesem Zweck beinhaltet Gecko unter anderem Netzwerk-, Grafik- und Layoutstacks sowie eine Virtuelle Maschine für JavaScript und Schichten für die Portierung.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Gonk">Gonk</a></dt>
+ <dd>Gonk ist eine tiefer liegende Schicht des Firefox OS Betriebsystems, bestehend aus dem Linux Kernel (basierend auf dem <a href="http://source.android.com/">Android Open Source Project</a> (AOSP)) und der Hardware-Abstraktionsschicht (hardware abstraction layer, HAL). Der Linux Kernel und einige der Anwendungs-Bibliotheken sind allgemeine Open Source Projekte: Linux, libusb, bluez und andere. Einige Pakete des HAL sind Gemeinschafts-Projekte mit AOSP: GPS, Kamera und andere. Man könnte sagen, Gonk ist eine sehr einfache Linux Distribution. Gonk ist ein <strong>Port</strong> von Gecko. Das heißt, es gibt einen Port von Gecko zu Gonk, so wie es Ports von Gecko zu Mac OS X, Windows und Android gibt. Seit das Firefox OS Projekt die alleinige Kontrolle über Gonk hat können wir Schnittstellen zu Gecko entwickeln, die auf anderen Betriebssystemen nicht möglich sind. Zum Beispiel hat Gecko auf Gonk direkten Zugriff zur gesamten Telefonie-Einheit und zum Display Frame Buffer. Auf anderen Betriebssystemen ist dies nicht möglich.</dd>
+ <dt><a name="Jank">Jank</a></dt>
+ <dd>Dieser im Bereich der mobilen Web Apps häufig genutzte Begriff bezeichnet den Effekt von langsamem und ineffizientem Code in einer App, wodurch die Aktualisierung der Benutzeroberfläche blockiert wird und diese nur noch langsam oder überhaupt nicht mehr reagiert. Unsere Gaia Entwickler nutzen verschiedene Optimierungs-Techniken, um diese Probleme unter allen Umständen zu verhindern.</dd>
+</dl>
+
+<h2 id="Overall_architecture">Overall architecture</h2>
+
+<p>The following figure compares architectures between proprietary platforms and Firefox OS.</p>
+
+<p><img alt="on the left is a native mobile architecture stack, on the right is the Firefox OS architecture. they are similarm except that the native stack is all proprietary device functionality, and the Firefox OS stack is all done with open source and web technologies." src="https://mdn.mozillademos.org/files/9487/general-architecture.png" style="display: block; height: 488px; margin: 0px auto; width: 997px;"></p>
+
+<p>Firefox OS eliminates the native API layer between the operating system and application layers. This integrated design reduces platform overhead and simplifies security without sacrificing performance or a rich user smart phone experience.</p>
+
+<ol>
+ <li><a href="https://developer.mozilla.org/en-US/Firefox_OS/Platform/Gaia">Gaia</a> is the core web apps of the device, and user interface layer, all written in HTML5, CSS and JavaScript, with a number of exposed APIs to allow the UI code to interact with the phone hardware and Gecko functionality.</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Gecko">Gecko</a> is the web engine and presentation layer in Firefox OS that connects hardware to HTML by serving as the interface between web content and the underlying device. Gecko provides an HTML5 parsing and rendering engine, programmatic access to hardware functionality via secure web APIs, a comprehensive security framework, update management, and other core services.</li>
+ <li><a href="https://developer.mozilla.org/en-US/Firefox_OS/Platform/Gonk">Gonk</a> is the kernel-level component in the Firefox OS stack that serves as the interface between Gecko and the underlying hardware. Gonk controls the underlying hardware and exposes hardware capabilities to Web APIs implemented in Gecko. Gonk can be seen as the “black box” that does all the complex, detailed work behind the scenes to control the mobile device by enacting requests at the hardware level.</li>
+ <li>The mobile device is the mobile phone hardware running Firefox OS. The OEM (Original Equipment Manifacturer) is responsible for providing the mobile device.</li>
+</ol>
+
+<h2 id="Specific_Firefox_OS_architecture">Specific Firefox OS architecture</h2>
+
+<p><img alt="Firefox OS Architecture" src="https://developer.mozilla.org/files/4605/FirefoxOS.png" style="display: block; height: 915px; margin: 0px auto; width: 754px;"></p>
+
+<h2 id="Firefox_OS_bootup_procedure">Firefox OS bootup procedure</h2>
+
+<p>This section describes the process by which Firefox OS devices boot, what parts are involved, and where. As a quick reference, the general system bootup flow goes from bootloaders in the Kernel space, to init in the native code, to B2G and then Gecko in the user space, and then finally to the system app, window manager, then homescreen app inside Gecko. This is what all other apps are executed on top of.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7491/bootup.png" style="display: block; height: 1979px; margin: 0px auto; width: 2112px;"></p>
+
+<h3 id="The_bootstrapping_process">The bootstrapping process</h3>
+
+<p>When a Firefox OS device is first turned on, execution begins in the primary bootloader. From there, the process of loading the main operating system proceeds in the typical way; a succession of increasingly higher-level bootloaders bootstrap the next loader in the chain. At the end of the process, execution is handed off to the Linux kernel.</p>
+
+<p>There are a few points worth noting about the boot process:</p>
+
+<ul>
+ <li>The bootloaders usually display the first splash screen seen by the user during device startup; this is typically a vendor logo.</li>
+ <li>The bootloaders implement flashing an image to the device. Different devices use different protocols; most phones use the <a href="http://android-dls.com/wiki/index.php?title=Fastboot" title="http://android-dls.com/wiki/index.php?title=Fastboot">fastboot protocol</a>, but the Samsung Galaxy S II uses the odin protocol.</li>
+ <li>By the end of the bootstrapping process, the modem image is usually loaded and running on the modem processor. How this happens is highly device-specific and may be proprietary.</li>
+</ul>
+
+<h3 id="The_Linux_kernel">The Linux kernel</h3>
+
+<p>The Linux kernel(s) used by Gonk is very similar to the upstream Linux from which it's derived (based on the <a href="http://source.android.com/" title="http://source.android.com/">Android Open Source Project</a>). There are a few changes made by the AOSP that have not yet been upstreamed. In addition, vendors sometimes modify the kernel and upstream those changes on their own schedule. In general, though, the Linux kernel is close to stock.</p>
+
+<p>The <a href="http://en.wikipedia.org/wiki/Linux_startup_process" title="http://en.wikipedia.org/wiki/Linux_startup_process">startup process for Linux</a> is well-documented elsewhere on the Internet, so this article won't cover that.</p>
+
+<p>The Linux Kernel will bring up devices and run essential processes. It will execute processes defined in <code>init.rc</code> and the successor <a href="https://github.com/mozilla-b2g/gonk-misc/blob/master/init.b2g.rc">init.b2g.rc</a> to boot essential process such as <code>b2g</code> (FirefoxOS basic process, containing Gecko) and <code>rild</code> (telephony related process that might proprietary by different chipsets) — see below for more details. At the end of the process, a userspace <code>init</code> process is launched, as it is in most UNIX-like operating systems.</p>
+
+<p>Once the <code>init</code> process is launched, the Linux kernel handles system calls from userspace, and interrupts and the like from hardware devices. Many hardware features are exposed to userspace through <a href="http://en.wikipedia.org/wiki/Sysfs" title="http://en.wikipedia.org/wiki/Sysfs"><code>sysfs</code></a>. For example, here's a <a href="https://github.com/cgjones/mozilla-central/blob/master/hal/gonk/GonkHal.cpp#L277" title="https://github.com/cgjones/mozilla-central/blob/master/hal/gonk/GonkHal.cpp#L277">code snippet</a> that reads the battery state in Gecko:</p>
+
+<pre class="brush:cpp; line-numbers  language-cpp"><code class="language-cpp">FILE <span class="operator token">*</span>capacityFile <span class="operator token">=</span> <span class="function token">fopen</span><span class="punctuation token">(</span><span class="string token">"/sys/class/power_supply/battery/capacity"</span><span class="punctuation token">,</span> <span class="string token">"r"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+double capacity <span class="operator token">=</span> dom<span class="punctuation token">:</span><span class="punctuation token">:</span>battery<span class="punctuation token">:</span><span class="punctuation token">:</span>kDefaultLevel <span class="operator token">*</span> <span class="number token">100</span><span class="punctuation token">;</span>
+<span class="keyword token">if</span> <span class="punctuation token">(</span>capacityFile<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="function token">fscanf</span><span class="punctuation token">(</span>capacityFile<span class="punctuation token">,</span> <span class="string token">"%lf"</span><span class="punctuation token">,</span> <span class="operator token">&amp;</span>capacity<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="function token">fclose</span><span class="punctuation token">(</span>capacityFile<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="More_on_the_init_process">More on the init process</h3>
+
+<p>The <code>init</code> process in Gonk handles mounting the required file systems and spawns system services. After that, it stays around to serve as a process manager. This is quite similar to init on other UNIX-like operating systems. It interprets scripts (that is, the <code>init*.rc</code> files) that consist of commands describing what should be done to start various services. The Firefox OS <code>init.rc</code> is typically the stock Android <code>init.rc</code> for that device patched to include the things required to kick-start Firefox OS, and varies from device to device.</p>
+
+<p>One key task the <code>init</code> process handles is starting up the <code>b2g</code> process; this is the core of the Firefox OS operating system.</p>
+
+<p>The code in <code>init.rc</code> that starts this up looks like this:</p>
+
+<pre class="line-numbers  language-html"><code class="language-html">service b2g /system/bin/b2g.sh
+  class main
+  onrestart restart media</code></pre>
+
+<div class="note">
+<p><strong>Note:</strong> Exactly how much <code>init.rc</code> differs from the Android version varies from device to device; sometimes, <code>init.b2g.rc</code> is simply appended, and sometimes the patches are more significant.</p>
+</div>
+
+<h2 id="The_userspace_process_architecture">The userspace process architecture</h2>
+
+<p>Now it's useful to take a high-level look at how the various components of Firefox OS fit together and interact with one another. This diagram shows the primary userspace processes in Firefox OS.</p>
+
+<p><a href="https://developer.mozilla.org/files/3849/B2G%20userspace%20architecture.svg"><img alt="Userspace diagram" src="https://developer.mozilla.org/files/3849/B2G%20userspace%20architecture.svg" style="float: right; height: 491px; position: relative; width: 520px;"></a></p>
+
+<div class="note">
+<p><strong>Note:</strong> Keep in mind that since Firefox OS is under active development, this diagram is subject to change, and may not be entirely accurate.</p>
+</div>
+
+<p>The <code>b2g</code> process is the primary system process. It runs with high privileges; it has access to most hardware devices. <code>b2g</code> communicates with the modem, draws to the display framebuffer, and talks to GPS, cameras, and other hardware features. Internally, <code>b2g</code> runs the Gecko layer (implemented by <code>libxul.so</code>). See <a href="#Gecko">Gecko</a> for details on how the Gecko layer works, and how <code>b2g</code> communicates with it.</p>
+
+<h3 id="b2g">b2g</h3>
+
+<p>The <code>b2g</code> process may, in turn, spawn a number of low-rights <strong>content processes</strong>. These processes are where web applications and other web content are loaded. These processes communicate with the main Gecko server process through <a href="https://developer.mozilla.org/en-US/docs/IPDL" title="/en-US/docs/IPDL">IPDL</a>, a message-passing system.</p>
+
+<p>The <code>b2g</code> process runs libxul, which references <code>b2g/app/b2g.js</code> to get default preferences. From the preferences it will open the described HTML file <code>b2g/chrome/content/shell.html</code>, which is compiled within the <code>omni.ja</code> file. <code>shell.html</code> includes <code>b2g/chrome/content/shell.js</code> file, which triggers the Gaia <code>system</code> app.</p>
+
+<h3 id="rild">rild</h3>
+
+<p>The <code>rild</code> process is the interface to the modem processor. <code>rild</code> is the daemon that implements the <strong>Radio Interface Layer</strong> (RIL). It's a proprietary piece of code that's implemented by the hardware vendor to talk to their modem hardware. <code>rild</code> makes it possible for client code to connect to a UNIX-domain socket to which it binds. It's started up by code like this in the <code>init</code> script:</p>
+
+<pre class="line-numbers  language-html"><code class="language-html">service ril-daemon /system/bin/rild
+  socket rild stream 660 root radio</code></pre>
+
+<h3 id="rilproxy">rilproxy</h3>
+
+<p>In Firefox OS, the <code>rild</code> client is the <code>rilproxy</code> process. This acts as a dumb forwarding proxy between <code>rild</code> and <code>b2g</code>. This proxy is needed as an implementation detail; suffice it to say, it is indeed necessary. The <a href="https://github.com/mozilla-b2g/rilproxy" title="https://github.com/mozilla-b2g/rilproxy"><code>rilproxy</code> code can be found on GitHub</a>.</p>
+
+<h3 id="mediaserver">mediaserver</h3>
+
+<p>The <a href="https://github.com/android/platform_frameworks_base/tree/ics-mr0-release/media/libmediaplayerservice" title="https://github.com/android/platform_frameworks_base/tree/ics-mr0-release/media/libmediaplayerservice"><code>mediaserver</code> process</a> controls audio and video playback. Gecko talks to it through an Android Remote Procedure Call (RPC) mechanism. Some of the media that Gecko can play (OGG Vorbis audio, OGG Theora video, and <a href="http://www.webmproject.org/about/" title="http://www.webmproject.org/about/">WebM</a> video) are decoded by Gecko and sent directly to the <code>mediaserver</code> process. Other media files are decoded by <code>libstagefright</code>, which is capable of accessing proprietary codecs and hardware encoders.</p>
+
+<div class="note">
+<p><strong>Note:</strong> The <code>mediaserver</code> process is a "temporary" component of Firefox OS; it's there to aid in our initial development work, but is expected to go away eventually. This will most likely not happen until Firefox OS 2.0 at the earliest, however.</p>
+</div>
+
+<h3 id="netd">netd</h3>
+
+<p>The <code>netd</code> process is used to configure network interfaces.</p>
+
+<h3 id="wpa_supplicant">wpa_supplicant</h3>
+
+<p>The <code>wpa_supplicant</code> process is the standard UNIX-style daemon that handles connectivity with WiFi access points.</p>
+
+<h3 id="dbus-daemon">dbus-daemon</h3>
+
+<p>The dbus-daemon implements <a href="http://www.freedesktop.org/wiki/Software/dbus" title="http://www.freedesktop.org/wiki/Software/dbus">D-Bus</a>, a message bus system that Firefox OS uses for Bluetooth communication.</p>
+
+<h2 id="Gecko">Gecko</h2>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Gecko" title="/en-US/docs/Gecko">Gecko</a>, as previously mentioned, is the implementation of web standards (<a href="https://developer.mozilla.org/en-US/docs/HTML" title="/en-US/docs/HTML">HTML</a>, <a href="https://developer.mozilla.org/en-US/docs/CSS" title="/en-US/docs/CSS">CSS</a>, and <a href="https://developer.mozilla.org/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a>) that is used to implement everything the user sees on Firefox OS, and control interactions with the phone hardware. Web apps connect HTML5 to hardware via controlled, secure Web APIs, implemented in Gecko. The Web APIs provide programmatic access to features in the underlying mobile device hardware (such as the battery or vibration), along with data that is stored on, or available to, a device (such as the calendar or contacts). Web content invokes the accessible Web APIs within HTML5.</p>
+
+<p>An app consists of a collection of related HTML5 web content. To build web apps that run on Firefox OS mobile devices, developers simply assemble, package, and distribute this web content. At run time, this web content is interpreted, compiled, and rendered in a web browser. For more information on Apps, see the <a href="https://developer.mozilla.org/en-US/Apps">App Center</a>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: To search the Gecko codebase, you could use <a href="http://dxr.mozilla.org">http://dxr.mozilla.org</a>. It’s more fancy and provides good reference features, but with limited repositories. Or you could try the traditional <a href="http://mxr.mozilla.org">http://mxr.mozilla.org</a>, which contains more Mozilla projects.</p>
+</div>
+
+<h3 id="Gecko_architecture_diagram">Gecko architecture diagram</h3>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5027/securityframework.png" style="height: 591px; width: 979px;"></p>
+
+<ul>
+ <li><strong>Security Framework</strong>: contains
+
+  <ul>
+   <li><strong>Permission Manager</strong>: Gateway to accessing functionality in the Web API.</li>
+   <li><strong>Access Control List</strong>: Matrix of roles and permissions required to access Web API functionality.</li>
+   <li><strong>Credential Validation</strong>: Authentication of apps/users.</li>
+   <li><strong>Permissions Store</strong>: Set of privileges required to access Web API functionality.</li>
+  </ul>
+ </li>
+ <li><strong>Web API</strong>: Set of standard APIs that exposes hardware functionality to web content. Provides web apps with secure, programmatic access to features in the underlying mobile device hardware, along with data that is stored on—or available to—a device.</li>
+ <li><strong>I/O</strong>: Interface to the hardware and data store(s).</li>
+ <li><strong>Software Updates</strong>: Obtain and install updates to system software and third-party apps.</li>
+ <li><strong>Content Layout &amp; Rendering</strong>: Engine that parses, interprets, and executes web content and, with formatting information, displays the formatted content to the user.</li>
+ <li><strong>b2g process</strong>: (Gecko) runs in a highly-privileged system process that has access to hardware features in the mobile phone. Running apps are child processes of b2g.</li>
+</ul>
+
+<h3 id="Gecko_files_related_to_Firefox_OS">Gecko files related to Firefox OS</h3>
+
+<h4 id="b2g_2">b2g/</h4>
+
+<p>The b2g folder contains mainly Firefox OS-related functions.</p>
+
+<h5 id="b2gchromecontent">b2g/chrome/content</h5>
+
+<p>Contains Javascript files run above the system app.</p>
+
+<h5 id="b2gchromecontentshell.html">b2g/chrome/content/shell.html</h5>
+
+<p>The entry point into Gaia — the HTML for the system app. <code>shell.html</code> pulls in <code>settings.js</code> and <code>shell.js</code>:</p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>application/javascript;version<span class="punctuation token">=</span>1.8<span class="punctuation token">"</span></span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>chrome://browser/content/settings.js<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token"> </span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>application/javascript;version<span class="punctuation token">=</span>1.8<span class="punctuation token">"</span></span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>chrome://browser/content/shell.js<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token"> </span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p><code>settings.js</code> contains system default setting parameters.</p>
+
+<h5 id="b2gchromecontentshell.js">b2g/chrome/content/shell.js</h5>
+
+<p><code>shell.js</code> is the first script to load in the Gaia <code>system</code> app.</p>
+
+<p><code>shell.js</code> imports all required modules, registers key listeners, defines <code>sendCustomEvent</code> and <code>sendChromeEvent</code> to communicate with Gaia, and provides webapp install helpers: indexedDB quota, RemoteDebugger, keyboard helper, and screenshot tool.</p>
+
+<p>But the most important function of <code>shell.js</code> is to launch the Gaia <code>system</code> app, then hand over the overall systems related management work to the Gaia <code>system</code> app.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">let</span> systemAppFrame <span class="operator token">=</span>
+  document<span class="punctuation token">.</span><span class="function token">createElementNS</span><span class="punctuation token">(</span><span class="string token">'http://www.w3.org/1999/xhtml'</span><span class="punctuation token">,</span> <span class="string token">'html:iframe'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">.</span>
+  container<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>systemAppFrame<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h5 id="b2gappb2g.js">b2g/app/b2g.js</h5>
+
+<p>This script contains predefined settings, like about:config in browser, and the same as Gaia's pref.js. These settings can be changed from the Settings app, and can be overwritten with Gaia’s user.js in the Gaia build script.</p>
+
+<h4 id="domAPI">dom/{API}</h4>
+
+<p>New API implementations (post-b2g) will be located in <code>dom/</code>. Older APIs will be located in <code>dom/base</code>, for example <code>Navigator.cpp</code>.</p>
+
+<h5 id="domapps">dom/apps</h5>
+
+<p><code>.jsm</code> will be loaded — <code>.js</code> API implementations such as <code>webapp.js</code> install, <code>getSelf</code>, etc.</p>
+
+<h5 id="domappsPermissionsTable.jsm">dom/apps/PermissionsTable.jsm</h5>
+
+<p>All permissions are defined in <a href="http://mxr.mozilla.org/mozilla-central/source/dom/apps/PermissionsTable.jsm">PermissionsTable.jsm</a></p>
+
+<h4 id="domwebidl">dom/webidl</h4>
+
+<p>WebIDL is the language used to define web APIs. For supported attributes, read <a href="https://developer.mozilla.org/en-US/docs/Mozilla/WebIDL_bindings">WebIDL_bindings</a>.</p>
+
+<h4 id="halgonk">hal/gonk</h4>
+
+<p>This directory contains files related to the gonk port layer.</p>
+
+<h4 id="Generated_files">Generated files</h4>
+
+<h5 id="modulelibprefsrcinitall.js">module/libpref/src/init/all.js</h5>
+
+<p>Contains all config files.</p>
+
+<h5 id="systemb2g_omni.ja_and_omni.js">/system/b2g/ omni.ja and omni.js</h5>
+
+<p>Contains the pack of styles for resources in the device.</p>
+
+<h3 id="Processing_input_events">Processing input events</h3>
+
+<p>Most action inside Gecko is triggered by user actions. These actions are represented by input events (such as button presses, touches to a touch screen device, and so forth). These events enter Gecko through the <a href="https://dxr.mozilla.org/mozilla-central/source/widget/gonk/nsAppShell.cpp" rel="custom">Gonk implementation</a> of <code><a href="/de/docs/XPCOM_Interface_Referenz/nsIAppShell" title="">nsIAppShell</a></code>, a Gecko interface that is used to represent the primary entrance points for a Gecko application; that is, the input device driver calls methods on the <code>nsAppShell</code> object that represents the Gecko subsystem in order to send events to the user interface.</p>
+
+<p>For example:</p>
+
+<pre class="brush:cpp; line-numbers  language-cpp"><code class="language-cpp">void GeckoInputDispatcher<span class="punctuation token">:</span><span class="punctuation token">:</span><span class="function token">notifyKey</span><span class="punctuation token">(</span>nsecs_t eventTime<span class="punctuation token">,</span>
+                                     int32_t deviceId<span class="punctuation token">,</span>
+                                     int32_t source<span class="punctuation token">,</span>
+                                     uint32_t policyFlags<span class="punctuation token">,</span>
+                                     int32_t action<span class="punctuation token">,</span>
+                                     int32_t flags<span class="punctuation token">,</span>
+                                     int32_t keyCode<span class="punctuation token">,</span>
+                                     int32_t scanCode<span class="punctuation token">,</span>
+                                     int32_t metaState<span class="punctuation token">,</span>
+                                     nsecs_t downTime<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  UserInputData data<span class="punctuation token">;</span>
+  data<span class="punctuation token">.</span>timeMs <span class="operator token">=</span> <span class="function token">nanosecsToMillisecs</span><span class="punctuation token">(</span>eventTime<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  data<span class="punctuation token">.</span>type <span class="operator token">=</span> UserInputData<span class="punctuation token">:</span><span class="punctuation token">:</span>KEY_DATA<span class="punctuation token">;</span>
+  data<span class="punctuation token">.</span>action <span class="operator token">=</span> action<span class="punctuation token">;</span>
+  data<span class="punctuation token">.</span>flags <span class="operator token">=</span> flags<span class="punctuation token">;</span>
+  data<span class="punctuation token">.</span>metaState <span class="operator token">=</span> metaState<span class="punctuation token">;</span>
+  data<span class="punctuation token">.</span>key<span class="punctuation token">.</span>keyCode <span class="operator token">=</span> keyCode<span class="punctuation token">;</span>
+  data<span class="punctuation token">.</span>key<span class="punctuation token">.</span>scanCode <span class="operator token">=</span> scanCode<span class="punctuation token">;</span>
+  <span class="punctuation token">{</span>
+    MutexAutoLock <span class="function token">lock</span><span class="punctuation token">(</span>mQueueLock<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    mEventQueue<span class="punctuation token">.</span><span class="function token">push</span><span class="punctuation token">(</span>data<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  gAppShell<span class="operator token">-</span><span class="operator token">&gt;</span><span class="function token">NotifyNativeEvent</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>These events come from the standard Linux <code>input_event</code> system. Firefox OS uses a <a href="https://dxr.mozilla.org/mozilla-central/source/widget/gonk/libui/InputReader.cpp" rel="custom">light abstraction layer</a> over that; this provides some nice features like event filtering. You can see the code that creates input events in the <code>EventHub::getEvents()</code> method in <a href="https://dxr.mozilla.org/mozilla-central/source/widget/gonk/libui/EventHub.cpp" rel="custom">widget/gonk/libui/EventHub.cpp</a>.</p>
+
+<p>Once the events are received by Gecko, they're dispatched into the DOM by <code><a href="https://dxr.mozilla.org/mozilla-central/source/widget/gonk/nsAppShell.cpp" rel="custom">nsAppShell</a></code>:</p>
+
+<pre class="brush:cpp; line-numbers  language-cpp"><code class="language-cpp">static nsEventStatus <span class="function token">sendKeyEventWithMsg</span><span class="punctuation token">(</span>uint32_t keyCode<span class="punctuation token">,</span>
+                                         uint32_t msg<span class="punctuation token">,</span>
+                                         uint64_t timeMs<span class="punctuation token">,</span>
+                                         uint32_t flags<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    nsKeyEvent <span class="function token">event</span><span class="punctuation token">(</span><span class="boolean token">true</span><span class="punctuation token">,</span> msg<span class="punctuation token">,</span> NULL<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    event<span class="punctuation token">.</span>keyCode <span class="operator token">=</span> keyCode<span class="punctuation token">;</span>
+    event<span class="punctuation token">.</span>location <span class="operator token">=</span> nsIDOMKeyEvent<span class="punctuation token">:</span><span class="punctuation token">:</span>DOM_KEY_LOCATION_MOBILE<span class="punctuation token">;</span>
+    event<span class="punctuation token">.</span>time <span class="operator token">=</span> timeMs<span class="punctuation token">;</span>
+    event<span class="punctuation token">.</span>flags <span class="operator token">|</span><span class="operator token">=</span> flags<span class="punctuation token">;</span>
+    <span class="keyword token">return</span> nsWindow<span class="punctuation token">:</span><span class="punctuation token">:</span><span class="function token">DispatchInputEvent</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>After that, the events are either consumed by Gecko itself or are dispatched to Web applications as <a href="https://developer.mozilla.org/en-US/docs/DOM_Client_Object_Cross-Reference/DOM_Events" title="/en-US/docs/DOM_Client_Object_Cross-Reference/DOM_Events">DOM events</a> for further processing.</p>
+
+<h3 id="Graphics">Graphics</h3>
+
+<p>At the very lowest level, Gecko uses <a href="http://www.khronos.org/opengles/2_X/" title="http://www.khronos.org/opengles/2_X/">OpenGL ES 2.0</a> to draw to a GL context that wraps the hardware frame buffers. This is done in the Gonk implementation of <code><a href="https://dxr.mozilla.org/mozilla-central/source/widget/gonk/nsWindow.cpp" rel="custom">nsWindow</a></code> by code similar to this:</p>
+
+<pre class="brush:cpp; line-numbers  language-cpp"><code class="language-cpp">gNativeWindow <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">android</span><span class="punctuation token">:</span><span class="punctuation token">:</span><span class="function token">FramebufferNativeWindow</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+sGLContext <span class="operator token">=</span> GLContextProvider<span class="punctuation token">:</span><span class="punctuation token">:</span><span class="function token">CreateForWindow</span><span class="punctuation token">(</span>this<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>The <code>FramebufferNativeWindow</code> class is brought in directly from Android; see <a href="https://github.com/android/platform_frameworks_base/blob/ics-mr1-release/libs/ui/FramebufferNativeWindow.cpp" title="https://github.com/android/platform_frameworks_base/blob/ics-mr1-release/libs/ui/FramebufferNativeWindow.cpp"><code>FramebufferNativeWindow.cpp</code></a>. This uses the <strong>gralloc</strong> API to access the graphics driver in order to map buffers from the framebuffer device into memory.</p>
+
+<p>Gecko uses its <a href="https://developer.mozilla.org/en-US/docs/Gecko/Layers" title="/en-US/docs/Gecko/Layers">Layers</a> system to composite drawn content to the screen. In summary, what happens is this:</p>
+
+<ol>
+ <li>Gecko draws separate regions of pages into memory buffers. Sometimes these buffers are in system memory; other times, they're textures mapped into Gecko's address space, which means that Gecko is drawing directly into video memory. This is typically done in the method <a href="http://mxr.mozilla.org/mozilla-central/source/gfx/layers/basic/BasicThebesLayer.cpp#83" title="http://mxr.mozilla.org/mozilla-central/source/gfx/layers/basic/BasicThebesLayer.cpp#201"><code>BasicThebesLayer::PaintThebes()</code></a>.</li>
+ <li>Gecko then composites all of these textures to the screen using OpenGL commands. This composition occurs in <a href="http://mxr.mozilla.org/mozilla-central/source/gfx/layers/opengl/ThebesLayerOGL.cpp#124" title="http://mxr.mozilla.org/mozilla-central/source/gfx/layers/basic/BasicThebesLayer.cpp#201"><code>ThebesLayerOGL::RenderTo()</code></a>.</li>
+</ol>
+
+<p>The details of how Gecko handles the rendering of web content is outside the scope of this document.</p>
+
+<h3 id="Hardware_Abstraction_Layer_(HAL)">Hardware Abstraction Layer (HAL)</h3>
+
+<p>The Gecko hardware abstraction layer is one of the porting layers of Gecko. It handles low-level access to system interfaces across multiple platforms using a C++ API that's accessible to the higher levels of Gecko. These APIs are implemented on a per-platform basis inside the Gecko HAL itself. This hardware abstraction layer is not exposed directly to JavaScript code in Gecko — this part of the interaction is handled by the Web APIs.</p>
+
+<p>Let's look at the process form a high level. When a user makes a request to use a phone feature (such as dialing a number, accessing a local wifi network, or connecting via Bluetooth), all layers in the Firefox OS technology stack are involved in carrying out the request. Apps and web content in the Gaia layer submits requests to access the underlying device via Web API calls (invoked from within HTML5 functions), which are implemented in Gecko. Gecko in turn submits the request to Gonk. A single request from Gecko can trigger a complex series of operations, initiated and managed by Gonk, in the mobile phone.</p>
+
+<h4 id="How_the_HAL_works">How the HAL works</h4>
+
+<p>Let's consider the <a href="/de/docs/Web/API/Window/navigator/vibrate" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben; bitte erwäge, mitzuwirken!"><code>Vibration</code></a> API as an example. The Gecko HAL for this API is defined in <a href="https://dxr.mozilla.org/mozilla-central/source/hal/Hal.h" rel="custom">hal/Hal.h</a>. In essence (simplifying the method signature for clarity's sake), you have this function:</p>
+
+<pre class="line-numbers  language-html"><code class="language-html">void Vibrate(const nsTArray<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>uint32</span><span class="punctuation token">&gt;</span></span> &amp;pattern);</code></pre>
+
+<p>This is the function called by Gecko code to turn on vibration of the device according to the specified pattern; a corresponding function exists to cancel any ongoing vibration. The Gonk implementation of this method is in <a href="https://dxr.mozilla.org/mozilla-central/source/hal/gonk/GonkHal.cpp" rel="custom">hal/gonk/GonkHal.cpp</a>:</p>
+
+<pre class="brush:cpp; line-numbers  language-cpp"><code class="language-cpp">void <span class="function token">Vibrate</span><span class="punctuation token">(</span>const nsTArray<span class="operator token">&lt;</span>uint32_t<span class="operator token">&gt;</span> <span class="operator token">&amp;</span>pattern<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="function token">EnsureVibratorThreadInitialized</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  sVibratorRunnable<span class="operator token">-</span><span class="operator token">&gt;</span><span class="function token">Vibrate</span><span class="punctuation token">(</span>pattern<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>This code sends the request to start vibrating the device to another thread, which is implemented in <code>VibratorRunnable::Run()</code>. This thread's main loop looks like this:</p>
+
+<pre class="brush:cpp; line-numbers  language-cpp"><code class="language-cpp"><span class="keyword token">while</span> <span class="punctuation token">(</span><span class="operator token">!</span>mShuttingDown<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>mIndex <span class="operator token">&lt;</span> mPattern<span class="punctuation token">.</span><span class="function token">Length</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    uint32_t duration <span class="operator token">=</span> mPattern<span class="punctuation token">[</span>mIndex<span class="punctuation token">]</span><span class="punctuation token">;</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span>mIndex <span class="operator token">%</span> <span class="number token">2</span> <span class="operator token">==</span> <span class="number token">0</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="function token">vibrator_on</span><span class="punctuation token">(</span>duration<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+    mIndex<span class="operator token">++</span><span class="punctuation token">;</span>
+    mMonitor<span class="punctuation token">.</span><span class="function token">Wait</span><span class="punctuation token">(</span><span class="function token">PR_MillisecondsToInterval</span><span class="punctuation token">(</span>duration<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="keyword token">else</span> <span class="punctuation token">{</span>
+    mMonitor<span class="punctuation token">.</span><span class="function token">Wait</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p><code>vibrator_on()</code> is the Gonk HAL API that turns on the vibrator motor. Internally, this method sends a message to the kernel driver by writing a value to a kernel object using <code>sysfs</code>.</p>
+
+<h4 id="Fallback_HAL_API_implementations">Fallback HAL API implementations</h4>
+
+<p>The Gecko HAL APIs are supported across all platforms. When Gecko is built for a platform that doesn't expose an interface to vibration motors (such as a desktop computer), then a fallback implementation of the HAL API is used. For vibration, this is implemented in <a href="https://dxr.mozilla.org/mozilla-central/source/hal/fallback/FallbackVibration.cpp" rel="custom">hal/fallback/FallbackVibration.cpp</a>.</p>
+
+<pre class="brush:cpp; line-numbers  language-cpp"><code class="language-cpp">void <span class="function token">Vibrate</span><span class="punctuation token">(</span>const nsTArray<span class="operator token">&lt;</span>uint32_t<span class="operator token">&gt;</span> <span class="operator token">&amp;</span>pattern<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h4 id="Sandbox_implementations">Sandbox implementations</h4>
+
+<p>Because most web content runs in content processes with low privileges, we can't assume those processes have the privileges needed to be able to (for example), turn on and off the vibration motor. In addition, we want to have a central location for handling potential race conditions. In the Gecko HAL, this is done through a "sandbox" implementation of the HAL. This sandbox implementation simply proxies requests made by content processes and forwards them to the "Gecko server" process. The proxy requests are sent using IPDL.</p>
+
+<p>For vibration, this is handled by the <code>Vibrate()</code> function implemented in <a href="https://dxr.mozilla.org/mozilla-central/source/hal/sandbox/SandboxHal.cpp" rel="custom">hal/sandbox/SandboxHal.cpp</a>:</p>
+
+<pre class="brush:cpp; line-numbers  language-cpp"><code class="language-cpp">void <span class="function token">Vibrate</span><span class="punctuation token">(</span>const nsTArray<span class="operator token">&lt;</span>uint32_t<span class="operator token">&gt;</span><span class="operator token">&amp;</span> pattern<span class="punctuation token">,</span> const WindowIdentifier <span class="operator token">&amp;</span>id<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  AutoInfallibleTArray<span class="operator token">&lt;</span>uint32_t<span class="punctuation token">,</span> <span class="number token">8</span><span class="operator token">&gt;</span> <span class="function token">p</span><span class="punctuation token">(</span>pattern<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  WindowIdentifier <span class="function token">newID</span><span class="punctuation token">(</span>id<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  newID<span class="punctuation token">.</span><span class="function token">AppendProcessID</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="function token">Hal</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="operator token">-</span><span class="operator token">&gt;</span><span class="function token">SendVibrate</span><span class="punctuation token">(</span>p<span class="punctuation token">,</span> newID<span class="punctuation token">.</span><span class="function token">AsArray</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span> <span class="function token">GetTabChildFrom</span><span class="punctuation token">(</span>newID<span class="punctuation token">.</span><span class="function token">GetWindow</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>This sends a message defined by the <code>PHal</code> interface, described by IPDL in <a href="https://dxr.mozilla.org/mozilla-central/source/hal/sandbox/PHal.ipdl" rel="custom">hal/sandbox/PHal.ipdl</a>. This method is described more or less as follows:</p>
+
+<pre class="line-numbers  language-html"><code class="language-html">Vibrate(uint32_t[] pattern);</code></pre>
+
+<p>The receiver of this message is the <code>HalParent::RecvVibrate()</code> method in <a href="https://dxr.mozilla.org/mozilla-central/source/hal/sandbox/SandboxHal.cpp" rel="custom">hal/sandbox/SandboxHal.cpp</a>, which looks like this:</p>
+
+<pre class="brush:cpp; line-numbers  language-cpp"><code class="language-cpp">virtual bool <span class="function token">RecvVibrate</span><span class="punctuation token">(</span>const InfallibleTArray<span class="operator token">&lt;</span>unsigned int<span class="operator token">&gt;</span><span class="operator token">&amp;</span> pattern<span class="punctuation token">,</span>
+            const InfallibleTArray<span class="operator token">&lt;</span>uint64_t<span class="operator token">&gt;</span> <span class="operator token">&amp;</span>id<span class="punctuation token">,</span>
+            PBrowserParent <span class="operator token">*</span>browserParent<span class="punctuation token">)</span> MOZ_OVERRIDE <span class="punctuation token">{</span>
+
+  hal<span class="punctuation token">:</span><span class="punctuation token">:</span><span class="function token">Vibrate</span><span class="punctuation token">(</span>pattern<span class="punctuation token">,</span> newID<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">return</span> <span class="boolean token">true</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>This omits some details that aren't relevant to this discussion; however, it shows how the message progresses from a content process through Gecko to Gonk, then to the Gonk HAL implementation of <code>Vibrate()</code>, and eventually to the Vibration driver.</p>
+
+<h3 id="DOM_APIs">DOM APIs</h3>
+
+<p><strong>DOM interfaces</strong> are, in essence, how web content communicates with Gecko. There's more involved than that, and if you're interested in added details, you can read <a href="https://developer.mozilla.org/en-US/docs/DOM/About_the_Document_Object_Model" title="/en-US/docs/DOM/About_the_Document_Object_Model">about the DOM</a>. DOM interfaces are defined using <a href="https://developer.mozilla.org/en-US/docs/XPIDL" title="/en-US/docs/XPIDL">IDL</a>, which comprises both a foreign function interface (FFI) and object model (OM) between JavaScript and C++.</p>
+
+<p>The vibration API is exposed to web content through an IDL interface, which is provided in <code><a href="https://dxr.mozilla.org/mozilla-central/source/dom/interfaces/base/nsIDOMNavigator.idl" rel="custom">nsIDOMNavigator.idl</a>:</code></p>
+
+<pre class="line-numbers  language-html"><code class="language-html">[implicit_jscontext] void mozVibrate(in jsval aPattern);</code></pre>
+
+<p>The <a href="https://developer.mozilla.org/en-US/docs/SpiderMonkey/JSAPI_Reference/Jsval" title="/en-US/docs/SpiderMonkey/JSAPI_Reference/JSVAL_IS_OBJECT"><code>jsval</code></a> argument indicates that <code>mozVibrate()</code> (which is our vendor-prefixed implementation of this non-finalized vibration specification) accepts as input any JavaScript value. The IDL compiler, <a href="https://developer.mozilla.org/en-US/docs/XPIDL/xpidl" title="/en-US/docs/XPIDL/xpidl"><code>xpidl</code></a>, generates a C++ interface that's then implemented by the <code>Navigator</code> class in <code><a href="https://dxr.mozilla.org/mozilla-central/source/dom/base/Navigator.cpp" rel="custom">Navigator.cpp</a></code>.</p>
+
+<pre class="brush:cpp; line-numbers  language-cpp"><code class="language-cpp">NS_IMETHODIMP Navigator<span class="punctuation token">:</span><span class="punctuation token">:</span><span class="function token">MozVibrate</span><span class="punctuation token">(</span>const jsval<span class="operator token">&amp;</span> aPattern<span class="punctuation token">,</span> JSContext<span class="operator token">*</span> cx<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="comment token">// ...</span>
+  hal<span class="punctuation token">:</span><span class="punctuation token">:</span><span class="function token">Vibrate</span><span class="punctuation token">(</span>pattern<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">return</span> NS_OK<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>There's a lot more code in this method than what you see here, but it's not important for the purposes of this discussion. The point is that the call to <code>hal::Vibrate()</code> transfers control from the DOM to the Gecko HAL. From there, we enter the HAL implementation discussed in the previous section and work our way down toward the driver. On top of that, the DOM implementation doesn't care at all what platform it's running on (Gonk, Windows, OS X, or anything else). It also doesn't care whether the code is running in a content process or in the Gecko server process. Those details are all left to lower levels of the system to deal with.</p>
+
+<p>The vibration API is a very simple API, which makes it a good example. The <a href="https://developer.mozilla.org/en-US/docs/API/WebSMS" title="/en-US/docs/API/WebSMS">SMS API</a> is an example of a more complex API which uses its own "remoting" layer connecting content processes to the server.</p>
+
+<h2 id="Radio_Interface_Layer_(RIL)">Radio Interface Layer (RIL)</h2>
+
+<p>The RIL was mentioned in the section <a href="#The_userspace_process_architecture">The userspace process architecture</a>. This section will examine how the various pieces of this layer interact in a bit more detail.</p>
+
+<p>The main components involved in the RIL are:</p>
+
+<dl>
+ <dt><code>rild</code></dt>
+ <dd>The daemon that talks to the proprietary modem firmware.</dd>
+ <dt><code>rilproxy</code></dt>
+ <dd>The daemon that proxies messages between <code>rild</code> and Gecko (which is implemented in the <code>b2g</code> process). This overcomes the permission problem that arises when trying to talk to <code>rild</code> directly, since <code>rild</code> can only be communicated with from within the <code>radio</code> group.</dd>
+ <dt><code>b2g</code></dt>
+ <dd>This process, also known as the <strong>chrome process</strong>, implements Gecko. The portions of it that relate to the Radio Interface Layer are <a href="https://dxr.mozilla.org/mozilla-central/source/dom/system/gonk/ril_worker.js" rel="custom">dom/system/gonk/ril_worker.js</a>, which implements a worker thread that talks to <code>rild</code> through <code>rilproxy</code> and implements the radio state machine; and the <code><a href="/de/docs/XPCOM_Interface_Referenz/nsIRadioInterfaceLayer" title="">nsIRadioInterfaceLayer</a></code> interface, which is the main thread's <a href="https://developer.mozilla.org/en-US/docs/XPCOM" title="/en-US/docs/XPCOM">XPCOM</a> service that acts primarily as a message exchange between the <code>ril_worker.js</code> thread and various other Gecko components, including the Gecko content process.</dd>
+ <dt>Gecko's content process</dt>
+ <dd>Within Gecko's content process, the <code><a href="/de/docs/XPCOM_Interface_Referenz/nsIRILContentHelper" title="">nsIRILContentHelper</a></code> interface provides an XPCOM service that lets code implementing parts of the DOM, such as the <a href="https://developer.mozilla.org/en-US/docs/API/WebTelephony" title="/en-US/docs/API/WebTelephony">Telephony</a> and <a href="https://developer.mozilla.org/en-US/docs/API/WebSMS" title="/en-US/docs/API/WebSMS">SMS</a> APIs talk to the radio interface, which is in the chrome process.</dd>
+</dl>
+
+<h3 id="Example_Communicating_from_rild_to_the_DOM">Example: Communicating from rild to the DOM</h3>
+
+<p>Let's take a look at an example of how the lower level parts of the system communicate with DOM code. When the modem receives an incoming call, it notifies <code>rild</code> using a proprietary mechanism. <code>rild</code> then prepares a message for its client according to the "open" protocol, which is described in <a href="https://github.com/mozilla-b2g/android-hardware-ril/blob/master/include/telephony/ril.h" title="https://github.com/mozilla-b2g/android-hardware-ril/blob/master/include/telephony/ril.h"><code>ril.h</code></a>. In the case of an incoming call, a <code>RIL_UNSOL_RESPONSE_CALL_STATE_CHANGED</code> message is generated and sent by <code>rild</code> to <code>rilproxy</code>.</p>
+
+<p><code>rilproxy</code>, implemented in <a href="https://github.com/mozilla-b2g/rilproxy/blob/master/src/rilproxy.c" title="https://github.com/mozilla-b2g/rilproxy/blob/master/src/rilproxy.c"><code>rilproxy.c</code></a>, receives this message in its main loop, which polls its connection to <code>rild</code> using code like this:</p>
+
+<pre class="brush:cpp; line-numbers  language-cpp"><code class="language-cpp">ret <span class="operator token">=</span> <span class="function token">read</span><span class="punctuation token">(</span>rilproxy_rw<span class="punctuation token">,</span> data<span class="punctuation token">,</span> <span class="number token">1024</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="keyword token">if</span><span class="punctuation token">(</span>ret <span class="operator token">&gt;</span> <span class="number token">0</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="function token">writeToSocket</span><span class="punctuation token">(</span>rild_rw<span class="punctuation token">,</span> data<span class="punctuation token">,</span> ret<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>Once the message is received from <code>rild</code>, it's then forwarded along to Gecko on the socket that connects <code>rilproxy</code> to Gecko. Gecko receives the forwarded message on its <a href="https://dxr.mozilla.org/mozilla-central/source/ipc/ril/Ril.cpp" rel="custom">IPC thread</a>:</p>
+
+<pre class="brush:cpp; line-numbers  language-cpp"><code class="language-cpp">int ret <span class="operator token">=</span> <span class="function token">read</span><span class="punctuation token">(</span>fd<span class="punctuation token">,</span> mIncoming<span class="operator token">-</span><span class="operator token">&gt;</span>Data<span class="punctuation token">,</span> <span class="number token">1024</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// ... handle errors ...</span>
+mIncoming<span class="operator token">-</span><span class="operator token">&gt;</span>mSize <span class="operator token">=</span> ret<span class="punctuation token">;</span>
+sConsumer<span class="operator token">-</span><span class="operator token">&gt;</span><span class="function token">MessageReceived</span><span class="punctuation token">(</span>mIncoming<span class="punctuation token">.</span><span class="function token">forget</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>The consumer of these messages is <a href="https://dxr.mozilla.org/mozilla-central/source/dom/system/gonk/SystemWorkerManager.cpp" rel="custom">SystemWorkerManager</a>, which repackages the messages and dispatches them to the <code><a href="https://dxr.mozilla.org/mozilla-central/source/dom/system/gonk/ril_worker.js" rel="custom">ril_worker.js</a></code> thread that implements the RIL state machine; this is done in the <code>RILReceiver::MessageReceived()</code> method:</p>
+
+<pre class="brush:cpp; line-numbers  language-cpp"><code class="language-cpp">virtual void <span class="function token">MessageReceived</span><span class="punctuation token">(</span>RilRawData <span class="operator token">*</span>aMessage<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  nsRefPtr<span class="operator token">&lt;</span>DispatchRILEvent<span class="operator token">&gt;</span> <span class="function token">dre</span><span class="punctuation token">(</span><span class="keyword token">new</span> <span class="class-name token">DispatchRILEvent</span><span class="punctuation token">(</span>aMessage<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  mDispatcher<span class="operator token">-</span><span class="operator token">&gt;</span><span class="function token">PostTask</span><span class="punctuation token">(</span>dre<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>The task posted to that thread in turn calls the <code>onRILMessage()</code> function, which is implemented in JavaScript. This is done using the JavaScript API function <code><a href="https://developer.mozilla.org/en-US/docs/SpiderMonkey/JSAPI_Reference/JS_CallFunctionName" title="/en-US/docs/SpiderMonkey/JSAPI_Reference/JS_CallFunctionName">JS_CallFunctionName</a>()</code>:</p>
+
+<pre class="line-numbers  language-html"><code class="language-html">return JS_CallFunctionName(aCx, obj, "onRILMessage", NS_ARRAY_LENGTH(argv),
+                           argv, argv);</code></pre>
+
+<p><code>onRILMessage()</code> is implemented in <a href="https://dxr.mozilla.org/mozilla-central/source/dom/system/gonk/ril_worker.js" rel="custom">dom/system/gonk/ril_worker.js</a>, which processes the message bytes and chops them into parcels. Each complete parcel is then dispatched to individual handler methods as appropriate:</p>
+
+<pre class="brush:js; line-numbers  language-js"><code class="language-js">handleParcel<span class="punctuation token">:</span> <span class="keyword token">function</span> <span class="function token">handleParcel</span><span class="punctuation token">(</span>request_type<span class="punctuation token">,</span> length<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">let</span> method <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">[</span>request_type<span class="punctuation token">]</span><span class="punctuation token">;</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">typeof</span> method <span class="operator token">==</span> <span class="string token">"function"</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span>DEBUG<span class="punctuation token">)</span> <span class="function token">debug</span><span class="punctuation token">(</span><span class="string token">"Handling parcel as "</span> <span class="operator token">+</span> method<span class="punctuation token">.</span>name<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    method<span class="punctuation token">.</span><span class="function token">call</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">,</span> length<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>This code works by getting the request type from the object, making sure it's defined as a function in the JavaScript code, then calling the method. Since ril_worker.js implements each request type in a method given the same name as the request type, this is very simple.</p>
+
+<p>In our example, <code>RIL_UNSOL_RESPONSE_CALL_STATE_CHANGED</code>, the following handler is called:</p>
+
+<pre class="brush:js; line-numbers  language-js"><code class="language-js">RIL<span class="punctuation token">[</span>UNSOLICITED_RESPONSE_CALL_STATE_CHANGED<span class="punctuation token">]</span> <span class="operator token">=</span> <span class="keyword token">function</span> <span class="function token">UNSOLICITED_RESPONSE_CALL_STATE_CHANGED</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">this</span><span class="punctuation token">.</span><span class="function token">getCurrentCalls</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<p>As you see in the code above, when notification is received that the call state has changed, the state machine simply fetches the current call state by calling the <code>getCurrentCall()</code> method:</p>
+
+<pre class="brush:js; line-numbers  language-js"><code class="language-js">getCurrentCalls<span class="punctuation token">:</span> <span class="keyword token">function</span> <span class="function token">getCurrentCalls</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  Buf<span class="punctuation token">.</span><span class="function token">simpleRequest</span><span class="punctuation token">(</span>REQUEST_GET_CURRENT_CALLS<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>This sends a request back to <code>rild</code> to request the state of all currently active calls. The request flows back along a similar path the <code>RIL_UNSOL_RESPONSE_CALL_STATE_CHANGED</code> message followed, but in the opposite direction (that is, from <code>ril_worker.js</code> to <code>SystemWorkerManager</code> to <code>Ril.cpp</code>, then <code>rilproxy</code> and finally to the <code>rild</code> socket). <code>rild</code> then responds in kind, back along the same path, eventually arriving in <code>ril_worker.js</code>'s handler for the <code>REQUEST_GET_CURRENT_CALLS</code> message. And thus bidirectional communication occurs.</p>
+
+<p>The call state is then processed and compared to the previous state; if there's a change of state, ril_worker.js notifies the <code><a href="/de/docs/XPCOM_Interface_Referenz/nsIRadioInterfaceLayer" title="">nsIRadioInterfaceLayer</a></code> service on the main thread:</p>
+
+<pre class="brush:js; line-numbers  language-js"><code class="language-js">_handleChangedCallState<span class="punctuation token">:</span> <span class="keyword token">function</span> <span class="function token">_handleChangedCallState</span><span class="punctuation token">(</span>changedCall<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">let</span> message <span class="operator token">=</span> <span class="punctuation token">{</span>type<span class="punctuation token">:</span> <span class="string token">"callStateChange"</span><span class="punctuation token">,</span>
+                 call<span class="punctuation token">:</span> changedCall<span class="punctuation token">}</span><span class="punctuation token">;</span>
+  <span class="keyword token">this</span><span class="punctuation token">.</span><span class="function token">sendDOMMessage</span><span class="punctuation token">(</span>message<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p><code><a href="/de/docs/XPCOM_Interface_Referenz/nsIRadioInterfaceLayer" title="">nsIRadioInterfaceLayer</a></code> is implemented in <a href="https://dxr.mozilla.org/mozilla-central/source/dom/system/gonk/RadioInterfaceLayer.js" rel="custom">dom/system/gonk/RadioInterfaceLayer.js</a>; the message is received by its <code>onmessage()</code> method:</p>
+
+<pre class="brush:js; line-numbers  language-js"><code class="language-js">onmessage<span class="punctuation token">:</span> <span class="keyword token">function</span> <span class="function token">onmessage</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+   <span class="keyword token">let</span> message <span class="operator token">=</span> event<span class="punctuation token">.</span>data<span class="punctuation token">;</span>
+   <span class="function token">debug</span><span class="punctuation token">(</span><span class="string token">"Received message from worker: "</span> <span class="operator token">+</span> JSON<span class="punctuation token">.</span><span class="function token">stringify</span><span class="punctuation token">(</span>message<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+   <span class="keyword token">switch</span> <span class="punctuation token">(</span>message<span class="punctuation token">.</span>type<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+     <span class="keyword token">case</span> <span class="string token">"callStateChange"</span><span class="punctuation token">:</span>
+       <span class="comment token">// This one will handle its own notifications.</span>
+       <span class="keyword token">this</span><span class="punctuation token">.</span><span class="function token">handleCallStateChange</span><span class="punctuation token">(</span>message<span class="punctuation token">.</span>call<span class="punctuation token">)</span><span class="punctuation token">;</span>
+       <span class="keyword token">break</span><span class="punctuation token">;</span>
+   <span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">.</span></code></pre>
+
+<p>All this really does is dispatch the message to the content process using the Parent Process Message Manager (PPMM):</p>
+
+<pre class="brush:js; line-numbers  language-js"><code class="language-js">handleCallStateChange<span class="punctuation token">:</span> <span class="keyword token">function</span> <span class="function token">handleCallStateChange</span><span class="punctuation token">(</span>call<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="punctuation token">[</span>some internal state updating<span class="punctuation token">]</span>
+  ppmm<span class="punctuation token">.</span><span class="function token">sendAsyncMessage</span><span class="punctuation token">(</span><span class="string token">"RIL:CallStateChanged"</span><span class="punctuation token">,</span> call<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>In the content process, the message is received by <code>receiveMessage()</code> method in the <code><a href="/de/docs/XPCOM_Interface_Referenz/nsIRILContentHelper" title="">nsIRILContentHelper</a></code> service, from the Child Process Message Manager (CPMM):</p>
+
+<pre class="brush:js; line-numbers  language-js"><code class="language-js">receiveMessage<span class="punctuation token">:</span> <span class="keyword token">function</span> <span class="function token">receiveMessage</span><span class="punctuation token">(</span>msg<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">let</span> request<span class="punctuation token">;</span>
+  <span class="function token">debug</span><span class="punctuation token">(</span><span class="string token">"Received message '"</span> <span class="operator token">+</span> msg<span class="punctuation token">.</span>name <span class="operator token">+</span> <span class="string token">"': "</span> <span class="operator token">+</span> JSON<span class="punctuation token">.</span><span class="function token">stringify</span><span class="punctuation token">(</span>msg<span class="punctuation token">.</span>json<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">switch</span> <span class="punctuation token">(</span>msg<span class="punctuation token">.</span>name<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">case</span> <span class="string token">"RIL:CallStateChanged"</span><span class="punctuation token">:</span>
+      <span class="keyword token">this</span><span class="punctuation token">.</span><span class="function token">_deliverTelephonyCallback</span><span class="punctuation token">(</span><span class="string token">"callStateChanged"</span><span class="punctuation token">,</span>
+                                     <span class="punctuation token">[</span>msg<span class="punctuation token">.</span>json<span class="punctuation token">.</span>callIndex<span class="punctuation token">,</span> msg<span class="punctuation token">.</span>json<span class="punctuation token">.</span>state<span class="punctuation token">,</span>
+                                     msg<span class="punctuation token">.</span>json<span class="punctuation token">.</span>number<span class="punctuation token">,</span> msg<span class="punctuation token">.</span>json<span class="punctuation token">.</span>isActive<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">break</span><span class="punctuation token">;</span></code></pre>
+
+<p>This, in turn, calls the <code><a href="https://developer.mozilla.org/de/docs/XPCOM_Interface_Reference/nsIRILTelephonyCallback#callStateChanged()">nsIRILTelephonyCallback.callStateChanged()</a></code> methods on every registered telephony callback object. Every web application that accesses the <a href="/de/docs/Web/API/Window/navigator/mozTelephony" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben; bitte erwäge, mitzuwirken!"><code>window.navigator.mozTelephony</code></a> API has registered one such callback object that dispatches events to the JavaScript code in the web application, either as a state change of an existing call object or a new <code>incoming</code> call event.</p>
+
+<pre class="brush:cpp; line-numbers  language-cpp"><code class="language-cpp">NS_IMETHODIMP Telephony<span class="punctuation token">:</span><span class="punctuation token">:</span><span class="function token">CallStateChanged</span><span class="punctuation token">(</span>PRUint32 aCallIndex<span class="punctuation token">,</span> PRUint16 aCallState<span class="punctuation token">,</span>
+                                          const nsAString<span class="operator token">&amp;</span> aNumber<span class="punctuation token">,</span> bool aIsActive<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="punctuation token">[</span><span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">]</span>
+
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>modifiedCall<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="comment token">// Change state.</span>
+    modifiedCall<span class="operator token">-</span><span class="operator token">&gt;</span><span class="function token">ChangeState</span><span class="punctuation token">(</span>aCallState<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+    <span class="comment token">// See if this should replace our current active call.</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span>aIsActive<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      mActiveCall <span class="operator token">=</span> modifiedCall<span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+
+    <span class="keyword token">return</span> NS_OK<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  nsRefPtr<span class="operator token">&lt;</span>TelephonyCall<span class="operator token">&gt;</span> call <span class="operator token">=</span>
+          TelephonyCall<span class="punctuation token">:</span><span class="punctuation token">:</span><span class="function token">Create</span><span class="punctuation token">(</span>this<span class="punctuation token">,</span> aNumber<span class="punctuation token">,</span> aCallState<span class="punctuation token">,</span> aCallIndex<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  nsRefPtr<span class="operator token">&lt;</span>CallEvent<span class="operator token">&gt;</span> event <span class="operator token">=</span> CallEvent<span class="punctuation token">:</span><span class="punctuation token">:</span><span class="function token">Create</span><span class="punctuation token">(</span>call<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  nsresult rv <span class="operator token">=</span> event<span class="operator token">-</span><span class="operator token">&gt;</span><span class="function token">Dispatch</span><span class="punctuation token">(</span><span class="function token">ToIDOMEventTarget</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span> <span class="function token">NS_LITERAL_STRING</span><span class="punctuation token">(</span><span class="string token">"incoming"</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="function token">NS_ENSURE_SUCCESS</span><span class="punctuation token">(</span>rv<span class="punctuation token">,</span> rv<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">return</span> NS_OK<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>Applications can receive these events and update their user interface and so forth:</p>
+
+<pre class="brush:js; line-numbers  language-js"><code class="language-js">handleEvent<span class="punctuation token">:</span> <span class="keyword token">function</span> <span class="function token">fm_handleEvent</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">switch</span> <span class="punctuation token">(</span>evt<span class="punctuation token">.</span>call<span class="punctuation token">.</span>state<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">case</span> <span class="string token">'connected'</span><span class="punctuation token">:</span>
+      <span class="keyword token">this</span><span class="punctuation token">.</span><span class="function token">connected</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">break</span><span class="punctuation token">;</span>
+    <span class="keyword token">case</span> <span class="string token">'disconnected'</span><span class="punctuation token">:</span>
+      <span class="keyword token">this</span><span class="punctuation token">.</span><span class="function token">disconnected</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">break</span><span class="punctuation token">;</span>
+    <span class="keyword token">default</span><span class="punctuation token">:</span>
+      <span class="keyword token">break</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>Take a look at the implementation of <a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/communications/dialer/js/dialer.js" title="https://github.com/mozilla-b2g/gaia/blob/master/apps/communications/dialer/js/dialer.js"><code>handleEvent()</code> in the Dialer application</a> as an extended example.</p>
+
+<h3 id="3G_data">3G data</h3>
+
+<p>There is a RIL message that initiates a "data call" to the cellular service; this enables data transfer mode in the modem. This data call ends up creating and activating a <a href="https://de.wikipedia.org/wiki/Point-to-Point Protocol" title="Point-to-Point Protocol">Point-to-Point Protocol</a> (PPP) interface device in the Linux kernel that can be configured using the usual interfaces.</p>
+
+<div class="note">
+<p><strong>Note:</strong> This section needs to be written.</p>
+</div>
+
+<h3 id="Related_DOM_APIs">Related DOM APIs</h3>
+
+<p>This section lists DOM APIs that are related to RIL communications:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/API/WebTelephony/Introduction_to_WebTelephony" title="/en-US/docs/API/WebTelephony/Introduction_to_WebTelephony">Telephony API</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/API/WebSMS/Introduction_to_WebSMS" title="/en-US/docs/API/WebSMS/Introduction_to_WebSMS">SMS API</a></li>
+ <li>Mobile Connection API</li>
+</ul>
+
+<h2 id="WiFi">WiFi</h2>
+
+<p>The WiFi backend for Firefox OS simply uses <code>wpa_supplicant</code> to do most of the work. That means that the backend's primary job is to simply manage the supplicant, and to do some auxiliary tasks such as loading the WiFi driver and enabling or disabling the network interface. In essence, this means that the backend is a state machine, with the states following the state of the supplicant.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Much of the interesting stuff that happens in WiFi depends deeply on possible state changes in the <code>wpa_supplicant</code> process.</p>
+</div>
+
+<p>The implementation of the WiFi component is broken up into two files:</p>
+
+<dl>
+ <dt><a href="https://dxr.mozilla.org/mozilla-central/source/dom/wifi/DOMWifiManager.js" rel="custom">dom/wifi/DOMWifiManager.js</a></dt>
+ <dd>Implements the API that's exposed to web content, as defined in <code><a href="/de/docs/XPCOM_Interface_Referenz/nsIWifi.idl" title="">nsIWifi.idl</a></code>.</dd>
+ <dt><a href="https://dxr.mozilla.org/mozilla-central/source/dom/wifi/WifiWorker.js" rel="custom">dom/wifi/WifiWorker.js</a></dt>
+ <dd>Implements the state machine and the code that drives the supplicant.</dd>
+</dl>
+
+<p>These two files communicate with one another using the <a href="https://developer.mozilla.org/en-US/docs/The_message_manager" title="/en-US/docs/The_message_manager">message manager</a>. The backend listens for messages requesting certain actions, such as "associate", and responds with a message when the requested action has been completed.</p>
+
+<p>The DOM side listens for the response methods as well as several event messages that indicate state changes and information updates.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Any synchromous DOM APIs are implemented by caching data on that side of the pipe. Synchronous messages are avoided whenever possible.</p>
+</div>
+
+<h3 id="WifiWorker.js">WifiWorker.js</h3>
+
+<p>This file implements the main logic behind the WiFi interface. It runs in the chrome process (in multi-process builds) and is instantiated by the SystemWorkerManager. The file is generally broken into two sections: a giant anonymous function and <code>WifiWorker</code> (and its prototype). The anonymous function ends up being the <code>WifiManager</code> by providing a local API, including notifications for events such as connection to the supplicant and scan results being available. In general, it contains little logic and lets its sole consumer control its actions while it simply responds with the requested information and controls the details of the connection with the supplicant.</p>
+
+<p>The <code>WifiWorker</code> object sits between the <code>WifiManager</code> and the DOM. It reacts to events and forwards them to the DOM; in turn, it receives requests from the DOM and performs the appropriate actions on the supplicant. It also maintains state information about the supplicant and what it needs to do next.</p>
+
+<h3 id="DOMWifiManager.js">DOMWifiManager.js</h3>
+
+<p>This implements the DOM API, transmitting messages back and forth between callers and the actual WiFi worker. There's very little logic involved.</p>
+
+<div class="note">
+<p><strong>Note:</strong> In order to avoid synchronous messages to the chrome process, the WiFi Manager does need to cache the state based on the received event.</p>
+</div>
+
+<p>There's a single synchronous message, which is sent at the time the DOM API is instantiated, in order to get the current state of the supplicant.</p>
+
+<h3 id="DHCP">DHCP</h3>
+
+<p>DHCP and DNS are handled by <code>dhcpcd</code>, the standard Linux DHCP client. However, it's not able to react when the network connection is lost. Because of this, Firefox OS kills and restarts <code>dhcpcd</code> each time it connects to a given wireless network.</p>
+
+<p><code>dhcpcd</code> is also responsible for setting the default route; we call into the network manager to tell the kernel about DNS servers.</p>
+
+<h2 id="Network_Manager">Network Manager</h2>
+
+<p>The Network Manager configures network interfaces opened by the 3G data and WiFi components.</p>
+
+<div class="note">
+<p><strong>Note:</strong> This needs to be written.</p>
+</div>
+
+<h2 id="Processes_and_threads">Processes and threads</h2>
+
+<p>Firefox OS uses POSIX threads to implement all application threads — this includes the main thread of each application as well as web workers and helper threads. Control groups are used to prioritize process and thread execution thus relying on the Linux kernel's completely fair scheduler. Depending on the status of a process we assign it to different control group. We've currently got 6 priority levels corresponding to 5 control groups:</p>
+
+<table class="standard-table">
+ <caption>Process priority levels</caption>
+ <thead>
+  <tr>
+   <th scope="col">Priority</th>
+   <th scope="col">Control group</th>
+   <th scope="col">Used for</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>MASTER</code></td>
+   <td> </td>
+   <td>Main b2g process</td>
+  </tr>
+  <tr>
+   <td><code>FOREGROUND_HIGH</code></td>
+   <td><code>apps/critical</code></td>
+   <td>Critical applications holding the <code>cpu</code> or <code>highpriority</code> wakelock; this is currently reserved for the clock and communications applications</td>
+  </tr>
+  <tr>
+  </tr>
+  <tr>
+   <td><code>FOREGROUND</code></td>
+   <td><code>apps</code></td>
+   <td>Foreground applications</td>
+  </tr>
+  <tr>
+   <td><code>FOREGROUND_KEYBOARD</code></td>
+   <td><code>apps</code></td>
+   <td>Keyboard application</td>
+  </tr>
+  <tr>
+   <td><code>BACKGROUND_PERCEIVABLE</code></td>
+   <td><code>apps/bg_perceivable</code></td>
+   <td>Background applications playing audio or holding the holding the <code>cpu</code> or <code>highpriority</code> wakelock and having at least a system message handler registered</td>
+  </tr>
+  <tr>
+   <td><code>BACKGROUND</code></td>
+   <td><code>apps/bg_non_interactive</code></td>
+   <td>All other applications running in the background</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Some levels share the same control group, that's because those levels currently differ in the way they're treated by the <a href="https://developer.mozilla.org/en-US/Firefox_OS/Platform/Out_of_memory_management_on_Firefox_OS">out of memory killer</a>. All priorities can be adjusted at build time via preferences; the relevant entries can be found in the <a href="http://hg.mozilla.org/mozilla-central/file/54e8c6492dc4/b2g/app/b2g.js#l610"><code>b2g/app/b2g.js</code></a> file.</p>
+
+<p>The following control groups are currently used:</p>
+
+<table class="standard-table">
+ <caption>Control groups</caption>
+ <thead>
+  <tr>
+   <th scope="col">Path</th>
+   <th scope="col">CPU allocation</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td> </td>
+   <td>50% of total CPU time</td>
+   <td>Root control group reserved for the main b2g process and system daemons</td>
+  </tr>
+  <tr>
+   <td><code>apps</code></td>
+   <td>50% of total CPU time</td>
+   <td>Regular applications</td>
+  </tr>
+  <tr>
+   <td><code>apps/critical</code></td>
+   <td>95% of <code>apps</code></td>
+   <td>Critical applications</td>
+  </tr>
+  <tr>
+   <td><code>apps/bg_perceivable</code></td>
+   <td>10% of <code>apps</code></td>
+   <td>Perceivable background applications</td>
+  </tr>
+  <tr>
+   <td><code>apps/bg_non_interactive</code></td>
+   <td>5% of <code>apps</code></td>
+   <td>Background applications</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note</strong>: for more information on the out-of-memory killer, and how Firefox OS manages low memory situations, read <a href="https://developer.mozilla.org/en-US/Firefox_OS/Platform/Out_of_memory_management_on_Firefox_OS">Out of memory management on Firefox OS</a>.</p>
+</div>
+
+<p>Within a process the main thread inherits the "nice value" of the process whilst web worker threads are given a "nice value" that is one point higher than the main thread thus running at lower priority. This is done in order to prevent CPU-intensive workers from excessively slowing down the main thread. All threads of an application are currently assigned to the same control group. Process priorities are changed whenever a major event happens such as an application being sent into the background or foreground, a new application starting up or an existing application grabbing a CPU wakelock.</p>
+
+<div class="note">
+<p><strong>Note:</strong> cgroups support on ICS devices is currently broken due to a kernel bug.</p>
+</div>
diff --git a/files/de/archive/b2g_os/platform/index.html b/files/de/archive/b2g_os/platform/index.html
new file mode 100644
index 0000000000..db8c4e9960
--- /dev/null
+++ b/files/de/archive/b2g_os/platform/index.html
@@ -0,0 +1,81 @@
+---
+title: Firefox OS Plattform
+slug: Archive/B2G_OS/Platform
+tags:
+  - Architektur
+  - Firefox OS
+  - Plattform
+  - Übersicht
+translation_of: Archive/B2G_OS/Platform
+---
+<p>Die Firefox OS Plattform besteht aus vielen Komponenten. Du musst seine Architektur nicht verstehen, um Apps für Firefox OS zu entwickeln. Falls Du aber an der Plattform selbst oder an ihrer Portierung mitentwickelst oder einfach nur neugierig bist, dann könnte diese Dokumentation interessant für Dich sein.</p>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 class="Documentation" id="Documentation" name="Documentation">Dokumentationen zur Firefox OS Plattform</h2>
+
+    <dl>
+     <dt><a href="/de/docs/Mozilla/Firefox_OS/Introduction" title="en-US/docs/Mozilla/Firefox_OS/Introduction">Firefox OS Architektur: Überblick</a></dt>
+     <dd>Ein Überblick über die interne Struktur von Firefox OS; vor allem für diejenigen interessant, die an der Plattform oder ihrer Portierung mitentwickeln.</dd>
+     <dt><a href="/de/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS" title="en-US/docs/Mozilla/Firefox_OS/Building and installing Boot to Gecko">Firefox OS Architektur: Apps</a></dt>
+     <dd>Ein Überblick über das Anwendungs-Modell von Firefox OS.</dd>
+     <dt><a href="/de/docs/Mozilla/Firefox_OS/Platform/Gaia" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia">Gaia</a></dt>
+     <dd>Dokumentation über Gaia, die Benutzeroberfläche von Firefox OS Geräten. Gaia ist eine Web-Anwendung, die auf der Firefox OS Betriebssystem-Schicht läuft.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Gonk" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Gonk">Gonk</a></dt>
+     <dd>Dokumentation über Gonk, die Betriebssystem-Schicht unterhalb von Gaia. Gonk besteht aus einem Linux Kernel und einer Hardware-Abstraktionsschicht, mit der Gecko kommuniziert.</dd>
+     <dt><a href="/de/docs/Mozilla/Gecko" title="/en-US/docs/Mozilla/Gecko">Gecko</a></dt>
+     <dd>Gecko ist die Ebene im Firefox OS, die dieselben offenen Web Standard-Implementierungen bereit stellt wie sie auch von Firefox, Thunderbird und vielen anderen Anwendungen genutzt werden.</dd>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Security" title="/en-US/docs/Mozilla/Firefox_OS/Security"> Sicherheit</a></dt>
+     <dd>Dokumentation über die Sicherheit in Firefox OS; dies beinhaltet alle Themen rund um die Sicherheit von Firefox OS Geräten: für die App-Entwicklung, für die Integration von Geräten in Netzwerke und so weiter.</dd>
+     <dt><a href="https://developer.mozilla.org/en-US/Firefox_OS/Debugging/Out_of_memory_management_on_Firefox_OS">Speicherengpässe in Firefox OS</a></dt>
+     <dd>Dieser Artikel erläutert wie Firefox OS mit Hilfe des "low memory killers" und der "low memory notifications" mit Speicherengpässen umgeht.</dd>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform/Feature_support_chart" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Feature_support_chart">Feature Liste</a></dt>
+     <dd>Eine Liste mit den verfügbaren Features pro Firefox OS Release.</dd>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform/Settings_list" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Settings_list">Firefox OS Einstellungen</a></dt>
+     <dd>Eine Liste allgemeiner Einstellungen, die mit dem <a href="https://developer.mozilla.org/en-US/docs/WebAPI/Settings" title="/en-US/docs/WebAPI/Settings">Settings</a> API vorgenommen werden können.</dd>
+    </dl>
+
+    <p><span class="alllinks"><a href="https://developer.mozilla.org/en-US/docs/tag/B2G" title="/en-US/docs/tag/B2G">Alle anzeigen...</a></span></p>
+   </td>
+   <td>
+    <h2 class="Community" id="Community" name="Community">Wir helfen Dir</h2>
+
+    <p>Wenn Du mit Firefox OS arbeitest oder Apps für Firefox OS Geräte entwickelst, dann kann Dir unsere große MDN-Geimeinschaft bei Fragen und Problemen helfen!</p>
+
+    <ul>
+     <li>Besuche das Boot to Gecko Projekt Forum: {{ DiscussionList("dev-b2g", "mozilla.dev.b2g") }}</li>
+    </ul>
+
+    <ul>
+     <li>Stell Deine Fragen in Mozilla's Boot to Gecko IRC Channel: <a class="link-irc" href="irc://irc.mozilla.org/b2g" title="irc://irc.mozilla.org/b2g">#b2g</a></li>
+    </ul>
+
+    <p><span class="alllinks"><a class="external external-icon" href="http://www.catb.org/%7Eesr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">Bitte vergiss nicht die <em>netiquette</em>...</a></span></p>
+
+    <p> </p>
+
+
+    <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Verwandte Artikel</h2>
+
+    <ul>
+     <li><a href="/de/docs/Mobile" title="en-US/docs/Mobile">Mobil</a></li>
+     <li><a href="/de/docs/HTML" title="en-US/docs/HTML">HTML</a></li>
+     <li><a href="/de/docs/CSS" title="en-US/docs/CSS">CSS</a></li>
+     <li><a href="/de/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a></li>
+    </ul>
+
+    <h2 class="Tools" id="Quellen">Quellen</h2>
+
+    <ul>
+     <li><a class="link-https" href="https://wiki.mozilla.org/B2G/FAQ" title="B2G/FAQ">Mozilla wiki FAQ</a></li>
+     <li><a class="link-https" href="https://wiki.mozilla.org/B2G/Schedule_Roadmap" title="https://wiki.mozilla.org/B2G/Schedule_Roadmap">Roadmap</a></li>
+     <li><a href="/en-US/docs/Mozilla/Firefox_OS/Feature_support_chart" title="/en-US/docs/Mozilla/Firefox_OS/Feature_support_chart">Feature Liste</a></li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/de/archive/b2g_os/quickstart/deine_erste_app/index.html b/files/de/archive/b2g_os/quickstart/deine_erste_app/index.html
new file mode 100644
index 0000000000..abd858245b
--- /dev/null
+++ b/files/de/archive/b2g_os/quickstart/deine_erste_app/index.html
@@ -0,0 +1,339 @@
+---
+title: Deine erste App
+slug: Archive/B2G_OS/Quickstart/deine_erste_app
+tags:
+  - Anfänger
+  - Apps
+  - FirefoxOS
+  - Guide
+translation_of: Archive/B2G_OS/Quickstart/Your_first_app
+---
+<div class="note">
+ <p><span id="result_box" lang="de"><span class="hps"><strong>Hinweis</strong>: Das</span> <span class="hps atn">Quickstart-</span><span>Abschnitt</span> <span class="hps">wurde mit einem neuen</span><span>, fokussierter</span> <span class="hps">Quick</span> <span class="hps">Artikel, der</span> <span class="hps">alle bisherigen</span> <span class="hps">Artikel</span> <span class="hps">ersetzt</span> <span class="hps">aktualisiert.</span> <span class="hps">Wir</span> <span class="hps">hoffen, dass Sie</span> <span class="hps">diese</span> <span class="hps">nützlicher</span><span class="hps"> finden, und</span> <span class="hps">eine schnellere</span> <span class="hps">Lernerfahrung</span> <span class="hps">als die ältere</span>n <span class="hps">Artikel haben</span><span>.</span></span></p>
+</div>
+<article class="brush: js">
+ <div class="summary">
+  <p>Offene Web-Anwendungen (Web-Entwickler) geben, was sie seit Jahren gewünscht haben: ein Cross-Plattform-Umgebung, um installierbare Apps mit nur HTML, CSS und JavaScript erstellen gewidmet - mit Firefox OS, der erste dedizierte Open Web App-Plattform.</p>
+  <div class="mttextarea" dir="ltr" id="TranslationOutput">
+   <div>
+    <span id="Dst[0][0:3:0:5]">Dieser</span><span> </span><span id="Dst[0][5:9:7:15]">Leitfaden</span><span> </span><span id="Dst[0][11:14:17:20]">soll</span><span> </span><span id="Dst[0][23:25:22:24]">Sie</span><span> </span><span id="Dst[0][27:40:26:44]">unternehmungslustig</span><span> </span><span id="Dst[0][42:48:46:52]">schnell</span><span> </span><span id="Dst[0][50:53:54:56]">mit</span><span> </span><span id="Dst[0][55:55:58:62]">einer</span><span> </span><span id="Dst[0][57:61:64:76]">grundlegenden</span><span> </span><span id="Dst[0][63:74:78:88]">Architektur</span><span> </span><span id="Dst[0][76:78:90:92]">und</span><span> </span><span id="Dst[0][86:97:94:104]">Anweisungen</span><span> zu </span><span id="Dst[0][80:84:109:113]">bauen <font lang="de">inspirieren</font></span><span>, </span><span id="Dst[0][99:100:116:117]">so</span><span> </span><span id="Dst[0][102:105:119:122]">dass</span><span> </span><span id="Dst[0][107:109:124:126]">Sie</span><span> </span><span id="Dst[0][122:124:128:130]">die</span><span> </span><span id="Dst[0][126:129:132:138]">nächste</span><span> </span><span id="Dst[0][131:135:140:144]">große</span><span> </span><span id="Dst[0][137:139:146:148]">app</span><span> </span><span id="Dst[0][115:120:150:158]">erstellen</span><span> </span><span id="Dst[0][111:113:160:165]">können</span><span>!</span></div>
+  </div>
+ </div>
+ <p>Wenn Sie dieser Anleitung folgen möchten, können Sie unsere <a href="https://github.com/chrisdavidmills/mdn-app-template">Schnellstart-app-Vorlage</a> herunterladen. Finden Sie mehr heraus was unser <a href="/en-US/docs/Project:MDN/Style_guide/Sample_app_coding_guidelines#Apps_template">Apps-Vorlage-Guide</a> enthält.</p>
+ <div class="mttextarea" dir="ltr" id="TranslationOutput">
+  <h2 id="div[0]" name="div[0]"><span id="Dst[0][0:2:0:2]">App</span><span>-</span><span id="Dst[0][4:12:4:11]">Struktur</span></h2>
+  <p> </p>
+ </div>
+ <div class="mttextarea" dir="ltr" id="TranslationOutput">
+  <h3 id="div[0]" name="div[0]"><span id="Dst[0][0:7:0:7]">Verpackt</span><span> vs. </span><span id="Dst[0][13:18:13:21]">gehostete</span><span> </span><span id="Dst[0][20:23:23:33]">Anwendungen</span></h3>
+ </div>
+ <p>Es gibt zwei Arten der offenen Web-apps :  <code>verpackt</code> und <code>gehostet</code>. Verpackte apps sind im Wesentlichen die Zip-Dateien, alle Anwendung Anlagewerten: HTML, CSS, JavaScript, Bilder, Manifest, etc.. Gehostete Anwendungen laufen von einem Server in einer bestimmten Domain, genau wie eine standard-Website. Beide app-Arten benötigen ein gültiges Manifest. Wenn Ihre app auf dem Firefox-Marktplatz kommt, wird Ihre Anwendung als  Zip-Datei hochladen oder geben Sie die URL an, wo Ihre gehostete Anwendung  ist.</p>
+ <div style="width: 480px; margin: 0 auto;">
+  <p><iframe frameborder="0" height="270" src="https://www.youtube.com/embed/Q7x-B13y33Q/?feature=player_detailpage" width="480"></iframe></p>
+  <div style="">
+   <p>In Partnerschaft mit Treehouse erstellt : <a class="button" href="http://teamtreehouse.com/?cid=1154">Zu die Treehouse Seite</a></p>
+  </div>
+ </div>
+ <p>Für die Zwecke dieses Leitfadens erstellen Sie eine gehostete app die werden dann an Ihre Adresse "localhost" geschickt. Sobald Ihre app bereit ist um auf die Liste des Firefox-Marktplatz zukommen, können Sie die Entscheidung, als verpackte app oder als gehostete Anwendung zu starten.</p>
+ <h3 id="Manifeste_App">Manifeste App</h3>
+ <p>Alle Firefox-app erfordern eine <a href="/en-US/docs/Web/Apps/Manifest">manifest.webapp</a> -Datei im Stammverzeichnis der app.  Die manifest.webapp -Datei enthält wichtige Informationen über die app wie Version, Name, Beschreibung, Symbolspeicherort, Locale Zeichenfolgen, Domains, wo die app aus, installiert werden kann, und vieles mehr. Nur der Name und die Beschreibung sind erforderlich. Das einfache Manifest innerhalb der app-Vorlage enthalten ist, die der folgenden ähnelt:</p>
+ <pre class="brush: js">{
+  "version": "0.1",
+  "name": "Open Web App",
+  "description": "Die eeindruckende Open Web App",
+  "launch_path": "/app-template/index.html",
+  "icons": {
+    "16": "/app-template/app-icons/icon-16.png",
+    "48": "/app-template/app-icons/icon-48.png",
+    "128": "/app-template/app-icons/icon-128.png"
+  },
+  "developer": {
+    "name": "Ihr Name",
+    "url": "http://ihrebeeindruckendeapp.eu"
+  },
+  "locales": {
+    "es": {
+      "description": "Su nueva aplicación impresionante Open Web",
+      "developer": {
+        "url": "http://ihrebeeindruckendeapp.eu"
+      }
+    },
+    "it": {
+      "description": "La tua nuova fantastica Open Web App",
+      "developer": {
+        "url": "http://ihrebeeindruckendeapp.eu"
+      }
+    }
+  },
+  "default_locale": "de"
+}</pre>
+ <div style="width: 480px; margin: 0 auto;">
+  <p><iframe frameborder="0" height="270" src="https://www.youtube.com/embed/dgAUgHQOm8M#t/?feature=player_detailpage" width="480"></iframe></p>
+  <div class="video-caption">
+   <p>In Partnerschaft mit Treehouse erstellt : <a class="button" href="http://teamtreehouse.com/?cid=1154">Zu die Treehouse Seite</a></p>
+  </div>
+ </div>
+ <p> </p>
+ <p>Eine grundlegende Manifest ist alles, was Sie brauchen um loszulegen. Lesen Sie mehr über <a href="/en-US/docs/Web/Apps/Manifest">Manifeste Apps</a>.</p>
+ <h2 id="App_Layout_Design">App Layout &amp; Design</h2>
+ <p>Das Design ist zunehmend wichtig, da die Bildschirmauflösungen standard auf verschiedenen Geräten geworden ist. Selbst wenn das Hauptziel Ihrer App mobile Plattformen wie Firefox-OS ist, haben andere Geräte wahrscheinlich auch darauf zugriff.  Mit <a href="//developer.mozilla.org/docs/CSS/Media_queries">CSS Media Queries</a> können Sie das Layout des Gerät anpassen, wie in diesem CSS-Beispiel gezeigt:</p>
+ <div class="mttextarea" dir="ltr" id="TranslationOutput">
+  <div>
+    </div>
+ </div>
+ <pre class="brush: css">
+/* Im folgenden Text werden Beispiele von Verschiedenen CSS Media Queries gezeigt */
+
+  /* Grundlegende Desktop/Bildschirm breite */
+@media only screen and (min-width : 1224px) {
+  /* style */
+}
+
+/* iPhone breite */
+@media
+  only screen and (-webkit-min-device-pixel-ratio : 1.5),
+  only screen and (min-device-pixel-ratio : 1.5) {
+  /* styles */
+}
+
+/* Geräteeinstellungen auf verschiedenen Ausrichtungen */
+@media screen and (orientation:portrait) {
+  /* styles */
+}
+@media screen and (orientation:landscape) {
+  /* styles */
+}</pre>
+ <p>Es gibt viele JavaScript und CSS-Frameworks für responsive Design und mobile app Entwicklung (<a href="http://twitter.github.com/bootstrap">Bootstrap</a>, etc.) Wählen Sie die Framework(s), die am besten zu Ihrer app-Entwicklung passen.</p>
+ <h2 id="Web_APIs">Web APIs</h2>
+ <p>JavaScript-APIs werden erstellt und so schnell wie Geräte erweitert. Mozillas <a href="https://wiki.mozilla.org/WebAPI">WebAPI</a> Aufwand bringt Dutzende von mobilen Standardfunktionen von JavaScript-APIs.<span id="Dst[0][0:0:0:3]"> Eine</span><span> </span><span id="Dst[0][2:5:5:9]">Liste</span><span> </span><span id="Dst[0][7:8:11:13]">der</span><span> </span><span id="Dst[0][10:15:15:20]">Geräte</span><span>-</span><span id="Dst[0][17:23:22:28]">Support</span><span> </span><span id="Dst[0][25:27:30:32]">und</span><span> </span><span id="Dst[0][29:34:34:39]">Status</span><span> </span><span id="Dst[0][36:47:41:45]">steht</span><span> </span><span id="Dst[0][49:50:47:49]">auf</span><span> </span><span id="Dst[0][52:54:51:53]">der</span><span> </span><span id="Dst[0][63:66:55:59]">Seite</span><span> </span><span id="Dst[0][56:61:61:66]">des <a href="https://wiki.mozilla.org/WebAPI">WebAPI</a></span><span> zur Verfügung</span><span>.</span><span> </span><span id="Dst[0][69:78:83:92]">JavaScript</span><span>-</span><span id="Dst[0][80:86:94:100]">Feature</span><span>-</span><span id="Dst[0][88:96:102:110]">Erkennung</span><span> </span><span id="Dst[0][98:99:112:114]">ist</span><span> </span><span id="Dst[0][101:105:116:125]">immer noch</span><span> </span><span id="Dst[0][107:109:127:129]">die</span><span> </span><span id="Dst[0][111:114:131:135]">beste</span><span> </span><span id="Dst[0][116:123:137:142]">Praxis</span><span>,</span><span> </span><span id="Dst[0][126:127:145:147]">wie</span><span> </span><span id="Dst[0][135:136:149:150]">im</span><span> </span><span id="Dst[0][142:150:152:160]">folgenden</span><span> </span><span id="Dst[0][152:158:162:169]">Beispiel</span><span> </span><span id="Dst[0][129:133:171:177]">gezeigt</span><span>:</span>// Wenn dieses Gerät das Vibrieren API unterstützt</p>
+ <pre class="brush: js">// Wenn dieses Gerät Vibration API unterstützt ...
+
+if('vibrate' in navigator) {
+    // ... Vibration in Sekunden
+    navigator.vibrate(1000);
+}</pre>
+ <p>Im folgenden Beispiel wird das Anzeigeformat von einer <code>&lt;div&gt;</code> basierend auf die Änderungen in der Ladezustand des Geräts geändert :</p>
+ <pre class="brush: java">// Erstellen Sie die Batterie Indiktator Hörer
+(function() {
+  var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery,
+      indicator, indicatorPercentage;
+
+  if(battery) {
+    indicator = document.getElementById('indicator'),
+    indicatorPercentage = document.getElementById('indicator-percentage');
+
+    // Zuhörer für Änderung
+    battery.addEventListener('chargingchange', updateBattery);
+    battery.addEventListener('levelchange', updateBattery);
+
+    // Aktualisiert sofort
+    updateBattery();
+  }
+
+  function updateBattery() {
+    // Prozent aktualisieren Breite und Text
+    var level = (battery.level * 100) + '%';
+    indicatorPercentage.style.width = level;
+    indicatorPercentage.innerHTML = 'Battery: ' + level;
+    // Ladestatus Updaten
+    indicator.className = battery.charging ? 'charging' : '';
+  }
+})();</pre>
+ <p>Im Beispiel oben sobald Sie bestätigen, dass die <a href="https://developer.mozilla.org/en-US/docs/DOM/window.navigator.battery">Batterie-API</a> unterstützt wird, können Sie Ereignis-Listener für Chargingchange und Levelchange um das Element Anzeige aktualisieren hinzufügen. Versuchen Sie, die folgenden auf die Quickstart-Vorlage, und sehen Sie, wenn Sie es funktioniert.</p>
+ <div class="mttextarea" dir="ltr" id="TranslationOutput">
+  <div>
+   <span class="dhighlight" id="Dst[0][0:4:0:13]">Überprüfen Sie</span><span> </span><span id="Dst[0][6:8:15:17]">die</span><span> </span><a href="https://wiki.mozilla.org/WebAPI"><span id="Dst[0][10:15:19:24]">WebAPI</span></a><span>-</span><span id="Dst[0][17:20:26:30]">Seite</span><span> </span><span id="Dst[0][22:31:32:41]">regelmäßig</span><span>, </span><span id="Dst[0][33:34:44:45]">um</span><span> sich </span><span id="Dst[0][52:55:52:54]">mit</span><span> </span><span id="Dst[0][57:62:56:60]">Gerät</span><span> </span><span id="Dst[0][64:66:62:64]">API</span><span> </span><span id="Dst[0][68:75:66:71]">Status</span><span> </span><span id="Dst[0][41:42:73:79]">aktuell</span><span> </span><span id="Dst[0][44:45:81:82]">zu</span><span> </span><span id="Dst[0][36:39:84:89]">halten</span><span>.</span></div>
+  <div>
+    </div>
+ </div>
+ <div class="mttextarea" dir="ltr" id="TranslationOutput">
+  <h2 id="div[0]" name="div[0]"><span id="Dst[0][8:10:0:2]">API</span><span>-</span><span class="dhighlight" id="Dst[0][12:24:4:13]">Funktionen</span> <span id="Dst[0][0:6:18:29]">installieren</span></h2>
+  <div>
+    </div>
+ </div>
+ <p>In unserem Quickstart-app Beispielvorlage, haben wir eine installierungs-Schaltfläche, die Sie anklicken können, wenn Sie die app als standard website haben möchten ,<br>
+  und diese Website auf Firefox-OS als app zu installieren. Das Knopf-Markup ist nichts Besonderes:</p>
+ <pre class="brush: html">&lt;button id="install-btn"&gt;App Installieren&lt;/button&gt;</pre>
+ <div class="mttextarea" dir="ltr" id="TranslationOutput">
+  <div>
+   <span id="Dst[0][0:3:0:4]">Diese</span><span> </span><span id="Dst[0][5:12:6:21]">Tastenfunktionen</span><span> </span><span id="Dst[0][28:29:23:26]">wird</span><span> </span><span id="Dst[0][43:47:28:35]">mithilfe</span><span> </span><span id="Dst[0][49:51:37:39]">der</span><span> </span><span id="Dst[0][53:59:41:52]">installieren</span><span>-</span><span id="Dst[0][61:63:54:56]">API</span><span> </span><span id="Dst[0][31:41:58:70]">implementiert</span><span> </span><span id="Dst[0][65:68:72:77]">(siehe</span><span> </span><span id="Dst[0][70:81:79:90]">install.js):</span></div>
+  <div>
+    </div>
+ </div>
+ <pre class="brush: js">var mainifest_url = location.href + 'manifest.webapp';
+
+function install(ev) {
+  ev.preventDefault();
+//Manifest URL Definieren
+// App Installieren
+  var installLocFind = navigator.mozApps.install(manifest_url);
+  installLocFind.onsuccess = function(data) {
+    // Wenn die App Installiert ist
+  };
+  installLocFind.onerror = function() {
+    // App ist nicht Installiert
+    // installapp.error.name
+    alert(installLocFind.error.name);
+  };
+};
+
+// Eine Verweis auf die Schaltfläche und rufen Sie install() auf Klick wenn die App nicht Installiert ist. Wenn sie installiert ist ist die Schaltfläche ausgeblendet.
+var button = document.getElementById('install-btn');
+
+var installCheck = navigator.mozApps.checkInstalled(manifest_url);
+
+installCheck.onsuccess = function() {
+  if(installCheck.result) {
+    button.style.display = "none";
+  } else {
+    button.addEventListener('click', install, false);
+  };
+};
+</pre>
+ <p>Gehen Sie kurz alles durch was vor sich geht :</p>
+ <ol>
+  <li>
+   <div>
+    <span id="Dst[1][0:1:0:2]">Wir</span><span> </span><span id="Dst[1][3:5:4:11]">erhalten</span><span> </span><span id="Dst[1][7:7:13:17]">einen</span><span> </span><span id="Dst[1][9:17:19:25]">Verweis</span><span> </span><span id="Dst[1][19:20:27:29]">auf</span><span> </span><span id="Dst[1][22:24:31:33]">die</span><span> Schaltfläche "</span><span id="Dst[1][26:32:49:60]">installieren</span><span id="Dst[1][34:39:61:61]">"</span><span> </span><span id="Dst[1][41:43:63:65]">und</span><span> </span><span id="Dst[1][45:49:67:75]">speichern</span><span> Sie </span><span id="Dst[1][51:52:81:83]">sie</span><span> </span><span id="Dst[1][54:55:85:86]">in</span><span> </span><span id="Dst[1][57:59:88:90]">die</span><span> Schaltfläche "</span><span id="Dst[1][61:68:106:114]">Variablen</span><span id="Dst[1][70:75:115:115]">"</span><span>.</span></div>
+  </li>
+  <li>Wir verwenden <code>navigator.mozApps.checkInstalled</code> um zu prüfen, ob die App definiert durch das Manifest im <code>http://people.mozilla.com/~cmills/location-finder/manifest.webapp</code> bereits auf dem Gerät installiert ist. Dieser Text wird als Variable <code>installCheck</code> gespeichert.</li>
+  <li>Wenn der Test erfolgreich durchgeführt wird, dann wird sein Success Ereignis ausgelöst, daher wird <code>installCheck.onsuccess = function() { ... }</code> ausgeführt.</li>
+  <li>Wenn die App bereits Installiert ist wird die Schaltfläche ausgeblendet.</li>
+  <li>
+   <div class="mttextarea" dir="ltr" id="TranslationOutput">
+    <div class="mttextarea" dir="ltr" id="TranslationOutput">
+     <div class="mttextarea" dir="ltr" id="TranslationOutput">
+      <div>
+       <span id="Dst[0][0:1:0:3]">Wenn</span><span> </span><span id="Dst[0][3:5:5:7]">die</span><span> </span><span id="Dst[0][7:9:9:11]">app</span><span> nicht </span><span id="Dst[0][17:25:19:29]">installiert</span><span> </span><span id="Dst[0][11:15:31:33]">ist</span><span>,</span><span> </span><span id="Dst[0][31:33:36:40]">fügen</span><span> </span><span id="Dst[0][28:29:42:44]">wir</span><span> </span><span id="Dst[0][35:35:46:50]">einen</span><span> </span><span id="Dst[0][37:41:52:56]">Click</span><span>-</span><span id="Dst[0][43:47:58:65]">Ereignis</span><span>-</span><span id="Dst[0][49:56:67:74]">Listener</span><span> </span><span id="Dst[0][58:59:76:78]">zur</span><span> </span><span id="Dst[0][61:70:80:91]">Schaltfläche</span><span>,</span><span> </span><span id="Dst[0][73:74:94:100]">so dass</span><span> </span><span id="Dst[0][76:78:102:104]">die</span><span> </span><span id="Dst[0][90:97:106:113]">Funktion</span><span> </span><code><span id="Dst[0][80:88:115:123]">install()</span><span> </span></code><span id="Dst[0][102:104:125:134]">ausgeführt</span><span> </span><span id="Dst[0][99:100:136:139]">wird</span><span>, </span><span id="Dst[0][106:109:142:145]">wenn</span><span> </span><span id="Dst[0][111:113:147:149]">die</span><span> </span><span id="Dst[0][115:120:151:162]">Schaltfläche</span><span> </span><span id="Dst[0][125:131:164:171]">geklickt</span><span> </span><span id="Dst[0][122:123:173:176]">wird</span><span>.</span></div>
+     </div>
+    </div>
+   </div>
+  </li>
+  <li>Wenn die Schaltfläche angeklickt wird, und die Funktion <code>install() </code>ausgeführt wird, wird die Betriebsstätte für die manifest-Datei in eine Variable namens <code>manifest_url</code> und installieren dann die app unter Verwendung <code>navigator.mozApps.install(manifest_url)</code>, einen Verweis auf die Installation in der <code>InstallLocFind</code>-Variablen zu speichern. Sie werden bemerken, dass diese Installation auch Erfolg und Fehler-Ereignisse auslöst, damit Sie Aktionen abhängig ausführen können, ob die Installation erfolgreich oder nicht passiert ist.</li>
+ </ol>
+ <p>Vielleicht möchten Sie den <a href="/en-US/docs/Web/Apps/JavaScript_API">Umsetzung Stand der API</a> prüfen, wenn dann aber zuerst nach installierbare Webanwendungen.</p>
+ <div class="note">
+  <div class="mttextarea" dir="ltr" id="TranslationOutput">
+   <div>
+    <strong><span id="Dst[0][0:3:0:6]">Hinweis</span></strong><span>:</span><span> </span><span id="Dst[0][6:16:9:22]">Installierbare</span><span> </span><span id="Dst[0][18:21:24:29]">offene</span><span> </span><span id="Dst[0][23:25:31:33]">Web</span><span>-</span><span id="Dst[0][27:30:35:45]">Anwendungen</span><span> </span><span id="Dst[0][32:35:47:51]">haben</span><span> </span><span id="Dst[0][37:37:53:56]">eine</span><span> </span><span id="Dst[0][63:77:58:78]">Sicherheitsrichtlinie</span><span> </span><span id="Dst[0][39:45:80:88]">"einzelne</span><span> </span><span id="Dst[0][47:49:90:92]">app</span><span> </span><span id="Dst[0][51:53:94:96]">pro</span><span> </span><span id="Dst[0][55:60:98:106]">Herkunft"</span><span id="Dst[0][78:78:107:107]">;</span><span> </span><span id="Dst[0][80:88:109:121]">Grundsätzlich</span><span> </span><span id="Dst[0][95:99:123:134]">können Sie nicht</span><span> </span><span id="Dst[0][106:109:140:143]">mehr</span><span> </span><span id="Dst[0][111:114:145:147]">als</span><span> </span><span id="Dst[0][116:118:149:152]">eine</span><span> </span><span id="Dst[0][120:130:154:167]">installierbare</span><span> </span><span id="Dst[0][132:134:169:171]">app</span><span> </span><span id="Dst[0][136:138:173:175]">pro</span><span> </span><span id="Dst[0][140:145:177:184]">Herkunft</span><span> </span><span id="Dst[0][101:104:186:191]">hosten</span><span>.</span><span> </span><span id="Dst[0][148:151:194:197]">Dies</span><span> </span><span id="Dst[0][153:157:199:209]">vereinfacht</span><span> das </span><span id="Dst[0][159:165:215:220]">Testen</span><span> </span><span id="Dst[0][167:167:222:224]">ein</span><span> </span><span id="Dst[0][169:171:226:230]">wenig</span><span> </span><span id="Dst[0][173:183:232:244]">komplizierter</span><span>,</span><span> </span><span id="Dst[0][186:188:247:250]">aber</span><span> es </span><span id="Dst[0][190:198:252:255]">gibt</span><span> </span><span id="Dst[0][200:204:260:263]">noch</span><span> </span><span id="Dst[0][206:209:265:268]">Wege</span><span>, </span><span id="Dst[0][211:216:271:272]">um</span><span> </span><span id="Dst[0][218:221:274:279]">dieses</span><span>,</span><span> </span><span id="Dst[0][224:230:282:284]">wie</span><span> das </span><span id="Dst[0][232:239:290:302]">Erstellen von</span><span> </span><span id="Dst[0][241:261:304:327]">verschiedenen Subdomains</span><span> </span><span id="Dst[0][263:265:329:331]">für</span><span> </span><span id="Dst[0][267:270:333:336]">apps</span><span>,</span><span> </span><span id="Dst[0][273:279:339:344]">testen</span><span> </span><span id="Dst[0][281:284:346:348]">sie</span><span> </span><span id="Dst[0][286:290:350:352]">mit</span><span> </span><span id="Dst[0][292:294:354:356]">der</span><span> </span><span id="Dst[0][296:302:358:364]">Firefox</span><span>-</span><span id="Dst[0][304:305:366:367]">OS</span><span>-</span><span id="Dst[0][307:315:369:377]">Simulator</span><span>,</span><span> </span><span id="Dst[0][318:319:380:383]">oder</span><span> </span><span id="Dst[0][321:327:385:390]">testen</span><span> </span><span id="Dst[0][329:331:392:394]">die</span><span> </span><span id="Dst[0][333:339:396:402]">Install</span><span>-</span><span id="Dst[0][341:353:404:417]">Funktionalität</span><span> </span><span id="Dst[0][355:356:419:421]">auf</span><span> </span><span id="Dst[0][358:364:423:429]">Firefox</span><span> </span><span id="Dst[0][366:380:431:448]">Aurora/nächtliche,</span><span> </span><span id="Dst[0][382:386:450:456]">welches</span><span> </span><span id="Dst[0][395:397:458:462]">Ihnen</span><span> </span><span id="Dst[0][388:393:464:470]">erlaubt</span><span> </span><span id="Dst[0][399:400:472:473]">zu</span><span> </span><span id="Dst[0][410:420:475:488]">installierbare</span><span> </span><span id="Dst[0][422:429:490:503]">Webanwendungen</span><span> </span><span id="Dst[0][431:432:505:507]">auf</span><span> </span><span id="Dst[0][434:436:509:511]">dem</span><span> </span><span id="Dst[0][438:444:513:519]">Desktop</span><span> zu </span><span id="Dst[0][402:408:524:535]">installieren</span><span>.</span><span> </span><span id="Dst[0][447:449:538:542]">Siehe</span><span> </span><a href="/en-US/docs/Web/Apps/FAQs/About_app_manifests"><span id="Dst[0][451:454:544:547]">FAQs</span><span> </span><span id="Dst[0][456:460:549:552]">über</span><span> </span><span id="Dst[0][462:465:554:557]">apps</span><span> </span><span id="Dst[0][467:475:559:567]">Manifeste</span></a><span> </span><span id="Dst[0][477:479:569:571]">für</span><span> </span><span id="Dst[0][481:484:573:579]">weitere</span><span> </span><span id="Dst[0][486:496:581:593]">Informationen</span><span> </span><span id="Dst[0][498:499:595:597]">zur</span><span> </span><span id="Dst[0][501:507:599:606]">Herkunft</span><span>.</span></div>
+  </div>
+ </div>
+ <div class="mttextarea" dir="ltr" id="TranslationOutput">
+  <h3 id="div[0]" name="div[0]"><span id="Dst[0][0:4:0:4]">WebRT</span><span> </span><span id="Dst[0][6:9:6:9]">APIs</span><span> </span><span id="Dst[0][11:28:11:11]">(</span><span id="Dst[0][30:34:12:15]">APIs</span><span> auf der </span><span id="Dst[0][11:28:25:33]">Grundlage</span><span> von </span><span id="Dst[0][11:28:39:52]">Berechtigungen</span><span id="Dst[0][30:34:53:53]">)</span></h3>
+ </div>
+ <div class="mttextarea" dir="ltr" id="TranslationOutput">
+  <div>
+   <span id="Dst[0][0:4:0:1]">Es</span><span> </span><span id="Dst[0][6:8:3:6]">gibt</span><span> </span><span id="Dst[0][10:10:8:11]">eine</span><span> </span><span id="Dst[0][12:17:13:17]">Reihe</span><span> </span><span id="Dst[0][19:20:19:21]">von</span><span> </span><span id="Dst[0][22:28:23:29]">WebAPIs</span><span id="Dst[0][30:33:30:34]">, </span><span id="Dst[0][49:51:43:46]">aber</span><span> die </span><span id="Dst[0][53:59:48:56]">benötigen</span><span> </span><span id="Dst[0][61:71:58:71]">spezielle Berechtigungen</span><span> </span><span id="Dst[0][73:75:73:75]">für</span><span> </span><span id="Dst[0][77:80:77:82]">dieses</span><span> </span><span id="Dst[0][91:97:94:100]">Feature</span><span> </span><span id="Dst[0][105:111:102:110]">aktiviert</span><span> </span><span id="Dst[0][102:103:112:117]">werden</span><span>.</span><span> </span><span id="Dst[0][114:117:120:123]">Apps</span><span> </span><span id="Dst[0][119:121:125:130]">können</span><span> </span><span id="Dst[0][123:130:132:143]">registrieren</span><span> </span><span id="Dst[0][132:150:145:170]">Berechtigungsanforderungen</span><span> </span><span id="Dst[0][152:157:172:180]">innerhalb</span><span> </span><span id="Dst[0][159:161:182:184]">der</span><span> </span><code><span id="Dst[0][163:177:186:200]">manifest.webapp</span></code><span>-</span><span id="Dst[0][179:182:202:206]">Datei</span><span> </span><span id="Dst[0][184:187:208:210]">wie</span><span> </span><span id="Dst[0][189:190:212:216]">folgt</span><span>:</span></div>
+  <div>
+    </div>
+ </div>
+ <pre class="brush: js">// Neuer Key im Manifest : "permissions"
+// Anforderung der Zugriffe auf eine belibige Anzahl von APIs
+// Hier bitten wir um die berechtigung für die SystemXHR API
+"permissions": {
+    "systemXHR": {}
+}</pre>
+ <div class="mttextarea" dir="ltr" id="TranslationOutput">
+  <div>
+   <span id="Dst[0][0:2:0:2]">Die</span><span> </span><span id="Dst[0][4:8:4:7]">drei</span><span> </span><span id="Dst[0][10:15:9:14]">Stufen</span><span> </span><span id="Dst[0][17:18:16:18]">der</span><span> </span><span id="Dst[0][20:29:20:31]">Berechtigung</span><span> </span><span id="Dst[0][31:33:33:36]">sind</span><span> </span><span id="Dst[0][35:36:38:40]">wie</span><span> </span><span id="Dst[0][38:44:42:46]">folgt</span><span>:</span></div>
+  <div>
+    </div>
+ </div>
+ <ul>
+  <li>
+   <div class="mttextarea" dir="ltr" id="TranslationOutput">
+    <div>
+     <span id="Dst[0][0:5:0:5]">Normal</span><span> </span><span id="Dst[0][7:7:7:7]">—</span><span> </span><span id="Dst[0][9:12:9:12]">APIs</span><span id="Dst[0][14:17:13:17]">, die</span><span> </span><span id="Dst[0][30:32:19:22]">jede</span><span> </span><span id="Dst[0][34:37:24:26]">Art</span><span> </span><span id="Dst[0][39:40:28:30]">von</span><span> </span><span id="Dst[0][42:48:32:41]">speziellen</span><span> </span><span id="Dst[0][50:67:43:64]">Zugriffsberechtigungen</span><span> </span><span id="Dst[0][19:23:66:70]">nicht</span><span> </span><span id="Dst[0][25:28:72:79]">brauchen</span><span>.</span></div>
+   </div>
+  </li>
+  <li>
+   <div class="mttextarea" dir="ltr" id="TranslationOutput">
+    <div>
+     <span id="Dst[0][0:9:0:12]">Privilegierte</span><span> </span><span id="Dst[0][11:11:14:14]">—</span><span> </span><span id="Dst[0][13:16:16:19]">APIs</span><span> </span><span id="Dst[0][28:29:21:23]">für</span><span> </span><span id="Dst[0][31:40:25:34]">Entwickler</span><span> </span><span id="Dst[0][49:50:36:37]">in</span><span> </span><span id="Dst[0][52:56:39:43]">ihren</span><span> </span><span id="Dst[0][58:69:45:55]">Anwendungen</span><span> zu </span><span id="Dst[0][45:47:60:68]">verwenden</span><span>, </span><span id="Dst[0][72:81:71:77]">solange</span><span> </span><span id="Dst[0][83:86:79:81]">sie</span><span> </span><span id="Dst[0][111:112:83:84]">in</span><span> </span><span id="Dst[0][114:116:86:88]">der</span><span> </span><span id="Dst[0][118:120:90:92]">app</span><span> Zugriffsberechtigungen </span><span id="Dst[0][18:26:117:125]">verfügbar</span><span> </span><span id="Dst[0][122:135:127:141]">Manifestdateien</span><span> </span><span id="Dst[0][138:140:143:145]">und</span><span> </span><span id="Dst[0][142:151:147:155]">verteilen</span><span> </span><span id="Dst[0][153:156:157:161]">diese</span><span> </span><span id="Dst[0][158:164:163:167]">durch</span><span> </span><span id="Dst[0][166:166:169:172]">eine</span><span> </span><span id="Dst[0][168:174:174:190]">vertrauenswürdige</span><span> </span><span id="Dst[0][176:181:192:197]">Quelle</span><span>.</span></div>
+   </div>
+  </li>
+  <li>
+   <div class="mttextarea" dir="ltr" id="TranslationOutput">
+    <div>
+     <span class="dhighlight" id="Dst[0][0:8:0:12]">Zertifizierte</span><span> </span><span id="Dst[0][10:10:14:14]">—</span><span> </span><span id="Dst[0][12:15:16:19]">APIs</span><span id="Dst[0][17:20:20:24]">, die</span><span> </span><span id="Dst[0][30:37:26:33]">wichtige</span><span> </span><span id="Dst[0][39:47:35:44]">Funktionen</span><span> </span><span id="Dst[0][49:50:46:48]">auf</span><span> </span><span id="Dst[0][52:52:50:54]">einem</span><span> </span><span id="Dst[0][54:59:56:60]">Gerät</span><span>,</span><span> </span><span id="Dst[0][62:68:63:65]">wie</span><span> </span><span id="Dst[0][70:72:67:69]">den</span><span> </span><span id="Dst[0][74:77:71:76]">Aufruf</span><span>-</span><span id="Dst[0][79:84:78:83]">Dialer</span><span> </span><span id="Dst[0][86:88:85:87]">und</span><span> </span><span id="Dst[0][90:98:89:97]">messaging</span><span>-</span><span id="Dst[0][100:107:99:105]">Dienste</span><span> zu </span><span id="Dst[0][22:28:110:116]">steuern</span><span>.</span><span> </span><span id="Dst[0][110:114:119:123]">Diese</span><span> </span><span id="Dst[0][116:118:125:128]">sind</span><span> in der </span><span id="Dst[0][120:128:137:141]">Regel</span><span> </span><span id="Dst[0][130:132:143:147]">nicht</span><span> </span><span id="Dst[0][134:142:149:157]">verfügbar</span><span> </span><span id="Dst[0][144:146:159:161]">für</span><span> </span><span id="Dst[0][148:169:163:177]">Drittentwickler</span><span>.</span></div>
+   </div>
+  </li>
+ </ul>
+ <div class="mttextarea" dir="ltr" id="TranslationOutput">
+  <div>
+   <span id="Dst[0][4:7:0:6]">Weitere</span><span> </span><span id="Dst[0][9:19:8:20]">Informationen</span><span> </span><span id="Dst[0][21:22:22:23]">zu</span><span> </span><span id="Dst[0][24:26:25:27]">app</span><span>-</span><span id="Dst[0][28:44:29:47]">Berechtigungsstufen</span>,<a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Packaged_apps#Types_of_packaged_apps"><span id="Dst[0][5:9:0:4]"> Arten</span><span> </span><span id="Dst[0][11:12:6:8]">von</span><span> </span><span id="Dst[0][14:21:10:19]">verpackten</span><span> </span><span id="Dst[0][23:26:21:24]">apps</span></a><span> </span><span id="Dst[0][0:3:26:30]">lesen</span>.<span id="Dst[0][0:2:0:2]"> Sie</span><span> </span><span id="Dst[0][4:11:4:9]">finden</span><span> </span><span id="Dst[0][17:20:11:17]">weitere</span><span> </span><span id="Dst[0][22:32:19:31]">Informationen</span><span> </span><span id="Dst[0][34:38:33:36]">über</span><span> </span><span id="Dst[0][58:68:60:73]">Berechtigungen</span><span id="Dst[0][45:48:45:48]"> welche APIs</span><span> </span><span id="Dst[0][50:56:50:58]">erfordern</span><span> </span><span>,</span><span> </span><span id="Dst[0][71:73:76:78]">und</span><span> </span><span id="Dst[0][75:78:80:85]">welche</span><span> </span><span id="Dst[0][80:90:87:100]">Berechtigungen</span><span> </span><span id="Dst[0][92:94:102:105]">sind</span><span> </span><span id="Dst[0][96:103:107:118]">erforderlich</span><span>,</span><span> </span><span id="Dst[0][106:107:121:122]">um</span><span> </span><a href="/en-US/docs/Web/Apps/App_permissions"><span id="Dst[0][109:111:124:126]">App</span><span>-</span><span id="Dst[0][113:123:128:141]">Berechtigungen</span></a><span>.</span></div>
+  <div>
+    </div>
+ </div>
+ <div class="note">
+  <div class="mttextarea" dir="ltr" id="TranslationOutput">
+   <div>
+    <span id="Dst[0][0:3:0:5]">Es ist</span><span> </span><span id="Dst[0][5:13:7:13]">wichtig</span><span> </span><span id="Dst[0][15:16:15:16]">zu</span><span> </span><span id="Dst[0][18:21:18:25]">beachten</span><span id="Dst[0][23:26:26:31]">, dass</span><span> </span><span id="Dst[0][28:30:33:37]">nicht</span><span> </span><span id="Dst[0][32:34:39:42]">alle</span><span> </span><span id="Dst[0][36:38:44:46]">Web</span><span>-</span><span id="Dst[0][40:43:48:51]">APIs</span><span> </span><span id="Dst[0][67:72:53:54]">in</span><span> </span><span id="Dst[0][74:76:56:58]">der</span><span> </span><span id="Dst[0][78:84:60:66]">Firefox</span><span>-</span><span id="Dst[0][86:87:68:69]">OS</span><span>-</span><span id="Dst[0][89:97:71:79]">Simulator</span><span> </span><span id="Dst[0][55:65:81:89]">umgesetzt</span><span> </span><span id="Dst[0][50:53:91:96]">werden</span><span>.</span></div>
+  </div>
+ </div>
+ <h2 id="Tools_Testen">Tools &amp; Testen</h2>
+ <div class="mttextarea" dir="ltr" id="TranslationOutput">
+  <div>
+   <span id="Dst[0][0:6:0:5]">Testen</span><span> </span><span id="Dst[0][8:9:7:9]">ist</span><span> </span><span id="Dst[0][11:20:11:21]">unglaublich</span><span> </span><span id="Dst[0][22:30:23:29]">wichtig</span><span>, </span><span id="Dst[0][32:35:32:35]">wenn</span><span> </span><span id="Dst[0][48:53:37:42]">mobile</span><span> </span><span id="Dst[0][55:61:44:49]">Geräte</span><span> </span><span id="Dst[0][37:46:51:61]">unterstützt</span><span>.</span><span> </span><span id="Dst[0][64:68:64:65]">Es</span><span> </span><span id="Dst[0][70:72:67:70]">gibt</span><span> </span><span id="Dst[0][74:77:72:76]">viele</span><span> </span><span id="Dst[0][79:85:78:85]">Optionen</span><span> </span><span id="Dst[0][87:89:87:89]">zum</span><span> </span><span id="Dst[0][91:97:91:96]">Testen</span><span> von </span><span id="Dst[0][99:109:102:116]">installierbaren</span><span> </span><span id="Dst[0][111:114:118:121]">open</span><span>-</span><span id="Dst[0][116:118:123:125]">Web</span><span>-</span><span id="Dst[0][120:123:127:130]">apps</span><span>.</span></div>
+  <div>
+    </div>
+ </div>
+ <h3 id="Firefox_OS_Simulator">Firefox OS Simulator</h3>
+ <div class="mttextarea" dir="ltr" id="TranslationOutput">
+  <div>
+   <span id="Dst[0][0:9:0:11]">Installation</span><span> </span><span id="Dst[0][11:13:13:15]">und</span><span> </span><span id="Dst[0][15:19:17:26]">Verwendung</span><span> </span><span id="Dst[0][21:23:28:30]">der</span><span> </span><a href="https://marketplace.firefox.com/developers/docs/firefox_os_simulator"><span id="Dst[0][25:31:32:38]">Firefox</span><span>-</span><span id="Dst[0][33:34:40:41]">OS</span><span>-</span><span id="Dst[0][36:44:43:51]">Simulator</span></a><span> </span><span id="Dst[0][46:47:53:55]">ist</span><span> </span><span id="Dst[0][49:51:57:59]">der</span><span> </span><span id="Dst[0][53:59:61:70]">einfachste</span><span> </span><span id="Dst[0][61:63:72:74]">Weg</span><span> </span><span id="Dst[0][65:66:76:78]">zum</span><span> </span><span id="Dst[0][68:73:80:88]">aufstehen</span><span> </span><span id="Dst[0][75:77:90:92]">und</span><span> </span><span id="Dst[0][79:85:94:99]">laufen</span><span> </span><span id="Dst[0][87:90:101:103]">mit</span><span> </span><span id="Dst[0][92:95:105:109]">Ihrer</span><span> </span><span id="Dst[0][97:100:111:113]">app</span><span>. </span><span id="Dst[0][102:106:116:119]">Nach</span><span> der </span><span id="Dst[0][108:118:125:136]">Installation</span><span> </span><span id="Dst[0][120:122:138:140]">des</span><span> </span><span id="Dst[0][124:132:142:151]">Simulators</span><span> </span><span id="Dst[0][138:139:153:155]">ist</span><span> </span><span id="Dst[0][135:136:157:158]">es</span><span> </span><span id="Dst[0][152:155:160:162]">aus</span><span> </span><span id="Dst[0][157:159:164:166]">dem</span><span> </span><span id="Dst[0][161:165:168:172]">Tools</span><span id="Dst[0][167:168:173:174]">-&gt;</span><span> </span><span id="Dst[0][170:172:176:178]">Web</span><span> </span><span id="Dst[0][174:182:180:188]">Developer</span><span id="Dst[0][184:185:189:190]">-&gt;</span><span> </span><span id="Dst[0][187:193:192:198]">Firefox</span><span>-</span><span id="Dst[0][195:196:200:201]">OS</span><span>-</span><span id="Dst[0][198:206:203:211]">Simulator</span><span>-</span><span id="Dst[0][208:211:213:216]">Menü</span><span> </span><span id="Dst[0][141:150:218:227]">zugänglich</span><span>.</span><span> </span><span id="Dst[0][214:216:230:232]">Der</span><span> </span><span id="Dst[0][218:226:234:242]">Simulator</span><span> </span><span id="Dst[0][228:235:244:250]">startet</span><span> </span><span id="Dst[0][237:240:252:254]">mit</span><span> </span><span id="Dst[0][242:242:256:260]">einer</span><span> </span><span id="Dst[0][244:253:262:271]">JavaScript</span><span>-</span><span id="Dst[0][255:261:273:279]">Konsole</span><span>, </span><span id="Dst[0][263:264:282:286]">damit</span><span> </span><span id="Dst[0][266:268:288:290]">Sie</span><span> </span><span id="Dst[0][280:283:292:295]">Ihre</span><span> </span><span id="Dst[0][285:295:297:305]">Anwendung</span><span> </span><span id="Dst[0][302:307:307:308]">in</span><span> </span><span id="Dst[0][309:311:310:312]">den</span><span> </span><span id="Dst[0][313:321:314:322]">Simulator</span><span> </span><span id="Dst[0][274:278:324:331]">Debuggen</span><span> </span><span id="Dst[0][270:272:333:338]">können</span><span>.</span></div>
+  <div>
+    </div>
+ </div>
+ <h3 id="App_Manager">App Manager</h3>
+ <div class="mttextarea" dir="ltr" id="TranslationOutput">
+  <div>
+   <span id="Dst[0][0:2:0:2]">Das</span><span> </span><span id="Dst[0][4:6:4:7]">neue</span><span> </span><span id="Dst[0][8:10:9:12]">Kind</span><span> </span><span id="Dst[0][12:13:14:16]">auf</span><span> </span><span id="Dst[0][15:17:18:20]">den</span><span> </span><span id="Dst[0][19:23:22:26]">Block</span><span> </span><span id="Dst[0][25:39:28:42]">im Hinblick auf</span><span> die </span><span id="Dst[0][41:53:48:56]">Testtools</span><span> </span><span id="Dst[0][55:63:58:62]">nennt</span><span> man </span><span id="Dst[0][65:67:68:70]">den</span><span> </span><a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_App_Manager"><span id="Dst[0][69:71:72:74]">App</span><span>-</span><span id="Dst[0][73:79:76:82]">Manager</span></a><span>.</span><span> Mit </span><span id="Dst[0][82:85:89:94]">diesem</span><span> </span><span id="Dst[0][87:90:96:99]">Tool</span><span> </span><span id="Dst[0][92:97:101:106]">können</span><span> </span><span id="Dst[0][99:101:108:110]">Sie</span><span> </span><span id="Dst[0][106:112:112:121]">Verbindung</span><span> mit </span><span id="Dst[0][133:133:127:131]">einem</span><span> </span><span id="Dst[0][135:144:133:143]">kompatiblen</span><span> </span><span id="Dst[0][146:151:145:149]">Gerät</span><span> </span><span id="Dst[0][153:155:151:154]">über</span><span> </span><span id="Dst[0][157:159:156:158]">USB</span><span> </span><span id="Dst[0][161:163:160:164]">(oder</span><span> </span><span id="Dst[0][165:165:166:168]">ein</span><span> </span><span id="Dst[0][167:173:170:176]">Firefox</span><span>-</span><span id="Dst[0][175:176:178:179]">OS</span><span>-</span><span id="Dst[0][178:188:181:190]">Simulator)</span><span> </span><span id="Dst[0][114:120:192:198]">desktop</span><span> </span><span id="Dst[0][122:128:200:206]">Firefox</span><span>,</span><span> </span><span id="Dst[0][195:198:209:212]">apps</span><span> </span><span id="Dst[0][200:207:214:219]">direkt</span><span> </span><span id="Dst[0][209:210:221:223]">auf</span><span> </span><span id="Dst[0][212:214:225:227]">das</span><span> </span><span id="Dst[0][216:221:229:233]">Gerät</span><span> </span><span id="Dst[0][190:193:235:242]">schieben</span><span>,</span><span> </span><span id="Dst[0][233:236:245:248]">apps</span><span> zu </span><span id="Dst[0][224:231:253:262]">validieren</span><span> </span><span id="Dst[0][239:241:264:266]">und</span><span> </span><span id="Dst[0][243:247:268:275]">Debuggen</span><span> </span><span id="Dst[0][249:252:277:279]">sie</span><span>, </span><span id="Dst[0][254:255:282:284]">wie</span><span> </span><span id="Dst[0][257:260:286:288]">sie</span><span> </span><span id="Dst[0][266:267:290:292]">auf</span><span> </span><span id="Dst[0][269:271:294:296]">dem</span><span> </span><span id="Dst[0][273:278:298:302]">Gerät</span><span> </span><span id="Dst[0][262:264:304:313]">ausgeführt</span><span>.</span></div>
+  <div>
+    </div>
+ </div>
+ <h3 id="Unit_Tests">Unit Tests</h3>
+ <div class="mttextarea" dir="ltr" id="TranslationOutput">
+  <div>
+   <span id="Dst[0][0:3:0:3]">Unit</span><span>-</span><span id="Dst[0][5:9:5:9]">Tests</span><span> </span><span id="Dst[0][11:13:11:14]">sind</span><span> </span><span id="Dst[0][15:23:16:19]">sehr</span><span> </span><span id="Dst[0][25:32:21:28]">wertvoll</span><span>, </span><span id="Dst[0][34:37:31:34]">wenn</span><span> Sie </span><span id="Dst[0][47:48:40:42]">auf</span><span> </span><span id="Dst[0][50:58:44:56]">verschiedenen</span><span> </span><span id="Dst[0][60:66:58:64]">Geräten</span><span> zu </span><span id="Dst[0][39:45:69:74]">testen</span><span> </span><span id="Dst[0][68:70:76:78]">und</span><span> </span><span id="Dst[0][72:77:80:83]">baut</span><span>.</span><span> </span><span id="Dst[0][80:87:86:93]">jQuery's</span><span> </span><a href="http://qunitjs.com"><span id="Dst[0][89:93:95:99]">QUnit</span></a><span> </span><span id="Dst[0][95:96:101:103]">ist</span><span> </span><span id="Dst[0][98:98:105:108]">eine</span><span> </span><span id="Dst[0][100:106:110:117]">beliebte</span><span> </span><span id="Dst[0][108:118:119:132]">Client-seitige</span><span> </span><span id="Dst[0][128:134:134:147]">Dienstprogramm</span><span> zum </span><span id="Dst[0][120:126:153:158]">Testen</span><span>,</span><span> </span><span id="Dst[0][137:139:161:164]">aber</span><span> </span><span id="Dst[0][145:151:166:171]">können</span><span> </span><span id="Dst[0][141:143:173:175]">Sie</span><span> </span><span id="Dst[0][153:155:177:192]">einen beliebigen</span><span> </span><span id="Dst[0][157:159:194:197]">Satz</span><span> </span><span id="Dst[0][161:162:199:201]">von</span><span> </span><span id="Dst[0][164:176:203:211]">Testtools</span><span id="Dst[0][178:182:212:220]">, die Sie</span><span> </span><span id="Dst[0][178:182:222:228]">möchten</span><span>.</span></div>
+  <div>
+    </div>
+ </div>
+ <div class="mttextarea" dir="ltr" id="TranslationOutput">
+  <h3 id="div[0]" name="div[0]"><span id="Dst[0][11:17:0:6]">Firefox</span><span> </span><span id="Dst[0][19:20:8:9]">OS</span><span> </span><span id="Dst[0][22:23:11:13]">auf</span><span> </span><span id="Dst[0][25:25:15:19]">einem</span><span> </span><span id="Dst[0][27:32:21:25]">Gerät</span><span> </span><span id="Dst[0][0:9:27:38]">installieren</span></h3>
+ </div>
+ <div class="mttextarea" dir="ltr" id="TranslationOutput">
+  <div>
+   <span id="Dst[0][0:4:0:1]">Da</span><span> </span><span id="Dst[0][6:12:3:9]">Firefox</span><span>-</span><span id="Dst[0][14:15:11:12]">OS</span><span> </span><span id="Dst[0][20:21:14:16]">ein</span><span> </span><span id="Dst[0][23:26:18:21]">open</span><span>-</span><span id="Dst[0][28:33:23:28]">Source</span><span>-</span><span id="Dst[0][35:42:30:38]">Plattform</span><span> ist </span><span id="Dst[0][60:62:44:47]">sind</span><span> </span><span id="Dst[0][45:48:49:52]">Code</span><span> </span><span id="Dst[0][50:52:54:56]">und</span><span> </span><span id="Dst[0][54:58:58:62]">Tools</span><span> </span><span id="Dst[0][77:81:64:72]">Erstellen</span><span> </span><span id="Dst[0][83:85:74:76]">und</span><span> </span><span id="Dst[0][87:93:78:89]">installieren</span><span> </span><span id="Dst[0][95:101:91:97]">Firefox</span><span>-</span><span id="Dst[0][103:104:99:100]">OS</span><span> </span><span id="Dst[0][106:107:102:104]">auf</span><span> </span><span id="Dst[0][109:112:106:110]">Ihrem</span><span> </span><span id="Dst[0][114:116:112:118]">eigenen</span><span> </span><span id="Dst[0][118:123:120:124]">Gerät</span><span> </span><span id="Dst[0][64:72:126:134]">verfügbar</span><span>.</span><span> </span><span id="Dst[0][126:130:137:141]">Build</span><span> </span><span id="Dst[0][132:134:143:147]">sowie</span><span> </span><span id="Dst[0][136:160:149:172]">Installationsanweisungen</span><span> </span><span id="Dst[0][166:169:174:176]">und</span><span> </span><span id="Dst[0][174:178:178:188]">Anmerkungen</span><span> </span><span id="Dst[0][180:181:190:191]">zu</span><span> </span><span id="Dst[0][183:186:193:199]">welchen</span><span> </span><span id="Dst[0][188:194:201:207]">Geräten</span><span> </span><span id="Dst[0][196:197:209:210]">es</span><span> </span><span id="Dst[0][216:217:212:214]">auf</span><span>,</span><span> </span><span id="Dst[0][206:214:217:227]">installiert</span><span> </span><span id="Dst[0][203:204:229:234]">werden</span><span> </span><span id="Dst[0][199:201:236:239]">kann</span><span> </span><span id="Dst[0][220:222:241:246]">finden</span><span> Sie </span><span id="Dst[0][233:234:252:254]">auf</span><span> </span><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform"><span id="Dst[0][236:238:256:258]">MDN</span></a><span>.</span></div>
+  <div>
+    </div>
+ </div>
+ <div class="mttextarea" dir="ltr" id="TranslationOutput">
+  <div>
+   <span id="Dst[0][0:8:0:8]">Spezielle</span><span> </span><span id="Dst[0][10:16:10:16]">Firefox</span><span>-</span><span id="Dst[0][18:19:18:19]">OS</span><span> </span><span id="Dst[0][21:29:21:30]">Entwickler</span><span> </span><span id="Dst[0][31:37:32:39]">Vorschau</span><span> </span><span id="Dst[0][39:45:41:46]">Geräte</span><span> </span><span id="Dst[0][47:54:48:53]">stehen</span><span> </span><span id="Dst[0][56:64:55:67]">zur Verfügung</span><span>:</span><span> </span><span id="Dst[0][67:70:70:78]">Lesen Sie</span><span> </span><span id="Dst[0][72:74:80:85]">unsere</span><span> </span><a href="https://marketplace.firefox.com/developers/dev_phone"><span id="Dst[0][76:84:87:96]">Entwickler</span><span>-</span><span id="Dst[0][86:92:98:105]">Vorschau</span><span>-</span><span id="Dst[0][94:98:107:113]">Telefon</span><span>-</span><span id="Dst[0][100:103:115:119]">Seite</span><span> </span></a><span id="Dst[0][105:107:121:123]">für</span><span> </span><span id="Dst[0][109:112:125:131]">weitere</span><span> </span><span id="Dst[0][114:124:133:145]">Informationen</span><span>.</span></div>
+  <div>
+    </div>
+  <div>
+    </div>
+ </div>
+ <div class="mttextarea" dir="ltr" id="TranslationOutput">
+  <h2 id="div[0]" name="div[0]"><span id="Dst[0][0:2:0:2]">App</span><span>-</span><span id="Dst[0][4:13:4:13]">einreichen</span><span> </span><span id="Dst[0][15:17:15:17]">und</span><span> </span><span id="Dst[0][19:30:19:28]">Verteilung</span></h2>
+ </div>
+ <p>Wenn Ihre app abgeschlossen ist, können Sie es selbst hosten wie eine standard-Website oder app (Lesen Sie <a href="/en-US/docs/Web/Apps/Publishing/Self-publishing_Apps">self-publishing-Anwendungen</a> für weitere Informationen), oder es kann <a href="https://marketplace.firefox.com/developers/submit/app/manifest">eingereicht</a> werden, auf den <a href="https://marketplace.firefox.com">Firefox-Markt</a>. Ihre Anwendung Manifest überprüft werden können Sie wählen, welche Geräte Ihr app unterstützt (z.B. Firefox OS, Desktop, Firefox, Firefox Mobile, Firefox Tablet). Sobald validiert, können die app Liste innerhalb der Marktplatz Sie fügen Sie zusätzliche Informationen über Ihre app (Screenshots, Beschreibungen, Preise, etc.) und offiziell einreichen. Sobald die App genehmigt ist, ist Ihre app der Welt für die Beschaffung und Installation zur Verfügung.</p>
+ <div class="mttextarea" dir="ltr" id="TranslationOutput">
+  <h3 id="div[0]" name="div[0]"><span id="Dst[0][5:15:5:14]">Marktplatz</span><span> </span><span id="Dst[0][17:17:16:16]">&amp;</span><span id="Dst[0][0:3:0:3]"> Mehr</span><span id="Dst[0][27:37:18:24]"> Angaben</span></h3>
+ </div>
+ <ol>
+  <li><a href="/en-US/docs/Web/Apps/Publishing/Submitting_an_app"><span id="Dst[0][0:9:0:5]">Senden</span><span> Sie </span><span id="Dst[0][11:12:11:14]">eine</span><span> </span><span id="Dst[0][14:16:16:18]">App</span><span> </span><span id="Dst[0][18:19:20:22]">auf</span><span> </span><span id="Dst[0][21:23:24:26]">den</span><span> </span><span id="Dst[0][25:31:28:34]">Firefox</span><span>-</span><span id="Dst[0][33:34:36:37]">OS</span><span>-</span><span id="Dst[0][36:46:39:43]">Markt</span></a><a href="/en-US/docs/Web/Apps/Publishing/Submitting_an_app">z</a></li>
+  <li><a href="/en-US/docs/Web/Apps/Publishing/Marketplace_review_criteria"><span id="Dst[0][0:10:0:9]">Marktplatz</span><span>-</span><span id="Dst[0][12:26:11:23]">Prüfkriterien</span></a></li>
+  <li>
+   <div class="mttextarea" dir="ltr" id="TranslationOutput">
+    <div>
+     <a href="http://s.vid.ly/embeded.html?link=8k2n4w&amp;autoplay=false"><span id="Dst[0][0:2:0:2]">App</span><span>-</span><span id="Dst[0][4:13:4:13]">einreichen</span><span>-</span><span id="Dst[0][15:19:15:19]">Video</span><span>-</span><span id="Dst[0][21:31:21:29]">Anleitung</span></a></div>
+   </div>
+  </li>
+ </ol>
+ <p> </p>
+ <p> </p>
+ <p>Übersetzung bei <strong>Enes E.</strong></p>
+</article>
diff --git a/files/de/archive/b2g_os/quickstart/einfuerung_zu_firefox_os/index.html b/files/de/archive/b2g_os/quickstart/einfuerung_zu_firefox_os/index.html
new file mode 100644
index 0000000000..b262d5f208
--- /dev/null
+++ b/files/de/archive/b2g_os/quickstart/einfuerung_zu_firefox_os/index.html
@@ -0,0 +1,13 @@
+---
+title: Einführung zu Firefox OS
+slug: Archive/B2G_OS/Quickstart/Einfuerung_zu_Firefox_OS
+translation_of: Archive/B2G_OS/Quickstart/Intro_to_Firefox_OS
+---
+<div class="summary">
+ <p>Firefox OS ist ein neues Mobilbetriebssystem, entwickelt von Mozillas Boot to Gecko (B2G) Projekt. Es besteht aus einem Linux Kernel und bootet als eine auf Gecko basierende Laufzeitumgebung, die es Nutzern ermöglicht Anwendungen, geschrieben in <a href="//developer.mozilla.org/docs/HTML">HTML</a>, <a href="//developer.mozilla.org/docs/JavaScript">JavaScript</a>, und mit anderen offenen APIs für Webanwendungen, auszuführen.</p>
+</div>
+<p><strong>Firefox OS</strong> (also referred to by its codename "Boot to Gecko" or "B2G") is Mozilla's open source mobile operating system, based a Linux kernel, which boots into a Gecko-based runtime engine that lets users run applications developed entirely using <a href="//developer.mozilla.org/docs/HTML">HTML</a>, <a href="/en-US/docs/Web/CSS">CSS</a>, <a href="//developer.mozilla.org/docs/JavaScript">JavaScript</a>, and open web application APIs. Firefox OS is a mobile operating system that's free from proprietary technology while still a powerful platform that provides application developers an opportunity to create excellent products. In addition, it's flexible and capable enough to make the end user happy.</p>
+<p style="width: 480px; margin: 0 auto;"><iframe frameborder="0" height="270" src="https://www.youtube.com/embed/-9vktI70iHc/?feature=player_detailpage" width="480"></iframe></p>
+<p>Firefox OS comes with a suite of pre-installed applications called <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia">Gaia</a>, which handle the fundamental functions of the phone such as settings, calls, SMS, taking and storing photos, etc.</p>
+<p>For Web developers, the most important part to understand is that the entire user interface is a Web app, one that is capable of displaying and launching other Web apps. Any modifications you make to the user interface and any applications you create to run on Firefox OS are Web pages, albeit with enhanced access to the mobile device's hardware and services.</p>
+<p>Firefox OS is currently under heavy development; we are constantly working on ways to make it easier for you to use and hack on Gaia and create apps. However, you need knowledge about systems in order to do things like build the entire Firefox OS stack, or flash a phone with a build of Firefox OS. To find such information, and lots more besides, head on over to our <a href="/en-US/docs/Mozilla/Firefox_OS">Firefox OS content zone</a>.</p>
diff --git a/files/de/archive/b2g_os/quickstart/for_mobile_developers/index.html b/files/de/archive/b2g_os/quickstart/for_mobile_developers/index.html
new file mode 100644
index 0000000000..e4a00e9335
--- /dev/null
+++ b/files/de/archive/b2g_os/quickstart/for_mobile_developers/index.html
@@ -0,0 +1,40 @@
+---
+title: App development for mobile developers
+slug: Archive/B2G_OS/Quickstart/For_mobile_developers
+translation_of: Archive/B2G_OS/Quickstart/For_mobile_developers
+---
+<div class="summary">
+ <p>If you are a native mobile platform developer, why should you look into developer open web apps? This article talks you through open web app advantages, and the basic steps required to create one.</p>
+</div>
+<h2 id="Advantages">Advantages</h2>
+<p>For mobile application developers, the open web apps project offers these advantages:</p>
+<ul>
+ <li><strong>Simplicity</strong>: Develop on a single technology stack (HTML5/CSS/JavaScript) and deliver across all platforms, from smartphones to tablets to desktops.</li>
+ <li><strong>Standards</strong>: The technology stack is defined by standards bodies (W3C and Ecma) that operate in the open, rather than by particular technology or platform vendors.</li>
+ <li><strong>Freedom</strong>: You're not locked in to a vendor-controlled ecosystem. You can distribute your app through the Firefox Marketplace, your own website, or any other store based on Mozilla's open app store technology.</li>
+ <li><strong>Reach</strong>: You have the potential to reach Firefox's 450 million desktop users, as well as users of other desktop browsers and mobile users.</li>
+</ul>
+<h2 id="Steps_to_developing_a_Web_app">Steps to developing a Web app</h2>
+<dl>
+ <dt>
+  1. Develop your app using open Web technologies.</dt>
+ <dd>
+  You probably already know at least a bit about HTML, CSS, and JavaScript. The <a href="/en-US/learn">Learn</a> section of this website has resources to help you ramp up even more. As a mobile app developer, you already have a <a class="external" href="http://www.lukew.com/ff/entry.asp?933">Mobile First</a> approach to Web design.</dd>
+ <dt>
+  2. Add an <a href="/en-US/docs/Web/Apps/Manifest">app manifest</a>.</dt>
+ <dd>
+  All that inherently separates a Web app from a normal website is a single, JSON-format text file.</dd>
+ <dt>
+  3. Publish the app, either on your own site or in an app store (or both).</dt>
+ <dd>
+  Publishing it yourself requires <a href="/en-US/docs/Web/Apps/JavaScript_API">adding some code to your site to manage installing and updating the app</a> in users' browsers.</dd>
+</dl>
+<h2 id="Optional_features">Optional features</h2>
+<p>{{ page("/en-US/docs/Web/Apps/For_Web_developers", "Optional_features") }}</p>
+<h2 id="Useful_technologies">Useful technologies</h2>
+<p>See <a href="/en-US/docs/Web/Apps/For_Web_developers#Useful_technologies">Useful technologies</a>.</p>
+<h2 id="See_also">See also</h2>
+<ul>
+ <li><a href="http://smus.com/mobile-web-app-tech-stack">A mobile Web application stack</a></li>
+ <li><a href="/en-US/docs/Web/Apps/Apps_for_Android">Open Web Apps for Android</a></li>
+</ul>
diff --git a/files/de/archive/b2g_os/quickstart/index.html b/files/de/archive/b2g_os/quickstart/index.html
new file mode 100644
index 0000000000..ebe1f7c220
--- /dev/null
+++ b/files/de/archive/b2g_os/quickstart/index.html
@@ -0,0 +1,49 @@
+---
+title: Build
+slug: Archive/B2G_OS/Quickstart
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/B2G_OS/Quickstart
+---
+<div class="summary">
+  <p>Quickstart information on coding open web apps.</p>
+</div>
+<dl>
+  <dt>
+    <a href="/en-US/docs/Web/Apps/Quickstart/Build/Intro_to_open_web_apps">Introduction to open web apps</a></dt>
+  <dd>
+    What are open web apps? How they differ from regular web pages? Why is this significant? This article aims to answer these questions and more.</dd>
+  <dt>
+    <a href="/en-US/docs/Web/Apps/Quickstart/Build/Your_first_app">Your first app</a></dt>
+  <dd>
+    This article takes you through the basic steps and additional knowledge on top of regular web development required to create installable open web apps.</dd>
+  <dt>
+    <a href="/en-US/docs/Web/Apps/Quickstart/Build/Intro_to_Firefox_OS">Introduction to Firefox OS</a></dt>
+  <dd>
+    An introduction to Firefox OS, Mozilla's new open web app-based mobile platform.</dd>
+  <dt>
+    <a href="/en-US/docs/Web/Apps/Quickstart/Build/Intro_to_manifests">Introduction to manifests</a></dt>
+  <dd>
+    An FAQ designed to answer any questions you may have about manifests, hosting apps, origins, and other such topics.</dd>
+  <dt>
+    <a href="/en-US/docs/Web/Apps/Quickstart/Build/For_Web_developers">App development for web developers</a></dt>
+  <dd>
+    If you're a web developer, how do open web apps differ from what you're used to? This article explains all.</dd>
+  <dt>
+    <a href="/en-US/docs/Web/Apps/Quickstart/Build/For_mobile_developers">App development for mobile developers</a></dt>
+  <dd>
+    If you're a native mobile application developer, what advantages can open web apps bring to you, and how do they differ from what you are used to? Here are some ideas.</dd>
+  <dt>
+    <a href="/en-US/docs/Web/Apps/Quickstart/Build/Developing_app_functionality">Developing app functionality</a></dt>
+  <dd>
+    This page talks about the kinds of different functionality that you might want to build into your apps, with links to further information.</dd>
+  <dt>
+    <a href="/en-US/docs/Web/Apps/Quickstart/Build/Payments">Payments</a></dt>
+  <dd>
+    How do you build functionality to make people pay for installing your open web apps? Here is the lowdown.</dd>
+  <dt>
+    <a href="/en-US/docs/Web/Apps/Quickstart/Build/App_tools">App tools</a></dt>
+  <dd>
+    Last for this section, we provide some links to more information on the tools available to help you develop great open web apps.</dd>
+</dl>
diff --git a/files/de/archive/b2g_os/quickstart/open_web_apps_and_web_standards/index.html b/files/de/archive/b2g_os/quickstart/open_web_apps_and_web_standards/index.html
new file mode 100644
index 0000000000..f0767b57ed
--- /dev/null
+++ b/files/de/archive/b2g_os/quickstart/open_web_apps_and_web_standards/index.html
@@ -0,0 +1,38 @@
+---
+title: Offene Web Apps und Web Standards
+slug: Archive/B2G_OS/Quickstart/Open_Web_apps_and_Web_standards
+translation_of: Archive/B2G_OS/Quickstart/Intro_to_open_web_apps
+---
+<p><img alt="Multi devices" src="/files/4523/multidevices.png" style="width: 640px; height: 225px;"></p>
+<h2 id="Das_Web_ist_die_Plattform">Das Web ist die Plattform</h2>
+<p>Open Web Apps are a great opportunity for those who need to develop applications that work on the largest number of devices, and for those who cannot afford to develop an app for every vendor platform (such as Android, iOS, and "classical" desktop web browsers). The difference between an app and a website is that you can install an app and more thoroughly integrate it into your device. It’s not a bookmark — it’s part of a system. Open Web Apps hold that great promise. They are an opportunity that we should not miss, otherwise the Web might become fragmented once more.</p>
+<p>With this in mind it should be clear that Open Web Apps (OWA in short) are intended to be standardized and to become part of "the Web". If successful, OWA should eventually work on all browsers, operating systems anddevices.</p>
+<p>At Mozilla we are working hard to create this apps platform that is backed entirely by the open Web. It’s not intended to be a “Mozilla platform” or a “Firefox platform”. <strong>The Web is the platform</strong>. We’re creating a set of open APIs and implementations to show how portable apps can exist on the Web without vendor lock-in. Other groups like Facebook and Google Chrome are also working on apps platforms backed by the Web. <a href="https://developers.facebook.com/docs/guides/canvas/">Facebook apps</a> are meant to hook into Facebook and <a href="http://www.google.com/intl/en/chrome/webstore/apps.html">Chrome apps</a> are designed for Chrome OS devices and Google servers. Chrome apps are the most similar to Open Web Apps. We continue to collaborate with the Google Chrome team as app standards evolve and we definitely share a lot of the same vision. There is tremendous potential for all Web based app platforms to converge and we invite all vendors to help us build the right Open Web App APIs.</p>
+<p>Even though currently you must have a Mozilla Firefox-based engine ("Web runtime") to use Open Web Apps, it is not intended that this always will be the case. Many parts of the Open Web Apps project are still being worked out and it isn't possible to implement everything in all browsers at once. Although many parts of Open Web Apps are already standardized, many other parts are still in flux. It is intended and hoped that Open Web Apps will be a standard capability that is available in all major browsers.</p>
+<p>Therefore, when you read the MDN pages that deal with Open Web Apps, please keep in mind that even though much of the information is specific to Firefox right now, it will hopefully enable you to develop Open Web Apps for all browsers in the future.</p>
+<h2 id="Web_standards">Web standards</h2>
+<p>OWA technology is not a single piece, it is an umbrella that groups many different technologies and some of them are very young. At the moment, parts of OWA are standardized (HTML5, CSS, JavaScript, IndexedDB, etc.). Other parts are not yet standardized and the Mozilla implementation is thus specific to Firefox or to some other Mozilla technology. As the Mozilla mission is to share and to empower everyone, this situation is only temporary. That's why in the OWA docs we will try to clearly identify the parts of OWA that are not yet standardized.</p>
+<p>Please also note that there may be some OWA-related proposals and potential standards that are not used by Mozilla.</p>
+<h3 id="Intended_eventual_standards">Intended eventual standards</h3>
+<p>So here are the parts not standardized yet across the different Web platforms and that still are Firefox-only for the moment:</p>
+<ul>
+ <li><a href="/en-US/docs/Apps/Manifest">OWA manifest</a> for defining an app</li>
+ <li><a href="/en-US/docs/Apps/Apps_JavaScript_API">The Complete OWA API</a> for working with apps</li>
+ <li><a href="https://wiki.mozilla.org/WebAPI">Web APIs</a> to access things like phone, geolocation, etc. Also see <a href="http://arewemobileyet.com/">arewemobileyet.com</a> for a status report.</li>
+ <li><a href="/en-US/docs/Persona">Identity (Persona)</a> to work with user data</li>
+ <li><a href="https://wiki.mozilla.org/WebAPI/WebPayment">WebPayment API</a> to facilitate in-app payments and app purchases from any Marketplace</li>
+ <li><a href="https://wiki.mozilla.org/Apps/WebApplicationReceipt">OWA Receipts</a> to verify paid apps on any device and sell apps from any Marketplace</li>
+</ul>
+<h3 id="Marketplace">Marketplace</h3>
+<h4 id="Buy_Once_Run_Everywhere">Buy Once, Run Everywhere</h4>
+<p>From the ground up Mozilla has been building an apps system that lets users buy an app once and run it on all of their HTML5 devices. Very soon Mozilla will <a href="http://bits.blogs.nytimes.com/2012/09/07/a-firefox-smartphone-for-the-poor/">launch the first Firefox OS phone</a> but that will be just one device on which to run your apps. When you purchase an app through the <a href="https://marketplace.firefox.com/">Firefox Marketplace</a>, the system installs a receipt on your device. The <a href="https://wiki.mozilla.org/Apps/WebApplicationReceipt">receipt</a> is a JSON Web Token with metadata that links to the Marketplace’s public key and its verification service URL. When an app starts up it can verify the receipt but the receipt on the device <em>is not tied</em> to the Firefox Marketplace. The receipt is just a cryptographically verifiable proof of purchase. Anyone can sell open Web apps if they follow the receipt specs. <strong>When you buy an app, it is intended to be portable across any device that supports the Open Web Apps system.</strong></p>
+<p>Mozilla is building the infrastructure needed to run Open Web Apps on any HTML5 device. <a href="http://www.mozilla.org/en-US/firefox/mobile/features/">Firefox for Android</a> will let you install and run apps (you can try it today on the <a href="http://nightly.mozilla.org/">nightly</a> build). Installed app icons go to your home screen just like regular Android apps. You can also install and run Web apps on your Windows, Mac, or Linux desktop using Firefox (this currently works in the <a href="http://nightly.mozilla.org/">nightly</a> build). Currently some version of Firefox is required, but it is intended that the Open Web Apps system will eventually be supported by all major browsers as a set of standards. From day one Mozilla has included all major HTML5 compliant browsers in its proof of concepts; you can take a look at this hosted JavaScript <a href="https://apps.persona.org/include.js">shim</a> for ideas on how to support the apps platform on a non-Firefox browser.</p>
+<p>In the future the Open Web Apps system will support <a href="http://docs.services.mozilla.com/aitc/">syncing your installed apps</a> across devices. Since receipts are portable you could just sync them yourself if you wanted to. In case it’s not obvious, you can always run a free open Web app in any browser because it is no different than a website. It might, however, use new <a href="https://wiki.mozilla.org/WebAPI/">mobile specific web APIs</a> which are not implemented on all platforms.</p>
+<h3 id="WebPayment_API">WebPayment API</h3>
+<h4 id="Commerce_For_Apps">Commerce For Apps</h4>
+<p>Part of the success of mobile app platforms like iOS and Android is that they make it very easy to try out new business models through mobile payments. Those models are still evolving but commerce is no doubt something that, at the moment, is awkward on the desktop Web and more natural on mobile. Specifically, it’s very convenient to charge something to your phone bill when you’re already accessing it from your phone anyway. With the launch of Firefox OS, the apps ecosystem will support app purchases and in-app payments through the <a href="https://wiki.mozilla.org/WebAPI/WebPayment" style="">WebPayment API</a>. Supporting commerce is crucial for the growth of an apps platform. <strong>The use of the proposed payment API is completely <em>optional</em></strong>. Mozilla won’t prevent any app from using its own in-app payment system.</p>
+<h2 id="See_also">See also</h2>
+<ul>
+ <li><a href="https://blog.mozilla.org/webdev/2012/09/14/apps-the-web-is-the-platform/">Apps: The Web Is The Platform</a>, by Kumar McMillan (the blog post from which lots of the content of this article is borrowed)</li>
+ <li><a href="https://plus.google.com/113127438179392830442/posts/fR3iiuN4kEF">See the Web platform succeed for applications</a>, by Paul Irish</li>
+</ul>
diff --git a/files/de/archive/b2g_os/releases/1.4/index.html b/files/de/archive/b2g_os/releases/1.4/index.html
new file mode 100644
index 0000000000..47b18c0fbc
--- /dev/null
+++ b/files/de/archive/b2g_os/releases/1.4/index.html
@@ -0,0 +1,71 @@
+---
+title: Firefox OS 1.4 for developers
+slug: Archive/B2G_OS/Releases/1.4
+translation_of: Archive/B2G_OS/Releases/1.4
+---
+<div class="summary">
+ <p><span class="seoSummary"><strong>Firefox OS 1.4</strong> ist derzeit noch eien Vorabversion. Die Gecko Komponenten basieren auf Firefox 30 (dazu:<span class="seoSummary"><a href="/en-US/docs/Mozilla/Firefox/Releases/30" title="/en-US/docs/Mozilla/Firefox/Releases/28">Firefox 30 release notes for developers</a>). Diese Seite beschreibt die neu hinzugefügten Entwicklerfunktionen in Firefox OS 1.4.</span></span></p>
+</div>
+<h2 id="CSS">CSS</h2>
+<p>Gecko allgemein:</p>
+<ul>
+ <li>Das Merkmal <a href="/de/docs/Web/CSS/background-blend-mode" title="Die background-blend-mode Eigenschaft beschreibt, wie sich die Hintergrundbilder eines Elementes, sowie dessen Hintergrundfarbe, miteinander vemischen."><code>background-blend-mode</code></a> ist jetzt standardmäßig aktiviert(<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=970600" title="FIXED: Enable background-blend-mode by default">Bug 970600</a>).</li>
+ <li>Das nicht standardmäßige Merkmal <a href="/de/docs/Web/CSS/overflow-clip-box" title="Die overflow-clip-box CSS Eigenschaft bestimmt, bezogen auf welche Box die Zuschnitt erfolgt, wenn ein Überlauf stattfindet."><code>overflow-clip-box</code></a> ist jetzt lediglich für die Nutzung in UA stylesheets aktiviert(<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=966992" title="FIXED: Implement overflow-clip-box: content-box">Bug 966992</a>).</li>
+ <li>Das Merkmal <a href="/de/docs/Web/CSS/line-height" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben; bitte erwäge, mitzuwirken!"><code>line-height</code></a> beeinflusst jetzt auch einzeilige Texteingaben (<code>&lt;input type=text|password|email|search|tel|url|unknown&gt;</code> types), es kann diese allerdings nicht unter eine Größe von <code>1.0</code> verkleinern (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=349259" title="FIXED: CSS Property 'line-height' has no effects on input text fields">Bug 349259</a>).</li>
+ <li>Das Merkmal <a href="/de/docs/Web/CSS/line-height" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben; bitte erwäge, mitzuwirken!"><code>line-height</code></a> beeinflusst jetz auch <code>type=button</code>, ohne Einschränkungen</li>
+ <li>Änderungen des Namens des Keyframes beeinflussen nicht die gegenwärtigen Elemente (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=978648" title="FIXED: Change to keyframes' name does not affect current elements">Bug 978648</a>).</li>
+</ul>
+<h2 id="JavaScript">JavaScript</h2>
+<p><a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> general:</p>
+<ul>
+ <li>New ES6-compatible <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Array_comprehensions">array comprehensions</a> <code>[for (item of iterable) item]</code> and <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Generator_comprehensions">generator comprehensions</a> <code>(for (item of iterable) item)</code> have been implemented (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=979865" title="FIXED: Implement ES6 array and generator comprehensions">Bug 979865</a>).</li>
+ <li>Typed arrays are now extensible and support new named properties (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=695438" title="FIXED: TypedArrays don't support new named properties">Bug 695438</a>).</li>
+ <li>The <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Error/stack" title="Die nicht standardisierte stack Eigenschaft des Error Objektes zeigt den Verlauf der aufgerufenen Funktionen. Dabei wird die Reihenfolge der Aufrufe, der Zeile und die Datei der Aufrufes und die übergebenen Argumenten angegeben. Der stack String verläuft von den jüngsten Aufrufen zu den vorherigen Aufrufen, bis zum globalen Scope zurück."><code>Error.prototype.stack</code></a> property now contains column numbers (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=762556" title="FIXED: Error stack should contain column number">Bug 762556</a>) and has been improved <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/Stack#Stack_of_eval'ed_code">when using <code>Function()</code> and <code>eval()</code> calls</a>. This can help you to better debug minified or generated JavaScript code.</li>
+</ul>
+<h2 id="InterfacesAPIsDOM">Interfaces/APIs/DOM</h2>
+<p>Firefox OS specific:</p>
+<ul>
+ <li>Availability of camera object now conditional on availability of <span id="summary_alias_container"><span id="short_desc_nonedit_display">Navigator.HasCameraSupport (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=983180" title="FIXED: [Camera][Gecko] Make availability of camera object conditional on Navigator.HasCameraSupport">Bug 983180</a>).</span></span></li>
+ <li>Face Tracking API implemented (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=965420" title="FIXED: [Madai][Camera][Gecko] Implement face-tracking API">Bug 965420</a>).</li>
+ <li>Clean up done on the <a href="/en-US/docs/Web/API/Camera_Control_API">Camera Control API</a> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=909542" title="FIXED: Camera Control API clean-up/streamline">Bug 909542</a>).</li>
+ <li><a href="/en-US/docs/Web/API/Network_Information_API">Network Information API</a> now supported on Firefox OS (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=960426" title="FIXED: Support Network Information API in Firefox OS">Bug 960426</a>).</li>
+ <li><a href="/en-US/docs/Web/API/Wifi_Direct_API">Wifi Direct API</a> now implemented (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=811635" title="FIXED: B2G Wifi: Support Wifi Direct">Bug 811635</a>).</li>
+</ul>
+<p>Gecko general:</p>
+<ul>
+ <li><code>URLSearchParams.size</code> support has been removed from Gecko; this has been removed from the DOM spec until iterator support is finalised (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=959988" title="FIXED: Remove URLSearchParams.prototype.size">Bug 959988</a>).</li>
+ <li><a href="/en-US/docs/Web/API/Identity_Provider_API">Identity Provider API</a> for WebRTC implemented (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=884573" title="FIXED: PeerConnection.js persona integration">Bug 884573</a>).</li>
+ <li>The <a href="/de/docs/Web/HTML/Element/shadow" title="Das HTML &lt;shadow> Element wird als shadow DOM insertion point genutzt. Es kann eventuell gesehen werden, wenn mehrerere shadow roots unter einem shadow host erstellt wurden. Es wird mit Web Components genutzt."><code>&lt;shadow&gt;</code></a> element is now implemented (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=887538" title="FIXED: Implement web components shadow element.">Bug 887538</a>).</li>
+ <li><a href="/de/docs/Web/API/FileSystem/createFile" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben; bitte erwäge, mitzuwirken!"><code>createFile()</code></a> method implemented on the <a href="/en-US/docs/Web/API/File_System_API">File System API</a> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=934367" title="FIXED: [Filesystem API] Implement createFile method for device storage.">Bug 934367</a>).</li>
+ <li>Device Storage API now using <a href="/en-US/docs/Web/API/File_System_API">File System API</a> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=910412" title="FIXED: Change DeviceStorage API to use FileSystem API spec">Bug 910412</a>). The plan is to deprecate the former at a later date.</li>
+ <li><a href="/de/docs/Web/API/Navigator/sendBeacon" title="Die navigator.sendBeacon() Methode dient dazu, kleinere Datenmengen asynchron per HTTP vom User Agent zum Server zu senden."><code>Navigator.sendBeacon</code></a> has been implemented, easing telemetry collection (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=936340" title="FIXED: Implement navigator.sendBeacon">Bug 936340</a>).</li>
+ <li>Added a <code>relList</code> property returning a <a href="/de/docs/Web/API/DOMTokenList" title="Die DOMTokenList Schnittstelle repräsentiert eine Sammlung von durch Leerzeichen getrennte Zeichen/ Merkmale (Tokens). Solch eine Ansammlung wird wiedergegben von Element.classList, HTMLLinkElement.relList, HTMLAnchorElement.relList oder HTMLAreaElement.relList. Deren Index beginnt bei 0 wie bei JavaScript Array Objekten. DOMTokenList achten immer auf die Groß- und Kleinschreibung."><code>DOMTokenList</code></a> to <a href="/de/docs/Web/API/HTMLLinkElement" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben; bitte erwäge, mitzuwirken!"><code>HTMLLinkElement</code></a>, <a href="/de/docs/Web/API/HTMLAreaElement" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben; bitte erwäge, mitzuwirken!"><code>HTMLAreaElement</code></a> and <a href="/de/docs/Web/API/HTMLAnchorElement" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben; bitte erwäge, mitzuwirken!"><code>HTMLAnchorElement</code></a> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=968637" title="FIXED: add the DOMTokenList relList to HTMLLinkElement, HTMLAreaElement and HTMLAnchorElement">Bug 968637</a>).</li>
+ <li>As per the latest specification, the first argument of <a href="/de/docs/Web/API/OscillatorNode/start" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben; bitte erwäge, mitzuwirken!"><code>OscillatorNode.start</code></a> and <a href="/de/docs/Web/API/OscillatorNode/stop" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben; bitte erwäge, mitzuwirken!"><code>OscillatorNode.stop</code></a> is now optional and defaults to <code>0</code> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=982541" title="FIXED: Update OscillatorNode.{start, stop} to have the first argument optional and default to zero">Bug 982541</a>).</li>
+ <li>The method <a href="/de/docs/Web/API/Navigator/requestWakeLock" title="This Navigator.requestWakeLock() method of the Wake Lock API is used to request a MozWakeLock on any resource of the device. This means that you can prevent that resource from becoming unavailable as long as your app holds a lock for that resource. For example, a voice recording app can obtain a lock to keep the screen on during recording so that it can give prover visual feedback to the user that recording is progressing."><code>Navigator.requestWakeLock()</code></a> and the non-standard <a href="/de/docs/Web/API/MozWakeLock" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben; bitte erwäge, mitzuwirken!"><code>MozWakeLock</code></a> are no longer available from the Web on Desktop (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=963366" title="FIXED: Hide navigator.requestWakeLock and MozWakeLock from the web except on Firefox OS">Bug 963366</a>).</li>
+ <li>The <code>DOM_VK_ENTER</code> constant has been removed from <a href="/de/docs/Web/API/KeyboardEvent" title="KeyboardEvent Objekte beschreiben eine Benutzerinteraktion mit dem Keyboard. Jedes Event beschreibt eine Taste. Der Eventtyp (keydown, keypress, oder keyup) identifiziert welche Art von Aktivität ausgeführt wurde."><code>KeyboardEvent</code></a> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=969247" title="FIXED: Get rid of related code of NS_VK_ENTER and nsIDOMKeyEvent::DOM_VK_ENTER">Bug 969247</a>).</li>
+ <li>Web components' <a href="/de/docs/Web/API/Document/register" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben; bitte erwäge, mitzuwirken!"><code>Document.register</code></a> has been adapted to follow the behavior described in the latest version of the specification (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=856140" title="FIXED: Update document.register to adhere to the latest Custom Element spec">Bug 856140</a>).</li>
+ <li>Basic support for Hit regions on canvas has been added: the methods <a href="/de/docs/Web/API/CanvasRenderingContext2D/addHitRegion" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben; bitte erwäge, mitzuwirken!"><code>CanvasRenderingContext2D.addHitRegion()</code></a> and <a href="/de/docs/Web/API/CanvasRenderingContext2D/removeHitRegion" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben; bitte erwäge, mitzuwirken!"><code>CanvasRenderingContext2D.removeHitRegion()</code></a> have been added. These are disabled by default; to activate them set the preference <code>canvas.hitregions.enabled</code> to <code>true</code> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=966591" title="FIXED: Add basic support for Hit regions in Canvas">Bug 966591</a>).</li>
+ <li>The non-standard, and deprecated since Firefox 15, <a href="/de/docs/Web/API/Blob/mozSlice" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben; bitte erwäge, mitzuwirken!"><code>Blob.mozSlice</code></a> is no longer supported (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=961804" title="FIXED: Drop support for Blob.mozSlice">Bug 961804</a>).</li>
+ <li>The non-standard <a href="/de/docs/Web/API/ArchiveReader" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben; bitte erwäge, mitzuwirken!"><code>ArchiveReader</code></a> and <a href="/de/docs/Web/API/ArchiveRequest" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben; bitte erwäge, mitzuwirken!"><code>ArchiveRequest</code></a> are no longer exposed to the Web (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=968883" title="FIXED: ArchiveReader and ArchiveRequest should not be exposed interfaces">Bug 968883</a>).</li>
+ <li>Constructors cannot be called as functions anymore. They need to be preceded by the keyword <code>new</code> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=916644" title="FIXED: Disallow calling WebIDL constructors as functions on the web">Bug 916644</a>).</li>
+ <li>Added support for a new value (<code>alpha</code>) for the second, optional, parameter of the <a href="/de/docs/Web/API/Canvas/getContext" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben; bitte erwäge, mitzuwirken!"><code>Canvas.getContext()</code></a> method allowing to define if alpha blending must be stored or not for this context. When not, the per-pixel alpha value in this store is always <code>1.0</code>. This allows the back-end to implement a fast-track (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=982480" title="FIXED: Add support for the alpha option to the canvas context options">Bug 982480</a>).</li>
+</ul>
+<h2 id="SVG">SVG</h2>
+<p>Gecko general:</p>
+<ul>
+ <li><a href="/de/docs/Web/SVG/Element/feDropShadow" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben; bitte erwäge, mitzuwirken!"><code>&lt;feDropShadow&gt;</code></a>, and its interface <a href="/de/docs/Web/API/SVGFEDropShadowElement" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben; bitte erwäge, mitzuwirken!"><code>SVGFEDropShadowElement</code></a>, from the Filter Effects Module are now supported (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=964200" title="FIXED: Implement Filter Effects Module feDropShadow filter">Bug 964200</a>).</li>
+</ul>
+<h2 id="Manifest">Manifest</h2>
+<ul>
+ <li>The <code><a href="/en-US/Apps/Build/Manifest#precompile">precompile</a></code> manifest field is now supported, which specifies that asm.js code contained within the app should be compiled at install time, install of during first run.</li>
+</ul>
+<h2 id="See_also">See also</h2>
+<ul>
+ <li>Firefox OS 1.4 Notes (will be linked to once they are published.)</li>
+</ul>
+<h2 id="Older_versions">Older versions</h2>
+<p></p><div class="multiColumnList">
+<ul>
+<li><a href="/en-US/docs/Mozilla/Firefox_OS/Releases/1.3">Firefox OS 1.3 for developers</a></li><li><a href="/en-US/docs/Mozilla/Firefox_OS/Releases/1.2">Firefox OS 1.2 for developers</a></li><li><a href="/en-US/docs/Mozilla/Firefox_OS/Releases/1.1">Firefox OS 1.1 for developers</a></li><li><a href="/en-US/docs/Mozilla/Firefox_OS/Releases/1.0.1">Firefox OS 1.0.1 for developers</a></li></ul>
+</div><p></p>
+<p> </p>
diff --git a/files/de/archive/b2g_os/releases/2.0/index.html b/files/de/archive/b2g_os/releases/2.0/index.html
new file mode 100644
index 0000000000..175d141e00
--- /dev/null
+++ b/files/de/archive/b2g_os/releases/2.0/index.html
@@ -0,0 +1,112 @@
+---
+title: Firefox OS 2.0 for developers
+slug: Archive/B2G_OS/Releases/2.0
+translation_of: Archive/B2G_OS/Releases/2.0
+---
+<div class="summary">
+<p>This page details the developer features newly implemented in Gecko that are specific to Firefox OS 2.0.</p>
+</div>
+
+<div class="note">
+<p>Firefox OS 2.0's Gecko component is based on Firefox 31/32.</p>
+</div>
+
+<h2 id="New_product_features">New product features</h2>
+
+<p>This section provides a summary of the new features available in Firefox OS 2.0. For more details on specific platform changes (API additions, etc.), see the <a href="#Platform_additions_in_detail">Platform additions in detail</a> section.</p>
+
+<dl>
+ <dt>NFC</dt>
+ <dd><span class="author-g-x59co88jbi1y2uah b i">This release includes support for device-to-device content sharing support with NFC <span class="author-g-x59co88jbi1y2uah b i">(Near Field Communication)</span>. You can pair your device with another, then <a href="/en-US/docs/Web/API/NFC_API/Using_the_NFC_API#The_P2P_Sharing_UI">swipe to share</a> your contacts, media, or favorite URLs with others.</span></dd>
+ <dt>Telephony</dt>
+ <dd><span class="author-g-x59co88jbi1y2uah b i">Firefox OS now supports both IPv4 and IPv6 addresses</span> in the network manager.</dd>
+ <dt>Find My Device</dt>
+ <dd><span class="author-g-9k649z122zgh819oqmty">If you’ve lost your Firefox OS smartphone, Find My Device can help you find it (see the <span class="author-g-9k649z122zgh819oqmty url"><a href="http://find.firefox.com">http://find.firefox.com</a> website</span>). You can see it on a map, make it play a sound and have it display a message. You can also remotely lock it or delete your personal info.</span><span class="author-g-9k649z122zgh819oqmty"> To get started, create a Firefox Account (<em>Settings &gt; Firefox Accounts</em> on your device) and enable Find My Device (<span class="author-g-9k649z122zgh819oqmty"><em>Settings &gt; Find My Device</em></span>).</span></dd>
+ <dt>Media</dt>
+ <dd><span class="author-g-4iwx7wjdkbf2wjjv b">You can now create your own ringtones using your own music collection, or songs you download from the Web.</span></dd>
+ <dt>Camera</dt>
+ <dd><span class="author-g-4iwx7wjdkbf2wjjv b">The Camera app now supports various focus modes: Touch, Continuous Auto and Face tracking</span>.</dd>
+ <dt>Productivity</dt>
+ <dd>We've done a visual refresh of the Email, Calender, and Clock apps.</dd>
+ <dt>Homescreen</dt>
+ <dd><span class="author-g-4f4wmtjtu8s4fjq7 b i">Firefox OS 2.0 introduces a simpler vertical-scrolling homescreen with larger icons.</span></dd>
+ <dt>Edge-gesture app switching</dt>
+ <dd><span class="author-g-4f4wmtjtu8s4fjq7 b i">Edge gestures are now available for switching between apps (swipe your thumb from the left edge of the screen to the right and vice versa, to switch between multiple open apps.)</span></dd>
+</dl>
+
+<h2 id="New_partner_features">New partner features</h2>
+
+<dl>
+ <dt>E.ME integration</dt>
+ <dd>E.ME integration provides direct access to web apps while configurable search providers can search the web at the same time.</dd>
+</dl>
+
+<h2 id="New_DevTools_features">New DevTools features</h2>
+
+<p>The Firefox <a href="/en-US/docs/Tools">Developer Tools</a> have had a large number of features added in Firefox versions 31 and 32; these aren't Firefox OS-specific, but you can take advantage of them when debugging your Firefox OS apps through <a href="/en-US/docs/Tools/WebIDE">WebIDE</a>. To find out more, read:</p>
+
+<ul>
+ <li><a href="https://hacks.mozilla.org/2014/05/editable-box-model-multiple-selection-sublime-text-keys-much-more-firefox-developer-tools-episode-31/">Firefox Developer Tools Episode 31</a></li>
+ <li><a href="https://hacks.mozilla.org/2014/06/toolbox-inspector-scratchpad-improvements-firefox-developer-tools-episode-32/">Firefox Developer Tools Episode 32</a></li>
+</ul>
+
+<h2 id="Platform_additions_in_detail">Platform additions in detail</h2>
+
+<div class="note">
+<p><strong>Note</strong>: Our list here includes features most important to Firefox OS. For an expanded list of general Gecko feature additions (which are generally also present in Firefox OS 2.0), consult the <a href="/en-US/docs/Mozilla/Firefox/Releases/31" title="/en-US/docs/Mozilla/Firefox/Releases/31">Firefox 31 release notes for developers</a> and <a href="/en-US/docs/Mozilla/Firefox/Releases/32" title="/en-US/docs/Mozilla/Firefox/Releases/32">Firefox 32 release notes for developers</a>.</p>
+</div>
+
+<h3 id="Web_API">Web API</h3>
+
+<ul>
+ <li>The parameters of the <a href="/de/docs/Web/API/MozMobileNetworkInfo" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben; bitte erwäge, mitzuwirken!"><code>MozMobileNetworkInfo</code></a> constructor have been made nullable (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1026727" title="FIXED: Unknown state is displayed instead of Connected during manual network selection">Bug 1026727</a>).</li>
+ <li>WebRTC: <span class="author-g-41mtsa1hor7b107c i"><a href="/de/docs/Web/API/MozGetUserMedia" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben; bitte erwäge, mitzuwirken!"><code>mozGetUserMedia</code></a>, <a href="/de/docs/Web/API/MozRTCPeerConnection" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben; bitte erwäge, mitzuwirken!"><code>mozRTCPeerConnection</code></a>, and <a href="/de/docs/Web/API/DataChannels" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben; bitte erwäge, mitzuwirken!"><code>DataChannels</code></a> are supported by default</span>.</li>
+ <li>New constraints for <a href="https://developer.mozilla.org/en-US/docs/Glossary/WebRTC">WebRTC</a>'s <a class="new" href="https://developer.mozilla.org/en-US/docs/Web/API/NavigatorUserMedia.getUserMedia" title="The documentation about this has not yet been written; please consider contributing!"><code>getUserMedia()</code></a>, <code>width</code>, <code>height</code>, and <code>framerate</code>,  have been added, to limit stream dimensions and frame rate (<a class="external external-icon" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907352" title="FIXED: Implement width/height/framerate gUM constraints">bug 907352</a>):
+  <pre class="brush: json  language-json"><code class="language-json"><span class="token punctuation">{</span>
+  mandatory<span class="token punctuation">:</span> <span class="token punctuation">{</span>
+    width<span class="token punctuation">:</span> <span class="token punctuation">{</span> min<span class="token punctuation">:</span> <span class="token number">640</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    height<span class="token punctuation">:</span> <span class="token punctuation">{</span> min<span class="token punctuation">:</span> <span class="token number">480</span> <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  optional<span class="token punctuation">:</span> <span class="token punctuation">[</span>
+    <span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token number">650</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token punctuation">{</span> min<span class="token punctuation">:</span> <span class="token number">650</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token punctuation">{</span> frameRate<span class="token punctuation">:</span> <span class="token number">60</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token punctuation">{</span> max<span class="token punctuation">:</span> <span class="token number">800</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token punctuation">]</span>
+<span class="token punctuation">}</span></code></pre>
+ </li>
+ <li>RTSP streaming support is now available (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=929372" title="FIXED: [RTSP][User Story]Support basic RTSP streaming function.">Bug 929372</a>).</li>
+ <li>The Resource Statistics API is implemented (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=951976" title="FIXED: API for Resource Statistics">Bug 951976</a>).</li>
+ <li>The Resource Timing API is implemented (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=822480" title="FIXED: Add in the Resource Timing API">Bug 822480</a>).</li>
+ <li>fastSeek API is now available for media elements (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=778077" title="FIXED: Implement fastSeek API on media elements (and switch the built-in controls over to it)">Bug 778077</a>).</li>
+ <li><span class="author-g-41mtsa1hor7b107c i">The <a href="/en-US/docs/Web/API/Network_Information_API">Network Information API</a> is now exposed to Firefox OS (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=960426" title="FIXED: Support Network Information API in Firefox OS">Bug 960426</a>).</span></li>
+ <li><span class="author-g-41mtsa1hor7b107c i"><span class="author-g-41mtsa1hor7b107c i">The Wifi capabilities of the device can now be returned using <code>WifiManager.getCapabilities()</code> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1002314" title="FIXED: [B2G]To have a webapi providing WIFI capabilities of device">Bug 1002314</a>).</span></span></li>
+ <li>The <a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator.vibrate" title="The Navigator.vibrate() method pulses the vibration hardware on the device, if such hardware exists. If the device doesn't support vibration, this method has no effect. If a vibration pattern is already in progress when this method is called, the previous pattern is halted and the new one begins instead."><code>Navigator.vibrate()</code></a> method behavior has been adapted to the latest specification: too long vibrations are now truncated (<a class="external external-icon" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1014581" title="FIXED: Update Vibration API to conform to latest W3C spec">bug 1014581</a>).</li>
+ <li><span class="author-g-41mtsa1hor7b107c i">The <a href="/en-US/docs/Web/API/Device_Storage_API">Device Storage API</a> now has mount and unmount capabilities (privileged) (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=971612" title='FIXED: Implement "mount", "unmount" API for device storage'>Bug 971612</a>).</span></li>
+ <li><span class="author-g-41mtsa1hor7b107c i"><span class="author-g-41mtsa1hor7b107c i">The Feature Detection API is now available (privileged) (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=983502" title="FIXED: Implement and expose the feature detection API to privileged apps">Bug 983502</a>).</span></span></li>
+ <li> The <a class="new" href="https://developer.mozilla.org/en-US/docs/Web/API/MSISDN_Verification_API">MSISDN Verification API</a> has been added (privileged) (<a class="external external-icon" href="https://bugzilla.mozilla.org/show_bug.cgi?id=988469" title="FIXED: MSISDN verification API for privileged apps">bug 988469</a>).</li>
+ <li>A new CameraControl API is now available (privileged) (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=909542" title="FIXED: Camera Control API clean-up/streamline">Bug 909542</a>).</li>
+ <li>The <a href="https://developer.mozilla.org/en-US/docs/Web/API/Data_Store_API">Data Store API</a> has been made available to <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers">Web Workers</a> (certified) (<a class="external external-icon" href="https://bugzilla.mozilla.org/show_bug.cgi?id=949325" title="FIXED: C++ wrapper to support DataStore API on the worker">bug 949325</a>).</li>
+ <li>The <a href="/en-US/docs/Web/API/Device_Storage_API">Device Storage API</a> now uses the File System API spec (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=910412" title="FIXED: Change DeviceStorage API to use FileSystem API spec">Bug 910412</a>).</li>
+ <li><span class="author-g-41mtsa1hor7b107c i">The deprecated Audio Data API has been removed</span> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=927245" title="FIXED: Remove deprecated Audio Data API implementation">Bug 927245</a>).</li>
+</ul>
+
+<h3 id="CSS">CSS</h3>
+
+<ul>
+ <li><code>position:sticky</code> is now supported, and used in Gaia app layout (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=886646" title="FIXED: implement position:sticky">Bug 886646</a>).</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow" title="The CSS flex-grow property specifies the flex grow factor of a flex item."><code>flex-grow</code></a> and  <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink" title="The CSS flex-shrink property specifies the flex shrink factor of a flex item."><code>flex-shrink</code></a> can now to transition between zero and non-zero values (<a class="external external-icon" href="https://bugzilla.mozilla.org/show_bug.cgi?id=996945" title="FIXED: Allow flex-grow / flex-shrink to transition between zero and nonzero values">bug 996945</a>).</li>
+</ul>
+
+<h3 id="Technology_support_improvements">Technology support improvements</h3>
+
+<ul>
+ <li>Firefox OS 2.0 now supports H.264 video hardware, allowing you to create and playback video encoded using this codec much more efficiently. See <a href="https://developer.mozilla.org/en-US/Firefox_OS/Media_support">Media support on Firefox OS</a> for details.</li>
+</ul>
+
+<h2 id="Older_versions">Older versions</h2>
+
+<p></p><div class="multiColumnList">
+<ul>
+<li><a href="/en-US/docs/Mozilla/Firefox_OS/Releases/1.4">Firefox OS 1.4 for developers</a></li><li><a href="/en-US/docs/Mozilla/Firefox_OS/Releases/1.3">Firefox OS 1.3 for developers</a></li><li><a href="/en-US/docs/Mozilla/Firefox_OS/Releases/1.2">Firefox OS 1.2 for developers</a></li><li><a href="/en-US/docs/Mozilla/Firefox_OS/Releases/1.1">Firefox OS 1.1 for developers</a></li><li><a href="/en-US/docs/Mozilla/Firefox_OS/Releases/1.0.1">Firefox OS 1.0.1 for developers</a></li></ul>
+</div><p></p>
diff --git a/files/de/archive/b2g_os/releases/index.html b/files/de/archive/b2g_os/releases/index.html
new file mode 100644
index 0000000000..3edbcd4c75
--- /dev/null
+++ b/files/de/archive/b2g_os/releases/index.html
@@ -0,0 +1,24 @@
+---
+title: Firefox OS developer release notes
+slug: Archive/B2G_OS/Releases
+tags:
+  - Firefox OS
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/B2G_OS/Releases
+---
+<h2 id="Firefox_OS_release_notes_by_version">Firefox OS release notes by version</h2>
+<p>This section provides articles covering each new release of Gaia and Gecko for Firefox OS, explaining what features were added and bugs eliminated in each update. There is also a linked summary table showing what APIs are supported by each version of Firefox OS.</p>
+<div class="multiColumnList">
+ {{ListSubpages("",1,0,1)}}</div>
+<h2 id="Other_supporting_information">Other supporting information</h2>
+<dl>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Firefox_OS/API_support_table">Firefox OS API support table</a></dt>
+ <dd>
+  Lists the different APIs available, and what versions of Firefox have support for them.</dd>
+ <dt>
+  <a href="/en-US/docs/Web/Apps/App_permissions">App permissions</a></dt>
+ <dd>
+  Lists hosted, privileged and certified APIs, along with information on the permissions they need to have set in the App Manifest of your installable apps, such as the manifest permission name, app type required, description, access property, and default permission.</dd>
+</dl>
diff --git a/files/de/archive/b2g_os/simulator/index.html b/files/de/archive/b2g_os/simulator/index.html
new file mode 100644
index 0000000000..5fa8770578
--- /dev/null
+++ b/files/de/archive/b2g_os/simulator/index.html
@@ -0,0 +1,86 @@
+---
+title: Firefox-OS-Simulator
+slug: Archive/B2G_OS/Simulator
+translation_of: Archive/B2G_OS/Simulator
+---
+<div class="note">
+<p>Diese Seite beschreibt den Firefox-OS-Simulator für Entwickler für Firefox OS 1.2 oder neuer. Wenn Sie Apps für Firefox OS 1.1 entwickeln, sollten Sie sich stattdessen die Dokumentation für <a href="/docs/Tools/Firefox_OS_1.1_Simulator">Firefox-OS-1.1-Simulator</a> ansehen.</p>
+</div>
+
+<p><span style="line-height: 1.5;">Der Firefox-OS-Simulator ist eine Version der höheren Schichten von Firefox OS, die ein Firefox-OS-Gerät simuliert, aber auf dem Desktop läuft</span><span style="line-height: 1.5;">. Dies bedeutet, dass Sie in vielen Fällen kein echtes Gerät benötigen, um Ihre App zu testen und zu debuggen. Er läuft in einem Fenster mit der selben Größe wie ein Firefox-OS-Gerät, enthält die Benutzeroberfläche sowie die integrierten Apps von <span style="line-height: 1.5;">FirefoxOS</span> und simuliert viele der APIs eines Firefox-OS-Geräts</span><span style="line-height: 1.5;">.</span></p>
+
+<p><span style="line-height: 1.5;">Der Simulator wird als Firefox-Add-on gepackt und verteilt. Sobald Sie ihn heruntergeladen und in Firefox installiert haben, können Sie ihn ausführen, Apps darauf laden und mit dem</span><span style="line-height: 1.5;"> </span><a href="/Firefox_OS/Using_the_App_Manager" style="line-height: 1.5;">App-Manager</a><span style="line-height: 1.5;"> Entwicklerwerkzeuge einsetzen.</span></p>
+
+<h2 id="Installation"><span style="line-height: 1.5;">Installation</span></h2>
+
+<p><span style="line-height: 1.5;">Um den Simulator zu installieren, klicken Sie auf die folgende Schaltfläche. (Es stehen mehrere Versionen zur Verfügung und zwecks maximaler Flexibilität sollten Sie alle installieren):</span></p>
+
+<p><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/" style="margin-bottom: 20px; padding: 10px; color: white; text-align: center; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; display: inline-block; background-color: rgb(129, 188, 46); white-space: nowrap; text-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 0px; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 0px 0px, rgba(0, 0, 0, 0.298039) 0px -1px 0px 0px inset;">Simulator installieren</a></p>
+
+<p>Um den Simulator zu starten, lesen sie die <a href="/Firefox_OS/Using_the_App_Manager#Using_a_Firefox_OS_Simulator_Add-on" style="font-size: 14px; font-weight: normal; line-height: 1.5;">Anweisungen in der Dokumentation des App-Managers</a>. Sobald der Simulator läuft, können Sie Apps darauf laden und dann mit dem App-Manager debuggen, genau wie mit einem echten Gerät. Ich habe unter Windows 7, Firefox 37.0.1 und mit Firefox OS Simulator die Erfahrung gemacht, dass erster Start in der WebIDE klappt nicht, dafür funktioniert 2. oder 3. Start. Auch dann, wenn eine Meldung: <em>"Zeitüberschreitung bei der operation: connecting to runtime Firefox OS 2.0</em>" in der WebIDE angezeigt wird.</p>
+
+<h2 id="Die_Simulator-Oberfläche" style="line-height: 30px;">Die Simulator-Oberfläche</h2>
+
+<p><span style="line-height: 22.00800132751465px;">Der Simulator erscheint als eigenes Fenster, so dass der simulierte Bildschirm 320×480 Pixel groß ist. Um Berührereignisse zu simulieren, können Sie mit der Maustaste klicken und die Maus bei gedrückter Taste ziehen. Durch Klicken und Ziehen von rechts nach links vom Startbildschirm aus sehen Sie also die integrierten Apps, sowie solche, die Sie hinzugefügt haben</span><span style="line-height: 22.00800132751465px;">:</span></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7569/simulator-1.2_de.png" style="width: 810px; height: 625px; display: block; margin: 0px auto;"></p>
+
+<p>Der Simulator verfügt am unteren Rand über deine Symbolleiste mit zwei Schaltflächen:</p>
+
+<ul>
+ <li>Die linke Schaltfläche bringt Sie zum Startbildschirm oder schaltet den Simulator aus, wenn Sie sie gedrückt halten,</li>
+ <li>die rechte Schaltfläche ändert die Ausrichtung des Simulator zwischen Hoch- und Querformat. Dies erzeugt das Ereignis <a href="https://developer.mozilla.org/docs/WebAPI/Managing_screen_orientation#Listening_orientation_change" title="/docs/WebAPI/Detecting_device_orientation">orientationchange</a>.</li>
+</ul>
+
+<h2 id="Einschränkungen_des_Simulators">Einschränkungen des Simulators</h2>
+
+<p>Beachten Sie, dass der Firefox-OS-Simulator keine perfekte Simulation ist.</p>
+
+<h3 id="Hardware-Einschränkungen">Hardware-Einschränkungen</h3>
+
+<p>Abgesehen von der Bildschirmgröße simuliert der Simulator keine hardwareseitigen Einschränkungen eines Firefox-OS-Geräts, wie den verfügbaren Speicher oder die CPU-Geschwindigkeit.</p>
+
+<h3 id="Audio-Video-Codecs">Audio-/Video-Codecs</h3>
+
+<p>Die folgenden Codecs hängen von hardwarebeschleunigter Dekodierung ab und werden daher noch nicht unterstützt:</p>
+
+<ul>
+ <li>MP3</li>
+ <li>AAC</li>
+ <li>H.264 (MP4)</li>
+ <li>WebM</li>
+</ul>
+
+<p>Dies bedeutet, dass es nicht möglich ist,  mit dem Simulator die Wiedergabe von Videos in Apps und Websites wie YouTube zu testen, die diese Codecs benötigen.</p>
+
+<h3 id="Nicht_unterstützte_APIs"><a name="Unsupported-APIs">Nicht unterstützte APIs</a></h3>
+
+<p>Bestimmte APIs, die auf dem Gerät funktionieren, funktionieren nicht im Simulator, was meist daran liegt, weil die unterstützende Hardware auf dem Desktop nicht verfügbar ist. Wir haben Simulationen für bestimmte APIs, wie Geolokation, eingebaut und fügen in zukünftigen Versionen vermutlich weitere hinzu. Derzeug werden die folgenden APIs allerdings nicht unterstützt. Deren Verwendung kann zu Fehlermeldungen oder einfach falschen Ergebnissen führen:</p>
+
+<ul>
+ <li><a href="/WebAPI/WebTelephony" title="/WebAPI/WebTelephony">Telephony</a></li>
+ <li><a href="/docs/WebAPI/WebSMS" title="/docs/WebAPI/WebSMS">WebSMS</a></li>
+ <li><a href="/docs/WebAPI/WebBluetooth" title="/docs/WebAPI/WebBluetooth">WebBluetooth</a></li>
+ <li><a href="/docs/WebAPI/Using_Light_Events" title="/docs/WebAPI/Using_Light_Events">Ambient Light</a></li>
+ <li><a href="/docs/WebAPI/Proximity" title="/docs/WebAPI/Proximity">Proximity</a></li>
+ <li><a href="/docs/WebAPI/Network_Information" title="/docs/WebAPI/Network_Information">Network Information</a></li>
+ <li><a href="/docs/Online_and_offline_events" title="/docs/Online_and_offline_events">navigator.onLine and offline events</a></li>
+ <li><a href="/docs/WebAPI/Vibration" title="/docs/WebAPI/Vibration">Vibration</a></li>
+</ul>
+
+<h2 id="Hilfe_erhalten"><a name="Simulator-help"></a>Hilfe erhalten</h2>
+
+<p><span style="line-height: 1.5;">Wenn Sie eine Frage haben, versuchen Sie, uns auf der </span><a href="https://lists.mozilla.org/listinfo/dev-developer-tools" style="line-height: 1.5;">Mailingliste dev-developer-tools</a><span style="line-height: 1.5;"> oder in </span><a href="irc://irc.mozilla.org/#devtools" style="line-height: 1.5;">#devtools auf irc.mozilla.org</a><span style="line-height: 1.5;"> zu erreichen.</span></p>
+
+<h3 id="Ausführliche_Protokollierung_aktivieren"><a name="Simulator-verbose-logging"></a>Ausführliche Protokollierung aktivieren</h3>
+
+<p>In der <a href="/docs/Tools/Web_Console">Web-Konsole</a>, die Sie über den <a href="/Firefox_OS/Using_the_App_Manager#Debugging">App-Manager</a> mit Ihrer App verknüpfen können, werden Nachrichten, von Ihrer App aufgezeichnet. Wenn Sie Nachrichten frühzeitig erfassen möchten, die während des Starts erscheinen, bevor die Konsole verbunden wird und funktioniert, können Sie im Simulator die ausführliche Protokollierung aktivieren.</p>
+
+<p>Öffnen Sie about:config und erstellen Sie ein neue Einstellung. Der Name der Einstellung hängt von der Version des Simulators ab:</p>
+
+<ul>
+ <li>extensions.fxos_1_3_simulator@mozilla.org.sdk.console.logLevel für Firefox OS 1.3</li>
+ <li>extensions.fxos_1_2_simulator@mozilla.org.sdk.console.logLevel für Firefox OS 1.2</li>
+</ul>
+
+<p>Setzen Sie den String-Wert auf „all“ und deaktivieren und reaktivieren Sie das Add-on im Add-ons-Manager. Jetzt erscheinen zusätzliche Nachrichten über die Ausführung des Simulators in der <a href="/docs/Tools/Browser_Console">Browser-Konsole</a>.</p>
diff --git a/files/de/archive/b2g_os/troubleshooting/index.html b/files/de/archive/b2g_os/troubleshooting/index.html
new file mode 100644
index 0000000000..a83cc46042
--- /dev/null
+++ b/files/de/archive/b2g_os/troubleshooting/index.html
@@ -0,0 +1,44 @@
+---
+title: Troubleshooting Firefox OS
+slug: Archive/B2G_OS/Troubleshooting
+translation_of: Archive/B2G_OS/Troubleshooting
+---
+<div class="summary">
+<p>This article provides tips for resolving common problems you may have while using Firefox OS. Please feel free to add more content to this page!</p>
+</div>
+
+<h2 id="Networking_problems">Networking problems</h2>
+
+<p>If you are having trouble connecting to Wi-Fi networks, it may be helpful to delete the Wi-Fi configuration file:</p>
+
+<pre>adb shell rm /data/misc/wifi/wpa_supplicant.conf
+adb reboot
+</pre>
+
+<div class="note">
+<p><strong>Note:</strong> These instructions assume you have <a href="/en-US/docs/Mozilla/Firefox_OS/Installing_on_a_mobile_device#Configuring_the_udev_rule_for_your_device" title="en-US/docs/Mozilla/Firefox_OS/Installing_on_a_mobile_device#Configuring_the_udev_rule_for_your_device">configured the udev settings</a> for your device.</p>
+</div>
+
+<h2 id="Bricked_Phone">Bricked Phone</h2>
+
+<p>If you happen to brick the phone, by, for example, trying to flash wrong images on it,  try rebooting into the bootloader (fastboot or heimdal depending on your phone). The exact sequence varies depending on the phone. Try removing the usb cable, removing and then re-inserting the battery. For the Unagi and Otoro, press and hold volume up and power for several seconds until you see the splash screen. Verify that the phone is in bootloader mode by using <code>fastboot devices</code> (or <code>heimdall devices</code> for some Samsung phones). Once you can see your phone using <code>fastboot devices</code>, you can use <code>./flash.sh </code>to flash your image for Unagi.</p>
+
+<h2 id="Flashing_Red_LED_(otorounagi)">Flashing Red LED (otoro/unagi)</h2>
+
+<p>This means that the battery is too low to boot the phone. You can let it charge for a while (until the red LED stops flashing and a little bit longer), or you can unplug the USB cable, remove the battery, insert the USB cable, and re-insert the battery.</p>
+
+<h2 id="Failure_to_receive_SMS_after_switching_over_from_iPhone">Failure to receive SMS after switching over from iPhone</h2>
+
+<p>If you have switched your SIM card over from an iPhone to a Firefox OS (or another different platform) device, you may run into a problem whereby you can no longer receive text messages from iPhone users. This is because iPhone to iPhone SMS messages are sent using <a href="https://www.apple.com/ios/messages/">iMessage</a>, which works by routing iPhone-to-iPhone messages through Apple's servers instead of sending them as actual text messages, saving iPhone users money. Unfortunately when you leave iPhone, iMessage has no way of knowing you've left and SMS from other iPhone users will still go through iMessage, meaning that you won't receive them.</p>
+
+<p>To fix this you have to turn off iMessage for your SIM; there is a guide on how to do this at imore.com — read <a href="http://www.imore.com/text-issues-switching-iphone-android-heres-fix">Here's how to turn off iMessage</a>.</p>
+
+<h2 id="Device_not_appearing_to_ADB_on_OSX">Device not appearing to ADB on OSX</h2>
+
+<p>When running adb devices in OSX, some devices may simply not appear in the device list, for a variety of reasons. This can be fixed by adding your device's vendor ID to your <code>~/.android/adb_usb.ini</code> file, to provide a hint to ADB for finding your device.</p>
+
+<div class="note">
+<p><strong>Note</strong>: See <a href="http://stackoverflow.com/a/7136003/1027966">this stackoverflow post</a> for a lot more detail, including how to find the vendor ID of the attached device, and how to add it into <code>adb_usb.ini</code>.</p>
+</div>
+
+<p> </p>
diff --git a/files/de/archive/css3/index.html b/files/de/archive/css3/index.html
new file mode 100644
index 0000000000..51f6b689bb
--- /dev/null
+++ b/files/de/archive/css3/index.html
@@ -0,0 +1,976 @@
+---
+title: CSS3
+slug: Archive/CSS3
+tags:
+  - CSS
+  - CSS Bezüge
+  - Fortgeschritten
+translation_of: Archive/CSS3
+---
+<p><span class="seoSummary"><strong>CSS3</strong> ist die neuste Version der <em>Cascading Style Sheets</em> Sprache und erweitert damit CSS2.1. Sie bringt langerwartete Neuheiten, wie abgerundete Ecken, Schatten, <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_gradients" title="Using CSS gradients">Verläufe</a>, <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions" title="CSS transitions">Übergänge</a> und <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations" title="CSS animations">Animationen</a>, sowie neue Layouts wie z.B. <a href="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts" title="Using CSS multi-column layouts">multi-columns</a>, <a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes">flexible box</a> oder grid layouts.</span> Experimentelle Teile sind vendor-prefixed und sollten entweder in Productionsumgebungen vermieden oder mit großer Vorsicht verwendet werden, da sich sowohl Syntax, als auch Semantik in Zukunft noch ändern könnten.</p>
+
+<h2 id="Module_und_der_Standardisierungsprozess">Module und der Standardisierungsprozess</h2>
+
+<p>CSS2 brauchte 9 Jahre, von August 2002 bis Juni 2011, um als empfohlen angesehen zu werden. Was daran lag, dass ein paar zweitrangige Funktionen alle Vorschriften zurückhielten. Um die Standardisierung der fehlerfreien Funktionen zu beschleunigen, hat die <a class="external external-icon" href="http://www.w3.org/blog/CSS/" title="http://www.w3.org/blog/CSS/">CSS Working Group</a> <a href="https://www.w3.org/blog/CSS/"> </a>der W3C in der  <a class="external external-icon" href="http://fantasai.inkedblade.net/weblog/2011/inside-csswg/modules" title="http://fantasai.inkedblade.net/weblog/2011/inside-csswg/modules">Beijing-Doktrin </a>beschlossen die CSS Sprache in mehrere Bausteine, Module genannt, zu zerlegen. Jedes Modul ist jetzt ein eigenständiger Teil der Sprache und bewegt sich mit eigener Geschwindigkeit zur Standardisierung zu. Während manche Module bereits von der W3C empfohlen werden, sind andere noch im frühen Entwicklungsstadium. Neue Module werden hinzugefügt, wenn neue Funktionen gebraucht werden.</p>
+
+<p><a href="/@api/deki/files/6120/=CSS_Modules_and_Snapshots.png" title="CSS_Modules_and_Snapshots.png"><img alt="CSS Modules and Snapshots as defined since CSS3" class="internal lwrap" src="/files/3623/CSS_Modules_and_Snapshots.png" style="float: left; width: 550px;"> </a>Formal gibt es kein CSS3 Standard. Da jedes Modul für sich standardisiert wird, besteht das Standard-CSS aus einem CSS2.1, dass verbessert und durch vollständige Module, die nicht zwingend auf dem selben Stand sind, erweitert wurde. Zu jeder Zeit kann eine Schattenkopie des CSS Standard definiert werden, indem man CSS2.1 und die ausgereiften Module betrachtet.</p>
+
+<p>Das W3 Konsortium veröffentlicht regelmäßig solche Schattenkopien, wie in <a class="external" href="http://www.w3.org/TR/css-beijing/" title="http://www.w3.org/TR/css-beijing/">2007</a>, <a class="external" href="http://www.w3.org/TR/css-2010/" title="http://www.w3.org/TR/css-2010/">2010</a> und <a href="https://www.w3.org/TR/css-2015/">2015</a>.</p>
+
+<p>Obwohl momentan kein Modul über dem Level 3 standardisiert wurde, wird sich das in Zukunft ändern. Manche Module, wie Selectors 4 oder CSS Borders und Backgrounds Level 4 sind bereits im Editor's Draft, obwohl sie noch nicht den First Published Working Draft Status erreicht haben.</p>
+
+<h2 id="CSS_Modulstatus" style="">CSS Modulstatus</h2>
+
+<h3 id="Stabile_Module">Stabile Module</h3>
+
+<p>Ein paar CSS Module sind bereits ziemlich stabil und haben bereits eines der drei Empfehlungslevel der CSSWG erreicht: Empfehlungskandidat, vorgeschlagene Empfehlung der Empfohlen. Diese können ohne Prefixe benutzt werden und sind weitesgehend stabil, obwohl ein paar Funktionen noch auf den Empfehlungskandidat-Status herabgesetzt werden können.</p>
+
+<p>These modules extend and amend the CSS2.1 specification which build the core of the specification. Together with it, they are the current snapshot of the CSS specification.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td class="thirdColumn greenBg"><strong>{{ SpecName("CSS3 Colors", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Colors") }} since June 7th, 2011</td>
+  </tr>
+  <tr>
+   <td colspan="2">
+    <p>Adds the {{ cssxref("opacity") }} property, and the <code>hsl</code><code>()</code>, <code>hsla()</code>, <code>rgba()</code> and <code>rgb()</code> functions to create {{cssxref("&lt;color&gt;")}} values. It also defines the <code>currentColor</code> keyword as a valid color.</p>
+
+    <p>The <code>transparent</code> color is now a real color (thanks to the support for the alpha channel) and is a now an alias for <code>rgba(0,0,0,0.0)</code> .</p>
+
+    <p>It deprecates the <a href="http://www.w3.org/TR/CSS2/ui.html#system-colors">system-color keywords that shouldn't be used in a production environment anymore</a>.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(128,255,128);"><strong>{{ SpecName("CSS3 Selectors", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Selectors") }} since September 29th, 2011</td>
+  </tr>
+  <tr>
+   <td colspan="2">
+    <p>Adds:</p>
+
+    <ul>
+     <li>Substring matching attribute selectors, <code>E[attribute^="value"]</code>, <code>E[attribute$="value"]</code>, <code>E[attribute*="value"]</code> .</li>
+     <li>New pseudo-classes: {{ cssxref(":target") }}, {{ cssxref(":enabled") }} and {{ cssxref(":disabled") }}, {{ cssxref(":checked") }}, {{ cssxref(":indeterminate") }}, {{ cssxref(":root") }}, {{ cssxref(":nth-child") }} and {{ cssxref(":nth-last-child") }}, {{ cssxref(":nth-of-type") }} and {{ cssxref(":nth-last-of-type") }}, {{ cssxref(":last-child") }}, {{ cssxref(":first-of-type") }} and {{ cssxref(":last-of-type") }}, {{ cssxref(":only-child") }} and {{ cssxref(":only-of-type") }},{{ cssxref(":empty") }}, and {{ cssxref(":not") }}.</li>
+     <li>Pseudo-elements are now characterized by two colons rather than one: <code>:after</code> becomes {{ cssxref("::after") }}, <code>:before</code> becomes {{ cssxref("::before") }}, <code>:first-letter</code> becomes {{ cssxref("::first-letter") }}, and <code>:first-line</code> becomes {{ cssxref("::first-line") }}.</li>
+     <li>The new <em>general sibling combinator</em> ( <code>h1~pre</code> ).</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>The <a class="external" href="http://dev.w3.org/csswg/selectors4/" title="http://dev.w3.org/csswg/selectors4/">next iteration of the Selectors specification</a> is already in progress, though it still hasn't reached the First Public Working Draft stage.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(128,255,128);"><strong>{{ SpecName("CSS3 Namespaces", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Namespaces") }} since September 29th, 2011</td>
+  </tr>
+  <tr>
+   <td colspan="2">
+    <p>Adds the support for the XML Namespaces by defining the notion of <em>CSS qualified name</em>, using the ' <code>|</code> ' syntax and adding the {{ cssxref("@namespace") }} CSS at-rule.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(128,255,128);"><strong>{{ SpecName("CSS3 Media Queries", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Media Queries") }} since June 19th, 2012</td>
+  </tr>
+  <tr>
+   <td colspan="2">
+    <p>Extends the former media type ( <code>print</code>, <code>screen</code>, <code>…</code> ) to a full language allowing <a href="/en/CSS/Media_queries" title="en/CSS/Media_queries">queries on the device media capabilities</a> like <code>only screen and (color)</code> .</p>
+
+    <p>Media queries are not only used in CSS document but also in some attributes of HTML Elements, like the {{ htmlattrxref("media","link") }} attribute of the {{ HTMLElement("link") }} element.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>The <a href="http://dev.w3.org/csswg/mediaqueries4" title="http://dev.w3.org/csswg/mediaqueries4">next iteration of this specification</a> is in the work, allowing to tailor a Web site regarding the input methods available on the user agent, with new media features like <code>hover</code> or <code>pointer</code>. Detection of EcmaScript support, using the <code>script</code> media features is also proposed.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(128,255,128);"><strong>{{ SpecName("CSS3 Style", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Style") }} since November 7th, 2013</td>
+  </tr>
+  <tr>
+   <td colspan="2">Formally defines the syntax of the content of the HTML <a href="/en/HTML/Global_attributes#attr-style" title="en/HTML/Global_attributes#attr-style"> <code>style</code> </a> global attribute.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Backgrounds", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Backgrounds") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">
+    <p>Adds:</p>
+
+    <ul>
+     <li>Support, on backgrounds, for any type of {{cssxref("&lt;image&gt;")}}, and not only for <code>uri()</code> defined ones.</li>
+     <li>Support for multiple background images.</li>
+     <li>The {{ cssxref("background-repeat") }} <code>space</code> and <code>round</code> values, and for the 2-value syntax of this CSS property.</li>
+     <li>The {{ cssxref("background-attachment") }} <code>local</code> value.</li>
+     <li>The CSS {{ cssxref("background-origin") }}, {{ cssxref("background-size") }}, and {{ cssxref("background-clip") }} properties.</li>
+     <li>Support for curved border corners, with the CSS {{ cssxref("border-radius") }}, {{ cssxref("border-top-left-radius") }}, {{ cssxref("border-top-right-radius") }}, {{ cssxref("border-bottom-left-radius") }}, and {{ cssxref("border-bottom-right-radius") }} properties.</li>
+     <li>Support for the use of an {{cssxref("&lt;image&gt;")}} as the border with the CSS {{ cssxref("border-image") }}, {{ cssxref("border-image-source") }}, {{ cssxref("border-image-slice") }}, {{ cssxref("border-image-width") }}, {{ cssxref("border-image-outset") }}, and {{ cssxref("border-image-repeat") }} properties.</li>
+     <li>Support for shadows of the element with the CSS {{ cssxref("box-shadow") }} property.</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>The <a class="external" href="http://dev.w3.org/csswg/css4-background/" title="http://dev.w3.org/csswg/css4-background/">CSS4 iteration of the Backgrounds and Borders specification</a> is already in progress, though it still hasn't reached the First Public Working Draft stage, it plans to add the ability to clip a border (with the CSS {{ cssxref("border-clip") }}, {{ cssxref("border-clip-top") }}, {{ cssxref("border-clip-right") }}, {{ cssxref("border-clip-bottom") }}, and {{ cssxref("border-clip-left") }} properties) or to control the shape of the border in a corner (using the CSS {{ cssxref("border-corner-shape") }} property).</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Multicol", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Multicol") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Adds support for easy multi-column layouts using the CSS {{ cssxref("columns") }}, {{ cssxref("column-count") }}, {{ cssxref("column-fill") }}, {{ cssxref("column-gap") }}, {{ cssxref("column-rule") }}, {{ cssxref("column-rule-color") }}, {{ cssxref("column-rule-style") }}, {{ cssxref("column-rule-width") }}, {{ cssxref("column-span") }}, {{ cssxref("column-width") }}, {{ cssxref("break-after") }}, {{ cssxref("break-before") }}, and {{ cssxref("break-inside") }}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Speech", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Speech") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Defines the <code>speech</code> media type, an aural formatting model and numerous properties specific for speech-rendering user agents.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Images", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Images") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">
+    <p>Defines the {{cssxref("&lt;image&gt;")}} data type.</p>
+
+    <p>Extends the <code>url()</code> syntax to support image slices using media fragments.</p>
+
+    <p>Adds:</p>
+
+    <ul>
+     <li>The <code>dppx</code> unit to the {{cssxref("&lt;resolution&gt;")}} data type.</li>
+     <li>The <code>image()</code> function as a more flexible alternative to <code>url()</code> to define an image from an url.<br>
+      <em><strong>At risk</strong> </em> <strong> <em>:</em> </strong> <em> due to insufficient browser support, standardization of the <code>image()</code> function may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li>
+     <li>Support for <code>linear-gradient()</code>, <code>repeating-linear-gradient()</code>, <code>radial-gradient()</code> and <code>repeating-radial-gradient()</code>.</li>
+     <li>The ability to define how a replaced element should fit in its element, using the CSS {{ cssxref("object-fit") }} property.<br>
+      <em><strong>At risk</strong> </em> <strong> <em>:</em> </strong> <em> due to insufficient browser support, standardization of the {{ cssxref("object-fit") }} and property may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li>
+     <li>The ability to override the resolution and orientation of an external image using the CSS {{ cssxref("image-resolution") }} and {{ cssxref("image-orientation") }} properties.<br>
+      <em><strong>At risk</strong> </em> <strong> <em>:</em> </strong> <em> due to insufficient browser support, standardization of the {{ cssxref("image-resolution") }} and {{ cssxref("image-orientation") }} properties may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>The <a href="#Images_(Level_4)">CSS Image Values and Replaced Content Level 4</a> which will supersede CSS Image Level 3 is in development and is a {{Spec2("CSS4 Images")}}.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(220, 255, 220);"><strong>{{ SpecName("CSS3 Values", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Values") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">
+    <p>Makes <code>initial</code> and <code>inherit</code> keywords usable on any CSS property.</p>
+
+    <p>Formally defines the CSS data types of CSS 2.1, that were implicitely defined by their grammar token and some textual precisions.</p>
+
+    <p>Adds:</p>
+
+    <ul>
+     <li>Definition for new font-relative length units: <code>rem</code> and <code>ch</code> .</li>
+     <li>Definition for viewport-relative length units: <code>vw</code>, <code>vh</code>, <code>vmax</code>, and <code>vmin</code> .</li>
+     <li>Precision about the real size of the absolute length units, which are not really absolute, but defined in relation with the <em>reference pixel</em> .</li>
+     <li>Definition for {{ cssxref("&lt;angle&gt;") }}, {{cssxref("&lt;time&gt;")}}, {{cssxref("&lt;frequency&gt;")}}, {{cssxref("&lt;resolution&gt;")}}.</li>
+     <li>Normative value to the definition of {{cssxref("&lt;color&gt;")}}, {{cssxref("&lt;image&gt;")}}, and {{cssxref("&lt;position&gt;")}}.</li>
+     <li>Definition for the {{ cssxref("calc", "calc()") }}, {{ cssxref("attr", "attr()")}}, and <code>toggle()</code> functional notations.<br>
+      <em><strong>At risk:</strong> due to insufficient browser support, standardization of the <code>calc()</code>, <code>attr()</code>, and <code>toggle()</code> functional notations may be postponed to </em> <em>the next iteration of this module</em><em>.</em></li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Several types definition, like <code>&lt;ident&gt;</code> and <code>&lt;custom-ident&gt;</code>, have been deferred to CSS Values and Units Module Level 4.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Flexbox", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Flexbox") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Add a flexbox layout to the CSS {{ cssxref("display") }} property and several new CSS properties to control it: {{ cssxref("flex") }}, {{ cssxref("flex-align") }}, {{ cssxref("flex-direction") }}, {{ cssxref("flex-flow") }}, {{ cssxref("flex-item-align") }}, {{ cssxref("flex-line-pack") }}, {{ cssxref("flex-order") }}, {{ cssxref("flex-pack") }}, and {{ cssxref("flex-wrap") }}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(220, 255, 220);"><strong>{{ SpecName("CSS3 Conditional", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Conditional") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Adds features for conditional processing of parts of style sheets, conditioned on capabilities of the browser or the document the style sheet is being applied to. It consists mainly in allowing nested at-rules inside {{ cssxref("@media") }} and the adding of a new CSS at-rule, {{ cssxref("@supports") }}, and a new DOM method {{domxref("CSS.supports()")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(220, 255, 220);"><strong>{{ SpecName("CSS3 Text Decoration", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Text Decoration") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">
+    <p>Extends:</p>
+
+    <ul>
+     <li>the CSS {{ cssxref("text-decoration") }} property by making it a shorthand for the CSS {{ cssxref("text-decoration-line") }}, {{ cssxref("text-decoration-color") }}, and {{ cssxref("text-decoration-style") }} properties. And adds the {{ cssxref("text-decoration-skip") }}, and {{ cssxref("text-underline-position") }} properties.</li>
+    </ul>
+
+    <p>Adds:</p>
+
+    <ul>
+     <li>Support for East-Asian-script emphasis marks with the CSS {{ cssxref("text-emphasis") }}, {{ cssxref("text-emphasis-style") }}, {{ cssxref("text-emphasis-color") }}, and {{ cssxref("text-emphasis-position") }} properties.</li>
+     <li>Support for script shadows with the CSS {{ cssxref("text-shadow") }} property.</li>
+    </ul>
+
+    <p>Clarifies:</p>
+
+    <ul>
+     <li>The paint order of the decorations.</li>
+    </ul>
+
+    <p><em><strong>At risk:</strong> due to insufficient browser support, standardization of the <code>text-decoration-skip</code>, line positioning rules and the ability to place both emphasis marks and ruby above the same base text may be postponed to </em> <em>the next iteration of this module</em><em>.</em></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Fonts", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Fonts") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">
+    <p>Amends the CSS2.1 Font matching algorithm to be closer to what is really implemented.</p>
+
+    <p>Adds:</p>
+
+    <ul>
+     <li>Support for downloadable fonts via the CSS {{ cssxref("@font-face") }} at-rule.</li>
+     <li>The control of the contextual inter-glyph spacing via the CSS {{ cssxref("font-kerning") }} property.</li>
+     <li>The choice of language-specific glyphs via the CSS {{ cssxref("font-language-override") }} property.</li>
+     <li>The choice of glyphs with specific OpenType features via the CSS {{ cssxref("font-feature-settings") }} property.</li>
+     <li>The control of the aspect ratio to use when fallback fonts are selected via the CSS {{ cssxref("font-size-adjust") }} property.</li>
+     <li>The choice of alternative font faces using the CSS {{ cssxref("font-stretch") }}, {{ cssxref("font-variant-alternates") }}, {{ cssxref("font-variant-caps") }}, {{ cssxref("font-variant-east-asian") }}, {{ cssxref("font-variant-ligatures") }}, {{ cssxref("font-variant-numeric") }}, and {{ cssxref("font-variant-position") }} properties. It also extends the related CSS {{ cssxref("font-variant") }} shorthand property and introduces the {{ cssxref("@font-feature-values") }} at-rule.</li>
+     <li>The control of the automatic generation of an oblique or bold face when none are found via the CSS {{ cssxref("font-synthesis") }} property.</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Cascade", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Cascade") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">
+    <p>Adds:</p>
+
+    <ul>
+     <li>The <code>initial</code>, <code>unset</code> values for properties.</li>
+     <li>The CSS {{ cssxref("all") }} property.</li>
+     <li>The scoping mechanism.</li>
+    </ul>
+
+    <p>Clarifies:</p>
+
+    <ul>
+     <li>Interaction of media-dependent @import statements and style sheet loading requirements.</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Writing Modes", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Writing Modes") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Defines the writing modes of both horizontal and vertical scripts and clarifies how the CSS {{ cssxref("direction") }} and {{ cssxref("unicode-bidi") }} properties interact with the new CSS {{ cssxref("text-orientation") }} property, and extends them where needed.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS Shapes", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS Shapes") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Defines geometric shapes, which can be applied to floats. These shapes describe areas, around which inline content wraps instead of wrapping around the bounding box.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS Masks", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS Masks") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Defines a way for partially or fully hiding portions of visual elements. It describes how to use another graphical element or image as a luminance or alpha mask.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Modules_in_the_refining_phase">Modules in the refining phase</h3>
+
+<p>Specifications that are deemed to be in the <em>refining phase</em> are already fairly stable. Though changes are still expected, they shouldn't create incompatibilities with current implementations; they should mainly define behavior in edge cases.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("Web Animations", "", "") }}</strong></td>
+   <td>{{ Spec2("Web Animations") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Counter Styles", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Counter Styles") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("Compositing", "", "") }}</strong></td>
+   <td>{{ Spec2("Compositing") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Syntax", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Syntax") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Clarifies how charsets are determined; minor changes in parsing and tokenization algorithms.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS Will Change", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS Will Change") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Transitions", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Transitions") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Allows the definition of transitions effects between two properties values by adding the CSS {{ cssxref("transition") }}, {{ cssxref("transition-delay") }}, {{ cssxref("transition-duration") }}, {{ cssxref("transition-property") }}, and {{ cssxref("transition-timing-function") }} properties.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Animations", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Animations") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Allows the definition of animations effects by adding the CSS {{ cssxref("animation") }}, {{ cssxref("animation-delay") }},{{ cssxref("animation-direction") }}, {{ cssxref("animation-duration") }}, {{ cssxref("animation-fill-mode") }}, {{ cssxref("animation-iteration-count") }}, {{ cssxref("animation-name") }}, {{ cssxref("animation-play-state") }}, and {{ cssxref("animation-timing-function") }} properties, as well as the {{ cssxref("@keyframes") }} at-rule.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Transforms", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Transforms") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">
+    <p>Adds:</p>
+
+    <ul>
+     <li>the support of bi-dimensional transforms to be applied to any element using the CSS {{ cssxref("transform") }} and {{ cssxref("transform-origin") }} properties. The supported transforms are: <code>matrix</code><code>()</code>, <code>translate()</code>, <code>translateX()</code>, <code>translateY()</code>, <code>scale()</code>, <code>scaleX()</code>, <code>scaleY()</code>, <code>rotate()</code>, <code>skewX()</code>, and <code>skewY()</code>.</li>
+     <li>the support of tri-dimensional transforms to be applied to any element by adding the CSS {{ cssxref("transform-style") }}, {{ cssxref("perspective") }}, {{ cssxref("perspective-origin") }}, and {{ cssxref("backface-visibility") }} properties and extended the {{ cssxref("transform") }} property with the following transforms are: <code>matrix</code> <code>3d()</code>, <code>translate3d()</code>, <code>translateZ()</code>,  <code>scale3d()</code>, <code>scaleZ()</code>, <code>rotate3d()</code>, <code>rotateX</code><code>()</code>, <code>rotateY</code><code>()</code>, <code>rotateZ()</code>, and <code>perspective()</code>.</li>
+    </ul>
+
+    <p><em><strong>Note:</strong> this specification is a merge of CSS 2D-Transforms, CSS 3D-Transforms and SVG transforms. </em></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(255, 255, 220);"><strong>{{ SpecName("CSS3 Fragmentation", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Fragmentation") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Defines how partitions of a Web page should happen, that is page, column breaks, and widows and orphans handling.
+    <p>Adds:</p>
+
+    <ul>
+     <li>Support for defining the behavior of decorations, that is borders and background colors or images, when a box is breaked (at a page, column or line-break) with the CSS {{ cssxref("box-decoration-break") }} property.</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Text", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Text") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">
+    <p>Extends:</p>
+
+    <ul>
+     <li>the CSS {{ cssxref("text-transform") }} property with the value <code>full-width</code>.</li>
+     <li>the CSS {{ cssxref("text-align") }} property with the value <code>start</code>, <code>end</code>, <code>start end</code>, and <code>match-parent</code> for a better support of documents with multiple directionalities of text.</li>
+     <li>the CSS {{ cssxref("text-align") }} property with a {{cssxref("&lt;string&gt;")}} value to align on that character. This is useful to align number on the decimal point.</li>
+     <li>the CSS {{ cssxref("word-spacing") }} and {{ cssxref("letter-spacing") }} properties with range constraints to control flexibility in justification.</li>
+    </ul>
+
+    <p>Adds:</p>
+
+    <ul>
+     <li>Control on how whitespaces are displayed using the CSS {{ cssxref("text-space-collapse") }} and {{ cssxref("tab-size") }} properties.</li>
+     <li>Control on line breaks and word boundaries using the CSS {{ cssxref("line-break") }}, {{ cssxref("word-break") }}, {{ cssxref("hyphens") }}, {{ cssxref("text-wrap") }}, {{ cssxref("overflow-wrap") }}, and {{ cssxref("text-align-last") }} properties.</li>
+     <li>Control on how justification is happening, in order to support more type of scripts, using the CSS {{ cssxref("text-justify") }} property.</li>
+     <li>Control on edge effect using the CSS {{ cssxref("text-indent") }} and {{ cssxref("hanging-punctuation") }} properties.</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>A few features present in early CSS Text Level 3 draft have being <a class="external" href="http://dev.w3.org/csswg/css3-text/#recent-changes" title="http://dev.w3.org/csswg/css3-text/#recent-changes">postponed to the next iteration of this module</a> .</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Variables", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Variables") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Defines a mechanism allowing to define variables in CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("Compositing", "", "") }}</strong></td>
+   <td>{{ Spec2("Compositing") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Modules_in_the_revising_phase">Modules in the revising phase</h3>
+
+<p>Modules that are in the revising phase are much less stable than those in the refining phase. Often the syntax is still under scrutiny and may evolve a lot, in a non-compatible way. Alternative syntaxes are tested and often implemented.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(255,160,100);"><strong>{{ SpecName("CSS3 Basic UI", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Basic UI") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">
+    <p>Adds:</p>
+
+    <ul>
+     <li>The ability to tweak the box model using the CSS {{ cssxref("box-sizing") }} property.<br>
+      <strong><em>At risk:</em> </strong> <em> due to insufficient browser support, standardization of the <code>padding</code><code>-box</code> value may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li>
+     <li>Allow the styling of forms according their content using the CSS {{ cssxref(":indeterminate") }}, {{ cssxref(":default") }}, {{ cssxref(":valid") }}, {{ cssxref(":invalid") }}, {{ cssxref(":in-range") }}, {{ cssxref(":out-of-range") }}, {{ cssxref(":required") }}, {{ cssxref(":optional") }}, {{ cssxref(":read-only") }}, and {{ cssxref(":read-write") }} pseudo-classes and the {{ cssxref("::value") }}, {{ cssxref("::choices") }}, {{ cssxref("::repeat-item") }}, and {{ cssxref("::repeat-index") }} pseudo-elements.<br>
+      <em><strong>At risk:</strong> due to insufficient browser support, standardization of the pseudo-elements {{ cssxref("::value") }}, {{ cssxref("::choices") }}, {{ cssxref("::repeat-item") }}, and {{ cssxref("::repeat-index") }} may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li>
+     <li>Support for icons, defined by the CSS {{ cssxref("icon") }} property simultaneously with the new <code>icon</code> value of the CSS {{ cssxref("content") }} property.<br>
+      <em><strong>At risk:</strong> due to insufficient browser support, standardization of the {{ cssxref("icon") }} property and the <code>icon</code> value may be postponed to CSS4. </em></li>
+     <li>Support for the CSS {{ cssxref("outline-offset") }} property giving more control on the position of the outline.</li>
+     <li>Support for the CSS {{ cssxref("resize") }} property allowing Web authors to control if and how elements should be resized.</li>
+     <li>Support for the CSS {{ cssxref("text-overflow") }} property defining how text overflows, if needed.<br>
+      <em><strong>At risk:</strong> due to insufficient browser support, the 2-value syntax of this property as well as the support for {{cssxref("&lt;string&gt;")}} values may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li>
+     <li>The ability to define the hotspot of a cursor as well as the new <code>none</code>, <code>context-menu</code>, <code>cell</code>, <code>vertical-text</code>, <code>alias</code>, <code>copy</code>, <code>no-drop</code>, <code>not-allowed</code>, <code>nesw-</code><code>resize</code>, <code>nwse-</code><code>resize</code>, <code>col-resize</code>, <code>row-resize</code>, <code>all-scroll</code>, <code>zoom-in</code>, <code>zoom-out</code>, extending the {{ cssxref("cursor") }} property.</li>
+     <li>The ability to specify the sequential navigation order (that is the <em>tabbing order</em> ) using the CSS {{ cssxref("nav-index") }}, {{ cssxref("nav-up") }}, {{ cssxref("nav-right") }}, {{ cssxref("nav-left") }}, {{ cssxref("nav-down") }} properties.<br>
+      <em><strong>At risk:</strong> due to insufficient browser support, standardization of the navigation properties may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li>
+     <li>The ability to control the usage of an IME editor, using the CSS {{ cssxref("ime-mode") }} property.<br>
+      <em><strong>At risk:</strong> due to insufficient browser support, standardization of the {{ cssxref("ime-mode") }} property may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>An early list of what could be in the next iteration of the CSS Basic User Interface Module is <a class="external" href="http://wiki.csswg.org/spec/css4-ui" title="http://wiki.csswg.org/spec/css4-ui">available</a>.</p>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(255,160,100);"><strong>{{ SpecName("CSS3 Grid", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Grid") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Add a grid layout to the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display" title=""><code>display</code></a> property and several new CSS properties to control it: {{cssxref("grid")}}, {{cssxref("grid-area")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-flow")}}, {{cssxref("grid-auto-position")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-column")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row")}}, {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-template")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-template-rows")}}, and {{cssxref("grid-template-columns")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(255,160,100);"><strong>{{ SpecName("CSS3 Box Alignment", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Box Alignment") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(255,160,100);"><strong>{{ SpecName("CSS3 Paged Media", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Paged Media") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(255,160,100);"><strong>{{ SpecName("CSSOM View", "", "") }}</strong></td>
+   <td>{{ Spec2("CSSOM View") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(255,160,100);"><strong>{{ SpecName("CSS4 Selectors", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS4 Selectors") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Modules_in_the_exploring_phase">Modules in the exploring phase</h3>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS4 Images", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS4 Images") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">
+    <p>Extends:</p>
+
+    <ul>
+     <li>the <code>image()</code> functional notation to describe the directionality of the image (<code>rtl</code> or <code>ltr</code>), allowing for bidi-sensitive images.</li>
+     <li>the {{ cssxref("image-orientation") }} property by adding the keyword <code>from-image</code>, allowing to follow EXIF data stored into images to be considered.</li>
+    </ul>
+
+    <p>Adds:</p>
+
+    <ul>
+     <li>the <code>image-set()</code> functional notation to allow the definition to equivalent images at different resolution allowing for resolution-negotiated selection of images.</li>
+     <li>the <code>element()</code> functional notation allowing the use of part of the page as image.</li>
+     <li>the <code>cross-fade()</code> functional notation allowing to refer to intermediate images when transitioning between two images and defines the interpolation between two images.</li>
+     <li>the <code>conic-gradient()</code> and <code>repeating-conic-gradient()</code> functional notation describing a new type of gradient.</li>
+     <li>the {{cssxref("image-rendering")}} property that allow to define how resize of the object should be handled.</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Device", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Device") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Adds a new at-rule, {{ cssxref("@viewport") }}, allowing to specify the size, zoom factor, and orientation of the viewport that is used as the base for the initial containing block.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 GCPM", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 GCPM") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Adds the ability to tailor printed version of a document by allowing to control header, footer but also references tables like indexes or tables of content.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS Exclusions", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS Exclusions") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Extends the floats mechanism to define exclusion regions in any positioning scheme. Adds the notion of shapes, in which content must flows.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Lists", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Lists") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Extends the list counter mechanism so that list markers can be styled and Web developers can define new list counter schemes.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Regions", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Regions") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Defines a new mechanism allowing content to flow across, eventually non-contiguous, multiple areas called regions.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Device", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Device") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Adds a new at-rule, {{ cssxref("@viewport") }}, allowing to specify the size, zoom factor, and orientation of the viewport that is used as the base for the initial containing block.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("Filters 1.0", "", "") }}</strong></td>
+   <td>{{ Spec2("Filters 1.0") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Template", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Template") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Sizing", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Sizing") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS Line Grid", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS Line Grid") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Positioning", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Positioning") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Ruby", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Ruby") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSSOM", "", "") }}</strong></td>
+   <td>{{ Spec2("CSSOM") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Overflow", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Overflow") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Font Loading", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Font Loading") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Display", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Display") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS Scope", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS Scope") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS4 Media Queries", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS4 Media Queries") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS Non-element Selectors", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS Non-element Selectors") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("Geometry Interfaces", "", "") }}</strong></td>
+   <td>{{ Spec2("Geometry Interfaces") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Inline", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Inline") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Modules_in_the_rewriting_phase">Modules in the rewriting phase</h3>
+
+<p>Modules that are in the rewriting phase are outdated and require to be rewritten. The syntax is still under scrutiny and may evolve a lot, in a non-compatible way. Alternative syntaxes are tested and often implemented.</p>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F33;"><strong>{{ SpecName("CSS3 Box", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Box") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F33;"><strong>{{ SpecName("CSS3 Content", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Content") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F33;"><strong>{{ SpecName("CSS3 Inline Layout", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Inline Layout") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/de/archive/index.html b/files/de/archive/index.html
new file mode 100644
index 0000000000..4f4a70c023
--- /dev/null
+++ b/files/de/archive/index.html
@@ -0,0 +1,21 @@
+---
+title: Archive of obsolete content
+slug: Archive
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive
+---
+<p>Here at MDN, we try to avoid outright deleting content that might be useful to people targeting legacy platforms, operating systems, and browsers. Perhaps your target audience is people that are using older hardware, for example, and can't upgrade to the latest and greatest browsers. Or for "reasons," your company is required to use very old software and you need to build Web content that runs on that software. Or perhaps you're just curious about the history of an obsolete feature or API, and how it worked.</p>
+
+<p>There are many reasons older documentation can be useful. So, we've established this area into which we can archive older documentation. Material in this Archived content zone should <strong>not</strong> be used for building new Web sites or apps for modern browsers. It's here for historical reference only.</p>
+
+<div class="note">
+<p><strong>Note to writers:</strong> We need to try to keep the subpages here organized instead of all dumped into one large folder. Try to create subtrees for categories of material. Also, only move pages here that are <strong>extremely</strong> obsolete. If anyone might realistically need the information in a living product, it may not be appropriate to move it here. In general, it may be best to discuss it in the <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">MDN Web Docs chat room</a> before moving content here.</p>
+</div>
+
+<p>{{SubpagesWithSummaries}}</p>
+
+<h2 id="Subnav">Subnav</h2>
+
+<p>{{ListSubpages("/en-US/docs/Archive", 2, 0, 1)}}</p>
diff --git a/files/de/archive/mdn/index.html b/files/de/archive/mdn/index.html
new file mode 100644
index 0000000000..9e550840e3
--- /dev/null
+++ b/files/de/archive/mdn/index.html
@@ -0,0 +1,20 @@
+---
+title: MDN Archive
+slug: Archive/MDN
+tags:
+  - Archive
+  - MDN
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/MDN
+---
+<p>{{MDNSidebar}}</p>
+
+<div class="blockIndicator obsolete">
+<p><strong>Obsolete</strong><br>
+ This documentation is obsolete.</p>
+</div>
+
+<p>The documentation listed below is archived, obsolete material about MDN itself.</p>
+
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/de/archive/mozilla/index.html b/files/de/archive/mozilla/index.html
new file mode 100644
index 0000000000..0acec76e6d
--- /dev/null
+++ b/files/de/archive/mozilla/index.html
@@ -0,0 +1,10 @@
+---
+title: Archived Mozilla and build documentation
+slug: Archive/Mozilla
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/Mozilla
+---
+<p>These articles are archived, obsolete documents about Mozilla, Gecko, and the process of building Mozilla projects.</p>
+<p>{{SubpagesWithSummaries}}</p>
diff --git a/files/de/archive/mozilla/marketplace/apis/index.html b/files/de/archive/mozilla/marketplace/apis/index.html
new file mode 100644
index 0000000000..ca60d38982
--- /dev/null
+++ b/files/de/archive/mozilla/marketplace/apis/index.html
@@ -0,0 +1,46 @@
+---
+title: Zusatz Bibiliotheken and APIs
+slug: Archive/Mozilla/Marketplace/APIs
+tags:
+  - Anfänger
+  - Anwendungen
+  - Firefox OS
+  - Marketplace
+  - Marktplatz
+translation_of: Archive/Mozilla/Marketplace/APIs
+---
+<div class="summary">
+<p>Wenn es um das Programmieren in Ihrer App oder Web-Seite für den Firefox Marketplace geht, werden Sie Marketplace Zusatz Bibliotheken, Web APIs und Marketplace APIs verwenden. Diese Seite erklärt Ihnen, wie und wann Sie diese Optionen verwenden können und stellt Ihnen weitere Links zu noch mehr Informationen bereit.</p>
+</div>
+
+<h2 id="Marketplace_Zusatz_Bibiliotheken">Marketplace Zusatz Bibiliotheken</h2>
+
+<div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+<div><span id="noHighlight_0.44059025102469707">Die Marketplace Zusatz Bibliotheken sollen Ihr tägliches Programmieren einfacher machen.</span><span id="noHighlight_0.3078771717653538"> Es gibt zurzeit eine solche Bibliothek, es können aber mehr entstehen, sobald es noch mehr Funktionen für den Marketplace geben wird.</span></div>
+
+<div> </div>
+</div>
+
+<ul>
+ <li><code><a href="https://github.com/mozilla/receiptverifier">receiptverifier</a></code> — <span id="ouHighlight__18_21TO18_22">diese</span><span id="noHighlight_0.4804083604052125"> </span><span id="ouHighlight__23_29TO24_33">Bibliothek</span><span id="noHighlight_0.05684307958175727"> </span><span id="ouHighlight__31_37TO35_39">dient</span><span id="noHighlight_0.24275668418068386"> </span><span id="ouHighlight__39_40TO41_43">zur</span><span id="noHighlight_0.959966966600046"> </span><span id="ouHighlight__42_47TO45_55">Überprüfung</span><span id="noHighlight_0.6238971479933465"> von </span><span id="ouHighlight__49_64TO61_77">Zahlungseingängen</span><span id="noHighlight_0.01917105184382417">.</span><span id="noHighlight_0.9413199495716078"> Die Verwendung der Bibliothek</span><span id="noHighlight_0.9190130102412998"> </span><span id="ouHighlight__75_76TO97_100">wird</span><span id="noHighlight_0.04334018605069223"> im Artikel </span><a href="/en-US/Marketplace/Monetization/Validating_a_receipt">Überprüfung einer Quitung</a> beschrieben.</li>
+</ul>
+
+<h2 id="Web_APIs">Web APIs</h2>
+
+<p>Ihre App für den Marketplace benötigt zur Verwendung von Web APIs bestimmte Funktionen:</p>
+
+<ul>
+ <li><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/window.navigator.mozPay">navigator.mozPay</a></code> und ihre Verwandte<a class="external external-icon" href="https://wiki.mozilla.org/WebAPI/WebPaymentProvider"> Web Payment Provider</a> — Dieses API wird verwendet, um In-App Käufe zu tätigen. Die Benutzung ist hier beschrieben: <a href="/en-US/Marketplace/Monetization/In-app_payments">In-app payments</a></li>
+</ul>
+
+<h2 id="Marketplace_APIs">Marketplace APIs</h2>
+
+<p>Für die üblichen Anwendungen brauchen Sie die Marketplace APIs nicht, doch manche Projekte, wie das <a href="/en-US/Marketplace/Options/Creating_a_store">Erstellen von eigenen Shops</a>, benötigen diese. Wenn Sie also bestimmte Funktionen in diesem Bereich brauchen, bietet es sich an, die Marketplace APIs zu nutzen. </p>
+
+<p>Die Dokumentation der Marketplace APIs finden sie <a href="http://firefox-marketplace-api.readthedocs.org/en/latest/topics/overview.html">hier</a>, auf readthedocs.org. Bitte treten Sie der <a href="https://lists.mozilla.org/listinfo/dev-marketplace">Entwickler-Marketplace</a> Mailing Liste bei, wenn Sie noch weitere Informationen zum Marketplace API brauchen.</p>
+
+<div class="note">
+<p>Diese Marketplace API Dokumentation beschreibt den Einsatz in der Entwicklung von Apps für den Firefox Marketplace. Das heißt, dass dieser Artikel Informationen über APIs enthalten kann, die im öffentlichen Marketplace nicht zugänglich sind.</p>
+</div>
+
+<p> </p>
diff --git a/files/de/archive/mozilla/marketplace/faq/index.html b/files/de/archive/mozilla/marketplace/faq/index.html
new file mode 100644
index 0000000000..6b6def2d3a
--- /dev/null
+++ b/files/de/archive/mozilla/marketplace/faq/index.html
@@ -0,0 +1,30 @@
+---
+title: Firefox Marketplace FAQs
+slug: Archive/Mozilla/Marketplace/FAQ
+translation_of: Archive/Mozilla/Marketplace/FAQ
+---
+<dl>
+ <dt>
+  Wie kann ich eine neue App hochladen?</dt>
+ <dd>
+  Schaue dir dazu diesen Artikel an: <a href="/de/Marketplace/Submission/Submitting_an_app" title="/en-US/docs/Apps/Publishing/Submitting_an_app?redirectlocale=en-US&amp;redirectslug=Apps%2FSubmitting_an_app">Veröffentlichen einer App</a></dd>
+
+ <dt>
+  Was ist der Genehmigungsprozess?</dt>
+ <dd>
+  Für die Entwickler-Preview werden alle Apps mit einer gültigen manifest-Datei automatisch zugelassen.</dd>
+ <dt>
+  Müssen meine Apps den Content-Richtlinien entsprechen?</dt>
+ <dd>
+  Die primären inhaltlichen Einschränkungen im "Firefox Marketplace" verhindern, dass bösartige oder illegale Aktivitäten zu stande kommen. Die Richtlinien sind die Gleichen, wie die <a href="https://addons.mozilla.org/en-US/developers/docs/policies/reviews#section-prohibited" title="https://addons.mozilla.org/en-US/developers/docs/policies/reviews#section-prohibited">Content-Richtlinien für den Firefox.</a> Die Richtlinien werden vor dem benutzersichtbaren Betastart vom "Marketplace" fertig sein.</dd>
+ <dt>
+  Wie verkauft der "Firefox Marketplace" meine App?</dt>
+ <dd>
+  <div class="note">
+   <strong>Notiz:</strong> Kauf-Apps und In-App-Käufe sind der Zeit im "Firefox Marketplace" deaktiviert (August 2012). Es wird erwartet, dass diese Funktionen im Oktober 2012 wieder aktiviert werden.</div>
+ </dd>
+ <dt>
+  Wer hosted die App?</dt>
+ <dd>
+  Du hostest alle Dateien deiner App auf deinem eigenden Server. Wenn du eine App in den "Firefox Marketplace" einträgst, gibst du die URL von der manifest-Datei deiner App an, welches der "Marketplace" einliest und überprüft. Du kannst Icons, Screenshots, usw. hochladen, um deine App im "Firefox Marketplace" zu promoten.</dd>
+</dl>
diff --git a/files/de/archive/mozilla/marketplace/index.html b/files/de/archive/mozilla/marketplace/index.html
new file mode 100644
index 0000000000..10b84af67e
--- /dev/null
+++ b/files/de/archive/mozilla/marketplace/index.html
@@ -0,0 +1,126 @@
+---
+title: Firefox Marketplace
+slug: Archive/Mozilla/Marketplace
+tags:
+  - Anfänger
+  - Apps
+  - Beginner
+  - Firefox OS
+  - Intro
+  - Landing
+  - Marketplace
+translation_of: Archive/Mozilla/Marketplace
+---
+<div class="summary">Der Firefox-Marktplatz ist ein offener und nicht-proprietärer Online-Marktplatz für Web-Anwendungen mit HTML5.</div>
+
+<p>Der Firefox-Marketplace ermöglicht Entwicklern, plattformübergreifende <a href="/en-US/Apps">open web Anwendungen</a> mittels standardisierter Web-Technologien, Sprachen und Tools zu veröffentlichen. Mozilla bringt seine innersten Werte — Offenheit, Freiheit, Auswahl durch den Benutzer – in die Welt der Apps.</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Community" id="Community" name="Community">Ihre Apps veröffentlichen</h2>
+
+<dl>
+ <dt><a href="/de/Marketplace/Publishing/Publish_options">App Veröffentlichungsoptionen</a></dt>
+ <dd>
+ <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+ <div>Nachdem Sie eine offene Web-App erstellt haben, stehen Ihnen verschiedene Optionen für die Veröffentlichung zur Verfügung. Dieser Artikel erklärt, was zur Auswahl steht.</div>
+ </div>
+ </dd>
+ <dt><a href="/de/Marketplace/Submission/Submitting_an_app">Übermitteln einer App in den Firefox Marketplace</a></dt>
+ <dd>
+ <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+ <div>Ein ausführlicher Leitfaden für diejenigen, die eine App auf dem Firefox-Marketplace veröffentlichen wollen um Sie der ganzen Welt zur Verfügung zu stellen..</div>
+ </div>
+ </dd>
+ <dt><a href="/de/Apps/Publishing/General_app_publishing_topics">Allgemeines zur App-Veröffentlichung</a></dt>
+ <dd>
+ <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+ <div>Allgemeine Informationen und nützliche Tipps über die Veröffentlichung von Web-Apps.</div>
+ </div>
+ </dd>
+ <dt><a href="/de/Marketplace/Marketplace_APIs">Firefox Marketplace APIs</a></dt>
+ <dd>
+ <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+ <div>Links zu den wichtigsten Referenzhandbüchern für Mozillas Firefox Marketplace APIs, mit denen Sie Zahlungskonten und das automatische Hochladen der App (und der Updates) kontrollieren können.</div>
+ </div>
+ </dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Community" id="Community" name="Community">Monetarisierung</h2>
+
+<dl>
+ <dt><a href="/de/Marketplace/Monetization/Profiting_from_your_app">Profitieren von Ihrer App</a></dt>
+ <dd>
+ <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+ <div>Sie haben viel Arbeit und Liebe in ihre App gesteckt und wollen nun auch etwas von der App haben? Dieser Artikel befasst sich mit kostenpflichtigen Apps und In-App-Käufen. Alles Wege, damit Sie Geld an ihrem Werk verdienen.</div>
+ </div>
+ </dd>
+</dl>
+
+<h2 class="Tools" id="Tools" name="Tools">Werkzeuge für App Entwickler</h2>
+
+<ul>
+ <li><a href="/de/Firefox_OS/Using_the_App_Manager">Firefox OS App Manage</a></li>
+ <li></li>
+ <li><a href="/de/Apps/App_developer_tools">App Entwickler Tools</a></li>
+</ul>
+
+<h2 id="Erstellen_Sie_Ihren_eigenen_Marketplace">Erstellen Sie Ihren eigenen Marketplace</h2>
+
+<dl>
+ <dt><a href="/de/Marketplace/Creating_a_store">Erstellen eines Marktplatzes</a></dt>
+ <dd>
+ <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+ <div>Sie müssen nicht den Firefox-Marktplatz verwenden, um Ihre Anwendung zu verteilen. Sie können auch ihren eigenen internen Marktplatz erstellen. Nützlich zum Beispiel für Firmennetzwerke.</div>
+ </div>
+ </dd>
+</dl>
+</div>
+</div>
+
+<h2 id="Subnav">Subnav</h2>
+
+<ol>
+ <li><a href="/de/Marketplace/Submission">Eine App veröffentlichen und überprüfen</a>
+
+  <ol>
+   <li><a href="/de/Marketplace/Submission/Submitting_an_app" title="This step-by-step guide will help you successfully submit your app to the Firefox Marketplace.">Veröffentlichen einer App im Firefox Marketplace</a></li>
+   <li><a href="/de/Marketplace/Submission/Rating_Your_Content">Eine App bewerten</a></li>
+   <li><a href="/de/Marketplace/Submission/Marketplace_review_criteria" title="An explanation of the criteria an app must meet in order to be published on the Firefox Marketplace">Überprüfungskriterien für Marketplace</a></li>
+   <li><a href="/de/Marketplace/Publishing/Marketplace_screenshot_criteria" title="Some guidelines on how to create an effective screenshot for marketplace submission">Marketplace: screenshot Kriterien</a></li>
+   <li><a href="/de/Marketplace/Publishing/Privacy_policies" title="Your users' privacy is very important, so you need to develop and adhere to a reasonable privacy policy to engender their trust. This article provides a guide to developing privacy policies.">Leitfaden für die Datenschutzerklärungen</a></li>
+   <li><a href="/de/Marketplace/Submission/Testing_and_troubleshooting">Das Testen und Verbessern ihrer Apps.</a></li>
+  </ol>
+ </li>
+ <li><a href="/de/Marketplace/Publishing">Veröffentlichung</a>
+  <ol>
+   <li><a href="/de/Marketplace/Publishing/Publish_options" title="If you don't want to go the Firefox Marketplace route, here is some useful information on self-publishing apps.">Möglichkeiten der Veröffentlichung</a></li>
+   <li><a href="/de/Marketplace/Publishing/Packaged_apps" title="A detailed description of packaged apps, what the different types entail, and what they are used for in the context of the Firefox Marketplace, and self-published apps.">Verpacken der Apps</a></li>
+   <li><a href="/de/Marketplace/Publishing/Updating_apps" title="Information about how both hosted and packaged app updates are handled, and what you need to do to ensure that your app properly supports updating.">Apps aktualisieren.</a></li>
+   <li><a href="/de/Marketplace/Publishing/Open_web_apps_for_android">Open-Web-Apps für Android</a></li>
+   <li><a href="/de/Marketplace/Publishing/Adding_a_subdomain" title="For security reasons, each app must have its own domain (or subdomain) on the Web. This article covers how to go about creating a subdomain for your app.">Einen "Subdomain" zur App hinzufügen.</a></li>
+   <li><a href="/de/Marketplace/Publishing/Creating_a_store" title="Information that may be helpful to you if you want to build your own store for selling and distributing Open Web Apps.">Ihren eigenen Marktplatz erstellen.</a></li>
+  </ol>
+ </li>
+ <li><a href="/de/Marketplace/Monetization">Monetization</a>
+  <ol>
+   <li><a href="/de/Marketplace/Monetization/Profiting_from_your_app" title="This guide contains introductory materials on how to monetize your apps, including tools needed, and a monetization calculator.">Verdiehen Sie mit ihrer App Geld.</a></li>
+   <li><a href="/de/Marketplace/Monetization/App_payments_guide">Richtlinien zur Bezahlung</a></li>
+   <li><a href="/de/Marketplace/Monetization/In-app_payments" title="A guide to implementing support for in-app payments in your Web app.">In-App Käufe</a></li>
+   <li><a href="/de/Marketplace/Monetization/validating_a_receipt" title="A guide to when—and how—to validate your app's purchase receipt.">Überprüfung</a></li>
+   <li><a href="/de/Marketplace/Monetization/App_pricing" title="A round up of fixed price points you can choose for your paid apps, and how these vary across different currencies, along with useful supporting information on dealing with app payments.">App-Preise</a></li>
+   <li><a href="/de/Marketplace/Monetization/Payments_Status" title="An at-a-glance summary of what countries have got our app payment services set up in them — where paid apps can be distributed">Bezahlungsstatus</a></li>
+  </ol>
+ </li>
+ <li><a href="/de/Marketplace/APIs">Marketplace APIs</a>
+  <ol>
+   <li><a href="/de/Marketplace/APIs/Marketplace_utility_library" title="To help you work with the Firefox Marketplace, we provide a JavaScript library you can use in your apps to make it easier to handle in-app payments and verify payment receipts.">Marketplace utility library</a></li>
+   <li><a href="http://firefox-marketplace-api.readthedocs.org/en/latest/topics/submission.html" title="The Submission API lets you validate your app, update your app, and fetch information about the apps available to be installed.">Submission API</a></li>
+   <li><a href="http://firefox-marketplace-api.readthedocs.org/en/latest/topics/payment.html" title="The Payment API lets you get information about and process in-app purchases as well as to simply get information about what pricing tiers are available.">Payment API</a></li>
+   <li><a href="http://firefox-marketplace-api.readthedocs.org/en/latest/topics/overview.html" title="All Marketplace-related documentation is centered here.">Marketplace API</a></li>
+  </ol>
+ </li>
+ <li><a href="/de/Marketplace/FAQ">Firefox Marketplace FAQs</a></li>
+</ol>
diff --git a/files/de/archive/mozilla/marketplace/index/index.html b/files/de/archive/mozilla/marketplace/index/index.html
new file mode 100644
index 0000000000..6c4402ac0e
--- /dev/null
+++ b/files/de/archive/mozilla/marketplace/index/index.html
@@ -0,0 +1,107 @@
+---
+title: Index
+slug: Archive/Mozilla/Marketplace/Index
+translation_of: Archive/Mozilla/Marketplace/Index
+---
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th>Seite</th>
+   <th>Markierungen und Zusammenfassung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td rowspan="2"><a href="https://developer.mozilla.org/en-US/Marketplace">Firefox Marketplace</a></td>
+   <td>
+    <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+     <div>
+      <strong><span id="ouHighlight__0_3TO0_3">Apps</span><span id="noHighlight_0.5889815113305266">, </span><span id="ouHighlight__6_13TO12_19">Anfänger</span><span id="noHighlight_0.5403660475619123">,</span><span id="noHighlight_0.3387991480025444"> </span><span id="ouHighlight__16_22TO22_28">Firefox</span><span id="noHighlight_0.7668613457418992">-</span><span id="ouHighlight__24_25TO30_31">OS</span><span id="noHighlight_0.8951011927957859">,</span><span id="noHighlight_0.6148555939483893"> </span><span id="ouHighlight__28_32TO34_38">Intro</span><span id="noHighlight_0.17701457586357539">,</span><span id="noHighlight_0.5760011965409225"> </span><span id="ouHighlight__35_45TO41_50">Marktplatz</span><span id="noHighlight_0.5407654945037849">,</span><span id="noHighlight_0.4020076902746952"> </span></strong><strong><span id="ouHighlight__48_51TO6_9">l10n </span></strong><strong><span id="ouHighlight__54_61TO53_61">Priorität</span></strong></div>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+     <div>
+      <span id="ouHighlight__0_1TO0_1">In</span><span id="noHighlight_0.9522233378004807"> </span><span id="ouHighlight__3_6TO3_8">dieser</span><span id="noHighlight_0.6039522850542357"> </span><span id="ouHighlight__8_11TO10_13">Zone</span><span id="noHighlight_0.540155770285825"> </span><span id="ouHighlight__13_23TO15_24">finden Sie</span><span id="noHighlight_0.5334281819141741"> </span><span id="ouHighlight__25_27TO26_29">alle</span><span id="noHighlight_0.7497774064368447"> </span><span id="ouHighlight__33_43TO31_43">Informationen die </span><span id="ouHighlight__45_52TO45_57">Sie</span><span id="noHighlight_0.8637691350730549"> </span><span id="ouHighlight__54_55TO59_61">für</span><span id="noHighlight_0.26875779004184264"> die</span><span id="noHighlight_0.9166443347467169"> </span><span id="ouHighlight__57_63TO67_78">Vorbereitung</span><span id="noHighlight_0.3050920838286423"> </span><span id="ouHighlight__45_52TO45_57">benötigen um</span><span id="noHighlight_0.581035929121575"> </span><span id="ouHighlight__77_80TO84_87">apps</span><span id="noHighlight_0.3417867038848337"> </span><span id="ouHighlight__82_83TO89_91">auf</span><span id="noHighlight_0.5849129625057187"> </span><span id="ouHighlight__85_87TO93_95">dem</span><span id="noHighlight_0.13160167336228956"> </span><span id="ouHighlight__89_95TO97_103">Firefox</span><span id="noHighlight_0.7565775710033718">-</span><span id="ouHighlight__97_107TO105_114">Marktplatz</span><span id="noHighlight_0.12575925752470285"> zu </span><span id="ouHighlight__69_75TO119_133">veröffentlichen</span><span id="noHighlight_0.013704342936802005">.</span><span id="noHighlight_0.3797317145742377"> </span><span id="ouHighlight__115_122TO136_144">Anleitung</span><span id="noHighlight_0.6903754272667528"> </span><span id="ouHighlight__127_129TO146_148">wie</span><span id="noHighlight_0.08483738113667993"> </span><span id="ouHighlight__131_132TO150_152">man</span><span id="noHighlight_0.5903237402607715"> </span><span id="ouHighlight__139_142TO154_157">apps</span><span id="noHighlight_0.16999152835920606"> </span><span id="ouHighlight__144_153TO159_169">erfolgreich zustellt</span><span id="noHighlight_0.09615291469106424">,</span><span id="noHighlight_0.9259168020620518"> </span><span id="ouHighlight__156_171TO172_186">Zustelloptionen</span><span id="noHighlight_0.7275685671894508">,</span><span id="noHighlight_0.5880092154893579"> </span><span id="ouHighlight__174_185TO189_203">Monetarisierung</span><span id="noHighlight_0.609926802433308">,</span><span id="noHighlight_0.7579675949400887"> </span><span id="ouHighlight__188_197TO206_221">Veröffentlichung</span><span id="noHighlight_0.8412341335870109"> </span><span id="ouHighlight__199_201TO223_225">,</span><span id="noHighlight_0.5429555690721404"> </span><span id="ouHighlight__203_210TO227_240">Aktualisierung der</span><span id="noHighlight_0.17740891047659102"> </span><span id="ouHighlight__212_215TO242_245">apps</span><span id="noHighlight_0.7048266349141792">,</span><span id="noHighlight_0.1290486979080514"> </span><span id="noHighlight_0.8167801659418924"> </span><span id="ouHighlight__222_224TO252_254">die</span><span id="noHighlight_0.9556831555269909"> </span><span id="ouHighlight__226_234TO256_267">Bibliotheken</span><span id="noHighlight_0.062332747488497264"> </span><span id="ouHighlight__236_238TO269_271">und</span><span id="noHighlight_0.023689324193404082"> </span><span id="ouHighlight__240_243TO273_276">APIs</span><span id="noHighlight_0.6685367483506628"> </span><span id="ouHighlight__110_113TO288_292">Finde</span><span id="noHighlight_0.48983088239063044"> </span><span id="ouHighlight__260_270TO294_303">Marktplatz</span><span id="noHighlight_0.009531699154391449">-</span><span id="ouHighlight__272_279TO305_314">Funktionen</span><span id="noHighlight_0.36054821670722903"> zu </span><span id="ouHighlight__253_255TO316_324">verwenden</span><span id="noHighlight_0.6098192944671793">.</span></div>
+    </div>
+   </td>
+  </tr>
+  <tr>
+  </tr>
+  <tr>
+   <td rowspan="2"><a href="https://developer.mozilla.org/en-US/Marketplace/Marketplace_APIs">Firefox Marketplace APIs</a></td>
+   <td><strong>API, Apps, Marketplace</strong></td>
+  </tr>
+  <tr>
+   <td>
+    <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+     <div>
+      <span id="ouHighlight__0_4TO0_4">Links</span><span id="noHighlight_0.21735528479211452"> </span><span id="ouHighlight__6_7TO6_7">zu</span><span id="noHighlight_0.31360816644326284"> </span><span id="ouHighlight__9_11TO9_11">den</span><span id="noHighlight_0.6778438360633481"> </span><span id="ouHighlight__13_16TO13_23">wichtigsten</span><span id="noHighlight_0.9260294032984827"> </span><span id="ouHighlight__18_27TO25_34">Referenzen</span><span id="noHighlight_0.6892425980828629"> </span><span id="ouHighlight__29_36TO36_38">für</span><span id="noHighlight_0.7184151168901204"> </span><span id="ouHighlight__38_46TO40_47">Mozillas</span><span id="noHighlight_0.583987380021488"> </span><span id="ouHighlight__48_54TO49_55">Firefox</span><span id="noHighlight_0.745419169143389"> </span><span id="ouHighlight__56_66TO57_66">Marktplatz</span><span id="noHighlight_0.8075941568630335"> </span><span id="ouHighlight__68_71TO68_71">APIs</span><span id="noHighlight_0.30448284814672943">,</span><span id="noHighlight_0.10779450355262188"> </span><span id="ouHighlight__74_77TO74_76">mit</span><span id="noHighlight_0.784597949507333"> </span><span id="ouHighlight__79_83TO78_82">denen</span><span id="noHighlight_0.7752118598594266"> </span><span id="ouHighlight__85_87TO84_86">Sie</span><span id="noHighlight_0.21491125915777043"> </span><span id="ouHighlight__100_102TO89_91">app</span><span id="noHighlight_0.05542320721565541">-</span><span id="ouHighlight__104_114TO93_105">Einreichungen</span><span id="noHighlight_0.3992297430514131"> behandeln können</span><span id="noHighlight_0.5797630272832736">.</span><span id="noHighlight_0.34292369967465064"> </span><span id="ouHighlight__117_125TO125_137">Konfigurieren</span><span id="noHighlight_0.1305230935792262"> Sie </span><span id="ouHighlight__127_127TO143_145">ein</span><span id="noHighlight_0.6877012254938101"> </span><span id="ouHighlight__129_143TO147_162">Abrechnungskonto</span><span id="noHighlight_0.9771944466462119"> </span><span id="ouHighlight__145_147TO164_166">für</span><span id="noHighlight_0.3182178436818248"> </span><span id="ouHighlight__149_150TO168_171">eine</span><span id="noHighlight_0.24662945022610216"> </span><span id="ouHighlight__152_154TO173_175">app</span><span id="noHighlight_0.20909015953322518"> </span><span id="ouHighlight__157_159TO177_179">und</span><span id="noHighlight_0.5646328006860575"> vieles </span><span id="ouHighlight__161_164TO188_191">mehr</span><span id="noHighlight_0.9738319516345264">.</span></div>
+    </div>
+   </td>
+  </tr>
+  <tr>
+  </tr>
+  <tr>
+   <td rowspan="2"><a href="https://developer.mozilla.org/en-US/Marketplace/FAQ">Firefox Marketplace FAQ</a></td>
+   <td><strong>App Zahlungen, Apps, B2G, FAQ, Firefox OS, Mobile, Marketplace</strong></td>
+  </tr>
+  <tr>
+   <td>
+    <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+     <div>
+      <span id="ouHighlight__0_3TO0_5">Dieser</span><span id="noHighlight_0.19960713332041158"> </span><span id="ouHighlight__5_11TO7_13">Artikel</span><span id="noHighlight_0.1981511823059916"> </span><span id="ouHighlight__13_19TO15_25">beantwortet</span><span id="noHighlight_0.5500917761560755"> </span><span id="ouHighlight__21_21TO27_30">eine</span><span id="noHighlight_0.21041283176694026"> </span><span id="ouHighlight__23_29TO32_39">Vielzahl</span><span id="noHighlight_0.022714725732562946"> </span><span id="ouHighlight__31_32TO41_43">von</span><span id="noHighlight_0.8284602143307211"> </span><span id="ouHighlight__34_39TO45_50">häufig</span><span id="noHighlight_0.8415814458039087"> </span><span id="ouHighlight__41_49TO52_67">gestellte Fragen</span><span id="noHighlight_0.42285235271803767"> </span><span id="ouHighlight__51_57TO69_77">mit Bezug</span><span id="noHighlight_0.28131920762722384"> </span><span id="ouHighlight__59_60TO79_81">zur</span><span id="noHighlight_0.021529129984559026"> </span><span id="ouHighlight__62_71TO83_98">Veröffentlichung</span><span id="noHighlight_0.7555203624128196"> </span><span id="ouHighlight__73_74TO100_102">auf</span><span id="noHighlight_0.9391454125489938"> </span><span id="ouHighlight__76_78TO104_106">dem</span><span id="noHighlight_0.4045671935811187"> </span><a class="external external-icon" href="https://marketplace.firefox.com/">Firefox Marketplace</a>.</div>
+    </div>
+   </td>
+  </tr>
+  <tr>
+  </tr>
+  <tr>
+   <td rowspan="2"><a href="https://developer.mozilla.org/en-US/Marketplace/Index">Index</a></td>
+   <td><strong>Index</strong></td>
+  </tr>
+  <tr>
+   <td><strong>7 Seiten gefunden:</strong></td>
+  </tr>
+  <tr>
+  </tr>
+  <tr>
+   <td rowspan="2"><a href="https://developer.mozilla.org/en-US/Marketplace/Publish">Publishing on the Firefox Marketplace</a></td>
+   <td><strong>Apps, Marketplace</strong></td>
+  </tr>
+  <tr>
+   <td>
+    <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+     <div>
+      <span class="highlight" id="ouHighlight__0_12TO0_12">Dokumentation</span><span id="noHighlight_0.7049222721929723"> </span><span id="ouHighlight__14_16TO14_16">für</span><span id="noHighlight_0.5655813773908702"> das </span><span id="ouHighlight__18_27TO22_36">Veröffentlichen</span><span id="noHighlight_0.33238229399412034"> </span><span id="ouHighlight__29_30TO38_42">einer</span><span id="noHighlight_0.2006829286397801"> </span><span id="ouHighlight__32_34TO44_46">app</span><span id="noHighlight_0.12844276319970083"> </span><span id="ouHighlight__36_37TO48_50">auf</span><span id="noHighlight_0.5578515633624875"> </span><span id="ouHighlight__39_41TO52_54">dem Firefox Marketplace.</span><span id="noHighlight_0.3953718972734471"> </span></div>
+    </div>
+   </td>
+  </tr>
+  <tr>
+  </tr>
+  <tr>
+   <td rowspan="2"><a href="https://developer.mozilla.org/en-US/Marketplace/Submission">Vorlage</a></td>
+   <td><strong>Anlegen</strong></td>
+  </tr>
+  <tr>
+   <td>Marketplace Vorlagen</td>
+  </tr>
+  <tr>
+  </tr>
+  <tr>
+   <td rowspan="2"><a href="https://developer.mozilla.org/en-US/Marketplace/APIs">Zusatz Bibiliotheken und APIs</a></td>
+   <td><strong>Apps, Anfänger, Firefox OS, Anleitung, Marketplace</strong></td>
+  </tr>
+  <tr>
+   <td>
+    <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+     <div>
+      <span class="highlight" id="ouHighlight__0_3TO0_3">Wenn</span><span id="noHighlight_0.5737033828966409"> </span><span id="ouHighlight__5_6TO5_6">es</span><span id="noHighlight_0.3909536206935058"> </span><span id="ouHighlight__8_12TO8_17">darum geht</span><span id="noHighlight_0.4901791755236773">,</span><span id="noHighlight_0.673471059281298"> die </span><span id="ouHighlight__24_36TO24_33">Funktionen</span><span id="noHighlight_0.05530713144654276"> </span><span id="ouHighlight__38_40TO35_37">für</span><span id="noHighlight_0.9835250022129454"> </span><span id="ouHighlight__42_44TO39_41">den</span><span id="noHighlight_0.8362647688984874"> </span><span id="ouHighlight__46_52TO43_49">Firefox</span><span id="noHighlight_0.16290818975200927">-</span><span id="ouHighlight__54_64TO51_60">Marktplatz</span><span id="noHighlight_0.17467473354582008"> </span><span id="ouHighlight__66_69TO62_63">in</span><span id="noHighlight_0.7283392661317538"> </span><span id="ouHighlight__71_74TO65_68">Ihre</span><span id="noHighlight_0.28934042168694807"> </span><span id="ouHighlight__76_79TO70_73">apps</span><span id="noHighlight_0.7771964225910226"> </span><span id="ouHighlight__81_83TO75_77">und</span><span id="noHighlight_0.15598200624125558"> </span><span id="ouHighlight__85_93TO79_87">Webseiten</span><span id="noHighlight_0.9428617086357428"> zu </span><span id="ouHighlight__17_22TO92_99">codieren</span><span id="noHighlight_0.6930504245813579">.</span><span id="ouHighlight__96_106TO102_110"> Machen </span><span id="noHighlight_0.6067672822530392"> </span><span id="ouHighlight__108_110TO148_153">nutzen </span><span id="ouHighlight__96_106TO102_110">Sie</span><span id="ouHighlight__108_110TO148_153"> </span><span id="noHighlight_0.6067672822530392">die </span><span id="ouHighlight__115_125TO116_125">Marktplatz</span><span id="noHighlight_0.0020127593669712063"> </span><span id="ouHighlight__127_133TO127_132">Zusatz</span><span id="noHighlight_0.6395639642900024"> </span><span id="ouHighlight__135_143TO134_145">Bibliothek</span><span id="noHighlight_0.9419823856833636">,</span><span id="noHighlight_0.3547381167981054"> </span><span id="ouHighlight__146_148TO155_157">Web</span><span id="noHighlight_0.047700294577457836">-</span><span id="ouHighlight__150_153TO159_162">APIs</span><span id="noHighlight_0.31222606703291556"> </span><span id="ouHighlight__155_157TO164_166">und</span><span id="noHighlight_0.8625591724427182"> </span><span id="ouHighlight__159_169TO168_172">Markt</span><span id="noHighlight_0.42630441115737283">-</span><span id="ouHighlight__171_174TO174_177">APIs</span><span id="noHighlight_0.8145332950831733">.</span><span id="noHighlight_0.051495320110055975"> </span><span id="ouHighlight__177_180TO180_184">Diese</span><span id="noHighlight_0.6669405185267256"> </span><span id="ouHighlight__182_185TO186_190">Seite</span><span id="noHighlight_0.36569511282483125"> </span><span id="ouHighlight__187_196TO192_196">führt</span><span id="noHighlight_0.6200962966966449"> </span><span id="ouHighlight__198_202TO198_202">diese</span><span id="noHighlight_0.5981084780086247"> </span><span id="ouHighlight__204_210TO204_211">Optionen</span><span id="noHighlight_0.5627602761770325">,</span><span id="noHighlight_0.5304405870176222"> </span><span id="ouHighlight__223_226TO214_217">wenn</span><span id="noHighlight_0.3798460827020126"> </span><span id="ouHighlight__228_230TO219_221">Sie</span><span id="noHighlight_0.7842822708201288"> </span><span id="ouHighlight__232_236TO223_236">möglicherweise </span><span id="ouHighlight__258_262TO252_256">Links</span><span id="noHighlight_0.058619100517732114"> </span><span id="ouHighlight__238_245TO238_246">einsetzen</span><span id="noHighlight_0.42158992457465383"> </span><span id="ouHighlight__247_249TO248_250">und</span><span id="noHighlight_0.28583505285210653"> </span><span id="noHighlight_0.7471647008262842"> </span><span id="ouHighlight__264_265TO258_259">zu</span><span id="noHighlight_0.967138459848076"> </span><span id="ouHighlight__267_273TO261_268">weiteren</span><span id="noHighlight_0.27699114268729963"> </span><span id="ouHighlight__275_287TO270_282">Dokumentation</span><span id="noHighlight_0.8550786396783262"> </span><span id="ouHighlight__213_221TO291_300">beschreiben</span><span id="noHighlight_0.015802827980302747">.</span></div>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<p> </p>
diff --git a/files/de/archive/mozilla/marketplace/marktplatz_apis/index.html b/files/de/archive/mozilla/marketplace/marktplatz_apis/index.html
new file mode 100644
index 0000000000..41c61d5451
--- /dev/null
+++ b/files/de/archive/mozilla/marketplace/marktplatz_apis/index.html
@@ -0,0 +1,109 @@
+---
+title: Firefox Marktplatz APIs
+slug: Archive/Mozilla/Marketplace/Marktplatz_APIs
+translation_of: Archive/Mozilla/Marketplace/Marketplace_APIs
+---
+<div class="summary">
+ <div class="summary">
+  <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+   <div>
+    <span class="highlight" id="ouHighlight__0_4TO0_4">Links</span><span id="noHighlight_0.6061911304145479"> </span><span id="ouHighlight__6_7TO6_7">zu</span><span id="noHighlight_0.23600993000602166"> </span><span id="ouHighlight__9_11TO9_11">den</span><span id="noHighlight_0.7546094547411804"> </span><span id="ouHighlight__13_16TO13_23">wichtigsten</span><span id="noHighlight_0.6763998285431145"> </span><span id="ouHighlight__18_27TO25_34">Referenzen</span><span id="noHighlight_0.20016347568226367"> </span><span id="ouHighlight__29_36TO36_38">für</span><span id="noHighlight_0.4038636246077498"> </span><span id="ouHighlight__38_46TO40_47">Mozillas</span><span id="noHighlight_0.33855126749915554"> </span><span id="ouHighlight__48_54TO49_55">Firefox</span><span id="noHighlight_0.44325717641499374"> </span><span id="ouHighlight__56_66TO57_66">Marktplatz</span><span id="noHighlight_0.6689270501593386"> </span><span id="ouHighlight__68_71TO68_71">APIs</span><span id="noHighlight_0.635853537018279">,</span><span id="noHighlight_0.49264533851507175"> </span><span id="ouHighlight__74_77TO74_76">mit</span><span id="noHighlight_0.3919902841187667"> </span><span id="ouHighlight__79_83TO78_82">denen</span><span id="noHighlight_0.676992582007752"> </span><span id="ouHighlight__85_87TO84_86">Sie</span><span id="noHighlight_0.7296187712152811">, </span><span id="ouHighlight__100_102TO89_91">App</span><span id="noHighlight_0.19191860157987461">-</span><span id="ouHighlight__104_114TO93_105">Einreichungen</span><span id="noHighlight_0.9503774793909335"> behandeln können</span><span id="noHighlight_0.5620478633538235"> und</span><span id="noHighlight_0.35141654395361044"> Sie </span><span id="ouHighlight__127_127TO143_145">ein</span><span id="noHighlight_0.4204817871075437"> </span><span id="ouHighlight__129_143TO147_162">Abrechnungskonto</span><span id="noHighlight_0.4344837710437581"> </span><span id="ouHighlight__145_147TO164_166">für</span><span id="noHighlight_0.3566052526339053"> </span><span id="ouHighlight__149_150TO168_171">eine</span><span id="noHighlight_0.43851880560265577"> </span><span id="ouHighlight__152_154TO173_175">App </span><span id="noHighlight_0.48681488687558605"><span id="ouHighlight__117_125TO125_137">konfigurieren können</span> </span><span id="ouHighlight__157_159TO177_179">und</span><span id="noHighlight_0.3219143468193957"> vieles </span><span id="ouHighlight__161_164TO188_191">mehr</span><span id="noHighlight_0.8305336768063916">.</span></div>
+  </div>
+ </div>
+</div>
+<div class="row topicpage-table">
+ <div class="section">
+  <dl>
+   <dt>
+    <a href="/en-US/docs/Web/Apps/Publishing/Marketplace_utility_library">Marktplatz unitity <span class="highlight" id="ouHighlight__20_26TO19_28">Bibliothek</span></a></dt>
+   <dd>
+    <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+     <div>
+      <span id="ouHighlight__0_1TO0_4">Damit</span><span id="noHighlight_0.7762086980536949"> </span><span id="ouHighlight__8_10TO6_8">Sie</span><span id="noHighlight_0.5664002361024933"> </span><span id="ouHighlight__17_20TO10_12">mit</span><span id="noHighlight_0.429154601237671"> </span><span id="ouHighlight__22_24TO14_16">dem</span><span id="noHighlight_0.6182270407636031"> </span><span id="ouHighlight__26_32TO18_24">Firefox</span><span id="noHighlight_0.008744155119655539">-</span><span id="ouHighlight__34_44TO26_30">Markt</span><span id="noHighlight_0.7574302307098405"> </span><span id="ouHighlight__12_15TO32_39">arbeiten</span><span id="noHighlight_0.5533006742231562"> </span><span id="ouHighlight__3_6TO41_46">können</span><span id="noHighlight_0.4950657957539629">,</span><span id="noHighlight_0.3372120617796437"> </span><span id="ouHighlight__50_56TO49_54">bieten</span><span id="noHighlight_0.44211992673609957"> </span><span id="ouHighlight__47_48TO56_58">wir</span><span id="ouHighlight__115_120TO93_103"> zu erleichterung</span><span id="noHighlight_0.09155990502130762"> </span><span id="ouHighlight__58_58TO60_63">eine</span><span id="noHighlight_0.2447784974239685"> </span><span id="ouHighlight__60_69TO65_74">JavaScript</span><span id="noHighlight_0.19110864322972176">-</span><span id="ouHighlight__71_77TO76_85">Bibliothek</span><span id="noHighlight_0.7134498349474518"> an um eine ihnen </span><span id="noHighlight_0.7406434351915837"> </span><span id="ouHighlight__99_102TO118_128">Anwendungen einfach</span><span id="noHighlight_0.3267500320424487"> </span><span id="ouHighlight__125_130TO140_148">handhaben </span><span id="noHighlight_0.9846020830196359"> </span><span id="ouHighlight__132_137TO150_155">in-app</span><span id="noHighlight_0.002481082544482538">-</span><span id="ouHighlight__139_146TO157_165">Zahlungen</span><span id="noHighlight_0.4634763933506747"> </span><span id="ouHighlight__148_150TO167_169">und</span><span id="noHighlight_0.07040860484935862"> </span><span id="ouHighlight__159_174TO171_186">Zahlungseingänge</span><span id="noHighlight_0.9580017260746942"> </span><span id="ouHighlight__152_157TO191_200">überprüfen zu können</span><span id="noHighlight_0.3791498328522227">.</span></div>
+    </div>
+   </dd>
+   <dt>
+    <a href="http://firefox-marketplace-api.readthedocs.org/en/latest/topics/submission.html" title="http://firefox-marketplace-api.readthedocs.org/en/latest/topics/submission.html">Überprüfungs API</a></dt>
+   <dd>
+    <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+     <div>
+      <span class="highlight" id="ouHighlight__0_2TO0_2">Mit der</span><span id="noHighlight_0.4201166469996619"> </span><span id="ouHighlight__15_17TO12_14">API-</span><span id="ouHighlight__4_13TO4_10">Vorlage</span><span id="noHighlight_0.1975489927027082"> </span><span id="ouHighlight__19_22TO16_21">können</span><span id="noHighlight_0.6633607940773647"> </span><span id="ouHighlight__24_26TO23_25">Sie</span><span id="noHighlight_0.6911799731159312"> </span><span id="ouHighlight__37_40TO27_30">Ihre</span><span id="noHighlight_0.343202944661377"> </span><span id="ouHighlight__42_44TO32_34">app</span><span id="noHighlight_0.5543564148820272"> </span><span id="ouHighlight__28_35TO39_48">überprüfen</span><span id="noHighlight_0.24197976332956528">,</span><span id="noHighlight_0.24589501394800284"> </span><span id="ouHighlight__47_52TO51_63">aktualisieren</span><span id="noHighlight_0.00622104541507662"> </span><span id="ouHighlight__54_57TO65_68">Ihre</span><span id="noHighlight_0.3937366892723856"> </span><span id="ouHighlight__59_61TO70_72">app</span><span id="noHighlight_0.5495599751239539"> </span><span id="ouHighlight__64_66TO74_76">und</span><span id="noHighlight_0.2643930901574659"> </span><span id="ouHighlight__68_72TO78_82">holen</span><span id="noHighlight_0.8526517947168686"> </span><span id="ouHighlight__74_84TO84_96">Informationen</span><span id="noHighlight_0.6300408148838118"> </span><span id="ouHighlight__86_90TO98_101">über</span><span id="noHighlight_0.5871519567596253"> </span><span id="ouHighlight__92_94TO103_105">die</span><span id="noHighlight_0.5982540094729301"> </span><span id="ouHighlight__96_99TO107_110">apps</span><span id="noHighlight_0.7653973146053984"> </span><span id="ouHighlight__101_109TO112_120">verfügbar</span><span id="noHighlight_0.2835796653147047"> </span><span id="ouHighlight__117_125TO122_132">installiert</span><span id="noHighlight_0.9945427232816358"> </span><span id="ouHighlight__114_115TO134_139">werden</span><span id="noHighlight_0.197050726713643">.</span></div>
+    </div>
+   </dd>
+   <dt>
+    <a href="http://firefox-marketplace-api.readthedocs.org/en/latest/topics/payment.html" title="http://firefox-marketplace-api.readthedocs.org/en/latest/topics/payment.html">Zahlungs API</a></dt>
+   <dd>
+    <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+     <div>
+      <span class="highlight" id="ouHighlight__0_2TO0_2">Mit </span><span id="noHighlight_0.4223142435717314"> </span><span id="ouHighlight__12_14TO12_14">API-</span><span id="ouHighlight__4_10TO4_10">Zahlung</span><span id="noHighlight_0.27594378334530334"> </span><span id="ouHighlight__16_19TO16_21">können</span><span id="noHighlight_0.6638130185856066"> </span><span id="ouHighlight__21_23TO23_25">Sie</span><span id="noHighlight_0.5129649967897267"> </span><span id="noHighlight_0.01763111829191466"> </span><span id="ouHighlight__44_54TO37_49">Informationen</span><span id="noHighlight_0.9679672767044096"> </span><span id="ouHighlight__56_60TO51_52">zu</span><span id="noHighlight_0.33100446439210474"> </span><span id="ouHighlight__62_67TO54_59">in-app</span><span id="noHighlight_0.3108348720827504"> </span><span id="ouHighlight__69_77TO61_68">Einkäufe</span><span id="noHighlight_0.4658904268161276"> </span><span id="ouHighlight__25_26TO70_75">machen</span><span id="noHighlight_0.44599349662789733"> </span><span id="ouHighlight__79_81TO77_79">und</span><span id="noHighlight_0.885544762510215"> </span><span id="ouHighlight__83_85TO81_88">erhalten</span><span id="noHighlight_0.3837870996558409"> </span><span id="ouHighlight__87_97TO90_102">Informationen</span><span id="noHighlight_0.39566944401772486"> </span><span id="ouHighlight__99_103TO104_107">über</span><span id="noHighlight_0.18975376628565088"> die </span><span id="ouHighlight__105_111TO113_127">Preisgestaltung</span><span id="noHighlight_0.6025374022931953"> </span><span id="ouHighlight__113_117TO129_134">Stufen</span><span id="noHighlight_0.2678849581525088"> </span><span id="ouHighlight__119_121TO136_138">für</span><span id="noHighlight_0.7893695804126921"> </span><span id="ouHighlight__123_129TO140_151">verschiedene</span><span id="noHighlight_0.8798667246886877"> </span><span id="ouHighlight__131_139TO153_158">Länder</span><span id="noHighlight_0.028057211485865596">.</span></div>
+    </div>
+   </dd>
+   <dt>
+    <a href="http://firefox-marketplace-api.readthedocs.org/en/latest/topics/overview.html" title="http://firefox-marketplace-api.readthedocs.org/en/latest/topics/overview.html">Andere Marktplatz APIs</a></dt>
+   <dd>
+    <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+     <div>
+      <span id="ouHighlight__0_2TO0_2">Die</span><span id="noHighlight_0.5037117043799489"> </span><span id="ouHighlight__4_7TO4_15">vollständige</span><span id="noHighlight_0.5126204959720749"> </span><span id="ouHighlight__9_21TO17_29">Dokumentation</span><span id="noHighlight_0.4744378043040487"> </span><span id="ouHighlight__23_25TO31_33">für</span><span id="noHighlight_0.6271049524956505"> </span><span id="ouHighlight__27_29TO35_37">die</span><span id="noHighlight_0.6226643017903231"> </span><span id="ouHighlight__31_37TO39_45">Firefox</span><span id="noHighlight_0.02485826833486693">-</span><span id="ouHighlight__39_49TO47_56">Marktplatz</span><span id="noHighlight_0.815518520503297">-</span><span id="ouHighlight__51_54TO58_61">APIs</span><span id="noHighlight_0.812943240153569">.</span></div>
+    </div>
+   </dd>
+  </dl>
+ </div>
+ <div class="section">
+  <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+   <div>
+    <strong><span id="ouHighlight__0_4TO0_4">Tools</span><span id="noHighlight_0.19062945056652736"> </span><span id="ouHighlight__6_8TO6_8">für</span><span id="noHighlight_0.1039377003568307"> </span><span id="ouHighlight__10_12TO10_12">app</span><span id="noHighlight_0.9052402208684265">-</span><span id="ouHighlight__14_23TO14_23">Entwickler</span></strong></div>
+  </div>
+  <ul>
+   <li><a class="external external-icon" href="https://marketplace.firefox.com/developers/">Besuchen Sie die Firefox Marktplace Entwicklercke</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Using_Firefox_OS_Simulator">Firefox OS Simulator</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Apps/App_developer_tools">App Entwickler tools</a></li>
+  </ul>
+  <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+   <div>
+    <strong><span id="ouHighlight__0_9TO0_10">Technologie</span><span id="noHighlight_0.5007130375631282">-</span><span id="ouHighlight__11_33TO12_32">Referenzdokumentation</span></strong></div>
+  </div>
+  <div class="twocolumns">
+   <ul>
+    <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a></li>
+    <li><a href="https://developer.mozilla.org/en-US/docs/DOM">DOM</a></li>
+    <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML">HTML</a></li>
+    <li><a href="https://developer.mozilla.org/en-US/docs/JavaScript">JavaScript</a></li>
+    <li><a href="https://developer.mozilla.org/en-US/docs/WebAPI">WebAPI</a></li>
+    <li><a href="https://developer.mozilla.org/en-US/docs/Web/WebGL">WebGL</a></li>
+    <li><a href="https://developer.mozilla.org/en-US/docs/SVG">SVG</a></li>
+    <li><a class="external external-icon" href="https://www.mozilla.org/en-US/apps/">Open Web Apps overview site</a></li>
+    <li><a class="external external-icon" href="https://wiki.mozilla.org/Apps">Apps Projekt wiki page</a></li>
+   </ul>
+  </div>
+  <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+   <div>
+    <strong><span id="ouHighlight__0_11TO0_4">Hilfe</span><span id="noHighlight_0.4549211852685946"> </span><span class="highlight" id="ouHighlight__13_16TO6_8">von</span><span id="noHighlight_0.1996361921250519"> </span><span id="ouHighlight__18_20TO10_12">der</span><span id="noHighlight_0.006766254269174765"> </span><span id="ouHighlight__22_30TO14_25">Gemeinschaft</span></strong></div>
+  </div>
+  <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+   <div>
+    <span id="ouHighlight__0_1TO0_3">Wenn</span><span id="noHighlight_0.014341863217350204"> </span><span id="ouHighlight__3_5TO5_7">Sie</span><span id="noHighlight_0.7705560383773145"> </span><span id="ouHighlight__7_11TO9_12">noch</span><span id="noHighlight_0.663267210708874"> nicht </span><span id="ouHighlight__20_23TO20_25">sicher</span><span id="noHighlight_0.12999408598722229"> sind was zu</span><span id="noHighlight_0.6970422690542117"> </span><span id="ouHighlight__32_33TO39_41">tun ist</span><span id="noHighlight_0.21504970851511362">, </span><span id="ouHighlight__35_38TO44_46">was</span><span id="noHighlight_0.10981157081308113"> </span><span id="ouHighlight__40_45TO48_50">Sie</span><span id="noHighlight_0.5849074450491327"> </span><span id="ouHighlight__61_64TO52_60">erledigen</span><span id="noHighlight_0.8255595638015908"> </span><span id="ouHighlight__54_55TO62_67">wollen</span><span id="noHighlight_0.9993066468046264">,</span><span id="noHighlight_0.053809035748189404"> </span><span id="ouHighlight__67_75TO70_75">zögern</span><span id="noHighlight_0.5609314500952005"> Sie nicht </span><span id="ouHighlight__77_78TO87_88">zu</span><span id="noHighlight_0.18618861856638436"> </span><span id="ouHighlight__85_87TO90_92">der</span><span id="noHighlight_0.6219038919540205"> </span><span id="ouHighlight__89_100TO94_105">Unterhaltung</span><span id="noHighlight_0.478329571887941">!</span></div>
+   <div>
+     </div>
+  </div>
+  <ul>
+   <li>Konsultieren der Web-apps forum:
+    <ul>
+     <li><a class="external external-icon" href="https://lists.mozilla.org/listinfo/dev-webapps">als Mailing-Liste</a></li>
+     <li><a class="external external-icon" href="http://groups.google.com/group/mozilla.dev.webapps">als Google Group</a></li>
+     <li><a class="external external-icon" href="http://groups.google.com/group/mozilla.dev.webapps/feeds">als Web-Feed</a></li>
+    </ul>
+    <ul>
+     <li>
+      <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+       <div>
+        <span id="ouHighlight__0_2TO0_10">Stellen Sie</span><span id="noHighlight_0.5026097136180658"> </span><span id="ouHighlight__4_7TO12_15">Ihre</span><span id="noHighlight_0.2229105310496191"> </span><span id="ouHighlight__9_16TO17_21">Frage</span><span id="noHighlight_0.4102630351905905"> </span><span id="ouHighlight__18_19TO23_25">auf</span><span id="noHighlight_0.7152726615063038"> </span><span id="ouHighlight__21_23TO27_29">dem</span><span id="noHighlight_0.27882006322601716"> </span><span id="ouHighlight__25_28TO31_37">offenen</span><span id="noHighlight_0.9003474208036477"> </span><span id="ouHighlight__30_32TO39_41">Web</span><span id="noHighlight_0.170097064832595">-</span><span id="ouHighlight__34_37TO43_46">Apps</span><span id="noHighlight_0.06178610590984235">-</span><span id="ouHighlight__39_41TO48_50">IRC</span><span id="noHighlight_0.6567146071905723">-</span><span id="ouHighlight__43_49TO52_58">Channel</span><span id="noHighlight_0.2198462045499433">:</span></div>
+      </div>
+       <a class="link-irc" href="irc://irc.mozilla.org/openwebapps">#openwebapps</a></li>
+    </ul>
+   </li>
+  </ul>
+  <p><span class="alllinks"><a class="external external-icon" href="http://www.catb.org/%7Eesr/faqs/smart-questions.html" rel="external">Vergessen Sie nicht über die <em>netiquette</em>...</a></span></p>
+  <p> </p>
+ </div>
+</div>
+<p> </p>
diff --git a/files/de/archive/mozilla/marketplace/options/open_web_apps_for_android/index.html b/files/de/archive/mozilla/marketplace/options/open_web_apps_for_android/index.html
new file mode 100644
index 0000000000..76a5dc98c8
--- /dev/null
+++ b/files/de/archive/mozilla/marketplace/options/open_web_apps_for_android/index.html
@@ -0,0 +1,142 @@
+---
+title: Open Web Apps for Android
+slug: Archive/Mozilla/Marketplace/Options/Open_web_apps_for_android
+translation_of: Archive/Marketplace/Options/Open_web_apps_for_android
+---
+<div class="summary">
+ <p>Users of Firefox for Android install Marketplace apps as 'normal' Android apps, gaining the benefit of powerful open web features. This ability is enabled by the creation of APKs by the APK Factory. Installed apps are run by the <strong>Web Runtime for Android,</strong> which is included in Firefox for Android. By making your apps accessible to Firefox for Android users, you gain an additional distribution opportunity, expanding the potential audience for your work.</p>
+</div>
+<h2 id="What_is_Open_Web_Apps_for_Android">What is Open Web Apps for Android?</h2>
+<p>Open Web Apps for Android enables free Marketplace apps to be packaged into an APK (Android installation package), which is then installed and run in the same way as any other Android app. The APK package consists of web content (in the case of packaged apps) or a pointer to web content (in the case of hosted apps). This content is then enclosed in a thin Java/Android wrapper, which provides the integration with the Android OS. Once installed on an Android device the app is executed by Web Runtime for Android, a component of Firefox for Android.</p>
+<p>These packages are created by the <a href="https://github.com/mozilla/apk-factory-service">APK Factory Service</a>, which is run as a web service by Marketplace. The APK Factory Service makes use of the <a href="https://github.com/mozilla/apk-factory-library">APK Factory Library</a> to create the actual package and the <a href="https://github.com/mozilla/apk-signer">APK Signer</a> to digitally sign the APK. This service is available to <a href="/en-US/Marketplace/Publishing/Creating_a_store">your own Marketplace</a>, should you choose to create one.</p>
+<p>You don't need any knowledge of Android development, or to take any extra development steps, to use Open Web Apps for Android: you simply select the option for distribution to Firefox Mobile or Firefox Tablet when submitting your apps to the <a href="https://marketplace.firefox.com/">Firefox Marketplace</a>.</p>
+<div class="note">
+ <p><strong>Note</strong>: Open Web Apps for Android provides support for hosted apps in Firefox for Android xx or later, packaged apps are supported in Firefox for Android 29 or later. Only free apps are available for Android from the Firefox Marketplace at this time.</p>
+</div>
+<p>Web Runtime for Android supports 12 APIs to access device capabilities, such as vibration, geolocation and battery status. You can see a <a href="https://wiki.mozilla.org/WebAPI#APIs">complete list of supported APIs here</a>: APIs showing "A" under "Availability" are those APIs available on Android, with green cells indicating that the API is available in full. You can also mouseover individual cells to get tooltips containing more information.</p>
+<p>Web Runtime for Android will continue to add support for other APIs in future releases. Some of the APIs planned are:</p>
+<ul>
+ <li>Alarm API</li>
+ <li>SimplePush API</li>
+ <li>Web Activities</li>
+</ul>
+<div class="note">
+ <p><strong>Note</strong>: Android users may be using devices with higher resolutions, greater pixel densities (DPI) and larger screen sizes than those found on Firefox OS devices. Apps that haven't used responsive design may therefore provide a poor experience, and you may want to design your apps with this in mind. For more information on responsive design see the <a href="/en-US/docs/Apps/Design">Design section of the App Center</a>.</p>
+</div>
+<h2 id="Using_Open_Web_Apps_for_Android_from_Firefox_Marketplace">Using Open Web Apps for Android from Firefox Marketplace</h2>
+<p>This section provides details on how you make use of Open Web Apps for Android from Firefox Marketplace, how they affect the Marketplace experience, and information on app updates.</p>
+<h3 id="Submitting_an_app">Submitting an app</h3>
+<p>When you <a href="/en-US/Marketplace/Submission/Submitting_an_app">submit an app to the Firefox Marketplace</a>, you choose the option of making your app available for Firefox Mobile or Firefox Tablet. Choosing either or both of these options will automatically deliver your app as an APK on Android devices.</p>
+<h3 id="Approving_an_app">Approving an app</h3>
+<p>When your app is reviewed, the reviewer installs your app from the reviewer section in Firefox Marketplace. When they do this from an Android device, the "review" instance of the APK Factory service is invoked to create an APK signed in Android debug mode. This version of the APK is then installed on the app reviewer's device and they complete the review process.</p>
+<p>If the app is approved, the "release" instance of the APK Factory service is invoked to generate and sign the APK with a unique APK Signing Key. The resulting signed APK is then cached for delivery when a user chooses to install the app.</p>
+<h3 id="Installing_an_app">Installing an app</h3>
+<p>When a user selects your app in the Marketplace on their Android device, installation works as follows:</p>
+<ol>
+ <li><a href="https://marketplace.firefox.com/">Firefox Marketplace</a> displays the app's details and <strong>Free</strong> install button as normal.</li>
+ <li>When the user taps <strong>Free</strong>, {{ domxref("Apps.install") }} or {{ domxref("Apps.installPackage") }} is invoked as usual (depending on whether it's a hosted or packaged app) and a call is made to the APK Factory service to request the APK.</li>
+ <li>The APK is downloaded to the Android device and the standard Android app installation process invoked.</li>
+ <li>If the user hasn't enabled the <strong>Security</strong> setting <strong>Unknown sources</strong>, Android will alert the user and give them the option to cancel the installation or open <strong>Settings</strong>.</li>
+ <li>Once <strong>Unknown sources</strong> is enabled, the user is shown an install confirmation dialog. The dialog lists the permissions requested by privileged apps.</li>
+ <li>If the user taps <strong>Install</strong> the app is installed.</li>
+ <li>Once the app has been installed, the user is given the option to <strong>Open</strong> the app and in Firefox Marketplace the <strong>Free</strong> button is replaced with a <strong>Launch</strong> button.</li>
+</ol>
+<p>Subsequently the user will find the application in their Apps screen. In addition, the process to use and remove the app is the same as they'd expect for other Android apps. Firefox for Android provides a list of installed apps under <strong>Apps</strong> on the <strong>Tools</strong> menu as well.</p>
+<h3 id="Keeping_apps_up_to_date">Keeping apps up to date</h3>
+<p>Firefox for Android provides a mechanism installing update apps.</p>
+<p>If your app is hosted, whenever you make a change on its server, users will pick up changes the next time they run your app.</p>
+<p>For all other changes, you need to add a new version to the Firefox Marketplace:</p>
+<ul>
+ <li>For a hosted app, the link to the app's hosting server containing the updated manifest file.</li>
+ <li>For a packaged app a zip file containing the updated app manifest and app content.</li>
+</ul>
+<p>Firefox for Android makes a daily check on the version number in the app’s manifest and if it has changed silently applies the update.</p>
+<h2 id="Using_Open_Web_Apps_for_Android_from_your_own_Marketplace">Using Open Web Apps for Android from your own Marketplace</h2>
+<p>You're able to create <a href="/en-US/Marketplace/Publishing/Creating_a_store">your own Marketplace</a>. Such a Marketplace consists of either a directory of apps in Firefox Marketplace or your own hosted content (app descriptions with the main manifest of hosted apps or the mini manifest with app zip archive in the case of packaged apps).</p>
+<p>Your Marketplace will pass the URL of the manifest to be installed to {{ domxref("Apps.install") }} / {{ domxref("Apps.installPackage") }} that then invokes APK Factory, meaning you don't have to do anything to enable Open Web Apps for Android in your Marketplace. You do however need to ensure that your Marketplace only serves apps that include APIs supported by the Web Runtime for Android.</p>
+<h2 id="How_the_APK_Factory_works">How the APK Factory works</h2>
+<p>This section describes how the APK Factory works.</p>
+<ul>
+ <li>When the APK Factory is invoked, as described above, it determines whether there is a cached copy of the app's APK file. If a cached copy isn't available, APK Factory:
+  <ol>
+   <li>Requests the app's manifest file from the hosting server (the Firefox Marketplace, or wherever else the app is hosted):
+    <ul>
+     <li>The main manifest in the case of hosted apps.</li>
+     <li>The mini manifest in the case of packaged apps.</li>
+    </ul>
+   </li>
+   <li>Detects whether the app is hosted or packaged.</li>
+   <li>If the app is packaged, APK Factory requests the app's zip archive from the Marketplace or other hosting server.</li>
+   <li>Creates the APK by performing some metadata transcoding for elements such as icons and security requirements, after which it:
+    <ul>
+     <li>Wraps the hosting URL in an Android Java container for hosted apps.</li>
+     <li>Wraps the app's content in an Android Java container for packaged apps.</li>
+    </ul>
+   </li>
+   <li>Passes the APK to be signed by the secure <strong><a href="https://github.com/mozilla/apk-signer">APK Signer</a></strong> service:
+    <ul>
+     <li>"Review" APKs are signed in Android debug mode.</li>
+     <li>"Release" APKs are signed with an <strong>APK signing key</strong>.</li>
+    </ul>
+   </li>
+   <li>Caches the signed APK.</li>
+  </ol>
+ </li>
+ <li>Delivers the signed APK file to the device for installation.</li>
+</ul>
+<p>The following diagrams offer an alternative representation of the workflow of the APK Factory:</p>
+<p style="text-align: center;"><img alt="Web Sequence diagram showing the operation of the APK factory" src="https://mdn.mozillademos.org/files/7849/APK%20factory%20operation.png" style="width: 749px; height: 827px;"></p>
+<h2 id="Package_naming_and_APK_signing_keys">Package naming and APK signing keys</h2>
+<p>On installation of an APK the Android device checks the Java package name and signature. It verifies the signature the first time an app is installed (there is no central authority it checks with). Future updates must then have the same package name and signature. If the package name and signature aren't the same the Android device won't update the installation.</p>
+<h3 id="Package_naming">Package naming</h3>
+<p>The package name for an APK consists of the hosting site and a unique serial number, for example:</p>
+<ul>
+ <li>For a hosted app: org.mykzilla.p362b12c70d0556c124908a3c125d3d02:</li>
+ <li>For a packaged app: com.firefox.marketplace.p0604c71abc0d4091829d19be9a50453c</li>
+</ul>
+<h3 id="APK_signing_keys">APK signing keys</h3>
+<p>Each APK needs to be identified by an APK signing key before it can be installed on an Android device. APK signing keys are created and owned by the <strong><a href="https://github.com/mozilla/apk-signer">APK Signer</a></strong> service. These signing keys are sensitive, and stored securely in the APK Signer.</p>
+<p>This service creates a unique key for each app, applying it to the original release and subsequent updates. The reuse of the key on updated app APKs is important, as without a match in the package name and key Android won't install an update over an earlier version of the app. If you create your own Marketplace the APK will retain the same name and keys, so that either version will be able to update the other.</p>
+<div class="note">
+ <p><strong>Note</strong>: Mozilla assumes no responsibility for the credibility of the APK signing keys. That is, the keys provide no information about the authenticity of the app or developer beyond the fact that they have been approved for release in Marketplace, if the app is hosted there. The service is not tied to Google or any other central authority.</p>
+</div>
+<h2 id="FAQ">FAQ</h2>
+<p>Here are answers to some frequently asked questions about APKs for Open Web Apps for Android.</p>
+<h3 id="What_about_re-installation_of_apps_installed_as_bookmarks">What about re-installation of apps installed as bookmarks?</h3>
+<p>When a user updates to Firefox for Android version 29 or later, their bookmark-style apps will continue to work, and Firefox will prompt users to update apps to their Open Web Apps for Android version.</p>
+<h3 id="How_will_in-app_purchases_work">How will in-app purchases work?</h3>
+<p>The APK is given access to the trusted UI, <a href="/en-US/docs/Web/API/Navigator.mozPay">mozPay</a>, and all payment processes for in-app purchases, so in-app payments will function as normal.</p>
+<h3 id="How_do_I_download_a_copy_of_my_app's_APK">How do I download a copy of my app's APK?</h3>
+<p>You can download a copy of your app from the APK Factory service by retrieving a URL in the format:</p>
+<p style="margin-left: 40px;"><code>https://controller.apk.firefox.com/application.apk?manifestUrl=ESCAPED_URL_TO_MANIFEST</code></p>
+<p>where <code>ESCAPED_URL_TO_MANIFEST</code> is an escaped URL to the app's manifest or mini-manifest. That URL causes the APK Factory to return the cached copy of the APK, or create a new one if the app hasn't been submitted to Marketplace.</p>
+<h4 id="Examples">Examples</h4>
+<p>For a hosted app:</p>
+<p><code>&gt; wget https://controller.apk.firefox.com/application.apk?manifestUrl=http%3A%2F%2Fmykzilla.org%2Fapp%2Fmanifest.webapp -O mykzilla.apk</code></p>
+<p>For a packaged app:</p>
+<p><code>&gt; wget https://controller.apk.firefox.com/application.apk?manifestUrl=https%3A%2F%2Fmarketplace.firefox.com%2Fapp%2Fa22e0277-35bc-434d-9371-1568c75fc726%2Fmanifest.webapp -O cuttherope.apk</code><br>
+  </p>
+<h3 id="Can_I_generate_an_APK_manually_from_a_different_URL">Can I generate an APK manually from a different URL?</h3>
+<p>Yes, by providing the URL to any location for your manifest or mini-manifest files. However, be aware that because the APK is generated from a different URL the package name will differ from that created when you submit the app to Firefox Marketplace, so the Firefox Marketplace version will be installed as a separate app.</p>
+<h3 id="If_I_setup_my_own_copy_of_the_APK_Factory_can_I_use_the_APKs_it_generates">If I setup my own copy of the APK Factory can I use the APKs it generates?</h3>
+<p>You can, but be aware that the signing keys will differ from those assigned to the APKs generated by Firefox Marketplace. As a result Android will refuse to install whichever version the user tries to install second. (See <a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Open_web_apps_for_android#If_I_also_have_an_Android_native_version_of_my_app.2C_can_both_be_installed_on_an_Android_device.3F">If I also have an Android native version of my app, can both be installed on an Android device?</a> for more information.)</p>
+<h3 id="Can_I_submit_an_APK_created_by_the_APK_Factory_to_Google_Play_or_other_Android_store">Can I submit an APK created by the APK Factory to Google Play or other Android store?</h3>
+<p>You can submit an APK generated by APK Factory to Google Play or an alternative Android store. However, it's your responsibility to:</p>
+<ul>
+ <li>Confirm that your app complies with the policies of the store you're submitting it to. Approval for distribution in Firefox Marketplace doesn't imply any approval for Google Play or another Android marketplace.</li>
+ <li>When you update your app you'll have to update the APK on any stores you have submitted the APK to; there is no automatic process to deliver updated APKs to Android stores.</li>
+</ul>
+<h3 id="Can_I_use_my_Android_signing_keys_to_sign_the_APK_and_choose_the_package_name">Can I use my Android signing keys to sign the APK and choose the package name?</h3>
+<p>At present you cannot use your own signing keys to sign an APK generated by APK Factory or choose the package name. This is an option being considered. If this is of interest to you, join the discussion on the <a href="https://lists.mozilla.org/listinfo/dev-marketplace">dev-marketplace mailing list</a>, or the <a href="irc://irc.mozilla.org/marketplace">Marketplace IRC channel</a>.</p>
+<h3 id="If_I_also_have_an_Android_native_version_of_my_app_can_both_be_installed_on_an_Android_device">If I also have an Android native version of my app, can both be installed on an Android device?</h3>
+<p>Unless you choose to use the APK package name created by APK Factory for your native Android app, both can be installed on an Android device. If you choose to use the same package name for your native Android app (which you'll sign with your own key) Android will refuse to install whichever version the user tries to install second. This is because the package names are the same but the signing keys are different, so Android considers the apps to be the same, but from different sources. Therefore Android will refuse to update one app with the other, since that would allow one developer to override another's app. The user will end up with the first version installed on their device.</p>
+<div class="warning">
+ <p>Because of the issues it may cause for users, it's highly recommended that you don't reuse the package name the APK Factory assigns to your app for a native Android version of your app.</p>
+</div>
+<h3 id="How_can_I_testdebug_APKs">How can I test/debug APKs?</h3>
+<p>We're working on a toolchain for testing and debugging an app on an Android device. The initial version will include a Node-based command-line tool for generating an APK you can install on the device and debug using Firefox's Remote Developer Tools.</p>
+<h2 id="Also_see">Also see</h2>
+<ul>
+ <li>Hacks blog: <a href="https://hacks.mozilla.org/2014/06/firefox-os-apps-run-on-android/">Firefox OS Apps run on Android</a></li>
+ <li>Hack blog: <a href="https://hacks.mozilla.org/2014/06/testing-your-native-android-app/" rel="bookmark" title="Permanent link to “Testing Your Native Android App”">Testing Your Native Android App</a></li>
+</ul>
diff --git a/files/de/archive/mozilla/marketplace/publishing/index.html b/files/de/archive/mozilla/marketplace/publishing/index.html
new file mode 100644
index 0000000000..d219377947
--- /dev/null
+++ b/files/de/archive/mozilla/marketplace/publishing/index.html
@@ -0,0 +1,6 @@
+---
+title: Publishing
+slug: Archive/Mozilla/Marketplace/Publishing
+translation_of: Archive/Mozilla/Marketplace/Publishing/Introduction
+---
+<p>Marketplace publishing</p>
diff --git a/files/de/archive/mozilla/marketplace/publishing/packaged_apps/index.html b/files/de/archive/mozilla/marketplace/publishing/packaged_apps/index.html
new file mode 100644
index 0000000000..3ba4548eba
--- /dev/null
+++ b/files/de/archive/mozilla/marketplace/publishing/packaged_apps/index.html
@@ -0,0 +1,184 @@
+---
+title: Gepackte Apps
+slug: Archive/Mozilla/Marketplace/Publishing/Packaged_apps
+translation_of: Archive/Mozilla/Marketplace/Options/Packaged_apps
+---
+<p>Eine <strong>gepackte App </strong>ist eine Offene Web App die all ihre Ressourcen (HTML, CSS, JavaScript, app mainfest und so weiter) komprimiert in einer zip Datei hat, anstatt die Dateien auf einem Webserver zu hosten. EIne gepackte App ist einfach einezip Datei, welche die <a href="/de/docs/Apps/Manifest">App Mainfest </a>in dem Hauptverzeichniss trägt. Die App Mainfest muss den Namen <code>manifest.webapp</code> tragen.</p>
+<p>Einer der unterschiede zu einer gehosteten App ist, dass eine gepackte App den <code><a href="/de/docs/Apps/Manifest#launch_path">launch_path</a> </code>in der Mainfest eingetragen haben muss. Dennoch ist es optional den Pfad auch in einer gehosteten App einzutragen.</p>
+<div class="note">
+ <p><strong><span class="short_text" id="result_box" lang="de"><span class="hps">Anmerkung</span></span>:</strong> Der Firefox Marktplatz unterstützt momentan nur gepackte App´s für Firefox OS.</p>
+</div>
+<h2 id="Zweck_einer_gepackten_App">Zweck einer gepackten App</h2>
+<p>Der Zweck einer gepackten App ist, das man einen <span class="short_text" id="result_box" lang="de"><span class="hps">verarbeitbaren</span></span> Weg hat, um Zugriff auf die sensitiven API´s der Geräte zu haben. Die App muss von dem Store (Wie der Firefox Marktplatz), von dem die App´s verteilt werden geprüft werden. Der Store prüft die App, sobald diese für akzeptabel befunden wird, wird die App <span class="short_text" id="result_box" lang="de"><span class="hps">kryptographisch mit einem privatem Schlüssel versehen. Das gebit den Verbrauchern der App mehr Sicherheit, dass die App </span></span>sorgsam auf Sicherheit, Datenschutz und Leistungsfähigkeit geprüft wurde.</p>
+<p> </p>
+<h2 id="Typen_einer_gepackten_App">Typen einer gepackten App</h2>
+<p>Es gibt 3 Typen einer gepackten App:</p>
+<dl>
+ <dt>
+  Privilegierte App</dt>
+ <dd>
+  Eine privilegierte App wurde durch ein spezielles Verfahren von dem Firefox Marktplatz genehmigt. Dadurch soll mehr Sicherheit für den Benutzer gewährleistet werden, wenn eine App spezielle sensitiven APIs des Gerätes benutzen möchte. Es ist mit nativen Apps auf Plattformen wie iOS oder Android zu vergleichen. Um eine App als privilegierte App zu kennzeichnen muss das <a href="/en-US/docs/Web/Apps/Manifest#type" style="line-height: 1.5;"><code>type</code></a><span style="line-height: 1.5;"> Feld in der der Datei </span><code style="font-size: 14px;">manifest.webapp</code><span style="line-height: 1.5;"> auf </span><code style="font-size: 14px;">privileged</code><span style="line-height: 1.5;"> gesetzt werden.</span></dd>
+ <dd>
+  Eine priviligierte App hat folgende Eigenschaften:
+  <ul>
+   <li>Freigegeben durch einen App Store nach einem Code Review oder einer vergleichbraen Prüfung.</li>
+   <li>Alle resourcen einer App's werden durch den App Store signiert.</li>
+   <li>Zugriff auf spezielle, sensible Web APIs, auf die nicht vertrauenswürdiger Inhalt nicht zugreifen darf.</li>
+   <li>Erzwingt eine sogenannte <a href="/en-US/docs/Security/CSP/Introducing_Content_Security_Policy">Content Security Policy</a> (CSP). Eine privilegierte App benutz folgende CSP:
+    <pre class="brush: js">"default-src *; script-src 'self'; object-src 'none'; style-src 'self' 'unsafe-inline'"</pre>
+   </li>
+   <li>Implementiert weitere Anforderungen an die Sicherheit. Siehe <a href="https://wiki.mozilla.org/Apps/Security">Security</a> für mehr Informationen.</li>
+  </ul>
+ </dd>
+ <dt>
+  Zertifizierte App</dt>
+ <dd>
+  <span id="result_box" lang="de"><span class="hps">Ein zertifiziertes</span> <span class="hps">App ist für</span> <span class="hps">einen kritischen</span> <span class="hps">Systemfunktion</span> <span class="hps">wie die</span> <span class="hps">Standard</span> <span class="hps">Dialer oder</span> <span class="hps">die</span> <span class="hps">Systemeinstellungen</span> <span class="hps">App</span> <span class="hps">auf einem Smartphone</span> <span class="hps">gedacht.</span> <span class="hps">Diese Art von</span> <span class="hps">App</span> könnte <span class="hps">für kritische</span> <span class="hps">Funktionen auf einem</span> <span class="hps">Firefox</span> <span class="hps">OS</span> <span class="hps">Phone</span> <span class="hps">verwendet werden .</span> <span class="hps">Es ist nicht für</span> <span class="hps">Anwendungen von Drittanbietern</span> <span class="hps">vorgesehen</span><span>,</span> <span class="hps">so dass die meisten</span> <span class="hps">App</span><span class="hps"> nich mit anderen Apps funktionieren </span><span>.</span> <span class="hps">Ein zertifiziertes</span> <span class="hps">App ist</span> <span class="hps">eine verpackte</span> <span class="hps">App</span><span>, die ähnlich</span> <span class="hps">einer privilegierten</span> <span class="hps">App ist</span><span>, mit der Ausnahme</span><span>, dass alle</span> <span class="hps">Geräteberechtigungen</span><span class="hps"> implizit sind</span><span>,</span> <span class="hps">das heißt, sie</span> <span class="hps">ist ohne ausdrückliche</span> <span class="hps">Genehmigung durch den Benutzer</span> <span class="hps">aktiviert sind.</span> <span class="hps">Ein zertifiziertes</span> <span class="hps">App</span> <span class="hps">muss</span> <span class="hps">für ein Gerät</span></span><span id="result_box" lang="de"><span class="hps"> genehmigen</span></span><span id="result_box" lang="de"> <span class="hps">vom OEM</span> <span class="hps">oder Träger</span><span>, um diese</span> <span class="hps">implizite</span> <span class="hps">Zustimmung</span> <span class="hps">zu kritischen</span> <span class="hps">APIs</span> <span class="hps">verwenden zu können</span> <span class="hps">.</span> <span class="hps">Um anzugeben</span><span>, dass</span> <span class="hps">dies eine zertifizierter</span> <span class="hps">App ist</span><span>, fügen Sie den</span> <span class="hps">Feldtyp </span></span><a href="/en-US/docs/Web/Apps/Manifest#type"><code>type</code></a><span id="result_box" lang="de"> <span class="hps">auf seine</span> <code>manifest.webapp </code><span>-Datei und</span> <span class="hps">legen Sie es auf</span> <span class="hps">zertifiziert.</span></span></dd>
+ <dd>
+  <span id="result_box" lang="de"><span class="hps">Das folgende ist die</span> <span class="hps">CSP</span> <span class="hps">für eine</span> <span class="hps">zertifizierte</span> <span class="hps">App, die</span> <span class="hps">geringfügig von der</span> <span class="hps">CSP</span> <span class="hps">für eine privilegierte</span> <span class="hps">App abweicht</span><span>:</span></span>
+  <pre class="brush: js">"default-src *; script-src 'self'; object-src 'none'; style-src 'self'"</pre>
+  <span id="result_box" lang="de"><span class="hps">Dies hat den Effekt</span> <span class="hps">von etwas</span> <span class="hps">lockerere</span> <span class="hps">Regeln</span> <span class="hps atn">für die Inline-</span><span>CSP</span> <span class="hps">für privilegierte</span> <span class="hps">Apps</span> <span class="hps">im Vergleich zu</span> <span class="hps">zertifizierten</span> <span class="hps">Apps.</span> <span class="hps">Wenn Sie</span> <span class="hps">mehr von der</span> <span class="hps">Überlegung dahinter</span> <span class="hps">möchten,</span> <span class="hps">finden Sie unter Standard</span> </span><a href="https://wiki.mozilla.org/Apps/Security#Default_CSP_policy">Default CSP policy</a><span id="result_box" lang="de"><span class="hps"> und</span> </span><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=768029">Bug 768029</a>.<span id="result_box" lang="de"> </span></dd>
+ <dt>
+  Plain packaged app</dt>
+ <dd>
+  You can also make a regular app that is simply packaged in a zip file. The Marketplace signs it, but does not perform the special authentication process used for privileged or certified apps. This plain packaged app cannot use certain sensitive Web APIs. It is not subject to the CSPs described for privileged and certified apps. This type of app could be useful if you want all of your app's resources available on the device when the user first uses it, with no downloading. This type of packaged app does not require the <code>type</code> field in its <code>manifest.webapp</code> file, because the default value for <code>type</code> (<code>web</code>) is correct.</dd>
+</dl>
+<h2 id="Using_sensitive_Web_APIs">Using sensitive Web APIs</h2>
+<p>There are Web APIs that could be used maliciously, so access to them must be controlled. For every sensitive API you want your app to access, you must add an entry to the <code>permissions</code> field in the <a href="/en-US/docs/Web/Apps/Manifest">app's manifest</a>.</p>
+<p>Some sensitive APIs can be accessed by normal hosted apps, but other APIs require that you use a packaged app (privileged or certified). See <a href="/en-US/docs/Web/Apps/App_permissions">App permissions</a> for a table that describes the requirements.</p>
+<h2 id="Packaged_apps_and_the_Firefox_Marketplace">Packaged apps and the Firefox Marketplace</h2>
+<p>The Firefox Marketplace handles packaged apps differently from hosted apps. When you submit your packaged app, its zip file is stored on the Marketplace servers, and the Marketplace generates a new manifest called the "mini-manifest" that is based on the app manifest in your packaged app's zip file. When a user installs your app, the mini-manifest is passed to the <code>installPackage()</code> function to install the app. The mini-manifest exists for installation and update purposes and is not used when your app runs.</p>
+<h2 id="Testing_packaged_app_installation">Testing packaged app installation</h2>
+<p>To install a packaged app on a Firefox OS device using the Simulator for testing purposes, see the <a href="/en-US/docs/Tools/Firefox_OS_Simulator#Push_to_device">section on "Push to Device" in the Simulator guide</a>. To test a packaged app without the Simulator, you can install it on a device from a regular web server by following the steps below, in the Self-publishing packaged apps section.</p>
+<h2 id="Self-publishing_packaged_apps">Self-publishing packaged apps</h2>
+<p>You can self-publish a packaged app by hosting it on a server along with a mini-manifest in the same directory that identifies the app and is used in the install process. This section covers how to do this detail.</p>
+<p>Note that you can also host a packaged app locally and test it on a real device. The Web server and the phone must be on the same network, and the server must be able to serve requests from the local network. You just need to include the absolute path to the referenced files, in the same way as the absolute paths are included normally (see below.) Remember to include the port information if you are using a non-standard port, for example <code><a class="LinkyMobile-ext" href="http://10.10.12.1:8080/package.zip" title="Linkification: http://10.10.12.1:8080/package.zip">http://10.10.12.1:8080/package.zip</a></code>.</p>
+<h3 id="Steps">Steps</h3>
+<ol>
+ <li>
+  <p>Zip up your app's contents and give it the name <code>package.zip</code>. This file should contain all the app's resource files, including the manifest.</p>
+  <div class="warning">
+   <p>Caution: You must be also careful to zip the contents you wish to appear in the packaged app, and not the directory they are contained in. If you zip up the parent directory, the manifest will end up in the wrong place, and the packaged app will be invalid.</p>
+  </div>
+ </li>
+ <li>Create a file called <code>package.manifest</code> and give it the contents below. This is a mini-manifest used for packaged app installation purposes. It is not the main manifest of your app that is inside the zip file. See <a href="#Mini-manifest_fields">Mini-manifest fields</a> if you want more detailed information about mini-manifests.
+  <pre class="brush: js">{
+    "name": "My sample app",
+    "package_path" : "<a class="LinkyMobile-ext" href="http://my-server.com/my-app-directory/my-app.zip" title="Linkification: http://my-server.com/my-app-directory/my-app.zip">http://my-server.com/my-app-directory/my-app.zip</a>",
+    "version": "1",
+    "developer": {
+        "name": "Chris Mills",
+        "url": "<a class="LinkyMobile-ext" href="http://my-server.com" title="Linkification: http://my-server.com">http://my-server.com</a>"
+    }
+}</pre>
+ </li>
+ <li>Create a file named <code>index.html</code> with the following contents. This contains sample JavaScript that calls the packaged app (<a href="/en-US/docs/Web/API/Apps.installPackage"><code>installPackage()</code></a>) and callbacks for success and failure notification.
+  <pre class="brush: html">&lt;html&gt;
+  &lt;body&gt;
+    &lt;p&gt;Packaged app installation page&lt;/p&gt;
+    &lt;script&gt;
+      // This URL must be a full url.
+      var manifestUrl = '<a class="LinkyMobile-ext" href="http://my-server.com/my-app-directory/package.manifest" title="Linkification: http://my-server.com/my-app-directory/package.manifest">http://my-server.com/my-app-directory/package.manifest</a>';
+      var req = navigator.mozApps.installPackage(manifestUrl);
+      req.onsuccess = function() {
+        alert(this.result.origin);
+      };
+      req.onerror = function() {
+        alert(this.error.name);
+      };
+    &lt;/script&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+ </li>
+ <li>Copy <code>package.zip</code>, <code>package.manifest</code>, and <code>index.html</code> into your app root directory (<code>my-app-directory</code> in my examples).</li>
+ <li>Using a compatible device (such as a Firefox OS phone), navigate to the location on your server where you put the example files and confirm the prompt to install the app. The script will give an indication of installation success or failure.</li>
+</ol>
+<div class="note">
+ <p><strong>Note:</strong> You can not install <code>privileged</code> or <code>certified</code> apps with installations from hosted packages, as they need to be signed. Use the Simulator to test <code>privileged</code> apps.</p>
+</div>
+<h2 id="Mini-manifest_fields">Mini-manifest fields</h2>
+<p>Here is a more in-depth example of a mini-manifest:</p>
+<pre class="brush: js">{
+  "name": "My app",
+  "package_path": "<a class="LinkyMobile-ext" href="http://thisdomaindoesnotexist.org/myapp.zip" title="Linkification: http://thisdomaindoesnotexist.org/myapp.zip">http://thisdomaindoesnotexist.org/myapp.zip</a>",
+  "version": "1.0",
+  "size": 172496,
+  "release_notes": "First release",
+  "developer": {
+    "name": "Developer Name",
+    "url": "<a class="LinkyMobile-ext" href="http://thisdomaindoesnotexist.org/" title="Linkification: http://thisdomaindoesnotexist.org/">http://thisdomaindoesnotexist.org/</a>"
+  },
+  "locales": {
+    "fr-FR": {
+      "name": "Mon application"
+    },
+    "se-SE": {
+      "name": "Min balla app"
+    }
+  },
+  "icons": {
+    "16": "/icons/16.png",
+    "32": "/icons/32.png",
+    "256": "/icons/256.png"
+  }
+}
+</pre>
+<p>When the Firefox Marketplace generates a mini-manifest for your app, it pulls information from your app's manifest for some of the fields. You can find documentation for these fields at <a href="/en-US/docs/Web/Apps/Manifest">App manifest</a>. The fields unique to the mini-manifest are <code>package_path</code>, <code>release_notes</code>, and <code>size</code>. The <code>name</code>, <code>version</code>, <code>developer</code>, and <code>locales</code> fields in your app manifest must be exactly the same as in your mini-manifest.</p>
+<p>Here is information on the mini-manifest that relates to using it locally for your own testing:</p>
+<dl>
+ <dt>
+  <code>name</code></dt>
+ <dd>
+  (required) The app's name. Maximum length is 128 characters.</dd>
+ <dt>
+  <code>package_path</code></dt>
+ <dd>
+  (required) The URL where the app's zip file can be found. You need to make sure the <code>package_path</code> is absolute to where the ZIP file is located.</dd>
+ <dt>
+  <code>version</code></dt>
+ <dd>
+  The version of the app.</dd>
+ <dt>
+  <code>size</code></dt>
+ <dd>
+  The size of the app's zip file in bytes. This is not necessary for local testing, but provide it to get a progressbar during installation.</dd>
+ <dt>
+  <code>release_notes</code></dt>
+ <dd>
+  Information about this release of the app. On the Marketplace this information comes from a Web page that is part of the submission process.</dd>
+ <dt>
+  <code>developer</code></dt>
+ <dd>
+  Information about the developer, contains the <code>name</code> and <code>url</code> fields. The developer info needs to match between the mini-manifest and the main manifest file in the ZIP.</dd>
+ <dt>
+  <code>locales</code></dt>
+ <dd>
+  Localization information. Keys should be in <code>xx-YY</code> format.</dd>
+ <dt>
+  <code>icons</code></dt>
+ <dd>
+  Icons for use by the app.</dd>
+</dl>
+<div class="note">
+ <p><strong>Note:</strong> Values in <code>package</code> and <code>webapp.manifest</code> need to be the same, otherwise installation will fail. The safest way is to copy <code>manifest.webapp</code> into <code>package.manifest</code> and just add the <code>package_path</code>.</p>
+</div>
+<h2 id="Differences_from_hosted_apps">Differences from hosted apps</h2>
+<p>Packaged apps have the same capabilites as normal website-style Open Web Apps ("hosted" apps), but packaged apps have a few differences:</p>
+<ul>
+ <li>They have no Internet origin. The one-app-per-origin policy that governs hosted apps does not apply to packaged apps.</li>
+ <li>They use a special protocol internal to the zip file: <code>app://&lt;uuid&gt;</code>. Example: When you load the content <code>/index.html</code> in a packaged app, you are actually loading something like the following (the UUID will be different):
+  <pre class="brush: js">app://550e8400-e29b-41d4-a716-446655440000/index.html</pre>
+  <p>The UUID is randomly generated at install time, which means that it is unique per device it is installed on. The <code>app://</code> protocol will be useful in future releases of the Web runtime for some identity, payment and OAuth flows.</p>
+ </li>
+ <li>Their resources are accessed from the zip file, which is stored on the device where the app is installed.</li>
+ <li>For a self-hosted packaged app, you need to include an additional mini-manifest in the same directory as the zipped packaged app, which doesn't need to be called <code>manifest.webapp</code> (you might call it something like <code>package.webapp</code>). See {{ anch("Self-publishing packaged apps") }} above for more details.</li>
+ <li>They are installed with a different <code>mozApps</code> API function, <code>installPackage()</code>, which for a self-hosted packaged app must point to the mini-manifest.</li>
+ <li>They enforce a specific <a href="/en-US/docs/Security/CSP/Introducing_Content_Security_Policy">CSP</a> for all application content (a hosted app could also use a CSP, but it is not required).</li>
+ <li>They can embed remote content in iframes, but that content will not have access to privileged APIs nor will it have the default CSP applied to it.</li>
+ <li>They have an update process for getting new versions of the app to users. Hosted apps do not need this process.</li>
+</ul>
+<p>The packaged app can still do things like access a database on a Web server, like a regular hosted app.</p>
+<h2 id="Updating_packaged_apps">Updating packaged apps</h2>
+<p>For information on updating apps, see <a href="/en-US/docs/Web/Apps/Updating_apps">Updating apps</a>.</p>
+<h2 id="Packaged_app_example">Packaged app example</h2>
+<p><a href="https://github.com/robnyman/Firefox-OS-Boilerplate-App" title="https://github.com/robnyman/Firefox-OS-Boilerplate-App">Firefox OS Boilerplate App</a></p>
diff --git a/files/de/archive/mozilla/marketplace/publishing/publish_options/index.html b/files/de/archive/mozilla/marketplace/publishing/publish_options/index.html
new file mode 100644
index 0000000000..63d97f6016
--- /dev/null
+++ b/files/de/archive/mozilla/marketplace/publishing/publish_options/index.html
@@ -0,0 +1,67 @@
+---
+title: Veröffentlichungsoptionen Ihrer App
+slug: Archive/Mozilla/Marketplace/Publishing/Publish_options
+translation_of: Archive/Mozilla/Marketplace/Options/Self_publishing
+---
+<div class="summary">
+ <p>Once you have finished your app, you need to deploy it and publish it. This involves making it available for users to consume (whether they are going to just navigate to it in a browser and use it like a regular web page, or download it and install it on a device like a Firefox OS phone.), letting people know it is available, and providing supporting information such as usage instructions and help resources. This article looks briefly at the options available to you.</p>
+</div>
+<h2 id="Publishing_on_the_Firefox_Marketplace">Publishing on the Firefox Marketplace</h2>
+<p>The <a href="https://marketplace.firefox.com/" title="/en-US/docs/Web/Apps/Publishing/Submitting_an_app">Firefox Marketplace</a> is our own dedicated app store for distributing free and paid apps. <a href="/de/Marketplace/Submission/Submitting_an_app">Submitting an app to the Firefox Marketplace</a> is a simple process, involving uploading the app itself plus surrounding information, and waiting for it to go through our thorough review process to make sure it is high quality and not malicious. Submitting to the Firefox Marketplace also confers other advantages such as increased publicity, no need to implement special APIs on your own web site, and the possibility of publishing paid apps more easily. You can submit both hosted apps and packaged apps to the Firefox Marketplace.</p>
+<h3 id="Hosted_apps">Hosted apps</h3>
+<p>A hosted app is basically an app hosted on a web server just like a regular web page. If you want to let people install a hosted app straight from the site, you must <a href="//developer.mozilla.org/docs/Apps/Apps_JavaScript_API">implement some JavaScript code</a> on your Web site to manage installing and updating your app into users' browsers, and make sure your app code includes a valid manifest file. Please see our writeups of <a href="/en-US/docs/Web/Apps/Introduction_to_open_web_apps#Manifest" title="/en-US/docs/Web/Apps/Introduction_to_open_web_apps#Manifest">manifest files</a> and <a href="/en-US/docs/Web/Apps/Introduction_to_open_web_apps#Install_API_functionality" title="/en-US/docs/Web/Apps/Introduction_to_open_web_apps#Install_API_functionality">Install API functionality</a> for how simple these steps are to implement.</p>
+<p>Where you host the app is really up to you, but the two options listed below are probably the most common and easiest.</p>
+<h4 id="GitHub">GitHub</h4>
+<p>If the Web app is purely static (HTML/CSS/JavaScript, but no server-side processing), <a href="http://pages.github.com" rel="external">GitHub Pages</a> is a solid hosting option. It will serve your manifest with the <a href="//developer.mozilla.org/docs/Apps/Manifest#Serving_from_GitHub">correct MIME type</a> if you give it a <code>.webapp</code> extension.</p>
+<h4 id="Generic_hosting_solutions">Generic hosting solutions</h4>
+<p>For dynamic websites, use a generic hosting option (like a Web server you may already own or have access to) with the right capabilities or a hosting provider specifically tailored to the needs of your app, like <a href="http://www.heroku.com" rel="external">Heroku</a> or <a href="http://code.google.com/appengine" rel="external">Google App Engine</a>.</p>
+<div class="note">
+ <p><strong>Note</strong>: Installable open web apps have a "single app per origin" security policy; basically, you can't host more than one installable app per origin. This makes testing a bit more tricky, but there are still ways around this, such as creating different sub-domains for apps, testing them using the Firefox OS Simulator, or testing the install functionality on Firefox Aurora/Nightly, which allow installable web apps to install on the desktop. See <a href="/en-US/docs/Web/Apps/FAQs/About_app_manifests">FAQs about apps manifests</a> for more information on origins.</p>
+</div>
+<h3 id="Packaged_apps">Packaged apps</h3>
+<p>A packaged app is an Open Web App that has all of its resources (HTML, CSS, JavaScript, app manifest, and so on) contained in a zip file, instead of having its resources on a Web server. A packaged app is simply a zip file with the <a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Manifest">app manifest</a> in its root directory. The manifest must be named <code>manifest.webapp</code>.</p>
+<p>One difference from a hosted app is that a packaged app must specify a <code><a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Manifest#launch_path">launch_path</a></code> in the manifest, whereas it's an optional manifest field for a hosted app. For more information, check out our <a href="/en-US/docs/Web/Apps/Publishing/Packaged_Apps" title="/en-US/docs/Web/Apps/Publishing/Packaged_Apps">Packaged Apps</a> article.</p>
+<h2 id="Self-publishing_apps">Self-publishing apps</h2>
+<p>You can also choose to self-publish apps. For hosted apps, this just involves putting them up on web hosting, as detailed above.</p>
+<p>You can self-publish a packaged app by hosting it on a server along with a mini-manifest in the same directory that identifies the app and is used in the install process. Let's run through this process:</p>
+<ol>
+ <li>Have your packaged app's zip file available and give it the name <code>package.zip</code>. This file contains all the app's resource files, including the manifest.</li>
+ <li>Create a file called <code>package.manifest</code> and give it the contents below. This is a mini-manifest used for packaged app installation purposes. It is not the main manifest of your app that is inside the zip file.<br>
+  <pre class="brush: js">{
+    "name": "My sample app",
+    "package_path" : "http://my-server.com/my-app-directory/my-app.zip",
+    "version": "1",
+    "developer": {
+        "name": "Chris Mills",
+        "url": "http://my-server.com"
+    }
+}</pre>
+ </li>
+ <li>Create a file named <code>index.html</code> with the following contents. This contains sample JavaScript that calls the packaged app (<a href="/en-US/docs/Web/API/Apps.installPackage"><code>installPackage()</code></a>) and callbacks for success and failure notification.
+  <pre class="brush: html">&lt;html&gt;
+  &lt;body&gt;
+    &lt;p&gt;Packaged app installation page&lt;/p&gt;
+    &lt;script&gt;
+      // This URL must be a full url.
+      var manifestUrl = 'http://my-server.com/my-app-directory/package.manifest';
+      var req = navigator.mozApps.installPackage(manifestUrl);
+      req.onsuccess = function() {
+        alert(this.result.origin);
+      };
+      req.onerror = function() {
+        alert(this.error.name);
+      };
+    &lt;/script&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+ </li>
+ <li>Copy <code>package.zip</code>, <code>package.manifest</code>, and <code>index.html</code> into your app root directory (<code>my-app-directory</code> in my examples).</li>
+ <li>Using a compatible device (such as a Firefox OS phone), navigate to the location on your server where you put the example files and confirm the prompt to install the app. The script will give an indication of installation success or failure.</li>
+</ol>
+<div class="note">
+ <p><strong>Note:</strong> You can't install <code>privileged</code> or <code>certified</code> apps from self-hosted packages, as they need to be signed via the Firefox Marketplace submission process.</p>
+</div>
+<div class="note">
+ <p><strong>Note</strong>: You can even <a href="/en-US/docs/Web/Apps/Creating_a_store" title="/en-US/docs/Web/Apps/Creating_a_store">create your own apps store</a>, which has a number of options available to it.</p>
+</div>
+<p> </p>
diff --git a/files/de/archive/mozilla/marketplace/publishing/submit/index.html b/files/de/archive/mozilla/marketplace/publishing/submit/index.html
new file mode 100644
index 0000000000..a6e3468169
--- /dev/null
+++ b/files/de/archive/mozilla/marketplace/publishing/submit/index.html
@@ -0,0 +1,10 @@
+---
+title: Submit
+slug: Archive/Mozilla/Marketplace/Publishing/Submit
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/Mozilla/Marketplace/Publishing/Submit
+---
+<p>This section describes the process for submitting an app to Firefox Marketplace</p>
+<p>Residual details: <a href="/en-US/Marketplace/Publishing/Submit/Submitting_an_app">https://developer.mozilla.org/en-US/Marketplace/Publishing/Submit/Submitting_an_app</a></p>
diff --git a/files/de/archive/mozilla/marketplace/publishing/updating_apps/index.html b/files/de/archive/mozilla/marketplace/publishing/updating_apps/index.html
new file mode 100644
index 0000000000..5fc08ff26a
--- /dev/null
+++ b/files/de/archive/mozilla/marketplace/publishing/updating_apps/index.html
@@ -0,0 +1,27 @@
+---
+title: Updating apps
+slug: Archive/Mozilla/Marketplace/Publishing/Updating_apps
+translation_of: Archive/Mozilla/Marketplace/Publishing/Updating_apps
+---
+<div class="summary">
+ <p><span class="seoSummary">Dieser Artikel beschreibt den Prozess, mit dem Sie apps aktualisieren können, die bereits, Selbstveröffentlicht oder veröffentlicht auf dem   <a href="https://marketplace.firefox.com/">Firefox Marketplace</a>  wurden.</span></p>
+</div>
+<div class="note">
+ <p><strong>Hinweis: Wenn Sie den Namen Ihrer Anwendung ändern, wenn es Marketplace genehmigt hat, müssen Sie Ihre app zur Genemigung erneut senden.</strong></p>
+</div>
+<h2 id="Gehostete_apps_zu_aktualisieren">Gehostete apps zu aktualisieren</h2>
+<p>An app respects the normal rules for Web caching, and may optionally use advanced mechanisms for improved start-up, like the <a href="/en-US/docs/HTML/Using_the_application_cache">HTML5 AppCache</a>. Given this, there are no special considerations for updating the normal resources that an app uses.</p>
+<p>Open Web Apps are different, however, in the handling of the manifest. Some changes to a manifest may require user approval. Depending on the implementation of the Web runtime, it may be unclear whether an update has occurred.</p>
+<p>As a clean way to deal with this issue, you can provide a <code>version</code> field in the app manifest. You can later check the version by inspecting the return value of the <a href="/en-US/docs/Web/API/Apps.getInstalled"><code>navigator.mozApps.getInstalled()</code></a> function. If the user's installed version is not up-to-date, you can trigger an update using <a href="/en-US/docs/Web/API/Apps.install"><code>navigator.mozApps.install()</code></a>.</p>
+<p>The value of <code>version</code> is not used by the Web runtime, so you can use whatever versioning scheme you want.</p>
+<p>Also note that changes to a manifest that introduce errors or other breakage will be detected if the manifest has been submitted to Firefox Marketplace. Serious errors will cause the app's listing to be disabled. Less serious errors may automatically flag the app for re-review.</p>
+<h2 id="Updating_packaged_apps">Updating packaged apps</h2>
+<p><a href="/en-US/docs/Web/Apps/Packaged_apps">Packaged apps</a> have a different update process than hosted apps. To update a packaged app, you upload a new version of the app's zip file to the Firefox Marketplace. Then the updated app gets reviewed and published to the Marketplace. This triggers an update on the Firefox OS phone. The phone user can also request an update using the Settings app.</p>
+<p>If you want more detail on the packaged app update process, see below.</p>
+<h3 id="More_details_on_packaged_app_update">More details on packaged app update</h3>
+<p>Here are more details on the update process for packaged apps. You might want to know these things if you are implementing an app marketplace.</p>
+<ul>
+ <li>When the updated packaged app is published, the <a href="/en-US/docs/Web/Apps/Packaged_apps#Packaged_apps_and_the_Firefox_OS_Marketplace">mini-manifest</a> is updated to point to the updated zip file (the mini-manifest is not the main app manifest). The <code>ETag</code> header is changed, and this triggers an update on the Firefox OS phone.</li>
+ <li>Firefox OS on the phone polls once per day for changes to an app. To do this, it polls the URL of the mini-manifest, then polls the URL in the <code>package_path</code> field in the mini-manifest. This is done using the <code>checkForUpdate()</code> method on the <a href="/en-US/docs/Web/API/App"><code>App</code> object</a>. When the <code>ETag</code> header changes, it knows the app has been updated. Then it checks if the zip file has changed.</li>
+ <li>Firefox OS checks in a batch for app updates.</li>
+</ul>
diff --git a/files/de/archive/mozilla/marketplace/submission/index.html b/files/de/archive/mozilla/marketplace/submission/index.html
new file mode 100644
index 0000000000..5f1479f109
--- /dev/null
+++ b/files/de/archive/mozilla/marketplace/submission/index.html
@@ -0,0 +1,9 @@
+---
+title: Submission
+slug: Archive/Mozilla/Marketplace/Submission
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/Mozilla/Marketplace/Submission
+---
+<p>Marketplace Vorlage</p>
diff --git a/files/de/archive/mozilla/marketplace/submission/marketplace_review_criteria/index.html b/files/de/archive/mozilla/marketplace/submission/marketplace_review_criteria/index.html
new file mode 100644
index 0000000000..8582aaccbc
--- /dev/null
+++ b/files/de/archive/mozilla/marketplace/submission/marketplace_review_criteria/index.html
@@ -0,0 +1,79 @@
+---
+title: Überprüfungskriterien für Marketplace
+slug: Archive/Mozilla/Marketplace/Submission/Marketplace_review_criteria
+translation_of: Archive/Mozilla/Marketplace/Publishing/Marketplace_review_criteria
+---
+<div class="summary">
+ <p>Dieser Artikel beschreibt die Anforderungen, die eine App erfüllen muss, um über den Firefox Marketplace verteilt zu werden. Diese Anforderungen sind dazu da, ein Gleichgewicht zwischen den Bedürfnissen der Entwickler und der Anwender von Apps aus dem Firefox Marketplace herzustellen. Entwickler möchten faire, einheitliche, nicht übermäßig strenge Anforderungen, auf denen sie verlässlich ihre Arbeit aufbauen können. Andererseits möchten Anwender die Gewissheit, dass Apps sicher sind, auf ihren Geräten funktionieren und tun, was sie zu tun angeben. Die folgenden App-Anforderungen versuchen, auf dem schmalen Grat zwischen diesen Anforderungen zu gehen.</p>
+</div>
+<p>Dies sind Mozillas Erwartungen daran, was eine App-Überprüfung ist und nicht ist:</p>
+<ul>
+ <li>Die Kriterien werden fair, rücksichtsvoll und einheitlich angewendet. Die App-Überprüfung soll keine Sperre sein, sondern ein vertrauenswürdiger Berührpunkt, der Entwicklern Rückmeldung liefert, mit dem sie noch erfolgreicher werden können.</li>
+ <li>Überprüfer sind keine Qualitätssicherung! Während des Überprüfungsprozesses sieht sich ein Überprüfer das App-Manifest an und testet die App einige Minuten lang, wie es ein normaler Anwender auch täte.</li>
+ <li>Wenn eine App bei der Überprüfung durchfällt, erhält der Entwickler eine genaue Erklärung der gefundenen Probleme sowie Schritte zum Nachvollziehen. Falls möglich sollte der Überprüfer dem Entwickler den Lösungsweg zeigen, indem er Links zu hilfreicher Dokumentation oder Empfehlungen für nötige Änderungen anbietet.</li>
+ <li>Überpüfer bewerten nicht, wie eine App <em>aussieht</em>, sondern nur, wie sie <em>funktioniert</em>. Beispielsweise würde eine App mit rotem Text auf orangem Hintergrund nicht abgelehnt, weil sie hässlich ist, aber möglicherweise deshalb, weil er nicht lesbar ist.</li>
+ <li>Wir entscheiden immer im Zweifelsfall für den Entwickler. Wenn sie unsicher sind, ob eine App abgelehnt werden sollte, werden die Überprüfer <em>vorher</em> nachfragen. Apps werden nicht (wissentlich) wegen Problemen mit der Plattform abgelehnt, die der Entwickler nicht beeinflussen kann; wir halten die Freischaltung aber möglicherweise zurück, wenn wir die App nicht zum Laufen kriegen.</li>
+</ul>
+<h2 id="Sicherheit">Sicherheit</h2>
+<p>Die Einzelheiten der Sicherheitsarchitektur für Apps finden Sie hier: <a href="https://wiki.mozilla.org/Apps/Security">https://wiki.mozilla.org/Apps/Security</a></p>
+<ul>
+ <li>Das App-Manifest muss die selbe Herkunft haben, wie die App.</li>
+ <li>Das App-Manifest muss die Kopfzeile <code>Content-Type</code> vom Typ <code>application/x-web-app-manifest+json</code> haben.</li>
+ <li>Apps sollten keine Weiterleitungen oder iframes verwenden, um Inhalte zu laden, die der Entwickler nicht verwenden darf.</li>
+ <li>Angeforderte Berechtigungen müssen im App-Manifest angegeben sein, inklusive einer Beschreibung, wozu eine Berechtigung benötigt wird.</li>
+</ul>
+<h2 id="Datenschutz">Datenschutz</h2>
+<ul>
+ <li>Der Entwickler muss bei der Einreichung auf eine Datenschutzerklärung verweisen, es gibt aber keine Anforderungen für das Format oder den Inhalt dieser Datenschutzerklärung. Sie können gerne unsere <a href="https://github.com/flamsmark/privacy-policy-template">Vorlage für Datenschutzerklärungen</a> verwenden. Sehen Sie sich auch unseren  <a href="/de/Marketplace/Publishing/Privacy_policies">Leitfaden für Datenschutzerklärungen</a> an.</li>
+</ul>
+<h2 id="Inhalt">Inhalt</h2>
+<ul>
+ <li>Jede App, die unsere folgenden Richtlinien für Inhalte verletzt, ist unzulässig. Wenn Sie glauben, einen Grenzfall zu haben, bitten Sie das Überprüferteam um Klarstellung, auch wenn die App noch nicht zur Einreichung bereit ist. Wir möchten Sie auf der richtigen Spur halten, damit Sie keine Zeit in Entwicklung von Inhalten stecken, die abgelehnt werden.</li>
+ <li>Ab Januar 2014 müssen alle Apps eine Einstufung von der International Age Rating Coalition (IARC) erhalten. Um diese Einstufung zu erhalten, leiten wir Sie während des Einreichungsprozesses zu einem kurzen Leitfaden, wo Sie die Einstufung direkt erhalten. Weitere Informationen zu dem Einstufungsprozess finden Sie <a href="/de/Marketplace/Submission/Rating_Your_Content">hier</a>.</li>
+ <li>Screenshots und Beschreibungen, die beim Firefox Marketplace eingereicht werden, müsen die App genau darstellen.</li>
+ <li>Die <a href="/de/docs/Web/Apps/Manifest#locales"><code>locale</code>-Schlüssel</a> im App-Manifest sollten den Lokalisierungen entsprechen, die Ihre App unterstützt. Wenn Sie einen <code>locale</code>-Schlüssel für polnisch angeben, erwarten die Anwender, dass die App in dieser Sprache verfügbar ist.</li>
+</ul>
+<h3 id="Richtlinien_für_Inhalte">Richtlinien für Inhalte</h3>
+<p>Diese Liste beschreibt Typen von Inhalten, die nicht in den Firefox Marketplace passen. Diese Liste ist beispielhaft, nicht abschließend und kann aktualisiert werden. Wenn eine App diese Richtlinien verletzt, darf Mozilla die App umgehend aus dem Firefox Marketplace entfernen.</p>
+<ul>
+ <li>Keine explizit pornografischen Inhalte oder eindeutige Darstellungen von Sexualität oder Gewalt.</li>
+ <li>Keine Inhalte, die jemandens Rechte verletzt, darunter das auf geistiges Eigentum, andere Eigentumsrechte, sowie Datenschutz- oder Persönlichkeitsrechte.</li>
+ <li>Keine Inhalte, die Mozilla oder Anwendern schaden könnten (wie Schadcode, Viren, Spyware oder Malware).</li>
+ <li>Keine Inhalte, die illegal sind oder illegale Aktivitäten fördern.</li>
+ <li>Keine Inhalte, die täuschend, irreführend oder betrügerisch sind, sowie für Phishing oder sonstigen Identitätsdiebstahl genutzt werden.</li>
+ <li>Keine Inhalte, die Glücksspiel fördern.</li>
+ <li>Keine Inhalte, die illegale oder eingeschränkte Produkte oder Dienste bewerben.</li>
+ <li>Keine Inhalte, die Kinder ausnutzen.</li>
+ <li>Keine Inhalte, die einen oder eine Gruppe von Menschen auf Grundlage ihres Alters, Geschlechts, ihrer Rasse, Ethnie, Herkunft, Religion, sexueller Orientierung, Behinderung, ihres Wohnorts oder einer anderen geschützen Kategorie herabsetzt, einschüchtert, zu Gewalt gegen sie aufruft, Vorurteile schürt, oder Volksverhetzung darstellt.</li>
+ <li>Keine Inhalte, die Anwender täuschen, um sie zu einem Kauf zu bewegen.</li>
+</ul>
+<h2 id="Funktionalität">Funktionalität</h2>
+<ul>
+ <li>Der Überprüfer muss in der Lage sein, die von der App bereit gestellten Hauptfunktionalitäten zu verwenden. Schönheitsfehler und kleinere Probleme meldet er an den Entwickler zurück, diese verhindern jedoch nicht die Freigabe der App.</li>
+ <li>Die App darf die Stabilität oder Geschwindigkeit des Geräts gefährden.</li>
+</ul>
+<h2 id="Bedienerfreundlichkeit">Bedienerfreundlichkeit</h2>
+<ul>
+ <li>Der Entwickler muss Anstrengungen unternehmen, das Aussehen der App für die Geräte-Plattform zu optimieren. Ziel ist es, offensichtliche Fehler zu vermeiden, wie z. B.:
+  <ul>
+   <li>Eine App, die offensichtlich eine Desktop-Seite ist, jedoch für Mobilgeräte eingereicht wurde.</li>
+   <li>Eine App die nicht den zur Verfügung stehenden Platz des Geräts einnimmt (z.B. eine 320x480-App, die nur in einer Ecke auf einem Tablet läuft, der Rest des Bildschirms ist leer. Dies ist sicherlich nicht gewollt!)</li>
+  </ul>
+ </li>
+ <li>Die App muss eine eigene Möglichkeit zur Navigation bereitstellen und darf sich nicht auf typische Browser-Komponenten oder eine Zurück-Schaltfläche in der Geräte-Hardware verlassen, weil diese nicht auf jedem Gerät zur Verfügung steht.
+  <ul>
+   <li>Eine App wird beispielsweise abgelehnt, wenn der Überprüfer durch die App navigiert und plötzlich nicht mehr in der Lage ist, die aktuelle Seite zu verlassen, und auf eine andere Seite zu gelangen. Apps müssen jedoch <strong>nicht</strong> eine Schaltflächen-Leiste zur Navigation implementieren, wie es bei nativen Apps üblich ist.</li>
+   <li>In Firefox OS 1.1 und neuer können Sie die <a href="/de/docs/Apps/Manifest#chrome">chrome</a> Eigenschaft zu Ihrem Manifest hinzufügen, um grundlegende Navigationselemente bereit zu stellen.</li>
+  </ul>
+ </li>
+ <li>Navigationselemente wie Schaltflächen oder Links müssen einfach zu klicken oder anzutippen sein.</li>
+</ul>
+<h2 id="Sperrlisten-Richtlinie">Sperrlisten-Richtlinie</h2>
+<p>Wir hoffen, diese Funktion niemals nutzen zu müssen, aber wir behalten uns vor, freigegebene Apps zu entfernen („blocklist“) bei denen wir im Laufe der Zeit feststellen, dass sie eine der Sicherheits-, Datenschutz- oder Inhalts-Richtlinien verletzt sowie Apps, die die System- oder Netzwerkleistung stark einschränken. Entwickler werden informiert, bevor die Sperre in Kraft tritt. Solange wir keine Beweise für das Gegenteil haben, gehen wir davon aus, dass Entwickler anständig sind und sie erhalten Unterstützung des Überprüfer-Teams zur Aufklärung und Behebung des Problems. Konkrete Beispiele, für Situationen, in denen wir uns eine Sperre vorbehalten, beinhalten:</p>
+<ul>
+ <li>Phishing</li>
+ <li>Spamming</li>
+ <li>Ändern des Inhalts von Hundebildern v1.0 zu Brutale Gewalt v1.0 (ohne die Inhaltseinstufung zu ändern, sobald diese Funktion verfügbar ist)</li>
+ <li>Schwerwiegendes Fehlverhalten einer App für einen großen Teil ihrer Nutzer - verringerte Telefon-Leistung, Geräte-Neustarts, Verlust von Benutzerdaten usw. bei denen der Benutzer nicht erkennen kann, dass die App der Grund dafür ist, und wo ein Geräte-Neustart das Problem nicht behebt.</li>
+ <li>Eine App, die zum Angriff auf Netzwerke genutzt wird, wie z.B. ein sogenannter distributed denial of service (DDOS)</li>
+</ul>
diff --git a/files/de/archive/mozilla/marketplace/veröffentlichen/index.html b/files/de/archive/mozilla/marketplace/veröffentlichen/index.html
new file mode 100644
index 0000000000..3c94ca1182
--- /dev/null
+++ b/files/de/archive/mozilla/marketplace/veröffentlichen/index.html
@@ -0,0 +1,106 @@
+---
+title: Veröffentlichen auf dem Firefox Marketplace
+slug: Archive/Mozilla/Marketplace/Veröffentlichen
+translation_of: Archive/Mozilla/Marketplace/Publish
+---
+<div class="summary">
+ <p><span class="seoSummary">Dokumentation für das Veröffentlichen einer app auf dem Firefox Marketplace.</span></p>
+</div>
+<div class="row topicpage-table">
+ <div class="section">
+  <dl>
+   <dt>
+    <a href="/en-US/Marketplace/Submission/Testing_and_troubleshooting">App testen und Problembehandlung </a></dt>
+   <dd>
+    <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+     <div>
+      <span id="ouHighlight__0_0TO0_2">Ein</span><span id="noHighlight_0.45044772129835264"> </span><span id="ouHighlight__2_12TO4_11">leichtes</span><span id="noHighlight_0.06870573591621865"> Handbuch</span><span id="noHighlight_0.9608923435962202"> </span><span id="noHighlight_0.03021886761724346">zur überprüfung </span><span id="ouHighlight__31_33TO35_37">und</span><span id="noHighlight_0.3249826764220697"> </span><span id="ouHighlight__35_49TO39_55">Problembehandlung</span><span id="noHighlight_0.3296802965586597"> ,</span><span id="noHighlight_0.37295361007041017"> </span><span id="ouHighlight__61_66TO71_75">bevor</span><span id="noHighlight_0.7471594981815183"> </span><span id="ouHighlight__68_70TO77_79">Sie</span><span id="noHighlight_0.8231156133413938"> </span><span id="ouHighlight__79_82TO81_84">Ihre</span><span id="noHighlight_0.5718390801559493"> </span><span id="ouHighlight__84_86TO86_88">app</span><span id="noHighlight_0.5057826311443464"> </span><span id="ouHighlight__88_89TO90_92">auf</span><span id="noHighlight_0.5216899290178909"> </span><span id="ouHighlight__91_93TO94_96">den</span><span id="noHighlight_0.1743331542746287"> </span><span id="ouHighlight__95_101TO98_104">Firefox</span><span id="noHighlight_0.8397353083524876">-</span><span id="ouHighlight__103_113TO106_115">Marktplace</span><span id="noHighlight_0.9881895845483488"> </span><span id="ouHighlight__72_77TO117_126">einreichen</span><span id="noHighlight_0.2101186361678019">.</span></div>
+    </div>
+   </dd>
+   <dt>
+    <a href="/en-US/docs/Web/Apps/Publishing/Submitting_an_app">Senden einer app auf dem Firefox Marketplace</a></dt>
+   <dd>
+    <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+     <div>
+      <span id="ouHighlight__0_3TO0_5">Dieser</span><span id="noHighlight_0.049315602308928286"> </span><span id="ouHighlight__5_22TO7_15">Leitfaden</span><span id="noHighlight_0.13288562821936756"> </span><span id="ouHighlight__24_32TO17_21">hilft</span><span id="noHighlight_0.7196870090243647"> </span><span id="ouHighlight__34_36TO23_27">Ihnen</span><span id="noHighlight_0.9844649259639419"> </span><span id="ouHighlight__38_49TO29_39">erfolgreich</span><span id="noHighlight_0.9087007135191141"> </span><span id="ouHighlight__58_61TO41_44">Ihre</span><span id="noHighlight_0.004106781700933149"> </span><span id="ouHighlight__63_65TO46_54">Anwendung</span><span id="noHighlight_0.5069712089113069"> </span><span id="ouHighlight__67_68TO56_58">auf</span><span id="noHighlight_0.20266113066543812"> </span><span id="ouHighlight__70_72TO60_62">den</span><span id="noHighlight_0.044838944710341"> </span><span id="ouHighlight__74_80TO64_70">Firefox</span><span id="noHighlight_0.6794683383949995">-</span><span id="ouHighlight__82_92TO72_81">Marktplace einzureichen.</span></div>
+    </div>
+   </dd>
+   <dt>
+    <a href="/en-US/docs/Web/Apps/Publishing/Marketplace_review_criteria">Marketplace Prüfkriterien </a></dt>
+   <dd>
+    <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+     <div>
+      <span id="ouHighlight__0_1TO0_3">Eine</span><span id="noHighlight_0.8949473061855919"> </span><span id="ouHighlight__3_13TO5_15">Erläuterung</span><span id="noHighlight_0.7009695591015029"> </span><span id="ouHighlight__15_16TO17_19">der</span><span id="noHighlight_0.056749489623745486"> </span><span id="ouHighlight__22_29TO21_29">Kriterien</span><span id="noHighlight_0.5204831645918558"> die </span><span id="ouHighlight__31_32TO36_39">eine</span><span id="noHighlight_0.9240066038312915"> </span><span id="ouHighlight__34_36TO41_43">app</span><span id="noHighlight_0.7805940835938039"> </span><span id="ouHighlight__43_46TO45_52">erfüllen</span><span id="noHighlight_0.4746502529240537"> </span><span id="ouHighlight__38_41TO54_57">muss</span><span id="noHighlight_0.23635325373237936"> </span><span id="ouHighlight__48_58TO60_61">um</span><span id="noHighlight_0.8116333170223896"> </span><span id="ouHighlight__73_74TO63_65">auf</span><span id="noHighlight_0.9815170789534432"> </span><span id="ouHighlight__76_78TO67_69">dem</span><span id="noHighlight_0.3714284360411909"> </span><span id="ouHighlight__80_86TO71_77">Firefox</span><span id="noHighlight_0.392223217913347">-</span><span id="ouHighlight__88_98TO79_88">Marktplatz</span><span id="noHighlight_0.7868872414419361"> </span><span id="ouHighlight__63_71TO90_103">veröffentlicht</span><span id="noHighlight_0.1601171425462926"> </span><span id="ouHighlight__60_61TO105_110">zu werden</span><span id="ouHighlight__99_99TO111_111">;</span><span id="noHighlight_0.10489090303489312"> </span><span id="ouHighlight__104_112TO113_120">Befolgen</span><span id="noHighlight_0.5638333007437442"> Sie </span><span id="ouHighlight__114_116TO126_128">die</span><span id="noHighlight_0.6881794193575487"> </span><span id="ouHighlight__118_127TO130_140">Richtlinien</span><span id="noHighlight_0.2950517324493188"> </span><span id="ouHighlight__138_139TO142_143">wie in</span><span id="noHighlight_0.029050351297086774"> </span><span id="ouHighlight__141_144TO145_150">diesem</span><span id="noHighlight_0.13547195123843048"> </span><span id="ouHighlight__146_152TO152_158">Artikel</span><span id="noHighlight_0.7267153123772694"> </span><span id="ouHighlight__129_136TO160_168">dargelegt</span>.</div>
+    </div>
+   </dd>
+   <dt>
+    <a href="/en-US/docs/Web/Apps/Publishing/Marketplace_screenshot_criteria">Marketplace screenshot Kriterien</a></dt>
+   <dd>
+    <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+     <div>
+      <span class="highlight" id="ouHighlight__0_9TO0_10">Richtlinien</span><span id="noHighlight_0.2566507262795912"> </span><span id="ouHighlight__11_13TO12_14">für</span><span id="noHighlight_0.3385087560384963"> die </span><span id="ouHighlight__15_25TO20_30">Screenshots</span><span id="noHighlight_0.1846417256974643"> </span><span id="ouHighlight__27_28TO32_33">um</span><span id="noHighlight_0.6238014732895862"> </span><span id="ouHighlight__37_40TO35_37">mit</span><span id="noHighlight_0.669898442859373"> </span><span id="ouHighlight__42_45TO39_43">Ihrer</span><span id="noHighlight_0.29921599983696867"> </span><span id="ouHighlight__47_49TO45_47">app</span><span id="noHighlight_0.05497922622140172"> die</span><span id="noHighlight_0.13480129256277096"> </span><span id="ouHighlight__67_72TO56_67">Auswirkungen</span><span id="noHighlight_0.8162910737317012"> </span><span id="ouHighlight__74_76TO69_71">und</span><span id="noHighlight_0.08748842154580871"> die </span><span id="ouHighlight__78_84TO77_84">Qualität</span><span id="noHighlight_0.5767365559423736"> </span><span id="ouHighlight__86_87TO86_88">auf</span><span id="noHighlight_0.7188955877657563"> </span><span id="ouHighlight__89_91TO90_92">dem</span><span id="noHighlight_0.3344682675108629"> </span><span id="ouHighlight__93_103TO94_98">Markt</span><span id="noHighlight_0.43359965874628315"> </span><span id="ouHighlight__54_61TO100_112">zu maximieren</span><span id="noHighlight_0.890433393975844">.</span></div>
+    </div>
+   </dd>
+  </dl>
+ </div>
+ <div class="section">
+  <div class="section">
+   <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+    <div>
+     <strong><span id="ouHighlight__0_4TO0_4">Tools</span><span id="noHighlight_0.19062945056652736"> </span><span id="ouHighlight__6_8TO6_8">für</span><span id="noHighlight_0.1039377003568307"> </span><span id="ouHighlight__10_12TO10_12">app</span><span id="noHighlight_0.9052402208684265">-</span><span id="ouHighlight__14_23TO14_23">Entwickler </span></strong></div>
+   </div>
+   <ul>
+    <li><a class="external-icon external" href="https://marketplace.firefox.com/developers/">Besuchen Sie die Firefox Marktplace Entwicklercke</a></li>
+    <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Using_Firefox_OS_Simulator">Firefox OS Simulator</a></li>
+    <li><a href="https://developer.mozilla.org/en-US/docs/Apps/App_developer_tools">App Entwickler tools</a></li>
+   </ul>
+   <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+    <div>
+     <strong><span id="ouHighlight__0_9TO0_10">Technologie</span><span id="noHighlight_0.5007130375631282">-</span><span id="ouHighlight__11_33TO12_32">Referenzdokumentation</span></strong></div>
+   </div>
+   <div class="twocolumns">
+    <ul>
+     <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a></li>
+     <li><a href="https://developer.mozilla.org/en-US/docs/DOM">DOM</a></li>
+     <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML">HTML</a></li>
+     <li><a href="https://developer.mozilla.org/en-US/docs/JavaScript">JavaScript</a></li>
+     <li><a href="https://developer.mozilla.org/en-US/docs/WebAPI">WebAPI</a></li>
+     <li><a href="https://developer.mozilla.org/en-US/docs/Web/WebGL">WebGL</a></li>
+     <li><a href="https://developer.mozilla.org/en-US/docs/SVG">SVG</a></li>
+     <li><a class="external-icon external" href="https://www.mozilla.org/en-US/apps/">Open Web Apps overview site</a></li>
+     <li><a class="external-icon external" href="https://wiki.mozilla.org/Apps">Apps Projekt wiki page</a></li>
+    </ul>
+   </div>
+   <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+    <div>
+     <strong><span id="ouHighlight__0_11TO0_4">Hilfe</span><span id="noHighlight_0.4549211852685946"> </span><span class="highlight" id="ouHighlight__13_16TO6_8">von</span><span id="noHighlight_0.1996361921250519"> </span><span id="ouHighlight__18_20TO10_12">der</span><span id="noHighlight_0.006766254269174765"> </span><span id="ouHighlight__22_30TO14_25">Gemeinschaft</span></strong></div>
+   </div>
+   <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+    <div>
+     <span id="ouHighlight__0_1TO0_3">Wenn</span><span id="noHighlight_0.014341863217350204"> </span><span id="ouHighlight__3_5TO5_7">Sie</span><span id="noHighlight_0.7705560383773145"> </span><span id="ouHighlight__7_11TO9_12">noch</span><span id="noHighlight_0.663267210708874"> nicht </span><span id="ouHighlight__20_23TO20_25">sicher</span><span id="noHighlight_0.12999408598722229"> sind was zu</span><span id="noHighlight_0.6970422690542117"> </span><span id="ouHighlight__32_33TO39_41">tun ist</span><span id="noHighlight_0.21504970851511362">, </span><span id="ouHighlight__35_38TO44_46">was</span><span id="noHighlight_0.10981157081308113"> </span><span id="ouHighlight__40_45TO48_50">Sie</span><span id="noHighlight_0.5849074450491327"> </span><span id="ouHighlight__61_64TO52_60">erledigen</span><span id="noHighlight_0.8255595638015908"> </span><span id="ouHighlight__54_55TO62_67">wollen</span><span id="noHighlight_0.9993066468046264">,</span><span id="noHighlight_0.053809035748189404"> </span><span id="ouHighlight__67_75TO70_75">zögern</span><span id="noHighlight_0.5609314500952005"> Sie nicht </span><span id="ouHighlight__77_78TO87_88">zu</span><span id="noHighlight_0.18618861856638436"> </span><span id="ouHighlight__85_87TO90_92">der</span><span id="noHighlight_0.6219038919540205"> </span><span id="ouHighlight__89_100TO94_105">Unterhaltung</span><span id="noHighlight_0.478329571887941">!</span></div>
+    <div>
+      </div>
+   </div>
+   <ul>
+    <li>Konsultieren der Web-apps forum:
+     <ul>
+      <li><a class="external-icon external" href="https://lists.mozilla.org/listinfo/dev-webapps">als Mailing-Liste</a></li>
+      <li><a class="external-icon external" href="http://groups.google.com/group/mozilla.dev.webapps">als Google Group</a></li>
+      <li><a class="external-icon external" href="http://groups.google.com/group/mozilla.dev.webapps/feeds">als Web-Feed</a></li>
+     </ul>
+     <ul>
+      <li>
+       <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+        <div>
+         <span id="ouHighlight__0_2TO0_10">Stellen Sie</span><span id="noHighlight_0.5026097136180658"> </span><span id="ouHighlight__4_7TO12_15">Ihre</span><span id="noHighlight_0.2229105310496191"> </span><span id="ouHighlight__9_16TO17_21">Frage</span><span id="noHighlight_0.4102630351905905"> </span><span id="ouHighlight__18_19TO23_25">auf</span><span id="noHighlight_0.7152726615063038"> </span><span id="ouHighlight__21_23TO27_29">dem</span><span id="noHighlight_0.27882006322601716"> </span><span id="ouHighlight__25_28TO31_37">offenen</span><span id="noHighlight_0.9003474208036477"> </span><span id="ouHighlight__30_32TO39_41">Web</span><span id="noHighlight_0.170097064832595">-</span><span id="ouHighlight__34_37TO43_46">Apps</span><span id="noHighlight_0.06178610590984235">-</span><span id="ouHighlight__39_41TO48_50">IRC</span><span id="noHighlight_0.6567146071905723">-</span><span id="ouHighlight__43_49TO52_58">Channel</span><span id="noHighlight_0.2198462045499433">:</span></div>
+       </div>
+        <a class="link-irc" href="irc://irc.mozilla.org/openwebapps">#openwebapps</a></li>
+     </ul>
+    </li>
+   </ul>
+   <p><span class="alllinks"><a class="external-icon external" href="http://www.catb.org/%7Eesr/faqs/smart-questions.html" rel="external">Vergessen Sie nicht über die <em>netiquette</em>...</a></span></p>
+   <p> </p>
+  </div>
+ </div>
+</div>
+<p> </p>
diff --git a/files/de/archive/mozilla/xul/action/index.html b/files/de/archive/mozilla/xul/action/index.html
new file mode 100644
index 0000000000..5492305611
--- /dev/null
+++ b/files/de/archive/mozilla/xul/action/index.html
@@ -0,0 +1,86 @@
+---
+title: action
+slug: Archive/Mozilla/XUL/action
+tags:
+  - XUL Elemente
+  - XUL Referenz
+translation_of: Archive/Mozilla/XUL/action
+---
+<div class="noinclude"><span class="breadcrumbs XULRef_breadcrumbs">
+ « <a href="/de/docs/XUL_Referenz">XUL Referenz Startseite</a>    [
+ <a href="#Beispiele">Beispiele</a> |
+ <a href="#Attribute">Attribute</a> |
+ <a href="#Eigenschaften">Eigenschaften</a> |
+ <a href="#Methoden">Methoden</a> |
+ <a href="#Verwandte_Themen">Verwandte Themen</a> ]
+</span></div>
+<p>Das <code>action</code> Element wird verwendet, um den Inhalt festzulegen, welcher für jedes zutreffende Ergebnis einer Abfrage passt. Dieses Element sollte in den Elementen <code><a href="/de/docs/Mozilla/Tech/XUL/query" title="query">query</a></code> oder <code><a href="/de/docs/Mozilla/Tech/XUL/rule" title="rule">rule</a></code> enthalten sein.</p>
+<p>Für weitere Informationen, siehe <a href="/de/XUL/Vorlagen_Tutorial/Aktionen">Aktionen</a>.</p>
+<h3 id="Beispiele" name="Beispiele">Beispiele</h3>
+<p>(Beispiel benötigt)</p>
+<h3 id="Attribute" name="Attribute">Attribute</h3>
+<table style="border: 1px solid rgb(204, 204, 204); margin: 0 0 10px 10px; padding: 0 10px; background: rgb(238, 238, 238);">
+<tbody>
+<tr>
+<td><p><strong>Geerbt von XUL-Element</strong><br> <small>
+<code id="a-align"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code>,
+<code id="a-allowevents"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/allowevents">allowevents</a></code>,
+<code id="a-allownegativeassertions"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/allownegativeassertions">allownegativeassertions</a></code>,
+<code id="a-class"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/class">class</a></code>,
+<code id="a-coalesceduplicatearcs"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/coalesceduplicatearcs">coalesceduplicatearcs</a></code>,
+<code id="a-collapsed"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/collapsed">collapsed</a></code>,
+<code id="a-container"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/container">container</a></code>,
+<code id="a-containment"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/containment">containment</a></code>,
+<code id="a-context"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/context">context</a></code>,
+<code id="a-contextmenu"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/contextmenu">contextmenu</a></code>,
+<code id="a-datasources"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/datasources">datasources</a></code>,
+<code id="a-dir"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code>,
+<code id="a-empty"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/empty">empty</a></code>,
+<code id="a-equalsize"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/equalsize">equalsize</a></code>,
+<code id="a-flags"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/flags">flags</a></code>,
+<code id="a-flex"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code>,
+<code id="a-height"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/height">height</a></code>,
+<code id="a-hidden"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/hidden">hidden</a></code>,
+<code id="a-id"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code>,
+<code id="a-insertafter"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/insertafter">insertafter</a></code>,
+<code id="a-insertbefore"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/insertbefore">insertbefore</a></code>,
+<code id="a-left"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/left">left</a></code>,
+<code id="a-maxheight"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/maxheight">maxheight</a></code>,
+<code id="a-maxwidth"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/maxwidth">maxwidth</a></code>,
+<code id="a-menu"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/menu">menu</a></code>,
+<code id="a-minheight"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/minheight">minheight</a></code>,
+<code id="a-minwidth"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/minwidth">minwidth</a></code>,
+<code id="a-mousethrough"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/mousethrough">mousethrough</a></code>,
+<code id="a-observes"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/observes">observes</a></code>,
+<code id="a-ordinal"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/ordinal">ordinal</a></code>,
+<code id="a-orient"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code>,
+<code id="a-pack"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code>,
+<code id="a-persist"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/persist">persist</a></code>,
+<code id="a-popup"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/popup">popup</a></code>,
+<code id="a-position"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/position">position</a></code>,
+<code id="a-preference-editable"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/preference-editable">preference-editable</a></code>,
+<code id="a-querytype"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/querytype">querytype</a></code>,
+<code id="a-ref"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/ref">ref</a></code>,
+<code id="a-removeelement"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/removeelement">removeelement</a></code>,
+<code id="a-sortDirection"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/sortDirection">sortDirection</a></code>,
+<code id="a-sortResource"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/sortResource">sortResource</a></code>,
+<code id="a-sortResource2"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/sortResource2">sortResource2</a></code>,
+<code id="a-statustext"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/statustext">statustext</a></code>,
+<code id="a-style"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/style">style</a></code>,
+<code id="a-template"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/template">template</a></code>,
+<code id="a-tooltip"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/tooltip">tooltip</a></code>,
+<code id="a-tooltiptext"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/tooltiptext">tooltiptext</a></code>,
+<code id="a-top"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/top">top</a></code>,
+<code id="a-uri"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/uri">uri</a></code>,
+<code id="a-wait-cursor"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/wait-cursor">wait-cursor</a></code>,
+<code id="a-width"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/width">width</a></code> </small></p>
+</td>
+</tr>
+</tbody>
+</table>
+<h3 id="Eigenschaften" name="Eigenschaften">Eigenschaften</h3>
+<table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Geerbte Eigenschaften</strong><br> <small> <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/align">align</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/allowEvents">allowEvents</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/boxObject">boxObject</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/builder">builder</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/className">className</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/collapsed">collapsed</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/contextMenu">contextMenu</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/controllers">controllers</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/database">database</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/datasources">datasources</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/dir">dir</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/flex">flex</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/height">height</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/hidden">hidden</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/id">id</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/left">left</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/maxHeight">maxHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/maxWidth">maxWidth</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/menu">menu</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/minHeight">minHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/minWidth">minWidth</a></span></code>, , , , , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/observes">observes</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/ordinal">ordinal</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/orient">orient</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/pack">pack</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/persist">persist</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/ref">ref</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/resource">resource</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/statusText">statusText</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/style">style</a></span></code>, ,, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/tooltip">tooltip</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/tooltipText">tooltipText</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/top">top</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/width">width</a></span></code></small></p> </td> </tr> </tbody>
+</table>
+<h3 id="Methoden" name="Methoden">Methoden</h3>
+<table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Geerbte Methoden</strong><br> <small><code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.addEventListener">element.addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.appendChild">node.appendChild()</a></code>, <span id="m-blur"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/click">click</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.cloneNode">node.cloneNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.compareDocumentPosition">node.compareDocumentPosition()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.dispatchEvent">element.dispatchEvent()</a></code>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/focus">focus</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttribute">element.getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNode">element.getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNodeNS">element.getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNS">element.getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getBoundingClientRect">element.getBoundingClientRect()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getClientRects">element.getClientRects()</a></code>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/getElementsByAttribute">getElementsByAttribute</a></code></span>, <span id="m-getElementsByAttributeNS"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/getElementsByAttributeNS">getElementsByAttributeNS</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByClassName">element.getElementsByClassName()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByTagName">element.getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByTagNameNS">element.getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.getFeature">node.getFeature()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.getUserData">node.getUserData()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.hasAttribute">element.hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.hasAttributeNS">element.hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.nodes.hasAttributes">nodes.hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.nodes.hasChildNodes">nodes.hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.insertBefore">node.insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isDefaultNamespace">node.isDefaultNamespace()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isEqualNode">node.isEqualNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isSameNode">node.isSameNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isSupported">node.isSupported()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.lookupNamespaceURI">node.lookupNamespaceURI()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.lookupPrefix">node.lookupPrefix()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.normalize">node.normalize()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.querySelector">element.querySelector()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.querySelectorAll">element.querySelectorAll()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttribute">element.removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttributeNode">element.removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttributeNS">element.removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.removeChild">node.removeChild()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeEventListener">element.removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.replaceChild">node.replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttribute">element.setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNode">element.setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNodeNS">element.setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNS">element.setAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.setUserData">node.setUserData()</a></code></small></p> </td> </tr> </tbody>
+</table>
diff --git a/files/de/archive/mozilla/xul/arrowscrollbox/index.html b/files/de/archive/mozilla/xul/arrowscrollbox/index.html
new file mode 100644
index 0000000000..d1785f82b6
--- /dev/null
+++ b/files/de/archive/mozilla/xul/arrowscrollbox/index.html
@@ -0,0 +1,134 @@
+---
+title: arrowscrollbox
+slug: Archive/Mozilla/XUL/Arrowscrollbox
+tags:
+  - XUL Elemente
+  - XUL Referenz
+translation_of: Archive/Mozilla/XUL/arrowscrollbox
+---
+<div class="noinclude"><span class="breadcrumbs XULRef_breadcrumbs">
+ « <a href="/de/docs/XUL_Referenz">XUL Referenz Startseite</a>    [
+ <a href="#Beispiele">Beispiele</a> |
+ <a href="#Attribute">Attribute</a> |
+ <a href="#Eigenschaften">Eigenschaften</a> |
+ <a href="#Methoden">Methoden</a> |
+ <a href="#Verwandte_Themen">Verwandte Themen</a> ]
+</span></div>
+<p>Eine Box, die entlang den Kanten Scrollpfeile bereitstellt, um die Box zu scrollen. Der Benutzer muss die Maus dazu nur über die Pfeile bewegen. Dieses Element wird typischerweise bei langen Popup-Menüs verwendet.</p>
+<p>Wenn die Maus über einen (aktiven) Pfeil bewegt wird, wird ein Scroll-Event ausgelöst.</p>
+<p>Weitere Informationen sind im <a href="/en/XUL_Tutorial/Menüs_zum_Scrollen">XUL Tutorial</a> verfügbar.</p>
+<dl> <dt>Attribute</dt> <dd><a href="#a-disabled">disabled</a>, <a href="#a-smoothscroll">smoothscroll</a>, <a href="#a-tabindex">tabindex</a></dd>
+</dl>
+<dl> <dt>Eigenschaften</dt> <dd><a href="#p-disabled">disabled</a>, <a href="#p-scrollBoxObject">scrollBoxObject</a>, <a href="#p-scrollIncrement">scrollIncrement</a>, <a href="#p-smoothScroll">smoothScroll</a>, <a href="#p-tabIndex">tabIndex</a></dd>
+</dl>
+<dl> <dt>Methoden</dt> <dd><a href="#m-ensureElementIsVisible">ensureElementIsVisible</a>, <a href="#m-scrollByIndex">scrollByIndex</a>, <a href="#m-scrollByPixels">scrollByPixels</a></dd>
+</dl>
+<h3 id="Examples" name="Examples">Beispiele</h3>
+<div style="float: right;"><img alt="Image:menuscroll1.jpg" class="internal" src="/@api/deki/files/760/=Menuscroll1.jpg"></div>
+<pre>&lt;arrowscrollbox orient="vertical" flex="1"&gt;
+  &lt;button label="Red"/&gt;
+  &lt;button label="Blue"/&gt;
+  &lt;button label="Green"/&gt;
+  &lt;button label="Yellow"/&gt;
+  &lt;button label="Orange"/&gt;
+  &lt;button label="Silver"/&gt;
+  &lt;button label="Lavender"/&gt;
+  &lt;button label="Gold"/&gt;
+  &lt;button label="Turquoise"/&gt;
+  &lt;button label="Peach"/&gt;
+  &lt;button label="Maroon"/&gt;
+  &lt;button label="Black"/&gt;
+&lt;/arrowscrollbox&gt;
+</pre>
+<h3 id="Attributes" name="Attributes">Attribute</h3>
+<table style="border: 1px solid rgb(204, 204, 204); margin: 0 0 10px 10px; padding: 0 10px; background: rgb(238, 238, 238);">
+<tbody>
+<tr>
+<td><p><strong>Geerbt von XUL-Element</strong><br> <small>
+<code id="a-align"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code>,
+<code id="a-allowevents"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/allowevents">allowevents</a></code>,
+<code id="a-allownegativeassertions"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/allownegativeassertions">allownegativeassertions</a></code>,
+<code id="a-class"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/class">class</a></code>,
+<code id="a-coalesceduplicatearcs"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/coalesceduplicatearcs">coalesceduplicatearcs</a></code>,
+<code id="a-collapsed"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/collapsed">collapsed</a></code>,
+<code id="a-container"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/container">container</a></code>,
+<code id="a-containment"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/containment">containment</a></code>,
+<code id="a-context"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/context">context</a></code>,
+<code id="a-contextmenu"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/contextmenu">contextmenu</a></code>,
+<code id="a-datasources"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/datasources">datasources</a></code>,
+<code id="a-dir"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code>,
+<code id="a-empty"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/empty">empty</a></code>,
+<code id="a-equalsize"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/equalsize">equalsize</a></code>,
+<code id="a-flags"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/flags">flags</a></code>,
+<code id="a-flex"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code>,
+<code id="a-height"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/height">height</a></code>,
+<code id="a-hidden"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/hidden">hidden</a></code>,
+<code id="a-id"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code>,
+<code id="a-insertafter"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/insertafter">insertafter</a></code>,
+<code id="a-insertbefore"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/insertbefore">insertbefore</a></code>,
+<code id="a-left"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/left">left</a></code>,
+<code id="a-maxheight"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/maxheight">maxheight</a></code>,
+<code id="a-maxwidth"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/maxwidth">maxwidth</a></code>,
+<code id="a-menu"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/menu">menu</a></code>,
+<code id="a-minheight"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/minheight">minheight</a></code>,
+<code id="a-minwidth"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/minwidth">minwidth</a></code>,
+<code id="a-mousethrough"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/mousethrough">mousethrough</a></code>,
+<code id="a-observes"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/observes">observes</a></code>,
+<code id="a-ordinal"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/ordinal">ordinal</a></code>,
+<code id="a-orient"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code>,
+<code id="a-pack"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code>,
+<code id="a-persist"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/persist">persist</a></code>,
+<code id="a-popup"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/popup">popup</a></code>,
+<code id="a-position"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/position">position</a></code>,
+<code id="a-preference-editable"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/preference-editable">preference-editable</a></code>,
+<code id="a-querytype"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/querytype">querytype</a></code>,
+<code id="a-ref"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/ref">ref</a></code>,
+<code id="a-removeelement"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/removeelement">removeelement</a></code>,
+<code id="a-sortDirection"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/sortDirection">sortDirection</a></code>,
+<code id="a-sortResource"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/sortResource">sortResource</a></code>,
+<code id="a-sortResource2"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/sortResource2">sortResource2</a></code>,
+<code id="a-statustext"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/statustext">statustext</a></code>,
+<code id="a-style"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/style">style</a></code>,
+<code id="a-template"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/template">template</a></code>,
+<code id="a-tooltip"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/tooltip">tooltip</a></code>,
+<code id="a-tooltiptext"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/tooltiptext">tooltiptext</a></code>,
+<code id="a-top"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/top">top</a></code>,
+<code id="a-uri"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/uri">uri</a></code>,
+<code id="a-wait-cursor"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/wait-cursor">wait-cursor</a></code>,
+<code id="a-width"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/width">width</a></code> </small></p>
+</td>
+</tr>
+</tbody>
+</table> <div id="a-disabled">
+
+<dl> <dt><code id="a-disabled"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code></dt> <dd>Typ: <em>boolean</em></dd> <dd>Kennzeichnet, ob ein Element deaktiviert ist oder nicht. Wenn das Element auf  <code>true</code> gesetzt ist, ist das Element deaktiviert. Deaktivierte Elemente sind gewöhnlich mit einem grauen Text dargestellt. Wenn ein Element deaktiviert ist, wird es auf Anwenderaktionen nicht reagieren, es kann den Fokus nicht erlangen und das <code>command</code> Ereignis wird nicht ausgelöst. Das Element wird allerdings noch auf Mausereignisse antworten. Um das Element zu aktivieren, ist es besser das Attribut zu entfernen als es auf den Wert <code>false</code> zu setzen. Um den Wert dieses Attributs mittels JavaScript zu setzen oder abzurufen, sollte besser die <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/disabled">disabled</a></span></code> Eigenschaft verwendet werden.</dd>
+</dl>
+
+
+</div> <div id="a-smoothscroll">
+
+<dl>
+  <dt>
+    <code id="a-smoothscroll"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/smoothscroll">smoothscroll</a></code> </dt>
+  <dd>
+    Type: <em>boolean</em></dd>
+  <dd>
+    <code>true</code> initially enables smooth scrolling for the corresponding <code><a href="/en-US/docs/Mozilla/Tech/XUL/arrowscrollbox" title="arrowscrollbox">arrowscrollbox</a></code>, <code>false</code> disables it. Currently, smooth scrolling supports horizontal arrowscrollboxes only.</dd>
+</dl>
+</div> <div id="a-tabindex">
+
+
+<dl>
+ <dt><code id="a-tabindex"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/tabindex">tabindex</a></code></dt>
+ <dd>Type: <em>integer</em></dd>
+ <dd>The tab order of the element. The tab order is the order in which the focus is moved when the user presses the "<code>tab</code>" key. Elements with a higher <code>tabindex</code> are later in the tab sequence.</dd>
+</dl>
+</div>
+<h3 id="Properties" name="Properties">Eigenschaften</h3>
+<table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Geerbte Eigenschaften</strong><br> <small> <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/align">align</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/allowEvents">allowEvents</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/boxObject">boxObject</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/builder">builder</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/className">className</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/collapsed">collapsed</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/contextMenu">contextMenu</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/controllers">controllers</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/database">database</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/datasources">datasources</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/dir">dir</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/flex">flex</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/height">height</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/hidden">hidden</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/id">id</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/left">left</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/maxHeight">maxHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/maxWidth">maxWidth</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/menu">menu</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/minHeight">minHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/minWidth">minWidth</a></span></code>, , , , , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/observes">observes</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/ordinal">ordinal</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/orient">orient</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/pack">pack</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/persist">persist</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/ref">ref</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/resource">resource</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/statusText">statusText</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/style">style</a></span></code>, ,, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/tooltip">tooltip</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/tooltipText">tooltipText</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/top">top</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/width">width</a></span></code></small></p> </td> </tr> </tbody>
+</table> <div id="p-disabled"></div> <div id="p-scrollBoxObject"></div> <div id="p-scrollIncrement"></div> <div id="p-smoothScroll"></div> <div id="p-tabIndex"></div>
+<h3 id="Methods" name="Methods">Methoden</h3>
+<p>   </p><table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Geerbte Methoden</strong><br> <small><code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.addEventListener">element.addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.appendChild">node.appendChild()</a></code>, <span id="m-blur"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/click">click</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.cloneNode">node.cloneNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.compareDocumentPosition">node.compareDocumentPosition()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.dispatchEvent">element.dispatchEvent()</a></code>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/focus">focus</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttribute">element.getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNode">element.getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNodeNS">element.getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNS">element.getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getBoundingClientRect">element.getBoundingClientRect()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getClientRects">element.getClientRects()</a></code>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/getElementsByAttribute">getElementsByAttribute</a></code></span>, <span id="m-getElementsByAttributeNS"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/getElementsByAttributeNS">getElementsByAttributeNS</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByClassName">element.getElementsByClassName()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByTagName">element.getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByTagNameNS">element.getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.getFeature">node.getFeature()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.getUserData">node.getUserData()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.hasAttribute">element.hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.hasAttributeNS">element.hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.nodes.hasAttributes">nodes.hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.nodes.hasChildNodes">nodes.hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.insertBefore">node.insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isDefaultNamespace">node.isDefaultNamespace()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isEqualNode">node.isEqualNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isSameNode">node.isSameNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isSupported">node.isSupported()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.lookupNamespaceURI">node.lookupNamespaceURI()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.lookupPrefix">node.lookupPrefix()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.normalize">node.normalize()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.querySelector">element.querySelector()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.querySelectorAll">element.querySelectorAll()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttribute">element.removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttributeNode">element.removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttributeNS">element.removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.removeChild">node.removeChild()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeEventListener">element.removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.replaceChild">node.replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttribute">element.setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNode">element.setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNodeNS">element.setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNS">element.setAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.setUserData">node.setUserData()</a></code></small></p> </td> </tr> </tbody>
+</table>
+<h3 id="Related" name="Related">Verwandte Themen</h3>
+<p>TBD</p>
diff --git a/files/de/archive/mozilla/xul/assign/index.html b/files/de/archive/mozilla/xul/assign/index.html
new file mode 100644
index 0000000000..a08496f06a
--- /dev/null
+++ b/files/de/archive/mozilla/xul/assign/index.html
@@ -0,0 +1,115 @@
+---
+title: assign
+slug: Archive/Mozilla/XUL/Assign
+tags:
+  - XUL Elemente
+  - XUL Referenz
+translation_of: Archive/Mozilla/XUL/assign
+---
+<div class="noinclude"><span class="breadcrumbs XULRef_breadcrumbs">
+ « <a href="/de/docs/XUL_Referenz">XUL Referenz Startseite</a>    [
+ <a href="#Beispiele">Beispiele</a> |
+ <a href="#Attribute">Attribute</a> |
+ <a href="#Eigenschaften">Eigenschaften</a> |
+ <a href="#Methoden">Methoden</a> |
+ <a href="#Verwandte_Themen">Verwandte Themen</a> ]
+</span></div>
+<p>Erstellt eine zusätzliche Variable für XML Templates, deren Wert mittels XPath bestimmt werden kann.</p>
+<div class="noinclude">Weitere Informationen sind unter <a href="/de/XUL/Vorlagen_Tutorial/XML_Assignments">XML_Assignments</a> verfügbar.</div>
+<dl> <dt> </dt><dt>Attribute</dt> <p><a href="#a-expr">expr</a>, <a href="#a-var">var</a></p>
+</dl>
+<h3 id="Beispiele">Beispiele</h3>
+<pre>&lt;vbox datasources="people.xml" ref="*" querytype="xml"&gt;
+  &lt;template&gt;
+    &lt;query expr="person"&gt;
+      &lt;assign var="?namelength" expr="string-length(@name)"/&gt;
+      &lt;assign var="?siblings" expr="count(../*) - 1"/&gt;
+    &lt;/query&gt;
+    &lt;action&gt;
+      &lt;hbox uri="?" align="center"&gt;
+        &lt;button label="?name"/&gt;
+        &lt;label value="?gender"/&gt;
+        &lt;label value="?namelength"/&gt;
+        &lt;label value="?siblings"/&gt;
+      &lt;/hbox&gt;
+    &lt;/action&gt;
+  &lt;/template&gt;
+&lt;/vbox&gt;
+</pre>
+<h3 id="Attribute">Attribute</h3>
+<div id="a-expr">
+
+<dl> <dt><code id="a-expr"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/expr">expr</a></code></dt> <dd>Typ: <em>string</em></dd> <dd>Ein XPath Ausdruck für XML Abfragen, der Ergebnisse zurückliefert. Innerhalb des Ausdrucks kann jeder Namespace Präfix verwendet werden, der für ein Element deklariert wurde.</dd>
+</dl>
+
+</div> <div id="a-var">
+
+<dl> <dt><code id="a-var"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/var">var</a></code></dt> <dd>Typ: <em>string</em></dd> <dd>Dient der Variablenzuweisung innerhalb <code><a class="internal" href="/De/XUL/Assign" title="de/XUL/assign">assign</a></code> Tags; ansonsten wird es als Referenz zu einer Template Variable wie beispielsweise "?name" verwendet.</dd>
+</dl>
+
+
+</div> <table style="border: 1px solid rgb(204, 204, 204); margin: 0 0 10px 10px; padding: 0 10px; background: rgb(238, 238, 238);">
+<tbody>
+<tr>
+<td><p><strong>Geerbt von XUL-Element</strong><br> <small>
+<code id="a-align"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code>,
+<code id="a-allowevents"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/allowevents">allowevents</a></code>,
+<code id="a-allownegativeassertions"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/allownegativeassertions">allownegativeassertions</a></code>,
+<code id="a-class"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/class">class</a></code>,
+<code id="a-coalesceduplicatearcs"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/coalesceduplicatearcs">coalesceduplicatearcs</a></code>,
+<code id="a-collapsed"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/collapsed">collapsed</a></code>,
+<code id="a-container"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/container">container</a></code>,
+<code id="a-containment"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/containment">containment</a></code>,
+<code id="a-context"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/context">context</a></code>,
+<code id="a-contextmenu"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/contextmenu">contextmenu</a></code>,
+<code id="a-datasources"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/datasources">datasources</a></code>,
+<code id="a-dir"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code>,
+<code id="a-empty"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/empty">empty</a></code>,
+<code id="a-equalsize"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/equalsize">equalsize</a></code>,
+<code id="a-flags"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/flags">flags</a></code>,
+<code id="a-flex"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code>,
+<code id="a-height"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/height">height</a></code>,
+<code id="a-hidden"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/hidden">hidden</a></code>,
+<code id="a-id"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code>,
+<code id="a-insertafter"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/insertafter">insertafter</a></code>,
+<code id="a-insertbefore"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/insertbefore">insertbefore</a></code>,
+<code id="a-left"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/left">left</a></code>,
+<code id="a-maxheight"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/maxheight">maxheight</a></code>,
+<code id="a-maxwidth"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/maxwidth">maxwidth</a></code>,
+<code id="a-menu"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/menu">menu</a></code>,
+<code id="a-minheight"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/minheight">minheight</a></code>,
+<code id="a-minwidth"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/minwidth">minwidth</a></code>,
+<code id="a-mousethrough"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/mousethrough">mousethrough</a></code>,
+<code id="a-observes"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/observes">observes</a></code>,
+<code id="a-ordinal"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/ordinal">ordinal</a></code>,
+<code id="a-orient"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code>,
+<code id="a-pack"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code>,
+<code id="a-persist"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/persist">persist</a></code>,
+<code id="a-popup"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/popup">popup</a></code>,
+<code id="a-position"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/position">position</a></code>,
+<code id="a-preference-editable"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/preference-editable">preference-editable</a></code>,
+<code id="a-querytype"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/querytype">querytype</a></code>,
+<code id="a-ref"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/ref">ref</a></code>,
+<code id="a-removeelement"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/removeelement">removeelement</a></code>,
+<code id="a-sortDirection"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/sortDirection">sortDirection</a></code>,
+<code id="a-sortResource"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/sortResource">sortResource</a></code>,
+<code id="a-sortResource2"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/sortResource2">sortResource2</a></code>,
+<code id="a-statustext"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/statustext">statustext</a></code>,
+<code id="a-style"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/style">style</a></code>,
+<code id="a-template"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/template">template</a></code>,
+<code id="a-tooltip"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/tooltip">tooltip</a></code>,
+<code id="a-tooltiptext"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/tooltiptext">tooltiptext</a></code>,
+<code id="a-top"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/top">top</a></code>,
+<code id="a-uri"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/uri">uri</a></code>,
+<code id="a-wait-cursor"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/wait-cursor">wait-cursor</a></code>,
+<code id="a-width"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/width">width</a></code> </small></p>
+</td>
+</tr>
+</tbody>
+</table>
+<h3 id="Eigenschaften">Eigenschaften</h3>
+<table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Geerbte Eigenschaften</strong><br> <small> <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/align">align</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/allowEvents">allowEvents</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/boxObject">boxObject</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/builder">builder</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/className">className</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/collapsed">collapsed</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/contextMenu">contextMenu</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/controllers">controllers</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/database">database</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/datasources">datasources</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/dir">dir</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/flex">flex</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/height">height</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/hidden">hidden</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/id">id</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/left">left</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/maxHeight">maxHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/maxWidth">maxWidth</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/menu">menu</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/minHeight">minHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/minWidth">minWidth</a></span></code>, , , , , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/observes">observes</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/ordinal">ordinal</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/orient">orient</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/pack">pack</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/persist">persist</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/ref">ref</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/resource">resource</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/statusText">statusText</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/style">style</a></span></code>, ,, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/tooltip">tooltip</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/tooltipText">tooltipText</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/top">top</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/width">width</a></span></code></small></p> </td> </tr> </tbody>
+</table>
+<h3 id="Methoden">Methoden</h3>
+<table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Geerbte Methoden</strong><br> <small><code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.addEventListener">element.addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.appendChild">node.appendChild()</a></code>, <span id="m-blur"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/click">click</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.cloneNode">node.cloneNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.compareDocumentPosition">node.compareDocumentPosition()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.dispatchEvent">element.dispatchEvent()</a></code>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/focus">focus</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttribute">element.getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNode">element.getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNodeNS">element.getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNS">element.getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getBoundingClientRect">element.getBoundingClientRect()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getClientRects">element.getClientRects()</a></code>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/getElementsByAttribute">getElementsByAttribute</a></code></span>, <span id="m-getElementsByAttributeNS"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/getElementsByAttributeNS">getElementsByAttributeNS</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByClassName">element.getElementsByClassName()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByTagName">element.getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByTagNameNS">element.getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.getFeature">node.getFeature()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.getUserData">node.getUserData()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.hasAttribute">element.hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.hasAttributeNS">element.hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.nodes.hasAttributes">nodes.hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.nodes.hasChildNodes">nodes.hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.insertBefore">node.insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isDefaultNamespace">node.isDefaultNamespace()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isEqualNode">node.isEqualNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isSameNode">node.isSameNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isSupported">node.isSupported()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.lookupNamespaceURI">node.lookupNamespaceURI()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.lookupPrefix">node.lookupPrefix()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.normalize">node.normalize()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.querySelector">element.querySelector()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.querySelectorAll">element.querySelectorAll()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttribute">element.removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttributeNode">element.removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttributeNS">element.removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.removeChild">node.removeChild()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeEventListener">element.removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.replaceChild">node.replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttribute">element.setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNode">element.setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNodeNS">element.setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNS">element.setAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.setUserData">node.setUserData()</a></code></small></p> </td> </tr> </tbody>
+</table>
diff --git a/files/de/archive/mozilla/xul/attribute/accesskey/index.html b/files/de/archive/mozilla/xul/attribute/accesskey/index.html
new file mode 100644
index 0000000000..5f223df6c4
--- /dev/null
+++ b/files/de/archive/mozilla/xul/attribute/accesskey/index.html
@@ -0,0 +1,24 @@
+---
+title: accesskey
+slug: Archive/Mozilla/XUL/Attribute/accesskey
+tags:
+  - XUL Attribute
+  - XUL Referenz
+translation_of: Archive/Mozilla/XUL/Attribute/accesskey
+---
+<div class="noinclude"><span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/de/docs/XUL_Referenz">XUL-Referenz Startseite</a></span></div>
+<dl> <dt><code id="a-accesskey"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code></dt> <div class="noinclude"> <dd>Attribut von: <code><a href="/de/docs/Mozilla/Tech/XUL/button" title="button">button</a></code>, <code><a href="/de/docs/Mozilla/Tech/XUL/checkbox" title="checkbox">checkbox</a></code>, <code><a href="/de/docs/Mozilla/Tech/XUL/caption" title="caption">caption</a></code>, <code><a href="/de/docs/Mozilla/Tech/XUL/description" title="description">description</a></code>, <code><a href="/de/docs/Mozilla/Tech/XUL/label" title="label">label</a></code>, <code><a href="/de/docs/Mozilla/Tech/XUL/listitem" title="listitem">listitem</a></code>, <code><a href="/de/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code>, <code><a href="/de/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code>, <code><a href="/de/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code>, <code><a href="/de/docs/Mozilla/Tech/XUL/tab" title="tab">tab</a></code>, <code><a href="/de/docs/Mozilla/Tech/XUL/radio" title="radio">radio</a></code>, <code><a href="/de/docs/Mozilla/Tech/XUL/toolbarbutton" title="toolbarbutton">toolbarbutton</a></code>, <code><a href="/de/docs/Mozilla/Tech/XUL/textbox (Firefox autocomplete)" title="textbox (Firefox autocomplete)">textbox (Firefox autocomplete)</a></code></dd> </div> <dd>Typ: <em>character</em></dd> <dd>Dem Attribut wird der Buchstabe zugewiesen, der als Tastenkürzel für das Element dienen soll. Dieser Buchstabe sollte sinnvollerweise innerhalb des Textes des Attributs <code><code id="a-label"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> des Elements vorkommen. <div class="noinclude">Typischerweise wird dieser Buchstabe visuell durch Unterstreichung hervorgehoben. Dies ist jedoch plattform- und themenspezifisch. Betätigt der Benutzer gleichzeitig die Alt-Taste (oder eine ähnliche Taste; variiert je nach Betriebssystem) und die durch dieses Attribut angegebene Taste, wird das Element im Fenster von überall aus aktiviert. Auch wenn Groß-/Kleinschreibung des Wertes irrelevant ist, wird die dem Attribut accesskey entsprechende Variante benutzt, sollten beide Schreibweisen innerhalb der Beschriftung vorkommen.</div> </dd>
+</dl>
+<div class="noinclude">
+<h4 id="Beispiel" name="Beispiel">Beispiel</h4>
+<pre>&lt;vbox&gt;
+  &lt;label value="Namen eingeben" accesskey="e" control="myName"/&gt;
+  &lt;textbox id="myName"/&gt;
+  &lt;button label="Abbrechen" accesskey="b"/&gt;
+  &lt;button label="Ok" accesskey="O"/&gt;
+&lt;/vbox&gt;
+</pre>
+<h4 id="Siehe_auch" name="Siehe_auch">Siehe auch</h4>
+<p>Attribut <code id="a-label"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code>, Attribut <code id="a-acceltext"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/acceltext">acceltext</a></code></p>
+
+</div>
diff --git a/files/de/archive/mozilla/xul/attribute/activetitlebarcolor/index.html b/files/de/archive/mozilla/xul/attribute/activetitlebarcolor/index.html
new file mode 100644
index 0000000000..95f6be0346
--- /dev/null
+++ b/files/de/archive/mozilla/xul/attribute/activetitlebarcolor/index.html
@@ -0,0 +1,14 @@
+---
+title: Activetitlebarcolor
+slug: Archive/Mozilla/XUL/Attribute/Activetitlebarcolor
+tags:
+  - XUL Attribute
+  - XUL Referenz
+translation_of: Archive/Mozilla/XUL/Attribute/activetitlebarcolor
+---
+<div class="noinclude"><span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/de/docs/XUL_Referenz">XUL-Referenz Startseite</a></span></div>
+<dl> <dt><code id="a-activetitlebarcolor"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/activetitlebarcolor">activetitlebarcolor</a></code> </dt> <dd>Typ: <em>color string</em></dd> <dd>Bestimmt die Hintergrundfarbe der Titelleiste eines Fensters, wenn es aktiv ist (Vordergrund). Außerdem versteckt dies die Trennlinie zwischen Titelleiste und Fensterinhalt. Dies trifft nur auf Mac OS Systeme zu.</dd>
+</dl>
+<div class="noinclude">
+
+</div>
diff --git a/files/de/archive/mozilla/xul/attribute/align/index.html b/files/de/archive/mozilla/xul/attribute/align/index.html
new file mode 100644
index 0000000000..fe97a3c6c4
--- /dev/null
+++ b/files/de/archive/mozilla/xul/attribute/align/index.html
@@ -0,0 +1,37 @@
+---
+title: align
+slug: Archive/Mozilla/XUL/Attribute/align
+tags:
+  - XUL Attribute
+  - XUL Referenz
+translation_of: Archive/Mozilla/XUL/Attribute/align
+---
+<div class="noinclude">
+ <span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/de/docs/XUL_Referenz">XUL-Referenz Startseite</a></span></div>
+<dl>
+ <dt>
+  <code id="a-align"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code></dt>
+</dl>
+<dl>
+ <dd>
+  Typ: <em>einer der unten angegebenen Werte</em></dd>
+</dl>
+<dl>
+ <dd>
+  Das Attribut <code>align</code> gibt die Ausrichtung der Kindelemente des Kastens (Box) an, wenn die Größe des Kastens größer als die Gesamtgröße seiner Kindelemente ist. Für Kästen horizontaler Orientierung gibt es die vertikale Ausrichtung der Kindelemente an. Im Falle vertikaler Orientierung legt es entsprechend die horizontale Ausrichtung der Kindelemente fest. Das Attribut <code id="a-pack"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code> bezieht sich auf die Ausrichtung, wird jedoch zur Angabe der Position in entgegengesetzter Richtung benutzt. Der Wert von <code>align</code> kann auch mittels der Stileigenschaft <a href="/de/CSS/-moz-box-align" title="de/CSS/-moz-box-align">-moz-box-align</a> angeben werden.</dd>
+</dl>
+<ul>
+ <li><code>start</code>: Kindelemente werden beginnend bei der linken oder oberen Kante des Kastens ausgerichtet. Sollte der Kasten größer also die Gesamtgröße aller Kindelemente sein, wird der restliche Raum an der rechten oder unteren Seite plaziert.</li>
+ <li><code>center</code>: Restlicher Raum wird gleichmäßig entlang jeder Seite der Kindelemente aufgeteilt, was zur Positionierung der Kinder in der Mitte des Kastens führt.</li>
+ <li><code>end</code>: Kindelemente werden beginnend bei der rechten oder unteren Kante des Kastens ausgerichtet. Sollte der Kasten größer also die Gesamtgröße aller Kindelemente sein, wird der restliche Raum an der linken oder oberen Seite plaziert.</li>
+ <li><code>baseline</code>: Dieser Wert betrifft lediglich Kästen mit horizontaler Orientierung. In diesem Fall werden die Kindelemente so ausgerichtet, dass ihre Textbeschriftungen in einer Reihe sind.</li>
+ <li><code>stretch</code>: Die Kindelemente werden so gestreckt, dass sie die Größe des Kastens ausfüllen. Im Falle eines horizontalen Kastens werden die Kinder auf die Höhe des Kastens gestreckt. Bei einem vertikalen Kasten werden die Kinder auf die Breite des Kastens gestreckt. Ändert sich die Größe des Kastens, so werden die Kinder passend gestreckt. Benutzen Sie das Attribut <code id="a-flex"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code>, um Elemente zu erzeugen, die sich in die entgegengesetzte Richtung strecken.</li>
+ <li><code>left</code>: <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> Die Elemente werden an ihren linken Kanten ausgerichtet.</li>
+ <li><code>right</code>: <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> Die Elemente werden an ihren rechten Kanten ausgerichtet.</li>
+</ul>
+<div class="noinclude">
+ <h3 id="Siehe_auch" name="Siehe_auch">Siehe auch</h3>
+ <p>Attribut <code id="a-pack"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code></p>
+
+</div>
+<p> </p>
diff --git a/files/de/archive/mozilla/xul/attribute/allowevents/index.html b/files/de/archive/mozilla/xul/attribute/allowevents/index.html
new file mode 100644
index 0000000000..63dc160f9e
--- /dev/null
+++ b/files/de/archive/mozilla/xul/attribute/allowevents/index.html
@@ -0,0 +1,17 @@
+---
+title: allowevents
+slug: Archive/Mozilla/XUL/Attribute/allowevents
+tags:
+  - XUL Attribute
+  - XUL Referenz
+translation_of: Archive/Mozilla/XUL/Attribute/allowevents
+---
+<div class="noinclude"><span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/de/docs/XUL_Referenz">XUL-Referenz Startseite</a></span></div>
+<dl> <dt><code id="a-allowevents"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/allowevents">allowevents</a></code></dt> <dd>Typ: <em>boolean</em></dd> <dd>Falls true, werden Ereignisse an die Kindelemente des Elements weitergereicht. Anderenfalls erhält nur das Element Ereignisse.</dd>
+</dl>
+<div class="noinclude">
+<p>Bei <code><a href="/de/docs/Mozilla/Tech/XUL/listitem" title="listitem">listitem</a></code> und <code><a href="/de/docs/Mozilla/Tech/XUL/titlebar" title="titlebar">titlebar</a></code> Elementen werden Maus-Ereignisse normalerweise nicht an deren Kindelemente gesendet. Stattdessen werden sie zurück auf das <code><a href="/de/docs/Mozilla/Tech/XUL/listitem" title="listitem">listitem</a></code> und <code><a href="/de/docs/Mozilla/Tech/XUL/titlebar" title="titlebar">titlebar</a></code> Element selbst geschickt. Das bedeutet, dass Elemente innerhalb eines <code><a href="/de/docs/Mozilla/Tech/XUL/listitem" title="listitem">listitem</a></code> Elements nicht auf auf Ereignisse reagieren und stattdessen nur ein Item in der Liste ausgewählt wird. Wird das <code>allowevents</code> Attribut auf <code>true</code> gesetzt, wird dieses spezielle Verhalten deaktiviert und Ereignisse werden wie bei anderen Elementen behandelt.</p>
+<p>Bei <code><a href="/de/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code>, <code><a href="/de/docs/Mozilla/Tech/XUL/menuseparator" title="menuseparator">menuseparator</a></code>, <code><a href="/de/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code> und <code><a href="/de/docs/Mozilla/Tech/XUL/treecol" title="treecol">treecol</a></code> Elementen, sowie Menü-Buttons, und beim <code><a href="/de/docs/Mozilla/Tech/XUL/datepicker" title="datepicker">datepicker</a></code> Popup werden Maus-Ereignisse ebenfalls auf das Element selbst gerichtet. Das <code>allowevents</code> Attribut wird jedoch in einer anderen Art verwendet. Das Attribut <code>allowevents</code> kann hier im Kindelement auf <code>true</code> gesetzt werden. Das hat die gleichen Auswirkungen, wie bei normal gerichteten Ereignissen, erlaubt aber unterschiedliche Einstellungen für jedes Kindelement.<br>
+Dieses Verhalten wird für Menüs verwendet, um zum Beispiel einem Menü-Button zu erlauben sich so zu verhalten wie das Menü, wenn man darauf klickt.</p>
+
+</div>
diff --git a/files/de/archive/mozilla/xul/attribute/allownegativeassertions/index.html b/files/de/archive/mozilla/xul/attribute/allownegativeassertions/index.html
new file mode 100644
index 0000000000..83634ca471
--- /dev/null
+++ b/files/de/archive/mozilla/xul/attribute/allownegativeassertions/index.html
@@ -0,0 +1,11 @@
+---
+title: allownegativeassertions
+slug: Archive/Mozilla/XUL/Attribute/allownegativeassertions
+tags:
+  - XUL Attribute
+  - XUL Referenz
+translation_of: Archive/Mozilla/XUL/Attribute/allownegativeassertions
+---
+<div class="noinclude"><span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/de/docs/XUL_Referenz">XUL-Referenz Startseite</a></span></div>
+<dl> <dt><code id="a-allownegativeassertions"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/allownegativeassertions">allownegativeassertions</a></code></dt> <dd>Typ: <em>boolean</em></dd> <dd>Gültig für jedes Element mit einem Attribut <code id="a-datasources"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/datasources">datasources</a></code>. Werden mehrere Datenquellen benutzt, wird die Aussage eventuell von einer anderen überschrieben. Wenn dieses Attribut <code>true</code> ist (was die Vorgabe ist), kann eine Datenquelle eine frühere Aussage negieren.</dd>
+</dl>
diff --git a/files/de/archive/mozilla/xul/attribute/color/index.html b/files/de/archive/mozilla/xul/attribute/color/index.html
new file mode 100644
index 0000000000..50902e7afe
--- /dev/null
+++ b/files/de/archive/mozilla/xul/attribute/color/index.html
@@ -0,0 +1,14 @@
+---
+title: color
+slug: Archive/Mozilla/XUL/Attribute/Color
+tags:
+  - XUL Attribute
+  - XUL Referenz
+translation_of: Archive/Mozilla/XUL/Attribute/color
+---
+<div class="noinclude"><span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/de/docs/XUL_Referenz">XUL-Referenz Startseite</a></span></div>
+<dl> <dt><code id="a-color"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/color">color</a></code></dt> <dd>Typ: <em>color string</em></dd> <dd>Die aktuell ausgewählte Farbe. Diese wird geändert, sobald der Anwender eine Farbe auswählt. Man kann einen String in der Form #RRGGBB der Eigenschaft zuweisen, um die gewählte Farbe zu ändern.</dd>
+</dl>
+<div class="noinclude">
+<p> </p>
+</div>
diff --git a/files/de/archive/mozilla/xul/attribute/cols/index.html b/files/de/archive/mozilla/xul/attribute/cols/index.html
new file mode 100644
index 0000000000..1f2ea0a4d6
--- /dev/null
+++ b/files/de/archive/mozilla/xul/attribute/cols/index.html
@@ -0,0 +1,14 @@
+---
+title: cols
+slug: Archive/Mozilla/XUL/Attribute/Cols
+tags:
+  - XUL Attribute
+  - XUL Referenz
+translation_of: Archive/Mozilla/XUL/Attribute/cols
+---
+<div class="noinclude"><span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/de/docs/XUL_Referenz">XUL-Referenz Startseite</a></span></div>
+<dl> <dt><code id="a-cols"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/cols">cols</a></code></dt> <dd>Typ: <em>integer</em></dd> <dd>Stellt die Anzahl an Spalten für mehrzeilige Textboxen dar.</dd>
+</dl>
+<div class="noinclude">
+
+</div>
diff --git a/files/de/archive/mozilla/xul/attribute/decimalplaces/index.html b/files/de/archive/mozilla/xul/attribute/decimalplaces/index.html
new file mode 100644
index 0000000000..bea62c69a2
--- /dev/null
+++ b/files/de/archive/mozilla/xul/attribute/decimalplaces/index.html
@@ -0,0 +1,14 @@
+---
+title: decimalplaces
+slug: Archive/Mozilla/XUL/Attribute/Decimalplaces
+tags:
+  - XUL Attribute
+  - XUL Referenz
+translation_of: Archive/Mozilla/XUL/Attribute/decimalplaces
+---
+<div class="noinclude"><span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/de/docs/XUL_Referenz">XUL-Referenz Startseite</a></span></div>
+<dl> <dt><code id="a-decimalplaces"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/decimalplaces">decimalplaces</a></code> </dt> <dd>Typ: <em>integer</em></dd> <dd>Die Anzahl an Dezimalstellen, die angezeigt werden sollen. Der Standardwert ist 0, was bedeutet, dass keine Dezimalstellen angezeigt werden. Der Wert<code> infinity</code> kann dazu verwendet werden, keine Begrenzung der Dezimalstellen bei Zahlen anzuzeigen. Hinweis: Dezimalzahlen werden als Floats gespeichert.</dd>
+</dl>
+<div class="noinclude">
+
+</div>
diff --git a/files/de/archive/mozilla/xul/attribute/disabled/index.html b/files/de/archive/mozilla/xul/attribute/disabled/index.html
new file mode 100644
index 0000000000..0b296a38ea
--- /dev/null
+++ b/files/de/archive/mozilla/xul/attribute/disabled/index.html
@@ -0,0 +1,28 @@
+---
+title: Disabled
+slug: Archive/Mozilla/XUL/Attribute/Disabled
+tags:
+  - XUL Attribute
+  - XUL Referenz
+translation_of: Archive/Mozilla/XUL/Attribute/disabled
+---
+<div class="noinclude"><span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/de/docs/XUL_Referenz">XUL-Referenz Startseite</a></span></div>
+<dl> <dt><code id="a-disabled"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code></dt> <dd>Typ: <em>boolean</em></dd> <dd>Kennzeichnet, ob ein Element deaktiviert ist oder nicht. Wenn das Element auf  <code>true</code> gesetzt ist, ist das Element deaktiviert. Deaktivierte Elemente sind gewöhnlich mit einem grauen Text dargestellt. Wenn ein Element deaktiviert ist, wird es auf Anwenderaktionen nicht reagieren, es kann den Fokus nicht erlangen und das <code>command</code> Ereignis wird nicht ausgelöst. Das Element wird allerdings noch auf Mausereignisse antworten. Um das Element zu aktivieren, ist es besser das Attribut zu entfernen als es auf den Wert <code>false</code> zu setzen. Um den Wert dieses Attributs mittels JavaScript zu setzen oder abzurufen, sollte besser die <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/disabled">disabled</a></span></code> Eigenschaft verwendet werden.</dd>
+</dl>
+<div class="noinclude">
+<pre class="brush: js">// Deaktiviere ein Element.
+document.getElementById('buttRemove').setAttribute("disabled", "true");
+
+// Reaktiviere ein Element, während das "disabled" Attribute beibehalten wird.
+document.getElementById('buttRemove').setAttribute("disabled", "");
+
+// Reaktiviere ein Element, in dem das "disabled" Attribut entfernt wird.
+document.getElementById('buttRemove').removeAttribute("disabled");
+</pre>
+<div class="blockIndicator standardNote">
+    <p><a href="https://developer.mozilla.org/de/docs/Mozilla/Firefox/Releases/3.5">Hinweis zu Firefox 3.5</a></p>
+    <p style="font-weight: 400;">Seit Firefox 3.5 wird dieses Attribut für Keyset Elemente unterstützt.</p>
+</div></div>
+<div class="noinclude">
+
+</div>
diff --git a/files/de/archive/mozilla/xul/attribute/empty/index.html b/files/de/archive/mozilla/xul/attribute/empty/index.html
new file mode 100644
index 0000000000..f1a3d0071b
--- /dev/null
+++ b/files/de/archive/mozilla/xul/attribute/empty/index.html
@@ -0,0 +1,14 @@
+---
+title: empty
+slug: Archive/Mozilla/XUL/Attribute/Empty
+tags:
+  - XUL Attribute
+  - XUL Referenz
+translation_of: Archive/Mozilla/XUL/Attribute/textbox.empty
+---
+<div class="noinclude"><span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/de/docs/XUL_Referenz">XUL-Referenz Startseite</a></span></div>
+<dl> <dt><code id="a-textbox.empty"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/textbox.empty">empty</a></code> </dt> <dd>Typ: <em>boolean</em></dd> <dd>Gibt an, ob <a class="internal" href="/de/XUL/Property/emptyText" title="de/XUL/Property/emptyText">emptyText</a> angezeigt werden soll. Kann zur Gestaltung des Elements verwendet werden.</dd>
+</dl>
+<div class="noinclude">
+
+</div>
diff --git a/files/de/archive/mozilla/xul/attribute/emptytext/index.html b/files/de/archive/mozilla/xul/attribute/emptytext/index.html
new file mode 100644
index 0000000000..9631bea08c
--- /dev/null
+++ b/files/de/archive/mozilla/xul/attribute/emptytext/index.html
@@ -0,0 +1,14 @@
+---
+title: emptytext
+slug: Archive/Mozilla/XUL/Attribute/Emptytext
+tags:
+  - XUL Attribute
+  - XUL Referenz
+translation_of: Archive/Mozilla/XUL/Attribute/emptytext
+---
+<div class="noinclude"><span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/de/docs/XUL_Referenz">XUL-Referenz Startseite</a></span></div>
+<dl> <dt><code id="a-emptytext"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/emptytext">emptytext</a></code>  <span class="inlineIndicator deprecated deprecatedInline" title="(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)">Unerwünscht Gecko 2</span></dt> <dd>Typ: <em>string</em></dd> <dd>Ein String, der in der <a class="internal" href="/De/XUL/Textbox" title="de/XUL/textbox">Textbox</a> angezeigt wird, falls diese keinen Wert besitzt. Dieses Attribut wurde vom <code id="a-placeholder"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/placeholder">placeholder</a></code> Attribut in Gecko 2 ersetzt. Der alte Name bleibt zur Kompatibilität bestehen, aber Sie sollten Ihren Code aktualisieren.</dd>
+</dl>
+<div class="noinclude">
+
+</div>
diff --git a/files/de/archive/mozilla/xul/attribute/expr/index.html b/files/de/archive/mozilla/xul/attribute/expr/index.html
new file mode 100644
index 0000000000..1448277f5c
--- /dev/null
+++ b/files/de/archive/mozilla/xul/attribute/expr/index.html
@@ -0,0 +1,14 @@
+---
+title: Expr
+slug: Archive/Mozilla/XUL/Attribute/Expr
+tags:
+  - XUL Attribute
+  - XUL Referenz
+translation_of: Archive/Mozilla/XUL/Attribute/expr
+---
+<div class="noinclude"><span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/de/docs/XUL_Referenz">XUL-Referenz Startseite</a></span></div>
+<dl> <dt><code id="a-expr"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/expr">expr</a></code></dt> <dd>Typ: <em>string</em></dd> <dd>Ein XPath Ausdruck für XML Abfragen, der Ergebnisse zurückliefert. Innerhalb des Ausdrucks kann jeder Namespace Präfix verwendet werden, der für ein Element deklariert wurde.</dd>
+</dl>
+<div class="noinclude">
+
+</div>
diff --git a/files/de/archive/mozilla/xul/attribute/hidespinbuttons/index.html b/files/de/archive/mozilla/xul/attribute/hidespinbuttons/index.html
new file mode 100644
index 0000000000..37b86f1f3f
--- /dev/null
+++ b/files/de/archive/mozilla/xul/attribute/hidespinbuttons/index.html
@@ -0,0 +1,10 @@
+---
+title: hidespinbuttons
+slug: Archive/Mozilla/XUL/Attribute/Hidespinbuttons
+tags:
+  - XUL Attribute
+  - XUL Referenz
+translation_of: Archive/Mozilla/XUL/Attribute/hidespinbuttons
+---
+<div class="noinclude"><span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/de/docs/XUL_Referenz">XUL-Referenz Startseite</a></span></div>
+<dl> <dt><code id="a-hidespinbuttons"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/hidespinbuttons">hidespinbuttons</a></code></dt> <dd>Typ: <em>boolean</em></dd> Falls der Wert auf <code>true</code> gesetzt wird, werden keine Buttons mit Pfeilen angezeigt, um den Wert des Feldes anzupassen. Der Wert kann dann ausschließlich per Tastatur eingegeben werden. Standardmäßig ist der Wert <code>false</code>.</dl> <div class="noinclude">  </div>
diff --git a/files/de/archive/mozilla/xul/attribute/index.html b/files/de/archive/mozilla/xul/attribute/index.html
new file mode 100644
index 0000000000..2bc9d70f0d
--- /dev/null
+++ b/files/de/archive/mozilla/xul/attribute/index.html
@@ -0,0 +1,11 @@
+---
+title: Attribute
+slug: Archive/Mozilla/XUL/Attribute
+tags:
+  - XUL Attribute
+  - XUL Referenz
+translation_of: Archive/Mozilla/XUL/Attribute
+---
+<p><span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/de/docs/XUL_Referenz">XUL-Referenz Startseite</a></span></p>
+<ul> <li><a href="/de/XUL/Attribute/acceltext" title="de/XUL/Attribute/acceltext">acceltext</a></li> <li><a href="/de/XUL/Attribute/accessible" title="de/XUL/Attribute/accessible">accessible</a></li> <li><a href="/de/XUL/Attribute/accesskey" title="de/XUL/Attribute/accesskey">accesskey</a></li> <li><a href="/De/XUL/Attribute/Activetitlebarcolor" title="de/XUL/Attribute/activetitlebarcolor">activetitlebarcolor</a> </li> <li><a href="/de/XUL/Attribute/afterselected" title="de/XUL/Attribute/afterselected">afterselected</a></li> <li><a href="/de/XUL/Attribute/align" title="de/XUL/Attribute/align">align</a></li> <li><a href="/de/XUL/Attribute/allowevents" title="de/XUL/Attribute/allowevents">allowevents</a></li> <li><a href="/de/XUL/Attribute/allownegativeassertions" title="de/XUL/Attribute/allownegativeassertions">allownegativeassertions</a></li> <li><a href="/de/XUL/Attribute/alternatingbackground" title="de/XUL/Attribute/alternatingbackground">alternatingbackground</a></li> <li><a href="/de/XUL/Attribute/alwaysopenpopup" title="de/XUL/Attribute/alwaysopenpopup">alwaysopenpopup</a></li> <li><a href="/de/XUL/Attribute/attribute" title="de/XUL/Attribute/attribute">attribute</a></li> <li><a href="/de/XUL/Attribute/autoCheck" title="de/XUL/Attribute/autoCheck">autocheck</a></li> <li><a href="/de/XUL/Attribute/autoCheck" title="de/XUL/Attribute/autoCheck">autoCheck</a></li> <li><a href="/de/XUL/Attribute/autocompleteenabled" title="de/XUL/Attribute/autocompleteenabled">autocompleteenabled</a></li> <li><a href="/de/XUL/Attribute/autocompletepopup" title="de/XUL/Attribute/autocompletepopup">autocompletepopup</a></li> <li><a href="/de/XUL/Attribute/autocompletesearch" title="de/XUL/Attribute/autocompletesearch">autocompletesearch</a></li> <li><a href="/de/XUL/Attribute/autocompletesearchparam" title="de/XUL/Attribute/autocompletesearchparam">autocompletesearchparam</a></li> <li><a href="/de/XUL/Attribute/autoFill" title="de/XUL/Attribute/autoFill">autoFill</a></li> <li><a href="/de/XUL/Attribute/autoFillAfterMatch" title="de/XUL/Attribute/autoFillAfterMatch">autoFillAfterMatch</a></li> <li><a href="/de/XUL/Attribute/autoscroll" title="de/XUL/Attribute/autoscroll">autoscroll</a></li> <li><a href="/de/XUL/Attribute/beforeselected" title="de/XUL/Attribute/beforeselected">beforeselected</a></li> <li><a href="/de/XUL/Attribute/buttonaccesskeyaccept" title="de/XUL/Attribute/buttonaccesskeyaccept">buttonaccesskeyaccept</a></li> <li><a href="/de/XUL/Attribute/buttonaccesskeycancel" title="de/XUL/Attribute/buttonaccesskeycancel">buttonaccesskeycancel</a></li> <li><a href="/de/XUL/Attribute/buttonaccesskeydisclosure" title="de/XUL/Attribute/buttonaccesskeydisclosure">buttonaccesskeydisclosure</a></li> <li><a href="/de/XUL/Attribute/buttonaccesskeyextra1" title="de/XUL/Attribute/buttonaccesskeyextra1">buttonaccesskeyextra1</a></li> <li><a href="/de/XUL/Attribute/buttonaccesskeyextra2" title="de/XUL/Attribute/buttonaccesskeyextra2">buttonaccesskeyextra2</a></li> <li><a href="/de/XUL/Attribute/buttonaccesskeyhelp" title="de/XUL/Attribute/buttonaccesskeyhelp">buttonaccesskeyhelp</a></li> <li><a href="/de/XUL/Attribute/buttonalign" title="de/XUL/Attribute/buttonalign">buttonalign</a></li> <li><a href="/de/XUL/Attribute/buttondir" title="de/XUL/Attribute/buttondir">buttondir</a></li> <li><a href="/de/XUL/Attribute/buttondisabledaccept" title="de/XUL/Attribute/buttondisabledaccept">buttondisabledaccept</a></li> <li><a href="/de/XUL/Attribute/buttonlabelaccept" title="de/XUL/Attribute/buttonlabelaccept">buttonlabelaccept</a></li> <li><a href="/de/XUL/Attribute/buttonlabelcancel" title="de/XUL/Attribute/buttonlabelcancel">buttonlabelcancel</a></li> <li><a href="/de/XUL/Attribute/buttonlabeldisclosure" title="de/XUL/Attribute/buttonlabeldisclosure">buttonlabeldisclosure</a></li> <li><a href="/de/XUL/Attribute/buttonlabelextra1" title="de/XUL/Attribute/buttonlabelextra1">buttonlabelextra1</a></li> <li><a href="/de/XUL/Attribute/buttonlabelextra2" title="de/XUL/Attribute/buttonlabelextra2">buttonlabelextra2</a></li> <li><a href="/de/XUL/Attribute/buttonlabelhelp" title="de/XUL/Attribute/buttonlabelhelp">buttonlabelhelp</a></li> <li><a href="/de/XUL/Attribute/buttonorient" title="de/XUL/Attribute/buttonorient">buttonorient</a></li> <li><a href="/de/XUL/Attribute/buttonpack" title="de/XUL/Attribute/buttonpack">buttonpack</a></li> <li><a href="/de/XUL/Attribute/buttons" title="de/XUL/Attribute/buttons">buttons</a></li> <li><a href="/de/XUL/Attribute/checked" title="de/XUL/Attribute/checked">checked</a></li> <li><a href="/de/XUL/Attribute/checkState" title="de/XUL/Attribute/checkState">checkState</a></li> <li><a href="/de/XUL/Attribute/class" title="de/XUL/Attribute/class">class</a></li> <li><a href="/de/XUL/Attribute/closebutton" title="de/XUL/Attribute/closebutton">closebutton</a></li> <li><a href="/de/XUL/Attribute/Closemenu" title="de/XUL/Attribute/closemenu">closemenu</a></li> <li><a href="/de/XUL/Attribute/coalesceduplicatearcs" title="de/XUL/Attribute/coalesceduplicatearcs">coalesceduplicatearcs</a></li> <li><a href="/de/XUL/Attribute/collapse" title="de/XUL/Attribute/collapse">collapse</a></li> <li><a href="/de/XUL/Attribute/collapsed" title="de/XUL/Attribute/collapsed">collapsed</a></li> <li><a href="/De/XUL/Attribute/Color" title="de/XUL/Attribute/color">color</a></li> <li><a href="/De/XUL/Attribute/Cols" title="de/XUL/Attribute/cols">cols</a></li> <li><a href="/de/XUL/Attribute/command" title="de/XUL/Attribute/command">command</a></li> <li><a href="/de/XUL/Attribute/commandupdater" title="de/XUL/Attribute/commandupdater">commandupdater</a></li> <li><a href="/de/XUL/Attribute/completedefaultindex" title="de/XUL/Attribute/completedefaultindex">completedefaultindex</a></li> <li><a href="/de/XUL/Attribute/container" title="de/XUL/Attribute/container">container</a></li> <li><a href="/de/XUL/Attribute/containment" title="de/XUL/Attribute/containment">containment</a></li> <li><a href="/de/XUL/Attribute/contentcontextmenu" title="de/XUL/Attribute/contentcontextmenu">contentcontextmenu</a></li> <li><a href="/de/XUL/Attribute/contenttooltip" title="de/XUL/Attribute/contenttooltip">contenttooltip</a></li> <li><a href="/de/XUL/Attribute/context" title="de/XUL/Attribute/context">context</a></li> <li><a href="/de/XUL/Attribute/contextmenu" title="de/XUL/Attribute/contextmenu">contextmenu</a></li> <li><a href="/de/XUL/Attribute/control" title="de/XUL/Attribute/control">control</a></li> <li><a href="/de/XUL/Attribute/crop" title="de/XUL/Attribute/crop">crop</a></li> <li><a href="/de/XUL/Attribute/curpos" title="de/XUL/Attribute/curpos">curpos</a></li> <li><a href="/de/XUL/Attribute/current" title="de/XUL/Attribute/current">current</a></li> <li><a href="/de/XUL/Attribute/currentset" title="de/XUL/Attribute/currentset">currentset</a></li> <li><a href="/de/XUL/Attribute/customindex" title="de/XUL/Attribute/customindex">customindex</a></li> <li><a href="/de/XUL/Attribute/customizable" title="de/XUL/Attribute/customizable">customizable</a></li> <li><a href="/de/XUL/Attribute/cycler" title="de/XUL/Attribute/cycler">cycler</a></li> <li><a href="/de/XUL/Attribute/datasources" title="de/XUL/Attribute/datasources">datasources</a></li> <li><a href="/De/XUL/Attribute/Decimalplaces" title="de/XUL/Attribute/decimalplaces">decimalplaces</a></li> <li><a href="/de/XUL/Attribute/default" title="de/XUL/Attribute/default">default</a></li> <li><a href="/de/XUL/Attribute/defaultButton" title="de/XUL/Attribute/defaultButton">defaultButton</a></li> <li><a href="/de/XUL/Attribute/defaultset" title="de/XUL/Attribute/defaultset">defaultset</a></li> <li><a href="/de/XUL/Attribute/description" title="de/XUL/Attribute/description">description</a></li> <li><a href="/de/XUL/Attribute/dir" title="de/XUL/Attribute/dir">dir</a></li> <li><a href="/de/XUL/Attribute/disableAutocomplete" title="de/XUL/Attribute/disableAutocomplete">disableAutocomplete</a></li> <li><a href="/de/XUL/Attribute/disableAutocomplete" title="de/XUL/Attribute/disableAutocomplete">disableautocomplete</a></li> <li><a href="/de/XUL/Attribute/disableautoselect" title="de/XUL/Attribute/disableautoselect">disableautoselect</a></li> <li><a href="/de/XUL/Attribute/disableclose" title="de/XUL/Attribute/disableclose">disableclose</a></li> <li><a href="/De/XUL/Attribute/Disabled" title="de/XUL/Attribute/disabled">disabled</a></li> <li><a href="/de/XUL/Attribute/disablehistory" title="de/XUL/Attribute/disablehistory">disablehistory</a></li> <li><a href="/de/XUL/Attribute/disableKeyNavigation" title="de/XUL/Attribute/disableKeyNavigation">disableKeyNavigation</a></li> <li><a href="/de/XUL/Attribute/disableKeyNavigation" title="de/XUL/Attribute/disableKeyNavigation">disablekeynavigation</a></li> <li><a href="/de/XUL/Attribute/disablesecurity" title="de/XUL/Attribute/disablesecurity">disablesecurity</a></li> <li><a href="/de/XUL/Attribute/dlgtype" title="de/XUL/Attribute/dlgtype">dlgtype</a></li> <li><a href="/de/XUL/Attribute/dragging" title="de/XUL/Attribute/dragging">dragging</a></li> <li><a href="/de/XUL/Attribute/editable" title="de/XUL/Attribute/editable">editable</a></li> <li><a href="/de/XUL/Attribute/editortype" title="de/XUL/Attribute/editortype">editortype</a></li> <li><a href="/de/XUL/Attribute/element" title="de/XUL/Attribute/element">element</a></li> <li><a href="/De/XUL/Attribute/Empty" title="de/XUL/Attribute/empty">empty</a></li> <li><a href="/De/XUL/Attribute/Emptytext" title="de/XUL/Attribute/emptytext">emptytext</a>  <span class="inlineIndicator deprecated deprecatedInline" title="(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)">Unerwünscht Gecko 2</span></li> <li><a href="/de/XUL/Attribute/enableColumnDrag" title="de/XUL/Attribute/enableColumnDrag">enableColumnDrag</a></li> <li><a href="/de/XUL/Attribute/enablehistory" title="de/XUL/Attribute/enablehistory">enablehistory</a></li> <li><a href="/de/XUL/Attribute/equalsize" title="de/XUL/Attribute/equalsize">equalsize</a></li> <li><a href="/de/XUL/Attribute/eventnode" title="de/XUL/Attribute/eventnode">eventnode</a></li> <li><a href="/de/XUL/Attribute/events" title="de/XUL/Attribute/events">events</a></li> <li><a href="/De/XUL/Attribute/Expr" title="de/XUL/Attribute/expr">expr</a></li> <li><a href="/de/XUL/Attribute/firstdayofweek" title="de/XUL/Attribute/firstdayofweek">firstdayofweek</a></li> <li><a href="/de/XUL/Attribute/firstpage" title="de/XUL/Attribute/firstpage">firstpage</a></li> <li><a href="/de/XUL/Attribute/first-tab" title="de/XUL/Attribute/first-tab">first-tab</a></li> <li><a href="/de/XUL/Attribute/fixed" title="de/XUL/Attribute/fixed">fixed</a></li> <li><a href="/de/XUL/Attribute/flags" title="de/XUL/Attribute/flags">flags</a></li> <li><a href="/de/XUL/Attribute/flex" title="de/XUL/Attribute/flex">flex</a></li> <li><a href="/de/XUL/Attribute/focused" title="de/XUL/Attribute/focused">focused</a></li> <li><a href="/de/XUL/Attribute/forceComplete" title="de/XUL/Attribute/forceComplete">forceComplete</a></li> <li><a href="/de/XUL/Attribute/forceComplete" title="de/XUL/Attribute/forceComplete">forcecomplete</a></li> <li><a href="/de/XUL/Attribute/grippyhidden" title="de/XUL/Attribute/grippyhidden">grippyhidden</a></li> <li><a href="/de/XUL/Attribute/grippytooltiptext" title="de/XUL/Attribute/grippytooltiptext">grippytooltiptext</a></li> <li><a href="/de/XUL/Attribute/group" title="de/XUL/Attribute/group">group</a></li> <li><a href="/de/XUL/Attribute/handleCtrlPageUpDown" title="de/XUL/Attribute/handleCtrlPageUpDown">handleCtrlPageUpDown</a></li> <li><a href="/de/XUL/Attribute/handleCtrlTab" title="de/XUL/Attribute/handleCtrlTab">handleCtrlTab</a></li> <li><a href="/de/XUL/Attribute/height" title="de/XUL/Attribute/height">height</a></li> <li><a href="/de/XUL/Attribute/helpURI" title="de/XUL/Attribute/helpURI">helpURI</a></li> <li><a href="/de/XUL/Attribute/hidden" title="de/XUL/Attribute/hidden">hidden</a></li> <li><a href="/de/XUL/Attribute/hidechrome" title="de/XUL/Attribute/hidechrome">hidechrome</a></li> <li><a href="/de/XUL/Attribute/hidecolumnpicker" title="de/XUL/Attribute/hidecolumnpicker">hidecolumnpicker</a></li> <li><a href="/de/XUL/Attribute/hideheader" title="de/XUL/Attribute/hideheader">hideheader</a></li> <li><a href="/de/XUL/Attribute/hideseconds" title="de/XUL/Attribute/hideseconds">hideseconds</a></li> <li><a href="/De/XUL/Attribute/Hidespinbuttons" title="de/XUL/Attribute/hidespinbuttons">hidespinbuttons</a></li> <li><a href="/de/XUL/Attribute/Highlightnonmatches" title="de/XUL/Attribute/highlightnonmatches">highlightnonmatches</a> </li> <li><a href="/de/XUL/Attribute/homepage" title="de/XUL/Attribute/homepage">homepage</a></li> <li><a href="/de/XUL/Attribute/href" title="de/XUL/Attribute/href">href</a></li> <li><a href="/de/XUL/Attribute/icon" title="de/XUL/Attribute/icon">icon</a></li> <li><a href="/de/XUL/Attribute/id" title="de/XUL/Attribute/id">id</a></li> <li><a href="/de/XUL/Attribute/ignoreBlurWhileSearching" title="de/XUL/Attribute/ignoreBlurWhileSearching">ignoreBlurWhileSearching</a></li> <li><a href="/de/XUL/Attribute/ignoreBlurWhileSearching" title="de/XUL/Attribute/ignoreBlurWhileSearching">ignorebluewhilesearching</a></li> <li><a href="/de/XUL/Attribute/ignorecase" title="de/XUL/Attribute/ignorecase">ignorecase</a></li> <li><a href="/de/XUL/Attribute/ignoreincolumnpicker" title="de/XUL/Attribute/ignoreincolumnpicker">ignoreincolumnpicker</a></li> <li><a href="/de/XUL/Attribute/ignorekeys" title="de/XUL/Attribute/ignorekeys">ignorekeys</a></li> <li><a href="/de/XUL/Attribute/image" title="de/XUL/Attribute/image">image</a></li> <li><a href="/de/XUL/Attribute/inactivetitlebarcolor" title="de/XUL/Attribute/inactivetitlebarcolor">inactivetitlebarcolor</a> </li> <li><a href="/de/XUL/Attribute/increment" title="de/XUL/Attribute/increment">increment</a></li> <li><a href="/de/XUL/Attribute/index" title="de/XUL/Attribute/index">index</a></li> <li><a href="/de/XUL/Attribute/inputtooltiptext" title="de/XUL/Attribute/inputtooltiptext">inputtooltiptext</a></li> <li><a href="/de/XUL/Attribute/insertafter" title="de/XUL/Attribute/insertafter">insertafter</a></li> <li><a href="/de/XUL/Attribute/insertbefore" title="de/XUL/Attribute/insertbefore">insertbefore</a></li> <li><a href="/de/XUL/Attribute/instantApply" title="de/XUL/Attribute/instantApply">instantApply</a></li> <li><a href="/de/XUL/Attribute/inverted" title="de/XUL/Attribute/inverted">inverted</a></li> <li><a href="/de/XUL/Attribute/iscontainer" title="de/XUL/Attribute/iscontainer">iscontainer</a></li> <li><a href="/de/XUL/Attribute/isempty" title="de/XUL/Attribute/isempty">isempty</a></li> <li><a href="/de/XUL/Attribute/key" title="de/XUL/Attribute/key">key</a></li> <li><a href="/de/XUL/Attribute/keycode" title="de/XUL/Attribute/keycode">keycode</a></li> <li><a href="/de/XUL/Attribute/keytext" title="de/XUL/Attribute/keytext">keytext</a></li> <li><a href="/de/XUL/Attribute/label" title="de/XUL/Attribute/label">label</a></li> <li><a href="/de/XUL/Attribute/lastpage" title="de/XUL/Attribute/lastpage">lastpage</a></li> <li><a href="/de/XUL/Attribute/lastSelected" title="de/XUL/Attribute/lastSelected">lastSelected</a></li> <li><a href="/de/XUL/Attribute/last-tab" title="de/XUL/Attribute/last-tab">last-tab</a></li> <li><a href="/de/XUL/Attribute/left" title="de/XUL/Attribute/left">left</a></li> <li><a href="/de/XUL/Attribute/linkedpanel" title="de/XUL/Attribute/linkedpanel">linkedpanel</a></li> <li><a href="/de/XUL/Attribute/max" title="de/XUL/Attribute/max">max</a></li> <li><a href="/de/XUL/Attribute/maxheight" title="de/XUL/Attribute/maxheight">maxheight</a></li> <li><a href="/de/XUL/Attribute/maxlength" title="de/XUL/Attribute/maxlength">maxlength</a></li> <li><a href="/de/XUL/Attribute/maxpos" title="de/XUL/Attribute/maxpos">maxpos</a></li> <li><a href="/de/XUL/Attribute/maxrows" title="de/XUL/Attribute/maxrows">maxrows</a></li> <li><a href="/de/XUL/Attribute/maxwidth" title="de/XUL/Attribute/maxwidth">maxwidth</a></li> <li><a href="/de/XUL/Attribute/member" title="de/XUL/Attribute/member">member</a></li> <li><a href="/de/XUL/Attribute/menu" title="de/XUL/Attribute/menu">menu</a></li> <li><a href="/de/XUL/Attribute/menuactive" title="de/XUL/Attribute/menuactive">menuactive</a></li> <li><a href="/de/XUL/Attribute/min" title="de/XUL/Attribute/min">min</a></li> <li><a href="/de/XUL/Attribute/minheight" title="de/XUL/Attribute/minheight">minheight</a></li> <li><a href="/de/XUL/Attribute/minResultsForPopup" title="de/XUL/Attribute/minResultsForPopup">minResultsForPopup</a></li> <li><a href="/de/XUL/Attribute/minResultsForPopup" title="de/XUL/Attribute/minResultsForPopup">minresultsforpopup</a></li> <li><a href="/de/XUL/Attribute/minwidth" title="de/XUL/Attribute/minwidth">minwidth</a></li> <li><a href="/de/XUL/Attribute/mode" title="de/XUL/Attribute/mode">mode</a></li> <li><a href="/de/XUL/Attribute/modifiers" title="de/XUL/Attribute/modifiers">modifiers</a></li> <li><a href="/de/XUL/Attribute/mousethrough" title="de/XUL/Attribute/mousethrough">mousethrough</a></li> <li><a href="/de/XUL/Attribute/Movetoclick" title="de/XUL/Attribute/movetoclick">movetoclick</a></li> <li><a href="/de/XUL/Attribute/multiline" title="de/XUL/Attribute/multiline">multiline</a></li> <li><a href="/de/XUL/Attribute/multiple" title="de/XUL/Attribute/multiple">multiple</a></li> <li><a href="/de/XUL/Attribute/name" title="de/XUL/Attribute/name">name</a></li> <li><a href="/de/XUL/Attribute/negate" title="de/XUL/Attribute/negate">negate</a></li> <li><a href="/de/XUL/Attribute/newlines" title="de/XUL/Attribute/newlines">newlines</a></li> <li><a href="/de/XUL/Attribute/next" title="de/XUL/Attribute/next">next</a></li> <li><a href="/de/XUL/Attribute/noautofocus" title="de/XUL/Attribute/noautofocus">noautofocus</a></li> <li><a href="/de/XUL/Attribute/noautohide" title="de/XUL/Attribute/noautohide">noautohide</a></li> <li><a href="/de/XUL/Attribute/nomatch" title="de/XUL/Attribute/nomatch">nomatch</a></li> <li><a href="/de/XUL/Attribute/Norestorefocus" title="de/XUL/Attribute/norestorefocus">norestorefocus</a></li> <li><a href="/de/XUL/Attribute/object" title="de/XUL/Attribute/object">object</a></li> <li><a href="/de/XUL/Attribute/observes" title="de/XUL/Attribute/observes">observes</a></li> <li><a href="/de/XUL/Attribute/onbeforeaccept" title="de/XUL/Attribute/onbeforeaccept">onbeforeaccept</a></li> <li><a href="/de/XUL/Attribute/onbookmarkgroup" title="de/XUL/Attribute/onbookmarkgroup">onbookmarkgroup</a></li> <li><a href="/De/XUL/Attribute/Onchange" title="de/XUL/Attribute/onchange">onchange</a></li> <li><a class="internal" href="/de/XUL/Attribute/onclick" title="de/XUL/Attribute/Onclick">onclick</a></li> <li><a href="/de/XUL/Attribute/onclosetab" title="de/XUL/Attribute/onclosetab">onclosetab</a></li> <li><a href="/de/XUL/Attribute/oncommand" title="de/XUL/Attribute/oncommand">oncommand</a></li> <li><a href="/de/XUL/Attribute/oncommandupdate" title="de/XUL/Attribute/oncommandupdate">oncommandupdate</a></li> <li><a href="/de/XUL/Attribute/ondialogaccept" title="de/XUL/Attribute/ondialogaccept">ondialogaccept</a></li> <li><a href="/de/XUL/Attribute/ondialogcancel" title="de/XUL/Attribute/ondialogcancel">ondialogcancel</a></li> <li><a href="/de/XUL/Attribute/ondialogdisclosure" title="de/XUL/Attribute/ondialogdisclosure">ondialogclosure</a></li> <li><a href="/de/XUL/Attribute/ondialogextra1" title="de/XUL/Attribute/ondialogextra1">ondialogextra1</a></li> <li><a href="/de/XUL/Attribute/ondialogextra2" title="de/XUL/Attribute/ondialogextra2">ondialogextra2</a></li> <li><a href="/de/XUL/Attribute/ondialoghelp" title="de/XUL/Attribute/ondialoghelp">ondialoghelp</a></li> <li><a href="/de/XUL/Attribute/onerror" title="de/XUL/Attribute/onerror">onerror</a></li> <li><a href="/de/XUL/Attribute/onerrorcommand" title="de/XUL/Attribute/onerrorcommand">onerrorcommand</a></li> <li><a href="/de/XUL/Attribute/onextra1" title="de/XUL/Attribute/onextra1">onextra1</a></li> <li><a href="/de/XUL/Attribute/onextra2" title="de/XUL/Attribute/onextra2">onextra2</a></li> <li><a href="/de/XUL/Attribute/oninput" title="de/XUL/Attribute/oninput">oninput</a></li> <li><a href="/de/XUL/Attribute/onload" title="de/XUL/Attribute/onload">onload</a></li> <li><a href="/de/XUL/Attribute/onnewtab" title="de/XUL/Attribute/onnewtab">onnewtab</a></li> <li><a href="/de/XUL/Attribute/onpageadvanced" title="de/XUL/Attribute/onpageadvanced">onpageadvanced</a></li> <li><a href="/de/XUL/Attribute/onpagehide" title="de/XUL/Attribute/onpagehide">onpagehide</a></li> <li><a href="/de/XUL/Attribute/onpagerewound" title="de/XUL/Attribute/onpagerewound">onpagerewound</a></li> <li><a href="/de/XUL/Attribute/onpageshow" title="de/XUL/Attribute/onpageshow">onpageshow</a></li> <li><a href="/de/XUL/Attribute/onpaneload" title="de/XUL/Attribute/onpaneload">onpaneload</a></li> <li><a href="/de/XUL/Attribute/onpopuphidden" title="de/XUL/Attribute/onpopuphidden">onpopuphidden</a></li> <li><a href="/de/XUL/Attribute/onpopuphiding" title="de/XUL/Attribute/onpopuphiding">onpopuphiding</a></li> <li><a href="/de/XUL/Attribute/onpopupshowing" title="de/XUL/Attribute/onpopupshowing">onpopupshowing</a></li> <li><a href="/de/XUL/Attribute/onpopupshown" title="de/XUL/Attribute/onpopupshown">onpopupshown</a></li> <li><a href="/de/XUL/Attribute/onsearchcomplete" title="de/XUL/Attribute/onsearchcomplete">onsearchcomplete</a></li> <li><a href="/de/XUL/Attribute/onselect" title="de/XUL/Attribute/onselect">onselect</a></li> <li><a href="/de/XUL/Attribute/ontextcommand" title="de/XUL/Attribute/ontextcommand">ontextcommand</a></li> <li><a href="/de/XUL/Attribute/ontextentered" title="de/XUL/Attribute/ontextentered">ontextentered</a></li> <li><a href="/de/XUL/Attribute/ontextrevert" title="de/XUL/Attribute/ontextrevert">ontextrevert</a></li> <li><a href="/de/XUL/Attribute/ontextreverted" title="de/XUL/Attribute/ontextreverted">ontextreverted</a></li> <li><a href="/de/XUL/Attribute/onwizardback" title="de/XUL/Attribute/onwizardback">onwizardback</a></li> <li><a href="/de/XUL/Attribute/onwizardcancel" title="de/XUL/Attribute/onwizardcancel">onwizardcancel</a></li> <li><a href="/de/XUL/Attribute/onwizardfinish" title="de/XUL/Attribute/onwizardfinish">onwizardfinish</a></li> <li><a href="/de/XUL/Attribute/onwizardnext" title="de/XUL/Attribute/onwizardnext">onwizardnext</a></li> <li><a href="/de/XUL/Attribute/open" title="de/XUL/Attribute/open">open</a></li> <li><a href="/de/XUL/Attribute/ordinal" title="de/XUL/Attribute/ordinal">ordinal</a></li> <li><a href="/de/XUL/Attribute/orient" title="de/XUL/Attribute/orient">orient</a></li> <li><a href="/de/XUL/Attribute/pack" title="de/XUL/Attribute/pack">pack</a></li> <li><a href="/de/XUL/Attribute/pageid" title="de/XUL/Attribute/pageid">pageid</a></li> <li><a href="/de/XUL/Attribute/pageincrement" title="de/XUL/Attribute/pageincrement">pageincrement</a></li> <li><a href="/de/XUL/Attribute/pagestep" title="de/XUL/Attribute/pagestep">pagestep</a></li> <li><a href="/de/XUL/Attribute/parent" title="de/XUL/Attribute/parent">parent</a></li> <li><a href="/de/XUL/Attribute/parsetype" title="de/XUL/Attribute/parsetype">parsetype</a></li> <li><a href="/de/XUL/Attribute/persist" title="de/XUL/Attribute/persist">persist</a></li> <li><a href="/de/XUL/Attribute/persistence" title="de/XUL/Attribute/persistence">persistence</a></li> <li><a href="/de/XUL/Attribute/phase" title="de/XUL/Attribute/phase">phase</a></li> <li><a href="/de/XUL/Attribute/pickertooltiptext" title="de/XUL/Attribute/pickertooltiptext">pickertooltiptext</a></li> <li><a href="/de/XUL/Attribute/placeholder" title="de/XUL/Attribute/placeholder">placeholder</a> </li> <li><a href="/de/XUL/Attribute/popup" title="de/XUL/Attribute/popup">popup</a></li> <li><a href="/de/XUL/Attribute/position" title="de/XUL/Attribute/position">position</a></li> <li><a href="/de/XUL/Attribute/predicate" title="de/XUL/Attribute/predicate">predicate</a></li> <li><a href="/de/XUL/Attribute/preference" title="de/XUL/Attribute/preference">preference</a></li> <li><a href="/de/XUL/Attribute/preference-editable" title="de/XUL/Attribute/preference-editable">preference-editable</a></li> <li><a href="/de/XUL/Attribute/primary" title="de/XUL/Attribute/primary">primary</a></li> <li><a href="/de/XUL/Attribute/priority" title="de/XUL/Attribute/priority">priority</a></li> <li><a href="/de/XUL/Attribute/properties" title="de/XUL/Attribute/properties">properties</a></li> <li><a href="/de/XUL/Attribute/querytype" title="de/XUL/Attribute/querytype">querytype</a></li> <li><a href="/de/XUL/Attribute/readonly" title="de/XUL/Attribute/readonly">readonly</a></li> <li><a href="/de/XUL/Attribute/ref" title="de/XUL/Attribute/ref">ref</a></li> <li><a href="/de/XUL/Attribute/rel" title="de/XUL/Attribute/rel">rel</a></li> <li><a href="/de/XUL/Attribute/removeelement" title="de/XUL/Attribute/removeelement">removeelement</a></li> <li><a href="/de/XUL/Attribute/resizeafter" title="de/XUL/Attribute/resizeafter">resizeafter</a></li> <li><a href="/de/XUL/Attribute/resizebefore" title="de/XUL/Attribute/resizebefore">resizebefore</a></li> <li><a href="/de/XUL/Attribute/rows" title="de/XUL/Attribute/rows">rows</a></li> <li><a href="/de/XUL/Attribute/screenX" title="de/XUL/Attribute/screenX">screenX</a></li> <li><a href="/de/XUL/Attribute/screenY" title="de/XUL/Attribute/screenY">screenY</a></li> <li><a href="/de/XUL/Attribute/Searchbutton" title="de/XUL/Attribute/searchbutton">searchbutton</a></li> <li><a href="/de/XUL/Attribute/searchSessions" title="de/XUL/Attribute/searchSessions">searchSessions</a></li> <li><a href="/de/XUL/Attribute/searchlabel" title="de/XUL/Attribute/searchlabel">searchlabel</a></li> <li><a href="/de/XUL/Attribute/selected" title="de/XUL/Attribute/selected">selected</a></li> <li><a href="/de/XUL/Attribute/selectedIndex" title="de/XUL/Attribute/selectedIndex">selectedIndex</a></li> <li><a href="/de/XUL/Attribute/seltype" title="de/XUL/Attribute/seltype">seltype</a></li> <li><a href="/de/XUL/Attribute/setfocus" title="de/XUL/Attribute/setfocus">setfocus</a></li> <li><a href="/de/XUL/Attribute/showcaret" title="de/XUL/Attribute/showcaret">showcaret</a></li> <li><a href="/de/XUL/Attribute/showCommentColumn" title="de/XUL/Attribute/showCommentColumn">showCommentColumn</a></li> <li><a href="/de/XUL/Attribute/showCommentColumn" title="de/XUL/Attribute/showCommentColumn">showcommentcolumn</a></li> <li><a href="/de/XUL/Attribute/showpopup" title="de/XUL/Attribute/showpopup">showpopup</a></li> <li><a href="/de/XUL/Attribute/size" title="de/XUL/Attribute/size">size</a></li> <li><a href="/de/XUL/Attribute/sizemode" title="de/XUL/Attribute/sizemode">sizemode</a></li> <li><a href="/de/XUL/Attribute/sizetopopup" title="de/XUL/Attribute/sizetopopup">sizetopopup</a></li> <li><a href="/de/XUL/Attribute/smoothscroll" title="de/XUL/Attribute/smoothscroll">smoothscroll</a></li> <li><a href="/de/XUL/Attribute/sort" title="de/XUL/Attribute/sort">sort</a></li> <li><a href="/de/XUL/Attribute/sortActive" title="de/XUL/Attribute/sortActive">sortActive</a></li> <li><a href="/de/XUL/Attribute/sortDirection" title="de/XUL/Attribute/sortDirection">sortDirection</a></li> <li><a href="/de/XUL/Attribute/sortResource" title="de/XUL/Attribute/sortResource">sortResource</a></li> <li><a href="/de/XUL/Attribute/sortResource2" title="de/XUL/Attribute/sortResource2">sortResource2</a></li> <li><a href="/de/XUL/Attribute/spellcheck" title="de/XUL/Attribute/spellcheck">spellcheck</a></li> <li><a href="/de/XUL/Attribute/src" title="de/XUL/Attribute/src">src</a></li> <li><a href="/de/XUL/Attribute/state" title="de/XUL/Attribute/state">state</a></li> <li><a href="/de/XUL/Attribute/statedatasource" title="de/XUL/Attribute/statedatasource">statedatasource</a></li> <li><a href="/de/XUL/Attribute/statusbar" title="de/XUL/Attribute/statusbar">statusbar</a></li> <li><a href="/de/XUL/Attribute/statustext" title="de/XUL/Attribute/statustext">statustext</a></li> <li><a href="/de/XUL/Attribute/style" title="de/XUL/Attribute/style">style</a></li> <li><a href="/de/XUL/Attribute/subject" title="de/XUL/Attribute/subject">subject</a></li> <li><a href="/de/XUL/Attribute/substate" title="de/XUL/Attribute/substate">substate</a></li> <li><a href="/de/XUL/Attribute/suppressonselect" title="de/XUL/Attribute/suppressonselect">suppressonselect</a></li> <li><a href="/de/XUL/Attribute/tabindex" title="de/XUL/Attribute/tabindex">tabindex</a></li> <li><a href="/de/XUL/Attribute/tabScrolling" title="de/XUL/Attribute/tabScrolling">tabScrolling</a></li> <li><a href="/de/XUL/Attribute/tabScrolling" title="de/XUL/Attribute/tabScrolling">tabscrolling</a></li> <li><a href="/de/XUL/Attribute/targets" title="de/XUL/Attribute/targets">targets</a></li> <li><a href="/de/XUL/Attribute/template" title="de/XUL/Attribute/template">template</a></li> <li><a href="/de/XUL/Attribute/timeout" title="de/XUL/Attribute/timeout">timeout</a></li> <li><a href="/de/XUL/Attribute/title" title="de/XUL/Attribute/title">title</a></li> <li><a href="/de/XUL/Attribute/toolbarname" title="de/XUL/Attribute/toolbarname">toolbarname</a></li> <li><a href="/de/XUL/Attribute/tooltip" title="de/XUL/Attribute/tooltip">tooltip</a></li> <li><a href="/de/XUL/Attribute/tooltiptext" title="de/XUL/Attribute/tooltiptext">tooltiptext</a></li> <li><a href="/de/XUL/Attribute/tooltiptextnew" title="de/XUL/Attribute/tooltiptextnew">tooltiptextnew</a></li> <li><a href="/de/XUL/Attribute/top" title="de/XUL/Attribute/top">top</a></li> <li><a href="/de/XUL/Attribute/type" title="de/XUL/Attribute/type">type</a></li> <li><a href="/de/XUL/Attribute/uri" title="de/XUL/Attribute/uri">uri</a></li> <li><a href="/de/XUL/Attribute/userAction" title="de/XUL/Attribute/userAction">userAction</a></li> <li><a href="/de/XUL/Attribute/validate" title="de/XUL/Attribute/validate">validate</a></li> <li><a href="/de/XUL/Attribute/value" title="de/XUL/Attribute/value">value</a></li> <li><a href="/De/XUL/Attribute/Var" title="de/XUL/Attribute/var">var</a></li> <li><a href="/de/XUL/Attribute/wait-cursor" title="de/XUL/Attribute/wait-cursor">wait-cursor</a></li> <li><a href="/de/XUL/Attribute/width" title="de/XUL/Attribute/width">width</a></li> <li><a href="/de/XUL/Attribute/windowtype" title="de/XUL/Attribute/windowtype">windowtype</a></li> <li><a href="/de/XUL/Attribute/wrap" title="de/XUL/Attribute/wrap">wrap</a></li> <li><a href="/de/XUL/Attribute/wraparound" title="de/XUL/Attribute/wraparound">wraparound</a></li>
+</ul>
diff --git a/files/de/archive/mozilla/xul/attribute/label/index.html b/files/de/archive/mozilla/xul/attribute/label/index.html
new file mode 100644
index 0000000000..d1bde8c8b8
--- /dev/null
+++ b/files/de/archive/mozilla/xul/attribute/label/index.html
@@ -0,0 +1,32 @@
+---
+title: label
+slug: Archive/Mozilla/XUL/Attribute/label
+tags:
+  - XUL Attribute
+  - XUL Referenz
+translation_of: Archive/Mozilla/XUL/Attribute/label
+---
+<div class="noinclude"><span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/de/docs/XUL_Referenz">XUL-Referenz Startseite</a></span></div>
+<dl> <dt><code id="a-label"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></dt> <dd>Typ: <em>string</em></dd> <dd>Die Beschriftung für das Element. Wird das Attribut nicht angegeben, so erscheint auch kein Beschriftungstext.</dd>
+</dl>
+<div class="noinclude">
+<h3 id="Siehe_auch" name="Siehe_auch">Siehe auch</h3>
+<ul> <li><a href="/de/XUL/Attribute/treeitem.label" title="de/XUL/Attribute/treeitem.label">treeitem.label</a>, <code><a href="/de/XUL/label" title="de/XUL/label">&lt;label&gt;</a></code> element</li>
+</ul>
+<h4 id="Beispiele_in_JavaScript" name="Beispiele_in_JavaScript">Beispiele in JavaScript</h4>
+<pre>&lt;label value="Whaw" id="the-big-label" command="the-big-button"/&gt;
+&lt;button id="the-big-button" label="Klick mich"
+	oncommand="alert(document.getElementById('the-big-label').value)"/&gt;
+
+&lt;label id="myLabel" value="Meine Beschriftung"/&gt;
+&lt;button label="Klick mich"
+	oncommand="document.getElementById('myLabel').setAttribute('value','Wert geändert');" /&gt;
+
+&lt;checkbox label="my Checkbox" id="myCheckboX"/&gt;
+&lt;button label="Weiterer Klick"
+	oncommand="document.getElementById('myCheckboX').setAttribute('label','Noch nicht angekreuzt');"/&gt;
+&lt;button label="Beschriftung des Ankreuzfeldes"
+	oncommand="alert( document.getElementById('myCheckboX').getAttribute('label') )"/&gt;
+</pre>
+
+</div>
diff --git a/files/de/archive/mozilla/xul/attribute/onchange/index.html b/files/de/archive/mozilla/xul/attribute/onchange/index.html
new file mode 100644
index 0000000000..ef1f0e8bd8
--- /dev/null
+++ b/files/de/archive/mozilla/xul/attribute/onchange/index.html
@@ -0,0 +1,14 @@
+---
+title: onchange
+slug: Archive/Mozilla/XUL/Attribute/Onchange
+tags:
+  - XUL Attribute
+  - XUL Referenz
+translation_of: Archive/Mozilla/XUL/Attribute/onchange
+---
+<div class="noinclude"><span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/de/docs/XUL_Referenz">XUL-Referenz Startseite</a></span></div>
+<dl> <dt><code id="a-onchange"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/onchange">onchange</a></code></dt> <dd>Typ: <em>script code</em></dd> <dd>Der Code im <code>onchange</code> Attribut wird aufgerufen, wenn sich der Wert des Elements geändert hat.</dd>
+</dl>
+<div class="noinclude">
+
+</div>
diff --git a/files/de/archive/mozilla/xul/attribute/prefpane.src/index.html b/files/de/archive/mozilla/xul/attribute/prefpane.src/index.html
new file mode 100644
index 0000000000..14c934c98f
--- /dev/null
+++ b/files/de/archive/mozilla/xul/attribute/prefpane.src/index.html
@@ -0,0 +1,25 @@
+---
+title: prefpane.src
+slug: Archive/Mozilla/XUL/Attribute/prefpane.src
+tags:
+  - XUL Attribute
+  - XUL Referenz
+translation_of: Archive/Mozilla/XUL/Attribute/prefpane.src
+---
+<div class="noinclude">
+  <span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/de/docs/XUL_Referenz">XUL-Referenz Startseite</a></span></div>
+<dl>
+  <dt>
+    <code id="a-prefpane.src"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/prefpane.src">src</a></code></dt>
+  <dd>
+    Typ: <em>Überlagerungs-URL</em></dd>
+  <dd>
+    Die URL des Inhalts des <code>prefpane</code>. Sofern nicht angegeben, wird der Inhalt des <code><a href="/de/docs/Mozilla/Tech/XUL/prefpane" title="prefpane">prefpane</a></code> Elements dargestellt.</dd>
+</dl>
+
+<div class="noinclude">
+  <h3 id="Siehe_auch" name="Siehe_auch">Siehe auch</h3>
+  <ul>
+    <li><a href="/de/docs/XUL/Attribute/src" title="XUL/Attribute/src">src</a></li>
+  </ul>
+</div>
diff --git a/files/de/archive/mozilla/xul/attribute/src/index.html b/files/de/archive/mozilla/xul/attribute/src/index.html
new file mode 100644
index 0000000000..875fa55f2d
--- /dev/null
+++ b/files/de/archive/mozilla/xul/attribute/src/index.html
@@ -0,0 +1,34 @@
+---
+title: src
+slug: Archive/Mozilla/XUL/Attribute/src
+tags:
+  - XUL Attribute
+  - XUL Referenz
+translation_of: Archive/Mozilla/XUL/Attribute/src
+---
+<div class="noinclude">
+  <span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/de/docs/XUL_Referenz">XUL-Referenz Startseite</a></span></div>
+<dl>
+  <dt>
+    <code id="a-src"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/src">src</a></code></dt>
+  <dd>
+    Typ: <em>URL</em></dd>
+  <dd>
+    Die URL des im Element anzuzeigenden Inhalts.</dd>
+</dl>
+<div class="noinclude">
+  <h3 id="Beispiele" name="Beispiele">Beispiele</h3>
+  <pre class="brush:xml">&lt;iframe id="content-body" src="http://www.mozilla.org/"/&gt;
+&lt;browser src="http://www.mozilla.org" flex="1"/&gt;
+&lt;image src='Firefoxlogo.png' width='135' height='130'/&gt;
+</pre>
+  <h3 id="Siehe_auch" name="Siehe_auch">Siehe auch</h3>
+  <ul>
+    <li><code id="a-prefpane.src"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/prefpane.src">prefpane.src</a></code></li>
+    <li><code id="a-treecell.src"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/treecell.src">treecell.src</a></code></li>
+    <li><code id="a-treecol.src"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/treecol.src">treecol.src</a></code></li>
+    <li><code id="a-script.src"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/script.src">script.src</a></code></li>
+    <li><code id="a-stringbundle.src"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/stringbundle.src">stringbundle.src</a></code></li>
+    <li><code id="a-checkbox.src"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/checkbox.src">checkbox.src</a></code></li>
+  </ul>
+</div>
diff --git a/files/de/archive/mozilla/xul/attribute/treecell.src/index.html b/files/de/archive/mozilla/xul/attribute/treecell.src/index.html
new file mode 100644
index 0000000000..0c1a44cd34
--- /dev/null
+++ b/files/de/archive/mozilla/xul/attribute/treecell.src/index.html
@@ -0,0 +1,17 @@
+---
+title: treecell.src
+slug: Archive/Mozilla/XUL/Attribute/treecell.src
+tags:
+  - XUL Attribute
+  - XUL Referenz
+translation_of: Archive/Mozilla/XUL/Attribute/treecell.src
+---
+<div class="noinclude"><span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/de/docs/XUL_Referenz">XUL-Referenz Startseite</a></span></div>
+<dl> <dt><code id="a-treecell.src"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/treecell.src">src</a></code></dt> <dd>Typ: <em>Bild-URL</em></dd> <dd>URL des Bildes, welches in der Zelle des Baums angezeigt werden soll. Sofern nicht angegeben, erscheint auch kein Bild. In der Zelle können sowohl Bild als auch Beschriftung angezeigt werden.</dd>
+</dl>
+<div class="noinclude">
+<h3 id="Siehe_auch" name="Siehe_auch">Siehe auch</h3>
+<ul> <li><a href="/de/XUL/Attribute/src" title="de/XUL/Attribute/src">src</a></li> <li><a href="/de/XUL/Attribute/treecol.src" title="de/XUL/Attribute/treecol.src">treecol.src</a></li>
+</ul>
+
+</div>
diff --git a/files/de/archive/mozilla/xul/attribute/treecol.src/index.html b/files/de/archive/mozilla/xul/attribute/treecol.src/index.html
new file mode 100644
index 0000000000..e94d0f7cbb
--- /dev/null
+++ b/files/de/archive/mozilla/xul/attribute/treecol.src/index.html
@@ -0,0 +1,17 @@
+---
+title: treecol.src
+slug: Archive/Mozilla/XUL/Attribute/treecol.src
+tags:
+  - XUL Attribute
+  - XUL Referenz
+translation_of: Archive/Mozilla/XUL/Attribute/treecol.src
+---
+<div class="noinclude"><span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/de/docs/XUL_Referenz">XUL-Referenz Startseite</a></span></div>
+<dl> <dt><code id="a-treecol.src"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/treecol.src">src</a></code></dt> <dd>Typ: <em>Bild-URL</em></dd> <dd>Um für das <code><a href="/de/docs/Mozilla/Tech/XUL/treecol" title="treecol">treecol</a></code> Element ein Bild für den Kopf, statt eines <code id="a-label"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> Attribut zu benutzen, kann dieses Attribut gesetzt werden. Im Kopf können nicht gleichzeitig Bild und Beschriftung angezeigt werden. Die URL eines Bildes, das als Spaltenkopf des Baums angezeigt wird, kann mit diesem Attribut festgelegt werden. Wird das Attribut nicht angegeben, erscheint kein Bild und es wird stattdessen die Beschriftung angezeigt. Damit das Bild erscheint, muss die Klasse <code><a href="https://developer.mozilla.org/de/docs/XUL/Style/treecol-image">treecol-image</a></code> für das <code><a href="/de/docs/Mozilla/Tech/XUL/treecol" title="treecol">treecol</a></code> Element gesetzt werden. Ein <code id="a-label"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> sollte dennoch für die Benutzung im Spaltenwähler angegeben werden, falls <code id="a-ignoreincolumnpicker"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/ignoreincolumnpicker">ignoreincolumnpicker</a></code> nicht <code>true</code> ist und <code id="a-hidecolumnpicker"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/hidecolumnpicker">hidecolumnpicker</a></code> für den <code><a href="/de/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code> ebenfalls nicht <code>true</code> ist .</dd>
+</dl>
+<div class="noinclude">
+<h3 id="Siehe_auch" name="Siehe_auch">Siehe auch</h3>
+<ul> <li><a href="/de/XUL/Attribute/src" title="de/XUL/Attribute/src">src</a></li>
+</ul>
+
+</div>
diff --git a/files/de/archive/mozilla/xul/attribute/var/index.html b/files/de/archive/mozilla/xul/attribute/var/index.html
new file mode 100644
index 0000000000..1ed49683ea
--- /dev/null
+++ b/files/de/archive/mozilla/xul/attribute/var/index.html
@@ -0,0 +1,14 @@
+---
+title: var
+slug: Archive/Mozilla/XUL/Attribute/Var
+tags:
+  - XUL Attribute
+  - XUL Referenz
+translation_of: Archive/Mozilla/XUL/Attribute/var
+---
+<div class="noinclude"><span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/de/docs/XUL_Referenz">XUL-Referenz Startseite</a></span></div>
+<dl> <dt><code id="a-var"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/var">var</a></code></dt> <dd>Typ: <em>string</em></dd> <dd>Dient der Variablenzuweisung innerhalb <code><a class="internal" href="/De/XUL/Assign" title="de/XUL/assign">assign</a></code> Tags; ansonsten wird es als Referenz zu einer Template Variable wie beispielsweise "?name" verwendet.</dd>
+</dl>
+<div class="noinclude">
+
+</div>
diff --git a/files/de/archive/mozilla/xul/bbox/index.html b/files/de/archive/mozilla/xul/bbox/index.html
new file mode 100644
index 0000000000..35dc11a250
--- /dev/null
+++ b/files/de/archive/mozilla/xul/bbox/index.html
@@ -0,0 +1,87 @@
+---
+title: Bbox
+slug: Archive/Mozilla/XUL/Bbox
+tags:
+  - XUL Elemente
+  - XUL Referenz
+translation_of: Archive/Mozilla/XUL/bbox
+---
+<div class="noinclude"><span class="breadcrumbs XULRef_breadcrumbs">
+ « <a href="/de/docs/XUL_Referenz">XUL Referenz Startseite</a>    [
+ <a href="#Beispiele">Beispiele</a> |
+ <a href="#Attribute">Attribute</a> |
+ <a href="#Eigenschaften">Eigenschaften</a> |
+ <a href="#Methoden">Methoden</a> |
+ <a href="#Verwandte_Themen">Verwandte Themen</a> ]
+</span></div>
+<p>Eine horizontale Box, die an der Grundlinie ausgerichtet ist. Gleichwertig zum <code><a href="/de/docs/Mozilla/Tech/XUL/hbox" title="hbox">hbox</a></code> Element mit einem <code id="a-align"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code> Attribut mit dem Wert <code>baseline</code>.</p>
+<h3 id="Beispiele">Beispiele</h3>
+<p>(Beispiel benötigt)</p>
+<h3 id="Attribute">Attribute</h3>
+<table style="border: 1px solid rgb(204, 204, 204); margin: 0 0 10px 10px; padding: 0 10px; background: rgb(238, 238, 238);">
+<tbody>
+<tr>
+<td><p><strong>Geerbt von XUL-Element</strong><br> <small>
+<code id="a-align"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code>,
+<code id="a-allowevents"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/allowevents">allowevents</a></code>,
+<code id="a-allownegativeassertions"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/allownegativeassertions">allownegativeassertions</a></code>,
+<code id="a-class"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/class">class</a></code>,
+<code id="a-coalesceduplicatearcs"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/coalesceduplicatearcs">coalesceduplicatearcs</a></code>,
+<code id="a-collapsed"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/collapsed">collapsed</a></code>,
+<code id="a-container"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/container">container</a></code>,
+<code id="a-containment"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/containment">containment</a></code>,
+<code id="a-context"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/context">context</a></code>,
+<code id="a-contextmenu"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/contextmenu">contextmenu</a></code>,
+<code id="a-datasources"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/datasources">datasources</a></code>,
+<code id="a-dir"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code>,
+<code id="a-empty"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/empty">empty</a></code>,
+<code id="a-equalsize"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/equalsize">equalsize</a></code>,
+<code id="a-flags"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/flags">flags</a></code>,
+<code id="a-flex"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code>,
+<code id="a-height"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/height">height</a></code>,
+<code id="a-hidden"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/hidden">hidden</a></code>,
+<code id="a-id"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code>,
+<code id="a-insertafter"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/insertafter">insertafter</a></code>,
+<code id="a-insertbefore"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/insertbefore">insertbefore</a></code>,
+<code id="a-left"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/left">left</a></code>,
+<code id="a-maxheight"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/maxheight">maxheight</a></code>,
+<code id="a-maxwidth"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/maxwidth">maxwidth</a></code>,
+<code id="a-menu"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/menu">menu</a></code>,
+<code id="a-minheight"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/minheight">minheight</a></code>,
+<code id="a-minwidth"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/minwidth">minwidth</a></code>,
+<code id="a-mousethrough"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/mousethrough">mousethrough</a></code>,
+<code id="a-observes"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/observes">observes</a></code>,
+<code id="a-ordinal"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/ordinal">ordinal</a></code>,
+<code id="a-orient"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code>,
+<code id="a-pack"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code>,
+<code id="a-persist"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/persist">persist</a></code>,
+<code id="a-popup"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/popup">popup</a></code>,
+<code id="a-position"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/position">position</a></code>,
+<code id="a-preference-editable"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/preference-editable">preference-editable</a></code>,
+<code id="a-querytype"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/querytype">querytype</a></code>,
+<code id="a-ref"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/ref">ref</a></code>,
+<code id="a-removeelement"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/removeelement">removeelement</a></code>,
+<code id="a-sortDirection"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/sortDirection">sortDirection</a></code>,
+<code id="a-sortResource"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/sortResource">sortResource</a></code>,
+<code id="a-sortResource2"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/sortResource2">sortResource2</a></code>,
+<code id="a-statustext"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/statustext">statustext</a></code>,
+<code id="a-style"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/style">style</a></code>,
+<code id="a-template"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/template">template</a></code>,
+<code id="a-tooltip"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/tooltip">tooltip</a></code>,
+<code id="a-tooltiptext"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/tooltiptext">tooltiptext</a></code>,
+<code id="a-top"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/top">top</a></code>,
+<code id="a-uri"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/uri">uri</a></code>,
+<code id="a-wait-cursor"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/wait-cursor">wait-cursor</a></code>,
+<code id="a-width"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/width">width</a></code> </small></p>
+</td>
+</tr>
+</tbody>
+</table>
+<h3 id="Properties" name="Properties">Eigenschaften</h3>
+<table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Geerbte Eigenschaften</strong><br> <small> <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/align">align</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/allowEvents">allowEvents</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/boxObject">boxObject</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/builder">builder</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/className">className</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/collapsed">collapsed</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/contextMenu">contextMenu</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/controllers">controllers</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/database">database</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/datasources">datasources</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/dir">dir</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/flex">flex</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/height">height</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/hidden">hidden</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/id">id</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/left">left</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/maxHeight">maxHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/maxWidth">maxWidth</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/menu">menu</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/minHeight">minHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/minWidth">minWidth</a></span></code>, , , , , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/observes">observes</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/ordinal">ordinal</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/orient">orient</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/pack">pack</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/persist">persist</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/ref">ref</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/resource">resource</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/statusText">statusText</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/style">style</a></span></code>, ,, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/tooltip">tooltip</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/tooltipText">tooltipText</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/top">top</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/width">width</a></span></code></small></p> </td> </tr> </tbody>
+</table>
+<h3 id="Methoden">Methoden</h3>
+<table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Geerbte Methoden</strong><br> <small><code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.addEventListener">element.addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.appendChild">node.appendChild()</a></code>, <span id="m-blur"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/click">click</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.cloneNode">node.cloneNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.compareDocumentPosition">node.compareDocumentPosition()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.dispatchEvent">element.dispatchEvent()</a></code>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/focus">focus</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttribute">element.getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNode">element.getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNodeNS">element.getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNS">element.getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getBoundingClientRect">element.getBoundingClientRect()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getClientRects">element.getClientRects()</a></code>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/getElementsByAttribute">getElementsByAttribute</a></code></span>, <span id="m-getElementsByAttributeNS"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/getElementsByAttributeNS">getElementsByAttributeNS</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByClassName">element.getElementsByClassName()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByTagName">element.getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByTagNameNS">element.getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.getFeature">node.getFeature()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.getUserData">node.getUserData()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.hasAttribute">element.hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.hasAttributeNS">element.hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.nodes.hasAttributes">nodes.hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.nodes.hasChildNodes">nodes.hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.insertBefore">node.insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isDefaultNamespace">node.isDefaultNamespace()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isEqualNode">node.isEqualNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isSameNode">node.isSameNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isSupported">node.isSupported()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.lookupNamespaceURI">node.lookupNamespaceURI()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.lookupPrefix">node.lookupPrefix()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.normalize">node.normalize()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.querySelector">element.querySelector()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.querySelectorAll">element.querySelectorAll()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttribute">element.removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttributeNode">element.removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttributeNS">element.removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.removeChild">node.removeChild()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeEventListener">element.removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.replaceChild">node.replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttribute">element.setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNode">element.setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNodeNS">element.setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNS">element.setAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.setUserData">node.setUserData()</a></code></small></p> </td> </tr> </tbody>
+</table>
+<h3 id="Verwandte_Themen">Verwandte Themen</h3>
+<p>TBD</p>
diff --git a/files/de/archive/mozilla/xul/binding/index.html b/files/de/archive/mozilla/xul/binding/index.html
new file mode 100644
index 0000000000..bc3dbe2daf
--- /dev/null
+++ b/files/de/archive/mozilla/xul/binding/index.html
@@ -0,0 +1,89 @@
+---
+title: binding
+slug: Archive/Mozilla/XUL/Binding
+tags:
+  - XUL Elemente
+  - XUL Referenz
+translation_of: Archive/Mozilla/XUL/binding
+---
+<div class="noinclude"><span class="breadcrumbs XULRef_breadcrumbs">
+ « <a href="/de/docs/XUL_Referenz">XUL Referenz Startseite</a>    [
+ <a href="#Beispiele">Beispiele</a> |
+ <a href="#Attribute">Attribute</a> |
+ <a href="#Eigenschaften">Eigenschaften</a> |
+ <a href="#Methoden">Methoden</a> |
+ <a href="#Verwandte_Themen">Verwandte Themen</a> ]
+</span></div>
+<p>Sollte in einem <code><a href="/de/docs/Mozilla/Tech/XUL/bindings" title="bindings">bindings</a></code> Element enthalten sein. Ein <code>binding</code> wird benutzt, um eine Variable an einen Node zu binden. Ähnlich zum Syntax des <code><a href="/de/docs/Mozilla/Tech/XUL/triple" title="triple">triple</a></code> Elements, können die Eigenschaften eines entsprechenden Nodes an einen Variablennamen gebunden werden. Dieser Name kann innerhalb einer Aktion einer Regel benutzt werden.</p>
+<dl> <dt>Eigenschaften</dt> <dd><a href="#p-object">object</a>, <a href="#p-predicate">predicate</a>, <a href="#p-subject">subject</a></dd>
+</dl>
+<h3 id="Beispiele">Beispiele</h3>
+<p>(Beispiel benötigt)</p>
+<h3 id="Attribute">Attribute</h3>
+<table style="border: 1px solid rgb(204, 204, 204); margin: 0 0 10px 10px; padding: 0 10px; background: rgb(238, 238, 238);">
+<tbody>
+<tr>
+<td><p><strong>Geerbt von XUL-Element</strong><br> <small>
+<code id="a-align"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code>,
+<code id="a-allowevents"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/allowevents">allowevents</a></code>,
+<code id="a-allownegativeassertions"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/allownegativeassertions">allownegativeassertions</a></code>,
+<code id="a-class"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/class">class</a></code>,
+<code id="a-coalesceduplicatearcs"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/coalesceduplicatearcs">coalesceduplicatearcs</a></code>,
+<code id="a-collapsed"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/collapsed">collapsed</a></code>,
+<code id="a-container"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/container">container</a></code>,
+<code id="a-containment"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/containment">containment</a></code>,
+<code id="a-context"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/context">context</a></code>,
+<code id="a-contextmenu"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/contextmenu">contextmenu</a></code>,
+<code id="a-datasources"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/datasources">datasources</a></code>,
+<code id="a-dir"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code>,
+<code id="a-empty"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/empty">empty</a></code>,
+<code id="a-equalsize"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/equalsize">equalsize</a></code>,
+<code id="a-flags"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/flags">flags</a></code>,
+<code id="a-flex"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code>,
+<code id="a-height"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/height">height</a></code>,
+<code id="a-hidden"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/hidden">hidden</a></code>,
+<code id="a-id"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code>,
+<code id="a-insertafter"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/insertafter">insertafter</a></code>,
+<code id="a-insertbefore"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/insertbefore">insertbefore</a></code>,
+<code id="a-left"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/left">left</a></code>,
+<code id="a-maxheight"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/maxheight">maxheight</a></code>,
+<code id="a-maxwidth"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/maxwidth">maxwidth</a></code>,
+<code id="a-menu"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/menu">menu</a></code>,
+<code id="a-minheight"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/minheight">minheight</a></code>,
+<code id="a-minwidth"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/minwidth">minwidth</a></code>,
+<code id="a-mousethrough"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/mousethrough">mousethrough</a></code>,
+<code id="a-observes"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/observes">observes</a></code>,
+<code id="a-ordinal"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/ordinal">ordinal</a></code>,
+<code id="a-orient"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code>,
+<code id="a-pack"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code>,
+<code id="a-persist"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/persist">persist</a></code>,
+<code id="a-popup"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/popup">popup</a></code>,
+<code id="a-position"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/position">position</a></code>,
+<code id="a-preference-editable"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/preference-editable">preference-editable</a></code>,
+<code id="a-querytype"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/querytype">querytype</a></code>,
+<code id="a-ref"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/ref">ref</a></code>,
+<code id="a-removeelement"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/removeelement">removeelement</a></code>,
+<code id="a-sortDirection"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/sortDirection">sortDirection</a></code>,
+<code id="a-sortResource"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/sortResource">sortResource</a></code>,
+<code id="a-sortResource2"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/sortResource2">sortResource2</a></code>,
+<code id="a-statustext"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/statustext">statustext</a></code>,
+<code id="a-style"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/style">style</a></code>,
+<code id="a-template"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/template">template</a></code>,
+<code id="a-tooltip"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/tooltip">tooltip</a></code>,
+<code id="a-tooltiptext"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/tooltiptext">tooltiptext</a></code>,
+<code id="a-top"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/top">top</a></code>,
+<code id="a-uri"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/uri">uri</a></code>,
+<code id="a-wait-cursor"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/wait-cursor">wait-cursor</a></code>,
+<code id="a-width"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/width">width</a></code> </small></p>
+</td>
+</tr>
+</tbody>
+</table>
+<h3 id="Eigenschaften">Eigenschaften</h3>
+<div id="p-object"></div> <div id="p-predicate"></div> <div id="p-subject"></div> <table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Geerbte Eigenschaften</strong><br> <small> <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/align">align</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/allowEvents">allowEvents</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/boxObject">boxObject</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/builder">builder</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/className">className</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/collapsed">collapsed</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/contextMenu">contextMenu</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/controllers">controllers</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/database">database</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/datasources">datasources</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/dir">dir</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/flex">flex</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/height">height</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/hidden">hidden</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/id">id</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/left">left</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/maxHeight">maxHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/maxWidth">maxWidth</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/menu">menu</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/minHeight">minHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/minWidth">minWidth</a></span></code>, , , , , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/observes">observes</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/ordinal">ordinal</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/orient">orient</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/pack">pack</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/persist">persist</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/ref">ref</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/resource">resource</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/statusText">statusText</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/style">style</a></span></code>, ,, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/tooltip">tooltip</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/tooltipText">tooltipText</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/top">top</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/width">width</a></span></code></small></p> </td> </tr> </tbody>
+</table>
+<h3 id="Methoden">Methoden</h3>
+<table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Geerbte Methoden</strong><br> <small><code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.addEventListener">element.addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.appendChild">node.appendChild()</a></code>, <span id="m-blur"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/click">click</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.cloneNode">node.cloneNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.compareDocumentPosition">node.compareDocumentPosition()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.dispatchEvent">element.dispatchEvent()</a></code>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/focus">focus</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttribute">element.getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNode">element.getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNodeNS">element.getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNS">element.getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getBoundingClientRect">element.getBoundingClientRect()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getClientRects">element.getClientRects()</a></code>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/getElementsByAttribute">getElementsByAttribute</a></code></span>, <span id="m-getElementsByAttributeNS"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/getElementsByAttributeNS">getElementsByAttributeNS</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByClassName">element.getElementsByClassName()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByTagName">element.getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByTagNameNS">element.getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.getFeature">node.getFeature()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.getUserData">node.getUserData()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.hasAttribute">element.hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.hasAttributeNS">element.hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.nodes.hasAttributes">nodes.hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.nodes.hasChildNodes">nodes.hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.insertBefore">node.insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isDefaultNamespace">node.isDefaultNamespace()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isEqualNode">node.isEqualNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isSameNode">node.isSameNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isSupported">node.isSupported()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.lookupNamespaceURI">node.lookupNamespaceURI()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.lookupPrefix">node.lookupPrefix()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.normalize">node.normalize()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.querySelector">element.querySelector()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.querySelectorAll">element.querySelectorAll()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttribute">element.removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttributeNode">element.removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttributeNS">element.removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.removeChild">node.removeChild()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeEventListener">element.removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.replaceChild">node.replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttribute">element.setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNode">element.setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNodeNS">element.setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNS">element.setAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.setUserData">node.setUserData()</a></code></small></p> </td> </tr> </tbody>
+</table>
+<h3 id="Verwandte_Themen">Verwandte Themen</h3>
+<p>TBD</p>
diff --git a/files/de/archive/mozilla/xul/box/index.html b/files/de/archive/mozilla/xul/box/index.html
new file mode 100644
index 0000000000..b479153f5c
--- /dev/null
+++ b/files/de/archive/mozilla/xul/box/index.html
@@ -0,0 +1,101 @@
+---
+title: box
+slug: Archive/Mozilla/XUL/Box
+tags:
+  - XUL Elemente
+  - XUL Referenz
+translation_of: Archive/Mozilla/XUL/box
+---
+<div class="noinclude"><span class="breadcrumbs XULRef_breadcrumbs">
+ « <a href="/de/docs/XUL_Referenz">XUL Referenz Startseite</a>    [
+ <a href="#Beispiele">Beispiele</a> |
+ <a href="#Attribute">Attribute</a> |
+ <a href="#Eigenschaften">Eigenschaften</a> |
+ <a href="#Methoden">Methoden</a> |
+ <a href="#Verwandte_Themen">Verwandte Themen</a> ]
+</span></div>
+<p>Ein Containerelement, welches eine beliebige Anzahl an Kindelementen enthalten kann. Falls das <code>box</code> Element ein <code id="a-orient"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code> Attribut besitzt, das auf <code>horizontal</code> gesetzt ist, werden die Kindelemente von links nach rechts, in der Reihenfolge, in der sie in im <code>box</code> Element erscheinen, angelegt. Falls <code id="a-orient"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code> auf <code>vertical</code> gesetzt ist, werden die Kindelemente von oben nach unten angelegt. Kindelemente überlappen sich dabei nicht. Die standardmäßige Ausrichtung ist <code>horizontal</code>.</p>
+<p>Weitere Informationen sind im <a href="/de/XUL_Tutorial/Das_Box-Modell" title="de/XUL Tutorial/Das Box-Modell">XUL Tutorial</a> verfügbar.</p>
+<h3 id="Examples" name="Examples">Beispiele</h3>
+<div class="float-right"><img alt="Image:XUL_ref_box.png" class="internal" src="/@api/deki/files/446/=XUL_ref_box.png"></div>
+<pre>&lt;box orient="horizontal"&gt;
+  &lt;label value="Zero"/&gt;
+  &lt;box orient="vertical"&gt;
+    &lt;label value="One"/&gt;
+    &lt;label value="Two"/&gt;
+  &lt;/box&gt;
+  &lt;box orient="horizontal"&gt;
+    &lt;label value="Three"/&gt;
+    &lt;label value="Four"/&gt;
+  &lt;/box&gt;
+&lt;/box&gt;
+</pre>
+<h3 id="Attributes" name="Attributes">Attribute</h3>
+<table style="border: 1px solid rgb(204, 204, 204); margin: 0 0 10px 10px; padding: 0 10px; background: rgb(238, 238, 238);">
+<tbody>
+<tr>
+<td><p><strong>Geerbt von XUL-Element</strong><br> <small>
+<code id="a-align"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code>,
+<code id="a-allowevents"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/allowevents">allowevents</a></code>,
+<code id="a-allownegativeassertions"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/allownegativeassertions">allownegativeassertions</a></code>,
+<code id="a-class"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/class">class</a></code>,
+<code id="a-coalesceduplicatearcs"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/coalesceduplicatearcs">coalesceduplicatearcs</a></code>,
+<code id="a-collapsed"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/collapsed">collapsed</a></code>,
+<code id="a-container"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/container">container</a></code>,
+<code id="a-containment"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/containment">containment</a></code>,
+<code id="a-context"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/context">context</a></code>,
+<code id="a-contextmenu"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/contextmenu">contextmenu</a></code>,
+<code id="a-datasources"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/datasources">datasources</a></code>,
+<code id="a-dir"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code>,
+<code id="a-empty"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/empty">empty</a></code>,
+<code id="a-equalsize"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/equalsize">equalsize</a></code>,
+<code id="a-flags"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/flags">flags</a></code>,
+<code id="a-flex"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code>,
+<code id="a-height"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/height">height</a></code>,
+<code id="a-hidden"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/hidden">hidden</a></code>,
+<code id="a-id"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code>,
+<code id="a-insertafter"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/insertafter">insertafter</a></code>,
+<code id="a-insertbefore"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/insertbefore">insertbefore</a></code>,
+<code id="a-left"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/left">left</a></code>,
+<code id="a-maxheight"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/maxheight">maxheight</a></code>,
+<code id="a-maxwidth"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/maxwidth">maxwidth</a></code>,
+<code id="a-menu"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/menu">menu</a></code>,
+<code id="a-minheight"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/minheight">minheight</a></code>,
+<code id="a-minwidth"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/minwidth">minwidth</a></code>,
+<code id="a-mousethrough"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/mousethrough">mousethrough</a></code>,
+<code id="a-observes"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/observes">observes</a></code>,
+<code id="a-ordinal"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/ordinal">ordinal</a></code>,
+<code id="a-orient"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code>,
+<code id="a-pack"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code>,
+<code id="a-persist"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/persist">persist</a></code>,
+<code id="a-popup"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/popup">popup</a></code>,
+<code id="a-position"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/position">position</a></code>,
+<code id="a-preference-editable"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/preference-editable">preference-editable</a></code>,
+<code id="a-querytype"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/querytype">querytype</a></code>,
+<code id="a-ref"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/ref">ref</a></code>,
+<code id="a-removeelement"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/removeelement">removeelement</a></code>,
+<code id="a-sortDirection"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/sortDirection">sortDirection</a></code>,
+<code id="a-sortResource"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/sortResource">sortResource</a></code>,
+<code id="a-sortResource2"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/sortResource2">sortResource2</a></code>,
+<code id="a-statustext"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/statustext">statustext</a></code>,
+<code id="a-style"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/style">style</a></code>,
+<code id="a-template"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/template">template</a></code>,
+<code id="a-tooltip"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/tooltip">tooltip</a></code>,
+<code id="a-tooltiptext"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/tooltiptext">tooltiptext</a></code>,
+<code id="a-top"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/top">top</a></code>,
+<code id="a-uri"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/uri">uri</a></code>,
+<code id="a-wait-cursor"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/wait-cursor">wait-cursor</a></code>,
+<code id="a-width"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/width">width</a></code> </small></p>
+</td>
+</tr>
+</tbody>
+</table>
+<h3 id="Properties" name="Properties">Eigenschaften</h3>
+<table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Geerbte Eigenschaften</strong><br> <small> <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/align">align</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/allowEvents">allowEvents</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/boxObject">boxObject</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/builder">builder</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/className">className</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/collapsed">collapsed</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/contextMenu">contextMenu</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/controllers">controllers</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/database">database</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/datasources">datasources</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/dir">dir</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/flex">flex</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/height">height</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/hidden">hidden</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/id">id</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/left">left</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/maxHeight">maxHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/maxWidth">maxWidth</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/menu">menu</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/minHeight">minHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/minWidth">minWidth</a></span></code>, , , , , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/observes">observes</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/ordinal">ordinal</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/orient">orient</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/pack">pack</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/persist">persist</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/ref">ref</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/resource">resource</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/statusText">statusText</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/style">style</a></span></code>, ,, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/tooltip">tooltip</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/tooltipText">tooltipText</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/top">top</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/width">width</a></span></code></small></p> </td> </tr> </tbody>
+</table>
+<h3 id="Methods" name="Methods">Methoden</h3>
+<table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Geerbte Methoden</strong><br> <small><code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.addEventListener">element.addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.appendChild">node.appendChild()</a></code>, <span id="m-blur"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/click">click</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.cloneNode">node.cloneNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.compareDocumentPosition">node.compareDocumentPosition()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.dispatchEvent">element.dispatchEvent()</a></code>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/focus">focus</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttribute">element.getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNode">element.getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNodeNS">element.getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNS">element.getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getBoundingClientRect">element.getBoundingClientRect()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getClientRects">element.getClientRects()</a></code>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/getElementsByAttribute">getElementsByAttribute</a></code></span>, <span id="m-getElementsByAttributeNS"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/getElementsByAttributeNS">getElementsByAttributeNS</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByClassName">element.getElementsByClassName()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByTagName">element.getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByTagNameNS">element.getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.getFeature">node.getFeature()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.getUserData">node.getUserData()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.hasAttribute">element.hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.hasAttributeNS">element.hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.nodes.hasAttributes">nodes.hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.nodes.hasChildNodes">nodes.hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.insertBefore">node.insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isDefaultNamespace">node.isDefaultNamespace()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isEqualNode">node.isEqualNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isSameNode">node.isSameNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isSupported">node.isSupported()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.lookupNamespaceURI">node.lookupNamespaceURI()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.lookupPrefix">node.lookupPrefix()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.normalize">node.normalize()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.querySelector">element.querySelector()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.querySelectorAll">element.querySelectorAll()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttribute">element.removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttributeNode">element.removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttributeNS">element.removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.removeChild">node.removeChild()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeEventListener">element.removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.replaceChild">node.replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttribute">element.setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNode">element.setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNodeNS">element.setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNS">element.setAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.setUserData">node.setUserData()</a></code></small></p> </td> </tr> </tbody>
+</table>
+<h3 id="Related" name="Related">Verwandte Themen</h3>
+<dl> <dt>Elemente</dt> <dd><code><a href="/de/docs/Mozilla/Tech/XUL/vbox" title="vbox">vbox</a></code>, <code><a href="/de/docs/Mozilla/Tech/XUL/hbox" title="hbox">hbox</a></code></dd>
+</dl>
diff --git a/files/de/archive/mozilla/xul/colorpicker/index.html b/files/de/archive/mozilla/xul/colorpicker/index.html
new file mode 100644
index 0000000000..fa6c6bf533
--- /dev/null
+++ b/files/de/archive/mozilla/xul/colorpicker/index.html
@@ -0,0 +1,77 @@
+---
+title: colorpicker
+slug: Archive/Mozilla/XUL/Colorpicker
+tags:
+  - XUL Elemente
+  - XUL Referenz
+translation_of: Archive/Mozilla/XUL/colorpicker
+---
+<div class="noinclude"><span class="breadcrumbs XULRef_breadcrumbs">
+ « <a href="/de/docs/XUL_Referenz">XUL Referenz Startseite</a>    [
+ <a href="#Beispiele">Beispiele</a> |
+ <a href="#Attribute">Attribute</a> |
+ <a href="#Eigenschaften">Eigenschaften</a> |
+ <a href="#Methoden">Methoden</a> |
+ <a href="#Verwandte_Themen">Verwandte Themen</a> ]
+</span></div>
+<p>Eine Farbpalette aus der ein Anwender durch Anklicken auf eine der Gitterzellen wählen kann.</p>
+<dl> <dt>Attribute</dt> <dd><a href="#a-disabled">disabled</a>, <a href="#a-color">color</a>, <a href="#a-onchange">onchange</a>, <a href="#a-preference">preference</a>, <a href="#a-tabindex">tabindex</a>, <a href="#a-colorpicker.type">type</a></dd>
+</dl>
+<dl> <dt>Eigenschaften</dt> <dd><a href="#p-accessibleType">accessibleType</a>, <a href="#p-color">color</a>, <a href="#p-disabled">disabled</a>, <a href="#p-colorpicker.open">open</a>, <a href="#p-tabIndex">tabIndex</a></dd>
+</dl>
+<h3 id="Beispiele">Beispiele</h3>
+<p><img alt="Image:XUL_REF_rgb.gif" class="internal" src="/@api/deki/files/430/=XUL_REF_rgb.gif"></p>
+<pre>&lt;colorpicker/&gt;
+</pre>
+<h3 id="Attribute">Attribute</h3>
+<p> </p><div id="a-disabled">
+
+<dl> <dt><code id="a-disabled"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code></dt> <dd>Typ: <em>boolean</em></dd> <dd>Kennzeichnet, ob ein Element deaktiviert ist oder nicht. Wenn das Element auf  <code>true</code> gesetzt ist, ist das Element deaktiviert. Deaktivierte Elemente sind gewöhnlich mit einem grauen Text dargestellt. Wenn ein Element deaktiviert ist, wird es auf Anwenderaktionen nicht reagieren, es kann den Fokus nicht erlangen und das <code>command</code> Ereignis wird nicht ausgelöst. Das Element wird allerdings noch auf Mausereignisse antworten. Um das Element zu aktivieren, ist es besser das Attribut zu entfernen als es auf den Wert <code>false</code> zu setzen. Um den Wert dieses Attributs mittels JavaScript zu setzen oder abzurufen, sollte besser die <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/disabled">disabled</a></span></code> Eigenschaft verwendet werden.</dd>
+</dl>
+
+
+</div> <div id="a-color">
+
+<dl> <dt><code id="a-color"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/color">color</a></code></dt> <dd>Typ: <em>color string</em></dd> <dd>Die aktuell ausgewählte Farbe. Diese wird geändert, sobald der Anwender eine Farbe auswählt. Man kann einen String in der Form #RRGGBB der Eigenschaft zuweisen, um die gewählte Farbe zu ändern.</dd>
+</dl>
+
+</div> <div id="a-onchange">
+
+<dl> <dt><code id="a-onchange"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/onchange">onchange</a></code></dt> <dd>Typ: <em>script code</em></dd> <dd>Der Code im <code>onchange</code> Attribut wird aufgerufen, wenn sich der Wert des Elements geändert hat.</dd>
+</dl>
+
+</div> <div id="a-preference">
+
+
+<dl>
+ <dt><code id="a-preference"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/preference">preference</a></code></dt>
+ <dd>Type: <em>id</em></dd>
+ <dd>Connects the element to a corresponding <code><a href="/en-US/docs/Mozilla/Tech/XUL/preference" title="preference">preference</a></code>. This attribute only has any effect when used inside a <code><a href="/en-US/docs/Mozilla/Tech/XUL/prefwindow" title="prefwindow">prefwindow</a></code>. More information is available in the <a href="../../../../en/Preferences_System" rel="internal">Preferences System</a> article.</dd>
+</dl>
+</div> <div id="a-tabindex">
+
+
+<dl>
+ <dt><code id="a-tabindex"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/tabindex">tabindex</a></code></dt>
+ <dd>Type: <em>integer</em></dd>
+ <dd>The tab order of the element. The tab order is the order in which the focus is moved when the user presses the "<code>tab</code>" key. Elements with a higher <code>tabindex</code> are later in the tab sequence.</dd>
+</dl>
+</div> <div id="a-colorpicker.type">
+
+
+<dl>
+ <dt><code id="a-colorpicker.type"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/colorpicker.type">type</a></code></dt>
+ <dd>Type: <em>string</em></dd>
+ <dd>If this attribute is not present, the colorpicker is displayed inside the window. If this is set to the text <code>button</code>, the colorpicker is displayed as a button. When the user clicks the button, a popup appears for the user to select a color.</dd>
+</dl>
+</div>
+<h3 id="Eigenschaften">Eigenschaften</h3>
+<p> </p><div id="p-accessibleType"></div> <div id="p-color"></div> <div id="p-disabled"></div> <div id="p-colorpicker.open"></div> <div id="p-tabIndex"></div>
+<h3 id="Methoden">Methoden</h3>
+<table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Geerbte Methoden</strong><br> <small><code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.addEventListener">element.addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.appendChild">node.appendChild()</a></code>, <span id="m-blur"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/click">click</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.cloneNode">node.cloneNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.compareDocumentPosition">node.compareDocumentPosition()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.dispatchEvent">element.dispatchEvent()</a></code>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/focus">focus</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttribute">element.getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNode">element.getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNodeNS">element.getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNS">element.getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getBoundingClientRect">element.getBoundingClientRect()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getClientRects">element.getClientRects()</a></code>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/getElementsByAttribute">getElementsByAttribute</a></code></span>, <span id="m-getElementsByAttributeNS"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/getElementsByAttributeNS">getElementsByAttributeNS</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByClassName">element.getElementsByClassName()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByTagName">element.getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByTagNameNS">element.getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.getFeature">node.getFeature()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.getUserData">node.getUserData()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.hasAttribute">element.hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.hasAttributeNS">element.hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.nodes.hasAttributes">nodes.hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.nodes.hasChildNodes">nodes.hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.insertBefore">node.insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isDefaultNamespace">node.isDefaultNamespace()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isEqualNode">node.isEqualNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isSameNode">node.isSameNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isSupported">node.isSupported()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.lookupNamespaceURI">node.lookupNamespaceURI()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.lookupPrefix">node.lookupPrefix()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.normalize">node.normalize()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.querySelector">element.querySelector()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.querySelectorAll">element.querySelectorAll()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttribute">element.removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttributeNode">element.removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttributeNS">element.removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.removeChild">node.removeChild()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeEventListener">element.removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.replaceChild">node.replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttribute">element.setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNode">element.setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNodeNS">element.setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNS">element.setAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.setUserData">node.setUserData()</a></code></small></p> </td> </tr> </tbody>
+</table>
+<h3 id="Verwandte_Themen">Verwandte Themen</h3>
+<dl> <dt>Schnittstellen</dt> <dd><a href="/de/NsIDOMXULControlElement" title="de/NsIDOMXULControlElement">nsIDOMXULControlElement</a></dd>
+</dl>
+<h3 id="Bugs">Bugs</h3>
+<p>Das <code>onchange</code> Event funktioniert nur, wenn das <code>type</code> Attribut auf "<code>button</code>" festgelegt wurde. Die Verwendung von <code>onclick</code> bietet sich daher an, wenn mit mit dem losen Colorpicker gearbeitet wird und die gerade ausgewählte Farbe benötigt wird, um z.B. in einer &lt;textbox&gt; angezeigt zu werden.</p>
diff --git a/files/de/archive/mozilla/xul/eigenschaften/index.html b/files/de/archive/mozilla/xul/eigenschaften/index.html
new file mode 100644
index 0000000000..f152ae7489
--- /dev/null
+++ b/files/de/archive/mozilla/xul/eigenschaften/index.html
@@ -0,0 +1,14 @@
+---
+title: Eigenschaften
+slug: Archive/Mozilla/XUL/Eigenschaften
+tags:
+  - XUL Eigenschaften
+  - XUL Referenz
+translation_of: Archive/Mozilla/XUL/Property
+---
+<p><span class="breadcrumbs XULRefProp_breadcrumbs">« <a href="/de/docs/XUL_Referenz" title="XUL_Referenz">XUL-Referenz Startseite</a></span></p>
+<ul> <li><a href="/de/XUL/Eigenschaft/accessible" title="de/XUL/Eigenschaft/accessible">accessible</a></li> <li><a href="/de/XUL/Eigenschaft/accessibleType" title="de/XUL/Eigenschaft/accessibleType">accessibleType</a></li> <li><a href="/de/XUL/Eigenschaft/accessKey" title="de/XUL/Eigenschaft/accessKey">accessKey</a></li> <li><a href="/de/XUL/Eigenschaft/align" title="de/XUL/Eigenschaft/align">align</a></li> <li><a href="/de/XUL/Eigenschaft/allNotifications" title="de/XUL/Eigenschaft/allNotifications">allNotifications</a></li> <li><a href="/de/XUL/Eigenschaft/allowEvents" title="de/XUL/Eigenschaft/allowEvents">allowEvents</a></li> <li><a href="/de/XUL/Eigenschaft/alwaysOpenPopup" title="de/XUL/Eigenschaft/alwaysOpenPopup">alwaysOpenPopup</a></li> <li><a href="/de/XUL/Eigenschaft/amIndicator" title="de/XUL/Eigenschaft/amIndicator">amIndicator</a></li> <li><a href="/de/XUL/Eigenschaft/appLocale" title="de/XUL/Eigenschaft/appLocale">appLocale</a></li> <li><a href="/de/XUL/Eigenschaft/autoCheck" title="de/XUL/Eigenschaft/autoCheck">autoCheck</a></li> <li><a href="/de/XUL/Eigenschaft/autoFill" title="de/XUL/Eigenschaft/autoFill">autoFill</a></li> <li><a href="/de/XUL/Eigenschaft/autoFillAfterMatch" title="de/XUL/Eigenschaft/autoFillAfterMatch">autoFillAfterMatch</a></li> <li><a href="/de/XUL/Eigenschaft/boxObject" title="de/XUL/Eigenschaft/boxObject">boxObject</a></li> <li><a href="/de/XUL/Eigenschaft/browsers" title="de/XUL/Eigenschaft/browsers">browsers</a></li> <li><a href="/de/XUL/Eigenschaft/builder" title="de/XUL/Eigenschaft/builder">builder</a></li> <li><a href="/de/XUL/Eigenschaft/builderView" title="de/XUL/Eigenschaft/builderView">builderView</a></li> <li><a href="/de/XUL/Eigenschaft/buttons" title="de/XUL/Eigenschaft/buttons">buttons</a></li> <li><a href="/de/XUL/Eigenschaft/canAdvance" title="de/XUL/Eigenschaft/canAdvance">canAdvance</a></li> <li><a href="/de/XUL/Eigenschaft/canGoBack" title="de/XUL/Eigenschaft/canGoBack">canGoBack</a></li> <li><a href="/de/XUL/Eigenschaft/canGoForward" title="de/XUL/Eigenschaft/canGoForward">canGoForward</a></li> <li><a href="/de/XUL/Eigenschaft/canRewind" title="de/XUL/Eigenschaft/canRewind">canRewind</a></li> <li><a href="/de/XUL/Eigenschaft/checked" title="de/XUL/Eigenschaft/checked">checked</a></li> <li><a href="/de/XUL/Eigenschaft/checkState" title="de/XUL/Eigenschaft/checkState">checkState</a></li> <li><a href="/de/XUL/Eigenschaft/child" title="de/XUL/Eigenschaft/child">child</a></li> <li><a href="/de/XUL/Eigenschaft/children" title="de/XUL/Eigenschaft/children">children</a></li> <li><a href="/de/XUL/Eigenschaft/className" title="de/XUL/Eigenschaft/className">className</a></li> <li><a href="/de/XUL/Eigenschaft/clickSelectsAll" title="de/XUL/Eigenschaft/clickSelectsAll">clickSelectsAll</a></li> <li><a class="internal" href="/de/XUL/Eigenschaft/clientHeight" title="de/XUL/Eigenschaft/clientHeight">clientHeight</a> </li> <li><a class="internal" href="/de/XUL/Eigenschaft/clientWidth" title="de/XUL/Eigenschaft/clientWidth">clientWidth</a> </li> <li><a href="/de/XUL/Eigenschaft/collapsed" title="de/XUL/Eigenschaft/collapsed">collapsed</a></li> <li><a href="/de/XUL/Eigenschaft/color" title="de/XUL/Eigenschaft/color">color</a></li> <li><a href="/de/XUL/Eigenschaft/columns" title="de/XUL/Eigenschaft/columns">columns</a></li> <li><a href="/de/XUL/Eigenschaft/command" title="de/XUL/Eigenschaft/command">command</a></li> <li><a href="/de/XUL/Eigenschaft/commandManager" title="de/XUL/Eigenschaft/commandManager">commandManager</a></li> <li><a href="/de/XUL/Eigenschaft/completeDefaultIndex" title="de/XUL/Eigenschaft/completeDefaultIndex">completeDefaultIndex</a></li> <li><a href="/de/XUL/Eigenschaft/container" title="de/XUL/Eigenschaft/container">container</a></li> <li><a href="/de/XUL/Eigenschaft/contentDocument" title="de/XUL/Eigenschaft/contentDocument">contentDocument</a></li> <li><a href="/de/XUL/Eigenschaft/contentPrincipal" title="de/XUL/Eigenschaft/contentPrincipal">contentPrincipal</a></li> <li><a href="/de/XUL/Eigenschaft/contentTitle" title="de/XUL/Eigenschaft/contentTitle">contentTitle</a></li> <li><a href="/de/XUL/Eigenschaft/contentView" title="de/XUL/Eigenschaft/contentView">contentView</a></li> <li><a href="/de/XUL/Eigenschaft/contentViewerEdit" title="de/XUL/Eigenschaft/contentViewerEdit">contentViewerEdit</a></li> <li><a href="/de/XUL/Eigenschaft/contentViewerFile" title="de/XUL/Eigenschaft/contentViewerFile">contentViewerFile</a></li> <li><a href="/de/XUL/Eigenschaft/contentWindow" title="de/XUL/Eigenschaft/contentWindow">contentWindow</a></li> <li><a href="/de/XUL/Eigenschaft/contextMenu" title="de/XUL/Eigenschaft/contextMenu">contextMenu</a></li> <li><a href="/de/XUL/Eigenschaft/control" title="de/XUL/Eigenschaft/control">control</a></li> <li><a href="/de/XUL/Eigenschaft/controller" title="de/XUL/Eigenschaft/controller">controller</a></li> <li><a href="/de/XUL/Eigenschaft/controllers" title="de/XUL/Eigenschaft/controllers">controllers</a></li> <li><a href="/de/XUL/Eigenschaft/crop" title="de/XUL/Eigenschaft/crop">crop</a></li> <li><a href="/de/XUL/Eigenschaft/current" title="de/XUL/Eigenschaft/current">current</a></li> <li><a href="/de/XUL/Eigenschaft/currentIndex" title="de/XUL/Eigenschaft/currentIndex">currentIndex</a></li> <li><a href="/de/XUL/Eigenschaft/currentItem" title="de/XUL/Eigenschaft/currentItem">currentItem</a></li> <li><a href="/de/XUL/Eigenschaft/currentNotification" title="de/XUL/Eigenschaft/currentNotification">currentNotification</a></li> <li><a href="/de/XUL/Eigenschaft/currentPage" title="de/XUL/Eigenschaft/currentPage">currentPage</a></li> <li><a href="/de/XUL/Eigenschaft/currentPane" title="de/XUL/Eigenschaft/currentPane">currentPane</a></li> <li><a href="/de/XUL/Eigenschaft/currentSet" title="de/XUL/Eigenschaft/currentSet">currentSet</a></li> <li><a href="/de/XUL/Eigenschaft/currentURI" title="de/XUL/Eigenschaft/currentURI">currentURI</a></li> <li><a href="/de/XUL/Eigenschaft/customToolbarCount" title="de/XUL/Eigenschaft/customToolbarCount">customToolbarCount</a></li> <li><a href="/de/XUL/Eigenschaft/database" title="de/XUL/Eigenschaft/database">database</a></li> <li><a href="/de/XUL/Eigenschaft/datasources" title="de/XUL/Eigenschaft/datasources">datasources</a></li> <li><a href="/de/XUL/Eigenschaft/date" title="de/XUL/Eigenschaft/date">date</a></li> <li><a href="/de/XUL/Eigenschaft/dateLeadingZero" title="de/XUL/Eigenschaft/dateLeadingZero">dateLeadingZero</a></li> <li><a href="/de/XUL/Eigenschaft/dateValue" title="de/XUL/Eigenschaft/dateValue">dateValue</a></li> <li><a href="/de/XUL/Eigenschaft/decimalPlaces" title="de/XUL/Eigenschaft/decimalPlaces">decimalPlaces</a></li> <li><a href="/de/XUL/Eigenschaft/decimalSymbol" title="de/XUL/Eigenschaft/decimalSymbol">decimalSymbol</a></li> <li><a href="/de/XUL/Eigenschaft/defaultButton" title="de/XUL/Eigenschaft/defaultButton">defaultButton</a></li> <li><a href="/de/XUL/Eigenschaft/defaultValue" title="de/XUL/Eigenschaft/defaultValue">defaultValue</a></li> <li><a href="/de/XUL/Eigenschaft/description" title="de/XUL/Eigenschaft/description">description</a></li> <li><a href="/de/XUL/Eigenschaft/dir" title="de/XUL/Eigenschaft/dir">dir</a></li> <li><a href="/de/XUL/Eigenschaft/disableAutocomplete" title="de/XUL/Eigenschaft/disableAutocomplete">disableAutocomplete</a></li> <li><a href="/de/XUL/Eigenschaft/disableAutocomplete" title="de/XUL/Eigenschaft/disableAutocomplete">disableAutoComplete</a></li> <li><a href="/de/XUL/Eigenschaft/disableautoselect" title="de/XUL/Eigenschaft/disableautoselect">disableautoselect</a></li> <li><a href="/de/XUL/Eigenschaft/disabled" title="de/XUL/Eigenschaft/disabled">disabled</a></li> <li><a href="/de/XUL/Eigenschaft/disableKeyNavigation" title="de/XUL/Eigenschaft/disableKeyNavigation">disableKeyNavigation</a></li> <li><a href="/de/XUL/Eigenschaft/dlgType" title="de/XUL/Eigenschaft/dlgType">dlgType</a></li> <li><a href="/de/XUL/Eigenschaft/docShell" title="de/XUL/Eigenschaft/docShell">docShell</a></li> <li><a href="/de/XUL/Eigenschaft/documentCharsetInfo" title="de/XUL/Eigenschaft/documentCharsetInfo">documentCharsetInfo</a></li> <li><a href="/de/XUL/Eigenschaft/editable" title="de/XUL/Eigenschaft/editable">editable</a></li> <li><a href="/de/XUL/Eigenschaft/editingColumn" title="de/XUL/Eigenschaft/editingColumn">editingColumn</a></li> <li><a href="/de/XUL/Eigenschaft/editingRow" title="de/XUL/Eigenschaft/editingRow">editingRow</a></li> <li><a href="/de/XUL/Eigenschaft/editingSession" title="de/XUL/Eigenschaft/editingSession">editingSession</a></li> <li><a href="/de/XUL/Eigenschaft/editor" title="de/XUL/Eigenschaft/editor">editor</a></li> <li><a href="/de/XUL/Eigenschaft/editortype" title="de/XUL/Eigenschaft/editortype">editortype</a></li> <li><a href="/de/XUL/Eigenschaft/emptyText" title="de/XUL/Eigenschaft/emptyText">emptyText</a>  <span class="inlineIndicator deprecated deprecatedInline" title="(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)">Unerwünscht Gecko 2</span></li> <li><a href="/de/XUL/Eigenschaft/enableColumnDrag" title="de/XUL/Eigenschaft/enableColumnDrag">enableColumnDrag</a></li> <li><a href="/de/XUL/Eigenschaft/eventNode" title="de/XUL/Eigenschaft/eventNode">eventNode</a></li> <li><a href="/de/XUL/Eigenschaft/firstOrdinalColumn" title="de/XUL/Eigenschaft/firstOrdinalColumn">firstOrdinalColumn</a></li> <li><a href="/de/XUL/Eigenschaft/firstPermanentChild" title="de/XUL/Eigenschaft/firstPermanentChild">firstPermanentChild</a></li> <li><a href="/de/XUL/Eigenschaft/flex" title="de/XUL/Eigenschaft/flex">flex</a></li> <li><a href="/de/XUL/Eigenschaft/focused" title="de/XUL/Eigenschaft/focused">focused</a></li> <li><a href="/de/XUL/Eigenschaft/focusedItem" title="de/XUL/Eigenschaft/focusedItem">focusedItem</a></li> <li><a href="/de/XUL/Eigenschaft/forceComplete" title="de/XUL/Eigenschaft/forceComplete">forceComplete</a></li> <li><a href="/de/XUL/Eigenschaft/group" title="de/XUL/Eigenschaft/group">group</a></li> <li><a href="/de/XUL/Eigenschaft/handleCtrlPageUpDown" title="de/XUL/Eigenschaft/handleCtrlPageUpDown">handleCtrlPageUpDown</a></li> <li><a href="/de/XUL/Eigenschaft/handleCtrlTab" title="de/XUL/Eigenschaft/handleCtrlTab">handleCtrlTab</a></li> <li><a href="/de/XUL/Eigenschaft/HasUserValue" title="de/XUL/Eigenschaft/hasUserValue">hasUserValue</a></li> <li><a href="/de/XUL/Eigenschaft/height" title="de/XUL/Eigenschaft/height">height</a></li> <li><a href="/de/XUL/Eigenschaft/hidden" title="de/XUL/Eigenschaft/hidden">hidden</a></li> <li><a href="/de/XUL/Eigenschaft/hideSeconds" title="de/XUL/Eigenschaft/hideSeconds">hideSeconds</a></li> <li><a href="/de/XUL/Eigenschaft/HighlightNonMatches" title="de/XUL/Eigenschaft/highlightNonMatches">highlightNonMatches</a> </li> <li><a href="/de/XUL/Eigenschaft/homePage" title="de/XUL/Eigenschaft/homePage">homePage</a></li> <li><a href="/de/XUL/Eigenschaft/hour" title="de/XUL/Eigenschaft/hour">hour</a></li> <li><a href="/de/XUL/Eigenschaft/hourLeadingZero" title="de/XUL/Eigenschaft/hourLeadingZero">hourLeadingZero</a></li> <li><a href="/de/XUL/Eigenschaft/id" title="de/XUL/Eigenschaft/id">id</a></li> <li><a href="/de/XUL/Eigenschaft/ignoreBlurWhileSearching" title="de/XUL/Eigenschaft/ignoreBlurWhileSearching">ignoreBlurWhileSearching</a></li> <li><a href="/de/XUL/Eigenschaft/image" title="de/XUL/Eigenschaft/image">image</a></li> <li><a href="/de/XUL/Eigenschaft/increment" title="de/XUL/Eigenschaft/increment">increment</a></li> <li><a href="/de/XUL/Eigenschaft/inputField" title="de/XUL/Eigenschaft/inputField">inputField</a></li> <li><a href="/de/XUL/Eigenschaft/inverted" title="de/XUL/Eigenschaft/inverted">inverted</a></li> <li><a href="/de/XUL/Eigenschaft/is24HourClock" title="de/XUL/Eigenschaft/is24HourClock">is24HourClock</a></li> <li><a href="/de/XUL/Eigenschaft/isPM" title="de/XUL/Eigenschaft/isPM">isPM</a></li> <li><a href="/de/XUL/Eigenschaft/isSearching" title="de/XUL/Eigenschaft/isSearching">isSearching</a></li> <li><a href="/de/XUL/Eigenschaft/isWaiting" title="de/XUL/Eigenschaft/isWaiting">isWaiting</a></li> <li><a href="/de/XUL/Eigenschaft/itemCount" title="de/XUL/Eigenschaft/itemCount">itemCount</a></li> <li><a href="/de/XUL/Eigenschaft/label" title="de/XUL/Eigenschaft/label">label</a></li> <li><a href="/de/XUL/Eigenschaft/labelElement" title="de/XUL/Eigenschaft/labelElement">labelElement</a></li> <li><a href="/de/XUL/Eigenschaft/lastPermanentChild" title="de/XUL/Eigenschaft/lastPermanentChild">lastPermanentChild</a></li> <li><a href="/de/XUL/Eigenschaft/lastSelected" title="de/XUL/Eigenschaft/lastSelected">lastSelected</a></li> <li><a href="/de/XUL/Eigenschaft/left" title="de/XUL/Eigenschaft/left">left</a></li> <li><a href="/de/XUL/Eigenschaft/linkedPanel" title="de/XUL/Eigenschaft/linkedPanel">linkedPanel</a></li> <li><a href="/de/XUL/Eigenschaft/listBoxObject" title="de/XUL/Eigenschaft/listBoxObject">listBoxObject</a></li> <li><a href="/de/XUL/Eigenschaft/locked" title="de/XUL/Eigenschaft/locked">locked</a></li> <li><a href="/de/XUL/Eigenschaft/markupDocumentViewer" title="de/XUL/Eigenschaft/markupDocumentViewer">markupDocumentViewer</a></li> <li><a href="/de/XUL/Eigenschaft/max" title="de/XUL/Eigenschaft/max">max</a></li> <li><a href="/de/XUL/Eigenschaft/maxHeight" title="de/XUL/Eigenschaft/maxHeight">maxHeight</a></li> <li><a href="/de/XUL/Eigenschaft/maxLength" title="de/XUL/Eigenschaft/maxLength">maxLength</a></li> <li><a href="/de/XUL/Eigenschaft/maxRows" title="de/XUL/Eigenschaft/maxRows">maxRows</a></li> <li><a href="/de/XUL/Eigenschaft/maxWidth" title="de/XUL/Eigenschaft/maxWidth">maxWidth</a></li> <li><a href="/de/XUL/Eigenschaft/menu" title="de/XUL/Eigenschaft/menu">menu</a></li> <li><a href="/de/XUL/Eigenschaft/menuBoxObject" title="de/XUL/Eigenschaft/menuBoxObject">menuBoxObject</a></li> <li><a href="/de/XUL/Eigenschaft/menupopup" title="de/XUL/Eigenschaft/menupopup">menupopup</a></li> <li><a href="/de/XUL/Eigenschaft/min" title="de/XUL/Eigenschaft/min">min</a></li> <li><a href="/de/XUL/Eigenschaft/minHeight" title="de/XUL/Eigenschaft/minHeight">minHeight</a></li> <li><a href="/de/XUL/Eigenschaft/minResultsForPopup" title="de/XUL/Eigenschaft/minResultsForPopup">minResultsForPopup</a></li> <li><a href="/de/XUL/Eigenschaft/minWidth" title="de/XUL/Eigenschaft/minWidth">minWidth</a></li> <li><a href="/de/XUL/Eigenschaft/minute" title="de/XUL/Eigenschaft/minute">minute</a></li> <li><a href="/de/XUL/Eigenschaft/minuteLeadingZero" title="de/XUL/Eigenschaft/minuteLeadingZero">minuteLeadingZero</a></li> <li><a href="/de/XUL/Eigenschaft/mode" title="de/XUL/Eigenschaft/mode">mode</a></li> <li><a href="/de/XUL/Eigenschaft/month" title="de/XUL/Eigenschaft/month">month</a></li> <li><a href="/de/XUL/Eigenschaft/monthLeadingZero" title="de/XUL/Eigenschaft/monthLeadingZero">monthLeadingZero</a></li> <li><a href="/de/XUL/Eigenschaft/name" title="de/XUL/Eigenschaft/name">name</a></li> <li><a href="/de/XUL/Eigenschaft/next" title="de/XUL/Eigenschaft/next">next</a></li> <li><a href="/de/XUL/Eigenschaft/noMatch" title="de/XUL/Eigenschaft/noMatch">noMatch</a></li> <li><a href="/de/XUL/Eigenschaft/notificationsHidden" title="de/XUL/Eigenschaft/notificationsHidden">notificationsHidden</a></li> <li><a href="/de/XUL/Eigenschaft/object" title="de/XUL/Eigenschaft/object">object</a></li> <li><a href="/de/XUL/Eigenschaft/observes" title="de/XUL/Eigenschaft/observes">observes</a></li> <li><a href="/de/XUL/Eigenschaft/onFirstPage" title="de/XUL/Eigenschaft/onFirstPage">onFirstPage</a></li> <li><a href="/de/XUL/Eigenschaft/onLastPage" title="de/XUL/Eigenschaft/onLastPage">onLastPage</a></li> <li><a href="/de/XUL/Eigenschaft/open" title="de/XUL/Eigenschaft/open">open</a></li> <li><a href="/de/XUL/Eigenschaft/ordinal" title="de/XUL/Eigenschaft/ordinal">ordinal</a></li> <li><a href="/de/XUL/Eigenschaft/orient" title="de/XUL/Eigenschaft/orient">orient</a></li> <li><a href="/de/XUL/Eigenschaft/pack" title="de/XUL/Eigenschaft/pack">pack</a></li> <li><a href="/de/XUL/Eigenschaft/pageCount" title="de/XUL/Eigenschaft/pageCount">pageCount</a></li> <li><a href="/de/XUL/Eigenschaft/pageid" title="de/XUL/Eigenschaft/pageid">pageid</a></li> <li><a href="/de/XUL/Eigenschaft/pageIncrement" title="de/XUL/Eigenschaft/pageIncrement">pageIncrement</a></li> <li><a href="/de/XUL/Eigenschaft/pageIndex" title="de/XUL/Eigenschaft/pageIndex">pageIndex</a></li> <li><a href="/de/XUL/Eigenschaft/pageStep" title="de/XUL/Eigenschaft/pageStep">pageStep</a></li> <li><a href="/de/XUL/Eigenschaft/parentContainer" title="de/XUL/Eigenschaft/parentContainer">parentContainer</a></li> <li><a href="/de/XUL/Eigenschaft/palette" title="de/XUL/Eigenschaft/palette">palette</a></li> <li><a href="/de/XUL/Eigenschaft/persist" title="de/XUL/Eigenschaft/persist">persist</a></li> <li><a href="/de/XUL/Eigenschaft/persistence" title="de/XUL/Eigenschaft/persistence">persistence</a></li> <li><a href="/de/XUL/Eigenschaft/placeholder" title="de/XUL/Eigenschaft/placeholder">placeholder</a> </li> <li><a href="/de/XUL/Eigenschaft/pmIndicator" title="de/XUL/Eigenschaft/pmIndicator">pmIndicator</a></li> <li><a href="/de/XUL/Eigenschaft/popup" title="de/XUL/Eigenschaft/popup">popup</a></li> <li><a href="/de/XUL/Eigenschaft/popupBoxObject" title="de/XUL/Eigenschaft/popupBoxObject">popupBoxObject</a></li> <li><a href="/de/XUL/Eigenschaft/popupOpen" title="de/XUL/Eigenschaft/popupOpen">popupOpen</a></li> <li><a href="/de/XUL/Eigenschaft/position" title="de/XUL/Eigenschaft/position">position</a></li> <li><a href="/de/XUL/Eigenschaft/predicate" title="de/XUL/Eigenschaft/predicate">predicate</a></li> <li><a href="/de/XUL/Eigenschaft/preferenceElements" title="de/XUL/Eigenschaft/preferenceElements">preferenceElements</a></li> <li><a href="/de/XUL/Eigenschaft/preferencePanes" title="de/XUL/Eigenschaft/preferencePanes">preferencePanes</a></li> <li><a href="/de/XUL/Eigenschaft/preferences" title="de/XUL/Eigenschaft/preferences">preferences</a></li> <li><a href="/de/XUL/Eigenschaft/priority" title="de/XUL/Eigenschaft/priority">priority</a></li> <li><a href="/de/XUL/Eigenschaft/radioGroup" title="de/XUL/Eigenschaft/radioGroup">radioGroup</a></li> <li><a href="/de/XUL/Eigenschaft/readOnly" title="de/XUL/Eigenschaft/readOnly">readonly</a></li> <li><a href="/de/XUL/Eigenschaft/readOnly" title="de/XUL/Eigenschaft/readOnly">readOnly</a></li> <li><a href="/de/XUL/Eigenschaft/ref" title="de/XUL/Eigenschaft/ref">ref</a></li> <li><a href="/de/XUL/Eigenschaft/resource" title="de/XUL/Eigenschaft/resource">resource</a></li> <li><a href="/de/XUL/Eigenschaft/resultsPopup" title="de/XUL/Eigenschaft/resultsPopup">resultsPopup</a></li> <li><a href="/de/XUL/Eigenschaft/scrollBoxObject" title="de/XUL/Eigenschaft/scrollBoxObject">scrollBoxObject</a></li> <li><a href="/de/XUL/Eigenschaft/scrollIncrement" title="de/XUL/Eigenschaft/scrollIncrement">scrollIncrement</a></li> <li><a class="internal" href="/de/XUL/Eigenschaft/scrollHeight" title="de/XUL/Eigenschaft/scrollHeight">scrollHeight</a> </li> <li><a class="internal" href="/de/XUL/Eigenschaft/scrollWidth" title="de/XUL/Eigenschaft/scrollWidth">scrollWidth</a> </li> <li><a href="/de/XUL/Eigenschaft/SearchButton" title="de/XUL/Eigenschaft/searchButton">searchButton</a></li> <li><a href="/de/XUL/Eigenschaft/searchCount" title="de/XUL/Eigenschaft/searchCount">searchCount</a></li> <li><a href="/de/XUL/Eigenschaft/searchLabel" title="de/XUL/Eigenschaft/searchLabel">searchLabel</a></li> <li><a href="/de/XUL/Eigenschaft/searchParam" title="de/XUL/Eigenschaft/searchParam">searchParam</a></li> <li><a href="/de/XUL/Eigenschaft/searchSessions" title="de/XUL/Eigenschaft/searchSessions">searchSessions</a></li> <li><a href="/de/XUL/Eigenschaft/second" title="de/XUL/Eigenschaft/second">second</a></li> <li><a href="/de/XUL/Eigenschaft/secondLeadingZero" title="de/XUL/Eigenschaft/secondLeadingZero">secondLeadingZero</a></li> <li><a href="/de/XUL/Eigenschaft/securityUI" title="de/XUL/Eigenschaft/securityUI">securityUI</a></li> <li><a href="/de/XUL/Eigenschaft/selected" title="de/XUL/Eigenschaft/selected">selected</a></li> <li><a href="/de/XUL/Eigenschaft/selectedBrowser" title="de/XUL/Eigenschaft/selectedBrowser">selectedBrowser</a></li> <li><a href="/de/XUL/Eigenschaft/selectedCount" title="de/XUL/Eigenschaft/selectedCount">selectedCount</a></li> <li><a href="/de/XUL/Eigenschaft/selectedIndex" title="de/XUL/Eigenschaft/selectedIndex">selectedIndex</a></li> <li><a href="/de/XUL/Eigenschaft/selectedItem" title="de/XUL/Eigenschaft/selectedItem">selectedItem</a></li> <li><a href="/de/XUL/Eigenschaft/selectedItems" title="de/XUL/Eigenschaft/selectedItems">selectedItems</a></li> <li><a href="/de/XUL/Eigenschaft/selectedPanel" title="de/XUL/Eigenschaft/selectedPanel">selectedPanel</a></li> <li><a href="/de/XUL/Eigenschaft/selectedTab" title="de/XUL/Eigenschaft/selectedTab">selectedTab</a></li> <li><a href="/de/XUL/Eigenschaft/selectionEnd" title="de/XUL/Eigenschaft/selectionEnd">selectionEnd</a></li> <li><a href="/de/XUL/Eigenschaft/selectionStart" title="de/XUL/Eigenschaft/selectionStart">selectionStart</a></li> <li><a href="/de/XUL/Eigenschaft/selstyle" title="de/XUL/Eigenschaft/selstyle">selstyle</a></li> <li><a href="/de/XUL/Eigenschaft/selType" title="de/XUL/Eigenschaft/selType">selType</a></li> <li><a href="/de/XUL/Eigenschaft/sessionCount" title="de/XUL/Eigenschaft/sessionCount">sessionCount</a></li> <li><a href="/de/XUL/Eigenschaft/sessionHistory" title="de/XUL/Eigenschaft/sessionHistory">sessionHistory</a></li> <li><a href="/de/XUL/Eigenschaft/showCommentColumn" title="de/XUL/Eigenschaft/showCommentColumn">showCommentColumn</a></li> <li><a href="/de/XUL/Eigenschaft/showPopup" title="de/XUL/Eigenschaft/showPopup">showPopup</a></li> <li><a href="/de/XUL/Eigenschaft/size" title="de/XUL/Eigenschaft/size">size</a></li> <li><a href="/de/XUL/Eigenschaft/smoothScroll" title="de/XUL/Eigenschaft/smoothScroll">smoothScroll</a></li> <li><a href="/de/XUL/Eigenschaft/spinButtons" title="de/XUL/Eigenschaft/spinButtons">spinButtons</a></li> <li><a href="/de/XUL/Eigenschaft/src" title="de/XUL/Eigenschaft/src">src</a></li> <li><a href="/de/XUL/Eigenschaft/state" title="de/XUL/Eigenschaft/state">state</a></li> <li><a href="/de/XUL/Eigenschaft/statusbar" title="de/XUL/Eigenschaft/statusbar">statusbar</a></li> <li><a href="/de/XUL/Eigenschaft/statusText" title="de/XUL/Eigenschaft/statusText">statusText</a></li> <li><a href="/de/XUL/Eigenschaft/stringBundle" title="de/XUL/Eigenschaft/stringBundle">stringBundle</a></li> <li><a href="/de/XUL/Eigenschaft/strings" title="de/XUL/Eigenschaft/strings">strings</a></li> <li><a href="/de/XUL/Eigenschaft/style" title="de/XUL/Eigenschaft/style">style</a></li> <li><a href="/de/XUL/Eigenschaft/subject" title="de/XUL/Eigenschaft/subject">subject</a></li> <li><a href="/de/XUL/Eigenschaft/suppressOnSelect" title="de/XUL/Eigenschaft/suppressOnSelect">suppressOnSelect</a></li> <li><a href="/de/XUL/Eigenschaft/tabContainer" title="de/XUL/Eigenschaft/tabContainer">tabContainer</a></li> <li><a href="/de/XUL/Eigenschaft/tabIndex" title="de/XUL/Eigenschaft/tabIndex">tabIndex</a></li> <li><a href="/de/XUL/Eigenschaft/tabs" title="de/XUL/Eigenschaft/tabs">tabs</a></li> <li><a href="/de/XUL/Eigenschaft/tabScrolling" title="de/XUL/Eigenschaft/tabScrolling">tabScrolling</a></li> <li><a href="/de/XUL/Eigenschaft/tabpanels" title="de/XUL/Eigenschaft/tabpanels">tabpanels</a></li> <li><a href="/de/XUL/Eigenschaft/tag" title="de/XUL/Eigenschaft/tag">tag</a></li> <li><a href="/de/XUL/Eigenschaft/textLength" title="de/XUL/Eigenschaft/textLength">textLength</a></li> <li><a href="/de/XUL/Eigenschaft/textValue" title="de/XUL/Eigenschaft/textValue">textValue</a></li> <li><a href="/de/XUL/Eigenschaft/timeout" title="de/XUL/Eigenschaft/timeout">timeout</a></li> <li><a href="/de/XUL/Eigenschaft/title" title="de/XUL/Eigenschaft/title">title</a></li> <li><a href="/de/XUL/Eigenschaft/toolbarName" title="de/XUL/Eigenschaft/toolbarName">toolbarName</a></li> <li><a href="/de/XUL/Eigenschaft/toolbarset" title="de/XUL/Eigenschaft/toolbarset">toolbarset</a></li> <li><a href="/de/XUL/Eigenschaft/tooltip" title="de/XUL/Eigenschaft/tooltip">tooltip</a></li> <li><a href="/de/XUL/Eigenschaft/tooltipText" title="de/XUL/Eigenschaft/tooltipText">tooltipText</a></li> <li><a href="/de/XUL/Eigenschaft/top" title="de/XUL/Eigenschaft/top">top</a></li> <li><a href="/de/XUL/Eigenschaft/treeBoxObject" title="de/XUL/Eigenschaft/treeBoxObject">treeBoxObject</a></li> <li><a href="/de/XUL/Eigenschaft/type" title="de/XUL/Eigenschaft/type">type</a></li> <li><a href="/de/XUL/Eigenschaft/uri" title="de/XUL/Eigenschaft/uri">uri</a></li> <li><a href="/de/XUL/Eigenschaft/userAction" title="de/XUL/Eigenschaft/userAction">userAction</a></li> <li><a href="/de/XUL/Eigenschaft/value" title="de/XUL/Eigenschaft/value">value</a></li> <li><a href="/de/XUL/Eigenschaft/valueNumber" title="de/XUL/Eigenschaft/valueNumber">valueNumber</a></li> <li><a href="/de/XUL/Eigenschaft/view" title="de/XUL/Eigenschaft/view">view</a></li> <li><a href="/de/XUL/Eigenschaft/webBrowserFind" title="de/XUL/Eigenschaft/webBrowserFind">webBrowsereFind</a></li> <li><a href="/de/XUL/Eigenschaft/webNavigation" title="de/XUL/Eigenschaft/webNavigation">webNavigation</a></li> <li><a href="/de/XUL/Eigenschaft/webProgress" title="de/XUL/Eigenschaft/webProgress">webProgress</a></li> <li><a href="/de/XUL/Eigenschaft/width" title="de/XUL/Eigenschaft/width">width</a></li> <li><a href="/de/XUL/Eigenschaft/wizardPages" title="de/XUL/Eigenschaft/wizardPages">wizardPages</a></li> <li><a href="/de/XUL/Eigenschaft/wrapAround" title="de/XUL/Eigenschaft/wrapAround">wrapAround</a></li> <li><a href="/de/XUL/Eigenschaft/year" title="de/XUL/Eigenschaft/year">year</a></li> <li><a href="/de/XUL/Eigenschaft/yearLeadingZero" title="de/XUL/Eigenschaft/yearLeadingZero">yearLeadingZero</a></li>
+</ul>
+<h3 id="Verwandte_DOM_Elementeigenschaften">Verwandte DOM Elementeigenschaften</h3>
+<ul> <li><a href="/de/DOM/Node.attributes" title="de/DOM/element.attributes">DOM:element.attributes</a></li> <li><a href="/de/DOM/Node.baseURI" title="de/DOM/element.baseURI">DOM:element.baseURI</a></li> <li><a href="/de/DOM/Element.childElementCount" title="de/DOM/element.childElementCount">DOM:element.childElementCount</a></li> <li><a href="/de/DOM/Node.childNodes" title="de/DOM/element.childNodes">DOM:element.childNodes</a></li> <li><a href="/de/DOM/Element.children" title="de/DOM/element.children">DOM:element.children</a></li> <li><a href="/de/DOM/element.clientHeight" title="de/DOM/element.clientHeight">DOM:element.clientHeight</a></li> <li><a href="/de/DOM/element.clientLeft" title="de/DOM/element.clientLeft">DOM:element.clientLeft</a></li> <li><a href="/de/DOM/element.clientTop" title="de/DOM/element.clientTop">DOM:element.clientTop</a></li> <li><a href="/de/DOM/element.clientWidth" title="de/DOM/element.clientWidth">DOM:element.clientWidth</a></li> <li><a href="/de/DOM/Node.cloneNode" title="de/DOM/element.cloneNode">DOM:element.cloneNode</a></li> <li><a href="/de/DOM/Node.firstChild" title="de/DOM/element.firstChild">DOM:element.firstChild</a></li> <li><a href="/de/DOM/Element.firstElementChild" title="de/DOM/element.firstElementChild">DOM:element.firstElementChild</a></li> <li><a href="/de/DOM/Node.lastChild" title="de/DOM/element.lastChild">DOM:element.lastChild</a></li> <li><a href="/de/DOM/Element.lastElementChild" title="de/DOM/element.lastElementChild">DOM:element.lastElementChild</a></li> <li><a href="/de/DOM/Node.localName" title="de/DOM/element.localName">DOM:element.localName</a></li> <li><a href="/de/DOM/Node.namespaceURI" title="de/DOM/element.namespaceURI">DOM:element.namespaceURI</a></li> <li><a href="/de/DOM/Element.nextElementSibling" title="de/DOM/element.nextElementSibling">DOM:element.nextElementSibling</a></li> <li><a href="/de/DOM/Node.nextSibling" title="de/DOM/element.nextSibling">DOM:element.nextSibling</a></li> <li><a href="/de/DOM/Node.nodeName" title="de/DOM/element.nodeName">DOM:element.nodeName</a></li> <li><a href="/de/DOM/Node.nodeType" title="de/DOM/element.nodeType">DOM:element.nodeType</a></li> <li><a href="/de/DOM/Node.nodeValue" title="de/DOM/element.nodeValue">DOM:element.nodeValue</a></li> <li><a href="/de/DOM/Node.ownerDocument" title="de/DOM/element.ownerDocument">DOM:element.ownerDocument</a></li> <li><a href="/de/DOM/Node.parentNode" title="de/DOM/element.parentNode">DOM:element.parentNode</a></li> <li><a href="/de/DOM/Node.prefix" title="de/DOM/element.prefix">DOM:element.prefix</a></li> <li><a href="/de/DOM/Element.previousElementSibling" title="de/DOM/element.previousElementSibling">DOM:element.previousElementSibling</a></li> <li><a href="/de/DOM/Node.previousSibling" title="de/DOM/element.previousSibling">DOM:element.previousSibling</a></li> <li><a href="/de/DOM/element.scrollHeight" title="de/DOM/element.scrollHeight">DOM:element.scrollHeight</a></li> <li><a href="/de/DOM/element.scrollLeft" title="de/DOM/element.scrollLeft">DOM:element.scrollLeft</a></li> <li><a href="/de/DOM/element.scrollTop" title="de/DOM/element.scrollTop">DOM:element.scrollTop</a></li> <li><a href="/de/DOM/element.scrollWidth" title="de/DOM/element.scrollWidth">DOM:element.scrollWidth</a></li> <li><a href="/de/DOM/element.tagName" title="de/DOM/element.tagName">DOM:element.tagName</a></li> <li><a href="/de/DOM/Node.textContent" title="de/DOM/element.textContent">DOM:element.textContent</a></li>
+</ul>
diff --git a/files/de/archive/mozilla/xul/events/index.html b/files/de/archive/mozilla/xul/events/index.html
new file mode 100644
index 0000000000..346a893f9a
--- /dev/null
+++ b/files/de/archive/mozilla/xul/events/index.html
@@ -0,0 +1,464 @@
+---
+title: Ereignisse
+slug: Archive/Mozilla/XUL/Events
+tags:
+  - XUL-Ereignisse
+translation_of: Archive/Mozilla/XUL/Events
+---
+<p> </p>
+
+<p><a href="https://developer.mozilla.org/de/docs/XUL_Referenz" title="« Startseite XUL Referenz">« Startseite XUL Referenz</a></p>
+
+<p> </p>
+
+<p>Die folgenden Tabellen beschreiben die Ereignisbehandlungsroutinen, welche die meisten XUL-Elemente betreffen. Die Ereignisse können mit dem Element über »Lauscher« (Listener) verknüpft werden. Der <a href="/de/DOM/element.addEventListener" title="de/DOM/element.addEventListener">addEventListener</a> fügt ein Ereignis hinzu, der <a href="/de/DOM/element.removeEventListener" title="de/DOM/element.removeEventListener"> removeEventListener</a> hebt diese Verknüpfung wieder auf.</p>
+
+<p>Für einige Ereignisse kann die Verknüpfung auch über Attribute erfolgen. Hierbei muss jedoch berücksichtigt werden, dass nur ein Listener gleichzeitig verknüpft werden kann. Eventuell bereits bestehende Verknüpfungen mit Lauschern werden aufgelöst. Der Name des Attributs entspricht dem Namen des Ereignisses mit einem vorangestellten 'on'.</p>
+
+<h3 id="Geerbte_DOM-Ereignisse" name="Geerbte_DOM-Ereignisse">Geerbte DOM Ereignisse</h3>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>Ereignis</th>
+   <th>Beschreibung</th>
+  </tr>
+  <tr>
+   <td>
+    <p>blur</p>
+   </td>
+   <td>
+    <p>Das Gegenteil des focus-Ereignisses; das blur-Ereignis tritt auf, nachdem ein Element den Eingabefokus verloren hat.<br>
+     <strong>Attribut:</strong> onblur</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>change</p>
+   </td>
+   <td>
+    <p>Dieses Ereignis wird gesendet, wenn der Wert eines Textfelds geändert wird, aber erst wenn der Eingabefokus auf ein anderes Element übergeht.<br>
+     <strong>Attribut:</strong> onchange</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>click</p>
+   </td>
+   <td>
+    <p>Dieses Ereignis wird gesendet, wenn eine Maustaste gedrückt und wieder losgelassen wurde. Über die <code>button</code> Eigenschaft des Ereignisobjekts kann ermittelt werden, welche Maustaste gedrückt wurde. Dieses Ereignis wird auch gesendet, wenn der Benutzer einen Doppelklick ausführt. Über die <code>detail</code> Eigenschaft kann festgelegt werden, wie viele Klicks auftreten sollen. So kann auch auf dreifach-Klicks getestet werden. Dieses Ereignis sollte in XUL nicht verwendet werden, um auf Benutzeraktionen zu reagieren. Stattdessen sollte das <code>command</code> Ereignis benutzt werden.<br>
+     <strong>Attribut:</strong> onclick</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>dblclick</p>
+   </td>
+   <td>
+    <p>Dieses Ereignis verhält sich wie das <code>click</code> Ereignis, allerdings wird es nur gesendet, wenn der Benutzer einen Doppelklick ausführt. Das Ereignis kann als eine Alternative zur <code>detail</code> Eigenschaft im <code>click</code> Ereignis verwendet werden.<br>
+     <strong>Attribut:</strong> ondblclick</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>DOMMouseScroll</p>
+   </td>
+   <td>
+    <p>Dieses Ereignis wird gesendet, wenn das Mausrad bewegt wird, egal, ob der Inhalt gescrollt wird oder nicht.<br>
+     Ziel dieses Ereignisses ist das Element, welches sich unter dem Mauszeiger befindet, wenn das Mausrad bewegt wird.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>focus</p>
+   </td>
+   <td>
+    <p>Das<code> focus</code> Ereignis wird gesendet, wenn ein Element den Fokus erhält. Wenn das Element fokussiert ist, werden Tastaturereignisse zu diesem Element gesendet. Der Fokus kann geändert werden, indem auf eine anderes Element geklickt wird, die TAB Taste gedrückt wird, um zum nächsten Element zu wechseln, oder die »Zurück TAB« Taste gedrückt wird, um zum vorherigen Element zu wechseln.<br>
+     <strong>Attribut:</strong> onfocus</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>keydown</p>
+   </td>
+   <td>
+    <p>Dieses Ereignis wird zu einem Element gesendet, das den Eingabefokus hat, während eine Taste gedrückt, aber nicht losgelassen wird.<br>
+     <strong>Attribut:</strong> onkeydown</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>keypress</p>
+   </td>
+   <td>
+    <p>Das <code>keypress</code> Ereignis wird zu einem Element gesendet, das den Eingabefokus hat und eine Taste gedrückt und losgelassen wurde. Wenn der Benutzer eine Taste drückt, wird zuerst das <code>keydown</code> Ereignis gesendet, gefolgt vom <code>keypress</code> Ereignis und schließlich dem <code>keyup</code> Ereignis. In einem Textfeld kann der Benutzer normalerweise eine Taste gedrückt halten, um ein Zeichen wiederholt zu senden. In diesem Fall werden mehrere Ereignispaare gesendet, als ob der Benutzer die gleiche Taste sehr schnell hintereinander drücken würde.<br>
+     <strong>Attribut:</strong> onkeypress</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>keyup</p>
+   </td>
+   <td>
+    <p>Das <code>keyup</code> Ereignis wird einem Element gesendet, das den Eingabefokus hat, wenn eine Taste losgelassen wird.<br>
+     <strong>Attribut:</strong> onkeyup</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>load</p>
+   </td>
+   <td>
+    <p>Dieses Element wird zum Fenster gesendet, nachdem es vollständig geladen wurde. Die Behandlungsroutine sollte dem <code>window</code> Element zugewiesen werden. Dieses Ereignis kann auch bei Bildelementen oder einem Element, das Bildattribute akzeptiert verwendet werden und wird dann gesendet, wenn das Bild vollständig geladen wurde. Bei Bildern wird dieses Element nicht im Elementenbaum auftauchen, sodass es nicht mit dem <code>load</code> Ereignis des Fensters in Konflikt gerät.<br>
+     <strong>Attribut:</strong> onload</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>mousedown</p>
+   </td>
+   <td>
+    <p>Dieses Ereignis wird gesendet, wenn die Maustaste über einem Element gedrückt, aber nicht losgelassen wird.<br>
+     <strong>Attribut:</strong> onmousedown</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>mousemove</p>
+   </td>
+   <td>
+    <p>Dieses Ereignis wird wiederholt gesendet, während der Mauszeiger über einem Element bewegt wird.<br>
+     <strong>Attribut:</strong> onmousemove</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>mouseout</p>
+   </td>
+   <td>
+    <p>Dieses Ereignis wird einem Element gesendet, wenn der Benutzer den Mauszeiger aus dem Bereich des Elements bewegt. Es ist das Gegenstück zum <code>mouseover</code> Ereignis.<br>
+     <strong>Attribut:</strong> onmouseout</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>mouseover</p>
+   </td>
+   <td>
+    <p>Dieses Element wird einem Element gesendet, wenn sich die Maus erstmals über einem Element befindet. Es kann dazu verwendet werden dem Benutzer Rückmeldungen bereitzustellen.<br>
+     <strong>Attribut:</strong> onmouseover</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>mouseup</p>
+   </td>
+   <td>
+    <p>Dieses Ereignis wird gesendet, wenn die Maustaste über einem Element losgelassen wird.<br>
+     <strong>Attribut:</strong> onmouseup</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>select</p>
+   </td>
+   <td>
+    <p>Dieses Ereignis wird einer Listbox bzw. einem Tree bei Auswahl eines Eintrags gesendet.<br>
+     <strong>Attribut:</strong> onselect</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>unload</p>
+   </td>
+   <td>
+    <p>Dieses Ereignis wird einem Fenster gesendet, wenn das Fenster geschlossen wurde. Das erfolgt nach dem <code>close</code> Ereignis. Die Behandlungsroutine für dieses Ereignis sollte dem <code>window</code> Element zugewiesen werden.<br>
+     <strong>Attribut:</strong> onunload</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Ver.C3.A4nderungs-DOM-Ereignisse" name="Ver.C3.A4nderungs-DOM-Ereignisse">Ereignisse zu Veränderungen am DOM</h3>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>Ereignis</th>
+   <th>Beschreibung</th>
+  </tr>
+  <tr>
+   <td>
+    <p>DOMAttrModified</p>
+   </td>
+   <td>
+    <p>Dieses Ereignis wird einem Element gesendet, wenn eines der Attribute verändert wird. In der Behandlungsroutine kann das Attribut, welches verändert wurde, über die <code>attrName</code> Eigenschaft ermittelt werden. Neue und alte Werte des Attributs können über die <code>prevValue</code> und <code>newValue</code> Eigenschaften abgerufen werden.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>DOMNodeInserted</p>
+   </td>
+   <td>
+    <p>Dieses Ereignis wird gesendet, wenn ein Kontenelement (als ein Kindelement) einem Element hinzugefügt wird. Wenn dieses Element auf dem Dokumentenlevel erfasst wird, können Hinweise zu Dokumentenveränderung auftreten.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>DOMNodeRemoved</p>
+   </td>
+   <td>
+    <p>Dieses Ereignis wird gesendet, wenn ein Kontenelement aus einem Element entfernt wird. Wenn dieses Element auf dem Dokumentenlevel erfasst wird, können Hinweise zu Dokumentenveränderung auftreten.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Es sollte darauf hingewiesen werden, dass die Anwesenheit von Behandlungsroutinen zur Veränderungen am DOM die Performance von nachfolgenden DOM Operationen in dem Dokument stark beeinträchtigt. Das kann bedeuten, dass eine DOM Operation 1,5 bis 7 mal so lange braucht als es ohne einen Eventhandler brauchen würde.</p>
+
+<h3 id="Gebr.C3.A4uchliche_XUL-Ereignisse" name="Gebr.C3.A4uchliche_XUL-Ereignisse">Gebräuchliche XUL Ereignisse</h3>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>Ereignis</th>
+   <th>Beschreibung</th>
+  </tr>
+  <tr>
+   <td>
+    <p>broadcast</p>
+   </td>
+   <td>
+    <p>Dieses Ereignis sollte einem Beobachter zugewiesen werden. Das <code>broadcast</code> Ereignis wird gesendet, wenn die Attribute eines Elements verändert oder beobachtet werden.<br>
+     <strong>Attribut:</strong> onbroadcast</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>close</p>
+   </td>
+   <td>
+    <p>Dieses Ereignis wird gesendet, wenn eine Anfrage durch den Benutzer getätigt wurde, die das Fenster schließen lassen soll (z.B durch Klick auf den Schließen Button). Wird eine Behandlungsroutine auf das <code>window</code> Element gesetzt, kann das Schließen des Fensters verhindert werden. Wird <code>false</code> vom Close-handler zurückgeliefert, wird das Fenster nicht geschlossen. Eine Rückgabe von <code>true</code> schließt das Fenster normal. Dieses Ereignis wird nur gesendet, wenn der Benutzer den Schließen Button in der Titelleiste anklickt. Das <code>unload</code> Ereignis erfasst alle Versuche das Fenster zu schließen.<br>
+     <strong>Attribut:</strong> onclose</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>command</p>
+   </td>
+   <td>
+    <p>Dieses Ereignis wird gesendet, wenn ein Element aktiv ist. Wie es aktiviert wird, variiert von Element zu Element und in vielen Fällen gibt es mehrere Wege, um eine Element zu aktivieren. Zum Beispiel kann eine Schaltfläche, wenn sie fokussiert ist, durch ein Klick mit der Maus oder durch das Drücken der ENTER Taste aktivert werden. Menüs können durch das Auswählen mit der Maus oder durch das Drücken einer Schnelltaste aktiviert werden. Es sollte immer das<code> command </code>Ereignis, anstatt des <code>click</code> Ereignisses verwendet werden, weil in allen nötigen Fällen aufgerufen wird.<br>
+     <strong>Attribut:</strong> oncommand</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>commandupdate</p>
+   </td>
+   <td>
+    <p>Dieses Ereignis tritt auf, wenn eine Befehlsaktualisierung beim <code>&lt;commandset&gt;</code> Element statt findet. Es wird verwendet, um die ausgeschalteten Befehle zu aktualisieren.<br>
+     <strong>Attribut:</strong> oncommandupdate</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>contextmenu</p>
+   </td>
+   <td>
+    <p>Dieses Ereignis wird einem Element gesendet, wenn der Benutzer eine Anfrage stellt, die ein Kontextmenü öffnen soll. Die Aktion variiert von Betriebssystem zu Betriebssystem, wird aber typischerweise durch einen Rechtsklick ausgelöst. Diese Behandlungsroutine wird normalerweise verwendet, um dynamische Befehle auszuführen, wenn der Benutzer die Anfrage stellt, das Menü anzuzeigen oder es wird ein Ereignis benutzt, welches ein Popup-Fenster anzeigt. Wird<code> false</code> von diesem Eventhandler zurückgegeben, wird verhindert, dass das Popup-Fenster angezeigt wird.<br>
+     <strong>Attribut:</strong> oncontextmenu</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>drag {{ Fx_minversion_inline(3) }}</p>
+   </td>
+   <td>
+    <p>Das <code>drag</code> Ereignis wird zum Quellknoten (der Knoten, der gezogen wurde) mehrmals pro Sekunde gesendet, während ein Objekt gezogen wird.<br>
+     <strong>Attribut:</strong> ondrag</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>dragdrop</p>
+   </td>
+   <td>
+    <p>Dieses Ereignis wird ausgelöst, wenn der Benutzer die Maustaste los lässt, um ein Objekt abzulegen, welches gezogen wurde. Das Element, wenn es das Ablegen akzeptiert, sollte in irgendeiner Weise reagieren (z.B. durch das Hineinlegen des gezogenen Objekten in das Element selbst).<br>
+     <strong>Attribut:</strong> ondragdrop</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>dragend {{ Fx_minversion_inline(3) }}</p>
+   </td>
+   <td>
+    <p>Das <code><code>dragend</code></code> Ereignis wird zum Quellknoten (der Konten, der gezogen wurde) gesendet, wenn das Objekt nicht mehr gezogen wird.<br>
+     <strong>Attribut:</strong> ondragend</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>dragenter</p>
+   </td>
+   <td>
+    <p>Das <code>dragenter</code> Ereignis wird gesendet, wenn sich der Mauszeiger erstmals über ein Element befindet in welches ein Objekt gezogen werden soll. Es ist ähnlich zum <code>mouseover</code> Ereignis, tritt aber nur beim Hineinlegen von Objekten auf.<br>
+     <strong>Attribut:</strong> ondragenter</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>dragexit</p>
+   </td>
+   <td>
+    <p>Dieses Ereignis wird gesendet, wenn sich der Mauszeiger aus dem Element entfernt, in welches ein Objekten gezogen werden soll. Es wird auch aufgerufen, wenn ein Objekt in ein Element gezogen wurde. Es ist ähnlich zum <code>mouseout</code> Ereignis, tritt aber nur beim Hineinlegen von Objekten auf.<br>
+     <strong>Attribut:</strong> ondragexit</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>draggesture</p>
+   </td>
+   <td>
+    <p>Dieses Ereignis wird gesendet, wenn der Benutzer beginnt ein Element zu ziehen, normalerweise in dem die Maustaste gedrückt und bewegt wird.<br>
+     <strong>Attribut:</strong> ondraggesture</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>dragover</p>
+   </td>
+   <td>
+    <p>Ähnlich zum <code>mousemove</code> Ereignis wird dieses Ereignis gesendet, während etwas über ein Element gezogen wird. Die Behandlungsroutine sollte angeben, ob das Objekt gezogen wird oder abgelegt werden kann.<br>
+     <strong>Attribut:</strong> ondragover</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>input</p>
+   </td>
+   <td>
+    <p>Dieses Ereignis wird gesendet, wenn der Benutzer einen Text in ein Textfeld eingibt. Das Ereignis wird nur dann aufgerufen, wenn der angezeigte Text verändert wird, daher wird es nicht aufgerufen, wenn der Benutzer Tasten drückt, die nicht in einem Textfeld dargestellt werden.<br>
+     <strong>Attribut:</strong> oninput</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>overflow</p>
+   </td>
+   <td>
+    <p>Dieses Ereignis wird nur zu einer Box oder einem anderen Layoutelement gesendet, wenn die CSS <code>overflow</code> Eigenschaft auf einen anderen Wert als '<code>visible</code>' festgelegt wird. Falls nicht genug Platz vorhanden ist, um den Inhalt des Elements vollständig anzuzeigen, wird das <code>overflow</code> Ereignis gesendet. Abhängig vom Wert der <code>overflow</code> Eigenschaft treten eventuell Scrollbalken auf. Wenn zum Beispiel eine Box eine maximale Größe von 100 Pixeln besitzt und nur genug Platz für 80 Pixel verfügbar ist, wird das <code>overflow</code> Ereignis zur Box gesendet. Wenn sich die Größe verändert, zum Beispiel durch den Benutzer, der die Fenstergröße ändert, wird das <code>underflow</code> Ereignis gesendet, wenn genug Platz frei wird.<br>
+     <strong>Attribut:</strong> onoverflow</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>popuphidden</p>
+   </td>
+   <td>
+    <p>Dieses Ereignis wird einem Popup gesendet, nachdem er versteckt wurde.<br>
+     <strong>Attribut:</strong> onpopuphidden</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>popuphiding</p>
+   </td>
+   <td>
+    <p>Dieses Ereignis wird einem Popup gesendet, wenn es versteckt wird.<br>
+     <strong>Attribut:</strong> onpopuphiding</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>popupshowing</p>
+   </td>
+   <td>
+    <p>Dieses Ereignis wird einem Popup gesendet, bevor dieser angezeigt wird. Diese Behandlungsroutine wird normalerweise verwendet, um Inhalte dynamisch festzulegen, wenn der Benutzer eine Anfrage stellt diese anzuzeigen. Wird <code>false</code> vom Eventhandler zurückgegeben, wird die Anzeige des Popups verhindert.<br>
+     <strong>Attribut:</strong> onpopupshowing</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>popupshown</p>
+   </td>
+   <td>
+    <p>Dieses Ereignis wird einem Popup gesendet, nachdem er geöffnet wurde, sehr ähnlich zum <code>onload</code> Ereignis, welches gesendet wird, wenn ein Fenster geöffnet wurde.<br>
+     <strong>Attribut:</strong> onpopupshown</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>syncfrompreference</p>
+   </td>
+   <td>
+    <p>Dieses Ereignis wird gesendet, wenn das Element verändert wurde, weil eine Einstellung geändert wurde oder wenn ein Element von einer Einstellung initialisiert wurde. Dieses Ereignis wird nur an Elemente gesendet, die mit einer Einstellung verbunden sind und in<a href="/de/XUL/prefwindow" title="de/XUL/prefwindow"> prefwindow</a> vorhanden sind. Das ist kein wirkliches Ereignis, es ist ein Funktionsaufruf und muss die Attributschreibweise verwenden. Das Skript kann einen Wert zurück liefern, um dem Element auf einen spezifischen Wert zu geben, als den Wert der Einstellung. Dieses Ereignis wird normalerweise verwendet, um einen Wert einzustellen, sodass es passender für die Anzeige in der Benutzeroberfläche gemacht werden kann.<br>
+     <strong>Attribut:</strong> onsyncfrompreference</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>synctopreference</p>
+   </td>
+   <td>
+    <p>Dieses Ereignis wird gesendet, wenn ein Element, das mit einer Einstellung verbunden ist, verändert wurde. ieses Ereignis wird nur an Elemente gesendet, die mit einer Einstellung verbunden sind und in<a href="/de/XUL/prefwindow" title="de/XUL/prefwindow"> prefwindow</a> vorhanden sind. Das ist kein wirkliches Ereignis, es ist ein Funktionsaufruf und muss die Attributschreibweise verwenden. Das Skript kann einen Wert zurück liefern, um dem Element auf einen spezifischen Wert zu geben, als den Wert der Einstellung.<br>
+     <strong>Attribut:</strong> onsynctopreference</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>underflow</p>
+   </td>
+   <td>
+    <p>Dieses Ereignis wird einem Element gesendet, wenn genug Platz vorhanden ist, um es vollständig anzuzeigen. Das betrifft Boxen und andere Layoutelement mit der CSS <code>overflow</code> Eigenschaft, die einen anderen Wert als '<code>visible</code>' besitzen. Das<code> underflow</code> Ereignis kann verwendet werden, um zu ermitteln, dass ein Scrollmechanismus nicht länger benötigt wird.<br>
+     <strong>Attribut:</strong> onunderflow</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>DOMMenuItemActive</p>
+   </td>
+   <td>
+    <p>Dieses Ereignis wird gesendet, wenn ein Menü oder Menüitem hervorgehoben wird oder die Maus darüber schwebt.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>DOMMenuItemInactive</p>
+   </td>
+   <td>
+    <p>Dieses Ereignis wird gesendet, wenn ein Menü oder Menüitem nicht länger hervorgehoben wird oder die Maus nicht länger darüber schwebt.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Zug.C3.A4nglichkeitsereignisse_.28Accessibility.29" name="Zug.C3.A4nglichkeitsereignisse_.28Accessibility.29">Ereignisse zur Zugänglichkeit (Accessibility)</h3>
+
+<p>Mit diesen Ereignissen wird das Zugänglichkeitssystem über Veränderungen an einem Element benachrichtigt. Sie würden diese normalerweise nicht selbst verwenden.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>Ereignis</th>
+   <th>Beschreibung</th>
+  </tr>
+  <tr>
+   <td>
+    <p>CheckboxStateChange</p>
+   </td>
+   <td>
+    <p>Dieses Ereignis wird gesendet, wenn eine <a href="/de/XUL/checkbox" title="de/XUL/checkbox"> checkbox</a> angekreuzt oder nicht angekreuzt wird, entweder vom Benutzer oder von einem Skript. Normalerweise würde ein <code>command</code> Ereignis zur Abfrage der <code>checkbox</code> Veränderungen verwendetet werden, das <code>command</code> Ereignis wird aber nur gesendet, wenn der Benutzer den Wert verändert, während das <code>CheckboxStateChange</code> Ereignis auch gesendet wird, wenn ein Skript die <code>checked</code> Eigenschaft einer <code>checkbox</code> verändert. Bei Änderungen vom Benutzer wird das <code>CheckboxStateChange</code> Ereignis vor dem <code>command</code> Ereignis gesendet.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>RadioStateChange</p>
+   </td>
+   <td>
+    <p>Dieses Ereignis wird gesendet, wenn ein <a href="/de/XUL/radio" title="de/XUL/radio">Radiobutton</a> ausgewählt wird, entweder vom Benutzer oder von einem Skript. Normalerweise würde ein <code>command</code> Ereignis zur Abfage der Veränderungen am Radiobutton verwendet werden, das <code>command </code>Ereignis wird aber nur gesendet, wenn der Benutzer den ausgewählten Radiobutton verändert, während das <code>RadioStateChange</code> Ereignis auch gesendet wird, wenn ein Skript die Auswahl verändert. Bei Änderungen vom Benutzer wird das <code>RadioStateChange</code> Ereignis vor dem <code>command</code> Ereignis gesendet.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{ languages( { "en": "en/XUL/Events", "es": "es/XUL/Events", "ja": "ja/XUL/Events", "pl": "pl/XUL/Zdarzenia" } ) }}</p>
diff --git a/files/de/archive/mozilla/xul/grippy/index.html b/files/de/archive/mozilla/xul/grippy/index.html
new file mode 100644
index 0000000000..73061bf15a
--- /dev/null
+++ b/files/de/archive/mozilla/xul/grippy/index.html
@@ -0,0 +1,88 @@
+---
+title: grippy
+slug: Archive/Mozilla/XUL/grippy
+tags:
+  - XUL Elemente
+  - XUL Referenz
+translation_of: Archive/Mozilla/XUL/grippy
+---
+<div class="noinclude"><span class="breadcrumbs XULRef_breadcrumbs">
+ « <a href="/de/docs/XUL_Referenz">XUL Referenz Startseite</a>    [
+ <a href="#Beispiele">Beispiele</a> |
+ <a href="#Attribute">Attribute</a> |
+ <a href="#Eigenschaften">Eigenschaften</a> |
+ <a href="#Methoden">Methoden</a> |
+ <a href="#Verwandte_Themen">Verwandte Themen</a> ]
+</span></div>
+<p>Ein Element, das in einem <code><a href="/de/docs/Mozilla/Tech/XUL/splitter" title="splitter">splitter</a></code>-Element verwendet werden kann. Es ermöglicht das Zusammenklappen eines Geschwisterelements des Trenners.</p>
+<p>Weitere Informationen im <a href="/de/XUL_Tutorial/Splitters" title="de/XUL_Tutorial/Splitters">XUL Tutorial</a>.</p>
+<h3 id="Beispiele" name="Beispiele">Beispiele</h3>
+<p>(Beispiel benötigt)</p>
+<h3 id="Attribute" name="Attribute">Attribute</h3>
+<table style="border: 1px solid rgb(204, 204, 204); margin: 0 0 10px 10px; padding: 0 10px; background: rgb(238, 238, 238);">
+<tbody>
+<tr>
+<td><p><strong>Geerbt von XUL-Element</strong><br> <small>
+<code id="a-align"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code>,
+<code id="a-allowevents"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/allowevents">allowevents</a></code>,
+<code id="a-allownegativeassertions"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/allownegativeassertions">allownegativeassertions</a></code>,
+<code id="a-class"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/class">class</a></code>,
+<code id="a-coalesceduplicatearcs"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/coalesceduplicatearcs">coalesceduplicatearcs</a></code>,
+<code id="a-collapsed"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/collapsed">collapsed</a></code>,
+<code id="a-container"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/container">container</a></code>,
+<code id="a-containment"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/containment">containment</a></code>,
+<code id="a-context"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/context">context</a></code>,
+<code id="a-contextmenu"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/contextmenu">contextmenu</a></code>,
+<code id="a-datasources"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/datasources">datasources</a></code>,
+<code id="a-dir"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code>,
+<code id="a-empty"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/empty">empty</a></code>,
+<code id="a-equalsize"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/equalsize">equalsize</a></code>,
+<code id="a-flags"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/flags">flags</a></code>,
+<code id="a-flex"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code>,
+<code id="a-height"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/height">height</a></code>,
+<code id="a-hidden"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/hidden">hidden</a></code>,
+<code id="a-id"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code>,
+<code id="a-insertafter"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/insertafter">insertafter</a></code>,
+<code id="a-insertbefore"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/insertbefore">insertbefore</a></code>,
+<code id="a-left"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/left">left</a></code>,
+<code id="a-maxheight"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/maxheight">maxheight</a></code>,
+<code id="a-maxwidth"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/maxwidth">maxwidth</a></code>,
+<code id="a-menu"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/menu">menu</a></code>,
+<code id="a-minheight"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/minheight">minheight</a></code>,
+<code id="a-minwidth"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/minwidth">minwidth</a></code>,
+<code id="a-mousethrough"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/mousethrough">mousethrough</a></code>,
+<code id="a-observes"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/observes">observes</a></code>,
+<code id="a-ordinal"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/ordinal">ordinal</a></code>,
+<code id="a-orient"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code>,
+<code id="a-pack"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code>,
+<code id="a-persist"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/persist">persist</a></code>,
+<code id="a-popup"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/popup">popup</a></code>,
+<code id="a-position"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/position">position</a></code>,
+<code id="a-preference-editable"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/preference-editable">preference-editable</a></code>,
+<code id="a-querytype"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/querytype">querytype</a></code>,
+<code id="a-ref"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/ref">ref</a></code>,
+<code id="a-removeelement"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/removeelement">removeelement</a></code>,
+<code id="a-sortDirection"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/sortDirection">sortDirection</a></code>,
+<code id="a-sortResource"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/sortResource">sortResource</a></code>,
+<code id="a-sortResource2"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/sortResource2">sortResource2</a></code>,
+<code id="a-statustext"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/statustext">statustext</a></code>,
+<code id="a-style"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/style">style</a></code>,
+<code id="a-template"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/template">template</a></code>,
+<code id="a-tooltip"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/tooltip">tooltip</a></code>,
+<code id="a-tooltiptext"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/tooltiptext">tooltiptext</a></code>,
+<code id="a-top"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/top">top</a></code>,
+<code id="a-uri"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/uri">uri</a></code>,
+<code id="a-wait-cursor"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/wait-cursor">wait-cursor</a></code>,
+<code id="a-width"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/width">width</a></code> </small></p>
+</td>
+</tr>
+</tbody>
+</table>
+<h3 id="Eigenschaften" name="Eigenschaften">Eigenschaften</h3>
+<table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Geerbte Eigenschaften</strong><br> <small> <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/align">align</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/allowEvents">allowEvents</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/boxObject">boxObject</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/builder">builder</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/className">className</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/collapsed">collapsed</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/contextMenu">contextMenu</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/controllers">controllers</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/database">database</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/datasources">datasources</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/dir">dir</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/flex">flex</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/height">height</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/hidden">hidden</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/id">id</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/left">left</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/maxHeight">maxHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/maxWidth">maxWidth</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/menu">menu</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/minHeight">minHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/minWidth">minWidth</a></span></code>, , , , , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/observes">observes</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/ordinal">ordinal</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/orient">orient</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/pack">pack</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/persist">persist</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/ref">ref</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/resource">resource</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/statusText">statusText</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/style">style</a></span></code>, ,, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/tooltip">tooltip</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/tooltipText">tooltipText</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/top">top</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/width">width</a></span></code></small></p> </td> </tr> </tbody>
+</table>
+<h3 id="Methoden" name="Methoden">Methoden</h3>
+<table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Geerbte Methoden</strong><br> <small><code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.addEventListener">element.addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.appendChild">node.appendChild()</a></code>, <span id="m-blur"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/click">click</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.cloneNode">node.cloneNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.compareDocumentPosition">node.compareDocumentPosition()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.dispatchEvent">element.dispatchEvent()</a></code>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/focus">focus</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttribute">element.getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNode">element.getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNodeNS">element.getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNS">element.getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getBoundingClientRect">element.getBoundingClientRect()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getClientRects">element.getClientRects()</a></code>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/getElementsByAttribute">getElementsByAttribute</a></code></span>, <span id="m-getElementsByAttributeNS"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/getElementsByAttributeNS">getElementsByAttributeNS</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByClassName">element.getElementsByClassName()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByTagName">element.getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByTagNameNS">element.getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.getFeature">node.getFeature()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.getUserData">node.getUserData()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.hasAttribute">element.hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.hasAttributeNS">element.hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.nodes.hasAttributes">nodes.hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.nodes.hasChildNodes">nodes.hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.insertBefore">node.insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isDefaultNamespace">node.isDefaultNamespace()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isEqualNode">node.isEqualNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isSameNode">node.isSameNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isSupported">node.isSupported()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.lookupNamespaceURI">node.lookupNamespaceURI()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.lookupPrefix">node.lookupPrefix()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.normalize">node.normalize()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.querySelector">element.querySelector()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.querySelectorAll">element.querySelectorAll()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttribute">element.removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttributeNode">element.removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttributeNS">element.removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.removeChild">node.removeChild()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeEventListener">element.removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.replaceChild">node.replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttribute">element.setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNode">element.setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNodeNS">element.setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNS">element.setAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.setUserData">node.setUserData()</a></code></small></p> </td> </tr> </tbody>
+</table>
+<h3 id="Verwandt">Verwandt</h3>
+<p>TBD</p>
diff --git a/files/de/archive/mozilla/xul/iframe/index.html b/files/de/archive/mozilla/xul/iframe/index.html
new file mode 100644
index 0000000000..7d5fa181af
--- /dev/null
+++ b/files/de/archive/mozilla/xul/iframe/index.html
@@ -0,0 +1,161 @@
+---
+title: iframe
+slug: Archive/Mozilla/XUL/iframe
+tags:
+  - XUL Elemente
+  - XUL Referenz
+translation_of: Archive/Mozilla/XUL/iframe
+---
+<div class="noinclude"><span class="breadcrumbs XULRef_breadcrumbs">
+ « <a href="/de/docs/XUL_Referenz">XUL Referenz Startseite</a>    [
+ <a href="#Beispiele">Beispiele</a> |
+ <a href="#Attribute">Attribute</a> |
+ <a href="#Eigenschaften">Eigenschaften</a> |
+ <a href="#Methoden">Methoden</a> |
+ <a href="#Verwandte_Themen">Verwandte Themen</a> ]
+</span></div>
+<p>Ein innerer Frame, der in etwa wie das <code>iframe</code>-Element von HTML funktioniert. Das Attribut <code id="a-src"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/src">src</a></code> gibt den Inhalt des Frames an. Dieser Inhalt befindet sich in einem separaten Dokument. Jegliche Kindelemente des <code>iframe</code> Elements werden ignoriert.</p>
+<p>Weitere Informationen sind im <a href="/de/XUL_Tutorial/Content_Panels" title="de/XUL_Tutorial/Content_Panels">XUL Tutorial</a> verfügbar.</p>
+<dl> <dt>Attribute</dt> <dd><a href="#a-showcaret">showcaret</a>, <a href="#a-src">src</a>, <a href="#a-browser.type">type</a>, <a href="#a-transparent">transparent</a></dd> <dt>Eigenschaften</dt> <dd><a href="#p-accessibleType">accessibleType</a>, <a href="#p-contentDocument">contentDocument</a>, <a href="#p-contentWindow">contentWindow</a>, <a href="#p-docShell">docShell</a>, <a href="#p-webNavigation">webNavigation</a></dd>
+</dl>
+<h3 id="Beispiele" name="Beispiele">Beispiele</h3>
+<pre>&lt;iframe src="table.php" flex="2" id="browserTable" name="table_frame"/&gt;
+</pre>
+<p>Einen URL aus einem Menü auswählen</p>
+<pre>&lt;menulist oncommand="doNav(this);"&gt;
+  &lt;menupopup&gt;
+    &lt;menuitem label="Mozilla" value="http://mozilla.org" /&gt;
+    &lt;menuitem label="Slashdot" value="http://slashdot.org"/&gt;
+    &lt;menuitem label="Sourceforge" value="http://sf.net" /&gt;
+    &lt;menuitem label="Freshmeat" value="http://freshmeat.net"/&gt;
+  &lt;/menupopup&gt;
+&lt;/menulist&gt;
+
+
+&lt;iframe id="myFrame" flex="1"/&gt;
+
+&lt;script&gt;
+function doNav(obj){
+  var url = obj.selectedItem.value;
+  // note the firstChild is the menupopup element
+  document.getElementById('myFrame').setAttribute('src', url);
+}
+&lt;/script&gt;
+</pre>
+<h3 id="Attribute" name="Attribute">Attribute</h3>
+<div id="a-showcaret">
+
+
+<dl>
+ <dt><code id="a-showcaret"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/showcaret">showcaret</a></code></dt>
+ <dd>Type: <em>boolean</em></dd>
+ <dd>Whether or not to cause a typing caret to be visible in the content area. Default is <code>false</code>.</dd>
+</dl>
+
+
+</div> <div id="a-src">
+
+<dl>
+  <dt>
+    <code id="a-src"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/src">src</a></code></dt>
+  <dd>
+    Typ: <em>URL</em></dd>
+  <dd>
+    Die URL des im Element anzuzeigenden Inhalts.</dd>
+</dl>
+
+</div> <div id="a-browser.type">
+
+
+<dl>
+ <dt><code id="a-browser.type"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/browser.type">type</a></code></dt>
+ <dd><span class="seoSummary">Type: <em>one of the values below</em>.</span></dd>
+ <dd><span class="seoSummary">The type of browser, which can be used to set access of the document loaded inside the browser.</span> If this is not set, the loaded document has the same access as the window containing the <code><code><a href="/en-US/docs/Mozilla/Tech/XUL/browser" title="browser">browser</a></code></code>. More precisely: The document loaded into a chrome window is always of chrome type. Subdocuments of chrome documents are of chrome type, unless the container element (one of iframe, browser or editor) has one of the special type attribute values (the common ones are content, content-targetable and content-primary) indicating that the subdocument is of content type. This boundary has a number of special effects, such as making window.top == window (unless the <code><code><a href="/en-US/docs/Mozilla/Tech/XUL/browser" title="browser">browser</a></code></code> is added to a chrome document), and preventing documents from inheriting the principal of the parent document. The type attribute on all frames in content documents is ignored; subdocuments of content documents are always content documents.</dd>
+ <dt>
+ <div class="warning"><strong>Warning: </strong>The type attribute must be set before the element is inserted into the document.</div>
+ </dt>
+ <dd>
+ <dl>
+  <dt><code>content</code></dt>
+  <dd>A browser for content. The content that is loaded inside the browser is not allowed to access the chrome above it.</dd>
+  <dt><code>content-primary</code></dt>
+  <dd>The primary browser for content. The content that is loaded inside the browser is not allowed to access the chrome above it. For instance, in a web browser, this would be the element that displays the web page. The window for the primary content can be retrieved more conveniently using <a href="/en/DOM/window.content" title="en/DOM/window.content">window.content</a>.</dd>
+  <dt><code>content-targetable</code></dt>
+  <dd>One browser among many for content. The content that is loaded inside the browser is not allowed to access the chrome above it. This is the preferred value for any <code><code><a href="/en-US/docs/Mozilla/Tech/XUL/browser" title="browser">browser</a></code></code> element in an application, which will use multiple browsers of equal privileges, and is unselected at the moment.</dd>
+  <dt><code>chrome</code></dt>
+  <dd>(default behaviour): A browser, intended to be used for loading privileged content using a chrome:// URI. Don't use for content from web, as this may cause serious security problems!</dd>
+ </dl>
+ </dd>
+</dl>
+
+
+</div> <div id="a-transparent">
+<dl><dt><code id="a-iframe.transparent"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/iframe.transparent">transparent</a></code></dt><dd>Type: <em>one of the values below</em></dd><dd>Set the background of an <code><code><a href="/en-US/docs/Mozilla/Tech/XUL/iframe" title="iframe">iframe</a></code></code> as transparent.</dd><dd><dl><dt><code>transparent</code></dt><dd>This results in the iframe's background being transparent. This can be used to workaround things like <a class="    link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=540911" title="https://bugzilla.mozilla.org/show_bug.cgi?id=540911">bug 540911</a></dd></dl></dd>
+</dl>
+</div> <table style="border: 1px solid rgb(204, 204, 204); margin: 0 0 10px 10px; padding: 0 10px; background: rgb(238, 238, 238);">
+<tbody>
+<tr>
+<td><p><strong>Geerbt von XUL-Element</strong><br> <small>
+<code id="a-align"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code>,
+<code id="a-allowevents"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/allowevents">allowevents</a></code>,
+<code id="a-allownegativeassertions"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/allownegativeassertions">allownegativeassertions</a></code>,
+<code id="a-class"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/class">class</a></code>,
+<code id="a-coalesceduplicatearcs"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/coalesceduplicatearcs">coalesceduplicatearcs</a></code>,
+<code id="a-collapsed"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/collapsed">collapsed</a></code>,
+<code id="a-container"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/container">container</a></code>,
+<code id="a-containment"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/containment">containment</a></code>,
+<code id="a-context"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/context">context</a></code>,
+<code id="a-contextmenu"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/contextmenu">contextmenu</a></code>,
+<code id="a-datasources"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/datasources">datasources</a></code>,
+<code id="a-dir"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code>,
+<code id="a-empty"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/empty">empty</a></code>,
+<code id="a-equalsize"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/equalsize">equalsize</a></code>,
+<code id="a-flags"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/flags">flags</a></code>,
+<code id="a-flex"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code>,
+<code id="a-height"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/height">height</a></code>,
+<code id="a-hidden"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/hidden">hidden</a></code>,
+<code id="a-id"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code>,
+<code id="a-insertafter"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/insertafter">insertafter</a></code>,
+<code id="a-insertbefore"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/insertbefore">insertbefore</a></code>,
+<code id="a-left"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/left">left</a></code>,
+<code id="a-maxheight"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/maxheight">maxheight</a></code>,
+<code id="a-maxwidth"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/maxwidth">maxwidth</a></code>,
+<code id="a-menu"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/menu">menu</a></code>,
+<code id="a-minheight"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/minheight">minheight</a></code>,
+<code id="a-minwidth"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/minwidth">minwidth</a></code>,
+<code id="a-mousethrough"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/mousethrough">mousethrough</a></code>,
+<code id="a-observes"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/observes">observes</a></code>,
+<code id="a-ordinal"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/ordinal">ordinal</a></code>,
+<code id="a-orient"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code>,
+<code id="a-pack"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code>,
+<code id="a-persist"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/persist">persist</a></code>,
+<code id="a-popup"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/popup">popup</a></code>,
+<code id="a-position"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/position">position</a></code>,
+<code id="a-preference-editable"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/preference-editable">preference-editable</a></code>,
+<code id="a-querytype"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/querytype">querytype</a></code>,
+<code id="a-ref"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/ref">ref</a></code>,
+<code id="a-removeelement"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/removeelement">removeelement</a></code>,
+<code id="a-sortDirection"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/sortDirection">sortDirection</a></code>,
+<code id="a-sortResource"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/sortResource">sortResource</a></code>,
+<code id="a-sortResource2"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/sortResource2">sortResource2</a></code>,
+<code id="a-statustext"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/statustext">statustext</a></code>,
+<code id="a-style"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/style">style</a></code>,
+<code id="a-template"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/template">template</a></code>,
+<code id="a-tooltip"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/tooltip">tooltip</a></code>,
+<code id="a-tooltiptext"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/tooltiptext">tooltiptext</a></code>,
+<code id="a-top"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/top">top</a></code>,
+<code id="a-uri"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/uri">uri</a></code>,
+<code id="a-wait-cursor"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/wait-cursor">wait-cursor</a></code>,
+<code id="a-width"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/width">width</a></code> </small></p>
+</td>
+</tr>
+</tbody>
+</table>
+<h3 id="Eigenschaften" name="Eigenschaften">Eigenschaften</h3>
+<p> </p><div id="p-accessibleType"></div> <div id="p-contentDocument"></div> <div id="p-contentWindow"></div> <div id="p-docShell"></div> <div id="p-webNavigation"></div>
+<h3 id="Methoden" name="Methoden">Methoden</h3>
+<table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Geerbte Methoden</strong><br> <small><code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.addEventListener">element.addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.appendChild">node.appendChild()</a></code>, <span id="m-blur"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/click">click</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.cloneNode">node.cloneNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.compareDocumentPosition">node.compareDocumentPosition()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.dispatchEvent">element.dispatchEvent()</a></code>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/focus">focus</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttribute">element.getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNode">element.getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNodeNS">element.getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNS">element.getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getBoundingClientRect">element.getBoundingClientRect()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getClientRects">element.getClientRects()</a></code>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/getElementsByAttribute">getElementsByAttribute</a></code></span>, <span id="m-getElementsByAttributeNS"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/getElementsByAttributeNS">getElementsByAttributeNS</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByClassName">element.getElementsByClassName()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByTagName">element.getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByTagNameNS">element.getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.getFeature">node.getFeature()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.getUserData">node.getUserData()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.hasAttribute">element.hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.hasAttributeNS">element.hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.nodes.hasAttributes">nodes.hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.nodes.hasChildNodes">nodes.hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.insertBefore">node.insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isDefaultNamespace">node.isDefaultNamespace()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isEqualNode">node.isEqualNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isSameNode">node.isSameNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isSupported">node.isSupported()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.lookupNamespaceURI">node.lookupNamespaceURI()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.lookupPrefix">node.lookupPrefix()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.normalize">node.normalize()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.querySelector">element.querySelector()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.querySelectorAll">element.querySelectorAll()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttribute">element.removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttributeNode">element.removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttributeNS">element.removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.removeChild">node.removeChild()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeEventListener">element.removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.replaceChild">node.replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttribute">element.setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNode">element.setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNodeNS">element.setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNS">element.setAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.setUserData">node.setUserData()</a></code></small></p> </td> </tr> </tbody>
+</table>
+<h3 id="Verwandte_Themen" name="Verwandte_Themen">Verwandte Themen</h3>
+<dl> <dt>Schnittstellen</dt> <dd><a href="/de/NsIAccessibleProvider" title="de/NsIAccessibleProvider">nsIAccessibleProvider</a></dd>
+</dl>
diff --git a/files/de/archive/mozilla/xul/index.html b/files/de/archive/mozilla/xul/index.html
new file mode 100644
index 0000000000..d275bb0520
--- /dev/null
+++ b/files/de/archive/mozilla/xul/index.html
@@ -0,0 +1,83 @@
+---
+title: XUL
+slug: Archive/Mozilla/XUL
+tags:
+  - XUL
+translation_of: Archive/Mozilla/XUL
+---
+<div class="callout-box"><strong><a href="/de/XUL_Tutorial" title="de/XUL_Tutorial">XUL Tutorial</a></strong><br>
+Ein geführter Leitfaden für einen schnellen Einstieg in XUL, ursprünglich von XULPlanet.</div>
+
+<div><strong>XUL</strong> (XML User Interface Language) ist Mozillas <a href="/de/XML" title="de/XML">XML</a>-basierte Beschreibungssprache, die plattformübergreifende Anwendungen ermöglicht, die unabhängig von einer bestehenden Internetverbindung ausgeführt werden können. Diese Anwendungen können leicht (z.B. sprachlich) mittels alternativen Texten oder Layouts und alternativer Grafik angepasst werden. Web-Entwickler, die bereits mit dynamischen HTML (<a href="/de/DHTML" title="de/DHTML">DHTML</a>) vertraut sind, finden sich schnell in XUL zurecht und können direkt mit dem Bauen von Anwendungen beginnen. Das <a class="external" href="http://www.hevanet.com/acorbin/xul/top.xul">XUL Periodensystem</a> zeigt in Firefox oder einem anderen <a href="/de/Gecko" title="de/Gecko">Gecko</a>-basierten Browser einige XUL-Demos, die einen guten Überblick liefern.</div>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h4 id="Dokumentation" name="Dokumentation"><a href="/Special:Tags?tag=XUL&amp;language=de" title="Special:Tags?tag=XUL&amp;language=de">Dokumentation</a></h4>
+
+    <dl>
+     <dt><a href="/de/XUL_Referenz" title="de/XUL_Referenz">XUL Referenz</a></dt>
+     <dd><small>XUL Elemente, Attribute, Eigenschaften, Methoden, und Eventhandler.</small></dd>
+     <dt><a href="/de/XUL_Bedienelemente" title="de/XUL_Bedienelemente">XUL Bedienelemente</a></dt>
+     <dd><small>Eine kurze Liste aller verfügbaren XUL Bedienelemente.</small></dd>
+     <dt><a href="/de/XUL_School" title="de/XUL_School">XUL School</a></dt>
+     <dd><small>Eine sehr ausführliche Tutorial-Reihe über die Entwicklung von Add-ons in Mozilla.</small></dd>
+     <dt><a href="/de/XUL_Überblick" title="de/XUL_Überblick">XUL Überblick</a></dt>
+     <dd><small>Beschreibung der wichtigsten Eigenschaften und Komponenten von XUL.</small></dd>
+     <dt><a href="/de/XUL/PopupGuide" title="de/XUL/PopupGuide">Menüs und Popups</a></dt>
+     <dd><small>Ein Leitfaden zur Verwendung von Menüs und Popup-Panels.</small></dd>
+     <dt><a href="/de/XUL/Vorlagen_Tutorial" title="de/XUL/Vorlagen_Tutorial">Leitfaden für Vorlagen</a></dt>
+     <dd><small>Ein detaillierter Leitfaden für XUL Vorlagen (Templates), einem Mittel zur Erzeugung von Inhalt aus Datenquellen.</small></dd>
+     <dt><a href="/de/DragDrop/Drag_und_Drop" title="Drag und Drop">Drag und Drop</a></dt>
+     <dd><small>Wie man Drag und Drop Operationen ausführen kann.</small></dd>
+     <dt><a href="/de/XUL_Verbesserungen_in_Firefox_3" title="de/XUL_Verbesserungen_in_Firefox_3">XUL Anwendungen für Firefox 3 anpassen</a></dt>
+     <dd><small>Eine Liste von Änderungen in <a href="/de/Firefox_3_für_Entwickler" title="de/Firefox_3_für_Entwickler">Firefox 3.0</a>, die XUL-Entwickler betreffen.</small></dd>
+     <dt><a href="/de/Firefox_2_für_Entwickler" title="de/Firefox_2_für_Entwickler">XUL Anwendungen für Firefox 2 anpassen</a></dt>
+     <dd><small>Eine Liste von Änderungen in <a href="/de/Firefox_2_für_Entwickler" title="de/Firefox_2_für_Entwickler">Firefox 2.0</a>, die XUL-Entwickler betreffen.</small></dd>
+     <dt><a href="/de/XUL_Anwendungen_für_Firefox_1.5_anpassen" title="de/XUL_Anwendungen_für_Firefox_1.5_anpassen">XUL Anwendungen für Firefox 1.5 anpassen</a></dt>
+     <dd><small>Eine Liste von Änderungen in <a class="external">Firefox 1.5</a>, die XUL-Entwickler betreffen.</small></dd>
+    </dl>
+
+    <p><span class="alllinks"><a href="/Special:Tags?tag=XUL&amp;language=de" title="Special:Tags?tag=XUL&amp;language=de">Alle anzeigen...</a></span></p>
+
+    <dl>
+    </dl>
+   </td>
+   <td>
+    <h4 id="Community">Community</h4>
+
+    <ul>
+     <li>Mozillas XUL Foren:</li>
+    </ul>
+
+    <p>{{ DiscussionList("dev-tech-xul", "mozilla.dev.tech.xul") }}</p>
+
+    <ul>
+     <li><a class="link-irc" href="irc://irc.mozilla.org/xul">#xul auf irc.mozilla.org</a></li>
+    </ul>
+
+    <h4 id="Tools">Tools</h4>
+
+    <ul>
+     <li><a class="external" href="http://starkravingfinkle.org/blog/xul-explorer/">XUL Explorer</a> (eine leichtgewichtige XUL IDE)</li>
+     <li><a class="external" href="http://ted.mielczarek.org/code/mozilla/extensiondev/">Extension developer's extension</a> (featuring a Live XUL Editor)</li>
+     <li><a class="external" href="http://www.extensionsmirror.nl/index.php?showtopic=751">XULRef sidebar</a></li>
+     <li><a class="external" href="http://www.getfirebug.com/">Firebug</a></li>
+     <li><a href="/en/DOM_Inspector" title="en/DOM_Inspector">DOM Inspector</a></li>
+     <li><a class="external" href="http://www.spket.com/">Spket IDE</a>, IDE für XUL/XBL</li>
+     <li><a class="external" href="http://www.amplesdk.com" title="http://www.amplesdk.com/">Ample SDK</a>, (Browser-übergreifender XUL-Renderer in JavaScript/HTML)</li>
+     <li><a href="/Special:Tags?tag=XUL:Tools&amp;language=de" title="Special:Tags?tag=XUL:Tools&amp;language=de">weitere...</a></li>
+    </ul>
+
+    <h4 id="Verwandte_Themen" name="Verwandte_Themen">Verwandte Themen</h4>
+
+    <dl>
+     <dd><a href="/de/JavaScript" title="de/JavaScript">JavaScript</a>, <a href="/de/XBL" title="de/XBL">XBL</a>, <a href="/de/CSS" title="de/CSS">CSS</a>, <a href="/de/RDF" title="de/RDF">RDF</a>, <a href="/de/Erweiterungen" title="de/Erweiterungen">Erweiterungen</a>, <a href="/de/XULRunner" title="de/XULRunner">XULRunner</a></dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{ languages( { "en": "en/XUL", "es": "es/XUL", "fr": "fr/XUL", "it": "it/XUL", "ja": "ja/XUL", "ko": "ko/XUL", "pl": "pl/XUL", "pt": "pt/XUL", "ru": "ru/XUL", "zh-cn": "cn/XUL", "zh-tw": "zh_tw/XUL" } ) }}</p>
diff --git a/files/de/archive/mozilla/xul/method/geticon/index.html b/files/de/archive/mozilla/xul/method/geticon/index.html
new file mode 100644
index 0000000000..cb0dd30447
--- /dev/null
+++ b/files/de/archive/mozilla/xul/method/geticon/index.html
@@ -0,0 +1,15 @@
+---
+title: getIcon
+slug: Archive/Mozilla/XUL/Method/getIcon
+translation_of: Archive/Mozilla/XUL/Method/getIcon
+---
+<div class="noinclude">
+ <span class="breadcrumbs XULRefMeth_breadcrumbs">« <a href="/de/docs/XUL_Referenz" title="/de/docs/XUL_Referenz">XUL-Referenz Startseite</a></span></div>
+<dl>
+ <dt>
+  <span id="m-getIcon"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/getIcon">getIcon( aTab )</a></code></span> </dt>
+ <dd>
+  Return type: <em>string</em></dd>
+ <dd>
+  Returns the URL of the specified tab's favicon. If <code>aTab</code> is null, the current tab's icon is returned. See <span id="m-setIcon"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/setIcon">setIcon</a></code></span> to set the icon.</dd>
+</dl>
diff --git a/files/de/archive/mozilla/xul/method/gettabforbrowser/index.html b/files/de/archive/mozilla/xul/method/gettabforbrowser/index.html
new file mode 100644
index 0000000000..bc48db12b9
--- /dev/null
+++ b/files/de/archive/mozilla/xul/method/gettabforbrowser/index.html
@@ -0,0 +1,15 @@
+---
+title: getTabForBrowser
+slug: Archive/Mozilla/XUL/Method/getTabForBrowser
+translation_of: Archive/Mozilla/XUL/Method/getTabForBrowser
+---
+<div class="noinclude">
+ <span class="breadcrumbs XULRefMeth_breadcrumbs">« <a href="/de/docs/XUL_Referenz" title="/de/docs/XUL_Referenz">XUL-Referenz Startseite</a></span></div>
+<dl>
+ <dt>
+  <span id="m-getTabForBrowser"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/getTabForBrowser">getTabForBrowser( browser )</a></code></span> </dt>
+ <dd>
+  Return type:<em> <code><a href="/de/docs/Mozilla/Tech/XUL/tab" title="tab">tab</a></code></em></dd>
+ <dd>
+  Returns the XUL <code><a href="/de/docs/Mozilla/Tech/XUL/tab" title="tab">tab</a></code> which contains the specified <code><a href="/de/docs/Mozilla/Tech/XUL/browser" title="browser">browser</a></code>.</dd>
+</dl>
diff --git a/files/de/archive/mozilla/xul/method/index.html b/files/de/archive/mozilla/xul/method/index.html
new file mode 100644
index 0000000000..934c525318
--- /dev/null
+++ b/files/de/archive/mozilla/xul/method/index.html
@@ -0,0 +1,14 @@
+---
+title: Methoden
+slug: Archive/Mozilla/XUL/Method
+tags:
+  - XUL Methoden
+  - XUL Referenz
+translation_of: Archive/Mozilla/XUL/Method
+---
+<p><span class="breadcrumbs XULRefMeth_breadcrumbs">« <a href="/de/docs/XUL_Referenz" title="/de/docs/XUL_Referenz">XUL-Referenz Startseite</a></span></p>
+<ul> <li><a href="/de/XUL/Method/acceptDialog" title="de/XUL/Method/acceptDialog">acceptDialog</a></li> <li><a href="/de/XUL/Method/addItemToSelection" title="de/XUL/Method/addItemToSelection">addItemToSelection</a></li> <li><a href="/de/XUL/Method/addPane" title="de/XUL/Method/addPane">addPane</a></li> <li><a href="/de/XUL/Method/addProgressListener" title="de/XUL/Method/addProgressListener">addProgressListener</a></li> <li><a href="/de/XUL/Method/addSession" title="de/XUL/Method/addSession">addSession</a></li> <li><a href="/de/XUL/Method/addTab" title="de/XUL/Method/addTab">addTab</a></li> <li><a href="/de/XUL/Method/AddTabsProgressListener" title="de/XUL/Method/addTab">addTabsProgressListener</a></li> <li><a href="/de/XUL/Method/advance" title="de/XUL/Method/advance">advance</a></li> <li><a href="/de/XUL/Method/advanceSelectedTab" title="de/XUL/Method/advanceSelectedTab">advanceSelectedTab</a></li> <li><a href="/de/XUL/Method/appendCustomToolbar" title="de/XUL/Method/appendCustomToolbar">appendCustomToolbar</a></li> <li><a href="/de/XUL/Method/appendGroup" title="de/XUL/Method/appendGroup">appendGroup</a></li> <li><a href="/de/XUL/Method/appendItem" title="de/XUL/Method/appendItem">appendItem</a></li> <li><a href="/de/XUL/Method/appendNotification" title="de/XUL/Method/appendNotification">appendNotification</a></li> <li><a href="/de/XUL/Method/blur" title="de/XUL/Method/blur">blur</a></li> <li><a href="/de/XUL/Method/cancel" title="de/XUL/Method/cancel">cancel</a></li> <li><a href="/de/XUL/Method/cancelDialog" title="de/XUL/Method/cancelDialog">cancelDialog</a></li> <li><a href="/de/XUL/Method/centerWindowOnScreen" title="de/XUL/Method/centerWindowOnScreen">centerWindowOnScreen</a></li> <li><a href="/de/XUL/Method/checkAdjacentElement" title="de/XUL/Method/checkAdjacentElement">checkAdjacentElement</a></li> <li><a href="/de/XUL/Method/clearResults" title="de/XUL/Method/clearResults">clearResults</a></li> <li><a href="/de/XUL/Method/clearSelection" title="de/XUL/Method/clearSelection">clearSelection</a></li> <li><a href="/de/XUL/Method/click" title="de/XUL/Method/click">click</a></li> <li><a href="/de/XUL/Method/close" title="de/XUL/Method/close">close</a></li> <li><a href="/de/XUL/Method/collapseToolbar" title="de/XUL/Method/collapseToolbar">collapseToolbar</a></li> <li><a href="/de/XUL/Method/contains" title="de/XUL/Method/contains">contains</a></li> <li><a href="/de/XUL/Method/decrease" title="de/XUL/Method/decrease">decrease</a></li> <li><a href="/de/XUL/Method/decreasePage" title="de/XUL/Method/decreasePage">decreasePage</a></li> <li><a href="/de/XUL/Method/doCommand" title="de/XUL/Method/doCommand">doCommand</a></li> <li><a href="/de/XUL/Method/ensureElementIsVisible" title="de/XUL/Method/ensureElementIsVisible">ensureElementIsVisible</a></li> <li><a href="/de/XUL/Method/ensureIndexIsVisible" title="de/XUL/Method/ensureIndexIsVisible">ensureIndexIsVisible</a></li> <li><a href="/de/XUL/Method/ensureSelectedElementIsVisible" title="de/XUL/Method/ensureSelectedElementIsVisible">ensureSelectedElementIsVisible</a></li> <li><a href="/de/XUL/Method/expandToolbar" title="de/XUL/Method/expandToolbar">expandToolbar</a></li> <li><a href="/de/XUL/Method/extra1" title="de/XUL/Method/extra1">extra1</a></li> <li><a href="/de/XUL/Method/extra2" title="de/XUL/Method/extra2">extra2</a></li> <li><a href="/de/XUL/Method/focus" title="de/XUL/Method/focus">focus</a></li> <li><a href="/de/XUL/Method/getBrowserAtIndex" title="de/XUL/Method/getBrowserAtIndex">getBrowserAtIndex</a></li> <li><a href="/de/XUL/Method/getBrowserForDocument" title="de/XUL/Method/getBrowserForDocument">getBrowserForDocument</a></li> <li><a href="/de/XUL/Method/getBrowserForTab" title="de/XUL/Method/getBrowserForTab">getBrowserForTab</a></li> <li><a href="/de/XUL/Method/getBrowserIndexForDocument" title="de/XUL/Method/getBrowserIndexForDocument">getBrowserIndexForDocument</a></li> <li><a href="/de/XUL/Method/getButton" title="de/XUL/Method/getButton">getButton</a></li> <li><a href="/de/XUL/Method/getDefaultSession" title="de/XUL/Method/getDefaultSession">getDefaultSession</a></li> <li><a href="/de/XUL/Method/getEditor" title="de/XUL/Method/getEditor">getEditor</a></li> <li><a href="/de/XUL/Method/getElementsByAttribute" title="de/XUL/Method/getElementsByAttribute">getElementsByAttribute</a></li> <li><a href="/de/XUL/Method/getElementsByAttributeNS" title="de/XUL/Method/getElementsByAttributeNS">getElementsByAttributeNS</a></li> <li><a href="/de/XUL/Method/getFormattedString" title="de/XUL/Method/getFormattedString">getFormattedString</a></li> <li><a href="/de/XUL/Method/getHTMLEditor" title="de/XUL/Method/getHTMLEditor">getHTMLEditor</a></li> <li><a href="/de/XUL/Method/getIndexOfFirstVisibleRow" title="de/XUL/Method/getIndexOfFirstVisibleRow">getIndexOfFirstVisibleRow</a></li> <li><a href="/de/XUL/Method/getIndexOfItem" title="de/XUL/Method/getIndexOfItem">getIndexOfItem</a></li> <li><a href="/de/XUL/Method/getItemAtIndex" title="de/XUL/Method/getItemAtIndex">getItemAtIndex</a></li> <li><a href="/de/XUL/Method/getNextItem" title="de/XUL/Method/getNextItem">getNextItem</a></li> <li><a href="/de/XUL/Method/getNotificationBox" title="de/XUL/Method/getNotificationBox">getNotificationBox</a></li> <li><a href="/de/XUL/Method/getNotificationWithValue" title="de/XUL/Method/getNotificationWithValue">getNotificationWithValue</a></li> <li><a href="/de/XUL/Method/getNumberOfVisibleRows" title="de/XUL/Method/getNumberOfVisibleRows">getNumberOfVisibleRows</a></li> <li><a href="/de/XUL/Method/getPageById" title="de/XUL/Method/getPageById">getPageById</a></li> <li><a href="/de/XUL/Method/getPreviousItem" title="de/XUL/Method/getPreviousItem">getPreviousItem</a></li> <li><a href="/de/XUL/Method/getResultAt" title="de/XUL/Method/getResultAt">getResultAt</a></li> <li><a href="/de/XUL/Method/getResultCount" title="de/XUL/Method/getResultCount">getResultCount</a></li> <li><a href="/de/XUL/Method/getResultValueAt" title="de/XUL/Method/getResultValueAt">getResultValueAt</a></li> <li><a href="/de/XUL/Method/getRowCount" title="de/XUL/Method/getRowCount">getRowCount</a></li> <li><a href="/de/XUL/Method/getSearchAt" title="de/XUL/Method/getSearchAt">getSearchAt</a></li> <li><a href="/de/XUL/Method/getSelectedItem" title="de/XUL/Method/getSelectedItem">getSelectedItem</a></li> <li><a href="/de/XUL/Method/getSession" title="de/XUL/Method/getSession">getSession</a></li> <li><a href="/de/XUL/Method/getSessionByName" title="de/XUL/Method/getSessionByName">getSessionByName</a></li> <li><a href="/de/XUL/Method/getSessionResultAt" title="de/XUL/Method/getSessionResultAt">getSessionResultAt</a></li> <li><a href="/de/XUL/Method/getSessionStatusAt" title="de/XUL/Method/getSessionStatusAt">getSessionStatusAt</a></li> <li><a href="/de/XUL/Method/getSessionValueAt" title="de/XUL/Method/getSessionValueAt">getSessionValueAt</a></li> <li><a href="/de/XUL/Method/getString" title="de/XUL/Method/getString">getString</a></li> <li><a href="/de/XUL/Method/goBack" title="de/XUL/Method/goBack">goBack</a></li> <li><a href="/de/XUL/Method/goBackGroup" title="de/XUL/Method/goBackGroup">goBackGroup</a></li> <li><a href="/de/XUL/Method/goDown" title="de/XUL/Method/goDown">goDown</a></li> <li><a href="/de/XUL/Method/goForward" title="de/XUL/Method/goForward">goForward</a></li> <li><a href="/de/XUL/Method/goForwardGroup" title="de/XUL/Method/goForwardGroup">goForwardGroup</a></li> <li><a href="/de/XUL/Method/goHome" title="de/XUL/Method/goHome">goHome</a></li> <li><a href="/de/XUL/Method/goTo" title="de/XUL/Method/goTo">goTo</a></li> <li><a href="/de/XUL/Method/gotoIndex" title="de/XUL/Method/gotoIndex">gotoIndex</a></li> <li><a href="/de/XUL/Method/goUp" title="de/XUL/Method/goUp">goUp</a></li> <li><a href="/de/XUL/Method/hidePopup" title="de/XUL/Method/hidePopup">hidePopup</a></li> <li><a href="/de/XUL/Method/increase" title="de/XUL/Method/increase">increase</a></li> <li><a href="/de/XUL/Method/increasePage" title="de/XUL/Method/increasePage">increasePage</a></li> <li><a href="/de/XUL/Method/insertItem" title="de/XUL/Method/insertItem">insertItem</a></li> <li><a href="/de/XUL/Method/insertItemAt" title="de/XUL/Method/insertItemAt">insertItemAt</a></li> <li><a href="/de/XUL/Method/invertSelection" title="de/XUL/Method/invertSelection">invertSelection</a></li> <li><a href="/de/XUL/Method/loadGroup" title="de/XUL/Method/loadGroup">loadGroup</a></li> <li><a href="/de/XUL/Method/loadOneTab" title="de/XUL/Method/loadOneTab">loadOneTab</a></li> <li><a href="/de/XUL/Method/loadTabs" title="de/XUL/Method/loadTabs">loadTabs</a></li> <li><a href="/de/XUL/Method/loadURI" title="de/XUL/Method/loadURI">loadURI</a></li> <li><a href="/de/XUL/Method/loadURIWithFlags" title="de/XUL/Method/loadURIWithFlags">loadURIWithFlags</a></li> <li><a href="/de/XUL/Method/makeEditable" title="de/XUL/Method/makeEditable">makeEditable</a></li> <li><a href="/de/XUL/Method/moveByOffset" title="de/XUL/Method/moveByOffset">moveByOffset</a></li> <li><a href="/de/XUL/Method/moveTo" title="de/XUL/Method/moveTo">moveTo</a></li> <li><a href="/de/XUL/Method/moveToAlertPosition" title="de/XUL/Method/moveToAlertPosition">moveToAlertPosition</a></li> <li><a href="/de/XUL/Method/onSearchComplete" title="de/XUL/Method/onSearchComplete">onSearchComplete</a></li> <li><a href="/de/XUL/Method/onTextEntered" title="de/XUL/Method/onTextEntered">onTextEntered</a></li> <li><a href="/de/XUL/Method/onTextReverted" title="de/XUL/Method/onTextReverted">onTextReverted</a></li> <li><a href="/de/XUL/Method/openPopup" title="de/XUL/Method/openPopup">openPopup</a></li> <li><a href="/de/XUL/Method/openPopupAtScreen" title="de/XUL/Method/openPopupAtScreen">openPopupAtScreen</a></li> <li><a href="/de/XUL/Method/openSubDialog" title="de/XUL/Method/openSubDialog">openSubDialog</a></li> <li><a href="/de/XUL/Method/openWindow" title="de/XUL/Method/openWindow">openWindow</a></li> <li><a href="/de/XUL/Method/preferenceForElement" title="de/XUL/Method/preferenceForElement">preferenceForElement</a></li> <li><a href="/de/XUL/Method/reload" title="de/XUL/Method/reload">reload</a></li> <li><a href="/de/XUL/Method/reloadAllTabs" title="de/XUL/Method/reloadAllTabs">reloadAllTabs</a></li> <li><a href="/de/XUL/Method/reloadTab" title="de/XUL/Method/reloadTab">reloadTab</a></li> <li><a href="/de/XUL/Method/reloadWithFlags" title="de/XUL/Method/reloadWithFlags">reloadWithFlags</a></li> <li><a href="/de/XUL/Method/removeAllItems" title="de/XUL/Method/removeAllItems">removeAllItems</a></li> <li><a href="/de/XUL/Method/removeAllNotifications" title="de/XUL/Method/removeAllNotifications">removeAllNotifications</a></li> <li><a href="/de/XUL/Method/removeAllTabsBut" title="de/XUL/Method/removeAllTabsBut">removeAllTabsBut</a></li> <li><a href="/de/XUL/Method/removeCurrentNotification" title="de/XUL/Method/removeCurrentNotification">removeCurrentNotification</a></li> <li><a href="/de/XUL/Method/removeCurrentTab" title="de/XUL/Method/removeCurrentTab">removeCurrentTab</a></li> <li><a href="/de/XUL/Method/removeItemAt" title="de/XUL/Method/removeItemAt">removeItemAt</a></li> <li><a href="/de/XUL/Method/removeItemFromSelection" title="de/XUL/Method/removeItemFromSelection">removeItemFromSelection</a></li> <li><a href="/de/XUL/Method/removeNotification" title="de/XUL/Method/removeNotification">removeNotification</a></li> <li><a href="/de/XUL/Method/removeProgressListener" title="de/XUL/Method/removeProgressListener">removeProgressListener</a></li> <li><a href="/de/XUL/Method/removeSession" title="de/XUL/Method/removeSession">removeSession</a></li> <li><a href="/de/XUL/Method/removeTab" title="de/XUL/Method/removeTab">removeTab</a></li> <li><a href="/de/XUL/Method/RemoveTabsProgressListener" title="de/XUL/Method/removeTab">removeTabsProgressListener</a></li> <li><a href="/de/XUL/Method/removeTransientNotifications" title="de/XUL/Method/removeTransientNotifications">removeTransientNotifications</a></li> <li><a href="/de/XUL/Method/replaceGroup" title="de/XUL/Method/replaceGroup">replaceGroup</a></li> <li><a href="/de/XUL/Method/reset" title="de/XUL/Method/reset">reset</a></li> <li><a href="/de/XUL/Method/rewind" title="de/XUL/Method/rewind">rewind</a></li> <li><a href="/de/XUL/Method/scrollByIndex" title="de/XUL/Method/scrollByIndex">scrollByIndex</a></li> <li><a href="/de/XUL/Method/scrollByPixels" title="de/XUL/Method/scrollByPixels">scrollByPixels</a></li> <li><a href="/de/XUL/Method/scrollToIndex" title="de/XUL/Method/scrollToIndex">scrollToIndex</a></li> <li><a href="/de/XUL/Method/select" title="de/XUL/Method/select">select</a></li> <li><a href="/de/XUL/Method/selectAll" title="de/XUL/Method/selectAll">selectAll</a></li> <li><a href="/de/XUL/Method/selectItem" title="de/XUL/Method/selectItem">selectItem</a></li> <li><a href="/de/XUL/Method/selectItemRange" title="de/XUL/Method/selectItemRange">selectItemRange</a></li> <li><a class="internal" href="/de/XUL/Method/selectTabAtIndex" title="de/XUL/Method/selectTabAtIndex">selectTabAtIndex</a></li> <li><a href="/de/XUL/Method/setSelectionRange" title="de/XUL/Method/setSelectionRange">setSelectionRange</a></li> <li><a href="/de/XUL/Method/showPane" title="de/XUL/Method/showPane">showPane</a></li> <li><a href="/de/XUL/Method/showPopup" title="de/XUL/Method/showPopup">showPopup</a></li> <li><a href="/de/XUL/Method/sizeTo" title="de/XUL/Method/sizeTo">sizeTo</a></li> <li><a href="/de/XUL/Method/startEditing" title="de/XUL/Method/startEditing">startEditing</a></li> <li><a href="/de/XUL/Method/stop" title="de/XUL/Method/stop">stop</a></li> <li><a href="/de/XUL/Method/stopEditing" title="de/XUL/Method/stopEditing">stopEditing</a></li> <li><a href="/de/XUL/Method/SwapDocShells" title="de/XUL/Method/swapDocShells">swapDocShells</a></li> <li><a href="/de/XUL/Method/syncSessions" title="de/XUL/Method/syncSessions">syncSessions</a></li> <li><a href="/de/XUL/Method/timedSelect" title="de/XUL/Method/timedSelect">timedSelect</a></li> <li><a href="/de/XUL/Method/toggleItemSelection" title="de/XUL/Method/toggleItemSelection">toggleItemSelection</a></li>
+</ul>
+<h3 id="Verwandte_DOM-Element_Methoden">Verwandte DOM-Element Methoden</h3>
+<ul> <li><a href="/de/DOM/element.addEventListener" title="de/DOM/element.addEventListener">DOM:element.addEventListener</a></li> <li><a href="/de/DOM/Node.appendChild" title="de/DOM/element.appendChild">DOM:element.appendChild</a></li> <li><a href="/de/DOM/Node.compareDocumentPosition" title="de/DOM/Node.compareDocumentPosition">DOM:element.compareDocumentPosition</a></li> <li><a href="/de/DOM/element.dispatchEvent" title="de/DOM/element.dispatchEvent">DOM:element.dispatchEvent</a></li> <li><a href="/de/DOM/element.getAttribute" title="de/DOM/element.getAttribute">DOM:element.getAttribute</a></li> <li><a href="/de/DOM/element.getAttributeNode" title="de/DOM/element.getAttributeNode">DOM:element.getAttributeNode</a></li> <li><a href="/de/DOM/element.getAttributeNodeNS" title="de/DOM/element.getAttributeNodeNS">DOM:element.getAttributeNodeNS</a></li> <li><a href="/de/DOM/element.getAttributeNS" title="de/DOM/element.getAttributeNS">DOM:element.getAttributeNS</a></li> <li><a href="/de/DOM/element.getElementsByTagName" title="de/DOM/element.getElementsByTagName">DOM:element.getElementsByTagName</a></li> <li><a href="/de/DOM/element.getElementsByTagNameNS" title="de/DOM/element.getElementsByTagNameNS">DOM:element.getElementsByTagNameNS</a></li> <li><a href="/de/DOM/Node.getFeature" title="de/DOM/Node.getFeature">DOM:element.getFeature</a></li> <li><a href="/de/DOM/Node.getUserData" title="de/DOM/Node.getUserData">DOM:element.getUserData</a></li> <li><a href="/de/DOM/element.hasAttribute" title="de/DOM/element.hasAttribute">DOM:element.hasAttribute</a></li> <li><a href="/de/DOM/element.hasAttributeNS" title="de/DOM/element.hasAttributeNS">DOM:element.hasAttributeNS</a></li> <li><a href="/de/DOM/Node.hasAttributes" title="de/DOM/element.hasAttributes">DOM:element.hasAttributes</a></li> <li><a href="/de/DOM/Node.hasChildNodes" title="de/DOM/element.hasChildNodes">DOM:element.hasChildNodes</a></li> <li><a href="/de/DOM/Node.insertBefore" title="de/DOM/element.insertBefore">DOM:element.insertBefore</a></li> <li><a href="/de/DOM/Node.isEqualNode" title="de/DOM/Node.isEqualNode">DOM:element.isEqualNode</a></li> <li><a href="/de/DOM/Node.isSameNode" title="de/DOM/Node.isSameNode">DOM:element.isSameNode</a></li> <li><a href="/de/DOM/Node.isSupported" title="de/DOM/element.isSupported">DOM:element.isSupported</a></li> <li><a href="/de/DOM/Node.lookupNamespaceURI" title="de/DOM/Node.lookupNamespaceURI">DOM:element.lookupNamespaceURI</a></li> <li><a href="/de/DOM/Node.lookupPrefix" title="de/DOM/Node.lookupPrefix">DOM:element.lookupPrefix</a></li> <li><a href="/de/DOM/Node.normalize" title="de/DOM/element.normalize">DOM:element.normalize</a></li> <li><a href="/de/DOM/element.removeAttribute" title="de/DOM/element.removeAttribute">DOM:element.removeAttribute</a></li> <li><a href="/de/DOM/element.removeAttributeNode" title="de/DOM/element.removeAttributeNode">DOM:element.removeAttributeNode</a></li> <li><a href="/de/DOM/element.removeAttributeNS" title="de/DOM/element.removeAttributeNS">DOM:element.removeAttributeNS</a></li> <li><a href="/de/DOM/Node.removeChild" title="de/DOM/element.removeChild">DOM:element.removeChild</a></li> <li><a href="/de/DOM/element.removeEventListener" title="de/DOM/element.removeEventListener">DOM:element.removeEventListener</a></li> <li><a href="/de/DOM/Node.replaceChild" title="de/DOM/element.replaceChild">DOM:element.replaceChild</a></li> <li><a href="/de/DOM/element.setAttribute" title="de/DOM/element.setAttribute">DOM:element.setAttribute</a></li> <li><a href="/de/DOM/element.setAttributeNode" title="de/DOM/element.setAttributeNode">DOM:element.setAttributeNode</a></li> <li><a href="/de/DOM/element.setAttributeNodeNS" title="de/DOM/element.setAttributeNodeNS">DOM:element.setAttributeNodeNS</a></li> <li><a href="/de/DOM/element.setAttributeNS" title="de/DOM/element.setAttributeNS">DOM:element.setAttributeNS</a></li> <li><a href="/de/DOM/Node.setUserData" title="de/DOM/Node.setUserData">DOM:element.setUserData</a></li>
+</ul>
diff --git a/files/de/archive/mozilla/xul/school_tutorial/adding_menus_and_submenus/index.html b/files/de/archive/mozilla/xul/school_tutorial/adding_menus_and_submenus/index.html
new file mode 100644
index 0000000000..e48c15eade
--- /dev/null
+++ b/files/de/archive/mozilla/xul/school_tutorial/adding_menus_and_submenus/index.html
@@ -0,0 +1,99 @@
+---
+title: Adding menus and submenus
+slug: Archive/Mozilla/XUL/School_tutorial/Adding_menus_and_submenus
+translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/Adding_menus_and_submenus
+---
+<p>{{ PreviousNext("XUL_School/Setting_Up_a_Development_Environment", "XUL_School/Adding_Toolbars_and_Toolbar_Buttons") }}</p>
+<p>The Hello World example in the previous sections shows the two most common ways to add menus. In this section we'll look into more specialized menus and what you can do with them.</p>
+<h2 id="Adding_a_New_Menu">Adding a New Menu</h2>
+<p>We already saw how to add menus in overlays and, as you may have imagined, you can nest submenus as deep as you want. You should avoid having deep menus or too many options, since they are confusing for most users.</p>
+<p>If your extension requires custom XUL windows, you may also need to have menus on those windows. You can do this with a <a href="/en/XUL/menubar" title="en/XUL/menubar">menubar</a>. The <em>menubar</em> element should be a child of a <a href="/en/XUL/toolbox" title="en/XUL/toolbox">toolbox</a> element because it is treated like another toolbar on systems other than Mac OS X.</p>
+<div class="note">
+  <p>Mac OS X treats menus in a very different way than other systems. If your extension involves menus in any way, you should test it on Mac OS X to make sure everything works adequately.</p>
+</div>
+<p>The toolbox should be positioned near the top of the XUL document, and the code should be similar to this:</p>
+<pre><code>&lt;toolbox&gt;
+  &lt;menubar id="</code><code>xulschoolhello</code><code>-menubar"&gt;
+    &lt;menu id="</code><code>xulschoolhello</code><code>-greeting-menu" label="&amp;</code><code>xulschoolhello</code><code>.greeting.label;"&gt;
+      &lt;menupopup&gt;
+        &lt;menuitem label="&amp;xulschoolhello.greet.short.label;"
+          oncommand="XULSchoolChrome.GreetingDialog.greetingShort(event);" /&gt;
+        &lt;menuitem label="&amp;</code><code>xulschoolhello</code><code>.greet.medium.label;"
+          oncommand="XULSchoolChrome.GreetingDialog.greetingMedium(event);" /&gt;
+        &lt;menuitem label="&amp;</code><code>xulschoolhello</code><code>.greet.long.label;"
+          oncommand="XULSchoolChrome.GreetingDialog.greetingLong(event);" /&gt;
+        &lt;menuseparator /&gt;
+        &lt;menuitem label="&amp;</code><code>xulschoolhello</code><code>.greet.custom.label;"
+          oncommand="XULSchoolChrome.GreetingDialog.greetingCustom(event);" /&gt;
+      &lt;/menupopup&gt;
+    &lt;/menu&gt;
+  &lt;/menubar&gt;
+&lt;/toolbox&gt; </code></pre>
+<p>This code displays a simple <a href="/en/XUL/menu" title="en/XUL/menu">menu</a> with options for 3 different types of greetings, a <a href="/en/XUL/menuseparator" title="en/XUL/menuseparator">menuseparator</a>, and finally an option to show a custom greeting. The separator is usually displayed as a horizontal line that creates a logical division between different types of <a href="/en/XUL/menuitem" title="en/XUL/menuitem">menuitem</a> elements, keeping everything more organized.</p>
+<p>A <em>menubar</em> can hold one or more <em>menu</em> elements. Menus require a <a href="/en/XUL/menupopup" title="en/XUL/menupopup">menupopup</a> element as a container for its children, which are usually <em>menuitem</em> elements, but can also be <em>menuseparator,</em> or <em>menu</em> in order to have multiple nesting levels:</p>
+<pre><code>&lt;toolbox&gt;
+ &lt;menubar id="</code><code>xulschoolhello</code><code>-menubar"&gt;
+    &lt;menu id="</code><code>xulschoolhello</code><code>-greeting-menu" label="&amp;</code><code>xulschoolhello</code><code>.greeting.label;"&gt;
+      &lt;menupopup&gt;
+        &lt;menu id="</code><code>xulschoolhello</code><code>-greeting-sizes-menu" label="&amp;</code><code>xulschoolhello</code><code>.greetingSizes.label;"&gt;
+          &lt;menupopup&gt;
+            &lt;menuitem label="&amp;</code><code>xulschoolhello</code><code>.greet.short.label;"
+              oncommand="</code><code>XULSchoolChrome</code><code>.GreetingDialog.greetingShort(event);" /&gt;
+            &lt;menuitem label="&amp;</code><code>xulschoolhello</code><code>.greet.medium.label;"
+              oncommand="</code><code>XULSchoolChrome</code><code>.GreetingDialog.greetingMedium(event);" /&gt;
+            &lt;menuitem label="&amp;</code><code>xulschoolhello</code><code>.greet.long.label;"
+              oncommand="</code><code>XULSchoolChrome</code><code>.GreetingDialog.greetingLong(event);" /&gt;
+          &lt;/menupopup&gt;
+        &lt;/menu&gt;
+        &lt;menuitem label="&amp;</code><code>xulschoolhello</code><code>.greet.custom.label;"
+          oncommand="</code><code>XULSchoolChrome</code><code>.GreetingDialog.greetingCustom(event);" /&gt;
+      &lt;/menupopup&gt;
+    &lt;/menu&gt;
+  &lt;/menubar&gt;
+&lt;/toolbox&gt; </code></pre>
+<p>In this case we grouped the 3 greeting items into a submenu. It doesn't make much sense to do that in this case because we end up with only two menu items, one of them being a menu with 3 child items.</p>
+<p>You can also have menus that are filled dynamically. Instead of setting the menupopup directly in the XUL, you can use the <a href="/en/XUL/Attribute/onpopupshowing" title="en/XUL/Attribute/onpopupshowing">onpopupshowing</a> event to fill the children when the popup is about to be displayed. DOM functions like <a href="/en/DOM/document.createElement" title="en/DOM/document.createElement">createElement</a> and <a href="/En/DOM/Node.appendChild" title="En/DOM/Node.appendChild">appendChild</a> can be used to accomplish this.</p>
+<div class="note">
+  <p>If you have nothing to show on a menu, you should follow the standard used in Firefox: show a single disabled item with an "(Empty)" label.</p>
+  <p>If filling your menu takes a noticeable amount of time, you should not make Firefox (and your users) wait for it to fill up before displaying anything. It's best to show an item with a throbber image (see <a class="external" rel="freelink">chrome://global/skin/icons/loading_16.png</a>) so the user knows there's something going on, and asynchronously fill its contents. We'll look into some asynchronous techniques further ahead in the tutorial.</p>
+</div>
+<h2 id="Adding_Elements_to_Existing_Menus">Adding Elements to Existing Menus</h2>
+<p>Just as explained in the previous sections, the best place to overlay your extension menu is inside the <em>Tools</em> menu. That is, unless there's a place inside the menu structure where your extension menus make more sense. If you're overlaying the Tools menu, your overlay code should have something like this:</p>
+<pre><code>&lt;menupopup id="menu_ToolsPopup"&gt;
+  &lt;menu id="</code><code>xulschoolhello</code><code>-hello-menu" label="&amp;</code><code>xulschoolhello</code><code>.hello.label;"
+    accesskey="&amp;</code><code>xulschoolhello</code><code>.helloMenu.accesskey;"
+    insertafter="javascriptConsole,devToolsSeparator"&gt;
+    &lt;menupopup&gt;
+      &lt;!-- Your menuitem goes here. --&gt;
+    &lt;/menupopup&gt;
+  &lt;/menu&gt;
+&lt;/menupopup&gt; </code></pre>
+<p>Now let's look at some specialized types of menu items.</p>
+<h2 id="Menu_types">Menu types</h2>
+<h3 id="Checkbox_Menu_Items">Checkbox Menu Items</h3>
+<p>You can make a <em>menuitem</em> "checkable" to allow the user to enable/disable options using the menu. We use two attributes for this: <a href="/en/XUL/menuitem#a-menuitem.type" title="en/XUL/menuitem#a-menuitem.type">type</a> and <a href="/en/XUL/menuitem#a-checked" title="en/XUL/menuitem#a-checked">checked</a>. The <em>type</em> attribute must be set to "checkbox". You can set the <em>checked</em> attribute to "true" to check it by default.</p>
+<p>The item's checked state changes when the user clicks on it. An example of one such item is the View &gt; Status Bar item in the main Firefox menu.</p>
+<h3 id="Radio_Menu_Items">Radio Menu Items</h3>
+<p>If you need to have a set of <em>menuitem</em> elements where only one of them has to be checked at any given moment, you should set the <em>type</em> to "radio". The <em>name</em> attribute is used to identify the items that belong to the radio group.</p>
+<pre><code>&lt;menupopup oncommand="XULSchoolChrome.HW.GreetingDialog.greeting(event);"&gt;
+  &lt;menuitem type="radio" name="</code><code>xulschoolhello</code><code>-greeting-radio"
+    label="&amp;</code><code>xulschoolhello</code><code>.greet.short.label;" checked="true" /&gt;
+  &lt;menuitem type="radio" name="</code><code>xulschoolhello</code><code>-greeting-radio"
+    label="&amp;</code><code>xulschoolhello</code><code>.greet.medium.label;" /&gt;
+  &lt;menuitem type="radio" name="</code><code>xulschoolhello</code><code>-greeting-radio"
+    label="&amp;</code><code>xulschoolhello</code><code>.greet.long.label;" /&gt;
+&lt;/menupopup&gt; </code></pre>
+<p>This is a modified version of the 3 greeting menus. It is now implemented as a radio menu where you pick one of the 3 available choices. The first one is checked by default. The <em>oncommand</em> attribute is set on the <em>menupopup</em> to avoid code duplication, since now the 3 items call the same function.</p>
+<p>Another example of a menu like this is the View &gt; Sidebars menu. Only one sidebar is visible at any given moment, and you can pick from several.</p>
+<h3 id="Menus_with_Images">Menus with Images</h3>
+<p>To add an icon to a <em>menu</em> or <em>menuitem</em>, set its class to "menu-iconic" or "menuitem-iconic" respectively, and set the <a href="/en/XUL/Attribute/image" title="en/XUL/Attribute/image">image</a> attribute or the <a href="/en/CSS/list-style-image" title="en/CSS/list-style-image">list-style-image</a> CSS property. Menu icons are typically 16px by 16px.</p>
+<h2 id="Menus_on_Mac_OS_X">Menus on Mac OS X</h2>
+<p>As mentioned earlier, menus are very different on Mac OS X. This is because menus on Mac are located in a single menu bar which is controlled by the operating system, as opposed to menus in other systems, which are entirely controlled by Firefox. Mac OS X also has menu standards, such as the positioning of certain items that are not used in other systems. Here's a list of the known issues we've run into when handling menus on Mac:</p>
+<ul>
+  <li>The About, Preferences and Quit menu items are located under the "Firefox" menu, not the usual places you would find them. You can access these items by id through the DOM, but their parent menu is not easily accessible.</li>
+  <li>We've run into bugs when adding, removing, enabling and disabling menu items dynamically, specially the root menu items (File, Edit, View, etc). You should carefully test this behavior to make sure it works properly in your extension.</li>
+  <li>Images in menu items may not appear, showing only a narrow segment of the image instead. This seems to happen when remote images are used.</li>
+  <li>Menu items are not dynamically updated while they are open. For example, you could have a <em>menuitem</em> that tells you the current time and is updated every second. On other systems you would be able to see the item update itself without having to close the menu and then reopen. This is not the case on Mac OS.</li>
+</ul>
+<p>{{ PreviousNext("XUL_School/Setting_Up_a_Development_Environment", "XUL_School/Adding_Toolbars_and_Toolbar_Buttons") }}</p>
+<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p>
diff --git a/files/de/archive/mozilla/xul/school_tutorial/die_grundlagen_einer_erweiterung/index.html b/files/de/archive/mozilla/xul/school_tutorial/die_grundlagen_einer_erweiterung/index.html
new file mode 100644
index 0000000000..cda64ab5a8
--- /dev/null
+++ b/files/de/archive/mozilla/xul/school_tutorial/die_grundlagen_einer_erweiterung/index.html
@@ -0,0 +1,454 @@
+---
+title: Die Grundlagen einer Erweiterung
+slug: Archive/Mozilla/XUL/School_tutorial/Die_Grundlagen_einer_Erweiterung
+translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/The_Essentials_of_an_Extension
+---
+<p>{{ PreviousNext("XUL_School/Getting_Started_with_Firefox_Extensions", "XUL_School/Setting_Up_a_Development_Environment") }}</p>
+
+<h2 id="Die_install.rdf_Datei">Die install.rdf Datei</h2>
+
+<p>In der letzten Lektion haben wir uns den Inhalt der Hello World Erweiterung angesehen.Jetzt werfen wir einen Blick in diese Dateien und den Code, beginnen wir mit der install.rdf Datei. Sie können diese mit jedem Texteditor öffnen.</p>
+
+<p>Die Datei ist in einem speziellen Dialekt von XML, <a class="external" href="http://en.wikipedia.org/wiki/Resource_Description_Framework">RDF</a> genannt formatiert. RDF wird eingesetzt als ein zentraler Speichermechanismus für Forefox, aber es ist jetzt durch ein einfacheres Datenbanksystem ersetzt worden. Wir werden später in diesem Tutorial beide Speichersystem besprechen.</p>
+
+<p>Nehmen wir jetzt einen genaueren Blick auf die wichtigen Teile der Datei.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">&lt;em:id&gt;helloworld@xulschool.com&lt;/em:id&gt;</pre>
+</div>
+</div>
+
+<p>Dies ist der eindeutige Bezeichner für die Erweiterung. Firefox benötigt diesen für die Unterscheidung eurer Erweiterung von anderen Erweiterungen, aufgrunddessen ist es erforderlich das Sie eine ID haben die eindeutig ist.</p>
+
+<p>Es gibt zwei akzeptierte Standards für Add-on ID`s. Eine ist das E-Mail ähnliche Format in dem Hello World Beispiel, dieses sollte folgendermaßen aufgebaut sein <span style="color: #0000ff;"><em>&lt;project-name&gt;@&lt;yourdomain&gt;</em></span>. Die andere standard Vorgehensweise ist die Verwendung eines erzeugten <a class="external" href="http://en.wikipedia.org/wiki/Uuid">UUID</a>-Strings, welcher sehr unwahrscheinlich duppliziert ist. UNIX-basierte Systeme haben ein Kommandozeilenprogramm mit dem Namen <em>uuidgen </em>das diese UUID`S erzeugt. Auch gibt es herunterladbare Anwendungen für alle Plattformen die diese gnerieren. Die umschließenden Klammern sind nur ein Teil der Notation und hierbei handelt es sich nur um die gängige Praxis. Solange Ihre ID etwas eindeutiges hat, ist es OK diese in irgendeiner Form zu verwenden.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">&lt;em:name&gt;XUL School Hello World&lt;/em:name&gt;
+&lt;em:description&gt;Welcome to XUL School!&lt;/em:description&gt;
+&lt;em:version&gt;0.1&lt;/em:version&gt;
+&lt;em:creator&gt;Appcoast&lt;/em:creator&gt;
+<span class="code-comment">&lt;em:homepageURL&gt;https://developer.mozilla.org/en-US/docs/XUL_School&lt;/em:homepageURL&gt;</span></pre>
+
+<p><span class="code-comment">Dies sind die Informationen die angezeigt werden bevor und nachdem die Erweiterung installiert ist, die Sie im Add-on Manager sehen können. Es können viele weitere Tags für Beteiligte und Übersetzer hinzugefügt werden.</span> Die <a href="/en-US/docs/Install_Manifests" title="en/Install Manifests">vollständige Spezifikation</a> der install.rdf Datei beinhaltet alle Details.</p>
+
+<p>Seit Erweiterungen in mehrere Sprachen übersetzt werden können, ist es oft notwendig die Erweiterungsbeschreibung zu übersetzen, oder sogar deren Namen. Eine lokal begrenzte Beschreibung und Name kann mit dem folgenden Code hinzugefügt werden.</p>
+</div>
+</div>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">&lt;em:localized&gt;
+  &lt;Description&gt;
+    &lt;em:locale&gt;es-ES&lt;/em:locale&gt;
+    &lt;em:name&gt;XUL School Hola Mundo&lt;/em:name&gt;
+    &lt;em:description&gt;Bienvenido a XUL School!&lt;/em:description&gt;
+  &lt;/Description&gt;
+&lt;/em:localized&gt;</pre>
+</div>
+</div>
+
+<p>Der es-Es lokale String bedeutet das dies die spanische (es) lokalisierung für Spanien (ES) ist. Sie können soviele <em>&lt;em:localized&gt; </em>Sektionen hinzufügen wie Sie benötigen. Für Friefox 2, ist die lokaliesierungs Datei <a href="/en-US/docs/Localizing_extension_descriptions#Localizing_before_Gecko_1.9">etwas komplizierter</a>. Wir werden im weiteren die lokalisierung in diesem Kapitel besprechen.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">&lt;em:type&gt;2&lt;/em:type&gt;</pre>
+</div>
+</div>
+
+<p>Dies bestimmt, dass das Add-on als eine Erweiterung installiert wird. Sie können die verschieden möglichen Typen in der <a href="/en-US/docs/Install_Manifests#type">install.rdf Spezifikation</a> nachlesen.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">&lt;em:targetApplication&gt;
+  &lt;Description&gt;
+    &lt;em:id&gt;{ec8030f7-c20a-464f-9b0e-13a3a9e97384}&lt;/em:id&gt;
+    &lt;em:minVersion&gt;4.0&lt;/em:minVersion&gt;
+    &lt;em:maxVersion&gt;10.*&lt;/em:maxVersion&gt;
+  &lt;/Description&gt;
+&lt;/em:targetApplication&gt;
+</pre>
+</div>
+</div>
+
+<p>Dieser Knoten spezifiziert die Zielanwendung und die Zielversion für die Erweiterung, in der Regel Firefox von Version 4 bis zu Version 10. Die UUID ist die eindeutige ID von Firefox. Ander Mozilla und Mozillabasierte Anwendenungen wie z.B. Thunderbirf und Seamonkey besitzen ihre eigene. Es ist möglich eine Erweiterung zu besitzen die auf mehreren Anwendungen und Versionen arbeitet. Als Beispiel , wenn Sie eine Firefox-Erweiterung entwickeln, wird es in der Regel wenig Aufwand erfordern diese zu SeaMonkey zu portieren, welches ähnliche Features und Benutzeroberflächen besitzt.</p>
+
+<p>Die min und max Version Angabe spezifiziert den Versionbereich in dem die Erweiterung installiert werden kann. Hier gibt es mehr Informationen über das <a href="/en-US/docs/Toolkit_version_format" title="en/Toolkit version format">Versionsformat.</a> Wenn die Anwendung nicht mit dem Versionsbereich übereinstimmt, wird es Ihnen nicht erlaubt sein die Anwendung zu installieren, oder die Erweiterung wird mit einem gesetzten deaktiviert Status installiert. Benutzer können Versionsüberprüfungen über die Einstellungen deaktivieren, oder durch die Installation von Add-on`s wie den <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/15003" title="https://addons.mozilla.org/en-US/firefox/addon/15003">Add-on Compatibility Reporter</a>. Mit Anfang des Firefox 11, werden Add-on`s standardmäßig als kompatiel betrachtet und Firefox wird den Versionsbereich weitesgehend ignorieren. Das Testen Ihrer Add-on`s auf allen Firefoxversionen ist immer empfehlenswert.</p>
+
+<p>Diese Informationen werden von Firefox und anderen Mozillaanwendungen benötigt um ein Add-on zu installieren. Jeder Fehler oder fehlende Informationen werden den Installationsprozess zum Scheitern bringen, oder die Erweiterung wird mit einem gesetzten deaktvitiert Status installiert.</p>
+
+<h2 id="The_chrome.manifest_File">The chrome.manifest File</h2>
+
+<blockquote>
+<p><span style="color: #0000ff;">Chrome is the set of user interface elements of the application window that are outside of a window's content area.</span> Toolbars, menu bars, progress bars, and window title bars are all examples of elements that are typically part of the chrome.</p>
+</blockquote>
+
+<p>Auszug aus der <a href="/en-US/docs/Chrome_Registration" title="en/Chrome Registration">Chrome Registration</a>.</p>
+
+<p>Mit anderen Worten, Chrome ist alles was Sie im Firefox sehen. Alle Firefoxfenster können betrachtet werden als Zusammensetzung zweier Teilbereiche: (1) Chrome und (2) ein möglicher Inhaltsbereich, wie das das in Firefox die Anzeige von Webseiten übernimmt. Fenster wie das Downloadfenster sind ausschließlich Chrome. Der Großteil des Programmcodes einer Erweiterung liegt im Chromeordner, wie bei dem Hello World Beispiel.</p>
+
+<p>Wie wir in der Ordnerstruktur der entpackten Erweiterung gesehen haben, Chrome ist zusammengesetzt aus drei Teilbereichen: <span style="color: #0000ff;">content</span>, <span style="color: #0000ff;">locale</span> und <span style="color: #0000ff;">skin</span>. Diese drei sind notwendig für die meisten Erweiterungen. Wenn wir die <em>chrome.manifest</em>-Datei erneut öffnen (nochmals jeder Texteditor kann hierfür verwendet werden), werden wir diese drei angesprochenen Teilbereiche erkennen können.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">content   xulschoolhello              content/
+skin      xulschoolhello  classic/1.0 skin/
+locale    xulschoolhello  en-US       locale/en-US/
+</pre>
+</div>
+</div>
+
+<p><span style="color: #0000ff;">Die <em>chrome.manifest</em> Datei lässt Firefox wissen, wo es nach den Chromedateien zu suchen hat.</span> Der Text ist formatiert so das er dem Aussehen einer Tabelle gleicht, aber dies ist nicht notwendig. Der Parser ignoriert aufeinanderfolgende Leerzeichen.</p>
+
+<p>Das erste Wort in einer Zeile teilt Firefox mit, was angegeben ist (content, skin, locale, oder weiter Angaben, die später erwähnt werden). Das zweite ist der Paketname, was wir demnächst erklären werden.</p>
+
+<p>Darstellungs und lokale Packete besitzen einen dritten Wert, um zu spezifizieren welche lokale oder welche Darstellung sie erweitern. Es können mehrere Darstellungs und lokale Einträge für unterschiedliche Darstellung und lokalisierungs Variablen eingetragen werden. Der häufigste Fall ist es einen Darstellungeintrag für die gloabe Darstellung zu haben , <em>classic/1.0</em>, und mehrere lokale Einträge, einen für jede Übersetzung. Am Ende wird eine Ortsvariable spezifizerit.</p>
+
+<p>Es gibt einige zusätzliche Optionen, die in die Einträge der <em>chrome.manifest</em> Datei eingefügt werden können. Diese sind auf der <a href="/en-US/docs/Chrome_Registration" title="en/Chrome Registration">Chrome Registration</a> Seite dokumentiert. Beachtenswert ist, wir können Einträge erstellen, die Betriebssystem spezifisch sind. Dies ist wichtig, weil das Aussehen des Browsers ist sehr unterschiedlich für jedes Betriebssystem. Wenn es notwendig ist, dass Ihre Erweiterung auf verschieden Systemen unterschiedlich aussieht, könnten wir das Manifest so anpassen, dass es aussieht wie hier:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">content   xulschoolhello              content/
+skin      xulschoolhello  classic/1.0 skin/unix/
+skin      xulschoolhello  classic/1.0 skin/mac/ os=Darwin
+skin      xulschoolhello  classic/1.0 skin/win/ os=WinNT
+locale    xulschoolhello  en-US       locale/en-US/
+</pre>
+</div>
+</div>
+
+<p>Über diesen Weg können wir unterschiedliche Darstellungen für Windows, Mac OS X und Linux (plus anderer unix-ähnlichen Systemen) haben, die jede von ihnen in einer seperaten Ordnerstruktur definiert ist. Seit die meisten anderen System Unix-basiert sind, ist die "unix" Darstellung der Standard ohne weitere Marker.</p>
+
+<h2 id="Chrome">Chrome</h2>
+
+<p>Wie zuvor angesprochen Chrome besteht aus 3 Teilbereichen: content, locale und skin. Der content-Bereich ist der wichtigste Bereich, beinhaltet die Benutzerschnittstelle (XUL) und Skriptdateien (JA). Der Darstellungsbereich beinhaltet die Dateien die das Meiste des Aussehen und Verhalten der UI (mit Einsatz von CSS und Bildern, wie bei Webseiten) definieren. Abschließend enthält der locale Bereich den gesamten in der Erweiterung verwendeten Text, in DTD und die Einstellungsdateien. Diese Aufteilung erlaubt es anderenen Entwicklern Themes zu entwickeln die die Darstellung ersetzen und Übersetzer für andere Sprachen, all das ohne das eine Änderung der Erweiterung oder des Programmcodes notwendig wäre. Dies gibt Firefox Erweiterungen eine großartige Flexibiltät.</p>
+
+<p>Chrome Dateien werden über das Chrome-Protokoll zugewiesen. So sieht eine chrome URI aus:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">chrome:<span class="code-comment">//packagename/section/path/to/file</span></pre>
+
+<p><span class="code-comment">Wenn ich beispielsweise Zugriff auf die Datei</span> <em>browserOverlay.xul </em>haben möchte, wäre die Chrome URI <em>chrome://xulschoolhello/content/browserOverlay.xul</em>.</p>
+</div>
+</div>
+
+<p>Wenn Sie zu viele Dateien im content Bereich habe und Sie diese in Subordner organisieren wollen, gibt es nichts was Sie im <em>chrome.manifest</em> ändern müssen, alles was Sie benötigen ist den richtigen Pfad nach <em>content</em> in die URI hinzuzufügen.</p>
+
+<p>Darstellungs- und Regions-Dateien arbeiten in der selben Art und Weise, und Sie müssen keine Darstellungs- oder Regions -Namen festleggen. Also um auf die DTD-Datei in der Hello Wolrd Erweiterung zuzugreifen, ist der Chromepfad <em>chrome://xulschoolhello/locale/browserOverlay.dtd</em>. Firefox was anschließend nach welcher Region es abrufen muss.</p>
+
+<p>Hier ist ein interesantes Experiment. Öffne ein neues Firefox Tab, tippe <em>chrome://mozapps/content/downloads/downloads.xul </em>in deine Adressleiste und drücke Enter. Überrascht? Sie haben soeben das Downloadfenster in einem Firefoxtab geöffnet! Sie können auf jede Chromedatei zugreifen indem Sie die URI in die Addressleite eintippen. Dies kann nützlich werden, wenn du Skriptdatei untersuchen möchtest, die ein Teil von Firefox, anderen Erweiterungen oder deine eigene sind. Die meisten dieser Dateien werden als Textdatei geöffnet, mit der Ausnahme von XUL-Dateien, diese werden ausgeführt und so dargestellt wie Sie diese normalerweise in einem Fenster sehen würden.</p>
+
+<h3 id="Content">Content</h3>
+
+<p>Es gibt 2 Dateien im content Verzeichnis. Sehen wir uns zuerst die XUL-Datei an.</p>
+
+<p>Bei XUL-Dateien handelt es sich um XML-Dateien, die Benutzeroberflächenelemente in Firefox und Firefoxerweiterungen definieren. XUL wurde von HTML inspiriert, von daher werden Sie viele Ähnlichkeiten zwischen den beiden feststellen. Wie auch immer, XUL ist auch eine Verbesserung gegenüber HTML, die aus vielen Fehlern gelernt hat, die bei der Entwickliung von HTML gemacht wurden. XUL erlaubt Ihnen reichere und interaktivere Oberflächen zu erstellen, als mit HTML, oder zumindest macht XUL es einfacher.</p>
+
+<p>XUL-Dateien defineren in der Regel eine von zwei Dingen: Fenster oder Overlays. Die Datei die Sie zuvor geöffnet haben, <em>downloads.xul</em>, beinhaltet den Programmcode der das Downloadfenster definiert. Die XUL-Datei die in der Hello World Erweiterung eingeschlossen ist, ist eine Overlay. Ein Overlay erweitert ein vorhandes Fenster, fügt diesem neue Elemente hinzu oder ersetzt einige der Elemente in ihm. Die Zeile die wir in der <em>chrome.manifest</em> Datei übersprungen haben gibt an das es sich bei dieser XUL-Datei um ein Overlay für das Browserhauptfenster handelt:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">overlay chrome:<span class="code-comment">//browser/content/browser.xul  chrome://xulschoolhello/content/browserOverlay.xul</span></pre>
+
+<p><span class="code-comment">Durch diese Zeile weiß Firefox, dass es die Inhalte aus </span><em>browserOverlay.xul </em>verwenden muss und diese über das Browserhauptfenster, <em>browser.xul </em>legen muss. Sie können für jedes Fenster oder Dialog in Firefox ein Overlay festlegen, aber ein Overlay über das Browserhauptfenster zu legen ist der mit Abstand häufigste Fall.</p>
+
+<p>Jetzt nehme wir einen Blick auf unsere XUL-Datei. Wir werden die ersten paar Zeilen überspringen, weil diese sich auf die Darstellung und die Region beziehen, diese werden wir im späteren behandeln.</p>
+</div>
+</div>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">&lt;overlay id="xulschoolhello-browser-overlay"  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;</pre>
+</div>
+</div>
+
+<p>Das Wurzelelement in dieser Datei ist ein <em>Overlay</em>. Andere XUL-Dokumente nutzen den window oder dialog Tag. Das Element besitzt einie eindeutige ID, welche Sie bei den meisten Element in Ihrer XUL vergeben sollten. Das zweite Attribut ist der Namensraum, diesen sollten Sie immer in Ihrem XUL-Wurzelelment definieren. Es sagt aus, dass dieser Knoten und alle Kindknotten XUL-Element sind. Sie brauchen nur änderungen an der Namensraum deklaration vornehmen, wenn Sie verschiedene Arten eines Inhalts in dem gleichen Dokument kombinieren, wie z.B. XUL mit HTML oder SVG.</p>
+
+<div class="panel" style="border-width: 1px;">
+<div class="panelContent">
+<div class="note">You may have noticed the naming we use on several places, such as the id <em>xulschoolhello-browser-overlay</em>. This is the namespacing standard that we use to avoid conflicts with Firefox and other extensions, as well as making some development tasks easier. We namespace all ids and style classes in overlay elements because they will be mixed with other elements in the main browser window. If we used generic ids like <em>container</em> or <em>input</em>, they will likely conflict with ids used within Firefox, or with ids from other extension overlays. Using namespaces minimizes compatibility problems with other extensions. We use camel casing for file names, and all lower case with dashes for element ids and CSS style class names, but you're free to use your own system.</div>
+</div>
+</div>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">&lt;script type=<span class="code-quote">"application/x-javascript"</span>   src=<span class="code-quote">"chrome:<span class="code-comment">//xulschoolhello/content/browserOverlay.js"</span> /&gt;</span></pre>
+</div>
+</div>
+
+<p>Wie in HTML, wird hierdurch eine JavaScript-Datei eingebunden. Sie können soviele Skriptelement in ein XUL-Dokumente einbinden wie Sie benötigen. Wir werden uns diesen Programmcode später noch ansehen.</p>
+
+<div class="panel" style="border-width: 1px;">
+<div class="panelContent">
+<div class="note">You also probably noticed how we format our code, and wonder about the rules we follow. Our general rule on line length is not having lines longer than 80 characters. This feels very restrictive, specially with XML files, but the number was chosen to allow pretty much any text editor to handle these files easily. Even old command line editors work well with files that cut their lines at 80 characters. The tabulation is very straightforward: 2 blank space indents. We never use actual tab characters, with the exception of Makefiles, which will be covered later on. Most of our coding standards are based on Mozilla's or other known and used standards.</div>
+</div>
+</div>
+
+<p>Wir werden etwas Programmcode übersprinder, der im Regionsbereich behandelt wird, um mit dem wichtigsten Bereich von content fortzufahren.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">&lt;menubar id="main-menubar"&gt;
+  &lt;menu id="xulschoolhello-hello-menu" label="&amp;xulschoolhello.hello.label;"
+    accesskey="&amp;xulschoolhello.helloMenu.accesskey;" insertafter="helpMenu"&gt;
+    &lt;menupopup&gt;
+      &lt;menuitem id="xulschoolhello-hello-menu-item"
+        label="&amp;xulschoolhello.hello.label;"
+        accesskey="&amp;xulschoolhello.helloItem.accesskey;"
+        oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);" /&gt;
+    &lt;/menupopup&gt;
+  &lt;/menu&gt;
+&lt;/menubar&gt;
+
+&lt;vbox id="appmenuSecondaryPane"&gt;
+  &lt;menu id="xulschoolhello-hello-menu-2" label="&amp;xulschoolhello.hello.label;"
+    accesskey="&amp;xulschoolhello.helloMenu.accesskey;"
+    insertafter="appmenu_addons"&gt;
+    &lt;menupopup&gt;
+      &lt;menuitem id="xulschoolhello-hello-menu-item-2"
+        label="&amp;xulschoolhello.hello.label;"
+        accesskey="&amp;xulschoolhello.helloItem.accesskey;"
+        oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);" /&gt;
+    &lt;/menupopup&gt;
+  &lt;/menu&gt;
+&lt;/vbox&gt;
+</pre>
+</div>
+</div>
+
+<p>Das ist der Code, der das Hello World-Menü dem Browserfenster hinzufügt.</p>
+
+<p>Darin enthalten sind zwei ähnliche Codeblöcke, dass ist dadurch begründet das in modernen Versionen von Firefox, insbesondere unter Windows, ein einzelner Firefox Menübutton mit vereinfachten Menüoptionen, anstatt einer umfangreichen Menübar dargestellt wird. Der zweite Codeblock bezieht sich auf alle üblichen Buttonprozesse; der erste Codeblock bezieht sich auf alle anderen Prozesse. Setze den Hacken Menüleiste unter dem Optionsmenü im Menübutton, um die Anzeige des klassischen Menüs unter Windows und einigen Linuxdistributionen zu aktivieren.</p>
+
+<p>Um diesen Code zu schreiben, benötigen wir etwas Wissen über den XUL-Code in <em>browser.xul</em>. Wir müssen wissen, dass die ID des rechten Fläche in dem undefinierten Menü <em>appmenuSecondaryPane</em> ist. Wir werden ein eigenes Menü hinzufügen und Firefox mitteilen dieses rechts nachdem Add-on-Element in die Fläche hinzuzufügen. Dies ist die Festlegung des Attributes:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">insertafter=<span class="code-quote">"appmenu_addons"</span>
+</pre>
+</div>
+</div>
+
+<p><em>appmenu_addons</em> ist die ID des Menüelements, dass mit dem Add-on-Menü im Hauptmenü in verbindung steht. Wir werden später sehen wir die Dinge wie die ID von Browserelementen ermitteln können, aber jetzt sehen wir uns die Elemente aus denen sich das Hello World-Menü zusammensetzt.</p>
+
+<p>Für das klassische Menü, fügen wir das Hello World-Menü rechts in das "Wurzelverzeichnis" der Menüs hinzu, so dass es sehr einfach zu finden ist, aber in der Praxis ist es nicht notwendig. Stellen Sie sich vor was passieren würde, wenn alle Erweiterungen ein Menü im oberen Menü hinzufügen würden; ein paar Erweiterungen zu haben würde es dann außen lassen wie die Kontrollanzeige eines Flugzeuges, voller Knöpfe und Schalter. Im Falle des zusammengesetzen Menüs, sind die Dinge aufgrund von zu wenigen Optionen etwas mehr kompliziert. Wenn dein Menüitem in den Webentwicklerbereich passt empfiehlt es sich es dort zu platzieren. Andererweise ist das Wurzelmenü möglicherweise der einzige sinnvolle Ort.</p>
+
+<p>Ein empfehlenswerter Ort für Menüs in dem Klassikmenü ist unter dem Extrasmenü, von daher sollte der Code in etwa so aussehen:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">&lt;menupopup id=<span class="code-quote">"menu_ToolsPopup"</span>&gt;
+  &lt;menu id=<span class="code-quote">"xulschoolhello-hello-menu"</span> label=<span class="code-quote">"&amp;</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.hello.label;"</span>
+    accesskey=<span class="code-quote">"&amp;</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.helloMenu.accesskey;"</span>
+    insertbefore=<span class="code-quote">"</span>devToolsEndSeparator<span class="code-quote">"</span>&gt;
+    &lt;menupopup&gt;
+      &lt;menuitem id=<span class="code-quote">"</span><span class="code-quote">xulschoolhello</span><span class="code-quote">-hello-menu-item"
+      </span>  label=<span class="code-quote">"&amp;</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.hello.label;"</span>
+        accesskey=<span class="code-quote">"&amp;</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.helloItem.accesskey;"</span>
+        oncommand=<span class="code-quote">"XULSchoolChrome.BrowserOverlay.sayHello(event);"</span> /&gt;
+    &lt;/menupopup&gt;
+  &lt;/menu&gt;
+&lt;/menupopup&gt;
+</pre>
+</div>
+</div>
+
+<p>Wir legen das Menü über das tieferlegende in dem XUL-Baum, aber das spielt keine Rolle weil alles was wir benötigen ist die ID des Elements das wir Überblenden wollen. In diesem Fall ist dies das Menüpopup-Element das sich innerhalb des Extras. Das<em>insertbefore</em> Attribut teilt Firefox mit das Menü im unteren Bereich des Entwicklerextrasbereich hinzuzufügen, über den abschließenden Seperatoren. Wir werden im späteren des Tutorials über Menüs sprechen.</p>
+
+<p>Nehmen wir jetzt einen Blick auf den  eigentlichen Code:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">oncommand=<span class="code-quote">"XULSchoolChrome.BrowserOverlay.sayHello(event);"</span>
+</pre>
+</div>
+</div>
+
+<p>Dieses Attribute beschreibt einen Eventhandler. . Das <em>command</em> event ist das am meisten genutzte in Firefox, da es mit den Hauptaktionen der meisten UI-Elemente kommuniziert. Der Nutzen der Attribute ist der JacaScript-Code der eine Funktion aufruft. Diese Funktion ist in er der JS-Datei definiert, das mit Skript-Tag eingebunden wird. Die JS-Funktion wird aufgerufen wenn der Benutzer auf einen Menüeintrag im Hello World-Menü aufruft. Alle Eventhandler definieren ein spezielles Objekt namens <em>event</em>, welches normalerweise ausreicht um ein Argument an die Funktion zu übergeben. Eventhandler werden im späteren genauer definiert.</p>
+
+<p>Nun werfen wir einen Blick in die JavaScript-Datei und und sehen uns an wenn das Event ausgeführt wird.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">/**
+ * XULSchoolChrome namespace.
+ */
+if ("undefined" == typeof(XULSchoolChrome)) {
+  var XULSchoolChrome = {};
+};</pre>
+</div>
+</div>
+
+<p>Der <em>XULSchoolChrome</em> Namensraum ist definiert. Alle Objekte und Variablen die wir i JavaScript definieren sind global, das bedeutet das Skripte in Firefox und andere Erweiterungen können diese sehen und mit Ihnen interagieren. Dies bedeudet also dass wenn wir ein Objekt <em>MenuHandler definieren </em>oder einige generische Namen, ist es wahrscheinlich das es mit einem extierenden Objekt in Konflikt steht. Was wir hier machen ist ein einzelnes globales Objekt zu definieren: <em>XULSchoolChrome</em>. Nun wissen dass alle unsere Objekte sind innerhalb dieses Objekts, welches unwahrscheinlich duplliziert oder überschrieben wird von anderen Erweiterungen.</p>
+
+<p>Sie können hier mehr über den <a href="/en-US/docs/JavaScript/Reference/Operators/typeof" title="en/Core JavaScript 1.5 Reference/Operators/Special Operators/typeof Operator"><span class="external">typeof operator</span></a> erfahren. Wenn Sie nicht mit JavaScript oder der besonderen Syntax, ein Objekt mit {} zu intialisieren ist identisch mit es mit <em>new Object() </em>zu intialisieren.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">/**
+ * Controls the browser overlay <span class="code-keyword">for</span> the Hello World extension.
+ */
+XULSchoolChrome.BrowserOverlay = {</pre>
+</div>
+</div>
+
+<p>Sclussendlich ist <em>BrowserOverlay </em>unser Objekt. Ein Objekt in solcher langen und ausführlichen Art und Weise zu benennen und refernzieren kann sich am Anfang unkomfirtabel anfühlen, aber es ist den Aufwand wert.</p>
+
+<div class="panel" style="border-width: 1px;">
+<div class="panelContent">
+<div class="note">We use <a class="external" href="http://java.sun.com/j2se/javadoc/writingdoccomments/index.html">Javadoc</a> style comments on all namespaces, objects and object members. This is a similar standard to the one used in Mozilla code, and some tools can generate documentation automatically from Javadoc.</div>
+</div>
+</div>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">sayHello : function(aEvent) {
+  let stringBundle = document.getElementById("xulschoolhello-string-bundle");
+  let message = stringBundle.getString("xulschoolhello.greeting.label");
+
+  window.alert(message);
+}</pre>
+</div>
+</div>
+
+<p>Und Schlussendlich ist dass unsere Funktionsdeklaration. Drei Zeilen sind alles was wir benötigen. Die erste Zeile in dem Body der Funktion deklariert eine Variable die das <a href="/en-US/docs/XUL/stringbundle" title="en/XUL/stringBundle">stringbundle</a>-Element beinhaltet, das im Overlay definiert ist. Die Variable ist deklariert durch die Verwendung von <em>let, </em>dass <em>var </em>ähnlich ist aber einen enger begrenzten Bereich besitzt. Hier können Sie mehr über die <a href="/en-US/docs/JavaScript/Reference/Statements/let" title="let"><span class="external">let deklaration </span></a>nachlesen.</p>
+
+<p>WIe auch im regulären JS, können wir das <a href="/en-US/docs/DOM" title="en/DOM"><span class="external">DOM</span></a> (Document Object Model) nutzen um dass XUL-Dokument zu manipulieren.Als erstes bekommen wir eine referenze auf das <a href="/en-US/docs/XUL/stringbundle" title="en/XUL/stringbundle"><span class="external">stringbundle-Element</span></a>  in dem Dokument. Dies ist ein spezielles Element das es uns erlaubt beschränkte Strings dynamisch zu erhalten, nur durch die bereitstellung eines "key`s" der Den String identifiziert. Das macht die zweite Zeile. Wir rufen die <a href="/en-US/docs/XUL/stringbundle#m-getString" title="en/XUL/stringbundle#m-getString">getString Methode</a> des bundle-Elements udn bekommen die begrenzte Meldung angeziegt. Anschließende rufen wir die <a href="/en-US/docs/DOM/window.alert" title="en/DOM/window.alert">window.alert</a>-Funktion auf, wie wir das auch in einem HTML-Dokument machen würden.</p>
+
+<h3 id="Locale">Locale</h3>
+
+<p>Es gibt zwei Arten von locale-Dateien: DTD und Einstellungen, und in diesem Beispiel werden wir beide benutzen. DTD ist der effizenteste Weg um Text in XUL anzuzeigen, von daher sollten Sie es benutzen wann immer es möglich ist. Es ist etwas unflexibel, so kann es nicht für dynamisch erzeugten Text verwendet werden, folglich gibt es eine Notwendigkeit um auf regionale Strings zuzugreifen.</p>
+
+<p>Werfen wir einen Blick zurück auf den Menücode, dort haben Sie unter Umständen einge Attribute wie diese bemerkt:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">label=<span class="code-quote">"&amp;xulschoolhello.hello.label;"</span> accesskey=<span class="code-quote">"&amp;xulschoolhello.helloItem.accesskey;"</span></pre>
+</div>
+</div>
+
+<p>Diese Attribute definieren den Text den Sie in den Menüs sehen,  es sind String-keys die in unserer DTD-Datei definiert sind, <em>browserOverlay.dtd</em>. Die DTD-Datei wurd mit folgendem Code in die XUL-Datei eingefügt:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">&lt;!DOCTYPE overlay SYSTEM "chrome://xulschoolhello/locale/browserOverlay.dtd" &gt;</pre>
+</div>
+</div>
+
+<p>Und in der DTD-Datei können Sie die Zuordnung von Keys und regionalen Strings sehen:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">&lt;!ENTITY xulschoolhello.hello.label            <span class="code-quote">"Hello World!"</span>&gt;
+&lt;!ENTITY xulschoolhello.helloMenu.accesskey    <span class="code-quote">"l"</span>&gt;
+&lt;!ENTITY xulschoolhello.helloItem.accesskey    <span class="code-quote">"H"</span>&gt;</pre>
+</div>
+</div>
+
+<p>Beachte das Sie in den XUL-Dateien den String mit &amp; und ; umschließen, wohingegen sie in eriner DTD-Datei nur den Key spezifizieren. Sie erhalten womöglich sonderbare Fehlermeldungen oder Zuordnungen wenn Sie dass nicht beachten.</p>
+
+<p>Zugangs Key`s sind Shortcuts die es Ihnen erlauben, nur mit der Tastatur schnell durch ein Menü zu navigieren. Sie sind auch der einzige Weg durch die Menüs zu navigieren für Menschen die eine <a href="http://www.dict.cc/deutsch-englisch/Barrierefreiheit.html">Barrierefreiheit</a> benötigen, durch teilweise oder vollkommene Blindheit oder durch körperliche Eingeschränktheit die, dass nutzen einer Maus sehr schwierig oder unmöglich machen. Sie können die Zugangs-Key`s unter Windows leicht erkennen, weil der Buchstabe der mit dem Zugangs-Key in Verbindung steht unterstrichen ist, wie in der folgenden Abbildung.</p>
+
+<div>
+<p><img alt="" class="internal" src="/@api/deki/files/4226/=accesskeys.png" style="width: 167px; height: 58px;"></p>
+</div>
+
+<p>DIe meisten Benutzeroberflächen Schaltflächen besitzen ein <em>accesskey</em> Atribut, und Sie sollten es benutzen. Der Wert eines Zugangs-Key`s ist lokal beschränkt, weil er einem Buchstaben im Labeltext entsprechen soll. Sie sollten darauf achten es zu vermeiden Zugangs-Key´s zu wiederholen. Als Beispiel, innerhalb eines Menüs oder Untermenüs sollten Zugangs-Key`s nicht wiederholt werden. In einem Fenster müssen Sie noch vorsichtiger sein bei der Auswahl von Zugang-Key`s weil es dort normalerweise eine größere Anzahl an Schaltflächen gibt. Besonders vorsichtig müssen Sie sein wenn Sie Zugangs-Key`s für eine Overlay auswahlen. In unserem Fall, können wir den Buchstaben "H" nicht als einen Zugangs-Key im Hauptmenü verwenden, weil dieser sich mit dem Zugangs-Key den Hilfemenüs überschneiden würde. Das selbe gilt für das "W" und das Fenstermenü unter Mac OS. Von daher haben wir den Buchstaben "l" zugewiesen.</p>
+
+<p>DTD-Strings werden aufgelöst und gesetzt wenn das Dokument lädt. Wenn Sie den <em>label-Attribute </em>Wert für das Hello World-Menü mit hilfe von DOM abfragen, erhalten Sie den begrenzten String und nicht den String-Key. Sie können nicht dynamischen den Wert von Attributen mit einem neuen DTD-Schlüssel ändern, Sie müssen den neuen Wert direkt setzen.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="brush: js">let helloItem = document.getElementById(<span class="code-quote">"xulschoolhello-hello-menu-item"</span>);
+
+<span class="code-comment">// The alert will say <span class="code-quote">"Hello World!"</span>
+</span>alert(helloItem.getAttribute(<span class="code-quote">"label"</span>));
+<span class="code-comment">// Wrong
+</span>helloItem.setAttribute(<span class="code-quote">"label"</span>, <span class="code-quote">"&amp;</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.hello2.label;"</span>);
+<span class="code-comment">// Better
+</span>helloItem.setAttribute(<span class="code-quote">"label"</span>, <span class="code-quote">"Alternate message"</span>);
+<span class="code-comment">// Right!
+</span>helloItem.setAttribute(<span class="code-quote">"label"</span>, someStringBundle.getString(<span class="code-quote">"</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.hello2.label"</span>));</pre>
+</div>
+</div>
+
+<p>Das ist der Grund warum DTD-String keine Lösung für alle beschränkten Fälle sind, and der Grund warum wir oft Stringpakete in XUL-Dateien einbinden müssen.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">&lt;stringbundleset id="stringbundleset"&gt;
+  &lt;stringbundle id="xulschoolhello-string-bundle"
+    src="chrome://xulschoolhello/locale/browserOverlay.properties" /&gt;
+&lt;/stringbundleset&gt;</pre>
+</div>
+</div>
+
+<p>Das <a href="/en-US/docs/XUL/stringbundleset" title="en/XUL/stringbundleset">stringbundleset</a>-Element ist nur ein Container für <a href="/en-US/docs/XUL/stringbundle" title="en/XUL/stringbundle">stringbundle</a>-Elemente. Hiervon sollte eines pro Dokument geben, dies ist auch der Grund warum wir das <em>stringbundleset</em> in der browser.xul überschreiben, daher die sehr generische ID.  Wir fügen keine <em>insertbefore</em> oder <em>insertafter</em> Attribute ein weil die Reihenfolge der Stringpakete keine Rolle spielt. Das Element ist vollständig unsichtbar. Wenn Sie keine Ordnungsattribute in ein Overlay-Element einfügen, wird Firefox Ihr Element als letztes Kindelement des Elternelements betrachten.</p>
+
+<p>Alles was Sie für das Stringpaket benötigen ist eine ID (um später auf das Element zugreifen zu können und den Chrome-Pfad der Einstellungsdatei. Und natürlich die Einstellungsdatei:</p>
+
+<pre class="code-java  language-html"><code class="language-html">xulshoolhello.greeting.label = Hi! How are you?</code></pre>
+
+<p>Die Leerzeichen vor und nach dem Gleichheitszeichen werden ignoriert. Genauso wie in der install.rdf, Kommentare können durch das "#" Zeichen am Anfang einer zeile hinzugefügt werden. Leere Zeilen werden ebenso ignoriert.</p>
+
+<p>Sei werden oft einen dynamischen Inhalt als Teil eines begrenzten Strings einbinden wollen, wie wenn Sie den Nutzer über den Status der Erweiterung informieren wollen. Als Beispiel: "Es wurden 5 der Suchanfrage entprechende Wörter gefunden". Ihre erste Idee ist möglicherweise einfach Strings zu verketten und eine "Found" Eigenschaft und eine weitere "words matching..." Eigenschaft zu verwenden. Dies ist keine Gute Idee. Sie behindert nur in einem großen Maße die Arbeit von Übersetzern und Grammatikregeln der verschieden Sprachen ändern möglicherweise den Aufbau des Satzes. Aus diesem Grund ist es besser Parameter in den Eienschaften zu verwenden.</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">xulshoolhello.search.label = Found %S words matching the search query!</pre>
+</div>
+</div>
+
+<p>Wenn Sie den <a href="/en-US/docs/XUL/stringbundle#m-getFormattedString" title="en/XUL/stringbundle#m-getFormattedString">getFormattedString</a> anstatt des <em>getString </em>verwenden um auf den begrenzten String zuzugreifen. Glücklicherweise müssen wir durch dass nicht mehrere Eigenschaften anlegen, hierdurch wird das Leben für Übersetzer einfacher. Sie können mehr über das in dem <a href="/en-US/docs/XUL_Tutorial/Property_Files#Text_Formatting" title="en/XUL Tutorial/Property Files#Text Formatting">Text Formatting Bereich</a> des XUL Tutorial nachlesen. Werfen Sie auch einen Blick auf die <a href="/en-US/docs/Localization_and_Plurals" title="en/Localization and Plurals">Plurals and Localization</a> Artikel, die die Lokalisierungsfunktionen behandeln und es Ihnen weiterhin erlauben das letzte Beispiel zu verbessern, um verschiedene Arten von Pluralformen zu verarbeiten die auch Sprachabhängig sind.</p>
+
+<h3 id="Skin">Skin</h3>
+
+<p>XUL zu gestalten ist dem gestalten von HTML sehr ähnlich. Wir werden uns einige Unterschiede ansehen wenn wir das XUL-Box-Modell und andere fortgeschritten Themen. Es gibt nicht viel was Sie in bei einem minimalen Menü und einer einfachen Warnmeldung gestalten können, da die Hello World ERweiterung nur eine leere CSS-Datei und eine vorgeschriebene globale Skin-Datei beinhaltet:</p>
+
+<div class="code panel" style="border-width: 1px;">
+<div class="codeContent panelContent">
+<pre class="code-java">&lt;?xml-stylesheet type=<span class="code-quote">"text/css"</span> href=<span class="code-quote">"chrome:<span class="code-comment">//global/skin/"</span>  ?&gt;
+</span>&lt;?xml-stylesheet type=<span class="code-quote">"text/css"</span>
+  href=<span class="code-quote">"chrome:<span class="code-comment">//xulschoolhello/skin/browserOverlay.css"</span>  ?&gt;</span></pre>
+</div>
+</div>
+
+<p>Die globale Skin-CSS-Datei enthält alle standard Styles für alle XUL-Elmente und Fenster. Wenn Sie vergessen diese Datei in ein XUL-Fensterer einzubinden, führt das normalerweise zu intersanten und oft ungewohlten Ergebnissen. In unserem Fall müssen wir diese nicht einbinden, seit wir die Hauptbrowser-XUL-Datei überblenden und diese bindet bereits diese globale CSS-Datei ein. Auf jeden Fall ist es besser sie immer einzubinden. Auf diesem Weg ist es schwieriger Fehler durch ein nicht einbinden zu vermeiden. Sie können den Chrome-Pfad in der Adressleiste eingeben und überprüfen wenn Sie sich unsicher sind.</p>
+
+<p>Dies behandelt alle Dateien der Hello World-Erweiterung. Nun sollten Sie eine Idee haben welche in die Erweiterungsentwicklung involviert sind, nun steigen wir direkt ein und stzen eine Eintwicklungumgebung auf. Aber als erstes eine kleine Übung.</p>
+
+<p>This covers all of the files in the Hello World extension. Now you should have an idea of the basics involved in extension development, so now we'll jump right in and set up a development environment. But first, a little exercise.</p>
+
+<h2 id="Übung">Übung</h2>
+
+<p>Mache die folgenden Änderungen in der Beispielerweiterung:</p>
+
+<ul>
+ <li>Passe die Willkommensmeldung die im Benachrichtigungsfenster angezeigt wird an.</li>
+ <li>Verschiebe das Hello World -menü in das Extras -menü.</li>
+</ul>
+
+<p>Packe die XPI neu. Führe unter Linux oder Mac OS X folgendes Kommando innerhalb des Wurzelverzeichnisses der Erweiterung aus:</p>
+
+<pre>zip -r ../xulschoolhello2.xpi *
+</pre>
+
+<p>Verwende unter Windows ein ZIP-Tool um alle Datei und Unterverzeichnisse innerhalb des Wurzelverzeichnisses der Erweiterung zu packen und setze die Dateierweiterung der Datei auf .xpi.</p>
+
+<p>Installiere die XPI neu. Sie können hierzu die XPI-Datei hierzu einfach in den Browser ziehen und diese wird lokal installiert.</p>
+
+<p>Teste es und überprüfe ob die Änderungen funktionieren. Wenn Sie auf Probleme während der Installation stoßen, ist es wahrscheinlich, dass Sie die XPI-Struktur nicht korrekt nachgebildet haben, möglicherweise durch das hinzufügen unnötiger Ordner.</p>
+
+<div class="note"><strong>Note:</strong> Packaging an extension is really just creating a ZIP archive of the contents of the main folder, then changing the filename extension to <code>.XPI</code>. Do <strong>not</strong> zip the containing folder, just its contents. The <code>content</code> folder, <code>chrome.manifest</code>, <code>install.rdf</code>, and other files and directories should be at the root level of your archive. If you zip the containing folder, your extension will not load.</div>
+
+<p>Beachte, dass das Extramenü standardmäßig in Firefox 4und höher, unter Windows und einige Linuxdistributionen versteckt ist. Setze einen Hacken im Optionsmenü unter dem Firefoxmenüknopf um es zu aktivieren.</p>
+
+<p>Nachdem Sie fertig sind, können Sie sich diese Refernzlösung ansehen: <a href="/@api/deki/files/5141/=xulschoolhello2.xpi" title="https://developer.mozilla.org/@api/deki/files/5141/=xulschoolhello2.xpi">Hello World 2</a>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8423/menu_item%20-%20helloworld2.png"></p>
+
+<p>{{ PreviousNext("XUL_School/Getting_Started_with_Firefox_Extensions", "XUL_School/Setting_Up_a_Development_Environment") }}</p>
+
+<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p>
diff --git a/files/de/archive/mozilla/xul/school_tutorial/eine_entwicklungsumgebung_einrichten_environment/index.html b/files/de/archive/mozilla/xul/school_tutorial/eine_entwicklungsumgebung_einrichten_environment/index.html
new file mode 100644
index 0000000000..1f4ea0ffbb
--- /dev/null
+++ b/files/de/archive/mozilla/xul/school_tutorial/eine_entwicklungsumgebung_einrichten_environment/index.html
@@ -0,0 +1,161 @@
+---
+title: Eine Entwicklungsumgebung einrichten
+slug: >-
+  Archive/Mozilla/XUL/School_tutorial/Eine_Entwicklungsumgebung_einrichten_Environment
+translation_of: >-
+  Archive/Add-ons/Overlay_Extensions/XUL_School/Setting_Up_a_Development_Environment
+---
+<p>{{ PreviousNext("XUL_School/The_Essentials_of_an_Extension", "XUL_School/Adding_menus_and_submenus") }}</p>
+<h2 id="Eine_Entwicklungsumgebung_einrichten">Eine Entwicklungsumgebung einrichten</h2>
+<p>Es gibt 3 Tools von denen wir denken das diese essentiell für eine effektive Add-on-Entwicklung sind (oder ehrlich gesagt für jede Art von Entwicklung): ein Quellcodeeditor, ein Versionskontrollsystem und eine Entwicklungsumgebung.</p>
+<p>Im Bezug auf das Codeediting, es gibt keine offizelle Mozilla IDE. Mit anderen Worten, Erweiterungen benutzen die selben (oder ähnlichen) Sprachen die auch für die Webentwicklung genutzt werden, von daher könnnen die meisten Texteditoren und IDE`s eingesetzt werden. Die meisten XUL-Tools und Plugin`s die Sie Online finden werden sind lediglich Templates die die Ordnerstruktur füre das Projekt erzeugen, und das ist nicht viel Hilfe.</p>
+<p>WIe empfehlen <a class="external" href="http://www.activestate.com/komodo_edit/" title="http://www.activestate.com/komodo_edit/">Komodo Edit</a>. Es ist kostenlos, OpenSource und Cross-Platform-Unabhängig. Es basiert auf der Mozilla XULRunner Platform, von daher unterstützt einige der Besonderheiten in der Firefoxerweiterungsentwicklung. Komodo Edit bietet eine Autovercollständigung für XUL-Tags und Attribute und es unterstützt Mozilla`s CSS-Erweiterungen (CSS-Werte und Einstellungen beginnen mit "-moz"). Es besitzt ein Add-on System ähnlich dem im Firefox, und es gibt einige Komodo-Erweiterungen die zusätzliche Hilfe bei der Erweiterungsentwicklung bieten. Das ist mehr als die meisten andern Editoren bieten, von daher empfehlen wir Ihnen ihm eine Chance zu geben. Alle unsere Beispiel wurden mit Komodo Edit erstellt, also wenn Sie eine .<em>kpf</em> oder <em>.komodoproject</em> fi Datei in einem Beispieldownload sehen ist das eine Komodoprojektdatei.</p>
+<p><img alt="" height="479" src="https://mdn.mozillademos.org/files/8435/screenshot%20-%20komodo_edit.png" width="657"></p>
+<p>Wir empfehlen <a href="http://git-scm.com/" title="http://git-scm.com/">Git</a> und <a href="https://github.com/" title="https://github.com/">GitHub</a> für die Versionskontrolle, aber jedes anständige <span class="st"><em><a href="http://en.wikipedia.org/wiki/Software_configuration_management" title="http://en.wikipedia.org/wiki/Software_configuration_management">Software-Configuration-Management</a></em></span> System kann hier eingesetzt werden.</p>
+<p>Um XPI-Dateien zu packen, nutzen wir make. Wir haben <em>make</em> gewählt weil dieses System von Mozilla genutzt wird um Firefox zu bauen und es ist für alle Betriebssysteme verfügbar. <em>make</em> ist das Standard Tool in den meisten UNIX-basierten Systemen. Es kann unter Mac OS X als Teil von des XCode Tool-Paketes installiert werden und unter Windows mit <a class="external" href="http://www.cygwin.com/">cygwin</a>. In einer <em>cygwin</em>-Installation werden Sie explizit die <em>make</em> und <em>zip</em> utilities aus der langen Liste der Pakete auswählen müssen um diese herunterzuladen und installieren.</p>
+<p>Sorgen Sie des weiteren dafür das <em>make</em> sich im ausführbaren Systempfad befindet. Nach der Einrichtung von <em>make</em>, sollten Sie in der Lage sein ein Kommandozeildenfenster zu öffnen, führen Sie "make-ver" aus, und Sie bekommen die installierte Version von <em>make</em> als Ausgabe.</p>
+<p>Wir empfehlen Ihnen <em>make</em> auf Ihrem System einzurichten, da unsere Beispiele beinhalten alle notwendigen Dateien um die daraus entstehende XPI mit diesem Toolzu bauen und installieren. Es wird Ihnen einiges an Zeit für das packen ersparen. Oder Sie können ein vergleichbares System unter der Verwendung von Batch aufsetzen, machen Sie es wie auch immer Sie bevorzugen. Letztlich können Sie auch einfach jeden Zip oder Archivierungs Tool verwenden um den Inhalt des <em>src</em> Verzeichnisses zu komprimieren um ein identisches Ergebniss zu ereichen.</p>
+<h2 id="Build_system">Build system</h2>
+<p>Beginnen wir mit dem Herunterladen des Projekts mit dem die zweite Version von Hello World aufgebaut wurde, aus der Übung der letzten Lektion</p>
+<p><a href="/@api/deki/files/5142/=HelloWorld2.zip" title="https://developer.mozilla.org/@api/deki/files/5142/=HelloWorld2.zip">Hello World 2 Project</a>.</p>
+<p>Entpacken die Datei wohin Sie wollen. Innerhalb des <em>HelloWorld2</em> Verzeichnisses weden Sie zwei Verzeichnisse sehen: <em>bin</em> und <em>src</em>. Das <em>bin</em> Verzeichnis sollte leer sein. Dort werden alle enstehenden build-Dateien erstellt und dort werden Sie die Erweiterungs XPI-Datei finden wenn sie erstellt wurde.</p>
+<p>Öffnen Sie die Projektdatei (<em>HelloWorld2.komodoproject</em>) in the <em>src </em>Verzeichnis in Komodo Edit. In dem Projektreiter sollten Sie nun in der Lage sein die Verzeichnisstruktur innerhalbt des <em>src-</em>Verzeichnises sehen. Dies Struktur solle ihnen vertraut sein, da Sie beinahe identisch mit der ungepackten XPI von der vorherigen Lektion ist.</p>
+<p>Die einzige bemwerkswerte Änderung ist eine Datei mit der Bezeichnung <em>Makefile</em> unter <em>src</em>. Das ist die Datei die <em>make</em> nutzt  um die XPI zu erstellen. Sie sollten sich etwas Zeit nehmen um diese zu lesen und zu verstehen., oder zumindest die Teile untersuchen die Sie ändern müssen um Ihr projekt zu beginnen. Die <a class="external" href="http://www.chemie.fu-berlin.de/chemnet/use/info/make/make_toc.html">GNU Make Manual</a> ist eine sehr gute Refernz um sich mit <em>make</em> und der <em>Makefile</em>-Datei vertraut zu machen.</p>
+<p>In den meisten Fällen müssen Sie nur ein paar der ersten Zeilen in der <em>Makefile</em>-Datei ändern. Diese definieren den Erweiterungsnamen, die Erweiterungs ID (wie in <em>install.rdf</em> festgelegt) und der Name des profile-Verzeichnisses wohin die Erweiterung während der Entwicklung und des testens installiert wird. Mehr über das später.</p>
+<p>Versuchen wir zuerst die XPI über die Kommandozeile zu erstellen. Öffnen Sie das Kommandozeilenprogramm in Ihrem System und naviergien Sie zum <em>src</em> Verzeichnis in Ihrem Projekt. Führen Sie folgenden Befehl aus:</p>
+<div class="code panel" style="border-width: 1px;">
+ <div class="codeContent panelContent">
+  <pre class="code-java">make</pre>
+ </div>
+</div>
+<p>Das ist es. Wenn alles gut läuft sollten Sie eine Ausgabe wie diese sehen:</p>
+<div class="code panel" style="border-width: 1px;">
+ <div class="codeContent panelContent">
+  <pre class="code-java">Creating XPI file.
+  adding: install.rdf (deflated 50%)
+  adding: chrome.manifest (deflated 50%)
+  adding: content/browserOverlay.js (deflated 42%)
+  adding: content/browserOverlay.xul (deflated 69%)
+  adding: skin/browserOverlay.css (stored 0%)
+  adding: locale/en-US/browserOverlay.dtd (deflated 52%)
+  adding: locale/en-US/browserOverlay.properties (stored 0%)
+Creating XPI file. Done!
+
+Build finished successfully.
+</pre>
+ </div>
+</div>
+<p>Wenn Sie das <em>bin</em> Verzeichnis untersuchen, sollten Sie die <em>xulschoolhello2.xpi</em> Datei sehen.</p>
+<p>Wenn Sie <em>make </em>ausführen, werden Sie die letzte Zeilde des Erstellungsprozesses sehen. Das ist so weil <em>make</em> mitteilt das die Datei im <em>bin</em> Verzeichnis aktuell ist und es nichts zu machen gibt. Änderungen an der Quelldatei werden <em>make</em> dazu bringen die notwendigen Schritte erneut auszuführen um XPI erneut zu erstellen.</p>
+<p>Sie können das <em>bin </em>Verzeichnis aufräumen indem Sie einfach den folgenden Befehl ausführen (nochmal, innerhalb des <em>src</em> Verzeichnises)<br>
+  </p>
+<div class="code panel" style="border-width: 1px;">
+ <div class="codeContent panelContent">
+  <pre class="code-java">make clean</pre>
+ </div>
+</div>
+<p>Sie können diese Befehle auch in Komodo ausführen. Klicken Sie auf Tools &gt; Befehl ausführen... In das "Ausführen" Textfeld sollten Sie das eingeben:</p>
+<div class="code panel" style="border-width: 1px;">
+ <div class="codeContent panelContent">
+  <pre class="code-java">bash -c <span class="code-quote">"make"</span></pre>
+ </div>
+</div>
+<p><img alt="" src="https://mdn.mozillademos.org/files/8439/screenshot%20-%20komodo_edit%20Run%20Command.png"></p>
+<p>Oder ersetzen Sie "make" mit "make clean" für das aufräumen. Der "basc -c" Teil zwingt Komodo <em>bash</em> zu nutzen, welches aus einigen Gründen nicht als das Standard Kommandozeile gesetzt werden kann. Es ist nicht notwendig dies zu tun, aber es ist besser so das mit dem <em>make</em>-Befehl übereinstimmt den wir als nächstes sehen werden.</p>
+<p>In em "Start in" Textfeld sollten Sie %p wählen (Verzeichnispfad des aktiven Projektes. Wenn Sie dieses Textfeld nicht sehen können dann klicken Sie auf den "More" Schalter. Sie besitzen auch die Möglichkeit den Befehl zu speichern, durch einen Klick auf das "Add to Toolbox" Auswahlfeld. Um die Toolbox zu sehen, klicke auf View &gt; Tabs &gt; Toolbox, über das Hauptmenü. Damit sollten Sie einen sehr einfachen Weg haben um Ihre XPI zu erstellen, indem Sie nur den Erstellungsbefehl Doppelklicken.</p>
+<p>Wir können es sogar noch besser machen. Wenn Sie einmal Ihren Code testen und debuggen, werden Sie feststellen, dass das ständige erstellen und installieren einer XPI sehr ermüdend sein kann. Das ist der Gründ warum wir "make install" eingeführt haben. Dies funktioniert nur wenn die Erweiterung bereits in einem Firefoxprofil installiert ist. Wie in den vorgestellten Projekt, benötigen Sie die Add-on-ID und die gesetzte Profillokation die in der <em>Makefile</em>-Datei. Wir nutzen diese Informationen um den Installationspfad  von der Erweiterung  und überschreiben die installierten Dateien. Wenn Firefox geöffnet ist können Sie den "make install"-Befehl ausführen, Sie müssen Firefox neustarten um die Änderungen zu sehen. Es ist immernoch besser als die XPI andauernd neu zu installieren.</p>
+<p>Möglicherweise möchten Sie die Profillokation in Ihrem <em>Makefile</em>-Datei ändern. . Um die Profilloaktion auf den richtigen Wert zu setzen, sollten Sie den Artikel <a class="external" href="http://support.mozilla.com/en-US/kb/Profiles">support article on profiles</a> auf der Mozilla Support Seite lesen. Auch werden wir später tiefer in dieses Thema eintauchen.</p>
+<p>Um "make install" auf nicht WIndowssystemen einzusetzen, benötigen Sie einen extra Schritt. Der Installationsprozess benötigt eine Umgebungsvariable mit dem Namen <em>OSTYPE</em>, welche nicht exportiert wird. Lange Geschichte kurzer Sinn, über Kommandozeile müssen Sie folgendes ausführen:</p>
+<div class="code panel" style="border-width: 1px;">
+ <div class="codeContent panelContent">
+  <pre class="code-java">export OSTYPE; make install</pre>
+ </div>
+</div>
+<p>Und in Komodo sollten Sie fogenden Befehl eingeben:</p>
+<div class="code panel" style="border-width: 1px;">
+ <div class="codeContent panelContent">
+  <pre class="code-java">bash -c <span class="code-quote">"export OSTYPE; make install"</span></pre>
+ </div>
+</div>
+<p>Der <em>export</em>-Befehl wird nicht korrekt funktionieren wenn Sie nicht "bach-c" verwenden.</p>
+<div class="note">
+ The file <em>Makefile</em> specifies which profile folder the add-on will be reinstalled to. This is set in the <em>profile_dir</em> variable (set to "xulschool-dev" in this case). When creating a development profile for your add-on, make sure you choose an easy name for the profile folder, and set it in your <em>Makefile</em> in order to take advantage of the install command.</div>
+<h3 id="Building_IDL_files">Building IDL files</h3>
+<p>Einige Erweiterungen setzen die Entwicklung von XPCOM-Komponeten voraus um gewisse fortgeschritten Funktionen hinzuzufügen. Es gibt eine Lektion die für XPCOM in diesem Tutorial vorgesehen ist, aber wie gehen kaum auf den Einflussdie es auf die Entwicklung von Erweiterungen hat ein. Sie können diesen Teil überspringen und es als Refernenz zu nutzen wenn Sie XPCOM in Ihrem Projekt benötigen.</p>
+<p>XPCOM Schnittstellen werden mit IDL-Dateien definiert. Das sind Textdateien die Attribute definieren und Methoden in einem oder mehren Schnittstellen. Diese IDL-Dateien werden in Binarydateien kompiliert und werden in die Erweiterung als XPT-Dateien eingebunden.</p>
+<p>Um eine IDL-Dateizu XPT zu komplieren, benötigen Sie ein Kommandozeilen Tool, xpidl. Dieses Tool ist im Mozilla <a href="/en/Gecko_SDK" title="en/Gecko SDK">Gecko SDK</a> enthalen. Wenn Sie IDL`s kompilieren möchten, gehen Sie zur SDK-Seite und laden Sie eine kompilierte Version für Ihr System herunter. Beachte auch mögliche Anforderungen. Wenn Ihr System nicht bei den unterstützen Systemen aufgelistet ist, müssen Sie das SDK selbständig aus dem Mozilla Quellcode erstellen. Viel Glück damit.</p>
+<p>Sie sollten auch Ihre Umgebung so aufbauen das die <em>xpidl.exe</em> (oder nur <em>xpidl</em> in anderen Systemen) dich in dem standardmäßige auführbaren Pfad befindet und fügen Sie auch eine Variable mit der Bennung Gecko_SDK hinzu, die auf Ihren SDK-Build verweist:</p>
+<div class="code panel" style="border-width: 1px;">
+ <div class="codeContent panelContent">
+  <pre class="code-java">export GECKO_SDK=/path/to/your/sdk</pre>
+ </div>
+</div>
+<p>Ihr Buildsystem sollte dort darauf zugreifen. Um es in Komodo unter UNIX-basierten Systemen einsetzen zu können, fügen wir den Befehl in die<em> .bash_login</em>-Datei im Homeverzeichnis hinzu und wir passen den Befehl folgendermasen an.</p>
+<div class="code panel" style="border-width: 1px;">
+ <div class="codeContent panelContent">
+  <pre class="code-java">bash -c <span class="code-quote">". ~/.bash_login; make"</span></pre>
+ </div>
+</div>
+<p>Ein Beispiel Projekt mit XPCOM-Komponeten ist in der XPCOM-Lektion enthalten. Dort wird auch XPCOM Erstellung mit C++ angesprochen, was sehr viel schwieriger ist.</p>
+<h3 id="Signing">Signing</h3>
+<p>Um zusätzliche Sicherheit für Ihre Nutzer bereitzustellen, können Sie sich entscheiden <a href="/en/Signing_an_extension" title="en/Signing an extension">eine Signature zu Ihrer Erweiterung hinzuzufügen</a>. Die Signatur verfiziert das Sie der Autor dieser Erweiterung sind und das kann nur gemacht werden wenn Sie ein gültiges Zertifikat einer vertrauswürdigen Zertifizierungsstelle besitzen.</p>
+<p>Der einzige wahrnehmbare Unterschied für den Benutzer ist das der XPI-Installationsdialog mitteilen wird das die Erweiterung von Ihnen erstellt wurde, was den Dialog vertrauswürdiger macht. Es is nicht üblich Erweiterungen zu signieren weil die meisten Anwender der offizellen Add-on-Seite (<a class="link-https" href="https://addons.mozilla.org" title="https://addons.mozilla.org">AMO</a>) vertrauen anstatt sich auf die Erweiterungssignaturen zu verlassen. Auf der anderen Seite, ist es gängie Praxis für große Unternehmen ihre Erweiterungen zu signieren.</p>
+<p>Sie werden einige libraries herunterladen müssen damit Sie in der Lage sind Ihre Erweiterungen zu signieren. Folgen Sie dieser <a href="/en/Signing_an_extension" title="en/Signing an extension"><span class="external">Anleitung</span></a> und fügen etwas ähnliches wie das der Makefile-Datei hinzu:</p>
+<div class="code panel" style="border-width: 1px;">
+ <div class="codeContent panelContent">
+  <pre class="code-java"># The directory where the signature sources are located.
+signature_dir := signature
+
+# The signing key /certificate file.
+signature_extra_files := $(build_dir)/META-INF/manifest.mf \
+                         $(build_dir)/META-INF/zigbert.sf
+# The signing key /certificate file.
+signature_rsa_file = $(build_dir)/META-INF/zigbert.rsa# The signing key /certificate file.
+signature_files := $(signature_extra_files) \
+                   $(signature_rsa_file)
+
+$(signature_files): $(build_dir) $(xpi_built)
+  @signtool -d $(signature_dir) -k $(cert_name) \
+  -p $(cert_password) $(build_dir)</pre>
+ </div>
+</div>
+<p>Behalten Sie im Hinterkopf ds Ihr Passwort sollte nicht in Ihren Makefile-Dateien enthalten sein und Sie müssen sehr vorsichtig mit den Zertifkatsinformationen sein. Idealerweise sollte das von einer Person erledigt werden und nur Kurz vor Abschluss des Releaseprozess erledigt werden. Sie sollten auch einen abweichenden <em>make</em>-Befehl hierfür haben, wie z.B. <em>make signed </em>um die signierten und unsignierten Entwicklungs builds unterscheiden zu können.</p>
+<h2 id="Firefox_profile_management">Firefox profile management</h2>
+<p>Es ist gute Entwicklungspraxis die Testumgebung von allem anderen zu seperieren. Sie wollen bestimmt nicht das unstabilen Erweiterungen Ihr Firefoxprofil zu schädigen und einen Datenverlust zu riskieren. Es ist viel Besser eine weitere Firefox-"Version" für die Tests zu haben. Hierfür gibt es de Firefoxprofile.</p>
+<p>Sie können in dem Mozillasupport-Artikeln <a class="external" href="http://support.mozilla.com/en-US/kb/Managing+profiles">Managing Profiles</a> lernen wie man mehrere Firefoxprofile aufsetzt. Sie können soviele Profile anlegen wie Sie möchten. Sie können diese auch mit mehreren Firefoxinstallationen mischen. Als Beispiel, Sie möchten möglicherweise Ihre Erweiterungen in Firefox 3.5 und Firefox 3.6 oder in unterschiedlichen regionalen Versionen von Firefox testen. Sie können soviele Firefoxversionen installieren wie Sie möchten und die Profile und Versionen mischen.</p>
+<p>Unter Windows und Linux ist es einfach Verknüpfungen für jedes angeleget Profil zu erstellen, unter der Verwendung der Befehle beschrieben in http://kb.mozillazine.org/Command_line_arguments ..</p>
+<p>Für Mac OS X Entwickler, gibt es auch eine Möglichkeit "Verknüpfungen" zu erstellen. Sie können dies erledigen, indem Sie eine Automator-Anwendung öffnen, indem Sie Run Shell Script auswählen und anschließend das Profillade-Skript in das Textfeld eingeben:</p>
+<div class="code panel" style="border-width: 1px;">
+ <div class="codeContent panelContent">
+  <pre class="code-java">/Applications/Firefox.app/Contents/MacOS/firefox-bin -no-remote -p MyProfile &gt; /dev/<span class="code-keyword">null</span> &amp;</pre>
+ </div>
+</div>
+<p>Sie können "/dev/null" auf einen Dateispeicherort ändern, in dem Fall das Sie eine <em>dump</em>-Ausgabe in Firefox sehen möchten oder ander Erweiterungen. last &amp; prevents hindert Automator daran auf das beenden Ihrer Firefoxsitzung zu warten. Speicher Sie das als eine Anwendung nicht als einen Workflow. Un möglicherweise wollen Sie diese auf Ihrem Desktop oder Dock, für einen einfachen Zugriff.</p>
+<p>Es sollten auch noch Konfigurationsänderungen in Ihrem Testprofil vorgenommen werden, sodass Sie im falls etwas schief geht detailierte Informationen erhalten. Die Firefox <a href="/en/Error_Console" title="en/Error Console">Error Console</a> (Extras &gt; Error Console) zeigt normalerweise JavaScripte Fehler an die auf der Webseite auftretten, aber mit etwas Optimierung können Sie Fehlerinformationen aus Ihrer Erweiterungen erhalten. Lesen hierfür Sie diesen Beitrag über<a href="/en/Setting_up_extension_development_environment#Development_preferences" title="en/Setting up extension development environment#Development preferences"><span class="external"> Development preferences</span></a>.</p>
+<h2 id="Developer_extensions">Developer extensions</h2>
+<p>Es gibt ein große Bandbreite an Firefoxerweiterungen die die Web- und Add-on-Entwicklung untersützen. Ein guter Ort um danach zu suchen ist die <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/browse/type:1/cat:4">Mozilla Add-ons Seite</a> auch gibt es hier ein gute <a href="/en/Setting_up_extension_development_environment#Development_extensions" title="en/Setting up extension development environment#Development extensions"><span class="external">Entwicklungserweiterungsliste</span></a>. Sie sollten sich etwas Zeit nehmen und mit den Webentwicklungstools die in Firefox enthalten sind herumspielen. Einige von diesen können sehr hilfreich für die Add-on-Entwicklung sein und überschneiden sich mit den aufgeführen Add-on`s. in dieser Lektion werden wir ein paar wenige ansprechen die wir als sehr hilfreich empfunden haben.</p>
+<h3 id="DOM_Inspector">DOM Inspector</h3>
+<p>Der <a href="/en/DOM_Inspector" title="en/DOM Inspector"><span class="external">DOM Inspector</span></a> war früher ein Teil von Firefox als eine Installationsoption, aber seit Firefox 3 ist von Firefox abgetrennt als ein weiteres Add-on Sie können es hinzufügen und entfernen. Es ist ein sehr nützliches Tool für Untersuchungen das Sie in das DOM von HTML und XUL-Dokumenten sehen lässt, genauso wie eingesetzte CSS-Regeln und zugehörige JavaScript Objekte. <a href="/en/DOM_Inspector/Introduction_to_DOM_Inspector" title="en/Introduction to DOM Inspector">Introduction to DOM Inspector</a> ist eine gute Einführung um mit der Verwendung zu beginnen.</p>
+<p>Der DOM Inspector ist besonders hilfreich um heruauszufinden wie Sie ein Fenster überblenden, und wie Sie standard CSS-Style-Regeln ersetzen. Sie können die Namen der beteiligten Dateien sehen, was Ihnen einen guten Startpunkt gibt wenn Sie in die <a class="external" href="http://mxr.mozilla.org/">Mozilla source</a> sehen. Sie können sogar Styles, Attribute ändern und JavaScript Code ausführen, obwohl dies nicht vollständig zuverlässig ist.</p>
+<h3 id="JavaScript_Debugger">JavaScript Debugger</h3>
+<p>Der Name sagt alles. Der <a href="/en/Venkman" title="en/Venkman">Venkman JavaScript Debugger</a> ist ein größartiger Weg um die Ausführung von JavaScript zu verfolgen.</p>
+<p>Um Erweiterungen und Browsercod zu debuggen, klicken Sie mit der rechten Maustaste auf die geladene Scriptkonsole und entfernen Sie die Auswahl von Exclude Browser Files. Die Liste der geladenen Skripte wird anwachsen um alle Skripte in Firefox zu beinhalten. Unsere Dateinamenkonventionen erweisen sich hierbei als sehr hilfreich. Sie können Unterbrechngspunkte setzen, aus und in Methoden springen und sogar Profilinformationen aus der JavaScriptausführung erhlaten. Sie können Variablen untersuchen, Überwachungsausdrücke verfolgen, und nach Ermessen JS an jedem Punkt der Ausführung auswerten.</p>
+<p>Diese Erweiterungen ist seit einiger Zeit nicht mehr gewartet werden, daher ist sie sehr buggy. Es ist besonders unzuverlässig wenn es Code in XPCOM und XBL-Dateien debuggen soll. Dennoch, ist ein wertvolles Tool wenn man versucht herauszufinden warum sich eine bestimmte Funktion ungewünscht verhält.</p>
+<h3 id="Tamper_Data">Tamper Data</h3>
+<p><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/966" title="https://addons.mozilla.org/en-US/firefox/addon/966">Tamper Data</a> fängt HTTP-Anfragen und ihren -Antworten ab. Dies erlaubt Ihnen diese zu unterbrechen und sogar die Payload-Daten zu ersetzten bevor diese gesendet werden. Es gibt einige ähnliche Erweiterungen, wie z.B. <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/3829">Live HTTP Headers</a>, aber Tamper Data ist das eine das wir am meisten einsetzen. Wir werden mehr über HTTP debugging später erfahren.</p>
+<h3 id="Firebug">Firebug</h3>
+<p>Die <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843" title="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug</a> Erweiterung enthält fast alle Tools die bisher angesprochen wurden, aber sie ist hauptsächlich auf die Webentwicklung ausgerichtet. Die <a class="external" href="http://getfirebug.com/wiki/index.php/Chromebug_User_Guide" title="http://getfirebug.com/wiki/index.php/Chromebug_User_Guide">Chromebug</a> Erweiterung hilft Firebug nützlicher im Bezug auf die Erweiterungsentwicklung, aber sie ist möglicherweise nicht stark genug um alle alle angesprochen Add-ons zu ersetzen.</p>
+<p>Auf der anderen Seite, bietet Firebug eine sehr benutzerfreundliches integriertes Oberfläche und wirdurch stärker weiterentwickelt als seine Gegenstücke. Es ist definitiv einen Versuch wert.</p>
+<h3 id="Leak_Monitor">Leak Monitor</h3>
+<p>Memoryleaks sind immer ein großer Kritikpunkt an Firefox gewesen. mozilla hat über die Zeit bewiesen das es die Arbeitsspeicher nutzung ernst nimmt, durch die Verbesserung der Performance an besonders kritischen Bereichen und durch das entfernen aller Memoryleaks.</p>
+<p>Wie auch immer, Erweiterung können auch die Ursache von Memoryleaks sein. Wenn Sie Ihre Erweiterung in die Mozilla Add-on Seite aufgenommen haben möchten, sollten Sie besser keine Memoryleaks haben. In <a href="/en/Using_XPCOM_in_JavaScript_without_leaking" title="en/Using XPCOM in JavaScript without leaking"><span class="external">Using XPCOM in JavaScript</span></a> sind einige Richtlinien erfastt die Sie befolgen sollten um diese zu vermeiden. Einer der häufigsten Fehler die Entwicklern machen, ist einen JS event listener oder observer zu registrieren und diesen niemals zu entfernen. Die einfache Praxis immer Code für das Entfernen für alles was Sie hinzuzufügen anzufügen macht einen großen Unterschied.</p>
+<p>Um sicher zugehen das Ihre Erweiterungen keine Leaks beinhaltet, Sie sollten die <a href="/en/Leak_Monitor" title="en/Leak Monitor"><span class="external">Leak Monitor Erweiterung</span></a> verwenden wenn Sie das testen. Testen Sie immer öffnende und schließende Fenster. Gewöhnlicherweise tretten diese Leaks bei diesem Vorgang auf.</p>
+<h2 id="Exercise">Exercise</h2>
+<ul>
+ <li>Setzen Sie ein neues Firefoxprofil für die XUL-Schule auf. Stellen Sie sicher das Sie Ihr XUL-Schulen Firefox öffnen und schließen können, ohne dass SIe die Instance von Fireox mit der Sie normalerweise surfen schließen mussen. Machen Sie irgendwelche beliebigen Änderungen an Ihrem XUL-Schulen Projekt, führen Sie make install aus und starten Sie Firefox neu um zu sehen das die Erweiterung nach Ihren Änderungen noch funktioniert.</li>
+ <li>Installiere den DOM Inspector. Benutze ihn um das von Ihnen erstellte Menü zu finden. <em>Hinweis: Sie können mit der ID nach einem Element suchen.</em> Untersuchen Sie CSS-Regel die Firefox standardmäßig verwendet. Sehen Sie sich den endgültigen berechneten Style für die Menüelemente an. Sehen Sie sich im Rest der Firefox DOM um, und versuchen Sie herauszufinden welche Knoten mit der Firefox UI in Verbindung stehen.</li>
+ <li>Installiere die Firebug Erweiterung. Öffne das Firebugfenster und gehe zu einer AJAX-lastigen Webseitewie z.B. Gmail oder Facebook. Öffne und aktviere den <em>Net </em>Reiter. Versuche herauszufinden was passiert wenn einige Anfragen gesendet werden.</li>
+</ul>
+<p>Jetzt das Sie wissen wie man schnell Ihr Projekt und Test-Änderungen überprüft, werden wir lernen wie man neue UI-Elemente zu Firefox durch Overlays und neuer Fenster hinzufügt.</p>
+<p>{{ PreviousNext("XUL_School/The_Essentials_of_an_Extension", "XUL_School/Adding_menus_and_submenus") }}</p>
+<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p>
diff --git a/files/de/archive/mozilla/xul/school_tutorial/einleitung/index.html b/files/de/archive/mozilla/xul/school_tutorial/einleitung/index.html
new file mode 100644
index 0000000000..d31a97b230
--- /dev/null
+++ b/files/de/archive/mozilla/xul/school_tutorial/einleitung/index.html
@@ -0,0 +1,44 @@
+---
+title: Einleitung
+slug: Archive/Mozilla/XUL/School_tutorial/Einleitung
+tags:
+  - Add On
+  - Benutzeroberfläche
+  - Extension
+  - Gecko
+  - Mozilla
+  - XUL
+  - XULRunner
+translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/Introduction
+---
+<div>
+ {{Next("XUL_School/Getting_Started_with_Firefox_Extensions")}}</div>
+<p>Willkommen beim XUL School Tutorial!</p>
+<p>Dieses Tutorial soll der entscheidene Schritt sein, welcher Sie in einen Firefox Extension Developer (Erweiterungsentwickler) verwandelt. Wir haben Jahre an Erfahrung mit XUL und während dieser Zeit alle Probleme kennengelernt, auf die Entwickler stoßen.</p>
+<p>XUL School wurde erschaffen von <a href="http://appcoast.com/" title="http://appcoast.com/">Appcoast</a> (ehemals Glaxstar), eine der wenigen Firmen, welche sich der Addon Entwicklung von Firefox verschrieben hat. Ein Team von über einem Dutzend XUL Entwickler entwickelten Glaxstar während dieses Tutorial geschrieben wurde. Sie sammelten jahrelang Erfahrung und diese reflektieren Sie hier.</p>
+<p><span class="long_text" id="result_box" lang="de"><span class="hps">In diesem Tutorial</span> <span class="hps">erfahren Sie</span><span>, wie Sie</span> <span class="hps">Firefox-Erweiterungen</span> <span class="hps">entwickeln.</span> <span class="hps">Sie werden</span> <span class="hps">lernen, wie man</span> <span class="hps">schnell </span><span class="hps">die häufigsten Aufgaben</span> <span class="hps">in</span> <span class="hps">der Extension-Entwicklung</span><span> löst und</span> <span class="hps">vergleichen</span> <span class="hps">verschiedene Ansätze</span><span>, sie zu lösen</span><span>.</span> <span class="hps">In den meisten Fällen</span> <span class="hps">bieten</span> <span class="hps">wir</span> <span class="hps">Codebeispiele</span><span>, die Sie leicht</span> <span class="hps">kopieren und</span> <span class="hps">an Ihre Bedürfnisse anpassen können</span><span>,</span> <span class="hps">sowie einige</span> <span class="hps">funktionierende Beispiele von <span class="long_text" id="result_box" lang="de"><span class="hps">Erweiterungen</span></span></span><span>.</span> <span class="hps">Das Tutorial</span> <span class="hps">soll</span> <span class="hps">so kurz wie</span> <span class="hps">möglich</span><span> sein.</span> O<span class="hps">ft hilft das Zurückgreifen</span><span class="hps"> auf die</span> <span class="hps">Mozilla</span><span>-Dokumentation für weitere</span> <span class="hps">Informationen</span><span>.</span> <span class="hps">Sie können es</span> <span class="hps">als</span> <span class="hps">praktischen Reiseführer mit Infos</span> durch die wachsende <span class="hps">Welt, die</span> <span class="hps">die</span> <span class="hps">Mozilla</span><span>-Plattform</span> <span class="hps">ist, nutzen.</span> <span class="hps">Die meisten</span> <span class="hps">Links</span> <span class="hps">in</span> <span class="hps">dieser Dokumentation</span> <span class="hps">sollten</span> <span class="hps">angeklickt</span> <span class="hps">und gelesen werden.</span></span></p>
+<p>Wir starten mit einer Einführung in die Hauptkonzepte, falls Sie nicht mit Mozilla und Firefox vertraut sind.</p>
+<h2 id="Mozilla_and_Firefox">Mozilla and Firefox</h2>
+<p>Der Term <a href="http://en.wikipedia.org/wiki/Mozilla" title="http://en.wikipedia.org/wiki/Mozilla">Mozilla</a> wird benutzt, um folgende Konzepte zu beschreiben: das Mozilla Projekt, die <a href="http://en.wikipedia.org/wiki/Mozilla_Foundation" title="http://en.wikipedia.org/wiki/Mozilla_Foundation">Mozilla Foundation</a>, die <a href="http://en.wikipedia.org/wiki/Mozilla_Corporation" title="http://en.wikipedia.org/wiki/Mozilla_Corporation">Mozilla Corporation</a> und den alten <a href="http://en.wikipedia.org/wiki/Mozilla_Application_Suite" title="http://en.wikipedia.org/wiki/Mozilla_Application_Suite">Mozilla browser</a>. Auch Firefox wird manchmal "Mozilla" genannt. Falls Ihnen die Begriffe nicht geläufig sind, ist es von Vorteil, sich etwas Zeit zu nehemen und mehr über Mozilla zu lernen. Dies hilft die Kultur und das Umfeld von Mozilla zu verstehen.</p>
+<p><span class="long_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="Mozilla has spawned several products and projects, the most notable being the Mozilla Firefox web browser.">Mozilla hat mehrere <a href="http://www.mozilla.org/projects/" title="http://www.mozilla.org/projects/">Produkte und Projekte</a> <span class="long_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="Mozilla has spawned several products and projects, the most notable being the Mozilla Firefox web browser.">hervorgebracht.</span></span> Das bemerkenswerteste ist der Mozilla Firefox Web-Browser. </span><span style="background-color: rgb(255, 255, 255);" title="Firefox is one of the most successful open source projects in history, combining the openness, standards-compliance and sophistication of open source with the focus on user experience and powerful outreach more commonly seen in less open companies.">Firefox ist eines der erfolgreichsten Open-Source-Projekte in der Geschichte. Es kombiniert Offenheit, die Einhaltung von Standards und Raffinesse von Open Source mit dem Fokus auf Benutzerfreundlichkeit und leistungsstarke Vielseitigkeit, wie man es in weniger offenen Unternehmen nur selten sieht. </span><br>
+ <br>
+ <span style="background-color: rgb(255, 255, 255);" title="Version 1.0 of Firefox was released in November 2004, version 2.0 in October 2006, and version 3.0 in June 2008.">Version 1.0 von Firefox wurde im November 2004, Version 2.0 im Oktober 2006 und Version 3.0 im Juni 2008 veröffentlicht. </span><span style="background-color: rgb(255, 255, 255);" title="This tutorial was written after Firefox 3 was released, and has been updated with time.">Dieses Tutorial wurde geschrieben, nachdem Firefox 3 veröffentlicht wurde, und ist mit der Zeit aktualisiert worden. </span><span style="background-color: rgb(255, 255, 255);" title="While most of it should still work for creating extensions Firefox 3 (and even Firefox 2), it is strongly recommended that you aim to support modern Firefox versions, to encourage users to stay up to date with security fixes.">Obwohl noch für die Erstellung von Erweiterungen in Firefox 3 (und auch Firefox 2) gearbeitet wird, ist es dringend zu empfehlen, dass Sie moderne Firefox-Versionen unterstützen, um Nutzer zu motivieren, mit Sicherheitsupdates auf dem laufenden zu bleiben. </span><span style="background-color: rgb(255, 255, 255);" title="A release that is more than 6 months old is likely vulnerable to published security bugs.">Eine Version, die vor mehr als 6 Monaten veröffentlicht wurde, ist wahrscheinlich anfällig für Sicherheitslücken. </span><br>
+ <br>
+ <span style="background-color: rgb(255, 255, 255);" title="Firefox and other Mozilla applications can be seen as composed of two different parts: a user interface layer that is distinct for each project, and a common platform on top of which the interface layer is built.">Firefox und andere Mozilla-Anwendungen kann man als zusammengesetzt <span class="long_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="Firefox and other Mozilla applications can be seen as composed of two different parts: a user interface layer that is distinct for each project, and a common platform on top of which the interface layer is built.">ansehen </span></span>aus zwei verschiedenen Teilen: eine Benutzeroberflächen-Schicht, die für jedes Projekt <span class="long_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="Firefox and other Mozilla applications can be seen as composed of two different parts: a user interface layer that is distinct for each project, and a common platform on top of which the interface layer is built.">verschieden </span></span> ist, und eine gemeinsame Plattform, worauf die <span class="long_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="Firefox and other Mozilla applications can be seen as composed of two different parts: a user interface layer that is distinct for each project, and a common platform on top of which the interface layer is built.">Benutzeroberflächen-Schicht angesiedelt ist.</span></span> </span><span style="background-color: rgb(255, 255, 255);" title="The user interface is built with technology known as XUL, and the platform is known as XULRunner.">Die Benutzeroberfläche ist mit der Technologie <a href="https://developer.mozilla.org/en-US/docs/XUL">XUL</a> entwickelt und die Plattform wird als <a href="https://developer.mozilla.org/en-US/docs/XULRunner">XULRunner</a> bezeichnet.</span></span></p>
+<p> </p>
+<h2 id="XUL">XUL</h2>
+<p><a href="/en-US/docs/XUL" title="XUL">XUL</a> <span id="result_box" lang="de"><span class="hps">(ausgesprochen</span> <span class="hps atn">"</span><span>zool</span><span>"</span><span>)</span> <span class="hps">ist eine von vielen</span> <span class="hps">Technologien</span> <span class="hps">für die Erstellung von</span> <span class="hps">Mozilla</span><span>-basierten Produkten</span> <span class="hps">und wird auch für Erweiterungen</span> <span class="hps">verwendet</span><span>.</span> <span class="hps">Sie</span> <span class="hps">ist nur ein Teil</span> <span class="hps">der Entwicklungsl</span><span class="hps">andschaft,</span> <span class="hps">aber da</span> sie<span class="hps"> praktisch</span> <span class="hps">exklusiv für</span> <span class="hps">Mozilla</span> <span class="hps">ist</span><span>, neigt man dazu, sie zu </span><span class="hps">verwenden, um </span><span class="hps">Mozilla</span><span>-bezogene</span> <span class="hps">Entwicklungen</span> <span class="hps">zu identifizieren.</span> <span class="hps">Sie</span> <span class="hps">lesen manchmal</span> <span class="hps atn">Begriffe wie "</span><span>XUL</span><span>-Anwendungen</span><span class="atn">" und "</span><span>XUL</span><span>-Erweiterungen</span><span>"</span><span>, aber nur selten</span> <span class="hps">werden sie für</span> <span class="hps">Projekte benutzt, die</span> <span class="hps">ausschließlich</span> <span class="hps">mit</span> <span class="hps">XUL</span> <span class="hps">gebaut</span> <span class="hps">sind</span><span>.</span> <span class="hps">Es</span> <span class="hps">bedeutet in der Regel</span><span>, dass die Projekte</span> <span class="hps">mit</span> <span class="hps">Mozilla</span><span>-Technologien <span id="result_box" lang="de"><span class="hps">gebaut</span> <span class="hps">wurden</span></span>.</span> <span class="hps">Auch dieses</span> <span class="hps">Projekt, genannt</span> <span class="hps">XUL</span> <span class="hps">Schule,</span> <span class="hps">erstreckt sich über mehrere</span> <span class="hps">andere Technologien wie</span> <span class="hps">JavaScript</span><span>, CSS,</span> <span class="hps">XBL</span> <span class="hps">und</span> <span class="hps">XPCOM</span><span>.</span></span></p>
+<h2 id="XULRunner">XULRunner</h2>
+<p><span id="result_box" lang="de"><a href="https://developer.mozilla.org/en-US/docs/XULRunner"><span class="hps">XULRunner</span></a> <span class="hps">umfasst die</span> <a href="https://developer.mozilla.org/en-US/docs/Gecko"><span class="hps">Gecko</span><span>-Rendering-Engine</span></a><span>,</span> <span class="hps">die</span> <a href="https://developer.mozilla.org/en-US/docs/Necko"><span class="hps">Necko</span> <span class="hps">Netzwerk-Bibliothek</span></a><span>,</span> <span class="hps">und einige andere</span> <span class="hps">Komponenten, die</span> <span id="result_box" lang="de"><span class="hps">unter anderem </span></span><span class="hps">OS</span><span class="atn">-</span><span>unabhängiges</span> <span class="hps">Datei-Management</span><span>, Zugänglichkeit und</span> <span class="hps">Lokalisierung</span> <span class="hps">bieten</span><span>.</span> <span class="hps">Es ist eine</span> <span class="hps">sehr</span> <span class="hps">leistungsfähige Plattform</span><span>, die ein solch</span> <span class="hps">schnelles</span> <span class="hps">Wachstum der</span> <span class="hps">Entwickler-Community</span> <span class="hps">rund um</span> <span class="hps">Mozilla</span> <span class="hps">und Firefox</span> <span class="hps">erlaubt</span> <span class="hps">hat</span><span>.</span></span></p>
+<p><span id="result_box" lang="de"><span class="hps">XULRunner</span> <span class="hps">ist in</span> <span class="hps">binärer Form</span> <span class="hps">auf der</span> </span><a href="https://developer.mozilla.org/en-US/docs/XULRunner">XULRunner</a> Seite verfügbar<span lang="de"> <span class="hps">und sie ist</span> <span class="hps">die Basis</span> <span class="hps">für mehrere Projekte</span><span>, wie zum Beispiel</span> <span class="hps">Songbird</span><span>,</span> <span class="hps">Miro</span> <span class="hps">und</span> <span class="hps">Eudora</span><span>.</span> <span class="hps">Es gibt eine sehr</span> <span class="hps">umfassende Liste von</span> <span class="hps">Anwendungen in der</span> <a href="https://developer.mozilla.org/en-US/docs/XULRunner_Hall_of_Fame"><span class="hps">XULRunner</span> </a><span class="hps"><a href="https://developer.mozilla.org/en-US/docs/XULRunner_Hall_of_Fame">Hall of Fame</a>.</span></span></p>
+<h3 id="Gecko">Gecko</h3>
+<p><span id="result_box" lang="de"><span class="hps">Die</span> <a href="https://developer.mozilla.org/en-US/docs/Gecko"><span class="hps">Gecko-Engine</span></a> <span class="hps">ist der Teil von</span> <span class="hps">Firefox</span>, der <span class="hps">verwendet wird, um</span> <span class="hps">Web-Seiten und</span> <span class="hps">eine eigene Benutzeroberfläche</span> <span class="hps">zu gestalten.</span> <span class="hps">Sie erkennen</span> <span class="hps">den Grad der</span> <span class="hps">Kompatibilität</span> <span class="hps">von</span> <span class="hps">Web-Standards</span> <span class="hps">in</span> <a href="http://en.wikipedia.org/wiki/List_of_web_browsers#Gecko-based_browsers"><span class="hps">Gecko</span></a><span><a href="http://en.wikipedia.org/wiki/List_of_web_browsers#Gecko-based_browsers">-basierten Browsern</a>,</span> <span class="hps">indem Sie sich ihren</span> <a href="http://en.wikipedia.org/wiki/User_agent"><span class="hps">User Agent</span></a> <span class="hps">String ansehen</span><span>, der die</span> <span class="hps">Gecko</span><span>-Version</span> <span class="hps">enthalten sollte</span><span>.</span> <span class="hps">Gecko</span><span>-Versionen</span> <span class="hps">sind etwas</span> <span class="hps">unabhängig von</span> <span class="hps">Firefox</span><span>-Versionen</span><span>. Sie können</span> <span class="hps">eine Zuordnung</span> <span class="hps">von</span> <span class="hps">Firefox</span><span>-Versionen und</span> <span class="hps">Gecko-Versionen</span> <span class="hps">auf der</span> <a href="https://developer.mozilla.org/en-US/docs/Gecko"><span class="hps">Gecko</span><span>-Seite</span></a> <span class="hps">sehen.</span> <span class="hps">Der</span> <span class="hps">User Agent</span> <span class="hps">String</span> <span class="hps">für</span> <span class="hps">Firefox</span> <span class="hps">zum Zeitpunkt</span> <span class="hps">des Schreibens dieses Artikels</span> <span class="hps atn">(</span><span>in</span> <span class="hps">US-Englisch,</span> <span class="hps">Mac</span> <span class="hps">OS</span> <span class="hps">X)</span> <span class="hps">ist</span><span>:</span></span></p>
+<p>Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:<strong>7.0.1</strong>) Gecko/20100101 Firefox/7.0.1</p>
+<p><span id="result_box" lang="de"><span class="hps">Der markierte</span> <span class="hps">Abschnitt ist die</span> <span class="hps">Gecko</span><span>-Version</span><span>:</span> <span class="hps">7.0.1</span><span>.</span> <span class="hps">Sie können den </span></span><span id="result_box" lang="de"> <span class="hps atn">User-Agent-</span><span>String </span></span><span id="result_box" lang="de"><span class="hps">lesen und</span> <span class="hps">kopieren in jedem beliebiegen </span><span class="hps">Firefox-Fenster.</span> Dazu <span class="hps atn">wählen Sie "</span><span>Hilfe&gt;</span> <span class="hps">Informationen zur Fehlerbehebung</span><span>"</span> <span class="hps">aus dem Hauptmenü</span><span>.</span></span></p>
+<h2 id="Weiter_im_Tutorial">Weiter im Tutorial</h2>
+<p><span id="result_box" lang="de"><span class="hps">Mit</span> <span class="hps">den grundlegenden Konzepten</span> <span class="hps">können</span> <span class="hps">wir jetzt</span> <span class="hps">in die</span> <span class="hps">Entwicklung von Erweiterungen</span><span class="alt-edited"> einsteigen.</span> <span class="hps">Sie werden sich wahrscheinlich</span> <span class="hps">immer noch fragen,</span> <span class="hps">was genau</span> <span class="hps">ist eine Erweiterung</span><span>,</span> <span class="hps">was</span> kann <span class="hps alt-edited">sie leisten </span><span class="hps alt-edited">und wie kann man sie erstellen. </span><span class="hps">Nun,</span> <span class="hps">dieses ganze</span> <span class="hps">Tutorial</span><span class="hps"> verfolgt das Ziel, </span><span class="hps">Ihnen</span> <span class="hps">das zu erklären.</span><br>
+ <br>
+ <span class="hps">Willkommen in der Welt</span> <span class="hps">der</span> <span class="hps">Extension-Entwicklung</span><span>.</span> <span class="hps">Jetzt</span> wollen wir uns dem zuwenden.</span></p>
+<div>
+ {{Next("XUL_School/Getting_Started_with_Firefox_Extensions")}}</div>
+<p><small>This tutorial translation was kindly donated to Mozilla by Sinn - IT mit Emotion</small></p>
diff --git a/files/de/archive/mozilla/xul/school_tutorial/getting_started_with_firefox_extensions/index.html b/files/de/archive/mozilla/xul/school_tutorial/getting_started_with_firefox_extensions/index.html
new file mode 100644
index 0000000000..bfb1d41e7a
--- /dev/null
+++ b/files/de/archive/mozilla/xul/school_tutorial/getting_started_with_firefox_extensions/index.html
@@ -0,0 +1,75 @@
+---
+title: Mit Firefox Erweiterungen beginnen
+slug: Archive/Mozilla/XUL/School_tutorial/Getting_Started_with_Firefox_Extensions
+tags:
+  - Erweiterungen
+translation_of: >-
+  Archive/Add-ons/Overlay_Extensions/XUL_School/Getting_Started_with_Firefox_Extensions
+---
+<p>{{ PreviousNext("XUL_School/Introduction", "XUL_School/The_Essentials_of_an_Extension") }}</p>
+<h2 id="Was_ist_eine_Firefox_Erweiterung">Was ist eine Firefox Erweiterung?</h2>
+<blockquote>
+ <p>Extensions add new functionality to Mozilla applications such as Firefox and Thunderbird. They can add anything from a toolbar button to a completely new feature. They allow the application to be customized to fit the personal needs of each user if they need additional features, while keeping the applications small to download.</p>
+</blockquote>
+<p>Auszug aus der <a href="/en/Extensions" title="en/Extensions">Erweiterungs-Seite</a>.</p>
+<p>Wie es das Zitat beschreibt, ist eine Erweiterung eine kleine Anwendung, die etwas Neues zu einer oder mehreren Mozilla-Anwendungen hinzufügt. Dieses Tutorial konzentriert sich auf Erweiterungen für Firefox. Dieselben (oder sehr ähnliche) Prinzipien gelten auch für die Entwicklung von Erweiterungen zu anderen Anwendungen wie Thunderbird, Seamonkey oder Flock.</p>
+<p>Bitte beachten Sie, dass es es einen Unterschied zwischen der Definiton einer <em>Erweiterung</em> und einem <em>Add-on</em> gibt. Alle Erweiterungen sind Add-ons, aber ein Add-on kann auch eine Theme, ein Plug-in oder ein Sprachpaket sein. Der Inhalt dieses Tutorials behandelt die Entwicklung von Erweiterungen. Themes und Sprachpakete werden in einer sehr ähnlichen Art und Weise entwickelt. Plug-ins sind gänzlich anders und sie werden in diesem Tutorial nicht behandelt. Sie können mehr über Plug-ins und deren Entwicklung auf der <a href="/en/Plugins">Plug-in-Seite</a> erfahren.</p>
+<p>Firefox bietet eine sehr reiche und flexible Architektur. Diese erlaubt es den Entwicklern von Erweiterungen fortgeschrittene Funktionalitäten hinzuzufügen, sich der Benutzererfahrung anzupassen und Teile des Browsers vollständig zu ersetzen oder zu entfernen.</p>
+<p>Das <a href="https://addons.mozilla.org/">Mozilla Add-on</a> Repository (AMO) beinhaltet eine umfassende Anzahl von Erweiterungen mit einer großen Bandbreite an Funktionen: Inhaltsfilterung (<a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1865" title="https://addons.mozilla.org/en-US/firefox/addon/1865">AdBlock Plus</a>, <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/722" title="https://addons.mozilla.org/en-US/firefox/addon/722">NoScript</a>), Interaktion mit Webanwendungen (<a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/3615" title="https://addons.mozilla.org/en-US/firefox/addon/3615">Delicious Bookmarks</a>, <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/5202" title="https://addons.mozilla.org/en-US/firefox/addon/5202">eBay Companion</a>) und Webentwicklung (<a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622" title="https://addons.mozilla.org/en-US/firefox/addon/6622">DOM Inspector</a>, <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843" title="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug</a>). Dabei handelt es sich um sehr fortgeschrittene und komplexe Erweiterungen. Sie werden in diesem Tutorial das meiste erlernen, was benötigt wird, um derartige Erweiterungen zu erzeugen (genau genommen basiert Glaxstar auf drei von den hier aufgezählten).</p>
+<p>Erweiterungen gibt es im Moment in drei verschiedenen Ausprägungen: <a class="link-https" href="https://addons.mozilla.org/en-US/developers/builder" title="https://addons.mozilla.org/en-US/developers/builder">Add-ons SDK extensions</a> (auch bekannt als Jetpacks), <a href="/en/Extensions/Bootstrapped_extensions" title="https://developer.mozilla.org/en/Extensions/Bootstrapped_extensions">bootstrapped-Erweiterungen </a>und traditionelle Erweiterungen. Wenn Sie gerade beginnen, Add-ons zu entwickeln, bietet das <a href="https://developer.mozilla.org/de/Add-ons/SDK">Add-on SDK</a> einen fantastischen Weg, um schnell Erweiterungen zu entwickeln und auf diesen aufzubauen. Dieses Tutorial konzentriert sich auf traditionelle Erweiterungen, welche auf eine andere Art entwickelt werden. Bootstrapped-Erweiterungen sind eine Stufe komplexer, als die traditionellen. Von daher sollten Sie zuerst dieses Tutorial durchgehen, bevor Sie sich diese ansehen.</p>
+<p>Wir werden dieses Tutorial mit der Analyse einer sehr einfachen Erweiterung beginnen.</p>
+<h2 id="Die_Hallo_Welt_Erweiterung">Die Hallo Welt Erweiterung</h2>
+<p>Unsere Beispielerweiterung und dieses Tutorial im Allgemeinen sind ausgelegt für moderne Versionen des Firefox, aber die meisten von ihnen funktionieren auch auf älteren Versionen.</p>
+<p>Wir werden nun mit einer einfachen "Hallo Welt"-Erweiterung beginnen. WIr beginnen mit seiner Installation. Dafür klicken Sie auf den folgenden Link.</p>
+<p><a href="/@api/deki/files/5139/=xulschoolhello1.xpi" title="https://developer.mozilla.org/@api/deki/files/5139/=xulschoolhello1.xpi">Install Hello World</a></p>
+<p>Hierbei wird entweder eine Installation oder ein Datei-Download angestoßen, abhängig von dem Inhaltstyp, der auf dem Webserver abgelegt ist. Der entsprechende Inhaltstyp, um eine Installation zu veranlassen, ist <strong>application/x-<strong>xpinstall</strong></strong>. Im Fall dieses Wiki`s, ist der Inhaltstyp entsprechend gesetzt und ein Installationsfenster sollte erscheinen.</p>
+<p>Wenn der Inhaltstyp richtig gesetzt ist, werden Sie ordnungsgemäß gewarnt, dass es dieser Seite nicht erlaubt ist Add-ons zu installieren. Hierbei handelt es sich um eine Sicherheitsbarriere, die Seiten daran hindert, Erweiterungen ohne Benutzerzustimmung zu installieren. Dies ist vonnöten, weil bösartige Erweiterungen den gleichen Schaden verursachen können, wie jedes anderes Schadprogramm: Datenklau, das Löschen oder das Austauschen von Daten oder sonstiges unerwünschtes Verhalten. <a class="link-https" href="https://addons.mozilla.org/" title="https://addons.mozilla.org/">AMO</a> ist die einzige Seite mit einer generellen Erlaubnis. Dies liegt daran, dass die auf <a class="link-https" href="https://addons.mozilla.org/" title="https://addons.mozilla.org/">AMO</a> veröffentlichten Add-ons einem Überprüfungsprozess unterzogen werden, der Sicherheitsüberprüfungen beinhaltet.</p>
+<p>Nach dem Herunterladen der Datei, können Sie diese, per Drag and Drop in den Firefox Inhaltsbereich ziehen und die Installation sollte beginnen.</p>
+<p>Sie werden ein Fenster sehen, welches Ihnen mitteilt, dass sie dabei sind eine Erweiterung zu installieren. In diesem sind einige zusätzliche Informationen enthalten, wie unter anderem der Name des Authors. Sie werden benachrichtigt, dass der Author nicht verfiziert werden kann. Nur Erweiterungen, die mit einem digitalen Zertifkat signiert sind, können die Autorschaft verifizieren. Signierte Erweiterungen sind selten, aber wir werden das Signieren von Erweiterungen später behandeln.</p>
+<p>Klicken Sie auf die "Jetzt Installieren"-Schaltfläche. Nach der Installation der Erweiterung, werden Sie gefragt ob Sie Firefox neu starten wollen. Installation, Deinstallation, Aktivierung und Deaktiverung von Add-ons erfordern einen Neustart für die Ausführung (außer von NPAPI-Plug-ins, Add-on SDK Erweiterungen und Bootstrapped Erweiterungen). Dies ist ein wichtiger Punkt, den Sie im Hinterkopf behalten sollten, wenn Sie Erweiterungen entwickeln, die andere Erweiterungen oder Themes manipulieren.</p>
+<p>Sehen Sie nach der Installation in das Firefox Hauptfenster und schauen Sie, ob Sie eine Veränderung feststellen können.</p>
+<p>Haben Sie es gesehen? Dort ist ein neues Menü im Hauptmenü, bezeichnet "Hello World!".</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/8421/menu_item%20-%20helloworld.png" style="width: 383px; height: 117px;"></p>
+<p>Wenn Sie dieses Menü öffnen und den darunter liegenden Menüpunkt, werden Sie eine nette Mitteilung sehen ("nett" im weitesten Sinne). Klicken Sie auf die OK-Schaltfläche um die Mitteilung zu schließen.</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/8419/alert_message%20-%20helloworld.png" style="width: 364px; height: 132px;"></p>
+<p>Das ist alles was die Erweiterung macht. Sehen wir uns das jetzt mal genauer an.</p>
+<h2 id="Erweiterungsinhalte">Erweiterungsinhalte</h2>
+<p>Sie werden vielleicht bemerkt haben, dass die von Ihnen installierte Erweiterungsdatei mit <em>xulschoolhello1.xpi</em> benannt ist. <a href="/en/XPI" title="en/XPI">XPI</a> (ausgesprochen "zippy") steht für Cross-Plattform Installer. Diese Installationsdatei funktioniert auf allen Plattformen, die Firefox unterstützen. XPIs sind einfache ZIP-Dateien, aber Firefox erkennt die XPI-Erweiterung und veranlasst den Installationprozess, wenn die XPI-Datei geladen wird<em>.</em></p>
+<p>Um in die XPI-Datei zu sehen, müssen Sie diese zuerst herunterladen, ohne sie zu installieren. Anstatt eine Installation durch einen Klick auf einen Link oder eine Schaltfläche auszulösen, führen sie einen Rechtsklick <a href="https://developer.mozilla.org/@api/deki/files/5139/=xulschoolhello1.xpi">darauf</a> aus und wählen Sie die <em>Ziel speichern unter...</em> Option.</p>
+<p>Entpacken Sie die XPI-Datei an einen gewünschten Ort. Unter Linux oder Mac OS X führen Sie den folgenden Befehl aus, um die Datei  zu entpacken:</p>
+<pre class="syntaxbox">unzip xulschoolhello1.xpi -d xulschoolhello1
+</pre>
+<p>Unter Windows können Sie die Dateierweiterung von xpi zu zip ändern oder die Datei direkt öffnen und anschließend mit einem ZIP-Tool entpacken.</p>
+<p>Sie sollten die folgendene Dateistruktur sehen:</p>
+<ul>
+ <li>xulschoolhello1
+  <ul>
+   <li>chrome.manifest</li>
+   <li>install.rdf</li>
+   <li>content
+    <ul>
+     <li>browserOverlay.xul</li>
+     <li>browserOverlay.js</li>
+    </ul>
+   </li>
+   <li>skin
+    <ul>
+     <li>browserOverlay.css</li>
+    </ul>
+   </li>
+   <li>locale
+    <ul>
+     <li>en-US
+      <ul>
+       <li>browserOverlay.dtd</li>
+       <li>browserOverlay.properties</li>
+      </ul>
+     </li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+<p>Das ist eine große Anzahl an Dateien, für etwas so einfaches! In der nächsten Lektion werden wir die Dateien und was sie machen genauer analysieren .</p>
+<p>{{ PreviousNext("XUL_School/Introduction", "XUL_School/The_Essentials_of_an_Extension") }}</p>
+<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p>
diff --git a/files/de/archive/mozilla/xul/school_tutorial/index.html b/files/de/archive/mozilla/xul/school_tutorial/index.html
new file mode 100644
index 0000000000..c11982d447
--- /dev/null
+++ b/files/de/archive/mozilla/xul/school_tutorial/index.html
@@ -0,0 +1,70 @@
+---
+title: XUL School Tutorial
+slug: Archive/Mozilla/XUL/School_tutorial
+translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School
+---
+<p>XUL School ist ein umfassendes Tutorial zur Entwicklung von Addons, das sich auf die Erstellung von Firefox-Erweiterungen konzentriert. Wir empfehlen Dir, dieses Dokument mindestens einmal vollständig zu lesen. Obwohl sich Firefox sehr schnell weiterentwickelt, sollte der Inhalt dieses Tutorials aktuell und korrekt sein.</p>
+<dl>
+  <dt>
+    Einführung</dt>
+  <dd>
+    <ul>
+      <li><a href="/en/XUL_School/Introduction" title="en/XUL School/Introduction">Einführung</a></li>
+      <li><a href="/en/XUL_School/Getting_Started_with_Firefox_Extensions" title="en/XUL School/Getting Started with Firefox Extensions">Mit Firefox Erweiterungen beginnen</a></li>
+      <li><a href="/en/XUL_School/The_Essentials_of_an_Extension" title="en/XUL School/The Essentials of an Extension">Die Grundlagen einer Erweiterung</a></li>
+      <li><a href="/en/XUL_School/Setting_Up_a_Development_Environment" title="en/XUL School/Setting Up a Development Environment">Eine Entwicklungsumgebung einrichten</a></li>
+      <li><a href="/en/XUL_School/JavaScript_Object_Management" title="en/XUL School/JavaScript Object Management">JavaScript Object Management</a></li>
+    </ul>
+  </dd>
+  <dt>
+    Grundlegende Techniken</dt>
+  <dd>
+    <ul>
+      <li><a href="/en/XUL_School/Adding_menus_and_submenus" title="en/XUL School/Adding menus and submenus">Menüs und Untermenüs hinzufügen</a></li>
+      <li><a href="/en/XUL_School/Adding_Toolbars_and_Toolbar_Buttons" title="en/XUL School/Adding Toolbars and Toolbar Buttons">Toolbars und Toolbar Buttons hinzufügen </a></li>
+      <li><a href="/en/XUL_School/Adding_Events_and_Commands" title="en/XUL School/Adding Events and Commands">Ereignisse und Befehle hinzufügen</a></li>
+      <li><a href="/en/XUL_School/Adding_windows_and_dialogs" title="en/XUL School/Adding windows and dialogs">Fenster und Dialoge hinzufügen</a></li>
+      <li><a href="/en/XUL_School/Adding_sidebars" title="en/XUL School/Adding sidebars">Sidebars hinzufügen</a></li>
+      <li><a href="/en/XUL_School/User_Notifications_and_Alerts" title="en/XUL School/User Notifications and Alerts">Benutzerbenachrichtigungen und -Warnungen </a></li>
+    </ul>
+  </dd>
+  <dt>
+    Fortgeschrittene Techniken</dt>
+  <dd>
+    <ul>
+      <li><a href="/en/XUL_School/Intercepting_Page_Loads" title="en/XUL School/Intercepting Page Loads">Den Seitenladevorgang abfangen</a></li>
+      <li><a href="/en/XUL_School/Connecting_to_Remote_Content" title="en/XUL School/Connecting to Remote Content">Inhalt von anderen Servern einbinden</a></li>
+      <li><a href="/en/XUL_School/Handling_Preferences" title="en/XUL School/Handling Preferences">Auf Nutzereinstellungen zugreifen</a></li>
+      <li><a href="/en/XUL_School/Local_Storage" title="en/XUL School/Local Storage">Lokale Datenspeicherung</a></li>
+    </ul>
+  </dd>
+  <dt>
+    Weiterführende Themen</dt>
+  <dd>
+    <ul>
+      <li><a href="/en/XUL_School/The_Box_Model" title="en/XUL School/The Box Model">Das Box-Modell</a></li>
+      <li><a href="/en/XUL_School/XPCOM_Objects" title="en/XUL School/XPCOM Objects">XPCOM Objekte</a></li>
+      <li><a href="/en/XUL_School/Observer_Notifications" title="en/XUL School/Observer Notifications">Beobachterb</a><a href="/en/XUL_School/Observer_Notifications" title="en/XUL School/Observer Notifications">enachrichtigungen</a></li>
+      <li><a href="/en/XUL_School/Custom_XUL_Elements_with_XBL" title="en/XUL School/Custom XUL Elements with XBL">Eigene XUL Elemente mit XBL erstellen</a></li>
+      <li><a href="/en/XUL_School/Mozilla_Documentation_Roadmap" title="en/XUL School/Mozilla Documentation Roadmap">Roadmap der Mozilla Documentation </a></li>
+      <li><a href="/en/XUL_School/Useful_Mozilla_Community_Sites" title="en/XUL School/Useful Mozilla Community Sites">Nützliche Seiten der Mozilla Community </a></li>
+    </ul>
+  </dd>
+  <dt>
+    Anhänge</dt>
+  <dd>
+    <ul>
+      <li><a href="/en/XUL_School/Appendix_A:_Add-on_Performance" title="en/XUL School/Appendix A: Add-on Performance">Anhang A: Addon Performance</a></li>
+      <li><a href="/en/XUL_School/Appendix_A:_Add-on_Performance" title="en/XUL School/Appendix A: Add-on Performance">Anhang</a> <a href="/en/XUL_School/Appendix_B:_Install_and_Uninstall_Scripts" title="en/XUL School/Appendix B: Install and Uninstall Scripts">B: Installations- und Deinstallations-Skripte</a></li>
+      <li><a href="/en/XUL_School/Appendix_A:_Add-on_Performance" title="en/XUL School/Appendix A: Add-on Performance">Anhang</a><a href="/en/XUL_School/Appendix_C:_Avoid_using_eval_in_Add-ons" title="en/XUL School/Appendix C: Avoid using eval in Add-ons"> C: Wie man 'eval' in Addons vermeidet</a></li>
+      <li><a href="/en/XUL_School/Appendix_A:_Add-on_Performance" title="en/XUL School/Appendix A: Add-on Performance">Anhang</a><a href="/en/XUL_School/Appendix_D:_Loading_Scripts" title="en/XUL School/Appendix D: Loading Scripts"> D: Skripte laden</a></li>
+      <li><a href="/en/XUL_School/Appendix_A:_Add-on_Performance" title="en/XUL School/Appendix A: Add-on Performance">Anhang</a><a href="/en/XUL_School/DOM_Building_and_HTML_Insertion" title="en/XUL School/Appendix E: DOM Building and HTML Insertion"> E: Das DOM erstellen und HTML in Dokumente einfügen</a></li>
+      <li><a href="/en/XUL_School/Appendix_A:_Add-on_Performance" title="en/XUL School/Appendix A: Add-on Performance">Anhang</a><a href="/en/XUL_School/Appendix_F:_Monitoring_DOM_changes" title="en/XUL School/Appendix F: Monitoring DOM changes"> F: Änderungen am DOM verfolgen</a></li>
+    </ul>
+  </dd>
+</dl>
+<p>Das XUL School Projekt wurde von <a class="external" href="http://appcoast.com/" title="http://appcoast.com/">Appcoast</a> (ehemals Glaxstar) entwickelt. Das Projekt wird hier unter deren <a href="/Project:Copyrights" title="https://developer.mozilla.org/Project:Copyrights">Lizenzen</a> veröffentlicht. Die originalen Inhalte wurden wo nötig angepasst.</p>
+<div class="noinclude">
+  <p>{{ languages( { "ja": "ja/XUL_School", "fr": "fr/Vulgarisation_XUL", "es": "es/Escuela_XUL", "de": "de/XUL_School" } ) }}</p>
+</div>
+<p> </p>
diff --git a/files/de/archive/mozilla/xul/separator/index.html b/files/de/archive/mozilla/xul/separator/index.html
new file mode 100644
index 0000000000..d01d1d589c
--- /dev/null
+++ b/files/de/archive/mozilla/xul/separator/index.html
@@ -0,0 +1,123 @@
+---
+title: separator
+slug: Archive/Mozilla/XUL/separator
+tags:
+  - XUL Elemente
+  - XUL Referenz
+translation_of: Archive/Mozilla/XUL/separator
+---
+<div class="noinclude"><span class="breadcrumbs XULRef_breadcrumbs">
+ « <a href="/de/docs/XUL_Referenz">XUL Referenz Startseite</a>    [
+ <a href="#Beispiele">Beispiele</a> |
+ <a href="#Attribute">Attribute</a> |
+ <a href="#Eigenschaften">Eigenschaften</a> |
+ <a href="#Methoden">Methoden</a> |
+ <a href="#Verwandte_Themen">Verwandte Themen</a> ]
+</span></div>
+<p>Erstellt eine trennende Lücke zwischen Elementen. Dieser Typ ist dazu gedacht unterschiedliche Teile eines Dialogs aufzuteilen. Es wird kein sichtbarer Trennbalken dargestellt, aber ein kleiner Leerraum frei gelassen. Die Funktionsweise ist identisch zum <code><a href="/de/docs/Mozilla/Tech/XUL/spacer" title="spacer">spacer</a></code> Element außer, dass standardmäßig eine kleine Größe eingestellt ist (normalerweise <code>1.5 em</code>).</p>
+<dl> <dt>Attribute</dt> <dd><a href="#a-separator.orient">orient</a></dd>
+</dl>
+<dl> <dt>Styleklassen</dt> <dd><a href="#s-groove">groove</a>, <a href="#s-groove-thin">groove-thin</a>, <a href="#s-thin">thin</a></dd>
+</dl>
+<h3 id="Beispiele">Beispiele</h3>
+<pre>&lt;separator class="groove-thin"/&gt;
+</pre>
+<h3 id="Attribute">Attribute</h3>
+<div id="a-separator.orient">
+
+
+<dl>
+ <dt><code id="a-separator.orient"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/separator.orient">orient</a></code></dt>
+ <dd>Type: <em>one of the values below</em></dd>
+ <dd>Used to specify whether the <code><code><a href="/en-US/docs/Mozilla/Tech/XUL/separator" title="separator">separator</a></code></code> is a horizontal or vertical separator. Note that the values are the reverse of what seems more likely.</dd>
+ <dd>
+ <dl>
+  <dt><code>horizontal</code></dt>
+  <dd>The separator separates vertically placed elements.</dd>
+  <dt><code>vertical</code></dt>
+  <dd>The separator separates horizontally placed elements.</dd>
+ </dl>
+ </dd>
+</dl>
+
+
+</div> <table style="border: 1px solid rgb(204, 204, 204); margin: 0 0 10px 10px; padding: 0 10px; background: rgb(238, 238, 238);">
+<tbody>
+<tr>
+<td><p><strong>Geerbt von XUL-Element</strong><br> <small>
+<code id="a-align"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code>,
+<code id="a-allowevents"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/allowevents">allowevents</a></code>,
+<code id="a-allownegativeassertions"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/allownegativeassertions">allownegativeassertions</a></code>,
+<code id="a-class"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/class">class</a></code>,
+<code id="a-coalesceduplicatearcs"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/coalesceduplicatearcs">coalesceduplicatearcs</a></code>,
+<code id="a-collapsed"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/collapsed">collapsed</a></code>,
+<code id="a-container"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/container">container</a></code>,
+<code id="a-containment"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/containment">containment</a></code>,
+<code id="a-context"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/context">context</a></code>,
+<code id="a-contextmenu"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/contextmenu">contextmenu</a></code>,
+<code id="a-datasources"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/datasources">datasources</a></code>,
+<code id="a-dir"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code>,
+<code id="a-empty"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/empty">empty</a></code>,
+<code id="a-equalsize"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/equalsize">equalsize</a></code>,
+<code id="a-flags"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/flags">flags</a></code>,
+<code id="a-flex"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code>,
+<code id="a-height"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/height">height</a></code>,
+<code id="a-hidden"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/hidden">hidden</a></code>,
+<code id="a-id"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code>,
+<code id="a-insertafter"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/insertafter">insertafter</a></code>,
+<code id="a-insertbefore"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/insertbefore">insertbefore</a></code>,
+<code id="a-left"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/left">left</a></code>,
+<code id="a-maxheight"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/maxheight">maxheight</a></code>,
+<code id="a-maxwidth"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/maxwidth">maxwidth</a></code>,
+<code id="a-menu"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/menu">menu</a></code>,
+<code id="a-minheight"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/minheight">minheight</a></code>,
+<code id="a-minwidth"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/minwidth">minwidth</a></code>,
+<code id="a-mousethrough"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/mousethrough">mousethrough</a></code>,
+<code id="a-observes"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/observes">observes</a></code>,
+<code id="a-ordinal"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/ordinal">ordinal</a></code>,
+<code id="a-orient"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code>,
+<code id="a-pack"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code>,
+<code id="a-persist"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/persist">persist</a></code>,
+<code id="a-popup"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/popup">popup</a></code>,
+<code id="a-position"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/position">position</a></code>,
+<code id="a-preference-editable"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/preference-editable">preference-editable</a></code>,
+<code id="a-querytype"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/querytype">querytype</a></code>,
+<code id="a-ref"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/ref">ref</a></code>,
+<code id="a-removeelement"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/removeelement">removeelement</a></code>,
+<code id="a-sortDirection"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/sortDirection">sortDirection</a></code>,
+<code id="a-sortResource"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/sortResource">sortResource</a></code>,
+<code id="a-sortResource2"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/sortResource2">sortResource2</a></code>,
+<code id="a-statustext"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/statustext">statustext</a></code>,
+<code id="a-style"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/style">style</a></code>,
+<code id="a-template"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/template">template</a></code>,
+<code id="a-tooltip"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/tooltip">tooltip</a></code>,
+<code id="a-tooltiptext"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/tooltiptext">tooltiptext</a></code>,
+<code id="a-top"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/top">top</a></code>,
+<code id="a-uri"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/uri">uri</a></code>,
+<code id="a-wait-cursor"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/wait-cursor">wait-cursor</a></code>,
+<code id="a-width"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/width">width</a></code> </small></p>
+</td>
+</tr>
+</tbody>
+</table>
+<h3 id="Eigenschaften">Eigenschaften</h3>
+<table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Geerbte Eigenschaften</strong><br> <small> <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/align">align</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/allowEvents">allowEvents</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/boxObject">boxObject</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/builder">builder</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/className">className</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/collapsed">collapsed</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/contextMenu">contextMenu</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/controllers">controllers</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/database">database</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/datasources">datasources</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/dir">dir</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/flex">flex</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/height">height</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/hidden">hidden</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/id">id</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/left">left</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/maxHeight">maxHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/maxWidth">maxWidth</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/menu">menu</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/minHeight">minHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/minWidth">minWidth</a></span></code>, , , , , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/observes">observes</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/ordinal">ordinal</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/orient">orient</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/pack">pack</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/persist">persist</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/ref">ref</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/resource">resource</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/statusText">statusText</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/style">style</a></span></code>, ,, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/tooltip">tooltip</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/tooltipText">tooltipText</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/top">top</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/width">width</a></span></code></small></p> </td> </tr> </tbody>
+</table>
+<h3 id="Methoden">Methoden</h3>
+<table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Geerbte Methoden</strong><br> <small><code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.addEventListener">element.addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.appendChild">node.appendChild()</a></code>, <span id="m-blur"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/click">click</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.cloneNode">node.cloneNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.compareDocumentPosition">node.compareDocumentPosition()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.dispatchEvent">element.dispatchEvent()</a></code>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/focus">focus</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttribute">element.getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNode">element.getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNodeNS">element.getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNS">element.getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getBoundingClientRect">element.getBoundingClientRect()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getClientRects">element.getClientRects()</a></code>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/getElementsByAttribute">getElementsByAttribute</a></code></span>, <span id="m-getElementsByAttributeNS"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/getElementsByAttributeNS">getElementsByAttributeNS</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByClassName">element.getElementsByClassName()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByTagName">element.getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByTagNameNS">element.getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.getFeature">node.getFeature()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.getUserData">node.getUserData()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.hasAttribute">element.hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.hasAttributeNS">element.hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.nodes.hasAttributes">nodes.hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.nodes.hasChildNodes">nodes.hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.insertBefore">node.insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isDefaultNamespace">node.isDefaultNamespace()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isEqualNode">node.isEqualNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isSameNode">node.isSameNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isSupported">node.isSupported()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.lookupNamespaceURI">node.lookupNamespaceURI()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.lookupPrefix">node.lookupPrefix()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.normalize">node.normalize()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.querySelector">element.querySelector()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.querySelectorAll">element.querySelectorAll()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttribute">element.removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttributeNode">element.removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttributeNS">element.removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.removeChild">node.removeChild()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeEventListener">element.removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.replaceChild">node.replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttribute">element.setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNode">element.setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNodeNS">element.setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNS">element.setAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.setUserData">node.setUserData()</a></code></small></p> </td> </tr> </tbody>
+</table>
+<h3 id="Styleklassen">Styleklassen</h3>
+<p>Folgende Klassen können benutzt werden, um den Stil des Elements zu bestimmen. Statt den Stil des Elements direkt zu ändern, sollten diese Klassen zu Hilfe genommen werden, da sie sich natürlicher in das vom Benutzer gewählte Theme der Benutzeroberfläche einfügen.</p>
+<dl>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/XUL/Style/groove">groove</a></code></dt>
+ <dd>A grooved separator.</dd>
+</dl> <dl>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/XUL/Style/groove-thin">groove-thin</a></code></dt>
+ <dd>A thin grooved separator.</dd>
+</dl> <dl>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/XUL/Style/thin">thin</a></code></dt>
+ <dd>A thinner separator, which is usually 0.5 ems.</dd>
+</dl>
+<h3 id="Verwandte_Themen">Verwandte Themen</h3>
+<dl> <dt>Elemente</dt> <dd><code><a href="/de/docs/Mozilla/Tech/XUL/spacer" title="spacer">spacer</a></code>, <code><a href="/de/docs/Mozilla/Tech/XUL/splitter" title="splitter">splitter</a></code>, <code><a href="/de/docs/Mozilla/Tech/XUL/menuseparator" title="menuseparator">menuseparator</a></code>, <code><a href="/de/docs/Mozilla/Tech/XUL/toolbarseparator" title="toolbarseparator">toolbarseparator</a></code>, <code><a href="/de/docs/Mozilla/Tech/XUL/treeseparator" title="treeseparator">treeseparator</a></code>.</dd>
+</dl>
diff --git a/files/de/archive/mozilla/xul/spacer/index.html b/files/de/archive/mozilla/xul/spacer/index.html
new file mode 100644
index 0000000000..f566611098
--- /dev/null
+++ b/files/de/archive/mozilla/xul/spacer/index.html
@@ -0,0 +1,94 @@
+---
+title: spacer
+slug: Archive/Mozilla/XUL/spacer
+tags:
+  - XUL Elemente
+  - XUL Referenz
+translation_of: Archive/Mozilla/XUL/spacer
+---
+<div class="noinclude"><span class="breadcrumbs XULRef_breadcrumbs">
+ « <a href="/de/docs/XUL_Referenz">XUL Referenz Startseite</a>    [
+ <a href="#Beispiele">Beispiele</a> |
+ <a href="#Attribute">Attribute</a> |
+ <a href="#Eigenschaften">Eigenschaften</a> |
+ <a href="#Methoden">Methoden</a> |
+ <a href="#Verwandte_Themen">Verwandte Themen</a> ]
+</span></div>
+<p>Ein Element, das Platz einnimmt, aber nichts anzeigt. Gewöhnlich benutzt, um Freiraum in einem Behälter zu platzieren. Wenn der Platzhalter nicht als flexibel und für ihn keine Größe angegeben ist, nimmt der Platzhalter keinen Raum ein. Ist eine kleine Lücke gewünscht, ist der Einsatz des Elements <code><a href="/de/docs/Mozilla/Tech/XUL/separator" title="separator">separator</a></code> sinnvoller.</p>
+<p>Weitere Informationen im <a href="/de/XUL_Tutorial/Abstandhalter_verwenden" title="de/XUL_Tutorial/Abstandhalter_verwenden">XUL Tutorial</a>.</p>
+<h3 id="Beispiele" name="Beispiele">Beispiele</h3>
+<pre class="eval">&lt;box&gt;
+  &lt;button label="Links"/&gt;
+  &lt;spacer flex="1"/&gt;
+  &lt;button label="Rechts"/&gt;
+&lt;/box&gt;
+</pre>
+<h3 id="Attribute" name="Attribute">Attribute</h3>
+<table style="border: 1px solid rgb(204, 204, 204); margin: 0 0 10px 10px; padding: 0 10px; background: rgb(238, 238, 238);">
+<tbody>
+<tr>
+<td><p><strong>Geerbt von XUL-Element</strong><br> <small>
+<code id="a-align"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code>,
+<code id="a-allowevents"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/allowevents">allowevents</a></code>,
+<code id="a-allownegativeassertions"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/allownegativeassertions">allownegativeassertions</a></code>,
+<code id="a-class"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/class">class</a></code>,
+<code id="a-coalesceduplicatearcs"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/coalesceduplicatearcs">coalesceduplicatearcs</a></code>,
+<code id="a-collapsed"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/collapsed">collapsed</a></code>,
+<code id="a-container"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/container">container</a></code>,
+<code id="a-containment"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/containment">containment</a></code>,
+<code id="a-context"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/context">context</a></code>,
+<code id="a-contextmenu"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/contextmenu">contextmenu</a></code>,
+<code id="a-datasources"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/datasources">datasources</a></code>,
+<code id="a-dir"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code>,
+<code id="a-empty"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/empty">empty</a></code>,
+<code id="a-equalsize"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/equalsize">equalsize</a></code>,
+<code id="a-flags"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/flags">flags</a></code>,
+<code id="a-flex"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code>,
+<code id="a-height"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/height">height</a></code>,
+<code id="a-hidden"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/hidden">hidden</a></code>,
+<code id="a-id"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code>,
+<code id="a-insertafter"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/insertafter">insertafter</a></code>,
+<code id="a-insertbefore"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/insertbefore">insertbefore</a></code>,
+<code id="a-left"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/left">left</a></code>,
+<code id="a-maxheight"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/maxheight">maxheight</a></code>,
+<code id="a-maxwidth"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/maxwidth">maxwidth</a></code>,
+<code id="a-menu"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/menu">menu</a></code>,
+<code id="a-minheight"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/minheight">minheight</a></code>,
+<code id="a-minwidth"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/minwidth">minwidth</a></code>,
+<code id="a-mousethrough"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/mousethrough">mousethrough</a></code>,
+<code id="a-observes"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/observes">observes</a></code>,
+<code id="a-ordinal"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/ordinal">ordinal</a></code>,
+<code id="a-orient"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code>,
+<code id="a-pack"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code>,
+<code id="a-persist"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/persist">persist</a></code>,
+<code id="a-popup"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/popup">popup</a></code>,
+<code id="a-position"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/position">position</a></code>,
+<code id="a-preference-editable"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/preference-editable">preference-editable</a></code>,
+<code id="a-querytype"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/querytype">querytype</a></code>,
+<code id="a-ref"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/ref">ref</a></code>,
+<code id="a-removeelement"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/removeelement">removeelement</a></code>,
+<code id="a-sortDirection"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/sortDirection">sortDirection</a></code>,
+<code id="a-sortResource"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/sortResource">sortResource</a></code>,
+<code id="a-sortResource2"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/sortResource2">sortResource2</a></code>,
+<code id="a-statustext"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/statustext">statustext</a></code>,
+<code id="a-style"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/style">style</a></code>,
+<code id="a-template"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/template">template</a></code>,
+<code id="a-tooltip"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/tooltip">tooltip</a></code>,
+<code id="a-tooltiptext"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/tooltiptext">tooltiptext</a></code>,
+<code id="a-top"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/top">top</a></code>,
+<code id="a-uri"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/uri">uri</a></code>,
+<code id="a-wait-cursor"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/wait-cursor">wait-cursor</a></code>,
+<code id="a-width"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/width">width</a></code> </small></p>
+</td>
+</tr>
+</tbody>
+</table>
+<h3 id="Eigenschaften" name="Eigenschaften">Eigenschaften</h3>
+<table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Geerbte Eigenschaften</strong><br> <small> <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/align">align</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/allowEvents">allowEvents</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/boxObject">boxObject</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/builder">builder</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/className">className</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/collapsed">collapsed</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/contextMenu">contextMenu</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/controllers">controllers</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/database">database</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/datasources">datasources</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/dir">dir</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/flex">flex</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/height">height</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/hidden">hidden</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/id">id</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/left">left</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/maxHeight">maxHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/maxWidth">maxWidth</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/menu">menu</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/minHeight">minHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/minWidth">minWidth</a></span></code>, , , , , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/observes">observes</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/ordinal">ordinal</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/orient">orient</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/pack">pack</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/persist">persist</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/ref">ref</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/resource">resource</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/statusText">statusText</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/style">style</a></span></code>, ,, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/tooltip">tooltip</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/tooltipText">tooltipText</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/top">top</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/width">width</a></span></code></small></p> </td> </tr> </tbody>
+</table>
+<h3 id="Methoden" name="Methoden">Methoden</h3>
+<table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Geerbte Methoden</strong><br> <small><code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.addEventListener">element.addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.appendChild">node.appendChild()</a></code>, <span id="m-blur"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/click">click</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.cloneNode">node.cloneNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.compareDocumentPosition">node.compareDocumentPosition()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.dispatchEvent">element.dispatchEvent()</a></code>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/focus">focus</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttribute">element.getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNode">element.getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNodeNS">element.getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNS">element.getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getBoundingClientRect">element.getBoundingClientRect()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getClientRects">element.getClientRects()</a></code>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/getElementsByAttribute">getElementsByAttribute</a></code></span>, <span id="m-getElementsByAttributeNS"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/getElementsByAttributeNS">getElementsByAttributeNS</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByClassName">element.getElementsByClassName()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByTagName">element.getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByTagNameNS">element.getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.getFeature">node.getFeature()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.getUserData">node.getUserData()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.hasAttribute">element.hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.hasAttributeNS">element.hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.nodes.hasAttributes">nodes.hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.nodes.hasChildNodes">nodes.hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.insertBefore">node.insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isDefaultNamespace">node.isDefaultNamespace()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isEqualNode">node.isEqualNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isSameNode">node.isSameNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isSupported">node.isSupported()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.lookupNamespaceURI">node.lookupNamespaceURI()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.lookupPrefix">node.lookupPrefix()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.normalize">node.normalize()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.querySelector">element.querySelector()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.querySelectorAll">element.querySelectorAll()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttribute">element.removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttributeNode">element.removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttributeNS">element.removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.removeChild">node.removeChild()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeEventListener">element.removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.replaceChild">node.replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttribute">element.setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNode">element.setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNodeNS">element.setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNS">element.setAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.setUserData">node.setUserData()</a></code></small></p> </td> </tr> </tbody>
+</table>
+<h3 id="Verwandte_Themen" name="Verwandte_Themen">Verwandt</h3>
+<dl> <dt>Elemente</dt> <dd><code><a href="/de/docs/Mozilla/Tech/XUL/separator" title="separator">separator</a></code>, <code><a href="/de/docs/Mozilla/Tech/XUL/splitter" title="splitter">splitter</a></code></dd>
+</dl>
diff --git a/files/de/archive/mozilla/xul/splitter/index.html b/files/de/archive/mozilla/xul/splitter/index.html
new file mode 100644
index 0000000000..6c89456da3
--- /dev/null
+++ b/files/de/archive/mozilla/xul/splitter/index.html
@@ -0,0 +1,173 @@
+---
+title: splitter
+slug: Archive/Mozilla/XUL/splitter
+tags:
+  - XUL Elemente
+  - XUL Referenz
+translation_of: Archive/Mozilla/XUL/splitter
+---
+<div class="noinclude"><span class="breadcrumbs XULRef_breadcrumbs">
+ « <a href="/de/docs/XUL_Referenz">XUL Referenz Startseite</a>    [
+ <a href="#Beispiele">Beispiele</a> |
+ <a href="#Attribute">Attribute</a> |
+ <a href="#Eigenschaften">Eigenschaften</a> |
+ <a href="#Methoden">Methoden</a> |
+ <a href="#Verwandte_Themen">Verwandte Themen</a> ]
+</span></div>
+<p>Ein Element, das vor oder nach einem Element innerhalb eines Containers auftauchen sollte. Das Ziehen des Trenners ändert die Größe der Geschwisterelemente des Trenners. Platziert man ein 'Griffchen' (<code><a href="/de/docs/Mozilla/Tech/XUL/grippy" title="grippy">grippy</a></code>) innerhalb eines Trenners, so wird ein Geschwisterelement des Trenners beim Anklicken des 'Griffchens' zugeklappt.</p>
+<p>Weitere Information sind im <a href="/de/XUL_Tutorial/Splitters" title="de/XUL_Tutorial/Splitters">XUL Tutorial</a> verfügbar.</p>
+<dl> <dt>Attribute</dt> <dd><a href="#a-collapse">collapse</a>, <a href="#a-resizeafter">resizeafter</a>, <a href="#a-resizebefore">resizebefore</a>, <a href="#a-state">state</a>, <a href="#a-substate">substate</a></dd>
+</dl>
+<dl> <dt>Styleklassen</dt> <dd><a href="#s-tree-splitter">tree-splitter</a></dd>
+</dl>
+<h3 id="Beispiele">Beispiele</h3>
+<p> <img alt="splitter_arrow.png" class="internal default" src="/@api/deki/files/2917/=splitter_arrow.png" style="width: 313px; height: 28px;"></p>
+<p><code>&lt;splitter tooltiptext="Größe der Suchbox verändern" oncommand="alert('Der Splitter wurde gezogen!')"&gt;<br>
+   &lt;vbox id="Beispiel_vbox" /&gt;<br>
+&lt;/splitter&gt;</code></p>
+<h3 id="Attribute" name="Attribute">Attribute</h3>
+<p> </p><div id="a-collapse">
+
+
+<dl>
+ <dt><code id="a-collapse"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/collapse">collapse</a></code></dt>
+ <dd>Type: <em>one of the values below</em></dd>
+ <dd>Determines which side of the <code><a href="/en-US/docs/Mozilla/Tech/XUL/splitter" title="splitter">splitter</a></code> is collapsed when its grippy is clicked. If this attribute is not specified, the splitter will not cause a collapse. You should put a <code><a href="/en-US/docs/Mozilla/Tech/XUL/grippy" title="grippy">grippy</a></code> element inside the splitter when it is used for collapsing.</dd>
+ <dd>
+ <dl>
+  <dt><code>none</code></dt>
+  <dd>No collapsing occurs.</dd>
+  <dt><code>before</code></dt>
+  <dd>When the grippy is clicked, the element immediately before the splitter in the same parent is collapsed so that its width or height is 0.</dd>
+  <dt><code>after</code></dt>
+  <dd>When the grippy is clicked, the element immediately after the splitter in the same parent is collapsed so that its width or height is 0.</dd>
+  <dt><code>both</code></dt>
+  <dd>Either the element immediately before the splitter, or the element immediately after the splitter can be collapsed, if the size of that element would fall below the minimum size due to the position of the splitter. </dd>
+ </dl>
+ </dd>
+</dl>
+</div> <div id="a-resizeafter">
+
+
+<dl>
+ <dt><code id="a-resizeafter"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/resizeafter">resizeafter</a></code></dt>
+ <dd>Type: <em>one of the values below</em></dd>
+ <dd>This attribute indicates which element to the right or below the <code><a href="/en-US/docs/Mozilla/Tech/XUL/splitter" title="splitter">splitter</a></code> should be resized when the splitter is repositioned.</dd>
+ <dd>
+ <dl>
+  <dt><code>closest</code></dt>
+  <dd>The element immediately to the right or below the splitter resizes.</dd>
+  <dt><code>farthest</code></dt>
+  <dd>The element that is the farthest away from the splitter to the right or below the splitter resizes.</dd>
+  <dt><code>grow</code></dt>
+  <dd>The elements to the right or below the splitter do not change size (unless they are flexible) when the splitter is dragged, but instead the entire container changes size.</dd>
+  <dt><code>flex</code></dt>
+  <dd>The closest flexible element resizes. </dd>
+ </dl>
+ </dd>
+</dl>
+
+
+</div> <div id="a-resizebefore">
+
+
+<dl>
+ <dt><code id="a-resizebefore"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/resizebefore">resizebefore</a></code></dt>
+ <dd>Type: <em>one of the values below</em></dd>
+ <dd>This attribute indicates which element to the left or above the <code><a href="/en-US/docs/Mozilla/Tech/XUL/splitter" title="splitter">splitter</a></code> should be resized when the splitter is repositioned.</dd>
+ <dd>
+ <dl>
+  <dt><code>closest</code></dt>
+  <dd>The element immediately to the left or above the splitter resizes.</dd>
+  <dt><code>farthest</code></dt>
+  <dd>The element that is the farthest away from the splitter to the left or above the splitter resizes.</dd>
+  <dt><code>flex</code></dt>
+  <dd>The closest flexible element resizes. </dd>
+ </dl>
+ </dd>
+</dl>
+</div> <div id="a-state">
+
+
+<dl>
+ <dt><code id="a-state"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/state">state</a></code></dt>
+ <dd>Type: <em>one of the values below</em></dd>
+ <dd>Indicates whether the <code><a href="/en-US/docs/Mozilla/Tech/XUL/splitter" title="splitter">splitter</a></code> has collapsed content or not. This attribute will be updated automatically as the splitter is moved, and is generally used in a stylesheet to apply a different appearance for each state.</dd>
+ <dd>
+ <dl>
+  <dt><code>open</code></dt>
+  <dd>The content either before or after the splitter, depending on the value of the collapsed attribute, is currently displayed.</dd>
+  <dt><code>collapsed</code></dt>
+  <dd>The content either before or after the splitter is collapsed and is not visible.</dd>
+  <dt><code>dragging</code></dt>
+  <dd>The user is current adjusting the position of the splitter, typically by dragging it with the mouse.</dd>
+ </dl>
+ </dd>
+</dl>
+
+
+</div> <div id="a-substate">
+
+
+<dl>
+ <dt><code id="a-substate"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/substate">substate</a></code></dt>
+ <dd>Type: <em>one of the values below</em></dd>
+ <dd>On splitters which have state="collapsed" and collapse="both", determines which direction the splitter is actually collapsed in. Since collapse="both" is a Gecko 1.9+ feature, this will have no effect on earlier versions.</dd>
+ <dd>
+ <dl>
+  <dt><code>before</code></dt>
+  <dd>The element immediately before the splitter is collapsed.</dd>
+  <dt><code>after</code></dt>
+  <dd>The element immediately after the splitter is collapsed.</dd>
+ </dl>
+ </dd>
+</dl>
+</div>
+<h3 id="Eigenschaften">Eigenschaften</h3>
+<table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Geerbte Eigenschaften</strong><br> <small> <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/align">align</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/allowEvents">allowEvents</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/boxObject">boxObject</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/builder">builder</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/className">className</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/collapsed">collapsed</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/contextMenu">contextMenu</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/controllers">controllers</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/database">database</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/datasources">datasources</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/dir">dir</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/flex">flex</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/height">height</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/hidden">hidden</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/id">id</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/left">left</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/maxHeight">maxHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/maxWidth">maxWidth</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/menu">menu</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/minHeight">minHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/minWidth">minWidth</a></span></code>, , , , , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/observes">observes</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/ordinal">ordinal</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/orient">orient</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/pack">pack</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/persist">persist</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/ref">ref</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/resource">resource</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/statusText">statusText</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/style">style</a></span></code>, ,, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/tooltip">tooltip</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/tooltipText">tooltipText</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/top">top</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/width">width</a></span></code></small></p> </td> </tr> </tbody>
+</table>
+<h3 id="Methoden" name="Methoden">Methoden</h3>
+<table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Geerbte Methoden</strong><br> <small><code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.addEventListener">element.addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.appendChild">node.appendChild()</a></code>, <span id="m-blur"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/click">click</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.cloneNode">node.cloneNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.compareDocumentPosition">node.compareDocumentPosition()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.dispatchEvent">element.dispatchEvent()</a></code>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/focus">focus</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttribute">element.getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNode">element.getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNodeNS">element.getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNS">element.getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getBoundingClientRect">element.getBoundingClientRect()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getClientRects">element.getClientRects()</a></code>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/getElementsByAttribute">getElementsByAttribute</a></code></span>, <span id="m-getElementsByAttributeNS"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/getElementsByAttributeNS">getElementsByAttributeNS</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByClassName">element.getElementsByClassName()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByTagName">element.getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByTagNameNS">element.getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.getFeature">node.getFeature()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.getUserData">node.getUserData()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.hasAttribute">element.hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.hasAttributeNS">element.hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.nodes.hasAttributes">nodes.hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.nodes.hasChildNodes">nodes.hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.insertBefore">node.insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isDefaultNamespace">node.isDefaultNamespace()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isEqualNode">node.isEqualNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isSameNode">node.isSameNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isSupported">node.isSupported()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.lookupNamespaceURI">node.lookupNamespaceURI()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.lookupPrefix">node.lookupPrefix()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.normalize">node.normalize()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.querySelector">element.querySelector()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.querySelectorAll">element.querySelectorAll()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttribute">element.removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttributeNode">element.removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttributeNS">element.removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.removeChild">node.removeChild()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeEventListener">element.removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.replaceChild">node.replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttribute">element.setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNode">element.setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNodeNS">element.setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNS">element.setAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.setUserData">node.setUserData()</a></code></small></p> </td> </tr> </tbody>
+</table>
+<h3 id="Styleklassen">Styleklassen</h3>
+<p>Folgende Klassen können benutzt werden, um den Stil des Elements zu bestimmen. Statt den Stil des Elements direkt zu ändern, sollten diese Klassen zu Hilfe genommen werden, da sie sich natürlicher in das vom Benutzer gewählte Theme der Benutzeroberfläche einfügen.</p>
+<dl>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/XUL/Style/tree-splitter">tree-splitter</a></code></dt>
+ <dd>This splitter is intended to be used in tree columns (in-between <code><a href="/en-US/docs/Mozilla/Tech/XUL/treecol" title="treecol">treecol</a></code> elements). The splitter will be drawn with no width so that it isn't visible, however, the columns may still be resized.</dd>
+</dl>
+<pre>	&lt;tree id="tree1" flex="1" height="300" enableColumnDrag="true"&gt;
+	  &lt;treecols&gt;
+    	    &lt;treecol id="name" label="Name" flex="1"/&gt;
+	    &lt;splitter class="tree-splitter"/&gt;
+    	    &lt;treecol id="id" label="ID" flex="1"/&gt;
+	    &lt;splitter class="tree-splitter"/&gt;
+    	    &lt;treecol id="date" label="Date" flex="1"/&gt;
+	    &lt;splitter class="tree-splitter"/&gt;
+	  &lt;/treecols&gt;
+	  &lt;treechildren/&gt;
+	&lt;/tree&gt;
+</pre>
+<h3 id="Related" name="Related">Splitter resizing und overflow</h3>
+<p>Das Maß, welches die Größe der Box verändert und was während der Größenveränderung passiert nachdem das Limit erreicht wurde, hängt von der festgelegten Höhe (oder Breite) der Box, welche über ein Attribut, über eine CSS Anweisung (min-height [oder min-width]) oder die wirkliche Höhe der Boxinhalte bestimmt werden kann, und von der An- oder Abwesenheit des eines <code>collapse</code> Attributs des Splitters ab.</p>
+<p>Bei:</p>
+<pre>&lt;vbox&gt;&lt;/vbox&gt;
+&lt;splitter/&gt;
+&lt;vbox&gt;&lt;/vbox&gt;</pre>
+<p>...wird sich der Splitter nicht bewegen, da kein <code>collapse</code> Attribute für den Splitter festgeleget wurde, was dazu führt das der Splitter zusammenfällt, sobald er gezogen wird.</p>
+<p>Bei:</p>
+<pre>&lt;vbox&gt;&lt;/vbox&gt;
+&lt;splitter/&gt;
+&lt;vbox height="500"&gt;&lt;vbox height="100"/&gt;&lt;/vbox&gt;</pre>
+<p>...kann der Splitter bis auf eine Höhe von 100px der unteren Box gezogen werden, wo er nicht weiter gezogen werden kann (oder zusammenfällt, wenn der Splitter über ein <code>collapse</code> Attribut verfügt).</p>
+<p>Bei:</p>
+<pre>&lt;vbox&gt;&lt;/vbox&gt;
+&lt;splitter/&gt;
+&lt;vbox height="500" minheight="200"&gt;&lt;vbox height="100"/&gt;&lt;/vbox&gt;</pre>
+<p>...kann der Splitter bis auf eine Mindesthöhe von 200px gezogen werden, wo er stoppen wird oder zusammenfällt.</p>
+<p>Bei:</p>
+<pre>&lt;vbox&gt;&lt;/vbox&gt;
+&lt;splitter&gt;
+&lt;vbox height="500" style="min-height: 50"&gt;&lt;vbox height="100"/&gt;&lt;/vbox&gt;</pre>
+<p>...kann der Splitter bis unter einer Höhe von 100px der unteren Box gezogen werden, wodurch das Kindelement überläuft, wenn die Mindesthöhe erreicht wird. Dort stoppt oder fällt der Splitter zusammen. Das sollte auch mit einem <code>minheight</code> Attribut, das kleiner als die wirkliche Höhe ist, möglich sein. (Jedoch funktioniert der Überlauf tatsächlich wegen <a class=" external" href="http://bugzilla.mozilla.org/show_bug.cgi?id=513597" title="http://bugzilla.mozilla.org/show_bug.cgi?id=513597">Bug 513597</a>  nur beim Festlegen von<code> minheight</code> und <code>minwidth</code> Attributen oder bei einer Angabe von <code>min-height</code> oder <code>min-width</code> über CSS).</p>
+<h3 id="Verwandte_Themen">Verwandte Themen</h3>
+<p>TBD</p>
diff --git a/files/de/archive/mozilla/xul/style/index.html b/files/de/archive/mozilla/xul/style/index.html
new file mode 100644
index 0000000000..74732b6e00
--- /dev/null
+++ b/files/de/archive/mozilla/xul/style/index.html
@@ -0,0 +1,11 @@
+---
+title: Style Klassen
+slug: Archive/Mozilla/XUL/Style
+tags:
+  - XUL Referenz
+  - XUL Style
+translation_of: Archive/Mozilla/XUL/Style
+---
+<p><a href="/de/docs/XUL_Referenz" title="« Startseite XUL Referenz">« Startseite XUL Referenz</a></p>
+<ul> <li><code><a href="https://developer.mozilla.org/de/docs/XUL/Style/alert-icon">alert-icon</a></code></li> <li><a href="/de/XUL/Style/chromeclass-toolbar" title="de/XUL/Style/chromeclass-toolbar">chromeclass-toolbar</a></li> <li><a href="/de/XUL/Style/error-icon" title="de/XUL/Style/error-icon">error-icon</a></li> <li><a href="/de/XUL/Style/groove" title="de/XUL/Style/groove">groove</a></li> <li><a href="/de/XUL/Style/header" title="de/XUL/Style/header">header</a></li> <li><a href="/de/XUL/Style/indent" title="de/XUL/Style/indent">indent</a></li> <li><a href="/de/XUL/Style/listcell-iconic" title="de/XUL/Style/listcell-iconic">listcell-iconic</a></li> <li><a href="/de/XUL/Style/listitem-iconic" title="de/XUL/Style/listitem-iconic">listitem-iconic</a></li> <li><a href="/de/XUL/Style/menuitem-iconic" title="de/XUL/Style/menuitem-iconic">menuitem-iconic</a></li> <li><a href="/de/XUL/Style/menuitem-non-iconic" title="de/XUL/Style/menuitem-non-iconic">menuitem-non-iconic</a></li> <li><a href="/de/XUL/Style/message-icon" title="de/XUL/Style/message-icon">message-icon</a></li> <li><a href="/de/XUL/Style/monospace" title="de/XUL/Style/monospace">monospace</a></li> <li><a href="/de/XUL/Style/plain" title="de/XUL/Style/plain">plain</a></li> <li><a href="/de/XUL/Style/question-icon" title="de/XUL/Style/question-icon">question-icon</a></li> <li><a href="/de/XUL/Style/small-margin" title="de/XUL/Style/small-margin">small-margin</a></li> <li><a href="/de/XUL/Style/statusbarpanel-iconic" title="de/XUL/Style/statusbarpanel-iconic">statusbarpanel-iconic</a></li> <li><a href="/de/XUL/Style/statusbarpanel-iconic-text" title="de/XUL/Style/statusbarpanel-iconic-text">statusbarpanel-iconic-text</a></li> <li><a href="/de/XUL/Style/statusbarpanel-menu-iconic" title="de/XUL/Style/statusbarpanel-menu-iconic">statusbarpanel-menu-iconic</a></li> <li><a href="/de/XUL/Style/text-link" title="de/XUL/Style/text-link">text-link</a></li> <li><a href="/de/XUL/Style/thin" title="de/XUL/Style/thin">thin</a></li> <li><a href="/de/XUL/Style/tree-splitter" title="de/XUL/Style/tree-splitter">tree-splitter</a></li> <li><a href="/de/XUL/Style/treecol-image" title="de/XUL/Style/treecol-image">treecol-image</a></li>
+</ul>
diff --git a/files/de/archive/mozilla/xul/style/treecol-image/index.html b/files/de/archive/mozilla/xul/style/treecol-image/index.html
new file mode 100644
index 0000000000..d7be7f7df7
--- /dev/null
+++ b/files/de/archive/mozilla/xul/style/treecol-image/index.html
@@ -0,0 +1,13 @@
+---
+title: treecol-image
+slug: Archive/Mozilla/XUL/Style/treecol-image
+tags:
+  - XUL Referenz
+  - XUL Style
+translation_of: Archive/Mozilla/XUL/Style/treecol-image
+---
+<div class="noinclude"><a href="/de/docs/XUL_Referenz" title="« Startseite XUL Referenz">« Startseite XUL Referenz</a></div>
+<dl> <dt><code><a href="https://developer.mozilla.org/de/docs/XUL/Style/treecol-image">treecol-image</a></code></dt> <dd>Um ein Bild als Kopf der <a href="/de/XUL/treecol" title="de/XUL/treecol">Baumspalte</a> anzuzeigen, wird diese Klasse benutzt. Das Bild selbst wird über das Attribut <code id="a-src"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/src">src</a></code> angegeben.</dd>
+</dl>
+<div class="noinclude">
+</div>
diff --git a/files/de/archive/mozilla/xul/tab/index.html b/files/de/archive/mozilla/xul/tab/index.html
new file mode 100644
index 0000000000..6c0f5831d0
--- /dev/null
+++ b/files/de/archive/mozilla/xul/tab/index.html
@@ -0,0 +1,195 @@
+---
+title: tab
+slug: Archive/Mozilla/XUL/tab
+tags:
+  - XUL Elemente
+  - XUL Referenz
+translation_of: Archive/Mozilla/XUL/tab
+---
+<div class="noinclude"><span class="breadcrumbs XULRef_breadcrumbs">
+ « <a href="/de/docs/XUL_Referenz">XUL Referenz Startseite</a>    [
+ <a href="#Beispiele">Beispiele</a> |
+ <a href="#Attribute">Attribute</a> |
+ <a href="#Eigenschaften">Eigenschaften</a> |
+ <a href="#Methoden">Methoden</a> |
+ <a href="#Verwandte_Themen">Verwandte Themen</a> ]
+</span></div>
+<p>Steht für einen einzelnen Reiter innerhalb eines <code><a href="/de/docs/Mozilla/Tech/XUL/tabs" title="tabs">tabs</a></code>-Elements. Der Benutzer kann den Reiter klicken, um die Seite in den Vordergrund zu holen, die zu der <code><a href="/de/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code> gehört.</p>
+<p>Weitere Informationen im <a href="/de/XUL_Tutorial/Karteikarten" title="de/XUL_Tutorial/Karteikarten">XUL Tutorial</a>.</p>
+<dl> <dt>Attribute</dt> <dd><a href="#a-accesskey">accesskey</a>, <a href="#a-afterselected">afterselected</a>, <a href="#a-beforeselected">beforeselected</a>, <a href="#a-command">command</a>, <a href="#a-crop">crop</a>, <a href="#a-disabled">disabled</a>, <a href="#a-first-tab">first-tab</a>, <a href="#a-image">image</a>, <a href="#a-label">label</a>, <a href="#a-last-tab">last-tab</a>, <a href="#a-linkedpanel">linkedpanel</a>, <a href="#a-oncommand">oncommand</a>, <a href="#a-pinned">pinned</a>, <a href="#a-tab.selected">selected</a>, <a href="#a-tabindex">tabindex</a>, <a href="#a-validate">validate</a>, <a href="#a-value">value</a></dd>
+</dl>
+<dl> <dt>Eigenschaften</dt> <dd><a href="#p-accessKey">accessKey</a>, <a href="#p-accessibleType">accessibleType</a>, <a href="#p-command">command</a>, <a href="#p-tab.control">control</a>, <a href="#p-crop">crop</a>, <a href="#p-disabled">disabled</a>, <a href="#p-image">image</a>, <a href="#p-label">label</a>, <a href="#p-linkedPanel">linkedPanel</a>, <a href="#p-selected">selected</a>, <a href="#p-tabIndex">tabIndex</a>, <a href="#p-value">value</a></dd>
+</dl>
+<h3 id="Beispiele" name="Beispiele">Beispiele</h3>
+<p>(Beispiel benötigt)</p>
+<h3 id="Attribute" name="Attribute">Attribute</h3>
+<p> </p><div id="a-accesskey">
+
+<dl> <dt><code id="a-accesskey"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code></dt>   <dd>Typ: <em>character</em></dd> <dd>Dem Attribut wird der Buchstabe zugewiesen, der als Tastenkürzel für das Element dienen soll. Dieser Buchstabe sollte sinnvollerweise innerhalb des Textes des Attributs <code><code id="a-label"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> des Elements vorkommen.   </dd>
+</dl>
+
+</div> <div id="a-afterselected">
+
+
+<dl>
+ <dt><code id="a-afterselected"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/afterselected">afterselected</a></code></dt>
+ <dd>Type: <em>boolean</em></dd>
+ <dd>This is set to <code>true</code> if the tab is immediately after the currently selected tab. This is automatically set when needed and you shouldn't adjust it manually. This is primarily useful for themes so that they can adjust the appearance of the area around the selected tab.</dd>
+</dl>
+</div> <div id="a-beforeselected">
+
+
+<dl>
+ <dt><code id="a-beforeselected"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/beforeselected">beforeselected</a></code></dt>
+ <dd>Type: <em>boolean</em></dd>
+ <dd>This is set to <code>true</code> if the tab is immediately before the currently selected tab. This is set automatically set when needed and you shouldn't adjust it manually. This is primarily useful for themes so that they can adjust the appearance of the area around the selected tab.</dd>
+</dl>
+</div> <div id="a-crop">
+
+<dl>
+  <dt>
+    <code id="a-crop"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/crop">crop</a></code></dt>
+  <dd>
+    Type: <em>one of the values below</em></dd>
+  <dd>
+    If the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the <code>crop</code> attribute. An ellipsis will be used in place of the cropped text. If the box direction is reversed, the cropping is reversed.</dd>
+  <dd>
+    <dl>
+      <dt>
+        <code>start</code></dt>
+      <dd>
+        The text will be cropped on its left side in left-to-right text locales, and the right side in right-to-left locales.</dd>
+      <dt>
+        <code>end</code></dt>
+      <dd>
+        The text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales.</dd>
+      <dt>
+        <code>left</code></dt>
+      <dd>
+        <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> The text will be cropped on its left side.</dd>
+      <dt>
+        <code>right</code></dt>
+      <dd>
+        <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> The text will be cropped on its right side.</dd>
+      <dt>
+        <code>center</code></dt>
+      <dd>
+        The text will be cropped in the middle, showing both the start and end of the text normally.</dd>
+      <dt>
+        <code>none</code></dt>
+      <dd>
+        The text will be not be cropped using an ellipsis. However, the text will simply be cut off if it is too large. The side depends on the CSS text alignment.</dd>
+    </dl>
+  </dd>
+  <dd>
+    Depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. If you wish to use the value <code>none</code> and the displayed text is larger than this maximum width, you may be able to use the max-width CSS property (or the maxwidth attribute) to override this size. For example, for a menuitem in a menu you can add the following CSS rule when you want to use the value <code>none</code>:</dd>
+  <dd>
+    <pre class="eval">menupopup &gt; menuitem, menupopup &gt; menu { max-width: none; }
+</pre>
+  </dd>
+</dl>
+</div> <div id="a-disabled">
+
+<dl> <dt><code id="a-disabled"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code></dt> <dd>Typ: <em>boolean</em></dd> <dd>Kennzeichnet, ob ein Element deaktiviert ist oder nicht. Wenn das Element auf  <code>true</code> gesetzt ist, ist das Element deaktiviert. Deaktivierte Elemente sind gewöhnlich mit einem grauen Text dargestellt. Wenn ein Element deaktiviert ist, wird es auf Anwenderaktionen nicht reagieren, es kann den Fokus nicht erlangen und das <code>command</code> Ereignis wird nicht ausgelöst. Das Element wird allerdings noch auf Mausereignisse antworten. Um das Element zu aktivieren, ist es besser das Attribut zu entfernen als es auf den Wert <code>false</code> zu setzen. Um den Wert dieses Attributs mittels JavaScript zu setzen oder abzurufen, sollte besser die <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/disabled">disabled</a></span></code> Eigenschaft verwendet werden.</dd>
+</dl>
+
+
+</div> <div id="a-first-tab">
+
+
+<dl>
+ <dt><code id="a-first-tab"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/first-tab">first-tab</a></code></dt>
+ <dd>Type: <em>boolean</em></dd>
+ <dd>This attribute will be set to <code>true</code> for the first tab. This attribute should not be set manually, but is useful in a <a href="/en/Themes" title="en/Themes">theme</a> if the first tab should be styled differently.</dd>
+</dl>
+</div> <div id="a-image">
+
+<dl>
+  <dt><code id="a-image"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/image">image</a></code></dt>
+  <dd>Type: <em>URI</em></dd>
+  <dd>The URI of the image to appear on the element. If this attribute is empty or left out, no image appears. The position of the image is determined by the <code id="a-dir"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code> and <code id="a-orient"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code> attributes.</dd>
+</dl>
+
+
+
+</div> <div id="a-label">
+
+<dl> <dt><code id="a-label"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></dt> <dd>Typ: <em>string</em></dd> <dd>Die Beschriftung für das Element. Wird das Attribut nicht angegeben, so erscheint auch kein Beschriftungstext.</dd>
+</dl>
+
+</div> <div id="a-last-tab">
+
+
+<dl>
+ <dt><code id="a-last-tab"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/last-tab">last-tab</a></code></dt>
+ <dd>Type: <em>boolean</em></dd>
+ <dd>This attribute will be set to <code>true</code> for the last tab. This attribute should not be set manually, but is useful in a <a href="/en/Themes" title="en/Themes">theme</a> if the last tab should be styled differently.</dd>
+</dl>
+</div> <div id="a-linkedpanel">
+
+
+<dl>
+ <dt><code id="a-linkedpanel"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/linkedpanel">linkedpanel</a></code></dt>
+ <dd>Type: <em>id</em></dd>
+ <dd>The <code id="a-id"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code> of the linked <code><a href="/en-US/docs/Mozilla/Tech/XUL/tabpanel" title="tabpanel">tabpanel</a></code> element that will be displayed when the tab is selected. If this attribute is not used, the tab will be connected to the panel at the corresponding index in the <code><a href="/en-US/docs/Mozilla/Tech/XUL/tabpanels" title="tabpanels">tabpanels</a></code> element that the <code><a href="/en-US/docs/Mozilla/Tech/XUL/tab" title="tab">tab</a></code> is in its <code><a href="/en-US/docs/Mozilla/Tech/XUL/tabs" title="tabs">tabs</a></code> container. However, if this attribute is used, this behavior is overridden, and the tab will always be linked to a specific panel. This might be used to avoid duplication by linking several tabs to one panel with slight differences to the content adjusted in the select event.</dd>
+</dl>
+</div> <div id="a-oncommand">
+
+
+<dl>
+ <dt><code id="a-oncommand"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/oncommand">oncommand</a></code></dt>
+ <dd>Type: <em>script code</em></dd>
+ <dd>This event handler is called when the command is activated. This occurs when a user selects a menu item or presses a keyboard shortcut attached to the command.</dd>
+</dl>
+
+
+</div> <div id="a-pinned">
+
+<dl> <dt><code id="a-pinned"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/pinned">pinned</a></code> </dt> <dd>Type: <em>boolean</em></dd> <dd>This attribute is set to <code>true</code> if the tab has been pinned (that is, if it's an app tab). The <code><a href="/en-US/docs/Mozilla/Tech/XUL/tabbrowser" title="tabbrowser">tabbrowser</a></code> element's <span id="m-pinTab"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/pinTab">pinTab</a></code></span> and <span id="m-unpinTab"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/unpinTab">unpinTab</a></code></span> methods handle pinning and unpinning tabs.</dd>
+</dl>
+</div> <div id="a-tab.selected">
+
+
+<dl>
+ <dt><code id="a-tab.selected"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/tab.selected">selected</a></code></dt>
+ <dd>Type: <em>boolean</em></dd>
+ <dd>This attribute is set to <code>true</code> if the tab is selected by default.</dd>
+</dl>
+
+
+</div> <div id="a-tabindex">
+
+
+<dl>
+ <dt><code id="a-tabindex"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/tabindex">tabindex</a></code></dt>
+ <dd>Type: <em>integer</em></dd>
+ <dd>The tab order of the element. The tab order is the order in which the focus is moved when the user presses the "<code>tab</code>" key. Elements with a higher <code>tabindex</code> are later in the tab sequence.</dd>
+</dl>
+</div> <div id="a-validate">
+
+
+<dl>
+ <dt><code id="a-validate"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/validate">validate</a></code></dt>
+ <dd>Type: <em>one of the values below</em></dd>
+ <dd>This attribute indicates whether to load the image from the cache or not. This would be useful if the images are stored remotely or you plan on swapping the image frequently. The following values are accepted, or leave out the attribute entirely for default handling:</dd>
+ <dd>
+ <dl>
+  <dt><code>always</code></dt>
+  <dd>The image is always checked to see whether it should be reloaded.</dd>
+  <dt><code>never</code></dt>
+  <dd>The image will be loaded from the cache if possible.</dd>
+ </dl>
+ </dd>
+</dl>
+</div>
+<h3 id="Eigenschaften" name="Eigenschaften">Eigenschaften</h3>
+<p> </p><div id="p-accessKey"></div> <div id="p-accessibleType"></div> <div id="p-command"></div> <div id="p-tab.control"></div> <div id="p-crop"></div> <div id="p-disabled"></div> <div id="p-image"></div> <div id="p-label"></div> <div id="p-linkedPanel"></div> <div id="p-selected"></div> <div id="p-tabIndex"></div> <div id="p-value"></div>
+<h3 id="Methoden" name="Methoden">Methoden</h3>
+<table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Geerbte Methoden</strong><br> <small><code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.addEventListener">element.addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.appendChild">node.appendChild()</a></code>, <span id="m-blur"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/click">click</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.cloneNode">node.cloneNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.compareDocumentPosition">node.compareDocumentPosition()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.dispatchEvent">element.dispatchEvent()</a></code>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/focus">focus</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttribute">element.getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNode">element.getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNodeNS">element.getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNS">element.getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getBoundingClientRect">element.getBoundingClientRect()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getClientRects">element.getClientRects()</a></code>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/getElementsByAttribute">getElementsByAttribute</a></code></span>, <span id="m-getElementsByAttributeNS"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/getElementsByAttributeNS">getElementsByAttributeNS</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByClassName">element.getElementsByClassName()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByTagName">element.getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByTagNameNS">element.getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.getFeature">node.getFeature()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.getUserData">node.getUserData()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.hasAttribute">element.hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.hasAttributeNS">element.hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.nodes.hasAttributes">nodes.hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.nodes.hasChildNodes">nodes.hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.insertBefore">node.insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isDefaultNamespace">node.isDefaultNamespace()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isEqualNode">node.isEqualNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isSameNode">node.isSameNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isSupported">node.isSupported()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.lookupNamespaceURI">node.lookupNamespaceURI()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.lookupPrefix">node.lookupPrefix()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.normalize">node.normalize()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.querySelector">element.querySelector()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.querySelectorAll">element.querySelectorAll()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttribute">element.removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttributeNode">element.removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttributeNS">element.removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.removeChild">node.removeChild()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeEventListener">element.removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.replaceChild">node.replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttribute">element.setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNode">element.setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNodeNS">element.setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNS">element.setAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.setUserData">node.setUserData()</a></code></small></p> </td> </tr> </tbody>
+</table>
+<h4 id="Probleme" name="Probleme">Probleme</h4>
+<p>In Versionen vor Gecko 1.9 (Firefox 3.0) ist es nicht möglich, einen Reiter außer Kraft zu setzen. Der Reiter wird zwar "grau" dargestellt, akzeptiert jedoch Ereignisse. Dieses Verhalten wurde in Firefox 3 behoben.</p>
+<p>Des weiteren führt ein Wiederanzeigen eines Reiters nach dem Verstecken zu einer unvorhersehbaren Anordnung der Reiter. Siehe <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=307088" title="tab not responding if append to parent with hidden attribute">Bug 307088</a> und <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=261826" title="FIXED: XUL tabs appear in wrong order, if a tab's HIDDEN attribute is set to TRUE then later revealed by either setting HIDDEN to FALSE or removing the HIDDEN attribute entirely.">Bug 261826</a>. (Es empfiehlt sich <a href="/de/XUL/Attribute/collapsed" title="de/XUL/Attribute/collapsed">collapsed</a> statt <a href="/de/XUL/Attribute/hidden" title="de/XUL/Attribute/hidden">hidden</a> zu verwenden)</p>
+<h3 id="Verwandte_Themen" name="Verwandte_Themen">Verwandte Themen</h3>
+<dl> <dt>Elemente</dt> <dd><code><a href="/de/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code>, <code><a href="/de/docs/Mozilla/Tech/XUL/tabs" title="tabs">tabs</a></code>, <code><a href="/de/docs/Mozilla/Tech/XUL/tabpanels" title="tabpanels">tabpanels</a></code>, <code><a href="/de/docs/Mozilla/Tech/XUL/tabpanel" title="tabpanel">tabpanel</a></code>.</dd> <dt>Schnittstellen</dt> <dd><a href="/de/NsIAccessibleProvider" title="de/NsIAccessibleProvider">nsIAccessibleProvider</a>, <a href="/de/NsIDOMXULSelectControlItemElement" title="de/NsIDOMXULSelectControlItemElement">nsIDOMXULSelectControlItemElement</a></dd>
+</dl>
diff --git a/files/de/archive/mozilla/xul/tabbox/index.html b/files/de/archive/mozilla/xul/tabbox/index.html
new file mode 100644
index 0000000000..29c5cf9dab
--- /dev/null
+++ b/files/de/archive/mozilla/xul/tabbox/index.html
@@ -0,0 +1,77 @@
+---
+title: tabbox
+slug: Archive/Mozilla/XUL/tabbox
+tags:
+  - XUL Elemente
+  - XUL Referenz
+translation_of: Archive/Mozilla/XUL/tabbox
+---
+<div class="noinclude"><span class="breadcrumbs XULRef_breadcrumbs">
+ « <a href="/de/docs/XUL_Referenz">XUL Referenz Startseite</a>    [
+ <a href="#Beispiele">Beispiele</a> |
+ <a href="#Attribute">Attribute</a> |
+ <a href="#Eigenschaften">Eigenschaften</a> |
+ <a href="#Methoden">Methoden</a> |
+ <a href="#Verwandte_Themen">Verwandte Themen</a> ]
+</span></div>
+<p>Ein Behälter für die Anzeige von Seiten mit Karteikarten/-reitern. Das Element <code>tabbox</code> sollte zwei Kindelemente enthalten. Als erstes ein <code><a href="/de/docs/Mozilla/Tech/XUL/tabs" title="tabs">tabs</a></code> Element, welches je Reiter ein <code><a href="/de/docs/Mozilla/Tech/XUL/tab" title="tab">tab</a></code> Element enthält und als zweites ein <code><a href="/de/docs/Mozilla/Tech/XUL/tabpanels" title="tabpanels">tabpanels</a></code> Element, welches den Inhalt der Seiten aufnimmt.</p>
+<p>Weitere Informationen im <a href="/de/XUL_Tutorial/Karteikarten">XUL Tutorial</a>.</p>
+<dl> <dt>Attribute</dt> <dd><a href="#a-eventnode">eventnode</a>, <a href="#a-handleCtrlPageUpDown">handleCtrlPageUpDown</a>, <a href="#a-handleCtrlTab">handleCtrlTab</a></dd>
+</dl>
+<dl> <dt>Eigenschaften</dt> <dd><a href="#p-accessibleType">accessibleType</a>, <a href="#p-eventNode">eventNode</a>, <a href="#p-handleCtrlPageUpDown">handleCtrlPageUpDown</a>, <a href="#p-handleCtrlTab">handleCtrlTab</a>, <a href="#p-selectedIndex">selectedIndex</a>, <a href="#p-selectedPanel">selectedPanel</a>, <a href="#p-selectedTab">selectedTab</a>, <a href="#p-tabbox.tabs">tabs</a>, <a href="#p-tabpanels">tabpanels</a></dd>
+</dl>
+<h3 id="Beispiele" name="Beispiele">Beispiele</h3>
+<pre>&lt;tabbox id="myTabList" selectedIndex="2"&gt;
+  &lt;tabs&gt;
+    &lt;tab label="Erster Reiter"/&gt;
+    &lt;tab label="Zweiter Reiter"/&gt;
+    &lt;tab label="Weiterer Reiter"/&gt;
+    &lt;tab label="Letzter Reiter"/&gt;
+  &lt;/tabs&gt;
+  &lt;tabpanels&gt;
+    &lt;tabpanel&gt;&lt;!-- tabpanel Erste Elemente hierher --&gt;&lt;/tabpanel&gt;
+    &lt;tabpanel&gt;&lt;!-- tabpanel Zweite Elemente hierher --&gt;&lt;/tabpanel&gt;
+    &lt;tabpanel&gt;&lt;button label="Klick mich"/&gt;&lt;/tabpanel&gt;
+    &lt;tabpanel&gt;&lt;!-- tabpanel Vierte Elemente hierher --&gt;&lt;/tabpanel&gt;
+  &lt;/tabpanels&gt;
+&lt;/tabbox&gt;
+</pre>
+<p><img alt="Image:XUL_REF_tabboxes.gif" class="internal" src="/@api/deki/files/434/=XUL_REF_tabboxes.gif"></p>
+<h3 id="Attribute" name="Attribute">Attribute</h3>
+<p> </p><div id="a-eventnode">
+
+
+<dl>
+ <dt><code id="a-eventnode"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/eventnode">eventnode</a></code></dt>
+ <dd>Type: <em>one of the values below</em></dd>
+ <dd>Indicates where keyboard navigation events are listened to. If this attribute is not specified, events are listened to from the <code><a href="/en-US/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code>. Thus, if this attribute is not used, the <code><a href="/en-US/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code> or an element inside it must have the focus for the keyboard navigation to apply.</dd>
+ <dd>
+ <dl>
+  <dt><code>parent</code></dt>
+  <dd>Keyboard navigation is captured at the parent of the <code><a href="/en-US/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code>.</dd>
+  <dt><code>window</code></dt>
+  <dd>Keyboard navigation is captured at the window level. Tab navigation will occur as long as any element in the window is focused.</dd>
+  <dt><code>document</code></dt>
+  <dd>Keyboard navigation is captured at the document level. Tab navigation will occur as long as any element in the document is focused.</dd>
+ </dl>
+ </dd>
+</dl>
+</div> <div id="a-handleCtrlPageUpDown">
+
+</div> <div id="a-handleCtrlTab">
+
+
+<dl>
+ <dt><code id="a-handleCtrlTab"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/handleCtrlTab">handleCtrlTab</a></code></dt>
+ <dd>Type: <em>boolean</em></dd>
+ <dd>If set to <code>true</code> or omitted, the <code><a href="/en-US/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code> will switch to the next tab when the Control and Tab keys are pressed. If the Shift key is also held down, the previous tab will be displayed. If this attribute is set to <code>false</code>, these keys do not navigate between tabs.</dd>
+</dl>
+</div>
+<h3 id="Eigenschaften" name="Eigenschaften">Eigenschaften</h3>
+<p> </p><div id="p-accessibleType"></div> <div id="p-eventNode"></div> <div id="p-handleCtrlPageUpDown"></div> <div id="p-handleCtrlTab"></div> <div id="p-selectedIndex"></div> <div id="p-selectedPanel"></div> <div id="p-selectedTab"></div> <div id="p-tabbox.tabs"></div> <div id="p-tabpanels"></div>
+<h3 id="Methoden" name="Methoden">Methoden</h3>
+<table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Geerbte Methoden</strong><br> <small><code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.addEventListener">element.addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.appendChild">node.appendChild()</a></code>, <span id="m-blur"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/click">click</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.cloneNode">node.cloneNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.compareDocumentPosition">node.compareDocumentPosition()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.dispatchEvent">element.dispatchEvent()</a></code>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/focus">focus</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttribute">element.getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNode">element.getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNodeNS">element.getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNS">element.getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getBoundingClientRect">element.getBoundingClientRect()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getClientRects">element.getClientRects()</a></code>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/getElementsByAttribute">getElementsByAttribute</a></code></span>, <span id="m-getElementsByAttributeNS"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/getElementsByAttributeNS">getElementsByAttributeNS</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByClassName">element.getElementsByClassName()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByTagName">element.getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByTagNameNS">element.getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.getFeature">node.getFeature()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.getUserData">node.getUserData()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.hasAttribute">element.hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.hasAttributeNS">element.hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.nodes.hasAttributes">nodes.hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.nodes.hasChildNodes">nodes.hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.insertBefore">node.insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isDefaultNamespace">node.isDefaultNamespace()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isEqualNode">node.isEqualNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isSameNode">node.isSameNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isSupported">node.isSupported()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.lookupNamespaceURI">node.lookupNamespaceURI()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.lookupPrefix">node.lookupPrefix()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.normalize">node.normalize()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.querySelector">element.querySelector()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.querySelectorAll">element.querySelectorAll()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttribute">element.removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttributeNode">element.removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttributeNS">element.removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.removeChild">node.removeChild()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeEventListener">element.removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.replaceChild">node.replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttribute">element.setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNode">element.setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNodeNS">element.setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNS">element.setAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.setUserData">node.setUserData()</a></code></small></p> </td> </tr> </tbody>
+</table>
+<h3 id="Verwandt">Verwandt</h3>
+<dl> <dt>Elemente</dt> <dd><code><a href="/de/docs/Mozilla/Tech/XUL/tabs" title="tabs">tabs</a></code>, <code><a href="/de/docs/Mozilla/Tech/XUL/tab" title="tab">tab</a></code>, <code><a href="/de/docs/Mozilla/Tech/XUL/tabpanels" title="tabpanels">tabpanels</a></code>, <code><a href="/de/docs/Mozilla/Tech/XUL/tabpanel" title="tabpanel">tabpanel</a></code>.</dd>
+</dl>
diff --git a/files/de/archive/mozilla/xul/tabpanels/index.html b/files/de/archive/mozilla/xul/tabpanels/index.html
new file mode 100644
index 0000000000..8c58b9b082
--- /dev/null
+++ b/files/de/archive/mozilla/xul/tabpanels/index.html
@@ -0,0 +1,100 @@
+---
+title: tabpanels
+slug: Archive/Mozilla/XUL/tabpanels
+tags:
+  - XUL Elemente
+  - XUL Referenz
+translation_of: Archive/Mozilla/XUL/tabpanels
+---
+<div class="noinclude"><span class="breadcrumbs XULRef_breadcrumbs">
+ « <a href="/de/docs/XUL_Referenz">XUL Referenz Startseite</a>    [
+ <a href="#Beispiele">Beispiele</a> |
+ <a href="#Attribute">Attribute</a> |
+ <a href="#Eigenschaften">Eigenschaften</a> |
+ <a href="#Methoden">Methoden</a> |
+ <a href="#Verwandte_Themen">Verwandte Themen</a> ]
+</span></div>
+<p>Ein Container, der Seiten in Form von <code><a href="/de/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code> Elementen enthält. Das <code>tabpanels</code> Element sollte in einer <code><a href="/de/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code> platziert sein, es muss aber nicht unbedingt ein direktes Kindelement sein. Die Kindelemente des <code>tabpanels</code> Elements werden zu Panels des <code><a href="/de/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code> Elements. In den meisten Fällen würde ein <code><a href="/de/docs/Mozilla/Tech/XUL/vbox" title="vbox">vbox</a></code> Element benutzt werden, aber es kann jedes Element verwendet werden, wobei die meisten Autoren am Liebsten das <code><a href="/de/docs/Mozilla/Tech/XUL/tabpanel" title="tabpanel">tabpanel</a></code> Element gebrauchen. Wenn auf den ersten Tag geklickt wird, wird dieser angezeigt. Wenn auf den zweiten Tab geklickt wird, wird dieser angezeigt und so weiter. Es sollte die selbe Anzahl an Panels vorhanden sein wie Tabs. Panels sollten niemals versteckt sein, denn das bedeutet, dass das Panel unzugänglich ist.</p>
+<p>Weitere Informationen sind im <a href="/de/XUL_Tutorial/Tabboxes" title="de/XUL_Tutorial/Tabboxes">XUL Tutorial</a> verfügbar.</p>
+<dl> <dt>Attribute</dt> <dd><a href="#a-selectedIndex">selectedIndex</a></dd>
+</dl>
+<dl> <dt>Eigenschaften</dt> <dd><a href="#p-selectedIndex">selectedIndex</a>, <a href="#p-selectedPanel">selectedPanel</a></dd>
+</dl>
+<h3 id="Beispiele">Beispiele</h3>
+<p>(Beispiel benötigt)</p>
+<h3 id="Attribute">Attribute</h3>
+<div id="a-selectedIndex">
+
+
+<dl>
+ <dt><code id="a-selectedIndex"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/selectedIndex">selectedIndex</a></code></dt>
+ <dd>Type: <em>integer</em></dd>
+ <dd>Gets and sets the index of the currently selected panel. The first item is at index 0.</dd>
+</dl>
+</div> <table style="border: 1px solid rgb(204, 204, 204); margin: 0 0 10px 10px; padding: 0 10px; background: rgb(238, 238, 238);">
+<tbody>
+<tr>
+<td><p><strong>Geerbt von XUL-Element</strong><br> <small>
+<code id="a-align"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code>,
+<code id="a-allowevents"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/allowevents">allowevents</a></code>,
+<code id="a-allownegativeassertions"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/allownegativeassertions">allownegativeassertions</a></code>,
+<code id="a-class"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/class">class</a></code>,
+<code id="a-coalesceduplicatearcs"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/coalesceduplicatearcs">coalesceduplicatearcs</a></code>,
+<code id="a-collapsed"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/collapsed">collapsed</a></code>,
+<code id="a-container"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/container">container</a></code>,
+<code id="a-containment"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/containment">containment</a></code>,
+<code id="a-context"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/context">context</a></code>,
+<code id="a-contextmenu"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/contextmenu">contextmenu</a></code>,
+<code id="a-datasources"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/datasources">datasources</a></code>,
+<code id="a-dir"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code>,
+<code id="a-empty"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/empty">empty</a></code>,
+<code id="a-equalsize"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/equalsize">equalsize</a></code>,
+<code id="a-flags"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/flags">flags</a></code>,
+<code id="a-flex"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code>,
+<code id="a-height"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/height">height</a></code>,
+<code id="a-hidden"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/hidden">hidden</a></code>,
+<code id="a-id"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code>,
+<code id="a-insertafter"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/insertafter">insertafter</a></code>,
+<code id="a-insertbefore"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/insertbefore">insertbefore</a></code>,
+<code id="a-left"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/left">left</a></code>,
+<code id="a-maxheight"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/maxheight">maxheight</a></code>,
+<code id="a-maxwidth"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/maxwidth">maxwidth</a></code>,
+<code id="a-menu"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/menu">menu</a></code>,
+<code id="a-minheight"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/minheight">minheight</a></code>,
+<code id="a-minwidth"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/minwidth">minwidth</a></code>,
+<code id="a-mousethrough"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/mousethrough">mousethrough</a></code>,
+<code id="a-observes"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/observes">observes</a></code>,
+<code id="a-ordinal"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/ordinal">ordinal</a></code>,
+<code id="a-orient"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code>,
+<code id="a-pack"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code>,
+<code id="a-persist"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/persist">persist</a></code>,
+<code id="a-popup"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/popup">popup</a></code>,
+<code id="a-position"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/position">position</a></code>,
+<code id="a-preference-editable"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/preference-editable">preference-editable</a></code>,
+<code id="a-querytype"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/querytype">querytype</a></code>,
+<code id="a-ref"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/ref">ref</a></code>,
+<code id="a-removeelement"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/removeelement">removeelement</a></code>,
+<code id="a-sortDirection"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/sortDirection">sortDirection</a></code>,
+<code id="a-sortResource"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/sortResource">sortResource</a></code>,
+<code id="a-sortResource2"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/sortResource2">sortResource2</a></code>,
+<code id="a-statustext"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/statustext">statustext</a></code>,
+<code id="a-style"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/style">style</a></code>,
+<code id="a-template"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/template">template</a></code>,
+<code id="a-tooltip"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/tooltip">tooltip</a></code>,
+<code id="a-tooltiptext"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/tooltiptext">tooltiptext</a></code>,
+<code id="a-top"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/top">top</a></code>,
+<code id="a-uri"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/uri">uri</a></code>,
+<code id="a-wait-cursor"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/wait-cursor">wait-cursor</a></code>,
+<code id="a-width"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/width">width</a></code> </small></p>
+</td>
+</tr>
+</tbody>
+</table>
+<h3 id="Eigenschaften">Eigenschaften</h3>
+<p> </p><div id="p-accessible"></div> <div id="p-selectedIndex"></div> <div id="p-selectedPanel"></div>
+<h3 id="Methoden">Methoden</h3>
+<table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Geerbte Methoden</strong><br> <small><code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.addEventListener">element.addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.appendChild">node.appendChild()</a></code>, <span id="m-blur"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/click">click</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.cloneNode">node.cloneNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.compareDocumentPosition">node.compareDocumentPosition()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.dispatchEvent">element.dispatchEvent()</a></code>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/focus">focus</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttribute">element.getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNode">element.getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNodeNS">element.getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNS">element.getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getBoundingClientRect">element.getBoundingClientRect()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getClientRects">element.getClientRects()</a></code>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/getElementsByAttribute">getElementsByAttribute</a></code></span>, <span id="m-getElementsByAttributeNS"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/getElementsByAttributeNS">getElementsByAttributeNS</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByClassName">element.getElementsByClassName()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByTagName">element.getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByTagNameNS">element.getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.getFeature">node.getFeature()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.getUserData">node.getUserData()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.hasAttribute">element.hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.hasAttributeNS">element.hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.nodes.hasAttributes">nodes.hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.nodes.hasChildNodes">nodes.hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.insertBefore">node.insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isDefaultNamespace">node.isDefaultNamespace()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isEqualNode">node.isEqualNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isSameNode">node.isSameNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isSupported">node.isSupported()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.lookupNamespaceURI">node.lookupNamespaceURI()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.lookupPrefix">node.lookupPrefix()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.normalize">node.normalize()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.querySelector">element.querySelector()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.querySelectorAll">element.querySelectorAll()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttribute">element.removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttributeNode">element.removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttributeNS">element.removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.removeChild">node.removeChild()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeEventListener">element.removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.replaceChild">node.replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttribute">element.setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNode">element.setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNodeNS">element.setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNS">element.setAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.setUserData">node.setUserData()</a></code></small></p> </td> </tr> </tbody>
+</table>
+<h3 id="Verwandte_Themen">Verwandte Themen</h3>
+<dl> <dt>Elemente</dt> <dd><code><a href="/de/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code>, <code><a href="/de/docs/Mozilla/Tech/XUL/tabs" title="tabs">tabs</a></code>, <code><a href="/de/docs/Mozilla/Tech/XUL/tab" title="tab">tab</a></code>, <code><a href="/de/docs/Mozilla/Tech/XUL/tabpanel" title="tabpanel">tabpanel</a></code>.</dd>
+</dl>
diff --git a/files/de/archive/mozilla/xul/tabs/index.html b/files/de/archive/mozilla/xul/tabs/index.html
new file mode 100644
index 0000000000..21f0853e04
--- /dev/null
+++ b/files/de/archive/mozilla/xul/tabs/index.html
@@ -0,0 +1,123 @@
+---
+title: tabs
+slug: Archive/Mozilla/XUL/tabs
+tags:
+  - XUL Elemente
+  - XUL Referenz
+translation_of: Archive/Mozilla/XUL/tabs
+---
+<div class="noinclude"><span class="breadcrumbs XULRef_breadcrumbs">
+ « <a href="/de/docs/XUL_Referenz">XUL Referenz Startseite</a>    [
+ <a href="#Beispiele">Beispiele</a> |
+ <a href="#Attribute">Attribute</a> |
+ <a href="#Eigenschaften">Eigenschaften</a> |
+ <a href="#Methoden">Methoden</a> |
+ <a href="#Verwandte_Themen">Verwandte Themen</a> ]
+</span></div>
+<p>Behälter für einzelne Reiter. Ein <code>tabs</code>-Element kann innerhalb einer <code><a href="/de/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code> benutzt werden und nimmt selbst <code><a href="/de/docs/Mozilla/Tech/XUL/tab" title="tab">tab</a></code>-Elemente auf.</p>
+<p>Mehr Information im <a href="/de/XUL_Tutorial/Karteikarten" title="de/XUL_Tutorial/Karteikarten">XUL Tutorial</a>.</p>
+<dl> <dt>Attribute</dt> <dd><a href="#a-closebutton">closebutton</a>, <a href="#a-disableclose">disableclose</a>, <a href="#a-disabled">disabled</a>, <a href="#a-onclosetab">onclosetab</a>, <a href="#a-onnewtab">onnewtab</a>, <a href="#a-tabs.onselect">onselect</a>, <a href="#a-setfocus">setfocus</a>, <a href="#a-tabbox">tabbox</a>, <a href="#a-tabindex">tabindex</a>, <a href="#a-tooltiptextnew">tooltiptextnew</a>, <a href="#a-value">value</a>,</dd>
+</dl>
+<dl> <dt>Eigenschaften</dt> <dd><a href="#a-accessibleType">accessibleType</a>, <a href="#p-disabled">disabled</a>, <a href="#a-itemCount">itemCount</a>, <a href="#p-selectedIndex">selectedIndex</a>, <a href="#p-selectedItem">selectedItem</a>, <a href="#p-tabIndex">tabIndex</a>, <a href="#p-value">value</a>,</dd>
+</dl>
+<dl> <dt>Methoden</dt> <dd><a href="#m-advanceSelectedTab">advanceSelectedTab</a>, <a href="#m-appendItem">appendItem</a>, <a href="#m-getIndexOfItem">getIndexOfItem</a>, <a href="#m-getItemAtIndex">getItemAtIndex</a>, <a href="#m-insertItemAt">insertItemAt</a>, <a href="#m-removeItemAt">removeItemAt</a></dd>
+</dl>
+<h3 id="Beispiele" name="Beispiele">Beispiele</h3>
+<p>(Beispiel benötigt)</p>
+<h3 id="Attribute" name="Attribute">Attribute</h3>
+<p> </p><div id="a-closebutton">
+
+<dl>
+  <dt>
+    <code id="a-closebutton"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/closebutton">closebutton</a></code> <span class="inlineIndicator obsolete obsoleteInline" title="(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)">Obsolete since Gecko 1.9.2</span></dt>
+  <dd>
+    Type: <em>boolean</em></dd>
+  <dd>
+    If this attribute is set to <code>true</code>, the <code><a href="/en-US/docs/Mozilla/Tech/XUL/tabs" title="tabs">tabs</a></code> row will have a "new tab" button and "close" button on the ends. This feature is used by the <code><a href="/en-US/docs/Mozilla/Tech/XUL/tabbrowser" title="tabbrowser">tabbrowser</a></code> to provide the facilities for adding and closing tabs. You can set an image to the "new tab" and "close" buttons by applying them to the <code><a href="https://developer.mozilla.org/en-US/docs/XUL/Style/tabs-newbutton">tabs-newbutton</a></code> and <code><a href="https://developer.mozilla.org/en-US/docs/XUL/Style/tabs-closebutton">tabs-closebutton</a></code> classes respectively.</dd>
+</dl>
+</div> <div id="a-disableclose">
+
+
+<dl>
+ <dt><code id="a-disableclose"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/disableclose">disableclose</a></code></dt>
+ <dd>Type: <em>boolean</em></dd>
+ <dd>If this attribute is <code>true</code> the close button will be disabled.</dd>
+</dl>
+</div> <div id="a-disabled">
+
+<dl> <dt><code id="a-disabled"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code></dt> <dd>Typ: <em>boolean</em></dd> <dd>Kennzeichnet, ob ein Element deaktiviert ist oder nicht. Wenn das Element auf  <code>true</code> gesetzt ist, ist das Element deaktiviert. Deaktivierte Elemente sind gewöhnlich mit einem grauen Text dargestellt. Wenn ein Element deaktiviert ist, wird es auf Anwenderaktionen nicht reagieren, es kann den Fokus nicht erlangen und das <code>command</code> Ereignis wird nicht ausgelöst. Das Element wird allerdings noch auf Mausereignisse antworten. Um das Element zu aktivieren, ist es besser das Attribut zu entfernen als es auf den Wert <code>false</code> zu setzen. Um den Wert dieses Attributs mittels JavaScript zu setzen oder abzurufen, sollte besser die <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/disabled">disabled</a></span></code> Eigenschaft verwendet werden.</dd>
+</dl>
+
+
+</div> <div id="a-onclosetab">
+
+
+<dl>
+ <dt><code id="a-onclosetab"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/onclosetab">onclosetab</a></code></dt>
+ <dd>Type: <em>script code</em></dd>
+ <dd>This script will be called when the close tab button is clicked.</dd>
+</dl>
+</div> <div id="a-onnewtab">
+
+
+<dl>
+ <dt><code id="a-onnewtab"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/onnewtab">onnewtab</a></code></dt>
+ <dd><strong><span class="highlightred">Not in Firefox</span></strong></dd>
+ <dd>Type: <em>script code</em></dd>
+ <dd>This script will be called when the new tab button is clicked.</dd>
+</dl>
+</div> <div id="a-tabs.onselect">
+
+
+<dl>
+ <dt><code id="a-tabs.onselect"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/tabs.onselect">onselect</a></code></dt>
+ <dd>Type: <em>script code</em></dd>
+ <dd>This event is sent to the <code><a href="/en-US/docs/Mozilla/Tech/XUL/tabs" title="tabs">tabs</a></code> element when this tab is changed.</dd>
+</dl>
+
+
+</div> <div id="a-setfocus">
+
+
+<dl>
+ <dt><code id="a-setfocus"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/setfocus">setfocus</a></code></dt>
+ <dd>Type: <em>boolean</em></dd>
+ <dd>If <code>true</code> or omitted, the focus will be given to the first element in the corresponding <code><a href="/en-US/docs/Mozilla/Tech/XUL/tabpanel" title="tabpanel">tabpanel</a></code> when the tabs are navigated via the keyboard. If this attribute is <code>false</code>, the focus does not change during navigation.</dd>
+</dl>
+
+
+</div> <div id="a-tabindex">
+
+
+<dl>
+ <dt><code id="a-tabindex"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/tabindex">tabindex</a></code></dt>
+ <dd>Type: <em>integer</em></dd>
+ <dd>The tab order of the element. The tab order is the order in which the focus is moved when the user presses the "<code>tab</code>" key. Elements with a higher <code>tabindex</code> are later in the tab sequence.</dd>
+</dl>
+</div> <div id="a-tooltiptextnew">
+
+
+<dl>
+ <dt><code id="a-tooltiptextnew"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/tooltiptextnew">tooltiptextnew</a></code></dt>
+ <dd><strong><span class="highlightred">Not in Firefox</span></strong></dd>
+ <dd>Type: <em>string</em></dd>
+ <dd>Used to set the text which appears in the tooltip when the user moves the mouse over the new button in the tab row.</dd>
+</dl>
+</div>
+<h3 id="Eigenschaften" name="Eigenschaften">Eigenschaften</h3>
+<p> </p><div id="p-accessibleType"></div> <div id="p-disabled"></div> <div id="p-itemCount"></div> <div id="p-selectedIndex"></div> <div id="p-selectedItem"></div> <div id="p-tabbox"></div> <div id="p-tabIndex"></div> <div id="p-value"></div>
+<h3 id="Methoden" name="Methoden">Methoden</h3>
+<table style="border: 1px solid rgb(204, 204, 204); margin: 0 0 10px 10px; padding: 0 10px; background: rgb(238, 238, 238); float: right; width: 250px;">
+<tbody>
+<tr>
+<td>
+<p><strong>Geerbte Methoden</strong><br>
+<small><code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.addEventListener">element.addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.appendChild">node.appendChild()</a></code>, <span id="m-blur"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/click">click</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.cloneNode">node.cloneNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.compareDocumentPosition">node.compareDocumentPosition()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.dispatchEvent">element.dispatchEvent()</a></code>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/focus">focus</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttribute">element.getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNode">element.getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNodeNS">element.getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNS">element.getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getBoundingClientRect">element.getBoundingClientRect()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getClientRects">element.getClientRects()</a></code>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/getElementsByAttribute">getElementsByAttribute</a></code></span>, <span id="m-getElementsByAttributeNS"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/getElementsByAttributeNS">getElementsByAttributeNS</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByClassName">element.getElementsByClassName()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByTagName">element.getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByTagNameNS">element.getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.getFeature">node.getFeature()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.getUserData">node.getUserData()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.hasAttribute">element.hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.hasAttributeNS">element.hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.nodes.hasAttributes">nodes.hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.nodes.hasChildNodes">nodes.hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.insertBefore">node.insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isDefaultNamespace">node.isDefaultNamespace()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isEqualNode">node.isEqualNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isSameNode">node.isSameNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isSupported">node.isSupported()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.lookupNamespaceURI">node.lookupNamespaceURI()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.lookupPrefix">node.lookupPrefix()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.normalize">node.normalize()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.querySelector">element.querySelector()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.querySelectorAll">element.querySelectorAll()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttribute">element.removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttributeNode">element.removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttributeNS">element.removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.removeChild">node.removeChild()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeEventListener">element.removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.replaceChild">node.replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttribute">element.setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNode">element.setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNodeNS">element.setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNS">element.setAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.setUserData">node.setUserData()</a></code></small></p>
+
+</td>
+</tr>
+</tbody>
+</table>
+<h3 id="Verwandte_Themen" name="Verwandte_Themen">Verwandte Themen</h3>
+<dl> <dt>Elemente</dt> <dd><code><a href="/de/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code>, <code><a href="/de/docs/Mozilla/Tech/XUL/tab" title="tab">tab</a></code>, <code><a href="/de/docs/Mozilla/Tech/XUL/tabpanels" title="tabpanels">tabpanels</a></code>, <code><a href="/de/docs/Mozilla/Tech/XUL/tabpanel" title="tabpanel">tabpanel</a></code>.</dd> <dt>Schnittstellen</dt> <dd><a href="/de/NsIAccessibleProvider" title="de/NsIAccessibleProvider">nsIAccessibleProvider</a>, <a href="/de/NsIDOMXULSelectControlElement" title="de/NsIDOMXULSelectControlElement">nsIDOMXULSelectControlElement</a></dd>
+</dl>
diff --git a/files/de/archive/mozilla/xul/textbox/index.html b/files/de/archive/mozilla/xul/textbox/index.html
new file mode 100644
index 0000000000..a96f2673d5
--- /dev/null
+++ b/files/de/archive/mozilla/xul/textbox/index.html
@@ -0,0 +1,334 @@
+---
+title: textbox
+slug: Archive/Mozilla/XUL/Textbox
+tags:
+  - XUL Elemente
+  - XUL Referenz
+translation_of: Archive/Mozilla/XUL/textbox
+---
+<div class="noinclude"><span class="breadcrumbs XULRef_breadcrumbs">
+ « <a href="/de/docs/XUL_Referenz">XUL Referenz Startseite</a>    [
+ <a href="#Beispiele">Beispiele</a> |
+ <a href="#Attribute">Attribute</a> |
+ <a href="#Eigenschaften">Eigenschaften</a> |
+ <a href="#Methoden">Methoden</a> |
+ <a href="#Verwandte_Themen">Verwandte Themen</a> ]
+</span></div>
+<p>Ein Eingabefeld, in dem der Benutzer einen Text eingeben kann. Die <code>textbox</code> ist ähnlich wie das HTML <code>input</code> Element. Nur eine Textzeile wird im Standardverhalten angezeigt. Das <code id="a-multiline"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/multiline">multiline</a></code> Attribut kann das Feld auch mit mehreren Zeilen ausstatten.</p>
+<p>Weitere Informationen sind im <a href="/de/XUL_Tutorial/Eingabeelemente" title="de/XUL_Tutorial/Eingabeelemente">XUL Tutorial</a> verfügbar.</p>
+<dl> <dt>Attribute</dt> <dd><a href="#a-cols">cols</a>, <a href="#a-decimalplaces">decimalplaces</a>, <a href="#a-disabled">disabled</a>, <a href="#a-emptytext">emptytext</a>, <a href="#a-hidespinbuttons">hidespinbuttons</a>, <a href="#a-increment">increment</a>, <a href="#a-textbox.label">label</a>, <a href="#a-max">max</a>, <a href="#a-maxlength">maxlength</a>, <a href="#a-min">min</a>, <a href="#a-multiline">multiline</a>, <a href="#a-newlines">newlines</a>, <a href="#a-textbox.onchange">onchange</a>, <a href="#a-oninput">oninput</a>, <a href="#a-placeholder">placeholder</a>, <a href="#a-preference">preference</a>, <a href="#a-readonly">readonly</a>, <a href="#a-rows">rows</a>, <a href="#a-searchbutton">searchbutton</a>, <a href="#a-size">size</a>, <a href="#a-spellcheck">spellcheck</a>, <a href="#a-tabindex">tabindex</a>, <a href="#a-timeout">timeout</a>, <a href="#a-textbox.type">type</a>, <a href="#a-textbox.value">value</a>, <a href="#a-wrap">wrap</a>, <a href="#a-wraparound">wraparound</a></dd>
+</dl>
+<dl> <dt>Eigenschaften</dt> <dd><a href="#p-accessibleType">accessibleType</a>, <a href="#p-clickSelectsAll">clickSelectsAll</a>, <a href="#p-decimalPlaces">decimalPlaces</a>, <a href="#p-decimalSymbol">decimalSymbol</a>, <a href="#p-defaultValue">defaultValue</a>, <a href="#p-disabled">disabled</a>, <a href="#p-editor">editor</a>, <a href="#p-emptyText">emptyText</a>, <a href="#p-increment">increment</a>, <a href="#p-inputField">inputField</a>, <a href="#p-textbox.label">label</a>, <a href="#p-max">max</a>, <a href="#p-maxLength">maxLength</a>, <a href="#p-min">min</a>, <a href="#p-placeholder">placeholder</a>, <a href="#p-readOnly">readOnly</a>, <a href="#p-searchButton">searchButton</a>, <a href="#p-selectionEnd">selectionEnd</a>, <a href="#p-selectionStart">selectionStart</a>, <a href="#p-size">size</a>, <a href="#p-spinButtons">spinButtons</a>, <a href="#p-tabIndex">tabIndex</a>, <a href="#p-textLength">textLength</a>, <a href="#p-timeout">timeout</a>, <a href="#p-type">type</a>, <a href="#p-textbox.value">value</a>, <a href="#p-valueNumber">valueNumber</a>, <a href="#p-wrapAround">wrapAround</a></dd>
+</dl>
+<dl> <dt>Methoden</dt> <dd><a href="#m-decrease">decrease</a>, <a href="#m-increase">increase</a>, <a href="#m-reset">reset</a>, <a href="#m-select">select</a>, <a href="#m-setSelectionRange">setSelectionRange</a></dd>
+</dl>
+<dl> <dt>Styleklassen</dt> <dd><a href="#s-plain">plain</a></dd>
+</dl>
+<h3 id="Besipiele">Besipiele</h3>
+<div class="float-right"><img alt="Image:XUL_ref_textbox.png" class="internal" src="/@api/deki/files/471/=XUL_ref_textbox.png"></div>
+<pre>&lt;vbox&gt;
+&lt;label control="your-name" value="Enter your name:"/&gt;
+&lt;textbox id="your-name" value="John"/&gt;
+&lt;/vbox&gt;
+</pre>
+<h3 id="Attribute">Attribute</h3>
+<p> </p><div id="a-cols">
+
+<dl> <dt><code id="a-cols"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/cols">cols</a></code></dt> <dd>Typ: <em>integer</em></dd> <dd>Stellt die Anzahl an Spalten für mehrzeilige Textboxen dar.</dd>
+</dl>
+
+</div> <div id="a-decimalplaces">
+
+<dl> <dt><code id="a-decimalplaces"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/decimalplaces">decimalplaces</a></code> </dt> <dd>Typ: <em>integer</em></dd> <dd>Die Anzahl an Dezimalstellen, die angezeigt werden sollen. Der Standardwert ist 0, was bedeutet, dass keine Dezimalstellen angezeigt werden. Der Wert<code> infinity</code> kann dazu verwendet werden, keine Begrenzung der Dezimalstellen bei Zahlen anzuzeigen. Hinweis: Dezimalzahlen werden als Floats gespeichert.</dd>
+</dl>
+
+</div> <div id="a-disabled">
+
+<dl> <dt><code id="a-disabled"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code></dt> <dd>Typ: <em>boolean</em></dd> <dd>Kennzeichnet, ob ein Element deaktiviert ist oder nicht. Wenn das Element auf  <code>true</code> gesetzt ist, ist das Element deaktiviert. Deaktivierte Elemente sind gewöhnlich mit einem grauen Text dargestellt. Wenn ein Element deaktiviert ist, wird es auf Anwenderaktionen nicht reagieren, es kann den Fokus nicht erlangen und das <code>command</code> Ereignis wird nicht ausgelöst. Das Element wird allerdings noch auf Mausereignisse antworten. Um das Element zu aktivieren, ist es besser das Attribut zu entfernen als es auf den Wert <code>false</code> zu setzen. Um den Wert dieses Attributs mittels JavaScript zu setzen oder abzurufen, sollte besser die <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/disabled">disabled</a></span></code> Eigenschaft verwendet werden.</dd>
+</dl>
+
+
+</div> <div id="a-emptytext">
+
+<dl> <dt><code id="a-emptytext"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/emptytext">emptytext</a></code>  <span class="inlineIndicator deprecated deprecatedInline" title="(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)">Unerwünscht Gecko 2</span></dt> <dd>Typ: <em>string</em></dd> <dd>Ein String, der in der <a class="internal" href="/De/XUL/Textbox" title="de/XUL/textbox">Textbox</a> angezeigt wird, falls diese keinen Wert besitzt. Dieses Attribut wurde vom <code id="a-placeholder"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/placeholder">placeholder</a></code> Attribut in Gecko 2 ersetzt. Der alte Name bleibt zur Kompatibilität bestehen, aber Sie sollten Ihren Code aktualisieren.</dd>
+</dl>
+
+</div> <div id="a-hidespinbuttons">
+
+<dl> <dt><code id="a-hidespinbuttons"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/hidespinbuttons">hidespinbuttons</a></code></dt> <dd>Typ: <em>boolean</em></dd> Falls der Wert auf <code>true</code> gesetzt wird, werden keine Buttons mit Pfeilen angezeigt, um den Wert des Feldes anzupassen. Der Wert kann dann ausschließlich per Tastatur eingegeben werden. Standardmäßig ist der Wert <code>false</code>.</dl>
+</div> <div id="a-increment">
+
+<dl>
+  <dt>
+    <code id="a-increment"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/increment">increment</a></code></dt>
+  <dd>
+    Type: <em>integer</em></dd>
+  <dd>
+    The amount by which the <code id="a-curpos"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/curpos">curpos</a></code> (for scroll bars) or <code id="a-value"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code> (for number boxes and scale) attribute changes when the arrows are clicked(or scales are dragged). The default value is 1.</dd>
+</dl>
+</div> <div id="a-textbox.label">
+
+
+<dl>
+ <dt><code id="a-textbox.label"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/textbox.label">label</a></code> </dt>
+ <dd>Type: <em>string</em></dd>
+ <dd>If present and not empty, this will be exposed to screen readers through the <a href="/en/XUL/Property/textbox.label" title="en/XUL/Property/textbox.label">label</a> property.</dd>
+</dl>
+</div> <div id="a-max">
+
+<dl>
+  <dd>
+    Type: <em>integer</em></dd>
+  <dd>
+    The maximum value that the scale or number box may be set to. The default value is 100 for scales and Infinity for number boxes.</dd>
+</dl>
+
+<p> </p>
+</div> <div id="a-maxlength">
+
+
+<dl>
+ <dt><code id="a-maxlength"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/maxlength">maxlength</a></code></dt>
+ <dd>Type: <em>integer</em></dd>
+ <dd>The maximum number of characters that the textbox allows to be entered.</dd>
+</dl>
+</div> <div id="a-min">
+
+<dl>
+  <dt>
+    <code id="a-min"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/min">min</a></code></dt>
+  <dd>
+    Type: <em>integer</em></dd>
+  <dd>
+    The minimum value the control's value may take. The default value is 0.</dd>
+</dl>
+<p> </p>
+</div> <div id="a-multiline">
+
+
+<dl>
+ <dt><code id="a-multiline"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/multiline">multiline</a></code></dt>
+ <dd>Type: <em>boolean</em></dd>
+ <dd>If <code>true</code>, the textbox displays multiple lines. If the user presses Enter, a new line is started. If <code>false</code>, the textbox only allows entry of one line.</dd>
+</dl>
+</div> <div id="a-newlines">
+
+
+<dl>
+ <dt><code id="a-newlines"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/newlines">newlines</a></code></dt>
+ <dd>Type: <em>one of the values below</em></dd>
+ <dd>How the text box handles pastes with newlines in them.</dd>
+ <dd>Possible values:
+ <dl>
+  <dt><code>pasteintact</code></dt>
+  <dd>Paste newlines unchanged</dd>
+  <dt><code>pastetofirst</code></dt>
+  <dd>Paste text up to the first newline, dropping the rest of the text</dd>
+  <dt><code>replacewithcommas</code></dt>
+  <dd>Pastes the text with the newlines replaced with commas</dd>
+  <dt><code>replacewithspaces</code></dt>
+  <dd>Pastes the text with newlines replaced with spaces</dd>
+  <dt><code>strip</code></dt>
+  <dd>Pastes the text with the newlines removed</dd>
+  <dt><code>stripsurroundingwhitespace</code></dt>
+  <dd>Pastes the text with newlines and adjacent whitespace removed</dd>
+ </dl>
+ </dd>
+</dl>
+</div> <div id="a-textbox.onchange">
+
+
+<dl>
+ <dt><code id="a-textbox.onchange"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/textbox.onchange">onchange</a></code></dt>
+ <dd>Type: <em>script code</em></dd>
+ <dd>This event is sent when the value of the textbox is changed. The event is not sent until the focus is moved to another element.</dd>
+</dl>
+
+
+</div> <div id="a-oninput">
+
+
+<dl>
+ <dt><code id="a-oninput"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/oninput">oninput</a></code></dt>
+ <dd>Type: <em>script code</em></dd>
+ <dd>This event is sent when a user enters text in a <code><a href="/en-US/docs/Mozilla/Tech/XUL/textbox" title="textbox">textbox</a></code>. This event is only called when the text displayed would change, thus it is not called when the user presses non-displayable keys.</dd>
+</dl>
+
+
+</div> <div id="p-placeholder"></div> <div id="a-preference">
+
+
+<dl>
+ <dt><code id="a-preference"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/preference">preference</a></code></dt>
+ <dd>Type: <em>id</em></dd>
+ <dd>Connects the element to a corresponding <code><a href="/en-US/docs/Mozilla/Tech/XUL/preference" title="preference">preference</a></code>. This attribute only has any effect when used inside a <code><a href="/en-US/docs/Mozilla/Tech/XUL/prefwindow" title="prefwindow">prefwindow</a></code>. More information is available in the <a href="../../../../en/Preferences_System" rel="internal">Preferences System</a> article.</dd>
+</dl>
+</div> <div id="a-readonly">
+
+
+<dl>
+ <dt><code id="a-readonly"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/readonly">readonly</a></code></dt>
+ <dd>Type: <em>boolean</em></dd>
+ <dd>If set to <code>true</code>, then the user cannot change the value of the element. However, the value may still be modified by a script.</dd>
+</dl>
+</div> <div id="a-rows">
+
+<dl>
+  <dt>
+    <code id="a-rows"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/rows">rows</a></code></dt>
+  <dd>
+    Type: <em>integer</em></dd>
+  <dd>
+    The number of rows to display in the element. If the element contains more than this number of rows, a scrollbar will appear which the user can use to scroll to the other rows. To get the actual number of rows in the element, use the <span id="m-getRowCount"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/getRowCount">getRowCount</a></code></span> method.</dd>
+</dl>
+</div> <div id="a-searchbutton">
+
+
+<dl>
+ <dt><code id="a-searchbutton"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/searchbutton">searchbutton</a></code></dt>
+ <dd>Type: <em>boolean</em></dd>
+ <dd>If <code>true</code>, the search field will only fire a command event when the user presses the search button or presses the <code>Enter</code> key. Otherwise, the command event is fired whenever the user modifies the value. This attribute only applies to textboxes with the type <code>search</code>.</dd>
+</dl>
+</div><div id="a-size">
+
+
+<dl>
+ <dt><code id="a-size"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/size">size</a></code></dt>
+ <dd>Type: <em>integer</em></dd>
+ <dd>The number of characters that can be displayed in the textbox.</dd>
+</dl>
+</div> <div id="a-spellcheck">
+
+
+<dl>
+ <dt><code id="a-spellcheck"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/spellcheck">spellcheck</a></code> </dt>
+ <dd>Type: <em>boolean</em></dd>
+ <dd>If <code>true</code>, spell checking is enabled by default for the text box; if <code>false</code>, spell checking is disabled by default.</dd>
+ <dd>If not specified, this defaults to <code>false</code></dd>
+</dl>
+
+<p><span style="font-family: Georgia,Times,'Times New Roman',serif; font-size: 1.628em; font-style: inherit; font-variant: inherit; line-height: 1.1em;">The HTML</span></p>
+
+<article style="margin: 0px; padding: 0px; border: 0px; font-family: 'Open Sans', Arial, sans-serif; line-height: 16px; font-size: 16px; vertical-align: baseline; position: relative;">
+<p style="margin: 0px 0px 0.8em; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: 1.6em; vertical-align: baseline;">The <code style="margin: 0px; padding: 2px 7px; border: 0px; font-family: monospace, sans-serif; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-size: 16px; vertical-align: baseline; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px;">spellcheck</code> attribute uses values of true or false (you cannot simply add the spellcheck attribute to a given element):</p>
+
+<pre class="html language-html" style="margin-top: 0.5em; margin-bottom: 0.5em; padding: 1em; border: 0px; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-style: inherit; font-variant: inherit; line-height: 1.6em; font-size: 0.8em; vertical-align: baseline; background-color: rgb(245, 242, 240); color: black; text-shadow: white 0px 1px; direction: ltr;"><code class="language-html" style="margin: 0px; padding: 0px; border: 0px; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-style: inherit; font-variant: inherit; line-height: inherit; font-size: 13px; vertical-align: baseline; text-shadow: white 0px 1px; direction: ltr;"><span class="comment token" style="border: 0px; color: #708090; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&lt;!-- spellcheck everything! --&gt;</span>
+<span class="tag token" style="border: 0px; color: #990055; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="tag token" style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&lt;</span>input</span> <span class="attr-name token" style="border: 0px; color: #669900; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">type</span><span class="attr-value token" style="border: 0px; color: #0077aa; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"</span>text<span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"</span></span> <span class="attr-name token" style="border: 0px; color: #669900; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">spellcheck</span><span class="attr-value token" style="border: 0px; color: #0077aa; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"</span>true<span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"</span></span> <span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">/&gt;</span></span><span class="tag token" style="border: 0px; color: #990055; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="tag token" style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&lt;</span>br</span> <span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">/&gt;</span></span>
+<span class="tag token" style="border: 0px; color: #990055; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="tag token" style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&lt;</span>textarea</span> <span class="attr-name token" style="border: 0px; color: #669900; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">spellcheck</span><span class="attr-value token" style="border: 0px; color: #0077aa; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"</span>true<span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"</span></span><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&gt;</span></span><span class="tag token" style="border: 0px; color: #990055; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="tag token" style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&lt;/</span>textarea</span><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&gt;</span></span>
+<span class="tag token" style="border: 0px; color: #990055; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="tag token" style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&lt;</span>div</span> <span class="attr-name token" style="border: 0px; color: #669900; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">contenteditable</span><span class="attr-value token" style="border: 0px; color: #0077aa; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"</span>true<span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"</span></span> <span class="attr-name token" style="border: 0px; color: #669900; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">spellcheck</span><span class="attr-value token" style="border: 0px; color: #0077aa; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"</span>true<span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"</span></span><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&gt;</span></span>I am some content<span class="tag token" style="border: 0px; color: #990055; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="tag token" style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&lt;/</span>div</span><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&gt;</span></span>
+
+<span class="comment token" style="border: 0px; color: #708090; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&lt;!-- spellcheck nothing! --&gt;</span>
+<span class="tag token" style="border: 0px; color: #990055; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="tag token" style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&lt;</span>input</span> <span class="attr-name token" style="border: 0px; color: #669900; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">type</span><span class="attr-value token" style="border: 0px; color: #0077aa; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"</span>text<span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"</span></span> <span class="attr-name token" style="border: 0px; color: #669900; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">spellcheck</span><span class="attr-value token" style="border: 0px; color: #0077aa; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"</span>false<span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"</span></span> <span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">/&gt;</span></span><span class="tag token" style="border: 0px; color: #990055; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="tag token" style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&lt;</span>br</span> <span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">/&gt;</span></span>
+<span class="tag token" style="border: 0px; color: #990055; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="tag token" style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&lt;</span>textarea</span> <span class="attr-name token" style="border: 0px; color: #669900; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">spellcheck</span><span class="attr-value token" style="border: 0px; color: #0077aa; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"</span>false<span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"</span></span><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&gt;</span></span><span class="tag token" style="border: 0px; color: #990055; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="tag token" style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&lt;/</span>textarea</span><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&gt;</span></span>
+<span class="tag token" style="border: 0px; color: #990055; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="tag token" style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&lt;</span>div</span> <span class="attr-name token" style="border: 0px; color: #669900; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">contenteditable</span><span class="attr-value token" style="border: 0px; color: #0077aa; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"</span>true<span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"</span></span> <span class="attr-name token" style="border: 0px; color: #669900; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">spellcheck</span><span class="attr-value token" style="border: 0px; color: #0077aa; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"</span>false<span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"</span></span><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&gt;</span></span>I am some content<span class="tag token" style="border: 0px; color: #990055; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="tag token" style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&lt;/</span>div</span><span class="punctuation token" style="border: 0px; color: #999999; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">&gt;</span></span></code></pre>
+
+<p style="margin: 0px 0px 0.8em; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: 1.6em; vertical-align: baseline;">You can use spellcheck on <code style="margin: 0px; padding: 2px 7px; border: 0px; font-family: monospace, sans-serif; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-size: 16px; vertical-align: baseline; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px;">INPUT</code>, <code style="margin: 0px; padding: 2px 7px; border: 0px; font-family: monospace, sans-serif; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-size: 16px; vertical-align: baseline; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px;">TEXTAREA</code>, and <code style="margin: 0px; padding: 2px 7px; border: 0px; font-family: monospace, sans-serif; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-size: 16px; vertical-align: baseline; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px;">contenteditable</code> elements.  The<code style="margin: 0px; padding: 2px 7px; border: 0px; font-family: monospace, sans-serif; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-size: 16px; vertical-align: baseline; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px;">spellcheck</code> attribute works well paired with the <font face="inherit"><span style="font-style: inherit; font-variant: inherit; line-height: inherit;">autocomplete, autocapitalize, and autocorrect attributes</span></font> too!</p>
+
+<p style="margin: 0px 0px 0.8em; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: 1.6em; vertical-align: baseline;">Added from David Walsh's article on <a href="http://davidwalsh.name/spellcheck">Spell Check</a>.</p>
+</article>
+</div> <div id="a-tabindex">
+
+
+<dl>
+ <dt><code id="a-tabindex"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/tabindex">tabindex</a></code></dt>
+ <dd>Type: <em>integer</em></dd>
+ <dd>The tab order of the element. The tab order is the order in which the focus is moved when the user presses the "<code>tab</code>" key. Elements with a higher <code>tabindex</code> are later in the tab sequence.</dd>
+</dl>
+</div> <div id="a-timeout">
+
+
+<dl>
+ <dt><code id="a-timeout"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/timeout">timeout</a></code></dt>
+ <dd>Type: <em>integer</em></dd>
+ <dd>For autocomplete textboxes, the number of milliseconds before the textbox starts searching for completions. The default is 50 milliseconds. For search textboxes, the number of milliseconds before the timer fires a command event. The default is 500 milliseconds. For timed textboxes, the number of milliseconds before the timer fires a command event. There is no default. The timer starts after the user types a character. If the user types another character, the timer resets.</dd>
+</dl>
+</div> <div id="a-textbox.type">
+
+
+<dl>
+ <dt><code id="a-textbox.type"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/textbox.type">type</a></code></dt>
+ <dd>Type: <em>one of the values below</em></dd>
+ <dd>You can set the type attribute to one of the values below for a more specialized type of textbox. Don't set the type if you wish to use a regular textbox.</dd>
+ <dd>
+ <dl>
+  <dt><code>autocomplete</code></dt>
+  <dd>A textbox that supports autocomplete. For more information about autocomplete textboxes, see the autocomplete documentation (<a href="/En/XUL/Textbox_(XPFE_autocomplete)" title="En/XUL/Textbox (XPFE autocomplete)">XPFE</a> [Thunderbird/SeaMonkey]) (<a href="/En/XUL/Textbox_(Toolkit_autocomplete)" title="en/XUL/textbox_(Firefox_autocomplete)">Firefox</a>)</dd>
+  <dt><code>number</code></dt>
+  <dd> A textbox that only allows the user to enter numbers. In addition, arrow buttons appear next to the textbox to let the user step through values. There are several attributes that allow the number textbox to be configured, including <code id="a-decimalplaces"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/decimalplaces">decimalplaces</a></code>, <code id="a-min"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/min">min</a></code>, <code id="a-max"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/max">max</a></code>, <code id="a-increment"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/increment">increment</a></code>, <code id="a-wraparound"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/wraparound">wraparound</a></code>, <code id="a-hidespinbuttons"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/hidespinbuttons">hidespinbuttons</a></code>, and <code id="a-textbox.value"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/textbox.value">textbox.value</a></code>.</dd>
+  <dt><code>password</code></dt>
+  <dd>A textbox that hides what is typed, used for entering passwords.</dd>
+  <dt><code>search</code></dt>
+  <dd> A textbox intended for searching. The command event will fire as the user modifies the value. A listener for the command event should update search results. If the <code id="a-searchbutton"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/searchbutton">searchbutton</a></code> attribute is set to <code>true</code>, the command event is only fired if the user presses the search button or presses the <code>Enter </code>key. You may specify grey text to appear when the search box is empty using the <code id="a-emptytext"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/emptytext">emptytext</a></code> attribute, and a timeout may be set for the command event using the <code id="a-timeout"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/timeout">timeout</a></code> attribute (defaults to 500).</dd>
+  <dt><code>timed</code></dt>
+  <dd><span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> This textbox will fire a command event after the user types characters and a certain time has passed. The delay is set with the <code id="a-timeout"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/timeout">timeout</a></code> attribute. The command event will fire if the user presses the <code>Enter </code>key. The <code>timed</code> type is deprecated in Gecko 1.9.1 and the <code>search</code> textbox may be used instead.</dd>
+ </dl>
+ </dd>
+</dl>
+
+
+</div> <div id="a-textbox.value">
+
+
+<dl>
+ <dt><code id="a-textbox.value"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/textbox.value">value</a></code></dt>
+ <dd>Type: <em>string</em></dd>
+ <dd>The default value entered in a textbox. The attribute only holds the default value and is never modified when the user enters text. To get the updated value, use the <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/value">value</a></span></code> property. For number boxes, the default is 0 or the minimum value returned by the <code>min</code> property, whichever is higher.</dd>
+</dl>
+
+
+</div> <div id="a-wrap">
+
+
+<dl>
+ <dt><code id="a-wrap"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/wrap">wrap</a></code></dt>
+ <dd>Type: <em>string</em></dd>
+ <dd>Set this attribute to the value <code>off</code> to disable word wrapping in the textbox. If this attribute is not specified, word wrapping is enabled.</dd>
+</dl>
+</div> <div id="a-wraparound">
+
+
+<dl>
+ <dt><code id="a-wraparound"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/wraparound">wraparound</a></code> </dt>
+ <dd>Type: <em>boolean</em></dd>
+ <dd>If <code>true</code>, the value of the number box will wrap around when the maximum or minimum value is exceeded. The minimum and maximum values must both not be infinity.</dd>
+</dl>
+</div>
+<h3 id="Eigenschaften">Eigenschaften</h3>
+<p> </p><div id="p-accessibleType"></div> <div id="p-clickSelectsAll"></div> <div id="p-decimalPlaces"></div> <div id="p-decimalSymbol"></div> <div id="p-defaultValue"></div> <div id="p-disabled"></div> <div id="p-editor"></div> <div id="p-emptyText"></div> <div id="p-increment"></div> <div id="p-inputField"></div> <div id="p-textbox.label"></div> <div id="p-max"></div> <div id="p-maxLength"></div> <div id="p-min"></div> <div id="a-placeholder">
+
+
+<dl>
+ <dt><code id="a-placeholder"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/placeholder">placeholder</a></code> </dt>
+ <dd>Type: <em>string</em></dd>
+ <dd>A string that appears in the textbox when it has no value.</dd>
+</dl>
+</div> <div id="p-readOnly"></div> <div id="p-searchButton"></div> <div id="p-selectionEnd"></div> <div id="p-selectionStart"></div> <div id="p-size"></div> <div id="p-spinButtons"></div> <div id="p-tabIndex"></div> <div id="p-textLength"></div> <div id="p-timeout"></div> <div id="p-type"></div> <div id="p-textbox.value"></div> <div id="p-valueNumber"></div> <div id="p-wrapAround"></div>
+<h3 id="Methoden">Methoden</h3>
+<p>     </p><table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Geerbte Methoden</strong><br> <small><code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.addEventListener">element.addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.appendChild">node.appendChild()</a></code>, <span id="m-blur"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/click">click</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.cloneNode">node.cloneNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.compareDocumentPosition">node.compareDocumentPosition()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.dispatchEvent">element.dispatchEvent()</a></code>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/focus">focus</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttribute">element.getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNode">element.getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNodeNS">element.getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNS">element.getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getBoundingClientRect">element.getBoundingClientRect()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getClientRects">element.getClientRects()</a></code>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/getElementsByAttribute">getElementsByAttribute</a></code></span>, <span id="m-getElementsByAttributeNS"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/getElementsByAttributeNS">getElementsByAttributeNS</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByClassName">element.getElementsByClassName()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByTagName">element.getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByTagNameNS">element.getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.getFeature">node.getFeature()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.getUserData">node.getUserData()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.hasAttribute">element.hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.hasAttributeNS">element.hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.nodes.hasAttributes">nodes.hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.nodes.hasChildNodes">nodes.hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.insertBefore">node.insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isDefaultNamespace">node.isDefaultNamespace()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isEqualNode">node.isEqualNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isSameNode">node.isSameNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isSupported">node.isSupported()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.lookupNamespaceURI">node.lookupNamespaceURI()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.lookupPrefix">node.lookupPrefix()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.normalize">node.normalize()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.querySelector">element.querySelector()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.querySelectorAll">element.querySelectorAll()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttribute">element.removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttributeNode">element.removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttributeNS">element.removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.removeChild">node.removeChild()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeEventListener">element.removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.replaceChild">node.replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttribute">element.setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNode">element.setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNodeNS">element.setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNS">element.setAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.setUserData">node.setUserData()</a></code></small></p> </td> </tr> </tbody>
+</table>
+<h3 id="Styleklassen">Styleklassen</h3>
+<p>Folgende Klassen können benutzt werden, um den Stil des Elements zu bestimmen. Statt den Stil des Elements direkt zu ändern, sollten diese Klassen zu Hilfe genommen werden, da sie sich natürlicher in das vom Benutzer gewählte Theme der Benutzeroberfläche einfügen.</p>
+<dl>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/XUL/Style/plain">plain</a></code></dt>
+ <dd>This class causes the element to be displayed with no border or margin.</dd>
+</dl>
+<h3 id="Hinweise">Hinweise</h3>
+<p>Das <code>maxlength</code> Attribut funktioniert nicht, wenn man im Mehrzeilenmodus ist. Ein Workaround mittels JavaScript und dem <code>onkeypress</code> Eventhandler stellt eine Lösung dar.</p>
+<p>Das XUL script:</p>
+<pre class="brush: xml">&lt;textbox id="pnNote" multiline="true" rows="2" cols="70" onkeypress="return pnCountNoteChars(event);"/&gt;
+</pre>
+<p>Das Javascript:</p>
+<pre class="brush: js">function pnCountNoteChars(evt) {
+    //Erlaube Tasten, die keine Zeichen sind (Entfernen, Backspace etc.)
+    if ((evt.charCode == 0) &amp;&amp; (evt.keyCode != 13))
+      return true;
+
+    if(evt.target.value.length &lt; 10) {
+        return true;
+    } else {
+        return false;
+    }
+}</pre>
+<h3 id="Verwandte_Themen">Verwandte Themen</h3>
+<dl> <dt>Schnittstellen</dt> <dd><a href="/de/XPCOM_Interface_Referenz/nsIAccessibleProvider" title="de/XPCOM_Interface_Referenz/nsIAccessibleProvider">nsIAccessibleProvider</a>, <a href="/de/NsIDOMXULTextboxElement" title="de/NsIDOMXULTextboxElement">nsIDOMXULTextboxElement</a></dd>
+</dl>
diff --git a/files/de/archive/mozilla/xul/treecol/index.html b/files/de/archive/mozilla/xul/treecol/index.html
new file mode 100644
index 0000000000..dbfeb1c995
--- /dev/null
+++ b/files/de/archive/mozilla/xul/treecol/index.html
@@ -0,0 +1,262 @@
+---
+title: treecol
+slug: Archive/Mozilla/XUL/treecol
+tags:
+  - XUL Elemente
+  - XUL Referenz
+translation_of: Archive/Mozilla/XUL/treecol
+---
+<div class="noinclude"><span class="breadcrumbs XULRef_breadcrumbs">
+ « <a href="/de/docs/XUL_Referenz">XUL Referenz Startseite</a>    [
+ <a href="#Beispiele">Beispiele</a> |
+ <a href="#Attribute">Attribute</a> |
+ <a href="#Eigenschaften">Eigenschaften</a> |
+ <a href="#Methoden">Methoden</a> |
+ <a href="#Verwandte_Themen">Verwandte Themen</a> ]
+</span></div>
+<p>Eine Spalte eines <code><a href="/de/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code> Elementes. Dieses Element zeigt einen Spaltenkopf an und beinhaltet Informationen über Größe und andere Eingenschaften über die Spalte. Außerdem können <code><a href="/de/docs/Mozilla/Tech/XUL/splitter" title="splitter">splitter</a></code> Elemente zwischen den einzelnen Spalten gesetzt werden, um Veränderungen an der Spaltengröße zu erlauben. Es sollte immer ein <code id="a-id"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code> Attribut für ein <code>treecol</code> Element festgelegt werden, um sicher zu gehen, dass die Spaltenpositionierung richtig angewendet wird.</p>
+<p>Weitere Informationen finden sich im <a href="/de/XUL_Tutorial/Bäume" title="de/XUL_Tutorial/Bäume">XUL Tutorial</a>.</p>
+<dl> <dt>Attribute</dt> <dd><a href="#a-crop">crop</a>, <a href="#a-cycler">cycler</a>, <a href="#a-dragging">dragging</a>, <a href="#a-treecol.editable">editable</a>, <a href="#a-fixed">fixed</a>, <a href="#a-hidden">hidden</a>, <a href="#a-hideheader">hideheader</a>, <a href="#a-ignoreincolumnpicker">ignoreincolumnpicker</a>, <a href="#a-label">label</a>, <a href="#a-primary">primary</a>, <a href="#a-sort">sort</a>, <a href="#a-sortActive">sortActive</a>, <a href="#a-sortDirection">sortDirection</a>, <a href="#a-treecol.src">src</a>, <a href="#a-treecol.type">type</a>, <a href="#a-treecol.width">width</a></dd>
+</dl>
+<dl> <dt>Eigenschaften</dt> <dd><a href="#p-accessibleType">accessibleType</a></dd>
+</dl>
+<dl> <dt>Style Klassen</dt> <dd><a href="#s-treecol-image">treecol-image</a></dd>
+</dl>
+<h3 id="Beispiele">Beispiele</h3>
+<div class="float-right"><img alt="Image:Xul_tree_col_checked.png" class=" internal" src="/@api/deki/files/488/=Xul_tree_col_checked.png"></div>
+<p>Dieses Beispiel zeigt eine Checkbox in der ersten Spalte.</p>
+<pre>&lt;tree flex="1" editable="true"&gt;
+
+  &lt;treecols&gt;
+    &lt;treecol label="Active" type="checkbox" editable="true"/&gt;
+    &lt;treecol label="Name" flex="1" /&gt;
+  &lt;/treecols&gt;
+
+  &lt;treechildren&gt;
+    &lt;treeitem&gt;
+      &lt;treerow&gt;
+      	&lt;treecell value="true"/&gt;
+        &lt;treecell label="Alice"/&gt;
+      &lt;/treerow&gt;
+    &lt;/treeitem&gt;
+    &lt;treeitem&gt;
+      &lt;treerow&gt;
+        &lt;treecell value="false"/&gt;
+        &lt;treecell label="Bob"/&gt;
+      &lt;/treerow&gt;
+    &lt;/treeitem&gt;
+  &lt;/treechildren&gt;
+
+&lt;/tree&gt;
+</pre>
+<p>Um die Checkbox auf einigen Plattformen sichtbar zu machen, müssen die folgenden Angaben zum Stylesheet hinzugefügt werden (siehe <a href="/de/XUL/Attribute/treecol.type" title="de/XUL/Attribute/treecol.type">treecol.type</a>). Bei Firefox 2.x und 3.x, benutzen alle Betriebssysteme außer Mac OS X diese Angaben bereits als Standard. Um Firefox für Mac OS X mit einzubeziehen, sollten diese Angaben auf jeden Fall notiert werden und ein eigenes Checkbox-Bild verwendet werden. Für SeaMonkey auf Mac OS X <em>ist</em> das Bild <code><a class=" external" rel="freelink">chrome://global/skin/checkbox/cbox-check.gif</a></code> jedoch verfügbar.</p>
+<pre>treechildren::-moz-tree-checkbox {
+  /* nicht angewählte Baumzellen. Dieser Deklaration MUSS vor treechildren::-moz-tree-checkbox(checked) erfolgen, sonst führt es zu keinem Effekt.  */
+  list-style-image: none;
+}
+
+treechildren::-moz-tree-checkbox(checked){
+  /* css für angewählte Zellen. cbox-check.gif ist in Firefox 1, 2, und 3 auf Mac OS X nicht verfügbar, es sollte also eine URL auf ein Bild in der Erweiterung oder woanders festgelegt werden. */
+  list-style-image: url("chrome://global/skin/checkbox/cbox-check.gif");
+}
+</pre>
+<h3 id="Attribute">Attribute</h3>
+<p> </p><div id="a-crop">
+
+<dl>
+  <dt>
+    <code id="a-crop"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/crop">crop</a></code></dt>
+  <dd>
+    Type: <em>one of the values below</em></dd>
+  <dd>
+    If the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the <code>crop</code> attribute. An ellipsis will be used in place of the cropped text. If the box direction is reversed, the cropping is reversed.</dd>
+  <dd>
+    <dl>
+      <dt>
+        <code>start</code></dt>
+      <dd>
+        The text will be cropped on its left side in left-to-right text locales, and the right side in right-to-left locales.</dd>
+      <dt>
+        <code>end</code></dt>
+      <dd>
+        The text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales.</dd>
+      <dt>
+        <code>left</code></dt>
+      <dd>
+        <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> The text will be cropped on its left side.</dd>
+      <dt>
+        <code>right</code></dt>
+      <dd>
+        <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> The text will be cropped on its right side.</dd>
+      <dt>
+        <code>center</code></dt>
+      <dd>
+        The text will be cropped in the middle, showing both the start and end of the text normally.</dd>
+      <dt>
+        <code>none</code></dt>
+      <dd>
+        The text will be not be cropped using an ellipsis. However, the text will simply be cut off if it is too large. The side depends on the CSS text alignment.</dd>
+    </dl>
+  </dd>
+  <dd>
+    Depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. If you wish to use the value <code>none</code> and the displayed text is larger than this maximum width, you may be able to use the max-width CSS property (or the maxwidth attribute) to override this size. For example, for a menuitem in a menu you can add the following CSS rule when you want to use the value <code>none</code>:</dd>
+  <dd>
+    <pre class="eval">menupopup &gt; menuitem, menupopup &gt; menu { max-width: none; }
+</pre>
+  </dd>
+</dl>
+</div> <div id="a-cycler">
+
+
+<dl>
+ <dt><code id="a-cycler"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/cycler">cycler</a></code></dt>
+ <dd>Type: <em>boolean</em></dd>
+ <dd>If <code>true</code>, then the column is a cycler column. In the case, clicking on a cell in the column will alternate its state between on and off. This is used, for example, in a mail window, for a column that indicates that the message is read or unread with a small mark in the cell. If the cycler attribute is not set, the cell is a regular text cell.</dd>
+</dl>
+</div> <div id="a-dragging">
+
+
+<dl>
+ <dt><code id="a-dragging"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/dragging">dragging</a></code></dt>
+ <dd>Type: <em>boolean</em></dd>
+ <dd>This attribute will be set to <code>true</code> if the column is being dragged. This attribute is set automatically; you shouldn't adjust it yourself.</dd>
+</dl>
+</div> <div id="a-treecol.editable">
+
+
+<dl>
+ <dt><code id="a-treecol.editable"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/treecol.editable">editable</a></code></dt>
+ <dd>Type: <em>boolean</em></dd>
+ <dd>Allows the contents of cells in the column to be changed, especially useful when <code>type="checkbox"</code>. When the user double-clicks an editable cell, a text field appears in which the user can edit the contents of the cell.</dd>
+</dl>
+
+<dl>
+ <dd>The <code><a href="/en-US/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code> must also be <strong>marked as editable</strong> in order for this to work. Individual <code><a href="/en-US/docs/Mozilla/Tech/XUL/treecell" title="treecell">treecell</a></code> elements in the column may be marked <code>editable="false"</code> in order to disable editing.</dd>
+</dl>
+</div> <div id="a-fixed">
+
+
+<dl>
+ <dt><code id="a-fixed"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/fixed">fixed</a></code></dt>
+ <dd>Type: <em>boolean</em></dd>
+ <dd>If <code>true</code>, the size of the column in the tree cannot be adjusted by the user. Any <code><a href="/en-US/docs/Mozilla/Tech/XUL/splitter" title="splitter">splitter</a></code> to either side will resize those columns while keeping the fixed column at a constant size. If <code>false</code> or not specified, the user can adjust the size of the column, typically by dragging the column header with the mouse.</dd>
+</dl>
+</div> <div id="a-hidden">
+
+
+<dl>
+ <dt><code id="a-hidden"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/hidden">hidden</a></code></dt>
+ <dd>Type: <em>boolean</em></dd>
+ <dd>If set to true, the element is not displayed. This is similar to setting the CSS display property to 'none'.</dd>
+</dl>
+
+
+</div> <div id="a-hideheader">
+
+
+<dl>
+ <dt><code id="a-hideheader"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/hideheader">hideheader</a></code></dt>
+ <dd>Type: <em>boolean</em></dd>
+ <dd>Set this to <code>true</code> to indicate that the <a href="/en/XUL/treecol" title="en/XUL/treecol">tree column</a> header should be displayed without any column header styling. If you don't set a <code>label</code> for that column either, the header is not displayed at all.</dd>
+</dl>
+</div> <div id="a-ignoreincolumnpicker">
+
+
+<dl>
+ <dt><code id="a-ignoreincolumnpicker"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/ignoreincolumnpicker">ignoreincolumnpicker</a></code></dt>
+ <dd>Type: <em>boolean</em></dd>
+ <dd>If <code>true</code>, the column does not appear in the column picker.</dd>
+</dl>
+</div> <div id="a-label">
+
+<dl> <dt><code id="a-label"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></dt> <dd>Typ: <em>string</em></dd> <dd>Die Beschriftung für das Element. Wird das Attribut nicht angegeben, so erscheint auch kein Beschriftungstext.</dd>
+</dl>
+
+</div> <div id="a-primary">
+
+
+<dl>
+ <dt><code id="a-primary"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/primary">primary</a></code></dt>
+ <dd>Type: <em>boolean</em></dd>
+ <dd>If set to <code>true</code>, the <code><a href="/en-US/docs/Mozilla/Tech/XUL/treecol" title="treecol">treecol</a></code> will have indentation and twisties drawn to the left of it to indicate the hierarchy level of the rows. If no column has the primary attribute set to <code>true</code>, the <code><a href="/en-US/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code> may still contain nested rows, although no indication will be given to the user.  The attribute also controls whether the column picker allows the user to deselect this column.</dd>
+</dl>
+</div> <div id="a-sort">
+
+
+<dl>
+ <dt><code id="a-sort"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/sort">sort</a></code></dt>
+ <dd>Type: <em>URI or XML attribute</em></dd>
+ <dd>Set this to a RDF property or XML attribute to have the data in the column sorted based on that property. The property will usually be the same as that of the cell label.</dd>
+</dl>
+</div> <div id="a-sortActive">
+
+
+<dl>
+ <dt><code id="a-sortActive"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/sortActive">sortActive</a></code></dt>
+ <dd>Type: <em>boolean</em></dd>
+ <dd>This should be set to <code>true</code> for the column which should be sorted by default.</dd>
+</dl>
+</div> <div id="a-sortDirection">
+
+
+<dl>
+ <dt><code id="a-sortDirection"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/sortDirection">sortDirection</a></code></dt>
+ <dd>Type: <em>one of the values below</em></dd>
+ <dd>Set this attribute to set the direction that template-generated content is sorted. Use the <code id="a-sortResource"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/sortResource">sortResource</a></code> attribute to specify the sort key.
+ <dl>
+  <dt><code>ascending</code></dt>
+  <dd>The data is sorted in ascending order.</dd>
+  <dt><code>descending</code></dt>
+  <dd>The data is sorted in descending order.</dd>
+  <dt><code>natural</code></dt>
+  <dd>The data is sorted in natural order, which means the order that it is stored in.</dd>
+ </dl>
+ </dd>
+</dl>
+</div> <div id="a-treecol.src">
+
+<dl> <dt><code id="a-treecol.src"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/treecol.src">src</a></code></dt> <dd>Typ: <em>Bild-URL</em></dd> <dd>Um für das <code><a href="/de/docs/Mozilla/Tech/XUL/treecol" title="treecol">treecol</a></code> Element ein Bild für den Kopf, statt eines <code id="a-label"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> Attribut zu benutzen, kann dieses Attribut gesetzt werden. Im Kopf können nicht gleichzeitig Bild und Beschriftung angezeigt werden. Die URL eines Bildes, das als Spaltenkopf des Baums angezeigt wird, kann mit diesem Attribut festgelegt werden. Wird das Attribut nicht angegeben, erscheint kein Bild und es wird stattdessen die Beschriftung angezeigt. Damit das Bild erscheint, muss die Klasse <code><a href="https://developer.mozilla.org/de/docs/XUL/Style/treecol-image">treecol-image</a></code> für das <code><a href="/de/docs/Mozilla/Tech/XUL/treecol" title="treecol">treecol</a></code> Element gesetzt werden. Ein <code id="a-label"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> sollte dennoch für die Benutzung im Spaltenwähler angegeben werden, falls <code id="a-ignoreincolumnpicker"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/ignoreincolumnpicker">ignoreincolumnpicker</a></code> nicht <code>true</code> ist und <code id="a-hidecolumnpicker"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/hidecolumnpicker">hidecolumnpicker</a></code> für den <code><a href="/de/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code> ebenfalls nicht <code>true</code> ist .</dd>
+</dl>
+
+</div> <div id="a-treecol.type">
+
+
+<dl>
+ <dt><code id="a-treecol.type"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/treecol.type">type</a></code></dt>
+ <dd>Type: <em>one of the values below</em></dd>
+ <dd>The type of <a href="/en/XUL/treecol" title="en/XUL/treecol">tree column</a>. The default is a text column that displays the content as text.</dd>
+ <dd>
+ <dl>
+  <dt><code>checkbox</code></dt>
+  <dd>The content of the columns are checkboxes.</dd>
+  <dt><code>progressmeter</code></dt>
+  <dd>The content of the columns are a progress meters. This is used in Mozilla's download manager window.</dd>
+  <dt><code>text</code></dt>
+  <dd>The content of the columns is text.</dd>
+ </dl>
+ </dd>
+</dl>
+
+
+</div> <div id="a-treecol.width">
+
+
+<dl>
+ <dt><code id="a-treecol.width"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/treecol.width">width</a></code></dt>
+ <dd>Type: <em>string</em> (representing an integer)</dd>
+ <dd>The preferred width of the tree column. The value should not include a unit as all values are in pixels. Specifying widths for your columns causes Gecko to allow the tree to be scrolled horizontally if it is wider than the available space.</dd>
+</dl>
+</div>
+<h3 id="Eigenschaften">Eigenschaften</h3>
+<div id="p-accessibleType"></div> <table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Geerbte Eigenschaften</strong><br> <small> <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/align">align</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/allowEvents">allowEvents</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/boxObject">boxObject</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/builder">builder</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/className">className</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/collapsed">collapsed</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/contextMenu">contextMenu</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/controllers">controllers</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/database">database</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/datasources">datasources</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/dir">dir</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/flex">flex</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/height">height</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/hidden">hidden</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/id">id</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/left">left</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/maxHeight">maxHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/maxWidth">maxWidth</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/menu">menu</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/minHeight">minHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/minWidth">minWidth</a></span></code>, , , , , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/observes">observes</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/ordinal">ordinal</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/orient">orient</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/pack">pack</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/persist">persist</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/ref">ref</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/resource">resource</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/statusText">statusText</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/style">style</a></span></code>, ,, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/tooltip">tooltip</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/tooltipText">tooltipText</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/top">top</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/width">width</a></span></code></small></p> </td> </tr> </tbody>
+</table>
+<h3 id="Methoden">Methoden</h3>
+<table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Geerbte Methoden</strong><br> <small><code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.addEventListener">element.addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.appendChild">node.appendChild()</a></code>, <span id="m-blur"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/click">click</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.cloneNode">node.cloneNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.compareDocumentPosition">node.compareDocumentPosition()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.dispatchEvent">element.dispatchEvent()</a></code>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/focus">focus</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttribute">element.getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNode">element.getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNodeNS">element.getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNS">element.getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getBoundingClientRect">element.getBoundingClientRect()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getClientRects">element.getClientRects()</a></code>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/getElementsByAttribute">getElementsByAttribute</a></code></span>, <span id="m-getElementsByAttributeNS"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/getElementsByAttributeNS">getElementsByAttributeNS</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByClassName">element.getElementsByClassName()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByTagName">element.getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByTagNameNS">element.getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.getFeature">node.getFeature()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.getUserData">node.getUserData()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.hasAttribute">element.hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.hasAttributeNS">element.hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.nodes.hasAttributes">nodes.hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.nodes.hasChildNodes">nodes.hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.insertBefore">node.insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isDefaultNamespace">node.isDefaultNamespace()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isEqualNode">node.isEqualNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isSameNode">node.isSameNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isSupported">node.isSupported()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.lookupNamespaceURI">node.lookupNamespaceURI()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.lookupPrefix">node.lookupPrefix()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.normalize">node.normalize()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.querySelector">element.querySelector()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.querySelectorAll">element.querySelectorAll()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttribute">element.removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttributeNode">element.removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttributeNS">element.removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.removeChild">node.removeChild()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeEventListener">element.removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.replaceChild">node.replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttribute">element.setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNode">element.setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNodeNS">element.setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNS">element.setAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.setUserData">node.setUserData()</a></code></small></p> </td> </tr> </tbody>
+</table>
+<h3 id="Style_Klassen">Style Klassen</h3>
+<p>Die folgenden Style Klassen können verwendet werden, um das Aussehen des Elementes zu verändern. Diese Klasse sollte verwendet werden, anstatt das Aussehen des Elementes direkt zu verändern, damit es dann besser mit dem, vom Benutzer gewählten, Theme zusammenarbeiten kann.</p>
+<dl> <dt><code><a href="https://developer.mozilla.org/de/docs/XUL/Style/treecol-image">treecol-image</a></code></dt> <dd>Um ein Bild als Kopf der <a href="/de/XUL/treecol" title="de/XUL/treecol">Baumspalte</a> anzuzeigen, wird diese Klasse benutzt. Das Bild selbst wird über das Attribut <code id="a-src"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/src">src</a></code> angegeben.</dd>
+</dl>
+<h3 id="Verwandte_Themen">Verwandte Themen</h3>
+<dl> <dt>Elemente</dt> <dd><a href="/de/XUL/tree" title="de/XUL/tree">tree</a>, <a href="/de/XUL/treecols" title="de/XUL/treecols">treecols</a>, <a href="/de/XUL/treechildren" title="de/XUL/treechildren">treechildren</a>, <a href="/de/XUL/treeitem" title="de/XUL/treeitem">treeitem</a>, <a href="/de/XUL/treerow" title="de/XUL/treerow">treerow</a>, <a href="/de/XUL/treecell" title="de/XUL/treecell">treecell</a> und <a href="/de/XUL/treeseparator" title="de/XUL/treeseparator">treeseparator</a>.</dd> <dt>Schnittstellen</dt> <dd><a href="/de/XPCOM_Schnittstellen_Referenz/nsIAccessibleProvider" title="de/XPCOM_Schnittstellen_Referenz/nsIAccessibleProvider">nsIAccessibleProvider</a></dd>
+</dl>
diff --git a/files/de/archive/mozilla/xul/vbox/index.html b/files/de/archive/mozilla/xul/vbox/index.html
new file mode 100644
index 0000000000..d45736c02a
--- /dev/null
+++ b/files/de/archive/mozilla/xul/vbox/index.html
@@ -0,0 +1,100 @@
+---
+title: vbox
+slug: Archive/Mozilla/XUL/vbox
+tags:
+  - XUL Elemente
+  - XUL Referenz
+translation_of: Archive/Mozilla/XUL/vbox
+---
+<div class="noinclude">
+ <span class="breadcrumbs XULRef_breadcrumbs">
+ « <a href="/de/docs/XUL_Referenz">XUL Referenz Startseite</a>    [
+ <a href="#Beispiele">Beispiele</a> |
+ <a href="#Attribute">Attribute</a> |
+ <a href="#Eigenschaften">Eigenschaften</a> |
+ <a href="#Methoden">Methoden</a> |
+ <a href="#Verwandte_Themen">Verwandte Themen</a> ]
+</span></div>
+<p>Ein Behälterelement, das eine gewünschte Anzahl von Kindelementen enthalten kann. Gleichwertig zum Element <code><code><a href="/de/docs/Mozilla/Tech/XUL/box" title="box">box</a></code></code>, mit dem Unterschied, dass die Ausrichtung per Vorgabe vertikal ist.</p>
+<p>Mehr Information im <a href="/de/XUL_Tutorial/Das_Box-Modell">XUL Tutorial</a>.</p>
+<h3 id="Beispiel" name="Beispiel">Beispiel</h3>
+<pre>&lt;!-- Zwei Beschriftungen am unteren Rand --&gt;
+&lt;vbox&gt;
+  &lt;spacer flex="1"/&gt;
+  &lt;label value="Eins"/&gt;
+  &lt;label value="Zwei"/&gt;
+&lt;/vbox&gt;
+</pre>
+<h3 id="Attribute" name="Attribute">Attribute</h3>
+<table style="border: 1px solid rgb(204, 204, 204); margin: 0 0 10px 10px; padding: 0 10px; background: rgb(238, 238, 238);">
+<tbody>
+<tr>
+<td><p><strong>Geerbt von XUL-Element</strong><br> <small>
+<code id="a-align"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code>,
+<code id="a-allowevents"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/allowevents">allowevents</a></code>,
+<code id="a-allownegativeassertions"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/allownegativeassertions">allownegativeassertions</a></code>,
+<code id="a-class"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/class">class</a></code>,
+<code id="a-coalesceduplicatearcs"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/coalesceduplicatearcs">coalesceduplicatearcs</a></code>,
+<code id="a-collapsed"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/collapsed">collapsed</a></code>,
+<code id="a-container"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/container">container</a></code>,
+<code id="a-containment"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/containment">containment</a></code>,
+<code id="a-context"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/context">context</a></code>,
+<code id="a-contextmenu"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/contextmenu">contextmenu</a></code>,
+<code id="a-datasources"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/datasources">datasources</a></code>,
+<code id="a-dir"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code>,
+<code id="a-empty"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/empty">empty</a></code>,
+<code id="a-equalsize"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/equalsize">equalsize</a></code>,
+<code id="a-flags"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/flags">flags</a></code>,
+<code id="a-flex"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code>,
+<code id="a-height"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/height">height</a></code>,
+<code id="a-hidden"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/hidden">hidden</a></code>,
+<code id="a-id"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code>,
+<code id="a-insertafter"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/insertafter">insertafter</a></code>,
+<code id="a-insertbefore"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/insertbefore">insertbefore</a></code>,
+<code id="a-left"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/left">left</a></code>,
+<code id="a-maxheight"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/maxheight">maxheight</a></code>,
+<code id="a-maxwidth"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/maxwidth">maxwidth</a></code>,
+<code id="a-menu"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/menu">menu</a></code>,
+<code id="a-minheight"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/minheight">minheight</a></code>,
+<code id="a-minwidth"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/minwidth">minwidth</a></code>,
+<code id="a-mousethrough"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/mousethrough">mousethrough</a></code>,
+<code id="a-observes"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/observes">observes</a></code>,
+<code id="a-ordinal"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/ordinal">ordinal</a></code>,
+<code id="a-orient"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code>,
+<code id="a-pack"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code>,
+<code id="a-persist"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/persist">persist</a></code>,
+<code id="a-popup"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/popup">popup</a></code>,
+<code id="a-position"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/position">position</a></code>,
+<code id="a-preference-editable"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/preference-editable">preference-editable</a></code>,
+<code id="a-querytype"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/querytype">querytype</a></code>,
+<code id="a-ref"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/ref">ref</a></code>,
+<code id="a-removeelement"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/removeelement">removeelement</a></code>,
+<code id="a-sortDirection"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/sortDirection">sortDirection</a></code>,
+<code id="a-sortResource"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/sortResource">sortResource</a></code>,
+<code id="a-sortResource2"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/sortResource2">sortResource2</a></code>,
+<code id="a-statustext"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/statustext">statustext</a></code>,
+<code id="a-style"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/style">style</a></code>,
+<code id="a-template"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/template">template</a></code>,
+<code id="a-tooltip"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/tooltip">tooltip</a></code>,
+<code id="a-tooltiptext"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/tooltiptext">tooltiptext</a></code>,
+<code id="a-top"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/top">top</a></code>,
+<code id="a-uri"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/uri">uri</a></code>,
+<code id="a-wait-cursor"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/wait-cursor">wait-cursor</a></code>,
+<code id="a-width"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/width">width</a></code> </small></p>
+</td>
+</tr>
+</tbody>
+</table>
+<h3 id="Eigenschaften" name="Eigenschaften">Eigenschaften</h3>
+<table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Geerbte Eigenschaften</strong><br> <small> <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/align">align</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/allowEvents">allowEvents</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/boxObject">boxObject</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/builder">builder</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/className">className</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/collapsed">collapsed</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/contextMenu">contextMenu</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/controllers">controllers</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/database">database</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/datasources">datasources</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/dir">dir</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/flex">flex</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/height">height</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/hidden">hidden</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/id">id</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/left">left</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/maxHeight">maxHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/maxWidth">maxWidth</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/menu">menu</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/minHeight">minHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/minWidth">minWidth</a></span></code>, , , , , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/observes">observes</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/ordinal">ordinal</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/orient">orient</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/pack">pack</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/persist">persist</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/ref">ref</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/resource">resource</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/statusText">statusText</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/style">style</a></span></code>, ,, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/tooltip">tooltip</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/tooltipText">tooltipText</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/top">top</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/width">width</a></span></code></small></p> </td> </tr> </tbody>
+</table>
+<h3 id="Methoden" name="Methoden">Methoden</h3>
+<table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Geerbte Methoden</strong><br> <small><code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.addEventListener">element.addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.appendChild">node.appendChild()</a></code>, <span id="m-blur"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/click">click</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.cloneNode">node.cloneNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.compareDocumentPosition">node.compareDocumentPosition()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.dispatchEvent">element.dispatchEvent()</a></code>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/focus">focus</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttribute">element.getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNode">element.getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNodeNS">element.getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNS">element.getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getBoundingClientRect">element.getBoundingClientRect()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getClientRects">element.getClientRects()</a></code>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/getElementsByAttribute">getElementsByAttribute</a></code></span>, <span id="m-getElementsByAttributeNS"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/getElementsByAttributeNS">getElementsByAttributeNS</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByClassName">element.getElementsByClassName()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByTagName">element.getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByTagNameNS">element.getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.getFeature">node.getFeature()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.getUserData">node.getUserData()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.hasAttribute">element.hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.hasAttributeNS">element.hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.nodes.hasAttributes">nodes.hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.nodes.hasChildNodes">nodes.hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.insertBefore">node.insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isDefaultNamespace">node.isDefaultNamespace()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isEqualNode">node.isEqualNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isSameNode">node.isSameNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isSupported">node.isSupported()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.lookupNamespaceURI">node.lookupNamespaceURI()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.lookupPrefix">node.lookupPrefix()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.normalize">node.normalize()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.querySelector">element.querySelector()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.querySelectorAll">element.querySelectorAll()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttribute">element.removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttributeNode">element.removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttributeNS">element.removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.removeChild">node.removeChild()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeEventListener">element.removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.replaceChild">node.replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttribute">element.setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNode">element.setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNodeNS">element.setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNS">element.setAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.setUserData">node.setUserData()</a></code></small></p> </td> </tr> </tbody>
+</table>
+<h3 id="Verwandte_Themen" name="Verwandte_Themen">Verwandte Themen</h3>
+<dl>
+ <dt>
+  Elemente</dt>
+ <dd>
+  <code><a href="/de/docs/Mozilla/Tech/XUL/box" title="box">box</a></code>, <code><a href="/de/docs/Mozilla/Tech/XUL/hbox" title="hbox">hbox</a></code></dd>
+</dl>
diff --git a/files/de/archive/mozilla/xul/window/index.html b/files/de/archive/mozilla/xul/window/index.html
new file mode 100644
index 0000000000..8dfd0cb192
--- /dev/null
+++ b/files/de/archive/mozilla/xul/window/index.html
@@ -0,0 +1,209 @@
+---
+title: window
+slug: Archive/Mozilla/XUL/Window
+tags:
+  - XUL Elemente
+  - XUL Referenz
+translation_of: Archive/Mozilla/XUL/window
+---
+<div class="noinclude"><span class="breadcrumbs XULRef_breadcrumbs">
+ « <a href="/de/docs/XUL_Referenz">XUL Referenz Startseite</a>    [
+ <a href="#Beispiele">Beispiele</a> |
+ <a href="#Attribute">Attribute</a> |
+ <a href="#Eigenschaften">Eigenschaften</a> |
+ <a href="#Methoden">Methoden</a> |
+ <a href="#Verwandte_Themen">Verwandte Themen</a> ]
+</span></div>
+<p>Beschreibt die Struktur eines Fensters. Dieses Element ist der Wurzelknoten eines XUL Dokuments. Das Fenster ist standardmäßig eine horizontal ausgerichtete Box und daher können alle <a href="/De/XUL/Box" title="De/XUL/Box">box</a> Attribute verwendet werden. Per Voreinstellung liegt um das Fenster ein plattform-spezifischer Rahmen.</p>
+<p>Um ein Icon für das Fenster festzulegen, muss eine plattform-spezifische Icon-Datei <var>&lt;windowid&gt;</var><code>.ico</code> und/oder <var>&lt;windowid&gt;</var><code>.xpm</code> erstellt und in das <var>&lt;mozilla-verzeichnis&gt;</var><code>/chrome/icons/default/</code> Verzeichnis platziert oder installiert werden. Die <var>&lt;windowid&gt;</var> ist der Wert des id Attributs des Fensters. Dadurch wird für jedes Fenster ein unterschiedliches Icon ermöglicht.</p>
+<p>Ohne die CSS Datei unter "<a class=" external" rel="freelink">chrome://global/skin/</a>" einzubinden, wird das Fenster nicht durch CSS formatiert, unsichtbar und funktioniert nicht einwandfrei, wenn es als Dialog geöffnet wird.</p>
+<p>Weitere Informationen sind im <a href="/de/XUL_Tutorial/Ein_Fenster_erzeugen" title="de/XUL_Tutorial/Ein_Fenster_erzeugen">XUL Tutorial</a> verfügbar.</p>
+<dl> <dt>Attribute</dt> <dd><a href="#a-accelerated">accelerated</a>, <a href="#a-drawintitlebar">drawintitlebar</a>, <a href="#a-height">height</a>, <a href="#a-hidechrome">hidechrome</a>, <a href="#a-id">id</a>, <a href="#a-lightweightthemes">lightweightthemes</a>, <a href="#a-lightweightthemesfooter">lightweightthemesfooter</a>, <a href="#a-screenX">screenX</a>, <a href="#a-screenY">screenY</a>, <a href="#a-sizemode">sizemode</a>, <a href="#a-title">title</a>, <a href="#a-width">width</a>, <a href="#a-windowtype">windowtype</a></dd>
+</dl>
+<h3 id="Beispiele">Beispiele</h3>
+<pre>&lt;?xml version="1.0"?&gt;
+&lt;?xml-stylesheet href="chrome://global/skin/" type="text/css"?&gt;
+&lt;!-- Extremely recommended to keep this css include!! --&gt;
+&lt;window id="rootWnd" title="Register Online!"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
+  &lt;vbox&gt;
+    &lt;hbox&gt;
+      &lt;image src="application_form.png"/&gt;
+      &lt;description&gt;Register Online!&lt;/description&gt;
+    &lt;/hbox&gt;
+    &lt;groupbox align="start"&gt;
+      &lt;caption label="Your Information"/&gt;
+      &lt;radiogroup&gt;
+        &lt;vbox&gt;
+          &lt;hbox&gt;
+            &lt;label control="your-fname" value="Enter first name:"/&gt;
+            &lt;textbox id="your-fname" value="Johan"/&gt;
+          &lt;/hbox&gt;
+          &lt;hbox&gt;
+            &lt;label control="your-lname" value="Enter last name:"/&gt;
+            &lt;textbox id="your-lname" value="Hernandez"/&gt;
+          &lt;/hbox&gt;
+          &lt;hbox&gt;
+            &lt;button oncommand="alert('save!')"&gt;
+              &lt;description&gt;Save&lt;/description&gt;
+            &lt;/button&gt;
+          &lt;/hbox&gt;
+        &lt;/vbox&gt;
+      &lt;/radiogroup&gt;
+    &lt;/groupbox&gt;
+  &lt;/vbox&gt;
+&lt;/window&gt;
+</pre>
+<h3 id="Attribute">Attribute</h3>
+<p> </p><div id="a-accelerated">
+<dl><dt><code id="a-accelerated"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/accelerated">accelerated</a></code> </dt><dd>Type: <em>boolean</em></dd><dd>Set this attribute to <code>true</code> to allow hardware layer managers to accelerate the window.</dd></dl>
+</div> <div id="a-activetitlebarcolor">
+
+<dl> <dt><code id="a-activetitlebarcolor"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/activetitlebarcolor">activetitlebarcolor</a></code> </dt> <dd>Typ: <em>color string</em></dd> <dd>Bestimmt die Hintergrundfarbe der Titelleiste eines Fensters, wenn es aktiv ist (Vordergrund). Außerdem versteckt dies die Trennlinie zwischen Titelleiste und Fensterinhalt. Dies trifft nur auf Mac OS Systeme zu.</dd>
+</dl>
+
+</div> <div id="a-drawintitlebar">
+
+<dl> <dt><code id="a-drawintitlebar"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/drawintitlebar">drawintitlebar</a></code> </dt> <dd>Type: <em>boolean</em></dd> <dd>If this attribute is <code>true</code>, the top of the window's content area will begin at the top edge of the title bar, instead of below the title bar. This allows the window to draw in the title bar. This is supported only from <code><a href="/en-US/docs/Mozilla/Tech/XUL/window" title="window">window</a></code> elements, and is ignored on platforms that don't support drawing into the title bar.</dd>
+</dl>
+</div> <div id="a-height">
+
+
+<dl>
+ <dt><code id="a-height"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/height">height</a></code></dt>
+ <dd>Type: <em>string</em> (representing an integer)</dd>
+ <dd>The preferred height of the element in pixels. The actual displayed height may be different if the element or its contents have a minimum or maximum height. The CSS height property may also be used.</dd>
+</dl>
+</div> <div id="a-hidechrome">
+
+
+<dl>
+ <dt><code id="a-hidechrome"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/hidechrome">hidechrome</a></code></dt>
+ <dd>Type: <em>boolean</em></dd>
+ <dd>Set this attribute to <code>true</code> to have the chrome including the titlebar hidden.</dd>
+</dl>
+</div> <div id="a-id">
+
+
+<dl>
+ <dt><code id="a-id"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></dt>
+ <dd>Type: <em>unique id</em></dd>
+ <dd>A unique identifier so that you can identify the element with. You can use this as a parameter to <code><a href="/en-US/docs/DOM/document.getElementById" title="/en-US/docs/DOM/document.getElementById">getElementById()</a></code> and other DOM functions and to reference the element in style sheets.</dd>
+</dl>
+
+
+</div> <div id="a-inactivetitlebarcolor">
+
+
+<dl>
+ <dt><code id="a-inactivetitlebarcolor"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/inactivetitlebarcolor">inactivetitlebarcolor</a></code> </dt>
+ <dd>Type: <em>color string</em></dd>
+ <dd>Specify background color of the window's titlebar when it is inactive (background). Moreover this hides separator between titlebar and window contents. <em>This affects only on Mac OS X.</em></dd>
+</dl>
+</div> <div id="a-lightweightthemes">
+
+<dl> <dt><code id="a-lightweightthemes"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/lightweightthemes">lightweightthemes</a></code> </dt> <dd>Type: <em>boolean</em></dd> <dd><code>true</code> if the window supports <a href="/en/Themes/Lightweight_themes" title="en/Themes/Lightweight themes">lightweight themes</a>, otherwise <code>false</code>.</dd>
+</dl>
+</div> <div id="a-lightweightthemesfooter">
+
+<dl> <dt><code id="a-lightweightthemesfooter"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/lightweightthemesfooter">lightweightthemesfooter</a></code> </dt> <dd>Type: <em>id</em></dd> <dd>Specifies the ID of an element to which a <a href="/en/Themes/Lightweight_themes" title="en/Themes/Lightweight themes">lightweight theme</a>'s footer image will be applied.</dd>
+</dl>
+</div> <div id="a-screenX">
+
+
+<dl>
+ <dt><code id="a-screenX"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/screenX">screenX</a></code></dt>
+ <dd>Type: <em>integer</em></dd>
+ <dd>The horizontal position at which the window appears on the screen.</dd>
+</dl>
+</div> <div id="a-screenY">
+
+
+<dl>
+ <dt><code id="a-screenY"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/screenY">screenY</a></code></dt>
+ <dd>Type: <em>integer</em></dd>
+ <dd>The vertical position at which the window appears on the screen.</dd>
+</dl>
+</div> <div id="a-sizemode">
+
+
+<dl>
+ <dt><code id="a-sizemode"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/sizemode">sizemode</a></code></dt>
+ <dd>Type: <em>one of the values below</em></dd>
+ <dd>The state of the <code><a href="/en-US/docs/Mozilla/Tech/XUL/window" title="window">window</a></code>. It can have one of the following values:</dd>
+ <dd>
+ <dl>
+  <dt><code>maximized</code></dt>
+  <dd>The window is maximized, and occupies the full size of the screen.</dd>
+  <dt><code>normal</code></dt>
+  <dd>The window appears in a normal state at the desired size.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<p>This attribute is used to save and restore the state of a window (together with the <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/persist">persist</a></span></code> attribute) and for CSS styles (e.g. to hide the resizer grippy on maximized windows).</p>
+
+<div class="note"><strong>Note:</strong> When a window is minimized, the <code>sizemode</code> attribute is not updated. This is done so that if a window is closed while minimized, its persisted <code>sizemode</code> attribute wouldn't be <code>minimized</code>.</div>
+
+<p>Setting this attribute does not change the window state. Use <a href="/en-US/docs/Web/API/Window/maximize" title="The documentation about this has not yet been written; please consider contributing!"><code>window.maximize()</code></a>, <a href="/en-US/docs/Web/API/Window/restore" title="This method is currently not working, but you can use:"><code>window.restore()</code></a>, or <a href="/en-US/docs/Web/API/Window/minimize" title="The Window.minimize() method sets the window to a minimized state."><code>window.minimize()</code></a> to change the window state.</p>
+
+<p>To get the window state from JavaScript code, use <a href="/en-US/docs/Web/API/Window/windowState" title="The windowState read-only property of the Window interface returns the window's current state."><code>window.windowState</code></a>. Listen to the <a href="/en/XUL/Events#Window_events" title="en/XUL/Events#Window_events"><code>sizemodechange</code> event</a> dispatched to the DOM window to get notified when the window state changes.</p>
+
+
+</div> <div id="a-title">
+
+
+<dl>
+ <dt><code id="a-title"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/title">title</a></code></dt>
+ <dd>Type: <em>string</em></dd>
+ <dd>The text to appear in the title bar of the window.</dd>
+</dl>
+</div> <div id="a-width">
+
+
+<dl>
+ <dt><code id="a-width"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/width">width</a></code></dt>
+ <dd>Type: <em>string</em> (representing an integer)</dd>
+ <dd>The preferred width of the element. The value should not include a unit as all values are in pixels. The actual displayed width may be different if the element or its contents have a minimum or maximum width, or the size is adjusted by the flexibility or alignment of its parent. The CSS width property may also be used.</dd>
+</dl>
+
+
+</div> <div id="a-windowtype">
+
+<dl>
+ <dt>
+  <code id="a-windowtype"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/windowtype">windowtype</a></code></dt>
+ <dd>
+  Type: <em>string</em></dd>
+ <dd>
+  Set to a string which can be used to identify the type of window. This might be used, for example, to distinguish between a browser window and an editor window. Some of Mozilla's window handling functions use this attribute to group windows of the same type together.</dd>
+</dl>
+<div class="note">
+ <p>Values for window type as found on MXR: <a href="http://mxr.mozilla.org/mozilla-release/search?string=windowtype">http://mxr.mozilla.org/mozilla-release/search?string=windowtype</a></p>
+ <p><strong>navigator:browser </strong>- Looks like if window has gBrowser it has this window type</p>
+ <p><strong>devtools:scratchpad </strong>- Scratchpad windows</p>
+ <p><strong>navigator:view-source</strong> - The view source windows</p>
+</div>
+
+<p> </p>
+</div>
+<h3 id="Eigenschaften">Eigenschaften</h3>
+<table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Geerbte Eigenschaften</strong><br> <small> <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/align">align</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/allowEvents">allowEvents</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/boxObject">boxObject</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/builder">builder</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/className">className</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/collapsed">collapsed</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/contextMenu">contextMenu</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/controllers">controllers</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/database">database</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/datasources">datasources</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/dir">dir</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/flex">flex</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/height">height</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/hidden">hidden</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/id">id</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/left">left</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/maxHeight">maxHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/maxWidth">maxWidth</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/menu">menu</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/minHeight">minHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/minWidth">minWidth</a></span></code>, , , , , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/observes">observes</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/ordinal">ordinal</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/orient">orient</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/pack">pack</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/persist">persist</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/ref">ref</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/resource">resource</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/statusText">statusText</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/style">style</a></span></code>, ,, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/tooltip">tooltip</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/tooltipText">tooltipText</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/top">top</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/width">width</a></span></code></small></p> </td> </tr> </tbody>
+</table>
+<h3 id="Methoden">Methoden</h3>
+<table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Geerbte Methoden</strong><br> <small><code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.addEventListener">element.addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.appendChild">node.appendChild()</a></code>, <span id="m-blur"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/click">click</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.cloneNode">node.cloneNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.compareDocumentPosition">node.compareDocumentPosition()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.dispatchEvent">element.dispatchEvent()</a></code>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/focus">focus</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttribute">element.getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNode">element.getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNodeNS">element.getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNS">element.getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getBoundingClientRect">element.getBoundingClientRect()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getClientRects">element.getClientRects()</a></code>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/getElementsByAttribute">getElementsByAttribute</a></code></span>, <span id="m-getElementsByAttributeNS"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/getElementsByAttributeNS">getElementsByAttributeNS</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByClassName">element.getElementsByClassName()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByTagName">element.getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByTagNameNS">element.getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.getFeature">node.getFeature()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.getUserData">node.getUserData()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.hasAttribute">element.hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.hasAttributeNS">element.hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.nodes.hasAttributes">nodes.hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.nodes.hasChildNodes">nodes.hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.insertBefore">node.insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isDefaultNamespace">node.isDefaultNamespace()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isEqualNode">node.isEqualNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isSameNode">node.isSameNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isSupported">node.isSupported()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.lookupNamespaceURI">node.lookupNamespaceURI()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.lookupPrefix">node.lookupPrefix()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.normalize">node.normalize()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.querySelector">element.querySelector()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.querySelectorAll">element.querySelectorAll()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttribute">element.removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttributeNode">element.removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttributeNS">element.removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.removeChild">node.removeChild()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeEventListener">element.removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.replaceChild">node.replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttribute">element.setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNode">element.setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNodeNS">element.setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNS">element.setAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.setUserData">node.setUserData()</a></code></small></p> </td> </tr> </tbody>
+</table>
+<h3 id="Hinweise">Hinweise</h3>
+<p>Die Fehlermeldung "<em>XML Parsing Error: undefined entity...&lt;window</em>" kann durch eine fehlende oder nicht erreichbare DTD Datei, die in der XUL Datei angegeben wurde, verursacht werden. Ein Dateiname mit einem SYSTEM Schlüsselwort in einer DOCTYPE Deklaration kann unter Umständen auch nicht geladen werden, ohne dass eine solche Fehlermeldung ausgegeben wird. In diesem Fall kann die Fehlermeldung ein nicht definierter Entity Fehler am nächsten XUL Element sein.</p>
+<h3 id="Verwandte_Themen">Verwandte Themen</h3>
+<dl> <dt>Elemente</dt> <dd><code><a href="/de/docs/Mozilla/Tech/XUL/prefwindow" title="prefwindow">prefwindow</a></code>, <code><a href="/de/docs/Mozilla/Tech/XUL/dialog" title="dialog">dialog</a></code>, <code><a href="/de/docs/Mozilla/Tech/XUL/dialogheader" title="dialogheader">dialogheader</a></code></dd>
+</dl>
+<dl><a href="/de/Fenster_in_Chrome" title="de/Fenster_in_Chrome">Fenster in Chrome</a></dl> <h4 id="Benutzerhinweise">Benutzerhinweise</h4> <p>Um das Icon der Fenstertitelleiste zu ändern siehe: <a href="/de/Fenster_Icons" title="de/Fenster_Icons">Fenster Icons</a>.</p> <p>Um ein Favicon zur Adressleiste und zum Tab hinzufügen, kann der folgende Codeschnipsel verwendet werden.</p> <pre>&lt;window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+	xmlns:html="http://www.w3.org/1999/xhtml"&gt;
+
+&lt;!-- Icon from chrome --&gt;
+&lt;html:link rel="icon" href="chrome://myExtension/content/path/to/favicon.png"/&gt;
+
+&lt;!-- From a remote site --&gt;
+&lt;html:link rel="icon" href="http://www.mozilla.org/favicon.ico"/&gt;
+</pre>
diff --git a/files/de/archive/mozilla/xul/xul_referenz/index.html b/files/de/archive/mozilla/xul/xul_referenz/index.html
new file mode 100644
index 0000000000..b92aa1361e
--- /dev/null
+++ b/files/de/archive/mozilla/xul/xul_referenz/index.html
@@ -0,0 +1,15 @@
+---
+title: XUL Referenz
+slug: Archive/Mozilla/XUL/XUL_Referenz
+tags:
+  - XUL
+  - XUL Referenz
+translation_of: Archive/Mozilla/XUL/XUL_Reference
+---
+<p>« <a href="/de/docs/XUL" title="de/XUL">XUL Referenz</a> «</p>
+<h2 id="Alphabetische_Liste_aller_XUL_Elemente">Alphabetische Liste aller XUL Elemente</h2>
+<ol style="list-style-type: square;"> <li><a href="/de/XUL/action" title="de/XUL/action">action</a></li> <li><a href="/De/XUL/Arrowscrollbox" title="de/XUL/arrowscrollbox">arrowscrollbox</a></li> <li><a href="/De/XUL/Assign" title="de/XUL/assign">assign</a></li> <li><a href="/De/XUL/Bbox" title="de/XUL/bbox">bbox</a></li> <li><a href="/De/XUL/Binding" title="de/XUL/binding">binding</a></li> <li><a href="/de/XUL/bindings" title="de/XUL/bindings">bindings</a></li> <li><a href="/De/XUL/Box" title="de/XUL/box">box</a></li> <li><a href="/de/XUL/broadcaster" title="de/XUL/broadcaster">broadcaster</a></li> <li><a href="/de/XUL/broadcasterset" title="de/XUL/broadcasterset">broadcasterset</a></li> <li><a href="/de/XUL/button" title="de/XUL/button">button</a></li> <li><a href="/de/XUL/browser" title="de/XUL/browser">browser</a></li> <li><a href="/de/XUL/checkbox" title="de/XUL/checkbox">checkbox</a></li> <li><a href="/de/XUL/caption" title="de/XUL/caption">caption</a></li> <li><a href="/De/XUL/Colorpicker" title="de/XUL/colorpicker">colorpicker</a></li> <li><a href="/de/XUL/column" title="de/XUL/column">column</a></li> <li><a href="/de/XUL/columns" title="de/XUL/columns">columns</a></li> <li><a href="/de/XUL/commandset" title="de/XUL/commandset">commandset</a></li> <li><a href="/de/XUL/command" title="de/XUL/command">command</a></li> <li><a href="/de/XUL/conditions" title="de/XUL/conditions">conditions</a></li> <li><a href="/de/XUL/content" title="de/XUL/content">content</a></li> <li><a href="/de/XUL/datepicker" title="de/XUL/datepicker">datepicker</a></li> <li><a href="/de/XUL/deck" title="de/XUL/deck">deck</a></li> <li><a href="/de/XUL/description" title="de/XUL/description">description</a></li> <li><a href="/de/XUL/dialog" title="de/XUL/dialog">dialog</a></li> <li><a href="/de/XUL/dialogheader" title="de/XUL/dialogheader">dialogheader</a></li> <li><a href="/de/XUL/dropmarker" title="de/XUL/dropmarker">dropmarker</a></li> <li><a href="/de/XUL/editor" title="de/XUL/editor">editor</a></li> <li><a href="/de/XUL/grid" title="de/XUL/grid">grid</a></li> <li><a href="/de/XUL/grippy" title="de/XUL/grippy">grippy</a></li> <li><a href="/de/XUL/groupbox" title="de/XUL/groupbox">groupbox</a></li> <li><a href="/de/XUL/hbox" title="de/XUL/hbox">hbox</a></li> <li><a href="/de/XUL/iframe" title="de/XUL/iframe">iframe</a></li> <li><a href="/de/XUL/image" title="de/XUL/image">image</a></li> <li><a href="/de/XUL/key" title="de/XUL/key">key</a></li> <li><a href="/de/XUL/keyset" title="de/XUL/keyset">keyset</a></li> <li><a href="/de/XUL/label" title="de/XUL/label">label</a></li> <li><a href="/de/XUL/listbox" title="de/XUL/listbox">listbox</a></li> <li><a href="/de/XUL/listcell" title="de/XUL/listcell">listcell</a></li> <li><a href="/de/XUL/listcol" title="de/XUL/listcol">listcol</a></li> <li><a href="/de/XUL/listcols" title="de/XUL/listcols">listcols</a></li> <li><a href="/de/XUL/listhead" title="de/XUL/listhead">listhead</a></li> <li><a href="/de/XUL/listheader" title="de/XUL/listheader">listheader</a></li> <li><a href="/de/XUL/listitem" title="de/XUL/listitem">listitem</a></li> <li><a href="/de/XUL/member" title="de/XUL/member">member</a></li> <li><a href="/de/XUL/menu" title="de/XUL/menu">menu</a></li> <li><a href="/de/XUL/menubar" title="de/XUL/menubar">menubar</a></li> <li><a href="/de/XUL/menuitem" title="de/XUL/menuitem">menuitem</a></li> <li><a href="/de/XUL/menulist" title="de/XUL/menulist">menulist</a></li> <li><a href="/de/XUL/menupopup" title="de/XUL/menupopup">menupopup</a></li> <li><a href="/de/XUL/menuseparator" title="de/XUL/menuseparator">menuseparator</a></li> <li><a href="/de/XUL/notification" title="de/XUL/notification">notification</a></li> <li><a href="/de/XUL/notificationbox" title="de/XUL/notificationbox">notificationbox</a></li> <li><a href="/de/XUL/observes" title="de/XUL/observes">observes</a></li> <li><a href="/de/XUL/overlay" title="de/XUL/overlay">overlay</a></li> <li><a href="/de/XUL/page" title="de/XUL/page">page</a></li> <li><a href="/de/XUL/panel" title="de/XUL/panel">panel</a></li> <li><a href="/de/XUL/param" title="de/XUL/param">param</a></li> <li><a href="/de/XUL/popupset" title="de/XUL/popupset">popupset</a></li> <li><a href="/de/XUL/preference" title="de/XUL/preference">preference</a></li> <li><a href="/de/XUL/preferences" title="de/XUL/preferences">preferences</a></li> <li><a href="/de/XUL/prefpane" title="de/XUL/prefpane">prefpane</a></li> <li><a href="/de/XUL/prefwindow" title="de/XUL/prefwindow">prefwindow</a></li> <li><a href="/de/XUL/progressmeter" title="de/XUL/progressmeter">progressmeter</a></li> <li><a href="/de/XUL/query" title="de/XUL/query">query</a></li> <li><a href="/de/XUL/queryset" title="de/XUL/queryset">queryset</a></li> <li><a href="/de/XUL/radio" title="de/XUL/radio">radio</a></li> <li><a href="/de/XUL/radiogroup" title="de/XUL/radiogroup">radiogroup</a></li> <li><a href="/de/XUL/resizer" title="de/XUL/resizer">resizer</a></li> <li><a href="/de/XUL/richlistbox" title="de/XUL/richlistbox">richlistbox</a></li> <li><a href="/de/XUL/richlistitem" title="de/XUL/richlistitem">richlistitem</a></li> <li><a href="/de/XUL/row" title="de/XUL/row">row</a></li> <li><a href="/de/XUL/rows" title="de/XUL/rows">rows</a></li> <li><a href="/de/XUL/rule" title="de/XUL/rule">rule</a></li> <li><a href="/de/XUL/scale" title="de/XUL/scale">scale</a></li> <li><a href="/de/XUL/script" title="de/XUL/script">script</a></li> <li><a href="/de/XUL/scrollbar" title="de/XUL/scrollbar">scrollbar</a></li> <li><a href="/de/XUL/scrollbox" title="de/XUL/scrollbox">scrollbox</a></li> <li><a href="/de/XUL/scrollcorner" title="de/XUL/scrollcorner">scrollcorner</a></li> <li><a href="/de/XUL/separator" title="de/XUL/separator">separator</a></li> <li><a href="/de/XUL/spacer" title="de/XUL/spacer">spacer</a></li> <li><a href="/de/XUL/spinbuttons" title="de/XUL/spinbuttons">spinbuttons</a></li> <li><a href="/de/XUL/splitter" title="de/XUL/splitter">splitter</a></li> <li><a href="/de/XUL/stack" title="de/XUL/stack">stack</a></li> <li><a href="/de/XUL/statusbar" title="de/XUL/statusbar">statusbar</a></li> <li><a href="/de/XUL/statusbarpanel" title="de/XUL/statusbarpanel">statusbarpanel</a></li> <li><a href="/de/XUL/stringbundle" title="de/XUL/stringbundle">stringbundle</a></li> <li><a href="/de/XUL/stringbundleset" title="de/XUL/stringbundleset">stringbundleset</a></li> <li><a href="/de/XUL/tab" title="de/XUL/tab">tab</a></li> <li><a href="/de/XUL/tabbrowser" title="de/XUL/tabbrowser">tabbrowser</a> (Firefox-only ab Firefox 3/Gecko 1.9)</li> <li><a href="/de/XUL/tabbox" title="de/XUL/tabbox">tabbox</a></li> <li><a href="/de/XUL/tabpanel" title="de/XUL/tabpanel">tabpanel</a></li> <li><a href="/de/XUL/tabpanels" title="de/XUL/tabpanels">tabpanels</a></li> <li><a href="/de/XUL/tabs" title="de/XUL/tabs">tabs</a></li> <li><a href="/de/XUL/template" title="de/XUL/template">template</a></li> <li><a href="/de/XUL/textnode" title="de/XUL/textnode">textnode</a></li> <li><a href="/De/XUL/Textbox" title="de/XUL/textbox">textbox</a></li> <li><a href="/de/XUL/Textbox_(Toolkit_autocomplete)" title="de/XUL/textbox_(Firefox_autocomplete)">textbox (Firefox autocomplete)</a></li> <li><a href="/de/XUL/Textbox_(XPFE_autocomplete)" title="de/XUL/textbox_(Mozilla_autocomplete)">textbox (Mozilla autocomplete)</a></li> <li><a href="/de/XUL/timepicker" title="de/XUL/timepicker">timepicker</a></li> <li><a href="/de/XUL/titlebar" title="de/XUL/titlebar">titlebar</a></li> <li><a href="/de/XUL/toolbar" title="de/XUL/toolbar">toolbar</a></li> <li><a href="/de/XUL/toolbarbutton" title="de/XUL/toolbarbutton">toolbarbutton</a></li> <li><a href="/de/XUL/toolbargrippy" title="de/XUL/toolbargrippy">toolbargrippy</a></li> <li><a href="/de/XUL/toolbaritem" title="de/XUL/toolbaritem">toolbaritem</a></li> <li><a href="/de/XUL/toolbarpalette" title="de/XUL/toolbarpalette">toolbarpalette</a></li> <li><a href="/de/XUL/toolbarseparator" title="de/XUL/toolbarseparator">toolbarseparator</a></li> <li><a href="/de/XUL/toolbarset" title="de/XUL/toolbarset">toolbarset</a></li> <li><a href="/de/XUL/toolbarspacer" title="de/XUL/toolbarspacer">toolbarspacer</a></li> <li><a href="/de/XUL/toolbarspring" title="de/XUL/toolbarspring">toolbarspring</a></li> <li><a href="/de/XUL/toolbox" title="de/XUL/toolbox">toolbox</a></li> <li><a href="/de/XUL/tooltip" title="de/XUL/tooltip">tooltip</a></li> <li><a href="/de/XUL/tree" title="de/XUL/tree">tree</a></li> <li><a href="/de/XUL/treecell" title="de/XUL/treecell">treecell</a></li> <li><a href="/de/XUL/treechildren" title="de/XUL/treechildren">treechildren</a></li> <li><a href="/de/XUL/treecol" title="de/XUL/treecol">treecol</a></li> <li><a href="/de/XUL/treecols" title="de/XUL/treecols">treecols</a></li> <li><a href="/de/XUL/treeitem" title="de/XUL/treeitem">treeitem</a></li> <li><a href="/de/XUL/treerow" title="de/XUL/treerow">treerow</a></li> <li><a href="/de/XUL/treeseparator" title="de/XUL/treeseparator">treeseparator</a></li> <li><a href="/de/XUL/triple" title="de/XUL/triple">triple</a></li> <li><a href="/de/XUL/vbox" title="de/XUL/vbox">vbox</a></li> <li><a href="/de/XUL/where" title="de/XUL/where">where</a></li> <li><a href="/De/XUL/Window" title="de/XUL/window">window</a></li> <li><a href="/de/XUL/wizard" title="de/XUL/wizard">wizard</a></li> <li><a href="/de/XUL/wizardpage" title="de/XUL/wizardpage">wizardpage</a></li>
+</ol>
+<h2 id="Kategorische_Liste_aller_XUL_Elemente">Kategorische Liste aller XUL Elemente</h2>
+<p>« <a href="/de/docs/XUL" title="de/XUL">XUL Referenz</a> «</p>
+<ol style="list-style-type: square;"> <h3 id="Fenster">Fenster</h3> <ol style="list-style-type: square;"> <li><a href="/de/XUL/dialog" title="de/XUL/dialog">dialog</a></li> <li><a href="/de/XUL/overlay" title="de/XUL/overlay">overlay</a></li> <li><a href="/de/XUL/page" title="de/XUL/page">page</a></li> <li><a href="/De/XUL/Window" title="de/XUL/window">window</a></li> <li><a href="/de/XUL/wizard" title="de/XUL/wizard">wizard</a></li> <li><a href="/de/XUL/wizardpage" title="de/XUL/wizardpage">wizardpage</a></li> <li><a href="/de/XUL/preference" title="de/XUL/preference">preference</a></li> <li><a href="/de/XUL/preferences" title="de/XUL/preferences">preferences</a></li> <li><a href="/de/XUL/prefpane" title="de/XUL/prefpane">prefpane</a></li> <li><a href="/de/XUL/prefwindow" title="de/XUL/prefwindow">prefwindow</a></li> </ol> <h3 id="Fensterstrukturen">Fensterstrukturen</h3> <ol style="list-style-type: square;"> <li><a href="/de/XUL/browser" title="de/XUL/browser">browser</a></li> <li><a href="/de/XUL/tabbrowser" title="de/XUL/tabbrowser">tabbrowser</a></li> <li><a href="/de/XUL/editor" title="de/XUL/editor">editor</a></li> <li><a href="/de/XUL/iframe" title="de/XUL/iframe">iframe</a></li> <li><a href="/de/XUL/titlebar" title="de/XUL/titlebar">titlebar</a></li> <li><a href="/de/XUL/resizer" title="de/XUL/resizer">resizer</a></li> <li><a href="/de/XUL/statusbar" title="de/XUL/statusbar">statusbar</a></li> <li><a href="/de/XUL/statusbarpanel" title="de/XUL/statusbarpanel">statusbarpanel</a></li> <li><a href="/de/XUL/dialogheader" title="de/XUL/dialogheader">dialogheader</a></li> <li><a href="/de/XUL/notification" title="de/XUL/notification">notification</a></li> <li><a href="/de/XUL/notificationbox" title="de/XUL/notificationbox">notificationbox</a></li> </ol> <h3 id="Menüs_und_Popups">Menüs und Popups</h3> <ol style="list-style-type: square;"> <li><a href="/de/XUL/menubar" title="de/XUL/menubar">menubar</a></li> <li><a href="/de/XUL/menu" title="de/XUL/menu">menu</a></li> <li><a href="/de/XUL/menuitem" title="de/XUL/menuitem">menuitem</a></li> <li><a href="/de/XUL/menuseparator" title="de/XUL/menuseparator">menuseparator</a></li> <li><a href="/de/XUL/menupopup" title="de/XUL/menupopup">menupopup</a></li> <li><a href="/de/XUL/panel" title="de/XUL/panel">panel</a></li> <li><a href="/de/XUL/tooltip" title="de/XUL/tooltip">tooltip</a></li> <li><a href="/de/XUL/popupset" title="de/XUL/popupset">popupset</a></li> </ol> <h3 id="Toolbars">Toolbars</h3> <ol style="list-style-type: square;"> <li><a href="/de/XUL/toolbar" title="de/XUL/toolbar">toolbar</a></li> <li><a href="/de/XUL/toolbarbutton" title="de/XUL/toolbarbutton">toolbarbutton</a></li> <li><a href="/de/XUL/toolbargrippy" title="de/XUL/toolbargrippy">toolbargrippy</a></li> <li><a href="/de/XUL/toolbaritem" title="de/XUL/toolbaritem">toolbaritem</a></li> <li><a href="/de/XUL/toolbarpalette" title="de/XUL/toolbarpalette">toolbarpalette</a></li> <li><a href="/de/XUL/toolbarseparator" title="de/XUL/toolbarseparator">toolbarseparator</a></li> <li><a href="/de/XUL/toolbarset" title="de/XUL/toolbarset">toolbarset</a></li> <li><a href="/de/XUL/toolbarspacer" title="de/XUL/toolbarspacer">toolbarspacer</a></li> <li><a href="/de/XUL/toolbarspring" title="de/XUL/toolbarspring">toolbarspring</a></li> <li><a href="/de/XUL/toolbox" title="de/XUL/toolbox">toolbox</a></li> </ol> <h3 id="Tabs_und_Gruppierungen">Tabs und Gruppierungen</h3> <ol style="list-style-type: square;"> <li><a href="/de/XUL/tabbox" title="de/XUL/tabbox">tabbox</a></li> <li><a href="/de/XUL/tabs" title="de/XUL/tabs">tabs</a></li> <li><a href="/de/XUL/tab" title="de/XUL/tab">tab</a></li> <li><a href="/de/XUL/tabpanels" title="de/XUL/tabpanels">tabpanels</a></li> <li><a href="/de/XUL/tabpanel" title="de/XUL/tabpanel">tabpanel</a></li> <li><a href="/de/XUL/groupbox" title="de/XUL/groupbox">groupbox</a></li> <li><a href="/de/XUL/caption" title="de/XUL/caption">caption</a></li> <li><a href="/de/XUL/separator" title="de/XUL/separator">separator</a></li> <li><a href="/de/XUL/spacer" title="de/XUL/spacer">spacer</a></li> </ol> <h3 id="Kontrollelemente">Kontrollelemente</h3> <ol style="list-style-type: square;"> <li><a href="/de/XUL/button" title="de/XUL/button">button</a></li> <li><a href="/de/XUL/checkbox" title="de/XUL/checkbox">checkbox</a></li> <li><a href="/De/XUL/Colorpicker" title="de/XUL/colorpicker">colorpicker</a></li> <li><a href="/de/XUL/datepicker" title="de/XUL/datepicker">datepicker</a></li> <li><a href="/de/XUL/menulist" title="de/XUL/menulist">menulist</a></li> <li><a href="/de/XUL/progressmeter" title="de/XUL/progressmeter">progressmeter</a></li> <li><a href="/de/XUL/radio" title="de/XUL/radio">radio</a></li> <li><a href="/de/XUL/radiogroup" title="de/XUL/radiogroup">radiogroup</a></li> <li><a href="/de/XUL/scale" title="de/XUL/scale">scale</a></li> <li><a href="/de/XUL/splitter" title="de/XUL/splitter">splitter</a></li> <li><a href="/De/XUL/Textbox" title="de/XUL/textbox">textbox</a></li> <li><a href="/de/XUL/Textbox_(Toolkit_autocomplete)" title="de/XUL/textbox_(Firefox_autocomplete)">textbox (Firefox autocomplete)</a></li> <li><a href="/de/XUL/Textbox_(XPFE_autocomplete)" title="de/XUL/textbox_(Mozilla_autocomplete)">textbox (Mozilla autocomplete)</a></li> <li><a href="/de/XUL/timepicker" title="de/XUL/timepicker">timepicker</a></li> </ol> <h3 id="Text_und_Bilder">Text und Bilder</h3> <ol style="list-style-type: square;"> <li><a href="/de/XUL/description" title="de/XUL/description">description</a></li> <li><a href="/de/XUL/label" title="de/XUL/label">label</a></li> <li><a href="/de/XUL/image" title="de/XUL/image">image</a></li> </ol> <h3 id="Listen">Listen</h3> <ol style="list-style-type: square;"> <li><a href="/de/XUL/listbox" title="de/XUL/listbox">listbox</a></li> <li><a href="/de/XUL/listitem" title="de/XUL/listitem">listitem</a></li> <li><a href="/de/XUL/listcell" title="de/XUL/listcell">listcell</a></li> <li><a href="/de/XUL/listcol" title="de/XUL/listcol">listcol</a></li> <li><a href="/de/XUL/listcols" title="de/XUL/listcols">listcols</a></li> <li><a href="/de/XUL/listhead" title="de/XUL/listhead">listhead</a></li> <li><a href="/de/XUL/listheader" title="de/XUL/listheader">listheader</a></li> <li><a href="/de/XUL/richlistbox" title="de/XUL/richlistbox">richlistbox</a></li> <li><a href="/de/XUL/richlistitem" title="de/XUL/richlistitem">richlistitem</a></li> </ol> <h3 id="Trees">Trees</h3> <ol style="list-style-type: square;"> <li><a href="/de/XUL/tree" title="de/XUL/tree">tree</a></li> <li><a href="/de/XUL/treecell" title="de/XUL/treecell">treecell</a></li> <li><a href="/de/XUL/treechildren" title="de/XUL/treechildren">treechildren</a></li> <li><a href="/de/XUL/treecol" title="de/XUL/treecol">treecol</a></li> <li><a href="/de/XUL/treecols" title="de/XUL/treecols">treecols</a></li> <li><a href="/de/XUL/treeitem" title="de/XUL/treeitem">treeitem</a></li> <li><a href="/de/XUL/treerow" title="de/XUL/treerow">treerow</a></li> <li><a href="/de/XUL/treeseparator" title="de/XUL/treeseparator">treeseparator</a></li> </ol> <h3 id="Layout">Layout</h3> <ol style="list-style-type: square;"> <li><a href="/De/XUL/Box" title="de/XUL/box">box</a></li> <li><a href="/de/XUL/hbox" title="de/XUL/hbox">hbox</a></li> <li><a href="/de/XUL/vbox" title="de/XUL/vbox">vbox</a></li> <li><a href="/De/XUL/Bbox" title="de/XUL/bbox">bbox</a></li> <li><a href="/de/XUL/deck" title="de/XUL/deck">deck</a></li> <li><a href="/de/XUL/stack" title="de/XUL/stack">stack</a></li> <li><a href="/de/XUL/grid" title="de/XUL/grid">grid</a></li> <li><a href="/de/XUL/columns" title="de/XUL/columns">columns</a></li> <li><a href="/de/XUL/column" title="de/XUL/column">column</a></li> <li><a href="/de/XUL/rows" title="de/XUL/rows">rows</a></li> <li><a href="/de/XUL/row" title="de/XUL/row">row</a></li> <li><a href="/de/XUL/scrollbox" title="de/XUL/scrollbox">scrollbox</a></li> </ol> <h3 id="Templates">Templates</h3> <ol style="list-style-type: square;"> <li><a href="/de/XUL/action" title="de/XUL/action">action</a></li> <li><a href="/De/XUL/Assign" title="de/XUL/assign">assign</a></li> <li><a href="/De/XUL/Binding" title="de/XUL/binding">binding</a></li> <li><a href="/de/XUL/bindings" title="de/XUL/bindings">bindings</a></li> <li><a href="/de/XUL/conditions" title="de/XUL/conditions">conditions</a></li> <li><a href="/de/XUL/content" title="de/XUL/content">content</a></li> <li><a href="/de/XUL/member" title="de/XUL/member">member</a></li> <li><a href="/de/XUL/param" title="de/XUL/param">param</a></li> <li><a href="/de/XUL/query" title="de/XUL/query">query</a></li> <li><a href="/de/XUL/queryset" title="de/XUL/queryset">queryset</a></li> <li><a href="/de/XUL/rule" title="de/XUL/rule">rule</a></li> <li><a href="/de/XUL/template" title="de/XUL/template">template</a></li> <li><a href="/de/XUL/textnode" title="de/XUL/textnode">textnode</a></li> <li><a href="/de/XUL/triple" title="de/XUL/triple">triple</a></li> <li><a href="/de/XUL/where" title="de/XUL/where">where</a></li> </ol> <h3 id="Scripting">Scripting</h3> <ol style="list-style-type: square;"> <li><a href="/de/XUL/script" title="de/XUL/script">script</a></li> <li><a href="/de/XUL/commandset" title="de/XUL/commandset">commandset</a></li> <li><a href="/de/XUL/command" title="de/XUL/command">command</a></li> <li><a href="/de/XUL/broadcaster" title="de/XUL/broadcaster">broadcaster</a></li> <li><a href="/de/XUL/broadcasterset" title="de/XUL/broadcasterset">broadcasterset</a></li> <li><a href="/de/XUL/observes" title="de/XUL/observes">observes</a></li> <li><a href="/de/XUL/key" title="de/XUL/key">key</a></li> <li><a href="/de/XUL/keyset" title="de/XUL/keyset">keyset</a></li> <li><a href="/de/XUL/stringbundle" title="de/XUL/stringbundle">stringbundle</a></li> <li><a href="/de/XUL/stringbundleset" title="de/XUL/stringbundleset">stringbundleset</a></li> </ol> <h3 id="Hilfselemente">Hilfselemente</h3> <ol style="list-style-type: square;"> <li><a href="/de/XUL/scrollbar" title="de/XUL/scrollbar">arrowscrollbox</a></li> <li><a href="/de/XUL/dropmarker" title="de/XUL/dropmarker">dropmarker</a></li> <li><a href="/de/XUL/grippy" title="de/XUL/grippy">grippy</a></li> <li><a href="/de/XUL/scrollbar" title="de/XUL/scrollbar">scrollbar</a></li> <li><a href="/de/XUL/scrollcorner" title="de/XUL/scrollcorner">scrollcorner</a></li> <li><a href="/de/XUL/spinbuttons" title="de/XUL/spinbuttons">spinbuttons</a></li> </ol> <h2 id="Andere_XUL_Listen">Andere XUL Listen</h2> <ul> <li><a href="/de/XUL/Attribute" title="de/XUL/Attribute">Attribute</a></li> <li><a href="/de/XUL/Eigenschaften" title="de/XUL/Eigenschaften">Eigenschaften</a></li> <li><a href="/de/XUL/Method" title="de/XUL/Method">Methoden</a></li> <li><a href="/de/XUL_Element_Attribute" title="de/XUL_Element_Attribute">Attribute für alle XUL Elemente</a></li> <li><a href="/de/XUL/Style" title="de/XUL/Style">Style Klassen</a></li> <li><a href="/de/XUL/Events" title="de/XUL/Events">Eventhandler</a></li> <li><a href="/de/XUL/Deprecated/Defunct_Markup" title="de/XUL/Deprecated/Defunct_Markup">Deprecated/Defunct Markup</a></li> </ul> </ol>
diff --git a/files/de/archive/mozilla/xul/xul_tutorial/die_chrome_url/index.html b/files/de/archive/mozilla/xul/xul_tutorial/die_chrome_url/index.html
new file mode 100644
index 0000000000..e742e6f280
--- /dev/null
+++ b/files/de/archive/mozilla/xul/xul_tutorial/die_chrome_url/index.html
@@ -0,0 +1,39 @@
+---
+title: Die Chrome URL
+slug: Archive/Mozilla/XUL/XUL_Tutorial/Die_Chrome_URL
+tags:
+  - XUL
+  - XUL Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/The_Chrome_URL
+---
+<p>{{ PreviousNext("XUL_Tutorial/XUL_Struktur", "XUL_Tutorial/Manifest_Dateien") }}</p>
+<p>Der folgende Abschnitt beschreibt wie man Bezug zu weiteren XUL-Dokumenten und Chrome-Dateien herstellen kann.</p>
+<h3 id="Die_Chrome-URL">Die Chrome-URL</h3>
+<p>XUL-Dateien können über eine reguläre HTTP-URL (oder jeder andere Typ einer URL) genau wie HTML-Dateien aufgerufen werden. Pakete, die jedoch in Mozillas chrome-System gespeichert sind, können mit speziellen chrome-URLs aufgerufen werden. Die Pakete, die in Mozilla vorhanden sind, sind bereits installiert und Sie können zudem Ihre eigenen registrieren.</p>
+<p>Installierte Pakete haben den Vorteil, dass sie über keine Sicherheitsbeschränkungen verfügen, welche für viele Anwendungen von Bedeutung sind. Ein weitere Vorteil gegenüber anderen URL-Typen ist, dass sie automatisch mehrere Themes und Orte handhaben. Eine chrome-URL kann sich auf eine Theme-Datei beziehen, ohne zu wissen, welches Theme überhaupt installiert ist. Da die Dateinamen in allen Themes die gleichen sind, können Sie einfach eine Datei beziehen, die über die chrome-URL angegeben wird. Mozilla bestimmt dann wo die Datei zu finden ist und gibt dann die richtige Datei zurück. Das bedeutet auch, dass es egal ist wo das Paket installiert ist. Die chrome-URLs sind unabhängig davon wo die Dateien tatsächlich liegen. Das vereinfacht es ungemein Anwendungen zu schreiben, die eine Vielzahl von Dateien verwendet und Sie sich keine Gedanken machen brauchen, wo Sie die Dateien speichern.</p>
+<p>Die grundlegende Schreibweise einer chrome-URL ist die folgende:</p>
+<pre class="eval">chrome://<em>&lt;package name&gt;</em>/<em>&lt;part&gt;</em>/<em>&lt;file.xul&gt;</em>
+</pre>
+<p>Der Platzhalter <em>&lt;package name&gt;</em> ist der Paketname, wie z.B. messenger oder editor. Alle Paketnamen sind case-insensitiv, aber Kleinbuchstaben werden bevorzugt. <em>&lt;part&gt;</em> ist entweder 'content', 'skin' oder 'locale', abhängig davon, welchen Teil sie möchten. <em>&lt;file.xul&gt;</em> ist einfach der Dateiname.</p>
+<p><strong>Beispiel</strong>: <a class="external" rel="freelink">chrome://messenger/content/messenger.xul</a></p>
+<p>Das Beispiel hier bezieht sich auf das Messenger-Fenster. Sie könnten sich auch auf eine Datei beziehen, die Teil eines Skins ist, indem Sie 'content' durch 'skin' ersetzen und den Dateinamen entsprechend ändern. Genauso könnten Sie 'locale' statt 'content' angeben.</p>
+<p>Wenn Sie eine chrome-URL öffnen, schaut Mozilla durch die Liste der installierten Pakete und versucht eine JAR-Datei oder ein Verzeichnis zu finden, das auf den angeben Paketnamen und &lt;part&gt; zutrifft. Die Zuordnung von chrome-URLs und JAR-Dateien sind in den Manifest-Dateien festgelegt, welche sich im chrome-Verzeichnis befinden. Wenn Sie die messenger.jar-Datei verschieben und die Manifest-Datei entsprechend ändern wird Thunderbird weiterhin funktionieren, denn es ist nicht von einem bestimmten Installationsort abhängig. Indem wir chrome-URLs verwenden lassen wir solche Details Mozilla machen. Auch wenn der Benutzer das verwendete Theme ändert, wird der 'skin'-Teil der chrome-URL in ein anderes Verzeichnis übersetzt und XUL-Dateien und Skripte brauchen nicht geändert zu werden.</p>
+<p>Hier sind noch ein paar Beispiele. Beachten Sie, dass keine URL ein Theme oder eine Lokalisierung festlegen.</p>
+<pre class="eval"><a class="external" rel="freelink">chrome://messenger/content/messenger.xul</a>
+<a class="external" rel="freelink">chrome://messenger/content/attach.js</a>
+<a class="external" rel="freelink">chrome://messenger/skin/icons/folder-inbox.gif</a>
+<a class="external" rel="freelink">chrome://messenger/locale/messenger.dtd</a>
+</pre>
+<p>Um auf Unterverzeichnisse zuzugreifen, können Sie diese einfach am Ende der chrome-URL hinzufügen. Die folgenden URLs beziehen sich auf das Lesezeichenfenster, für Mozilla-Suite und Firefox, da der Paketname unterschiedlich ist:</p>
+<pre class="eval"><a class="external" rel="freelink">chrome://communicator/content/bookma...rksManager.xul</a> (Mozilla)
+<a class="external" rel="freelink">chrome://browser/content/bookmarks/b...rksManager.xul</a> (Firefox)
+</pre>
+<p>Sie können chrome-URLs überall verwenden, wo auch normale URLs verwendet werden können. Sie können sie sogar in die Adresszeile des Mozilla Browsers eingeben. Wenn Sie eine der oben genannten URLs eingeben, sollten Sie sehen, dass ein Fenster wie eine Webseite geöffnet wird und so funktioniert wie ein separates Fenster. Einige Dialogboxen funktionieren vielleicht nicht richtig, weil sie eventuelle Argumente erwarten, die ihnen beim Aufrufen nicht übergeben worden sind.</p>
+<p>Es kommen außerdem auch chrome-URLs ohne Dateinamen vor, zum Beispiel:</p>
+<pre class="eval"><a class="external" rel="freelink">chrome://browser/content/</a>
+</pre>
+<p>In diesem Fall wurde nur der Paketname und der Teilabschnitt angegeben. Dieser Referenztyp wird automatisch eine passende Datei aus diesem Verzeichnis auswählen. Für content wird eine Datei mit dem selben Namen des Pakets und XUL-Erweiterung ausgewählt. Im obigen Beispiel wird die Datei browser.xul ausgewählt. Für messenger würde messenger.xul ausgewählt werden. Wenn Sie Ihre eigene Anwendung erstellen, möchten Sie vielleicht eine Datei für Ihr Hauptfenster, mit dem selben Namen wie das Paket, erstellen. Dann kann ein Bezug in dieser verkürzten Form hergestellt werden.</p>
+<p>Bei einem Skin wird die Datei <em>&lt;package name&gt;</em>.css ausgewählt; für eine Lokalisierung wird die Datei <em>&lt;package name&gt;</em>.dtd ausgewählt.</p>
+<p>Denken Sie daran, dass die chrome-URL sich nicht auf den physikalischen Pfad auf der Festplatte bezieht. Die ersten beiden Stücke der chrome-URL sind der Paketname und der Teilabschnitt (entweder content, skin oder locale).</p>
+<p>Im nächsten Abschnitt schauen wir uns an, wie wir .manifest-Dateien und Pakete erstellen können.</p>
+<p>{{ PreviousNext("XUL_Tutorial/XUL_Struktur", "XUL_Tutorial/Manifest_Dateien") }}</p>
diff --git a/files/de/archive/mozilla/xul/xul_tutorial/ein_fenster_erzeugen/index.html b/files/de/archive/mozilla/xul/xul_tutorial/ein_fenster_erzeugen/index.html
new file mode 100644
index 0000000000..54c31683a0
--- /dev/null
+++ b/files/de/archive/mozilla/xul/xul_tutorial/ein_fenster_erzeugen/index.html
@@ -0,0 +1,111 @@
+---
+title: Ein Fenster erzeugen
+slug: Archive/Mozilla/XUL/XUL_Tutorial/Ein_Fenster_erzeugen
+tags:
+  - XUL
+  - XUL Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/Creating_a_Window
+---
+<p>{{ PreviousNext("XUL_Tutorial/Manifest_Dateien", "XUL_Tutorial/Buttons_hinzufügen") }}</p>
+
+<p>Zunächst wollen wir uns mit der Syntax einer XUL-Datei beschäftigen.</p>
+
+<h3 id="Eine_XUL_Datei_erstellen">Eine XUL Datei erstellen</h3>
+
+<p>Der Name einer XUL Datei kann frei gewählt werden, es sollte jedoch darauf geachtet werden, dass die Endung .xul verwendet wird. Die einfachste XUL Datei hat folgende Struktur:</p>
+
+<pre>&lt;?xml version="1.0"?&gt;
+&lt;?xml-stylesheet href="chrome://global/skin/" type="text/css"?&gt;
+
+&lt;window
+    id="findfile-window"
+    title="Find Files"
+    orient="horizontal"
+    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
+&lt;!-- Other elements go here --&gt;
+&lt;/window&gt;
+</pre>
+
+<p>Dieses Fenster wird keine Funktion haben, da es keine weitere UI-Elemete enthält. Diese werden im nächsten Abschnitt hinzugefügt. Der Code wird im folgenden Zeile für Zeile erklärt:</p>
+
+<ol>
+ <li><strong>&lt;?xml version="1.0"?&gt;</strong><br>
+  Diese Zeile zeigt, dass dies eine XML Datei ist. Diese Zeile sollte in jeder XUL Datei als erstes stehen.</li>
+ <li><strong>&lt;?xml-stylesheet href="<a class="external" rel="freelink">chrome://global/skin/</a>" type="text/css"?&gt;</strong><br>
+  Diese Zeile wird gebraucht um festzulegen, welches Style Sheet für diese Datei verwendet wird. Dies ist die Syntax wie XML Dateien Style Sheets importieren. In diesem Fall importieren wir ein Style Sheet welches sich im globalen Teil eines Skins befindet. Wir legen keine spezifische Datei fest, so dass Mozilla selbst entscheidet, welche Datei verwendet werden soll. In diesem Fall wird die Datei global.css verwendet. Diese Datei enthält alle Standard-Deklarationen für jedes XUL Element. Weil XML selbst nicht weiß wie die Elemente dargestellt werden sollten, brauch es diese Datei, welche dies festlegt. Normalerweise wird diese Zeile ebenfalls an den Anfang einer jeden XUL Datei geschrieben. Es können auch andere Style Sheets mit der selben Syntax importiert werden. Das globale Style Sheet wird normalerweise aus dem eigenen Style Sheet importiert.</li>
+ <li><strong>&lt;window</strong><br>
+  Diese Zeile gibt an, dass ein {{ XULElem("window") }} beschrieben wird. Jedes User Interface wird in einer eigenen Datei beschrieben. Dieser Tag ist wie ein HTML Tag welcher ein gesamtes HTML Dokument umfasst, mit dem Unterschied dass hier ein User Interface beschrieben wird. <a href="/De/XUL/Window#Attribute" title="de/XUL/window#Attribute">Einige Attribute</a> können im {{ XULElem("window") }} Tag platziert werden, hier sind es vier. In diesem Beispiel wird jedes Attribut in einer eigenen Zeile beschrieben, dies ist jedoch nicht zwingend.</li>
+ <li><strong>id="findfile-window"</strong><br>
+  Das <code>{{ XULAttr("id") }}</code> Attribut wird zur Identifizierung gebraucht, damit später auf das Fenster per Skript zugegriffen werden kann. Im Normalfall sollte ein <code>id</code> Attribut bei allen Elementen vorhanden sein. Der Name kann frei gewählt werden, er sollte jedoch sinnvoll sein.</li>
+ <li><strong>title="Find Files"</strong><br>
+  Das <code>{{ XULAttr("title") }}</code> Attribut beschreibt den Text, welcher in der Titelzeile des Fensters erscheinen soll. In unserem Fall wird es 'Find Files' sein.</li>
+ <li><strong>orient="horizontal"</strong><br>
+  Das <code>{{ XULAttr("orient") }}</code> Attribut beschreibt die Anordnung der Elemente in diesem Fenster. Der Wert <code>horizontal</code> zeigt, dass die Elemente horizontal über dem Fenster verteilt werden. Es kann auch der Wert <code>vertical</code> verwendet werden, welcher meint, dass die Elemente in einer Spalte verteilt werden. Dies ist der Standardwert, das heißt, dass man dieses Attribut weglassen kann, wenn man eine vertikale Ausrichtung möchte.</li>
+ <li><strong>xmlns="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"&gt;</strong> Diese Zeile deklariert den Namensraum für XUL, welcher im Fenster deklariert sein sollte um festzulegen, dass alle Nachfolger XUL sind. Diese URL wird niemals heruntergeladen. Mozilla wird diese URL intern verarbeiten.</li>
+ <li><strong><span class="nowiki">&lt;!-- Other elements go here --&gt;</span></strong><br>
+  Ersetze diesen Kommentar Block durch andere Elemente (Buttons, Menüs und andere User Interface Komponenten), welche im Fenster angezeigt werden sollten. Wir werden ein paar von ihnen zu einem späteren Zeitpunkt hinzufügen.</li>
+ <li><strong>&lt;/window&gt;</strong><br>
+  Zum Schluss brauchen wir das {{ XULElem("window") }} Tag, um das Ende der Datei anzuzeigen.</li>
+</ol>
+
+<h3 id="Ein_Fenster_öffnen">Ein Fenster öffnen</h3>
+
+<p>Um ein XUL Fenster zu öffnen gibt es verschiedene Methoden. Wenn Sie sich nur in der Entwicklungsphase befinden, können Sie einfach die URL ("chrome:", "file:" oder weitere) in die Adresszeile des Browserfensters eingeben. Sie können auch einfach auf einen Doppelklick auf die Datei ausführen, wenn XUL Dateien mit Mozilla verknüpft sind. Das XUL Fenster erscheint im Browserfenster als neues Fenster, aber das ist meistens ungenügend während der Entwicklung.</p>
+
+<p>Der korrekte Weg ist natürlich ein Fenster über JavaScript zu öffnen. Es ist kein neuer Syntax dazu notwendig, denn die <code><a href="/de/DOM/window.open" title="de/DOM/window.open">window.open()</a></code> Funktion kann genau wie für <a href="/de/HTML" title="de/HTML">HTML</a> Dokumente dazu verwendet werden. Es ist jedoch ein zusätzlicher Parameter "flag" nötig. In diesem Fall muss 'chrome' angeben werden, damit klar ist, dass ein <a href="/de/DOM/window.open#Window_functionality_features" title="de/DOM/window.open#Window functionality features">chrome</a> Dokument geöffnet werden soll. Dieses Stück Code wird dafür sorgen, dass ein Fenster ohne Toolbars und Menüs geöffnet wird:</p>
+
+<pre>window.open(url,windowname,flags);</pre>
+
+<p>wobei "flags" das Schlüsselwort "chrome" wie in diesem Beispiel enthält:</p>
+
+<pre>window.open("chrome://navigator/content/navigator.xul", "bmarks", "chrome,width=600,height=300");
+</pre>
+
+<div class="highlight">
+<p><span class="highlightred">Wenn Sie Firefox verwenden:</span></p>
+
+<pre>window.open("chrome://browser/content/places/places.xul", "bmarks", "chrome,width=600,height=300");
+</pre>
+
+<p>Diese Zeile kann auch in der Fehlerkonsole getestet werden. Wählen Sie Extras -&gt; Fehlerkonsole, tippen Sie die Zeile JavaScript ein und drücken Sie auf Evaluieren oder benutzen Sie die Enter-Taste.</p>
+
+<h5 id="Das_findfile.xul_Beispiel">Das findfile.xul Beispiel</h5>
+
+<p>Fangen wir an die Basisdatei für den Dateisuche-Dialog zu schreiben. Erstellen Sie die Datei findfile.xul und packen Sie diese in das content Verzeichnis, welches von der finndfile.manifest Datei festgelegt wurde (haben wir im vorherigen Abschnitt festgelegt). Fügen Sie die XUL Vorlage von oben zu dieser Datei hinzu und speichern Sie diese ab.</p>
+</div>
+
+<p>Sie können den Kommandozeilenparameter '-chrome' verwenden, um die XUL Datei mit Mozilla zu starten. Wird dies nicht festgelegt, wird das Standardfenster geöffnet (normalerweise das Browserfenster). Wir können zum Beispiel den Dateisuche-Dialog mit einem der folgenden Zeilen öffnen:</p>
+
+<pre>mozilla -chrome chrome://findfile/content/findfile.xul
+
+mozilla -chrome resource:/chrome/findfile/content/findfile.xul
+</pre>
+
+<p>Wenn Sie einen dieser Kommandos in einer Eingabeaufforderung (angenommen Sie verfügen übere eine auf Ihrem System) eingeben, wird der Dateisuche-Dialog standardmäßig geöffnet, anstatt des normalen Mozilla Browserfensters. Da wir allerdings noch keine UI-Elemente in das Fenster gepackt haben, sehen Sie zunächst nichts. Im nächsten Abschnitt werden wir Elemente hinzufügen.</p>
+
+<p>Um den Effekt dennoch zu beobachten, können Sie mit der folgenden Zeile das Lesezeichenfenster öffnen:</p>
+
+<pre>mozilla -chrome chrome://communicator/content/bookmarks/bookmarksManager.xul</pre>
+
+<p><span class="highlightred">Wenn Sie Firefox benutzen:</span></p>
+
+<pre>firefox -chrome <span class="s">chrome://browser/content/places/places.xul</span></pre>
+
+<p>Das '-chrome' Argument gibt der Datei keine gesonderten Rechte. Stattdessen kann es dadurch als Top-level Fenster in jedem Browser angezeigt werden, ohne Adressleiste oder Menüs. Nur chrome: URLs haben diese zusätzlichen Rechte.</p>
+
+<div class="note">Die <a class="external" href="http://ted.mielczarek.org/code/mozilla/extensiondev/">Erweiterungsentwickler Erweiterung</a> enthält einen XUL Editor, der den eingegebenen XUL-Code in Echtzeit wiedergibt!</div>
+
+<h3 id="Problemlösung">Problemlösung</h3>
+
+<ul>
+ <li>Wenn das XUL Fenster nicht auf dem Desktop angezeigt wird aber ein Icon auf der Desktop-Toolbar zu sehen ist, überprüfen Sie die xml-stylesheet Deklaration. Stellen Sie sicher, dass das Stylesheet korrekt eingebunden wird:</li>
+</ul>
+
+<pre class="eval"> &lt;?xml-stylesheet href="<a class="external" rel="freelink">chrome://global/skin/</a>" type="text/css"?&gt;
+</pre>
+
+<p>Im nächsten Abschnitt werden wir <a href="/de/XUL_Tutorial/Buttons_hinzufügen" title="de/XUL Tutorial/Buttons hinzufügen">ein paar Buttons zum Fenster hinzufügen</a>.</p>
+
+<p>{{ PreviousNext("XUL_Tutorial/Manifest_Dateien", "XUL_Tutorial/Buttons_hinzufügen") }}</p>
+
+<p>{{ languages( { "en": "en/XUL_Tutorial/Creating_a_Window", "fr": "fr/Tutoriel_XUL/Cr\u00e9er_une_fen\u00eatre", "ja": "ja/XUL_Tutorial/Creating_a_Window", "pl": "pl/Kurs_XUL/Tworzenie_okna", "es": "es/Tutorial_de_XUL/Creando_una_ventana" } ) }}</p>
diff --git a/files/de/archive/mozilla/xul/xul_tutorial/einfuehrung/index.html b/files/de/archive/mozilla/xul/xul_tutorial/einfuehrung/index.html
new file mode 100644
index 0000000000..93aa98324a
--- /dev/null
+++ b/files/de/archive/mozilla/xul/xul_tutorial/einfuehrung/index.html
@@ -0,0 +1,33 @@
+---
+title: Einführung
+slug: Archive/Mozilla/XUL/XUL_Tutorial/Einfuehrung
+tags:
+  - XUL
+  - XUL Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/Introduction
+---
+<p>{{ Next("XUL_Tutorial/XUL_Struktur") }}</p>
+<p>Dieses Tutorial ist eine Anleitung für das Erlernen von <abbr title="XML User Interface Language">XUL</abbr> (XML User Interface Language). XUL ist eine plattformübergreifende Sprache, um die Benutzer-Schnittstellen (z.B. GUI) einer Anwendung zu beschreiben.</p>
+<p>Dieses Tutorial demonstriert die Erstellung eines einfachen "Datei suchen"-Dialogs, in der Art des "Sherlock" auf dem Macintosh oder des "Suchen"-Dialogs von Windows. Bitte beachten Sie, dass nur das Fenster (GUI) erstellt wird. Dieses beinhaltet sehr eingeschränkte Funktionalität. Das tatsächliche Auffinden von Dateien ist nicht implementiert. An den Stellen, wo der "Datei suchen"-Dialog bearbeitet wird, ist am linken Rand eine blaue Linie gemalt. Sie können der Entwicklung des Dialogs einfach folgen, indem Sie die so markierten Stellen lesen.</p>
+<h3 id="Was_ist_XUL_und_warum_wurde_es_entwickelt">Was ist XUL und warum wurde es entwickelt?</h3>
+<p>XUL (ausgesprochen "zuul" und reimt sich auf "cool") wurde entwickelt, um die Entwicklung des Mozilla-Browsers zu vereinfachen und zu beschleunigen. Es ist eine <abbr title="Extensible Markup Language">XML</abbr>-Sprache und somit gelten alle Eigenschaften von XML auch für XUL.</p>
+<p>Die meisten Anwendungen benötigen bei ihrer Entwicklung plattform-spezifische Abhängigkeiten und Eigenschaften - die Entwicklung von plattform-unabhängiger Software ist zeitraubend und teuer. In den letzten Jahren wurde eine Vielzahl von plattform-übergreifenden Anwendungen entwickelt. Die Programmiersprache Java hat zum Beispiel die Plattformunabhängigkeit als herausragende Eigenschaft. XUL ist eine Sprache, die speziell für plattform-übergreifende Benutzerschnittstellen (GUIs) entwickelt wurde. Es dauert lange, um eine Anwendung zu entwickeln - selbst für eine Plattform. Die Zeit des Kompilierens und Debuggens kann sich sehr strecken. Mit XUL kann die Benutzerschnittstelle schnell und einfach implementiert und geändert werden.</p>
+<p>XUL hat alle Vorteile von anderen XML-Sprachen. Es können zum Beispiel XHTML oder andere XML-Sprachen, wie <abbr title="Math Markup Language">MathML</abbr> oder <abbr title="Scalable Vector Graphics">SVG</abbr> eingebunden werden. Zudem ist angezeigter Text in XUL einfach an den Standort des Anwenders anzupassen. Das heißt er kann mit wenig Aufwand in andere Sprachen übersetzt werden.</p>
+<h3 id="Welche_Art_von_Benutzerschnittstellen_können_mit_XUL_erstellt_werden">Welche Art von Benutzerschnittstellen können mit XUL erstellt werden?</h3>
+<p>XUL bietet die Möglichkeit die meisten Elemente zu erstellen, die in modernen Benutzeroberflächen vorkommen. Einige dieser Elemente sind:</p>
+<ul> <li>Eingabefelder, wie Textfelder oder Checkboxen</li> <li>Buttonleisten</li> <li>Menüleisten und Popup-Menüs</li> <li>Karteikarten</li> <li>Bäume für hierarchische oder tabellarische Darstellungen</li> <li>Tastenkürzel</li>
+</ul>
+<p>Der angezeigte Inhalt kann mit dem Inhalt aus XUL-Dateien oder aus Datenquellen erstellt werden. In Mozilla schließen solche Datenquellen die Mailbox eines Anwenders, seine Lesezeichen und Suchergebnisse ein. Die Inhalte von Menüs, Bäumen und anderen Elementen können mit diesen Daten befüllt werden oder mit Ihren eigenen Daten, die in <abbr title="Resource Description Framework">RDF</abbr>-Dateien bereitgestellt werden.</p>
+<p>Es gibt verschieden Arten, um XUL zu nutzen:</p>
+<ul> <li>Firefox-Erweiterung: Eine Erweiterung fügt dem Browser Funktionen hinzu, oft in der Form von zusätzlichen Buttons, Kontext-Menüs oder Anpassungen der Browser-Oberfläche. Dies geschieht durch die Verwendung einer XUL-Eigenschaft namens <strong>overlay</strong> (Überlagerung), die es erlaubt, die Oberfläche einer Quelle (in diesem Fall des Browsers) mit der Oberfläche der Erweiterung zu mischen bzw. zu überlagern. Erweiterungen können auch zu anderen Mozilla-Produkten, wie Thunderbird, Sunbird oder Songbird hinzugefügt werden.</li> <li>Standalone XULRunner Anwendung: XULRunner is eine gepackte Version der Mozilla-Plattform, die es erlaubt, <abbr title="Programme, die auf dem lokalen Rechner ohne Netzwerk-Zugriff ausgeführt werden können">Standalone-Anwendungen</abbr> zu erstellen. Für das Starten einer solchen Standalone-Anwendung wird kein Browser benötigt, da sie eine eigene selbstausführbare Datei darstellen.</li> <li>XUL Paket: Zwischen den beiden oben beschriebenen Anwendungsformen steht das XUL Paket. Es wird auf dieselbe Art und Weise wie eine Erweiterung erstellt, wird aber wie eine unabhängige Anwendung in einem anderen Fenster ausgeführt. Ein XUL Paket wird verwendet, wenn Sie nicht die Größe einer kompletten XULRunner-Anwendung in Kauf nehmen wollen und nichts dagegen haben, dass die Anwendung aus einer Mozilla-Anwendung (Firefox, Thunderbird,...) gestartet wird.</li> <li>Entfernte XUL-Anwendung: Sie können ihren Code auch auf einem Webserver hinterlegen und in einem Browser öffnen - so wie sie jede andere Webseite öffnen. Diese Methode ist jedoch eingeschränkt, da Sicherheitseinschränkungen beachtet werden müssen. Zum Beispiel ist der Zugriff auf andere Fenster nicht möglich.</li>
+</ul>
+<p>Die ersten drei Arten benötigen alle die Ausführung einer Installation auf dem Computer des Anwenders. Diese Arten haben dadurch keine Sicherheitsbeschränkungen, sodass sie, zum Beispiel, das lokale Dateisystem lesen und schreiben können. Für eine Erweiterung werden die XUL-Dateien und zugehörige Skripte und Bilddateien der Anwendung in einer einzigen Datei zusammengepackt, die vom Anwender heruntergeladen und installiert wird. Mozilla-Anwendungen, wie der Firefox, bieten einen Erweiterungsmanager an, der es erlaubt, Installationen zusammenzustellen, ohne viel komplizierten Code schreiben zu müssen.</p>
+<p>Es ist auch möglich XUL-Dateien direkt aus dem Dateisystem oder von einer Webseite zu starten. Diese sind aber in ihren Möglichkeiten eingeschränkt und einige Aspekte von XUL können nicht ausgeführt werden. Wenn Sie XUL-Inhalte von einer entfernten Webseite laden möchten, muss der Webserver so eingestellt sein, dass er XUL-Dateien mit dem Content-Type "application/vnd.mozilla.xul+xml" senden kann. XUL-Code wird normalerweise in Dateien mit der Endung ".xul" gespeichert. Sie können XUL-Dateien in Mozilla wie jede andere Datei (z.B. HTML) öffnen, indem Sie die "Öffnen mit..."-Option im Datei-Explorer für eine solche Datei auswählen oder den Ort der Datei direkt in die Adressleiste des Mozilla Browsers eingegeben.</p>
+<h3 id="Welches_Vorwissen_brauche_ich_f.C3.BCr_dieses_Tutorial.3F" name="Welches_Vorwissen_brauche_ich_f.C3.BCr_dieses_Tutorial.3F">Welches Vorwissen brauche ich für dieses Tutorial?</h3>
+<p>Sie sollten eine Vorstellung von <abbr>HTML</abbr> und zumindest grundsätzliches Verständnis von XML und <abbr title="Cascading Style Sheets">CSS</abbr> haben. Hier sind einige Richtlinien:</p>
+<ul> <li>XUL-Elemente sollten alle in Kleinbuchstaben eingegeben werden, da XML auf Groß-Klein-Schreibung achtet (im Gegensatz zu HTML).</li> <li>Attribut-Werte in XUL müssen immer in Anführungsstrichen geschrieben werden, auch wenn es sich um Zahlen handelt.</li> <li>XUL-Dateien sind normalerweise in 4 Dateien aufgeteilt, eine für das Layout und die platzierten Elemente (*.xul), eine für Stil-Definitionen (*.css), eine für Bezeichnungsdeklarationen (*.ent, um auf den Ort des Anwenders zu reagieren) und eine für Scripte (*.script). Zusätzlich können weitere Dateien für Bilder oder plattform-spezifische Dateien verwendet werden.</li>
+</ul>
+<p>XUL wird in Mozilla-Browsern unterstützt, die auf der Gecko-Engine basieren, z.B. Netscape 6 oder höher und Mozilla Firefox. Trotz diverser Änderungen in der XUL-Syntax, sollten die aktuellen Versionen der Beispiele korrekt ablaufen. Die meisten Beispiele sollten unter Mozilla 1.0 oder höher laufen. XUL ist ziemlich ähnlich in Firefox und anderen Browsern, obwohl es kleine Unterschiede gibt, wie zum Beispiel die Unterstützung für anpassbare Werkzeugleisten.</p>
+<p>Dieses Tutorial versucht viel von der XUL-Funktionalität abzudecken, aber es können nicht alle Themen behandelt werden. Wenn Sie einmal vertraut mit XUL sind, können Sie die <a href="/de/XUL_Referenz" title="de/XUL Referenz">XUL-Referenz</a> benutzen, um mehr über Eigenschaften von bestimmten Elementen herauszufinden.</p>
+<p>{{ Next("XUL_Tutorial/XUL_Struktur") }}</p>
+<p>{{ languages( { "en": "en/XUL_Tutorial/Introduction", "es": "es/Tutorial_de_XUL/Introducci\u00f3n", "fr": "fr/Tutoriel_XUL/Introduction", "ja": "ja/XUL_Tutorial/Introduction", "ko": "ko/XUL_Tutorial/Introduction", "pl": "pl/Kurs_XUL/Wprowadzenie", "zh-cn": "cn/XUL_\u6559\u7a0b/\u5f15\u8a00", "ru": "ru/\u0420\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e_\u043f\u043e_XUL/\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435" } ) }}</p>
diff --git a/files/de/archive/mozilla/xul/xul_tutorial/index.html b/files/de/archive/mozilla/xul/xul_tutorial/index.html
new file mode 100644
index 0000000000..5cf8ecb42d
--- /dev/null
+++ b/files/de/archive/mozilla/xul/xul_tutorial/index.html
@@ -0,0 +1,57 @@
+---
+title: XUL Tutorial
+slug: Archive/Mozilla/XUL/XUL_Tutorial
+tags:
+  - XUL
+  - XUL Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial
+---
+<p>Dieses Tutorial beschreibt XUL, die »XML User-Interface Language«. Diese Sprache wurde für die Anwendung Mozilla entwickelt und wird verwendet, um die Nutzerschnittstelle (GUI) für die Anwendung zu beschreiben.</p>
+<h5 id="Einführung">Einführung</h5>
+<ul> <li><a href="/de/XUL_Tutorial/Einfuehrung" title="de/XUL_Tutorial/Einfuehrung">Einführung</a></li> <li><a href="/de/XUL_Tutorial/XUL_Struktur" title="de/XUL_Tutorial/XUL_Struktur">XUL Struktur</a></li> <li><a href="/De/XUL_Tutorial/Die_Chrome_URL" title="De/XUL_Tutorial/Die_Chrome_URL">Die Chrome URL</a></li> <li><a href="/de/XUL_Tutorial/Manifest_Dateien" title="de/XUL_Tutorial/Manifest_Dateien">Manifest Dateien</a></li>
+</ul>
+<h5 id="Einfache_Elemente">Einfache Elemente</h5>
+<ul> <li><a href="/de/XUL_Tutorial/Ein_Fenster_erzeugen" title="de/XUL_Tutorial/Ein_Fenster_erzeugen">Ein Fenster erzeugen</a></li> <li><a href="/de/XUL_Tutorial/Buttons_hinzufügen" title="de/XUL_Tutorial/Buttons_hinzufügen">Buttons hinzufügen</a></li> <li><a href="/de/XUL_Tutorial/Labels_und_Bilder_hinzufügen" title="de/XUL_Tutorial/Labels_und_Bilder_hinzufügen">Labels und Bilder hinzufügen</a></li> <li><a href="/de/XUL_Tutorial/Eingabeelemente" title="de/XUL_Tutorial/Eingabeelemente">Eingabeelemente</a></li> <li><a href="/de/XUL_Tutorial/Numerische_Steuerelemente" title="de/XUL_Tutorial/Numerische_Steuerelemente">Numerische Steuerelemente</a></li> <li><a href="/de/XUL_Tutorial/Listenelemente" title="de/XUL_Tutorial/Listenelemente">Listenelemente</a></li> <li><a href="/de/XUL_Tutorial/Fortschrittsanzeige" title="de/XUL_Tutorial/Fortschrittsanzeige">Fortschrittsanzeige</a></li> <li><a href="/de/XUL_Tutorial/HTML-Elemente_hinzufügen" title="de/XUL_Tutorial/HTML-Elemente_hinzufügen">HTML-Elemente hinzufügen</a></li> <li><a href="/de/XUL_Tutorial/Abstandhalter_verwenden" title="de/XUL_Tutorial/Abstandhalter_verwenden">Abstandhalter verwenden</a></li> <li><a href="/de/XUL_Tutorial/Weitere_Button-Features" title="de/XUL_Tutorial/Weitere_Button-Features">Weitere Button-Features</a></li>
+</ul>
+<h5 id="Das_Box-Modell">Das Box-Modell</h5>
+<ul> <li><a href="/de/XUL_Tutorial/Das_Box-Modell" title="de/XUL_Tutorial/Das_Box-Modell">Das Box-Modell </a></li> <li><a href="/de/XUL_Tutorial/Positionierung_von_Elementen" title="de/XUL_Tutorial/Positionierung_von_Elementen">Positionierung von Elementen</a></li> <li><a href="/de/XUL_Tutorial/Details_zum_Box-Modell" title="de/XUL_Tutorial/Details_zum_Box-Modell">Details zum Box-Modell</a></li> <li><a href="/de/XUL_Tutorial/Groupboxes" title="de/XUL_Tutorial/Groupboxes">Groupboxes</a></li> <li><a href="/de/XUL_Tutorial/Weitere_Elemente_hinzufügen" title="de/XUL_Tutorial/Weitere_Elemente_hinzufügen">Weitere Elemente hinzufügen</a></li>
+</ul>
+<h5 id="Mehr_Layout-Elemente" name="Mehr_Layout-Elemente">Weitere Layout-Elemente</h5>
+<ul> <li><a href="/de/XUL_Tutorial/Stacks_und_Decks" title="de/XUL_Tutorial/Stacks_und_Decks">Stacks und Decks</a></li> <li><a href="/de/XUL_Tutorial/Stack-Positionierung" title="de/XUL_Tutorial/Stack-Positionierung">Stack-Positionierung</a></li> <li><a href="/de/XUL_Tutorial/Karteikarten" title="de/XUL_Tutorial/Karteikarten">Karteikarten</a></li> <li><a href="/de/XUL_Tutorial/Grids" title="de/XUL_Tutorial/Grids">Grids</a></li> <li><a href="/de/XUL_Tutorial/Content_Panels" title="de/XUL_Tutorial/Content_Panels">Content Panels</a></li> <li><a href="/de/XUL_Tutorial/Splitters" title="de/XUL_Tutorial/Splitters">Splitters</a></li> <li><a href="/de/XUL_Tutorial/Scroll-Balken" title="de/XUL_Tutorial/Scroll-Balken">Scroll-Balken</a></li>
+</ul>
+<h5 id="Toolbars_und_Menüs">Toolbars und Menüs</h5>
+<ul> <li><a href="/de/XUL_Tutorial/Toolbars" title="de/XUL_Tutorial/Toolbars">Toolbars</a></li> <li><a href="/de/XUL_Tutorial/Einfache_Menüs" title="de/XUL_Tutorial/Einfache_Menüs">Einfache Menüs</a></li> <li><a href="/de/XUL_Tutorial/Weitere_Menü-Eigenschaften" title="de/XUL_Tutorial/Weitere_Menü-Eigenschaften">Weitere Menü-Eigenschaften</a></li> <li><a href="/de/XUL_Tutorial/Popup-Menüs" title="de/XUL_Tutorial/Popup-Menüs">Popup-Menüs</a></li> <li><a href="/de/XUL_Tutorial/Menüs_zum_Scrollen" title="de/XUL_Tutorial/Menüs_zum_Scrollen">Menüs zum Scrollen</a></li>
+</ul>
+<h5 id="Ereignisse_und_Scripte">Ereignisse und Scripte</h5>
+<ul> <li><a href="/de/XUL_Tutorial/Event-Handler_hinzufügen" title="de/XUL_Tutorial/Event-Handler_hinzufügen">Event-Handler hinzufügen</a></li> <li><a href="/de/XUL_Tutorial/Weitere_Event-Handler" title="de/XUL_Tutorial/Weitere_Event-Handler">Weitere Event-Handler</a></li> <li><a href="/de/XUL_Tutorial/Tastenkürzel" title="de/XUL_Tutorial/Tastenkürzel">Tastenkürzel</a></li> <li><a href="/de/XUL_Tutorial/Fokus_und_Selektierung" title="de/XUL_Tutorial/Fokus_und_Selektierung">Fokus und Selektierung</a></li> <li><a href="/de/XUL_Tutorial/Befehle" title="de/XUL_Tutorial/Befehle">Befehle</a></li> <li><a href="/de/XUL_Tutorial/Befehle_updaten" title="de/XUL_Tutorial/Befehle_updaten">Befehle updaten</a></li> <li><a href="/de/XUL_Tutorial/Broadcaster_und_Observer" title="de/XUL_Tutorial/Broadcaster_und_Observer">Broadcaster und Observer</a></li>
+</ul>
+<h5 id="Das_DOM_(Document_Object_Model)">Das DOM (Document Object Model)</h5>
+<ul> <li><a href="/de/XUL_Tutorial/Das_Document_Object_Model" title="de/XUL_Tutorial/Das_Document_Object_Model">Das Document Object Model</a></li> <li><a href="/de/XUL_Tutorial/Eine_XUL-Schnittstelle_anpassen" title="de/XUL_Tutorial/Eine_XUL-Schnittstelle_anpassen">Eine XUL-Schnittstelle anpassen</a></li> <li><a href="/de/XUL_Tutorial/Listen_anpassen" title="de/XUL_Tutorial/Listen_anpassen">Listen anpassen</a></li> <li><a href="/de/XUL_Tutorial/Box-Objekte" title="de/XUL_Tutorial/Box-Objekte">Box-Objekte</a></li> <li><a href="/de/XUL_Tutorial/XPCOM-Schnittstellen" title="de/XUL_Tutorial/XPCOM-Schnittstellen">XPCOM-Schnittstellen</a></li> <li><a href="/de/XUL_Tutorial/XPCOM_Beispiele" title="de/XUL_Tutorial/XPCOM_Beispiele">XPCOM Beispiele</a></li>
+</ul>
+<h5 id="Bäume">Bäume</h5>
+<ul> <li><a href="/de/XUL_Tutorial/Bäume" title="de/XUL_Tutorial/Bäume">Bäume </a></li> <li><a href="/de/XUL_Tutorial/Weitere_Baum-Eigenschaften" title="de/XUL_Tutorial/Weitere_Baum-Eigenschaften">Weitere Baum-Eigenschaften</a></li> <li><a href="/de/XUL_Tutorial/Auswahl_in_Bäumen" title="de/XUL_Tutorial/Auswahl_in_Bäumen">Auswahl in Bäumen</a></li> <li><a href="/de/XUL_Tutorial/Selbsterstellte_Baum-Ansichten" title="de/XUL_Tutorial/Selbsterstellte_Baum-Ansichten">Selbsterstellte Baum-Ansichten</a></li> <li><a href="/de/XUL_Tutorial/Details_zu_Baum-Ansichten" title="de/XUL_Tutorial/Details_zu_Baum-Ansichten">Details zu Baum-Ansichten</a></li> <li><a href="/de/XUL_Tutorial/Tree-Box_Objekte" title="de/XUL_Tutorial/Tree-Box_Objekte">Tree-Box Objekte</a></li>
+</ul>
+<h5 id="RDF_und_Vorlagen">RDF und Vorlagen</h5>
+<ul> <li><a href="/de/XUL_Tutorial/Einführung_in_RDF" title="de/XUL_Tutorial/Einführung_in_RDF">Einführung in RDF</a></li> <li><a href="/de/XUL_Tutorial/Vorlagen" title="de/XUL_Tutorial/Vorlagen">Vorlagen</a></li> <li><a href="/de/XUL_Tutorial/Bäume_und_Vorlagen" title="de/XUL_Tutorial/Bäume_und_Vorlagen">Bäume und Vorlagen</a></li> <li><a href="/de/XUL_Tutorial/RDF_Datasources" title="de/XUL_Tutorial/RDF_Datasources">RDF Datasources</a></li> <li><a href="/de/XUL_Tutorial/Kompliziertere_Regeln" title="de/XUL_Tutorial/Kompliziertere_Regeln">Kompliziertere Regeln</a></li> <li><a href="/de/XUL_Tutorial/Datenspeicherung" title="de/XUL_Tutorial/Datenspeicherung">Datenspeicherung</a></li>
+</ul>
+<h5 id="Skins_und_Locales">Skins und Locales</h5>
+<ul> <li><a href="/de/XUL_Tutorial/Style_Sheets_hinzufügen" title="de/XUL_Tutorial/Style_Sheets_hinzufügen">Style Sheets hinzufügen</a></li> <li><a href="/de/XUL_Tutorial/Einen_Baum_gestalten" title="de/XUL_Tutorial/Einen_Baum_gestalten">Einen Baum gestalten</a></li> <li><a href="/de/XUL_Tutorial/Die_voreingestellte_Skin_bearbeiten" title="de/XUL_Tutorial/Die_voreingestellte_Skin_bearbeiten">Die voreingestellte Skin bearbeiten</a></li> <li><a href="/de/XUL_Tutorial/Eine_eigene_Skin_erstellen" title="de/XUL_Tutorial/Eine_eigene_Skin_erstellen">Eine eigene Skin erstellen</a></li> <li><a href="/de/XUL_Tutorial/Lokalisierung" title="de/XUL_Tutorial/Lokalisierung">Lokalisierung</a></li> <li><a href="/de/XUL_Tutorial/Property-Dateien" title="de/XUL_Tutorial/Property-Dateien">Property-Dateien</a></li>
+</ul>
+<h5 id="Bindings">Bindings</h5>
+<ul> <li><a href="/de/XUL_Tutorial/Einführung_in_XBL" title="de/XUL_Tutorial/Einführung_in_XBL">Einführung in XBL</a></li> <li><a href="/de/XUL_Tutorial/Anonymer_Inhalt" title="de/XUL_Tutorial/Anonymer_Inhalt">Anonymer Inhalt</a></li> <li><a href="/de/XUL_Tutorial/XBL_Vererbung_von_Attributen" title="de/XUL_Tutorial/XBL_Vererbung_von_Attributen">XBL Vererbung von Attributen</a></li> <li><a href="/de/XUL_Tutorial/Eigenschaften_zu_XBL-definierten_Elementen_hinzufügen" title="de/XUL_Tutorial/Eigenschaften_zu_XBL-definierten_Elementen_hinzufügen">Eigenschaften hinzufügen</a></li> <li><a href="/de/XUL_Tutorial/Methodenzu_XBL-definierten_Elementen_hinzufügen" title="de/XUL_Tutorial/Methodenzu_XBL-definierten_Elementen_hinzufügen">Methoden hinzufügen</a></li> <li><a href="/de/XUL_Tutorial/Event_Handler_zu_XBL-definierten_Element_hinzufügen" title="de/XUL_Tutorial/Event_Handler_zu_XBL-definierten_Element_hinzufügen">Event-Handler hinzufügen</a></li> <li><a href="/de/XUL_Tutorial/XBL_Vererbung" title="de/XUL_Tutorial/XBL_Vererbung">XBL Vererbung</a></li> <li><a href="/de/XUL_Tutorial/XBL_Beispiel" title="de/XUL_Tutorial/XBL_Beispiel">XBL Beispiel</a></li>
+</ul>
+<h5 id="Spezielle_Fenster-Typen">Spezielle Fenster-Typen</h5>
+<ul> <li><a href="/de/XUL_Tutorial/Eigenschaften_eines_Fensters" title="de/XUL_Tutorial/Eigenschaften_eines_Fensters">Eigenschaften eines Fensters</a></li> <li><a href="/de/XUL_Tutorial/Erstellen_von_Dialogen" title="de/XUL_Tutorial/Erstellen_von_Dialogen">Erstellen von Dialogen</a></li> <li><a href="/de/XUL_Tutorial/Öffnen_und_Schließen_Dialog" title="de/XUL_Tutorial/Öffnen_und_Schließen_Dialog">"Öffnen" und "Schließen"-Dialoge</a></li> <li><a href="/de/XUL_Tutorial/Erstellen_von_Assistenten" title="de/XUL_Tutorial/Erstellen_von_Assistenten">Erstellen von Assistenten</a></li> <li><a href="/de/XUL_Tutorial/Weitere_Assistenten" title="de/XUL_Tutorial/Weitere_Assistenten">Weitere Assistenten</a></li> <li><a href="/de/XUL_Tutorial/Overlays" title="de/XUL_Tutorial/Overlays">Overlays (Überlagerungen)</a></li> <li><a href="/de/XUL_Tutorial/Cross_Package_Overlays" title="de/XUL_Tutorial/Cross_Package_Overlays">Overlays über mehrere Packages</a></li>
+</ul>
+<h5 id="Installation">Installation</h5>
+<ul> <li><a href="/de/XUL_Tutorial/Erstellen_eines_Installers" title="de/XUL_Tutorial/Erstellen_eines_Installers">Erstellen eines Installers</a></li> <li><a href="/De/XUL_Tutorial/Installations-Skripte" title="De/XUL_Tutorial/Installations-Skripte">Installations-Skripte</a></li> <li><a href="/de/XUL_Tutorial/Zusätzliche_Installationseigenschaften" title="de/XUL_Tutorial/Zusätzliche_Installationseigenschaften">Zusätzliche Installationseigenschaften</a></li>
+</ul>
+<div class="note">
+<p>Dieses XUL-Tutorial wurde ursprünglich von <a class="external" href="http://www.xulplanet.com/ndeakin/">Neil Deakin</a> geschrieben. Er hat die Erlaubnis gegeben, es als Teil des <a href="/Project:de/About" title="Project:de/About">MDC</a> zu nutzen.</p>
+</div>
+<div class="originaldocinfo">
+<h5 id="Informationen_zum_Originaldokument">Informationen zum Originaldokument</h5>
+<ul> <li>Autor: <a class="external" href="http://www.xulplanet.com/ndeakin/">Neil Deakin</a></li> <li>Urheberrecht-Informationen: © 1999-2005 XULPlanet.com</li>
+</ul>
+</div>
+<p>{{ languages( { "zh-cn": "cn/XUL_\u6559\u7a0b", "en": "en/XUL_Tutorial", "es": "es/Tutorial_de_XUL", "fr": "fr/Tutoriel_XUL", "ja": "ja/XUL_Tutorial", "ko": "ko/XUL_Tutorial", "pl": "pl/Kurs_XUL", "ru": "ru/\u0420\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e_\u043f\u043e_XUL" } ) }}</p>
diff --git a/files/de/archive/mozilla/xul/xul_tutorial/installations-skripte/index.html b/files/de/archive/mozilla/xul/xul_tutorial/installations-skripte/index.html
new file mode 100644
index 0000000000..cf11ed3b11
--- /dev/null
+++ b/files/de/archive/mozilla/xul/xul_tutorial/installations-skripte/index.html
@@ -0,0 +1,96 @@
+---
+title: Installations-Skripte
+slug: Archive/Mozilla/XUL/XUL_Tutorial/Installations-Skripte
+translation_of: Archive/Mozilla/XUL/Tutorial/Install_Scripts
+---
+<div class="prevnext" style="text-align: right;">
+    <p><a href="/de/docs/XUL_Tutorial/Erstellen_eines_Installers" style="float: left;">« zurück</a><a href="/de/docs/XUL_Tutorial/Zusätzliche_Installationseigenschaften">weiter  »</a></p>
+</div>
+<p>Dieser Abschnitt beschreibt das Installationsskript.</p>
+<h3 id="Erstellen_eines_Installationsskripts">Erstellen eines Installationsskripts</h3>
+<div class="note">
+ <strong>Hinweis</strong>: Für Firefox Erweiterungen, werden <code>install.js</code> Dateien nicht weiter verwendet. Es sollte ein <code><a href="/de/Installationsmanifest" title="de/Installationsmanifest">install.rdf</a></code> stattdessen erstellt werden.</div>
+<p>In der Regel möchten Sie den Installationsprozess steuern können. Zum Beispiel möchten Sie vielleicht Datei-Versionen überprüfen und nur aktualisierte Dateien installieren oder Sie möchten Fehler in existierenden Dateien beheben. Das Installationsskript ist flexibel genug, um sogar Dateien zu deinstallieren. Aus diesen Gründen sollten Installationen ein Installationsskript an Board haben, um den Installationsprozess zu regeln.</p>
+<p>Das Installationsskript muss "install.js" genannt werden und muss im Wurzelverzeichnis des Installationsverzeichnisses platziert werden. Das Skript wird JavaScript Code enthalten, welcher eine Reihe von Installationsfunktionen aufruft.</p>
+<p>In einem HTML Dokument oder einem XUL Dokument ist das "window" Objekt das Wurzelobjekt. Das bedeutet, dass Sie die Methoden des window-Objekts ohne einem Qualifier davor aufrufen können, zum Beipiel kann statt <code>window.open()</code> einfach <code>open()</code> geschrieben werden. In einem Installationsskript gibt es kein Fenster, jedoch ist das globale Objekt das <em>Install</em> Objekt, welches eine Reihe von Funktionen zur Anpassung des Installationsprozess mit sich bringt. Einige der Install-Ojekt Funktionen werden weiter unter beschrieben.</p>
+<p>Das Installationsskript sollte die folgenden Schritte ausführen:</p>
+<ol>
+ <li>Initialisiere die Installation in dem festgelegt wird, welche Version und Paket installiert werden soll.</li>
+ <li>Benutze die Installationsfunktionen, um zu bestimmen, welche Dateien und Verzeichnisse installiert werden müssen. Sie können außerdem Dateien festlegen, die gelöscht oder verschoben werden sollen.</li>
+ <li>Starte den Installationsprozess der nötigen Dateien.</li>
+</ol>
+<p>Es ist wichtig zu beachten, dass während Schritt zwei, nur angegeben wird, welche Dateien installiert werden sollen und welche weiteren Operationen ausgeführt werden sollen. Es werden keine Dateien bis zum dritten Schritt kopiert. Sie können daher sehr einfach eine Reihe von Dateien festlegen, die installiert werden sollen, stolpern eventuell über einen Fehler und können den Prozess abbrechen, ohne dass das System des Benutzers verändert wird.</p>
+<h3 id="Die_Komponentenregistrierung">Die Komponentenregistrierung</h3>
+<p>Mozilla verfügt über eine Registrierungsdatei, welche alle Komponenten enthält, die momentan installiert sind. Komponenten sind Chrome Pakete, Skins und Plugins. Wird eine neue Komponente installiert, wird die Registrierungsdatei aktualisiert. Die Registrierung speichert auch Dateisets und Versionsinformationen über die installierten Komponenten. Daher ist es sehr einfach die Versionen Ihrer Komponente zu prüfen und zu ermitteln, ob die Komponente bereits verfügbar ist und eventuell aktualisiert werden muss.</p>
+<p>Die Komponentenregistrierung arbeit ähnlich wie die Windows Registrierung. Sie besteht aus der hierarchischen Anordnung von Schlüsseln und Werten. Dabei müssen Sie nicht viel darüber wissen, um XUL Anwendungen zu erstellen, es sei denn Sie wollen eigene <a href="/de/XUL_Tutorial/XPCOM-Schnittstellen" title="de/XUL Tutorial/XPCOM-Schnittstellen">XPCOM</a> Komponenten erstellen.</p>
+<p>Was Sie für eine Installation wissen müssen, ist, dass die Registrierung eine Reihe von Informationen über Ihre Anwendung speichert, zum Beispiel eine Liste der Dateien und Versionen. Die gesamten Informationen werden in einem Schlüssel gespeichert (und in Unter-Schlüsseln), welche Sie im Installationsskript angeben (in Schritt eins oben genannt).</p>
+<p>Dieser Schlüssel ist wie in Verzeichnissen in der folgenden Form strukturiert:</p>
+<pre>/Autor/Paketname
+</pre>
+<p>Ersetzen Sie das Wort "Author" mit Ihrem Name und "Paketname" mit dem Namen Ihres Pakets, welches Sie installieren möchten. Zum Beispiel:</p>
+<pre>/Xulplanet/Find Files
+
+/Netscape/Personal Security Manager
+</pre>
+<p>Das erste Beispiel werden wir für den Dateisuche-Dialog verwenden. Das zweite Beispiel wird vom Personal Security Manager benutzt.</p>
+<h3 id="Initialisierung_der_Installation">Initialisierung der Installation</h3>
+<p>Das Install Objekt hat eine Funktion, <code>initInstall(), welche</code> zur Initialisierung der Installation gebraucht wird. Es sollte am Anfang des Installationsskript aufgerufen werden. Die Syntax dieser Funktion ist die folgende:</p>
+<pre>initInstall( ''packageName'' , ''regPackage'' , ''version'' );</pre>
+<p>Ein Beispiel</p>
+<pre>initInstall("Find Files","/Xulplanet/Find Files","0.5.0.0");</pre>
+<ul>
+ <li>Das erste Argument ist der Name des Paketes in einer lesbaren Form.</li>
+ <li>Das zweite Argument ist der Registrierungsschlüssel, welcher die Paketinformationen speichert.</li>
+ <li>Das dritte Argument ist die Version des Pakets, welches installiert werden soll.</li>
+</ul>
+<p>Als nächstes müssen wir das Verzeichnis festlegen, wo die Dateien installiert werden sollen. Es gibt zwei Möglichkeiten.</p>
+<ul>
+ <li>Die einfache Methode ist, ein Installationsverzeichnis festzulegen und alle Datei dort zu installieren.</li>
+ <li>Die zweite Methode erlaubt Ihnen ein Zielverzeichnis für einzelne Dateien zu bestimmen. Die erste Methode wird nun beschrieben.</li>
+</ul>
+<p>Die Funktion <code>setPackageFolder()</code> legt ein Installationsverzeichnis fest. Für den Dateisuche-Dialog werden wir die Dateien in das Chrome-Verzeichnis installieren. (Wir könnten sie überall speichern). Die Funktion <code>setPackageFolder()</code> nimmt ein Argument an, das Installationsverzeichnis. Für maximale Portabilität kann kein String-Name für das Verzeichnis festgelegt werden. Stattdessen wird ein Identifier eines bekannten Verzeichnis verwendet und dann werden dort Unterverzeichnisse erstellt. Falls Ihre Anwendung Systembibliotheken installieren muss, brauchen Sie den Pfad dieser Verzeichnisse nicht zu wissen.</p>
+<p>Die Verzeichnis-Identifiers sind in der <a class="external" href="http://www.xulplanet.com/references/elemref/ref_Install.html#prop_getFolder">XULPlanet Referenz</a> aufgelistet. Für das Chrome-Verzeichnis ist der Identifier 'Chrome'. Die <code>getFolder()</code> Funktion kann verwendet werden, um eine der speziellen Verzeichnisse zu bekommen. Diese Funktion nimmt zwei Argumente, das erste ist der Identifier und das zweite ist ein Unterverzeichnis. Zum Beispiel:</p>
+<pre>findDir = getFolder("Chrome","findfile");
+setPackageFolder(findDir);
+</pre>
+<p>Hier bekommen wir das "findfile" Verzeichnis im Chrome-Ordner und reichen dies an die <code>setPackageFolder()</code> Funktion weiter. Das zweite Argument für <code>getFolder()</code> ist das Unterverzeichnis in dem wir installieren werden, was nicht bedeutet, dass es existieren muss. Dieses Argument kann weggelassen werden, wenn Sie kein Unterverzeichnis benötigen.</p>
+<h3 id="Setting_Install_Files" name="Setting_Install_Files">Installationsdateien festlegen</h3>
+<p>Als nächstes müssen die Dateien festgelegt werden, die installiert werden sollen. Das erfordert die Verwendung der Funktionen <code>addDirectory()</code> und <code>addFile()</code>. Die <code>addDirectory()</code> Funktion teilt dem Instller mit, dass ein Verzeichnis aus dem XPI Archiv (und alle Inhalte darin) in ein bestimmtes Verzeichnis installiert werden soll. Die Funktion <code>addFile()</code> ist ähnlich, aber für eine einzelne Datei.</p>
+<p>Beide Funktionen <code>addDirectory()</code> und <code>addFile()</code> haben unterschiedliche Formen. Die einfachste Form nimmt nur ein Argument: Das Verzeichnis, welches von der Installation erstellt werden soll.</p>
+<pre class="eval">addDirectory ( <em>dir</em> );
+addFile ( <em>dir</em> );
+
+<strong>Beispiel:</strong>
+
+addDirectory("findfile");
+</pre>
+<p>Das obige Beispiel legt ein Verzeichnis "findfile" für die Installation fest. Diese Funktionen können mehrmals aufgerufen werden, um mehrere Verzeichnisse und Dateien zu installieren.</p>
+<p>Als nächstes wollen wir die Dateien im Chrome System registrieren, sodass diese mit einer Chrome-URL verwendet werden können. Das kann mit der <code>registerChrome()</code> Funktion erledigt werden. Die Funktion nimmt zwei Argumente an, als erstes den Chrome-Typ, der registriert werden soll (content, skin oder locale). Ein zweites Argument ist das Verzeichnis, welches die contents.rdf Datei enthält. Weil der Dateisuche-Dialog content, eine Skin-Datei und eine locale-Datei enthält, muss <code>registerChrome()</code> dreimal aufgerufen werden.</p>
+<pre>registerChrome(Install.CONTENT | Install.DELAYED_CHROME, getFolder(findDir, "content"));
+registerChrome(Install.SKIN | Install.DELAYED_CHROME, getFolder(findDir, "skin"));
+registerChrome(Install.LOCALE | Install.DELAYED_CHROME, getFolder(findDir, "locale"));
+</pre>
+<p> DELAYED_CHROME wird verwendet, um anzuzeigen, dass es beim nächsten Mozilla-Start installiert werden soll.</p>
+<h3 id="Abschluss_der_Installation">Abschluss der Installation</h3>
+<p>Die <code>addDirectory()</code> und <code>addFile()</code> Funktions kopieren keine Dateien. Sie geben nur an, welche Dateien installiert werden sollen. Ebenfalls gibt <code>registerChrome()</code> nur an, dass diese im chrome-System registriert werden sollen. Um den Prozess zu vervollständigen und Dateien zu kopieren, muss die <code><span style="font-family: Verdana,Tahoma,sans-serif;">p</span>erformInstall()</code> Funktion aufgerufen werden. Diese Funktionen erwartet keine Argumente.</p>
+<p>Das finale Skript zur Installation der "Dateisuche"-Komponente ist unten aufgeführt:</p>
+<div class="highlight">
+ <p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_xpiscript_1.js.txt">Datei</a></p>
+ <pre>initInstall("Find Files","/Xulplanet/Find Files","0.5.0.0");
+
+findDir = getFolder("Chrome","findfile");
+setPackageFolder(findDir);
+
+addDirectory("findfile");
+
+registerChrome(Install.CONTENT | Install.DELAYED_CHROME, getFolder(findDir, "content"));
+registerChrome(Install.SKIN | Install.DELAYED_CHROME, getFolder(findDir, "skin"));
+registerChrome(Install.LOCALE | Install.DELAYED_CHROME, getFolder(findDir, "locale"));
+
+performInstall();
+</pre>
+</div>
+<p>Als nächstes schauen wir uns <a href="/de/XUL_Tutorial/Zusätzliche_Installationseigenschaften" title="de/XUL Tutorial/Zusätzliche Installationseigenschaften">zusätzliche Installationsfunktionen</a> an.</p>
+<div class="prevnext" style="text-align: right;">
+    <p><a href="/de/docs/XUL_Tutorial/Erstellen_eines_Installers" style="float: left;">« zurück</a><a href="/de/docs/XUL_Tutorial/Zusätzliche_Installationseigenschaften">weiter  »</a></p>
+</div>
diff --git a/files/de/archive/mozilla/xul/xul_tutorial/lokalisierung/index.html b/files/de/archive/mozilla/xul/xul_tutorial/lokalisierung/index.html
new file mode 100644
index 0000000000..7f6f44a00e
--- /dev/null
+++ b/files/de/archive/mozilla/xul/xul_tutorial/lokalisierung/index.html
@@ -0,0 +1,270 @@
+---
+title: Lokalisierung
+slug: Archive/Mozilla/XUL/XUL_Tutorial/Lokalisierung
+tags:
+  - Lokalisierung
+  - XUL
+  - XUL_Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/Localization
+---
+<p>{{ PreviousNext("XUL_Tutorial/Eine_eigene_Skin_erstellen", "XUL_Tutorial/Property-Dateien") }}</p>
+<p>XUL und XML stellen Entities als komfortablen Weg bereit, um Lokalisierungen zu ermöglichen.</p>
+<h3 id="Entities">Entities</h3>
+<p>Viele Anwendungen sind so gebaut, dass das Interface so einfach wie möglich in verschiedene Sprachen zu übersetzten ist. Üblicherweise wird eine Tabelle aus Strings für jede Sprache erstellt. Anstelle von den Text direkt in die Applikation zu programmieren, stellt jede Textstelle nur eine Referenz zur Stringtabelle dar. <a href="/de/XML" title="de/XML">XML</a> stellt Entities zur Verfügung, welche für den gleichen Zweck verwendet werden können.</p>
+<p>Man sollte mit Entities bereits vertraut sein, wenn man schon Erfahrungen mit <a href="/de/HTML" title="de/HTML">HTML</a> sammeln konnte. Der Code <code>&amp;lt;</code> und <code>&amp;gt;</code> sind Beispiele von Entities, welche anstelle von „Größer-als-“ und „Kleiner-als-Zeichen“ im Text verwendet werden können. XML besitzt einen Syntax, welcher dir das deklarieren eigener Entities erlaubt. Du kannst diese so verwenden, dass das Entity durch seinen Wert ersetzt wird, welcher ein Textstring ist. Entities können immer wenn Text auftritt verwendet werden, inklusive den Attributwerten. Das Beispiel unten demonstriert die Verwendung eines Entity in einem Button.</p>
+<pre>&lt;button label="&amp;findLabel;"/&gt;
+</pre>
+<p>Der Text der als Label erscheinen wird, wird den Wert des Entity <code>&amp;findLabel;</code> sein. Eine Datei welche die Entity-Deklaration enthält wird für jede unterstützte Sprache erstellt. Für Englisch wird das <code>&amp;findLabel;</code> Entity wahrscheinlich mit dem Text »Find« deklariert sein.</p>
+<h3 id="DTD-Dateien">DTD-Dateien</h3>
+<p>Entities sind in <em>Document Type Declaration</em> (DTD) Dateien deklariert. Dateien dieses Typs werden normalerweise verwendet um den Syntax und die Semantik einer bestimmten XML-Datei zu deklarieren, aber es können auch Entities deklariert werden. Im Mozilla Chrome-System sind die DTD Dateien im <code>locales</code> Unterordner zu finden. Normalerweise existiert eine DTD Datei (mit der Endung <code>.dtd</code>) pro XUL-Datei.</p>
+<p>Wenn man im Chrome-Ordner nachschaut, sollte man ein Archiv für die jeweilige Sprache (<code>de-De.jar</code> ist normalerweise Deutsch) finden. Es ist möglich lokale Dateien in verschiedenen Sprachen, z.B. Deutsch (de-DE) und Englisch (en-US) zu haben. Innerhalb dieser Archive sind die Dateien zu finden, welche den lokalisierten Text für jedes Fenster enthalten. Die Struktur der Archive ist sehr ähnlich derjenigen, die für Skins verwendet wird.</p>
+<p>Im Innern der Archive würde man die DTD-Dateien platzieren in welchen die Entities deklariert werden sollen. Normalerweise wird für jede XUL-Datei eine DTD-Datei mit dem gleichen Namen erstellt mit allerdings einer <code>.dtd</code> Endung. Daher werden wir für den Dateisuchdialog eine Datei namens <code>findfile.dtd</code> benötigen.</p>
+<p>Für nicht installierte chrome Dateien kann einfach die DTD-Datei ins selbe Verzeichnis wie die XUL-Datei ablegt werden.</p>
+<div class="note"><strong>Anmerkung:</strong> Die DTD-Dateien sollten für nicht ASCII Zeichen als UTF-8 kodiert werden. Deswegen sollten die Dateien im UTF-8 Format gespeichert werden. (<a class="external" href="http://www.mozdev.org/notes/l10n/unicode/editors-en.html">ohne BOM</a>). Für mehr Informationen, siehe <a class="external" href="http://www.mozilla.org/projects/l10n/mlp_chrome.html#text">Mozilla Sprachpakete</a>.</div>
+<p>Sobald eine DTD-Datei für das XUL erstellt worden ist, muss eine Zeile in die XUL-Datei einfügt werden, welche angibt, dass die DTD-Datei verwendet werden soll. Andernfalls werden Fehler auftreten, weil die Entities nicht gefunden werden. Um dies zu tun, muss die folgende Zeile irgendwo im oberen Bereich der XUL-Datei eingefügt werden:</p>
+<pre>&lt;!DOCTYPE window SYSTEM "chrome://findfile/locale/findfile.dtd"&gt;
+</pre>
+<p>Diese Zeile legt fest, dass die URL auf eine DTD-Datei verweist. In diesem Fall wurde deklariert, dass die <code>findfile.dtd</code> DTD-Datei verwendet werden soll. Diese Zeile ist typischerweise gerade vor dem <code>window</code> Element platziert.</p>
+<h3 id="Entities_deklarieren">Entities deklarieren</h3>
+<p>Die Entities werden mit einem einfachen Syntax deklariert:</p>
+<pre>&lt;!ENTITY findLabel "Find"&gt;
+</pre>
+<p>Dieses Beispiel erstellt ein Entity mit dem Namen <code>findLabel</code> und dem Wert »Find«. Dies bedeutet, dass überall wo der Text „&amp;findLabel;“ in der XUL-Datei auftritt es durch den Text »Find« ersetzt wird. Es sollte beachtet werden, dass die Deklaration kein Slash am Ende besitzt. In der DTD-Datei einer anderen Sprache wird der Text stattdessen in dieser Sprache geschrieben.</p>
+<pre class="eval"><strong>für Japanisch:</strong>
+&lt;!ENTITY findLabel "検索"&gt;
+</pre>
+<p>Zum Beispiel der folgende Text:</p>
+<pre>&lt;description value="&amp;findLabel;"/&gt;
+</pre>
+<p>wird übersetzt als:</p>
+<pre class="eval"><strong>Englische Version:</strong>
+&lt;description value="Find"/&gt;
+
+<strong>Japanische Version:</strong>
+&lt;description value="検索"/&gt;
+</pre>
+<p>Es wird ein Entity für jede Beschriftung und Textstelle vorhanden sein, die dem Interface verwendet wird. Es sollte kein direkt angezeigter Text in den XUL-Dateien existieren.</p>
+<p>Zusätzlich zu der Verwendung in Beschriftungen, sollten Entities für jeden Wert verwendet werden, welcher in einer anderen Sprache abweichen könnte. Access-Keys und Tastatur-Shortcuts zum Beispiel.</p>
+<pre class="eval"> <strong>XUL</strong>
+ &lt;menuitem label="&amp;undo.label;" accesskey="&amp;undo.key;"/&gt;
+ <strong>DTD</strong>
+ &lt;!ENTITY undo.label "Undo"&gt;
+ &lt;!ENTITY undo.key "u"&gt;
+</pre>
+<p>Das Beispiel oben verwendet zwei Entities, eines für die Beschriftung des Menüpunktes und ein zweiter für den Access-Key.</p>
+<p> </p>
+<div class="highlight">
+<h3 id=".C3.84nderung_des_Dateisuche_Beispiels" name=".C3.84nderung_des_Dateisuche_Beispiels">Änderung des Dateisuche Beispiels</h3>
+<p>Werfen wir jetzt einen Blick darauf, wie wir das alles zusammenfügen können, indem wir den Dateisuche-Dialog so modifizieren, so dass eine DTD-Datei für alle seine Textstellen verwendet wird. Die gesamte XUL-Datei mit allen Änderungen in Rot ist unterhalb gezeigt.</p>
+<pre class="eval">&lt;?xml version="1.0"?&gt;
+
+&lt;?xml-stylesheet href="<a class=" external" rel="freelink">chrome://global/skin/</a>" type="text/css"?&gt;
+&lt;?xml-stylesheet href="findfile.css" type="text/css"?&gt;
+
+<span class="highlightred">&lt;!DOCTYPE window SYSTEM "<a class=" external" rel="freelink">chrome://findfile/locale/findfile.dtd</a>"&gt;</span>
+
+&lt;window
+  id="findfile-window"
+  title="<span class="highlightred">&amp;findWindow.title;</span>"
+  persist="screenX screenY width height"
+  orient="horizontal"
+  onload="initSearchList()"
+  xmlns="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"&gt;
+
+&lt;script src="findfile.js"/&gt;
+
+&lt;popupset&gt;
+   &lt;popup id="editpopup"&gt;
+     &lt;menuitem label="Cut" accesskey="<span class="highlightred">&amp;cutCmd.accesskey;</span>"/&gt;
+     &lt;menuitem label="Copy" accesskey="<span class="highlightred">&amp;copyCmd.accesskey;</span>"/&gt;
+     &lt;menuitem label="Paste" accesskey="<span class="highlightred">&amp;pasteCmd.accesskey;</span>" disabled="true"/&gt;
+   &lt;/popup&gt;
+&lt;/popupset&gt;
+
+&lt;keyset&gt;
+   &lt;key id="cut_cmd" modifiers="accel" key="<span class="highlightred">&amp;cutCmd.commandkey;</span>"/&gt;
+   &lt;key id="copy_cmd" modifiers="accel" key="<span class="highlightred">&amp;copyCmd.commandkey;</span>"/&gt;
+   &lt;key id="paste_cmd" modifiers="accel" key="<span class="highlightred">&amp;pasteCmd.commandkey;</span>"/&gt;
+   &lt;key id="close_cmd" keycode="VK_ESCAPE" oncommand="window.close();"/&gt;
+&lt;/keyset&gt;
+
+&lt;vbox flex="1"&gt;
+
+ &lt;toolbox&gt;
+
+  &lt;menubar id="findfiles-menubar"&gt;
+    &lt;menu id="file-menu" label="<span class="highlightred">&amp;fileMenu.label;</span>"
+        accesskey="<span class="highlightred">&amp;fileMenu.accesskey;</span>"&gt;
+      &lt;menupopup id="file-popup"&gt;
+        &lt;menuitem label="<span class="highlightred">&amp;openCmd.label;</span>"
+                  accesskey="<span class="highlightred">&amp;openCmd.accesskey;</span>"/&gt;
+        &lt;menuitem label="<span class="highlightred">&amp;saveCmd.label;</span>"
+                  accesskey="<span class="highlightred">&amp;saveCmd.accesskey;</span>"/&gt;
+        &lt;menuseparator/&gt;
+        &lt;menuitem label="<span class="highlightred">&amp;closeCmd.label;</span>"
+                  accesskey="<span class="highlightred">&amp;closeCmd.accesskey;" key="close_cmd" oncommand="window.close();</span>"/&gt;
+      &lt;/menupopup&gt;
+    &lt;/menu&gt;
+    &lt;menu id="edit-menu" label="<span class="highlightred">&amp;editMenu.label;</span>"
+          accesskey="<span class="highlightred">&amp;editMenu.accesskey;</span>"&gt;
+      &lt;menupopup id="edit-popup"&gt;
+        &lt;menuitem label="<span class="highlightred">&amp;cutCmd.label;</span>"
+                  accesskey="<span class="highlightred">&amp;cutCmd.accesskey;</span>" key="cut_cmd"/&gt;
+        &lt;menuitem label="<span class="highlightred">&amp;copyCmd.label;</span>"
+                  accesskey="<span class="highlightred">&amp;copyCmd.accesskey;</span>" key="copy_cmd"/&gt;
+        &lt;menuitem label="<span class="highlightred">&amp;pasteCmd.label;</span>"
+                  accesskey="<span class="highlightred">&amp;pasteCmd.accesskey;</span>" key="paste_cmd" disabled="true"/&gt;
+      &lt;/menupopup&gt;
+    &lt;/menu&gt;
+  &lt;/menubar&gt;
+
+  &lt;toolbar id="findfiles-toolbar"&gt;
+    &lt;toolbarbutton id="opensearch" label="<span class="highlightred">&amp;openCmdToolbar.label;</span>"/&gt;
+    &lt;toolbarbutton id="savesearch" label="<span class="highlightred">&amp;saveCmdToolbar.label;</span>"/&gt;
+  &lt;/toolbar&gt;
+ &lt;/toolbox&gt;
+
+ &lt;tabbox&gt;
+  &lt;tabs&gt;
+    &lt;tab label="<span class="highlightred">&amp;searchTab;</span>" selected="true"/&gt;
+    &lt;tab label="<span class="highlightred">&amp;optionsTab;</span>"/&gt;
+  &lt;/tabs&gt;
+
+  &lt;tabpanels&gt;
+
+   &lt;tabpanel id="searchpanel" orient="vertical" context="editpopup"&gt;
+
+   &lt;description&gt;
+     <span class="highlightred">&amp;findDescription;</span>
+   &lt;/description&gt;
+
+   &lt;spacer class="titlespace"/&gt;
+
+   &lt;groupbox orient="horizontal"&gt;
+     &lt;caption label="<span class="highlightred">&amp;findCriteria;</span>"/&gt;
+
+     &lt;menulist id="searchtype"&gt;
+       &lt;menupopup&gt;
+         &lt;menuitem label="<span class="highlightred">&amp;type.name;</span>"/&gt;
+         &lt;menuitem label="<span class="highlightred">&amp;type.size;</span>"/&gt;
+         &lt;menuitem label="<span class="highlightred">&amp;type.date;</span>"/&gt;
+       &lt;/menupopup&gt;
+     &lt;/menulist&gt;
+   &lt;spacer class="springspace"/&gt;
+     &lt;menulist id="searchmode"&gt;
+       &lt;menupopup&gt;
+         &lt;menuitem label="<span class="highlightred">&amp;mode.is;</span>"/&gt;
+         &lt;menuitem label="<span class="highlightred">&amp;mode.isnot;</span>"/&gt;
+       &lt;/menupopup&gt;
+     &lt;/menulist&gt;
+   &lt;spacer class="springspace"/&gt;
+
+   &lt;menulist id="find-text" flex="1"
+             editable="true"
+             datasources="<a class=" external" rel="freelink">file:///mozilla/recents.rdf</a>"
+             ref="<span class="nowiki">http://www.xulplanet.com/rdf/recent/all</span>"&gt;
+     &lt;template&gt;
+       &lt;menupopup&gt;
+         &lt;menuitem label="<span class="nowiki">rdf:http://www.xulplanet.com/rdf/recent#Label</span>" uri="rdf:*"/&gt;
+       &lt;/menupopup&gt;
+     &lt;/template&gt;
+   &lt;/menulist&gt;
+
+   &lt;/groupbox&gt;
+
+  &lt;/tabpanel&gt;
+
+  &lt;tabpanel id="optionspanel" orient="vertical"&gt;
+     &lt;checkbox id="casecheck" label="<span class="highlightred">&amp;casesensitive;</span>"/&gt;
+     &lt;checkbox id="wordscheck" label="<span class="highlightred">&amp;matchfilename;</span>"/&gt;
+    &lt;/tabpanel&gt;
+
+  &lt;/tabpanels&gt;
+ &lt;/tabbox&gt;
+
+ &lt;tree id="results" style="display: none;" flex="1"&gt;
+   &lt;treecols&gt;
+     &lt;treecol id="name" label="<span class="highlightred">&amp;results.filename;</span>" flex="1"/&gt;
+     &lt;treecol id="location" label="<span class="highlightred">&amp;results.location;</span>" flex="2"/&gt;
+     &lt;treecol id="size" label="<span class="highlightred">&amp;results.size;</span>" flex="1"/&gt;
+   &lt;/treecols&gt;
+
+   &lt;treechildren&gt;
+     &lt;treeitem&gt;
+       &lt;treerow&gt;
+         &lt;treecell label="mozilla"/&gt;
+         &lt;treecell label="/usr/local"/&gt;
+         &lt;treecell label="<span class="highlightred">&amp;bytes.before;</span>2520<span class="highlightred">&amp;bytes.after;</span>"/&gt;
+       &lt;/treerow&gt;
+     &lt;/treeitem&gt;
+   &lt;/treechildren&gt;
+ &lt;/tree&gt;
+
+ &lt;splitter id="splitbar" resizeafter="grow" style="display: none;"/&gt;
+
+ &lt;spacer class="titlespace"/&gt;
+
+ &lt;hbox&gt;
+   &lt;progressmeter id="progmeter" value="50%" style="display: none;"/&gt;
+   &lt;spacer flex="1"/&gt;
+   &lt;button id="find-button" label="<span class="highlightred">&amp;button.find;</span>"
+           oncommand="doFind()"/&gt;
+   &lt;button id="cancel-button" label="<span class="highlightred">&amp;button.cancel;</span>"
+           oncommand="window.close();"/&gt;
+ &lt;/hbox&gt;
+&lt;/vbox&gt;
+
+&lt;/window&gt;
+</pre>
+<p>Jede Textstelle wurde durch eine Entity ersetzt. Eine DTD-Datei wurde nahe am Anfang eingefügt. Jede Entity welche eingefügt wurde, sollte in der DTD-Datei deklariert sein. Das Fenster wird nicht angezeigt, wenn eine Entity in der XUL-Datei gefunden wird, welche nicht deklariert wurde.</p>
+<p>Es sollte beachtet werden, dass der Name der Entity nicht wichtig ist. Im Beispiel oben wurden die Wörter der Entities mit Bindestrichen getrennt. Dies ist keine Vorgabe. Die Entity-Namen folgen den selben Konventionen wie der Rest des Mozilla Codes.</p>
+<p>Es ist vielleicht aufgefallen, dass der Text '2520 bytes' durch zwei Entities ersetzt wurde. Das kommt daher, weil die Struktur in anderen Sprachen variieren kann. Es könnte z.B. nötig sein, dass die Einheit vor der Zahl steht.</p>
+<p>Die Access-Keys und Tastatur-Shortcuts wurden auch in Entities übersetzt, weil sie in anderen Sprachen abweichen können.</p>
+<p>Nun die DTD-Datei - findfile.dtd:</p>
+<pre>&lt;!ENTITY findWindow.title "Find Files"&gt;
+&lt;!ENTITY fileMenu.label "File"&gt;
+&lt;!ENTITY editMenu.label "Edit"&gt;
+&lt;!ENTITY fileMenu.accesskey "f"&gt;
+&lt;!ENTITY editMenu.accesskey "e"&gt;
+&lt;!ENTITY openCmd.label "Open Search..."&gt;
+&lt;!ENTITY saveCmd.label "Save Search..."&gt;
+&lt;!ENTITY closeCmd.label "Close"&gt;
+&lt;!ENTITY openCmd.accesskey "o"&gt;
+&lt;!ENTITY saveCmd.accesskey "s"&gt;
+&lt;!ENTITY closeCmd.accesskey "c"&gt;
+&lt;!ENTITY cutCmd.label "Cut"&gt;
+&lt;!ENTITY copyCmd.label "Copy"&gt;
+&lt;!ENTITY pasteCmd.label "Paste"&gt;
+&lt;!ENTITY cutCmd.accesskey "t"&gt;
+&lt;!ENTITY copyCmd.accesskey "c"&gt;
+&lt;!ENTITY pasteCmd.accesskey "p"&gt;
+&lt;!ENTITY cutCmd.commandkey "X"&gt;
+&lt;!ENTITY copyCmd.commandkey "C"&gt;
+&lt;!ENTITY pasteCmd.commandkey "V"&gt;
+&lt;!ENTITY openCmdToolbar.label "Open"&gt;
+&lt;!ENTITY saveCmdToolbar.label "Save"&gt;
+&lt;!ENTITY searchTab "Search"&gt;
+&lt;!ENTITY optionsTab "Options"&gt;
+&lt;!ENTITY findDescription "Enter your search criteria below and select the Find button to begin the search."&gt;
+&lt;!ENTITY findCriteria "Search Criteria"&gt;
+&lt;!ENTITY type.name "Name"&gt;
+&lt;!ENTITY type.size "Size"&gt;
+&lt;!ENTITY type.date "Date Modified"&gt;
+&lt;!ENTITY mode.is "Is"&gt;
+&lt;!ENTITY mode.isnot "Is Not"&gt;
+&lt;!ENTITY casesensitive "Case Sensitive Search"&gt;
+&lt;!ENTITY matchfilename "Match Entire Filename"&gt;
+&lt;!ENTITY results.filename "Filename"&gt;
+&lt;!ENTITY results.location "Location"&gt;
+&lt;!ENTITY results.size "Size"&gt;
+&lt;!ENTITY bytes.before ""&gt;
+&lt;!ENTITY bytes.after "bytes"&gt;
+&lt;!ENTITY button.find "Find"&gt;
+&lt;!ENTITY button.cancel "Cancel"&gt;
+</pre>
+<p>Um den Text in einer neuen Sprache hinzuzufügen, genügt es eine weitere DTD-Datei zu erstellen. Durch die Verwendung des Chrome Systems, um die DTD-Datei einer anderen Sprache hinzuzufügen, kann die selbe XUL-Datei für jede Sprache verwendet werden.</p>
+<p>Das Dateisuche Beispiel so weit: <a class=" external" href="http://developer.mozilla.org/samples/xultu/examples/findfile/findfile-locale.xul.txt">Quellcode</a></p>
+</div>
+<p>Als nächstes werden wir einen Blick auf <a href="/de/XUL_Tutorial/Property-Dateien">Property Dateien</a> werfen.</p>
+<p>{{ PreviousNext("XUL_Tutorial/Eine_eigene_Skin_erstellen", "XUL_Tutorial/Property-Dateien") }}</p>
+<p>{{ languages( { "en": "en/XUL_Tutorial/Localization", "fr": "fr/Tutoriel_XUL/Localisation", "ja": "ja/XUL_Tutorial/Localization", "pl": "pl/Kurs_XUL/Lokalizacja" } ) }}</p>
diff --git a/files/de/archive/mozilla/xul/xul_tutorial/positionierung_von_elementen/index.html b/files/de/archive/mozilla/xul/xul_tutorial/positionierung_von_elementen/index.html
new file mode 100644
index 0000000000..756e025aaa
--- /dev/null
+++ b/files/de/archive/mozilla/xul/xul_tutorial/positionierung_von_elementen/index.html
@@ -0,0 +1,259 @@
+---
+title: Positionierung von Elementen
+slug: Archive/Mozilla/XUL/XUL_Tutorial/Positionierung_von_Elementen
+tags:
+  - XUL
+  - XUL Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/Element_Positioning
+---
+<div class="prevnext" style="text-align: right;">
+    <p><a href="/de/docs/XUL_Tutorial/Das_Box-Modell" style="float: left;">« zurück</a><a href="/de/docs/XUL_Tutorial/Details_zum_Box-Modell">weiter  »</a></p>
+</div>
+
+<p>Schauen wir uns die Steuerung von Positionen und Größen von XUL Elementen an.</p>
+
+<h2 id="Positionierung_in_Boxen">Positionierung in Boxen</h2>
+
+<p>Bis jetzt wissen wir, dass Elemente entweder horizontal oder vertikal innerhalb einer Box positioniert werden können. Meistens brauchen wir aber weitere Steuerungsmöglichkeiten zur Position und Größe von Elementen in der Box. Dazu müssen wir uns zunächst anschauen wie eine Box arbeitet.</p>
+
+<p>Die Position eines Elementes wird vom Layout des Containers bestimmt. Zum Beispiel ist die Position einer Schaltfläche in einer horizontalen Box rechts von der vorherigen Schaltfläche, sofern diese existiert. Die Größe eines Elements wird von zwei Faktoren beeinflusst: Die Größe, die das Element an Größe braucht und die Größe, die Sie festlegen. Die Größe, die das Element braucht, hängt vom dem ab, was sich innerhalb des Elements befindet. Zum Beispiel wird die Breite einer Schaltfläche anhand des Textes, welcher sich darauf befindet, berechnet.</p>
+
+<p>Ein Element wird generell so groß wie es Inhalt vorschreibt und nicht größer. Einige Elemente verfügen über eine Standardgröße (z.B. Textboxen), welche verwendet wird. Eine horizontale Box mit drei Schaltflächen darin, wird so groß wie die drei Schaltflächen plus einem kleinen zusätzlichen Abstand.</p>
+
+<div class="float-right"><img alt="Image:boxstyle1n.png" class="internal" src="/@api/deki/files/571/=Boxstyle1n.png"></div>
+
+<p>Im Bild wurde den ersten beiden Schaltflächen eine passende Größe vorgeschrieben, um den Text anzuzeigen. Die dritte Schaltfläche ist größer, weil sie mehr Inhalt enthält. Die Breite der umschließenden Box ist die Summe der Breite der drei Schaltflächen plus einem zusätzlichen Abstand zwischen ihnen. Die Höhe der Schaltflächen ist passend zur Textgröße berechnet worden.</p>
+
+<h3 id="Width_und_height_Attribute">Width und height Attribute</h3>
+
+<p>Sie möchten sicher mehr Einfluss auf die Größe eines Elements in einem Fenster nehmen können. Es gibt eine Reihe von Features, die Ihnen erlauben die Größe eines Elementes festzulegen. Der schnellste Weg ist, einfach die <code><code id="a-width"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/width">width</a></code></code> und <code><code id="a-height"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/height">height</a></code></code> Attribute festzulegen, genauso wie Sie es vielleicht von HTML kennen. Ein Beispiel dazu:</p>
+
+<p><span id="Beispiel_1"><a id="Beispiel_1"></a><strong>Beispiel 1</strong></span>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_1.xul.txt">Datei</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_1.xul">Ansehen</a></p>
+
+<pre>&lt;button label="OK" width="100" height="40"/&gt;
+</pre>
+
+<p>Es ist jedoch nicht empfohlen, das so zu machen. Es ist passt nicht in einige Themes und ist umständlicher anpassbar. Ein besserer Weg ist, CSS Eigenschaften zu verwenden, welche wie in HTML arbeiten. Die folgenden CSS Eigenschaften können dazu verwendet werden:</p>
+
+<dl>
+ <dt><a href="/de/docs/Web/CSS/width" title="Die width CSS Eigenschaft legt die Breite des Inhaltsbereichs eines Elements fest. Der Inhaltsbereich ist innerhalb des Innenabstands, Rahmens und Außenabstands des Elements."><code>width</code></a></dt>
+ <dd>Legt die Breite eines Elementes fest.</dd>
+ <dt><a href="/de/docs/Web/CSS/height" title="Die height CSS Eigenschaft bestimmt die Höhe des Inhaltsbereichs eines Elements. Der Inhaltsbereich ist innerhalb des Innenabstands, der Rahmen und des Außenabstands des Elements."><code>height</code></a></dt>
+ <dd>Legt die Höhe eines Elementes fest.</dd>
+</dl>
+
+<p>Werden beide Eigenschaften festgelegt, wird das Element mit dieser Breite und Höhe erstellt. Wird nur eines der beiden angegeben, wird die andere Eigenschaft nach dem benötigten Platz berechnet. Die Größe sollte als Zahl gefolgt von einer Einheit angegeben werden.</p>
+
+<h3 id="Flexible_Elemente">Flexible Elemente</h3>
+
+<p>Die Größen der Elemente sind ziemlich einfach zu berechnen für nicht-flexible Elemente. Sie folgen einfach der festgelegten Breiten und Höhen und sobald eine Größe nicht festgelegt wurde, wird das Element so groß wie es für den Inhalt erforderlich ist. Für flexible Elemente ist die Berechnung allerdings nicht ganz so einfach.</p>
+
+<p>Flexible Elemente sind solche, die über ein <code><code id="a-flex"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code> Attribut verfügen und einen Wert größer als 0 haben. Flexible Elemente passen sich an den verfügbaren Freiraum an. Die Standardgröße wird trotzdem genauso berechnet wie für nicht-flexible Elemente. Das folgende Beispiel soll dies verdeutlichen:</p>
+
+<p><span id="Beispiel_2"><a id="Beispiel_2"></a><strong>Beispiel 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_2.xul.txt">Datei</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_2.xul">Ansehen</a></p>
+
+<pre>&lt;window orient="horizontal"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
+
+&lt;hbox&gt;
+  &lt;button label="Yes" flex="1"/&gt;
+  &lt;button label="No"/&gt;
+  &lt;button label="I really don't know one way or the other"/&gt;
+&lt;/hbox&gt;
+
+&lt;/window&gt;
+</pre>
+
+<p>Das Fenster wird zunächst so erscheinen wie im vorherigen Bild. Die ersten beiden Schaltflächen werden auf eine passende Breite und die dritte Schaltfläche auf längere Breite skaliert, weil diese über eine längere Aufschrift verfügt. Die erste Schaltfläche ist flexibel und alle Elemente wurde in eine Box getan. Die Breite dieser Box wird auf die Startgröße aller drei Schaltflächen gesetzt (ca. 430 Pixel in dem Bild).</p>
+
+<p>Wenn Sie nun das Fenster vergrößern, wird überprüft, ob Elemente flexibel sind, um den entstehenden Freiraum zu füllen, der entstehen würde. Da die erste Schaltfläche das einzig flexible Element ist, sollte es größer werden. Das geschieht in diesem Fall jedoch nicht, da die Box in dem sich die Schaltfläche befindet nicht flexibel ist. Ein unflexibles Element kann niemals seine Größe ändern, wenn der Platz verfügbar ist. Die Schaltfläche kann also nicht größer werden.</p>
+
+<p>Die Lösung ist, die Box ebenfalls flexibel zu machen. Wird dann das Fenster größer gemacht, ist zusätzlicher Raum verfügbar und die Box wird diesen Raum füllen. Weil die Box größer ist, ist auch mehr Platz innerhalb verfügbar und die flexible Schaltfläche kann diesen Platz einnehmen. Dieser Prozess wird für jede Verschachtelung wiederholt.</p>
+
+<h2 id="Minimale_und_maximale_Größen_festlegen">Minimale und maximale Größen festlegen</h2>
+
+<p>Vielleicht möchten Sie, dass ein Element eine bestimmte Größe besitzt, aber dennoch flexibel ist. Es können Größen festgelegt werden, die auch flexible Elemente nicht über- oder unterschreiten sollen. Diese Einstellung erreicht man mit diesen vier Attributen:</p>
+
+<dl>
+ <dt><code id="a-minwidth"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/minwidth">minwidth</a></code></dt>
+ <dd>Legt die minimale Breite eines Elements fest.</dd>
+ <dt><code id="a-minheight"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/minheight">minheight</a></code></dt>
+ <dd>Legt die minimale Höhe eines Elements fest.</dd>
+ <dt><code id="a-maxwidth"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/maxwidth">maxwidth</a></code></dt>
+ <dd>Legt die maximale Breite eines Elements fest.</dd>
+ <dt><code id="a-maxheight"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/maxheight">maxheight</a></code></dt>
+ <dd>Legt die maximale Höhe eines Elements fest.</dd>
+</dl>
+
+<p>Die Werten werden immer in Pixeln angegeben. Es können auch die zugehörigen CSS Eigenschaften angegeben werden: <code>min-width</code>, <code>min-height</code>, <code>max-width</code> und <code>max-height</code>.</p>
+
+<p>Diese Eigenschaften sind nur für flexible Elemente sinnvoll. Wird zum Beispiel eine maximale Höhe festgelegt, wird eine Schaltfläche nur bis zu einer bestimmten Größe skaliert. Sie können das Fenster weiterhin vergrößern, die Schaltfläche wird jedoch nicht weiter vergrößert werden. Die Box, in der sich die Schaltfläche befindet wird sich weiterhin anpassen, wenn Sie keine maximale Höhe festgelegt haben.</p>
+
+<p>Wenn zwei Schaltflächen flexibel sind, werden sich normalerweise beide den freien Platz gleichermaßen teilen. Falls eine Schaltfläche eine maximale Breite hat, wird die zweite Schaltfläche den restlichen Freiraum mit einnehmen.</p>
+
+<p>Wenn eine Box über eine maximale Breite oder Höhe verfügt, können die darin enthaltenen Kindelemente nicht größer als die festgelegte Größe der Box werden. Wenn eine minimale Breite oder Höhe vorliegt, können die Kindelemente ebenfalls nicht kleiner werden.</p>
+
+<h5 id="Beispiele_zur_Festlegung_von_Breiten_und_Höhen">Beispiele zur Festlegung von Breiten und Höhen</h5>
+
+<pre>&lt;button label="1" style="width: 100px;"/&gt;
+&lt;button label="2" style="width: 100em; height: 10px;"/&gt;
+&lt;button label="3" flex="1" style="min-width: 50px;"/&gt;
+&lt;button label="4" flex="1" style="min-height: 2ex; max-width: 100px"/&gt;
+&lt;textbox flex="1" style="max-width: 10em;"/&gt;
+&lt;description style="max-width: 50px"&gt;This is some boring but simple
+wrapping text.&lt;/description&gt;
+</pre>
+
+<dl>
+ <dt>Beispiel 1 </dt>
+ <dd>Die erste Schaltfläche wird mit einer Breite von 100 Pixeln (px bedeutet Pixel) angezeigt. Die Einheit muss angegeben werden, sonst wird die Breite ignoriert.</dd>
+ <dt>Beispiel 2 </dt>
+ <dd>Die zweite Schaltfläche wird mit einer Höhe von 10 Pixeln und einer Breite von 100em (ein em ist die Größe eines Zeichens der aktuellen Schrift) angezeigt.</dd>
+ <dt>Beispiel 3 </dt>
+ <dd>Die dritte Schaltfläche ist flexibel, sie wird also auf Basis der Größe Box der angezeigt. Die Schaltfläche wird jedoch niemals kleiner als 50 Pixel breit. Andere flexible Komponenten wie z.B. Spacer werden den verbleibenden Platz einnehmen.</dd>
+ <dt>Beispiel 4 </dt>
+ <dd>Die vierte Schaltfläche is flexibel und wird niemals eine Höhe haben, die kleiner als 2 ex ist (ein ex ist normalerweise die Höhe des Buchstaben x der aktuellen Schrift) oder größer als 100 Pixel ist.</dd>
+ <dt>Beispiel 5 </dt>
+ <dd>Das Texteingabefeld ist flexibel, wird aber niemals größer als 10em werden. Sie werden vermehrt em verwenden wollen, da Sie Größen für Elemente festlegen, die Text enthalten. Diese Einheit ist hilfreich für Textboxen, da die Schrift geändert werden kann und die Textbox immer eine passende Größe hat, auch wenn der Text mal ganz groß werden sollte.</dd>
+ <dt>Beispiel 6 </dt>
+ <dd>Das <code><code><a href="/de/docs/Mozilla/Tech/XUL/description" title="description">description</a></code></code> Element wird gezwungen eine maximale Breite von 50 Pixeln zu besitzen. Der Text innerhalb wird in eine neue Zeile verschoben, wenn die 50 Pixel erreicht sind.</dd>
+</dl>
+
+<div class="highlight">
+<h5 id="Unser_Dateisuche-Dialog">Unser Dateisuche-Dialog</h5>
+
+<p>Fügen wir einige dieser Möglichkeiten zu unserem Dateisuche-Dialog hinzu. Wir werden es so machen, dass die Textbox auf das gesamte Fenster ausgestreckt wird.</p>
+
+<pre>&lt;textbox id="find-text" flex="1" style="min-width: 15em;"/&gt;
+</pre>
+
+<div class="float-right"><img alt="Image:boxstyle1.png" class="internal" src="/@api/deki/files/570/=Boxstyle1.png"></div>
+
+<p>Hier wurde das Texteingabefeld flexibel gemacht. Demnach wird es sich anpassen, wenn der Benutzer die Fenstergröße ändert. Das ist sehr hilfreich, wenn der Benutzer einen langen Text einfügen möchte. Außerdem wurde eine minimale Breite von 15em festgelegt, damit immer zumindest 15 Zeichen zu sehen sind. Verkleinert der Benutzer den Dialog sehr stark, wird das Texteingabefeld nur bis 15em verkleinert. Es wird so gezeichnet werden, als wenn es sich auch außerhalb des Fensters ausbreitet. Beachten Sie, dass das Bild ein Texteingabefeld zeigt, welches auf die maximale Fenstergröße ausgebreitet wurde.</p>
+</div>
+
+<h2 id="Anordnung_in_Boxen">Anordnung in Boxen</h2>
+
+<p>Wenn Sie eine Box mit zwei Kindelementen haben, beide nicht flexibel, die Box ist aber flexibel. Zum Beispiel:</p>
+
+<p><span id="Beispiel_3"><a id="Beispiel_3"></a><strong>Beispiel 3</strong></span>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_3.xul.txt">Datei</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_3.xul">Ansehen</a></p>
+
+<pre>&lt;box flex="1"&gt;
+  &lt;button label="Happy"/&gt;
+  &lt;button label="Sad"/&gt;
+&lt;/box&gt;
+</pre>
+
+<p>Wenn Sie nun das Fenster vergrößern, wird die Box auf die Fenstergröße ausgedehnt. Die Schaltflächen sind nicht flexibel, sie werden also nicht ihre Breiten ändern. Das Ergebnis ist zusätzlicher Platz, der auf der rechten Seite der Fensters (innerhalb der Box) erscheint. Sie möchten aber unter Umständen, dass dieser freie Platz auf der linken Seite erscheint, sodass die Schaltflächen auf der rechten Seite des Fensters ausgerichtet werden.</p>
+
+<p>Sie könnten das lösen, in dem Sie ein <code><code><a href="/de/docs/Mozilla/Tech/XUL/spacer" title="spacer">spacer</a></code></code> Element innerhalb der Box platzieren, aber das wird umständlich, wenn Sie es für eine Vielzahl von Elementen machen müssen. Ein besserer Weg ist, ein zusätzliches Attribut <code><code id="a-pack"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code></code> dem <code><code><a href="/de/docs/Mozilla/Tech/XUL/box" title="box">box</a></code> Element hinzuzufügen</code>. Dieses Attribut gibt an, wie die Kindelemente innerhalb der Box angeordnet werden sollen. Für horizontal orientierte Boxen wird die horizontale Position der Kindelemente gesteuert. Für vertikal orientierte Boxen wird die die vertikale Position der Kindelemente gesteuert. Es können die folgenden Werte verwendet werden:</p>
+
+<dl>
+ <dt>start</dt>
+ <dd>Positioniert Elemente an der linken Seite für horizontale Boxen und an der oberen Seite für vertikale Boxen. Dies ist der Standardwert.</dd>
+ <dt>center</dt>
+ <dd>Zentriert Kindelemente in der Box.</dd>
+ <dt>end</dt>
+ <dd>Positioniert Elemente an der rechten Seite für horizontale Boxen und an der unteren Seite für vertikale Boxen.</dd>
+</dl>
+
+<p>Das <code><code id="a-pack"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code></code> Attribut wird in der Box festgelegt, die die auszurichteten Elemente enthält, nicht in den Elementen selbst.</p>
+
+<p>Wir können das vorherige Beispiel ändern, sodass die Elemente wie folgt zentriert werden:</p>
+
+<p><span id="Beispiel_4"><a id="Beispiel_4"></a><strong>Beispiel 4</strong></span>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_4.xul.txt">Datei</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_4.xul">Ansehen</a></p>
+
+<pre>&lt;box flex="1" pack="center"&gt;
+  &lt;button label="Happy"/&gt;
+  &lt;button label="Sad"/&gt;
+&lt;/box&gt;
+</pre>
+
+<p>Jetzt, wenn das Fenster verändert wurde, werden die Schaltflächen horizontal zentriert. Vergleichen Sie das Verhalten zum vorherigen Beispiel.</p>
+
+<h2 id="Box_Ausrichtung">Box Ausrichtung</h2>
+
+<p>Wenn das Fenster im Happy-Sad Beispiel oben horizontal verändern, wird die Box in der Breite wachsen. Wenn Sie das Fenster vertikal verändern, werden jedoch die Schaltflächen in ihrer Höhe mitwachsen. Das kommt daher weil, die Flexibilität standardmäßig für die vertikale Richtung aktiviert ist.</p>
+
+<p>Dieses Verhalten kann mit dem <code><code id="a-align"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code></code> Attribut gesteuert werden. Für horizontale Boxen werden die vertikalen Positionen der kindelemente gesteuert. Für vertikale Boxen werden die horizontalen Positionen der Kindelemente gesteuert. Die möglichen Werte sind ähnlich zu denen de<code><span style="font-family: Verdana,Tahoma,sans-serif;">s {</span>{XULAttr("pack")}}</code> Attributs.</p>
+
+<dl>
+ <dt>start</dt>
+ <dd>Richtet Elemente an der oberen Seite für horizontal Boxen und an der linken Seite für vertikale Boxen aus.</dd>
+ <dt>center</dt>
+ <dd>Zentriert Kindelemente in der Box.</dd>
+ <dt>end</dt>
+ <dd>Richtet Elemente an der unteren Seite für horizontale Boxen und an der rechten Seite für vertikale Boxen aus.</dd>
+ <dt>baseline</dt>
+ <dd>Richtet Elemente an der Textlinie aus. Nur für horizontale Boxen sinnvoll.</dd>
+ <dt>stretch</dt>
+ <dd>Standardwert. Sorgt dafür, dass die Elemente auf die Größe der Box ausgedehnt werden, wie ein flexibles Element nur in die andere Richtung.</dd>
+</dl>
+
+<p>Im Gegensatz zum <code><code id="a-pack"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code></code> Attribut, wird das <code><code id="a-align"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code></code> Attribut auf die beinhalteten Elemente der Box angewendet, nicht auf das Element selbst.</p>
+
+<p>Zum Beispiel, die erste Box unten wird die Kindelemente ausdehnen, weil das die Standardeinstellung ist. Die zweite Box hat ein <code><code id="a-align"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code></code> Attribut, seine Kindelemente werden also zentriert platziert.</p>
+
+<p><span id="Beispiel_5"><a id="Beispiel_5"></a><strong>Beispiel 5</strong></span>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_5.xul.txt">Datei</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_5.xul">Ansehen</a></p>
+
+<pre>&lt;?xml version="1.0"?&gt;
+&lt;?xml-stylesheet href="chrome://global/skin/" type="text/css"?&gt;
+
+&lt;window id="yesno" title="Question" orient="horizontal"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
+
+  &lt;hbox&gt;
+    &lt;button label="Yes"/&gt;
+    &lt;button label="No"/&gt;
+  &lt;/hbox&gt;
+  &lt;hbox align="center"&gt;
+    &lt;button label="Maybe"/&gt;
+    &lt;button label="Perhaps"/&gt;
+  &lt;/hbox&gt;
+
+&lt;/window&gt;
+</pre>
+
+<div class="float-right"><img alt="Image:boxstyle2-b.png" class="internal" src="/@api/deki/files/572/=Boxstyle2-b.png"></div>
+
+<p>Es können auch die CSS Eigenschaften: <code><a href="/de/CSS/-moz-box-pack" title="de/CSS/-moz-box-pack">-moz-box-pack</a></code> und <code><a href="/de/CSS/-moz-box-align" title="de/CSS/-moz-box-align">-moz-box-align</a></code> anstatt von Attributen verwendet werden.</p>
+
+<div class="note">Vielleicht finden Sie auch das <a class="external" href="http://developer.mozilla.org/samples/xultu/examples/aligner.xul">Ausrichtungsbeispiel</a> hilfreich, um die verschiedenen Eigenschaften auszuprobieren.</div>
+
+<h2 id="Text_und_Schaltflächen_abschneiden">Text und Schaltflächen abschneiden</h2>
+
+<p>Sie können eine Schaltfläche erstellen, die eine Beschriftung hat, die länger als die maximale Breite der Schaltfläche ist. Eine Lösung wäre sicher die Breite zu erhöhen, jedoch verfügen Schaltflächen (und andere Elemente mit einer Beschriftung) über ein spezielles Attribut. Das Attribut <code>"crop"</code> erlaubt Ihnen wie ein Text abgeschnitten wird, wenn dieser zu lang ist.</p>
+
+<p>Wenn der Text abgeschnitten wird, wird ein Auslassungszeichen (...) dort eingefügt, wo der Text ausgeschnitten wurde. Vier mögliche Werte sind dazu gültig:</p>
+
+<dl>
+ <dt>left</dt>
+ <dd>Der Text wird auf der linken Seite abgeschnitten.</dd>
+ <dt>right</dt>
+ <dd>Der Text wird auf der rechten Seite abgeschnitten.</dd>
+ <dt>center</dt>
+ <dd>Der Text wird in der Mitte abgeschnitten.</dd>
+ <dt>none</dt>
+ <dd>Der Text wird nicht abgeschnitten. Das ist das Standardverhalten.</dd>
+</dl>
+
+<p>Dieses Attribut ist wirklich nur dann sinnvoll, wenn ein Dialog so entworfen wurde, dass er verwendbar in jeder Große sein soll. Das <code>crop</code> Attribut kann auch bei anderen Elementen verwendet werden, die ein <code><span style="font-family: Verdana,Tahoma,sans-serif;">l</span>abel</code> Attribut für Beschriftungen verwenden. Das folgende Beispiel zeigt das Attribut in Aktion:</p>
+
+<p><span id="Beispiel_6"><a id="Beispiel_6"></a><strong>Beispiel 6</strong></span>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_6.xul.txt">Datei</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_6.xul">Ansehen</a></p>
+
+<div class="float-right"><img alt="Image:boxstyle2.png" class="internal" src="/@api/deki/files/573/=Boxstyle2.png"></div>
+
+<pre>&lt;button label="Push Me Please!" crop="right" flex="1"/&gt;
+</pre>
+
+<p>Beachten Sie, wie der Text der Schaltfläche auf der rechten Seiten abgeschnitten wird, wenn das Fenster verkleinert wird.</p>
+
+<div class="highlight">
+<p><span id="Aktueller_Dateisuche-Dialog"><a id="Aktueller_Dateisuche-Dialog"></a><strong>Aktueller Dateisuche-Dialog</strong></span>: <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-boxstyle.xul.txt">Datei</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-boxstyle.xul">Ansehen</a></p>
+</div>
+
+<p>Als nächstes eine Zusammenfassung und einige <a href="/de/XUL_Tutorial/Details_zum_Box-Modell" title="de/XUL Tutorial/Details zum Box-Modell">zusätzliche Details zum Box-Modell</a>.</p>
+
+<div class="prevnext" style="text-align: right;">
+    <p><a href="/de/docs/XUL_Tutorial/Das_Box-Modell" style="float: left;">« zurück</a><a href="/de/docs/XUL_Tutorial/Details_zum_Box-Modell">weiter  »</a></p>
+</div>
diff --git a/files/de/archive/mozilla/xul/xul_tutorial/xul_struktur/index.html b/files/de/archive/mozilla/xul/xul_tutorial/xul_struktur/index.html
new file mode 100644
index 0000000000..2469697a21
--- /dev/null
+++ b/files/de/archive/mozilla/xul/xul_tutorial/xul_struktur/index.html
@@ -0,0 +1,154 @@
+---
+title: XUL Struktur
+slug: Archive/Mozilla/XUL/XUL_Tutorial/XUL_Struktur
+tags:
+  - XUL
+  - XUL Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/XUL_Structure
+---
+<p>{{ PreviousNext("XUL_Tutorial/Einfuehrung", "XUL_Tutorial/Die_Chrome_URL") }}</p>
+
+<p>Wir werden mit einem Blick auf die Handhabung von XUL in Mozilla starten.</p>
+
+<h3 id="Wie_wird_XUL_behandelt">Wie wird XUL behandelt</h3>
+
+<p>In Mozilla wird XUL genauso behandelt wie HTML oder anderer Inhalt. Wenn man die URL einer HTML-Seite in das Adressfeld des Browsers eingibt, ortet der Browser die Webseite und lädt den Inhalt herunter. Die Mozilla Rendering-Engine übersetzt den HTML-Quelltext in ein Dokumentbaum mit <a href="/de/DOM" title="de/DOM">DOM</a>. Anschließend wird der Baum in ein Satz Objekte konvertiert, die am Bildschirm angezeigt werden können. <a href="/de/CSS" title="de/CSS">CSS</a>, Bilder und andere Technologien werden verwendet, um die Anzeige zu kontrollieren. XUL funktioniert größtenteils auf die selbe Art und Weise.</p>
+
+<p>In der Tat werden alle Dokumenttypen, egal ob HTML, XUL oder sogar <a href="/de/SVG" title="de/SVG">SVG</a>, durch den selben zugrunde liegenden Code behandelt. Das bedeutet, dass die selben CSS-Eigenschaften benutzt werden können, um sowohl HTML und XUL zu manipulieren. Daher können viele Funktionen von beiden genutzt werden. Doch gibt es einige Funktionen, welche nur von HTML verwendet werden können, wie z.B. Formulare, und andere, welche nur von XUL verwendet werden können, so wie <a href="/de/XUL_Tutorial/Overlays" title="de/XUL_Tutorial/Overlays">Overlays</a>. Da XUL und HTML auf die selbe Art und Weise behandelt werden, kann man beide, sowohl vom lokalen Dateisystem, von einer Webseite oder von einer Erweiterung oder einer selbständigen <a href="/de/XULRunner" title="de/XULRunner">XULRunner</a>-Anwendung laden.</p>
+
+<p>Inhalte aus entfernten Quellen z.B. <code><span class="nowiki">http://localhost/~username/</span></code> sind (egal ob HTML, XUL oder ein anderer Dokumententyp) aus Sicherheitsgründen in ihrem Handlungsspielraum beschränkt. Deshalb stellt Mozilla die Methode zur Verfügung, Inhalte lokal zu installieren und registriert die installierten Dateien in sein <strong><a href="/de/Chrome" title="de/Chrome">chrome</a></strong>-System. Dies ermöglicht, dass eine spezielle URL-Form genutzt werden kann, die <code>chrome://</code> URL genannt wird. Durch den Zugriff auf eine Datei mittels einer Chrome-URL erhält die Datei höhere Rechte, um auf lokale Dateien, Eigenschaften und Bookmarks zuzugreifen und andere privilegierte Operationen auszuführen. Webseiten erhalten diese Privilegien nicht, es sei denn sie sind mit einem digitalen Zertifikat signiert, und der Benutzer hat den Zugriff auf diese Operationen gewährt.</p>
+
+<p>Die <strong>chrome</strong>-Paketregistrierung ist der Weg, um es Firefox-Erweiterungen zu ermöglichen, Funktionen zum Browser hinzuzufügen. Erweiterungen sind kleine Pakete mit XUL-Dateien, JavaScript, Stylesheets und Bildern, die in einer einzigen Datei verpackt sind. Eine solche Datei kann mit einem ZIP-Programm erstellt werden. Wenn der Benutzer diese Datei herunterlädt, wird die Erweiterung auf seiner Maschine installiert. Sie hängt sich in den Browser ein, indem sie eine XUL-Eigenschaft benutzt, die man Overlay nennt. Sie erlaubt es, das XUL der Erweiterung mit dem XUL des Browsers zu kombinieren. Für den Benutzer scheint es, als ob die Erweiterung den Browser <em>verändert</em> hat, aber in Wirklichkeit ist der Quelltext separat und die Erweiterung kann leicht entfernt werden. Registrierte Pakete müssen natürlich nicht unbedingt Overlays benutzen. Wenn sie keinen Gebrauch von Overlays machen, ist die Erweiterung nicht von der Browser-Oberfläche aus erreichbar, aber man kann sie über die Chrome-URL erreichen, sofern das erwünscht ist.</p>
+
+<p>Eigenständige XUL-Anwendungen können XUL-Code auf ähnliche Weise enthalten, er wird aber natürlich als Teil der Installation eingebunden, anstatt separat als Erweiterung eingebettet zu werden. Dennoch wird der XUL-Code im chrome-System registriert, sodass die Applikation die Benutzeroberfläche darstellen kann.</p>
+
+<p>Der Mozilla Browser selbst ist ebenfalls nichts weiter als eine Sammlung von Paketen, die XUL-Dateien, JavaScript und Stylesheets enthalten. Diese Dateien können über die chrome URL erreicht werden, haben erweiterte Privilegien und verhalten sich auch sonst wie andere Pakete. Natürlich ist der Browser weitaus größer und komplexer als die meisten Erweiterungen. Firefox und Thunderbird und einige andere Komponenten sind alle in XUL geschrieben und erreichbar über chrome-URLs. Sie können diese Pakete erkunden, indem Sie die Dateien in dem chrome-Verzeichnis ansehen, wo Firefox oder die anderen XUL-Anwendungen installiert sind.</p>
+
+<p>Die chrome-URL beginnt immer mit 'chrome://'. Ähnlich wie eine <span class="nowiki">'http://'-</span>URL immer eine entfernte Website per HTTP adressiert und die 'file://'-URL immer lokale Dateien, referenziert die 'chrome://'-URL immer installierte Pakete und Erweiterungen. Wir werden uns die chrome-Syntax im nächsten Kapitel genauer ansehen. Es ist wichtig zu wissen, dass der Zugriff über eine chrome-URL erweiterte Privilegien gegenüber den anderen Arten von URLs erlangt. Beispielsweise hat eine HTTP-URL keine besonderen Rechte und es wird ein Fehler ausgegeben, wenn eine Website versucht, zum Beispiel lokale Dateien zu lesen. Wird hingegen eine Datei von einer chrome-URL aus geladen, hat sie das Recht, lokale Dateien ohne Einschränkungen zu lesen.</p>
+
+<p>Diese Unterscheidung ist wichtig. Es bedeutet, dass Websites bestimmte Dinge nicht tun können, wie zum Beispiel die Lesezeichen des Benutzers zu lesen. Diese Unterscheidung basiert nicht auf dem Inhalt, sondern nur auf der URL, die benutzt wird. Sowohl HTML als auch XUL auf einer Website haben keine erweiterten Rechte, wohingegen XUL und HTML, die mit einer chrome-URL geladen wurden, erweiterte Privilegien haben.</p>
+
+<p>Wenn Sie XUL auf einer Website benutzen möchten, müssen Sie nur die XUL-Dateien auf die Website stellen, genau so, wie Sie es auch mit HTML-Dateien tun. Laden Sie dann die URL in den Browser: <small><span class="nowiki">http://localhost/xul.php</span></small>. Vergewissern Sie sich, dass Ihr Webserver so konfiguriert ist, dass er XUL-Dateien mit dem passenden Content-Type <strong><code>application/vnd.mozilla.xul+xml</code></strong> ausliefert. (zum Beispiel mittels PHP: <code>header('content-type: application/vnd.mozilla.xul+xml');</code>). Der Content-Type stellt sicher, dass Mozilla HTML und XUL unterscheiden kann. Mozilla nutzt die Dateierweiterung nur, solange die Datei vom Dateisystem gelesen wird. Sie sollten trotzdem die <code>.xul</code>-Dateiendung für all Ihre XUL-Dateien benutzen. Sie können XUL-Dateien in Ihren Browser laden, indem Sie sie mit dem Browser öffnen oder im Datei-Manager die Datei doppelklicken.</p>
+
+<div class="note">Denken Sie daran, dass entfernte XUL-Dateien bedeutende Einschränkungen haben.</div>
+
+<h4 id="sect1"> </h4>
+
+<h4 id="Dokumenttypen_HTML_XML_XUL_CSS">Dokumenttypen: HTML XML XUL CSS</h4>
+
+<p>Mozilla verwendet deutlich unterschiedliche Arten des Dokumentenobjektmodells (<a href="/de/DOM" title="de/DOM">DOM</a>) für HTML und XUL, obwohl viele der Funktionen gemeinsam verwendet werden. Es gibt drei hauptsächliche Dokumententypen in Mozilla: HTML, XML und XUL. Natürlich wird HTML für HTML-Dokumente genutzt, XUL für XUL-Dokumente und XML für andere XML-Dokumenttypen. Da XUL ebenfalls XML ist, ist das XUL-Dokument als eine Unterart des XML-Dokumentes zu verstehen. Es gibt feine Unterschiede in der Funktionsweise. Zum Beispiel sind die Formularsteuerungen auf einer HTML-Seite über die <code>document.forms</code>-Eigenschaft erreichbar, während diese nicht für XUL-Dokumente verfügbar ist, weil XUL keine Formulare im Sinne von HTML haben. Andererseits sind spezielle XUL-Funktionen (wie Overlays und Templates) nur in XUL-Dokumenten verfügbar.</p>
+
+<p>Diese Unterscheidung zwischen den Dokumenten ist wichtig. Es ist möglich viele XUL-Funktionen in HTML oder XML-Dokumenten zu verwenden, sofern sie nicht spezifisch für den jeweiligen Dokumententyp sind. Andere Funktionen erfordern jedoch den richtigen Dokumententyp. Daher können Sie zum Beispiel XUL-Layouts in anderen Dokumenten verwenden, da diese nicht vom XUL-Dokumententyp abhängig sind.</p>
+
+<p>Um die oben genannten Punkte zusammenfassen:</p>
+
+<ul>
+ <li>Mozilla rendert sowohl <a href="/de/HTML" title="de/HTML">HTML</a> als auch <a href="/de/XUL" title="de/XUL">XUL</a> mit der gleichen zugrunde liegenden Engine und verwendet <a href="/de/CSS" title="de/CSS">CSS</a>, um das Aussehen festzulegen.</li>
+ <li>XUL kann von einer entfernten Seite, vom lokalen Dateisystem oder als Paket installiert und über eine <a href="/de/Chrome" title="de/Chrome">chrome</a>-URL erreicht werden. Von der letzten Möglichkeit machen Erweiterungen gebrauch.</li>
+ <li>Chrome-URLs können verwendet werden, um auf installierte Pakete zuzugreifen und sie mit erweiterten Privilegien zu öffnen.</li>
+ <li>HTML, XML und XUL haben alle einen unterschiedlichen Dokumententyp. Einige Funktionen können in jedem Dokumententyp verwendet werden, während andere einen bestimmten Typ erfordern.</li>
+</ul>
+
+<p>Die nächsten Abschnitte beschreiben die grundlegende Struktur eines Chrome-Pakets, welches in Mozilla installiert werden kann. Wenn Sie jedoch beginnen wollen eine einfache Anwendung zu schreiben, sollten Sie zu "<a href="/de/XUL_Tutorial/Ein_Fenster_erzeugen" title="de/XUL Tutorial/Ein Fenster erzeugen">Ein Fenster erzeugen</a>" springen und zu diesem Abschnitt später zurück kommen.</p>
+
+<h3 id="Paketorganisation">Paketorganisation</h3>
+
+<p>Mozilla ist so organisiert, sodass Sie so viele Komponenten wie Sie möchten, vorinstallieren können. Jede Erweiterung ist eine eigenständige Komponente mit einer separaten Chrome-URL. Mozilla verfügt außerdem über je eine Komponente für jedes installierte Theme und Sprachpaket. Jedes dieser Komponenten oder Pakete besteht aus einer Reihe von Dateien, welche die Benutzeroberfläche dafür beschreiben. Die Messenger-Komponente besitzt z.B. Beschreibungen für Fenster von Mailnachrichten oder Adressbuchdialogen.</p>
+
+<p>Die Pakete, die mit Mozilla ausgeliefert werden, befinden sich im Chrome-Verzeichnis, welches das Verzeichnis ist, wo Sie Mozilla installiert haben. Das Chrome-Verzeichnis ist das, wo Sie alle Dateien, die die Benutzeroberfläche beschreiben, finden. Normalerweise packen Sie alle XUL-Dateien für eine Anwendung in dieses Verzeichnis, obwohl Erweiterungen in das Erweiterungsverzeichnis für einen bestimmten Benutzer installiert werden. Das einfache Kopieren einer XUL-Datei in das <code>chrome-</code>Verzeichnis gibt der Datei noch keine erweiterten Rechte und außerdem kann sie nicht über eine chrome-URL aufgerufen werden. Um diese zusätzlichen Privilegien zu bekommen, müssen Sie eine Manifestdatei erstellen und diese in das Chrome-Verzeichnis packen. Diese Datei ist sehr einfach zu erstellen und ist normalerweise nur ein paar Zeilen lang. Diese Datei wird verwendet, um chrome-URLs auf eine Datei oder einen Verzeichnispfad zu binden, wo sich die XUL-Dateien befinden. Details zur Erstellung dieser Datei werden in einem <a href="/de/XUL_Tutorial/Manifest_Dateien" title="de/XUL Tutorial/Manifest Dateien">späteren Abschnitt</a> genauer betrachtet.</p>
+
+<p>Der einzige Weg Inhalte zu erstellen, die über eine Chrome-Url erreichbar sind, ist, ein Paket wie in nächsten Abschnitten beschrieben, zu erstellen. Das Verzeichnis wird 'chrome' genannt, weil es ein geeigneter Name zur Aufbewahrung von Chrome-Paketen ist, welche in Mozilla enthalten sind.</p>
+
+<p>Um die Verwirrung noch weiter zu treiben, gibt es noch zwei weitere Orte, wo das Wort "chrome" auftreten könnte. Das ist einmal das <code>-chrome-</code>Kommandozeilenargument und zum anderen der <code>chrome</code>-Modifier der <code><a href="https://developer.mozilla.org/en/DOM/window.open">window.open()</a>-</code>Funktion. Keine dieser Funktionen verteilen zusätzliche Privilegien, stattdessen werden sie verwendet, um ein neues Top-Level-Fenster ohne das Browser UI (Toolbars, Menü) zu erstellen. Sie werden diese Funktion sicher noch in komplexeren XUL Anwendungen verwenden, wenn Sie nicht das Browser UI um Ihre Dialogboxen herum haben wollen.</p>
+
+<p>Dateien eines Pakets werden normalerweise in einzelne JAR-Dateien zusammengefügt. Eine JAR-Datei kann mit einem ZIP-Tool erstellt werden. Beispielsweise können Sie JAR-Dateien in Mozilla's <code>chrome-</code>Verzeichnis öffnen, um die grundlegende Struktur des Pakets zu sehen. Obwohl es normal so ist, dass die Dateien in einer JAR-Datei gepackt sind, können Pakete genauso von einem normalen Verzeichnis erreicht werden. Obwohl Pakete normalerweise nicht auf diese Art ausgeliefert werden, ist es dennoch während der Entwicklung handlicher, die Dateien vorerst nicht zu packen, da Sie diese dann besser bearbeiten können ohne die Dateien jedes Mal neu zu packen zu müssen.</p>
+
+<p>Standardmäßig parsen Mozilla-Applikationen XUL-Dateien und Skripte und speichern eine vor-kompilierte Version im Speicher im Laufe der Anwendungssitzung. Das verbessert die Leistung. Dadurch wird XUL allerdings nicht neu geladen, auch nicht, wenn die Quelldateien sich geändert haben. Um diesen Mechanismus zu deaktivieren, ist es notwendig die Einstellung <code>nglayout.debug.disable_xul_cache</code> festzulegen. In Firefox muss diese Einstellung unter Umständen hinzugefügt werden, indem "about:config" in die Adresszeile eingegeben wird und dieser Wert auf "true" gesetzt wird. Oder Sie verändern die <code>user.js</code>-Einstellungsdatei manuell und fügen die folgende Zeile hinzu:</p>
+
+<pre class="eval">pref("nglayout.debug.disable_xul_cache", true);
+</pre>
+
+<p>Es gibt normalerweise drei verschiedene Teile eines chrome-Pakets, auch wenn sie alle optional sind. Jeder Teil wird in einem anderen Verzeichnis gespeichert. Diese drei Sets sind content, skin und locale, welche unten näher beschrieben sind. Ein bestimmtes Paket kann ein oder mehrere Skins und Sprachen bereitstellen und der Benutzer kann diese mit den eigenen ersetzen. Zusätzlich kann das Paket mehrere unterschiedliche Anwendungen enthalten, jedes davon über eine andere chrome-URL erreichbar. Das Paketsystem ist flexibel genug, um separate Downloads von anderen Teilen wie zum Beispiel andere Sprachen, handzuhaben.</p>
+
+<p>Die drei Typen der Chrome-Pakete sind:</p>
+
+<ul>
+ <li><strong>Content</strong> - Fenster und Skripte<br>
+  Beinhaltet Festlegungen zu Fenstern und der Benutzeroberfläche. Diese sind in XUL-Dateien gespeichert, welche eine <code>.xul</code>-Endung haben. Ein content-Paket kann mehrere XUL-Dateien besitzen, aber das Hauptfenster sollte den gleichen Dateinamen haben, wie die Anwendung selbst. Beispielsweise sollte ein "Editor"-Paket die Datei <code>editor.xul</code> haben. Skripte werden in separaten Dateien neben den XUL-Dateien platziert.</li>
+ <li><strong>Skin</strong> - Style Sheets, Bilder und andere Dateien zum Aussehen<br>
+  Style Sheets beschreiben Details zum Erscheinungsbild eines Fensters. Sie werden separat von den XUL-Dateien gespeichert, um Änderungen am Aussehen einfacher verwalten zu können. Etwaige Bilder werden hier ebenfalls gespeichert.</li>
+ <li><strong>Locale</strong> - Dateien zum Text und zur Sprache<br>
+  Der gesamte Text, welcher in der Anwendung angezeigt wird, wird hier gespeichert. Dadurch wird ermöglicht, dass der Benutzer eine eigene Sprache für das Paket bereitstellen kann.</li>
+</ul>
+
+<h3 id="Content_Pakete">Content Pakete</h3>
+
+<p>Der Name der JAR-Datei kann beschreiben, was sich darin befindet, aber Sie können nur sicher gehen, wenn Sie sich die Inhalte wirklich anschauen. Verwenden wir das Browserpaket, welches in Firefox enthalten ist als Beispiel. Wenn Sie Dateien in <code>browser.jar</code> entpacken, werden Sie die folgende Verzeichnisstruktur auffinden:</p>
+
+<pre>content
+   browser
+      browser.xul
+      browser.js
+      -- weitere XUL und JS-Dateien --
+      bookmarks
+         -- Bookmarks-Dateien --
+      preferences
+         -- Einstellungsdateien --
+.
+.
+.
+</pre>
+
+<p>Das lässt einfach als ein 'content'-Paket identifizieren, weil das oberste Verzeichnis "content" genannt wurde. Für Skins wird dieses Verzeichnis normalerweise "<code>skin"</code> und für Sprachen wird es normalerweise "<code>locale"</code> genannt. Dieses Benennungsschema ist nicht notwendig, aber es ist eine gute Konvention, um die Teile des Pakets klar trennen zu können. Einige Pakete können unter Umstand ein Abschnitt für content, skin sowie locale besitzen. In diesem Fall werden Sie ein Unterverzeichnis für jeden Typ finden. Chatzilla wird zum Beispiel auf diesem Weg ausgeliefert.</p>
+
+<p>Das "<code>content/browser</code>"-Verzeichnis enthält eine Vielzahl an Dateien mit der Endung <code>.xul</code> und <code>.js</code>. Die XUL-Dateien sind die mit der<code> .xul</code>-Endung. Die Dateien mit der <code>.js</code>-Endung sind JavaScript-Dateien, welche Skripte enthalten, die die Funktionen eines Fenstern steuern. Viele XUL-Dateien haben eine zugehörige JavaScript-Datei und einige haben sogar mehr als eine.</p>
+
+<p>In der Verzeichnisauflistung oben werden zwei Dateien genannt. Es gibt natürlich noch weitere, aber zur Einfachheit wurde diese ausgelassen. Die Datei <code>browser.xul</code> ist die XUL-Datei, die das Hauptfenster beschreibt. Das Hauptfenster für ein "content"-Paket sollte den selben Namen wie das Paket haben, mit der Endung <code>.xul</code>. In diesem Fall ist der Paketname "browser" also erwarten wir die Datei <code>browser.xul</code>. Einige der anderen XUL-Dateien beschreiben weitere Fenster. Die Datei <code>pageInfo.xul</code> beschreibt zum Beispiel den Seiteninformationsdialog.</p>
+
+<p>Viele Pakete werden eine <code>contents.rdf</code> Datei enthalten, welches das Paket beschreibt, den Autor und die Overlays, die verwendet werden. Diese Datei ist jedoch veraltet und wurde durch ein einfacheres Verfahren ersetzt. Die neue Methode ist die sogenannte Manifestdatei, die bereits erwähnt wurde. Diese Dateien finden Sie mit der Endung <code>.manifest</code> im Chrome-Verzeichnis. Die Datei <code>browser.manifest</code> beschreibt beispielsweise das Browser-Paket.</p>
+
+<p>Mehrere Unterverzeichnisse wie "<code>bookmarks</code>" und "<code>preferences</code>" sind zusätzliche Bereiche der Browser-Komponente. Sie werden nur in unterschiedlichen Ordnern aufbewahrt, um die Dateien besser organisieren zu können.</p>
+
+<h3 id="Skins_oder_Themes">Skins oder Themes</h3>
+
+<p>Obwohl der zugrunde liegende Code für Mozilla sie Skins nennt und die Benutzeroberfläche den Ausdruck "Themes" gebraucht, meinen beide die gleiche Sache. Die <code>classic.jar</code>-Datei beschreibt das Standard-Theme von Firefox. Die Struktur ist ähnlich zum content-Paket. Zum Beispiel <code>classic.jar</code>:</p>
+
+<pre>skin
+   classic
+      browser
+         browser.css
+         -- weitere browser Skin-Dateien --
+      global
+         -- globale Skin-Dateien --
+.
+.
+.
+</pre>
+
+<p>Auch hier ist die Verzeichnisstruktur nicht notwendig und wird zur besseren Organisation verwendet. Sie können sogar alle Dateien in ein Verzeichnis packen. Für große Anwendungen werden Unterverzeichnisse verwendet, um verschiedene Komponenten zu trennen. Im obigen Beispiel existiert ein Verzeichnis für Theme-bezogene Dateien des Browsers und ein Ordner für globale Theme-bezogene Dateien. Das "global"-Verzeichnis enthält Skin-Dateien, die allgemein für alle Pakete zu gebrauchen sind. Die Dateien sind für alle Komponenten angelegt und werden mit ihrer eigenständigen Anwendung eingebunden. Der globale Teil definiert den Teil der gemeinsamen XUL-Widgets, wohingegen die anderen Verzeichnisse Dateien enthalten, die speziell für die entsprechenden Anwendungen sind. Firefox bindet beide, die globalen und die Browser Theme-Dateien in einem Archiv ein, aber sie können auch einzeln eingebunden werden.</p>
+
+<p>Ein Skin besteht aus CSS-Dateien und einer Reihe von Bildern, die das Aussehen des Interface definieren. Die Datei <code>browser.css</code> wird von <code>browser.xul</code> verwendet und enthält Styles, welche das Aussehen unterschiedlicher Teile der Anwendung beschreiben. Beachten Sie hier wieder, dass die Datei <code>browser.css</code> den gleichen Dateinamen wie das Paket besitzt. Beim Verändern von CSS-Dateien, stellen Sie das Aussehen eines Fensters ein, ohne dabei die Funktionen zu beeinflussen. Auf diese Weise können Sie ein neues Theme erstellen. Der XUL-Teil bleibt der Gleiche, aber der Skin-Teil wird unabhängig verändert.</p>
+
+<h3 id="Lokalisierung">Lokalisierung</h3>
+
+<p>Die Datei "<code>en-US.jar</code>" beschreibt die Sprachinformationen für jede Komponente, in diesem Fall für US-Englisch. Wie bei den Skins, enthält jede Sprachdatei Dateien, welche den Text für das Paket in der jeweiligen Sprache festlegen. Die Struktur von "locale" ist ähnlich zu den anderen, wir werden das hier nicht noch einmal auflisten.</p>
+
+<p>Der lokalisierte Text wird in zwei verschiedenen Dateitypen gespeichert: DTD-Dateien und properties-Dateien. Die DTD Dateien haben die Endung <code>.dtd</code> und enthalten Entity-Deklarationen, eine für jeden Textstring, welcher in einem Fenster verwendet wird. Die Datei <code>browser.dtd</code> enthält zum Beispiel Entity-Deklarationen für jedes Menü-Kommando. Zusätzlich werden Tastaturkürzel für jedes Kommando definiert, weil Sie eventuell unterschiedlich in verschiedenen Sprachen sein können. DTD-Dateien werden von XUL Dateien benutzt, meist werden Sie eine Datei pro XUL Datei finden. Der "locale" Teil beinhaltet auch "properties" Dateien, welche ähnlich sind, aber von Skriptdateien verwendet werden. Die Datei <code>browser.properties</code> enthält einige solcher lokalisierter Strings.</p>
+
+<p>Diese Struktur erlaubt Ihnen Mozilla oder eine Komponente in verschiedene Sprachen zu übersetzen, in dem einfach ein neues "locale"-Verzeichnis hinzugefügt wird. Sie müssen den XUL-Code gar nicht verändern. Weiter kann eine andere Person ein anderes Paket hinzufügen, welches Unterstützung für eine neue Sprache bietet, ohne dass Ihr Originalpaket verändert wird.</p>
+
+<h3 id="Weitere_Pakete">Weitere Pakete</h3>
+
+<p>Es gibt ein spezielles Paket, welches "Toolkit" (oder "global") genannt wird. Wir haben uns das "global"-Verzeichnis für Skins angeschaut. Die Datei <code>toolkit.jar</code> enthält den zugehörigen "content"-Teil dazu. Es sind einige globale Dialoge und Definitionen darunter. Es wird auch das Standardaussehen und die Standardfunktionen der XUL-Widgets, wie Textboxen und Schaltflächen festgelegt. Diese Datei im globalen Teil eines Skin-Verzeichnisses enthalten das Standardaussehen für alle XUL Interface-Elemente. Das Toolkit-Paket wird von allen XUL-Applikationen verwendet.</p>
+
+<h3 id="Ein_Paket_hinzufügen">Ein Paket hinzufügen</h3>
+
+<p>Mozilla platziert die Pakete, die mit der Installation eingebunden werden, in das Chrome-Verzeichnis. Diese Dateien müssen dort jedoch nicht platziert werden. Wenn ein anderes Paket installiert wird, können Sie dies überall auf der Festplatte platzieren, so lange eine Manifestdatei darauf zielt. Es ergibt Sinn Pakete in das Chrome-Verzeichnis zu packen, einfach weil es bequemer ist. Jedoch funktionieren die Pakete genauso gut, wenn sie woanders liegen. Sie können die Dateien jedoch nicht auf einer entfernten Seite speichern, da die entfernte Seite nicht durch das lokale Dateisystem gemountet ist.</p>
+
+<p>Es gibt zwei <code>chrome</code>-Verzeichnisse für XUL-Applikationen: Eine ist dort installiert, wo auch die Anwendung installiert wurde, während die andere Teil des Benutzerprofils ist. Das erste Verzeichnis erlaubt Paketen über alle Benutzer zu agieren, während das zweite Verzeichnis nur für den jeweiligen Benutzer erstellt worden ist. Erweiterungen werden in einem separaten  Erweiterungsverzeichnis installiert und sind außerdem Benutzer-spezifisch. Jede Manifestdatei in einem der Chrome-Verzeichnissen wird geprüft, um zu sehen, welche Pakete installiert sind.</p>
+
+<p>Im nächsten Abschnitt werden wir einen Blick darauf werfen, wie man die Chrome-URL verwendet, um sich auf Chrome-Pakete zu beziehen.</p>
+
+<p>{{ PreviousNext("XUL_Tutorial/Einfuehrung", "XUL_Tutorial/Die_Chrome_URL") }}</p>
+
+<p>{{ languages( { "en": "en/XUL_Tutorial/XUL_Structure", "es": "es/Tutorial_de_XUL/Estructura_XUL", "ja": "ja/XUL_Tutorial/XUL_Structure", "pl": "pl/Kurs_XUL/Struktura_XUL","fr": "fr/Tutoriel_XUL/La_structure_XUL" } ) }}</p>
diff --git a/files/de/archive/mozilla/xul/änderungen_an_xul_für_firefox_1.5/index.html b/files/de/archive/mozilla/xul/änderungen_an_xul_für_firefox_1.5/index.html
new file mode 100644
index 0000000000..685c091888
--- /dev/null
+++ b/files/de/archive/mozilla/xul/änderungen_an_xul_für_firefox_1.5/index.html
@@ -0,0 +1,44 @@
+---
+title: Änderungen an XUL für Firefox 1.5
+slug: Archive/Mozilla/XUL/Änderungen_an_XUL_für_Firefox_1.5
+tags:
+  - Firefox 1.5
+  - XUL
+translation_of: Archive/Mozilla/XUL/XUL_Changes_for_Firefox_1.5
+---
+<p>Diese Seite liefert eine Übersicht über die wichtigsten Änderungen an <a href="/de/XUL" title="de/XUL">XUL</a> in <a href="/de/Firefox_1.5_für_Entwickler">Firefox 1.5</a> (<a href="/de/Gecko" title="de/Gecko">Gecko</a> 1.8). Weitere Änderungen, von denen man wissen sollte, beschreibt die Seite <a href="/de/XUL_Anwendungen_für_Firefox_1.5_anpassen" title="de/XUL_Anwendungen_für_Firefox_1.5_anpassen">XUL Anwendungen für Firefox 1.5 anpassen</a>.</p>
+<h3 id="&lt;scrollcorner>"><code>&lt;scrollcorner&gt;</code></h3>
+<p>Es wurde das Element <code>&lt;scrollcorner&gt;</code> hinzugefügt, welche für den kleinen Kasten an der Überkreuzung von horizontalen und vertikalen Scrollbalken benutzt wird.</p>
+<h3 id="&lt;richlistbox>_und_&lt;richlistitem>"><code>&lt;richlistbox&gt;</code> und <code>&lt;richlistitem&gt;</code></h3>
+<p>Die Elemente <code>&lt;richlistbox&gt;</code> und <code>&lt;richlistitem&gt;</code> werden zur Darstellung von Listen beliebigen Inhalts benutzt. Das erst genannte funktioniert ähnlich wie <code>&lt;listbox&gt;</code>, welches vorwiegend für Listen mit Texteinträgen entworfen wurde. Die <code>&lt;richlistbox&gt;</code> hat größtenteils die gleiche API wie <code>&lt;listbox&gt;</code> und einzelne Einträge, die mithilfe von <code>&lt;richlistitem&gt;</code> erzeugt wurden, können ausgewählt werden. Siehe <a href="/de/XUL/Richlistbox">Richlistbox</a> für weiterführende Information.</p>
+<h3 id="System_für_Voreinstellungen">System für Voreinstellungen</h3>
+<p>Einige Elemente wurden hinzugefügt, mit denen Voreinstellungsfenster erzeugt werden können. Diese Fenster sind spezielle Typen von Dialogfenstern, die mehrere Panels unterstützen, welche jeweils zusammen in der gleichen Datei oder in einer eigenen Datei gespeichert werden können. Ein Satz von Icons wird am oberen Rand des Dialogfensters angezeigt und erlaubt dem Benutzer das Umschalten zwischen den Panels. Zusammen mit den neuen Elementen und einigen zusätzlichen Attributen für bestehende Elemente ermöglichen sie auf einfache Weise das Setzen von Voreinstellungen, ohne dafür Code benutzen zu müssen. Für weiterführende Information, siehe <a href="/de/Preferences_System" title="de/Preferences_System">Preferences System</a>.</p>
+<h3 id="bfcache"><code>bfcache</code></h3>
+<p>Mozilla speichert nun das DOM der Seite zwischen. Daher führt das Navigieren vor und zurück nicht zu einem Neuladen der Seite, was die Navigation sehr viel effizienter macht. Die Ereignisse <code>pageshow</code> und <code>pagehide</code> treten beim Umschalten von einer Seite im Zwischenspeicher auf, wohingegen die Ereignisse <code>load</code> und <code>unload</code> nur beim Laden und Entladen einer Seite auftreten.</p>
+<p>Für weiterführende Information siehe: <a href="/de/Benutzen_des_Zwischenspeichers_in_Firefox_1.5_(caching)">Benutzen des Zwischenspeichers in Firefox 1.5</a>.</p>
+<h3 id="tabIndex"><code>tabIndex</code></h3>
+<p>Die Eigenschaft <code>tabIndex</code> wird nun auf die meisten Elemente angewendet.</p>
+<h3 id="&lt;radiogroup>"><code>&lt;radiogroup&gt;</code></h3>
+<p>Das Setzen der <code>value</code> Eigenschaft eines <code>&lt;radiogroup&gt;</code> Elements führt zur Auswahl des <code>&lt;radio&gt;</code> Elements in der Gruppe mit dem entsprechenden Wert.</p>
+<h3 id="Dialog_defaultButton_Eigenschaft">Dialog: <code>defaultButton</code> Eigenschaft</h3>
+<p>Die Bindung des <code>&lt;dialog&gt;</code> Elements besitzt nun die Eigenschaft <code>defaultButton</code>. Das Setzen dieser Eigenschaft ändert die Standardschaltfäche des Dialogfensters. Die eine Möglichkeit ist die Angabe einer der Schaltflächen der <code>&lt;dialog&gt;</code>-Bindung (anhand des Namens); die andere ist <code>none</code>, dann ist keine Schaltfläche die Standardschaltfläche.</p>
+<h3 id="Schaltfläche_icon_Eigenschaft">Schaltfläche: <code>icon</code> Eigenschaft</h3>
+<p>Die <code>icon</code> Eigenschaft einer Schaltfläche ermöglicht die Verwendung vordefinierter Icons als Bild der Schaltfläche. Beispielsweise erzeugt<code> &lt;button icon="help"&gt;</code> eine Schaltfläche mit einem Hilfe-Icon. Dies wird typischerweise auf Systemen mit GNOME eingesetzt, die möglichen Werte sind hier: <code>accept</code>, <code>cancel</code>, <code>help</code>, <code>open</code>, <code>save</code>, <code>find</code>, <code>clear</code>, <code>yes</code>, <code>no</code>, <code>apply</code>, <code>close</code>, <code>print</code>, <code>add</code>, <code>remove</code>, <code>refresh</code>, <code>go-forward</code>, <code>go-back</code>, <code>properties</code>, <code>select-font</code>, <code>select-color</code>, <code>network</code>.</p>
+<h3 id="&lt;menulist>"><code>&lt;menulist&gt;</code></h3>
+<p>Einträge in einer <code>&lt;menulist&gt;</code> können ein <code>description</code> Attribut haben, um zusätzlich beschreibenden Text neben dem Namen eines Eintrags anzuzeigen. Die Änderungsmethoden <code>appendItem</code> und<code> insertItemAt </code>von <code>menulist</code> verlangen ein zusätzliches <code>description</code> Argument, wenn Einträge auf diese Weise erzeugt werden.</p>
+<h3 id="&lt;listbox>"><code>&lt;listbox&gt;</code></h3>
+<p>Die Methode <code>removeItemAt</code> war augrund eines Fehlers ({{ Bug(236068) }}) manchmal nicht nullbasiert. Dies wurde in Firefox 1.5 behoben und Code, der sich auf dieses nicht nullbasierte Verhalten verlässt, sollte entsprechend geändert werden.</p>
+<h3 id="&lt;stringbundle>"><code>&lt;stringbundle&gt;</code></h3>
+<p>Das <code>&lt;stringbundle&gt;</code> Element hat eine Eigenschaft <code>strings</code> dazu bekommen, die eine Aufzählung aller im Bündel enthaltenen Zeichenketten ermöglicht.</p>
+<h3 id="Ziehbare_Reiter">Ziehbare Reiter</h3>
+<p>Von jetzt an erlaubt der Tab-Browser ein Neuanordnen der Reiter durch einfaches Ziehen.</p>
+<h3 id="&lt;tabbox>"><code>&lt;tabbox&gt;</code></h3>
+<p>Das <code>&lt;tabbox&gt;</code> Element besitzt nun ein Attribut <code>selectedIndex</code> zur Angabe desjenigen Reiters, der standardmäßig gewählt sein soll.</p>
+<h3 id="Überlagerungen_dynamisch_laden">Überlagerungen dynamisch laden</h3>
+<p>XUL untersützt nun das dynamische Laden von <a href="/de/XUL_Overlays" title="de/XUL_Overlays">Überlagerungen</a> mithilfe der Funktion <code><a href="/de/DOM/document.loadOverlay" title="de/DOM/document.loadOverlay">document.loadOverlay</a></code>.</p>
+<div class="originaldocinfo">
+<h3 id="Information_zum_Originaldokument">Information zum Originaldokument</h3>
+<ul> <li>Autor: Neil Deakin</li>
+</ul>
+</div>
+<p>{{ languages( { "en": "en/XUL_Changes_for_Firefox_1.5", "fr": "fr/Modifications_XUL_pour_Firefox_1.5", "ja": "ja/XUL_Changes_for_Firefox_1.5", "pl": "pl/Zmiany_w_XUL-u_w_Firefoksie_1.5" } ) }}</p>
diff --git a/files/de/archive/mozilla/xulrunner/index.html b/files/de/archive/mozilla/xulrunner/index.html
new file mode 100644
index 0000000000..f4f7b708d4
--- /dev/null
+++ b/files/de/archive/mozilla/xulrunner/index.html
@@ -0,0 +1,81 @@
+---
+title: XULRunner
+slug: Archive/Mozilla/XULRunner
+tags:
+  - XUL
+  - XULRunner
+translation_of: Archive/Mozilla/XULRunner
+---
+<div class="callout-box"><strong><a href="/de/docs/Einführung_in_XULRunner" title="Einführung_in_XULRunner">XULRunner Einführung</a></strong><br>
+Eine kurzes Tutorial zu XULRunner.</div>
+
+<div><strong>XULRunner</strong> ist ein Mozilla-Laufzeitpaket, welches genutzt werden kann, um XUL+XPCOM-Anwendungen auszuführen. Es stellt Mechanismen zur Installation, Aktualisierung und Deinstallation solcher Anwendungen bereit. XULRunner stellt weiterhin libxul bereit, eine Lösung, welche es erlaubt Mozilla-Technologien in andere Projekte und Produkte einzubetten.</div>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h4 id="Ver.C3.B6ffentlichungen" name="Ver.C3.B6ffentlichungen">Veröffentlichungen</h4>
+
+    <div class="note">
+    <p>XULRunner 1.9.2 wurde veröffentlicht und kann unter <a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/" title="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/">ftp.mozilla.org</a> heruntergeladen werden. Siehe auch: <a href="/de/docs/XULRunner_1.9.2_Versionsinformationen" title="de/XULRunner_1.9.2_Versionsinformationen">Versionsinformationen</a> zur Installation, Deinstallation, und für weitere Informationen zu dieser Version.</p>
+
+    <p>Firefox 3 und höher sind mit einem XULRunner Paket ausgestattet, welches jede kompatible XULRunner Anwendung über den <code>-app</code> Parameter benutzen kann.</p>
+
+    <p><a href="/de/docs/XULRunner/ältere_Versionen" title="de/XULRunner//ältere_Versionen">Ältere Versionen</a> sind auch verfügbar.</p>
+    </div>
+
+    <h4 id="Überblick">Überblick</h4>
+
+    <ul>
+     <li>{{ interwiki('wikimo', 'XULRunner:Roadmap', 'Development Roadmap') }}</li>
+     <li><a href="/de/docs/XULRunner/Was_XULRunner_ermöglicht" title="de/XULRunner/Was_XULRunner_ermöglicht">Was XULRunner ermöglicht</a></li>
+     <li><a href="/de/docs/XULRunner_FAQ" title="de/XULRunner_FAQ">XULRunner FAQ</a></li>
+     <li>Nightly Build: <a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/nightly/latest-trunk/">unstable-trunk</a></li>
+     <li><a class="external" href="http://zenit.senecac.on.ca/wiki/index.php/XULRunner_Guide">XULRunner Guide</a> (engl.)</li>
+    </ul>
+
+    <h4 id="Dokumentation">Dokumentation</h4>
+
+    <dl>
+     <dt><a href="/de/docs/Einführung_in_XULRunner" title="Einführung_in_XULRunner">XULRunner Einführung</a></dt>
+     <dd><small>Eine kurze Einführung in XULRunner.</small></dd>
+     <dt><a href="/de/docs/XULRunner_Tipps" title="de/XULRunner_Tipps">XULRunner Tipps</a></dt>
+     <dd><small>Eine Sammlung von Tipps zum Arbeiten mit XULrunner.</small></dd>
+     <dt><a href="/de/docs/XULRunner/XULRunner_1.8_verwenden" title="de/XULRunner/XULRunner_1.8_verwenden">XULRunner 1.8 verwenden</a></dt>
+     <dd><small>Dieser Artikel beschreibt, wie man XULRunner 1.8 als eigenständige Anwendung verwendet.</small></dd>
+     <dt><a href="/de/docs/XULRunner_Hall_of_Fame" title="de/XULRunner_Hall_of_Fame">XULRunner Hall of Fame</a></dt>
+     <dd><small>Auflistung aller verfügbaren Anwendungen, die auf XULRunner basieren.</small></dd>
+     <dt><a href="/de/docs/Entwickler_Handbuch/Build_Anweisungen" title="de/Entwickler_Handbuch/Build_Anweisungen">Build Dokumentation</a></dt>
+     <dd><small>Wie man den Quelltext bekommt und kompiliert.</small></dd>
+     <dt><a href="/de/docs/Debugging_einer_XULRunner_Anwendung" title="de/Debugging_einer_XULRunner_Anwendung">Debug Dokumentation</a></dt>
+     <dd><small>Schritte, die man benötigt, um Venkman zum Debuggen zu konfigurieren.</small></dd>
+    </dl>
+
+    <p><span class="alllinks"><a href="/Special:Tags?tag=XULRunner&amp;language=de" title="Special:Tags?tag=XULRunner&amp;language=de">Alles anzeigen...</a></span></p>
+   </td>
+   <td>
+    <h4 id="Community" name="Community">Community</h4>
+
+    <ul>
+     <li>Mozillas Plattform Foren:</li>
+    </ul>
+
+    <p>{{ DiscussionList("dev-platform", "mozilla.dev.platform") }}</p>
+
+    <ul>
+     <li><a class="link-irc" href="irc://irc.mozilla.org/#xulrunner">#xulrunner on irc.mozilla.org</a></li>
+     <li><a href="/de/docs/XULRunner/Community" title="de/XULRunner/Community">Weitere Community Links...</a></li>
+    </ul>
+
+    <h4 id="Verwandte_Themen" name="Verwandte_Themen">Verwandte Themen</h4>
+
+    <dl>
+     <dd><a href="/de/docs/XUL" title="de/XUL">XUL</a></dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/de/archive/rss/index.html b/files/de/archive/rss/index.html
new file mode 100644
index 0000000000..e160b25010
--- /dev/null
+++ b/files/de/archive/rss/index.html
@@ -0,0 +1,13 @@
+---
+title: RSS
+slug: Archive/RSS
+tags:
+  - RSS
+translation_of: Archive/RSS
+---
+<div class="callout-box"><strong><a href="/de/RSS/Einführung" title="de/RSS/Einführung">Einführung</a></strong><br>
+Dieses Tutorial soll Anfängern den Einstieg in RSS erleichtern.</div>
+<div><strong>Really Simple Syndication (RSS)</strong> ist ein weit verbreitetes <a href="/de/HTML" title="de/HTML">HTML</a>-ähnliches und <a href="/de/XML" title="de/XML">XML</a>-basierendes Datenformat, welches zum Austausch von Inhalten benutzt wird. RSS hat eine schäbige Geschichte und eine Vielzahl an unterschiedlichen inkompatiblen <a href="/de/RSS/Version" title="de/RSS/Version">RSS Versionen</a> (einige sind auf <a href="/de/RDF" title="de/RDF">RDF</a> basiert, aber die meisten sind auf <a href="/de/XML" title="de/XML">XML</a> basiert). Nichtsdestotrotz ist RSS ein extrem populäres Format, das für den Austausch von Nachrichten, Blogposts, IPradio, IPTV und vielem mehr bestens geeignet ist und enorm an Fahrt gewonnen hat.</div>
+<table class="topicpage-table"> <tbody> <tr> <td> <h4 id="Dokumentation"><a href="/Special:Tags?tag=RSS&amp;language=de" title="Special:Tags?tag=RSS&amp;language=de">Dokumentation</a></h4> <dl> <dt><a href="/en/RSS/Article/Why_RSS_Slash_is_Popular_-_Counting_Your_Comments" title="en/RSS/Article/Why_RSS_Slash_is_Popular_-_Counting_Your_Comments">Why RSS Slash is Popular - Counting Your Comments</a> (en)</dt> <dd><small>Ein Artikel von Charles Iliya Krempeaux über das <em>RSS Slash</em> Modul, warum es so populär ist und wie es man schafft einen Zähler für seine Kommentare bereit zu stellen.</small></dd> </dl> <dl> <dt><a href="/en/RSS/Article/Why_Well-Formed_Web_RSS_Module_is_Popular_-_Syndicating_Your_Comments" title="en/RSS/Article/Why_Well-Formed_Web_RSS_Module_is_Popular_-_Syndicating_Your_Comments">Why Well-Formed Web RSS Module is Popular - Syndicating Your Comments</a> (en)</dt> <dd><small>Ein Artikel von Charles Iliya Krempeaux über das RSS <em>Well-Formed Web</em> Modul, warum es so populär ist und wie man damit Kommentare verlinkt.</small></dd> </dl> <dl> <dt><a class="external" href="http://diveintomark.org/archives/2004/02/04/incompatible-rss">The Myth of RSS Compatibility</a> (en)</dt> <dd><small>Mark Pilgrim schildert die schäbige Geschichte von RSS und Details zur Inkompatibilität zwischen jeder Version.</small></dd> </dl> <dl> <dt><a class="external" href="http://www.tbray.org/ongoing/When/200x/2005/07/27/Atomic-RSS">Atomic RSS</a> (en)</dt> <dd><small>Tim Bray schildert die Benutzung von Atom 1.0 als Mikroformat und erweiterndes Modul für RSS 2.0 sowie das Beibehalten von RSS 2.0 als Austauschformat, allerdings mit integrierten, ausgewählten Atom 1.0 Elementen.</small></dd> </dl> <p><span><a href="/Special:Tags?tag=RSS&amp;language=de" title="Special:Tags?tag=RSS&amp;language=de">Alle ansehen...</a></span></p> </td> <td> <h4 id="Community">Community</h4> <ul> <li>Mozillas XML-Foren:</li> </ul> <p>{{ DiscussionList("dev-tech-xml", "mozilla.dev.tech.xml") }}</p> <h4 id="Related_Topics">Verwandte Themen</h4> <dl> <dd><a href="/de/RDF" title="de/RDF">RDF</a>, <a href="/de/XML" title="de/XML">XML</a></dd> </dl> </td> </tr> </tbody>
+</table>
+<p>{{ languages( { "en": "en/RSS","es": "es/RSS", "fr": "fr/RSS", "it": "it/RSS", "ja": "ja/RSS", "pl": "pl/RSS", "pt": "pt/RSS", "ko": "ko/RSS" } ) }}</p>
diff --git a/files/de/archive/themes/index.html b/files/de/archive/themes/index.html
new file mode 100644
index 0000000000..a440be2e7a
--- /dev/null
+++ b/files/de/archive/themes/index.html
@@ -0,0 +1,11 @@
+---
+title: Themes
+slug: Archive/Themes
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/Themes
+---
+<p>Archived theme documentation.</p>
+
+<p>{{Listsubpages("/en-US/docs/Archive/Themes", 10)}}</p>
diff --git a/files/de/archive/web-standards/index.html b/files/de/archive/web-standards/index.html
new file mode 100644
index 0000000000..6b29b8e71c
--- /dev/null
+++ b/files/de/archive/web-standards/index.html
@@ -0,0 +1,69 @@
+---
+title: Webstandards
+slug: Archive/Web-Standards
+tags:
+  - Webstandards
+translation_of: Archive/Web_Standards
+---
+<div>
+ <strong>Webstandards</strong> wurden sorgfältig entworfen, um für die größtmögliche Zahl von Internet-Nutzern den größtmöglichen Nutzen zu erzielen und gleichzeitig die Langlebigkeit von im Internet veröffentlichten Dokumenten sicherzustellen. Wer sich beim Entwerfen und Erstellen von Websites an diese Standards hält, vereinfacht die Produktion und senkt die Kosten, während gleichzeitig Websites entstehen, die für mehr Menschen und mehr webfähige Endgeräte zugänglich sind. Websites, die gemäß dieser Richtlinien entwickelt wurden, bleiben auch dann voll funktionsfähig, wenn sich herkömmliche Desktop-Browser verändern und neue internetfähige Endgeräte auf den Markt kommen.{{ Ref(1) }}</div>
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h4 id="Dokumentation">Dokumentation</h4>
+    <dl>
+     <dt>
+      <a href="https://developer.mozilla.org/en-US/docs/Migrate_apps_from_Internet_Explorer_to_Mozilla">Anwendungen vom Internet Explorer zu Mozilla migrieren</a></dt>
+     <dd>
+      <small>Jemals Probleme mit Internet Explorer-spezifischen Webanwendungen unter Mozilla gehabt? In diesem Artikel werden geläufige Probleme bei der Verwendung von IE-Anwendungen unter Mozilla-basierenden Browsern erläutert.</small></dd>
+     <dt>
+      <a href="https://developer.mozilla.org/en/Using_Web_Standards_in_your_Web_Pages">Verwendung von Webstandards</a></dt>
+     <dd>
+      <small>Dieser Artikel liefert einen Überblick über die Einhaltung von W3C Webstandards für die Inhalte der eigenen Webseite.</small></dd>
+     <dt>
+      <a href="https://developer.mozilla.org/en/Choosing_Standards_Compliance_Over_Proprietary_Practices">Wahl von Webstandards gegenüber proprietären Praktiken</a></dt>
+     <dd>
+      <small>In der Welt der (Web-)Entwicklung gibt es einen Bedarf an Standards, weil Anwendungen für für mehrere Entwicklergruppen entworfen werden.</small></dd>
+     <dt>
+      <a href="https://developer.mozilla.org/en/The_Business_Benefits_of_Web_Standards">Vorteile von Webstandards</a></dt>
+     <dd>
+      <small>Wie das Festhalten an Webstandards sowie die Verminderung von proprietären Markup und Technologien dazu beitragen kann, geschäftliche Ziele zu erreichen.</small></dd>
+    </dl>
+   </td>
+   <td>
+    <h4 id="Community" name="Community">Community</h4>
+    <p>Mozillas Webstandardsforen</p>
+    <div>
+     {{ DiscussionList("dev-web-development", "mozilla.dev.web-development") }}</div>
+    <ul>
+     <li><a class="external" href="http://webstandards.org/">Das Web Standards Projekt (en)</a></li>
+     <li><a class="external" href="http://webdevfeedhouse.com/">WebDev FeedHouse (en)</a></li>
+     <li><a href="/de/Web-Standards/Community" title="de/Web-Standards/Community">Weitere Community Links</a></li>
+    </ul>
+    <h4 id="Tools" name="Tools">Tools</h4>
+    <ul>
+     <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug Erweiterung</a></li>
+     <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/60">Web Developer Erweiterung</a></li>
+     <li><a class="external" href="http://validator.w3.org/">Markup Validator (W3C)</a></li>
+     <li><a class="external" href="http://jigsaw.w3.org/css-validator/">CSS Validator (W3C)</a></li>
+     <li><a href="/Special:Tags?tag=Webstandards:Tools&amp;language=de" title="Special:Tags?tag=Webstandards:Tools&amp;language=de">Weitere Tools...</a></li>
+    </ul>
+    <h4 id="Beispiele">Beispiele</h4>
+    <ul>
+     <li><a class="external" href="http://www.mozilla.org/start/1.0/demos.html">Mozilla 1.0 Demos</a></li>
+     <li><a class="external" href="http://www.mozilla.org/newlayout/demo/">Gecko Demos</a></li>
+     <li><a class="external" href="http://www.csszengarden.com/">CSS Zen Garden</a></li>
+     <li><a class="external" href="http://www.meyerweb.com/eric/css/edge/">Eric Meyers's CSS Ecke</a></li>
+     <li><a class="external" href="http://dmoz.org/Computers/Programming/Languages/JavaScript/W3C_DOM/Demos/">W3C DOM Demos</a></li>
+    </ul>
+    <h4 id="Verwandte_Themen">Verwandte Themen</h4>
+    <dl>
+     <dd>
+      <a href="/de/CSS" title="de/CSS">CSS</a>, <a href="/de/DHTML" title="de/DHTML">DHTML</a>, <a href="/de/HTML" title="de/HTML">HTML</a>, <a href="/de/Webentwicklung" title="de/Webentwicklung">Webentwicklung</a>, <a href="/de/XHTML" title="de/XHTML">XHTML</a>, <a href="/de/XML" title="de/XML">XML</a></dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<p><small>{{ endnote("1") }} - <a class="external" href="http://webstandards.org/">The Web Standards Project</a></small></p>
diff --git a/files/de/archive/web-standards/rdf_in_mozilla_faq/index.html b/files/de/archive/web-standards/rdf_in_mozilla_faq/index.html
new file mode 100644
index 0000000000..cbd3c1194b
--- /dev/null
+++ b/files/de/archive/web-standards/rdf_in_mozilla_faq/index.html
@@ -0,0 +1,264 @@
+---
+title: RDF in Mozilla FAQ
+slug: Archive/Web-Standards/RDF_in_Mozilla_FAQ
+tags:
+  - RDF
+translation_of: Archive/Web_Standards/RDF_in_Mozilla_FAQ
+---
+<h2 id="Allgemeines">Allgemeines</h2>
+<h3 id="Wo_fange_ich_an">Wo fange ich an?</h3>
+<p><a href="/de/RDF" title="de/RDF">RDF</a> dient zwei primären Zielen in Mozilla. Erstens ist es eine einfache, plattformübergreifende Datenbank für kleinere Datenmengen und zweitens - und das ist der Hauptgrund - wird das RDF-Modell zusammen mit <a href="/de/XUL/Vorlagen_Tutorial" title="de/XUL/Vorlagen Tutorial">XUL Templates</a> als eine abstrakte "API" zur Anzeige von Informationen benutzt. <a href="/de/RDF_in_fünfzig_Worten_oder_weniger" title="de/RDF_in_fünfzig_Worten_oder_weniger">RDF in fünfzig Worten oder weniger</a> ist eine kurze Beschreibung auf hohem Niveau, was RDF in Mozilla macht. Die <a class=" external" href="http://www.mozilla.org/rdf/back-end-architecture.html" title="http://www.mozilla.org/rdf/back-end-architecture.html">RDF Back-End Architektur</a> beschreibt die RDF Implementierung in Mozilla detaillierter und gibt eine kurze Übersicht der beteiligten Schnittstellen.</p>
+<h3 id="Wo_finde_ich_Informationen_über_Open_Directory_(dmoz)">Wo finde ich Informationen über Open Directory ("dmoz")?</h3>
+<p>Detaillierte Informationen zu Open Directory gibt es auf <a class="external" href="http://www.dmoz.org/">www.dmoz.org</a>. Das Open Directory Datenset ist als (riesiger) RDF/XML Dump verfügbar. Es beschreibt tausende von Webseiten, die eine Mischung aus dem <a class="external" href="http://www.dublincore.org/">Dublin Core</a> Metadaten-Vokabular und der DMoz Klassifizierung benutzen. Für mehr Informationen zu diesem Thema lesen Sie bitte die <a class="external" href="http://dmoz.org/rdf.html">DMoz RDF Seiten</a> oder <a class="external" href="http://groups.yahoo.com/group/odp-rdf-announce/">odp-rdf-announce</a> für Änderungen an dessen genauem Datenformat. Die Seite <a class="external" href="http://chefmoz.org/">ChefMoz</a> (gemeinnütziger Restaurantführer) ist auch als <a class="external" href="http://chefmoz.org/rdf.html">RDF verfügbar</a>.</p>
+<p>Wenn Sie Probleme mit den Daten von DMoz bzw. ChefMoz haben, ist es das Beste, die Leute hinter diesen Projekten direkt zu kontaktieren. Aber wenn Sie etwas Interessantes mit diesem Inhalt machen (z.B. ihn in Mozilla benutzen, um beispielsweise Teile davon in das XUL UI von einer entfernten Seite zu laden), vergessen Sie bitte nicht, es <a class="link-mailto" href="mailto:mozilla-rdf@mozilla.org">mozilla-rdf</a> und die <a class="link-mailto" href="mailto:www-rdf-interest@w3.org">RDF Interest Group</a> wissen zu lassen. Diese Gruppen sind wahrscheinlich auch an Tools interessiert, die die DMoz Daten säubern, umgestalten oder speichern. Besuchen Sie die <a class="external" href="http://dmoz.org/Computers/Internet/Searching/Directories/Open_Directory_Project/Use_of_ODP_Data/">Seiten, die ODP Daten benutzen</a>, um einige Verzeichnisse zu sehen, die auf den ODP RDF Dumps basieren.</p>
+<h3 id="Was_ist_eine_Datenquelle">Was ist eine Datenquelle?</h3>
+<p>RDF kann für gewöhnlich auf zwei verschiedene Arten angezeigt werden: Entweder als Datenmenge mit Knoten und Bogen oder als Gruppierung logischer Aussagen. Eine Datenquelle ist eine Teilmenge (oder eine Ansammlung von Aussagen, abhängig von Ihrem Standpunkt), die aus bestimmten Gründen zusammengefasst werden. Einige Beispiele für bereits existierende Datenquellen sind Browser Lesezeichen, Browser Verlauf, IMAP E-Mail Accounts, NNTP News Server und RDF/XML Dateien.</p>
+<p>In Mozilla können Datenquellen mit Hilfe der <a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/base/idl/nsIRDFCompositeDataSource.idl">Composite Data Source</a> <em>zusammengefasst</em> werden. Dies entspricht dem Überlagern von Datenmengen oder dem Zusammenfassen von Gruppen von Aussagen. Aussagen über die selbe RDF <em>Ressource</em> können dann gemischt werden: Zum Beispiel das Datum des letzten Besuchs einer bestimmten Webseite kommt aus dem globalen Browser-Verlauf und die Tastenkombination zum Erreichen der Webseite per Tastatur kann aus der Datenquelle für die Browser-Lesezeichen stammen. Beide Datenquellen gehören zur Webseite, die über die URL angesprochen wird: Das ist der Schlüssel, der es erlaubt, die Datenquellen korrekt zu verbinden.</p>
+<p>Für eine detailliertere Beschreibung, wie man Datenquellen schreibt, lesen Sie sich bitte das <a href="/de/RDF_Datenquellen_Tutorial" title="de/RDF Datenquellen Tutorial">RDF Datenquellen Tutorial</a> durch.</p>
+<h3 id="Wie_verwaltet_Mozilla_Datenquellen">Wie verwaltet Mozilla Datenquellen?</h3>
+<p>Der <a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/base/idl/nsIRDFService.idl">RDF Service</a> verwaltet eine Tabelle aller geladenen Datenquellen. Die Tabelle ist mit der URI der Datenquelle verbunden, welche entweder die URL einer RDF/XML Datei oder eine spezielle URI mit "<code>rdf:" am Anfang ist, welche auf eine eingebaute Datenquelle zielt</code>.</p>
+<p>Datenquellen können über den RDF Service unter Verwendung der <code>GetDataSource()</code> Methode bezogen werden. Wenn sich das URI Argument auf eine URL einer RDF/XML Datei bezieht, wird der RDF Service eine <em>RDF/XML Datenquelle</em> erstellen und diese asynchron parsen. Die Datenquelle bleibt im Cache bis die letzte Referenz der Datenquelle ausgegeben wurde.</p>
+<p>Wenn sich das URI-Argument auf eine eingebaute Datenquelle bezieht, wird der RDF Service den XPCOM <em>Component Manager</em> verwenden, um eine Komponente zu laden, deren <em>ContractID</em> über eine spezielle URI geladen wurde: <code><a class=" link-mailto" href="mailto:prefix@mozilla.org" rel="freelink">prefix@mozilla.org</a>/rdf/datasource;1?name=</code>.</p>
+<p>Zum Beispiel,</p>
+<pre class="eval">rdf:foo
+</pre>
+<p>Würde folgendes laden::</p>
+<pre class="eval">@mozilla.org/rdf/datasource;1?name=foo
+</pre>
+<p>Wie bei RDF/XML Datenquellen, wird eine Datenquelle über diesen Weg solange im Cache bleiben die letzte Referenz ausgegeben wurde.</p>
+<h3 id="Wie_erstelle_ich_eine_Datenquelle_aus_einer_RDFXML_Datei">Wie erstelle ich eine Datenquelle aus einer RDF/XML Datei?</h3>
+<p>Sie können entweder eine RDF/XML Datenquelle über die <a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/base/idl/nsIRDFService.idl">RDF Service</a> <code>GetDataSource()</code> Methode erstellen:</p>
+<pre class="eval"><span class="highlightblue">// Get the RDF service</span>
+var RDF =
+  Components
+  .classes["@mozilla.org/rdf/rdf-service;1"]
+  .getService(Components.interfaces.nsIRDFService);
+<span class="highlightblue">// ...and from it, get the datasource. Make sure that your web server<br>// dishes it up as <strong>text/xml</strong> (recommended) or <strong>text/rdf</strong>!</span>
+var ds = RDF.GetDataSource("<a class=" external" href="http://www.mozilla.org/some-rdf-file.rdf" rel="freelink">http://www.mozilla.org/some-rdf-file.rdf</a>");
+<span class="highlightblue">// Note that <strong>ds</strong> will load asynchronously, so assertions will not<br>// be immediately available</span>
+</pre>
+<p>Alternativ können Sie eine direkt erstellen, indem Sie den XPCOM Component Manager nutzen, so wie im folgendem Codeausschnitt dargestellt:</p>
+<pre class="eval"><span class="highlightblue">// Create an RDF/XML datasource using the XPCOM Component Manager</span>
+var ds =
+  Components
+  .classes["@mozilla.org/rdf/datasource;1?name=xml-datasource"]
+  .createInstance(Components.interfaces.nsIRDFDataSource);
+<span class="highlightblue">// The <a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/base/idl/nsIRDFRemoteDataSource.idl">nsIRDFRemoteDataSource</a> interface has the interfaces<br>// that we need to setup the datasource.</span>
+var remote =
+   ds.QueryInterface(Components.interfaces.nsIRDFRemoteDataSource);
+<span class="highlightblue">// Be sure that your web server will deliver this as <strong>text/xml</strong> (recommended) or <strong>text/rdf</strong>!</span>
+remote.Init("<a class=" external" href="http://www.mozilla.org/some-rdf-file.rdf" rel="freelink">http://www.mozilla.org/some-rdf-file.rdf</a>");
+<span class="highlightblue">// Make it load! Note that this will happen asynchronously. By setting<br>// <strong>aBlocking</strong> to true, we could force it to be synchronous, but this<br>// is generally a bad idea, because your UI will completely lock up!</span>
+remote.Refresh(false);
+<span class="highlightblue">// Note that <strong>ds</strong> will load asynchronously, so assertions will not<br>// be immediately available</span>
+</pre>
+<p>Sie können sich auch dafür entscheiden, die RDF/XML Datenquelle "manuell" zu erstellen, wenn Sie diese synchron statt asynchron laden wollen.</p>
+<h3 id="Wie_lade_ich_eine_RDFXML_Datenquelle_neu">Wie lade ich eine RDF/XML Datenquelle neu?</h3>
+<p>Sie können eine RDF/XML Datenquelle (oder jede andere Datenquelle, die <a class="external" href="http://lxr.mozilla.org/mozilla/source/source/rdf/base/idl/nsIRDFRemoteDataSource.idl"><code>nsIRDFRemoteDataSource</code></a> unterstützen) neu laden, indem Sie die <code>Refresh()</code> Methode von <code>nsIRDFRemoteDataSource</code> nutzen. <code>Refresh()</code> nimmt einen Parameter an, welcher angibt, ob Sie die Operation synchron ("blocking") oder asynchron ("non-blocking") ausführen möchten. Sie sollten <em>niemals</em> einen synchronen Ladevorgang durchführen, wenn Sie nicht <em>wirklich </em>wissen, was Sie tun: Das wird die Benutzeroberfläche zum Einfrieren bringen bis der Ladevorgang abgeschlossen ist!</p>
+<h3 id="Wie_kann_ich_feststellen_ob_eine_RDFXML_Datenquelle_geladen_wurde">Wie kann ich feststellen, ob eine RDF/XML Datenquelle geladen wurde?</h3>
+<p>Über die <a class="external" href="http://lxr.mozilla.org/mozilla/source/source/rdf/base/idl/nsIRDFRemoteDataSource.idl"><code>nsIRDFRemoteDataSource</code></a> Schnittstelle ist es möglich die Eigenschaft "<code>loaded" zu befragen</code>, um zu bestimmen, ob die Datenquelle geladen wurde oder nicht:</p>
+<pre class="eval"><span class="highlightblue">// Get the RDF service</span>
+var RDF =
+  Components
+  .classes["@mozilla.org/rdf/rdf-service;1"]
+  .getService(Components.interfaces.nsIRDFService);
+<span class="highlightblue">// Get the datasource.</span>
+var ds = RDF.GetDataSource("<a class=" external" href="http://www.mozilla.org/some-rdf-file.rdf" rel="freelink">http://www.mozilla.org/some-rdf-file.rdf</a>");
+<span class="highlightblue">// Now see if it's loaded or not...</span>
+var remote =
+  ds.QueryInterface(Components.interfaces.nsIRDFRemoteDataSource);
+
+if (remote.loaded) {
+  alert("the datasource was already loaded!");
+}
+else {
+  alert("the datasource wasn't loaded, but it's loading now!");
+}
+</pre>
+<p>Sagen wir mal, dass die Datenquelle nicht geladen wurde und sie asynchron geladen werden wird. Über diese API und über JavaScript <code>setTimeout()</code> können wird eine Schleife erstellen, die kontinuierlich die "loaded" Eigenschaft prüft. Das ist sehr zusammengeschustert und schlecht, da kein <em>fehlgeschlagener</em> Ladevorgang erkannt wird, beispielsweise, wenn gar keine Daten in der URL vorhanden waren!</p>
+<p>Aus diesem Grund gibt es ein <a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/base/idl/nsIRDFXMLSink.idl">Observer Interface</a>, welche Ihnen erlaubt den Fortschritt der Datenquelle zu beobachten. Der folgende Code zeigt die Verwendung:</p>
+<pre class="eval"><span class="highlightblue">// This is the object that will observe the RDF/XML load's progress</span>
+var Observer = {
+  onBeginLoad: function(aSink)
+    {},
+
+  onInterrupt: function(aSink)
+    {},
+
+  onResume: function(aSink)
+    {},
+
+  onEndLoad: function(aSink)
+    {
+      aSink.removeXMLSinkObserver(this);
+      alert("done!");
+    },
+
+  onError: function(aSink, aStatus, aErrorMsg)
+    { alert("error! " + aErrorMsg); }
+};
+<span class="highlightblue">// Get the RDF service</span>
+var RDF =
+  Components
+  .classes["@mozilla.org/rdf/rdf-service;1"]
+  .getService(Components.interfaces.nsIRDFService);
+<span class="highlightblue">// Get the datasource.</span>
+var ds = RDF.GetDataSource("<a class=" external" href="http://www.mozilla.org/some-rdf-file.rdf" rel="freelink">http://www.mozilla.org/some-rdf-file.rdf</a>");
+<span class="highlightblue">// Now see if it's loaded or not...</span>
+var remote =
+  ds.QueryInterface(Components.interfaces.nsIRDFRemoteDataSource);
+
+if (remote.loaded) {
+  alert("the datasource was already loaded!");
+}
+else {
+  alert("the datasource wasn't loaded, but it's loading now!");
+  <span class="highlightblue">// RDF/XML Datasources are all <strong>nsIRDFXMLSink</strong>s</span>
+  var sink =
+    ds.QueryInterface(Components.interfaces.nsIRDFXMLSink);
+  <span class="highlightblue">// Attach the observer to the datasource-as-sink</span>
+  sink.addXMLSinkObserver(Observer);
+  <span class="highlightblue">// Now <strong>Observer'</strong>s methods will be called-back as<br>  // the load progresses.</span>
+}
+</pre>
+<p>Beachten Sie, dass der Observer an der RDF/XML Datenquelle angehängt bleibt, bis <code>removeXMLSinkObserver</code> aufgerufen wurde.</p>
+<h3 id="Wie_bekomme_ich_Zugang_zu_den_Informationen_in_einer_Datenquelle">Wie bekomme ich Zugang zu den Informationen in einer Datenquelle?</h3>
+<p>Das <a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/base/idl/nsIRDFDataSource.idl"><code>nsIRDFDataSource</code></a> Interface ist ein Hilfsmittel mit dem Sie die Assertions der Datenquelle erreichen und verändern können.</p>
+<ul> <li><code>boolean HasAssertion(aSource, aProperty, aTarget, aTruthValue)</code>.<br> This tests the datasource to see if it has the specified tuple.</li> <li><code>nsIRDFNode GetTarget(aSource, aProperty, aTruthValue)</code>.</li> <li><code>nsISimpleEnumerator GetTargets(aSource, aProperty, aTruthValue)</code>.</li> <li><code>nsIRDFResource GetSource(aProperty, aTarget, aTruthValue)</code>.</li> <li><code>nsISimpleEnumerator GetSources(aProperty, aTarget, aTruthValue)</code>.</li> <li><code>nsISimpleEnumerator ArcLabelsIn(aTarget)</code>.</li> <li><code>nsISimpleEnumerator ArcLabelsOut(aSource)</code>.</li>
+</ul>
+<p>Sie können außerdem <a href="/#Wie_manipuliere_ich_RDF_.22container.22.3f" title="#Wie manipuliere ich RDF .22container.22.3f">RDF Container</a> Schnittstellen verwenden, um Zugang zu Informationen der RDF <em>Container</em> zu erhalten.</p>
+<h3 id="Wie_kann_ich_Informationen_in_der_Datenquelle_ändern">Wie kann ich Informationen in der Datenquelle ändern?</h3>
+<p>Um 'Assert' verwenden zu können, um eine Assertion hinzuzufügen und 'Unassert' zu verwenden, um eine zu entfernen, lesen Sie <a class="external" href="http://www.mozilla.org/rdf/back-end-architecture.html">Mozilla RDF Back end Architecture</a> (engl.).</p>
+<pre class="eval">ds.Assert(homepage, FV_quality, value, true);
+ds.Unassert(homepage, FV_quality, value, true);
+</pre>
+<h3 id="Wie_mache_ich_Änderungen_an_einer_RDFXML_Datenquelle_rückgängig">Wie mache ich Änderungen an einer RDF/XML Datenquelle rückgängig?</h3>
+<p>Eine RDF/XML Datenquelle kann über <code>QueryInterface()</code> der <a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/base/idl/nsIRDFRemoteDataSource.idl"><code>nsIRDFRemoteDataSource</code></a> Schnittstelle gesteuert werden. Dieses Interface hat eine <code>Flush()</code> Methode, welche versuchen wird, die Inhalte der Datenquelle zurück zur URL, von der Sie kommen, wiederherzustellen. Das geschieht über ein speziellen Protokollmechanismus (z.B., schreibt eine "<code>file:</code>" URL nur die Datei; eine "<code>http:</code>" URL kann einen HTTP-POST ausführen). <code>Flush()</code> schreibt nur zur Datenquelle, wenn sich die Inhalte geändert haben.</p>
+<h3 id="Wie_füge_ich_zwei_oder_mehr_Datenquellen_zusammen_um_sie_als_eine_zu_sehen">Wie füge ich zwei oder mehr Datenquellen zusammen, um sie als eine zu sehen?</h3>
+<p>Verwenden Sie nsIRDFCompositeDataSource. Dieses Interface ist von nsIRDFDataSource abgeleitet. Eine Implementierung dieser Schnittstelle kombiniert typischerweise die Aussagen mehrerer Datenquellen zusammen als eine Sammlung. Weil das nsIRDFCompositeDataSource Interface von nsIRDFDataSource abgeleitet ist, kann es genau so abgefragt und verändert werden wie eine individuelle Datenquelle.</p>
+<h3 id="Wie_bekomme_ich_Zugang_zu_eingebauten_Datenquellen">Wie bekomme ich Zugang zu "eingebauten" Datenquellen?</h3>
+<p>Eine <em>eingebaute Datenquelle</em> ist eine lokal installierte Komponente, die <a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/base/idl/nsIRDFDataSource.idl">nsIRDFDataSource</a> implementiert. Zum Beispiel den <a class="external" href="http://lxr.mozilla.org/mozilla/source/xpfe/components/bookmarks/src/nsBookmarksService.cpp">Bookmarks Service</a>. Prüfen Sie zunächst <a href="/#Was_ist_das_Sicherheitsmodell_f.c3.bcr_RDF.2fXML_in_XUL.3f" title="#Was ist das Sicherheitsmodell f.c3.bcr RDF.2fXML in XUL.3f">hier</a>, um sicher zu gehen, dass sie<span style="font-style: italic;"> Zuga</span><em><span style="font-style: italic;">ng zu einer eingebauten Datenquelle haben</span></em>. Es gibt mehrere Sicherheitsbeschränkungen für den Zugang zu eingebauten Datenquellen von "unsicherem" XUL und JS.</p>
+<p>Da eine eingebaute Datenquelle nur eine XPCOM Komponente ist, können Sie diese direkt über den XPConnect Component Manager instanzieren.</p>
+<pre class="eval">// Use the component manager to get the bookmarks service
+<span class="highlightgreen">var bookmarks =<br>  Components.<br>  classes["@mozilla.org/rdf/datasource;1?name=bookmarks"].<br>  getService(Components.interfaces.nsIRDFDataSource);</span>
+
+// Now do something interesting with it...
+if (bookmarks.HasAssertion(
+     RDF.GetResource("<a class=" external" href="http://home.netscape.com/NC-rdf#BookmarksRoot" rel="freelink">http://home.netscape.com/NC-rdf#BookmarksRoot</a>"),
+     RDF.GetResource("<a class=" external" href="http://home.netscape.com/NC-rdf#child" rel="freelink">http://home.netscape.com/NC-rdf#child</a>"),
+     RDF.GetResource("<a class=" external" href="http://home.netscape.com/NC-rdf#PersonalToolbarFolder" rel="freelink">http://home.netscape.com/NC-rdf#PersonalToolbarFolder</a>"),
+     true) {
+  // ...
+}
+</pre>
+<p>Alternativ haben einige Datenquellen "spezielle" RDF-freundliche ContractIDs, die es einfach machen, die Datenquelle über die <a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/base/idl/nsIRDFService.idl"><code>nsIRDFSerivce</code></a> <code>GetDataSource()</code> Method zu instantiieren oder die Datenquellenattribute auf einem XUL Template. Diese ContractIDs haben die Form</p>
+<pre class="eval">@mozilla.org/rdf/datasource;1?name=<em>name</em>
+</pre>
+<p>und sind über <code>GetDataSource()</code> und die Datenquellenattribute über den Kürzel <code><span style="font-family: Verdana,Tahoma,sans-serif;">"r</span>df:<em>name</em></code>" erreichbar. Beispielsweise zeigt der folgende Codeausschnitt, wie man den Bookmark Service als eine Datenquelle in ein XUL Template hinzufügt.</p>
+<pre class="eval">&lt;tree datasources="rdf:bookmarks"&gt;
+  ...
+&lt;/tree&gt;
+</pre>
+<h3 id="Wie_manipuliere_ich_RDF_container">Wie manipuliere ich RDF "container"?</h3>
+<p>Um einen RDF "container" (ein <code>&lt;rdf:Seq&gt;</code>, zum Beispiel) zu manipulieren, können Sie <a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/base/idl/nsIRDFContainerUtils.idl"><code>nsIRDFContainerUtils</code></a> verwenden, welche als Service mit der folgenden ContractID instantiiert werden kann:</p>
+<pre class="eval">@mozilla.org/rdf/container-utils;1
+</pre>
+<p>Sie können diesen Service verwenden, um zu ermitteln, ob etwas ein RDF Container ist, indem Sie <code>IsSeq()</code>, <code>IsBag()</code> und <code>IsAlt()</code> benutzen. Sie können eine Quelle in einen Container machen, wenn das nicht schon der Fall ist, in dem Sie <code>MakeSeq()</code>, <code>MakeBag()</code> oder <code>MakeAlt()</code> verwenden. Diese Methoden geben einen <a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/base/idl/nsIRDFContainer.idl"><code>nsIRDFContainer</code></a> zurück, welcher Ihnen erlaubt Container-ähnliche Operationen auszuführen und das Sie sich Ihre Hände schmutzig machen.</p>
+<p>Alternativ, wenn Ihre Datenquelle bereits ein Objekt hat, welches ein RDF Container ist, können Sie ein <code>nsIRDFContainer</code> Objekt mit der folgenden Zeile instantiieren:</p>
+<pre class="eval">@mozilla.org/rdf/container;1
+</pre>
+<p>Mit der ContractID und <code>Init()</code> mit der Datenquelle und der Ressource als Parameter. Beachten Sie, dass dies fehlschlagen wird, wenn die Ressource nicht bereits ein Container ist.</p>
+<h2 id="XUL_Templates">XUL Templates</h2>
+<p>XUL Templates werden durch die Angabe eines Datenquellenattributs für ein Element in einem XUL Dokument festgelegt.</p>
+<p>Es gibt zwei Arten von XUL Templates. Die einfache Art, welche aktuell die meist genutzte im Mozilla Code ist, und die erweiterte Art, welche anspruchsvolle Muster im RDF Graphen bietet. Siehe <a href="/de/XUL/Vorlagen_Tutorial" title="de/XUL/Vorlagen Tutorial">Vorlagen Tutotrial</a>.</p>
+<h3 id="Was_ich_mit_einem_XUL_Template_machen">Was ich mit einem XUL Template machen?</h3>
+<p>Sie können <em>jede</em> Art von Inhalt mit einem XUL Template verarbeiten. Sie können jede Art von Tags in dem <code>&lt;action&gt;</code> Bereich des <code>&lt;rule&gt;</code> Tags verwenden (auch HTML oder beliebiges XML).</p>
+<h3 id="Wann_sollte_ich_ein_XUL_Template_verwenden">Wann sollte ich ein XUL Template verwenden?</h3>
+<p>Eine Alternative zur Verwendung von RDF und XUL Templates ist die Verwendung von <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/">W3C DOM APIs</a>, um XUL (oder HTML) Inhaltsmodelle zu verändern. Es kann jedoch sein, dass es dann etwas umständlich werden kann:</p>
+<ol> <li><em>Es gibt mehrere "views" der Daten</em>. Zum Beispiel erkennen Mozilla mail/news die Verzeichnisstruktur in der Toolbar, das "folder pane", in mehreren Menüs und in einigen Dialogen. Um nicht drei Stücke JS (oder C++) Code zum Aufbau der DOM Trees für <code>&lt;menubutton&gt;</code>, <code>&lt;menu&gt;</code> and <code>&lt;tree&gt;</code> Inhaltsmodell zu erstellen, schreiben Sie einfach drei kompakte Regeln für jedes Inhaltsmodell.</li> <li><em>Die Daten können sich verändern</em>. Zum Beispiel kann ein mail/news Benutzer IMAP Ordner löschen oder hinzufügen. (Beachten Sie wie diese Aufgabe das Inhaltsmodell verkompliziert). Der XUL Template Builder verwendet Regeln, um automatisch alle Inhaltsmodelle synchron zu halten.</li>
+</ol>
+<p>Um die Vorteile dieser Funktionen zu nutzen, müssen Sie natürlich in der Lage sein, Ihre Informationen nach der <a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/base/idl/nsIRDFDataSource.idl">RDF datasource API</a> auszudrücken, entweder durch die Verwendung des eingebauten <em>Datenquellenspeichers</em>, durch RDF/XML zum Speichern Ihrer Informationen oder durch das Schreiben Ihrer eigenen Implementierung (möglicherweise in JavaScript) der <code>nsIRDFDataSource</code> Schnittstelle.</p>
+<h3 id="Was_wird_geladen_wenn_ich_datasources_festlege">Was wird geladen, wenn ich "datasources=" festlege?</h3>
+<p>Das "<code>datasources"</code> Attribut in der Wurzel eines Templates legt eine Leerzeichen-getrennte Liste von <em>Datenquellen URIs</em> zum Laden fest. Aber was ist eine "Datenquellen URI"? Entweder:</p>
+<ul> <li>Eine abgekürzte ContractID für eine lokal installierte Komponente. Durch das Festlegen von <code>rdf:<em>name</em></code>, weisen Sie den Template-Builder an, die XPCOM Komponente mit der ContractID: <code>@mozilla.org/rdf/datasource;1?name=<em>name</em></code> zu laden.</li> <li>Die URL einer RDF/XML Datei. Zum Beispiel, <pre>file:///tmp/foo.rdf
+chrome://mycomponent/content/component-data.rdf
+http://www.mysite.com/generate-rdf.cgi
+ftp://ftp.somewhere.org/toc.rdf
+</pre> <p>Der Ladevorgang wird <em>asynchron</em> ausgeführt und wenn das RDF/XML ankommt, wird der Template-Builder den Inhalt generieren.</p> </li>
+</ul>
+<p>In beiden Fällen wird die Datenquelle über die <code>GetDataSource() Methode der</code> <a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/base/idl/nsIRDFService.idl"><code>nsIRDFService</code></a> Schnittstelle geladen, daher wird es ähnlich verwaltet wie alle anderen Datenquellen, die auf diesem Weg geladen werden.</p>
+<h3 id="Was_ist_das_Sicherheitsmodell_für_RDFXML_in_XUL">Was ist das Sicherheitsmodell für RDF/XML in XUL?</h3>
+<p>XUL wird von einer "vertrauten" URL geladen. Jede <code>"chrome:</code>" URL kann <em>jede</em> Datenquellen-URI über das Datenquellenattribut des XUL Templates festlegen.</p>
+<p>XUL, welches von einer "unvertrauten" URL geladen wurde, kann nur ein RDF/XML Dokument aus der gleichen <em>Codebase</em> (im Sinne von Java) festlegen. Keine speziellen (z.B., <code>rdf:</code>) Datenquellen können von unsicherem XUL geladen werden.</p>
+<h3 id="Wie_füge_ich_eine_Datenquelle_zu_einem_XUL_Template_hinzu">Wie füge ich eine Datenquelle zu einem XUL Template hinzu?</h3>
+<p>Obwohl es möglich ist ein XUL Template mit einem eingeschlossenen Set von Datenquellen durch das Datenquellenattribut auszustatten, gibt es oft Situationen bei denen Sie nicht wissen, welche Datenquelle geladen werden soll, bis das XUL geladen wurde. Beispielsweise muss Ihr XUL die Datenquellen erst berechnen, daher brauchen Sie eine <code>onload</code> Routine. Oder es muss eine Datenquelle auf Basis der Benutzeraktionen hinzugefügt werden.</p>
+<p>Hier ist ein einfaches Beispiel, welches zeigt wie man dies machen kann. fangen wir mit dem folgendem XUL an.</p>
+<pre class="eval">&lt;window xmlns="<a class=" external" href="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" rel="freelink">http://www.mozilla.org/keymaster/gat...re.is.only.xul</a>"&gt;
+  ...
+  <span class="highlightgreen">&lt;tree id="my-tree" datasources="rdf:null"&gt;<br>    ...<br>  &lt;/tree&gt;</span>
+  ...
+&lt;/window&gt;
+</pre>
+<p>Nehmen wir an, dass wir die Datenquelle irgendwie erhalten haben. Der folgende Beispielcode zeigt, wie man eine Datenquelle zu einem Template <em>hinzufügt</em>und dann das Template auffordert, sich selbst auf Basis der neuen Daten neu zu laden.</p>
+<pre class="eval">var ds = <span class="highlightblue">/* assume we got this somehow! */</span>;
+<span class="highlightblue">// Get the DOM element for 'my-tree'</span>
+var tree = document.getElementById('my-tree');
+<span class="highlightblue">// Add our datasource to it</span>
+tree.database.AddDataSource(ds);
+<span class="highlightblue">// Force the tree to rebuild *now*. You have to do this "manually"!</span>
+tree.builder.rebuild();
+</pre>
+<p>Jedes XUL Element mit einem "<code>datasources</code>" Attribut wird eine Datenbank- und eine Builder-Eigenschaft erhalten. Die Datenbankeigenschaft bezieht sich auf ein <a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/base/idl/nsIRDFCompositeDataSource.idl"><code>nsIRDFCompositeDataSource</code></a> Objekt, welches die Datenquellen aus denen ein Template erstellt wird, enthält.</p>
+<p>Der <code><span style="font-family: Verdana,Tahoma,sans-serif;"><span style="font-family: monospace;">B</span></span>uilder</code>-Eigenschaft bezieht sich auf ein <a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/base/idl/nsIXULTemplateBuilder.idl"><code>nsIXULTemplateBuilder</code></a> Objekt, welches ein "builder" ist, der den Status der Template-Inhalte verwaltet.</p>
+<p>Hinweis zur <code>rdf:null</code> Datenquelle: Das ist eine spezielle Datenquelle, die sagt, "Hey, Ich habe noch keine Datenquelle für dich, aber ich werde später eine hinzufügen, also mach dich bereit!" Die <code>database</code> und <code>builder</code> Eigenschaften werdn eingerichtet, aber lassen die Datenbank der Datenquellen leer: Sie müssen diese selbst hinzufügen!</p>
+<h3 id="Kann_ich_ein_XUL_Template_über_DOM_APIs_manipulieren">Kann ich ein XUL Template über DOM APIs manipulieren?</h3>
+<p>Ja: Sie können Regeln hinzufügen und Regeln entfernen, eine Abfrage ändern und den Inhalt, der durch eine Regel erzeugt wird, ändern. Sie können sogar <em>alles</em> über die <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/">W3C DOM APIs</a> verändern.</p>
+<p>Die einzige Einschränkung ist, dass Sie <code>rebuild()</code> aufrufen müssen, bevor die Änderungen sichtbar werden (so als wenn Sie eine Datenquelle zu einem XUL Template hinzufügen).</p>
+<h3 id="Wie_füge_ich_Plaintext_aus_einem_Template_hinzu">Wie füge ich Plaintext aus einem Template hinzu?</h3>
+<p>Um Plaintext in ein Template hinzuzufügen, verwenden Sie das <code>&lt;text&gt;</code> Element.</p>
+<pre class="eval">&lt;template&gt;
+  &lt;rule&gt;
+    &lt;query&gt;...&lt;/query&gt;
+    &lt;binding&gt;...&lt;/binding&gt;
+    &lt;action&gt;
+      <span class="highlightgreen">&lt;text value="?some-variable" /&gt;</span>
+    &lt;/action&gt;
+  &lt;/rule&gt;
+&lt;/template&gt;
+</pre>
+<p>Das obige Template wird ein Inhaltsmodell erstellen, dass eine Reihe von Textknoten zusammen ausführt.</p>
+<h2 id="Problemlösungen">Problemlösungen</h2>
+<p>Tipps und Tricks.</p>
+<h3 id="Meine_RDFXML_Datei_wird_nicht_geladen.">Meine RDF/XML Datei wird nicht geladen.</h3>
+<p>Der häufigste Grund dafür, dass RDF/XML nicht von einem Webserver geladen werden kann, ist ein falscher MIME Type. Stellen Sie sicher, dass Ihr Server die Datei als <code>text/xml</code> (empfohlen) oder als <code>text/rdf</code> ausliefert.</p>
+<p>Beachten Sie, dass die W3C RDF Core WG application/rdf+xml registriert hat, aber dies noch nicht von Mozilla verstanden wird.</p>
+<p>Ein weiteres, mögliches Problem: Für fern-geladenes XUL und RDF müssen Mozillas Sicherheitsbeschränkungen richtig eingestellt werden (siehe unten für Beispielcode). Wenn XUL nicht in Ihr RDF geladen wurde und der Mimetype OK ist, könnte dies Ihr Problem sein.</p>
+<p>Sie können die <code>rdfcat</code> und <code>rdfpoll</code> Tools verwenden, um sicherzustellen, dass das RDF/XML valide ist. Beide Programme werden unter Windows geladen, wenn Sie <code>configure --enable-tests</code> festgelegt haben.</p>
+<ul> <li><code><a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/tests/rdfcat/rdfcat.cpp">rdfcat</a> <em>url</em></code><br> Nimmt als Parameter eine URL von welcher eine RDF/XML Datei gelesen werden soll und wird die Datei zurück zur Konsole senden. Sie können dieses Tool verwenden, um sicherstellen, dass das RDF/XML richtig von Mozilla geparst wurde.</li> <li><code><a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/tests/rdfpoll/rdfpoll.cpp">rdfpoll</a> <em>url</em> </code><em><code>interval</code></em><br> Nimmt als Parameter eine URL von welcher eine RDF/XML Datei gelesen werden soll. Es wird auch ein optionaler Parameter <em>poll interval</em> angenommen, der dafür sorgen kann, dass die URL neu geladen wird. Es werden die Assertions, die von jedem Ladevorgang generiert werden, ausgegeben. Beachten Sie, dass mehrfache Reloads eine Reihe von Unterschieden zwischen der aktuellen und der vorherigen RDF/XML Datei generieren. Das ist nützlich zum Debuggen von generiertem RDF/XML, welches sich von Zeit zu zeit verändert.</li>
+</ul>
+<p>Beide Programme sind zu langsam zum Laden und zum Laufen (aber sie werden laufen, letztendlich). Sie initialisieren XPCOM und bringen Necko dazu, die URLs zu laden und auszuführen, so wie es Mozilla tut.</p>
+<h3 id="Es_passiert_nichts_nachdem_ich_AddDataSource_aufgerufen_habe.">Es passiert nichts nachdem ich AddDataSource aufgerufen habe.</h3>
+<p>Beachten Sie, dass der Template-Builder die Inhalte eines Templates <em>nicht</em> automatisch neu aufbaut nachdem <code>AddDataSource</code> oder <code>RemoveDataSource</code> aufgerufen wurden. Um die Inhalte des Templates zu erneuern, müssen Siel <code><em>elt.</em>builder.rebuild()</code> selbst aufrufen.</p>
+<p>Warum? Das kommt daher, weil man mehrere Rebuilds verhindern möchte, wenn mehr als eine Datenquelle zur Datenbank hinzugefügt wird.</p>
+<h2 id="Beispiele">Beispiele</h2>
+<h3 id="Wo_kann_ich_einige_(funktionierende)_Beispiele_finden">Wo kann ich einige (funktionierende) Beispiele finden?</h3>
+<p>Einige Beispiele kann man <a class="external" href="http://www.mozilla.org/rdf/doc/examples.html">hier</a> finden. Einige sind in signierten Skripts enthalten und sind über HTTP direkt ausführbar.</p>
+<p>Siehe auch <a class="link-https" href="https://bugzilla.mozilla.org/data/duplicates.rdf"><code>duplicates.rdf</code></a> (Live RDF Feed von Mozilla) und <a class="link-https" href="https://bugzilla.mozilla.org/duplicates.xul"><code>duplicates.xul</code></a>. Beachten Sie, dass sie Mozillas Sicherheitsmodell einhalten müssen. Um das zu tun, fügen Sie die folgende Zeile in Ihre Preferences Datei hinzu. (Schließen Sie Mozilla erst, da sonst die Datei überschrieben wird, wenn Sie Mozilla beenden.)</p>
+<pre class="eval">user_pref("signed.applets.codebase_principal_support", true);
+</pre>
+<p>Mozilla wird Sie fragen, ob Sie den Skripten in <code>duplicates.xul</code> Rechte zum Zugang zu XPConnect geben wollen; stimmen Sie dem zu.</p>
+<p>Aktuell erlaubt Mozilla kein unprivilegierten Zugang zu RDF Schnittstellen und Services; Siehe Bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=122846">122846</a> für Details.</p>
+<p>Bitte schicken Sie <a class="external" href="http://rdfweb.org/people/danbri/">danbri</a>, mozilla-rdf oder waterson eine Mail mit URLs, wenn Sie weitere Beispiele haben, die wir hier hinzufügen können!</p>
+<h2 id="Notes" name="Notes">Hinweise</h2>
+<ol> <li>Siehe auch <a class="external" href="http://www.w3.org/RDF/">W3C RDF</a> und <a class="external" href="http://www.w3.org/2001/sw/">Semantic Web</a> für weitere Informationen über RDF und verwandte Technologien.</li>
+</ol>
+<h2 id="Mitwirkende">Mitwirkende</h2>
+<ul> <li>Beispiel Abschnitt hinzugefügt, am 2002-07-02 von <a class="external" href="http://rdfweb.org/people/danbri/">danbri</a></li> <li>Danke an Myk Melez für die Hinweise zu remote XUL / Sicherheitsmethoden</li>
+</ul>
+<p>Autor: <a class="link-mailto" href="mailto:waterson@netscape.com">Chris Waterson</a></p>
+<div class="originaldocinfo">
+<h2 id="Informationen_zum_Originaldokument">Informationen zum Originaldokument</h2>
+<ul> <li>Autor(en): <a class="link-mailto" href="mailto:waterson@netscape.com">Chris Waterson</a></li> <li>Zuletzt aktualisiert: 22. Dezember 2004</li> <li>Copyright Informationen: Copyright (C) <a class="link-mailto" href="mailto:waterson@netscape.com">Chris Waterson</a></li>
+</ul>
+</div>
+<p>{{ languages( { "en": "en/RDF_in_Mozilla_FAQ", "es": "es/Preguntas_frecuentes_sobre_RDF_en_Mozilla", "ja": "ja/RDF_in_Mozilla_FAQ", "ko": "ko/RDF_in_Mozilla_FAQ" } ) }}</p>
diff --git a/files/de/archive/web/index.html b/files/de/archive/web/index.html
new file mode 100644
index 0000000000..6f60d315ff
--- /dev/null
+++ b/files/de/archive/web/index.html
@@ -0,0 +1,12 @@
+---
+title: Archived open Web documentation
+slug: Archive/Web
+tags:
+  - Archived
+  - NeedsTranslation
+  - TopicStub
+  - Web
+translation_of: Archive/Web
+---
+<p>The documentation listed below is archived, obsolete material about open Web topics.</p>
+<p>{{SubpagesWithSummaries}}</p>
diff --git a/files/de/archive/web/javascript/arguments.caller/index.html b/files/de/archive/web/javascript/arguments.caller/index.html
new file mode 100644
index 0000000000..f2d9dd90ad
--- /dev/null
+++ b/files/de/archive/web/javascript/arguments.caller/index.html
@@ -0,0 +1,55 @@
+---
+title: arguments.caller
+slug: Archive/Web/JavaScript/arguments.caller
+tags:
+  - Functions
+  - JavaScript
+  - Obsolete
+  - Property
+  - arguments
+translation_of: Archive/Web/JavaScript/arguments.caller
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p>{{obsolete_header}}</p>
+
+<p>Die veraltete Eigenschaft<strong><code> arguments.caller</code></strong> wird genutzt, um die Funktion, die die aktuelle Funktion ausführt, zu ermittelt. Die Eigenschaft wurde entfernt und kann nicht mehr genutzt werden.</p>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p>Die Eigenschaft ist nicht mehr verfügbar, aber man kann {{jsxref("Function.caller")}} benutzen.</p>
+
+<pre class="brush: js notranslate">function whoCalled() {
+   if (whoCalled.caller == null)
+      console.log('I was called from the global scope.');
+   else
+      console.log(whoCalled.caller + ' called me!');
+}</pre>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<p>Der folgende Quelltext wurde eingesetzt, um den Wert der Eigenschaft <code>arguments.caller</code> zu prüfen, jedoch funktioniert dieses nicht mehr.</p>
+
+<pre class="brush: js example-bad notranslate">function whoCalled() {
+   if (arguments.caller == null)
+      console.log('I was called from the global scope.');
+   else
+      console.log(arguments.caller + ' called me!');
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Wurde in keinem Standard spezifiziert. Wurde in JavaScript 1.1 implementiert und wegen {{bug(7224)}} und <span class="dpf_sent" id="dpfsent_2"><span class="corrected_word" id="dpforth0_npra_2_1" lang="potenziellen">potenziellen</span> </span> Sicherheitsrisiken wieder entfernt.</p>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.functions.arguments.caller")}}</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Function")}}</li>
+</ul>
diff --git a/files/de/archive/web/javascript/ecmascript_7_support_in_mozilla/index.html b/files/de/archive/web/javascript/ecmascript_7_support_in_mozilla/index.html
new file mode 100644
index 0000000000..302b230c09
--- /dev/null
+++ b/files/de/archive/web/javascript/ecmascript_7_support_in_mozilla/index.html
@@ -0,0 +1,68 @@
+---
+title: ECMAScript 7 Unterstützung in Mozilla
+slug: Archive/Web/JavaScript/ECMAScript_7_support_in_Mozilla
+translation_of: Archive/Web/JavaScript/ECMAScript_Next_support_in_Mozilla
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>ECMAScript 2016 ist die nächste Erweiterung des ECMA-262 Standards. Neue Sprachfeatures sind bereits im Entwurf der 6. Edition vorgeschlagen und nähern sich der Vollendung. Die aktuellen Vorschläge lassen sich unter dem folgenden GitHub Repository ansehen <a href="https://github.com/tc39/ecma262">tc39/ecma262</a>.<br>
+ Aktuelle Probleme mit dem Spezifikationsprozess sollen durch die Einführung von Stages und Champions gelöst werden. Außerdem ist ein zweijähriger Release-Zyklus von dem Standard vorgeschlagen.<br>
+ <br>
+  <a href="http://slides.com/rafaelweinstein/tc39-process">Link</a> für weitere Informationen über den post-ES6 Spezifikationsprozess.</p>
+
+<p>Mailing-Liste zur Diskussion von ECMAScript standards: <a href="https://mail.mozilla.org/listinfo/es-discuss">es-discuss</a></p>
+
+<h2 id="Experimentale_Features">Experimentale Features</h2>
+
+<p>Die folgenden Features sind bereits implementiert, jedoch nur zugänglich in <a href="http://nightly.mozilla.org/">Firefox Nightly channel</a>:</p>
+
+<h3 id="Zusätze_zu_dem_Array_Objekt">Zusätze zu dem <code>Array</code> Objekt</h3>
+
+<ul>
+ <li>{{jsxref("Array.prototype.includes()")}} (<a href="https://github.com/domenic/Array.prototype.includes/blob/master/spec.md">spec</a>)</li>
+</ul>
+
+<h3 id="Zusätze_zu_dem_ArrayBuffer_Objekt">Zusätze zu dem <code>ArrayBuffer</code> Objekt</h3>
+
+<ul>
+ <li>{{jsxref("ArrayBuffer.transfer()")}} (<a href="https://gist.github.com/lukewagner/2735af7eea411e18cf20">spec</a>)</li>
+</ul>
+
+<h3 id="Neue_TypedObject_Objekte">Neue TypedObject Objekte</h3>
+
+<ul>
+ <li><a href="https://github.com/dslomov-chromium/typed-objects-es7">Typed Objects draft</a></li>
+</ul>
+
+<h3 id="Neue_SIMD_Objekte">Neue SIMD Objekte</h3>
+
+<ul>
+ <li><a href="https://github.com/johnmccutchan/ecmascript_simd">SIMD specification draft and polyfill</a></li>
+</ul>
+
+<h2 id="Features_mit_zunehmender_Stabilität">Features mit zunehmender Stabilität</h2>
+
+<p>The following features are supported beyond the Nightly channel, but ongoing specification and implementation work is happening. Features which were originally in the ECMAScript 6 draft and got postponed to ECMAScript 2016 are likely to appear here.</p>
+
+<h3 id="Ausdrücke">Ausdrücke</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Array_comprehensions">Array comprehensions</a> (<a href="/en-US/Firefox/Releases/30">Firefox 30</a>)</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Generator_comprehensions">Generator comprehensions</a> (<a href="/en-US/Firefox/Releases/30">Firefox 30</a>)</li>
+</ul>
+
+<h2 id="Noch_nicht_unterstütze_Features">Noch nicht unterstütze Features</h2>
+
+<p>The following features are not yet implemented, but targeted for ECMAScript 2016.</p>
+
+<ul>
+ <li><code>Object.observe()</code> ({{bug(800355)}})</li>
+</ul>
+
+<h2 id="Weiterführend">Weiterführend</h2>
+
+<ul>
+ <li><a href="http://www.ecmascript.org/">ECMAScript web site</a></li>
+ <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1021376">Mozilla ES2016 tracking bug</a></li>
+ <li><a href="http://kangax.github.io/compat-table/es7/" title="http://kangax.github.io/es5-compat-table">ECMAScript 2016 support across browsers</a></li>
+</ul>
diff --git a/files/de/archive/web/javascript/index.html b/files/de/archive/web/javascript/index.html
new file mode 100644
index 0000000000..4687b7bf23
--- /dev/null
+++ b/files/de/archive/web/javascript/index.html
@@ -0,0 +1,12 @@
+---
+title: JavaScript
+slug: Archive/Web/JavaScript
+translation_of: Archive/Web/JavaScript
+---
+<div class="hidden">{{JSRef}}</div>
+
+<p>{{Obsolete_Header}}</p>
+
+<p class="summary">Obsolete JavaScript features and unmaintained docs</p>
+
+<p>{{SubpagesWithSummaries}}</p>
diff --git a/files/de/archive/web/javascript/legacy_generator_function/index.html b/files/de/archive/web/javascript/legacy_generator_function/index.html
new file mode 100644
index 0000000000..8e05b218bd
--- /dev/null
+++ b/files/de/archive/web/javascript/legacy_generator_function/index.html
@@ -0,0 +1,56 @@
+---
+title: Alter Generatorfunktionsausdruck
+slug: Archive/Web/JavaScript/Legacy_generator_function
+tags:
+  - JavaScript
+  - Legacy Iterator
+  - Reference
+translation_of: Archive/Web/JavaScript/Legacy_generator_function
+---
+<div class="warning">Der alte Generatorfunktionsausdruck war eine SpiderMonkey spezifische Funktion, welche in Firefox 58+ entfernt wurde. Für zukünftige Verwendung sollte der {{jsxref("Operators/function*", "function* Ausdruck")}} genutzt werden.</div>
+
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Das <strong><code>function</code></strong> Schlüsselwort kann benutzt werden, um eine alte Generatorfunktion in einem Ausdruck zu definieren. Um eine Funktion einen alten Generator zu machen, muss der Funktionskörper mindestens einen {{jsxref("Operators/yield", "yield")}} Ausdruck enthalten.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">function [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) {
+   <em>statements</em>
+}</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Der Funktionsname. Kann in fällen einer anonymen Funktion weggelassen werden. Der Name ist nur lokal im Funktionskörper verfügbar.</dd>
+ <dt><code>paramN</code></dt>
+ <dd>Der Name eines Argumentes, welches der Funktion übergeben wird. Eine Funktion kann bis zu 255 Argumente haben.</dd>
+ <dt><code>statements</code></dt>
+ <dd>Die Statements, welche den Funktionskörper bilden. Diese müssen mindestens ein {{jsxref("Operators/yield", "yield")}} Ausdruck enthalten.</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Ein Überblick über den Einsatz ist auf der <a href="/de/docs/JavaScript/Guide/Iterators_and_Generators">Iteratoren und Generatoren</a> Seite verfügbar.</p>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>Kein Support.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Generator")}}</li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function">Die alte Generatorfunktion</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Guide/The_legacy_Iterator_protocol">Das alte Iterator Protokoll</a></li>
+ <li>{{jsxref("Operators/yield", "yield")}}</li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Functions_and_function_scope">Funktionen und Funktionsgültigkeitsbereiche</a></li>
+ <li>{{jsxref("Statements/function", "Funktion")}}</li>
+ <li>{{jsxref("Operators/function", "Funktionsausdruck")}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Statements/function*", "function*")}}</li>
+ <li>{{jsxref("Operators/function*", "function* Ausdruck")}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+ <li><a href="/de/docs/Web/JavaScript/Guide/The_Iterator_protocol">Das Iterator Protokoll</a></li>
+</ul>
diff --git a/files/de/benutzen_des_zwischenspeichers_in_firefox_1.5_(caching)/index.html b/files/de/benutzen_des_zwischenspeichers_in_firefox_1.5_(caching)/index.html
new file mode 100644
index 0000000000..cac83f31ce
--- /dev/null
+++ b/files/de/benutzen_des_zwischenspeichers_in_firefox_1.5_(caching)/index.html
@@ -0,0 +1,205 @@
+---
+title: Benutzen des Zwischenspeichers in Firefox 1.5 (caching)
+slug: Benutzen_des_Zwischenspeichers_in_Firefox_1.5_(caching)
+tags:
+  - Caching
+  - Firefox 1.5
+  - JavaScript
+translation_of: Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching
+---
+<div>{{FirefoxSidebar}}</div><h3 id="Einführung">Einführung</h3>
+
+<p><a href="/de/Firefox_1.5_für_Entwickler" title="de/Firefox_1.5_für_Entwickler">Firefox 1.5</a> verwendet einen internen Speicher-Cache, der sich den Inhalt der geladenen Webseiten, sowie den Status von JavaScripts für eine Sitzung merkt. Dadurch verbessert sich die Ladezeit bereits geladener Webseiten erheblich und es kann schnell zwischen bereits besuchten Webseiten vor und zurück gewechselt ohne, dass die Seiten neu geladen werden müssen oder der JavaScript-Status verloren geht. Diese Funktion wird als <strong>bfcache</strong>  („Back-Forward Cache“) bezeichnet. Der zwischengespeicherte Status wird solange erhalten, bis der Browser geschlossen wird.</p>
+
+<p>Unter bestimmten Umständen, verwendet Firefox diesen Zwischenspeicher jedoch nicht:</p>
+
+<ul>
+ <li>Die Seite besitzt einen <code>unload</code> oder <code>beforeunload</code> Handler.</li>
+ <li>Die Seite besitzt den „cache-control: no-store“ Header.</li>
+ <li>Die Seite besitzt den „cache-control: no-cache“ Header und wird über das https Protokoll gesendet.</li>
+ <li>Die Seite ist nicht fertig geladen, wenn der Benutzer die Seite verlässt.</li>
+ <li>Die Top-Level Seite besitzt Frames, die nicht zwischenspeicherbar sind.</li>
+ <li>Die Seite ist in einem Frame, in dem eine neue Seite geladen wird (in diesem Fall, wird die letzte, geladene Seite des Frames zwischengespeichert).</li>
+</ul>
+
+<p>Die sogenannte <em>bfcache</em> Funktion verändert das Ladeverhalten von Webseiten ungemein. Webentwickler möchten daher unter Umständen:</p>
+
+<ul>
+ <li>Wissen, ob der Benutzer eine bestimmte Seite betreten hat und diese aus dem Cache geholt wird;</li>
+ <li>Das Seitenverhalten bestimmen, das sich aufgrund des Verlassens einer bestimmten Seite ändert.</li>
+</ul>
+
+<p>Zwei neue Browser-Events ermöglichen beides.</p>
+
+<h3 id="Die_neuen_Browser-Events">Die neuen Browser-Events</h3>
+
+<p>Falls man die neuen Events verwendet, werden die Webseiten in anderen und älteren Browsern trotzdem richtig angezeigt. Getestet wurden Firefox, Internet Explorer, Opera und Safari. Die neue <em>bfcache</em>-Funktion wird nur verwendet, wenn die Webseite in einen Firefox-Browser 1.5 oder höher geladen wird.</p>
+
+<p>Hinweis: Safari unterstützt die neuen Events in einer zukünftigen Version (10-2009, siehe<a class="link-https" href="https://bugs.webkit.org/show_bug.cgi?id=28758" title="https://bugs.webkit.org/show_bug.cgi?id=28758"> WebKit bug</a>).</p>
+
+<p>Standardverhalten bei Webseiten sehen wie folgend aus:</p>
+
+<ol>
+ <li>Benutzer navigiert zu der Webseite.</li>
+ <li>Wenn sich die Seite aufbaut, werden die Inline-Scripts ausgeführt.</li>
+ <li>Nach vollständigem Aufbau, wird der <code>unload</code>-Handler ausgelöst.</li>
+</ol>
+
+<p>Einige Seiten verfügen über einen vierten Schritt. Falls die Seite einen <code>unload</code>-Handler besitzt, wird dieser beim Verlassen der Webseite zusätzlich ausgelöst. Falls ein <code>unload</code> oder <code>beforeunload</code> Handler vorhanden ist, wird die Seite nicht zwischengespeichert.</p>
+
+<p>Wenn ein Benutzer zu einer bereits zwischengespeicherten Seite navigiert, werden die bereits ausgeführten Inline-Scripts und der <code>onload</code>-Handler ignoriert (siehe oben: Schritt 2 und 3), damit werden in fast allen Fällen die Effekte dieser Skripte erhalten.</p>
+
+<p>Wenn die Webseite Skripte enthält, oder anderes Verhalten, welches bei jedem neuen Besuch des Benutzers erneut ausgeführt werden soll, oder wenn man wissen möchte, ob ein Benutzer zu einer zwischengespeicherten Seite navigiert, muss man das über das <code>pageshow</code>-Event realisieren.</p>
+
+<p>Wenn man eine Aktion ausführen will, die beim Verlassen einer Webseite ausgeführt wird und man den Vorteil des neuen bfcache-Feature nutzen möchte, verwendet man nicht den <code>unload</code>-Handler, sondern benutzt das neue <code>pagehide</code>-Event.</p>
+
+<h4 id="Das_pageshow_Ereignis">Das <code>pageshow</code> Ereignis</h4>
+
+<p>Dieses Ereignis funktioniert genauso, wie das <code>load</code>-Event, jedoch wird dieses Ereignis bei jedem Aufruf der Webseite ausgelöst (wobei das <code>onload</code>-Ereignis nicht ausgelöst wird, wenn die Webseite aus dem Zwischenspeicher des Firefox 1.5 geladen wird). Wird die Webseite das erste Mal geladen, folgt nach dem Auslösen des <code>onload</code>-Ereignisses sofort das <code>pageshow</code>-Event. Das <code>pageshow</code>-Ereignis besitzt eine boolsche Eigenschaft, <code>persisted</code>, deren Inhalt auf beim ersten Laden auf <code>false</code> steht. Der Wert <code>true</code> bedeutet, dass der Browser diese Seite aus dem Zwischenspeicher holt.</p>
+
+<p>Folglich muss man jedes JavaScript, welches bei jedem Besuch der Webseite durchlaufen soll, mit dem <code>pageshow</code>-Ereignis verknüpfen.</p>
+
+<p>Werden JavaScript Funktionen als Teil des<code> pageshow</code> Events aufgerufen, kann durch den Aufruf des <code>pageshow</code> Events im <code>load</code> Event sichergestellt werden, dass die Funktionen von anderen Versionen und Browsern als Firefox 1.5, geladen werden. Siehe auch im späteren Beispiel weiter unten.</p>
+
+<h4 id="Das_pagehide_Ereignis">Das <code>pagehide</code> Ereignis</h4>
+
+<p>Falls ein bestimmtes Verhalten definiert werden soll, wenn der Benutzer von der Seite weg navigiert und man nicht das <code>unload</code>-Event verwenden will (welches verursachen würde, dass die Webseite nicht zwischengespeichert wird), kann man nun das neue <code>pagehide</code>-Event verwenden. Wie auch das <code>pageshow</code> Ereignis, besitzt das <code>pagehide</code>-Event die boolsche Eigenschaft <code>persisted</code>. Der Inhalt dieser Eigenschaft steht auf <code>false</code>, wenn der Seiteninhalt nicht aus dem Zwischenspeicher geholt wird, und steht auf <code>true</code>, wenn der Inhalt aus dem Cache geholt wird. Wenn die Eigenschaft auf <code>false</code> steht, wird der <code>unload</code>-Handler, falls vorhanden, sofort nach dem <code>pagehide</code>-Event ausgeführt.</p>
+
+<p>Firefox 1.5 versucht das Ladeverhalten der Webseiten so zu simulieren, als wenn die Seite das erste Mal geladen wird. Frames werden genauso behandelt, wie das Top-Level Fenster. Falls die Webseite Frames enthält und sie aus dem Zwischenspeicher geladen werden:</p>
+
+<ul>
+ <li>werden die <code>pageshow</code>-Events aller Frame-Seiten ausgelöst, bevor das <code>pageshow</code>-Event der Hauptseite ausgeführt wird.</li>
+ <li>Wenn der Benutzer von der zwischengespeicherten Frame-Seite weg navigiert, wird das <code>pagehide</code>-Event von allen Frame-Seiten augelöst, bevor das <code>pagehide</code>-Event der Hauptseite ausgeführt wird.</li>
+ <li>Bei einer Navigation innerhalb eines einzigen Frames, werden nur die Events ausgelöst, die diesen Frame betreffen.</li>
+</ul>
+
+<h4 id="Seiten-Caching_trotz_unload_und_beforeunload_Handler">Seiten-Caching trotz <code>unload</code> und <code>beforeunload</code> Handler</h4>
+
+<p>Wenn man <code>unload</code> oder <code>beforeunload</code> Events verwenden möchte und das Seiten-Caching aufrecht erhalten will, können diese Events einfach in der Event-Handler Funktion entfernt werden und wieder in der <code>pageshow</code> Handler-Fuktion eingesetzt werden, wenn man auf die Seite zurückkehrt:</p>
+
+<pre>window.addEventListener('pageshow', PageShowHandler, false);
+window.addEventListener('unload', UnloadHandler, false);
+
+function PageShowHandler() {
+	window.addEventListener('unload', UnloadHandler, false);
+}
+
+function UnloadHandler() {
+	window.removeEventListener('beforeunload', UnloadHandler, false);
+}
+</pre>
+
+<h3 id="Beispiel-Code">Beispiel-Code</h3>
+
+<p>Das folgende Beispiel veranschaulicht eine Seite, die beide Events verwendet (<code>load</code> und <code>pageshow</code>). Die Beispiel-Webseite verhält sich wie folgt:</p>
+
+<ul>
+ <li>In anderen Browsern als dem Firefox 1.5 passiert folgendes zu jedem Zeitpunkt, bei dem die Seite geladen wird: Das <code>onload</code>-Ereigniss löst die <code>onLoad</code>-Funktion aus, welche wiederum die <code>onPageShow</code>-Funktion ausführt (sowie eine zusätzliche Funktion).</li>
+</ul>
+
+<ul>
+ <li>Im Firefox 1.5 verhält sich das <code>onload</code>-Event wie bei jedem anderen Browser, wenn die Webseite das erste Mal geladen wird (also nicht aus dem Zwischenspeicher). Zusätzlich wird das <code>pageshow</code>-Event ausgelöst und falls die <code>persisted</code>-Eigenschaft den Wert <code>false</code> besitzt, wird nichts Zusätzliches ausgeführt.</li>
+</ul>
+
+<ul>
+ <li>Wird die Webseite beim Firefox 1.5 aus dem Zwischenspeicher geladen, wird nur das <code>pageshow</code>-Event ausgelöst. Besitzt die <code>persisted</code>-Eigenschaft den Wert <code>true</code>, werden nur die JavaScript-Aktionen ausgeführt, die in der <code>onPageShow</code>-Funktion gelistet sind.</li>
+</ul>
+
+<p>In diesem Beispiel:</p>
+
+<ul>
+ <li>Die Webseite ermittelt und visualisiert das derzeitige Datum und die derzeitige Zeit bei jedem Anzeigen der Webseite. Die Berechnung enthält auch Sekunden sowie Millisekunden, sodass die Funktionen einfach getestet werden können.</li>
+ <li>Der Cursor wird im Eingabefeld des Formulars für den Namen platziert. Wenn der Benutzer nun beim Firefox 1.5, nach abschicken des Formulars, zurück zur Eingabe navigiert, verharrt der Cursor beim zuletzt ausgewählten Feld. Bei anderen Browsern, wird der Cursor erneut im Namensfeld platziert.</li>
+</ul>
+
+<pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+   "http://www.w3.org/TR/html4/loose.dtd"&gt;
+&lt;HTML&gt;
+&lt;head&gt;
+&lt;title&gt;Order query : Firefox 1.5 Example&lt;/title&gt;
+&lt;style type="text/css"&gt;
+body, p {
+	font-family: Verdana, sans-serif;
+	font-size: 12px;
+   	}
+&lt;/style&gt;
+&lt;script type="text/javascript"&gt;
+function onLoad() {
+	loadOnlyFirst();
+	onPageShow();
+}
+
+function onPageShow() {
+//Berechne die aktuelle Zeit
+        var currentTime= new Date();
+	var year=currentTime.getFullYear();
+	var month=currentTime.getMonth()+1;
+	var day=currentTime.getDate();
+	var hour=currentTime.getHours();
+	var min=currentTime.getMinutes();
+	var sec=currentTime.getSeconds();
+	var mil=currentTime.getMilliseconds();
+	var displayTime = (month + "/" + day + "/" + year + " " +
+		hour + ":" + min + ":" + sec + ":" + mil);
+	document.getElementById("timefield").value=displayTime;
+}
+
+function loadOnlyFirst() {
+	document.zipForm.name.focus();
+}
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body onload="onLoad();" onpageshow="if (event.persisted) onPageShow();"&gt;
+&lt;h2&gt;Order query&lt;/h2&gt;
+
+&lt;form name="zipForm" action="http://www.example.com/formresult.html" method="get"&gt;
+&lt;label for="timefield"&gt;Date and time:&lt;/label&gt;
+&lt;input type="text" id="timefield"&gt;&lt;br&gt;
+&lt;label for="name"&gt;Name:&lt;/label&gt;
+&lt;input type="text" id="name"&gt;&lt;br&gt;
+&lt;label for="address"&gt;Email address:&lt;/label&gt;
+&lt;input type="text" id="address"&gt;&lt;br&gt;
+&lt;label for="order"&gt;Order number:&lt;/label&gt;
+&lt;input type="text" id="order"&gt;&lt;br&gt;
+&lt;input type="submit" name="submit" value="Submit Query"&gt;
+&lt;/form&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Im Gegensatz dazu: Wenn die vorherige Seite nicht auf das <code>pageshow</code>-Event hört und alle Berechnungen als Teil des <code>load</code>-Events verarbeitet werden (und anstelle des oberen Codes, der untere verwendet wird), wird die Cursor-Position und der Datum/Zeit-Stempel vom Firefox 1.5 zwischengespeichert, falls der Benutzer von der Seite weg navigiert. Kommt der Benutzer nun auf die Webseite zurück, wird der zwischengespeicherte Datum/Zeit-Stempel angezeigt.</p>
+
+<pre>&lt;script&gt;
+function onLoad() {
+	loadOnlyFirst();
+
+//Berechne die aktuelle Zeit
+        var currentTime= new Date();
+	var year = currentTime.getFullYear();
+	var month = currentTime.getMonth()+1;
+	var day = currentTime.getDate();
+	var hour=currentTime.getHours();
+	var min=currentTime.getMinutes();
+	var sec=currentTime.getSeconds();
+	var mil=currentTime.getMilliseconds();
+	var displayTime = (month + "/" + day + "/" + year + " " +
+		hour + ":" + min + ":" + sec + ":" + mil);
+	document.getElementById("timefield").value=displayTime;
+}
+
+function loadOnlyFirst() {
+	document.zipForm.name.focus();
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onload="onLoad();"&gt;
+</pre>
+
+<h3 id="Entwicklung_von_Firefox_Erweiterungen">Entwicklung von Firefox Erweiterungen</h3>
+
+<p>Firefox 1.5 Erweiterungen müssen diese Zwischenspeicher Funktionalität unterstützen. Falls Sie eine Erweiterung für den Firefox entwickeln, welche kompatibel zu 1.5 und früheren Versionen sein soll, achten Sie darauf, dass Funktionen des <code>onload</code>-Events nur bei Seiten verwendet werden, die zwischengespeichert werden können und Funktionen des <code>pageshow</code>-Events benutzen, bei denen kein Cache verwendet werden soll.</p>
+
+<p>Zum Beispiel sollte die Google-Toolbar für den Firefox bei der autolink-Funktion auf das <code>onload</code>-Event reagieren und für die PageRank-Funktion mit dem <code>pageshow</code>-Event arbeiten, um kompatibel zu allen Firefox-Versionen zu sein.</p>
+
+<p>{{ languages( { "en": "en/Using_Firefox_1.5_caching", "it": "it/Usare_il_caching_di_Firefox_1.5", "fr": "fr/Utilisation_du_cache_de_Firefox_1.5", "ja": "ja/Using_Firefox_1.5_caching" } ) }}</p>
diff --git a/files/de/bugzilla/index.html b/files/de/bugzilla/index.html
new file mode 100644
index 0000000000..4a16805ef8
--- /dev/null
+++ b/files/de/bugzilla/index.html
@@ -0,0 +1,27 @@
+---
+title: Bugzilla
+slug: Bugzilla
+tags:
+  - Qualitätssicherung
+  - Tools
+translation_of: Mozilla/Bugzilla
+---
+<p><a class="link-https" href="https://bugzilla.mozilla.org/">bugzilla.mozilla.org</a> (häufig als b.m.o. abgekürzt) ist das von Mozilla entwickelte Bug-tracking System, eine Datenbank, die Bugs und Verbesserungsanträge für Firefox, Thunderbird, SeaMonkey, Camino, und andere mozilla.org Projekte aufzeichnet.</p>
+
+<h3 id="Bugzilla_verwenden">Bugzilla verwenden</h3>
+
+<p>Die Seite »<a href="https://developer.mozilla.org/de/docs/What_to_do_and_what_not_to_do_in_Bugzilla" title="de/Was_man_mit_Bugzilla_mact_und_was_nicht">Was man mit Bugzilla macht und was nicht</a>« und die <a class="link-https" href="https://bugzilla.mozilla.org/page.cgi?id=etiquette.html">Bugzilla Etiquette</a> zeigen ein paar Regeln auf, was man beim Gebrauch von Bugzilla beachten sollte.</p>
+
+<p>Unter <a href="/de/Qualitätssicherung" title="de/Qualitätssicherung">Qualitätssicherung</a> kann man mehr erfahren und die Artikel »<a class="external" href="http://www.mozilla.org/quality/help/beginning-duplicate-finding.html">Herausfinden, ob ein Bug schon gemeldet wurde</a>« oder die <a href="/de/Richtlinien_zum_Schreiben_eines_Bugreports">Richtlinien zum Schreiben eines Bugreports</a> geben weiterführende Informationen, wie man einen neuen Bug meldet.</p>
+
+<p>Um zu Erfahren, wie man Code zu Firefox oder anderen Projekten beitragen kann, gibt es unter <a href="/de/Einreichen_eines_Patches" title="de/Einreichen_eines_Patches">Einreichen eines Patches</a> weitere Informationen.</p>
+
+<h3 id="Siehe_auch">Siehe auch</h3>
+
+<ul>
+ <li><a class="external" href="http://www.mozilla.org/bugs/">Eine Einführung in Bugzilla</a></li>
+ <li><a class="external" href="http://blog.johnath.com/2010/02/04/bugzilla-for-humans">Bugzilla for humans</a> Einführendes Video</li>
+ <li><a class="external" href="http://www.squarefree.com/bugzilla/quicksearch-help.html">Bugzilla QuickSearch-Hilfeseite</a>. QuickSearch ist ein schneller, einfacher und sehr effektiver Weg, Anfragen in Bugzilla zu stellen.</li>
+ <li><a class="external" href="http://www.bugzilla.org">bugzilla.org</a> - die Projekt-Seite</li>
+ <li>{{ interwiki('wikipedia', 'Bugzilla', 'wikipedia:Bugzilla') }} - Allgemeine Beschreibung von Bugzilla auf Wikipedia</li>
+</ul>
diff --git a/files/de/bundles/index.html b/files/de/bundles/index.html
new file mode 100644
index 0000000000..fa67b9d739
--- /dev/null
+++ b/files/de/bundles/index.html
@@ -0,0 +1,81 @@
+---
+title: Struktur eines installierbaren Bündels
+slug: Bundles
+tags:
+  - Toolkit API
+translation_of: Archive/Mozilla/Bundles
+---
+<p><a href="/de/Packen_einer_XUL_Anwendung" title="de/Packen_einer_XUL_Anwendung">XULRunner Anwendungen</a>, <a href="/de/Erweiterungen" title="de/Erweiterungen">Erweiterungen</a>, und <a href="/de/Themes" title="de/Themes">Themes</a> teilen sich eine gemeinsame Verzeichnisstruktur, und in einigen Fällen kann das gleiche Bündel als eigenständige XULRunner-Anwendung und als eine installierbare Anwendungserweiterung genutzt werden. Die Grundstruktur von Bündeln kann einige der folgenden Dateien beinhalten:</p>
+<pre class="eval">/<a href="/de/Installationsmanifest" title="de/Installationsmanifest">install.rdf</a>                        <em>Erweiterung/Theme Installationsmanifest</em>
+/<a href="/de/Packen_einer_XUL_Anwendung" title="de/Packen_einer_XUL_Anwendung">application.ini</a>                    <em>Anwendungsstartmanifest</em>
+/components/*                       <em>Komponenten und XPT Dateien</em>    <a href="/de/Gecko#Versionen" title="de/Gecko#Versionen">(&gt;=1.7)</a>
+<a href="/de/Erweiterungen_erstellen" title="de/Erweiterungen_erstellen">/defaults/preferences/*.js</a>          <em>Voreinstellungen</em>               <a href="/de/Gecko#Versionen" title="de/Gecko#Versionen">(&gt;=1.7)</a>
+/plugins/*                          <em>NPAPI Plugins</em>                  <a href="/de/Gecko#Versionen" title="de/Gecko#Versionen">(&gt;=1.8)</a>
+/<a href="/de/Chrome_Registrierung" title="de/Chrome.manifest">chrome.manifest</a>                    <em>Chrome-Registrierungsmanifest </em> <a href="/de/Gecko#Versionen" title="de/Gecko#Versionen">(&gt;=1.8)</a>
+/<a href="/de/Fenstersymbole" title="de/Fenstersymbole">chrome/icons/default/*</a>             <em>Fenstersymbole</em>                 <a href="/de/Gecko#Versionen" title="de/Gecko#Versionen">(&gt;=1.8)</a>
+</pre>
+<p>Natürlich benötigt eine Erweiterung nicht all diese Verzeichnisse. Themes sind aus Sicherheitsgründen eingeschränkt, und können normalerweise nur ein <a href="/de/Chrome_Registrierung" title="de/Chrome_Registrierung">chrome.manifest</a> zur Registrierung und eine JAR-Datei mitliefern.</p>
+<p> </p>
+<h3 id="Plattformspezifische_Unterverzeichnisse_in_Gecko_1.9.2_und_früher">Plattformspezifische Unterverzeichnisse in Gecko 1.9.2 und früher</h3>
+<div class="geckoVersionNote">
+<div class="geckoVersionHeading">
+Hinweis zu Gecko 2.0
+<div style="font-size: 9px; line-height: 1; font-style: italic;">(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)</div>
+</div>
+<p>Plattformspezifische Unterverzeichnisse wurden mit Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) entfernt. Siehe <a href="/de/Bundles#Plattform-spezifische_Dateien" title="de/Bundles#Plattform-spezifische Dateien">Plattform-spezifische Dateien</a> für weitere Informationen.</p>
+</div>
+<p>In einigen Fällen kann eine Erweiterung oder Anwendung es erforderlich machen, eine binäre Komponente oder Plugins für verschiedene Plattformen bereitzustellen, oder Theme-Autoren können mehrere plattformspezifische JAR-Dateien bündeln. Um das zu bewerkstelligen, nutzt der Erweiterungslader besondere Unterverzeichnisse für plattformspezifische Dateien (angefangen ab Toolkit/Gecko 1.8, Firefox/Thunderbird 1.5). Die Plattform-Zeichenkette wird während des Toolkit Build Vorgangs auf einen eindeutigen Wert festgelegt - eine Kombination aus Betriebssystem, Prozessorarchitektur und Compiler. Das Format der Plattform-Zeichenkette ist:</p>
+<pre class="eval"><em><a href="/de/OS_TARGET" title="de/OS_TARGET">{OS_TARGET}</a></em>_<em>{<a href="/de/XPCOM_ABI" title="de/XPCOM_ABI">TARGET_XPCOM_ABI</a>}</em>
+</pre>
+<p>Jede der Dateien, welche vom Erweiterungshauptverzeichnis geladen werden nun vom Unterverzeichnis geladen, wenn es existiert:</p>
+<pre class="eval">/platform/<em>{Plattform Zeichenkette}</em>
+</pre>
+<p>Wenn zum Beispiel ein Dritt-Anbieter ein Plugin für Computer unter Linux, Macintosh und Windows bereitstellen möchte, wären folgende Dateien nötig:</p>
+<pre class="eval">/platform/Linux_x86-gcc3/plugins/libMyPlugin.so
+/platform/WINNT_x86-msvc/plugins/MyPlugin.dll
+/platform/Darwin_ppc-gcc3/plugins/libMyPlugin.dylib
+</pre>
+<p>Weil XPT-Dateien nicht plattformspezifisch sind, landen zugehörige XPT-Dateien in einem generischen Komponentenverzeichnis:</p>
+<pre class="eval">/components/MyPlugin.xpt
+</pre>
+<p>Wenn eine Erweiterung nicht-binären, plattformspezifischen Code (z.B. zur Eintragung in die Windows-Registrierung) beinhaltet, kann einfach der Betriebssystem-Bezeichner als Plattform-Unterverzeichnis dienen:</p>
+<pre class="eval">/platform/WINNT/components/registerDoctype.js
+</pre>
+<p>Wenn plattformspezifische JAR-Dateien genutzt werden, sollte jedes Plattformverzeichnis eine eigene <code>chrome.manifest</code> Datei enthalten:</p>
+<pre class="eval">chrome.manifest
+chrome/mytheme-base.jar
+platform/Darwin/chrome.manifest
+platform/Darwin/chrome/mytheme-mac.jar
+platform/WINNT/chrome.manifest
+platform/WINNT/chrome/mytheme-win.jar
+</pre>
+<p>Der Ladevorgang verarbeitet zuerst das Basisverzeichnis, gefolgt durch die jeweiligen Plattformverzeichnisse (zuerst <em>/{OS_TARGET}/</em>, dann <em>/</em><a href="/de/OS_TARGET" title="de/OS_TARGET"><em>{OS_TARGET}</em></a><em>_{</em><a href="/de/XPCOM_ABI" title="de/XPCOM_ABI"><em>TARGET_XPCOM_ABI</em></a><em>}/</em>). Wenn Voreinstellungen in unterschiedlichen Verzeichnissen gesetzt werden, wird das zuletzt geladene das vorherige überschreiben.</p>
+<h3 id="Plattform-spezifische_Dateien">Plattform-spezifische Dateien</h3>
+<p>Mit Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) wurde die Unterstützung für Plattform-spezifische Unterverzeichnisse entfernt. Stattdessen müssen nun Manifest-Flags, wie zum Beispiel <a href="/de/Chrome_Registrierung#OS" title="de/Chrome Registrierung#OS"><code>OS</code></a> und <a href="/de/Chrome_Registrierung#abi" title="de/Chrome Registrierung#abi"><code>ABI</code></a> Flags, im <a href="/de/Chrome_Registrierung" title="de/Chrome Registrierung">Chrome-Manifest</a> verwendet werden, um Komponenten festzulegen, die von bestimmten Plattformen geladen werden sollen.</p>
+<p>Zum Beispiel:</p>
+<pre>binary-component components/windows/mycomponent.dll ABI=WINNT_x86-msvc
+binary-component components/mac/mycomponent.dylib ABI=Darwin_x86-gcc3
+binary-component components/mac/mycomponent64.dylib ABI=Darwin_x86-64-gcc3
+binary-component components/linux/mycomponent.so ABI=Linux_x86-gcc3
+</pre>
+<h3 id="Anwendungsspezifische_Erweiterungsdateien">Anwendungsspezifische Erweiterungsdateien</h3>
+<p>Zusätzlich zu den oben aufgeführten Erweiterungsdateien, können Anwendungen weitere Dateien aus den Erweiterungen lesen. <a href="/de/Firefox_1.5_für_Entwickler" title="de/Firefox_1.5_für_Entwickler">Firefox 1.5</a> oder höher liest zum Beispiel Sherlock Suchplugins aus.</p>
+<pre class="eval">/searchplugins/*.src
+</pre>
+<p><a href="/de/Firefox_2_für_Entwickler" title="de/Firefox_2_für_Entwickler">Firefox 2</a> und höher werden auch <a href="/de/MozSearch_Plugins_erstellen" title="de/MozSearch_Plugins_erstellen">MozSearch und OpenSearch Plugins</a> aus</p>
+<pre class="eval">/searchplugins/*.xml
+</pre>
+<p>und Myspell-Wörterbücher aus</p>
+<pre class="eval">/dictionaries/*.{aff|dic}
+</pre>
+<p>lesen können.</p>
+<h3 id="Offizielle_Toolkit_API_Referenzen">Offizielle <a href="/de/Toolkit_API" title="de/Toolkit_API">Toolkit API</a> Referenzen</h3>
+<p>
+      </p><ul>
+        <li><a href="/de/Bundles" title="de/Bundles">Struktur eines installierbaren Bündels</a>: Beschreibung der gemeinsamen Struktur von installierbaren Bündeln von Erweiterungen, Themes und XULRunner Anwendungen</li>
+        <li><a href="/de/Packen_von_Erweiterungen" title="de/Packen_von_Erweiterungen">Packen von Erweiterungen</a>: Informationen über das Packen von Erweiterungen</li>
+        <li><a href="/de/Packen_von_Themes" title="de/Packen_von_Themes">Packen von Themes</a>: Informationen über das Packen von Themes</li>
+        <li><a href="/de/Packen_von_mehreren_Erweiterungen" title="de/Packen_von_mehreren_Erweiterungen">Packen von mehreren Erweiterungen</a>: Informationen über das Packen von mehreren Erweiterungen</li>
+        <li><a href="/de/Packen_einer_XUL_Anwendung" title="de/Packen_einer_XUL_Anwendung">Packen einer XUL Anwendung</a>: Informationen über das Packen von XUL Anwendungen</li>
+        <li><a href="/de/Chrome_Registrierung" title="de/Chrome_Registrierung">Chrome Registrierung</a></li>
+      </ul>
diff --git a/files/de/codeschnipsel/cookies/index.html b/files/de/codeschnipsel/cookies/index.html
new file mode 100644
index 0000000000..555505f616
--- /dev/null
+++ b/files/de/codeschnipsel/cookies/index.html
@@ -0,0 +1,45 @@
+---
+title: Cookies
+slug: Codeschnipsel/Cookies
+tags:
+  - Add-ons
+  - Codeschnipsel
+  - Cookies
+  - Erweiterungen
+translation_of: Archive/Add-ons/Code_snippets/Cookies
+---
+<h3 id="Reading_existing_cookies" name="Reading_existing_cookies">Existierende Cookies lesen</h3>
+
+<p>Cookies für einen gegebenen Host, repräsentiert als <code><a href="https://developer.mozilla.org/de/docs/Codeschnipsel/Cookies" title="">nsICookie2</a></code> Objekte, können so nummeriert werden:</p>
+
+<pre class="brush: js">let enum = Services.cookies.getCookiesFromHost("example.com");
+while (enum.hasMoreElements()) {
+  var cookie = e.getNext().QueryInterface(Ci.nsICookie2);
+  dump(cookie.host + ";" + cookie.name + "=" + cookie.value + "\n");
+}
+</pre>
+
+<p>Alle Cookies, regardless vom Host, kann man mit <code>Services.cookies.enumerator</code> rather than <code>getCookiesFromHost()</code>.</p>
+
+<p>nummerieren.</p>
+
+<h3 id="Setting_a_cookie" name="Setting_a_cookie">Ein Cookie einstellen</h3>
+
+<p>Der folgende Code zeigt, wie man in Firefox ein Cookie einstellt.</p>
+
+<pre class="brush: js">Services.cookies.add(".host.example.com", "/cookie-path", "cookie_name", "cookie_value", is_secure, is_http_only, is_session, expiry_date);
+</pre>
+
+<h3 id="See_also" name="See_also">Siehe auch</h3>
+
+<ul>
+ <li>{{ Domxref("document.cookie") }}</li>
+ <li>{{ Interface("nsICookie") }}</li>
+ <li>{{ Interface("nsICookie2") }}</li>
+ <li>{{ Interface("nsICookieService") }}</li>
+ <li>{{ Interface("nsICookieManager") }}</li>
+ <li>{{ Interface("nsICookieManager2") }}</li>
+ <li><a href="/en/Web_Development/HTTP_cookies" title="HTTP cookies">HTTP cookies</a></li>
+</ul>
+
+<p>{{ languages( { "fr": "fr/Extraits_de_code/Cookies", "ja": "ja/Code_snippets/Cookies", "pl": "pl/Fragmenty_kodu/Ciasteczka" } ) }}</p>
diff --git a/files/de/codeschnipsel/index.html b/files/de/codeschnipsel/index.html
new file mode 100644
index 0000000000..31c6bc8bf3
--- /dev/null
+++ b/files/de/codeschnipsel/index.html
@@ -0,0 +1,28 @@
+---
+title: Codeschnipsel
+slug: Codeschnipsel
+tags:
+  - Add-ons
+  - Erweiterungen
+translation_of: Archive/Add-ons/Code_snippets
+---
+<p>Dies ist eine Liste mit nützlichen Codeschnipseln (kleine Code-Beispiele) für Entwickler von Erweiterungen für verschiedene Mozilla Anwendungen. Viele dieser Beispiele können sowohl in XULRunner als auch im aktuellen Mozilla-Code benutzt werden.</p>
+<p>Diese Beispiele zeigen, wie grundlegende Aufgaben bewältigt werden können, deren Lösung nicht offensichtlich ist.</p>
+<h3 id="Allgemein">Allgemein</h3>
+<dl> <dt><a href="/de/Codeschnipsel/Windows" title="de/Codeschnipsel/Windows">Windows</a></dt> <dd><small>Fenster öffnen und bearbeiten.</small></dd> <dt><a href="/de/Codeschnipsel/Toolbar" title="de/Codeschnipsel/Toolbar">Toolbar</a></dt> <dd><small>Code im Bezug zur Toolbar.</small></dd> <dt><a href="/de/Codeschnipsel/Sidebar" title="de/Codeschnipsel/Sidebar">Sidebar</a></dt> <dd><small>Code im Bezug zur Sidebar.</small></dd> <dt><a href="/de/Codeschnipsel/XML" title="de/Codeschnipsel/XML">XML</a></dt> <dd><small>Beispielcode, um XML zu parsen, zu schreiben und zu verändern.</small></dd> <dt><a href="/de/Codeschnipsel/File_IO" title="de/Codeschnipsel/File_IO">File I/O</a></dt> <dd><small>Beispielcode, um Dateien zu lesen und zu schreiben.</small></dd> <dt><a href="/de/Codeschnipsel/Drag_und_Drop" title="de/Codeschnipsel/Drag_und_Drop">Drag &amp; Drop</a></dt> <dd><small>Beispielcode, um "Drag und Drop" Ereignisse zu verwalten</small></dd> <dt><a href="/de/Codeschnipsel/Dialoge_und_Prompts" title="de/Codeschnipsel/Dialoge_und_Prompts">Dialoge</a></dt> <dd><small>Beispielcode, um Dialogboxen und Eingabeaufforderungen anzuzeigen.</small></dd> <dt><a href="/de/Codeschnipsel/Warnungen_und_Meldungen" title="de/Codeschnipsel/Warnungen_und_Meldungen">Warnungen und Meldungen</a></dt> <dd><small>Modale und nicht-modale Wege den Benutzer zu benachrichtigen.</small></dd> <dt><a href="/de/Codeschnipsel/Einstellungen" title="de/Codeschnipsel/Einstellungen">Einstellungen</a></dt> <dd><small>Beispielcode, um Einstellungen zu lesen, zu schreiben und zu verändern.</small></dd> <dt><a href="/de/Codeschnipsel/JS_XPCOM" title="de/Codeschnipsel/JS_XPCOM">JS XPCOM</a></dt> <dd><small>Beispielcode, um XPCOM Komponenten in JavaScript aufzurufen</small></dd> <dt><a href="/de/Codeschnipsel/Anwendungen_starten" title="de/Codeschnipsel/Anwendungen_starten">Anwendungen starten</a></dt> <dd><small>Beispielcode, um andere Anwendungen zu starten.</small></dd> <dt><a href="/de/Codeschnipsel/Canvas" title="de/Codeschnipsel/Canvas"><code>&lt;canvas&gt;</code></a></dt> <dd><small>Auf <a href="/de/HTML/Canvas" title="de/HTML/Canvas">Canvas</a> bezogener Code.</small></dd> <dt><a href="/de/Codeschnipsel/Signierung_einer_XPI" title="de/Codeschnipsel/Signierung_einer_XPI">Signierung einer XPI</a></dt> <dd><small>Wie eine XPI mit PKI signiert wird.</small></dd> <dt><a href="/de/Codeschnipsel/Threads" title="de/Codeschnipsel/Threads">Threads</a></dt> <dd><small>Hintergrundoperationen ausführen und die Ausführung verzögern, während Hintergrundoperationen beendet werden.</small></dd> <dt><a href="/de/Codeschnipsel/Diverses" title="de/Codeschnipsel/Diverses">Diverses</a></dt> <dd><small>Diverse nützliche Codefragmente.</small></dd> <dt><a href="/de/Codeschnipsel/HTML_zu_DOM" title="de/Codeschnipsel/HTML_zu_DOM">HTML zu DOM</a></dt> <dd><small>Verwendung eines versteckten Browserelements, um HTML zu DOM zu parsen.</small></dd>
+</dl>
+<h3 id="Browser-orientierter_Code">Browser-orientierter Code</h3>
+<dl> <dt><a href="/de/Codeschnipsel/Tabbed_browser" title="de/Codeschnipsel/Tabbed_browser">Tabbed Browser</a> (Firefox/SeaMonkey)</dt> <dd><small>Grundlegende Operationen, wie das Laden von Seiten mit dem Tabbed Browser, welche das Herz von Mozilla's Browser Anwendungen darstellen.</small></dd> <dt><a href="/de/Codeschnipsel/Cookies" title="de/Codeschnipsel/Cookies">Cookies</a></dt> <dd><small>Lesen, Schreiben, Verändern und Entfernen von Cookies.</small></dd> <dt><a href="/de/Codeschnipsel/Seitenaufbau" title="de/Codeschnipsel/Seitenaufbau">Seitenaufbau</a></dt> <dd><small>Beispielcode, um Seiten zu laden und neu zu laden.</small></dd> <dt><a href="/de/Codeschnipsel/Interaktion_zwischen_priviligierten_und_nicht-priviligierten_Seiten" title="de/Codeschnipsel/Interaktion_zwischen_priviligierten_und_nicht-priviligierten_Seiten">Interaktion zwischen priviligierten und nicht-priviligierten Seiten</a></dt> <dd><small>Wie man zwischen Erweiterungen und Webseiten kommuniziert.</small></dd> <dt><a href="/de/Codeschnipsel/Dateien_herunterladen" title="de/Codeschnipsel/Dateien_herunterladen">Dateien herunterladen</a></dt> <dd><small>Beispielcode, um Dateien und Bilder herunter zu laden und den Downloadfortschritt zu überwachen.</small></dd> <dt><a href="/de/Codeschnipsel/Passwort_Manager" title="de/Codeschnipsel/Passwort_Manager">Passwort Manager</a></dt> <dd><small>Beispielcode, um Passwörter aus/zum integriertem Passwortmanager zu speichern oder auszulesen.</small></dd> <dt><a href="/de/Codeschnipsel/Lesezeichen" title="de/Codeschnipsel/Lesezeichen">Lesezeichen</a></dt> <dd><small>Beispielcode, um Lesezeichen auszulesen und zu speichern.</small></dd> <dt><a href="/de/Codeschnipsel/JavaScript_Debugger_Service" title="de/Codeschnipsel/JavaScript_Debugger_Service">JavaScript Debugger Service</a></dt> <dd><small>Interaktionen mit dem JavaScript Debugger Service</small></dd>
+</dl>
+<h3 id="SVG">SVG</h3>
+<dl> <dt><a href="/de/Codeschnipsel/SVG_Allgemein" title="de/Codeschnipsel/SVG_Allgemein">Allgemein</a></dt> <dd><small>Allgemeine Informationen und Werkzeuge.</small></dd> <dt><a href="/de/Codeschnipsel/SVG_Animation" title="de/Codeschnipsel/SVG_Animation">SVG Animation</a></dt> <dd><small>Animiertes SVG über JavaScript und SMIL</small></dd> <dt><a href="/de/Codeschnipsel/Interaktives_SVG_mit_JavaScript" title="de/Codeschnipsel/Interaktives_SVG_mit_JavaScript">Interaktives SVG mit JavaScript</a></dt> <dd><small>Verwendung von JavaScript und DOM Ereignissen, um interaktives SVG zu erstellen.</small></dd> <dt><a href="/de/Codeschnipsel/SVG_einbetten" title="de/Codeschnipsel/SVG_einbetten">SVG in HTML und XUL einbetten</a></dt> <dd><small>Verwendung von SVG, um HTML oder XUL Markup aufzuwerten.</small></dd>
+</dl>
+<h3 id="XUL_Widgets">XUL Widgets</h3>
+<dl> <dt><a href="/de/Codeschnipsel/HTML_Tooltips_in_XUL" title="de/Codeschnipsel/HTML_Tooltips_in_XUL">HTML Tooltips in XUL</a></dt> <dd><small>Dynamische Einbettung von HTML in ein XUL Element, um einen Tooltip mit Markup zu versehen.</small></dd> <dt><a href="/de/Codeschnipsel/Beschriftungen_und_Beschreibungen" title="de/Codeschnipsel/Beschriftungen_und_Beschreibungen">Beschriftungen und Beschreibungen</a></dt> <dd><small>Spezielle Verwendungen und Beispiele zu Zeilenumbrüchen.</small></dd> <dt><a href="/de/Codeschnipsel/Tree" title="de/Codeschnipsel/Tree">Tree</a></dt> <dd><small>Erstellung und Veränderung von Trees mit XUL und JS.</small></dd> <dt><a href="/de/Codeschnipsel/Scrollbar" title="de/Codeschnipsel/Scrollbar">Scrollbar</a></dt> <dd><small>Das Aussehen der Scrollbar vom Browser sowie Iframes verändern.</small></dd> <dt><a href="/de/Codeschnipsel/Autovervollständigung" title="de/Codeschnipsel/Autovervollständigung">Autovervollständigung</a></dt> <dd><small>Beispielcode, um Autovervollständigung im Browser zu aktivieren.</small></dd> <dt><a href="/de/Codeschnipsel/Boxen" title="de/Codeschnipsel/Boxen">Boxen</a></dt> <dd><small>Tipps und Tricks zur Verwendung von Boxen als Container.</small></dd> <dt><a href="/de/Codeschnipsel/Tabbox" title="de/Codeschnipsel/Tabbox">Tabbox</a></dt> <dd><small>Entfernen und Verändern von Tabs in Tabboxen.</small></dd>
+</dl>
+<h3 id="Windows-spezifisch">Windows-spezifisch</h3>
+<dl> <dt><a href="/de/Codeschnipsel/Window_Handler_auffinden" title="de/Codeschnipsel/Window_Handler_auffinden">Window Handler (HWND) auffinden</a> (Firefox)</dt> <dd><small>Wie man die Windows API aufruft, um Mozilla Window Handler zu finden. Window Handler können für IPC und Zugänglichkeit gebraucht werden.</small></dd> <dt><a href="/de/Zugang__zur_Windows_Registrierung_über_XPCOM" title="de/Zugang__zur_Windows_Registrierung_über_XPCOM">Zugang zur Windows Registrierung über XPCOM</a></dt> <dd><small>Wie man Registrierungschlüssel und -werte auslesen, schreiben, verändern, löschen, aufzählen, und beobachten kann.</small></dd>
+</dl>
+<h3 id="Externe_Links">Externe Links</h3>
+<p>Die Inhalte auf <a class="external" href="http://kb.mozillazine.org/Category:Example_code">MozillaZine Example Code</a> werden nach und nach auf diese Seite umgezogen, aber es gibt dort noch einige nützliche Beispiele.</p>
+<p>{{ languages( { "en": "en/Code_snippets", "fr": "fr/Extraits_de_code", "ja": "ja/Code_snippets", "ko": "ko/Code_snippets", "pl": "pl/Fragmenty_kodu" } ) }}</p>
diff --git a/files/de/codeschnipsel/on_page_load/index.html b/files/de/codeschnipsel/on_page_load/index.html
new file mode 100644
index 0000000000..ffc64be436
--- /dev/null
+++ b/files/de/codeschnipsel/on_page_load/index.html
@@ -0,0 +1,124 @@
+---
+title: On page load
+slug: Codeschnipsel/On_page_load
+translation_of: Archive/Add-ons/Code_snippets/On_page_load
+---
+<p><font><font>Dieser Artikel ist für </font></font><a href="/en/XUL" title="en / XUL"><font><font>XUL</font></font></a><font><font> / </font></font><a href="/en/JavaScript" title="en / JavaScript"><font><font>JavaScript-Entwickler, die benutzerdefinierte Code haben wollen jedes Mal eine neue Seite wird im Browser / Mail geladen ausgeführt. </font></font></a><font><font>Wenn Sie genauere Kontrolle über benutzerdefinierte Code-Ausführung, zum Beispiel benötigen, wie Dokumente Laden oder wenn Registerkarten schalteten sehen </font></font><a href="/en/Code_snippets/Progress_Listeners" title="en / Code_snippets / Progress_Listeners"><font><font>Fortschritt </font></font></a><font><font>Hörer.</font></font></p>
+
+<p><font><font>Fortschritte Zuhörern ermöglichen Erweiterungen der Ereignisse mit Dokumenten Laden in den Browser und mit Tab Umschalten Ereignissen benachrichtigt werden. </font><font>Fortschritte Zuhörer Umsetzung der </font></font><a href="/en-US/docs/XPCOM_Interface_Reference/nsIWebProgressListener" title="/ en-US / docs / XPCOM_Interface_Reference / nsIWebProgressListener"><font><font>nsIWebProgressListener</font></font></a><font><font> Schnittstelle.</font></font></p>
+
+<h3 id="Creating_an_overlay" name="Creating_an_overlay"><font><font>Erstellen eines Overlays</font></font></h3>
+
+<p><font><font>Zuerst müssen Sie einen erstellen, </font></font><a href="/en/XUL_Overlays" title="en / XUL_Overlays"><font><font>Überlagerung, um eine (oder mehrere, je nachdem, welche Anwendungen Sie zielen) der folgenden XUL-Dokumente:</font></font></a></p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th><font><font>Anwendung</font></font></th>
+   <th><font><font>URI zu überlagern</font></font></th>
+  </tr>
+  <tr>
+   <td><font><font>Firefox</font></font></td>
+   <td><code><a class="external" rel="freelink"><font><font>chrome: //browser/content/browser.xul</font></font></a></code></td>
+  </tr>
+  <tr>
+   <td><font><font>Thunderbird</font></font></td>
+   <td><code><a class="external" rel="freelink"><font><font>chrome: //messenger/content/messenger.xul</font></font></a></code></td>
+  </tr>
+  <tr>
+   <td><font><font>Navigator von SeaMonkey</font></font></td>
+   <td><code><a class="external" rel="freelink"><font><font>chrome: //navigator/content/navigator.xul</font></font></a></code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Attaching_a_script" name="Attaching_a_script"><font><font>Anbringen eines Skripts</font></font></h3>
+
+<p><font><font>Bringen Sie ein Skript, um Ihre einblenden (siehe </font></font><a href="/en/XUL_Overlays#Attaching_a_Script_to_an_Overlay" title="en / XUL Overlays"><font><font>"Anbringen eines Skripts zum Erstellen einer </font></font></a><font><font>Overlay"), </font><font>die eine fügt </font></font><code><font><font>Last</font></font></code><font><font> Ereignis-Listener </font></font><code><font><font>APPCONTENT</font></font></code><font><font> Element (Browser) oder </font></font><code><font><font>messagepane</font></font></code><font><font> (mail):</font></font></p>
+
+<pre class="brush: js"><font><font>window.addEventListener("load", function load(event) {
+    window.removeEventListener("load", load, false); // Listener entfernen, da nicht mehr benötigt
+    myExtension.init();  </font></font><font><font>
+}, false);</font></font>
+<font><font>
+var myextension = {</font></font><font><font>
+  init: function() {</font></font><font><font>
+    var APPCONTENT = document.getElementById("APPCONTENT"); </font><font>// Browser</font></font><font><font>
+    if (APPCONTENT) {</font></font><font><font>
+      appcontent.addEventListener("DOMContentLoaded", myExtension.onPageLoad, true);</font></font><font><font>
+    }</font></font><font><font>
+    var messagepane = document.getElementById("messagepane"); </font><font>// Mail</font></font><font><font>
+    if (messagepane) {</font></font><font><font>
+      messagepane.addEventListener("load", function(event) { myExtension.onPageLoad(event); }, true);</font></font><font><font>
+    }</font></font><font><font>
+  }</font></font>
+<font><font>
+  onPageLoad: function(aEvent) {</font></font><font><font>
+    var doc = aEvent.originalTarget; </font><font>// doc ist das Dokument, das den "onload" Event ausgelöst hat
+    // Tu etwas mit der geladenen Seite.
+    // doc.location ist ein Location-Objekt (siehe Link unten).
+    // Man kann es verwenden, um Code nur auf bestimmten Seiten auszuführen.
+    if (doc.location.href.search ("forum")&gt; -1)
+      alert("Eine Forum-Seite, wird geladen");</font></font>
+    <font><font>
+    // Füge Ereignis-Listener für page "unload" hinzu
+    aEvent.originalTarget.defaultView.addEventListener ("unload", function(event) { myExtension.onPageUnload (event); }, true);
+  }</font></font>
+<font><font>
+  onPageUnload: function(Aevent) {</font></font><font><font>
+    // Tu etwas</font></font><font><font>
+  }</font></font><font><font>
+};</font></font>
+</pre>
+
+<p><font><font>Aktuelle Firefox Stamm Night die onPageLoad Funktion nicht nur für Dokumente, Feuer, aber </font></font><code><font><font>xul: Bilder</font></font></code><font><font> (Favicons in Tabbrowser). </font><font>Wenn Sie nur wollen, Dokumente zu verarbeiten, zu gewährleisten </font></font><code><font><font>aEvent.originalTarget.nodeName == </font></font></code><font><font>"#document".</font></font></p>
+
+<p><font><font>Wenn Sie mit Code auf einer Seite zu laden, ist es wahrscheinlich, würden Sie wollen, um etwas Bereinigungscode auf Seite Entladen laufen. </font><font>Um in das Unload-Ereignis im obigen Beispiel können Sie den "pagehide" Veranstaltung wie diese verwenden zu befestigen:</font></font></p>
+
+<pre class="brush: js"><font><font>appcontent.addEventListener ("pagehide", myExtension.onPageUnload, false);
+</font></font></pre>
+
+<p><font><font>für </font></font><code><font><font>APPCONTENT</font></font></code><font><font> und ähnlich für </font></font><code><font><font>messagepane</font></font></code></p>
+
+<pre class="brush: js"><font><font>messagepane.addEventListener ("pagehide", myExtension.onPageUnload, false);</font></font></pre>
+
+<p><font><font>und fügen Sie den Code zur </font></font><code><font><font>onPageUnload</font></font></code><font><font> Methode.</font></font></p>
+
+<p> </p>
+
+<p> </p>
+
+<h3 id="Basis_onPageLoad_für_ein_Browser-Fenster"><font><font>Basis onPageLoad für ein Browser-Fenster</font></font></h3>
+
+<pre class="brush: js"><font><font>var myextension = {</font></font><font><font>
+    init: function () {</font></font><font><font>
+        // Das Ereignis kann DOMContentLoaded werden, pageshow, pagehide, laden oder entladen.</font></font><font><font>
+        if (gBrowser) gBrowser.addEventListener ("DOMContentLoaded", this.onPageLoad, false);</font></font><font><font>
+    }</font></font><font><font>
+    onPageLoad: function (Aevent) {</font></font><font><font>
+        var doc = aEvent.originalTarget; </font><font>// Doc ist Dokument, das das Ereignis ausgelöst hat</font></font><font><font>
+        var win = doc.defaultView; </font><font>// Sieg ist das Fenster für den doc</font></font><font><font>
+        // Test gewünschten Bedingungen und etwas tun,</font></font><font><font>
+        // If (doc.nodeName = "#document"!) Return; </font><font>// Nur Dokumente</font></font><font><font>
+        // If (Sieg = win.top!) Return; </font><font>// nur Top-Fenster.</font></font><font><font>
+        // If (win.frameElement) return; </font><font>// Überspringen iframes / Rahmen</font></font><font><font>
+        alert ("Seite geladen wird \ n" + doc.location.href);</font></font><font><font>
+    }</font></font><font><font>
+}</font></font><font><font>
+window.addEventListener ("load", Funktion load (event) {</font></font><font><font>
+    window.removeEventListener ("load", Last, false); </font><font>// Listener zu entfernen, nicht mehr benötigt</font></font><font><font>
+    myExtension.init ();  </font></font><font><font>
+},falsch);</font></font>
+</pre>
+
+<h3 id="References" name="References"><font><font>Referenzen</font></font></h3>
+
+<ul>
+ <li><font><font>Wenn Sie brauchen, um eine kompliziertere Hörer (nicht nur onload) haben, verwenden </font></font><a href="/en/Code_snippets/Progress_Listeners" title="en / Code_snippets / Progress_Listeners"><font><font>Fortschritt </font></font></a><font><font>Hörer.</font></font></li>
+</ul>
+
+<h3 id="Sehe_auch"><font><font>Sehe auch</font></font></h3>
+
+<ul>
+ <li><font><font>DOMContentLoaded Ereignis in </font></font><a href="/En/Listening_to_events_in_Firefox_extensions#Simple_DOM.c2.a0events" title="De / Hören Veranstaltungen # Einfache DOM.c2.a0events"><font><font>Anhören von Veranstaltungen: Einfache DOM-Ereignisse</font></font></a></li>
+</ul>
diff --git a/files/de/codeschnipsel/scrollbar/index.html b/files/de/codeschnipsel/scrollbar/index.html
new file mode 100644
index 0000000000..3fa77ebaf7
--- /dev/null
+++ b/files/de/codeschnipsel/scrollbar/index.html
@@ -0,0 +1,32 @@
+---
+title: Scrollbar
+slug: Codeschnipsel/Scrollbar
+translation_of: Archive/Add-ons/Code_snippets/Scrollbar
+---
+<p>Dieses Beispiel zeigt, wie die Scrollbars in einer XUL-Applikation verändert werden können.  Scrollbars im Browser werden auch gestylt. <br>
+(Auf Windows XP getestet)</p>
+<p>Das Beispiel setzt die folgende Struktur voraus:</p>
+<pre class="eval">app/chrome/chrome.manifest
+app/chrome/skin/global/
+</pre>
+<p>Kopieren Sie die scrollbars.css von <code>xulrunner/chrome/classic.jar/skin/classic/global</code> nach <code>app/chrome/skin/global/scrollbars.css</code></p>
+<p>Öffnen Sie <code>app/chrome/chrome.manifest</code> und fügen Sie folgende Zeilen hinzu:</p>
+<pre class="eval">skin app-global standard/1.0 skin/global/
+override <a class=" external" rel="freelink">chrome://global/skin/xulscrollbars.css</a> <a class=" external" rel="freelink">chrome://app-global/skin/scrollbars.css</a>
+</pre>
+<p><code>xulscrollbars.css</code> wird für Windows XP benutzt, <code>nativescrollbars.css</code> auf OSX. Für OSX, fügen Sie noch folgendes an:</p>
+<pre class="eval">override <a class=" external" rel="freelink">chrome://global/skin/nativescrollbars.css</a> <a class=" external" rel="freelink">chrome://app-global/skin/scrollbars.css</a>
+</pre>
+<p>Ändern Sie nun ein paar Farbwerte in <code>app/chrome/skin/global/scrollbars.css</code> um zu testen, ob das CSS benutzt wird.</p>
+<p>Beispielfenster in XUL:</p>
+<pre class="eval">&lt;?xml version="1.0"?&gt;
+&lt;?xml-stylesheet href="<a class=" external" rel="freelink">chrome://global/skin/</a>" type="text/css"?&gt;
+&lt;window id="sampleWindow" width="320" height="240"
+   xmlns="<a class=" external" href="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" rel="freelink">http://www.mozilla.org/keymaster/gat...re.is.only.xul</a>"&gt;
+&lt;hbox flex="1"&gt;
+   &lt;browser type="content" src="<a class=" external" href="http://mozilla.org" rel="freelink">http://mozilla.org</a>" flex="1"/&gt;
+   &lt;scrollbar orient="vertical"/&gt;
+&lt;/hbox&gt;
+&lt;/window&gt;
+</pre>
+<p>{{ languages( { "en": "en/Code_snippets/Scrollbar" } ) }}</p>
diff --git a/files/de/codeschnipsel/tabbed_browser/index.html b/files/de/codeschnipsel/tabbed_browser/index.html
new file mode 100644
index 0000000000..f08d80a7d4
--- /dev/null
+++ b/files/de/codeschnipsel/tabbed_browser/index.html
@@ -0,0 +1,517 @@
+---
+title: Tabbed browser
+slug: Codeschnipsel/Tabbed_browser
+translation_of: Archive/Add-ons/Tabbed_browser
+---
+<p>Here you should find a set of useful code snippets to help you work with Firefox's tabbed browser. The comments normally mark where you should be inserting your own code.</p>
+<p>Each snippet normally includes some code to run at initialization, these are best run using a <a href="/en/Extension_Frequently_Asked_Questions#Why_doesn.27t_my_script_run_properly.3F" title="en/Extension_Frequently_Asked_Questions#Why_doesn.27t_my_script_run_properly.3F">load listener</a>. These snippets assume they are run in the context of a browser window. If you need to work with tabs from a non-browser window, you need to obtain a reference to one first, see <a href="/en/Working_with_windows_in_chrome_code" title="en/Working_with_windows_in_chrome_code">Working with windows in chrome code</a> for details.</p>
+<h3 id="Getting_access_to_the_browser" name="Getting_access_to_the_browser">Multiple meanings for the word 'browser'</h3>
+<p>The word 'browser' is used several ways. Of course the entire application Firefox is called "a browser". Within the Firefox browser are tabs and inside each tab is a browser, both in the common sense of a web page browser and the XUL sense of a {{ XULElem("browser") }} element. Furthermore another meaning of 'browser' in this document and in some Firefox source is "the <a href="/en-US/docs/XUL/tabbrowser" title="/en-US/docs/XUL/tabbrowser">tabbrowser</a> element" in a Firefox XUL window.</p>
+<h3 id="Getting_access_to_the_browser" name="Getting_access_to_the_browser">Getting access to the browser</h3>
+<h4 id="From_main_window">From main window</h4>
+<p>Code running in Firefox's global ChromeWindow, common for extensions that overlay into <code>browser.xul</code>, can access the {{ XULElem("tabbrowser") }} element using the global variable <code>gBrowser.</code></p>
+<pre class="eval">// gBrowser is only accessible from the scope of
+// the browser window (browser.xul)
+gBrowser.addTab(...);
+</pre>
+<p>If <code>gBrowser</code> isn't defined your code is either not running in the scope of the browser window or running too early. You can access <code>gBrowser</code> only after the browser window is fully loaded. If you need to do something with <code>gBrowser</code> right after the window is opened, <a href="/en/DOM/element.addEventListener" title="en/DOM/element.addEventListener">listen</a> for the <code>load</code> event and use <code>gBrowser</code> in the event listener.</p>
+<p>If your code does not have access to the main window because it is run in a sidebar or dialog, you first need to get access to the browser window you need before you can use <code>gBrowser</code>. You can find more information on getting access to the browser window in <a href="/en/Working_with_windows_in_chrome_code" title="en/Working_with_windows_in_chrome_code">Working with windows in chrome code</a>.</p>
+<h4 id="From_a_sidebar">From a sidebar</h4>
+<p>Basically, if your extension code is a sidebar you can use:</p>
+<pre class="brush: js">var mainWindow = window.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
+                       .getInterface(Components.interfaces.nsIWebNavigation)
+                       .QueryInterface(Components.interfaces.nsIDocShellTreeItem)
+                       .rootTreeItem
+                       .QueryInterface(Components.interfaces.nsIInterfaceRequestor)
+                       .getInterface(Components.interfaces.nsIDOMWindow);
+
+mainWindow.gBrowser.addTab(...);
+</pre>
+<h4 id="From_a_dialog">From a dialog</h4>
+<p>If your code is running in a dialog opened directly by a browser window, you can use:</p>
+<pre class="eval">window.opener.gBrowser.addTab(...);
+</pre>
+<p>If <code>window.opener</code> doesn't work, you can get the most recent browser window using this code:</p>
+<pre class="brush: js">var wm = Components.classes["@mozilla.org/appshell/window-mediator;1"]
+                   .getService(Components.interfaces.nsIWindowMediator);
+var mainWindow = wm.getMostRecentWindow("navigator:browser");
+mainWindow.gBrowser.addTab(...);
+</pre>
+<h3 id="Opening_a_URL_in_a_new_tab" name="Opening_a_URL_in_a_new_tab">Opening a URL in a new tab</h3>
+<pre class="brush: js">// Add tab
+gBrowser.addTab("http://www.google.com/");
+
+// Add tab, then make active
+gBrowser.selectedTab = gBrowser.addTab("http://www.google.com/");
+</pre>
+<h4 id="Manipulating_content_of_a_new_tab" name="Manipulating_content_of_a_new_tab">Manipulating content of a new tab</h4>
+<p>If you want to work on the content of the newly opened tab, you'll need to wait until the content has finished loading.</p>
+<pre class="brush: js">// WRONG WAY (the page hasn't finished loading yet)
+var newTabBrowser = gBrowser.getBrowserForTab(gBrowser.addTab("http://www.google.com/"));
+alert(newTabBrowser.contentDocument.body.innerHTML);
+
+// BETTER WAY
+var newTabBrowser = gBrowser.getBrowserForTab(gBrowser.addTab("http://www.google.com/"));
+newTabBrowser.addEventListener("load", function () {
+  newTabBrowser.contentDocument.body.innerHTML = "&lt;div&gt;hello world&lt;/div&gt;";
+}, true);
+</pre>
+<p>(The event target in the onLoad handler will be a 'tab' XUL element). See <a href="/en/XUL/tabbrowser#m-getBrowserForTab" title="en/XUL/tabbrowser#m-getBrowserForTab">tabbrowser</a> for getBrowserForTab(). N<span style="line-height: 1.5;">ote that the code above does not work inside of the Electrolysis (e10s)</span><span style="line-height: 1.5;"> enabled tabs.</span></p>
+<h4 id="Opening_a_URL_in_the_correct_window.2Ftab" name="Opening_a_URL_in_the_correct_window.2Ftab">Opening a URL in the correct window/tab</h4>
+<p>There are methods available in <code><a class="external" href="http://mxr.mozilla.org/mozilla-central/source/browser/base/content/utilityOverlay.js" rel="external nofollow" title="http://mxr.mozilla.org/mozilla-central/source/browser/base/content/utilityOverlay.js">chrome://browser/content/utilityOverlay.js</a></code> that make it easy to open URL in tabs such as <code>openUILinkIn</code> and <code>openUILink</code>.</p>
+<dl>
+ <dt>
+  <code>openUILinkIn( url, where, allowThirdPartyFixup, postData, referrerUrl ) </code></dt>
+ <dd>
+  where:
+  <ul>
+   <li>"current" current tab (if there aren't any browser windows, then in a new window instead)</li>
+   <li>"tab" new tab (if there aren't any browser windows, then in a new window instead)</li>
+   <li>"tabshifted" same as "tab" but in background if default is to select new tabs, and vice versa</li>
+   <li>"window" new window</li>
+   <li>"save" save to disk (with no filename hint!)</li>
+  </ul>
+ </dd>
+ <dt>
+  <code>openUILink( url, e, ignoreButton, ignoreAlt, allowKeywordFixup, postData, referrerUrl ) </code></dt>
+ <dd>
+   </dd>
+</dl>
+<p>The following code will open a URL in a new tab, an existing tab, or an existing window based on which mouse button was pressed and which hotkeys (ex: Ctrl) are being held. The code given is for a {{ XULElem("menuitem") }}, but will work equally well for other XUL elements. This will only work in an overlay of browser.xul.</p>
+<p>XUL:</p>
+<pre class="eval">&lt;menuitem oncommand="myExtension.foo(event)" onclick="checkForMiddleClick(this, event)" label="Click me"/&gt;
+</pre>
+<p>JS:</p>
+<pre class="brush: js">var myExtension = {
+  foo: function(event) {
+    openUILink("http://www.example.com", event, false, true);
+  }
+}</pre>
+<h4 id="Opening_a_URL_in_an_on_demand_tab">Opening a URL in an on demand tab</h4>
+<pre class="brush: js">var gSessionStore = Cc["@mozilla.org/browser/sessionstore;1"].getService(Ci.nsISessionStore);
+
+// Create new tab, but don't load the content.
+var url = "https://developer.mozilla.org";
+var tab = gBrowser.addTab(null);
+gSessionStore.setTabState(tab, JSON.stringify({
+  entries: [
+    { url: url, title: url }
+  ],
+  lastAccessed: 0,
+  index: 1,
+  hidden: false,
+  attributes: {},
+  image: null
+}));
+</pre>
+<h4 id="Reusing_tabs" name="Reusing_tabs">Reusing tabs</h4>
+<p>Rather than open a new browser or new tab each and every time one is needed, it is good practice to try to re-use an existing tab which already displays the desired URL--if one is already open. Following this practice minimizes the proliferation of tabs and browsers created by your extension.</p>
+<h5 id="Reusing_by_URL.2FURI" name="Reusing_by_URL.2FURI">Reusing by URL/URI</h5>
+<p>A common feature found in many extensions is to point the user to <code>chrome://</code> URIs in a browser window (for example, help or about information) or external (on-line <code>http(s)://</code>) HTML documents when the user clicks an extension's button or link. The following code demonstrates how to re-use an existing tab that already displays the desired URL/URI. If no such tab exists, a new one is opened with the specified URL/URI.</p>
+<pre class="brush: js">function openAndReuseOneTabPerURL(url) {
+  var wm = Components.classes["@mozilla.org/appshell/window-mediator;1"]
+                     .getService(Components.interfaces.nsIWindowMediator);
+  var browserEnumerator = wm.getEnumerator("navigator:browser");
+
+  // Check each browser instance for our URL
+  var found = false;
+  while (!found &amp;&amp; browserEnumerator.hasMoreElements()) {
+    var browserWin = browserEnumerator.getNext();
+    var tabbrowser = browserWin.gBrowser;
+
+    // Check each tab of this browser instance
+    var numTabs = tabbrowser.browsers.length;
+    for (var index = 0; index &lt; numTabs; index++) {
+      var currentBrowser = tabbrowser.getBrowserAtIndex(index);
+      if (url == currentBrowser.currentURI.spec) {
+
+        // The URL is already opened. Select this tab.
+        tabbrowser.selectedTab = tabbrowser.tabContainer.childNodes[index];
+
+        // Focus *this* browser-window
+        browserWin.focus();
+
+        found = true;
+        break;
+      }
+    }
+  }
+
+  // Our URL isn't open. Open it now.
+  if (!found) {
+    var recentWindow = wm.getMostRecentWindow("navigator:browser");
+    if (recentWindow) {
+      // Use an existing browser window
+      recentWindow.delayedOpenTab(url, null, null, null, null);
+    }
+    else {
+      // No browser windows are open, so open a new one.
+      window.open(url);
+    }
+  }
+}
+</pre>
+<h5 id="Reusing_by_other_criteria" name="Reusing_by_other_criteria">Reusing by other criteria</h5>
+<p>Sometimes you want to reuse a previously-opened tab regardless of which URL/URI it displays. This assumes the tab is opened by your extension, not by some other browser component. We can do re-use an arbitrary tab by attaching a custom attribute to it when we first open it. Later, when we want to re-use that tab, we iterate over all open tabs looking for one which has our custom attribute. If such a tab exists, we change its URL/URI and focus/select it. If no such tab exists (perhaps the user closed it or we never opened it in the first place), we create a new tab with our custom attribute.</p>
+<pre class="brush: js">function openAndReuseOneTabPerAttribute(attrName, url) {
+  var wm = Components.classes["@mozilla.org/appshell/window-mediator;1"]
+                     .getService(Components.interfaces.nsIWindowMediator);
+  for (var found = false, index = 0, tabbrowser = wm.getEnumerator('navigator:browser').getNext().gBrowser;
+       index &lt; tabbrowser.tabContainer.childNodes.length &amp;&amp; !found;
+       index++) {
+
+    // Get the next tab
+    var currentTab = tabbrowser.tabContainer.childNodes[index];
+
+    // Does this tab contain our custom attribute?
+    if (currentTab.hasAttribute(attrName)) {
+
+      // Yes--select and focus it.
+      tabbrowser.selectedTab = currentTab;
+
+      // Focus *this* browser window in case another one is currently focused
+      tabbrowser.ownerDocument.defaultView.focus();
+      found = true;
+    }
+  }
+
+  if (!found) {
+    // Our tab isn't open. Open it now.
+    var browserEnumerator = wm.getEnumerator("navigator:browser");
+    var tabbrowser = browserEnumerator.getNext().gBrowser;
+
+    // Create tab
+    var newTab = tabbrowser.addTab(url);
+    newTab.setAttribute(attrName, "xyz");
+
+    // Focus tab
+    tabbrowser.selectedTab = newTab;
+
+    // Focus *this* browser window in case another one is currently focused
+    tabbrowser.ownerDocument.defaultView.focus();
+  }
+}
+</pre>
+<p>The function can be called like so:</p>
+<pre class="eval"><span class="nowiki">openAndReuseOneTabPerAttribute("myextension-myattribute", "http://developer.mozilla.org/")</span>.
+</pre>
+<h3 id="Closing_a_tab" name="Closing_a_tab">Closing a tab</h3>
+<p>This example closes the currently selected tab.</p>
+<pre class="eval">gBrowser.removeCurrentTab();
+</pre>
+<p>There is also a more generic <code>removeTab</code> method, which accepts a XUL {{ XULElem("tab") }} element as its single parameter.</p>
+<h3 id="Changing_active_tab" name="Changing_active_tab">Changing active tab</h3>
+<p>This moves one tab forward (to the right).</p>
+<pre>gBrowser.tabContainer.advanceSelectedTab(1, true);
+</pre>
+<p>This moves one tab to the left.</p>
+<pre>gBrowser.tabContainer.advanceSelectedTab(-1, true);
+</pre>
+<h3 id="Detecting_page_load" name="Detecting_page_load">Detecting page load</h3>
+<p>See also <a href="/en/Code_snippets/On_page_load" title="en/Code_snippets/On_page_load">Code snippets:On page load</a></p>
+<pre class="brush: js">function examplePageLoad(event) {
+  if (event.originalTarget instanceof Components.interfaces.nsIDOMHTMLDocument) {
+    var win = event.originalTarget.defaultView;
+    if (win.frameElement) {
+      // Frame within a tab was loaded. win should be the top window of
+      // the frameset. If you don't want do anything when frames/iframes
+      // are loaded in this web page, uncomment the following line:
+      // return;
+      // Find the root document:
+      win = win.top;
+    }
+  }
+}
+
+// do not try to add a callback until the browser window has
+// been initialised. We add a callback to the tabbed browser
+// when the browser's window gets loaded.
+window.addEventListener("load", function () {
+  // Add a callback to be run every time a document loads.
+  // note that this includes frames/iframes within the document
+  gBrowser.addEventListener("load", examplePageLoad, true);
+}, false);
+
+...
+// When no longer needed
+gBrowser.removeEventListener("load", examplePageLoad, true);
+...
+</pre>
+<h3 id="Notification_when_a_tab_is_added_or_removed" name="Notification_when_a_tab_is_added_or_removed">Notification when a tab is added or removed</h3>
+<pre class="brush: js">function exampleTabAdded(event) {
+  var browser = gBrowser.getBrowserForTab(event.target);
+  // browser is the XUL element of the browser that's been added
+}
+
+function exampleTabMoved(event) {
+  var browser = gBrowser.getBrowserForTab(event.target);
+  // browser is the XUL element of the browser that's been moved
+}
+
+function exampleTabRemoved(event) {
+  var browser = gBrowser.getBrowserForTab(event.target);
+  // browser is the XUL element of the browser that's been removed
+}
+
+// During initialization
+var container = gBrowser.tabContainer;
+container.addEventListener("TabOpen", exampleTabAdded, false);
+container.addEventListener("TabMove", exampleTabMoved, false);
+container.addEventListener("TabClose", exampleTabRemoved, false);
+
+// When no longer needed
+container.removeEventListener("TabOpen", exampleTabAdded, false);
+container.removeEventListener("TabMove", exampleTabMoved, false);
+container.removeEventListener("TabClose", exampleTabRemoved, false);
+</pre>
+<div class="note">
+ <p><strong>Note:</strong> Starting in {{Gecko("1.9.1") }}, there's an easy way to <a href="/En/Listening_to_events_on_all_tabs" title="https://developer.mozilla.org/en/Listening_to_events_on_all_tabs">listen on progress events on all tabs</a>.</p>
+</div>
+<p>{{ h2_gecko_minversion("Notification when a tab's attributes change", "2.0") }}</p>
+<p>Starting in Gecko 2.0, you can detect when a tab's attributes change by listening for the <code>TabAttrModified</code> event. The attributes to which changes result in this event being sent are:</p>
+<ul>
+ <li>{{ xulattr("label") }}</li>
+ <li>{{ xulattr("crop") }}</li>
+ <li>{{ xulattr("busy") }}</li>
+ <li>{{ xulattr("image") }}</li>
+ <li>{{ xulattr("selected") }}</li>
+</ul>
+<pre class="brush: js">function exampleTabAttrModified(event) {
+  var tab = event.target;
+  // Now you can check what's changed on the tab
+}
+
+// During initialization
+var container = gBrowser.tabContainer;
+container.addEventListener("TabAttrModified", exampleTabAttrModified, false);
+
+// When no longer needed
+container.removeEventListener("TabAttrModified", exampleTabAttrModified, false);
+</pre>
+<p>{{ h2_gecko_minversion("Notification when a tab is pinned or unpinned", "2.0") }}</p>
+<p>Starting in Gecko 2.0, tabs can be "pinned"; that is, they become special application tabs ("app tabs"), which are pinned to the beginning of the tab bar, and show only the favicon. You can detect when a tab becomes pinned or unpinned by watching for the <code>TabPinned</code> and <code>TabUnpinned</code> events.</p>
+<pre class="brush: js">function exampleTabPinned(event) {
+  var browser = gBrowser.getBrowserForTab(event.target);
+  // browser is the XUL element of the browser that's been pinned
+}
+
+function exampleTabUnpinned(event) {
+  var browser = gBrowser.getBrowserForTab(event.target);
+  // browser is the XUL element of the browser that's been pinned
+}
+
+// Initialization
+
+var container = gBrowser.tabContainer;
+container.addEventListener("TabPinned", exampleTabPinned, false);
+container.addEventListener("TabUnpinned", exampleTabUnpinned, false);
+
+// When no longer needed
+
+container.removeEventListener("TabPinned", exampleTabPinned, false);
+container.removeEventListener("TabUnpinned", exampleTabUnpinned, false);
+</pre>
+<h3 id="Detecting_tab_selection" name="Detecting_tab_selection">Detecting tab selection</h3>
+<p>The following code allows you to detect when a new tab is selected in the browser:</p>
+<pre class="brush: js">function exampleTabSelected(event) {
+  var browser = gBrowser.selectedBrowser;
+  // browser is the XUL element of the browser that's just been selected
+}
+
+// During initialisation
+var container = gBrowser.tabContainer;
+container.addEventListener("TabSelect", exampleTabSelected, false);
+
+// When no longer needed
+container.removeEventListener("TabSelect", exampleTabSelected, false);
+</pre>
+<h3 id="Getting_document_of_currently_selected_tab" name="Getting_document_of_currently_selected_tab">Getting document of currently selected tab</h3>
+<p>The following code allows you to retrieve the document that is in the selected tab. This code will work in the scope of the browser window (e.g. you're working from an overlay to the browser window).</p>
+<pre class="eval">gBrowser.contentDocument;
+</pre>
+<p>or</p>
+<pre class="eval">content.document
+</pre>
+<p>If you're working from a window or dialog that was opened by the browser window, you can use this code to get the document displayed in the selected tab in the browser window that opened the new window or dialog.</p>
+<pre class="eval">window.opener.content.document
+</pre>
+<p>From windows or dialogs not opened by the browser window, you can use {{ interface("nsIWindowMediator") }} to get the document displayed in the selected tab of the most recently used browser window.</p>
+<pre class="brush: js">var wm = Components.classes["@mozilla.org/appshell/window-mediator;1"]
+                   .getService(Components.interfaces.nsIWindowMediator);
+var recentWindow = wm.getMostRecentWindow("navigator:browser");
+return recentWindow ? recentWindow.content.document.location : null;
+</pre>
+<p>See also <a href="/en/Working_with_windows_in_chrome_code#Content_windows" title="en/Working_with_windows_in_chrome_code#Content_windows">Working with windows in chrome code</a>.</p>
+<h3 id="Enumerating_tabs" name="Enumerating_tabs">Enumerating browsers</h3>
+<p>To go through all browser in a tabbrowser, first get a reference to a browser's window. If your code is executed from a Firefox <code>browser.xul</code> overlay (for example, it is a toolbar button or menu <em>click</em> handler), you can access the current window with the <code>window</code> pre-defined variable. However, if your code is executed from its own window (for example, a settings/options dialog), you can use {{ interface("nsIWindowMediator") }} to get a browser's window.</p>
+<p>Next, get the <code>&lt;tabbrowser/&gt;</code> element. You can get it with <code>win.gBrowser</code>, where <code>win</code> is the browser's window from the previous step. You can use simply <code>gBrowser</code> instead of <code>window.gBrowser</code> if running in the context of a <code>browser.xul</code> overlay.</p>
+<p>Finally, use <code>gBrowser.browsers.length</code> to get the number of browsers and <code>gBrowser.getBrowserAtIndex()</code> to get a <code>&lt;browser/&gt;</code> element. For example:</p>
+<pre class="brush: js">var num = gBrowser.browsers.length;
+for (var i = 0; i &lt; num; i++) {
+  var b = gBrowser.getBrowserAtIndex(i);
+  try {
+    dump(b.currentURI.spec); // dump URLs of all open tabs to console
+  } catch(e) {
+    Components.utils.reportError(e);
+  }
+}</pre>
+<p>To learn what methods are available for <code>&lt;browser/&gt;</code> and <code>&lt;tabbrowser/&gt;</code> elements, use <a href="/en/DOM_Inspector" title="en/DOM_Inspector">DOM Inspector</a> or look in {{ source("toolkit/content/widgets/browser.xml","browser.xml") }} for corresponding XBL bindings (or just look at the current reference pages on {{ XULElem("browser") }} and {{ XULElem("tabbrowser") }}.</p>
+<h3 id="Getting_the_browser_that_fires_the_http-on-modify-request_notification">Getting the browser that fires the http-on-modify-request notification</h3>
+<p>See the <a href="/en/Observer_Notifications#HTTP_requests" title="en/Observer_Notifications#HTTP_requests">Observer notifications</a> page for information on http-on-* notifications.</p>
+<p>Note that some HTTP requests aren't associated with a tab; for example, RSS feed updates, extension manager requests, XHR requests from XPCOM components, etc. In those cases, the following code returns null.</p>
+<div class="warning">
+ <strong>Warning:</strong> This code should be updated to use {{interface("nsILoadContext")}} instead of <code>getInterface(Components.interfaces.nsIDOMWindow)</code>, <a href="/en-US/docs/Updating_extensions_for_Firefox_3.5#Getting_a_load_context_from_a_request" title="/en-US/docs/Updating_extensions_for_Firefox_3.5#Getting_a_load_context_from_a_request">see this example</a>..<a href="#Getting_the_browser_that_fires_the_http-on-modify-request_notification_(example_code_updated_for_loadContext)">UPDATED EXAMPLE IS IN SECTION BELOW THIS</a></div>
+<pre class="brush: js">observe: function (subject, topic, data) {
+  if (topic == "http-on-modify-request") {
+    subject.QueryInterface(Components.interfaces.nsIHttpChannel);
+    var url = subject.URI.spec; /* url being requested. you might want this for something else */
+    var browser = this.getBrowserFromChannel(subject);
+    if (browser != null) {
+      /* do something */
+    }
+  }
+},
+
+getBrowserFromChannel: function (aChannel) {
+  try {
+    var notificationCallbacks =
+      aChannel.notificationCallbacks ? aChannel.notificationCallbacks : aChannel.loadGroup.notificationCallbacks;
+
+    if (!notificationCallbacks)
+      return null;
+
+    var domWin = notificationCallbacks.getInterface(Components.interfaces.nsIDOMWindow);
+    return gBrowser.getBrowserForDocument(domWin.top.document);
+  }
+  catch (e) {
+    dump(e + "\n");
+    return null;
+  }
+}
+</pre>
+<h3 id="Getting_the_browser_that_fires_the_http-on-modify-request_notification_(example_code_updated_for_loadContext)">Getting the browser that fires the http-on-modify-request notification (example code updated for loadContext)</h3>
+<p>Here an example of the previous section is shown. The previous section was left intact so people can see the old way of doing things.</p>
+<pre class="brush: js">Components.utils.import('resource://gre/modules/Services.jsm');
+Services.obs.addObserver(httpObs, 'http-on-modify-request', false);
+//Services.obs.removeObserver(httpObs, 'http-on-modify-request'); //uncomment this line, or run this line when you want to remove the observer
+
+var httpObs = {
+    observe: function (aSubject, aTopic, aData) {
+        if (aTopic == 'http-on-modify-request') {
+            /*start - do not edit here*/
+            var oHttp = aSubject.QueryInterface(Components.interfaces.nsIHttpChannel); //i used nsIHttpChannel but i guess you can use nsIChannel, im not sure why though
+            var interfaceRequestor = oHttp.notificationCallbacks.QueryInterface(Components.interfaces.nsIInterfaceRequestor);
+            //var DOMWindow = interfaceRequestor.getInterface(Components.interfaces.nsIDOMWindow); //not to be done anymore because: https://developer.mozilla.org/en-US/docs/Updating_extensions_for_Firefox_3.5#Getting_a_load_context_from_a_request //instead do the loadContext stuff below
+            var loadContext;
+            try {
+                loadContext = interfaceRequestor.getInterface(Components.interfaces.nsILoadContext);
+            } catch (ex) {
+                try {
+                    loadContext = aSubject.loadGroup.notificationCallbacks.getInterface(Components.interfaces.nsILoadContext);
+                    //in ff26 aSubject.loadGroup.notificationCallbacks was null for me, i couldnt find a situation where it wasnt null, but whenever this was null, and i knew a loadContext is supposed to be there, i found that "interfaceRequestor.getInterface(Components.interfaces.nsILoadContext);" worked fine, so im thinking in ff26 it doesnt use aSubject.loadGroup.notificationCallbacks anymore, but im not sure
+                } catch (ex2) {
+                    loadContext = null;
+                    //this is a problem i dont know why it would get here
+                }
+            }
+            /*end do not edit here*/
+            /*start - do all your edits below here*/
+            var url = oHttp.URI.spec; //can get url without needing loadContext
+            if (loadContext) {
+                var contentWindow = loadContext.associatedWindow; //this is the HTML window of the page that just loaded
+                //aDOMWindow this is the firefox window holding the tab
+                var aDOMWindow = contentWindow.top.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIWebNavigation).QueryInterface(Ci.nsIDocShellTreeItem).rootTreeItem.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIDOMWindow);
+                var gBrowser = aDOMWindow.gBrowser; //this is the gBrowser object of the firefox window this tab is in
+                var aTab = gBrowser._getTabForContentWindow(contentWindow.top); //this is the clickable tab xul element, the one found in the tab strip of the firefox window, aTab.linkedBrowser is same as browser var above //can stylize tab like aTab.style.backgroundColor = 'blue'; //can stylize the tab like aTab.style.fontColor = 'red';
+                var browser = aTab.linkedBrowser; //this is the browser within the tab //this is what the example in the previous section gives
+                //end getting other useful stuff
+            } else {
+                Components.utils.reportError('EXCEPTION: Load Context Not Found!!');
+                //this is likely no big deal as the channel proably has no associated window, ie: the channel was loading some resource. but if its an ajax call you may end up here
+            }
+        }
+    }
+};
+</pre>
+<p>Here's a cleaner example of the same thing:</p>
+<pre><code>Cu.import('resource://gre/modules/Services.jsm');
+
+var httpRequestObserver = {
+    observe: function (subject, topic, data) {
+        var httpChannel, requestURL;
+
+        if (topic == "http-on-modify-request") {
+            httpChannel = subject.QueryInterface(Ci.nsIHttpChannel);
+            requestURL = httpChannel.URI.spec;
+
+            var newRequestURL, i;
+
+            if (/someurl/.test(requestURL)) {
+                var goodies = loadContextGoodies(httpChannel);
+                if (goodies) {
+                    httpChannel.cancel(Cr.NS_BINDING_ABORTED);
+                    goodies.contentWindow.location = self.data.url('pages/test.html');
+                } else {
+                    //dont do anything as there is no contentWindow associated with the httpChannel, liekly a google ad is loading or some ajax call or something, so this is not an error
+                }
+            }
+
+            return;
+        }
+    }
+};
+Services.obs.addObserver(httpRequestObserver, "http-on-modify-request", false);
+
+
+
+
+
+//this function gets the contentWindow and other good stuff from loadContext of httpChannel
+function loadContextGoodies(httpChannel) {
+    //httpChannel must be the subject of http-on-modify-request QI'ed to nsiHTTPChannel as is done on line 8 "httpChannel = subject.QueryInterface(Ci.nsIHttpChannel);"
+    //start loadContext stuff
+    var loadContext;
+    try {
+        var interfaceRequestor = httpChannel.notificationCallbacks.QueryInterface(Ci.nsIInterfaceRequestor);
+        //var DOMWindow = interfaceRequestor.getInterface(Components.interfaces.nsIDOMWindow); //not to be done anymore because: https://developer.mozilla.org/en-US/docs/Updating_extensions_for_Firefox_3.5#Getting_a_load_context_from_a_request //instead do the loadContext stuff below
+        try {
+            loadContext = interfaceRequestor.getInterface(Ci.nsILoadContext);
+        } catch (ex) {
+            try {
+                loadContext = subject.loadGroup.notificationCallbacks.getInterface(Ci.nsILoadContext);
+            } catch (ex2) {}
+        }
+    } catch (ex0) {}
+
+    if (!loadContext) {
+        //no load context so dont do anything although you can run this, which is your old code
+        //this probably means that its loading an ajax call or like a google ad thing
+        return null;
+    } else {
+        var contentWindow = loadContext.associatedWindow;
+        if (!contentWindow) {
+            //this channel does not have a window, its probably loading a resource
+            //this probably means that its loading an ajax call or like a google ad thing
+            return null;
+        } else {
+            var aDOMWindow = contentWindow.top.QueryInterface(Ci.nsIInterfaceRequestor)
+                .getInterface(Ci.nsIWebNavigation)
+                .QueryInterface(Ci.nsIDocShellTreeItem)
+                .rootTreeItem
+                .QueryInterface(Ci.nsIInterfaceRequestor)
+                .getInterface(Ci.nsIDOMWindow);
+            var gBrowser = aDOMWindow.gBrowser;
+            var aTab = gBrowser._getTabForContentWindow(contentWindow.top); //this is the clickable tab xul element, the one found in the tab strip of the firefox window, aTab.linkedBrowser is same as browser var above //can stylize tab like aTab.style.backgroundColor = 'blue'; //can stylize the tab like aTab.style.fontColor = 'red';
+            var browser = aTab.linkedBrowser; //this is the browser within the tab //this is where the example in the previous section ends
+            return {
+                aDOMWindow: aDOMWindow,
+                gBrowser: gBrowser,
+                aTab: aTab,
+                browser: browser,
+                contentWindow: contentWindow
+            };
+        }
+    }
+    //end loadContext stuff
+}</code></pre>
+<p>{{ languages( { "fr": "fr/Extraits_de_code/Onglets_de_navigation", "ja": "ja/Code_snippets/Tabbed_browser", "pl": "pl/Fragmenty_kodu/Przegl\u0105danie_w_kartach" } ) }}</p>
diff --git a/files/de/codeschnipsel/tree/index.html b/files/de/codeschnipsel/tree/index.html
new file mode 100644
index 0000000000..95ae8ed107
--- /dev/null
+++ b/files/de/codeschnipsel/tree/index.html
@@ -0,0 +1,69 @@
+---
+title: Tree
+slug: Codeschnipsel/Tree
+translation_of: Archive/Add-ons/Code_snippets/Tree
+---
+<h3 id="AufklappenZuklappen_aller_Baumknoten">Aufklappen/Zuklappen aller Baumknoten</h3>
+<p>Um alle Baumknoten aufzuklappen:</p>
+<pre class="eval"> var treeView = tree.treeBoxObject.view;
+ for (var i = 0; i &lt; treeView.rowCount; i++) {
+   if (treeView.isContainer(i) &amp;&amp; !treeView.isContainerOpen(i))
+     treeView.toggleOpenState(i);
+ }
+</pre>
+<p>Um alle Baumknoten zu zuklappen, wird die Bedingung einfach umgekehrt:</p>
+<pre class="eval"> var treeView = tree.treeBoxObject.view;
+ for (var i = 0; i &lt; treeView.rowCount; i++) {
+   if (treeView.isContainer(i) &amp;&amp; treeView.isContainerOpen(i))
+     treeView.toggleOpenState(i);
+ }
+</pre>
+<h3 id="Text_der_ausgewählten_Zeile_abrufen">Text der ausgewählten Zeile abrufen</h3>
+<p>Ausgehend von gegebenem Baum:</p>
+<pre class="eval"> &lt;tree id="my-tree" seltype="single" onselect="onTreeSelected()"&gt;
+</pre>
+<p>Wird das folgende JavaScript verwendet:</p>
+<pre class="eval"> function onTreeSelected(){
+   var tree = document.getElementById("my-tree");
+   var cellIndex = 0;
+   var cellText = tree.view.getCellText(tree.currentIndex, tree.columns.getColumnAt(cellIndex));
+   alert(cellText);
+ }
+</pre>
+<h3 id="Das_Baum-Item_einer_fokussierten_Zeile_abrufen">Das Baum-Item einer fokussierten Zeile abrufen</h3>
+<p>Ausgehend von <code>&lt;tree id="my-tree"&gt;</code>, kann der folgende Codeausschnitt verwendet werden, um das <a href="/en/XUL/treeitem" title="en/XUL/treeitem">tree item</a> abzurufen:</p>
+<pre class="eval">var view = document.getElementById("my-tree").view;
+var sel = view.selection.currentIndex; //returns -1 if the tree is not focused
+var treeItem = view.getItemAtIndex(sel);
+</pre>
+<p>Zu beachten ist, dass der aktuelle Index unter Umständen nicht ausgewählt sein (z.B. in einem Baum mit mehrfach-Auswahl).</p>
+<h3 id="Einen_treecell_von_einem_Mausklick_abrufen">Einen treecell von einem Mausklick abrufen</h3>
+<p>Die erste Wahl ist <code>&lt;treecell onclick="yourfunc();"/&gt;</code> oder etwas ähnliches auszuprobieren. das funktioniert nicht. Es können keine Event-Handler zum <code>&lt;treecell&gt;</code> Element hinzugefügt werden. Stattdessen kann ein Event-Handler zum <code>&lt;tree&gt;</code> Element hinzugefügt werden. Dann können <code>event-</code> und andere Methoden benutzt werden, um das <code>&lt;treecell&gt;</code> Element zu finden. Zum Beispiel, ausgehend von:</p>
+<pre class="eval">&lt;tree id="my-tree" onclick="onTreeClicked(event)"&gt;
+</pre>
+<p>Wird das folgende JavaScript verwendet:</p>
+<pre>function onTreeClicked(event){
+  var tree = document.getElementById("my-tree");
+  var tbo = tree.treeBoxObject;
+
+  // get the row, col and child element at the point
+  var row = { }, col = { }, child = { };
+  tbo.getCellAt(event.clientX, event.clientY, row, col, child);
+
+  var cellText = tree.view.getCellText(row.value, col.value);
+  alert(cellText);
+}
+</pre>
+<h3 id="Ausgewählte_Indizes_eines_mehrfach_ausgewählten_Baumes_abrufen">Ausgewählte Indizes eines mehrfach ausgewählten Baumes abrufen</h3>
+<pre>  var start = {}, end = {}, numRanges = tree.view.selection.getRangeCount(), selectedIndices = [];
+
+  for (var t = 0; t &lt; numRanges; t++){
+    tree.view.selection.getRangeAt(t, start, end);
+    for (var v = start.value; v &lt;= end.value; v++)
+      selectedIndices.push(v);
+  }
+</pre>
+<h3 id="Weitere_Ressourcen">Weitere Ressourcen</h3>
+<ul> <li><a href="/de/XUL/tree" title="de/XUL/tree">XUL: Tree Dokumentation</a></li> <li><a href="/de/XUL_Tutorial/Tree_Auswahl" title="de/XUL_Tutorial/Tree_Auswahl">XUL Tutorial: Tree Auswahl</a></li>
+</ul>
+<p>{{ languages( { "fr": "fr/Extraits_de_code/Tree", "en": "en/Code_snippets/Tree" } ) }}</p>
diff --git a/files/de/codeschnipsel/windows/index.html b/files/de/codeschnipsel/windows/index.html
new file mode 100644
index 0000000000..6da2289604
--- /dev/null
+++ b/files/de/codeschnipsel/windows/index.html
@@ -0,0 +1,60 @@
+---
+title: Windows
+slug: Codeschnipsel/Windows
+tags:
+  - Add-ons
+  - Erweiterungen
+translation_of: Archive/Add-ons/Code_snippets/Windows
+---
+<p>Diese Seite zeigt einige interessante Codebeispiele.</p>
+<h3 id="Neue_Browser-Fenster_öffnen">Neue Browser-Fenster öffnen</h3>
+<p>Um ein neues Browser-Fenster zu öffnen, wird einfach <code>window.open()</code> benutzt. Jedoch gibt <code>window.open()</code> ein <code>Window</code> Objekt für den Inhalt zurück, nicht für das Browser-Fenster selbst, deshalb sollte man sich das Chrome <code>Window</code> zuerst holen. Der einfachste Weg das zu machen, ist <a href="/de/XPCOM_Interface_Referenz/nsIWindowMediator" title="de/XPCOM Interface Referenz/nsIWindowMediator"><code>nsIWindowMediator</code></a> zu benutzen.</p>
+<h3 id="Beispiel">Beispiel</h3>
+<pre class="brush: js">window.open();
+var wm = Components.classes["@mozilla.org/appshell/window-mediator;1"]
+                            .getService(Components.interfaces.nsIWindowMediator);
+var newWindow = wm.getMostRecentWindow("navigator:browser");
+var b = newWindow.getBrowser();
+// why did we do this? we never do anything with |b|
+</pre>
+<h3 id="Ziehbare_Fenster">Ziehbare Fenster</h3>
+<p>Um ein Fenster durch das Klicken auf die Fensterinhalte ziehbar zu machen, können die <code>mousedown</code> und <code>mousemove</code> Ereignisse verwendet werden. Der folgende Code berücksichtigt nicht, welches Element angeklickt wurde, sondern reagiert auf alle <code>mousedown</code> Ereignisse gleich. Dieser Code kann verbessert werden, indem das  Zielelements des Ereignisses überprüft wird und <code>startPos</code> nur festgelegt wird, wenn das Element den Kriterien entspricht.</p>
+<h4 id="Example_2" name="Example_2">Beispiel</h4>
+<pre class="brush: js">var startPos=0;
+var mouseDown = function(event) {
+  startPos = [ event.clientX, event.clientY];
+}
+var mouseMove = function(event) {
+  if (startPos != 0) {
+    var newX = event.screenX-startPos[0];
+    var newY = event.screenY-startPos[1];
+    window.moveTo(newX,newY);
+  }
+}
+var mouseUp = function(event) {
+  startPos=0;
+}
+
+window.addEventListener("mousedown",mouseDown, false);
+window.addEventListener("mouseup",mouseUp, false);
+window.addEventListener("mousemove",mouseMove, false);
+</pre>
+<h4 id="XUL_Titelleistenelement">XUL Titelleistenelement</h4>
+<p>XUL Anwendungen können Vorteile aus dem <a href="/deXUL/titlebar">Titlebar</a> Element ziehen, um ein ähnliche Ergebnisse ohne extra JavaScript Code zu erzielen.</p>
+<h3 id="Re-using_and_focusing_named_windows" name="Re-using_and_focusing_named_windows">Wiederbenutzung und Fokussierung von benannten Fenstern</h3>
+<p>Dieser Abschnitt ist inkorrekt und muss neu geschrieben werden. Siehe <a href="/de/XPCOM_Interface_Referenz/nsIWindowMediator">nsIWindowMediator</a> für eine korrekte Dokumentation.</p>
+<div style="border: 1px solid black; color: rgb(170, 170, 170);">
+<p>Während eine Festlegung des <code>name</code> Parameters bei <a href="/en/DOM/window.open" title="en/DOM/window.open">window.open</a> oder <a href="/en/DOM/window.openDialog" title="en/DOM/window.openDialog">window.openDialog</a> verhindert, dass mehrere Fenster geöffnet werden, wird jeder Aufruf das Fenster Wiederinitialisieren und daher geht alles, was der Benutzer in diesem Fenster gerade getan hat, verloren. Zusätzlich wird es nicht im Vordergrund angezeigt, wenn das Fenster im Hintergrund ist. Dieser Code prüft, ob ein Fenster mit dem gegebenen Namen existiert. Wird eines gefunden, wird es fokussiert. Wenn nicht, wird ein Neues geöffnet.</p>
+<pre class="eval">var windowName = "yourWindowName";
+var windowsMediator = Components.classes["@mozilla.org/appshell/window-mediator;1"].getService(Components.interfaces.nsIWindowMediator);
+var win = windowsMediator.getMostRecentWindow(windowName);
+if (win)
+  win.focus();
+else
+  window.open("<a class=" external" rel="freelink">chrome://to/your/window.xul</a>", windowName, "features");
+</pre>
+</div>
+<h3 id="Siehe_auch">Siehe auch</h3>
+<ul> <li><a href="/de/Mit_Fenstern_im_chrome_Code_arbeiten">Mit Fenstern im chrome Code arbeiten</a>.</li>
+</ul>
+<p>{{ languages( {"en": "en/Code_snippets/Windows", "fr": "fr/Extraits_de_code/Fen\u00eatres", "ja": "ja/Code_snippets/Windows", "pl": "pl/Fragmenty_kodu/Okna" } ) }}</p>
diff --git a/files/de/css3_columns/index.html b/files/de/css3_columns/index.html
new file mode 100644
index 0000000000..8ca450b7c2
--- /dev/null
+++ b/files/de/css3_columns/index.html
@@ -0,0 +1,63 @@
+---
+title: CSS3 Spalten
+slug: CSS3_Columns
+tags:
+  - CSS
+  - CSS3
+translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts
+---
+<p>Viele Benutzer haben Schwierigkeiten Texte zu lesen, wenn die Zeilen sehr lang sind. Es dauert dann zu lange für das Auge vom Ende der Zeile zum Anfang einer Neuen zu springen. Sie verrutschen unter Umständen in der Zeile und der Lesefluss wird unterbrochen. Um dennoch das Maximum an Bildfläche von großen Bildschirmen zu nutzen, sollten Autoren eine begrenzte Spaltenbreite verwenden, die den Text dann nebeneinander platziert (vergleichbar mit dem Spaltensatz in Zeitungen). Unglücklicherweise ist es mittels HTML und CSS 2.1 nicht möglich Spaltenumbrüche festzulegen, ohne dass diese an festen Positionen gebunden sind. Das erlaubte Markup im Text muss stark eingeschränkt werden oder die Spalten müssen durch die Verwendung von Scripts erstellt werden.</p>
+<p>Die <a class="external" href="http://www.w3.org/TR/css3-multicol/">CSS3 Multi-column Spezifikation</a> schlägt einige neue CSS Eigenschaften vor, die diese Funktionen mittels CSS ermöglichen. In Firefox 1.5 und später wurde ein Teil dieser Eigenschaften implementiert, um das Verhalten, so wie es in der Spezifikation beschrieben ist (mit einer Ausnahme; siehe unten), zu realisieren.</p>
+<p>In <a class="external" href="http://weblogs.mozillazine.org/roc/">Robert O'Callahans Blog</a> kann man den Einsatz von CSS Columns mit einem Firefox 1.5 oder später betrachten.</p>
+<h2 id="Verwendung_von_Spalten">Verwendung von Spalten</h2>
+<h3 id="Spaltenanzahl_und_-breite">Spaltenanzahl und -breite</h3>
+<p>Zwei CSS Eigenschaften steuern, ob und wie viele Spalten erscheinen werden: <a href="/de/CSS/-moz-column-count" title="de/CSS/-moz-column-count"><code>-moz-column-count</code></a> und <a href="/de/CSS/-moz-column-width" title="de/CSS/-moz-column-width"><code>-moz-column-width</code></a>.</p>
+<p><code>-moz-column-count</code> legt die Anzahl an Spalten auf eine bestimmte Zahl fest, z.B.:</p>
+<pre class="brush: html">&lt;div style="-moz-column-count:2"&gt;In Vorbereitung zum Release von Mozilla Firefox 1.5 Beta 1,
+wird der Tree heute Nacht um 11:59pm Pacific Daylight Time (UTC -0700) geschlossen.
+Nach diesem Zeitpunkt werden keine weiteren Checkins für Firefox 1.5 Beta 1 erlaubt,
+da dieser am Donnerstag released werden soll.&lt;/div&gt;</pre>
+<p>Dieser Codeschnipsel wird den Inhalt in zwei Spalten anzeigen (funktioniert nur unter Firefox 1.5 oder höher):</p>
+<div style="">
+ In Vorbereitung zum Release von Mozilla Firefox 1.5 Beta 1, wird der Tree heute Nacht um 11:59pm Pacific Daylight Time (UTC -0700) geschlossen. Nach diesem Zeitpunkt werden keine weiteren Checkins für Firefox 1.5 Beta 1 erlaubt, da dieser am Donnerstag released werden soll.</div>
+<p> </p>
+<p><code>-moz-column-width</code> legt die minimal erwünschte Spaltenbreite fest.<br>
+ Wenn <code>-moz-column-count</code> nicht ebenfalls festgelegt wurde, wird der Browser automatisch so viele Spalten erstellen, wie in die verfügbare Breite passen.</p>
+<pre class="brush: html">&lt;div style="-moz-column-width:20em;"&gt;In Vorbereitung zum Release von Mozilla Firefox 1.5 Beta 1,
+wird der Tree heute Nacht um 11:59pm Pacific Daylight Time (UTC -0700) geschlossen.
+Nach diesem Zeitpunkt werden keine weiteren Checkins für Firefox 1.5 Beta 1 erlaubt,
+da dieser am Donnerstag released werden soll.&lt;/div&gt;</pre>
+<p>Wird so angezeigt:</p>
+<div style="-moz-column-width: 20em;">
+ In Vorbereitung zum Release von Mozilla Firefox 1.5 Beta 1, wird der Tree heute Nacht um 11:59pm Pacific Daylight Time (UTC -0700) geschlossen. Nach diesem Zeitpunkt werden keine weiteren Checkins für Firefox 1.5 Beta 1 erlaubt, da dieser am Donnerstag released werden soll.</div>
+<p> </p>
+<p>Die genauen Details dazu sind in der <a class="external" href="http://www.w3.org/TR/css3-multicol/">CSS3 Spezifikation</a> beschrieben.</p>
+<p>In einem mehrspaltigen Block, wird der Inhalt (wenn nötig) automatisch von der einen in die nächste Spalte transportiert. Alle HTML, CSS und DOM Funktionen werden innerhalb von Spalten unterstützt, auch beim Bearbeiten und Drucken des Textes.</p>
+<h3 id="Höhenausgleich">Höhenausgleich</h3>
+<p>In der CSS3 Spezifikation ist festgelegt, dass sich die Spaltenhöhen ausgleichen müssen: Das bedeutet, dass der Browser die maximale Höhe automatisch festlegt, sodass die Höhe jeder Spalte ungefähr gleich sind. Firefox macht genau das.</p>
+<p>Es ist jedoch in einigen Situationen nützlich eine maximale Höhe der Spalten explizit festzulegen, den Inhalt in die erste Spalte zu legen und dann soviele Spalten wie nötig zu erstellen, die sich nach rechts austrecken. Daher wurde das Spaltenmodel erweitert. Wenn die <a href="/de/CSS/height" title="de/CSS/height"><code>height</code></a> Eigenschaft in einem mehrspaltigen Block festgelegt wurde, kann jede Spalte nur so hoch wie diese Höhenangabe werden und nicht größer, bevor dann eine neue Spalte hinzugefügt wird. Dieser Modus ist effizienter für das Layout.</p>
+<h3 id="Spaltenlücken">Spaltenlücken</h3>
+<p>Seit Firefox 3 gibt es standardmäßig eine Lücke von <code>1em</code> zwischen den einzelnen Spalten (vorher war jede Spalte direkt neben der nächsten Spalte).<br>
+ Es ist einfach das Standardverhalten zu ändern, in dem man die <a href="/de/CSS/-moz-column-gap" title="de/CSS/-moz-column-gap"><code>-moz-column-gap</code></a> Eigenschaft einsetzt:</p>
+<pre class="brush: html">&lt;div style="-moz-column-width:20em; -moz-column-gap:2em;"&gt;In Vorbereitung zum Release von Mozilla Firefox 1.5 Beta 1,
+wird der Tree heute Nacht um 11:59pm Pacific Daylight Time (UTC -0700) geschlossen.
+Nach diesem Zeitpunkt werden keine weiteren Checkins für Firefox 1.5 Beta 1 erlaubt,
+da dieser am Donnerstag released werden soll.&lt;/div&gt;</pre>
+<div style="-moz-column-width: 20em;">
+ In Vorbereitung zum Release von Mozilla Firefox 1.5 Beta 1, wird der Tree heute Nacht um 11:59pm Pacific Daylight Time (UTC -0700) geschlossen. Nach diesem Zeitpunkt werden keine weiteren Checkins für Firefox 1.5 Beta 1 erlaubt, da dieser am Donnerstag released werden soll.</div>
+<p> </p>
+<h3 id="Graceful_Degradation_(Abwärtskompatibilität_und_Fehlertoleranz)">Graceful Degradation (Abwärtskompatibilität und Fehlertoleranz)</h3>
+<p>Die <a href="/de/CSS/-moz-column" title="de/CSS/-moz-column"><code>-moz-column</code></a> Eigenschaft wird von Browsern, die Spalten nicht unterstützen, einfach ignoriert. Daher ist es relativ einfach ein Layout zu erstellen, dass den Inhalt in diesen Browsern in einer einzigen Spalte anzeigt, während in Firefox 1.5 und später mehrere Spalten angezeigt werden.</p>
+<h2 id="Fazit">Fazit</h2>
+<p>CSS3 Spalten bieten eine neue Möglichkeit für Webentwickler das Beste aus der Bildfläche herauszuholen. Fantasievolle Entwickler finden vielleicht weitere Verwendungsmöglichkeiten, bei denen die Funktion des automatischen Höhenausgleichs zum Einsatz kommen könnte.</p>
+<h2 id="Siehe_auch">Siehe auch</h2>
+<ul>
+ <li><a href="/de/CSS/-moz-column-width" title="de/CSS/-moz-column-width"><code>-moz-column-width</code></a>, <a href="/de/CSS/-moz-column-count" title="de/CSS/-moz-column-count"><code>-moz-column-count</code></a>, <a href="/de/CSS/-moz-column-gap" title="de/CSS/-moz-column-gap"><code>-moz-column-gap</code></a>, <a href="/de/CSS/-moz-column-rule" title="de/CSS/-moz-column-rule"><code>-moz-column-rule</code></a>, <a href="/de/CSS/-moz-column-rule-width" title="de/CSS/-moz-column-rule-width"><code>-moz-column-rule-width</code></a>, <a href="/de/CSS/-moz-column-rule-style" title="de/CSS/-moz-column-rule-style"><code>-moz-column-rule-style</code></a>, <a href="/de/CSS/-moz-column-rule-color" title="de/CSS/-moz-column-rule-color"><code>-moz-column-rule-color</code></a></li>
+ <li><a href="/de/CSS_Referenz" title="de/CSS_Referenz">CSS Referenz</a>, <a href="/de/CSS_Referenz/Mozilla_CSS_Erweiterungen" title="de/CSS_Referenz/Mozilla_CSS_Erweiterungen">Mozilla CSS Erweiterungen</a></li>
+</ul>
+<h2 id="Zusätzliche_Referenzen">Zusätzliche Referenzen</h2>
+<ul>
+ <li><a class="external" href="http://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html">Robert O'Callahan: »Gecko 1.8 For Web Developers: Columns«</a></li>
+</ul>
+<p>{{ HTML5ArticleTOC() }}</p>
+<p>{{ languages( { "en": "en/CSS/CSS3_Columns", "es": "es/Columnas_con_CSS-3", "fr": "fr/Colonnes_CSS3", "it": "it/Le_Colonne_nei_CSS3", "ja": "ja/CSS3_Columns", "ko": "ko/CSS3_Columns", "pl": "pl/Kolumny_CSS3" } ) }}</p>
diff --git a/files/de/dom/index.html b/files/de/dom/index.html
new file mode 100644
index 0000000000..cdaeb8ca8a
--- /dev/null
+++ b/files/de/dom/index.html
@@ -0,0 +1,65 @@
+---
+title: DOM
+slug: DOM
+tags:
+  - DOM
+translation_of: Web/API/Document_Object_Model
+---
+<div class="callout-box"><strong><a href="/de/docs/Verwendung_des_W3C_DOM_Level_1" title="Verwendung des W3C DOM Level 1">Verwendung des W3C DOM Level 1</a></strong><br>
+Einführung in das W3C DOM.</div>
+
+<p>Das <strong>Document Object Model</strong> (<strong>DOM</strong>) ist eine Programmierschnittstelle für <a href="/de/docs/HTML" title="HTML">HTML</a>- und <a href="/de/docs/XML" title="XML">XML</a>-Dokumente. Sie bildet die strukturelle Abbildung des Dokuments und ermöglicht Skripten die Veränderung des Inhalts und dessen Präsentation.</p>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 class="Documentation" id="Dokumentation">Dokumentation</h2>
+
+    <dl>
+     <dt><a href="/de/docs/Gecko-DOM-Referenz" title="Gecko-DOM-Referenz">Gecko DOM Referenz</a></dt>
+     <dd>Die Gecko <em>Document Object Model</em> Referenz.</dd>
+     <dt><a href="/de/docs/DOM/Ueber_das_Document_Object_Model" title="Über_das_Document_Object_Model">Über das Document Object Model</a></dt>
+     <dd>Eine kleine Einführung ins DOM.</dd>
+     <dt><a href="/de/docs/Das_DOM_und_JavaScript" title="Das_DOM_und_JavaScript">Das DOM und JavaScript</a></dt>
+     <dd>Was ist das DOM? Was ist JavaScript? Wie kann ich diese Techniken zusammen benutzen? Dieses Dokument beantwortet diese und weitere Fragen.</dd>
+     <dt><a href="/de/docs/DOM/Verwendung_von_dynamischen_Styles">Verwendung von dynamischen Styles</a></dt>
+     <dd>Wie man Style-Informationen mittels DOM erhalten und verändern kann.</dd>
+     <dt><a href="/de/docs/Das_XUL-Interface_dynamisch_verändern" title="Das_XUL-Interface_dynamisch_verändern">Das XUL-Interface dynamisch verändern</a></dt>
+     <dd>Die Grundlagen zum Manipulieren des XUL-UI mit DOM Methoden.</dd>
+     <dt><a href="/de/docs/Größe_von_Elementen_bestimmen" title="Größe_von_Elementen_bestimmen">Größe von Elementen bestimmen</a></dt>
+     <dd><small>Dieser Artikel beschreibt, wie man den richtigen Größen von Elementen finden kann.</small></dd>
+     <dt><a class="external" href="http://www.mozilla.org/docs/dom/">Das Document Object Model in Mozilla</a> (engl.)</dt>
+     <dd>Eine ältere Dokumentation über das DOM, auf mozilla.org.</dd>
+    </dl>
+
+    <p><span class="alllinks"><a href="/de/docs/tag/DOM" title="de/docs/tag/DOM">Alle zeigen...</a></span></p>
+   </td>
+   <td>
+    <h2 class="Community" id="Community">Community</h2>
+
+    <ul>
+     <li>Mozillas DOM Foren:{{ DiscussionList("dev-tech-dom", "mozilla.dev.tech.dom") }}</li>
+    </ul>
+
+    <h2 class="Tools" id="Tools" name="Tools">Tools</h2>
+
+    <ul>
+     <li><a class="external" href="http://www.getfirebug.com/">Firebug </a></li>
+     <li><a href="/de/docs/DOM_Inspector" title="DOM_Inspector">DOM Inspector</a></li>
+     <li><a class="external" href="http://slayeroffice.com/tools/modi/v2.0/modi_help.html">Mouse-over DOM Inspector</a></li>
+     <li><a class="external" href="http://www.karmatics.com/aardvark/">Aardvark Firefox extension</a></li>
+     <li><a href="/de/docs/tag/DOM:Tools" title="de/docs/tag/DOM:Tools">weitere...</a></li>
+    </ul>
+
+    <h2 class="Related_Topics" id="Verwandte_Themen" name="Verwandte_Themen">Verwandte Themen</h2>
+
+    <ul>
+     <li><a href="/de/docs/AJAX" title="AJAX">AJAX</a>, <a href="/de/docs/CSS" title="CSS">CSS</a>, <a href="/de/docs/DHTML" title="DHTML">DHTML</a>, <a href="/de/docs/JavaScript" title="JavaScript">JavaScript</a></li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/de/dom/ueber_das_document_object_model/index.html b/files/de/dom/ueber_das_document_object_model/index.html
new file mode 100644
index 0000000000..8f3a9b0bb8
--- /dev/null
+++ b/files/de/dom/ueber_das_document_object_model/index.html
@@ -0,0 +1,22 @@
+---
+title: Über das Document Object Model
+slug: DOM/Ueber_das_Document_Object_Model
+tags:
+  - DOM
+translation_of: Web/API/Document_Object_Model
+---
+<h3 id="What_is_the_DOM.3F" name="What_is_the_DOM.3F">Was ist das DOM?</h3>
+
+<p>Das <a href="/en/DOM">Document Object Model</a> ist eine API für <a href="/en/HTML">HTML-</a> und <a href="/en/XML">XML</a>-Dokumente. Es bildet die strukturelle Repräsentation des Dokumentes und ermöglicht dir, dessen Inhalt und visuelle Darstellung zu verändern. Im Wesentlichen verbindet es Webseiten mit Scripts oder Programmiersprachen.</p>
+
+<p>Alle Eigenschaften, Methoden und Events, die dem Webentwickler zum Manipulieren und Erstellen von Webseiten zur Verfügung stehen, sind organisiert in <a href="/en/Gecko_DOM_Reference">Objekten</a> (z. B. dem Document-Objekt, welches das Dokument selbst repräsentiert, dem Table-Objekt, welches HTML table-Elemente repräsentiert, usw.). Auf solche Objekte kann in modernen Webbrowsern mit Scriptsprachen zugegriffen werden.</p>
+
+<p>Das DOM wird meistens in Verbindung mit <a href="/en/JavaScript">JavaScript</a> verwendet. Das bedeutet, dass der Code in JavaScript geschrieben ist und das DOM benutzt, um auf die Webseite und dessen Elemente zuzugreifen. Nichtsdestotrotz wurde das DOM entwickelt, unabhängig von einer bestimmten Programmiersprache zu sein, was die strukturelle Repräsentation des Dokumentes von einer einzelnen, konsistenten API zugänglich macht. Auch wenn der Fokus dieser Seite durchgehend auf JavaScript liegt, sind Realisierungen in <a class="external" href="https://www.w3.org/DOM/Bindings">jeder Sprache</a> möglich.</p>
+
+<p>Das <a class="external" href="https://www.w3.org/">World Wide Web Consortium</a> hat einen <a class="external" href="https://www.w3.org/DOM/">Standard für das DOM</a> eingeführt, namens W3C DOM. Es ermöglicht – da es mittlerweile von den meisten Browsern korrekt umgesetzt wird – mächtige Cross-Browser-Anwendungen.</p>
+
+<h3 id="Why_is_the_DOM_support_in_Mozilla_important.3F" name="Why_is_the_DOM_support_in_Mozilla_important.3F">Warum ist die DOM-Unterstützung in Mozilla wichtig?</h3>
+
+<p>„Dynamic HTML“ (<a href="/en/DHTML">DHTML</a>) ist ein Begriff, der von manchen benutzt wird, um die Kombination aus HTML, Stylesheets und Scripts, die es ermöglichen, Dokumente zu animieren, zu beschreiben. Die W3C DOM Gruppe arbeitet hart daran, sicherzustellen, dass für die Zusammenarbeit geeignete und Sprach-unabhängige Lösungen vereinbart werden (siehe auch <a class="external" href="https://www.w3.org/DOM/faq.html">W3C FAQ</a>). Da Mozilla den Titel „Web Application Platform“ beansprucht, ist die Unterstützung des DOM eines der am häufigsten angefragten Features und zugleich ein notwendiges, wenn Mozilla eine tragfähige Alternative zu den anderen Browsern sein will.</p>
+
+<p>Noch wichtiger ist die Tatsache, dass das User Interface von Mozilla (sowie Firefox und Thunderbird) in XUL aufgebaut ist – einer XML-User Interface-Sprache. Somit benutzt Mozilla den DOM um <a href="/en/Dynamically_modifying_XUL-based_user_interface">das eigene UI zu manipulieren</a>.</p>
diff --git a/files/de/dom_inspector/index.html b/files/de/dom_inspector/index.html
new file mode 100644
index 0000000000..20c3654c81
--- /dev/null
+++ b/files/de/dom_inspector/index.html
@@ -0,0 +1,89 @@
+---
+title: DOM Inspector
+slug: DOM_Inspector
+translation_of: Tools/Add-ons/DOM_Inspector
+---
+<div>{{ToolsSidebar}}</div><p>Der <strong>DOM Inspector</strong> (auch bekannt als <strong>DOMi</strong>) ist ein Entwicklertool, das zum Besichtigen, Durchsuchen und Editieren des <a href="/en/DOM" title="en/DOM">Document Object Model</a> von Dokumenten benutzt wird  - normalerweise Websiten oder <a href="/en/XUL" title="en/XUL">XUL</a> Fenster. Die DOM Hierarchie kann mit Hilfe eines zweigeteilten Fensters navigiert werden, welches die Vielfalt von verschiedenen Ansichten auf das Dokument und alle darin enthaltenen Nodes erlaubt.</p>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 id="Documentation" name="Documentation"><a href="/Special:Tags?tag=DOM_Inspector&amp;language=en" title="Special:Tags?tag=DOM_Inspector&amp;language=en">Dokumentation</a></h2>
+
+    <dl>
+     <dt><a href="/en/DOM_Inspector/Introduction_to_DOM_Inspector" title="en/DOM_Inspector/Introduction_to_DOM_Inspector">Einführung in den DOM Inspector</a></dt>
+     <dd><small>Ein geführtes Tutorials, welches beim Einstieg in den DOM Inspector hilft.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a href="/en/DOM_Inspector/DOM_Inspector_FAQ" title="en/DOM_Inspector/DOM_Inspector_FAQ">DOM Inspector FAQ</a></dt>
+     <dd><small>Antworten zu den verbreitesten Fragen bezüglich des DOM Inspectors.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a class="external" href="http://kb.mozillazine.org/DOM_Inspector">DOM Inspector Seite auf MozillaZine</a></dt>
+     <dd><small>Mehr Informationen zum DOM Inspector.</small></dd>
+    </dl>
+
+    <h2 id="Getting_DOM_Inspector" name="Getting_DOM_Inspector">Erhalte DOM Inspector</h2>
+
+    <dl>
+     <dt>Firefox &amp; Thunderbird</dt>
+     <dd><small>Der <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622" title="https://addons.mozilla.org/en-US/firefox/addon/6622">DOM Inspector</a> muss von der AMO Website gedownloadet  und installiert werden. (Thunderbird Benutzer, welche die AMO Website in Firefox öffnen sollten den Installationslink speichern, oder die <a class="link-https" href="https://addons.mozilla.org/en-US/thunderbird/addon/6622" title="https://addons.mozilla.org/en-US/thunderbird/addon/6622">DOM Inspector für Thunderbird</a> Seite besuchen.)</small></dd>
+    </dl>
+
+    <dl>
+     <dt>Thunderbird 2</dt>
+     <dd><small><a class="link-https" href="https://addons.mozilla.org/en-US/thunderbird/addon/1806">DOM Inspector für Thunderbird 2</a> ist auf <a class="link-https" href="https://addons.mozilla.org/en-US/thunderbird/">Thunderbird Add-ons</a> verfügbar. Oder, konstruiere deinen Thunderbird selbst mit den folgenden Optionen:</small></dd>
+    </dl>
+
+    <pre>
+ac_add_options --enable-extensions="default inspector"
+ac_add_options --enable-inspector-apis
+</pre>
+
+    <dl>
+     <dt>Mozilla Suite and SeaMonkey</dt>
+     <dd><small>Wähle Extras &gt; Web-Entwickler &gt; DOM Inspector. Du kannst die Sidebar mit Bearbeiten &gt; Bevorzugung &gt; Erweitert &gt; DOM Inspector installieren, danach einfach das Inspector Panel öffnen und eine Website besuchen.</small></dd>
+    </dl>
+   </td>
+   <td>
+    <h2 id="Community" name="Community">Gemeinschaft</h2>
+
+    <ul>
+     <li>View Mozilla forums...</li>
+     <li>{{ DiscussionList("dev-apps-dom-inspector", "mozilla.dev.apps.dom-inspector") }}</li>
+    </ul>
+
+    <h2 id="Report_a_bug_in_DOM_Inspector" name="Report_a_bug_in_DOM_Inspector">Melde einen Fehler im DOM Inspector</h2>
+
+    <p>Benutze die passend benannte "DOM Inspector" Komponente in <a class="link-https" href="https://bugzilla.mozilla.org/">Bugzilla</a>.</p>
+
+    <p>Um herauszufinden, wer den <a href="https://hg.mozilla.org/dom-inspector" title="https://hg.mozilla.org/dom-inspector">DOM Inspector Code</a> kennt und wo es lebt, siehe die <a class="link-https" href="https://wiki.mozilla.org/Modules/All#DOM_Inspector" title="https://wiki.mozilla.org/Modules/All#DOM_Inspector"><span class="external">DOM Inspector Module Auflistung</span></a>.</p>
+
+    <h2 id="See_Also" name="See_Also">Siehe auch</h2>
+
+    <p><a class="external" href="http://www.getfirebug.com/">Firebug</a> ist ein funktionalere und einfachere Erweiterung von den Ersteller des DOM Inspectors.</p>
+
+    <h2 id="Related_Topics" name="Related_Topics">verbundene Themen</h2>
+
+    <dl>
+     <dd><a href="/en/DOM" title="en/DOM">DOM</a>, <a href="/en/HTML" title="en/HTML">HTML</a>, <a href="/en/XUL" title="en/XUL">XUL</a>, <a href="/en/Web_Development" title="en/Web_Development">Web Entwicklung</a></dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2>
+
+<ul>
+ <li>Autor(en): Joe Hewitt, Christopher Aillon</li>
+ <li>Letzte Aktualisierung: 11. November 2003</li>
+ <li>Copyright Information: Teile dieses Inhalts sind © 1998–2007 bei individuellen mozilla.org Beitragenden; Inhalt verfügbar unter einer Creative Commons Lizenz| <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Details</a>.</li>
+</ul>
+</div>
+
+<p>{{ languages( { "es": "es/DOM_Inspector", "it": "it/DOM_Inspector", "fr": "fr/Inspecteur_DOM", "ja": "ja/DOM_Inspector", "ko": "ko/DOM_Inspector", "pl": "pl/Inspektor_DOM" } ) }}</p>
diff --git a/files/de/dragdrop/index.html b/files/de/dragdrop/index.html
new file mode 100644
index 0000000000..50bf61f9e2
--- /dev/null
+++ b/files/de/dragdrop/index.html
@@ -0,0 +1,10 @@
+---
+title: DragDrop
+slug: DragDrop
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/API/HTML_Drag_and_Drop_API
+---
+<p> </p>
+<p>See <a href="https://developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop">https://developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop</a></p>
diff --git a/files/de/e4x/index.html b/files/de/e4x/index.html
new file mode 100644
index 0000000000..ad71bd2778
--- /dev/null
+++ b/files/de/e4x/index.html
@@ -0,0 +1,57 @@
+---
+title: E4X
+slug: E4X
+tags:
+  - E4X
+  - JXON
+  - JavaScript
+  - NeedsEditorialReview
+  - NeedsTechnicalReview
+  - NeedsTranslation
+  - TopicStub
+  - XML
+translation_of: Archive/Web/E4X
+---
+<div>
+  {{obsolete_header()}}</div>
+<div>
+   </div>
+<div>
+  {{ Warning("E4X is obsolete. It has been disabled by default for webpages (content) in Firefox 17, disabled by default for chrome in Firefox 20, and has been removed in Firefox 21. Use DOMParser/DOMSerializer or a non-native JXON algorithm instead.") }}</div>
+<p><strong>ECMAScript for XML</strong> (<strong>E4X</strong>) is a programming language extension that adds native XML support to <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a>. It does this by providing access to the XML document in a form that feels natural for ECMAScript programmers. The goal is to provide an alternative, simpler syntax for accessing XML documents than via <a href="/en/DOM" title="en/DOM">DOM</a> interfaces. A valid alternative to E4X is a non-native <a href="/en/JXON" title="en/JXON">JXON algorithm</a>.</p>
+<p>E4X is standardized by Ecma International in <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-357.htm">ECMA-357 standard</a> (currently in its second edition, December 2005).</p>
+<p>E4X is implemented (at least partially) in <a href="/en/SpiderMonkey" title="en/SpiderMonkey">SpiderMonkey</a> (<a href="/en/Gecko" title="en/Gecko">Gecko</a>'s JavaScript engine) and in <a href="/en/Rhino" title="en/Rhino">Rhino</a> (JavaScript engine written in Java).</p>
+<p> </p>
+<div class="note">
+  <strong>Note:</strong> In Gecko 1.8 based browsers such as Firefox 1.5, E4X is already partially enabled for web page authors. To fully enable E4X, the <code>&lt;script&gt;</code> element needs to have the MIME type "text/javascript;e4x=1" (i.e. have an attribute of the form <code>type="text/javascript;e4x=1"</code>). The difference between the two modes is that without the "e4x=1" MIME type, any statement-level XML/HTML comment literals (<code><span class="nowiki">&lt;!--...--&gt;</span></code>) are ignored for backwards compatibility with the comment hiding trick, and CDATA sections (<code>&lt;![CDATA{{ mediawiki.external('...') }}]&gt;</code>) are not parsed as CDATA literals (which leads to a JS syntax error in HTML since HTML's <code>&lt;script&gt;</code> element produces an implicit CDATA section, and therefore cannot contain explicit CDATA sections).
+  <p><span class="comment">someone verify the above</span></p>
+</div>
+<h3 id="Known_bugs_and_limitations" name="Known_bugs_and_limitations">Known bugs and limitations</h3>
+<ul>
+  <li>It is not currently possible to access a DOM object through E4X ({{ Bug(270553) }})</li>
+  <li>E4X doesn't support parsing XML declaration (</li>
+  <li>&lt;?xml version=...?&gt;) (see {{ Bug(336551) }}). You may get SyntaxError "xml is a reserved identifier" (despite the XML being in a string).</li>
+</ul>
+<p>Workaround:</p>
+<pre class="brush: js">var response = xmlhttprequest.responseText; // bug 270553
+response = response.replace(/^&lt;\?xml\s+version\s*=\s*(["'])[^\1]+\1[^?]*\?&gt;/, ""); // bug 336551
+var e4x = new XML(response);
+</pre>
+<h3 id="Resources" name="Resources">Resources</h3>
+<ul>
+  <li><a href="/en/E4X_Tutorial" title="en/E4X_Tutorial">E4X Tutorial</a> <a class="internal" href="/En/E4X/Processing_XML_with_E4X" title="En/E4X/Processing XML with E4X">Processing XML with E4X</a> on MDC.</li>
+  <li><a href="/en/E4X_for_templating" title="En/E4X for templating">E4X for templating</a></li>
+  <li>See the list of<a href="/Special:Tags?tag=E4X&amp;language=en" title="Special:Tags?tag=E4X&amp;language=en"> E4X-related pages</a> on MDC:</li>
+  <li><a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-357.htm">ECMA-357 standard</a></li>
+  <li><a class="external" href="/presentations/xtech2005/e4x" title="presentations/xtech2005/e4x">Brendan's presentation</a></li>
+  <li><a class="external" href="http://web.archive.org/web/20080703182907/http://www.faqts.com/knowledge_base/index.phtml/fid/1762" title="http://web.archive.org/web/20080703182907/http://www.faqts.com/knowledge_base/index.phtml/fid/1762">E4X at faqts.com</a></li>
+  <li><a class="external" href="http://rephrase.net/days/07/06/e4x">E4X quick reference at rephrase.net</a></li>
+</ul>
+<h2 id="See_also">See also</h2>
+<ul>
+  <li><a class="internal" href="/en/JXON" title="en/JXON">JXON</a></li>
+  <li><a class="internal" href="/en/XPath" title="en/XPath">XPath</a></li>
+  <li><a class="internal" href="/en/XML" title="en/XML">XML</a></li>
+  <li><a class="internal" href="/en/Parsing_and_serializing_XML" title="en/Parsing_and_serializing_XML">Parsing and serializing XML</a></li>
+</ul>
+<p>{{ languages( { "es": "es/E4X", "fr": "fr/E4X", "it": "it/E4X", "ja": "ja/E4X", "ko": "ko/E4X", "pl": "pl/E4X" } ) }}</p>
diff --git a/files/de/e4x/processing_xml_with_e4x/index.html b/files/de/e4x/processing_xml_with_e4x/index.html
new file mode 100644
index 0000000000..d9fb98a785
--- /dev/null
+++ b/files/de/e4x/processing_xml_with_e4x/index.html
@@ -0,0 +1,256 @@
+---
+title: XML verarbeiten mit E4X
+slug: E4X/Processing_XML_with_E4X
+translation_of: Archive/Web/E4X/Processing_XML_with_E4X
+---
+<p>{{ Warning("E4X ist veraltet. Es wurde in Firefox 17 standardmäßig abgeschaltet und aus Firefox 21 schließlich vollständig entfernt.  Benutzen Sie statt dessen DOMParser/DOMSerializer oder ein anderes JXON Verfahren.") }}</p>
+<p><strong><a href="/en/E4X" title="en/E4X">E4X</a></strong> erweitert JavaScript ab Version 1.6 um ein natives XML Objekt und eine Syntax, mit der XML Dokumente direkt in JavaScript Code eingebettet werden können.</p>
+<p>Eine vollständige Definition von E4X findet sich in der <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-357.htm">ECMA-357 Spezifikation</a>. Dieses Kapitel liefert einen praxisbezogenen Überblick und ist nicht als Referenz gedacht.</p>
+<h2 id="Kompatibilitätsaspekte">Kompatibilitätsaspekte</h2>
+<p>Als das  <code>&lt;script&gt;</code> Element noch nicht von allen Browsern unterstützt wurde, war es üblich, auf einer HTML Seite eingebettetes JavaScript in HTML Kommentare einzuschließen, um so die Anzeige des JavaScript Code durch ungeeignete Browser zu verhindern.  Diese Vorgehensweise ist inzwischen unnötig, aber es existieren noch viele solche HTML-Seiten.  Deshalb ignoriert E4X standardmäßig Kommentare und CDATA Abschnitte.  Sie können jedoch <code>e4x=1</code> im <code>&lt;script&gt;</code> Element verwenden, wenn Sie diese Einschränkung aufheben wollen:</p>
+<pre class="brush: html">&lt;script type="text/javascript;e4x=1"&gt;
+...
+&lt;/script&gt;
+</pre>
+<h2 id="Ein_XML_Objekt_erzeugen">Ein XML Objekt erzeugen</h2>
+<p>E4X bietet im Wesentlichen zwei Wege zum Erzeugen eines XML Objekts an.  Beim ersten wird dem XML Konstructor ein String übergeben:</p>
+<pre class="brush: js">var languages = new XML('&lt;languages type="dynamic"&gt;
+    &lt;lang&gt;JavaScript&lt;/lang&gt;
+    &lt;lang&gt;Python&lt;/lang&gt;
+  &lt;/languages&gt;');
+</pre>
+<p>Beim zweiten Weg wird der XML Code als Literal direkt im Skript eingetragen:</p>
+<pre class="brush: js">var languages = &lt;languages type="dynamic"&gt;
+    &lt;lang&gt;JavaScript&lt;/lang&gt;
+    &lt;lang&gt;Python&lt;/lang&gt;
+  &lt;/languages&gt;;
+</pre>
+<p>In beiden Fällen erhält man ein E4X <code>XML</code> Objekt mit Methoden für den bequemen Zugriff auf seine gekapselten Daten.</p>
+<p>While the XML object looks and behaves in a similar way to a regular JavaScript object, the two are not the same thing. E4X introduces new syntax that only works with E4X XML objects. The syntax is designed to be familiar to JavaScript programmers, but E4X does not provide a direct mapping from XML to native JavaScript objects; just the illusion of one.</p>
+<p>It is possible to interpolate variables into an XML literal to create an element name (or to create content).</p>
+<pre class="brush: js">var h = 'html';
+var text = "Here's some text";
+var doc = &lt;{h}&gt;&lt;body&gt;{text}&lt;/body&gt;&lt;/{h}&gt;;
+alert(doc.toXMLString());
+// Gives
+&lt;html&gt;
+  &lt;body&gt;Here's some text&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<h2 id="Working_with_attributes">Working with attributes</h2>
+<p>XML literal syntax has a significant advantage over the <code>XML</code> constructor when you need to create markup dynamically. With E4X it is easy to embed dynamic values in markup. Variables and expressions can be used to create attribute values by simply wrapping them with braces ({}) and omitting quotation marks that would normally go around an attribute value, as the following example illustrates:</p>
+<pre class="brush: js"> var a = 2;
+ var b = &lt;foo bar={a}&gt;"hi"&lt;/foo&gt;;
+</pre>
+<p>Upon execution the variable is evaluated and quotes are automatically added where appropriate. The preceding example would result in an XML object which looks like this: <code>&lt;foo bar="2"&gt;"hi"&lt;/foo&gt;</code>.</p>
+<p>In attribute substitution, quotation marks are escaped as &amp;quot; while apostrophes are handled normally.</p>
+<pre class="brush: js">var b = 'He said "Don\'t go there."';
+var el = &lt;foo a={b}/&gt;;
+alert(el.toXMLString());
+// Gives: &lt;foo a="He said &amp;quot;Don't go there.&amp;quot;"/&gt;
+</pre>
+<p>Less than and ampersand signs are escaped into their entity equivalents. Since a greater than sign is not escaped, it is possible to get an XML error if the <a href="/en/DOM/CDATASection" title="en/DOM/CDATASection">CDATA</a> closing sequence (]]&gt;) is included.</p>
+<p>It is not possible to directly interpolate variables amidst other literal (or variable) attribute content, however (e.g., <code>bar="a{var1}{var2}"</code>). One must instead either calculate the variable with a JavaScript expression (e.g., <code>bar={'a'+var1+var2}</code>), define a new variable before the element literal which includes the full interpolation and then include that variable or retrieve the attribute after the literal to alter it (see below).</p>
+<p>While one can interpolate attribute names as well as attribute values:</p>
+<pre class="brush: js">var a = 'att';
+var b = &lt;b {a}='value'/&gt;;
+alert(b);
+// Gives:
+&lt;b att="value"/&gt;
+</pre>
+<p>...one cannot interpolate a whole expression at once (e.g., &lt;b {a}&gt;.)</p>
+<p>After executing the above example, the variable languages references an XML object corresponding to the <code>&lt;languages&gt;</code> node in the XML document. This node has one attribute, type, which can be accessed and updated in a number of ways:</p>
+<pre class="brush: js"> alert(languages.@type); // Alerts "dynamic"
+ languages.@type = "agile";
+ alert(languages.@type); // Alerts "agile"
+</pre>
+<pre class="brush: js"> alert(languages.toString());
+ /* Alerts:
+   &lt;languages type="agile"&gt;&lt;lang&gt;JavaScript&lt;/lang&gt;&lt;lang&gt;Python&lt;/lang&gt;&lt;/languages&gt;
+ */
+</pre>
+<p>Note that if one wishes to make comparisons of retrieved attributes with other strings, it is necessary to convert the attribute first, even though the attribute may be converted to a string when used in other contexts (such as insertion into a textbox).</p>
+<pre class="brush: js">if (languages.@type.toString() === 'agile') {
+...
+}</pre>
+<p>or, simply:</p>
+<pre class="brush: js">if (languages.@type == 'agile') {
+...
+}
+</pre>
+<h2 id="Working_with_XML_objects">Working with XML objects</h2>
+<p>XML objects provide a number of methods for inspecting and updating their contents. They support JavaScript's regular dot and <code>[]</code> notation, but instead of accessing object properties E4X overloads these operators to access the element's children:</p>
+<pre class="brush: js">var person = &lt;person&gt;
+  &lt;name&gt;Bob Smith&lt;/name&gt;
+  &lt;likes&gt;
+    &lt;os&gt;Linux&lt;/os&gt;
+    &lt;browser&gt;Firefox&lt;/browser&gt;
+    &lt;language&gt;JavaScript&lt;/language&gt;
+    &lt;language&gt;Python&lt;/language&gt;
+  &lt;/likes&gt;
+&lt;/person&gt;;
+
+alert(person.name); // Bob Smith
+alert(person['name']); // Bob Smith
+alert(person.likes.browser); // Firefox
+alert(person['likes'].browser); // Firefox
+</pre>
+<p>If you access something with more than one matching element, you get back an <code>XMLList</code>:</p>
+<pre class="brush: js">alert(person.likes.language.length()); // 2
+</pre>
+<p>As with the DOM, <code>*</code> can be used to access all child nodes:</p>
+<pre class="brush: js">alert(person.likes.*.length()); // 4
+</pre>
+<p>While the <code>.</code> operator accesses direct children of the given node, the <code>..</code> operator accesses all children no matter how deeply nested:</p>
+<pre class="brush: js">alert(person..*.length()); // 11
+</pre>
+<p>The <code>length()</code> method here returns 11 because both elements and text nodes are included in the resulting <code>XMLList</code>.</p>
+<p>Objects representing XML elements provide a number of useful methods, some of which are illustrated below: <span class="comment">TODO: Add all of the methods to the JavaScript reference, link from here</span></p>
+<pre class="brush: js">alert(person.name.text()) // Bob Smith
+
+var xml = person.name.toXMLString(); // A string containing XML
+
+var personCopy = person.copy(); // A deep copy of the XML object
+
+var child = person.child(1); // The second child node; in this case the &lt;likes&gt; element
+</pre>
+<h2 id="Working_with_XMLLists">Working with XMLLists</h2>
+<p>In addition to the XML object, E4X introduces an <code>XMLList</code> object. <code>XMLList</code> is used to represent an ordered collection of XML objects; for example, a list of elements. Continuing the above example, we can access an <code>XMLList</code> of the <code>&lt;lang&gt;</code> elements in the page as follows:</p>
+<pre class="brush: js"> var langs = languages.lang;
+</pre>
+<p><code>XMLList</code> provides a <code>length()</code> method which can be used to find the number of contained elements:</p>
+<pre class="brush: js"> alert(languages.lang.length());
+</pre>
+<p>Note that unlike JavaScript arrays length is a method, not a property, and must be called using <code>length()</code>.</p>
+<p>We can iterate through the matching elements like so:</p>
+<pre class="brush: js"> for (var i = 0; i &lt; languages.lang.length(); i++) {
+     alert(languages.lang[i].toString());
+ }
+</pre>
+<p>Here we are using identical syntax to that used to access numbered items in an array. Despite these similarities to regular arrays, <code>XMLList</code> does not support <code>Array</code> methods such as <code>forEach</code>, and Array generics such as <code>Array.forEach()</code> are not compatible with <code>XMLList</code> objects.</p>
+<p>We can also use the <a href="/en/JavaScript/Reference/Statements/for_each...in" title="en/JavaScript/Reference/Statements/for each...in"><code>for each...in</code> statement</a> introduced in JavaScript 1.6 as part of JavaScript's E4X support:</p>
+<pre class="brush: js"> for each (var lang in languages.lang) {
+     alert(lang);
+ }
+</pre>
+<p><code>for each...in</code> can also be used with regular JavaScript objects to iterate over the values (as opposed to the keys) contained in the object. As with <code><a href="/en/JavaScript/Reference/Statements/for...in" title="en/JavaScript/Reference/Statements/for...in">for...in</a></code>, using it with arrays is <a href="/en/JavaScript/Reference/Statements/for...in#Description" title="en/JavaScript/Reference/Statements/for...in#Description">strongly discouraged</a>.</p>
+<p>It is possible to create an <code>XMLList</code> using XML literal syntax without needing to create a well-formed XML document, using the following syntax:</p>
+<pre class="brush: js"> var xmllist = &lt;&gt;
+   &lt;lang&gt;JavaScript&lt;/lang&gt;
+   &lt;lang&gt;Python&lt;/lang&gt;
+ &lt;/&gt;;
+</pre>
+<p>The <code>+=</code> operator can be used to append new elements to an <code>XMLList</code> within a document:</p>
+<pre class="brush: js"> languages.lang += &lt;lang&gt;Ruby&lt;/lang&gt;;
+</pre>
+<p>Note that unlike node lists returned by regular DOM methods, <code>XMLList</code>s are static and are not automatically updated to reflect changes in the DOM. If you create an <code>XMLList</code> as a subset of an existing <code>XML</code> object and then modify the original <code>XML</code> object, the <code>XMLList</code> will not reflect those changes; you will need to re-create it to get the most recent updates:</p>
+<pre class="brush: js"> var languages = &lt;languages&gt;
+   &lt;lang&gt;JavaScript&lt;/lang&gt;
+   &lt;lang&gt;Python&lt;/lang&gt;
+ &lt;/languages&gt;;
+
+ var lang = languages.lang;
+ alert(lang.length()); // Alerts 2
+
+ languages.lang += &lt;lang&gt;Ruby&lt;/lang&gt;;
+ alert(lang.length()); // Still alerts 2
+
+ lang = languages.lang; // Re-create the XMLList
+ alert(lang.length()); // Alerts 3
+</pre>
+<h2 id="Searching_and_filtering">Searching and filtering</h2>
+<p>E4X provides special operators for selecting nodes within a document that match specific criteria. These filter operations are specified using an expression contained in parentheses:</p>
+<pre class="brush: js">var html = &lt;html&gt;
+  &lt;p id="p1"&gt;First paragraph&lt;/p&gt;
+  &lt;p id="p2"&gt;Second paragraph&lt;/p&gt;
+&lt;/html&gt;;
+
+alert(html.p.(@id == "p1")); // Alerts "First paragraph"
+</pre>
+<p>Nodes matching the path before the expression (in this case the paragraph elements) are added to the scope chain before the expression is evaluated, as if they had been specified using the <a href="/en/JavaScript/Reference/Statements/with" title="en/JavaScript/Reference/Statements/with">with statement</a>.</p>
+<p>Consequently, filters can also run against the value of a single node contained within the current element:</p>
+<pre class="brush: js">var people = &lt;people&gt;
+  &lt;person&gt;
+    &lt;name&gt;Bob&lt;/name&gt;
+    &lt;age&gt;32&lt;/age&gt;
+  &lt;/person&gt;
+  &lt;person&gt;
+    &lt;name&gt;Joe&lt;/name&gt;
+    &lt;age&gt;46&lt;/age&gt;
+  &lt;/person&gt;
+&lt;/people&gt;;
+
+alert(people.person.(name == "Joe").age); // Alerts 46
+</pre>
+<p>Filter expressions can even use JavaScript functions:</p>
+<pre class="brush: js">function over40(i) {
+    return i &gt; 40;
+}
+
+alert(people.person.(over40(parseInt(age))).name); // Alerts Joe
+</pre>
+<h2 id="Handling_namespaces">Handling namespaces</h2>
+<p>E4X is fully namespace aware. Any XML object that represents a node or attribute provides a <code>name()</code> method which returns a <code>QName</code> object, allowing easy inspection of namespaced elements.</p>
+<h3 id="Default">Default</h3>
+<pre class="brush: js">default xml namespace = "http://www.w3.org/1999/xhtml";
+// No need now to specify a namespace in the html tag
+var xhtml = &lt;html&gt;&lt;head&gt;&lt;title&gt;&lt;/title&gt;&lt;/head&gt;&lt;body&gt;
+            &lt;p&gt;text&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;;
+alert(xhtml.head); // No need to specify a namespace on subelements here either</pre>
+<h3 id="Non-default">Non-default</h3>
+<pre class="brush: js">var xhtml = &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
+	&lt;head&gt;
+		&lt;title&gt;Embedded SVG demo&lt;/title&gt;
+	&lt;/head&gt;
+	&lt;body&gt;
+		&lt;h1&gt;Embedded SVG demo&lt;/h1&gt;
+		&lt;svg xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 100 100"&gt;
+			&lt;circle cx="50"
+				cy="50"
+				r="20"
+				stroke="orange"
+				stroke-width="2px"
+				fill="yellow" /&gt;
+		&lt;/svg&gt;
+	&lt;/body&gt;
+&lt;/html&gt;;
+
+alert(xhtml.name().localName); // Alerts "html"
+alert(xhtml.name().uri); // Alerts "http://www.w3.org/1999/xhtml"
+</pre>
+<p>To access elements that are within a non-default namespace, first create a <code>Namespace</code> object encapsulating the URI for that namespace:</p>
+<pre class="brush: js">var svgns = new Namespace('http://www.w3.org/2000/svg');
+</pre>
+<p>This can now be used in E4X queries by using <code>namespace::localName</code> in place of a normal element specifier:</p>
+<pre class="brush: js">var svg = xhtml..svgns::svg;
+alert(svg); // Shows the &lt;svg&gt; portion of the document
+</pre>
+<h2 id="Using_GeneratorsIterators_with_E4X">Using Generators/Iterators with E4X</h2>
+<p>As of <a href="/en/JavaScript/New_in_JavaScript/1.7" title="en/JavaScript/New in JavaScript/1.7">JavaScript 1.7</a>, it is possible to use <a href="/en/JavaScript/Guide/Iterators_and_Generators" title="en/JavaScript/Guide/Iterators and Generators">generators and iterators</a>, giving more options for traversing E4X.</p>
+<p>In a manner akin to <a href="/en/DOM/document.createTreeWalker" title="en/DOM/document.createTreeWalker">DOM tree walkers</a>, we can define our own walkers for E4X. While the following is already achievable by iterating an E4X object with <code>for each...in</code>, it demonstrates how a more customized one could be created.</p>
+<pre class="brush: js">function xmlChildWalker (xml) {
+    var i = 0;
+    var child = xml.*[0];
+    while (child != undefined) {
+        yield child;
+        child = xml.*[++i];
+    }
+    yield false;
+}
+
+var a = &lt;a&gt;&lt;b/&gt;&lt;c/&gt;&lt;/a&gt;;
+var xcw = xmlChildWalker(a);
+
+var child;
+while ((child = xcw.next()) !== false) {
+    alert(child.toXMLString()); // "&lt;b/&gt;" then "&lt;c/&gt;"
+}
+
+</pre>
+<h2 id="See_also" name="See_also">See also</h2>
+<ul>
+  <li><a href="/en/E4X" title="en/E4X">E4X</a></li>
+  <li><a href="/en/E4X_Tutorial" title="en/E4X_Tutorial">E4X Tutorial</a></li>
+</ul>
+<p>{{ languages( { "zh-cn": "cn/Core_JavaScript_1.5_Guide/Processing_XML_with_E4X", "zh-tw": "zh_tw/E4X/使用_E4X_處理_XML", "fr": "fr/Guide_JavaScript_1.5/Traitement_de_XML_avec_E4X", "ja": "ja/Core_JavaScript_1.5_Guide/Processing_XML_with_E4X" } ) }}</p>
diff --git a/files/de/einrichten_einer_entwicklungsumgebung_für_erweiterungen/index.html b/files/de/einrichten_einer_entwicklungsumgebung_für_erweiterungen/index.html
new file mode 100644
index 0000000000..fec703c13a
--- /dev/null
+++ b/files/de/einrichten_einer_entwicklungsumgebung_für_erweiterungen/index.html
@@ -0,0 +1,102 @@
+---
+title: Einrichten einer Entwicklungsumgebung für Erweiterungen
+slug: Einrichten_einer_Entwicklungsumgebung_für_Erweiterungen
+tags:
+  - Erweiterungen
+translation_of: Archive/Add-ons/Setting_up_extension_development_environment
+---
+<p>Dieser Artikel soll Anregungen geben wie Sie ihre Mozilla-Anwendung zur Entwicklung von Erweiterungen einrichten können. Dieser Artikel bezieht sich sowohl auf Firefox als auch auf Thunderbird und SeaMonkey in der Version 2.0 und höher.</p>
+<h3 id="Überblick">Überblick</h3>
+<ul>
+ <li>Erstellen Sie ein <a href="#Entwicklerprofil">Entwicklerprofil</a>, um Ihren Firefox mit <a href="#Entwicklungseinstellungen">Entwicklungseinstellungen</a> in <code>about:config</code> auszustatten.</li>
+ <li>Installieren Sie einige <a href="#Erweiterungen_für_Entwickler">Erweiterungen für Entwickler</a> in Ihrem Entwicklerprofil.</li>
+ <li>Bearbeiten Sie die Erweiterungsdateien und starten Sie die Anwendung mit Ihrem Entwicklerprofil.</li>
+</ul>
+<h3 id="Entwicklerprofil">Entwicklerprofil</h3>
+<p>Um die Geschwindigkeitseinbußen durch Einstellungen und Erweiterungen zu Entwicklung sowie den Verlust persönlicher Daten zu vermeiden, sollten Sie ein gesondertes Entwicklerprofil einrichten.</p>
+<p>Sie können zwei Firefox-Instanzen mit unterschiedlichen Profilen nutzen, wenn Sie den Browser mit dem <code>-no-remote</code> Parameter starten. Beispielsweise können Sie mit dem folgenden Befehl Ihr Entwicklerprofil, von dem wir annehmen, dass es "dev" heißt, unabhängig davon starten, ob bereits eine "normale" Instanz von Firefox läuft oder nicht:</p>
+<p>Unter Ubuntu (und vielen anderen Linux Distributionen):</p>
+<pre>/usr/bin/firefox -no-remote -P dev</pre>
+<p>Unter einigen anderen Distributionen von Linux/Unix:</p>
+<pre>/usr/local/bin/firefox -no-remote -P dev
+</pre>
+<p>Unter Mac:</p>
+<pre class="eval">/Applications/Firefox.app/Contents/MacOS/firefox-bin -no-remote -P dev &amp;
+</pre>
+<p>Unter Windows:</p>
+<pre class="eval">Start -&gt; Ausführen "%ProgramFiles%\Mozilla Firefox\firefox.exe" -no-remote -P dev
+</pre>
+<p>Unter Windows 64 bit:</p>
+<pre class="eval">Start -&gt; Run "%ProgramFiles(x86)%\Mozilla Firefox\firefox.exe" -no-remote -P dev</pre>
+<p>Um Thunderbird oder SeaMonkey zu starten, muss "Firefox" in den Beispielen entsprechend ersetzt werden.</p>
+<p>Wenn das Profil noch nicht besteht wird es automatisch erstellt. Um Firefox wie gewöhnlich zu starten, kann einfach "firefox" oder "firefox -P default" verwendet werden.</p>
+<p>Außerdem können gleichzeitig verschiedene Versionen des Firefox installiert werden, um die Kompatibilität der Erweiterung zu testen. Es können sogar stabile Versionen sowie die aktuelle Entwicklerversion auf einem System installiert werden.</p>
+<p><strong>Siehe auch:</strong> <a class="external" href="http://forums.mozillazine.org/viewtopic.php?t=613873">Installing Firefox 3 or Minefield while keeping Firefox 2 (englisch)</a></p>
+<p>Um mehrere Restarts zu vereinfachen, kann ein Profil für den regulären Gebrauch und ein zweites Für das Testen von Erweiterungen verwendet werden. Durch das "<code>no-remote" </code><span style="font-family: monospace;">K</span>ommando können beide Profile gleichzeitig ausgeführt werden. Eine Beschreibung findet sich unter <a class="external" href="http://kb.mozillazine.org/Command_line_arguments" title="http://kb.mozillazine.org/Command_line_arguments">http://<span>kb.mozillazine.org/Command_line_arguments</span></a>.<span> Diese beiden Verknüpfungen für Windows sind dazu sehr hilfreich:</span></p>
+<p><code><span>...firefox.exe -no-remote -p "profile1"</span></code></p>
+<p><code><span>...firefox.exe -no-remote -p "profile2"</span></code></p>
+<div class="note">
+ Diese Zeilen sind Windows-spezifisch. Wenn Sie die gleichen Anweisungen für Linux / Mac OS / etc haben, fügen Sie diese doch hier hinzu.</div>
+<p><span>Ersetzen Sie "..." mit einem regulären Pfad. Erstellen Sie beide Verknüpfungen und schon ist es sehr einfach beide Profile gleichzeitig zu verwenden.</span></p>
+<h3 id="Entwicklungseinstellungen">Entwicklungseinstellungen</h3>
+<p>Diese Einstellungen erleichtern das Debuggen auf Kosten sinkender Geschwindigkeit.</p>
+<p>Unter <a class="external" href="http://support.mozilla.com/en-US/kb/Editing+configuration+files">Editing Configuration Files</a> und <a class="external" href="http://www.firefox-browser.de/wiki/About:config">About:config Einstellungen</a> finden sich weitere Informationen wie Einstellungen vorgenommen werden können. Beachten Sie, dass nicht alle relevanten Einstellungen defaultmäßig unter <code>about:config</code> angezeigt werden. Daher müssen für diese Einstellungen neue Einträge (boolean) angelegt werden.</p>
+<p>Diese Änderungen sollten nur in einem gesondert angelegtem <a href="/de/Einrichten_einer_Entwicklungsumgebung_für_Erweiterungen#Entwicklerprofil" title="de/Einrichten_einer_Entwicklungsumgebung_für_Erweiterungen#Entwicklerprofil"> Entwicklerprofil</a> gemacht werden.</p>
+<ul>
+ <li><strong>javascript.options.showInConsole</strong> = <strong>true</strong>. Logt Fehler in Chrome-Dateien in die <a href="/de/Fehlerkonsole" title="de/Fehlerkonsole">Fehlerkonsole</a></li>
+ <li><strong>nglayout.debug.disable_xul_cache</strong> = <strong>true</strong>. Deaktiviert den XUL Cache damit Änderungen an Fenstern und Dialogen ohne Neustart übernommen werden. Dazu müssen zur Entwicklung <a href="#Verzeichnisse_statt_JAR-Archiven_benutzen">Verzeichnisse statt JAR-Archive benutzt werden</a>. Änderungen an XUL-Overlays werden dennoch nur nach dem erneuten Laden des überlagerten Dokumentes übernommen.</li>
+ <li><strong>browser.dom.window.dump.enabled</strong> = <strong>true</strong>. Erlaubt die Nutzung von {{ Domxref("window.dump", "dump()") }}, um direkt auf die Standardkonsole zu schreiben. Sie können innerhalb privilegierter Skripte auch {{ Interface("nsIConsoleService") }} benutzen.</li>
+ <li><strong>javascript.options.strict</strong> = <strong>true</strong>. Aktiviert JavaScript strict Warnungen in der Fehlerkonsole. Viele haben diese Einstellungen während der Entwicklung leider deaktiviert. Daher werden Sie, zusätzlich zu den Warnungen in Bezug auf den Code, viele Warnungen zu Problemen im Code anderer Erweiterungen bekommen. Diese können mit <a class="link-https" href="https://addons.mozilla.org/de/firefox/addon/1815">Console<sup>2</sup></a> gefiltert werden.</li>
+ <li><strong>extensions.logging.enabled</strong> = <strong>true</strong>. Diese Einstellung aktiviert detailliertere Meldungen der Fehlerkonsole über Installations- und Updateprobleme.</li>
+ <li><strong>nglayout.debug.disable_xul_fastload = true</strong>. Für Gecko 2.0+ (Firefox 4.0+). Siehe <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=531886" title="https://bugzilla.mozilla.org/show_bug.cgi?id=531886">diesen Bug</a> für weitere Informationen.</li>
+ <li>Eventuell wollen Sie auch <strong>dom.report_all_js_exceptions = true</strong> setzen. Siehe <a class="internal" href="/en/Exception_logging_in_JavaScript" title="en/Exception logging in
+    JavaScript">Exception logging in JavaScript</a> für weitere Details.</li>
+</ul>
+<div class="geckoVersionNote">
+ <p>{{ gecko_callout_heading("2.0") }}</p>
+ <p>Die Fehlerkonsole ist ab Firefox 4 standardmäßig deaktiviert. Sie können sie wieder aktivieren, indem Sie <code>devtools.errorconsole.enabled</code> auf <code>true</code> setzen und den Browser neu starten. Damit wird außerdem standardmäßig<code> javascript.options.showInConsole</code> auf <code>true</code> gesetzt.</p>
+</div>
+<h3 id="Erweiterungen_für_Entwickler">Erweiterungen für Entwickler</h3>
+<p>Diese Erweiterungen könnten bei der Entwicklung helfen:</p>
+<ul>
+ <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622" title="https://addons.mozilla.org/en-US/firefox/addon/6622">DOM Inspector</a>, Anschauen und Bearbeiten des DOM von jedem Dokument oder XUL Anwendung (Firefox und Thunderbird)</li>
+ <li><a class="external" href="http://www.hacksrus.com/~ginda/venkman/" title="http://www.hacksrus.com/~ginda/venkman/">Venkman</a>, ein JavaScript Debugger (<a class="external" href="http://addons.mozilla.org/en-US/firefox/addon/216" title="http://addons.mozilla.org/en-US/firefox/addon/216">Firefox Version</a>, <a class="external" href="http://addons.mozilla.org/en-US/thunderbird/addon/216" title="http://addons.mozilla.org/en-US/thunderbird/addon/216">Thunderbird Version</a>)</li>
+ <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/7434/">Extension Developer's Extension</a> ein Sammlung von Tools zur Erweiterungsentwicklung (Firefox)</li>
+ <li><a class="external" href="http://console2.mozdev.org/" title="http://console2.mozdev.org/">Console<sup>2</sup></a> verbesserte JavaScript Konsole (<a class="external" href="http://addons.mozilla.org/en-US/firefox/addon/1815" title="http://addons.mozilla.org/en-US/firefox/addon/1815">Firefox Version</a>, <a class="external" href="http://addons.mozilla.org/en-US/thunderbird/addon/1815" title="http://addons.mozilla.org/en-US/thunderbird/addon/1815">Thunderbird Version</a>)</li>
+ <li><a class="link-https" href="https://addons.mozilla.org/firefox/addon/5058" title="https://addons.mozilla.org/firefox/addon/5058">Javascript Command</a> schreiben/testen von JavaScript für Firefox Fenster</li>
+ <li><a class="external" href="http://www.gijsk.com/" title="http://www.gijsk.com/">Chrome List</a> Datei unter chrome:// durchsuchen (<a class="external" href="http://addons.mozilla.org/en-US/firefox/addon/4453" title="http://addons.mozilla.org/en-US/firefox/addon/4453">Firefox Version</a>, <a class="external" href="http://addons.mozilla.org/en-US/thunderbird/addon/4453" title="http://addons.mozilla.org/en-US/thunderbird/addon/4453">Thunderbird Version</a>)</li>
+ <li><a class="external" href="http://webdesigns.ms11.net/chromeditp.html" title="http://webdesigns.ms11.net/chromeditp.html">Chrome Edit Plus </a> Dateieditor (Firefox and Thunderbird)</li>
+ <li><a class="link-https" href="https://addons.mozilla.org/en-US/developers/tools/builder" title="https://addons.mozilla.org/en-US/developers/tools/builder">Add-on Builder</a> eine Web-basierte Anwendung, welche ein Erweiterungsgrundgerüst erstellt (Firefox, Thunderbird und weitere)</li>
+ <li><a class="link-https" href="https://addons.mozilla.org/firefox/addon/1843">Firebug</a> eine Vielzahl an Entwicklertools (Firefox)</li>
+ <li><a class="external" href="http://getfirebug.com/releases" title="http://getfirebug.com/releases">Chromebug</a> JavaScript und DOM Debugger (Firefox, "kinda works for Thunderbird")</li>
+ <li><a class="external" href="http://hyperstruct.net/projects/mozrepl" title="http://hyperstruct.net/projects/mozrepl">MozRepl</a> Firefox und andere Anwendung bearbeiten, während diese laufen (Firefox and Thunderbird)</li>
+ <li><a class="external" href="http://www.mouseless.de/index.php?/content/view/18/31/" title="http://www.mouseless.de/index.php?/content/view/18/31/">ExecuteJS</a> eine verbesserte JavaScript Konsole (<a class="link-https" href="https://addons.mozilla.org/firefox/addon/1729" title="https://addons.mozilla.org/firefox/addon/1729">Firefox Version</a>, <a class="external" href="http://xsidebar.mozdev.org/modifiedmisc.html#executejs">Thunderbird Version</a>)</li>
+ <li><a class="external" href="http://xpcomviewer.mozdev.org">XPCOMViewer</a> ein XPCOM Inspektor (Firefox und Thunderbird)</li>
+ <li><a class="internal" href="/en/JavaScript/Shells" title="En/JavaScript shells">JavaScript shells</a> JavaScript Codeschnipsel testen (Firefox und Thunderbird)</li>
+ <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/5817" title="https://addons.mozilla.org/en-US/firefox/addon/5817">SQLite Manager</a> SQLite Datenbanken verwalten (Firefox und Thunderbird)</li>
+ <li><a class="external" href="http://www.rumblingedge.com/viewabout/" title="http://www.rumblingedge.com/viewabout/">ViewAbout</a> Aktiviert Zugang zu verschiedenen "about:" Dialogen aus dem View Menü (<a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/9695" title="https://addons.mozilla.org/en-US/firefox/addon/9695">Firefox Version</a>, <a class="link-https" href="https://addons.mozilla.org/en-US/thunderbird/addon/9695" title="https://addons.mozilla.org/en-US/thunderbird/addon/9695">Thunderbird Version</a>)</li>
+ <li><span class="content"><span class="title"><a class="external" href="http://code.google.com/p/crashme/" title="http://code.google.com/p/crashme/">Crash Me Now!</a> </span></span>Nützlich zum Testen des Crash Reporting Systems (Firefox und Thunderbird)</li>
+</ul>
+<h3 id="Erweiterung_in_benutzerdefiniertem_Verzeichnis">Erweiterung in benutzerdefiniertem Verzeichnis</h3>
+<p>Anstatt nach jeder Änderung die Erweiterung neu zu installieren und als Schutz vor versehentlichem Löschen, wenn die Anwendung deinstalliert wird, können Sie ein Verzeichnis außerhalb des Profils an einem beliebigen Ort einrichten.</p>
+<ol>
+ <li>Suchen Sie in der in der Erweiterung enthaltenen <code>install.rdf</code> die ID der Erweiterung</li>
+ <li>Erstellen Sie eine leere Datei in dem das_profil_verzeichnis/extensions/ mit der ID als Dateiname. (z.B. <a class="link-mailto" href="mailto:'das_profil_verzeichnis/extensions/i...r@mozilla.org'" rel="freelink">'das_profil_verzeichnis/extensions/i...r@mozilla.org'</a>) <span style="white-space: nowrap;"><a class="external" href="http://www.firefox-browser.de/wiki/Profilverzeichnis#Wo_finde_ich_meinen_Profilordner.3F">Wo finde ich meinen Profilordner?</a></span></li>
+ <li>In dieser Datei wird dann einfach der vollständige Pfad zur <code>install.rdf</code> gespeichert.
+  <p>z.B. Linux:</p>
+  <pre class="eval">/full/path/to/yourExtension
+</pre>
+  <p>Oder Windows:</p>
+  <pre class="eval">C:\sam\workspace\toolbar\helloWorldtoolbar\
+</pre>
+ </li>
+ <li>Platzieren Sie die Datei in den Erweiterungsordner und starten Sie die Anwendung</li>
+</ol>
+<h3 id="Verzeichnisse_statt_JAR-Archiven_benutzen">Verzeichnisse statt JAR-Archiven benutzen</h3>
+<p>Unabhängig davon, ob Sie Erweiterungsdateien in ein JAR-Archiv oder Verzeichnisse packen, ist es einfacher in einem Verzeichnis zu entwickeln. Auch wenn Sie sich für ein JAR-Archiv für die Veröffentlichung entscheiden, können Sie trotzdem in einem Verzeichnis entwickeln, indem Sie Ihr chrome.manifest ändern.</p>
+<p>JAR-Archiv:</p>
+<pre class="eval">content	myExtension	jar:chrome/myExtension.jar!/content/
+</pre>
+<p>Verzeichnis:</p>
+<pre class="eval">content	myExtension	chrome/content/
+</pre>
diff --git a/files/de/erstellen_von_firefox_erweiterungen_mit_dem_mozilla_build_system/index.html b/files/de/erstellen_von_firefox_erweiterungen_mit_dem_mozilla_build_system/index.html
new file mode 100644
index 0000000000..da13f8f840
--- /dev/null
+++ b/files/de/erstellen_von_firefox_erweiterungen_mit_dem_mozilla_build_system/index.html
@@ -0,0 +1,469 @@
+---
+title: Erstellen von Firefox Erweiterungen mit dem Mozilla Build System
+slug: Erstellen_von_Firefox_Erweiterungen_mit_dem_Mozilla_Build_System
+tags:
+  - Add-ons
+  - Erweiterungen
+  - Mozilla entwickeln
+  - XPCOM
+translation_of: >-
+  Archive/Add-ons/Creating_Custom_Firefox_Extensions_with_the_Mozilla_Build_System
+---
+<div class="note">
+ <strong>Hinweis:</strong> Alle Anweisungen in diesem Artikel gelten nur für Mozilla 1.8 (Firefox 1.5). Wir werden versuchen, die Änderungen aus neueren Versionen zu aktualisieren, aber Sie sollten nicht erwarten, dass dies mit Mozilla 1.7 (Firefox 1.0) oder älter funktioniert.</div>
+<p>Es gibt sehr viel <a href="/de/Erweiterungen" title="de/Erweiterungen">Informationsmaterial</a> zur Erstellung von Erweiterungen für Firefox. Diese Artikel nehmen jedoch an, dass Sie Ihre Erweiterungen nur mit <a href="/de/XUL" title="de/XUL">XUL</a> und <a href="/de/JavaScript" title="de/JavaScript">JavaScript</a> entwickeln. Für komplexe Erweiterungen ist es unter Umständen nötig, Komponenten in C++ zu erstellen, die erweiterte Funktionen bereitstellten. Gründe für C++ Komponenten in Ihrer Erweiterung:</p>
+<ul>
+ <li>Bedarf an höchster Performance neben dem, was von JavaScript Code ausgeliefert werden kann.</li>
+ <li>Verwendung von Bibliotheken von Drittanbietern, die in C or C++ geschrieben sind.</li>
+ <li>Verwendung von Mozilla Schnittstellen, die nicht über <a href="/de/XPCOM" title="de/XPCOM">XPCOM</a> (e.g. <a href="/de/NSPR" title="de/NSPR">NSPR</a>) bereitgestellt werden.</li>
+</ul>
+<p>Dieser Artikel beschreibt, wie Sie eine Entwicklungsumgebung für eine große und komplexe Firefox Erweiterung mit den oben genannten Anforderungen einrichten können. Das Auffinden von Informationen zu diesem Thema war sehr schwierig, da bisher kaum Informationen darüber veröffentlicht wurden, aber viele Mitwirkende aus der Mozilla Community haben dazu beigetragen, etliche Fragen von Neulingen zu beantworten. Ich kann nicht genug darauf hinweisen, dass ich noch weit entfernt von einem Mozilla Experten bin, obwohl ich Fortschritte mache. Es könnten daher Informationen in diesem Dokument vorhanden sein, die nicht komplett, nicht den richtige Weg aufzeigen oder einfach falsch sind. Wenn Sie mehr über dieses Thema wissen, sind Sie angehalten diesen Artikel zu verbessern.</p>
+<p>Ich sollte auch betonen, dass Sie Mozilla <em>nicht</em> kompilieren müssen oder das Mozilla Build System verwenden müssen, wenn Sie C++ Komponenten für Mozilla erstellen wollen. Wenn Sie nur ein oder zwei <a href="/de/XPCOM" title="de/XPCOM">XPCOM</a> Komponenten erstellen wollen, ist dieser Weg vielleicht zu übertrieben Sie können stattdessen einen Blick auf <a class="external" href="http://www.iosart.com/firefox/xpcom/">diese Anleitung</a> werfen. Wenn Sie auf der anderen Seite ein erfahrener Entwickler sind und wissen, dass Sie eine große komplizierte Erweiterung erstellen wollen, finden Sie in diesem Artikel nützliche Hinweise.</p>
+<p>Ein letzter Hinweis: Die folgenden Techniken wurden nur mit Firefox getestet, allerdings werden Sie mit wenigen Änderungen auch in anderen Gecko-basierten Anwendungen wie Thunderbird oder Seamonkey funktionieren. Fall das jemand bestätigen kann und Informationen zur Anpassung hat, wäre ein kleiner Abschnitt in diesem Artikel dazu sehr hilfreich.</p>
+<h3 id="Bambi_trifft_Mozilla">Bambi trifft Mozilla</h3>
+<p>Das ist nichts für schwache Nerven. Die ersten Schritte erfordern unter anderem das Kompilieren von Mozilla, was ein großen - nein gigantisches - Unterfangen ist. Viele schlaue Entwickler standen schon am Rande der Verzweiflung als Sie zum ersten mal versucht haben Mozilla zu kompilieren. Falls Sie kein erfahrener C++ Entwickler sind, würde ich es gar nicht erst versuchen. Bleiben Sie bei JavaScript.</p>
+<h4 id="Unter_Windows_Plattformen">Unter Windows Plattformen</h4>
+<p>Als ich das erste Mal Mozilla kompiliert habe, verwendete ich <a href="/de/Entwicklerhandbuch/Build_Anweisungen/Windows_Build_Voraussetzungen" title="de/Entwicklerhandbuch/Build Anweisungen/Windows Build Voraussetzungen">diese Anleitung</a>. Ich weiß nicht mehr warum, aber ich bin an verschiedenen Stellen hängen geblieben und die ganze Sache hat länger gedauert als ich erwartet hatte. Viele Möbel wurden zerstört, viele Haare waren danach nicht mehr auf dem Kopf. Hier ist eine <a class="external" href="http://whereswalden.com/mozilla/msvcfree/">ausführliche Anleitung</a>(engl.), welche gute Rezensionen erhalten hat. Folgen Sie jedem Schritt genau und vielleicht passt am Ende alles. Denken Sie daran, dass wenn Sie das Build einmal erfolgreich hin bekommen haben, es danach umso einfacher ist. Vielleicht.</p>
+<h4 id="Unter_anderen_Plattformen">Unter anderen Plattformen</h4>
+<p>Auf anderen Systemen, Linux und MacOS, ist der Prozess um einiges einfacher. Alle Tools zum Kompilieren sind eingebaut und daher können Sie mit einigen Befehlen im Terminal sehr einfach ein Build erstellen. Sie können die vollständigen Anweisungen für fast jedes Betriebssystem <a href="/de/Entwicklerhandbuch/Build_Anweisungen" title="de/Entwicklerhandbuch/Build Anweisungen">hier</a> finden.</p>
+<h3 id="Strukturierung_des_Projekts">Strukturierung des Projekts</h3>
+<p>Mozilla enthält eine Reihe von komplexen Erweiterungen, die im Build-Prozess integriert sind. Das ist nötig, um alle Probleme bei der Erstellung und Registrierung von XPCOM Komponenten, der Kompilierung von JAR Dateien und Manifesten, der Installation des Firefox <code>extensions/</code> Verzeichnisses und so weiter zu lösen. Wir werden diese Infrastruktur nutzen, um unsere Erweiterung zu erstellen.</p>
+<p>Zunächst denken Sie sich einen schönen Namen für Ihre Erweiterung aus und erstellen ein Verzeichnis unter <code>/mozilla/extensions/</code>. Verwenden Sie nur Kleinbuchstaben. Sie sollten eine Reihe weitere Verzeichnisse (<code>inspector/</code>, <code>reporter/</code> und so weiter) im gleichen Verzeichnis sehen.</p>
+<p>Beachten Sie, dass bevor Sie irgendetwas kompilieren, ein Konfigurationsprozess für das Mozilla Build System erforderlich ist, welcher die Datei <code>Makefile.in</code> für das Build erstellt. Die makefile sollte ähnlich oder identisch zur Vorlage sein, aber die zusätzliche Flexibilität durch die dynamische Generierung ist eines der Dinge, welche das Mozilla Build System so mächtig machen.</p>
+<h4 id="Anatomie_einer_einfachen_C_Erweiterung">Anatomie einer einfachen C++ Erweiterung</h4>
+<p>Wir nehmen an, dass Sie C++ verwenden, um XPCOM Komponenten zu schreiben, die entweder von anderen C++ Komponenten oder von JavaScript verwendet werden. Der Prozess der Erstellung eines Komponents ist eigentlich relativ unkompliziert, wenn das Mozilla Build System verwendet wird.</p>
+<p>Im einfachsten Fall besteht eine Komponente aus einem Hauptverzeichnis mit zwei Unterverzeichnissen <code>public/</code> und <code>src/</code>. Das Hauptverzeichnis und jedes Unterverzeichnis muss eine <code>Makefile.in</code> Datei enthalten (von jetzt beziehe ich mich auf diese Datei als makefile, obwohl wir wissen, dass diese nur verwendet werden, um die wirkliche makefile zu generieren). Diese makefile sagt zwei Sachen. Zuerst werden die Unterverzeichnisse aufgelistet aus denen die Erweiterung besteht, sodass das Build-System weiß, wo nach zusätzlichen makefiles gesucht werden muss. Als Zweites weist diese das Build-System an, eine neue Erweiterung zu installieren, als die Komponenten direkt in das binäre Verzeichnis von Firefox zu kopieren. Der größte Vorteil der Verwendung einer Erweiterung ist das einfache Packen und das installieren auf anderen Rechnern.</p>
+<p>Hier ist also unsere Grundlage (<code>Makefile.in</code> im Hauptverzeichnis der Erweiterung):</p>
+<pre>DEPTH		= ../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+MODULE = myextension
+
+DIRS		= public src
+
+XPI_NAME		= myextension
+INSTALL_EXTENSION_ID	= myextension@mycompany.com
+XPI_PKGNAME		= myextension
+
+DIST_FILES = install.rdf
+
+include $(topsrcdir)/config/rules.mk
+</pre>
+<p>Eine detaillierte Beschreibung des Prozesses und eine Beschreibung der Schlüsselfunktionen dieser makefile, kann <a href="/de/Wie_Mozillas_Build-System_arbeitet" title="de/Wie Mozillas Build-System arbeitet">hier</a> gefunden werden. <strong>MODULE</strong> und <strong>XPI_NAME</strong> sind beides die Namen Ihrer Erweiterung; Sie sollten in allen Projekt-makefiles wiederholt werden, sodass alle Dateien in dem selben Ort des XPIs landen (siehe unten). <strong>INSTALL_EXTENSION_ID</strong> ist die einzigartige ID Ihrer Erweiterung. Das kann eine GUID sein, aber das obige Format ist schöner und besser zu behalten. Sie müssen kein <strong>XPI_PKGNAME</strong> angeben, aber wenn Sie eine XPI Datei erstellen, die zur Auslieferung geeignet sein soll, wird diese automatisch im Wurzelverzeichnis des XPIs erstellt (<code>/mozilla/$(MOZ_OBJDIR)/dist/xpi-stage/</code>).</p>
+<p>Jede Erweiterung muss eine <code>install.rdf</code> Datei enthalten, die Firefox mitteilt wie die Erweiterung installiert werden soll. Diese Datei sollte im Hauptverzeichnis platziert werden und ungefähr so aussehen:</p>
+<pre>&lt;?xml version="1.0"?&gt;
+
+&lt;RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:em="http://www.mozilla.org/2004/em-rdf#"&gt;
+  &lt;Description about="urn:mozilla:install-manifest"&gt;
+    &lt;em:id&gt;myextension@mycompany.com&lt;/em:id&gt;
+    &lt;em:version&gt;0.1&lt;/em:version&gt;
+
+    &lt;em:targetApplication&gt;
+      &lt;!-- Firefox --&gt;
+      &lt;Description&gt;
+        &lt;em:id&gt;{ec8030f7-c20a-464f-9b0e-13a3a9e97384}&lt;/em:id&gt;
+        &lt;em:minVersion&gt;1.0+&lt;/em:minVersion&gt;
+        &lt;em:maxVersion&gt;1.0+&lt;/em:maxVersion&gt;
+      &lt;/Description&gt;
+    &lt;/em:targetApplication&gt;
+
+    &lt;!-- front-end metadata --&gt;
+    &lt;em:name&gt;My First Extension&lt;/em:name&gt;
+    &lt;em:description&gt;Just an example.&lt;/em:description&gt;
+    &lt;em:creator&gt;allpeers.com&lt;/em:creator&gt;
+    &lt;em:homepageURL&gt;http://www.allpeers.com/blog/&lt;/em:homepageURL&gt;
+  &lt;/Description&gt;
+&lt;/RDF&gt;
+</pre>
+<p>Es gibt eine <a href="/de/Installationsmanifest" title="de/Installationsmanifest">detaillierte Beschreibung</a> des Formats der<code> install.rdf</code> Datei. Verwenden Sie die Variable <strong>DIST_FILES</strong> in der makefile, um anzugeben, dass eine Kopie der Datei in das Erweiterungsverzeichnis und (optional) der XPI Datei erstellt wird.</p>
+<h4 id="Öffentliche_Schnittstellen">Öffentliche Schnittstellen</h4>
+<p>Das <code>public/</code> Verzeichnis enthält alle Schnittstellen, auf die andere Module zugreifen wollen. Das können <a class="external" href="http://www.mozilla.org/scriptable/xpidl/idl-authors-guide/index.html">IDL</a> Dateien für <a href="/de/XPCOM" title="de/XPCOM">XPCOM</a> Schnittstellen sein, welche verwendet werden, um normale C++ header Dateien in Ihre Quelldateien einzubinden. Es können auch normale C++ header Dateien sein, die direkt von anderen Modulen verwendet werden. Der einfachste Weg um das zu letzt genannte zu machen, ist Implemenierungen für alle Methode innerhalb vorzunehmen, sodass Sie keine zusätzlichen Verweisabhängigkeiten beachten müssen. Sonst müssen Sie statische Links auf Ihr Modul setzen, wenn Sie diese öffentlichen header in andern Modulen verwenden. Ich persönlich würde diese Praxis vermeiden (neben anderen Dingen, heißt statisches Verlinken, dass der gleiche Code mehrmals geladen wird und der Code nicht von JavaScript oder andern nicht-C++ Sprachen verfügbar ist) und immer wenn es möglich ist auf XPCOM zurückgreifen.</p>
+<p>Die makefile Datei im <code>public/</code> Verzeichnis sollte so aussehen:</p>
+<pre>DEPTH		= ../../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+MODULE		= myextension
+XPIDL_MODULE	= myextension
+
+XPI_NAME = myextension
+
+EXPORTS = \
+		myHeader.h \
+		$(NULL)
+
+XPIDLSRCS	= \
+		myIFirstComponent.idl \
+		myISecondComponent.idl \
+		$(NULL)
+
+include $(topsrcdir)/config/rules.mk
+</pre>
+<p><strong>XPIDL_MODULE</strong> ist der Name der generierten XPT Datei, welche Informationen über Ihre <a class="external" href="http://www.mozilla.org/scriptable/xpidl/idl-authors-guide/index.html">IDL</a> Schnittstellen enthält. Wenn Sie mehrere Module haben, stellen Sie absolut sicher, dass Sie einen anderen Wert für jedes <strong>XPIDL_MODULE</strong> verwenden. Sonst wird die erste XPT Datei von der zweiten Überschrieben und Sie erhalten <strong>NS_ERROR_XPC_BAD_IID</strong> Fehler, wenn Sie versuchen die IDL Schnittstellen über Ihren Code zu erreichen. Die Dateien unter <strong>EXPORTS</strong> werden direkt nach <code>/mozilla/$(MOZ_OBJDIR)/dist/include/myextension/</code> kopiert und sind daher für andere Module erreichbar (der Wert von <strong>MOZ_OBJDIR</strong> ist in <code>/mozilla/.mozconfig</code> definiert). XPIDLSRCS läuft durch den IDL Prozessor, und die generierten C++ header werden in das gleiche Verzeichnis kopiert. Außerdem wird eine XPT Datei generiert und im <code>components/</code> Unterverzeichnis Ihrer Erweiterung abgelegt.</p>
+<h4 id="Quelldateien">Quelldateien</h4>
+<p>Jetzt ist es an der Zeit, die makefile und Quelldateien im <code>src/</code> Unterverzeichnis zu erstellen. Wenn Sie Schnittstellen implementieren, die Sie über IDL  beschrieben haben, ist der einfachste Weg das <code>src/</code> Verzeichnis leer zu lassen und nur <code>make</code> im <code>public/</code> Verzeichnis auszuführen; das wird kurz erklärt.</p>
+<p>Dann öffnen Sie die generierte header Datei für Ihre Schnittstelle von <code>/mozilla/$(MOZ_OBJDIR)/dist/include/myextension/</code>. Es sind Stücke der Komponenten Dateien .H und .CPP enthalten, die Sie einfach mittels Kopieren und Einfügen in Ihre Implementierungsdateien hinzufügen können. Was Sie tun müssen, ist die Implementierungsstückchen in der C++ Datei zu füllen und Sie sind auf einem guten Weg.</p>
+<p>Hier ist ein Beispiel der makefile, die Sie in Ihr <code>src</code> Verzeichnis packen müssen:</p>
+<pre class="eval">DEPTH		= ../../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+IS_COMPONENT = 1
+<a href="/en/MODULE" title="en/MODULE">MODULE</a> = myextension
+<a href="/en/LIBRARY_NAME" title="en/LIBRARY NAME">LIBRARY_NAME</a> =  myExtension
+<a href="/en/USE_STATIC_LIBS" title="en/USE_STATIC_LIBS">USE_STATIC_LIBS</a> = 1
+
+XPI_NAME = myextension
+
+REQUIRES	= xpcom \
+		  string \
+		  $(NULL)
+
+<a href="/en/CPPSRCS" title="en/CPPSRCS">CPPSRCS</a>		= \
+		  myFirstComponent.cpp \
+		  mySecondComponent.cpp \
+		  myExtension.cpp \
+		  $(NULL)
+
+include $(topsrcdir)/config/rules.mk
+
+<a href="/en/EXTRA_DSO_LDOPTS" title="en/EXTRA DSO LDOPTS">EXTRA_DSO_LDOPTS</a> += \
+  $(XPCOM_GLUE_LDOPTS) \
+  $(NSPR_LIBS) \
+  $(NULL)
+
+# <span class="highlightred">NOTE: If you are coding against the 1.8.0 branch (not 1.8 branch or trunk), the</span>
+# <span class="highlightred">above line won't work, due to linker flag issues.</span> Use the following
+# variables instead:
+#
+# EXTRA_DSO_LDOPTS += \
+#   $(MOZ_COMPONENT_LIBS) \
+#   $(NULL)
+#
+# Unfortunately, using MOZ_COMPONENT_LIBS links against xpcom_core, which means
+# your components will not work in future versions of Firefox.
+</pre>
+<p>Der Abschnitt <code>REQUIRES</code> teilt <code>make</code> mit, welche Module Ihre Komponente nutzt. Das bringt die Unterverzeichnisse von <code>/mozilla/$(MOZ_OBJDIR)/dist/include/</code> dazu zum C++ Compiler Pfad hinzugefügt zu werden. Wenn Sie Mozilla header einfügen und der Compiler diese nicht findet, kann es bedeuten, dass Sie nicht alle nötigen Module hier aufgelistet haben. <code>CPPSRCS</code> listet die Quelledateien auf, die kompiliert werden sollen.</p>
+<p>In diesem Beispiel enthalten die ersten beiden Dateien die Implementierung der zwei Erweiterungskomponenten. Die letzte Datei, <code>myExtension.cpp</code>, enthält den nötigen Code zur Registrierung der Komponenten, wie im nächsten Abschnitt beschrieben.</p>
+<h4 id="Komponenten_registrieren">Komponenten registrieren</h4>
+<p>Um Ihre Komponenten in anderen C++ Modulen und JavaScript zu verwenden, müssen Sie diese registrieren. Um das zu machen, muss Ihre Erweiterung eine Klasse implementieren, welches die <code><a href="/de/XPCOM_Interface_Referenz/nsIModule" title="de/XPCOM Interface Referenz/nsIModule">nsIModule</a></code> Schnittstelle ausstellt, welche Methoden zum Zugang der Komponenten hat. Glücklicherweise kann dies durch einige einfache Makros erreicht werden, sodass Sie sich nicht um die unwichtigen Details kümmern müssen, was unter der Haube geschieht.</p>
+<p>Der erste Schritt ist eine CID, contract ID und einen Klassennamen für jede Ihrer Komponenten zu definieren. Platzieren Sie den folgenden Code (mit den entsprechenden <strong>#defines</strong>) im header jeder Komponente, die Sie über den Komponentenmnager initialisieren möchten:</p>
+<pre>// {00000000-0000-0000-0000-000000000000}
+#define MYFIRSTCOMPONENT_CID \
+	{ 0x00000000, 0x0000, 0x0000, \
+	{ 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00 } }
+
+#define MYFIRSTCOMPONENT_CONTRACTID	"@mycompany.com/myfirst;1"
+#define MYFIRSTCOMPONENT_CLASSNAME	"My First Component"
+</pre>
+<p>Natürlich müssen Sie die CID mit einer echten GUID ersetzen. Unter Windows kann dies über die <a class="external" href="http://www.microsoft.com/downloads/details.aspx?familyid=94551F58-484F-4A8C-BB39-ADB270833AFC">guidgen.exe</a> geschehen. Unix Anwender können "uuidgen" verwenden (wird mit den meisten Distributionen ausgeliefert).</p>
+<p>Jetzt erstellen Sie die <code>myExtension.cpp</code> Datei wie folgt:</p>
+<pre>#include "nsXPCOM.h"
+
+#include "nsIGenericFactory.h"
+
+/**
+ * Components to be registered
+ */
+#include "myFirstComponent.h"
+#include "mySecondComponent.h"
+
+NS_GENERIC_FACTORY_CONSTRUCTOR(myFirstComponent)
+NS_GENERIC_FACTORY_CONSTRUCTOR(mySecondComponent)
+
+//----------------------------------------------------------
+
+static const nsModuleComponentInfo components[] =
+{
+	{
+		MYFIRSTCOMPONENT_CLASSNAME,
+		MYFIRSTCOMPONENT_CID,
+		MYFIRSTCOMPONENT_CONTRACTID,
+		myFirstComponentConstructor
+	},
+	{
+		MYSECONDCOMPONENT_CLASSNAME,
+		MYSECONDCOMPONENT_CID,
+		MYSECONDCOMPONENT_CONTRACTID,
+		mySecondComponentConstructor
+	},
+};
+
+NS_IMPL_NSGETMODULE(MyExtension, components)
+</pre>
+<p>Das <strong>NS_IMPL_NSGETMODULE</strong> Makro erstellt das passenden Modulobjekt, welches Zugang zu allen Komponenten bereitstellt, die im <code><a href="/de/NsModuleComponentInfo" title="de/NsModuleComponentInfo">nsModuleComponentInfo</a></code> Array aufgelistet sind.</p>
+<h4 id="Kompilieren">Kompilieren</h4>
+<p>Wie oben genannt, möchten Sie Ihre Erweiterung wahrscheinlich direkt nach der Erstellung der IDL Dateien kompilieren, um die C++ stubs für Ihre Komponenten-Implementierung zu generieren. Ich nehme an, dass Sie Firefox bereits erfolgreich kompiliert haben. Wenn nicht gehen Sie sofort zum Anfang dieses Artikels zurück und kommen Sie nicht wieder bis Sie eine funktionierende <code>firefox.exe</code> haben. Gehen Sie nicht weiter. Sammeln Sie keine $200 ein.</p>
+<p>Immer noch da? Gut, jetzt müssen wir Ihre <code>.mozconfig</code> (im <code>/mozilla/</code> Verzeichnis) ändern, sodass Ihre Erweiterung mit Mozilla zusammen kompiliert wird. Fügen Sie die folgende Zeile am Ende der Datei an:</p>
+<pre>ac_add_options --enable-extensions=default,myextension
+</pre>
+<p>Starten Sie <code>make</code> vom Mozilla Root:</p>
+<pre>make -f client.mk build
+</pre>
+<p>Selbst wenn Sie ein aktuelles Firefox Build haben, müssen Sie warten bis <code>make</code> durch den kompletten Mozilla Quelltext gegangen ist und nach neuem Code gesucht hat (auf meinem Computer, welcher sehr schnell ist, hat dies gut 10-15 Minuten gedauert). Schließlich wird Ihre Erweiterung erreicht und eine Reihe von Dingen werden unter <code>/mozilla/$(MOZ_OBJDIR)/</code> erstellt:</p>
+<ul>
+ <li>Exportierte header Dateien und generierte header Dateien (von IDL) in <code>dist/include/myextension/</code></li>
+ <li>Statische Bibliotheken für Ihre Module in <code>dist/lib/</code> (für den Fall, dass andere Module statisch auf Ihre verweisen wollen, anstatt mit XPCOM).</li>
+ <li>XPI Datei in <code>dist/xpi-stage/myextension.xpi</code>.</li>
+ <li>Generierte makefiles für Ihre Projekte in <code>extensions/myextension/</code> (denken Sie daran wir sind unter <code>/mozilla/$(MOZ_OBJDIR)/</code>)</li>
+ <li>Alles weitere ist in <code><a class="link-mailto" href="mailto:dist/bin/extensions/myextension@mycompany.com" rel="freelink">dist/bin/extensions/myextension@mycompany.com</a>/</code>.</li>
+</ul>
+<p>Ein Großteil dieser Sachen wird nicht erstellt, wenn <code>make</code> das erste Mal ausgeführt wird, es werden nicht alle Quelldateien Ihrer Komponenten gefunden. Kümmern Sie sich nicht darum. Alles was Sie brauchen, sind die genierten header Dateien, die die C++ Implementierungs-Stubs enthalten. Gehen Sie zurück und arbeiten Sie Ihre C++ Implementierung Ihrer Komponenten aus, sodass das Build beim nächsten Mal komplett ist. Denken Sie dran, niemals die generierten Dateien zu verändern. Ändern Sie immer die Dateien, die verwendet werden, um sie zu generieren und führen Sie <code>make</code> aus. Es können Ausnahmen dieser Regel existieren, aber wenn Sie die generierten Dateien direkt ändern, machen Sie wahrscheinlich irgendetwas falsch.</p>
+<p>Der Vorgang, der das komplette Mozilla Verzeichnis durchgeht, dauert eine lange Zeit. Wenn Sie bereits ein Mozilla Build haben, können Sie dies vermeiden, indem Sie eine makefile für Ihre Erweiterung direkt erstellen. Gehen Sie zum Wurzelverzeichnis von $(MOZ_OBJDIR) und fügen Sie in eine Eingabeaufforderung folgendes ein:</p>
+<pre class="eval">../build/autoconf/make-makefile extensions/myextension
+</pre>
+<p>Wenn sich Ihr $(MOZ_OBJDIR) außerhalb von $(TOPSRCDIR) befindet, müssen Sie folgendes schreiben:</p>
+<pre class="eval">$(TOPSRCDIR)/build/autoconf/make-makefile -t $(TOPSRCDIR) extensions/myextension
+</pre>
+<p>Sodass das Skript weiß, wo sich Ihre Quelldateien befinden.</p>
+<p>Das wird eine eigene makefile für Ihre Erweiterung erstellen. Egal, ob Sie Mozilla komplett kompilieren oder diese Abkürzung verwenden, Sie können nun zu <code>/mozilla/$(MOZ_OBJDIR)/extensions/myextension/</code> wechseln, "make" in die Kommandozeile tippen und Ihr Build wird erstellt. Es sollte Ihre Komponente ungeachtet vom Rest kompiliert werden. Wenn alles funktioniert, werden Sie Ihre XPI sehen. Außerdem ist eine "exploded" Version des XPIs (das ungezippte Verzeichnis) unter <code>/mozilla/$(MOZ_OBJDIR)/dist/bin/extensions</code> zu finden.</p>
+<p>Um sicher zu gehen, dass das Build wirklich fertig ist, starten Sie Firefox und überprüfen Sie, ob Ihre Erweiterung unter Extras/Erweiterungen angezeigt wird. Wenn Sie Firefox als Ihren normalen Browser verwenden (und wenn nicht, warum nicht?), nervt es Sie vielleicht, dass Sie Firefox öfters schließen müssen bevor Sie Ihre Version starten. Setzen Sie die <strong>MOZ_NO_REMOTE</strong> Umgebungsvariable auf "1" bevor Sie die Entwicklungsversion von Firefox starten. Sie müssen außerdem ein anderes Profil für Ihre Entwicklerversion verwenden:</p>
+<pre class="eval">firefox -P <em>development</em>
+</pre>
+<p>Wobei <em>development</em> der Name des zusätzlichen Profils ist. Dies erlaubt Ihnen nun beide Versionen gleichzeitig laufen zu lassen.</p>
+<h4 id="Kein_Ort_wie_Chrome">Kein Ort wie Chrome</h4>
+<p>Yippee-yay! Jetzt haben Sie eine Erweiterung, die absolut nichts kann. Es ist Zeit etwas mit den Komponenten zu machen, die Sie implementiert und registriert haben. Am einfachsten geht das über einfachen <a href="/de/JavaScript" title="de/JavaScript">JavaScript</a> und <a href="/de/XUL" title="de/XUL">XUL</a> Code. Jetzt wäre es hilfreich, wenn Sie bereits Erfahrung im <a href="/de/Erweiterungen" title="de/Erweiterungen">Schreiben von "regulären" Erweiterungen</a> (ohne C++ Komponenten) haben. Wenn Sie das noch nie getan haben, ist empfohlen dies zuerst zu tun. Zeigen Sie doch einfach mal ein neues Menü-Item an, welches eine "Hello, World!" Dialogbox öffnet. Dadurch lernen Sie die benötigten Grundlagen kennen.</p>
+<p>Wenn Sie wissen wie man XUL/JavaScript Erweiterungen schreibt, wissen Sie auch, dass die wichtigste Teil im <code>chrome/</code> Verzeichnis der Erweiterung liegt. Die Tatsache, dass Sie C++ Komponenten verwenden, ändert daran nichts. Also müssen Sie nun die Ordner <code>content/</code>, <code>locale/</code> und <code>skin/</code> erstellen, in welchen Sie Ihre Chrome-Dateien packen.</p>
+<p>Sobald Sie die notwendigen Chrome-Dateien erstellt haben (zum Beispiel ein Overlay, welches einen Button hinzufügt, der Ihre Komponente aktiviert), müssen sie diese als Teil Ihrer Erweiterung packen. Das wird durch ein <a href="/de/JAR_Manifeste" title="de/JAR Manifeste">JAR Manifest</a> erreicht. Für unser einfaches Beispiel, kann diese Datei in etwa so aussehen:</p>
+<pre>myextension.jar:
+%  content myextension %content/
+%  locale myextension en-US %locale/en-US/
+%  skin myextension classic/1.0 %skin/classic/
+%  overlay chrome://browser/content/browser.xul chrome://myextension/content/MyExtensionOverlay.xul
+	content/MyExtensionOverlay.js		(content/MyExtensionOverlay.js)
+	content/MyExtensionOverlay.xul		(content/MyExtensionOverlay.xul)
+	locale/en-US/MyExtension.dtd		(locale/en-US/MyExtension.dtd)
+	locale/en-US/MyExtension.properties	(locale/en-US/MyExtension.properties)
+	skin/classic/MyExtension.css		(skin/classic/MyExtension.css)
+</pre>
+<p>Packen Sie diesen Code in eine Datei namens <code>jar.mn</code> in das Wurzelverzeichnis Ihrer Erweiterung und stellen Sie sicher, dass die Pfade in den Klammern wirklich auf die entsprechenden Dateien zeigen (relativ zum Wurzelverzeichnis). Sie müssen zudem eine kleine Änderung an der makefile im gleichen Verzeichnis vornehmen: Fügen Sie folgende Zeile hinzu:</p>
+<pre class="eval">USE_EXTENSION_MANIFEST = 1
+</pre>
+<p>Das teilt <code>make</code> mit eine einzelne Manifestdatei <code>chrome.manifest</code> zu erstellen, anstatt separate Manifestdateien für jedes Paket zu erstellen.</p>
+<p>Nun führen Sie <code>make</code> noch einmal aus  und Sie sollten ein <code><span style="font-family: Verdana,Tahoma,sans-serif;">c</span>hrome</code> Unterverzeichnis sehen (<code>/mozilla/$(MOZ_OBJDIR)<a class="link-mailto" href="mailto:/dist/bin/extensions/myextension@mycompany.com" rel="freelink">/dist/bin/extensions/myextension@mycompany.com</a>/</code>). Beachten Sie, dass das <code>chrome</code> Verzeichnis ein JAR (ZIP) Datei mit allen Chrome-Dateien, die in <code>jar.mn</code> aufgelistet sind und auch die komplette Verzeichnisstruktur der jar Datei, enthält. Die Verzeichnisstruktur ist jedoch leer. Warum? Ich weiß es nicht. Kümmern Sie sich nicht darum, denn die Dateien im JAR sind die, die gebraucht werden.</p>
+<h4 id="Komplizierte_Erweiterungen_strukturieren">Komplizierte Erweiterungen strukturieren</h4>
+<p>Wenn Sie eine komplexere Erweiterung mit vielen <a href="/de/XPCOM" title="de/XPCOM">XPCOM</a> Komponenten entwickeln, möchten Sie Ihren Code womöglich in kleinere Module aufteilen.</p>
+<h5 id="Etwas_komplexere_Erweiterungen">Etwas komplexere Erweiterungen</h5>
+<p>Für mäßig komplexe Erweiterungen ist es wahrscheinlich ausreichend den Code einfach in einzelne Module aufzuteilen. Nehmen wir an, Sie haben ein <code>base/</code> Modul, welches eine Reihe grundlegender XPCOM Komponenten bereitstellt und ein <code>advanced/</code> Modul, welches einige Chrome und andere Module bereitstellt. Ihre komplette Verzeichnisstruktur könnte so aussehen:</p>
+<ul>
+ <li>myextension
+  <ul>
+   <li>base
+    <ul>
+     <li>public</li>
+     <li>src</li>
+    </ul>
+   </li>
+   <li>advanced
+    <ul>
+     <li>content</li>
+     <li>locale
+      <ul>
+       <li>en-US</li>
+       <li>...other locales...</li>
+      </ul>
+     </li>
+     <li>public</li>
+     <li>skin
+      <ul>
+       <li>classic</li>
+       <li>...other skins...</li>
+      </ul>
+     </li>
+     <li>src</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+<p>Sonst ändert sich nicht wirklich etwas. Die makefiles in den <code>base/</code> und <code>advanced/</code> Verzeichnissen sollten mehr oder weniger genau so wie die originalen makefiles aussehen. Denken Sie daran die <strong>DEPTH</strong> Variable zu ändern, falls die Dateien ein Level weiter weg von dem Mozilla Verzeichnis verschoben wurden. Sie müssen außerdem die <strong>DIST_FILES</strong> Variable entfernen, weil das in der top-level makefile vorhanden sein wird. Jede makefile, die irgendetwas generiert, sollte die <strong>XPI_NAME</strong> Variable definieren, um sicher zu gehen, dass generierte Dateien in Ihre Erweiterung kommen und nicht in das globale <code>components/</code> Verzeichnis. Definieren Sie das einfach in jeder makefile, um sicher zu gehen. Sie können das gleiche <strong>MODULE</strong> in beiden <code>base/</code> und <code>advanced/</code> Verzeichnissen verwenden, sodass die generierten Dateien in das gleiche Verzeichnis wandern, aber stellen Sie sicher, dass Sie nicht die gleichen für <strong>XPIDL_MODULE</strong> in den zwei <code>public/</code> Verzeichnissen definieren oder eine in einen der Komponenten Bibliotheken (XPT Dateien), sonst wird das andere überschrieben und alles wird kaputt gehen.</p>
+<p>Jedes Modul muss auch einen unterschiedlichen Wert für die <strong>LIBRARY_NAME</strong> Variable besitzen. Das ist der Name der generierten dynamischen Bibliothek, wenn wir also die Bibliotheken "myBase" und "myAdvanced" aufrufen, wird eine <code>myBase.dll</code> und <code>myAdvanced.dll</code> (unter Windows zumindest) erstellt. Jedes dieser Module hat eine einzelne C++ Datei zur Registrierung von Komponenten. Es wird also zwei Dateien, die wie <code>myExtension.cpp</code> aussehen, in diesem Beispiel <code>Base.cpp</code> und <code>Advanced.cpp</code>. Schließlich wird jedes Modul ein eigenes <code>jar.mn</code> haben, sodass sie auf die gleichen JAR und Paket Dateinamen zurückgreifen. Die einzige Datei, die so bleibt ist <code>install.rdf</code>, welche immer noch nur einmal in dem Wurzelverzeichnis der Erweiterung steht.</p>
+<p>Vom top-level der makefile, sieht es nun so aus:</p>
+<pre>DEPTH		= ../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+MODULE = myextension
+
+DIRS		= base advanced
+
+XPI_NAME               = myextension
+INSTALL_EXTENSION_ID   = myextension@mycompany.com
+XPI_PKGNAME		= myextension
+
+DIST_FILES = install.rdf
+
+include $(topsrcdir)/config/rules.mk
+</pre>
+<h5 id="Wirklich_komplexe_Erweiterungen">Wirklich komplexe Erweiterungen</h5>
+<p>Wenn ein einzelnes Modul sehr groß wird, wollen Sie dieses sicher in weitere Untermodule aufteilen. Der Unterschied zu einzelnen Modulen und einzelnen Untermodulen, ist, dass die Untermodule alle die gleiche Datei zur Registrierung von Komponenten haben (die berühmte <code>myExtension.cpp</code> Datei) und wenn kompiliert wurde, werden sie als einzelne Bibliothek erstellt. Die Entscheidung zur Unterteilung in Untermodulen liegt nur in der Organisation des Codes und betrifft das Endprodukt nicht wirklich.</p>
+<p>Um ein Modul in Untermodule aufzuteilen, erstellen Sie zunächst einen Unterordner für jedes Untermodul. Dann erstellen Sie ein zusätzliches Verzeichnis, das <code>build/</code> genannt wird. Jedes Untermodul wird so konfiguriert, dass eine statische Bibliothek erstellt wird und das <code>build/</code> Verzeichnis wird diese Bibliotheken zusammenfügen, um eine einzige Komponentenbibliothek zu erstellen. Verwirrt? Hier ist ein Beispiel, welches das <code>advanced/</code> Unterverzeichnis des <code>myextension/</code> Verzeichnisses zeigt:</p>
+<ul>
+ <li>advanced
+  <ul>
+   <li>build</li>
+   <li>intricate
+    <ul>
+     <li>public</li>
+     <li>src</li>
+    </ul>
+   </li>
+   <li>multifarious
+    <ul>
+     <li>public</li>
+     <li>src</li>
+    </ul>
+   </li>
+   <li>content</li>
+   <li>locale
+    <ul>
+     <li>en-US</li>
+     <li>...other locales...</li>
+    </ul>
+   </li>
+   <li>skin
+    <ul>
+     <li>classic</li>
+     <li>...other skins...</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+<p>Wie Sie sehen, haben wir <code>advanced/</code> in zwei Untermodule geteilt: <code>intricate/</code> und <code>multifarious/</code> und wir haben einen zusätzlichen Ordner <code>build/</code> hinzugefügt. Wir haben die Chrome-Verzeichnisse direkt unter <code>advanced/</code> belassen, das sie nicht an irgendwelche Untermodule gebunden sind. Das bedeutet, dass das <code>jar.mn</code> am gleichen Platz verweilt.</p>
+<p>Die <code>intricate/</code> und <code>multifarious/</code> makefiles werden so wie die originale <code>advanced/</code> makefile aussehen, aber wir müssen ein paar kleiner Anpassungen vornehmen. Wie immer müssen wir die <strong>DEPTH</strong> Variable anpassen, da sich die makefiles tiefer in der Verzeichnisstruktur befinden. Wir sollten außerdem die<strong> LIBRARY_NAME</strong>s ändern, um anzugeben, das wir statische Bibliotheken für jedes Untermodul anlegen. Das "_s" Suffix ist für diesen Zweck geeignet. Wir nennen sie also "myIntricate_s" und "myMultifarious_s". Schließlich definieren wir <strong>FORCE_STATIC_LIB</strong>, was eine makefile ergibt, die ungefähr so aussieht:</p>
+<pre>DEPTH		= ../../../../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+MODULE = myextension
+LIBRARY_NAME = myIntricate_s
+FORCE_STATIC_LIB = 1
+USE_STATIC_LIBS = 1
+
+XPI_NAME = myextension
+
+...more stuff here...
+</pre>
+<p><code><span style="font-family: Verdana,Tahoma,sans-serif;">B</span>uild</code> makefile fügt die statischen Bibliotheken zusammen, die von jedem Untermodul generiert worden sind und erstellt eine einzelne (dynamische) Komponentenbibiliothek:</p>
+<pre>DEPTH		= ../../../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+IS_COMPONENT = 1
+MODULE = myextension
+LIBRARY_NAME = myAdvanced
+USE_STATIC_LIBS = 1
+
+XPI_NAME = myextension
+
+DEFINES += XPCOM_GLUE
+
+SHARED_LIBRARY_LIBS = \
+		$(DIST)/lib/$(LIB_PREFIX)myIntricate_s.$(LIB_SUFFIX) \
+		$(DIST)/lib/$(LIB_PREFIX)myMultifarious_s.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)xpcomglue_s.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)xpcom.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)nspr4.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)plds4.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)plc4.$(LIB_SUFFIX) \
+		$(NULL)
+
+REQUIRES	= \
+		xpcom \
+		string \
+		$(NULL)
+
+CPPSRCS		= \
+		Advanced.cpp \
+		$(NULL)
+
+include $(topsrcdir)/config/rules.mk
+
+LOCAL_INCLUDES += \
+        -I$(srcdir)/../intricate/src \
+        -I$(srcdir)/../multifarious/src \
+        $(NULL)
+</pre>
+<p>Die makefile im <code>advanced/</code> Verzeichnis sollte die <code>intricate/</code>, <code>multifarious/</code> und <code>build/</code> Verzeichnisse in der <strong>DIRS</strong> Variable auflisten. Stellen Sie sicher, dass  <code>build/</code> als letztes genannt wird, da die Komponentenbibliothek nicht erstellt werden kann, solange die makefiles nicht komplett sind.</p>
+<h3 id="Weitere_Themen">Weitere Themen</h3>
+<h4 id="Data_Dateien_zur_Erweiterung_hinzufügen">Data Dateien zur Erweiterung hinzufügen</h4>
+<p>In einigen Fällen möchten Sie vielleicht zusätzliche Dateien zu Ihrer Erweiterung hinzufügen, die nicht in das <code>chrome/</code> Unterverzeichnis gehören. Beispiele sind Datenbankdateien oder XML-Schemata. Das erreicht werden, indem ein zusätzlicher Schritt zur makefile hinzugefügt wird, welcher diese Dateien in das Erweiterungsverzeichnis kopiert.</p>
+<h5 id="Data_Dateien_in_ein_Zielverzeichnis_kopieren">Data Dateien in ein Zielverzeichnis kopieren</h5>
+<p>Nehmen wir an, dass Sie einige Dateien mit statistischen Daten haben, die Sie in Ihre Erweiterung einfügen wollen und für Komponenten verfügbar machen wollen. Sie haben diese Datei mit der Endung .TXT in ein <code>stats/</code> Unterverzeichnis getan. Die folgende makefile Regel kann verwendet werden, um die Dateien zu kopieren:</p>
+<pre>export::
+	if test ! -d $(FINAL_TARGET)/stats; then \
+		$(NSINSTALL) -D $(FINAL_TARGET)/stats; \
+	fi
+	$(INSTALL) $(srcdir)/*.txt $(FINAL_TARGET)/stats
+</pre>
+<h5 id="Auf_Data_Dateien_über_Komponenten_zugreifen">Auf Data Dateien über Komponenten zugreifen</h5>
+<p>Der Trick, welcher Ihre Daten zugänglich macht, ist herauszufinden, wo Ihr Hauptverzeichnis Ihrer Erweiterung ist. Um das möglich zu machen, wird die  <code><a href="/de/XPCOM_Interface_Referenz/nsIExtensionManager" title="de/XPCOM Interface Referenz/nsIExtensionManager">nsIExtensionManager</a></code> Schnittstelle später benötigt. In der Zwischenzeit gibt es einen Hack, der das auf einfache Art und Weise ermöglicht. In der Implementierung von jeder JavaScript XPCOM Komponente gibt es ein spezielles <strong>__LOCATION__</strong> (zwei führenden und zwei schließende Unterstriche) Symbol, welches auf die Komponentenimplementierungsdatei zeigt. Sie können also eine einfache Komponente schreiben, die auf das Wurzelverzeichnis Ihrer Erweiterung rückschließt.</p>
+<p><a class="external" href="http://www.builderau.com.au/program/soa/Creating_XPCOM_components_with_JavaScript/0,39024614,39206503,00.htm">Dieser Artikel</a>(engl.) erklärt wie man eine XPCOM Komponente in JavaScript erstellt. Sie brauchen dazu eine IDL Datei für eine Schnittstelle, die ungefähr so aussieht:</p>
+<pre>interface myILocation : nsISupports
+{
+    readonly attribute nsIFile locationFile;
+};
+</pre>
+<p>Legen Sie die IDL Datei in <code>public/</code> Verzeichnis Ihres Projekts ab. Im <code>src/</code> Verzeichnis platzieren Sie die JavaScript Datei, die die Komponente implementiert. Die Komponentenimplementierung enthält Methoden, die den Pfad zum Hauptverzeichnis der Erweiterung abrufen können:</p>
+<pre>myLocation.prototype =
+{
+  QueryInterface: function(iid)
+  {
+    if (iid.equals(nsISupports))
+      return this;
+    if (iid.equals(myILocation))
+      return this;
+
+    Components.returnCode = Components.results.NS_ERROR_NO_INTERFACE;
+    return null;
+  },
+
+  get locationFile()
+  {
+     return __LOCATION__.parent.parent;
+  }
+}
+</pre>
+<p>Es wird angenommen, dass sich die Komponente in einem Unterverzeichnis des Erweiterungsverzeichnis befindet (das Verzeichnis wird <code>components/</code> genannt). Die Eigenschaft von <strong>__LOCATION__</strong> gibt das <code>components/</code> und das überliegende Verzeichnis, also das Hauptverzeichnis, zurück.</p>
+<p>Der letzte Schritt ist die makfile anzupassen, sodass die JavaScript Datei an die richtige Stelle kopiert wird:</p>
+<pre>export::
+	$(INSTALL) $(srcdir)/*.js $(FINAL_TARGET)/components
+</pre>
+<p>Jetzt können Sie eine Instanz dieser Komponente starten und die <code>locationFile</code> Eigenschaft verwenden, um eine <code><a href="/de/XPCOM_Interface_Referenz/nsIFile" title="de/XPCOM Interface Referenz/nsIFile">nsIFile</a></code> Schnittstelle, welche auf Ihr Hauptverzeichnis zeigt, zu bekommen.</p>
+<h4 id="Drittanbieter_Bibliotheken_verwenden">Drittanbieter Bibliotheken verwenden</h4>
+<p>Für anspruchsvollere Erweiterungen möchten Sie Drittanbieter Bibliotheken einbinden, die Ihnen spezialisierte Funktionen bieten, zum Beispiel für Datenbankverbindungen, Bildprozesse, Netzwerkoperationen und vielem mehr. Wenn Sie möchten, dass Ihre Erweiterungen unter Firefox auf allen Plattformen läuft, müssen Sie den Quelltext für die entsprechenden Bibliotheken haben.</p>
+<p>Der Beste Ansatz ist, eine makefile im Mozilla-style für diese Bibliothek zu erstellen. Das funktioniert gut für Bibliotheken, die keine intensive Konfiguration erfordern. Ein gutes Beispiel ist die SQLite Bibliothek im Mozilla Build Tree unter <code>db/sqlite</code>. Wenn die makefile so angepasst wird, wird die Bibliothek als des Standard Mozilla Build Prozesses erstellt, welches zusätzliches Schritte unnötig macht. Der Nachteil ist, dass Sie jedes Mal die geänderte makefile aktualisieren müssen, wenn eine neue Version der Bibliothek ausgeliefert wird.</p>
+<p>Bei Bibliotheken mit komplexen Konfigurationen, die keine Standard-Compiler verwenden oder andere speziellen Charakteristiken haben, kann es numgänglich sein, eine Mozilla-kompatible makefile zu erstellen. In diesem Fall würde ich empfehlen, dass Sie die komplette Bibliothek innerhalb des Projekts platzieren. Wenn die Bibliothek <code>acmelib</code> innerhalb des <code>multifarious/</code> Unterprojekts verwendet wird, würde diese als Unterverzeichnis unter diesem Unterprojekt auftauchen (auf dem gleichen Level wie <code>public/</code> und <code>src/</code>).</p>
+<p>Natürlich bedeutet das, dass Sie die Bibliothek <code>acmelib</code> manuell kompilieren müssen, bevor Sie das Mozilla Build starten. Aber immerhin können Sie sich auf die Dateien beziehen und Bibliotheken importieren, indem Sie relative Pfade verwenden.</p>
+<h4 id="Kompilierung_für_mehrere_Plattformen">Kompilierung für mehrere Plattformen</h4>
+<p>TODO</p>
+<div class="originaldocinfo">
+ <h2 id="Informationen_zum_Originaldokument">Informationen zum Originaldokument</h2>
+ <ul>
+  <li>Autor: Matthew Gertner - July 26, 2005.</li>
+  <li>Permission granted to migrate in Jan 2006, including permission to relicense under the CC:By-SA.</li>
+  <li>Originalquelle: <a class="external" href="http://www.allpeers.com/blog/creating-complex-firefox-extensions/" rel="freelink">http://www.allpeers.com/blog/creatin...ox-extensions/</a></li>
+ </ul>
+</div>
+<p> </p>
diff --git a/files/de/erweiterung_erstellen/index.html b/files/de/erweiterung_erstellen/index.html
new file mode 100644
index 0000000000..0dffbcec99
--- /dev/null
+++ b/files/de/erweiterung_erstellen/index.html
@@ -0,0 +1,249 @@
+---
+title: Erweiterung erstellen
+slug: Erweiterung_erstellen
+tags:
+  - Erweiterungen
+translation_of: Mozilla/Add-ons
+---
+<h4 id="Schnellstart">Schnellstart</h4>
+<div>
+  <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Sie können die <a class="link-https" href="https://addons.mozilla.org/de/developers/tools/builder">Add-on-Fabrik</a> aus der <a class="link-https" href="https://addons.mozilla.org/de/developers">Add-on Entwicklerecke</a> verwenden, um eine einfache Erweiterung als Grundlage für Ihre Arbeit zu erhalten. </p>
+  <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Eine ähnliche <a class="external" href="http://mozilla.doslash.org/stuff/helloworld.zip">Hello World Erweiterung</a> können Sie auch <a class="external" href="http://kb.mozillazine.org/Getting_started_with_extension_development">in einem weiteren Tutorial der MozillaZine Knowledge Base</a>(engl.) erstellen.</p>
+</div>
+<h4 id="Einführung">Einführung</h4>
+<p>Dieses Tutorial führt Sie durch die erforderlichen Schritte, um eine sehr einfache <a href="/de/Erweiterungen" title="de/Erweiterungen">Erweiterung</a> zu erstellen:<br>
+  Es wird der Statuszeile des Firefox ein Panel mit dem Text "Hallo, Welt!" hinzugefügt.</p>
+<div class="note">
+  <p><strong>Hinweis</strong>: Dieses Tutorial behandelt die Erstellung von Erweiterungen für Firefox <strong>1.5</strong> und später.  Weitere Tutorials existieren, falls Sie eine Erweiterung für eine frühere Version erstellen möchten.</p>
+  <p>Ein Tutorial zur Erstellung einer Erweiterung für Thunderbird findet sich unter "<a href="/en/Erweiterung/Thunderbird/Eine_Erweiterung_für_Thunderbird_erstellen" title="en/Erweiterung/Thunderbird/Eine Erweiterung für Thunderbird erstellen">Eine Erweiterung für Thunderbird erstellen</a>".</p>
+</div>
+<h4 id="Eine_Entwicklungsumgebung_einrichten">Eine Entwicklungsumgebung einrichten</h4>
+<p>Erweiterungen werden in ZIP Dateien mit der Endung ".xpi" (<em>“zippy” </em><em>ausgesprochen</em>) oder in <a href="/de/Bundles" title="de/Bundles">Bundles</a> verpackt und ausgeliefert.</p>
+<p>Ein Beispiel zum Aufbau einer typischen XPI Datein:</p>
+<pre class="eval">exampleExt.xpi:
+              /<a href="/de/Installationsmanifest" title="de/Installationsmanifest">install.rdf</a>
+              <a href="/de/Erweiterung_erstellen#XPCOM_Komponenten" title="de/Erweiterung erstellen#XPCOM Komponenten">/components/*</a>
+              <a href="/de/Erweiterung_erstellen#XPCOM_Komponenten" title="de/Erweiterung erstellen#XPCOM Komponenten">/components/cmdline.js</a>
+              <a href="/de/Erweiterung_erstellen#Default-Dateien" title="de/Erweiterung erstellen#Default-Dateien">/defaults/</a>
+              <a href="/de/Erweiterung_erstellen#Default-Dateien" title="de/Erweiterung erstellen#Default-Dateien">/defaults/preferences/*.js</a>
+              /plugins/*
+              /<a href="/de/Chrome-Registrierung" title="de/Chrome-Registrierung">chrome.manifest</a>
+              /<a href="/de/Fenster_Icons" title="de/Fenster Icons">chrome/icons/default/*</a>
+              /chrome/
+              /chrome/content/
+</pre>
+<p>Wir werden eine ähnliche Verzeichnisstruktur in diesem Tutorial verwenden. Fangen wir also damit an, einen Ordner für unsere Erweiterung zu erstellen. Das kann überall auf der Festplatte geschehen (z.B. <code>C:\erweiterungen\meine_erweiterung\</code> oder <code>~/erweiterungen/meine_erweiterung/</code>). In Ihrem neuem Erweiterungsordner erstellen Sie einen neuen Ordner, welcher "<code>chrome</code>" <code>genannt wird</code><span style="font-family: monospace;"> und innerhalb dieses Verzeichnisses wiederum erstellen Sie einen Ordner der "<code>content</code>" genannt wird</span>.</p>
+<p>Im <strong>Wurzelverzeichnis</strong> Ihres Erweiterungsverzeichnis erstellen Sie zwei leere Textdateien, genannt <code>chrome.manifest<span style="font-family: Verdana,Tahoma,sans-serif;"> und</span></code> <code>install.rdf</code>.<br>
+  Im <strong>chrome/content</strong> Verzeichnis erstellen Sie eine neue Textdatei, die Sie <code>sample.xul</code> nennen.</p>
+<p>Sie sollten nun diese Verzeichnisstruktur erstellt haben:</p>
+<pre>&lt;Erweiterungspfad&gt;\
+          install.rdf
+          chrome.manifest
+          chrome\
+             content\
+                sample.xul
+</pre>
+<p>Bitte lesen Sie die zusätzlichen Informationen zum <a href="/de/Einrichten_einer_Entwicklungsumgebung_für_Erweiterungen" title="de/Einrichten_einer_Entwicklungsumgebung_für_Erweiterungen">Einrichten einer Entwicklungsumgebung für Erweiterungen</a>.</p>
+<p>{{ gecko_minversion_note("1.9.2", "Ab Gecko 1.9.2 (Firefox 3.6) können Sie auch einfach ein Icon, welches <code>icon.png</code> heißt, in Wurzelverzeichnis des Add-ons packen. Dies erlaubt Ihnen die Anzeige Ihres Add-on Icons sogar wenn das Add-on deaktiviert ist oder wenn im Manifest kein Eintrag zur <code>iconURL</code> vorhanden ist.") }}</p>
+<h4 id="Das_Installationsmanifest_erstellen">Das Installationsmanifest erstellen</h4>
+<p>Öffnen Sie die Datei <code><a href="/de/Installationsmanifest" title="de/Installationsmanifest">install.rdf</a></code>, welche Sie am Anfang erstellt haben und schreiben Sie folgendes hinein:</p>
+<pre class="eval">&lt;?xml version="1.0"?&gt;
+
+&lt;RDF xmlns="<span class="nowiki"><a class="linkification-ext" href="http://www.w3.org/1999/02/22-rdf-syntax-ns#" title="Linkification: http://www.w3.org/1999/02/22-rdf-syntax-ns#">http://www.w3.org/1999/02/22-rdf-syntax-ns#</a></span>"
+     xmlns:em="<span class="nowiki"><a class="linkification-ext" href="http://www.mozilla.org/2004/em-rdf#" title="Linkification: http://www.mozilla.org/2004/em-rdf#">http://www.mozilla.org/2004/em-rdf#</a></span>"&gt;
+
+  &lt;Description about="urn:mozilla:install-manifest"&gt;
+    &lt;em:id&gt;<strong><a class="linkification-ext link-mailto" href="mailto:sample@example.net" title="Linkification: mailto:sample@example.net">sample@example.net</a></strong>&lt;/em:id&gt;
+    &lt;em:version&gt;<strong>1.0</strong>&lt;/em:version&gt;
+    &lt;em:type&gt;2&lt;/em:type&gt;
+
+    &lt;!-- Angaben zu unterstützten Anwendungsversionen --&gt;
+    &lt;em:targetApplication&gt;
+      &lt;Description&gt;
+        &lt;em:id&gt;<strong>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</strong>&lt;/em:id&gt;
+        &lt;em:minVersion&gt;<strong>1.5</strong>&lt;/em:minVersion&gt;
+        &lt;em:maxVersion&gt;<strong>3.6.*</strong>&lt;/em:maxVersion&gt;
+      &lt;/Description&gt;
+    &lt;/em:targetApplication&gt;
+
+    &lt;!-- Sichtbare Daten --&gt;
+    &lt;em:name&gt;<strong>sample</strong>&lt;/em:name&gt;
+    &lt;em:description&gt;<strong>A test extension</strong>&lt;/em:description&gt;
+    &lt;em:creator&gt;<strong>Your Name Here</strong>&lt;/em:creator&gt;
+    &lt;em:homepageURL&gt;<strong><span class="nowiki"><a class="linkification-ext" href="http://www.example.com/" title="Linkification: http://www.example.com/">http://www.example.com/</a></span></strong>&lt;/em:homepageURL&gt;
+  &lt;/Description&gt;
+&lt;/RDF&gt;
+</pre>
+<ul>
+  <li>&lt;em:id&gt;<a class="link-mailto" href="mailto:sample@example.net" rel="freelink">sample@example.net</a>&lt;/em:id&gt; - die ID der Erweiterung. Dies ist der Wert im Format einer E-Mail-Adresse, mit dem die Erweiterung identifiziert wird. Machen Sie diese einzigartig. Sie können auch eine GUID verwenden (Wenn die Erweiterung installiert ist, befindet sich in dem extension-Ordner in Ihrem Profilordner ein Ordner mit dem Namen der ID. In ihm befinden sich die Dateien der Erweiterung).</li>
+  <li><code>&lt;em:type&gt;2&lt;/em:type&gt;</code> - die Zwei zeigt an, dass hier eine Erweiterung beschrieben wird.  Wenn Sie ein Theme installieren würden, wäre dies eine 4 (siehe <a href="/de/Installationsmanifest#type" title="de/Installationsmanifest#type">Installationsmanifest#type</a> für weitere Typen).</li>
+  <li><strong>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</strong> - Anwendungs-ID von Firefox.</li>
+  <li><strong>1.5</strong> - die exakte Versionsnummer der frühsten Version von Firefox mit der diese Erweiterung läuft. Verwenden Sie niemals einen Stern (*) bei minVersion, es wird meist nicht das, was Sie erwarten.</li>
+  <li><strong>3.6.*</strong> - die höchste Version von Firefox von der Sie wissen, dass die Erweiterung damit funktioniert. Legen Sie keine höhere Version ein, als zur Zeit verfügbar ist! In diesem Fall gibt "3.6.*" an, dass die Erweiterung mit Firefox 3.6 und jeden 3.6.x Versionen funktioniert.</li>
+</ul>
+<p>(Wenn Sie eine Nachricht erhalten, dass Ihre install.rdf nicht korrekt formatiert ist, kann es hilfreich sein, die Datei über Datei-&gt;Öffnen zu öffnen, sodass XML Fehler angezeigt werden. In meinem Fall, hatte ich ein Leerzeichen vor "<span style="font-family: 'Courier New';">&lt;?xml</span>"...</p>
+<p>Erweiterungen, die mit Firefox 2.0.0.x funktionieren sollen, sollten die maximale Versione auf "2.0.0.*" setzen. Erweiterungen, die mit Firefox 1.5.0.x funktionieren sollten eine maximale Version von "1.5.0.*" festlegen.</p>
+<p>Siehe <a href="/de/Installationsmanifest" title="de/Installationsmanifest">Installationsmanifest</a> für eine komplette Liste von erforderlichen und optionalen Eigenschaften.</p>
+<p>Speichern Sie die Datei ab.</p>
+<h4 id="Den_Browser_durch_XUL_erweitern">Den Browser durch XUL erweitern</h4>
+<p>Die Benutzeroberfläche von Firefox ist in XUL und JavaScript geschrieben. <a href="/de/XUL" title="de/XUL">XUL</a> ist XML, welches Benutzeroberflächen-Widgets wie Schaltflächen, Menüs, Toolbars, etc. bereitstellt. Benutzeraktionen werden über JavaScript gesteuert.</p>
+<p>Um den Browser zu erweitern, werden wir Teile der Benutzeroberfläche des Browser ändern und Teile hinzufügen. Wir fügen Widgets hinzu, indem wir neue XUL DOM Elemente in das Browserfenster einbauen und diese verändern, indem Skripte die neuen Abläufe steuern.</p>
+<p>Der Browser wurde in einer XUL Datei namens <code>browser.xul</code> implementiert. (<code>$FIREFOX_INSTALLATIONSVERZEICHNIS/chrome/browser.jar</code> enthält <code>content/browser/browser.xul</code>).  In browser.xul können wir die Statusleiste finden, welche ungefähr so aussieht.:</p>
+<pre class="eval">&lt;statusbar id="status-bar"&gt;
+ ... &lt;statusbarpanel&gt;s ...
+&lt;/statusbar&gt;
+</pre>
+<p><code>&lt;statusbar id="status-bar"&gt;</code> ist ein "merge point" für ein XUL Overlay.</p>
+<h5 id="XUL_Overlays">XUL Overlays</h5>
+<p><a href="/de/XUL_Overlays" title="de/XUL Overlays">XUL Overlays</a> bieten eine Möglichkeit an, weitere UI Widgets an einem XUL Dokument anzuhängen, während das Programm läuft. Ein XUL Overlay ist eine .xul Datei, welche XUL Fragmente festlegt, um bestimmte "merge points" in einem "master" Dokument einzufügen. Diese Fragmente können Widgets festlegen, die eingefügt, entfernt oder verändert werden sollen.</p>
+<p><strong>Beispiel XUL Overlay Dokument</strong></p>
+<pre class="eval">&lt;?xml version="1.0"?&gt;
+&lt;overlay id="sample"
+         xmlns="<span class="nowiki"><a class="linkification-ext" href="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="Linkification: http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</a></span>"&gt;
+ &lt;statusbar id="<strong>status-bar</strong>"&gt;
+  &lt;statusbarpanel id="my-panel" label="Hello, World"  /&gt;
+ &lt;/statusbar&gt;
+&lt;/overlay&gt;
+</pre>
+<p>Die <code>&lt;statusbar&gt;</code> genannt <code><strong>status-bar</strong></code> legt den "merge point" im Browserfenster fest, die wir anhängen wollen.</p>
+<p>Das <code>&lt;statusbarpanel&gt;</code> Kindelement ist ein neues Widget, welches wir in den "merge point" einfügen wollen.</p>
+<p>Nehmen Sie diesen Beispielcode und speichern Sie ihn in eine Datei <code><strong>sample.xul</strong></code> in dem Verzeichnis <code>chrome/content</code>, welches Sie erstellt haben.</p>
+<p>Für weitere Informationen über das zusammenfügen von Widgets und der Veränderung an der Benutzeroberfläche mit Overlays, siehe weiter unten.</p>
+<h4 id="Chrome_URIs">Chrome URIs</h4>
+<p>XUL-Dateien sind Teil von „<a href="/de/Chrome_Registrierung" title="de/Chrome Registrierung">Chrome-Paketen</a>“, Bündeln von Komponenten der Benutzeroberfläche, die über <code>chrome://</code> URIs geladen werden. Diese URIs zu XUL-Inhalten wurden von den Mozilla-Entwicklern entworfen, um dem Problem zu entgehen, dass <code>file://</code> URIs von Plattform zu Plattform und von System zu System variieren. Die installierte Anwendung weiß auf diese Weise stets, wo sich mit <code>chrome://</code> angesprochene Dateien relativ zum Installationspfad befinden.</p>
+<p>Das Browser-Fenster ist: <code><a class="external" rel="freelink">chrome://browser/content/browser.xul</a></code> Versuchen Sie, diese URL in die Adressleiste von Firefox zu tippen! oder: <code><a class="external" rel="freelink">chrome://predatorIndex/$34#2/browser.xvp</a></code></p>
+<p>Chrome URIs bestehen aus verschiedenen Komponenten:</p>
+<ul>
+  <li>Zuerst dem <strong>URI Schema</strong> (<code>chrome</code>), das der Netzwerk-Bibliothek von Firefox sagt, dass dies eine Chrome URI ist, und dass deren Inhalt besonders behandelt werden muss.</li>
+  <li>Zweitens einem Paketnamen (im oberen Beispiel <code><strong>browser</strong></code>), der das Bündel der Komponenten der Benutzeroberfläche identifiziert. Dieser Paketname sollte so einzigartig wie möglich sein, um Konflikte zwischen verschiedenen Erweiterungen zu vermeiden.</li>
+  <li>Drittens dem Datentyp, der angefordert wird. Es gibt drei Typen: <code>content</code> (XUL, JavaScript, XBL bindings, etc., die Struktur und Verhalten der Anwendungsoberfläche bestimmen), <code>locale</code> (DTD, .properties-Dateien etc., die Zeichenketten für die <a href="/de/Lokalisierung" title="de/Lokalisierung">Lokalisierung</a> der Benutzeroberfläche enthalten), und <code>skin</code> (CSS und Bilder, die das <a href="/de/Themes" title="de/Themes">Thema</a> der Oberfläche bilden)</li>
+  <li>und zum Schluss dem Pfad der Datei, um sie zu laden.</li>
+</ul>
+<p>Somit lädt <code><a class="external" rel="freelink">chrome://foo/skin/bar.png</a></code> die Datei <code>bar.png</code> aus  <code>dem "foo"</code> Theme-Abschnitt <code>skin</code>.</p>
+<p>Wenn Sie Inhalt über eine Chrome URI laden, benutzt Firefox die Chrome Registry, um diese URIs in die tatsächlichen Quelldateien (oder in .jar-Pakete) zu übertragen.</p>
+<h4 id="Ein_Chrome-Manifest_erstellen">Ein Chrome-Manifest erstellen</h4>
+<p>Für weitere Informationen über Chrome Manifestdateien und die Eigenschaften, die diese unterstützen, siehe <a href="/de/Chrome_Registrierung" title="de/Chrome Registrierung">Chrome Manifest</a>.</p>
+<p>Öffnen Sie die Datei <strong>chrome.manifest</strong>, welche Sie im Wurzelverzeichnis Ihrer Erweiterung erstellt haben.</p>
+<p>Fügen Sie den folgenden Code hinzu:</p>
+<pre class="eval">content     sample    chrome/content/
+</pre>
+<p>(<strong>Achten Sie darauf den Trailing-Slash, "<code>/</code>" anzugeben!</strong> Ohne diesen wird das Paket nicht registriert.)</p>
+<p>Diese Zeile legt fest:</p>
+<ol>
+  <li>Typ des Materials innerhalb des Chrome-Pakets.</li>
+  <li>Name des Chrome-Pakets (stellen Sie sicher, dass Sie nur klein geschriebene Zeichen für den Paketnamen verwenden ("sample"), da Firefox/Thunderbird keine gemischten Zeichen in Version 2 und früher erkennen - {{ Bug(132183) }})</li>
+  <li>Ort der Dateien des Chrome-Pakets</li>
+</ol>
+<p>Diese Zeile sagt also, dass wir für das Chrome-Paket <strong>sample</strong>, die <strong>content</strong> Dateien unter <code>chrome/content</code> finden können.</p>
+<p>Beachten Sie, dass content, locale und skin Dateien in den Ordnern content, locale und skin in einem<code>chrome</code> Unterverzeichnis aufbewahrt werden müssen.</p>
+<p>Speichern Sie die Datei ab. Wenn Sie Firefox mit Ihrer Erweiterung starten (später in diesem Tutorial), wird dies das Chrome-Paket registrieren.</p>
+<h4 id="Overlay_registrieren">Overlay registrieren</h4>
+<p>Firefox muss Ihr Overlay mit dem Browserfenster zusammenfügen, wenn eines angezeigt wird. Fügen Sie daher die folgende Zeile in Ihre <code>chrome.manifest</code> Datei:</p>
+<pre class="eval">overlay <a class="external" rel="freelink">chrome://browser/content/browser.xul</a> <a class="external" rel="freelink">chrome://sample/content/sample.xul</a>
+</pre>
+<p>Das teilt Firefox mit, <code>sample.xul</code> mit <code>browser.xul</code> zusammenzufügen, wenn <code>browser.xul</code> geladen wird.</p>
+<h4 id="Testen">Testen</h4>
+<p>Zunächst müssen wir Firefox von Ihrer Erweiterung erzählen. Während der Entwicklungsphase für Firefox 2.0 und höher, können Sie Firefox das Verzeichnis mitteilen, in welchem Sie Ihre Erweiterung entwickeln, sodass diese jedes Mal, wenn Sie Firefox neu starten, geladen wird.</p>
+<ol>
+  <li>Wechseln Sie zum <a class="external" href="http://kb.mozillazine.org/Profile_folder" title="http://kb.mozillazine.org/Profile_folder">Profilordner</a> und darunter in das Profil, in welchem Sie arbeiten möchten (z.B. <code>Firefox/Profiles/&lt;profile_id&gt;.default/</code>).</li>
+  <li>Öffnen Sie das Verzeichnis "<code>extensions/</code>" oder erstellen Sie dieses, wenn es erforderlich ist.</li>
+  <li>Erstellen Sie eine neue Textdatei und schreiben Sie den kompletten Pfad zu Ihrem Entwicklungsverzeichnis hinein (z.B. <code>C:\extensions\my_extension\</code> oder <code>~/extensions/my_extension/)</code>. Windows Benutzer sollten auf die Slash-Richtung achten und <em>jeder</em>sollte daran denken einen schließenden Slash anzuhängen und jedes Leerzeichen zu entfernen.</li>
+  <li>Speichen Sie die Datei mit der ID Ihrer Erweiterung als Namen ab (z.B. <code><a class="linkification-ext link-mailto" href="mailto:sample@example.net" title="Linkification: mailto:sample@example.net">sample@example.net</a></code>). Keine Dateiendung.</li>
+</ol>
+<p>Jetzt sollten Sie soweit sein, um einen ersten Test Ihrer Erweiterung durchführen zu können!</p>
+<p>Starten Sie Firefox. Firefox wird den Textlink zu Ihrer Erweiterung erkennen und die Erweiterung installieren. Wenn das Browserfenster angezeigt wird, sollten Sie den Text "Hello, World!" auf der rechten Seite der Statusleiste sehen.</p>
+<p>Nun können Sie zurück zur .xul Datei gehen, Änderungen vornehmen, Firefox schließen und neu starten und Ihre Änderungen betrachten.</p>
+<h4 id="Packen">Packen</h4>
+<p>Jetzt, wo die Erweiterung funktioniert, können Sie diese zur Installation und Verwendung <a href="/de/Packen_von_Erweiterungen" title="de/Packen von Erweiterungen">packen</a>.</p>
+<p>Zippen Sie die <strong>Inhalte</strong> Ihres Erweiterungsverzeichnis (nicht den Ordner Ihrer Erweiterung selbst) und benennen Sie die .zip Datei in eine .xpi Datei um. Unter Windows XP können Sie einfach alle Dateien und Unterordner im Ordner markieren, Rechts-Klick drücken und "Senden an -&gt; Komprimierter Ordner" wählen. Eine .zip Datei wird für Sie erstellt. Jetzt müssen Sie diese nur noch umbenennen und Sie sind fertig!</p>
+<p>Unter Mac OS X, können Sie mit einem Rechts-Klick auf die <strong>Inhalte</strong> Ihres Erweiterungsordners klicken und "Erstelle Archiv von..." wählen, um die .zip Datei zu erstellen. Mac OS X fügt jedoch versteckte Dateien in Ordnern hinzu, sodass Sie das Terminal verwenden sollten, um die versteckten Dateien zu löschen (solche die mit einem Punkt beginnen) und dann den <code>zip</code> Befehl verwenden, um die .zip Datei zu erstellen.</p>
+<p>Unter Linux verwenden Sie womöglich auch das Kommandozeilen ZIP-Tool.</p>
+<p>Falls Sie die 'Extension Builder' Erweiterung installiert haben, kann diese die .xpi Datei für Sie kompilieren (Tools -&gt; Extension Developer -&gt; Extension Builder). Wechseln Sie einfach zum Verzeichnis, wo sich Ihre Erweiterung befindet (install.rdf etc.) und drücken Sie auf die Schaltfläche 'Build Extension'. Diese Erweiterung verfügt über eine Menge weiterer Tools, die die Entwicklung vereinfacht.</p>
+<p>Laden Sie nun die .xpi Datei auf Ihren Server uns stellen Sie sicher, dass diese als <code>application/x-xpinstall</code> ausgeliefert wird. Sie können darauf verweisen und anderen erlauben die Erweiterung herunterzuladen und zu installieren. Zu Testzwecken können wir die Datei einfach in das Erweiterungsfenster über "Tools -&gt; Erweiterungen in Firefox 1.5.0.x" oder "Tools -&gt; Add-ons in späteren Versionen" hineinziehen.</p>
+<h5 id="Installation_von_einer_Webseite">Installation von einer Webseite</h5>
+<p>Es gibt unterschiedliche Wege, die es ermöglichen eine Erweiterung von Webseiten zu installieren, darunter das direkte Verweisen auf die XPI Dateien und die Benutzung des InstallTrigger Objekts. Erweiterungs- und Webautoren werden dazu aufgefordert die <a href="/de/Erweiterungen_und_Themes_von_Webseiten_installieren" title="de/Erweiterungen und Themes von Webseiten installieren"> InstallTrigger Methode</a> zu verwenden, um XPIs zu installieren, weil es für Benutzer am Besten ist.</p>
+<h5 id="Verwendung_von_addons.mozilla.org">Verwendung von addons.mozilla.org</h5>
+<p>Mozilla Add-ons ist eine Vertriebsseite auf der Sie Ihre Erweiterungen kostenlos bereitstellen können. Ihre Erweiterung wird auf Mozillas Mirror-Netzwerk gehostet, um sicherzustellen, dass Ihr Download verfügbar ist, selbst wenn Ihre Erweiterung sehr beliebt ist. Mozillas Add-on-Seite ermöglicht außerdem eine einfachere Installation und stellt Benutzern automatisch neuere Versionen bereit, wenn Sie Ihre Erweiterung aktualisieren. Zusätzlich erlauben Mozilla Add-ons Benutzern Kommentare und Feedback zu Ihrer Erweiterung zu hinterlassen. Es wird empfohlen, dass Sie Ihre Erweiterung über addons.mozilla.org vertreiben!</p>
+<p>Besuchen Sie <a class="linkification-ext external" href="http://addons.mozilla.org/de/developers/" title="http://addons.mozilla.org/de/developers/">http://addons.mozilla.org/de/developers/</a>, um einen Account zu erstellen und Ihre Erweiterung dort zu vertreiben!</p>
+<p><em>Hinweis:</em> Ihre Erweiterung wird weiter verbreitet und mehr heruntergeladen, wenn Sie eine gute Beschreibung angeben und einige Screenshot von der Erweiterung in Aktion bereitstellen.</p>
+<h5 id="Erweiterungen_über_einen_separaten_Installer_installieren">Erweiterungen über einen separaten Installer installieren</h5>
+<p>Es ist möglich, eine Erweiterung in einem speziellem Verzeichnis zu installieren, sodass diese automatisch beim nächsten Start installiert wird. Die Erweiterung ist dann für jedes Profil verfügbar. Siehe <a class="internal" href="/de/Erweiterungen_installieren" title="de/Erweiterungen installieren">Erweiterungen installieren</a> für weitere Informationen.</p>
+<p>Unter Windows, können Informationen über Erweiterungen der Registrierung hinzugefügt werden und die Erweiterung wird automatisch beim nächsten Start der Anwendung installiert. Das erlaubt Anwendungsinstallationen einfach Erweiterungen mit zu installieren. Siehe <a href="/de/Erweiterungen_über_die_Windows_Registrierung_hinzufügen" title="de/Erweiterungen über die Windows Registrierung hinzufügen">Erweiterungen über die Windows Registrierung hinzufügen</a> für weitere Informationen.</p>
+<h4 id="Weiteres_zu_XUL_Overlays">Weiteres zu XUL Overlays</h4>
+<p>Zusätzlich zu UI Widgets können Sie XUL Fragmente innerhalb von Overlays benutzen um:</p>
+<ul>
+  <li>Attribute zu verändern, z.B. <code>&lt;statusbar id="status-bar" hidden="true" /&gt;</code> (versteckt die Statusleiste)</li>
+  <li>Den "merge point" vom Dokument zu entfernen, z.B. <code>&lt;statusbar id="status-bar" removeelement="true" /&gt;</code></li>
+  <li>Die Position von eingefügten Widgets zu steuern:</li>
+</ul>
+<pre class="eval">&lt;statusbarpanel position="1" ...  /&gt;
+
+&lt;statusbarpanel insertbefore="other-id" ...  /&gt;
+
+&lt;statusbarpanel insertafter="other-id" ...  /&gt;
+</pre>
+<h4 id="Neue_Elemente_zur_Benutzeroberfläche_hinzufügen">Neue Elemente zur Benutzeroberfläche hinzufügen</h4>
+<p>Sie können eigene Fenster und Dialogboxen als separate .xul Dateien erstellen, Funktionen über Aktionen in .js Dateien implementieren und DOM Methoden verwenden, um UI Widgets zu verändern. Sie können Style Regeln .css Dateien verwenden, um Bilder anzuhängen und Farben festzulegen etc.</p>
+<p>Schauen Sie in die <a href="/de/XUL" title="de/XUL">XUL</a> Dokumentation für weitere Ressourcen für XUL Entwickler.</p>
+<h4 id="Default-Dateien">Default-Dateien</h4>
+<p>Default-Dataien, welche Sie in ein Benutzerprofil platzieren, sollten in dem Verzeichnis <code>defaults/</code> unter dem Wurzelverzeichnis der Erweiterung abgelegt werden. Standard preferences .js Dateien sollten in <code>defaults/preferences/</code> gespeichert werden - wenn Sie diese dort platzieren, werden Sie automatisch von Firefox geladen, sodass Sie Zugang über <a href="/de/Preferences_API" title="de/Preferences API">Preferences API</a> haben.</p>
+<p>Eine Beispiel für eine default preference Datei:</p>
+<pre class="eval">pref("extensions.sample.username", "Joe"); //a string pref
+pref("extensions.sample.sort", 2); //an int pref
+pref("extensions.sample.showAdvanced", true); //a boolean pref
+</pre>
+<h4 id="XPCOM_Komponenten">XPCOM Komponenten</h4>
+<p>Firefox unterstützt <a href="/de/XPCOM" title="de/XPCOM">XPCOM</a> Komponenten für Erweiterungen. Sie können Ihre eigenen Komponenten in JavaScript oder in C++ erstellen (unter Verwendung der <a href="/de/Gecko_SDK" title="de/Gecko SDK">Gecko SDK</a>).</p>
+<p>Platzieren Sie alle .js oder .dll Dateien in das Verzeichnis "<code>components/</code>" - die Komponenten werden automatisch registriert, wenn Firefox das erste Mal nach der Installation Ihrer Anwendung gestartet wird.</p>
+<p>Für weitere Informationen siehe <a href="/de/XPCOM_Komponenten_in_JavaScript" title="de/XPCOM Komponenten in JavaScript">XPCOM Komponenten in JavaScript</a>, <a href="/de/Eine_binäre_XPCOM_Komponente_über_Visual_Studio_erstellen" title="de/Eine binäre XPCOM Komponente über Visual Studio erstellen">Eine binäre XPCOM Komponente über Visual Studio erstellen</a> und <a href="/de/XPCOM_Komponenten_erstellen" title="de/XPCOM Komponenten erstellen">XPCOM Komponenten erstellen</a>.</p>
+<h5 id="Kommandozeile_der_Anwendung">Kommandozeile der Anwendung</h5>
+<p>Eine der möglichen Verwendungsmöglichkeiten von XPCOM Komponenten, ist das Hinzufügen von einem Kommandozeilen-Handler für Firefox oder Thunderbird. Sie können diese Technik verwenden, um Ihre Erweiterung als eine Anwendung laufen zu lassen:</p>
+<pre class="eval"> firefox.exe -myapp
+</pre>
+<p>Siehe <a href="/de/Chrome/Command_Line" title="de/Chrome/Command Line">Chrome: Command Line</a> und diese <a class="external" href="http://forums.mozillazine.org/viewtopic.php?t=365297">Forendiskussion</a> für Details.</p>
+<h4 id="Lokalisierung">Lokalisierung</h4>
+<p>Um mehr als eine Sprache zu unterstützen, sollten Sie Strings aus Ihrem Inhalt über <a href="/de/XUL_Tutorial/Lokalisierung" title="de/XUL Tutorial/Lokalisierung">Entities</a> und <a href="/de/XUL_Tutorial/Property-Dateien" title="de/XUL Tutorial/Property-Dateien">String Bundles</a> aufteilen. Es ist viel einfacher, dies schon während der Entwicklung der Erweiterung zu tun, als es später mühsam zu ändern!</p>
+<p>Informationen zur Lokalisierung wird im "locale" Verzeichnis der Erweiterung gespeichert. Um zum Beispiel eine Sprache zu unserer Beispiel-Erweiterung hinzuzufügen, erstellen Sie ein Verzeichnis "locale" im Chrome-Ordner (wo sich das "content" Verzeichnis befindet) und fügen die folgende Zeile in Ihre chrome.manifest Datei hinzu:</p>
+<pre class="eval">locale sample en-US chrome/locale/en-US/
+</pre>
+<p>Um lokalisierbare Attributwerte in XUL zu erstellen, speichern Sie die Werte in eine <code>.dtd</code> Datei, welche in den "locale" Ordner kommt und so aussieht:</p>
+<pre class="eval">&lt;!ENTITY  button.label     "Click Me!"&gt;
+&lt;!ENTITY  button.accesskey "C"&gt;
+</pre>
+<p>Fügen diese Sie dann am Anfang Ihres XUL Dokument (aber unter dem "&lt;?xml version"1.0"?&gt;") so hinzu:</p>
+<pre class="eval">&lt;!DOCTYPE <strong>window</strong> SYSTEM "<a class="external" rel="freelink">chrome://packagename/locale/filename.dtd</a>"&gt;
+</pre>
+<p>wobei <code><strong>window</strong></code> der Wert von <code><a href="/de/DOM/Node.localName" title="de/DOM/Node.localName">localName</a></code> des Wurzelements der XUL Dokuments ist und der Wert der <code>SYSTEM</code> Eigenschaft die Chrome-URI zur Entity-Datei darstellt. Für unsere Beispiel-Erweiterung ist das Wurzelelement das <code><strong>overlay</strong></code>.</p>
+<p>Um die Entities zu verwenden, ändern Sie Ihr XUL wie folgt:</p>
+<pre class="eval">&lt;button label="&amp;button.label;" accesskey="&amp;button.accesskey;"  /&gt;
+</pre>
+<p>Die Chrome Registrierung wird sicher stellen, dass die Entity-Datei vom Lokalisierungs-Bundle passend zur ausgewählten Sprache geladen wird.</p>
+<p>Für Strings, die Sie in Skripten verwenden, erstellen Sie eine .properties Datei, eine Textdatei, die einen String pro Zeile in diesem Format bereitstellt:</p>
+<pre class="eval">key=value
+</pre>
+<p>und dann verwenden Sie <code><a href="/de/NsIStringBundleService" title="de/NsIStringBundleService">nsIStringBundleService</a></code>/<code><a href="/de/XPCOM_Interface_Referenz/nsIStringBundle" title="de/XPCOM Interface Referenz/nsIStringBundle">nsIStringBundle</a></code> oder den <code><a href="/de/XUL/stringbundle" title="de/XUL/stringbundle">&lt;stringbundle&gt;</a></code> Tag, um die Werte im Skript zu laden.</p>
+<h4 id="Den_Browser_verstehen">Den Browser verstehen</h4>
+<p>Verwenden Sie den <a href="/de/DOM_Inspector" title="de/DOM Inspector">DOM Inspector</a> um das Browserfenster oder ein anderes XUL Fenster, welches Sie erweitern, zu betrachten.</p>
+<p><strong>Hinweis:</strong> <strong>DOM Inspector</strong> ist nicht Teil der <strong>Standard</strong> Firefox installation. Seit Firefox 3 Beta 4 ist der DOM Inspector auf <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622">Firefox Add-ons</a> als eine eigenständige Erweiterung verfügbar. Für frühere Versionen müssen Sie mit einem benutzerdefinierten Pfad neu installieren und <strong>DOM Inspector</strong> (oder <strong>Developer Tools</strong> in Firefox 1.5) wählen, wenn kein "DOM Inspector" in Ihrem Tools-Menüs verfügbar ist.</p>
+<h4 id="Erweiterungen_debuggen">Erweiterungen debuggen</h4>
+<p><strong>Analytische Tools zum Debugging</strong></p>
+<ul>
+  <li>Der <a href="/de/DOM_Inspector" title="de/DOM Inspector">DOM Inspector</a> - Attribute, DOM Struktur, CSS Regeln betrachten (z.B. herausfinden, warum Style Regeln nicht auf ein Element wirken - ein wertvolles Tool!).</li>
+  <li><a href="/de/Venkman" title="de/Venkman">Venkman</a> - Setzt z.B. Breakpoints in JavaScript.</li>
+  <li><code><a href="/de/Core_JavaScript_1.5_Referenz/Funktionen_und_Funktionsbereiche/arguments/callee" title="de/Core JavaScript 1.5 Referenz/Funktionen und Funktionsbereiche/arguments/callee">arguments.callee</a>.<a href="/de/Core_JavaScript_1.5_Referenz/Globale_Objekte/Funktion/caller" title="de/Core JavaScript 1.5 Referenz/Globale Objekte/Funktion/caller">caller</a></code> in JavaScript - Zugang zum Aufrufsstapel einer Funktion.</li>
+</ul>
+<p><strong>printf Debugging</strong></p>
+<ul>
+  <li>Verwenden Sie <code><a href="/de/DOM/window.dump" title="de/DOM/window.dump">dump</a>("string")</code> (siehe Link für mehr Details; dies erfordert ein wenig Konfigurationsarbeit).</li>
+  <li>Verwenden Sie <code><a href="/de/Components.utils.reportError" title="de/Components.utils.reportError">Components.utils.reportError()</a></code> oder <code><a href="/de/nsIConsoleService" title="de/nsIConsoleService">nsIConsoleService</a></code>, um die JavaScript Konsole aufzuzeichnen.</li>
+</ul>
+<p><strong>Fortgeschrittenes Debugging</strong></p>
+<ul>
+  <li>Starten Sie ein Firefox Debug-Build und setzen Sie Breakpoints für Firefox selbst oder Ihre C++ Komponenten. Für die erfahrenen Entwickler ist dies meist der schnellste Weg, um ein Problem zu erkennen. Siehe <a href="/de/Entwicklerhandbuch/Build_Anweisungen" title="de/Entwicklerhandbuch/Build Anweisungen">Build Anweisungen</a> und <a href="/de/Entwicklerhandbuch" title="de/Entwicklerhandbuch">Entwicklerhandbuch</a> für weitere Informationen.</li>
+  <li>Siehe <a href="/de/Eine_XULRunner_Anwendung_debuggen" title="de/Eine XULRunner Anwendung debuggen">Eine XULRunner Anwendung debuggen</a> für weitere hilfreiche Tipps.</li>
+</ul>
+<h3 id="Weitere_Informationen">Weitere Informationen</h3>
+<ul>
+  <li><a href="/de/Erweiterungen_FAQ" title="de/Erweiterungen FAQ">Erweiterungen FAQ</a></li>
+  <li><a href="/de/Erweiterungen" title="de/Erweiterungen">Erweiterungen</a></li>
+</ul>
diff --git a/files/de/erweiterungen/index.html b/files/de/erweiterungen/index.html
new file mode 100644
index 0000000000..2973c54641
--- /dev/null
+++ b/files/de/erweiterungen/index.html
@@ -0,0 +1,94 @@
+---
+title: Erweiterungen
+slug: Erweiterungen
+tags:
+  - Erweiterungen
+translation_of: Mozilla/Add-ons
+---
+<div class="callout-box">
+  <strong><a href="/de/docs/Erweiterung_erstellen" title="Erweiterung_erstellen">Erweiterung erstellen</a></strong><br>
+  Erklärt Schritt für Schritt, wie eine Firefox Erweiterung erstellt wird.</div>
+<div>
+  <p><strong>Erweiterungen</strong> fügen Mozilla Applikationen wie Firefox und Thunderbird neue Funktionalitäten hinzu. Von einem einzelnen Button für die Symbolleiste, bis zu einem komplett neuem Feature können unterschiedlichste Funktionen hinzugefügt werden. Erweiterungen erlauben es, die Anwendung den benutzerspezifischen Anforderungen anzupassen während die Downloadgröße klein gehalten wird.</p>
+  <p>Erweiterungen unterscheiden sich von <a href="/de/docs/Plugins" title="Plugins">Plugins</a>, welche dem Browser helfen, bestimmte Inhalte wie beispielweise Multimedia Dateien anzuzeigen. Erweiterungen unterscheiden sich außerdem auch von <a href="/de/docs/OpenSearch_Plugin_für_Firefox_erstellen" title="OpenSearch_Plugin_für_Firefox_erstellen">Suchplugins</a>, welche zusätzliche Suchmaschinen zur Suchleiste hinzufügen.</p>
+</div>
+<table class="topicpage-table">
+  <tbody>
+    <tr>
+      <td>
+        <h2 class="Documentation" id="Dokumentation" name="Dokumentation">Dokumentation</h2>
+        <dl>
+          <dt>
+            <a href="/de/docs/Einrichten_einer_Entwicklungsumgebung_für_Erweiterungen" title="Einrichten_einer_Entwicklungsumgebung_für_Erweiterungen">Einrichten einer Entwicklungsumgebung für Erweiterungen</a></dt>
+          <dd>
+            Ein paar grundlegende Tipps für die Einrichtung, die die Entwicklung von Erweiterungen vereinfachen.</dd>
+          <dt>
+            <a href="/de/docs/Erweiterungen/Bootstrapped_Extensions" title="Erweiterungen/Bootstrapped_Extensions">Bootstrapped Extensions</a> {{ gecko_minversion_inline("2.0") }}</dt>
+          <dd>
+            Wie man Erweiterungen erstellt, die installiert, deinstalliert und aktualisiert werden können ohne, dass ein Neustart der Anwendung erforderlich ist.</dd>
+          <dt>
+            <a href="/de/docs/XUL_School" title="XUL School">XUL School Tutorial</a></dt>
+          <dd>
+            Ein umfassendes Tutorial zur Entwicklung von Erweiterungen.</dd>
+          <dt>
+            <a href="/de/docs/Erweiterung_erstellen" title="Erweiterung erstellen">Erweiterung erstellen</a></dt>
+          <dd>
+            Dies soll eine kleine Einführung darstellen, wie man einfachste Erweiterungen für den Firefox erstellt.</dd>
+          <dt>
+            <a href="/de/docs/Sicherheit_von_Erweiterungen" title="Sicherheit von Erweiterungen">Sicherheit von Erweiterungen</a></dt>
+          <dd>
+            Leitfaden, um die Sicherheit von Erweiterungen zu gewährleisten.</dd>
+          <dt>
+            <a href="/de/docs/Erweiterungen/Performance_von_Erweiterungen" title="Erweiterungen/Performance_von_Erweiterungen">Performance von Erweiterungen</a></dt>
+          <dd>
+            Wie Erweiterungen erstellt werden, die schnell sind und nicht die Performance der Anwendung beeinträchtigen.</dd>
+          <dt>
+            <a href="/de/docs/Packen_von_Erweiterungen" title="Packen_von_Erweiterungen">Packen von Erweiterungen</a></dt>
+          <dd>
+            Beschreibung, wie die Firefox Erweiterung für Download und Installation gepackt wird.</dd>
+          <dt>
+            <a href="/de/docs/Erweiterungen_installieren" title="Erweiterungen_installieren">Erweiterungen installieren</a></dt>
+          <dd>
+            Wie Erweiterungen programmgesteuert installiert werden können.</dd>
+          <dt>
+            <a href="/de/docs/Ein_Add-On_auf_AMO_anbieten" title="Ein_Add-On_auf_AMO_anbieten">Ein Add-On auf AMO anbieten</a></dt>
+          <dd>
+            Wie man ein Add-On auf AMO veröffentlichen kann.</dd>
+          <dt>
+            <a href="/de/docs/Erweiterungen_FAQ" title="Erweiterungen_FAQ">Häufig gestellte Fragen zu Erweiterungen</a></dt>
+          <dd>
+            Häufige Fragen und Antworten über die Entwicklung von Erweiterungen</dd>
+        </dl>
+        <p><a href="/de/docs/Erweiterungen/Firefox" title="Erweiterungen/Firefox"><strong>Firefox</strong></a></p>
+        <p><a href="/de/docs/Erweiterungen/Thunderbird" title="Erweiterungen/Thunderbird"><strong>Thunderbird</strong></a></p>
+        <p><a href="/de/docs/Erweiterungen/SeaMonkey" title="Erweiterungen/SeaMonkey"><strong>SeaMonkey</strong></a> (<a href="/de/docs/Unterstützung_von_Erweiterungen_in_SeaMonkey_2" title="Unterstützung_von_Erweiterungen_in_SeaMonkey_2">Unterstützung von Erweiterungen in SeaMonkey 2</a>)</p>
+        <p><a class="external" href="http://starkravingfinkle.org/blog/2009/05/resources-for-fennec-add-on-developers/" title="http://starkravingfinkle.org/blog/2009/05/resources-for-fennec-add-on-developers/"><strong>Fennec</strong></a> (Mobiler Browser)</p>
+        <p><span class="alllinks"><a href="/de/docs/tag/Erweiterungen" title="Erweiterungen">alles anzeigen...</a></span></p>
+      </td>
+      <td>
+        <h2 class="Community" id="Community" name="Community">Community</h2>
+        <ul>
+          <li>Mozillas Extension Foren:{{ DiscussionList("dev-extensions", "mozilla.dev.extensions") }}</li>
+          <li><a class="link-irc" href="irc://irc.mozilla.org/extdev">#extdev IRC Channel</a></li>
+          <li><a class="external" href="http://forums.mozillazine.org/?c=11">MozillaZine Forum</a></li>
+          <li><a href="/de/docs/Erweiterungen/Community" title="Erweiterungen/Community">weitere Community Links</a></li>
+        </ul>
+        <h2 class="Tools" id="Tools" name="Tools">Tools</h2>
+        <ul>
+          <li><a class="external" href="http://ted.mielczarek.org/code/mozilla/extensiondev/">Extension Developer's Erweiterung</a> - Kombiniert viele grundlegende Entwicklungswerkzeuge</li>
+          <li><a href="/de/docs/DOM_Inspector" title="DOM_Inspector">DOM Inspector</a> - Inspiziert den chrome DOM Tree</li>
+          <li><a href="/de/docs/Venkman" title="Venkman">Venkman</a> - Ein JavaScript Debugger</li>
+          <li><a class="link-https" href="https://builder.mozillalabs.com/">Mozilla Labs Add-on Builder</a></li>
+          <li><a class="external" href="http://ted.mielczarek.org/code/mozilla/extensionwiz/">Extension Wizard</a> - Erstellt ein Grundgerüst für eine Erweiterung</li>
+          <li><a class="external" href="http://www.spket.com/">Spket IDE</a> - IDE zur Erweiterungsentwicklung</li>
+          <li><a href="/de/docs/JavaScript_Shells" title="JavaScript_Shells">JavaScript Shells</a> - Test Snippets von JavaScript</li>
+          <li><a href="/de/docs/tag/Erweiterungen:Tools" title="Erweiterungen:Tools">...weitere Tools</a></li>
+        </ul>
+        <h2 class="Related_Topics" id="Verwandte_Themen" name="Verwandte_Themen">Verwandte Themen</h2>
+        <ul>
+          <li><a href="/de/docs/XUL" title="XUL">XUL</a>, <a href="/de/docs/JavaScript" title="JavaScript">JavaScript</a>, <a href="/de/docs/XPCOM" title="XPCOM">XPCOM</a>, <a href="/de/docs/Themes" title="Themes">Themes</a>, <a href="/de/docs/Mozilla_Entwicklung" title="Mozilla_Entwicklung">Mozilla Entwicklung</a></li>
+        </ul>
+      </td>
+    </tr>
+  </tbody>
+</table>
diff --git a/files/de/erweiterungen_faq/index.html b/files/de/erweiterungen_faq/index.html
new file mode 100644
index 0000000000..7b158c3814
--- /dev/null
+++ b/files/de/erweiterungen_faq/index.html
@@ -0,0 +1,57 @@
+---
+title: Erweiterungen FAQ
+slug: Erweiterungen_FAQ
+tags:
+  - Erweiterungen
+translation_of: Archive/Mozilla/Extension_Frequently_Asked_Questions
+---
+<p>Dies ist eine Sammlung mit häufig gestellten Fragen zur Entwicklung von <a href="/de/Erweiterungen" title="de/Erweiterungen">Erweiterungen</a>. Die meisten werden derzeit wohl für den Firefox geschrieben. Viele, wenn nicht sogar alle, sollten relativ einfach an SeaMonkey, Thunderbird oder jede andere Anwendung angepasst werden können. Für Thunderbird gibt es außerdem <a href="/editor/fckeditor/core/editor/de/Erweiterungen/Thunderbird/HowTos">HowTos</a> sowie weitere <a href="/editor/fckeditor/core/editor/de/Erweiterungen/Thunderbird/FAQ">FAQs</a>.</p>
+<p>Falls Sie sich fragen, wo Sie am besten beginnen sollten, versuchen Sie es mit unserem Tutorial <a href="/de/Erweiterung_erstellen" title="de/Erweiterung_erstellen">Erweiterung_erstellen</a> oder dem <a class="external" href="http://kb.mozillazine.org/Getting_started_with_extension_development">Getting started Tutorial auf MozillaZine </a>. Sie können den <a class="external" href="http://ted.mielczarek.org/code/mozilla/extensionwiz/">Extension Wizard</a> benutzen, um ein Template für den ersten Start zu erstellen.</p>
+<p>Richten Sie sich außerdem eine <a href="/de/Einrichten_einer_Entwicklungsumgebung_f%C3%BCr_Erweiterungen" title="de/Einrichten_einer_Entwicklungsumgebung_für_Erweiterungen"> Entwicklungsumgebung</a> ein.</p>
+<h3 id="Debuggen">Debuggen</h3>
+<p>Sie sollten eine <a href="/de/Einrichten_einer_Entwicklungsumgebung_f%C3%BCr_Erweiterungen" title="de/Einrichten_einer_Entwicklungsumgebung_für_Erweiterungen"> Entwicklungsumgebung</a> einrichten bevor Sie versuchen eine Erweiterung zu debuggen.</p>
+<p>Der <a href="/editor/fckeditor/core/editor/de/Venkman">Venkman JavaScript Debugger</a> sollte in schwierigen Fällen nützlich sein. Vergessen Sie dabei nicht die "Debug -&gt; Exclude Browser Files" Option zu deaktivieren, wenn Sie an einer Erweiterung arbeiten.</p>
+<h4 id="Wie_finde_ich_Fehler_in_meinem_Code">Wie finde ich Fehler in meinem Code?</h4>
+<p>Wenn die <a href="/de/Einrichten_einer_Entwicklungsumgebung_f%C3%BCr_Erweiterungen" title="de/Einrichten_einer_Entwicklungsumgebung_für_Erweiterungen"> Option <em>javascript.options.showInConsole</em></a> auf <em>true</em> eingestellt ist werden alle Fehler in der <a href="/de/Fehlerkonsole" title="de/Fehlerkonsole">Fehlerkonsole</a> gemeldet. Wenn alle JavaScriptfehler in der Konsole geloggt werden, ist es einfacher die Bugs im Code zu verfolgen.</p>
+<h4 id="Wie_kann_ich_den_Ablauf_meiner_Erweiterung_verfolgen">Wie kann ich den Ablauf meiner Erweiterung verfolgen?</h4>
+<p>Sie können <a href="/de/DOM/Window.alert" title="de/DOM/Window.alert"> alert()</a>, <a href="/de/DOM/Window.dump" title="de/DOM/Window.dump"> dump()</a> oder <a href="/de/Components.utils.reportError" title="de/Components.utils.reportError"> Components.utils.reportError()</a> benutzen. Mithilfe von {{ Interface("nsIConsoleService") }} können ebenfalls variable Daten sowie Debuggingtexte an die Fehlerkonsole gesendet werden. Alternativ kann die <a class="external" href="http://www.hacksrus.com/~ginda/venkman/">Venkman JavaScript Debugger</a> Erweiterung benutzt werden.</p>
+<h4 id="Warum_läuft_mein_Skript_nicht_wie_erwartet">Warum läuft mein Skript nicht wie erwartet?</h4>
+<p>Falls sich ihr Script nicht wie erwartet verhält, sollten Sie zu erst die Fehlerkonsole auf Fehler prüfen (sie <a href="/de/Erweiterungen_FAQ#Wie_finde_ich_Fehler_in_meinem_Code.3F" title="de/Erweiterungen_FAQ#Wie_finde_ich_Fehler_in_meinem_Code.3F"> oben</a>).</p>
+<p>Häufig wird versucht auf das DOM eines Fensters zuzugreifen noch bevor dieses vollständig geladen wurde. Das passiert, wenn der Initialisierungscode am Anfang des Skriptes eingebunden wird (u.a. außerhalb einer Funktion). Durch die Nutzung eines Loadevent-Listeners kann dieses Problem gelöst werden, da der Code erst ausgeführt wird wenn die Seite vollständig geladen wurde:</p>
+<pre>function exampleBrowserStartup(event)
+{
+  // Packen Sie hier Ihren Code hinein
+}
+window.addEventListener("load", exampleBrowserStartup, false);
+</pre>
+<p>Falls Sie einen ähnlichen Fehler wie etwa »JavaScript error: <a class=" external" rel="freelink">chrome://myextension/content/overlay.js</a>, line 47: missing ; before statement« sehen, verwenden Sie möglicherweise Funktionen oder Schreibweisen aus JavaScript 1.7, während Ihre Erweiterung unter einer früheren Version betrieben wird.  Um sicherzustellen, dass Ihr Code unter JavaScript 1.7 läuft, schreiben Sie einfach:</p>
+<pre>&lt;script type="application/x-javascript" src="overlay.js;version=1.7"/&gt;
+</pre>
+<h4 id="Warum_kann_ich_auf_die_angezeigte_Webseite_nicht_zugreifen">Warum kann ich auf die angezeigte Webseite nicht zugreifen?</h4>
+<p>Um auf die angezeigte Webseite von einem browser.xul overlay zuzugreifen, müssen Sie <em>content.document</em> statt <em>document</em> benutzen, da dieses das Browserfenster selbst repräsentiert. Weitere Details finden Sie unter <a href="/de/Mit_Fenstern_im_Chrome_Code_arbeiten" title="de/Mit Fenstern im Chrome
+Code arbeiten">Mit Fenstern im Chrome Code arbeiten</a></p>
+<p>Außerdem verhindert der XPCNativeWrapper standardmäßig den Zugriff auf Script-definierte Objekte der Webseite und einige andere Dinge.</p>
+<h4 id="Warum_kann_ich_kein_XMLHttpRequest_in_meiner_Erweiterung_verwenden">Warum kann ich kein XMLHttpRequest in meiner Erweiterung verwenden?</h4>
+<p>Wenn Sie versuchen Informationen einer Erweiterung über XMLHttpRequest zu senden oder zu empfangen, werden Sie möglicherweise Domain-übergreifend arbeiten. Normalerweise kann dies ein Problem darstellen, aber so lange Sie die Anfrage aus einem Chrome Fenster senden, befinden Sie sich innerhalb des Sicherheitsspielraum und können damit arbeiten.</p>
+<p>Sie müssen sicherstellen, dass Sie das Domain-übergreifende XMLHttpRequest von einem JavaScript Code ausführen, der von einem XUL Fenster referenziert wird. Wenn Sie versuchen, die Anfrage in Beziehung zum Browser-Inhalt aufzurufen (als "document" des XUL Fenster) werden Sie einen »Zugang Verweigert« Fehler erhalten.</p>
+<h4 id="Ich_bekomme_einen_XML-Parser-Fehler_aber_die_Datei_sieht_einwandfrei_aus!">Ich bekomme einen XML-Parser-Fehler, aber die Datei sieht einwandfrei aus!</h4>
+<p>Eine häufiger Grund für Parser-Fehler (<span style="color: red;">roter text</span> mit einem <span style="color: red;">-------------^</span> darunter) ist ein „&amp;“ oder „&lt;“ Zeichen im Script oder ein Attributwert mit einer speziellen Bedeutung in XML. Zum Beispiel:</p>
+<pre class="eval">&lt;button oncommand="window.open('<span class="nowiki">http://example.com/q?param1=value</span><strong>&amp;param2</strong>=val2')"/&gt;
+</pre>
+<p>oder</p>
+<pre class="eval">&lt;script&gt;function lesser(a,b) { return a &lt; b ? a : b; }&lt;/script&gt;</pre>
+<p>Das Problem kann auf folgende Arten gelöst werden:</p>
+<ol> <li>Ersetze Sie das Zeichen mit seiner XML-konformen Repräsentation. (z.B.: „&amp;“ wird zu „&amp;amp;“ und „&lt;“ wird zu „&amp;lt;“)</li> <li>Falls es sich um einen Textknoten wie z.B. ein Script handelt, platzieren Sie diesen in CDATA Tags:</li> <pre>&lt;script&gt;&lt;![CDATA[
+   function lesser(a,b) {
+     return a &lt; b ? a : b;
+   }
+ ]]&gt;&lt;/script&gt;
+</pre> <li>Verschiebe Sie das Script in eine externe Datei und binden Sie diese ein:</li> <pre>&lt;script type="application/x-javascript" src="our.js"/&gt;</pre>
+</ol>
+<h3 id="Beispiel_Code">Beispiel Code</h3>
+<p>Der einfachste Weg ist es wohl eine passende Erweiterung (oder Teile von Mozilla selbst) zu finden, die genau das tut was man benötigt und dort in den Code schaut. (Die XPI und JAR Dateien sind im ZIP-Format komprimiert).</p>
+<p>Außerdem gibt noch weitere Dokumentationen. Zu finden sind diese in der <a href="/Special:Tags?tag=Erweiterungen&amp;language=de" title="Special:Tags?tag=Erweiterungen&amp;language=de"> Liste relevanter Artikel auf MDC</a>, <a href="/de/Codeschnipsel" title="de/Codeschnipsel">Codeschnipsel</a> und <a class="external" href="http://kb.mozillazine.org/Category:Example_code">Beispielcode auf MozillaZine</a>.</p>
+<h3 id="Wo_finde_ich_weitere_Hilfe">Wo finde ich weitere Hilfe?</h3>
+<p>Unter <a href="/de/Erweiterungen/Andere_Ressourcen" title="de/Erweiterungen/Andere_Ressourcen">Erweiterungen/Andere Ressourcen</a> und <a href="/de/Erweiterungen/Community" title="de/Erweiterungen/Community">Erweiterungen/Community</a>.</p>
+<p>Bevor Sie nach Hilfe fragen, kontrollieren Sie Ihre <a href="/de/Einrichten_einer_Entwicklungsumgebung_f%C3%BCr_Erweiterungen" title="de/Einrichten_einer_Entwicklungsumgebung_für_Erweiterungen"> Entwicklungsumgebung</a> und überprüfen Sie die <a href="/de/Fehlerkonsole" title="de/Fehlerkonsole">Fehlerkonsole</a> auf relevante Einträge. Außerdem sollten Sie zumindest eine einfache Suche durchgeführt haben und diese FAQs gelesen haben.</p>
+<p>{{ languages( { "en": "en/Extension_Frequently_Asked_Questions", "es": "es/Preguntas_frecuentes_sobre_Extensiones", "fr": "fr/Foire_aux_questions_sur_les_extensions", "it": "it/Domande_frequenti_sulle_Estensioni", "ja": "ja/Extension_Frequently_Asked_Questions", "pl": "pl/Cz\u0119sto_zadawane_pytania_dotycz\u0105ce_rozszerze\u0144", "ru": "ru/FAQ_\u043f\u043e_\u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f\u043c" } ) }}</p>
diff --git a/files/de/erweiterungen_für_firefox_3_aktualisieren/index.html b/files/de/erweiterungen_für_firefox_3_aktualisieren/index.html
new file mode 100644
index 0000000000..409fc00546
--- /dev/null
+++ b/files/de/erweiterungen_für_firefox_3_aktualisieren/index.html
@@ -0,0 +1,232 @@
+---
+title: Erweiterungen für Firefox 3 aktualisieren
+slug: Erweiterungen_für_Firefox_3_aktualisieren
+tags:
+  - Firefox 3
+translation_of: Mozilla/Firefox/Releases/3/Updating_extensions
+---
+<div><section class="Quick_links" id="Quick_Links">
+  <ol>
+    <li class="toggle">
+        <details>
+            <summary>Firefox developer release notes</summary>
+            <ol>
+              <li><a href="/de/docs/Mozilla/Firefox/Releases">Firefox developer release notes</a></li>
+            </ol>
+        </details>
+    </li>
+    <li class="toggle">
+        <details>
+            <summary>Add-ons</summary>
+            <ol>
+              <li><a href="/de/Add-ons/WebExtensions">Browser extensions</a></li>
+              <li><a href="/de/Add-ons/Themes">Themes</a></li>
+            </ol>
+        </details>
+    </li>
+    <li class="toggle">
+        <details>
+            <summary>Firefox internals</summary>
+            <ol>
+              <li><a href="/de/docs/Mozilla/">Mozilla project</a></li>
+              <li><a href="/de/docs/Mozilla/Gecko">Gecko</a></li>
+              <li><a href="/de/docs/Mozilla/Firefox/Headless_mode">Headless mode</a></li>
+              <li><a href="/de/docs/Mozilla/JavaScript_code_modules">JavaScript code modules</a></li>
+              <li><a href="/de/docs/Mozilla/js-ctypes">JS-ctypes</a></li>
+              <li><a href="/de/docs/Mozilla/MathML_Project">MathML project</a></li>
+              <li><a href="/de/docs/Mozilla/MFBT">MFBT</a></li>
+              <li><a href="/de/docs/Mozilla/Projects">Mozilla projects</a></li>
+              <li><a href="/de/docs/Mozilla/Preferences">Preference system</a></li>
+              <li><a href="/de/docs/Mozilla/WebIDL_bindings">WebIDL bindings</a></li>
+              <li><a href="/de/docs/Mozilla/Tech/XPCOM">XPCOM</a></li>
+              <li><a href="/de/docs/Mozilla/Tech/XUL">XUL</a></li>
+            </ol>
+        </details>
+    </li>
+    <li class="toggle">
+        <details>
+            <summary>Building and contributing</summary>
+            <ol>
+              <li><a href="/de/docs/Mozilla/Developer_guide/Build_Instructions">Build instructions</a></li>
+              <li><a href="/de/docs/Mozilla/Developer_guide/Build_Instructions/Configuring_Build_Options">Configuring build options</a></li>
+              <li><a href="/de/docs/Mozilla/Developer_guide/Build_Instructions/How_Mozilla_s_build_system_works">How the build system works</a></li>
+              <li><a href="/de/docs/Mozilla/Developer_guide/Source_Code/Mercurial">Mozilla source code</a></li>
+              <li><a href="/de/docs/Mozilla/Localization">Localization</a></li>
+              <li><a href="/de/docs/Mozilla/Mercurial">Mercurial</a></li>
+              <li><a href="/de/docs/Mozilla/QA">Quality assurance</a></li>
+              <li><a href="/de/docs/Mozilla/Using_Mozilla_code_in_other_projects">Using Mozilla code in other projects</a></li>
+            </ol>
+        </details>
+    </li>
+  </ol>
+</section></div>
+
+<p> Dieser Artikel liefert nützliche Informationen für Entwickler, die ihre Erweiterungen aktualisieren möchten, um eine einwandfreie Funktion unter Firefox 3 zu gewährleisten.</p>
+
+<p>Vorweg eine hilfreiche Anmerkung: Wenn die einzig notwendige Änderung an der Erweiterung der Eintrag <code>maxVersion</code> im Installationsmanifest ist und die Erweiterung auf <a class="link-https" href="https://addons.mozilla.org">addons.mozilla.org</a> bereitgestellt wird, ist es nicht nötig eine neue Version der Erweiterung zu veröffentlichen. Im »Developer Control Panel« auf <abbr title="Addons.Mozilla.Org">AMO</abbr> kann die <code>maxVersion</code>, ohne einen neuen Upload, eingestellt werden. Dadurch kann auch vermieden werden, dass die Erweiterung nochmal überprüft werden muss.</p>
+
+<h3 id="Schritt_1_Installationsmanifest_aktualisieren">Schritt 1: Installationsmanifest aktualisieren</h3>
+
+<p>Der erste Schritt - und für die meisten Erweiterungen der einzig Nötige - ist eine Aktualisierung der <a href="/de/Installationsmanifest" title="de/Installationsmanifest">Installationsmanifestdatei</a>, <code>install.rdf</code>, um die Erweiterung als Firefox 3 kompatibel zu kennzeichnen.</p>
+
+<p>Als erstes muss die Zeile zur Kennzeichnung der maximal kompatiblen Firefox-Version gefunden werden (welche für Firefox 2 so aussehen sollte):</p>
+
+<pre class="eval"> <span class="nowiki">&lt;em:maxVersion&gt;2.0.0.*&lt;/em:maxVersion&gt;</span>
+</pre>
+
+<p>Um als Firefox 3 kompatibel zu gelten, reicht die folgende Änderung:</p>
+
+<pre class="eval"> <span class="nowiki">&lt;em:maxVersion&gt;3.0.*&lt;/em:maxVersion&gt;</span>
+</pre>
+
+<p>Danach muss die Erweiterung neu installiert werden.</p>
+
+<p>Dabei sollte darauf geachtet werden, dass Firefox 3 keine extra ".0" in der Versionsnummer hat, anstatt "3.0.0.*, sollte nur "3.0.*" verwendet werden.</p>
+
+<p>Es gab (und es wird weiterhin welche geben) eine Reihe von API Veränderungen, die dazu führen, dass einige Erweiterungen nicht weiter funktionieren. Es wird an einer kompletten Liste gearbeitet, die diese Veränderungen aufzählt.</p>
+
+<div class="note"><strong>Hinweis:</strong> Wenn die Erweiterung noch immer ein <code><a href="/de/Install.js" title="de/Install.js">Install.js</a></code> Skript, anstatt eines <a href="/de/Installationsmanifest" title="de/Installationsmanifest">Installationsmanifests</a> benutzt, sollte ein Wechsel jetzt getätigt werden. Firefox 3 unterstützt keine <code>install.js</code> Skripte in XPI Dateien mehr.</div>
+
+<h4 id="Das_Installationsmanifest_lokalisieren">Das Installationsmanifest lokalisieren</h4>
+
+<p>Firefox 3 führt neue Eigenschaften ein, um <a href="/de/Lokalisierung_von_Erweiterungsbeschreibungen" title="de/Lokalisierung_von_Erweiterungsbeschreibungen">lokalisierte Beschreibungen</a> zu ermöglichen. Die alte Methode funktioniert nach wie vor, auch wenn die neue Firefox-Version erlaubt, sogar dann die lokalisierten Sprachdaten zu nutzen, wenn die Erweiterung deaktiviert oder noch zur Installation vorgesehen ist.</p>
+
+<h3 id="Schritt_2_Sichere_Updates_zur_Verfügung_stellen">Schritt 2: Sichere Updates zur Verfügung stellen</h3>
+
+<p>Falls die Erweiterungen selbst bereitgestellt wird und nicht bei <a class="link-https" href="https://addons.mozilla.org">addons.mozilla.org</a> angeboten wird, müssen sichere Updates selbst verwaltet werden. Dazu können die Updates entweder über eine SSL Webseite angeboten werden oder die Updates werden mit einem Kryptographieschlüssel signiert. Weitere Informationen dazu unter: <a href="/de/Erweiterungsversionierung,_Updates_und_Kompatibilität#Sichere_Updates" title="de/Erweiterungsversionierung,_Updates_und_Kompatibilität#Sichere_Updates">Sichere Updates</a>.</p>
+
+<h3 id="Schritt_3_Mit_geänderten_APIs_umgehen">Schritt 3: Mit geänderten APIs umgehen</h3>
+
+<p>Mehrere APIs haben sich erheblich geändert. Die wichtigsten davon, die sich auf viele Erweiterungen auswirken, sind:</p>
+
+<h4 id="DOM" name="DOM">DOM</h4>
+
+
+<p>Nodes from external documents should be cloned using <a href="/de/docs/Web/API/Document/importNode" title="Die Document-Methode importNode() erzeugt eine neue Kopie eines konkreten Knotens (Node) oder Dokumenten-Fragments (DocumentFragment) eines anderen Dokuments, so dass diese dann in das aktuelle Dokument eingefügt werden kann. "><code>document.importNode()</code></a> (or adopted using <a href="/de/docs/Web/API/Document/adoptNode" title="Überträgt einen Knoten. Der Knoten und sein Unterbaum werden aus dem Dokument, in dem sie sich befinden entfernt (so vorhanden), und sein ownerDocument wird zu dem aktuellen Dokument geändert. Der Knoten kann dann in das aktuelle Dokument eingefügt werden."><code>document.adoptNode()</code></a>) before they
+    can be inserted into the current document. For more on the <a class="new" href="/de/docs/Web/API/Node/ownerDocument" rel="nofollow" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben. Bitte überlege, mitzuwirken!"><code>Node.ownerDocument</code></a> issues, see the
+    <a class="external" href="http://www.w3.org/DOM/faq.html#ownerdoc" rel="noopener">W3C DOM FAQ</a>.</p>
+
+    <p>Firefox doesn't currently enforce this rule (it did for a while during the development of Firefox 3, but too many
+    sites break when this rule is enforced). We encourage Web developers to fix their code to follow this rule for
+    improved future compatibility.</p>
+
+<h4 id="Lesezeichen_Chronik">Lesezeichen &amp; Chronik</h4>
+
+<p>Falls die Erweiterung in irgendeiner Art auf Lesezeichen oder die Chronik zugreift, sind umfangreichere Änderungen nötig, um die Kompatibilität mit Firefox 3 zu gewährleisten. Die alte API zum Zugriff auf diese Informationen wurde durch die neue <a href="/de/Places" title="de/Places">Places</a> Architektur ersetzt. Im <a href="/de/Leitfaden_zur_Places_Migration" title="de/Leitfaden_zur_Places_Migration">Leitfaden zur Places Migration</a> finden sich dazu weitere Details, auch wie die bestehende Erweiterung auf die »Places« API aktualisiert werden kann.</p>
+
+<h4 id="Download-Manager">Download-Manager</h4>
+
+<p>Die Download-Manager API hat sich durch den Wechsel vom RDF Datenspeicher zur <a href="/de/Storage" title="de/Storage">Storage</a> API ein wenig geändert. Der Wechsel sollte relativ einfach durchzuführen sein. Außerdem hat sich die API zum Überwachen des Downloadfortschritts geändert, um mehrere Download-Manager Listeners zu unterstützen. Unter <code><a href="/de/docs/XPCOM_Interface_Referenz/nsIDownloadManager" title="">nsIDownloadManager</a></code>, <code><a href="/de/docs/XPCOM_Interface_Referenz/nsIDownloadProgressListener" title="">nsIDownloadProgressListener</a></code> und <a href="/de/Downloads_überwachen" title="de/Downloads_überwachen">Downloads überwachen</a> sind weitere Informationen verfügbar.</p>
+
+<h4 id="Passwort-Manager">Passwort-Manager</h4>
+
+<p>Wenn die Erweiterung den Passwort-Manager benutzt, um auf Anmeldeinformationen zuzugreifen muss die Erweiterung auf die neue Login Manager API umgestellt werden.</p>
+
+<ul>
+ <li>Der Artikel <a href="/de/Verwendung_von_nsILoginManager">Verwendung von nsILoginManager</a> enthält Beispiele. Darunter findet sich auch eine Demo wie die Erweiterung sowohl den Passwort-Manager als auch den Login-Manager benutzen kann. Dadurch kann die Erweiterung von Firefox 3 und von früheren Versionen genutzt werden.</li>
+ <li><code><a href="/de/nsILoginInfo" title="de/nsILoginInfo">nsILoginInfo</a></code></li>
+ <li><code><a href="/de/nsILoginManager" title="de/nsILoginManager">nsILoginManager</a></code></li>
+</ul>
+
+<p>Es kann aber auch der integrierte Speicher des Passwort-Managers überschrieben werden, falls eine eigene Implementierung in der Erweiterung angeboten werden soll. Weitere Details unter <a href="/de/Ein_Login-Manager_Speichermodul_erstellen" title="de/Ein_Login-Manager_Speichermodul_erstellen">Ein Login-Manager Speichermodul erstellen</a>.</p>
+
+<h4 id="Popups_Menü_Kontextmenü_Tooltips_und_Eingabefelder">Popups (Menü, Kontextmenü, Tooltips und Eingabefelder)</h4>
+
+<p>Das XUL Popup-System wurde im Firefox 3 stark verändert. Das Popup-System umfasst Hauptmenüs, Kontextmenüs und Popup Eingabefelder. Der Artikel zu <a href="/de/XUL/Popup_Leitfaden" title="de/XUL/Popup_Leitfaden">Popups</a> beschreibt detailliert wie das System funktioniert. Zu beachten ist außerdem, dass <code>popup.<span id="m-showPopup"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/showPopup">showPopup</a></code></span></code> zugunsten von <code>popup.<span id="m-openPopup"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/openPopup">openPopup</a></code></span></code> und <code>popup.<span id="m-openPopupAtScreen"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/openPopupAtScreen">openPopupAtScreen</a></code></span></code> als veraltet gekennzeichnet wurde.</p>
+
+<h4 id="Autovervollst.C3.A4ndigung" name="Autovervollst.C3.A4ndigung">Autovervollständigung</h4>
+
+<p>Die <code><a href="/de/NsIAutoCompleteController#Enter_behandeln.28.29" title="de/NsIAutoCompleteController#Enter_behandeln.28.29">handleEnter()</a></code> Methode im <code><a href="/de/docs/XPCOM_Interface_Referenz/nsIAutoCompleteController" title="">nsIAutoCompleteController</a></code> Interface wurde um ein Argument erweitert. Dieses kennzeichnet, ob der abgesendete Text im Autovervollständigungspopup ausgewählt wurde oder, ob der Benutzer nach seiner Eingabe »Enter« gedrückt hat.</p>
+
+<h4 id="DOMParser">DOMParser</h4>
+
+<ul>
+ <li>Wenn ein <code>DOMParser</code> instanziiert wird, erbt er das vom aufrufenden Code repräsentierte Dokument sowie <code>documentURI</code> und <code>baseURI</code> des aufrufenden Fensters.</li>
+ <li>Hat der Aufrufende Code UniversalXPConnect Privilegien, kann er Parameter an <code>new DOMParser()</code> übergeben. Werden weniger als drei Parameter übergeben werden die übrig gebliebenen standardmäßig mit <code>null</code> belegt.
+  <ul>
+   <li>Der erste Parameter ist das zu parsende Dokument und überschreibt den für gewöhnlich geerbten Standardwert.</li>
+   <li>Der zweite Parameter enthält <code>documentURI</code>.</li>
+   <li>Der dritte Parameter enthält <code>baseURI</code>.</li>
+  </ul>
+ </li>
+ <li>Falls ein <code>DOMParser</code> durch einen Auftrag aufgerufen wird, wie z.B. durch <code>createInstance()</code>, nicht die <code>init()</code> Methode des DOM-Parsers aufgerufen wird und versucht wird eine Parseroperation zu starten, wird der <code>DOMParser</code> automatisch mit einem <code>null</code> Dokument und <code>null</code> Verweisen auf <code>documentURI</code> und <code>baseURI</code> erstellt und instanziiert.</li>
+</ul>
+
+<h4 id="Keine_weitere_Verwendung_der_internen_String_API">Keine weitere Verwendung der internen String API</h4>
+
+<p>Die interne String API wird nicht weiter ausgeführt, stattdessen muss die externe String API benutzt werden. Einige nützliche Informationen dazu:</p>
+
+<ul>
+ <li><a href="/de/Externe_Strings">Externe Strings</a></li>
+ <li><a href="/de/XPCOM_Glue">XPCOM Glue</a></li>
+ <li><a href="/de/Von_interner_Verlinkung_zu_fester_Verlinkung_wechseln">Von interner Verlinkung zu fester Verlinkung wechseln</a></li>
+</ul>
+
+<h4 id="Entfernte_Interfaces">Entfernte Interfaces</h4>
+
+<p>Folgende Interfaces wurden aus, der im Firefox 3 enthaltenen, Gecko-Engine 1.9 entfernt. Wenn die Erweiterung eines davon nutzt, muss der Code aktualisiert werden:</p>
+
+<ul>
+ <li><code>nsIDOMPaintListener</code></li>
+ <li><code>nsIDOMScrollListener</code></li>
+ <li><code>nsIDOMMutationListener</code></li>
+ <li><code>nsIDOMPageTransitionListener</code></li>
+ <li><code>nsICloseAllWindows</code> (Siehe <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=386200" title='FIXED: SeaMonkey only: no "view cert button" in untrusted cert error dialog'>Bug 386200</a>)</li>
+</ul>
+
+<h3 id="Schritt_4_Auf_Chrome_Änderungen_überprüfen">Schritt 4: Auf <em>Chrome</em> Änderungen überprüfen</h3>
+
+<p>Es gab einige Veränderungen im <em>Chrome</em>-Layout, die eventuell auch Erweiterungen betreffen.</p>
+
+<h4 id="Neue_Boxen">Neue Boxen</h4>
+
+<p>Es wurden kleinere Änderungen an der Oberfläche vorgenommen, die Änderungen an der Erweiterung nötig machen könnten. Eine neue <code>vbox</code> mit dem Namen »browser-bottombox« wurde hinzugefügt, welche die »Find Bar« und die »Status Bar« am unteren Rand des Browsers umschließt. Auch wenn dies nicht die Anzeige selbst beeinflusst, kann dies deine Erweiterung betreffen falls diese »Overlays« verwendet, die Elemente ändern, die relativ zu besagten Elementen positioniert sind.</p>
+
+<p>Zum Beispiel, wenn vorher etwas überlagert wurde, wie im folgendem Codeschnipsel:</p>
+
+<pre>&lt;window id="main-window"&gt;
+  &lt;something insertbefore="status-bar" /&gt;
+&lt;/window&gt;
+</pre>
+
+<p>Sollte es nun so überlagert werden:</p>
+
+<pre>&lt;vbox id="browser-bottombox"&gt;
+  &lt;something insertbefore="status-bar" /&gt;
+&lt;/vbox&gt;
+</pre>
+
+<p>Oder, um Firefox 2 und Firefox 3 gleichermaßen zu behandeln, kann der folgende Code zum Einsatz kommen:</p>
+
+<pre>&lt;window id="main-window"&gt;
+  &lt;vbox id="browser-bottombox" insertbefore="status-bar"&gt;
+    &lt;something insertbefore="status-bar" /&gt;
+  &lt;/vbox&gt;
+&lt;/window&gt;
+</pre>
+
+<h4 id="Veränderte_Boxen">Veränderte Boxen</h4>
+
+<p>Erweiterungen, die auf die »appcontent« Box überlagern wollten, versuchten dies über das Floaten von Chrome-Inhalten über Dokumenteninhalten. Jetzt wird dann nicht mehr angezeigt. Die Erweiterung sollte auf das neue XUL panel Element aktualisiert werden. Falls es erwünscht ist, dass das Panel nach einer Verzögerung weiter angezeigt wird, sollte <code>noautohide</code> auf <code>true</code> gesetzt werden.</p>
+
+<h3 id="Weitere_Änderungen">Weitere Änderungen</h3>
+
+<p><em>Einfache Änderungen, die Sie bei der Aktualisierung Ihrer Erweiterung auf Firefox 3 machen mussten, können Sie hier gerne eintragen!</em></p>
+
+<ul>
+ <li><code><a class="external" rel="freelink">chrome://browser/base/utilityOverlay.js</a></code> wird aus Sicherheitsgründen nicht länger unterstützt. Falls dies vorher verwendet wurde, sollte auf <code><a class="external" rel="freelink">chrome://browser/content/utilityOverlay.js</a></code>. gewechselt werden.</li>
+ <li>Bei <code><a href="/de/docs/XPCOM_Interface_Referenz/nsIAboutModule" title="">nsIAboutModule</a></code> Implementierungen wird nun <code>getURIFlags</code> Methode benötigt. Siehe <a href="https://dxr.mozilla.org/mozilla-central/source/netwerk/protocol/about/public/nsIAboutModule.idl" rel="custom">nsIAboutModule.idl</a> für weitere Dokumentation. Das betrifft Erweiterungen, die neue <code>about:</code> URIs verwenden. (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=337746" title='FIXED: [FIX]Move "safe about" hardcoding out of security manager'>Bug 337746</a>)</li>
+ <li>Das <code><a href="/de/docs/Mozilla/Tech/XUL/tabbrowser" title="tabbrowser">tabbrowser</a></code> Element ist kein Teil mehr von »toolkit« (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=339964" title="FIXED: move tabbrowser.xml out of mozilla/toolkit and into mozilla/browser">Bug 339964</a>). Das bedeutet, dass dieses Element nicht länger für XUL Anwendungen und Erweiterungen verfügbar ist. Es wird weiterhin in Firefox' Hauptfenster (browser.xul) benutzt.</li>
+ <li>Veränderungen an <a href="/de/NsISupports_proxies" title="de/NsISupports_proxies">nsISupports proxies</a> und möglicherweise ab Thread-bezogenen Interfaces muss noch dokumentiert werden.</li>
+ <li>Wenn XML Prozessanweisungen wie <code>&lt;?xml-stylesheet ?&gt;</code> in XUL Dateien verwendet werden, sollten Änderungen durch <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=319654" title="FIXED: Processing instructions in XUL are not added to the content model">Bug 319654</a> beachtet werden:
+  <ol>
+   <li>XML Prozessanweisungen werden nun in das XUL DOM hinzugefügt. Das bedeutet, dass <a href="/de/docs/Web/API/Document/firstChild" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben. Bitte überlege, mitzuwirken!"><code>document.firstChild</code></a> nicht unbedingt mehr das Root-Element sein muss. Wenn das Wurzelelement angesprochen werden muss sollte <a href="/de/docs/Web/API/Document/documentElement" title="Lesbar, nicht schreibbar"><code>document.documentElement</code></a> verwendet werden.</li>
+   <li><code>&lt;?xml-stylesheet ?&gt;</code> und <code>&lt;?xul-overlay ?&gt;</code> Prozessanweisungen haben jetzt außerhalb des Dokumentprologs keinen Effekt mehr.</li>
+  </ol>
+ </li>
+ <li><code>window.addEventListener("load", myFunc, true)</code> wird nicht ausgeführt, wenn Webinhalte geladen werden (Browser eine Seite lädt). Durch <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=296639" title="FIXED: Split windows into an inner and outer object">Bug 296639</a> wurde die Art und Weise in der innere und äußere Fenster kommunizieren verändert. Ein einfacher Fix, der auch in Firefox 2 funktioniert: <code>gBrowser.addEventListener("load", myFunc, true)</code> wie <a href="/de/Codeschnipsel/Tabbed_browser#Detecting_page_load">hier</a> beschrieben.</li>
+ <li><code>content.window.getSelection()</code> gibt ein Objekt zurück (welches durch <code>toString()</code> zu einem String umgewandelt werden kann), im Gegensatz zu dem jetzt veraltetem <code>content.document.getSelection()</code>, welches einen String zurück gibt.</li>
+ <li><code>event.preventBubble()</code> war Firefox 2 in deprecated und wurde in Firefox 3 entfernt. Es sollte <a href="/de/DOM/event.stopPropagation" title="de/DOM/event.stopPropagation"><code>event.stopPropagation()</code></a> verwendet werden, was in Firefox 2 ebenso funktioniert.</li>
+ <li>Timers, die durch <code>setTimeout()</code> initialisiert wurden, werden nun von modalen Fenstern, durch den Fix von <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=52209" title="FIXED: JS timers can fire while a modal dialog is open">Bug 52209</a>, geblockt. Es könnte <code>nsITimer</code> stattdessen verwendet werden.</li>
+ <li>Wenn die Erweiterung einer nicht vertrauten Quelle (z.B. eine Webseite) Zugang zu Chrome zulassen muss, sollte die neue <a href="/de/Chrome_Registration#contentaccessible" title="de/Chrome_Registration#contentaccessible"><code>contentaccessible</code> Flag</a> benutzt werden.</li>
+</ul>
diff --git a/files/de/farbverläufe_in_css/index.html b/files/de/farbverläufe_in_css/index.html
new file mode 100644
index 0000000000..e5ed267991
--- /dev/null
+++ b/files/de/farbverläufe_in_css/index.html
@@ -0,0 +1,408 @@
+---
+title: Verwendung von CSS Farbverläufen
+slug: Farbverläufe_in_CSS
+tags:
+  - Beispiel
+  - CSS
+  - CSS Bild
+  - Guide
+  - NeedsLiveSample
+  - NeedsUpdate
+  - Web
+  - erweitert
+translation_of: Web/CSS/CSS_Images/Using_CSS_gradients
+---
+<p><span class="seoSummary"><strong>CSS Farbverläufe</strong> sind neue Typen von {{cssxref("&lt;image&gt;")}}, die durch das <a href="/de/docs/CSS/CSS3" title="CSS3">CSS3</a> Image Module hinzugefügt wurden. Die Verwendung von CSS Farbverläufen erlaubt es, weiche Übergänge zwischen zwei oder mehr angegebenen Farben anzuzeigen.</span> Dies ermöglicht es, Bilder für diese Effekte zu vermeiden, was Downloadzeit und Bandbreitennutzung verringert. Darüber hinaus sehen Objekte besser aus, wenn sie herangezoomt werden, da der Farbverlauf durch den Browser erzeugt wird, sodass das Layout viel flexibler gestaltet werden kann.</p>
+
+<p><span class="seoSummary">Browser unterstützen zwei Arten von Verläufen: <em>lineare</em>, definiert durch die {{cssxref("linear-gradient")}} Funktion, und <em>radiale</em>, definiert durch {{cssxref("radial-gradient")}}.</span></p>
+
+<h2 id="Lineare_Farbverläufe">Lineare Farbverläufe</h2>
+
+<p>Um einen linearen Farbverlauf zu erstellen, wird ein Startpunkt gesetzt und eine Richtung (als Winkel), entlang welcher der Verlaufseffekt angewendet wird. Es werden auch <strong>Farbstopps</strong> definiert. Farbstopps sind die Farben, zwischen denen Gecko weiche Übergänge darstellen soll. Es müssen mindestens zwei angegeben werden, es können jedoch auch mehrere definiert werden, um komplexere Verlaufseffekte zu erzeugen.</p>
+
+<h3 id="Einfache_lineare_Farbverläufe">Einfache lineare Farbverläufe</h3>
+
+<p>Hier ist ein linearer Farbverlauf, der in der Mitte (horizontal) oben (vertikal) mit blau beginnt und in weiß übergeht.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Screenshot</td>
+   <td class="header">Livedemo</td>
+  </tr>
+  <tr>
+   <td><img alt="" src="/@api/deki/files/3950/=basic_linear_bluetop.png" style="text-align: center;"></td>
+   <td>
+    <div style=""> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<div>
+<pre class="brush: css">/* Die alte Syntax, veraltet und mit Präfix versehen, für alte Browser */
+background: -<em>prefix</em>-linear-gradient(top, blue, white);
+
+/* Die neue Syntax, die von Browsern benötigt wird, die dem Standard folgen (Opera 12.1,
+   IE 10, Firefox 16, Chrome 26, Safari 6.1), ohne Präfix */
+background: linear-gradient(to bottom, blue, white);
+</pre>
+</div>
+
+<p>(Siehe die <a href="/de/docs/Web/CSS/linear-gradient#Browser_Kompatibilität">Browser Kompatibilitätstabelle</a> für eine Übersicht der Präfixe, die benötigt werden, um verschiedene Browserversionen zu unterstützen).</p>
+
+<p>Der gleiche Farbverlauf wird geändert, sodass er von links nach rechts verläuft:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Screenshot</td>
+   <td class="header">Livedemo</td>
+  </tr>
+  <tr>
+   <td><img alt="basic_linear_blueleft.png" class="default internal" src="/@api/deki/files/3951/=basic_linear_blueleft.png"></td>
+   <td>
+    <div style=""> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: css">/* Die alte Syntax, veraltet und mit Präfix versehen, für alte Browser */
+background: -<em>prefix</em>-linear-gradient(left, blue, white);
+
+/* Die neue Syntax, die von Browsern benötigt wird, die dem Standard folgen (Opera 12.1,
+   IE 10, Firefox 16, Chrome 26, Safari 6.1), ohne Präfix */
+background: linear-gradient(to right, blue, white); </pre>
+
+<p>(Siehe die <a href="/de/docs/Web/CSS/linear-gradient#Browser_Kompatibilität">Browser Kompatibilitätstabelle</a> für eine Übersicht der Präfixe, die benötigt werden, um verschiedene Browserversionen zu unterstützen).</p>
+
+<p>Der Verlauf kann diagonal gestaltet werden, indem die horizontale und vertikale Startposition definiert wird. Zum Beispiel:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Screenshot</td>
+   <td class="header">Livedemo</td>
+  </tr>
+  <tr>
+   <td><img alt="basic_linear_bluetopleft.png" class="default internal" src="/@api/deki/files/3952/=basic_linear_bluetopleft.png"></td>
+   <td>
+    <div style=""> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: css">/* Die alte Syntax, veraltet und mit Präfix versehen, für alte Browser */
+background: -<em>prefix</em>-linear-gradient(left top, blue, white);
+
+/* Die neue Syntax, die von Browsern benötigt wird, die dem Standard folgen (Opera 12.1,
+   IE 10, Firefox 16, Chrome 26, Safari 6.1), ohne Präfix */
+background: linear-gradient(to bottom right, blue, white);
+</pre>
+
+<h3 id="Verwendung_von_Winkeln">Verwendung von Winkeln</h3>
+
+<p>Falls kein Winkel angegeben wird, wird er automatisch durch die angegebene Richtung bestimmt. Falls mehr Kontrolle über die Richtung des Verlaufs erwünscht ist, kann der Winkel explizit angegeben werden.</p>
+
+<p>Als Beispiel sind hier zwei Verläufe, der erste mit einer Richtung nach rechts und der zweite mit einem Winkel von 70 Grad.</p>
+
+<p><img alt="linear_gradient_angle.png" class="default internal" src="/@api/deki/files/3953/=linear_gradient_angle.png"></p>
+
+<p>Der rechte verwendet CSS wie folgt:</p>
+
+<pre class="brush: css">background: linear-gradient(70deg, black, white);
+</pre>
+
+<p>Der Winkel wird angegeben als ein Winkel zwischen horizontaler Linie und der Verlaufslinie gegen den Uhrzeigersinn. Mit anderen Worten, <code>0deg</code> erzeugt einen vertikalen Farbverlauf von unten nach oben, während <code>90deg</code> einen horizontalen Verlauf von links nach rechts erzeugt:</p>
+
+<p><img alt="linear_redangles.png" class="default internal" src="/files/3811/linear_red_angles.png"></p>
+
+<pre class="brush: css">background: linear-gradient(&lt;angle&gt;, red, white);
+</pre>
+
+<div class="note style-wrap">
+<p><strong>Hinweis:</strong> Mehrere Browser implementieren (mit Präfix) einen älteren Entwurf der Spezifikation, wo <code>0deg</code> nach rechts anstatt nach oben zeigte. Daher sollte auf den Wert des Winkels geachtet werden, wenn der standardisierte <code>linear-gradient</code> und der mit Präfix versehene gemischt verwendet werden. Eine einfache Formel hierfür ist 90 - x = y, wobei x die Standardverwendung und y die nicht standardisierte, mit Herstellerpräfix versehene Verwendung ist.</p>
+</div>
+
+<h3 id="Farbstopps">Farbstopps</h3>
+
+<p>Farbstopps sind Punkte entlang der Verlaufslinie, die eine bestimmte Farbe an dieser Position angeben. Die Position kann entweder als ein Prozentwert der Länge der Linie oder als absolute Länge angegeben werden. Es können beliebig viele Farbstopps definiert werden, um den gewünschten Effekt zu erzielen.</p>
+
+<p>Falls die Position als Prozentwert angegeben wird, repräsentiert <code>0%</code> den Startpunkt und <code>100%</code> den Endpunkt; jedoch können auch Werte außerhalb dieses Bereichs verwendet werden, falls nötig, um den gewünschten Effekt zu erhalten.</p>
+
+<h4 id="Beispiel_Drei_Farbstopps">Beispiel: Drei Farbstopps</h4>
+
+<p>Dieses Beispiel definiert drei Farbstopps:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Screenshot</td>
+   <td class="header">Livedemo</td>
+  </tr>
+  <tr>
+   <td><img alt="linear_colorstops1.png" class="default internal" src="/@api/deki/files/3955/=linear_colorstops1.png"></td>
+   <td>
+    <div style=""> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: css">/* Die alte Syntax, veraltet und mit Präfix versehen, für alte Browser */
+background: -<em>prefix</em>-linear-gradient(top, blue, white 80%, orange);
+
+/* Die neue Syntax, die von Browsern benötigt wird, die dem Standard folgen (Opera 12.1,
+   IE 10, Firefox 16, Chrome 26, Safari 6.1), ohne Präfix */
+background: linear-gradient(to bottom, blue, white 80%, orange);
+</pre>
+
+<p>Beachte, dass der erste und letzte Farbstopp keine Position definieren; daher werden ihnen automatisch Werte von 0% und 100% zugewiesen. Der mittlere Farbstopp definiert eine Position von 80%, was ihn ziemlich weit nach unten verlagert.</p>
+
+<h4 id="Beispiel_Gleichmäßig_verteilte_Farbstopps">Beispiel: Gleichmäßig verteilte Farbstopps</h4>
+
+<p>Hier ist ein Beispiel, das eine Vielzahl an Farben verwendet, die alle gleichmäßig verteilt sind:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Screenshot</td>
+   <td class="header">Livedemo</td>
+  </tr>
+  <tr>
+   <td><img alt="linear_rainbow.png" class="default internal" src="/@api/deki/files/3956/=linear_rainbow.png"></td>
+   <td>
+    <div style=""> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: css">/* Die alte Syntax, veraltet und mit Präfix versehen, für alte Browser */
+background: -<em>prefix</em>-linear-gradient(left, red, orange, yellow, green, blue);
+
+/* Die neue Syntax, die von Browsern benötigt wird, die dem Standard folgen (Opera 12.1,
+   IE 10, Firefox 16, Chrome 26, Safari 6.1), ohne Präfix */
+background: linear-gradient(to right, red, orange, yellow, green, blue);
+</pre>
+
+<p>Beachte, dass die Farbstopps automatisch gleichmäßig verteilt werden, wenn keine Positionen angegeben werden.</p>
+
+<h3 id="Transparenz_und_Farbverläufe">Transparenz und Farbverläufe</h3>
+
+<p>Farbverläufe unterstützen Transparenz. Diese kann zum Beispiel dazu benutzt werden, mehrere Hintergründe übereinander zu legen, um Fadingeffekte bei Hintergrundbilder zu erzeugen. Um dies zu erreichen, können entweder <code>rgba</code> Farben, <code>hsla</code> Farben oder das Schlüsselwort <code>transparent</code> verwendet werden (siehe <a href="/de/docs/Web/CSS/Farben">Farbwerte</a>). Jedoch sei darauf hingewiesen, dass einige Browser das Schlüsselwort <code>transparent</code> als <code>rgba(0,0,0,0)</code> anstatt <code>rgba(255,255,255,0)</code> rendern, was zu unerwarteten Ergebnissen (und potentiell dunklen Stellen) führen kann wenn die Farbverläufe sich überblenden. Daher ist es sicherer, opake Farbverläufe zu definieren.</p>
+
+<p>Hier ist ein Beispiel, wie Transparenz in Farbverläufen verwendet wird:</p>
+
+<p><img alt="Beispiel für Farbverläufe mit Transparenz" class="default internal" src="/files/4275/linear_multibg_transparent2.png" style="height: 119px; width: 643px;"></p>
+
+<pre class="brush: css">/* Die alte Syntax, veraltet und mit Präfix versehen, für alte Browser */
+background: -<em>prefix</em>-linear-gradient(left, rgba(255,255,255,0),
+  rgba(255,255,255,1)), url(http://foo.com/image.jpg);
+
+/* Die neue Syntax, die von Browsern benötigt wird, die dem Standard folgen (Opera 12.1,
+   IE 10, Firefox 16, Chrome 26, Safari 6.1), ohne Präfix */
+background: linear-gradient(to right, rgba(255,255,255,0),
+  rgba(255,255,255,1)), url(http://foo.com/image.jpg);
+</pre>
+
+<p>Die Hintergründe sind überlagert, wobei der erste Hintergrund oben liegt und jeder weitere Hintergrund weiter unten. Durch die Überlagerung von Hintergründen auf diese Weise können kreative Effekte erzeugt werden, wie oben zu sehen.</p>
+
+<h2 id="Radiale_Farbverläufe">Radiale Farbverläufe</h2>
+
+<p>Radiale Farbverläufe werden durch die {{cssxref("radial-gradient")}} Funktion definiert. Die Syntax ist ähnlich der linearer Farbverläufe, außer, dass die Endform (ob Kreis oder Ellipse) des Verlaufs angegeben werden kann, als auch deren Größe. Standardmäßig ist die Endform eine Ellipse mit den gleichen Proportionen wie die der Containerbox.</p>
+
+<h3 id="Farbstopps_2">Farbstopps</h3>
+
+<p>Farbstopps können auf die gleiche Weise wie bei linearen Farbverläufen angegeben werden. Die Verlaufslinie verläuft dabei von der Startposition in alle Richtungen.</p>
+
+<h4 id="Beispiel_Gleichmäßig_verteilte_Farbstopps_2">Beispiel: Gleichmäßig verteilte Farbstopps</h4>
+
+<p>Standardmäßig werden Farbstopps wie bei linearen Verläufen gleichmäßig verteilt:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Screenshot</td>
+   <td class="header">Livedemo</td>
+  </tr>
+  <tr>
+   <td><img alt="radial_gradient_even.png" class="default internal" src="/@api/deki/files/3958/=radial_gradient_even.png"></td>
+   <td>
+    <div style=""> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: css">background: radial-gradient(red, yellow, rgb(30, 144, 255));
+</pre>
+
+<h4 id="Beispiel_Explizit_verteilte_Farbstopps">Beispiel: Explizit verteilte Farbstopps</h4>
+
+<p>Hier werden bestimmte Positionen für die Farbstopps definiert:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Screenshot</td>
+   <td class="header">Livedemo</td>
+  </tr>
+  <tr>
+   <td><img alt="radial_gradient_varied.png" class="default internal" src="/@api/deki/files/3959/=radial_gradient_varied.png"></td>
+   <td>
+    <div style=""> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: css">background: radial-gradient(red 5%, yellow 25%, #1E90FF 50%);
+</pre>
+
+<h3 id="Größe">Größe</h3>
+
+<p>Dies ist einer der Bereiche, in denen sich radiale von linearen Farbverläufen unterscheiden. Es kann ein Größenwert angegeben werden, der den Punkt definiert, der die Größe des Kreises oder der Ellipse bestimmt. Siehe die <a href="/de/docs/Web/CSS/radial-gradient#Größenkonstanten">Beschreibung der Größenkonstanten</a> für Details.</p>
+
+<h4 id="Beispiel_closest-side_für_Ellipsen">Beispiel: <code>closest-side</code> für Ellipsen</h4>
+
+<p>Diese Ellipse verwendet den Größenwert <code>closest-side</code>, welcher bedeutet, dass die Größe durch die Distanz zwischen dem Startpunkt (der Mitte) und der nähesten Seite der eingeschlossenen Box bestimmt wird.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Screenshot</td>
+   <td class="header">Livedemo</td>
+  </tr>
+  <tr>
+   <td><img alt="radial_ellipse_size1.png" class="default internal" src="/@api/deki/files/3960/=radial_ellipse_size1.png"></td>
+   <td>
+    <div style=""> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: css">background: radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white);
+</pre>
+
+<h4 id="Beispiel_farthest-corner_für_Ellipsen">Beispiel: <code>farthest-corner</code> für Ellipsen</h4>
+
+<p>Dieses Beispiel ist ähnlich zum vorherigen mit dem Unterschied, dass die Größe der Ellipse durch <code>farthest-corner</code> bestimmt wird, welches die Größe des Verlaufs durch die Distanz zwischen Startpunkt und der vom Startpunkt am weitesten entfernten Ecke der engeschlossenen Box bestimmt.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Screenshot</td>
+   <td class="header">Livedemo</td>
+  </tr>
+  <tr>
+   <td><img alt="radial_ellipse_size2.png" class="default internal" src="/@api/deki/files/3961/=radial_ellipse_size2.png"></td>
+   <td>
+    <div style=""> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: css">background: radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white);
+</pre>
+
+<h4 id="Beispiel_closest-side_für_Kreise">Beispiel: <code>closest-side</code> für Kreise</h4>
+
+<p>Dieses Beispiel verwendet <code>closest-side</code>, welches die Größe des Kreises als die Distanz zwischen dem Startpunkt und der nähesten Seite definiert.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Screenshot</td>
+   <td class="header">Livedemo</td>
+  </tr>
+  <tr>
+   <td><img alt="radial_circle_size1.png" class="default internal" src="/@api/deki/files/3962/=radial_circle_size1.png"></td>
+   <td>
+    <div style=""> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: css">background: radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white);
+</pre>
+
+<p>Hier entspricht der Radius des Kreises der Hälfte der Höhe der Box, da der obere und untere Rand gleich weit vom Startpunkt entfernt sind und näher als der linke und rechte Rand sind.</p>
+
+<h2 id="Wiederholung_von_Farbverläufen">Wiederholung von Farbverläufen</h2>
+
+<p>Die {{cssxref("linear-gradient")}} und {{cssxref("radial-gradient")}} Eigenschaften unterstützen nicht automatisch die Wiederholung von Farbstopps. Jedoch sind die Eigenschaften {{cssxref("repeating-linear-gradient")}} und {{cssxref("repeating-radial-gradient")}} für diese Funktionalität verfügbar.</p>
+
+<h3 id="Beispiele_Sich_wiederholender_linearer_Farbverlauf">Beispiele: Sich wiederholender linearer Farbverlauf</h3>
+
+<p>Dieses Beispiel verwendet {{cssxref("repeating-linear-gradient")}}, um einen Farbverlauf zu erzeugen:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Screenshot</td>
+   <td class="header">Livedemo</td>
+  </tr>
+  <tr>
+   <td><img alt="repeating_linear_gradient.png" class="default internal" src="/@api/deki/files/3964/=repeating_linear_gradient.png"></td>
+   <td>
+    <div style=""> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: css">background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10px);
+</pre>
+
+<p>Ein weiteres Beispiel, das die {{cssxref("repeating-linear-gradient")}} Eigenschaft verwendet.</p>
+
+<p><a href="/@api/deki/files/6192/=repeat_background_gradient_checked.png"><img alt="repeat_background_gradient_checked.png" class="default internal" src="/@api/deki/files/6192/=repeat_background_gradient_checked.png?size=thumb" style="height: 160px; width: 160px;"></a></p>
+
+<pre class="brush: css">background-color: #000;
+background-image: repeating-linear-gradient(90deg, transparent, transparent 50px,
+      rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px,
+      rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px,
+      rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
+repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px,
+      rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px,
+      rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px,
+      rgba(255, 206, 0, 0.25) 166px),
+repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px,
+      rgba(143, 77, 63, 0.25) 10px),
+repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px,
+      rgba(143, 77, 63, 0.25) 10px);
+</pre>
+
+<h3 id="Beispiel_Sich_wiederholender_radialer_Farbverlauf">Beispiel: Sich wiederholender radialer Farbverlauf</h3>
+
+<p>Dieses Beispiel verwendet {{cssxref("repeating-radial-gradient")}}, um einen Farbverlauf zu erzeugen:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Screenshot</td>
+   <td class="header">Livedemo</td>
+  </tr>
+  <tr>
+   <td><img alt="repeating_radial_gradient.png" class="default internal" src="/@api/deki/files/3965/=repeating_radial_gradient.png"></td>
+   <td>
+    <div style=""> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: css">background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Farbverlauf-bezogene Artikel: {{cssxref("&lt;image&gt;")}}, {{cssxref("&lt;gradient&gt;")}}, {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}.</li>
+</ul>
diff --git a/files/de/firefox_1.5_für_entwickler/changing_the_priority_of_http_requests/index.html b/files/de/firefox_1.5_für_entwickler/changing_the_priority_of_http_requests/index.html
new file mode 100644
index 0000000000..3bb91c8f5a
--- /dev/null
+++ b/files/de/firefox_1.5_für_entwickler/changing_the_priority_of_http_requests/index.html
@@ -0,0 +1,66 @@
+---
+title: Die Priorität von HTTP-Anfragen ändern
+slug: Firefox_1.5_für_Entwickler/Changing_the_priority_of_HTTP_requests
+tags:
+  - HTTP
+translation_of: Mozilla/Firefox/Releases/1.5/Changing_the_priority_of_HTTP_requests
+---
+<div>{{FirefoxSidebar}}</div>
+
+<h3 id="Einleitung">Einleitung</h3>
+
+<p>In <a href="/en/Firefox_1.5_for_developers" title="en/Firefox_1.5_for_developers">Firefox 1.5</a> (Gecko 1.8), wurde eine API hinzugefügt um die Priorität von <a href="/en/HTTP" title="en/HTTP">HTTP</a>-Anfragen zu ändern. Vor dieser Anpassung, gab es keine Möglichkeiten um die Priorität von Anfragen anzupassen. Die API wurde in <a href="/en/nsISupportsPriority" title="en/nsISupportsPriority">nsISupportsPriority</a> definiert, aber nur sehr generell, damit jedes Objekt dieses Interface implementieren kann um das Konzept der Änderung der Priorität einzuführen. Dieser Artikel beschreibt die Vorgehensweise wie dieses Interface zu benutzen ist.</p>
+
+<p>Zum Zeitpunkt des Enstehens dieses Artikels, beeinflusst das Ändern der Priorität von HTTP-Anfragen nur die Reihenfolge in der Verbindungsversuche durchgeführt werden. Damit ist gemeint dass die Priorität nur einen Effekt hat, wenn es mehrere Verbindungen (zu einem Server) gibt als erlaubt.</p>
+
+<p>Die Beispiele in dieser Dokumentation wurden in <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a> in Verbindung mit <a href="/en/XPCOM" title="en/XPCOM">XPCOM</a> geschrieben.</p>
+
+<h3 id="Verwenden_der_API">Verwenden der API</h3>
+
+<p>Sie sollten wissen, dass der Wert des <code>priority</code> Attributes, UNIX Konventionen befolgt, mit niedrigen Zahlen (inklusive negative Zahlen) die die höhere Priorität darstellen.</p>
+
+<h4 id="Auf_die_Priorität_zugreifen_ausgehend_vom_nsIChannel">Auf die Priorität zugreifen ausgehend vom nsIChannel</h4>
+
+<p>Um die Priorität einer HTTP Anfrage ändern zu können, müssen Sie Zugriff auf den  <a href="/en/XPCOM_Interface_Reference/nsIChannel" title="en/XPCOM_Interface_Reference/nsIChannel">nsIChannel</a> haben, von dem die Anfrage ausgeht. Wenn Sie keinen bestehenden Channel haben, dann kann dieser erstellt werden durch:</p>
+
+<pre class="eval">var ios = Components.classes["@<a class="linkification-ext external" href="http://mozilla.org/network/io-service;1" title="Linkification: http://mozilla.org/network/io-service;1">mozilla.org/network/io-service;1</a>"]
+                    .getService(Components.interfaces.nsIIOService);
+var ch = ios.newChannel("<a class="linkification-ext external" href="http://www.example.com/" title="Linkification: http://www.example.com/">http://www.example.com/</a>", null, null);
+</pre>
+
+<p><br>
+ Sobald der <a href="/en/XPCOM_Interface_Reference/nsIChannel" title="en/XPCOM_Interface_Reference/nsIChannel">nsIChannel</a> besteht, ist der Zugriff auf die Priorität wie folgt:</p>
+
+<pre class="eval">if (ch instanceof Components.interfaces.nsISupportsPriority) {
+  ch.priority = Components.interfaces.nsISupportsPriority.PRIORITY_LOWEST;
+}
+</pre>
+
+<p>Das Interface definiert verschiedene Standard Priorität Werte die benutzt werden können, und zwar zwischen <code>PRIORITY_HIGHEST</code> und <code>PRIORITY_LOWEST</code>.</p>
+
+<h4 id="Einen_nsIChannel_erhalten_ausgehend_von_einem_XMLHttpRequest">Einen nsIChannel erhalten ausgehend von einem XMLHttpRequest</h4>
+
+<p>Wenn Sie in <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a> programmieren, möchten Sie eine <a href="/en/XMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a> benutzen, welche eine höhere Abstraktion einer HTTP Anfrage ist. Sie können auf den <code>channel</code> eines <a href="/en/XMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a> zugreifen, nachdem die <code>open</code> Methode aufgerufen wurde:</p>
+
+<pre class="eval">var req = new XMLHttpRequest();
+req.open("GET", "<a class="linkification-ext external" href="http://www.example.com" title="Linkification: http://www.example.com">http://www.example.com</a>", false);
+if (req.channel instanceof Components.interfaces.nsISupportsPriority) {
+  req.channel.priority = Components.interfaces.nsISupportsPriority.PRIORITY_LOWEST;
+}
+req.send(null);
+</pre>
+
+<p><br>
+ Dieses Beispiel beinhaltet einen synchronen <a href="/en/XMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a>, welcher in der Praxis nicht angewendet werden sollte.</p>
+
+<h4 id="Die_Priorität_anpassen">Die Priorität anpassen</h4>
+
+<p><a href="/en/nsISupportsPriority#adjustPriority" title="en/nsISupportsPriority#adjustPriority">nsISupportsPriority</a> beinhaltet eine Methode <code>adjustPriority</code>. Diese Methode sollte benutzt werden, wenn die Priorität einer Anfrage um einen gewissen Betrag geändert werden soll. Zum Beispiel, wenn die Priorität etwas höher sein soll, muss folgendes gemacht werden:</p>
+
+<pre class="eval">// assuming we already have a nsIChannel from above
+if (ch instanceof Components.interfaces.nsISupportsPriority) {
+  ch.adjustPriority(-1);
+}
+</pre>
+
+<p>Hier ist zu bemerken, dass niedrigere Zahlen eine höhere Priorität bedeuten, also wenn um eine negative Zahl angepasst wird, so wird eine höhere Priorität eingestellt.</p>
diff --git a/files/de/firefox_1.5_für_entwickler/index.html b/files/de/firefox_1.5_für_entwickler/index.html
new file mode 100644
index 0000000000..087bc441aa
--- /dev/null
+++ b/files/de/firefox_1.5_für_entwickler/index.html
@@ -0,0 +1,123 @@
+---
+title: Firefox_1.5_für_Entwickler
+slug: Firefox_1.5_für_Entwickler
+tags:
+  - CSS
+  - DOM
+  - Erweiterungen
+  - Firefox 1.5
+  - HTML
+  - JavaScript
+  - RDF
+  - SVG
+  - Web Development
+  - Web Standards
+  - XML
+  - XML Web Services
+  - XSLT
+  - XUL
+translation_of: Mozilla/Firefox/Releases/1.5
+---
+<div>{{FirefoxSidebar}}</div><p>Basierend auf der <a href="/de/Gecko" title="de/Gecko">Gecko</a> 1.8 Engine, verbessert Firefox 1.5 die Unterstützung von Webstandards und stellt neue Fähigkeiten zur Verfügung, um die nächste Generationen von Webapplikationen zu ermöglichen. Firefox 1.5 verbessert die Unterstützung von CSS2 und CSS3, führt neue APIs für skript- und programmierbare 2D Grafiken durch <a href="/de/SVG" title="de/SVG">SVG</a> 1.1 und durch <a href="/de/HTML/canvas" title="de/HTML/canvas"><code>&lt;canvas&gt;</code></a> ein, lernt <a href="/de/XForms" title="de/XForms">XForms</a> und XML Events kennen und wird außerdem viele DHTML, JavaScript und DOM Erweiterungen mit sich bringen.</p>
+
+<h3 id="Entwicklertools">Entwicklertools</h3>
+
+<p>Es gibt verschiedene Tools und Browser-Erweiterungen als Hilfe für Entwickler in Firefox 1.5:</p>
+
+<ul>
+ <li><a href="/de/DOM_Inspector" title="de/DOM_Inspector">DOM Inspector</a> ist ein Tool, das Entwicklern erlaubt, ihre Dokumente zu kontrollieren und zu modifizieren, ohne das Dokument selbst zu ändern. Der DOM Inspector kann während der Installation von Firefox 1.5 ausgewählt werden (Developer Tools) und steht dann in Firefox 1.5 zur Verfügung.</li>
+ <li>JavaScript-Konsole: Ein Tool, um Javascriptcode zu schreiben und zu testen und nebenbei JavaScript- und CSS-Fehler einer Seite zu sehen.</li>
+ <li>Quelltextansicht mit Hervorhebung und Suchhilfen.</li>
+ <li><a class="link-https" href="https://addons.mozilla.org/extensions/showlist.php?application=firefox&amp;category=Developer%20Tools">Browser-Erweiterungen</a> wie <a class="external" href="http://getfirebug.com/">Firebug</a>, <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/60/">Web Developer Toolbar</a>, <a class="external" href="http://livehttpheaders.mozdev.org/">Live HTTP Headers</a>, <a class="external" href="http://validator.w3.org/">HTML Validator</a> und viele mehr.</li>
+</ul>
+
+<p><strong>Achtung:</strong> Einige Erweiterungen, wie z.B. <a class="external" href="http://hacksrus.com/~ginda/venkman/">JavaScript Debugger (Venkman)</a> unterstützen Firefox 1.5 nicht vollständig und werden deshalb ausgeschaltet.</p>
+
+<h3 id="Überblick">Überblick</h3>
+
+<p>Einige der neuen Features von Firefox 1.5:</p>
+
+<h4 id="Für_Entwickler_von_Webseiten_und_Webapplikationen">Für Entwickler von Webseiten und Webapplikationen</h4>
+
+<dl>
+ <dt><a href="/de/SVG_in_HTML" title="de/SVG_in_HTML">Einführung: SVG in XHTML</a></dt>
+ <dd>Lernen Sie, wie sich SVG in XHTML Dokumente einbetten lässt und wie man mit JavaScript und CSS ein Bild manipulieren kann, so einfach als wenn man normales XHTML schreiben würde. Unter <a href="/de/SVG_in_Firefox">SVG in Firefox</a> finden sich außerdem Informationen zum Status der aktuellen Implementation von SVG.</dd>
+ <dt><a href="/de/Grafiken_mit_Canvas_zeichnen" title="de/Grafiken_mit_Canvas_zeichnen">Grafiken mit Canvas zeichnen</a></dt>
+ <dd>Lernen Sie, wie man mit dem <code>&lt;canvas&gt;</code>-Element Grafiken und andere Objekte zeichnet.</dd>
+ <dt><a href="/de/CSS3_Columns" title="de/CSS3_Columns">CSS3 Columns</a></dt>
+ <dd>Lernen Sie etwas über die neue Unterstützung von mehrspaltigen Text-Layout, wie es für CSS3 vorgesehen ist.</dd>
+ <dt><a href="/de/Benutzen_des_Zwischenspeichers_in_Firefox_1.5_(caching)" title="de/Benutzen des Zwischenspeichers in Firefox 1.5 (caching)">Firefox 1.5 Caching benutzen</a></dt>
+ <dd>Sehen Sie wie schnell vorwärts- und rückwärts-Navigation mit dem <code>bfcache</code> ist.</dd>
+</dl>
+
+<h4 id="Entwickler_von_XUL_und_Erweiterungen">Entwickler von XUL und Erweiterungen</h4>
+
+<dl>
+ <dt><a href="/de/Erweiterung_erstellen" title="de/Erweiterung_erstellen">Building an Extension</a></dt>
+ <dd>In diesem Tutorial wird Ihnen Schritt-für-Schritt erklärt, wie Sie eine einfache Erweiterung für Firefox entwickeln können. Siehe auch <a class="external" href="http://kb.mozillazine.org/Getting_started_with_extension_development">anhand des Tutorials auf MozillaZine(en)</a>, welches die neuen Möglichkeiten des Erweiterungsmanagers in Firefox 1.5 erklärt.</dd>
+ <dt><a href="/de/XPCNativeWrapper" title="de/XPCNativeWrapper">XPCNativeWrapper</a></dt>
+ <dd><code>XPCNativeWrapper</code> ist eine Möglichkeit ein Objekt so zu verpacken, dass es sicher ist, es als privilegierten Code zu benutzen. Dies funktioniert in allen Firefox-Versionen, obwohl sich das Verhalten mit Firefox 1.5 verändert hat.</dd>
+ <dt><a href="/de/Preferences_System" title="de/Preferences_System">Preferences System</a></dt>
+ <dd>Erfahren Sie mehr über das Widgets-System mit dem Sie einfacher Optionsfenster erstellen können und dabei sogar Javascript sparen.</dd>
+ <dt><a href="/de/Internationale_Zeichen_in_XUL_JavaScript">Internationale Zeichen in XUL JavaScript</a></dt>
+ <dd>XUL JavaScript Dateien können nun Buchstaben enthalten die kein ASCII sind.</dd>
+ <dt><a href="/de/Tree_Widget_Änderungen" title="de/Tree_Widget_Änderungen">Tree API Änderungen</a></dt>
+ <dd>Die Schnittstellen zum Zugriff auf XUL <code>&lt;tree&gt;</code>-Elemente haben sich geändert.</dd>
+ <dt><a href="/de/Änderungen_an_XUL_für_Firefox_1.5">Änderungen an XUL für Firefox 1.5</a></dt>
+ <dd>Zusammenfassung von XUL Änderungen. Siehe auch <a href="/de/XUL_Anwendungen_für_Firefox_1.5_anpassen">XUL Anwendungen für Firefox 1.5 anpassen</a>.</dd>
+</dl>
+
+<h5 id="Netzwerk-bezogene_Änderungen">Netzwerk-bezogene Änderungen</h5>
+
+<ul>
+ <li>Eingabeaufforderungen zu Zertifikaten können von nun an über Channels überschrieben werden. Das funktioniert über eine Interface-Anforderung als ein <a href="/de/nsIChannel" title="de/nsIChannel">nsIChannel</a> notificationCallback und gibt ein Interface für <a href="/de/nsIBadCertListener" title="de/nsIBadCertListener">nsIBadCertListener</a> aus.</li>
+ <li>Listener von nsIWebBrowserPersist können nun <a href="/de/XPCOM_Interface_Referenz/nsIInterfaceRequestor" title="de/nsIInterfaceRequestor">nsIInterfaceRequestor</a>::GetInterface implementieren und verfügen über die Möglichkeit allen Interfaces dies bereitzustellen, darunter <a href="/de/nsIProgressEventSink" title="de/nsIProgressEventSink">nsIProgressEventSink</a> (nicht sehr nützlich, überflüssig mit <a href="/de/nsIWebProgressListener" title="de/nsIWebProgressListener">nsIWebProgressListener</a>). Nützliche Interfaces enthalten hier <a href="/de/NsIChannelEventSink" title="de/NsIChannelEventSink">nsIChannelEventSink</a> und <a href="/de/nsIBadCertListener" title="de/nsIBadCertListener">nsIBadCertListener</a>.</li>
+ <li>Erweiterungen oder andere Necko Anwender, darunter XMLHttpRequest, können einen Cookie Header explizit festlegen, und Necko wird diesen nicht ersetzen. Gespeicherte Cookies werden mit dem gesetzten Header zusammengelegt, sodass der explizit festgelegte Header den gespeicherten Cookie überschreibt.</li>
+</ul>
+
+<h3 id="Neue_Möglichkeiten_für_den_Endbenutzer">Neue Möglichkeiten für den Endbenutzer</h3>
+
+<h4 id="User_Experience">User Experience</h4>
+
+<ul>
+ <li><strong>Schnelle Navigation</strong> mit verbesserter Vorwärts- und Rückwärts-Performance.</li>
+ <li><strong>Anordnung von Tabs über „Drag und Drop“.</strong></li>
+ <li><strong>Answers.com ist in der Liste der Suchmaschinen aufgenommen worden</strong>, um schnelle Wörterbuchabfragen zu ermöglichen.</li>
+ <li><strong>Verbesserungen an der Benutzbarkeit</strong>, darunter besser beschriebene Fehlermeldungen, neu angeordnete Optionsmenüs, verbesserte RSS-Unterstützung und „Safe Mode“ für sicheres Surfen.</li>
+ <li><strong>Bessere Zugänglichkeit</strong> durch DHTML.</li>
+ <li><strong>Tool um fehlerhafte Webseiten zu melden</strong>, die nicht mit Firefox kompatibel sind.</li>
+ <li><strong>Bessere Unterstützung für Mac OS X</strong> (10.2 und höher) durch Profil-Imigration von Safari und Mac Internet Explorer.</li>
+</ul>
+
+<h4 id="Sicherheit_und_Privatsphäre">Sicherheit und Privatsphäre</h4>
+
+<ul>
+ <li><strong>Automatische Updates</strong>, um Softwareupdates zu vereinfachen. Benachrichtigung, wenn ein Update zur Verfügung steht. Ein Update wird kleiner als ein MB sein. Das Updaten von Erweiterungen wurde auch verbessert.</li>
+ <li><strong>Verbesserter Popup-Blocker.</strong></li>
+ <li>Die Funktion <strong>Private Daten löschen</strong>, stellt über ein Menü oder einen Tastaturkürzel eine einfache Möglichkeit zum Löschen aller privaten Daten dar.</li>
+</ul>
+
+<h4 id="Unterstützung_von_offenen_Webstandards">Unterstützung von offenen Webstandards</h4>
+
+<p>Mit der Unterstützung von Webstandards bleibt Firefox weiter führend auf dem Markt mit einheitlichen, systemübergreifenden Implementierungen für:</p>
+
+<ul>
+ <li>Hypertext Markup Language (<a href="/de/HTML" title="de/HTML">HTML</a>) und Extensible Hypertext Markup Language (<a href="/de/XHTML" title="de/XHTML">XHTML</a>): <a class="external" href="http://www.w3.org/TR/html401/">HTML 4.01</a> und <a class="external" href="http://www.w3.org/TR/xhtml1/">XHTML 1.0/1.1</a></li>
+ <li>Cascade Style Sheets (<a href="/de/CSS" title="de/CSS">CSS</a>): <a class="external" href="http://www.w3.org/TR/REC-CSS1">CSS Level 1</a>, <a class="external" href="http://www.w3.org/TR/REC-CSS2">CSS Level 2</a> und Teile von <a class="external" href="http://www.w3.org/Style/CSS/current-work.html">CSS Level 3</a></li>
+ <li>Document Object Model (<a href="/de/DOM" title="de/DOM">DOM</a>): <a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/">DOM Level 1</a>, <a class="external" href="http://www.w3.org/DOM/DOMTR#dom2">DOM Level 2</a> und Teile von <a class="external" href="http://www.w3.org/DOM/DOMTR#dom3">DOM Level 3</a></li>
+ <li>Mathematical Markup Language: <a class="external" href="http://www.w3.org/Math/">MathML Version 2.0</a></li>
+ <li>Extensible Markup Language (<a href="/de/XML" title="de/XML">XML</a>): <a class="external" href="http://www.w3.org/TR/REC-xml">XML 1.0</a>, <a class="external" href="http://www.w3.org/TR/REC-xml-names/">Namespaces in XML</a>, <a class="external" href="http://www.w3.org/TR/xml-stylesheet/">Associating Style Sheets with XML Documents 1.0</a>, <a class="external" href="http://lists.w3.org/Archives/Public/www-xml-linking-comments/2001AprJ%20un/att-0074/01-NOTE-FIXptr-20010425.htm">Fragment Identifier for XML</a></li>
+ <li>XSL Transformations (<a href="/de/XSLT" title="de/XSLT">XSLT</a>): <a class="external" href="http://www.w3.org/TR/xslt">XSLT 1.0</a></li>
+ <li>XML Path Language (<a href="/de/XPath" title="de/XPath">XPath</a>): <a class="external" href="http://www.w3.org/TR/xpath">XPath 1.0</a></li>
+ <li>Resource Description Framework (<a href="/de/RDF" title="de/RDF">RDF</a>): <a class="external" href="http://www.w3.org/RDF/">RDF</a></li>
+ <li>Simple Object Access Protocol (SOAP): <a class="external" href="http://www.w3.org/TR/SOAP/%20">SOAP 1.1</a></li>
+ <li><a href="/de/JavaScript" title="de/JavaScript">JavaScript</a> 1.6, basierend auf ECMA-262, revision 3: <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMA-262</a></li>
+</ul>
+
+<p>Firefox 1.5 unterstützt folgende Protokolle zum Datentransfer (HTTP, FTP, SSL, TSL, etc.), multi-linguale Buchstaben (Unicode), Grafiken (GIF, JPEG, PNG, SVG und weitere) und die letzte Version der weltweit beliebten Skriptsprache <a href="/de/Neu_in_JavaScript_1.6" title="de/Neu_in_JavaScript_1.6">JavaScript 1.6</a>.</p>
+
+<h3 id="Änderungen_seit_Firefox_1.0">Änderungen seit Firefox 1.0</h3>
+
+<p>Viele Neues wurde in Firefox eingeführt, seit dem letzten Release am 9. November 2004. Firefox wurde mit vielen Eigenschaften erweitert und Fehler wurden beseitigt. Eine detailreiche Liste findet sich auf: <a class="external" href="http://www.squarefree.com/burningedge/releases/1.5-comprehensive.html">squarefree.com (Englisch)</a>.</p>
+
+<p>{{ languages( { "en": "en/Firefox_1.5_for_developers", "es": "es/Firefox_1.5_para_Desarrolladores", "fr": "fr/Firefox_1.5_pour_les_d\u00e9veloppeurs", "it": "it/Firefox_1.5_per_Sviluppatori", "ja": "ja/Firefox_1.5_for_developers", "nl": "nl/Firefox_1.5_voor_ontwikkelaars", "pl": "pl/Firefox_1.5_dla_programist\u00f3w", "pt": "pt/Firefox_1.5_para_Desenvolvedores" } ) }}</p>
diff --git a/files/de/firefox_3.5_für_entwickler/index.html b/files/de/firefox_3.5_für_entwickler/index.html
new file mode 100644
index 0000000000..33e6a0c728
--- /dev/null
+++ b/files/de/firefox_3.5_für_entwickler/index.html
@@ -0,0 +1,241 @@
+---
+title: Firefox_3.5_für_Entwickler
+slug: Firefox_3.5_für_Entwickler
+tags:
+  - Firefox 3.5
+  - Gecko 1.9.1
+translation_of: Mozilla/Firefox/Releases/3.5
+---
+<div>{{FirefoxSidebar}}</div><p>In <a class="external" href="http://www.firefox.com">Firefox 3.5</a> wurde eine nicht geringe Zahl an neuen Bestandteilen eingeführt, darunter zusätzliche und verbesserte Unterstützung für eine Vielzahl von Webstandards. Dieser Artikel stellt eine umfangreiche Liste mit Links zu anderen Artikeln über die Hauptverbesserungen zur Verfügung.</p>
+
+<h2 id="Neue_Bestandteile_in_Firefox_3.5_für_Entwickler">Neue Bestandteile in Firefox 3.5 für Entwickler</h2>
+
+<h3 id="Für_Webseiten_und_Webanwendungsentwickler">Für Webseiten und Webanwendungsentwickler</h3>
+
+<h4 id="HTML5-Unterstützung">HTML5-Unterstützung</h4>
+
+<dl>
+ <dt><a href="/de/Audio_und_video_in_Firefox" title="de/Audio_und_video_in_Firefox">Audio- und Video-Elemente</a></dt>
+ <dd>Firefox 3.5 fügt Unterstützung für die HTML 5 <a href="/de/HTML/Element/audio" title="de/HTML/Element/audio"><code>audio</code></a> und <a href="/de/HTML/Element/video" title="de/HTML/Element/video"><code>video</code></a>-Elemente hinzu.</dd>
+ <dt><a href="/de/Offline_Ressourcen_in_Firefox" title="de/Offline_Ressourcen_in_Firefox">Offline-Resourcen</a></dt>
+ <dd>Firefox 3.5 unterstützt nun vollständig die HTML5 „Offline-Resources“ Spezifikation.</dd>
+ <dt><a href="/de/DragDrop/Drag_und_Drop" title="de/DragDrop/Drag_und_Drop">Drag und Drop</a></dt>
+ <dd>Die HTML5 Drag und Drop API bietet Unterstützung für Drag und Drop von Elementen innerhalb einer Webseite und zwischen verschiedenen Webseiten. Dies beinhaltet auch eine einfachere API für die Benutzung von Erweiterungen und Mozilla-basierten Anwendungen.</dd>
+</dl>
+
+<h4 id="Neu_unterstütze_CSS_Funktionen">Neu unterstütze CSS Funktionen</h4>
+
+<dl>
+ <dt><a href="/de/CSS/@font-face" title="de/CSS/@font-face">Unterstützung für ladbare Schriftarten</a></dt>
+ <dd>Die neue {{ cssxref("@font-face") }} @-Regel ermöglicht es Webseiten, ladbare Schriftarten zu enthalten, sodass die Seiten genauso gerendert werden können, wie es der Autor der Seite es erwartet.</dd>
+ <dt><a href="/de/CSS/Media_Queries" title="de/CSS/Media_Queries">CSS Media Queries</a></dt>
+ <dd>Firefox 3.5 unterstützt nun CSS Medienanfragen, die die Unterstützung für medienabhängige Seiten verbessern.</dd>
+ <dt>{{ cssxref(":before") }} und {{ cssxref(":after") }} auf CSS 2.1 aktualisiert</dt>
+ <dd>Die <code>:before</code> und <code>:after</code> Pseudo-Elemente wurden auf volle CSS-2.1-Unterstützung aktualisiert; hinzugefügte Unterstützung für <code>position</code>, <code>float</code>, <code>list-style-*</code>, und einige <code>display</code>-Eigenschaften.</dd>
+ <dt><code>ch</code> Einheit für Längenangaben</dt>
+ <dd>Die <code>ch</code> Einheit könn jetzt überall dort, wo eine Länge angegeben werden kann, verwendet werden. <code>1ch</code> entspricht der Länge des »0« (Null) Zeichens.</dd>
+ <dt><a href="/de/CSS/opacity" title="de/CSS/opacity"><code>opacity</code></a></dt>
+ <dd>Die <code>-moz-opacity</code> Mozilla CSS Erweiterung wurde zu Gunsten der standardisierten <code>opacity</code>-Eigenschaft entfernt.</dd>
+ <dt><a href="/de/CSS/text-shadow" title="de/CSS/text-shadow"><code>text-shadow</code></a></dt>
+ <dd>Die <code>text-shadow</code>-Eigenschaft, die es Webinhalten erlaubt Schatteneffekte auf Text und Text-Dekorationen festzulegen, wird nun unterstützt.</dd>
+ <dt><a href="/de/CSS/word-wrap" title="de/CSS/word-wrap"><code>word-wrap</code></a></dt>
+ <dd>Diese neu unterstützte Eigenschaft erlaubt es, festzulegen, ob Zeilen innerhalb von Worten umgebrochen werden dürfen. Das kann nützlich sein, wenn die Wörter aufgrund ihrer Länge sonst zum Überlauf führen.</dd>
+ <dt>Die <code>white-space</code> Eingeschaft unterstützt den <code>pre-line</code> Wert</dt>
+ <dd>Die {{ cssxref("white-space") }} Eigenschaft akzeptiert nun den <code>pre-linie</code> Wert.</dd>
+ <dt>Firefox 3.5 fügt die folgenden Mozilla CSS Eingenschaften ein:</dt>
+ <dd><a href="/De/CSS/-moz-box-shadow" title="De/CSS/-moz-box-shadow"><code>-moz-box-shadow</code></a><br>
+ <a href="/de/CSS/-moz-border-image" title="de/CSS/-moz-border-image"><code>-moz-border-image</code></a><br>
+ <a href="/de/CSS/-moz-column-rule" title="de/CSS/-moz-column-rule"><code>-moz-column-rule</code></a><br>
+ <a href="/de/CSS/-moz-column-rule-width" title="de/CSS/-moz-column-rule-width"><code>-moz-column-rule-width</code></a><br>
+ <a href="/de/CSS/-moz-column-rule-style" title="de/CSS/-moz-column-rule-style"><code>-moz-column-rule-style</code></a><br>
+ <a href="/de/CSS/-moz-column-rule-color" title="de/CSS/-moz-column-rule-color"><code>-moz-column-rule-color</code></a>
+ <dl>
+  <dt>Pseudo-Klasse <a href="/de/CSS/-moz-window-shadow" title="de/CSS/-moz-window-shadow"><code>-moz-window-shadow</code></a> und Eigenschaft <a href="/de/CSS/:-moz-system-metric(mac-graphite-theme)" title="de/CSS/:-moz-system-metric(mac-graphite-theme)"><code>-moz-system-metric(mac-graphite-theme)</code> </a></dt>
+  <dd>Diese neuen CSS-Eigenschaften wurden hinzugefügt, um das die Arbeit mit Themes zu erleichtern.</dd>
+  <dt>Neue Werte für <a href="/de/CSS/-moz-appearance" title="de/CSS/-moz-appearance"><code>-moz-appearance</code></a></dt>
+  <dd><code>-moz-win-glass</code> und <code>-moz-mac-unified-toolbar</code> wurden als Werte zu <code>-moz-appearance</code> hinzugefügt.</dd>
+  <dt><a href="/de/CSS/Verwendung_von_CSS_Transformationen" title="de/CSS/Verwendung_von_CSS_Transformationen">Verwendung von CSS-Transformationen</a></dt>
+  <dd>Firefox 3.5 unterstützt CSS-Transformationen. Siehe <a href="/de/CSS/-moz-transform" title="de/CSS/-moz-transform"><code>-moz-transform</code></a> und <a href="/de/CSS/-moz-transform-origin" title="de/CSS/-moz-transform-origin"><code>-moz-transform-origin</code></a> für Details.</dd>
+  <dt>Diese Selektoren werden in Firefox 3.5 neu unterstützt:</dt>
+  <dd><a href="/de/CSS/:nth-child" title="de/CSS/:nth-child"><code>:nth-child</code></a><br>
+  <a href="/de/CSS/:nth-last-child" title="de/CSS/:nth-last-child"><code>:nth-last-child</code></a><br>
+  <a href="/de/CSS/:nth-of-type" title="de/CSS/:nth-of-type"><code>:nth-of-type</code></a><br>
+  <a href="/de/CSS/:nth-last-of-type" title="de/CSS/:nth-last-of-type"><code>:nth-last-of-type</code></a><br>
+  <a href="/de/CSS/:first-of-type" title="de/CSS/:first-of-type"><code>:first-of-type</code></a><br>
+  <a href="/de/CSS/:nth-last-of-type" title="de/CSS/:nth-last-of-type"><code>:last-of-type</code></a><br>
+  <a href="/de/CSS/:only-of-type" title="de/CSS/:only-of-type"><code>:only-of-type</code></a></dd>
+ </dl>
+
+ <h4 id="Neue_DOM_Funktionen">Neue DOM Funktionen</h4>
+
+ <dl>
+  <dt><a href="/de/DOM/Storage#localStorage" title="de/DOM/Storage#localStorage">localStorage</a></dt>
+  <dd>Firefox 3.5 fügt Unterstützung für die Web Storage <code>localStorage</code> Eigenschaft hinzu, welche einen Weg für Webanwendungen bereitstellt, Daten lokal auf dem Computer des Benutzers zu speichern.</dd>
+  <dt><a href="/de/Verwendung_von_Web_Workers" title="de/Verwendung_von_Web_Workers">Verwendung von Web Workers</a></dt>
+  <dd>Firefox 3.5 unterstützt Web Workers, um einfaches Multi-Threading in Webanwendungen zu ermöglichen.</dd>
+  <dt><a href="/de/Verwendung_von_Geolocation" title="de/Verwendung_von_Geolocation">Verwendung von Geolocation</a></dt>
+  <dd>Firefox 3.5 unterstützt die Geolocation API, die es Webanwendungen erlaubt, Informationen über die aktuelle Position des Benutzers zu erhalten, wenn ein Provider für diese Informationen installiert und aktiviert ist.</dd>
+  <dt><a href="/de/DOM/Mit_Selektoren_DOM_Elemente_auswählen" title="de/DOM/Mit_Selektoren_DOM_Elemente_auswählen">Mit Selektoren DOM Elemente auswählen</a></dt>
+  <dd>Die Selektoren-API erlaubt es, ein Dokument nach Elementen, die einer bestimmten Auswahlregel gerecht werden, abzufragen.</dd>
+  <dt><a href="/de/DOM/Mausgesten_Events" title="de/DOM/Mausgesten_Events">Mausgesten Events</a></dt>
+  <dd>Firefox 3.5 unterstützt Mausgesten Events wie z.B. »Trackpad-Swipes«.</dd>
+  <dt><a href="/de/DOM/NodeIterator" title="de/DOM/NodeIterator">Das <code>NodeIterator</code> Objekt</a></dt>
+  <dd>Das <code>NodeIterator</code> Objekt bietet Unterstützung für das iterieren über eine Liste von Knoten in einem DOM-Unterbaum.</dd>
+  <dt><a href="/de/Gecko-spezifische_DOM_Events#MozAfterPaint" title="de/Gecko-spezifische_DOM_Events#MozAfterPaint">Das MozAfterPaint Event</a></dt>
+  <dd>Dieses neue DOM-Event wird nach Painting-Aktualisierungen in Fenstern ausgelöst.</dd>
+  <dt><a href="/de/Gecko-spezifische_DOM_Events#MozMousePixelScroll" title="de/Gecko-spezifische_DOM_Events#MozMousePixelScroll">Das MozMousePixelScroll Event</a></dt>
+  <dd>Dieses neue DOM-Event erlaubt die Erkennung von pixel-basierten Mausrad-Events anstatt von zeilenbasierten Scroll-Events.</dd>
+ </dl>
+
+ <h4 id="Neue_JavaScript_Funktionen">Neue JavaScript Funktionen</h4>
+
+ <dl>
+  <dt><a href="/de/Neu_in_JavaScript_1.8.1" title="de/Neu_in_JavaScript_1.8.1">Neues in JavaScript</a></dt>
+  <dd>Ein Überblick über die Veränderungen in JavaScript 1.8.1</dd>
+  <dt><a href="/de/Core_JavaScript_1.5_Referenz/Globale_Objekte/Object/GetPrototypeOf" title="de/Core_JavaScript_1.5_Referenz/Globale_Objekte/Object/GetPrototypeOf"><code>Object.getPrototypeOf()</code></a></dt>
+  <dd>Diese Methode gibt einen Prototyp eines bestimmten Objektes zurück.</dd>
+  <dt><a href="/de/Verwendung_von_nativen_JSON" title="de/Verwendung_von_nativen_JSON">Verwendung von nativen JSON</a></dt>
+  <dd>Firefox 3.5 besitzt nun nativen <a href="/de/JSON" title="de/JSON">JSON</a>-Support.</dd>
+  <dt>Neue Trim-Methoden für das String-Objekt</dt>
+  <dd>Das <a href="/de/Core_JavaScript_1.5_Referenz/Globale_Objekte/String" title="de/Core_JavaScript_1.5_Referenz/Globale_Objekte/String"><code>String</code></a>-Objekt besitzt nun die Methoden <a href="/de/Core_JavaScript_1.5_Referenz/Globale_Objekte/String/Trim" title="de/Core_JavaScript_1.5_Referenz/Globale_Objekte/String/Trim"><code>trim()</code></a>, <a href="/de/Core_JavaScript_1.5_Referenz/Globale_Objekte/String/TrimLeft" title="de/Core_JavaScript_1.5_Referenz/Globale_Objekte/String/TrimLeft"><code>trimLeft()</code></a>, und <a href="/de/Core_JavaScript_1.5_Referenz/Globale_Objekte/String/TrimRight" title="de/Core_JavaScript_1.5_Referenz/Globale_Objekte/String/TrimRight"><code>trimRight()</code></a>.</dd>
+ </dl>
+
+ <h4 id="Netzwerk">Netzwerk</h4>
+
+ <dl>
+  <dt><a href="/de/HTTP_access_control" title="de/HTTP_access_control">Cross-Site-Zugriff für HTTP</a></dt>
+  <dd>In Firefox 3.5 ist es nun möglich, über Domaingrenzen hinweg zu arbeiten, auch wenn der HTTP-Request über das <a href="/de/XMLHttpRequest" title="de/XMLHttpRequest"><code>XMLHttpRequest</code></a> gestartet wurde, vorrausgesetzt, der Server unterstützt dieses.</dd>
+  <dt><a href="/de/XMLHttpRequest/XMLHttpRequest_verwenden#Monitoring_progress" title="de/XMLHttpRequest/XMLHttpRequest_verwenden#Monitoring_progress">Progress-Events für <code>XMLHttpRequest</code></a></dt>
+  <dd>Progress-Events werden dazu bereitgestellt, um Erweiterungen zu befähigen, den Fortschritt der Requests zu überwachen.</dd>
+  <dt>Verbesserte Unterstützung für synchrones <code>XMLHttpRequest</code></dt>
+  <dd><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=340345">DOM Timeout</a> und <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=333198">Input Events</a> werden nun während eines synchronen XMLHttpRequest unterdrückt.</dd>
+  <dt><a href="/de/DNS-Prefetching_überwachen" title="de/DNS-Prefetching_überwachen">DNS-Prefetching_überwachen</a></dt>
+  <dd>Firefox 3.5 stellt DNS-Prefetching zur Verfügung, wobei es die Namensauflösung für Domains vor der Zeit für die Links durchführt, was Zeit spart, wenn die Links aufgerufen werden. Dieser Artikel beschreibt wie Sie Ihre Webseite mit Prefetching-Operationen aufpeppeln können.</dd>
+ </dl>
+
+ <h4 id="Neue_Canvas_Funktionen">Neue Canvas Funktionen</h4>
+
+ <dl>
+  <dt><a href="/de/Text_mittels_canvas_zeichnen" title="de/Text_mittels_canvas_zeichnen">HTML5 Text-API für <code>canvas</code>-Elemente</a></dt>
+  <dd>Canvas-Elemente unterstützten nun die HTML5 Text-API.</dd>
+  <dt><a href="/de/Canvas_Tutorial/Styles_und_Farben_anwenden#Schatten" title="de/Canvas_Tutorial/Styles_und_Farben_anwenden#Schatten">Schatteneffekte innerhalb eines <code>canvas</code></a></dt>
+  <dd>Schatteneffekte für canvas-Elemente werden nun unterstützt.</dd>
+  <dt><a href="/de/HTML/Canvas/Pixel-Manipulation_mit_Canvas#Ein_ImageData_Objekt_erstellen" title="de/HTML/Canvas/Pixel-Manipulation_mit_Canvas#Ein_ImageData_Objekt_erstellen"><code>createImageData()</code></a></dt>
+  <dd>Die Canvas-Methode <code>createImageData()</code> wird nun unterstützt. Sie erlaubt es ein <code>ImageData</code>-Objekt zu erzeugen anstatt es automatisch erzeugen zu lassen. Dies kann die Geschwindigkeit anderer <code>ImageData</code>-Methoden steigern, da sie ja kein Objekt mehr erzeugen müssen.</dd>
+  <dt><code>moz-opaque</code>-Attribut</dt>
+  <dd>Dieses Attribut lässt das Canvas wissen, ob Transparenz ein Faktor sein wird oder nicht. Mit diesem Wissen wird die Geschwindigkeit gesteigert.</dd>
+ </dl>
+
+ <h4 id="Neue_SVG-Bestandteile">Neue SVG-Bestandteile</h4>
+
+ <dl>
+  <dt><a href="/de/SVG_Effekte_auf_HTML_Inhalte_anwenden" title="de/SVG_Effekte_auf_HTML_Inhalte_anwenden">SVG Effekte auf HTML/XHTML anwenden</a></dt>
+  <dd>SVG Effekte können nun auf HTML bzw. XHTML angewandt werden.</dd>
+ </dl>
+
+ <h4 id="Sonstige_neue_Funktionen">Sonstige neue Funktionen</h4>
+
+ <dl>
+  <dt><a href="/de/ICC_Farbkorrektur_in_Firefox" title="de/ICC_Farbkorrektur_in_Firefox">ICC Farbkorrektur</a></dt>
+  <dd>Firefox 3.5 unterstützt nun ICC-Farbkorrektur für "getaggte" Bilder.</dd>
+  <dt><code>defer</code>-Attribut Unterstützung für <a href="/de/HTML/Element/Script" title="de/HTML/Element/Script"><code>script</code></a>-Elemente</dt>
+  <dd>Dieses Attribut weist den Browser an, dass die Verarbeitung der Seite fortgesetzt werden soll, obwohl das Skript noch nicht fertig ausgeführt wurde.</dd>
+ </dl>
+
+ <h3 id="Anderweitige_Verbesserungen">Anderweitige Verbesserungen</h3>
+
+ <ul>
+  <li>Die Textknoten-Eigenschaften <code><a href="de/DOM/Text.wholeText">wholeText</a></code> und <code><a href="de/DOM/Text.replaceWholeText">replaceWholeText()</a></code> wurden implementiert.</li>
+  <li>Die Eigenschaft <code><a href="de/DOM/Element.children">element.children</a></code> wurde hinzugefügt. Es gibt eine <em>Sammlung</em> mit den Kindelementen des gegebenen Elementes zurück.</li>
+  <li>Die Eigenschaft <a href="/de/DOM/element.contentEditable"><code>element.contentEditable</code></a> wird von nun an unterstützt, um editierbare Elemente zu ermöglichen.</li>
+  <li>Die Element Traversal API wird nun vom DOM <a href="de/DOM/element">Element</a>-Objekt unterstützt.</li>
+  <li>HTML-Knoten können nun per <a href="/de/DOM/Node/CloneNode"><code>cloneNode()</code></a> geklont werden.</li>
+  <li>Die nichtstandardkonforme Methode <code>getBoxObjectFor()</code> aus dem DOM wurde zu Gunsten von <a href="/de/DOM/element.getBoundingClientRect"><code>getBoundingClientRect()</code></a> ersetzt.</li>
+  <li>Versandte DOM-Events können nun re-versandt werden. Dadurch kann der Acid 3 Test 30 bestanden werden.</li>
+  <li>Am DOM 2 Range Handling wurden Verbesserungen vorgenommen.</li>
+  <li>Im nicht-chrome Anwendungsbereich, sind abgefangene Objekte in Exceptions die tätsächlichen Objekte, anstatt eines <a href="/de/XPConnect">XPConnect</a> Wrappers außerhalb des abgefangenen Objekts.</li>
+  <li>SVG ID Referenzen sind jetzt live.</li>
+  <li>SVG-Filter arbeiten nun auch mit <code>foreignObject</code>.</li>
+  <li>Die <code>GetSVGDocument()</code>-Methode wurde aus Gründen der Kompatibilität zu <a href="/de/HTML/Element/object"><code>object</code></a> und <a href="/de/HTML/Element/iframe"><code>iframe</code></a>-Elementen hinzugefügt.</li>
+  <li>Implizite Einstellungen von Eigenschaften in Objekt- und Array-Initialisierern führen nicht mehr Setter in JavaScript aus. Siehe dazu:<a class="external" href="http://www.developer.mozilla.org/web-tech/2009/04/29/object-and-array-initializers-should-not-invoke-setters-when-evaluated">Object and array initializers should not invoke setters when evaluated</a> for details.</li>
+  <li>Die <code>gDownloadLastDir.path</code>-Variable wurde umbenannt zu: <code>gDownloadLastDir.file</code>, da es sich nun auf eine {{ interface("nsIFile") }} bezieht.</li>
+  <li>Die <code>gDownloadLastDirPath</code>-Variable wurde umbenannt zu: <code>gDownloadLastDirFile</code>, da es sich nun auf eine {{ interface("nsIFile") }} bezieht.</li>
+  <li>Ab Firefox 3.5 können keine <code>data:</code> Bindings in chrome Paketen, die <code>XPCNativeWrapper</code> Automation abrufen, mehr verwendet werden.</li>
+ </ul>
+
+ <h3 id="Für_XUL_und_Addon-Entwickler">Für XUL und Addon-Entwickler</h3>
+
+ <p>Wenn Sie ein Addon-Entwickler sind, sollten sie das Dokument <a class="internal" href="/de/Updating_extensions_for_Firefox_3.5" title="En/Updating extensions for Firefox 3.5">Erweiterungen für Firefox 3.5 aktualisieren</a> unbedingt lesen. Diese beinhaltet einen extrem hilfreichen Überblick über das, was geändert wurde und Ihre Erweiterung betrifft oder betreffen könnte.</p>
+
+ <h4 id="Neue_Komponenten_und_Funktionalitäten">Neue Komponenten und Funktionalitäten</h4>
+
+ <dl>
+  <dt><a href="/de/Erweiterungen_im_privaten_Modus">Erweiterungen im „Private-Browsing“-Modus</a></dt>
+  <dd>Firefox 3.5 bietet nun den „Private-Browsing“-Modus an, sodass keine Aufzeichnungen über die Aktivität des Benutzer gemacht werden. Erweiterungen können Private-Browsing anhand der in diesem Artikeln beschriebenen Methoden unterstützen.</dd>
+  <dt><a href="/de/Sicherheitsverbesserungen_in_Firefox_3.5">Sicherheitsverbesserungen in Firefox 3.5</a></dt>
+  <dd>Dieser Artikel beschreibt sicherheitsrelevante Verbesserungen in Firefox 3.5</dd>
+  <dt><a href="/de/Theme_Veränderungen_in_Firefox_3.5">Theme Verbesserungen in Firefox 3.5</a></dt>
+  <dd>Dieser Artikel beschreibt Themes betreffende Verbesserungen in Firefox 3.5</dd>
+  <dt><a href="/de/Überwachen_von_WiFi_Zugriffspunkten">Überwachen von WiFi-Zugriffspunkte</a></dt>
+  <dd>Code mit <code>UniversalXPConnect</code>-Priviligien kann nun die Liste der verfügbaren Access Points überwachen, Informationen über deren SSIDs, Mac-Adressen und Signalstärke erhaltend. Dies kann zusammen mit der Geolocation für die Bereitstellung von WiFi-basierten Location Services genutzt werden.</dd>
+ </dl>
+
+ <h4 id="Bemerkenswerte_Veränderungen_und_Verbesserungen">Bemerkenswerte Veränderungen und Verbesserungen</h4>
+
+ <ul>
+  <li>Das XUL <code><a href="de/XUL/textbox">textbox</a></code>-Widget bietet nun ein <code><a href="de/XUL/Attribute/textbox.type">search</a></code>-Typ für die Benutzung als Suchfeld an.</li>
+  <li>Um Drag and Drop zwischen Fenster zu unterstützen, bietet das <a href="/de/XUL/browser"><code>browser</code></a>-Widget nun eine <a href="/de/XUL/Method/SwapDocShells"><code>swapDocShells()</code></a>-Methode an.</li>
+  <li>Das <a href="/de/XUL/Attribute/Panel.level"><code>level</code></a> Attribut wurde zum <a href="/de/XUL/panel"><code>panel</code></a> Element hinzugefügt. Dieses Attribut legt fest, ob das Panel überhalb anderer Anwendungen steht oder einfach überhalb des Fensters indem sich das Panel befindet.</li>
+  <li>XUL-Elemente unterstützen nun die <code>clientHeight, clientWidth, scrollHeight</code>und <code>scrollWidth</code>Eigenschaften.</li>
+  <li><a href="/de/XUL/keyset"><code>keyset</code></a>s beinhalteten nun ein <code>disabled</code>-Attribut.</li>
+  <li>Außerdem können<a href="/de/XUL/keyset"><code> keyset</code></a>s nun dank der <a href="/de/DOM/Node.removeChild"><code>removeChild()</code></a> Methode des Knotens entfernt werden.</li>
+  <li>Die <code>initialize()</code>-Methode aus <code><a href="de/mozIStorageStatement">mozIStorageStatement</a></code> wurde entfernt. An ihrer Stelle sollte nun <code><a href="de/mozIStorageConnection#createStatement">createStatement()</a></code> benutzt werde.</li>
+  <li>Die <a href="/de/Storage">Storage</a> API unterstützt nun asynchrone Requests.</li>
+  <li>Die <a href="/de/nsICookie2"><code>nsICookie2</code></a>-Schnittstelle besitzt nun das neue <code>creationTime</code> Attribut. Damit lässt sich der Erstellungszeitpunkt eines Cookies feststellen.</li>
+  <li>Zu <code><a href="de/nsIProtocolHandler">nsIProtocolHandler</a></code> wurde ein Flag (<code>URI_IS_LOCAL_RESOURCE</code>) hinzugefügt, das während der Chrome-Registrierung für die Überprüfung, ob einem Protokoll erlaubt ist, registriert zu werden, verwendet wird.</li>
+  <li>Unter Linux sieht Firefox auch in <code>/usr/lib/mozilla/plugins</code> nach Plugins nach.</li>
+  <li>Die Plugin-API wurde für die Unterstützung des „Private-Browsing“-Modus aktualisiert. Es kann nun <a href="/de/NPN_GetValue"><code>NPN_GetValue()</code></a> verwendet wurden, um den Status des „Private-Browsing“-Modus mit der Variable <code>NPNVprivateModeBool</code> abzufragen.</li>
+ </ul>
+
+ <h2 id="Neue_Funktionen_für_Endbenutzer">Neue Funktionen für Endbenutzer</h2>
+
+ <h3 id="User_Experience">User Experience</h3>
+
+ <dl>
+  <dt>„Dem Ort gerechtes Surfen“</dt>
+  <dd>Wenn erwünscht, können Webseiten Informationen über die aktuelle Geoposition des Benutzers erhalten. Um den Datenschutz nicht zu verletzen werden sie selbstverständlich gefragt bevor soetwas getan wird.</dd>
+  <dt>Offene Audio- und Video-Unterstützung</dt>
+  <dd>Firefox 3.5 unterstützt eingebettetes Audio und Video dank des offenen Ogg-Formates und WAV-Formates für Audio. Keine Plugins, keine verwirrende Fehlermeldungen, dass irgendetwas installiert werden müsse oder, das dass dieses oder jenes für Ihre Plattform nicht verfügbar sei.</dd>
+  <dt>Lokaler Datenspeicher</dt>
+  <dd>Webanwendungen können nun die Fähigkeit des lokalen Speichers ausnutzen, um Daten auf Ihrem Computer zu speichern. Dies ist hervorragend und kann von einfachen Seiteneinstellungen bis zu komplexeren Daten eingesetzt werden.</dd>
+ </dl>
+
+ <h3 id="Sicherheit_und_Datenschutz">Sicherheit und Datenschutz</h3>
+
+ <dl>
+  <dt>Privates Browsing</dt>
+  <dd>Sie müssen eines anderen Browser benutzen? Wechseln sie auf „Privater Modus“ und nichts wird über sie erhalten bleiben, keine Sitzungsdaten, keine Cookies, keine Chronik oder irgendwelche anderen potentiell privaten Informationen.</dd>
+  <dt>Bessere Kontrolle über den Datenschutz</dt>
+  <dd>Die Systemeinstellungen für den Datenschutz wurden komplett neu entworfen, sodass sie nun mehr Kontrolle über den Datenschutz haben. Die Benutzer können auswählen, ob sie irgendetwas behalten oder wegewerfen wollen, miteinbezogen die Chronik, Chronikinformationen, Cookies, Downloads und Formfeld-Informationen. Außerdem kann der Benutzer auswählen, ob die Chronik und/oder Lesezeichen in den Vorschlägen der Locationbar auftauchen sollen oder nicht.</dd>
+ </dl>
+
+ <h3 id="Performance">Performance</h3>
+
+ <dl>
+  <dt>Schnelleres JavaScript</dt>
+  <dd>Die Geschwindigkeit von JavaScript, das "J" aus dem "AJAX," wurde in Firefox 3.5 dank des neuen TraceMonkey JavaScript-Engines extrem erhöht. Dadurch werden Webanwendung um ein Vielfaches schneller ausgeführt als noch in Firefox 3.</dd>
+  <dt>Schnelleres Seiten-Rendering</dt>
+  <dd>Webinhalte werden in Firefox 3.5 dank Technologien wie z.B. »speculative parsing« deutlich schneller gezeichnet. Man muss nicht wissen, was das heißen soll. Es ist einfach viel schneller.</dd>
+ </dl>
+
+ <h2 id="Siehe_auch">Siehe auch</h2>
+
+ <ul>
+  <li><a href="/de/Firefox_3_für_Entwickler">Firefox 3 für Entwickler</a></li>
+  <li><a href="/de/Firefox_2_für_Entwickler">Firefox 2 für Entwickler</a></li>
+  <li><a href="/de/Firefox_1.5_für_Entwickler">Firefox 1.5 für Entwickler</a></li>
+ </ul>
+
+ <p>{{ languages( {"en":"en/Firefox_3.5_for_developers", "es":"es/Firefox_3.5_para_desarrolladores", "ja":"Ja/Firefox_3.5_for_developers", "fr": "fr/Firefox_3.5_pour_les_développeurs", "pl": "pl/Firefox_3.5_dla_programistów", "pt": "pt/Firefox_3.5_para_desenvolvedores", "ru": "ru/Firefox_3.5_для_разработчика", "zh-tw": "Zh_tw/Firefox_3.1_技術文件"} ) }}</p>
+ </dd>
+</dl>
diff --git a/files/de/firefox_3_für_entwickler/index.html b/files/de/firefox_3_für_entwickler/index.html
new file mode 100644
index 0000000000..3db4c6f4e3
--- /dev/null
+++ b/files/de/firefox_3_für_entwickler/index.html
@@ -0,0 +1,173 @@
+---
+title: Firefox 3 für Entwickler
+slug: Firefox_3_für_Entwickler
+tags:
+  - Firefox 3
+translation_of: Mozilla/Firefox/Releases/3
+---
+<div>{{FirefoxSidebar}}</div><p>Wenn Sie als Entwickler versuchen mit den neuen Funktionen in Firefox 3 umzugehen, ist dies der perfekte Ort, um zu beginnen. Dieser Seite liefert eine Liste der neuen Artikel, die die in Firefox 3 neu hinzugekommenen Funktionen erläutern. Es wird sicher nicht jede kleine Änderung erfasst werden können, allerdings hilft werden die hauptsächlichen Verbesserungen in Firefox 3 vorgestellt.</p>
+
+<h3 id="Neue_Bestandteile_in_Firefox_3_für_Entwickler">Neue Bestandteile in Firefox 3 für Entwickler</h3>
+
+<h4 id="Für_Webseiten_und_Anwendungsentwickler">Für Webseiten und Anwendungsentwickler</h4>
+
+<dl>
+ <dt><a href="/de/Updating_web_applications_for_Firefox_3" title="de/Updating_web_applications_for_Firefox_3">Aktualisierung von Webanwendungen für Firefox 3</a></dt>
+ <dd>Dieser Artikel beinhaltet Informationen über Veränderungen, die Sie kennen sollten, wenn Sie die neuen Funktionen in Firefox 3 für Ihre Webseite und Webanwendung ausnutzen wollen.</dd>
+ <dt><a href="/de/Online-_und_Offline-Events" title="de/Online-_und_Offline-Events">Online- und Offline-Events</a></dt>
+ <dd>Firefox 3 unterstützt WHATWG Online- und Offline-Events, die Anwendungen und Erweiterungen erkennen lassen, ob eine aktive Internetverbindung besteht oder nicht und genauso erkennen lassen, wenn die Verbindung hoch oder runter geht.</dd>
+ <dt><a href="/de/Web-basierende_Protokllroutinen" title="de/Web-basierende_Protokllroutinen">Web-basierende Protokollroutinen</a></dt>
+ <dd>Sie können nun Webanwendungen als Protokollroutinen mit der <code>navigator.registerProtocolHandler()</code> Methode verwenden.</dd>
+ <dt><a href="/de/Zeichnen_von_Text_mit_Canvas" title="de/Zeichnen_von_Text_mit_Canvas">Zeichnen von Text mit Canvas</a></dt>
+ <dd>Es ist nun möglich, Text in einem Canvas mit einer nicht-standardisierten API zu schreiben.</dd>
+ <dt><a href="/de/Canvas_Tutorial/Transformationen#Transforms" title="de/Canvas_Tutorial/Transformationen#Transforms">Transform-Unterstützung für Canvas</a></dt>
+ <dd>Firefox unterstützt die <code>transform()</code> und <code>setTransform()</code>-Methoden für Canvas.</dd>
+ <dt><a href="/de/Benutzung_von_Microformats" title="de/Benutzung_von_Microformats">Benutzung von Mikroformaten</a></dt>
+ <dd>Firefox besitzt nun eine API für das Arbeiten mit Mikroformaten.</dd>
+ <dt><a href="/de/Drag_und_Drop_Ereignisse" title="de/Drag_und_Drop_Ereignisse">Drag und Drop-Ereignisse</a></dt>
+ <dd>Firefox 3 unterstützt neue Ereignisse, die zu dem Ursprungsknoten einer Drag-Operation gesendet werden, sobald die Drag-Operation beginnt und aufhört.</dd>
+ <dt><a href="/de/Fokus-Management_in_HTML" title="de/Fokus-Management_in_HTML">Fokus-Management in HTML</a></dt>
+ <dd>Das neue HTML 5 <code>activeElement</code> und <code>hasFocus</code>-Attribut wird unterstützt.</dd>
+ <dt><a href="/de/Offline_Ressourcen_in_Firefox" title="de/Offline_Ressourcen_in_Firefox">Offline-Ressourcen</a></dt>
+ <dd>Firefox ermöglicht Anwendungen nun das Zwischenspeichern von Ressourcen, damit die Anwendung offline verwendet werden kann.</dd>
+ <dt><a href="/de/CSS-Verbesserungen_in_Firefox_3" title="de/CSS-Verbesserungen_in_Firefox_3">CSS-Verbesserungen in Firefox 3</a></dt>
+ <dd>Firefox 3 beinhaltet eine nicht geringe Zahl an Verbesserungen, was die CSS-Unterstützung angeht.</dd>
+ <dt><a href="/de/DOM_Verbesserungen_in_Firefox_3" title="de/DOM_Verbesserungen_in_Firefox_3">DOM-Verbesserungen in Firefox 3</a></dt>
+ <dd>Firefox 3 bietet eine nicht geringe Anzahl an neuen Bestandteilen in der DOM-Implementierung an, darunter Unterstützung für mehrere Erweiterungen für den für Internet Explorer für das DOM.</dd>
+ <dt><a href="/de/Neu_in_JavaScript_1.8" title="de/Neu_in_JavaScript_1.8">JavaScript 1.8 Unterstützung</a></dt>
+ <dd>Firefox 3 stellt Unterstützung für JavaScript zur Verfügung.</dd>
+ <dt><a href="/de/EXSLT" title="de/EXSLT">EXSLT Unterstützung</a></dt>
+ <dd>Firefox 3 beinhaltet Unterstützung für einen wesentlichen Teil der <a href="/de/EXSLT" title="de/EXSLT">EXSLT</a>-Erweiterungen zu <a href="/de/XSLT" title="de/XSLT">XSLT</a>.</dd>
+ <dt><a href="/de/SVG_Verbesserungen_in_Firefox_3" title="de/SVG_Verbesserungen_in_Firefox_3">SVG-Verbesserungen in Firefox 3</a></dt>
+ <dd>Die SVG-Unterstützung wurde signifikant verbessert, darunter Unterstützung für über zwei Dutzend neue Filter, mehrere neue Elemente und Attribute und andere Verbesserungen.</dd>
+ <dt><a href="/de/Animierte_PNG-Grafiken" title="de/Animierte_PNG-Grafiken">Animierte PNG-Grafiken</a></dt>
+ <dd>Firefox 3 bietet Unterstützung für das Format für animiertes PNG (APNG) an.</dd>
+</dl>
+
+<h4 id="Für_XUL-_und_Erweiterungsentwickler.">Für XUL- und Erweiterungsentwickler.</h4>
+
+<h5 id="Wesentliche_Änderungen_und_Verbesserungen">Wesentliche Änderungen und Verbesserungen</h5>
+
+<dl>
+ <dt><a href="/de/Erweiterungen_für_Firefox_3_aktualisieren" title="de/Erweiterungen_für_Firefox_3_aktualisieren">Erweiterungen für Firefox 3 aktualisieren</a></dt>
+ <dd>Bietet einen Leitfaden für das, was Sie tun müssen, um Ihre Erweiterung für die Arbeit mit Firefox 3 fähig zu machen.</dd>
+ <dt><a href="/de/XUL_Verbesserungen_in_Firefox_3" title="de/XUL_Verbesserungen_in_Firefox_3">XUL-Verbesserungen</a></dt>
+ <dd>Firefox 3 bietet eine Vielzahl von neuen XUL Elementen, darunter neue Schieberegler, Datum- und Zeitwähler und Dreh-Buttons</dd>
+ <dt><a href="/de/Templates_in_Firefox_3" title="de/Templates_in_Firefox_3">Templates in Firefox 3</a></dt>
+ <dd>Templates wurden mit Firefox 3 stark verbessert. Die Schlüsselverbesserung ist die Verwendung von benutzerdefinierten Query-Processors als Datenquelle neben RDF.</dd>
+ <dt><a href="/de/Erweiterungsversionen,_Aktualisierungen_und_Kompatibilität" title="de/Erweiterungsversionen,_Aktualisierungen_und_Kompatibilität">Sichheitsupdates</a></dt>
+ <dd>Um sichere Add-ons bereitzustellen, wird nun eine Sicherheitsmethode gebraucht, bevor diese installiert werden können. Add-ons, die auf <a class="external" href="http://addons.mozilla.org">AMO</a> bereitgestellt werden, verfügen automatisch darüber. Jedes installierte Add-on, das nicht darüber verfügt, wird bei der Aktualisierung auf Firefox 3 automatisch deaktiviert. Firefox wird jedoch weiterhin auf Updates der Erweiterung über den unsicheren Pfad überprüfen und versuchen die neue Version zu installieren (Die Installation schlägt fehl, wenn auch in der neuen Version keine sichere Aktualisierungsmethode angeboten wird).</dd>
+ <dt><a href="/de/Places_Entwicklerbuch" title="de/Places_Entwicklerbuch">Places Entwicklerbuch</a></dt>
+ <dd>Ein Artikel über die Aktualisierung einer Anwendung zur Verwendung der Places API.</dd>
+ <dt><a href="/de/Download-Manager_Verbesserungen_in_Firefox_3" title="de/Download-Manager_Verbesserungen_in_Firefox_3">Download-Manager Verbesserungen in Firefox 3</a></dt>
+ <dd>Der Firefox 3 Download-Manager verfügt nun über eine neue und verbesserte API mit Unterstützung von mehreren Fortschritts-Listener.</dd>
+ <dt><a href="/de/Verwendung_von_nsILoginManager" title="de/Verwendung_von_nsILoginManager">Verwendung von nsILoginManager</a></dt>
+ <dd>Der Password-Manager wurde vom neuen Login-Manager ersetzt.</dd>
+ <dt><a href="/de/XBL/XBL_1.0_Referenz/Elemente#binding" title="de/XBL/XBL_1.0_Referenz/Elemente#binding">XBL bindings</a></dt>
+ <dd>Es können jetzt <code>data:</code> URL Schemata verwendet werden, um XBL bindings direkt einzubinden.</dd>
+ <dt><a href="/de/Lokalisierung_von_Erweiterungsbeschreibungen" title="de/Lokalisierung_von_Erweiterungsbeschreibungen">Lokalisierung von Erweiterungsbeschreibungen</a></dt>
+ <dd>Firefox 3 bietet eine neue Methode zur Lokalisierung von Add-on Metadaten. Damit werden lokalisierte Details verfügbar, sobald das Add-on heruntergeladen wird und wenn es deaktiviert wird</dd>
+ <dt><a href="/de/Lokalisierung_und_Mehrzahlen" title="de/Lokalisierung_und_Mehrzahlen">Lokalisierung und Mehrzahlen</a></dt>
+ <dd>Firefox 3 fügt ein neues PluralForm Modul hinzu, welches das richtige Werkzeug für korrekte Mehrzahlen in Lokalisierungen bereitstellt.</dd>
+ <dt><a href="/de/Theme_Änderungen_in_Firefox_3" title="de/Theme_Änderungen_in_Firefox_3">Theme Änderungen in Firefox 3</a></dt>
+ <dd>Hinweise und Informationen zur Verwendung und Erstellung von Themes für Firefox 3.</dd>
+</dl>
+
+<h5 id="Neue_Komponenten_und_Funktionalitäten">Neue Komponenten und Funktionalitäten</h5>
+
+<dl>
+ <dt><a href="/de/Toolkit_API/FUEL" title="de/Toolkit_API/FUEL">FUEL Library</a></dt>
+ <dd>FUEL wird es Erweiterungsentwicklern leichter machen produktiv zu arbeiten, indem die XPCOM Formalitäten verkleinert werden und einige "moderne" JavaScript Ideen hinzugefügt werden.</dd>
+ <dt><a href="/de/Places" title="de/Places">Places</a></dt>
+ <dd>Die Verlaufs- und Lesezeichen-Schnitstelle wurde komplett durch die <a href="/de/Places" title="de/Places">Places</a> API ersetzt.</dd>
+ <dt><a href="/de/nsIIdleService" title="de/nsIIdleService">Idle Service</a></dt>
+ <dd>Firefox 3 bietet das neue {{ Interface("nsIIdleService") }} Interface, welches Erweiterungen bestimmen lässt wie lange es her ist, dass ein Benutzer zu letzt eine Taste gedrükt oder die Maus bewegt hat.</dd>
+ <dt><a href="/de/nsIZipWriter" title="de/nsIZipWriter">ZIP Writer</a></dt>
+ <dd>Das neue {{ Interface("nsIZipWriter") }} Interface ermöglicht die Erstellung von ZIP Archiven.</dd>
+ <dt><a href="/de/Vollbild-Zoom" title="de/Vollbild-Zoom">Vollbild-Zoom</a></dt>
+ <dd>Firefox 3 bietet einen Vollbild-Zoom neben dem Text-only Zoom an.</dd>
+ <dt><a href="/de/Interfacing_mit_dem_XPCOM_Cycle-Collector" title="de/Interfacing_mit_dem_XPCOM_Cycle-Collector">Interfacing mit dem XPCOM Cycle-Collector</a></dt>
+ <dd>XPCOM Code kann nun Vorteile des Cycle-Collectors nutzen, welcher dabei hilft, das nicht verwendeter Speicher freigegeben wird.</dd>
+ <dt><a href="/de/Der_Thread-Manager" title="de/Der_Thread-Manager">Der Thread-Manager</a></dt>
+ <dd>Firefox 3 stellt das neue {{ Interface("nsIThreadManager") }} Interface bereit, mit neuen Schnittstellen für Threads und Thread-Ereignisse, welche zur Erstellung und Verwaltung von Threads im Code dienen.</dd>
+ <dt><a href="/de/JavaScript_Code-Module" title="de/JavaScript_Code-Module">JavaScript Module</a></dt>
+ <dd>Firefox 3 bietet nun die Möglichkeit zur Erstellung von Modulen in JavaScript, die von Erweiterungen und Anwendungen zur Verwendung geladen werden können, ähnliche wie gemeinsam genutzte Bibliotheken.</dd>
+ <dt><a href="/de/nsIJSON" title="de/nsIJSON">Das <code>nsIJSON</code> Interface</a></dt>
+ <dd>Firefox 3 stellt das neue {{ Interface("nsIJSON") }} Interface bereit, welches high-performance Encoding und Decoding von <a href="/de/JSON" title="de/JSON">JSON</a> Strings ermöglicht.</dd>
+ <dt><a href="/de/XPCOM_Interface_Referenz/nsIParentalControlsService" title="de/XPCOM_Interface_Referenz/nsIParentalControlsService">Das nsIParentalControlsService Interface</a></dt>
+ <dd>Firefox 3 unterstützt nun die Microsoft Windows Vista "Parental Control" Funktion, und ermöglicht dem Code damit zu interagieren.</dd>
+ <dt><a href="/de/Verwendung_von_Inhaltseinstellungen" title="de/Verwendung_von_Inhaltseinstellungen">Verwendung von Inhaltseinstellungen</a></dt>
+ <dd>Firefox 3 enthält einen neuen Dienst zum Setzen und Abrufen von willkürlichen Seiten-spezifischen Einstellungen, die Erweiterungen genau wie Kerncode verwenden können, um auf die Benutzereinstellungen für individuelle Seiten Rücksicht zu nehmen.</dd>
+ <dt><a href="/de/Plugins_überwachen" title="de/Plugins_überwachen">Plug-ins überwachen</a></dt>
+ <dd>Eine neue Komponente des Plugin-System ist nun verfügbar, um festzustellen wie lange Plug-ins (z.B. Macromedia Flash) brauchen, um ihre Anfragen auszuführen.</dd>
+</dl>
+
+<h5 id="Behobene_Fehler">Behobene Fehler</h5>
+
+<dl>
+ <dt><a href="/de/Behobene_Fehler_in_Firefox_3" title="de/Behobene_Fehler_in_Firefox_3">Behobene Fehler in Firefox 3</a></dt>
+ <dd>Dieser Artikel bietet Informationen über Bugs, die in Firefox 3 behoben wurden und nennenswert sind.</dd>
+</dl>
+
+<h3 id="Neue_Bestandteile_für_den_Endbenutzer">Neue Bestandteile für den Endbenutzer</h3>
+
+<h4 id="User_Experience.">User Experience.</h4>
+
+<ul>
+ <li><strong>Einfacheres Passwort-Management.</strong> Eine Informationsleiste oben im Browser-Fenster ermöglicht Ihnen Passwörter nach einem erfolgreichen Login zu speichern.</li>
+ <li><strong>Vereinfachte Add-on installation.</strong> Sie können nun Erweiterungen von Drittanbieter-Seiten schnell downloaden, dank der Entfernung der Add-on Downloadseiten Whiteliste.</li>
+ <li><strong>Neuer Download-Manager.</strong> Der Download-Manager macht es einfacher Ihre heruntergeladenen Dateien aufzufinden.</li>
+ <li><strong>Downloads fortführen.</strong> Sie können nun Downloads nach dem Browser-Neustart oder dem Reset der Netzwerkverbindung wieder aufnehmen.</li>
+ <li><strong>Voller Seitenzoom.</strong> Aus dem Ansichtmenü und über Tastatur-Shortcuts können Sie nun rein und raus zoomen und dabei die gesamte Seite skalieren, mit Bildern und dem Layout der Seite.</li>
+ <li><strong>Tab-Scrolling und Schnellmenü.</strong> Tabs sind einfacher zu bedienen mit den neuen Funktionen zum Scrollen un dem Tab-Schnellmenü.</li>
+ <li><strong>Speichern Sie, was Sie gemacht haben.</strong> Firefox 3 fragt Sie beim Beenden, ob Sie Ihre Tabs speichern wollen, bevor Sie die Sitzung schließen.</li>
+ <li><strong>Optimiertes Öffnen in Tabs Verhalten.</strong> Wird ein Lesezeichenverzeichnis geöffnet, wird der aktuelle Tab beibehalten und neue Tabs mit den entprechenden Seiten werden geöffnet.</li>
+ <li><strong>Einfache Größenänderung an URL- und Suchleiste.</strong> Die beiden Leisten können nun einfach mit einem Klick dazwischen geändert werden.</li>
+ <li><strong>Textauswahl Verbesserungen.</strong> Sie können nun mehrere Textbereiche mit der Strg-Taste (bzw. Command auf Macintosh) auswählen. Doppelklick wählt  den "wort-für-wort" Modus. Dreifach-Klick wählt den gesamten Absatz aus.</li>
+ <li><strong>Find Toolbar.</strong> Die Find Toolbar öffnet sich mit der aktuellen Auswahl.</li>
+ <li><strong>Plugin Management.</strong> Benutzer können nun einzelne Plugins im Add-on Manager deaktivieren.</li>
+ <li><strong>Integration mit Windows Vista.</strong> Menüs unter Firefox zeigen nun das native Vista Theme an.</li>
+ <li><strong>Integration mit Mac OS X.</strong> Firefox unterstützt nun <a class="external" href="http://growl.info/">Growl</a> für Hinweise zu fertiggestellten Downloads und verfügbaren Updates.</li>
+ <li><strong>Stern Button.</strong> Mit dem neuen Stern in der URL-Leiste können schnell neue Lesezeichen mit einem einzigen Klick hinzugefügt werden. Ein zweiter Klick lässt Sie Ihr Lesezeichen bearbeiten.</li>
+ <li><strong>Schlagwörter.</strong> Sie können jetzt Schlagwörter zu Ihren Lesezeichen zuordnen, um Sie einfach zu sortieren.</li>
+ <li><strong>URL-Leiste und Auto-Vervollständigung.</strong> Tippen Sie den Titel oder ein Schlagwort einer Seiten in die URL-Leiste, um schnell zur gesuchten Seite zu wechseln, die Sie im Verlauf oder in den Lesezeichen gespeichert haben. Favicons, Lesezeichen und Tags helfen zu sehen, woher die Seite kommt.</li>
+ <li><strong>Ordner für Lesezeichen.</strong> Lesezeichen können nun in Ordnern organisiert werden, um Ihre gespeicherten Lesezeichen schnell zu finden.</li>
+ <li><strong>Lesezeichen- und Verlaufsmanager.</strong> Der neue, vereinte Lesezeichen- und Verlaufsmanager ermöglicht einfache Suchen durch die Lesezeichen sowie dem Verlauf. Durch Ordner können sogar Suchdurchgänge gespeichert werden.</li>
+ <li><strong>Web-basierende Protokollroutinen.</strong> Webanwendungen, wie Ihr Webmail Anbieter, können nun verwendet werden, anstatt wie bisher ein Desktop-Programm, dass ausschließlich <code>mailto:</code> Links von anderen Seiten aufrufen konnte. Gleiches gilt für andere Protokolle ebenso (Webanwendungen müssen erst registriert sein, bevor sie mit Firefox zusammenarbeiten können).</li>
+ <li><strong>Einfache Download-Aktionen.</strong> Ein neues Einstellungsfeld bietet eine verbesserte Benutzeroberfläche zur Konfiguration von unterschiedlichen Dateitypen und Protokoll-Schemata.</li>
+ <li><strong>Verbessertes Aussehen und Verwendung.</strong> Grafiken und Schrift wurden verbessert, um Webseiten besser anzeigen zu können. Darunter schärferer Text und bessere Unterstützung für Schriften mit Ligaturen und komplexen Skripten. Außerdem werden Mac und Linux (Gnome) Benutzer merken, dass sich Firefox mehr als eine native Anwendung in das Betriebssystem einfügt.</li>
+ <li><strong>Farbmanagement Unterstützung.</strong> In dem die Einstellung <code>gfx.color_management.enabled</code> in <code>about:config</code> aktiviert wird, kann Firefox das Farbprofil verwenden, das von Bildern verwendet wird, um die Farben auf den Bildschirm korrekt einzustellen.</li>
+ <li><strong>Offline Unterstützung.</strong> Webanwendungen können die Vorteile der neuen Funktionen nutzen, wenn keine Internetverbindung aktiv ist.</li>
+</ul>
+
+<h4 id="Sicherheit_und_Privatsphäre">Sicherheit und Privatsphäre</h4>
+
+<ul>
+ <li><strong>Ein-Klick Seiteinformationen.</strong> Wollen Sie mehr über die Seiten erfahren, die Sie besucht haben? Klicken Sie auf das Seitenicon in der Location-Leiste, um zu sehen zu wem diese gehört. Informationen werden einfach zu verstehen angezeigt.</li>
+ <li><strong>Malware Schutz.</strong> Firefox 3 warnt Sie, wenn Sie auf einer Webseite landen, die bekannt für Viren, Spyware, Trojaner oder anderer schädlicher Software ist. Sie können sehen wie diese Warnung aussieht, wenn Sie <a class="link-https" href="https://www.mozilla.com/firefox/its-an-attack.html">hier klicken</a>.</li>
+ <li><strong>Verbesserte Schutz vor Webfälschungen.</strong> Falls Sie eine Seite besuchen, die mutmaßlich eine Fälschung ist, wird eine spezielle Seite angezeigt, anstatt die Inhalte der Seite. <a class="link-https" href="https://www.mozilla.com/firefox/its-a-trap.html">Klicken Sie hier</a>, um zu sehen wie eine solche Seite aussieht.</li>
+ <li><strong>Einfachere SSL Fehlermeldungen.</strong> Die Fehler, die bei einem ungültigem SSL Zertifikat auftauchen wurden vereinfacht, sodass es einfacher ist das Problem zu verstehen.</li>
+ <li><strong>Schutz vor veralteten Add-ons.</strong> Firefox 3 überprüft nun automatisch Add-on und Plugin Versionen und deaktiviert alte, unsichere Versionen.</li>
+ <li><strong>Sichere Add-on Aktualisierung.</strong> Die Add-on Update-Sicherheit wurde verbessert, in dem Add-ons, die unsichere Update-Mechanismen verwenden deaktivieren werden.</li>
+ <li><strong>Anti-Virus integration.</strong> Firefox 3 informiert nun Anti-Viren Software, wenn ausführbare Dateien heruntergeladen werden.</li>
+ <li><strong>Windows Vista parental Control.</strong> Firefox 3 unterstützt unter Vista  System-weite "parental control" Einstellungen zur Deaktivierung von Dateidownloads.</li>
+</ul>
+
+<h4 id="Performance">Performance</h4>
+
+<ul>
+ <li><strong>Verlässiichkeit.</strong> Firefox 3 speichert Lesezeichen, Verlauf, Cookies und Einstellungen in einem sicheren Datenbankformat. Das bedeutet, dass Ihre Daten sicher vor Datenverlust ist, auch wenn Ihr System abstürzt.</li>
+ <li><strong>Geschwindigkeit.</strong> Firefox 3 hat einen Performance Boost erhalten indem der Teil, der für das Zeichnen der Oberfläche verantwortlich ist, komplett ausgetauscht wurde.</li>
+ <li><strong>Reduzierter Speicherverbrauch.</strong> Firefox 3 nutzt den Speicher effizienter aus als jemals zuvor, mit mehr als 300 behobenen Speicher "leak" Fehlern und neuen Funktionen, die automatisch Speicherlecks ausfindig machen und diese beseitigen.</li>
+</ul>
+
+<h3 id="Siehe_auch">Siehe auch</h3>
+
+<ul>
+ <li><a href="/de/Erweiterungen_für_Firefox_3_aktualisieren" title="de/Erweiterungen_für_Firefox_3_aktualisieren">Erweiterungen für Firefox 3 aktualisieren</a></li>
+ <li><a href="/de/Updating_web_applications_for_Firefox_3" title="de/Updating_web_applications_for_Firefox_3">Webanwendungen für Firefox 3 aktualisieren</a></li>
+ <li><a href="/de/Firefox_2_für_Entwickler" title="de/Firefox_2_für_Entwickler">Firefox 2 für Entwickler</a></li>
+ <li><a href="/de/Firefox_1.5_für_Entwickler" title="de/Firefox_1.5_für_Entwickler">Firefox 1.5 für Entwickler</a></li>
+</ul>
+
+<p>{{ languages( { "en": "en/Firefox_3_for_developers", "es": "es/Firefox_3_para_desarrolladores", "fr": "fr/Firefox_3_pour_les_d\u00e9veloppeurs", "ja": "ja/Firefox_3_for_developers", "ko": "ko/Firefox_3_for_developers", "pl": "pl/Firefox_3_dla_programist\u00f3w", "pt": "pt/Firefox_3_para_desenvolvedores" } ) }}</p>
diff --git a/files/de/firefox_addons_developer_guide/index.html b/files/de/firefox_addons_developer_guide/index.html
new file mode 100644
index 0000000000..8dbc807d9b
--- /dev/null
+++ b/files/de/firefox_addons_developer_guide/index.html
@@ -0,0 +1,15 @@
+---
+title: Firefox addons developer guide
+slug: Firefox_addons_developer_guide
+translation_of: Archive/Add-ons/Overlay_Extensions/Firefox_addons_developer_guide
+---
+<p><a href="/de/docs/Firefox_addons_developer_guide/Einführung_in_Erweiterungen">Kapitel 1: Einführung in Erweiterungen</a></p>
+<p><a href="/de/docs/Firefox_addons_developer_guide/Technologien_die_in_den_Erweiterungen_verwendet_werden">Kapitel 2: Technologien die in den Erweiterungen verwendet werden</a></p>
+<p><a href="/de/docs/Firefox_addons_developer_guide/Einführung_zu_XUL_-_Wie_man_eine_erweiterte_Benutzeroberfläche_erstellt">Kapitel 3: Einführung zu XUL - Wie man eine erweiterte Benutzeroberfläche erstellt</a></p>
+<p><a href="/de/docs/Firefox_addons_developer_guide/Verwendung_von_XPCOM_-_Umsetzung_von_fortgeschrittenen_Prozessen">Kapitel 4: Verwendung von XPCOM - Umsetzung von fortgeschrittenen Prozessen</a></p>
+<p><a href="/de/docs/Firefox_addons_developer_guide/Bauen_wir_eine_Firefox_Erweiterung">Kapitel 5: Bauen wir eine Firefox Erweiterung </a></p>
+<p><a href="/de/docs/Firefox_addons_developer_guide/Lizenz_und_Autoren"><strong>Lizenz und Autoren</strong></a></p>
+
+
+
+<div>{{ Next("/de/docs/Firefox_addons_developer_guide/Einführung_in_Erweiterungen")}}</div>
diff --git a/files/de/games/index.html b/files/de/games/index.html
new file mode 100644
index 0000000000..d22501e177
--- /dev/null
+++ b/files/de/games/index.html
@@ -0,0 +1,74 @@
+---
+title: Spieleentwicklung
+slug: Games
+tags:
+  - Anwendungen
+  - HTML5 Spiele
+  - JavaScript Spiele
+  - Spiele
+  - Spieleentwicklung
+  - Web
+translation_of: Games
+---
+<div>{{GamesSidebar}}</div>
+
+<div class="summary">
+<p><span class="seoSummary">Spielen ist eine der populärsten Aktivitäten am PC. Immer wieder gibt es neue Technologien, die es ermöglichen, bessere und leistungsfähigere Spiele für den Standard-kompatiblen Webbrowser zu entwickeln.</span></p>
+</div>
+
+<div class="column-container">
+<div class="column-half">
+<h2 id="Einführung_in_die_Web-Spiele-Entwicklung">Einführung in die Web-Spiele-Entwicklung</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Games/Introduction" title="/en-US/docs/Games/Introduction">Einführung in die Internet-Spiele-Entwicklung</a></dt>
+ <dd>Eine Einführung, wie man mit der Entwicklung von Spielen mit Web-Technologien anfängt, und in die nützlichsten Technologien für Spieleentwickler. Dieser Artikel untersucht auch Geschäftsideen zur Entwicklung von Internetspielen.</dd>
+ <dt><a href="/en-US/docs/Games/Anatomy_of_a_vIdeo_game">Anatomie eines Videospiels</a></dt>
+ <dd>Was ist ein Videospiel überhaupt? Es gibt bestimmte Aspekte, die bei verschiedenen Spielen ähnlich sind (auch wenn es nicht so wirkt). Dieser Artikel versucht, verschiedene Konzepte wie Programmschleifen in einem allgemeinen Kontext zu erklären. Wenn sich der Artikel doch einmal auf einen Aspekt konzentriert, dann auf Web-Standards.</dd>
+ <dt><a href="/en-US/docs/Web/Apps/Developing/Games/Special_considerations">Besondere Tipps für Spieleentwickler</a></dt>
+ <dd>Dieser Artikel aus dem App Center stellt kurz die Dinge da, die man besonders berücksichtigen muss, wenn man versucht ein Spiel zu entwickeln, das als freies Web-Programm laufen soll.</dd>
+</dl>
+
+<h2 id="Externe_Informationen">Externe Informationen</h2>
+
+<dl>
+ <dt><a href="http://buildnewgames.com/">Ein neues Spiel erstellen</a></dt>
+ <dd>Eine kollaborative Webseite mit sehr vielen Tutorials zur Online-Spieleentwicklung.</dd>
+ <dt><a href="http://www.creativejs.com/">Creative JS</a></dt>
+ <dd>Eine Sammlung von beeindruckenden JavaScript-Techniken und Experimenten, die sich zwar nicht auf Spieleentwicklung konzentriert, aber dennoch hilfreich ist.</dd>
+ <dt><a href="http://gameprogrammingpatterns.com/">Game programming patterns</a></dt>
+ <dd>Ein E-Book, geschrieben von Bob Nystrom, das Programmier-Strukturen im Kontext der Spieleentwicklung mit dem Ziel, Entwicklern zu helfen, effektiveren und effizienteren Code zu produzieren, diskutiert.</dd>
+ <dt><a href="http://blog.artillery.com/">Artillery blog</a></dt>
+ <dd>Die auf HTML-Spiele spezialisierte Firma Artillery hat einige nützliche Artikel in ihrem Blog.</dd>
+ <dt><a href="https://leanpub.com/buildinggamesforfirefoxos/">Spiele für Firefox OS erstellen</a></dt>
+ <dd>Eine schnelle Anleitung um ein 2D Spiel mit HTML5, für Firefox OS und anderen Mobilen Platformen zu ertellen.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<h2 id="Spieleentwicklungs-Themen">Spieleentwicklungs-Themen</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Games/Tools">Werkzeug</a></dt>
+ <dd>Dieser Abschnitt beschreibt die verfügbaren Werkzeuge zum Vereinfachen des Erstellens effektiver Spiel-Erlebnisse im Internet, wie Frameworks, Compiler wie Emscripten, und Debugging-Werkzeuge. Er erklärt die Kernkonzepte hinter allem und gibt Ihnen eine gute Basis um sich weiterzuentwickeln.</dd>
+ <dt><a href="/en-US/docs/Games/Techniques">Techniken</a></dt>
+ <dd>Dieser Abschnitt enthält viele Artikel betreffend wichtigen Techniken der Spieleentwicklung, wie Physik, Kollisionserkennung, Animation, 3D, Datenspeicherung und vieles mehr.</dd>
+ <dt><a href="/en-US/docs/Games/Workflows">Arbeitsschritte</a></dt>
+ <dd>Dieser Abschnitt enthält viele Fallbeispiele, die die einfachen Werkzeuge und Techniken oben benutzen und zu einem wundervollen Spiel zusammensetzen. Hier ist etwas für Sie, ob Sie ein erfahrener Webentwickler sind, der 2D- oder 3D-Spiele schreiben möchte, ein C++-Entwickler, der selbst erstellte Spiele ins Internet bringen will oder ein App-Entwickler, der besser mobile Apps erstellen möchte..</dd>
+</dl>
+
+<h2 id="Demos">Demos</h2>
+
+<dl>
+ <dt><a href="/en-US/demos/detail/bananabread" title="/en-US/demos/detail/bananabread">BananaBread</a></dt>
+ <dd>Ein Mehrspieler, 3D First-Person Shooter-Spiel, entwickelt mithilfe von Emscripten, WebGL und WebRTC.</dd>
+ <dt><a href="/en-US/docs/Web/Apps/Tutorials/Games/Serpent_game">Serpent game</a></dt>
+ <dd>Diese Open Web App ist ein simples Spiel basierend auf dem Klassiker "snake". Es verwendet die <a class="external" href="https://github.com/mozilla/WebGameStub">WebGameStub</a> Vorlage, welche dir helfen kann schnell ein neues Web App Spiel zu erstellen.</dd>
+ <dt><a href="https://hacks.mozilla.org/2013/12/monster-madness-creating-games-on-the-web-with-emscripten/">Monster Madness</a></dt>
+ <dd>Ein WebGL und asm.js-basierter Mehrspieler Online Shooter, entwickelt von Nom Nom Games und Trendy Entertainment.</dd>
+ <dt><a href="http://www.auraluxgame.com/game/">Auralux</a></dt>
+ <dd>WebGL und asm.js-basierte Strategiespiel: Capture all the suns to win!</dd>
+ <dd></dd>
+</dl>
+</div>
+</div>
diff --git a/files/de/gecko-dom-referenz/dom_elemente_mittels_selektoren_ermitteln/index.html b/files/de/gecko-dom-referenz/dom_elemente_mittels_selektoren_ermitteln/index.html
new file mode 100644
index 0000000000..c093fff63b
--- /dev/null
+++ b/files/de/gecko-dom-referenz/dom_elemente_mittels_selektoren_ermitteln/index.html
@@ -0,0 +1,46 @@
+---
+title: DOM Elemente mittels Selektoren ermitteln
+slug: Gecko-DOM-Referenz/DOM_Elemente_mittels_Selektoren_ermitteln
+translation_of: Web/API/Document_object_model/Locating_DOM_elements_using_selectors
+---
+<p>Die Selektoren-API stellt Methoden zur Verfügung, mit der man schnell und einfach {{domxref("Element")}}-Knoten im DOM abrufen kann, indem sie mit einer Menge an Selektoren abgeblichen werden. Dies ist viel schneller als bisherige Techniken, bei denen es zum Beispiel notwendig war, eine Schleife im JavaScript-Code zu verwenden, um die spezifischen Elemente zu finden, die Sie suchen.</p>
+
+<h2 id="Die_NodeSelector_Schnittstelle">Die NodeSelector Schnittstelle</h2>
+
+<p>Diese Spezifikation fügt zwei neue Methoden zu jedem Objekt hinzu, welches die {{domxref("Document")}}, {{domxref("DocumentFragment")}} oder {{domxref("Element")}} Schnittstelle implementiert:</p>
+
+<dl>
+ <dt><code>querySelector</code></dt>
+ <dd>Gibt den ersten übereinstimmenden {{domxref("Element")}}-Knoten innerhalb der Teilstruktur des Knotens zurück. Wenn kein übereinstimmender Knoten gefunden wird, wird <code>null</code> zurückgegeben.</dd>
+ <dt><code>querySelectorAll</code></dt>
+ <dd>Gibt eine {{domxref("NodeList")}} zurück, die alle übereinstimmenden <code>Element</code>-Knoten in der Teilstruktur des Knotens enthält oder eine leere <code>NodeList</code>, wenn keine Übereinstimmungen gefunden werden.</dd>
+</dl>
+
+<div class="note">Hinweis: Die {{domxref("NodeList")}}, die von {{domxref("Element.querySelectorAll()", "querySelectorAll()")}} zurückgegeben wird, ist nicht live, was bedeutet, dass Änderungen im DOM sich nicht auf die Sammlung auswirken. Dies unterscheidet sich von anderen DOM-Abfragemethoden, die Live-Knotenlisten zurückgeben.</div>
+
+<p>Beispiele und Details finden Sie in der Dokumentation zu den Methoden {{domxref("Element.querySelector()")}} und {{domxref("Element.querySelectorAll()")}} sowie im Artikel <a href="/de/docs/Code_snippets/QuerySelector">Code-Ausschnitte für querySelector</a>.</p>
+
+<h2 id="Selektoren">Selektoren</h2>
+
+<p>Die Selektormethoden akzeptieren einen oder mehrere durch Kommas getrennte Selektoren, um zu bestimmen, welches Element bzw. welche Elemente zurückgegeben werden sollen. Um beispielsweise alle Absatz-Elemente (<code>p</code>) in einem Dokument auszuwählen, deren CSS-Klasse entweder eine <code>warning</code> oder ein <code>note</code> ist, können Sie folgendes schreiben:</p>
+
+<pre><code>var special = document.querySelectorAll( "p.warning, p.note" );</code></pre>
+
+<p>Sie können auch die ID abfragen. Zum Beispiel:</p>
+
+<pre><code>var el = document.querySelector( "#main, #basic, #exclamation" );</code></pre>
+
+<p>Nachdem der obige Code ausgeführt wurde, enthält <code>el</code> das erste Element im Dokument, dessen ID <code>main</code>, <code>basic</code> oder <code>exclamation</code> ist.</p>
+
+<p>Sie können jegliche CSS Selektoren mit den Methoden <code>querySelector()</code> und <code>querySelectorAll()</code> verwenden.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/selectors-api/" title="http://www.w3.org/TR/selectors-api/">Selectors API</a> (Englisch)</li>
+ <li>{{domxref("Element.querySelector()")}}</li>
+ <li>{{domxref("Element.querySelectorAll()")}}</li>
+ <li>{{domxref("Document.querySelector()")}}</li>
+ <li>{{domxref("Document.querySelectorAll()")}}</li>
+ <li><a href="/de/docs/Code_snippets/QuerySelector" title="en-US/docs/Code_snippets/QuerySelector">Code-Ausschnitte für querySelector</a></li>
+</ul>
diff --git a/files/de/gecko-dom-referenz/einführung/index.html b/files/de/gecko-dom-referenz/einführung/index.html
new file mode 100644
index 0000000000..20cddb4d1c
--- /dev/null
+++ b/files/de/gecko-dom-referenz/einführung/index.html
@@ -0,0 +1,239 @@
+---
+title: Einführung
+slug: Gecko-DOM-Referenz/Einführung
+tags:
+  - DOM
+translation_of: Web/API/Document_Object_Model/Introduction
+---
+<p>Diese Sektion bietet eine kurze, konzeptuelle Einführung in das <a href="/en-US/docs/DOM" title="DOM">DOM</a>: was es ist, wie es Struktur für <a href="/en-US/docs/HTML" title="HTML">HTML</a> und <a href="/en-US/docs/XML" title="XML">XML</a> Dokumente bietet, wie man darauf zugreifen kann, und wie diese API die Referenz-Information und Beispiele präsentiert. </p>
+
+<h2 id="What_is_the_DOM" name="What_is_the_DOM">Was ist das DOM?</h2>
+
+<p>Das Document Object Model (DOM) ist eine Programmier-Schnittstelle für HTML und XML Dokumente. Es liefert eine strukturierte Repräsentation von dem Dokument und bietet Möglichkeiten die Struktur von einem Programm anzusprechen, sodass die Dokument-Struktur, Stil und Inhalt von diesem verändert werden kann. Das DOM bietet die Repräsentation des Dokuments als strukturierte Gruppe von Knoten (nodes) und Objekten, welche Eigenschaften und Methoden haben. Essentiell ist, dass es eine Verbindung von Webseiten mit den Skripte oder Programmiersprachen bietet.</p>
+
+<p>Eine Webseite ist ein Dokument. Diese kann entweder im Browser-Fenster angzeigt werden, oder dessen HTML-Quellcode. In beiden Fällen ist es das gleiche Dokument. Das Dokument Objekt Modul (DOM) bietet einen anderen Weg zum Represäntieren, Lagern und Manipulieren von diesem Dokument. Das DOM ist eine vollkommen objekt-orientierte Repräsentation einer Webseite und kann mit Skript-Sprachen wie JavaScript modifiziert werden.</p>
+
+<p>Der <a class="external" href="http://www.w3.org/DOM/">W3C DOM</a> Standard formte die Basis für die Implementierung des DOM in den meisten modernen Browsern. Viele Browser bieten Erweiterung außerhalb vom W3C-Standard an, sodass Obacht beim Benutzen dieser im Web geboten werden sollte, da Dokumente vielleicht von verschiedenen Browsern unterschiedliche DOMs haben.</p>
+
+<p>Als Beispiel definiert das W3D DOM die <code>getElementsByTagName</code> Methode und dessen Ausgabewert als eine Liste aller &lt;p&gt;-Elemente in dem Dokument:</p>
+
+<pre class="brush: js">var paragraphs = document.getElementsByTagName("P");
+// paragraphs[0] is the first &lt;p&gt; element
+// paragraphs[1] is the second &lt;p&gt; element, etc.
+alert(paragraphs[0].nodeName);
+</pre>
+
+<p>Alle diese Eigenschaften, Methoden und Events werden als organisierte Objekte vom DOM zur Verfügung gestellt und dienen der Manipulation und dem Erstellen von Webseiten. Als Beispiel: das <code>document</code> Objekt, welches sich selbst repräsentiert, das <code>table</code> Objekt, welches die spezielle <code>HTMLTableElement</code> DOM-Eingabemaske für den Zugriff von HTML-Tabellen bietet, usw). Diese Dokumentation bietet eine von Objekt-zu-Objekt Referenz der DOM implementierten und Gecko-basiertem Browsern (z.B. Firefox).</p>
+
+<h2 id="DOM_and_JavaScript" name="DOM_and_JavaScript">DOM und JavaScript</h2>
+
+<p>Das kurze Beispiel oberhalb, wie nahezu alle Beispiele in dieser Referenz, ist <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>. Das heißt es ist in JavaScript <em>geschrieben</em>, aber es <em>nutzt</em> das DOM um Zugriff auf das Dokument und seine Elemente zu erhalten. Das DOM ist keine Programmiersprache, aber ohne dieses würde JavaScript überhaupt kein Model oder Darstellung der Web-Seite, XML-Seite und dessen Elemente haben, um welche es sich normalerweise kümmert. Jedes Element in einem Dokument - das Dokuement als Ganzes, der Kopf, Tabellen innerhalb des Dokuments, Tabellen-Köpfe, Text innerhalb der Tabellen-Zellen - sind Teile des Dokument-Objekt-Moduls für das Dokument. Also können diese alle über das DOM und einer Skriptsprache wie JavaScript angesprochen und manipuliert werden.</p>
+
+<p>Am Anfang war JavaScript und das DOM stark verflochten, aber schließlich haben sich in eigenständiges Dasein entwickelt. Der Seiteninhalt wird im DOM gelagert und kann via JavaScript angesprochen und manipuliert werden, sodass wir diese ungefähre Gleichung schreiben können:</p>
+
+<p>API (web or XML page) = DOM + JS (scripting language)</p>
+
+<p>Das DOM wurde kreiert ohne eine Abhängigkeit von irgendeine spezielle Programmiersprache zu haben, welche die Struktur eines Dokuments repräsentiert und diese als eine einzelne, konsistente API (Programmierschnittstelle) zur Verfügung stellt. Obwohl wir uns in dieser Dokumentation speziell auf JavaScript konzentrieren, können die Inhalte des  DOM von jeder Programmiersprache, wie z.B. Python, genutzt werden - was dieses Beispiel demonstriert:</p>
+
+<pre class="brush: python"># Python DOM example
+import xml.dom.minidom as m
+doc = m.parse("C:\\Projects\\Py\\chap1.xml");
+doc.nodeName # DOM property of document object;
+p_list = doc.getElementsByTagName("para");
+</pre>
+
+<p>Für weitere Informationen darüber, welche Technologien in das Schreiben von JavaScript im Web involviert sind, siehe <a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript Technologie Übersicht</a>.</p>
+
+<p> </p>
+
+<h2 id="How_Do_I_Access_the_DOM.3F" name="How_Do_I_Access_the_DOM.3F">Wie greife ich auf das DOM zu?</h2>
+
+<p>Du brauchst nichts besonderes machen um das DOM zu nutzen. Verschiedene Browser haben unterschiedliche Ausführungen vom DOM, und diese Ausführungen  weisen unterschiedliche Konformitätsgrade des eigentlichen DOM Standards auf - ein Thema, welches wir in dieser Dokumentation vermeiden zu versuchen. Aber jeder Browser benutzt ein Dokument-Objekt-Modl um eine Webseite für Skripte zugänglich zu machen.</p>
+
+<p>Wenn du ein Skript erstellst - ob in-line im &lt;script&gt;-Element oder eingebunden in der Webseite, das bedeutet von einer Anweisung, welches ein Skript lädt, - kannst du die API sofort nutzen um die <code><a href="/en-US/docs/DOM/document" title="DOM/document">document</a></code> oder <code><a href="/en-US/docs/DOM/window" title="DOM/window">window</a></code> Elemente des Dokuments selbst zu manipulieren oder zu dessen Kind-Elemente zu gelangen, welche eine Vielzahl an Elementen in einer Webseite sind. Deine DOM-Programmierung könnte vielleicht so simpel sein wie das Folgende, welches eine Aufruf-Nachricht (alert message) beim Ausführen der <code><a href="/en-US/docs/DOM/window.alert" title="DOM/window.alert">alert()</a></code> Funktion von dem <code><a href="/en-US/docs/DOM/window" title="DOM/window">window</a></code> Objekt ist. Oder du nutzt anspruchsvollere DOM-Methoden um neue Inhalte zu erstellen, wie im folgenden Beispiel unterhalb.</p>
+
+<pre class="brush: html">&lt;body onload="window.alert('welcome to my home page!');"&gt;
+</pre>
+
+<p>Neben dem <code>&lt;script&gt;</code> Element, in welchem das JavaScript definiert ist, setzt dieses JavaScript eine Funktion in Gange, wenn das Dokument geladen ist (und wenn das ganze DOM zum Gebrauch erreichbar ist).</p>
+
+<p>Diese Funktion erstellt ein neues H1 Element, fügt Text zum Element, und dann fügt es die H1 in den Baum des Dokuments hinein:</p>
+
+<pre class="brush: html">&lt;html&gt;
+  &lt;head&gt;
+    &lt;script&gt;
+       // Diese Funktion ausführen, wenn das Dokument geladen ist.
+       window.onload = function() {
+
+       // Erstellen Sie ein paar Elemente in einer ansonsten leeren HTML-Seite
+       var heading = document.createElement("h1");
+       var heading_text = document.createTextNode("Big Head!");
+       heading.appendChild(heading_text);
+       document.body.appendChild(heading);
+      }
+    &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Important_Data_Types" name="Important_Data_Types">Wichtige Daten-Typen</h2>
+
+<p>Diese Dokumenation versucht eine vielzahl an Objekten und Typen so leicht wie möglich zu erklären. Aber es gibt eine Anzahl verschiedener Daten-Typen, welche sich rund um die API behandelt werden - also achte darauf. Einfachheitshalber sind die Syntax-Beispiele in dieser API-Referenz referenzieren typischerweise an <code>nodes</code> (Knoten) als Elemente, an Arrays von nodes als <code>nodeList</code>s (oder einfach <code>element</code>s), und an Attribut-Knoten (<code>attribute</code> nodes)<code>, </code>einfach als <code>attributes.</code></p>
+
+<p>Die folgende Tabelle beschreibt kurz diese Daten-Typen:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>document</code></td>
+   <td>
+    <p>Wenn ein Mitglied ein Objekt des Typs <code>document</code> wiedergibt (z.B. die <strong><code>ownerDocument</code> </strong>Eigenschaft eines Elements gibt das <code>document </code>wieder, zu welchem es gehört), ist diese Objekt das oberste <code>document</code> Objekt selbst. Das Kapitel <a href="/en-US/docs/DOM/document" title="DOM/document">DOM <code>document</code> Referenz</a>  beschreibt  das <code>document</code> Objekt.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>element</code></td>
+   <td>
+    <p><code>element</code> gehört zu einem Element oder einer <code>node</code> des Typs <code>element,</code> wiedergegeben von einem Mitglied der DOM API. Anstatt zu sagen, dass die <code>document.createElement()</code> Methode ein Objekt wiedergibt, welches zu einer <code>node</code> referenziert wird, sagen wir dass die Methode ein <code>element</code> wiedergibt, dass gerade in dem DOM erstellt wurde. E<code>lement</code> Objekte implementieren das DOM Element-Interface und ebenso das einfachere Node-Interface, welche diese Referenz beide beinhaltet.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>nodeList</code></td>
+   <td>
+    <p>Eine <code>nodeList</code> ist eine Ansammlung von Elementen, ähnlich wie diese von der Methode <code>document.getElementsByTagName()</code> zurückgegeben werden. Inhalte in einer <code>nodeList</code> werden könne auf zwei Wegen anhand des Indexes angesprochen werden. Diese beiden sind gleichwertig:</p>
+
+    <ul>
+     <li>list.item(1)</li>
+     <li>list[1]</li>
+    </ul>
+
+    <p>Im Ersten <strong><code>item()</code></strong> ist die einzelne Methode auf das <code>nodeList</code> Objekt. Das Zeichen nutzt die typische Array-Syntax um den zweiten Inhalt in der Liste abzuholen.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>attribute</code></td>
+   <td>When an <code>attribute</code> is returned by a member (e.g., by the <strong><code>createAttribute()</code></strong> method), it is an object reference that exposes a special (albeit small) interface for attributes. Attributes are nodes in the DOM just like elements are, though you may rarely use them as such.</td>
+  </tr>
+  <tr>
+   <td><code>namedNodeMap</code></td>
+   <td>
+    <p>Eine <code>namedNodeMap</code> ist wie ein Array. Aber die Inhalte werden beim Namen oder Index angesprochen. Obwohl dieser letztere Fall nur eine Bequemlichkeit für die Aufzählung ist, da sie in keiner bestimmten Reihenfolge in der Liste sind. Eine <code>namedNodeMap</code> hat eine <code>item() </code>Methode für diesen Fall - du kannst ebenfalls Inhalte zu einer <code>namedNodeMap</code> hinzufügen oder entfernen.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="DOM_interfaces" name="DOM_interfaces">DOM Schnittstellen</h2>
+
+<p>This guide is about the objects and the actual <em>things</em> you can use to manipulate the DOM hierarchy. It's often a matter of indifference that the object representing the <code>HTML FORM</code> element gets its <strong><code>name</code></strong> property from the <code>HTMLFormElement</code> interface but its <strong><code>className</code></strong> property from the <code>HTMLElement</code> interface proper. In both cases, the property you want is simply in the form object.</p>
+
+<p>But the relationship between objects and the interfaces that they implement in the DOM can be confusing, and so this section attempts to say a little something about the actual interfaces in the DOM specification and how they are made available.</p>
+
+<h3 id="Interfaces_and_Objects" name="Interfaces_and_Objects">Schnittstellen und Objekte</h3>
+
+<p>Many objects borrow from several different interfaces. The table object, for example, implements a specialized <a href="/en-US/docs/DOM/HTMLTableElement" title="DOM/table">HTML Table Element Interface</a>, which includes such methods as <code>createCaption</code> and <code>insertRow</code>. But since it's also an HTML element, <code>table</code> implements the <code>Element</code> interface described in the <a href="/en-US/docs/DOM/element" title="DOM/element">DOM <code>element</code> Reference</a> chapter. And finally, since an HTML element is also, as far as the DOM is concerned, a node in the tree of nodes that make up the object model for a web page or an XML page, the table element also implements the more basic <code>Node</code> interface, from which <code>Element</code> derives.</p>
+
+<p>When you get a reference to a <code>table</code> object, as in the following example, you routinely use all three of these interfaces interchangeably on the object, perhaps without knowing it.</p>
+
+<pre class="brush: js">var table = document.getElementById("table");
+var tableAttrs = table.attributes; // Node/Element interface
+for (var i = 0; i &lt; tableAttrs.length; i++) {
+  // HTMLTableElement interface: border attribute
+  if(tableAttrs[i].nodeName.toLowerCase() == "border")
+    table.border = "1";
+}
+// HTMLTableElement interface: summary attribute
+table.summary = "note: increased border";
+</pre>
+
+<h3 id="Core_Interfaces_in_the_DOM" name="Core_Interfaces_in_the_DOM">Interne Schnittstellen des DOM</h3>
+
+<p>This section lists some of the most commonly-used interfaces in the DOM. The idea is not to describe what these APIs do here but to give you an idea of the sorts of methods and properties you will see very often as you use the DOM. These common APIs are used in the longer examples in the <a href="/en-US/docs/Gecko_DOM_Reference/Examples" title="Gecko_DOM_Reference/Examples">DOM Examples</a> chapter at the end of this book.</p>
+
+<p><code>Document</code> and <code>window</code> objects are the objects whose interfaces you generally use most often in DOM programming. In simple terms, the <code>window</code> object represents something like the browser, and the <code>document</code> object is the root of the document itself. <code>Element</code> inherits from the generic <code>Node</code> interface, and together these two interfaces provide many of the methods and properties you use on individual elements. These elements may also have specific interfaces for dealing with the kind of data those elements hold, as in the <code>table</code> object example in the previous section.</p>
+
+<p>The following is a brief list of common APIs in web and XML page scripting using the DOM.</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/DOM/document.getElementById" title="DOM/document.getElementById">document.getElementById</a>(id)</code></li>
+ <li><code>element.<a href="/en-US/docs/Web/API/Element.getElementsByTagName" title="DOM/element.getElementsByTagName">getElementsByTagName</a>(name)</code></li>
+ <li><code><a href="/en-US/docs/DOM/document.createElement" title="DOM/document.createElement">document.createElement</a>(name)</code></li>
+ <li><code>parentNode.<a href="/en-US/docs/DOM/Node.appendChild" title="DOM/Node.appendChild">appendChild</a>(node)</code></li>
+ <li><code>element.<a href="/en-US/docs/DOM/element.innerHTML" title="DOM/element.innerHTML">innerHTML</a></code></li>
+ <li><code>element.<a href="/en-US/docs/DOM/element.style" title="DOM/element.style">style</a>.left</code></li>
+ <li><code>element.<a href="/en-US/docs/DOM/element.setAttribute" title="DOM/element.setAttribute">setAttribute</a></code></li>
+ <li><code>element.<a href="/en-US/docs/DOM/element.getAttribute" title="DOM/element.getAttribute">getAttribute</a></code></li>
+ <li><code>element.<a href="/en-US/docs/DOM/element.addEventListener" title="DOM/element.addEventListener">addEventListener</a></code></li>
+ <li><code><a href="/en-US/docs/DOM/window.content" title="DOM/window.content">window.content</a></code></li>
+ <li><code><a href="/en-US/docs/DOM/window.onload" title="DOM/window.onload">window.onload</a></code></li>
+ <li><code><a href="/en-US/docs/DOM/window.dump" title="DOM/window.dump">window.dump</a></code></li>
+ <li><code><a href="/en-US/docs/DOM/window.scrollTo" title="DOM/window.scrollTo">window.scrollTo</a></code></li>
+</ul>
+
+<h2 id="Testing_the_DOM_API" name="Testing_the_DOM_API">Das DOM API testen</h2>
+
+<p>This document provides samples for every interface that you can use in your own web development. In some cases, the samples are complete HTML pages, with the DOM access in a <code>&lt;script&gt;</code> element, the interface (e.g, buttons) necessary to fire up the script in a form, and the HTML elements upon which the DOM operates listed as well. When this is the case, you can cut and paste the example into a new HTML document, save it, and run the example from the browser.</p>
+
+<p>There are some cases, however, when the examples are more concise. To run examples that only demonstrate the basic relationship of the interface to the HTML elements, you may want to set up a test page in which interfaces can be easily accessed from scripts. The following very simple web page provides a <code>&lt;script&gt;</code> element in the header in which you can place functions that test the interface, a few HTML elements with attributes that you can retrieve, set, or otherwise manipulate, and the web user interface necessary to call those functions from the browser.</p>
+
+<p>You can use this test page or create a similar one to test the DOM interfaces you are interested in and see how they work on the browser platform. You can update the contents of the <code>test()</code> function as needed, create more buttons, or add elements as necessary.</p>
+
+<pre class="brush: html">&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;DOM Tests&lt;/title&gt;
+    &lt;script type="application/javascript"&gt;
+    function setBodyAttr(attr,value){
+      if (document.body) eval('document.body.'+attr+'="'+value+'"');
+      else notSupported();
+    }
+    &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;div style="margin: .5in; height: 400;"&gt;
+      &lt;p&gt;&lt;b&gt;&lt;tt&gt;text&lt;/tt&gt;color&lt;/b&gt;&lt;/p&gt;
+      &lt;form&gt;
+        &lt;select onChange="setBodyAttr('text',
+        this.options[this.selectedIndex].value);"&gt;
+          &lt;option value="black"&gt;black
+          &lt;option value="darkblue"&gt;darkblue
+        &lt;/select&gt;
+        &lt;p&gt;&lt;b&gt;&lt;tt&gt;bgColor&lt;/tt&gt;&lt;/b&gt;&lt;/p&gt;
+        &lt;select onChange="setBodyAttr('bgColor',
+        this.options[this.selectedIndex].value);"&gt;
+          &lt;option value="white"&gt;white
+          &lt;option value="lightgrey"&gt;gray
+        &lt;/select&gt;
+        &lt;p&gt;&lt;b&gt;&lt;tt&gt;link&lt;/tt&gt;&lt;/b&gt;&lt;/p&gt;
+        &lt;select onChange="setBodyAttr('link',
+        this.options[this.selectedIndex].value);"&gt;
+          &lt;option value="blue"&gt;blue
+          &lt;option value="green"&gt;green
+        &lt;/select&gt;  &lt;small&gt;
+        &lt;a href="http://www.brownhen.com/dom_api_top.html" id="sample"&gt;
+        (sample link)&lt;/a&gt;&lt;/small&gt;&lt;br&gt;
+      &lt;/form&gt;
+      &lt;form&gt;
+        &lt;input type="button" value="version" onclick="ver()" /&gt;
+      &lt;/form&gt;
+    &lt;/div&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>To test a lot of interfaces in a single page-for example, a "suite" of properties that affect the colors of a web page-you can create a similar test page with a whole console of buttons, textfields, and other HTML elements. The following screenshot gives you some idea of how interfaces can be grouped together for testing.</p>
+
+<figure>
+<figcaption>Bild 0.1 Beispiel DOM Test Seite</figcaption>
+<img alt="Image:DOM_Ref_Introduction_to_the_DOM.gif" class="internal" src="/@api/deki/files/173/=DOM_Ref_Introduction_to_the_DOM.gif"></figure>
+
+<p>In this example, the dropdown menus dynamically update such DOM-accessible aspects of the web page as its background color (<code>bgColor</code>), the color of the hyperlinks (<code>aLink</code>), and color of the text (<code>text</code>). However you design your test pages, testing the interfaces as you read about them is an important part of learning how to use the DOM effectively.</p>
+
+<h2 id="Weitere_Links">Weitere Links</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a></li>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">Introduction to the DOM</a></li>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model/Events">Events and the DOM</a></li>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model/Examples">Examples</a></li>
+</ul>
diff --git a/files/de/gecko-dom-referenz/index.html b/files/de/gecko-dom-referenz/index.html
new file mode 100644
index 0000000000..d8498ba791
--- /dev/null
+++ b/files/de/gecko-dom-referenz/index.html
@@ -0,0 +1,65 @@
+---
+title: Gecko DOM Referenz
+slug: Gecko-DOM-Referenz
+tags:
+  - DOM
+  - Gecko
+  - Gecko-DOM-Referenz
+translation_of: Web/API/Document_Object_Model
+---
+<p>Dies ist die Übersichtsseite der Gecko DOM Referenz.</p>
+<div class="warning">Diese Referenz ist im Moment noch sehr unvollständig. Hilf mit: registriere dich und schreib mit!</div>
+<div class="note">Diese Referenz trennt zwischen Methoden und Eigenschaften die für Webinhalte verfügbar oder nur für Entwickler von Erweiterungen verfügbar sind. Erweiterungsentwickler halten sich bitte an die englische Funktionsreferenz im Mozilla Developer Center.</div>
+<h2 id="Einleitung_(englisch)"><a href="/en/Gecko_DOM_Reference/Preface" title="en/Gecko_DOM_Reference/Preface">Einleitung</a> (englisch)</h2>
+<ul> <li><a href="/en/Gecko_DOM_Reference/Preface#About_This_Reference" title="en/Gecko_DOM_Reference/Preface#About_This_Reference">Über diese Referenz</a> (englisch)</li> <li><a href="/en/Gecko_DOM_Reference/Preface#Who_Should_Read_This_Guide" title="en/Gecko_DOM_Reference/Preface#Who_Should_Read_This_Guide">Für wen diese Referenz gedacht ist</a> (englisch)</li> <li><a href="/en/Gecko_DOM_Reference/Preface#What_is_Gecko.3F" title="en/Gecko_DOM_Reference/Preface#What_is_Gecko.3F">Was ist Gecko?</a> (englisch)</li> <li><a href="/en/Gecko_DOM_Reference/Preface#API_Syntax" title="en/Gecko_DOM_Reference/Preface#API_Syntax">API Syntax</a> (englisch)</li> <li><a href="/en/Gecko_DOM_Reference/Preface#Using_the_Examples" title="en/Gecko_DOM_Reference/Preface#Using_the_Examples">Die Beispiele benutzen</a> (englisch)</li>
+</ul>
+<h2 id="Einführung_(englisch)"><a href="/en/Gecko_DOM_Reference/Introduction" title="en/Gecko_DOM_Reference/Introduction">Einführung</a> (englisch)</h2>
+<ul> <li><a href="/en/Gecko_DOM_Reference/Introduction#What_is_the_DOM.3F" title="en/Gecko_DOM_Reference/Introduction#What_is_the_DOM.3F">Was ist DOM?</a> (englisch)</li> <li><a href="/en/Gecko_DOM_Reference/Introduction#DOM_and_JavaScript" title="en/Gecko_DOM_Reference/Introduction#DOM_and_JavaScript">DOM und JavaScript</a> (englisch)</li> <li><a href="/en/Gecko_DOM_Reference/Introduction#How_Do_I_Access_the_DOM.3F" title="en/Gecko_DOM_Reference/Introduction#How_Do_I_Access_the_DOM.3F">Wie greife ich auf das DOM zu?</a> (englisch)</li> <li><a href="/en/Gecko_DOM_Reference/Introduction#Important_Data_Types" title="en/Gecko_DOM_Reference/Introduction#Important_Data_Types">Wichtige Datentypen</a> (englisch)</li> <li><a href="/en/Gecko_DOM_Reference/Introduction#DOM_Interfaces" title="en/Gecko_DOM_Reference/Introduction#DOM_Interfaces">DOM Schnittstellen</a> (englisch)</li> <li><a href="/en/Gecko_DOM_Reference/Introduction#Testing_the_DOM_API" title="en/Gecko_DOM_Reference/Introduction#Testing_the_DOM_API">Die DOM API testen</a> (englisch)</li>
+</ul>
+<h2 id="DOM_Objekt_Referenzen">DOM Objekt Referenzen</h2>
+<h4 id="DOM_window_Referenz"><a href="/de/DOM/window" title="de/DOM/window">DOM window Referenz</a></h4>
+<ul> <li><a href="/de/DOM/window#Einführung" title="de/DOM/window#Einführung">Einführung<br> </a></li> <li><a href="/de/DOM/window#Eigenschaften" title="de/DOM/window#Eigenschaften">Eigenschaften<br> </a></li> <li><a href="/de/DOM/window#Eigenschaften_in_XUL" title="de/DOM/window#Eigenschaften_in_XUL">Eigenschaften in XUL<br> </a></li> <li><a href="/de/DOM/window#Methoden" title="de/DOM/window#Methoden">Methoden<br> </a></li> <li><a href="/de/DOM/window#Methoden_in_XUL" title="de/DOM/window#Methoden_in_XUL">Methoden in XUL<br> </a></li> <li><a href="/de/DOM/window#Event-Handler" title="de/DOM/window#Event-Handler">Event-Handler</a></li>
+</ul>
+<h4 id="DOM_document_Reference" name="DOM_document_Reference"><a href="/de/DOM/document" title="de/DOM/document">DOM document Referenz</a></h4>
+<ul> <li><a href="/de/DOM/document#Einführung" title="de/DOM/document#Einführung">Einführung<br> </a></li> <li><a href="/de/DOM/document#Eigenschaften" title="de/DOM/document#Eigenschaften">Eigenschaften<br> </a></li> <li><a href="/de/DOM/document#Eigenschaften-in-XUL" title="de/DOM/document#Eigenschaften-in-XUL">Eigenschaften in XUL<br> </a></li> <li><a href="/de/DOM/document#Methoden" title="de/DOM/document#Methoden">Methoden<br> </a></li> <li><a href="/de/DOM/document#Methoden-in-XUL" title="de/DOM/document#Methoden-in-XUL">Methoden in XUL<br> </a></li> <li><a href="/de/DOM/document#Event-Handler" title="de/DOM/document#Event-Handler">Event-Handler</a></li>
+</ul>
+<h4 id="DOM_element_Reference" name="DOM_element_Reference"><a href="/de/DOM/element" title="de/DOM/element">DOM element Referenz</a></h4>
+<ul> <li><a href="/de/DOM/element#Einführung" title="de/DOM/element#Einführung">Einführung</a></li> <li><a href="/de/DOM/element#Eigenschaften" title="de/DOM/element#Eigenschaften">Eigenschaften<br> </a></li> <li><a href="/de/DOM/element#Methoden" title="de/DOM/element#Methoden">Methoden<br> </a></li> <li><a href="/de/DOM/element#Event-Handler" title="de/DOM/element#Event-Handler">Event-Handler</a></li>
+</ul>
+<h4 id="DOM_event_Reference" name="DOM_event_Reference"><a href="/de/DOM/event" title="de/DOM/event">DOM event Referenz</a></h4>
+<p>(mit den Unterobjekten <a href="/de/DOM/Event/UIEvent" title="de/DOM/Event/UIEvent">UIEvent</a>, <a href="/de/DOM/Event/UIEvent/KeyEvent" title="de/DOM/Event/UIEvent/KeyEvent">KeyEvent</a>, <a href="/de/DOM/Event/UIEvent/MouseEvent" title="de/DOM/Event/UIEvent/MouseEvent">MouseEvent</a>)</p>
+<ul> <li><a href="/de/DOM/event#Einführung" title="de/DOM/event#Einführung">Einführung</a></li> <li><a href="/de/DOM/event#Eigenschaften" title="de/DOM/event#Eigenschaften">Eigenschaften<br> </a></li> <li><a href="/de/DOM/event#Methoden" title="de/DOM/event#Methoden">Methoden<br> </a></li>
+</ul>
+<h4 id="DOM_range_Reference" name="DOM_range_Reference"><a href="/de/DOM/range" title="de/DOM/range">DOM range Referenz</a></h4>
+<ul> <li><a href="/de/DOM/range#Einführung" title="de/DOM/range#Einführung">Einführung<br> </a></li> <li><a href="/de/DOM/range#Eigenschaften" title="de/DOM/range#Eigenschaften">Eigenschaften<br> </a></li> <li><a href="/de/DOM/range#Methoden" title="de/DOM/range#Methoden">Methoden</a></li>
+</ul>
+<h4 id="DOM_selection_Reference" name="DOM_selection_Reference"><a href="/de/DOM/Selection" title="de/DOM/Selection">DOM selection Referenz</a></h4>
+<ul> <li><a href="/de/DOM/Selection#Einführung" title="de/DOM/Selection#Einführung">Einführung<br> </a></li> <li><a href="/de/DOM/Selection#Glossar" title="de/DOM/Selection#Glossar">Glossar</a></li> <li><a href="/de/DOM/Selection#Eigenschaften" title="de/DOM/Selection#Eigenschaften">Eigenschaften<br> </a></li> <li><a href="/de/DOM/Selection#Methoden" title="de/DOM/Selection#Methoden">Methoden<br> </a></li> <li><a href="/de/DOM/Selection#Bemerkungen" title="de/DOM/Selection#Bemerkungen">Weiterführende Bemerkungen<br> </a></li> <li><a href="/de/DOM/Selection#Externe_Links" title="de/DOM/Selection#Externe_Links">Externe Links<br> </a></li>
+</ul>
+<p>Plugin</p>
+<h4 id="DOM_style_Reference" name="DOM_style_Reference"><a href="/de/DOM/style" title="de/DOM/style">DOM style Referenz</a></h4>
+<ul> <li><a href="/de/DOM/style#Hinweise" title="de/DOM/style#Hinweise">Hinweise</a></li>
+</ul>
+<h2 id="DOM_-_Andere_Objekte">DOM - Andere Objekte</h2>
+<ul> <li><a href="/de/DOM/Attr" title="de/DOM/Attr">Attr</a></li> <li><a href="/de/DOM/CDATASection" title="de/DOM/CDATASection">CDATASection</a></li> <li><a href="/de/DOM/CharacterData" title="de/DOM/CharacterData">CharacterData</a></li> <li><a href="/de/DOM/Comment" title="de/DOM/Comment">Comment</a></li> <li><a href="/de/DOM/DocumentFragment" title="de/DOM/DocumentFragment">DocumentFragment</a></li> <li><a href="/de/DOM/DocumentType" title="de/DOM/DocumentType">DocumentType</a></li> <li><a href="/de/DOM/DOMConfiguration" title="de/DOM/DOMConfiguration">DOMConfiguration</a> {{ unimplemented_inline() }}</li> <li><a href="/de/DOM/DOMError" title="de/DOM/DOMError">DOMError</a> {{ unimplemented_inline() }}</li> <li><a href="/de/DOM/DOMErrorHandler" title="de/DOM/DOMErrorHandler">DOMErrorHandler</a> {{ unimplemented_inline() }}</li> <li><a href="/de/DOM/DOMException" title="de/DOM/DOMException">DOMException</a></li> <li><a href="/de/DOM/DOMImplementation" title="de/DOM/DOMImplementation">DOMImplementation</a></li> <li><a href="/de/DOM/DOMImplementationList" title="de/DOM/DOMImplementationList">DOMImplementationList</a></li> <li><a href="/de/DOM/DOMImplementationRegistry" title="de/DOM/DOMImplementationRegistry">DOMImplementationRegistry</a></li> <li><a href="/de/DOM/DOMImplementationSource" title="de/DOM/DOMImplementationSource">DOMImplementationSource</a></li> <li><a href="/de/DOM/DOMLocator" title="de/DOM/DOMLocator">DOMLocator</a> {{ unimplemented_inline() }}</li> <li><a href="/de/DOM/DOMObject" title="de/DOM/DOMObject">DOMObject</a></li> <li><a href="/de/DOM/DOMString" title="de/DOM/DOMString">DOMString</a></li> <li><a href="/de/DOM/DOMStringList" title="de/DOM/DOMStringList">DOMStringList</a> {{ unimplemented_inline() }}</li> <li><a href="/de/DOM/DOMTimeStamp" title="de/DOM/DOMTimeStamp">DOMTimeStamp</a></li> <li><a href="/de/DOM/DOMUserData" title="de/DOM/DOMUserData">DOMUserData</a></li> <li><a href="/de/DOM/Entity" title="de/DOM/Entity">Entity</a> {{ unimplemented_inline() }}</li> <li><a href="/de/DOM/EntityReference" title="de/DOM/EntityReference">EntityReference</a> {{ unimplemented_inline() }}</li> <li><a href="/de/DOM/NameList" title="de/DOM/NameList">NameList</a> {{ unimplemented_inline() }}</li> <li><a href="/de/DOM/NamedNodeMap" title="de/DOM/NamedNodeMap">NamedNodeMap</a></li> <li><a href="/de/DOM/Node" title="de/DOM/Node">Node</a></li> <li><a href="/de/DOM/NodeList" title="de/DOM/NodeList">NodeList</a></li> <li><a href="/de/DOM/Notation" title="de/DOM/Notation">Notation</a> {{ unimplemented_inline() }}</li> <li><a href="/de/DOM/Plugin" title="de/DOM/Plugin">Plugin</a></li> <li><a href="/de/DOM/PluginArray" title="de/DOM/PluginArray">PluginArray</a></li> <li><a href="/de/DOM/ProcessingInstruction" title="de/DOM/ProcessingInstruction">ProcessingInstruction</a></li> <li><a class="internal" href="/de/DOM/SharedWorker" title="de/DOM/SharedWorker">SharedWorker</a> {{ unimplemented_inline() }}</li> <li><a href="/de/DOM/Text" title="de/DOM/Text">Text</a></li> <li><a href="/de/DOM/TimeRanges" title="de/DOM/TimeRanges">TimeRanges</a> {{ gecko_minversion_inline("2.0") }}</li> <li><a href="/de/DOM/TypeInfo" title="de/DOM/TypeInfo">TypeInfo</a> {{ unimplemented_inline() }}</li> <li><a href="/de/DOM/UserDataHandler" title="de/DOM/UserDataHandler">UserDataHandler</a></li> <li><a class="internal" href="/de/DOM/Worker" title="de/DOM/Worker">Worker</a> {{ fx_minversion_inline(3.5) }}</li> <li><a class="internal" href="/de/DOM/WorkerGlobalScope" title="de/DOM/WorkerGlobalScope">WorkerGlobalScope</a> {{ fx_minversion_inline(3.5) }}</li>
+</ul>
+<h2 id="HTML_Schnittstellen">HTML Schnittstellen</h2>
+<p><a href="/de/DOM/HTMLDocument" title="de/DOM/HTMLDocument">HTMLDocument</a> (Siehe auch <a href="/de/DOM/document" title="de/DOM/document">document</a>)</p>
+<h3 id="HTML_Elementschnittstellen">HTML Elementschnittstellen</h3>
+<ul class="tree"> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLElement" title="en/DOM/HTMLElement">HTMLElement</a></span>, direkt implementiert von: {{ HTMLElement("dd") }}, {{ HTMLElement("dt") }}, {{ HTMLElement("tt") }}, {{ HTMLElement("i") }}, {{ HTMLElement("b") }}, {{ HTMLElement("u") }}, {{ HTMLElement("s") }}, {{ HTMLElement("strike") }}, {{ HTMLElement("big") }}, {{ HTMLElement("small") }}, {{ HTMLElement("em") }}, {{ HTMLElement("strong") }}, {{ HTMLElement("dfn") }}, {{ HTMLElement("code") }}, {{ HTMLElement("samp") }}, {{ HTMLElement("kbd") }}, {{ HTMLElement("var") }}, {{ HTMLElement("cite") }}, {{ HTMLElement("acronym") }}, {{ HTMLElement("abbr") }}, {{ HTMLElement("sub") }}, {{ HTMLElement("sup") }}, {{ HTMLElement("bdo") }}, {{ HTMLElement("center") }}, {{ HTMLElement("address") }}, {{ HTMLElement("noframes") }}, {{ HTMLElement("wbr") }}, {{ HTMLElement("noscript") }}, {{ HTMLElement("noembed") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("article") }}, {{ HTMLElement("aside") }}, {{ HTMLElement("section") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("figure") }}, {{ HTMLElement("figcaption") }}, {{ HTMLElement("mark") }}, {{ HTMLElement("ruby") }}, {{ HTMLElement("rt") }}, {{ HTMLElement("rp") }} <ul class="tree"> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLAnchorElement" title="en/DOM/HTMLAnchorElement">HTMLAnchorElement</a></span>, implementiert von: {{ HTMLElement("a") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLAppletElement" title="en/DOM/HTMLAppletElement">HTMLAppletElement</a></span>, implementiert von: {{ HTMLElement("applet") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLAudioElement" title="en/DOM/HTMLAudioElement">HTMLAudioElement</a></span>, implementiert von: {{ HTMLElement("audio") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLAreaElement" title="en/DOM/HTMLAreaElement">HTMLAreaElement</a></span>, implementiert von: {{ HTMLElement("area") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLBaseElement" title="En/DOM/HTMLBaseElement">HTMLBaseElement</a></span>, implementiert von: {{ HTMLElement("base") }}</li> <li><a href="/de/DOM/HTMLBaseFontElement" title="en/DOM/HTMLBaseFontElement"><span style="font-family: Times New Roman;">HTMLBaseFontElemen</span>t</a>, implementiert von: {{ HTMLElement("basefont") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLBodyElement" title="en/DOM/HTMLBodyElement">HTMLBodyElement</a></span>, implementiert von: {{ HTMLElement("body") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLBRElement" title="en/DOM/HTMLBRElement">HTMLBRElement</a></span>, implementiert von: {{ HTMLElement("br") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLButtonElement" title="en/DOM/HTMLButtonElement">HTMLButtonElement</a></span>, implementiert von: {{ HTMLElement("button") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLCanvasElement" title="en/DOM/HTMLCanvasElement">HTMLCanvasElement</a></span>, implementiert von: {{ HTMLElement("canvas") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLDirectoryElement" title="en/DOM/HTMLDirectoryElement">HTMLDirectoryElement</a></span>, implementiert von: {{ HTMLElement("dir") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLDivElement" title="en/DOM/HTMLDivElement">HTMLDivElement</a></span>, implementiert von: {{ HTMLElement("div") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLDListElement" title="en/DOM/HTMLDListElement">HTMLDListElement</a></span>, implementiert von: {{ HTMLElement("dl") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLEmbedElement" title="en/DOM/HTMLEmbedElement">HTMLEmbedElement</a></span>, implementiert von: {{ HTMLElement("embed") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLFieldSetElement" title="En/DOM/HTMLFieldSetElement">HTMLFieldSetElement</a></span>, implementiert von: {{ HTMLElement("fieldset") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLFontElement" title="en/DOM/HTMLFontElement">HTMLFontElement</a></span>, implementiert von: {{ HTMLElement("font") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLFormElement" title="En/DOM/HTMLFormElement">HTMLFormElement</a></span>, implementiert von: {{ HTMLElement("form") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLFrameElement" title="en/DOM/HTMLFrameElement">HTMLFrameElement</a></span>, implementiert von: {{ HTMLElement("frame") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLFrameSetElement" title="en/DOM/HTMLFrameSetElement">HTMLFrameSetElement</a></span>, implementiert von: {{ HTMLElement("frameset") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLHeadElement" title="en/DOM/HTMLHeadElement">HTMLHeadElement</a></span>, implementiert von: {{ HTMLElement("head") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLHeadingElement" title="en/DOM/HTMLHeadingElement">HTMLHeadingElement</a></span>, implementiert von: {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLHtmlElement" title="en/DOM/HTMLHtmlElement">HTMLHtmlElement</a></span>, implementiert von: {{ HTMLElement("html") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLHRElement" title="en/DOM/HTMLHRElement">HTMLHRElement</a></span>, implementiert von: {{ HTMLElement("hr") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLIFrameElement" title="En/DOM/HTMLIFrameElement">HTMLIFrameElement</a></span>, implementiert von: {{ HTMLElement("iframe") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLImageElement" title="En/DOM/HTMLImageElement">HTMLImageElement</a></span>, implementiert von: {{ HTMLElement("image") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLInputElement" title="En/DOM/HTMLInputElement">HTMLInputElement</a></span>, implementiert von: {{ HTMLElement("input") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLKeygenElement" title="en/DOM/HTMLKeygenElement">HTMLKeygenElement</a></span>, implementiert von: {{ HTMLElement("keygen") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLLabelElement" title="En/DOM/HTMLLabelElement">HTMLLabelElement</a></span>, implementiert von: {{ HTMLElement("label") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLLIElement" title="en/DOM/HTMLLIElement">HTMLLIElement</a></span>, implementiert von: {{ HTMLElement("li") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLLinkElement" title="en/DOM/HTMLLinkElement">HTMLLinkElement</a></span>, implementiert von: {{ HTMLElement("link") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLMapElement" title="en/DOM/HTMLMapElement">HTMLMapElement</a></span>, implementiert von: {{ HTMLElement("map") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLMenuElement" title="en/DOM/HTMLMenuElement">HTMLMenuElement</a></span>, implementiert von: {{ HTMLElement("menu") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLMetaElement" title="En/DOM/HTMLMetaElement">HTMLMetaElement</a></span>, implementiert von: {{ HTMLElement("meta") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLModElement" title="en/DOM/HTMLModElement">HTMLModElement</a></span>, implementiert von: {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLObjectElement" title="En/DOM/HTMLObjectElement">HTMLObjectElement</a></span>, implementiert von: {{ HTMLElement("object") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLOListElement" title="en/DOM/HTMLOListElement">HTMLOListElement</a></span>, implementiert von: {{ HTMLElement("ol") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLOptGroupElement" title="en/DOM/HTMLOptGroupElement">HTMLOptGroupElement</a></span>, implementiert von: {{ HTMLElement("optgroup") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLOptionElement" title="En/DOM/HTMLOptionElement">HTMLOptionElement</a></span>, implementiert von: {{ HTMLElement("option") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLOutputElement" title="en/DOM/HTMLOutputElement">HTMLOutputElement</a></span>, implementiert von: {{ HTMLElement("output") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLParagraphElement" title="en/DOM/HTMLParagraphElement">HTMLParagraphElement</a></span>, implementiert von: {{ HTMLElement("p") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLParamElement" title="en/DOM/HTMLParamElement">HTMLParamElement</a></span>, implementiert von: {{ HTMLElement("param") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLPreElement" title="en/DOM/HTMLPreElement">HTMLPreElement</a></span>, implementiert von: {{ HTMLElement("pre") }}, {{ HTMLElement("plaintext") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLQuoteElement" title="en/DOM/HTMLQuoteElement">HTMLQuoteElement</a></span>, implementiert von: {{ HTMLElement("q") }}, {{ HTMLElement("blockquote") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLScriptElement" title="en/DOM/HTMLScriptElement">HTMLScriptElement</a></span>, implementiert von: {{ HTMLElement("script") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLSelectElement" title="En/DOM/HTMLSelectElement">HTMLSelectElement</a></span>, implementiert von: {{ HTMLElement("select") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLSourceElement" title="en/DOM/HTMLSourceElement">HTMLSourceElement</a></span>, implementiert von: {{ HTMLElement("source") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLSpanElement" title="en/DOM/HTMLSpanElement">HTMLSpanElement</a></span>, implementiert von: {{ HTMLElement("span") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLStyleElement" title="En/DOM/HTMLStyleElement">HTMLStyleElement</a></span>, implementiert von: {{ HTMLElement("style") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLTableElement" title="En/DOM/HTMLTableElement">HTMLTableElement</a></span>, implementiert von: {{ HTMLElement("table") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLTableCaptionElement" title="en/DOM/HTMLTableCaptionElement">HTMLTableCaptionElement</a></span>, implementiert von: {{ HTMLElement("caption") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLTableCellElement" title="en/DOM/HTMLTableCellElement">HTMLTableCellElement</a></span>, <br> <ul> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLTableDataCellElement" title="en/DOM/HTMLTableDataCellElement">HTMLTableDataCellElement</a></span>, implementiert von: {{ HTMLElement("td") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLTableHeaderCellElement" title="en/DOM/HTMLTableHeaderCellElement">HTMLTableHeaderCellElement</a></span>, implementiert von: {{ HTMLElement("th") }}</li> </ul> </li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLTableColElement" title="en/DOM/HTMLTableColElement">HTMLTableColElement</a></span>, implementiert von: {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLTableRowElement" title="En/DOM/HTMLTableRowElement">HTMLTableRowElement</a></span>, implementiert von: {{ HTMLElement("tr") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLTableSectionElement" title="en/DOM/HTMLTableSectionElement">HTMLTableSectionElement</a></span>, implementiert von: {{ HTMLElement("tfoot") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tbody") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLTextAreaElement" title="En/DOM/HTMLTextAreaElement">HTMLTextAreaElement</a></span>, implementiert von: {{ HTMLElement("textarea") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLTimeElement" title="en/DOM/HTMLTimeElement">HTMLTimeElement</a></span>, implementiert von: {{ HTMLElement("time") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLTitleElement" title="en/DOM/HTMLTitleElement">HTMLTitleElement</a></span>, implementiert von: {{ HTMLElement("title") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLTrackElement" title="en/DOM/HTMLTrackElement">HTMLTrackElement</a></span>, implementiert von: {{ HTMLElement("track") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLUListElement" title="en/DOM/HTMLUListElement">HTMLUListElement</a></span>, implementiert von: {{ HTMLElement("ul") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLUListElement" title="en/DOM/HTMLUListElement">HTMLUnknownElement</a></span>, implementiert von: {{ HTMLElement("bgsound") }}, {{ HTMLElement("isindex") }}, {{ HTMLElement("bq") }}, {{ HTMLElement("nextid") }}, {{ HTMLElement("multicol") }}, {{ HTMLElement("spacer") }}, {{ HTMLElement("noframes") }}</li> <li><span style="font-family: Times New Roman;"><a href="/de/DOM/HTMLVideoElement" title="en/DOM/HTMLVideoElement">HTMLVideoElement</a></span>, implementiert von: {{ HTMLElement("video") }}</li> </ul> </li>
+</ul>
+<h4 id="Canvas-Schnittstelle"><a href="/de/HTML/Canvas" title="de/HTML/Canvas">Canvas-Schnittstelle</a></h4>
+<ul> <li><a href="/de/HTML/Element/canvas" title="de/HTML/element/canvas">HTMLCanvasElement</a></li> <li><a href="/de/DOM/CanvasRenderingContext2D" title="de/DOM/CanvasRenderingContext2D">CanvasRenderingContext2D</a></li> <li><a href="/de/DOM/CanvasGradient" title="de/DOM/CanvasGradient">CanvasGradient</a></li> <li><a href="/de/DOM/CanvasPattern" title="de/DOM/CanvasPattern">CanvasPattern</a></li> <li><a href="/de/DOM/TextMetrics" title="de/DOM/TextMetrics">TextMetrics</a></li> <li><a href="/de/DOM/ImageData" title="de/DOM/ImageData">ImageData</a></li> <li><a href="/de/DOM/CanvasPixelArray" title="de/DOM/CanvasPixelArray">CanvasPixelArray</a></li>
+</ul>
+<h4 id="Medien-bezogene_Schnittstellen">Medien-bezogene Schnittstellen</h4>
+<p>Diese Schnittstellen werden für Aufgaben im Bereich von Audio und Video verwendet.</p>
+<dl> <dt><code><a href="/de/DOM/HTMLAudioElement" title="de/DOM/HTMLAudioElement">HTMLAudioElement</a></code></dt> <dd>Repräsentiert das HTML5 {{ HTMLElement("audio") }} Element.</dd> <dt><code><a href="/de/DOM/HTMLVideoElement" title="de/DOM/HTMLVideoElement">HTMLVideoElement</a></code></dt> <dd>Repräsentiert das HTML5 {{ HTMLElement("video") }} Element.</dd> <dt><code><a href="/de/DOM/NotifyAudioAvailableEvent" title="de/DOM/NotifyAudioAvailableEvent">NotifyAudioAvailableEvent</a><br> </code></dt> <dd>Beschreibt ein Ereignis, welches ausgelöst wird, wenn Skripten Zugang zu Audiostream-Daten erlaubt wurde.</dd>
+</dl>
+<h3 id="Collection_Schnittstellen">Collection Schnittstellen</h3>
+<p><a href="/de/DOM/HTMLCollection" title="de/DOM/HTMLCollection">HTMLCollection</a>, HTMLAllCollection, <a href="/de/DOM/HTMLFormControlsCollection" title="de/DOM/HTMLFormControlsCollection">HTMLFormControlsCollection</a>, <a href="/de/DOM/HTMLOptionsCollection" title="de/DOM/HTMLOptionsCollection">HTMLOptionsCollection</a>, HTMLPropertiesCollection</p>
+<h3 id="Andere_HTML_Schnittstellen">Andere HTML Schnittstellen</h3>
+<p><a href="/de/DOM/DOMTokenList" title="de/DOM/DOMTokenList">DOMTokenList</a>, DOMSettableTokenList, DOMStringMap, RadioNodeList</p>
+<h2 id="DOM_Beispiele_(englisch)"><a href="/en/Gecko_DOM_Reference/Examples" title="en/Gecko_DOM_Reference/Examples">DOM Beispiele</a> (englisch)</h2>
+<ul> <li><a href="/en/Gecko_DOM_Reference/Examples#Example_1:_height_and_width" title="en/Gecko_DOM_Reference/Examples#Example_1:_height_and_width">Example 1: height and width</a></li> <li><a href="/en/Gecko_DOM_Reference/Examples#Example_2:_Image_Attributes" title="en/Gecko_DOM_Reference/Examples#Example_2:_Image_Attributes">Example 2: Image Attributes</a></li> <li><a href="/en/Gecko_DOM_Reference/Examples#Example_3:_Manipulating_Styles" title="en/Gecko_DOM_Reference/Examples#Example_3:_Manipulating_Styles">Example 3: Manipulating Styles</a></li> <li><a href="/en/Gecko_DOM_Reference/Examples#Example_4:_Using_Stylesheets" title="en/Gecko_DOM_Reference/Examples#Example_4:_Using_Stylesheets">Example 4: Using Stylesheets</a></li> <li><a href="/en/Gecko_DOM_Reference/Examples#Example_5:_Event_Propagation" title="en/Gecko_DOM_Reference/Examples#Example_5:_Event_Propagation">Example 5: Event Propagation</a></li> <li><a href="/en/Gecko_DOM_Reference/Examples#Example_6:_getComputedStyle" title="en/Gecko_DOM_Reference/Examples#Example_6:_getComputedStyle">Example 6: getComputedStyle</a></li> <li><a href="/en/Gecko_DOM_Reference/Examples#Example_7:_Displaying_Event_Object_Eigenschaften" title="en/Gecko_DOM_Reference/Examples#Example_7:_Displaying_Event_Object_Eigenschaften">Example 7: Displaying Event Object Properties</a></li> <li><a href="/en/Gecko_DOM_Reference/Examples#Example_8:_Using_the_DOM_Table_Interface" title="en/Gecko_DOM_Reference/Examples#Example_8:_Using_the_DOM_Table_Interface">Example 8: Using the DOM Table Interface</a></li>
+</ul>
+<p>{{ languages( { "en" : "en/Gecko_DOM_Reference", "es": "es/Referencia_DOM_de_Gecko", "fr": "fr/R\u00e9f\u00e9rence_du_DOM_Gecko", "it": "it/Reference_del_DOM_di_Gecko", "ja": "ja/Gecko_DOM_Reference", "ko": "ko/Gecko_DOM_Reference", "pl": "pl/Dokumentacja_Gecko_DOM", "zh-cn": "cn/Gecko_DOM_\u53c2\u8003" } ) }}</p>
diff --git a/files/de/gecko_user_agent_string_referenz/index.html b/files/de/gecko_user_agent_string_referenz/index.html
new file mode 100644
index 0000000000..6af733f131
--- /dev/null
+++ b/files/de/gecko_user_agent_string_referenz/index.html
@@ -0,0 +1,230 @@
+---
+title: Referenz der User-Agent-Strings für Gecko
+slug: Gecko_user_agent_string_referenz
+translation_of: Web/HTTP/Headers/User-Agent/Firefox
+---
+<p>{{ gecko_minversion_header("2.0") }}</p>
+<p>Dieses Dokument beschreibt den User-Agent-String (Browsertyp-Indefitizierungstext), der seit Firefox 4 und in <a href="/en-US/docs/Mozilla/Gecko" title="/en-US/docs/Mozilla/Gecko">Gecko</a> 2.0 (oder höher) -basierenden Programmen verwendet wird. Bezüglich des Verlaufs der Änderungen auf dem Text in Gecko 2.0, konsultiern Sie den Blog-Post <a class="external" href="http://hacks.mozilla.org/2010/09/final-user-agent-string-for-firefox-4/" title="Final User Agent string for Firefox 4">Final User Agent string for Firefox 4</a>. Schauen Sie auch in unserer Dokumentation zu <a href="/en-US/docs/Browser_detection_using_the_user_agent" title="/en-US/docs/Browser_detection_using_the_user_agent">user agent sniffing (Erkennen von Browsertypen)</a> und <a href="https://hacks.mozilla.org/2013/09/user-agent-detection-history-and-checklist/" title="https://hacks.mozilla.org/2013/09/user-agent-detection-history-and-checklist/">den Blog-Post über die Hacks</a>.</p>
+<h2 id="Allgemeine_Form"><span id="proposal">Allgemeine Form</span></h2>
+<p>AU-String von Firefox besteht aus vier Teilen:</p>
+<p style="margin-left: 40px;"><span style="font-size: medium;"><strong>Mozilla/5.0 (<em>Platform</em>; rv:<em>geckoversion</em>) Gecko/<span style="font-style: italic;">geckotrail</span> Firefox/<em>firefoxversion</em></strong></span></p>
+<ul>
+ <li><em><strong>Mozilla/5.0</strong></em> ist ein allgemeiner Wert, der besagt, dass der Browser Mozilla-kompatibel ist und das sind heutzutage fast alle Browser.</li>
+ <li><strong><em>platform</em></strong> describes the native platform the browser is running on (e.g. Windows, Mac, Linux or Android), and whether or not it's a mobile phone. Firefox OS phones simply say "Mobile"; the web is the platform. Note that <strong><em>platform</em></strong> can consist of multiple "; "-separated tokens. See below for further details and examples.</li>
+ <li><em><strong>Firefox/firefoxversion</strong></em> indicates the browser is Firefox, and provides the version (such as "<em>17.0"</em>).</li>
+ <li><strong>rv:<em>geckoversion</em></strong> indicates the release version of Gecko (such as <em>"17.0"</em>). In recent browsers, <strong><em>geckoversion</em></strong> is the same as <strong><em>firefoxversion</em></strong>.</li>
+ <li><strong><em>Gecko/geckotrail</em></strong> indicates that the browser is based on Gecko.</li>
+ <li>On Desktop, <span style="font-style: italic;"><span style="font-weight: bold;">geckotrail</span></span> is the fixed string "20100101"</li>
+ <li>{{ gecko_minversion_inline("10.0") }} from Firefox 10 on mobile, <span style="font-style: italic;"><span style="font-weight: bold;">geckotrail</span></span> is the same as <strong><em>firefoxversion</em></strong></li>
+</ul>
+<div class="note">
+ <strong>Note:</strong> The recommended way of sniffing for Gecko-based browsers (if you <em>have to</em> sniff for the browser engine instead of using feature detection) is by the presence of the "<em>Gecko</em>" and "<em>rv:</em>" strings, since some other browsers include a "<em>like Gecko</em>" token.</div>
+<p>For other products based on Gecko, the string can take one of two forms, where the tokens have the same meaning except those noted below:</p>
+<p style="margin-left: 40px;"><span style="font-size: medium;"><strong>Mozilla/5.0 (<em>platform</em>; rv:<em>geckoversion</em>) Gecko/<em>geckotrail </em></strong></span><span style="font-size: medium;"><strong><em>appname</em>/<em>appversion</em></strong><br>
+ <strong>M</strong></span><span style="font-size: medium;"><strong>ozilla/5.0 (<em>platform</em>; rv:<em>geckoversion</em>) Gecko/<em>geckotrail</em></strong></span><span style="font-size: medium;"><strong> Firefox/<em>firefoxversion</em></strong></span><span style="font-size: medium;"><strong> <em>appname</em>/<em>appversion</em></strong></span></p>
+<ul>
+ <li><strong><em>appname/appversion</em></strong> indicates the application name and version. For instance, this could be "<em>Camino/2.1.1</em>", or "<em>SeaMonkey/2.7.1</em>".</li>
+ <li>
+  <p><em><strong>Firefox/firefoxversion</strong></em> is an optional compatibility token that some Gecko-based browsers may choose to incorporate, to achieve maximum compatibility with websites that expect Firefox.  <em><strong>firefoxversion</strong></em> will generally represent the equivalent Firefox release corresponding to the given Gecko version. Some Gecko-based browsers may not opt into using this token; for this reason, sniffers should be looking for Gecko — not Firefox! Whether this token appears is controlled by the <em>"general.useragent.compatMode.firefox"</em> boolean pref.</p>
+ </li>
+</ul>
+<p>{{ h2_gecko_minversion("Mobile and Tablet indicators", "11.0") }}</p>
+<p>The <strong><em>platform</em></strong> part of the UA string indicates if Firefox is running on a phone-sized or tablet device. When Firefox runs on a device that has the phone form factor, there is a <strong>Mobile;</strong> token in the <strong><em>platform</em></strong> part of the UA string. When Firefox runs on a tablet device, there is a <strong>Tablet;</strong> token in the platform part of the UA string instead. For example:</p>
+<p style="margin-left: 40px;"><span style="font-size: medium;">Mozilla/5.0 (Android; <strong>Mobile</strong>; rv:13.0) Gecko/13.0 Firefox/13.0</span></p>
+<p style="margin-left: 40px;"><span style="font-size: medium;">Mozilla/5.0 (Android; <strong>Tablet</strong>; rv:13.0) Gecko/13.0 Firefox/13.0</span></p>
+<p>The preferred way to target content to a device form factor is to use CSS Media Queries. However, if you use UA sniffing to target content to a device form factor, please look for <strong>Mobi</strong> (to include Opera Mobile, which uses "Mobi") for the phone form factor and do <strong>not</strong> assume any correlation between "Android" and the device form factor. This way, your code will work if/when Firefox ships on other phone/tablet operating systems or Android is used for laptops. Also, please use touch detection to find touch devices rather than looking for "Mobi" or "Tablet" - there may be touch devices which are not tablets.</p>
+<div class="note">
+ <strong>Note:</strong> Firefox OS devices identify themselves without any operating system indication; for example: "Mozilla/5.0 (Mobile; rv:15.0) Gecko/15.0 Firefox/15.0". The web is the platform.</div>
+<h2 id="Windows">Windows</h2>
+<p>Windows user agents have the following variations, where <em>x.y</em> is the Windows NT version (for instance, Windows NT 6.1).</p>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Windows version</th>
+   <th scope="col">Gecko user agent string</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Windows NT on x86</td>
+   <td>Mozilla/5.0 (Windows NT <em>x</em>.<em>y</em>; rv:10.0) Gecko/20100101 Firefox/10.0</td>
+  </tr>
+  <tr>
+   <td>Windows NT, Win64 on x64</td>
+   <td>Mozilla/5.0 (Windows NT <em>x</em>.<em>y</em>; Win64; x64; rv:10.0) Gecko/20100101 Firefox/10.0</td>
+  </tr>
+  <tr>
+   <td>Windows NT, WOW64</td>
+   <td>Mozilla/5.0 (Windows NT <em>x</em>.<em>y</em>; WOW64; rv:10.0) Gecko/20100101 Firefox/10.0</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Macintosh">Macintosh</h2>
+<p>Here, <em>x.y</em> is the version of Mac OS X (for instance, Mac OS X 10.6).</p>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Mac OS X version</th>
+   <th scope="col">Gecko user agent string</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Mac OS X on Intel x86 or x86_64</td>
+   <td>Mozilla/5.0 (Macintosh; Intel Mac OS X <em>x.y</em>; rv:10.0) Gecko/20100101 Firefox/10.0</td>
+  </tr>
+  <tr>
+   <td>Mac OS X on PowerPC</td>
+   <td>Mozilla/5.0 (Macintosh; PPC Mac OS X <em>x.y</em>; rv:10.0) Gecko/20100101 Firefox/10.0</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Linux">Linux</h2>
+<p>Linux is a more diverse platform. A few common examples are given below.</p>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Linux version</th>
+   <th scope="col">Gecko user agent string</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Linux desktop, i686</td>
+   <td>Mozilla/5.0 (X11; Linux i686; rv:10.0) Gecko/20100101 Firefox/10.0</td>
+  </tr>
+  <tr>
+   <td>Linux desktop, x86_64</td>
+   <td>Mozilla/5.0 (X11; Linux x86_64; rv:10.0) Gecko/20100101 Firefox/10.0</td>
+  </tr>
+  <tr>
+   <td>Linux desktop, i686 running on x86_64</td>
+   <td>Mozilla/5.0 (X11; Linux i686 on x86_64; rv:10.0) Gecko/20100101 Firefox/10.0</td>
+  </tr>
+  <tr>
+   <td>Nokia N900 Linux mobile, on the Fennec browser</td>
+   <td>Mozilla/5.0 (Maemo; Linux armv7l; rv:10.0) Gecko/20100101 Firefox/10.0 Fennec/10.0</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Android">Android</h2>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Form factor</th>
+   <th scope="col">Gecko user agent string</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Phone</td>
+   <td>Mozilla/5.0 (Android; Mobile; rv:26.0) Gecko/26.0<span class="Object" id="OBJ_PREFIX_DWT935_com_zimbra_ymaps"><span class="Object" id="OBJ_PREFIX_DWT936_com_zimbra_ymaps"> Firefox/26.0</span></span></td>
+  </tr>
+  <tr>
+   <td>Tablet</td>
+   <td>Mozilla/5.0 (Android; Tablet; rv:26.0) Gecko/26.0<span class="Object" id="OBJ_PREFIX_DWT935_com_zimbra_ymaps"><span class="Object" id="OBJ_PREFIX_DWT936_com_zimbra_ymaps"> Firefox/26.0</span></span></td>
+  </tr>
+  <tr>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Firefox_OS">Firefox OS</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Form factor</th>
+   <th scope="col">Gecko user agent string</th>
+  </tr>
+  <tr>
+   <td>Phone</td>
+   <td>Mozilla/5.0 (Mobile; rv:26.0) Gecko/26.0 Firefox/26.0</td>
+  </tr>
+  <tr>
+   <td>Tablet</td>
+   <td>Mozilla/5.0 (Tablet; rv:26.0) Gecko/26.0 Firefox/26.0</td>
+  </tr>
+  <tr>
+   <td>Device-specifc</td>
+   <td>Mozilla/5.0 (Mobile; <em><strong>nnnn;</strong></em> rv:26.0) Gecko/26.0 Firefox/26.0</td>
+  </tr>
+ </tbody>
+</table>
+<h3 id="Device-specific_user_agent_strings">Device-specific user agent strings</h3>
+<p>Although it is discouraged by Mozilla, some handset manufacturers include a token in their device's UA string that represents their device id. <span style="line-height: 1.572;">If this is the case, the Firefox OS UA string will look like the device-specific string in the table above, w</span><span style="line-height: 1.572;">here </span><em><strong>nnnn;</strong></em><span style="line-height: 1.572;"> is the manufacturer's code for the device. This code could be something like </span><strong style="line-height: 1.572;">NexusOne;</strong><span style="line-height: 1.572;"> or </span><strong style="line-height: 1.572;">ZTEOpen;</strong><span style="line-height: 1.572;">. </span><span style="line-height: 1.572;">We provide this information to assist with your UA detection logic, but Mozilla discourages the detection of a device id in UA strings.</span></p>
+<p>Here is a JavaScript regular expression that will detect all mobile devices, including devices with a device id in their UA string:</p>
+<pre>/mobi/i</pre>
+<p>The <code>i</code> makes it case-insensitive, and <code>mobi</code> matches all mobile browsers.</p>
+<h3 id="Firefox_OS_version_number">Firefox OS version number</h3>
+<p>While the version number for Firefox OS is not included in the UA string, it is possible to infer version information from the Gecko version number present in the UA string. Beginning with Firefox OS 1.2, each minor version should correspond to two major Gecko revisions.</p>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Firefox OS version number</th>
+   <th scope="col">Gecko version number</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>1.0.1</td>
+   <td>18.0</td>
+  </tr>
+  <tr>
+   <td>1.1</td>
+   <td>18.1</td>
+  </tr>
+  <tr>
+   <td>1.2</td>
+   <td>26.0</td>
+  </tr>
+  <tr>
+   <td>1.3</td>
+   <td>28.0</td>
+  </tr>
+ </tbody>
+</table>
+<p>Firefox OS has a 4 digit version number: <samp>X.X.X.Y</samp>. The first 2 digits are owned by the Mozilla product team and will denote versions with new features (eg: v1.1, 1.2, etc). The third digit will be incremented with regular version tags (~every 6 weeks) for security updates, and the fourth will be OEM owned.</p>
+<h2 id="Other_Gecko-based_browsers">Other Gecko-based browsers</h2>
+<p>These are some sample UA strings from other Gecko-based browsers on various platforms. Note that many of these have not yet been released on Gecko 2.0!</p>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Browser</th>
+   <th scope="col">Gecko user agent string</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Firefox for Maemo (Nokia N900)</td>
+   <td>Mozilla/5.0 (Maemo; Linux armv7l; rv:10.0.1) Gecko/20100101 Firefox/10.0.1 Fennec/10.0.1</td>
+  </tr>
+  <tr>
+   <td>Camino on Mac</td>
+   <td>Mozilla/5.0 (Macintosh; Intel Mac OS X 10.5; rv:2.0.1) Gecko/20100101 Firefox/4.0.1 Camino/2.2.1</td>
+  </tr>
+  <tr>
+   <td>SeaMonkey on Windows</td>
+   <td>Mozilla/5.0 (Windows NT 5.2; rv:10.0.1) Gecko/20100101 Firefox/10.0.1 SeaMonkey/2.7.1</td>
+  </tr>
+  <tr>
+   <td>SeaMonkey on Mac</td>
+   <td>Mozilla/5.0 (Macintosh; Intel Mac OS X 10.5; rv:10.0.1) Gecko/20100101 Firefox/10.0.1 SeaMonkey/2.7.1</td>
+  </tr>
+  <tr>
+   <td>SeaMonkey on Linux</td>
+   <td>Mozilla/5.0 (X11; Linux i686; rv:10.0.1) Gecko/20100101 Firefox/10.0.1 SeaMonkey/2.7.1</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Implementation_notes_for_applications_vendors_and_extensions"><span><span id="implementation">Implementation notes for applications, vendors, and extensions</span></span></h2>
+<p>Prior to Firefox 4 and Gecko 2.0, it was possible for extensions to add user agent parts through the <code>general.useragent.extra.<em>identifier</em></code> preferences, (see the <a href="/En/User_Agent_Strings_Reference" title="https://developer.mozilla.org/en/User_Agent_Strings_Reference"><span class="moz-txt-link-freetext">obsolete User Agent Strings Reference</span></a><span class="moz-txt-citetags">).</span> But that has not been possible since {{ Bug(581008) }}.</p>
+<p>In the past, specific plug-ins, add-ons or extensions added user agent parts to notify sites they were installed. The recommended way to do this, if it's absolutely necessary (remember that it slows down every request) is to <a href="/en/Setting_HTTP_request_headers" title="https://developer.mozilla.org/en/Setting_HTTP_request_headers">set a custom HTTP header</a>.</p>
+<h2 id="See_Also">See Also</h2>
+<ul>
+ <li><a href="http://lawrencemandel.com/2012/07/27/decision-made-firefox-os-user-agent-string/" title="http://lawrencemandel.com/2012/07/27/decision-made-firefox-os-user-agent-string/">Firefox OS User Agent String</a> (blog post w/<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=777710" title="https://bugzilla.mozilla.org/show_bug.cgi?id=777710">bug 777710</a> reference)</li>
+ <li><a class="external" href="http://hacks.mozilla.org/2010/09/final-user-agent-string-for-firefox-4/" title="Final User Agent string for Firefox 4">Final User Agent string for Firefox 4</a> (blog post)</li>
+ <li>Recommendations on <a href="/en/Browser_Detection_and_Cross_Browser_Support" title="en/Browser_Detection_and_Cross_Browser_Support">sniffing the UA string for cross-browser support</a></li>
+ <li><a href="../../../../en/DOM/window.navigator.userAgent" rel="internal">window.navigator.userAgent</a></li>
+</ul>
+<hr>
+<p>Comments to <a class="link-news" href="news://news.mozilla.org/netscape.public.mozilla.netlib">mozilla.dev.platform</a></p>
+<p>{{ languages( { "ja": "ja/Gecko_user_agent_string_reference"} ) }}</p>
diff --git a/files/de/glossary/404/index.html b/files/de/glossary/404/index.html
new file mode 100644
index 0000000000..08c1dd4252
--- /dev/null
+++ b/files/de/glossary/404/index.html
@@ -0,0 +1,20 @@
+---
+title: '404'
+slug: Glossary/404
+tags:
+  - Fehlercodes
+  - Glossar
+  - HTTP Fehler
+  - HTTP Fehlercodes
+  - Infrastruktur
+  - Navigation
+translation_of: Glossary/404
+---
+<p>404 ist ein Standard-Antwort-Code, der bedeutet, dass der {{Glossary("Server", "Server")}} die angeforderte Ressource nicht finden kann.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Response_codes">Liste der HTTP-Antwort-Codes</a></li>
+ <li><a href="/en-US/Learn/Checking_that_your_web_site_is_working_properly">Hinweise für Anfänger zur Vermeidung von 404-Fehlern</a></li>
+</ul>
diff --git a/files/de/glossary/502/index.html b/files/de/glossary/502/index.html
new file mode 100644
index 0000000000..0fce814c57
--- /dev/null
+++ b/files/de/glossary/502/index.html
@@ -0,0 +1,23 @@
+---
+title: '502'
+slug: Glossary/502
+tags:
+  - '502'
+  - Glossar
+  - HTTP Fehler
+  - HTTP Fehlercodes
+  - Infrastruktur
+  - Navigation
+translation_of: Glossary/502
+---
+<p>502 ist ein {{Glossary("HTTP")}}-Fehlercode, der "Bad Gateway", <em>fehlerhaftes Gateway</em>, bedeutet.</p>
+
+<p>Ein {{Glossary("Server")}} kann als Gateway oder Proxy (Vermittler) zwischen einem Client (wie Ihrem Web-Browser) und einem Upstreamserver fungieren. Wenn Sie eine {{Glossary("URL")}} aufrufen, kann der Gateway-Server Ihre Anfrage an den Upstreamserver weiterleiten. "502" bedeutet, dass der Upstreamserver eine ungültige Antwort ausgegeben hat.</p>
+
+<p>Normalerweise ist der Upstreamserver funktionstüchtig (d.h. er übermittelt keine Antwort an das Gateway/der Proxy), verwendet aber nicht das gleiche Protokoll wie das Gateway/der Proxy. Internetprotokolle sind ({{Glossary("Protocol", "protocols")}}) recht genau, deshalb bedeutet 502 häufig, dass einer oder beide Geräte falsch oder unvollständig programmiert worden.</p>
+
+<h2 id="Erfahren_Sie_mehr">Erfahren Sie mehr</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/de/docs/Web/HTTP/Response_codes">Liste der HTTP-Antwortcodes</a></li>
+</ul>
diff --git a/files/de/glossary/abstraktion/index.html b/files/de/glossary/abstraktion/index.html
new file mode 100644
index 0000000000..29f75adb98
--- /dev/null
+++ b/files/de/glossary/abstraktion/index.html
@@ -0,0 +1,19 @@
+---
+title: Abstraktion
+slug: Glossary/Abstraktion
+tags:
+  - Abstraktion
+  - Glossar
+  - Programmieren
+  - Programmiersprache
+translation_of: Glossary/Abstraction
+---
+<p>Die <strong>Abstraktion</strong> in der {{Glossary("Computerprogrammierung")}} ist eine der Methoden zur Reduzierung der Komplexität von Code und der erleichterten Implementierung effizienterer Designs und Benutzerschnittstellen bei komplizierter Software. Die Abstraktion versteckt die technische Komplexität eines Systems hinter leicht verständlichen {{Glossary("API", "APIs")}}.</p>
+
+<h2 id="Mehr_dazu"><strong>Mehr dazu:</strong></h2>
+
+<h3 id="Allgemeinwissen"><strong>Allgemeinwissen:</strong></h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "Abstraktion_(Informatik)", "Abstraktion")}} auf Wikipedia</li>
+</ul>
diff --git a/files/de/glossary/accessibility/index.html b/files/de/glossary/accessibility/index.html
new file mode 100644
index 0000000000..9c8b6c067c
--- /dev/null
+++ b/files/de/glossary/accessibility/index.html
@@ -0,0 +1,33 @@
+---
+title: Accessibility
+slug: Glossary/Accessibility
+tags:
+  - Accessibility
+  - Barrierefreiheit
+  - Glossary
+translation_of: Glossary/Accessibility
+---
+<p><em>Web Accessibility</em> (<strong>A11Y</strong>) ist ein Begriff, der empfohlene Methoden beschreibt, um eine Website für Menschen mit physischen und technischen Einschränkungen zugänglich zu machen. Web accessibility wird am {{Glossary("W3C")}} durch die {{Glossary("WAI","Web Accessibility Initiative")}} (WAI) definiert und diskutiert.</p>
+
+<h2 id="Mehr_erfahren">Mehr erfahren</h2>
+
+<h3 id="Allgemeines">Allgemeines</h3>
+
+<ul>
+ <li><a href="/de/docs/Web/Barrierefreiheit">Accessibility resources at MDN</a></li>
+ <li>{{Interwiki("wikipedia", "Web accessibility")}} auf Wikipedia</li>
+</ul>
+
+<h3 id="Lernmaterial">Lernmaterial</h3>
+
+<ul>
+ <li><a href="http://webaim.org/" rel="external">Web Accessibility In Mind</a></li>
+</ul>
+
+<h3 id="Technische_Referenz">Technische Referenz</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA">The ARIA documentation on MDN</a></li>
+ <li><a href="http://www.w3.org/WAI/" rel="external">The Web Accessibility Initiative homepage</a></li>
+ <li><a href="http://www.w3.org/TR/wai-aria/" rel="external">The WAI-ARIA recommendation</a></li>
+</ul>
diff --git a/files/de/glossary/adobe_flash/index.html b/files/de/glossary/adobe_flash/index.html
new file mode 100644
index 0000000000..3033a6d64f
--- /dev/null
+++ b/files/de/glossary/adobe_flash/index.html
@@ -0,0 +1,16 @@
+---
+title: Adobe Flash
+slug: Glossary/Adobe_Flash
+translation_of: Glossary/Adobe_Flash
+---
+<p id="Summary">Flash ist eine veraltete Technologie, die von Adobe entwickelt wird. Es ermöglicht komplexe Webapplikationen, Vektorgraphiken und Multimedia. Um Flash zu verwenden, muss das richtige Plugin in einem {{Glossary("Browser","Webbrowser")}} installiert werden.</p>
+
+<h2 id="Mehr_dazu">Mehr dazu</h2>
+
+<h3 id="Allgemeinwissen">Allgemeinwissen</h3>
+
+<ul>
+ <li><a href="https://www.adobe.com/products/flashruntimes.html">Offizielle Website</a></li>
+ <li><a href="https://mozilla.github.io/shumway/">Shumway, eine freie Implementierung von Mozilla</a></li>
+ <li><a href="http://gnashdev.org/">Gnash, eine freie Implementierung von GNU</a></li>
+</ul>
diff --git a/files/de/glossary/ajax/index.html b/files/de/glossary/ajax/index.html
new file mode 100644
index 0000000000..6eb90e7e33
--- /dev/null
+++ b/files/de/glossary/ajax/index.html
@@ -0,0 +1,33 @@
+---
+title: AJAX
+slug: Glossary/AJAX
+tags:
+  - AJAX
+  - CodingScripting
+  - Glossar
+  - Infrastruktur
+  - 'l10n:priority'
+translation_of: Glossary/AJAX
+---
+<p><span class="seoSummary"><em>Asynchronous {{Glossary("JavaScript")}} und {{Glossary("XML")}}</em> (<strong>AJAX</strong>) ist eine Programmierpraxis zum Erstellen komplexerer, dynamischer Webseiten mithilfe einer Technologie die {{Glossary("XHR_(XMLHttpRequest)","XMLHttpRequest")}} genannt wird.</span></p>
+
+<p>Mit AJAX können Sie einzelne Teile des {{Glossary("DOM")}} einer {{Glossary("HTML")}}-Webseite aktualisieren, anstatt die gesamte Seite neu laden zu müssen. Mit AJAX können Sie auch asynchron arbeiten, d. h. Ihr Code wird weiterhin ausgeführt, während dieser Teil Ihrer Webseite versucht, neu geladen zu werden (im Gegensatz zu synchron, der die Ausführung Ihres Codes blockiert, bis dieser Teil Ihrer Webseite neu geladen wurde).</p>
+
+<p>Mit interaktiven Websites und modernen Webstandards wird AJAX schrittweise durch Funktionen in JavaScript-Frameworks und die offizielle {{domxref("Fetch API")}} ersetzt.</p>
+
+<h2 id="Erfahren_Sie_mehr">Erfahren Sie mehr</h2>
+
+<h3 id="Allgemeinwissen">Allgemeinwissen</h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "AJAX")}} auf Wikipedia</li>
+ <li><a href="http://peoplesofttutorial.com/difference-between-synchronous-and-asynchronous-messaging/">Synchronous vs. Asynchronous Communications</a> (in Englisch)</li>
+</ul>
+
+<h3 id="Technische_Informationen">Technische Informationen</h3>
+
+<ul>
+ <li>Das {{domxref("XMLHttpRequest")}}-Objekt</li>
+ <li><a href="/de/docs/Web/Guide/AJAX">AJAX-Dokumentation im MDN</a></li>
+ <li><a href="/de/docs/Web/API/Fetch_API/Using_Fetch">Verwendung der Fetch API</a></li>
+</ul>
diff --git a/files/de/glossary/algorithmus/index.html b/files/de/glossary/algorithmus/index.html
new file mode 100644
index 0000000000..0c7109ae1e
--- /dev/null
+++ b/files/de/glossary/algorithmus/index.html
@@ -0,0 +1,11 @@
+---
+title: Algorithmus
+slug: Glossary/Algorithmus
+tags:
+  - Algorithmus
+  - Glossary
+translation_of: Glossary/Algorithm
+---
+<p><span class="seoSummary">Ein Algorithmus ist eine eigenständige Abfolge von Anweisungen, die eine Funktion ausüben.</span></p>
+
+<p>Anders ausgedrückt beschreibt also ein <span class="seoSummary">Algorithmus</span> einen Weg, der ein Problem so löst, dass es wiederholbar durch eine Maschine oder einen Menschen gelöst werden kann. Computerwissenschftler ermitteln die Effizienz eines Algorithmus durch das Konzept der "Komplexitätstheorie für Algorithmen" oder auch "O"-Notation genannt. </p>
diff --git a/files/de/glossary/anweisung/index.html b/files/de/glossary/anweisung/index.html
new file mode 100644
index 0000000000..4913ac8f29
--- /dev/null
+++ b/files/de/glossary/anweisung/index.html
@@ -0,0 +1,29 @@
+---
+title: Anweisung
+slug: Glossary/Anweisung
+tags:
+  - Anweisung
+  - Glossar
+  - Glossary
+  - JavaScript
+  - befehl
+translation_of: Glossary/Statement
+---
+<p>In einer Programmiersprache ist eine Anweisung eine Vorschrift innerhalb des Codes, die zur Laufzeit des Programmes einem Befehl entspricht. Jedes Programm ist zusammengesetzt aus einer Folge von Anweisungen. </p>
+
+<h2 id="Mehr_erfahren" style="line-height: 30px; font-size: 2.14285714285714rem;">Mehr erfahren</h2>
+
+<h3 id="Allgemeinwissen">Allgemeinwissen</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Statement (computer science)")}} auf Wikipedia (englisch)</li>
+</ul>
+
+<h3 id="Technische_Referenz">Technische Referenz</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements">JavaScript: Anweisungen und Deklarationen</a> (englisch)</li>
+</ul>
+
+<ul>
+</ul>
diff --git a/files/de/glossary/api/index.html b/files/de/glossary/api/index.html
new file mode 100644
index 0000000000..8a095302a8
--- /dev/null
+++ b/files/de/glossary/api/index.html
@@ -0,0 +1,34 @@
+---
+title: API
+slug: Glossary/API
+tags:
+  - API
+  - Glossary
+translation_of: Glossary/API
+---
+<p>Eine API (Application Programming Interface) ist eine Menge von Funktionen und Regeln, die innerhalb eines Softwareprogrammes die Interaktion zwischen der Software und anderen Elementen, wie anderer Software oder Hardware, ermöglicht. </p>
+
+<p>In der Webentwicklung ist eine API gewöhnlich eine Menge von Codefunktionalitäten (z.B. {{glossary("method","methods")}}, {{Glossary("property","properties")}}, Events und {{Glossary("URL","URLs")}}), die ein Entwickler in seiner Anwendung verwenden kann, um mit den Komponenten des Browsers des Nutzers, mit Software/Hardware auf dem Computer des Nutzers oder mit Websites und Diensten Dritter zu interagieren.</p>
+
+<p>Beispiele:</p>
+
+<ul>
+ <li>Die <a href="/en-US/docs/Web/API/MediaDevices/getUserMedia">getU</a><a href="/en-US/docs/Web/API/MediaDevices/getUserMedia">serMedia</a>-API kann verwendet werden, um Audio- und Videodaten von der Webcam des Nutzers abzugreifen, welche dann durch den Entwickler in jeder erdenklichen Weise weiterverwendet werden können, beispielsweise durch die Aufnahme von Video und Audio, das Senden an einen anderen Nutzer in einem Konferenzanruf oder das Anfertigen von Momentaufnahmen aus dem Video.</li>
+ <li>Die <a href="/en-US/docs/Web/API/Geolocation">Geolocation-API</a> kann verwendet werden, um Informationen zur Position von den auf dem Gerät des Nutzers verfügbaren Diensten (z.B. GPS) abzufragen, welche dann in Verbindung mit den <a href="https://developers.google.com/maps/">Google Maps APIs</a> genutzt werden können, um zum Beispiel die Position des Nutzers auf einer kundenspezifischen Karte darzustellen und zu zeigen, welche Touristenattraktionen sich in seiner Nähe befinden. </li>
+ <li>Die <a href="https://dev.twitter.com/overview/api">Twitter-APIs</a> können verwendet werden, um Daten von den Twitteraccounts des Nutzers abzugreifen, beispielsweise, um seine aktuellsten Tweets auf einer Website anzuzeigen. </li>
+ <li>Die <a href="/en-US/docs/Web/API/Web_Animations_API">Web-Animations-API</a> kann verwendet werden, um Teile einer Website zu animieren - zum Beispiel, um Bilder zu bewegen oder zu rotieren.</li>
+</ul>
+
+<h2 id="Mehr_erfahren">Mehr erfahren</h2>
+
+<h3 id="Allgemeinwissen">Allgemeinwissen</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Application_programming_interface", "API")}} auf Wikipedia (Englisch)</li>
+</ul>
+
+<h3 id="Technische_Referenz">Technische Referenz</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API">Web-API-Reference</a> </li>
+</ul>
diff --git a/files/de/glossary/apple_safari/index.html b/files/de/glossary/apple_safari/index.html
new file mode 100644
index 0000000000..137a3e0007
--- /dev/null
+++ b/files/de/glossary/apple_safari/index.html
@@ -0,0 +1,23 @@
+---
+title: Apple Safari
+slug: Glossary/Apple_Safari
+translation_of: Glossary/Apple_Safari
+---
+<p><strong><a href="http://www.apple.com/safari/">Safari</a></strong> ist ein von Apple entwickelter {{Glossary("Browser","Web Browser")}}, der für Mac OS X und iOS verwendet wird. Er basiert auf der Open-Source <a href="http://www.webkit.org/">WebKit</a> Engine.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<h3 id="Allgemeines">Allgemeines</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Apple_Safari", "Safari")}} auf Wikipedia</li>
+ <li><a href="http://www.apple.com/safari/" rel="external">Safari bei apple.com</a></li>
+</ul>
+
+<h3 id="Technisches">Technisches</h3>
+
+<ul>
+ <li><a href="http://www.webkit.org/">Das WebKit Projekt</a></li>
+ <li><a href="http://nightly.webkit.org/" rel="external">WebKit nightly build</a></li>
+ <li><a href="https://bugs.webkit.org/" rel="external">Einen Bug in Safari melden</a></li>
+</ul>
diff --git a/files/de/glossary/argument/index.html b/files/de/glossary/argument/index.html
new file mode 100644
index 0000000000..62700352f5
--- /dev/null
+++ b/files/de/glossary/argument/index.html
@@ -0,0 +1,20 @@
+---
+title: Argument
+slug: Glossary/Argument
+translation_of: Glossary/Argument
+---
+<p>Ein <strong>Argument</strong> ist ein {{glossary("value","Wert")}} ({{Glossary("primitive","primitiv")}} oder {{Glossary("object","Objekt")}}), der einer {{Glossary("function","Funktion")}} als Input übergeben wird.</p>
+
+<h2 id="Mehr_lernen">Mehr lernen</h2>
+
+<h3 id="Allgemeine_Refferenz">Allgemeine Refferenz</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Parameter_(Informatik)","Parameter")}} auf Wikipedia</li>
+</ul>
+
+<h3 id="Technische_Refferenz">Technische Refferenz</h3>
+
+<ul>
+ <li>Das {{jsxref("Functions/arguments","arguments")}} Objekt in {{glossary("JavaScript")}}</li>
+</ul>
diff --git a/files/de/glossary/aria/index.html b/files/de/glossary/aria/index.html
new file mode 100644
index 0000000000..ab02af073f
--- /dev/null
+++ b/files/de/glossary/aria/index.html
@@ -0,0 +1,14 @@
+---
+title: ARIA
+slug: Glossary/ARIA
+translation_of: Glossary/ARIA
+---
+<p><strong>ARIA</strong> (<em>Accessible Rich {{glossary("Internet")}} Applications</em>) ist eine {{Glossary("W3C")}} Spezifikation um {{Glossary("HTML")}} Elemente mit semantischen Informationen oder Metadaten anzureichern, damit die Seite auch für Menschen mit Einschränkungen zugänglich ist.</p>
+
+<p>Zum Beispiel hilft das Attribut <code>role="alert"</code> Screenreadern dabei, ein HTML Tag als wichtig und zeitkritisch einzustufen und es einem Nutzer mit Sehbehinderung mitzuteilen.</p>
+
+<h2 id="Erfahren_Sie_mehr">Erfahren Sie mehr</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA">ARIA </a></li>
+</ul>
diff --git a/files/de/glossary/arpa/index.html b/files/de/glossary/arpa/index.html
new file mode 100644
index 0000000000..da0b7d85b0
--- /dev/null
+++ b/files/de/glossary/arpa/index.html
@@ -0,0 +1,15 @@
+---
+title: ARPA
+slug: Glossary/ARPA
+translation_of: Glossary/ARPA
+---
+<p><strong>.arpa </strong>(address and routing parameter area) ist eine {{glossary("TLD","Top-Level-Domain")}}, welche für Internetinfrastrukturzwecke, speziell Reverse DNS Lookup, verwendet wird (d.h., finden des {{glossary("Domain_Name", "Domain-Namens")}} für eine gegebene {{glossary("IP Address", "IP Adresse")}}).</p>
+
+<h2 id="Erfahre_mehr">Erfahre mehr</h2>
+
+<h3 id="Allgemeines">Allgemeines</h3>
+
+<ul>
+ <li><a href="http://www.iana.org/domains/arpa">Offizielle Webseite</a></li>
+ <li>{{Interwiki("wikipedia", ".arpa")}} on Wikipedia</li>
+</ul>
diff --git a/files/de/glossary/array/index.html b/files/de/glossary/array/index.html
new file mode 100644
index 0000000000..23a984a8e0
--- /dev/null
+++ b/files/de/glossary/array/index.html
@@ -0,0 +1,37 @@
+---
+title: Array
+slug: Glossary/array
+tags:
+  - Array
+  - Feld
+  - JavaScript
+  - Programmieren
+  - Wörterbuch
+translation_of: Glossary/array
+---
+<p>Ein <em>Array</em> ist eine geordnete Sammlung von Daten (entweder {{Glossary("primitive")}} oder als {{Glossary("object")}}). Arrays werden verwendet, um mehrere Werte in einer einzigen Variablen zu speichern, verglichen mit einer Variablen die nur einen einzigen Wert speichern kann.</p>
+
+<p>Jedes Element in einem Array hat eine Nummer, auch numerischer Index genannt, über die man auf die einzelnen Elemente zugreifen kann. In JavaScript beginnen Arrays bei Index Null und können mit verschiedenen {{Glossary("Method", "Methoden")}} manipuliert werden.</p>
+
+<p>In JavaScript sieht ein Array folgendermaßen aus:</p>
+
+<pre class="brush: js">var meinArray = [1, 2, 3, 4];
+
+var katzenNamenArray = ["Jacqueline", "Sophia", "Felix"];
+
+// Arrays in JavaScript können verschiedene Typen von Daten enthalten, wie oben zu sehen ist.
+</pre>
+
+<h2 id="Mehr_erfahren">Mehr erfahren</h2>
+
+<h3 id="Allgemeines">Allgemeines</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Feld_(Datentyp)", "Array")}} auf Wikipedia</li>
+</ul>
+
+<h3 id="Technische_Referenz">Technische Referenz</h3>
+
+<ul>
+ <li>JavaScript {{jsxref("Array")}} im MDN</li>
+</ul>
diff --git a/files/de/glossary/ascii/index.html b/files/de/glossary/ascii/index.html
new file mode 100644
index 0000000000..7eee61ffe6
--- /dev/null
+++ b/files/de/glossary/ascii/index.html
@@ -0,0 +1,15 @@
+---
+title: ASCII
+slug: Glossary/ASCII
+tags:
+  - Glossary
+  - Infrastructure
+translation_of: Glossary/ASCII
+---
+<p><strong>ASCII</strong> (<em>American Standard Code for Information Interchange</em>) ist eine der verbreitetsten Kodierungen, die von Computern verwendet wird, um Buchstaben, Zahlen, Interpunktions- und Steuerungszeichen in digitale Form umzuwandeln. Seit 2007 wird es im {{Glossary("Internet")}} durch {{Glossary("UTF-8")}} ersetzt.</p>
+
+<h2 id="Mehr_lernen">Mehr lernen</h2>
+
+<h3 id="Allgemeines_Wissen">Allgemeines Wissen</h3>
+
+<p>{{Interwiki("wikipedia", "ASCII")}} auf Wikipedia</p>
diff --git a/files/de/glossary/asynchron/index.html b/files/de/glossary/asynchron/index.html
new file mode 100644
index 0000000000..57f052e94f
--- /dev/null
+++ b/files/de/glossary/asynchron/index.html
@@ -0,0 +1,34 @@
+---
+title: Asynchron
+slug: Glossary/Asynchron
+translation_of: Glossary/Asynchronous
+---
+<p><span class="seoSummary">Der Ausdruck <strong>Asynchron</strong> bezieht sich auf das Konzept, dass mehrere Dinge zeitgleich passieren oder mehre, verbundene Dinge geschehen ohne aufeinander zu warten.</span> In der Informatik wird das Wort Asynchron meist in zwei Fällen unterschieden.</p>
+
+<dl>
+ <dt>Netzwerk und Kommunikation</dt>
+ <dd>
+ <p>Die asynchrone Kommunikation ist eine Methode zum Austausch von Nachrichten zwischen zwei oder mehr Teilnehmern, bei welcher jeder Teilnehmer Nachrichten empfängt und verarbeitet, wann immer dies zweckmäßig oder möglich ist, und nicht sofort nach dem Empfang. Darüber hinaus können Nachrichten gesendet werden, ohne auf eine Bestätigung zu warten, wobei zu beachten ist, dass der Empfänger bei Auftreten eines Problems Korrekturen anfordern oder die Situation auf andere Weise behandeln wird.</p>
+
+ <p>Auf den Menschen übertragen sind Emails eine asynchrone Kommunikations-Methode; Der Absender sendet eine E-Mail, und der Empfänger liest und beantwortet die Nachricht, wenn er es möchte, und nicht sofort. Beide Seiten können weiterhin Nachrichten senden und empfangen, wann immer sie möchten, anstatt sich aufeinander abstimmen zu müssen.</p>
+
+ <p>Wenn Software asynchron kommuniziert, fordert ein Programm beispielsweise Informationen von einer anderen Software (z. B. einem Server) an und führt andere Aktionen aus, während auf eine Antwort gewartet wird. Zum Beispiel die Programmiertechnik <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX">AJAX</a> (Asynchronous JavaScript and {{Glossary ("XML")}}) - heute meist einfach "Ajax", obwohl {{Glossary ("JSON")}} in modernen Anwendungen eher als XML verwendet wird  - ist ein Mechanismus, der mit {{Glossary ("HTTP")}} relativ kleine Datenmengen vom Server anfordert. Das Ergebnis wird dann zurückgegeben, wenn es verfügbar ist, und nicht sofort.</p>
+ </dd>
+ <dt>Software Design</dt>
+ <dd>
+ <p>Asynchrones Softwaredesign erweitert das Konzept, indem Code erstellt wird, mit dem ein Programm die Ausführung einer Aufgabe neben der ursprünglichen Aufgabe (oder den ursprünglichen Aufgaben) beginnt, ohne anzuhalten, bis diese Aufgabe abgeschlossen ist. Wenn die sekundäre Aufgabe erledigt ist, wird die ursprüngliche Aufgabe mithilfe eines vereinbarten Mechanismus benachrichtigt, damit sie weiß, dass die Arbeit erledigt ist und dass das Ergebnis, falls vorhanden, verfügbar ist.</p>
+
+ <p>Es gibt eine Reihe von Programmiertechniken zum Implementieren von asynchroner Software. Eine Einführung dazu finden Sie im Artikel <a href="/en-US/docs/Learn/JavaScript/Asynchronous">Asynchronous JavaScript</a>.</p>
+ </dd>
+</dl>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<h3 id="Technical_reference">Technical reference</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Fetching data from the server</a> (Learning Area)</li>
+ <li>{{glossary("Synchronous")}}</li>
+</ul>
+
+<p>{{IncludeSubnav("/en-US/docs/Glossary")}}</p>
diff --git a/files/de/glossary/atag/index.html b/files/de/glossary/atag/index.html
new file mode 100644
index 0000000000..b5efec0255
--- /dev/null
+++ b/files/de/glossary/atag/index.html
@@ -0,0 +1,25 @@
+---
+title: ATAG
+slug: Glossary/ATAG
+tags:
+  - ATAG
+  - Accessibility
+  - Glossar
+translation_of: Glossary/ATAG
+---
+<p>ATAG (Authoring Tool {{glossary("Accessibility")}} Guidelines) ist eine {{Glossary("W3C")}}-Empfehlung zum Bau von Publikationswerkzeugen, die Inhalte nach dem Accessibility-Standard herstellen.</p>
+
+<h2 id="Mehr_erfahren">Mehr erfahren</h2>
+
+<h3 id="Allgemeinwissen">Allgemeinwissen</h3>
+
+<ul>
+ <li><a href="https://de.wikipedia.org/wiki/Web_Accessibility_Initiative">ATAG als Teil der Web Accessibility Initiative</a> auf Wikipedia</li>
+</ul>
+
+<h3 id="Technische_Referenz">Technische Referenz</h3>
+
+<ul>
+ <li><a href="http://www.w3.org/WAI/intro/atag.php">Authoring Tool Accessibility Guidelines (ATAG) Überblick</a></li>
+ <li><a href="https://www.w3.org/TR/ATAG20/">Die ATAG 2.0 recommendation</a></li>
+</ul>
diff --git a/files/de/glossary/attribute/index.html b/files/de/glossary/attribute/index.html
new file mode 100644
index 0000000000..74f1603da5
--- /dev/null
+++ b/files/de/glossary/attribute/index.html
@@ -0,0 +1,20 @@
+---
+title: Attribut
+slug: Glossary/Attribute
+tags:
+  - Attribute
+  - CodingScripting
+  - Glossary
+  - HTML
+translation_of: Glossary/Attribute
+---
+<p><span class="glossaryLink new">Ein <strong>Attribut</strong></span> erweitert das Verhalten eines {{Glossary("tag","Tags")}} oder fügt weitere Metadaten hinzu. Ein Attribut hat immer die Form <code>name=wert</code> (der eindeutige Identifikator des Attributs und der damit verbundene Wert).</p>
+
+<h2 id="Mehr_lernen">Mehr lernen</h2>
+
+<h3 id="Technische_Referenz"><span style="font-size: 1.71428571428571rem;">Technische Referenz</span></h3>
+
+<ul>
+ <li><a href="/de/docs/Web/HTML/Attributes">HTML attribute reference</a></li>
+ <li>Informationen über die <a href="/de/docs/Web/HTML/Globale_Attribute">globalen Attribute</a> von HTML.</li>
+</ul>
diff --git a/files/de/glossary/bandbreite/index.html b/files/de/glossary/bandbreite/index.html
new file mode 100644
index 0000000000..b1c856463b
--- /dev/null
+++ b/files/de/glossary/bandbreite/index.html
@@ -0,0 +1,17 @@
+---
+title: Bandbreite
+slug: Glossary/Bandbreite
+tags:
+  - Glossar
+  - Infrastruktur
+translation_of: Glossary/Bandwidth
+---
+<p>Die <strong>Bandbreite </strong> ist der Abstand zwischen Unterfrequenz und Oberfrequenz und gibt z.B. an welche Informationsmenge während einer bestimmten Zeit durch eine Datenverbindung durchgespielt werden kann. Ueblicherweise wird sie in mehrfachen <em>bit-per-seconds</em> (bps) gemessen, z.B. <em>megabits-per-second</em> (Mbps) oder <em>gigabits-per-second</em> (Gbps).</p>
+
+<p> </p>
+
+<h2 id="Mehr_dazu">Mehr dazu:</h2>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Bandwidth")}} auf Wikipedia (Englische Version)</li>
+</ul>
diff --git a/files/de/glossary/block/css/index.html b/files/de/glossary/block/css/index.html
new file mode 100644
index 0000000000..5484f88553
--- /dev/null
+++ b/files/de/glossary/block/css/index.html
@@ -0,0 +1,22 @@
+---
+title: Block (CSS)
+slug: Glossary/Block/CSS
+tags:
+  - Block
+  - CSS
+  - Glossar
+  - Glossary
+  - display
+translation_of: Glossary/Block/CSS
+---
+<p>Ein <strong>Block </strong>auf einer Website ist ein {{glossary("HTML")}}-{{glossary("element")}}, das in einer neuen Zeile angezeigt wird, also unter dem vorherigen Element und über dem folgenden (gemeinhin bekannt als <em>Blockelement</em>). Beispielsweise ist ein {{htmlelement("p")}} standardmäßig ein Blockelement, während ein {{htmlelement("a")}} ein eingebundenes Element (engl. "<em>inline element"</em>) ist — mehrere Links können so nebeneinander im HTML-Quelltext stehen und dann in der gerenderten Ausgabe auf derselben Zeile liegen.</p>
+
+<p>Durch Verwendung der {{cssxref("display")}}-Eigenschaft können Sie bestimmen, ob ein Element als Block oder eingebunden dargestellt wird (neben einigen weiteren Optionen). Blöcke werden weiterhin beeinflusst von Positionierungsangaben durch die {{cssxref("position")}}-Eigenschaft.</p>
+
+<h2 id="Mehr_erfahren">Mehr erfahren</h2>
+
+<h3 id="Allgemeinwissen">Allgemeinwissen</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Visual_formatting_model">Visual formatting model</a></li>
+</ul>
diff --git a/files/de/glossary/block/index.html b/files/de/glossary/block/index.html
new file mode 100644
index 0000000000..9b29b4e509
--- /dev/null
+++ b/files/de/glossary/block/index.html
@@ -0,0 +1,11 @@
+---
+title: Block
+slug: Glossary/Block
+tags:
+  - Block
+  - Glossary
+translation_of: Glossary/Block
+---
+<p>Der Begriff <strong>Block</strong> hat mehrere, kontextabhängige Bedeutungen, darunter:</p>
+
+<p>{{GlossaryDisambiguation}}</p>
diff --git a/files/de/glossary/block/scripting/index.html b/files/de/glossary/block/scripting/index.html
new file mode 100644
index 0000000000..93fa69e24c
--- /dev/null
+++ b/files/de/glossary/block/scripting/index.html
@@ -0,0 +1,20 @@
+---
+title: Block (Scripting)
+slug: Glossary/Block/Scripting
+tags:
+  - Anweisungsblock
+  - Block
+  - Glossary
+  - JavaScript
+  - Scripting
+translation_of: Glossary/Block/Scripting
+---
+<p>In {{glossary("JavaScript")}} ist ein Block eine Sammlung zueinander gehöriger {{glossary("statement","Anweisungen")}}, die von geschweiften Klammern ("{}") eingeschlossen sind. Zum Beispiel können Sie einen Block mit Anweisungen nach einem {{jsxref("Statements/if...else","if (condition)")}}-Block setzen, wodurch Sie deutlich machen, dass der Interpreter den Code innerhalb dieses Blocks ausführen soll, wenn die Bedingung zu <code>true</code> evaluiert, oder ihn überspringen soll, wenn die Bedingung <code>false</code> ergibt.</p>
+
+<h2 id="Mehr_erfahren">Mehr erfahren</h2>
+
+<h3 id="Lernmaterial">Lernmaterial</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/block">JavaScript block statement</a></li>
+</ul>
diff --git a/files/de/glossary/boolean/index.html b/files/de/glossary/boolean/index.html
new file mode 100644
index 0000000000..24ba696154
--- /dev/null
+++ b/files/de/glossary/boolean/index.html
@@ -0,0 +1,50 @@
+---
+title: Boolean
+slug: Glossary/Boolean
+translation_of: Glossary/Boolean
+---
+<p>In der Programmierung ist <strong>Boolean </strong>ein logischer {{Glossary("Type","Datentyp")}}, der nur einen der zwei {{Glossary("Value","Werte")}} <code>true</code> oder <code>false</code>,  <em>wahr </em>oder <em>falsch</em> annehmen kann.</p>
+
+<p>Boolesche Werte sind die Grundlage für die Entscheidung, ob ein Teilbereich des Programms ausgeführt werden soll (<code>true</code>) oder nicht (<code>false</code>), zum Beispiel bei einem <code>if</code>-Block oder einer <code>for</code>-Schleife:</p>
+
+<pre>/* JavaScript if */
+if (Bedingung) {
+   // auszuführender Programmabschnitt, falls die Bedingung true ergibt
+}
+
+let i = 1;
+if (i == 1) { // dies ist wahr, true
+    console.log("Bedingung ist true");
+} else {
+    console.log("Bedingung ist false");
+}
+
+
+
+/* JavaScript for */
+for (Kontrollvariable; Bedingung; Zähler) {
+  // auszuführender Abschnitt, solange die Bedingung true ergibt
+}
+
+for (let i = 0; i &lt; 4; i++) {
+  console.log("Ich werde ausgegeben, so lange die Bedingung i &lt; 4 wahr ist.");
+}
+
+</pre>
+
+
+
+<h2 id="Mehr_erfahren">Mehr erfahren</h2>
+
+<h3 id="Allgemein">Allgemein</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Datentyp#Boolean_.28logische_Werte.29", "Boolean")}} auf Wikipedia</li>
+</ul>
+
+<h3 id="Technik">Technik</h3>
+
+<ul>
+ <li>Das globale {{jsxref("Boolean")}}-{{Glossary("Object","Objekt")}} in JavaScript</li>
+ <li><a href="/de/docs/Web/JavaScript/Data_structures">JavaScript-Datentypen und -strukturen</a></li>
+</ul>
diff --git a/files/de/glossary/bootstrap/index.html b/files/de/glossary/bootstrap/index.html
new file mode 100644
index 0000000000..d53c89b773
--- /dev/null
+++ b/files/de/glossary/bootstrap/index.html
@@ -0,0 +1,29 @@
+---
+title: Bootstrap
+slug: Glossary/Bootstrap
+tags:
+  - Bootstrap
+  - CSS Framework
+  - HTML Framework
+  - Responsive Design
+  - responsive Webseiten
+translation_of: Glossary/Bootstrap
+---
+<p>Bootstrap ist ein kostenloses Open Source Framework für {{Glossary("HTML")}}, CSS, und {{Glossary("JavaScript")}}, mit dem man sehr schnell responsive Webseiten erstellen kann.</p>
+
+<p>Der ursprüngliche Name von Bootstrap war Twitter Blueprint und es wurde auf <a href="https://twitter.com/">Twitter</a> entwickelt. Es unterstützt responsives Design und stellt vordefinierte Design Features bereit, die man entweder so wie sie sind direkt nutzen oder an die Anforderungen des eigenen Codes anpassen kann. Man braucht sich keine Gedanken über die Kompatibilität mit anderen Browsern zu machen, da Bootstrap mit allen modernen Browsern kompatibel ist und auch mit neueren Versionen des <a href="/en-US/docs/Glossary/Microsoft_Internet_Explorer">Internet Explorers</a>.</p>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<h3 id="General_knowledge">General knowledge</h3>
+
+<ul>
+ <li>{{interwiki("Wikipedia", "Bootstrap (front-end framework)", "Bootstrap")}} on Wikipedia</li>
+</ul>
+
+<h3 id="Technical_reference">Technical reference</h3>
+
+<ul>
+ <li><a href="https://getbootstrap.com/">Download Bootstrap</a></li>
+ <li><a href="https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp">Get started with the latest version</a></li>
+</ul>
diff --git a/files/de/glossary/browser/index.html b/files/de/glossary/browser/index.html
new file mode 100644
index 0000000000..e7bafc32ca
--- /dev/null
+++ b/files/de/glossary/browser/index.html
@@ -0,0 +1,27 @@
+---
+title: Browser
+slug: Glossary/Browser
+tags:
+  - Glossar
+  - Navigation
+translation_of: Glossary/Browser
+---
+<p>Ein <em>Webbrowser</em> ist ein Programm, welches Seiten vom {{Glossary("World Wide Web","Web")}} empfängt, darstellt, und Benutzern ermöglicht weitere Seiten über {{Glossary("hyperlink","hyperlinks")}}. zu erreichen.</p>
+
+<h2 id="Mehr_erfahren">Mehr erfahren</h2>
+
+<h3 id="Allgemeines_Wissen">Allgemeines Wissen</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Web browser")}} auf Wikipedia</li>
+ <li><a href="http://www.evolutionoftheweb.com/" rel="external">Die Evolution des Webs</a></li>
+</ul>
+
+<h3 id="Lade_einen_Browser_herunter">Lade einen Browser herunter</h3>
+
+<ul>
+ <li><a href="http://www.mozilla.org/en-US/firefox/features/">Mozilla Firefox</a></li>
+ <li><a href="http://www.google.com/chrome/" rel="external">Google Chrome</a></li>
+ <li><a href="http://windows.microsoft.com/en-US/internet-explorer/browser-ie" rel="external">Microsoft Internet Explorer</a></li>
+ <li><a href="http://www.opera.com/" rel="external">Opera Browser</a></li>
+</ul>
diff --git a/files/de/glossary/buffer/index.html b/files/de/glossary/buffer/index.html
new file mode 100644
index 0000000000..ae067c247e
--- /dev/null
+++ b/files/de/glossary/buffer/index.html
@@ -0,0 +1,18 @@
+---
+title: buffer
+slug: Glossary/buffer
+tags:
+  - Buffer
+  - Puffer
+  - Speicher
+translation_of: Glossary/buffer
+---
+<p>Ein Buffer (dt. Puffer) dient als Speicher im physischen Bereich um Daten <u>vorübergehend</u> bereitzustellen bis die Daten von A nach B transportiert worden sind.</p>
+
+<h2 id="Mehr_Lernen">Mehr Lernen</h2>
+
+<h3 id="Allgemeines">Allgemeines</h3>
+
+<ul>
+ <li><a href="https://de.wikipedia.org/wiki/Puffer_(Informatik)">Puffer</a> auf Wikipedia</li>
+</ul>
diff --git a/files/de/glossary/cache/index.html b/files/de/glossary/cache/index.html
new file mode 100644
index 0000000000..243f665d1c
--- /dev/null
+++ b/files/de/glossary/cache/index.html
@@ -0,0 +1,17 @@
+---
+title: Cache
+slug: Glossary/Cache
+tags:
+  - Glossar
+  - HTTP
+translation_of: Glossary/Cache
+---
+<p>Ein <strong>cache</strong> (web cache oder HTTP cache) ist eine Komponente die HTTP Antworten temporär speichert, sodass sie für folgende HTTP Anfragen wieder verwendet werden können, wenn sie bestimmte Bedingungen erfüllen.</p>
+
+<h2 id="Mehr_lernen">Mehr lernen</h2>
+
+<h3 id="Allgemeine_Referenzen">Allgemeine Referenzen</h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "Browser-Cache")}} auf Wikipedia</li>
+</ul>
diff --git a/files/de/glossary/caldav/index.html b/files/de/glossary/caldav/index.html
new file mode 100644
index 0000000000..b83fc735db
--- /dev/null
+++ b/files/de/glossary/caldav/index.html
@@ -0,0 +1,24 @@
+---
+title: CalDAV
+slug: Glossary/CalDAV
+tags:
+  - Glossar
+  - Infrastruktur
+translation_of: Glossary/CalDAV
+---
+<p>CalDAV (Calendaring extensions to {{Glossary("WebDAV")}}) ist ein {{glossary("Protokoll")}}, standardisiert von der {{Glossary("IETF")}} und wird dazu verwendet rechnerfern auf Kalenderdaten eines {{glossary("Servers")}} zuzugreifen.</p>
+
+<h2 id="Mehr_erfahren">Mehr erfahren</h2>
+
+<h3 id="Allgemeinwissen">Allgemeinwissen</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "CalDAV")}} auf Wikipedia</li>
+</ul>
+
+<h3 id="Technische_Referenz">Technische Referenz</h3>
+
+<ul>
+ <li><a href="http://tools.ietf.org/html/rfc4791">RFC 4791: Calendaring extensions to WebDAV (CalDAV)</a></li>
+ <li><a href="http://tools.ietf.org/html/rfc6638">RFC 6638: Scheduling Extensions to CalDAV</a></li>
+</ul>
diff --git a/files/de/glossary/canvas/index.html b/files/de/glossary/canvas/index.html
new file mode 100644
index 0000000000..fcec40ae8a
--- /dev/null
+++ b/files/de/glossary/canvas/index.html
@@ -0,0 +1,31 @@
+---
+title: Canvas
+slug: Glossary/Canvas
+translation_of: Glossary/Canvas
+---
+<article class="text-content" id="wikiArticle">
+<p>Das {{Glossary("HTML")}}-Element <em>{{HTMLElement("canvas")}}</em> stellt einen leeren Grafikbereich bereit, auf dem spezielle {{Glossary("JavaScript")}}-{{Glossary("API","APIs")}} zeichnen können (wie zum Beispiel Canvas 2D oder {{Glossary("WebGL")}}).</p>
+
+<h2 id="Mehr_dazu">Mehr dazu</h2>
+
+<h3 id="Allgemeinwissen">Allgemeinwissen</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Canvas element", "Canvas")}} auf Wikipedia (Englisch)</li>
+</ul>
+
+<h3 id="Lerninhalte">Lerninhalte</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial">The Canvas tutorial on MDN</a></li>
+</ul>
+
+<h3 id="Technische_Informationen">Technische Informationen</h3>
+
+<ul>
+ <li>Das HTML-Element {{HTMLElement("canvas")}} auf MDN</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/HTML/Canvas">Allgemein Canvas-Dokumentation auf MDN</a></li>
+ <li>{{domxref("CanvasRenderingContext2D")}}: The canvas 2D drawing API</li>
+ <li><a href="http://www.w3.org/TR/2dcontext/" rel="external">The Canvas 2D API specification</a></li>
+</ul>
+</article>
diff --git a/files/de/glossary/card_sorting/index.html b/files/de/glossary/card_sorting/index.html
new file mode 100644
index 0000000000..14fb31e629
--- /dev/null
+++ b/files/de/glossary/card_sorting/index.html
@@ -0,0 +1,20 @@
+---
+title: Card sorting
+slug: Glossary/Card_sorting
+tags:
+  - Design
+  - Glossary
+  - Informationsarchitektur
+translation_of: Glossary/Card_sorting
+---
+<p><span class="seoSummary"><strong>Card sorting</strong> (dt. etwa „Karten sortieren“) ist eine einfach anzuwendende Methode zur Strukturierung in der  {{glossary("Informationsarchitektur")}}.</span> Beim <em>Card sorting</em> werden die Personen, die an der Konzeption einer Website (oder eines anderen Produkts) beteilgt sind, dazu aufgefordert, die Inhalte, Dienste und Funktionen, die die gesamte Website oder eine einzelne Webseite enthalten sollen, aufzuschreiben und anschließend in Gruppen oder Kategorien zusammenzufassen. Die Methode eignet sich, um herauszufinden, welche Inhalte auf die einzelnen Seiten einer Website gehören.</p>
+
+<p>Die Bezeichnung leitet sich davon ab, dass <em>Card sorting</em> oftmals durch das buchstäbliche Aufschreiben der Begriffe auf Karteikarten erfolgt, die dann zu Gruppen oder Stapeln absortiert werden.</p>
+
+<h2 id="Mehr_erfahren"><strong>Mehr erfahren</strong></h2>
+
+<h3 id="Allgemeinwissen"><strong>Allgemeinwissen</strong></h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "Card-Sorting")}} auf Wikipedia</li>
+</ul>
diff --git a/files/de/glossary/cdn/index.html b/files/de/glossary/cdn/index.html
new file mode 100644
index 0000000000..5d6b5fd940
--- /dev/null
+++ b/files/de/glossary/cdn/index.html
@@ -0,0 +1,17 @@
+---
+title: CDN
+slug: Glossary/CDN
+tags:
+  - Glossary
+  - Infrastructure
+translation_of: Glossary/CDN
+---
+<p>Ein <strong>CDN </strong>(Content Delivery Network) ist eine Gruppe von Servern, die sich über viele Standorte erstreckt. Diese Server speichern duplizierte Kopien von Daten, um Datenanforderungen, basierend darauf welche der Server sich räumlich am nähesten zu den entsprechenden anfragenden Endnutzern befinden, zu beantworten. CDNs ermöglichen schnelle Leistung, die weniger stark von hoher Datenverkehrsauslastung beeinflusst wird.</p>
+
+<p>CDNs werden auf breiter Ebene genutzt um CSS- und Javascript-Dateien (Static Assets, Statische Inhalte) von Bibliotheken wie Bootstrap, jQuery etc. auszuliefern. Derartige Bibliotheksdateien über ein CDN auszuliefern, ist aus mehreren Gründen vorzuziehen:</p>
+
+<ul>
+ <li>Statische Inhalte von Bibliotheken über ein CDN auszuliefern, vermindert die Last auf Deinen eigenen Servern.</li>
+ <li>Die meisten CDNs haben Serverstandorte rund um den Erdball, so dass die Server des CDN u.U. näher bei Deinen Nutzern sind, als Deine eigenen Server. Geographische Distanz wirkt sich proportional auf die Latenz aus.</li>
+ <li>CDNs sind bereits mit den richtigen Cache-Einstellungen konfiguriert. Die Benutzung eines CDN erspart Dir die Konfiguration für die Bereitstellung von statischen Inhalten auf Deinen eigenen Servern.</li>
+</ul>
diff --git a/files/de/glossary/character/index.html b/files/de/glossary/character/index.html
new file mode 100644
index 0000000000..c4eb900ca9
--- /dev/null
+++ b/files/de/glossary/character/index.html
@@ -0,0 +1,22 @@
+---
+title: Zeichen
+slug: Glossary/Character
+tags:
+  - CodingScripting
+  - Glossar
+  - strings
+translation_of: Glossary/Character
+---
+<p>Ein Zeichen ist entweder ein Symbol (Buchstaben, Nummern, Punktuierung) oder nicht druckbares "control" (z.B. carriage return oder weicher Bindestrich). {{glossary("UTF-8")}} ist der meist verwendete Zeichensatz und beinhält die Grapheme der meistbeliebtesten menschlichen Sprachen.</p>
+
+<h2 id="Mehr_erfahren">Mehr erfahren</h2>
+
+<h3 id="Allgemeinwissen">Allgemeinwissen</h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "Character (computing)")}} auf Wikipedia</li>
+ <li>{{interwiki("wikipedia", "Character encoding")}} auf Wikipedia</li>
+ <li>{{interwiki("wikipedia", "ASCII")}} auf Wikipedia</li>
+ <li>{{interwiki("wikipedia", "UTF-8")}} auf Wikipedia</li>
+ <li>{{interwiki("wikipedia", "Unicode")}} auf Wikipedia</li>
+</ul>
diff --git a/files/de/glossary/chrome/index.html b/files/de/glossary/chrome/index.html
new file mode 100644
index 0000000000..aec09f2a06
--- /dev/null
+++ b/files/de/glossary/chrome/index.html
@@ -0,0 +1,12 @@
+---
+title: Chrome
+slug: Glossary/Chrome
+translation_of: Glossary/Chrome
+---
+<div class="trans-verified-button-small" dir="ltr" id="gt-res-dir-ctr"><span id="result_box" lang="de"><span>In einem Browser ist Chrome jeder sichtbare Aspekt eines Browsers, abgesehen von den Webseiten selbst (z. B. Symbolleisten, Menüleiste, Registerkarten).</span> <span style="background-color: transparent;">Dies ist nicht mit dem Browser {{glossary ("Google Chrome")}} zu verwechseln.</span></span></div>
+
+<h2 id="Mehr_lernen">Mehr lernen</h2>
+
+<ul>
+ <li><a href="http://www.nngroup.com/articles/browser-and-gui-chrome/">Browser and GUI Chrome</a></li>
+</ul>
diff --git a/files/de/glossary/cms/index.html b/files/de/glossary/cms/index.html
new file mode 100644
index 0000000000..d65fcfdfdb
--- /dev/null
+++ b/files/de/glossary/cms/index.html
@@ -0,0 +1,18 @@
+---
+title: CMS
+slug: Glossary/CMS
+tags:
+  - CMS
+  - Content management system
+  - Glossar
+translation_of: Glossary/CMS
+---
+<p>Ein CMS (Content Management System) ist eine Software, die Benutzern das Veröffentlichen, Verwalten, Verändern oder Entfernen verschiedenster Inhalte erlaubt. Dazu gehören neben Text auch Bilder, Videos, Ton und interaktiver Code.</p>
+
+<h2 id="Erfahren_Sie_mehr">Erfahren Sie mehr</h2>
+
+<h3 id="Allgemeinwissen">Allgemeinwissen</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Content management system")}} auf Wikipedia</li>
+</ul>
diff --git a/files/de/glossary/codec/index.html b/files/de/glossary/codec/index.html
new file mode 100644
index 0000000000..1c21d4fe16
--- /dev/null
+++ b/files/de/glossary/codec/index.html
@@ -0,0 +1,23 @@
+---
+title: Codec
+slug: Glossary/Codec
+tags:
+  - Glossar
+  - WebMechanics
+translation_of: Glossary/Codec
+---
+<p>Ein <em>Codec</em> (ein Kofferwort, das vom Englischen "<em><strong>co</strong></em>der-<em><strong>dec</strong></em>oder", dt. Kodierer-Dekodierer, abgeleitet ist) ist ein Programm, Algorithmus oder Gerät, das einen Datenstrom kodiert oder dekodiert. Ein Codec kann dabei eine für ihn spezifische Kodier- oder Kompressionstechnik anwenden.</p>
+
+<h2 id="Mehr_dazu">Mehr dazu</h2>
+
+<h3 id="Allgemeinwissen">Allgemeinwissen</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Codec")}} auf Wikipedia</li>
+</ul>
+
+<h3 id="Technische_Informationen">Technische Informationen</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Supported_media_formats">Media formats supported by the HTML audio and video elements</a> (Englisch)</li>
+</ul>
diff --git a/files/de/glossary/compile_time/index.html b/files/de/glossary/compile_time/index.html
new file mode 100644
index 0000000000..342360fe9f
--- /dev/null
+++ b/files/de/glossary/compile_time/index.html
@@ -0,0 +1,18 @@
+---
+title: Compile-Zeit
+slug: Glossary/Compile_time
+tags:
+  - CodingScripting
+  - Glossar
+  - JavaScript
+translation_of: Glossary/Compile_time
+---
+<p>Die <em>Compile-Zeit</em> beschreibt den Zeitraum ab dem ein Programm zuerst geladen ist bis zu dem Zeitpunkt an dem das Programm {{Glossary("parse","geparst")}} ist.</p>
+
+<h2 id="Mehr_erfahren">Mehr erfahren</h2>
+
+<h3 id="Allgemeinwissen">Allgemeinwissen</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Übersetzungszeit")}} auf Wikipedia</li>
+</ul>
diff --git a/files/de/glossary/cookie/index.html b/files/de/glossary/cookie/index.html
new file mode 100644
index 0000000000..9abf5f865f
--- /dev/null
+++ b/files/de/glossary/cookie/index.html
@@ -0,0 +1,20 @@
+---
+title: Cookie
+slug: Glossary/Cookie
+tags:
+  - Glossar
+translation_of: Glossary/Cookie
+---
+<p>Ein cookie ist eine kleine Information, die ein Browser beim Besuch einer Webseite auf dem Computer des Besuchers speichert.</p>
+
+<p>Cookies werden benutzt um das Besuchererlebnis einer Webseite zu personalisieren. Sie können Einstellungen oder Eingaben des Webseitenbesuchers beinhalten. Nutzer können in ihren Browsereinstellungen Cookies akzeptieren, ablehnen oder löschen.</p>
+
+<p>Cookies können serverseitig über den <code>Set-Cookie</code> HTTP header, oder via JavaScript mit <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie">document.cookie</a></code> gesetzt und modifiziert werden.</p>
+
+<h2 id="Mehr_erfahren">Mehr erfahren</h2>
+
+<h3 id="Allgemeine_Referenzen">Allgemeine Referenzen</h3>
+
+<ul>
+ <li><a href="https://de.wikipedia.org/wiki/HTTP-Cookie">HTTP-cookie</a> auf Wikipedia</li>
+</ul>
diff --git a/files/de/glossary/cors-zugelassener-anfrage-header/index.html b/files/de/glossary/cors-zugelassener-anfrage-header/index.html
new file mode 100644
index 0000000000..97db753e07
--- /dev/null
+++ b/files/de/glossary/cors-zugelassener-anfrage-header/index.html
@@ -0,0 +1,38 @@
+---
+title: CORS-zugelassene Anfrage-Header
+slug: Glossary/CORS-zugelassener-anfrage-header
+tags:
+  - CORS
+translation_of: Glossary/CORS-safelisted_request_header
+---
+<p>Ein <a href="https://fetch.spec.whatwg.org/#cors-safelisted-request-header">CORS-zugelassener Anfrage-Header</a> ist einer der folgenden <a href="/en-US/docs/Web/HTTP/Headers">HTTP Header</a>:</p>
+
+<ul>
+ <li>{{HTTPHeader("Accept")}},</li>
+ <li>{{HTTPHeader("Accept-Language")}},</li>
+ <li>{{HTTPHeader("Content-Language")}},</li>
+ <li>{{HTTPHeader("Content-Type")}}.</li>
+</ul>
+
+<p>Wenn eine Anfrage nur diese Header verwendet (und die Werte der Header unten beschriebene Anforderungen erfüllen), braucht die Anfrage kein {{glossary("preflight request")}} im <a href="/en-US/docs/Glossary/CORS">CORS</a>-Kontext übermitteln.</p>
+
+<p>Man kann weitere Header über den {{HTTPHeader("Access-Control-Allow-Headers")}}-Header zulassen und listet man obige Header dort auf, lassen sich folgende Sicherheitsrestriktionen umgehen:</p>
+
+<h4 id="Zusätzliche_Restriktionen">Zusätzliche Restriktionen</h4>
+
+<p>CORS-zugelassene Header müssen außerdem folgende Anforderungen erfüllen, um ein CORS-zugelassender Anfrage-Header zu sein:</p>
+
+<ul>
+ <li>Für {{HTTPHeader("Accept-Language")}} und {{HTTPHeader("Content-Language")}}: Kann lediglich Werte aus den Zeichen <code>0-9</code>, <code>A-Z</code>, <code>a-z</code>, Space oder <code>*,-.;=</code>.</li>
+ <li>Für {{HTTPHeader("Accept")}} und {{HTTPHeader("Content-Type")}}: Darf keinen <em>CORS-unsicheren Anfrage-Header-Byte</em>: <code>"():&lt;&gt;?@[\]{}</code>, Delete, Tab and Kontrollzeichen: 0x00 to 0x19 enthalten.</li>
+ <li>Für {{HTTPHeader("Content-Type")}}: Muss einen der MIME-Typen <code>application/x-www-form-urlencoded</code>, <code>multipart/form-data</code>, oder <code>text/plain</code> (Parameter wie ein <a href="/en-US/docs/Glossary/Quality_values">Qualitätswert (Quality value)</a> werden ignoriert)</li>
+ <li>Für andere Header: Die Länge des Wertes darf 128 Bytes nicht überschreiten.</li>
+</ul>
+
+<h2 id="Mehr_erfahren">Mehr erfahren</h2>
+
+<ul>
+ <li>{{Glossary("CORS-safelisted response header")}}</li>
+ <li>{{Glossary("Forbidden header name")}}</li>
+ <li>{{Glossary("Request header")}}</li>
+</ul>
diff --git a/files/de/glossary/cors/index.html b/files/de/glossary/cors/index.html
new file mode 100644
index 0000000000..90a7006ab0
--- /dev/null
+++ b/files/de/glossary/cors/index.html
@@ -0,0 +1,48 @@
+---
+title: CORS
+slug: Glossary/CORS
+translation_of: Glossary/CORS
+---
+<p><strong>CORS</strong> (Cross-Origin Resource Sharing) ist ein Mechanismus, der es erlaubt Ressourcen von anderen Servern zu laden, als dem, der die Webseite initial ausgeliefert hat. Das wird normalerweise von Browsern auf Grund der <a href="/en-US/docs/Web/Security/Same-origin_policy">same-origin security policy</a> verhindert.</p>
+
+<p>Mit gewissen {{Glossary("Header", "HTTP Headern")}} können Webserver jedoch die eigenen Ressourcen für den Zugriff von anderen Quellen freigeben.</p>
+
+<h2 id="Erfahren_Sie_mehr">Erfahren Sie mehr</h2>
+
+<h3 id="Generelle_Informationen">Generelle Informationen</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing (CORS)</a> auf MDN</li>
+ <li><a href="https://de.wikipedia.org/wiki/Cross-Origin_Resource_Sharing">Cross-Origin Resource Sharing</a> auf Wikipedia</li>
+</ul>
+
+<h3 id="CORS_Header">CORS Header</h3>
+
+<dl>
+ <dt>{{HTTPHeader("Access-Control-Allow-Origin")}}</dt>
+ <dd>Gibt an, ob die Ressource generell von anderen Quellen aufgerufen werden darf und wenn ja, von welchen.</dd>
+ <dt>{{HTTPHeader("Access-Control-Allow-Credentials")}}</dt>
+ <dd>Gibt an, ob die Ressource auch dann abgerufen werden darf, wenn im Request der <a href="https://fetch.spec.whatwg.org/#concept-request-credentials-mode">credentials mode</a> auf <a href="https://fetch.spec.whatwg.org/#concept-request-credentials-mode">include</a> gesetzt ist.</dd>
+ <dt>{{HTTPHeader("Access-Control-Allow-Headers")}}</dt>
+ <dd>Gibt an, welche HTTP Header über Quellgrenzen hinweg erlaubt sind.</dd>
+ <dt>{{HTTPHeader("Access-Control-Allow-Methods")}}</dt>
+ <dd>Gibt an, welche HTTP Methoden über Quellgrenzen hinweg erlaubt sind.</dd>
+ <dt>{{HTTPHeader("Access-Control-Expose-Headers")}}</dt>
+ <dd>Gibt an, welche HTTP Header generell in einer Antwort vom Server angezeigt werden können.</dd>
+ <dt>{{HTTPHeader("Access-Control-Max-Age")}}</dt>
+ <dd>Gibt an, wie lange die Informationen aus der <a href="/en-US/docs/Glossary/Preflight_request">preflight-Anfrage</a> gültig sind.</dd>
+ <dt>{{HTTPHeader("Access-Control-Request-Headers")}}</dt>
+ <dd>Gibt in der <a href="/en-US/docs/Glossary/Preflight_request">preflight-Anfrage</a> an, welche HTTP Header bei der folgenden Anfrage genutzt werden.</dd>
+ <dt>{{HTTPHeader("Access-Control-Request-Method")}}</dt>
+ <dd>Gibt in der <a href="/en-US/docs/Glossary/Preflight_request">preflight-Anfrage</a> an, welche HTTP Methode bei der folgenden Anfrage genutzt wird.</dd>
+ <dt>{{HTTPHeader("Origin")}}</dt>
+ <dd>Gibt die Quelle des ursprünglichen Requests an.</dd>
+</dl>
+
+<h3 id="Technische_Referenz">Technische Referenz</h3>
+
+<ul>
+ <li><a href="https://fetch.spec.whatwg.org">Fetch Spezifikation</a></li>
+</ul>
+
+<div>{{QuickLinksWithSubpages("/en-US/docs/Glossary")}}</div>
diff --git a/files/de/glossary/crawler/index.html b/files/de/glossary/crawler/index.html
new file mode 100644
index 0000000000..df3fd9db4b
--- /dev/null
+++ b/files/de/glossary/crawler/index.html
@@ -0,0 +1,23 @@
+---
+title: Crawler
+slug: Glossary/Crawler
+translation_of: Glossary/Crawler
+---
+<p>Ein Crawler ist ein Programm – oft auch Bot oder Robot genannt –, das systematisch das {{glossary("World Wide Web","Web")}} durchforstet, um Daten von Webseiten zu sammeln. Typischerweise nutzen Suchmaschinen (beispielsweise Google, Bing, etc.) Crawler zur Indexierung.</p>
+
+<h2 id="Mehr_dazu">Mehr dazu</h2>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Webcrawler")}} auf Wikipedia</li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a>
+
+  <ol>
+   <li>{{Glossary("Search engine")}}</li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/de/glossary/crlf/index.html b/files/de/glossary/crlf/index.html
new file mode 100644
index 0000000000..5bb1e1012e
--- /dev/null
+++ b/files/de/glossary/crlf/index.html
@@ -0,0 +1,30 @@
+---
+title: CRLF
+slug: Glossary/CRLF
+tags:
+  - CR
+  - CRLF
+  - Glossar
+  - Infrastructure
+  - LF
+  - Wagenrücklauf
+  - Zeilenvorschub
+translation_of: Glossary/CRLF
+---
+<p>CR und LF sind <a href="https://de.wikipedia.org/wiki/Steuerzeichen">Steuerzeichen</a> oder <a href="https://en.wikipedia.org/wiki/Bytecode">Bytecode</a>, die benutzt werden, um einen Zeilenumbruch in einer Textdatei darzustellen.</p>
+
+<ul>
+ <li>CR = <strong>Carriage Return</strong> (Wagenrücklauf, <code>\r</code>, <code>0x0D</code> in Hexadezimaldarstellung, 13 in Dezimaldarstellung) — bewegt den Cursor an den Beginn einer Zeile, ohne eine in die nächste Zeile vorzurücken.</li>
+ <li>LF = <strong>Line Feed </strong>(Zeilenvorschub, <code>\n</code>, <code>0x0A</code> in Hexadezimaldarstellung, 10 in Dezimaldarstellung)<strong> </strong>—<strong> </strong>bewegt den Cursor in die nächste Zeile, ohne an den Beginn der Zeile zurückzukehren.</li>
+</ul>
+
+<p>Ein Wagenrücklauf (CR), auf den ein Zeilenvorschub  (LF) direkt folgt (CRLF, <code>\r\n</code>, oder <code>0x0D0A</code>) bewegt den Cursor in die nächste Zeile und danach an den Beginn der Zeile.</p>
+
+<h2 id="Mehr_dazuEdit">Mehr dazu<a class="button section-edit only-icon" href="https://developer.mozilla.org/en-US/docs/Glossary/Smoke_Test$edit#Learn_more"><span>Edit</span></a></h2>
+
+<h3 id="Allgemeinwissen">Allgemeinwissen</h3>
+
+<ul>
+ <li>{{interwiki("Newline")}} bei Wikipedia</li>
+ <li>{{interwiki("Carriage return")}} bei Wikipedia</li>
+</ul>
diff --git a/files/de/glossary/css/index.html b/files/de/glossary/css/index.html
new file mode 100644
index 0000000000..ccf0fc7a11
--- /dev/null
+++ b/files/de/glossary/css/index.html
@@ -0,0 +1,48 @@
+---
+title: CSS
+slug: Glossary/CSS
+tags:
+  - CSS
+  - CodingScripting
+  - Glossar
+  - Web
+translation_of: Glossary/CSS
+---
+<p><span class="seoSummary"><strong>CSS</strong> (Cascading Style Sheets) ist eine deklarative Sprache, die das Aussehen von Webseiten im {{glossary("browser","Browser")}} steuert.</span> Der Browser wendet die CSS-Style-Deklarationen auf gewählte Elemente an, um sie in geeigneter Weise darzustellen. Eine Style-Deklaration beinhaltet die Eigenschaften und deren Werte, die bestimmen, wie eine Webseite aussieht.</p>
+
+<p>CSS ist eine der drei Kern-Webtechnologien; zusammen mit {{Glossary("HTML")}} und {{Glossary("JavaScript")}}. CSS ändert gewöhnlich das Aussehen von {{Glossary("Element","HTML-Elementen")}}, kann aber auch mit anderen Auszeichnungssprachen wie {{Glossary("SVG")}} oder {{Glossary("XML")}} verwendet werden.</p>
+
+<p>Eine CSS-Regel ist ein Satz von {{Glossary("CSS Property","Eigenschaften")}}, verbunden mit einem {{Glossary("selector","Selektor")}}. Hier ist ein Beispiel in dem jeder HTML-Paragraph gelb mit schwarzem Hintergrund eingefärbt wird:</p>
+
+<pre class="brush: css">/* Der Selektor "p" zeigt an, dass alle paragraph-Elemente im Dokument betroffen sein werden */
+p {
+  /* Die "color"-Eigenschaft definiert die Farbe, in diesem Fall gelb (englisch "yellow") */
+  color: yellow;
+
+  /* Die "background-color"-Eigenschaft definiert die Hintergrundfarbe, in diesem Fall schwarz (englisch "black") */
+  background-color: black
+}</pre>
+
+<p>"Cascading" bezieht sich auf die Regeln, welche die Priorisierung der Selektoren festlegen, um das Aussehen einer Seite zu ändern. Dies ist ein sehr wichtiges Feature, da eine komplexe Website tausende von CSS-Regeln besitzen kann.</p>
+
+<h2 id="Erfahre_mehr">Erfahre mehr</h2>
+
+<h3 id="Allgemeinwissen">Allgemeinwissen</h3>
+
+<ul>
+ <li><a href="/de/Learn/CSS">CSS lernen</a></li>
+ <li>{{interwiki("wikipedia", "CSS")}} auf Wikipedia</li>
+</ul>
+
+<h3 id="Technische_Referenz">Technische Referenz</h3>
+
+<ul>
+ <li><a href="/de/docs/Web/CSS">Die CSS Dokumentation bei MDN</a></li>
+ <li><a href="http://www.w3.org/Style/CSS/current-work" rel="external">Die aktuelle Arbeit der CSS Working Group</a> (englisch)</li>
+</ul>
+
+<h3 id="Lerne_CSS_kennen">Lerne CSS kennen</h3>
+
+<ul>
+ <li><a href="http://www.codecademy.com/en/tracks/web" rel="external">Der Webkurs bei codecademy.com</a> (englisch)</li>
+</ul>
diff --git a/files/de/glossary/css_praeprozessor/index.html b/files/de/glossary/css_praeprozessor/index.html
new file mode 100644
index 0000000000..43cd580206
--- /dev/null
+++ b/files/de/glossary/css_praeprozessor/index.html
@@ -0,0 +1,23 @@
+---
+title: CSS-Präprozessor
+slug: Glossary/CSS_Praeprozessor
+tags:
+  - CSS
+translation_of: Glossary/CSS_preprocessor
+---
+<p><span class="seoSummary">Ein <strong>CSS-Präprozessor</strong> ist ein Programm zur Generierung von {{Glossary("CSS")}} aus der des Präprozessors eigenen {{Glossary("Syntax")}}.</span> Es gibt eine Vielzahl von CSS Präprozessoren aus denen man wählen kann. Die meisten davon stellen Funktionen zur Verfügung, die in reinem CSS nicht verfügbar sind, wie beispielsweise Mixins, Nesting Selectors, Inheritance Selectors und andere. Diese Funktionen verhelfen der Struktur des CSS zu mehr Lesbarkeit und besserer Pflegbarkeit.</p>
+
+<p>Um einen CSS-Präprozessor nutzen zu können, müssen Sie, lokal oder auf Ihrem Web{{Glossary("server")}}, einen CSS-Kompilierer installieren.</p>
+
+<h2 id="Mehr_erfahren">Mehr erfahren</h2>
+
+<h3 id="Allgemeinwissen">Allgemeinwissen</h3>
+
+<p>Hier sind einige der beliebtesten CSS-Präprozessoren:</p>
+
+<ul>
+ <li><a href="http://sass-lang.com/">SASS</a></li>
+ <li><a href="http://lesscss.org/">LESS</a></li>
+ <li><a href="http://stylus-lang.com/">Stylus</a></li>
+ <li><a href="http://postcss.org/">PostCSS</a></li>
+</ul>
diff --git a/files/de/glossary/data_structure/index.html b/files/de/glossary/data_structure/index.html
new file mode 100644
index 0000000000..d4e944c46e
--- /dev/null
+++ b/files/de/glossary/data_structure/index.html
@@ -0,0 +1,17 @@
+---
+title: Datenstruktur
+slug: Glossary/Data_structure
+tags:
+  - Datenstruktur
+  - Glossar
+translation_of: Glossary/Data_structure
+---
+<p><strong>Datenstruktur</strong> ist ein bestimmter Weg um <em>Daten</em> zu organisieren, so dass diese effizient verwendet werden können.</p>
+
+<h2 id="Mehr_erfahrenEdit">Mehr erfahren<a class="button section-edit only-icon" href="https://developer.mozilla.org/en-US/docs/Glossary/Accessibility$edit#Learn_more" rel="nofollow, noindex"><span>Edit</span></a></h2>
+
+<h3 class="highlight-spanned" id="Allgemeinweissen"><span class="highlight-span">Allgemeinweissen</span></h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "Datenstruktur", "Datenstruktur")}} auf Wikipedia</li>
+</ul>
diff --git a/files/de/glossary/datenkapselung/index.html b/files/de/glossary/datenkapselung/index.html
new file mode 100644
index 0000000000..98e06ad291
--- /dev/null
+++ b/files/de/glossary/datenkapselung/index.html
@@ -0,0 +1,14 @@
+---
+title: Datenkapselung
+slug: Glossary/Datenkapselung
+tags:
+  - Datenkapselung
+translation_of: Glossary/Encapsulation
+---
+<p>Datenkapselung bezeichnet den Vorgang des Verbergens von Daten und {{glossary("function","functions")}} (Funktionen) in eine Komponente, wobei der Zugriff darauf beschränkt wird, es wird eine Art "Blackbox" für das {{glossary("object")}}  (Objekt) erstellt. Auf diese Weise braucht der Anwender solch einer Klasse nur das Interface zu kennen, also die Daten und Funktionen die nach außen hin sichtbar sind, und nicht die verborgene Implementierung.</p>
+
+<h3 id="General_knowledge">General knowledge</h3>
+
+<ul>
+ <li><a href="https://en.wikipedia.org/wiki/Encapsulation_(object-oriented_programming)">Encapsulation</a> on Wikipedia</li>
+</ul>
diff --git a/files/de/glossary/denial_of_service/index.html b/files/de/glossary/denial_of_service/index.html
new file mode 100644
index 0000000000..c2dcc40c5c
--- /dev/null
+++ b/files/de/glossary/denial_of_service/index.html
@@ -0,0 +1,9 @@
+---
+title: Denial of Service
+slug: Glossary/Denial_of_Service
+tags:
+  - Gloss
+  - Security
+translation_of: Glossary/Denial_of_Service
+---
+<p>{{page("/de/docs/Glossary/DOS_attack")}}</p>
diff --git a/files/de/glossary/dhtml/index.html b/files/de/glossary/dhtml/index.html
new file mode 100644
index 0000000000..4cb14350d3
--- /dev/null
+++ b/files/de/glossary/dhtml/index.html
@@ -0,0 +1,18 @@
+---
+title: DHTML
+slug: Glossary/DHTML
+tags:
+  - DHTML
+  - Glossar
+  - HTML
+translation_of: Glossary/DHTML
+---
+<p><strong>DHTM</strong><strong>L</strong> (Dynamisches {{glossary("HTML")}}) bezieht sich auf den Code in interaktiven Webseiten, die keine Plugins benötigen wie  {{Glossary("Adobe Flash","Flash")}} oder {{Glossary("Java")}}. DHTML verbindet die gemeinsame Funktionalität von {{Glossary("HTML")}}, {{Glossary("CSS")}}, dem {{Glossary("DOM")}}, und {{Glossary("JavaScript")}}.</p>
+
+<h2 id="Mehr_erfahren">Mehr erfahren</h2>
+
+<h3 id="Allgemeinwissen">Allgemeinwissen</h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "Dynamisches_HTML", "DHTML")}} auf Wikipedia</li>
+</ul>
diff --git a/files/de/glossary/dns/index.html b/files/de/glossary/dns/index.html
new file mode 100644
index 0000000000..dd542da701
--- /dev/null
+++ b/files/de/glossary/dns/index.html
@@ -0,0 +1,15 @@
+---
+title: DNS
+slug: Glossary/DNS
+translation_of: Glossary/DNS
+---
+<p><strong>DNS</strong> (Domain Name System) übersetzt einfach zu merkende {{glossary("domain name","Domainnamen")}} in die numerische {{Glossary("IP address","IP-Addresse")}}, die benötigt wird um einen Computer im {{Glossary("Internet")}} oder privaten Netzwerk zu finden.</p>
+
+<h2 id="Mehr_lernen">Mehr lernen</h2>
+
+<h3 id="Allgemeines_Wissen">Allgemeines Wissen</h3>
+
+<ul>
+ <li><a href="/de/Learn/Understanding_domain_names">Understanding domain names</a></li>
+ <li>{{interwiki("wikipedia", "Domain_Name_System", "Domain Name System")}} auf Wikipedia</li>
+</ul>
diff --git a/files/de/glossary/doctype/index.html b/files/de/glossary/doctype/index.html
new file mode 100644
index 0000000000..68310abcc2
--- /dev/null
+++ b/files/de/glossary/doctype/index.html
@@ -0,0 +1,21 @@
+---
+title: Doctype
+slug: Glossary/Doctype
+translation_of: Glossary/Doctype
+---
+<p>Die Präambel "<code>&lt;!DOCTYPE html&gt;</code>" befindet sich am Anfang aller HTML-Dokumente. Der einzige Nutzen dieser besteht darin {{Glossary("Browser")}} darin zu hindern, in den sogenannten <a href="/en-US/docs/Quirks_Mode_and_Standards_Mode">“quirks mode”</a> zu wechseln, während das Dokument gerendert wird. Der doctype <code>&lt;!DOCTYPE html&gt;</code> stellt sicher, dass der Browser so gut wie möglich versucht die relevanten Spezifikationen zu verwenden, anstatt einen anderen Rendermodus zu verwenden, welcher möglicherweise nicht kompatibel mit einigen Spezifikationen ist.</p>
+
+<h2 id="Lerne_mehr">Lerne mehr</h2>
+
+<h3 id="Generelles_Wissen">Generelles Wissen</h3>
+
+<ul>
+ <li><a href="https://html.spec.whatwg.org/multipage/syntax.html#the-doctype">Definition of the DOCTYPE in the HTML specification</a></li>
+ <li><a href="/en-US/docs/Quirks_Mode_and_Standards_Mode">Quirks Mode and Standards Mode</a></li>
+</ul>
+
+<h3 id="Technische_Referenzen">Technische Referenzen</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Document/doctype">Document.doctype</a>, eine JavaScript Methode, welche den aktuellen doctype widergibt</li>
+</ul>
diff --git a/files/de/glossary/dom/index.html b/files/de/glossary/dom/index.html
new file mode 100644
index 0000000000..e4a788dc28
--- /dev/null
+++ b/files/de/glossary/dom/index.html
@@ -0,0 +1,29 @@
+---
+title: DOM
+slug: Glossary/DOM
+tags:
+  - CodingScripting
+  - DOM
+  - Glossar
+translation_of: Glossary/DOM
+---
+<p>Das <strong>DOM</strong> (<em>Document Object Model</em>) ist eine {{Glossary("API")}}, die ein {{Glossary("HTML")}} oder {{Glossary("XML")}} Dokument darstellt und damit interagiert. Das DOM ist ein Modell, das im {{Glossary("Browser")}} geladen wird und stellt ein Dokument als einen Knotenbaum dar, in dem jeder Knoten einen Teil des Dokuments darstellt (z.B. ein {{Glossary("Element")}}, einen Text oder Kommentar).</p>
+
+<p>Das DOM ist eine der am häufigsten genutzten {{Glossary("API")}}s im {{Glossary("World Wide Web", "Web")}}, weil sie dem Browser erlaubt, auf ein Dokument zuzugreifen und damit zu interagieren. Knoten können erstellt, bewegt, geändert oder gelöscht werden. Event Handler können erstellt werden, um auf bestimmte Ereignisse zu warten.</p>
+
+<p>In den frühen Jahren des Internets gab es noch keine Spezifikation des DOM. Als die Browser begannen, JavaScript zu implementieren, wurde das DOM erschaffen. Diese erste Variante des DOM wird meistens <strong>DOM 0</strong> genannt. Heute pflegt das WHATWG den <a href="https://dom.spec.whatwg.org/">DOM Living Standard</a>.</p>
+
+<h2 id="Erfahre_mehr">Erfahre mehr</h2>
+
+<h3 id="Allgemeines">Allgemeines</h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "Document_Object_Model", "The Document Object Model")}} on Wikipedia</li>
+</ul>
+
+<h3 id="Technische_Informationen">Technische Informationen</h3>
+
+<ul>
+ <li><a href="/de/docs/DOM">Das DOM bei MDN</a></li>
+ <li><a href="https://dom.spec.whatwg.org/" rel="external">Der DOM Standard</a></li>
+</ul>
diff --git a/files/de/glossary/domain_name/index.html b/files/de/glossary/domain_name/index.html
new file mode 100644
index 0000000000..cedc53fd2b
--- /dev/null
+++ b/files/de/glossary/domain_name/index.html
@@ -0,0 +1,20 @@
+---
+title: Domain-Name
+slug: Glossary/Domain_Name
+tags:
+  - Domain-Name
+  - Glossary
+  - Protocols
+  - WebMechanics
+translation_of: Glossary/Domain_name
+---
+<p>Ein Domain-Name ist die Adresse einer {{Glossary("Internet")}}-Webseite. Er wird in {{Glossary("URL","URLs")}} benutzt, um den Server zu identifizieren, zu dem eine bestimmte Webseite gehört. Der Domain-Name besteht aus einer hierarchischen Folge von durch Punkte getrennte Namen/Bezeichnungen, die auf eine {{glossary("TLD","extension")}} endet.</p>
+
+<h2 id="Mehr_lernen">Mehr lernen</h2>
+
+<h3 id="Allgemeine_Vermerke"><strong>Allgemeine Vermerke</strong></h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "Domain_(Internet)", "Domain (Internet)")}} auf Wikipedia</li>
+ <li><a href="/en-US/Learn/Understanding_domain_names">Understanding domain names</a></li>
+</ul>
diff --git a/files/de/glossary/dos_attack/index.html b/files/de/glossary/dos_attack/index.html
new file mode 100644
index 0000000000..de5c126a63
--- /dev/null
+++ b/files/de/glossary/dos_attack/index.html
@@ -0,0 +1,33 @@
+---
+title: DoS-Attacken
+slug: Glossary/DOS_attack
+tags:
+  - Gloss
+  - Security
+translation_of: Glossary/DOS_attack
+---
+<p id="Summary">DoS (engl.: Denial of Service, "Verweigerung des Dienstes") ist ein Netzwerkangriff, die eine ordnungsgemäße verwendung von {{glossary("server")}}-Ressourcen verhindert, indem der Server mit Anfragen überflutet wird.</p>
+
+<p id="In_Depth">Computer haben limitierte Ressourcen, zum Beispiel in der Rechenleistung oder im Speicher. Wenn diese überlastet sind, können Programme stehen bleiben oder abstürzen, wodurch sie nicht mehr verfügbar sind. Eine DoS-Attacke nutzt verschiedene Techniken zur Überlastung dieser Ressourcen, die einen Zugriff für normale Nutzer unmöglich machen oder den Server zumindest im Schneckentempo laufen lassen.</p>
+
+<h3 id="Arten_von_DoS-Attacken">Arten von DoS-Attacken</h3>
+
+<p>DoS-Attacken lassen sich weniger Arten zuordnen, sondern eher kategorisieren. Hier sind einige solcher Kategorien der DoS-Attacken:</p>
+
+<ul>
+ <li>Bandbreiten-Attacken</li>
+ <li>Anfragenüberflutung</li>
+ <li>SYN-Flood-Attacken</li>
+ <li>ICMP-Flood-Attacken</li>
+ <li>Peer-to-Peer Attacken</li>
+ <li>DoS-Attacken mit dem Ziel einer dauerhaften Schädigung (permanent DoS)</li>
+ <li>Anwendungslevel-basierte Überlastung, (application level flood attack, Ziel sind nur bestimmte Teile einer Seite/Anwendung)</li>
+</ul>
+
+<h2 id="Erfahren_Sie_mehr...">Erfahren Sie mehr...</h2>
+
+<ul>
+ <li>{{interwiki("wikipedia", "Denial-of-service_attack", "Denial-of-service attack")}} bei Wikipedia</li>
+ <li><a href="https://www.owasp.org/index.php/Denial_of_Service">Denial-of-service on OWASP</a></li>
+ <li>{{Glossary("Distributed Denial of Service","DDoS")}}</li>
+</ul>
diff --git a/files/de/glossary/dtd/index.html b/files/de/glossary/dtd/index.html
new file mode 100644
index 0000000000..e2f9c51e33
--- /dev/null
+++ b/files/de/glossary/dtd/index.html
@@ -0,0 +1,11 @@
+---
+title: DTD
+slug: Glossary/DTD
+tags:
+  - CodingScripting
+  - Document
+  - Glossary
+  - HTML
+translation_of: Glossary/Doctype
+---
+<p>{{page("/de/docs/Glossary/Doctype")}}</p>
diff --git a/files/de/glossary/ecma/index.html b/files/de/glossary/ecma/index.html
new file mode 100644
index 0000000000..1221870ff7
--- /dev/null
+++ b/files/de/glossary/ecma/index.html
@@ -0,0 +1,19 @@
+---
+title: ECMA
+slug: Glossary/ECMA
+tags:
+  - Glossar
+  - Stub
+  - WebMechanics
+translation_of: Glossary/ECMA
+---
+<p><strong>Ecma International</strong> (ehemals <em>ECMA - European Computer Manufacturers Association</em>) ist eine Normungsorganisation, die Standards für Computer-Hardware, Kommunikationstechnik und Programmiersprachen entwickelt.</p>
+
+<p>Im Web ist die Organisation deswegen bekannt, weil sie die <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMA-262 Spezifikation</a> (aka. {{Glossary("ECMAScript")}}) betreut, die die Kernspezifikation von {{Glossary("JavaScript")}} ist.</p>
+
+<h2 id="Mehr_lernen">Mehr lernen</h2>
+
+<ul>
+ <li>{{interwiki("wikipedia", "Ecma_International", "Ecma International")}} auf Wikipedia</li>
+ <li><a href="http://www.ecma-international.org/">Die Ecma International Website</a></li>
+</ul>
diff --git a/files/de/glossary/ecmascript/index.html b/files/de/glossary/ecmascript/index.html
new file mode 100644
index 0000000000..49849dbca5
--- /dev/null
+++ b/files/de/glossary/ecmascript/index.html
@@ -0,0 +1,22 @@
+---
+title: ECMAScript
+slug: Glossary/ECMAScript
+tags:
+  - Glossar
+translation_of: Glossary/ECMAScript
+---
+<p><strong>ECMAScript</strong> ist die Skriptsprache, auf welcher {{glossary("JavaScript")}} basiert. <a href="http://www.ecma-international.org">Ecma International</a> ist mit der Normung von ECMAScript befaßt.</p>
+
+<h2 id="Mehr_erfahren">Mehr erfahren</h2>
+
+<h3 id="Allgemeinwissen">Allgemeinwissen</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "ECMAScript")}} auf Wikipedia</li>
+</ul>
+
+<h3 id="Technische_Referenz">Technische Referenz</h3>
+
+<ul>
+ <li><a href="http://www.ecmascript.org/">ECMAScript</a></li>
+</ul>
diff --git a/files/de/glossary/einfache_datenelemente/index.html b/files/de/glossary/einfache_datenelemente/index.html
new file mode 100644
index 0000000000..021ca95488
--- /dev/null
+++ b/files/de/glossary/einfache_datenelemente/index.html
@@ -0,0 +1,48 @@
+---
+title: Skalare Daten
+slug: Glossary/einfache_datenelemente
+tags:
+  - Glossary
+  - einfache Datentypen
+  - primitive Datentypen
+  - skalare Datentypen
+translation_of: Glossary/Primitive
+---
+<p><span class="seoSummary">Ein <strong>primitives</strong> (skalares) Datenelement (einfacher Wert, einfacher Datentyp) ist ein Datenelement, das kein {{Glossary("object","Objekt")}} ist und keine {{glossary("method","Methoden")}} besitzt.</span></p>
+
+<p>In {{Glossary("JavaScript")}} gibt es 6 skalare Datentypen:</p>
+
+<ul>
+ <li>{{Glossary("string","String")}}</li>
+ <li>{{Glossary("number","Number")}}</li>
+ <li>{{Glossary("Boolean")}}</li>
+ <li>{{Glossary("null")}}</li>
+ <li>{{Glossary("undefined")}}</li>
+ <li>{{Glossary("symbol","Symbol")}} (neu in {{Glossary("ECMAScript")}} 6)</li>
+</ul>
+
+<p>Meistens repräsentiert ein skalares Datenelement die einfachste Datenstruktur einer Programmiersprache.</p>
+
+<p>Alle skalaren Datentypen sind <strong>unveränderbar</strong> (sie können nicht noch weiter vereinfacht werden).</p>
+
+<h2 id="Skalare_Wrapper-Objekte_in_Javascript">Skalare Wrapper-Objekte in Javascript</h2>
+
+<p>Außer für die Skalare <code>null</code> und <code>undefined</code>, besitzen alle anderen Datentypen ein equivalentes, gleichnamiges Objekt, welches die einfachen Datentypen ummantelt/umgibt (neudeutsch: wrappt):</p>
+
+<ul>
+ <li>{{jsxref("String")}} für den skalaren Datentyp string.</li>
+ <li>{{jsxref("Number")}} für den skalaren Datentyp number.</li>
+ <li>{{jsxref("Boolean")}} für den skalaren Datentyp Boolean.</li>
+ <li>{{jsxref("Symbol")}} für den skalaren Datentyp Symbol.</li>
+</ul>
+
+<p>DIe Wrapper-Methode <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf"><code>valueOf()</code></a> gibt als Rückgabewert den skalaren Datentypen des verwendeten Datenelements zurück..</p>
+
+<h2 id="Lerne_weiter">Lerne weiter</h2>
+
+<h3 id="Allgemeines">Allgemeines</h3>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Data_structures">Einführung in die JavaScript Datentypen</a></li>
+ <li>{{Interwiki("wikipedia", "Primitive data types")}} auf Wikipedia</li>
+</ul>
diff --git a/files/de/glossary/element/index.html b/files/de/glossary/element/index.html
new file mode 100644
index 0000000000..49afdf4299
--- /dev/null
+++ b/files/de/glossary/element/index.html
@@ -0,0 +1,21 @@
+---
+title: Element
+slug: Glossary/Element
+tags:
+  - CodingScripting
+  - Glossar
+  - HTML
+translation_of: Glossary/Element
+---
+<p>Ein <strong>Element</strong> ist ein Teil einer Webseite. In XML und HTML kann ein Element Daten, Text, Bilder, oder auch gar nichts enthalten. Ein typisches Element besteht aus einem <strong>öffnenden Tag</strong> mit einigen Attributen, dahinter etwas Text und einem <strong>schließenden Tag</strong>.<br>
+ <img alt="Example: in &lt;p class=&quot;nice&quot;>Hello world!&lt;/p>, '&lt;p class=&quot;nice&quot;>' is an opening tag, 'class=&quot;nice&quot;' is an attribute and its value, 'Hello world!' is enclosed text content, and '&lt;/p>' is a closing tag." src="https://mdn.mozillademos.org/files/7659/anatomy-of-an-html-element.png" style="height: 181px; width: 609px;"></p>
+
+<p>Elemente und Tags <strong>sind nicht</strong><strong> dasselbe</strong>. Tags beschreiben ein Element im Quellcode, wobei ein Element ein Teil des {{Glossary("DOM")}} ist, dem <strong>Document Model</strong>, mit dessen Hilfe eine Seite im {{Glossary("Browser")}} angezeigt werden kann.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Das {{domxref("Element")}} Interface, das ein Element im DOM darstellt.</li>
+ <li><a href="/de/docs/Web/Guide/HTML/Element">Mehr über Elemente.</a></li>
+ <li><a href="/de/docs/Web/Web_Components/Custom_Elements">Web_Components/Custom_Elements</a></li>
+</ul>
diff --git a/files/de/glossary/falsy/index.html b/files/de/glossary/falsy/index.html
new file mode 100644
index 0000000000..231a35dbfb
--- /dev/null
+++ b/files/de/glossary/falsy/index.html
@@ -0,0 +1,111 @@
+---
+title: Falsy
+slug: Glossary/Falsy
+tags:
+  - CodingScripting
+  - Glossary
+  - JavaScript
+translation_of: Glossary/Falsy
+---
+<p id="Summary">Ein <strong>falsy-</strong>Wert ist ein Wert welcher zu <code>false</code> übersetzt, wenn er in einem {{Glossary("Boolean", "booleschen")}} Kontext ausgewertet wird.</p>
+
+<p>{{Glossary("JavaScript")}} nutzt {{Glossary("Type_Conversion", "Type Conversion")}} (Typ-Konvertierung) um für beliebige Werte eine boolesche Entsprechung zu erzwingen, wenn der Kontext es erfordert, beispielsweise bei {{Glossary("Conditional", "Conditionals")}} (Bedingungen) und {{Glossary("Loop", "Loops")}} (Schleifen).</p>
+
+<div class="note">
+<p><span class="st">Es gibt 8<strong> falsy</strong>-Werte in JavaScript.</span></p>
+
+<p>Das heißt, wenn JavaScript einen Booleschen Wert erwartet und einen der folgenden erhält, es diesen als “falsy” auswerten wird.</p>
+</div>
+
+<table class="standard-table" style="height: 249px; width: 1345px;">
+ <tbody>
+  <tr>
+   <td><code>false</code></td>
+   <td>Das Schlüsselwort <a href="/de/docs/Web/JavaScript/Reference/Lexical_grammar#Reservierte_zukünftige_Schlüsselworte">false</a></td>
+  </tr>
+  <tr>
+   <td><code>0</code></td>
+   <td>Die Zahl <a href="/de/docs/Web/JavaScript/Datenstrukturen#Number_Datentyp">zero</a></td>
+  </tr>
+  <tr>
+   <td><code>-0</code></td>
+   <td>Die negative Zahl <a href="/de/docs/Web/JavaScript/Datenstrukturen#Number_Datentyp">zero</a></td>
+  </tr>
+  <tr>
+   <td><code>0n</code></td>
+   <td><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt">BigInt</a>, sofern es als Boolescher Wert genutzt wird, folgt den gleichen Regeln wie eine Number. <code>0n</code> ist <em>falsy</em>.</td>
+  </tr>
+  <tr>
+   <td><code>""</code>, <code>''</code>, <code>``</code></td>
+   <td>
+    <p>Dies ist ein leerer String (die Länge des Strings ist null). Strings in JavaScript können mit doppelten Anführungszeichen <code><strong>""</strong></code>, einfachen Anführungszeichen <strong><code>''</code></strong>, oder <a href="/de/docs/Web/JavaScript/Reference/template_strings">Template literals</a> <strong><code>``</code></strong><code> </code>definiert werden.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{Glossary("null")}}</td>
+   <td><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/null">null</a> - die Abwesenheit irgendeines Wertes</td>
+  </tr>
+  <tr>
+   <td>{{Glossary("undefined")}}</td>
+   <td><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a> - der primitive Wert</td>
+  </tr>
+  <tr>
+   <td>{{Glossary("NaN")}}</td>
+   <td><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN </a>- not a number (keine Zahl)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Beispiele von <em>falsy-</em>Werten in JavaScript (welche zu false übersetzen und somit folgende <code>if</code> Konditionen nicht erfüllen):</p>
+
+<pre class="brush: js">if (false)
+if (null)
+if (undefined)
+if (0)
+if (0n)
+if (NaN)
+if ('')
+if ("")
+if (``)
+if (document.all)</pre>
+
+<div class="blockIndicator note">
+<p><code>document.all</code> wurde in der Vergangenheit zur Browsererkennung verwendet und die <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/obsolete.html#dom-document-all">HTML-Spezifikation definiert hier eine absichtliche Verletzung</a> des ECMAScript-Standards, um eine Kompatibilität mit Legacy-Code zu gewährleisten <code>(if (document.all) { // Internet Explorer code here }</code> oder nutzen von <code>document.all</code> ohne vorher auf dessen Existenz zu prüfen: <code>document.all.foo</code>).</p>
+</div>
+
+<h3 id="Der_logische_AND_Operator">Der logische AND Operator, &amp;&amp;</h3>
+
+<p>Falls das erste Objekt <em>falsy</em> ist, wird dieses zurückgegeben</p>
+
+<pre class="brush: js">let pet = false &amp;&amp; "dog";
+
+// ↪ false
+</pre>
+
+<p>Manchmal begegnet man auch der Schreibweise <strong>falsey</strong>, obwohl im Englischen die Bildung von Adjektiven mit <em>-y</em> zu einem Wegfall des Buchstaben <em>e</em> am Ende des Wortes führt (z.B. noise =&gt; noisy, ice =&gt; icy, shine =&gt; shiny).</p>
+
+<h2 id="Spezikationen">Spezikationen</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("ESDraft", "#sec-toboolean", "<code>ToBoolean</code> abstract operation")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Mehr_erfahren">Mehr erfahren</h2>
+
+<ul>
+ <li>{{Glossary("Truthy")}}</li>
+ <li>{{Glossary("Boolean")}}</li>
+</ul>
+
+<p>{{QuickLinksWithSubpages("/de/docs/Glossar")}}</p>
diff --git a/files/de/glossary/firefox_os/index.html b/files/de/glossary/firefox_os/index.html
new file mode 100644
index 0000000000..a1dfa3e467
--- /dev/null
+++ b/files/de/glossary/firefox_os/index.html
@@ -0,0 +1,27 @@
+---
+title: Firefox OS
+slug: Glossary/Firefox_OS
+tags:
+  - B2G
+  - Boot2Gecko
+  - Firefox OS
+  - Glossar
+  - Infrasktruktur
+  - Intro
+translation_of: Glossary/Firefox_OS
+---
+<p id="Summary">Firefox OS ist Mozillas mobiles Betriebssystem, basierend auf Linux und {{glossary("Mozilla Firefox","Firefox's")}} leistungsstarken {{glossary("Gecko")}} Rendering-Engine. Firefox OS besteht hauptsächlich aus {{glossary("Gaia")}}, {{glossary("Gecko")}}, und {{glossary("Gonk")}}.</p>
+
+<h2 id="Mehr_erfahren">Mehr erfahren</h2>
+
+<h3 id="Allgemeinwissen">Allgemeinwissen</h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "Firefox OS")}} auf Wikipedia</li>
+</ul>
+
+<h3 id="Technische_Referenz">Technische Referenz</h3>
+
+<ul>
+ <li>Finde in der MDN <a href="/de/docs/Archive/B2G_OS">Firefox OS Zone</a> mehr über Firefox OS heraus!</li>
+</ul>
diff --git a/files/de/glossary/firewall/index.html b/files/de/glossary/firewall/index.html
new file mode 100644
index 0000000000..c31ebf6f11
--- /dev/null
+++ b/files/de/glossary/firewall/index.html
@@ -0,0 +1,22 @@
+---
+title: Firewall
+slug: Glossary/firewall
+tags:
+  - Computernetzwerk
+  - DDoS
+  - Firewall
+  - Glossar
+  - Sicherheit
+translation_of: Glossary/firewall
+---
+<p>Eine <strong>Firewall</strong> ist ein System das Netzwerkverkehr filtert. Es kann diesen entweder erlauben oder blockieren, mithilfe von einigen festgelegten Regeln. Zum Beispiel kann sie eingehende Verbindungen im Bezug auf einen bestimmten Port blockieren oder ausgehende Verbindungen zu einer bestimmten IP-Addresse.</p>
+
+<p>Firewalls können so einfach sein wie ein einziges Stück Software oder komplexer, wie in etwa eine dedizierte Maschine dessen einzige Funktion ist, sich wie eine Firewall zu verhalten.</p>
+
+<h2 id="Mehr_erfahren">Mehr erfahren</h2>
+
+<h3 id="Allgemeinwissen">Allgemeinwissen</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Firewall (computing)")}} auf Wikipedia</li>
+</ul>
diff --git a/files/de/glossary/flex/index.html b/files/de/glossary/flex/index.html
new file mode 100644
index 0000000000..80c6cf3ea7
--- /dev/null
+++ b/files/de/glossary/flex/index.html
@@ -0,0 +1,44 @@
+---
+title: Flex
+slug: Glossary/Flex
+translation_of: Glossary/Flex
+---
+<p><code>flex</code> ist ein neuer, zur CSS-{{cssxref("display")}}-Eigenschaft hinzugefügter Wert. Wie auch <code>inline-flex</code> macht er das Element, auf das er angewendet wird, zu einem {{glossary("flex container")}} und jedes Kind des Elements wird zu einem {{glossary("flex item")}}. Die Elemente sind dann Teil des Flex-Layouts und alle der Eigenschaften, die im „CSS Flexible Box Layout Module“ definiert sind, können angewandt werden.</p>
+
+<p>Die <code>flex</code>-Eigenschaft ist eine Kurzform der Flexbox-Eigenschaften <code>flex-grow</code>, <code>flex-shrink</code> und <code>flex-basis</code>.</p>
+
+<p>Zusätzlich kann <code>&lt;flex&gt;</code> auf eine <a href="/en-US/docs/Web/CSS/flex_value">flexible Länge</a> im CSS-Grid-Layout verweisen.</p>
+
+<h2 id="Mehr_dazu">Mehr dazu</h2>
+
+<h3 id="Eigenschaftsreferenz">Eigenschaftsreferenz</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("flex")}}</li>
+ <li>{{cssxref("flex-basis")}}</li>
+ <li>{{cssxref("flex-direction")}}</li>
+ <li>{{cssxref("flex-flow")}}</li>
+ <li>{{cssxref("flex-grow")}}</li>
+ <li>{{cssxref("flex-shrink")}}</li>
+ <li>{{cssxref("flex-wrap")}}</li>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("order")}}</li>
+</ul>
+</div>
+
+<h3 id="Weiterführende_Lektüre">Weiterführende Lektüre</h3>
+
+<ul>
+ <li><em><a href="https://www.w3.org/TR/css-flexbox-1/">CSS Flexible Box Layout Module Level 1 Specification</a></em></li>
+ <li>CSS-Flexbox-Leitfaden: <em><a href="/de/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Grundlegende Konzepte der Flexbox</a></em></li>
+ <li>CSS-Flexbox-Leitfaden: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">Relationship of flexbox to other layout methods</a></em></li>
+ <li>CSS-Flexbox-Leitfaden: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning items in a flex container</a> </em></li>
+ <li>CSS-Flexbox-Leitfaden: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordering flex items</a></em></li>
+ <li>CSS-Flexbox-Leitfaden: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of flex items along the main axis</a></em></li>
+ <li>CSS-Flexbox-Leitfaden: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Mastering wrapping of flex items</a></em></li>
+ <li>CSS-Flexbox-Leitfaden: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">Typical use cases of flexbox</a></em></li>
+</ul>
diff --git a/files/de/glossary/flexbox/index.html b/files/de/glossary/flexbox/index.html
new file mode 100644
index 0000000000..1065338721
--- /dev/null
+++ b/files/de/glossary/flexbox/index.html
@@ -0,0 +1,77 @@
+---
+title: Flexbox
+slug: Glossary/Flexbox
+tags:
+  - Flexibles Boxmodul
+  - flexbox
+translation_of: Glossary/Flexbox
+---
+<p>Flexbox ist der gängige Begriff für das <a href="https://www.w3.org/TR/css-flexbox-1/">CSS Flexible Box Layout Module</a>, ein Layoutmodul zur eindimensionalen Darstellung von Elementen – als Zeile oder Spalte.</p>
+
+<p>In der Spezifikation wird die Flexbox als Layoutmodel für Schnittstellendesign/UI Design beschrieben. Die Kernfunktion der Flexbox besteht darin, Elemente im flexiblen Layout zu vergrößern und zu verkleinern. Bereiche können Elementen direkt zugewiesen werden, auf mehrere Elemente verteilt oder auch um sie herum angeordnet werden.</p>
+
+<p>Flexbox ermöglicht außerdem die Anordnung von Elementen auf der Haupt- oder Querachse, wodurch ein hohes Maß an Kontrolle auch über gruppierte Elemente hinsichtlich Größe und Ausrichtung ermöglicht wird.</p>
+
+<p>Learn more</p>
+
+<h3 id="Property_reference">Property reference</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("flex")}}</li>
+ <li>{{cssxref("flex-basis")}}</li>
+ <li>{{cssxref("flex-direction")}}</li>
+ <li>{{cssxref("flex-flow")}}</li>
+ <li>{{cssxref("flex-grow")}}</li>
+ <li>{{cssxref("flex-shrink")}}</li>
+ <li>{{cssxref("flex-wrap")}}</li>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("order")}}</li>
+</ul>
+</div>
+
+<h3 id="Further_reading">Further reading</h3>
+
+<ul>
+ <li><em><a href="https://www.w3.org/TR/css-flexbox-1/">CSS Flexible Box Layout Module Level 1 Specification</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">Relationship of flexbox to other layout methods</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning items in a flex container</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordering flex items</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of flex items along the main axis</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Mastering wrapping of flex items</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">Typical use cases of flexbox</a></em></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a>
+
+  <ol>
+   <li>{{Glossary("Flex")}}</li>
+   <li>{{Glossary("Flex Container")}}</li>
+   <li>{{Glossary("Flex Item")}}</li>
+   <li>{{Glossary("Grid")}}</li>
+  </ol>
+ </li>
+ <li>Related CSS Properties
+  <ol>
+   <li>{{cssxref("align-content")}}</li>
+   <li>{{cssxref("align-items")}}</li>
+   <li>{{cssxref("align-self")}}</li>
+   <li>{{cssxref("flex")}}</li>
+   <li>{{cssxref("flex-basis")}}</li>
+   <li>{{cssxref("flex-direction")}}</li>
+   <li>{{cssxref("flex-flow")}}</li>
+   <li>{{cssxref("flex-grow")}}</li>
+   <li>{{cssxref("flex-shrink")}}</li>
+   <li>{{cssxref("flex-wrap")}}</li>
+   <li>{{cssxref("justify-content")}}</li>
+   <li>{{cssxref("order")}}</li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/de/glossary/ftp/index.html b/files/de/glossary/ftp/index.html
new file mode 100644
index 0000000000..b18b385713
--- /dev/null
+++ b/files/de/glossary/ftp/index.html
@@ -0,0 +1,19 @@
+---
+title: FTP
+slug: Glossary/FTP
+tags:
+  - FTP
+  - Glossar
+  - Protokoll
+translation_of: Glossary/FTP
+---
+<p><strong>FTP </strong>(File Transfer Protocol) war für viele Jahre das Standard {{glossary("Protokoll")}} um Dateien von einem {{glossary("Host")}} zu einem anderen über das Internet zu übertragen. Zunehmend jedoch, erlauben Teams und Hosting-Konten kein FTP und setzen stattdessen auf ein Versionskontrollsystem wie Git. FTP ist auf älteren Hosting-Konten noch wiederzufinden, man kann jedoch mit Sicherheit sagen, dass FTP nicht mehr die empfohlene Vorgehensweise ist.</p>
+
+<h2 id="Mehr_erfahren">Mehr erfahren</h2>
+
+<h3 id="Allgemeinwissen">Allgemeinwissen</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/Upload_files_to_a_web_server">Beginner's guide to uploading files via FTP</a></li>
+ <li>{{interwiki("wikipedia", "File Transfer Protocol", "FTP")}} auf Wikipedia</li>
+</ul>
diff --git a/files/de/glossary/funktion_erster-klasse/index.html b/files/de/glossary/funktion_erster-klasse/index.html
new file mode 100644
index 0000000000..05ac712188
--- /dev/null
+++ b/files/de/glossary/funktion_erster-klasse/index.html
@@ -0,0 +1,101 @@
+---
+title: Funktion erster Klasse
+slug: Glossary/Funktion_erster-Klasse
+translation_of: Glossary/First-class_Function
+---
+<p>Funktionen, die wie jede andere Variable behandelt werden, bezeichnet man als <strong>Funktionen erster Klasse</strong>.</p>
+
+<p>In einer Programmiersprache, die über <strong>Funktionen erster Klasse</strong> verfügt, kann so eine Funktion als Argument anderen Funktionen übergeben werden, als Wert einer Variable zugewiesen, oder von einer anderen Funktion zurückgegeben werden.</p>
+
+<h2 id="Beispiel_Zuweisung_einer_Funktion_an_eine_Variable">Beispiel | Zuweisung einer Funktion an eine Variable</h2>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">const foo = function() {
+   console.log("foobar");
+}
+// Aufruf der Funktion über die Variable.
+foo();
+</pre>
+
+<p>Wir weisen der Variable '<em>foo</em>' eine <code>anonyme Funktion</code>, die den String "<em>foobar</em>" in der Konsole ausgibt, zu. Dann rufen wir diese Funktion über die Variable auf, indem wir ein Paar Klammern an das Ende hinzufügen. </p>
+
+<div class="note">
+<p><strong>Auch wenn die Funktion benannt ist, </strong>kann der Name der Variable, der sie zugewiesen ist, benutzt werden, um die Funktion aufzurufen. Funktionen zu benennen <em>wirkt sich nicht auf die Weise, wie sie aufgerufen wird aus</em>, kann aber beim Debuggen hilfreich sein</p>
+</div>
+
+<h2 id="Beispiel_Übergeben_einer_Funktion_als_Argument">Beispiel | Übergeben einer Funktion als Argument</h2>
+
+<h3 id="JavaScript_2">JavaScript</h3>
+
+<pre class="brush: js">function sagHallo() {
+   return "Hallo, ";
+}
+function gruessen(gruss, name) {
+  console.log(gruss() + name);
+}
+// Übergebe `sagHallo` als Argument an die `gruessen` Funktion.
+gruessen(sagHallo, "JavaScript!");
+</pre>
+
+<p>Wir übergeben unsere <code>sagHallo()</code> Funktion als ein Argument an die <code>gruessen() </code>Funktion. Auf diese Art behandeln wir die Funktion als <code>Wert</code>.</p>
+
+<div class="note">
+<p>Die Funktion, die wir als Argument einer anderen Funktion übergeben wird als <strong><a href="/en-US/docs/Glossary/Callback_function">Callback function</a> </strong>bezeichnet. sagHallo() ist eine <em>Callback function.</em></p>
+</div>
+
+<h2 id="Example_Return_a_function">Example | Return a function</h2>
+
+<h3 id="JavaScript_3">JavaScript</h3>
+
+<pre class="brush: js">function sayHello() {
+   return function() {
+      console.log("Hello!");
+   }
+}
+</pre>
+
+<p>In this example; We need to return a function from another function - <em>We can return a function because we treated function in JavaScript as </em><em>a </em><em><code>value</code></em><em>.</em></p>
+
+<div class="note">
+<p>A function that returns a function called <strong>Higher-Order Function</strong></p>
+</div>
+
+<p>Back to our example; Now, we need to invoke <code>sayHello</code> function and its returned <code>Anonymous Function</code>. To do so, we have two ways:</p>
+
+<h3 id="1-_Using_a_variable">1- Using a variable</h3>
+
+<pre class="brush: js">const sayHello = function() {
+   return function() {
+      console.log("Hello!");
+   }
+}
+const myFunc = sayHello();
+myFunc();
+</pre>
+
+<p>This way, it returns the <code>Hello!</code> message.</p>
+
+<div class="note">
+<p>You have to use another variable. If you invoked <code>sayHello</code> directly, it would return the function itself <strong>without invoking its returned function</strong>.</p>
+</div>
+
+<h3 id="2-_Using_double_parentheses">2- Using double parentheses</h3>
+
+<pre class="brush: js">function sayHello() {
+   return function() {
+      console.log("Hello!");
+   }
+}
+sayHello()();
+</pre>
+
+<p>We are using double parentheses <code>()()</code> to invoke the returned function as well.</p>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<h3 id="General_knowledge">General knowledge</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "First-class_function", "First-class functions")}} on Wikipedia</li>
+</ul>
diff --git a/files/de/glossary/gif/index.html b/files/de/glossary/gif/index.html
new file mode 100644
index 0000000000..65257a451c
--- /dev/null
+++ b/files/de/glossary/gif/index.html
@@ -0,0 +1,17 @@
+---
+title: GIF
+slug: Glossary/gif
+tags:
+  - Glossary
+  - Media
+translation_of: Glossary/gif
+---
+<p><strong>GIF</strong> (Graphics Interchange Format, deutsch: Grafikaustauschformat) ist ein Bildformat, das eine verlustfreie Komprimierung verwendet und für Animationen genutzt werden kann. Ein GIF nutzt bis zu 8 Bits pro Pixel und maximal 256 Farben aus dem 24-Bit-Farbenbereich.</p>
+
+<h2 id="Mehr_erfahren">Mehr erfahren</h2>
+
+<h3 id="Allgemeinwissen">Allgemeinwissen</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "GIF")}} auf Wikipedia</li>
+</ul>
diff --git a/files/de/glossary/git/index.html b/files/de/glossary/git/index.html
new file mode 100644
index 0000000000..8745e92857
--- /dev/null
+++ b/files/de/glossary/git/index.html
@@ -0,0 +1,15 @@
+---
+title: Git
+slug: Glossary/Git
+translation_of: Glossary/Git
+---
+<p><strong>Git</strong> ist ein freies, quelloffenes und verteiltes System zur Verwaltung von Quellcode (englisch <em>Source Code Management</em>, {{Glossary("SCM", "SCM", 1)}}). Es vereinfacht verteilten Softwareentwicklungs-Teams, mit dem Quellcode eines Projekts umzugehen. Es unterscheidet sich von anderen SCM-Systemen darin, dass häufig auftretende Operationen wie das Erzeugen eines Branches oder Commits auf einem lokalen Rechner möglich sind, ohne das Master-Repository verändern zu müssen oder auch nur schreibenden Zugang dazu zu haben.</p>
+
+<h2 id="Mehr_erfahren">Mehr erfahren</h2>
+
+<h3 id="Allgemeines_Wissen">Allgemeines Wissen</h3>
+
+<ul>
+ <li><a href="http://git-scm.com/">Offizielle Website und Dokumentation</a> (englisch)</li>
+ <li><a href="https://github.com/">GitHub</a>, ein auf Git basierender Online-Dienst, der Software-Projekte graphisch darstellt (englisch)</li>
+</ul>
diff --git a/files/de/glossary/gpu/index.html b/files/de/glossary/gpu/index.html
new file mode 100644
index 0000000000..cec1af4270
--- /dev/null
+++ b/files/de/glossary/gpu/index.html
@@ -0,0 +1,9 @@
+---
+title: GPU
+slug: Glossary/GPU
+tags:
+  - Glossar
+  - Infrastruktur
+translation_of: Glossary/GPU
+---
+<p>Die GPU (Graphics Processing Unit, deutsch Grafikverarbeitungseinheit) ist eine Computerkomponente, die der CPU (Central Processing Unit, deutsch zentrale Verarbeitungseinheit) ähnlich ist. Sie ist auf das Zeichnen von Graphiken (sowohl 2D als auch 3D) auf einem Monitor spezialisiert.</p>
diff --git a/files/de/glossary/graceful_degradation/index.html b/files/de/glossary/graceful_degradation/index.html
new file mode 100644
index 0000000000..9116aa8bfb
--- /dev/null
+++ b/files/de/glossary/graceful_degradation/index.html
@@ -0,0 +1,36 @@
+---
+title: Graceful degradation
+slug: Glossary/Graceful_degradation
+tags:
+  - Accessibility
+  - Design
+  - Glossary
+translation_of: Glossary/Graceful_degradation
+---
+<p><span class="seoSummary"><strong>Graceful degradation</strong> (dt. etwa „Würdevolle Herabstufung“) ist eine Design-Philosophie, bei der es darum geht, moderne Websites und -anwendungen zu entwickeln, die in den neuesten {{Glossary("Browser", "Browsern")}} funktionieren, den Nutzer*innen von älteren Browsern aber trotzdem die grundlegenden Inhalte und Funktionen zur Verfügung zur stellen, ohne jedoch an das ursprüngliche Nutzungserlebnis heranzureichen.</span></p>
+
+<p>Fehlende Voraussetzungen werden oft durch {{Glossary("Polyfill", "Polyfills")}} hinzugefügt, aber akzeptable Alternativen für Funktionalitäten wie Gestaltung und Layout sollten wo möglich bereitgestellt werden. Beispiele dafür sind die {{Glossary("CSS")}}-Kaskade oder {{Glossary("HTML")}}-Rückfalloptionen.</p>
+
+<p><em>Graceful degredation</em> ist eine nützliche Technik, die es Webentwicklern erlaubt, sich auf die Entwicklung bestmöglicher Websites zu konzentrieren, und gleichzeitig die Probleme zu berücksichtigen, die auftreten können, wenn verschiedene unbekannte {{Glossary("User agent", "User Agents")}} auf die Webseiten zugreifen.</p>
+
+<p>{{Glossary("Progressive enhancement")}} ist ein verwandtes Konzept, das sich aber von <em>Graceful degredation</em> unterscheidet und oft als Gegensatz dazu betrachtet wird. Tatsächlich haben beide Ansätze ihre Gültigkeit und können sich oft gegenseitig ergänzen.</p>
+
+<h2 id="Mehr_erfahren">Mehr erfahren</h2>
+
+<h3 id="Allgemeinwissen">Allgemeinwissen</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Graceful degradation")}} auf Wikipedia</li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ul>
+ <li><a href="/de/docs/Glossary">Glossar</a>
+
+  <ul>
+   <li>{{Glossary("Polyfill")}}</li>
+   <li>{{Glossary("Progressive enhancement")}}</li>
+  </ul>
+ </li>
+</ul>
+</section>
diff --git a/files/de/glossary/grid/index.html b/files/de/glossary/grid/index.html
new file mode 100644
index 0000000000..f14ad90c98
--- /dev/null
+++ b/files/de/glossary/grid/index.html
@@ -0,0 +1,71 @@
+---
+title: Grid
+slug: Glossary/Grid
+translation_of: Glossary/Grid
+---
+<p>Um ein CSS Grid definieren zu können verwendet man die <code>grid</code> Value für die {{cssxref("display")}} Property. Man kann Spalten und Reihen mit den {{cssxref("grid-template-rows")}} und {{cssxref("grid-template-columns")}} Propertys definieren.</p>
+
+<p>Das Grid welches man mit den Werten definiert hat, beschreibt das <em>explizite Grid</em>.</p>
+
+<p>Falls man Inhalte ausserhalb des expliziten Grids platziert, so erstellt der Grid Algorithmus zusätzliche Reihen und Spalten {{glossary("grid tracks", "tracks")}} um {{glossary("grid item", "grid items")}} zu beinhalten, denn zusätzliche Tracks sind implizierte Grid Tracks. Das implizierte Grid ist das Grid, welches automatisch erstellt wird, während dem vergrössern des Inhaltes</p>
+
+<p>Im Beispiel unten habe ich ein <em>explitzites Grid</em> von drei Spalten und zwei Reihen erstellt. Die dritte Reihe im Grid ist eine <em>implizierte Grid</em> Reihe, welche automatisch erstellt wurde, da es mehr als sechs Div's hat.</p>
+
+<div id="example">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 100px 100px;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div&gt;Eins&lt;/div&gt;
+   &lt;div&gt;Zwei&lt;/div&gt;
+   &lt;div&gt;Drei&lt;/div&gt;
+   &lt;div&gt;Vier&lt;/div&gt;
+   &lt;div&gt;Fünf&lt;/div&gt;
+   &lt;div&gt;Sechs&lt;/div&gt;
+   &lt;div&gt;Sieben&lt;/div&gt;
+   &lt;div&gt;Acht&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('example', '500', '330') }}</p>
+
+<h2 id="Learn_More">Learn More</h2>
+
+<h3 id="Property_reference">Property reference</h3>
+
+<ul>
+ <li>{{cssxref("grid-template-columns")}}</li>
+ <li>{{cssxref("grid-template-rows")}}</li>
+ <li>{{cssxref("grid")}}</li>
+ <li>{{cssxref("grid-template")}}</li>
+</ul>
+
+<h3 id="Further_reading">Further reading</h3>
+
+<ul>
+ <li>CSS Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basic concepts of grid layout</a></em></li>
+</ul>
+</div>
diff --git a/files/de/glossary/gutters/index.html b/files/de/glossary/gutters/index.html
new file mode 100644
index 0000000000..062ae66c1e
--- /dev/null
+++ b/files/de/glossary/gutters/index.html
@@ -0,0 +1,72 @@
+---
+title: Gutters
+slug: Glossary/Gutters
+tags:
+  - CSS Grid
+translation_of: Glossary/Gutters
+---
+<p>Die Zwischenräume zwischen den Inhaltsbereichen sind <em>gutters </em>oder <em>alleys</em>. Diese können im CSS Grid Layout über die Eigenschaften <code>grid-column-gap</code>, <code>grid-row-gap</code> oder <code>grid-gap</code> erstellt werden.</p>
+
+<p>Im folgenden Beispiel haben wir ein dreispaltiges und zweireihiges Grid mit 20-Pixel-Lücken zwischen den Spalten und 20-Pixel-Lücken zwischen den Reihen.</p>
+
+<div id="example_1">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #fff8f8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3,1.2fr);
+  grid-auto-rows: 45%;
+  grid-column-gap: 20px;
+  grid-row-gap: 20px;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div&gt;One&lt;/div&gt;
+   &lt;div&gt;Two&lt;/div&gt;
+   &lt;div&gt;Three&lt;/div&gt;
+   &lt;div&gt;Four&lt;/div&gt;
+   &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('example_1', '300', '280') }}</p>
+</div>
+
+<p>In Bezug auf die Gridgröße verhalten sich die Zwischenräume (gaps) wie eine normale Spalte oder Reihe, jedoch kann nichts darin platziert werden. Der Abstand wirkt so, als ob die Gitterlinie an dieser Stelle eine zusätzlichen Platz bekommen hätte, so dass jedes nach dieser Linie platzierte Grid-Element am Ende des Abstandes beginnt.</p>
+
+<p>Die Grid-Gap-Eigenschaften sind nicht das Einzige, was dazu führen kann, dass Reihen oder Spalten überlaufen. Margins, Padding oder die Verwendung der Raumverteilungseigenschaften im <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box Alignment </a>können alle zum sichtbaren Spalt beitragen - daher sollten die Grid-Gap-Eigenschaften nicht gleich "der Rastergröße" gesehen werden, es sei denn, Sie wissen, dass Ihr Entwurf nicht mit einer dieser Methoden zusätzlichen Raum geschaffen hat.</p>
+
+<h2 id="Erfahren_Sie_mehr">Erfahren Sie mehr</h2>
+
+<h3 id="Eigenschaftsreferenz">Eigenschaftsreferenz</h3>
+
+<ul>
+ <li>{{cssxref("grid-column-gap")}}</li>
+ <li>{{cssxref("grid-row-gap")}}</li>
+ <li>{{cssxref("grid-gap")}}</li>
+</ul>
+
+<h3 id="Weiterführende_Informationen">Weiterführende Informationen</h3>
+
+<ul>
+ <li>CSS Grid Layout Anleitung: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basic concepts of grid layout</a></em></li>
+ <li><a href="https://drafts.csswg.org/css-grid/#gutters">Definition of gutters in the CSS Grid Layout specification</a></li>
+</ul>
diff --git a/files/de/glossary/gzip_compression/index.html b/files/de/glossary/gzip_compression/index.html
new file mode 100644
index 0000000000..406b66c303
--- /dev/null
+++ b/files/de/glossary/gzip_compression/index.html
@@ -0,0 +1,26 @@
+---
+title: Gzip-Kompression
+slug: Glossary/GZip_compression
+translation_of: Glossary/GZip_compression
+---
+<p> </p>
+
+<p>Gzip ist ein Dateiformat, das für Datenkompression und -dekompression benutzt wird. Es basiert auf dem Deflate-Algorithmus, der es erlaubt Dateien in ihrer Größe zu komprimieren, was einen schnelleren Netzwerktransfer ermöglicht.<br>
+ Gzip wird häufig von Webservern und mobilen Browsern unterstützt, was bedeutet, dass Server automatisch Dateien mit Gzip komprimieren bevor sie jene versenden, und Browser dekomprimieren die Dateien sobald sie ebendiese empfangen.</p>
+
+<p> </p>
+
+<h2 id="Mehr_dazu">Mehr dazu</h2>
+
+<ul>
+ <li><a href="https://varvy.com/pagespeed/enable-compression.html">Enable Gzip compression?</a></li>
+ <li><a href="https://de.wikipedia.org/wiki/Gzip">Gzip auf Wikipedia</a></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ul>
+ <li>
+  <details><summary><a href="/en-US/docs/Glossary">MDN Glossary</a></summary> {{ListSubpages("/en-US/docs/Glossary")}}</details>
+ </li>
+</ul>
+</section>
diff --git a/files/de/glossary/herstellerpräfix/index.html b/files/de/glossary/herstellerpräfix/index.html
new file mode 100644
index 0000000000..a97254fc6e
--- /dev/null
+++ b/files/de/glossary/herstellerpräfix/index.html
@@ -0,0 +1,69 @@
+---
+title: Herstellerpräfix
+slug: Glossary/Herstellerpräfix
+tags:
+  - '-moz-'
+  - '-ms-'
+  - '-o-'
+  - '-webkit-'
+  - CSS
+  - Glossar
+  - Herstellerpräfix
+  - JavaScript
+  - Kodieren
+  - Präfix
+  - scripten
+translation_of: Glossary/Vendor_Prefix
+---
+<p>Browserhersteller fügen manchmal Präfixe zu experimentellen oder nichtstandardisierten CSS-Eigenschaften hinzu, damit Entwickler mit neuen Ideen experimentieren können, während - in der Theorie - verhindert werden soll, dass sie sich auf diese Experimente verlassen und ihr Code dann während des Standardisierungsprozesses bricht. Entwickler sollten mit der Verwendung der Eigenschaft ohne Präfix warten, bis das Browserverhalten standardisiert ist.</p>
+
+<div class="note">
+<p>Browserhersteller arbeiten daran, keine Herstellerpräfixe mehr für experimentelle Features zu verwenden. Webentwickler haben diese auf Produktionswebseiten benutzt, trotz ihrer experimentellen Natur. Dies hat es für Browserhersteller erschwert, Kompatibilität zu sichern und an neuen Funktionen zu arbeiten. Es war außerdem nachteilig für kleinere Browser, die sich gezwungen sehen, die Präfixe anderer Browser hinzuzufügen, um beliebte Webseiten zu laden.</p>
+
+<p>In letzter Zeit geht der Trend dahin, experimentelle Features hinter benutzergesteuerten Flags oder Einstellungen hinzuzufügen und an kleineren Spezifikationen zu arbeiten, die Stabilität wesentlich schneller erreichen.</p>
+</div>
+
+<h2 id="CSS-Präfixe">CSS-Präfixe</h2>
+
+<p>Die führenden Browser nutzen folgende Präfixe:</p>
+
+<ul>
+ <li><code>-webkit- (</code>Chrome, Safari, neuere Versionen von Opera, fast alle iOS-Broswer - einschließlich Firefox für iOS; im Grunde genommen jeder auf WebKit basierende Browser)</li>
+ <li><code>-moz- </code>(Firefox)</li>
+ <li><code>-o-</code> (Alte Versionen von Opera aus der Zeit vor WebKit)</li>
+ <li><code>-ms-</code> (Internet Explorer und Microsoft Edge)</li>
+</ul>
+
+<h2 id="API-Präfixe">API-Präfixe</h2>
+
+<p>Historisch gesehen haben Hersteller Präfixe auch in experimentellen APIs verwendet. Wenn eine gesamte Schnittstelle experimentell ist, wird ihr Name mit einem Präfix versehen (aber nicht der der enthaltenen Methoden oder Eigenschaften). Wird eine experimentelle Eigenschaft oder Methode einer standardisierten Schnittstelle hinzugefügt, erhält diese einzelne Eigenschaft oder Methode einen Präfix.</p>
+
+<h3 id="Schnittstellenpräfixe">Schnittstellenpräfixe</h3>
+
+<p>Präfixe für Schnittstellennamen werden groß geschrieben: </p>
+
+<ul>
+ <li><code>Webkit (</code>Chrome, Safari, neuere Versionen von Opera, fast alle iOS-Broswer - einschließlich Firefox für iOS; im Grunde genommen jeder auf WebKit basierende Browser)</li>
+ <li><code>Moz </code>(Firefox)</li>
+ <li><code>O</code> (Alte Versionen von Opera aus der Zeit vor WebKit)</li>
+ <li><code>MS</code> (Internet Explorer und Microsoft Edge)</li>
+</ul>
+
+<h3 id="Präfixe_für_Methoden_und_Eigenschaften">Präfixe für Methoden und Eigenschaften</h3>
+
+<p>Präfixe für Eigenschaften und Methoden werden klein geschrieben:</p>
+
+<ul>
+ <li><code>webkit (</code>Chrome, Safari, neuere Versionen von Opera, fast alle iOS-Broswer - einschließlich Firefox für iOS; im Grunde genommen jeder auf WebKit basierende Browser)</li>
+ <li><code>moz </code>(Firefox)</li>
+ <li><font face="consolas, Liberation Mono, courier, monospace">o</font> (Alte Versionen von Opera aus der Zeit vor WebKit)</li>
+ <li><font face="consolas, Liberation Mono, courier, monospace">ms</font> (Internet Explorer und Microsoft Edge)</li>
+</ul>
+
+<h2 id="Mehr_erfahren">Mehr erfahren</h2>
+
+<h3 id="Allgemeinwissen">Allgemeinwissen</h3>
+
+<ul>
+ <li><span>{{Interwiki("wikipedia", "CSS filter#Prefix_filters", "Vendor prefix")}} auf Wikipedia (englisch)</span></li>
+</ul>
diff --git a/files/de/glossary/hoisting/index.html b/files/de/glossary/hoisting/index.html
new file mode 100644
index 0000000000..f53dcb6647
--- /dev/null
+++ b/files/de/glossary/hoisting/index.html
@@ -0,0 +1,90 @@
+---
+title: Hoisting
+slug: Glossary/Hoisting
+tags:
+  - CodingScripting
+  - Glossary
+  - JavaScript
+  - hoisted
+  - hoisting
+translation_of: Glossary/Hoisting
+---
+<p>Hoisting (engl. <em>(an)heben</em>, <em>hochziehen</em>, <em>hissen</em>) ist ein Begriff, den Sie in <em>keiner</em> normativen Spezifikation vor <a href="https://www.ecma-international.org/ecma-262/6.0/index.html">ECMAScript® 2015 Language Specification</a> finden werden. Unter Hoisting wird eine allgemeine Denkweise verstanden, wie Ausführungskontexte (insbesondere die Erstellungs- und Ausführungsphasen) in JavaScript funktionieren. Das Konzept kann jedoch zunächst etwas verwirrend sein.</p>
+
+<p>Konzeptionell bedeutet beispielsweise eine strikte Definition von Hoisting, dass Variablen- und Funktionsdeklarationen physisch an die Spitze Ihres Codes gestellt werden, was jedoch nicht das ist was tatsächlich passiert. Stattdessen werden die Variablen- und Funktionsdeklarationen während der <em>Kompilierungsphase</em> in den Speicher gestellt, bleiben aber genau dort, wo Sie sie in Ihrem Code geschrieben haben.</p>
+
+<h2 id="Erfahren_Sie_mehr">Erfahren Sie mehr</h2>
+
+<h3 id="Technisches_Beispiel">Technisches Beispiel</h3>
+
+<p>Wenn JavaScript Funktionsdeklarationen vor der Ausführung eines Codesegments in den Speicher ablegt, können Sie eine Funktion verwenden, bevor Sie sie in Ihrem Code deklarieren. Zum Beispiel:</p>
+
+<pre class="brush: js">function catName(name) {
+  console.log("Der Name meiner Katze ist " + name);
+}
+
+catName("Tigger");
+
+/*
+Das Ergebnis des Codes oben ist: "Der Name meiner Katze ist Tigger"
+*/</pre>
+
+<p>Das Beispiel zeigt an, wie Sie den Code schreiben würden, damit er funktioniert. Nun wollen wir sehen, was passiert, wenn wir die Funktion aufrufen, bevor wir sie schreiben:</p>
+
+<pre class="brush: js">catName("Chloe");
+
+function catName(name) {
+  console.log("Der Name meiner Katze ist " + name);
+}
+/*
+Das Ergebnis des Codes oben ist: "Der Name meiner Katze ist Chloe"
+*/</pre>
+
+<p>Obwohl wir die Funktion zuerst in unserem Code aufrufen, funktioniert der Code auch dann noch, bevor die Funktion geschrieben wird. Dies liegt daran, wie die Kontextausführung in JavaScript funktioniert.</p>
+
+<p>Hoisting funktioniert auch gut mit anderen Datentypen und Variablen. Variablen können vor der Deklaration initialisiert und verwendet werden.</p>
+
+<h3 id="Nur_Deklarationen_werden_gehoistet">Nur Deklarationen werden gehoistet</h3>
+
+<p>JavaScript hoistet nur Deklarationen, keine Initialisierungen. Wenn eine Variable nach ihrer Verwendung deklariert und initialisiert wird, ist der Wert <code>undefined</code>. Zum Beispiel:</p>
+
+<pre class="brush: js">console.log(num); // Gibt undefined zurück
+var num;
+num = 6;</pre>
+
+<p>Wenn Sie die Variable nach der Verwendung deklarieren, sie jedoch vorher initialisieren, wird der Wert zurückgegeben:</p>
+
+<pre class="brush: js">num = 6;
+console.log(num); // Gibt 6 zurück
+var num;</pre>
+
+<p>Die beiden folgenden Beispiele zeigen das gleiche Verhalten:</p>
+
+<p> </p>
+
+<pre class="brush: js">var x = 1; // Initialisiere x
+console.log(x + " " + y); // '1 undefined'
+var y = 2; // Initialisiere y
+
+// Das obige Beispiel wird implizit als das folgende verstanden:
+var x; // Deklariere x
+var y; // Deklariere y
+// Hoisting beendet.
+
+x = 1; // Initialisiere x
+console.log(x + " " + y); // '1 undefined'
+y = 2; // Initialisiere y</pre>
+
+<h3 id="Technische_Referenz">Technische Referenz</h3>
+
+<p> </p>
+
+<p> </p>
+
+<ul>
+ <li><a href="https://www.udemy.com/javascript-verstehe-die-seltsamen-teile/">JavaScript: Verstehe die seltsamen Teile</a> — Udemy.com Kurs</li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Statements/var">var Ausdruck</a> — MDN</li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Statements/function">function Ausdruck</a> — MDN</li>
+</ul>
+
+<p> </p>
diff --git a/files/de/glossary/html/index.html b/files/de/glossary/html/index.html
new file mode 100644
index 0000000000..fdd97759df
--- /dev/null
+++ b/files/de/glossary/html/index.html
@@ -0,0 +1,48 @@
+---
+title: HTML
+slug: Glossary/HTML
+tags:
+  - Glossary
+  - HTML
+  - Web
+translation_of: Glossary/HTML
+---
+<p>HTML (HyperText Markup Language) ist eine beschreibende Sprache, die die Struktur von Webseiten definiert.</p>
+
+<h2 id="Geschichte">Geschichte</h2>
+
+<p>Im Jahr 1990 definierte Tim Berners-Lee das Konzept von {{glossary("Hypertext")}} als Teil seiner Vision des {{glossary("World Wide Web","Web")}}. Im darauf folgenden Jahr formalisierte er dieses als ein Markup, das hauptsächlich auf {{glossary("SGML")}} basiert. Die {{glossary("IETF")}} spezifizierte HTML 1993 erstmals formal und veröffentlichte nach einigen Entwürfen die Version 2.0 im Jahr 1995. Berners-Lee gründete 1994 die {{glossary("W3C")}}, die das Internet entwickeln sollte. 1996 übernahm W3C die Arbeit an HTML und veröffentlichte die HTML 3.2 Recommendation ein Jahr später. HTML 4.0 wurde 1999 veröffentlicht und wurde zu einem {{glossary("ISO")}}-Standard im Jahr 2000.</p>
+
+<p>Zu dieser Zeit verließ das W3C fast HTML bei dem Gefallen an {{glossary("XHTML")}}, und fragte im Jahre 2004 nach der Gründung einer unabhängigen Gruppe , genannt WHATWG. Dank WHATWG wurde die Arbeit an {{glossary("HTML5")}} fortgesetzt. Die beiden Organisationen veröffentlichten den ersten Entwurf in 2008 und den finalen Standard in 2014.</p>
+
+<h2 id="Konzept_und_Syntax">Konzept und Syntax</h2>
+
+<p>Ein HTML-Dokument ist ein Reintextdokument, welches mit Elementen strukturiert wird. Elemente sind mit zusammenpassenden Öffnungs- und Schließungstags umgeben. Jeder Tag beginnt und endet mit eckigen Klammern. Es gibt wenige leere oder <em>void</em> Tags, die keinen Text enthalten können, wie {{htmlelement("img")}}</p>
+
+<p>Man kann HTML-Tags mit Attributen erweitern, welche zusätzliche Information enthalten, welche bestimmt, wie der Browser das Element interpretiert:</p>
+
+<p><img alt="Detaile der Structur eines HTML-Elementes" src="https://mdn.mozillademos.org/files/7659/anatomy-of-an-html-element.png" style="height: 181px; width: 609px;"></p>
+
+<p>Ein HTML-Document ist normalerweise mit einer <code>.htm</code>-Erweiterung oder einer <code>.html</code>-Erweiterung gespeichert und in einem Webserver bereitgestellt.</p>
+
+<h2 id="Mehr_erfahren">Mehr erfahren</h2>
+
+<h3 id="Allgemeines_Wissen">Allgemeines Wissen</h3>
+
+<ul>
+ <li><a href="http://de.wikipedia.org/wiki/Hypertext_Markup_Language">HTML</a> auf Wikipedia</li>
+</ul>
+
+<h3 id="HTML_lernen">HTML lernen</h3>
+
+<ul>
+ <li><a href="http://developer.mozilla.org/de/Learn/HTML">unser HTML-Tutorial</a></li>
+ <li><a href="http://www.codecademy.com/en/tracks/web" rel="external">Der Webkurs auf codeacademy.com</a></li>
+</ul>
+
+<h3 id="Technische_Referenz">Technische Referenz</h3>
+
+<ul>
+ <li><a href="/de/docs/Web/HTML">Die HTML-Documentation auf MDN</a></li>
+ <li><a href="http://www.w3.org/TR/html5/" rel="external">The HTML-Specification</a></li>
+</ul>
diff --git a/files/de/glossary/html5/index.html b/files/de/glossary/html5/index.html
new file mode 100644
index 0000000000..76a30142f3
--- /dev/null
+++ b/files/de/glossary/html5/index.html
@@ -0,0 +1,17 @@
+---
+title: HTML5
+slug: Glossary/HTML5
+tags:
+  - CodingScripting
+  - Glossary
+  - HTML
+  - HTML5
+translation_of: Glossary/HTML5
+---
+<p>Die neueste stabile Version von {{Glossary("HTML")}}, HTML5 bringt HTML von einer einfachen Auszeichnungssprache zum Strukturieren eines Dokuments zu einer vollständigen App-Entwicklungsplattform. HTML5 enthält unter anderem neue Elemente und neue {{glossary("JavaScript")}} {{glossary("API","APIs")}}, um den Zugriff auf Speicher, Multimedia und Hardware zu verbessern.</p>
+
+<h2 id="Mehr_erfahren">Mehr erfahren</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/Guide/HTML/HTML5">Unser Leitfaden zu HTML5</a></li>
+</ul>
diff --git a/files/de/glossary/http/index.html b/files/de/glossary/http/index.html
new file mode 100644
index 0000000000..1251d9c5ce
--- /dev/null
+++ b/files/de/glossary/http/index.html
@@ -0,0 +1,22 @@
+---
+title: HTTP
+slug: Glossary/HTTP
+tags:
+  - Anfänger
+  - Glossar
+  - HTTP
+  - Infrastruktur
+translation_of: Glossary/HTTP
+---
+<p>HTTP (HyperText Transfer Protocol) ist das Standard {{glossary("protocol", "Protokoll")}}, dass es ermöglicht, Dateien über das {{glossary("World Wide Web","Web")}} zu übertragen. HTTP ist textlich (die gesamte Kouumunikation geschieht in einfachem Text) und zustandslos (Informationen aus vorheriger Kommunikation gehen verloren).</p>
+
+<div>
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/HTTP">HTTP on MDN</a></li>
+ <li>{{interwiki("wikipedia", "Hypertext Transfer Protocol", "HTTP")}} auf Wikipedia</li>
+</ul>
+</div>
+
+<p> </p>
diff --git a/files/de/glossary/https/index.html b/files/de/glossary/https/index.html
new file mode 100644
index 0000000000..3f936fd4c3
--- /dev/null
+++ b/files/de/glossary/https/index.html
@@ -0,0 +1,19 @@
+---
+title: HTTPS
+slug: Glossary/https
+tags:
+  - Glossary
+  - HTTPS
+  - Infrastruktur
+  - Sicherheit
+translation_of: Glossary/https
+---
+<p><strong>HTTPS</strong> (<em>HTTP Secure</em>) ist eine verschlüsselte Version des {{Glossary("HTTP")}}-Protokolls. Meistens nutzt es {{Glossary("SSL")}} oder {{Glossary("TLS")}}, um die gesamte Kommunikation zwischen einem Client und einem Server zu verschlüsseln. Diese sichere Verbindung erlaubt Clients, sicher sensible Daten mit dem Server auszutauschen, zum Beispiel Banking-Aktivitäten oder Online-Shopping.</p>
+
+<h2 id="Mehr_dazu">Mehr dazu</h2>
+
+<h3 id="Allgemeinwissen">Allgemeinwissen</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "HTTPS")}} auf Wikipedia</li>
+</ul>
diff --git a/files/de/glossary/hyperlink/index.html b/files/de/glossary/hyperlink/index.html
new file mode 100644
index 0000000000..27486be20a
--- /dev/null
+++ b/files/de/glossary/hyperlink/index.html
@@ -0,0 +1,34 @@
+---
+title: Hyperlink
+slug: Glossary/Hyperlink
+tags:
+  - CodingScripting
+  - Glossar
+  - HTML
+  - Navigation
+translation_of: Glossary/Hyperlink
+---
+<p>Hyperlinks verbinden Webseiten oder Datenelemente miteinander. In HTML definieren {{HTMLElement("a")}}-Elemente Hyperlinks von einem Punkt auf einer Webseite (wie einer Zeichenkette oder einem Bild) zu einem anderen Punkt auf einer ander Webseite (oder sogar auf der gleichen Seite).</p>
+
+<h2 id="Mehr_dazu">Mehr dazu</h2>
+
+<h3 id="Allgemeinwissen">Allgemeinwissen</h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "Hyperlink", "Hyperlink")}} auf Wikipedia</li>
+ <li>Der <a href="de/Learn/HTML/Einführung_in_HTML/Erstellen_von_Hyperlinks">Hyperlinkleitfaden</a> auf MDN</li>
+</ul>
+
+<h3 id="Technische_Referenz">Technische Referenz</h3>
+
+<ul>
+ <li><a class="external external-icon" href="https://www.w3.org/TR/1999/REC-html401-19991224/struct/links.html">Links in HTML-Documenten - W3C </a>(Englisch)</li>
+ <li><a class="external external-icon" href="https://w3c.github.io/html-reference/a.html">HTML5 a - hyperlink - W3C </a>(Englisch)</li>
+</ul>
+
+<h3 id="Learn_about_it">Learn about it</h3>
+
+<ul>
+ <li><a href="/de/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code> auf MDN</a></li>
+ <li><a href="/en-US/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code> auf MDN </a>(Englisch)</li>
+</ul>
diff --git a/files/de/glossary/ide/index.html b/files/de/glossary/ide/index.html
new file mode 100644
index 0000000000..0a418c3914
--- /dev/null
+++ b/files/de/glossary/ide/index.html
@@ -0,0 +1,19 @@
+---
+title: IDE
+slug: Glossary/IDE
+tags:
+  - Entwicklungsumgebung
+  - IDE
+  - Integrierte Entwicklungsumgebung
+  - Interaktive Entwicklungsumgebung
+translation_of: Glossary/IDE
+---
+<p><span class="tgc">Eine integrierte Entwicklungsumgebung (englisch </span><strong>IDE</strong><span class="tgc">) oder auch interaktive Entwicklungsumgebung ist eine Softwareanwendung, die Programmierern umfangreiche Funktionalitäten für die Softwareentwicklung bereitstellt. Eine IDE besteht normalerweise aus einem<span style="">  </span>Quellcode-Editor sowie Automatisierungswerkzeugen zum Erzeugen und Debuggen/Bereinigen von Code.</span></p>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<h3 id="General_knowledge">General knowledge</h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "Integrated_development_environment", "IDE")}} on Wikipedia</li>
+</ul>
diff --git a/files/de/glossary/identifier/index.html b/files/de/glossary/identifier/index.html
new file mode 100644
index 0000000000..c02f326f7d
--- /dev/null
+++ b/files/de/glossary/identifier/index.html
@@ -0,0 +1,20 @@
+---
+title: Bezeichner
+slug: Glossary/Identifier
+tags:
+  - Beginner
+  - Glossary
+  - Sharing
+translation_of: Glossary/Identifier
+---
+<p>Eine Sequenz von Zeichen im Code, die eine <strong>{{glossary("variable", "Variable")}}, {{glossary("function", "Funktion")}} oder {{glossary("property", "Eigenschaft")}}</strong> identifizieren.</p>
+
+<p>In {{glossary("JavaScript")}} können Bezeichner nur alphanumerische Zeichen (oder "$" oder "_") enthalten und dürfen nicht mit einer Ziffer beginnen. Ein Bezeichner unterscheidet sich von einem <strong>String</strong> darin, dass Strings Daten sind, während ein Bezeichner Teil des Codes ist. In JavaScript gibt es keine Möglichkeit Bezeichner zu Strings zu konvertieren, aber manchmal ist es möglich Strings in Bezeichner zu übersetzen.</p>
+
+<h2 id="Mehr_erfahren">Mehr erfahren</h2>
+
+<h3 id="Generelles_Wissen">Generelles Wissen</h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "Identifikator#Identifikationssystem", "Bezeichner")}} auf Wikipedia</li>
+</ul>
diff --git a/files/de/glossary/ietf/index.html b/files/de/glossary/ietf/index.html
new file mode 100644
index 0000000000..914f1ec48f
--- /dev/null
+++ b/files/de/glossary/ietf/index.html
@@ -0,0 +1,19 @@
+---
+title: IETF
+slug: Glossary/IETF
+tags:
+  - Glossar
+  - IETF
+  - Infrastruktur
+  - Internet
+translation_of: Glossary/IETF
+---
+<p><span class="seoSummary">Die Internet Engineering Task Force (<strong>IETF</strong>) ist eine weltweite Organisation die  {{glossary('specification','Spezifikationen')}} entwirft im Bezug auf die Mechanismen des {{glossary("Internets")}}, besonders {{glossary("TCP")}}/{{glossary("IPv6","IP")}} oder die Internet {{glossary("Protocol")}} Suite.</span> Die IETF ist offen, wird von Freiwilligen betrieben und von der <a href="https://www.internetsociety.org/">Internet Society</a> gesponsert.</p>
+
+<h2 id="Mehr_erfahren">Mehr erfahren</h2>
+
+<h3 id="Allgemeinwissen">Allgemeinwissen</h3>
+
+<ul>
+ <li><a href="https://www.ietf.org/">Offizielle Webseite</a></li>
+</ul>
diff --git a/files/de/glossary/iife/index.html b/files/de/glossary/iife/index.html
new file mode 100644
index 0000000000..22ca4b8818
--- /dev/null
+++ b/files/de/glossary/iife/index.html
@@ -0,0 +1,58 @@
+---
+title: IIFE
+slug: Glossary/IIFE
+translation_of: Glossary/IIFE
+---
+<p>Eine IIFE (Immediately Invoked Function Expression) ist eine JavaScript-Funktion, die ausgeführt wird, sobald sie definiert ist.</p>
+
+<pre class="brush: js notranslate">(function () {
+    statements
+})();</pre>
+
+<p>Es handelt sich um ein Entwurfsmuster, das auch als selbstausführende anonyme Funktion bekannt ist und aus zwei Hauptteilen besteht:</p>
+
+<ol>
+ <li>Die erste ist die anonyme Funktion mit lexikalischem Umfang, die innerhalb des {{jsxref("Operators/Grouping", "Grouping Operator")}} <code>()</code> eingeschlossen ist. Dies verhindert sowohl den Zugriff auf Variablen innerhalb des IIFE-Idioms als auch die Beeinträchtigung des globalen Geltungsbereichs.</li>
+ <li>Der zweite Teil erzeugt den unmittelbar aufgerufenen Funktionsausdruck <code>()</code>, durch den die JavaScript-Engine die Funktion direkt interpretiert.</li>
+</ol>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Die Funktion wird zu einem Funktionsausdruck, der sofort ausgeführt wird. Auf die Variable innerhalb des Ausdrucks kann von außerhalb nicht zugegriffen werden.</p>
+
+<pre class="brush: js notranslate">(function () {
+    var aName = "Barry";
+})();
+// Variable aName is not accessible from the outside scope
+aName // throws "Uncaught ReferenceError: aName is not defined"
+</pre>
+
+<p>Die Zuweisung des IIFE an eine Variable speichert den Rückgabewert der Funktion, nicht die Funktionsdefinition selbst.</p>
+
+<pre class="brush: js notranslate">var result = (function () {
+    var name = "Barry";
+    return name;
+})();
+// Immediately creates the output:
+result; // "Barry"</pre>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li>Mehr darüber erfahren
+  <ol>
+   <li><a href="/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript#Functions">Quick example</a> (at the end of the "Functions" section, right before "Custom objects")</li>
+  </ol>
+ </li>
+ <li>Wikipedia Artikel
+  <ol>
+   <li>{{interwiki("wikipedia", "Immediately-invoked function expression", "IIFE")}}</li>
+  </ol>
+ </li>
+ <li><a href="/en-US/docs/Glossary">Glossar</a>
+  <ol>
+   <li>{{Glossary("Function")}}</li>
+   <li>{{Glossary("Self-Executing Anonymous Function")}}</li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/de/glossary/imap/index.html b/files/de/glossary/imap/index.html
new file mode 100644
index 0000000000..cb1f2ecdb9
--- /dev/null
+++ b/files/de/glossary/imap/index.html
@@ -0,0 +1,18 @@
+---
+title: IMAP
+slug: Glossary/IMAP
+translation_of: Glossary/IMAP
+---
+<p>IMAP (Internet Message Access Protocol) ist ein {{Glossary("protocol")}} zum Abrufen und Speichern von Emails. Aktueller als {{Glossary("POP3")}}, erlaubt IMAP auch serverseitig Ordner und Regeln.</p>
+
+<p>Anders als POP3, lässt IMAP multiple und gleichzeitige Verbindungen zu einer Mailbox zu. Clients, die auf eine Mailbox zugreifen, können Informationen erhalten, die Statusänderungen durch andere Clients betreffen. IMAP stellt darüber hinaus einen Modus bereit, mit dem ein Client verbunden bleiben und nach Bedarf Informationen abrufen kann.</p>
+
+<p>Mark Crispin entwickelte IMAP ursprünglich 1986 als <em>Interim Mail Access Protocol</em>. IMAP4 in 1. Überarbeitung ist die aktuelle Version, definiert unter <a href="http://www.faqs.org/rfcs/rfc3501.html">RFC 3501</a>.</p>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<ul>
+ <li>{{RFC(3501)}}</li>
+ <li>{{Glossary("POP3")}}</li>
+ <li>{{interwiki("wikipedia", "Internet Message Access Protocol", "IMAP")}} on Wikipedia</li>
+</ul>
diff --git a/files/de/glossary/index.html b/files/de/glossary/index.html
new file mode 100644
index 0000000000..8694f9c294
--- /dev/null
+++ b/files/de/glossary/index.html
@@ -0,0 +1,27 @@
+---
+title: Glossar
+slug: Glossary
+tags:
+  - Beginner
+  - Glossary
+  - NeedsTranslation
+  - TopicStub
+translation_of: Glossary
+---
+<div style="max-width: 300px; float: right; margin: 0 0 .5em 1em;">{{LearnBox({"title":"Lerne einen neuen Begriff:"})}}</div>
+
+<p><span class="seoSummary">Web-Technologien enthalten eine Menge Fachsprache und Abkürzungen, welche in der Programmierung und in Dokumentationen Anwendung finden. Dieses Glossar bietet Definitionen von Wörtern und Abkürzungen, die du kennen solltest, um das Web zu verstehen und erfolgreich dafür zu entwickeln.</span></p>
+
+<h2 id="Liste_der_Einträge">Liste der Einträge</h2>
+
+<p>{{GlossaryList({"split":"h3", "css":"multiColumnList"})}}</p>
+
+<h2 id="Mitwirken">Mitwirken</h2>
+
+<p>Dieses Glossar wird immer in Bearbeitung sein. Du kannst helfen, es zu verbessern, indem du neue Einträge schreibst oder bestehende verbesserst. Am Besten beginnst du, indem du mit dem folgenden Button einen neuen Eintrag erstellst oder dir einen der empfohlenen Einträge ansiehst.</p>
+
+<p><strong><a href="/en-US/docs/new?parent=4391">Einen neuen Eintrag hinzufügen</a></strong></p>
+
+<p>{{GlossaryList({"terms":[], "filter":"notdefined", "css":"multiColumnList"})}}</p>
+
+<p>Um mehr darüber zu erfahren, wie du das Glossar unterstützen kannst, gehe zur <a href="/en-US/docs/MDN/Doc_status/Glossary">glossary documentation status page</a>.</p>
diff --git a/files/de/glossary/indexeddb/index.html b/files/de/glossary/indexeddb/index.html
new file mode 100644
index 0000000000..41a5d3eff2
--- /dev/null
+++ b/files/de/glossary/indexeddb/index.html
@@ -0,0 +1,20 @@
+---
+title: IndexedDB
+slug: Glossary/IndexedDB
+tags:
+  - API
+  - CodingScripting
+  - Database
+  - Datenbank
+  - Glossar
+  - Sql
+translation_of: Glossary/IndexedDB
+---
+<p>IndexedDB ist eine Web-{{glossary("API")}}, die es ermöglicht, große Datenstrukturen in Browsern zu speichern und für die Hochleistungssuche zu indexiieren. Wie eine {{glossary("SQL")}}-basierte <a href="https://en.wikipedia.org/wiki/Relational_database_management_system" title="Relational DataBase Management System">RDBMS</a>, ist auch IndexedDB eine transaktionsverarbeitende Datenbank. Allerdings nutzt es {{glossary("JavaScript")}}-Objekte anstelle von festen Spalten, um Daten zu speichern.</p>
+
+<h2 id="Erfahren_Sie_mehr">Erfahren Sie mehr</h2>
+
+<ul>
+ <li>Die {{domxref('IndexedDB_API','IndexedDB API','',1)}} im MDN</li>
+ <li><a href="http://w3c.github.io/IndexedDB/">Die W3C-Spezifikation für IndexedDB</a></li>
+</ul>
diff --git a/files/de/glossary/informationsarchitektur/index.html b/files/de/glossary/informationsarchitektur/index.html
new file mode 100644
index 0000000000..33e6cbc130
--- /dev/null
+++ b/files/de/glossary/informationsarchitektur/index.html
@@ -0,0 +1,19 @@
+---
+title: Informationsarchitektur
+slug: Glossary/Informationsarchitektur
+tags:
+  - Design
+  - Glossary
+  - User experience
+translation_of: Glossary/Information_architecture
+---
+<p><span class="seoSummary"><strong>Informationsarchitektur (IA)</strong> bezeichnet die Organisation, Strukturierung und Gestaltung von Inhalten innerhalb einer Website sowie auf einzelnen Webseiten.</span> Eine gute Informationsarchitektur ermöglicht den Nutzer*innen, die gesuchten Informationen einfach und schnell zu finden und zu nutzen; sie ist somit mitverantwortlich für das {{Glossary("UX", "Nutzungserlebnis (User Experience)")}} einer Website.</p>
+
+<h2 id="Mehr_erfahren"><strong>Mehr erfahren</strong></h2>
+
+<h3 id="Allgemeinwissen"><strong>Allgemeinwissen</strong></h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "Informationsarchitektur")}} auf Wikipedia</li>
+ <li><a href="https://www.uxbooth.com/articles/complete-beginners-guide-to-information-architecture/">Complete Beginner’s Guide to Information Architecture</a> (englischsprachiger, einführender Artikel auf uxbooth.com)</li>
+</ul>
diff --git a/files/de/glossary/internet/index.html b/files/de/glossary/internet/index.html
new file mode 100644
index 0000000000..37dc344aa9
--- /dev/null
+++ b/files/de/glossary/internet/index.html
@@ -0,0 +1,22 @@
+---
+title: Internet
+slug: Glossary/Internet
+tags:
+  - Beginner
+  - Glossary
+  - Guide
+  - Intro
+  - NeedsContent
+  - Tutorial
+  - WebMechanics
+translation_of: Glossary/Internet
+---
+<p>Das Internet ist ein weltweites Netzwerk aus Netzwerken, das die Internet-Protokollfamilie (auch bekannt als {{glossary("TCP")}}/{{glossary("IPv6","IP")}} durch ihre beiden wichtigsten {{glossary("protocol","protocols")}}) nutzt.</p>
+
+<h2 id="Mehr_lernen">Mehr lernen</h2>
+
+<h3 id="Über_das_Thema">Über das Thema</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/How_the_Internet_works">How the Internet works</a> (Einführung für Anfänger)</li>
+</ul>
diff --git a/files/de/glossary/iso/index.html b/files/de/glossary/iso/index.html
new file mode 100644
index 0000000000..f0c6fe506f
--- /dev/null
+++ b/files/de/glossary/iso/index.html
@@ -0,0 +1,21 @@
+---
+title: ISO
+slug: Glossary/ISO
+tags:
+  - Glossar
+  - ISO
+  - Infrastruktur
+  - Web Spezifikationen
+  - Web Standards
+translation_of: Glossary/ISO
+---
+<p><strong>ISO </strong>(<em>International Organization </em>for<em> Standardization</em>) ist eine Organisation, die internationale Normen vor allem im Bereich der Elektronik erarbeitet.</p>
+
+<h2 id="Erfahre_mehr">Erfahre mehr</h2>
+
+<h3 id="Allgemeinwissen">Allgemeinwissen</h3>
+
+<ul>
+ <li><a href="http://www.iso.org/iso/home.html">Offizielle Webseite</a></li>
+ <li><a href="https://de.wikipedia.org/wiki/Internationale_Organisation_f%C3%BCr_Normung">Wikipedia Artikel</a></li>
+</ul>
diff --git a/files/de/glossary/jank/index.html b/files/de/glossary/jank/index.html
new file mode 100644
index 0000000000..2932148a2c
--- /dev/null
+++ b/files/de/glossary/jank/index.html
@@ -0,0 +1,10 @@
+---
+title: Jank
+slug: Glossary/Jank
+tags:
+  - Beginner
+  - Glossar
+  - Performance
+translation_of: Glossary/Jank
+---
+<p><strong>Jank</strong> bezieht sich auf die Trägheit in einem User Interface. Diese wird normalerweise hervorgerufen durch das Ausführen von langen Aufgaben auf dem Hauptthread, blockierendes Rendering, oder durch das Aufwenden von zu viel Prozessorleistung auf Hintergrundprozesse, wie etwa unerwünschtes Bitcoin-Schürfen.</p>
diff --git a/files/de/glossary/javascript/index.html b/files/de/glossary/javascript/index.html
new file mode 100644
index 0000000000..3d6c97645f
--- /dev/null
+++ b/files/de/glossary/javascript/index.html
@@ -0,0 +1,44 @@
+---
+title: JavaScript
+slug: Glossary/JavaScript
+tags:
+  - Glossar
+  - JavaScript
+translation_of: Glossary/JavaScript
+---
+<p><strong>JavaScript</strong> (JS) ist eine meist clientseitig genutzte Programmiersprache um dynamische Webseiten zu erzeugen. Mittlerweile wird sie dank Paketen wie <a href="http://nodejs.org/" rel="external">Node.js</a> auch immer mehr {{Glossary("server")}}seitig eingesetzt.</p>
+
+<p>JavaScript sollte nicht mit Java verwechselt werden. (<a href="/de/docs/Web/JavaScript/Guide/Einführung#JavaScript_and_Java">weitere Informationen</a>). Zwar sind beides Handelsmarken, ® , oder eingetragene Warenzeichen,  ™ , der Firma Oracle in den Vereinigten Staaten von Amerika und anderen Ländern, sie weisen aber sehr unterschiedliche Syntax, Semantik und Anwendungsfälle auf.</p>
+
+<p>JavaScript kam im September 1995 in den {{Glossary("Netscape Navigator")}} 2.0, obwohl es vom Entwickler zunächst als Server-seitige Sprache konzipiert war. JavaScript wurde schnell bekannt und der {{glossary("Microsoft Internet Explorer", "Internet Explorer")}} 3.0 unterstützte ab dem August 1996 JavaScript als so genanntes {{interwiki("wikipedia","JScript")}}.</p>
+
+<p>Im November 1996 begann Netscape gemeinsam mit {{Glossary("ECMA","ECMA International")}} daran zu arbeiten JavaScript zu einem Industriestandard zu machen. Seit dem wird das standardisierte JavaScript {{Glossary("ECMAScript")}} genannt und ist verfügbar unter ECMA-262, dessen neueste Version (Version 10, ES2019) im Juni 2019 erschien. </p>
+
+<p>JavaScript wird meistens im Browser genutzt um Seiteninhalte mittels des {{Glossary("DOM")}} zu manipulieren, Daten mit {{Glossary("AJAX")}} zu laden, mit {{Glossary("IndexedDB")}} zu verwalten, Grafiken mit {{Glossary("canvas","Canvas")}} zu erstellen, mit dem Gerät, das die Seite geöffnet hat durch {{Glossary("API","APIs")}} zu kommunizieren und so weiter. JavaScript ist eine der weltweit am meisten genutzten Sprachen, auch dadurch, dass verschiedene in den {{Glossary("Browser","Browsern")}} verfügbare APIs bedeutende Performance-Verbesserungen bringen.</p>
+
+<p>Vor einiger Zeit kehrte JavaScript zur Server-seitigen Programmierung zurück, dank <a href="http://nodejs.org/" rel="external">Node.js</a>, der bekanntesten plattfromübergreifenden JavaScript Umgebung. Node.js ermöglicht es Aufgaben auf Computern zu automatisieren und {{Glossary("HTTP")}} oder {{Glossary("Web Sockets","Web Socket")}} Server zu erstellen.</p>
+
+<h2 id="Mehr_erfahren">Mehr erfahren</h2>
+
+<h3 id="Allgemein">Allgemein</h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "JavaScript")}} auf Wikipedia</li>
+</ul>
+
+<h3 id="JavaScript_lernen">JavaScript lernen</h3>
+
+<ul>
+ <li><a href="de/docs/Web/JavaScript/Guide">JavaScript Guide bei MDN</a></li>
+ <li><a href="http://nodeschool.io/#workshoppers">The "javascripting" workshop on NodeSchool</a> (englisch)</li>
+ <li><a href="http://www.codecademy.com/tracks/javascript" rel="external">The JavaScript course on codecademy.com</a> (englisch)</li>
+ <li><a href="http://ejohn.org/apps/learn/" rel="external">John Resig's Learning Advanced JavaScript</a> (englisch)</li>
+</ul>
+
+<h3 id="Technisches">Technisches</h3>
+
+<ul>
+ <li><a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm" rel="external">The latest ECMAScript standard</a>  (englisch)</li>
+ <li>The {{Link("/de/docs/Web/JavaScript/reference")}} bei MDN</li>
+ <li><a href="http://eloquentjavascript.net/" rel="external">The <em>Eloquent JavaScript</em> book</a>  (englisch)</li>
+</ul>
diff --git a/files/de/glossary/jpeg/index.html b/files/de/glossary/jpeg/index.html
new file mode 100644
index 0000000000..fa83b75a31
--- /dev/null
+++ b/files/de/glossary/jpeg/index.html
@@ -0,0 +1,17 @@
+---
+title: JPEG
+slug: Glossary/jpeg
+tags:
+  - Glossary
+  - Media
+translation_of: Glossary/jpeg
+---
+<p><strong>JPEG</strong> (Joint Photographic Experts Group, dt. etwa „Gemeinsame Fotografie-Expertengruppe“) ist ein im Web weit verbreitetes Bildformat, das überwiegend eine verlustbehaftete Komprimierung verwendet.</p>
+
+<h2 id="Mehr_erfahren"><strong>Mehr erfahren</strong></h2>
+
+<h3 id="Allgemeinwissen"><strong>Allgemeinwissen</strong></h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "JPEG")}} auf Wikipedia</li>
+</ul>
diff --git a/files/de/glossary/json/index.html b/files/de/glossary/json/index.html
new file mode 100644
index 0000000000..ef8c66fd00
--- /dev/null
+++ b/files/de/glossary/json/index.html
@@ -0,0 +1,28 @@
+---
+title: JSON
+slug: Glossary/JSON
+tags:
+  - Glossar
+  - Intro
+  - JSON
+translation_of: Glossary/JSON
+---
+<p><strong>JSON</strong><em> </em>(JavaScript Object Notation) ist ein Datenaustauschformat. Obwohl es nicht direkt Teil von {{Glossary("JavaScript")}} ist, benutzt es eine ähnliche Syntax. Da viele Programmiersprachen mit JSON arbeiten können, ist es besonders nützlich für JavaScript-basierte Apps, wie zum Beispiel Webseiten oder {{Glossary("Browser")}}erweiterungen.</p>
+
+<p>In JSON können {{Glossary("Number","Zahlen")}}, {{Glossary("Boolean","Booleans")}}, {{Glossary("String","Strings")}}, <code>{{Glossary("null","null")}}</code>, {{Glossary("Array","Arrays")}} (geordnete Abfolgen von {{Glossary("Value","Werten")}}) und {{Glossary("Object","Objekte")}} (String-Wert-Sammlungen), die aus ebendiesen Werten bestehen können, verwendet werden.  JSON unterstützt für sich keine komplexeren {{Glossary("Data structure","Datenstrukturen")}}, wie {{Glossary("Function","Funktionen")}}, {{Glossary("Regular expression","reguläre Ausdrücke")}} und ähnliche. (Datumsobjekte werden zu einem String im {{Glossary("ISO")}}-Format, sodass die Informationen nicht vollständig verloren gehen). Wenn JSON andere {{Glossary("Type","Datentypen")}} unterstützen soll, müssen diese während der Transformation oder vor der Transformation umgewandelt werden.</p>
+
+<p>Wie {{Glossary("XML")}} hat auch JSON die Eigenschaft, Daten hierarchisch speichern zu können, ganz im Gegensatz zu CSV.  Viele Tools bieten die Möglichkeit zwischen diesen Formaten zu konvertieren wie dieser <a href="https://json-csv.com">JSON to CSV Converter</a>.</p>
+
+<h2 id="Mehr_erfahren">Mehr erfahren</h2>
+
+<h3 id="Allgemeines">Allgemeines</h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "JSON")}} auf Wikipedia</li>
+</ul>
+
+<h3 id="Technisches">Technisches</h3>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON Objekt</a> bei MDN</li>
+</ul>
diff --git a/files/de/glossary/klasse/index.html b/files/de/glossary/klasse/index.html
new file mode 100644
index 0000000000..0148e61387
--- /dev/null
+++ b/files/de/glossary/klasse/index.html
@@ -0,0 +1,20 @@
+---
+title: Klasse
+slug: Glossary/Klasse
+tags:
+  - CodingScripting
+  - Glossary
+translation_of: Glossary/Class
+---
+<p>In der {{glossary("OOP","objektorientierten Programmierung")}} definiert eine <em>Klasse</em> die Charakteristiken eines {{glossary("object","Objekts")}}. Eine Klasse ist eine Entwurfsdefinition der {{glossary("property","Eigenschaften")}} und {{glossary("method","Methoden")}} eines Objekts, der "Plan", von dem andere spezifischere Instanzen des Objekts abgeleitet werden.</p>
+
+<h2 id="Mehr_dazu">Mehr dazu</h2>
+
+<h3 id="Allgemeinwissen">Allgemeinwissen</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-based_vs._prototype-based_languages">Klassenbasierte vs. prototypbasierte Programmiersprachen</a> (wie JavaScript) (Englisch)</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript#The_Class">Nutzung von Funktion als Klassen in JavaScript </a>(Englisch)</li>
+ <li><a href="https://en.wikipedia.org/wiki/Class-based_programming">Class-based programming</a> auf Wikipedia (Englisch)</li>
+ <li><a href="https://de.wikipedia.org/wiki/Objektorientierte_Programmierung">Objektorientierte Programmierung</a> auf Wikipedia</li>
+</ul>
diff --git a/files/de/glossary/konstruktor/index.html b/files/de/glossary/konstruktor/index.html
new file mode 100644
index 0000000000..7c719b55ea
--- /dev/null
+++ b/files/de/glossary/konstruktor/index.html
@@ -0,0 +1,47 @@
+---
+title: Konstruktor
+slug: Glossary/Konstruktor
+translation_of: Glossary/Constructor
+---
+<p>Ein <strong>Konstruktor</strong> gehört zu einer Instanz eines bestimmten Klassen-{{glossary("object","Objekts")}}.</p>
+
+<p>Der Konstrutktor instanziiert dieses Objekt und bietet Zugriff auf seine privaten Informationen. Das Konzept des Konstruktors findet in den meisten {{glossary("OOP","Objekt-orientierten Programmiersprachen")}} Anwendung. Im Allgemeinen wird ein Konstruktor in {{glossary("JavaScript")}} in der Instanz einer {{glossary("class","Klasse")}} deklariert.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">// This is a generic default constructor class Default
+function Default() {
+}
+
+// This is an overloaded constructor class Overloaded
+// with parameter arguments
+function Overloaded(arg1, arg2, ...,argN){
+}
+</pre>
+
+<p>Um einen Konstruktor aufzurufen, verwenden Sie den <code>new</code> operator, welcher einer {{glossary("variable","Variable")}} eine neue {{glossary("object reference","Objekt-Referenz")}} zuweist.</p>
+
+<pre class="brush: js">function Default() {
+}
+
+// A new reference of a Default object assigned to a
+// local variable defaultReference
+var defaultReference = new Default();
+</pre>
+
+<p> </p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<h3 id="Generelles_Wissen">Generelles Wissen</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Constructor_%28object-oriented_programming%29", "Konstruktor")}} auf Wikipedia</li>
+</ul>
+
+<h3 id="Technische_Referenz">Technische Referenz</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript#The_Constructor">The constructor in object oriented programming for JavaScript</a> on MDN</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">New operator in JavaScript</a> on MDN</li>
+</ul>
diff --git a/files/de/glossary/leeres_element/index.html b/files/de/glossary/leeres_element/index.html
new file mode 100644
index 0000000000..fd95ef05a6
--- /dev/null
+++ b/files/de/glossary/leeres_element/index.html
@@ -0,0 +1,34 @@
+---
+title: Leeres Element
+slug: Glossary/Leeres_Element
+tags:
+  - CodingScripting
+  - Fortgeschritten
+  - Glossar
+translation_of: Glossary/Empty_element
+---
+<p>Ein <strong>Leeres Element</strong> ist ein {{Glossary("Element")}} aus HTML, SVG oder MathML, welches <strong>keine untergeordneten Elemente</strong> besitzen kann.</p>
+
+<p>Die Spezifikationen von <a href="https://html.spec.whatwg.org/multipage/">HTML</a>, <a href="https://www.w3.org/TR/SVG2/">SVG</a>, und <a href="https://www.w3.org/TR/MathML3/">MathML</a> geben sehr genau vor, welches Element was beinhalten kann. Viele Kombinationen ergeben keinen Sinn, zum Beispiel ein {{HTMLElement("audio")}} Element innerhalb eines {{HTMLElement("hr")}} Elements.</p>
+
+<p>In HTML ist es ungültig, solche Elemente zu schließen. Ein Beispiel: <code>&lt;input type="text"&gt;&lt;/input&gt;</code> ist in HTML ungültig.</p>
+
+<p>Die folgenden Elemente sind <strong>leere Elemente</strong>:</p>
+
+<ul>
+ <li>{{HTMLElement("area")}}</li>
+ <li>{{HTMLElement("base")}}</li>
+ <li>{{HTMLElement("br")}}</li>
+ <li>{{HTMLElement("col")}}</li>
+ <li>{{HTMLElement("embed")}}</li>
+ <li>{{HTMLElement("hr")}}</li>
+ <li>{{HTMLElement("img")}}</li>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{HTMLElement("keygen")}}(HTML 5.2 Entwurf entfernt)</li>
+ <li>{{HTMLElement("link")}}</li>
+ <li>{{HTMLElement("meta")}}</li>
+ <li>{{HTMLElement("param")}}</li>
+ <li>{{HTMLElement("source")}}</li>
+ <li>{{HTMLElement("track")}}</li>
+ <li>{{HTMLElement("wbr")}}</li>
+</ul>
diff --git a/files/de/glossary/local_scope/index.html b/files/de/glossary/local_scope/index.html
new file mode 100644
index 0000000000..16a2fa8249
--- /dev/null
+++ b/files/de/glossary/local_scope/index.html
@@ -0,0 +1,19 @@
+---
+title: Local scope
+slug: Glossary/Local_scope
+tags:
+  - Geltungsbereich
+  - Locale
+  - Locale Scope
+  - Lokaler Geltungsbereich
+translation_of: Glossary/Local_scope
+---
+<p>Der Local scope – lokale Geltungsbereich - ist das Merkmal, das {{glossary("variable","variables")}} - Variablen -, zu lokalen Variablen macht, d.h. ihr Variablennamen ist nur innerhalb eines bestimmten Geltungsbereiches an seinen jeweiligen {{glossary("value")}} /Wert gebunden.</p>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<h3 id="General_knowledge">General knowledge</h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "Scope (computer science)", "Scope")}} on Wikipedia</li>
+</ul>
diff --git a/files/de/glossary/local_variable/index.html b/files/de/glossary/local_variable/index.html
new file mode 100644
index 0000000000..d0fcecb97b
--- /dev/null
+++ b/files/de/glossary/local_variable/index.html
@@ -0,0 +1,29 @@
+---
+title: Local variable
+slug: Glossary/Local_variable
+tags:
+  - Gültigkeitsbereich
+  - Locale variable
+  - Lokale Variable
+translation_of: Glossary/Local_variable
+---
+<p>Eine {{glossary("variable")}} deren Namen an ihren  {{glossary("value")}} – Wert – nur innerhalb eines {{Glossary("local scope")}} – lokalen Gültigkeitsbereichs – gebunden ist.</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">var global = 5; //ist eine globale Variable
+
+function fun(){
+    var local = 10; //ist eine lokale Variable
+}
+</pre>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li>General knowledge
+  <ol>
+   <li>{{interwiki("wikipedia", "Local variable", "Local variable")}} on Wikipedia</li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/de/glossary/middleware/index.html b/files/de/glossary/middleware/index.html
new file mode 100644
index 0000000000..10ca888536
--- /dev/null
+++ b/files/de/glossary/middleware/index.html
@@ -0,0 +1,16 @@
+---
+title: Middleware
+slug: Glossary/Middleware
+translation_of: Glossary/Middleware
+---
+<p>Middleware ist ein ( lose definierter) Begriff für jede Software oder Service, die es den Teilen eines Systems ermöglicht, miteinander zu kommunizieren und Daten zu verwalten. Es ist die Software, die die Kommunikation zwischen den Komponenten und die Ein- und Ausgabe handhabt, so dass sich die Entwickler auf den spezifischen Zweck ihrer Anwendung konzentrieren können. </p>
+
+<p>In server-seitigen Webanwendungs-Frameworks wird der Begriff oft spezifischer verwendet, um sich auf vorgefertigte Softwarekomponenten zu beziehen, die der Anfrage/Antwort-Verarbeitungspipeline des Frameworks hinzugefügt werden können, um Aufgaben wie den Datenbankzugriff zu erledigen.</p>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<h3 id="General_knowledge">General knowledge</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Middleware", "Middleware")}} on Wikipedia</li>
+</ul>
diff --git a/files/de/glossary/mime_type/index.html b/files/de/glossary/mime_type/index.html
new file mode 100644
index 0000000000..bba33994f8
--- /dev/null
+++ b/files/de/glossary/mime_type/index.html
@@ -0,0 +1,27 @@
+---
+title: MIME type
+slug: Glossary/MIME_type
+tags:
+  - Glossar
+  - WebMechaniken
+translation_of: Glossary/MIME_type
+---
+<p>Ein <strong>MIME-Typ </strong>(nun treffenderweise "Medientyp" genannt, jedoch manchmal auch "Inhaltstyp") ist ein eine Zeichenkette (String), welcher zusammen mit einer Datei versendet wird, um deren Dateityp zu kennzeichnen. (So wird das Format des Inhalts erläutert; etwa kann eine Audiodatei als <code>audio/ogg</code>, oder eine Bilddatei als <code>image/png</code> ausgezeichnet sein.)</p>
+
+<p>Er dient dem gleichen Zweck, den Dateiendungen traditionellerweise auf Windows erfüllen. Der Name stammt vom  <a href="/en-US/docs/Glossary/mime">MIME</a> Standard, welcher ursprünglich in E-Mails verwendet wurde; "<em>Multipurpose Internet Mail Extensions</em>“.</p>
+
+<h2 id="Erfahre_mehr">Erfahre mehr</h2>
+
+<h3 id="Allgemeines">Allgemeines</h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "Internet media type", "Internet media type")}} auf Wikipedia</li>
+</ul>
+
+<h3 id="Technische_Referenzen">Technische Referenzen</h3>
+
+<ul>
+ <li><a href="http://www.iana.org/assignments/media-types/media-types.xhtml">Liste der MIME-Typen</a></li>
+ <li><a href="/en-US/docs/Properly_Configuring_Server_MIME_Types">MIME-Typen auf einem Server richtig konfigurieren</a></li>
+ <li>Detaillierte Informationen zur Verwendung von <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME-Typen</a> in einem Web-Kontext.</li>
+</ul>
diff --git a/files/de/glossary/mixin/index.html b/files/de/glossary/mixin/index.html
new file mode 100644
index 0000000000..44c89a9f24
--- /dev/null
+++ b/files/de/glossary/mixin/index.html
@@ -0,0 +1,21 @@
+---
+title: Mixin
+slug: Glossary/Mixin
+tags:
+  - Glossary
+  - Mixin
+translation_of: Glossary/Mixin
+---
+<p><span class="seoSummary">Ein <em>Mixin</em> ist eine {{Glossary("class","Klasse")}} oder eine {{Glossary("interface","Schnittstelle")}} in der einige oder alle ihrer {{Glossary("method", "Methoden")}} und/oder {{Glossary("property", "Eigenschaften")}} nicht implementiert werden, was erfordert, dass eine andere {{Glossary("class","Klasse")}} oder {{Glossary("interface","Schnittstelle")}} die fehlenden Implementierungen bereitstellt.</span> Die neue Klasse bzw. die neue Schnittstelle enthält dann sowohl die Eigenschaften und Methoden aus dem Mixin als auch diejenigen, die sie selbst definiert. Alle Methoden und Eigenschaften werden exakt gleich verwendet, unabhängig davon, ob sie im Mixin implementiert sind oder im Interface oder in der Klasse, die das Mixin implementiert.</p>
+
+<p>Der Vorteil von Mixins besteht darin, dass sie zur Vereinfachung des Designs von APIs verwendet werden können, bei denen mehrere Schnittstellen dieselben Methoden und Eigenschaften enthalten müssen.</p>
+
+<p>Zum Beispiel wird das Mixin {{domxref("WindowOrWorkerGlobalScope")}}} verwendet, um Methoden und Eigenschaften zur Verfügung zu stellen, die sowohl auf den Schnittstellen {{domxref("Window")}} als auch {{domxref("WorkerGlobalScope")}}} verfügbar sein müssen. Das Mixin wird von beiden Schnittstellen implementiert.</p>
+
+<h2 id="Erfahre_mehr">Erfahre mehr</h2>
+
+<h3 id="Allgemeines_Wissen">Allgemeines Wissen</h3>
+
+<ul>
+ <li><a class="external external-icon" href="https://de.wikipedia.org/wiki/Mixin">Mixin</a> in Wikipedia</li>
+</ul>
diff --git a/files/de/glossary/mozilla_firefox/index.html b/files/de/glossary/mozilla_firefox/index.html
new file mode 100644
index 0000000000..17090d5dd4
--- /dev/null
+++ b/files/de/glossary/mozilla_firefox/index.html
@@ -0,0 +1,29 @@
+---
+title: Mozilla Firefox
+slug: Glossary/Mozilla_Firefox
+tags:
+  - Browser
+  - Firefox
+  - Glossary
+  - Infrastructure
+  - Mozilla
+  - Mozilla Firefox
+translation_of: Glossary/Mozilla_Firefox
+---
+<p>Mozilla Firefox <span style="line-height: 1.5;">ist ein kostenloser Open-Source-{{Glossary("browser")}}, dessen Entwicklung von der Mozilla Corporation überwacht wird. Firefox läuft unter Windows, OS X, Linux und Android.</span></p>
+
+<p><span style="line-height: 1.5;">Erstmals im November 2004 veröffentlicht, ist Firefox mit Themes, Plug-ins und <a href="https://developer.mozilla.org/en-US/Add-ons">add-ons </a>vollständig an Benutzerbedürfnisse anpassbar. Firefox nutzt {{glossary("Gecko")}} um Websiten zu rendern und implementiert sowohl aktuelle, als auch demnächst anzuwendende Webstandards.</span></p>
+
+<h2 id="Erfahren_Sie_mehr"><span style="line-height: 1.5;">Erfahren Sie mehr</span></h2>
+
+<h3 id="Grundlegendes_Wissen">Grundlegendes Wissen</h3>
+
+<ul>
+ <li><a href="https://www.firefox.com/">Offizielle Seite von Mozilla Firefox</a></li>
+</ul>
+
+<h3 id="Technische_Referenzen">Technische Referenzen</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/Firefox">Documentation/developer info on MDN</a></li>
+</ul>
diff --git a/files/de/glossary/namespace/index.html b/files/de/glossary/namespace/index.html
new file mode 100644
index 0000000000..218600b1ad
--- /dev/null
+++ b/files/de/glossary/namespace/index.html
@@ -0,0 +1,18 @@
+---
+title: Namespace
+slug: Glossary/Namespace
+tags:
+  - Namensraum
+translation_of: Glossary/Namespace
+---
+<p>Namespace - deutsch auch Namensraum - ist der Kontext für Bezeichner, eine logische Gruppierung von Namen, die innerhalb eines Programms benutzt werden. Innerhalb desselben Kontexts und Scopes/Gültigkeitsbereiches muss ein Bezeichner eine Einheit eindeutig identifizieren.</p>
+
+<p>Bezogen auf ein Betriebssystem ist ein Verzeichnis ein Namensraum. Jede Datei und jedes Unterverzeichnis erhalten einen eindeutigen Namen, wobei eine Datei den gleichen Namen mehrfach verwenden kann.</p>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<h3 id="General_knowledge"><strong>General knowledge</strong></h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Namespace")}} on Wikipedia</li>
+</ul>
diff --git a/files/de/glossary/node.js/index.html b/files/de/glossary/node.js/index.html
new file mode 100644
index 0000000000..8d9676d534
--- /dev/null
+++ b/files/de/glossary/node.js/index.html
@@ -0,0 +1,29 @@
+---
+title: Node.js
+slug: Glossary/Node.js
+tags:
+  - Glossar
+  - Infrastruktur
+  - JavaScript
+  - node.js
+translation_of: Glossary/Node.js
+---
+<p>Node.js ist eine platformübergreifendes {{Glossary("JavaScript")}}-Runtime-Environment (<em>Laufzeitumgebung</em>), die es Entwicklern ermöglicht, serverseitige Anwendungen und Netzwerkanwendungen mit JavaScript zu erstellen.</p>
+
+<h2 id="Erfahren_Sie_mehr">Erfahren Sie mehr</h2>
+
+<h3 id="Grundlagenwissen">Grundlagenwissen</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Node.js")}} bei Wikipedia</li>
+ <li><a href="https://nodejs.org/">Node.js Website</a></li>
+</ul>
+
+<h3 id="Technische_Informationen">Technische Informationen</h3>
+
+<ul>
+ <li><a href="https://nodejs.org/api/">API-Referenz Dokumentation</a></li>
+ <li><a href="https://nodejs.org/documentation/tutorials/">Tutorials</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/de/glossary/null/index.html b/files/de/glossary/null/index.html
new file mode 100644
index 0000000000..625c61d2f5
--- /dev/null
+++ b/files/de/glossary/null/index.html
@@ -0,0 +1,23 @@
+---
+title: 'Null'
+slug: Glossary/Null
+translation_of: Glossary/Null
+---
+<p>In der Informatik stellt der <strong><code>null</code></strong> Wert eine Referenz dar, die zu einem fehlenden oder ungültigen {{Glossary("object","Objekt")}} oder Adresse zeigt. Die Bedeutung der null Referenz ist von Sprache zu Sprache unterschiedlich.</p>
+
+<p>In {{Glossary("JavaScript")}} ist null einer der {{Glossary("Primitive", "primitiven Datentypen")}}.</p>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<h3 id="General_knowledge">General knowledge</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Null pointer")}} auf Wikipedia</li>
+</ul>
+
+<h3 id="Technical_reference">Technical reference</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Data_structures">Datentypen und Datenstrukturen in JavaScript</a></li>
+ <li>Das Globale Object: {{jsxref("null")}}</li>
+</ul>
diff --git a/files/de/glossary/number/index.html b/files/de/glossary/number/index.html
new file mode 100644
index 0000000000..732029c79b
--- /dev/null
+++ b/files/de/glossary/number/index.html
@@ -0,0 +1,23 @@
+---
+title: Number
+slug: Glossary/Number
+translation_of: Glossary/Number
+---
+<p>In {{Glossary("JavaScript")}} ist <strong>Number</strong> ein numerischer {{Glossary("Type","Datentyp")}} im <a class="external external-icon" href="http://en.wikipedia.org/wiki/Double_precision_floating-point_format">double-precision 64-bit floating point format (IEEE 754)</a>. In anderen Programmiersprachen können verschiedene numerische Typen existieren, wie zum Beispiel Integer, Float, Double oder Bignum.</p>
+
+<h2 id="Mehr_erfahren">Mehr erfahren</h2>
+
+<h3 id="Allgemienes">Allgemienes</h3>
+
+<ul>
+ <li>
+  <p><span>{{Interwiki("wikipedia", "Datentyp#Elementare_Datentypen", "Numerische Datentypen")}} auf Wikipedia</span></p>
+ </li>
+</ul>
+
+<h3 id="Technical_reference">Technical reference</h3>
+
+<ul>
+ <li>Die JavaScript {{Glossary("Data Structure","Datenstruktur")}}: <a href="/de/docs/Web/JavaScript/Data_structures#Number_type">Number</a></li>
+ <li>Das globale {{jsxref("Number")}} Objekt in JavaScript</li>
+</ul>
diff --git a/files/de/glossary/objekt/index.html b/files/de/glossary/objekt/index.html
new file mode 100644
index 0000000000..19b2f9f3d9
--- /dev/null
+++ b/files/de/glossary/objekt/index.html
@@ -0,0 +1,20 @@
+---
+title: Objekt
+slug: Glossary/Objekt
+tags:
+  - Einführung
+  - Objekt
+  - Objektorientierte Programmierung
+translation_of: Glossary/Object
+---
+<p>Ein Objekt bezieht sich auf eine Datenstruktur welche Daten und Anweisungen beinhaltet. Objekte stellen manchmal Gegenstände aus der echten Welt dar, wie zum Beispiel ein Auto oder eine Karte in einem Rennspiel. {{glossary("JavaScript")}}, Java, C++, Python und Ruby sind Beispiele für  {{glossary("OOP","Objektorientierte Programmiersprachen")}}.</p>
+
+<h2 id="Lerne_mehr">Lerne mehr</h2>
+
+<h3 id="Grundlegendes_Wissen">Grundlegendes Wissen</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Objektorientierte Programmierung")}} auf Wikipedia</li>
+ <li>{{jsxref("Objekt")}} im Bezug auf JavaScript</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Objects">Die Datenstruktur "Objekt" in JavaScript</a></li>
+</ul>
diff --git a/files/de/glossary/oop/index.html b/files/de/glossary/oop/index.html
new file mode 100644
index 0000000000..8360565450
--- /dev/null
+++ b/files/de/glossary/oop/index.html
@@ -0,0 +1,21 @@
+---
+title: OOP
+slug: Glossary/OOP
+tags:
+  - Anfänger
+  - Glossar
+  - Übersicht
+translation_of: Glossary/OOP
+---
+<p><strong>OOP </strong>(Objekt-Orientierte Programmierung) ist ein Ansatz der Programmierung in dem Daten verkapselt hinterlegt werden mit <strong>{{glossary("object","objects")}}</strong>, wobei das Objekt selbst bearbeitet wird und nicht seine einzelnen Bestandteile.</p>
+
+<p>{{glossary("JavaScript")}} ist sehr stark nach den Bestimmungen von OOP aufgebaut. Es basiert auf dem <strong>Prototype</strong>-basierten Modell (im Gegensatz <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-based_vs._prototype-based_languages">zu Klassenbasierten</a>).</p>
+
+<h2 id="Mehr_Informationen">Mehr Informationen</h2>
+
+<h3 id="Allgemeines_Wissen">Allgemeines Wissen</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Object-oriented programming")}} auf Wikipedia</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">Anleitung zu Objekt-Orientierten JavaScript</a></li>
+</ul>
diff --git a/files/de/glossary/operand/index.html b/files/de/glossary/operand/index.html
new file mode 100644
index 0000000000..4340c67e3b
--- /dev/null
+++ b/files/de/glossary/operand/index.html
@@ -0,0 +1,14 @@
+---
+title: Operand
+slug: Glossary/Operand
+tags:
+  - Operand
+translation_of: Glossary/Operand
+---
+<p>Operand nennt man den Teil einer Anweisung, der für die Daten steht, die vom {{glossary("operator")}} bearbeitet werden. Wenn Du beispielsweise zwei Zahlen addierst, sind die Zahlen die Operanden und das "+" ist der Operator.</p>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Operand")}} on Wikipedia</li>
+</ul>
diff --git a/files/de/glossary/operator/index.html b/files/de/glossary/operator/index.html
new file mode 100644
index 0000000000..16758b5526
--- /dev/null
+++ b/files/de/glossary/operator/index.html
@@ -0,0 +1,22 @@
+---
+title: Operator
+slug: Glossary/Operator
+tags:
+  - Operator
+translation_of: Glossary/Operator
+---
+<p>Syntax bestehend aus Interpunktion oder alphanumerischen Satzzeichen, die einer integrierten Funktionalität vorbehalten ist.  Beispielsweise summiert der Additionsoperator ("+") in JavaScript Zahlen auf oder verkettet Strings, wohingegen der “Not-Operator” ("!") einen Ausdruck in sein Gegenteil verkehrt – also z.B. dazu führt, dass ein <code>true</code>-Statement <code>false</code> zurückgibt.</p>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<h3 id="General_knowledge">General knowledge</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Operator (computer programming)")}} on Wikipedia</li>
+</ul>
+
+<h3 id="Technical_reference">Technical reference</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators">JavaScript operators</a></li>
+</ul>
diff --git a/files/de/glossary/php/index.html b/files/de/glossary/php/index.html
new file mode 100644
index 0000000000..8ad2e03fbd
--- /dev/null
+++ b/files/de/glossary/php/index.html
@@ -0,0 +1,15 @@
+---
+title: PHP
+slug: Glossary/PHP
+translation_of: Glossary/PHP
+---
+<p>PHP ist eine {{Glossary("server")}}seitige Scriptsprache zur Entwicklung von webbasierten Anwendungen und dynamischen Webseiten.</p>
+
+<h2 id="Mehr_erfahren">Mehr erfahren</h2>
+
+<ul>
+ <li><a href="http://php.net/">Offizielle Webseite</a></li>
+ <li>{{Interwiki("wikipedia", "PHP")}} bei Wikipedia</li>
+ <li><a href="https://en.wikibooks.org/wiki/PHP_Programming">PHP</a> bei Wikibooks</li>
+ <li><a href="http://www.codecademy.com/tracks/php">Lerne PHP - Codecademy </a></li>
+</ul>
diff --git a/files/de/glossary/png/index.html b/files/de/glossary/png/index.html
new file mode 100644
index 0000000000..69852d31e8
--- /dev/null
+++ b/files/de/glossary/png/index.html
@@ -0,0 +1,17 @@
+---
+title: PNG
+slug: Glossary/PNG
+tags:
+  - Glossary
+  - Media
+translation_of: Glossary/PNG
+---
+<p><strong>PNG </strong>(Portable Network Graphics, dt. etwa „Portable Netzwerkgrafik“) ist ein Bildformat, das eine verlustfreie Komprimierung verwendet. Es wurde als offener Standard und als lizenzgebührenfreie Alternative zum {{Glossary("GIF")}}-Format entworfen.</p>
+
+<h2 id="Mehr_erfahren">Mehr erfahren</h2>
+
+<h3 id="Allgemeinwissen">Allgemeinwissen</h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "PNG")}} auf Wikipedia</li>
+</ul>
diff --git a/files/de/glossary/polyfill/index.html b/files/de/glossary/polyfill/index.html
new file mode 100644
index 0000000000..838443fbdf
--- /dev/null
+++ b/files/de/glossary/polyfill/index.html
@@ -0,0 +1,30 @@
+---
+title: Polyfill
+slug: Glossary/Polyfill
+tags:
+  - CSS
+  - Glossary
+  - HTML
+  - JavaScript
+translation_of: Glossary/Polyfill
+---
+<p><span class="seoSummary"><strong>Polyfill</strong> ist ein üblicherweise in {{Glossary("JavaScript")}} geschriebener Code-Baustein, der dazu dient, moderne {{Glossary("HTML")}}-, {{Glossary("CSS")}}- oder JavaScript-Funktionalitäten in älteren {{Glossary("Browser", "Browsern")}} zur Verfügung zu stellen, die diese Funktionailtät nicht von Haus aus unterstützen.</span></p>
+
+<p>Ein Polyfill könnte bspw.</p>
+
+<ul>
+ <li>die Funktion des HTML5-Elements {{HTMLElement("canvas")}} in Internet Explorer 7 (durch die Nutzung eines Silverlight-Plugins) <em>oder</em></li>
+ <li>die Unterstützung der CSS3-Einheit {{CSSxRef("length#rem", "rem")}} oder der CSS3-Eigenschaft {{CSSxRef("text-shadow")}} in Firefox 3.5 <em>oder</em></li>
+ <li>die JavaScript-Funktion {{JSxREF("Array.find()")}} in Chrome 44</li>
+</ul>
+
+<p>nachbilden.</p>
+
+<h2 id="Mehr_erfahren">Mehr erfahren</h2>
+
+<h3 id="Allgemeinwissen">Allgemeinwissen</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Polyfill")}} auf Wikipedia</li>
+ <li><a href="https://remysharp.com/2010/10/08/what-is-a-polyfill">What is a polyfill?</a> (englischsprachiger Artikel von Remy Sharp, Erfinder des Begriffs)</li>
+</ul>
diff --git a/files/de/glossary/progressive_enhancement/index.html b/files/de/glossary/progressive_enhancement/index.html
new file mode 100644
index 0000000000..624a77649c
--- /dev/null
+++ b/files/de/glossary/progressive_enhancement/index.html
@@ -0,0 +1,36 @@
+---
+title: Progressive Enhancement
+slug: Glossary/Progressive_Enhancement
+tags:
+  - Accessibility
+  - Design
+  - Glossary
+translation_of: Glossary/Progressive_Enhancement
+---
+<p><span class="seoSummary"><strong>Progressive enhancement</strong> (dt. etwa „Fortschreitende Verbesserung“) ist eine Design-Philosophie, bei der es darum geht, so vielen Nutzer*innen wie möglich die grundlegenden Inhalte und Funktionen einer Website zur Verfügung zur stellen.</span> Darüber hinaus wird Nutzer*innen mit einem modernen {{Glossary("Browser")}}, der den dafür notwendigen Code ausführen kann, das bestmögliche Erlebnis geboten.</p>
+
+<p>Üblicherweise wird durch <em>Feature detection</em> überprüft, ob der Browser die technischen Voraussetzungen erfüllt, um den „verbesserten“ Code auszuführen. Fehlende Voraussetzungen werden oft durch {{Glossary("Polyfill", "Polyfills")}} hinzugefügt. Hierbei sollte vor allem die {{Glossary("Accessibility", "Accessibility bzw. Barrierefreiheit")}} berücksichtigt und akzeptable Alternativen wo möglich bereitgestellt werden.</p>
+
+<p><em>Progressive enhancement</em> ist eine nützliche Technik, die es Webentwicklern erlaubt, sich auf die Entwicklung bestmöglicher Websites zu konzentrieren und gleichzeitig die Probleme zu berücksichtigen, die auftreten können, wenn verschiedene unbekannte {{Glossary("User agent", "User Agents")}} auf die Webseiten zugreifen.</p>
+
+<p>{{Glossary("Graceful degradation")}} ist ein verwandtes Konzept, das sich aber von Progressive enhancement unterscheidet und oft als Gegensatz dazu betrachtet wird. Tatsächlich haben beide Ansätze ihre Gültigkeit und können sich oft gegenseitig ergänzen.</p>
+
+<h2 id="Mehr_erfahren">Mehr erfahren</h2>
+
+<h3 id="Allgemeinwissen">Allgemeinwissen</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Progressive Verbesserung")}} auf Wikipedia</li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ul>
+ <li><a href="/de/docs/Glossary">Glossar</a>
+
+  <ul>
+   <li>{{Glossary("Graceful degradation")}}</li>
+   <li>{{Glossary("Polyfill")}}</li>
+  </ul>
+ </li>
+</ul>
+</section>
diff --git a/files/de/glossary/protokoll/index.html b/files/de/glossary/protokoll/index.html
new file mode 100644
index 0000000000..eb631a6a81
--- /dev/null
+++ b/files/de/glossary/protokoll/index.html
@@ -0,0 +1,21 @@
+---
+title: Protokoll
+slug: Glossary/Protokoll
+tags:
+  - Glossary
+  - Infrastructure
+  - Protocols
+translation_of: Glossary/Protocol
+---
+<p id="Summary">Ein <strong>Protokoll</strong> ist ein System aus Regeln, die festlegen wie Daten in oder zwischen Computern ausgetauscht werden. Die Kommunikation zwischen Geräten erfordert, dass die Geräte im Format der ausgetauschten Daten übereinstimmen. Der Satz an Regeln, aus dem ein Format besteht, wird Protokoll genannt.</p>
+
+<h2 id="Mehr_lernen">Mehr lernen</h2>
+
+<h3 id="Allgemeine_Vermerke">Allgemeine Vermerke</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Kommunikationsprotokoll")}} auf Wikipedia</li>
+ <li><a href="http://www.rfc-editor.org/search/standards.php">RFC Official Internet Protocol Standards</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/de/glossary/prototype-based_programming/index.html b/files/de/glossary/prototype-based_programming/index.html
new file mode 100644
index 0000000000..1c249a0991
--- /dev/null
+++ b/files/de/glossary/prototype-based_programming/index.html
@@ -0,0 +1,20 @@
+---
+title: Prototypbasierte Programmierung
+slug: Glossary/Prototype-based_programming
+tags:
+  - Classes
+  - Prototype
+translation_of: Glossary/Prototype-based_programming
+---
+<p><br>
+ <strong>Prototypbasierte Programmierung</strong> ist eine Variante der {{Glossary("OOP", "objektorientierten Programmierung")}}, bei der <em><u>keine</u></em> {{Glossary('Class', 'Klassen')}} verwendet werden. Objekte werden durch kopieren von bereits existierenden Objekten (Prototypen) erzeugt. Beim Kopieren werden alle Eigenschaften des Prototypen übernommen, diese können jedoch verändert und/oder ergänzt werden.</p>
+
+<p>Prototypbasierte Programmierung: neues Objekt =  Kopie von existierendem Objekt  {{Glossary("OOP", "objektorientierten Programmierung")}}: neues Objekt = Instanz einer Klasse</p>
+
+<h2 id="Learn_More">Learn More</h2>
+
+<h3 id="General_knowledge">General knowledge</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Prototypenbasierte Programmierung", "Prototypenbasierte Programmierung")}} in der Wikipedia</li>
+</ul>
diff --git a/files/de/glossary/prototype/index.html b/files/de/glossary/prototype/index.html
new file mode 100644
index 0000000000..745f56fcab
--- /dev/null
+++ b/files/de/glossary/prototype/index.html
@@ -0,0 +1,20 @@
+---
+title: Prototype
+slug: Glossary/Prototype
+translation_of: Glossary/Prototype
+---
+<p>Prototyp</p>
+
+<p>Ein Prototyp ist ein Modell, mit dem man schon früh im Entwicklungsprozess das Erscheinungsbild und das Verhalten einer Applikation oder eines Produktes darstellt.</p>
+
+<p>Siehe auch <a href="/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Inheritance and the prototype chain</a></p>
+
+
+
+<h2 id="Learn_more">Learn more</h2>
+
+<h3 id="General_knowledge">General knowledge</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Software Prototyping")}} on Wikipedia</li>
+</ul>
diff --git a/files/de/glossary/regular_expression/index.html b/files/de/glossary/regular_expression/index.html
new file mode 100644
index 0000000000..91df208d05
--- /dev/null
+++ b/files/de/glossary/regular_expression/index.html
@@ -0,0 +1,27 @@
+---
+title: Regulärer Ausdruck
+slug: Glossary/Regular_expression
+tags:
+  - Glossar
+  - Regulärer Ausdruck
+translation_of: Glossary/Regular_expression
+---
+<p><strong>Reguläre Ausdrücke </strong>(Abkürzung <em>regex</em>) sind Regeln, die das Resultat einer Textsuche bestimmen.</p>
+
+<p>Reguläre Ausdrücke sind in verschiedenen Sprachen implementiert, die bekannteste Implementation ist allerdings in der Sprache Perl, welche wiederum ein ganzes Ökosystem an Implementationen namens PCRE (englisch Perl Compatible Regular Expressions, übersetzt "Perl-kompatible Reguläre Ausdrücke") hervorgebracht hat. {{glossary("JavaScript")}} (englisch) bietet für das Web eine eigene RegEx-Implementation mithilfe des {{jsxref("RegExp")}}-Objektes.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<h3 id="Allgemeinwissen">Allgemeinwissen</h3>
+
+<ul>
+ <li><a href="https://de.wikipedia.org/wiki/Regul%C3%A4rer_Ausdruck">Regulärer Ausdruck</a> auf Wikipedia</li>
+ <li><a href="http://regexone.com/">Interactive tutorial</a> </li>
+ <li><a href="http://regexper.com/">Visualized Regular Expression</a> </li>
+</ul>
+
+<h3 id="Technische_Referenz">Technische Referenz</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Writing regular expressions in JavaScript</a> </li>
+</ul>
diff --git a/files/de/glossary/repo/index.html b/files/de/glossary/repo/index.html
new file mode 100644
index 0000000000..1672a3e2a5
--- /dev/null
+++ b/files/de/glossary/repo/index.html
@@ -0,0 +1,14 @@
+---
+title: Repo
+slug: Glossary/Repo
+translation_of: Glossary/Repo
+---
+<article id="wikiArticle">
+<p>In einem Versionsverwaltungssystem wie {{Glossary("Git")}} oder {{Glossary("SVN")}} ist ein Repo (Abkürzung für "repository") ein Ort, an dem der Quellcode einer Applikation sowie verschiedene Metadaten gespeichert werden.</p>
+
+<h2 id="Mehr_dazu">Mehr dazu</h2>
+
+<ul>
+ <li><a href="https://de.wikipedia.org/wiki/Repository">Repository</a> auf Wikipedia</li>
+</ul>
+</article>
diff --git a/files/de/glossary/responsive_web_design/index.html b/files/de/glossary/responsive_web_design/index.html
new file mode 100644
index 0000000000..c7af32abea
--- /dev/null
+++ b/files/de/glossary/responsive_web_design/index.html
@@ -0,0 +1,19 @@
+---
+title: Responsive web design
+slug: Glossary/Responsive_web_design
+tags:
+  - responsiv
+  - responsives Webdesign
+translation_of: Glossary/Responsive_web_design
+---
+<p><em>Responsive Web Design </em>(<strong>RWD</strong>) bezeichnet ein Konzept der Webentwicklung, das darauf ausgerichtet ist, Websites und ihr Verhalten optimal an alle PC-Geräte anzupassen, vom Desktop bis hin zu mobilen Endgeräten.</p>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<h3 id="General_knowledge">General knowledge</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web_Development/Responsive_Web_design">Summary and resources</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web_Development/Mobile/Responsive_design">Pros and cons of going responsive</a></li>
+ <li><a href="http://msdn.microsoft.com/en-us/magazine/hh653584.aspx">Responsive Web Design</a></li>
+</ul>
diff --git a/files/de/glossary/rest/index.html b/files/de/glossary/rest/index.html
new file mode 100644
index 0000000000..3beb4427a8
--- /dev/null
+++ b/files/de/glossary/rest/index.html
@@ -0,0 +1,28 @@
+---
+title: REST
+slug: Glossary/REST
+translation_of: Glossary/REST
+---
+<p>Representational State Transfer (<strong>REST</strong>) bezieht sich auf eine Gruppe von Designbeschränkungen in der Softwarearchitektur, die effiziente, zuverlässige und skalierbare verteilte Systeme bereitstellen. Ein System wird als RESTful bezeichnet, wenn es diese Einschränkungen einhält.</p>
+
+<p>Die Grundidee von REST ist, dass eine Ressource, wie z.B. ein Dokument, mit ihrem Zustand und ihren Beziehungen (Hypertext) über klar definierte, standardisierte Operationen und Formate übertragen wird. Häufig werden {{Glossary("API","API's")}} oder Dienste mit RESTful bezeichnet, wenn sie eine Art von Dokument direkt ändern, anstatt an anderer Stelle Aktionen auszulösen.</p>
+
+<p>Da {{Glossary("HTTP")}}, das Standardprotokoll im {{glossary("World Wide Web","Web")}}, auch Dokumente und Hypertextlinks überträgt, werden einfache HTTP-APIs manchmal umgangssprachlich als RESTful-APIs, RESTful-Services oder einfach REST-Services bezeichnet, obwohl sie nicht unbedingt alle REST-Beschränkungen einhalten. Anfänger können davon ausgehen, dass eine REST-API ein HTTP-Dienst ist, der über Standard-Webbibliotheken und -Werkzeuge aufgerufen werden kann.</p>
+
+<p>
+ </p><h2 id="Learn_more">Learn more</h2>
+
+
+<h3 id="Learn_about_it">Learn about it</h3>
+
+<ul>
+ <li><a href="http://www.restapitutorial.com/">restapitutorial.com</a></li>
+ <li><a href="http://restcookbook.com/">restcookbook.com</a></li>
+</ul>
+
+<h3 id="General_knowledge">General knowledge</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Representational_state_transfer", "REST")}} on Wikipedia</li>
+ <li><a href="https://www.service-architecture.com/articles/web-services/representational_state_transfer_rest.html">REST Architecture</a></li>
+</ul>
diff --git a/files/de/glossary/rgb/index.html b/files/de/glossary/rgb/index.html
new file mode 100644
index 0000000000..f94c26226a
--- /dev/null
+++ b/files/de/glossary/rgb/index.html
@@ -0,0 +1,22 @@
+---
+title: RGB
+slug: Glossary/RGB
+translation_of: Glossary/RGB
+---
+<p>RGB ist ein Farbraum Modell, das Farben beschreibt, die aus den drei Primärfarben Rot, Grün und Blau zusammengesetzt sind. Jede einzelne Farbe wird durch aufeinanderfolgenden nummerische Werte der Primärfarben repräsentiert. Diese Werte, normalerweise zwischen 0 und 255, bzw.  0 und 1, repräsentieren die Intensitäten der Primärfarben.</p>
+
+<p>Es gibt viele Möglichkeiten RGB Komponenten einer Farbe zu beschreiben. In {{Glossary("CSS")}} geschieht dies mit Hilfe der hexadezimalen Schreibweise bestehenden aus 24-Bit Integer (z.B. <code>#add8e6</code> ist Hellblau), oder in funktioneller Schreibweise bestehend aus 8-bit Integer (z.B. <code>rgb(46, 139, 87)</code> ist Seegrün). In {{Glossary("OpenGL")}}, {{Glossary("WebGL")}}, und {{Glossary("GLSL")}} werden RGB Komponenten durch Fließkommazahlen zwischen   0.0  und 1.0 beschrieben, obwohl sie im eigentlichen Farbpuffer als 8-Bit Integer repräsentiert werden.</p>
+
+<h2 id="Weiterführendes">Weiterführendes</h2>
+
+<h3 id="General_knowledge">General knowledge</h3>
+
+<ul>
+ <li><a href="https://en.wikipedia.org/wiki/RGB_color_model">RGB color model on Wikipedia</a></li>
+</ul>
+
+<h3 id="Learn_about_it">Learn about it</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/color_value">CSS data type: &lt;color&gt;</a></li>
+</ul>
diff --git a/files/de/glossary/robots.txt/index.html b/files/de/glossary/robots.txt/index.html
new file mode 100644
index 0000000000..918341a08b
--- /dev/null
+++ b/files/de/glossary/robots.txt/index.html
@@ -0,0 +1,50 @@
+---
+title: Robots.txt
+slug: Glossary/Robots.txt
+translation_of: Glossary/Robots.txt
+---
+<p>&lt;p&gt; {{HTMLSidebar ("Global_attributes")}} &lt;/ p&gt;</p>
+
+<p>  &lt;p&gt; &lt;span class = "seoSummary"&gt; Das &lt;strong&gt; translate &lt;/ strong&gt; &lt;a href="/en-US/docs/Web/HTML/Global_attributes"&gt; globale Attribut &lt;/a&gt; ist ein aufgezähltes Attribut, das  wird verwendet, um anzugeben, ob die &lt;em&gt; übersetzbaren Attributwerte &lt;/ em&gt; eines Elements und die untergeordneten Knoten {{domxref ("Text")}} beim Lokalisieren der Seite übersetzt werden sollen oder ob sie unverändert bleiben sollen. &lt;/ span  &gt; Es kann folgende Werte annehmen: &lt;/ p&gt;</p>
+
+<p>  &lt;ul&gt;<br>
+  &lt;li&gt; leere Zeichenfolge oder &lt;code&gt; "yes" &lt;/ code&gt;, die angibt, dass das Element übersetzt werden soll, wenn die Seite lokalisiert wird. &lt;/ li&gt;<br>
+  &lt;li&gt; &lt;code&gt; "no" &lt;/ code&gt; gibt an, dass das Element nicht übersetzt werden darf. &lt;/ li&gt;<br>
+   &lt;/ ul&gt;</p>
+
+<p>  &lt;p&gt; Obwohl nicht alle Browser dieses Attribut erkennen, wird es von automatischen Übersetzungssystemen wie Google Translate und möglicherweise auch von Tools, die von menschlichen Übersetzern verwendet werden, respektiert.  Aus diesem Grund ist es wichtig, dass Webautoren dieses Attribut verwenden, um Inhalte zu markieren, die nicht übersetzt werden sollen. &lt;/ P&gt;</p>
+
+<p>  &lt;h2 id = "Specifications"&gt; Spezifikationen &lt;/ h2&gt;</p>
+
+<p>  &lt;table class = "standard-table"&gt;<br>
+  &lt;tbody&gt;<br>
+  &lt;tr&gt;<br>
+  &lt;th scope = "col"&gt; Spezifikation &lt;/ th&gt;<br>
+  &lt;th scope = "col"&gt; Status &lt;/ th&gt;<br>
+  &lt;th scope = "col"&gt; Kommentar &lt;/ th&gt;<br>
+  &lt;/ tr&gt;<br>
+  &lt;tr&gt;<br>
+  &lt;td&gt; {{SpecName ('HTML WHATWG', "dom.html # attr-translate", "translate")}} &lt;/ td&gt;<br>
+  &lt;td&gt; {{Spec2 ('HTML WHATWG')}} &lt;/ td&gt;<br>
+  &lt;td&gt; Keine Änderung gegenüber dem letzten Snapshot {{SpecName ('HTML5.1')}} &lt;/ td&gt;<br>
+  &lt;/ tr&gt;<br>
+  &lt;tr&gt;<br>
+  &lt;td&gt; {{SpecName ('HTML5.1', ​​"dom.html # the-translate-attribute", "translate")}} &lt;/ td&gt;<br>
+  &lt;td&gt; {{Spec2 ('HTML5.1')}} &lt;/ td&gt;<br>
+  &lt;td&gt; Momentaufnahme von {{SpecName ('HTML WHATWG')}}, ursprüngliche Definition &lt;/ td&gt;<br>
+  &lt;/ tr&gt;<br>
+  &lt;/ tbody&gt;<br>
+   &lt;/ table&gt;</p>
+
+<p>  &lt;h2 id = "Browser_compatibility"&gt; Browserkompatibilität &lt;/ h2&gt;</p>
+
+<p>  &lt;div class = "hidden"&gt; Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert.  Wenn Sie zu den Daten beitragen möchten, lesen Sie &lt;a href="https://github.com/mdn/browser-compat-data"&gt; https://github.com/mdn/browser-compat-  Daten &lt;/a&gt; und senden Sie uns eine Pull-Anfrage. &lt;/ div&gt;</p>
+
+<p>  &lt;p&gt; {{Compat ("html.global_attributes.translate")}} &lt;/ p&gt;</p>
+
+<p>  &lt;h2 id = "See_also"&gt; Siehe auch &lt;/ h2&gt;</p>
+
+<p>  &lt;ul&gt;<br>
+  &lt;li&gt; Alle &lt;a href="/en-US/docs/Web/HTML/Global_attributes"&gt; globalen Attribute &lt;/a&gt;. &lt;/ li&gt;<br>
+  &lt;li&gt; Die Eigenschaft {{domxref ("HTMLElement.translate")}}, die dieses Attribut widerspiegelt. &lt;/ li&gt;<br>
+  &lt;li&gt; &lt;a href="https://www.w3.org/International/questions/qa-translate-flag"&gt; Verwenden des HTML-Übersetzungsattributs &lt;/a&gt;. &lt;/ li&gt;</p>
diff --git a/files/de/glossary/rss/index.html b/files/de/glossary/rss/index.html
new file mode 100644
index 0000000000..1a0d544c7b
--- /dev/null
+++ b/files/de/glossary/rss/index.html
@@ -0,0 +1,24 @@
+---
+title: RSS
+slug: Glossary/RSS
+tags:
+  - RSS
+  - Really Simple Syndication
+  - Rich Site Summary
+translation_of: Glossary/RSS
+---
+<p><strong>RSS</strong> (Really Simple Syndication) bezieht sich auf verschiedene XML-Dokumentformate, die auf die Veröffentlichung von Website-Aktualisierungen ausgerichtet sind. Wenn Du RSS-Inhalte abonnierst, schickt die entsprechende Website Informationen und Aktualisierungen an Deinen RSS Reader/Leser in einem RSS-Dokument, das sich <em>feed</em>, nennt, so dass Du nicht alle Deine bevorzugten Websites manuell prüfen musst.</p>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<h3 id="General_knowledge">General knowledge</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "RSS")}} on Wikipedia</li>
+</ul>
+
+<h3 id="Technical_reference">Technical reference</h3>
+
+<ul>
+ <li><a href="http://www.rssboard.org/rss-specification">Latest specification</a></li>
+</ul>
diff --git a/files/de/glossary/scope/index.html b/files/de/glossary/scope/index.html
new file mode 100644
index 0000000000..b8e42dee07
--- /dev/null
+++ b/files/de/glossary/scope/index.html
@@ -0,0 +1,38 @@
+---
+title: Scope
+slug: Glossary/Scope
+translation_of: Glossary/Scope
+---
+<p>Der aktuelle Ausführungskontext. D.h. der Kontext, in dem {{glossary("value","values")}} und Ausdrücke sichtbar sind oder referenziert werden können. Wenn <strong>{{glossary("variable")}}</strong> oder andere Ausdrücke nicht im aktuellen Ausführungskontext (Scope) sind, dann können sie nicht verwendet werden. Scopes können auch hierarchisch angeordnet sein, so dass darunter liegende Scopes (Child-Scopes) auf die darüberliegenden Elemente (Parent-Scopes) zugreifen können, aber nicht umgekehrt.</p>
+
+<p>Beispiel: <strong>{{glossary("function")}}</strong> dient als abgeschlossene Funktion (<strong>closure</strong>) in {{glossary("JavaScript")}}, und erzeugt so einen Scope, so dass z.B. eine Variable, die nur innerhalb der Funktion definiert wurde, außerhalb dieser Funktion oder in anderen Funktionen nicht angesprochen werden kann. Das folgende Beispiel ist deshalb fehlerhaft:</p>
+
+<pre class="syntaxbox notranslate">function exampleFunction() {
+    var x = "declared inside function";  // x can only be used in exampleFunction
+    console.log("Inside function");
+    console.log(x);
+}
+
+console.log(x);  // Causes error</pre>
+
+<p>Der folgende Code funktioniert jedoch, da die Variable außerhalb der Funktion deklariert wurde und somit global verfügbar ist:</p>
+
+<pre class="syntaxbox notranslate">var x = "declared outside function";
+
+exampleFunction();
+
+function exampleFunction() {
+    console.log("Inside function");
+    console.log(x);
+}
+
+console.log("Outside function");
+console.log(x);</pre>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<h3 id="General_knowledge">General knowledge</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Scope (computer science)")}} on Wikipedia</li>
+</ul>
diff --git a/files/de/glossary/server/index.html b/files/de/glossary/server/index.html
new file mode 100644
index 0000000000..697baf1ac8
--- /dev/null
+++ b/files/de/glossary/server/index.html
@@ -0,0 +1,24 @@
+---
+title: Server
+slug: Glossary/Server
+tags:
+  - Glossar
+  - Infrastruktur
+  - Netzwerk
+  - Protokoll
+  - Server
+translation_of: Glossary/Server
+---
+<p>Ein Hardware-Server ist ein in einem Netzwerk freigegebener Computer, der Clients Dienste zur Verfügung stellt. Ein Software-Server ist ein Programm, das Client-Programmen Dienste bietet.</p>
+
+<p>Die Dienste werden im Allgemeinen für <em>LAN</em>s (local area network) oder <em>WAN</em>s (wide area network)<em> </em>angeboten.</p>
+
+<p>Die verbreitetsten Server in lokalen Netzwerken sind Datei-, Domainname-, E-Mail-, Drucker- oder Fax-Server. Ein weitere wichtige Art stellt der mit dem Internet verbundene Web-Server dar. Kleinrechner und Großrechner in Rechenzentren sind ebenfalls Server.</p>
+
+<h2 id="Mehr_erfahren"><strong>Mehr erfahren</strong></h2>
+
+<h3 id="Allgemeinwissen">Allgemeinwissen</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Server")}} bei Wikipedia</li>
+</ul>
diff --git a/files/de/glossary/sloppy_mode/index.html b/files/de/glossary/sloppy_mode/index.html
new file mode 100644
index 0000000000..51077019a3
--- /dev/null
+++ b/files/de/glossary/sloppy_mode/index.html
@@ -0,0 +1,16 @@
+---
+title: Sloppy mode
+slug: Glossary/Sloppy_mode
+translation_of: Glossary/Sloppy_mode
+---
+<p>In {{Glossary("ECMAScript")}} 5 und neuer können Skripte in einen strikten Modus wechseln, der die Semantik von JavaScript in vielerlei Hinsicht ändert, um Code robuster und einfacher nachvollziehbar zu machen, falls es zu Problemen kommt.</p>
+
+<p>Der normale, nicht-strikte Modus von JavaScript wird manchmal auch <strong>sloppy mode</strong> (schlampiger Modus) genannt. Dies ist zwar keine offizielle Bezeichnung, Sie werden aber vermutlich häufiger darauf stoßen, wenn Sie sich eingehender mit JavaScript beschäftigen.</p>
+
+<h2 id="Erfahren_Sie_mehr">Erfahren Sie mehr</h2>
+
+<h3 id="Grundwissen">Grundwissen</h3>
+
+<ul>
+ <li>"<a href="http://speakingjs.com/es5/ch07.html#strict_mode">Strict Mode</a>" in Kapitel 7 ("JavaScript Syntax") aus dem Buch <em>Speaking JavaScript</em></li>
+</ul>
diff --git a/files/de/glossary/slug/index.html b/files/de/glossary/slug/index.html
new file mode 100644
index 0000000000..329557883b
--- /dev/null
+++ b/files/de/glossary/slug/index.html
@@ -0,0 +1,10 @@
+---
+title: Slug
+slug: Glossary/Slug
+tags:
+  - Slug
+translation_of: Glossary/Slug
+---
+<p>Slug meint den eindeutigen Bezeichner eines Teils einer Webadresse, der typischerweise am Ende einer URL steht. Im MDN Kontext bezeichnet er einen Abschnitt der URL dieser Art <span class="seosummary">"</span><em>&lt;locale&gt;/docs/</em><span class="seosummary">".</span></p>
+
+<p>Es kann sich dabei auch um das letzte Element handeln, wenn ein neues Dokument unterhalb eines Elterndokuments erstellt wird; z.B. ist der Slug dieser Seite <code><span style="font-size: 10.0pt;">Glossary/Slug</span></code> .</p>
diff --git a/files/de/glossary/specification/index.html b/files/de/glossary/specification/index.html
new file mode 100644
index 0000000000..f4bd10de94
--- /dev/null
+++ b/files/de/glossary/specification/index.html
@@ -0,0 +1,23 @@
+---
+title: Spezifikation
+slug: Glossary/Specification
+tags:
+  - Glossar
+  - Standardisierung
+translation_of: Glossary/Specification
+---
+<p>Eine <strong>Spezifikation</strong> ist ein Dokument das detailliert auslegt was für Funktionalität oder Attribute ein Produkt vor der Veröffentlichung enthalten muss. Im Bezug auf die Beschreibung des Internets, bedeutet das Wort „Spezifikation“ (oft einfach als "spec" abgekürzt) allgemein ein Dokument das eine Sprache, Technologie oder {{Glossary("API")}} beschreibt, welche wiederum die gesamte Reihe von offenen Webtechnologien ausmacht.</p>
+
+<h2 id="Mehr_erfahren">Mehr erfahren</h2>
+
+<h3 id="Allgemeinwissen">Allgemeinwissen</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Spezification")}} auf Wikipedia</li>
+</ul>
+
+<h3 id="Technische_Referenz">Technische Referenz</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Specification_list">Open Web platform specifications</a></li>
+</ul>
diff --git a/files/de/glossary/sql/index.html b/files/de/glossary/sql/index.html
new file mode 100644
index 0000000000..677a49ff3d
--- /dev/null
+++ b/files/de/glossary/sql/index.html
@@ -0,0 +1,26 @@
+---
+title: SQL
+slug: Glossary/SQL
+tags:
+  - Datenbank
+  - Glossar
+  - Programmieren
+  - Sql
+translation_of: Glossary/SQL
+---
+<p><strong>SQL </strong>(Structured Query Language) ist eine beschreibende Computersprache, entworfen für die Aktualisierung, das Abrufen und die Berechnung von Daten in einer tabellenbasierten Datenbank.</p>
+
+<h2 id="Mehr_erfahren">Mehr erfahren</h2>
+
+<h3 id="Allgemein">Allgemein</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "SQL")}} auf Wikipedia</li>
+</ul>
+
+<h3 id="SQL_lernen">SQL lernen</h3>
+
+<ul>
+ <li><a href="http://sqlzoo.net/wiki/SQL_Tutorial">Learn SQL on sqlzoo.net</a></li>
+ <li><a href="http://www.tutorialspoint.com/sql/">Tutorial Point</a></li>
+</ul>
diff --git a/files/de/glossary/string/index.html b/files/de/glossary/string/index.html
new file mode 100644
index 0000000000..6d3a8c7cc4
--- /dev/null
+++ b/files/de/glossary/string/index.html
@@ -0,0 +1,22 @@
+---
+title: String
+slug: Glossary/String
+tags:
+  - Anfänger
+  - String
+  - Wörterbuch
+  - Zeichenkette
+translation_of: Glossary/String
+---
+<p id="Summary">In jeder Programmiersprache ist ein String eine Zeichenkette von Charakteren bzw. einzelnen Zeichen, welche Text repräsentieren.</p>
+
+<p>In {{Glossary("JavaScript")}} ist ein String ein Standard-Objekt. Es is ein primitiver Wert und das {{jsxref("String")}} Objekt ist ein {{Glossary("wrapper")}} um einen primitiven String.</p>
+
+<h2 id="Lerne_mehr">Lerne mehr</h2>
+
+<h3 id="Allgemein">Allgemein</h3>
+
+<ul>
+ <li><a href="https://de.wikipedia.org/wiki/Zeichenkette">String auf Wikipedia</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Data_structures#String_type">JavaScript data types and data structures</a></li>
+</ul>
diff --git a/files/de/glossary/svg/index.html b/files/de/glossary/svg/index.html
new file mode 100644
index 0000000000..36a5c92cfe
--- /dev/null
+++ b/files/de/glossary/svg/index.html
@@ -0,0 +1,33 @@
+---
+title: SVG
+slug: Glossary/SVG
+translation_of: Glossary/SVG
+---
+<p><em>Scalable Vector Graphics</em> (<strong>SVG</strong>, englisch für <em>Skalierbare Vektorgrafiken</em>) ist ein 2D-Vektorgrafik-Format mit einer {{Glossary("XML")}}-Syntax.</p>
+
+<p>Das {{Glossary("W3C")}} begann die Arbeit an SVG in den späten 90er Jahren. Beliebt wurde SVG jedoch erst mit der Veröffentlichung des {{Glossary("Microsoft Internet Explorer", "Internet Explorer")}} 9, der SVG unterstützte. Inzwischen unterstützen alle wichtigen {{Glossary("browser","Browser")}} SVG.</p>
+
+<p>Basierend auf einer {{Glossary("XML")}}-Syntax kann SVG mit {{Glossary("CSS")}} gestylt und durch {{Glossary("JavaScript")}} interaktiv gemacht werden. HTML5 erlaubt eine direkte Einbindung von SVG {{Glossary("Tag","tags")}} in ein {{Glossary("HTML")}}-Dokument.</p>
+
+<p>Als {{Interwiki("wikipedia", "Vektorgrafik-Format")}} lassen sich SVG-Grafiken unbegrenzt skalieren, was sie im {{Glossary("responsive design", "Responsive-Design")}} unbezahlbar macht, da sich UI-Elemente und Grafiken erstellen lassen, die sich an jede Bildschirmgröße anpassen. SVG bietet zudem eine Menge nützlicher Werkzeuge wie Abschneiden, Maskieren, Filter und Animationen.</p>
+
+<h2 id="Mehr_erfahren">Mehr erfahren</h2>
+
+<h3 id="Allgemeinwissen">Allgemeinwissen</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "SVG")}} auf Wikipedia</li>
+</ul>
+
+<h3 id="SVG_lernen">SVG lernen</h3>
+
+<ul>
+ <li><a href="https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html">W3.org's SVG Primer</a></li>
+</ul>
+
+<h3 id="Technische_Informationen">Technische Informationen</h3>
+
+<ul>
+ <li><a href="/de/docs/Web/SVG">SVG-Dokumentation auf MDN</a></li>
+ <li><a href="https://www.w3.org/TR/SVG/" rel="external">Aktuelle SVG-Spezifikation</a></li>
+</ul>
diff --git a/files/de/glossary/symbol/index.html b/files/de/glossary/symbol/index.html
new file mode 100644
index 0000000000..1f3a67271e
--- /dev/null
+++ b/files/de/glossary/symbol/index.html
@@ -0,0 +1,27 @@
+---
+title: Symbol
+slug: Glossary/Symbol
+tags:
+  - Datentyp
+  - Glossar
+  - JavaScript
+translation_of: Glossary/Symbol
+---
+<p>Ein Symbol ist ein primitiver Datentyp, dessen Instanzen eindeutig und unveränderbar sind. In manchen Programmiersprachen kennt man diesen Datentyp auch als atom.</p>
+
+<p>In {{Glossary("JavaScript")}} ist Symbol einer der primitiven Typen und das {{jsxref("Symbol")}} Objekt ist ein Wrapper für den primitiven Symbol Typ.</p>
+
+<p>Ein Symbol kann eine optionale Beschreibung enthalten, diese dient jedoch nur dem Debugging (Fehlersuche).</p>
+
+<p>Symbole in JavaScript sind mit der ECMAScript Edition 6 eingeführt worden.  In EcmaScript 5 gibt es kein Äquivalent für Symbol.</p>
+
+<h2 id="Mehr_dazu">Mehr dazu</h2>
+
+<h3 id="Generelles_Wissen">Generelles Wissen</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Symbol (programming)")}} auf Wikipedia</li>
+ <li>
+  <p><a href="/de/docs/Web/JavaScript/Datenstrukturen">JavaScript Datentypen und Datenstrukturen</a></p>
+ </li>
+</ul>
diff --git a/files/de/glossary/tag/index.html b/files/de/glossary/tag/index.html
new file mode 100644
index 0000000000..3182ae7521
--- /dev/null
+++ b/files/de/glossary/tag/index.html
@@ -0,0 +1,24 @@
+---
+title: Tag
+slug: Glossary/Tag
+tags:
+  - HTML
+  - tag
+translation_of: Glossary/Tag
+---
+<p>In {{Glossary("HTML")}} wird ein <strong>tag</strong> benutzt, um ein {{Glossary("element")}} zu erstellen. Der Name des HTML-Elements steht zwischen spitzen Klammern wie beispielsweise <code>&lt;p&gt;</code>, das für Paragraf steht. Wichtig ist, dass dem Namen des schließenden Tags ein Schrägstrich vorangestellt wird, so z.B. <code>&lt;/p&gt;</code>, und auch, dass in {{glossary("empty element", "empty elements")}} – leeren Elementen – ein schließendes Tag weder nötig noch erlaubt ist. Wenn {{Glossary("attribute", "attributes")}} – Attribute – nicht genannt sind, werden Standardwerte eingesetzt.</p>
+
+<h2 id="Learn_more"><strong>Learn more</strong></h2>
+
+<h3 id="General_Knowledge"><strong>General Knowledge</strong></h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "HTML element")}} on Wikipedia</li>
+ <li><a href="https://html.spec.whatwg.org/multipage/syntax.html#elements-2">HTML elements syntax</a> on {{glossary("WHATWG")}}</li>
+</ul>
+
+<h3 id="Technical_reference">Technical reference</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a></li>
+</ul>
diff --git a/files/de/glossary/tcp/index.html b/files/de/glossary/tcp/index.html
new file mode 100644
index 0000000000..48c6e0be4c
--- /dev/null
+++ b/files/de/glossary/tcp/index.html
@@ -0,0 +1,23 @@
+---
+title: TCP
+slug: Glossary/TCP
+tags:
+  - Daten
+  - Glossar
+  - Infrastruktur
+  - TCP
+translation_of: Glossary/TCP
+---
+<p id="Summary"><strong>TCP (Transmission Control Protocol)</strong> ist ein wichtiges Netzwerk-{{Glossary("Protokoll")}} das zwei Hosts  miteinander verbinden und Datenströme austauschen lässt. TCP garantiert die Vermittlung von Daten und Paketen in der selben Ordnung in der sie gesendet wurden. <em>Vint Cerf</em> und <em>Bob Kahn</em>, welche zu der Zeit DARPA-Wissenschaftler waren, entwarfen TCP in den 1970ern.</p>
+
+<p>TCP role is to ensure the packets are reliably delivered, error free.  TCP has congestion control, which means the initial requests start small, increasing in size to the levels of bandwidth the computers, servers, and network can support.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{Glossary("IPv4")}}</li>
+ <li>{{Glossary("IPv6")}}</li>
+ <li>{{Glossary("Packet")}}</li>
+ <li>Wikipedia {{Interwiki("wikipedia", "Transmission Control Protocol")}}</li>
+ <li><a href="/en-US/docs/Web/HTTP/Overview">http overview</a></li>
+</ul>
diff --git a/files/de/glossary/tls/index.html b/files/de/glossary/tls/index.html
new file mode 100644
index 0000000000..7d145fdac3
--- /dev/null
+++ b/files/de/glossary/tls/index.html
@@ -0,0 +1,27 @@
+---
+title: TLS
+slug: Glossary/TLS
+tags:
+  - Cryptography
+  - Glossary
+  - Infrastructure
+  - Security
+translation_of: Glossary/TLS
+---
+<p id="Summary">Transport Layer Security (TLS), Nachfolger von Secure Sockets Layer (SSL), ist ein in Applikationen verwendetes {{Glossary("protocol")}} um sicher über ein Netzwerk zu kommunizieren, sowie Manipulation und Abhören von E-Mail, Internetsurfen, Nachrichtenaustausch und weiterer Protokollkommunikationen zu verhindern.</p>
+
+<p>Alle modernen Webbrowser unterstützen das TLS Protokoll mit der Anforderung an den Server, ein valides {{Glossary("Digital certificate", "digital certificate")}} bereitzustellen, das dessen Identität bestätigt um eine sichere Verbindung aufzubauen. Es ist sowohl für den Client wie auch den Server möglich, sich gegenseitig zu authentifizieren, wenn beide Seiten ihr eigenes, individuelles, digitales Zertifikat bereitstellen.</p>
+
+<h3 id="Allgemeines">Allgemeines</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Security/Transport_Layer_Security">Transport Layer Security</a></li>
+ <li><a href="https://owasp.org/index.php?title=Transport_Layer_Protection_Cheat_Sheet" rel="external">OWASP: Transport Layer Protection Cheat Sheet</a></li>
+ <li>{{Interwiki("wikipedia", "Transport Layer Security")}} auf Wikipedia</li>
+</ul>
+
+<h3 id="Spezifikationen">Spezifikationen</h3>
+
+<ul>
+ <li><a href="https://tools.ietf.org/html/rfc5246" rel="external">RFC 5246</a> (The Transport Layer Security Protocol, Version 1.2)</li>
+</ul>
diff --git a/files/de/glossary/truthy/index.html b/files/de/glossary/truthy/index.html
new file mode 100644
index 0000000000..c45968bb32
--- /dev/null
+++ b/files/de/glossary/truthy/index.html
@@ -0,0 +1,33 @@
+---
+title: Truthy
+slug: Glossary/Truthy
+translation_of: Glossary/Truthy
+---
+<p>In {{Glossary("JavaScript")}} gilt ein Wert als <strong>truthy</strong>, wenn er in einem {{Glossary("Boolean")}} Kontext evaluiert <code>true</code> ergibt. Alle Werte werden als truthy angesehen, solange sie nicht {{Glossary("Falsy", "falsy")}}, also <code>false</code>, <code>0</code>, <code>""</code>, <code>null</code>, <code>undefined</code> oder <code>NaN</code> sind.</p>
+
+<p>JavaScript benutzt {{Glossary("Type_conversion", "Typ-Konversation")}} in Booleschen Kontexten.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>All diese if-statements werden ausgeführt.</p>
+
+<pre class="brush: js">if (true)
+if ({})
+if ([])
+if (42)
+if ("foo")
+if (new Date())
+if (-42)
+if (3.14)
+if (-3.14)
+if (Infinity)
+if (-Infinity)
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{Glossary("Falsy")}}</li>
+ <li>{{Glossary("Type_Conversion", "Coercion")}}</li>
+ <li>{{Glossary("Boolean")}}</li>
+</ul>
diff --git a/files/de/glossary/typ/index.html b/files/de/glossary/typ/index.html
new file mode 100644
index 0000000000..890c06d118
--- /dev/null
+++ b/files/de/glossary/typ/index.html
@@ -0,0 +1,21 @@
+---
+title: Typ
+slug: Glossary/Typ
+tags:
+  - CodingScripting
+  - Glossary
+  - JavaScript
+translation_of: Glossary/Type
+---
+<p><strong>Typen</strong> sind Charakteristiken von {{Glossary("Value", "Werten")}}, die festlegen, welche Art von Daten oder Strukturen ein Wert bzw. eine Variable speichern kann.</p>
+
+<p>Spricht man von <a href="/de/docs/Web/JavaScript/Datenstrukturen">Datentypen</a> in JavaScript, so kann ein {{domxref("Boolean")}} nur die Werte <code>true</code>/<code>false</code> speichern, während ein {{domxref("String")}} Zeichenketten speichert. Eine {{domxref("Number")}} speichert nur Zahlen jeder Art, und so weiter.</p>
+
+<p>Der Typ eines Wertes bestimmt außerdem, welche Arten von Operationen damit zulässig sind. Z.B. können Zahlen nur mit Zahlen multipliziert werden, nicht aber mit Strings oder Booleans. Dieses Wissen ist auch nützlich für den Vergleich von Typen. Denn neben <a href="/de/docs/Web/JavaScript/Datenstrukturen#Primitive_Werte">Primitiven Werten</a> gibt es auch <a href="/de/docs/Web/JavaScript/Datenstrukturen#Objekte">strukturierte Datentypen</a> wie Objekte.</p>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li>{{Interwiki("wikipedia", "Datentyp auf Wikipedia")}}</li>
+ <li><a href="/de/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Vererbung und Prototypen</a></li>
+</ol>
+</section>
diff --git a/files/de/glossary/type_conversion/index.html b/files/de/glossary/type_conversion/index.html
new file mode 100644
index 0000000000..39202e3f1d
--- /dev/null
+++ b/files/de/glossary/type_conversion/index.html
@@ -0,0 +1,41 @@
+---
+title: Typumwandlung
+slug: Glossary/Type_Conversion
+tags:
+  - CodingScripting
+  - Glossary
+  - Typ-Casting
+  - Typ-Konvertierung
+  - Typumwandlung
+translation_of: Glossary/Type_Conversion
+---
+<p>Typumwandlung (oder Typ-Konvertierung) meint den Transfer von Daten aus Datentyp in einen anderen. <em>Implizite Umwandlung</em> geschieht, wenn der Kompiler automatisch Datentypen zuweist. Der Quellcode kann aber auch <em>explizit</em> die Umwandlung von Typen festlegen.</p>
+
+<h4 id="Beispiel">Beispiel</h4>
+
+<p>Gegeben sein die folgende Anweisungen:</p>
+
+<pre class="syntaxbox">var a = 5 + 2.0;
+var b = Number("0x11");
+</pre>
+
+<p>(a) Die Gleitkommazahl (<code>float</code>) 2.0 wird hier implizit ein eine Ganzzahl (<code>integer</code>) umgewandelt.</p>
+
+<p>(b) Der String <code>0x11</code> wird explizit in die Ganzzahl <code>17</code> umgewandelt.</p>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/de/docs/Glossary">Glossar</a>
+
+  <ol>
+   <li><a href="/de/docs/Glossary/Typ">Typ</a></li>
+   <li>{{Glossary("Type coercion")}}</li>
+  </ol>
+ </li>
+ <li>Wikipedia Artikel
+  <ol>
+   <li>{{Interwiki("wikipedia", "Typumwandlung")}}</li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/de/glossary/ui/index.html b/files/de/glossary/ui/index.html
new file mode 100644
index 0000000000..7ead5b5252
--- /dev/null
+++ b/files/de/glossary/ui/index.html
@@ -0,0 +1,22 @@
+---
+title: UI
+slug: Glossary/UI
+tags:
+  - Bedienoberfläche
+  - Benutzeroberfläche
+  - Benutzerschnittstelle
+  - User Interface
+translation_of: Glossary/UI
+---
+<p><em><strong>User Interface</strong> </em>(UI) bezeichnet alles, was eine Interaktion zwischen Mensch und Maschine ermöglicht. Im Zusammenhang mit Computern reicht es von einer Tastatur über einen Joystick, einen Bildschirm bis hin zu einem Programm.</p>
+
+<p>Bezogen auf Software kann es sich um eine Kommandozeile handeln, eine Webseite, ein Eingabeformular oder ganz allgemein das Frontend einer Applikation.</p>
+
+<h2 id="Learn_More">Learn More</h2>
+
+<h3 id="General_Knowledge">General Knowledge</h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "User_interface", "User interface")}} on Wikipedia</li>
+ <li>{{interwiki("wikipedia", "Front_end_development", "Front end development")}} on Wikipedia</li>
+</ul>
diff --git a/files/de/glossary/undefined/index.html b/files/de/glossary/undefined/index.html
new file mode 100644
index 0000000000..0fd7a44ec6
--- /dev/null
+++ b/files/de/glossary/undefined/index.html
@@ -0,0 +1,23 @@
+---
+title: undefined
+slug: Glossary/undefined
+tags:
+  - CodingScripting
+  - Glossary
+translation_of: Glossary/undefined
+---
+<p><span class="seoSummary">Ein <strong>{{Glossary("primitive","primitiver")}}</strong> Wert, der automatisch gerade erst deklarierten Variablen zugewiesen wird, und der Wert, den <strong>angegebene {{Glossary("Argument","Argumente")}}</strong> annehmen, wenn sie im Funktionsaufruf nicht verwendet werden.</span></p>
+
+<h2 id="Mehr_lernen">Mehr lernen</h2>
+
+<h3 id="Allgemeine_Referenzen">Allgemeine Referenzen</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Undefined value")}} im englischen Wikipedia</li>
+</ul>
+
+<h3 id="Technische_Referenzen">Technische Referenzen</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Data_structures">Javascript Datentypen und Datenstrukturen</a></li>
+</ul>
diff --git a/files/de/glossary/uri/index.html b/files/de/glossary/uri/index.html
new file mode 100644
index 0000000000..16f6001f30
--- /dev/null
+++ b/files/de/glossary/uri/index.html
@@ -0,0 +1,22 @@
+---
+title: URI
+slug: Glossary/URI
+tags:
+  - Glossary
+  - HTTP
+  - URI
+  - URL
+translation_of: Glossary/URI
+---
+<p><span class="seoSummary">Ein <strong>URI</strong> (<em>Uniform Resource Identifier</em>, deutsch: <em>einheitlicher Bezeichner für Ressourcen</em>) ist ein Textstring, der auf eine Ressource verweist.</span> Die verbreitetsten sind {{Glossary("URL","URLs")}}, die auf eine Ressource verweisen, indem sie ihren Ort im Internet angibt. Im Gegensatz dazu beziehen sich {{Glossary("URN","URNs")}} auf Ressourcen mit einem Namen, der in einem bestimmten Namensraum gültig ist, wie die ISBN eines Buches.</p>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<h3 id="General_knowledge">General knowledge</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "URI")}} bei Wikipedia</li>
+ <li><a href="http://tools.ietf.org/html/rfc3986">RFC 3986 Standard über URI</a> (Englisch)</li>
+ <li><a href="/en-US/docs/Web/HTTP/data_URIs">Daten URIs</a></li>
+ <li><a href="/en-US/docs/URI/www_vs_non-www_URLs">www und nicht-www</a></li>
+</ul>
diff --git a/files/de/glossary/url/index.html b/files/de/glossary/url/index.html
new file mode 100644
index 0000000000..ad6f5a3a5b
--- /dev/null
+++ b/files/de/glossary/url/index.html
@@ -0,0 +1,33 @@
+---
+title: URL
+slug: Glossary/URL
+tags:
+  - Glossary
+  - Infrastructure
+translation_of: Glossary/URL
+---
+<p>Ein <strong>Uniform Resource Locator</strong> (<strong>URL</strong>) ist ein Text-String, der angibt, wo eine Ressource im Internet gefunden werden kann.</p>
+
+<p>Im Zusammenhang mit {{Glossary("HTTP")}}, werden URLs auch "Web-Adresse" oder "Link" genannt. Der Browser zeigt URLs in der Adressleiste an, zum Beispiel: <code>https://developer.mozilla.org </code>Einige Browser zeigen nur den Teil der URL nach den "//" an, das ist der {{Glossary("Domain name")}}</p>
+
+<p>URLs können auch für den Dateiaustausch ({{Glossary("FTP")}}) , E-Mails ({{Glossary("SMTP")}}), und andere Anwendungen genutzt werden.</p>
+
+<h2 id="Mehr_erfahren">Mehr erfahren</h2>
+
+<h3 id="Allgemeine_Verweise"><strong>Allgemeine Verweise</strong></h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "URL")}} auf Wikipedia</li>
+</ul>
+
+<h3 id="Zum_Lernen">Zum Lernen</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/Understanding_URLs">Understanding URLs and their structure</a></li>
+</ul>
+
+<h3 id="Spezialisierung">Spezialisierung</h3>
+
+<ul>
+ <li>Die Syntax von URLs ist im <a href="https://url.spec.whatwg.org/">URL Living Standard</a> definiert.</li>
+</ul>
diff --git a/files/de/glossary/user_agent/index.html b/files/de/glossary/user_agent/index.html
new file mode 100644
index 0000000000..bcf4374e8a
--- /dev/null
+++ b/files/de/glossary/user_agent/index.html
@@ -0,0 +1,51 @@
+---
+title: Nutzeragent
+slug: Glossary/User_agent
+tags:
+  - Browser
+  - Glossary
+  - Nutzeragent
+  - agent
+translation_of: Glossary/User_agent
+---
+<p>Ein Nutzeragent (Englisch: User Agent) ist ein Programm, das einem Nutzer den Zugriff auf Netzwerkdienste ermöglicht. Auf das <span class="seoSummary">{{Glossary("World Wide Web", "Web")}} bezogen handelt es sich meist um den {{Glossary("Browser","Browser")}}.</span><br>
+ Außer einem Browser kann es sich auch um einen Bot handeln, ein automatisches Programm, das das Web durchsucht. Auch Download-Manager sowie andere Programme, die auf das Web zugreifen, fallen in diese Kategorie.</p>
+
+<p>Mit jeder Anfrage, die Browser an einen Server schicken, senden sie die {{Glossary("HTTP")}}-Kopfzeile {{HTTPHeader("User-Agent")}}, mit der sie sich selbst zu erkennen geben. Dieser Text, die User-Agent-Kennung, enthält meistens Informationem über den Browser, seine Version sowie das Betriebssystem des Computers.<br>
+ Ein typisches Beispiel ist <span class="objectBox objectBox-string"><code>Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:35.0) Gecko/20100101 Firefox/35.0</code>. </span></p>
+
+<p><span class="objectBox objectBox-string">Spambots, Download-Manager und auch manche Browser senden falsche Angaben, um ihre Identität zu verschleiern und so Restriktionen zu umgehen. Im Englischen wird diese Verschleierung als <em>user agent spoofing</em> bezeichnet.</span></p>
+
+<p>Die User-Agent-Kennung kann im Browser mit {{Glossary("JavaScript")}}<span class="objectBox objectBox-string"> über die Eigenschaft {{domxref("navigator.userAgent")}} ausgelesen werden. Sie ist jedoch von eher geringem Nutzen und insbesondere – obwohl diese Methode nach wie vor weit verbreitet ist – kaum geeignet, um spezielle Fähigkeiten des Browsers festzustellen.</span></p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<h3 id="Allgemein">Allgemein</h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "User agent")}} auf Wikipedia</li>
+</ul>
+
+<h3 id="Technische_Referenzen">Technische Referenzen</h3>
+
+<ul>
+ <li>{{domxref("navigator.userAgent")}}</li>
+ <li><a href="/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent">Browser detection using the user agent</a></li>
+ <li>{{RFC(2616, "14.43")}}: The <code>User-Agent</code> header</li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a>
+
+  <ol>
+   <li>{{Glossary("Browser")}}</li>
+  </ol>
+ </li>
+ <li>HTTP Headers
+  <ol>
+   <li>{{HTTPHeader("User-agent")}}</li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/de/glossary/ux/index.html b/files/de/glossary/ux/index.html
new file mode 100644
index 0000000000..076f215b5d
--- /dev/null
+++ b/files/de/glossary/ux/index.html
@@ -0,0 +1,20 @@
+---
+title: UX
+slug: Glossary/UX
+tags:
+  - Design
+  - Glossary
+  - User experience
+translation_of: Glossary/UX
+---
+<p><span class="seoSummary"><strong>UX</strong> steht als Akronym für <strong>User eXperience</strong> (dt. etwa „Nutzungserlebnis“ oder auch „Anwendererlebnis“). Es untersucht die Interaktion zwischen Nutzer*innen und einem System, bspw. einer Website oder -anwendung. Das Ziel der <em>User Experience</em> ist es, die Bedienung eines Systems aus der Sicht der Nutzer*innen so einfach wie möglich zu gestalten.</span></p>
+
+<p>Das System kann dabei jegliche Art von Produkt oder Anwendung sein, die von Nutzer*innen bedient wird. Untersuchungen zur UX einer Website können bspw. zeigen, ob die Inhalte der Seite leicht verständlich sind und ob die Navigation zu anderen Themenbereichen oder das erledigen häufiger Aufgaben einfach sind – und an welchen Stellen diese Abläufe verbessert werden könnten.</p>
+
+<h2 id="Mehr_erfahren">Mehr erfahren</h2>
+
+<h3 id="Allgemeinwissen">Allgemeinwissen</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "User Experience")}} auf Wikipedia</li>
+</ul>
diff --git a/files/de/glossary/validator/index.html b/files/de/glossary/validator/index.html
new file mode 100644
index 0000000000..2c5f41a176
--- /dev/null
+++ b/files/de/glossary/validator/index.html
@@ -0,0 +1,19 @@
+---
+title: Validator
+slug: Glossary/Validator
+tags:
+  - Syntaxprüfung
+  - validator
+  - überprüfen
+translation_of: Glossary/Validator
+---
+<p>Bei einem <em>Validator </em>handelt es sich um ein Programm, das Code auf Syntaxfehler hin prüft. <em>Validatoren</em> können für beliebige Formate und Programmiersprachen erstellt werden, wobei wir uns in unserem Kontext auf Tools beziehen, die {{Glossary("HTML")}}, {{Glossary("CSS")}}, and {{Glossary("XML")}} untersuchen.</p>
+
+<h2 id="Learn_more"><strong style="">Learn more</strong></h2>
+
+<h3 id="General_knowledge" style="line-height: 24px;">General knowledge</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Validator")}} on Wikipedia</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Validators">Short list of validators</a></li>
+</ul>
diff --git a/files/de/glossary/value/index.html b/files/de/glossary/value/index.html
new file mode 100644
index 0000000000..f82e1e438f
--- /dev/null
+++ b/files/de/glossary/value/index.html
@@ -0,0 +1,14 @@
+---
+title: Wert
+slug: Glossary/Value
+translation_of: Glossary/Value
+---
+<p>Im Zusammenhang mit Daten oder einem Objekt-<strong>{{Glossary("Wrapper")}}</strong> um diese Daten, ist der <strong>Wert</strong> der <strong>{{Glossary("Primitive","primitive Wert")}}</strong>, den der Wrapper enthält. Im Kontext einer <strong>{{Glossary("Variable")}}</strong> oder <strong>{{Glossary("Property","Eigenschaft")}}</strong>, kann dieser Wert entweder primitiv oder eine <strong>{{Glossary("Object reference","Objektreferenz")}}</strong> sein.</p>
+
+<h2 id="Mehr_erfahren">Mehr erfahren</h2>
+
+<h3 id="Allgemeines">Allgemeines</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Wrapper-Klasse")}} auf Wikipedia</li>
+</ul>
diff --git a/files/de/glossary/variable/index.html b/files/de/glossary/variable/index.html
new file mode 100644
index 0000000000..c8ddc3b30c
--- /dev/null
+++ b/files/de/glossary/variable/index.html
@@ -0,0 +1,25 @@
+---
+title: Variable
+slug: Glossary/Variable
+tags:
+  - CodingScripting
+  - Glossary
+  - JavaScript
+translation_of: Glossary/Variable
+---
+<p>Eine Variable ist ein benannter Ort, um einen {{Glossary("Value", "Wert")}} zu speichern. Damit kann durch einen vorbestimmten Namen auf einen unvorhersehbaren Wert zugegriffen werden.</p>
+
+<h2 id="Mehr_erfahren">Mehr erfahren</h2>
+
+<h3 id="Algemeines">Algemeines</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Variable_(Programmierung)","Variable")}} auf Wikipedia</li>
+</ul>
+
+<h3 id="Rechnische_Referenzen">Rechnische Referenzen</h3>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Guide/Grammar_and_types#Deklarationen">Variables in JavaScript deklarieren</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Statements/var"><code>var</code> Statement in JavaScript</a></li>
+</ul>
diff --git a/files/de/glossary/verbotener_header_name/index.html b/files/de/glossary/verbotener_header_name/index.html
new file mode 100644
index 0000000000..23bbba81ca
--- /dev/null
+++ b/files/de/glossary/verbotener_header_name/index.html
@@ -0,0 +1,49 @@
+---
+title: Verbotener Header-Name
+slug: Glossary/verbotener_header_name
+tags:
+  - Fetch
+  - Glossar
+  - Glossary
+  - HTTP
+  - Headers
+  - Verboten
+  - Wörterverzeichnis
+translation_of: Glossary/Forbidden_header_name
+---
+<p>Ein verbotener Header-Name, ist ein <a href="/en-US/docs/Web/HTTP/Headers">HTTP header</a> Name, welcher nicht programmatisch modifiziert werden kann;  that cannot be modified programmatically; speziell, ein HTTP <strong>Anfragen</strong>-Header Name.</p>
+
+<p>Konstrast mit {{Glossary("Forbidden response header name")}}.</p>
+
+<p>Diese sind verboten, so, dass der User-Agent komplette Kontrolle über sie behällt. Namen die mit `<code title="">Sec-</code>` anfangen, sind reserviert, um neue Header zu erstellen, die sicher von {{glossary("API","APIs")}} die <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> nutzen sind, welche Entwicklern Kontrolle über Header, wie {{domxref("XMLHttpRequest")}}, gibt.</p>
+
+<p>Ein verbotener Header-Name fängt mit <code>Proxy-</code> oder <code>Sec-</code> an, oder ist einer der folgenen:</p>
+
+<ul class="brief">
+ <li><code title="">Accept-Charset</code></li>
+ <li><code title="">Accept-Encoding</code></li>
+ <li><code title="">Access-Control-Request-Headers</code></li>
+ <li><code title="">Access-Control-Request-Method</code></li>
+ <li><code title="">Connection</code></li>
+ <li><code title="">Content-Length</code></li>
+ <li><code title="">Cookie</code></li>
+ <li><code title="">Cookie2</code></li>
+ <li><code title="">Date</code></li>
+ <li><code title="">DNT</code></li>
+ <li><code title="">Expect</code></li>
+ <li><code title="">Host</code></li>
+ <li><code title="">Keep-Alive</code></li>
+ <li><code title="http-origin">Origin</code></li>
+ <li><code title="http-origin">Proxy-</code></li>
+ <li><code title="http-origin">Sec-</code></li>
+ <li><code title="">Referer</code></li>
+ <li><code title="">TE</code></li>
+ <li><code title="">Trailer</code></li>
+ <li><code title="">Transfer-Encoding</code></li>
+ <li><code title="">Upgrade</code></li>
+ <li><code title="">Via</code></li>
+</ul>
+
+<div class="note">
+<p><strong>Beachte</strong>: Der <code>User-Agent</code>-Header ist <a href="https://fetch.spec.whatwg.org/#terminology-headers">per Spezifikation</a> nicht mehr verboten — siehe die Verbotene Header-Namen Liste (das wurde in Firefox 43 implementiert,) also kann nun in einem Fetch <a href="/en-US/docs/Web/API/Headers">Headers</a> Objekt, per XHR <a href="/en-US/docs/Web/API/XMLHttpRequest#setRequestHeader%28%29">setRequestHeader()</a>, etc. gesetzt werden.</p>
+</div>
diff --git a/files/de/glossary/viewport/index.html b/files/de/glossary/viewport/index.html
new file mode 100644
index 0000000000..b68d40ddd4
--- /dev/null
+++ b/files/de/glossary/viewport/index.html
@@ -0,0 +1,24 @@
+---
+title: Viewport
+slug: Glossary/Viewport
+tags:
+  - Glossary
+  - Graphics
+  - viewport
+translation_of: Glossary/Viewport
+---
+<p>Ein viewport (deutsch: <em>Ansichtsfenster</em>) repräsentiert in der Computergrafik den polygonalen (normalerweise rechteckigen) Bereich, der im Moment angezeigt wird. Bei Webbrowsern bezieht es sich auf den Teil des betrachteten Dokuments, der gerade in seinem Fenster sichtbar ist (oder dem Bildschirm, wenn das Dokument im Vollbildmodus betrachtet wird). Inhalte außerhalb des viewports sind nicht auf dem Bildschirm sichtbar, bis man sie in den sichtbaren Bereich scrollt.</p>
+
+<p>Der Teil des viewports, der im Moment sichtbar ist, wird als <strong>visual viewport</strong> (deutsch etwa: <em>sichtbares Ansichtsfenster</em>) bezeichnet. Dieser kann kleiner sein, als der durch das Layout bestimmte viewport, zum Beispiel, wenn der Nutzer (auf einem Mobilgerät) hineinzoomt. Der <strong>layout viewport</strong> bleibt dabei gleich, aber der visual viewport ist kleiner geworden.</p>
+
+<h2 id="Mehr_dazu">Mehr dazu</h2>
+
+<h3 id="Allgemeinwissen">Allgemeinwissen</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Viewport")}} auf Wikipedia</li>
+ <li><a href="https://stackoverflow.com/questions/2939693/what-is-viewport-in-html">What is viewport in HTML</a> auf Stackoverflow (Englisch)</li>
+ <li><a href="https://andylangton.co.uk/blog/development/get-viewportwindow-size-width-and-height-javascript">Get viewport/window size (width and height) with javascript </a> (Englisch)</li>
+ <li><a href="https://www.quirksmode.org/mobile/viewports.html">A tale of two viewports</a> (Quirksmode, Englisch)</li>
+ <li><a href="/en-US/docs/Web/API/Visual_Viewport_API">VisualViewport API</a></li>
+</ul>
diff --git a/files/de/glossary/visual_viewport/index.html b/files/de/glossary/visual_viewport/index.html
new file mode 100644
index 0000000000..0a31701b5a
--- /dev/null
+++ b/files/de/glossary/visual_viewport/index.html
@@ -0,0 +1,19 @@
+---
+title: Visual Viewport
+slug: Glossary/Visual_Viewport
+tags:
+  - Glossary
+  - Reference
+  - VisualViewport
+translation_of: Glossary/Visual_Viewport
+---
+<p>Der Bereich des <a href="/en-US/docs/Glossary/Viewport">viewports</a>, der im Moment sichbar ist, wird visual viewport (deutsch etwa <em>Ansichtsfenster</em>, bzw. <em>sichtbares/visuelles Ansichtsfenster</em>) genannt. Der visual viewport kann dabei kleiner als der viewport des eigentlichen Layouts sein, zum Beispiel wenn der Nutzer in eine Webseite hineinzoomt (hauptsächlich auf Mobilgeräten). Der visual viewport ist der sichtbare Teil des Bildschirms, ohne Bildschirmtastatur, Bereiche außerhalb des gezoomten Ausschnitts oder sämtliche anderen auf dem Bildschirm sichtbaren Objekte, die nicht mit der Größe der Seite skalieren.</p>
+
+<h2 id="Mehr_dazu">Mehr dazu</h2>
+
+<h3 id="Allgemeinwissen">Allgemeinwissen</h3>
+
+<ul>
+ <li><a href="https://developers.google.com/web/updates/2017/09/visual-viewport-api">Introducing Visual Viewport</a> (Englisch)</li>
+ <li><a href="/en-US/docs/Web/API/Visual_Viewport_API">VisualViewport API</a> (Englisch)</li>
+</ul>
diff --git a/files/de/glossary/voip/index.html b/files/de/glossary/voip/index.html
new file mode 100644
index 0000000000..ed3aef5875
--- /dev/null
+++ b/files/de/glossary/voip/index.html
@@ -0,0 +1,20 @@
+---
+title: VoIP
+slug: Glossary/VoIP
+tags:
+  - Glossary
+  - Infrastructure
+  - VoIP
+translation_of: Glossary/VoIP
+---
+<p>VoIP (Voice over Internet Protocol, deutsch etwa: <em>"Stimmübertragung über das Internetprotokoll"</em>) ist eine Technologie, mit der Sprachnachrichten über IP-Netzwerke (Internet Protocol versendet werden. Gängige VoIP Software-Pakete sind Skype, Msn Messenger, Yahoo und viele weitere. Alles, was über VoIP übermittelt wird, ist digital. Es wird auch als IP-Telefonie oder Internet-Telefonie bezeichnet. Der Hauptgrund für die Benutzung der VoIP-Technologie sind die Kosten.</p>
+
+<p>VoIP ermöglicht es, einen Direktanruf von einem Computer, einem speziellen VoIP-Telefon oder einem klassischen Telefon, das mit einem speziellen Adapter verbunden ist, zu tätigen. Für VoIP wird eine High-Speed-Internetverbindung benötigt. Normalerweise verursachen Telefonanrufe über das Internet keine weiteren Kosten, als das, was der Nutzer für den Internetzugang bezahlt, genauso wie der Nutzer auch nicht für das Versenden einzelner E-mails über das Internet bezahlt.</p>
+
+<h2 id="Mehr_dazu">Mehr dazu</h2>
+
+<h3 id="Allgemeinwissen">Allgemeinwissen</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "VoIP")}} auf Wikipedia</li>
+</ul>
diff --git a/files/de/glossary/w3c/index.html b/files/de/glossary/w3c/index.html
new file mode 100644
index 0000000000..aaa1b8a0f0
--- /dev/null
+++ b/files/de/glossary/w3c/index.html
@@ -0,0 +1,26 @@
+---
+title: W3C
+slug: Glossary/W3C
+tags:
+  - Community
+  - Consortium
+  - Glossar
+  - Intro
+  - W3C
+  - Web consortium
+translation_of: Glossary/W3C
+---
+<p>Das <em>World Wide Web Consortium</em> (W3C) ist eine internationale Gruppe, die Regeln und Strukturen für das {{Glossary("World Wide Web", "Web")}} vorgibt und pflegt.</p>
+
+<p>Über 350 Organisationen sind Mitglieder im W3C und entwickeln gemeinsam Webstandards, leiten weitere Programme und stellen ein freies Forum zum Austausch über das Web zur Verfügung. Das W3C koordiniert die Unternehmen in der Industrie, damit sie die gleichen W3C-Standards umsetzen.</p>
+
+<p>Alle Standards durchlaufen vier Stadien der Entwicklung: Funktionstüchtiger Entwurf (Working Draft: <em>WD</em>), Mitgliedsempfehlung (Candidate Recommendation: <em>CR</em>), Vorgeschlagene Empfehlung (Proposed Recommendation: <em>PR</em>) und W3C-Empfehlung (W3C Recommendation: <em>REC</em>).</p>
+
+<h2 id="Mehr_Erfahren">Mehr Erfahren</h2>
+
+<h3 id="Allgemeinwissen" style="line-height: 24px;">Allgemeinwissen</h3>
+
+<ul>
+ <li><a href="http://www.w3.org/">Webseite des W3C</a></li>
+ <li>{{Interwiki("wikipedia", "World_Wide_Web_Consortium", "W3C")}} bei Wikipedia</li>
+</ul>
diff --git a/files/de/glossary/wai/index.html b/files/de/glossary/wai/index.html
new file mode 100644
index 0000000000..3a33809800
--- /dev/null
+++ b/files/de/glossary/wai/index.html
@@ -0,0 +1,18 @@
+---
+title: WAI
+slug: Glossary/WAI
+tags:
+  - Barrierefreiheit
+  - Glossary
+translation_of: Glossary/WAI
+---
+<p>WAI oder Web Accessibility Initiative ist ein Ansatz des World Wide Web Consortium (W3C) um das Internet zugänglicher für Menschen mit verschiedenen Einschränkungen zu machen, die möglicherweise alternative {{Glossary("Browser")}} oder Geräte brauchen.</p>
+
+<h2 id="Mehr_dazu">Mehr dazu</h2>
+
+<h3 id="Allgemeines">Allgemeines</h3>
+
+<ul>
+ <li><a href="http://www.w3.org/WAI/">Webseite der WAI</a></li>
+ <li>{{Interwiki("wikipedia", "Web Accessibility Initiative")}} auf Wikipedia</li>
+</ul>
diff --git a/files/de/glossary/webdav/index.html b/files/de/glossary/webdav/index.html
new file mode 100644
index 0000000000..3caf3300ac
--- /dev/null
+++ b/files/de/glossary/webdav/index.html
@@ -0,0 +1,40 @@
+---
+title: WebDAV
+slug: Glossary/WebDAV
+tags:
+  - Glossar
+  - Infrastruktur
+translation_of: Glossary/WebDAV
+---
+<p><strong>WebDAV </strong> (<em>Web Distributed Authoring and Versioning</em>) ist eine {{Glossary("HTTP")}} Erweiterung die es Webentwicklern erlaubt ihren Inhalt rechnerfern von einem Klienten zu aktualisieren.</p>
+
+<p>WebDAV wird selten allein eingesetzt, aber zwei Erweiterungen sind sehr üblich: {{Glossary("CalDAV")}} (remote-access calendar) und {{Glossary("CardDAV")}} (remote-access address book).</p>
+
+<p>WebDAV erlaubt Klienten</p>
+
+<ul>
+ <li>Webseiten-Metadaten (e.g. Autor oder Erstellungsdatum) hinzuzufügen, zu löschen und abzurufen</li>
+ <li>Seiten jedes Medientyps zu relevanten Seiten zu verlinken</li>
+ <li>Sätze von Dokumenten zu erstellen und hierarchische Listen abzurufen</li>
+ <li>Webseiten zu kopieren und zu verschieben</li>
+ <li>ein Dokument zu sperren, damit dieses nicht von mehreren Personen gleichzeitig bearbeitet wird</li>
+</ul>
+
+<dl>
+</dl>
+
+<h2 id="See_also" name="See_also">Mehr erfahren</h2>
+
+<h3 id="Allgemeinwissen">Allgemeinwissen</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "WebDAV")}} on Wikipedia</li>
+</ul>
+
+<h3 id="Technische_Referenz">Technische Referenz</h3>
+
+<ul>
+ <li><span class="external">{{rfc(2518)}}</span></li>
+ <li><span class="external">{{rfc(3253)}}</span></li>
+ <li>{{rfc(3744)}}</li>
+</ul>
diff --git a/files/de/glossary/webm/index.html b/files/de/glossary/webm/index.html
new file mode 100644
index 0000000000..4da68d24c7
--- /dev/null
+++ b/files/de/glossary/webm/index.html
@@ -0,0 +1,28 @@
+---
+title: WebM
+slug: Glossary/webm
+tags:
+  - Glossary
+  - Media
+translation_of: Glossary/webm
+---
+<p><strong>WebM </strong>ist ein u.a. von Google entwickeltes Containerformat für audiovisuelle Dateien, das überwiegend für die verlustbehaftete Komprimierung von Videodateien im Web genutzt wird. Der Programmcode von WebM (sowie der eingesetzten Video- und Audio-{{Glossary("Codec", "Codecs")}} ist quelloffen und soll als offener, lizenzgebührenfreier Standard eine Alternative vor allem zum weit verbreiteten MP4-Format bieten.</p>
+
+<h2 id="Mehr_erfahren">Mehr erfahren</h2>
+
+<h3 id="Allgemeinwissen">Allgemeinwissen</h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "WebM")}} auf Wikipedia</li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ul>
+ <li><a href="/de/docs/Glossary">Glossar</a>
+
+  <ul>
+   <li>{{Glossary("WebP")}}</li>
+  </ul>
+ </li>
+</ul>
+</section>
diff --git a/files/de/glossary/webp/index.html b/files/de/glossary/webp/index.html
new file mode 100644
index 0000000000..852e6ca068
--- /dev/null
+++ b/files/de/glossary/webp/index.html
@@ -0,0 +1,31 @@
+---
+title: WebP
+slug: Glossary/webp
+tags:
+  - Glossary
+  - Media
+translation_of: Glossary/webp
+---
+<p><strong>WebP </strong>ist ein von Google entwickeltes Grafikformat mit verlustfreier oder verlustbehafteter Komprimierung. Der Programmcode von WebP ist quelloffen und soll als offener Standard eine moderne Alternative vor allem zum {{Glossary("JPEG")}}-Format darstellen, kann aber auch als Ersatz für {{Glossary("PNG")}}- oder (animierte) {{Glossary("GIF")}}-Dateien genutzt werden.</p>
+
+<h2 id="Mehr_erfahren">Mehr erfahren</h2>
+
+<h3 id="Allgemeinwissen">Allgemeinwissen</h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "WebP")}} auf Wikipedia</li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ul>
+ <li><a href="/de/docs/Glossary">Glossar</a>
+
+  <ul>
+   <li>{{Glossary("GIF")}}</li>
+   <li>{{Glossary("JPEG")}}</li>
+   <li>{{Glossary("PNG")}}</li>
+   <li>{{Glossary("WebM")}}</li>
+  </ul>
+ </li>
+</ul>
+</section>
diff --git a/files/de/glossary/webrtc/index.html b/files/de/glossary/webrtc/index.html
new file mode 100644
index 0000000000..cd7d0f861e
--- /dev/null
+++ b/files/de/glossary/webrtc/index.html
@@ -0,0 +1,26 @@
+---
+title: WebRTC
+slug: Glossary/WebRTC
+translation_of: Glossary/WebRTC
+---
+<p><span class="seoSummary"><strong>WebRTC</strong> (<em>Web Real-Time Communication (übersetzt: Web Echtzeit Kommunikation)</em>) ist eine {{Glossary("API")}}, die zum Erstellen von Video-Chat-, Audiogespräch- und P2P-Dateiaustausch<br>
+ Web-Anwendungen benutzt wird.</span></p>
+
+<p>WebRTC besteht hauptsächtlich aus folgenden Teilen:</p>
+
+<dl>
+ <dt>{{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}</dt>
+ <dd>Gewährt Zugang zu einer Kamera und/oder Mikrofon des Geräts, dessen Signale an eine RTC-Verbindung übergeben werden können.</dd>
+ <dt>{{domxref("RTCPeerConnection")}}</dt>
+ <dd>Eine Schnittstelle zum Konfigurieren von Video- oder Audio-Gespächen.</dd>
+ <dt>{{domxref("RTCDataChannel")}}</dt>
+ <dd>Stellt eine Methode zum Erstellen von {{Glossary("P2P")}} Daten Kanälen zwischen Browsern bereit.</dd>
+</dl>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "WebRTC")}} on Wikipedia</li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API on MDN</a></li>
+ <li><a href="http://caniuse.com/rtcpeerconnection">Browser support for WebRTC</a></li>
+</ul>
diff --git a/files/de/glossary/websockets/index.html b/files/de/glossary/websockets/index.html
new file mode 100644
index 0000000000..c7f446ea8a
--- /dev/null
+++ b/files/de/glossary/websockets/index.html
@@ -0,0 +1,41 @@
+---
+title: WebSockets
+slug: Glossary/WebSockets
+tags:
+  - Glossar
+  - Infrastruktur
+  - Kommunikation
+  - Netzwerke
+  - Persistent
+  - Protokolle
+  - Stateless
+  - Verbindung
+  - Web
+  - WebSocket
+  - realtime
+translation_of: Glossary/WebSockets
+---
+<p><strong>WebSocket</strong><em> </em>ist ein {{Glossary("protocol", "Protokoll")}}, welches eine persistente {{Glossary("TCP")}} Verbindung zwischen {{Glossary("Server", "Server")}} und {{Glossary("client", "Client")}} herstellt, um jederzeit Daten austauschen zu können.</p>
+
+<p>Jede Client- oder Serveranwendung kann WebSockets verwenden, jedoch prinzipiell Web-Browser und Web-Server. Durch WebSocket kann ein Server Daten an einen Client übertragen ohne eine vorherige Anfrage von diesem erhalten zu haben. Dies ermöglicht dynamisches Aktualisieren von Inhalten.</p>
+
+<h2 id="Erfahre_mehr">Erfahre mehr</h2>
+
+<h3 id="Allgemeines_Wissen" style="line-height: 24px;">Allgemeines Wissen</h3>
+
+<ul>
+ <li><a href="http://de.wikipedia.org/wiki/WebSocket">WebSocket auf Wikipedia</a></li>
+</ul>
+
+<h3 id="Technische_Referenzen">Technische Referenzen</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebSocket">WebSocket-Referenze auf MDN</a></li>
+</ul>
+
+<h3 id="Lerne_mehr_darüber">Lerne mehr darüber</h3>
+
+<ul>
+ <li><a href="/en-US/docs/WebSockets/Writing_WebSocket_client_applications">WebSocket Client-Applikationen programmieren</a></li>
+ <li><a href="/en-US/docs/WebSockets/Writing_WebSocket_servers">WebSocket-Server erstellen</a></li>
+</ul>
diff --git a/files/de/glossary/wrapper/index.html b/files/de/glossary/wrapper/index.html
new file mode 100644
index 0000000000..2dfd58a2c3
--- /dev/null
+++ b/files/de/glossary/wrapper/index.html
@@ -0,0 +1,30 @@
+---
+title: Wrapper
+slug: Glossary/Wrapper
+tags:
+  - Wrapper
+  - Wrapper-Funktionen
+translation_of: Glossary/Wrapper
+---
+<p>In Programmiersprachen wie JavaScript ist ein Wrapper eine Funktion, die dazu dient, eine oder mehrere andere Funktionen aufzurufen - manchmal aus Bequemlichkeit, manchmal aber auch, um diese an eine leicht abweichende Aufgabe im Prozess anzupassen.</p>
+
+<p>SDK Libraries für AWS sind beispielsweise Wrapper.</p>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<h3 id="General_knowledge">General knowledge</h3>
+
+<p>{{Interwiki("wikipedia", "Wrapper function")}} on Wikipedia</p>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a>
+
+  <ol>
+   <li>{{Glossary("API")}}</li>
+   <li>{{Glossary("Class")}}</li>
+   <li>{{Glossary("Function")}}</li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/de/glossary/xml/index.html b/files/de/glossary/xml/index.html
new file mode 100644
index 0000000000..4c91829a12
--- /dev/null
+++ b/files/de/glossary/xml/index.html
@@ -0,0 +1,18 @@
+---
+title: XML
+slug: Glossary/XML
+tags:
+  - CodingScripting
+  - Glossary
+  - XML
+translation_of: Glossary/XML
+---
+<p>Die Erweiterbare Auszeichungssprache (englisch: <em>eXtensible Markup Language</em>, kurz XML) ist eine generische Auszeichnungssprache, die vom {{Glossary("W3C")}} spezifiziert wird. Die IT-Industrie verwendet viele Sprachen, die auf XML basieren, zur Datenbeschreibung.</p>
+
+<p>XML-Tags ähneln HTML-Tags, aber XML ist wesentlich flexibler, denn es erlaubt Nutzern, eigene Tags zu definieren. So verhält sich XML wie eine Meta-Sprache - das heißt, sie kann verwendet werden, um andere Sprachen zu definieren, wie zum Beispiel {{Glossary("RSS")}}. Außerdem ist HTML Sprache zur Darstellung von Inhalten, während XML eine deskriptive Sprache ist. Das heißt, dass XML viel größere Anwendungsgebiete als nur das Web hat. Zum Beispiel können Webdienste XML nutzen, um Anfragen und Antworten zu übertragen.</p>
+
+<h2 id="Mehr_Erfahren">Mehr Erfahren</h2>
+
+<ul>
+ <li><a href="/de/docs/XML_Einf%C3%BChrung">XML Einführung</a></li>
+</ul>
diff --git a/files/de/installationsmanifest/index.html b/files/de/installationsmanifest/index.html
new file mode 100644
index 0000000000..b0ce828915
--- /dev/null
+++ b/files/de/installationsmanifest/index.html
@@ -0,0 +1,328 @@
+---
+title: Installationsmanifest
+slug: Installationsmanifest
+tags:
+  - Add-ons
+  - Erweiterungen
+  - Toolkit API
+translation_of: Archive/Add-ons/Install_Manifests
+---
+<h2 id="Einführung">Einführung</h2>
+<p>Ein Installationsmanifest ist eine Datei, die von einer XUL-Anwendung mit einem Add-on Manager benutzt wird, um Information über das zu installierende Add-on zu erhalten. Es enthält Metadaten zur Identifikation des Add-ons und gibt Auskunft darüber, wer es erstellt hat, wo weiterführende Informationen zu finden sind, welche Versionen mit welcher Anwendung kompatibel ist, wie das Add-on zu aktualisieren ist, usw.</p>
+<p>Das Format eines Installationsmanifests ist RDF/XML.</p>
+<p>Die Datei muss den Namen <code>install.rdf</code> haben und sich auf der obersten Verzeichnisebene in der XPI-Datei eines Add-ons befinden.</p>
+<h2 id="Aufbau">Aufbau</h2>
+<p>Der grundlegende Aufbau eines Installationsmanifests sieht folgendermaßen aus:</p>
+<pre>&lt;?xml version="1.0"?&gt;
+
+&lt;RDF xmlns="<span class="nowiki">http://www.w3.org/1999/02/22-rdf-syntax-ns#</span>"
+     xmlns:em="<span class="nowiki">http://www.mozilla.org/2004/em-rdf#</span>"&gt;
+  &lt;Description about="urn:mozilla:install-manifest"&gt;
+    &lt;!-- Eigenschaften --&gt;
+  &lt;/Description&gt;
+&lt;/RDF&gt;
+</pre>
+<p>Einige Eigenschaften sind erforderlich, andere sind optional. Einige sind einfache Zeichenketten, während andere komplexe Ressourcen sind.</p>
+<h2 id="Referenz_erforderlicher_Eigenschaften">Referenz erforderlicher Eigenschaften</h2>
+<p>Diese Eigenschaften müssen in Ihrem Installationsmanifest korrekt angegeben werden, andernfalls wird Ihr Add-on eventuell nicht installiert.</p>
+<h3 id="id">id</h3>
+<p>Die ID der Erweiterung, nämlich entweder eine:</p>
+<ul>
+ <li><a href="/de/docs/GUIDs_generieren" title="GUIDs generieren">GUID</a> (Firefox 1.0)</li>
+ <li>{{ Fx_minversion_inline(1.5) }} Eine Zeichenkette folgender Form: <code><a class="link-mailto" href="mailto:extensionname@organization.tld" rel="freelink">extensionname@organization.tld</a></code></li>
+</ul>
+<p>Letztere Form ist deutlich einfacher zu erzeugen und zu verändern. Firefox 1.5 ist in der Lage sicherzustellen, dass Ihre ID dem einen oder anderen Format entspricht und wird die Installation eines Add-ons verweigern, sollte die ID nicht wohlgeformt sein.</p>
+<p><strong>Beispiele</strong></p>
+<pre>&lt;em:id&gt;<a class="link-mailto" href="mailto:myextension@mysite.com" rel="freelink">myextension@mysite.com</a>&lt;/em:id&gt;
+
+&lt;em:id&gt;{daf44bf7-a45e-4450-979c-91cf07434c3d}&lt;/em:id&gt;
+</pre>
+<h3 id="version">version</h3>
+<p>Eine Zeichenkette, welche die Version des vorliegendenAdd-ons angibt.</p>
+<p>Für Firefox/Thunderbird 1.0 muss das Format den Regeln genügen, die in "<a href="/de/docs/Versionen,_Aktualisierung_und_Kompatibilität_von_Add-ons" title="Versionen, Aktualisierung und Kompatibilität von Add-ons">Versionen, Aktualisierung und Kompatibilität von Add-ons</a>" beschrieben sind.<br>
+ Für Firefox/Thunderbird 1.5, siehe <a href="/de/docs/Toolkit_Versionsformate" title="Toolkit Versionsformate">Toolkit Versionsformate</a>.</p>
+<p><strong>Beispiele</strong></p>
+<pre>&lt;em:version&gt;2.0&lt;/em:version&gt;
+
+&lt;em:version&gt;1.0.2&lt;/em:version&gt;
+
+&lt;em:version&gt;0.4.1.2005090112&lt;/em:version&gt;
+
+</pre>
+<p><strong>Firefox 1.5 / XULRunner 1.8</strong> - Add-ons mit einem ungültigen Versionsformat werden nicht installiert. Das Format unterscheidet sich vom 1.0er, ist jedoch dazu abwärtskompatibel.</p>
+<p><strong>Für auf addons.mozilla.org bereitgestellte Add-ons</strong> - Mozillas Aktualisierungswebseite verpackt Ihr Add-on möglicherweise neu und berichtigt Versionszeichenketten oder weist sie zurück.</p>
+<h3 id="type">type</h3>
+<p>Ein ganzzahliger Wert, der für den Typ des Add-ons steht.</p>
+<table>
+ <tbody>
+  <tr>
+   <td>2</td>
+   <td>Erweiterungen</td>
+  </tr>
+  <tr>
+   <td>4</td>
+   <td>Theme</td>
+  </tr>
+  <tr>
+   <td>8</td>
+   <td>Lokalisierung</td>
+  </tr>
+  <tr>
+   <td>32</td>
+   <td><a href="/en/Multiple_Item_Packaging" title="en/Multiple Item Packaging">Multiple Item Package</a></td>
+  </tr>
+ </tbody>
+</table>
+<p><strong>Beispiele</strong></p>
+<pre>&lt;em:type&gt;2&lt;/em:type&gt;
+</pre>
+<p>{{ Fx_minversion_inline(1.5) }} Diese Eigenschaft wurde in Firefox 1.5 hinzugefügt und ist nur erforderlich für Add-on Typen, die keine Erweiterungen und Themen sind.</p>
+<p>{{ Fx_minversion_inline(3) }} Firefox 2 und früher unterstützen einen Wert von "16", welcher Plug-ins repräsentierte. In Firefox 3 wurde dies entfernt.</p>
+<h3 id="targetApplication">targetApplication</h3>
+<p>Ein Objekt, welches eine Ziel-Applikation des Add-ons festlegt. Das bedeutet, dass das Add-on mit der Anwendung arbeitet, welche mit der ID Eigenschaft (<code>&lt;em:id&gt;</code>) festgelegt wurde (eine Liste von Anwendungs-IDs und gültigen min/maxVersions für diese, siehe <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/pages/appversions">Valid application versions for add-on developers</a>[engl.]) und welche der minimalen Version (<code>&lt;em:minVersion&gt;</code>) bis und einschließlich der maximalen Version (<code>&lt;em:maxVersion&gt;</code>) entspricht. Diese Versionsangaben sind in der gleichen Weise formatiert, wie auch die <a href="/de/docs/Installationsmanifest#version" title="Installationsmanifest#version"><code>version</code> Eigenschaft</a> und wird mit der Anwendungsversion verglichen. Das erlaubt dem Erweiterungsautor, festzulegen, welche Version von Firefox getestet wurde.</p>
+<div class="note">
+ Erweiterungen, die kompatibel mit Firefox 3.5 sind, sollten eine <code>maxVersion</code> von <code>3.5.*</code> festlegen, sodass sie automatisch kompatibel mit Sicherheitsupdates sind. Für Firefox 3.0 sollte eine <code>maxVersion</code> von<code> 3.0.*</code> verwendet werden. Erweiterungen, die nur mit Firefox oder Thunderbird 2 kompatibel sind, sollten eine <code>maxVersion</code> von <code>2.0.0.*</code> festlegen.</div>
+<p>Das Installationsmanifest muss wenigsten eine dieser Objekte festlegen und kann weitere festlegen, wenn das Add-on auf mehrere Anwendungen zielt, die der Add-on Manager unterstützt (z.B. Firefox and Thunderbird).</p>
+<p><strong>Beispiele</strong></p>
+<pre>&lt;em:targetApplication&gt;
+ &lt;Description&gt;
+  &lt;em:id&gt;{ec8030f7-c20a-464f-9b0e-13a3a9e97384}&lt;/em:id&gt; <span class="comment">Firefox</span>
+  &lt;em:minVersion&gt;1.5&lt;/em:minVersion&gt;
+  &lt;em:maxVersion&gt;3.0.*&lt;/em:maxVersion&gt;
+ &lt;/Description&gt;
+&lt;/em:targetApplication&gt;
+</pre>
+<p>{{ Fx_minversion_inline(3) }} Auf Gecko 1.9 basierte Anwendungen erlauben Ihnen eine spezielle <code>targetApplication </code>ID <code class="plain">toolkit@mozilla.org</code> zu verwenden, um auszudrücken, dass das Add-on kompatibel mit jeder Toolkit-Anwendung ist, die auf die <code>minVersion</code> und <code>maxVersion</code> passt.</p>
+<h3 id="name">name</h3>
+<p>Der Name des Add-ons - vorgesehen für die Anzeige auf der Benutzeroberfläche.</p>
+<p><strong>Beispiele </strong></p>
+<pre>&lt;em:name&gt;Meine Erweiterung&lt;/em:name&gt;
+</pre>
+<h2 id="Referenz_optionaler_Eigenschaften">Referenz optionaler Eigenschaften</h2>
+<p>Abhängig von den Fähigkeiten Ihres Add-ons müssen diese Eigenschaften gegebenenfalls angegeben werden.</p>
+<h3 id="bootstrap">bootstrap</h3>
+<p>{{ Fx_minversion_inline(4) }} Ein boolescher Wert, welcher der Anwendung mitteilt, ob die Erweiterung ohne Neustart installiert, deinstalliert oder aktualisiert werden kann. Das funktioniert zur Zeit nur für Add-ons mit em:type="2". Der Standardwert ist <code>false</code>. Für weitere Informationen, siehe <a href="/de/docs/Erweiterungen/Bootstrapped_Extensions" title="Erweiterungen/Bootstrapped Extensions">Bootstrapped Extensions</a>.</p>
+<h3 id="unpack">unpack</h3>
+<p>{{ Fx_minversion_inline(4) }} Ein boolescher Wert, welcher angibt, ob die Erweiterung es erfordert, dass die ihre Dateien in ein Verzeichnis entpackt werden müssen, damit diese funktioniert oder ob die Erweiterung direkt vom XPI geladen werden kann. In Versionen vor Gecko 2.0 werden alle Erweiterungen entpackt, in Gecko 2.0 und später wird standardmäßig nicht entpackt. Falls eine Erweiterung folgendes enthält, muss diese entpackt werden:</p>
+<ul>
+ <li>Binäre XPCOM Komponenten</li>
+ <li>DLLs von ctypes geladen</li>
+ <li>Suchplugins</li>
+ <li>Wörterbücher</li>
+ <li>Fenster-Icons</li>
+</ul>
+<h3 id="localized">localized</h3>
+<p>{{ Fx_minversion_inline(3) }} Den Namen, die Beschreibung, die Namen von Mitwirkenden und weitere Metadaten können Sie hiermit sprachlich anpassen. Mindestens ein <code>em:locale</code> muss von der angepassten Beschreibung spezifiziert werden, um anzuzeigen für welche Sprachregionen die Information genutzt werden soll.</p>
+<p><strong>Beispiele</strong></p>
+<p>Dies legt ein Reihe von Add-on Metadaten fest, die angezeigt werden, wenn die Anwendung im de-DE Sprachpaket läuft.</p>
+<pre>&lt;em:localized&gt;
+  &lt;Description&gt;
+    &lt;em:locale&gt;de-DE&lt;/em:locale&gt;
+    &lt;em:name&gt;Tab Sidebar&lt;/em:name&gt;
+    &lt;em:description&gt;Zeigt in einer Sidebar Vorschaubilder der Inhalte aller offenen Tabs an.&lt;/em:description&gt;
+  &lt;/Description&gt;
+&lt;/em:localized&gt;
+</pre>
+<p>Die folgenden Eigenschaften, die auch auf dieser Seite genannt werden, können in die Eigenschaft "localized" eingefügt werden:</p>
+<ul>
+ <li>name</li>
+ <li>description</li>
+ <li>creator</li>
+ <li>homepageURL</li>
+ <li>developer</li>
+ <li>translator</li>
+ <li>contributor</li>
+</ul>
+<p>Weitere Dokumentation lässt sich unter <a href="/de/docs/Lokalisierung_von_Erweiterungsbeschreibungen" title="Lokalisierung von Erweiterungsbeschreibungen">Lokalisierung von Erweiterungsbeschreibungen</a> finden.</p>
+<h3 id="description">description</h3>
+<p>Eine Kurzbeschreibung des Add-ons - vorgesehen für die Anzeige auf der Benutzeroberfläche. Die Beschreibung sollte in einer kurzen Textzeile Platz finden.</p>
+<p><strong>Beispiele</strong></p>
+<pre>MegaInternetPhoneCall;em:description&gt;Fortgeschrittene foo-Werkzeuge.&lt;/em:description&gt;
+</pre>
+<h3 id="creator">creator</h3>
+<p>Der Name des Erstellers/Hauptentwicklers - vorgesehen für die Anzeige auf der Benutzeroberfläche.</p>
+<p><strong>Beispiele</strong></p>
+<pre>&lt;em:creator&gt;John Doe&lt;/em:creator&gt;
+</pre>
+<p>oder</p>
+<pre>&lt;em:creator&gt;CoolExtension Team&lt;/em:creator&gt;
+</pre>
+<h3 id="developer">developer</h3>
+<p>{{ Fx_minversion_inline(2) }} Entwicklername(n). Sie können diesen Wert mehrfach angeben, um die Namen mehrerer Entwickler anzugeben.</p>
+<p><strong>Beispiele</strong></p>
+<pre>&lt;em:developer&gt;Jane Doe&lt;/em:developer&gt;
+&lt;em:developer&gt;Koos van der Merwe&lt;/em:developer&gt;
+</pre>
+<h3 id="translator">translator</h3>
+<p>{{ Fx_minversion_inline(2) }} Übersetzername(n). Sie können diesen Wert mehrfach angeben, um die Namen mehrerer Übersetzer anzugeben.</p>
+<p><strong>Beispiele</strong></p>
+<pre>&lt;em:translator&gt;Janez Novak&lt;/em:translator&gt;
+&lt;em:translator&gt;Kari Nordmann&lt;/em:translator&gt;
+</pre>
+<h3 id="contributor">contributor</h3>
+<p>Name(n) zusätzliche(r) Mitwirkende(r). Sie können diesen Wert mehrfach angeben, um die Namen mehrerer Mitwirkender anzugeben.</p>
+<p><strong>Beispiele</strong></p>
+<pre>&lt;em:contributor&gt;John Doe&lt;/em:contributor&gt;
+
+&lt;em:contributor&gt;John Doe&lt;/em:contributor&gt;
+&lt;em:contributor&gt;Jane Doe&lt;/em:contributor&gt;
+&lt;em:contributor&gt;Elvis Presley&lt;/em:contributor&gt;
+</pre>
+<h3 id="homepageURL">homepageURL</h3>
+<p>Eine Verknüpfung zur Seite des Zusatzes - vorgesehen für die Anzeige auf der Benutzeroberfläche.</p>
+<p><strong>Beispiele</strong></p>
+<pre>&lt;em:homepageURL&gt;<span class="nowiki">http://www.foo.com/</span>&lt;/em:homepageURL&gt;
+</pre>
+<h3 id="updateURL">updateURL</h3>
+<p>Ein Link zu einer Aktualisierungsdatei des Manifests, welches verfügbare Updates für das Add-on festlegt. Das Format ist unten beschrieben. Wenn aktiviert, überprüft der Add-on Manager regelmäßig diese Manifestdatei, um festzustellen, ob neuere Versionen verfügbar sind.</p>
+<div class="note">
+ <strong>Hinweis:</strong> Es wird stark empfohlen, dass die <code>updateURL</code> ein HTTPS (sicherer) Link ist. Nicht sicherere Aktualisierungs-URLs können von Malware infiziert werden und führen dazu, dass Malware auf den Computer des Benutzers geschleust wird. <strong>Alternativ können Sie Ihre Erweiterung auf </strong><a class="external" href="http://addons.mozilla.org"><strong>AMO</strong></a><strong> bereitstellen und <code>updateURL</code> komplett weglassen.</strong> Sicherheitsupdates werden automatisch bereitgestellt.</div>
+<p>{{ Fx_minversion_inline(3) }} Aus Sicherheitsgründen erfordern Gecko 1.9 Anwendungen, dass Sie eine HTTPS <code>updateURL</code> oder einen <code><a href="#updateKey">updateKey</a></code>angeben müssen.</p>
+<p>Ihr Server muss diese Datei als <code>text/rdf</code>, <code>text/xml</code> oder <code>application/xml+rdf</code> ausliefern, sonst funktioniert der Update-Checker nicht.</p>
+<p>Der Add-on Manager wird die folgenden Werte in der URLersetzen, falls Sie das RDF dynamisch generieren wollen, z.B. mit PHP oder CGI:</p>
+<table>
+ <tbody>
+  <tr>
+   <td><code>%REQ_VERSION%</code></td>
+   <td>Die Version der Anfrage. Aktuell 1</td>
+  </tr>
+  <tr>
+   <td><code>%ITEM_ID%</code></td>
+   <td>Die<code> id</code> des Add-ons, welches aktualisiert werden soll</td>
+  </tr>
+  <tr>
+   <td><code>%ITEM_VERSION%</code></td>
+   <td>Die <code>version</code> des Add-ons, welches aktualisiert werden soll</td>
+  </tr>
+  <tr>
+   <td><code>%ITEM_MAXAPPVERSION%</code></td>
+   <td>Die <code>maxVersion</code> des <code>targetApplication</code> Objekts, im Bezug zur aktuellen Anwendung für das zu aktualisierende Add-on.</td>
+  </tr>
+  <tr>
+   <td><code>%ITEM_STATUS%</code></td>
+   <td>{{ Fx_minversion_inline(2) }} Komma-getrennte Liste der Add-on Status in der Applikation. Enthält mindestens entweder <code>userEnabled</code> oder <code>userDisabled</code> plus eine Nummer von <code>incompatible</code>, <code>blockslisted</code> oder <code>needsDependencies</code>.</td>
+  </tr>
+  <tr>
+   <td><code>%APP_ID%</code></td>
+   <td>Die <code>id</code> der aktuellen Anwendung</td>
+  </tr>
+  <tr>
+   <td><code>%APP_VERSION%</code></td>
+   <td>Die <code>Version</code> der Anwendung, um auf Updates zu prüfen</td>
+  </tr>
+  <tr>
+   <td><code>%CURRENT_APP_VERSION%</code></td>
+   <td>{{ Fx_minversion_inline(3.5) }} Die <code><span style="font-family: Verdana,Tahoma,sans-serif;">V</span>ersion</code> der aktuellen Anwendung</td>
+  </tr>
+  <tr>
+   <td><code>%APP_OS%</code></td>
+   <td>{{ Fx_minversion_inline(1.5) }} Der Wert von <code><a href="/en/OS_TARGET" title="en/OS_TARGET">OS_TARGET</a></code> aus dem Firefox Build-System, welcher das verwendete Betriebssystem identifiziert.</td>
+  </tr>
+  <tr>
+   <td><code>%APP_ABI%</code></td>
+   <td>{{ Fx_minversion_inline(1.5) }} Der Wert von <code><a href="/en/XPCOM_ABI" title="en/XPCOM_ABI">TARGET_XPCOM_ABI</a></code> aus dem Firefox Build-System, welcher die Architektur zur Kompilierung der aktuellen Anwendung enthält.</td>
+  </tr>
+  <tr>
+   <td><code>%APP_LOCALE%</code></td>
+   <td>{{ Fx_minversion_inline(3) }} Die aktuelle Sprache der Anwendung.</td>
+  </tr>
+ </tbody>
+</table>
+<p><strong>Beispiele</strong></p>
+<pre>&lt;em:updateURL&gt;<span class="nowiki">http://www.foo.com/update.cgi?id=%ITEM_ID%&amp;amp;version=%ITEM_VERSION%</span>&lt;/em:updateURL&gt;
+&lt;em:updateURL&gt;<span class="nowiki">http://www.foo.com/extension/windows.rdf</span>&lt;/em:updateURL&gt;
+</pre>
+<p><strong>Für Add-ons, die auf addons.mozilla.org bereitgestellt werden:</strong> Sie müssen keine <code>updateURL</code> Eigenschaft angeben. Standardmäßig werden Mozilla Applikationen über den Addon Manager (wie Firefox und Thunderbird) automatisch Anfragen an <code>addons.mozilla.org</code> senden. Jedes Mal, wenn Sie eine neue Version Ihres Add-ons hochladen oder die Kompatibilitätsparameter ändern, wird Ihr Update-Manifest automatisch generiert. Add-ons, die aktuell als <a class="link-https" href="https://addons.mozilla.org/firefox/pages/experimentalAddons">experimental</a> markiert sind, werden aus Gründen der Sicherheit nicht aktualisiert.</p>
+<p><strong>Format des Update-Manifests:</strong> Das Update-Manifest ist eine RDF/XML Datenquelle. Beispiele eines Update-Manifests, siehe <a href="/de/docs/Versionen,_Aktualisierung_und_Kompatibilität_von_Add-ons" title="Versionen, Aktualisierung und Kompatibilität von Add-ons">Versionen, Aktualisierung und Kompatibilität von Add-ons</a>.</p>
+<h3 id="updateKey">updateKey</h3>
+<p>{{ Gecko_minversion_header(1.9) }} {{ Fx_minversion_header(3) }}</p>
+<p>Um die Sicherheit eines Updates von RDF Daten zu gewährleisten, welches über HTTP empfangen wird, müssen Sie eine digitale Signatur, um die Inhalte der Daten zu verifizieren, hinzufügen. Um dies zu machen, müssen Sie den öffentlichen Teil des kryptographischen Schlüssel in einem updateKey in der install.rdf Datei des Add-ons notieren. Dieser kann über ein Tool generiert werden: <a href="/de/docs/McCoy" title="McCoy">McCoy</a>. Zeilenumbrüche und Leerzeichen werden ignoriert.</p>
+<p><strong>Beispiele</strong></p>
+<pre> &lt;em:updateKey&gt;MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDK426erD/H3XtsjvaB5+PJqbhj
+               Zc9EDI5OCJS8R3FIObJ9ZHJK1TXeaE7JWqt9WUmBWTEFvwS+FI9vWu8058N9CHhD
+               NyeP6i4LuUYjTURnn7Yw/IgzyIJ2oKsYa32RuxAyteqAWqPT/J63wBixIeCxmysf
+               awB/zH4KaPiY3vnrzQIDAQAB&lt;/em:updateKey&gt;
+</pre>
+<h3 id="optionsURL">optionsURL</h3>
+<p>Die <code>chrome://</code> URL des Dialogfensters für die Optionen der Erweiterung. Nur für Erweiterungen von Nutzen. Sofern diese Eigenschaft angegeben ist, wird bei Auswahl dieser Erweiterung in der Erweiterungsliste die Schaltfläche "Einstellungen" auswählbar, welche auf Klick hin dieses Dialogfenster anzeigt.</p>
+<p><strong>Beispiele</strong></p>
+<pre>&lt;em:optionsURL&gt;<a class="external" rel="freelink">chrome://myext/content/options.xul</a>&lt;/em:optionsURL&gt;
+</pre>
+<h3 id="aboutURL">aboutURL</h3>
+<p>Die <code>chrome://</code>-URL des Dialogfensters für Information über die Erweiterung. Nur für Erweiterungen von Nutzen. Sofern diese Eigenschaft angegeben ist, wird bei Auswahl dieser Erweiterung in der Erweiterungsliste ein entsprechender Eintrag im Kontextmenü der Erweiterung verfügbar, welcher auf Auswahl hin dieses Dialogfenster statt einer vorgegebenen Variante anzeigt.</p>
+<p><strong>Beispiele</strong></p>
+<pre>&lt;em:aboutURL&gt;<a class="external" rel="freelink">chrome://myext/content/about.xul</a>&lt;/em:aboutURL&gt;
+</pre>
+<h3 id="iconURL">iconURL</h3>
+<p>Eine <code>chrome://</code> URL zu einem 32x32 Icon, welches in der Add-on List angezeigt wird. Wird diese Eigenschaft nicht angegeben, wird das Standardicon verwendet.</p>
+<pre>&lt;em:iconURL&gt;<a class="external" rel="freelink">chrome://myext/skin/icon.png</a>&lt;/em:iconURL&gt;</pre>
+<div class="note">
+ <strong>Hinweis:</strong> Damit das obige Beispiel funktioniert, müssen Sie auch ein <code>skin Paket</code><span style="font-family: monospace;"> in Ihre</span> <code>chrome.manifest</code> Datei hinzufügen. Siehe <a href="/de/docs/Chrome_Registrierung#skin" title="Chrome Registrierung#skin">Chrome Registrierung#skin</a>. Alternativ können Sie Ihr Icon in das Verzeichnis packen, welches Sie in Ihrem <code>content</code> Paket festgelegt haben.</div>
+<p>{{ gecko_minversion_note("1.9.2", "Ab Gecko 1.9.2 (Firefox 3.6) können Sie auch einfach Ihr Icon <code>icon.png</code> nennen und es in das Basisverzeichnis des Add-ons platzieren. Das erlaubt Ihnen Ihr Add-on Icon sogar anzuzeigen, wenn Ihr Add-on deaktiviert ist oder im Manifest kein <code>iconURL</code> Eintrag vorhanden ist.") }}</p>
+<h3 id="targetPlatform">targetPlatform</h3>
+<p>{{ Fx_minversion_inline(1.5) }} Eine Zeichenkette, welche die Plattform angibt, die vom Add-on unterstützt wird. Enthält entweder den Wert von OS_TARGET allein oder in Kombination mit <a href="/en/XPCOM_ABI" title="en/XPCOM_ABI">TARGET_XPCOM_ABI</a>, getrennt durch einen Unterstrich (_).</p>
+<p>Sie können die Eigenschaft targetPlatform je Manifest mehrfach angeben. Passt einer der Werte zu den Parametern, mit denen die Anwendung gebaut wurde, wird das Add-on installiert; anderenfalls erhält der Benutzer eine entsprechende Fehlermeldung.</p>
+<p><strong>Beispiele</strong></p>
+<pre>&lt;em:targetPlatform&gt;WINNT_x86-msvc&lt;/em:targetPlatform&gt;
+
+&lt;em:targetPlatform&gt;Linux&lt;/em:targetPlatform&gt;
+
+&lt;em:targetPlatform&gt;Darwin_ppc-gcc3&lt;/em:targetPlatform&gt;
+
+&lt;em:targetPlatform&gt;SunOS_sparc-sunc&lt;/em:targetPlatform&gt;
+</pre>
+<p>Normalerweise verwenden Sie nur den OS Teil für Themes und Erweiterungen, die nicht komplett System-übergreifend sind. Für Erweiterungen mit binären (kompilierten) Komponenten sollten sie aber niemals das OSalleine sonder mit <a href="/de/docs/XPCOM_ABI" title="XPCOM_ABI">ABI (s)</a> angeben, mit welchen Sie die Komponenten kompiliert haben. Wenn Sie mehrere Versionen der Komponenten einbinden wollen, sollten Sie <a href="/de/docs/Bundles#Plattformspezifische_Unterverzeichnisse" title="Bundles#Plattformspezifische Unterverzeichnisse">Plattform-spezifische Unterverzeichnisse</a> verwenden.</p>
+<p><strong>Hinweise</strong></p>
+<ul>
+ <li>In der gleichen Manifestdatei, können Sie sogar Werte mit und ohne ABI mischen. Wenn ein Wert für das OS der Anwendung auf ein bestimmtes ABI stoßt, welches wichtig für das OS ist, wird die Anwendung die Installation ablehnen, wenn die gefundene OS/ABI Kombination nicht passt. Das bedeutet, wenn alle obigen Beispiele in einem Manifest auftreten, wird das Add-on auf jedem Linux Build installiert werden, egal welches ABI, aber nicht auf einem Windows Cygwin Build.</li>
+</ul>
+<ul>
+ <li>Es gibt Builds von Firefox und Thunderbird, welche ihre ABI nicht "wissen" (seltene Plattformen oder keine offiziellen Builds). Diese Builds werden jede Installation eines Add-ons ablehnen, die eine bestimmtes ABI für ihre Plattform erfordern.</li>
+</ul>
+<p>Diese Eigenschaft wurde für Firefox/Thunderbird 1.5 hinzugefügt. Vorherige Versionen dieser Anwendungen werden die Einschränkungen ignorieren und das Add-on ungeachtet der Plattform installieren.</p>
+<h3 id="requires">requires</h3>
+<p>{{ Fx_minversion_inline(2) }} Dieses Tag hat ein ähnliches Syntax wie das <code>&lt;em:targetApplication&gt;</code> Tag. Wenn das Add-on ,von dem <code>&lt;em:id&gt;</code> Tag festgelegt, nicht installiert ist oder eine nicht kompatible Version hat, wird der Erweiterungsmanager die Erweiterung deaktivieren und die Nachricht anzeigen "Erfordert zusätzliche Funktionen". Sie können so viele <code>&lt;em:requires&gt;</code> Tags wie Sie möchten hinzufügen. Ihre Erweiterung wird deaktiviert, wenn eines der festlegten Anforderungen fehlschlägt.</p>
+<p><strong>Beispiele</strong></p>
+<pre>&lt;em:requires&gt;
+   &lt;Description&gt;
+     &lt;!-- Lightning --&gt;
+     &lt;em:id&gt;{e2fda1a4-762b-4020-b5ad-a41df1933103}&lt;/em:id&gt;
+     &lt;em:minVersion&gt;0.5pre&lt;/em:minVersion&gt;
+     &lt;em:maxVersion&gt;0.5pre&lt;/em:maxVersion&gt;
+   &lt;/Description&gt;
+ &lt;/em:requires&gt;
+</pre>
+<p><strong>Hinweise</strong></p>
+<ul>
+ <li>Aktuell werden nur <code>&lt;em:id&gt;</code>, <code>&lt;em:minVersion&gt;</code> und <code>&lt;em:maxVersion&gt;</code> innerhalb des <code>&lt;em:requires&gt;</code> Tag geparst.</li>
+ <li>Es ist zur Zeit nicht möglich Abhängigkeiten zu einem <code>&lt;em:targetApplication&gt; hinzuzufügen</code>. Siehe {{ interwiki('wikimo', 'Extension_Manager:Extension_Dependencies', 'wikimo:Extension Manager:Extension Dependencies') }} für weitere Details.</li>
+</ul>
+<p>Diese Eigenschaft wurde in Firefox/Thunderbird 2 hinzugefügt. Vorherige Versionen dieser Anwendungen werden diese Einschränkungen ignorieren und das Add-on unabhängig von den Anforderungen installieren.</p>
+<h2 id="Referenz_veralteter_Eigenschaften">Referenz veralteter Eigenschaften</h2>
+<p>Diese Eigenschaften waren in alten Versionen des Add-on Managers vorhanden, wurden aber mittlerweile durch neuere und bessere Mechanismen ersetzt.</p>
+<h3 id="file">file</h3>
+<p><strong>Firefox 1.0</strong> Diese Eigenschaft verwies auf eine chrome <code>.jar</code> Datei, die Chrome-Pakete enthielt, die eine Registrierung mit der Chrome-Registry erforderten.</p>
+<p>Die <code>&lt;em:file&gt;</code> Eigenschaft hat einen komplexen Objektwert. Die uri des Wertes ist <code>urn:mozilla:extension:file:jarFile.jar</code> wobei <code>jarFile.jar</code> derName der jar Datei ist, welche die Dateien des Chrome-Pakets enthält. Das könnte auch der Name eines Verzeichnisses sein, welches die Dateien des Chrome-Pakets enthält, un-jarred (z.B. <code>urn:mozilla:extension:file:directory</code>). In beiden Fällen müssen die Chrome Paketdatei(en) in dem <code><span style="font-family: Verdana,Tahoma,sans-serif;">c</span>hrome</code> Unterverzeichnis des XPI Archivs platziert werden.</p>
+<p>Dieses Objekt hat eine <code>package</code> Eigenschaft (mit einem Pfad in der jar Datei oder Verzeichnis, welches zum Ort der <code>contents.rdf</code> Datei führt, um die das Paket zu registrieren), eine <code>locale</code> Eigenschaft (genauso, registriert aber die Sprache) und eine <code>skin</code> Eigenschaft (genauso, aber registriert das Theme-Material).</p>
+<p>Bei Erweiterungen für Firefox 1.5, ist diese Eigenschaft nicht länger notwendig: Das <code><a href="/de/docs/Chrome_Registration" title="Chrome_Registration">chrome.manifest</a></code> im XPI wird verwendet um die Registrierungsareit zu verrichten. Wenn kein chrome.manifest vorhanden ist, wird diese Eigenschaft vom Addon Manager gelesen und ein chrome.manifest wird generiert.</p>
+<p><strong>Beispiele</strong></p>
+<pre>&lt;em:file&gt;
+ &lt;Description about="urn:mozilla:extension:file:myext.jar"&gt;
+  &lt;em:package&gt;content/myext/&lt;/em:package&gt;
+  &lt;em:locale&gt;locale/en-US/myext/&lt;/em:locale&gt;
+  &lt;em:skin&gt;skin/classic/myext/&lt;em:skin&gt;
+ &lt;/Description&gt;
+&lt;/em:file&gt;
+</pre>
+<p>Ein Installationsmanifest kann mehrere <code>file</code> Eigenschaften festlegen, eine für jede jar Datei oder Unterverzeichnis, welches Chrome zum registrieren enthält.</p>
+<h3 id="hidden">hidden</h3>
+<p><strong>Firefox 1.0</strong><strong> - 3.5</strong> Ein boolscher Wert, falls <code>true</code> wird das Add-on nicht in der Add-on Liste angezeigt, vorausgesetzt, dass das Add-on in einer {{ Anch("Restricted access area") }} installiert ist. (sodass es nicht für installierte Add-ons im Profil arbeitet).</p>
+<div class="note">
+ <strong>Hinweis:</strong> Diese Eigenschaft wird nicht mehr von Gecko 1.9.2 (Firefox 3.6)oder später unterstützt, um zu verhindern, dass Erweiterungen installiert werden, von denen der Benutzer nichts mitbekommt.</div>
+<p><strong>Beispieie</strong></p>
+<pre>&lt;em:hidden&gt;true&lt;/em:hidden&gt;
+</pre>
+<h2 id="Glossar">Glossar</h2>
+<h2 id="Restricted_access_area">Restricted access area</h2>
+<p>Ein <em>restricted access area</em> ist ein Installationort, welcher durch einen restricted-access Account eingeschränkt werden kann, unabhängig ob der Ort mit den aktuellen Benutzerrechten eingeschränkt ist oder nicht (siehe {{ Source("toolkit/mozapps/extensions/public/nsIExtensionManager.idl#80", "nsIInstallLocation::restricted") }}). Zur Zeit sind die <code>($APPDIR)/extensions</code> Ordner und die Registry Installationsorte unter <code>HKEY_LOCAL_MACHINE</code> (siehe <a href="/de/docs/Erweiterungen_über_die_Windows_Registrierung_hinzufügen" title="Erweiterungen über die Windows Registrierung hinzufügen">Erweiterungen über die Windows Registrierung hinzufügen</a> für Details) eingeschränkt</p>
+<p>Die <code>($PROFILE)/extensions</code> und <code>HKEY_CURRENT_USER</code> Installationsorte sind hingegen nicht beschränkt.</p>
diff --git a/files/de/installing_mercurial/index.html b/files/de/installing_mercurial/index.html
new file mode 100644
index 0000000000..823cf02406
--- /dev/null
+++ b/files/de/installing_mercurial/index.html
@@ -0,0 +1,165 @@
+---
+title: Installing Mercurial
+slug: Installing_Mercurial
+translation_of: Mozilla/Mercurial/Installing_Mercurial
+---
+<p>{{ Note('If you have not yet read the <a href="/en-US/docs/Mercurial_basics">Mercurial basics</a> do so now, or see <a href="/en-US/docs/Mercurial">Mercurial</a> for other resources.') }}</p>
+<h2 id="Installing" name="Installing">Installing</h2>
+<p>We recommend running a Mercurial no older than version 2.8. <strong>Version 2.9 or greater is highly recommended</strong>, as there are numerous bug fixes and performance enhancements.</p>
+<dl>
+ <dt>
+  On Windows:</dt>
+ <dd>
+  Mercurial comes with <a href="/En/Developer_Guide/Build_Instructions/Windows_Prerequisites#MozillaBuild_.2F_Pymake" title="En/Developer_Guide/Build_Instructions/Windows_Prerequisites#MozillaBuild_.2F_Pymake">MozillaBuild</a>, in the folder 'hg'.  See also <a class="link-https" href="https://wiki.mozilla.org/Mercurial_on_Windows" title="https://wiki.mozilla.org/Mercurial_on_Windows">wikimo:Mercurial on Windows</a>.</dd>
+ <dt>
+  Firefox build bootstrapper</dt>
+ <dd>
+  Try running the one-line system bootstrapper described <a href="/en-US/docs/Simple_Firefox_build/Linux_and_MacOS_build_preparation" title="/en-US/docs/Simple_Firefox_build/Linux_and_MacOS_build_preparation">here</a>. This will help ensure a modern version of Mercurial is installed.</dd>
+ <dt>
+  Using a package manager:</dt>
+ <dd>
+  If you use <code>apt-get</code>, <code>emerge</code>, <code>port</code>, <code>yast</code>, or <code>yum</code> to install software, just do the usual. If this gives you an old version (pre-1.5 -- check with <code>hg version</code>), you can update it using <code>easy_install</code> as follows:
+  <ul>
+   <li>Using apt-get:
+    <pre class="eval">sudo apt-get install python-setuptools python-dev build-essential
+sudo easy_install -U mercurial</pre>
+   </li>
+   <li>Using yum:
+    <pre class="eval">sudo yum install python-setuptools python-devel.i686
+sudo easy_install -U mercurial</pre>
+   </li>
+  </ul>
+ </dd>
+</dl>
+<dl>
+ <dt>
+  Other systems</dt>
+ <dd>
+  Otherwise, the <a class="external" href="http://www.selenic.com/mercurial/wiki/index.cgi/BinaryPackages">Mercurial binary packages</a> are for you.</dd>
+</dl>
+<h2 id="Basic_configuration">Basic configuration</h2>
+<p>You should configure Mercurial before submitting patches to Mozilla.</p>
+<p>If you will be pulling the Firefox source code or one of the derived repositories, the easiest way to configure Mercurial is to run the <em>mercurial-setup</em> mach command:</p>
+<pre>./mach mercurial-setup</pre>
+<p>This command starts an interactive wizard that will help ensure your Mercurial is configured with the latest recommended settings. This command will not change any files on your machine without your consent.</p>
+<p>If you don't have the Firefox source code available, you should edit your Mercurial configuration file to look like the following:</p>
+<pre class="eval">[ui]
+username = Your Real Name &lt;<a class="link-mailto" href="mailto:user@example.com" rel="freelink">user@example.com</a>&gt;
+merge = <em>your-merge-program</em> (or internal:merge)
+
+[diff]
+git = 1
+showfunc = 1
+unified = 8
+
+[defaults]
+commit = -v
+</pre>
+<p>On Windows, these settings can be added to <code>$HOME\.hgrc</code> or <code>$HOME\Mercurial.ini</code>, or, if you'd like global settings, <code>C:\mozilla-build\hg\Mercurial.ini</code> or <code>C:\Program Files\Mercurial\Mercurial.ini</code>. On UNIX-like systems, they should be in your <code>$HOME/.hgrc</code> file.</p>
+<p>You can configure the editor to use for commit messages using the <code>editor</code> option in the <code>[ui]</code> section or by setting the <code>EDITOR</code> environment variable.</p>
+<p>If you are trying to access the repository through a proxy server, see <a class="external" href="http://www.selenic.com/mercurial/hgrc.5.html#http-proxy" title="http://www.selenic.com/mercurial/hgrc.5.html#http-proxy">these instructions</a>.</p>
+<h2 id="Other_configuration_tips">Other configuration tips</h2>
+<h3 id="Merge_program" name="Merge_program">Merge program</h3>
+<p>After installing, <strong>choose a <a class="external" href="http://mercurial.selenic.com/wiki/MergeToolConfiguration">merge program</a></strong>. Seriously. Do it now. If you don't, Mercurial will choose one for you and spring it on you when you least expect it.</p>
+<p>A reasonable thing to do is to set <code>ui.merge=internal:merge</code> in the Mercurial configuration file (see below), which makes Mercurial try to merge changes and add the conflict markers (a la CVS) to the files that couldn't be merged.</p>
+<p>Under Ubuntu, you can install meld package, then in in the Mercurial configuration file (see below) set <code>ui.merge=meld</code></p>
+<p>You can see the list of merge conflicts by looking for "merging ... failed!" in the update output.</p>
+<h4 id="Configuring_kdiff3_as_a_merge_tool">Configuring kdiff3 as a merge tool</h4>
+<p>If you're on Linux and you have kdiff3 installed, you probably want to configure kdiff3 as a merge tool.  (It's better than meld because it will actually resolve a bunch of the conflicts without prompting you, generally quite accurately.)  You can do this by adding the following lines (which come from <code>contrib/mergetools.hgrc</code> in the Mercurial distribution):</p>
+<pre>[merge-tools]
+kdiff3.args=--auto -L1 base --L2 local --L3 other $base $local $other -o $output
+kdiff3.regkey=Software\KDiff3
+kdiff3.regappend=\kdiff3.exe
+kdiff3.fixeol=True
+kdiff3.gui=True
+
+</pre>
+<h3 id="Extensions">Extensions</h3>
+<p>There's a number of extensions you can enable. See <a href="http://mercurial.selenic.com/wiki/UsingExtensions" title="http://mercurial.selenic.com/wiki/UsingExtensions">http://mercurial.selenic.com/wiki/UsingExtensions</a>. Almost everyone should probably enable the following:</p>
+<ul>
+ <li>color - Colorize terminal output</li>
+ <li>histedit - Provides <em>git rebase --interactive</em> behavior.</li>
+ <li>pager - Feed command output into a pager (like <em>less</em>)</li>
+ <li>progress - Draw progress bars on long-running operations.</li>
+ <li>rebase - Ability to easily rebase patches on top of other heads.</li>
+ <li>transplant - Easily move patches between repositories, branches, etc.</li>
+ <li>mq - Easily maintain a series of patches on top of your tree, or even multiple different sets of patch queues. (see the <a href="/en-US/docs/Mercurial_Queues" title="/en-US/docs/Mercurial_Queues">Mercurial Queues</a> guide to learn more)</li>
+</ul>
+<p>These can all be turned on by just adding this to your .hgrc file:</p>
+<pre>[extensions]
+color =
+rebase =
+histedit =
+progress =
+transplant =
+pager =
+mq =
+
+[defaults]
+qnew = -U
+
+[mq]
+plain = True</pre>
+<p>In addition, there are some 3rd party extensions that are incredibly useful for basic development:</p>
+<dl>
+ <dt>
+  <a href="https://hg.mozilla.org/hgcustom/version-control-tools/file/default/hgext/mozext" title="https://hg.mozilla.org/users/gszorc_mozilla.com/hgext-gecko-dev">mozext</a></dt>
+ <dd>
+  Mozilla-specific functionality to aid in developing Firefox/Gecko.</dd>
+ <dt>
+  <a href="https://bitbucket.org/edgimar/crecord">qcrecord</a></dt>
+ <dd>
+  Provides a nice easy gui for splitting up patches into chunks. For a given patch you can type:
+  <pre>hg qcrefresh
+</pre>
+ </dd>
+ <dt>
+  <a href="https://bitbucket.org/sfink/mqext">mqext</a></dt>
+ <dd>
+  Overrides <code>qrefresh</code>, <code>qnew</code>, <code>qrename</code>, <code>qdelete</code>, <code>qimport</code>, and <code>qfinish</code> to commit to your <a href="https://developer.mozilla.org/en-US/docs/Creating_Mercurial_User_Repositories" title="https://developer.mozilla.org/en-US/docs/Creating_Mercurial_User_Repositories">versioned patch queue</a> automatically. This can be done through arguments to the commands, or automatically if you edit your .hgrc to include:
+  <pre>  [mqext]
+  mqcommit = auto
+</pre>
+  It also includes commands to suggest reviewers (<code>reviewers</code>) and a bug component (<code>components</code>) for your patch, to find bugs touching the files you are modifying (<code>bugs</code>), to show a patch (<code>qshow</code>), and to show what files the current patch touches (<code>qtouched</code>).</dd>
+ <dt>
+  <a href="https://github.com/pbiggar/trychooser">trychooser</a></dt>
+ <dd>
+  Automatically creates a try commit message and then pushes changes to Mozilla's Try infrastructure. Just run:
+  <pre>hg trychooser</pre>
+ </dd>
+ <dt>
+  <a href="https://hg.mozilla.org/users/robarnold_cmu.edu/qimportbz">qimportbz</a></dt>
+ <dd>
+  Import patches from Bugzilla. Creates a filename and commit message for you based on the bug's metadata.
+  <pre>hg qimport bz://1234567
+  </pre>
+ </dd>
+ <dt>
+  <a href="https://hg.mozilla.org/users/tmielczarek_mozilla.com/bzexport">bzexport</a></dt>
+ <dd>
+  Export patches to Bugzilla. There are quite a few optional arguments here to create new or update existing bugs with the attment, as well as auto matically request reviews. Type hg help bzexport for a full list but the basic syntax is:
+  <pre>hg bzexport -i 1234567</pre>
+ </dd>
+</dl>
+<p>Installing these is fairly easy. You'll just need to find a place on your system to store the extensions, and clone the extension repos into it:</p>
+<pre>hg clone https://bitbucket.org/edgimar/crecord
+hg clone https://bitbucket.org/sfink/mqext
+hg clone https://hg.mozilla.org/users/robarnold_cmu.edu/qimportbz
+git clone https://github.com/pbiggar/trychooser
+</pre>
+<p>And then add then to your .hgrc file</p>
+<pre>[extensions]
+qcrecord =  /path/to/crecord/crecord
+mqext =  path/to/mqext
+qimportbz =  path/to/qimportbz
+trychooser = path/to/trychooser/trychooser
+</pre>
+<h3 id="Configuring_the_try_repository">Configuring the try repository</h3>
+<p>If you have access to the <a class="link-https" href="https://wiki.mozilla.org/Build:TryServer" title="https://wiki.mozilla.org/Build:TryServer">try server</a> you may want to configure Mercurial so you can refer to it simply as "try", since it can be useful from all your trees.  This can be done by adding this to your ~/.hgrc (or Mercurial.ini):</p>
+<p> </p>
+<pre>[paths]
+try = ssh://hg.mozilla.org/try/
+</pre>
+<p>You can also configure short names like this that are specific to a particular repository by adding a [paths] section to the .hg/hgrc file within a repository.  There are two magic names, "default" and "default-push", which are used as the default push/pull targets.  (If "default" is specified and "default-push" is not, "default" is used for both.)</p>
+<p>Alternatively, you can install the <a class="link-https" href="https://bitbucket.org/sfink/trychooser" title="https://bitbucket.org/sfink/trychooser">trychooser extension</a> (<a class="link-https" href="https://github.com/pbiggar/trychooser" title="https://github.com/pbiggar/trychooser">older version</a>).</p>
+<p>{{ languages( { "fr": "fr/Installation_de_Mercurial" } ) }}</p>
diff --git a/files/de/learn/accessibility/accessibility_troubleshooting/index.html b/files/de/learn/accessibility/accessibility_troubleshooting/index.html
new file mode 100644
index 0000000000..5a427df730
--- /dev/null
+++ b/files/de/learn/accessibility/accessibility_troubleshooting/index.html
@@ -0,0 +1,111 @@
+---
+title: 'Aufgabe: Probleme bei der Zugänglichkeit beheben'
+slug: Learn/Accessibility/Accessibility_troubleshooting
+tags:
+  - Anfänger
+  - Aufgabe
+  - Barrierefreiheit
+  - CSS
+  - CodingSc
+  - HTML
+  - JavaScript
+  - Lernen
+  - WAI-ARIA
+translation_of: Learn/Accessibility/Accessibility_troubleshooting
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}</div>
+
+<p class="summary">In der Aufgabe dieses Moduls müssen Sie Probleme hinsichtlich Barrierefreiheit und Zugänglichkeit einer Beispielwebsite erkennen und beheben.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Voraussetzung:</th>
+   <td>Basic computer literacy, a basic understanding of HTML, CSS, and JavaScript, an understanding of the <a href="/en-US/docs/Learn/Accessibility">previous articles in the course</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Lernziel:</th>
+   <td>To test basic knowledge of accessibility fundamentals.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ausgangspunkt">Ausgangspunkt</h2>
+
+<p>Um mit der Aufgabe zu beginnen, laden Sie den <a href="https://github.com/mdn/learning-area/blob/master/accessibility/assessment-start/assessment-files.zip?raw=true">ZIP-Ordner mit den Beispieldateien</a> herunter. Extrahieren Sie die Inhalte in ein neues Verzeichnis auf Ihrem Computer.</p>
+
+<p>Die fertige Beispielseite sollte so aussehen:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14555/assessment-site-finished.png" style="border-style: solid; border-width: 1px; display: block; height: 457px; margin: 0px auto; width: 800px;"></p>
+
+<p>Sie werden einige Unterschiede / Probleme bei der Anzeige des Ausgangszustands der Aufgabe bemerken - dies ist hauptsächlich auf die Unterschiede im Markup zurückzuführen, die wiederum einige Stilprobleme verursachen, da das CSS nicht ordnungsgemäß angewendet wird. Keine Sorge - Sie werden diese Probleme in den nächsten Abschnitten beheben!</p>
+
+<h2 id="Projektbeschreibung">Projektbeschreibung</h2>
+
+<p>Für dieses Projekt wird Ihnen eine fiktive Naturseite präsentiert, die einen "sachlichen" Artikel über Bären enthält. Gegenwärtig gibt es eine Reihe von Problemen mit der Barrierefreiheit. Ihre Aufgabe ist es, die vorhandene Website zu erkunden und sie nach besten Kräften zu beheben, indem Sie die unten stehenden Fragen beantworten.</p>
+
+<h3 id="Farben">Farben</h3>
+
+<p>Aufgrund des momentanen Farbschemas ist der Text der Webseite schwierig zu lesen. Können Sie den momentanen Farbkontrast (Text/Hintergrund) testen und die Farben so ändern, um das Problem mit dem Farbkontrast zu lösen?</p>
+
+<h3 id="Semantisches_HTML">Semantisches HTML</h3>
+
+<ol>
+ <li>Der Inhalt der Website ist momentan nicht besonders zugänglich. Probieren Sie aus was passiert, wenn Sie durch die Website navigieren.</li>
+ <li>Können Sie den Text des Artikels so ändern, um einfacher mit einem Screenreader navigieren zu können?</li>
+ <li>Das Navigationsmenü der Website (eingebunden in <code>&lt;div class="nav"&gt;&lt;/div&gt;</code>) könnte zugänglicher werden, indem man es in das geignete semantische HTML5-Element einbettet.</li>
+</ol>
+
+<div class="note">
+<p><strong>Hinweis: </strong><strong>Sie müssen die CSS-Regelselektoren aktualisieren, die die Tags so formatieren, dass sie den semantischen Überschriften entsprechen. Sobald Sie Absatzelemente hinzufügen, werden Sie feststellen, dass das Styling besser aussieht.</strong></p>
+</div>
+
+<h3 id="Die_Bilder">Die Bilder</h3>
+
+<p>Die Bilder sind momenten nicht zugänglich für Benutzer von Screenreadern. Können Sie dies beheben?</p>
+
+<h3 id="Der_Musikplayer">Der Musikplayer</h3>
+
+<ol>
+ <li><font>The <code>&lt;audio&gt;</code> player isn't accessible to hearing impaired (deaf) people — can you add some kind of accessible alternative for these users?</font></li>
+ <li><font>The <code>&lt;audio&gt;</code> player isn't accessible to those using older browsers that don't support HTML5 audio. How can you allow them to still access the audio?</font></li>
+</ol>
+
+<h3 id="Die_Formulare">Die Formulare</h3>
+
+<ol>
+ <li><font>The <code>&lt;input&gt;</code> element in the search form at the top could do with a label, but we don't want to add a visible text label that would potentially spoil the design and isn't really needed by sighted users. How can you add a label that is only accessible to screenreaders?</font></li>
+ <li><font>The two <code>&lt;input&gt;</code> elements in the comment form have visible text labels, but they are not unambiguously associated with their labels — how do you achieve this? Note that you'll need to update some of the CSS rule as well.</font></li>
+</ol>
+
+<h3 id="Schaltfläche_zum_Ein-_und_Ausblenden_von_Kommentaren">Schaltfläche zum Ein- und Ausblenden von Kommentaren</h3>
+
+<p>Die Schaltfläche für das Ein- und Ausblenden der Kommentare ist momentan nicht zugänglich für die Benutzung mit der Tastatur. Können Sie die Schaltfläche so ändern, damit sie für die Benutzung mit der Tastatur zugänglich wird - hinsichtlich Fokussieren mit der Tabulator-Taste und Aktivieren mit der Return-Taste. </p>
+
+<h3 id="Die_Tabelle">Die Tabelle</h3>
+
+<p>Im momentanen Zustand ist die Datentabelle nicht sehr zugänglich. Es ist schwer für den Benutzer eines Screenreaders Datenreihen und Datenspalten miteinander zu verknüpen. Außerdem besitzt die Tabelle keine Zusammenfassung. Können Sie das HTML so erweitern, damit das Problem gelöst werden kann?</p>
+
+<h3 id="Weitere_Überlegungen">Weitere Überlegungen</h3>
+
+<p>Fallen Ihnen noch 2 weitere Verbesserungen für diese Seite ein um die Zugänglichkeit der Website zu verbessern?</p>
+
+<h2 id="Einschätzung">Einschätzung</h2>
+
+<p>Falls Sie diesen Test im Rahmen eines organisierten Kurses absolvieren, sollten Sie Ihre Arbeit Ihrem/r Mentor*in/Lehrkraft zur Bewertung überreichen können.<font> </font>Falls Sie selbstständig lernen, können Sie die Bewertungskriterien sehr einfach erhalten, indem Sie im<font> <a href="https://discourse.mozilla.org/t/accessibility-troubleshooting-assessment/24691">Diskussionsthread für diese Übung</a>, n</font>achfragen oder im <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC Channel auf <a href="https://wiki.mozilla.org/IRC" rel="noopener">Mozilla IRC</a>. Versuchen Sie es zunächst selbst -- mit Mogeleien ist nichts gewonnen!</p>
+
+<p><font>{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}</font></p>
+
+<h2 id="In_diesem_Modul">In diesem Modul</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></li>
+</ul>
diff --git a/files/de/learn/accessibility/index.html b/files/de/learn/accessibility/index.html
new file mode 100644
index 0000000000..ee1a19552e
--- /dev/null
+++ b/files/de/learn/accessibility/index.html
@@ -0,0 +1,62 @@
+---
+title: Barrierefreiheit
+slug: Learn/Accessibility
+tags:
+  - ARIA
+  - Anfänger
+  - Artikel
+  - Barrierefreiheit
+  - CSS
+  - Code Scripting
+  - HTML
+  - JavaScript
+  - Landing
+  - Lernen
+  - Modul
+translation_of: Learn/Accessibility
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Das Erlernen von HTML, CSS und JavaScript ist nützlich, wenn Sie ein Webentwickler werden wollen, aber Ihr Wissen muss weiter gehen als nur mit den Technologien - Sie müssen sie verantwortungsvoll nutzen, damit Sie das Publikum für ihre Websites maximieren und niemand daran hindern, sie zu benutzen. Um dies zu erreichen, müssen Sie sich an allgemeine "Best Practices halten (die in allen <a href="https://developer.mozilla.org/de/Learn/CSS">HTML</a>-, <a href="https://developer.mozilla.org/de/docs/Learn/CSS">CSS</a> und <a href="https://developer.mozilla.org/de/Learn/JavaScript">JavaScript</a>-Themen demonstriert werden), <a href="https://developer.mozilla.org/de/Learn/Tools_and_testing/Cross_browser_testing">Cross-Browser-Tests</a> durchführen und die Barrierefreiheit von anfang an berücksichtigen. In diesem Modul werden wir uns ausführlich mit Letzterem beschäftigen.</p>
+
+<h2 id="Voraussetzungen">Voraussetzungen</h2>
+
+<p>Um das Meiste aus diesem Modul herauszuholen, wäre es eine gute Idee, entweder mindestens die ersten beiden Module der <a href="https://developer.mozilla.org/de/Learn/HTML">HTML</a>-, <a href="https://developer.mozilla.org/de/docs/Learn/CSS">CSS</a>- und <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript</a>-Themen durchzuarbeiten, oder vielleicht sogar noch besser, die relevanten Teile des Barrierefreiheit Moduls durchzuarbeiten, während Sie die entsprechenden Technologiethemen durcharbeiten.</p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Wenn Sie auf einem Computer/Tablet/anderem Gerät arbeiten, auf dem sie keine eigenen Dateien erstellen können, können Sie die meisten Codebeispiele in einem Online-Codeprogramm wie <a href="http://jsbin.com/">JSBin</a> oder <a href="https://thimble.mozilla.org/de/">Thimble</a> ausprobieren.</p>
+</div>
+
+<h2 id="Leitfäden">Leitfäden</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/de/Learn/Accessibility/What_is_accessibility">Was ist Barrierefreiheit? </a></dt>
+ <dd>Dieser Artikel beginnt das Modul mit einem Blick auf was Barrierefreiheit eigentlich ist - das schließt ein, welche Personengruppen wir berücksichtigen müssen und warum, welche Werkzeuge verschiedene Leute verwenden, um mit dem Web zu interagieren, und wie wir Barrierefreitheit zu einem Teil unseres Web-Entwicklungs-Workflows machen können</dd>
+ <dt><a href="https://developer.mozilla.org/de/Learn/Accessibility/HTML" style="font-weight: 700;">HTML: Eine gute Basis für Erreichbarkeit</a></dt>
+ <dd>Ein großer Teil der Webinhalte kann zugänglich gemacht werden, indem sichergestellt wird, dass immer die richtigen HTML-Elemente für den richtigen Zweck verwendet werden. Dieser Artikel behandelt im Detail, wie HTML verwendet werden kann, um eine maximale Barrierefreiheit zu gewährleisten.  </dd>
+ <dt><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">Best Practices für CSS and JavaScript Barrierefreiheit</a></dt>
+ <dd>CSS und JavaScript haben bei richtiger Anwendung auch das Potenzial, barrierefreie Web-Erlebnisse zu ermöglichen, können aber bei Missbrauch die Barrierefreiheit erheblich einschränken. Dieser Artikel beschreibt einige CSS- und JavaScript-Best-Practices, die berücksichtigt werden sollten, um sicherzustellen, dass auch komplexe Inhalte so barrierefrei wie möglich sind.</dd>
+ <dt><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA Grundlagen</a></dt>
+ <dd>
+ <p>In Anlehnung an den vorangegangenen Artikel kann es manchmal schwierig sein, komplexe UI-Controls zu erstellen, die nicht semantisches HTML und dynamische, mit JavaScript aktualisierte Inhalte beinhalten. WAI-ARIA ist eine Technologie, die bei solchen Problemen helfen kann, indem sie weitere Semantiken hinzufügt, die Browser und unterstützende Technologien erkennen und verwenden können, um den Benutzern mitzuteilen, was vor sich geht. Hier zeigen wir, wie man es grundlegend einsetzt, um die Barrierefreiheit zu verbessern.</p>
+ </dd>
+ <dt><a href="/en-US/docs/Learn/Accessibility/Multimedia">Barrierefreies Multimedia</a></dt>
+ <dd>Eine weitere Kategorie von Inhalten, die Barrierefreiheitsprobleme verursachen können, sind Multimedia - Video-, Audio- und Bildinhalte. Diese müssen mit geeigneten textlichen Alternativen ausgestattet werden, damit sie von unterstützenden Technologien und ihren Nutzern verstanden werden können. Dieser Artikel zeigt wie dies richtig umgesetzt wird.</dd>
+ <dt><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile Barrierefreiheit</a></dt>
+ <dd>Da der Webzugriff auf mobilen Geräten heute so beliebt ist und Plattformen wie iOS und Android über vollwertige Barrierefreiheitswerkzeuge verfügen, ist es wichtig, die Barrierefreiheit Ihrer Webinhalte auf diesen Plattformen zu berücksichtigen. Dieser Artikel befasst sich mit mobilfunkspezifischen Überlegungen zur Barrierefreiheit.</dd>
+</dl>
+
+<h2 id="Aufgaben">Aufgaben</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Troubleshooting für Barrierefreiheit</a></dt>
+ <dd>In den Aufgaben für dieses Modul geben wir Ihnen eine einfache Seite mit einer Reihe von Problemen in der Barrierefreiheit, die Sie diagnostizieren und beheben müssen.</dd>
+</dl>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="https://egghead.io/courses/start-building-accessible-web-applications-today">Start Building Accessible Web Applications Today</a> — an excellent series of video tutorials by Marcy Sutton.</li>
+ <li><a href="https://dequeuniversity.com/resources/">Deque University resources</a> — includes code examples, screen reader references, and other useful resources.</li>
+ <li><a href="http://webaim.org/resources/">WebAIM resources</a> — includes guides, checklists, tools, and more.</li>
+</ul>
diff --git a/files/de/learn/common_questions/index.html b/files/de/learn/common_questions/index.html
new file mode 100644
index 0000000000..4aafae4a32
--- /dev/null
+++ b/files/de/learn/common_questions/index.html
@@ -0,0 +1,135 @@
+---
+title: Common questions
+slug: Learn/Common_questions
+tags:
+  - CodingScripting
+  - Infrastructure
+  - Learn
+  - NeedsTranslation
+  - TopicStub
+  - Web
+  - WebMechanics
+translation_of: Learn/Common_questions
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">This section of the Learning Area is designed to provide answers to common questions that may come up, which are not necessarily part of the structured core learning pathways (e.g. the <a href="/en-US/docs/Learn/HTML">HTML</a> or <a href="/en-US/docs/Learn/CSS">CSS</a> learning articles.) These articles are designed to work on their own.</p>
+
+<h2 id="How_the_Web_works">How the Web works</h2>
+
+<p>This section covers web mechanics —questions relating to general knowledge of the Web ecosystem and how it works.</p>
+
+<dl>
+ <dt>
+ <h3 id="How_does_the_Internet_work"><a href="/en-US/docs/Learn/Common_questions/How_does_the_Internet_work">How does the Internet work?</a></h3>
+ </dt>
+ <dd>The <strong>Internet</strong> is the backbone of the Web, the technical infrastructure that makes the Web possible. At its most basic, the Internet is a large network of computers which communicate all together. This article discusses how it works, at a basic level.</dd>
+ <dt>
+ <h3 id="What_is_the_difference_between_webpage_website_web_server_and_search_engine"><a href="/en-US/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">What is the difference between webpage, website, web server, and search engine?</a></h3>
+ </dt>
+ <dd>In this article we describe various web-related concepts: webpages, websites, web servers, and search engines. These terms are often confused by newcomers to the Web, or are incorrectly used. Let's learn what they each mean!</dd>
+ <dt>
+ <h3 id="What_is_a_URL"><a href="/en-US/docs/Learn/Common_questions/What_is_a_URL">What is a URL?</a></h3>
+ </dt>
+ <dd>With {{Glossary("Hypertext")}} and {{Glossary("HTTP")}}, URL is one of the key concepts of the Web. It is the mechanism used by {{Glossary("Browser","browsers")}} to retrieve any published resource on the web.</dd>
+ <dt>
+ <h3 id="What_is_a_domain_name"><a href="/en-US/docs/Learn/Common_questions/What_is_a_domain_name">What is a domain name?</a></h3>
+ </dt>
+ <dd>Domain names are a key part of the Internet infrastructure. They provide a human-readable address for any web server available on the Internet.</dd>
+ <dt>
+ <h3 id="What_is_a_web_server"><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">What is a web server?</a></h3>
+ </dt>
+ <dd>The term "Web server" can refer to the hardware or software that serves web sites to clients across the Web — or both of them working together. In this article we go over how web servers work, and why they're important.</dd>
+ <dt>
+ <h3 id="What_are_hyperlinks"><a href="/en-US/docs/Learn/Common_questions/What_are_hyperlinks">What are hyperlinks?</a></h3>
+ </dt>
+ <dd>In this article, we'll go over what hyperlinks are and why they matter.</dd>
+</dl>
+
+<h2 id="Tools_and_setup">Tools and setup</h2>
+
+<p>Questions related to the tools/software you can use to build websites.</p>
+
+<dl>
+ <dt>
+ <h3 id="How_much_does_it_cost_to_do_something_on_the_Web"><a href="/en-US/docs/Learn/Common_questions/How_much_does_it_cost">How much does it cost to do something on the Web?</a></h3>
+ </dt>
+ <dd>When you're launching a website, you may spend nothing or your costs may go through the roof. In this article we discuss how much everything costs and what you get for what you pay (or don't pay).</dd>
+ <dt>
+ <h3 id="What_software_do_I_need_to_build_a_website"><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">What software do I need to build a website?</a></h3>
+ </dt>
+ <dd>In this article we explain which software components you need when you're editing, uploading, or viewing a website.</dd>
+ <dt>
+ <h3 id="What_text_editors_are_available"><a href="/en-US/docs/Learn/Common_questions/Available_text_editors">What text editors are available?</a></h3>
+ </dt>
+ <dd>In this article we highlight some things to think about when choosing and installing a text editor for web development.</dd>
+ <dt>
+ <h3 id="What_are_browser_developer_tools"><a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools?</a></h3>
+ </dt>
+ <dd>Every browser features a set of devtools for debugging HTML, CSS, and other web code. This article explains how to use the basic functions of your browser's devtools.</dd>
+ <dt>
+ <h3 id="How_do_you_make_sure_your_website_works_properly"><a href="/en-US/docs/Learn/Common_questions/Checking_that_your_web_site_is_working_properly">How do you make sure your website works properly?</a></h3>
+ </dt>
+ <dd>So you've published your website online — very good! But are you sure it works properly? This article provides some basic troubleshooting steps.</dd>
+ <dt>
+ <h3 id="How_do_you_set_up_a_local_testing_server"><a href="/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server">How do you set up a local testing server?</a></h3>
+ </dt>
+ <dd>
+ <div>
+ <p>This article explains how to set up a simple local testing server on your machine, and the basics of how to use it.</p>
+ </div>
+ </dd>
+ <dt>
+ <h3 id="How_do_you_upload_files_to_a_web_server"><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">How do you upload files to a web server?</a></h3>
+ </dt>
+ <dd>This article shows how to publish your site online with <a class="glossaryLink" href="https://developer.mozilla.org/en-US/docs/Glossary/FTP" title="FTP: FTP (File Transfer Protocol) is the standard network protocol for transferring files from one host to another over the Internet through TCP.">FTP</a> tools — one of the most common ways to get a website online so others can access it from their computers.</dd>
+ <dt>
+ <h3 id="How_do_I_use_GitHub_Pages"><a href="/en-US/docs/Learn/Common_questions/Using_GitHub_Pages">How do I use GitHub Pages?</a></h3>
+ </dt>
+ <dd>This article provides a basic guide to publishing content using GitHub's gh-pages feature.</dd>
+ <dt>
+ <h3 id="How_do_you_host_your_website_on_Google_App_Engine"><a href="/en-US/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">How do you host your website on Google App Engine?</a></h3>
+ </dt>
+ <dd>Looking for a place to host your website? Here's a step-by-step guide to hosting your website on Google App Engine.</dd>
+ <dt>
+ <h3 id="What_tools_are_available_to_debug_and_improve_website_performance"><a href="/en-US/docs/Tools/Performance">What tools are available to debug and improve website performance?</a></h3>
+ </dt>
+ <dd>This set of articles shows you how to use the Developer Tools in Firefox to debug and improve performance of your website, using the tools to check the memory usage, the JavaScript call tree, the amount of DOM nodes being rendered, and more.</dd>
+</dl>
+
+<h2 id="Design_and_accessibility">Design and accessibility</h2>
+
+<p>This section lists questions related to aesthetics, page structure, accessibility techniques, etc.</p>
+
+<dl>
+ <dt>
+ <h3 id="How_do_I_start_to_design_my_website"><a href="/en-US/docs/Learn/Common_questions/Thinking_before_coding">How do I start to design my website?</a></h3>
+ </dt>
+ <dd>This article covers the all-important first step of every project: define what you want to accomplish with it.</dd>
+ <dt>
+ <h3 id="What_do_common_web_layouts_contain"><a href="/en-US/docs/Learn/Common_questions/Common_web_layouts">What do common web layouts contain?</a></h3>
+ </dt>
+ <dd>When designing pages for your website, it's good to have an idea of the most common layouts. This article runs thorugh some typical web layouts, looking at the parts that make up each one.</dd>
+ <dt>
+ <h3 id="What_is_accessibility"><a href="/en-US/docs/Learn/Common_questions/What_is_accessibility">What is accessibility?</a></h3>
+ </dt>
+ <dd>This article introduces the basic concepts behind web accessibility.</dd>
+ <dt>
+ <h3 id="How_can_we_design_for_all_types_of_users"><a href="/en-US/docs/Learn/Common_questions/Design_for_all_types_of_users">How can we design for all types of users?</a></h3>
+ </dt>
+ <dd>This article provides basic techniques to help you design websites for any kind of user — quick accessibility wins, and other such things.</dd>
+ <dt>
+ <h3 id="What_HTML_features_promote_accessibility"><a href="/en-US/docs/Learn/Common_questions/HTML_features_for_accessibility">What HTML features promote accessibility?</a></h3>
+ </dt>
+ <dd>This article describes specific features of HTML that can be used to make a web page more accessible to people with different disabilities.</dd>
+</dl>
+
+<h2 id="HTML_CSS_and_JavaScript_questions">HTML, CSS and JavaScript questions</h2>
+
+<p>For common solutions to HTML/CSS/JavaScript problems, try the following articles:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto">Use HTML to solve common problems</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Howto">Use CSS to solve common problems</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Howto">Use JavaScript to solve common problems</a></li>
+</ul>
diff --git a/files/de/learn/common_questions/upload_files_to_a_web_server/index.html b/files/de/learn/common_questions/upload_files_to_a_web_server/index.html
new file mode 100644
index 0000000000..39e775db98
--- /dev/null
+++ b/files/de/learn/common_questions/upload_files_to_a_web_server/index.html
@@ -0,0 +1,170 @@
+---
+title: Wie lädst Du deine Dateien auf einem Webserver hoch?
+slug: Learn/Common_questions/Upload_files_to_a_web_server
+tags:
+  - FTP
+  - GitHub
+  - Uploading
+  - rsync
+  - sftp
+translation_of: Learn/Common_questions/Upload_files_to_a_web_server
+---
+<div class="summary">
+<p>Dieser Artikel zeigt dir wie Du deine Seite online mithilfe von Dateiübertragungs-Tools veröffentlichen kannst.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Vorraussetzungen:</th>
+   <td>Du musst wissen <a href="https://developer.mozilla.org/en-US/Learn/What_is_a_web_server">was ein Webserver ist</a> und <a href="https://developer.mozilla.org/en-US/Learn/Understanding_domain_names">wie Domainnamen funktionieren</a>. Du musst ebenfalls wissen wie man eine <a href="/en-US/Learn/Set_up_a_basic_working_environment">einfache Umgebung einrichtet</a> und wie man <a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">eine einfache Webseite schreibt</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Ziel:</th>
+   <td>Lerne wie man Dateien mithilfe von verschiedenen Dateiübertragungs Tools auf einem Server hochlädt.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+
+<p>Falls Du eine einfache Webseite erstellt hast (siehe <a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a> für ein Beispiel), willst Du diese wahrscheinlich auf einem Webserver online stellen. In diesem Artikel diskutieren wir darüber wie man dies mit Verwendung verschiedener Optionen wie SFTP-Klienten, Rsync and GitHub macht.</p>
+
+<h2 id="SFTP">SFTP</h2>
+
+<p>Es gibt mehrere SFTP-Klienten. Unsere Demo umfasst <a href="https://filezilla-project.org/">FileZilla</a>, da es kostenlos und verfügbar ist für Windows, macOS und Linux. Um FileZilla zu installieren, gehe zur <a href="https://filezilla-project.org/download.php?type=client">FileZilla Download-Seite</a>, klicke auf die große Download-Schaltfläche und installiere dann mithilfe der Installationsdatei auf dem üblichen Weg.</p>
+
+<div class="note">
+<p><strong>Bemerkung</strong>: Natürlich gibt es eine Menge anderer Möglichkeiten. Siehe <a href="/en-US/Learn/How_much_does_it_cost#Publishing_tools.3A_FTP_client">Publishing tools</a> für mehr Informationen.</p>
+</div>
+
+<p>Öffne das FileZilla Programm. So sollte es in etwa aussehen:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15767/filezilla-ui.png" style="display: block; height: 451px; margin: 0px auto; width: 690px;"></p>
+
+<h3 id="Einloggen">Einloggen</h3>
+
+<p>Für dieses Beispiel nehmen wir an, dass unser Hosting-Anbieter (der Service welcher unseren HTTP Web-Server hosten wird) eine fiktive Firma namens "Example Hosting Provider" ist, dessen URLs so aussehen: <code>mypersonalwebsite.examplehostingprovider.net</code>.</p>
+
+<p>Wir haben soeben einen Account eröffnet und diese Informationen von ihnen erhalten:</p>
+
+<blockquote>
+<p>Gratulation zum Eröffnen eines Accounts bei Example Hosting Provider.</p>
+
+<p>Ihr Account ist: <code>demozilla</code></p>
+
+<p>Ihre Webseite wird sichtbar sein unter <code>demozilla.examplehostingprovider.net</code></p>
+
+<p>Um diesen Account zu veröffentlichen, verbinden Sie sich durch SFTP mit den folgenden Zugangsdaten:</p>
+
+<ul>
+ <li>SFTP-Server: <code>sftp://demozilla.examplehostingprovider.net</code></li>
+ <li>Benutzername: <code>demozilla</code></li>
+ <li>Passwort: <code>quickbrownfox</code></li>
+ <li>Port: <code>5548</code></li>
+ <li>Um etwas im Netz zu veröffentlichen, legen Sie ihre Dateien in den <code>Public/htdocs</code> Ordner.</li>
+</ul>
+</blockquote>
+
+<p>Lasse uns zuerst einen Blick auf <code>http://demozilla.examplehostingprovider.net/</code> werfen — wie Du sehen kannst, ist dort bisher nichts:</p>
+
+<p><img alt="Our demozilla personal website, seen in a browser: it's empty" src="https://mdn.mozillademos.org/files/9615/demozilla-empty.png" style="border-style: solid; border-width: 1px; display: block; height: 233px; margin: 0 auto; width: 409px;"></p>
+
+<div class="note">
+<p><strong>Bemerkung</strong>: Abhängig von deinem Hosting-Anbieter wirst Du die meiste Zeit eine Seite sehen die so etwas wie “Diese Website wird gehosted von [Hosting Service].” anzeigt, wenn Du deine Webadresse zum ersten mal besuchst.</p>
+</div>
+
+<p>Um deinen SFTP-Klienten mit dem Remoteserver zu verbinden, folge diesen Schritten:</p>
+
+<ol>
+ <li>Wähle <em>File &gt; Site Manager...</em> vom Hauptmenü.</li>
+ <li>Im <em>Site Manager</em> Fenster, klicke auf die <em>New Site</em> Schaltfläche, dann fülle den Seitennamen als <strong>demozilla</strong> im angegebenen Feld aus.</li>
+ <li>Fülle den SFTP-Server, welcher dein Host bereitgestellt hat in das <em>Host:</em> Feld.</li>
+ <li>In dem <em>Logon Type:</em> Drop-down-Menü, wähle <em>Normal</em>, dann fülle deinen angegebenen Nutzernamen und Passwort in die entsprechenden Felder.</li>
+ <li>Fülle den korrent Port aus und andere Informationen.</li>
+</ol>
+
+<p>Dein Fenster sollte nun in etwa so aussehen:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15769/site-manager.png" style="display: block; height: 561px; margin: 0px auto; width: 684px;"></p>
+
+<p>Klicke jetzt <em>Verbinden</em> um zum SFTP-Server zu verbinden.</p>
+
+<p>Bemerkung: Stelle sicher, dass dein Hosting-Anbieter eine SFTP (Secure FTP)-Verbindung zu deinem Webspace anbietet. FTP ist grundsätzlich unsicher und Du solltest es nicht verwenden.</p>
+
+<h3 id="Hier_und_dort_Lokale_und_remote_Ansicht">Hier und dort: Lokale und remote Ansicht</h3>
+
+<p>Einmal verbunden, sollte dein Bildschirm etwa so aussehen (wir haben uns mit einem eigenen Beispiel verbunden um dir einen Eindruck zu geben):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15768/connected.png" style="border-style: solid; border-width: 1px; display: block; height: 199px; margin: 0px auto; width: 700px;"></p>
+
+<p>Lasse uns prüfen was du siehst:</p>
+
+<ul>
+ <li>On the center left pane, you see your local files. Navigate into the directory where you store your website (e.g. <code>mdn</code>).</li>
+ <li>On the center right pane, you see remote files. We are logged into our distant FTP root (in this case, <code>users/demozilla</code>)</li>
+ <li>You can ignore the bottom and top panes for now. Respectively, these are a log of messages showing the connection status between your computer and the SFTP server, and a live log of every interaction between your SFTP client and the server.</li>
+</ul>
+
+<h3 id="Uploading_to_the_server">Uploading to the server</h3>
+
+<p>Our example host instructions told us "To publish on the web, put your files into the <code>Public/htdocs</code> directory." You need to navigate to the specified directory in your right pane. This directory is effectively the root of your website — where your <code>index.html</code> file and other assets will go.</p>
+
+<p>Once you've found the correct remote directory to put your files in, to upload your files to the server you need to drag-and-drop them from the left pane to the right pane.</p>
+
+<h3 id="Sind_sie_wirklich_online">Sind sie wirklich online?</h3>
+
+<p>So far, so good, but are the files really online? You can double-check by going back to your website (e.g. <code>http://demozilla.examplehostingprovider.net/</code>) in your browser:</p>
+
+<p><img alt="Here we go: our website is live!" src="https://mdn.mozillademos.org/files/9627/here-we-go.png" style="border-style: solid; border-width: 1px; display: block; height: 442px; margin: 0 auto; width: 400px;"></p>
+
+<p>Und <em lang="fr">voilà</em>! Unsere Webseite ist live!</p>
+
+<h2 id="Rsync">Rsync</h2>
+
+<p>{{Glossary("Rsync")}} is a local-to-remote file synchronizing tool, which is generally available on most Unix-based systems (like macOS and Linux), but Windows versions exist too.</p>
+
+<p>It is seen as a more advanced tool than SFTP, beause by default it is used on the command line. A basic command looks like so:</p>
+
+<pre class="brush: bash">rsync [-options] SOURCE user@x.x.x.x:DESTINATION</pre>
+
+<ul>
+ <li><code>-options</code> is a dash followed by a one or more letters, for example <code>-v</code> for verbose error messages, and <code>-b</code> to make backups. You can see the full list at the <a href="https://linux.die.net/man/1/rsync">rsync man page</a> (search for "Options summary").</li>
+ <li><code>SOURCE</code> is the path to the local file or directory that you want to copy files over from.</li>
+ <li><code>user@</code> is the credentials of the user on the remote server you want to copy files over to.</li>
+ <li><code>x.x.x.x</code> is the IP address of the remote server.</li>
+ <li><code>DESTINATION</code> is the path to the location you want to copy your directory or files to on the remote server.</li>
+</ul>
+
+<p>You'd need to get such details from your hosting provider.</p>
+
+<p>For more information and further eamples, see <a href="https://www.atlantic.net/hipaa-compliant-cloud-hosting-services/how-to-use-rsync-copy-sync-files-servers/">How to Use Rsync to Copy/Sync Files Between Servers</a>.</p>
+
+<p>Of course, it is a good idea to use a secure connection, like with FTP. In the case of Rsync, you specify SSH details to make the connection over SSH, using the <code>-e</code> option. For example:</p>
+
+<pre class="brush: bash">rsync [-options] -e "ssh [SSH DETAILS GO HERE]" SOURCE user@x.x.x.x:DESTINATION</pre>
+
+<p>You can find more details of what is needed at <a href="https://www.digitalocean.com/community/tutorials/how-to-copy-files-with-rsync-over-ssh">How To Copy Files With Rsync Over SSH</a>.</p>
+
+<h3 id="Rsync_GUI_Tools">Rsync GUI Tools</h3>
+
+<p>As with other command line tools, GUI tools also exist for Rsync, for those who are not as comfortable with using the command line. <a href="https://acrosync.com/mac.html">Acrosync</a> is one such tool, and it is available for Windows and macOS.</p>
+
+<p>Again, you would have to get the connection credentials from your hosting provider, but this way you'd have a GUI to enter them in.</p>
+
+<h2 id="GitHub">GitHub</h2>
+
+<p>GitHub erlaubt Die Webseiten via <a href="https://pages.github.com/">GitHub pages</a> (gh-pages) zu veröffentlichen.</p>
+
+<p>We've covered the basics of using this in the <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Publishing your website</a> article from our <a href="/en-US/Learn/Getting_started_with_the_web">Getting started with the Web</a> guide, so we aren't going to repeat it all here.</p>
+
+<p>However, it is worth knowing that you can also host a website on GitHub, but use a custom domain with it. See <a href="https://help.github.com/articles/using-a-custom-domain-with-github-pages/">Using a custom domain with GitHub Pages</a> for a detailed guide.</p>
+
+<h2 id="Andere_Methoden_um_Dateien_hochzuladen">Andere Methoden um Dateien hochzuladen</h2>
+
+<p>The FTP protocol is one well-known method for publishing a website, but not the only one. Here are a few other possibilities:</p>
+
+<ul>
+ <li><strong>Web interfaces</strong>. An HTML interface acting as front-end for a remote file upload service. Provided by your hosting service.</li>
+ <li><strong>{{Glossary("WebDAV")}}</strong>. An extension of the {{Glossary("HTTP")}} protocol to allow more advanced file management.</li>
+</ul>
diff --git a/files/de/learn/common_questions/wie_das_internet_funktioniert/index.html b/files/de/learn/common_questions/wie_das_internet_funktioniert/index.html
new file mode 100644
index 0000000000..f780dac8a7
--- /dev/null
+++ b/files/de/learn/common_questions/wie_das_internet_funktioniert/index.html
@@ -0,0 +1,95 @@
+---
+title: Wie das Internet funktioniert
+slug: Learn/Common_questions/Wie_das_Internet_funktioniert
+translation_of: Learn/Common_questions/How_does_the_Internet_work
+---
+<div>{{LearnSidebar}}</div>
+
+<div class="summary">
+<p>Dieser Artikel behandelt, was das Internet ist uns wie es funktioniert</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Voraussetzungen:</th>
+   <td>Keine, aber wir empfehlen dir den Artikel <a href="/en-US/docs/Learn/Thinking_before_coding">setting project goals</a> zuerst zu lesen.</td>
+  </tr>
+  <tr>
+   <th scope="row">Ziel:</th>
+   <td>You will learn the basics of the technical infrastructure of the Web and the difference between Internet and the Web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Summary">Summary</h2>
+
+<p>Das <strong>Internet</strong> ist das Rückgrat des Webs, die technische Infrastruktur die das Web möglich macht. Grundlegend ist das Internet ein riesiges Netzwerk von Computern, welche untereinander kommunizieren.</p>
+
+<p><a href="https://en.wikipedia.org/wiki/Internet#History" rel="external">The history of the Internet is somewhat obscure</a>. It began in the 1960s as a US-army-funded research project, then evolved into a public infrastructure in the 1980s with the support of many public universities and private companies. The various technologies that support the Internet have evolved over time, but the way it works hasn't changed that much: Internet is a way to connect computers all together and ensure that, whatever happens, they find a way to stay connected.</p>
+
+<h2 id="Active_Learning">Active Learning</h2>
+
+<ul>
+ <li><a href="https://www.youtube.com/watch?v=7_LPdttKXPc" rel="external">How the internet Works in 5 minutes</a>: A 5 minute video to understand the very basics of Internet by Aaron Titus.</li>
+</ul>
+
+<h2 id="Deeper_dive">Deeper dive</h2>
+
+<h3 id="A_simple_network">A simple network</h3>
+
+<p>When two computers need to communicate, you have to link them, either physically (usually with an <a href="http://en.wikipedia.org/wiki/Ethernet_crossover_cable" rel="external">Ethernet cable</a>) or wirelessly (for example with <a href="http://en.wikipedia.org/wiki/WiFi" rel="external">WiFi</a> or <a href="http://en.wikipedia.org/wiki/Bluetooth" rel="external">Bluetooth</a> systems). All modern computers can sustain any of those connections.</p>
+
+<div class="note">
+<p><strong>Note:</strong> For the rest of this article, we will only talk about physical cables, but wireless networks work the same.</p>
+</div>
+
+<p><img alt="Two computers linked together" src="https://mdn.mozillademos.org/files/8441/internet-schema-1.png" style="height: 152px; width: 600px;"></p>
+
+<p>Such a network is not limited to two computers. You can connect as many computers as you wish. But it gets complicated quickly. If you're trying to connect, say, ten computers, you need 45 cables, with nine plugs per computer!</p>
+
+<p><img alt="Ten computers all together" src="https://mdn.mozillademos.org/files/8443/internet-schema-2.png" style="height: 576px; width: 600px;"></p>
+
+<p>To solve this problem, each computer on a network is connected to a special tiny computer called a <em>router</em>. This <em>router</em> has only one job: like a signaler at a railway station, it makes sure that a message sent from a given computer arrives at the right destination computer. To send a message to computer B, computer A must send the message to the router, which in turn forwards the message to computer B and makes sure the message is not delivered to computer C.</p>
+
+<p>Once we add a router to the system, our network of 10 computers only requires 10 cables: a single plug for each computer and a router with 10 plugs.</p>
+
+<p><img alt="Ten computers with a router" src="https://mdn.mozillademos.org/files/8445/internet-schema-3.png" style="height: 576px; width: 600px;"></p>
+
+<h3 id="A_network_of_networks">A network of networks</h3>
+
+<p>So far so good. But what about connecting hundreds, thousands, billions of computers? Of course a single <em>router</em> can't scale that far, but, if you read carefully, we said that a <em>router</em> is a computer like any other, so what keeps us from connecting two <em>routers</em> together? Nothing, so let's do that.</p>
+
+<p><img alt="Two routers linked together" src="https://mdn.mozillademos.org/files/8447/internet-schema-4.png"></p>
+
+<p>By connecting computers to routers, then routers to routers, we are able to scale infinitely.</p>
+
+<p><img alt="Routers linked to routers" src="https://mdn.mozillademos.org/files/8449/internet-schema-5.png" style="height: 563px; width: 600px;"></p>
+
+<p>Such a network comes very close to what we call the Internet, but we're missing something. We built that network for our own purposes. There are other networks out there: your friends, your neighbors, anyone can have their own network of computers. But it's not really possible to set cables up between your house and the rest of the world, so how can you handle this? Well, there are already cables linked to your house, for example, electric power and telephone. The telephone infrastructure already connects your house with anyone in the world so it is the perfect wire we need. To connect our network to the telephone infrastructure, we need a special piece of equipment called a <em>modem</em>. This <em>modem</em> turns the information from our network into information manageable by the telephone infrastructure and vice versa.</p>
+
+<p><img alt="A router linked to a modem" src="https://mdn.mozillademos.org/files/8451/internet-schema-6.png" style="height: 340px; width: 600px;"></p>
+
+<p>So we are connected to the telephone infrastructure. The next step is to send the messages from our network to the network we want to reach. To do that, we will connect our network to an Internet Service Provider (ISP). An ISP is a company that manages some special <em>routers</em> that are all linked together and can also access other ISPs' routers. So the message from our network is carried through the network of ISP networks to the destination network. The Internet consists of this whole infrastructure of networks.</p>
+
+<p><img alt="Full Internet stack" src="https://mdn.mozillademos.org/files/8453/internet-schema-7.png" style="height: 1293px; width: 340px;"></p>
+
+<h3 id="Finding_computers">Finding computers</h3>
+
+<p>If you want to send a message to a computer, you have to specify which one. Thus any computer linked to a network has a unique address that identifies it, called an "IP address" (where IP stands for <em>Internet Protocol</em>). It's an address made of a series of four numbers separated by dots, for example: <code>192.168.2.10</code>.</p>
+
+<p>That's perfectly fine for computers, but we human beings have a hard time remembering that sort of address. To make things easier, we can alias an IP address with a human readable name called a <em>domain name</em>. For example, <code>google.com</code> is the domain name used on top of the IP address <code>173.194.121.32</code>. So using the domain name is the easiest way for us to reach a computer over the Internet.</p>
+
+<p><img alt="Show how a domain name can alias an IP address" src="https://mdn.mozillademos.org/files/8405/dns-ip.png" style="height: 160px; width: 330px;"></p>
+
+<h3 id="Internet_and_the_web">Internet and the web</h3>
+
+<p>As you might notice, when we browse the Web with a Web browser, we usually use the domain name to reach a website. Does that mean the Internet and the Web are the same thing? It's not that simple. As we saw, the Internet is a technical infrastructure which allows billions of computers to be connected all together. Among those computers, some computers (called <em>Web servers</em>) can send messages intelligible to web browsers. The <em>Internet</em> is an infrastructure, whereas the <em>Web</em> is a service built on top of the infrastructure. It is worth noting there are several other services built on top of the Internet, such as email and {{Glossary("IRC")}}.</p>
+
+<h2 id="Next_steps">Next steps</h2>
+
+<ul>
+ <li><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">How the Web works</a></li>
+ <li><a href="/en-US/docs/Learn/page_vs_site_vs_server_vs_search_engine">Understanding the difference between a web page, a web site, a web server and a search engine</a></li>
+ <li><a href="/en-US/docs/Learn/Understanding_domain_names">Understanding domain names</a></li>
+</ul>
diff --git a/files/de/learn/css/building_blocks/index.html b/files/de/learn/css/building_blocks/index.html
new file mode 100644
index 0000000000..0924df55f5
--- /dev/null
+++ b/files/de/learn/css/building_blocks/index.html
@@ -0,0 +1,87 @@
+---
+title: CSS building blocks
+slug: Learn/CSS/Building_blocks
+tags:
+  - Beginner
+  - CSS
+  - Learn
+translation_of: Learn/CSS/Building_blocks
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Dieses Modul betreibt ab <a href="/de/docs/Learn/CSS/First_steps">CSS Ersten Schritte</a> Endung — now you've gained familiarity with the language and its syntax, and got some basic experience with using it, its time to dive a bit deeper. This module looks at the cascade and inheritance, all the selector types we have available, units, sizing, styling backgrounds and borders, debugging, and lots more.</p>
+
+<p class="summary">The aim here is to provide you with a toolkit for writing competent CSS and help you understand all the essential theory, before moving on to more specific disciplines like <a href="/en-US/docs/Learn/CSS/Styling_text">text styling</a> and <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a>.</p>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>Before starting this module, you should have:</p>
+
+<ol>
+ <li>Basic familiarity with using computers, and using the Web passively (i.e. just looking at it, consuming the content.)</li>
+ <li>A basic work environment set up as detailed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>, and an understanding of how to create and manage files, as detailed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a>.</li>
+ <li>Basic familiarity with HTML, as discussed in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module.</li>
+ <li>An understanding of the basics of CSS, as discussed in the <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a> module.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://glitch.com/">Glitch</a>.</p>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<p>This module contains the following articles, which cover the most essential parts of the CSS language. Along the way you'll come across plenty of exercises to allow you to test your understanding.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></dt>
+ <dd>The aim of this lesson is to develop your understanding of some of the most fundamental concepts of CSS — the cascade, specificity, and inheritance — which control how CSS is applied to HTML and how conflicts are resolved.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a></dt>
+ <dd>There are a wide variety of CSS selectors available, allowing for fine-grained precision when selecting elements to style. In this article and its sub-articles we'll run through the different types in great detail, seeing how they work. The sub-articles are as follows:
+ <ul>
+  <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
+  <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
+  <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
+  <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+ </ul>
+ </dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></dt>
+ <dd>Everything in CSS has a box around it, and understanding these boxes is key to being able to create layouts with CSS, or to align items with other items. In this lesson we will take a proper look at the CSS <em>Box Model</em>, in order that you can move onto more complex layout tasks with an understanding of how it works and the terminology that relates to it.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></dt>
+ <dd>In this lesson we will take a look at some of the creative things you can do with CSS backgrounds and borders. From adding gradients, background images, and rounded corners, backgrounds and borders are the answer to a lot of styling questions in CSS.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></dt>
+ <dd>In recent years, CSS has evolved in order to better support different directionality of content, including right-to-left but also top-to-bottom content (such as Japanese) — these different directionalities are called <strong>writing modes</strong>. As you progress in your study and begin to work with layout, an understanding of writing modes will be very helpful to you, therefore we will introduce them in this article.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></dt>
+ <dd>In this lesson we will look at another important concept in CSS — <strong>overflow</strong>. Overflow is what happens when there is too much content to be contained comfortably inside a box. In this guide you will learn what it is and how to manage it.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">CSS values and units</a></dt>
+ <dd>Every property used in CSS has a value or set of values that are allowed for that property. In this lesson we will take a look at some of the most common values and units in use.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></dt>
+ <dd>In the various lessons so far you have come across a number of ways to size items on a web page using CSS. Understanding how big the different features in your design will be is important, and in this lesson we will summarize the various ways elements get a size via CSS and define a few terms around sizing that will help you in the future.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></dt>
+ <dd>In this lesson we will take a look at how certain special elements are treated in CSS. Images, other media, and form elements behave a little differently in terms of your ability to style them with CSS than regular boxes. Understanding what is and isn't possible can save some frustration, and this lesson will highlight some of the main things that you need to know.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></dt>
+ <dd>Styling an HTML table isn't the most glamorous job in the world, but sometimes we all have to do it. This article provides a guide to making HTML tables look good, with some specific table styling techniques highlighted.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></dt>
+ <dd>Sometimes when writing CSS you will encounter an issue where your CSS doesn't seem to be doing what you expect. This article will give you guidance on how to go about debugging a CSS problem, and show you how the DevTools included in all modern browsers can help you find out what is going on.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></dt>
+ <dd>As you start to work on larger stylesheets and big projects you will discover that maintaining a huge CSS file can be challenging. In this article we will take a brief look at some best practices for writing your CSS to make it easily maintainable, and some of the solutions you will find in use by others to help improve maintainability.</dd>
+</dl>
+
+<h2 id="Assessments">Assessments</h2>
+
+<p>Want to test your CSS skills? The following assessments will test your understanding of the CSS covered in the guides above.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">Fundamental CSS comprehension</a></dt>
+ <dd>This assessment tests your understanding of basic syntax, selectors, specificity, box model, and more.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Creating fancy letterheaded paper</a></dt>
+ <dd>If you want to make the right impression, writing a letter on nice letterheaded paper can be a really good start. In this assessment, we'll challenge you to create an online template to achieve such a look.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">A cool looking box</a></dt>
+ <dd>Here you'll get some practice in using background and border styling to create an eye-catching box.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">Advanced styling effects</a></dt>
+ <dd>This article acts as a box of tricks, providing an introduction to some interesting advanced styling features such as box shadows, blend modes, and filters.</dd>
+</dl>
diff --git a/files/de/learn/css/building_blocks/organizing/index.html b/files/de/learn/css/building_blocks/organizing/index.html
new file mode 100644
index 0000000000..43362d1617
--- /dev/null
+++ b/files/de/learn/css/building_blocks/organizing/index.html
@@ -0,0 +1,374 @@
+---
+title: Organizing your CSS
+slug: Learn/CSS/Building_blocks/Organizing
+tags:
+  - Anfänger
+  - CSS
+  - Formatierung
+  - Kommentare
+  - Lernen
+  - Methoden
+  - Organisieren
+  - Stlyeguide
+  - post-processor
+  - pre-processor
+translation_of: Learn/CSS/Building_blocks/Organizing
+---
+<div>{{LearnSidebar}}{{PreviousMenu("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</div>
+
+<p>Wenn Sie anfangen an größeren Stylesheets und großen Projekten zu arbeiten, werden Sie herausfinden, dass es eine echte Herausforderung sein kann, eine sehr umfangreiche CSS-Datei instand zu halten. In diesem Artikel werden wir einen kurzen Blick werfen auf einige bewährte Methoden, CSS so zu schreiben, dass es leicht zu pflegen ist. Einige der Lösungen werden Sie auch bei anderen finden, die damit die Wartbarkeit verbessern.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Voraussetzungen:</th>
+   <td>
+    <p>Grundlegende Computerkenntnisse, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">installierte Basissoftware</a>, Grundkenntnisse im <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Umgang mit Dateien</a>, HTML-Grundlagen (lesen Sie <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Einführung in HTML</a>) und eine Vorstellung davon, wie CSS funktioniert (lesen Sie <a href="/en-US/docs/Learn/CSS/First_steps">erste Schritte mit CSS</a>).</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Ziel:</th>
+   <td>Hier finden Sie einige Tipps und bewährte Verfahren für die Organisation von Stylesheets sowie einige allgemein gebräuchliche Namenskonventionen und Tools, die bei der Organisation von CSS und der Teamarbeit helfen.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Tipps_um_Ihr_CSS_übersichtlich_zu_halten">Tipps, um Ihr CSS übersichtlich zu halten</h2>
+
+<p>Hier finden Sie einige allgemeine Vorschläge, wie Sie Ihre Stylsheet organisiert und übersichtlich halten können.</p>
+
+<h3 id="Gibt_es_einen_Coding_Style_Guide_in_Ihrem_Projekt">Gibt es einen Coding Style Guide in Ihrem Projekt?</h3>
+
+<p>Wenn Sie im Team an einem bestehenden Projekt arbeiten, sollten Sie als erstes abklären, ob das Projekt einen Style Guide für CSS hat. Der Style Guide des Teams sollte immer Priorität vor Ihren persönlichen Vorlieben haben. Oft gibt es nicht den einen richtigen Weg etwas umzusetzen, wichtig aber ist Konsistenz.</p>
+
+<p>Sehen Sie sich beispielsweise die <a href="/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS">CSS-Richtlinien für MDN Codebeispiele</a> an.</p>
+
+<h3 id="Bleiben_Sie_konsistent">Bleiben Sie konsistent</h3>
+
+<p>Wenn Sie die Regeln für das Projekt festlegen oder alleine arbeiten, dann ist es am wichtigsten, die Dinge konsistent zu halten. Konsistenz kann auf alle möglichen Arten angewendet werden, wie z.B. die Verwendung derselben Namenskonventionen für Klassen, die Wahl einer Methode zur Beschreibung von Farbe oder die Beibehaltung einer konsistenten Formatierung (werden Sie z.B. Tabulatoren oder Leerzeichen verwenden, um Ihren Code einzurücken? Wenn Leerzeichen, wie viele Leerzeichen?)</p>
+
+<p>Ein Regelsystem, das Sie immer befolgen, reduziert den mentalen Aufwand beim Schreiben von CSS, da einige der Entscheidungen bereits getroffen sind.</p>
+
+<h3 id="CSS_lesbar_formatieren">CSS lesbar formatieren</h3>
+
+<p>Es gibt unterschiedliche Arten CSS zu formatieren. Einige Entwickler*innen schreiben alle Regeln in eine einzige Zeile, wie hier:</p>
+
+<pre class="brush: css  notranslate">.box { background-color: #567895; }
+h2 { background-color: black; color: white; }</pre>
+
+<p>Andere Entwickler*innen schreiben lieber jede Regel in eine neue Zeile:</p>
+
+<pre class="brush: css  notranslate">.box {
+  background-color: #567895;
+}
+
+h2 {
+  background-color: black;
+  color: white;
+}</pre>
+
+<p>Dem CSS ist es egal, welche dieser Arten Sie nutzen. Wir persönlich finden, dass es besser lesbar ist, jede Eigenschaft und jedes Wertepaar in einer neuen Zeile.</p>
+
+<h3 id="CSS_kommentieren">CSS kommentieren</h3>
+
+<p>Kommentare in Stylesheets zu schreiben hilft jeder*m künftigen*m Entwickler*in mit Ihrem Stylesheet zu arbeiten. Aber es wird auch Ihnen helfen, wenn Sie nach einer Pause wieder an dem Projekt arbeiten.</p>
+
+<pre class="brush: css  notranslate">/* This is a CSS comment
+It can be broken onto multiple lines. */</pre>
+
+<p>Ein guter Tipp ist es, auch zwischen logischen Abschnitten in Ihrem Stylesheet einen Block von Kommentaren einzufügen, um verschiedene Abschnitte beim Durchsuchen schnell zu finden, oder um Ihnen sogar etwas zum Suchen zu geben, damit Sie direkt in diesen Teil des CSS springen können. Wenn Sie eine Zeichenfolge verwenden, die nicht im Code erscheint, können Sie von Abschnitt zu Abschnitt springen, indem Sie danach suchen - unten haben wir <code>||</code> verwendet.</p>
+
+<pre class="brush: css  notranslate">/* || General styles */
+
+...
+
+/* || Typography */
+
+...
+
+/* || Header and Main Navigation */
+
+...
+
+</pre>
+
+<p>Sie müssen nicht jede einzelne Regel in Ihrem CSS kommentieren, da vieles davon selbsterklärend sein wird. Was Sie kommentieren sollten, sind die Dinge, bei denen Sie aus einem bestimmten Grund eine bestimmte Entscheidung getroffen haben.</p>
+
+<p>Möglicherweise haben Sie eine CSS-Eigenschaft auf eine bestimmte Art und Weise verwendet, um z.B. Inkompatibilitäten älterer Browser zu umgehen:</p>
+
+<pre class="brush: css  notranslate">.box {
+  background-color: red; /* Fallback für ältere Browser, die keine Gradients unterstützen. */
+  background-image: linear-gradient(to right, #ff0000, #aa0000);
+}
+</pre>
+
+<p>Vielleicht haben Sie ein Tutorial befolgt, um etwas zu erreichen, und das CSS ist ein nicht selbsterklärend. In diesem Fall könnten Sie die URL des Tutorials zu den Kommentaren hinzufügen. Sie werden sich freuen, wenn Sie in einem Jahr oder so zu diesem Projekt zurückkehren und sich vage daran erinnern können, dass es ein großartiges Tutorial zu diesem Ding gab, aber wo ist es?</p>
+
+<h3 id="Logische_Abschnitte_im_Stylesheet_schaffen">Logische Abschnitte im Stylesheet schaffen</h3>
+
+<p>Es ist eine gute Idee, alle häufig verwendeten Stile zuerst im Stylesheet zu haben. Das bedeutet alle Stile, die im Allgemeinen gelten, es sei denn, Sie machen etwas Besonderes mit diesem Element. In der Regel werden Sie Regeln dafür aufgestellt haben:</p>
+
+<ul>
+ <li><code>body</code></li>
+ <li><code>p</code></li>
+ <li><code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code></li>
+ <li><code>ul</code> and <code>ol</code></li>
+ <li>The <code>table</code> properties</li>
+ <li>Links</li>
+</ul>
+
+<p>In diesem Abschnitt des Stylesheets stellen wir das Standard-Styling für den Schrifttyp auf der Site zur Verfügung, richten ein Standard-Styling für Datentabellen und Listen ein und so weiter.</p>
+
+<pre class="brush: css  notranslate">/* || ALLGEMEINE STYLES */
+
+body { ... }
+
+h1, h2, h3, h4 { ... }
+
+ul { ... }
+
+blockquote { ... }
+</pre>
+
+<p>Nach diesem Abschnitt könnten wir einige Hilfsklassen definieren, z.B. eine Klasse, die den Standardlistenstil für Listen entfernt, die wir als Flex Items oder auf andere Weise anzeigen wollen. Wenn Sie ein paar Dinge haben, von denen Sie wissen, dass Sie sie auf viele verschiedene Elemente anwenden wollen, können sie in diesem Abschnitt behandelt werden.</p>
+
+<pre class="brush: css  notranslate">/* || HILFSKLASSEN */
+
+.nobullets {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+...
+
+</pre>
+
+<p>Dann können wir alles hinzufügen, was überall auf der Website verwendet wird. Das können Dinge wie das grundlegende Seitenlayout, die Kopfzeile, die Gestaltung der Navigation und so weiter sein.</p>
+
+<pre class="brush: css  notranslate">/* || STILE, DIE AUF DER GANZEN SEITE VERWENDET WERDEN */
+
+.main-nav { ... }
+
+.logo { ... }
+</pre>
+
+<p>Schließlich werden wir CSS für bestimmte Dinge aufnehmen, aufgeschlüsselt nach dem Kontext, der Seite oder sogar der Komponente, in der sie verwendet werden.</p>
+
+<pre class="brush: css  notranslate">/* || SHOP SEITEN */
+
+.product-listing { ... }
+
+.product-box { ... }
+</pre>
+
+<p>Indem wir die Dinge auf diese Weise anordnen, haben wir zumindest eine Vorstellung davon, in welchem Teil des Stylesheets wir nach etwas suchen werden, das wir ändern wollen.</p>
+
+<h3 id="Allzu_spezifische_Selektoren_vermeiden">Allzu spezifische Selektoren vermeiden</h3>
+
+<p>Wenn Sie sehr spezifische Selektoren erstellen, werden Sie oft feststellen, dass Sie Teile Ihres CSS duplizieren müssen, um die gleichen Regeln auf ein anderes Element anzuwenden. Zum Beispiel könnten Sie etwas wie den unten stehenden Selektor haben, der die Regel auf ein <code>&lt;p&gt;</code> mit der Klasse <code>box</code> innerhalb eines <code>&lt;article&gt;</code> mit der Klasse <code>main</code> anwendet.</p>
+
+<pre class="brush: css  notranslate">article.main p.box {
+  border: 1px solid #ccc;
+}</pre>
+
+<p>Wenn Sie nun die gleiche Regel außerhalb von  <code>main</code> oder bei etwas anderem als  <code>&lt;p&gt;</code> anwenden möchten, müssten Sie einen weiteren Selektor zu dieser Regel hinzufügen oder ein ganz neues Regelset erstellen. Stattdessen sollten Sie den Selektor <code>.box</code> verwenden, damit die Regel auf alle Elemente mit der Klasse <code>box</code> angewendet wird:</p>
+
+<pre class="brush: css  notranslate">.box {
+  border: 1px solid #ccc;
+}</pre>
+
+<p>In einigen Fällen kann es sinnvoll sein, eine höhere Spezifizität zu verwenden. Das wird aber eher die Ausnahme als die übliche Praxis sein.</p>
+
+<h3 id="Große_Stylesheets_in_mehrere_kleine_aufteilen">Große Stylesheets in mehrere kleine aufteilen</h3>
+
+<p>Insbesondere in Fällen, in denen Sie sehr unterschiedliche Stile für verschiedene Teile der Website haben, sollten Sie vielleicht ein Stylesheet haben, das alle globalen Regeln enthält, und dann kleinere, die die spezifischen Regeln enthalten, die für diese Abschnitte benötigt werden. Sie können von einer Seite aus auf mehrere Stylesheets verweisen, und es gelten die normalen Regeln der Kaskade, wobei Regeln in später verknüpften Stylesheets auf Regeln in früher verknüpften Stylesheets folgen.</p>
+
+<p>Zum Beispiel könnten wir einen Online-Shop als Teil der Website haben, wobei viel CSS nur für das Styling der Produktauflistungen und Formulare verwendet wird, die für den Shop benötigt werden. Es wäre sinnvoll, diese Dinge in einem anderen Stylesheet zu haben, auf das nur auf den Shop-Seiten verwiesen wird.</p>
+
+<p>Dies kann die Organisation Ihres CSS erleichtern und bedeutet auch, dass Sie weniger Situationen haben werden, in denen zwei Personen gleichzeitig am selben Stylesheet arbeiten müssen, was zu Konflikten bei der Quellcodekontrolle führt, wenn mehrere Personen an dem CSS arbeiten.</p>
+
+<h2 id="Andere_hilfreiche_Tools">Andere hilfreiche Tools</h2>
+
+<p>CSS an sich hat nicht viel an eingebauter Struktur zu bieten, daher müssen Sie die Arbeit erledigen, um Konsistenz und Regeln für die Erstellung von CSS zu schaffen. Die Web-Community hat auch verschiedene Tools und Ansätze entwickelt, die Ihnen bei der Verwaltung größerer CSS-Projekte helfen können. Da sie für Sie bei der Untersuchung hilfreich sein können und Sie bei der Arbeit mit anderen Personen wahrscheinlich auf diese Dinge stoßen werden, haben wir einen kurzen Leitfaden zu einigen davon beigefügt.</p>
+
+<h3 id="CSS_Verfahren">CSS Verfahren</h3>
+
+<p>Anstatt sich eigene Regeln für die Erstellung von CSS ausdenken zu müssen, können Sie einen der Ansätze zu übernehmen, die bereits von der Community entworfen und in vielen Projekten getestet wurden. Bei diesen Methoden handelt es sich im Wesentlichen um CSS-Codierungsleitfäden, die einen sehr strukturierten Ansatz zum Schreiben und Organisieren von CSS verfolgen. In der Regel führen sie zu einer umfassenderen Verwendung von CSS, als wenn Sie jeden Selektor nach einem eigenen Regelsatz für dieses Projekt schreiben und optimieren würden.</p>
+
+<p>Da viele dieser Systeme sehr weit verbreitet sind, ist es wahrscheinlicher, dass andere Entwickler*innen den von Ihnen verwendeten Ansatz verstehen und ihr CSS auf die gleiche Art und Weise schreiben können, anstatt Ihre persönliche Methodik von Grund auf neu erarbeiten zu müssen.</p>
+
+<h4 id="OOCSS">OOCSS</h4>
+
+<p>Die meisten Ansätze, denen Sie begegnen werden, beruhen auf dem Konzept des objektorientierten CSS (Object Oriented CSS, OOCSS), ein Ansatz, der populär wurde durch <a href="https://github.com/stubbornella/oocss/wiki">die Arbeiten von Nicole Sullivan</a>. Die Grundidee von OOCSS besteht darin, Ihr CSS in wiederverwendbare Objekte zu zerlegen, die überall auf Ihrer Website verwendet werden können. Das Standardbeispiel für OOCSS ist das als <a href="/en-US/docs/Web/CSS/Layout_cookbook/Media_objects">The Media Object</a> beschriebene Modell. Dabei handelt es sich um ein Modell mit einem Bild, einem Video oder einem anderen Element fester Größe auf der einen Seite und flexiblem Inhalt auf der anderen Seite. Es ist ein Modell, das wir überall auf Websites für Kommentare, Auflistungen und so weiter sehen.</p>
+
+<p>Wenn Sie keinen OOCSS-Ansatz verfolgen, können Sie für die verschiedenen Stellen, an denen dieses Modell verwendet wird, benutzerdefiniertes CSS erstellen, z.B. eine Klasse namens <code>comment</code> mit einem Bündel von Regeln für die Komponententeile, dann eine Klasse namens <code>list-item</code> mit fast denselben Regeln wie die Klasse <code>comment</code>, abgesehen von einigen winzigen Unterschieden. Der Unterschied zwischen diesen beiden Komponenten besteht darin, dass das Listenelement einen unteren Rand hat und Bilder in Kommentaren einen Rand haben, während Bilder von Listenelementen keinen Rand haben.</p>
+
+<pre class="brush: css  notranslate">.comment {
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+}
+
+.comment img {
+  border: 1px solid grey;
+}
+
+.comment .content {
+  font-size: .8rem;
+}
+
+.list-item {
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  border-bottom: 1px solid grey;
+}
+
+.list-item .content {
+  font-size: .8rem;
+}</pre>
+
+<p>In OOCSS würden Sie ein Schema namens <code>media</code> erstellen, das das gesamte gemeinsame CSS für beide Schemata hat - eine Basisklasse für Dinge, die im Allgemeinen die Form des Medienobjekts darstellen. Dann fügen wir eine zusätzliche Klasse hinzu, die sich mit diesen winzigen Unterschieden befasst und so dieses Styling auf spezifische Weise erweitert.</p>
+
+<pre class="brush: css  notranslate">.media {
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+}
+
+.media .content {
+  font-size: .8rem;
+}
+
+.comment img {
+  border: 1px solid grey;
+}
+
+.list-item {
+  border-bottom: 1px solid grey;
+} </pre>
+
+<p>In Ihrem HTML-Code müsste für den Kommentar sowohl die Medien- als auch die Kommentarklasse <code>(media</code> und <code>comment</code>) verwendet werden:</p>
+
+<pre class="brush: html  notranslate">&lt;div class="media comment"&gt;
+  &lt;img /&gt;
+  &lt;div class="content"&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Auf das Listenelement würde man die Klassen <code>media</code> und <code>list-item</code> anwenden:</p>
+
+<pre class="brush: html  notranslate">&lt;ul&gt;
+  &lt;li class="media list-item"&gt;
+    &lt;img /&gt;
+    &lt;div class="content"&gt;&lt;/div&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<p>Die Arbeit, die Nicole Sullivan geleistet hat, um diesen Ansatz zu beschreiben und zu fördern, bedeutet, dass selbst Personen, die heute nicht strikt einem OOCSS-Ansatz folgen, CSS im Allgemeinen auf diese Weise wiederverwenden werden - es hat sich in unserem Verständnis als eine gute Vorgehensweise im Allgemeinen etabliert.</p>
+
+<h4 id="BEM">BEM</h4>
+
+<p>BEM stands for Block Element Modifier. In BEM a block is a standalone entity such as a button, menu, or logo. An element is something like a list item or a title that is tied to the block it is in. A modifier is a flag on a block or element that changes the styling or behavior. You will be able to recognise code that uses BEM due to the extensive use of dashes and underscores in the CSS classes. For example, look at the classes applied to this HTML from the page about <a href="http://getbem.com/naming/">BEM Naming conventions</a>:</p>
+
+<pre class="brush: html  notranslate">&lt;form class="form form--theme-xmas form--simple"&gt;
+  &lt;input class="form__input" type="text" /&gt;
+  &lt;input
+    class="form__submit form__submit--disabled"
+    type="submit" /&gt;
+&lt;/form&gt;</pre>
+
+<p>The additional classes are similar to those used in the OOCSS example, however they use the strict naming conventions of BEM.</p>
+
+<p>BEM is widely used in larger web projects and many people write their CSS in this way. It is likely that you will come across examples, even in tutorials, that use BEM syntax, without mentioning why the CSS is structured in such a way.</p>
+
+<p>To read more about the system read <a href="https://css-tricks.com/bem-101/">BEM 101</a> on CSS Tricks.</p>
+
+<h4 id="Other_common_systems">Other common systems</h4>
+
+<p>There are a large number of these systems in use. Other popular approaches include <a href="http://smacss.com/">Scalable and Modular Architecture for CSS (SMACSS)</a>, created by Jonathan Snook, <a href="https://itcss.io/">ITCSS</a> from Harry Roberts, and <a href="https://acss.io/">Atomic CSS (ACSS)</a>, originally created by Yahoo!. If you come across a project that uses one of these approaches then the advantage is that you will be able to search and find many articles and guides to help you understand how to code in the same style.</p>
+
+<p>The disadvantage of using such a system is that they can seem overly complex, especially for smaller projects.</p>
+
+<h3 id="Build_systems_for_CSS">Build systems for CSS</h3>
+
+<p>Another way to organise CSS is to take advantage of some of the tooling that is available for front-end developers, which allows you to take a slightly more programmatic approach to writing CSS. There are a number of tools which we refer to as <em>pre-processors</em> and <em>post-processors</em>. A pre-processor runs over your raw files and turns them into a stylesheet, whereas a post-processor takes your finished stylesheet and does something to it — perhaps to optimize it in order that it will load faster.</p>
+
+<p>Using any of these tools will require that your development environment can run the scripts that do the pre and post-processing. Many code editors can do this for you, or you can install command line tools to help.</p>
+
+<p>The most popular pre-processor is <a href="https://sass-lang.com/">Sass</a>. This is not a Sass tutorial, so I will briefly explain a couple of the things that Sass can do, which are really helpful in terms of organisation, even if you don't use any of the other Sass features. If you want to learn a lot more about Sass, start with the <a href="https://sass-lang.com/guide">Sass basics</a> article, then move on to their other documentation.</p>
+
+<h4 id="Defining_variables">Defining variables</h4>
+
+<p>CSS now has native <a href="/en-US/docs/Web/CSS/Using_CSS_custom_properties">custom properties</a>, making this feature increasingly less important, however one of the reasons you might use Sass is to be able to define all of the colors and fonts used in a project as settings, then use that variable around the project. This means that if you realise you have used the wrong shade of blue, you only need change it in one place.</p>
+
+<p>If we created a variable called <code>$base-color</code> as in the first line below, we could then use it through the stylesheet anywhere that required that color.</p>
+
+<pre class="brush: css  notranslate"><code>$base-color: #c6538c;
+
+.alert {
+  border: 1px solid $base-color;
+}</code></pre>
+
+<p>Once compiled to CSS, you would end up with the following CSS in the final stylesheet.</p>
+
+<pre class="brush: css  notranslate"><code>.alert {
+  border: 1px solid #c6538c;
+}</code></pre>
+
+<h4 id="Compiling_component_stylesheets">Compiling component stylesheets</h4>
+
+<p>I mentioned above that one way to organise CSS is to break down stylesheets into smaller stylesheets. When using Sass you can take this to another level and have lots of very small stylesheets — even going as far as having a separate stylesheet for each component. By using the include functionality in Sass (partials) these can then all be compiled together into one, or a small number of stylesheets to actually link into your website.</p>
+
+<p>So for example, with <a href="https://sass-lang.com/documentation/at-rules/use#partials">partials</a>, you could have several style files inside a directory, say <code>foundation/_code.scss</code>, <code>foundation/_lists.scss</code>, <code>foundation/_footer.scss</code>, <code>foundation/_links.scss</code>, etc., then use the Sass <code>@use</code> role to load them into other stylesheets:</p>
+
+<pre class="brush: css  notranslate">// foundation/_index.sass
+@use 'code'
+@use 'lists'
+@use 'footer'
+@use 'links'</pre>
+
+<p>If the partials are all loaded into an index file, as implied above, you can then load that entire directory into another stylesheet in one go:</p>
+
+<pre class="brush: css  notranslate">// style.sass
+@use 'foundation'</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: A simple way to try out Sass is to use <a href="https://codepen.io">CodePen</a> — you can enable Sass for your CSS in the Settings for a Pen, and CodePen will then run the Sass parser for you, in order that you can see the resulting webpage with regular CSS applied. Sometimes you will find that CSS tutorials have used Sass rather than plain CSS in their CodePen demos, so it is handy to know a little bit about it.</p>
+</div>
+
+<h4 id="Post-processing_for_optimization">Post-processing for optimization</h4>
+
+<p>If you are concerned about adding size to your stylesheets by adding a lot of additional comments and whitespace for example, then a post-processing step could be to optimize the CSS by stripping out anything unnecessary in the production version. An example of a post-processor solution for doing this would be <a href="https://cssnano.co/">cssnano</a>.</p>
+
+<h2 id="Wrapping_up">Wrapping up</h2>
+
+<p>This is the final part of our Learning CSS Guide, and as you can see there are many ways in which your exploration of CSS can continue from this point.</p>
+
+<p>To learn more about layout in CSS, see the <a href="/en-US/docs/Learn/CSS/CSS_layout">Learn CSS Layout</a> section.</p>
+
+<p>You should also now have the skills to explore the rest of the <a href="/en-US/docs/Web/CSS">MDN CSS</a> material. You can look up properties and values, explore our <a href="/en-US/docs/Web/CSS/Layout_cookbook">CSS Cookbook</a> for patterns to use, and read more in some of the specific guides such as our <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">Guide to CSS Grid Layout</a>.</p>
+
+<p>{{PreviousMenu("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
+</ol>
diff --git a/files/de/learn/css/building_blocks/werten_einheiten/index.html b/files/de/learn/css/building_blocks/werten_einheiten/index.html
new file mode 100644
index 0000000000..8c45b5ba69
--- /dev/null
+++ b/files/de/learn/css/building_blocks/werten_einheiten/index.html
@@ -0,0 +1,394 @@
+---
+title: Werte und Einheiten in CSS
+slug: Learn/CSS/Building_blocks/Werten_Einheiten
+tags:
+  - CSS
+  - Einheiten
+  - Farbe
+  - Lernen
+  - Werte
+translation_of: Learn/CSS/Building_blocks/Values_and_units
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</div>
+
+<p>Every property used in CSS has a value or set of values that are allowed for that property, and taking a look at any property page on MDN will help you understand the values that are valid for any particular property. In this lesson we will take a look at some of the most common values and units in use.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Basic computer literacy, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, basic knowledge of <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>, HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To learn about the different types of values and units used in CSS properties.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="What_is_a_CSS_value">What is a CSS value?</h2>
+
+<p>In CSS specifications and on the property pages here on MDN you will be able to spot values as they will be surrounded by angle brackets, such as <code><a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a></code> or <code><a href="/en-US/docs/Web/CSS/length">&lt;length&gt;</a></code>. When you see the value <code>&lt;color&gt;</code> as valid for a particular property, that means you can use any valid color as a value for that property, as listed on the <code><a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a></code> reference page.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: You'll also see CSS values referred to as <em>data types</em>. The terms are basically interchangeable — when you see something in CSS referred to as a data type, it is really just a fancy way of saying value.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Yes, CSS values tend to be denoted using angle brackets, to differentiate them from CSS properties (e.g. the {{cssxref("color")}} property, versus the <a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a> data type). You might get confused between CSS data types and HTML elements too, as they both use angle brackets, but this is unlikely — they are used in very different contexts.</p>
+</div>
+
+<p>In the following example we have set the color of our heading using a keyword, and the background using the <code>rgb()</code> function:</p>
+
+<pre class="brush: css"><code>h1 {
+  color: black;
+  background-color: rgb(197,93,161);
+} </code>
+</pre>
+
+<p>A value in CSS is a way to define a collection of allowable sub-values. This means that if you see <code>&lt;color&gt;</code> as valid you don't need to wonder which of the different types of color value can be used — keywords, hex values, <code>rgb()</code> functions, etc. You can use <em>any</em> available <code>&lt;color&gt;</code> values assuming they are supported by your browser. The page on MDN for each value will give you information about browser support. For example, if you look at the page for <code><a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a></code> you will see that the browser compatibility section lists different types of color value and support for them.</p>
+
+<p>Let's have a look at some of the types of value and unit you may frequently encounter, with examples so that you can try out different possible values.</p>
+
+<h2 id="Numbers_lengths_and_percentages">Numbers, lengths, and percentages</h2>
+
+<p>There are various numeric data types that you might find yourself using in CSS. The following are all classed as numeric:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Data type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/CSS/integer">&lt;integer&gt;</a></code></td>
+   <td>An <code>&lt;integer&gt;</code> is a whole number such as <code>1024</code> or <code>-55</code>.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/CSS/number">&lt;number&gt;</a></code></td>
+   <td>A <code>&lt;number&gt;</code> represents a decimal number — it may or may not have a decimal point with a fractional component, for example <code>0.255</code>, <code>128</code>, or <code>-1.2</code>.</td>
+  </tr>
+  <tr>
+   <td><code>&lt;dimension&gt;</code></td>
+   <td>A <code>&lt;dimension&gt;</code> is a <code>&lt;number&gt;</code> with a unit attached to it, for example <code>45deg</code>, <code>5s</code>, or <code>10px</code>. <code>&lt;dimension&gt;</code> is an umbrella category that includes the <code><a href="/en-US/docs/Web/CSS/length">&lt;length&gt;</a></code>, <code><a href="/en-US/docs/Web/CSS/angle">&lt;angle&gt;</a></code>, <code><a href="/en-US/docs/Web/CSS/time">&lt;time&gt;</a></code>, and <code><a href="/en-US/docs/Web/CSS/resolution">&lt;resolution&gt;</a></code> types<a href="/en-US/docs/Web/CSS/resolution">.</a></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/CSS/percentage">&lt;percentage&gt;</a></code></td>
+   <td>A <code>&lt;percentage&gt;</code> represents a fraction of some other value, for example <code>50%</code>. Percentage values are always relative to another quantity, for example an element's length is relative to its parent element's length.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Lengths">Lengths</h3>
+
+<p>The numeric type you will come across most frequently is <code>&lt;length&gt;</code>, for example <code>10px</code> (pixels) or <code>30em</code>. There are two types of lengths used in CSS — relative and absolute. It's important to know the difference in order to understand how big things will become.</p>
+
+<h4 id="Absolute_length_units">Absolute length units</h4>
+
+<p>The following are all <strong>absolute</strong> length units — they are not relative to anything else and are generally considered to always be the same size.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Unit</th>
+   <th scope="col">Name</th>
+   <th scope="col">Equivalent to</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>cm</code></td>
+   <td>Centimeters</td>
+   <td>1cm = 96px/2.54</td>
+  </tr>
+  <tr>
+   <td><code>mm</code></td>
+   <td>Millimeters</td>
+   <td>1mm = 1/10th of 1cm</td>
+  </tr>
+  <tr>
+   <td><code>Q</code></td>
+   <td>Quarter-millimeters</td>
+   <td>1Q = 1/40th of 1cm</td>
+  </tr>
+  <tr>
+   <td><code>in</code></td>
+   <td>Inches</td>
+   <td>1in = 2.54cm = 96px</td>
+  </tr>
+  <tr>
+   <td><code>pc</code></td>
+   <td>Picas</td>
+   <td>1pc = 1/6th of 1in</td>
+  </tr>
+  <tr>
+   <td><code>pt</code></td>
+   <td>Points</td>
+   <td>1pt = 1/72th of 1in</td>
+  </tr>
+  <tr>
+   <td><code>px</code></td>
+   <td>Pixels</td>
+   <td>1px = 1/96th of 1in</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Most of these values are more useful when used for print, rather than screen output. For example we don't typically use <code>cm</code> (centimeters) on screen. The only value that you will commonly use is <code>px</code> (pixels).</p>
+
+<h4 id="Relative_length_units">Relative length units</h4>
+
+<p>Relative length units are relative to something else, perhaps the size of the parent element's font, or the size of the viewport. The benefit of using relative units is that with some careful planning you can make it so the size of text or other elements scale relative to everything else on the page. Some of the most useful units for web development are listed in the table below.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Unit</th>
+   <th scope="col">Relative to</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>em</code></td>
+   <td>Font size of the element.</td>
+  </tr>
+  <tr>
+   <td><code>ex</code></td>
+   <td>x-height of the element's font.</td>
+  </tr>
+  <tr>
+   <td><code>ch</code></td>
+   <td>The advance measure (width) of the glyph "0" of the element's font.</td>
+  </tr>
+  <tr>
+   <td><code>rem</code></td>
+   <td>Font size of the root element.</td>
+  </tr>
+  <tr>
+   <td><code>lh</code></td>
+   <td>Line height of the element.</td>
+  </tr>
+  <tr>
+   <td><code>vw</code></td>
+   <td>1% of the viewport's width.</td>
+  </tr>
+  <tr>
+   <td><code>vh</code></td>
+   <td>1% of the viewport's height.</td>
+  </tr>
+  <tr>
+   <td><code>vmin</code></td>
+   <td>1% of the viewport's smaller dimension.</td>
+  </tr>
+  <tr>
+   <td><code>vmax</code></td>
+   <td>1% of the viewport's larger dimension.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Exploring_an_example">Exploring an example</h4>
+
+<p>In the example below you can see how some relative and absolute length units behave. The first box has a {{cssxref("width")}} set in pixels. As an absolute unit this width will remain the same no matter what else changes.</p>
+
+<p>The second box has a width set in <code>vw</code> (viewport width) units. This value is relative to the viewport width, and so 10vw is 10 percent of the width of the viewport. If you change the width of your browser window, the size of the box should change, however this example is embedded into the page using an <code><a href="/en-US/docs/Web/HTML/Element/iframe">&lt;iframe&gt;</a></code>, so this won't work. To see this in action you'll have to <a href="https://mdn.github.io/css-examples/learn/values-units/length.html">try the example after opening it in its own browser tab</a>.</p>
+
+<p>The third box uses <code>em</code> units. These are relative to the font size. I've set a font size of <code>1em</code> on the containing {{htmlelement("div")}}, which has a class of <code>.wrapper</code>. Change this value to <code>1.5em</code> and you will see that the font size of all the elements increases, but only the last item will get wider, as the width is relative to that font size.</p>
+
+<p>After following the instructions above, try playing with the values in other ways, to see what you get.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}</p>
+
+<h4 id="ems_and_rems">ems and rems</h4>
+
+<p><code>Die relativen Maßeneinheiten, <strong>em</strong></code><strong> </strong>und <strong><code>rem</code></strong><code>,</code>die oft ins Größe Veränderung sich handeln, so dass eine Anpassung in absolute Werten  when sizing anything from boxes to text. It's worth understanding how these work, and the differences between them, especially when you start getting on to more complex subjects like <a href="/en-US/docs/Learn/CSS/Styling_text">styling text</a> or <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a>. The below example provides a demonstration.</p>
+
+<p>The HTML is a set of nested lists — we have three lists in total and both examples have the same HTML. The only difference is that the first has a class of <em>ems</em> and the second a class of <em>rems</em>.</p>
+
+<p>To start with, we set 16px as the font size on the <code>&lt;html&gt;</code> element.</p>
+
+<p><strong>To recap, the em unit means "my parent element's font-size"</strong>. The {{htmlelement("li")}} elements inside the {{htmlelement("ul")}} with a <code>class</code> of <code>ems</code> take their sizing from their parent. So each successive level of nesting gets progressively larger, as each has its font size set to <code>1.3em</code> — 1.3 times its parent's font size.</p>
+
+<p><strong>To recap, the rem unit means "The root element's font-size"</strong>. (rem standards for "root em".) The {{htmlelement("li")}} elements inside the {{htmlelement("ul")}} with a <code>class</code> of <code>rems</code> take their sizing from the root element (<code>&lt;html&gt;</code>). This means that each successive level of nesting does not keep getting larger.</p>
+
+<p>However, if you change the <code>&lt;html&gt;</code> <code>font-size</code> in the CSS you will see that everything else changes relative to it — both <code>rem</code>- and <code>em</code>-sized text.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} </p>
+
+<h3 id="Percentages">Percentages</h3>
+
+<p>In a lot of cases a percentage is treated in the same way as a length. The thing with percentages is that they are always set relative to some other value. For example, if you set an element's <code>font-size</code> as a percentage it will be a percentage of the <code>font-size</code> of the element's parent. If you use a percentage for a <code>width</code> value, it will be a percentage of the <code>width</code> of the parent.</p>
+
+<p>In the below example the two percentage-sized boxes and the two pixel-sized boxes have the same class names. Both sets are 200px and 40% wide respectively.</p>
+
+<p>The difference is that the second set of two boxes is inside a wrapper that is 400 pixels wide. The second 200px wide box is the same width as the first one, but the second 40% box is now 40% of 400px — a lot narrower than the first one!</p>
+
+<p><strong>Try changing the width of the wrapper or the percentage value to see how this works.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} </p>
+
+<p>The next example has font sizes set in percentages. Each <code>&lt;li&gt;</code> has a <code>font-size</code> of 80%, therefore the nested list items become progressively smaller as they inherit their sizing from their parent.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} </p>
+
+<p>Note that, while many values accept a length or a percentage, there are some that only accept length. You can see which values are accepted on the MDN property reference pages. If the allowed value includes <code><a href="/en-US/docs/Web/CSS/length-percentage">&lt;length-percentage&gt;</a></code> then you can use a length or a percentage. If the allowed value only includes <code>&lt;length&gt;</code>, it is not possible to use a percentage.</p>
+
+<h3 id="Numbers">Numbers</h3>
+
+<p>Some values accept numbers, without any unit added to them. An example of a property which accepts a unitless number is the <code>opacity</code> property, which controls the opacity of an element (how transparent it is). This property accepts a number between <code>0</code> (fully transparent) and <code>1</code> (fully opaque).</p>
+
+<p><strong>In the below example, try changing the value of <code>opacity</code> to various decimal values between <code>0</code> and <code>1</code> and see how the box and its contents become more or less opaque.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} </p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: When you use a number in CSS as a value it should not be surrounded in quotes.</p>
+</div>
+
+<h2 id="Color">Color</h2>
+
+<p>There are many ways to specify color in CSS, some of which are more recently implemented than others. The same color values can be used everywhere in CSS, whether you are specifying text color, background color, or whatever else.</p>
+
+<p>The standard color system available in modern computers is 24 bit, which allows the display of about 16.7 million distinct colors via a combination of different red, green and blue channels with 256 different values per channel (256 x 256 x 256 = 16,777,216.) Let's have a look at some of the ways in which we can specify colors in CSS.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: In this tutorial we will look at the common methods of specifying color that have good browser support; there are others but they don't have as good support and are less common.</p>
+</div>
+
+<h3 id="Color_keywords">Color keywords</h3>
+
+<p>Quite often in examples here in the learn section or elsewhere on MDN you will see the color keywords used, as they are a simple and understandable way of specifying color. There are a number of these keywords, some of which have fairly entertaining names! You can see a full list on the page for the <code><a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a></code> value.</p>
+
+<p><strong>Try playing with different color values in the live examples below, to get more of an idea how they work.</strong></p>
+
+<h3 id="Hexadecimal_RGB_values">Hexadecimal RGB values</h3>
+
+<p>The next type of color value you are likely to encounter is hexadecimal codes. Each hex value consists of a hash/pound symbol (#) followed by six hexadecimal numbers, each of which can take one of 16 values between 0 and f (which represents 15) — so <code>0123456789abcdef</code>. Each pair of values represents one of the channels — red, green and blue — and allows us to specify any of the 256 available values for each (16 x 16 = 256.)</p>
+
+<p>These values are a bit more complex and less easy to understand, but they are a lot more versatile than keywords — you can use hex values to represent any color you want to use in your color scheme.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} </p>
+
+<p><strong>Again, try changing the values to see how the colors vary.</strong></p>
+
+<h3 id="RGB_and_RGBA_values">RGB and RGBA values</h3>
+
+<p>The third scheme we'll talk about here is RGB. An RGB value is a function — <code>rgb()</code> — which is given three parameters that represent the red, green, and blue channel values of the colors, in much the same way as hex values. The difference with RGB is that each channel is represented not by two hex digits, but by a decimal number between 0 and 255 — somewhat easier to understand.</p>
+
+<p>Let's rewrite our last example to use RGB colors:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} </p>
+
+<p>You can also use RGBA colors — these work in exactly the same way as RGB colors, and so you can use any RGB values, however there is a fourth value that represents the alpha channel of the color, which controls opacity. If you set this value to <code>0</code> it will make the color fully transparent, whereas <code>1</code> will make it fully opaque. Values in between give you different levels of transparency.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Setting an alpha channel on a color has one key difference to using the {{cssxref("opacity")}} property we looked at earlier. When you use opacity you make the element and everything inside it opaque, whereas using RGBA colors only makes the color you are specifying opaque.</p>
+</div>
+
+<p>In the example below I have added a background image to the containing block of our colored boxes. I have then set the boxes to have different opacity values — notice how the background shows through more when the alpha channel value is smaller.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}</p>
+
+<p><strong>In this example, try changing the alpha channel values to see how it affects the color output. </strong></p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: At some point modern browsers were updated so that <code>rgba()</code> and <code>rgb()</code>, and <code>hsl()</code> and <code>hsla()</code> (see below), became pure aliases of each other and started to behave exactly the same. So for example both <code>rgba()</code> and <code>rgb()</code> accept colors with and without alpha channel values. Try changing the above example's <code>rgba()</code> functions to <code>rgb()</code> and see if the colors still work! Which style you use is up to you, but separating out non-transparent and transparent color definitions to use the different functions gives (very) slightly better browser support and can act as a visual indicator of where transparent colors are being defined in your code.</p>
+</div>
+
+<h3 id="HSL_and_HSLA_values">HSL and HSLA values</h3>
+
+<p>Slightly less well-supported than RGB is the HSL color model (not supported on old versions of IE), which was implemented after much interest from designers. Instead of red, green, and blue values, the <code>hsl()</code> function accepts hue, saturation, and lightness values, which are used to distinguish between the 16.7 million colors, but in a different way:</p>
+
+<ul>
+ <li><strong>Hue</strong>: The base shade of the color. This takes a value between 0 and 360, representing the angles round a color wheel.</li>
+ <li><strong>Saturation</strong>: How saturated is the color? This takes a value from 0–100%, where 0 is no color (it will appear as a shade of grey), and 100% is full color saturation</li>
+ <li><strong>Lightness</strong>: How light or bright is the color? This takes a value from 0–100%, where 0 is no light (it will appear completely black) and 100% is full light (it will appear completely white)</li>
+</ul>
+
+<p>We can update the RGB example to use HSL colors like this:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} </p>
+
+<p>Just as RGB has RGBA, HSL has an HSLA equivalent, which gives you the same ability to specify the alpha channel. I've demonstrated this below by changing my RGBA example to use HSLA colors.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} </p>
+
+<p>You can use any of these color values in your projects. It is likely that for most projects you will decide on a color palette and then use those colors — and your chosen method of specifying color — throughout the whole project. You can mix and match color models, however for consistency it is usually best if your entire project uses the same one!</p>
+
+<h2 id="Images">Images</h2>
+
+<p>The <code><a href="/en-US/docs/Web/CSS/image">&lt;image&gt;</a></code> data type is used wherever an image is a valid value. This can be an actual image file pointed to via a <code>url()</code> function, or a gradient.</p>
+
+<p>In the example below we have demonstrated an image and a gradient in use as a value for the CSS <code>background-image</code> property.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} </p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: there are some other possible values for <code>&lt;image&gt;</code>, however these are newer and currently have poor browser support. Check out the page on MDN for the <code><a href="/en-US/docs/Web/CSS/image">&lt;image&gt;</a></code> data type if you want to read about them.</p>
+</div>
+
+<h2 id="Position">Position</h2>
+
+<p>The <code><a href="/en-US/docs/Web/CSS/position_value">&lt;position&gt;</a></code> data type represents a set of 2D coordinates, used to position an item such as a background image (via <code><a href="/en-US/docs/Web/CSS/background-position">background-position</a></code>). It can take keywords such as <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>, and <code>center</code> to align items with specific bounds of a 2D box, along with lengths, which represent offsets from the top and left-hand edges of the box.</p>
+
+<p>A typical position value consists of two values — the first sets the position horizontally, the second vertically. If you only specify values for one axis the other will default to <code>center</code>.</p>
+
+<p>In the following example we have positioned a background image 40px from the top and to the right of the container using a keyword.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} </p>
+
+<p><strong>Play around with these values to see how you can push the image around.</strong></p>
+
+<h2 id="Strings_and_identifiers">Strings and identifiers</h2>
+
+<p>Throughout the examples above, we've seen places where keywords are used as a value (for example <code>&lt;color&gt;</code> keywords like <code>red</code>, <code>black</code>, <code>rebeccapurple</code>, and <code>goldenrod</code>). These keywords are more accurately described as <em>identifiers</em>, a special value that CSS understands. As such they are not quoted — they are not treated as strings.</p>
+
+<p>There are places where you use strings in CSS, for example <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#Generating_content_with_before_and_after">when specifying generated content</a>. In this case the value is quoted to demonstrate that it is a string. In the below example we use unquoted color keywords along with a quoted generated content string.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} </p>
+
+<h2 id="Functions">Functions</h2>
+
+<p>The final type of value we will take a look at is the group of values known as functions. In programming, a function is a reusable section of code that can be run multiple times to complete a repetitive task with minimum effort on the part of both the developer and the computer. Functions are usually associated with languages like JavaScript, Python, or C++, but they do exist in CSS too, as property values. We've already seen functions in action in the Colors section — <code>rgb()</code>, <code>hsl()</code>, etc. The value used to return an image from a file — <code>url()</code> — is also a function.</p>
+
+<p>A value that behaves more like something you might find in a traditional programming language is the <code>calc()</code> CSS function. This function gives you the ability to do simple calculations inside your CSS. It's particularly useful if you want to work out values that you can't define when writing the CSS for your project, and need the browser to work out for you at runtime.</p>
+
+<p>For example, below we are using <code>calc()</code> to make the box <code>20% + 100px</code> wide. The 20% is calculated from the width of the parent container <code>.wrapper</code> and so will change if that width changes. We can't do this calculation beforehand because we don't know what 20% of the parent will be, so we use <code>calc()</code> to tell the browser to do it for us.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>This has been a quick run through of the most common types of values and units you might encounter. You can have a look at all of the different types on the <a href="/en-US/docs/Web/CSS/CSS_Values_and_Units">CSS Values and units</a> reference page; you will encounter many of these in use as you work through these lessons.</p>
+
+<p>The key thing to remember is that each property has a defined list of allowed values, and each value has a definition explaining what the sub-values are. You can then look up the specifics here on MDN.</p>
+
+<p>For example, understanding that <code><a href="/en-US/docs/Web/CSS/image">&lt;image&gt;</a></code> also allows you to create a color gradient is useful but perhaps non-obvious knowledge to have!</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
+</ol>
diff --git a/files/de/learn/css/css_layout/flexbox/index.html b/files/de/learn/css/css_layout/flexbox/index.html
new file mode 100644
index 0000000000..499a21cc4f
--- /dev/null
+++ b/files/de/learn/css/css_layout/flexbox/index.html
@@ -0,0 +1,352 @@
+---
+title: Flexbox
+slug: Learn/CSS/CSS_layout/Flexbox
+tags:
+  - Anfänger
+  - Artikel
+  - CSS
+  - CSS layouts
+  - Flexible Boxen
+  - Layout
+  - Layouts
+  - Leitfaden
+  - Lernen
+  - flexbox
+translation_of: Learn/CSS/CSS_layout/Flexbox
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div>
+
+<p class="summary"><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a> ist eine Layoutmethode zum Anordnen von Elementen in Zeilen oder Spalten. Elemente werden gestreckt, um zusätzlichen Platz zu füllen, und schrumpfen, um in kleinere Räume zu passen. Dieser Artikel erklärt alle Grundlagen.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Voraussetzungen:</th>
+   <td>HTML Grundlagen (siehe <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), und eine Vorstellung davon, wie CSS funktioniert (study <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Zielsetzung:</th>
+   <td>Erfahren Sie, wie Sie mit dem Flexbox-Layoutsystem Weblayouts erstellen.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Warum_Flexbox">Warum Flexbox?</h2>
+
+<p>Lange Zeit waren die einzigen zuverlässigen browserübergreifenden Tools zum Erstellen von CSS-Layouts Dinge wie Floats und Positionierung. Diese sind in Ordnung und funktionieren, aber in gewisser Weise sind sie auch eher einschränkend und frustrierend.</p>
+
+<p>Die folgenden einfachen Layoutanforderungen sind mit solchen Werkzeugen auf bequeme und flexible Weise entweder schwierig oder unmöglich zu erreichen:</p>
+
+<ul>
+ <li>Vertikales Zentrieren eines Inhaltsblocks in seinem übergeordneten Element.</li>
+ <li>Alle untergeordneten Elemente eines Containers sollen die gleichen Anteil der Breite / Höhe einnehmen, unabhängig davon, wie viel Breite / Höhe verfügbar ist.</li>
+ <li>Alle Spalten in einem mehrspaltigen Layout mit einheitlicher Höhe gestalten, auch wenn sie eine andere Menge an Inhalt enthalten.</li>
+</ul>
+
+<p>Wie Sie in den folgenden Abschnitten sehen werden, erleichtert Flexbox viele Layoutaufgaben erheblich. Lass uns eintauchen!</p>
+
+<h2 id="Ein_einfaches_Beispiel">Ein einfaches Beispiel</h2>
+
+<p>In diesem Artikel werden Sie eine Reihe von Übungen durcharbeiten, um zu verstehen, wie Flexbox funktioniert. Zuerst sollten Sie eine lokale Kopie der ersten Startdatei - <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html </a>aus unserem Github-Repo - erstellen, sie in einen modernen Browser (wie Firefox oder Chrome) laden und den Code in Ihrem Code-Editor anzeigen. Sie können es auch <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html">hier live sehen</a>.</p>
+
+<p>Sie werden sehen, dass wir ein {{htmlelement ("header")}} Element mit einer Überschrift der obersten Ebene und ein {{htmlelement ("section")}} Element mit drei {{htmlelement ("article") }} haben. Wir werden damit ein standardmäßiges dreispaltiges Layout erstellen.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p>
+
+<h2 id="Festlegen_der_Elemente_für_flexible_Boxen">Festlegen der Elemente für flexible Boxen </h2>
+
+<p>Zunächst müssen wir auswählen, welche Elemente als flexible Boxen angeordnet werden sollen. Dazu setzen wir einen speziellen Wert von {{cssxref ("display")}} für das übergeordnete Element der Elemente, die Sie beeinflussen möchten. In diesem Fall möchten wir die {{htmlelement ("article")}} Elemente anordnen, also setzen wir dies auf das {{htmlelement ("section")}}:</p>
+
+<pre class="brush: css  notranslate">section {
+  display: flex;
+}</pre>
+
+<p>Dies führt dazu, dass das &lt;section&gt; -Element zu einem <strong>Flex-Container</strong> wird und seine untergeordneten Elemente zu <strong>Flex-Elementen</strong> werden. Das Ergebnis sollte ungefähr so sein:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13408/flexbox-example2.png" style="border-style: solid; border-width: 1px; display: block; height: 348px; margin: 0px auto; width: 800px;"></p>
+
+<p>Diese Deklaration erzeugt alles, was wir brauchen - unglaublich, oder? Wir haben unser mehrspaltiges Layout mit gleich großen Spalten, und die Spalten haben alle die gleiche Höhe. Dies liegt an de Standardwerte für Flex-Elemente (die untergeordneten Elemente des Flex-Containers), die  so eingerichtet sind, um solche häufig auftretenden Probleme wie dieses zu lösen.</p>
+
+<p>Lassen Sie uns noch einmal wiederholen, was hier passiert. Das Element, dem wir einen {{cssxref ("display")}} -Wert <code>flex</code> zugewiesen haben, verhält sich in Bezug auf die Interaktion mit dem Rest der Seite wie ein Element auf Blockebene, aber seine untergeordneten Elemente werden als Flex-Elemente angeordnet - Im nächsten Abschnitt wird detaillierter erläutert, was das bedeutet. Beachten Sie auch, dass Sie den <code>display</code> Wert <code>inline-flex</code> verwenden können, wenn Sie die untergeordneten Elemente eines Elements als Flex-Elemente auslegen möchten, dieses Element sich jedoch wie ein Inline-Element verhält.</p>
+
+<h2 id="Das_flex_Modell">Das flex Modell</h2>
+
+<p>Wenn Elemente als flex-Elemente angeordnet sind, werden sie entlang zweier Achsen angeordnet:</p>
+
+<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png" style="display: block; margin: 0px auto;"></p>
+
+<ul>
+ <li>Die <strong>Hauptachse (main axis) </strong>ist die Achse, die in der Richtung verläuft, in der die Flex-Elemente angeordnet sind (z. B. als Zeilen auf der Seite oder Spalten auf der Seite). Anfang und Ende dieser Achse werden als main start und main end bezeichnet.</li>
+ <li>Die <strong>Querachse (cross axis) </strong>verläuft senkrecht dazu. Anfang und Ende dieser Achse werden als cross start und cross end bezeichnet.</li>
+ <li>Das übergeordnete Element, auf dem <code>display: flex</code> festgelegt ist (in unserem Beispiel das {{htmlelement ("section")}}), wird als <strong>Flex-Container</strong> bezeichnet.</li>
+ <li>Die als flexible Boxen im Flex-Container angeordnetrn Elemente werden als <strong>Flex-Elemente (flex-items) </strong>bezeichnet (in unserem Beispiel die Elemente {{htmlelement ("article")}}).</li>
+</ul>
+
+<p>Beachten Sie diese Terminologie, wenn Sie die folgenden Abschnitte durchgehen. Sie können jederzeit darauf zurückgreifen, wenn Sie über einen der verwendeten Begriffe verwirrt sind.</p>
+
+<h2 id="Spalten_oder_Zeilen">Spalten oder Zeilen?</h2>
+
+<p>Flexbox bietet eine Eigenschaft namens {{cssxref ("flex-direction")}}, die angibt, in welche Richtung die Hauptachse verläuft (in welche Richtung die untergeordneten Flexbox-Elemente angeordnet sind). Standardmäßig ist dies auf row festgelegt, wodurch sie veranlasst werden in einer Reihe in der Richtung angeordnet sein, in der die Standardsprache Ihres Browsers funktioniert (von links nach rechts, im Fall eines englischen Browsers).</p>
+
+<p>Fügen Sie Ihrer {{htmlelement ("section")}} Regel die folgende Deklaration hinzu:</p>
+
+<pre class="brush: css  notranslate">flex-direction: column;</pre>
+
+<p>Sie sehen, dass die Elemente dadurch wieder in ein Spaltenlayout versetzt werden, ähnlich wie vor dem Hinzufügen von CSS. Bevor Sie fortfahren, löschen Sie diese Deklaration aus Ihrem Beispiel.</p>
+
+<div class="note">
+<p><strong>Hinweis: </strong>Sie können Flex-Elemente auch in umgekehrter Richtung auslegen, indem Sie die Werte <code>row-reverse</code> für Zeilenumkehr und <code>column-reverse</code> für Spaltenumkehr verwenden. Experimentieren Sie auch mit diesen Werten!</p>
+</div>
+
+<h2 id="Umbruch">Umbruch</h2>
+
+<p>Ein Problem, das auftritt, wenn Sie eine feste Breite oder Höhe in Ihrem Layout haben, ist, dass Ihre Flexbox-Kinder möglicherweise ihren Container überlaufen und das Layout beschädigen. Schauen Sie sich unser Beispiel <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox-wrap0.html">flexbox-wrap0.html</a> an und versuchen Sie, <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox-wrap0.html">es live anzuzeigen</a> (erstellen Sie jetzt eine lokale Kopie dieser Datei, wenn Sie diesem Beispiel folgen möchten):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13410/flexbox-example3.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;"></p>
+
+<p>Hier sehen wir die Kind-Elemente tatsächlich aus ihrem Container laufen. Eine Möglichkeit, dies zu beheben, besteht darin, Ihrer {{htmlelement ("section")}} -Regel die folgende Deklaration hinzuzufügen:</p>
+
+<pre class="brush: css  notranslate">flex-wrap: wrap;</pre>
+
+<p>Fügen Sie Ihrer {{htmlelement ("article")}} Regel außerdem die folgende Deklaration hinzu:</p>
+
+<pre class="brush: css  notranslate">flex: 200px;</pre>
+
+<p>Sie werden sehen, dass das Layout damit viel besser aussieht:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13412/flexbox-example4.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;"></p>
+
+<p>Wir haben jetzt mehrere Zeilen - so viele Flexbox-Kinder werden in jede Zeile eingefügt, wie sinnvoll ist, und jeder Überlauf wird in die nächste Zeile verschoben. Die auf den Artikeln festgelegte <code>flex: 200px</code>-Deklaration bedeutet, dass jede mindestens 200px breit ist. Wir werden diese Eigenschaft später genauer besprechen. Möglicherweise stellen Sie auch fest, dass die letzten untergeordneten Elemente in der letzten Zeile jeweils breiter sind, sodass die gesamte Zeile noch gefüllt ist.</p>
+
+<p>Aber wir können hier noch mehr tun. Versuchen Sie zunächst, den Eigenschaftswert {{cssxref ("flex-direction")}} in <code>row-reverse</code> zu ändern. Jetzt sehen Sie, dass Sie immer noch über ein Layout mit mehreren Zeilen verfügen, das jedoch in der gegenüberliegenden Seite des Browsers beginnt Fenster und in umgekehrter Richtung fließt.</p>
+
+<h2 id="flex-flow_shorthand">flex-flow shorthand</h2>
+
+<p>An dieser Stelle ist anzumerken, dass eine Abkürzung für {{cssxref ("Flex-Wrap")}} und {{cssxref ("Flex-Wrap")}} - {{cssxref ("Flex-Flow")}} existiert . So können Sie beispielsweise</p>
+
+<pre class="brush: css  notranslate">flex-direction: row;
+flex-wrap: wrap;</pre>
+
+<p>ersetzen mit</p>
+
+<pre class="brush: css  notranslate">flex-flow: row wrap;</pre>
+
+<h2 id="Flexible_Dimensionierung_von_flex-Artikeln">Flexible Dimensionierung von flex-Artikeln</h2>
+
+<p>Kehren wir nun zu unserem ersten Beispiel zurück und schauen wir uns an, wie wir steuern können, welchen Anteil der Space-Flex-Elemente im Vergleich zu den anderen Flex-Elementen einnehmen. Starten Sie Ihre lokale Kopie von <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html </a>oder nehmen Sie eine Kopie von <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox1.html">flexbox1.html</a> als neuen Ausgangspunkt (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox1.html">hier auch live</a>).</p>
+
+<p>Fügen Sie zunächst die folgende Regel am Ende Ihres CSS hinzu:</p>
+
+<pre class="brush: css  notranslate">article {
+  flex: 1;
+}</pre>
+
+<p>Dies ist ein einheitloser Proportionswert, der bestimmt, wie viel des verfügbaren Platzes entlang der Hauptachse jedes Flex-Element im Vergleich zu anderen Flex-Elementen einnimmt. In diesem Fall geben wir jedem {{htmlelement ("article")}} Element den gleichen Wert (den Wert 1), was bedeutet, dass alle gleich viel Platz nach dem Auffüllen und dem Rand beanspruchen. Es ist relativ zu anderen Flex-Elementen, was bedeutet, dass ein Wert von 400000 für jedes Flex-Element genau den gleichen Effekt hätte.</p>
+
+<p>Fügen Sie nun die folgende Regel unter der vorherigen hinzu:</p>
+
+<pre class="brush: css  notranslate">article:nth-of-type(3) {
+  flex: 2;
+}</pre>
+
+<p>Wenn Sie jetzt aktualisieren, werden Sie feststellen, dass das dritte {{htmlelement ("article")}} doppelt so viel der verfügbaren Breite einnimmt wie die beiden anderen - es sind jetzt insgesamt vier Proportionseinheiten verfügbar (1 + 1) + 2 = 4). Die ersten beiden Flex-Elemente haben jeweils eine Einheit, sodass sie jeweils 1/4 des verfügbaren Platzes beanspruchen. Die dritte hat zwei Einheiten, nimmt also 2/4 des verfügbaren Platzes (oder die Hälfte) ein.</p>
+
+<p>Sie können auch einen Mindestgrößenwert innerhalb des Flex-Werts angeben. Versuchen Sie, Ihre vorhandenen Artikelregeln wie folgt zu aktualisieren:</p>
+
+<pre class="brush: css  notranslate">article {
+  flex: 1 200px;
+}
+
+article:nth-of-type(3) {
+  flex: 2 200px;
+}</pre>
+
+<p>Das heißt im Wesentlichen: "Jedes Flex-Element erhält zuerst 200 Pixel des verfügbaren Speicherplatzes. Danach wird der Rest des verfügbaren Speicherplatzes entsprechend den Proportionseinheiten aufgeteilt." Versuchen Sie es mit einer Aktualisierung, und Sie werden einen Unterschied in der Aufteilung des Speicherplatzes feststellen.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p>
+
+<p>Der wahre Wert von flexbox zeigt sich in seiner Flexibilität / Responsiveness. Wenn Sie die Größe des Browserfensters ändern oder ein weiteres {{htmlelement ("article")}} Element hinzufügen, funktioniert das Layout weiterhin einwandfrei.</p>
+
+<h2 id="flex_Kurzform_versus_Langform">flex: Kurzform versus Langform</h2>
+
+<p>{{cssxref ("flex")}} ist eine Kurzform-Eigenschaft, die bis zu drei verschiedene Werte angeben kann:</p>
+
+<ul>
+ <li>Der Anteil des Anteils ohne Einheit, den wir oben besprochen haben. Dies kann individuell mit der Langform {{cssxref ("flex-grow")}} angegeben werden.</li>
+ <li>Ein zweiter uneinheitlicher Proportionswert - {{cssxref ("flex-shrink")}} -, der ins Spiel kommt, wenn die flexiblen Elemente ihren Container überlaufen. Dies gibt an, wie viel der überlaufenden Menge von der Größe jedes Flex-Elements entfernt wird, um zu verhindern, dass sie ihren Behälter überlaufen. Dies ist eine erweiterte Flexbox-Funktion, auf die wir in diesem Artikel nicht weiter eingehen werden.</li>
+ <li>Der oben diskutierte Mindestgrößenwert. Dies kann individuell mit dem Lang-Wert {{cssxref ("flex-base")}} angegeben werden.</li>
+</ul>
+
+<p>Wir raten davon ab, die lLangform Flex-Eigenschaften zu verwenden, es sei denn, Sie müssen dies wirklich tun (z. B. um etwas zuvor festgelegtes zu überschreiben). Sie führen dazu, dass viel zusätzlicher Code geschrieben wird, und sie können etwas verwirrend sein.</p>
+
+<h2 id="Horizontale_und_vertikale_Ausrichtung">Horizontale und vertikale Ausrichtung</h2>
+
+<p>Sie können auch Flexbox-Funktionen verwenden, um Flex-Elemente entlang der Haupt- oder Querachse auszurichten. Schauen wir uns dies anhand eines neuen Beispiels an - f<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flex-align0.html">lex-align0.html</a> (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html">siehe auch live</a>) - das wir in eine übersichtliche, flexible Schaltfläche / Symbolleiste verwandeln werden. Im Moment sehen Sie eine horizontale Menüleiste mit einigen Schaltflächen in der oberen linken Ecke.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13414/flexbox-example5.png" style="display: block; height: 77px; margin: 0px auto; width: 600px;"></p>
+
+<p>Nehmen Sie zunächst eine lokale Kopie dieses Beispiels.</p>
+
+<p>Fügen Sie nun am Ende des CSS des Beispiels Folgendes hinzu:</p>
+
+<pre class="brush: css  notranslate">div {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/17210/flexbox_center_space-around.png" style="height: 209px; width: 1217px;"></p>
+
+<p>Aktualisieren Sie die Seite und Sie werden sehen, dass die Schaltflächen jetzt horizontal und vertikal gut zentriert sind. Wir haben dies über zwei neue Eigenschaften getan.</p>
+
+<p>{{cssxref ("align-items")}} steuert, wo sich die Flex-Elemente auf der Querachse befinden.</p>
+
+<ul>
+ <li>Standardwert ist <code>stretch</code>, wodurch alle Flex-Elemente gestreckt werden, um das übergeordnete Element in Richtung der Querachse zu füllen. Wenn das übergeordnete Element in Querrichtung keine feste Breite hat, werden alle Flex-Elemente so lang wie die längsten Flex-Elemente. So hat unser erstes Beispiel standardmäßig Spalten gleicher Höhe erhalten.</li>
+ <li>Der <code>center</code>-wert, den wir in unserem obigen Code verwendet haben, bewirkt, dass die Elemente ihre intrinsischen Abmessungen beibehalten, jedoch entlang der Querachse zentriert werden. Aus diesem Grund sind die Schaltflächen unseres aktuellen Beispiels vertikal zentriert.</li>
+ <li>Sie können auch Werte wie <code>flex-start</code> und <code>flex-end</code> festlegen, mit denen alle Elemente am Anfang bzw. Ende der Querachse ausgerichtet werden. Ausführliche Informationen finden Sie unter {{cssxref ("align-items")}}.</li>
+</ul>
+
+<p>Sie können das Verhalten {{cssxref ("align-items")}} für einzelne Flex-Elemente überschreiben, indem Sie die Eigenschaft {{cssxref ("align-self")}} auf diese anwenden. Versuchen Sie beispielsweise, Ihrem CSS Folgendes hinzuzufügen:</p>
+
+<pre class="brush: css  notranslate">button:first-child {
+  align-self: flex-end;
+}</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/17211/flexbox_first-child_flex-end.png" style="height: 217px; width: 1219px;"></p>
+
+<p>Sehen Sie sich an, welchen Effekt dies hat, und entfernen Sie ihn erneut, wenn Sie fertig sind.</p>
+
+<p>{{cssxref ("Berechtigungsinhalt")}} steuert, wo sich die Flex-Elemente auf der Hauptachse befinden.</p>
+
+<ul>
+ <li>Der Standardwert ist <code>flex-start</code>, wodurch alle Elemente am Anfang der Hauptachse sitzen.</li>
+ <li>Sie können <code>flex-end</code> verwenden, damit sie am Ende sitzen.</li>
+ <li><code>center</code> ist auch ein Wert für j<code>ustify-content</code> und lässt die flexiblen Elemente in der Mitte der Hauptachse sitzen.</li>
+ <li>Der oben verwendete Wert <code>space-around</code> ist nützlich - er verteilt alle Elemente gleichmäßig entlang der Hauptachse, wobei an beiden Enden etwas Platz verbleibt.</li>
+ <li>Es gibt einen anderen Wert, <code>space-between</code>, der dem <code>space-around</code> sehr ähnlich ist, außer dass an beiden Enden kein Leerzeichen verbleibt.</li>
+</ul>
+
+<p>Spielen Sie mit diesen Werten, um zu sehen, wie sie funktionieren, bevor Sie fortfahren.</p>
+
+<h2 id="Flex-Elemente_ordnen">Flex-Elemente ordnen</h2>
+
+<p>Flexbox bietet auch eine Funktion zum Ändern der Layoutreihenfolge von Flex-Elementen, ohne die Quellreihenfolge zu beeinflussen. Dies ist eine andere Sache, die mit herkömmlichen Layoutmethoden nicht möglich ist.</p>
+
+<p>Der Code hierfür ist einfach: Fügen Sie Ihrem Beispielcode für die Schaltflächenleiste das folgende CSS hinzu:</p>
+
+<pre class="brush: css  notranslate">button:first-child {
+  order: 1;
+}</pre>
+
+<p>Aktualisieren Sie, und Sie werden jetzt sehen, dass die Schaltfläche "Lächeln" an das Ende der Hauptachse verschoben wurde. Lassen Sie uns etwas detaillierter darüber sprechen, wie dies funktioniert:</p>
+
+<ul>
+ <li>Standardmäßig haben alle Flex-Elemente den Wert {{cssxref ("order")}} von 0.</li>
+ <li>Flex-Artikel mit höheren Ordnungswerten werden später in der Anzeigereihenfolge angezeigt als Artikel mit niedrigeren Ordnungswerten.</li>
+ <li>Flex-Artikel mit demselben Ordnungswert werden in ihrer Quellreihenfolge angezeigt. Wenn Sie also vier Elemente mit den Ordnungswerten 2, 1, 1 und 0 festgelegt haben, lautet die Anzeigereihenfolge 4., 2., 3. und dann 1 ..</li>
+ <li>Das 3. Element wird nach dem 2. angezeigt, da es denselben Wert hat und sich in der Quelloreihenfolge dahinter befindet.</li>
+</ul>
+
+<p>Sie können negative Werte festlegen, damit Elemente vor Elementen mit 0 angezeigt werden. Sie können beispielsweise die Schaltfläche "Blush" am Anfang der Hauptachse mit der folgenden Regel anzeigen lassen:</p>
+
+<pre class="brush: css  notranslate">button:last-child {
+  order: -1;
+}</pre>
+
+<h2 id="Verschachtelte_Flexboxen">Verschachtelte Flexboxen</h2>
+
+<p>Mit der Flexbox können einige recht komplexe Layouts erstellt werden. Es ist vollkommen in Ordnung, ein Flex-Element auch als Flex-Container festzulegen, damit seine untergeordneten Elemente auch wie flexible Boxen angeordnet sind. Schauen Sie sich <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/complex-flexbox.html">complex-flexbox.html</a> an (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html">Live-Ansicht</a>).</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13418/flexbox-example7.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>Das HTML dafür ist ziemlich einfach. Wir haben ein {{htmlelement ("section")}} Element, das drei {{htmlelement ("article")}} enthält. Das dritte {{htmlelement ("article")}} enthält drei {{htmlelement ("div")}}. ::</p>
+
+<pre class="notranslate">section - article
+          article
+          article - div - button
+                    div   button
+                    div   button
+                          button
+                          button</pre>
+
+<p>Schauen wir uns den Code an, den wir für das Layout verwendet haben.</p>
+
+<p>Zunächst legen wir fest, dass die untergeordneten Elemente des {{htmlelement ("section")}} als flexible Boxen angeordnet werden.</p>
+
+<pre class="brush: css  notranslate">section {
+  display: flex;
+}</pre>
+
+<p>Als nächstes setzen wir einige Flex-Werte für die {{htmlelement ("article")}} selbst. Beachten Sie hier besonders die 2. Regel - wir setzen das dritte {{htmlelement ("article")}} so, dass seine Kindelemente auch wie flexible Elemente angeordnet sind, aber diesmal legen wir sie wie eine Spalte an.</p>
+
+<pre class="brush: css  notranslate">article {
+  flex: 1 200px;
+}
+
+article:nth-of-type(3) {
+  flex: 3 200px;
+  display: flex;
+  flex-flow: column;
+}
+</pre>
+
+<p>Als nächstes wählen wir das erste {{htmlelement ("div")}} aus. Wir verwenden zuerst <code>flex: 1 100px</code>; Um eine effektive Höhe von 100 Pixel zu erreichen, setzen wir die untergeordneten Elemente (die {{htmlelement ("button")}} Elemente) so, dass sie auch wie flexible Elemente angeordnet sind. Hier legen wir sie in einer Umbruchreihe an und richten sie in der Mitte des verfügbaren Platzes aus, wie wir es in dem Beispiel für einzelne Schaltflächen getan haben, das wir zuvor gesehen haben.</p>
+
+<pre class="brush: css  notranslate">article:nth-of-type(3) div:first-child {
+  flex:1 100px;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: space-around;
+}</pre>
+
+<p>Schließlich haben wir einige Größen für die Schaltfläche festgelegt, aber interessanterweise geben wir ihr einen Flex-Wert von 1 Auto. Dies hat einen sehr interessanten Effekt, den Sie sehen, wenn Sie versuchen, die Breite Ihres Browserfensters zu ändern. Die Schaltflächen nehmen so viel Platz wie möglich ein und sitzen so viele auf derselben Linie wie möglich. Wenn sie jedoch nicht mehr bequem auf dieselbe Linie passen, werden sie nach unten fallen gelassen, um neue Linien zu erstellen.</p>
+
+<pre class="brush: css  notranslate">button {
+  flex: 1 auto;
+  margin: 5px;
+  font-size: 18px;
+  line-height: 1.5;
+}</pre>
+
+<h2 id="Cross-Browser-Kompatibilität">Cross-Browser-Kompatibilität</h2>
+
+<p>Die Flexbox-Unterstützung ist in den meisten neuen Browsern verfügbar - Firefox, Chrome, Opera, Microsoft Edge und IE 11, neuere Versionen von Android / iOS usw. Sie sollten sich jedoch bewusst sein, dass noch ältere Browser verwendet werden, die Flexbox nicht unterstützen (oder aber eine veraltete Version davon unterstützen.)</p>
+
+<p>Während Sie nur lernen und experimentieren, spielt dies keine große Rolle. Wenn Sie jedoch die Verwendung von Flexbox in einer echten Website in Betracht ziehen, müssen Sie Tests durchführen und sicherstellen, dass Ihre Benutzererfahrung in möglichst vielen Browsern noch akzeptabel ist.</p>
+
+<p>Flexbox ist etwas kniffliger als einige CSS-Funktionen. Wenn einem Browser beispielsweise ein CSS-Schlagschatten fehlt, kann die Site wahrscheinlich weiterhin verwendet werden. Wenn Flexbox-Funktionen nicht unterstützt werden, wird ein Layout wahrscheinlich vollständig beschädigt, wodurch es unbrauchbar wird.</p>
+
+<p>In unserem <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Cross-Browser-Testmodul</a> diskutieren wir Strategien zur Überwindung von Problemen mit der Cross-Browser-Unterstützung.</p>
+
+<h2 id="Testen_Sie_Ihre_Fähigkeiten!">Testen Sie Ihre Fähigkeiten!</h2>
+
+<p>Wir haben in diesem Artikel viel behandelt, aber können Sie sich an die wichtigsten Informationen erinnern? Sie können einige weitere Tests finden, um zu überprüfen, ob Sie diese Informationen beibehalten haben, bevor Sie fortfahren - siehe Testen Sie Ihre Fähigkeiten: Flexbox.</p>
+
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+
+<p>Damit ist unsere Tour durch die Grundlagen der Flexbox abgeschlossen. Wir hoffen, Sie hatten Spaß und werden ein gutes Stück damit herumspielen, wenn Sie Ihr Lernen vorantreiben. Als nächstes werfen wir einen Blick auf einen weiteren wichtigen Aspekt von CSS-Layouts - CSS-Raster.</p>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div>
+
+<div>
+<h2 id="In_diesem_Modul">In diesem Modul</h2>
+
+<ul>
+ <li><a href="/de-DE/docs/Learn/CSS/CSS_layout/Introduction">Einführung in das CSS-Layout</a></li>
+ <li><a href="/de-DE/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal flow</a></li>
+ <li><a href="/de-DE/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
+ <li><a href="/de-DE/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li>
+ <li><a href="/de-DE/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
+ <li><a href="/de-DE/docs/Learn/CSS/CSS_layout/Positioning">Positionieren</a></li>
+ <li><a href="/de-DE/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Mehrspaltiges Layout</a></li>
+ <li><a href="/de-DE/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></li>
+ <li><a href="/de-DE/docs/Learn/CSS/CSS_layout/Media_queries">Anfängerleitfaden für media queries</a></li>
+ <li><a href="/de-DEdocs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy-Layout-Methoden</a></li>
+ <li><a href="/de-DE/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Unterstützung älterer Browser</a></li>
+ <li><a href="/de-DE/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Grundlegende Bewertung des Layoutverständnisses</a></li>
+</ul>
+</div>
diff --git a/files/de/learn/css/css_layout/index.html b/files/de/learn/css/css_layout/index.html
new file mode 100644
index 0000000000..4351951f84
--- /dev/null
+++ b/files/de/learn/css/css_layout/index.html
@@ -0,0 +1,88 @@
+---
+title: CSS layout
+slug: Learn/CSS/CSS_layout
+tags:
+  - Beginner
+  - CSS
+  - Floating
+  - Grids
+  - Guide
+  - Landing
+  - Layout
+  - Learn
+  - Module
+  - Multiple column
+  - NeedsTranslation
+  - Positioning
+  - TopicStub
+  - alignment
+  - flexbox
+  - float
+  - table
+translation_of: Learn/CSS/CSS_layout
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">At this point we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. We have covered the necessary prerequisites so we can now dive deep into CSS layout, looking at different display settings, modern layout tools like flexbox, CSS grid, and positioning, and some of the legacy techniques you might still want to know about.</p>
+
+<div class="in-page-callout webdev">
+<h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3>
+
+<p>We have put together a course that includes all the essential information you need to work towards your goal.</p>
+
+<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p>
+</div>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>Before starting this module, you should already:</p>
+
+<ol>
+ <li>Have basic familiarity with HTML, as discussed in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module.</li>
+ <li>Be comfortable with CSS fundamentals, as discussed in <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.</li>
+ <li>Understand how to <a href="/en-US/docs/Learn/CSS/Styling_boxes">style boxes</a>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://glitch.com/">Glitch</a>.</p>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<p>These articles will provide instruction on the fundamental layout tools and techniques available in CSS. At the end of the lessons is an assessment to help you check your understanding of layout methods, by laying out a webpage.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></dt>
+ <dd>This article will recap some of the CSS layout features we've already touched upon in previous modules — such as different {{cssxref("display")}} values — and introduce some of the concepts we'll be covering throughout this module.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal flow</a></dt>
+ <dd>Elements on webpages lay themselves out according to <em>normal flow</em> - until we do something to change that. This article explains the basics of normal flow as a grounding for learning how to change it.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></dt>
+ <dd><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Flexbox</a> is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces. This article explains all the fundamentals. After studying this guide you can <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills">test your flexbox skills</a> to check your understanding before moving on.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grids</a></dt>
+ <dd>CSS Grid Layout is a two-dimensional layout system for the web. It lets you lay content out in rows and columns, and has many features that make building complex layouts straightforward. This article will give you all you need to know to get started with page layout, then <a href="/en-US/docs/Learn/CSS/CSS_layout/Grid_skills">test your grid skills</a> before moving on.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></dt>
+ <dd>Originally for floating images inside blocks of text, the {{cssxref("float")}} property became one of the most commonly used tools for creating multiple column layouts on webpages. With the advent of Flexbox and Grid it has now returned to its original purpose, as this article explains.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></dt>
+ <dd>Positioning allows you to take elements out of the normal document layout flow, and make them behave differently, for example sitting on top of one another, or always remaining in the same place inside the browser viewport. This article explains the different {{cssxref("position")}} values, and how to use them.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a></dt>
+ <dd>The multiple-column layout specification gives you a method of laying content out in columns, as you might see in a newspaper. This article explains how to use this feature.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></dt>
+ <dd>As more diverse screen sizes have appeared on web-enabled devices, the concept of responsive web design (RWD) has appeared: a set of practices that allows web pages to alter their layout and appearance to suit different screen widths, resolutions, etc. It is an idea that changed the way we design for a multi-device web, and in this article we'll help you understand the main techniques you need to know to master it.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Beginner's guide to media queries</a></dt>
+ <dd>The <strong>CSS Media Query</strong> gives you a way to apply CSS only when the browser and device environment matches a rule that you specify, for example "viewport is wider than 480 pixels". Media queries are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse. In this lesson you will first learn about the syntax used in media queries, and then move on to use them in a worked example showing how a simple design might be made responsive.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a></dt>
+ <dd>Grid systems are a very common feature used in CSS layouts, and before CSS Grid Layout they tended to be implemented using floats or other layout features. You imagine your layout as a set number of columns (e.g. 4, 6, or 12), and then fit your content columns inside these imaginary columns. In this article we'll explore how these older methods work, in order that you understand how they were used if you work on an older project.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></dt>
+ <dd>
+ <p>In this module we recommend using Flexbox and Grid as the main layout methods for your designs. However there will be visitors to your site who use older browsers, or browsers which do not support the methods you have used. This will always be the case on the web — as new features are developed, different browsers will prioritise different things. This article explains how to use modern web techniques without locking out users of older technology.</p>
+ </dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Assessment: Fundamental layout comprehension</a></dt>
+ <dd>An assessment to test your knowledge of different layout methods by laying out a webpage.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Practical positioning examples</a></dt>
+ <dd>This article shows how to build some real world examples to illustrate what kinds of things you can do with positioning.</dd>
+</dl>
diff --git a/files/de/learn/css/first_steps/index.html b/files/de/learn/css/first_steps/index.html
new file mode 100644
index 0000000000..a43d3b473b
--- /dev/null
+++ b/files/de/learn/css/first_steps/index.html
@@ -0,0 +1,54 @@
+---
+title: Erste Schritte mit CSS
+slug: Learn/CSS/First_steps
+translation_of: Learn/CSS/First_steps
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary"><font>CSS (Cascading Style Sheets) wird zum Stylen und Layouten von Webseiten verwendet. Sie können beispielsweise die Schriftart, Farbe, Größe und den Abstand von Seiteninhalten ändern, Inhalt in mehrere Spalten aufteilen oder Animationen und andere dekorative Funktionen hinzufügen. Dieses Modul bietet einen sanften Einstieg in CSS, beginnend mit einem Überblick über Funktionsweise, Syntax und wie Sie mit CSS Darstellungsstile zu </font>HTML-Seiten <font>hinzufügen können.</font></p>
+
+<div class="in-page-callout webdev">
+<h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3>
+
+<p>We have put together a course that includes all the essential information you need to work towards your goal.</p>
+
+<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p>
+</div>
+
+<h2 id="Voraussetzungen">Voraussetzungen</h2>
+
+<p>Bevor Sie mit diesem Lernmodul beginnen, sollten Sie:</p>
+
+<ol>
+ <li>grundsätzlich mit Computern umgehen und das Internet passiv nutzen (d.h. im Internet surfen und Inhalte konsumieren) können.</li>
+ <li>sich bereits eine einfache Arbeitsumgebung eingerichtet haben (wie in <a href="https://developer.mozilla.org/de/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Notwendige Software installieren</a> beschrieben) und wissen, wie Sie Dateien erstellen und ordnen (wie in <a href="https://developer.mozilla.org/de/docs/Learn/Getting_started_with_the_web/dateien_nutzen">Dateien nutzen</a> erklärt).</li>
+ <li>über grundlegende HTML-Kenntnisse (entsprechend dem Lernmodul <a href="https://developer.mozilla.org/de/docs/Learn/HTML/Einf%C3%BChrung_in_HTML">Einführung in HTML</a>) verfügen.</li>
+</ol>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Wenn Sie an einem Computer/Tablet/Gerät arbeiten, auf dem Sie nicht die Möglichkeit haben, eigene Dateien zu erstellen, können Sie die meisten Code-Beispiele in einem Online-Editor wie <a href="http://jsbin.com/" rel="noopener">JSBin</a> oder <a href="https://thimble.mozilla.org/" rel="noopener">Thimble </a>ausprobieren.</p>
+</div>
+
+<h2 id="Lerneinheiten">Lerneinheiten</h2>
+
+<p>Die Lerneinheiten dieses Moduls werden Ihnen alle grundlegenden Konzepte von CSS vermitteln. Dazu erhalten Sie auch immer wieder Gelegenheit, Ihr neu erworbenes Wissen gleich auszuprobieren.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">Was ist CSS?</a></dt>
+ <dd>Mit <strong>{{Glossary("CSS")}}</strong> (Cascading Style Sheets) können Sie toll aussehende Webseiten erstellen. Diese Lerneinheit gibt einen Vorgeschmack darauf anhand eines einfachen Code-Beispiels und erklärt einige Schlüsselelemente der Sprache.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">CSS kennenlernen</a></dt>
+ <dd>In dieser Lerneinheit wenden Sie CSS auf ein einfaches HTML-Dokument an und lernen dabei einige nützliche Dinge über die Sprache.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">Wie CSS aufgebaut ist</a></dt>
+ <dd>Nachdem Sie jetzt eine Vorstellung davon haben, was CSS ist und wie es benutzt wird, befassen wir uns etwas genauer mit dem Aufbau der Sprache. Diese Lerneinheit eignet sich auch gut zum Nachlesen, wenn Sie in späteren Abschnitten auf Verständnisschwierigkeiten stoßen.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">Wie CSS funktioniert</a></dt>
+ <dd>Bis jetzt haben wir uns damit beschäftigt, wie sich CSS nutzen lässt, um einfache <em>stylesheets</em> zu schreiben. In dieser Lerneinheit schauen wir uns, wie ein Browser CSS and HTML verarbeitet und in eine Webseite verwandelt.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Nutzen Sie Ihr neues Wissen</a></dt>
+ <dd>Die Kenntnisse, die Sie sich in den vorherigen Lerneinheiten angeeignet haben, sollten es Ihnen erlauben, einfache Textseiten mit Hilfe von CSS zu formatieren. Hier erhalten Sie genau dazu Gelegenheit!</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<dl>
+ <dt><a href="https://teach.mozilla.org/activities/intermediate-web-lit/">Intermediate Web Literacy 1: Intro to CSS</a></dt>
+ <dd>An excellent Mozilla foundation course that explores and tests a lot of the skills talked about in the <em>Introduction to CSS</em> module. Learn about styling HTML elements on a webpage, CSS selectors, attributes, and values.</dd>
+</dl>
diff --git a/files/de/learn/css/index.html b/files/de/learn/css/index.html
new file mode 100644
index 0000000000..973569c85e
--- /dev/null
+++ b/files/de/learn/css/index.html
@@ -0,0 +1,59 @@
+---
+title: CSS
+slug: Learn/CSS
+tags:
+  - Anfänger
+  - CSS
+  - Debuggen
+  - Einsteiger
+translation_of: Learn/CSS
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Cascading Stylesheets — oder {{glossary("CSS")}} — ist die zweite Technologie, die Sie nach {{glossary("HTML")}} lernen sollten. Während HTML genutzt wird, um die Struktur und Semantik Ihrer Inhalte zu definieren, dient CSS dazu, deren Erscheinung und Layout zu beeinflussen. So lässt sich CSS beispielsweise nutzen, um die Schriftarten, Farben, Größen und räumliche Abstände Ihrer Inhalte zu verändern, Inhalte in mehreren Spalten anzuordnen oder Animationen und andere dekorative Merkmale hinzuzufügen.</p>
+
+<h2 id="Lernprozess">Lernprozess</h2>
+
+<p>Sie sollten sich unbedingt mit den Grundlagen von HTML auseinandersetzen, bevor Sie sich an CSS versuchen. Wir empfehlen Ihnen, zunächst unser "<a href="/de-DE/docs/Learn/HTML/Introduction_to_HTML">Einführung in HTML</a>"-Modul durchzuarbeiten — anschließend können Sie folgende Themen angehen:</p>
+
+<ul>
+ <li>CSS, beginnend mit diesem Modul "Einführung in CSS"</li>
+ <li>Fortgeschrittene <a href="/de-DE/Learn/HTML#Modules">HTML Module</a></li>
+ <li><a href="/de-DE/docs/Learn/JavaScript">JavaScript</a>, und wie man es einsetzt, um Webseiten dynamische Funktionalität hinzuzufügen</li>
+</ul>
+
+<p>Wir empfehlen, HTML und CSS gleichzeitig zu lernen und immer wieder zwischen beiden Themen hin- und her zu springen. Denn HTML ist sehr viel interessanter mit CSS, und CSS lässt sich schwerlich ohne HMTL erlernen.</p>
+
+<p>Bevor Sie in dieses Thema starten, sollten Sie zumindest ein grundlegendes Verständnis im Umgang mit Computern sowie dem passiven Gebrauch des Internets (also einfach nur Surfen und Inhalte konsumieren) haben. Sie sollten eine einfache Arbeitsumgebung eingerichtet haben, wie im Artikel "<a href="/de-DE/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Nötige Software installieren</a>" ausführlich beschrieben, und wissen, wie Sie Dateien erzeugen und verwalten, wie im Artikel "<a href="/de-DE/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dateien nutzen</a>" beschrieben — beides Teil unseres Anfängerkurses "<a href="/de-DE/docs/Learn/Getting_started_with_the_web">Das Web für Einsteiger</a>".</p>
+
+<p>Es ist empfehlenswert, im Vorfeld den Artikel "<a href="/de-DE/docs/Learn/Getting_started_with_the_web">Das Web für Einsteiger</a>" durchzuarbeiten, bevor Sie sich an diesem Thema versuchen, aber es ist keinesfalls zwingend erforderlich; das Meiste, was im CSS Grundlagenartikel angerissen wird, wird auch in unserem Modul "Einführung in CSS"  behandelt, allerdings weit ausführlicher.</p>
+
+<h2 id="Module">Module</h2>
+
+<p>Dieses Thema unterteilt sich in die folgenden Module, die Sie in der vorgeschlagenen Reihenfolge abarbeiten sollten. Sie sollten definitiv mit dem Ersten beginnen.</p>
+
+<dl>
+ <dt><a href="/de-DE/docs/Learn/CSS/Introduction_to_CSS">Einführung in CSS</a></dt>
+ <dd>Dieses Modul vermittelt Ihnen, wie CSS grundlegend funktioniert, inklusive Selektoren und Eigenschaften, CSS-Schreibregeln, Anwendung von CSS auf HTML, wie man Maße, Farben und andere Einheiten in CSS spezifiziert, Kaskadierung und Vererbung, Box-Modell Grundlagen, und das Debuggen von CSS.</dd>
+ <dt><a href="/de-DE/docs/Learn/CSS/Styling_text">Textgestaltung</a></dt>
+ <dd>Hier lernen wir Grundlagen der Textgestaltung, wie das Setzen der Schriftart, Fett- und Kursivdruck, Zeilen- und Buchstabenabstand, und Schattierung sowie andere Textmerkmale. Abgerundet wird dieses Modul mit der Anwendung von eigenen Schriftarten auf Ihre Webseite und die Gestaltung von Listen und Links.</dd>
+ <dt><a href="/De-US/docs/Learn/CSS/Styling_boxes">Boxgestaltung</a></dt>
+ <dd>Als Nächstes befassen wir uns mit der Gestaltung von Boxen, einem der grundlegenden Schritte in Richtung Webseitenlayout. In diesem Modul rekapitulieren wir das Box-Modell, anschließend schauen wir uns an, wie man das Layout einer Box kontrolliert, indem man Polsterung, Rahmen und Randabstände festlegt, Hintergrundfarben, -bilder und andere Eigenschaften einsetzt, und ausgefallene Dinge wie Schattenwurf und Filter einstellt.</dd>
+ <dt><a href="/de-DE/docs/Learn/CSS/CSS_layout">CSS-Layout</a></dt>
+ <dd>Jetzt haben wir uns die Grundlagen von CSS angeeignet: Wir wissen wie man Texte formatiert und wie man Boxen gestaltet und manipuliert, die Ihre Inhalte umfassen. Nun wird es Zeit sich anzusehen, wie Sie Ihre Boxen an die richtige Stelle und in richtiger Relation zum Darstellungsfeld setzen, und umgekehrt. Wir haben alle nötigen Voraussetzungen, um tief in's Thema CSS-Layout einzutauchen, uns verschiedene Bildschirm-Einstellungen anzusehen, traditionelle Methoden wie Schweben und Positionierung, und neumodische Layoutwerkzeuge wie Flexboxen.</dd>
+ <dt>Responsives Design (ausstehend)</dt>
+ <dd>Mit einer Vielzahl verschiedener Endgeräte kann man heutzutage im Netz surfen, infolge dessen ist <a href="/de-DE/docs/Web/Guide/Responsive_design">Responsives Webdesign</a> (RWD) zu einer Kerndisziplin des Webdesigns geworden. Dieses Modul wird die grundlegenden Prinzipien und Werkzeuge des RWD behandeln, das Anwenden verschiedener CSS auf ein Dokument in Abhängigkeit von Geräteeigenschaften wie Bildschirmgröße, -format und -auflösung erklären, und die verfügbaren Technologien zum Darstellen von Videos und Bildern in Abhängigkeit von jenen Eigenschaften ausloten.</dd>
+</dl>
+
+<h2 id="Lösen_typischer_CSS-Probleme">Lösen typischer CSS-Probleme</h2>
+
+<p><a href="/de-DE/docs/Learn/CSS/Howto">CSS nutzen, um typische Probleme zu lösen</a> verweist auf Artikelabschnitte, die erklären, wie man mit CSS die häufigsten Problems beim Erstellen einer Webseite behebt.</p>
+
+<p>Von Anfang an werden sie meist HTML-Elemente und deren Hintergründe einfärben, Größe, Form und Position von Elementen ändern sowie Rahmen definieren und hinzufügen. Aber es gibt nicht viel, was Sie nicht tun können, sobald Sie auch nur ein solides Verständnis der Grundlagen von CSS haben. Das Beste am CSS-Lernprozesses ist, dass man nur mit Grundlagenwissen bereits ein gutes Gefühl dafür entwickelt, was möglich und was nicht möglich ist, selbst wenn Sie noch nicht wirklich wissen, wie diese mögliche Lösung aussieht.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<dl>
+ <dt><a href="/de-DE/docs/Web/CSS">CSS auf MDN</a></dt>
+ <dd>Die Hauptübersicht für die CSS-Dokumentation auf MDN, wo Sie ausführliche Referenzdokumente für alle Merkmale der CSS-Sprache finden. Möchten Sie nachschlagen, welche verschieden Werte eine Eigenschaft annehmen kann? Dann ist dies der richtige Ort zum stöbern.</dd>
+</dl>
diff --git a/files/de/learn/css/styling_text/index.html b/files/de/learn/css/styling_text/index.html
new file mode 100644
index 0000000000..0e5279bda2
--- /dev/null
+++ b/files/de/learn/css/styling_text/index.html
@@ -0,0 +1,65 @@
+---
+title: Styling text
+slug: Learn/CSS/Styling_text
+tags:
+  - Beginner
+  - CSS
+  - CodingScripting
+  - Fonts
+  - Landing
+  - Links
+  - Module
+  - NeedsTranslation
+  - Text
+  - TopicStub
+  - font
+  - letter
+  - line
+  - lists
+  - shadow
+  - web fonts
+translation_of: Learn/CSS/Styling_text
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">With the basics of the CSS language covered, the next CSS topic for you to concentrate on is styling text — one of the most common things you'll do with CSS. Here we look at text styling fundamentals including setting font, boldness, italics, line and letter spacing, drop shadows, and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links.</p>
+
+<div class="in-page-callout webdev">
+<h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3>
+
+<p>We have put together a course that includes all the essential information you need to work towards your goal.</p>
+
+<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p>
+</div>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>Before starting this module, you should already have basic familiarity with HTML, as discussed in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module, and be comfortable with CSS fundamentals, as discussed in <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="https://jsbin.com/">JSBin</a>,<a href="https://codepen.io/"> CodePen</a> or <a href="https://glitch.com/">Glitch</a>.</p>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<p>This module contains the following articles, which will teach you all of the essentials behind styling HTML text content.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Fundamental text and font styling</a></dt>
+ <dd>In this article we go through all the basics of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignment and other effects, and line and letter spacing.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Styling lists</a></dt>
+ <dd>Lists behave like any other text for the most part, but there are some CSS properties specific to lists that you need to know about, and some best practices to consider. This article explains all.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Styling links</a></dt>
+ <dd>When styling links, it is important to understand how to make use of pseudo-classes to style link states effectively, and how to style links for use in common varied interface features such as navigation menus and tabs. We'll look at all these topics in this article.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Web fonts</a></dt>
+ <dd>Here we will explore web fonts in detail — these allow you to download custom fonts along with your web page, to allow for more varied, custom text styling.</dd>
+</dl>
+
+<h2 id="Assessments">Assessments</h2>
+
+<p>The following assessments will test your understanding of the text styling techniques covered in the guides above.</p>
+
+<dl>
+ <dt><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Typesetting a community school homepage</a></dt>
+ <dd>In this assessment we'll test your understanding of styling text by getting you to style the text for a community school's homepage.</dd>
+</dl>
diff --git a/files/de/learn/getting_started_with_the_web/css_basics/index.html b/files/de/learn/getting_started_with_the_web/css_basics/index.html
new file mode 100644
index 0000000000..42d968d9b2
--- /dev/null
+++ b/files/de/learn/getting_started_with_the_web/css_basics/index.html
@@ -0,0 +1,282 @@
+---
+title: CSS-Grundlagen
+slug: Learn/Getting_started_with_the_web/CSS_basics
+tags:
+  - Anfänger
+  - CSS
+  - Coding
+  - Design
+  - Lernen
+  - Stylesheets
+  - Web
+translation_of: Learn/Getting_started_with_the_web/CSS_basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>CSS (engl.: Cascading Style Sheets = gestufte Gestaltungsbögen) ist die Sprache, die Sie benutzen, um Ihre Webseite zu gestalten. <em>CSS Grundlagen</em> führt Sie durch die Grundlagen dieser Stylesheet-Sprache. Wir beantworten damit solche Fragen wie: »Wie kann ich die Farbe meines Textes ändern? Wie kann ich diesen Inhalt genau an einer bestimmten Stelle anzeigen lassen? Wie kann ich meine Webseite mit Hintergrundbildern und -farben versehen?«</p>
+</div>
+
+<h2 id="Was_ist_CSS_jetzt_wirklich">Was ist CSS jetzt wirklich?</h2>
+
+<p>Wie HTML ist CSS nicht wirklich eine Programmiersprache. Es ist auch keine Markup-Sprache, sondern eine Stylesheet-Sprache, die es erlaubt für Elemente auf der Seite das Aussehen festzulegen. Zum Beispiel benötigt man folgengen CSS-Code, um alle Absätze (<code>&lt;p&gt;</code>) auszuwählen und deren Inhalt rot einzufärben:</p>
+
+<pre class="brush: css">p {
+  color: red;
+}</pre>
+
+<p>Probieren Sie es aus: Kopieren Sie diese drei Zeilen CSS in eine neue Datei in einen Texteditor und speichern Sie die Datei unter dem Namen <code>style.css</code> im Verzeichnis <code>styles</code>.</p>
+
+<p>Aber wir müssen das CSS noch im HTML-Dokument verknüpfen, sonst würde die CSS-Datei von dem Browser nicht berücksichtigt. (Wenn Sie unserem Projekt nicht von Anfang an gefolgt sind, lesen Sie erst <a href="https://developer.mozilla.org/de/Learn/Getting_started_with_the_web/dateien_nutzen">Dateien nutzen</a> und <a href="https://developer.mozilla.org/de/Learn/Getting_started_with_the_web/HTML_basics">HTML-Grundlagen</a>, um zu erfahren, was Sie davor tun müssen.)</p>
+
+<ol>
+ <li>Öffnen Sie die Datei <code>index.html</code> und fügen die folgende Zeile irgendwo in den Kopf (zwischen die <code>&lt;head&gt;</code>- und <code>&lt;/head&gt;</code>-Tags) ein:
+
+  <pre class="brush: html">&lt;link href="styles/style.css" rel="stylesheet" type="text/css"&gt;</pre>
+ </li>
+ <li>Speichern Sie die Datei <code>index.html</code> und öffnen Sie diese in einem Browser. Es sollte wie in diesem Beispiel aussehen:</li>
+</ol>
+
+<p><img alt="Das Mozilla-Logo und ein paar Absätze. Der Text in den Absätzen ist rot gefärbt durch CSS." src="https://mdn.mozillademos.org/files/15471/beginner-css1-de.jpg" style="border: 1px solid grey; display: block; height: 832px; margin: 0px auto; width: 711px;">Wenn der Absatz jetzt rot ist: Herzlichen Glückwunsch! Sie haben nun zum ersten Mal Ihre eigene CSS-Datei geschrieben und eingebunden!</p>
+
+<h3 id="Aufbau_einer_CSS-Regel">Aufbau einer CSS-Regel</h3>
+
+<p>Lassen Sie uns nun das CSS von oben etwas genauer anschauen:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15467/css-example.png" style="display: block; height: 480px; margin: 0px auto; width: 850px;"></p>
+
+<p>Die ganze Struktur wird <strong>Regelsatz</strong> (oder oft nur »Regel«) genannt.</p>
+
+<p>Jetzt zu den Namen der einzelnen Teile:</p>
+
+<dl>
+ <dt>Selektor</dt>
+ <dd>Der HTML-Elementname steht direkt am Anfang der Regel. Er wählt die Elemente, die gestaltet werden sollen (in diesem Beispiel <code>p</code>) aus. Um ein anderes Element zu gestalten, muss man nur den Selektor ändern.</dd>
+ <dt>Deklaration</dt>
+ <dd>Eine einzelne Regel wie <code>color: red;</code> gibt an, welche <strong>Eigenschaft</strong> des Elements gestaltet werden soll.</dd>
+ <dt>Eigenschaft (englisch: property)</dt>
+ <dd>Art, auf die das ausgewählte HTML-Element gestaltet werden soll. (In diesem Fall ist <code>color</code> eine Eigenschaft des {{htmlelement("p")}} Elements.) In CSS wählen Sie aus, welche Eigenschaften Sie in der Regel setzen wollen.</dd>
+ <dt>Eigenschafts-Wert (englisch: property value)</dt>
+ <dd>Rechts neben der Eigenschaft, nach dem Doppelpunk, steht der <strong>Wert</strong> der Eigenschaft. Dieser gibt eine von vielen Möglichkeiten wieder, wie die Eigenschaft das Aussehen eines Elements verändern kann. (Es gibt viele andere Werte für <code>color</code> außer <code>red</code>).</dd>
+</dl>
+
+<p>Beachten Sie die anderen wichtigen Teile der Syntax! Die Syntax ist sozusagen die Grammatik des Codes:</p>
+
+<ul>
+ <li>Hinter dem Selektor stehen die zugehörigen Regelsätze innerhalb geschwungener Klammern (<code>{}</code>).</li>
+ <li>Innerhalb einer Deklaration muss man einen Doppelpunkt (<code>:</code>) nutzen, um Eigenschaft und Wert zu trennen.</li>
+ <li>Am Ende jeder Deklaration muss ein Semikolon (<code>;</code>) gesetzt werden.</li>
+</ul>
+
+<p>Um mehrere Eigenschaften eines HTML-Elements auf einmal zu verändern, trennt man die Deklarationen innerhalb eines Regelsatzes mit Semikolons, wie folgt:</p>
+
+<pre class="brush: css">p {
+  color: red;
+  width: 500px;
+  border: 1px solid black;
+}</pre>
+
+<h3 id="Mehrere_Elemente_auswählen">Mehrere Elemente auswählen</h3>
+
+<p>Sie können auch mehrere Elemente auswählen, um einen einzigen Regelsatz auf diese alle anzuwenden. Schreiben Sie einfach mehrere Selektoren hintereinander, getrennt durch Kommas. So zum Beispiel:</p>
+
+<pre class="brush: css">p,li,h1 {
+  color: red;
+}</pre>
+
+<h3 id="Verschiedene_Arten_von_Selektoren">Verschiedene Arten von Selektoren</h3>
+
+<p>Es gibt viele verschiedene Arten von Selektoren. Bisher haben wir nur <strong>Element-Selektoren</strong> genutzt, welche alle Elemente eines bestimmten Typs innerhalb eines HTML-Dokumentes auswählen. Aber wir können auch eine spezifischere Auswahl nutzen. Hier sind einige weitere Arten von Selektoren, welche häufig genutzt werden:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Selector name</th>
+   <th scope="col">Was wird ausgewählt?</th>
+   <th scope="col">Beispiel</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Element- Selektor (auch Tag- oder Typ-Selektor genannt)</td>
+   <td>Alle HTML-Elemente eines bestimmten Typs.</td>
+   <td>
+    <p><code>p</code><br>
+     Wählt alle <code>&lt;p&gt;-Elemente aus.</code></p>
+   </td>
+  </tr>
+  <tr>
+   <td>ID-Selektor</td>
+   <td>Element mit der entsprechenden ID wird ausgewählt. (Eine ID kann immer nur einem einzigen Element innerhalb eines Dokuments zugeordnet werden)</td>
+   <td>
+    <p><code>#my-id</code><br>
+     Wählt <code>&lt;p id="my-id"&gt;</code> oder <code>&lt;a id="my-id"&gt; aus.</code></p>
+   </td>
+  </tr>
+  <tr>
+   <td>Klassen-Selektor</td>
+   <td>Element(e) mit der entprechenden Klasse werden ausgewählt. (Klassen können mehreren Elementen innerhalb eines Dokuments zugeordnet werden)</td>
+   <td><code>.my-class</code><br>
+    Wählt <code>&lt;p class="my-class"&gt;</code> und <code>&lt;a class="my-class"&gt; aus.</code></td>
+  </tr>
+  <tr>
+   <td>Attribut-Selektor</td>
+   <td>Element(e) mit entsprechendem Attribut werden ausgewählt.</td>
+   <td><code>img[src]</code><br>
+    Wählt <code>&lt;img src="myimage.png"&gt;</code> , aber nicht <code>&lt;img&gt; aus.</code></td>
+  </tr>
+  <tr>
+   <td>Pseudoklassen-Selektoren</td>
+   <td>Element(e) eines bestimmten Typs, welche sich in einem bestimmten Zustand befinden (z.B.: Mauszeiger ist über dem Element)</td>
+   <td><code>a:hover</code><br>
+    Wählt <code>&lt;a&gt; </code>nur  dann aus, wenn der Mauszeiger darüber bewegt wird.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Es gibt viele weitere Selektoren. Sie können alle in folgender Liste finden: <a href="/de/docs/Web/Guide/CSS/Getting_started/Selectors">Selektoren</a>.</p>
+
+<h2 id="Schriftart_und_Text">Schriftart und Text</h2>
+
+<p>Jetzt, da wir uns einige CSS-Grundlagen angeschaut haben, lassen Sie uns damit anfangen, mehr Regelsätze und Eigenschaften zu unserer <code>style.css</code>-Datei hinzuzufügen. Zuerst ändern wir die Schrift, damit unser Text besser aussieht<code>.</code></p>
+
+<ol>
+ <li> In einem vorherigen Artikel haben Sie schon eine Schriftart von <a href="https://developer.mozilla.org/de/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like#Schriftart">Google Fonts</a> ausgewählt, den zugehörigen Code sollten Sie schon irgendwo gespeichert haben. Fügen Sie das <code>&lt;link ... &gt;</code> Element in den Kopf Ihrer index.html Datei ein (zwischen den <code>&lt;head&gt;</code> und <code>&lt;/head&gt;</code> Tags). Das <code>&lt;link&gt;</code> Element sollte wie folgt aussehen:
+
+  <pre class="brush: html">&lt;link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'&gt;</pre>
+ </li>
+ <li>Löschen Sie die existierende Regel in Ihrer <code>style.css</code>-Datei. Es war ein guter Test, aber roter Text sieht doch nicht so schön aus.</li>
+ <li>Fügen Sie stattdessen die folgenden Zeilen in die CSS-Datei ein. Ersetzen Sie 'Platzhalter' mit der Schriftart, welche Sie auf Google Fonts ausgewählt haben (<code>font-family</code> bedeutet soviel wie "Schriftfamilie" und deutet auf die Schriftarten, welche Sie benutzen möchten). Diese Regel setzt eine globale Schriftart (<code>font-family</code>) und Schriftgröße(<code>font-size</code>) für die ganze Webseite, da im <code>&lt;html&gt;</code>-Element alle anderen Elemente enthalten sind. Die Eigenschaften <code>font-family</code> und <code>font-size</code> werden an die Elemente innerhalb eines Elements weiter vererbt:
+  <pre class="brush: css">html {
+  font-size: 10px; /* px bedeutet 'pixels': die Schriftgröße wird auf 10 Pixel gesetzt  */
+  font-family: Platzhalter; /* hier kommt der Name der ausgewählten Schriftfamilie hin */
+}</pre>
+
+  <div class="note">
+  <p><strong>Hinweis:</strong> In einem Kommentar wurde hinzugefügt, was "px" bedeutet. Alles in einem CSS-Dokument, was zwischen <code>/*</code> und <code>*/</code> steht, ist ein <strong>CSS-Kommentar</strong>, welchen der Browser ignoriert. Kommentare sind für Sie selbst gedacht, hier können Sie für sich hilfreiche Notizen machen.</p>
+  </div>
+ </li>
+ <li>Nun setzen wir die Schriftgröße für die textbeinhaltenden HTML-Elemente {{htmlelement("h1")}}, {{htmlelement("li")}} und {{htmlelement("p")}} fest. Wir zentrieren auch den Text von unseren Überschriften mit <code>text-align: center;</code> und ändern die Linienhöhe (<code>line-height</code>) und den Buchstabenabstand (<code>letter-spacing</code>), um den Text der <code>p</code> und <code>li</code> Elemente etwas lesbarer zu machen:
+  <pre class="brush: css">h1 {
+  font-size: 60px;
+  text-align: center;
+}
+
+p, li {
+  font-size: 16px;
+  line-height: 2;
+  letter-spacing: 1px;
+}</pre>
+ </li>
+</ol>
+
+<p>Sie können die Schriftgröße über den Wert vor 'px' ändern, wie Sie möchten. Ihre Webseite sollte jetzt ungefähr so aussehen:</p>
+
+<p><img alt="Mozilla Logo und ein paar Absätze. Eine sans-serif Schrift wurde gesetzt, die Schriftgröße, Linienhöhe und Buchstabenabstand wurden angepasst und die Hauptüberschrift zentriert." src="https://mdn.mozillademos.org/files/15473/beginner-css2-de.jpg" style="border: 1px solid grey; display: block; margin: 0px auto; width: 711px;"></p>
+
+<h2 id="Boxen_überall_Boxen_-_das_CSS_Box-Modell">Boxen, überall Boxen - das CSS Box-Modell</h2>
+
+<p>Eine Sache, welche Sie bemerken werden, wenn Sie CSS-Code schreiben, ist, dass es sich oft um das Gestalten von Boxen dreht - Sie werden die Größe, die Farbe, die Position, usw. von Boxen bestimmen. Die meisten HTML-Elemente auf Ihrer Seite können als Boxen oder Schachteln betrachtet werden, welche übereinander sitzen.</p>
+
+<p><img alt="a big stack of boxes or crates sat on top of one another" src="https://mdn.mozillademos.org/files/9441/boxes.jpg" style="display: block; height: 463px; margin: 0px auto; width: 640px;"></p>
+
+<p>Es ist daher nicht überraschend, dass das CSS-Layout auf dem Box-Modell basiert. Jede Box, die einen Raum auf Ihrer Webseite einnimmt, hat folgende Eigenschaften:</p>
+
+<ul>
+ <li><code>padding</code>, der Innenabstand: das ist der Raum direkt um den Inhalt des Elements (z.B. direkt um einen Absatz &lt;p&gt; drumherum)</li>
+ <li><code>border</code>, der Rahmen: eine Linie, welche direkt außerhalb des <code>padding</code> sitzt</li>
+ <li><code>margin</code>, der Außenabstand: der Raum außerhalb des Rahmens</li>
+</ul>
+
+<p><img alt="three boxes sat inside one another. From outside to in they are labelled margin, border and padding" src="https://mdn.mozillademos.org/files/9443/box-model.png" style="display: block; height: 450px; margin: 0px auto; width: 574px;"></p>
+
+<p>Wir werden hier auch die folgenden Eigenschaften benutzen:</p>
+
+<ul>
+ <li><code>width</code>, die Breite eines Elements</li>
+ <li><code>background-color</code>, die Farbe hinter dem Inhalt und <code>padding</code> des Elements</li>
+ <li><code>color</code>, die Farbe des Inhaltes des Elements (meistens Text)</li>
+ <li><code>text-shadow</code>, gibt dem Text innerhalb des Elements einen Schatten</li>
+ <li><code>display</code>, Ändert die Darstellungsweise der Box (diese Eigenschaft werden wir uns später noch genauer anschauen)</li>
+</ul>
+
+<p>Lassen Sie uns nun unserem Beispiel etwas mehr CSS-Code hinzufügen! Fügen Sie die folgenden neuen Regeln am Ende Ihrer CSS-Datei ein. Haben Sie keine Angst mit den Werten zu experimentieren.</p>
+
+<h3 id="Ändern_der_Hintergrundfarbe_für_die_ganzen_Seite">Ändern der Hintergrundfarbe für die ganzen Seite</h3>
+
+<pre class="brush: css">html {
+  background-color: #00539F;
+}</pre>
+
+<p>Dieser Regelsatz ändert die Hintergrundfarbe auf der ganzen Seite. Ändern Sie die Hintergrundfarbe in die, welche Sie sich ausgesucht haben,<a href="/de/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like#Hauptfarbe"> als Sie Ihre Webseite geplant haben.</a></p>
+
+<h3 id="Dem_body_Form_geben">Dem body Form geben</h3>
+
+<pre class="brush: css">body {
+  width: 600px;
+  margin: 0 auto;
+  background-color: #FF9500;
+  padding: 0 20px 20px 20px;
+  border: 5px solid black;
+}</pre>
+
+<p>Jetzt widmen wir uns dem &lt;body&gt;-Element. Hier habe wir einige neue Deklarationen, lassen Sie uns diese genauer anschauen:</p>
+
+<ul>
+ <li><code>width: 600px;</code> — die Breite (engl.: width) des <code>&lt;body&gt;</code>-Elements wird auf 600 Pixel festgelegt.</li>
+ <li><code>margin: 0 auto;</code> — Wenn man bei den Eigenschaften <code>margin</code> oder <code>padding</code> zwei Werte setzt, dann steht der erste Wert für den Abstand nach oben <strong>und</strong> nach unten (welcher in diesem Fall <code>0</code> ist) und der zweite Wert steht für den Abstand links <strong>und</strong> rechts von dem Element (in diesem Fall setzen wir den Wert auf <code>auto</code>, wodurch der vorhandene Platz auf beiden Seiten des Elements gleichmäßig aufgeteilt wird). <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin#Values">Man kann auch nur einen, drei oder vier verschiedene Werte benutzen, wie dies das Element beeinflusst können Sie in der Dokumentation nachlesen.</a></li>
+ <li><code>background-color: #FF9500;</code> — dies setzt die Hintergrundfarbe des &lt;body&gt;-Elements. Hier wurde eine rötliche Farbe ausgewählt, aber Sie können gerne eine andere Farbe nehmen<code>.</code></li>
+ <li><code>padding: 0 20px 20px 20px;</code> — für den Innenabstand haben wir vier Werte gesetzt, um etwas Raum um unseren Inhalt zu schaffen. Oben setzen wir keinen Abstand, aber auf der linken und rechten Seite, sowie unten setzen wir jeweils 20 Pixel. Die Werte werden in folgender Reihenfolge gesetzt: oben, rechts, unten, links.</li>
+ <li><code>border: 5px solid black;</code> — dies setzt einen 5 Pixel starken, soliden, schwarzen Rahmen um unser Element.   </li>
+</ul>
+
+<h3 id="Positionierung_und_Design_der_Hauptüberschrift">Positionierung und Design der Hauptüberschrift</h3>
+
+<pre class="brush: css">h1 {
+  margin: 0;
+  padding: 20px 0;
+  color: #00539F;
+  text-shadow: 3px 3px 1px black;
+}</pre>
+
+<p>Lassen Sie uns das {{htmlelement("h1")}}-Element stylen. Wenn Sie Ihre Webseite im Browser anschauen, werden Sie feststellen, das ein komischer Abstand oberhalb des <code>&lt;body&gt;</code>-Elements ist. Dies passiert, da <strong>Browser einige Eigenschaften automatisch stylen</strong>, auch wenn Sie selbst überhaupt kein CSS dafür geschrieben haben! Das klingt nach einem schlechten Verhalten seitens des Browsers, aber auch Webseiten, die gar keine Stylesheets haben, sollen lesbar bleiben. Um den automatischen Abstand beim <code>&lt;h1&gt;</code>-Element los zu werden haben wir das automatische Styling des Browsers überschrieben mit <code>margin: 0;</code> .</p>
+
+<p>Als nächstes haben wir den oberen und unteren inneren Abstand der Überschrift auf 20 Pixel gesetzt (<code>padding: 20px 0;</code>) und dem Text dieselbe Farbe gegeben wie dem Hintergrund des <code>&lt;html&gt;</code>-Elements.</p>
+
+<p>Eine interessante Eigenschaft ist <code>text-shadow</code>. Diese fügt dem Textinhalt eines Elements einen Schatten hinzu. Die vier Werte bedeuten:</p>
+
+<ul>
+ <li>Der erste Wert in Pixeln setzt den <strong>horizontalen Versatz</strong> des Schattens vom Text weg nach rechts - so weit fällt der Schatten: ein negativer Wert würde den Schatten nach links fallen lassen.</li>
+ <li>Der zweite Wert setzt den <strong>vertikalen Versatz</strong> des Schattens in Pixeln. Der Schatten fällt so weit nach unten, ein negativer Wert würde den Schatten nach oben fallen lassen.</li>
+ <li>Der dritte Wert setzt den Radius in Pixeln für den Bereich, in dem der Schatten verwischt ist. Ein größerer Wert hier bedeutet einen leichteren Schatteneffekt.</li>
+ <li>Der vierte Wert setzt die <strong>Grundfarbe</strong> des Schattens.</li>
+</ul>
+
+<p>Auch hier können Sie mit den verschiedenen Werten experimentieren, um zu sehen was dabei heraus kommt.</p>
+
+<h3 id="Das_Bild_zentrieren">Das Bild zentrieren</h3>
+
+<pre class="brush: css">img {
+  display: block;
+  margin: 0 auto;
+}</pre>
+
+<p>Zuletzt werden wir das Bild auf unserer Seite zentrieren. Wir können das wieder mit <code>margin: 0 auto;</code> erreichen, allerdings müssen wir noch etwas anderes tun, damit dies funktioniert. Das <code>&lt;body&gt;</code>-Element ist ein Block bzw. eine Box, weswegen es ein <code>margin</code> und <code>padding</code> hat. Das <code>&lt;img&gt;</code>-Element ist ein <strong>Inline-Element</strong>, es wird nicht als Box angezeigt und hat kein <code>margin</code> oder <code>padding</code>. Um das Bild in ein <strong>Block-Element</strong> umzuwandeln, geben wir ihm einfach die folgende Deklaration: <code>display: block;</code>.</p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Wenn Sie <code>diplay: block;</code> jetzt noch nicht ganz verstehen, ist das nicht schlimm. Wenn Sie CSS mehr studieren, dann werden Sie auch den Unterschied zwischen Inline-Elementen und Block-Elementen verstehen. Mehr zu den Möglichen <code>display</code> Werten können Sie in unserer <a href="/de/docs/Web/CSS/display">Display Referenz</a> lesen.</p>
+</div>
+
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+
+<p>Wenn Sie allen Anweisungen in diesem Artikel gefolgt sind, dann sollten Sie jetzt eine Webseite aussehen, die so aussieht (hier können Sie sich <a href="http://mdn.github.io/beginner-html-site-styled/">unsere Version</a> ansehen) :</p>
+
+<p><img alt="a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip." src="https://mdn.mozillademos.org/files/15475/beginner-css3-de.jpg" style="border: 1px solid grey; display: block; margin: 0px auto; width: 711px;"></p>
+
+<p>Falls Ihr Resultat nicht so aussieht, dann gehen Sie den Artikel noch einmal durch und versuchen Sie mögliche Fehler in Ihrem Code zu finden. Wenn Sie wirklich nicht weiter wissen, dann können Sie sich <a href="https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css">unseren Code auf Github</a> ansehen.</p>
+
+<p>Wir haben hier wirklich nur die Grundlagen von CSS gesehen. Um mehr CSS zu lernen gehen Sie zu unserem <a href="https://developer.mozilla.org/de/Learn/CSS">CSS Lernbereich</a>.</p>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</div>
diff --git a/files/de/learn/getting_started_with_the_web/dateien_nutzen/index.html b/files/de/learn/getting_started_with_the_web/dateien_nutzen/index.html
new file mode 100644
index 0000000000..2eaa20a9ea
--- /dev/null
+++ b/files/de/learn/getting_started_with_the_web/dateien_nutzen/index.html
@@ -0,0 +1,106 @@
+---
+title: Dateien nutzen
+slug: Learn/Getting_started_with_the_web/dateien_nutzen
+tags:
+  - Anfänger
+  - Datei
+  - Dateien
+  - HTML
+  - Pfad
+  - Webseite
+translation_of: Learn/Getting_started_with_the_web/Dealing_with_files
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>Eine Webseite besteht aus vielen Dateien: Texte, Code, Stylesheets, Multimedia-Inhalte etc. Wenn Sie eine Webseite erstellen, müssen Sie diese Dateien in einer sinnvollen Struktur speichern und sicherstellen, dass die Dateien miteinander kommunizieren können. Die Webseite sollte reibungslos funktionieren, bevor Sie alles auf einen Server hochladen. Dieser Artikel erklärt den Umgang mit Dateien, sodass Sie eine sinnvolle Dateistruktur für Ihre Website erstellen können.</p>
+</div>
+
+<h2 id="Wo_auf_Ihrem_Computer_soll_die_Webseite_liegen">Wo auf Ihrem Computer soll die Webseite liegen?</h2>
+
+<p>Wenn Sie an der Webseite »lokal« (auf dem eigenen Computer) arbeiten, sollten Sie alle zusammengehörigen Dateien in einem Ordner haben. Dieser Ordner sollte die Struktur der Dateien auf dem Server (dem Computer, über den die Dateien im Internet zugänglich sind) wiederspiegeln. Der lokale Ordner kann überall liegen, aber Sie sollten ihn dort speichern, wo Sie ihn wiederfinden können - vielleicht auf ihrem Desktop oder in einem Nutzerordner.</p>
+
+<ol>
+ <li>Wählen Sie einen Ort, um Ihre Webprojekte abzuspeichern. Erstellen Sie dort einen Ordner der <em>»webprojekte«</em> heißt. In diesen Ordner können Sie in Zukunft all Ihre Webprojekte (Internetseiten, Scripte, Vorlagen…) speichern.</li>
+ <li>In diesem Ordner erstellen Sie einen weiteren Ordner, in dem Sie ein bestimmtes Projekt speichern, in diesem Fall Ihre erste Webseite. Nennen Sie den Ordner<em> »erste-webseite«.</em></li>
+</ol>
+
+<h2 id="Eine_Bemerkung_zu_Großschreibung_und_Leerzeichen">Eine Bemerkung zu Großschreibung und Leerzeichen</h2>
+
+<p>In diesem Artikel nutzen wir für Ordnernamen und Dateinamen nur Kleinbuchstaben und keine Leerzeichen. Das hat folgende Gründe:</p>
+
+<ol>
+ <li>Viele Computer, besonders Webserver, unterscheiden Groß- und Kleinschreibung. Wenn Sie eine Datei namens <code>MeinBild.jpg</code> abspeichern und dann darauf zugreifen möchten, funktoniert <code>meinbild.jpg</code> nicht. Für den Computer sind <code>MeinBild.jpg</code> und <code>meinbild.jpg</code> ganz unterschiedliche Dateien.</li>
+ <li>Browser, Webserver und Programmiersprachen gehen nicht immer gleich mit Leerzeichen um. Wenn z.B. ein Leerzeichen in einem Dateinamen vorkommt, könnte angenommen werden, es handle sich um zwei Dateien deren Namen durch das Leerzeichen getrennt sind: <code>Mein Bild</code>.jpg würde als eine Datei namens <code>Mein</code> und eine Datei namens <code>Bild.jpg</code> interpretiert. Server ersetzen manchmal Leerzeichen durch die Zeichenfolge <code>"%20"</code> (der Zeichencode für ein Leerzeichen in einer URI) – das kann die Verlinkungen kaputtmachen: <code>Mein Bild.jpg</code> wird nämlich zu <code>Mein%20Bild.jpg</code>.</li>
+</ol>
+
+<p>Deshalb ist es am besten, sich anzugewöhnen Namen von Ordnern und Dateien ohne Leerzeichen und nur in Kleinbuchstaben zu vergeben. So vermeidet man Probleme.</p>
+
+<h2 id="In_welcher_Struktur_sollten_Sie_Ihre_Dateien_ablegen">In welcher Struktur sollten Sie Ihre Dateien ablegen?</h2>
+
+<p>In dem Ordner Ihres Webseiten-Projektes (<a href="#websiteWo">siehe oben</a>) werden Sie meistens eine <code>index.html</code>-Datei haben und Ordner für Bilder, Stildefinitionen und Scripte. Erstellen Sie diese Sachen:</p>
+
+<ol>
+ <li><code><strong>index.html</strong></code>: Das ist die erste Datei, die Leute sehen, wenn sie Ihre Webseite besuchen. Per Konvention heißt diese Datei <code>index.html</code>. Öffnen Sie einen Texteditor und speichern eine neue Datei mit dem Namen <code>index.html</code> in Ihrem Projektordner (der mit dem Namen »<em>erste-website«</em>) ab.</li>
+ <li><code><strong>Bilder-Ordner</strong></code>: Dieser Ordner enthält die Bilder, die Sie auf Ihrer Webseite anzeigen wollen. Erstellen Sie einen Ordner mit dem Namen <code>bilder</code> in dem Projektordner (»<em>erste-website«</em>).</li>
+ <li><strong><code>Styles-Ordner</code></strong>: Dieser Ordner wird Dateien enthalten, die das Aussehen Ihrer Webseite definieren (Schriftart, Hintergrundfarbe, Layout…), sogenannte CSS-Dateien. Erstellen Sie einen Ordner namens <code>styles</code> in Ihrem Projektordner.</li>
+ <li><code><strong>Scripts-Ordner</strong></code>: Dieser Ordner wird Dateien enthalten, die interaktive Funktionen beschreiben – wie z.B. eine Meldung anzeigen, wenn ein Knopf gedrückt wird. Erstellen Sie einen Ordner mit den Namen <code>scripts</code> in Ihrem Projektordner.</li>
+</ol>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Auf Windows-Computern kann es sein, dass die Dateinamen nicht ganz zu sehen sind. Es gibt eine Option mit dem Namen »Erweiterungen bei bekannten Dateitypen ausblenden«. Diese ist normalerweise eingeschaltet. Man kann die Funktion deaktivieren, wenn man in den Windows-Explorer geht, <strong>Ordner-Optionen</strong> wählt und <strong>Erweiterungen bei bekannten Dateitypen ausblenden</strong> abwählt und dann<strong> OK</strong> drückt.</p>
+</div>
+
+<h2 id="Dateipfade">Dateipfade</h2>
+
+<p>Damit Dateien untereinander kommunizieren können (wenn z.B. in der .html-Datei einer Seite ein Bild eingebunden ist), müssen Sie einen Dateipfad angeben. Das ist eine Art "Wegbeschreibung", anhand derer eine Datei eine andere Datei finden kann. Um zu zeigen, wie dies funktioniert, werden wir ein wenig HTML in unsere <code>index.html</code>-Datei einfügen und werden damit das Bild, welches Sie im vorhergehenden Artikel (<a href="/de/Learn/Getting_started_with_the_web/What_will_your_website_look_like">"Wie soll Ihre Webseite aussehen?"</a>) ausgewählt haben, anzeigen.</p>
+
+<ol>
+ <li>
+  <p>Kopieren Sie Ihr Bild, welches Sie zuvor ausgewählt haben, in den Ordner <code>bilder</code>.</p>
+ </li>
+ <li>
+  <p>Öffnen Sie die Datei <code>index.html</code> in einem Texteditor und fügen den folgenden Code genau so ein. (Keine Angst, Sie werden die Bedeutung dieser Befehle später noch kennen lernen.)</p>
+
+  <pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Mein Testseite&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;img src="" alt="Mein Testbild"&gt;
+  &lt;/body&gt;
+&lt;/html&gt; </pre>
+ </li>
+ <li>Die Zeile <code>&lt;img src="" alt="Mein Testbild"&gt;</code> ist der HTML-Code, welcher das Bild in die Seite einfügt. Jetzt müssen wir noch angeben, wo das Bild gespeichert ist. Das Bild ist im Ordner <code>bilder</code>, welcher in dem selben Ordner wie <code>index.html</code> ist. Um in diesen Unterordner zu gelangen, müssen wir <code>bilder/DeinBildName</code> eingeben. Wenn das Bild z.B. <code>firefox-icon.png</code> genannt ist, müssen wir <code>bilder/firefox-icon.png</code> eintippen.</li>
+ <li>Fügen Sie Ihren Pfad jetzt in den HTML-Code zwischen die zwei Anführungszeichen bei <code>src=""</code> ein.</li>
+ <li>Speichern Sie Ihren HTML-Code und öffnen die Datei mit einem Web-Browser. Jetzt sollte die Webseite Ihr Bild anzeigen.</li>
+</ol>
+
+<p><img alt="A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world" src="https://mdn.mozillademos.org/files/9229/website-screenshot.png" style="display: block; height: 542px; margin: 0px auto; width: 690px;"></p>
+
+<p>Ein paar Grundregeln für Dateipfade:</p>
+
+<ul>
+ <li>Um eine Zieldatei am selben Speicherort zu verlinken, können Sie einfach den Dateinamen eingeben. Beispiel: <code>mein-bild.jpg</code></li>
+ <li>Um eine Datei in einem Unterordner zu verlinken müssen Sie es so machen wie in dem Beispielprojekt oben. <code>Beispiel: bilder/mein-bild.jpg</code></li>
+ <li>Wenn Sie ein Bild in dem Ordner <strong>darüber</strong> verlinken wollen, müssen Sie zuerst zwei Punkte machen: <code>../mein-bild.jpg</code></li>
+ <li>Dies können Sie kombinieren, so viel Sie wollen: <code>../irgendeinordner/einandererordner/usw/mein-bild.jpg</code></li>
+</ul>
+
+<p>Momentan ist das alles, was Sie wissen müssen.</p>
+
+<div class="note">
+<p><strong>Achtung:</strong> Das Windows-Dateisystem benutzt "backslashes" - also Schrägstriche in die andere Richtung. Z.B. <code>C:\windows</code>. Wenn Sie Ihre Webseite programmieren, sollten Sie immer die "normalen" Schrägstriche (/) verwenden, damit die Seite auf allen Systemen funktioniert.</p>
+</div>
+
+<h2 id="Was_sollte_sonst_noch_getan_werden">Was sollte sonst noch getan werden?</h2>
+
+<p>Dies ist alles bis jetzt. Ihre Ordnerstruktur sollte ungefähr so aussehen:</p>
+
+<p><img alt="A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file" src="https://mdn.mozillademos.org/files/9231/file-structure.png" style="display: block; height: 577px; margin: 0px auto; width: 929px;"></p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</p>
diff --git a/files/de/learn/getting_started_with_the_web/html_basics/index.html b/files/de/learn/getting_started_with_the_web/html_basics/index.html
new file mode 100644
index 0000000000..ca417d1b4d
--- /dev/null
+++ b/files/de/learn/getting_started_with_the_web/html_basics/index.html
@@ -0,0 +1,226 @@
+---
+title: HTML-Grundlagen
+slug: Learn/Getting_started_with_the_web/HTML_basics
+tags:
+  - Anfänger
+  - Grundlagen
+  - HTML
+  - Internet
+  - Lernen
+  - Webentwicklung
+  - Webseiten
+translation_of: Learn/Getting_started_with_the_web/HTML_basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/dateien_nutzen", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>HTML (Hypertext Markup Language) ist der Code, welcher benötigt wird, um den Webinhalt zu strukturieren und ihm eine Bedeutung und einen Zweck zu geben. Zum Beispiel könnte Ihr Inhalt Absätze und Grafiken, aber auch Bilder und Tabellen enthalten. Wie der Titel dieses Artikels verspricht, soll Ihnen hier ein grundsätzliches Verständnis vermittelt werden, wie HTML eingesetzt wird.</p>
+</div>
+
+<h2 id="Was_ist_HTML">Was ist HTML?</h2>
+
+<p>HTML ist nicht wirklich eine Programmiersprache, sondern eine Auszeichnungssprache; sie ist dazu gedacht, Ihre Webseite zu strukturieren. Die Sprache besteht aus einer Reihe von Elementen, Tags genannt, welche Sie um verschiedene Teile Ihres Inhalts herum platzieren können, um diesem eine spezielle Aufgabe zuzuweisen. Zum Beispiel können Sie damit einen Text oder ein Bild in einen Link verwandeln. Als Beispiel nehmen wir folgenden Inhalt:</p>
+
+<pre class="notranslate">Meine Katze ist sehr frech.</pre>
+
+<p>Wenn wir möchten, dass der Satz in einem eigenen Absatz steht, können wir mit {{htmlelement("p")}} spezifizieren, dass es sich um einen Absatz handelt: </p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Meine Katze ist sehr frech.&lt;/p&gt;</pre>
+
+<h3 id="Aufbau_eines_HTML-Elements">Aufbau eines HTML-Elements</h3>
+
+<p>Schauen wir uns den Aufbau unseres Paragraphen-Elements ein wenig genauer an.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15443/katze-element.jpg" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p>
+
+<p>(Content=Inhalt, Element=HTML-Element)</p>
+
+<p>Die Hauptteile unseres Elements sind:</p>
+
+<ol>
+ <li><strong>Das öffnende Tag:</strong> Diese besteht aus dem Namen des Elements (in diesem Fall ein <code>p</code> für paragraph (engl.: Absatz)), welcher zwischen zwei spitzen Klammern eingesetzt ist. Dies zeigt an, wo das Element beginnt — in diesem Fall am Anfang unseres Absatzes.</li>
+ <li><strong>Der Inhalt:</strong> Dies ist der Inhalt des Elements, in diesem Fall einfach nur Text.</li>
+ <li><strong>Das schließende Tag:</strong> Dieses sieht genauso aus wie das öffnende Tag bis auf den zusätzlichen Schrägstrich (slash) vor dem Namen des Elements. Dieser Tag kommt an das Ende des Elementes — in diesem Fall am Ende des Absatzes.</li>
+ <li><strong>Das Element:</strong> Das öffnende Tag, der Inhalt und das schließende Tag gemeinsam ergeben zusammen das Element.</li>
+</ol>
+
+<p>Elemente können auch Attribute enthalten, das sieht dann so aus:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15463/katze-attribut.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p>
+
+<p>Diese Attribute enthalten Zusatzinformationen über das Element, welche nicht als eigentlicher Inhalt angezeigt werden. In diesem Fall erlaubt dieses Attribut, ihm einen Identifizierungsnamen zu geben, welchen man später dazu verwenden kann, um dieses Element mit Informationen wie z. B. Schriftart und -farbe zu versehen.</p>
+
+<p>In unserem Beispiel ist der <em>Name</em> des Attributes <code>class</code> und <code>editor-note</code> ist der diesem Attribut zugeordnete <em>Wert</em>.</p>
+
+<p>Ein Attribut sollte immer haben:</p>
+
+<ol>
+ <li>Einen Abstand zwischen ihm und dem Elementnamen (oder dem vorherigen Attribut, wenn es mehrere sind).</li>
+ <li>Den Attributnamen, gefolgt von Gleichheitszeichen</li>
+ <li>Anführungs- und Schlusszeichen um den Wert. (bsp. <code>"editor-note"</code>)</li>
+</ol>
+
+<h3 id="Verschachtelte_Elemente">Verschachtelte Elemente</h3>
+
+<p>Sie können einzelne Elemente ineinander verschachteln. Wenn wir also besonders betonen wollen, dass unsere Katze <strong>sehr</strong> frech ist, können wir dieses einzelne Wort in einem {{htmlelement("strong")}} Element verpacken.</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Meine Katze ist &lt;strong&gt;sehr&lt;/strong&gt; frech.&lt;/p&gt;</pre>
+
+<p>Folgendes Beispiel ist nicht richtig, da die Elemente nicht ineinander verschachtelt sind, sondern ineinander verkettet. Das letzte Element, welches geöffnet wird, muss auch zuerst geschlossen werden.</p>
+
+<pre class="example-bad brush: html notranslate">&lt;p&gt;Meine Katze ist &lt;strong&gt;sehr frech.&lt;/p&gt;&lt;/strong&gt;</pre>
+
+<p>Dies funktioniert wie mit Schachteln: Wenn die kleine Schachtel in der Großen ist, kann man auch nicht zuerst den großen Deckel schließen, bevor man den kleinen Deckel draufsetzt. Die einzelnen Elemente dürfen sich also nicht überlappen, sie dürfen nur ineinander stehen.</p>
+
+<h3 id="Leere_Elemente">Leere Elemente</h3>
+
+<p>Gewisse Elemente haben keinen Inhalt, diese werden <strong>leere Elemente</strong> genannt. Beispielsweise das {{htmlelement("img")}} Element, welches wir schon in unserer HTML-Datei haben:</p>
+
+<pre class="brush: html notranslate">&lt;img src="images/firefox-icon.png" alt="Mein Testbild"&gt;</pre>
+
+<p>Dies beinhaltet zwei Attribute, aber es gibt kein schließendes <code>&lt;/img&gt;</code> Tag und keinen Inhalt in dem Element. Das <code>&lt;img&gt;</code> Tag braucht keinen Inhalt um einen Effekt zu haben. Es bindet ein Bild an der entsprechenden Stelle in der HTML Seite ein.</p>
+
+<h3 id="Aufbau_eines_HTML-Dokumentes">Aufbau eines HTML-Dokumentes</h3>
+
+<p>Jetzt wissen Sie, wie die einzelnen Elemente in einer HTML-Datei aufgebaut sind, aber ein Element für sich alleine tut nicht viel. Wir schauen uns jetzt an, wie die einzelnen Elemente kombiniert werden, um eine HTML Seite aufzubauen. Schauen wir den Code wieder an, welchen wir vorher in die <code>index.html</code>-Datei eingefügt haben (welche wir im Artikel "<a href="/de/Learn/Getting_started_with_the_web/dateien_nutzen">Dateien nutzen</a>" erstellt haben):</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Meine Testseite&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;img src="images/firefox-icon.png" alt="Mein Testbild"&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Hier haben wir:</p>
+
+<ul>
+ <li><code>&lt;!DOCTYPE html&gt;</code> — den Dokumenttyp. Früher, als HTML noch jung war (1991/92), war dies dazu gedacht, um dem Browser mitzuteilen, welchen Regeln er zu folgen hatte. Das konnte z. B. sein, dass der Browser automatisch die Fehler überprüft und andere nützliche Dinge. Wie auch immer, heutzutage achtet niemand mehr wirklich darauf, es muss jedoch vorhanden sein, damit alles richtig funktioniert.</li>
+ <li><code>&lt;html&gt;&lt;/html&gt;</code> — das <code>&lt;html&gt;</code> Element. Dieses Element umhüllt den ganzen Inhalt. Manchmal wird es auch als root-Element bezeichnet</li>
+ <li><code>&lt;head&gt;&lt;/head&gt;</code> — das <code>&lt;head&gt;</code> Element. In dieses Element ist alles eingeschlossen, was <em>nicht</em> auf der Seite angezeigt wird. Dies enthält Informationen wie Schlüsselwörter, eine Seitenbeschreibung, welche in Suchmaschinen erscheint, CSS um unseren Inhalt zu designen, usw.</li>
+ <li><code>&lt;body&gt;&lt;/body&gt;</code> — das <code>&lt;body&gt;</code> Element. Dies beinhaltet <em>alles</em>, was die Betrachter sehen, wenn sie die Webseite besuchen, egal ob Text, Bilder, Videos, Audiodateien, usw.</li>
+ <li><code>&lt;meta charset="utf-8"&gt;</code> — Dieses Element setzt die Zeichenkodierung deines Dokuments auf <code>utf-8</code>, was die Buchstaben von fast allen menschlichen Sprachen beinhaltet. Umlaute wie Ä und Ü werden sonst nicht richtig angezeigt.</li>
+ <li><code>&lt;title&gt;&lt;/title&gt;</code> — Dies setzt den Titel der Seite, welcher im Tab angezeigt wird. Dieser wird auch gebraucht, wenn jemand ein Lesezeichen erstellt.</li>
+</ul>
+
+<h2 id="Bilder">Bilder</h2>
+
+<p>Schauen wir jetzt unser Bild-Element nochmals an:</p>
+
+<pre class="brush: html notranslate">&lt;img src="images/firefox-icon.png" alt="Mein Testbild"&gt;</pre>
+
+<p>Wie wir vorher gesagt haben, ist ein Bild an der Stelle unserer Seite eingebettet, wo es erscheint. Es tut dies mit dem <code>{{htmlattrdef("src")}}</code> (src ist Abkürzung für engl.: "source" = deutsch: "Quelle") Attribut, welches den Pfad unseres Bildes beinhaltet.</p>
+
+<p>Aber wir haben auch einen <code>{{htmlattrdef("alt")}}</code> (alternative) Befehl, welcher einen Text anzeigt, falls das Bild nicht angezeitg werden kann. Dies ist nützlich für:</p>
+
+<ol>
+ <li>Sehbehinderte. Diese haben häufig Programme, welche ihnen den alternativen Text vorlesen.</li>
+ <li>Wenn es einen Fehler im Code gibt, was bedeutet, dass das Bild nicht angezeigt werden kann. Verändern Sie beispielsweise den Code bei <code>{{htmlattrdef("src")}}</code> und speichern ihn ab. Öffnen Sie das Dokument dann mit dem Browser. Jetzt sollte statt dem Bild folgende Meldung angezeigt werden:</li>
+</ol>
+
+<p><img alt="" src="Ein Kleiner Test"></p>
+
+<p>Dieser alternative Satz sollte dem Leser eine Informationen geben, damit er sich vorstellen kann, was auf dem Bild angezeigt ist. Dieser Beispielsatz ist also nicht so gut. Viel besser wäre die Beschreibung "Das Firefox-Logo: Ein brennender Fuchs, welcher die Erde umkreist."</p>
+
+<p><strong>Schreiben Sie jetzt einen besseren Alternativtext für Ihr Bild.</strong></p>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Finden Sie mehr über Zugänglichkeit unter <a href="/de/docs/Web/Accessibility">MDN's Accessibility landing page</a> heraus.</p>
+</div>
+
+<h2 id="Textdarstellung">Textdarstellung</h2>
+
+<p>Diese Lektion enthält ein paar HTML Grundlagen, welche man benötigt, um Text darzustellen.</p>
+
+<h3 id="Überschriften">Überschriften</h3>
+
+<p>Mit Überschriftelementen können Sie bestimmte Teile des Inhaltes als Überschrift deklarieren. Wie ein Buch einen Hauptitel und Kapitelüberschriften haben kann, können HTML-Dokumente eine Hauptüberschrift" und weitere Überschriften haben.</p>
+
+<p>HTML besitzt 6 Überschrifttypen, wobei meist nur 3-4 gebraucht werden:  {{htmlelement("h1")}}–{{htmlelement("h6")}}</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Meine Hauptüberschrift&lt;/h1&gt;
+&lt;h2&gt;Meine Top-Level Unterüberschrift&lt;/h2&gt;
+&lt;h3&gt;Meine Unterüberschrift&lt;/h3&gt;
+&lt;h4&gt;Meine weitere Unterüberschrift&lt;/h4&gt;</pre>
+
+<p>Probieren Sie nun einen geeigneten Titel in Ihre HTML-Seite einzufügen, direkt über dem {{htmlelement("img")}} Element.</p>
+
+<h3 id="Absätze">Absätze</h3>
+
+<p>Wie oben erklärt benutzt man {{htmlelement("p")}}, Elemente um Absätze zu erstellen. Sie werden diese oft benutzen, um Texte zu strukturieren.</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Dies ist ein Absatz (p ist Abkürzung für engl.:"Paragraph")&lt;/p&gt;</pre>
+
+<p><strong>Ergänzen Sie Ihren Beispieltext (Sie sollten sich den Textinhalt beim Planen der Webseite überlegt haben: <a href="/de/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like"><em>Wie sollte Ihre Website aussehen?</em></a>) in einem oder mehreren Absätzen direkt unter Ihrem </strong> {{HTMLElement("img")}} <strong> (Bildelement).</strong></p>
+
+<h3 id="Listen">Listen</h3>
+
+<p>Viele Webseiten enthalten Listen , deshalb hält HTML dafür Elemente bereit. Die Kennzeichnung von Listen besteht immer aus zwei Elementen. Man unterscheidet geordnete und ungeordnete Listen.</p>
+
+<ol>
+ <li><strong>Ungeordnete Listen </strong>sind Listen, bei denen die Reihenfolge der Gegenstände keine Rolle spielt, wie eine Einkaufsliste. Diese werden eingehüllt von einem  {{htmlelement("ul")}} Element.</li>
+ <li><strong>Geordnete Listen </strong>werden verwendet, wenn die Reihenfolge der Bestandteile wichtig ist, wie bei einem Rezept. Diese werden eingehüllt von einem {{htmlelement("ol")}} Element.</li>
+</ol>
+
+<p>Jeder Gegenstand der Liste wird einzeln in ein {{htmlelement("li")}} Listen-Element gepackt.</p>
+
+<p>Wenn wir zum Beispiel die einzelnen Teile dieses Absatzes in eine geeignete Liste verwandeln wollen:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Hier bei Mozilla sind wir eine globale Gemeinschaft aus Entwicklern, Vorausdenkern, Erschaffern, welche zusammen daran arbeiten...&lt;/p&gt;</pre>
+
+<p>Könnten wir das so machen:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Hier bei Mozilla sind wir eine globale Gemeinschaft aus&lt;/p&gt;
+
+
+&lt;ul&gt;
+  &lt;li&gt;Entwicklern&lt;/li&gt;
+  &lt;li&gt;Vorausdenkern&lt;/li&gt;
+  &lt;li&gt;Erschaffern&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;p&gt;welche zusammen daran arbeiten ... &lt;/p&gt;</pre>
+
+<p><strong>Probieren Sie eine geordnete oder ungeordnete Liste in Ihre Beispielseite einzufügen.</strong></p>
+
+<h2 id="Links">Links</h2>
+
+<p>Links sind sehr wichtig — sie sind, was das Internet EIN NETZ macht. Um einen Link zu implementieren, müssen wir ein einfaches Element — {{htmlelement("a")}} — verwenden. Das <em>a</em> ist die Kurzform für "Anker" (engl. "anchor"). Um einen Text innerhalb des Absatzes in einen Link zu verwandeln, führen Sie folgenden Schritte durch:</p>
+
+<ol>
+ <li>Suchen Sie einen Text aus. Wir benutzen in unserem Beispiel "Mozilla Manifesto".</li>
+ <li>Betten Sie den Text in ein <code>&lt;a&gt;</code>-Element ein:
+  <pre class="brush: html notranslate">&lt;a&gt;Mozilla Manifesto&lt;/a&gt;</pre>
+ </li>
+ <li>Geben Sie dem <code>&lt;a&gt;</code>-Element ein <code>href</code>-Attribut:
+  <pre class="brush: html notranslate">&lt;a href=""&gt;Mozilla Manifesto&lt;/a&gt;</pre>
+ </li>
+ <li>Füllen Sie für den Wert des Attributs die Internetadresse ein, auf die Sie verlinken wollen:
+  <pre class="brush: html notranslate">&lt;a href="https://www.mozilla.org/en-US/about/manifesto/"&gt;Mozilla Manifesto&lt;/a&gt;</pre>
+ </li>
+</ol>
+
+<p>Es kann sein, dass Sie komische Ergebnisse bekommen, wenn Sie <code>https://</code> oder <code>http://</code> , genannt <em>Protokoll</em>, vergessen. Überprüfen Sie deshalb immer nachdem Sie den Link gesetzt haben, ob er wie gewünscht funktioniert.</p>
+
+<div class="note">
+<p><code>{{htmlattrdef("href")}}</code> mag sich etwas komisch für einen Attributnamen anhören. Wenn Sie Probleme haben sich an den Namen zu erinnern, merken Sie sich, dass es die Kurzform von <em><strong>H</strong>ypertext <strong>Ref</strong>erenz (engl. <strong>h</strong>ypertext <strong>ref</strong>erence</em>) ist.</p>
+</div>
+
+<p><strong>Fügen Sie jetzt einen Link Ihrer Seite hinzu, falls Sie es noch nicht getan haben.</strong></p>
+
+<h2 id="Ergebnis">Ergebnis</h2>
+
+<p>Wenn Sie allen Anweisungen in diesem Artikel gefolgt sind, sollten Sie als Ergebnis eine Seite erhalten, die ähnlich wie diese aussieht (Sie können unsere Version davon auch <a href="http://mdn.github.io/beginner-html-site/">hier anschauen</a>):<br>
+ <br>
+ <img alt="Ein Screenshot einer Webseite, welche das Firefox-Logo enthält, Absätze und eine Liste" src="https://mdn.mozillademos.org/files/15469/beginner-html-site-de.jpg" style="border: 1px solid grey; display: block; height: 838px; margin: 0px auto; width: 716px;"></p>
+
+<p>Wenn Sie nicht dasselbe Ergebnis haben und nicht wissen, wo das Problem liegt, können Sie Ihren Code mit dem <a href="https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html">fertigen Code</a> auf Github vergleichen.</p>
+
+<p>Hier haben wir nur an der Oberfläche von HTML gekratzt. Um mehr über HTML zu lernen, gehen Sie zu der <a href="/de/Learn/HTML">HTML-Lernseite</a>.</p>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/dateien_nutzen", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</div>
diff --git a/files/de/learn/getting_started_with_the_web/index.html b/files/de/learn/getting_started_with_the_web/index.html
new file mode 100644
index 0000000000..7989c4c59a
--- /dev/null
+++ b/files/de/learn/getting_started_with_the_web/index.html
@@ -0,0 +1,66 @@
+---
+title: Lerne das Internet kennen
+slug: Learn/Getting_started_with_the_web
+tags:
+  - Anfänger
+  - CSS
+  - Gestaltung
+  - HTML
+  - Index
+  - Leitfaden
+  - Theorie
+  - Veröffentlichung
+translation_of: Learn/Getting_started_with_the_web
+---
+<p>{{LearnSidebar}}</p>
+
+<p>{{NextMenu("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web")}}</p>
+
+<p><em>Lerne das Internet kennen </em>ist eine <u>kurze</u> Serie von Artikeln, die in angewandte Webentwicklung einführt. Sie werden die Werkzeuge erlernen, die Sie brauchen, um eine einfache Webseite zu erstellen und eigenen Code zu veröffentlichen.</p>
+
+<h2 id="Die_Geschichte_Ihrer_ersten_Webseite">Die Geschichte Ihrer ersten Webseite</h2>
+
+<p>Es ist viel Arbeit, eine professionelle Webseite zu gestalten. Wenn Sie mit der Webentwicklung erst anfangen, ermutigen wie Sie klein zu beginnen. Sie werden nicht sofort das nächste Facebook erstellen, aber es ist nicht schwer eine eigene, einfache Webseite online zu stellen, also beginnen wir damit.</p>
+
+<p>Wenn Sie sich durch diese Artikelserie der Reihe nach durcharbeiten, können Sie ohne Vorwissen Ihre erste eigene Webseite online erstellen. Lassen Sie uns anfangen!</p>
+
+<h3 id="Nötige_Software_installieren"><a href="https://developer.mozilla.org/de/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Nötige Software installieren</a></h3>
+
+<p>Es gibt eine große Auswahl an Werkzeugen für das Erstellen von Webseiten. Wenn Sie gerade erst beginnen, könnten Sie von der Menge an Code-Editoren, Frameworks und Testwerkzeugen erschlagen sein. In unserem Artikel <a href="https://developer.mozilla.org/de/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Nötige Software installieren</a> zeigen wir Ihnen Schritt für Schritt, wie Sie diese Software installieren.</p>
+
+<h3 id="Wie_wird_Ihre_erste_Webseite_aussehen"><a href="/de/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Wie wird Ihre erste Webseite aussehen?</a></h3>
+
+<p>Bevor Sie mit dem Schreiben von Code für die Webseite beginnen, planen Sie Ihre Webseite. Welche Informationen möchten Sie zeigen? Welche Schriftarten und Farben möchten Sie nutzen? <a href="/de/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like">Wie wird Ihre erste Webseite aussehen? </a>Wir zeigen Ihnen eine einfache Methode, um Inhalt und Design Ihrer Seite zu planen.</p>
+
+<h3 id="Dateien_nutzen"><a href="/de/Learn/Getting_started_with_the_web/dateien_nutzen">Dateien nutzen</a></h3>
+
+<p>Eine Website besteht aus vielen Dateien: Textinhalt, Code, Stylesheets, Medien und so weiter. Wenn Sie eine Webseite erstellen, müssen Sie die Dateien in eine sinnvolle Struktur bringen und sicherstellen, dass diese voneinander "wissen". <a href="/de/Learn/Getting_started_with_the_web/dateien_nutzen">Dateien nutzen</a> erklärt, wie Sie von Anfang an eine sinnvolle Dateistruktur erstellen.</p>
+
+<h3 id="HTML-Grundlagen"><a href="/de/Learn/Getting_started_with_the_web/HTML_basics">HTML-Grundlagen</a></h3>
+
+<p>Hypertext Markup Language (HTML) ist der Code, den Sie nutzen werden, um eine Webseite zu strukturieren und ihr Bedeutung und einen Zweck zu geben. Zum Beispiel: Ist mein Text ein Listenpunkt oder ein Absatz? Füge ich Bilder auf meine Webseite ein? Stelle ich Daten in Form einer Tabelle übersichtlich dar? Die <a href="/de/Learn/Getting_started_with_the_web/HTML_basics">HTML-Grundlagen </a>geben Ihnen<a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics"> </a>genug Informationen, um sich mit HTML vertraut zu machen.</p>
+
+<h3 id="CSS-Grundlagen"><a href="/de/Learn/Getting_started_with_the_web/CSS_basics">CSS-Grundlagen</a></h3>
+
+<p>Cascading Stylesheets (CSS) ist der Code, mit welchem Sie Stil und Aussehen Ihrer Seite bestimmen: Soll der Text lieber rot oder schwarz sein? Wo soll dieser Abschnitt auf dem Bildschirm erscheinen? Welche Bilder und Farben sollen im Hintergrund benutzt werden? <a href="/de/Learn/Getting_started_with_the_web/CSS_basics">CSS-Grundlagen</a> zeigt Ihnen, wie Sie eine Webseite visuell gestalten können.</p>
+
+<h3 id="JavaScript-Grundlagen"><a href="https://developer.mozilla.org/de/docs/Learn/Getting_started_with_the_web/JavaScript_basis">JavaScript-Grundlagen</a></h3>
+
+<p>JavaScript ist die Programmiersprache, mit welcher Sie Webinhalte interaktiv machen können. Sie bestimmen damit zum Beispiel Aktionen für einen Button, berechnen Werte oder verarbeiten Eingaben aus Formularen, dynamisieren die Gestaltung, lenken Animationen und vieles mehr. <a href="https://developer.mozilla.org/de/docs/Learn/Getting_started_with_the_web/JavaScript_basis">JavaScript-Grundlagen</a> vermittelt Ihnen erste Ideen, was mit dieser fantastischen Programmiersprache möglich ist und wie Sie anfangen können, damit zu programmieren.</p>
+
+<h3 id="Ihre_Webseite_veröffentlichen"><a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Ihre Webseite veröffentlichen</a></h3>
+
+<p>Wenn Sie Ihren Code geschrieben haben und die Dateien Ihrer neuen Webseite organisiert haben, dann können Sie Ihre Webseite online stellen, sodass andere Menschen sie finden können. <a href="https://developer.mozilla.org/de/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Ihre Webseite veröffentlichen </a>zeigt, wie Sie diese im Internet zugänglich machen.</p>
+
+<h3 id="Wie_das_Web_funktioniert"><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">Wie das Web funktioniert </a></h3>
+
+<p>Wenn Sie auf Ihre Lieblingswebseite zugreifen, passieren eine Menge komplexer Dinge, ohne dass Sie etwas davon mitbekommen. <a href="https://developer.mozilla.org/de/docs/Learn/Getting_started_with_the_web/Wie_das_Internet_funktioniert">Wie das Web funktioniert</a> gibt eine Übersicht über die Vorgänge, die im Hintergrund einer Webseite ablaufen.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Web Demystified</a> (das Web entzaubert): Eine großartige Reihe von Videos, die die Web-Grundlagen erklären und sich an absolute Anfänger in der Webentwicklung richten. Erstellt von <a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a>.</li>
+ <li>Das Web und Web Standards: Dieser Artikel liefert einige nützliche Hintergründe über das Web - wie es entstanden ist, was die wichtigsten Technologien im Web sind, wie sie zusammenarbeiten, warum "Web Designer" ein großartiger Beruf ist und welche Arten der "besten Praxis" Sie in diesem Kurs lernen.</li>
+</ul>
+
+<p>{{Next("Learn/Getting_started_with_the_web/Installing_basic_software")}}</p>
diff --git a/files/de/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/de/learn/getting_started_with_the_web/installing_basic_software/index.html
new file mode 100644
index 0000000000..3800d481c2
--- /dev/null
+++ b/files/de/learn/getting_started_with_the_web/installing_basic_software/index.html
@@ -0,0 +1,61 @@
+---
+title: Notwendige Software installieren
+slug: Learn/Getting_started_with_the_web/Installing_basic_software
+tags:
+  - Anfänger
+  - Beginner
+  - Browser
+  - Einrichtung
+  - Erste Schritte
+  - Grundlagen
+  - Lernen
+  - Setup
+  - Webentwicklung
+  - editor
+translation_of: Learn/Getting_started_with_the_web/Installing_basic_software
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>In <em>Notwendige Software installieren</em>, zeigen wir Ihnen, welche Werkzeuge Sie für einfache Aufgaben in der Webentwicklung brauchen und wie Sie diese korrekt installieren.</p>
+</div>
+
+<h2 id="Welche_Werkzeuge_nutzen_professionelle_Entwickler">Welche Werkzeuge nutzen professionelle Entwickler?</h2>
+
+<ul>
+ <li><strong>Einen eigenen Computer</strong>. Vielleicht scheint das offensichtlich, aber manch einer liest diesen Artikel möglicherweise auf dem Smartphone oder auf einem Computer in der Bibliothek. Für ernsthafte Webentwicklung ist es sinnvoll, in einen eigenen Computer zu investieren.</li>
+ <li><strong>Ein Texteditor</strong>, um Code zu schreiben. Das kann ein freier Editor sein (z.B.  <a href="http://notepad-plus-plus.org/" rel="noreferrer">Notepad++</a>, <a href="https://wiki.gnome.org/Apps/Gedit" rel="noreferrer">gedit</a>, <a href="http://brackets.io/" rel="noreferrer">Brackets</a>, <a href="/de/docs/" rel="noreferrer">Atom</a> oder <a href="https://code.visualstudio.com/" rel="noreferrer">Visual Studio Code</a>), ein kommerzieller Editor (<a href="http://www.sublimetext.com/" rel="noreferrer">Sublime Text</a> oder <a href="https://panic.com/coda/" rel="noreferrer">Coda</a>)  oder ein grafischer/hybrider Editor (<a href="http://www.adobe.com/uk/products/dreamweaver.html" rel="noreferrer">Dreamweaver</a> oder <a href="https://www.jetbrains.com/webstorm/" rel="noreferrer">WebStorm</a>).</li>
+ <li><strong>Web Browser</strong>, um den Code auszuprobieren. Die meistgenutzten Browser sind momentan <a href="https://www.mozilla.org/en-US/firefox/new/" rel="noreferrer">Firefox</a>, <a href="https://www.google.com/chrome/browser/" rel="noreferrer">Chrome</a>, <a href="http://www.opera.com/" rel="noreferrer">Opera</a>, <a href="https://www.apple.com/safari/" rel="noreferrer">Safari</a>, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie" rel="noreferrer">Internet Explorer</a> und <a href="https://www.microsoft.com/en-us/windows/microsoft-edge" rel="noreferrer">Microsoft Edge</a>. Sie sollten auch testen, wie Ihre Seite auf mobilen Geräten aussieht und ob sie auf älteren Browsern funktioniert, die Ihre Zielgruppe vielleicht noch ausgiebig nutzt (wie z.B.  IE 7-10)</li>
+ <li><strong>Ein Bildbearbeitungsprogramm</strong> wie <a href="http://www.gimp.org/" rel="noreferrer">The Gimp</a>, <a href="http://pinta-project.com/" rel="noreferrer">Pinta</a>, <a href="http://www.getpaint.net/" rel="noreferrer">Paint.NET</a> oder <a href="http://www.adobe.com/uk/products/photoshop.html" rel="noreferrer">Photoshop</a>, um Bilder und Grafiken für Ihre Webiste zu erstellen.</li>
+ <li><strong>Ein Versionierungssystem</strong>, um im Team an einem Projekt zu arbeiten, Code und Inhalte zu teilen und um Editierkonflikte zu vermeiden. Momentan ist <a href="http://git-scm.com/" rel="noreferrer">Git</a> das populärste Versionierungssystem und der <a href="https://github.com/" rel="noreferrer">GitHub</a> Code Hosting Service, welcher auf <a href="http://git-scm.com/" rel="noreferrer">Git</a> basiert, ist ebenso populär.</li>
+ <li><strong>Ein FTP-Programm</strong>, um Websites auf einen Server zu laden, sodass andere darauf zugreifen können. Es gibt etliche solcher Programme wie <a href="https://cyberduck.io/" rel="noreferrer">Cyberduck</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/fireftp/" rel="noreferrer">FireFTP</a> und <a href="https://filezilla-project.org/" rel="noreferrer">FileZilla</a>.</li>
+ <li><strong>Ein Automatisierungssystem</strong>, wie <a href="http://gruntjs.com/" rel="noreferrer">Grunt</a> oder <a href="http://gulpjs.com/" rel="noreferrer">Gulp</a>, um wiederkehrende Aufgaben zu automatisieren, wie z.B. die Komprimierung von Code oder das Testen.</li>
+ <li>Vorlagen, Bibliotheken und Frameworks, um oft benötigte Funktionen bereitzustellen</li>
+ <li>Darüber hinaus weitere Anwendungen!</li>
+</ul>
+
+<h2 id="Welche_Werkzeuge_brauche_ich_jetzt_wirklich">Welche Werkzeuge brauche ich jetzt wirklich?</h2>
+
+<p>Die Liste an möglichen Werkzeugen wirkt einschüchternd, aber glücklicherweise können Sie mit der Webentwicklung anfangen, ohne die meisten dieser Werkzeuge kennen zu müssen. In diesem Artikel werden wir nur eine grundlegendste Ausstattung installieren: Einen Texteditor und einige moderne Webbrowser.</p>
+
+<h3 id="Einen_Texteditor_installieren">Einen Texteditor installieren</h3>
+
+<p>Sie haben vermutlich schon einen Texteditor auf Ihrem Computer. Windows hat <a href="http://en.wikipedia.org/wiki/Notepad_%28software%29" rel="noreferrer">Notepad</a>, Mac OS X kommt mit <a href="http://en.wikipedia.org/wiki/TextEdit" rel="noreferrer">TextEdit</a>. Linux-Distributionen haben verschiedene Editoren; Ubuntu hat z.B. <a href="http://en.wikipedia.org/wiki/Gedit" rel="noreferrer">gedit</a> vorinstalliert.</p>
+
+<p>Für die Webentwicklung gibt es bessere Editoren als Notepad oder TextEdit. Auf Windows ist <a href="http://notepad-plus-plus.org/" rel="noreferrer">Notepad++ </a>sehr beliebt. Unter allen größeren Betriebssystemen laufen <a href="http://brackets.io/" rel="noreferrer">Brackets</a> und <a href="https://atom.io/" rel="noreferrer">Atom</a>. Diese Editoren sind frei verfügbar und helfen Ihnen beim Schreiben von Code besser als die Standard-Texteditoren.</p>
+
+<h3 id="Installieren_von_modernen_Browsern">Installieren von  modernen Browsern</h3>
+
+<p>Zum Testen von Codes sollten Sie einen oder besser mehrere moderne Browser installieren.</p>
+
+<ul>
+ <li>Linux: <a href="https://www.mozilla.org/en-US/firefox/new/" rel="noreferrer">Firefox</a>, <a href="https://www.google.com/chrome/browser/" rel="noreferrer">Chrome</a>, Chromium (via Package-Manager), <a href="http://www.opera.com/" rel="noreferrer">Opera</a>.</li>
+ <li>Windows: <a href="https://www.mozilla.org/en-US/firefox/new/" rel="noreferrer">Firefox</a>, <a href="https://www.google.com/chrome/browser/" rel="noreferrer">Chrome</a>, <a href="http://www.opera.com/" rel="noreferrer">Opera</a>, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie" rel="noreferrer">Internet Explorer</a> (wenn Sie Windows 8 haben, können Sie IE 10 oder höher installieren; wenn nicht, installieren Sie einen anderen Browser)</li>
+ <li>Mac: <a href="https://www.mozilla.org/en-US/firefox/new/" rel="noreferrer">Firefox</a>, <a href="https://www.google.com/chrome/browser/" rel="noreferrer">Chrome</a>, <a href="http://www.opera.com/" rel="noreferrer">Opera</a>, <a href="https://www.apple.com/safari/" rel="noreferrer">Safari</a> (Safari ist bei iOS und OS X der mitgelieferte Standard-Browser)</li>
+</ul>
+
+<p>Bevor Sie weitermachen, sollten Sie mindestens zwei dieser Browser installiert haben, damit Sie Ihren Code testen können.</p>
+
+<div>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</div>
diff --git a/files/de/learn/getting_started_with_the_web/javascript_basis/index.html b/files/de/learn/getting_started_with_the_web/javascript_basis/index.html
new file mode 100644
index 0000000000..65a31710d3
--- /dev/null
+++ b/files/de/learn/getting_started_with_the_web/javascript_basis/index.html
@@ -0,0 +1,407 @@
+---
+title: JavaScript-Grundlagen
+slug: Learn/Getting_started_with_the_web/JavaScript_basis
+tags:
+  - Anfänger
+  - JavaScript
+  - Lernen
+  - Web
+  - Webdesign
+translation_of: Learn/Getting_started_with_the_web/JavaScript_basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>JavaScript ist eine Programmiersprache, mit der man interaktive Inhalte zu einer Webseite hinzufügen kann (zum Beispiel: Spiele, Reaktionen durch das Drücken von Buttons oder Eingaben in Formulare, dynamisches Aussehen, Animationen, usw.). Dieser Artikel hilft Ihnen, erste Schritte mit dieser spannenden Sprache zu machen und eine Vorstellung zu verschaffen, was möglich ist.</p>
+</div>
+
+<h2 id="Was_ist_JavaScript_wirklich">Was ist JavaScript wirklich?</h2>
+
+<p>{{Glossary("JavaScript")}} (Kurz "JS") ist eine vollwertige und dynamische Programmiersprache, welche, wenn man sie zu einem {{Glossary("HTML")}} Dokument hinzufügt, für Dynamik und Interaktion mit dem Nutzer sorgt. JS wurde von Brendan Eich erfunden, Mitbegründer des Mozilla Projektes, der Mozilla Foundation, und der Mozilla Corporation.</p>
+
+<p>JavaScript ist unglaublich vielseitig. Man beginnt ganz einfach mit simplen Features, wie z.B. Karussels, (Bilder-)Galerien, variablen Layouts und Reaktionen auf Button-Klicks. Wenn Sie dann später erfahrener im Umgang mit der Sprache sind, können Sie damit ganze Spiele, animierte 2D- und 3D-Grafiken, auf Datenbanken basierende Apps und vieles mehr erstellen!</p>
+
+<p>JavaScript an sich ist sehr kompakt und trotzdem flexibel. Viele Entwickler haben noch weitere Tools/Erweiterungen für die Arbeit mit JavaScript geschrieben, um noch mehr Effizienz mit wenig Aufwand aus JS herauszuholen. Diese Funktionen sind:</p>
+
+<ul>
+ <li>Programmierschnittstellen ({{Glossary("API","APIs")}}), die in Browsern implementiert wurden, um diese um JS-Funktionen zu erweitern, z.B. das dynamische Erstellen von HTML oder das Einstellen eines CSS-Styles, Abfangen und Manipulieren von Videostreams, Erzeugen von 3D-Grafiken/Audio-Samples und vieles mehr...</li>
+ <li>Drittanbieter-APIs, die es Entwicklern ermöglichen, Funktionen von anderen Seiten in eigene Seiten einzubinden, z.B. von Twitter oder Facebook.</li>
+ <li>Drittanbieter-Frameworks und Bibliotheken, die man zu HTML hinzufügen kann, die es ermöglichen, Webseiten und Apps schnell zu erzeugen.</li>
+</ul>
+
+<p>Da dieser Artikel dazu gedacht ist, Ihnen eine leichte Einführung in die Grundlagen von JavaScript zu geben, werden wir uns hier nicht über die Unterschiede zwischen der Basis der JavaScript-Sprache und den obengenannten Erweiterungen unterhalten. Sie können später im Detail lernen, was es damit auf sich hat in unserem <a href="/de/docs/Learn/JavaScript">JavaScript Lernbereich</a>.</p>
+
+<p>Hier werden wir einige Grundlagen von JavaScript zeigen und Sie werden mit einigen Browser APIs experimentieren können. Viel Spaß!</p>
+
+<h2 id="Ein_Hallo_Welt!_Beispiel">Ein "Hallo Welt!" Beispiel</h2>
+
+<p>Der vorhergehende Absatz klingt sehr aufregend und das zurecht. JavaScript ist eine der spannendsten Internet-Technologien und wenn Sie damit beginnen, wird Ihre Webseite sehr viel mächtiger.</p>
+
+<p>Jedoch ist JavaScript etwas komplexer als HTML und CSS. Daher werden Sie klein anfangen, und in kurzen, regelmäßigen Schritten vorangehen müssen. Zum Start zeigen wir Ihnen, wie man JavaScript-Code zu einer Seite hinzu fügt, um ein "Hallo Welt!" Beispiel zu erstellen (<a href="https://de.wikipedia.org/wiki/Hallo-Welt-Programm">der Standard in elementaren Programmierbeispielen</a>).</p>
+
+<div class="warning">
+<p><strong>WICHTIG</strong>: Wenn Sie dem vorhergehenden Kurs nicht bis hierher gefolgt sind, <a href="https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip">laden Sie dieses Codebeispiel herunter</a> und benutzen es als Einstieg.</p>
+</div>
+
+<ol>
+ <li>Zuerst gehen Sie zu Ihrer Testseite und erstellen eine neue Datei mit dem Namen <code>main.js</code>. Speichern Sie diese Datei in Ihrem skripts-Ordner.</li>
+ <li>Dann gehen Sie zur <code>index.html</code> Datei und fügen das folgende Element in einer neuen Zeile vor dem schließenden <code>&lt;/body&gt;-</code>Tag ein:
+  <pre class="brush: html">&lt;script src="scripts/main.js"&gt;&lt;/script&gt;</pre>
+ </li>
+ <li>Dies macht dasselbe, wie das {{htmlelement("link")}} Element für CSS — Es bindet die JavaScript-Datei auf der Seite ein, damit es einen Einfluss auf den HTML Code haben kann (und auch auf den CSS-Code und alles andere auf der Seite).</li>
+ <li>Fügen Sie nun den folgenden Code in die <code>main.js-</code>Datei ein:
+  <pre class="brush: js">var myHeading = document.querySelector('h1');
+myHeading.textContent = 'Hallo Welt!';</pre>
+ </li>
+ <li>Gehen Sie sicher, dass die Javascript und HTML-Dateien gespeichert sind, und laden <code>index.html</code> in einen Browser. Die Webseite sollte wie folgt aussehen:<img alt="" src="https://mdn.mozillademos.org/files/15479/beginner-js1-de.jpg" style="border: 1px solid grey; display: block; margin: 0px auto; width: 755px;"></li>
+</ol>
+
+<div class="note">
+<p><span style="font-size: 14px;"><strong>Hinweis</strong></span>: Das {{htmlelement("script")}}-Element haben wir am Ende des &lt;body&gt;-Elements geschrieben, da das HTML vom Browser in der Reihenfolge geladen wird, wie es in der Datei geschrieben wurde. Wenn der JavaScript-Code geladen wird, bevor die HTML-Seite aufgebaut wurde, hat es möglicherweise keinen Einfluss auf die HTML-Elemente, die später geladen werden. Also ist es meistens am besten, JavaScript-Code eher am Ende der HTML Seite einzubinden.</p>
+</div>
+
+<h3 id="Was_ist_passiert">Was ist passiert?</h3>
+
+<p>Ihre Überschrift wurde durch die Benutzung von JavaScript zu "Hello world!" geändert. Wir haben dies dadurch ermöglicht, indem wir zuerst eine Funktion mit dem Namen {{domxref("Document.querySelector", "querySelector()")}} benutzt haben, um eine Referenz zu unserer Überschrift zu bekommen und sie in einer Variable mit dem Namen <code>myHeading</code> gespeichert. Es ist ähnlich zu dem, was wir in CSS mit den Selektoren gemacht haben. Wenn Sie irgendetwas mit einem Element machen möchten, müssen Sie es zuerst auswählen.</p>
+
+<p>Anschließend setzen wir den Wert der Eigenschaft {{domxref("Node.textContent", "textContent")}} der Variablen  <code>myHeading</code> (die den Inhalt des Headings repräsentiert) auf "Hallo Welt!". </p>
+
+<div class="note">
+<p><strong>Hinweis: </strong>Beide Funktionen die Sie genutzt haben<strong> </strong>sind Teile<strong> </strong>des <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model">Document Object Model (DOM) API</a></p>
+</div>
+
+<h2 id="Programmier-Crash-Kurs">Programmier-Crash-Kurs</h2>
+
+<p>Es folgt eine Beschreibung einiger Basis-Eigenschaften der Sprache JavaScript, um Ihnen etwas mehr Verständnis der Zusammenhänge zu vermitteln. Diese Eigenschaften sind anderen Programmiersprachen gemeinsam. Wenn Sie diese Grundlagen verstehen, sollte es Ihnen möglich sein, mit dem Programmieren zu beginnen.</p>
+
+<div class="warning">
+<p><strong>Wichtig</strong>: Versuchen Sie, die Zeilen des Beispielcodes dieses Artikels, in die JavaScript-Konsole einzufügen, um zu sehen, was geschieht. Weitere Details zur JavaScript-Konsole entnehmen Sie aus <a href="/en-US/Learn/Discover_browser_developer_tools">Entdecke Browser Entwickler-Werkzeuge</a>.</p>
+</div>
+
+<h3 id="Variablen">Variablen</h3>
+
+<p>{{Glossary("Variable", "Variables")}} sind Container, in denen Werte gespeichert werden können. Zunächst wird eine Variable mit dem Schlüsselwort <code>var </code>deklariert, gefolgt von irgendeinem Namen, unter dem diese Variable adressiert werden soll:</p>
+
+<pre class="brush: js">var myVariable;</pre>
+
+<div class="note">
+<p><strong>Anmerkung</strong>:  Jede Befehlszeile in JavaScript muss mit einem Semikolon abgeschlossen werden, um das Ende der Befehlszeile zu markieren. Tun Sie dies nicht, erwarten Sie unerwartete Ergebnisse.</p>
+</div>
+
+<div class="note">
+<p><strong>Anmerkung</strong>:  Sie können eine Variable fast beliebig benennen, allerdings gibt es einige Restriktionen zu beachten (siehe <a href="http://www.codelifter.com/main/tips/tip_020.shtml">diesen Artikel über die Regeln von Benennung von Variablen</a>.)  Wenn Sie unsicher sind, können Sie <a href="https://mothereff.in/js-variables">den Variablennamen prüfen</a>, um die Gültigkeit zu prüfen.</p>
+</div>
+
+<div class="note">
+<p><strong>Anmerkung</strong>: JavaScript beachtet Groß-/Kleinschrift  — <code>myVariable</code> ist unterschiedlich zur Variablen <code>myvariable</code>. Falls Sie in Ihrem Programmcode Probleme bekommen sollten, prüfen Sie zuerst die Groß-/Kleinschreibung! </p>
+</div>
+
+<p>Nachdem eine Variable deklariert wurde, können Sie ihr einen Wert geben:</p>
+
+<pre class="brush: js">myVariable = 'Bob';</pre>
+
+<p>Beide Schritte (Variable deklarieren und ihr einen Wert zuweisen) können in einem Schritt zusammengefasst werden: </p>
+
+<pre class="brush: js">var myVariable = 'Bob';</pre>
+
+<p>Sie können den Wert der Variablen abrufen, indem der Variablenname aufgerufen wird: </p>
+
+<pre class="brush: js">myVariable;</pre>
+
+<p>Nachdem der Variablen ein Wert gegeben wurde, kann dieser später geändert werden:</p>
+
+<pre>var myVariable = 'Bob';
+myVariable = 'Steve';</pre>
+
+<p>Beachten Sie, dass Variablen unterschiedliche <a href="/en-US/docs/Web/JavaScript/Data_structures">Datentypen</a> aufweisen:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">Variable</th>
+   <th scope="col">Erklärung</th>
+   <th scope="col">Beispiel</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">{{Glossary("String")}}</th>
+   <td>Ein String mit Text. Um zu zeigen, dass es sich hier um einen String handelt, sollten Sie diesen in Anführungszeichen setzen.</td>
+   <td><code>var myVariable = 'Bob';</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Number")}}</th>
+   <td>Eine Nummer. Nummern werden nicht in Anführungszeichen eingebettet.</td>
+   <td><code>var myVariable = 10;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Boolean")}}</th>
+   <td>Ein wahr/falsch (true/false) Wert. Die Worte <code>true</code> und <code>false</code> sind spezielle Schlüsselworte in JS und erfordern daher keine Anführungszeichen</td>
+   <td><code>var myVariable = true;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Array")}}</th>
+   <td>
+    <p>Eine Struktur, die Ihnen erlaubt, mehrere Werte in einer einzigen Referenz zu speichern.</p>
+   </td>
+   <td><code>var myVariable = [1,'Bob','Steve',10];</code><br>
+    Bezieht sich auf jedes Mitglied des arrays wie dieses:<br>
+    <code>myVariable[0]</code>, <code>myVariable[1]</code>, etc.</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Object")}}</th>
+   <td>
+    <p>Grundsätzlich alles. Alles in JavaScript ist ein Objekt und kann in einer Variablen gespeichert werden. Behalten Sie dies im Gedächtnis, während Sie lernen.</p>
+   </td>
+   <td><code>var myVariable = document.querySelector('h1');</code><br>
+    Und ebenso alle der obigen Beispiele.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Warum werden Variablen benötigt? Nun, Variablen werden benötigt, um alles Interessante beim Programmieren abzudecken. Wenn sich Werte nicht ändern könnten, dann könnte nichts Dynamisches geschaffen werden, wie zum Beispiel eine Willkommensmeldung zu personalisieren oder ein Bild, das in einer Bildgallerie angezeigt wird.</p>
+
+<h3 id="Kommentare">Kommentare</h3>
+
+<p>Sie können Kommentare in JavaScript-Code genauso einfügen, wie in CSS:</p>
+
+<pre class="brush: js">/*
+Alles hier drin ist ein Kommentar.
+*/</pre>
+
+<p>Enthält der Kommentar keine Zeilenumbrüche, dann ist es oft leichter, ihn hinter zwei Schrägstrichen zu platzieren:</p>
+
+<pre class="brush: js" style="font-size: 14px;">// Dies ist ein Kommentar
+</pre>
+
+<h3 id="Operatoren">Operatoren</h3>
+
+<p>Ein {{Glossary("operator")}} ist ein mathematisches Symbol, das ein Ergebnis erzeugt, das auf zwei Werten (oder Variablen) basiert. In der folgenden Tabelle sehen Sie einige der einfachsten Operatoren, gefolgt von einigen Beispielen, die Sie in der JavaScript Konsole ausprobieren können. </p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">Operator</th>
+   <th scope="col">Erklärung</th>
+   <th scope="col">Symbol(e)</th>
+   <th scope="col">Beispiel</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">addieren/verbinden</th>
+   <td>Wird verwendet, um zwei Zahlen zu addieren, oder zwei Strings zusammenzusetzen.</td>
+   <td><code>+</code></td>
+   <td><code>6 + 9;<br>
+    "Hello " + "world!";</code></td>
+  </tr>
+  <tr>
+   <th scope="row">subtrahieren, multiplizieren, teilen </th>
+   <td>Verhalten sich so, wie aus der Mathematik bekannt.</td>
+   <td><code>-</code>, <code>*</code>, <code>/</code></td>
+   <td><code>9 - 3;<br>
+    8 * 2; // in JS ist der Multiplikationsoperator ein Stern<br>
+    9 / 3;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Zuweisungsoperator</th>
+   <td>Sie haben dies bereits gesehen: Ein Wert wird einer Variablen zugeordnet</td>
+   <td><code>=</code></td>
+   <td><code>var myVariable = 'Bob';</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Gleichheitsoperator</th>
+   <td>
+    <p>Prüft zwei Werte auf Gleichheit und liefert <code>true</code>/<code>false</code> (Boolean) als Ergebnis</p>
+   </td>
+   <td><code>===</code></td>
+   <td><code>var myVariable = 3;<br>
+    myVariable === 4;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Verneinung, ungleich</th>
+   <td>
+    <p>Liefert als Ergebnis das logische Gegenteil; dreht ein <code>true</code> in ein <code>false, </code>etc. In Verbindung mit dem Gleichheitsoperator wird geprüft, ob zwei Werte ungleich sind.</p>
+   </td>
+   <td><code>!</code>, <code>!==</code></td>
+   <td>
+    <p>Der Basis-Ausdruck ist <code>true</code>, aber der Vergleich liefert <code>false</code> weil er negiert wurde:</p>
+
+    <p><code>var myVariable = 3;<br>
+     !(myVariable === 3);</code></p>
+
+    <p>Hier wird geprüft, ob <code>myVariable</code> ungleich 3 ist. Der Rückgabewert ist <code>false, weil myVariable </code>den Wert 3 aufweist.</p>
+
+    <p><code><code>var myVariable = 3;</code><br>
+     myVariable !== 3;</code></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Es gibt noch viele weitere Operatoren zu entdecken, aber es reicht für jetzt. Eine komplette Liste finden Sie in <a href="/en-US/docs/Web/JavaScript/Reference/Operators">Ausdrücke und Operatoren</a>.</p>
+
+<div class="note">
+<p><strong>Anmerkung</strong>: Das Vermischen von Datentypen kann bei Berechnungen unerwartete Ergebnisse liefern. Achten Sie darauf, die Variablen korrekt zu verwenden und prüfen Sie, ob das erwartete Ergebnis zurückgegeben wird. Tippen Sie beispielsweise "35" + "25" in die Konsole ein und schauen sich das Ergebnis an. Haben Sie dies erwartet? Aufgrund der Anführungszeichen werden die Werte als Strings behandelt und somit verbunden, statt addiert. Wenn Sie 35 + 25 eintippen, erhalten Sie das erwartete Ergebnis.</p>
+</div>
+
+<h3 id="Bedingungen">Bedingungen</h3>
+
+<p>Bedingungen sind Code-Strukturen, die Ihnen erlauben, zu prüfen, ob ein Ausdruck wahr oder falsch ist und in Abhängigkeit des Ergebnisses unterschiedlichen Code auszuführen. Die gebräuchlichste Art von Bedingungen sind <code>if ... else.</code> Zum Beispiel:</p>
+
+<pre class="brush: js">var eis = 'Schokolade';
+if (eis === 'Schokolade') {
+  alert('Yuhu, ich liebe Schokoladeneis!');
+} else {
+  alert('Awwww, ich mag lieber ein Schokoladeneis...');
+}</pre>
+
+<p>Der Ausdruck innerhalb des <code>if ( ... ) </code>ist der Test - dieser verwendet den Gleichheitsoperator (wie oben beschrieben), um die Variable <code>eis</code> mit dem String S<code>chokolade</code> zu vergleichen, um zu sehen, ob die Werte identisch sind. Liefert dieser Vergleich <code>true</code>, wird der erste Block des Codes ausgeführt. Wenn nicht, wird dieser Code übersprungen und der zweite Block nach dem <code>else</code> Befehl ausgeführt.</p>
+
+<h3 id="Funktionen">Funktionen</h3>
+
+<p>{{Glossary("Function", "Functions")}} ist ein Weg, um Funktionalitäten zusammenzupacken, die wiederverwendet werden sollen. Immer wenn die Funktionalität benötigt wird, wird die Funktion unter ihrem Namen aufgerufen, statt denselben Code immer wieder erneut schreiben zu müssen. Sie haben bereits einige Verwendungen von Funktionen gesehen, zum Beispiel:</p>
+
+<ol>
+ <li>
+  <pre class="brush: js">var myVariable = document.querySelector('h1');</pre>
+ </li>
+ <li>
+  <pre class="brush: js">alert('Hallo!');</pre>
+ </li>
+</ol>
+
+<p>Die Funktionen <code>document.querySelector</code> and <code>alert</code> sind in den Browser eingebunden, um benutzt zu werden, wann immer es passt.</p>
+
+<p>Wenn sie etwas sehen, das wie ein Variablenname aussieht, aber von runden Klammern — <code>()</code> — abgeschlossen ist, ist es möglicherweise eine Funktion. Funktionen nehmen oft {{Glossary("Argument", "arguments")}} auf, um die Funktionalität zu gewährleisten. Diese Argumente werden innerhalb der runden Klammern platziert und von Komma getrennt, wenn mehr als ein Argument übergeben wird.</p>
+
+<p>Beispielsweise erzeugt die Funktion <code>alert()</code> eine Pop-Up-Box  innerhalb des Browser-Fensters. Dieser Funktion muss ein String als Argument übergeben werden, um der Funktion mitzuteilen, was in diese Pop-Up-Box geschrieben werden soll.</p>
+
+<p>Die guten Nachrichten sind, dass Sie Ihre eigenen Funktionen definieren können. Im nächsten Beispiel schreiben wir eine einfache Funktion, die zwei Zahlen als Argumente aufnimmt und diese multipliziert:</p>
+
+<pre class="brush: js">function multiply(num1,num2) {
+  var result = num1 * num2;
+  return result;
+}</pre>
+
+<p>Versuchen Sie, diese Funktion in der Konsole auszuführen, dann versuchen Sie Ihre neue Funktion mehrmals aufzurufen:</p>
+
+<pre class="brush: js">multiply(4,7);
+multiply(20,20);
+multiply(0.5,3);</pre>
+
+<div class="note">
+<p><strong>Anmerkung</strong>: Das <a href="/en-US/docs/Web/JavaScript/Reference/Statements/return"><code>return</code></a> Kommando teilt dem Browser mit, die Variable <code>result</code> aus der Funktion zurückzuliefern. Somit ist es möglich, diese zu benutzen. Dies ist notwendig, weil Variablen, die innerhalb der Funktion verwendet werden, nur dort gültig sind. Diese Verhaltensweise wird {{Glossary("Scope", "scoping")}} genannt. (Lesen Sie <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Variable_scope">mehr über den Gültigkeitsbereich von Variablen</a>.)</p>
+</div>
+
+<h3 id="Ereignisse_Events">Ereignisse (Events)</h3>
+
+<p>Um wirkliche Interaktivität auf einer Website herzustellen, werden Ereignisse (events) benötigt - dieses sind Code-Strukturen, die auf Ereignisse achten, die im Browser geschehen und Ihnen dann erlauben, Code auszuführen, um auf diese Ereignisse zu reagieren. Das offensichtlichste Beispiel ist das <a href="/en-US/docs/Web/Events/click">Klick-Ereignis</a>, das vom Browser abgefeuert wird, wenn man mit dem Mauszeiger auf etwas klickt. Um dies zu zeigen, geben Sie den folgenden Code in die Konsole ein und klicken auf die aktuelle Webseite:</p>
+
+<pre class="brush: js">document.querySelector('html').onclick = function() {
+    alert('Hey! Nicht so viel klicken!');
+}</pre>
+
+<p>Es existieren viele Möglichkeiten, ein Ereignis mit einem Element zu verbinden. Hier wählen wir das Element HTML aus und setzen die Eigenschaft des <a href="/en-US/docs/Web/API/GlobalEventHandlers.onclick">onclick</a>-Handlers gleich einer anonymen (namenlosen) Funktion, die den Code enthält, den wir ausführen wollen, wenn das Ereignis geschieht.</p>
+
+<p>Beachten Sie, dass</p>
+
+<pre class="brush: js">document.querySelector('html').onclick = function() {};</pre>
+
+<p>gleichbedeutend ist mit</p>
+
+<pre class="brush: js">var myHTML = document.querySelector('html');
+myHTML.onclick = function() {};</pre>
+
+<p>Es ist nur kürzer.</p>
+
+<h2 id="Dynamische_Inhalte_für_unsere_Beispielwebseite">Dynamische Inhalte für unsere Beispielwebseite</h2>
+
+<p>Nun, da wir einige Grundlagen von JavaScript kennengelernt haben, lassen Sie uns einige dynamische Inhalte in Ihre erste Webseite einfügen, damit Sie sehen was mit JavaScript möglich ist.</p>
+
+<h3 id="Bilder_wechseln">Bilder wechseln</h3>
+
+<p>Wir werden der Webseite ein weiteres Bild hinzufügen. Mit etwas JavaScript-Code werden wir zwischen den beiden Bildern wechseln, wenn auf diese mit der Maus geklickt wird.</p>
+
+<ol>
+ <li>Suchen Sie sich zuerst ein zweites Bild für Ihre Webseite aus. Es sollte möglichst die selbe Größe haben, wie das Bild, das Sie schon auf der Webseite haben.</li>
+ <li>Speichern Sie dieses Bild in Ihrem <code>bilder</code>-Ordner.</li>
+ <li>Ändern Sie den Namen des Bildes in etwas, das Sie sich leicht merken können, wir haben es <code>'firefox2.png'</code> genannt.</li>
+ <li>Gehen Sie in Ihre <code>main.js</code> Datei und geben den folgenden JavaScript-Code ein: (Löschen Sie das "hello world"-Beispiel von oben)
+  <pre class="brush: js">var myImage = document.querySelector('img');
+
+myImage.onclick = function() {
+    var mySrc = myImage.getAttribute('src');
+    if(mySrc === 'bilder/firefox-icon.png') {
+      myImage.setAttribute ('src','bilder/firefox2.png');
+    } else {
+      myImage.setAttribute ('src','bilder/firefox-icon.png');
+    }
+}</pre>
+ </li>
+ <li>Speichern Sie alle Dateien und laden Sie <code>index.html</code> in Ihrem Browser. Wenn Sie jetzt auf das Bild klicken, sollte es sich ändern!</li>
+</ol>
+
+<p>Wir erstellen die Variable <code>myImage</code> und speichern in dieser eine Referenz zu unserem Bild-Element(<code>img</code>). Als nächstes setzen wir das <code>onclick</code>-Event dieser Variablen gleich mit einer Funktion ohne Namen (einer<em>anonymen</em> Funktion). In dieser Funktion steht, was jedes mal passieren soll, wenn auf das Bild geklickt wird:</p>
+
+<ol>
+ <li>Wir holen uns den Wert des <code>src</code> Attributes von unserem Bild.</li>
+ <li>Wir benutzen eine <code>if</code>-Bedingung, um zu überprüfen ob der <code>src</code>-Wert derselbe ist, wie der Pfad unseres original Bildes:
+  <ol>
+   <li>Wenn die Bedingung wahr ist, ändern wir den <code>src</code>-Wert in den Pfad des zweiten Bildes, so das dieses Bild nun in unser {{htmlelement("image")}}-Element geladen wird.</li>
+   <li>Wenn die Bedingung falsch ist (das Bild also schon angeklickt und geändert wurde), ändern wir den <code>src</code>-Wert wieder in den Pfad des ersten Bildes, so das bei erneutem Klick mit der Maus das Originalbild wieder erscheint.</li>
+  </ol>
+ </li>
+</ol>
+
+<h3 id="Ein_persönlicher_Willkommensgruß">Ein persönlicher Willkommensgruß</h3>
+
+<p>Als nächstes fügen wir unserer Webseite einen persönlichen Willkommensgruß hinzu, welcher vom Benutzer beim ersten Besuch der Seite geändert werden kann. Die Änderung soll auch erhalten bleiben, wenn der Benutzer die Seite verlässt und später wieder zurück kommt. Wir werden auch eine Option haben, den Nutzer zu ändern, so das der Gruß dementsprechend geändert wird.</p>
+
+<ol>
+ <li>In der <code>index.html</code>-Datei fügen Sie direkt vor dem {{htmlelement("script")}} Element folgende Code-Zeile ein:
+
+  <pre class="brush: html">&lt;button&gt;Name ändern&lt;/button&gt;</pre>
+ </li>
+ <li>In <code>main.js</code> fügen Sie den folgenden Code am Ende hinzu. Achten Sie darauf, das Ihr Code genauso aussieht wie hier gezeigt. Damit erstellen wir zwei neue Variablen und speichern in der Ersten eine Referenz zu unserem neu erstellten button und in der Zweiten zu unserer Hauptüberschrift auf der Webseite:
+  <pre class="brush: js">var myButton = document.querySelector('button');
+var myHeading = document.querySelector('h1');</pre>
+ </li>
+ <li>Fügen Sie nun die folgende Funktion ein. Diese erstellt den personalisierten Willkommensgruß. Jetzt macht diese Funktion noch nichts, aber wir werden sie gleich benutzen:
+  <pre class="brush: js">function setUserName() {
+  var myName = prompt('Bitte geben Sie Ihren Namen ein.');
+  localStorage.setItem('name', myName);
+  myHeading.textContent = 'Mozilla ist cool, ' + myName;
+}</pre>
+  Innerhalb der Funktion wird in der ersten Zeile die neue Variable <code>myName</code> erstellt, in welcher der Name des Benutzers gespeichert werden soll. Der Name des Benutzers wird mit der <a href="/de/docs/Web/API/Window.prompt"><code>prompt()</code></a>-Funktion erfragt - es öffnet sich eine Dialogbox, ähnlich wie bei der <code>alert()</code>-Funktion, in welcher der Benutzer seinen Namen eingeben kann und mit einem klick auf <strong>OK</strong> bestätigen kann. Als nächstes Rufen wir eine API namens <code>localStorage</code> auf, mit welcher wir Daten im Browser speichern und später darauf zurückgreifen können. Wir nutzen die s<code>etItem()</code>-Funktion von <code>localStorage</code>, um ein Datenobjekt mit dem Namen <code>'name'</code> zu erstellen und setzen für den Wert die Variable <code>myName</code> ein, welche den Namen enthält, den der Benutzer eingegeben hat. Als letztes ersetzen wir den Textinhalt (<code>textContent</code>) von <code>myHeading</code> mit unserem Gruß welcher den Namen des Benutzers beinhaltet.</li>
+ <li>Fügen Sie als nächstes diesen <code>if ... else</code> Block hinzu — dies ist der Initialisierungscode, mit welchem wir unsere App aufsetzen, wenn sie das erste mal geladen wird:
+  <pre class="brush: js">if(!localStorage.getItem('name')) {
+  setUserName();
+} else {
+  var storedName = localStorage.getItem('name');
+  myHeading.textContent = 'Mozilla ist cool, ' + storedName;
+}</pre>
+  Dieser Code-Block benutzt eine logische Verneinung, um zu überprüfen ob es schon einen gespeicherten Namen gibt. Wenn der Name nicht existiert, dann wird die Funktion <code>setUserName()</code> aufgerufen, um einen Namen zu bekommen. Wenn der Name existiert, der Benutzer also diesen schon bei einem vorherigen Besuch der Webseite angegeben hat, dann wird der gespeicherte Name mit der <code>getItem()</code>-Funktion geladen, in der Variablen <code>storedName</code> gespeichert und dem String für den Willkommensgruß hinzugefügt.</li>
+ <li>Als letztes fügen wir unserem Button den unten stehenden <code>onclick</code>-Eventhandler hinzu, welcher die <code>setUserName()</code>-Funktion aufruft. Damit kann der Benutzer den Namen jederzeit ändern, wenn er auf den Button drückt:
+  <pre class="brush: js">myButton.onclick = function() {
+  setUserName();
+}
+</pre>
+ </li>
+</ol>
+
+<p>Wenn Sie Ihre Seite jetzt im Browser aufrufen, werden Sie beim ersten Besuch nach Ihrem Namen gefragt und der Willkommensgruß wird personalisiert. Sie können den Namen jederzeit ändern, indem Sie auf den Button drücken. Der personalisierte Willkommensgruß wird auch wieder angezeigt, wenn Sie die Seite verlassen und danach wieder aufrufen, da der Name in <code>localStorage</code>, im Browser, gespeichert wird!</p>
+
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+
+<p>Wenn Sie der Anleitung in diesem Artikel gefolgt sind, dann sollten Sie jetzt eine Webseite besitzen die ähnlich aussieht, wie diese hier (<a href="https://mdn.github.io/beginner-html-site-scripted/">sehen Sie sich unsere Version an</a>):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15477/beginner-js2-de.jpg"></p>
+
+<p>Wenn Sie nicht das selbe Resultat haben und keine Lösung finden (probieren Sie es erst selbst hinzubekommen), dann können Sie sich <a href="https://github.com/mdn/beginner-html-site-scripted/blob/gh-pages/scripts/main.js">unseren Code auf Github anschauen</a>.</p>
+
+<p>Hier haben wir nur einige Grundlagen und Beispiele von JavaScript gezeigt. Wenn es Sie interessiert, lernen Sie mehr über JavaScript in unserem <a href="/de/docs/Web/JavaScript/Guide">JavaScript Guide</a>.</p>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div>
diff --git a/files/de/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/de/learn/getting_started_with_the_web/publishing_your_website/index.html
new file mode 100644
index 0000000000..897af0bb0f
--- /dev/null
+++ b/files/de/learn/getting_started_with_the_web/publishing_your_website/index.html
@@ -0,0 +1,111 @@
+---
+title: Ihre Webseite veröffentlichen
+slug: Learn/Getting_started_with_the_web/Publishing_your_website
+tags:
+  - Anfänger
+  - FTP
+  - GitHub
+  - Lernen
+  - Web
+  - WebServer
+  - Webseite
+  - veröffentlichen
+translation_of: Learn/Getting_started_with_the_web/Publishing_your_website
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>Wenn Sie Ihre Webseite fertig haben, den ganzen Code geschrieben und die Dateien organisiert haben, dann ist es Zeit Ihre Webseite online zu stellen. In diesem Artikel lernen Sie, wie Sie Ihre neue Webseite, die Sie in den letzten Artikeln erstellt haben, online für alle zugänglich machen.</p>
+</div>
+
+<h2 id="Was_sind_Ihre_Optionen">Was sind Ihre Optionen?</h2>
+
+<p>Eine Webseite online zu stellen, das ist kein einfaches Thema, hauptsächlich deswegen, da es viele verschiedene Wege gibt dies zu tun. In diesem Artikel werden wir nicht alle Möglichkeiten vorstellen. Wir werden drei Strategien vorstellen und die Vorteile und Nachteile jeder dieser Wege erläutern und für unsere Beispielwebseite einen Weg genau beschreiben, dem jeder Anfänger folgen kann.</p>
+
+<h3 id="Hosting_und_eine_eigene_Domain">Hosting und eine eigene Domain</h3>
+
+<p>Wenn Sie die volle Kontrolle über Ihre veröffentlichte Webseite haben wollen, werden Sie ein wenig Geld in die Hand nehmen müssen, um folgendes zu kaufen:</p>
+
+<ul>
+ <li>Hosting — man mietet Datenplatz auf dem <a href="/de/Learn/What_is_a_web_server">Webserver</a> einer Hosting-Firma. Sie laden Ihre Dateien auf den Webserver und dieser bringt die Webseite weiter zu den Benutzern, die auf die Webseite zugreifen möchten.</li>
+ <li>Eine <a href="/de/Learn/Understanding_domain_names">Domain</a> — dies ist die einzigartige Adresse, unter welcher Ihre Webseite findbar ist, wie <code>http://www.mozilla.org</code>, oder <code>http://www.tagesschau.de</code>. Sie mieten die Domain für so und soviel Jahre von einem Domainregister.</li>
+</ul>
+
+<p>Viele professionelle Webseiten nutzen diesen Weg, um online zu gehen.</p>
+
+<p>Zusätzlich benötigen Sie ein {{Glossary("FTP", "File Transfer Protocol (FTP)")}} Programm, um ihre Dateien von ihrem Rechner auf den Webserver zu übertragen. FTP Programme unterscheiden sich in ihrer Funktionalität, aber normalerweise müssen Sie sich mit den Daten des Webservers einloggen, welche Sie von der Hosting-Firma bekommen (Username, Passwort, Hostname, etc.). Das Programm zeigt ihnen in einem Fenster die Dateien auf ihrem lokalen Computer und in einem zweiten die Dateien auf dem Webserver und Sie können Dateien hin und her schieben:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9469/ftp.jpg" style="display: block; height: 487px; margin: 0px auto; width: 800px;"></p>
+
+<h4 id="Tipps_um_Hosting_und_Domain_zu_finden">Tipps um Hosting und Domain zu finden</h4>
+
+<ul>
+ <li>Wir promoten hier keine bestimmten, kommerziellen Hosting-Firmen oder Domainregisterstellen, es gibt sehr zahlreiche Anbieter. Suchen Sie einfach nach "web hosting" und "Domain registrieren". Sie werden immer erst kontrollieren können, ob die gewünschte Domain frei ist oder ob sie schon von jemand anderem registriert wurde.</li>
+ <li>Es gibt einige kostenlose Angebote, zum Beispiel <a href="https://www.lima-city.de/">lima-city.de</a>, <a href="https://neocities.org/">Neocities</a>, <a href="https://www.blogger.com">Blogger</a> und <a href="https://wordpress.com/">WordPress</a>. Oft ist es so das kleine Webseiten, mit wenigen Besuchern, kostenlos gehostet werden können, wenn sie aber größere Projekte haben, gibt es Zusatzkosten. Einige dieser Anbieter funktionieren ohne FTP-Programme und sind sehr einsteigerfreundlich.</li>
+ <li>Oft bieten Hosting-Anbieter auch einen Domain-Service an.</li>
+</ul>
+
+<h3 id="Mit_GitHub_oder_Google_App_Engine">Mit GitHub oder Google App Engine</h3>
+
+<p>Es gibt Tools mit denen Sie Webseiten veröffentlichen können:</p>
+
+<ul>
+ <li><a href="https://github.com/">GitHub </a> ist eine Seite, auf der man zusammen mit anderen an Code arbeiten kann. Es erlaubt das Hochladen von Projektarchiven, um diese in dem <a href="http://git-scm.com/">Git</a> <strong>Versionskontrollsystem</strong> zu speichern. Diese Projektarchive sind online von anderen einsehbar und können bearbeitet werden. Das System ist Open-Source, das heißt, jeder in der Welt kann in Ihre Projektarchive auf GitHub schauen, Ihren Code finden, diesen Benutzen, von Ihrem Code lernen und ihn verbessern. GitHub hat eine Funktion namens <a href="https://pages.github.com/">GitHub Pages</a>, mit der man Webseiten-Code live ins Web schalten kann.</li>
+ <li><a href="https://cloud.google.com/appengine/" title="App Engine - Build Scalable Web &amp; Mobile Backends in Any Language  |  Google Cloud Platform">Google App Engine</a> ist eine mächtige Plattform mit Google's Infrastruktur, auf der Sie Apps erstellen und laufen lassen können. Ob Sie eine große Web Applikation aufbauen wollen oder eine statische Webseite hosten möchten. Mehr dazu finden Sie hier auf Englisch: <a href="/en-US/docs/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">How do you host your website on Google App Engine?</a></li>
+</ul>
+
+<p>Im Gegensatz zu anderen Anbietern sind diese Tools meist kostenlos, allerdings auch limitierend.</p>
+
+<h3 id="Nutzen_einer_Online-Entwicklungsumgebung">Nutzen einer Online-Entwicklungsumgebung</h3>
+
+<p>Es gibt einige Webapplikationen, welche eine Webseiten Entwicklungsumgebung simulieren und Ihnen die Möglichkeit geben HTML, CSS und JavaScript in Ihrem Browser einzugeben und direkt das Resultat anzuzeigen. Das ganze funktioniert in nur einem Browsertab. Diese Werkzeuge sind einfach zu nutzen und super, um damit zu lernen. Sie sind kostenlos in ihrer Basisversion und Ihre dort erstellte Webseite wird direkt unter einer Webadresse gehostet. Allerdings haben diese Online Entwicklungsumgebungen auch ihre Nachteile, so können oft keine zusätzlichen Dateien, wie Bilder oder Videos, gehostet werden.</p>
+
+<p>Schauen Sie sich einige dieser Beispiele an und finden Sie heraus was für Sie funktioniert:</p>
+
+<ul>
+ <li><a href="https://jsfiddle.net/">JSFiddle</a></li>
+ <li><a href="https://thimble.mozilla.org">Thimble</a></li>
+ <li><a href="http://jsbin.com/">JS Bin</a></li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9471/jsbin-screen.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></p>
+
+<h2 id="Veröffentlichen_mit_GitHub">Veröffentlichen mit GitHub</h2>
+
+<p>Wir werden nun gemeinsam Ihre Webseite im Internet veröffentlichen. Hier nutzen wir dafür GitHub Pages.</p>
+
+<ol>
+ <li>Als erstes, <a href="https://github.com/">melden Sie sich bei GitHub </a> an und verifizieren Sie Ihe Email Adresse.</li>
+ <li>Als nächstes erstellen Sie ein<a href="https://github.com/new"> repository</a> (Datenarchiv) in welches Ihre Dateien von der Webseite gehen werden.</li>
+ <li>Auf dieser Seite geben Sie in die <em>Repository name</em> Box<em> username</em>.github.io ein, wobei <em>username</em> Ihr Username ist. Zum Beispiel würde maxmustermann hier <em>maxmustermann.github.io</em> eingeben.<br>
+  Aktivieren Sie auch <em>Initialize this repository with a README</em> und klicken dann auf <em>Create repository</em>.<img alt="" src="https://mdn.mozillademos.org/files/9479/github-create-repo.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></li>
+ <li>Danach können Sie Inhalte einfach mit der Maus in Ihr Datenarchiv ziehen und dann auf <em>Commit changes</em> klicken.<br>
+
+  <div class="note">
+  <p><strong>Notiz</strong>: Gehen Sie sicher das Ihr Ordner eine <em>index.html</em> Datei hat.</p>
+  </div>
+ </li>
+ <li>
+  <p>Jetzt gehen Sie in einem neuen Fenster in Ihrem Browser<em> username</em>.github.io um Ihre Webseite online anzusehen. Als Beispiel können Sie auf folgende GitHub Webseite gehen: <a href="http://chrisdavidmills.github.io/">chrisdavidmills.github.io</a>.</p>
+
+  <div class="note">
+  <p><strong>Notiz</strong>: Es dauert eventuell ein paar Minuten bis Ihre Webseite live geschaltet ist. Wenn sie diese nicht sofort sehen, warten Sie ein wenig und probieren es nach einiger Zeit noch einmal.</p>
+  </div>
+ </li>
+</ol>
+
+<p>Um mehr zu lernen gehen Sie zu <a href="https://help.github.com/categories/github-pages-basics/">GitHub Pages Help</a>.</p>
+
+<h2 id="Weiterer_Lesestoff_(in_englisch)">Weiterer Lesestoff (in englisch)</h2>
+
+<ul>
+ <li><a href="/en-US/Learn/What_is_a_web_server">What is a web server</a></li>
+ <li><a href="/en-US/Learn/Understanding_domain_names">Understanding domain names</a></li>
+ <li><a href="/en-US/Learn/How_much_does_it_cost">How much does it cost to do something on the web?</a></li>
+ <li><a href="https://www.codecademy.com/learn/deploy-a-website">Deploy a Website</a>: A nice tutorial from Codecademy that goes a bit further and shows some additional techniques.</li>
+ <li><a href="http://alignedleft.com/resources/cheap-web-hosting">Cheap or Free Static Website Hosting</a> by Scott Murray has some useful ideas on available services.</li>
+</ul>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</div>
diff --git a/files/de/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/de/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html
new file mode 100644
index 0000000000..065000788d
--- /dev/null
+++ b/files/de/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html
@@ -0,0 +1,119 @@
+---
+title: Wie soll Ihre Webseite aussehen?
+slug: Learn/Getting_started_with_the_web/What_will_your_website_look_like
+tags:
+  - Anfänger
+  - Beginner
+  - Design
+  - Fonts
+  - Inhalte
+  - Lernen
+  - Planung
+  - Schriftarten
+translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/dateien_nutzen", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p><em>»Wie soll Ihre Webseite aussehen?</em>« behandelt die Planungs- und Designarbeit, die Sie machen, <em>bevor</em> Sie anfangen Code zu schreiben. Dazu gehören Fragestellungen wie "Welche Informationen soll meine Webseite bereitstellen?", "Welche Schriftarten und Farben will ich nutzen?" und "Was soll meine Seite tun?"</p>
+</div>
+
+<h2 id="Das_wichtigste_zuerst_Planen">Das wichtigste zuerst: Planen</h2>
+
+<p>Bevor Sie irgendwas machen, brauchen Sie eine Idee. Was soll Ihre Webseite eigentlich machen? Eine Webseite, die Sie schreiben, könnte alles machen, was Sie aus dem Internet kennen, aber für den Anfang sollten Sie es einfach halten. Wir werden eine einfache Webseite erstellen mit einem Bild, einer Überschrift und ein paar Absätzen.</p>
+
+<p>Am Anfang sollten Sie sich folgende Fragen beantworten:</p>
+
+<ol>
+ <li><strong>Worum geht es auf Ihrer Webseite? </strong>Mögen Sie Hunde, Berlin oder Pacman?</li>
+ <li><strong>Welche Informationen zeigen Sie zu Ihrem Thema? </strong>Schreiben Sie einen Titel und ein paar Absätze dazu und überlegen Sie sich, wie Sie das Thema visualisieren möchten, z.B. mit einer Grafik oder einem Bild.</li>
+ <li><strong>Wie soll Ihre Webseite aussehen?</strong> (Schlagworte genügen)  Welche Farben und Farbkombinationen möchten Sie nutzen? Welche Schriftart ist geeignet: formal, comicartig, plakativ oder subtil?</li>
+</ol>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Komplexe Projekte benötigen detailierte Richtlinien die alle Einzelheiten zu Farbe, Schrift, Abständen, Schreibstil etc. behandeln. Diese Richtlinien werden manchmal »Design Guide« oder »Brand Guide« genannt. Die <a href="https://www.mozilla.org/en-US/styleguide/products/firefox-os/">Firefox OS Guidelines </a>sind beispielsweise ein solches Dokument.</p>
+</div>
+
+<h2 id="Skizzieren_Sie_Ihr_Design">Skizzieren Sie Ihr Design</h2>
+
+<p>Benutzen Sie Stift und Papier, um grob aufzuzeichnen wie Ihre Seite aussehen soll. Wo soll das Bild hin und wo die Textinhalte? Wie groß soll die Überschrift sein?</p>
+
+<p>Bei Ihrer ersten Webseite gibt es nicht allzu viel zu zeichnen, aber Sie sollten es sich zur Gewohnheit machen, das Design der Webseite auszuarbeiten, bevor Sie anfangen, diese zu entwickeln. Das hilft bei der Planung und Ideenentwicklung – ein Künstler müssen Sie dafür nicht sein!</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9239/website-drawing-scan.png" style="display: block; height: 460px; margin: 0px auto; width: 640px;"></p>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Sogar bei echten, komplexen Webseiten beginnt das Designteam meist mit groben Skizzen auf Papier. Später werden dann digitale Mockups in einem Grafikprogramm oder mit Webtechnologien umgesetzt.</p>
+
+<p>Web Teams umfassen oft sowohl einen Grafikdesigner, als auch einen User Experience (UX) Designer. Grafikdesigner gestalten das Aussehen der Webseite. UX-Designer haben eine abstraktere Aufgabe: Sie gestalten die Erfahrung und Interaktion der Nutzer.</p>
+</div>
+
+<h2 id="Inhalte_und_Aussehen_bestimmten">Inhalte und Aussehen bestimmten</h2>
+
+<p>Jetzt können Sie die Inhalte der Webseite zusammenstellen, also die Dinge, welche letztendlich auf Ihrer Webseite zu sehen sein werden.</p>
+
+<h3 id="Text">Text</h3>
+
+<p>Sie haben vermutlich immer noch die Überschriften und Absätze, die Sie zuvor geschrieben haben – benutzen Sie diese als erste Textinhalte.</p>
+
+<h3 id="Hauptfarbe">Hauptfarbe</h3>
+
+<p>Um eine Farbe auszuwählen, nutzen Sie den <a href="https://www.w3schools.com/colors/colors_picker.asp">Farbwähler</a> und suchen sich eine Farbe aus. Wenn Sie auf eine Farbe klicken, bekommen Sie einen seltsamen Sechs-Zeichen-Code (z.B. #660066). Das ist ein <em>Hex(adezimal)-Code</em> und er repräsentiert eine bestimmte Farbe. Speichern Sie diesen Farbcode ab oder schreiben Sie ihn irgendwo auf. </p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8975/Screenshot%20from%202014-11-03%2017:40:49.png" style="height: 262px; width: 448px;"></p>
+
+<h3 id="Bilder">Bilder</h3>
+
+<p>Um ein Bild auszuwählen, gehen Sie auf <a href="https://images.google.com/">Google Images </a>oder <a href="https://www.flickr.com/search/advanced/">Flickr </a>und suche nach einem passenden Bild.</p>
+
+<div class="note"><strong>Achtung</strong>: Die meisten Bilder im Internet sind urheberrechtlich geschützt. Das heißt, man darf sie nicht einfach nutzen – auch wenn die Bilder im Internet ohne Probleme anzuschauen sind und man die Bilder speichern kann.<br>
+<br>
+So findet man Bilder, die man nutzen darf:<br>
+- Wähle bei <a href="https://images.google.com/">Google Images</a> "Nutzungsrechte"/"Zur Wiederverwendung gekennzeichnet"<br>
+- Wähle bei <a href="https://www.flickr.com/search/advanced/">Flickr</a> "<label>Only search within <strong>Creative Commons</strong>-licensed content</label>" aus.<br>
+In beiden Fällen muss man den Namen des Urhebers zitieren.<br>
+Mehr zum Urheberrecht auf <a href="http://irights.info/kategorie/themen/fotos-grafiken">irights.com</a></div>
+
+<p>Haben Sie ein Bild gefunden, das Sie nutzen möchten, machen Sie folgendes bei Google Images:</p>
+
+<ol>
+ <li>Klicken Sie auf das Bild.</li>
+ <li>Wählen Sie "Bild ansehen".</li>
+ <li>Klicken Sie mit der rechten Maustaste auf das Bild und wählen Sie "Grafik speichern unter…" oder kopieren Sie die Internetaddresse des Bildes und speichern diese ab.</li>
+</ol>
+
+<p>Bei Flickr</p>
+
+<ol>
+ <li>Klicken Sie auf ein Bild.</li>
+ <li>Klicken Sie "Download this Photo" und wählen Sie eine passende Größe aus.</li>
+</ol>
+
+
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8985/Screenshot%20from%202014-11-04%2015:09:21.png" style="height: 293px; width: 420px;"></p>
+
+
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8989/Screenshot%20from%202014-11-04%2015:20:48.png" style="height: 292px; width: 340px;"></p>
+
+<h3 id="Schriftart">Schriftart</h3>
+
+<p>Eine Schrift auswählen:</p>
+
+<ol>
+ <li>Gehen Sie auf <a href="http://www.google.com/fonts">Google Fonts</a> und scrollen Sie durch die Liste bis Sie eine Schriftart entdecken, welche Sie mögen. Sie können auch die Filter auf der rechten Seiten nutzen, um die Auswahl zu filtern.</li>
+ <li>Klicken Sie den "<em>+</em>" Button bei der gewünschten Schriftart.</li>
+ <li>Es erscheint eine Popup-Box. Klicken Sie auf den <em>"* Family Selected" </em>Button im unteren Bereich der Seite. ("*" abhängig davon wieviele Fonts man ausgewählt hat).</li>
+ <li>In der Popup-Box stehen jetzt zwei Codes. Diese können Sie kopieren und in einem beliebigen Texteditor für später speichern.</li>
+</ol>
+
+<p><img alt="new version" src="https://mdn.mozillademos.org/files/14577/google_fonts(1).gif" style="height: 328px; width: 670px;"></p>
+
+
+
+<p><img alt="picture with 2 codes of google fonts" src="https://mdn.mozillademos.org/files/14579/google_fonts(2).gif" style="height: 325px; width: 668px;"></p>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</div>
diff --git a/files/de/learn/getting_started_with_the_web/wie_das_internet_funktioniert/index.html b/files/de/learn/getting_started_with_the_web/wie_das_internet_funktioniert/index.html
new file mode 100644
index 0000000000..7b5dfbc541
--- /dev/null
+++ b/files/de/learn/getting_started_with_the_web/wie_das_internet_funktioniert/index.html
@@ -0,0 +1,100 @@
+---
+title: Wie das Internet funktioniert
+slug: Learn/Getting_started_with_the_web/Wie_das_Internet_funktioniert
+tags:
+  - Anfänger
+  - Client
+  - DNS
+  - HTTP
+  - IP
+  - Infrastruktur
+  - Internet
+  - Lernen
+  - Server
+  - TCP
+  - Web
+translation_of: Learn/Getting_started_with_the_web/How_the_Web_works
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p><em>Wie das Internet funktioniert</em> gibt eine vereinfachte Übersicht darüber, was passiert, wenn Sie eine Webseite in einem Webbrowser auf Ihrem Computer oder auf Ihrem Smartphone aufrufen.</p>
+</div>
+
+<p>Dieser Artikel ist sehr theoretisch und ist für den Anfang nicht essentiell um Code für Webseiten zu schreiben, aber nach einiger Zeit werden Sie feststellen, das es von Vorteil ist zu wissen, was im Hintergrund geschieht.</p>
+
+<h2 id="Client_und_Server">Client und Server</h2>
+
+<p>Computer welche über das Internet verbunden sind werden als Client oder als Server bezeichnet. Dieses Diagramm veranschaulicht, vereinacht, wie diese beiden Computer miteinander interagieren:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8973/Client-server.jpg" style="height: 123px; width: 336px;"></p>
+
+<ul>
+ <li>Als Client (engl.: Nutzer oder Kunde) werden die Computer bezeichnet, welche mit dem Internet verbunden sind und typischerweise von einem Benutzer genutzt werden. Zum Beispiel Ihr Computer der via Wi-Fi mit dem Netzwerk verbunden ist, oder ihr Smartphone das über ein mobiles Netzwerk verbunden ist. Auch die Software, welche auf Benutzerseite das Internet veranschaulicht, normalerweise Webbrowser wie Firefox oder Chome, wird als Client bezeichnet.</li>
+ <li>Server sind Computer, welche Webseiten, Dateien oder Apps speichern. Wenn ein clientseitiger Computer auf eine Webseite zugreifen möchte, wird eine Kopie dieser Webseite von dem Server heruntergeladen, um dann in dem Browser des Benutzers angezeigt zu werden.</li>
+</ul>
+
+<h2 id="Die_anderen_Teile_der_Werkzeugkiste">Die anderen Teile der Werkzeugkiste</h2>
+
+<p>Der Client und der Server, wie wir sie oben beschrieben haben sind nicht alles. Es gibt weitere Dinge, die involviert sind, um eine Webseite anzuzeigen und wir werden diese hier erläutern.</p>
+
+<p>Versuchen Sie sich vorzustellen, das Internet wäre eine Straße. An einem Ende der Straße ist der Client, was wie Ihr Haus sein könnte. An dem anderen Ende der Straße ist der Server, der wie ein Einkaufsladen ist, bei dem Sie etwas kaufen möchten.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9749/road.jpg" style="display: block; height: 427px; margin: 0px auto; width: 640px;"></p>
+
+<p>Auf dem Weg von Ihrem Haus zum Shop müssen Sie an einigen anderen Stellen vorbei und "Hallo" sagen:</p>
+
+<ul>
+ <li><strong>Ihre Internetverbindung</strong>: Erlaubt Ihnen Daten über das Internet zu senden und zu empfangen. Dies ist wie die eigentliche Straße auf der Sie entlang gehen, um von Ihrem Haus zum Laden zu gelangen.</li>
+ <li><strong>TCP/IP</strong>: Transmission Control Protocol und  Internet Protocol  sind Kommunikationsprotokolle, welche bestimmen wie Daten über das Internet übertragen werden. Dies ist vergleichbar mit dem Transportvehikel, mit dem Sie zu dem Laden kommen, welches ein Auto oder ein Fahrad oder ein anderes Fahrzeug sein könnte.</li>
+ <li><strong>DNS</strong>: Domain Name Servers sind wie ein Adressbuch für Internetseiten. Wenn Sie nach einer Internetadresse suchen, dann schaut der Browser auf dem DNS nach, um die wirkliche Adresse dieser Webseite zu finden. Der Browser muss herausfinden, auf welchem Server die Webseite liegt, damit er eine HTTP Anfrage an die richtige Stelle senden kann. Dies ist vergleichbar mit dem heraussuchen der Adresse des Geschäftes, in dem Sie einkaufen gehen wollen, damit Sie dieses auch finden.</li>
+ <li><strong>HTTP</strong>: Hypertext Transfer Protocol ist ein Applikations {{Glossary("Protocol" , "protocol")}} welches eine Sprache definiert mit welcher Client und Server miteinander kommunizieren können. Dies ist wie die Sprache, mit der Sie im Laden Ihre Bestellung machen.</li>
+ <li><strong>Zusätzliche Dateien</strong>: Eine Webseite wir aus verschiedenen Dateien zusammengesetzt, ähnlich wie sie aus verschiedenen Teilen aus dem Laden etwas sinnvolles bauen können. Diese Dateien kommen in zwei Haupttypen:
+  <ul>
+   <li><strong>Code Dateien</strong>: Webseiten sind hauptsächlich aus HTML, CSS, und JavaScript, aber es gibt noch weitere Möglichkeiten.</li>
+   <li><strong>Inhalte</strong>: Dies ist alles andere, was auf einer Webeite zu finden ist, wie Bilder, Musik, Videos, Word-Dokumente oder PDFs.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Was_passiert_jetzt_also_genau">Was passiert jetzt also genau?</h2>
+
+<p>Wenn Sie eine Internetadresse in Ihren Browser eintippen (wie wenn Sie zu dem Laden gehen):</p>
+
+<ol>
+ <li>Der Browser kontaktiert den DNS Server und findet die echte Adresse von derm Server auf dem die Webseite liegt (Sie finden die Adresse des Ladens).</li>
+ <li>Der Browser sendet eine HTTP-Anfrage an den Server und fragt nach einer Kopie der Webseite für den Client (Sie gehen zu dem Laden und bestellen Ihre Waren). Diese Nachricht und alle anderen Daten, welche zwischen Client und Server gesendet werden, nutzen Ihre Internetverbindung und nutzen TCP/IP für die Übertragung.</li>
+ <li>Wenn der Server die Anfrage entgegennimmt, sendet dieser an den Client eine "200 OK" Nachricht, welche soviel bedeutet wie "Natürlich können Sie sich die Webseite anschauen! Hier ist sie." Danach sendet der Server die Dateien der Webseite, in kleinen Datenpaketen, an den Browser.  (Im Laden bekommen Sie Ihre Waren und bringen diese nach Hause)</li>
+ <li>Im Browser werden die kleinen Datenpakete zusammengesetzt und zeigt Ihnen die komplette Webseite. (die Waren kommen bei Ihnen daheim an)</li>
+</ol>
+
+<h2 id="DNS_erklärt">DNS erklärt</h2>
+
+<p>Echte Webadressen sind keine schönen, leicht zu merkenden Strings, welche Sie in die Adressleiste Ihres Browsers eingeben, um Ihre Lieblingswebseiten zu finden. Es sind spezielle Nummern, welche so aussehen: 63.245.215.20.</p>
+
+<p>Dies ist eine {{Glossary("IP Address", "IP address")}} und repräsentiert eine einzigartige Adresse im Internet. Diese kann man sich aber nicht so leicht merken. Deswegen wurden Domain Name Server erfunden. Dies sind spezielle Server, welche zu der Adresse die Sie im Browser eintippen(z.B. "mozilla.org"), die richtige (IP) Adresse finden.</p>
+
+<p>Webseiten können direkt über ihre IP Adresse erreicht werden. Versuchen Sie es: Gehen Sie zur Mozilla Webseite, indem sie die folgende IP Adresse in der Adresszeile Ihres Browsers in einem neuen Tab eingeben: <code>63.245.215.20</code></p>
+
+<p><img alt="A domain name is just another form of an IP address" src="https://mdn.mozillademos.org/files/8405/dns-ip.png" style="height: 160px; width: 330px;"></p>
+
+<h2 id="Datenpakete_erklärt">Datenpakete erklärt</h2>
+
+<p>Vorhin haben wir das Wort "Datenpakete" genutzt, um zu beschreiben in welcher Form die Daten vom Server zum Client gelangen. Was ist damit gemeint? Wenn Daten über das Internet gesendet werden, dann wird es in tausenden von kleinen Stückchen geschickt, damit verschiedene Benutzer einer Webseite, diese zur selbern Zeit herunterladen können. Wenn Webseiten in einem großen Paket gesendet werden würde, dann könnte nur ein Benutzer auf einmal diese herunterladen, was das Internet nicht sehr effizient machen würde.</p>
+
+<h2 id="Lesen_Sie_weiter_(englisch)">Lesen Sie weiter (englisch)</h2>
+
+<ul>
+ <li><a href="/en-US/Learn/How_the_Internet_works">How the Internet works</a></li>
+ <li><a href="https://dev.opera.com/articles/http-basic-introduction/">HTTP — an Application-Level Protocol</a></li>
+ <li><a href="https://dev.opera.com/articles/http-lets-get-it-on/">HTTP: Let’s GET It On!</a></li>
+ <li><a href="https://dev.opera.com/articles/http-response-codes/">HTTP: Response Codes</a></li>
+</ul>
+
+<h2 id="Credit">Credit</h2>
+
+<p>Street photo: <a href="https://www.flickr.com/photos/kdigga/9110990882/in/photolist-cXrKFs-c1j6hQ-mKrPUT-oRTUK4-7jSQQq-eT7daG-cZEZrh-5xT9L6-bUnkip-9jAbvr-5hVkHn-pMfobT-dm8JuZ-gjwYYM-pREaSM-822JRW-5hhMf9-9RVQNn-bnDMSZ-pL2z3y-k7FRM4-pzd8Y7-822upY-8bFN4Y-kedD87-pzaATg-nrF8ft-5anP2x-mpVky9-ceKc9W-dG75mD-pY62sp-gZmXVZ-7vVJL9-h7r9AQ-gagPYh-jvo5aM-J32rC-ibP2zY-a4JBcH-ndxM5Y-iFHsde-dtJ15p-8nYRgp-93uCB1-o6N5Bh-nBPUny-dNJ66P-9XWmVP-efXhxJ">Street composing</a>, by <a href="https://www.flickr.com/photos/kdigga/">Kevin D</a>.</p>
+
+<div>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div>
diff --git a/files/de/learn/html/einführung_in_html/der_kopf_metadaten_in_html/index.html b/files/de/learn/html/einführung_in_html/der_kopf_metadaten_in_html/index.html
new file mode 100644
index 0000000000..f775774535
--- /dev/null
+++ b/files/de/learn/html/einführung_in_html/der_kopf_metadaten_in_html/index.html
@@ -0,0 +1,268 @@
+---
+title: Was gehört in den Kopf der HTML-Datei?
+slug: Learn/HTML/Einführung_in_HTML/Der_Kopf_Metadaten_in_HTML
+tags:
+  - Anfänger
+  - Beginner
+  - HTML
+  - Kopf
+  - Meta
+  - Metadaten
+  - Sprache
+  - Umlaute
+  - favicon
+  - head
+  - lang
+translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<p class="summary">Der Kopf (engl.: head) eines HTML Dokumentes, ist der obere Teil innerhalb des &lt;head&gt;-Elements, welcher nicht direkt im Webbrowser gezeigt wird, wenn die Seite gerendert wird. Er enthält Zusatzinformationen zur Webseite, wie den {{htmlelement("title")}}, Links zu CSS-Dateien und einem Favicon, andere Metadaten, wie den Autor der Webseite und eine kurze Beschreibung für Suchmaschinen. In diesem Artikel geht es um all diese Themen und noch mehr, um Ihnen beizubringen wie Sie den Kopf der HTML-Datei am sinnvollsten nutzen.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Vorwissen:</th>
+   <td>HTML-Grundlagen, wie sie in <a href="/de/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Lerne HTML kennen</a> abgedeckt werden.</td>
+  </tr>
+  <tr>
+   <th scope="row">Ziel:</th>
+   <td>Lernen für was der Kopf des HTML-Dokuments da ist, die wichtigsten Dinge die dort hinein gehören und wie sie das HTML-Dokument beeinflussen</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Was_ist_der_HTML-Kopf">Was ist der HTML-Kopf?</h2>
+
+<p>Lassen Sie uns nochmal einen Blick auf das einfache HTML Dokument werfen,<a href="/de/Learn/HTML/Introduction_to_HTML/Lerne_HTML_kennen"> mit welchem wir uns im vorherigen Artikel beschäftigt haben</a>:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Meine Testseite&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;Dies ist meine Webseite.&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Der HTML-Kopf ist der Inhalt im {{htmlelement("head")}}-Element. Anders als der Inhalt des {{htmlelement("body")}}-Elements, welcher im Browserfenster angezeigt wird, bleibt der Kopf im Browser verborgen. Die Aufgabe des Kopfes ist es, {{glossary("Metadata", "metadata")}} über das Dokument zu beinhalten. In unserem Beispiel ist der Kopf nicht sehr groß:</p>
+
+<pre class="brush: html">&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;title&gt;Meine Testseite&lt;/title&gt;
+&lt;/head&gt;</pre>
+
+<p>Auf großen Webseiten wird der Kopf aber recht voll. Schauen Sie sich mal den Bereich im <code>&lt;head&gt;</code>-Element bei Ihren Lieblingswebseiten an, indem Sie die Developer Tools nutzen oder einfach <code>view-source:</code> vor der Webadresse in die Adresszeile schreiben (z.B. <code>view-source:http://mozilla.org</code>). Unser Ziel hier ist es nicht alle Möglichkeiten zu zeigen, was man in den Kopf schreiben kann, aber wir werden Ihnen die wichtigsten und nützlichsten Dinge vorstellen. Fangen wir an!</p>
+
+<h2 id="Einen_Titel_hinzufügen">Einen Titel hinzufügen</h2>
+
+<p>Wir haben das {{htmlelement("title")}}-Element schon in Aktion gesehen - es kann genutzt werden, um der Webseite einen Titel hinzuzufügen. Dies kann mit dem {{htmlelement("h1")}}-Element verwechselt werden, welches benutzt wird, um innerhalb des <code>&lt;body&gt;</code>-Elements dem Inhalt der Webseite eine Hauptüberschrift zu geben. Manchmal wird diese Hauptüberschrift auch Titel genannt. Die beiden Elemente sind aber sehr unterschiedlich!</p>
+
+<ul>
+ <li>Das {{htmlelement("h1")}}-Element erscheint auf der Webseite selbst, wenn diese im Browser geladen wird. Dieses Element sollte nur einmal pro Seite erscheinen, um als Hauptüberschrift für den aktuellen Inhalt zu fungieren.</li>
+ <li>Das {{htmlelement("title")}}-Element gehört zu den Metadaten und repräsentiert den Titel der gesamten Webseite, nicht nur den Inhalt einer Seite darauf.</li>
+</ul>
+
+<h3 id="Aktives_Lernen_Beispiel_anschauen">Aktives Lernen: Beispiel anschauen</h3>
+
+<ol>
+ <li>Als erstes möchten wir das Sie zu unserem GitHub Repositorium gehen und eine Kopie von <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html page</a> herunterladen. Um das zu tun, können Sie entweder
+
+  <ol>
+   <li>Den Code direkt von der Seite kopieren und diesen in eine neue Textdatei in Ihrem Code-Editor einfügen. Vergessen Sie nicht die Datei zu speichern.</li>
+   <li>Drücken Sie auf den "Raw" Button auf der Seite, welcher den Code in einem neuen Browserfenster anzeigen lässt. Wählen Sie nun in Ihrem Browsermenu <em>Datei &gt; Speichere Seite unter...</em> und speichern die Datei auf Ihrem Computer.</li>
+  </ol>
+ </li>
+ <li>Öffnen Sie diese Datei in Ihrem Browser. Sie sollten folgendes sehen:
+  <p><img alt="A simple web page with the title set to &lt;title> element, and the &lt;h1> set to &lt;h1> element." src="https://mdn.mozillademos.org/files/12323/title-example.png" style="display: block; margin: 0 auto;">Es sollte hier klar werden, wo das <code>&lt;h1&gt;</code>-Element erscheint und wo das <code>&lt;html&gt;</code>-Element zu sehen ist!</p>
+ </li>
+ <li>Sie sollten auch versuchen, den Code in Ihrem Code-Editor zu öffnen. Ändern Sie den Inhalt der Elemente, speichern Sie die Datei und aktualisieren Sie die Seite im Browser. Probieren Sie ein bisschen herum.</li>
+</ol>
+
+<p>Der Inhalt des <code>&lt;title&gt;</code>-Elements wird auch auf andere Weise genutzt. Wenn Sie zum Beispiel die Seite zu Ihren Lesezeichen hinzufügen (<em>Lesezeichen &gt; Lesezeichen hinzufügen</em> oder die Schaltfläche mit dem Stern in der Adresszeile in Firefox), werden Sie sehen, dass der Inhalt des <code>&lt;title&gt;</code>-Elements als Name für das Lesezeichen vorgeschlagen wird.</p>
+
+<p><img alt="A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the &lt;title> element " src="https://mdn.mozillademos.org/files/12337/bookmark-example.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Der Inhalt des <code>&lt;title&gt;</code>-Elements wird auch von Suchmaschinen genutzt, wie Sie weiter unten sehen werden.</p>
+
+<h2 id="Metadaten_das_&lt;meta>-Element">Metadaten: das &lt;meta&gt;-Element</h2>
+
+<p>Metadaten sind Daten, welche Daten beschreiben. HTML hat einen "offiziellen" Weg, Meatadaten zu einem Dokument hinzuzufügen, das {{htmlelement("meta")}}-Element. Natürlich könnten auch die anderen Dinge, die wir hier besprechen, als Metadaten bezeichnet werden. Es gibt eine Menge verschiedener <code>&lt;meta&gt;</code>-Elemente, welche in das <code>&lt;head&gt;</code>-Element plaziert werden können. Wir werden hier nicht alle erklären, da dies sehr verwirrend werden würde. Statt dessen erklären wir einige Dinge die sie häufig sehen werden, um Ihnen eine Idee zu geben, um was es hier geht.</p>
+
+<h3 id="Zeichensatz_einer_Webseite_festlegen">Zeichensatz einer Webseite festlegen</h3>
+
+<p>In dem obigen Beispiel war diese Zeile enthalten:</p>
+
+<pre class="brush: html">&lt;meta charset="utf-8"&gt;</pre>
+
+<p>Mit diesem Element wird der genutzte Zeichensatz auf der Webseite bestimmt - es wird das Set an Zeichen festgelegt, welches vom Browser benutzt werden soll. <code>utf-8</code> ist ein universeller Zeichensatz in dem fast jeder Charakter enthalten ist, der in menschlicher Schrift benutzt wird. Das bedeutet, das ihre Webseite fast alle Sprachen anzeigen kann. Es ist also eine gute Idee, dies auf jeder Ihrer Webseiten zu setzen! Wenn Sie diesen nicht benutzen, werden Umlaute (Ä, ö) und ß nicht richtig angezeigt. Zum Beispiel kann Ihre Webseite damit gleichzeitig Englisch und Japanisch anzeigen:</p>
+
+<p><img alt="a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine," src="https://mdn.mozillademos.org/files/12343/correct-encoding.png" style="display: block; margin: 0 auto;">Wenn Sie Ihren Zeichensatz zum Beispiel auf <code>ISO-8859-1</code> setzen, der Zeichensatz für das lateinische Alphabet, wird die Webseite nicht so schön aussehen:</p>
+
+<p><img alt="a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly" src="https://mdn.mozillademos.org/files/12341/bad-encoding.png" style="display: block; height: 365px; margin: 0px auto; width: 604px;"></p>
+
+<h3 id="Atkives_lernen_Experimentieren_mit_Zeichensätzen">Atkives lernen: Experimentieren mit Zeichensätzen</h3>
+
+<p>Um dies auszuprobieren, nutzen Sie wieder die einfache HTML-Vorlage, welche Sie in der vorherigen Sektion über das <code>&lt;title&gt;</code>-Element benutzt haben (<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html page</a>). Verändern Sie den Wert von <code>meta-charset</code> in <code>ISO-8859-1</code> und fügen Sie japanische Buchstaben ihrer Seite hinzu. Das ist der Absatz, den wir benutzt haben:</p>
+
+<pre class="brush: html">&lt;p&gt;Japanese example: ご飯が熱い。&lt;/p&gt;</pre>
+
+<p>Ändern Sie den Text im Absatz in einen deutschen Text, der Umlaute enthält. Dann löschen Sie das <code>&lt;meta charset&gt;</code>-Element, um zu sehen, was passiert. Fügen Sie das ursprüngliche <code>meta</code>-Tag danach wieder ein und sehen Sie sich den Unterschied im Webbrowser an.</p>
+
+<h3 id="Autor_und_Beschreibung_hinzufügen"> Autor und Beschreibung hinzufügen</h3>
+
+<p>Viele <code>&lt;meta&gt;</code> -Elemente beinhalten <code>name</code> und <code>content</code> Attribute:</p>
+
+<ul>
+ <li><code>name</code> spezifiziert den Typ des meta-Elements; welche Art von Information es enthält.</li>
+ <li><code>content</code> spezifiziert den eigentlichen Inhalt des meta-Elements.</li>
+</ul>
+
+<p>Zwei dieser meta-Elemente, bei denen es sinnvoll ist, sie auf Ihrer Webseite zu nutzen, stellen wir hier vor. Sie definieren den Autor (engl.: author) und eine kurze Beschreibung (engl.: description) der Webseite. Schauen wir uns ein Beispiel an:</p>
+
+<pre class="brush: html">&lt;meta name="author" content="Chris Mills"&gt;
+&lt;meta name="description" content="The MDN Learning Area aims to provide
+complete beginners to the Web with all they need to know to get
+started with developing web sites and applications."&gt;</pre>
+
+<p>Einen Autor anzugeben ist sinnvoll, um zu zeigen, wer die Webseite geschrieben hat. Vielleicht möchte jemand Kontakt mit dem Autor aufnehmen, da er Fragen zum Inhalt oder zum Code der Webseite hat. Es gibt Seiten, welche automatisch den Autor der Webseite auslesen, um eine Kontaktmöglichkeit zu diesem zu erstellen.</p>
+
+<p>Eine Beschreibung welche zum Inhalt der Seite passende Stichwörter enthält, ist ein sinnvoller Weg, die Webseite in Suchmaschinen zu relevanten Suchbegriffen weiter oben erscheinen zu lassen. (solche Methoden werden unter dem Begriff <a href="/de/docs/Glossary/SEO">Suchmaschinenoptimierung</a> (engl.: "Search Engine Optimation", kurz {{glossary("SEO")}} zusammengefasst)</p>
+
+<h3 id="Aktives_Lernen_Beschreibung_für_Suchmaschinen">Aktives Lernen: Beschreibung für Suchmaschinen</h3>
+
+<p>Die Beschreibung wird von Suchmaschinen auch auf der Ergebnisseite genutzt. Schauen wir uns das mal genauer an - in einer Übung.</p>
+
+<ol>
+ <li>Gehen Sie zu der<a href="https://developer.mozilla.org/"> Startseite von dem Mozilla Developer Network</a>.</li>
+ <li>Schauen Sie sich den Quellcode der Webseite an (Rechts/<kbd>Ctrl</kbd> + klick auf die Seite, wählen Sie <em>Quellcode anzeigen</em> von dem Kontextmenü oder schreiben Sie <code>view-source:</code> vor die Webadresse in der Adresszeile).</li>
+ <li>Finden Sie das description <code>&lt;meta&gt;</code>-Tag. Es sollte so aussehen:
+  <pre class="brush: html">&lt;meta name="description" content="The Mozilla Developer Network (MDN) provides
+information about Open Web technologies including HTML, CSS, and APIs for both
+Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS."&gt;</pre>
+ </li>
+ <li>Suchen Sie nun nach "Mozilla Developer Network" in einer beliebigen Suchmaschine (Wir haben Yahoo benutzt.) Sie werden bemerken das die Inhalte vom description <code>&lt;meta&gt;</code>-Tag und vom <code>&lt;title&gt;</code> hier erscheinen - es ist also sehr sinnvoll, diese beiden zu ntuzen! <img alt='A Yahoo search result for "Mozilla Developer Network"' src="https://mdn.mozillademos.org/files/12347/search-result.png" style="display: block; margin: 0 auto;"></li>
+</ol>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Wenn Sie mit Google suchen, werden Sie einige Unterseiten von MDN sehen, direkt unter dem Link zur Hauptseite von MDN. Dies sind sogenannte Sitelinks und Sie können mit den <a href="http://www.google.com/webmasters/tools/">Google's webmaster tools</a> bearbeitet werden.</p>
+</div>
+
+<div class="note">
+<p>Hinweis: Viele  <code>&lt;meta&gt;</code>-Elemente sind nicht mehr so wichtig, wie sie einmal waren. Ein Beispiel ist das keyword <code>&lt;meta&gt;</code>-Element (<code>&lt;meta name="keywords" content="fill, in, your, keywords, here"&gt;</code>).  Dieses sollte Schlagwörter für Suchmaschinen bereithalten , damit diese anhand der Schlagwörter Suchergebnisse zusammen stellen können. Mittlerweile wird dieses <code>&lt;meta&gt;</code>-Tag von vielen Suchmaschinen ignoriert, weil Sprammer die Stichwortliste mit hunderten von Stichwörtern gefüllt haben, womit die Suchergebnisse manipuliert werden konnten.</p>
+</div>
+
+<h3 id="Andere_Typen_von_Metadaten">Andere Typen von Metadaten</h3>
+
+<p>Während Sie sich im Internet umschauen, werden Sie andere Typen von Metadaten entdecken. Einige Funktionen auf Webseiten sind proprietäre Kreationen (zum Beispiel Seiten von Sozialen Netzwerken), welche geschrieben wurden, um bestimmte Informationen zur Verfügung zu stellen.</p>
+
+<p>Zum Beispiel gibt es <a href="http://ogp.me/">Open Graph Data</a>, welches ein Metadatenprotokoll ist, welches von Facebook erfunden wurde, um reichhaltigere Metadaten zur Verfügung zu stellen. Im MDN Quellcode können Sie folgendes finden:</p>
+
+<pre class="brush: html">&lt;meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png"&gt;
+&lt;meta property="og:description" content="The Mozilla Developer Network (MDN) provides
+information about Open Web technologies including HTML, CSS, and APIs for both Web sites
+and HTML5 Apps. It also documents Mozilla products, like Firefox OS."&gt;
+&lt;meta property="og:title" content="Mozilla Developer Network"&gt;</pre>
+
+<p>Dieser Code bewirkt, das ein Link zu MDN von Facebook aus, ein Bild und eine Beschreibung beinhaltet. Das sieht dann so aus:</p>
+
+<p><img alt="Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description." src="https://mdn.mozillademos.org/files/12349/facebook-output.png" style="display: block; margin: 0 auto;">Twitter nutzt ganz ähnliche Metadaten, welche einen ähnlichen Effekt haben. Ein spezifischer Titel, eine Kurzbeschreibung und ein Bild können bei Angabe eines Links angezeigt werden. Als Beispiel:</p>
+
+<pre class="brush: html">&lt;meta name="twitter:title" content="Mozilla Developer Network"&gt;</pre>
+
+<h2 id="Spezielle_Icons_der_Webseite_hinzufügen">Spezielle Icons der Webseite hinzufügen</h2>
+
+<p>Um das Design Ihrer Webseite weiter zu verschönern, können Sie in den Metadaten eine Referenz zu einem speziellen Icon-Set hinzufügen. Diese werden dann in einem bestimmten Kontext angezeigt.</p>
+
+<p>Das Favicon, welches es schon seit vielen Jahren gibt, ist das erste Icon seiner Art. Es ist 16 x 16 Pixel groß und wird an verschiedenen Stellen genutzt. Sie können Favicons vor dem Titel einer Webseite in den meisten Browser-Tabs sehen. Auch wenn Sie eine Seite Ihren Lesezeichen hinzufügen, wird dort das Favicon verwendet.</p>
+
+<p>Ein Favicon fügen Sie Ihrer Webseite wie folgt hinzu:</p>
+
+<ol>
+ <li>Speichern Sie das Favicon mit der Endung <code>.ico</code> in dem selben Ordner, in dem auch Ihre <code>index.html</code> Datei ist. Die meisten Browser würden auch <code>.gif</code> und <code>.png</code> Format akzeptieren, mit dem ICO Format gehen Sie aber sicher, das auch ältere Browser das Favicon anzeigen.</li>
+ <li>Fügen Sie die folgende Zeile in den <code>&lt;head&gt;</code>-Bereich Ihrer HTML-Datei ein, um eine Referenz zu dem Favicon zu erzeugen:
+  <pre class="brush: html">&lt;link rel="shortcut icon" href="favicon.ico" type="image/x-icon"&gt;</pre>
+ </li>
+</ol>
+
+<p>Hier ist ein Beispiel, indem ein Favicon in einer Lesezeichen-Liste angezeigt wird:</p>
+
+<p><img alt="The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it." src="https://mdn.mozillademos.org/files/12351/bookmark-favicon.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Es gibt heutzutage viele andere Icon-Typen die man der Webseite hinzufügen kann. Zum Beispiel werden Sie folgendes im Quellcode der MDN Startseite finden:</p>
+
+<pre class="brush: html">&lt;!-- third-generation iPad with high-resolution Retina display: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png"&gt;
+&lt;!-- iPhone with high-resolution Retina display: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png"&gt;
+&lt;!-- first- and second-generation iPad: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png"&gt;
+&lt;!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png"&gt;
+&lt;!-- basic favicon --&gt;
+&lt;link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png"&gt;</pre>
+
+<p>Die Kommentare erklären für was die verschiedenen Icons da sind. Zum Beispiel gibt es ein hochauflösendes Icon, welches angezeigt wird, wenn die Webseite auf dem Startbildschirm eines IPad's gespeichert wird.</p>
+
+<p>Machen Sie sich nicht zu viele Sorgen, all diese Icons müssen Sie nicht direkt in Ihrer Webseite haben. Sie sind eher ein Feature für fortgeschrittene Webentwickler und werden nicht zur Absolvierung dieses Kurses benötigt. Sie sollen hier nur erfahren für was diese Code-Zeilen stehen, wenn Sie diese im Quellcode anderer Webseiten sehen.</p>
+
+<h2 id="CSS_und_JavaScript_der_HTML-Datei_hinzufügen">CSS und JavaScript der HTML-Datei hinzufügen</h2>
+
+<p>Fast alle modernen Webseiten benutzen {{glossary("CSS")}}, um diese gut aussehen zu lassen und {{glossary("JavaScript")}} um interaktive Elemente hinzuzufügen, wie Video-Spieler, Karten, Spiele und vieles mehr. Diese werden der HTML-Datei normalerweise wie folgt hinzugefügt:</p>
+
+<ul>
+ <li>Für das Einbinden von CSS-Dateien wird das {{htmlelement("link")}}-Element benutzt. Dieses wird im Kopf der HTML-Datei eingebunden. Das Element nimmt zwei Attribute, einmal <code>rel="stylesheet"</code>, welches Angibt das es sich um ein Stylesheet handelt. Das andere Attribut ist <code>href</code>, welches als Wert den Pfad zu der CSS-Datei beinhaltet:
+
+  <pre class="brush: html">&lt;link rel="stylesheet" href="meine-css-datei.css"&gt;</pre>
+ </li>
+ <li>Für das Einbinden von JavaScript-Dateien wird das {{htmlelement("script")}}-Element genutzt und es wird meistens am Ende der HTML-Datei, vor dem schließenden <code>&lt;/body&gt;</code>-Tag verwendet. Dadurch wird der HTML-Inhalt zuerst fertig geladen und erst am Ende der JavaScript-Code ausgeführt und auf die fertig gerenderte Webseite angewendet:
+  <pre class="brush: html">&lt;script src="meine-js-datei.js"&gt;&lt;/script&gt;</pre>
+
+  <p><strong>Hinweis</strong>: Das <code>&lt;script&gt;</code>-Element sieht aus wie ein leeres Element, aber das ist es nicht, weswegen ein schließendes Tag notwendig ist. Anstatt auf eine externe JavaScript-Datei zu verweisen, könnte man den Code auch direkt in das <code>&lt;script&gt;</code>-Element hineinschreiben.</p>
+ </li>
+</ul>
+
+<h3 id="Aktives_Lernen_Binden_Sie_CSS_und_JavaScript_in_eine_Seite_ein">Aktives Lernen: Binden Sie CSS und JavaScript in eine Seite ein</h3>
+
+<ol>
+ <li>Holen Sie sich jeweils eine Kopie von unseren <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/script.js">script.js</a> und <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/style.css">style.css</a>-Dateien und speichern diese lokal auf ihrem Computer in demselben Ordner ab. Gehen Sie sicher das die Dateien mit den richtigen Namen und Dateiendungen gespeichert sind.</li>
+ <li>Öffnen Sie die HTML-Datei sowohl in Ihrem Browser, als auch in einem Texteditor.</li>
+ <li>Fügen Sie nun ein {{htmlelement("link")}}-Element hinzu, welches auf die CSS-Datei verweist und ein {{htmlelement("script")}}-Element, welches die JavaScript-Datei einbindet, wie Sie es in diesem Artikel gelernt haben.</li>
+</ol>
+
+<p>Wenn Sie nun das HTML-Dokument speichern und im Browser neu laden, dann sollten Sie folgende Änderungen an der Webseite sehen:</p>
+
+<p><img alt="Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page." src="https://mdn.mozillademos.org/files/12359/js-and-css.png" style="display: block; margin: 0 auto;"></p>
+
+<ul>
+ <li>Der JavaScript-Code hat der Seite eine leere Liste hinzugefügt. Wenn Sie nun irgendwo auf die Liste klicken, dann öffnet sich eine Dialog-Box, in welcher Sie Text eingeben können, der nach drücken auf "OK" als neuer Listenpunkt erscheint. Wenn Sie auf einen existierenden Listeneintrag klicken können Sie, über die Dialog-Box, diesen Eintrag ändern.</li>
+ <li>Die eingebundene CSS-Datei hat dafür gesorgt, dass der Hintergrund grün ist und der Text größer ist. Es wurde auch der Inhalt gestylet, welcher durch den JavaScript-Code der Webseite hinzugefügt wurde, nämlich der rote Hintergrund und ein schwarzer Rahmen um die Liste herum.</li>
+</ul>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Falls Sie an dieser Übung hängen bleiben und die externen Dateien nicht korrekt eingebunden bekommen, dann schauen Sie sich unsere <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/css-and-js.html">css-and-js.html</a> Beispiel Webseite an.</p>
+</div>
+
+<h2 id="Die_genutzte_Sprache_der_Webseite_angeben">Die genutzte Sprache der Webseite angeben</h2>
+
+<p>Am Ende soll hier noch angemerkt werden, das Sie die genutzte Sprache auf der Webseite angeben können und sollten. Dies kann einfach gemacht werden indem Sie das <a href="/de/docs/Web/HTML/Global_attributes/lang"><code>lang</code>-Attribut</a> dem öffnenden HTML-Tag hinzufügen (wie auf <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a> gemacht und es unten gezeigt wird).</p>
+
+<pre class="brush: html">&lt;html lang="de"&gt;</pre>
+
+<p>Dies ist in vielerlei Hinsicht eine hilfreiche Angabe. Ihr HTML-Dokument wird effizienter von Suchmaschinen aufgenommen, wenn die Sprache angegeben ist. Auch für Screenreader ist die Angabe der Sprache am Beginn des Dokumentes wichtig.</p>
+
+<p>Sie können auch für Bereiche Ihrer Webseite eine andere Sprache angeben. Zum Beispiel könnten Sie einen Bereich, in welchem japanischer Text steht, wie folgt angeben:</p>
+
+<pre class="brush: html">&lt;p&gt;Japanese example: &lt;span lang="jp"&gt;ご飯が熱い。&lt;/span&gt;.&lt;/p&gt;</pre>
+
+<p>Die Ländercodes werden im <a href="https://en.wikipedia.org/wiki/ISO_639-1">ISO 639-1</a> Standard definiert. Sie können hier mehr darüber lesen: <a href="https://www.w3.org/International/articles/language-tags/">Language tags in HTML and XML</a> (in Englisch)</p>
+
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+
+<p>Dies ist das Ende unseres Exkurses über den Kopf der HTML-Datei. Es gäbe noch einiges mehr, was man dort tun könnte, aber es wäre für einen Anfänger nicht hilfreich. Die meistgenutzten Sachen haben wir hier erklärt. Weiter geht es mit Einfache Textformatierung in HTML.</p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</p>
diff --git a/files/de/learn/html/einführung_in_html/document_and_website_structure/index.html b/files/de/learn/html/einführung_in_html/document_and_website_structure/index.html
new file mode 100644
index 0000000000..7b9ce1bae8
--- /dev/null
+++ b/files/de/learn/html/einführung_in_html/document_and_website_structure/index.html
@@ -0,0 +1,292 @@
+---
+title: Struktur in die Webseite bringen
+slug: Learn/HTML/Einführung_in_HTML/Document_and_website_structure
+tags:
+  - Beginner
+  - Guide
+  - HTML
+  - Layout
+  - Planung
+  - Sitemap
+  - Struktur
+translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<p class="summary">{{glossary("HTML")}} ist auch dafür da, größere Strukturen, wie einen Kopfbereich, ein Navigationsmenü oder den Bereich für den Hauptinhalt auf einer Webseite festzulegen. In diesem Artikel schauen wir uns an, wie man den Aufbau einer Webseite plant und mit Hilfe von HTML repräsentiert.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Vorwissen:</th>
+   <td>HTML-Grundlagen, wie sie in <a href="/de/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Lernen Sie HTML kennen</a> abgedeckt werden. HTML Textformatierung, wie in <a href="/de/Learn/HTML/Einf%C3%BChrung_in_HTML/Einfache_Textformatierung_in_HTML">Einfache Textformatierung in HTML</a> abgedeckt wird. Wie Links funktionieren, wie im Artikel <a href="/de/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Links erstellen</a> beschrieben wird.</td>
+  </tr>
+  <tr>
+   <th scope="row">Ziel:</th>
+   <td>Lernen, wie man eine grundlegende Struktur in einer Webseite mit HTML-Tags festlegt und wie man die Struktur einer einfachen Webseite entwirft.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Bereiche_einer_Webseite">Bereiche einer Webseite</h2>
+
+<p>Webseiten können sehr unterschiedlich aussehen, doch die meisten haben ähnliche Komponenten, aus welchen sie aufgebaut sind. Diese Komponenten sieht man auf den meisten Webseiten, bei denen es sich nicht um Video-, Spielewebseiten oder Kunstprojekte handelt. Diese Komponenten bringen eine gute Struktur in jede Webseite:</p>
+
+<dl>
+ <dt>header - Kopfbereich</dt>
+ <dd>Normalerweise ist dies ein breiter Streifen ganz oben auf der Website, in dem eine Überschrift zusammen mit einem Logo untergebracht sind. So sieht man jederzeit auf welcher Website man sich befindet, der header bleibt auf allen Unterseiten gleich.</dd>
+ <dt>Navigation</dt>
+ <dd>In der Navigation werden die Links zu den Unterseiten der Website bereitgestellt, meist in Form von Buttons, einfachen Links oder auch Tabs. Dieser Bereich bleibt genauso wie der header auf allen Seiten der Website gleich. Manchmal wird die Navigation direkt mit in den header eingebaut. Ob ein separates Navigationsmenü sinnvoller ist, ist Ansichtssache.</dd>
+ <dt>Hauptinhalt</dt>
+ <dd>Der größte Bereich im Zentrum der Webseite, welcher den meisten Inhalt einer Webseite enthält, zum Beispiel Videos, eine Geschichte, eine Karte oder ein Zeitungsartikel. Dieser Part der Website wird sich von Seite zu Seite unterscheiden!</dd>
+ <dt>Sidebar</dt>
+ <dd>Zusätzliche Informationen, Links, Zitate, Werbung, usw. Dies wird nicht im Hauptfenster dargestellt, aber meist rechts oder links davon. Der Inhalt bezieht sich oft auf den Hauptinhalt. Bei einem Zeitungsartikel könnte die Sidebar zum Beispiel Zusatzinformationen, Informationen zum Autor oder Links zu ähnlichen Artikeln enthalten. Manchmal wird in der Sidebar auch ein zweites Navigationsmenü untergebracht oder anderer Inhalt, der auf allen Seiten gleich ist.</dd>
+ <dt>footer - Fußbereich</dt>
+ <dd>Ein Streifen am Ende der Webseite, welcher oft in kleiner Schrift Informationen zum Impressum, Copyright und Kontaktinformationen bereit stellt. Es sind wichtige Informationen für Interessierte, aber für die meisten Webseitenbenutzer nicht relevant. Manchmal wird hier auch eine Sitemap zur Verfügung gestellt.</dd>
+</dl>
+
+<p>Eine „typische Webseite“ könnte wie folgt strukturiert werden:</p>
+
+<p><img alt="a simple website structure example featuring a main heading, navigation menu, main content, side bar, and footer." src="https://mdn.mozillademos.org/files/12417/sample-website.png" style="display: block; margin: 0 auto;"></p>
+
+<h2 id="Inhalte_strukturieren_mit_HTML">Inhalte strukturieren mit HTML</h2>
+
+<p>Das Beispiel oben ist vielleicht nicht besonders schön, aber sehr gut dafür geeignet, den typischen Aufbau einer Webseite zu erläutern. Es gibt Webseiten mit weiteren Spalten, manche sind um einiges komplexer, aber man kann den grundlegenden Aufbau gut erkennen. Mit dem richtigen CSS darauf angewendet, kann man alle Elemente dazu bringen, sich wie die verschiedenen Bereiche zu verhalten und so auszusehen. Aber wie schon vorher angesprochen, ist es <strong>wichtig den semantischen Zusammenhang zwischen den HTML-Tags zu wahren und das richtige Element für den ihm zugeschriebene Job zu nutzen</strong>.</p>
+
+<p>Dies liegt daran, dass Darstellungen nicht die ganze Geschichte, die dahinter steckt, erzählen. Wir verwenden Farbe und Schriftgröße um Benutzer auf die nützlichsten Teile des Inhalts aufmerksam zu machen, wie das Navigationsmenü und verwandte Links. Aber was ist mit sehbehinderten Menschen, die zum Beispiel keine Konzepte wie „pink“ und „große Schriftart“ sehr nützlich finden?</p>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Etwa 8% der Menschen weltweit sind farbenblind. Blinde oder fast blinde Menschen machen 4-5% der Menschheit aus. 2012 waren das etwa <a href="https://en.wikipedia.org/wiki/Visual_impairment">285 Millionen Menschen</a>, während die Gesamtpopulation bei 7 Billionen Menschen liegt.</p>
+</div>
+
+<p>Im HTML-Code kann man Sektionen einteilen, je nach dem was Sie beinhalten und welche <em>Funktion</em> sie ausfüllen. Wenn die Elemente so genutzt werden, wie oben beschrieben, dann hilft es Assistenzsoftware, wie Screenreadern, diese Elemente richtig zu klassifizieren. Wie wir bereits früher in diesem Kurs besprochen haben, hätte es <a href="/de/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Why_do_we_need_structure">einige negative Konsequenzen, wenn nicht das richtige Element und die richtige Semantik für den dafür vorgesehenen Job genutzt werden</a>.</p>
+
+<p>Um sematisches Markup zu schreiben, stellt HTML einige Tags zur verfügung, die man benutzen kann, zum Beispiel:</p>
+
+<ul>
+ <li><strong>Header/Kopfbereich: </strong>{{htmlelement("header")}}.</li>
+ <li><strong>Navigations Menü: </strong>{{htmlelement("nav")}}.</li>
+ <li><strong>Hauptinhalt: </strong>{{htmlelement("main")}}, mit einigen verschiedenen Untersektionen, repräsentiert mit {{HTMLElement("article")}}, {{htmlelement("section")}} und {{htmlelement("div")}} Elementen.</li>
+ <li><strong>Sidebar: </strong>{{htmlelement("aside")}}; wird oft innerhalb {{htmlelement("main")}} platziert.</li>
+ <li><strong>Footer/Fußbereich: </strong>{{htmlelement("footer")}}.</li>
+</ul>
+
+<h3 id="Aktives_Lernen_Den_Code_aus_dem_Beispiel_verstehen">Aktives Lernen: Den Code aus dem Beispiel verstehen</h3>
+
+<p>Das Beispiel oben basiert auf dem folgenden Code (<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/document_and_website_structure/index.html">Man kann dieses Beispiel auch auf GitHub finden</a>). Schauen Sie sich das Beispiel oben an und dann den Code dazu unten. Versuchen Sie zu sehen, welche Zeilen des Codes zu welchen Sektionen der Webseite gehören.</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+
+    &lt;title&gt;Titel der Webseite&lt;/title&gt;
+    &lt;link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css"&gt;
+    &lt;link rel="stylesheet" href="style.css"&gt;
+
+    &lt;!-- die nächsten drei Zeilen bewirken, dass die HTML5 Semantik Elemente auch in alten Internet Explorer Versionen funktionieren--&gt;
+    &lt;!--[if lt IE 9]&gt;
+      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"&gt;&lt;/script&gt;
+    &lt;![endif]--&gt;
+  &lt;/head&gt;
+
+  &lt;body&gt;
+    &lt;!-- Dies ist der Kopfbereich bzw. Header, welcher auf allen Seiten angezeigt wird --&gt;
+
+    &lt;header&gt;
+      &lt;h1&gt;Header&lt;/h1&gt;
+    &lt;/header&gt;
+
+    &lt;nav&gt;
+      &lt;ul&gt;
+        &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;a href="#"&gt;Our team&lt;/a&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;a href="#"&gt;Projects&lt;/a&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
+      &lt;/ul&gt;
+
+       &lt;!-- Ein Suchformular, mit dessen Hilfe man auch durch die Webseite navigieren kann --&gt;
+
+       &lt;form&gt;
+         &lt;input type="search" name="q" placeholder="Search query"&gt;
+         &lt;input type="submit" value="Go!"&gt;
+       &lt;/form&gt;
+     &lt;/nav&gt;
+
+    &lt;!-- Hier kommt der Hauptinhalt unserer Webseite --&gt;
+    &lt;main&gt;
+
+      &lt;!-- Es enthält einen Artikel --&gt;
+      &lt;article&gt;
+        &lt;h2&gt;Article heading&lt;/h2&gt;
+
+        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.&lt;/p&gt;
+
+        &lt;h3&gt;subsection&lt;/h3&gt;
+
+        &lt;p&gt;Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.&lt;/p&gt;
+
+        &lt;p&gt;Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.&lt;/p&gt;
+
+        &lt;h3&gt;Another subsection&lt;/h3&gt;
+
+        &lt;p&gt;Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.&lt;/p&gt;
+
+        &lt;p&gt;Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.&lt;/p&gt;
+      &lt;/article&gt;
+
+      &lt;!-- Der Inhalt für die Sidebar kann auch innerhalb des main-Elements stehen--&gt;
+      &lt;aside&gt;
+        &lt;h2&gt;Related&lt;/h2&gt;
+
+        &lt;ul&gt;
+          &lt;li&gt;&lt;a href="#"&gt;Oh I do like to be beside the seaside&lt;/a&gt;&lt;/li&gt;
+          &lt;li&gt;&lt;a href="#"&gt;Oh I do like to be beside the sea&lt;/a&gt;&lt;/li&gt;
+          &lt;li&gt;&lt;a href="#"&gt;Although in the North of England&lt;/a&gt;&lt;/li&gt;
+          &lt;li&gt;&lt;a href="#"&gt;It never stops raining&lt;/a&gt;&lt;/li&gt;
+          &lt;li&gt;&lt;a href="#"&gt;Oh well...&lt;/a&gt;&lt;/li&gt;
+        &lt;/ul&gt;
+      &lt;/aside&gt;
+
+    &lt;/main&gt;
+
+    &lt;!-- Hier ist unser Footer bzw. die Fußzeile, welche auch wieder auf allen Unterseiten angezeigt wird. --&gt;
+
+    &lt;footer&gt;
+      &lt;p&gt;©Copyright 2050 by nobody. All rights reversed.&lt;/p&gt;
+    &lt;/footer&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Nehmen Sie sich etwas Zeit sich den Code näher anzuschauen und versuchen Sie ihn zu verstehen - die Kommentare sollten Ihnen dabei behilflich sein. Wir haben nicht zu viele Aufgaben in diesem Artikel, denn der Schlüssel zum Verständnis des Layouts ist das Schreiben von einer soliden HTML-Struktur, um diese dann mit CSS zu beeinflussen. Damit warten wir aber, denn dies ist Teil des CSS Kurses, der sich an diesen HTML Kurs direkt anschließt.</p>
+
+<h2 id="Die_HTML-Layout-Elemente">Die HTML-Layout-Elemente</h2>
+
+<p>Es ist gut alle HTML-Elemente fürs Layout im Detail zu kennen. Das lernen Sie mit der Zeit. Viele Details können Sie in unserer <a href="/de/docs/Web/HTML/Element">HTML Elemente Referenz</a> finden.</p>
+
+<ul>
+ <li>{{HTMLElement('main')}} ist für den Hauptbereich der Webseite und stellt gewöhnlich Inhalte dar, die <em>nur auf dieser einen Seite</em> zu sehen sind. <code>&lt;main&gt;</code> sollte nur <em>einmal</em> pro Webseite genutzt werden und sollte direkt im {{HTMLElement('body')}} stehen und nicht innerhalb anderer Elemente.</li>
+ <li>{{HTMLElement('article')}} umschließt einen Block von zusammenhängendem Inhalt, der auch ohne den Rest der Webseite stehen könnte (z.B. ein einzelner Blogpost).</li>
+ <li>{{HTMLElement('section')}} ist ähnlich wie <code>&lt;article&gt;</code>, aber eher für das Gruppieren von Bereichen mit bestimmter Funktionalität (z.B. eine Minikarte oder einige Artikel-Überschriften und Zusammenfassungen). Es ist gute Praxis, jede section mit einer Überschrift zu starten. Man kann <code>&lt;article&gt;</code>s in mehrere <code>&lt;section&gt;</code>s aufteilen und umgekehrt, es geht beides.</li>
+ <li>{{HTMLElement('aside')}} enthält Inhalte, die nicht direkt mit dem Hauptinhalt zusammenhängen, aber als Zusatzinformationen dienen können (Biografie des Autors, Links zu weiterführenden Informationen)</li>
+ <li>{{HTMLElement('header')}} stellt eine Gruppe von einführenden Inhaltselementen dar. Wenn es innerhalb des {{HTMLElement('body')}}-Tags steht, definiert es einen globalen Kopfbereich für die Webseite, aber wenn es innerhalb von einem {{HTMLElement('article')}} oder {{HTMLElement('section')}} Element steht, dann stellt es einen Kopfbereich nur für diese Sektion dar. (Achtung! Verwechslungsgefahr mit <a href="/de/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Adding_a_title">Titel und Überschriften</a></li>
+ <li>{{HTMLElement('nav')}} enthält das Hauptnavigationsmenü für die Seite. Zweitrangige Links würden nicht hier hin gehören.</li>
+ <li>{{HTMLElement('footer')}} stellt eine Gruppe von Inhalten am Ende der Webseite dar.</li>
+</ul>
+
+<h3 id="Nicht-semantische_Container">Nicht-semantische Container</h3>
+
+<p>Manchmal findet sich kein passendes semantisches Element, um eine Gruppe Elemente oder Inhalte damit einzuhüllen. Manchmal möchte man mit einem Container um bestimmte Elemente herum nur ein Ziel erstellen, das über {{glossary("CSS")}} oder {{glossary("JavaScript")}} angesprochen werden kann. Für solche Fälle gibt es das {{HTMLElement("div")}} und das {{HTMLElement("span")}} Element. Diese sollten möglichst immer ein passendes {{htmlattrxref('class')}} Attribut haben, über welches sie identifiziert und angesprochen werden können.</p>
+
+<p>{{HTMLElement("span")}} ist ein Inline Element ohne eine bestimmte Semantik. Man sollte es nur benutzen, wenn man kein besseres, semantisches Inline-Element finden kann oder wenn man keine hervorgehobene Bedeutung hinzufügen möchte. Zum Beispiel:</p>
+
+<pre class="brush: html">&lt;p&gt;Der König lief um 1 Uhr betrunken zurück zu seinem Zimmer. Das Bier half ihm nicht dabei, als er durch die Tür schwankte &lt;span class="editor-hinweis"&gt;[Editor's Hinweis: An diesem Punkt im Stück sollten die Lichter heruntergedimmt werden]&lt;/span&gt;.&lt;/p&gt;</pre>
+
+<p>In diesem Fall soll der Hinweis für den Editor nur Extra-Informationen für den Direktor des Schauspiels bereit stellen, der Hinweis hat keine semantische Bedeutung. Visuell kann dies per CSS mit einem Unterschied in der Textdarstellung angezeigt werden.</p>
+
+<p>{{HTMLElement("div")}} ist ein Blocklevel-Element ohne eine bestimmte Semantik. Man sollte es nur benutzen, wenn man kein besseres, semantisches Blocklevel-Element finden kann oder wenn man keine hervorgehobene Bedeutung hinzufügen möchte. Zum Beispiel ein Einkaufswagen-Widget, welches man jederzeit auf einer E-Commerce-Webseite anzeigen kann:</p>
+
+<pre class="brush: html">&lt;div class="einkaufswagen"&gt;
+  &lt;h2&gt;Einkaufswagen&lt;/h2&gt;
+  &lt;ul&gt;
+    &lt;li&gt;
+      &lt;p&gt;&lt;a href=""&gt;&lt;strong&gt;Silber Ohrringe&lt;/strong&gt;&lt;/a&gt;: $99.95.&lt;/p&gt;
+      &lt;img src="../products/3333-0985/thumb.png" alt="Silber Ohrringe"&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      ...
+    &lt;/li&gt;
+  &lt;/ul&gt;
+  &lt;p&gt;Kosten gesamt: $237.89&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<p>Dies ist nicht wirklich Inhalt für <code>&lt;aside&gt;</code>, da es nicht notwendigerweise mit dem Inhalt der Hauptseite im Zusammenhang steht (man soll es ja überall sehen können). Auch <code>&lt;section&gt;</code> scheint ungeeignet, da es nicht Teil des Hauptinhaltes ist. Deswegen kann man hier <code>&lt;div&gt;</code> benutzen. Es wurde eine Überschrift hinzugefügt, so das auch Benutzer mit Screenreadern den Einkaufswagen finden.</p>
+
+<div class="warning">
+<p><strong>Warnung</strong>: Divs sind leicht zu benutzen, man sollte aber darauf achten, das man nicht zu viele davon einsetzt, da sie keinerleit semantischen Wert haben. Man sollte sie wirklich nur benutzen, wenn es keine anderen semantischen Elemente gibt. Wenn man zuviele divs benutzt, dann wird es schwierig den Code zu updaten und später damit wieder zu arbeiten.</p>
+</div>
+
+<h3 id="Zeilenumbruch_und_Horizontale_Linien">Zeilenumbruch und Horizontale Linien</h3>
+
+<p>Zwei Elemente, die man immer mal wieder benutzen wird, sind {{htmlelement("br")}} und {{htmlelement("hr")}}:</p>
+
+<p><code>&lt;br&gt;</code> stellt einen Zeilenumbruch innerhalb eines Absatzes(</p>
+
+<p>) dar. Es ist die einzige Möglichkeit eine bestimmte Struktur in den Text zu bekommen, wie man es bei einer Adresse oder einem Gedicht benötigt. Zum Beispiel:</p>
+
+<pre class="brush: html">&lt;p&gt;There once was a girl called Nell&lt;br&gt;
+Who loved to write HTML&lt;br&gt;
+But her structure was bad, her semantics were sad&lt;br&gt;
+and her markup didn't read very well.&lt;/p&gt;</pre>
+
+<p>Ohne die <code>&lt;br&gt;</code> Elemente, würde der Absatz in einer einzigen lange Zeile angezeigt werden, denn <a href="/de/Learn/HTML/Introduction_to_HTML/Getting_started#Whitespace_in_HTML"> HTML ignoriert Whitespace</a>. Mit den<br>
+ Elementen im Code wird der Absatz wie folgt dargestellt:</p>
+
+<p>There once was a girl called Nell<br>
+ Who loved to write HTML<br>
+ But her structure was bad, her semantics were sad<br>
+ and her markup didn't read very well.</p>
+
+<p><code>&lt;hr&gt;</code> Elemente erzeugen eine horizontale Linie. Damit kann man einen thematischen Umbruch darstellen. Visuell ist es einfach nur eine Linie. Beispiel:</p>
+
+<pre>&lt;p&gt;Die Katze lief aus dem Haus, um die Sonne zu genießen.&lt;/p&gt;
+&lt;hr&gt;
+&lt;p&gt;Der Hund im Haus und holte sich das Futter aus dem Napf der Katze.&lt;/p&gt;</pre>
+
+<p>Würde wie folgt aussehen:</p>
+
+<p>Die Katze lief aus dem Haus, um die Sonne zu genießen.</p>
+
+<hr>
+<p>Der Hund im Haus und holte sich das Futter aus dem Napf der Katze.</p>
+
+<h2 id="Planung_einer_einfachen_Webseite">Planung einer einfachen Webseite</h2>
+
+<p>Wenn Sie einmal den Inhalt einer ganz einachen Webseite geplant haben, dann ist der nächste Schritt das ausarbeiten, welcher Inhalt auf einer ganzen Internetpräsenz, bestehend aus mehreren Unterseiten, dargestellt werden soll. Dazu gehört zu planen, wie die einzelnen Seiten untereinander verlinkt werden sollen, wie das Gesamtlayout aussehen soll, so das die Seite das beste Erlebnis für den Nutzer bietet. Dies wird die {{glossary("Information architecture")}} genannt. Bei einer sehr großen und komplexen Webseite, muss eine Menge Zeit für den Planungsprozess eingeplant werden. Für eine einfachere Webseite mit wenigen Webseiten ist es aber recht einfach und kann auch Spaß machen!</p>
+
+<ol>
+ <li>Denken Sie daran, welche Elemente auf allen Seiten gleich sein sollen, z.B. das Navigationsmenü und der Footerbereich. Wenn die Webseite für ein Buisness ist, dann ist es zum Beispiel sinnvoll, die Kontaktinformationen auf jeder Unterseite im Footer zu haben. Notieren Sie, was auf jeder Unterseite gleich sein soll. <img alt="the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy" src="https://mdn.mozillademos.org/files/12423/common-features.png" style="border-style: solid; border-width: 1px; display: block; height: 375px; margin: 0px auto; width: 600px;"></li>
+ <li>Als nächstes zeichnen Sie eine grobe Skizze, wie die Struktur der Webseite aussehen soll, auf ein Blatt Papier. Machen Sie das für jede Unterseite der Webpräsenz. Schreiben Sie dazu, für was jede der Sektionen ist. <img alt="A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer" src="https://mdn.mozillademos.org/files/12429/site-structure.png" style="border-style: solid; border-width: 1px; display: block; height: 232px; margin: 0px auto; width: 600px;"></li>
+ <li>Jetzt überlegen Sie welche Inhalte auf der Website zu finden sein sollen, welche nicht auf allen Unterseiten gleich sind. Schreiben Sie ruhig eine große Liste. <img alt="A long list of all the features that we could put on our travel site, from searching, to special offers and country-specific info" src="https://mdn.mozillademos.org/files/12425/feature-list.png" style="border-style: solid; border-width: 1px; display: block; height: 1066px; margin: 0px auto; width: 600px;"></li>
+ <li>Als nächstes, versuchen Sie ihre Inhalte in Gruppen aufzuteilen, um eine Ide zu bekommen, was zusammen auf einer Unterseite stehen könnte. <img alt="The items that should appear on a holiday site sorted into 5 categories: Search, Specials, Country-specific info, Search results, and Buy things" src="https://mdn.mozillademos.org/files/12421/card-sorting.png" style="border-style: solid; border-width: 1px; display: block; height: 579px; margin: 0px auto; width: 600px;"></li>
+ <li>Als letztes Skizzieren Sie eine grobe Sitemap - zeichnen Sie einen Kreis für jede Unterseite und ziehen Sie linien, um die Verlinkungen zwischen den Seiten deutlich zu machen. Wahrscheinlich ist die Startseite in der Mitte und von ihr gehen fast alle Links zu den Unterseiten. Die meisten Unterseiten einer kleinen Website, sollten über das Navigationsmenü zugänglich sein. Notieren Sie zusätzlich wie die Seiten präsentiert werden sollen. <img alt="A map of the site showing the homepage, country page, search results, specials page, checkout, and buy page" src="https://mdn.mozillademos.org/files/12427/site-map.png" style="border-style: solid; border-width: 1px; display: block; height: 872px; margin: 0px auto; width: 600px;"></li>
+</ol>
+
+<h3 id="Aktives_Lernen_Erstellen_Sie_eine_eigene_Sitemap">Aktives Lernen: Erstellen Sie eine eigene Sitemap</h3>
+
+<p>Probieren Sie die Schritte von oben selber aus, erstellen Sie eine Sitemap für eine eigene Webseite. Worüber würden Sie gerne eine Webseite machen?</p>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Speichern Sie Ihre Arbeit, eventuell möchten Sie diese später benutzen.</p>
+</div>
+
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+
+<p>Jetzt sollten Sie ein besseres Verständnis dafür haben, wie Webseiten strukturiert werden können und wie man eine Webpräsenz mit mehreren Unterseiten im Vorraus plant. Im letzten Artikel dieses Moduls geht es darum, Fehler im HTML Code zu finden und zu beheben.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">Using HTML sections and outlines</a>: Advanced guide to HTML5 semantic elements and the HTML5 outline algorithm.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}</p>
+
+
+
+<h2 id="In_diesem_Modul">In diesem Modul</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li>
+</ul>
diff --git a/files/de/learn/html/einführung_in_html/einfache_textformatierung_in_html/index.html b/files/de/learn/html/einführung_in_html/einfache_textformatierung_in_html/index.html
new file mode 100644
index 0000000000..dad40a05a9
--- /dev/null
+++ b/files/de/learn/html/einführung_in_html/einfache_textformatierung_in_html/index.html
@@ -0,0 +1,643 @@
+---
+title: Einfache Textformatierung in HTML
+slug: Learn/HTML/Einführung_in_HTML/Einfache_Textformatierung_in_HTML
+tags:
+  - Beginner
+  - Einführung in HTML
+  - HTML
+  - Lernen
+  - Listen
+  - Semantik
+  - Text
+  - Text formatieren
+  - Überschriften
+translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<p class="summary">Einer der Hauptaufgaben von HTML ist es, Text zu strukturieren und diesem eine bestimmte Bedeutung zu verleihen, damit der Browser den Text im richtigen Kontext darstellen kann.  In diesem Artikel wird erklärt, wie man mit {{glossary("HTML")}} Texte formattieren kann. Dazu gehört das hervorheben einzelner Textpassagen, als auch die Darstellung des Textblocks, zum Beispiel als Absatz, Liste oder als Überschrift.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Vorwissen:</th>
+   <td>Grundlagen von HTML, wie sie im Artikel <a href="/de/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Lerne HTML kennen</a> abgedeckt werden.</td>
+  </tr>
+  <tr>
+   <th scope="row">Ziel:</th>
+   <td>Erlernen von grundlegender Textformattierung - Benutzung von Absätzen, Überschriften, Listen, Hervorhebung von Textstellen und Zitate.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Überschriften_und_Absätze">Überschriften und Absätze</h2>
+
+<p>Meistens besteht Text aus Überschriften und Absätzen, egal ob Sie nun eine Geschichte, einen Zeitungsartikel, ein Magazin oder auf einer Webseite lesen.</p>
+
+<p><img alt="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs." src="https://mdn.mozillademos.org/files/12371/newspaper_small.jpg" style="display: block; margin: 0 auto;"></p>
+
+<p>Gut strukturierter Inhalt macht es sehr viel einfacher und angenehmer diesen zu lesen.</p>
+
+<p>In HTML wird ein Absatz durch ein {{htmlelement("p")}}-Element dargestellt, so zum Beispiel:</p>
+
+<pre class="brush: html">&lt;p&gt;Ich bin ein Absatz, ja das bin ich.&lt;/p&gt;</pre>
+
+<p>Jede Überschrift wird von Überschriften-Tags als solche gekennzeichnet:</p>
+
+<pre class="brush: html">&lt;h1&gt;Ich bin der Titel einer Geschichte.&lt;/h1&gt;</pre>
+
+<p>Es gibt sechs verschiedene Überschriften-Elemente — {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}} and {{htmlelement("h6")}}. Jedes dieser Elemente repräsentiert eine andere Gewichtung des Inhalts im Dokument. <code>&lt;h1&gt;</code> repräsentiert die Hauptüberschrift, <code>&lt;h2&gt;</code> repräsentiert Unterüberschriften, <code>&lt;h3&gt;</code> repräsentiert Unter-Überschriften und so weiter.</p>
+
+<h3 id="Struktur_schaffen">Struktur schaffen</h3>
+
+<p>Als Beispiel würden in einer Geschichte <code>&lt;h1&gt;</code> zum ausweisen des Titels genutzt, <code>&lt;h2&gt;</code> für die Kapitelüberschriften und <code>&lt;h3&gt;</code> um ein Kapitel in mehrere Sektionen zu unterteilen.</p>
+
+<pre class="brush: html">&lt;h1&gt;Die erdrückende Langeweile&lt;/h1&gt;
+
+&lt;p&gt;Von Chris Mills&lt;/p&gt;
+
+&lt;h2&gt;Kapitel 1: Die dunkle Nacht&lt;/h2&gt;
+
+&lt;p&gt;Es war eine dunkle Nacht. Irgendwo hörte man eine Eule rufen. Der Regen strömte herab auf... &lt;/p&gt;
+
+&lt;h2&gt;Kapitel 2: Die ewige Stille&lt;/h2&gt;
+
+&lt;p&gt;Unser Protagonist kann gerade so aus dem Schatten heraus flüstern...&lt;/p&gt;
+
+&lt;h3&gt;Der Geist spricht&lt;/h3&gt;
+
+&lt;p&gt;Nachdem mehrere Stunden der Stille vorbei gegangen waren, setzte sich plötzlich der Geist aufrecht hin und rief "Bitte habt erbarmen mit meiner Seele!"&lt;/p&gt;</pre>
+
+<p>Sie können selber entscheiden, wie Sie Struktur in Ihre Texte bringen wollen, so lange die Hierarchie Sinn ergibt. Hier geben wir Ihnen ein paar Ratschläge, um sinnvolle Strukturen zu erschaffen:</p>
+
+<ul>
+ <li>Sie sollten möglichst nur eine einzige <code>&lt;h1&gt;</code>-Überschrift pro Seite haben — dies ist die Hauptüberschrift des Dokuments und alle anderen Überschriften gehören darunter.</li>
+ <li>Gehen Sie sicher, das Sie die Überschriften in der richtigen Reihenfolge nutzen. Nutzen Sie nicht <code>&lt;h3&gt;'</code> , um Kapitelüberschriften zu kennzeichnen und darunter dann <code>&lt;h2&gt;'</code>, um Unterüberschriften im Kapitel anzuzeigen, denn das macht keinen Sinn und führt zu merkwürdigen Resultaten.</li>
+ <li>Von den sechs Überschiftenordnungen die es gibt, sollten Sie möglichst nicht mehr als drei pro Seite benutzen, es sei denn es ist wirklich nötig. Dokumente mit zu viel Hierarchien bringen mehr Aufwand mit sich und sie sind schwieriger zu navigieren. Es wäre sinnvoller den entsprechenden Inhalt auf mehrere Seiten zu verteilen.</li>
+</ul>
+
+<h3 id="Wieso_brauchen_wir_Struktur">Wieso brauchen wir Struktur?</h3>
+
+<p>Um diese Frage zu beantworten, schauen wir uns folgendes Dokument an: <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> Dieses Dokument (ein leckeres Hummus-Rezept) wird uns den ganzen Artikel lang begleiten, also speichern Sie am besten jetzt gleich eine Kopie davon auf Ihrem Computer, um daran mitzuarbeiten. Der <code>body</code> des Dokuments enthält im Moment eine Reihe von Inhalten, welche nicht wirklich strukturiert sind. Einzig ein paar Zeilenumbrüche wurden in dem HTML-Dokument genutzt, um Inhalte voneinander zu trennen (es wurde Enter/Return gedrückt, um zur nächsten Zeile zu springen).</p>
+
+<p>Wenn Sie dieses Dokument im Browser öffnen, werden Sie feststellen, das der Text in einem großen Block angezeigt wird! Die Zeilenumbrüche werden also komplett ignorert.</p>
+
+<p><img alt="Eine Webseite, auf welcher ein unformatiertes Hummus-Rezept zu lesen ist. Es gibt keine Elemente die dem Dokument Struktur geben." src="https://mdn.mozillademos.org/files/15527/hummus-rezept-unformatiert.jpg" style="border: 1px solid grey; display: block; margin: 0px auto; width: 755px;"></p>
+
+<p>Der Browser findet keine Elemente, die dem Dokument eine Struktur geben, er kann nicht von selbst erkennen was Überschriften, Zeilenumbrüche und Absätze sind. Nachteile einer strukturlosen Webseite:</p>
+
+<ul>
+ <li>Neue Benutzer einer Webseite scannen diese als erstes nach relevanten Inhalten durch, lesen oft nur die Überschriften und hervorgehobene Textstellen. Wenn Sie nichts brauchbares innerhalb einiger Sekunden finden, dann werden sie die Webseite wieder verlassen.</li>
+ <li>Suchmaschinen indexieren Ihre Webseite auch anhand der Überschriften. Ohne Überschriften würde eine Webseite sehr schlecht in den Suchergebnissen abschneiden. Stichwort: {{glossary("SEO")}} (Suchmaschinenoptimierung).</li>
+ <li>Menschen mit Sehbehinderung können eine Webseite nicht lesen. Anstatt dessen wandeln Bildschirmlesegeräte, so genannte Screenreader, die Webseite in gesprochenen Text um. Diese Screenreader benötigen oft die Überschriften eines Dokuments, um die Navigation durch die Webseite zu ermöglichen. Ansonsten würde immer das ganze Dokument komplett vorgelesen, anstatt den Teilen die wirklich von Interesse sind.</li>
+ <li>Um den Inhalt mit {{glossary("CSS")}} zu stylen oder mit {{glossary("JavaScript")}} interessante Dinge tun zu lassen, braucht es den Inhalt umschließende Elemente, welche als Ziel genutzt werden können.</li>
+</ul>
+
+<p>Daher müssen wir unserem Text eine sinnvolle Auszeichnung geben.</p>
+
+<h3 id="Aktives_Lernen_Unserem_Inhalt_Struktur_geben">Aktives Lernen: Unserem Inhalt Struktur geben</h3>
+
+<p>Lassen Sie uns gleich mit einem interaktiven Beispiel beginnen. Ändern Sie den rohen Text im <em>Input</em>-Feld mittels HTML-Auszeichnungen so, das im <em>Output</em>-Feld eine Überschrift mit zwei Absätzen darunter erscheint.</p>
+
+<p>Wenn Sie einen Fehler machen, können sie mit dem <em>Reset</em>-Button ganz einfach den Ausgangszustand wieder herstellen. Wenn Sie wirklich nicht wissen wie es geht, können Sie die Lösung anzeigen lassen indem Sie auf <em>Lösung anzeigen</em> klicken.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;h2&gt;Input&lt;/h2&gt;
+&lt;textarea id="code" class="input"&gt;Meine Kurzgeschichte
+
+Ich bin eine Polizeifrau und mein Name ist Trish.
+
+Meine Beine sind aus Pappkarton und ich bin verheiratet mit einem Fisch.
+&lt;/textarea&gt;
+&lt;h2&gt;Output&lt;/h2&gt;
+&lt;div class="output"&gt;&lt;/div&gt;
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+  &lt;input id="solution" type="button" value="Lösung anzeigen" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">body {
+  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
+}
+
+.input, .output {
+  width: 90%;
+  height: 8em;
+  padding: 10px;
+  border: 1px solid #0095dd;
+  overflow: auto;
+}
+
+button {
+  padding: 10px 10px 10px 0;
+}
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var code = textarea.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+function drawOutput() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+textarea.value = '&lt;h1&gt;Meine Kurzgeschichte&lt;/h1&gt;\n&lt;p&gt;Ich bin eine Polizeifrau und mein Name ist Trish.&lt;/p&gt;\n&lt;p&gt;Meine Beine sind aus Pappkarton und ich bin verheiratet mit einem Fisch.&lt;/p&gt;';
+  drawOutput();
+});
+
+textarea.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 500) }}</p>
+
+<h3 id="Warum_brauchen_wir_Semantik">Warum brauchen wir Semantik?</h3>
+
+<p>Wir verlassen uns die ganze Zeit auf Semantik - wir beruhen uns auf Ereignisse, die wir erlebt haben, um die Funktion von Dingen um uns herum zu beurteilen. Wenn wir etwas sehen, dann wissen wir was für eine Funktion dieses haben wird. Zum Beispiel erwarten wir, dass eine rote Ampel "Stop" bedeutet, während ein grünes Ampellicht uns erlaubt weiterzufahren. Dinge können schnell aus dem Ruder laufen, wenn Semantik falsch genutzt wird. (Zum Beispiel wäre es in einem Land, in welchem das rote Ampellicht "Fahren" bedeutet, vielleicht nicht so sicher).</p>
+
+<p>Genauso müssen wir bei unseren Elementen aufpassen, diesen die richtige Bedeutung, Funktion und das entsprechende Aussehen zukommen zu lassen. In diesem Kontext ist das {{htmlelement("h1")}}-Element auch ein sematisches Element, welches dem Text innerhalb der Tags die Rolle bzw. Bedeutung einer "Top-Level-Hauptüberschrift für die Webseite" gibt.</p>
+
+<pre class="brush: html">&lt;h1&gt;Dies ist eine Hauptüberschrift.&lt;/h1&gt;</pre>
+
+<p>Automatisch gibt der Browser diesem Element eine große Schriftgröße, damit es aussieht, wie eine Überschrift (auch wenn Sie es mittels CSS so stylen können, wie sie möchten). Wichtiger noch, der semantische Wert des Elements wird auf verschiedene Weise genutzt. Zum Beispiel greifen Suchmaschinen und Bildschirmlesegeräte darauf zurück (wie oben erklärt).</p>
+
+<p>Sie können jedes Element so <em>aussehen</em> lassen, wie eine Überschrift. Zum Beispiel wie folgt:</p>
+
+<pre class="brush: html">&lt;span style="font-size: 32px; margin: 21px 0;"&gt;Ist dies eine Top-Level-Überschrift?&lt;/span&gt;</pre>
+
+<p>Dies ist ein {{htmlelement("span")}}-Element. Es hat keinerlei semantischen Wert. Sie benutzen dieses Element, um Inhalt zu verpacken und als Ziel für CSS oder JavaScript zu nutzen, ohne ihm eine besondere Bedeutung zukommen zu lassen. (Sie werden später mehr darüber heraus finden.) Wir haben CSS benutzt, um dem Text das Aussehen einer Überschrift zu geben. Da es aber keinen sematischen Wert hat, bekommt dieser Text nicht die selbe Bedeutung wie ein echtes Überschriften-Element. Es ist also besser, das richtige HTML-Element für den richtigen Job zu benutzen, auch wenn es anders gehen mag.</p>
+
+<h2 id="Listen">Listen</h2>
+
+<p>Lassen Sie uns nun Listen anschauen. Listen gibt es überall - von Ihrem Einkaufszettel, über die Liste an Direktionen, welche Sie unbewusst befolgen, um jeden Tag Ihr Haus wiederzufinden, bis hin zu den Listen an Instruktionen, die sie in diesen Tutorials befolgen! Auch im Internet treffen Sie ständig auf Listen. Wir haben hier drei verschiedene Typen, welche Sie auf Ihren Webseiten benutzen können.</p>
+
+<h3 id="Ungeordnete_Listen">Ungeordnete Listen</h3>
+
+<p>Ungeordnete Listen werden benutzt, um eine Auflistung von Punkten zu erzeugen, bei der die Reihenfolge keine Rolle spielt - als Beispiel nehmen wir eine Einkaufsliste:</p>
+
+<pre>Milch
+Eier
+Brot
+Hummus</pre>
+
+<p>Eine ungeordnete Liste startet mit dem {{htmlelement("ul")}}-Element, welches die einzelnen Listenelemente einhüllt:</p>
+
+<pre class="brush: html">&lt;ul&gt;
+Milch
+Eier
+Brot
+Hummus
+&lt;/ul&gt;</pre>
+
+<p>Die einzelnen Listenpunkte selbst, werden jeweils von einem {{htmlelement("li")}}-Element umschlossen:</p>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;Milch&lt;/li&gt;
+  &lt;li&gt;Eier&lt;/li&gt;
+  &lt;li&gt;Brot&lt;/li&gt;
+  &lt;li&gt;Hummus&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="Aktives_Lernen_Eine_ungeordnete_Liste_auszeichnen">Aktives Lernen: Eine ungeordnete Liste auszeichnen</h4>
+
+<p>Versuchen Sie das Beispiel unten so zu ändern, dass Sie eine eigene ungeordnete Liste bekommen.</p>
+
+<div class="hidden">
+<h6 id="Playable_code_2">Playable code</h6>
+
+<pre class="brush: html">&lt;h2&gt;Input&lt;/h2&gt;
+&lt;textarea id="code" class="input"&gt;Milch
+Eier
+Brot
+Hummus&lt;/textarea&gt;
+&lt;h2&gt;Output&lt;/h2&gt;
+&lt;div class="output"&gt;&lt;/div&gt;
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+  &lt;input id="solution" type="button" value="Lösung anzeigen" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">body {
+  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
+}
+
+.input, .output {
+  width: 90%;
+  height: 6em;
+  padding: 10px;
+  border: 1px solid #0095dd;
+  overflow: auto;
+}
+
+button {
+  padding: 10px 10px 10px 0;
+}
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var code = textarea.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+function drawOutput() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+textarea.value = '&lt;ul&gt;\n&lt;li&gt;Milch&lt;/li&gt;\n&lt;li&gt;Eier&lt;/li&gt;\n&lt;li&gt;Brot&lt;/li&gt;\n&lt;li&gt;Hummus&lt;/li&gt;\n&lt;/ul&gt;';
+  drawOutput();
+});
+
+textarea.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', 700, 400) }}</p>
+
+<h3 id="Geordnete_Listen">Geordnete Listen</h3>
+
+<p>Geordnete Listen sind Listen bei denen die Anordnung der Listenelemente wichtig ist - zum Beispiel bei einer Wegbeschreibung:</p>
+
+<pre>Fahre bis zum Ende der Straße
+Biege rechts ab
+Fahre geradeaus über die nächsten beiden Verkehrskreisel
+Biege nach dem dritten Kreisel links ab
+Nach 300 Metern ist die Schule auf der rechten Seite
+</pre>
+
+<p>Die Auszeichnungsstruktur is dieselbe wie für die ungeordnete Liste, außer das Sie die Listenpunke in ein {{htmlelement("ol")}}-Element einhüllen müssen, anstatt einem <code>&lt;ul&gt;</code>-Element:</p>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;Fahre bis zum Ende der Straße&lt;/li&gt;
+  &lt;li&gt;Biege rechts ab&lt;/li&gt;
+  &lt;li&gt;Fahre geradeaus über die nächsten beiden Verkehrskreisel&lt;/li&gt;
+  &lt;li&gt;Biege nach dem dritten Kreisel links ab&lt;/li&gt;
+  &lt;li&gt;Nach 300 Metern ist die Schule auf der rechten Seite&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h3 id="Aktives_Lernen_Eine_geordnete_Liste_auszeichnen">Aktives Lernen: Eine geordnete Liste auszeichnen</h3>
+
+<p>Bearbeiten Sie unten das Beispiel in der Codebox, so das Sie eine geordnete Liste bekommen:</p>
+
+<div class="hidden">
+<h6 id="Playable_code_3">Playable code</h6>
+
+<pre class="brush: html">&lt;h2&gt;Input&lt;/h2&gt;
+&lt;textarea id="code" class="input"&gt;Fahre bis zum Ende der Straße
+Biege rechts ab
+Fahre geradeaus über die nächsten beiden Verkehrskreisel
+Biege nach dem dritten Kreisel links ab
+Nach 300 Metern ist die Schule auf der rechten Seite&lt;/textarea&gt;
+&lt;h2&gt;Output&lt;/h2&gt;
+&lt;div class="output"&gt;&lt;/div&gt;
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+  &lt;input id="solution" type="button" value="Lösung anzeigen" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">body {
+  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
+}
+
+.input, .output {
+  width: 90%;
+  height: 8em;
+  padding: 10px;
+  border: 1px solid #0095dd;
+  overflow: auto;
+}
+
+button {
+  padding: 10px 10px 10px 0;
+}
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var code = textarea.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+function drawOutput() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+textarea.value = '&lt;ol&gt;\n&lt;li&gt;Fahre bis zum Ende der Straße&lt;/li&gt;\n&lt;li&gt;Biege rechts ab&lt;/li&gt;\n&lt;li&gt;Fahre geradeaus über die nächsten beiden Verkehrskreisel&lt;/li&gt;\n&lt;li&gt;Biege nach dem dritten Kreisel links ab&lt;/li&gt;\n&lt;li&gt;Nach 300 Metern ist die Schule auf der rechten Seite&lt;/li&gt;\n&lt;/ol&gt;';
+  drawOutput();
+});
+
+textarea.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_3', 700, 500) }}</p>
+
+<h3 id="Aktives_Lernen_Das_Hummus-Rezept_auszeichnen">Aktives Lernen: Das Hummus-Rezept auszeichnen</h3>
+
+<p>An diesem Punkt sollten Sie alle Informationen haben, die Sie brauchen, um unser Hummus-Rezept auf einer Seite mit HTML zu strukturieren. Sie können entweder die <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">hummus-rezept.html</a> Datei herunterladen und lokal auf Ihrem Computer bearbeiten oder die editierbare Codebox unten benutzen. Nur wenn Sie die Aufgabe lokal bearbeiten, können Sie diese auch speichern, um Sie sich später noch einmal anzuschauen. Was Sie im Browser bearbeiten ist beim nächsten Besuch verloren. Also überlegen Sie es, wie Sie es machen möchten.</p>
+
+<div class="hidden">
+<h6 id="Playable_code_4">Playable code</h6>
+
+<pre class="brush: html">&lt;h2&gt;Input&lt;/h2&gt;
+&lt;textarea id="code" class="input"&gt;Schnelles Hummus Rezept
+
+    Mit diesem Rezept können Sie schnell und ganz ohne eine Sauerei in der Küche, ein leckeres Hummus zubereiten. Es basiert auf verschiedenen Rezepten, die ich ausprobiert habe über die Jahre.
+
+    Hummus ist eine leckere, dicke Paste, welche vor allem in Gerichten aus Griechenland und dem Mittleren Osten Verwendung findet. Es schmeckt sehr gut zu Salaten, gegrilltem Fleisch und Pita-Brot.
+
+
+    Zutaten
+
+    1 Dose (400g) Kichererbsen
+    175g Tahini
+    6 getrocknete Tomaten
+    eine halbe Schote rote Paprika
+    eine Messerspitze Cayenne Pfeffer
+    1 Knoblauchzehe
+    ein Spritzer Olivenöl
+
+
+    Zubereitung
+
+    Schälen Sie den Knoblauch und hacken ihn in grobe Stücke.
+    Entfernen Sie den Stiel und die Samen der Paprika, hacken Sie diese dann in grobe Stücke.
+    Tun Sie alle Zutaten zusammen in eine Küchenmaschine.
+    Pürieren Sie die Zutaten zu einer Paste.
+    Wenn Sie einen groben Hummus bevorzugen, pürieren Sie die Zutaten nicht zu lange.
+    Wenn Sie einen feinen Hummus haben möchten, pürieren Sie die Zutaten etwas länger.
+
+    Für einen etwas anderen Geschmack, probieren Sie kleine Mengen von Zitrone und Koriander, Chilischoten, Limonen und Chipotle-Paprika, Harissa und Minze oder Spinat und Feta-Käse mit hinein zu tun. Experimentieren Sie, um herauszufinden, was Ihnen am besten schmeckt.
+
+
+    Aufbewahrung
+
+    Bewahren Sie das Hummus in einem geschlossenen Gefäß im Kühlschrank auf. Es sollte sich bis zu einer Woche halten, nachdem Sie es frisch gemacht haben. Wenn es anfängt komisch auszusehen, dann sollten Sie es wegwerfen.
+
+    Hummus lässt sich einfrieren. Sie sollten es dann innerhalb einiger Monate wieder auftauen und verbrauchen.&lt;/textarea&gt;
+&lt;h2&gt;Output&lt;/h2&gt;
+&lt;div class="output"&gt;&lt;/div&gt;
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+  &lt;input id="solution" type="button" value="Lösung anzeigen" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">body {
+  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
+}
+
+.input, .output {
+  width: 90%;
+  height: 8em;
+  padding: 10px;
+  border: 1px solid #0095dd;
+  overflow: auto;
+}
+
+button {
+  padding: 10px 10px 10px 0;
+}
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var code = textarea.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+function drawOutput() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+  textarea.value = ' &lt;h1&gt;Schnelles Hummus Rezept&lt;/h1&gt;\n\n&lt;p&gt;Mit diesem Rezept können Sie schnell und ganz ohne eine Sauerei in der Küche, ein leckeres Hummus zubereiten. Es basiert auf verschiedenen Rezepten, die ich ausprobiert habe über die Jahre.&lt;/p&gt;\n\n&lt;p&gt;Hummus ist eine leckere, dicke Paste, welche vor allem in Gerichten aus Griechenland und dem Mittleren Osten Verwendung findet. Es schmeckt sehr gut zu Salaten, gegrilltem Fleisch und Pita-Brot.&lt;/p&gt;\n\n&lt;h2&gt;Zutaten&lt;/h2&gt;\n\n&lt;ul&gt;\n&lt;li&gt;1 Dose (400g) Kichererbsen&lt;/li&gt;\n&lt;li&gt;175g Tahini&lt;/li&gt;\n&lt;li&gt;6 getrocknete Tomaten&lt;/li&gt;\n&lt;li&gt;eine halbe Schote rote Paprika&lt;/li&gt;\n&lt;li&gt;eine Messerspitze Cayenne Pfeffer&lt;/li&gt;\n&lt;li&gt;1 Knoblauchzehe&lt;/li&gt;\n&lt;li&gt;ein Spritzer Olivenöl&lt;/li&gt;\n&lt;/ul&gt;\n\n&lt;h2&gt;Zubereitung&lt;/h2&gt;\n\n&lt;ol&gt;\n&lt;li&gt;Schälen Sie den Knoblauch und hacken ihn in grobe Stücke.&lt;/li&gt;\n&lt;li&gt;Entfernen Sie den Stiel und die Samen der Paprika, hacken Sie diese dann in grobe Stücke.&lt;/li&gt;\n&lt;li&gt;Tun Sie alle Zutaten zusammen in eine Küchenmaschine.&lt;/li&gt;\n&lt;li&gt;Pürieren Sie die Zutaten zu einer Paste.&lt;/li&gt;\n&lt;li&gt;Wenn Sie einen groben Hummus bevorzugen, pürieren Sie die Zutaten nicht zu lange.&lt;/li&gt;\n&lt;li&gt;Wenn Sie einen feinen Hummus haben möchten, pürieren Sie die Zutaten etwas länger.&lt;/li&gt;\n&lt;/ol&gt;\n\n&lt;p&gt;Für einen etwas anderen Geschmack, probieren Sie kleine Mengen von Zitrone und Koriander, Chilischoten, Limonen und Chipotle-Paprika, Harissa und Minze oder Spinat und Feta-Käse mit hinein zu tun. Experimentieren Sie, um herauszufinden, was Ihnen am besten schmeckt.&lt;/p&gt;\n\n&lt;h2&gt;Aufbewahrung&lt;/h2&gt;\n\n&lt;p&gt;Bewahren Sie das Hummus in einem geschlossenen Gefäß im Kühlschrank auf. Es sollte sich bis zu einer Woche halten, nachdem Sie es frisch gemacht haben. Wenn es anfängt komisch auszusehen, dann sollten Sie es wegwerfen.&lt;/p&gt;\n\n&lt;p&gt;Hummus lässt sich einfrieren. Sie sollten es dann innerhalb einiger Monate wieder auftauen und verbrauchen.&lt;/p&gt;';
+  drawOutput();
+});
+
+textarea.addEventListener("input", drawOutput);
+
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_4', 700, 500) }}</p>
+
+<p>Wenn Sie es nicht selber schaffen, dann können Sie mit einem Klick auf <em>Lösung anzeigen</em> sehen, wie es gemacht wird oder unser ausgzeichnetes Beispiel, <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-complete.html">text-complete.html</a>, auf GitHub anschauen.</p>
+
+<h3 id="Listen_ineinander_schachteln">Listen ineinander schachteln</h3>
+
+<p>Listen können ineinander verschachtelt werden. Vielleicht möchten Sie Unterpunke unter einem Listenpunkt haben. Lassen Sie uns das anhand der zweiten Liste in unserem Rezept anschauen:</p>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;Schälen Sie den Knoblauch und hacken ihn in grobe Stücke.&lt;/li&gt;
+  &lt;li&gt;Entfernen Sie den Stiel und die Samen der Paprika, hacken Sie diese dann in grobe Stücke.&lt;/li&gt;
+  &lt;li&gt;Tun Sie alle Zutaten zusammen in eine Küchenmaschine.&lt;/li&gt;
+  &lt;li&gt;Pürieren Sie die Zutaten zu einer Paste.&lt;/li&gt;
+  &lt;li&gt;Wenn Sie einen groben Hummus bevorzugen, pürieren Sie die Zutaten nicht zu lange.&lt;/li&gt;
+  &lt;li&gt;Wenn Sie einen feinen Hummus haben möchten, pürieren Sie die Zutaten etwas länger.&lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<p>Da die letzten beiden Listenpunkte sich auf den Punkt davor beziehen, könnte man diese zusammen unter dem vierten Listenpunkt einordnen, in einer ungeordneten Liste. Das würde so aussehen:</p>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;Schälen Sie den Knoblauch und hacken ihn in grobe Stücke.&lt;/li&gt;
+  &lt;li&gt;Entfernen Sie den Stiel und die Samen der Paprika, hacken Sie diese dann in grobe Stücke.&lt;/li&gt;
+  &lt;li&gt;Tun Sie alle Zutaten zusammen in eine Küchenmaschine.&lt;/li&gt;
+  &lt;li&gt;Pürieren Sie die Zutaten zu einer Paste.&lt;/li&gt;
+  &lt;ul&gt;
+    &lt;li&gt;Wenn Sie einen groben Hummus bevorzugen, pürieren Sie die Zutaten nicht zu lange.&lt;/li&gt;
+    &lt;li&gt;Wenn Sie einen feinen Hummus haben möchten, pürieren Sie die Zutaten etwas länger.&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/ol&gt;
+</pre>
+
+<p>Gehen Sie zurück zur obigen Aufgabe und fügen Sie eine Liste einer der vorhandenen beiden Listen hinzu. Wenn Sie damit fertig sind, sollte das Rezept so ähnlich aussehen:</p>
+
+<p><img alt="Eine Webseite, auf welcher ein formatiertes Hummus-Rezept zu lesen ist. Es gibt mehrere Elemente die dem Dokument Struktur geben." src="https://mdn.mozillademos.org/files/15529/hummus-rezept-formatiert.jpg" style="border: 1px solid grey; display: block; margin: 0px auto; width: 755px;"></p>
+
+<h2 id="Betonung_und_Wichtigkeit">Betonung und Wichtigkeit</h2>
+
+<p>Während wir sprechen, betonen wir oft bestimmte Wörter, um Ihre Bedeutung im Satz zu ändern. Solche Wörter möchten wir in einem Text hervorheben. HTML stellt verschiedene sematnische Elemente zur Verfügung, um dies zu bewerkstelligen. In dieser Sektion schaune wir uns einige der geläufigsten Formen davon an.</p>
+
+<h3 id="Betonung">Betonung</h3>
+
+<p>Wenn wir eine bestimmte Betonung in der gesprochenen Sprache erreichen wollen, dann heben wir bestimmte Wörter hervor, um ihre Bedeutung leicht zu verändern. Ähnlich heben wir solche Wörter in geschriebener Sprache hervor, indem wir ein Wort <em>kursiv</em> schreiben. Zum Beispiel haben die folgenden beiden Sätze eine unterschiedliche Bedeutung.</p>
+
+<p>Ich bin froh, dass du nicht zu spät bist.</p>
+
+<p>Ich bin <em>froh</em>, dass du nicht <em>zu spät</em> bist.</p>
+
+<p>Der erste Satz klingt danach, das jemand wirklich erleichtert ist, das die Person nicht zu spät ist, der zweite Satz klingt hingegen eher sarkastisch, mit einem Klang von Vorwurf, da die Person sich etwas verspätet hatte.</p>
+
+<p>In HTML benutzen wir das {{htmlelement("em")}}-Element (von engl.:emphasis = Betonung), um solche Wörter hervorzuheben. Es macht ein Dokument etwas interessanter zu lesen. Auch Bildschrimlesegeräte können so eine besondere Betonung erkennen und nutzen. Browser zeigen den Text im Element normalerweise kursiv an, doch Sie sollten das Tag nicht einizig dazu benutzen, Text kursiv anzuzeigen. Um das zu erreichen können Sie entweder das {{htmlelement("span")}}-Element und CSS nutzen oder auch das {{htmlelement("i")}}-Element (siehe weiter unten).</p>
+
+<pre class="brush: html">&lt;p&gt;Ich bin &lt;em&gt;froh&lt;/em&gt; dass du nicht &lt;em&gt;zu spät&lt;/em&gt;bist.&lt;/p&gt;</pre>
+
+<h3 id="Wichtige_Wörter">Wichtige Wörter</h3>
+
+<p>Um wichtige Wörter hervorzuheben, betonen wir diese in der gesprochenen Sprache sehr stark und schreiben diese in <strong>Fettschrift</strong> in geschriebener Sprache. Zum Beispiel:</p>
+
+<p>Diese Flüssigkeit ist <strong>sehr giftig</strong>.</p>
+
+<p>Ich zähle auf dich. <strong>Sei nicht</strong> zu spät!</p>
+
+<p>In HTML benutzen wir das {{htmlelement("strong")}}-Element (engl.: <em>strong</em> = stark/fett) um solche Wörter hervorzuheben. Es macht das Dokument lesbarer und auch hier können Screenreader erkennen, dass Wörter besonders betont ausgelesen werden sollten. Browser zeigen den Inhalt dieses Elements in Fettschrift an, aber Sie sollten diesen Tag nicht alleine dafür verwenden, Schrift fett erscheinen zu lassen. Um das zu erreichen können Sie entweder das {{htmlelement("span")}}-Element und CSS nutzen oder auch das {{htmlelement("b")}}-Element (siehe weiter unten).</p>
+
+<pre class="brush: html">&lt;p&gt;Diese Flüssigkeit ist &lt;strong&gt;sehr giftig&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;p&gt;Ich zähle auf dich. &lt;strong&gt;Sei nicht&lt;/strong&gt; zu spät!&lt;/p&gt;</pre>
+
+<p>Sie können <code>&lt;strong&gt;</code>-Elemente und <code>&lt;em&gt;</code>-Elemente ineinander verschachteln:</p>
+
+<pre class="brush: html">&lt;p&gt;Diese Flüssigkeit ist &lt;strong&gt;sehr giftig&lt;/strong&gt; —
+wenn Sie diese trinken, &lt;strong&gt;dann werden Sie &lt;em&gt;sterben&lt;/em&gt;&lt;/strong&gt;.&lt;/p&gt;</pre>
+
+<h3 id="Aktives_Lernen_Lassen_Sie_uns_wichtig_sein!">Aktives Lernen: Lassen Sie uns wichtig sein!</h3>
+
+<p>In diesem Aktives-Lernen-Beispiel, haben wir editierbaren Code. Probieren Sie nun <code>&lt;strong&gt;</code>-Elemente und <code>&lt;em&gt;</code>-Elemente einzufügen, um bestimmte Textstellen besonders hervorzuheben. Üben Sie ein wenig, diese HTML-Elemente hinzuzufügen und auch zu verschachteln.</p>
+
+<div class="hidden">
+<h6 id="Playable_code_5">Playable code</h6>
+
+<pre class="brush: html">&lt;h2&gt;Input&lt;/h2&gt;
+&lt;textarea id="code" class="input"&gt;&lt;h1&gt;Wichtige Nachricht&lt;/h1&gt;
+
+&lt;p&gt;Am Sonntag den 9. Januar 2010 wurde eine Gang Goths gesehen, wie sie mehrere Gartenzwerge aus einem Einkaufszentrum, im Stadtzentrum von Milwaukee, geklaut haben. Sie haben alle grüne Anzüge und komische Hüte getragen. Sie scheinen sich dabei großartig amüsiert zu haben. Wenn irgendjemand Informationen zu diesem Vorfall haben, bittet die Polizei darum, kontaktiert zu werden.&lt;/p&gt;&lt;/textarea&gt;
+&lt;h2&gt;Output&lt;/h2&gt;
+&lt;div class="output"&gt;&lt;/div&gt;
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+  &lt;input id="solution" type="button" value="Lösung anzeigen" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">body {
+  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
+}
+
+.input, .output {
+  width: 90%;
+  height: 8em;
+  padding: 10px;
+  border: 1px solid #0095dd;
+  overflow: auto;
+}
+
+button {
+  padding: 10px 10px 10px 0;
+}
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var code = textarea.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+function drawOutput() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+  textarea.value = '&lt;h1&gt;Wichtige Nachricht&lt;/h1&gt;\n&lt;p&gt;Am &lt;strong&gt;Sonntag den 9. Januar 2010&lt;/strong&gt;, wurde eine Gang &lt;em&gt;Goths&lt;/em&gt; gesehen, wie sie &lt;strong&gt;&lt;em&gt;mehrere&lt;/em&gt; Gartenzwerge&lt;/strong&gt; aus einem Einkaufszentrum, im Stadtzentrum von &lt;strong&gt;Milwaukee&lt;/strong&gt; geklaut haben. Sie haben alle &lt;em&gt;grüne Anzüge&lt;/em&gt; und &lt;em&gt;komische Hüte&lt;/em&gt;,  getragen. Sie scheinen sich dabei großartig amüsiert zu haben. Wenn irgendjemand &lt;strong&gt;Informationen&lt;/strong&gt; zu diesem Vorfall haben, bittet die Polizei darum, &lt;strong&gt;sofort&lt;/strong&gt; kontaktiert zu werden.&lt;/p&gt;';
+  drawOutput();
+});
+
+textarea.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_5', 700, 500) }}</p>
+
+<h3 id="Kursiv_fett_unterstrichen...">Kursiv, fett, unterstrichen...</h3>
+
+<p>Die beiden Elemente, die wir oben besprochen haben, haben eine eindeutige semantische Bedeutung. Die Situation ist etwas anders mit den {{htmlelement("b")}}, {{htmlelement("i")}} und {{htmlelement("u")}}-Elementen. Sie wurden erschaffen, um Leuten die Möglichkeit zu geben Text in fett (engl.:<em><strong>b</strong>old</em>), kursiv (engl.:<em><strong>i</strong>talic</em>) oder unterstrichen (engl.:<em><strong>u</strong>nderlined</em>) anzuzeigen, in einer Zeit in welcher CSS noch nicht von allen Browsern unterstützt wurde. Solche Elemente, welche nur das Aussehen, aber nicht die Bedeutung, verändern, nennt man auch <strong>präsentationsbezogenes Element</strong>. Sie sollten nach Möglichkeit nicht mehr benutzt werden, denn wie wir gesehen haben, ist eine gute Semantik sehr wichtig für Suchmaschinen und Barrierefreiheit.</p>
+
+<p>In HTML5 wurden <code>&lt;b&gt;</code>, <code>&lt;i&gt;</code> und <code>&lt;u&gt;</code> neu definiert, mit einer etwas verwirrenden semantischen Bedeutung.</p>
+
+<p>Hier ist die beste Faustregel dafür: es ist wahrscheinlich in Ordnung <code>&lt;b&gt;</code>, <code>&lt;i&gt;</code> oder <code>&lt;u&gt;</code> zu benutzen, um die Bedeutung der traditionellen Nutzung von fettem, kursivem oder unterstrichenem Text zu geben, wenn es kein passenderes Element gibt. Denken Sie aber immer auch an die Barrierefreiheit Ihrer Webseite. Leute, welche Screenreader benutzen, können mit kursivem Text, ohne Bedeutung, nichts anfangen. Auch funktioniert es möglicherweise nicht mit einem anderen, als dem Lateinischen Buchstabensystem.</p>
+
+<ul>
+ <li>{{HTMLElement('i')}} wird benutzt, um die traditionelle Rolle von kursivem Text anzuzeigen: Fremdwörter, Taxonomische Begriffe, Fachwörter, Gedanken...</li>
+ <li>{{HTMLElement('b')}} wird benutzt, um die traditionelle Rolle von fettem Text anzuzeigen: Stichwörter, Produktnamen, wichtige Sätze...</li>
+ <li>{{HTMLElement('u')}} wird benutzt, um die traditionelle Rolle von unterstrichenem Text anzuzeigen: richtige Namen, Rechtschreibfehler...</li>
+</ul>
+
+<div class="note">
+<p><strong>Hinweis:</strong>Eine Warnung zu unterstrichenem Text: <strong>Unterstrichener Text wird stark mit Hyperlinks assoziiert.</strong> Deswegen ist es auf Webseiten besser, nur Links zu unterstreichen. Benutzen Sie das <code>&lt;u&gt;</code>-Element, wo es passt, aber passen Sie möglicherweise mit CSS an, damit der Text anders aussieht, als die Links auf Ihrer Webseite. Unten können Sie sehen, wie das gemacht werden kann.</p>
+</div>
+
+<pre class="brush: html">&lt;!-- Wissenschaftliche Namen --&gt;
+&lt;p&gt;
+  Der winzige Rubinkehlkolibri (&lt;i&gt;Archilochus colubris&lt;/i&gt;) ist ein auffallend farbenprächtiger Vogel, der in den östlichen Teilen der USA und Kanadas anzutreffen ist.
+&lt;/p&gt;
+
+&lt;!-- Fremdwörter --&gt;
+&lt;p&gt;
+  Das Menü bestand aus einer Fülle an extosichen Wörtern, zum Beispiel &lt;i lang="uk-latn"&gt;vatrushka&lt;/i&gt;,
+  &lt;i lang="id"&gt;nasi goreng&lt;/i&gt; und &lt;i lang="fr"&gt;soupe à l'oignon&lt;/i&gt;.
+&lt;/p&gt;
+
+&lt;!-- Ein bekannter Schreibfehler --&gt;
+&lt;p&gt;
+  Eines Tages werde ich lernen, wie man &lt;u&gt;bessser&lt;/u&gt; buchstabiert.
+&lt;/p&gt;
+
+&lt;!-- Stichpunkte in einer Anleitung hervorheben --&gt;
+&lt;ol&gt;
+  &lt;li&gt;
+    &lt;b&gt;Schneiden&lt;/b&gt; Sie zwei Scheiben Brot ab.
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;b&gt;Legen&lt;/b&gt; Sie eine Tomate und ein Salatblatt zwischen die Brotscheiben.
+  &lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+
+<p>Sie haben es geschafft! Dieser Artikel sollte Ihnen beigebracht haben wie Sie Text mit HTML-Elementen strukturieren können. Es wurden die wichtigsten Eltemente dafür vorgeführt. Es gibt weitere Möglichkeiten, Texten eine bestimmte semanitsche Bedeutungen zukommen zu lassen. Wir werden uns diese im Artikel "Fortgeschrittene Textformatierung" anschauen. Im nächsten Artikel geht es erst einmal darum, wie man <a href="/en-de/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Hyperlinks erstellt</a>, das wichtigste Element im Internet.</p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</p>
diff --git a/files/de/learn/html/einführung_in_html/erstellen_von_hyperlinks/index.html b/files/de/learn/html/einführung_in_html/erstellen_von_hyperlinks/index.html
new file mode 100644
index 0000000000..d27bf253a4
--- /dev/null
+++ b/files/de/learn/html/einführung_in_html/erstellen_von_hyperlinks/index.html
@@ -0,0 +1,317 @@
+---
+title: Erstellen von Hyperlinks
+slug: Learn/HTML/Einführung_in_HTML/Erstellen_von_Hyperlinks
+tags:
+  - Beginner
+  - Guide
+  - HTML
+  - Learn
+  - Links
+  - Title
+  - absolute
+  - hyperlinks
+  - relativ
+  - urls
+translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<p class="summary">Hyperlinks, kurz Links, sind ein wichtiger Teil des Internets, denn sie machen erst ein Netzwerk daraus. In diesem Artikel zeigen wir Ihnen wie man einen Link erstellt und stellen benutzerfreundliche Anwendungsbeispiele vor.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Vorwissen:</th>
+   <td>Grundlegende Kenntnisse in HTML und Textformatierung, wie Sie in den Artikeln <a href="/de/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Lerne HTML kennen</a> und <a href="/de/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Einfache Textformattierung mit HTML</a> abgedeckt werden.</td>
+  </tr>
+  <tr>
+   <th scope="row">Ziel:</th>
+   <td>Lernen wie man sinnvoll Hyperlinks einsetzt.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Was_ist_ein_Hyperlink">Was ist ein Hyperlink?</h2>
+
+<p>Hyperlinks sind eine der Erfindungen, welche das <em>Internet</em> zu einem einzigen zusammenhängenden Netzwerk machen. Sie sind von Beginn an ein Teil des Netzes (engl. "<em>web</em>") und definieren dieses, indem sie uns erlauben von einem Dokument auf ein anderes Dokument (oder eine andere Quelle) zu verweisen. Auch auf bestimmte Inhalte einer Webseite kann direkt verlinkt werden, genauso wie auch auf Apps per Hyperlink verwiesen werden kann. Fast alles im Internet kann zu einem Link konvertiert werden und mit diesem kann die entsprechende Web-Adresse ({{glossary("URL")}}) im Internet von einem Browser gefunden werden.</p>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Eine URL kann auf HTML-Dateien, Textdateien, Bilder, Dokumente, Video- oder Audiodateien verweisen und auf alles andere, was im Internet präsentiert werden kann. Wenn der Browser nicht weiß, wie er mit einer Datei umgehen soll, fragt er nach, ob die Datei geöffnet werden soll, wodurch das öffnen der Datei an ein anderes Programm auf dem Computer abgegeben wird, oder ob sie herunter geladen werden soll, damit man später diese Datei lokal nutzen kann.</p>
+</div>
+
+<p>Die Webseite von BBC enthält zum Beispiel eine große Anzahl an Links, welche auf verschiedene Nachrichtenartikel verweisen, aber auch zu verschiedenen Bereichen der Website (Navigation), Login/Registrations-Seiten (für Benutzeraccounts) und mehr.</p>
+
+<p><img alt="frontpage of bbc.co.uk, showing many news items, and navigation menu functionality" src="https://mdn.mozillademos.org/files/12405/bbc-homepage.png" style="display: block; margin: 0 auto;"></p>
+
+<h2 id="Aufbau_eines_Links">Aufbau eines Links</h2>
+
+<p>Ein Link wird ganz einfach erstellt indem man Text, oder auch andere Inhalte, in ein {{htmlelement("a")}}-Element verschachtelt. Diesem Element muss auch noch das {{htmlattrxref("href", "a")}}-Attribut beigefügt werden, welches als Wert die Ziel-Webadresse enthält auf die man verweisen möchte.</p>
+
+<pre class="brush: html">&lt;p&gt;Ich erstelle einen Link zu der
+&lt;a href="https://www.mozilla.org/en-US/"&gt; Mozilla Webseite&lt;/a&gt;.
+&lt;/p&gt;</pre>
+
+<p>Dies gibt das folgende Resultat:</p>
+
+<p>Ich erstelle einen Link zu der <a class="ignore-external" href="https://www.mozilla.org/en-US/">Mozilla Webseite</a>.</p>
+
+<h3 id="Das_title-Attribut">Das <code>title</code>-Attribut</h3>
+
+<p>Ein weiteres Attribut welches Sie ihren Links womöglich hinzufügen möchten ist <code>title</code>. Darin können Sie Zusatzinformationen zu dem Link angeben. Als Beispiel:</p>
+
+<pre class="brush: html">&lt;p&gt;Ich erstelle einen Link zu der
+&lt;a href="https://www.mozilla.org/en-US/"
+   title="Der beste Ort um mehr über Mozilla zu lernen und wie jeder dazu beitragen kann"&gt;Mozilla Webseite&lt;/a&gt;.
+&lt;/p&gt;</pre>
+
+<p>Das gibt das folgende Resultat (der Text aus dem <code>&gt;title&lt;</code>-Attribut wird als Tooltip angezeigt, wenn man mit dem Mauszeiger darüberfährt):</p>
+
+<p>Ich erstelle einen Link zu der <a class="ignore-external" href="https://www.mozilla.org/en-US/" title="Der beste Ort um mehr über Mozilla zu lernen und wie jeder dazu beitragen kann">Mozilla Webseite</a>.</p>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Der Text aus dem <code>&gt;title&lt;</code>-Attribut wird nur durch den Mauszeiger angezeigt, was bedeutet, das Leute die nur die Tastatur benutzen oder Tablet/Smartphone Benutzer, diese Information nicht angezeigt bekommen. Wenn es sich also um eine wichtige Information handelt, wäre es wohl besser diese im normalen Text unterzubringen.</p>
+</div>
+
+<h3 id="Aktives_Lernen_Erstellen_Sie_Ihren_einen_Hyperlink">Aktives Lernen: Erstellen Sie Ihren einen Hyperlink</h3>
+
+<p>Es ist Zeit das gelernte in die Praxis umzusetzen: Erstellen Sie bitte ein neues HTML-Dokument lokal in Ihrem Code-Editor. (<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">das Dokument könnte so aussehen</a>)</p>
+
+<ul>
+ <li>Erstellen Sie innerhalb des <code>body</code>-Elements ein paar Absätze oder andere Inhalte, so wie Sie es in den vorherigen Artikeln gelernt haben.</li>
+ <li>Machen Sie aus einigen der Inhalte nun Hyperlinks.</li>
+ <li>Ergänzen Sie <code>title</code>-Attribute.</li>
+</ul>
+
+<h3 id="Blockelemente_als_Links">Blockelemente als Links</h3>
+
+<p>Wie oben schon erwähnt, können Sie fast alle Inhalte in Links umwandeln, auch <a href="/de/Learn/HTML/Einf%C3%BChrung_in_HTML/Lerne_HTML_kennen#Blockelemente_und_Inlineelemente">Blockelemente</a> könne als Verweise fungieren. So könne Sie zum Beispiel ein Bild in einen Link umwandeln indem Sie es in <code>&lt;a&gt;&lt;/a&gt;</code> Tags einbetten.</p>
+
+<pre class="brush: html">&lt;a href="https://www.mozilla.org/de/"&gt;
+  &lt;img src="mozilla-image.png" alt="Mozilla Logo welches zur Mozilla Webseite verlinkt"&gt;&lt;/a&gt;
+</pre>
+
+<p class="note"><strong>Hinweis</strong>: Sie werden mehr über das Einbinden von Bildern auf Webseiten in einem späteren Artikel erfahren.</p>
+
+<h2 id="Kurzer_Exkurs_zu_URLs_und_Linkpfaden">Kurzer Exkurs zu URLs und Linkpfaden</h2>
+
+<p>Um Linkziele vollständig zu verstehen, müssen Sie zuerst lernen wie URLs und Dateipfade funktionieren.</p>
+
+<p>Eine URL (engl.: Uniform Resource Locator) ist einfach ein String aus Text der definiert wo etwas im Internet zu finden ist. Zum Beispiel ist Mozillas deutsche Webseite unter <code>https://www.mozilla.org/de/</code> zu finden.</p>
+
+<p>URLs benutzen Dateipfade um Dateien zu finden. Diese Pfade geben an, wo in einem Dateisystem eine bestimmte Datei abgelegt ist. Lassen Sie uns ein einfaches Beispiel einer Dateistruktur anschauen (schauen Sie die Struktur von <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/creating-hyperlinks">Erstellen von Hyperlinks</a> an).</p>
+
+<p><img alt="A simple directory structure. The parent directory is called creating-hyperlinks and contains two files called index.html and contacts.html, and two directories called projects and pdfs, which contain an index.html and a project-brief.pdf file, respectively" src="https://mdn.mozillademos.org/files/12409/simple-directory.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Das <strong>Stammverzeichnis</strong>, englisch <strong>root (=&gt; Wurzel)</strong>, dieses Verzeichnisses wurde <code>creating-hyperlinks</code> benannt. Wenn Sie lokal an einer Webseite arbeiten, dann haben Sie ein Verzeichnis (einen Ordner), in dem die ganzen Dateien für diese Webseite abgelegt sind. In diesem Stammverzeichnis hier haben wir eine <code>index.html</code> und eine <code>contacts.html</code>-Datei. Auf einer echten Webseite wäre <code>index.html</code> die Startseite, also die Einstiegsseite zu unserer Internetpräsenz.</p>
+
+<p>Es gibt auch zwei Verzeichnisse in unserem Stammverzeichnis, namens <code>pdfs</code> und <code>projects</code>. Diese enthalten jeweils eine einzelne Datei, einmal eine PDF-Datei (<code>project-brief.pdf</code>) und eine <code>index.html</code>-Datei. Sie sehen, man kann mehrere <code>index.html</code>-Dateien in einem Webprojekt haben, so lange diese in unterschiedlichen Verzeichnissen sind. Die zweite <code>index.html</code>-Datei könnte hier als Einstiegsseite zu projektbezogenen Informationen dienen.</p>
+
+<ul>
+ <li>
+  <p><strong>Verlinkung im selben Verzeichnis</strong>: Wenn Sie von der <code>index.html</code>-Datei einen Link zu der <code>contacts.html</code>-Datei setzen möchten, welche beide im selben Verzeichnis sind, dann müssen Sie nur den Dateinamen angeben. Die URL die Sie zur Verlinkung benutzen ist also <code>contacts.html</code>:</p>
+
+  <pre class="brush: html">&lt;p&gt;Möchten Sie Kontakt mit uns augfnehmen?
+Finden Sie unsere Kontaktinformationen auf unserer &lt;a href="contacts.html"&gt;Kontakt-Seite&lt;/a&gt;.&lt;/p&gt;</pre>
+ </li>
+ <li>
+  <p><strong>Verlinkung in ein Unterverzeichnis</strong>: Wenn Sie von der <code>index.html</code>-Datei im Stammverzeichnis mit einem Link auf die <code>index.html</code>-Datei verweisen möchten, welche in dem Unterverzeichnis <code>projects</code> liegt, dann schreiben Sie das in der URL folgendermaßen: <code>projects/index.html</code> Die Adresse besteht aus dem Namen des Unterverzeichnis, einem Slash und der Zieldatei in dem Verzeichnis:</p>
+
+  <pre class="brush: html">&lt;p&gt;Besuchen Sie meine  &lt;a href="projects/index.html"&gt;Projekt Homepage&lt;/a&gt;.&lt;/p&gt;</pre>
+ </li>
+ <li>
+  <p><strong>Verlinkung in ein höheres Verzeichnis</strong>: Wenn Sie einen Hyperlink von der <code>projects/index.html</code>-Datei zu der <code>pdfs/projects-brief.pdf</code>-Datei setzen möchten, dann müssen Sie ein Verzeichnislevel hoch gehen, um von dort in das Verzeichnis <code>pdfs</code> zu gelangen. Sie gehen in der Verzeichnisstruktur hoch, indem Sie zwei Punkte angeben - <code>..</code>. Die vollständige URL würde als wie folgt aussehen: <code>../pdfs/projects-brief.pdf</code></p>
+
+  <pre class="brush: html">&lt;p&gt;Ein Link zu meiner &lt;a href="../pdfs/project-brief.pdf"&gt;Projektbeschreibung&lt;/a&gt;.&lt;/p&gt;</pre>
+ </li>
+</ul>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Sie können mehrere Schritte kombinieren und so komplexe URL-Pfade angeben, zum Beispiel <code>../../../komplexer/pfad/zu/meiner/datei.html</code>.</p>
+</div>
+
+<h3 id="Innerhalb_eines_Dokuments_verlinken">Innerhalb eines Dokuments verlinken</h3>
+
+<p>Es ist möglich innerhalb eines HTML Dokumentes zu einem bestimmten Abschnitt einen Link zu setzen und nicht nur zu dem Dokument selbst. Um dies zu bewerkselligen, müssen Sie erst dem HTML-Element, welches Sie als Linkziel benutzen wollen, ein {{htmlattrxref("id")}}-Attribut geben.
+Oft macht es Sinn zu einer bestimmten Überschrift im Dokument zu verlinken. In der Praxis würde das wie folgt aussehen:
+</p>
+
+<pre class="brush: html">&lt;h2 id="postanschrift"&gt;Postanschrift&lt;/h2&gt;</pre>
+
+<p>Um zu dieser bestimmten <code>id</code> zu verlinken, können Sie diese am Ende der URL angeben. Sie müssen nur ein Hash- bzw. Rautesymbol davorsetzen, zum Beispiel so:</p>
+
+<pre class="brush: html">&lt;p&gt;Möchten Sie uns einen Brief schicken? Schreiben Sie an unsere  &lt;a href="contacts.html#postanschrift"&gt;Postanschrift&lt;/a&gt;.&lt;/p&gt;</pre>
+
+<p>Sie können diese Art der Referenz auch benutzen, um <em>innerhalb des selben Dokumentes zu verlinken</em>:</p>
+
+<pre class="brush: html">&lt;p&gt;Unsere &lt;a href="#postanschrift"&gt;Postanschrift&lt;/a&gt; kann am Ende der Webseite gefunden werden. &lt;/p&gt;</pre>
+
+<h3 id="Absolute_und_relative_URLs">Absolute und relative URLs</h3>
+
+<p>Zwei Begriffe denen Sie im Internet begegnen werden sind <strong>absolute URL</strong> und <strong>relative URL:</strong></p>
+
+<p><strong>Absolute URL</strong>: Leitet zu einer absoluten, festen Adresse im Internet, inklusive {{glossary("protocol")}} und {{glossary("domain name")}}. Wenn zum Beispiel die HTML-Datei <code>index.html</code> in ein Verzeichnis namens <code>projects</code> hochgeladen wird, welches wiederum im Stammverzeichnis eines Webservers liegt und der Domain Name der Webseite <code>http://www.example.com</code> ist, dann lautet die absolute Adresse der Webseite <code>http://www.example.com/projects/index.html</code>.</p>
+
+<p>Die absolute URL wird immer zu genau der selben Adresse im Internet zeigen, egal wo sie sich befindet.</p>
+
+<p><strong>Relative URL</strong>: Zeigt zu einem Verzeichnis <em>realtiv</em> zu der Datei, in welcher der Link steht, so wie wir es weiter oben im Artikel gemacht haben. Wenn wir zum Beispiel von der Datei <code>http://www.example.com/projects/index.html</code> zu einer PDF-Datei im selben Verzeichnis verlinken möchten, dann brauchen wir nur den Dateinamen angeben (z.B.: <code>project-brief.pdf</code>). Wenn diese PDF-Datei in dem Unterverzeichnis <code>pdfs</code> liegt, welches wiederum in dem Verzeichnis <code>projects</code> zu finden ist, dann würde die relative Adresse wie folgt aussehen: <code>pdfs/project-brief.pdf</code>. Die äquivalente absolute Adresse für die PDF-Datei wäre <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>.</p>
+
+<p>Eine relative URL zeigt auf unterschiedliche Orte, je nachdem wo sich die Datei befindet, in welcher der Link untergebracht ist. Wenn wir zum Beispiel unsere <code>index.html</code>-Datei aus dem <code>projects</code> Verzeichnis in das Stammverzeichnis der Webseite verschieben würden, dann würde die relative URL <code>pdfs/project-brief.pdf</code> darin auf <code>http://www.example.com/pdfs/project-brief.pdf</code> verweisen und nicht mehr auf <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>
+</p>
+
+<h2 id="Nutzen_von_Links">Nutzen von Links</h2>
+
+<p>Wie man Links am besten benutzt und ein angenehmes Nutzererlebnis schafft, werden wir uns nun anschauen.</p>
+
+
+<h3 id="Klare_Benennung_von_Links">Klare Benennung von Links</h3>
+
+<p>Es ist einfach ein paar Links auf eine Webseite zu setzen. Aber das ist nicht genug. Wir müssen dafür sorgen, das alle Benutzer der Webseite diese Links auch benutzen können, egal mit welchem Gerät sie auf die Seite zugreifen. Zum Nachdenken:</p>
+
+<ul>
+ <li>Benutzer von Bilschirmlesegeräten springen von Link zu Link auf der Webseite und diese werden ohne Zusammenhang vorgelesen.</li>
+ <li>Suchmaschinen benutzen Linktext um die Zieldateien zu indexieren, es ist also gut, wenn der Linktext Schlagwörter enthält die mit dem Inhalt des verlinkten Dokumentes zu tun haben.</li>
+ <li>Leser der Webseite scannen die Webseite zuerst durch, anstatt sie direkt Wort für Wort zu lesen. Dabei werden die Augen von hervorgehobenem Text, wie zum Beispiel Links angezogen. Beschreibender Linktext ist sinnvoll, zum schnellen Verständnis worum es auf der Webseite geht.</li>
+</ul>
+
+<p>Schauen wir uns ein Beispiel an:</p>
+
+<p><em><strong>Guter</strong> Linktext:</em> <a href="https://firefox.com">Firefox herunterladen</a></p>
+
+<pre class="brush: html">&lt;p&gt;&lt;a href="https://firefox.com/"&gt;
+  Firefox herunterladen
+&lt;/a&gt;&lt;/p&gt;</pre>
+
+<p><em><strong>Schlechter</strong> Linktext:</em> <a href="https://firefox.com/">Klicke hier</a> um Firefox herunterzuladen</p>
+
+<pre class="brush: html">&lt;p&gt;&lt;a href="https://firefox.com/"&gt;
+  Klicke hier
+&lt;/a&gt;
+um Firefox herunterzuladen&lt;/p&gt;
+</pre>
+
+<p>Weitere Tipps:</p>
+
+<ul>
+ <li>Wiederholen Sie nicht die URL als Teil des Linktextes, URLs sehen nicht schön aus und Bildschirmlesegeräte geben diese Buchstabe für Buchstabe aus.</li>
+ <li>Schreiben Sie nicht "Link" oder "Link zu" in ihrem Linktext. Bildschirmlesegeräte sagen das es sich um einen Link handelt und der Link ist normalerweise als solcher gut zu erkennen. Denn Links sind normalerweise auf eine Weise gestaltet, die sie von der Umgebung absetzt, in einer anderen Farbe und unterstrichen. Diese Konvention sollte auch beibehalten werden, Links sollten immer als solche auf den ersten Blick zu erkennen sein.</li>
+ <li>Halten Sie den Linktext so kurz wie möglich - lange Linktexte sind besonders für Benutzer von Bildschirmlesegeräten nervend, denn der Linktext wird immer komplett vorgelesen.</li>
+ <li>Vermeiden Sie es den selben Linktext für mehrere Links zu benutzen, die auf unterschiedliche Dokumente verweisen. Benutzer von Bildschirmlesegeräten wird die Navigation erschwert, wenn ihnen mehrmals der Linktext "Klicken Sie hier" vorgelesen wird.</li>
+</ul>
+
+<h3 id="Benutzen_Sie_relative_Links">Benutzen Sie relative Links</h3>
+
+<p>Von einem vorangehenden Absatz bekommen Sie vielleich die Idee, dass es gut ist, nur absolute Links zu verwenden, da diese nicht zu toten Links werden können, wenn die Webseite verschoben wird, im Gegensatz zu relativen Links. Es ist aber besser relative Links zu benutzen, wenn Sie innerhalb der <em>selben Webseite</em> verlinken. Um eine <em>andere Webseite</em> zu verlinken müssen Sie natürlich absolute Links benutzen.</p>
+
+<ul>
+ <li>Zum einen ist es einfacher den Code später zu lesen und verstehen, denn relative URLs sind meistens viel kürzer als absolute URLs.</li>
+ <li>Zum anderen ist es effizienter relative URLs zu benutzen und die Webseite wird insgesamt schneller. Wenn Sie eine absolute URL benutzen, dann wird der Browser eine Anfrage an den Domain Name Server ({{glossary("DNS")}} senden, um herauszufinden, wo die Webseite zu finden ist, was Zeit und Ressourcen in anspruch nimmt (lesen Sie <a href="/de/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Wie das Internet funktioniert</a> um mehr darüber zu erfahren).
+Bei einer relativen URL schaut der Browser direkt auf dem selben Server nach der Datei, was um einiges schneller geht, als den Umweg über DNS zu gehen.</li>
+</ul>
+
+<h3 id="Klare_Verlinkung_zu_Dateien_die_keine_HTML-Dateien_sind">Klare Verlinkung zu Dateien die keine HTML-Dateien sind</h3>
+
+<p>Wenn Sie zu etwas anderem als einer anderen Webseite verlinken, zum Beispiel einer herunterladbaren Datei (ein PDF oder ein Word-Dokument) oder einem Stream (Video oder Audio) oder ähnlichem, welches unerwartete Effekte hat, wie PopUp-Fenster oder Flash-Animationen, dann sollten Sie das im Linktext deutlich kennzeichnen. Es kann nämlich sehr nervend sein, wenn folgendes passiert:</p>
+
+<ul>
+ <li>Wenn Sie eine langsame Internetverbindung haben, einen Link anklicken und auf einmal eine mehrere Megabyte große Datei heruntergeladen wird.</li>
+ <li>Wenn Sie keinen Flashplayer installiert haben, auf einen Link klicken und auf einmal auf einer Webseite sind, auf der Flash genutzt wird.</li>
+</ul>
+
+<p>Lassen Sie uns ein paar Beispiele anschauen, was für ein Linktext hier genutzt werden kann:</p>
+
+<pre class="brush: html">&lt;p&gt;&lt;a href="http://www.example.com/large-report.pdf"&gt;
+  Laden Sie den Verkaufsbericht herunter (PDF, 10MB)
+&lt;/a&gt;&lt;/p&gt;
+
+&lt;p&gt;&lt;a href="http://www.example.com/video-stream/"&gt;
+  Schauen Sie sich das Video an (Stream öffnet in einem separaten Fenster, HD Qualität)
+&lt;/a&gt;&lt;/p&gt;
+
+&lt;p&gt;&lt;a href="http://www.example.com/car-game"&gt;
+  Spielen Sie das Autospiel (benötigt Flash)
+&lt;/a&gt;&lt;/p&gt;</pre>
+
+<h3 id="Benutzen_Sie_das_download-Attribut_um_auf_herunterladbare_Dateien_zu_verlinken">Benutzen Sie das download-Attribut um auf herunterladbare Dateien zu verlinken</h3>
+
+<p>Wenn Sie auf eine Datei verlinken, die heruntergeladen werden sollte, anstatt im Browser geöffnet zu werden, können Sie das <code>download</code>-Attribut benutzen, um den Namen der gespeicherten Datei vorzugeben. Hier ist ein Beispiel mit einem Download-Link zu der Windows-Version von Firefox 39:</p>
+
+<pre class="brush: html">&lt;a href="https://download.mozilla.org/?product=firefox-39.0-SSL&amp;os=win&amp;lang=en-US"
+   download="firefox-39-installer.exe"&gt;
+  Firefox 39 für Windows herunterladen
+&lt;/a&gt;</pre>
+
+<h2 id="Aktives_Lernen_Erstellen_Sie_ein_Navigationsmenu">Aktives Lernen: Erstellen Sie ein Navigationsmenu</h2>
+
+<p>In dieser Übung sollen Sie einige Einzelseiten so verlinken, das Sie am Ende eine Webseite mit mehreren Seiten haben, die über ein Navigationsmenü erreicht werden können. Diese Art der Navigation finden Sie auf vielen Webseiten. Die selbe Webseitenstruktur wird auf allen Seiten genutzt, um ein einheitliches Bild einer Webpräsenz zu geben. Wenn Sie auf die Links in der Navigation klicken, scheint sich nur der Inhalt der Webseiten zu verändern, nicht die ganze Seite.</p>
+
+<p>Sie müssen sich lokale Kopien der folgenden vier Seiten machen. Speichern Sie alle in dem selben Verzeichnis (auf GitHub finden Sie unter <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-start">navigation-menu-start</a> die Liste der benötigten Dateien im Verzeichnis):</p>
+
+<ul>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/index.html">index.html</a></li>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/projects.html">projects.html</a></li>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/pictures.html">pictures.html</a></li>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/social.html">social.html</a></li>
+</ul>
+
+<p>Aufgaben:</p>
+
+<ol>
+ <li>Fügen Sie eine ungeordnete Liste an dem angezeigten Platz in einer der Dateien ein. Diese Liste soll alle Namen der zu verlinkenden Seiten beinhalten. Ein Navigationsmenü ist tatsächlich nur eine Liste von Links, semantisch ist dies also der richtige Weg eine Navigation zu erstellen.</li>
+ <li>Verändern Sie jeden Seitennamen in einen Link.</li>
+ <li>Kopieren Sie das fertige Navigationsmenü und fügen es auf alle Seiten ein. </li>
+ <li>Auf jeder einzelnen Seite löschen Sie den Link zu der Seite selbst. Es ist sinnlos auf einer Seite einen Link zu sich selbst zu beinhalten. Dazu dient der visuelle Unterschied als Indikator, auf welcher Seite man sich gerade befindet.</li>
+</ol>
+
+<p>Wenn Sie fertig sind, dann sollte die Webseite wie folgt aussehen:</p>
+
+<p><img alt="An example of a simple HTML navigation menu, with home, pictures, projects, and social menu items" src="https://mdn.mozillademos.org/files/12411/navigation-example.png" style="display: block; margin: 0 auto;"></p>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Falls Sie stecken bleiben und nicht weiter wissen, dann können Sie sich unsere korrekte Lösung anschauen: <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up">navigation-menu-marked-up</a></p>
+</div>
+
+<h2 id="E-mail_Links">E-mail Links</h2>
+
+<p>Es ist möglich Links oder Buttons zu erstellen, die wenn man Sie anklickt, eine neue ausgehende E-Mail Nachricht öffnen, anstatt zu einer Webseite oder einer anderen Datei zu verlinken. Das wirt bewerkstelligt indem man das {{HTMLElement("a")}}-Element zusammen mit dem <code>mailto:</code> URL Schema benutzt.</p>
+
+<p>In seiner einfachsten und am meisten genutzten Form, gibt ein <code>mailto:</code> Link  einfach nur die E-Mail Adresse des Empfängers an. Beispiel:</p>
+
+<pre class="brush: html">&lt;a href="mailto:niemand@mozilla.org"&gt;Senden Sie eine E-Mail an Niemand&lt;/a&gt;
+</pre>
+
+<p>Damit erstellen Sie einen Link der folgendermaßen aussieht:
+<a href="mailto:niemand@mozilla.org">Senden Sie eine E-Mail an Niemand</a>.</p>
+
+<p>Tatsächlich ist auch die angabe einer E-Mail Adresse optional. Wenn Sie diese weglassen, also nur <code>mailto:</code> schreiben, dann wird eine neue ausgehende E-Mail erstellt, ohne einen vorgegebenen Empfänger. Dies kann genutzt werden, um <em>Teilen</em>-Links zu erstellen, bei denen Benutzer eine E-Mail an Freunde schicken können.</p>
+
+<h3 id="Details_angeben">Details angeben</h3>
+
+<p>Ausser der E-Mail Adresse können Sie auch andere Informationen angeben. Alle Standard E-Mail Kopffelder können über <code>mailto</code> vorausgefüllt werden, dazu gehören <em>subject</em> (Betreff), <em>cc</em> und <em>body</em> (Um eine vorgegeben Nachricht anzuzeigen). </p>
+
+<p>Hier ist ein Beispiel das cc, bcc, subject und body beinhaltet:</p>
+
+<pre class="brush: html">&lt;a href="mailto:niemand@mozilla.org?cc=name2@rapidtables.com&amp;bcc=name3@rapidtables.com&amp;amp;subject=Der%20Betreff%20von%20der%20Email &amp;amp;body=Die%20Nachricht%20in%20der%20Email"&gt;
+  Senden Sie eine E-Mail mit cc, bcc, subject and body
+&lt;/a&gt;</pre>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Die Werte der Felder müssen URL gerecht geschrieben sein, dass heißt mit speziellen Charakteren anstatt Leerzeichen, Umlauten und Sonderzeichen. Bemerken Sie auch die Verwendung des Fragezeichens (<code>?</code>), um die eigentliche URL von den Feldwerten abzugrenzen und das Und-Zeichen (&amp;), um die Feldwerte voneinander zu trennen. Dies ist Standard URL-Query Notation. Sie werden mehr darüber in einem fortgeschrittenen Modul lernen.</p>
+</div>
+
+<p>Hier sind noch ein paar Beispiele für <code>mailto</code> URLs:</p>
+
+<ul>
+ <li><a href="mailto:">mailto:</a></li>
+ <li><a href="mailto:niemand@mozilla.org">mailto:niemand@mozilla.org</a></li>
+ <li><a href="mailto:niemand@mozilla.org,nobody@mozilla.org">mailto:niemand@mozilla.org,nobody@mozilla.org</a></li>
+ <li><a href="mailto:niemand@mozilla.org?cc=nobody@mozilla.org">mailto:niemand@mozilla.org?cc=nobody@mozilla.org</a></li>
+ <li><a href="mailto:niemand@mozilla.org?cc=nobody@mozilla.org&amp;subject=Dies%20ist%20der%20Betreff">mailto:niemand@mozilla.org?cc=nobody@mozilla.org&amp;subject=Dies%20ist%20der%20Betreff</a></li>
+</ul>
+
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+
+<p>Jetzt haben Sie schon sehr viel über Hyperlinks gelernt! Wir werden uns später im Kurs noch einmal mit ihnen beschäftigen, wenn es darum geht, Links zu gestalten. Als nächstes schauen wir uns noch ein paar HTML-Elemente an, mit denen Text formatiert und semantisch dargestellt werden kann. Um Fortgeschrittene Textformatierung geht es im nächsten Artikel.</p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</p>
diff --git a/files/de/learn/html/einführung_in_html/fehlersuche_in_html/index.html b/files/de/learn/html/einführung_in_html/fehlersuche_in_html/index.html
new file mode 100644
index 0000000000..3e3223016e
--- /dev/null
+++ b/files/de/learn/html/einführung_in_html/fehlersuche_in_html/index.html
@@ -0,0 +1,197 @@
+---
+title: Fehlersuche in HTML
+slug: Learn/HTML/Einführung_in_HTML/Fehlersuche_in_HTML
+tags:
+  - Anfänger
+  - Beginner
+  - Debugging
+  - Guide
+  - HTML
+  - Validation
+  - validator
+translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<p class="summary">HTML-Code zu schreiben ist die eine Sache. Fehler die sich beim Entwickeln einschleichen zu finden und zu beheben die andere. In diesem Artikel stellen wir einige Werkzeuge vor, mit welchen man Fehler in HTML finden und beheben kann.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Vorwissen:</th>
+   <td>
+    <p>Grundkenntnisse in HTML, wie sie in den Artikeln <a href="/de/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Lernen Sie HTML kennen</a>, <a href="/de/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Einfache Textformatierung mit HTML</a> und <a href="/de/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Erstellen von Links</a> abgedeckt werden.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Ziel:</th>
+   <td>
+    <p>Die Grundlagen zur Fehlersuche in HTML, mit Hilfe von entsprechenden Werkzeugen, kennen lernen.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Keine_Angst_vor_der_Fehlersuche">Keine Angst vor der Fehlersuche</h2>
+
+<p>Wenn Computercode geschrieben wird, dann ist meistens alles in Ordnung, bis zu dem Moment in dem ein Fehler auftritt - es wurde etwas falsch gemacht, deswegen funktioniert der Code nicht - entweder überhaupt nicht, oder nicht so wie es vorgesehen war. Als Beispiel zeigen wir einen Fehlerbericht, der beim compilieren eines einfachen Programmes in der Programmiersprache <a href="https://www.rust-lang.org/">Rust</a>, ausgegeben wurde.</p>
+
+<p><img alt="A console window showing the result of trying to compile a rust program with a missing quote around a string in a print statement. The error message reported is error: unterminated double quote string." src="https://mdn.mozillademos.org/files/12435/error-message.png" style="display: block; height: 520px; margin: 0px auto; width: 711px;"> "Error" ist Englisch und bedeutet Fehler. In diesem Beispiel gibt die Fehlerwarnung aus "unterminated double quote string", was bedeutet, dass ein doppeltes Anführungszeichen fehlt. Wenn man sich <code>println!(Hello, world!");</code> anschaut, dann kann man sehen, das dort doppelte Anführungszeichen fehlen. Dieser Fehler ist dank der Fehlermeldung einfach zu finden und zu beheben. Fehlermeldungen können aber um einiges komplizierter sein, als in diesem Beispiel. Vor allem bei größeren Programmen, mit mehr Code, sind Fehler unvermeidlich und für jemanden, der eine Programmiersprache nicht kennt, wird es fast unmöglich, diese zu finden.</p>
+
+<h2 id="Begriffserklärungen_Fehlerbehebung">Begriffserklärungen Fehlerbehebung</h2>
+
+<p>Im Computerbereich wurden viele <strong>Begriffe aus dem Englischen übernommen</strong>, so auch in diesem Bereich. So wird Fehlerbehebung auch im deutschen Sprachgebrauch <strong>Debugging</strong> genannt. Der Fehler im Code wird im Englischen als <strong>Bug</strong> bezeichnet, was soviel wie <em>Ungeziefer</em> bedeutet. Das <em>Debugging</em> ist dann das <em>Entfernen des Ungeziefers</em> Als <strong>Debugger</strong> wird ein Programm bezeichnet, welches zur Fehlersuche und -behebung genutzt wird.</p>
+
+<p>Die Fehlerbehebung, das debuggen also, muss niemandem Angst machen, auch wenn es viel Arbeit ist. Der Schlüssel zum Schreiben und Debuggen von Programmiercode ist Vertrautheit mit der entsprechenden Programmiersprache und den Wekrzeugen zur Fehlerbehebung.</p>
+
+<h2 id="HTML_und_Debugging">HTML und Debugging</h2>
+
+<p>Die Syntax von HTML ist um einiges einfacher als in einer "echten" Programmiersprache, wie Rust, {{glossary("Javascript")}} oder {{glossary("Python")}}. Auch wird HTML nicht erst compiliert, sondern direkt vom Browser interpretiert. Browser sind beim rendern von HTML sehr <strong>permissiv</strong>. Fehler bewirken normalerweise nicht, wie bei anderen Programmiersprachen üblich, das ein Dokument gar nicht dargestellt wird, sondern der Browser rendert das HTML-Dokument trotzdem, was sowohl gut, als auch schlecht sein kann.</p>
+
+<h3 id="Permissiver_Code">Permissiver Code</h3>
+
+<p>Was bedeutet permissiv? Wenn man in Programmiersprachen etwas falsch macht, dann gibt es normalereise zwei Sorten von Fehlern, denen man begegnet:</p>
+
+<ul>
+ <li><strong>Syntaxfehler</strong>: Dies sind Schreibfehler im Code, welche bewirken, dass das Programm nicht läuft, wie das obige Beispiel in Rust. Syntaxfehler sind leicht zu finden und zu beheben, wenn man mit der entsprechenden Programmierprache vertraut ist und man weiß, wie man Fehlermeldungen interpretiert.</li>
+ <li><strong>Logische Fehler</strong>: Diese Fehler treten auf, wenn die Syntax korrekt ist, der Code aber nicht das tut, was er tun soll. Das Programm läuft, aber nicht so wie erwartet. Logische Fehler sind schwieriger zu beheben, weil es keine Fehlermeldung gibt, die einen zu der Fehlerquelle führt.</li>
+</ul>
+
+<p>HTML ignoriert Syntaxfehler, Browser rendern permissiv, die Seite wird angezeigt, obwohl Syntaxfehler im Code sind. Browser haben Regeln eingebaut, welche falsch geschriebenen HTML-Code trotzdem interpretieren, allerdings meist nicht so, wie es vorgesehen war. Die Fehler müssen trotzdem behoben werden.</p>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Warum wird HTML permissiv gerendert? Weil bei der Entwicklung des World Wide Web befunden wurde, dass es wichtiger ist, dass Leute ihre Inhalte publizieren können. Wichtiger als ein paar Syntaxfehler im Code, die eine Veröffentlichung verhindern würden. Das Internet wäre vermutlich nicht so populär, wenn die Regeln der Sprache strenger gewesen wären.</p>
+</div>
+
+<h3 id="Aktives_Lernen_Permissiven_Code_untersuchen">Aktives Lernen: Permissiven Code untersuchen</h3>
+
+<p>Es ist Zeit sich anzuschauen, wie permissiv HTML Code gerendert wird.</p>
+
+<ol>
+ <li>Laden Sie bitte die folgende Datei herunter und speichern sie diese lokal: <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">debug-example demo</a> In diesem Demo-Code sind absichtlich einige Fehler verbaut. Der HTML-Code ist schlecht geschrieben.</li>
+ <li>Öffnen Sie diese Datei in einem Browser. Sie sollten folgendes sehen: <img alt="A simple HTML document with a title of HTML debugging examples, and some information about common HTML errors, such as unclosed elements, badly nested elements, and unclosed attributes. " src="https://mdn.mozillademos.org/files/12437/badly-formed-html.png" style="display: block; margin: 0 auto;"></li>
+ <li>Das sieht gleich etwas merkwürdig aus. Schauen sie sich nun den Quellcode der Datei an:
+  <pre class="brush: html">&lt;h1&gt;HTML debugging examples&lt;/h1&gt;
+
+&lt;p&gt;What causes errors in HTML?
+
+&lt;ul&gt;
+  &lt;li&gt;Unclosed elements: If an element is &lt;strong&gt;not closed properly,
+      then its effect can spread to areas you didn't intend
+
+  &lt;li&gt;Badly nested elements: Nesting elements properly is also very important
+      for code behaving correctly. &lt;strong&gt;strong &lt;em&gt;strong emphasised?&lt;/strong&gt;
+      what is this?&lt;/em&gt;
+
+  &lt;li&gt;Unclosed attributes: Another common source of HTML problems. Let's
+      look at an example: &lt;a href="https://www.mozilla.org/&gt;link to Mozilla
+      homepage&lt;/a&gt;
+&lt;/ul&gt;</pre>
+ </li>
+ <li>Lassen Sie uns die Probleme erläutern:
+  <ul>
+   <li>Die {{htmlelement("p","Absatz")}} und {{htmlelement("li","Listenpunkt")}} Elemente haben keine schließenden Tags. Auf dem Bild oben sehen wir, das dies kaum Auswikrungen hat, da es für den Browser einfach ist, trotzdem zu erkennen, wo das Ende dieser Elemente sein sollte.</li>
+   <li>Das erste {{htmlelement("strong")}} Element hat kein schließendes Tag. Der Browser kann nicht erraten, wo das Element enden soll, deswegen ist der ganze Rest von dem Text stark hervorgehoben.</li>
+   <li>Diese Sektion des Textes wurden die Elemente schlecht verschachtelt. <code>&lt;strong&gt;strong &lt;em&gt;strong emphasised?&lt;/strong&gt; what is this?&lt;/em&gt;</code>. Wegen dem vorhergehenden Problem, kann man nicht sagen, wie dies vom Browser interpretiert wird.</li>
+   <li>Bei dem {{htmlattrxref("href","a")}}-Attributwert wurde ein schließendes, doppeltes Anführungszeichen vergessen. Dies scheint das größte Problem zu verursachen, der Link ist gar nicht erst gerendert worden.</li>
+  </ul>
+ </li>
+ <li>Lassen Sie uns den Code anschauen den der Browser zum rendern benutzt hat, im Gegensatz zu dem geschriebenen Quellcode. Dafür benutzen wir die Web Developer Tools, die in jedem modernen Browser enthalten sind (nicht aber in der mobilen Version der Browser). Wenn Sie nicht wissen, was Web Developer Tools sind, dann nehmen Sie sich einige Minuten Zeit, um diesen Artikel zu lesen: <a href="/en-US/docs/Learn/Discover_browser_developer_tools">Entdecken Sie die Web Developer Tools</a></li>
+ <li>In dem DOM-Inspektor können Sie sehen, wie der gerenderte Code aussieht: <img alt="The HTML inspector in Firefox, with our example's paragraph highlighted, showing the text &quot;What causes errors in HTML?&quot; Here you can see that the paragraph element has been closed by the browser." src="https://mdn.mozillademos.org/files/12439/html-inspector.png" style="display: block; margin: 0 auto;"></li>
+ <li>Mit Hilfe des DOM-Inspektors können wir den Code den der Browser versucht hat zu beheben sehen und wie dieser versucht die HTML Fehler zu beheben. (Wir habe hier Firefox benutzt, um den Code anzuschauen; andere moderne Browser <em>sollten</em> zu dem selben Resultat kommen.):
+  <ul>
+   <li>Den Absätzen und den Listenpunkten wurden schließende Tags hinzugefügt.</li>
+   <li>Es ist nicht klar, wo das erste <code>&lt;strong&gt;</code>-Element enden soll, deswegen hat der Browser jeden separaten Block mit einem eigenen <code>&lt;strong&gt;</code>-Tag versehen, bis zum Ende des Dokumentes!</li>
+   <li>Die falsch verschachtelten Elemente wurden vom Browser wie folgt gelöst:
+    <pre class="brush: html">&lt;strong&gt;strong
+  &lt;em&gt;strong emphasised?&lt;/em&gt;
+&lt;/strong&gt;
+&lt;em&gt; what is this?&lt;/em&gt;</pre>
+   </li>
+   <li>Der Link mit den fehlenden, doppelten Anführungszeichen wurde komplett gelöscht. Das letzte Listenelement sieht so aus:
+    <pre class="brush: html">&lt;li&gt;
+  &lt;strong&gt;Unclosed attributes: Another common source of HTML problems.
+  Let's look at an example: &lt;/strong&gt;
+&lt;/li&gt;</pre>
+   </li>
+  </ul>
+ </li>
+</ol>
+
+<h3 id="HTML_Validation">HTML Validation</h3>
+
+<p>Es ist auf jeden Fall besser, die korrekte Syntax für HTML zu verwenden, um ungewollte Ergebnisse zu vermeiden. Aber wie? Bei einem kleinen Dokument, wie dem obigen, ist es einfach, dieses Zeile für Zeile durchzugehen, um die Fehler zu finden. Aber was bei einem sehr großen HTML-Dokument tun?</p>
+
+<p>Die beste Strategie ist es, das HTML-Dokument von dem <a href="https://validator.w3.org/">Markup Validation Service</a> überprüfen zu lassen. Dieses Tool wird von der W3C bereitgestellt, also von der Organisation, welche auch die Spezifikationen von HTML, CSS und anderen Internettechnologien erstellt. Dieser Webseite gibt man ein HTML-Dokument an, diese untersucht das Dokument auf Fehler und gibt einen detailierten Fehlerbericht zurück.</p>
+
+<p><img alt="The HTML validator homepage" src="https://mdn.mozillademos.org/files/12441/validator.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Man kann entweder eine Webseite, ein hochgeladenes HTML-Dokument oder direkt eingegebenen HTML-Code validieren lassen</p>
+
+<h3 id="Aktives_lernen_Validieren_eines_HTML-Dokumentes">Aktives lernen: Validieren eines HTML-Dokumentes</h3>
+
+<p>Lassen Sie uns das Gelernte einmal in die Praxis umsetzen, mit unserem <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">Beispieldokument hier</a>.</p>
+
+<ol>
+ <li>Öffnen Sie als Erstes den <a href="https://validator.w3.org/">Markup Validation Service</a> in einem anderen Browser-Tab.</li>
+ <li>Gehen Sie zu dem <a href="https://validator.w3.org/#validate_by_input">Validate by Direct Input</a> Tab. Dort kann man direkt HTML-Code überprüfen.</li>
+ <li>Kopieren Sie den Code aus dem Beispieldokument komplett in das große Textfeld auf der Webseite des Markup Validation Service.</li>
+ <li>Klicken Sie auf <em>Check</em>.</li>
+</ol>
+
+<p>Dies sollte Ihnen eine Liste der Fehler und weitere Informationen geben.</p>
+
+<p><img alt="A list of of HTML validation results from the W3C markup validation service" src="https://mdn.mozillademos.org/files/12443/validation-results.png" style="display: block; margin: 0 auto;"></p>
+
+<h4 id="Die_Fehlermeldungen_richtig_interpretieren">Die Fehlermeldungen richtig interpretieren</h4>
+
+<p>Meistens sind die Fehlermeldungen hilfreich, manchmal aber auch schwierig zu verstehen. Es braucht etwas Übung, um den Grund aller Fehlermeldungen zu erkennen. Lassen Sie uns durch die ausgegebenen Fehlermeldungen gehen und überlegen, was diese bedeuten. Sie sehen, dass jede Fehlermeldung mit einer Zeilen(line) und einer Spalten(column)- nummer versehen sind damit der Ort des Fehlers auffindbar ist.</p>
+
+<ul>
+ <li>"End tag <code>li</code> implied, but there were open elements" (2 instances): Diese Fehlermeldung zeigt an, dass ein Element offen ist, welches eigentlich geschlossen werden sollte. Die line/column Informationen zeigen auf die erste Zeile, welche nach dem nicht vorhandenen geschlossenen Tag sein sollte. Dies hilft uns zu sehen, was falsch ist.</li>
+ <li>"Unclosed element <code>strong</code>": Diese Fehlermeldung ist einfach zu verstehen. Ein {{htmlelement("strong")}} Element wurde nicht geschlossen und die Zeilen und Spaltennummern deuten direkt auf den Fehler.</li>
+ <li>"End tag <code>strong</code> violates nesting rules": An der angegebenen Possition wurden Elemente falsch verschachtelt.</li>
+ <li>"End of file reached when inside an attribute value. Ignoring tag": Diese Fehlermeldung ist etwas kryptisch. Es zeigt auf, das ein Attribut irgendwo nicht richtig geformt wurde, vermutlich eher am Ende des Dokumentes, denn das Ende des Dokumentes ist innerhalb des Attribut-Wertes. Da der Browser den Link gar nicht darstellt, könnte hier der Fehler liegen.</li>
+ <li>"End of file seen and there were open elements": Diese Fehlermeldung sagt uns einfach nur, das es offene Elemente im Dokument gibt, welche geschlossen werden müssen. Die Zeilennummern deuten auf die letzten paar Zeilen im Dokument und diese Meldung kommt mit einer Zeile Code, die ein Beispiel dafür im Dokument aufzeigt.
+  <pre>Beispiel: &lt;a href="https://www.mozilla.org/&gt;Link zur Mozilla Homepage&lt;/a&gt; ↩ &lt;/ul&gt;↩ &lt;/body&gt;↩&lt;/html&gt;</pre>
+
+  <div class="note">
+  <p><strong>Hinweis</strong>: Ein Attributwert, bei welchem geschlossene Anführungszeichen fehlen ist ein offenes Element, da der Rest des Dokumentes als der Wert des Attributes gelesen wird.</p>
+  </div>
+ </li>
+ <li>"Unclosed element <code>ul</code>": Diese Meldung ist nicht hilfreich, da das {{htmlelement("ul")}}-Element <em>richtig</em> geschlossen wurde. Der Fehler kommt von dem nicht geschlossenen {{htmlelement("a")}}-Element, da dort die schließenden Anführungszeichen, bei einem der Attributwerte fehlen.</li>
+</ul>
+
+<p><span>Wenn Sie nicht gleich alle Fehlermeldungen verstehen ist das nicht schlimm. Am besten versucht man, einen Fehler nach dem anderen zu beheben, meistens verschwinden dann auch andere Fehlermeldungen damit. Mehrere Fehlermeldungen können das Resulstat von einem einzigen Fehler im Code sein. </span></p>
+
+<p><span>Wenn alle Fehler beseitigt sind, dann erfolgt das folgende Banner: </span></p>
+
+<p><img alt='Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."' src="https://mdn.mozillademos.org/files/12445/valid-html-banner.png" style="display: block; margin: 0 auto;"></p>
+
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+
+<p>Dies war eine Einführung in die Fehlerbehebung bei HTML-Dokumenten. Dies sollte Ihnen einige nützliche Fähigkeiten vermittelt haben, um Ihre Webseiten zukünftig ordentlich zu halten. Finden Sie selber die Fehler im Code, indem Sie sich das gerenderte HTML-Dokument im Browser anschauen oder nutzen Sie den HTML-Validator.</p>
+
+<p>Dies ist auch das Ende der Artikelreihe des Moduls "Einführung in HTML". Als nächstes kommen zwei Aufgaben, welche Sie alleine bearbeiten sollten, um das Gelernte in die Praxis umzusetzen! Bei der ersten Aufgabe geht es darum, einen Brief mit HTML ordentlich zu formatieren: <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Aufgabe: Formatieren eines Briefes</a></p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</p>
+
+<p> </p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/de/learn/html/einführung_in_html/fortgeschrittene_textformatierung/index.html b/files/de/learn/html/einführung_in_html/fortgeschrittene_textformatierung/index.html
new file mode 100644
index 0000000000..1075d63f66
--- /dev/null
+++ b/files/de/learn/html/einführung_in_html/fortgeschrittene_textformatierung/index.html
@@ -0,0 +1,466 @@
+---
+title: Fortgeschrittene Textformatierung
+slug: Learn/HTML/Einführung_in_HTML/Fortgeschrittene_Textformatierung
+tags:
+  - Abkürzungen
+  - Beginner
+  - Beschreibungslisten
+  - Guide
+  - HTML
+  - Lernen
+  - Textformatierung
+  - Zitate
+translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<p class="summary">Es gibt viele weitere Elemente in HTML zum formatieren von Text, die wir nicht in unserem Artikel <a href="/de/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Einfache Textformatierung mit HTML</a> abgedeckt haben. Die HTML-Elemente welche in diesem Artikel vorgestellt werden, werden nicht so oft benötigt. Es ist aber hilfreich diese zu kennen. Sie werden hier lernen wie man Zitate, Beschreibende Listen, Code und ähnliche Texte, sowie tiefer oder höher gestellte Zeichen ausgibt und noch mehr.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Vorwissen:</th>
+   <td>Grundlegende HTML Kenntnisse, wie sie in den vorhergehenden Artikeln <a href="/de/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Lernen Sie HTML kennen</a> und <a href="/de/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Einfache Textformatierung mit HTML</a> abgedeckt werden.</td>
+  </tr>
+  <tr>
+   <th scope="row">Ziel:</th>
+   <td>Kennenlernen von weniger bekannten HTML-Elementen, um Text anspruchsvoll zu formatieren.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="&lt;dl>_-_Beschreibungslisten">&lt;dl&gt; - Beschreibungslisten</h2>
+
+<p>In Einführung in Textformatierung mit HTML haben wir Ihnen gezeigt, wie man einfache geordnete und ungeordnete Listen erstellt. Es gibt aber noch einen dritten Typ Listen, der nicht so oft Verwendung findet. Es handelt sich um <strong>Beschreibungslisten</strong> (engl.: "<strong>d</strong>escription <strong>l</strong>ists"). Mit dem <code>dl</code>-Element lässt sich eine Liste von Begriffen (<strong>l</strong>ist <strong>t</strong>erm) <code>lt</code> erstellen, welchen eine Beschreibung (engl. "<strong>d</strong>escription") <code>dd</code> hinzugefügt wird. Diese Art von Liste ist z.B. in Wörterbüchern zu finden, wo es zu einem bestimmten Begriff eine längere Beschreibung gibt. Lassen Sie uns in einem Beispiel anschauen, wie so eine beschreibende Liste genau aufgebaut ist. Hier haben wir eine noch unformatierte Liste, welche wir in eine Beschreibungsliste umwandeln wollen:</p>
+
+<pre>Innerer Monolog
+Der innere Monolog ist eine Form des Erzählens und wird oft zur Vermittlung von Gedankenvorgängen gebraucht.
+Monolog
+Der Monolog (gr. μόνος mónos „allein“ und -log; lat. Soliloquium) ist im Gegensatz zum Dialog ein Selbstgespräch und findet vor allem im Drama Verwendung.
+Beiseitesprechen
+Das Beiseitesprechen oder A-part-Sprechen ist ein Stilmittel des Theaters. Eine Bühnenfigur sagt etwas, das ihre Dialogpartner nicht mitbekommen, wohl aber das Publikum.</pre>
+
+<p>Beschreibungslisten werden vom {{htmlelement("dl")}};-Element eingeschlossen. Jeder Begriff ist in ein {{htmlelement("dt")}}-Element eingebettet, während die dazugehörige Beschreibung danach in einem {{htmlelement("dd")}}-Element hinzugefügt wird. Das sieht dann wie folgt aus:</p>
+
+<pre class="brush: html">&lt;dl&gt;
+  &lt;dt&gt;Innerer Monolog&lt;/dt&gt;
+  &lt;dd&gt;Der innere Monolog ist eine Form des Erzählens und wird oft zur Vermittlung von Gedankenvorgängen gebraucht.&lt;/dd&gt;
+  &lt;dt&gt;Monolog&lt;/dt&gt;
+  &lt;dd&gt;Der Monolog (gr. μόνος mónos „allein“ und -log; lat. Soliloquium) ist im Gegensatz zum Dialog ein Selbstgespräch und findet vor allem im Drama Verwendung.&lt;/dd&gt;
+  &lt;dt&gt;Beiseitesprechen&lt;/dt&gt;
+  &lt;dd&gt;Das Beiseitesprechen oder A-part-Sprechen ist ein Stilmittel des Theaters. Eine Bühnenfigur sagt etwas, das ihre Dialogpartner nicht mitbekommen, wohl aber das Publikum.&lt;/dd&gt;
+&lt;/dl&gt;</pre>
+
+<p>Browser stellen die Beschreibungen zu den Begriffen in den Beschreibungslisten normalerweise eingerückt dar. Hier auf MDN werden die Begriffe zusätzlich noch fett hervorgehoben.</p>
+
+<dl>
+ <dt>Innerer Monolog</dt>
+ <dd>Der innere Monolog ist eine Form des Erzählens und wird oft zur Vermittlung von Gedankenvorgängen gebraucht.</dd>
+ <dt>Monolog</dt>
+ <dd>Der Monolog (gr. μόνος mónos „allein“ und -log; lat. Soliloquium) ist im Gegensatz zum Dialog ein Selbstgespräch und findet vor allem im Drama Verwendung.</dd>
+ <dt>Beiseitesprechen</dt>
+ <dd>Das Beiseitesprechen oder A-part-Sprechen ist ein Stilmittel des Theaters. Eine Bühnenfigur sagt etwas, das ihre Dialogpartner nicht mitbekommen, wohl aber das Publikum.</dd>
+</dl>
+
+<p>Es ist möglich mehrere Beschreibungen zu einem einzigen Begriff anzugeben:</p>
+
+<dl>
+ <dt>Beiseitesprechen</dt>
+ <dd>Das Beiseitesprechen oder A-part-Sprechen ist ein Stilmittel des Theaters.</dd>
+ <dd>Eine Bühnenfigur sagt etwas, das ihre Dialogpartner nicht mitbekommen, wohl aber das Publikum.</dd>
+</dl>
+
+<h3 id="Aktives_Lernen_Eine_Beschreibungsliste_erstellen">Aktives Lernen: Eine Beschreibungsliste erstellen</h3>
+
+<p>Jetzt sind Sie dran: erstellen Sie eine Beschreibungsliste. Fügen Sie zu dem Text im <em>Input</em>-Feld unten die entsprechenden HTML-Elemente ein, so wie Sie es gerade gelernt haben. Im <em>Output</em>-Feld können Sie sehen, wie das Ergebnis im Browser angezeigt wird.</p>
+
+<p>Wenn Sie einen Fehler machen, können sie mit dem <em>Reset</em>-Button ganz einfach den Ausgangszustand wieder herstellen. Wenn Sie wirklich nicht wissen wie es geht, können Sie die Lösung anzeigen lassen indem Sie auf <em>Lösung anzeigen</em> klicken.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;h2&gt;Input&lt;/h2&gt;
+&lt;textarea id="code" class="input"&gt;Bacon
+Das was die Welt im Inneren zusammen hält.
+Eier
+Das was den Kuchen im Inneren zusammen hält.
+Kaffee
+Das Getränk welches die Welt am laufen hält.
+Eine bräunliche Farbe, desto dunkler umso stärker.
+&lt;/textarea&gt;
+&lt;h2&gt;Output&lt;/h2&gt;
+&lt;div class="output"&gt;&lt;/div&gt;
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+  &lt;input id="solution" type="button" value="Lösung anzeigen" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">body {
+  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
+}
+
+.input, .output {
+  width: 90%;
+  height: 10em;
+  padding: 10px;
+  border: 1px solid #0095dd;
+  overflow: auto;
+}
+
+button {
+  padding: 10px 10px 10px 0;
+}
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var code = textarea.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+function drawOutput() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+textarea.value = '&lt;dl&gt;\n  &lt;dt&gt;Bacon&lt;/dt&gt;\n  &lt;dd&gt;Das was die Welt im Inneren zusammen hält.&lt;/dd&gt;\n  &lt;dt&gt;Eier&lt;/dt&gt;\n  &lt;dd&gt;Das was den Kuchen im Inneren zusammen hält.&lt;/dd&gt;\n  &lt;dt&gt;Kaffee&lt;/dt&gt;\n  &lt;dd&gt;Das Getränk welches die Welt am laufen hält.
+&lt;/dd&gt;\n  &lt;dd&gt;Eine bräunliche Farbe, desto dunkler umso stärker.&lt;/dd&gt;\n&lt;/dl&gt;';
+  drawOutput();
+});
+
+textarea.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_1', 700, 500) }}</p>
+
+<h2 id="Zitate">Zitate</h2>
+
+<p>Mit HTML lassen sich auch Zitate als solche Kennzeichnen. Sie können entweder Blockzitate verwenden oder aber im Fließtext direkt Zitate einbinden.</p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Zitat kann ins Englische sowohl als "quote" als auch als "citation" übersetzt werden. Beide englischen Wörter werden in HTML parallel genutzt, als "quote" für <code>blockquote</code> und <code>q</code> und die Abkürzung für "citation" <code>cite</code>.</p>
+</div>
+
+<h3 id="&lt;blockquote>_-_Blockzitate">&lt;blockquote&gt; - Blockzitate</h3>
+
+<p>Um ein Blockzitat (engl.: "blockquote") zu erstellen benutzen Sie das {{htmlelement("blockquote")}}-Element. Damit können Sie auf Blockebene ein Zitat erstellen, welches z.B. einen ganzen Absatz, eine Liste oder ähnliches enthält. Sie können mit einer URL auf die Quelle des Zitates verlinken, nutzen Sie dafür das {{htmlattrxref("cite","blockquote")}}-Attribut. Als Beispiel zeigen wir ein Blockzitat von der MDN-Seite über das <code>&lt;blockquote&gt;</code>-Element:</p>
+
+<pre class="brush: html">&lt;p&gt;Das &lt;strong&gt;HTML &lt;code&gt;&lt;blockquote&gt;&lt;/code&gt; Element&lt;/strong&gt; (oder &lt;em&gt;HTML Block Quotation Element&lt;/em&gt;) gibt an, dass der eingeschlossene Text ein erweiterndes Zitat ist.&lt;/p&gt;</pre>
+
+<p>Um dies in ein Blockzitat zu verwandeln, machen wir einfach folgendes:</p>
+
+<pre class="brush: html">&lt;blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"&gt;
+  &lt;p&gt;Das &lt;strong&gt;HTML &lt;code&gt;&lt;blockquote&gt;&lt;/code&gt; Element&lt;/strong&gt; (oder &lt;em&gt;HTML Block Quotation Element&lt;/em&gt;) gibt an, dass der eingeschlossene Text ein erweiterndes Zitat ist.&lt;/p&gt;
+&lt;/blockquote&gt;</pre>
+
+<p>Browsers werden ein Blockzitat standardmäßig einrücken, um es als Zitat zu kennezichnen. Hier auf MDN macht es das auch, aber der Stil wurde noch etwas mehr verändert:</p>
+
+<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
+<p>Das <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (oder <em>HTML Block Quotation Element</em>) gibt an, dass der eingeschlossene Text ein erweiterndes Zitat ist.</p>
+</blockquote>
+
+<h3 id="&lt;q>_-_Inline_Zitate">&lt;q&gt; - Inline Zitate</h3>
+
+<p>Inline Zitate (Zitat = engl.: "<strong>q</strong>uote") funktionieren ganz ähnlich. Wir benutzen das {{htmlelement("q")}}-Element, um diese zu kennzeichnen. Unser Beispiel unten enthält ein Zitat von der <code>&lt;q&gt;</code>-Seite:</p>
+
+<pre class="brush: html">&lt;p&gt;Das Zitat-Element — &lt;code&gt;&amp;lt;q&amp;gt;&lt;/code&gt; — &lt;q cite="https://developer.mozilla.org/de/docs/Web/HTML/Element/q"&gt; indiziert, dass es sich bei dem eingeschlossenen Text um ein kurzes Zitat handelt.&lt;/q&gt;&lt;/p&gt;</pre>
+
+<p>Browser werden ein Zitat als normalen Text, welcher in Anführungszeichen eingepackt ist, anzeigen:</p>
+
+<p>Das Zitat-Element — <code>&lt;q&gt;</code> — <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">indiziert, dass es sich bei dem eingeschlossenen Text um ein kurzes Zitat handelt.</q></p>
+
+<h3 id="&lt;cite>_-_Quellenangabe">&lt;cite&gt; - Quellenangabe</h3>
+
+<p>Der Inhalt des {{htmlattrxref("cite","blockquote")}}-Attributs scheint hilfreich zu sein, leider ist es aber so das Browser, Bildschirmlesegeräte und dergleichen nicht viel damit machen können. Es gibt keinen Weg den Inhalt des <code>cite</code>-Attributs anzuzeigen, ohne eine eigene Lösung mittels JavaScript oder CSS zu schreiben. Wenn Sie die Quelle für den Leser zugägnlich machen wollen, dann benutzen Sie besser das {{htmlelement("cite")}}-Element. Eigentlich sollte darin der Name der zitierten Quelle stehen - also der Name des Buches oder der Person - aber es gibt keinen Grund warum man nicht einen Link hier einfügen kann. Das sieht dann so aus:</p>
+
+<pre class="brush: html">&lt;p&gt;Auf der &lt;a href="https://developer.mozilla.org/de/docs/Web/HTML/Element/blockquote"&gt;
+&lt;cite&gt;MDN blockquote-Seite&lt;/cite&gt;&lt;/a&gt; steht:
+&lt;/p&gt;
+
+&lt;blockquote cite="https://developer.mozilla.org/de/docs/Web/HTML/Element/blockquote"&gt;
+  &lt;p&gt;Das &lt;strong&gt;HTML &lt;code&gt;&amp;lt;blockquote&amp;gt;&lt;/code&gt;-Element&lt;/strong&gt; (oder &lt;em&gt;HTML Block
+  Quotation Element&lt;/em&gt;) indiziert, dass es sich bei dem eingeschlossenen Text um ein erweitertes Blockzitat handelt.&lt;/p&gt;
+&lt;/blockquote&gt;
+
+&lt;p&gt;Das &lt;code&gt;&amp;lt;q&amp;gt;&lt;/code&gt;-Element — ist &lt;q cite="https://developer.mozilla.org/de/docs/Web/HTML/Element/q"&gt;indiziert, dass es sich bei dem eingeschlossenen Text um ein kurzes Zitat handelt.
+Das &lt;code&gt;&amp;lt;q&amp;gt;&lt;/code&gt;-Element -- &lt;a href="https://developer.mozilla.org/de/docs/Web/HTML/Element/q"&gt;
+&lt;cite&gt;MDN q Seite&lt;/cite&gt;&lt;/a&gt;.&lt;/p&gt;</pre>
+
+<p>Die <code>cite</code>-Elemente werden standardmäßig in kursiver Schrift angezeigt. Sie können diesen Code auch auf GitHub als <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/quotations.html">quotations.html</a> Beispiel anschauen.</p>
+
+<h3 id="Aktives_lernen_Wer_hat_das_gesagt">Aktives lernen: Wer hat das gesagt?</h3>
+
+<p>Es ist Zeit für eine weitere Übung! Bitte lösen Sie die folgenden Aufgaben:</p>
+
+<ol>
+ <li>Ändern Sie den mittleren Absatz in ein Blockzitat, weches ein <code>cite</code>-Attribut besitzt.</li>
+ <li>Ändern Sie einen Teil des dritten Absatzes in ein Inline Zitat, welches ebenfalls ein <code>cite</code>-Attribut besitzt.</li>
+ <li>Fügen Sie jedem Link ein <code>&lt;cite&gt;</code>-Element hinzu.</li>
+</ol>
+
+<p>Suchen Sie selbst online nach den richtigen Quellen für diese Zitate.</p>
+
+<p>Wenn Sie einen Fehler machen, können sie mit dem <em>Reset</em>-Button ganz einfach den Ausgangszustand wieder herstellen. Wenn Sie wirklich nicht wissen wie es geht, können Sie die Lösung anzeigen lassen indem Sie auf <em>Lösung anzeigen</em> klicken.</p>
+
+<div class="hidden">
+<h6 id="Playable_code_2">Playable code</h6>
+
+<pre class="brush: html">&lt;h2&gt;Input&lt;/h2&gt;
+&lt;textarea id="code" class="input"&gt;&lt;p&gt;Hallo und willkommen zu meiner Motivations-Webseite. Wie Konfuzius einmal sagte:&lt;/p&gt;
+
+&lt;p&gt;It does not matter how slowly you go as long as you do not stop. Auf deutsch: Es ist egal wie langsam du gehst, so lange du nicht anhältst.&lt;/p&gt;
+
+&lt;p&gt;Ich mag auch das Konzept des positiven Denkens und versuche negative Selbstkritik zu vermeiden (wie im Artikel "The Need To Eliminate Negative Self Talk" in Affirmations for Positive Thinking erklärt wird).&lt;/p&gt;&lt;/textarea&gt;
+&lt;h2&gt;Output&lt;/h2&gt;
+&lt;div class="output"&gt;&lt;/div&gt;
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+  &lt;input id="solution" type="button" value="Lösung anzeigen" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">body {
+  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
+}
+
+.input, .output {
+  width: 90%;
+  height: 10em;
+  padding: 10px;
+  border: 1px solid #0095dd;
+  overflow: auto;
+}
+
+button {
+  padding: 10px 10px 10px 0;
+}
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var code = textarea.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+function drawOutput() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+textarea.value = '&lt;p&gt;Hallo und willkommen zu meiner Motivations-Webseite. Wie &lt;a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"&gt;&lt;cite&gt;Konfuzius&lt;/cite&gt;&lt;/a&gt; einmal gesagt hat:&lt;/p&gt;\n\n&lt;blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html"&gt;\n  &lt;p&gt;It does not matter how slowly you go as long as you do not stop. Auf deutsch: Es ist egal wie langsam du gehst, so lange du nicht anhältst.&lt;/p&gt;\n&lt;/blockquote&gt;\n\n&lt;p&gt;Ich mag auch das Konzept des positiven Denkens und versuche negative Selbstkritik zu vermeiden (wie im Artikel &lt;q cite="http://www.affirmationsforpositivethinking.com/index.htm"&gt;The Need To Eliminate Negative Self Talk&lt;/q&gt; in &lt;a href="http://www.affirmationsforpositivethinking.com/index.htm"&gt;&lt;cite&gt;Affirmations for Positive Thinking&lt;/cite&gt;&lt;/a&gt; erklärt wird).&lt;/p&gt;';
+  drawOutput();
+});
+
+textarea.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', 700, 500) }}</p>
+
+<h2 id="&lt;abbr>_-_Abkürzungen">&lt;abbr&gt; - Abkürzungen</h2>
+
+<p>Ein weiteres Element, welches man öfters auf Webseiten findet ist {{htmlelement("abbr")}}. Es wird genutzt, um Abkürzungen zu kennzeichnen und die volle Schreibweise der Abkürzung zur Verfügung zu stellen. Die volle Schreibweise wird in dem Element als {{htmlattrxref("title")}}-Attribut angegeben. Hier ein paar Beispiele:</p>
+
+<pre>&lt;p&gt;Wir benutzen &lt;abbr title="Hypertext Markup Language"&gt;HTML&lt;/abbr&gt;, um ein Webdokument zu strukturieren.&lt;/p&gt;
+
+&lt;p&gt;Ich denke &lt;abbr title="Doktor"&gt;Dr.&lt;/abbr&gt; Green war in der Küche mit der Kettensäge.&lt;/p&gt;</pre>
+
+<p>Dies wird wie folgt im Browser ausgegeben (der volle Text der Abkürzungen wird angezeigt, wenn der Mauszeiger darüber gefahren wird):</p>
+
+<p>Wir nutzen <abbr title="Hypertext Markup Language">HTML</abbr>, um ein Webdokument zu strukturieren.</p>
+
+<p>Ich denke <abbr title="Doktor">Dr.</abbr> Green war in der Küche mit der Kettensäge.</p>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Es gibt ein weiteres Element, {{htmlelement("acronym")}}, welches das selbe tut wie <code>&lt;abbr&gt;</code>, nur das es Acronyme kennzeichnen sollte. Es wird aber kaum genutzt und von Browsern wird es nicht so gut unterstüzt. Es ist also besser nur noch <code>&lt;abbr&gt;</code> zu nutzen.</p>
+</div>
+
+<h3 id="Aktives_lernen_Eine_Abkürzung_kennzeichnen">Aktives lernen: Eine Abkürzung kennzeichnen</h3>
+
+<p>In dieser kleinen Lernübung, möchten wir, das Sie eine Abkürzung als solche Kennzeichnen. Sie können das Beispiel unten benutzen oder es durch ein eigenes ersetzen.</p>
+
+<div class="hidden">
+<h6 id="Playable_code_3">Playable code</h6>
+
+<pre class="brush: html">&lt;h2&gt;Input&lt;/h2&gt;
+&lt;textarea id="code" class="input"&gt;&lt;p&gt;Die NASA bringt uns den Sternen näher.&lt;/p&gt;&lt;/textarea&gt;
+&lt;h2&gt;Output&lt;/h2&gt;
+&lt;div class="output"&gt;&lt;/div&gt;
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+  &lt;input id="solution" type="button" value="Lösung anzeigen" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">body {
+  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
+}
+
+.input, .output {
+  width: 90%;
+  height: 5em;
+  padding: 10px;
+  border: 1px solid #0095dd;
+  overflow: auto;
+}
+
+button {
+  padding: 10px 10px 10px 0;
+}
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var code = textarea.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+function drawOutput() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+textarea.value = '&lt;p&gt;&lt;abbr title="National Aeronautics and Space Administration"&gt;NASA&lt;/abbr&gt; bringt uns den Sternen näher.&lt;/p&gt;';
+  drawOutput();
+});
+
+textarea.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_3', 700, 350) }}</p>
+
+<h2 id="Kontaktdaten_markieren">Kontaktdaten markieren</h2>
+
+<p>HTML hat ein Element, um Kontaktdaten zu markieren — {{htmlelement("address")}}. Beispiel:</p>
+
+<pre class="brush: html">&lt;address&gt;
+  &lt;p&gt;Chris Mills, Manchester, The Grim North, UK&lt;/p&gt;
+&lt;/address&gt;</pre>
+
+<p>Eine Sache die man sich merken sollte ist, dass das &lt;address&gt;-Element dafür gedacht ist, die Kontaktdaten der Person zu markieren, welche den HTML-Code geschrieben hat, nicht irgendeine Adresse. Das obige Beispiel wäre nur ok, wenn Chris tatsächlich das Dokument geschrieben hat, in dem die Adresse zu finden ist. Das folgende wäre aber auch in Ordnung:</p>
+
+<pre class="brush: html">&lt;address&gt;
+  &lt;p&gt;Webseite erstellt von &lt;a href="../authors/chris-mills/"&gt;Chris Mills&lt;/a&gt;.&lt;/p&gt;
+&lt;/address&gt;</pre>
+
+<h2 id="Hochstellen_und_tiefstellen_von_Text">Hochstellen und tiefstellen von Text</h2>
+
+<p>Manchmal brauchen sie hochgestellten oder tiefgestellten Text. Für hochgestellten Text (engl.: superscript) gibt es das HTML-Element {{htmlelement("sup")}}. Für tiefergestellten Text (engl.: subscript) gibt es das Element {{htmlelement("sub")}}. Beispiel:</p>
+
+<pre class="brush: html">&lt;p&gt;My birthday is on the 25&lt;sup&gt;th&lt;/sup&gt; of May 2001.&lt;/p&gt;
+&lt;p&gt;Die chemische Formel von Koffein ist C&lt;sub&gt;8&lt;/sub&gt;H&lt;sub&gt;10&lt;/sub&gt;N&lt;sub&gt;4&lt;/sub&gt;O&lt;sub&gt;2&lt;/sub&gt;.&lt;/p&gt;
+&lt;p&gt;Wenn x&lt;sup&gt;2&lt;/sup&gt; gleich 9 ist, dann muss x gleich 3 oder -3 sein.&lt;/p&gt;</pre>
+
+<p>Der Code wird wie folgt gerendert:</p>
+
+<p>My birthday is on the 25<sup>th</sup> of May 2001.</p>
+
+<p>Die chemische Formel von Koffein ist C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
+
+<p>Wenn x<sup>2</sup> gleich 9 ist, dann muss x gleich 3 oder -3 sein.</p>
+
+<h2 id="Computercode_darstellen">Computercode darstellen</h2>
+
+<p>Es gibt ein paar Elemente mit denen man Computercode darstellen kann:</p>
+
+<ul>
+ <li>{{htmlelement("code")}}: Um normalen Computercode darzustellen.</li>
+ <li>{{htmlelement("pre")}}: Um Leerzeichen mit darzustellen, welche im Code genutzt werden, um Codeblöcke voneinander abzugrenzen. Normalerweise würde der Browser mehr als 1 Leerzeichen ignorieren und zu einem einzigen zusammen fassen, wenn der Text in <code>&lt;pre&gt;&lt;/pre&gt;</code> Tags eingepackt ist, dann bleiben die Leerzeichen erhalten.</li>
+ <li>{{htmlelement("var")}}: Um Variabelnamen zu markieren.</li>
+ <li>{{htmlelement("kbd")}}: Um Tastatureingaben darzustellen.</li>
+ <li>{{htmlelement("samp")}}: Um das Ergebnis eines Computerprogramms zu markieren.</li>
+</ul>
+
+<p>Schauen wir uns ein paar Beispiele an. Hiermit können Sie ein wenig herum experimentieren (sie können auch diese Kopie davon herunterladen <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/other-semantics.html">other-semantics.html</a>):</p>
+
+<pre class="brush: html">&lt;pre&gt;&lt;code&gt;var para = document.querySelector('p');
+
+para.onclick = function() {
+  alert('Au, hör auf mich zu drücken!!');
+}&lt;/code&gt;&lt;/pre&gt;
+
+&lt;p&gt;Sie sollten nicht zu repräsentative Elemente benutzen, wie &lt;code&gt;&amp;lt;font&amp;gt;&lt;/code&gt; und &lt;code&gt;&amp;lt;center&amp;gt;&lt;/code&gt;.&lt;/p&gt;
+
+&lt;p&gt;In dem obigen JavaScript Beispiel, repräsentiert &lt;var&gt;para&lt;/var&gt; ein p-Element.&lt;/p&gt;
+
+
+&lt;p&gt;Markieren Sie den ganzen Text mit &lt;kbd&gt;Ctrl&lt;/kbd&gt;/&lt;kbd&gt;Cmd&lt;/kbd&gt; + &lt;kbd&gt;A&lt;/kbd&gt;.&lt;/p&gt;
+
+&lt;pre&gt;$ &lt;kbd&gt;ping mozilla.org&lt;/kbd&gt;
+&lt;samp&gt;PING mozilla.org (63.245.215.20): 56 data bytes
+64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms&lt;/samp&gt;&lt;/pre&gt;</pre>
+
+<p>Der obige Code sollte im Browser folgendermaßen aussehen:</p>
+
+<p>{{ EmbedLiveSample('Computercode_darstellen','100%',300) }}</p>
+
+<h2 id="Zeit_und_Datum_markieren">Zeit und Datum markieren</h2>
+
+<p>HTML stellt auch das {{htmlelement("time")}} zur Verfügung, um Zeit und Datum so darzustellen, das auch Computer diese lesen können. Beispiel:</p>
+
+<pre class="brush: html">&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20<span class="pl-pds">"</span></span>&gt;20 Januar 2016&lt;/<span class="pl-ent">time</span>&gt;</pre>
+
+<p>Wieso ist das nützlich? Deswegen, weil Menschen auf viele verschiedene Weisen ein Datum wiedergeben. Das obige Datum könnte auch wie folgt geschrieben sein:</p>
+
+<ul>
+ <li>20 Januar 2016</li>
+ <li>20th Januar 2016</li>
+ <li>Jan 20 2016</li>
+ <li>20/06/16</li>
+ <li>06/20/16</li>
+ <li>The 20th of next month</li>
+ <li><span lang="fr">20e Janvier 2016</span></li>
+ <li><span lang="ja">2016年1月20日</span></li>
+ <li>Und so weiter</li>
+</ul>
+
+<p>Ein Computer kann nicht so einfach erkennen, das immer das selber Datum gemeint ist. Wenn man also automatisch alle Datumsangaben von einer Webseite erfassen möchte, um diese zum Beispiel in einem Kalender zu nutzen, dann braucht man eine einheiltiche Schreibweise für den Computer. Mit dem {{htmlelement("time")}}-Element können Sie an eine beliebige Datumsschreibweise, eine einfache, für den Computer lesbare Form anhängen.</p>
+
+<p>Das grundlegende Beispiel oben zeigt ein einfaches, vom Computer lesbares Datum. Aber es gibt mehr verschiedene Optionen, zum Beispiel:</p>
+
+<pre class="brush: html">&lt;!-- Jahr-Monat-Tag --&gt;
+&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20<span class="pl-pds">"</span></span>&gt;20 Januar 2016&lt;/<span class="pl-ent">time</span>&gt;
+&lt;!-- Nur Jahr und Monat --&gt;
+&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01<span class="pl-pds">"</span></span>&gt;January 2016&lt;/<span class="pl-ent">time</span>&gt;
+&lt;!-- Nur Monat und Tag --&gt;
+&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>01-20<span class="pl-pds">"</span></span>&gt;20 January&lt;/<span class="pl-ent">time</span>&gt;
+&lt;!-- Nur die Zeit, Stunden:Minuten --&gt;
+&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>19:30<span class="pl-pds">"</span></span>&gt;19:30&lt;/<span class="pl-ent">time</span>&gt;
+&lt;!-- Man kann auch Sekunden und Millisekunden angeben! --&gt;
+&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span></span>19:30:01.856<span class="pl-s"><span class="pl-pds">"</span></span>&gt;19:30:01.856&lt;/<span class="pl-ent">time</span>&gt;
+&lt;!-- Datum und Uhrzeit --&gt;
+&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20T19:30<span class="pl-pds">"</span></span>&gt;7.30pm, 20 January 2016&lt;/<span class="pl-ent">time</span>&gt;
+&lt;!-- Datum und Uhrzeit mit Zeitzone --&gt;
+&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20T19:30<span class="pl-pds">+01:00"</span></span>&gt;7.30pm, 20 Januar 2016 ist 8.30pm in Frankreich&lt;/<span class="pl-ent">time</span>&gt;
+&lt;!-- Eine bestimmte Wochennummer angeben--&gt;
+&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-W04<span class="pl-pds">"</span></span>&gt;Die vierte Woche im Jahr 2016&lt;/<span class="pl-ent">time</span>&gt;</pre>
+
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+
+<p>Dies ist alles, was Sie über Textstrukturierung in HTML wissen müssen. Es gibt ntürlich noch mehr HTML-Elemente für die Darstellung und Strukturierung von Texten, aber die gebräuchlisten haben wir nun in diesem Kurs abgedeckt. Falls Sie dennoch daran interessiert sind wirklich alle Elemente zur Textgestlaltung kennen zu lernen, dann schauen Sie in unserer <a href="/de/docs/Web/HTML/Element">HTML-Element Referenz</a> nach, denn dort sind alle HTML-Elemente aufgelistet.<br>
+ Im nächsten Artikel geht es darum, Struktur in unser ganzes HTML-Dokument zu bringen, wie man verschiedene Bereiche einer Webseite bestimmt und diese ausrichtet. Lesen Sie weiter!</p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</p>
diff --git a/files/de/learn/html/einführung_in_html/index.html b/files/de/learn/html/einführung_in_html/index.html
new file mode 100644
index 0000000000..73f46a2614
--- /dev/null
+++ b/files/de/learn/html/einführung_in_html/index.html
@@ -0,0 +1,65 @@
+---
+title: Einführung in HTML
+slug: Learn/HTML/Einführung_in_HTML
+tags:
+  - Einführung in HTML
+  - HTML
+  - Kopf
+  - LandingPage
+  - Lernen
+  - Links
+  - Struktur
+  - Textformatierung
+  - head
+translation_of: Learn/HTML/Introduction_to_HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">{{glossary("HTML")}} ist eine relativ einfache Sprache, die aus <a href="/de/docs/Glossary/Element">Elementen</a> aufgebaut ist. Diese Elemente können auf verschiedene Textstücke angewandt werden, um ihnen verschiedene Bedeutungen zuzuschreiben (Ist es ein Absatz, eine Liste oder Teil einer Tabelle?), um ein Dokument sinnvoll zu strukturieren (Gibt es eine Kopfzeile? Ist der Inhalt in drei Spalten gegliedert? Gibt es ein Navigationsmenü?) und um Inhalte, wie Videos und Bilder einzubetten. Dieses Modul wird sich mit den ersten Beiden dieser Punkte beschäftigen und die fundamentalen Konzepte und Syntax einführen, die Sie zum Verständnis von HTML kennen müssen.</p>
+
+<h2 id="Voraussetzungen">Voraussetzungen</h2>
+
+<p>Sie benötigen für dieses Modul keine HTML Kenntnisse, allerdings sollten Sie grundsätzlich mit Computern umgehen können und das Internet passiv nutzen (d.h. im Internet surfen und Inhalte konsumieren). Sie sollten sich bereits eine einfache Arbeitsumgebung eingerichtet haben, wie in <a href="/de/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Notwendige Software installieren</a> beschrieben; und wissen wie Sie Ihre Dateien erstellen und  ordnen, wie in <a href="/de/docs/Learn/Getting_started_with_the_web/dateien_nutzen">Dateien nutzen</a> erklärt. Beide Artikel sind Teil unserer Artikelserie <a href="/de/docs/Learn/Getting_started_with_the_web">Lerne das Internet kennen</a>, welche das Grundwissen abdeckt, welches in diesem Modul vorrausgesetzt wird.</p>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Wenn Sie an einem Computer/Tablet/Gerät arbeiten, auf dem Sie nicht die Möglichkeit haben, eigene Dateien zu erstellen, können Sie die meisten Code-Beispiele in einem Online-Editor wie <a href="http://jsbin.com/">JSBin</a> oder <a href="https://thimble.mozilla.org/">Thimble </a>ausprobieren.</p>
+</div>
+
+<h2 id="Lerneinheiten">Lerneinheiten</h2>
+
+<p>Dieses Modul enthält die folgenden Lerneinheiten, die Ihnen HTML in Theorie und Praxis näher bringen. Es werden viele Möglichkeiten geboten, in denen Sie Ihre neu erworbenen Fähigkeiten ausprobieren können.</p>
+
+<dl>
+ <dt><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Lernen Sie HTML kennen</a></dt>
+ <dd>Hier lernen Sie die absoluten Grundlagen von HTML. Für den Anfang werden wir Begriffe, wie "Elemente", "Attribute" und andere wichtige Begriffe definieren und deren Einordung in die Sprache vornehmen. Wir zeigen Ihnen, wie eine HTML-Webseite typischerweise aufgebaut ist, wie eine HTML-Elemente strukturiert sind und erklären weitere grundlegende Sprachfunktionen. Sie können zwischendurch immer wieder mit HTML-Code spielen, damit sie ein Gefühl für die Zusammenhänge bekommen.</dd>
+ <dt><a href="/de/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Was gehört in den Kopf der HTML-Datei?</a></dt>
+ <dd>Der Kopf (<a href="/en-US/docs/Glossary/Head">Head</a>) eines HTML Dokuments ist der Teil, der <strong>nicht</strong> im Browser angezeigt wird, wenn dieses geladen wird. Im Kopf sind Zusatzinformationen zur Webseite enthalten, zum Beispiel das {{htmlelement("title")}}-Element, das den Titel der Webseite enthält, Links zu {{glossary("CSS")}}-Dateien (mit welchen die Webseite gestaltet wird) und Metadaten (z. B. wer der Autor der Webseite ist und Schlagwörter, welche Suchmaschinen helfen Ihre Webseite einzuordnen).</dd>
+ <dt><a href="/de/docs/Learn/HTML/Einf%C3%BChrung_in_HTML/Einfache_Textformatierung_in_HTML">Einfache Textformatierung in HTML</a></dt>
+ <dd>Eine der Hauptaufgaben von HTML ist es, jedem Textteil Informationen zu seiner Bedeutung im Kontext zukommen zu lassen (auch <a href="/en-US/docs/Glossary/Semantics">Semantics</a> genannt), damit der Browser weiß, wie der Textteil darzustellen ist. In diesem Artikel lernen Sie, wie man mit HTML einen Textblock in Überschriften und Absätze strukturiert, Hervorhebungen und Gewicht zu Wörtern hinzufügt, Listen erstellt und vieles mehr.</dd>
+ <dt><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks"> Erstellen von Hyperlinks</a></dt>
+ <dd>Hyperlinks sind sehr wichtig, denn erst Sie machen das Internet zu einem Netzwerk. Dieser Artikel behandelt die Syntax eines Links und bespricht allgemeine Richtlinien zu Links.</dd>
+ <dt><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Fortgeschrittene Textformatierung</a></dt>
+ <dd>Es gibt, neben den im Artikel <a href="/de/docs/Learn/HTML/Einf%C3%BChrung_in_HTML/Einfache_Textformatierung_in_HTML">Einfache Textformatierung in HTML</a> erläuterten, viele weitere HTML-Elemente, mit denen man Texte formatieren kann. Diese HTML-Elemente sind nicht ganz so bekannt, aber es ist dennoch hilfreich, sie zu kennen. Hier lernen Sie, wie man Zitate einbindet, Description Lists (dt. etwa: beschreibende Listen) erstellt, Computer-Code und ähnlichen Text darstellt, Hoch- und Tiefstellung erreicht, Kontaktinformationen anordnet und einiges mehr.</dd>
+ <dt><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Struktur in die Webseite bringen</a></dt>
+ <dd>Sie können mit HTML sowohl individuelle Teile der Webseite (wie "einen Absatz" oder "ein Bild"), aber auch ganze Abschnitte der Seite formatieren (wie "die Kopfzeile", "das Naviagtionsmenü" oder "die Hauptinhaltsspalte"). In diesem Artikel geht es um das planen einer grundlegenden Webseitenstruktur und die anschließende Umsetzung dieser Struktur in HTML.</dd>
+ <dt><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Fehlersuche in HTML</a></dt>
+ <dd>HTML schreiben zu können ist gut, aber was können Sie tun, wenn etwas nicht funktioniert und Sie den Fehler im Code nicht finden? Dieser Artikel stellt ein paar Werkzeuge vor, die Ihnen bei der Fehlersuche helfen können.</dd>
+</dl>
+
+<h2 id="Aufgaben">Aufgaben</h2>
+
+<p>Die folgenden Übungsaufgaben überprüfen Ihr Verständnis der in den obigen Lerneinheiten behandelten HTML-Grundlagen.</p>
+
+<dl>
+ <dt><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Formatieren Sie einen Brief</a></dt>
+ <dd>Wir lernen früher oder später alle, einen formalen Brief zu schreiben. Darüber hinaus ist es auch ein schönes Beispiel um den Wissenstand im Bereich der Textformatierung unter Beweis zu stellen. In dieser Aufgabe sollen Sie einen vorgegebenen Brief mit HTML formatieren.</dd>
+ <dt><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Strukturieren Sie eine Webseite</a></dt>
+ <dd>In dieser Übungsaufgabe wird Ihre Fähigkeit getestet, mit HTML eine einfache Webseite zu strukturieren. Diese enthält eine Kopfzeile, eine Fußzeile, ein Navigationsmenü, eine Hauptspalte und eine Randspalte.</dd>
+</dl>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<dl>
+ <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">Webgrundlagen Basiskurs 1 (Englisch)</a></dt>
+ <dd>Ein exzellenter Kurs der Mozilla Foundation, der viele Inhalte des <em>Einführung in HTML</em> Moduls, anwendet und festigt. Die Lernenden machen sich in diesem sechsteiligen Modul mit dem Lesen, Schreiben und Teilnehmen im Internet vertraut. Entdecken Sie die Fundamente des Internets durch Erschaffen und Zusammenarbeit.</dd>
+</dl>
diff --git a/files/de/learn/html/einführung_in_html/lerne_html_kennen/index.html b/files/de/learn/html/einführung_in_html/lerne_html_kennen/index.html
new file mode 100644
index 0000000000..0f5354d5d2
--- /dev/null
+++ b/files/de/learn/html/einführung_in_html/lerne_html_kennen/index.html
@@ -0,0 +1,571 @@
+---
+title: Lerne HTML kennen
+slug: Learn/HTML/Einführung_in_HTML/Lerne_HTML_kennen
+tags:
+  - Anfänger
+  - Attribut
+  - Beginner
+  - Charakter-Referenz
+  - Element
+  - Guide
+  - HTML
+  - Kommentar
+  - Leerraum
+  - Modul
+  - whitespace
+translation_of: Learn/HTML/Introduction_to_HTML/Getting_started
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<p class="summary">In diesem Artikel werden wir Ihnen die Grundlagen von HTML beibringen. Wir werden definieren was Elemente, Attribute und einige andere Begriffe, die sie im Zusammenhang mit dieser Sprache kennen lernen werden, sind. Wir zeigen auch wie ein HTML Element strukturiert ist, wie eine typische HTML Webseite aufgebaut ist und erklären weitere wichtige Grundlagen dieser Sprache. Währenddessen können Sie oft mit HTML-Code experimentieren.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Vorbereitungen:</th>
+   <td>grundlegende Computerkenntnisse, <a href="https://developer.mozilla.org/de/Learn/Getting_started_with_the_web/Installing_basic_software">notwendige Software installiert</a> und wissen wie man <a href="https://developer.mozilla.org/de/Learn/Getting_started_with_the_web/Dealing_with_files">Dateien nutzt</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Ziel:</th>
+   <td>
+    <p>Grundwissen über die HTML Sprache erwerben, etwas Praxis beim Schreiben von HTML Elementen erwerben.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Was_ist_HTML">Was ist HTML?</h2>
+
+<p>HTML ist nicht wirklich eine Programmiersprache, sondern eine Auszeichnungssprache; sie ist dazu gedacht, Ihre Webseite zu strukturieren. Die Sprache besteht aus einer Reihe von Elementen, Tags genannt, welche Sie um verschiedene Teile Ihres Inhalts herum platzieren können, um diesem eine spezielle Aufgabe zuzuweisen. Zum Beispiel können Sie damit einen Text oder ein Bild in einen Link verwandeln. Als Beispiel nehmen wir folgenden Inhalt:</p>
+
+<pre class="notranslate">Meine Katze ist sehr frech.</pre>
+
+<p>Wenn wir möchten das der Satz in einem eigenen Absatz steht, können wir mit {{htmlelement("p")}} spezifizieren, das es sich um einen Absatz handelt: </p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Meine Katze ist sehr frech.&lt;/p&gt;</pre>
+
+<h3 id="Aufbau_eines_HTML-Elements">Aufbau eines HTML-Elements</h3>
+
+<p>Schauen wir uns den Aufbau unseres Paragraphen-Elements ein wenig genauer an.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15443/katze-element.jpg" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p>
+
+<p>Die Hauptteile unseres Elements sind:</p>
+
+<ol>
+ <li><strong>Das öffnende Tag:</strong> Diese besteht aus dem Namen des Elements (in diesem Fall ein <code>p</code> für paragraph (engl.:Absatz)), welcher zwischen zwei spitzen Klammern eingesetzt ist. Dies zeigt an, wo das Element beginnt — in diesem Fall am Anfang unseres Absatzes.</li>
+ <li><strong>Der Inhalt:</strong> Dies ist der Inhalt des Elements, in diesem Fall einfach nur Text.</li>
+ <li><strong>Das schließende Tag:</strong> Dieses sieht genauso aus wie das öffnende Tag bis auf den zusätzlichen Schrägstrich (slash) vor dem Namen des Elements. Dieser Tag kommt an das Ende des Elementes — in diesem Fall am Ende des Absatzes.</li>
+ <li><strong>Das Element:</strong> Das öffnende Tag, der Inhalt und das schließende Tag gemeinsam ergeben zusammen das Element.</li>
+</ol>
+
+<h3 id="Aktives_Lernen_Erstellen_Sie_Ihr_erstes_HTML-Element">Aktives Lernen: Erstellen Sie Ihr erstes HTML-Element</h3>
+
+<p>Editieren Sie den Text unten im <em>Input</em>-Feld. Heben Sie den Text mit dem <code>&lt;em&gt;</code>-Element hervor. (schreiben sie ein <code>&lt;em&gt;</code>-Tag vor den Text, um das <em>Element zu öffnen</em> und fügen sie ein <code>&lt;/em&gt;</code>-Tag am Ende des Textes an, um das <em>Element zu schließen</em>) Dies sollte den Text <em>kursiv</em> darstellen. Sie sollten die Änderungen live in dem <em>Output</em>-Feld sehen können.</p>
+
+<p>Wenn Sie einen Fehler machen, können sie mit dem <em>Reset</em>-Button ganz einfach den Ausgangszustand wieder herstellen. Wenn Sie wirklich nicht wissen wie es geht, können Sie die Lösung anzeigen lassen indem Sie auf <em>Lösung anzeigen</em> klicken.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Input&lt;/h2&gt;
+&lt;textarea id="code" class="input"&gt;Dies ist mein Text.&lt;/textarea&gt;
+&lt;h2&gt;Output&lt;/h2&gt;
+&lt;div class="output"&gt;&lt;/div&gt;
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+  &lt;input id="solution" type="button" value="Lösung anzeigen" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">body {
+  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
+}
+
+.input, .output {
+  width: 90%;
+  height: 2em;
+  padding: 10px;
+  border: 1px solid #0095dd;
+}
+
+button {
+  padding: 10px 10px 10px 0;
+}
+</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var code = textarea.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+function drawOutput() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+  textarea.value = '&lt;em&gt;Dies ist mein Text.&lt;/em&gt;';
+  drawOutput();
+});
+
+textarea.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 300) }}</p>
+
+<h3 id="Elemente_verschachteln">Elemente verschachteln</h3>
+
+<p>Sie können auch Elemente innerhalb von anderen Elementen erstellen, dies wird <strong>Verschachteln</strong> genannt. Wenn wir hervorheben wollen, das unsere Katze <strong>sehr</strong> schlecht gelaunt ist, können wir das Wort "sehr" in ein <code>&lt;strong&gt;</code>-Element einbinden, was bedeutet, das dieses Wort fett hervorgehoben werden soll:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Meine Katze ist &lt;strong&gt;sehr&lt;/strong&gt; frech.&lt;/p&gt;</pre>
+
+<p>Sie müssen allerdings aufpassen, das Sie die Elemente richtig verschachteln: in dem obigen Beispiel haben wir zuerst das <code>&lt;p&gt;</code>-Element geöffnet, dann das <code>&lt;strong&gt;</code>-Element geöffnet. Deswegen müssen wir zuerst wieder das <code>&lt;strong&gt;</code>-Element schließen, bevor wir das <code>&lt;p&gt;</code>-Element schließen können. Das folgende Beispiel wäre deswegen falsch:</p>
+
+<pre class="example-bad brush: html notranslate">&lt;p&gt;Meine Katze ist &lt;strong&gt;sehr frech.&lt;/p&gt;&lt;/strong&gt;</pre>
+
+<p>Die Elemente müssen in der korrekten Reihenfolge geöffnet und geschlossen werden, so dass eines eindeutig innerhalb von dem anderen Element liegt. Wenn die Elemente überlappen, dann muss der Browser versuchen zu entscheiden, welches Element innerhalb sein soll und es können unerwartete Resultate herauskommen. Also passen Sie darauf auf.</p>
+
+<h3 id="Blockelemente_und_Inlineelemente">Blockelemente und Inlineelemente</h3>
+
+<p>Es gibt zwei wichtige Kategorien von Elementen in HTML - Blockelemente und Inlineelemente.</p>
+
+<ul>
+ <li>Blockelemente bilden eine sichtbare Box auf der Webseite - sie erscheinen in einer neuen Zeile, egal was für ein Inhalt vor diesem Element steht und aller Inhalt nach diesem Element wird ebenfalls auf eine neue Zeile geschoben. Blockelemente machen die Struktur der Webseite aus, sie repräsentieren Absätze, Listen, Navigationsmenüs oder die Fußzeile. Ein Blockelement kann nicht innerhalb von einem Inlineelement stehen, es kann aber innerhalb anderer Blockelemente sein.</li>
+ <li>Inlineelemente sind die Elemente welche immer innerhalb eines Blockelements stehen und nehmen nur den Platz direkt innerhalb einer Zeile (engl.: line) ein. Inlineelemente starten keine neue Zeile, normallerweise erscheinen Sie innerhalb eines Textabsatzes. Zum Beispiel sind die Elemente {{htmlelement("strong")}} und {{htmlelement("em")}} Inlineelemente.</li>
+</ul>
+
+<p>Schauen Sie sich folgendes Beispiel an:</p>
+
+<div class="hidden">
+<h6 id="Playable_code2">Playable code2</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Input&lt;/h2&gt;
+&lt;textarea id="code" class="input"&gt;&lt;em&gt;Erster&lt;/em&gt;&lt;em&gt;Zweiter&lt;/em&gt;&lt;em&gt;Dritter&lt;/em&gt;&lt;p&gt;Vierter&lt;/p&gt;&lt;p&gt;Fünfter&lt;/p&gt;&lt;p&gt;Sechster&lt;/p&gt;&lt;/textarea&gt;
+&lt;h2&gt;Output&lt;/h2&gt;
+&lt;div class="output"&gt;&lt;/div&gt;
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">body {
+  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
+}
+
+.input {
+  width: 90%;
+  height: 4em;
+  padding: 10px;
+  border: 1px solid #0095dd;
+}
+
+.output {
+  width: 90%;
+  height: 10em;
+  padding: 10px;
+  border: 1px solid #0095dd;
+}
+
+button {
+  padding: 10px 10px 10px 0;
+}
+</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var code = textarea.value;
+var output = document.querySelector(".output");
+
+function drawOutput() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawOutput();
+});
+
+textarea.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code2', 700, 400) }}</p>
+
+<p>{{htmlelement("em")}} ist ein Inlineelement. Sie können oben sehen, das die ersten drei Elemente in einer Zeile sind, ohne Zwischenräume zwischen den Elementen. {{htmlelement("p")}} ist ein Blockelement, welches jeweils eine neue Zeile für sich alleine einnimmt, mit Platz darüber und darunter.</p>
+
+<div class="note">
+<p><strong>Notiz</strong>: In HTML5 wurden die Elementkategorien neu definiert: die neuen Definitionen finden sie in <a href="http://www.whatwg.org/specs/web-apps/current-work/complete/section-index.html#element-content-categories">Element content categories</a>, (auf Englisch). Diese Definitionen sind akkurater als die beiden, welche wir hier vorgstellt haben, sie sind aber auch viel komplizierter. In diesem Modul bleiben wir bei unseren Block- und Inlineelementkategorien.</p>
+</div>
+
+<div class="note">
+<p><strong>Notiz</strong>: Sie können auf MDN hilfreiche Referenzseiten finden - für alle <a href="/de/docs/Web/HTML/Block-level_elements">Blockelemente</a> und <a href="/de/docs/Web/HTML/Inline_elements">Inlineelemente</a>.</p>
+</div>
+
+<h3 id="Leere_Elemente">Leere Elemente</h3>
+
+<p>Nicht alle Elemente folgen dem obigen Muster, mit einem öffnenden Tag, dem Inhalt und einem schließenden Tag. Manche Elemente brauchen nur einen einzigen Tag, welcher meist genutzt wird, um etwas in eine Seite einzubetten, an der Stelle wo das Tag steht. Zum Beispiel zeigen wir das {{htmlelement("img")}}-Element, welches genutzt wird um eine Bilddatei einzubinden:</p>
+
+<pre class="brush: html notranslate">&lt;img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"&gt;</pre>
+
+<p>Der Code würde folgende Webseite im Browser anzeigen:</p>
+
+<p>{{ EmbedLiveSample('Leere_Elemente', 700, 300) }}</p>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p>Elemente können auch Attribute enthalten, dass sieht dann so aus:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15463/katze-attribut.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p>
+
+<p>Diese Attribute enthalten Zusatzinformationen über das Element, welche nicht als eigentlicher Inhalt anzeigt werden. In diesem Fall erlaubt dieses Attribut, ihm einen Identifizierungsnamen zu geben, welchen man später dazu verwenden kann, dieses Element mit Informationen wie z. B. Schriftart und -farbe zu versehen.</p>
+
+<p>In unserem Beispiel ist der <em>Name</em> des Attributes <code>class</code> und <code>editor-note</code> ist der diesem Attribut zugeordnete <em>Wert</em>.</p>
+
+<p>Ein Attribut sollte immer haben:</p>
+
+<ol>
+ <li>Einen Abstand zwischen ihm und dem Elementnamen (oder dem vorherigen Attribut, wenn es mehrere sind).</li>
+ <li>Den Attributnamen, gefolgt von Gleichheitszeichen</li>
+ <li>Anführungs- und Schlusszeichen um den Wert. (bsp. <code>"</code><code>editor-note"</code>)</li>
+</ol>
+
+<h3 id="Aktives_Lernen_Hinzufügen_von_Attributen_zu_einem_Element">Aktives Lernen: Hinzufügen von Attributen zu einem Element</h3>
+
+<p>Ein weiteres Beispiel für ein Element ist {{htmlelement("a")}} — dies steht für Anker (engl.:anchor) und macht aus dem Text den es umschließt einen Hyperlink. Dieses Element kann einige Attribute annehmen, hier sind einige von ihnen:</p>
+
+<ul>
+ <li><code>href</code>: Dieses Attribut bestimmt die Webadresse, zu welcher der Link einen leiten soll, wenn man auf diesen klickt. Zum Beispiel könnte das so aussehen:  <code>href="https://www.mozilla.org/"</code>.</li>
+ <li><code>title</code>: Das <code>title</code> Attribut bestimmt Extrainformationen über den Link, zum Beispiel zu welcher Seite der Link führt. Dies erscheint als Tooltip, wenn man mit der Maus darüber fährt. Beispiel: <code>title="The Mozilla homepage"</code>.</li>
+ <li><code>target</code>: Das <code>target</code> Attribut bestimmt wie der Link vom Browser geöffnet werden soll. Zum Beispiel bestimmt <code>target="_blank"</code> das die angegebene Webseite in einem neuen Tab geöffnet werden soll. Wenn die Webseite in dem aktuellen Tab geöffnet werden soll, kann man dieses Attribut einfach weglassen, da Browser dies standardmäßig tun.</li>
+</ul>
+
+<p>Editieren Sie unten im <em>Input</em>-Feld die Zeile so, das es ein Link zu Ihrer Lieblingswebseite wird. Als erstes fügen Sie das <code>&lt;a&gt;</code>-Element hinzu. Danach fügen sie das <code>href</code>-Attribut und das <code>title</code>-Attribut hinzu. Als letztes sagen Sie dem Browser mit dem <code>target</code>-Attribut, das der Link in einem neuen Tab geöffnet werden soll. Sie werden Ihre Veränderungen live im <em>Output</em>-Feld verfolgen können. Wenn Sie fertig sind, sollten Sie einen Link sehen, welcher den Inhalt des <code>title</code>-Attributes anzeigt, wenn man mit dem Mauszeiger darüberfährt und wenn mn daraufklickt sollte der Link zu der entsprechenen Webadresse führen, welche sie im <code>href</code>-Attribut angegeben haben. Denken Sie daran, dass Sie ein Leerzeichen zwischen dem Element und dem ersten Attribut haben müssen und jeweils zwischen den Attributen.</p>
+
+<p>Wenn Sie einen Fehler machen können Sie das <em>Input</em>-Feld jederzeit mit dem <em>Reset</em>-Button zurücksetzen. Wenn Sie gar nicht auf die Lösung kommen, können Sie sich die Lösung anzeigen lassen indem Sie auf <em>Lösung anzeigen</em> klicken.</p>
+
+<div class="hidden">
+<h6 id="Playable_code3">Playable code3</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Input&lt;/h2&gt;
+&lt;textarea id="code" class="input"&gt;&amp;lt;p&amp;gt;Ein Link zu meiner Lieblingswebseite.&amp;lt;/p&amp;gt;&lt;/textarea&gt;
+&lt;h2&gt;Output&lt;/h2&gt;
+&lt;div class="output"&gt;&lt;/div&gt;
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+  &lt;input id="solution" type="button" value="Lösung anzeigen" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">body {
+  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
+}
+
+.input, .output {
+  width: 90%;
+  height: 3em;
+  padding: 10px;
+  border: 1px solid #0095dd;
+}
+
+button {
+  padding: 10px 10px 10px 0;
+}
+</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var code = textarea.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+function drawOutput() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+  textarea.value = '&lt;p&gt;Ein Link zu meiner &lt;a href="<code>https://www.mozilla.org/</code>" title="The Mozilla homepage" target="_blank"&gt;Lieblingswebseite&lt;/a&gt;.&lt;/p&gt;';
+  drawOutput();
+});
+
+textarea.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code3', 700, 300) }}</p>
+
+<h3 id="Boolsche_Attribute">Boolsche Attribute</h3>
+
+<p>Sie werden manchmal Attribute sehen, welche ohne Wert geschrieben sind und das ist so erlaubt. Es handelt sich um Boolsche Attribute und diese können nur einen Wert annehmen, welcher meist derselbe ist, wie der Name des Attributs. Als Beispiel zeigen wir das {{htmlattrxref("disabled", "input")}}-Attribut, welches Sie einem <code>&lt;input&gt;</code>-Element hinzufügen können, um dieses unbenutzbar (engl.: disabled) zu machen, d.h. das <code>&lt;input&gt;</code>-Feld wird ausgegraut und man kann keine Daten eingeben.</p>
+
+<pre class="notranslate">&lt;input type="text" disabled="disabled"&gt;</pre>
+
+<p>Als Kurzform kann man auch den folgenden Code schreiben: (Wir haben auch ein benutzbares Feld dazu getan, damit Sie sehen was hier geschieht.)</p>
+
+<pre class="brush: html notranslate">&lt;input type="text" disabled&gt;
+
+&lt;input type="text"&gt;
+</pre>
+
+<p>Beide werden Ihnen das folgende Resultat ausgeben:</p>
+
+<p>{{ EmbedLiveSample('Boolsche_Attribute', 700, 100) }}</p>
+
+<h3 id="Anfuehrungszeichen_um_Attributwerte_weglassen">Anfuehrungszeichen um Attributwerte weglassen</h3>
+
+<p>Wenn Sie sich etwas im Internet umschauen, werden Sie immer wieder auf merkwürdige Benutzung von HTML-Code stoßen. Dazu gehören auch Attributwerte ohne Anführungszeichen. Dies funktioniert an manchen Stellen, woanders kann es den ganzen Code kaputt machen. Wir schauen uns noch einmal unser Beispiel mit dem Link an. Wir könnten das auch wie folgt schreiben, wenn wir nur das <code>href</code>-Attribut benutzen:</p>
+
+<pre class="brush: html notranslate">&lt;a href=https://www.mozilla.org/&gt;Lieblingswebseite&lt;/a&gt;</pre>
+
+<p>Wenn wir aber das <code>title</code>-Attribut hinzufügen, dann funktioniert es so nicht mehr:</p>
+
+<pre class="example-bad brush: html notranslate">&lt;a href=https://www.mozilla.org/ title=Die Mozilla Webseite&gt;Lieblingswebseite&lt;/a&gt;</pre>
+
+<p>An diesem Punkt wird der Browser diesen Code falsch lesen und in dem <code>title</code>-Attribut drei separate Attribute sehen: ein <code>title</code>-Attribut mit dem Wert <code>"Die"</code> und zwei Boolsche Attribute, <code>Mozilla</code> und <code>Webseite</code>. Dies ist nicht was wir gewollt haben und der Fehler führt zu unerwünschtem Verhalten, siehe unten. Versuchen Sie mit dem Mauszeiger über dem Link zu fahren, um zu sehen was der Titeltext ist.</p>
+
+<p>{{ EmbedLiveSample('Anfuehrungszeichen_um_Attributwerte_weglassen', 700, 100) }}</p>
+
+<p>Unser Rat ist es, immer die Anführungszeichen um Attrbiutwerte zu setzen, damit Sie solche Probleme vermeiden können und besser lesbaren Code schreiben.</p>
+
+<h3 id="Einfache_oder_doppelte_Anführungszeichen">Einfache oder doppelte Anführungszeichen?</h3>
+
+<p>In diesem Artikel sind alle Attributwerte in doppelte Anführungszeichen eingepackt. Sie werden woanders aber eventuell sehen, das Leute anstattdessen einfache Anführungszeichen benutzen. Es ist egal welche Sorte Anführungszeichen genutzt wird, Sie können das machen wie Sie möchten. Beide der folgenden Zeilen sind äquivalent:</p>
+
+<pre class="brush: html notranslate">&lt;a href="http://www.example.com"&gt;Ein Link als Beispiel.&lt;/a&gt;
+
+&lt;a href='http://www.example.com'&gt;Ein Link als Beispiel.&lt;/a&gt;</pre>
+
+<p>Sie sollten die Anführungszeichen aber nicht miteinander mischen. Die folgende Zeile ist falsch!</p>
+
+<pre class="brush: example-bad html notranslate">&lt;a href="http://www.example.com'&gt;Ein Link als Beispiel.&lt;/a&gt;</pre>
+
+<p>Wenn Sie eine Sorte Anführungszeichen benutzen, können Sie die andere Sorte innerhalb dieser benutzen:</p>
+
+<pre class="brush: html notranslate">&lt;a href="http://www.example.com" title="Ist's nicht lustig?"&gt;Ein Link als Beispiel.&lt;/a&gt;</pre>
+
+<p>Wenn Sie die selbe Sorte Anführungszeichen innerhalb benutzen wollen, dann müssen Sie<a href="/de/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Entity_references_including_special_characters_in_HTML"> HTML entities</a> nutzen.</p>
+
+<h3 id="Aufbau_eines_HTML-Dokumentes">Aufbau eines HTML-Dokumentes</h3>
+
+<p>Jetzt wissen Sie wie die einzelnen Elemente in einer HTML-Datei aufgebaut sind, aber ein Element für sich alleine tut nicht viel. Wir schauen uns jetzt an, wie die einzelnen Elemente kombiniert werden, um ein funktionierendes HTML-Dokument aufzubauen. Schauen Sie sich diesen Code an:</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Meine Testseite&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;Dies ist meine Webseite.&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Hier haben wir:</p>
+
+<ul>
+ <li><code>&lt;!DOCTYPE html&gt;</code> — den Dokumenttyp. Früher, als HTML noch jung war (1991/92), war dies dazu gedacht, um dem Browser mitzuteilen, welchen Regeln er zu folgen hatte. Das konnte z. B. sein, dass der Browser automatisch die Fehler überprüft und andere nützliche Dinge. Wie auch immer, heutzutage achtet niemand mehr wirklich darauf, es muss jedoch vorhanden sein, damit alles richtig funktioniert.</li>
+ <li><code>&lt;html&gt;&lt;/html&gt;</code> — das <code>&lt;html&gt;</code> Element. Dieses Element umhüllt den ganzen Inhalt. Manchmal wird es auch als root-Element bezeichnet</li>
+ <li><code>&lt;head&gt;&lt;/head&gt;</code> — das <code>&lt;head&gt;</code> Element. In dieses Element ist alles eingeschlossen, was <em>nicht</em> auf der Seite angezeigt wird. Dies enthält Informationen wie Schlüsselwörter, eine Seitenbeschreibung, welche in Suchmaschinen erscheint, CSS um unseren Inhalt zu designen, usw.</li>
+ <li><code>&lt;body&gt;&lt;/body&gt;</code> — das <code>&lt;body&gt;</code> Element. Dies beinhaltet <em>alles</em>, was die Betrachter sehen, wenn sie die Webseite besuchen, egal ob Text, Bilder, Videos, Audiodateien, usw.</li>
+ <li><code>&lt;meta charset="utf-8"&gt;</code> — Dieses Element setzt die Zeichenkodierung deines Dokuments auf <code>utf-8</code>, was die Buchstaben von fast allen menschlichen Sprachen beinhaltet. Umlaute wie Ä und Ü werden sonst nicht richtig angezeigt.</li>
+ <li><code>&lt;title&gt;&lt;/title&gt;</code> — Dies setzt den Titel der Seite, welcher im Tab angezeigt wird. Dieser wird auch gebraucht, wenn jemand ein Lesezeichen erstellt.</li>
+</ul>
+
+<h3 id="Aktives_Lernen_Fügen_Sie_mehr_Inhalte_in_das_HTML_Dokument_ein">Aktives Lernen: Fügen Sie mehr Inhalte in das HTML Dokument ein</h3>
+
+<p>Wenn Sie lokal, auf Ihrem Computer, das Beispiel ausprobieren möchten, dann tun Sie folgendes:</p>
+
+<ol>
+ <li>Kopieren Sie das obige HTML-Dokument.</li>
+ <li>Erstellen Sie eine neue leere Datei in Ihrem Texteditor.</li>
+ <li>Fügen Sie den Code in die leere Datei ein.</li>
+ <li>Speichern Sie die Datei unter dem Namen index.html.</li>
+</ol>
+
+<div class="note">
+<p><strong>Notiz</strong>: Sie können dieses HTML-Grundgerüst auch im <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">MDN Learning Area Github repository</a> finden.</p>
+</div>
+
+<p>Sie können die Datei nun in einem Webbrowser öffnen, um zu sehen wie die Webseite aussieht. Dann können Sie den HTML-Code editieren und die Datei speichern. Wenn Sie dann die Datei im Browser neu laden, sehen Sie die Veränderungen. Am Anfang sieht die Webseite im Browser so aus:</p>
+
+<p><img alt="A simple HTML page that says This is my page" src="https://mdn.mozillademos.org/files/12279/template-screenshot.png" style="display: block; height: 365px; margin: 0px auto; width: 595px;">Diese Übung können Sie also lokal auf Ihrem Computer durchführen, wie oben beschrieben, oder Sie können die Übung mit unserem editierbaren Beispiel unten machen (das editierbare Fenster repräsentiert nur den Inhalt des {{htmlelement("body")}}-Elements). In der Übung sollen Sie die folgenden Dinge auf Ihrer Webseite implementieren:</p>
+
+<ul>
+ <li>Fügen Sie direkt unter dem öffnenden Tag des {{htmlelement("body")}}-Elements eine Überschrift ein. Dieser sollte ein <code>&lt;h1&gt;</code>-Tag vorangestellt sein und ein <code>&lt;/h1&gt;</code>-Tag hintenan stehen.</li>
+ <li>Schreiben Sie in den Absatz (<code>&lt;p&gt;</code>) etwas Text über etwas, das Sie interessiert.</li>
+ <li>Lassen Sie wichtige Wörter in fetter Schrift erscheinen, indem Sie das <code>&lt;strong&gt;</code>-Element benutzen.</li>
+ <li>Fügen Sie einen Link (<code>&lt;a&gt;</code>) innerhalb des Absatzes hinzu.</li>
+ <li>Fügen Sie ein Bild (<code>&lt;img&gt;</code>) hinzu, direkt unter dem Absatz. Sie bekommen einen Bonuspunkt, wenn Sie es schaffen zu einem anderen Bild zu verlinken (entweder lokal auf ihrem Computer oder irgendwo im Internet.)</li>
+</ul>
+
+<p>Wenn Sie einen Fehler machen können Sie das <em>Input</em>-Feld jederzeit mit dem <em>Reset</em>-Button zurücksetzen. Wenn Sie gar nicht auf die Lösung kommen, können Sie sich die Lösung anzeigen lassen indem Sie auf <em>Lösung anzeigen</em> klicken.</p>
+
+<div class="hidden">
+<h6 id="Playable_code4">Playable code4</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Input&lt;/h2&gt;
+&lt;textarea id="code" class="input"&gt;
+&amp;lt;p&amp;gt;Dies ist meine Webseite.&amp;lt;/p&amp;gt;&lt;/textarea&gt;
+&lt;h2&gt;Output&lt;/h2&gt;
+&lt;div class="output"&gt;&lt;/div&gt;
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+  &lt;input id="solution" type="button" value="Lösung anzeigen" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">body {
+  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
+}
+
+.input, .output {
+  width: 90%;
+  height: 10em;
+  padding: 10px;
+  border: 1px solid #0095dd;
+}
+
+img {
+  max-width: 100%;
+}
+
+.output {
+  overflow: auto;
+}
+
+button {
+  padding: 10px 10px 10px 0;
+}
+</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var code = textarea.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+function drawOutput() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+  textarea.value = '&lt;p&gt;Ich spiele gerne &lt;strong&gt;Schlagzeug&lt;/strong&gt;. Einer meiner Lieblingsschlagzeugspieler ist Neal Peart, welcher\
+ in der Band &lt;a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="Rush Wikipedia article"&gt;Rush&lt;/a&gt; spielt.\
+ Mein Lieblingsalbum von Rush ist zur Zeit &lt;a href="http://www.deezer.com/album/942295"&gt;Moving Pictures&lt;/a&gt;.&lt;/p&gt;\
+&lt;img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg"&gt;';
+  drawOutput();
+});
+
+textarea.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code4', 700, 600) }}</p>
+
+<h3 id="Leerraum_in_HTML">Leerraum in HTML</h3>
+
+<p>In dem obigen Beispiel werden Sie bemerkt haben, dass eine Menge Leerraum (engl.: Whitespace) dabei ist. Dies ist nicht notwendig. Die beiden folgenden Codestücke sind äquivalent:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Hunde sind komisch.&lt;/p&gt;
+
+&lt;p&gt;Hunde        sind
+         komisch.&lt;/p&gt;</pre>
+
+<p>Egal wieviel Leerraum sie benutzen (Leerraum sind Leerzeichen, aber auch Zeilenumbrüche), der HTML Parser wird den Leerraum immer zu einem einzigen Leerzeichen zusammenlegen, wenn die Webseite im Browser geladen wird. Wieso sollte man also so viel Leerraum benutzen? Die Antwort ist Lesbarkeit - es ist viel einfacher zu verstehen, was in einem Stück Code vor sich geht, wenn dieser schön formattiert ist und nicht alles ein zusammenhängender Klumpen ist.  In unserem HTML-Code haben wir jedes Element das in einem anderen Element steht mit zwei Leerzeichen weiter eingerückt.  Sie können selbst entscheiden, wie genau Sie Ihren Code formattieren (z. B. wieviele Leerzeichen Sie zum Einrücken benutzen), aber Sie sollten den Code selber gut lesen können.</p>
+
+<h2 id="Zeichenreferenzen_für_Sonderzeichen">Zeichenreferenzen für Sonderzeichen</h2>
+
+<p>In HTML sind die Zeichen <code>&lt;</code>, <code>&gt;</code>,<code>"</code>,<code>'</code> und <code>&amp;</code> spezielle Zeichen, da sie Teil der HTML Syntax sind. Wie kann man diese also im ausgegebenen Text benutzen, ohne dass diese als Teil des Markups interpretiert werden?</p>
+
+<p>Wir müssen hier Zeichenreferenzen benutzen — spezielle Codes, welche einzelne Zeichen repräsentieren und welche in diesen Fällen genutzt werden können. Jede Zeichenreferenz wird mit einem Und-Zeichen (&amp;) gestartet und mit einem Semikolon (;) beendet.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Ausgegebener Character</th>
+   <th scope="col">Zeichenreferenz</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>&lt;</td>
+   <td>&amp;lt;</td>
+  </tr>
+  <tr>
+   <td>&gt;</td>
+   <td>&amp;gt;</td>
+  </tr>
+  <tr>
+   <td>"</td>
+   <td>&amp;quot;</td>
+  </tr>
+  <tr>
+   <td>'</td>
+   <td>&amp;apos;</td>
+  </tr>
+  <tr>
+   <td>&amp;</td>
+   <td>&amp;amp;</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>In dem untenstehenden Beispiel können Sie einen Absatz sehen, in dem über Webtechnologien geschreiben wird:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;In HTML definieren Sie einen Absatz mit dem &lt;p&gt;-Element.&lt;/p&gt;
+
+&lt;p&gt;In HTML definieren Sie einen Absatz mit dem &amp;lt;p&amp;gt;-Element.&lt;/p&gt;</pre>
+
+<p>In dem Live-Output sieht man, dass der erste Absatz falsch dargestellt wird, weil der Browser den Tag nicht wie gewünscht anzeigt, sondern als Beginn eines neuen Absatzes interpretiert. Der zweite Absatz wird durch die Zeichenreferenzen korrekt dargestellt.</p>
+
+<p>{{ EmbedLiveSample('Charakter-Referenz_Spezielle_Charaktere_in_HTML', 700, 200) }}</p>
+
+<div class="note">
+<p><strong>Notiz</strong>: Eine Tabelle mit allen möglichen HTML Charakter-Referenzen kann auf Wikipedia gefunden werden: <a class="external text" href="http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references" rel="nofollow">List of XML and HTML character entity references</a>.</p>
+</div>
+
+<h2 id="HTML_Kommentare">HTML Kommentare</h2>
+
+<p>In HTML, wie auch in den meisten anderen Programmiersprachen, kann man Kommentare schreiben. Kommentare schreibt man in den Code, diese werden aber vom Browser ignoriert und somit unsichtbar für Benutzer der Webseite. Mit Kommentaren kann man als Entwickler des Codes, diesen für sich selbst und andere leichter verständlich machen. Besonders am Anfang ist es sinnvoll sich mit Kommentaren Anmerkungen zu dem geschriebenen Code zu machen, um später nachvollziehen zu können, was ein bestimmtes Stück Code bewirkt. Sie möchen Ihren Code ja auch noch verstehen nachdem Sie mehrere Monate nichts daran gemacht haben, oder dass ein Mitarbeiter ihren Code verstehen kann.</p>
+
+<p>Um einen Abschnitt in Ihrem HTML-Dokument zu einem Kommentar zu machen, schließen Sie diesen in die speziellen Marker <code>&lt;!--</code> und <code>--&gt;</code> ein, zum Beispiel:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Ich bin nicht in einem Kommentar&lt;/p&gt;
+
+&lt;!-- &lt;p&gt;Ich bin in einem Kommentar und werde auf der Webseite nicht angezeigt!&lt;/p&gt; --&gt;</pre>
+
+<p>Wie Sie unten erkennen können, wird der erste Absatz dargestellt, der zweite aber nicht.</p>
+
+<p>{{ EmbedLiveSample('HTML_Kommentare', 700, 100) }}</p>
+
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+
+<p>Sie haben das Ende des Artikels erreicht und wir hoffen es hat Ihnen etwas Spaß gemacht bei uns die Grundlagen von HTML zu erlernen!  An diesem Punkt sollten Sie verstehen, wie diese Sprache aussieht, wie sie funktioniert und in der Lage sein einige Elemente und Attribute zu benutzen. In weiterfürhenden Artikeln aus diesem Modul werden wir einige der Dinge, die Sie hier gelernt haben wieder aufgreifen und uns im Detail anschauen, aber auch neue Möglichkeiten dieser Sprache entdecken. Bleiben Sie dabei!</p>
+
+<div class="note">
+<p><strong>Notiz</strong>: Nun, da Sie dabei sind mehr über HTML zu lernen, möchten Sie vielleicht auch schon einmal in die Grundlagen von Cascading Style Sheets, kurz <a href="/de/docs/Learn/CSS">CSS </a>hineinstöbern. CSS ist die Sprache mit der wir unseren Webseiten einen bestimmten Stil geben. Zum Beispiel lassen sich mit CSS die Farben auf der Webseite ändern. HTML und CSS arbeiten Hand in Hand, wie Sie bald entdecken werden.</p>
+</div>
+
+<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div>
diff --git a/files/de/learn/html/einführung_in_html/marking_up_a_letter/index.html b/files/de/learn/html/einführung_in_html/marking_up_a_letter/index.html
new file mode 100644
index 0000000000..e2d3e9d636
--- /dev/null
+++ b/files/de/learn/html/einführung_in_html/marking_up_a_letter/index.html
@@ -0,0 +1,102 @@
+---
+title: Marking up a letter
+slug: Learn/HTML/Einführung_in_HTML/Marking_up_a_letter
+tags:
+  - Anfänger
+  - Brief
+  - HTML
+  - Links
+  - Text
+  - head
+translation_of: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<p class="summary">Wir alle lernen früher oder später einen Brief zu schreiben; es ist auch ein nützliches Beispiel, um unsere Textformatierungsfähigkeiten zu testen! Sie erhalten einen Brief, mit dem Sie grundlegende und fortgeschrittene HTML-Formatierungsmöglichkeiten, einschließlich Hyperlinks, testen können und wir werden Ihre Vertrautheit mit einigen HTML <code>&lt;head&gt;</code> Inhalten testen.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Vorwissen:</th>
+   <td>Bevor Sie diese Überprüfung durchführen, sollten Sie bereits <a href="/de/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Lernen Sie HTML kennen</a>, <a href="/de/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Was gehört in den Kopf? Metadaten in HTML</a>, <a href="/de/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Einfache Textformatierung mit HTML</a>, <a href="/de/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Erstellen von Links</a>, und <a href="/de/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Fortgeschrittene Textformatierung</a> durchgearbeitet haben.</td>
+  </tr>
+  <tr>
+   <th scope="row">Ziel:</th>
+   <td>Grundlegende und fortgeschrittene HTML-Textformatierung und Hyperlink-Fähigkeiten testen und wissen, was in den HTML &lt;head&gt; gehört.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Startpunkt">Startpunkt</h2>
+
+<p>Um diese Aufgaben zu starten, rufen Sie den <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/letter-text.txt">Rohtext auf, den Sie strukturieren sollen</a>, sowie die <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/css.txt">CSS</a>, die Sie in Ihre HTML einbinden müssen. Erstellen Sie die <code>.html</code>-Datei mit Ihrem Texteditor (oder nutzen Sie alternativ eine Seite wie <a class="external external-icon" href="http://jsbin.com/">JSBin</a> oder <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a>, um die Aufgaben zu bearbeiten.)</p>
+
+<h2 id="Projekt_Kurzbeschreibung">Projekt: Kurzbeschreibung</h2>
+
+<p>In diesem Projekt ist Ihre Aufgabe, einen Brief zu gestalten, der in einem Universitäts-Intranet gehostet werden soll. Der Brief ist eine Antwort von einer Forschungskollegin an einen zukünftigen Doktoranden, der seine Arbeit an der Universität antritt.</p>
+
+<p>Block-/Struktursemantik:</p>
+
+<ul>
+ <li>Bringen Sie das gesamte Dokument in eine sinnvolle Struktur, einschließlich Dokumententyp, {{htmlelement("html")}}-, {{htmlelement("head")}}- und {{htmlelement("body")}}-Elementen.</li>
+ <li>The letter in general should be marked up with a structure of paragraphs and headings, with the exception of the below points. There is one top level heading (the "Re:" line) and three second level headings.</li>
+ <li>Die "semester start dates", "study subjects" und "exotic dances" sollen mit einem angemessenen Listentyp ausgezeichnet werden.</li>
+ <li>Die zwei Adressen können einfach in Paragraphen eingefügt werden. Das {{htmlelement("address")}}-Element ist hierfür nicht geeignet — überlegen Sie, warum. Zusätzlich soll jede Zeile der Adresse in einer neuen Zeile sein, nicht aber in einem neuen Paragraphen.</li>
+</ul>
+
+<p>Semantik innerhalb des Textes:</p>
+
+<ul>
+ <li>Die Namen von Sender und Empfänger (und "Tel" und "Email") sollen mit besonderer Wichtigkeit hervorgehoben werden.</li>
+ <li>Die vier Daten sollen mit geeigneten Elementen als maschinenlesbares Datum ausgezeichnet werden.</li>
+ <li>Die erste Adresse und das erste Datum des Briefes sollen ein Klassenattributwert von "sender-column" erhalten; das CSS, das Sie später ergänzen, wird später für die Rechtsbündigkeit sorgen, die sie in einem klassischen Brieflayout haben.</li>
+ <li>Die fünf Akronyme/Abkürzungen im Hauptteil des Textes sollen so ausgezeichnet werden, dass die ausgeschriebene Version des jeweiligen Akronyms bzw. der Abkürzung hinterlegt ist.</li>
+ <li>Die sechs Sub- und Superskripte sollen angemessen ausgezeichnet werden — in den chemischen Formeln sowie die Zahlen 103 und 104 (sie sollen am Ende die Zahlen 10 hoch 3 und 10 hoch 4 darstellen).</li>
+ <li>Das Grad-Symbol und Multiplikationssymbol sollen jeweils an den entsprechenden Stellen ausgezeichnet werden, indem Sie <a href="https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references">angemessene Entitäts-Referenzen</a> benutzen.</li>
+ <li>Versuchen Sie, zumindest zwei geeignete Wörter innerhalb des Textes mit besonderer Wichtigkeit hervorzuheben.</li>
+ <li>An zwei Stellen soll ein Hyperlink ergänzt werden; fügen Sie gültige Links mit Titeln hinzu. Als Linkadresse verwenden Sie einfach http://example.com.</li>
+ <li>Das Universitätsmotto sowie das Zitat sollen mit geeigneten Elementen ausgezeichnet werden.</li>
+</ul>
+
+<p>Der Kopf (head) des Dokumentes:</p>
+
+<ul>
+ <li>Der Zeichensatz des Dokumentes sollte in einem entsprechenden Meta-Tag auf utf8 festgelegt werden.</li>
+ <li>Der Autor des Briefes sollte in einem entsprechenden Meta-Tag festgehalten werden.</li>
+ <li>Die bereitgestellte CSS-Datei sollte in einem entsprechenden Tag eingebunden werden.</li>
+</ul>
+
+<h2 id="Hinweise_und_Tipps">Hinweise und Tipps</h2>
+
+<ul>
+ <li>Nutzen Sie den <a href="https://validator.w3.org/">W3C HTML validator</a>, um Ihre HTML zu prüfen; Sie erhalten Bonuspunkte, wenn die Validierung erfolgreich ist.</li>
+ <li>Sie benötigen keine CSS-Fähigkeiten, um diese Aufgaben zu bewältigen; Sie müssen lediglich die bereitgestellte CSS-Datei in ein HTML-Element einfügen.</li>
+</ul>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Der nachfolgende Screenshot zeigt ein Beispiel dafür, wie der Brief nach der Auszeichnung aussehen könnte.</p>
+
+<p><img alt="Example" src="https://mdn.mozillademos.org/files/15811/Letter%20screengrab%202.png" style="border: 1px solid black; display: block; height: 1858px; margin: 0px auto; width: 931px;"></p>
+
+<h2 id="Einschätzung">Einschätzung</h2>
+
+<p>Falls Sie diesen Test im Rahmen eines organisierten Kurses absolvieren, sollten Sie Ihre Arbeit Ihrem/r Mentor*in/Lehrkraft zur Bewertung überreichen können. Falls Sie selbstständig lernen, können Sie die Bewertungskriterien sehr einfach erhalten, indem Sie im <a class="external external-icon" href="https://discourse.mozilla.org/t/structuring-a-page-of-content-assignment/24678" rel="noopener">Disskussionsthread zu dieser Übung</a> nachfragen oder im <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC Channel auf <a class="external external-icon" href="https://wiki.mozilla.org/IRC" rel="noopener">Mozilla IRC</a>. Versuchen Sie es zunächst selbst -- mit Mogeleien ist nichts gewonnen!</p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}</p>
+
+<h2 id="In_diesem_Modul">In diesem Modul</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li>
+</ul>
diff --git a/files/de/learn/html/einführung_in_html/structuring_a_page_of_content/index.html b/files/de/learn/html/einführung_in_html/structuring_a_page_of_content/index.html
new file mode 100644
index 0000000000..fc439ad60b
--- /dev/null
+++ b/files/de/learn/html/einführung_in_html/structuring_a_page_of_content/index.html
@@ -0,0 +1,99 @@
+---
+title: Structuring a page of content
+slug: Learn/HTML/Einführung_in_HTML/Structuring_a_page_of_content
+translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<p class="summary">Structuring a page of content ready for laying it out using CSS is a very important skill to master, so in this assessment you'll be tested on your ability to think about how a page might end up looking, and choose appropriate structural semantics to build a layout on top of.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Vorbereitungen:</th>
+   <td>Before attempting this assessment you should have already worked through the rest of the course, with a particular emphasis on <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Ziel:</th>
+   <td>
+    <p>Das Testen des eigenen Wissens über Strukturen von Internetseiten und darüber, wie Layout Designs in Markup dargestellt werden.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Startpunkt">Startpunkt</h2>
+
+<p>Um diese Selbsteinschätzung zu starten, sollten Sie die <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/structuring-a-page-of-content-start/assets.zip?raw=true">ZIP-Datei mit allen Startinhalten</a> herunterladen. Die ZIP-Datei enthält:</p>
+
+<ul>
+ <li>Den HTML-Code, der mit Markup strukturiert werden soll</li>
+ <li>CSS, um Ihr Markup zu gestalten</li>
+ <li>Bilder, die auf der Seite verwendet werden.</li>
+</ul>
+
+<p>Erstellen Sie das Beispiel lokal auf Ihrem Computer oder nutzen Sie alternativ eine Seite wie<a class="external external-icon" href="http://jsbin.com/">JSBin</a> oder <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> , um den Test zu absolvieren.</p>
+
+<h2 id="Projekt_Kurzbeschreibung">Projekt: Kurzbeschreibung</h2>
+
+<p>Ihre Aufgabe in diesem Projekt ist es, den Inhalt einer Bird Watching-Homepage als Grundlage zu verwenden und ihm Struktur zu geben, sodass ein Page Layout darauf angewendet werden kann. Dazu werden benötigt:</p>
+
+<ul>
+ <li>A header spanning the full width of the site containing the main title for the page, the site logo, and the navigation menu. The title and logo appear side by side once styling is applied, and the navigation appears below those two items.</li>
+ <li>A main content area containing two columns — a main block to contain the welcome text, and a sidebar to contain image thumbnails.</li>
+ <li>Ein Footer, der Copyright-Informationen und Credits enthält.</li>
+</ul>
+
+<p>Sie müssen einen passenden Wrapper hinzufügen für:</p>
+
+<ul>
+ <li>Den Header</li>
+ <li>Das Navigationsmenü</li>
+ <li>Den Main Content</li>
+ <li>Den Begrüßungstext</li>
+ <li>Die Bilder-Sidebar</li>
+ <li>Den Footer</li>
+</ul>
+
+<p>Sie sollten außerdem:</p>
+
+<ul>
+ <li>das vorgegebene CSS auf die Seite anwenden, indem Sie ein anderes {{htmlelement("link")}}-Element direkt unter dem bereits existierenden Element am Anfang ergänzen.</li>
+</ul>
+
+<h2 id="Hinweise_und_Tipps">Hinweise und Tipps</h2>
+
+<ul>
+ <li>Use the <a href="https://validator.w3.org/nu/">W3C Nu HTML Checker</a> to catch unintended mistakes in your HTML, CSS, and SVG — mistakes you might have otherwise missed — so that you can fix them.</li>
+ <li>You don't need to know any CSS to do this assessment; you just need to put the provided CSS inside an HTML element.</li>
+ <li>The provided CSS is designed so that when the correct structural elements are added to the markup, they will appear green in the rendered page.</li>
+ <li>If you are getting stuck and can't envisage what elements to put where, it often helps to draw out a simple block diagram of the page layout, and write on the elements you think should wrap each block.</li>
+</ul>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Der nachfolgende Screenshot zeigt beispielhaft, wie die Homepage nach der Auszeichnung mittels HTML aussehen könnte.</p>
+
+<p><img alt='The finished example for the assessment; a simple webpage about birdwatching, including a heading of "Birdwatching", bird photos, and a welcome message' src="https://mdn.mozillademos.org/files/12449/example-page.png" style="display: block; margin: 0 auto;"></p>
+
+<h2 id="Einschätzung">Einschätzung</h2>
+
+<p>Falls Sie diesen Test im Rahmen eines organisierten Kurses absolvieren, sollten Sie Ihre Arbeit Ihrem/r Mentor*in/Lehrkraft zur Bewertung überreichen können. Falls Sie selbstständig lernen, können Sie die Bewertungskriterien sehr einfach erhalten, indem Sie im <a href="https://discourse.mozilla.org/t/structuring-a-page-of-content-assignment/24678">Disskussionsthread zu dieser Übung</a> nachfragen oder im <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC Channel auf <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Versuchen Sie es zunächst selbst -- mit Mogeleien ist nichts gewonnen!</p>
+
+<p>{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li>
+</ul>
diff --git a/files/de/learn/html/forms/index.html b/files/de/learn/html/forms/index.html
new file mode 100644
index 0000000000..b0d1e8eb58
--- /dev/null
+++ b/files/de/learn/html/forms/index.html
@@ -0,0 +1,90 @@
+---
+title: HTML forms
+slug: Learn/HTML/Forms
+tags:
+  - Anleitung
+  - Beginner
+  - Formular
+  - HTML
+  - Lernen
+  - Web
+translation_of: Learn/Forms
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Dieser Abschnitt bietet eine Reihe von Artikeln, die Dir helfen werden, HTML-Formulare zu meistern. HTML-Formulare sind sehr mächtige Werkzeuge, um mit Nutzern zu interagieren — am häufigsten werden sie benutzt, um Daten von Nutzern zu erheben oder um ihnen zu erlauben, eine Benutzerschnittstelle zu bedienen. Auch ist klar, dass wegen historischen und technischen Gründen es nicht immer offensichtlich ist, wie man diese volkommen effektiv nutzt. In dieser Anleitung werden wir alle Aspekte der HTML-Formulare abdecken, einschließlich das Auszeichnen ihrer HTML-Struktur, das Styling von Formelementen, das Validieren von Formulardaten und das Senden von Daten an den Server.</p>
+
+<h2 id="Voraussetzungen">Voraussetzungen</h2>
+
+<p>Vor dem Beginnen dieses Abschnitts, solltest du dich zumindest durch unsere <a href="https://developer.mozilla.org/de/docs/Learn/HTML/Einf%C3%BChrung_in_HTML">Einführung in HTML</a> durchgearbeitet haben. Zu diesem Zeitpunkt solltest die Grundleitfäden einfach zu verstehen finden und dazu fähig sein ,Gebrauch von unserer <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">Nativen-Formular-Komponenten-Anleitung</a> zu machen.</p>
+
+<p>Das Meistern von Formularen benötigt allerdings mehr als nur HTML-Kenntnisse — Du wirst auch einige spezielle Techniken zum Stylen von Formular-Komponenten lernen müssen. Daneben ist ein wenig Scripting-Wissen erforderliche, um Dinge wie Validierung und das erstellen eigener Formular-Komponenten zu erledigen. Daher würden wir empfehlen, dass du diese Seite zunächst verlässt, um ein wenig <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS">CSS</a> und <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript</a> zu erlernen und danndie anderen Abschnitte durchliest.</p>
+
+<p>Der obenstehende Text ist ein guter Indikator, warum wir Web-Formulare in ein eigenständiges Modul gepackt haben anstatt Teile davon in die HTML, CSS, und JavaScript Themengebiete zu legen — Formularelemente sind komplexer als die meisten anderen HTML-Elemente und benötigen dazu eine enge Verbindung von CSS- und JavaScript-Techniken, um das meiste aus ihnen herauszuholen.</p>
+
+<div class="note">
+<p><strong>Notiz</strong>: Wenn du auf einem Computer/Tablet/anderem Gerät arbeitest, wo du nicht die Möglichkeit hast, eigene Dateien zu erstellen, kannst du (die meisten) Code-Beispiele in einem Online-Coding-Programm, wie <a href="http://jsbin.com/">JSBin</a> oder <a href="https://glitch.com/">Glitch</a> nutzen.</p>
+</div>
+
+<h2 id="Grundlagen">Grundlagen</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form" style="">Dein erstes HTML-Formular</a></dt>
+</dl>
+
+<dl>
+ <dd>Der erste Artikel in unserer Reihe bietet Dir deine erste Erfarung, ein HTML-Formular zu erstellen, was das einfache Designen eines Formulars, Einbinden mit den richtigen HTML-Element, dezentes Styling mit CSS und Weitergabe der Daten zu einem Server mit einschließt.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">Wie man ein HTML-Formular strukturiert</a></dt>
+ <dd>Nach dem Abhandeln der Grundlagen, können wir jetzt mehr detalliert in die Elemente, die Struktur bieten, hereingucken und die Bedeutung verschiedener Teile des Formulars verstehen.</dd>
+</dl>
+
+<h2 id="Die_verschiedenen_Formular-Komponeneten">Die verschiedenen Formular-Komponeneten</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">Die nativen Formular-Komponenten</a></dt>
+ <dd>Wir gucken jetzt auf die Funktionalität der verschiedenen {{htmlelement("input")}} Formular-Komponenten im Detail - Welche Optionen verfügbar sind, um verschiedene Dateitypen zu sammeln.</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types">Die HTML5 Eingabetypen</a></dt>
+ <dd>Hier setzen wir unsere Vertiefung in das <code>&lt;input&gt;</code>-Element fort, schauen auf die verschiedenen zusätzlichen input-Typen, die mit der Veröffentlichung von HTML5 bereitgestellt wurden und die verschiedenen UI-Komponenten und die Verbesserung der Datenerhebung, welche sie ermöglichen. Zusätzlich schauen wir uns das {{htmlelement('output')}}-Element an.</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Other_form_controls">Andere Formular-Komponentent</a></dt>
+ <dd>Next we take a look at all the non-<code>&lt;input&gt;</code> form controls and associated tools, such as {{htmlelement('select')}}, {{htmlelement('textarea')}}, {{htmlelement('meter')}}, and {{htmlelement('progress')}}.</dd>
+</dl>
+
+<h2 id="Form_styling_guides">Form styling guides</h2>
+
+<dl>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Styling_web_forms">Stylen von Web-Formularen</a></dt>
+ <dd>Dieser Artikel stellt eine Einführung in das Stylen von Formularen mit CSS bereit. Er beinhaltet Grundlagen, die Du vielleicht für einfache Styling-Aufgaben benötigen wirst.</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Advanced_form_styling">Fortgeschrittenes Stylen von Formularen</a></dt>
+ <dd>Hier schauen wir uns einige fortgeschrittene Techniken zum Stylen von Formularen an, die benötigt werden, sobald einige der schwieriger zu stylende Formular-Elemente gehandhabt werden sollen.</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/UI_pseudo-classes">UI pseudo-Klassen</a></dt>
+ <dd>Eine Einführung in die UI pseudo-Klassen, die ermöglichen, dass HTML Formular-Komponenten auf Basis ihres aktuellen Status anvisiert werden können.</dd>
+</dl>
+
+<h2 id="Prüfen_und_Abschicken_von_Daten">Prüfen und Abschicken von Daten</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Clientseitige Formulardaten-Validation</a></dt>
+ <dd>Das Senden von Daten ist noch nicht genug - wir müssen auch prüfen, ob die Daten, die der Nutzer eingegeben hat, im korrektem Format sind, um sie erfolgreich verarbeiten zu können und diese unserer Anwendung nicht zerstören. Wir möchten dem Nutzer beim Ausfüllen der Daten helfen, und ihn nicht frustrieren, wenn er versucht unsere Anwendung zu nutzen. Formular-Validation hilft uns, diiese Ziele zu erreichen - Dieser Artikel erklärt Dir alles, was du wissen musst.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Das Senden von Daten</a></dt>
+ <dd>Dieser Artikel zeigt, was passiert, wenn ein Benutzer ein Formular abschickt — wohin gehen die Daten und wie werden diese genutzt, wenn diese dort angekommen sind? Wir gucken ebenfalls auf ein paar Sicherheitsbedenken, die mit dem Senden von Daten verbunden sind.</dd>
+</dl>
+
+<h2 id="Weiterführende_Anleitungen">Weiterführende Anleitungen</h2>
+
+<p>Die nachfolgenden Artikel sind nicht zwingend notwendig für den Lernpfad, aber sie erweisen sich als interessant und nützlich, wenn Du die obenstehenden Techniken gemeistert hast und mehr lernen möchtest.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">Wie man eigene Formular-Komponenten baut</a></dt>
+ <dd>Du wirst über ein paar Fälle stoßen, wo die nativen Formuar-Komponenten nicht das bieten, was Du brauchst, wie zum Beispiel aus Styling-Gründen oder Funktionalität. In diesen Fällen musst Du eventuell Deine eigenen Formular-Komponenten aus purem HTML bauen. Dieser Artikel erklärt, wie Du dies tun kannst und welchen Überlegungen Du Dir im Klaren sein musst - mit einem praktischen Fall-Beispiel.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Senden von Formularen mit JavaScript</a></dt>
+ <dd>Dieser Artikel betrachtet Möglichkeiten, wie ein Formular genutzt werden kann, um eine HTTP-Anfrage zu erstellen und diese mit JavaScript versandt werden kann statt dem üblichen Formularversand. Es schaut auch auf die Gründe, warum Du dies machen wolltest und die Folgen davon. (Siehe auch Using FormData objects.)</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML-Formulare in veralteten Browsern</a></dt>
+ <dd>Dieser Artikel beinhaltet das Erkennen von Features usw. Er sollte zum Artikel über das Testen von plattformunabhängigen Features umleiten, da der selbe Inhalt dort besser erklärt wird.</dd>
+</dl>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Element#Forms">HTML forms element reference</a></li>
+ <li><a href="/en-US/docs/Web/HTML/Element/input">HTML &lt;input&gt; types reference</a></li>
+</ul>
diff --git a/files/de/learn/html/index.html b/files/de/learn/html/index.html
new file mode 100644
index 0000000000..f3e5139c40
--- /dev/null
+++ b/files/de/learn/html/index.html
@@ -0,0 +1,75 @@
+---
+title: HTML
+slug: Learn/HTML
+tags:
+  - Anfänger
+  - Beginner
+  - CodingScripting
+  - HTML
+  - Lernen
+translation_of: Learn/HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">{{Glossary('HTML')}} ist die Basistechnologie oder Beschreibungssprache, in der Webseiten im WWW erstellt werden. HTML definiert die <em>Struktur</em> einer Webseite. Falls Sie Webseiten selbst erstellen möchten, sollten Sie sich mit HTML auskennen (oder anderenfalls einen automatischen HTML Generator benutzen). Über den HTML Code wird bestimmt, ob ein bestimmter <em>Inhalt</em> (der konkrete Text, z.B. "hallo www, dies ist meine erste Web Seite!") einer Webseite vom Brower etwa als Absatz, Link, Überschrift, Bild oder Formular erkannt werden soll.</p>
+
+<h2 id="Ihr_Lernweg">Ihr Lernweg</h2>
+
+<p>Auf dem Weg in die Webentwicklung sollten Sie als aller erstes HTML lernen, da dies die Grundlage aller Webseiten bildet.<br>
+ <br>
+ <a href="/de/Learn/HTML/Einf%C3%BChrung_in_HTML">Starten Sie hier unseren HTML-Kurs, indem Sie Einführung in HTML lesen.</a><br>
+ <br>
+ Wenn Sie HTML schon können, dann sollten sie nun eine der darauf aufbauenden Technologien lernen:</p>
+
+<ul>
+ <li><a href="/de/docs/Learn/CSS">CSS</a>, und wie man dieses nutzt, um HTML zu stilisieren ("stylen")<br>
+  Zum Beispiel können Sie die Textgröße und Schriftart ändern, Rahmen anzeigen lassen und Animationen hinzufügen.</li>
+ <li><a href="/de/docs/Learn/JavaScript">Javasscript</a>, und wie man dieses nutzt, um eine dynamische Webseite zu erstellen.<br>
+  Zum Beispiel könnten Sie damit die Position auf einer Karte finden, sie können Elemente auf der Webseite erscheinen oder verschwinden lassen, sie können Daten des Nutzers lokal speichern usw..</li>
+</ul>
+
+<p>Bevor Sie mit unserem HTML-Kurs anfangen, sollten Sie grundsätzlich mit Ihrem Computer umgehen können und das Internet schon passiv nutzen, d.h. im Internet surfen. Wenn Sie dies lesen, ist das Letzere ja wohl offensichtlich der Fall. Sie sollten schon eine Rechner-Arbeitsumgebung haben, wie in <a href="/de/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installieren nötiger Software</a> erklärt wird und wissen wie Sie Ihre Dateien ordnen, wie in <a href="/de/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dateien nutzen</a> erklärt wird. Diese beiden Artikel sind Teil unserer Artikelserie <a href="/de/docs/Learn/Getting_started_with_the_web">Das Internet für Einsteiger</a>.</p>
+
+<p>Es ist nicht besonders schwer, die Grundlagen zu erlernen. Allerdings handelt es sich bei HTML um eine umfassende Technologie mit vielen Features, es gibt dementsprechend nicht einen einzigen korrekten Weg die Sprache zu lernen. Es wird empfohlen, sich zuerst durch den Artikel <a href="https://developer.mozilla.org/de/Learn/Getting_started_with_the_web">Das Internet für Einsteiger</a> durchzuarbeiten - falls sie über dieses Wissen schon verfügen, dann brauchen Sie das natürlich nicht tun. Auch ist das meiste, was im HTML-Grundlagen Artikel abgedeckt wird, schon bereits in unser Modul <a href="/de/docs/Web/Guide/HTML/Introduction">Einführung in HTML</a> integriert.</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 id="Module">Module</h2>
+
+<p>In unserem HTML Lernbereich finden Sie die unten genannten Module. Die Module sind so in Reihenfolge angeordnet, daß Sie diese von oben nach unten durchgehen können, was wir sehr empfehlen. Sie sollten mit dem ersten Modul anfangen.</p>
+
+<dl>
+ <dt><a href="/de/Learn/HTML/Einf%C3%BChrung_in_HTML">Einführung in HTML</a></dt>
+ <dd>In diesem Modul üben Sie Grundlegende Fertigkeiten mit HTML ein. Sie könnten hier mit dem Studium starten: Hier könnte Ihre Reise in die Webentwicklung anfangen. Sie lernen, wie Sie das Grundgerüst einer Webseite schreiben, wie Sie Links erstellen und Ihre Webseite strukturieren.</dd>
+ <dd>Wem das alles viel zu langwierig und aufgebläht erscheint, dem wird auf  <strong>https://codepen.io</strong>  weitergeholfen, wo man sofort ohne Zeitverschwendung mit Beispielen loslegen und testen kann; einige Beispiele sind auch hier im MDN verlinkt und kommentiert. Die o.g. vorausgesetzte "Rechner-Arbeitsumgebung" ist hier gar nicht nötig: Codepen.io  liefert sie prompt &amp; frei auf Bildschirm.</dd>
+ <dt><a href="/de/docs/Learn/HTML/Multimedia_and_embedding">Multimediainhalte einbinden</a></dt>
+ <dd>In diesem Modul lernen Sie verschiedene Wege kennen, wie man Bilder, Videos oder gar andere Webseiten in eine eigene Webseite einbinden kann.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Tables">HTML Tabellen</a></dt>
+ <dd>Tabellen so auf Webseiten darzustellen, das sie für alle Menschen zugänglich sind, ist nicht so einfach. In diesem Modul lernen Sie, wie man mit HTML eine Tabelle erstellt und wie man komplexere Zusätze hinzufügt, wie eine Zusammenfassung.</dd>
+</dl>
+
+<h2 id="Häufige_Probleme_in_HTML_lösen">Häufige Probleme in HTML lösen</h2>
+
+<dl>
+ <dt><a href="/de/Learn/HTML/Howto">Häufige Probleme mit HTML lösen</a></dt>
+ <dd>Diese Serie von Artikeln existiert, um Ihnen zu helfen häufig auftretende Probleme bei der Erstellung einer Webseite zu lösen: Arbeiten mit Titeln, Hinzufügen von Bildern oder Videos, Hervorheben von Inhalten, Einbinden von Formularen, usw.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 id="Weiterführende_Artikel">Weiterführende Artikel</h2>
+
+<dl>
+ <dt><a href="/de/Learn/HTML/Write_a_simple_page_in_HTML">Eine einfache Seite in HTML schreiben</a></dt>
+ <dd>In diesem Artikel werden Sie lernen, wie Sie eine einfache Webseite erstellen.</dd>
+</dl>
+
+<hr>
+<p>Sollten Sie sich an HTML gewöhnt haben, finden Sie hier genauere Informationen zum Erkunden:</p>
+
+<dl>
+ <dt><a href="/de/docs/Web/HTML/Reference">HTML Referenz</a></dt>
+ <dd>In unserem großen Referenz Leitfaden finden Sie Details über jedes HTML-Element und Attribut.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/de/learn/html/multimedia_and_embedding/index.html b/files/de/learn/html/multimedia_and_embedding/index.html
new file mode 100644
index 0000000000..80ad15ca25
--- /dev/null
+++ b/files/de/learn/html/multimedia_and_embedding/index.html
@@ -0,0 +1,77 @@
+---
+title: Multimediainhalte einbinden - Übersicht
+slug: Learn/HTML/Multimedia_and_embedding
+tags:
+  - Assessment
+  - Audio
+  - Beginner
+  - CodingScripting
+  - Embedding
+  - Flash
+  - Guide
+  - HTML
+  - Images
+  - Landing
+  - Learn
+  - Multimedia
+  - NeedsTranslation
+  - SVG
+  - TopicStub
+  - Video
+  - Web
+  - iframes
+  - imagemaps
+  - img
+  - responsive
+translation_of: Learn/HTML/Multimedia_and_embedding
+---
+<p>{{LearnSidebar}}</p>
+
+<p class="summary">In diesem Kurs haben wir uns bisher viel zum Thema Text angesehen. Das Internet wäre allerdings ziemlich langweilig, wenn es nur aus reinem Text bestehen würde. Deshalb wollen wir uns nun ansehen, wie wir die Inhalte lebendiger und interessanter gestalten können.</p>
+
+<p class="summary">Dieses Modul zeigt, wie wir HTML einsetzen können, um Multimediainhalte in unsere Webseiten zu integrieren, egal ob es sich dabei um Bilder, Videos, Tonaufnahmen oder etwa ganze Webseiten handelt.</p>
+
+<h2 id="Vorwissen">Vorwissen</h2>
+
+<p>Bevor Sie dieses Modul beginnen, sollten Sie über zuverlässiges HTML-Grundlagenwissen verfügen, wie es zuvor in <a href="https://developer.mozilla.org/de/docs/Learn/HTML/Einf%C3%BChrung_in_HTML">Einführung in HTML</a> behandelt wurde. Falls Sie dieses Modul noch nicht bearbeitet haben (und auch nichts ähnliches), beginnen Sie am besten damit und kommen Sie später wieder!</p>
+
+<div class="note">
+<p><strong>Anmerkung</strong>:Wenn Sie an einem Computer/Tablet/Gerät arbeiten, auf welchem Sie nicht die Möglichkeit haben, eigene Dateien zu erstellen, können Sie die meisten Code-Beispiele in einem Online-Editor wie <a class="external external-icon" href="http://jsbin.com/" rel="noopener">JSBin</a> oder <a class="external external-icon" href="https://thimble.mozilla.org/" rel="noopener">Thimble </a>ausprobieren.</p>
+</div>
+
+<h2 id="Einführung">Einführung</h2>
+
+<p>Dieses Modul unterteilt sich in nachfolgende Abschnitte, um Ihnen die Grundlagen zur Einbettung von multimedialen Inhalten in Webseiten zu erläutern.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Bilder in HTML</a></dt>
+ <dd>Man kann an die verschiedensten Arten von Multimediainhalten denken, die man einbinden könnte, aber wir fangen hier mit dem einfachsten Typ an, nämlich mit einem  {{htmlelement("img")}}, mit welchem ein einfaches Bild in die Webseite eingefügt werden kann. In diesem Abschnitt sehen wir uns dies nun genauer an, beginnend bei den Mindestangaben, welche wir dann um eine Beschriftung ergänzen, welches durch den Einsatz eines {{htmlelement("figure")}} geschieht. Wie diese Angaben dann in Bezug zu Hintergrundgrafiken stehen, welche durch CSS Angaben definiert werden, werden wir uns anschliessend ansehen.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video- und Audioinhalte</a></dt>
+ <dd>Next, we'll look at how to use the HTML5 {{htmlelement("video")}} and {{htmlelement("audio")}} elements to embed video and audio on our pages, including basics, providing access to different file formats to different browsers, adding captions and subtitles, and how to add fallbacks for older browsers.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">Von &lt;object&gt; bis &lt;iframe&gt; — andere Einbindungstechniken</a></dt>
+ <dd>At this point we'd like to take somewhat of a sideways step, looking at a couple of elements that allow you to embed a wide variety of content types into your webpages: the {{htmlelement("iframe")}}, {{htmlelement("embed")}} and {{htmlelement("object")}} elements. <code>&lt;iframe&gt;</code>s are for embedding other web pages, and the other two allow you to embed PDFs, SVG, and even Flash — a technology on its way out, but which you may still see semi-regularly.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Vektorgrafiken einbinden</a></dt>
+ <dd>Vector graphics can be very useful in certain situations. Unlike regular formats like PNG/JPG, they don't distort/pixelate when zoomed in — they can remain smooth when scaled. This article introduces you to what vector graphics are and how to include the popular {{glossary("SVG")}} format in web pages.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive Bilder</a></dt>
+ <dd>With so many different device types now able to browse the web — from mobile phones to desktop computers — an essential concept to master in the modern web world is responsive design. This refers to the creation of webpages that can automatically change their features to suit different screen sizes, resolutions, etc. This will be looked at in much more detail in a CSS module later on, but for now, we'll look at the tools HTML has available to create responsive images, including the {{htmlelement("picture")}} element.</dd>
+</dl>
+
+<h2 id="Assessments">Assessments</h2>
+
+<p>The following assessments will test your understanding of the HTML basics covered in the guides above:</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></dt>
+ <dd>In this assessment, we'll test your knowledge of some of the techniques discussed in this module's articles, getting you to add some images and video to a funky splash page all about Mozilla!</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">Add a hitmap on top of an image</a></dt>
+ <dd>Image maps provide a mechanism to make different parts of an image link to different places. (Think of a map linking through to further information about each different country you click on.) This technique can sometimes be useful.</dd>
+ <dt><a href="https://teach.mozilla.org/activities/web-lit-basics-two/">Web literacy basics 2</a></dt>
+ <dd>
+ <p>An excellent Mozilla foundation course that explores and tests some of the skills talked about in this <em>Multimedia and embedding</em> module. Dive deeper into the basics of composing webpages, designing for accessibility, sharing resources, using online media, and working open (meaning that your content is freely available and shareable by others).E</p>
+ </dd>
+</dl>
diff --git a/files/de/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html b/files/de/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html
new file mode 100644
index 0000000000..5be24777e1
--- /dev/null
+++ b/files/de/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html
@@ -0,0 +1,126 @@
+---
+title: Mozilla splash page
+slug: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page
+tags:
+  - Anfänger
+  - Aufgabe
+  - Bilder
+  - CodingScripting
+  - Einbinden
+  - Grafiken
+  - HTML
+  - JPG
+  - PNG
+  - Video
+  - img
+  - responsiv
+  - src
+  - srcset
+  - youtube
+translation_of: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</div>
+
+<p class="summary">Mit dieser Aufgabe testen wir Ihr Wissen über einige der Techniken, die in den Artikeln dieses Moduls angesprochen wurden. Wir lassen Sie einige Bilder und ein Video zu einer funky Mozilla-Startseite hinzufügen!</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Vorwissen:</th>
+   <td>Bevor Sie sich dieser Aufgabe stellen, sollten Sie bereits den Rest des <a href="/de/docs/Learn/HTML/Multimedia_and_embedding">Multimediainhalte einbinden</a>-Moduls bearbeitet haben.</td>
+  </tr>
+  <tr>
+   <th scope="row">Ziel:</th>
+   <td>Testen des Wissens über das Einbinden von Bildern und Videos in Webseiten, Frames und HTML-Techniken von responsiven Grafiken.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Startpunkt">Startpunkt</h2>
+
+<p>Um diese Aufgabe zu beginnen, holen Sie sich die HTML und alle Bilder aus dem <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/">mdn-splash-page-start</a>--Directory auf Github. Legen Sie auf Ihrer Festplatte ein neues Verzeichnis an und speichern Sie darin die Inhalte von <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/index.html">index.html</a> in einer Datei mit dem Namen <code>index.html</code> auf Ihrer Festplatte. Speichern Sie im selben Verzeichnis <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/pattern.png">pattern.png</a> (mt einem Rechtsklick auf das Bild eröffnet Ihnen das Kontextmenü eine Option, das Bild zu speichern).</p>
+
+<p>Speichern Sie auf dieselbe Weise, aber zunächst in einem anderen Verzeichnis, auch die anderen Bilder aus dem <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/mdn-splash-page-start/originals">originals</a>-Verzeichnis; Sie werden einige der Bilder noch mit einem Bildbearbeitungsprogramm verändern müssen, bevor sie einsatzbereit sind.</p>
+
+<div class="note">
+<p><strong>Anmerkung</strong>: Das HTML-Beispiel beinhaltet ein recht umfangreiches CSS, um die Seite zu stylen. Sie brauchen das CSS nicht zu touchieren, sondern lediglich die HTML innerhalb des {{htmlelement("body")}}-Elementes — solange Sie die korrekten Auszeichnungen verwenden, wird das Styling ebenfalls korrekt aussehen.</p>
+</div>
+
+<h2 id="Projekt_Kurzbeschreibung">Projekt: Kurzbeschreibung</h2>
+
+<p>In dieser Aufgabe präsentieren wir Ihnen eine fast-fertige Mozilla Startseite, deren Ziel es ist, etwas nettes und interessantes darüber zu kommunizieren, wofür Mozila steht, sowie einige Links zu weiterführenden Quellen bereitzustellen. Leider sind bisher noch keine Bilder oder Videos eingepflegt worden — das ist schließlich Ihr Job! Sie müssen einige Medien hinzufügen, damit die Seite ansprechender aussieht und ihrem Ziel gerecht wird. Die nachfolgenden Abschnitte beschreiben Ihre Aufgabe detaillierter:</p>
+
+<h3 id="Bilder_vorbereiten">Bilder vorbereiten</h3>
+
+<p>Erzeugen Sie mit Ihrem bevorzugten Bildbearbeitungsprogramm 400px- und 120px-breite Versionen von:</p>
+
+<ul>
+ <li><code>firefox_logo-only_RGB.png</code></li>
+ <li><code>firefox-addons.jpg</code></li>
+ <li><code>mozilla-dinosaur-head.png</code></li>
+</ul>
+
+<p>Geben Sie ihnen sprechende Namen, z.B. <code>firefoxlogo400.png</code> und <code>firefoxlogo120.png</code>.</p>
+
+<p>Gemeinsam mit <code>mdn.svg</code> werden diese Bilder Ihre Icons sein, mit denen Sie auf weiterführende Quellen verlinken, innerhalb des <code>further-info</code>-Bereichs. Sie werden außerdem auf das Firefox-Logo im Seitenheader verlinken. Speichern Sie Kopien all dieser Bilder im selben Verzeichnis, in dem sich <code>index.html</code> befindet.</p>
+
+<p>Haben Sie dies abgeschlossen, erzeugen Sie eine 1200px-breite Landscape-Version von <code>red-panda.jpg</code> und eine 600px-breite Version, die den Panda in einem Close-Up-Shot zeigt. Geben Sie auch diesen Bildern sprechende Namen, damit Sie sie leicht wiederfinden. Speichern Sie eine Kopie davon im selben Verzeichnis, in dem sich <code>index.html</code> befindet.</p>
+
+<div class="note">
+<p><strong>Anmerkung</strong>: Sie sollten Ihre JPG- und PNG-Bilder am besten auf eine Weise komprimieren, auf die sie so klein wie möglich sind und dabei dennoch gut aussehen. <a href="https://tinypng.com/">tinypng.com</a> ist ein toller Service, um dies einfach zu erreichen.</p>
+</div>
+
+<h3 id="Dem_Header_ein_Logo_hinzufügen">Dem Header ein Logo hinzufügen</h3>
+
+<p>Innerhalb des {{htmlelement("header")}}-Elements fügen Sie ein {{htmlelement("img")}}-Element hinzu, das die kleine Version des Firefox-Logos in den Header einbindet.</p>
+
+<h3 id="Dem_Hauptteil_des_Artikels_ein_Video_hinzufügen">Dem Hauptteil des Artikels ein Video hinzufügen</h3>
+
+<p>Fügen Sie einfach das {{htmlelement("article")}}-Element hinzu (direkt under dem öffnenden Tag) und binden Sie das YouTube-Video unter dem Link <a href="https://www.youtube.com/watch?v=ojcNcvb1olg">https://www.youtube.com/watch?v=ojcNcvb1olg</a> ein, indem Sie geeignete YouTube-Tools verwenden, um den Code zu generieren. Das Video soll 400px breit sein.</p>
+
+<h3 id="Responsive_Grafiken_zu_den_further_info-Links">Responsive Grafiken zu den "further info"-Links</h3>
+
+<p>Innerhalb des {{htmlelement("div")}}-Elements mit der Klasse <code>further-info</code> finden Sie vier {{htmlelement("a")}}-Elemente — jedes davon verlinkt auf eine interessante Mozilla-zugehörige Seite. Um diesen Teil abzuschließen, müssen Sie innerhalb jeden dieser Elemente ein {{htmlelement("img")}}-Element hinzufügen, die geeignete {{htmlattrxref("src", "img")}}, {{htmlattrxref("alt", "img")}}-, {{htmlattrxref("srcset", "img")}}- und {{htmlattrxref("sizes", "img")}}-Attribute enthalten.</p>
+
+<p>In jedem Fall (außer einem — der von sich aus responsiv ist?) möchten wir, dass der Browser die 120px-breite Version anzeigt, wenn das Anzeigedisplay 480px breit oder kleiner ist, und die 400px-breite Version in allen anderen Fällen.</p>
+
+<p>Stellen Sie sicher, dass die richtigen Bilder mit den richtigen Links verbunden sind!</p>
+
+<div class="note">
+<p><strong>Anmerkung</strong>: Um die <code>srcset</code>/<code>sizes</code>-Beispiele zu testen, müssen Sie Ihre Seite auf einen Server uploaden (<a href="/en-US/docs/Learn/Common_questions/Using_Github_pages">Github pages</a> ist eine einfache und freie Lösung). Von dort aus können Sie testen, ob sie korrekt funktionieren, indem Sie Browser-Entwicklertools verwenden, wie in <a href="/de/Learn/HTML/Multimedia_and_embedding/Responsive_images#Useful_developer_tools">Responsive images: useful developer tools</a> beschrieben.</p>
+</div>
+
+<h3 id="Ein_art_directed_Roter_Panda">Ein art directed Roter Panda</h3>
+
+<p>Innerhalb des {{htmlelement("div")}}-Elementes mit der Klasse <code>red-panda</code> möchten wir ein {{htmlelement("picture")}}-Element einfügen, das das kleine Panda-Portrai zeigt, wenn das Anzeigedisplay 600px breit oder schmaler ist, und das große Landscape-Bild bei breiteren Anzeigedisplays.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Die nachfolgenden Screenshots zeigen, wie die Startseite nach der korrekten Auszeichnung aussehen sollte, auf einem breiten und einem schmalen Bildschirm.</p>
+
+<p><img alt="A wide shot of our example splash page" src="https://mdn.mozillademos.org/files/12946/wide-shot.png" style="border-style: solid; border-width: 1px; display: block; height: 620px; margin: 0px auto; width: 700px;"></p>
+
+<p><img alt="A narrow shot of our example splash page" src="https://mdn.mozillademos.org/files/12944/narrow-shot.png" style="border-style: solid; border-width: 1px; display: block; height: 1069px; margin: 0px auto; width: 320px;"></p>
+
+<h2 id="Einschätzung">Einschätzung</h2>
+
+<p>Falls Sie diesen Test im Rahmen eines organisierten Kurses absolvieren, sollten Sie Ihre Arbeit Ihrem/r Mentor*in/Lehrkraft zur Bewertung überreichen können. Falls Sie selbstständig lernen, können Sie die Bewertungskriterien sehr einfach erhalten, indem Sie im <a href="https://discourse.mozilla.org/t/mozilla-splash-page-assignment/24679">Diskussionsthread zu dieser Übung</a> nachfragen oder im <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC-Channel auf <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>.Versuchen Sie es zunächst selbst — mit Mogeleien ist nichts gewonnen!</p>
+
+<div class="blockIndicator note">
+<p><strong>Anmerkung</strong>: Falls Sie ihre Aufgabe mit den Developer-Tools des im Chrome-Browsers überprüfen, kann es sein, dass der Browser nicht die richtigen Bilder lädt, egal, wie klein Sie die Breite unter 'responsive view' auswählen. Es scheint sich hierbei um eine Eigenart von Chrome zu handeln. Der Firefox-Browser sollte das richtige Bild laden (sofern Ihre HTML korrekt ist).</p>
+</div>
+
+<p>{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</p>
+
+<h2 id="In_diesem_Modul">In diesem Modul</h2>
+
+<ul>
+ <li><a href="/de/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li>
+ <li><a href="/de/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></li>
+ <li><a href="/de/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From &lt;object&gt; to &lt;iframe&gt; — other embedding technologies</a></li>
+ <li><a href="/de/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the Web</a></li>
+ <li><a href="/de/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li>
+ <li><a href="/de/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li>
+</ul>
diff --git a/files/de/learn/html/tables/grund_tabelle_html/index.html b/files/de/learn/html/tables/grund_tabelle_html/index.html
new file mode 100644
index 0000000000..a10e286570
--- /dev/null
+++ b/files/de/learn/html/tables/grund_tabelle_html/index.html
@@ -0,0 +1,555 @@
+---
+title: Grundtabellen in HTML
+slug: Learn/HTML/Tables/Grund_tabelle_HTML
+translation_of: Learn/HTML/Tables/Basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div>
+
+<p class="summary">Wir beginnen hier mit Grundlagen von Tabellen durch HTML Markierungen. Die Topiken in diesem Artikel steigen Zellen, Zeilen, Spalten, Überschriften, Gliederung, Unterteilungen und auch Stile ein.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Vorwissen:</th>
+   <td>HTML Grundlagen (siehe <a href="/de/docs/Learn/HTML/Introduction_to_HTML">Einführung in HTML</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Ziel:</th>
+   <td>To gain basic familiarity with HTML tables.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="What_is_a_table">What is a table ?</h2>
+
+<p>A table is a structured set of data made up of rows and columns (<strong>tabular data</strong>). A table allows you to quickly and easily look up values that indicate some kind of connection between different types of data, for example a person and their age, or a day of the week, or the timetable for a local swimming pool.</p>
+
+<p><img alt="A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47." src="https://mdn.mozillademos.org/files/14583/numbers-table.png" style="display: block; height: 156px; margin: 0px auto; width: 350px;"></p>
+
+<p><img alt="A swimming timetable showing a sample data table" src="https://mdn.mozillademos.org/files/14587/swimming-timetable.png" style="display: block; height: 301px; margin: 0px auto; width: 794px;"></p>
+
+<p>Tables are very commonly used in human society, and have been for a long time, as evidenced by this US Census document from 1800:</p>
+
+<p><img alt="A very old parchment document; the data is not easily readable, but it clearly shows a data table being used." src="https://mdn.mozillademos.org/files/14585/1800-census.jpg" style="display: block; height: 505px; margin: 0px auto; width: 800px;"></p>
+
+<p>It is therefore no wonder that the creators of HTML provided a means by which to structure and present tabular data on the web.</p>
+
+<h3 id="How_does_a_table_work">How does a table work?</h3>
+
+<p>The point of a table is that it is rigid. Information is easily interpreted by making visual associations between row and column headers. Look at the table below for example and find a Jovian gas giant with 62 moons. You can find the answer by associating the relevant row and column headers.</p>
+
+<table>
+ <caption>Data about the planets of our solar system (Planetary facts taken from <a href="http://nssdc.gsfc.nasa.gov/planetary/factsheet/">Nasa's Planetary Fact Sheet - Metric</a>.</caption>
+ <thead>
+  <tr>
+   <td colspan="2"></td>
+   <th scope="col">Name</th>
+   <th scope="col">Mass (10<sup>24</sup>kg)</th>
+   <th scope="col">Diameter (km)</th>
+   <th scope="col">Density (kg/m<sup>3</sup>)</th>
+   <th scope="col">Gravity (m/s<sup>2</sup>)</th>
+   <th scope="col">Length of day (hours)</th>
+   <th scope="col">Distance from Sun (10<sup>6</sup>km)</th>
+   <th scope="col">Mean temperature (°C)</th>
+   <th scope="col">Number of moons</th>
+   <th scope="col">Notes</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="2" rowspan="4" scope="rowgroup">Terrestial planets</th>
+   <th scope="row">Mercury</th>
+   <td>0.330</td>
+   <td>4,879</td>
+   <td>5427</td>
+   <td>3.7</td>
+   <td>4222.6</td>
+   <td>57.9</td>
+   <td>167</td>
+   <td>0</td>
+   <td>Closest to the Sun</td>
+  </tr>
+  <tr>
+   <th scope="row">Venus</th>
+   <td>4.87</td>
+   <td>12,104</td>
+   <td>5243</td>
+   <td>8.9</td>
+   <td>2802.0</td>
+   <td>108.2</td>
+   <td>464</td>
+   <td>0</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">Earth</th>
+   <td>5.97</td>
+   <td>12,756</td>
+   <td>5514</td>
+   <td>9.8</td>
+   <td>24.0</td>
+   <td>149.6</td>
+   <td>15</td>
+   <td>1</td>
+   <td>Our world</td>
+  </tr>
+  <tr>
+   <th scope="row">Mars</th>
+   <td>0.642</td>
+   <td>6,792</td>
+   <td>3933</td>
+   <td>3.7</td>
+   <td>24.7</td>
+   <td>227.9</td>
+   <td>-65</td>
+   <td>2</td>
+   <td>The red planet</td>
+  </tr>
+  <tr>
+   <th rowspan="4" scope="rowgroup">Jovian planets</th>
+   <th rowspan="2" scope="rowgroup">Gas giants</th>
+   <th scope="row">Jupiter</th>
+   <td>1898</td>
+   <td>142,984</td>
+   <td>1326</td>
+   <td>23.1</td>
+   <td>9.9</td>
+   <td>778.6</td>
+   <td>-110</td>
+   <td>67</td>
+   <td>The largest planet</td>
+  </tr>
+  <tr>
+   <th scope="row">Saturn</th>
+   <td>568</td>
+   <td>120,536</td>
+   <td>687</td>
+   <td>9.0</td>
+   <td>10.7</td>
+   <td>1433.5</td>
+   <td>-140</td>
+   <td>62</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th rowspan="2" scope="rowgroup">Ice giants</th>
+   <th scope="row">Uranus</th>
+   <td>86.8</td>
+   <td>51,118</td>
+   <td>1271</td>
+   <td>8.7</td>
+   <td>17.2</td>
+   <td>2872.5</td>
+   <td>-195</td>
+   <td>27</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">Neptune</th>
+   <td>102</td>
+   <td>49,528</td>
+   <td>1638</td>
+   <td>11.0</td>
+   <td>16.1</td>
+   <td>4495.1</td>
+   <td>-200</td>
+   <td>14</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th colspan="2" scope="rowgroup">Dwarf planets</th>
+   <th scope="row">Pluto</th>
+   <td>0.0146</td>
+   <td>2,370</td>
+   <td>2095</td>
+   <td>0.7</td>
+   <td>153.3</td>
+   <td>5906.4</td>
+   <td>-225</td>
+   <td>5</td>
+   <td>Declassified as a planet in 2006, but this <a href="http://www.usatoday.com/story/tech/2014/10/02/pluto-planet-solar-system/16578959/">remains controversial</a>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>When done correctly, even blind people can interpret tabular data in an HTML table — a successful HTML table should enhance the experience of sighted and visually impaired users alike.</p>
+
+<h3 id="Table_styling">Table styling</h3>
+
+<p>You can also have a <a href="https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html">look at the live example</a> on GitHub! One thing you'll notice is that the table does look a bit more readable there — this is because the table you see above on this page has minimal styling, whereas the GitHub version has more significant CSS applied.</p>
+
+<p>Be under no illusion; for tables to be effective on the web, you need to provide some styling information with <a href="/en-US/docs/Learn/CSS">CSS</a>, as well as good solid structure with HTML. In this module we are focusing on the HTML part; to find out about the CSS part you should visit our <a href="/en-US/docs/Learn/CSS/Styling_boxes/Styling_tables">Styling tables</a> article after you've finished here.</p>
+
+<p>We won't focus on CSS in this module, but we have provided a minimal CSS stylesheet for you to use that will make your tables more readable than the default you get without any styling. You can find the <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">stylesheet here</a>, and you can also find an <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">HTML template</a> that applies the stylesheet — these together will give you a good starting point for experimenting with HTML tables.</p>
+
+<h3 id="When_should_you_NOT_use_HTML_tables">When should you NOT use HTML tables?</h3>
+
+<p>HTML tables should be used for tabular data — this is what they are designed for. Unfortunately, a lot of people used to use HTML tables to lay out web pages, e.g. one row to contain the header, one row to contain the content columns, one row to contain the footer, etc. You can find more details and an example at <a href="/en-US/docs/Learn/Accessibility/HTML#Page_layouts">Page Layouts</a> in our <a href="/en-US/docs/Learn/Accessibility">Accessibility Learning Module</a>. This was commonly used because CSS support across browsers used to be terrible; table layouts are much less common nowadays, but you might still see them in some corners of the web.</p>
+
+<p>In short, using tables for layout rather than <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout techniques</a> is a bad idea. The main reasons are as follows:</p>
+
+<ol>
+ <li><strong>Layout tables reduce accessibility for visually impaired users</strong>: <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">Screenreaders</a>, used by blind people, interpret the tags that exist in an HTML page and read out the contents to the user. Because tables are not the right tool for layout, and the markup is more complex than with CSS layout techniques, the screenreaders' output will be confusing to their users.</li>
+ <li><strong>Tables produce tag soup</strong>: As mentioned above, table layouts generally involve more complex markup structures than proper layout techniques. This can result in the code being harder to write, maintain, and debug.</li>
+ <li><strong>Tables are not automatically responsive</strong>: When you use proper layout containers (such as {{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}}, or {{htmlelement("div")}}), their width defaults to 100% of their parent element. Tables on the other hand are sized according to their content by default, so extra measures are needed to get table layout styling to effectively work across a variety of devices.</li>
+</ol>
+
+<h2 id="Active_learning_Creating_your_first_table">Active learning: Creating your first table</h2>
+
+<p>We've talked table theory enough, so, let's dive into a practical example and build up a simple table.</p>
+
+<ol>
+ <li>First of all, make a local copy of <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">blank-template.html</a> and <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> in a new directory on your local machine.</li>
+ <li>The content of every table is enclosed by these two tags : <strong><code><a href="/en-US/docs/Web/HTML/Element/table">&lt;table&gt;&lt;/table&gt;</a></code></strong>. Add these inside the body of your HTML.</li>
+ <li>The smallest container inside a table is a table cell, which is created by a <strong><code><a href="/en-US/docs/Web/HTML/Element/td">&lt;td&gt;</a></code></strong> element ('td' stands for 'table data'). Add the following inside your table tags:
+  <pre class="brush: html">&lt;td&gt;Hi, I'm your first cell.&lt;/td&gt;</pre>
+ </li>
+ <li>If we want a row of four cells, we need to copy these tags three times. Update the contents of your table to look like so:
+  <pre class="brush: html">&lt;td&gt;Hi, I'm your first cell.&lt;/td&gt;
+&lt;td&gt;I'm your second cell.&lt;/td&gt;
+&lt;td&gt;I'm your third cell.&lt;/td&gt;
+&lt;td&gt;I'm your fourth cell.&lt;/td&gt;</pre>
+ </li>
+</ol>
+
+<p>As you will see, the cells are not placed underneath each other, rather they are automatically aligned with each other on the same row. Each <code>&lt;td&gt;</code> element creates a single cell and together they make up the first row. Every cell we add makes the row grow longer.</p>
+
+<p>To stop this row from growing and start placing subsequent cells on a second row, we need to use the <strong><code><a href="/en-US/docs/Web/HTML/Element/tr">&lt;tr&gt;</a></code></strong> element ('tr' stands for 'table row'). Let's investigate this now.</p>
+
+<ol>
+ <li>Place the four cells you've already created inside <code>&lt;tr&gt;</code> tags, like so:
+
+  <pre class="brush: html">&lt;tr&gt;
+  &lt;td&gt;Hi, I'm your first cell.&lt;/td&gt;
+  &lt;td&gt;I'm your second cell.&lt;/td&gt;
+  &lt;td&gt;I'm your third cell.&lt;/td&gt;
+  &lt;td&gt;I'm your fourth cell.&lt;/td&gt;
+&lt;/tr&gt;</pre>
+ </li>
+ <li>Now you've made one row, have a go at making one or two more — each row needs to be wrapped in an additional <code>&lt;tr&gt;</code> element, with each cell contained in a <code>&lt;td&gt;</code>.</li>
+</ol>
+
+<p>This should result in a table that looks something like the following:</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td>Hi, I'm your first cell.</td>
+   <td>I'm your second cell.</td>
+   <td>I'm your third cell.</td>
+   <td>I'm your fourth cell.</td>
+  </tr>
+  <tr>
+   <td>Second row, first cell.</td>
+   <td>Cell 2.</td>
+   <td>Cell 3.</td>
+   <td>Cell 4.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note</strong>: You can also find this on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/simple-table.html">simple-table.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/basic/simple-table.html">see it live also</a>).</p>
+</div>
+
+<h2 id="Adding_headers_with_&lt;th>_elements">Adding headers with &lt;th&gt; elements</h2>
+
+<p>Now let's turn our attention to table headers — special cells that go at the start of a row or column and define the type of data that row or column contains (as an example, see the "Person" and "Age" cells in the first example shown in this article). To illustrate why they are useful, have a look at the following table example. First the source code:</p>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td&gt;&amp;nbsp;&lt;/td&gt;
+    &lt;td&gt;Knocky&lt;/td&gt;
+    &lt;td&gt;Flor&lt;/td&gt;
+    &lt;td&gt;Ella&lt;/td&gt;
+    &lt;td&gt;Juan&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Breed&lt;/td&gt;
+    &lt;td&gt;Jack Russell&lt;/td&gt;
+    &lt;td&gt;Poodle&lt;/td&gt;
+    &lt;td&gt;Streetdog&lt;/td&gt;
+    &lt;td&gt;Cocker Spaniel&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Age&lt;/td&gt;
+    &lt;td&gt;16&lt;/td&gt;
+    &lt;td&gt;9&lt;/td&gt;
+    &lt;td&gt;10&lt;/td&gt;
+    &lt;td&gt;5&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Owner&lt;/td&gt;
+    &lt;td&gt;Mother-in-law&lt;/td&gt;
+    &lt;td&gt;Me&lt;/td&gt;
+    &lt;td&gt;Me&lt;/td&gt;
+    &lt;td&gt;Sister-in-law&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Eating Habits&lt;/td&gt;
+    &lt;td&gt;Eats everyone's leftovers&lt;/td&gt;
+    &lt;td&gt;Nibbles at food&lt;/td&gt;
+    &lt;td&gt;Hearty eater&lt;/td&gt;
+    &lt;td&gt;Will eat till he explodes&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<p>Now the actual rendered table:</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td></td>
+   <td>Knocky</td>
+   <td>Flor</td>
+   <td>Ella</td>
+   <td>Juan</td>
+  </tr>
+  <tr>
+   <td>Breed</td>
+   <td>Jack Russell</td>
+   <td>Poodle</td>
+   <td>Streetdog</td>
+   <td>Cocker Spaniel</td>
+  </tr>
+  <tr>
+   <td>Age</td>
+   <td>16</td>
+   <td>9</td>
+   <td>10</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>Owner</td>
+   <td>Mother-in-law</td>
+   <td>Me</td>
+   <td>Me</td>
+   <td>Sister-in-law</td>
+  </tr>
+  <tr>
+   <td>Eating Habits</td>
+   <td>Eats everyone's leftovers</td>
+   <td>Nibbles at food</td>
+   <td>Hearty eater</td>
+   <td>Will eat till he explodes</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>The problem here is that, while you can kind of make out what's going on, it is not as easy to cross reference data as it could be. If the column and row headings stood out in some way, it would be much better.</p>
+
+<h3 id="Active_learning_table_headers">Active learning: table headers</h3>
+
+<p>Let's have a go at improving this table.</p>
+
+<ol>
+ <li>First, make a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table.html">dogs-table.html</a> and <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> files in a new directory on your local machine. The HTML contains the same Dogs example as you saw above.</li>
+ <li>To recognize the table headers as headers, both visually and semantically, you can use the <strong><code><a href="/en-US/docs/Web/HTML/Element/th">&lt;th&gt;</a></code></strong> element ('th' stands for 'table header'). This works in exactly the same way as a <code>&lt;td&gt;</code>, except that it denotes a header, not a normal cell. Go into your HTML, and change all the <code>&lt;td&gt;</code> elements surrounding the table headers into <code>&lt;th&gt;</code> elements.</li>
+ <li>Save your HTML and load it in a browser, and you should see that the headers now look like headers.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: You can find our finished example at <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table-fixed.html">dogs-table-fixed.html</a> on GitHub (<a href="http://mdn.github.io/learning-area/html/tables/basic/dogs-table-fixed.html">see it live also</a>).</p>
+</div>
+
+<h3 id="Why_are_headers_useful">Why are headers useful?</h3>
+
+<p>We have already partially answered this question — it is easier to find the data you are looking for when the headers clearly stand out, and the design just generally looks better.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Table headings come with some default styling — they are bold and centered even if you don't add your own styling to the table, to help them stand out.</p>
+</div>
+
+<p>Tables headers also have an added benefit — along with the <code>scope</code> attribute (which we'll learn about in the next article), they allow you to make tables more accessible by associating each header with all the data in the same row or column. Screenreaders are then able to read out a whole row or column of data at once, which is pretty useful.</p>
+
+<h2 id="Allowing_cells_to_span_multiple_rows_and_columns">Allowing cells to span multiple rows and columns</h2>
+
+<p>Sometimes we want cells to span multiple rows or columns. Take the following simple example, which shows the names of common animals. In some cases, we want to show the names of the males and females next to the animal name. Sometimes we don't, and in such cases we just want the animal name to span the whole table.</p>
+
+<p>The initial markup looks like this:</p>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Animals&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Hippopotamus&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Horse&lt;/th&gt;
+    &lt;td&gt;Mare&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Stallion&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Crocodile&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Chicken&lt;/th&gt;
+    &lt;td&gt;Hen&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Rooster&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<p>But the output doesn't give us quite what we want:</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Animals</th>
+  </tr>
+  <tr>
+   <th>Hippopotamus</th>
+  </tr>
+  <tr>
+   <th>Horse</th>
+   <td>Mare</td>
+  </tr>
+  <tr>
+   <td>Stallion</td>
+  </tr>
+  <tr>
+   <th>Crocodile</th>
+  </tr>
+  <tr>
+   <th>Chicken</th>
+   <td>Hen</td>
+  </tr>
+  <tr>
+   <td>Rooster</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>We need a way to get "Animals", "Hippopotamus", and "Crocodile" to span across two columns, and "Horse" and "Chicken" to span downwards over two rows. Fortunately, table headers and cells have the <code>colspan</code> and <code>rowspan</code> attributes, which allow us to do just those things. Both accept a unitless number value, which equals the number of rows or columns you want spanned. For example, <code>colspan="2"</code> makes a cell span two columns.</p>
+
+<p>Let's use <code>colspan</code> and <code>rowspan</code> to improve this table.</p>
+
+<ol>
+ <li>First, make a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table.html">animals-table.html</a> and <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> files in a new directory on your local machine. The HTML contains the same animals example as you saw above.</li>
+ <li>Next, use <code>colspan</code> to make "Animals", "Hippopotamus", and "Crocodile" span across two columns.</li>
+ <li>Finally, use <code>rowspan</code> to make "Horse" and "Chicken" span across two rows.</li>
+ <li>Save and open your code in a browser to see the improvement.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: You can find our finished example at <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table-fixed.html">animals-table-fixed.html</a> on GitHub (<a href="http://mdn.github.io/learning-area/html/tables/basic/animals-table-fixed.html">see it live also</a>).</p>
+</div>
+
+<table id="tabular" style="background-color: white;">
+</table>
+
+<h2 id="Providing_common_styling_to_columns">Providing common styling to columns</h2>
+
+<p>There is one last feature we'll tell you about in this article before we move on. HTML has a method of defining styling information for an entire column of data all in one place — the <strong><code><a href="/en-US/docs/Web/HTML/Element/col">&lt;col&gt;</a></code></strong> and <strong><code><a href="/en-US/docs/Web/HTML/Element/colgroup">&lt;colgroup&gt;</a></code></strong> elements. These exist because it can be a bit annoying and inefficient having to specify styling on columns — you generally have to specify your styling information on <em>every</em> <code>&lt;td&gt;</code> or <code>&lt;th&gt;</code> in the column, or use a complex selector such as {{cssxref(":nth-child()")}}.</p>
+
+<p>Take the following simple example:</p>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Data 1&lt;/th&gt;
+    &lt;th style="background-color: yellow"&gt;Data 2&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Calcutta&lt;/td&gt;
+    &lt;td style="background-color: yellow"&gt;Pizza&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Robots&lt;/td&gt;
+    &lt;td style="background-color: yellow"&gt;Jazz&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<p>Which gives us the following result:</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Data 1</th>
+   <th style="background-color: yellow;">Data 2</th>
+  </tr>
+  <tr>
+   <td>Calcutta</td>
+   <td style="background-color: yellow;">Orange</td>
+  </tr>
+  <tr>
+   <td>Robots</td>
+   <td style="background-color: yellow;">Jazz</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>This isn't ideal, as we have to repeat the styling information across all three cells in the column (we'd probably have a <code>class</code> set on all three in a real project and specify the styling in a separate stylesheet). Instead of doing this, we can specify the information once, on a <code>&lt;col&gt;</code> element. <code>&lt;col&gt;</code> elements are  specified inside a <code>&lt;colgroup&gt;</code> container just below the opening <code>&lt;table&gt;</code> tag. We could create the same effect as we see above by specifying our table as follows:</p>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;colgroup&gt;
+    &lt;col&gt;
+    &lt;col style="background-color: yellow"&gt;
+  &lt;/colgroup&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Data 1&lt;/th&gt;
+    &lt;th&gt;Data 2&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Calcutta&lt;/td&gt;
+    &lt;td&gt;Pizza&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Robots&lt;/td&gt;
+    &lt;td&gt;Jazz&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<p>Effectively we are defining two "style columns", one specifying styling information for each column. We are not styling the first column, but we still have to include a blank <code>&lt;col&gt;</code> element — if we didn't, the styling would just be applied to the first column also.</p>
+
+<p>If we wanted to apply the styling information to both columns, we could just include one <code>&lt;col&gt;</code> element with a span attribute on it, like this:</p>
+
+<pre class="brush: html">&lt;colgroup&gt;
+  &lt;col style="background-color: yellow" span="2"&gt;
+&lt;/colgroup&gt;</pre>
+
+<p>Just like <code>colspan</code> and <code>rowspan</code>, <code>span</code> takes a unitless number value that specifies the number of columns you want the styling to apply to.</p>
+
+<h3 id="Active_learning_colgroup_and_col">Active learning: colgroup and col</h3>
+
+<p>Now it's time to have a go yourself.</p>
+
+<p>Below you can see the timetable of a languages teacher. On Friday she has a new class teaching Dutch all day, but she also teaches German for a few periods on Tuesday and Thursdays. She wants to highlight the columns containing the days she is teaching.</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/tables/basic/timetable-fixed.html", '100%', 320)}}</p>
+
+<p>Recreate the table by following the steps below.</p>
+
+<ol>
+ <li>First, make a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable.html">timetable.html</a> file in a new directory on your local machine. The HTML contains the same table you saw above, minus the column styling information.</li>
+ <li>Add a <code>&lt;colgroup&gt;</code> element at the top of the table, just underneath the <code>&lt;table&gt;</code> tag, in which you can add your <code>&lt;col&gt;</code> elements (see the remaining steps below).</li>
+ <li>The first two columns need to be left unstyled.</li>
+ <li>Add a background color to the third column. The value for your <code>style</code> attribute is <code>background-color:#97DB9A;</code></li>
+ <li>Set a separate width on the fourth column. The value for your <code>style</code> attribute is <code>width: 42px;</code></li>
+ <li>Add a background color to the fifth column. The value for your <code>style</code> attribute is <code>background-color: #97DB9A;</code></li>
+ <li>Add a different background color plus a border to the sixth column, to signify that this is a special day and she's teaching a new class. The values for your <code>style</code> attribute are <code>background-color:#DCC48E; border:4px solid #C1437A;</code></li>
+ <li>The last two days are free days, so just set them to no background color but a set width; the value for the <code>style</code> attribute is <code>width: 42px;</code></li>
+</ol>
+
+<p>See how you get on with the example. If you get stuck, or want to check your work, you can find our version on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html">timetable-fixed.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/basic/timetable-fixed.html">see it live also</a>).</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>That just about wraps up the basics of HTML Tables. In the next article we will look at some slightly more advanced table features, and start to think how accessible they are for visually impaired people.</p>
+
+<div>{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div>
+
+<div>
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Tables/Basics">HTML table basics</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Tables/Advanced">HTML table advanced features and accessibility</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Tables/Structuring_planet_data">Structuring planet data</a></li>
+</ul>
+</div>
diff --git a/files/de/learn/html/tables/index.html b/files/de/learn/html/tables/index.html
new file mode 100644
index 0000000000..b9f1b0274f
--- /dev/null
+++ b/files/de/learn/html/tables/index.html
@@ -0,0 +1,45 @@
+---
+title: HTML-Tabellen
+slug: Learn/HTML/Tables
+tags:
+  - <td>
+  - <th>
+  - <tr>
+  - Anfänger
+  - Beginner
+  - Guide
+  - HTML
+  - Landing
+  - Modul
+  - Tabellen
+translation_of: Learn/HTML/Tables
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Das Strukturieren tabellarischer Daten ist eine sehr häufige Aufgabe in HTML. Es gibt nur für diesen Zweck eine ganze Reihe von Elementen und Attributen. In Verbindung mit etwas <a href="/de/docs/Learn/CSS">CSS</a> zur Stilisierung können mit HTML sehr einfach tabellarische Informationen dargestellt werden, wie beispielsweise Ihr Stundenplan für die Schule, die Öffnungszeiten der lokalen Schwimmhalle oder statistische Daten über Ihre Lieblings-Dinosaurier oder Ihren Lieblings-Fußballverein. Dieses Modul zeigt Ihnen alles Wissenswerte zur Strukturierung tabellarischer Daten mit HTML.</p>
+
+<h2 id="Voraussetzungen">Voraussetzungen</h2>
+
+<p>Bevor Sie dieses Modul beginnen sollten Sie sich mit den Grundlagen von HTML beschäftigt haben – lesen Sie dazu die <a href="/de/docs/Learn/HTML/Einführung_in_HTML">Einführung in HTML</a>.</p>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Wenn Sie auf einem Computer, Tablet oder anderem Gerät arbeiten, auf dem Sie nicht die Möglichkeit haben, eigene Dateien anzulegen, können Sie die (meisten) Codebeispiele auch in einem Online-Editor, wie <a href="http://jsbin.com/">JSBin</a> oder <a href="https://thimble.mozilla.org/">Thimble</a> ausprobieren.</p>
+</div>
+
+<h2 id="Lerneinheiten">Lerneinheiten</h2>
+
+<p>Dieses Modul enthält die folgenden Artikel:</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Tables/Basics">HTML table basics</a></dt>
+ <dd>Dieser Artikel gibt Ihnen eine Einführung in HTML-Tabellen. Er behandelt die Grundlagen der Zeilen und Spalten, Kopfzeilen, Zellen, die mehrere Spalten und Zeilen überspannen, sowie das Gruppieren aller Zellen einer Spalte zur Stiländerung.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Tables/Advanced">HTML table advanced features and accessibility</a></dt>
+ <dd>Der zweite Artikel dieses Moduls betrachtet fortgeschrittenere Funktionen der HTML-Tabellen, wie Bildunterschriften/Zusammenfassungen, das Gruppieren von Zeilen zum Tabellenkopf, -körper und -fuß; aber auch die Barrierefreiheit von Tabellen für sehbehinderte Nutzer.</dd>
+</dl>
+
+<h2 id="Aufgaben">Aufgaben</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Tables/Structuring_planet_data">Structuring planet data</a></dt>
+ <dd>In der Aufgabe zu Tabellen stellen wir Ihnen Daten zum Sonnensystem zur Verfügung, die Sie in einer HTML-Tabelle strukturieren sollen.</dd>
+</dl>
diff --git a/files/de/learn/index.html b/files/de/learn/index.html
new file mode 100644
index 0000000000..d6607b71e5
--- /dev/null
+++ b/files/de/learn/index.html
@@ -0,0 +1,108 @@
+---
+title: Lerne Webentwicklung
+slug: Learn
+tags:
+  - Anfänger
+  - Beginner
+  - Index
+  - Internet
+  - Landing
+  - Lernen
+  - Web
+translation_of: Learn
+---
+<div class="summary">
+<p><strong>Willkommen im MDN Lernbereich!</strong><br>
+ Mit dieser Artikelreihe können Sie es vom Anfänger zum Webentwickler schaffen. Alles was sie brauchen, um einfache Webseiten zu coden, finden Sie hier.</p>
+</div>
+
+<p>{{LearnSidebar}}</p>
+
+<p>Das Ziel dieser Artikelserie ist es, Sie von "Beginner" zum "Könner" Level zu bringen. Ein "Experte" werden Sie erst durch viel Übung an eigenen Projekten, wobei MDN immer eine wertvolle Ressource für Sie sein wird.</p>
+
+<p>Wenn Sie ein kompletter Anfänger sind, kann Webentwicklung eine schwere Herausforderung sein - wir werden behilflich "Ihre Hand halten" auf dem Weg zum echten Mozilla Webentwickler. Alle können sich hier daheim fühlen, egal ob sie Student sind, der Webentwicklung lernt (autodidaktisch oder innerhalb eines Kurses), ein Lehrer der nach Unterrichtsmaterial sucht, jemand der seinem Hobby nachgeht oder jemand der mehr über die Technologien, welche das Internet zusammenhalten, wissen möchte.</p>
+
+<div class="warning">
+<p><strong>Wichtig:</strong> Der Lernbereich wird ständig erweitert. Die Deutsche Übersetzung ist noch nicht vollständig, daran wird aber gearbeitet. Wenn Sie Fragen zu den Themen haben, dann {{anch("Kontaktieren Sie uns")}}.</p>
+</div>
+
+<h2 id="Was_gibts_neues">Was gibt's neues?</h2>
+
+<p>Der Lernbereich wird regelmäßig von uns erweitert. Damit ihr auf dem neusten Stand bleibt, werden alle Neuerungen <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Release_notes">hier</a> erfasst. Guckt also gerne später nochmal vorbei!</p>
+
+<p>Wenn ihr Fragen zu Themen habt, die hier nicht oder eurer Meinung nach nur unvollständig beschrieben sind, dann schreibt uns eine Nachricht im <a href="https://discourse.mozilla.org/c/mdn/236">Discourse forum</a>.</p>
+
+<h3 id="Ihr_wollt_ein_Front-end_Web_Entwickler_werden">Ihr wollt ein Front-end Web Entwickler werden?</h3>
+
+<p>Wir haben alle grundlegenden Informationen in einem weiteren Kurs zusammengefasst, damit du alles hast, um dein Ziel zu erreichen.</p>
+
+<h2 id="Wo_anfangen">Wo anfangen</h2>
+
+<p>Wir möchten mit Ihnen auf einen Nenner kommen. Welche Beschreibung trifft am ehesten auf Sie zu?</p>
+
+<ul class="card-grid">
+ <li><span>Ich bin Anfänger</span>
+
+  <p>Herzlich Willkommen! Am besten fangen Sie mit unserer Serie <a href="/de/Learn/Getting_started_with_the_web">"Lerne das Internet kennen" </a>an. Hier erfahren Sie alles über die Grundlagen, welche Sie zum Einstieg in die Webentwicklung brauchen.</p>
+ </li>
+ <li><span>Ich kenne das Web</span>
+  <p>Sehr gut! In dem Fall können Sie sich die wichtigsten Webtechnologien genauer anschauen: <a href="/de/docs/Learn/HTML">HTML</a>, <a href="/de/docs/Learn/CSS">CSS</a> und <a href="/de/docs/Learn/JavaScript">JavaScript</a>.</p>
+ </li>
+ <li><span>Ich habe das Web gemeistert.</span>
+  <p>Großartig! Dann sind Sie möglicherweise an unseren fortgeschrittenen <a href="/en-US/docs/Web/Guide">Guides</a> und <a href="/en-US/docs/Web/Tutorials">Tutorials</a> interessiert. Vielleicht möchten Sie auch selbst <a href="/en-US/Learn/How_to_contribute">zum MDN Lernbereich beitragen</a>   ;-)</p>
+ </li>
+</ul>
+
+<div class="note">
+<p><span id="result_box" lang="en"><span class="hps">Hinweis:</span> <span class="hps">Wir werden immer mehr Lernmaterial veröffentlichen</span><span class="hps">,</span> <span class="hps">beispielsweise</span> <span class="hps">für erfahrene</span> <span class="hps">Programmierer</span> <span class="hps">zu </span><span class="hps">spezifische</span>n <span class="hps">fortgeschrittenen Techniken</span><span>,</span> <span class="hps">native</span> <span class="hps">Entwickler, die</span> <span class="hps">neu auf dem</span> <span class="hps">Web</span> <span class="hps">sind, oder</span> <span class="hps">Menschen, die</span> <span class="hps">Design-Techniken</span> <span class="hps">lernen wollen</span><span>.</span></span></p>
+</div>
+
+<p>{{LearnBox({"title":"Schnell lernen: Vokabular"})}}</p>
+
+<h2 id="Unsere_Themen">Unsere Themen</h2>
+
+<p>Hier ist eine Liste mit unseren Artikelreihen.</p>
+
+<dl>
+ <dt><a href="/de/docs/Learn/Getting_started_with_the_web">Lerne das Internet kennen</a></dt>
+ <dd>Gibt eine grundlegende Einführung in Webentwicklung für Anfänger.</dd>
+ <dt><a href="/de/docs/Learn/HTML">HTML - Webseiten strukturieren</a></dt>
+ <dd>Hier wird Ihnen die jeder Webseite zugrunde liegende Sprache beigebracht. HTML ist dazu da Webseiten ein Grundgerüst und Struktur zu geben.</dd>
+ <dt><a href="/de/docs/Learn/CSS">CSS - Webseiten designen</a></dt>
+ <dd>CSS ist die Sprache, die wir benutzen, um einer Webseite einen bestimmten Stil zu geben. Farben, Schriftarten und die Position eines Elements auf der Webseite, das alles und mehr kann man mit CSS bestimmen. In diesem Bereich lernen sie grundlegendes CSS.</dd>
+ <dt><a href="/de/docs/Learn/JavaScript">JavaScript - dynamische, benutzerseitige Skriptsprache</a></dt>
+ <dd>JavaScript ist die Skriptsprache des Internets. Sie wird benutzt um einer Webseite dynamischen Inhalt hinzuzufügen. In dieser Artikelreihe lernen Sie die Grundlagen von JavaScript.</dd>
+ <dt><a href="/de/docs/Learn/Accessibility">Barrierefreiheit - Mache das Internet für jeden zugänglich</a></dt>
+ <dd>Barrierefreiheit - hier geht es darum das Internet für alle Zugänglich zu machen, ob für Menschen mit Behinderungen oder für einen mobilen Zugang oder andere Zugangsmöglichkeiten. Diese Artikel geben Ihnen einiges Wissen an die Hand, wie Sie die Zugänglichkeit Ihrer Webseite erhöhen können.</dd>
+ <dt><a href="/de/docs/Learn/Tools_and_testing">Werkzeuge und Tests</a></dt>
+ <dd>Hier werden verschiedene Werkzeuge für Webentwickler vorgestellt, zum Beispiel Werkzeuge, um eine Webseite in verschiedenen Browsern zu testen.</dd>
+ <dt><a href="/de/docs/Learn/Server-side">Serverseitige Webseitenprogrammierung</a></dt>
+ <dd>Selbst wenn Sie sich auf die benutzerseitige Webseitenentwicklung spezialisiert haben, ist es sinnvoll ein grundlegendes Verständinis für serverseitige Programmierung zu besitzen. Dieses Thema gibt Ihnen eine Einführung darin, wie serverseitige Programmiersprachen funktionieren. Es gibt detailierte Anleitungen für zwei populäre Frameworks, für Django (Python) und Express (node.js).</dd>
+</dl>
+
+<h2 id="Wie_kommen_Sie_an_unsere_Code-Beispiele">Wie kommen Sie an unsere  Code-Beispiele?</h2>
+
+<p>Die Code-Beispiele, welche sie in unserem Lernbereich finden sind alle über <a href="https://github.com/mdn/learning-area/">Github</a> zugänglich. Sie können diese auf Ihren eigenen Computer kopieren, um mit diesen zu üben.</p>
+
+<h2 id="Kontaktieren_Sie_uns">Kontaktieren Sie uns</h2>
+
+<p>Der gesamte Lernbereich wurde von unseren Freiwilligen erstellt. Wir brauchen Sie in unserem Team, egal ob Sie Anfänger, Lehrer oder ein erfahrener Webentwickler sind. Falls Sie Interesse haben am MDN-Projekt mitzuwirken, dann können Sie und über unsere <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">Mailing-Listen</a> oder den <a href="/en-US/docs/MDN/Community#Get_into_IRC">IRC Channel</a> erreichen. :)</p>
+
+<h2 id="Weiteres">Weiteres</h2>
+
+<dl>
+ <dt><a href="https://www.mozilla.org/en-US/newsletter/developer/">Mozilla Developer Newsletter</a></dt>
+ <dd>Unser Newsletter für Webentwickler. (in Englisch)</dd>
+</dl>
+
+<dl>
+ <dt><a href="https://www.codecademy.com/">Codecademy</a></dt>
+ <dd>Eine gute, interaktive Webseite, um Programmiersprachen und Webentwicklung zu lernen. (in Englisch)</dd>
+ <dt><a href="https://code.org/">Code.org</a></dt>
+ <dd>Für Schüler und Lehrer gedacht.(teilweise in Deutsch)</dd>
+ <dt><a href="https://www.freecodecamp.com/">freeCodeCamp.com</a></dt>
+ <dd>Interaktive Seite mit Tutorials und Projekten zum Thema coden. (auf Englisch)</dd>
+</dl>
+
+<p><strong><a href="https://edabit.com/challenges">Edabit</a></strong><br>
+      Tausende interaktive JavaScript-Herausforderungen.</p>
diff --git a/files/de/learn/javascript/bausteine/ereignisse/index.html b/files/de/learn/javascript/bausteine/ereignisse/index.html
new file mode 100644
index 0000000000..c07922c124
--- /dev/null
+++ b/files/de/learn/javascript/bausteine/ereignisse/index.html
@@ -0,0 +1,587 @@
+---
+title: Einleitung der Ereignissen
+slug: Learn/JavaScript/Bausteine/Ereignisse
+translation_of: Learn/JavaScript/Building_blocks/Events
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}</div>
+
+<p class="summary">Events oder auch Ereignisse sind Vorfälle die im System ausgelöst werden können. Auf diese Events wird vom System aufmerksam gemacht und es ust  möglich, in irgendeiner Art und Weise darauf zu reagieren.<br>
+ Ein Beispiel: Ein Benutzer klickt einen Knopf auf der Website, woraufhin eine Box mit Infromationen eingeblendet wird.<br>
+ In diesem Artikel besprechen wir einige wichtige Konzepte rund um  die Events und deren Funktionsweise im Browser. Wir werden hierbei nicht auf jedes Detail eingehen und nur das bis zum jetzigen Wissensstandpunkt nötigste abdecken.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Basic computer literacy, a basic understanding of HTML and CSS, <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To understand the fundamental theory of events, how they work in browsers, and how events may differ in different programming environments.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="A_series_of_fortunate_events">A series of fortunate events</h2>
+
+<p>As mentioned above, <strong>events</strong> are actions or occurrences that happen in the system you are programming — the system produces (or "fires") a signal of some kind when an event occurs, and also provides a mechanism by which some kind of action can be automatically taken (that is, some code running) when the event occurs. For example in an airport when the runway is clear for a plane to take off, a signal is communicated to the pilot, and as a result, they commence piloting the plane.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14077/MDN-mozilla-events-runway.png" style="display: block; margin: 0px auto;"></p>
+
+<p>In the case of the Web, events are fired inside the browser window, and tend to be attached to a specific item that resides in it — this might be a single element, set of elements, the HTML document loaded in the current tab, or the entire browser window. There are a lot of different types of events that can occur, for example:</p>
+
+<ul>
+ <li>The user clicking the mouse over a certain element or hovering the cursor over a certain element.</li>
+ <li>The user pressing a key on the keyboard.</li>
+ <li>The user resizing or closing the browser window.</li>
+ <li>A web page finishing loading.</li>
+ <li>A form being submitted.</li>
+ <li>A video being played, or paused, or finishing play.</li>
+ <li>An error occurring.</li>
+</ul>
+
+<p>You can gather from this (and from glancing at the MDN <a href="/en-US/docs/Web/Events">Event reference</a>) that there are <strong>a lot</strong> of events that can be responded to.</p>
+
+<p>Each available event has an <strong>event handler</strong>, which is a block of code (usually a JavaScript function that you as a programmer create) that will be run when the event fires. When such a block of code is defined to be run in response to an event firing, we say we are <strong>registering an event handler</strong>. Note that event handlers are sometimes called <strong>event listeners</strong> — they are pretty much interchangeable for our purposes, although strictly speaking, they work together. The listener listens out for the event happening, and the handler is the code that is run in response to it happening.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Web events are not part of the core JavaScript language — they are defined as part of the APIs built into the browser.</p>
+</div>
+
+<h3 id="A_simple_example">A simple example</h3>
+
+<p>Let's look at a simple example to explain what we mean here. You've already seen events and event handlers used in many of the examples in this course already, but let's recap just to cement our knowledge. In the following example, we have a single {{htmlelement("button")}}, which when pressed, makes the background change to a random color:</p>
+
+<pre class="brush: html">&lt;button&gt;Change color&lt;/button&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">button { margin: 10px };</pre>
+</div>
+
+<p>The JavaScript looks like so:</p>
+
+<pre class="brush: js">const btn = document.querySelector('button');
+
+function random(number) {
+  return Math.floor(Math.random() * (number+1));
+}
+
+btn.onclick = function() {
+  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}</pre>
+
+<p>In this code, we store a reference to the button inside a constant called <code>btn</code>, using the {{domxref("Document.querySelector()")}} function. We also define a function that returns a random number. The third part of the code is the event handler. The <code>btn</code> constant points to a <code><a href="/en-US/docs/Web/HTML/Element/button">&lt;button&gt;</a></code> element, and this type of object has a number of events that can fire on it, and therefore, event handlers available. We are listening for the <code><a href="/en-US/docs/Web/API/Element/click_event">click</a></code> event firing, by setting the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onclick">onclick</a></code> event handler property to equal an anonymous function containing code that generates a random RGB color and sets the <code><a href="/en-US/docs/Web/HTML/Element/body">&lt;body&gt;</a></code> <code><a href="/en-US/docs/Web/CSS/background-color">background-color</a></code> equal to it.</p>
+
+<p>This code is run whenever the click event fires on the <code>&lt;button&gt;</code> element, that is, whenever a user clicks on it.</p>
+
+<p>The example output is as follows:</p>
+
+<p>{{ EmbedLiveSample('A_simple_example', '100%', 200, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Its_not_just_web_pages">It's not just web pages</h3>
+
+<p>Another thing worth mentioning at this point is that events are not unique to JavaScript — most programming languages have some kind of event model, and the way the model works often differs from JavaScript's way. In fact, the event model in JavaScript for web pages differs from the event model for JavaScript as it is used in other environments.</p>
+
+<p>For example, <a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Node.js</a> is a very popular JavaScript runtime that enables developers to use JavaScript to build network and server-side applications. The <a href="https://nodejs.org/docs/latest-v12.x/api/events.html">Node.js event model</a> relies on listeners to listen for events and emitters to emit events periodically — it doesn't sound that different, but the code is quite different, making use of functions like <code>on()</code> to register an event listener, and <code>once()</code> to register an event listener that unregisters after it has run once. The <a href="https://nodejs.org/docs/latest-v12.x/api/http.html#http_event_connect">HTTP connect event docs</a> provide a good example of use.</p>
+
+<p>As another example, you can also use JavaScript to build cross-browser add-ons — browser functionality enhancements — using a technology called <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>. The event model is similar to the web events model, but a bit different — event listeners properties are camel-cased (such as <code>onMessage</code> rather than <code>onmessage</code>), and need to be combined with the <code>addListener</code> function. See the <a href="/en-US/Add-ons/WebExtensions/API/runtime/onMessage#Examples"><code>runtime.onMessage</code> page</a> for an example.</p>
+
+<p>You don't need to understand anything about other such environments at this stage in your learning; we just wanted to make it clear that events can differ in different programming environments.</p>
+
+<h2 id="Ways_of_using_web_events">Ways of using web events</h2>
+
+<p>There are a number of ways in which you can add event listener code to web pages so that it will be run when the associated event fires. In this section, we review the various mechanisms and discuss which ones you should use.</p>
+
+<h3 id="Event_handler_properties">Event handler properties</h3>
+
+<p>These are the properties that exist to contain event handler code that we have seen most frequently during the course. Returning to the above example:</p>
+
+<pre class="brush: js">const btn = document.querySelector('button');
+
+btn.onclick = function() {
+  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}</pre>
+
+<p>The <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onclick">onclick</a></code> property is the event handler property being used in this situation. It is essentially a property like any other available on the button (e.g. <code><a href="/en-US/docs/Web/API/Node/textContent">btn.textContent</a></code>, or <code><a href="/en-US/docs/Web/API/HTMLElement/style">btn.style</a></code>), but it is a special type — when you set it to be equal to some code, that code is run when the event fires on the button.</p>
+
+<p>You could also set the handler property to be equal to a named function name (like we saw in <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a>). The following would work just the same:</p>
+
+<pre class="brush: js">const btn = document.querySelector('button');
+
+function bgChange() {
+  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+
+btn.onclick = bgChange;</pre>
+
+<p>There are many different event handler properties available. Let's do an experiment.</p>
+
+<p>First of all, make a local copy of <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerproperty.html">random-color-eventhandlerproperty.html</a>, and open it in your browser. It's just a copy of the simple random color example we've been playing with already in this article. Now try changing <code>btn.onclick</code> to the following different values in turn, and observing the results in the example:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onfocus">btn.onfocus</a></code> and <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onblur">btn.onblur</a></code> — The color changes when the button is focused and unfocused; try pressing tab to focus on the button and press tab again to focus away from the button. These are often used to display information about how to fill in form fields when they are focused, or display an error message if a form field has just been filled in with an incorrect value.</li>
+ <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/ondblclick">btn.ondblclick</a></code> — The color changes only when the button is double-clicked.</li>
+ <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeypress">window.onkeypress</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">window.onkeydown</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">window.onkeyup</a></code> — The color changes when a key is pressed on the keyboard. The <code>keypress</code> event refers to a general press (button down and then up), while <code>keydown</code> and <code>keyup</code> refer to just the key down and key up parts of the keystroke, respectively. Note that it doesn't work if you try to register this event handler on the button itself — we've had to register it on the <a href="/en-US/docs/Web/API/Window">window</a> object, which represents the entire browser window.</li>
+ <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onmouseover">btn.onmouseover</a></code> and <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onmouseout">btn.onmouseout</a></code> — The color changes when the mouse pointer is moved so it begins hovering over the button, or when pointer stops hovering over the button and moves off of it, respectively.</li>
+</ul>
+
+<p>Some events are very general and available nearly anywhere (for example an <code>onclick</code> handler can be registered on nearly any element), whereas some are more specific and only useful in certain situations (for example it makes sense to use <a href="/en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onplay">onplay</a> only on specific elements, such as {{htmlelement("video")}}).</p>
+
+<h3 id="Inline_event_handlers_—_dont_use_these">Inline event handlers — don't use these</h3>
+
+<p>You might also see a pattern like this in your code:</p>
+
+<pre class="brush: html">&lt;button onclick="bgChange()"&gt;Press me&lt;/button&gt;
+</pre>
+
+<pre class="brush: js">function bgChange() {
+  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: You can find the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerattributes.html">full source code</a> for this example on GitHub (also <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventhandlerattributes.html">see it running live</a>).</p>
+</div>
+
+<p>The earliest method of registering event handlers found on the Web involved <strong>event handler HTML attributes</strong> (or <strong>inline event handlers</strong>) like the one shown above — the attribute value is literally the JavaScript code you want to run when the event occurs. The above example invokes a function defined inside a {{htmlelement("script")}} element on the same page, but you could also insert JavaScript directly inside the attribute, for example:</p>
+
+<pre class="brush: html">&lt;button onclick="alert('Hello, this is my old-fashioned event handler!');"&gt;Press me&lt;/button&gt;</pre>
+
+<p>You can find HTML attribute equivalents for many of the event handler properties; however, you shouldn't use these — they are considered bad practice. It might seem easy to use an event handler attribute if you are just doing something really quick, but they very quickly become unmanageable and inefficient.</p>
+
+<p>For a start, it is not a good idea to mix up your HTML and your JavaScript, as it becomes hard to parse — keeping your JavaScript all in one place is better; if it is in a separate file you can apply it to multiple HTML documents.</p>
+
+<p>Even in a single file, inline event handlers are not a good idea. One button is OK, but what if you had 100 buttons? You'd have to add 100 attributes to the file; it would very quickly turn into a maintenance nightmare. With JavaScript, you could easily add an event handler function to all the buttons on the page no matter how many there were, using something like this:</p>
+
+<pre class="brush: js">const buttons = document.querySelectorAll('button');
+
+for (let i = 0; i &lt; buttons.length; i++) {
+  buttons[i].onclick = bgChange;
+}</pre>
+
+<p class="brush: js">Note that another option here would be to use the <code><a href="/en-US/docs/Web/API/NodeList/forEach">forEach()</a></code> built-in method available on <code><a href="/en-US/docs/Web/API/NodeList">NodeList</a></code> objects:</p>
+
+<pre class="brush: js">buttons.forEach(function(button) {
+  button.onclick = bgChange;
+});</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Separating your programming logic from your content also makes your site more friendly to search engines.</p>
+</div>
+
+<h3 id="addEventListener_and_removeEventListener">addEventListener() and removeEventListener()</h3>
+
+<p>The newest type of event mechanism is defined in the <a href="https://www.w3.org/TR/DOM-Level-2-Events/">Document Object Model (DOM) Level 2 Events</a> Specification, which provides browsers with a new function — <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>. This functions in a similar way to the event handler properties, but the syntax is obviously different. We could rewrite our random color example to look like this:</p>
+
+<pre class="brush: js">const btn = document.querySelector('button');
+
+function bgChange() {
+  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+
+btn.addEventListener('click', bgChange);</pre>
+
+<div class="note">
+<p><strong>Note</strong>: You can find the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-addeventlistener.html">full source code</a> for this example on GitHub (also <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-addeventlistener.html">see it running live</a>).</p>
+</div>
+
+<p>Inside the <code>addEventListener()</code> function, we specify two parameters — the name of the event we want to register this handler for, and the code that comprises the handler function we want to run in response to it. Note that it is perfectly appropriate to put all the code inside the <code>addEventListener()</code> function, in an anonymous function, like this:</p>
+
+<pre class="brush: js">btn.addEventListener('click', function() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+});</pre>
+
+<p>This mechanism has some advantages over the older mechanisms discussed earlier. For a start, there is a counterpart function, <code><a href="/en-US/docs/Web/API/EventTarget/removeEventListener">removeEventListener()</a></code>, which removes a previously added listener. For example, this would remove the listener set in the first code block in this section:</p>
+
+<pre class="brush: js">btn.removeEventListener('click', bgChange);</pre>
+
+<p>This isn't significant for simple, small programs, but for larger, more complex programs it can improve efficiency to clean up old unused event handlers. Plus, for example, this allows you to have the same button performing different actions in different circumstances — all you have to do is add or remove event handlers as appropriate.</p>
+
+<p>Second, you can also register multiple handlers for the same listener. The following two handlers wouldn't both be applied:</p>
+
+<pre class="brush: js">myElement.onclick = functionA;
+myElement.onclick = functionB;</pre>
+
+<p>The second line overwrites the value of <code>onclick</code> set by the first line. This would work, however:</p>
+
+<pre class="brush: js">myElement.addEventListener('click', functionA);
+myElement.addEventListener('click', functionB);</pre>
+
+<p>Both functions would now run when the element is clicked.</p>
+
+<p>In addition, there are a number of other powerful features and options available with this event mechanism. These are a little out of scope for this article, but if you want to read up on them, have a look at the <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> and <code><a href="/en-US/docs/Web/API/EventTarget/removeEventListener">removeEventListener()</a></code> reference pages.</p>
+
+<h3 id="What_mechanism_should_I_use">What mechanism should I use?</h3>
+
+<p>Of the three mechanisms, you definitely shouldn't use the HTML event handler attributes — these are outdated, and bad practice, as mentioned above.</p>
+
+<p>The other two are relatively interchangeable, at least for simple uses:</p>
+
+<ul>
+ <li>Event handler properties have less power and options, but better cross-browser compatibility (being supported as far back as Internet Explorer 8). You should probably start with these as you are learning.</li>
+ <li>DOM Level 2 Events (<code>addEventListener()</code>, etc.) are more powerful, but can also become more complex and are less well supported (supported as far back as Internet Explorer 9). You should also experiment with these, and aim to use them where possible.</li>
+</ul>
+
+<p>The main advantages of the third mechanism are that you can remove event handler code if needed, using <code>removeEventListener()</code>, and you can add multiple listeners of the same type to elements if required. For example, you can call <code>addEventListener('click', function() { ... })</code> on an element multiple times, with different functions specified in the second argument. This is impossible with event handler properties because any subsequent attempts to set a property will overwrite earlier ones, e.g.:</p>
+
+<pre class="brush: js">element.onclick = function1;
+element.onclick = function2;
+etc.</pre>
+
+<div class="note">
+<p><strong>Note</strong>: If you are called upon to support browsers older than Internet Explorer 8 in your work, you may run into difficulties, as such ancient browsers use different event models from newer browsers. But never fear, most JavaScript libraries (for example <code>jQuery</code>) have built-in functions that abstract away cross-browser differences. Don't worry about this too much at this stage in your learning journey.</p>
+</div>
+
+<h2 id="Other_event_concepts">Other event concepts</h2>
+
+<p>In this section, we briefly cover some advanced concepts that are relevant to events. It is not important to understand these concepts fully at this point, but they might serve to explain some code patterns you'll likely come across from time to time.</p>
+
+<h3 id="Event_objects">Event objects</h3>
+
+<p>Sometimes inside an event handler function, you might see a parameter specified with a name such as <code>event</code>, <code>evt</code>, or simply <code>e</code>. This is called the <strong>event object</strong>, and it is automatically passed to event handlers to provide extra features and information. For example, let's rewrite our random color example again slightly:</p>
+
+<pre class="brush: js">function bgChange(e) {
+  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  e.target.style.backgroundColor = rndCol;
+  console.log(e);
+}
+
+btn.addEventListener('click', bgChange);</pre>
+
+<div class="note">
+<p><strong>Note</strong>: You can find the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventobject.html">full source code</a> for this example on GitHub (also <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html">see it running live</a>).</p>
+</div>
+
+<p>Here you can see that we are including an event object, <strong>e</strong>, in the function, and in the function setting a background color style on <code>e.target</code> — which is the button itself. The <code>target</code> property of the event object is always a reference to the element that the event has just occurred upon. So in this example, we are setting a random background color on the button, not the page.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can use any name you like for the event object — you just need to choose a name that you can then use to reference it inside the event handler function. <code>e</code>/<code>evt</code>/<code>event</code> are most commonly used by developers because they are short and easy to remember. It's always good to be consistent — with yourself, and with others if possible.</p>
+</div>
+
+<p><code>e.target</code> is incredibly useful when you want to set the same event handler on multiple elements and do something to all of them when an event occurs on them. You might, for example, have a set of 16 tiles that disappear when they are clicked on. It is useful to always be able to just set the thing to disappear as <code>e.target</code>, rather than having to select it in some more difficult way. In the following example (see <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/useful-eventtarget.html">useful-eventtarget.html</a> for the full source code; also see it <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html">running live</a> here), we create 16 {{htmlelement("div")}} elements using JavaScript. We then select all of them using {{domxref("document.querySelectorAll()")}}, then loop through each one, adding an <code>onclick</code> handler to each that makes it so that a random color is applied to each one when clicked:</p>
+
+<pre class="brush: js">const divs = document.querySelectorAll('div');
+
+for (let i = 0; i &lt; divs.length; i++) {
+  divs[i].onclick = function(e) {
+    e.target.style.backgroundColor = bgChange();
+  }
+}</pre>
+
+<p>The output is as follows (try clicking around on it — have fun):</p>
+
+<div class="hidden">
+<h6 id="Hidden_example">Hidden example</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Useful event target example&lt;/title&gt;
+    &lt;style&gt;
+      div {
+        height: 100px;
+        width: 25%;
+        float: left;
+      }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;script&gt;
+      for (let i = 1; i &lt;= 16; i++) {
+        const myDiv = document.createElement('div');
+        myDiv.style.backgroundColor = "red";
+        document.body.appendChild(myDiv);
+      }
+
+      function random(number) {
+        return Math.floor(Math.random()*number);
+      }
+
+      function bgChange() {
+        var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+        return rndCol;
+      }
+
+      const divs = document.querySelectorAll('div');
+
+      for (let i = 0; i &lt; divs.length; i++) {
+        divs[i].onclick = function(e) {
+          e.target.style.backgroundColor = bgChange();
+        }
+      }
+    &lt;/script&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_example', '100%', 400, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>Most event handlers you'll encounter just have a standard set of properties and functions (methods) available on the event object; see the {{domxref("Event")}} object reference for a full list. Some more advanced handlers, however, add specialist properties containing extra data that they need to function. The <a href="/en-US/docs/Web/API/MediaRecorder_API">Media Recorder API</a>, for example, has a <code>dataavailable</code> event, which fires when some audio or video has been recorded and is available for doing something with (for example saving it, or playing it back). The corresponding <a href="/en-US/docs/Web/API/MediaRecorder/ondataavailable">ondataavailable</a> handler's event object has a <code>data</code> property available containing the recorded audio or video data to allow you to access it and do something with it.</p>
+
+<h3 id="Preventing_default_behavior">Preventing default behavior</h3>
+
+<p>Sometimes, you'll come across a situation where you want to prevent an event from doing what it does by default. The most common example is that of a web form, for example, a custom registration form. When you fill in the details and press the submit button, the natural behavior is for the data to be submitted to a specified page on the server for processing, and the browser to be redirected to a "success message" page of some kind (or the same page, if another is not specified.)</p>
+
+<p>The trouble comes when the user has not submitted the data correctly — as a developer, you want to prevent the submission to the server and give an error message saying what's wrong and what needs to be done to put things right. Some browsers support automatic form data validation features, but since many don't, you are advised to not rely on those and implement your own validation checks. Let's look at a simple example.</p>
+
+<p>First, a simple HTML form that requires you to enter your first and last name:</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="fname"&gt;First name: &lt;/label&gt;
+    &lt;input id="fname" type="text"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="lname"&gt;Last name: &lt;/label&gt;
+    &lt;input id="lname" type="text"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+     &lt;input id="submit" type="submit"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;
+&lt;p&gt;&lt;/p&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">div {
+  margin-bottom: 10px;
+}
+</pre>
+</div>
+
+<p>Now some JavaScript — here we implement a very simple check inside an <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onsubmit">onsubmit</a></code> event handler (the submit event is fired on a form when it is submitted) that tests whether the text fields are empty. If they are, we call the <code><a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a></code> function on the event object — which stops the form submission — and then display an error message in the paragraph below our form to tell the user what's wrong:</p>
+
+<pre class="brush: js">const form = document.querySelector('form');
+const fname = document.getElementById('fname');
+const lname = document.getElementById('lname');
+const para = document.querySelector('p');
+
+form.onsubmit = function(e) {
+  if (fname.value === '' || lname.value === '') {
+    e.preventDefault();
+    para.textContent = 'You need to fill in both names!';
+  }
+}</pre>
+
+<p>Obviously, this is pretty weak form validation — it wouldn't stop the user validating the form with spaces or numbers entered into the fields, for example — but it is OK for example purposes. The output is as follows:</p>
+
+<p>{{ EmbedLiveSample('Preventing_default_behavior', '100%', 140, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<div class="note">
+<p><strong>Note</strong>: for the full source code, see <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/preventdefault-validation.html">preventdefault-validation.html</a> (also see it <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/preventdefault-validation.html">running live</a> here.)</p>
+</div>
+
+<h3 id="Event_bubbling_and_capture">Event bubbling and capture</h3>
+
+<p>The final subject to cover here is something that you won't come across often, but it can be a real pain if you don't understand it. Event bubbling and capture are two mechanisms that describe what happens when two handlers of the same event type are activated on one element. Let's look at an example to make this easier — open up the <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box.html">show-video-box.html</a> example in a new tab (and the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">source code</a> in another tab.) It is also available live below:</p>
+
+<div class="hidden">
+<h6 id="Hidden_video_example">Hidden video example</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Show video box example&lt;/title&gt;
+    &lt;style&gt;
+      div {
+        position: absolute;
+        top: 50%;
+        transform: translate(-50%,-50%);
+        width: 480px;
+        height: 380px;
+        border-radius: 10px;
+        background-color: #eee;
+        background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.1));
+      }
+
+      .hidden {
+        left: -50%;
+      }
+
+      .showing {
+        left: 50%;
+      }
+
+      div video {
+        display: block;
+        width: 400px;
+        margin: 40px auto;
+      }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;button&gt;Display video&lt;/button&gt;
+
+    &lt;div class="hidden"&gt;
+      &lt;video&gt;
+        &lt;source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.mp4" type="video/mp4"&gt;
+        &lt;source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.webm" type="video/webm"&gt;
+        &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="rabbit320.mp4"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
+      &lt;/video&gt;
+    &lt;/div&gt;
+
+    &lt;script&gt;
+
+      const btn = document.querySelector('button');
+      const videoBox = document.querySelector('div');
+      const video = document.querySelector('video');
+
+      btn.onclick = function() {
+        displayVideo();
+      }
+
+      function displayVideo() {
+        if(videoBox.getAttribute('class') === 'hidden') {
+          videoBox.setAttribute('class','showing');
+        }
+      }
+
+      videoBox.addEventListener('click',function() {
+        videoBox.setAttribute('class','hidden');
+      });
+
+      video.addEventListener('click',function() {
+        video.play();
+      });
+
+    &lt;/script&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_video_example', '100%', 500, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>This is a pretty simple example that shows and hides a {{htmlelement("div")}} with a {{htmlelement("video")}} element inside it:</p>
+
+<pre class="brush: html">&lt;button&gt;Display video&lt;/button&gt;
+
+&lt;div class="hidden"&gt;
+  &lt;video&gt;
+    &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
+    &lt;source src="rabbit320.webm" type="video/webm"&gt;
+    &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="rabbit320.mp4"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
+  &lt;/video&gt;
+&lt;/div&gt;</pre>
+
+<p>When the {{htmlelement("button")}} is clicked, the video is displayed, by changing the class attribute on the <code>&lt;div&gt;</code> from <code>hidden</code> to <code>showing</code> (the example's CSS contains these two classes, which position the box off the screen and on the screen, respectively):</p>
+
+<pre class="brush: js">btn.onclick = function() {
+  videoBox.setAttribute('class', 'showing');
+}</pre>
+
+<p>We then add a couple more <code>onclick</code> event handlers — the first one to the <code>&lt;div&gt;</code> and the second one to the <code>&lt;video&gt;</code>. The idea is that when the area of the <code>&lt;div&gt;</code> outside the video is clicked, the box should be hidden again; when the video itself is clicked, the video should start to play.</p>
+
+<pre class="brush: js">videoBox.onclick = function() {
+  videoBox.setAttribute('class', 'hidden');
+};
+
+video.onclick = function() {
+  video.play();
+};</pre>
+
+<p>But there's a problem — currently, when you click the video it starts to play, but it causes the <code>&lt;div&gt;</code> to also be hidden at the same time. This is because the video is inside the <code>&lt;div&gt;</code> — it is part of it — so clicking on the video actually runs <em>both</em> the above event handlers.</p>
+
+<h4 id="Bubbling_and_capturing_explained">Bubbling and capturing explained</h4>
+
+<p>When an event is fired on an element that has parent elements (in this case, the {{htmlelement("video")}} has the {{htmlelement("div")}} as a parent), modern browsers run two different phases — the <strong>capturing</strong> phase and the <strong>bubbling</strong> phase.</p>
+
+<p>In the <strong>capturing</strong> phase:</p>
+
+<ul>
+ <li>The browser checks to see if the element's outer-most ancestor ({{htmlelement("html")}}) has an <code>onclick</code> event handler registered on it for the capturing phase, and runs it if so.</li>
+ <li>Then it moves on to the next element inside <code>&lt;html&gt;</code> and does the same thing, then the next one, and so on until it reaches the element that was actually clicked on.</li>
+</ul>
+
+<p>In the <strong>bubbling</strong> phase, the exact opposite occurs:</p>
+
+<ul>
+ <li>The browser checks to see if the element that was actually clicked on has an <code>onclick</code> event handler registered on it for the bubbling phase, and runs it if so.</li>
+ <li>Then it moves on to the next immediate ancestor element and does the same thing, then the next one, and so on until it reaches the <code>&lt;html&gt;</code> element.</li>
+</ul>
+
+<p><a href="https://mdn.mozillademos.org/files/14075/bubbling-capturing.png"><img alt="" src="https://mdn.mozillademos.org/files/14075/bubbling-capturing.png" style="display: block; height: 452px; margin: 0px auto; width: 960px;"></a></p>
+
+<p>(Click on image for bigger diagram)</p>
+
+<p>In modern browsers, by default, all event handlers are registered for the bubbling phase. So in our current example, when you click the video, the click event bubbles from the <code>&lt;video&gt;</code> element outwards to the <code>&lt;html&gt;</code> element. Along the way:</p>
+
+<ul>
+ <li>It finds the <code>video.onclick...</code> handler and runs it, so the video first starts playing.</li>
+ <li>It then finds the <code>videoBox.onclick...</code> handler and runs it, so the video is hidden as well.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: In cases where both types of event handlers are present, bubbling and capturing, the capturing phase will run first, followed by the bubbling phase.</p>
+</div>
+
+<h4 id="Fixing_the_problem_with_stopPropagation">Fixing the problem with stopPropagation()</h4>
+
+<p>This is annoying behavior, but there is a way to fix it! The standard <code><a href="/en-US/docs/Web/API/Event">Event</a></code> object has a function available on it called <code><a href="/en-US/docs/Web/API/Event/stopPropagation">stopPropagation()</a></code> which, when invoked on a handler's event object, makes it so that first handler is run but the event doesn't bubble any further up the chain, so no more handlers will be run.</p>
+
+<p>We can, therefore, fix our current problem by changing the second handler function in the previous code block to this:</p>
+
+<pre class="brush: js">video.onclick = function(e) {
+  e.stopPropagation();
+  video.play();
+};</pre>
+
+<p>You can try making a local copy of the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">show-video-box.html source code</a> and fixing it yourself, or looking at the fixed result in <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html">show-video-box-fixed.html</a> (also see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box-fixed.html">source code</a> here).</p>
+
+<div class="note">
+<p><strong>Note</strong>: Why bother with both capturing and bubbling? Well, in the bad old days when browsers were much less cross-compatible than they are now, Netscape only used event capturing, and Internet Explorer used only event bubbling. When the W3C decided to try to standardize the behavior and reach a consensus, they ended up with this system that included both, which is the one modern browsers implemented.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: As mentioned above, by default all event handlers are registered in the bubbling phase, and this makes more sense most of the time. If you really want to register an event in the capturing phase instead, you can do so by registering your handler using <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>, and setting the optional third property to <code>true</code>.</p>
+</div>
+
+<h4 id="Event_delegation">Event delegation</h4>
+
+<p>Bubbling also allows us to take advantage of <strong>event delegation</strong> — this concept relies on the fact that if you want some code to run when you click on any one of a large number of child elements, you can set the event listener on their parent and have events that happen on them bubble up to their parent rather than having to set the event listener on every child individually. Remember earlier that we said bubbling involves checking the element the event is fired on for an event handler first, then moving up to the element's parent, etc.?</p>
+
+<p>A good example is a series of list items — if you want each one of them to pop up a message when clicked, you can set the <code>click</code> event listener on the parent <code>&lt;ul&gt;</code>, and events will bubble from the list items to the <code>&lt;ul&gt;</code>.</p>
+
+<p>This concept is explained further on David Walsh's blog, with multiple examples — see <a href="https://davidwalsh.name/event-delegate">How JavaScript Event Delegation Works</a>.</p>
+
+<h2 id="Test_your_skills!">Test your skills!</h2>
+
+<p>You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Events">Test your skills: Events</a>.</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>You should now know all you need to know about web events at this early stage. As mentioned above, events are not really part of the core JavaScript — they are defined in browser Web APIs.</p>
+
+<p>Also, it is important to understand that the different contexts in which JavaScript is used have different event models — from Web APIs to other areas such as browser WebExtensions and Node.js (server-side JavaScript). We are not expecting you to understand all these areas now, but it certainly helps to understand the basics of events as you forge ahead with learning web development.</p>
+
+<p>If there is anything you didn't understand, feel free to read through the article again, or <a href="https://discourse.mozilla.org/c/mdn/learn">contact us</a> to ask for help.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="http://www.quirksmode.org/js/events_order.html">Event order</a> (discussion of capturing and bubbling) — an excellently detailed piece by Peter-Paul Koch.</li>
+ <li><a href="http://www.quirksmode.org/js/events_access.html">Event accessing</a> (discussion of the event object) — another excellently detailed piece by Peter-Paul Koch.</li>
+ <li><a href="/en-US/docs/Web/Events">Event reference</a></li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Function return values</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></li>
+</ul>
diff --git a/files/de/learn/javascript/bausteine/index.html b/files/de/learn/javascript/bausteine/index.html
new file mode 100644
index 0000000000..1c6fb8fc46
--- /dev/null
+++ b/files/de/learn/javascript/bausteine/index.html
@@ -0,0 +1,42 @@
+---
+title: JavaScript Bausteine
+slug: Learn/JavaScript/Bausteine
+translation_of: Learn/JavaScript/Building_blocks
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">In diesem Modul betrachten wir weiterhin JavaScripts Kernfunktionen. Wir betrachten verschiedene, häufig vorkommende Arten von Code Blöcken, wie zum Beispiel Fallunterscheidungen, Schleifen, Funktionen und Events. Diese hast du bereits im Laufe des Kurses gesehen, allerdings nur "nebenbei" -  jetzt behandeln wir sie explizit.</p>
+
+<h2 id="Vorraussetzungen">Vorraussetzungen</h2>
+
+<p>Bevor du mit diesem Modul anfängst, solltest du mit den Grundlagen von <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML</a> und <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS</a> vertraut sein und das vorherige Modul, <a href="/en-US/docs/Learn/JavaScript/First_steps">Erste Schritte mit JavaScript</a>, abgeschlossen haben.</p>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Falls du auf einem Computer/Tablet/anderem Gerät arbeitest, auf dem du keine Dateien erstellen kannst, kannst du die (meisten) Code Beispiele online, zum Beispiel mit <a href="http://jsbin.com/">JSBin</a> oder <a href="https://thimble.mozilla.org/">Thimble</a>, ausprobieren.</p>
+</div>
+
+<h2 id="Anleitungen">Anleitungen</h2>
+
+<dl>
+ <dt><a href="/de-DE/docs/Learn/JavaScript/Building_blocks/conditionals">Entscheidungen treffen --- Fallunterscheidungen </a></dt>
+ <dd>In allen Programmiersprachen muss Code Entscheidungen treffen und bei unterschiedlichen Eingaben entsprechend handeln. Falls zum Beispiel in einem Spiel der Spieler keine Leben mehr übrig hat, so hat er das Spiel verloren. In einer Wetter-App soll beispielsweise morgens ein Sonnenaufgang als Hintergrund gezeigt werden, nachts jedoch Mond und Sterne. In diesem Artikel betrachten wir Fallunterscheidungen und wie diese in JavaScript funktionieren.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Code wiederholen</a></dt>
+ <dd>Manchmal soll eine Aufgabe mehr als einmal ausgeführt werden, zum Beispiel wenn eine Liste an Namen durchsucht wird. Um solche Aufgaben zu erledigen, sind Schleifen eine gute Lösung. Im folgenden Artikel werden wir Schleifen in JavaScript genauer betrachten.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Funktionen -- Wiederverwendbare Codeblöcke </a></dt>
+ <dd>Ein essentielles Konzept in der Programmierung sind Funktionen. Funktionen erlauben es, Code, der eine bestimmte Aufgabe erfüllt, in einem eigenen Block zu definieren. Anschließend kann dieser Code über ein einzelnes, kurzes Kommando aufgerufen werden, anstatt den ganzen Code mehrere Male tippen zu müssen. In diesem Artikel erkunden wir die Konzepte hinter Funktionen wie die grundlegende Syntax oder wie diese aufgerufen werden und definieren die Begriffe Funktion, Sichtbereich (Scope) und Parameter.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Baue deine eigene Funktion </a></dt>
+ <dd>Nach dem der Großteil der grundlegenden Theorie im vorherigen Artikel thematisiert wurde, bietet dieser Artikel eine praktische Erfahrung. Hier bekommst du etwas Übung im Erstellen deiner eigenen Funktion. Außerdem werden wir einige weitere nützliche Details für das Arbeiten mit Funktionen behandeln. </dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Rückgabewerte von Funktionen</a></dt>
+ <dd>Es gibt ein weiteres essentielles Konzept, dass wir in diesem Kurs behandeln werden, um unsere Betrachtung von Funktionne abzuschließen --- Rückgabewerte. Manche Funktionen geben keinen "sinnvollen" Wert zurück, andere schon. Es ist wichtig zu verstehen, was diese Werte sind, wie sie benutzt werden und wie du Funktionen schreibst, die sinnvolle Werte zurückgeben.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Einführung in Events</a></dt>
+ <dd>Events sind Aktionen oder Ereignisse die in dem System, in dem du programmierts, passieren. Das System weist dich auf diese hin, so dass du gegebenenfalls entsprechend reagieren kannst. Klickt ein Nutzer beispielsweise auf einen Button auf einer Webseite, so möchtest du vermutlich darauf reagieren, in dem du eine Aktion ausführst. In diesem Artikel behandeln wir einige wichtige Konzepte bezüglich Events und betrachten deren Funktionsweise in Browsern.</dd>
+</dl>
+
+<h2 id="Prüfungen">Prüfungen</h2>
+
+<p>Die folgenden Aufgaben werden dein Verständnis der in diesen Artikeln behandelten JavaScript Grundlagen prüfen. </p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Bildergalerie</a></dt>
+ <dd>Jetzt wo wir die grundlegenden Bausteine JavaScripts betrachtet haben, werden wir dein Wissen über Schleifen, Funktionen, Fallunterscheidungen und Events testen, indem wir eine JavaScript-basierte Bildergalerie entwickeln.</dd>
+</dl>
diff --git a/files/de/learn/javascript/first_steps/erster_blick/index.html b/files/de/learn/javascript/first_steps/erster_blick/index.html
new file mode 100644
index 0000000000..e772147cae
--- /dev/null
+++ b/files/de/learn/javascript/first_steps/erster_blick/index.html
@@ -0,0 +1,597 @@
+---
+title: Ein erster Eindruck von JavaScript
+slug: Learn/JavaScript/First_steps/Erster_Blick
+translation_of: Learn/JavaScript/First_steps/A_first_splash
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">Nachdem Sie etwas über die Theorie von JavaScript gelernt haben und was Sie damit machen können, werden wir Ihnen in einem komplett praktischen Tutorial einen Crashkurs in den Grundfunktionen von JavaScript anbieten. Wir werden hier Schritt für Schritt ein einfaches Zahlenraten Spiel programmieren.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Voraussetzungen:</th>
+   <td>Grundlegende Computerkenntnisse, einfache Grundkentnisse von HTML und CSS, sowie eine Vorstellung, was JavaScript ist.</td>
+  </tr>
+  <tr>
+   <th scope="row">Ziel:</th>
+   <td>Erste Erfahrung beim Schreiben von JavaScript zu bekommen und zumindest ein grundlegendes Verständnis dafür zu erlangen, was das Schreiben eines JavaScript-Programms beinhaltet.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Es ist nicht nötig, dass Sie den gesamten Code sofort im Detail verstehen - wir wollen Ihnen nur grob die Konzepte vorab vorstellen und Ihnen eine Vorstellung davon vermitteln, wie JavaScript (und andere Programmiersprachen) funktionieren. In den folgenden Artikeln werden wir alle diese Funktionen noch einmal im Detail besprechen!</p>
+
+<div class="note">
+<p>Hinweis: Viele der Befehle und Konstrukte, die Sie in JavaScript sehen werden, sind die gleichen wie in anderen Programmiersprachen - Funktionen, Schleifen, etc. Die Syntax sieht anders aus, aber die Konzepte sind immer noch weitgehend die gleichen.</p>
+</div>
+
+<h2 id="Denken_wie_ein_Programmierer">Denken wie ein Programmierer</h2>
+
+<p>Eines der schwierigsten Dinge, die man bei der Programmierung lernen muss, sind nicht die Befehle, sondern wie man sie zur Lösung der Aufgabe anwendet. Sie müssen anfangen, wie ein Programmierer zu denken - Sie müssen sich im klaren sein was  Ihr Programm tun soll, um dann herauszuarbeiten welche Funktionen und Befehle Sie dafür benötigen.</p>
+
+<p>Dies erfordert eine Mischung aus harter Arbeit, Erfahrung mit der Programmiersprache und Praxis - und ein wenig Kreativität. Je mehr Sie kodieren, desto besser werden Sie werden. Wir können nicht versprechen, dass Sie in fünf Minuten ein "Programmierer-Gehirn" entwickeln werden, aber wir werden Ihnen viel Gelegenheit geben, während des gesamten Kurses das Denken wie ein Programmierer zu üben.</p>
+
+<p>In diesem Sinne betrachten Sie das Beispiel, das wir in diesem Artikel erstellen werden und üben damit den Prozess der Zerlegung in konkrete Einzelschritte.</p>
+
+<h2 id="Beispiel_—_Rate_die_Zahl">Beispiel — Rate die Zahl</h2>
+
+<p>In diesem Artikel zeigen wir Ihnen, wie Sie das Ratespiel aufbauen können, das Sie hier sehen können.:</p>
+
+<div class="hidden">
+<h6 id="Top_hidden_code">Top hidden code</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+
+&lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Number guessing game&lt;/title&gt;
+    &lt;style&gt;
+        html {
+            font-family: sans-serif;
+        }
+
+        body {
+            width: 50%;
+            max-width: 800px;
+            min-width: 480px;
+            margin: 0 auto;
+        }
+
+        .lastResult {
+            color: white;
+            padding: 3px;
+        }
+    &lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+    &lt;h1&gt;Zahlenraten&lt;/h1&gt;
+    &lt;p&gt;Wir haben eine Zufallszahl zwischen 1 und 100 gewählt. Können Sie sie in höchstens 10 Versuchen erraten? Nach jeder Eingabe bekommen Sie einen Hinweis ob ihre Zahl zu gross oder zu klein war&lt;/p&gt;
+    &lt;div class="form"&gt; &lt;label for="guessField"&gt;Geben Sie ihre Zahl ein: &lt;/label&gt;&lt;input type="text" id="guessField" class="guessField"&gt; &lt;input type="submit" value="Tip absenden" class="guessSubmit"&gt; &lt;/div&gt;
+    &lt;div class="resultParas"&gt;
+        &lt;p class="guesses"&gt;&lt;/p&gt;
+        &lt;p class="lastResult"&gt;&lt;/p&gt;
+        &lt;p class="lowOrHi"&gt;&lt;/p&gt;
+    &lt;/div&gt;
+&lt;script&gt;
+    // Ihr JavaScript Code steht hier
+    let randomNumber = Math.floor(Math.random() * 100) + 1;
+    const guesses = document.querySelector('.guesses');
+    const lastResult = document.querySelector('.lastResult');
+    const lowOrHi = document.querySelector('.lowOrHi');
+    const guessSubmit = document.querySelector('.guessSubmit');
+    const guessField = document.querySelector('.guessField');
+    let guessCount = 1;
+    let resetButton;
+
+    function checkGuess() {
+      let userGuess = Number(guessField.value);
+      if (guessCount === 1) {
+        guesses.textContent = 'Vorherige Versuche: ';
+      }
+
+      guesses.textContent += userGuess + ' ';
+
+      if (userGuess === randomNumber) {
+        lastResult.textContent = 'Glückwunsch! Richtig geraten!';
+        lastResult.style.backgroundColor = 'green';
+        lowOrHi.textContent = '';
+        setGameOver();
+      } else if (guessCount === 10) {
+        lastResult.textContent = '!!!ENDESPIEL!!!';
+        lowOrHi.textContent = '';
+        setGameOver();
+      } else {
+        lastResult.textContent = 'Falsch!';
+        lastResult.style.backgroundColor = 'red';
+        if(userGuess &lt; randomNumber) {
+          lowOrHi.textContent = 'Ihre Zahl ist zu niedrig!' ;
+        } else if(userGuess &gt; randomNumber) {
+          lowOrHi.textContent = 'Ihre Zahl ist zu hoch!';
+        }
+      }
+
+      guessCount++;
+      guessField.value = '';
+    }
+
+    guessSubmit.addEventListener('click', checkGuess);
+
+    function setGameOver() {
+      guessField.disabled = true;
+      guessSubmit.disabled = true;
+      resetButton = document.createElement('button');
+      resetButton.textContent = 'Spiel neu starten';
+      document.body.appendChild(resetButton);
+      resetButton.addEventListener('click', resetGame);
+    }
+
+    function resetGame() {
+      guessCount = 1;
+      const resetParas = document.querySelectorAll('.resultParas p');
+      for(let i = 0 ; i &lt; resetParas.length ; i++) {
+        resetParas[i].textContent = '';
+      }
+
+      resetButton.parentNode.removeChild(resetButton);
+      guessField.disabled = false;
+      guessSubmit.disabled = false;
+      guessField.value = '';
+      guessField.focus();
+      lastResult.style.backgroundColor = 'white';
+      randomNumber = Math.floor(Math.random() * 100) + 1;
+    }
+&lt;/script&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Top_hidden_code', '100%', 320, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>Machen Sie sich mit der Funktionsweise des Spiels vertraut, bevor Sie weitermachen.</p>
+
+<p>Stellen wir uns vor, Ihr Chef hat Ihnen den folgenden Auftrag für die Erstellung dieses Spiels gegeben:</p>
+
+<blockquote>
+<p>Schreiben Sie ein Programm das ein Zahlenratespiel implementiert. Es sollte eine Zufallszahl zwischen 1 und 100 wählen und den Spieler auffordern, die Zahl nach spätestens 10 Runden zu erraten. Nach jedem Zug sollte dem Spieler mitgeteilt werden, ob er richtig geraten hat oder nicht - und, wenn er Unrecht hat, ob die Zahl zu niedrig oder zu hoch war. Außerdem sollen dem Spieler alle vorher geratenen Zahlen angezeigt werden. Das Spiel endet, wenn der Spieler richtig rät oder wenn er 10-mal falsch geraten hat. Wenn das Spiel endet, sollte dem Spieler die Möglichkeit gegeben werden, erneut zu spielen.</p>
+</blockquote>
+
+<p>Wenn wir uns diesen Anweisungen ansehen, können wir zunächst damit beginnen, ihn in einfache, umsetzbare Aufgaben aufzuteilen, und zwar aus der Sicht eines Programmierers:</p>
+
+<ol>
+ <li>Generiere eine zufällige Zahl zwischen 1 und 100.</li>
+ <li>Speichere die Anzahl der getätigten Rateversuche, setze den Wert anfangs auf 1.</li>
+ <li>Ermögliche dem Spieler, einen Tipp abzugeben.</li>
+ <li>Sobald ein Tip abgegeben wurde, speichere sie damit der Spieler seine vorherigen Eingaben sehen kann.</li>
+ <li>Als Nächstes überprüfe, ob es sich um die richtige Zahl handelt.</li>
+ <li>Wenn sie richtig ist:
+  <ol>
+   <li>Zeige Glückwunsch Nachricht.</li>
+   <li>Verhindere weiter Eingaben, da das Spiel zu Ende ist.</li>
+   <li>Biete eine Möglichkeit, das Spiel neu zu starten.</li>
+  </ol>
+ </li>
+ <li>Wenn sie falsch ist und noch Versuche übrig sind:
+  <ol>
+   <li>Dem Spieler mitteilen, dass die Zahl noch nicht erraten ist.</li>
+   <li>Die Eingabe einer weiteren Zahl ermöglichen.</li>
+   <li>Die Anzahl der Rateversuche um 1 erhöhen.</li>
+  </ol>
+ </li>
+ <li>Wenn die Zahl falsch ist und keine Versuche mehr übrig sind:
+  <ol>
+   <li>Dem Spieler mitteilen, dass das Spiel zu Ende ist.</li>
+   <li>Keine weiteren Eingaben mehr zulassen.</li>
+   <li>Ein Steuerelement zum Neustart des Spiels anzeigen.</li>
+  </ol>
+ </li>
+ <li>Wenn das Spiel neu startet, sicherstellen dass Logik und Benutzeroberfläche zurückgesetzt werden. Danach zurück zum 1. Schritt.</li>
+</ol>
+
+<p>Lassen Sie uns nun fortfahren und schauen, wie wir diese Punkte in Code umwandeln können, das Beispiel aufbauen und die JavaScript-Funktionen während der Arbeit erforschen.</p>
+
+<h3 id="Vorbereitungen">Vorbereitungen</h3>
+
+<p>Um dieses Tutorial zu beginnen, möchten wir Sie bitten, eine lokale Kopie der Datei <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">number-guessing-game-start.html</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">see it live here</a>) zu erstellen. Öffnen Sie es sowohl in Ihrem Texteditor als auch in Ihrem Webbrowser. Im Moment sehen Sie eine einfache Überschrift, einen Absatz mit Anweisungen und ein Formular zur Eingabe einer Schätzung, aber das Formular wird derzeit nichts tun.</p>
+
+<p>Unseren gesamten Code werden wir innerhalb des {{htmlelement("script")}} Elements am Ende der HTML-Datei einfügen:</p>
+
+<pre class="brush: html">&lt;script&gt;
+
+  // Ihr Programm steht hier
+
+&lt;/script&gt;
+</pre>
+
+<h3 id="Variablen_hinzufügen_um_Daten_zu_speichern">Variablen hinzufügen um Daten zu speichern</h3>
+
+<p>Lassen Sie uns anfangen. Fügen Sie zunächst die folgenden Zeilen nach dem {{htmlelement("script")}} Element ein:</p>
+
+<pre class="brush: js">let randomNumber = Math.floor(Math.random() * 100) + 1;
+
+const guesses = document.querySelector('.guesses');
+const lastResult = document.querySelector('.lastResult');
+const lowOrHi = document.querySelector('.lowOrHi');
+
+const guessSubmit = document.querySelector('.guessSubmit');
+const guessField = document.querySelector('.guessField');
+
+let guessCount = 1;
+let resetButton;</pre>
+
+<p>Obiger Code richtet die Variablen und Konstanten ein, die wir benötigen, um die Daten zu speichern, die unser Programm verwenden wird. Variablen sind im Grunde genommen Container für Werte (z.B. Zahlen oder Text). Sie erstellen eine Variable mit dem Schlüsselwort <code>let</code> (oder <code>var</code>) gefolgt von einem Namen für Ihre Variable (Sie werden mehr über den Unterschied zwischen den beiden Schlüsselwörtern in einem zukünftigen Artikel lesen). Konstanten werden verwendet, um Werte zu speichern, die Sie nicht ändern möchten, und werden mit dem Schlüsselwort const erstellt. In diesem Fall verwenden wir Konstanten, um Referenzen auf Teile unserer Benutzeroberfläche zu speichern; der Text in einigen von ihnen kann sich ändern, aber die referenzierten HTML-Elemente bleiben unverändert.</p>
+
+<p>Sie können Ihrer Variablen oder Konstanten einen Wert mit einem Gleichheitszeichen (=) zuweisen, gefolgt von dem Wert, den Sie ihr geben möchten.</p>
+
+<p>In unser Beispiel:</p>
+
+<ul>
+ <li>Die erste Variable — <code>randomNumber</code> — ist assigned a random number between 1 and 100, calculated using a mathematical algorithm.</li>
+ <li>The first three constants are each made to store a reference to the results paragraphs in our HTML, and are used to insert values into the paragraphs later on in the code:
+  <pre class="brush: html">&lt;p class="guesses"&gt;&lt;/p&gt;
+&lt;p class="lastResult"&gt;&lt;/p&gt;
+&lt;p class="lowOrHi"&gt;&lt;/p&gt;</pre>
+ </li>
+ <li>The next two constants store references to the form text input and submit button and are used to control submitting the guess later on.
+  <pre class="brush: html">&lt;label for="guessField"&gt;Enter a guess: &lt;/label&gt;&lt;input type="text" id="guessField" class="guessField"&gt;
+&lt;input type="submit" value="Submit guess" class="guessSubmit"&gt;</pre>
+ </li>
+ <li>Our final two variables store a guess count of 1 (used to keep track of how many guesses the player has had), and a reference to a reset button that doesn't exist yet (but will later).</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: You'll learn a lot more about variables/constants later on in the course, starting with the <a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/variables">next article</a>.</p>
+</div>
+
+<h3 id="Functions">Functions</h3>
+
+<p>Next, add the following below your previous JavaScript:</p>
+
+<pre class="brush: js">function checkGuess() {
+  alert('I am a placeholder');
+}</pre>
+
+<p>Functions are reusable blocks of code that you can write once and run again and again, saving the need to keep repeating code all the time. This is really useful. There are a number of ways to define functions, but for now we'll concentrate on one simple type. Here we have defined a function by using the keyword <code>function</code>, followed by a name, with parentheses put after it. After that we put two curly braces (<code>{ }</code>). Inside the curly braces goes all the code that we want to run whenever we call the function.</p>
+
+<p>When we want to run the code, we type the name of the function followed by the parentheses.</p>
+
+<p>Let's try that now. Save your code and refresh the page in your browser. Then go into the <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools JavaScript console</a>, and enter the following line:</p>
+
+<pre class="brush: js">checkGuess();</pre>
+
+<p>After pressing <kbd>Return</kbd>/<kbd>Enter</kbd>, you should see an alert come up that says "<samp>I am a placeholder</samp>"; we have defined a function in our code that creates an alert whenever we call it.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You'll learn a lot more about functions <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">later in the course</a>.</p>
+</div>
+
+<h3 id="Operators">Operators</h3>
+
+<p>JavaScript operators allow us to perform tests, do maths, join strings together, and other such things.</p>
+
+<p>If you haven't already done so, save your code, refresh the page in your browser, and open the <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools JavaScript console</a>. Then we can try typing in the examples shown below — type in each one from the "Example" columns exactly as shown, pressing <kbd>Return</kbd>/<kbd>Enter</kbd> after each one, and see what results they return.</p>
+
+<p>First let's look at arithmetic operators, for example:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Operator</th>
+   <th scope="col">Name</th>
+   <th scope="col">Example</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>+</code></td>
+   <td>Addition</td>
+   <td><code>6 + 9</code></td>
+  </tr>
+  <tr>
+   <td><code>-</code></td>
+   <td>Subtraction</td>
+   <td><code>20 - 15</code></td>
+  </tr>
+  <tr>
+   <td><code>*</code></td>
+   <td>Multiplication</td>
+   <td><code>3 * 7</code></td>
+  </tr>
+  <tr>
+   <td><code>/</code></td>
+   <td>Division</td>
+   <td><code>10 / 5</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>You can also use the <code>+</code> operator to join text strings together (in programming, this is called <em>concatenation</em>). Try entering the following lines, one at a time:</p>
+
+<pre class="brush: js">let name = 'Bingo';
+name;
+let hello = ' says hello!';
+hello;
+let greeting = name + hello;
+greeting;</pre>
+
+<p>There are also some shortcut operators available, called augmented <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">assignment operators</a>. For example, if you want to simply add a new text string to an existing one and return the result, you could do this:</p>
+
+<pre class="brush: js">name += ' says hello!';</pre>
+
+<p>This is equivalent to</p>
+
+<pre class="brush: js">name = name + ' says hello!';</pre>
+
+<p>When we are running true/false tests (for example inside conditionals — see {{anch("Conditionals", "below")}}) we use <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">comparison operators</a>. For example:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Operator</th>
+   <th scope="col">Name</th>
+   <th scope="col">Example</th>
+  </tr>
+  <tr>
+   <td><code>===</code></td>
+   <td>Strict equality (is it exactly the same?)</td>
+   <td>
+    <pre class="brush: js">
+5 === 2 + 4 // false
+'Chris' === 'Bob' // false
+5 === 2 + 3 // true
+2 === '2' // false; number versus string
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td><code>!==</code></td>
+   <td>Non-equality (is it not the same?)</td>
+   <td>
+    <pre class="brush: js">
+5 !== 2 + 4 // true
+'Chris' !== 'Bob' // true
+5 !== 2 + 3 // false
+2 !== '2' // true; number versus string
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td><code>&lt;</code></td>
+   <td>Less than</td>
+   <td>
+    <pre class="brush: js">
+6 &lt; 10 // true
+20 &lt; 10 // false</pre>
+   </td>
+  </tr>
+  <tr>
+   <td><code>&gt;</code></td>
+   <td>Greater than</td>
+   <td>
+    <pre class="brush: js">
+6 &gt; 10 // false
+20 &gt; 10  // true</pre>
+   </td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="Conditionals">Conditionals</h3>
+
+<p>Returning to our <code>checkGuess()</code> function, I think it's safe to say that we don't want it to just spit out a placeholder message. We want it to check whether a player's guess is correct or not, and respond appropriately.</p>
+
+<p>At this point, replace your current <code>checkGuess()</code> function with this version instead:</p>
+
+<pre class="brush: js">function checkGuess() {
+  let userGuess = Number(guessField.value);
+  if (guessCount === 1) {
+    guesses.textContent = 'Previous guesses: ';
+  }
+  guesses.textContent += userGuess + ' ';
+
+  if (userGuess === randomNumber) {
+    lastResult.textContent = 'Congratulations! You got it right!';
+    lastResult.style.backgroundColor = 'green';
+    lowOrHi.textContent = '';
+    setGameOver();
+  } else if (guessCount === 10) {
+    lastResult.textContent = '!!!GAME OVER!!!';
+    setGameOver();
+  } else {
+    lastResult.textContent = 'Wrong!';
+    lastResult.style.backgroundColor = 'red';
+    if(userGuess &lt; randomNumber) {
+      lowOrHi.textContent = 'Last guess was too low!';
+    } else if(userGuess &gt; randomNumber) {
+      lowOrHi.textContent = 'Last guess was too high!';
+    }
+  }
+
+  guessCount++;
+  guessField.value = '';
+  guessField.focus();
+}</pre>
+
+<p>This is a lot of code — phew! Let's go through each section and explain what it does.</p>
+
+<ul>
+ <li>The first line (line 2 above) declares a variable called <code>userGuess</code> and sets its value to the current value entered inside the text field. We also run this value through the built-in <code>Number()</code> constructor, just to make sure the value is definitely a number.</li>
+ <li>Next, we encounter our first conditional code block (lines 3–5 above). A conditional code block allows you to run code selectively, depending on whether a certain condition is true or not. It looks a bit like a function, but it isn't. The simplest form of conditional block starts with the keyword <code>if</code>, then some parentheses, then some curly braces. Inside the parentheses we include a test. If the test returns <code>true</code>, we run the code inside the curly braces. If not, we don't, and move on to the next bit of code. In this case the test is testing whether the <code>guessCount</code> variable is equal to <code>1</code> (i.e. whether this is the player's first go or not):
+  <pre class="brush: js">guessCount === 1</pre>
+  If it is, we make the guesses paragraph's text content equal to "<samp>Previous guesses: </samp>". If not, we don't.</li>
+ <li>Line 6 appends the current <code>userGuess</code> value onto the end of the <code>guesses</code> paragraph, plus a blank space so there will be a space between each guess shown.</li>
+ <li>The next block (lines 8–24 above) does a few checks:
+  <ul>
+   <li>The first <code>if(){ }</code> checks whether the user's guess is equal to the <code>randomNumber</code> set at the top of our JavaScript. If it is, the player has guessed correctly and the game is won, so we show the player a congratulations message with a nice green color, clear the contents of the Low/High guess information box, and run a function called <code>setGameOver()</code>, which we'll discuss later.</li>
+   <li>Now we've chained another test onto the end of the last one using an <code>else if(){ }</code> structure. This one checks whether this turn is the user's last turn. If it is, the program does the same thing as in the previous block, except with a game over message instead of a congratulations message.</li>
+   <li>The final block chained onto the end of this code (the <code>else { }</code>) contains code that is only run if neither of the other two tests returns true (i.e. the player didn't guess right, but they have more guesses left). In this case we tell them they are wrong, then we perform another conditional test to check whether the guess was higher or lower than the answer, displaying a further message as appropriate to tell them higher or lower.</li>
+  </ul>
+ </li>
+ <li>The last three lines in the function (lines 26–28 above) get us ready for the next guess to be submitted. We add 1 to the <code>guessCount</code> variable so the player uses up their turn (<code>++</code> is an incrementation operation — increment by 1), and empty the value out of the form text field and focus it again, ready for the next guess to be entered.</li>
+</ul>
+
+<h3 id="Events">Events</h3>
+
+<p>At this point we have a nicely implemented <code>checkGuess()</code> function, but it won't do anything because we haven't called it yet. Ideally we want to call it when the "Submit guess" button is pressed, and to do this we need to use an event. Events are things that happen in the browser — a button being clicked, a page loading, a video playing, etc. — in response to which we can run blocks of code. The constructs that listen out for the event happening are called <strong>event listeners</strong>, and the blocks of code that run in response to the event firing are called <strong>event handlers</strong>.</p>
+
+<p>Add the following line below your <code>checkGuess()</code> function:</p>
+
+<pre class="brush: js">guessSubmit.addEventListener('click', checkGuess);</pre>
+
+<p>Here we are adding an event listener to the <code>guessSubmit</code> button. This is a method that takes two input values (called <em>arguments</em>) — the type of event we are listening out for (in this case <code>click</code>) as a string, and the code we want to run when the event occurs (in this case the <code>checkGuess()</code> function). Note that we don't need to specify the parentheses when writing it inside {{domxref("EventTarget.addEventListener", "addEventListener()")}}.</p>
+
+<p>Try saving and refreshing your code now, and your example should work — to a point. The only problem now is that if you guess the correct answer or run out of guesses, the game will break because we've not yet defined the <code>setGameOver()</code> function that is supposed to be run once the game is over. Let's add our missing code now and complete the example functionality.</p>
+
+<h3 id="Finishing_the_game_functionality">Finishing the game functionality</h3>
+
+<p>Let's add that <code>setGameOver()</code> function to the bottom of our code and then walk through it. Add this now, below the rest of your JavaScript:</p>
+
+<pre class="brush: js">function setGameOver() {
+  guessField.disabled = true;
+  guessSubmit.disabled = true;
+  resetButton = document.createElement('button');
+  resetButton.textContent = 'Start new game';
+  document.body.appendChild(resetButton);
+  resetButton.addEventListener('click', resetGame);
+}</pre>
+
+<ul>
+ <li>The first two lines disable the form text input and button by setting their disabled properties to <code>true</code>. This is necessary, because if we didn't, the user could submit more guesses after the game is over, which would mess things up.</li>
+ <li>The next three lines generate a new {{htmlelement("button")}} element, set its text label to "Start new game", and add it to the bottom of our existing HTML.</li>
+ <li>The final line sets an event listener on our new button so that when it is clicked, a function called <code>resetGame()</code> is run.</li>
+</ul>
+
+<p>Now we need to define this function too! Add the following code, again to the bottom of your JavaScript:</p>
+
+<pre class="brush: js">function resetGame() {
+  guessCount = 1;
+
+  const resetParas = document.querySelectorAll('.resultParas p');
+  for (let i = 0 ; i &lt; resetParas.length ; i++) {
+    resetParas[i].textContent = '';
+  }
+
+  resetButton.parentNode.removeChild(resetButton);
+
+  guessField.disabled = false;
+  guessSubmit.disabled = false;
+  guessField.value = '';
+  guessField.focus();
+
+  lastResult.style.backgroundColor = 'white';
+
+  randomNumber = Math.floor(Math.random() * 100) + 1;
+}</pre>
+
+<p>This rather long block of code completely resets everything to how it was at the start of the game, so the player can have another go. It:</p>
+
+<ul>
+ <li>Puts the <code>guessCount</code> back down to 1.</li>
+ <li>Empties all the text out of the information paragraphs.</li>
+ <li>Removes the reset button from our code.</li>
+ <li>Enables the form elements, and empties and focuses the text field, ready for a new guess to be entered.</li>
+ <li>Removes the background color from the <code>lastResult</code> paragraph.</li>
+ <li>Generates a new random number so that you are not just guessing the same number again!</li>
+</ul>
+
+<p><strong>At this point you should have a fully working (simple) game — congratulations!</strong></p>
+
+<p>All we have left to do now in this article is talk about a few other important code features that you've already seen, although you may have not realized it.</p>
+
+<h3 id="Loops">Loops</h3>
+
+<p>One part of the above code that we need to take a more detailed look at is the <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for</a> loop. Loops are a very important concept in programming, which allow you to keep running a piece of code over and over again, until a certain condition is met.</p>
+
+<p>To start with, go to your <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer tools JavaScript console</a> again, and enter the following:</p>
+
+<pre class="brush: js">for (let i = 1 ; i &lt; 21 ; i++) { console.log(i) }</pre>
+
+<p>What happened? The numbers <samp>1</samp> to <samp>20</samp> were printed out in your console. This is because of the loop. A <code>for</code> loop takes three input values (arguments):</p>
+
+<ol>
+ <li><strong>A starting value</strong>: In this case we are starting a count at 1, but this could be any number you like. You could replace the letter <code>i</code> with any name you like too, but <code>i</code> is used as a convention because it's short and easy to remember.</li>
+ <li><strong>An exit condition</strong>: Here we have specified <code>i &lt; 21</code> — the loop will keep going until <code>i</code> is no longer less than 21. When <code>i</code> reaches 21, the loop will no longer run.</li>
+ <li><strong>An incrementor</strong>: We have specified <code>i++</code>, which means "add 1 to i". The loop will run once for every value of <code>i</code>, until <code>i</code> reaches a value of 21 (as discussed above). In this case, we are simply printing the value of <code>i</code> out to the console on every iteration using {{domxref("Console.log", "console.log()")}}.</li>
+</ol>
+
+<p>Now let's look at the loop in our number guessing game — the following can be found inside the <code>resetGame()</code> function:</p>
+
+<pre class="brush: js">let resetParas = document.querySelectorAll('.resultParas p');
+for (let i = 0 ; i &lt; resetParas.length ; i++) {
+  resetParas[i].textContent = '';
+}</pre>
+
+<p>This code creates a variable containing a list of all the paragraphs inside <code>&lt;div class="resultParas"&gt;</code> using the {{domxref("Document.querySelectorAll", "querySelectorAll()")}} method, then it loops through each one, removing the text content of each.</p>
+
+<h3 id="A_small_discussion_on_objects">A small discussion on objects</h3>
+
+<p>Let's add one more final improvement before we get to this discussion. Add the following line just below the <code>let resetButton;</code> line near the top of your JavaScript, then save your file:</p>
+
+<pre class="brush: js">guessField.focus();</pre>
+
+<p>This line uses the {{domxref("HTMLElement.focus", "focus()")}} method to automatically put the text cursor into the {{htmlelement("input")}} text field as soon as the page loads, meaning that the user can start typing their first guess right away, without having to click the form field first. It's only a small addition, but it improves usability — giving the user a good visual clue as to what they've got to do to play the game.</p>
+
+<p>Let's analyze what's going on here in a bit more detail. In JavaScript, everything is an object. An object is a collection of related functionality stored in a single grouping. You can create your own objects, but that is quite advanced and we won't be covering it until much later in the course. For now, we'll just briefly discuss the built-in objects that your browser contains, which allow you to do lots of useful things.</p>
+
+<p>In this particular case, we first created a <code>guessField</code> constant that stores a reference to the text input form field in our HTML — the following line can be found amongst our declarations near the top of the code:</p>
+
+<pre class="brush: js">const guessField = document.querySelector('.guessField');</pre>
+
+<p>To get this reference, we used the {{domxref("document.querySelector", "querySelector()")}} method of the {{domxref("document")}} object. <code>querySelector()</code> takes one piece of information — a <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">CSS selector</a> that selects the element you want a reference to.</p>
+
+<p>Because <code>guessField</code> now contains a reference to an {{htmlelement("input")}} element, it will now have access to a number of properties (basically variables stored inside objects, some of which can't have their values changed) and methods (basically functions stored inside objects). One method available to input elements is <code>focus()</code>, so we can now use this line to focus the text input:</p>
+
+<pre class="brush: js">guessField.focus();</pre>
+
+<p>Variables that don't contain references to form elements won't have <code>focus()</code> available to them. For example, the <code>guesses</code> constant contains a reference to a {{htmlelement("p")}} element, and the <code>guessCount</code> variable contains a number.</p>
+
+<h3 id="Playing_with_browser_objects">Playing with browser objects</h3>
+
+<p>Let's play with some browser objects a bit.</p>
+
+<ol>
+ <li>First of all, open up your program in a browser.</li>
+ <li>Next, open your <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer tools</a>, and make sure the JavaScript console tab is open.</li>
+ <li>Type in <code>guessField</code> and the console will show you that the variable contains an {{htmlelement("input")}} element. You'll also notice that the console autocompletes the names of objects that exist inside the execution environment, including your variables!</li>
+ <li>Now type in the following:
+  <pre class="brush: js">guessField.value = 'Hello';</pre>
+  The <code>value</code> property represents the current value entered into the text field. You'll see that by entering this command, we've changed the text in the text field!</li>
+ <li>Now try typing in <code>guesses</code> and pressing return. The console will show you that the variable contains a {{htmlelement("p")}} element.</li>
+ <li>Now try entering the following line:
+  <pre class="brush: js">guesses.value</pre>
+  The browser will return <code>undefined</code>, because paragraphs don't have the <code>value</code> property.</li>
+ <li>To change the text inside a paragraph, you need the {{domxref("Node.textContent", "textContent")}} property instead. Try this:
+  <pre class="brush: js">guesses.textContent = 'Where is my paragraph?';</pre>
+ </li>
+ <li>Now for some fun stuff. Try entering the below lines, one by one:
+  <pre class="brush: js">guesses.style.backgroundColor = 'yellow';
+guesses.style.fontSize = '200%';
+guesses.style.padding = '10px';
+guesses.style.boxShadow = '3px 3px 6px black';</pre>
+  Every element on a page has a <code>style</code> property, which itself contains an object whose properties contain all the inline CSS styles applied to that element. This allows us to dynamically set new CSS styles on elements using JavaScript.</li>
+</ol>
+
+<h2 id="Finished_for_now...">Finished for now...</h2>
+
+<p>So that's it for building the example. You got to the end — well done! Try your final code out, or <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">play with our finished version here</a>. If you can't get the example to work, check it against the <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">source code</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li>
+</ul>
diff --git a/files/de/learn/javascript/first_steps/index.html b/files/de/learn/javascript/first_steps/index.html
new file mode 100644
index 0000000000..092a419e14
--- /dev/null
+++ b/files/de/learn/javascript/first_steps/index.html
@@ -0,0 +1,67 @@
+---
+title: Erste Schritte mit JavaScript
+slug: Learn/JavaScript/First_steps
+tags:
+  - Anleitung
+  - Arrays
+  - Artikel
+  - Aufgaben
+  - Einsteiger
+  - Felder
+  - JavaScript
+  - Landing
+  - Lernmodul
+  - Mathematik
+  - Operatoren
+  - Variablen
+  - Zahlen
+  - Zeichenketten
+translation_of: Learn/JavaScript/First_steps
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">In unserem ersten Lernmodul zu JavaScript beantworten wir grundlegende Fragen wie »Was ist JavaScript?«, »Wie sieht es aus?« und »Was kann es?«, bevor wir Sie bei Ihren ersten praktischen Erfahrungen mit JavaScript begleiten. Danach erklären wir einige der wichtigsten Bausteine – wie etwa Variablen, Zeichenketten, Zahlen und Felder – im Detail.</p>
+
+<h2 id="Voraussetzungen">Voraussetzungen</h2>
+
+<p>Um mit diesem Lernmodul zu beginnen, brauchen Sie keinerlei Vorwissen in Sachen JavaScript – Sie sollten aber bereits ein wenig mit HTML und CSS vertraut sein. Wir raten Ihnen daher dazu, die folgendenen Lektionen durchzuarbeiten, bevor Sie mit JavaScript loslegen:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/de/docs/Learn/Getting_started_with_the_web">Lerne das Internet kennen</a> (inklusive einer wirklich <a href="/de/docs/Learn/Getting_started_with_the_web/JavaScript_basics">grundlegenden Einführung in JavaScript</a>).</li>
+ <li><a href="/de/docs/Learn/HTML/Introduction_to_HTML">Einführung in HTML</a>.</li>
+ <li><a href="/de/docs/Learn/CSS/Introduction_to_CSS">Einführung in CSS</a>.</li>
+</ul>
+
+<div class="note">
+<p><strong>Anmerkung</strong>: Falls Sie auf einem Computer, einem Tablet oder sonstigem Gerät arbeiten, auf dem Sie keine eigenen Dateien anlegen können, können Sie die Codebeispiele meist auch in einer Online-Coding-Umgebung wie <a href="http://jsbin.com/">JSBin</a> oder <a href="https://thimble.mozilla.org/">Thimble</a> ausprobieren.</p>
+</div>
+
+<h2 id="Anleitungen">Anleitungen</h2>
+
+<dl>
+ <dt><a href="/de/docs/Learn/JavaScript/First_steps/What_is_JavaScript">Was ist JavaScript?</a></dt>
+ <dd>Willkommen beim MDN-Einsteigerkurs zu JavaScript! In diesem ersten Artikel betrachten wir JavaScript von außen, beantworten Fragen wie »Was ist das?« und »Was macht es?«, und machen Sie mit dem Zweck von JavaScript vertraut.</dd>
+ <dt><a href="/de/docs/Learn/JavaScript/First_steps/A_first_splash">Ein erster Abstecher zu JavaScript</a></dt>
+ <dd>Jetzt, da Sie ein wenig Hintergrundwissen über JavaScript und das, was Sie damit anstellen können haben, werden wir Ihnen in einem Crashkurs die wichtigsten Features von JavaScript anhand praktischer Beispiele beibringen.</dd>
+ <dt><a href="/de/docs/Learn/JavaScript/First_steps/What_went_wrong">Was lief verkehrt? JavaScript-Probleme beheben</a></dt>
+ <dd>Nachdem Sie im vorherigen Artikel das Spiel »Zahlen-Raten« konstruiert hatten, kann es sein, dass Sie feststellen mussten, dass es nicht funktionierte. Keine Angst – dieser Artikel soll Sie davor retten, sich wegen solcher Probleme die Haare zu raufen, indem er Ihnen einige einfache Tipps dazu gibt, wie Sie Fehler in JavaScript-Programmen finden und beheben.</dd>
+ <dt><a href="/de/docs/Learn/JavaScript/First_steps/Variables">Informationen, die Sie brauchen, speichern – Variablen</a></dt>
+ <dd>Nach dem Lesen der letzten paar Artikel sollten Sie nun wissen, was JavaScript ist, was es für Sie tun kann, wie Sie es in Kombination mit anderen Web-Technologien einsetzen, und wie die wichtigsten Features in etwa aussehen. In diesem Artikel werden wir uns anschauen, wie man einen der grundlegendsten Bausteine von JavaScript verwendet – Variablen.</dd>
+ <dt><a href="/de/docs/Learn/JavaScript/First_steps/Math">Einfache Mathematik in JavaScript – Zahlen und Operatoren</a></dt>
+ <dd>An dieser Stelle im Kurs erörtern wir Mathematik in JavaScript – wie wir Operatoren und andere Features verwenden können, um Zahlen erfolgreich dazu zu bringen, zu tun, was wir wollen.</dd>
+ <dt><a href="/de/docs/Learn/JavaScript/First_steps/Strings">Text verarbeiten – Zeichenketten in JavaScript</a></dt>
+ <dd>Als Nächstes richten wir unsere Aufmerksamkeit auf Zeichenketten – so nennt man Textschnippsel in der Programmierung. In diesem Artikel werden wir uns häufig benötigtes Wissen zu Zeichenketten ansehen, etwa wie man sie erstellt, wie man Anführungszeichen in Zeichenketten maskiert und wie man Zeichenketten aneinanderhängt.</dd>
+ <dt><a href="/de/docs/Learn/JavaScript/First_steps/Useful_string_methods">Nützliche Zeichenketten-Methoden</a></dt>
+ <dd>Nachdem wir uns jetzt die Grundlagen von Zeichenketten angeeignet haben, schalten wir einen Gang hoch und überlegen uns, welche nützlichen Operationen wir mit den eingebauten Methoden auf Zeichenketten ausführen können: die Länge einer Zeichenkette festellen, Zeichenketten verknüpfen und aufteilen, ein Zeichen in einer Zeichenkette durch ein anderes ersetzen, und weitere.</dd>
+ <dt><a href="/de/docs/Learn/JavaScript/First_steps/Arrays">Felder</a></dt>
+ <dd>Im letzten Artikel dieses Lernmoduls betrachten wir Felder – ein sauberer Weg, um eine Liste von Datenelementen unter einem einzigen Variablennamen abzulegen. Wir schauen uns an, warum das nützlich ist, und erforschen dann, wie man ein Feld anlegt, Elemente, die darin gespeichert sind, abruft, hinzufügt und entfernt, und vieles mehr.</dd>
+</dl>
+
+<h2 id="Aufgaben">Aufgaben</h2>
+
+<p>Die folgenden Aufgaben werden Ihr Verständnis der JavaScript-Grundlagen aus den vorherigen Anleitungen überprüfen.</p>
+
+<dl>
+ <dt><a href="/de/docs/Learn/JavaScript/First_steps/Silly_story_generator">Lustige Geschichten erzeugen</a></dt>
+ <dd>In dieser Aufgabe sollen Sie einen Teil des Wissens, das Sie erworben haben, einsetzen, um eine spaßige Anwendung zu entwickeln, die zufällige, lustige Geschichten erzeugt. Viel Spaß!</dd>
+</dl>
diff --git a/files/de/learn/javascript/first_steps/lustige_geschichten_generator/index.html b/files/de/learn/javascript/first_steps/lustige_geschichten_generator/index.html
new file mode 100644
index 0000000000..1703f9b6a7
--- /dev/null
+++ b/files/de/learn/javascript/first_steps/lustige_geschichten_generator/index.html
@@ -0,0 +1,139 @@
+---
+title: Der Lustige Geschichten Generator
+slug: Learn/JavaScript/First_steps/lustige_geschichten_generator
+translation_of: Learn/JavaScript/First_steps/Silly_story_generator
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">In dieser Prüfung ist es deine Aufgabe das von dir in den vorherigen Artikeln gesammelten Wissen anzuwenden, indem due eine lustige Applikation schreibst, mit der man lustige Geschichten erzeugen kann. Viel Spass mit dem Lustige Geschichten Generator !</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Vorraussetzungen:</th>
+   <td>Bevor du dich an dieser Aufgabe versuchst, solltest du alle anderen Artikel dieses Moduls gelesen und bearbeitet haben.</td>
+  </tr>
+  <tr>
+   <th scope="row">Ziel:</th>
+   <td>Verständnis von fundamentalen JavaScript Kenntnissen, wie Variablen, Operatoren und einfachen Datentypen (Zahlen, Zeichenketten, Arrays)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Start">Start</h2>
+
+<p>Um mit deiner Aufgabe zu beginnen, solltest du::</p>
+
+<ul>
+ <li>Öffne <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/index.html">die HTML-Vorlage</a> und speichere eine lokale Kopie davon auf deinem Rechner in einen neuen Ordner als <code>index.html</code>. Die Datei enthält auch einige CSS-Anweisungen für das Styling.</li>
+ <li>Öffne <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/raw-text.txt">die Seite, die die Text-Vorlagen enthält</a> und öffne sie in einem seperaten Browserfenster oder -tab. Die brauchst du später noch.</li>
+</ul>
+
+<div class="note">
+<p><strong>Notiz</strong>: Alternativ kannst du auch eine Seite wie <a href="http://jsbin.com/">JSBin</a> oder <a href="https://glitch.com/">Glitch</a> benutzen, um die Aufgabe zu bearbeiten. Kopiere dazu einfach den Quelltext von HTML, CSS und JavaScript in einen dieser Online-Editoren. Wenn einer dieser Editoren kein extra JavaScript Panel haben sollte, kopiere das JavaScript einfach zwischen <code>&lt;script&gt;-Tags</code> in deinem HTML-Code.</p>
+</div>
+
+<h2 id="Projektbeschreibung">Projektbeschreibung</h2>
+
+<p>Für diese Aufgabe geben wir dir einige HTML/CSS Codestücke, einige Textbausteine und ein paar JavaScript Funktionen in die Hand; du musst die fehlenden JavaScript-Teile ergänzen, um alles zu einem lauffähigen Programm zu kombinieren, was Folgendes tun kann:</p>
+
+<ul>
+ <li>es generiert eine lustige Geschichte, wenn der "Generate random story" button gedrückt wird.</li>
+ <li>es ersetzt den vorgegebenen Namen "Bob" in der Geschichte mit einem individuellen Namen, allerdings nur, wenn eine Eingabe in das "Enter custom name" Text-Feld gemacht worden ist, bevor der Button gedrückt wurde.</li>
+ <li>es konvertiert US-amerikanische Maßeinheiten, wie Gewicht und Temperatur in die englischen Äquivalente, wenn der Radio-Button entsprechend gesetzt wurde, bevor der Button gedrückt wurde.</li>
+ <li>es generiert immer wieder eine neue Variante der Geschichte, wenn der Button erneut gedrückt wird.</li>
+</ul>
+
+<p>Der folgende Screenshot zeigt dir ein Beispiel, wie die Ausgabe deines geschriebenen Programmes aussehen wird:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16178/Screen_Shot_2018-09-19_at_10.01.38_AM.png" style="border-style: solid; border-width: 1px; display: block; height: 404px; margin: 0px auto; width: 500px;"></p>
+
+<p>Um dich noch mehr mit deiner Arbeit vertraut zu machen, <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/assessment-finished/">schau dir die fertige Lösung an</a> (ohne im Quellcode zu spicken! )</p>
+
+<h2 id="Schritt-für-Schritt_Anleitung">Schritt-für-Schritt Anleitung</h2>
+
+<p>In den folgenden Abschnitten wird dir erklärt, was du tun musst.</p>
+
+<p>Grundaufbau:</p>
+
+<ol>
+ <li>Erzeuge eine Datei mit dem Namen <code>main.js</code>, und zwar im selben Verzeichnis, wie deine <code>index.html</code> Datei.</li>
+ <li>Verbinde deine externe JavaScript Datei <code>main.js </code>mit deiner HTML Datei, indem du es mithilfe des Script-tags {{htmlelement("script")}} in deinem HTML aufrufst. Füge die Zeile kurz vor dem schließenden <code>&lt;/body&gt;</code> tag ein.</li>
+</ol>
+
+<p> Vorgegebene Variablen und Functions:</p>
+
+<ol>
+ <li>Kopiere alle Code-Zeilen aus der Roh-Text-Datei, die unter der Überschrift "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" stehen und füge Sie an den Anfang deiner <code>main.js</code> Datei. Im Code wirst du 3 Variablen entdecken, die sich auf verschiedene Teile der Ausgabe beziehen: (<code>customName</code>) bezieht sich auf das "Enter custom name" Text Feld , the "Generate random story" button (<code>randomize</code>), and the {{htmlelement("p")}} element at the bottom of the HTML body that the story will be copied into (<code>story</code>), respectively. In addition you've got a function called <code>randomValueFromArray()</code> that takes an array, and returns one of the items stored inside the array at random.</li>
+ <li>Now look at the second section of the raw text file — "2. RAW TEXT STRINGS". This contains text strings that will act as input into our program. We'd like you to contain these inside variables inside <code>main.js</code>:
+  <ol>
+   <li>Store the first, big long, string of text inside a variable called <code>storyText</code>.</li>
+   <li>Store the first set of three strings inside an array called <code>insertX</code>.</li>
+   <li>Store the second set of three strings inside an array called <code>insertY</code>.</li>
+   <li>Store the third set of three strings inside an array called <code>insertZ</code>.</li>
+  </ol>
+ </li>
+</ol>
+
+<p>Placing the event handler and incomplete function:</p>
+
+<ol>
+ <li>Now return to the raw text file.</li>
+ <li>Copy the code found underneath the heading "3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" and paste it into the bottom of your <code>main.js</code> file. This:
+  <ul>
+   <li>Adds a click event listener to the <code>randomize</code> variable so that when the button it represents is clicked, the <code>result()</code> function is run.</li>
+   <li>Adds a partially-completed <code>result()</code> function definiton to your code. For the remainder of the assessment, you'll be filling in lines inside this function to complete it and make it work properly.</li>
+  </ul>
+ </li>
+</ol>
+
+<p>Completing the <code>result()</code> function:</p>
+
+<ol>
+ <li>Create a new variable called <code>newStory</code>, and set it's value to equal <code>storyText</code>. This is needed so we can create a new random story each time the button is pressed and the function is run. If we made changes directly to <code>storyText</code>, we'd only be able to generate a new story once.</li>
+ <li>Create three new variables called <code>xItem</code>, <code>yItem</code>, and <code>zItem</code>, and make them equal to the result of calling <code>randomValueFromArray()</code> on your three arrays (the result in each case will be a random item out of each array it is called on). For example you can call the function and get it to return one random string out of <code>insertX</code> by writing <code>randomValueFromArray(insertX)</code>.</li>
+ <li>Next we want to replace the three placeholders in the <code>newStory</code> string — <code>:insertx:</code>, <code>:inserty:</code>, and <code>:insertz:</code> — with the strings stored in <code>xItem</code>, <code>yItem</code>, and <code>zItem</code>. There is a particular string method that will help you here — in each case, make the call to the method equal to <code>newStory</code>, so each time it is called, <code>newStory</code> is made equal to itself, but with substitutions made. So each time the button is pressed, these placeholders are each replaced with a random silly string. As a further hint, the method in question only replaces the first instance of the substring it finds, so you might need to make one of the calls twice.</li>
+ <li>Inside the first <code>if</code> block, add another string replacement method call to replace the name 'Bob' found in the <code>newStory</code> string with the <code>name</code> variable. In this block we are saying "If a value has been entered into the <code>customName</code> text input, replace Bob in the story with that custom name."</li>
+ <li>Inside the second <code>if</code> block, we are checking to see if the <code>uk</code> radio button has been selected. If so, we want to convert the weight and temperature values in the story from pounds and Fahrenheit into stones and centigrade. What you need to do is as follows:
+  <ol>
+   <li>Look up the formulae for converting pounds to stone, and Fahrenheit to centigrade.</li>
+   <li>Inside the line that defines the <code>weight</code> variable, replace 300 with a calculation that converts 300 pounds into stones. Concatenate <code>' stone'</code> onto the end of the result of the overall <code>Math.round()</code> call.</li>
+   <li>Inside the line that defines the <code>temperature</code> variable, replace 94 with a calculation that converts 94 Fahrenheit into centigrade. Concatenate <code>' centigrade'</code> onto the end of the result of the overall <code>Math.round()</code> call.</li>
+   <li>Just under the two variable definitions, add two more string replacement lines that replace '94 fahrenheit' with the contents of the <code>temperature</code> variable, and '300 pounds' with the contents of the <code>weight</code> variable.</li>
+  </ol>
+ </li>
+ <li>Finally, in the second-to-last line of the function, make the <code>textContent</code> property of the <code>story</code> variable (which references the paragraph) equal to <code>newStory</code>.</li>
+</ol>
+
+<h2 id="Hints_and_tips">Hints and tips</h2>
+
+<ul>
+ <li>You don't need to edit the HTML in any way, except to apply the JavaScript to your HTML.</li>
+ <li>If you are unsure whether the JavaScript is applied to your HTML properly, try removing everything else from the JavaScript file temporarily, adding in a simple bit of JavaScript that you know will create an obvious effect, then saving and refreshing. The following for example turns the background of the {{htmlelement("html")}} element red — so the entire browser window should go red if the JavaScript is applied properly:
+  <pre class="brush: js">document.querySelector('html').style.backgroundColor = 'red';</pre>
+ </li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round">Math.round()</a></code> is a built-in JavaScript method that simply rounds the result of a calculation to the nearest whole number.</li>
+ <li>There are three instances of strings that need to be replaced. You may repeat the <code>replace()</code> method multiple times, or you can use regular expressions. For instance, <code>let text = 'I am the biggest lover, I love my love'; text.replace(/love/g,'like');</code> will replace all instances of 'love' to 'like'. Remember, Strings are immutable!</li>
+</ul>
+
+<h2 id="Assessment">Assessment</h2>
+
+<p>If you are following this assessment as part of an organized course, you should be able to give your work to your teacher/mentor for marking. If you are self-learning, then you can get the marking guide fairly easily by asking on the <a href="https://discourse.mozilla.org/t/silly-story-generator-assessment/24686">discussion thread for this exercise</a>, or in the <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC channel on <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Try the exercise first — there is nothing to be gained by cheating!</p>
+
+<p>{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li>
+</ul>
diff --git a/files/de/learn/javascript/first_steps/useful_string_methods/index.html b/files/de/learn/javascript/first_steps/useful_string_methods/index.html
new file mode 100644
index 0000000000..e0df907ade
--- /dev/null
+++ b/files/de/learn/javascript/first_steps/useful_string_methods/index.html
@@ -0,0 +1,656 @@
+---
+title: Useful string methods
+slug: Learn/JavaScript/First_steps/Useful_string_methods
+translation_of: Learn/JavaScript/First_steps/Useful_string_methods
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">Jetzt, da wir die Basics kennengelernt haben, gehen wir einen Schritt weiter und sehen uns hilfreiche Methoden an, die wir im Umgang mit Strings anwenden können. Dazu zählt zum Beispiel die Länge eines Textes, hinzufügen oder splitten von Strings, das Austauschen eines Buchstaben in einem Text-String und mehr...</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Voraussetzungen:</th>
+   <td>Grundlegende Computerkenntnisse, ein grundlegendes Verständnis von HTML und CSS, ein Verständnis dafür, was JavaScript ist.</td>
+  </tr>
+  <tr>
+   <th scope="row">Ziel:</th>
+   <td>Zu verstehen, dass Zeichenketten Objekte sind, und zu lernen, wie man einige der grundlegenden Methoden, die auf diesen Objekten verfügbar sind, verwendet, um Zeichenketten zu manipulieren.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Zeichenketten_als_Objekte">Zeichenketten als Objekte</h2>
+
+<p id="Useful_string_methods">Die meisten Dinge in JavaScript sind Objekte. Wenn Sie einen String erstellen, zum Beispiel durch die Verwendung von</p>
+
+<pre class="brush: js">let string = 'This is my string';</pre>
+
+<p>wird Ihre Variable zu einer String-Objektinstanz und hat als Ergebnis eine große Anzahl von Eigenschaften und Methoden zur Verfügung. Sie können dies sehen, wenn Sie auf die {{jsxref("String")}} Objektseite gehen und die Liste auf der Seite nach unten scrollen!</p>
+
+<p><strong>Sooo, <u>bevor</u> Du jetzt Kopfschmerzen bekommst:</strong> Die meisten der Methoden must du jetzt am Anfang noch nicht wirklich kennen. Allerdings gibt es da ein paar, die Du am Anfang und später ziemlich oft nutzen wirst. Werfen wir also einen Blick darauf:</p>
+
+<p>Starten wir mit ein paar Beispielen in der <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer console</a>.</p>
+
+<h3 id="Länge_einer_Zeichenkette">Länge einer Zeichenkette</h3>
+
+<p>Das ist einfach. Nutze einfach {{jsxref("String.prototype.length", "length")}} . Probiere einfach mal folgenden Code:</p>
+
+<pre class="brush: js">let browserType = 'mozilla';
+browserType.length;</pre>
+
+<p>Das sollte Dir eine "7" zurückgeben, denn "mozilla" ist 7 Zeichen lang. Das kann man für verschiedene Dinge nutzen; Zum Beispiel: Du möchtest die Zeichenlänge einer Reihe von Namen herausfinden, um diese in der Reihenfolge ihrer Länge auszugeben. Oder lasse einen Nutzer wissen, das seine gerade getätigte Eingabe des Usernamens viel zu lang ist und nicht den Vorgaben entspricht.</p>
+
+<h3 id="Retrieving_a_specific_string_character">Retrieving a specific string character</h3>
+
+<p>On a related note, you can return any character inside a string by using <strong>square bracket notation</strong> — this means you include square brackets (<code>[]</code>) on the end of your variable name. Inside the square brackets you include the number of the character you want to return, so for example to retrieve the first letter you'd do this:</p>
+
+<pre class="brush: js">browserType[0];</pre>
+
+<p>Remember: computers count from 0, not 1! You could use this to, for example, find the first letter of a series of strings and order them alphabetically.</p>
+
+<p>To retrieve the last character of <em>any</em> string, we could use the following line, combining this technique with the <code>length</code> property we looked at above:</p>
+
+<pre class="brush: js">browserType[browserType.length-1];</pre>
+
+<p>The length of "mozilla" is 7, but because the count starts at 0, the character position is 6; using  <code>length-1</code> gets us the last character.</p>
+
+<h3 id="Finding_a_substring_inside_a_string_and_extracting_it">Finding a substring inside a string and extracting it</h3>
+
+<ol>
+ <li>Sometimes you'll want to find if a smaller string is present inside a larger one (we generally say <em>if a substring is present inside a string</em>). This can be done using the {{jsxref("String.prototype.indexOf()", "indexOf()")}} method, which takes a single {{glossary("parameter")}} — the substring you want to search for. Try this:
+
+  <pre class="brush: js">browserType.indexOf('zilla');</pre>
+  This gives us a result of 2, because the substring "zilla" starts at position 2 (0, 1, 2  — so 3 characters in) inside "mozilla". Such code could be used to filter strings. For example, we may have a list of web addresses and only want to print out the ones that contain "mozilla".</li>
+</ol>
+
+<ol start="2">
+ <li>This can be done in another way, which is possibly even more effective. Try the following:
+  <pre class="brush: js">browserType.indexOf('vanilla');</pre>
+  This should give you a result of <code>-1</code> — this is returned when the substring, in this case 'vanilla', is not found in the main string.<br>
+  <br>
+  You could use this to find all instances of strings that <strong>don't</strong> contain the substring 'mozilla', or <strong>do,</strong> if you use the negation operator, as shown below. You could do something like this:
+
+  <pre class="brush: js">if(browserType.indexOf('mozilla') !== -1) {
+  // do stuff with the string
+}</pre>
+ </li>
+ <li>When you know where a substring starts inside a string, and you know at which character you want it to end, {{jsxref("String.prototype.slice()", "slice()")}} can be used to extract it. Try the following:
+  <pre class="brush: js">browserType.slice(0,3);</pre>
+  This returns "moz" — the first parameter is the character position to start extracting at, and the second parameter is the character position after the last one to be extracted. So the slice happens from the first position, up to, but not including, the last position. In this example, since the starting index is 0, the second parameter is equal to the length of the string being returned.<br>
+   </li>
+ <li>Also, if you know that you want to extract all of the remaining characters in a string after a certain character, you don't have to include the second parameter! Instead, you only need to include the character position from where you want to extract the remaining characters in a string. Try the following:
+  <pre class="brush: js">browserType.slice(2);</pre>
+  This returns "zilla" — this is because the character position of 2 is the letter z, and because you didn't include a second parameter, the substring that was returned was all of the remaining characters in the string. </li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: The second parameter of <code>slice()</code> is optional: if you don't include it, the slice ends at the end of the original string. There are other options too; study the {{jsxref("String.prototype.slice()", "slice()")}} page to see what else you can find out.</p>
+</div>
+
+<h3 id="Changing_case">Changing case</h3>
+
+<p>The string methods {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}} and {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}} take a string and convert all the characters to lower- or uppercase, respectively. This can be useful for example if you want to normalize all user-entered data before storing it in a database.</p>
+
+<p>Let's try entering the following lines to see what happens:</p>
+
+<pre class="brush: js">let radData = 'My NaMe Is MuD';
+radData.toLowerCase();
+radData.toUpperCase();</pre>
+
+<h3 id="Updating_parts_of_a_string">Updating parts of a string</h3>
+
+<p>You can replace one substring inside a string with another substring using the {{jsxref("String.prototype.replace()", "replace()")}} method. This works very simply at a basic level, although there are some advanced things you can do with it that we won't go into yet.</p>
+
+<p>It takes two parameters — the string you want to replace, and the string you want to replace it with. Try this example:</p>
+
+<pre class="brush: js">browserType.replace('moz','van');</pre>
+
+<p>This returns "vanilla" in the console. But if you check the value of <code>browserType</code>, it is still "mozilla'. To actually update the value of the <code>browserType</code> variable in a real program, you'd have to set the variable value to be the result of the operation; it doesn't just update the substring value automatically. So you'd have to actually write this: <code>browserType = browserType.replace('moz','van');</code></p>
+
+<h2 id="Active_learning_examples">Active learning examples</h2>
+
+<p>In this section we'll get you to try your hand at writing some string manipulation code. In each exercise below, we have an array of strings, and a loop that processes each value in the array and displays it in a bulleted list. You don't need to understand arrays or loops right now — these will be explained in future articles. All you need to do in each case is write the code that will output the strings in the format that we want them in.</p>
+
+<p>Each example comes with a "Reset" button, which you can use to reset the code if you make a mistake and can't get it working again, and a "Show solution" button you can press to see a potential answer if you get really stuck.</p>
+
+<h3 id="Filtering_greeting_messages">Filtering greeting messages</h3>
+
+<p>In the first exercise we'll start you off simple — we have an array of greeting card messages, but we want to sort them to list just the Christmas messages. We want you to fill in a conditional test inside the <code>if( ... )</code> structure, to test each string and only print it in the list if it is a Christmas message.</p>
+
+<ol>
+ <li>First think about how you could test whether the message in each case is a Christmas message. What string is present in all of those messages, and what method could you use to test whether it is present?</li>
+ <li>You'll then need to write a conditional test of the form <em>operand1 operator operand2</em>. Is the thing on the left equal to the thing on the right? Or in this case, does the method call on the left return the result on the right?</li>
+ <li>Hint: In this case it is probably more useful to test whether the method call <em>isn't</em> equal to a certain result.</li>
+</ol>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 125px;"&gt;
+
+&lt;ul&gt;
+
+&lt;/ul&gt;
+
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="playable-code" style="height: 290px; width: 95%"&gt;
+const list = document.querySelector('.output ul');
+list.innerHTML = '';
+let greetings = ['Happy Birthday!',
+                 'Merry Christmas my love',
+                 'A happy Christmas to all the family',
+                 'You\'re all I want for Christmas',
+                 'Get well soon'];
+
+for (let i = 0; i &lt; greetings.length; i++) {
+  let input = greetings[i];
+  // Your conditional test needs to go inside the parentheses
+  // in the line below, replacing what's currently there
+  if (greetings[i]) {
+    let listItem = document.createElement('li');
+    listItem.textContent = input;
+    list.appendChild(listItem);
+  }
+}
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js">const textarea = document.getElementById('code');
+const reset = document.getElementById('reset');
+const solution = document.getElementById('solution');
+let code = textarea.value;
+let userEntry = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = jsSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+const jsSolution = 'const list = document.querySelector(\'.output ul\');' +
+'\nlist.innerHTML = \'\';' +
+'\nlet greetings = [\'Happy Birthday!\',' +
+'\n                 \'Merry Christmas my love\',' +
+'\n                 \'A happy Christmas to all the family\',' +
+'\n                 \'You\\\'re all I want for Christmas\',' +
+'\n                 \'Get well soon\'];' +
+'\n' +
+'\nfor (let i = 0; i &lt; greetings.length; i++) {' +
+'\n  let input = greetings[i];' +
+'\n  if (greetings[i].indexOf(\'Christmas\') !== -1) {' +
+'\n    let result = input;' +
+'\n    let listItem = document.createElement(\'li\');' +
+'\n    listItem.textContent = result;' +
+'\n    list.appendChild(listItem);' +
+'\n  }' +
+'\n}';
+
+let solutionEntry = jsSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  const scrollPos = textarea.scrollTop;
+  const caretPos = textarea.selectionStart;
+  const front = (textarea.value).substring(0, caretPos);
+  const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', '100%', 590, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Fixing_capitalization">Fixing capitalization</h3>
+
+<p>In this exercise we have the names of cities in the United Kingdom, but the capitalization is all messed up. We want you to change them so that they are all lower case, except for a capital first letter. A good way to do this is to:</p>
+
+<ol>
+ <li>Convert the whole of the string contained in the <code>input</code> variable to lower case and store it in a new variable.</li>
+ <li>Grab the first letter of the string in this new variable and store it in another variable.</li>
+ <li>Using this latest variable as a substring, replace the first letter of the lowercase string with the first letter of the lowercase string changed to upper case. Store the result of this replace procedure in another new variable.</li>
+ <li>Change the value of the <code>result</code> variable to equal to the final result, not the <code>input</code>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: A hint — the parameters of the string methods don't have to be string literals; they can also be variables, or even variables with a method being invoked on them.</p>
+</div>
+
+<div class="hidden">
+<h6 id="Playable_code_2">Playable code 2</h6>
+
+<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 125px;"&gt;
+
+&lt;ul&gt;
+
+&lt;/ul&gt;
+
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="playable-code" style="height: 250px; width: 95%"&gt;
+const list = document.querySelector('.output ul');
+list.innerHTML = '';
+let cities = ['lonDon', 'ManCHESTer', 'BiRmiNGHAM', 'liVERpoOL'];
+
+for (let i = 0; i &lt; cities.length; i++) {
+  let input = cities[i];
+  // write your code just below here
+
+  let result = input;
+  let listItem = document.createElement('li');
+  listItem.textContent = result;
+  list.appendChild(listItem);
+}
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js">const textarea = document.getElementById('code');
+const reset = document.getElementById('reset');
+const solution = document.getElementById('solution');
+let code = textarea.value;
+let userEntry = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = jsSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+const jsSolution = 'const list = document.querySelector(\'.output ul\');' +
+'\nlist.innerHTML = \'\';' +
+'\nlet cities = [\'lonDon\', \'ManCHESTer\', \'BiRmiNGHAM\', \'liVERpoOL\'];' +
+'\n' +
+'\nfor (let i = 0; i &lt; cities.length; i++) {' +
+'\n  let input = cities[i];' +
+'\n  let lower = input.toLowerCase();' +
+'\n  let firstLetter = lower.slice(0,1);' +
+'\n  let capitalized = lower.replace(firstLetter,firstLetter.toUpperCase());' +
+'\n  let result = capitalized;' +
+'\n  let listItem = document.createElement(\'li\');' +
+'\n  listItem.textContent = result;' +
+'\n  list.appendChild(listItem);' +
+'\n' +
+'\n}';
+
+let solutionEntry = jsSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  const scrollPos = textarea.scrollTop;
+  const caretPos = textarea.selectionStart;
+  const front = (textarea.value).substring(0, caretPos);
+  const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', '100%', 550, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Making_new_strings_from_old_parts">Making new strings from old parts</h3>
+
+<p>In this last exercise, the array contains a bunch of strings containing information about train stations in the North of England. The strings are data items that contain the three-letter station code, followed by some machine-readable data, followed by a semicolon, followed by the human-readable station name. For example:</p>
+
+<pre>MAN675847583748sjt567654;Manchester Piccadilly</pre>
+
+<p>We want to extract the station code and name, and put them together in a string with the following structure:</p>
+
+<pre>MAN: Manchester Piccadilly</pre>
+
+<p>We'd recommend doing it like this:</p>
+
+<ol>
+ <li>Extract the three-letter station code and store it in a new variable.</li>
+ <li>Find the character index number of the semicolon.</li>
+ <li>Extract the human-readable station name using the semicolon character index number as a reference point, and store it in a new variable.</li>
+ <li>Concatenate the two new variables and a string literal to make the final string.</li>
+ <li>Change the value of the <code>result</code> variable to equal to the final string, not the <code>input</code>.</li>
+</ol>
+
+<div class="hidden">
+<h6 id="Playable_code_3">Playable code 3</h6>
+
+<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 125px;"&gt;
+
+&lt;ul&gt;
+
+&lt;/ul&gt;
+
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="playable-code" style="height: 285px; width: 95%"&gt;
+const list = document.querySelector('.output ul');
+list.innerHTML = '';
+let stations = ['MAN675847583748sjt567654;Manchester Piccadilly',
+                'GNF576746573fhdg4737dh4;Greenfield',
+                'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street',
+                'SYB4f65hf75f736463;Stalybridge',
+                'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield'];
+
+for (let i = 0; i &lt; stations.length; i++) {
+  let input = stations[i];
+  // write your code just below here
+
+  let result = input;
+  let listItem = document.createElement('li');
+  listItem.textContent = result;
+  list.appendChild(listItem);
+}
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}
+</pre>
+
+<pre class="brush: js">const textarea = document.getElementById('code');
+const reset = document.getElementById('reset');
+const solution = document.getElementById('solution');
+let code = textarea.value;
+let userEntry = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = jsSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+const jsSolution = 'const list = document.querySelector(\'.output ul\');' +
+'\nlist.innerHTML = \'\';' +
+'\nlet stations = [\'MAN675847583748sjt567654;Manchester Piccadilly\',' +
+'\n                \'GNF576746573fhdg4737dh4;Greenfield\',' +
+'\n                \'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street\',' +
+'\n                \'SYB4f65hf75f736463;Stalybridge\',' +
+'\n                \'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield\'];' +
+'\n' +
+'\nfor (let i = 0; i &lt; stations.length; i++) {' +
+'\n  let input = stations[i];' +
+'\n  let code = input.slice(0,3);' +
+'\n  let semiC = input.indexOf(\';\');' +
+'\n  let name = input.slice(semiC + 1);' +
+'\n  let result = code + \': \' + name;' +
+'\n  let listItem = document.createElement(\'li\');' +
+'\n  listItem.textContent = result;' +
+'\n  list.appendChild(listItem);' +
+'\n}';
+
+let solutionEntry = jsSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  const scrollPos = textarea.scrollTop;
+  const caretPos = textarea.selectionStart;
+  const front = (textarea.value).substring(0, caretPos);
+  const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_3', '100%', 585, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>You can't escape the fact that being able to handle words and sentences in programming is very important — particularly in JavaScript, as websites are all about communicating with people. This article has given you the basics that you need to know about manipulating strings for now. This should serve you well as you go into more complex topics in the future. Next, we're going to look at the last major type of data we need to focus on in the short term — arrays.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li>
+</ul>
diff --git a/files/de/learn/javascript/first_steps/variables/index.html b/files/de/learn/javascript/first_steps/variables/index.html
new file mode 100644
index 0000000000..d8906f7d02
--- /dev/null
+++ b/files/de/learn/javascript/first_steps/variables/index.html
@@ -0,0 +1,386 @@
+---
+title: Speichern der benötigten Informationen — Variablen
+slug: Learn/JavaScript/First_steps/Variables
+translation_of: Learn/JavaScript/First_steps/Variables
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">After reading the last couple of articles you should now know what JavaScript is, what it can do for you, how you use it alongside other web technologies, and what its main features look like from a high level. In this article, we will get down to the real basics, looking at how to work with the most basic building blocks of JavaScript — Variables.</p>
+
+<table class="learn-box">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Basic computer literacy, a basic understanding of HTML and CSS, an understanding of what JavaScript is.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To gain familiarity with the basics of JavaScript variables.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Tools_you_need">Tools you need</h2>
+
+<p>Throughout this article, you'll be asked to type in lines of code to test your understanding of the content. If you are using a desktop browser, the best place to type your sample code is your browser's JavaScript console (see <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools</a> for more information on how to access this tool).</p>
+
+<p>However, we have also provided a simple JavaScript console embedded in the page below for you to enter this code into, in case you are not using a browser with a JavaScript console easily available, or find an in-page console more comfortable.</p>
+
+<h2 id="Was_ist_eine_Variable">Was ist eine Variable?</h2>
+
+<p>Eine Variable ist ein Behälter für einen Wert, wie z.B. eine Zahl, welche wir vielleicht für eine Summe benötigen, oder eine Zeichenkette die wir für einen Teil eines Satzes brauchen. Eine Besonderheit von Variablen ist, dass ihr Wert verändert werden kann. Hier ein Beispiel:</p>
+
+<pre class="brush: html">&lt;button&gt;Press me&lt;/button&gt;</pre>
+
+<pre class="brush: js">var button = document.querySelector('button');
+
+button.onclick = function() {
+  var name = prompt('Wie heißt du?');
+  alert('Hallo ' + name + ', schön dich zu sehen!');
+}</pre>
+
+<p>{{ EmbedLiveSample('What_is_a_variable', '100%', 50, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>In diesem Beispiel werden beim Drücken des Buttons einige Zeilen Code ausgeführt. Die erste Zeile zeigt eine Box an, welche den Leser nach seinem Namen fragt und den Wert anschließend in einer Variable abspeichert. Die zweite Zeile zeigt eine Willkommensnachricht, die den Namen enthält, welcher dem Wert der Variable entnommen wird.</p>
+
+<p>Um zu verstehen, warum das so nützlich ist, überlegen wir mal, wie wir das Beispiel ohne eine Variable schreiben würden. Es würde etwa so aussehen:</p>
+
+<pre class="example-bad">var name = prompt('Wie heißt du?');
+
+if (name === 'Adam') {
+  alert('Hallo Adam, schön dich zu sehen!');
+} else if (name === 'Alan') {
+  alert('Hallo Alan, schön dich zu sehen!');
+} else if (name === 'Bella') {
+  alert('Hallo Bella, schön dich zu sehen!');
+} else if (name === 'Bianca') {
+  alert('Hallo Bianca, schön dich zu sehen!');
+} else if (name === 'Chris') {
+  alert('Hallo Chris, schön dich zu sehen!');
+}
+
+// ... und so weiter ...</pre>
+
+<p>You may not fully understand the syntax we are using (yet!), but you should be able to get the idea — if we didn't have variables available, we'd have to implement a giant code block that checked what the entered name was, and then display the appropriate message for that name. This is obviously really inefficient (the code is a lot bigger, even for only five choices), and it just wouldn't work — you couldn't possibly store all possible choices.</p>
+
+<p>Variables just make sense, and as you learn more about JavaScript they will start to become second nature.</p>
+
+<p>Another special thing about variables is that they can contain just about anything — not just strings and numbers. Variables can also contain complex data and even entire functions to do amazing things. You'll learn more about this as you go along.</p>
+
+<p><u><strong>Note that we say variables contain values. This is an important distinction to make. Variables aren't the values themselves; they are containers for values. You can think of them being like little cardboard boxes that you can store things in.</strong></u></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13506/boxes.png" style="display: block; height: 436px; margin: 0px auto; width: 1052px;"></p>
+
+<h2 id="Eine_Variable_deklarieren">Eine Variable deklarieren</h2>
+
+<p>To use a variable you've first got to create it — more accurately, we call this declaring the variable. To do this, we type the keyword var followed by the name you want to call your variable:</p>
+
+<pre class="brush: js">var myName;
+var myAge;</pre>
+
+<p>Here we're creating two variables called <code>myName</code> and <code>myAge</code>. Try typing these lines in now in your web browser's console, or in the below console (You can <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html">open this console</a> in a separate tab or window if you'd prefer that). After that, try creating a variable (or two) with your own name choices.</p>
+
+<div class="hidden">
+<h6 id="Hidden_code">Hidden code</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;JavaScript console&lt;/title&gt;
+    &lt;style&gt;
+      * {
+        box-sizing: border-box;
+      }
+
+      html {
+        background-color: #0C323D;
+        color: #809089;
+        font-family: monospace;
+      }
+
+      body {
+        max-width: 700px;
+      }
+
+      p {
+        margin: 0;
+        width: 1%;
+        padding: 0 1%;
+        font-size: 16px;
+        line-height: 1.5;
+        float: left;
+      }
+
+      .input p {
+        margin-right: 1%;
+      }
+
+      .output p {
+        width: 100%;
+      }
+
+      .input input {
+        width: 96%;
+        float: left;
+        border: none;
+        font-size: 16px;
+        line-height: 1.5;
+        font-family: monospace;
+        padding: 0;
+        background: #0C323D;
+        color: #809089;
+      }
+
+      div {
+        clear: both;
+      }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+
+  &lt;/body&gt;
+
+  &lt;script&gt;
+    var geval = eval;
+    function createInput() {
+      var inputDiv = document.createElement('div');
+      var inputPara = document.createElement('p');
+      var inputForm = document.createElement('input');
+
+      inputDiv.setAttribute('class','input');
+      inputPara.textContent = '&gt;';
+      inputDiv.appendChild(inputPara);
+      inputDiv.appendChild(inputForm);
+      document.body.appendChild(inputDiv);
+
+      if(document.querySelectorAll('div').length &gt; 1) {
+        inputForm.focus();
+      }
+
+      inputForm.addEventListener('change', executeCode);
+    }
+
+    function executeCode(e) {
+      try {
+        var result = geval(e.target.value);
+      } catch(e) {
+        var result = 'error — ' + e.message;
+      }
+
+      var outputDiv = document.createElement('div');
+      var outputPara = document.createElement('p');
+
+      outputDiv.setAttribute('class','output');
+      outputPara.textContent = 'Result: ' + result;
+      outputDiv.appendChild(outputPara);
+      document.body.appendChild(outputDiv);
+
+      e.target.disabled = true;
+      e.target.parentNode.style.opacity = '0.5';
+
+      createInput()
+    }
+
+    createInput();
+
+  &lt;/script&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code', '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<div class="note">
+<p><strong>Note</strong>: In JavaScript, all code instructions should end with a semi-colon (<code>;</code>) — your code may work correctly for single lines, but probably won't when you are writing multiple lines of code together. Try to get into the habit of including it.</p>
+</div>
+
+<p>You can test whether these values now exist in the execution environment by typing just the variable's name, e.g.</p>
+
+<pre class="brush: js">myName;
+myAge;</pre>
+
+<p>They currently have no value; they are empty containers. When you enter the variable names, you should get a value of <code>undefined</code> returned. If they don't exist, you'll get an error message — try typing in</p>
+
+<pre class="brush: js">scoobyDoo;</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Don't confuse a variable that exists but has no value defined with a variable that doesn't exist at all — they are very different things. In the box analogy you saw above, not existing would mean there's no box (variable) for a value to go in. No value defined would mean that there IS a box, but it has no value inside it.</p>
+</div>
+
+<h2 id="Eine_Variable_initialisieren">Eine Variable initialisieren</h2>
+
+<p>Once you've declared a variable, you can initialize it with a value. You do this by typing the variable name, followed by an equals sign (<code>=</code>), followed by the value you want to give it. For example:</p>
+
+<pre class="brush: js">myName = 'Chris';
+myAge = 37;</pre>
+
+<p>Try going back to the console now and typing in these lines. You should see the value you've assigned to the variable returned in the console to confirm it, in each case. Again, you can return your variable values by simply typing their name into the console — try these again:</p>
+
+<pre class="brush: js">myName;
+myAge;</pre>
+
+<p>You can declare and initialize a variable at the same time, like this:</p>
+
+<pre class="brush: js">var myName = 'Chris';</pre>
+
+<p>This is probably what you'll do most of the time, as it is quicker than doing the two actions on two separate lines.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you write a multiline JavaScript program that declares and initializes a variable, you can actually declare it after you initialize it and it will still work. This is because variable declarations are generally done first before the rest of the code is executed. This is called <strong>hoisting</strong> — read <a href="/en-US/docs/Web/JavaScript/Reference/Statements/var#var_hoisting">var hoisting</a> for more detail on the subject.</p>
+</div>
+
+<h2 id="Eine_Variable_aktualisieren">Eine Variable aktualisieren</h2>
+
+<p>Once a variable has been initialized with a value, you can change (or update) that value by simply giving it a different value. Try entering the following lines into your console:</p>
+
+<pre class="brush: js">myName = 'Bob';
+myAge = 40;</pre>
+
+<h3 id="An_aside_on_variable_naming_rules">An aside on variable naming rules</h3>
+
+<p>You can call a variable pretty much anything you like, but there are limitations. Generally, you should stick to just using Latin characters (0-9, a-z, A-Z) and the underscore character.</p>
+
+<ul>
+ <li>You shouldn't use other characters because they may cause errors or be hard to understand for an international audience.</li>
+ <li>Don't use underscores at the start of variable names — this is used in certain JavaScript constructs to mean specific things, so may get confusing.</li>
+ <li>Don't use numbers at the start of variables. This isn't allowed and will cause an error.</li>
+ <li>A safe convention to stick to is so-called <a href="https://en.wikipedia.org/wiki/CamelCase#Variations_and_synonyms">"lower camel case"</a>, where you stick together multiple words, using lower case for the whole first word and then capitalize subsequent words. We've been using this for our variable names in the article so far.</li>
+ <li>Make variable names intuitive, so they describe the data they contain. Don't just use single letters/numbers, or big long phrases.</li>
+ <li>Variables are case sensitive — so <code>myage</code> is a different variable to <code>myAge</code>.</li>
+ <li>One last point — you also need to avoid using JavaScript reserved words as your variable names — by this, we mean the words that make up the actual syntax of JavaScript! So you can't use words like <code>var</code>, <code>function</code>, <code>let</code>, and <code>for</code> as variable names. Browsers will recognize them as different code items, and so you'll get errors.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: You can find a fairly complete list of reserved keywords to avoid at <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords">Lexical grammar — keywords</a>.</p>
+</div>
+
+<p>Good name examples:</p>
+
+<pre class="example-good">age
+myAge
+init
+initialColor
+finalOutputValue
+audio1
+audio2</pre>
+
+<p>Bad name examples:</p>
+
+<pre class="example-bad">1
+a
+_12
+myage
+MYAGE
+var
+Document
+skjfndskjfnbdskjfb
+thisisareallylongstupidvariablenameman</pre>
+
+<p>Error-prone name examples:</p>
+
+<pre class="example-invalid">var
+Document
+</pre>
+
+<p>Try creating a few more variables now, with the above guidance in mind.</p>
+
+<h2 id="Typen_von_Variablen">Typen von Variablen</h2>
+
+<p>There are a few different types of data we can store in variables. In this section we'll describe these in brief, then in future articles, you'll learn about them in more detail.</p>
+
+<p>So far we've looked at the first two, but there are others.</p>
+
+<h3 id="Numbers">Numbers</h3>
+
+<p>You can store numbers in variables, either whole numbers like 30 (also called integers) or decimal numbers like 2.456 (also called floats or floating point numbers). You don't need to declare variable types in JavaScript, unlike some other programming languages. When you give a variable a number value, you don't include quotes:</p>
+
+<pre class="brush: js">var myAge = 17;</pre>
+
+<h3 id="Strings">Strings</h3>
+
+<p>Strings are pieces of text. When you give a variable a string value, you need to wrap it in single or double quote marks, otherwise, JavaScript will try to interpret it as another variable name.</p>
+
+<pre class="brush: js">var dolphinGoodbye = 'So long and thanks for all the fish';</pre>
+
+<h3 id="Booleans">Booleans</h3>
+
+<p>Booleans are true/false values — they can have two values, <code>true</code> or <code>false</code>. These are generally used to test a condition, after which code is run as appropriate. So for example, a simple case would be:</p>
+
+<pre class="brush: js">var iAmAlive = true;</pre>
+
+<p>Whereas in reality it would be used more like this:</p>
+
+<pre class="brush: js">var test = 6 &lt; 3;</pre>
+
+<p>This is using the "less than" operator (<code>&lt;</code>) to test whether 6 is less than 3. As you might expect, it will return <code>false</code>, because 6 is not less than 3! You will learn a lot more about such operators later on in the course.</p>
+
+<h3 id="Arrays">Arrays</h3>
+
+<p>An array is a single object that contains multiple values enclosed in square brackets and separated by commas. Try entering the following lines into your console:</p>
+
+<pre class="brush: js">var myNameArray = ['Chris', 'Bob', 'Jim'];
+var myNumberArray = [10,15,40];</pre>
+
+<p>Once these arrays are defined, you can access each value by their location within the array. Try these lines:</p>
+
+<pre class="brush: js">myNameArray[0]; // should return 'Chris'
+myNumberArray[2]; // should return 40</pre>
+
+<p>The square brackets specify an index value corresponding to the position of the value you want returned. You might have noticed that arrays in JavaScript are zero-indexed: the first element is at index 0.</p>
+
+<p>You'll learn a lot more about arrays in a future article.</p>
+
+<h3 id="Objects">Objects</h3>
+
+<p>In programming, an object is a structure of the code that models a real-life object. You can have a simple object that represents a car park and contains information about its width and length, or you could have an object that represents a person, and contains data about their name, height, weight, what language they speak, how to say hello to them, and more.</p>
+
+<p>Try entering the following line into your console:</p>
+
+<pre class="brush: js">var dog = { name : 'Spot', breed : 'Dalmatian' };</pre>
+
+<p>To retrieve the information stored in the object, you can use the following syntax:</p>
+
+<pre class="brush: js">dog.name</pre>
+
+<p>We won't be looking at objects any more for now — you can learn more about those in a future module.</p>
+
+<h2 id="Dynamic_typing">Dynamic typing</h2>
+
+<p>JavaScript is a "dynamically typed language", which means that, unlike some other languages, you don't need to specify what data type a variable will contain (e.g. numbers, strings, arrays, etc).</p>
+
+<p>For example, if you declare a variable and give it a value encapsulated in quotes, the browser will treat the variable as a string:</p>
+
+<pre class="brush: js">var myString = 'Hello';</pre>
+
+<p>It will still be a string, even if it contains numbers, so be careful:</p>
+
+<pre class="brush: js">var myNumber = '500'; // oops, this is still a string
+typeof myNumber;
+myNumber = 500; // much better — now this is a number
+typeof myNumber;</pre>
+
+<p>Try entering the four lines above into your console one by one, and see what the results are. You'll notice that we are using a special operator called <code>typeof</code> — this returns the data type of the variable you pass into it. The first time it is called, it should return <code>string</code>, as at that point the <code>myNumber</code> variable contains a string, <code>'500'</code>. Have a look and see what it returns the second time you call it.</p>
+
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+
+<p>By now you should know a reasonable amount about JavaScript variables and how to create them. In the next article, we'll focus on numbers in more detail, looking at how to do basic math in JavaScript.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Maths", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">The first splash into JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li>
+</ul>
diff --git a/files/de/learn/javascript/first_steps/was_ist_javascript/index.html b/files/de/learn/javascript/first_steps/was_ist_javascript/index.html
new file mode 100644
index 0000000000..247b4744c5
--- /dev/null
+++ b/files/de/learn/javascript/first_steps/was_ist_javascript/index.html
@@ -0,0 +1,339 @@
+---
+title: Was ist JavaScript?
+slug: Learn/JavaScript/First_steps/Was_ist_JavaScript
+translation_of: Learn/JavaScript/First_steps/What_is_JavaScript
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">Willkommen zum MDN-Einsteigerkurs für JavaScript! Im ersten Artikel werden wir uns JavaScript von aussen anschauen und Fragen beantworten wie "Was ist das?" oder  "Was macht das?", und wir stellen sicher, das du weißt was JavaScript ist.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Voraussetzungen:</th>
+   <td>Umgang mit einem Computer und ein Grundverständniss von HTML und CSS</td>
+  </tr>
+  <tr>
+   <th scope="row">Thema:</th>
+   <td>JavaScript kennenlernen, was JavaScript tun kann und wie es in einer Webseite arbeitet.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Eine_Experten_Definition">Eine Experten Definition</h2>
+
+<p>JavaScript ist eine Programmiersprache mit der sich komplexe Programme in eine Webseite realisieren lassen. Immer wenn eine Webseite mehr macht als nur statische Informationen anzuzeigen, (zum Beispiel:</p>
+
+<ul>
+ <li>Zeitliche Inhalt-Updates ( Liveticker )</li>
+ <li>interaktive Karten ( Google Maps)</li>
+ <li>animierte 2D/3D Grafiken ( Spiele )</li>
+ <li>...)</li>
+</ul>
+
+<p>kannst du dir sicher sein das JavaScript benutzt wurde. Es ist die Dritte der Drei Standard-Technologien im Web, die anderen beiden ( <a href="de/Learn/HTML">HTML </a>und <a href="/de/docs/Learn/CSS">CSS </a>) werden in anderen Bereichen des MDN eingeführt und referenziert.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13502/cake.png" style="display: block; margin: 0 auto;"></p>
+
+<ul>
+ <li>{{glossary("HTML")}} ist die Markup-Language, die wir benutzen, um eine Webseite zu strukturieren und unsere Inhalte darzustellen, zum Beispiel durch Paragraphen, Überschriften, Tabellen aber auch um Bilder und Videos in die Webseite einzubinden.</li>
+ <li>{{glossary("CSS")}} ist die Sprache, um Stil-Regeln für HTML zu definieren, zum Beispiel, indem wir die Hintergrundfarbe und die Schriftart ändern.</li>
+ <li>{{glossary("JavaScript")}} ist eine Progammiersprache, die es erlaubt dynamische Updates der Inhalte, animierte Bilder und noch sehr viel mehr zu realisieren.</li>
+</ul>
+
+<p>Die drei Teile bauen gut auf einander auf. Hier mal ein einfaches Beispiel: Wir können zunächst HTML benutzten, um eine Struktur zu bauen.</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Player 1: Chris&lt;/p&gt;</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13422/just-html.png" style="height: 28px; width: 108px;"></p>
+
+<p>Anschließend können wir mit einigen CSS-Regeln denn Satz schön aussehen lassen:</p>
+
+<pre class="brush: css notranslate">p {
+  font-family: 'helvetica neue', helvetica, sans-serif;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  text-align: center;
+  border: 2px solid rgba(0,0,200,0.6);
+  background: rgba(0,0,200,0.3);
+  color: rgba(0,0,200,0.6);
+  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
+  border-radius: 10px;
+  padding: 3px 10px;
+  display: inline-block;
+  cursor:pointer;
+}</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13424/html-and-css.png" style="height: 48px; width: 187px;"></p>
+
+<p>Und zum Schluss können wir mit etwas JavaScript eine Reaktion auf das Klicken des Benutzers implementieren:</p>
+
+<pre class="brush: js notranslate">var para = document.querySelector('p');
+
+para.addEventListener('click', updateName);
+
+function updateName() {
+  var name = prompt('Enter a new name');
+  para.textContent = 'Player 1: ' + name;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('A_high-level_definition', '100%', 80) }}</p>
+
+<p>Klick auf das Label und sieh, was passiert (den <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/javascript-label.html">Code</a> findest du auf GitHub und hier kannst du es in <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/javascript-label.html">Aktion </a>sehen).</p>
+
+<h2 id="So_und_was_kann_ich_jetzt_damit_machen">So und was kann ich jetzt damit machen?</h2>
+
+<p>Der Kern von JavaScript ähnelt dem anderer Programmiersprachen. In JavaScript kannst du:</p>
+
+<ul>
+ <li>Nützliche Werte in Variablen speichern. Wie im Beispiel als wir eine Variable verwendet haben um den von dir eingebenen Namen zu speichern.</li>
+ <li>Operationen auf Texten ( in der Programmierung "Strings" genannt). Im oberen Beispiel hatten wir den String "Player 1:" und die Variable  <code>name</code> verbunden und (wenn <code>name</code> "Chris" ist) haben wir den Text "Player 1: Chris" bekommen.</li>
+ <li>Mit Code auf Events in einer Webseite reagieren. Wir haben ein {{Event("click")}} Event benutzt um darauf zu reagieren wenn man auf das Label drückt.</li>
+ <li>Und viel mehr. ( siehe jedes größere Webprojekt.)</li>
+</ul>
+
+<p>Aber es gibt noch andere Funktionen die auf dem Kern von JavaScript aufbauen. Die sogenannten <strong>Application Programming Interfaces (APIs) </strong>geben dir noch mehr Funktionen mit denen du deine Projekte aufbessern kann.</p>
+
+<p>APIs sind von anderen Programmieren geschriebener Code die dir mehr Möglichkeiten geben für dein Programm. Die für dich schwer oder unmöglich wären selber zu programmieren. Sie sind das gleiche was Werkzeuge und Material für Handwerker sind. Es wäre deutlich schwerer alleine erst alle Werkzeuge und dann alle Materiallien herzustellen.</p>
+
+<p>Die APIs kann man generell in zwei Kategorien einteilen:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13508/browser.png" style="display: block; height: 511px; margin: 0px auto; width: 815px;"></p>
+
+<p><strong>Browser APIs </strong>sind vom Webbrowser des Benutzers. Und sie können auf Ressourcen des computers zugreifen, oder erledigen Dinge die sehr komlpex sind. Ein paar Beispiele:</p>
+
+<ul>
+ <li>Die {{domxref("Document_Object_Model","DOM (Document Object Model)")}} API</li>
+ <li>Die <a href="https://developer.mozilla.org/en-US/docs/Web/API/Geolocation">Geolocation API</a> ruft geografische Informationen ab. So ist es für <a href="https://www.google.com/maps">Google Maps</a> möglich dein Standort zu ermitteln um es danach z.B. auf einer Karte anzuzeigen.</li>
+ <li>The <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API">Canvas</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API">WebGL</a> APIs ermöglichen es dir, 2D oder 3D animierte Grafiken zu erstellen. Das ermöglicht die Darstellung und den Einsatz von Webtechnologien. Mehr kannst du unter <a href="https://www.chromeexperiments.com/webgl">Chrome Experiments</a> und  <a href="http://webglsamples.org/">webglsamples</a> erfahren.</li>
+ <li><a href="https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery">Audio and Video APIs</a> beispielsweise {{domxref("HTMLMediaElement")}} und <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> ermöglichen es wirklich spannende Dinge multimedial zu erstellen. Beispielsweise können Audio und Video in eine Webseite integriert werden, Ebenso ist es möglich die Webcam aufzunehmen und sie danach wiederzugeben. (Probiere unser einfaches <a href="http://chrisdavidmills.github.io/snapshot/">Snapshot Beispiel</a> um eine Einblick zu bekommen).</li>
+</ul>
+
+<div class="note">
+<p><strong>Notiz: </strong>Viele der oben genannten Beispiele funktionieren in älteren Browsern nicht — wenn du dein Code ausprobieren willst, dann ist es eine gute Idee einen Modernen Browser wie Firefox, Chrome, Edge oder Opera zu benutzen. Es wird trotzdem nötig sein, sich mit <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Cross Browser Testing</a> auseinander zu setzen, wenn es näher an eine Produktionssystem gehen soll(z.B. Echter Code die echte Kunden benutzen sollen).</p>
+</div>
+
+<p><strong>Drittanbieter-APIs</strong>sind nicht standardmäßig im Browser integriert, und du wirst großenteils deren Code und Informationen von wo anders finden müssen. Zum Beispiel</p>
+
+<ul>
+ <li>Die <a href="https://dev.twitter.com/overview/documentation">Twitter API</a>erlaubt es dir Dinge, wie die aktuellsten Tweets auf deiner Webseite anzeigen zu lassen.</li>
+ <li><a href="https://developers.google.com/maps/">Google Maps API</a>erlaubt es dir, eigene Karten auf deiner Webseite anzeigen zu lassen oder andere ähnliche Funktionen zu benutzen</li>
+</ul>
+
+<div class="note">
+<p><strong>Notiz: </strong>Diese APIs sind sehr fortschrittlich und werden in diesem Modul nicht weiter behandelt.Du findest weitere Informationen bei unseren Modul<a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Clientbasierte Web APIs Modul</a>.</p>
+</div>
+
+<p>Es sind noch viele weitere APIs Verfügbar! Trotzdem werde jetzt nicht zu aufgeregt, denn du wirst es nicht schaffen, das nächste Facebook, Google Maps, oder Instagram zu entwickeln, nach gerade mal 24 Stunden JavaScript lernen — es gibt nämlich noch viele Sachen die Behandelt werden müssen. Und deswegen bist du hier — also lass uns weiter machen!</p>
+
+<h2 id="Was_genau_macht_JavaScript_auf_deiner_Webseite">Was genau macht JavaScript auf deiner Webseite?</h2>
+
+<p>Here we'll start actually looking at some code, and while doing so explore what actually happens when you run some JavaScript in your page.</p>
+
+<p>Let's briefly recap the story of what happens when you load a web page in a browser (first talked about in our <a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_does_CSS_actually_work">How CSS works</a> article). When you load a web page in your browser, you are running your code (the HTML, CSS, and JavaScript) inside an execution environment (the browser tab). This is like a factory that takes in raw materials (the code) and outputs a product (the web page).</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13504/execution.png" style="display: block; margin: 0 auto;"></p>
+
+<p>The JavaScript is executed by the browser's JavaScript engine, after the HTML and CSS have been assembled and put together into a web page. This ensures that the structure and style of the page are already in place by the time the JavaScript starts to run.</p>
+
+<p>This is a good thing, as a very common use of JavaScript is to dynamically modify HTML and CSS to update a user interface, via the Document Object Model API (as mentioned above). If the JavaScript loaded and tried to run before the HTML and CSS was there to affect, then errors would occur.</p>
+
+<h3 id="Browser_Sicherheit">Browser Sicherheit</h3>
+
+<p>Each browser tab is its own separate bucket for running code in (these buckets are called "execution environments" in technical terms) — this means that in most cases the code in each tab is run completely separately, and the code in one tab cannot directly affect the code in another tab — or on another website. This is a good security measure — if this were not the case, then pirates could start writing code to steal information from other websites, and other such bad things.</p>
+
+<div class="note">
+<p><strong>Note</strong>: There are ways to send code and data between different websites/tabs in a safe manner, but these are advanced techniques that we won't cover in this course.</p>
+</div>
+
+<h3 id="JavaScript_running_order">JavaScript running order</h3>
+
+<p>When the browser encounters a block of JavaScript, it generally runs it in order, from top to bottom. This means that you need to be careful what order you put things in. For example, let's return to the block of JavaScript we saw in our first example:</p>
+
+<pre class="brush: js notranslate">var para = document.querySelector('p');
+
+para.addEventListener('click', updateName);
+
+function updateName() {
+  var name = prompt('Enter a new name');
+  para.textContent = 'Player 1: ' + name;
+}</pre>
+
+<p>Here we are selecting a text paragraph (line 1), then attaching an event listener to it (line 3) so that when the paragraph is clicked, the <code>updateName()</code> code block (lines 5–8) is run. The <code>updateName()</code> code block (these types of reusable code block are called "functions") asks the user for a new name, and then inserts that name into the paragraph to update the display.</p>
+
+<p>If you swapped the order of the first two lines of code, it would no longer work — instead, you'd get an error returned in the browser developer console — <code>TypeError: para is undefined</code>. This means that the <code>para</code> object does not exist yet, so we can't add an event listener to it.</p>
+
+<div class="note">
+<p><strong>Note</strong>: This is a very common error — you need to be careful that the objects referenced in your code exist before you try to do stuff to them.</p>
+</div>
+
+<h3 id="Interpreted_versus_compiled_code">Interpreted versus compiled code</h3>
+
+<p>You might hear the terms <strong>interpreted</strong> and <strong>compiled</strong> in the context of programming. JavaScript is an interpreted language — the code is run from top to bottom and the result of running the code is immediately returned. You don't have to transform the code into a different form before the browser runs it.</p>
+
+<p>Compiled languages on the other hand are transformed (compiled) into another form before they are run by the computer. For example C/C++ are compiled into assembly language that is then run by the computer.</p>
+
+<p>Both approaches have different advantages, which we won't discuss at this point.</p>
+
+<h3 id="Server-side_versus_client-side_code">Server-side versus client-side code</h3>
+
+<p>You might also hear the terms <strong>server-side</strong> and <strong>client-side</strong> code, specially in the context of web development. Client-side code is code that is run on the user's computer — when a web page is viewed, the page's client-side code is downloaded, then run and displayed by the browser. In this JavaScript module we are explicitly talking about <strong>client-side JavaScript</strong>.</p>
+
+<p>Server-side code on the other hand is run on the server, then its results are downloaded and displayed in the browser. Examples of popular server-side web languages include PHP, Python, Ruby, and ASP.NET. And JavaScript! JavaScript can also be used as a server-side language, for example in the popular Node.js environment — you can find more out about server-side JavaScript in our <a href="/en-US/docs/Learn/Server-side">Dynamic Websites – Server-side programming</a> topic.</p>
+
+<p>The word <strong>dynamic</strong> is used to describe both client-side JavaScript, and server-side languages — it refers to the ability to update the display of a web page/app to show different things in different circumstances, generating new content as required. Server-side code dynamically generates new content on the server, e.g. pulling data from a database, whereas client-side JavaScript dynamically generates new content inside the browser on the client, e.g. creating a new HTML table, inserting data requested from the server into it, then displaying the table in a web page shown to the user. The meaning is slightly different in the two contexts, but related, and both approaches (server-side and client-side) usually work together.</p>
+
+<p>A web page with no dynamically updating content is referred to as <strong>static</strong> — it just shows the same content all the time.</p>
+
+<h2 id="How_do_you_add_JavaScript_to_your_page">How do you add JavaScript to your page?</h2>
+
+<p>JavaScript is applied to your HTML page in a similar manner to CSS. Whereas CSS uses {{htmlelement("link")}} elements to apply external stylesheets and {{htmlelement("style")}} elements to apply internal stylesheets to HTML, JavaScript only needs one friend in the world of HTML — the {{htmlelement("script")}} element. Let's learn how this works.</p>
+
+<h3 id="Internal_JavaScript">Internal JavaScript</h3>
+
+<ol>
+ <li>First of all, make a local copy of our example file <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript.html">apply-javascript.html</a>. Save it in a directory somewhere sensible.</li>
+ <li>Open the file in your web browser and in your text editor. You'll see that the HTML creates a simple web page containing a clickable button.</li>
+ <li>Next, go to your text editor and add the following just before your closing <code>&lt;/body&gt;</code> tag:
+  <pre class="brush: html notranslate">&lt;script&gt;
+
+  // JavaScript goes here
+
+&lt;/script&gt;</pre>
+ </li>
+ <li>Now we'll add some JavaScript inside our {{htmlelement("script")}} element to make the page do something more interesting — add the following code just below the "// JavaScript goes here" line:
+  <pre class="brush: js notranslate">function createParagraph() {
+  var para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}
+
+var buttons = document.querySelectorAll('button');
+
+for (var i = 0; i &lt; buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}</pre>
+ </li>
+ <li>Save your file and refresh the browser — now you should see that when you click the button, a new paragraph is generated and placed below.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: If your example doesn't seem to work, go through the steps again and check that you did everything right. Did you save your local copy of the starting code as a <code>.html</code> file? Did you add your {{htmlelement("script")}} element just before the <code>&lt;/body&gt;</code> tag? Did you enter the JavaScript exactly as shown? <strong>JavaScript is case sensitive, and very fussy, so you need to enter the syntax exactly as shown, otherwise it may not work.</strong></p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: You can see this version on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">apply-javascript-internal.html</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">see it live too</a>).</p>
+</div>
+
+<h3 id="External_JavaScript">External JavaScript</h3>
+
+<p>This works great, but what if we wanted to put our JavaScript in an external file? Let's explore this now.</p>
+
+<ol>
+ <li>First, create a new file in the same directory as your sample HTML file. Call it <code>script.js</code> — make sure it has that .js filename extension, as that's how it is recognized as JavaScript.</li>
+ <li>Next, copy all of the script out of your current {{htmlelement("script")}} element and paste it into the .js file. Save that file.</li>
+ <li>Now replace your current {{htmlelement("script")}} element with the following:
+  <pre class="brush: html notranslate">&lt;script src="script.js"&gt;&lt;/script&gt;</pre>
+ </li>
+ <li>Save and refresh your browser, and you should see the same thing! It works just the same, but now we've got the JavaScript in an external file. This is generally a good thing in terms of organizing your code, and making it reusable across multiple HTML files. Plus the HTML is easier to read without huge chunks of script dumped in it.</li>
+</ol>
+
+<p><strong>Note</strong>: You can see this version on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">apply-javascript-external.html</a> and <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/script.js">script.js</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">see it live too</a>).</p>
+
+<h3 id="Inline_JavaScript_handlers">Inline JavaScript handlers</h3>
+
+<p>Note that sometimes you'll come across bits of actual JavaScript code living inside HTML. It might look something like this:</p>
+
+<pre class="brush: js example-bad notranslate">function createParagraph() {
+  var para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}</pre>
+
+<pre class="brush: html example-bad notranslate">&lt;button onclick="createParagraph()"&gt;Click me!&lt;/button&gt;</pre>
+
+<p>You can try this version of our demo below.</p>
+
+<p>{{ EmbedLiveSample('Inline_JavaScript_handlers', '100%', 150) }}</p>
+
+<p>This demo has exactly the same functionality as in the previous two sections, except that the {{htmlelement("button")}} element includes an inline <code>onclick</code> handler to make the function run when the button is pressed.</p>
+
+<p><strong>Please don't do this, however.</strong> It is bad practice to pollute your HTML with JavaScript, and it is inefficient — you'd have to include the <code>onclick="createParagraph()"</code> attribute on every button you wanted the JavaScript to apply to.</p>
+
+<p>Using a pure JavaScript construct allows you to select all the buttons using one instruction. The code we used above to serve this purpose looks like this:</p>
+
+<pre class="notranslate">var buttons = document.querySelectorAll('button');
+
+for (var i = 0; i &lt; buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}</pre>
+
+<p>This might look a bit longer than the <code>onclick</code> attribute, but this will work for all buttons no matter how many are on the page, and how many are added or removed. The JavaScript does not need to be changed.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Try editing your version of <code>apply-javascript.html</code> and add a few more buttons into the file. When you reload, you should find that all of the buttons when clicked will create a paragraph. Neat, huh?</p>
+</div>
+
+<h2 id="Comments">Comments</h2>
+
+<p>As with HTML and CSS, it is possible to write comments into your JavaScript code that will be ignored by the browser, and exist simply to provide instructions to your fellow developers on how the code works (and you, if you come back to your code after 6 months and can't remember what you did). Comments are very useful, and you should use them often, particularly for larger applications. There are two types:</p>
+
+<ul>
+ <li>A single line comment is written after a double forward slash (//), e.g.
+  <pre class="brush: js notranslate">// I am a comment</pre>
+ </li>
+ <li>A multi-line comment is written between the strings /* and */, e.g.
+  <pre class="brush: js notranslate">/*
+  I am also
+  a comment
+*/</pre>
+ </li>
+</ul>
+
+<p>So for example, we could annotate our last demo's JavaScript with comments like so:</p>
+
+<pre class="brush: js notranslate">// Function: creates a new paragraph and append it to the bottom of the HTML body.
+
+function createParagraph() {
+  var para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}
+
+/*
+  1. Get references to all the buttons on the page and sort them in an array.
+  2. Loop through all the buttons and add a click event listener to each one.
+
+  When any button is pressed, the createParagraph() function will be run.
+*/
+
+var buttons = document.querySelectorAll('button');
+
+for (var i = 0; i &lt; buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}</pre>
+
+<h2 id="Summary">Summary</h2>
+
+<p>So there you go, your first step into the world of JavaScript. We've begun with just theory, to start getting you used to why you'd use JavaScript, and what kind of things you can do with it. Along the way you saw a few code examples and learned how JavaScript fits in with the rest of the code on your website, amongst other things.</p>
+
+<p>JavaScript may seem a bit daunting right now, but don't worry — in this course we will take you through it in simple steps that will make sense going forward. In the next article we will <a href="/en-US/docs/Learn/JavaScript/Introduction_to_JavaScript_1/A_first_splash">plunge straight into the practical</a>, getting you to jump straight in and build your own JavaScript examples.</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><strong><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></strong></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li>
+</ul>
+
+<p>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</p>
diff --git a/files/de/learn/javascript/index.html b/files/de/learn/javascript/index.html
new file mode 100644
index 0000000000..78991e9102
--- /dev/null
+++ b/files/de/learn/javascript/index.html
@@ -0,0 +1,47 @@
+---
+title: JavaScript
+slug: Learn/JavaScript
+tags:
+  - Anfänger
+  - JavaScript
+translation_of: Learn/JavaScript
+---
+<p>{{Glossary('JavaScript')}} ist eine wichtige Webtechnologie, die es erlaubt, Webseiten interaktiv zu gestalten.</p>
+
+<p><span style="line-height: 1.5;">Wenn Ihr mehr als einfach nur eine Standard-Website erstellen wollt, solltet ihr wenigstens über JavaScript-Grundkenntnisse verfügen. <br>
+ Es ist nicht schwer, die Grundkenntnisse zu erlangen. Aber JavaScript ist eine sehr mächtige Technologie, die es euch erlaubt, komplexe Features zu verwenden - also gibt es keine Musterlösung, wie man diese Sprache erlernen kann</span>.<br>
+ Wir empfehlen euch trotzdem, mit den nächsten Seiten anzufangen, um etwas mehr über JavaScript zu erfahren. <br>
+ Fangt von vorne an und lernt, bis ihr ganz hinten angekommen seid oder sucht euch einfach nur die Seite heraus, die ihr interessant findet. </p>
+
+<div class="row topicpage-table">
+<div class="section" style="width: 568px;">
+<h2 id="Die_Grundsätze" style="line-height: 30px; font-size: 2.14285714285714rem;">Die Grundsätze</h2>
+
+<p>Fangt hier an, falls ihr noch keine Erfahrungen mit JavaScript habt.</p>
+
+<dl>
+ <dt><a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript Basics</a></dt>
+ <dd>JavaScript Basics zeigt euch, wie ihr anfangen könnt und gewährt euch Einblicke in die aufregende Welt von JavaScript.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/Guide">JavaScript Guide</a></dt>
+ <dd>Falls Javascript noch Neuland für euch ist, wird euch dieser Guide Schritt für Schritt begleiten.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript Technologie-Überblick</a></dt>
+ <dd>EInführung zur weiten JavaScript-Landschaft.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">Einführung zur Objekt-Orientierten Programmierung</a></dt>
+ <dd>Einführung in das Konzept von {{glossary("OOP","object-oriented programming")}} mit JavaScript.</dd>
+</dl>
+</div>
+
+<div class="section" style="width: 593px;">
+<h2 id="Weiteres" style="line-height: 30px; font-size: 2.14285714285714rem;">Weiteres</h2>
+
+<p>Wenn ihr gefallen an JavaScript gefunden habt, gibt es hier einige Details, die euch interessieren könnten:</p>
+
+<div><a href="/en-US/docs/Web/JavaScript/Reference" style="font-weight: bold; line-height: 1.5;">JavaScript Referenz</a></div>
+
+<dl>
+ <dd>In unserer Referenz findet ihr Details zu jedem Aspekt von JavaScript: Event Handler, Operatoren, Statements und Funktionen.</dd>
+</dl>
+</div>
+</div>
+
+<p> </p>
diff --git a/files/de/learn/javascript/objects/basics/index.html b/files/de/learn/javascript/objects/basics/index.html
new file mode 100644
index 0000000000..403f869034
--- /dev/null
+++ b/files/de/learn/javascript/objects/basics/index.html
@@ -0,0 +1,258 @@
+---
+title: JavaScript object basics
+slug: Learn/JavaScript/Objects/Basics
+translation_of: Learn/JavaScript/Objects/Basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary">In diesem Artikel betrachten wir die fundamentale <strong>JavaScript Objekt Syntax</strong> und betrachten erneut einige JavaScript-Funktionalitäten, die im Kursverlauf bereits betrachtet wurden, immer im Hinblick darauf, dass viele der Merkmale, mit denen Sie bereits zu tun hatten, Objekte sind.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Vorkenntnisse:</th>
+   <td>Grundlegende Computerkenntnisse, ein grundlegendes Verständnis von HTML und CSS, Vertrautheit mit  JavaScript Grundlagen (siehe <a href="/en-US/docs/Learn/JavaScript/First_steps">Erste Schritte</a> und <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Bausteine</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Ziel:</th>
+   <td>Verständnis für die grundlegende Theorie zur objektorientierten Programmierung, wie dies mit JavaScript zusammenhängt  ("fast alle Dinge sind Objekte") und wie man mit JavaScript-Objekten zu arbeiten beginnt.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Objekt_Grundlagen">Objekt Grundlagen</h2>
+
+<p>Ein Objekt ist eine Sammlung von zusammenhängenden Daten und/oder Funktionalitäten. Diese bestehen üblicherweise aus verschiedenen Variablen und Funktionen, die Eigenschaften und Methoden genannt werden, wenn sie sich innerhalb von Objekten befinden. Arbeiten wir ein Beispiel durch, um besser zu verstehen, wie ein Objekt aussieht.</p>
+
+<p>Für den Anfang erzeugen wir eine lokale Kopie unserer Datei <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html">oojs.html</a>. Sie enthält nur sehr wenig -  ein {{HTMLElement("script")}} Element, um unseren Quelltext einzufügen. Wir werden diese Datei bzw. dieses Beispiel als Basis nutzen, um die grundlegende Objektsyntax zu erforschen. Während der Arbeit an diesem Beispiel sollten Sie ihre  <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools#The_JavaScript_console">developer tools JavaScript console</a> (z.B. Browser-Entwicklerwerkzeuge) geöffnet haben und bereit sein, einige Befehle einzutippen.</p>
+
+<p>Wie mit vielen Dingen in JavaScript beginnt das Erzeugen eines Objekts häufig mit der Definition und Initialisierung einer Variablen. Versuchen Sie, folgendes unterhalb des bestehenden JavaScript Quelltextes einzugeben, dann abzuspeichern und einen Browser refresh durchzuführen:</p>
+
+<pre class="brush: js notranslate">var person = {};</pre>
+
+<p>Wenn Sie  <code>person</code> in ihrer JS console eingeben und die Entertaste drücken, sollten Sie folgendes Resultat erhalten:</p>
+
+<pre class="brush: js notranslate">[object Object]</pre>
+
+<p>Glückwunsch, Sie haben gerade ihr erstes Objekt erzeugt. Aufgabe erledigt! Aber dies ist ein leeres Objekt, also können wir noch nicht viel damit anfangen. Lassen sie uns unser Objekt erweitern, damit es folgendermaßen aussieht:</p>
+
+<pre class="brush: js notranslate">var person = {
+  name: ['Bob', 'Smith'],
+  age: 32,
+  gender: 'male',
+  interests: ['music', 'skiing'],
+  bio: function() {
+    alert(this.name[0] + ' ' + this.name[1] +
+    ' is ' + this.age + ' years old. He likes ' +
+    this.interests[0] + ' and ' + this.interests[1] + '.');
+  },
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name[0] + '.');
+  }
+};
+</pre>
+
+<p>Nach dem Abspeichern und Aktualisieren des Browsers versuchen Sie, etwas vom Folgenden in der JavaScript-Konsole ihrer Browser Entwicklerwerkzeuge einzugeben:</p>
+
+<pre class="brush: js notranslate">person.name
+person.name[0]
+person.age
+person.interests[1]
+person.bio()
+person.greeting()</pre>
+
+<p>Sie haben nun einige Daten und Funktionen innerhalb ihres Objekts und sind in der Lage, mit recht einfacher Syntax darauf zuzugreifen!</p>
+
+<div class="note">
+<p><strong>Notiz</strong>: Wenn Sie Schwierigkeiten damit haben, dies zum Funktionieren zu bringen, versuchen Sie, Ihren Code mit unserer Version zu vergleichen - siehe  <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-finished.html">oojs-finished.html</a> (zzgl. <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-finished.html">see it running live</a>). Die Live Version wird eine leere Anzeige erzeugen - das ist so in Ordnung - öffnen Sie erneut die Entwicklerwerkzeuge [Mozilla Firefox: F12 -&gt; Konsole] und versuchen Sie, die obigen Befehle einzugeben um die Objektstruktur zu betrachten.</p>
+</div>
+
+<p>Was passiert hier? Ein Objekt besteht aus vielen Elementen (engl. "Members", Anm. d. Übersetzers). Davon hat jedes einen Namen (z.B. <code>name</code> und <code>age</code>, wie oben) und einen Wert ( z.B. <code>['Bob', 'Smith' ]</code> und <code>32</code>). Jedes Name-Wert-Paar muss durch ein Komma getrennt sein und die jeweiligen Namen und Werte werden jeweils durch einen Doppelpunkt aufgeteilt. Die Syntax folgt stets diesem Muster:</p>
+
+<pre class="brush: js notranslate">var objectName = {
+  member1Name: member1Value,
+  member2Name: member2Value,
+  member3Name: member3Value
+};</pre>
+
+<p>Der Wert eines Objekt-Elements kann so ziemlich alles sein - in unserem <code>person</code>-Objekt haben wir einen String, eine Zahl, zwei Arrays und zwei Funktionen. Die ersten vier Elemente sind Datansätze und werden als Objekteigenschaften bezeichnet. Die letzten beiden Elemente sind Funktionen die es dem Objekt ermöglichen, etwas mit den Daten zu tun und werden als <strong>Methoden</strong> des Objekts bezeichnet.</p>
+
+<p>Ein Objekt wie dieses bezeichnet man als <strong>Objektliteral</strong> — wir haben die Inhalte des Objekts wortwörtlich aufgeschrieben, als wir es erzeugt haben. Dies steht im Gegensatz zu solchen Objekten, die aus Klassen instanziert werden, welche wir später genauer betrachten werden.</p>
+
+<p>Es ist durchaus üblich ein Objekt unter Verwendung eines Objektliterals zu erzeugen, wenn  man eine Reihe von strukturierten, zusammenhängenden Datensätzen auf gewisse Weise übertragen möchte. Zum Beispiel beim Senden einer Anfrage an einen Server, um diese in einer Datenbank abzuspeichern. Ein einzelnes Objekt zu senden ist viel effizienter, als viele Datensätze einzeln und darüber hinaus ist es einfacher, mit einem Array zu arbeiten, wenn man einzelne Datensätze anhand ihres Namens identifizieren möchte.</p>
+
+<h2 id="Punktnotation">Punktnotation</h2>
+
+<p>Oben haben Sie auf die Eigenschaften und Methoden des Objektes mittels Punktnotation zugegriffen.<strong> </strong>Der Objektbezeichner <code>person</code> dient als <strong>Namensraum </strong>- dieser muss zuerst angegeben werden, um auf etwas zuzugreifen, das innerhalb des Objektes <strong>eingekapselt </strong>ist. Als nächstes folgt der Punkt und anschließend der Bestandteil, auf den Sie zugreifen wollen - dies kann der Name einer einfachen Eigenschaft sein, ein Element einer Arrayeigenschaft oder der Aufruf einer der <strong>Objektmethoden</strong>, zum Beispiel:</p>
+
+<pre class="brush: js notranslate">person.age
+person.interests[1]
+person.bio()</pre>
+
+<h3 id="Sub-Namensräume">Sub-Namensräume</h3>
+
+<p>Es ist sogar möglich, den Wert eines Objekt-Members zu einem anderen Objekt umzuwandeln.</p>
+
+<p>Versuchen Sie zum Beispiel, den "name" Member von</p>
+
+<pre class="brush: js notranslate">name: ['Bob', 'Smith'],</pre>
+
+<p>zu</p>
+
+<pre class="brush: js notranslate">name : {
+  first: 'Bob',
+  last: 'Smith'
+},</pre>
+
+<p>zu ändern. Hier erzeugen wir effektiv einen Sub-Namensraum. Das hört sich kompliziert an, ist es aber nicht - um auf diese Inhalte zuzugreifen, müssen Sie bloß den zusätzlichen Namensraum, getrennt durch einen Punkt, hinzufügen. Versuchen Sie folgendes in der JS Konsole:</p>
+
+<pre class="brush: js notranslate">person.name.first
+person.name.last</pre>
+
+<p><strong>Wichtig</strong>: An diesem Punkt müssen Sie ihre Methodendeklarationen umarbeiten und Instanzen von</p>
+
+<pre class="brush: js notranslate">name[0]
+name[1]</pre>
+
+<p>zu</p>
+
+<pre class="brush: js notranslate">name.first
+name.last</pre>
+
+<p>ändern. Sonst greifen die Methoden ins Leere.</p>
+
+<h2 id="Klammer-Notation">Klammer-Notation</h2>
+
+<p>Es gibt einen weiteren Weg, auf Objekteigenschaften zuzugreifen - durch Benutzung der Klammern-Notation. Statt dies zu schreiben:</p>
+
+<pre class="brush: js notranslate">person.age
+person.name.first</pre>
+
+<p>Schreibt man:</p>
+
+<pre class="brush: js notranslate">person['age']
+person['name']['first']</pre>
+
+<p>Dies gleicht der Art wie man auf Arrayelemente zugreift und ist im Grunde der gleiche Vorgang - statt einen Index zu nutzen, um ein Element auszuwählen, benutzt man den den Namen der mit jedem Memberwert assoziiert wird. Es wundert daher nicht, dass Objekte manchmal <strong>assoziative Arrays</strong> genannt werden - sie verknüpfen Zeichenketten mit Werten in der gleichen Weise, wie ein Array Indizes mit Werten verknüpft.</p>
+
+<h2 id="Wertzuweisungen_an_Objekt-Elemente">Wertzuweisungen an Objekt-Elemente</h2>
+
+<p>Bisher haben wir nur betrachtet, wie man Objekt-Elemente abruft ( getting ) — man kann den Wert von Objektelementen auch setzen ( updating ), indem man das Element, welches gesetzt werden soll, folgendermaßen deklariert:</p>
+
+<pre class="brush: js notranslate">person.age = 45;
+person['name']['last'] = 'Cratchit';</pre>
+
+<p>Versuchen Sie, die Zeilen wie oben aufgeführt einzugeben und dann die Elemente wieder abzurufen, etwa so:</p>
+
+<pre class="brush: js notranslate">person.age
+person['name']['last']</pre>
+
+<p>Zuweisungen hören nicht beim Ändern von Werten existierender Eigenschaften und Methoden auf, man kann auch völlig neue Elemente erzeugen. Versuchen Sie dies in der JS Konsole:</p>
+
+<pre class="brush: js notranslate">person['eyes'] = 'hazel';
+person.farewell = function() { alert("Bye everybody!"); }</pre>
+
+<p>Sie können diese neuen Elemente nun ausprobieren:</p>
+
+<pre class="brush: js notranslate">person['eyes']
+person.farewell()</pre>
+
+<p>Ein nützlicher Aspekt der Klammer-Notation ist jener, dass man nicht nur Elementwerte dynamisch zuweisen kann, sondern auch Elementnamen. Nehmen wir an, wir wollen es Usern ermöglichen, selbstdefinierte Wertetypen in ihren <code>people</code>-Daten zu speichern, indem sie den Elementnamen und Wert in zwei Textfeldern eingeben. Wir könnten diese Werte so abrufen:</p>
+
+<pre class="brush: js notranslate">var myDataName = nameInput.value;
+var myDataValue = nameValue.value;</pre>
+
+<p>dann könnten wir diesen neuen Elementnamen und Wert zum <code>person</code>-Objekt so hinzufügen:</p>
+
+<pre class="brush: js notranslate">person[myDataName] = myDataValue;</pre>
+
+<p>Um das auszuprobieren, versuchen Sie, folgendes in ihren Quelltext einzufügen, gleich unterhalb der schliessenden, geschweiften Klammer des <code>person</code>-Objekts:</p>
+
+<pre class="brush: js notranslate">var myDataName = 'height';
+var myDataValue = '1.75m';
+person[myDataName] = myDataValue;</pre>
+
+<p>Nach dem Abspeichern und einem Browser-Refresh geben Sie folgendes in der Konsole ein:</p>
+
+<pre class="brush: js notranslate">person.height</pre>
+
+<p>Eine Eigenschaft zu einem Objekt hinzuzufügen ist mit der Punkt-Notation nicht möglich. Diese akzeptiert nur einen literalen Elementnamen, keine Variable, die auf einen Namen zeigt.</p>
+
+<h2 id="Was_bedeutet_this">Was bedeutet "this"?</h2>
+
+<p>Sie haben vielleicht schon etwas seltsames in unseren Methoden bemerkt. Sehen wir uns zum Beispiel folgendes genauer an:</p>
+
+<pre class="brush: js notranslate">greeting: function() {
+  alert('Hi! I\'m ' + this.name.first + '.');
+}</pre>
+
+<p>Sie wundern sich wahrscheinlich, was dieses "this" sein soll. Das Schlüsselwort <code>this</code> referenziert das derzeitige Objekt, in dem der Code hineingeschrieben wurde - in diesem Fall wäre <code>this</code> gleichbedeutend mit <code>person</code>. Also warum nicht einfach stattdessen <code>person</code> schreiben? Wie Sie im Artikel  <a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a> sehen werden, wenn wir damit beginnen, z.B. Konstruktoren zu erzeugen usw.: <code>this</code> ist sehr nützlich - es wird immer sicherstellen, dass die korrekten Werte verwendet werden, wenn sich der Kontext eines Elementes ändert (z.B. zwei unterschiedliche Objektinstanzen von <code>person</code> haben andere Namenswerte und sollten folgerichtig ihren jeweiligen Namenswert verwenden, wenn die greeting Methode aufgerufen wird).</p>
+
+<p>Lassen Sie uns dies an einem vereinfachten Paar Objekten vom Typ <code>person</code> verdeutlichen:</p>
+
+<pre class="brush: js notranslate">var person1 = {
+  name: 'Chris',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}
+
+var person2 = {
+  name: 'Brian',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}</pre>
+
+<p>In diesem Fall wird <code>person1.greeting()</code>  "Hi! I'm Chris." ausgeben; <code>person2.greeting()</code> wiederum wird  "Hi! I'm Brian." ausgeben, obwohl der Quelltext in jedem Fall genau gleich lautet. Wie schon gesagt,  <code>this</code>  ist gleichbedeutend mit dem Objekt, in dem sich der Quelltext befindet - das ist nicht sehr nützlich, wenn man Objektliterale händisch schreibt, aber es ist sehr hilfreich, sobald Objekte dynamisch erzeugt werden (zum Beispiel unter Verwendung von Konstruktoren). Es wird im weiteren Verlauf alles deutlich werden.</p>
+
+<h2 id="Sie_haben_die_ganze_Zeit_Objekte_verwendet">Sie haben die ganze Zeit Objekte verwendet</h2>
+
+<p>Als Sie diese Beispiele durchgegangen sind, haben Sie wahrscheinlich gedacht, dass die Punktnotation, die Sie verwendet haben, sehr vertraut scheint. Es liegt daran, dass Sie diese im gesamten Kursverlauf benutzt haben. Jedes Mal, wenn wir ein Beispiel behandelten, welches Teile des built-in Browser API oder JavaScript-Objekte verwendete, haben wir Objekte verwendet, da solche Funktionalitäten genau mit der gleichen Art von Objektstrukturen aufgebaut werden, wie wir sie hier betrachtet haben. Diese sind allerdings etwas komplexer als die unserer eigenen, einfachen Beispiele.</p>
+
+<p>Wenn Sie String-Methoden wie diese verwenden,</p>
+
+<pre class="brush: js notranslate">myString.split(',');</pre>
+
+<p>haben Sie eine Methode verwendet, die eine Instanz der <code>String</code>-Klasse zur Verfügung stellte. Jedes Mal, wenn Sie einen String in ihrem Quelltext erstellen, wir dieser String automatisch als eine Instanz von <code>String</code> erzeugt, dadurch stehen einige allgemeine Methoden und Eigenschaften zur Verfügung.</p>
+
+<p>Wenn Sie im DOM folgende Zeilen verwenden,</p>
+
+<pre class="brush: js notranslate">var myDiv = document.createElement('div');
+var myVideo = document.querySelector('video');</pre>
+
+<p>haben Sie Methoden verwendet, die von einer Instanz der Klasse <code><a href="/en-US/docs/Web/API/Document">Document</a></code> zur Verfügung gestellt wurden. Für jede geladene Webseite wird eine Instanz von <code>Document</code> erzeugt, die <code>document</code> genannt wird, welche die gesamte Struktur, den Inhalt und weitere Merkmale wie die URL repräsentiert. Dies bedeutet wiederum, dass einige allgemeine Methoden und Eigenschaften entsprechend verfügbar gemacht werden.</p>
+
+<p>Das gleiche gilt für so ziemlich jedes andere built-in Objekt/API, welches Sie benutzt haben  — z.B. <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math">Math</a></code>, usw.</p>
+
+<p>Beachten Sie, dass built-in Objekte/APIs nicht zwangsläufig immer automatisch eine Objektinstanz erzeugen. Ein Beispiel, die  <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a> — welche es modernen Browsern erlaubt, System Notifikationen zu generieren  — benötigt für jede zu sendende Notifikation eine neue Objektinstanz, die Sie durch Verwendung des Konstruktors erzeugen müssen. Versuchen Sie, folgendes in Ihrer JavaScript Konsole einzugeben:</p>
+
+<pre class="brush: js notranslate">var myNotification = new Notification('Hello!');</pre>
+
+<p>Konstruktoren werden wir in einem späteren Artikel detaillierter behandeln.</p>
+
+<div class="note">
+<p><strong>Bemerkung</strong>: Es ist nützlich, sich die Art, wie Objekte kommunizieren, als <strong>Nachrichtenweitergabe</strong> vorzustellen — wenn ein Objekt die Ausführung einer Aktion von einem anderen Objekt benötigt, wird es meist eine Nachricht an dieses Objekt mittels einer seiner Methoden senden und auf eine Antwort warten, welche wir als Rückgabewert bezeichnen.</p>
+</div>
+
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+
+<p>Glückwunsch, Sie haben das Ende unseres ersten JS Objekt Artikels erreicht —Sie sollten nun eine gute Vorstellung davon haben, wie man mit Objekten in JavaScript arbeitet — einschließlich der Erzeugung von eigenen, einfachen Objekte. Sie sollten auch zu schätzen wissen, dass Objekte als Daten- und Funktionsspeicherstrukturen sehr nützlich sind — wenn Sie versuchen würden, alle Eigenschaften und Methoden in unserem <code>person</code>-Objekt als einzelne Variablen bzw. Funktionen nachzuverfolgen, wäre das sehr ineffizient und frustrierend und wir würden riskieren, das gleichnamige Variablen kollidieren. Objekte lassen uns Informationen gefahrlos und sicher in ihrem jeweils eigenen Paket verstauen.</p>
+
+<p>Im nächsten Artikel werden wir damit beginnen, uns die Theorie der objektorientierten Programmierung (OOP) anzusehen und wie solche Techniken in JavaScript umgesetzt werden können.</p>
+
+<p>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</p>
+
+<h2 id="In_diesem_Modul">In diesem Modul</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Objekt Grundlagen</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Objektorientiertes JavaScript für Anfänger</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Objekt Prototypen</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Vererbung in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Mit JSON Daten arbeiten</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Objekterstellungsübungen</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Funktionalität zu unserer Hüpfball Demo hinzufügen</a></li>
+</ul>
diff --git a/files/de/learn/javascript/objects/index.html b/files/de/learn/javascript/objects/index.html
new file mode 100644
index 0000000000..9178a14f6d
--- /dev/null
+++ b/files/de/learn/javascript/objects/index.html
@@ -0,0 +1,53 @@
+---
+title: Introducing JavaScript objects
+slug: Learn/JavaScript/Objects
+tags:
+  - Beginner
+  - Guide
+  - JavaScript
+  - Objects
+  - Objekte
+  - Programmieren
+  - Prototypes
+  - Tutorial
+translation_of: Learn/JavaScript/Objects
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">In JavaScript sind die meisten Dinge Objekte die auf dem Grundstein von JavaScript aufgebaut worden sind. Hierzu zählen Strings, Arrays welche mittels der API grundlegend fundamentiert sind. Du kannst auch deine eigenen Objekte definieren um Dinge aus der Realität in Programmcode wiederzuverwenden. Die objektorientierte Programmierung ist wichtig um ein komplettes Verständnis zu bekommen als auch die Sprache wirklich zu verstehen. Aus diesem Grund stellen wir euch einige Lernmodule an um besser in das Thema einsteigen zu können.<br>
+ <br>
+ Aber hier wollen wir euch erstmal erklären, was ein Objekt genau ist und wie die Syntax für eine Definition eines Objektes ist.</p>
+
+<h2 id="Voraussetzungen">Voraussetzungen</h2>
+
+<p>Bevor du mit diesem Lernmodul beginnst, solltest du dich mit HTML und CSS vertraut gemacht haben. Solltest du noch keine Vorkenntnisse haben, so sehe dir bitte <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction">Einführung in HTML</a> und <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Einführung in CSS</a> an bevor du mit JavaScript beginnst.</p>
+
+<p>Auch solltest du dich vorher mit den Grundlagen von JavaScript vertraut gemacht haben, sie dazu bitte in folgenden Modulen nach: <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript: Erste Schritte</a> und <a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript: Elementare Grundlagen</a>.</p>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Solltest du an einem Computer arbeiten, der dir das Erstellen und Bearbeiten von Dateien nicht erlaubt, so kannst du Dienste wie <a href="http://jsbin.com/">JSBin</a> oder <a href="https://thimble.mozilla.org/">Thimble</a> für diesen Kurs nutzen.</p>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Objekt Grundlagen</a></dt>
+ <dd>In diesem ersten Kaptiel erklären wir euch wie ein Objekt fundamental aufgebaut ist, als auch die Syntax zu diesem. Wir behandeln außerdem einige Gebiete, die wir schon bereits gesehen haben, denn die meisten Dinge in JavaScript mit denen du arbeiten wirst sind Objekte.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Objektorientiertes JavaScript für Anfänger</a></dt>
+ <dd>Hier zeigen wir euch die objektorientierte Programmierung (OOP/OOJS) - hier gibt es erste Einblicke wie du dein Objekt am besten definierst und dann zeigen wir dir, wie JavaScript dein Objekt zum Leben bringt durch Instanziierung.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Objekt Prototypes</a></dt>
+ <dd>Prototypes ist der Begriff für den Vorgang für die weitergehende Verwendung eines Objektes mit vererbbaren Funktionen. Solltest du bereits eine andere objektorientierte Programmiersprache benutzt haben, wirst du merken, dass JavaScript anders funktioniert. In dem Modul behandeln wir außerdem wie die Verkettung von Prototypen funktioniert und schauen uns die <em>Eigenschaften eines Objektes</em> genauer an, mit denen wir auch die Funktionen definieren werden.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Vererbung in JavaScript</a></dt>
+ <dd>Nachdem du in den vorherigen Lernmodulen einiges über OOJS gelernt hast, zeigen wir dir hier wie du Funktionen und Eigenschaften mit einem anderen Objekt vererbben kannst.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Arbeiten mit JSON Strukturen</a></dt>
+ <dd>JavaScript Object Notation (JSON) ist eine textbasierte Struktursprache um Daten kompakt und wiederverwendbar zu machen. Diese Struktursprache ist die gängigste in JavaScript um Objekte zu beschreiben, speichern oder für andere Dienste verfügbar zu machen.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Objekte an einer Übung definieren</a></dt>
+ <dd>In dieser Übung möchten wir nochmal alle vorherigen Themen aufgreifen und nochmal mit der Syntax von Objekten üben und dabei etwas Spaß mit springenden, bunten Bällen haben.</dd>
+</dl>
+
+<h2 id="Übungen">Übungen</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Erstelle neue Funktionen für springende Bälle</a></dt>
+ <dd>In dieser Übung greifen wir uns das Demo-Projekt aus dem vorherigen Artikel nochmal auf und werden die springenden Bälle mit neuen Objektfunktionen erweitern.</dd>
+</dl>
diff --git a/files/de/learn/javascript/objects/inheritance/index.html b/files/de/learn/javascript/objects/inheritance/index.html
new file mode 100644
index 0000000000..827dda17f6
--- /dev/null
+++ b/files/de/learn/javascript/objects/inheritance/index.html
@@ -0,0 +1,440 @@
+---
+title: Inheritance in JavaScript
+slug: Learn/JavaScript/Objects/Inheritance
+translation_of: Learn/JavaScript/Objects/Inheritance
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary">Nachdem nun die schmutzigen Details des OOJS erklärt sind, beschäftigt sich dieser Artikel damit, wie "Kinder"-Objektklassen (Konstruktoren) Features von ihren "Eltern"-Klassen vererbt bekommen. Zusätzlich stellen wir Hinweise dazu bereit, wann und wo Du OOJS am besten anwendest und wie mit Klassen im modern ECMAScript Syntax umgegangen wird.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Voraussetzungen:</th>
+   <td>Grundsätzliche EDV-Kenntnisse, ein grundlegendes Verständnis für HTML und CSS, mit JavaScript Grundlagen vertraut sein (siehe <a href="https://wiki.developer.mozilla.org/de/docs/Learn/JavaScript/First_steps">Erste Schritte</a> und <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a>) und Grundlagen zu OOJS (siehe<a href="/en-US/docs/Learn/JavaScript/Object-oriented/Introduction">Introduction to objects</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Lernziel:</th>
+   <td>Zu verstehen, wie es in JavaScript möglich ist, Vererbung zu implementieren.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Prototypal_inheritance">Prototypal inheritance</h2>
+
+<p>So far we have seen some inheritance in action — we have seen how prototype chains work, and how members are inherited going up a chain. But mostly this has involved built-in browser functions. How do we create an object in JavaScript that inherits from another object?</p>
+
+<p>Let's explore how to do this with a concrete example.</p>
+
+<h2 id="Getting_started">Getting started</h2>
+
+<p>First of all, make yourself a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-start.html">oojs-class-inheritance-start.html</a> file (see it <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-start.html">running live</a> also). Inside here you'll find the same <code>Person()</code> constructor example that we've been using all the way through the module, with a slight difference — we've defined only the properties inside the constructor:</p>
+
+<pre class="brush: js notranslate">function Person(first, last, age, gender, interests) {
+  this.name = {
+    first,
+    last
+  };
+  this.age = age;
+  this.gender = gender;
+  this.interests = interests;
+};</pre>
+
+<p>The methods are <em>all</em> defined on the constructor's prototype. For example:</p>
+
+<pre class="brush: js notranslate">Person.prototype.greeting = function() {
+  alert('Hi! I\'m ' + this.name.first + '.');
+};</pre>
+
+<div class="note">
+<p><strong>Note</strong>: In the source code, you'll also see <code>bio()</code> and <code>farewell()</code> methods defined. Later you'll see how these can be inherited by other constructors.</p>
+</div>
+
+<p>Say we wanted to create a <code>Teacher</code> class, like the one we described in our initial object-oriented definition, which inherits all the members from <code>Person</code>, but also includes:</p>
+
+<ol>
+ <li>A new property, <code>subject</code> — this will contain the subject the teacher teaches.</li>
+ <li>An updated <code>greeting()</code> method, which sounds a bit more formal than the standard <code>greeting()</code> method — more suitable for a teacher addressing some students at school.</li>
+</ol>
+
+<h2 id="Defining_a_Teacher_constructor_function">Defining a Teacher() constructor function</h2>
+
+<p>The first thing we need to do is create a <code>Teacher()</code> constructor — add the following below the existing code:</p>
+
+<pre class="brush: js notranslate">function Teacher(first, last, age, gender, interests, subject) {
+  Person.call(this, first, last, age, gender, interests);
+
+  this.subject = subject;
+}</pre>
+
+<p>This looks similar to the Person constructor in many ways, but there is something strange here that we've not seen before — the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call()</a></code> function. This function basically allows you to call a function defined somewhere else, but in the current context. The first parameter specifies the value of <code>this</code> that you want to use when running the function, and the other parameters are those that should be passed to the function when it is invoked.</p>
+
+<p>We want the <code>Teacher()</code> constructor to take the same parameters as the <code>Person()</code> constructor it is inheriting from, so we specify them all as parameters in the <code>call()</code> invocation.</p>
+
+<p>The last line inside the constructor simply defines the new <code>subject</code> property that teachers are going to have, which generic people don't have.</p>
+
+<p>As a note, we could have simply done this:</p>
+
+<pre class="brush: js notranslate">function Teacher(first, last, age, gender, interests, subject) {
+  this.name = {
+    first,
+    last
+  };
+  this.age = age;
+  this.gender = gender;
+  this.interests = interests;
+  this.subject = subject;
+}</pre>
+
+<p>But this is just redefining the properties anew, not inheriting them from <code>Person()</code>, so it defeats the point of what we are trying to do. It also takes more lines of code.</p>
+
+<h3 id="Inheriting_from_a_constructor_with_no_parameters">Inheriting from a constructor with no parameters</h3>
+
+<p>Note that if the constructor you are inheriting from doesn't take its property values from parameters, you don't need to specify them as additional arguments in <code>call()</code>. So, for example, if you had something really simple like this:</p>
+
+<pre class="brush: js notranslate">function Brick() {
+  this.width = 10;
+  this.height = 20;
+}</pre>
+
+<p>You could inherit the <code>width</code> and <code>height</code> properties by doing this (as well as the other steps described below, of course):</p>
+
+<pre class="brush: js notranslate">function BlueGlassBrick() {
+  Brick.call(this);
+
+  this.opacity = 0.5;
+  this.color = 'blue';
+}</pre>
+
+<p>Note that we've only specified <code>this</code> inside <code>call()</code> — no other parameters are required as we are not inheriting any properties from the parent that are set via parameters.</p>
+
+<h2 id="Setting_Teachers_prototype_and_constructor_reference">Setting Teacher()'s prototype and constructor reference</h2>
+
+<p>All is good so far, but we have a problem. We have defined a new constructor, and it has a <code>prototype</code> property, which by default just contains an object with a reference to the constructor function itself. It does not contain the methods of the Person constructor's <code>prototype</code> property. To see this, enter <code>Object.getOwnPropertyNames(Teacher.prototype)</code> into either the text input field or your JavaScript console. Then enter it again, replacing <code>Teacher</code> with <code>Person</code>. Nor does the new constructor <em>inherit</em> those methods. To see this, compare the outputs of <code>Person.prototype.greeting</code> and <code>Teacher.prototype.greeting</code>. We need to get <code>Teacher()</code> to inherit the methods defined on <code>Person()</code>'s prototype. So how do we do that?</p>
+
+<ol>
+ <li>Add the following line below your previous addition:
+  <pre class="brush: js notranslate">Teacher.prototype = Object.create(Person.prototype);</pre>
+  Here our friend <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">create()</a></code> comes to the rescue again. In this case we are using it to create a new object and make it the value of <code>Teacher.prototype</code>. The new object has <code>Person.prototype</code> as its prototype and will therefore inherit, if and when needed, all the methods available on <code>Person.prototype</code>.</li>
+ <li>We need to do one more thing before we move on. After adding the last line, <code>Teacher.</code><code>prototype</code>'s <code>constructor</code> property is now equal to <code>Person()</code>, because we just set <code>Teacher.prototype</code> to reference an object that inherits its properties from <code>Person.prototype</code>! Try saving your code, loading the page in a browser, and entering <code>Teacher.prototype.constructor</code> into the console to verify.</li>
+ <li>This can become a problem, so we need to set this right. You can do so by going back to your source code and adding the following line at the bottom:
+  <pre class="brush: js notranslate">Object.defineProperty(Teacher.prototype, 'constructor', {
+    value: Teacher,
+    enumerable: false, // so that it does not appear in 'for in' loop
+    writable: true });</pre>
+ </li>
+ <li>Now if you save and refresh, entering <code>Teacher.prototype.constructor</code> should return <code>Teacher()</code>, as desired, plus we are now inheriting from <code>Person()</code>!</li>
+</ol>
+
+<h2 id="Giving_Teacher_a_new_greeting_function">Giving Teacher() a new greeting() function</h2>
+
+<p>To finish off our code, we need to define a new <code>greeting()</code> function on the <code>Teacher()</code> constructor.</p>
+
+<p>The easiest way to do this is to define it on <code>Teacher()</code>'s prototype — add the following at the bottom of your code:</p>
+
+<pre class="brush: js notranslate">Teacher.prototype.greeting = function() {
+  let prefix;
+
+  if (this.gender === 'male' || this.gender === 'Male' || this.gender === 'm' || this.gender === 'M') {
+    prefix = 'Mr.';
+  } else if (this.gender === 'female' || this.gender === 'Female' || this.gender === 'f' || this.gender === 'F') {
+    prefix = 'Ms.';
+  } else {
+    prefix = 'Mx.';
+  }
+
+  alert('Hello. My name is ' + prefix + ' ' + this.name.last + ', and I teach ' + this.subject + '.');
+};</pre>
+
+<p>This alerts the teacher's greeting, which also uses an appropriate name prefix for their gender, worked out using a conditional statement.</p>
+
+<h2 id="Trying_the_example_out">Trying the example out</h2>
+
+<p>Now that you've entered all the code, try creating an object instance from <code>Teacher()</code> by putting the following at the bottom of your JavaScript (or something similar of your choosing):</p>
+
+<pre class="brush: js notranslate">let teacher1 = new Teacher('Dave', 'Griffiths', 31, 'male', ['football', 'cookery'], 'mathematics');</pre>
+
+<p>Now save and refresh, and try accessing the properties and methods of your new <code>teacher1</code> object, for example:</p>
+
+<pre class="brush: js notranslate">teacher1.name.first;
+teacher1.interests[0];
+teacher1.bio();
+teacher1.subject;
+teacher1.greeting();
+teacher1.farewell();</pre>
+
+<p>These should all work just fine. The queries on lines 1, 2, 3, and 6 access members inherited from the generic <code>Person()</code> constructor (class). The query on line 4 accesses a member that is available only on the more specialized <code>Teacher()</code> constructor (class). The query on line 5 would have accessed a member inherited from <code>Person()</code>, except for the fact that <code>Teacher()</code> has its own member with the same name, so the query accesses that member.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you have trouble getting this to work, compare your code to our <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-finished.html">finished version</a> (see it <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-finished.html">running live</a> also).</p>
+</div>
+
+<p>The technique we covered here is not the only way to create inheriting classes in JavaScript, but it works OK, and it gives you a good idea about how to implement inheritance in JavaScript.</p>
+
+<p>You might also be interested in checking out some of the new {{glossary("ECMAScript")}} features that allow us to do inheritance more cleanly in JavaScript (see <a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a>). We didn't cover those here, as they are not yet supported very widely across browsers. All the other code constructs we discussed in this set of articles are supported as far back as IE9 or earlier, and there are ways to achieve earlier support than that.</p>
+
+<p>A common way is to use a JavaScript library — most of the popular options have an easy set of functionality available for doing inheritance more easily and quickly. <a href="http://coffeescript.org/#classes">CoffeeScript</a> for example provides <code>class</code>, <code>extends</code>, etc.</p>
+
+<h2 id="A_further_exercise">A further exercise</h2>
+
+<p>In our <a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS#Object-oriented_programming_from_10000_meters">OOP theory section</a>, we also included a <code>Student</code> class as a concept, which inherits all the features of <code>Person</code>, and also has a different <code>greeting()</code> method from <code>Person</code> that is much more informal than the <code>Teacher</code>'s greeting. Have a look at what the student's greeting looks like in that section, and try implementing your own <code>Student()</code> constructor that inherits all the features of <code>Person()</code>, and implements the different <code>greeting()</code> function.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you have trouble getting this to work, have a look at our <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-student.html">finished version</a> (see it <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-student.html">running live</a> also).</p>
+</div>
+
+<h2 id="Object_member_summary">Object member summary</h2>
+
+<p>To summarize, you've got four types of property/method to worry about:</p>
+
+<ol>
+ <li>Those defined inside a constructor function that are given to object instances. These are fairly easy to spot — in your own custom code, they are the members defined inside a constructor using the <code>this.x = x</code> type lines; in built in browser code, they are the members only available to object instances (usually created by calling a constructor using the <code>new</code> keyword, e.g. <code>let myInstance = new myConstructor()</code>).</li>
+ <li>Those defined directly on the constructor themselves, that are available only on the constructor. These are commonly only available on built-in browser objects, and are recognized by being chained directly onto a constructor, <em>not</em> an instance. For example, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys()</a></code>. These are also known as <strong>static properties/methods</strong>.</li>
+ <li>Those defined on a constructor's prototype, which are inherited by all instances and inheriting object classes. These include any member defined on a Constructor's <code>prototype</code> property, e.g. <code>myConstructor.prototype.x()</code>.</li>
+ <li>Those available on an object instance, which can either be an object created when a constructor is instantiated like we saw above (so for example <code>var teacher1 = new Teacher( name = 'Chris' );</code> and then <code>teacher1.name</code>), or an object literal (<code>let teacher1 = { name = 'Chris' }</code> and then <code>teacher1.name</code>).</li>
+</ol>
+
+<p>If you are not sure which is which, don't worry about it just yet — you are still learning, and familiarity will come with practice.</p>
+
+<h2 id="ECMAScript_2015_Classes">ECMAScript 2015 Classes</h2>
+
+<p>ECMAScript 2015 introduces <a href="/en-US/docs/Web/JavaScript/Reference/Classes">class syntax</a> to JavaScript as a way to write reusable classes using easier, cleaner syntax, which is more similar to classes in C++ or Java. In this section we'll convert the Person and Teacher examples from prototypal inheritance to classes, to show you how it's done.</p>
+
+<div class="note">
+<p><strong>Note</strong>: This modern way of writing classes is supported in all modern browsers, but it is still worth knowing about the underlying prototypal inheritance in case you work on a project that requires supporting a browser that doesn't support this syntax (most notably Internet Explorer).</p>
+</div>
+
+<p>Let's look at a rewritten version of the Person example, class-style:</p>
+
+<pre class="brush: js notranslate">class Person {
+  constructor(first, last, age, gender, interests) {
+    this.name = {
+      first,
+      last
+    };
+    this.age = age;
+    this.gender = gender;
+    this.interests = interests;
+  }
+
+  greeting() {
+    console.log(`Hi! I'm ${this.name.first}`);
+  };
+
+  farewell() {
+    console.log(`${this.name.first} has left the building. Bye for now!`);
+  };
+}
+</pre>
+
+<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">class</a> statement indicates that we are creating a new class. Inside this block, we define all the features of the class:</p>
+
+<ul>
+ <li>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/constructor">constructor()</a></code> method defines the constructor function that represents our <code>Person</code> class.</li>
+ <li><code>greeting()</code> and <code>farewell()</code> are class methods. Any methods you want associated with the class are defined inside it, after the constructor. In this example, we've used <a href="/en-US/docs/Web/JavaScript/Reference/Template_literals">template literals</a> rather than string concatenation to make the code easier to read.</li>
+</ul>
+
+<p>We can now instantiate object instances using the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> operator</a>, in just the same way as we did before:</p>
+
+<pre class="brush: js notranslate">let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);
+han.greeting();
+// Hi! I'm Han
+
+let leia = new Person('Leia', 'Organa', 19, 'female', ['Government']);
+leia.farewell();
+// Leia has left the building. Bye for now
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Under the hood, your classes are being converted into Prototypal Inheritance models — this is just syntactic sugar. But I'm sure you'll agree that it's easier to write.</p>
+</div>
+
+<h3 id="Inheritance_with_class_syntax">Inheritance with class syntax</h3>
+
+<p>Above we created a class to represent a person. They have a series of attributes that are common to all people; in this section we'll create our specialized <code>Teacher</code> class, making it inherit from <code>Person</code> using modern class syntax. This is called creating a subclass or subclassing.</p>
+
+<p>To create a subclass we use the <a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends">extends keyword</a> to tell JavaScript the class we want to base our class on,</p>
+
+<pre class="brush: js notranslate">class Teacher extends Person {
+  constructor(subject, grade) {
+    this.subject = subject;
+    this.grade = grade;
+  }
+}</pre>
+
+<p>but there's a little catch.</p>
+
+<p>Unlike old-school constructor functions where the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> operator</a> does the initialization of <code>this</code> to a newly-allocated object, this isn't automatically initialized for a class defined by the <a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends">extends</a> keyword, i.e the sub-classes.</p>
+
+<p>Therefore running the above code will give an error:</p>
+
+<pre class="brush: js notranslate">Uncaught ReferenceError: Must call super constructor in derived class before
+accessing 'this' or returning from derived constructor</pre>
+
+<p>For sub-classes, the <code>this</code> intialization to a newly allocated object is always dependant on the parent class constructor, i.e the constructor function of the class from which you're extending.</p>
+
+<p>Here we are extending the <code>Person</code> class — the <code>Teacher</code> sub-class is an extension of the <code>Person</code> class. So for <code>Teacher</code>, the <code>this</code> initialization is done by the <code>Person</code> constructor.</p>
+
+<p>To call the parent constructor we have to use the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/super"><code>super()</code> operator</a>, like so:</p>
+
+<pre class="brush: js notranslate">class Teacher extends Person {
+  constructor(subject, grade) {
+    super(); // Now 'this' is initialized by calling the parent constructor.
+    this.subject = subject;
+    this.grade = grade;
+  }
+}</pre>
+
+<p>There is no point having a sub-class if it doesn't inherit properties from the parent class.<br>
+ It is good then, that the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/super"><code>super()</code> operator</a> also accepts arguments for the parent constructor.</p>
+
+<p>Looking back to our <code>Person</code> constructor, we can see it has the following block of code in its constructor method:</p>
+
+<pre class="brush: js notranslate"> constructor(first, last, age, gender, interests) {
+   this.name = {
+     first,
+     last
+   };
+   this.age = age;
+   this.gender = gender;
+   this.interests = interests;
+} </pre>
+
+<p>Since the <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super()</a></code> operator is actually the parent class constructor, passing it the necessary arguments of the <code>Parent</code> class constructor will also initialize the parent class properties in our sub-class, thereby inheriting it:</p>
+
+<pre class="brush: js notranslate">class Teacher extends Person {
+  constructor(first, last, age, gender, interests, subject, grade) {
+    super(first, last, age, gender, interests);
+
+    // subject and grade are specific to Teacher
+    this.subject = subject;
+    this.grade = grade;
+  }
+}
+</pre>
+
+<p>Now when we instantiate <code>Teacher</code> object instances, we can call methods and properties defined on both <code>Teacher</code>and <code>Person</code> as we'd expect:</p>
+
+<pre class="brush: js notranslate">let snape = new Teacher('Severus', 'Snape', 58, 'male', ['Potions'], 'Dark arts', 5);
+snape.greeting(); // Hi! I'm Severus.
+snape.farewell(); // Severus has left the building. Bye for now.
+snape.age // 58
+snape.subject; // Dark arts
+</pre>
+
+<p>Like we did with Teachers, we could create other subclasses of <code>Person</code> to make them more specialized without modifying the base class.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can find this example on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/es2015-class-inheritance.html">es2015-class-inheritance.html</a> (<a href="https://mdn.github.io/learning-area/javascript/oojs/advanced/es2015-class-inheritance.html">see it live also</a>).</p>
+</div>
+
+<h2 id="Getters_and_Setters">Getters and Setters</h2>
+
+<p>There may be times when we want to change the values of an attribute in the classes we create or we don't know what the final value of an attribute will be. Using the <code>Teacher</code> example, we may not know what subject the teacher will teach before we create them, or their subject may change between terms.</p>
+
+<p>We can handle such situations with getters and setters.</p>
+
+<p>Let's enhance the Teacher class with getters and setters. The class starts the same as it was the last time we looked at it.</p>
+
+<p>Getters and setters work in pairs. A getter returns the current value of the variable and its corresponding setter changes the value of the variable to the one it defines.</p>
+
+<p>The modified <code>Teacher</code> class looks like this:</p>
+
+<pre class="brush: js notranslate">class Teacher extends Person {
+  constructor(first, last, age, gender, interests, subject, grade) {
+    super(first, last, age, gender, interests);
+    // subject and grade are specific to Teacher
+    this._subject = subject;
+    this.grade = grade;
+  }
+
+  get subject() {
+    return this._subject;
+  }
+
+  set subject(newSubject) {
+    this._subject = newSubject;
+  }
+}
+</pre>
+
+<p>In our class above we have a getter and setter for the <code>subject</code> property. We use <strong><code>_</code> </strong> to create a separate value in which to store our name property. Without using this convention, we would get errors every time we called get or set. At this point:</p>
+
+<ul>
+ <li>To show the current value of the <code>_subject</code> property of the <code>snape</code> object we can use the <code>snape.subject</code> getter method.</li>
+ <li>To assign a new value to the <code>_subject</code> property we can use the <code>snape.subject="new value"</code> setter method.</li>
+</ul>
+
+<p>The example below shows the two features in action:</p>
+
+<pre class="brush: js notranslate">// Check the default value
+console.log(snape.subject) // Returns "Dark arts"
+
+// Change the value
+snape.subject = "Balloon animals" // Sets _subject to "Balloon animals"
+
+// Check it again and see if it matches the new value
+console.log(snape.subject) // Returns "Balloon animals"
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: You can find this example on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/es2015-getters-setters.html">es2015-getters-setters.html</a> (<a href="https://mdn.github.io/learning-area/javascript/oojs/advanced/es2015-getters-setters.html">see it live also</a>).</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Getters and setters can be very useful at times, for example when you want to run some code every time a property is requested or set. For simple cases, however, plain property access without a getter or setter will do just fine.</p>
+</div>
+
+<h2 id="When_would_you_use_inheritance_in_JavaScript">When would you use inheritance in JavaScript?</h2>
+
+<p>Particularly after this last article, you might be thinking "woo, this is complicated". Well, you are right. Prototypes and inheritance represent some of the most complex aspects of JavaScript, but a lot of JavaScript's power and flexibility comes from its object structure and inheritance, and it is worth understanding how it works.</p>
+
+<p>In a way, you use inheritance all the time. Whenever you use various features of a Web API , or methods/properties defined on a built-in browser object that you call on your strings, arrays, etc., you are implicitly using inheritance.</p>
+
+<p>In terms of using inheritance in your own code, you probably won't use it often, especially to begin with, and in small projects. It is a waste of time to use objects and inheritance just for the sake of it when you don't need them. But as your code bases get larger, you are more likely to find a need for it. If you find yourself starting to create a number of objects that have similar features, then creating a generic object type to contain all the shared functionality and inheriting those features in more specialized object types can be convenient and useful.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Because of the way JavaScript works, with the prototype chain, etc., the sharing of functionality between objects is often called <strong>delegation</strong>. Specialized objects delegate functionality to a generic object type.</p>
+</div>
+
+<p>When using inheritance, you are advised to not have too many levels of inheritance, and to keep careful track of where you define your methods and properties. It is possible to start writing code that temporarily modifies the prototypes of built-in browser objects, but you should not do this unless you have a really good reason. Too much inheritance can lead to endless confusion, and endless pain when you try to debug such code.</p>
+
+<p>Ultimately, objects are just another form of code reuse, like functions or loops, with their own specific roles and advantages. If you find yourself creating a bunch of related variables and functions and want to track them all together and package them neatly, an object is a good idea. Objects are also very useful when you want to pass a collection of data from one place to another. Both of these things can be achieved without use of constructors or inheritance. If you only need a single instance of an object, then you are probably better off just using an object literal, and you certainly don't need inheritance.</p>
+
+<h2 id="Alternatives_for_extending_the_prototype_chain">Alternatives for extending the prototype chain</h2>
+
+<p>In JavaScript, there are several different ways to extend the prototype of an object aside from what we've shown above. To find out more about the other ways, visit our <a href="/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain#Different_ways_to_create_objects_and_the_resulting_prototype_chain">Inheritance and the prototype chain</a> article.</p>
+
+<h2 id="Test_your_skills!">Test your skills!</h2>
+
+<p>You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see <a href="/en-US/docs/Learn/JavaScript/Objects/Test_your_skills:_Object-oriented_JavaScript">Test your skills: Object-oriented JavaScript</a>.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>This article has covered the remainder of the core OOJS theory and syntax that we think you should know now. At this point you should understand JavaScript object and OOP basics, prototypes and prototypal inheritance, how to create classes (constructors) and object instances, add features to classes, and create subclasses that inherit from other classes.</p>
+
+<p>In the next article we'll have a look at how to work with JavaScript Object Notation (JSON), a common data exchange format written using JavaScript objects.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="http://www.objectplayground.com/">ObjectPlayground.com</a> — A really useful interactive learning site for learning about objects.</li>
+ <li><a href="https://www.manning.com/books/secrets-of-the-javascript-ninja-second-edition">Secrets of the JavaScript Ninja</a>, Chapter 7 — A good book on advanced JavaScript concepts and techniques, by John Resig, Bear Bibeault, and Josip Maras. Chapter 7 covers aspects of prototypes and inheritance really well; you can probably track down a print or online copy fairly easily.</li>
+ <li><a href="https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/this%20%26%20object%20prototypes/README.md">You Don't Know JS: this &amp; Object Prototypes</a> — Part of Kyle Simpson's excellent series of JavaScript manuals, Chapter 5 in particular looks at prototypes in much more detail than we do here. We've presented a simplified view in this series of articles aimed at beginners, whereas Kyle goes into great depth and provides a more complex but more accurate picture.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Object basics</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Inheritance in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Working with JSON data</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li>
+</ul>
diff --git a/files/de/learn/javascript/objects/json/index.html b/files/de/learn/javascript/objects/json/index.html
new file mode 100644
index 0000000000..7b01bfbf52
--- /dev/null
+++ b/files/de/learn/javascript/objects/json/index.html
@@ -0,0 +1,345 @@
+---
+title: Arbeiten mit JSON
+slug: Learn/JavaScript/Objects/JSON
+translation_of: Learn/JavaScript/Objects/JSON
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary">Die JavaScript Object Notation (JSON) ist ein standardisiertes, textbasiertes Format, um strukturierte Daten auf Basis eines JavaScript Objekts darzustellen. Es wird häufig für die Übertragung von Daten in Webanwendungen verwendet (z.B. das Senden einiger Daten vom Server zum Client, damit sie auf einer Webseite angezeigt werden können oder umgekehrt). Es wird dir sehr häufig über den Weg laufen, daher geben wir dir in diesem Artikel alles mit, damit du JSON mithilfe von JavaScript nutzen kannst, einschließlich des Umwandelns von JSON, damit du auf die enthaltenen Daten zugreifen und JSON erstellen kannst.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Voraussetzungen:</th>
+   <td>Grundlegende Computerkenntnisse, grundlegendes Verständnis von HTML, CSS und JavaScript (siehe <a href="/en-US/docs/Learn/JavaScript/First_steps">First steps</a> und <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a>) sowie OOJS Grundkenntnisse (siehe <a href="/en-US/docs/Learn/JavaScript/Object-oriented/Introduction">Introduction to objects</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Ziele:</th>
+   <td>Zu verstehen, wie man mit Daten im JSON-Format arbeitet und eigene JSON-Objekte erstellt.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Nein_im_ernst_was_ist_JSON">Nein, im ernst, was ist JSON?</h2>
+
+<p>{{glossary("JSON")}} ist ein textbasierendes Datenformat angelehnt an die JavaScript Object Syntax und popularisiert durch <a href="https://en.wikipedia.org/wiki/Douglas_Crockford">Douglas Crockford</a>. Auch wenn es der JavaScript Object Syntax ähnelt, ist es dennoch Javascript unabhängig. Heutzutage unterstützen zahlreiche Programmierumgebungen JSON, sowohl lesend (parse) als auch schreibend.</p>
+
+<p>JSON existiert als eine Zeichenkette (String) — das ist nützlich, um Daten über das Netzwerk zu übermitteln. Es muss in ein natives JavaScript Objekt umgewandelt werden, wenn du auf die Daten zugreifen willst. Das ist kein großes Ding — JavaScript stellt ein globales JSON-Objekt zur Verfügung, das Methoden zur Konvertierung zwischen den beiden zur Verfügung stellt.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Eine Zeichenkette in ein natives Objekt umzuwandeln nennt man <em>parsing</em>, wohingegen die Umwandlung eines nativen Objekts in eine Zeichenkette, um es im Netzwerk zu übermitteln, <em>stringification</em> genannt wird.</p>
+</div>
+
+<p>Ein JSON Objekt kann als einfache  Textdatei mit der Endung <code>.json</code> gespeichert werden oder einen {{glossary("MIME type")}} als <code>application/json</code>.</p>
+
+<h3 id="JSON_Struktur">JSON Struktur</h3>
+
+<p>Wie bereits erwähnt, ist JSON ein textbasierendes Datenformat angelehnt an die JavaScript Object Syntax. Es können sowohl in JSON als auch in JavaScript Objekten die gleichen Datentypen verwendet werden  — Strings, Zahlen, Arrays, Booleans und andere Objekttypen. Das erlaubt es dir, eine Datenhierarchie zu erstellen. Z.B.:</p>
+
+<pre class="brush: json">{
+  "squadName": "Super hero squad",
+  "homeTown": "Metro City",
+  "formed": 2016,
+  "secretBase": "Super tower",
+  "active": true,
+  "members": [
+    {
+      "name": "Molecule Man",
+      "age": 29,
+      "secretIdentity": "Dan Jukes",
+      "powers": [
+        "Radiation resistance",
+        "Turning tiny",
+        "Radiation blast"
+      ]
+    },
+    {
+      "name": "Madame Uppercut",
+      "age": 39,
+      "secretIdentity": "Jane Wilson",
+      "powers": [
+        "Million tonne punch",
+        "Damage resistance",
+        "Superhuman reflexes"
+      ]
+    },
+    {
+      "name": "Eternal Flame",
+      "age": 1000000,
+      "secretIdentity": "Unknown",
+      "powers": [
+        "Immortality",
+        "Heat Immunity",
+        "Inferno",
+        "Teleportation",
+        "Interdimensional travel"
+      ]
+    }
+  ]
+}</pre>
+
+<p>Würden wir das Objekt in ein JavaScript Programm laden und die Variable <code>superHeroes</code> auslesen, könnten wir die Objektdaten mittels der gleichen <code>dot/bracket notation</code> abrufen, wie in diesem Artikel behandelt: <a href="/en-US/docs/Learn/JavaScript/Objects/Basics">JavaScript object basics</a>. Zum Beispiel:</p>
+
+<pre class="brush: js">superHeroes.homeTown
+superHeroes['active']</pre>
+
+<p>Um Daten in tieferen hierarchischen Ebenen abrufen zu können, müssen die benötigten Eigenschaften und Array-indizes aneinandergereiht werden.  Um beispielsweise die dritte <code>superpower</code> des zweiten <code>hero</code> in der <code>members</code> Liste abrufen zu können, würdest du sowas machen:</p>
+
+<pre class="brush: js">superHeroes['members'][1]['powers'][2]</pre>
+
+<ol>
+ <li>Zuerst haben wir den Variablennamen — <code>superHeroes</code>.</li>
+ <li>Darin wollen wir die <code>members</code> Eigenschaft abrufen, also benutzen wir<code>["members"]</code>.</li>
+ <li><code>members</code> beinhaltet ein Array mit Objekten. Wir wollen das zweite Objekt innerhalb des Arrays abrufen, also benutzen wir <code>[1]</code>.</li>
+ <li>Innerhalb des Objekts wollen wir die <code>powers</code> Eigenschaft abrufen, demnach benutzen wir <code>["powers"]</code>.</li>
+ <li>Die <code>powers</code> Eigenschaft ist ein Array, welches die gewählten <code>superpowers</code> der <code>heroe</code>s hält. Wir wollen die dritte <code>superpower</code>, also <code>[2]</code>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: Wir haben euch das zuvor erwähnte JSON in einer Variable in unserem <a href="http://mdn.github.io/learning-area/javascript/oojs/json/JSONTest.html">JSONTest.html</a> Beispiel (siehe <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/JSONTest.html">source code</a>) zur Verfügung gestellt. Versuche es hochzuladen und die Daten in der Variable mittels der JavaScript Konsole deines Browser's abzurufen.</p>
+</div>
+
+<h3 id="Arrays_als_JSON">Arrays als JSON</h3>
+
+<p>Eben haben wir angemerkt, dass JSON Text im Grunde wie ein JavaScript object aussieht, und das ist weitestgehend richtig. "Weitestgehend" da ein Array eben gültiges(valid) JSON darstellt, zum Beispiel:</p>
+
+<pre class="brush: json">[
+  {
+    "name": "Molecule Man",
+    "age": 29,
+    "secretIdentity": "Dan Jukes",
+    "powers": [
+      "Radiation resistance",
+      "Turning tiny",
+      "Radiation blast"
+    ]
+  },
+  {
+    "name": "Madame Uppercut",
+    "age": 39,
+    "secretIdentity": "Jane Wilson",
+    "powers": [
+      "Million tonne punch",
+      "Damage resistance",
+      "Superhuman reflexes"
+    ]
+  }
+]</pre>
+
+<p>Dieses Arrays ist komplett gültges JSON. Die Array Elemente müssen lediglich beginnend mit des Array's Index - z.B. <code>[0]["powers"][0]</code> - abgerufen werden.</p>
+
+<h3 id="Anmerkungen"> Anmerkungen</h3>
+
+<ul>
+ <li>JSON ist ein reines Datenformat — es beinhaltet nur Eigenschaften, keine Methoden.</li>
+ <li>JSON benötigt <strong>immer</strong> doppelte Anführungszeichen - also <code>" "</code> - bei Strings und Eigenschaftsnamen. Einfache Anführungszeichen - also <code>' '</code> - sind nicht zulässig (invalid).</li>
+ <li>Ein einziges deplaziertes Kommata oder ähnliches lässt eine JSON Datei korrupieren und fehlschlagen. Du solltest alle Daten mit denen du arbeitest oder die du verarbeiten möchtest gründlich überprüfen (wobei computer-generiertes JSON bei korrekt funktionierenden JSON generatoren eher nicht fehleranfällig ist). Um dein  JSON zu überprüfen, kannst du zum Beispiel eine Anwendung wie <a href="http://jsonlint.com/">JSONLint</a> benutzen.</li>
+ <li>JSON kann jeden Datentyp der zur Einbindung in JSON geeignet ist annehmen, nicht nur Arrays oder Objekte. So kann zum Beispiel ein einfacher <code>String </code>oder eine <code>number</code> ein gültiges JSON Objekt sein.</li>
+ <li>Im Gegensatz zu JavaScript Code in dem Objekt Eigenschaften Anführungszeichen  nicht zwingend benötigen, dürfen in JSON nur <code>strings </code>in Anführungszeichen als Objekt Eigenschaften genutzt werden. </li>
+</ul>
+
+<h2 id="Aktives_Lernen_Arbeiten_mithilfe_eines_JSON_Beispiels">Aktives Lernen: Arbeiten mithilfe eines JSON Beispiels</h2>
+
+<p>Lasst uns durch ein Beispiel durcharbeiten um zu veranschaulichen wie wir mit JSON Daten auf einer Webseite arbeiten können.</p>
+
+<h3 id="Los_Geht's">Los Geht's</h3>
+
+<p>Anfangs, mache lokale Kopien unserer <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes.html">heroes.html</a> und <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/style.css">style.css</a> Dateien. Letztere enthält ein paar einfache CSS Elemente um unsere Seite ein wenig zu stylen, während die Erste einen einfachen HTML <code>body </code>enthält:</p>
+
+<pre class="brush: html">&lt;header&gt;
+&lt;/header&gt;
+
+&lt;section&gt;
+&lt;/section&gt;</pre>
+
+<p>Und ein {{HTMLElement("script")}} Element, welches den JavaScript Code halten wird, den wir etwas später erstellen werden. Momentan existieren nur zwei Zeilen, welche auf das {{HTMLElement("header")}} und {{HTMLElement("section")}} Element referenzieren und sie in Variablen speichern:</p>
+
+<pre class="brush: js">var header = document.querySelector('header');
+var section = document.querySelector('section');</pre>
+
+<p>Wir haben unsere JSON Daten auf unserem GitHub Account veröffentlicht: <a href="https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json">https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json</a>.</p>
+
+<p>Wir laden es in unsere Seite und benutzen geschickt die DOM Manipulation um es so darzustellen:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13857/json-superheroes.png" style="display: block; margin: 0 auto;"></p>
+
+<h3 id="JSON_erhalten">JSON erhalten</h3>
+
+<p>Um JSON zu erhalten, werden wir unsere API, genannt {{domxref("XMLHttpRequest")}} (oft <strong>XHR </strong>genannt), benutzen. Es handelt sich um ein sehr nützliches JavaScript Objekt, das es uns erlaubt, Netzwerkabfragen auszuführen um Ressourcen eines Servers via JavaScript (e.g. Bilder, Text, JSON, sogar HTML snippets) zu erhalten. So können wir kleine Sektionen mit Inhalt aktualisieren ohne die komplette Seite neuzuladen. Das führt zu responsiveren Webseiten und klingt ziemlich spannend. Allerdings fällt es außerhalb des hier behandelten Themas um es ausführlicher zu erklären.</p>
+
+<ol>
+ <li>Zuerst werden wir die JSON URL die wir abrufen möchten in einer Variable speichern. Füge Folgendes zum Ende deines JavaScript Codes hinzu:
+  <pre class="brush: js">var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';</pre>
+ </li>
+ <li>Um eine Abfrage zu erstellen, müssen wir eine neue Objekt-Abfrage-Instanz des <code>XMLHttpRequest</code> constructors mit dem Keyword <code>new </code>erstellen. Füge Folgenden Code hinzu:
+  <pre class="brush: js">var request = new XMLHttpRequest();</pre>
+ </li>
+ <li>Nun müssen wir eine neue Abfrage mit der <code><a href="/en-US/docs/Web/API/XMLHttpRequest/open">open()</a></code> Methode eröffnen. Füge Folgenden Code hinzu:
+  <pre class="brush: js">request.open('GET', requestURL);</pre>
+
+  <p>Die Methode braucht mindestens zwei Parameter — wobei es weitere optionale Parameter gibt. Für dieses Beispiel werden wir uns jedoch nur den einfachen, zwingend erforderlichen Parametern widmen :</p>
+
+  <ul>
+   <li>Die HTTP Methode die für die Netzwerkabfrage erforderlich ist. In diesem Fall reicht <code><a href="/en-US/docs/Web/HTTP/Methods/GET">GET</a> </code>aus, da wir ja nur simple Daten erhalten wollen .</li>
+   <li>Die Ziel-URL — Die JSON URL die wir zuvor in der <code>requestURL</code> Variable gespeichert haben.</li>
+  </ul>
+ </li>
+ <li>Füge als Nächstes folgende Zeilen hinzu — hier setzen wir den <code><a href="/en-US/docs/Web/API/XMLHttpRequest/responseType">responseType</a></code> auf JSON, sodass XHR weiß, dass der Server JSON zurückgeben und im Hintergrund in ein JavaScript Objekt konvertiert werden soll. Anschließend versenden wir die Abfrage mit der  <code><a href="/en-US/docs/Web/API/XMLHttpRequest/send">send()</a></code> Methode:
+  <pre class="brush: js">request.responseType = 'json';
+request.send();</pre>
+ </li>
+ <li>Zu guter Letzt müssen wir auf die Antwort des Servers (response) warten und sie anschließend weiterverarbeiten. Füge folgenden Code hinter deinem bisherigen Code hinzu:
+  <pre class="brush: js">request.onload = function() {
+  var superHeroes = request.response;
+  populateHeader(superHeroes);
+  showHeroes(superHeroes);
+}</pre>
+ </li>
+</ol>
+
+<p>Hier speichern wir die Response zu unserer Abfrage (verfügbar in der <code><a href="/en-US/docs/Web/API/XMLHttpRequest/response">response</a></code> Eigenschaft) in einer Variable namens: <code>superHeroes</code>; Diese Variable enthält nun das JavaScript Objekt basieren auf dem JSON! Nun geben wir das Objekt an zwei Funktionsaufrufe weiter— der erste wird den &lt;<code>header&gt;</code> mit korrekte Daten füllen, während der zweite einen Informationssteckbrief eines jeden Helden im Team erstellt und es in die <code>&lt;section&gt;</code>einfügt.</p>
+
+<p>Wir packen den Code in einen Eventhandler der ausgeführt wird, sobald das <code>load </code>event auf das Request Objekt angestoßen wird (siehe <code><a href="/en-US/docs/Web/API/XMLHttpRequestEventTarget/onload">onload</a></code>) — das passiert, da das <code>load </code>Event angestoßen wird sobald die <code>response </code>erfolgreich zurückgegeben wurde. Das garantiert, dass <code>request.response</code> definitiv verfügbar sein wird, wenn wir damit etwas machen wollen.</p>
+
+<h3 id="Populating_the_header">Populating the header</h3>
+
+<p>Wir haben also die JSON Daten bekommen und in ein JavaScript Objekt konvertiert. Nun arbeiten wir damit und schreiben zwei Funktionen. Als Erstes, füge folgende Funktion unter deinen bisherigen Code:</p>
+
+<pre class="brush: js">function populateHeader(jsonObj) {
+  var myH1 = document.createElement('h1');
+  myH1.textContent = jsonObj['squadName'];
+  header.appendChild(myH1);
+
+  var myPara = document.createElement('p');
+  myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];
+  header.appendChild(myPara);
+}</pre>
+
+<p>Wir haben den Parameter <code>jsonObj </code>aufgerufen, um uns daran zu erinnern, dass das JavaScript Objekt seinen Ursprung in JSON hat. Wir erstellen zunächst ein {{HTMLElement("h1")}} element with <code><a href="/en-US/docs/Web/API/Document/createElement">createElement()</a></code>, set its <code><a href="/en-US/docs/Web/API/Node/textContent">textContent</a></code> to equal the <code>squadName</code> property of the object, then append it to the header using <code><a href="/en-US/docs/Web/API/Node/appendChild">appendChild()</a></code>. We then do a very similar operation with a paragraph: create it, set its text content and append it to the header. The only difference is that its text is set to a concatenated string containing both the <code>homeTown</code> and <code>formed</code> properties of the object.</p>
+
+<h3 id="Creating_the_hero_information_cards">Creating the hero information cards</h3>
+
+<p>Next, add the following function at the bottom of the code, which creates and displays the superhero cards:</p>
+
+<pre class="brush: js">function showHeroes(jsonObj) {
+  var heroes = jsonObj['members'];
+
+  for (var i = 0; i &lt; heroes.length; i++) {
+    var myArticle = document.createElement('article');
+    var myH2 = document.createElement('h2');
+    var myPara1 = document.createElement('p');
+    var myPara2 = document.createElement('p');
+    var myPara3 = document.createElement('p');
+    var myList = document.createElement('ul');
+
+    myH2.textContent = heroes[i].name;
+    myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
+    myPara2.textContent = 'Age: ' + heroes[i].age;
+    myPara3.textContent = 'Superpowers:';
+
+    var superPowers = heroes[i].powers;
+    for (var j = 0; j &lt; superPowers.length; j++) {
+      var listItem = document.createElement('li');
+      listItem.textContent = superPowers[j];
+      myList.appendChild(listItem);
+    }
+
+    myArticle.appendChild(myH2);
+    myArticle.appendChild(myPara1);
+    myArticle.appendChild(myPara2);
+    myArticle.appendChild(myPara3);
+    myArticle.appendChild(myList);
+
+    section.appendChild(myArticle);
+  }
+}</pre>
+
+<p>To start with, we store the <code>members</code> property of the JavaScript object in a new variable. This array contains multiple objects that contain the information for each hero.</p>
+
+<p>Next, we use a <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code#The_standard_for_loop">for loop</a> to loop through each object in the array. For each one, we:</p>
+
+<ol>
+ <li>Create several new elements: an <code>&lt;article&gt;</code>, an <code>&lt;h2&gt;</code>, three <code>&lt;p&gt;</code>s, and a <code>&lt;ul&gt;</code>.</li>
+ <li>Set the &lt;h2&gt; to contain the current hero's <code>name</code>.</li>
+ <li>Fill the three paragraphs with their <code>secretIdentity</code>, <code>age</code>, and a line saying "Superpowers:" to introduce the information in the list.</li>
+ <li>Store the <code>powers</code> property in another new variable called <code>superPowers</code> — this contains an array that lists the current hero's superpowers.</li>
+ <li>Use another <code>for</code> loop to loop through the current hero's superpowers — for each one we create a <code>&lt;li&gt;</code> element, put the superpower inside it, then put the <code>listItem</code> inside the <code>&lt;ul&gt;</code> element (<code>myList</code>) using <code>appendChild()</code>.</li>
+ <li>The very last thing we do is to append the <code>&lt;h2&gt;</code>, <code>&lt;p&gt;</code>s, and <code>&lt;ul&gt;</code> inside the <code>&lt;article&gt;</code> (<code>myArticle</code>), then append the <code>&lt;article&gt;</code> inside the <code>&lt;section&gt;</code>. The order in which things are appended is important, as this is the order they will be displayed inside the HTML.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: If you are having trouble getting the example to work, try referring to our <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished.html">heroes-finished.html</a> source code (see it <a href="http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished.html">running live</a> also.)</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: If you are having trouble following the dot/bracket notation we are using to access the JavaScript object, it can help to have the <a href="http://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json">superheroes.json</a> file open in another tab or your text editor, and refer to it as you look at our JavaScript. You should also refer back to our <a href="/en-US/docs/Learn/JavaScript/Objects/Basics">JavaScript object basics</a> article for more information on dot and bracket notation.</p>
+</div>
+
+<h2 id="Converting_between_objects_and_text">Converting between objects and text</h2>
+
+<p>The above example was simple in terms of accessing the JavaScript object, because we set the XHR request to convert the JSON response directly into a JavaScript object using:</p>
+
+<pre class="brush: js">request.responseType = 'json';</pre>
+
+<p>But sometimes we aren't so lucky — sometimes we'll receive a raw JSON string, and we'll need to convert it to an object ourselves. And when we want to send a JavaScript object across the network, we'll need to convert it to JSON (a string) before sending. Luckily, these two problems are so common in web development that a built-in <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON</a> object is available in browsers, which contains the following two methods:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse">parse()</a></code>: Accepts a JSON string as a parameter, and returns the corresponding JavaScript object.</li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">stringify()</a></code>: Accepts an object as a parameter, and returns the equivalent JSON string form.</li>
+</ul>
+
+<p>You can see the first one in action in our <a href="http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished-json-parse.html">heroes-finished-json-parse.html</a> example (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished-json-parse.html">source code</a>) — this does exactly the same thing as the example we built up earlier, except that we set the XHR to return the raw JSON text, then used <code>parse()</code> to convert it to an actual JavaScript object. The key snippet of code is here:</p>
+
+<pre class="brush: js">request.open('GET', requestURL);
+request.responseType = 'text'; // now we're getting a string!
+request.send();
+
+request.onload = function() {
+  var superHeroesText = request.response; // get the string from the response
+  var superHeroes = JSON.parse(superHeroesText); // convert it to an object
+  populateHeader(superHeroes);
+  showHeroes(superHeroes);
+}</pre>
+
+<p>As you might guess, <code>stringify()</code> works the opposite way. Try entering the following lines into your browser's JavaScript console one by one to see it in action:</p>
+
+<pre class="brush: js">var myJSON = { "name": "Chris", "age": "38" };
+myJSON
+var myString = JSON.stringify(myJSON);
+myString</pre>
+
+<p>Here we're creating a JavaScript object, then checking what it contains, then converting it to a JSON string using <code>stringify()</code> — saving the return value in a new variable — then checking it again.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>In this article, we've given you a simple guide to using JSON in your programs, including how to create and parse JSON, and how to access data locked inside it. In the next article, we'll begin looking at object-oriented JavaScript.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON object reference page</a></li>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest object reference page</a></li>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Methods">HTTP request methods</a></li>
+ <li><a href="http://json.org">Official JSON web site with link to ECMA standard</a></li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}</p>
+
+<p> </p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Object basics</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Inheritance in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Working with JSON data</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/de/learn/javascript/objects/object-oriented_js/index.html b/files/de/learn/javascript/objects/object-oriented_js/index.html
new file mode 100644
index 0000000000..b4229a8058
--- /dev/null
+++ b/files/de/learn/javascript/objects/object-oriented_js/index.html
@@ -0,0 +1,290 @@
+---
+title: Objektorientiertes JavaScript für Beginner
+slug: Learn/JavaScript/Objects/Object-oriented_JS
+tags:
+  - Anfänger
+  - Artikel
+  - Erstellen
+  - Erzeugen
+  - Instanzen
+  - JavaScript
+  - Konstruktor
+  - Lernen
+  - OOJS
+  - OOP
+  - Objekt
+  - Objektorientiert
+  - codescripting
+translation_of: Learn/JavaScript/Objects/Object-oriented_JS
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary">Mit den nun bereits erlangten Grundlagen werden wir uns jetzt auf objektorientiertes JavaScript (OOJS) konzentrieren - dieser Artikel vermittelt Grundlagen der Theorie der objektorientierten Programmierung (OOP). Anschließend wird näher betrachtet, wie JavaScript Objektklassen über Konstruktor-Funktionen emuliert und wie Objekt-Instanzen erzeugt werden.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Voraussetzungen:</th>
+   <td>
+    <p>Grundlegende Computerkenntnisse, ein grundlegendes Verständnis von HTML und CSS, Vertrautheit mit den Grundlagen von JavaScript (siehe <a href="/de/docs/Learn/JavaScript/First_steps">erste Schritte</a> und <a href="/de/docs/Learn/JavaScript/Bausteine">Bausteine</a>) und OOJS-Grundlagen (siehe <a href="/de/docs/Learn/JavaScript/Objects/Basics">Einführung in Objekte</a>).</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Ziel:</th>
+   <td>Die grundlegende Theorie hinter der objektorientierten Programmierung und wie diese in JavaScript umgesetzt ist ("alles ist ein Objekt") zu verstehen, und wie man Konstruktoren und Objektinstanzen erstellt.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Objektorientierte_Programmierung_-_Grundlagen">Objektorientierte Programmierung - Grundlagen</h2>
+
+<p>Um zu beginnen möchten wir Ihnen eine vereinfachende und umfangreiche Übersicht darüber geben, was objektorientierte Programmierung (OOP) ist. Wir sagen vereinfachend, weil OOP schnell sehr kompliziert werden kann und an dieser Stelle eine vollständige Einführung sehr wahrscheinlich mehr verwirren als helfen würde. Die Grundidee von OOP ist, dass wir Objekte verwenden, um Dinge aus der realen Welt zu modellieren, die wir in unseren Programmen abbilden wollen und/oder eine einfache Möglichkeit bieten möchten, auf Funktionen zuzugreifen, die sonst nur schwer oder gar nicht genutzt werden könnten.</p>
+
+<p>Objekte können in Beziehung stehende Daten und Code enthalten, die Informationen über die Sache darstellen, die Sie modellieren möchten, sowie Funktionalitäten bzw. Verhalten, die Sie erhalten bzw. bereitstellen möchten. Objektdaten (und oft auch Funktionen) können geordnet (das Fachwort dafür lautet "gekapselt") innerhalb eines Objektpakets gespeichert werden (dem ein bestimmter Name gegeben werden kann, auf den man sich beziehen kann, der manchmal auch "Namensraum" genannt wird), wodurch es leicht strukturiert und zugänglich wird. Objekte werden auch häufig als Datenspeicher verwendet, die einfach über das Netzwerk gesendet werden können.</p>
+
+<h3 id="Definieren_einer_Objektvorlage">Definieren einer Objektvorlage</h3>
+
+<p>Betrachten wir ein einfaches Programm, das Informationen über die Schüler und Lehrer einer Schule anzeigt. Hier betrachten wir die OOP-Theorie im Allgemeinen, nicht im Zusammenhang mit einer bestimmten Programmiersprache.</p>
+
+<p>Um damit zu beginnen, könnten wir zu unserem <code>person</code>-Objekt aus dem vorhergehenden Kapitel zurückkehren, in dem wir Informationen und Funktionalitäten einer Person definiert hatten. Es gibt viele Dinge, die man über eine Person wissen kann (ihre Adresse, Größe, Schuhgröße, DNA-Profil, Ausweisnummer, signifikante Persönlichkeitsmerkmale ...), aber in diesem Fall sind wir nur daran interessiert, ihren Namen, ihr Alter, ihr Geschlecht und ihre Interessen zu betrachten. Und wir wollen auch in der Lage sein, eine kurze Erläuterung über sie auf der Grundlage dieser Daten zu schreiben und sie dazu zu bringen, "Hallo" zu sagen. Dies wird als "Abstraktion" bezeichnet - ein einfaches Modell einer komplexeren Sache wird erstellt, das die wichtigsten Aspekte in einer Weise darstellt, die für die Zwecke unseres Programms leicht zu bearbeiten sind.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13889/person-diagram.png" style="display: block; height: 219px; margin: 0px auto; width: 610px;"></p>
+
+<h3 id="Erstellen_von_realen_Objekten">Erstellen von realen Objekten</h3>
+
+<p>Von unserer Klasse können wir Objektinstanzen erstellen - Objekte die Informationen und Funktionalitäten enthalten, die in der Klasse definiert worden. Von unserer Klasse <code>person</code> können wir nun einige tatsächliche Personen erzeugen:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15163/MDN-Graphics-instantiation-2-fixed.png" style="display: block; height: 702px; margin: 0px auto; width: 695px;"></p>
+
+<p>Wenn eine Objektinstanz aus einer Klasse erzeugt wurde, wird die Konstruktorfunktion der Klasse ausgeführt, um die Objektinstanz zu erzeugen. Dieser Vorgang der Erzeugung einer Objektinstanz aus einer Klasse wird als Instanziierung bezeichnet - die Objektinstanz wird von der Klasse aus instanziiert.</p>
+
+<h3 id="Spezialisierte_Klassen">Spezialisierte Klassen</h3>
+
+<p>In diesem Fall wollen wir keine allgemeinen Leute - wir wollen Lehrer und Schüler, die beide spezifischere Typen von Menschen sind. In OOP können wir neue Klassen erstellen, die auf anderen Klassen basieren - diese neuen Unterklassen können die Daten- und Funktionalitäten ihrer Elternklasse erben, so dass Sie die Funktionalitäten, die allen Objekttypen gemeinsam ist, wiederverwenden können, anstatt sie duplizieren zu müssen.  Da wo sich Funktionalitäten zwischen den Klassen unterscheiden soll, können bei Bedarf spezialisierte Features direkt in den betroffenen Klassen entsprechend definieren.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13881/MDN-Graphics-inherited-3.png" style="display: block; height: 743px; margin: 0px auto; width: 700px;"></p>
+
+<p>Das ist wirklich sehr nützlich - Lehrer und Schüler haben viele gemeinsame Merkmale wie Name, Geschlecht und Alter, so dass es praktisch ist, diese Merkmale nur einmal zu definieren. Sie können dasselbe Merkmal auch separat in verschiedenen Klassen definieren, da jede Definition dieses Merkmals in einem anderen Namensraum liegt. Die Begrüßung eines Schülers könnte z.B. die Form "Yo, ich bin <code>firstName</code>" haben (z.B. Yo, ich bin Sam), während ein Lehrer etwas formelleres verwenden könnte, wie z.B. "Hallo, mein Name ist <code>prefix</code> <code>lastName</code> und ich unterrichte <code>Subject</code>". (z.B. Hallo, ich heiße Mr. Griffiths und unterrichte Chemie).</p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Das Fachwort für die Fähigkeit, mehrere Objekttypen mit der gleichen Funktionalität zu implementieren, nennt man Polymorphismus. Nur für den Fall, dass Sie sich das fragen.</p>
+</div>
+
+<p>Sie können nun Objektinstanzen aus Ihren Unterklassen erzeugen. Beispiel:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13885/MDN-Graphics-instantiation-teacher-3.png" style="display: block; height: 743px; margin: 0px auto; width: 700px;"></p>
+
+<p>Im weiteren Verlauf dieses Kapitels werden wir uns damit beschäftigen, wie die OOP-Theorie in JavaScript in die Praxis umgesetzt werden kann.</p>
+
+<h2 id="Konstruktoren_und_Objektinstanzen">Konstruktoren und Objektinstanzen</h2>
+
+<p>JavaScript verwendet spezielle Funktionen, die "Konstruktor-Funktionen" genannt werden, um Objekte und deren Eigenschaften zu definieren und zu initialisieren. Sie sind nützlich, weil Sie oft auf Situationen stoßen werden, in denen Sie nicht wissen, wie viele Objekte Sie erstellen werden müssen. Konstruktoren bieten die Möglichkeit, so viele Objekte wie nötig auf einfache und effektive Weise zu erstellen, indem sie alle erforderlichen Daten und Funktionen an diese Objekte anhängen.</p>
+
+<p>Lassen Sie uns nun das Erstellen von Klassen über Konstruktoren und das Erstellen von Objektinstanzen aus ihnen heraus speziell in JavaScript untersuchen. Zuerst möchten wir Sie bitten, eine neue lokale Kopie der oojs.html-Datei zu erstellen, die wir im vorhergehenden Kapitel bereits benutzt haben.</p>
+
+<h3 id="Ein_einfaches_Beispiel">Ein einfaches Beispiel</h3>
+
+<ol>
+ <li>Fangen wir damit an, wie man eine Person mit einer normalen Funktion definieren könnte. Fügen Sie diese Funktion innerhalb des Skript-Elements der oojs.html hinzu:
+  <pre class="brush: js">function createNewPerson(name) {
+  var obj = {};
+  obj.name = name;
+  obj.greeting = function() {
+    alert('Hi! I\'m ' + obj.name + '.');
+  };
+  return obj;
+}</pre>
+ </li>
+ <li>Sie können nun eine neue Person erstellen, indem Sie diese Funktion aufrufen - bitte geben Sie die folgenden Zeilen in der JavaScript-Konsole Ihres Browsers ein:
+  <pre class="brush: js">var salva = createNewPerson('Salva');
+salva.name;
+salva.greeting();</pre>
+  Das funktioniert zwar ganz gut, aber es ist ein bisschen umständlich. Wenn wir wissen, dass wir ein Objekt erstellen wollen, warum müssen wir dann explizit ein neues leeres Objekt erstellen und es zurückgeben? Glücklicherweise bietet uns JavaScript eine praktische Vereinfachung in Form von Konstruktorfunktionen - nutzen wir jetzt eine!</li>
+ <li>Ersetzen Sie die vorher implementierte Funktion durch folgende:
+  <pre class="brush: js">function Person(name) {
+  this.name = name;
+  this.greeting = function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  };
+}</pre>
+ </li>
+</ol>
+
+<p>Die Konstruktorfunktion ist die JavaScript-Version einer Klasse. Sie werden feststellen, dass sie alle Eigenschaften hat, die man in einer Funktion erwartet, obwohl sie weder etwas zurückgibt oder explizit ein Objekt erzeugt - sie definiert im Grunde nur Eigenschaften und Methoden. Sie werden sehen, dass dieses Schlüsselwort auch hier verwendet wird - es besagt im Grunde, dass immer dann, wenn eine dieser Objektinstanzen erzeugt wird, die Eigenschaft <code>name</code> des Objekts gleich dem Namenswert ist, der an den Konstruktoraufruf übergeben wird, und die Methode <code>greeting()</code> wird ebenfalls den Namenswert verwenden, der an den Konstruktoraufruf übergeben wird.</p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Der Name einer Konstruktorfunktion beginnt normalerweise mit einem Großbuchstaben - diese Konvention wird verwendet, um Konstruktorfunktionen im Code leichter erkennbar zu machen.</p>
+</div>
+
+<p>Wie rufen wir also einen Konstruktor auf, um einige Objekte zu erstellen?</p>
+
+<ol>
+ <li>Fügen Sie die folgenden Zeilen unterhalb Ihres vorherigen Codezusatzes ein:
+  <pre class="brush: js">var person1 = new Person('Bob');
+var person2 = new Person('Sarah');</pre>
+ </li>
+ <li>Speichern Sie Ihren Code, laden Sie ihn im Browser neu und geben Sie die folgenden Zeilen in Ihre JS-Konsole ein:
+  <pre class="brush: js">person1.name
+person1.greeting()
+person2.name
+person2.greeting()</pre>
+ </li>
+</ol>
+
+<p>Cool! Sie werden nun sehen, dass wir zwei neue Objekte auf der Seite haben, die jeweils unter einem anderen Namespace gespeichert sind - wenn Sie auf ihre Eigenschaften und Methoden zugreifen, müssen Sie Aufrufe mit <code>person1</code> oder <code>person2</code> starten; die darin enthaltene Funktionalität ist sauber verpackt, damit sie nicht mit anderen Funktionen kollidiert. Sie haben jedoch die gleiche Namenseigenschaft und die gleiche Methode <code>greeting()</code> zur Verfügung. Beachten Sie, dass Sie Ihren eigenen Namenswert verwenden, der Ihnen bei der Erstellung zugewiesen wurde. Das ist ein Grund, warum es sehr wichtig ist, diesen zu verwenden, so dass Sie Ihre eigenen Werte verwenden werden, und nicht irgendeinen anderen Wert.</p>
+
+<p>Sehen wir uns die Konstruktoraufrufe noch einmal genauer an:</p>
+
+<pre class="brush: js">var person1 = new Person('Bob');
+var person2 = new Person('Sarah');</pre>
+
+<p>In jedem Fall wird das neue Schlüsselwort verwendet, um dem Browser mitzuteilen, dass wir eine neue Objektinstanz erstellen wollen, gefolgt vom Funktionsnamen mit den erforderlichen Parametern in Klammern. Das Ergebnis wird in einer Variablen gespeichert - sehr ähnlich wie bei dem Aufruf einer Standardfunktion. Jede Instanz wird entsprechend dieser Definition erzeugt:</p>
+
+<pre class="brush: js">function Person(name) {
+  this.name = name;
+  this.greeting = function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  };
+}</pre>
+
+<p>Nach dem Anlegen der neuen Objekte enthalten die Variablen <code>person1</code> und <code>person2</code> die folgenden Objekte:</p>
+
+<pre class="brush: js">{
+  name: 'Bob',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}
+
+{
+  name: 'Sarah',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}</pre>
+
+<p>Beachten Sie, dass wir beim Aufruf unserer Konstruktor-Funktion jedes Mal <code>greeting()</code> definieren, was nicht ideal ist. Um dies zu vermeiden, können wir stattdessen Funktionen auf dem Prototypen definieren, die wir uns später genauer ansehen werden.</p>
+
+<h3 id="Erstellen_unseres_finalen_Konstruktors">Erstellen unseres finalen Konstruktors</h3>
+
+<p>Das Beispiel, das wir oben betrachtet haben, war nur ein einfaches Beispiel, um den Einstieg zu erleichtern. Lassen Sie uns nun weitermachen und unsere finale Konstruktor-Funktion <code>Person()</code> erstellen.</p>
+
+<ol>
+ <li>Entfernen Sie den bisher eingefügten Code und fügen Sie nachfolgenden Konstruktor als Ersatz hinzu - dies ist im Prinzip genau dasselbe, wie das einfache Beispiel, nur etwas komplexer:
+  <pre class="brush: js">function Person(first, last, age, gender, interests) {
+  this.name = {
+     first : first,
+     last : last
+  };
+  this.age = age;
+  this.gender = gender;
+  this.interests = interests;
+  this.bio = function() {
+    alert(this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
+  };
+  this.greeting = function() {
+    alert('Hi! I\'m ' + this.name.first + '.');
+  };
+}</pre>
+ </li>
+ <li>Fügen Sie nun unter dem Code von oben folgende Zeile ein, um eine Objektinstanz zu erzeugen:
+  <pre class="brush: js">var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);</pre>
+ </li>
+</ol>
+
+<p>Sie werden nun sehen, dass Sie auf die Eigenschaften und Methoden zugreifen können, genau wie wir es zuvor getan haben - probieren Sie das in Ihrer JS-Konsole aus:</p>
+
+<pre class="brush: js">person1['age']
+person1.interests[1]
+person1.bio()
+// etc.</pre>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Wenn Sie Probleme haben, dies zum Laufen zu bringen, vergleichen Sie Ihren Code mit unserer Version - siehe <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-finished.html">oojs-class-finished.html</a> (<a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-finished.html">hier</a> können Sie auch sehen, wie es live läuft).</p>
+</div>
+
+<h3 id="Weitere_Übungen">Weitere Übungen</h3>
+
+<p>Versuchen Sie zunächst, ein paar weitere eigene Objekte hinzuzufügen, und versuchen Sie, die Eigenschaften bzw. Funktionen der daraus erzeugten Objektinstanzen zu nutzen bzw. zu verändern.</p>
+
+<p>Außerdem gibt es einige Probleme mit unserer <code>bio()</code>-Methode - die Ausgabe enthält immer das Pronomen "He", egal ob Ihre <code>Person</code> weiblich ist oder einem anderen Geschlecht angehört. Und die <code>bio()</code>-Methode wird nur zwei Interessen enthalten, auch wenn mehr im Interessen-Array aufgelistet sind. Finden Sie heraus, wie man das in der Klassendefinition (Konstruktor) beheben kann? Sie können jeden beliebigen Code in einen Konstruktor einfügen (Sie werden wahrscheinlich ein paar Bedingungen und eine Schleife benötigen). Überlegen Sie sich, wie die Sätze je nach Geschlecht und je nachdem, ob die Anzahl der aufgelisteten Interessen 1, 2 oder mehr als 2 beträgt, unterschiedlich strukturiert werden sollten.</p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Wenn Sie nicht weiterkommen, haben wir eine Antwort bzw. Lösung in unserem <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">GitHub-Repo</a> bereitgestellt (<a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">Sehen Sie es sich hier an</a>) - versuchen Sie bitte aber erst einmal, die Lösung selbst zu schreiben!</p>
+</div>
+
+<h2 id="Andere_Möglichkeiten_Objektinstanzen_zu_erzeugen">Andere Möglichkeiten, Objektinstanzen zu erzeugen</h2>
+
+<p>Bisher haben wir zwei verschiedene Wege gesehen, um eine Objektinstanz zu erzeugen - die Deklaration eines Objektes als Literal und die Verwendung einer Konstruktorfunktion (siehe oben).</p>
+
+<p>Diese machen Sinn, aber es gibt auch andere Wege - wir möchten Sie mit diesen vertraut machen, falls Sie auf Ihren Reisen im Web auf sie stoßen sollten.</p>
+
+<h3 id="Der_Object-Konstruktor">Der Object()-Konstruktor</h3>
+
+<p>Zuerst können Sie den <code>Object()</code> Konstruktor verwenden, um ein neues Objekt zu erstellen. Ja, sogar generische Objekte haben einen Konstruktor, der ein leeres Objekt erzeugt.</p>
+
+<ol>
+ <li>Geben Sie dies in die JavaScript-Konsole Ihres Browsers ein:
+  <pre class="brush: js">var person1 = new Object();</pre>
+ </li>
+ <li>Diese speichert ein leeres Objekt in der Variable <code>person1</code>. Sie können dann diesem Objekt Eigenschaften und Methoden mit Punkt- oder Klammer-Notation hinzufügen, wie gewünscht. Versuchen Sie diese Beispiele in Ihrer Konsole:
+  <pre class="brush: js">person1.name = 'Chris';
+person1['age'] = 38;
+person1.greeting = function() {
+  alert('Hi! I\'m ' + this.name + '.');
+};</pre>
+ </li>
+ <li>Sie können auch ein Objektliteral als Parameter an den <code>Object()</code> Konstruktor übergeben, um es mit Eigenschaften/Methoden vorzufüllen. Versuchen Sie folgendes in Ihrer JS-Konsole:
+  <pre class="brush: js">var person1 = new Object({
+  name: 'Chris',
+  age: 38,
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+});</pre>
+ </li>
+</ol>
+
+<h3 id="Verwendung_der_Methode_create">Verwendung der Methode create()</h3>
+
+<p>Konstruktoren können Ihnen helfen, Ihren Code zu ordnen - Sie können Konstruktoren an einer Stelle erstellen und dann bei Bedarf Instanzen davon erstellen - und es ist immer nachvollziehbar, woher sie kommen.</p>
+
+<p>Einige Leute ziehen es jedoch vor, Objektinstanzen zu erstellen, ohne vorher Konstruktoren zu erstellen, insbesondere wenn sie nur wenige Instanzen eines Objekts erstellen müssen. JavaScript hat eine eingebaute Methode namens <code>create()</code>, die es Ihnen einfach ermöglicht, dies zu tun. Mit ihr können Sie ein neues Objekt auf Basis eines beliebigen vorhandenen Objekts erstellen.</p>
+
+<ol>
+ <li>Wenn Ihre fertige Übung aus den vorherigen Abschnitten im Browser geladen ist, versuchen Sie folgendes in Ihrer JavaScript-Konsole:
+  <pre class="brush: js">var person2 = Object.create(person1);</pre>
+ </li>
+ <li>Nun geben Sie bitte folgendes in die JavaScript-Konsole ein:
+  <pre class="brush: js">person2.name
+person2.greeting()</pre>
+ </li>
+</ol>
+
+<p>Sie werden sehen, dass <code>person2</code> auf der Basis von <code>person1</code> erstellt wurde - es hat die gleichen Eigenschaften und die gleiche Methode, die ihm zur Verfügung stehen.</p>
+
+<p>Eine Einschränkung von <code>create()</code> ist, dass der IE8 es nicht unterstützt. Daher können Konstruktoren effektiver sein, wenn Sie ältere Browser unterstützen wollen.</p>
+
+<p>Wir werden die Auswirkungen von <code>create()</code> später noch genauer untersuchen.</p>
+
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+
+<p>Dieser Artikel hat eine vereinfachte Sicht der objektorientierten Theorie geliefert - das ist noch lange nicht die ganze Geschichte, aber er gibt Ihnen eine Vorstellung davon, womit wir es hier zu tun haben. Darüber hinaus haben wir damit begonnen, verschiedene Möglichkeiten der Erzeugung von Objektinstanzen zu betrachten.</p>
+
+<p>Im nächsten Artikel werden wir uns mit JavaScript-Objekt-Prototypen beschäftigen.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}</p>
+
+<h2 id="In_diesem_Modul">In diesem Modul</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Objekt Grundlagen</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Objektorientiertes JavaScript für Anfänger</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Objekt Prototypen</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Vererbung in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Mit JSON Daten arbeiten</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Objekterstellungsübungen</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Funktionalität zu unserer Hüpfball Demo hinzufügen</a></li>
+</ul>
diff --git a/files/de/learn/javascript/objects/object_prototypes/index.html b/files/de/learn/javascript/objects/object_prototypes/index.html
new file mode 100644
index 0000000000..010c5986e9
--- /dev/null
+++ b/files/de/learn/javascript/objects/object_prototypes/index.html
@@ -0,0 +1,288 @@
+---
+title: Object prototypes
+slug: Learn/JavaScript/Objects/Object_prototypes
+tags:
+  - Anfänger
+  - Beitrag
+  - 'I10n:priority'
+  - JavaScript
+  - Konstruktor
+  - Lernen
+  - OOJS
+  - OOP
+  - Objekt
+  - Prototypen
+  - Prototypketten
+  - codescripting
+  - create()
+translation_of: Learn/JavaScript/Objects/Object_prototypes
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary">Prototypen dienen als Mechanismus, durch den JavaScript-Objekte Eigenschaften voneinander erben. In diesem Artikel erklären wir, wie Prototypketten funktionieren und betrachten, wie die Prototypeneigenschaft verwendet werden kann, um Methoden zu bestehenden Konstruktoren hinzuzufügen.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Voraussetzungen:</th>
+   <td>
+    <p>Verständnis der Funktionen in JavaScript, sowie Vertrautheit mit den Grundlagen von JavaScript (siehe <a href="https://wiki.developer.mozilla.org/de/docs/Learn/JavaScript/First_steps">erste Schritte</a> und <a href="https://wiki.developer.mozilla.org/de/docs/Learn/JavaScript/Bausteine">Bausteine</a>) und OOJS-Grundlagen (siehe <a href="https://wiki.developer.mozilla.org/de/docs/Learn/JavaScript/Objects/Basics">Einführung in Objekte</a>).</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Ziel:</th>
+   <td>JavaScript-Objekt-Prototypen zu verstehen, wie Prototypenketten funktionieren und wie man neue Methoden auf die Prototyp-Eigenschaft hinzufügt.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Eine_Prototyp-basierte_Sprache">Eine Prototyp-basierte Sprache?</h2>
+
+<p>JavaScript wird oft als eine <strong>prototypische bzw. Prototyp-basierte Sprache</strong> beschrieben - um Vererbung zu ermöglichen, können Objekte dazu ein <strong>Prototyp-Objekt </strong>haben, das als Vorlageobjekt fungiert, von dem es Methoden und Eigenschaften erbt. Das Prototyp-Objekt eines Objekts kann auch ein Prototyp-Objekt haben, von dem es Methoden und Eigenschaften erbt und so weiter. Dies wird oft als eine <strong>Prototypenkette</strong> bezeichnet und erklärt, warum verschiedene Objekte Eigenschaften und Methoden haben, die auf anderen Objekten definiert sind, die ihnen dadurch zur Verfügung stehen.</p>
+
+<p>Genau gesagt basieren die Eigenschaften und Methoden auf den Prototyp-Eigenschaften der Konstruktorfunktionen der Objekte, nicht auf den Objektinstanzen selbst.</p>
+
+<p>In JavaScript wird eine Verbindung zwischen der Objektinstanz und ihrem Prototyp hergestellt (seine <code>__proto__</code>-Eigenschaft, die von der Prototyp-Eigenschaft des Konstruktor abgeleitet ist). Die Eigenschaften und Methoden stammen aus der Kette der Prototypen (aufwärts der Prototypenkette folgend).</p>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Es ist wichtig zu wissen, dass es einen Unterschied gibt zwischen dem Prototypen eines Objekts (das über <code>Object.getPrototypeOf(obj)</code> oder über die veraltete <code>__proto__</code>-Eigenschaft zur Verfügung gestellt wird) und der Prototyp-Eigenschaft von Konstruktorfunktionen. Erstere ist die Eigenschaft auf jeder Instanz, letztere ist die Eigenschaft auf dem Konstruktor. Das heißt, <code>Object.getPrototypeOf(new Foobar())</code> bezieht sich auf dasselbe Objekt wie <code>Foobar.prototype</code>.</p>
+</div>
+
+<p>Schauen wir uns ein Beispiel an, um dies etwas deutlicher zu machen.</p>
+
+<h2 id="Verstehen_von_Prototyp-Objekten">Verstehen von Prototyp-Objekten</h2>
+
+<p>An dieser Stelle gehen wir zu dem Beispiel zurück, an dem wir unsere Konstruktor-Funktion <code>Person()</code> fertig gestellt haben - bitte laden Sie das Beispiel in Ihrem Browser. Sie können dazu gerne auch unsere Beispieldatei <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">oojs-class-further-exercises.html</a> nutzen (<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">hier finden Sie den Quellcode</a>), falls Ihnen der Quellcode aus dem vorangegangenen Artikel nicht mehr zur Verfügung steht.</p>
+
+<p>In diesem Beispiel haben wir eine Konstruktorfunktion wie nachfolgend gezeigt definiert:</p>
+
+<pre class="brush: js">function Person(first, last, age, gender, interests) {
+
+  // property and method definitions
+  this.name = {
+    'first': first,
+    'last' : last
+  };
+  this.age = age;
+  this.gender = gender;
+  //...see link in summary above for full definition
+}</pre>
+
+<p>Wir haben dann davon eine Objektinstanz erzeugt, die wie folgt aussieht:</p>
+
+<pre class="brush: js">let person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);</pre>
+
+<p>Wenn Sie in Ihre JavaScript-Konsole <code>person1.</code> eingeben, sollten Sie sehen können, das der Browser versucht, die Ausgabe der in dem Objekt verfügbaren Eigenschaften automatisch zu vervollständigen.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13853/object-available-members.png" style="display: block; margin: 0 auto;"></p>
+
+<p>In dieser Liste können Sie die Eigenschaften sehen, die in der Konstruktor-Funktion <code>person()</code> definiert sind - <code>name</code>, <code>age</code>, <code>gender</code>, <code>interests</code>, <code>bio</code> und <code>greeting</code>. Sie werden jedoch auch einige andere Eigenschaften sehen können - <code>toString</code>, <code>valueOf</code> etc. - diese sind im Prototyp-Objekt der Konstruktor-Funktion <code>person()</code> definiert.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13891/MDN-Graphics-person-person-object-2.png" style="display: block; height: 150px; margin: 0px auto; width: 700px;"></p>
+
+<p>Was passiert eigentlich, wenn man eine Methode auf <code>person1</code> ausführt, welche aktuell nur im Objekt definiert ist? Zum Beispiel:</p>
+
+<pre class="brush: js">person1.valueOf()</pre>
+
+<p>Die Methode <code>Object.valueOf()</code> wird von <code>person1</code> geerbt, weil deren Konstruktor-Funktion <code>person()</code> ist und der Prototyp von <code>person()</code> gleich <code>Object()</code> ist. <code>valueOf()</code> gibt den Wert des Objekts zurück, dass die Methode aufruft - probieren Sie es aus und sehen selber! Was in diesem Fall passiert, sieht wie folgt aus:</p>
+
+<ul>
+ <li>Der Browser prüft zunächst, ob für das <code>person1</code>-Objekt eine <code>valueOf()</code>-Methode verfügbar ist, wie sie in seinem Konstruktor <code>Person()</code> definiert ist.</li>
+ <li>Wenn das nicht der Fall ist, prüft der Browser im Prototyp-Objekt des Konstruktors von <code>Person()</code>, nämlich <code>Object()</code>, ob in diesem eine Methode <code>valueOf()</code> verfügbar ist. Ist dem so, wird die Methode aufgerufen und alles läuft!</li>
+</ul>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Wir möchten nochmals darauf hinweisen, dass die Methoden und Eigenschaften in der Prototypenkette nicht von einem Objekt auf ein anderes kopiert werden, sondern dass der Zugriff auf sie erfolgt, indem man in der Kette wie oben beschrieben nach oben geht.</p>
+</div>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Es gibt keine offizielle Möglichkeit, direkt auf das Prototyp-Objekt eines Objekts zuzugreifen - die "Links" zwischen den Elementen in der Kette sind in einer internen Eigenschaft definiert, die in der Spezifikation für die JavaScript-Sprache als [[prototype]] bezeichnet wird (siehe {{glossary("ECMAScript")}}). Die meisten modernen Browser verfügen jedoch über eine Eigenschaft namens <code>__proto__</code> (mit 2 Unterstrichen auf jeder Seite), die das Prototyp-Objekt des Konstruktors des betroffenen Objekts enthält. Geben Sie zum Beispiel <code>person1.__proto__</code> und <code>person1.__proto__.__proto__</code> in der JavaScript-Konsole ein, um zu sehen, wie die Kette im Code aussieht!</p>
+
+<p>Seit ECMAScript 2015 können Sie auf das Prototyp-Objekt eines Objekts indirekt über <code>Object.getPrototypeOf(obj)</code> zugreifen.</p>
+</div>
+
+<h2 id="Die_Prototyp-Eigenschaft_Wo_vererbte_Mitglieder_definiert_sind">Die Prototyp-Eigenschaft: Wo vererbte Mitglieder definiert sind</h2>
+
+<p>Wo sind also die vererbten Eigenschaften und Methoden definiert? Wenn Sie sich die <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Object">Referenzseite des Konstruktors object</a> ansehen, sehen Sie auf der linken Seite eine große Anzahl von Eigenschaften und Methoden aufgelistet - viel mehr als die Anzahl der geerbten Eigenschaften, die wir auf dem <code>person1</code>-Objekt gesehen haben. Einige werden vererbt, andere nicht - warum ist das so?</p>
+
+<p>Wie oben erwähnt sind die geerbten diejenigen, die auf der Prototyp-Eigenschaft (man könnte es einen Unter-Namensraum nennen) definiert sind - damit sind die Eigenschaften gemeint, die mit <code>Object.prototype</code>. beginnen und nicht die, die nur mit Object beginnen. Der Wert der Prototyp-Eigenschaft ist ein Objekt, das im Grunde ein Bereich zum Speichern von Eigenschaften und Methoden ist, die wir an Objekte weiter unten in der Prototyp-Kette vererben wollen.</p>
+
+<p>Somit stehen <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Object/toString">Object.prototype.toString()</a>, <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf">Object.prototype.valueOf()</a> usw. für alle Objekttypen zur Verfügung, die von <code>Object.prototype</code> erben, einschließlich neuer Objektinstanzen, die vom <code>Person()</code>-Konstruktor erstellt werden.</p>
+
+<p><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Object/is">Object.is()</a>, <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys()</a> und andere Eigenschaften, die nicht innerhalb des Prototyp-Bereichs definiert sind, werden nicht von Objektinstanzen oder Objekttypen geerbt, die von <code>Object.prototype</code> erben. Sie sind Methoden/Eigenschaften, die nur auf dem <code>Object()</code>-Konstruktor selbst verfügbar sind.</p>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Das mag ein wenig befremdlich wirken - wie können Sie eine Methode in einem Konstruktor definieren, wenn er selber eine Funktion ist? Eine Funktion ist ebenfalls eine Art Objekt - siehe auch auf der <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Function">Referenzseite des function()-Konstruktors</a>, damit Sie es besser nachvollziehen können.</p>
+</div>
+
+<ol>
+ <li>Sie können die vorhandenen Prototyp-Eigenschaften selbst überprüfen - gehen Sie zurück zu unserem vorherigen Beispiel und geben Sie folgendes in die JavaScript-Konsole ein:
+  <pre class="brush: js">Person.prototype</pre>
+ </li>
+ <li>Die Ausgabe wird Ihnen nicht sehr viel zeigen, da wir nichts im Prototyp unseres <code>Custom</code>-Konstruktors definiert haben! Standardmäßig startet der Prototyp eines Konstruktors immer leer. Versuchen Sie jetzt Folgendes:
+  <pre class="brush: js">Object.prototype</pre>
+ </li>
+</ol>
+
+<p>Sie werden eine große Anzahl von Methoden sehen, die in den Prototyp-Eigenschaften des Objekts (<code>Object</code>) definiert sind, die dann auf Objekten verfügbar sind, die von diesem Objekt (<code>Object)</code> erben, wie bereits gezeigt.</p>
+
+<p>Sie werden weitere Beispiele für die Vererbung von Prototypenketten sehen, die in JavaScript verfügbar sind - versuchen Sie zum Beispiel, nach den Methoden und Eigenschaften zu suchen, die auf dem Prototyp der globalen Objekte <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/String">String</a>, <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a>, <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a> und <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a> definiert sind. Diese haben alle eine Anzahl von Elementen, die auf ihrem Prototyp definiert sind, wie z.B. bei der Erstellung einer Zeichenfolge:</p>
+
+<pre class="brush: js">let myString = 'This is my string.';</pre>
+
+<p>myString hat per se eine Reihe nützlicher Methoden zur Verfügung, wie <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/String/split">split()</a>, <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf">indexOf()</a>, <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a> usw.</p>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Es lohnt sich unseren <a href="/de/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">ausführlicheren Leitfaden zur Verwendung von Prototypen in JavaScript</a> zu lesen, sobald Sie diesen Abschnitt verinnerlicht haben und mehr wissen möchten. Dieser Abschnitt ist absichtlich stark vereinfacht, um diese Konzepte bei der ersten Begegnung für Sie etwas leichter verständlich zu machen.</p>
+</div>
+
+<div class="warning">
+<p><strong>Wichtig:</strong> Die Prototyp-Eigenschaft ist einer der Teile von JavaScript, die stark verwirrend benannt worden sind - man könnte meinen, dass <code>this</code> auf das Prototyp-Objekt des aktuellen Objekts zeigt, aber das tut sie nicht. <code>prototype</code> ist ein internes Objekt, auf das mit <code>__proto__</code> zugegriffen werden kann, erinnern Sie sich?</p>
+</div>
+
+<h2 id="Zurück_zu_create">Zurück zu create()</h2>
+
+<p>Etwas früher im Beitrag haben wir gezeigt, wie die Methode <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Object/create">Object.create()</a> verwendet werden kann, um eine neue Objektinstanz zu erzeugen.</p>
+
+<ol>
+ <li>Geben Sie folgendes in der JavaScript-Konsole Ihres vorherigen Beispiels ein:
+  <pre class="brush: js">let person2 = Object.create(person1);</pre>
+ </li>
+ <li>Was <code>create()</code> tatsächlich tut, ist lediglich ein neues Objekt aus einem spezifizierten Prototyp-Objekt zu erstellen. Hier wird <code>person2</code> erstellt indem <code>person1</code> als Prototyp Objekt verwendet wird. Man kann das überprüfen indem man das folgende in der Konsole eingibt:
+  <pre class="brush: js">person2.__proto__</pre>
+ </li>
+</ol>
+
+<p>Dies wird das <code>person1</code>-Objekt zurückgeben.</p>
+
+<h2 id="Die_Konstruktor-Eigenschaft">Die Konstruktor-Eigenschaft</h2>
+
+<p>Jede Konstruktorfunktion hat eine Prototyp-Eigenschaft, deren Wert ein Objekt ist, das eine <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">constructor</a>-Eigenschaft enthält. Diese Konstruktoreigenschaft zeigt auf die ursprüngliche Konstruktorfunktion. Wie Sie im nächsten Abschnitt sehen werden, werden Eigenschaften, die auf der <code>Person.prototype</code>-Eigenschaft (oder im Allgemeinen auf der Prototyp-Eigenschaft einer Konstruktorfunktion, die ein Objekt ist, wie im obigen Abschnitt erwähnt) definiert sind, für alle Instanzobjekte verfügbar, die mit dem <code>Person()</code>-Konstruktor erstellt werden. Daher ist die Konstruktor-Eigenschaft auch für die beiden Objekte <code>Person1</code> und <code>Person2</code> verfügbar.</p>
+
+<ol>
+ <li>Probieren Sie zum Beispiel diese Befehle in der Konsole aus:
+  <pre class="brush: js">person1.constructor
+person2.constructor</pre>
+
+  <p>Diese sollten beide den <code>Person()</code>-Konstruktor zurückgeben, da dieser die ursprüngliche Definition dieser Instanzen enthält.</p>
+
+  <p>Ein cleverer Trick ist es, dass Sie am Ende der <code>constructor</code>-Eigenschaft Klammern setzen können (die alle erforderlichen Parameter enthalten), um eine weitere Objektinstanz aus diesem Konstruktor zu erzeugen. Der Konstruktor ist schließlich eine Funktion und kann daher mit Hilfe von Klammern aufgerufen werden; Sie müssen nur das neue Schlüsselwort einfügen, um anzugeben, dass Sie die Funktion als Konstruktor verwenden wollen.</p>
+ </li>
+ <li>Geben Sie folgendes in die Konsole ein:
+  <pre class="brush: js">let person3 = new person1.constructor('Karen', 'Stephenson', 26, 'female', ['playing drums', 'mountain climbing']);</pre>
+ </li>
+ <li>Nun können Sie zum Beispiel auf die Funktionen Ihres neuen Objekts zuzugreifen:
+  <pre class="brush: js">person3.name.first
+person3.age
+person3.bio()</pre>
+ </li>
+</ol>
+
+<p>Das funktioniert gut. Sie werden es nicht oft benutzen müssen, aber es kann wirklich nützlich sein, wenn Sie eine neue Instanz erzeugen wollen und aus irgendeinem Grund keine Referenz auf den Originalkonstruktor leicht verfügbar ist.</p>
+
+<p>Die <code>constructor</code>-Eigenschaft hat andere Verwendungsmöglichkeiten. Wenn Sie z.B. eine Objektinstanz haben und den Namen des Konstruktors zurückgeben wollen, von dem das Objekt eine Instanz ist, können Sie Folgendes verwenden:</p>
+
+<pre class="brush: js">instanceName.constructor.name</pre>
+
+<p>Geben Sie zum Beispiel folgendes ein:</p>
+
+<pre class="brush: js">person1.constructor.name
+</pre>
+
+<div class="note">
+<p>Hinweis: Der Wert von <code>constructor.name</code> kann sich ändern (aufgrund von prototypischer Vererbung, Bindung, Präprozessoren, Transpilern, etc.), so dass Sie für komplexere Beispiele stattdessen den <code>instanceof</code>-Operator verwenden sollten.</p>
+</div>
+
+<ol>
+</ol>
+
+<h2 id="Prototypen_modifizieren">Prototypen modifizieren</h2>
+
+<p>Schauen wir uns ein Beispiel für die Veränderung der Prototyp-Eigenschaft einer Konstruktor-Funktion näher an - Methoden, die dem Prototyp hinzugefügt werden, sind dann auf allen Objektinstanzen verfügbar, die aus dem Konstruktor heraus erzeugt werden. An diesem Punkt werden wir schließlich etwas zum Prototyp unseres Konstruktors <code>Person()</code> hinzufügen.</p>
+
+<ol>
+ <li>Gehen Sie zurück zu unserem Beispiel <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">oojs-class-further-exercises.html</a> und erstellen Sie eine lokale Kopie des <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">Quellcodes</a>. Fügen Sie unter dem vorhandenen JavaScript den folgenden Code hinzu, der eine neue Methode zur Prototyp-Eigenschaft des Konstruktors hinzufügt:
+
+  <pre class="brush: js">Person.prototype.farewell = function() {
+  alert(this.name.first + ' has left the building. Bye for now!');
+};</pre>
+ </li>
+ <li>Speichern Sie bitte den Code, laden den Browser neu und geben bitte folgendes in die Konsole ein:
+  <pre class="brush: js">person1.farewell();</pre>
+ </li>
+</ol>
+
+<p>Sie sollten eine Warnmeldung erhalten, die den Namen der Person, wie er im Konstruktor definiert ist, anzeigt. Das ist wirklich nützlich, aber noch nützlicher ist, dass die gesamte Vererbungskette dynamisch aktualisiert wurde, wodurch diese neue Methode automatisch auf allen vom Konstruktor abgeleiteten Objektinstanzen verfügbar ist.</p>
+
+<p>Denken Sie einen Moment in Ruhe darüber nach. In unserem Code definieren wir den Konstruktor, dann erzeugen wir ein Instanzobjekt aus dem Konstruktor, dann fügen wir dem Prototypen des Konstruktors eine neue Methode hinzu:</p>
+
+<pre class="brush: js">function Person(first, last, age, gender, interests) {
+
+  // Definition der Eigenschaften und methoden
+
+}
+
+let person1 = new Person('Tammi', 'Smith', 32, 'neutral', ['music', 'skiing', 'kickboxing']);
+
+Person.prototype.farewell = function() {
+  alert(this.name.first + ' has left the building. Bye for now!');
+};</pre>
+
+<p>Aber die Methode <code>farewell()</code> ist immer noch auf der <code>person1</code>-Objektinstanz verfügbar - ihre Mitglieder wurden automatisch aktualisiert, um die neu definierte Methode <code>farewell()</code> aufzunehmen.</p>
+
+<div class="note">
+<p>Hinweis: Sie können dazu gerne auch unsere Beispieldatei <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">oojs-class-further-exercises.html</a> nutzen (<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">hier finden Sie den Quellcode</a>), falls Ihnen der Quellcode aus dem vorangegangenen Artikel nicht mehr zur Verfügung steht bzw. Ihr Quellcode nicht funktioniert.</p>
+</div>
+
+<p>Sie werden nur selten Eigenschaften sehen, die auf der Prototyp-Eigenschaft definiert sind, weil sie nicht sehr flexibel sind, wenn sie so definiert worden. Sie könnten zum Beispiel eine solche Eigenschaft hinzufügen:</p>
+
+<pre class="brush: js">Person.prototype.fullName = 'Bob Smith';</pre>
+
+<p>Das ist nicht sehr flexibel, da die Person vielleicht nicht so genannt wird. Es wäre viel besser, den vollen Namen aus <code>name.first</code> und <code>name.last</code> zu bilden:</p>
+
+<pre class="brush: js">Person.prototype.fullName = this.name.first + ' ' + this.name.last;</pre>
+
+<p>Dies funktioniert jedoch nicht, da sich <code>this</code> in diesem Fall auf den globalen Bereich bezieht, nicht auf den Funktionsbereich. Der Aufruf dieser Eigenschaft würde <code>undefined</code> zurückgeben. Dies funktionierte gut auf die Methode, die wir früher im Prototyp definiert haben, weil sie innerhalb eines Funktionsbereichs sitzt, der erfolgreich in den Objektinstanzbereich übertragen wird. Sie können also konstante Eigenschaften auf dem Prototyp definieren (d.h. solche, die sich nie ändern müssen), aber im allgemeinen funktioniert es besser, Eigenschaften innerhalb des Konstruktors zu definieren.</p>
+
+<p>In der Tat ist es üblich, für weitere Objektdefinitionen die Eigenschaften innerhalb des Konstruktors und die Methoden auf dem Prototyp zu definieren. Dies macht den Code leichter lesbar, da der Konstruktor nur die Eigenschaftsdefinitionen enthält und die Methoden in separate Blöcke aufgeteilt sind. Zum Beispiel:</p>
+
+<pre class="brush: js">// Konstruktor mit der Definition der Eigenschaften
+
+function Test(a, b, c, d) {
+  // property definitions
+}
+
+// eine erste Methode wird definiert
+
+Test.prototype.x = function() { ... };
+
+// eine zweite Methode wird definiert
+
+Test.prototype.y = function() { ... };
+
+// etc.</pre>
+
+<p>Dieses Muster kann in Aktion im Beispiel der <a href="https://github.com/zalun/school-plan-app/blob/master/stage9/js/index.js">Schulplan-App von Piotr Zalewa</a> gesehen werden.</p>
+
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+
+<p><br>
+ Dieser Beitrag hat Objekt-Prototypen in JavaScript behandelt, einschließlich wie Prototyp-Objektketten es ermöglichen, das Objekte voneinander Funktionen (ver)erben können, sowie Prototyp-Eigenschaften und wie diese verwendet werden können, um neue Methoden zu Konstruktoren hinzuzufügen. Darüber hinaus andere mit den Themen verwandte Themen.</p>
+
+<p>Im nächsten Artikel sehen wir uns an, wie Sie die Vererbung von Funktionalität zwischen zwei Ihrer eigenen benutzerdefinierten Objekte implementieren können.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}</p>
+
+<h2 id="In_diesem_Modul">In diesem Modul</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Objekt Grundlagen</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Objektorientiertes JavaScript für Anfänger</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Objekt Prototypen</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Vererbung in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Mit JSON Daten arbeiten</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Objekterstellungsübungen</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Funktionalität zu unserer Hüpfball Demo hinzufügen</a></li>
+</ul>
diff --git a/files/de/learn/mitarbeiten/index.html b/files/de/learn/mitarbeiten/index.html
new file mode 100644
index 0000000000..02405b9280
--- /dev/null
+++ b/files/de/learn/mitarbeiten/index.html
@@ -0,0 +1,82 @@
+---
+title: Zum MDN Lern-Bereich beitragen
+slug: Learn/Mitarbeiten
+tags:
+  - Anfänger
+  - Anleitung
+  - Dokumentation
+  - Lernen
+  - MDN Meta
+  - Mitmachen
+translation_of: Learn/How_to_contribute
+---
+<p>{{LearnSidebar}}</p>
+
+<p>Falls Du zum ersten Mal oder nach langer Suche hier gelandet bist liegt das vermutlich daran, dass Du etwas zum MDN Lern-Bereich beitragen möchtest. Herzlich Willkommen!</p>
+
+<p><span class="seoSummary">Auf dieser Seite findest Du alles was Du benötigst um den Lern-Bereich im MDN zu verbessern. Du hast zahlreiche Möglichkeiten hier mitzuwirken: Als <a href="#Anfänger">Anfänger</a>, <a href="#Webentwickler">Webentwickler</a> oder <a href="/en-US/Learn/How_to_contribute#I'm_a_teacher">Lehrer</a> - je nachdem, wie viel Zeit und Erfahrung Du hast.</span></p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Falls Du bereits im MDN mitwirkst prüfe am besten noch einmal die <a href="/en-US/docs/MDN/Doc_status/Learn">documentation status page</a>. Dort kannst Du sehen was bereits gemacht wurde und was als nächstes in Angriff genommen werden sollte.</p>
+</div>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Mitwirkende verwenden ein<a href="https://trello.com/b/LDggrYSV"> Trello board</a> um ihre Aufgaben zu organisieren. Falls Du das auch tun willst erstelle einen<a href="https://trello.com/signup"> Trello account</a> und schreibe <a href="/en-US/docs/MDN/Contribute/Drivers_and_curators">Jeremie</a> an, damit er Dir Schreibrechte für das Board gewährt.</p>
+</div>
+
+<h2 id="Ich_bin_Anfänger"><a id="Anfänger" name="Anfänger"></a>Ich bin Anfänger</h2>
+
+<p>Grossartig! Anfänger sind sehr wichtig für das Erstellen und das Bewerten der Lernmaterialien. Für sie sind die Artikel geschrieben und ihre einzigartige Sicht auf die Artikel kann sie zu wertvollen Mitarbeitern unseres Teams machen. Falls Du einen unserer Artikel zum Lernen verwendest und nicht weiter kommst oder ihn verwirrend findest kannst Du ihn entweder selbst verbessern oder uns Dein Problem melden. Wir kümmern uns darum.</p>
+
+<p>Diese Form der Mitarbeit während des Lernens kann auch Spass machen. Falls Du Dich irgendwo nicht zurechtfindest oder Fragen hast kannst Du uns über <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">unsere Mailingliste</a> oder in unserem <a href="/en-US/docs/MDN/Community#Get_into_IRC">IRC channel</a> (mehr Informationen am Ende dieser Seite) erreichen.</p>
+
+<p>Hier ein paar Vorschläge wie Du mithelfen kannst:</p>
+
+<dl>
+ <dt><a href="/en-US/docs/MDN/Contribute/Howto/Tag">Füge Tags zu unseren Artikeln hinzu</a> (<em>5 min</em>)</dt>
+ <dd>Eine einfache Möglichkeit unser Projekt zu unterstützten ist das Taggen von MDN-Inhalten. Da viele unserer Artikel Tags verwenden um Informationen im Kontext aufzubereiten, ist das Taggen eine große Hilfe für uns. Um loszulegen schau Dir die Listen von <a href="/en-US/docs/MDN/Doc_status/Glossary#No_tags">glossary entries</a> und <a href="/en-US/docs/MDN/Doc_status/Learn#No_tags">learning articles</a> ohne Tags an.</dd>
+ <dt><a href="/en-US/docs/Glossary">Lese und bewerte einen Glossar-Eintrag</a> (<em>15 min</em>)</dt>
+ <dd>Als Anfänger schaut man unvoreingenommen auf Inhalte. Wenn Du der Meinung bist, dass ein Glossar-Eintrag schwer zu verstehen ist, dann bedeutet das, dass er verbessert werden muss. Du kannst gleich loslegen und das ändern, was Deiner Meinung nach geändert werden muss. Falls Du es nicht selbst machen willst gib uns über unsere<a href="/en-US/docs/MDN/Community#Join_our_mailing_lists"> mailing list </a>Bescheid.</dd>
+ <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Schreibe einen neuen Glossar-Eintrag</a> (<em>1 Stunde</em>)</dt>
+ <dd>Einen eigenen Glossar-Eintrag zu schreiben ist die effektivste Methode, um etwas Neues zu lernen. Such Dir einfach irgendetwas aus, das Du verstehen möchtest. Während Du Dich damit beschäftigst kannst Du dazu einen Glossar-Eintrag verfassen. Anderen Menschen etwas zu erklären hilft Dir dabei das Wissen darüber zu festigen.</dd>
+ <dt><a href="/en-US/Learn/Index">Lese und bewerte einen Lern-Artikel</a> (<em>2 Stunden</em>)</dt>
+ <dd>Das Lesen und Bewerten eines Lern-Artikels ist ziemlich genau dasselbe wie das Bewerten eines Glossar-Eintrags (siehe oben); es dauert allerdings deutlich länger, da diese Artikel in der Regel einen größeren Umfang haben.</dd>
+</dl>
+
+<h2 id="Ich_bin_Webentwickler"><a id="Webentwickler" name="Webentwickler"></a>Ich bin Webentwickler</h2>
+
+<p>Fantastisch! Deine technischen Fähigkeiten sind genau das, was wir brauchen, um technisch verständliche und korrekte Inhalte für Anfänger bereitzustellen. Da dieser Bereich von MDN dazu da ist, das Web zu verstehen, gilt es, deine Erklärungen so einfach wie möglich zu halten. Sie sollten aber auch nicht so einfach sein, dass sie den Benutzern nicht weiterhelfen. Schreibe lieber verständlich als übergenau.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Glossary">Lies und bewerte einen Glossar-Eintrag</a> (<em>15 min</em>)</dt>
+ <dd>Wir müssen darauf achten, dass unsere Inhalte technisch korrekt und dabei nicht übergenau sind. Du kannst gleich loslegen und das ändern, was deiner Meinung nach geändert werden muss. Falls du davor mit uns deine Änderungen besprechen möchtest, erreichst du uns über die <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">Mailing Liste</a> oder den <a href="/en-US/docs/MDN/Community#Get_into_IRC">IRC channel</a>.</dd>
+ <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Schreibe einen neuen Glossar-Eintrag</a> (<em>1 Stunde</em>)</dt>
+ <dd>Technischen Jargon zu entfernen ist eine gute Möglichkeit zu lernen. Außerdem hilft es dabei, sowohl technisch genau als auch einfach zu schreiben. Anfänger werden es dir danken. Wir haben <a href="/en-US/docs/Glossary#Contribute">many undefined terms</a>, die der Klärung bedürfen. Wähle einen davon aus und fang einfach an.</dd>
+ <dt><a href="/en-US/Learn/Index">Lies und bewerte einen Lern-Artikel</a> (<em>2 Stunden</em>)</dt>
+ <dd>Das Lesen und Bewerten eines Lern-Artikels ist ziemlich genau dasselbe wie das Bewerten eines Glossar-Eintrags (siehe obene); es dauert allerdings deutlich länger, da diese Artikel in der Regel einen größeren Umfang haben.</dd>
+ <dt><a href="/en-US/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">Schreibe einen neuen Lern-Artikel</a> (<em>4 Stunden</em>)</dt>
+ <dd>MDN möchte nicht einfach nur neue Artikel über Web-Technologien (<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">HTML</a>, <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">CSS</a>, <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript</a>, etc) veröffentlichen. Wir haben auch eine Menge Artikel im MDN, die geprüft und überarbeitet werden müssen. Gib alles, was Du kannst um Web-Technolgien auch für Anfänger zugänglich zu machen.</dd>
+ <dt><a href="/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Füge Übungen, Code-Beispiele oder interaktive Lernmittel hinzu</a> (<em>? hours</em>)</dt>
+ <dd>Alle unsere Lern-Artikel sollten "aktive Lernmittel" (wir wir es nennen) unterstüzen, denn Menschen lernen am besten durch praktisches Ausprobieren. Solche Lernmittel sind z.B. Übungen oder interaktiver Content, den die Lernenden ausführen und dessen Konzepte sie im Detail ändern können. Es gibt mehrere Wege zum Erzeugen von interaktivem Content, vom Anlegen von Code-Beispielen mit <a href="http://jsfiddle.net" rel="external">JSFiddle</a> oder ähnlichen Tools bis hin zum Aufbau komplett änderbaren interaktiven Contents mit <a href="https://thimble.webmaker.org/" rel="external">Thimble</a>. Entfessele Deine Kreativität!</dd>
+</dl>
+
+<h2 id="Ich_bin_Lehrer">Ich bin Lehrer</h2>
+
+<p>MDN hat eine lange Geschichte technischer Exzellenz, aber wir haben ein paar Defizite in der Art und Weise wie wir Konzepte an Neu-Einsteiger vermitteln. Hier brauchen wir Dich als Lehrer und Pädagoge. Du kannst uns helfen sicherzustellen, dass unsere Lehrmaterialien einen hohen praktischen Nutzen für unsere Leser haben.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Glossary">Lese und überprüfe einen Glossar-Eintrag</a> (<em>15 min</em>)</dt>
+ <dd>Prüfe einen Glossar-Eintrag und scheue Dich nicht, aus Deiner Sicht notwendige Änderungen durchzuführen. Wenn Du den Inhalt vor dem Ändern diskutieren möchtest, dann informiere uns über <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">unsere Mailing-Liste</a> oder unseren <a href="/en-US/docs/MDN/Community#Get_into_IRC">IRC channel</a>.</dd>
+ <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Schreibe einen neuen Glossar-Eintrag</a> (<em>1 hour</em>)</dt>
+ <dd>Klare, einfache Begriffs-Definitonen und Übersichtsbilder von Konzepten im Glossar sind kritisch im Hinblick auf die Bedürfnisse von Anfängern. Deine Erfahrung als Pädagoge kann uns helfen, exzellente Glossar-Einträge zu pflegen; wir haben <a href="/en-US/docs/Glossary#Contribute">viele undefinierte Begriffe</a>, die Deine Aufmerksamkeit benötigen. Such Dir einen heraus und los geht's.</dd>
+ <dt><a href="/en-US/docs/tag/needsSchema">Füge Illustrationen und/oder Schemata zu Artikel hinzu</a> (<em>1 hour</em>)</dt>
+ <dd>Wie Du vielleicht weißt sind Illustrationen von unschätzbarem Wert für jedes Lehrmittel. Hier haben wir im MDN oftmals Defizite und Deine Fähigkeiten können in diesem Bereich den Unterschied machen. Prüfe die <a href="/en-US/docs/tag/needsSchema">Artikel mit zu wenig Illustrationen</a> und suche Dir einen heraus, für den Du eine Illustration anlegen möchtest.</dd>
+ <dt><a href="/en-US/Learn/Index">Lese und überprüfe einen Lern-Artikel</a> (<em>2 hours</em>)</dt>
+ <dd>Das ist so ähnlich wie das Überprüfen von Glossar-Einträgen (siehe oben). Aber es erfordert mehr Zeit, da die Artikel in der Regel umfangreicher sind.</dd>
+ <dt><a href="/en-US/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">Schreibe einen neuen Lern-Artikel</a> (<em>4 hours</em>)</dt>
+ <dd>Wir brauchen einfache, zielführende Artikel über das Web im allgemeinen und die im Web verwendeten Technologien und Funktionen. Da diese Artikel etwas vermitteln und nicht alles Mögliche literarisch aufbereiten sollen ist Deine Erfahrung gefragt, um die relevanten Themen zu finden und diese zielgruppengerecht aufzubereiten.</dd>
+ <dt><a href="/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Füge Übungen, Ratespiele oder interaktive Lernmittel hinzu</a> (<em>? hours</em>)</dt>
+ <dd>Alle unsere Lern-Artikel benötigen "aktive Lernmittel". Solche Lernmittel sind z.B. Übungen oder interaktiver Content, mit dessen Hilfe die Lernenden den vermittelten Lernstoff anwenden und weiterentwickeln können. Es gibt eine Menge Dinge die Du hier tun kannst, von Ratespielen bis hin zum Aufbau komplett änderbaren interaktiven Contents mit <a href="https://thimble.webmaker.org/" rel="external">Thimble</a>. Entfessele Deine Kreativität!</dd>
+ <dt><a href="/en-US/docs/MDN/Contribute/Howto/Create_learning_pathways">Füge Lern-Pfade hinzu</a> (<em>? hours</em>)</dt>
+ <dd>Um fortschrittliche und nachvollziehbare Tutorials anzubieten müssen wir unsere Inhalte wie Lern-Pfade gestalten. Ein möglicher Weg ist, bestehende Artikel darauf zu prüfen was diesen Artikeln zu einem Lern-Artikel fehlt.</dd>
+</dl>
diff --git a/files/de/learn/server-side/erste_schritte/index.html b/files/de/learn/server-side/erste_schritte/index.html
new file mode 100644
index 0000000000..d2a3cc75ca
--- /dev/null
+++ b/files/de/learn/server-side/erste_schritte/index.html
@@ -0,0 +1,49 @@
+---
+title: Erste Schritte in serverseitiger Webseiten-Programmierung
+slug: Learn/Server-side/Erste_Schritte
+tags:
+  - Anfänger
+  - Einführung
+  - Lernen
+  - Serverseitige Programmierung
+translation_of: Learn/Server-side/First_steps
+---
+<p>{{LearnSidebar}}<br>
+ In diesem Modul beantworten wir grundlegende Fragen zur serverseitigen Programmierung - "Was ist das?", "Worin unterscheidet sie sich von der clientseitigen Programmierung?" und "Warum ist sie so nützlich?". Danach geben wir Ihnen einen Überblick über einige der beliebtesten serverseitigen Web-Frameworks und beraten Sie, wie Sie das am besten geeignete Framework für die Erstellung Ihrer ersten Website auswählen können. Schließlich bieten wir auch noch einen Einführungsartikel über Webserver-Sicherheit.</p>
+
+<p> </p>
+
+<h2 id="Vorraussetzungen">Vorraussetzungen</h2>
+
+<p>Wenn Sie mit diesem Modul starten, müssen Sie keine Kenntnisse in der serverseitigen Website-Programmierung oder in irgendeiner anderen Art von Programmierung haben. </p>
+
+<p>Allerdings müssen Sie verstehen, "Wie das Web funktioniert". Wir empfehlen Ihnen, zuerst die folgenden Themen zu lesen:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server" rel="noreferrer">Was ist ein Web-Server?</a></li>
+ <li><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need" rel="noreferrer">Welche Software benötige ich zum Erstellen einer Webseite?</a></li>
+ <li><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server" rel="noreferrer">Wie lädt man Seiten auf einen Webserver hoch?</a></li>
+</ul>
+
+<p>Mit diesem grundlegenden Verständnis sind Sie bereit, sich durch die einzelnen Module in diesem Abschnitt zu arbeiten. </p>
+
+<h2 id="Anleitungen">Anleitungen</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Server-side/First_steps/Introduction" rel="noreferrer">Einführung auf der Serverseite</a></dt>
+ <dd>
+ <p>Willkommen zum MDN Einsteigerkurs Server-seitige Programmierung! In diesem ersten Artikel betrachten wir die grundlegende serverseitige Programmierung und beantworten Fragen wie "Was ist das?", "Worin unterscheidet es sich von der clientseitigen Programmierung?" und "Warum ist es so nützlich?". Nachdem Sie diesen Artikel gelesen haben, werden Sie den Einfluss verstehen, den Websites durch serverseitige Programmierung erhalten.</p>
+ </dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview" rel="noreferrer">Überblick über den Client-Server</a></dt>
+ <dd>
+ <p>Nachdem Sie nun den Zweck und die möglichen Vorteile der serverseitigen Programmierung kennen, werden wir jetzt im Detail untersuchen was passiert, wenn ein Server eine "dynamische Anforderung" von einem Browser erhält. Da die meisten serverseitigen Codes auf der Website Anfragen und Antworten auf ähnliche Weise behandeln, hilft Ihnen dies zu verstehen, was Sie beim Schreiben Ihres eigenen Codes tun müssen.</p>
+ </dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/First_steps/Web_frameworks" rel="noreferrer">Serverseitige Webframeworks</a></dt>
+ <dd>Der letzte Artikel zeigte Ihnen was eine serverseitige Webanwendung tun muss, um auf Anfragen von einem Webbrowser zu reagieren. Nun zeigen wir Ihnen, wie Web-Frameworks diese Aufgaben vereinfachen können und helfen Ihnen, das richtige Framework für Ihre erste serverseitige Webanwendung auszuwählen.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/First_steps/Website_security" rel="noreferrer">Webseitensicherheit</a></dt>
+ <dd>Die Sicherheit der Website erfordert ständige Aufmerksamkeit in allen Aspekten des Designs und der Nutzung der Website. Dieser einleitende Artikel wird Sie nicht zu einem Guru für Websitensicherheit machen, aber er wird Ihnen helfen, die ersten wichtigen Schritte zu verstehen die Sie unternehmen können, um Ihre Webanwendung gegen die häufigsten Bedrohungen zu schützen.</dd>
+</dl>
+
+<h2 id="Aufgaben">Aufgaben</h2>
+
+<p>Dieses Modul "Übersicht" hat keine Aufgaben, da wir Ihnen noch keinen Code angezeigt haben. Wir hoffen, dass Sie an dieser Stelle ein gutes Verständnis dafür haben, welche Art von Funktionalität Sie mit serverseitiger Programmierung liefern können und Sie haben eine Entscheidung darüber getroffen, mit welchem serverseitigen Web-Framework Sie Ihre erste Website erstellen werden.</p>
diff --git a/files/de/learn/server-side/erste_schritte/introduction/index.html b/files/de/learn/server-side/erste_schritte/introduction/index.html
new file mode 100644
index 0000000000..2924655941
--- /dev/null
+++ b/files/de/learn/server-side/erste_schritte/introduction/index.html
@@ -0,0 +1,230 @@
+---
+title: Einführung auf der Serverseite
+slug: Learn/Server-side/Erste_Schritte/Introduction
+tags:
+  - Anfänger
+  - Einführung
+translation_of: Learn/Server-side/First_steps/Introduction
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}</div>
+
+<p class="summary"><span class="seoSummary">Willkommen zum Einsteigerkurs für serverseitige Programmierung! In diesem ersten Artikel schauen wir uns die serverseitige Programmierung im Überblick an, antworten auf Fragen wie "Was ist das?", "Wie unterscheidet es sich von der Client-Seitigen Programmierung?" und "Warum ist es so nützlich?" Nachdem Du diesen Artikel gelesen hast wirst Du den Einfluss verstehen, den Websites durch die serverseitige Programmierung erhalten.</span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Vorraussetzungen:</th>
+   <td>Grundlegende Computerkenntnisse. Ein grundlegendes Verständnis davon, was ein Webserver ist.</td>
+  </tr>
+  <tr>
+   <th scope="row">Ziel:</th>
+   <td>Sich damit vertraut machen, was serverseitige Programmierung ist, was sie kann und wie sie sich von der clientseitigen Programmierung unterscheidet.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Die meisten großen Websites verwenden serverseitigen Code, um bei Bedarf verschiedene Daten dynamisch anzuzeigen, die im Allgemeinen aus einer auf einem Server gespeicherten Datenbank gezogen und an den Client gesendet werden, um über einen bestimmten Code (z.B. HTML und JavaScript) angezeigt zu werden.</p>
+
+<p>Der wahrscheinlich größte Vorteil von serverseitigem Code liegt darin, dass man den Inhalt individuell für jeden Benutzer anpassen kann. Dadurch können zum Beispiel bestimmte Details oder Angebote einer Website für bestimmte User hervorgehoben werden. Des weiteren kann serverseitiger Code die Website benutzerfreundlicher machen, indem zum Beispiel Kreditkarteninformationen oder die Versandadresse für weitere Bestellungen gespeichert werden.</p>
+
+<p>Serverseitiger Code wird auch benötigt, um Interaktionen des Benutzers zu ermöglichen. Hierdurch können z.B. Benachrichtigungen oder Updates per E-Mail oder andere Kanäle versendet werden. All diese Vorteile bringen eine bessere Verknüpfung zwischen Benutzer und Website.</p>
+
+<p>In der heutigen Zeit des Webdevelopments wird es deshalb empfohlen sich auch mit der serverseitigen Programmierung von Websites auseinanderzusetzen.</p>
+
+<h2 id="What_is_server-side_website_programming">What is server-side website programming?</h2>
+
+<p>Web browsers communicate with <a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server" rel="noreferrer">web servers</a> using the <strong>H</strong>yper<strong>T</strong>ext <strong>T</strong>ransfer <strong>P</strong>rotocol ({{glossary("HTTP")}}). When you click a link on a web page, submit a form, or run a search, an <strong>HTTP request</strong> is sent from your browser to the target server.</p>
+
+<p>The request includes a URL identifying the affected resource, a method that defines the required action (for example to get, delete, or post the resource), and may include additional information encoded in URL parameters (the field-value pairs sent via a <a href="https://en.wikipedia.org/wiki/Query_string" rel="noreferrer">query string</a>), as POST data (data sent by the <a href="/en-US/docs/Web/HTTP/Methods/POST" rel="noreferrer">HTTP POST method</a>), or in associated {{glossary("Cookie", "cookies")}}.</p>
+
+<p>Web servers wait for client request messages, process them when they arrive, and reply to the web browser with an <strong>HTTP response</strong> message. The response contains a status line indicating whether or not the request succeeded (e.g. "HTTP/1.1 200 OK" for success). </p>
+
+<p>The body of a successful response to a request would contain the requested resource (e.g. a new HTML page, or an image, etc...), which could then be displayed by the web browser.</p>
+
+<h3 id="Static_sites">Static sites</h3>
+
+<p>The diagram below shows a basic web server architecture for a <em>static site</em> (a static site is one that returns the same hard-coded content from the server whenever a particular resource is requested). When a user wants to navigate to a page, the browser sends an HTTP "GET" request specifying its URL.</p>
+
+<p>The server retrieves the requested document from its file system and returns an HTTP response containing the document and a <a href="/en-US/docs/Web/HTTP/Status#Successful_responses" rel="noreferrer">success status</a> (usually 200 OK). If the file cannot be retrieved for some reason, an error status is returned (see <a href="/en-US/docs/Web/HTTP/Status#Client_error_responses" rel="noreferrer">client error responses</a> and <a href="/en-US/docs/Web/HTTP/Status#Server_error_responses" rel="noreferrer">server error responses</a>).</p>
+
+<p><img alt="A simplified diagram of a static web server." src="https://mdn.mozillademos.org/files/13841/Basic%20Static%20App%20Server.png" style="height: 223px; width: 800px;"></p>
+
+<h3 id="Dynamic_sites">Dynamic sites</h3>
+
+<p>A dynamic website is one where some of the response content is generated <em>dynamically </em>only when needed. On a dynamic website HTML pages are normally created by inserting data from a database into placeholders in HTML templates (this is a much more efficient way of storing large amounts of content than using static websites). </p>
+
+<p>A dynamic site can return different data for a URL based on information provided by the user or stored preferences and can perform other operations as part of returning a response (e.g. sending notifications).</p>
+
+<p>Most of the code to support a dynamic website must run on the server. Creating this code is known as "<strong>server-side programming</strong>" (or sometimes "<strong>back-end scripting</strong>").</p>
+
+<p>The diagram below shows a simple architecture for a <em>dynamic website</em>. As in the previous diagram, browsers send HTTP requests to the server, then the server processes the requests and returns appropriate HTTP responses.</p>
+
+<p>Requests for <em>static </em>resources are handled in the same way as for static sites (static resources are any files that don't change —typically: CSS, JavaScript, Images, pre-created PDF files etc). </p>
+
+<p><img alt="A simplified diagram of a web server that uses server-side programming to get information from a database and construct HTML from templates. This is the same diagram as is in the Client-Server overview." src="https://mdn.mozillademos.org/files/13839/Web%20Application%20with%20HTML%20and%20Steps.png"></p>
+
+<p>Requests for dynamic resources are instead forwarded (2) to server-side code (shown in the diagram as a <em>Web Application</em>). For "dynamic requests" the server interprets the request, reads required information from the database (3), combines the retrieved data with HTML templates (4), and sends back a response containing the generated HTML (5,6). </p>
+
+<div>
+<h2 id="Are_server-side_and_client-side_programming_the_same">Are server-side and client-side programming the same?</h2>
+</div>
+
+<p>Let's now turn our attention to the code involved in server-side and client-side programming. In each case, the code is significantly different:</p>
+
+<ul>
+ <li>They have different purposes and concerns.</li>
+ <li>They generally don't use the same programming languages (the exception being JavaScript, which can be used on the server- and client-side).</li>
+ <li>They run inside different operating system environments.</li>
+</ul>
+
+<p>Code running in the browser is known as <strong>client-side code </strong>and is primarily concerned with improving the appearance and behavior of a rendered web page. This includes selecting and styling UI components, creating layouts, navigation, form validation, etc. By contrast, server-side website programming mostly involves choosing <em>which content</em> is returned to the browser in response to requests. The server-side code handles tasks like validating submitted data and requests, using databases to store and retrieve data and sending the correct data to the client as required.</p>
+
+<p>Client-side code is written using <a href="/en-US/docs/Learn/HTML" rel="noreferrer">HTML</a>, <a href="/en-US/docs/Learn/CSS" rel="noreferrer">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript" rel="noreferrer">JavaScript</a> — it is run inside a web browser and has little or no access to the underlying operating system (including limited access to the file system).</p>
+
+<p>Web developers can't control what browser every user might be using to view a website  — browsers provide inconsistent levels of compatibility with client-side code features, and part of the challenge of client-side programming is handling differences in browser support gracefully.</p>
+
+<p>Server-side code can be written in any number of programming languages — examples of popular server-side web languages include PHP, Python, Ruby, C#, and NodeJS(JavaScript). The server-side code has full access to the server operating system and the developer can choose what programming language (and specific version) they wish to use.</p>
+
+<p>Developers typically write their code using <strong>web frameworks</strong>. Web frameworks are collections of functions, objects, rules and other code constructs designed to solve common problems, speed up development, and simplify the different types of tasks faced in a particular domain.</p>
+
+<p>Again, while both client and server-side code use frameworks, the domains are very different, and hence so are the frameworks. Client-side web frameworks simplify layout and presentation tasks while server-side web frameworks provide a lot of “common” web server functionality that you might otherwise have to implement yourself (e.g. support for sessions, support for users and authentication, easy database access, templating libraries, etc.).</p>
+
+<div class="note">
+<p><strong>Note</strong>: Client-side frameworks are often used to help speed up development of client-side code, but you can also choose to write all the code by hand; in fact, writing your code by hand can be quicker and more efficient if you only need a small, simple web site UI.</p>
+
+<p>In contrast, you would almost never consider writing the server-side component of a web app without a framework — implementing a vital feature like an HTTP server is really hard to do from scratch in say Python, but Python web frameworks like Django provide one out of the box, along with other very useful tools.</p>
+</div>
+
+<div>
+<h2 id="What_can_you_do_on_the_server-side">What can you do on the server-side?</h2>
+
+<p>Server-side programming is very useful because it allows us to <em>efficiently</em> deliver information tailored for individual users and thereby create a much better user experience.</p>
+</div>
+
+<p>Companies like Amazon use server-side programming to construct search results for products, make targeted product suggestions based on client preferences and previous buying habits, simplify purchases, etc.</p>
+
+<p>Banks use server-side programming to store account information and allow only authorized users to view and make transactions. Other services like Facebook, Twitter, Instagram, and Wikipedia use server-side programming to highlight, share, and control access to interesting content.</p>
+
+<p>Some of the common uses and benefits of server-side programming are listed below. You'll note that there is some overlap!</p>
+
+<h3 id="Efficient_storage_and_delivery_of_information">Efficient storage and delivery of information</h3>
+
+<p>Imagine how many products are available on Amazon, and imagine how many posts have been written on Facebook? Creating a separate static page for each product or post would be completely impractical.</p>
+
+<p>Server-side programming allows us to instead store the information in a database and dynamically construct and return HTML and other types of files (e.g. PDFs, images, etc.). It is also possible to simply return data ({{glossary("JSON")}}, {{glossary("XML")}}, etc.) for rendering by appropriate client-side web frameworks (this reduces the processing burden on the server and the amount of data that needs to be sent).</p>
+
+<p>The server is not limited to sending information from databases, and might alternatively return the result of software tools, or data from communications services. The content can even be targeted for the type of client device that is receiving it.</p>
+
+<p>Because the information is in a database, it can also more easily be shared and updated with other business systems (for example, when products are sold either online or in a shop, the shop might update its database of inventory).</p>
+
+<div class="note">
+<p><strong>Note</strong>: Your imagination doesn't have to work hard to see the benefit of server-side code for efficient storage and delivery of information:</p>
+
+<ol>
+ <li>Go to <a href="https://www.amazon.com" rel="noreferrer">Amazon</a> or some other e-commerce site.</li>
+ <li>Search for a number of keywords and note how the page structure doesn't change, even though the results do. </li>
+ <li>Open two or three different products. Note again how they have a common structure and layout, but the content for different products has been pulled from the database.</li>
+</ol>
+
+<p>For a common search term ("fish", say) you can see literally millions of returned values. Using a database allows these to be stored and shared efficiently, and it allows the presentation of the information to be controlled in just one place.</p>
+</div>
+
+<h3 id="Customised_user_experience">Customised user experience</h3>
+
+<p>Servers can store and use information about clients to provide a convenient and tailored user experience. For example, many sites store credit cards so that details don't have to be entered again. Sites like Google Maps can use saved or current locations for providing routing information, and search or travel history to highlight local businesses in search results.</p>
+
+<p>A deeper analysis of user habits can be used to anticipate their interests and further customize responses and notifications, for example providing a list of previously visited or popular locations you may want to look at on a map.</p>
+
+<div class="note">
+<p><strong>Note: </strong><a href="https://maps.google.com/" rel="noreferrer">Google Maps</a> saves your search and visit history. Frequently visited or frequently searched locations are highlighted more than others.</p>
+
+<p>Google search results are optimized based on previous searches.</p>
+
+<ol>
+ <li> Go to <a href="https:\\google.com" rel="noreferrer">Google search</a>.</li>
+ <li> Search for "football".</li>
+ <li> Now try typing "favourite" in the search box and observe the autocomplete search predictions.</li>
+</ol>
+
+<p>Coincidence? Nada!</p>
+</div>
+
+<h3 id="Controlled_access_to_content">Controlled access to content</h3>
+
+<p>Server-side programming allows sites to restrict access to authorized users and serve only the information that a user is permitted to see.</p>
+
+<p>Real world examples include:</p>
+
+<ul>
+ <li>Social networks like Facebook allow users to fully control their own data but only allow their friends to view or comment on it. The user determines who can see their data, and by extension, whose data appears in their feed —  authorization is a central part of the user experience!</li>
+ <li>
+  <p>The site you are on right now controls access to content: articles are visible to everyone, but only users who have logged in can edit the content. To try this, click on the <strong>Edit </strong>button at the top of this page — if you are logged in you will be shown the edit view; if you are not logged in you will be taken to the sign-up page.</p>
+ </li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: Consider other real examples where access to content is controlled. For example, what can you see if you go to the online site for your bank? Log in to your account — what additional information can you see and modify? What information can you see that only the bank can change?</p>
+</div>
+
+<h3 id="Store_sessionstate_information">Store session/state information</h3>
+
+<p>Server-side programming allows developers to make use of <strong>sessions</strong> — basically, a mechanism that allows a server to store information on the current user of a site and send different responses based on that information.</p>
+
+<p>This allows, for example, a site to know that a user has previously logged in and display links to their emails or order history, or perhaps save the state of a simple game so that the user can go to a site again and carry on where they left it.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Visit a newspaper site that has a subscription model and open a bunch of tabs (e.g. <a href="http://www.theage.com.au/" rel="noreferrer">The Age</a>). Continue to visit the site over a few hours/days. Eventually, you will start to be redirected to pages explaining how to subscribe, and you will be unable to access articles. This information is an example of session information stored in cookies.</p>
+</div>
+
+<h3 id="Notifications_and_communication">Notifications and communication</h3>
+
+<p>Servers can send general or user-specific notifications through the website itself or via email, SMS, instant messaging, video conversations, or other communications services.</p>
+
+<p>A few examples include:</p>
+
+<ul>
+ <li>Facebook and Twitter send emails and SMS messages to notify you of new communications.</li>
+ <li>Amazon regularly sends product e-mails that suggest products similar to those already bought or viewed that you might be interested in.</li>
+ <li>A web server might send warning messages to site administrators alerting them to low memory on the server, or suspicious user activity.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: The most common type of notification is a "confirmation of registration". Pick almost any large site that you are interested in (Google, Amazon, Instagram, etc.) and create a new account using your email address. You will shortly receive an email confirming your registration, or requiring acknowledgment to activate your account.</p>
+</div>
+
+<h3 id="Data_analysis">Data analysis</h3>
+
+<p>A website may collect a lot of data about users: what they search for, what they buy, what they recommend, how long they stay on each page. Server-side programming can be used to refine responses based on analysis of this data.</p>
+
+<p>For example, Amazon and Google both advertise products based on previous searches (and purchases).</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you're a Facebook user, go to your main feed and look at the stream of posts. Note how some of the posts are out of numerical order - in particular, posts with more "likes" are often higher on the list than more recent posts.</p>
+
+<p>Also look at what kind of ads you are being shown — you might see ads for things you looked at on other sites. Facebook's algorithm for highlighting content and advertising can be a bit of a mystery, but it is clear that it does depend on your likes and viewing habits!</p>
+</div>
+
+<h2 id="Summary">Summary</h2>
+
+<p>Congratulations, you've reached the end of the first article about server-side programming. </p>
+
+<p>You've now learned that server-side code is run on a web server and that its main role is to control <em>what</em> information is sent to the user (while client-side code mainly handles the structure and presentation of that data to the user).</p>
+
+<p>You should also understand that it is useful because it allows us to create websites that <em>efficiently</em> deliver information tailored for individual users and have a good idea of some of the things you might be able to do when you're a server-side programmer.</p>
+
+<p>Lastly, you should understand that server-side code can be written in a number of programming languages and that you should use a web framework to make the whole process easier. </p>
+
+<p>In a future article we'll help you choose the best web framework for your first site; Next, though we'll take you through the main client-server interactions in just a little more detail.</p>
+
+<p>{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Server-side/First_steps/Introduction" rel="noreferrer">Introduction to the server side</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview" rel="noreferrer">Client-Server overview</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/First_steps/Web_frameworks" rel="noreferrer">Server-side web frameworks</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/First_steps/Website_security" rel="noreferrer">Website security</a></li>
+</ul>
diff --git a/files/de/learn/server-side/express_nodejs/index.html b/files/de/learn/server-side/express_nodejs/index.html
new file mode 100644
index 0000000000..7462f8c23f
--- /dev/null
+++ b/files/de/learn/server-side/express_nodejs/index.html
@@ -0,0 +1,65 @@
+---
+title: Express Web Anwendungsrahmen (Node.js/JavaScript)
+slug: Learn/Server-side/Express_Nodejs
+translation_of: Learn/Server-side/Express_Nodejs
+---
+<div>{{LearnSidebar}}<br>
+Express ist ein beliebter, weitgehend vorgabefreier Anwendungsbausatz (Framework) für das Web, das in Javascript geschrieben und in der Node.js Laufzeitumgebung beheimatet ist. Das Modul beschreibt einige Schlüsselvorteile dieses Anwendungsrahmens, wie eine Anwendungsumgebung aufzusetzen ist und wie allgemeine Entwicklungs- und Bereitstellungsaufgaben durchzuführen sind.</div>
+
+<h2 id="Voraussetzungen">Voraussetzungen</h2>
+
+<p>Bevor Sie dies Modul beginnen sollten Sie verstehen, was serverseitige Web-Anwendungsentwicklung und Web Frameworks sind – idealerweise durch Studium unseres Moduls <a href="/en-US/docs/Learn/Server-side/First_steps">Erste Schritte Server-side Website Programmierung</a>.<br>
+ Allgemeine Kenntnisse in Programmierung und Javascript werden vorausgesetzt, sind aber zum Verständnis der grundlegenden Konzepte nicht ausschlaggebend.</p>
+
+<div class="note">
+<p><strong>Anmerkung</strong>: Diese Website bietet zahlreiche Quellen zum Lernen von Javascript <em>im Kontext Client-seitiger Entwicklung</em>: <a href="/en-US/docs/Web/JavaScript">Javascript</a>, <a href="/en-US/docs/Web/JavaScript/Guide">Javascript Guide</a>, <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Javascript Basics</a>, <a href="/en-US/docs/Learn/JavaScript">Javascript</a> (Lernen). Der Kern von Javascript und seine Konzepte sind identisch für Server-seitige Entwicklung mit Node.js und dieses Material ist daher relevant.<br>
+ Node.js bietet <a href="https://nodejs.org/dist/latest-v6.x/docs/api/">Schnittstellen/APIs</a> zur Unterstützung von Funktionalitäten, die in einer Umgebung <em>ohne</em> Browser nützlich sind, z.B. um HTTP Server zu bauen oder auf das Dateisystem zuzugreifen, aber es unterstützt keine Javascript APIs zur Interaktion mit Browser oder DOM.</p>
+
+<p>Dieser Leitfaden bietet Informationen zum Umgang mit Node.js und Express. Darüber hinaus gibt es ausgezeichnete Informationsquellen im Internet und in Form von Fachbüchern – Links sind u.a. hier zu finden: <a href="http://stackoverflow.com/a/5511507/894359">How do I get started with Node.js</a> (StackOverflow) und <a href="https://www.quora.com/What-are-the-best-resources-for-learning-Node-js?">What are the best resources for learning Node.js?</a> (Quora).</p>
+</div>
+
+<h2 id="Leitfaden">Leitfaden</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node Einführung</a></dt>
+ <dd>Im ersten Artikel zum Thema Express werden die Fragen beantwortet "Was ist Node?" und "Was ist Express?", außerdem beleuchtet er die Besonderheiten des Express Web Frameworks. Wir werden die wichtigsten Eigenschaften sowie die Grundbausteine einer Express Anwendung kennen lernen (auch wenn wir hier noch keine Entwicklungsumgebung zum Testen aufsetzen werden).</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Aufsetzen einer Node (Express) Entwicklungsumgebung</a></dt>
+ <dd>Now that you know what Express is for, we'll show you how to set up and test a Node/Express development environment on Windows, Linux (Ubuntu), and Mac OS X. Whatever common operating system you are using, this article should give you what you need to be able to start developing Express apps.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: The Local Library website</a></dt>
+ <dd>The first article in our practical tutorial series explains what you'll learn and provides an overview of the "local library" example website we'll be working through and evolving in subsequent articles.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></dt>
+ <dd>This article shows how you can create a "skeleton" website project, which you can then go on to populate with site-specific routes, templates/views, and databases.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Part 3: Using a Database (with Mongoose)</a></dt>
+ <dd>This article briefly introduces databases for Node/Express. It then goes on to show how we can use <a href="http://mongoosejs.com/">Mongoose</a> to provide database access for the <em>LocalLibrary</em> website. It explains how object schema and models are declared, the main field types, and basic validation. It also briefly shows a few of the main ways you can access model data.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Part 4: Routes and controllers</a></dt>
+ <dd>In this tutorial we'll set up routes (URL handling code) with "dummy" handler functions for all the resource endpoints that we'll eventually need in the <em>LocalLibrary</em> website. On completion, we'll have a modular structure for our route handling code, that we can extend with real handler functions in the following articles. We'll also have a really good understanding of how to create modular routes using Express.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a></dt>
+ <dd>We're now ready to add the pages that display the <em>LocalLibrary</em> website books and other data. The pages will include a home page that shows how many records we have of each model type and list and detail pages for all of our models. Along the way, we'll gain practical experience in getting records from the database and using templates.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms</a></dt>
+ <dd>In this tutorial we'll show you how to work with <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Forms</a> in Express, using Pug, and in particular how to write forms to create, update, and delete documents from the database.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a></dt>
+ <dd>Now you've created an awesome <em>LocalLibrary</em> website, you're going to want to install it on a public web server so that it can be accessed by library staff and members over the Internet. This article provides an overview of how you might go about finding a host to deploy your website, and what you need to do in order to get your site ready for production.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry">Installing LocalLibrary on PWS/Cloud Foundry</a></dt>
+ <dd>This article provides a practical demonstration of how to install <em>LocalLibrary</em> on the <a href="http://run.pivotal.io">Pivotal Web Services PaaS cloud</a> — this is a full-featured, open source alternative to Heroku, the PaaS cloud service used in Part 7 of the tutorial, listed above. PWS/Cloud Foundry is definitely worth checking out if you are looking for an alternative to Heroku (or another PaaS cloud service), or simply feel like trying something different.</dd>
+</dl>
+
+<h2 id="Adding_more_tutorials">Adding more tutorials</h2>
+
+<div>
+<p>That's the end of the tutorial articles (for now). If you would like to extend it, other interesting topics to cover are:</p>
+
+<ul>
+ <li>Using sessions.</li>
+ <li>User authentication.</li>
+ <li>User authorization and permissions.</li>
+ <li>Testing an Express web application.</li>
+ <li>Web security for Express web applications.</li>
+</ul>
+
+<p>And of course, it would be excellent to have an assessment task!</p>
+</div>
diff --git a/files/de/learn/server-side/express_nodejs/mongoose/index.html b/files/de/learn/server-side/express_nodejs/mongoose/index.html
new file mode 100644
index 0000000000..525764221c
--- /dev/null
+++ b/files/de/learn/server-side/express_nodejs/mongoose/index.html
@@ -0,0 +1,843 @@
+---
+title: 'Express Tutorial Part 3: Nutzung einer Datenbank (Mit Mongoose)'
+slug: Learn/Server-side/Express_Nodejs/mongoose
+translation_of: Learn/Server-side/Express_Nodejs/mongoose
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs/routes", "Learn/Server-side/Express_Nodejs")}}</div>
+
+<p class="summary">This article briefly introduces databases, and how to use them with Node/Express apps. It then goes on to show how we can use <a href="http://mongoosejs.com/">Mongoose</a> to provide database access for the <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">LocalLibrary</a> website. It explains how object schema and models are declared, the main field types, and basic validation. It also briefly shows a few of the main ways in which you can access model data.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To be able to design and create your own models using Mongoose.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Overview">Overview</h2>
+
+<p>Library staff will use the Local Library website to store information about books and borrowers, while library members will use it to browse and search for books, find out whether there are any copies available, and then reserve or borrow them. In order to store and retrieve information efficiently, we will store it in a <em>database</em>.</p>
+
+<p>Express apps can use many different databases, and there are several approaches you can use for performing <strong>C</strong>reate, <strong>R</strong>ead, <strong>U</strong>pdate and <strong>D</strong>elete (CRUD) operations. This tutorial provides a brief overview of some of the available options and then goes on to show in detail the particular mechanisms selected.</p>
+
+<h3 id="What_databases_can_I_use">What databases can I use?</h3>
+
+<p><em>Express</em> apps can use any database supported by <em>Node</em> (<em>Express</em> itself doesn't define any specific additional behavior/requirements for database management). There are <a href="https://expressjs.com/en/guide/database-integration.html">many popular options</a>, including PostgreSQL, MySQL, Redis, SQLite, and MongoDB.</p>
+
+<p>When choosing a database, you should consider things like time-to-productivity/learning curve, performance, ease of replication/backup, cost, community support, etc. While there is no single "best" database, almost any of the popular solutions should be more than acceptable for a small-to-medium-sized site like our Local Library.</p>
+
+<p>For more information on the options see <a href="https://expressjs.com/en/guide/database-integration.html">Database integration</a> (Express docs).</p>
+
+<h3 id="What_is_the_best_way_to_interact_with_a_database">What is the best way to interact with a database?</h3>
+
+<p>There are two common approaches for interacting with a database: </p>
+
+<ul>
+ <li>Using the databases' native query language (e.g. SQL)</li>
+ <li>Using an Object Data Model ("ODM") or an Object Relational Model ("ORM"). An ODM/ORM represents the website's data as JavaScript objects, which are then mapped to the underlying database. Some ORMs are tied to a specific database, while others provide a database-agnostic backend.</li>
+</ul>
+
+<p>The very best <em>performance</em> can be gained by using SQL, or whatever query language is supported by the database. ODM's are often slower because they use translation code to map between objects and the database format, which may not use the most efficient database queries (this is particularly true if the ODM supports different database backends, and must make greater compromises in terms of what database features are supported).</p>
+
+<p>The benefit of using an ORM is that programmers can continue to think in terms of JavaScript objects rather than database semantics — this is particularly true if you need to work with different databases (on either the same or different websites). They also provide an obvious place to perform data validation.</p>
+
+<div class="note">
+<p><strong>Tip:</strong>  Using ODM/ORMs often results in lower costs for development and maintenance! Unless you're very familiar with the native query language or performance is paramount, you should strongly consider using an ODM.</p>
+</div>
+
+<h3 id="What_ORMODM_should_I_use">What ORM/ODM should I use?</h3>
+
+<p>There are many ODM/ORM solutions available on the NPM package manager site (check out the <a href="https://www.npmjs.com/browse/keyword/odm">odm</a> and <a href="https://www.npmjs.com/browse/keyword/orm">orm</a> tags for a subset!).</p>
+
+<p>A few solutions that were popular at the time of writing are:</p>
+
+<ul>
+ <li><a href="https://www.npmjs.com/package/mongoose">Mongoose</a>: Mongoose is a <a href="https://www.mongodb.org/">MongoDB</a> object modeling tool designed to work in an asynchronous environment.</li>
+ <li><a href="https://www.npmjs.com/package/waterline">Waterline</a>: An ORM extracted from the Express-based <a href="http://sailsjs.com/">Sails</a> web framework. It provides a uniform API for accessing numerous different databases, including Redis, MySQL, LDAP, MongoDB, and Postgres.</li>
+ <li><a href="https://www.npmjs.com/package/bookshelf">Bookshelf</a>: Features both promise-based and traditional callback interfaces, providing transaction support, eager/nested-eager relation loading, polymorphic associations, and support for one-to-one, one-to-many, and many-to-many relations. Works with PostgreSQL, MySQL, and SQLite3.</li>
+ <li><a href="https://www.npmjs.com/package/objection">Objection</a>: Makes it as easy as possible to use the full power of SQL and the underlying database engine (supports SQLite3, Postgres, and MySQL).</li>
+ <li><a href="https://www.npmjs.com/package/sequelize">Sequelize</a> is a promise-based ORM for Node.js and io.js. It supports the dialects PostgreSQL, MySQL, MariaDB, SQLite, and MSSQL and features solid transaction support, relations, read replication and more.</li>
+ <li><a href="https://node-orm.readthedocs.io/en/latest/">Node ORM2</a> is an Object Relationship Manager for NodeJS. It supports MySQL, SQLite, and Progress, helping to work with the database using an object-oriented approach.</li>
+ <li><a href="https://graphql.org/">GraphQL</a>: Primarily a query language for restful APIs, GraphQL is very popular, and has features available for reading data from databases.</li>
+</ul>
+
+<p>As a general rule, you should consider both the features provided and the "community activity" (downloads, contributions, bug reports, quality of documentation, etc.) when selecting a solution. At the time of writing Mongoose is by far the most popular ODM, and is a reasonable choice if you're using MongoDB for your database.</p>
+
+<h3 id="Using_Mongoose_and_MongoDb_for_the_LocalLibrary">Using Mongoose and MongoDb for the LocalLibrary</h3>
+
+<p>For the <em>Local Library</em> example (and the rest of this topic) we're going to use the <a href="https://www.npmjs.com/package/mongoose">Mongoose ODM</a> to access our library data. Mongoose acts as a front end to <a href="https://www.mongodb.com/what-is-mongodb">MongoDB</a>, an open source <a href="https://en.wikipedia.org/wiki/NoSQL">NoSQL</a> database that uses a document-oriented data model. A “collection” of “documents” in a MongoDB database <a href="https://docs.mongodb.com/manual/core/databases-and-collections/#collections">is analogous to</a> a “table” of “rows” in a relational database.</p>
+
+<p>This ODM and database combination is extremely popular in the Node community, partially because the document storage and query system looks very much like JSON, and is hence familiar to JavaScript developers.</p>
+
+<div class="note">
+<p><strong>Tip:</strong> You don't need to know MongoDB in order to use Mongoose, although parts of the <a href="http://mongoosejs.com/docs/guide.html">Mongoose documentation</a> <em>are</em> easier to use and understand if you are already familiar with MongoDB.</p>
+</div>
+
+<p>The rest of this tutorial shows how to define and access the Mongoose schema and models for the <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">LocalLibrary website</a> example.</p>
+
+<h2 id="Designing_the_LocalLibrary_models">Designing the LocalLibrary models</h2>
+
+<p>Before you jump in and start coding the models, it's worth taking a few minutes to think about what data we need to store and the relationships between the different objects.</p>
+
+<p>We know that we need to store information about books (title, summary, author, genre, ISBN) and that we might have multiple copies available (with globally unique ids, availability statuses, etc.). We might need to store more information about the author than just their name, and there might be multiple authors with the same or similar names. We want to be able to sort information based on the book title, author, genre, and category.</p>
+
+<p>When designing your models it makes sense to have separate models for every "object" (a group of related information). In this case some obvious candidates for these models are books, book instances, and authors.</p>
+
+<p>You might also want to use models to represent selection-list options (e.g. like a drop-down list of choices), rather than hard-coding the choices into the website itself — this is recommended when all the options aren't known up front or may change. A good example is a genre (e.g. fantasy, science fiction, etc.).</p>
+
+<p>Once we've decided on our models and fields, we need to think about the relationships between them.</p>
+
+<p>With that in mind, the UML association diagram below shows the models we'll define in this case (as boxes). As discussed above, we've created models for the book (the generic details of the book), book instance (status of specific physical copies of the book available in the system), and author. We have also decided to have a model for the genre so that values can be created dynamically. We've decided not to have a model for the <code>BookInstance:status</code> — we will hard code the acceptable values because we don't expect these to change. Within each of the boxes, you can see the model name, the field names and types, and also the methods and their return types.</p>
+
+<p>The diagram also shows the relationships between the models, including their <em>multiplicities</em>. The multiplicities are the numbers on the diagram showing the numbers (maximum and minimum) of each model that may be present in the relationship. For example, the connecting line between the boxes shows that <code>Book</code> and a <code>Genre</code> are related. The numbers close to the <code>Book</code> model show that a <code>Genre</code> must have zero or more <code>Book</code>s (as many as you like), while the numbers on the other end of the line next to the <code>Genre</code> show that a book can have zero or more associated <code>Genre</code>s.</p>
+
+<div class="note">
+<p><strong>Note</strong>: As discussed in our <a href="#related_documents">Mongoose primer</a> below it is often better to have the field that defines the relationship between the documents/models in just <em>one</em> model (you can still find the reverse relationship by searching for the associated <code>_id</code> in the other model). Below we have chosen to define the relationship between Book/Genre and Book/Author in the Book schema, and the relationship between the Book/BookInstance in the BookInstance Schema. This choice was somewhat arbitrary — we could equally well have had the field in the other schema.</p>
+</div>
+
+<p><img alt="Mongoose Library Model  with correct cardinality" src="https://mdn.mozillademos.org/files/15645/Library%20Website%20-%20Mongoose_Express.png" style="height: 620px; width: 737px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: The next section provides a basic primer explaining how models are defined and used. As you read it, consider how we will construct each of the models in the diagram above.</p>
+</div>
+
+<h2 id="Mongoose_primer">Mongoose primer</h2>
+
+<p>This section provides an overview of how to connect Mongoose to a MongoDB database, how to define a schema and a model, and how to make basic queries. </p>
+
+<div class="note">
+<p><strong>Note:</strong> This primer is heavily influenced by the <a href="https://www.npmjs.com/package/mongoose">Mongoose quick start</a> on <em>npm</em> and the <a href="http://mongoosejs.com/docs/guide.html">official documentation</a>.</p>
+</div>
+
+<h3 id="Installing_Mongoose_and_MongoDB">Installing Mongoose and MongoDB</h3>
+
+<p>Mongoose is installed in your project (<strong>package.json</strong>) like any other dependency — using NPM. To install it, use the following command inside your project folder:</p>
+
+<pre class="brush: bash">npm install mongoose
+</pre>
+
+<p>Installing <em>Mongoose</em> adds all its dependencies, including the MongoDB database driver, but it does not install MongoDB itself. If you want to install a MongoDB server then you can <a href="https://www.mongodb.com/download-center">download installers from here</a> for various operating systems and install it locally. You can also use cloud-based MongoDB instances.</p>
+
+<div class="note">
+<p><strong>Note:</strong> For this tutorial, we'll be using the <a href="https://www.mongodb.com/">MongoDB Atlas</a> cloud-based <em>database as a service</em> free tier to provide the database. This is suitable for development and makes sense for the tutorial because it makes "installation" operating system independent (database-as-a-service is also one approach you might use for your production database).</p>
+</div>
+
+<h3 id="Connecting_to_MongoDB">Connecting to MongoDB</h3>
+
+<p><em>Mongoose</em> requires a connection to a MongoDB database. You can <code>require()</code> and connect to a locally hosted database with <code>mongoose.connect()</code>, as shown below.</p>
+
+<pre class="brush: js">//Import the mongoose module
+var mongoose = require('mongoose');
+
+//Set up default mongoose connection
+var mongoDB = 'mongodb://127.0.0.1/my_database';
+mongoose.connect(mongoDB, { useNewUrlParser: true });
+
+//Get the default connection
+var db = mongoose.connection;
+
+//Bind connection to error event (to get notification of connection errors)
+db.on('error', console.error.bind(console, 'MongoDB connection error:'));</pre>
+
+<p>You can get the default <code>Connection</code> object with <code>mongoose.connection</code>. Once connected, the open event is fired on the <code>Connection</code> instance.</p>
+
+<div class="note">
+<p><strong>Tip:</strong> If you need to create additional connections you can use <code>mongoose.createConnection()</code>. This takes the same form of database URI (with host, database, port, options etc.) as <code>connect()</code> and returns a <code>Connection</code> object).</p>
+</div>
+
+<h3 id="Defining_and_creating_models">Defining and creating models</h3>
+
+<p>Models are <em>defined </em>using the <code>Schema</code> interface. The Schema allows you to define the fields stored in each document along with their validation requirements and default values. In addition, you can define static and instance helper methods to make it easier to work with your data types, and also virtual properties that you can use like any other field, but which aren't actually stored in the database (we'll discuss a bit further below).</p>
+
+<p>Schemas are then "compiled" into models using the <code>mongoose.model()</code> method. Once you have a model you can use it to find, create, update, and delete objects of the given type.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Each model maps to a <em>collection</em> of <em>documents</em> in the MongoDB database. The documents will contain the fields/schema types defined in the model <code>Schema</code>.</p>
+</div>
+
+<h4 id="Defining_schemas">Defining schemas</h4>
+
+<p>The code fragment below shows how you might define a simple schema. First you <code>require()</code> mongoose, then use the Schema constructor to create a new schema instance, defining the various fields inside it in the constructor's object parameter.</p>
+
+<pre class="brush: js">//Require Mongoose
+var mongoose = require('mongoose');
+
+//Define a schema
+var Schema = mongoose.Schema;
+
+var SomeModelSchema = new Schema({
+  a_string: String,
+  a_date: Date
+});
+</pre>
+
+<p>In the case above we just have two fields, a string and a date. In the next sections, we will show some of the other field types, validation, and other methods.</p>
+
+<h4 id="Creating_a_model">Creating a model</h4>
+
+<p>Models are created from schemas using the <code>mongoose.model()</code> method:</p>
+
+<pre class="brush: js">// Define schema
+var Schema = mongoose.Schema;
+
+var SomeModelSchema = new Schema({
+  a_string: String,
+  a_date: Date
+});
+
+<strong>// Compile model from schema
+var SomeModel = mongoose.model('SomeModel', SomeModelSchema );</strong></pre>
+
+<p>The first argument is the singular name of the collection that will be created for your model (Mongoose will create the database collection for the above model <em>SomeModel</em> above), and the second argument is the schema you want to use in creating the model.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Once you've defined your model classes you can use them to create, update, or delete records, and run queries to get all records or particular subsets of records. We'll show you how to do this in the <a href="#Using_models">Using models</a> section, and when we create our views.</p>
+</div>
+
+<h4 id="Schema_types_fields">Schema types (fields)</h4>
+
+<p>A schema can have an arbitrary number of fields — each one represents a field in the documents stored in <em>MongoDB</em>. An example schema showing many of the common field types and how they are declared is shown below.</p>
+
+<pre class="brush: js">var schema = new Schema(
+{
+  name: <strong>String</strong>,
+  binary: <strong>Buffer</strong>,
+  living: <strong>Boolean</strong>,
+  updated: { type: <strong>Date</strong>, default: Date.now() },
+  age: { type: <strong>Number</strong>, min: 18, max: 65, required: true },
+  mixed: <strong>Schema.Types.Mixed</strong>,
+  _someId: <strong>Schema.Types.ObjectId</strong>,
+  array: <strong>[]</strong>,
+  ofString: [<strong>String</strong>], // You can also have an array of each of the other types too.
+  nested: { stuff: { type: <strong>String</strong>, lowercase: true, trim: true } }
+})</pre>
+
+<p>Most of the <a href="http://mongoosejs.com/docs/schematypes.html">SchemaTypes</a> (the descriptors after “type:” or after field names) are self-explanatory. The exceptions are:</p>
+
+<ul>
+ <li><code>ObjectId</code>: Represents specific instances of a model in the database. For example, a book might use this to represent its author object. This will actually contain the unique ID (<code>_id</code>) for the specified object. We can use the <code>populate()</code> method to pull in the associated information when needed.</li>
+ <li><code><a href="http://mongoosejs.com/docs/schematypes.html#mixed">Mixed</a></code>: An arbitrary schema type.</li>
+ <li><code>[]</code>: An array of items. You can perform JavaScript array operations on these models (push, pop, unshift, etc.). The examples above show an array of objects without a specified type and an array of <code>String</code> objects, but you can have an array of any type of object.</li>
+</ul>
+
+<p>The code also shows both ways of declaring a field:</p>
+
+<ul>
+ <li>Field <em>name</em> and <em>type</em> as a key-value pair (i.e. as done with fields <code>name</code>, <code>binary </code>and <code>living</code>).</li>
+ <li>Field <em>name</em> followed by an object defining the <code>type</code>, and any other <em>options</em> for the field. Options include things like:
+  <ul>
+   <li>default values.</li>
+   <li>built-in validators (e.g. max/min values) and custom validation functions.</li>
+   <li>Whether the field is required</li>
+   <li>Whether <code>String</code> fields should automatically be set to lowercase, uppercase, or trimmed (e.g. <code>{ type: <strong>String</strong>, lowercase: true, trim: true }</code>)</li>
+  </ul>
+ </li>
+</ul>
+
+<p>For more information about options see <a href="http://mongoosejs.com/docs/schematypes.html">SchemaTypes</a> (Mongoose docs).</p>
+
+<h4 id="Validation">Validation</h4>
+
+<p>Mongoose provides built-in and custom validators, and synchronous and asynchronous validators. It allows you to specify both the acceptable range of values and the error message for validation failure in all cases.</p>
+
+<p>The built-in validators include:</p>
+
+<ul>
+ <li>All <a href="http://mongoosejs.com/docs/schematypes.html">SchemaTypes</a> have the built-in <a href="http://mongoosejs.com/docs/api.html#schematype_SchemaType-required">required</a> validator. This is used to specify whether the field must be supplied in order to save a document.</li>
+ <li><a href="http://mongoosejs.com/docs/api.html#schema-number-js">Numbers</a> have <a href="http://mongoosejs.com/docs/api.html#schema_number_SchemaNumber-min">min</a> and <a href="http://mongoosejs.com/docs/api.html#schema_number_SchemaNumber-max">max</a> validators.</li>
+ <li><a href="http://mongoosejs.com/docs/api.html#schema-string-js">Strings</a> have:
+  <ul>
+   <li><a href="http://mongoosejs.com/docs/api.html#schema_string_SchemaString-enum">enum</a>: specifies the set of allowed values for the field.</li>
+   <li><a href="http://mongoosejs.com/docs/api.html#schema_string_SchemaString-match">match</a>: specifies a regular expression that the string must match.</li>
+   <li><a href="http://mongoosejs.com/docs/api.html#schema_string_SchemaString-maxlength">maxlength</a> and <a href="http://mongoosejs.com/docs/api.html#schema_string_SchemaString-minlength">minlength</a> for the string.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>The example below (slightly modified from the Mongoose documents) shows how you can specify some of the validator types and error messages:</p>
+
+<pre class="brush: js">var breakfastSchema = new Schema({
+  eggs: {
+    type: Number,
+    min: [6, 'Too few eggs'],
+    max: 12,
+    required: [true, 'Why no eggs?']
+  },
+  drink: {
+    type: String,
+    enum: ['Coffee', 'Tea', 'Water',]
+  }
+});
+</pre>
+
+<p>For complete information on field validation see <a href="http://mongoosejs.com/docs/validation.html">Validation</a> (Mongoose docs).</p>
+
+<h4 id="Virtual_properties">Virtual properties</h4>
+
+<p>Virtual properties are document properties that you can get and set but that do not get persisted to MongoDB. The getters are useful for formatting or combining fields, while setters are useful for de-composing a single value into multiple values for storage. The example in the documentation constructs (and deconstructs) a full name virtual property from a first and last name field, which is easier and cleaner than constructing a full name every time one is used in a template.</p>
+
+<div class="note">
+<p><strong>Note:</strong> We will use a virtual property in the library to define a unique URL for each model record using a path and the record's <code>_id</code> value.</p>
+</div>
+
+<p>For more information see <a href="http://mongoosejs.com/docs/guide.html#virtuals">Virtuals</a> (Mongoose documentation).</p>
+
+<h4 id="Methods_and_query_helpers">Methods and query helpers</h4>
+
+<p>A schema can also have <a href="http://mongoosejs.com/docs/guide.html#methods">instance methods</a>, <a href="http://mongoosejs.com/docs/guide.html#statics">static methods</a>, and <a href="http://mongoosejs.com/docs/guide.html#query-helpers">query helpers</a>. The instance and static methods are similar, but with the obvious difference that an instance method is associated with a particular record and has access to the current object. Query helpers allow you to extend mongoose's <a href="http://mongoosejs.com/docs/queries.html">chainable query builder API</a> (for example, allowing you to add a query "byName" in addition to the <code>find()</code>, <code>findOne()</code> and <code>findById()</code> methods).</p>
+
+<h3 id="Using_models">Using models</h3>
+
+<p>Once you've created a schema you can use it to create models. The model represents a collection of documents in the database that you can search, while the model's instances represent individual documents that you can save and retrieve.</p>
+
+<p>We provide a brief overview below. For more information see: <a href="http://mongoosejs.com/docs/models.html">Models</a> (Mongoose docs).</p>
+
+<h4 id="Creating_and_modifying_documents">Creating and modifying documents</h4>
+
+<p>To create a record you can define an instance of the model and then call <code>save()</code>. The examples below assume SomeModel is a model (with a single field "name") that we have created from our schema.</p>
+
+<pre class="brush: js">// Create an instance of model SomeModel
+var awesome_instance = new SomeModel({ name: 'awesome' });
+
+// Save the new model instance, passing a callback
+awesome_instance.save(function (err) {
+  if (err) return handleError(err);
+  // saved!
+});
+</pre>
+
+<p>Creation of records (along with updates, deletes, and queries) are asynchronous operations — you supply a callback that is called when the operation completes. The API uses the error-first argument convention, so the first argument for the callback will always be an error value (or null). If the API returns some result, this will be provided as the second argument.</p>
+
+<p>You can also use <code>create()</code> to define the model instance at the same time as you save it. The callback will return an error for the first argument and the newly-created model instance for the second argument.</p>
+
+<pre class="brush: js">SomeModel.create({ name: 'also_awesome' }, function (err, awesome_instance) {
+  if (err) return handleError(err);
+  // saved!
+});</pre>
+
+<p>Every model has an associated connection (this will be the default connection when you use <code>mongoose.model()</code>). You create a new connection and call <code>.model()</code> on it to create the documents on a different database.</p>
+
+<p>You can access the fields in this new record using the dot syntax, and change the values. You have to call <code>save()</code> or <code>update()</code> to store modified values back to the database.</p>
+
+<pre class="brush: js">// Access model field values using dot notation
+console.log(awesome_instance.name); //should log 'also_awesome'
+
+// Change record by modifying the fields, then calling save().
+awesome_instance.name="New cool name";
+awesome_instance.save(function (err) {
+   if (err) return handleError(err); // saved!
+});
+</pre>
+
+<h4 id="Searching_for_records">Searching for records</h4>
+
+<p>You can search for records using query methods, specifying the query conditions as a JSON document. The code fragment below shows how you might find all athletes in a database that play tennis, returning just the fields for athlete <em>name</em> and <em>age</em>. Here we just specify one matching field (sport) but you can add more criteria, specify regular expression criteria, or remove the conditions altogether to return all athletes.</p>
+
+<pre class="brush: js">var Athlete = mongoose.model('Athlete', yourSchema);
+
+// find all athletes who play tennis, selecting the 'name' and 'age' fields
+Athlete.find({ 'sport': 'Tennis' }, 'name age', function (err, athletes) {
+  if (err) return handleError(err);
+  // 'athletes' contains the list of athletes that match the criteria.
+})</pre>
+
+<p>If you specify a callback, as shown above, the query will execute immediately. The callback will be invoked when the search completes.</p>
+
+<div class="note">
+<p><strong>Note:</strong> All callbacks in Mongoose use the pattern <code>callback(error, result)</code>. If an error occurs executing the query, the <code>error</code> parameter will contain an error document and <code>result</code> will be null. If the query is successful, the <code>error</code> parameter will be null, and the <code>result</code> will be populated with the results of the query.</p>
+</div>
+
+<div class="note">
+<p><strong>Note:</strong> It is important to remember that not finding any results is <strong>not an error</strong> for a search —but it may be a fail-case in the context of your application. If your application expects a search to find a value you can either check the result in the callback (<code>results==null</code>) or daisy chain the <a href="https://mongoosejs.com/docs/api.html#query_Query-orFail">orFail()</a> method on the query. </p>
+</div>
+
+<p>If you don't specify a callback then the API will return a variable of type <a href="http://mongoosejs.com/docs/api.html#query-js">Query</a>. You can use this query object to build up your query and then execute it (with a callback) later using the <code>exec()</code> method.</p>
+
+<pre class="brush: js">// find all athletes that play tennis
+var query = Athlete.find({ 'sport': 'Tennis' });
+
+// selecting the 'name' and 'age' fields
+query.select('name age');
+
+// limit our results to 5 items
+query.limit(5);
+
+// sort by age
+query.sort({ age: -1 });
+
+// execute the query at a later time
+query.exec(function (err, athletes) {
+  if (err) return handleError(err);
+  // athletes contains an ordered list of 5 athletes who play Tennis
+})</pre>
+
+<p>Above we've defined the query conditions in the <code>find()</code> method. We can also do this using a <code>where()</code> function, and we can chain all the parts of our query together using the dot operator (.) rather than adding them separately. The code fragment below is the same as our query above, with an additional condition for the age.</p>
+
+<pre class="brush: js">Athlete.
+  find().
+  where('sport').equals('Tennis').
+  where('age').gt(17).lt(50).  //Additional where query
+  limit(5).
+  sort({ age: -1 }).
+  select('name age').
+  exec(callback); // where callback is the name of our callback function.</pre>
+
+<p>The <a href="http://mongoosejs.com/docs/api.html#query_Query-find">find()</a> method gets all matching records, but often you just want to get one match. The following methods query for a single record:</p>
+
+<ul>
+ <li><code><a href="http://mongoosejs.com/docs/api.html#model_Model.findById">findById()</a></code>: Finds the document with the specified <code>id</code> (every document has a unique <code>id</code>).</li>
+ <li><code><a href="http://mongoosejs.com/docs/api.html#query_Query-findOne">findOne()</a></code>: Finds a single document that matches the specified criteria.</li>
+ <li><code><a href="http://mongoosejs.com/docs/api.html#model_Model.findByIdAndRemove">findByIdAndRemove()</a></code>, <code><a href="http://mongoosejs.com/docs/api.html#model_Model.findByIdAndUpdate">findByIdAndUpdate()</a></code>, <code><a href="http://mongoosejs.com/docs/api.html#query_Query-findOneAndRemove">findOneAndRemove()</a></code>, <code><a href="http://mongoosejs.com/docs/api.html#query_Query-findOneAndUpdate">findOneAndUpdate()</a></code>: Finds a single document by <code>id</code> or criteria and either updates or removes it. These are useful convenience functions for updating and removing records.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note:</strong> There is also a <code><a href="http://mongoosejs.com/docs/api.html#model_Model.count">count()</a></code> method that you can use to get the number of items that match conditions. This is useful if you want to perform a count without actually fetching the records.</p>
+</div>
+
+<p>There is a lot more you can do with queries. For more information see: <a href="http://mongoosejs.com/docs/queries.html">Queries</a> (Mongoose docs).</p>
+
+<h4 id="Working_with_related_documents_—_population">Working with related documents — population</h4>
+
+<p>You can create references from one document/model instance to another using the <code>ObjectId</code> schema field, or from one document to many using an array of <code>ObjectIds</code>. The field stores the id of the related model. If you need the actual content of the associated document, you can use the <code><a href="http://mongoosejs.com/docs/api.html#query_Query-populate">populate()</a></code> method in a query to replace the id with the actual data.</p>
+
+<p>For example, the following schema defines authors and stories. Each author can have multiple stories, which we represent as an array of <code>ObjectId</code>. Each story can have a single author. The "ref" (highlighted in bold below) tells the schema which model can be assigned to this field.</p>
+
+<pre class="brush: js">var mongoose = require('mongoose')
+  , Schema = mongoose.Schema
+
+var authorSchema = Schema({
+  name    : String,
+  stories : [{ type: Schema.Types.ObjectId, <strong>ref</strong>: 'Story' }]
+});
+
+var storySchema = Schema({
+  author : { type: Schema.Types.ObjectId, <strong>ref</strong>: 'Author' },
+  title    : String
+});
+
+var Story  = mongoose.model('Story', storySchema);
+var Author = mongoose.model('Author', authorSchema);</pre>
+
+<p>We can save our references to the related document by assigning the <code>_id</code> value. Below we create an author, then a story, and assign the author id to our story's author field.</p>
+
+<pre class="brush: js">var bob = new Author({ name: 'Bob Smith' });
+
+bob.save(function (err) {
+  if (err) return handleError(err);
+
+  //Bob now exists, so lets create a story
+  var story = new Story({
+    title: "Bob goes sledding",
+    author: bob._id    // assign the _id from the our author Bob. This ID is created by default!
+  });
+
+  story.save(function (err) {
+    if (err) return handleError(err);
+    // Bob now has his story
+  });
+});</pre>
+
+<p>Our story document now has an author referenced by the author document's ID. In order to get the author information in the story results we use <code>populate()</code>, as shown below.</p>
+
+<pre class="brush: js">Story
+.findOne({ title: 'Bob goes sledding' })
+.populate('author') //This populates the author id with actual author information!
+.exec(function (err, story) {
+  if (err) return handleError(err);
+  console.log('The author is %s', story.author.name);
+  // prints "The author is Bob Smith"
+});</pre>
+
+<div class="note">
+<p><strong>Note:</strong> Astute readers will have noted that we added an author to our story, but we didn't do anything to add our story to our author's <code>stories</code> array. How then can we get all stories by a particular author? One way would be to add our story to the stories array, but this would result in us having two places where the information relating authors and stories needs to be maintained.</p>
+
+<p>A better way is to get the <code>_id</code> of our <em>author</em>, then use <code>find()</code> to search for this in the author field across all stories.</p>
+
+<pre class="brush: js">Story
+.find({ author : bob._id })
+.exec(function (err, stories) {
+  if (err) return handleError(err);
+  // returns all stories that have Bob's id as their author.
+});
+</pre>
+</div>
+
+<p>This is almost everything you need to know about working with related items<em> for this tutorial</em>. For more detailed information see <a href="http://mongoosejs.com/docs/populate.html">Population</a> (Mongoose docs).</p>
+
+<h3 id="One_schemamodel_per_file">One schema/model per file</h3>
+
+<p>While you can create schemas and models using any file structure you like, we highly recommend defining each model schema in its own module (file), then exporting the method to create the model. This is shown below:</p>
+
+<pre class="brush: js">// File: ./models/somemodel.js
+
+//Require Mongoose
+var mongoose = require('mongoose');
+
+//Define a schema
+var Schema = mongoose.Schema;
+
+var SomeModelSchema = new Schema({
+  a_string          : String,
+  a_date            : Date,
+});
+
+<strong>//Export function to create "SomeModel" model class
+module.exports = mongoose.model('SomeModel', SomeModelSchema );</strong></pre>
+
+<p>You can then require and use the model immediately in other files. Below we show how you might use it to get all instances of the model.</p>
+
+<pre class="brush: js">//Create a SomeModel model just by requiring the module
+var SomeModel = require('../models/somemodel')
+
+// Use the SomeModel object (model) to find all SomeModel records
+SomeModel.find(callback_function);</pre>
+
+<h2 id="Setting_up_the_MongoDB_database">Setting up the MongoDB database</h2>
+
+<p>Now that we understand something of what Mongoose can do and how we want to design our models, it's time to start work on the <em>LocalLibrary</em> website. The very first thing we want to do is set up a MongoDb database that we can use to store our library data.</p>
+
+<p>For this tutorial, we're going to use the <a href="https://www.mongodb.com/cloud/atlas">MongoDB Atlas</a> free cloud-hosted <a href="https://www.mongodb.com/cloud/atlas/pricing">sandbox</a> database. This database tier is not considered suitable for production websites because it has no redundancy, but it is great for development and prototyping. We're using it here because it is free and easy to set up, and because MongoDB Atlas is a popular <em>database as a service</em> vendor that you might reasonably choose for your production database (other popular choices at the time of writing include <a href="https://www.compose.com/">Compose</a>, <a href="https://scalegrid.io/pricing.html">ScaleGrid</a> and <a href="https://www.objectrocket.com/">ObjectRocket</a>).</p>
+
+<div class="note">
+<p><strong>Note:</strong> If you prefer you can set up a MongoDb database locally by downloading and installing the <a href="https://www.mongodb.com/download-center/community">appropriate binaries for your system</a>. The rest of the instructions in this article would be similar, except for the database URL you would specify when connecting. Note, however, that the <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to Production</a> tutorial requires some form of remote database, since the free tier of the <a href="https://www.heroku.com/">Heroku</a> service does not provide persistent storage. It is therefore highly recommended to use <a href="https://www.mongodb.com/cloud/atlas">MongoDB Atlas</a>.</p>
+</div>
+
+<p>You will first need to <a href="https://www.mongodb.com/cloud/atlas/register">create an account</a> with MongoDB Atlas (this is free, and just requires that you enter basic contact details and acknowledge their terms of service). </p>
+
+<p>After logging in, you'll be taken to the <a href="https://cloud.mongodb.com/v2">home</a> screen:</p>
+
+<ol>
+ <li>Click <strong>Build a Cluster</strong> button in the Clusters Overview section.<br>
+  <img alt="Create a cluster on MongoDB Atlas." src="https://mdn.mozillademos.org/files/16516/MongoDB_Atlas_-_CreateCluster.jpg" style="border-style: solid; border-width: 1px; height: 549px; width: 742px;"></li>
+ <li>This will open the <em>Create New Cluster</em> screen.<br>
+  <img alt="Choose a cloud provider when using MongoDB Atlas." src="https://mdn.mozillademos.org/files/16511/MongoDB_Atlas_-_ChooseProviderRegion.jpg" style="border-style: solid; border-width: 1px; height: 656px; width: 742px;">
+  <ul>
+   <li>Select any provider from the <em>Cloud Provider &amp; Region </em>section. Different providers offer different regions.</li>
+   <li>Select any region marked "FREE TIER AVAILABLE".</li>
+   <li>Click the <strong>Create Cluster</strong> button (creation of the cluster will take some minutes).</li>
+  </ul>
+ </li>
+ <li>
+  <p>You will return to the <em>Cluster Overview</em> screen.<br>
+   <img alt="Setup a collection on MongoDB Atlas." src="https://mdn.mozillademos.org/files/16517/MongoDB_Atlas_-_CreateCollection.jpg" style="border-style: solid; border-width: 1px; height: 399px; width: 742px;"></p>
+
+  <ul>
+   <li>
+    <p>Click the <strong>Collections</strong> button.</p>
+   </li>
+  </ul>
+ </li>
+ <li>This will open the <em>Collections</em> section.<br>
+  <img alt="Create a database on MongoDB Atlas." src="https://mdn.mozillademos.org/files/17151/MongoDB_Atlas_-_CreateDatabase2.PNG" style="border-style: solid; border-width: 1px; height: 519px; width: 1130px;">
+  <ul>
+   <li>Click the <strong>Add My Own Data</strong> button.</li>
+  </ul>
+ </li>
+ <li>This will open the <em>Create Database</em> screen.<br>
+  <img alt="Details during database creation on MongoDB Atlas." src="https://mdn.mozillademos.org/files/16520/MongoDB_Atlas_-_DatabaseDetails.jpg" style="border-style: solid; border-width: 1px; height: 441px; width: 416px;">
+  <ul>
+   <li>Enter the name for the new database as <code>local_library</code>.</li>
+   <li>Enter the name of the collection as <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Collection0</span></font>.</li>
+   <li>Click the <strong>Create</strong> button to create the database.</li>
+  </ul>
+ </li>
+ <li>You will return to the Collection screen with your database created.<br>
+  <img alt="Database creation confirmation on MongoDB Atlas." src="https://mdn.mozillademos.org/files/16519/MongoDB_Atlas_-_DatabaseCreated.jpg" style="border-style: solid; border-width: 1px; height: 305px; width: 742px;">
+  <ul>
+   <li>Click the <em>Overview</em> tab to return the cluster overview.</li>
+  </ul>
+ </li>
+ <li>From the Cluster0 Overview screen click the <strong>Connect</strong> button.<br>
+  <img alt="Configure a connection when after setting up a cluster in MongoDB Atlas." src="https://mdn.mozillademos.org/files/16512/MongoDB_Atlas_-_Connectbutton.jpg" style="border-style: solid; border-width: 1px; height: 308px; width: 742px;"></li>
+ <li>This will open the Connect to Cluster screen.<br>
+  <img alt="Setup a connection when using MongoDB Atlas." src="https://mdn.mozillademos.org/files/16513/MongoDB_Atlas_-_ConnectCluster.jpg" style="border-style: solid; border-width: 1px; height: 771px; width: 690px;">
+  <ul>
+   <li>Click the <strong>Add a Different IP Address</strong> button, enter <code>0.0.0.0/0</code> for the IP Address and click <strong>Add IP Address</strong> button.
+    <div class="blockIndicator note">
+    <p><strong>Note:</strong> It is a best practice to limit the IP addresses that can connect to your database and other resources. Here we allow a connection from anywhere because we don't know where the request will come from after deployment.</p>
+    </div>
+   </li>
+   <li>Enter a username and password and click <strong>Create MongoDB User</strong> button.
+    <div class="blockIndicator note">
+    <p><strong>Note:</strong> Avoid using special characters in your MongoDB user password as mongoose may not parse the connection string properly.</p>
+    </div>
+   </li>
+   <li>If you have completed the 2 previous steps, the button <strong>Choose a connection method </strong>will turn green.</li>
+   <li>Click the <strong>Choose a connection method</strong> button.</li>
+  </ul>
+ </li>
+ <li>You should now be able to access the <em>Choose a connection</em> method tab.<br>
+  <img alt="Choose a connection type when connecting with MongoDB Atlas." src="https://mdn.mozillademos.org/files/16510/MongoDB_Atlas_-_ChooseAConnectionMethod.jpg" style="border-style: solid; border-width: 1px; height: 606px; width: 691px;">
+  <ul>
+   <li>Click the <strong>Connect Your Application</strong> option.</li>
+  </ul>
+ </li>
+ <li>This will open the <em>Connect</em> screen.<br>
+  <img alt="Choose the Short SRV connection when settinup a connection on MongoDB Atalas." src="https://mdn.mozillademos.org/files/17153/MongoDB_Atlas_-_ConnectForShortSRV_2020-03.PNG" style="border-style: solid; border-width: 1px; height: 649px; width: 666px;">
+  <ul>
+   <li>Click the <strong>Copy</strong> button to copy the connection string.</li>
+   <li>Save this string somewhere safe.</li>
+   <li>Update the password with your users password.</li>
+   <li>Replace test with <code>local_library</code>.</li>
+  </ul>
+ </li>
+</ol>
+
+<p>You have now created the database, and have a URL (with username and password) that can be used to access it. This will look something like: <code>mongodb+srv://your_user_name:your_password@cluster0-mbdj7.mongodb.net/local_library?retryWrites=true</code></p>
+
+<h2 id="Install_Mongoose">Install Mongoose</h2>
+
+<p>Open a command prompt and navigate to the directory where you created your <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">skeleton Local Library website</a>. Enter the following command to install Mongoose (and its dependencies) and add it to your <strong>package.json</strong> file, unless you have already done so when reading the <a href="#Installing_Mongoose_and_MongoDB">Mongoose Primer</a> above.</p>
+
+<pre class="brush: bash">npm install mongoose
+</pre>
+
+<h2 id="Connect_to_MongoDB">Connect to MongoDB</h2>
+
+<p>Open <strong>/app.js</strong> (in the root of your project) and copy the following text below where you declare the <em>Express application object</em> (after the line <code>var app = express();</code>). Replace the database url string ('<em>insert_your_database_url_here</em>') with the location URL representing your own database (i.e. using the information from <em>mongoDB Atlas</em>).</p>
+
+<pre class="brush: js">//Set up mongoose connection
+var mongoose = require('mongoose');
+var mongoDB = '<em>insert_your_database_url_here</em>';
+mongoose.connect(mongoDB, { useNewUrlParser: true });
+var db = mongoose.connection;
+db.on('error', console.error.bind(console, 'MongoDB connection error:'));</pre>
+
+<p>As discussed <a href="#Connecting_to_MongoDB">in the Mongoose primer above</a>, this code creates the default connection to the database and binds to the error event (so that errors will be printed to the console). </p>
+
+<h2 id="Defining_the_LocalLibrary_Schema">Defining the LocalLibrary Schema</h2>
+
+<p>We will define a separate module for each model, as <a href="#One_schemamodel_per_file">discussed above</a>. Start by creating a folder for our models in the project root (<strong>/models</strong>) and then create separate files for each of the models:</p>
+
+<pre>/express-locallibrary-tutorial  //the project root
+  <strong>/models</strong>
+    <strong>author.js</strong>
+    <strong>book.js</strong>
+    <strong>bookinstance.js</strong>
+    <strong>genre.js</strong>
+</pre>
+
+<h3 id="Author_model">Author model</h3>
+
+<p>Copy the <code>Author</code> schema code shown below and paste it into your <strong>./models/author.js</strong> file. The schema defines an author as having <code>String</code> SchemaTypes for the first and family names (required, with a maximum of 100 characters), and <code>Date</code> fields for the dates of birth and death.</p>
+
+<pre class="brush: js">var mongoose = require('mongoose');
+
+var Schema = mongoose.Schema;
+
+var AuthorSchema = new Schema(
+  {
+    first_name: {type: String, required: true, max: 100},
+    family_name: {type: String, required: true, max: 100},
+    date_of_birth: {type: Date},
+    date_of_death: {type: Date},
+  }
+);
+
+<strong>// Virtual for author's full name
+AuthorSchema
+.virtual('name')
+.get(function () {
+
+// To avoid errors in cases where an author does not have either a family name or first name
+// We want to make sure we handle the exception by returning an empty string for that case
+
+  var fullname = '';
+  if (this.first_name &amp;&amp; this.family_name) {
+    fullname = this.family_name + ', ' + this.first_name
+  }
+  if (!this.first_name || !this.family_name) {
+    fullname = '';
+  }
+
+  return fullname;
+});
+
+// Virtual for author's lifespan
+AuthorSchema
+</strong>.virtual('lifespan')
+.get(function () {
+  return (this.date_of_death.getYear() - this.date_of_birth.getYear()).toString();
+});
+
+// Virtual for author's URL
+AuthorSchema
+.virtual('url')
+.get(function () {
+  return '/catalog/author/' + this._id;
+});
+
+//Export model
+module.exports = mongoose.model('Author', AuthorSchema);
+
+</pre>
+
+<p>We've also declared a <a href="#Virtual_properties">virtual</a> for the AuthorSchema named "url" that returns the absolute URL required to get a particular instance of the model — we'll use the property in our templates whenever we need to get a link to a particular author.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Declaring our URLs as a virtual in the schema is a good idea because then the URL for an item only ever needs to be changed in one place.<br>
+ At this point, a link using this URL wouldn't work, because we haven't got any routes handling code for individual model instances. We'll set those up in a later article!</p>
+</div>
+
+<p>At the end of the module, we export the model.</p>
+
+<h3 id="Book_model">Book model</h3>
+
+<p>Copy the <code>Book</code> schema code shown below and paste it into your <strong>./models/book.js</strong> file. Most of this is similar to the author model — we've declared a schema with a number of string fields and a virtual for getting the URL of specific book records, and we've exported the model.</p>
+
+<pre class="brush: js">var mongoose = require('mongoose');
+
+var Schema = mongoose.Schema;
+
+var BookSchema = new Schema(
+  {
+    title: {type: String, required: true},
+  <strong>  author: {type: Schema.Types.ObjectId, ref: 'Author', required: true},</strong>
+    summary: {type: String, required: true},
+    isbn: {type: String, required: true},
+  <strong>  genre: [{type: Schema.Types.ObjectId, ref: 'Genre'}]</strong>
+  }
+);
+
+// Virtual for book's URL
+BookSchema
+.virtual('url')
+.get(function () {
+  return '/catalog/book/' + this._id;
+});
+
+//Export model
+module.exports = mongoose.model('Book', BookSchema);
+</pre>
+
+<p>The main difference here is that we've created two references to other models:</p>
+
+<ul>
+ <li>author is a reference to a single <code>Author</code> model object, and is required.</li>
+ <li>genre is a reference to an array of <code>Genre</code> model objects. We haven't declared this object yet!</li>
+</ul>
+
+<h3 id="BookInstance_model">BookInstance model</h3>
+
+<p>Finally, copy the <code>BookInstance</code> schema code shown below and paste it into your <strong>./models/bookinstance.js</strong> file. The <code>BookInstance</code> represents a specific copy of a book that someone might borrow and includes information about whether the copy is available, on what date it is expected back, and "imprint" (or version) details.</p>
+
+<pre class="brush: js">var mongoose = require('mongoose');
+
+var Schema = mongoose.Schema;
+
+var BookInstanceSchema = new Schema(
+  {
+    book: { type: Schema.Types.ObjectId, ref: 'Book', required: true }, //reference to the associated book
+    imprint: {type: String, required: true},
+    status: {type: String, required: true, <strong>enum: ['Available', 'Maintenance', 'Loaned', 'Reserved']</strong>, <strong>default: 'Maintenance'</strong>},
+    due_back: {type: Date, <strong>default: Date.now</strong>}
+  }
+);
+
+// Virtual for bookinstance's URL
+BookInstanceSchema
+.virtual('url')
+.get(function () {
+  return '/catalog/bookinstance/' + this._id;
+});
+
+//Export model
+module.exports = mongoose.model('BookInstance', BookInstanceSchema);</pre>
+
+<p>The new things we show here are the field options:</p>
+
+<ul>
+ <li><code>enum</code>: This allows us to set the allowed values of a string. In this case, we use it to specify the availability status of our books (using an enum means that we can prevent mis-spellings and arbitrary values for our status).</li>
+ <li><code>default</code>: We use default to set the default status for newly created bookinstances to maintenance and the default <code>due_back</code> date to <code>now</code> (note how you can call the Date function when setting the date!).</li>
+</ul>
+
+<p>Everything else should be familiar from our previous schema.</p>
+
+<h3 id="Genre_model_-_challenge!">Genre model - challenge!</h3>
+
+<p>Open your <strong>./models/genre.js</strong> file and create a schema for storing genres (the category of book, e.g. whether it is fiction or non-fiction, romance or military history, etc).</p>
+
+<p>The definition will be very similar to the other models:</p>
+
+<ul>
+ <li>The model should have a <code>String</code> SchemaType called <code>name</code> to describe the genre.</li>
+ <li>This name should be required and have between 3 and 100 characters.</li>
+ <li>Declare a <a href="#Virtual_properties">virtual</a> for the genre's URL, named <code>url</code>.</li>
+ <li>Export the model.</li>
+</ul>
+
+<h2 id="Testing_—_create_some_items">Testing — create some items</h2>
+
+<p>That's it. We now have all models for the site set up!</p>
+
+<p>In order to test the models (and to create some example books and other items that we can use in our next articles) we'll now run an <em>independent</em> script to create items of each type:</p>
+
+<ol>
+ <li>Download (or otherwise create) the file <a href="https://raw.githubusercontent.com/hamishwillee/express-locallibrary-tutorial/master/populatedb.js">populatedb.js</a> inside your <em>express-locallibrary-tutorial</em> directory (in the same level as <code>package.json</code>).
+
+  <div class="note">
+  <p><strong>Note:</strong> You don't need to know how <a href="https://raw.githubusercontent.com/hamishwillee/express-locallibrary-tutorial/master/populatedb.js">populatedb.js</a> works; it just adds sample data into the database.</p>
+  </div>
+ </li>
+ <li>Enter the following commands in the project root to install the <em>async</em> module that is required by the script (we'll discuss this in later tutorials, )
+  <pre class="brush: bash">npm install async</pre>
+ </li>
+ <li>Run the script using node in your command prompt, passing in the URL of your <em>MongoDB</em> database (the same one you replaced the <em>insert_your_database_url_here </em>placeholder with, inside <code>app.js</code> earlier): Be sure to pass it  as  a string by wrapping it with <code>''</code>.
+  <pre class="brush: bash">node populatedb &lt;your mongodb url&gt;​​​​</pre>
+ </li>
+ <li>
+  <div class="blockIndicator note">
+  <p><strong>Note for Windows operating system users</strong>: If the above command results in the error <code>DeprecationWarning: current URL string parser is deprecated</code>, change the <code>mongoose.connect(mongoDB);</code> line in <code>populatedb.js</code> file with <code>mongoose.connect(mongoDB, { useNewUrlParser:true });</code></p>
+
+  <p>Also, if you encounter problem with your MongoDb connection(e.g. <strong>MongoDb connection error: TypeError: Cannot read property 'split' of null</strong>) you should try the command above, only WITHOUT wrapping mongodb url as a string with ' ';</p>
+  </div>
+ </li>
+ <li>The script should run through to completion, displaying items as it creates them in the terminal.</li>
+</ol>
+
+<div class="note">
+<p><strong>Tip:</strong> Go to your database on mongoDB Atlas (in the <em>Collections</em> tab). You should now be able to drill down into individual collections of Books, Authors, Genres and BookInstances, and check out individual documents.</p>
+</div>
+
+<h2 id="Summary">Summary</h2>
+
+<p>In this article, we've learned a bit about databases and ORMs on Node/Express, and a lot about how Mongoose schema and models are defined. We then used this information to design and implement <code>Book</code>, <code>BookInstance</code>, <code>Author</code> and <code>Genre</code> models for the <em>LocalLibrary</em> website.</p>
+
+<p>Last of all, we tested our models by creating a number of instances (using a standalone script). In the next article we'll look at creating some pages to display these objects.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://expressjs.com/en/guide/database-integration.html">Database integration</a> (Express docs)</li>
+ <li><a href="http://mongoosejs.com/">Mongoose website</a> (Mongoose docs)</li>
+ <li><a href="http://mongoosejs.com/docs/guide.html">Mongoose Guide</a> (Mongoose docs)</li>
+ <li><a href="http://mongoosejs.com/docs/validation.html">Validation</a> (Mongoose docs)</li>
+ <li><a href="http://mongoosejs.com/docs/schematypes.html">Schema Types</a> (Mongoose docs)</li>
+ <li><a href="http://mongoosejs.com/docs/models.html">Models</a> (Mongoose docs)</li>
+ <li><a href="http://mongoosejs.com/docs/queries.html">Queries</a> (Mongoose docs)</li>
+ <li><a href="http://mongoosejs.com/docs/populate.html">Population</a> (Mongoose docs)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs/routes", "Learn/Server-side/Express_Nodejs")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node introduction</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Setting up a Node (Express) development environment</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: The Local Library website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Part 3: Using a Database (with Mongoose)</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Part 4: Routes and controllers</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a></li>
+</ul>
diff --git a/files/de/learn/server-side/index.html b/files/de/learn/server-side/index.html
new file mode 100644
index 0000000000..49ab06f262
--- /dev/null
+++ b/files/de/learn/server-side/index.html
@@ -0,0 +1,59 @@
+---
+title: Serverseitige Webseitenprogrammierung
+slug: Learn/Server-side
+tags:
+  - Anfänger
+  - Beginner
+  - CodingScripting
+  - Intro
+  - Landing
+  - Learn
+  - Server
+  - Server-side programming
+  - Topic
+  - serverseitiges Programmieren
+translation_of: Learn/Server-side
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Der Themenbereich <strong><em>Dynamische Webseiten </em></strong>–<em><strong> Serverseitige Programmierung</strong></em> beinhaltet eine Reihe von Modulen, die erläutern, wie man dynamische Webseiten erstellt. Dynamische Webseiten sind Seiten, die individualisierte Inhalte als Antwort auf HTTP-Anfragen ausliefern. Die Module bieten eine allgemeine Einführung in die serverseitige Programmierung, wie auch spezifische Anfänger-Leitfäden zur Benutzung der Django (Python) und Express (Node.js/JavaScript) Web-Frameworks zum Erstellen von einfachen Anwendungen.</p>
+
+<p>Die meisten großen Webseiten nutzten irgendeine Art serverseitiger Technologie zur dynamischen Anzeige von verschiedenen Daten, je nach Bedarf. Stellen Sie sich zum Beispiel einmal vor, wie viele Produkte es auf Amazon gibt und wie viele Posts auf Facebook geschrieben wurden. All diese darzustellen, indem man komplett statische Seiten nutzt, wäre völlig ineffizient. Deshalb laden solche Seiten stattdessen erst statische Vorlagen (erstellt mit <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a> und <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>), dann aktualisieren sie die Daten in diesen Vorlagen dynamisch, wenn sie benötigt werden, z.B. wenn Sie sich ein anderes Produkt auf Amazon ansehen wollen.</p>
+
+<p>In der modernen Welt der Webentwicklung ist es sehr empfehlenswert, etwas über serverseitige Entwicklung zu lernen.</p>
+
+<h2 id="Ihr_Lernweg">Ihr Lernweg</h2>
+
+<p>Mit dem serverseitigen Programmieren zu beginnen, ist in der Regel leichter als mit der clientseitigen, weil dynamische Webseiten dazu neigen, viele ähnliche Arbeitsabläufe auszuführen (Daten aus einer Datenbank laden und auf der Webseite darstellen, Benutzereingaben validieren und in einer Datenbank speichern, Berechtigungen von Nutzern prüfen und einloggen von Benutzern, etc.) und mit Web-Frameworks konstruiert werden, die diese und andere häufige Webserver-Aufgaben erleichtern.</p>
+
+<p>Grundlegende Kenntnisse von Konzepten der Programmierung (oder einer bestimmten Programmiersprache) sind hilfreich, aber nicht unbedingt notwendig. Genauso sind Kenntnisse in der clientseitigen Programmierung keine Vorraussetzung, aber ein grundlegendes Verständnis wird Ihnen helfen, besser mit den Entwicklern zusammen zu arbeiten, die Ihre Webseite clientseitig im "Front-end" entwickeln.</p>
+
+<p>Sie werden verstehen müssen, "wie das Internet funktioniert". Wir empfehlen, dass Sie zuerst die folgenden Themen lesen:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">What is a web server</a></li>
+ <li><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">What software do I need to build a website?</a></li>
+ <li><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">How do you upload files to a web server?</a></li>
+</ul>
+
+<p>Mit diesem grundlegenden Verständnis sind Sie bereit, sich durch die Module in diesem Abschnitt zu arbeiten. </p>
+
+<h2 id="Module">Module</h2>
+
+<p>Dieses Thema enthält die folgenden Module. Sie sollten mit dem ersten Modul beginnen, dann eines der nachfolgenden Module auswählen, die Ihnen zeigen, wie man mit zwei sehr verbreiteten serverseitigen Sprachen arbeitet, indem man das entsprechende Web-Framework verwendet.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Server-side/First_steps">Server-side website programming first steps</a></dt>
+ <dd>Dieses Modul bietet Server-Technologie-agnostische Informationen über serverseitiges Programmieren von Webseiten, einschließlich der Antworten auf die fundamentalen Fragen des serverseitigen Programmierens — "Was ist es?", "Wie unterscheidet es sich vom clientseitigen Programmieren?" und "Warum ist es so nützlich", einen Überblick über einige der verbreiteteren serverseitigen Web-Frameworks und einen Ratgeber darüber, wie Sie das am besten für Ihre Seite passende auswählen. Zuletzt geben wir noch eine Einführung in die Sicherheit von Webservern.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django">Django Web Framework (Python)</a></dt>
+ <dd>Django ist ein extrem beliebtes und vollwertiges Web-Framework, geschrieben in Python. Das Modul erklärt, warum Django so ein gutes Server-Framework ist, wie man eine Entwicklnugsumgebung einrichtet und wie man häufige Aufgaben damit erledigt.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Express Web Framework (Node.js/JavaScript)</a></dt>
+ <dd>Express ist ein beliebtes Web-Framework, geschrieben in JavaScript und gehostet in der node.js Laufzeitumgebung. Das Modul erklärt einige der Hauptvorteile dieses Frameworks, wie Sie Ihre Entwicklungsumgebung einrichten und wie man damit häufige Entwicklungs- und Bereitstellungsaufgaben umsetzt.</dd>
+</dl>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Server-side/Node_server_without_framework">Node server without framework</a></dt>
+ <dd>Dieser Artikel liefert einen einfachen statischen Dateiserver, der mit Node.js erstellt wurde, für diejenigen, die das Framework nicht verwenden möchten.</dd>
+</dl>
diff --git a/files/de/learn/tools_and_testing/cross_browser_testing/index.html b/files/de/learn/tools_and_testing/cross_browser_testing/index.html
new file mode 100644
index 0000000000..c92e094d0a
--- /dev/null
+++ b/files/de/learn/tools_and_testing/cross_browser_testing/index.html
@@ -0,0 +1,49 @@
+---
+title: Cross browser testing
+slug: Learn/Tools_and_testing/Cross_browser_testing
+tags:
+  - Accessibility
+  - Automation
+  - Beginner
+  - CSS
+  - CodingScripting
+  - HTML
+  - JavaScript
+  - Landing
+  - Learn
+  - Module
+  - NeedsTranslation
+  - Testing
+  - Tools
+  - TopicStub
+  - cross browser
+translation_of: Learn/Tools_and_testing/Cross_browser_testing
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">This module focuses on testing web projects across different browsers. We look at identifying your target audience (e.g. what users, browsers, and devices do you most need to worry about?), how to go about doing testing, the main issues that you'll face with different types of code and how to mitigate them, what tools are most useful in helping you test and fix problems, and how to use automation to speed up testing.</p>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>You should really learn the basics of the core <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> languages first before attempting to use the tools detailed here.</p>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Introduction to cross browser testing</a></dt>
+ <dd>This article starts the module off by providing an overview of the topic of cross browser testing, answering questions such as "what is cross browser testing?", "what are the most common types of problems you'll encounter?", and "what are the main approaches for testing, identifying, and fixing problems?"</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Strategies for carrying out testing</a></dt>
+ <dd>Next, we drill down into carrying out testing, looking at identifying a target audience (e.g. what browsers, devices, and other segments should you make sure are tested), low fi testing strategies (get yourself a range of devices and some virtual machines and do adhoc tests when needed), higher tech strategies (automation, using dedicated testing apps), and testing with user groups.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Handling common HTML and CSS problems</a></dt>
+ <dd>With the scene set, we'll now look specifically at the common cross browser problems you will come across in HTML and CSS code, and what tools can be used to prevent problems from happening, or fix problems that occur. This includes linting code, handing CSS prefixes, using browser dev tools to track down problems, using polyfills to add support into browsers, tackling responsive design problems, and more.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Handling common JavaScript problems</a></dt>
+ <dd>Now we'll look at common cross browser JavaScript problems and how to fix them. This includes information on using browser dev tools to track down and fix problems, using polyfills and libraries to work around problems, getting modern JavaScript features working in older browsers, and more.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Handling common accessibility problems</a></dt>
+ <dd>Next we turn our attention to accessibility, providing information on common problems, how to do simple testing, and how to make use of auditing/automation tools for finding accessibility issues.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implementing feature detection</a></dt>
+ <dd>Feature detection involves working out whether a browser supports a certain block of code, and running different code dependent on whether it does (or doesn't), so that the browser can always provide a working experience rather crashing/erroring in some browsers. This article details how to write your own simple feature detection, how to use a library to speed up implementation, and native features for feature detection such as <code>@supports</code>.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Introduction to automated testing</a></dt>
+ <dd>Manually running tests on several browsers and devices, several times per day, can get tedious and time consuming. To handle this efficiently, you should become familiar with automation tools. In this article we look at what is available, how to use task runners, and the basics of how to use commercial browser test automation apps such as Sauce Labs and Browser Stack.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Setting up your own test automation environment</a></dt>
+ <dd>In this article, we will teach you how to install your own automation environment and run your own tests using Selenium/WebDriver and a testing library such as selenium-webdriver for Node. We will also look at how to integrate your local testing environment with commercial apps like the ones discussed in the previous article.</dd>
+</dl>
diff --git a/files/de/learn/tools_and_testing/index.html b/files/de/learn/tools_and_testing/index.html
new file mode 100644
index 0000000000..0099fb70c6
--- /dev/null
+++ b/files/de/learn/tools_and_testing/index.html
@@ -0,0 +1,46 @@
+---
+title: Tools and testing
+slug: Learn/Tools_and_testing
+tags:
+  - Anfänger
+  - Automation
+  - Barrierefreiheit
+  - CSS
+  - CodingScripting
+  - HTML
+  - JavaScript
+  - Landen
+  - Lernen
+  - Nutzer testen
+  - Testen
+  - Thema
+  - Werkzeuge
+  - browserübergreifend
+translation_of: Learn/Tools_and_testing
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Wenn du dich mit den Grundlegenden Web-Technologien (wie HTML, CSS und JavaScript) vertraut gemacht, und du begonnen hast mehr Erfahrung zu sammeln, mehr Quellen zu lesen und mehr Tipps und Tricks zu lernen, wirst du auf verschiedenste Werkzeuge stoßen mit denen du arbeiten kannst. Von JavaScript über Test- und Automatisierungsapps hin zu vielen Anderen. Du wirst beginnen den Nutzen solcher Werkzeuge zu schätzen, sobald dein Webprojekt wächst und komplexer wird und damit zuverlässige Test Pläne für deinen Code erarbeiten. Dieser Teil des Lernbereichs soll dir geben was du brauchst, um anzufangen und eine bewusste Auswahl zu treffen.</p>
+
+<p>Die Interenet Industrie ist ein spannender Arbeitsbereich, aber er hat auch seine Schwierigkeiten. Die Kern-Technologien die wir nutzen, um Webseiten zu erstellen sind heute weitgehend stabil, aber es werden ständig neue Features hinzugefügt und neue Werkzeuge - die die Arbeit damit ermöglichen und die auf diesen Technologien aufbauen - erscheinen die ganze Zeit. Zusätzlich müssen wir vordergründig immer noch Browser-übergreifende Unterstützung und kompatibilität bedenken, um sicherzustellen, dass unser Code gängigen Best-Practices folgt. Durch diese wird gewährleistet, dass unser Projekt auf den verschiedenen Browsern und Geräten, die unsere Nutzer verwenden um im Internet zu surfen und auch von Menschen mit Einschränkungen, genutzt werden können.</p>
+
+<p>Es kann schwierig sein, herauszufinden mit welchen Werkzeugen du arbeiten solltest. Darum haben wir diese Artikel-Serie geschrieben: Um dich zu informieren welche Tools es gibt, was sie für dich machen können und wie du die aktuellen Industry Favorites benutzen kannst.</p>
+
+<div class="note">
+<p><strong>Wichtig:</strong> Weil ständig neue Tools erscheinen und alte aus der Mode kommen, haben wir darauf geachtet, die Inhalte so bedacht und Neutral wie möglich zu schreiben - wir wollen den Fokus in erster Linie auf die generellen Arten von Aufgaben legen und wie Werkzeuge dir helfen diese zu lösen, und beschreiben spezifische Tools so wenig wie möglich. Klarerweise müssen wir anhand diverser Tools bestimmte Techniken vorzeigen, aber sei dir bewusst, dass wir diese Tools nicht als die besten empfehlen oder das der einzige Weg ist wie du die Dinge tun kannst - in den meisten Fällen gibt es andere Wge, aber wir wollen dir eine klare Methode vorzeigen die funktioniert.</p>
+</div>
+
+<h2 id="Lerne_in_der_Reihenfolge">Lerne in der Reihenfolge</h2>
+
+<p>Du solltest wirklich die Basics der Kernsprachen <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML">HTML</a>, <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">CSS</a> und <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript</a> zuerst lernen, bevor du anfängst die hier beschriebenen Tools zu benutzen. Du musst die Grundlagen dieser Sprachen kennen, bevor du ein Problem in komplexem Webcode debuggen, JavaScript Bibliotheken effektiv nutzen, oder Tests schreiben und gegen deinen Code mit Testrunners laufen lassen kannst. Usw.</p>
+
+<p>Du brauchst zuerst ein solides Fundament.</p>
+
+<h2 id="Module">Module</h2>
+
+<dl>
+ <dt>Real world web development tools (TBD)</dt>
+ <dd>In diesem Modul erforschen wir die unterschiedlichen Arten von Web-Entwicklungs Werkzeugen die es gibt. Das beeinhaltet die Betrachtung der üblichsten Arten von Aufgaben die du zu lösen hast, wie diese in einem Arbeitsablauf zusammengelegt werden können, und die besten Werkzeuge die derzeit erhältlich sind, um diese Aufgaben durchzuführen.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Browser-übergreifendes Testen</a></dt>
+ <dd>Dieses Modul behandelt speziell das Testen von Web-Projekten auf den unterschiedlichen Browsern. Hier identifizieren wir deine Zielgruppe (z.B. um welche Nutzer, Browser und Geräte musst du dich am meisten kümmern?), Vorgehensweise bei Tests, die Hauptprobleme die dich mit den unterschiedlichen Typen von Code konfrontieren und wie du diese löst/minderst, welche Werkzeuge die hilfreichsten fürs Testen und Lösen von Problemen sind, und wie du Automatisierung nutzt, um Test zu beschleunigen.</dd>
+</dl>
diff --git a/files/de/list_of_mozilla-based_applications/index.html b/files/de/list_of_mozilla-based_applications/index.html
new file mode 100644
index 0000000000..ebf63ce2c5
--- /dev/null
+++ b/files/de/list_of_mozilla-based_applications/index.html
@@ -0,0 +1,1265 @@
+---
+title: List of Mozilla-Based Applications
+slug: List_of_Mozilla-Based_Applications
+translation_of: Archive/List_of_Mozilla-Based_Applications
+---
+<p>The following is a list of all known active applications that are built using <a class="urlextern" href="http://www.mozilla.org/projects/technologies.html" rel="nofollow" title="http://www.mozilla.org/projects/technologies.html">Mozilla technologies</a>. This list is likely to be incomplete since we think there are many <a class="external" href="http://starkravingfinkle.org/blog/2007/02/more-xul-dark-matter/">dark matter</a> projects that we don't know about. If you have information about a new project or extra information about an existing project, please feel free to update this page.</p>
+<p><em>A list of <a href="/En/List_of_Former_Mozilla-Based_Applications" title="En/List_of_Former_Mozilla-Based_Applications">former Mozilla-based applications</a> is also available.</em></p>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Name</th>
+   <th>Description</th>
+   <th>Additional Information</th>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://directory.fedoraproject.org/">389 Directory Server</a></td>
+   <td>LDAP server</td>
+   <td>Uses <a class="external" href="http://www.mozilla.org/projects/security/pki/nss/">NSS</a></td>
+  </tr>
+  <tr>
+   <td>A380 seatback entertainment system</td>
+   <td>media software</td>
+   <td>This <a class="external" href="http://weblogs.mozillazine.org/gerv/archives/2009/02/a380_seatback_is_mozillabased.html">blog post</a> mentions a reference to Mozilla being used but I couldn't find more information about it.</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.aasii.org/" rel="nofollow" title="http://www.aasii.org/">Abstract</a></td>
+   <td>accounting tool</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.adobe.com/products/acrobat/" rel="nofollow" title="http://www.adobe.com/products/acrobat/">Adobe Acrobat</a> and <a class="urlextern" href="http://www.adobe.com/products/reader/" rel="nofollow" title="http://www.adobe.com/products/reader/">Adobe Reader</a></td>
+   <td>Portable Document Format (<acronym title="Portable Document Format">PDF</acronym>) software</td>
+   <td>Uses <a class="urlextern" href="http://www.mozilla.org/js/spidermonkey/" rel="nofollow" title="http://www.mozilla.org/js/spidermonkey/">Mozilla SpiderMonkey</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.adobe.com/products/flashplayer/" rel="nofollow" title="http://www.adobe.com/products/flashplayer/">Adobe Flash Player</a></td>
+   <td>popular browser plug-in</td>
+   <td>Uses <a class="urlextern" href="http://www.mozilla.org/projects/security/pki/nss/" rel="nofollow" title="http://www.mozilla.org/projects/security/pki/nss/">NSS</a> in Linux version</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.mediaspectrum.net/index.php?page=adwatch" rel="nofollow" title="http://www.mediaspectrum.net/index.php?page=adwatch">AdWatch</a></td>
+   <td>content management system</td>
+   <td>Uses XUL and XPCOM</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.aicpcu.org/Students/installieea.htm" rel="nofollow" title="http://www.aicpcu.org/Students/installieea.htm">AICPCU/IIA exam app</a></td>
+   <td>exam delivery software</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://aliwal.googlecode.com" rel="nofollow" title="http://aliwal.googlecode.com">Aliwal Geocoder</a></td>
+   <td>geocoding &amp; data on a map</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://sourceforge.net/projects/xul-amarok/" rel="nofollow" title="http://sourceforge.net/projects/xul-amarok/">Amarok XUL remote</a></td>
+   <td>remote control for AmaroK music player</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.amplesdk.com/" rel="nofollow" title="http://www.amplesdk.com/">Ample SDK</a></td>
+   <td>Javascript GUI-framework</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://dashboard.aim.com/aim" rel="nofollow" title="http://dashboard.aim.com/aim">AOL Instant Messenger</a></td>
+   <td>IM client</td>
+   <td>Uses <a class="urlextern" href="http://www.mozilla.org/projects/security/pki/nss/" rel="nofollow" title="http://www.mozilla.org/projects/security/pki/nss/">NSS</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://httpd.apache.org/" rel="nofollow" title="http://httpd.apache.org/">Apache</a></td>
+   <td>web server</td>
+   <td>Doesn't use <a class="urlextern" href="http://www.mozilla.org/projects/security/pki/nss/" rel="nofollow" title="http://www.mozilla.org/projects/security/pki/nss/">NSS</a> by default, but can be configured to use NSS with mod_nss <acronym title="Secure Sockets Layer">SSL</acronym> module</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://apicasystem.com/" rel="nofollow" title="http://apicasystem.com/">ApicaWatch</a></td>
+   <td>site performance monitoring tool</td>
+   <td>Uses Firefox as part of its monitoring package</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.athlab.com/" rel="nofollow" title="http://www.athlab.com/">Astyle CSS editor</a></td>
+   <td>editing tool</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://atmail.com/webmail-client/" rel="nofollow" title="http://atmail.com/webmail-client/">Atmail</a></td>
+   <td>webmail client</td>
+   <td class="rightalign"> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.avivasolutions.com/products/software.php?product=2&amp;product_tab=5" rel="nofollow" title="http://www.avivasolutions.com/products/software.php?product=2&amp;product_tab=5">Aviva for Java</a></td>
+   <td>mainframe connectivity product</td>
+   <td>Uses <a class="urlextern" href="http://www.mozilla.org/rhino/" rel="nofollow" title="http://www.mozilla.org/rhino/">Mozilla Rhino</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.babelgum.com/download/" rel="nofollow" title="http://www.babelgum.com/download/">Babelgum</a></td>
+   <td>Internet TV service</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://xmlgraphics.apache.org/batik/" rel="nofollow" title="http://xmlgraphics.apache.org/batik/">Batik</a></td>
+   <td>Java-based toolkit</td>
+   <td>Uses <a class="urlextern" href="http://www.mozilla.org/rhino/" rel="nofollow" title="http://www.mozilla.org/rhino/">Mozilla Rhino</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.sirrix.de/content/pages/BitBox.htm" rel="nofollow" title="http://www.sirrix.de/content/pages/BitBox.htm">BitBox</a></td>
+   <td>security focused browser</td>
+   <td><a href="http://www.tomsguide.com/us/firefox-linux-bitbox-secure-web-browser,news-11203.html">Seemingly based on Firefox</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.blackbirdhome.com/" rel="nofollow" title="http://www.blackbirdhome.com/">Blackbird</a></td>
+   <td>browser for African American community</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.bluegriffon.org" rel="nofollow" title="http://www.bluegriffon.org">BlueGriffon</a></td>
+   <td>wysiwyg editor</td>
+   <td>Next generation version of Composer</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://getbuzzbird.com" rel="nofollow" title="http://getbuzzbird.com">Buzzbird</a></td>
+   <td>Twitter client</td>
+   <td>Built on XULRunner</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.caminobrowser.org" rel="nofollow" title="http://www.caminobrowser.org">Camino</a></td>
+   <td>browser</td>
+   <td>2.5m downloads and ~400,000 active users ... </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://celtx.com/" rel="nofollow" title="http://celtx.com/">Celtx</a></td>
+   <td>media tool</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.cenzic.com/products/software/overview/" rel="nofollow" title="http://www.cenzic.com/products/software/overview/">Cenzic Hailstorm</a></td>
+   <td>vulnerability assessment and management tool</td>
+   <td>Uses Gecko</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://chatzilla.rdmsoft.com/xulrunner/" rel="nofollow" title="http://chatzilla.rdmsoft.com/xulrunner/">ChatZilla</a></td>
+   <td><acronym title="Internet Relay Chat">IRC</acronym> client</td>
+   <td>Standalone version (XULRunner)</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://dev.chromium.org/Home" title="http://dev.chromium.org/Home">Chromium</a> and <a class="external" href="http://www.google.com/chrome">Google Chrome</a></td>
+   <td>web browser</td>
+   <td>Uses Mozilla <a class="external" href="http://www.google.com/codesearch/p?hl=en#1IKf2ZWr9OM/deps/third_party/xulrunner-sdk/win/include/nss/nss.h&amp;q=package:%22src.chromium.org/svn/trunk%22%20nss&amp;d=6" title='http://www.google.com/codesearch/p?hl=en#1IKf2ZWr9OM/deps/third_party/xulrunner-sdk/win/include/nss/nss.h&amp;amp;q=package:"src.chromium.org/svn/trunk" nss&amp;amp;d=6'>NSS</a> and <a class="external" href="http://www.google.com/codesearch/p?hl=en#1IKf2ZWr9OM/deps/third_party/gecko-sdk/include/npapi.h&amp;q=package:%22src.chromium.org/svn/trunk%22%20npapi&amp;sa=N&amp;cd=1&amp;ct=rc" title='http://www.google.com/codesearch/p?hl=en#1IKf2ZWr9OM/deps/third_party/gecko-sdk/include/npapi.h&amp;amp;q=package:"src.chromium.org/svn/trunk" npapi&amp;amp;sa=N&amp;amp;cd=1&amp;amp;ct=rc'>NPAPI</a> libraries </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://mozillalabs.com/chromeless/2010/10/21/chromeless-build-your-own-browser-ui-using-html-css-js/" rel="nofollow" title="http://mozillalabs.com/chromeless/2010/10/21/chromeless-build-your-own-browser-ui-using-html-css-js/">Chromeless</a></td>
+   <td>browser with HTML-based interface</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.floodgap.com/software/classilla/" rel="nofollow" title="http://www.floodgap.com/software/classilla/">Classilla</a></td>
+   <td>Mozilla browser for Mac OS 9</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.fdn.fr/~arenevier/clines/index.php#xulrunner" rel="nofollow" title="http://www.fdn.fr/~arenevier/clines/index.php#xulrunner">Clines</a></td>
+   <td>a clone of Color Lines (game)</td>
+   <td>Standalone version</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.thinkgos.com/cloud/index.html" rel="nofollow" title="http://www.thinkgos.com/cloud/index.html">Cloud</a></td>
+   <td>web operating system</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.alwaysontechnologies.com/cloudbrowse/" rel="nofollow" title="http://www.alwaysontechnologies.com/cloudbrowse/">Cloud Browse</a></td>
+   <td>iPhone/iPad/iPod Touch browser</td>
+   <td>Seems to be Firefox running remotely on servers that people access through device</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://conkeror.org" rel="nofollow" title="http://conkeror.org">Conkeror</a></td>
+   <td>keyboard-oriented browser</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.convertigo.com" rel="nofollow" title="http://www.convertigo.com">Convertigo Enterprise Mashup Server</a></td>
+   <td>server tool for transactional web scraping and for web clipping</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://www.cometbird.com/" title="http://www.cometbird.com/">CometBird</a></td>
+   <td>another Firefox mod</td>
+   <td>Modified version of Firefox</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.nkreeger.com/correo/" rel="nofollow" title="http://www.nkreeger.com/correo/">Correo</a></td>
+   <td>email</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="https://gna.org/projects/couac" rel="nofollow" title="https://gna.org/projects/couac">Couac</a> (fr)</td>
+   <td>web-based email and jabber app</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://couchdb.apache.org/" rel="nofollow" title="http://couchdb.apache.org/">CouchDB</a></td>
+   <td>document-oriented database</td>
+   <td>Uses Spidermonkey</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.courtanet.net/" rel="nofollow" title="http://www.courtanet.net/">Courtanet Benefit</a> (fr)</td>
+   <td>underwriting software for French insurance brokers</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.thefrontside.net/crosscheck" rel="nofollow" title="http://www.thefrontside.net/crosscheck">Crosscheck</a></td>
+   <td>browserless testing framework</td>
+   <td>Uses <a class="urlextern" href="http://www.mozilla.org/rhino/" rel="nofollow" title="http://www.mozilla.org/rhino/">Mozilla Rhino</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://simile.mit.edu/wiki/Crowbar" rel="nofollow" title="http://simile.mit.edu/wiki/Crowbar">Crowbar</a></td>
+   <td>server tool</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://code.google.com/p/cycloctopus/" rel="nofollow" title="http://code.google.com/p/cycloctopus/">Cycloctopus</a></td>
+   <td>screen scraping console</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.cyclone3.org/about" rel="nofollow" title="http://www.cyclone3.org/about">Cyclone3</a></td>
+   <td>content management system</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.danger.com/" rel="nofollow" title="http://www.danger.com/">Danger</a></td>
+   <td>mobile platform</td>
+   <td>Uses Gecko on the server side -- <a class="external" href="http://arstechnica.com/microsoft/news/2010/07/a-post-mortem-of-kins-tragic-demise.ars">no longer active?</a></td>
+  </tr>
+  <tr>
+   <td>Desktop 2</td>
+   <td>internal browser and portal client</td>
+   <td><a class="urlextern" href="http://www.expeditors.com" rel="nofollow" title="http://www.expeditors.com">Expeditors International of Washington, Inc.</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://pki.fedoraproject.org/wiki/PKI_Main_Page" rel="nofollow" title="http://pki.fedoraproject.org/wiki/PKI_Main_Page">Dogtag</a></td>
+   <td>certificate system</td>
+   <td>Uses <a class="external" href="http://www.mozilla.org/projects/security/pki/nss/">NSS</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.dojotoolkit.org/docs/shrinksafe" rel="nofollow" title="http://www.dojotoolkit.org/docs/shrinksafe">Dojo</a></td>
+   <td>JavaScript toolkit</td>
+   <td>Uses <a class="urlextern" href="http://www.mozilla.org/rhino/" rel="nofollow" title="http://www.mozilla.org/rhino/">Mozilla Rhino</a> in ShrinkSafe</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.eclipse.org" rel="nofollow" title="http://www.eclipse.org">Eclipse platform</a></td>
+   <td>open development platform</td>
+   <td>The <a class="urlextern" href="http://www.eclipse.org/atf/" rel="nofollow" title="http://www.eclipse.org/atf/">AJAX Toolkit Framework</a>, <a class="urlextern" href="http://www.eclipse.org/swt/" rel="nofollow" title="http://www.eclipse.org/swt/">Standard Widget Toolkit</a> and <a class="urlextern" href="http://www.eclipsemozilla.org/" rel="nofollow" title="http://www.eclipsemozilla.org/">EclipseMozilla</a> projects make use of Mozilla</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern external" href="http://www.webdevelopers.eu" title="http://www.webdevelopers.eu">Elixon WCMS/XUL</a></td>
+   <td>Web Content Management System</td>
+   <td>Fully remote XUL WCMS (no need to install extensions).</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern external" href="http://realityripple.com/Software/Battle.net/Entelechy/" title="http://realityripple.com/Software/Battle.net/Entelechy/">Entelechy</a></td>
+   <td>chat bot</td>
+   <td>Uses XULRunner</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern external" href="http://www.epicbrowser.com/" title="http://www.epicbrowser.com/">Epic Browser</a></td>
+   <td>web browser for India</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://emusic.mozdev.org/" rel="nofollow" title="http://emusic.mozdev.org/">eMusic Download Manager</a></td>
+   <td>music downloader for emusic</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://emusic.mozdev.org/" rel="nofollow" title="http://emusic.mozdev.org/">eMusic Remote</a></td>
+   <td>music manager</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.enlisgenomics.com/" rel="nofollow" title="http://www.enlisgenomics.com/">Enlis Genome Personal</a></td>
+   <td>genome browser</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://esxx.org/" rel="nofollow" title="http://esxx.org/">ESXX</a></td>
+   <td>JavaScript application server</td>
+   <td>
+    <p>Uses <a class="urlextern" href="http://www.mozilla.org/rhino/" rel="nofollow" title="http://www.mozilla.org/rhino/">Mozilla Rhino</a></p>
+   </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://rhaptos.org/downloads/editing/etna" rel="nofollow" title="http://rhaptos.org/downloads/editing/etna">Etna</a></td>
+   <td><acronym title="Extensible Markup Language">XML</acronym> wysiwyg editor</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://eudora.com/" rel="nofollow" title="http://eudora.com/">Eudora</a></td>
+   <td>mail and news application</td>
+   <td>The upcoming <a class="urlextern" href="http://eudora.com/download/eudora/8.0.0b2/RelNotes.txt" rel="nofollow" title="http://eudora.com/download/eudora/8.0.0b2/RelNotes.txt">version 8 will be based on Thunderbird</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://open-ils.org/" rel="nofollow" title="http://open-ils.org/">Evergreen</a></td>
+   <td>library automation system</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.gnome.org/projects/evolution/" rel="nofollow" title="http://www.gnome.org/projects/evolution/">Evolution</a></td>
+   <td>email client</td>
+   <td>Uses <a class="urlextern" href="http://www.mozilla.org/projects/security/pki/nss/" rel="nofollow" title="http://www.mozilla.org/projects/security/pki/nss/">NSS</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://exelearning.org/wiki" rel="nofollow" title="http://exelearning.org/wiki">eXe</a></td>
+   <td>eLearning XHTML editor</td>
+   <td>Seems to be using <a class="external" href="http://exelearning.org/wiki/XULSidebar">XUL for some of their webui</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://developers.facebook.com/fbopen/" rel="nofollow" title="http://developers.facebook.com/fbopen/">Facebook Open Platform</a></td>
+   <td>Facebook Open Platform</td>
+   <td>The FBML parser used in the platform is based on Mozilla code</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://wiki.mozilla.org/Mobile" rel="nofollow" title="http://wiki.mozilla.org/Mobile">Fennec</a></td>
+   <td>Browser for mobiles</td>
+   <td>As <a class="urlextern" href="http://starkravingfinkle.org/blog/2008/09/extensions-for-fennec/" rel="nofollow" title="http://starkravingfinkle.org/blog/2008/09/extensions-for-fennec/">Mark notes</a>: Fennec is not Firefox, it’s a completely different application</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://mathijs.jurresip.nl/findthatfont/" rel="nofollow" title="http://mathijs.jurresip.nl/findthatfont/">FindThatFont!</a></td>
+   <td>font management tool</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.wirespring.com/Products/digital_signage_software_kiosk_software.html" rel="nofollow" title="http://www.wirespring.com/Products/digital_signage_software_kiosk_software.html">Firecast</a></td>
+   <td>digital signage and interactive kiosk tools</td>
+   <td>Also used in <a class="external" href="http://www.simpledigitalsignage.com/">Firecast EasyStart</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.mozilla.com/firefox" rel="nofollow" title="http://www.mozilla.com/firefox">Mozilla Firefox</a></td>
+   <td>web browser</td>
+   <td><a class="urlextern" href="http://www.w3counter.com/globalstats" rel="nofollow" title="http://www.w3counter.com/globalstats">Web Browser usage stats from Global Stats</a></td>
+  </tr>
+  <tr>
+   <td><a href="http://www.fossamail.org/">FossaMail</a></td>
+   <td>email client for Windows platform, based on Mozilla Thunderbird</td>
+   <td>Developed by <a href="http://www.moonchildproductions.info/">Moonchild Productions</a>, creator of the <a href="http://www.palemoon.org/">Pale Moon</a> web browser</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://flickr.com/tools/uploadr/" rel="nofollow" title="http://flickr.com/tools/uploadr/">Flickr Uploadr</a></td>
+   <td>image upload tool</td>
+   <td>see <a class="external" href="http://developer.yahoo.net/blog/archives/2008/02/flickr-uploadr-open-source-xulrunner.html" title="http://developer.yahoo.net/blog/archives/2008/02/flickr-uploadr-open-source-xulrunner.html">Flickr Uploadr: Open Source and Powered by XULRunner</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.smellman.homelinux.org/mozilla/xulapp.html#foxkehclock" rel="nofollow" title="http://www.smellman.homelinux.org/mozilla/xulapp.html#foxkehclock">Foxkeh Clock</a></td>
+   <td>clock</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://code.google.com/p/frizione/" rel="nofollow" title="http://code.google.com/p/frizione/">Frizione</a></td>
+   <td>JavaScript development, testing and deployment environment</td>
+   <td>Uses <a class="urlextern" href="http://www.mozilla.org/rhino/" rel="nofollow" title="http://www.mozilla.org/rhino/">Mozilla Rhino</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://geckofx.org/" rel="nofollow" title="http://geckofx.org/">GeckoFX</a></td>
+   <td>embeddable Gecko</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://live.gnome.org/Gjs" rel="nofollow" title="http://live.gnome.org/Gjs">Gjs</a></td>
+   <td>Javascript bindings for GNOME</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://globalmojo.com/" rel="nofollow" title="http://globalmojo.com/">GlobalMojo</a></td>
+   <td>browser that raises money for your favorite causes</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://gluescript.sourceforge.net/">GLUEscript</a></td>
+   <td>a JavaScript engine which can be used as a general purpose language</td>
+   <td>Uses <a class="urlextern" href="http://www.mozilla.org/js/spidermonkey/" rel="nofollow" title="http://www.mozilla.org/js/spidermonkey/">Mozilla SpiderMonkey</a> and formerly called <a class="urlextern" href="http://www.wxjavascript.net/" rel="nofollow" title="http://www.wxjavascript.net/">wxJavaScript</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.gnome.org/" rel="nofollow" title="http://www.gnome.org/">Gnome</a></td>
+   <td>operating system</td>
+   <td>Gnome 3 will use SpiderMonkey through <a class="external" href="http://live.gnome.org/Gjs">Gjs</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.google.com/intl/en/adwordseditor/index.html" rel="nofollow" title="http://www.google.com/intl/en/adwordseditor/index.html">Google AdWords Editor</a></td>
+   <td>editor</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://code.google.com/p/google-gadgets-for-linux/" rel="nofollow" title="http://code.google.com/p/google-gadgets-for-linux/">Google Gadgets for Linux</a></td>
+   <td>Google’s Desktop Widget engine</td>
+   <td>Uses XULRunner according to the <a class="urlextern" href="http://code.google.com/p/google-gadgets-for-linux/wiki/HowToBuild" rel="nofollow" title="http://code.google.com/p/google-gadgets-for-linux/wiki/HowToBuild">Build Instructions</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.claravision.fr/en/imagerie/Grain_sizing.html" rel="nofollow" title="http://www.claravision.fr/en/imagerie/Grain_sizing.html">Grani</a></td>
+   <td>Grain sizing assessment tool</td>
+   <td>According to this <a class="urlextern" href="http://3liz.com/projects/daim/index.php/Daim/Overview" rel="nofollow" title="http://3liz.com/projects/daim/index.php/Daim/Overview">wiki page</a> Grani is based on <acronym title="XML User Interface Language">XUL</acronym> and XPCOM Daim</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://code.google.com/p/gwt-mosaic-xul/" rel="nofollow" title="http://code.google.com/p/gwt-mosaic-xul/">gwt-mosaic-xul</a></td>
+   <td>XUL builder for Google Web Tools</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://hachette.demarque.com/osapac/index.php" rel="nofollow" title="http://hachette.demarque.com/osapac/index.php">Hachette's Multimedia Encyclopedia</a></td>
+   <td>electronic encyclopedia</td>
+   <td>This product was <a class="urlextern" href="https://mail.mozilla.org/pipermail/newsletter/2004/000022.html" rel="nofollow" title="https://mail.mozilla.org/pipermail/newsletter/2004/000022.html">using Mozilla in 2004</a> but I’m not sure if new version still does</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://hacketyhack.net" rel="nofollow" title="http://hacketyhack.net">HacketyHack</a></td>
+   <td>little coders</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://dev.helma.org/" rel="nofollow" title="http://dev.helma.org/">Helma</a></td>
+   <td>web application framework</td>
+   <td>Uses <a class="urlextern" href="http://www.mozilla.org/rhino/" rel="nofollow" title="http://www.mozilla.org/rhino/">Mozilla Rhino</a></td>
+  </tr>
+  <tr>
+   <td>Holt McDougal CD-ROMs</td>
+   <td>educational CD-ROMs</td>
+   <td><a class="urlextern" href="http://www.mcdougallittell.com/store/ProductCatalogController?cmd=ProductDetail&amp;recordReference=261741&amp;nextPage=McDougal/Product.jsp&amp;division=M01&amp;frontOrBack=F&amp;sortEntriesBy=SEQ_NAME&amp;sortProductsBy=SEQ_TITLE&amp;hierarchyID=1006100000027431" rel="nofollow" title="http://www.mcdougallittell.com/store/ProductCatalogController?cmd=ProductDetail&amp;recordReference=261741&amp;nextPage=McDougal%2FProduct.jsp&amp;division=M01&amp;frontOrBack=F&amp;sortEntriesBy=SEQ_NAME&amp;sortProductsBy=SEQ_TITLE&amp;hierarchyID=1006100000027431">Activity Generator</a> and <a class="urlextern" href="http://findarticles.com/p/articles/mi_m0EIN/is_/ai_n6049242" rel="nofollow" title="http://findarticles.com/p/articles/mi_m0EIN/is_/ai_n6049242">Lab Generator</a> are both based on custom Firefox distributions</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.sidefx.com/index.php" rel="nofollow" title="http://www.sidefx.com/index.php">Houdini</a></td>
+   <td>3d animation tools</td>
+   <td>Uses Gecko in <a class="external" href="http://www.sidefx.com/index.php?option=com_content&amp;task=view&amp;id=1249&amp;Itemid=216">embedded help viewer</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://httpunit.sourceforge.net/" rel="nofollow" title="http://httpunit.sourceforge.net/">HttpUnit</a></td>
+   <td>automated testing framework</td>
+   <td>Uses <a class="urlextern" href="http://www.mozilla.org/rhino/" rel="nofollow" title="http://www.mozilla.org/rhino/">Mozilla Rhino</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://htmlunit.sourceforge.net/" rel="nofollow" title="http://htmlunit.sourceforge.net/">HtmlUnit</a></td>
+   <td>browser for Java programs</td>
+   <td>Uses <a class="urlextern" href="http://www.mozilla.org/rhino/" rel="nofollow" title="http://www.mozilla.org/rhino/">Mozilla Rhino</a></td>
+  </tr>
+  <tr>
+   <td><a href="http://hyperinfo.viz.media.kyoto-u.ac.jp">HyperInfo</a></td>
+   <td>Web Application plat form</td>
+   <td>Uses <a href="https://bitbucket.org/geckofx/">GoeckoFX</a></td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://www-01.ibm.com/software/integration/lombardi-edition/" title="http://www-01.ibm.com/software/integration/lombardi-edition/">IBM WebSphere Lombardi Edition</a></td>
+   <td>business process management system</td>
+   <td>Uses <a class="urlextern" href="http://www.mozilla.org/rhino/" rel="nofollow" title="http://www.mozilla.org/rhino/">Mozilla Rhino</a> and Mozilla XPCOM Eclipse plug-in. (Product was formerly known as <a class="urlextern" href="http://www.lombardisoftware.com/enterprise-bpm-software.php" rel="nofollow" title="http://www.lombardisoftware.com/enterprise-bpm-software.php">Lombardi Teamworks</a>)</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.comodo.com/home/browsers-toolbars/icedragon-browser.php" rel="nofollow" title="http://www.comodo.com/home/browsers-toolbars/icedragon-browser.php">IceDragon</a></td>
+   <td>fast, secure and feature-rich Internet browser</td>
+   <td>Based on Firefox</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.birgin.de/produkte/ida/index_EN.php/" rel="nofollow" title="http://www.birgin.de/produkte/ida/index_EN.php/">IDA</a></td>
+   <td>e-Learning authoring system</td>
+   <td>About 200 users</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://imvu.com/" rel="nofollow" title="http://imvu.com/">IMVU</a></td>
+   <td>3d chat client</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.incredimail.com/english/splash.aspx" rel="nofollow" title="http://www.incredimail.com/english/splash.aspx">Incredimail</a></td>
+   <td>mail client</td>
+   <td>Seems to use XULRunner</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://instantbird.com/" rel="nofollow" title="http://instantbird.com/">Instantbird</a></td>
+   <td>IM client</td>
+   <td>XULRunner application</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.innowhere.com:8080/itsnat/feashow_servlet?itsnat_doc_name=feashow.main" rel="nofollow" title="http://www.innowhere.com:8080/itsnat/feashow_servlet?itsnat_doc_name=feashow.main">ItsNat</a></td>
+   <td>Java AJAX Component based Web Framework</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.java.com/" rel="nofollow" title="http://www.java.com/jaxer/">Java</a></td>
+   <td>software platform</td>
+   <td>Uses <a class="external" href="http://www.mozilla.org/rhino/">Mozilla Rhino</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://javalikescript.free.fr/" rel="nofollow" title="http://javalikescript.free.fr/">JavaLikeScript</a></td>
+   <td>JavaScript extensible tooling framework</td>
+   <td>Uses NSPR and SpiderMonkey</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.aptana.com/jaxer/" rel="nofollow" title="http://www.aptana.com/jaxer/">Jaxer</a></td>
+   <td>Ajax server</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://code.google.com/p/jslibs/" rel="nofollow" title="http://code.google.com/p/jslibs/">jslibs</a></td>
+   <td>JavaScript development runtime environment</td>
+   <td>Uses <a class="urlextern" href="http://www.mozilla.org/js/spidermonkey/" rel="nofollow" title="http://www.mozilla.org/js/spidermonkey/">SpiderMonkey</a> (Note: this is separate from the Javascript library <a class="urlextern" href="http://jslib.mozdev.org/" rel="nofollow" title="http://jslib.mozdev.org/">jsLib</a>)</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.joybidder.com/" rel="nofollow" title="http://www.joybidder.com/">JoyBidder</a></td>
+   <td>eBay auction tool</td>
+   <td>Standalone version uses XULRunner</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://recherche.ircam.fr/equipes/apm/jUST/" rel="nofollow" title="http://recherche.ircam.fr/equipes/apm/jUST/">jUST</a> (fr)</td>
+   <td>audio</td>
+   <td>A tool for setting temporal tags in audio documents</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://jsdoctoolkit.org/" rel="nofollow" title="http://jsdoctoolkit.org/">JsDoc Toolkit</a></td>
+   <td>documentation tool</td>
+   <td>Uses <a class="urlextern" href="http://www.mozilla.org/rhino/" rel="nofollow" title="http://www.mozilla.org/rhino/">Mozilla Rhino</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://kmeleon.sourceforge.net/" rel="nofollow" title="http://kmeleon.sourceforge.net/">K-Meleon</a></td>
+   <td>Gecko-based web browser for Windows</td>
+   <td>Embeds Gecko in MFC</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://home.kairo.at/blog/2008-08/kairo_at_mandelbrot_going_public" rel="nofollow" title="http://home.kairo.at/blog/2008-08/kairo_at_mandelbrot_going_public">KaiRo.at Mandelbrot</a></td>
+   <td>creates images of Mandelbrot sets</td>
+   <td>XULRUnner application</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://kazehakase.sourceforge.jp/" rel="nofollow" title="http://kazehakase.sourceforge.jp/">Kazehakase</a></td>
+   <td>Gecko-based web browser for Unix</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.kirix.com/index.html" rel="nofollow" title="http://www.kirix.com/index.html">Kirix Strata</a></td>
+   <td>data browser</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://kiwix.org/" rel="nofollow" title="http://kiwix.org/">Kiwix</a></td>
+   <td>offline version of Wikipedia</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.kneemailcentral.com/" rel="nofollow" title="http://www.kneemailcentral.com/">Kneemail</a></td>
+   <td>prayer, praise, and journal application</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.activestate.com/products/komodo_ide" rel="nofollow" title="http://www.activestate.com/products/komodo_ide">Komodo</a> and <a class="urlextern" href="http://www.activestate.com/Products/komodo_edit/" rel="nofollow" title="http://www.activestate.com/Products/komodo_edit/">Komodo Edit</a> and <a class="urlextern" href="http://www.openkomodo.com/" rel="nofollow" title="http://www.openkomodo.com/">Open Komodo</a></td>
+   <td>development tools</td>
+   <td>Mozilla-based application (pre-XULRunner style), XUL UI</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://en.wikipedia.org/wiki/KompoZer" rel="nofollow" title="http://en.wikipedia.org/wiki/KompoZer">KompoZer</a></td>
+   <td>wysiwyg <acronym title="HyperText Markup Language">HTML</acronym> editor</td>
+   <td>unofficial bug-fix release of <a class="urlextern" href="http://en.wikipedia.org/wiki/Nvu" rel="nofollow" title="http://en.wikipedia.org/wiki/Nvu">NVu</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://kylo.tv" rel="nofollow" title="http://kylo.tv">Kylo</a></td>
+   <td>video browser</td>
+   <td>Uses Gecko</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.biofortis.com/labmatrix" rel="nofollow" title="http://www.biofortis.com/labmatrix">BioFortis Labmatrix</a></td>
+   <td>web-accessible software application used for information management and integration of patient clinical, specimen, genetic and molecular assay data</td>
+   <td>Based on XUL</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.redbacksystems.com/liaison/" rel="nofollow" title="http://www.redbacksystems.com/liaison/">Liaison Groupware</a></td>
+   <td>client for Novell’s email and collaboration server</td>
+   <td>Previously called MozNGW</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://linbox.com/ucome.rvt/any/fr/Produits/bornes_internet" rel="nofollow" title="http://linbox.com/ucome.rvt/any/fr/Produits/bornes_internet">Linbox Kiosk Browser</a> (fr)</td>
+   <td>web browser</td>
+   <td>Dedicated browser for french prefecture and town hall</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.litl.com/" rel="nofollow" title="http://www.litl.com/">litl</a></td>
+   <td>Internet computer for home</td>
+   <td>Uses SpiderMonkey and Gecko</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://3liz.org/lizilayers/co/01_homepage.html" rel="nofollow" title="http://3liz.org/lizilayers/co/01_homepage.html">LiziLayers</a></td>
+   <td>GIS application</td>
+   <td>3Liz also creates some GIS Firefox add-ons</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.logitech.com/index.cfm/440/372&amp;cl=us,en&amp;hub=1?section=downloads&amp;bit=&amp;osid=9" rel="nofollow" title="http://www.logitech.com/index.cfm/440/372&amp;cl=us,en&amp;hub=1?section=downloads&amp;bit=&amp;osid=9">Logitech Harmony Remote Software</a></td>
+   <td>software for remote control device</td>
+   <td>Uses GRE or XULrunner</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.ldoceonline.com/about.html" rel="nofollow" title="http://www.ldoceonline.com/about.html">Longman Dictionary of Contemporary English</a></td>
+   <td>CD-ROM</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www-128.ibm.com/developerworks/blogs/page/CompApps?entry=how_to_run_xul_applications" rel="nofollow" title="http://www-128.ibm.com/developerworks/blogs/page/CompApps?entry=how_to_run_xul_applications">Lotus Notes / Sametime</a></td>
+   <td>groupware</td>
+   <td>The latest version of IBM Lotus Notes and Sametime can embed <acronym title="XML User Interface Language">XUL</acronym> applications</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://lucidor.org/lucidor/index.html" title="http://lucidor.org/lucidor/index.html">Lucidor</a></td>
+   <td>e-book reader</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://lx-office.org/index.php" title="http://lx-office.org/index.php">Lx-Office</a></td>
+   <td>accounting tool</td>
+   <td>Looks like it makes at least <a class="external" href="http://www.numlock.ch/news/it/gentoo-ebuilds-for-lx-office-erp-260-beta1/">some use of XUL</a></td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://www.assembla.com/wiki/show/maavis" title="http://www.assembla.com/wiki/show/maavis">Maavis</a></td>
+   <td>simple UI &amp; communications for accessibility</td>
+   <td>Framework designed for elderly people with dementia but other applications</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://www.apple.com/macosx/" title="http://www.apple.com/macosx/">Mac OS X</a></td>
+   <td>operating system</td>
+   <td>Makes use of some <a class="external" href="http://www.opensource.apple.com/release/mac-os-x-1062/">MPL files</a> such as <a class="external" href="http://www.opensource.apple.com/source/libsecurity_asn1/libsecurity_asn1-29908/">libsecurity_asn1</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://maemo.nokia.com/features//" rel="nofollow" title="http://maemo.nokia.com/features/">Maemo Browser</a></td>
+   <td>browser for Maemo Internet tablet</td>
+   <td>Development name is <a class="external" href="http://browser.garage.maemo.org/">MicroB</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.magoosoft.com/technology/magooclient/" rel="nofollow" title="http://www.magoosoft.com/technology/magooclient/">MagooClient</a></td>
+   <td>business process management tool</td>
+   <td>Uses <a class="urlextern" href="http://www.mozilla.org/rhino/" rel="nofollow" title="http://www.mozilla.org/rhino/">Mozilla Rhino</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://getmantra.com/" rel="nofollow" title="http://getmantra.com/">Mantra</a></td>
+   <td>security tool</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="/En/McCoy" rel="nofollow" title="https://developer.mozilla.org/En/McCoy">McCoy</a></td>
+   <td>secure update tool for add-ons</td>
+   <td>XULRunner application</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://mediacoder.sourceforge.net/" rel="nofollow" title="http://mediacoder.sourceforge.net/">MediaCoder</a></td>
+   <td>media converter</td>
+   <td>Transcoder for video, audio, and even devices such as Zen, Zune, PocketPCs, iPods, and PSPs</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.khmeros.info/drupal/?q=en/download/mekhala" rel="nofollow" title="http://www.khmeros.info/drupal/?q=en/download/mekhala">Mekhala</a></td>
+   <td>browser</td>
+   <td>Part of the <a class="external" href="http://www.khmeros.info/drupal/?q=en">KhmerOS</a> Linux distro</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://packages.ubuntu.com/gutsy/web/midbrowser" rel="nofollow" title="http://packages.ubuntu.com/gutsy/web/midbrowser">midbrowser</a></td>
+   <td>mobile web browser</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://getmockery.com/" rel="nofollow" title="http://getmockery.com/">Mockery</a></td>
+   <td>mockup creation tool</td>
+   <td>Built on XULRunner</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://www.mongodb.org/">mongoDB</a></td>
+   <td>database project</td>
+   <td><a class="external" href="http://www.mongodb.org/display/DOCS/Building+Spider+Monkey">Uses SpiderMonkey</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.khmeros.info/drupal/?q=en/download/moyura" rel="nofollow" title="http://www.khmeros.info/drupal/?q=en/download/moyura">Moyura</a></td>
+   <td>email client</td>
+   <td>Part of the <a class="external" href="http://www.khmeros.info/drupal/?q=en">KhmerOS</a> Linux distro</td>
+  </tr>
+  <tr>
+   <td>
+    <p><a class="urlextern external" href="http://joliclic.free.fr/mozilla/mozcards/en/">MozCards</a>, <a class="external" href="http://joliclic.free.fr/mozilla/jolistopwatch/en/">JoliStopwatch</a>, <a class="external" href="http://joliclic.free.fr/mozilla/jolitimer/en/">JoliTimer</a></p>
+   </td>
+   <td>simple apps for Maemo</td>
+   <td>Uses XULRunner</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://se7en-soft.com/moznet" title="Se7en Soft :: MozNet">MozNet .NET Control</a></td>
+   <td>embeddable Gecko for .NET applications</td>
+   <td>Wraps XulRunner for use in .NET applications</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://www.webove-stranky.org/" title="http://www.mynajs.org/">My Internet Browser</a></td>
+   <td>localized browser</td>
+   <td>Uses <a class="internal" href="/en/Gecko" title="En/Gecko">Gecko</a></td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://www.mynajs.org/" title="http://www.mynajs.org/">Myna Application Server</a></td>
+   <td>JavaScript application server for Java</td>
+   <td>Uses <a class="internal" href="/en/Rhino" title="En/Rhino">Mozilla Rhino</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.nextcms.eu/" rel="nofollow" title="http://www.nextcms.eu/">NextCMS</a> (fr)</td>
+   <td><acronym title="Content Management System">CMS</acronym></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://getnightingale.org/" rel="nofollow" title="http://getnightingale.org/">Nightingale</a></td>
+   <td>music player</td>
+   <td>Community run effort to continue Songbird support for Linux</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://wiki.laptop.org/go/Web_Browser" rel="nofollow" title="http://wiki.laptop.org/go/Web_Browser">OLPC Web Browser</a></td>
+   <td>browser</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://oneteam.im/" rel="nofollow" title="http://oneteam.im/">OneTeam</a></td>
+   <td>Jabber client</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://opendocumentfellowship.com/odfviewer" rel="nofollow" title="http://opendocumentfellowship.com/odfviewer">OpenDocument Viewer</a></td>
+   <td>viewer</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://wiki.easyneuf.org/index.php/Cat%C3%A9gorie:XUL" rel="nofollow" title="http://wiki.easyneuf.org/index.php/Cat%C3%A9gorie:XUL">OpenGate's tools</a></td>
+   <td>CD burner, file browser, and hardware diagnostic softwares</td>
+   <td>OpenGate is the OpenSource side of the <a class="urlextern" href="http://easyneuf.fr" rel="nofollow" title="http://easyneuf.fr">EasyNeuf</a> project, “A Free Software Computer, Easy and Preinstalled”</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.open-mashups.org/" rel="nofollow" title="http://www.open-mashups.org/">Open Mashups</a></td>
+   <td>development tool</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.openoffice.org/" rel="nofollow" title="http://www.openoffice.org/">OpenOffice.org</a></td>
+   <td>office suite</td>
+   <td>Uses <a class="urlextern" href="http://www.mozilla.org/projects/security/pki/nss/" rel="nofollow" title="http://www.mozilla.org/projects/security/pki/nss/">NSS</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.openswan.org/" rel="nofollow" title="http://www.openswan.org/">Openswan</a></td>
+   <td>implementation of IPsec for Linux</td>
+   <td>Uses <a class="urlextern" href="http://www.mozilla.org/projects/security/pki/nss/" rel="nofollow" title="http://www.mozilla.org/projects/security/pki/nss/">NSS</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.drorca.com/" rel="nofollow" title="http://www.drorca.com/">Orca Browser</a></td>
+   <td>web browser</td>
+   <td>Gecko-based version of Avant browser</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://www.palemoon.org/" title="http://www.palemoon.org/">Pale Moon</a></td>
+   <td>web browser</td>
+   <td>Custom-built and optimized Firefox browser for GNU/Linux &amp; Windows platforms</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://www.jedox.com/en/home/overview.html" title="http://www.jedox.com/en/home/overview.html">Palo Suite</a></td>
+   <td>Excel extension</td>
+   <td>Uses Prism</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://www.partygaming.com" title="http://www.partygaming.com/">PartyGaming</a></td>
+   <td>online gaming product</td>
+   <td>Uses Gecko</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.evolus.vn/Pencil/Home.html" rel="nofollow" title="http://www.evolus.vn/Pencil/Home.html">Pencil</a></td>
+   <td>tool for making diagrams and <acronym title="Graphical User Interface">GUI</acronym> prototyping</td>
+   <td>Available as a firefox extension or a standalone app</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.pentaho.com/" rel="nofollow" title="http://www.pentaho.com/">Pentaho BI Suite</a></td>
+   <td>commercial open source business intelligence</td>
+   <td>Uses <acronym title="XML User Interface Language">XUL</acronym> and <a class="urlextern" href="http://www.mozilla.org/rhino/" rel="nofollow" title="http://www.mozilla.org/rhino/">Mozilla Rhino</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://persevere.sitepen.com/" rel="nofollow" title="http://persevere.sitepen.com/">Persevere</a></td>
+   <td>tools for persistence and distributed computing</td>
+   <td>Uses <a class="urlextern" href="http://www.mozilla.org/rhino/" rel="nofollow" title="http://www.mozilla.org/rhino/">Mozilla Rhino</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.vocabcollab.com/phloneme" rel="nofollow" title="http://www.vocabcollab.com/phloneme">Phloneme</a></td>
+   <td>publishing tool for Vocab Collab</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.nusphere.com/products/phped_features.htm" rel="nofollow" title="http://www.nusphere.com/products/phped_features.htm">PhpED</a></td>
+   <td><acronym title="Hypertext Preprocessor">PHP</acronym> Editor</td>
+   <td>Embedded Mozilla browser in product</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.pidgin.im/" rel="nofollow" title="http://www.pidgin.im/">Pidgin</a></td>
+   <td>IM client</td>
+   <td>Uses <a class="urlextern" href="http://www.mozilla.org/projects/security/pki/nss/" rel="nofollow" title="http://www.mozilla.org/projects/security/pki/nss/">NSS</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://davidkellogg.com/wiki/Main_Page" rel="nofollow" title="http://davidkellogg.com/wiki/Main_Page">Plain Old Webserver</a></td>
+   <td>extension and standalone webserver</td>
+   <td>5,000 users and 30,000 downloads</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://search.cpan.org/~gwyn/POE-XUL-0.0600/lib/POE/XUL.pm" rel="nofollow" title="http://search.cpan.org/~gwyn/POE-XUL-0.0600/lib/POE/XUL.pm">POE::XUL</a></td>
+   <td>framework for remote XUL application in POE</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.postbox-inc.com/" rel="nofollow" title="http://www.postbox-inc.com/">Postbox</a></td>
+   <td>email client</td>
+   <td>Started as a fork of Thunderbird</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://jt-suite.dots-software.com/?id=285" rel="nofollow" title="http://jt-suite.dots-software.com/?id=285">Printgroove JT Suite</a></td>
+   <td>print process software</td>
+   <td>Uses XULRunner and Spidermonkey</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://labs.mozilla.com/2007/10/prism/" rel="nofollow" title="http://labs.mozilla.com/2007/10/prism/">Prism</a> (was WebRunner)</td>
+   <td>single-site browser</td>
+   <td>XULRunner application</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.ptc.com/appserver/mkt/products/home.jsp?k=403" rel="nofollow" title="http://www.ptc.com/appserver/mkt/products/home.jsp?k=403">Pro/ENGINEER Wildfire</a></td>
+   <td>CADCAM product</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.psyc.us/" rel="nofollow" title="http://www.psyc.us/">PsycRunner</a></td>
+   <td>Chat, Messenger, Multicast toolkit</td>
+   <td>About 1,000 users – XULRunner version of PsycZilla extension</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://pyjs.org/" rel="nofollow" title="http://pyjs.org/">Pyjamas-Desktop</a></td>
+   <td>a Python Web Widget toolkit</td>
+   <td>Uses XULrunner DOM to implement the widgets and event handling. python-hulahop is required</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://wiki.laptop.org/go/HulaHop" rel="nofollow" title="http://wiki.laptop.org/go/HulaHop">Python-Hulahop</a></td>
+   <td>a Python GTK Widget</td>
+   <td>Uses embedded XULrunner, providing full access to nsI DOM and all other XULrunner interfaces, in a GTK window. It's possible to create your own python web browser with hulahop, and much much more besides.</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.qsos.org/?page_id=5" rel="nofollow" title="http://www.qsos.org/?page_id=5">QSOS XUL Editor</a></td>
+   <td>tool for the QSOS method</td>
+   <td>QSOS stands for Qualification and Selection of Opensource Software</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://qtrax.com/download.html" rel="nofollow" title="http://qtrax.com/download.html">Qtrax</a></td>
+   <td>music client</td>
+   <td>Based on Songbird</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://quickstaf.testformation.com/" rel="nofollow" title="http://quickstaf.testformation.com/">QuickSTAF</a></td>
+   <td>GUI client for Software Testing Automation Framework</td>
+   <td>Uses XULRunner</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.qutecom.org/" rel="nofollow" title="http://www.qutecom.org/">QuteCom</a></td>
+   <td>phone software</td>
+   <td>Previously named OpenWengo</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://redcareditor.com/" rel="nofollow" title="http://redcareditor.com/">Redcar</a></td>
+   <td>text editor</td>
+   <td><a class="link-https" href="https://github.com/redcar">Seems to use XULRunner</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.redhat.com/directory_server/" rel="nofollow" title="http://www.redhat.com/directory_server/">Red Hat Directory Server</a></td>
+   <td>server product</td>
+   <td>Uses <a class="urlextern" href="http://www.mozilla.org/projects/security/pki/nss/" rel="nofollow" title="http://www.mozilla.org/projects/security/pki/nss/">NSS</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.redhat.com/certificate_system/" rel="nofollow" title="http://www.redhat.com/certificate_system/">Red Hat Certificate System</a></td>
+   <td>server product</td>
+   <td>Uses <a class="urlextern" href="http://www.mozilla.org/projects/security/pki/nss/" rel="nofollow" title="http://www.mozilla.org/projects/security/pki/nss/">NSS</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.mariusgundersen.net/2009/08/17/regex-renamer/" rel="nofollow" title="http://www.mariusgundersen.net/2009/08/17/regex-renamer/">Regex Renamer</a></td>
+   <td>tool to rename files</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://sameplace.cc/" rel="nofollow" title="http://sameplace.cc/">SamePlace</a></td>
+   <td>IM client</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://scenari-platform.org/projects/scenari/en/pres/co/" rel="nofollow" title="http://scenari-platform.org/projects/scenari/en/pres/co/">Scenari Platform</a></td>
+   <td>application suite for designing publishing chains</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="https://play.google.com/store/apps/details?id=com.rbowman.scriptit&amp;hl=en" title="https://play.google.com/store/apps/details?id=com.rbowman.scriptit&amp;hl=en">Script It</a></td>
+   <td>Android development platform</td>
+   <td>Uses Mozilla Rhino, develop directly on your Android device</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.seamonkey-project.org/" rel="nofollow" title="http://www.seamonkey-project.org/">SeaMonkey</a></td>
+   <td>suite</td>
+   <td>A volunteer community legally backed by Mozilla Foundation with <a class="urlextern" href="http://home.kairo.at/blog/2007-12/2_5_million_tracked_seamonkey_downloads" rel="nofollow" title="http://home.kairo.at/blog/2007-12/2_5_million_tracked_seamonkey_downloads">2.5 million downloads</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.kace.com/products/freetools/secure-browser/" rel="nofollow" title="http://www.kace.com/products/freetools/secure-browser/">Secure Browser</a></td>
+   <td>browser that uses virtualization</td>
+   <td>Created by Dell</td>
+  </tr>
+  <tr>
+   <td>SEPT</td>
+   <td><acronym title="Content Management System">CMS</acronym> for LeMonde.fr web site</td>
+   <td>More information <a class="urlextern" href="http://enterprise.phpmagazine.net/2005/12/php_and_xul_gives_speed_and_pe.html" rel="nofollow" title="http://enterprise.phpmagazine.net/2005/12/php_and_xul_gives_speed_and_pe.html">here</a> (in English) and <a class="urlextern" href="http://www.journaldunet.com/solutions/0509/050916_cas_lemonde_xul.shtml" rel="nofollow" title="http://www.journaldunet.com/solutions/0509/050916_cas_lemonde_xul.shtml">here</a> (in French)</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.skyfire.com" rel="nofollow" title="http://www.skyfire.com">Skyfire</a></td>
+   <td>mobile browser</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.sipear.com" rel="nofollow" title="http://www.sipear.com">Sipear</a></td>
+   <td>IM client</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://www.acipia.fr/smartreport" title="http://www.acipia.fr/smartreport">SmartReport Supervision Appliance</a></td>
+   <td>network monitoring and performance management</td>
+   <td>SmartReport is an appliance created by Acipia (France). XUL and the Mozilla Framework are heavily used in the GUI</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://www.snapstick.com" title="http://www.snapstick.com">Snapstick</a></td>
+   <td>Internet on TV</td>
+   <td><a class="external" href="http://news.yahoo.com/s/yblog_technews/20101210/tc_yblog_technews/snapstick-promises-to-snap-the-web-to-your-tv">Article that talks about Snapstick using Firefox</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.scalableogo.org/" rel="nofollow" title="http://www.scalableogo.org/">SOGo</a></td>
+   <td>groupware</td>
+   <td>Front-end uses Thunderbird code</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.songbirdnest.com" rel="nofollow" title="http://www.songbirdnest.com">Songbird</a></td>
+   <td>music</td>
+   <td>XULRunner application</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.spicebird.com/Spicebird" rel="nofollow" title="http://www.spicebird.com/Spicebird">Spicebird</a></td>
+   <td>collaboration suite</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://spiderape.sourceforge.net/" rel="nofollow" title="http://spiderape.sourceforge.net/">SpiderApe</a></td>
+   <td>embedding tool</td>
+   <td>Uses <a class="urlextern" href="http://www.mozilla.org/js/spidermonkey/" rel="nofollow" title="http://www.mozilla.org/js/spidermonkey/">Mozilla SpiderMonkey</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.splashtop.com/splashtop_applications.php" rel="nofollow" title="http://www.splashtop.com/splashtop_applications.php">Splashtop Web Browser</a></td>
+   <td>browser</td>
+   <td>Part of instant-on operating system</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://code.google.com/p/sqlite-manager/wiki/XulrunnerApplication" rel="nofollow" title="http://code.google.com/p/sqlite-manager/wiki/XulrunnerApplication">sqlite-manager</a></td>
+   <td>database manager</td>
+   <td>Standalone version of <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/5817">add-on</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.stealthsurfer.biz/" rel="nofollow" title="http://www.stealthsurfer.biz/">StealthSurfer</a></td>
+   <td>secure Internet tools on USB key</td>
+   <td>Uses Firefox and Thunderbird</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.streambase.com/" rel="nofollow" title="http://www.streambase.com/">StreamBase</a></td>
+   <td>complex event processing platform</td>
+   <td><a class="external" href="http://www.streambase.com/developers/docs/latest/install/supported.html">Seems to use XULRunner</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.skybound.ca/stylizer" rel="nofollow" title="http://www.skybound.ca/stylizer">Stylizer CSS Editor</a></td>
+   <td><acronym title="Cascading Style Sheets">CSS</acronym> editor</td>
+   <td><acronym title="Cascading Style Sheets">CSS</acronym> Editor with built-in Firebug-like diagnostics and Gecko 1.8 preview</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.sun.com/software/javaenterprisesystem/index.jsp" rel="nofollow" title="http://www.sun.com/software/javaenterprisesystem/index.jsp">Sun Java Enterprise System</a></td>
+   <td>server products</td>
+   <td>Uses <a class="urlextern" href="http://www.mozilla.org/projects/security/pki/nss/" rel="nofollow" title="http://www.mozilla.org/projects/security/pki/nss/">NSS</a></td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://www.sundialbrowser.com/" title="http://www.sundialbrowser.com/">Sundial</a></td>
+   <td>browser with advanced domain name technology</td>
+   <td>Based on Firefox</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://www.surfeasy.com/" title="http://www.surfeasy.com/">SurfEasy</a></td>
+   <td>private and secure web browsing</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://www.sheppyware.net/software-mac/sweet16" title="http://www.sheppyware.net/software-mac/sweet16">Sweet16</a></td>
+   <td>Apple II computer emulator</td>
+   <td>Uses SpiderMonkey as a scriptable debugger for software running in the emulator</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.mozilla.org/projects/calendar" rel="nofollow" title="http://www.mozilla.org/projects/calendar">Mozilla Sunbird/Mozilla Lightning</a></td>
+   <td>calendar</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://swik.net/xulrunner/Mozpad+Moon/Ben+Longoria:+XUL+Dark+Matter+Series:+TabPress/b0cwm" rel="nofollow" title="http://swik.net/xulrunner/Mozpad+Moon/Ben+Longoria%3A+XUL+Dark+Matter+Series%3A+TabPress/b0cwm">TabPress</a></td>
+   <td>authoring tool</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.talend.com/products/open-studio-di.php" rel="nofollow" title="http://www.talend.com/products/open-studio-di.php">Talend Open Studo</a></td>
+   <td>data integration software</td>
+   <td><a class="external" href="http://www.talendforge.org/bugs/view.php?id=8485">Seems to use XULRunner</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.talkingclipboard.com/" rel="nofollow" title="http://www.talkingclipboard.com/">Talking Clipboard</a></td>
+   <td>text to speech software</td>
+   <td>Read ePub books, web pages, CHM, PDF, MS Word, RTF, RSS feeds</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://blogs.acceleration.net/ryan/articles/2018.aspx" rel="nofollow" title="http://blogs.acceleration.net/ryan/articles/2018.aspx">TaskPool</a></td>
+   <td>productivity</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.telasocial.com/" rel="nofollow" title="http://www.telasocial.com/">Telasocial</a></td>
+   <td>kiosk app</td>
+   <td>Uses XULRunner</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://telekast.sourceforge.net/" rel="nofollow" title="http://telekast.sourceforge.net/">TeleKast</a></td>
+   <td>teleprompter</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.floodgap.com/software/tenfourfox/" rel="nofollow" title="http://www.floodgap.com/software/tenfourfox/">TenFourFox</a></td>
+   <td>browser for PowerPC-based Macs</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://www.amigaos.net/software/53/timberwolf-browser" title="http://www.amigaos.net/software/53/timberwolf-browser">Timberwolf</a></td>
+   <td>browser for Amiga OS4</td>
+   <td>Based on Firefox - <a class="external" href="http://www.friedenhq.org/index.php?option=com_content&amp;view=article&amp;id=53&amp;Itemid=55" title="http://www.friedenhq.org/index.php?option=com_content&amp;view=article&amp;id=53&amp;Itemid=55">Project Page</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.mozilla.com/thunderbird" rel="nofollow" title="http://www.mozilla.com/thunderbird">Mozilla Thunderbird</a></td>
+   <td>email</td>
+   <td><a class="urlextern" href="http://tb.asbjorn.it/pages/dlgraph.php" rel="nofollow" title="http://tb.asbjorn.it/pages/dlgraph.php">47 million DL</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.tomtom.com/plus/service.php?ID=17&amp;Lid=1" rel="nofollow" title="http://www.tomtom.com/plus/service.php?ID=17&amp;Lid=1">TomTom HOME 2</a></td>
+   <td>PC application to manage TomTom GPS devices</td>
+   <td><a class="urlextern" href="http://www.gpsmagazine.com/2007/08/tomtom_releases_home_20.php" rel="nofollow" title="http://www.gpsmagazine.com/2007/08/tomtom_releases_home_20.php">Review article from GPS Magazine</a>; over 2.4m users</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.newsgator.com/Individuals/TopStyle/Default.aspx" rel="nofollow" title="http://www.newsgator.com/Individuals/TopStyle/Default.aspx">TopStyle</a></td>
+   <td><acronym title="HyperText Markup Language">HTML</acronym>, <acronym title="Extensible HyperText Markup Language">XHTML</acronym> and <acronym title="Cascading Style Sheets">CSS</acronym> editor</td>
+   <td>Seems to have optional <a class="external" href="http://svanas.dynip.com/topstyle/download/gecko.htm">Gecko embedding</a> but doesn't use it by default</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://toxtox.tv" rel="nofollow" title="http://toxtox.tv">ToxTox</a></td>
+   <td>Media Browser for TV</td>
+   <td>5000 downloads</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://trixul.com/wordpress/" rel="nofollow" title="http://trixul.com/wordpress/">Trixul</a></td>
+   <td><acronym title="Graphical User Interface">GUI</acronym> toolkit</td>
+   <td>Uses <a class="urlextern" href="http://www.mozilla.org/js/spidermonkey/" rel="nofollow" title="http://www.mozilla.org/js/spidermonkey/">Mozilla SpiderMonkey</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.trustedbird.org/tb/Main_Page" rel="nofollow" title="http://www.trustedbird.org/tb/Main_Page">TrustedBird</a></td>
+   <td>email client</td>
+   <td>Thunderbird bundled with a set of extensions (<a href="/tb/News#Trustedbird_project:_new_name_and_logo" title="News">formerly known</a> as Milimail)</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.tuneupmedia.com/" rel="nofollow" title="http://www.tuneupmedia.com/">TuneUp</a></td>
+   <td>music collection organizer</td>
+   <td>Listed on <a href="/en/XULRunner_Hall_of_Fame" title="en/XULRunner_Hall_of_Fame">XULRunner Hall of Fame</a> but haven't seen information elsewhere</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://tuxguitar.herac.com.ar/" rel="nofollow" title="http://tuxguitar.herac.com.ar/">TuxGuitar</a></td>
+   <td>tabulature editor</td>
+   <td>Uses XULRunner</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://twitfactory.com/" rel="nofollow" title="http://twitfactory.com/">TwitFactory</a></td>
+   <td>standalone twitter/identi.ca client</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://softmotions.com/uis.html" rel="nofollow" title="http://softmotions.com/uis.html">UIS</a></td>
+   <td>University Information System</td>
+   <td>Intranet application, 1000 users, Thin client based on FF3</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.unison.com/what-is-unison/unison-desktop/overview.php?ref=overview" rel="nofollow" title="http://www.unison.com/what-is-unison/unison-desktop/overview.php?ref=overview">Unison Desktop</a></td>
+   <td>enterprise email</td>
+   <td>I think it's using mailnews code but don't have any information to link to. Feel free to supply references.</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.uox3.org/" rel="nofollow" title="http://www.uox3.org/">UOX3</a></td>
+   <td>Ultima Online server-emulator</td>
+   <td>Uses <a class="urlextern" href="http://www.mozilla.org/js/spidermonkey/" rel="nofollow" title="http://www.mozilla.org/js/spidermonkey/">Mozilla SpiderMonkey</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://verbosio.mozdev.org" rel="nofollow" title="http://verbosio.mozdev.org">Verbosio</a></td>
+   <td><acronym title="Extensible Markup Language">XML</acronym> Editor</td>
+   <td>No releases available</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="https://mt.verseminder.com/tabid/158/Default.aspx" rel="nofollow" title="https://mt.verseminder.com/tabid/158/Default.aspx">VerseMinder</a></td>
+   <td>Bible passage app</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://my.virginmedia.com/my-apps/security" rel="nofollow" title="http://my.virginmedia.com/my-apps/security">Virgin Media Security</a></td>
+   <td>security tools</td>
+   <td><a class="external" href="http://community.virginmedia.com/t5/Internet-security/Virgin-media-diagnostic-XulRunner-How-do-i-fix-it/td-p/847463">Seems to use XULRunner</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.virtualbox.org" rel="nofollow" title="http://www.virtualbox.org">VirtualBox</a></td>
+   <td>virtualization tool</td>
+   <td>Use XPCOM as its component model on Linux</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://waterfoxproj.sourceforge.net/" rel="nofollow" title="http://waterfoxproj.sourceforge.net/">Waterfox</a></td>
+   <td>64-bit variant of Firefox</td>
+   <td>Based on Firefox</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.ordissimo.co.uk/index.php?option=com_content&amp;view=article&amp;id=112&amp;Itemid=155〈en" rel="nofollow" title="http://www.ordissimo.co.uk/index.php?option=com_content&amp;view=article&amp;id=112&amp;Itemid=155〈en">Webissimo</a></td>
+   <td>web browser</td>
+   <td>Based on XULRunner</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.websecurify.com/" rel="nofollow" title="http://www.websecurify.com/">Websecurify</a></td>
+   <td>web Application Security Testing Environment</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.wesabe.com" rel="nofollow" title="http://www.wesabe.com">Wesabe</a></td>
+   <td>money management tool</td>
+   <td>Automatic Uploader is a XULRunner application that runs headless in Xvfb</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.wikipediaondvd.com/site.php" rel="nofollow" title="http://www.wikipediaondvd.com/site.php">WikipediaOnDVD</a> and <a class="urlextern" href="http://www.moulinwiki.org/l/en/" rel="nofollow" title="http://www.moulinwiki.org/l/en/">Wikimedia by moulin</a></td>
+   <td>offline versions of Wikipedia</td>
+   <td><a class="urlextern" href="http://standblog.org/blog/post/2007/04/26/Wikipedia-is-on-a-CD-and-Mozilla-is-backstage" rel="nofollow" title="http://standblog.org/blog/post/2007/04/26/Wikipedia-is-on-a-CD-and-Mozilla-is-backstage">Blog post about projects</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.winehq.org/" rel="nofollow" title="http://www.winehq.org/">Wine</a></td>
+   <td>implementation of the Windows <acronym title="Application Programming Interface">API</acronym></td>
+   <td>Uses <a class="urlextern" href="http://www.mozilla.org/js/spidermonkey/" rel="nofollow" title="http://www.mozilla.org/js/spidermonkey/">Mozilla SpiderMonkey</a> and the Gecko ActiveX control</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.worksmart.net/product/worksmart.net_suite.html" rel="nofollow" title="http://www.worksmart.net/product/worksmart.net_suite.html">worksmart.net</a></td>
+   <td>suite of web-based workplace apps</td>
+   <td>Uses Prism</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.kirix.com/labs/wxwebconnect.html" rel="nofollow" title="http://www.kirix.com/labs/wxwebconnect.html">wxWebConnect</a></td>
+   <td>Web Browser Control Library</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.wyzo.com/" rel="nofollow" title="http://www.wyzo.com/">Wyzo</a></td>
+   <td>browser</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://xerobank.com/xB_Browser.php" rel="nofollow" title="http://xerobank.com/xB_Browser.php">xB Browser</a></td>
+   <td>anonymous web browser</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.xpme.eu/applications.php" rel="nofollow" title="http://www.xpme.eu/applications.php">Xbusiness</a></td>
+   <td>create and send branded invoices, quotes or estimates</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.taika.fr/xdf.php" rel="nofollow" title="http://www.taika.fr/xdf.php">XDF</a></td>
+   <td>billing and quotes software</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://xiphos.org" rel="nofollow" title="http://xiphos.org">Xiphos</a></td>
+   <td>Bible study software</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://trac2.assembla.com/xmldbeditor/wiki" rel="nofollow" title="http://trac2.assembla.com/xmldbeditor/wiki">xmlDBEditor</a></td>
+   <td>database editor</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://xpud.org/" rel="nofollow" title="http://xpud.org">xPUD</a></td>
+   <td>Linux desktop</td>
+   <td><a class="external" href="http://www.osnews.com/story/21278/xPUD_Linux_with_an_XUL_Interface_10_Second_Boot_Time">xPUD: Linux with an XUL Interface, 10 Second Boot Time</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://sourceforge.net/projects/xrap/" rel="nofollow" title="http://sourceforge.net/projects/xrap/">XRap</a></td>
+   <td>XulRunner Application Packager</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://3liz.com/projects/daim/index.php/Daim/Overview" rel="nofollow" title="http://3liz.com/projects/daim/index.php/Daim/Overview">XUL Daim</a></td>
+   <td>image tool</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="/en/XUL_Explorer" rel="nofollow" title="https://developer.mozilla.org/en/XUL_Explorer">XUL Explorer</a></td>
+   <td>development tool</td>
+   <td>XULRunner application</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://code.google.com/p/xuljet/" rel="nofollow" title="http://code.google.com/p/xuljet/">XULJet</a></td>
+   <td>JavaScript framework</td>
+   <td>Uses XULRunner</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://benjamin.smedbergs.us/xulrunner/xulmine-0.9.xulapp" rel="nofollow" title="http://benjamin.smedbergs.us/xulrunner/xulmine-0.9.xulapp">XULmine</a></td>
+   <td>game</td>
+   <td>Standalone version</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://widgets.yahoo.com/" rel="nofollow" title="http://widgets.yahoo.com/">Yahoo! Widgets</a></td>
+   <td>desktop widgets</td>
+   <td>Uses <a class="urlextern" href="http://www.mozilla.org/js/spidermonkey/" rel="nofollow" title="http://www.mozilla.org/js/spidermonkey/">Mozilla SpiderMonkey</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://yoono.com/desktop_features.html" rel="nofollow" title="http://yoono.com/desktop_features.html">Yoono Desktop</a></td>
+   <td>social networking app</td>
+   <td>Standalone version of <a class="external" href="http://yoono.com/features.html">Yoono Firefox add-on</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.croczilla.com/zap" rel="nofollow" title="http://www.croczilla.com/zap">Zap</a></td>
+   <td>SIP client</td>
+   <td><a class="urlextern" href="http://www.croczilla.com/blog/11" rel="nofollow" title="http://www.croczilla.com/blog/11">status update from August 2008</a></td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.zimbra.com/products/desktop.html" rel="nofollow" title="http://www.zimbra.com/products/desktop.html">Zimbra Desktop</a></td>
+   <td>email and calendar application</td>
+   <td>Uses Prism</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.zinc.tv/" rel="nofollow" title="http://www.zinc.tv/">Zinc</a></td>
+   <td>video browser</td>
+   <td>According to <a class="external" href="http://www.zinc.tv/faq">FAQ</a> the standalone version is based on Firefox</td>
+  </tr>
+  <tr>
+   <td><a class="urlextern" href="http://www.zkoss.org/" rel="nofollow" title="http://www.zkoss.org/">ZK</a></td>
+   <td>web application framework</td>
+   <td>Makes use of <a class="external" href="http://www.zkoss.org/ziki/">XUL</a></td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://www.zotero.org/" title="http://www.zotero.org/">Zotero</a></td>
+   <td>reference manager</td>
+   <td>Firefox extension and XULRunner application</td>
+  </tr>
+ </tbody>
+</table>
+<p><em>Note: this page was previously hosted on mozpad.org and the <a class="external" href="http://mozpad.org/doku.php?do=revisions&amp;id=map_of_the_mozpad_universe">history for that page</a> can be found on that site.</em></p>
+<p>Other places to find Mozilla applications include:</p>
+<ul>
+ <li><a class="urlextern" href="http://www.mozilla.org/projects/" rel="nofollow" title="http://www.mozilla.org/projects/">http://www.mozilla.org/projects/</a></li>
+ <li><a class="urlextern" href="http://developer.mozilla.org/en/docs/XULRunner_Hall_of_Fame" rel="nofollow" title="http://developer.mozilla.org/en/docs/XULRunner_Hall_of_Fame">http://developer.mozilla.org/en/docs/XULRunner_Hall_of_Fame</a></li>
+ <li><a class="urlextern" href="http://www.mozdev.org" rel="nofollow" title="http://www.mozdev.org">http://www.mozdev.org</a></li>
+ <li><a class="urlextern" href="http://xulapps.net/" rel="nofollow" title="http://xulapps.net/">http://xulapps.net/</a></li>
+ <li><a class="urlextern" href="http://dmoz.org/Computers/Data_Formats/Markup_Languages/XML/Applications/XUL/Applications/" rel="nofollow" title="http://dmoz.org/Computers/Data_Formats/Markup_Languages/XML/Applications/XUL/Applications/">http://dmoz.org/Computers/Data_Formats/Markup_Languages/XML/Applications/XUL/Applications/</a></li>
+ <li><a class="urlextern" href="http://blog.mozbox.org/post/2007/06/14/XUL-activity-in-France" rel="nofollow" title="http://blog.mozbox.org/post/2007/06/14/XUL-activity-in-France">http://blog.mozbox.org/post/2007/06/14/XUL-activity-in-France</a></li>
+ <li><a class="urlextern" href="http://www.mozilla.org/projects/security/pki/nss/overview.html" rel="nofollow" title="http://www.mozilla.org/projects/security/pki/nss/overview.html">http://www.mozilla.org/projects/security/pki/nss/overview.html</a></li>
+ <li><a class="urlextern" href="http://en.wikipedia.org/wiki/SpiderMonkey_(JavaScript_engine)" rel="nofollow" title="http://en.wikipedia.org/wiki/SpiderMonkey_(JavaScript_engine)">http://en.wikipedia.org/wiki/SpiderMonkey_(JavaScript_engine)</a></li>
+ <li><a class="urlextern" href="http://www.mozilla.org/rhino/users.html" rel="nofollow" title="http://www.mozilla.org/rhino/users.html">http://www.mozilla.org/rhino/users.html</a></li>
+ <li><a class="urlextern" href="http://groups.google.com/group/mozilla.dev.tech.js-engine.rhino/browse_thread/thread/4eb9162c9c3054b0/1d4115b40373ca3b?lnk=raot" rel="nofollow" title="http://groups.google.com/group/mozilla.dev.tech.js-engine.rhino/browse_thread/thread/4eb9162c9c3054b0/1d4115b40373ca3b?lnk=raot">http://groups.google.com/group/mozilla.dev.tech.js-engine.rhino/browse_thread/thread/4eb9162c9c3054b0/1d4115b40373ca3b?lnk=raot</a></li>
+ <li><a class="external" href="http://www.ohloh.net/tags/xulrunner">http://www.ohloh.net/tags/xulrunner</a></li>
+</ul>
diff --git a/files/de/lokalisierbaren_code_schreiben/index.html b/files/de/lokalisierbaren_code_schreiben/index.html
new file mode 100644
index 0000000000..9d8f8172aa
--- /dev/null
+++ b/files/de/lokalisierbaren_code_schreiben/index.html
@@ -0,0 +1,22 @@
+---
+title: Lokalisierbaren Code schreiben
+slug: Lokalisierbaren_Code_schreiben
+tags:
+  - Lokalisierung
+translation_of: Mozilla/Localization/Writing_localizable_code
+---
+<p>Diese Seite beschreibt Richtlinien im Umgang mit dem Code der Benutzeroberfläche unter Berücksichtigung der Lokalisierung. Diese Seite ist für Entwickler von Mozilla und Erweiterungen gedacht.</p>
+<p>Für weitere technische Details finden sich im <a href="/de/XUL_Tutorial/Lokalisierung" title="de/XUL_Tutorial/Lokalisierung">XUL Tutorial</a> weitere Informationen.</p>
+<h3 id="Über_Lokalisierer">Über Lokalisierer</h3>
+<p>Einige Anmerkungen für Entwickler, die nur selten mit Übersetzer zu tun haben:</p>
+<ul> <li>Übersetzer mögen Tools, nicht aber Editoren.</li> <li>Übersetzungstools sind basieren oft auf Schlüssel (<em>keys</em>) mit ihren zugehörigen Übersetzungen (<em>values</em>),</li> <li>Zumindest haben sich einige Übersetzer auf ihre Sprachfähigkeiten fokussiert und verfügen meist nicht über Programmierkenntnisse oder gar Kenntnisse über das Kompilieren von Anwendungen.</li>
+</ul>
+<h3 id="Richtlinien">Richtlinien</h3>
+<p>Es existieren einige Richtlinien, an die sich Entwickler halten sollten, um ihren Code besser lokalisierbar zu machen.</p>
+<dl> <dt>Gute Schlüsselnamen <em>„key names</em>“ wählen </dt> <dd>Der gewählte Name für einen Schlüssel (egal ob es eine DTD oder eine properties-Datei ist) sollte selbstbeschreibend sein. Wenn Sie die Semantik eines lokalisierten Strings ändern, so ändern Sie auch den zugehörigen Schlüssel. Dies wird den String besser beschreiben und Übersetzungstools helfen zu erkennen, dass die Veränderung nicht lediglich die Korrektur eines Sprachfehlers ist.</dd> <dt>Zusammengesetzten Strings keine Grammatik untermischen </dt> <dd>Das unachtsame Aufsplitten von Sätzen induziert eine Grammatik und Satzstruktur, die meistens schwierig zu übersetzen ist und eventuell auf andere Sprachen nicht zutrifft. Vermeiden Sie daher wenn möglich das Aufsplitten von Sätzen; wenn es allerdings unvermeidbar sein sollte, dann lassen Sie dem Übersetzer einen Freiraum. Ein Beispiel für einen bedacht zusammengesetzten String ist Firefox's Einstellungsfeld für besuchte Seiten: Der Übersetzer kann ohne weiteres die Position des Textfeldes verändern.</dd> <dt><em>Keine „preprocessor macros“</em> verwenden </dt> <dd>Wir bitten darum weder <code>#if</code>, <code>#else</code>, <code>#endif</code> noch <code>#expand</code> zu verwenden. Es gibt einige Einwände gegen diese Vorgehensweise, aber hauptsächlich geht es darum, dass die lokalisierte Datei mit Standards harmonieren solte und nicht erst durch Compilierer umgewandelt werden muss. Wenn Ihre lokalisierten Dateien mit kompiliert werden müssen, so kontaktieren Sie vorher bitte <a href="/User:AxelHecht" title="en/user:AxelHecht">l10n@</a>. In den meisten Fällen kann der zu kompilierende Code einfach in den Code des Inhalts eingesetzt und unterschiedliche Übersetzungsschlüssel (<em>key-value-pairs</em>) referenziert werden.</dd> <dt>Eine gute <em>„source directory</em>“ Struktur verwenden </dt> <dd>Legen Sie die lokalisierbaren Dateien am richtigen Ort ab. Das Hinzufügen neuer Toplevel-Verzeichnisse ist ein Kompromiss zwischen Modulbesitz im <code>cvsroot</code> repository und der Einfachheit der Lokalisierung.</dd> <dt>Eine gute „chrome directory“ Struktur verwenden</dt> <dd>Für ein bestimmtes Modul <code>mod</code>, wurde der Zielpfad <code>jar:ab-CD.jar!/locale/ab-CD/mod/foo.dtd</code> getestet und hat sich als ein guter Ort für Dateien, die in <code><a class=" external" rel="freelink">chrome://mod/locale/foo.dtd</a></code> verlinkt werden, herausgestellt. Wird diese Verzeichnisstruktur verwendet, wird der Lokalisierungsprozess ohne den Quellcode vereinfacht und wird vor allem  Autoren von Erweiterungen empfohlen. Ein <a href="/en/JAR_Manifests" title="en/JAR_Manifests">JAR Manifest</a> kann das noch vereinfachen.</dd>
+</dl>
+<h3 id="l10n_impact">l10n impact</h3>
+<p>Bei geschlossenen Trees, gibt es die Regel keine <em>l10n-impact</em> Veränderungen einzureichen. Was bedeutet das? <em>l10n-impact</em> ist</p>
+<ul> <li>jede Veränderung an <code>mozilla/@mod@/locales</code>; Lokalisierer finden Änderungen über Bonsai-Abfragen heraus, genau wie es jeder andere auch macht. Keine Änderung bedeutet, dass das Ergebnis der Abfrage leer ist.</li> <li>jede veränderte oder neue Verwendung von existierenden, lokalisierten Strings; Alles was einen QA-Ablauf auf einen der 40+ Lokalisierungen verursacht, ist <em>l10n-impact</em>.</li>
+</ul>
+<p>{{ languages( { "en": "en/Writing_localizable_code", "es": "es/Escribir_código_localizable" ,"fr": "fr/\u00c9criture_de_code_localisable" } ) }}</p>
diff --git a/files/de/lokalisierung/index.html b/files/de/lokalisierung/index.html
new file mode 100644
index 0000000000..91b5063380
--- /dev/null
+++ b/files/de/lokalisierung/index.html
@@ -0,0 +1,55 @@
+---
+title: Lokalisierung
+slug: Lokalisierung
+tags:
+  - Lokalisierung
+translation_of: Glossary/Localization
+---
+<p><strong>Lokalisierung</strong> (L10n) ist der Vorgang zur <span class="external">Übersetzung</span> von Programmbenutzeroberflächen in eine andere Sprache und deren Anpassung an weitere Eigenheiten anderer Kulturen. Auf den folgenden Seiten geht es darum Mozilla-basierte Anwendungen oder Erweiterungen zu lokalisieren. Hier wird auch von <a class="link-https" href="https://www.24translate.de/fachübersetzung/website-übersetzen.html" title="https://www.24translate.de/fachübersetzung/website-übersetzen.html">Software- bzw. Website-Lokalisierungen</a> gesprochen.</p>
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h4 id="Dokumentaion"><a href="/Special:Tags?tag=Lokalisierung&amp;language=de" title="Special:Tags?tag=Lokalisierung&amp;language=de">Dokumentaion</a></h4>
+    <dl>
+     <dt>
+      <a href="/de/XUL_Tutorial/Lokalisierung" title="de/XUL_Einführung/Lokalisierung">XUL Einführung:Lokalisierung</a></dt>
+     <dd>
+      <small>Abschnitt zur Lokalisierung von XUL-Anwendungen in der <a href="/de/XUL_Einführung" title="de/XUL_Einführung">XUL Einführung</a>.</small></dd>
+     <dt>
+      <a href="/de/XUL_Einführung/Property_Files" title="de/XUL_Einführung/Property_Files">XUL Einführung:Property Files</a></dt>
+     <dd>
+      <small>Abschnitt über die Benutzung von Property-Dateien in der <a href="/de/XUL_Einführung" title="de/XUL_Einführung">XUL Einführung</a></small></dd>
+     <dt>
+      <a href="/de/Lokalisierbaren_Code_schreiben" title="de/Lokalisierbaren_Code_schreiben">Lokalisierbaren Code schreiben</a></dt>
+     <dd>
+      <small>Empfohlene Herangehensweisen und Anleitungen für den Programmierer zum Umgang mit Lokalisierung.</small></dd>
+     <dt>
+      <a href="/de/Lokalisierung_von_Erweiterungsbeschreibungen" title="de/Lokalisierung_von_Erweiterungsbeschreibungen">Lokalisierung von Erweiterungsbeschreibungen</a></dt>
+     <dd>
+      <small>Um die Beschreibung einer Erweiterung (die Zeichenkette, welche unter dem Erweiterungsnamen im Erweiterungenfenster angezeigt wird) zu lokalisieren, braucht man einen besonderen Einstellungsschlüssel, um den in der Beschreibung install.rdf angegebenen Namen zu überschreiben. Dieser Artikel enthält Anweisungen zur Bearbeitung dieses Einstellungsschlüssels.</small></dd>
+     <dt>
+      <a href="/de/Häufig_gestellte_Fragen_zur_Lokalisierung" title="de/Häufig_gestellte_Fragen_zur_Lokalisierung">Häufig gestellte Fragen zur Lokalisierung</a></dt>
+     <dd>
+      <small>FAQs über Lokalisierung.</small></dd>
+    </dl>
+    <p><span class="alllinks"><a href="/Special:Tags?tag=Lokalisierung&amp;language=de" title="Special:Tags?tag=Lokalisierung&amp;language=de">Alle anzeigen...</a></span></p>
+   </td>
+   <td>
+    <h4 id="Community">Community</h4>
+    <ul>
+     <li>Mozillas Lokalisierungsforen:</li>
+     <li>{{ DiscussionList("dev-l10n", "mozilla.dev.l10n") }}</li>
+     <li><a href="/de/Lokalisierung/Community" title="de/Lokalisierung/Community">weitere Community Seiten...</a></li>
+    </ul>
+    <h4 id="Verwandte_Themen" name="Verwandte_Themen">Verwandte Themen</h4>
+    <dl>
+     <dd>
+      <a href="/de/Erweiterungen" title="de/Erweiterungen">Erweiterungen</a>, <a href="/de/XUL" title="de/XUL">XUL</a></dd>
+    </dl>
+    <p><span class="alllinks"><a class="external" href="/webwatch?cat=8" title="webwatch?cat=8">alle anzeigen...</a></span></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<p> </p>
diff --git a/files/de/lokalisierung_von_erweiterungsbeschreibungen/index.html b/files/de/lokalisierung_von_erweiterungsbeschreibungen/index.html
new file mode 100644
index 0000000000..7c5e17ddfc
--- /dev/null
+++ b/files/de/lokalisierung_von_erweiterungsbeschreibungen/index.html
@@ -0,0 +1,88 @@
+---
+title: Lokalisierung von Erweiterungsbeschreibungen
+slug: Lokalisierung_von_Erweiterungsbeschreibungen
+tags:
+  - Erweiterungen
+  - Lokalisierung
+translation_of: Mozilla/Localization/Localizing_extension_descriptions
+---
+<h3 id="Lokalisierung_in_Gecko_1.9">Lokalisierung in Gecko 1.9</h3>
+<p>{{ Gecko_minversion_header(1.9) }} {{ Fx_minversion_header(3) }}</p>
+<p>Gecko 1.9 beinhaltet eine neue, verbesserte Methode, um Add-on Beschreibungen und andere Metadaten zu lokalisieren. Die verschiedenen Beschreibungen können jetzt in der <a href="/de/Installationsmanifest" title="de/Installationsmanifest">install.rdf</a> Datei durch die <code>em:localized</code> Eigenschaften angegeben werden, wovon jede mindestens eine <code>em:locale</code> Eigenschaft besitzt, die die Sprache angibt. Zusätzlich können noch Name und Beschreibung der Erweiterung angegeben werden. Das folgende Beispiel demonstriert dies (die anderen Manifest-Eigenschaften wurden der Einfachheit halber weggelassen):</p>
+<pre>&lt;?xml version="1.0"?&gt;
+
+&lt;RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:em="http://www.mozilla.org/2004/em-rdf#"&gt;
+  &lt;Description about="urn:mozilla:install-manifest"&gt;
+    &lt;em:id&gt;TabSidebar@blueprintit.co.uk&lt;/em:id&gt;
+    &lt;em:localized&gt;
+      &lt;Description&gt;
+        &lt;em:locale&gt;de-DE&lt;/em:locale&gt;
+        &lt;em:name&gt;Tab Sidebar&lt;/em:name&gt;
+        &lt;em:description&gt;Zeigt in einer Sidebar Vorschaubilder der Inhalte aller offenen Tabs an.&lt;/em:description&gt;
+      &lt;/Description&gt;
+    &lt;/em:localized&gt;
+    &lt;em:localized&gt;
+      &lt;Description&gt;
+        &lt;em:locale&gt;es-ES&lt;/em:locale&gt;
+        &lt;em:name&gt;Tab Sidebar&lt;/em:name&gt;
+        &lt;em:description&gt;Muestra una vista previa de sus pestañas en su panel lateral.&lt;/em:description&gt;
+      &lt;/Description&gt;
+    &lt;/em:localized&gt;
+    &lt;em:localized&gt;
+      &lt;Description&gt;
+        &lt;em:locale&gt;nl-NL&lt;/em:locale&gt;
+        &lt;em:name&gt;Tab Sidebar&lt;/em:name&gt;
+        &lt;em:description&gt;Laat voorbeeldweergaven van uw tabbladen in de zijbalk zien.&lt;/em:description&gt;
+      &lt;/Description&gt;
+    &lt;/em:localized&gt;
+    &lt;em:name&gt;Tab Sidebar&lt;/em:name&gt;
+    &lt;em:description&gt;Displays previews of your tabs in your sidebar.&lt;/em:description&gt;
+  &lt;/Description&gt;
+&lt;/RDF&gt;
+</pre>
+<p>Alle unten erwähnten Metadaten können auf diese Weise lokalisiert werden. Die Informationen zur Lokalisierung, die durch die <code>em:localized</code> Eigenschaft gegeben sind, können durch ein Set an lokalisierten Einstellungen überschrieben werden. Mehr dazu weiter unten.</p>
+<p>Das Verfahren zur Auswahl der <code>em:localized</code> Eigenschaft einer speziellen Sprache lautet wie folgt:</p>
+<ol>
+ <li>Wenn eine Eigenschaft mit einem <code>em:locale</code> existiert, die zu der eingestellten Sprache passt, dann wird diese verwendet.</li>
+ <li>Wenn es ungenaue Treffer gibt, dann wird derjenige verwendet, der die meisten Teiltreffer aufweist, sprich Teile, die durch einen Bindestrich getrennt sind (z. B. würde »es« einen Treffer für »es-ES« ergeben und umgekehrt).</li>
+ <li>Falls es mehr als eine Sprachumgebung mit der gleichen Anzahl an Teiltreffern gibt, dann wird die allgemeinste verwendet (z. B. wird »en« gegenüber »en-GB« bevorzugt, falls nach »en-US« gesucht wird).</li>
+</ol>
+<p>Zunächst wird nach einer Übersetzung in der aktuellen Anwendungssprache gesucht. Falls keine Übersetzung existiert, wird nach »en-US« gesucht.</p>
+<p>Falls weder eine Einstellung gesetzt ist, noch eine passende <code>em:localized</code> Eigenschaft für die aktuelle Spracheinstellung oder en-US existiert, dann werden direkt die Eigenschaften aus dem Installationsmanifest verwendet, da diese für Gecko 1.9 immer verwendet wurden.</p>
+<h3 id="Lokalisierung_vor_Gecko_1.9">Lokalisierung vor Gecko 1.9</h3>
+<p>Vor Gecko 1.9 mussten Add-on Entwickler ein spezielles Verfahren beachten, um lokalisierte Beschreibungen für Add-on unterstützende sowie Toolkit basierte Anwendungen (wie Firefox oder Thunderbird) zu definieren.</p>
+<ul>
+ <li>Falls noch keine existiert, sollten <a href="/de/Lokalisierung_einer_Erweiterung#Lokalisierung_von_Zeichenketten_in_JavaScript_Code" title="de/Lokalisierung_einer_Erweiterung#Lokalisierung_von_Zeichenketten_in_JavaScript_Code"> lokalisierte Eigenschaften Dateien</a> erstellt werden. Es sollte sichergestellt werden, dass die Dateien UTF-8 (ohne BOM) kodiert sind, um die korrekte Anzeige fremder Zeichen sicherzustellen.</li>
+ <li>Die folgende Zeile sollte zu jeder der lokalisierten Eigenschaften Dateien hinzugefügt werden (wobei <var>ERWEITERUNGS_ID</var> der ID deines Add-ons (<code>&lt;em:id&gt;</code> in der <a href="/de/Installationsmanifest" title="de/Installationsmanifest">install.rdf</a>) entspricht und <var>LOKALISIERTE_BESCHREIBUNG</var> die Beschreibung deiner Erweiterung in der jeweiligen Sprache darstellt):
+  <pre>extensions.ERWEITERUNGS_ID.description=LOKALISIERTE_BESCHREIBUNG</pre>
+ </li>
+ <li>Falls noch nicht vorhanden, muss eine <a href="/de/Erstellung_einer_Erweiterung#Standard_Dateien" title="de/Erstellung_einer_Erweiterung#Standard_Dateien"> Standardeigenschaften Datei</a> erstellt werden.</li>
+ <li>Die folgende Zeile wird dann hinzugefügt (wobei <var>ERWEITERUNGS_ID</var> der ID des Add-ons der <a href="/de/Installationsmanifest" title="de/Installationsmanifest">install.rdf</a> entspricht und <var>PFAD_ZUR_LOKALISATIONS_DATEI</var> der CHROME Pfad zu der Lokalisierungsdatei ist, die zuvor erstellt worden ist):
+  <pre>pref("extensions.ERWEITERUNGS_ID.description", "PFAD_ZUR_LOKALISATIONS_DATEI");</pre>
+ </li>
+</ul>
+<h4 id="Lokalisierbare_Zeichenketten">Lokalisierbare Zeichenketten</h4>
+<p>Die folgenden Add-on Metadaten können auf diese Weise übersetzt werden:</p>
+<ul>
+ <li>name</li>
+ <li>description</li>
+ <li>creator</li>
+ <li>homepageURL</li>
+</ul>
+<h4 id="Lokalisierbare_Listen" name="Lokalisierbare_Listen">Lokalisierbare Listen</h4>
+<p>In Fällen, in denen mehrere Werte existieren können, wird ein numerischer Index an das Ende des Namens der Eigenschaft angehängt:</p>
+<pre>extensions.ERWEITERUNGS_ID.contributor.1=LOKALISIERTER_NAME_DES_ERSTEN_MITWIRKENDEN
+extensions.ERWEITERUNGS_ID.contributor.2=LOKALISIERTER_NAME_DES_ZWEITEN_MITWIRKENDEN
+extensions.ERWEITERUNGS_ID.contributor.3=LOKALISIERTER_NAME_DES_DRITTEN_MITWIRKENDEN
+
+pref("extensions.ERWEITERUNGS_ID.contributor.1", "PFAD_ZUR_LOKALISATIONS_DATEI");
+pref("extensions.ERWEITERUNGS_ID.contributor.2", "PFAD_ZUR_LOKALISATIONS_DATEI");
+pref("extensions.ERWEITERUNGS_ID.contributor.3", "PFAD_ZUR_LOKALISATIONS_DATEI");
+</pre>
+<p>Die folgenden Add-on Metadaten können auf diese Weise übersetzt werden:</p>
+<ul>
+ <li>developer</li>
+ <li>translator</li>
+ <li>contributor</li>
+</ul>
diff --git a/files/de/making_sure_your_theme_works_with_rtl_locales/index.html b/files/de/making_sure_your_theme_works_with_rtl_locales/index.html
new file mode 100644
index 0000000000..0852b2e1f5
--- /dev/null
+++ b/files/de/making_sure_your_theme_works_with_rtl_locales/index.html
@@ -0,0 +1,79 @@
+---
+title: Making sure your theme works with RTL locales
+slug: Making_Sure_Your_Theme_Works_with_RTL_Locales
+translation_of: Archive/Themes/Making_sure_your_theme_works_with_RTL_locales
+---
+<p>Some languages are written from right to left. Of the languages Firefox and Thunderbird are shipped in, that includes Arabic and Hebrew, with Persian <a class="external" href="http://www.mozilla.com/en-US/firefox/all.html#beta_versions">available as beta</a>, for a total population in excess of 100 million potential users. The important thing to understand about these locales, is that the entire interface is mirrored right-to-left. That means that text that had a left margin will have a right margin instead (or <code>-moz-margin-start</code>), arrows that pointed right will have to point left and vice versa, and so on.</p>
+<div style="">
+  <img align="none" alt="A screenshot of Firefox 2 in Hebrew" class="internal" src="/@api/deki/files/214/=Firefox_2_RTL-header.png"><br>
+  A screenshot of Firefox 2 in Hebrew</div>
+<h2 id="What_you_need_to_do">What you need to do</h2>
+<p>At this stage you might ask yourself, "How would I know what language is my theme installed on? Should I make a special theme for these locales?" Don't despair: making a theme RTL-compatible is fairly easy!</p>
+<h3 id="Gecko_1.9.2_and_later">Gecko 1.9.2 and later</h3>
+<p>Gecko 1.9.2 introduced the <code>:-moz-locale-dir</code> CSS pseudoclass, which matches based on whether the user interface is being rendered left-to-right or right-to-left:</p>
+<ul>
+  <li>{{ Cssxref(":-moz-locale-dir(ltr)") }} matches if the user interface is being rendered left to right.</li>
+  <li>{{ Cssxref(":-moz-locale-dir(rtl)") }} matches if the user interface is being rendered right to left.</li>
+</ul>
+<h4 id="Example">Example</h4>
+<pre class="brush: css">toolbar[iconsize="large"][mode="icons"] #back-button {
+  -moz-image-region: rect(0px 396px 34px 360px);
+}
+
+toolbar[iconsize="large"][mode="icons"] #back-button:-moz-locale-dir(rtl) {
+  -moz-image-region: rect(0px 516px 34px 480px);
+}
+</pre>
+<p>This specifies the default, left-to-right version of the button, then offers an override if the user's interface is being rendered in right-to-left mode.</p>
+<h3 id="Gecko_1.9.1_(Firefox_3.5)_and_earlier">Gecko 1.9.1 (Firefox 3.5) and earlier</h3>
+<h4 id="The_chromedir_attribute">The <code>chromedir</code> attribute</h4>
+<p>Firefox, Thunderbird and SeaMonkey expose an attribute named <code>chromedir</code> on certain elements. All you have to do is add CSS rules to your theme that test for the value of this attribute, and use that to apply any RTL-specific rules that you may have. That's how the default theme works, so you can use it as an example.</p>
+<pre>toolbar[iconsize="large"][mode="icons"] #back-button {
+  -moz-image-region: rect(0px 398px 34px 360px);
+}
+
+toolbar[iconsize="large"][mode="icons"] #back-button[chromedir="rtl"] {
+  -moz-image-region: rect(0px 516px 34px 478px);
+}
+</pre>
+<p>This way, if <code>chromedir</code> is "rtl", the second rule will override the first, and the theme will work in RTL.</p>
+<p>Note that not all elements will have the <code>chromedir</code> attribute, so you may need to refer to an ancestor element that does. For example:</p>
+<pre>/* We want to apply a RTL rule to #c; neither it nor its
+ * parent element #b has a chromedir attribute, but its
+ * grandparent element #a does.
+ */
+
+#a &gt; #b &gt; #c {
+  /* normal rules */
+}
+
+#a[chromedir="rtl"] &gt; #b &gt; #c {
+  /* RTL rules */
+}
+</pre>
+<p><strong>Tip:</strong> sometimes, like in the <em>back</em> and <em>forward</em> arrows, you don't really need new versions of the images. Instead, just use the opposite arrow when in RTL context.</p>
+<h4 id="Using_start.2Fend_rules_instead_of_left.2Fright_rules" name="Using_start.2Fend_rules_instead_of_left.2Fright_rules">Using start/end rules instead of left/right rules</h4>
+<p>Directions are mirrored in RTL mode, so left becomes right and right becomes left. As a result, you almost never want to use left/right rules for paddings, borders, and margins. Instead, you should use the following start/end rules instead to ensure RTL compatibility:</p>
+<ul>
+  <li>{{ Cssxref("-moz-padding-start") }}</li>
+  <li>{{ Cssxref("-moz-padding-end") }}</li>
+  <li>{{ Cssxref("-moz-margin-start") }}</li>
+  <li>{{ Cssxref("-moz-margin-end") }}</li>
+  <li>{{ Cssxref("-moz-border-start") }}</li>
+  <li>{{ Cssxref("-moz-border-start-color") }}</li>
+  <li>{{ Cssxref("-moz-border-start-style") }}</li>
+  <li>{{ Cssxref("-moz-border-start-width") }}</li>
+  <li>{{ Cssxref("-moz-border-end") }}</li>
+  <li>{{ Cssxref("-moz-border-end-color") }}</li>
+  <li>{{ Cssxref("-moz-border-end-style") }}</li>
+  <li>{{ Cssxref("-moz-border-end-width") }}</li>
+</ul>
+<pre>#urlbar-search-splitter {
+  min-width: 8px;
+  -moz-margin-start: -4px;
+  border: none;
+  background: transparent;
+}</pre>
+<h2 id="Testing_your_theme">Testing your theme</h2>
+<p>Testing your theme for RTL compatibility is easy, and you do not even have to go through the hassle of downloading a RTL locale. The <a class="link-https" href="https://addons.mozilla.org/firefox/7438">Force RTL</a> extension enables you to switch the interface of Firefox from LTR to RTL and the other way around dynamically by toggling a menu item.</p>
+<p>{{ languages( { "ja": "ja/Making_Sure_Your_Theme_Works_with_RTL_Locales" } ) }}</p>
diff --git a/files/de/mdn/community/bleibe_auf_dem_laufenden/index.html b/files/de/mdn/community/bleibe_auf_dem_laufenden/index.html
new file mode 100644
index 0000000000..cd5c500e41
--- /dev/null
+++ b/files/de/mdn/community/bleibe_auf_dem_laufenden/index.html
@@ -0,0 +1,42 @@
+---
+title: Bleibe auf dem Laufenden
+slug: MDN/Community/Bleibe_auf_dem_Laufenden
+tags:
+  - Anfänger
+  - Community
+  - Guide
+  - MDN-Meta
+translation_of: MDN/Community/Whats_happening
+---
+<div>{{MDNSidebar}}</div><p>MDN wird von der <a href="https://wiki.mozilla.org/MDN">Mozilla Developer Network Community (englisch)</a> erstellt. Hier sind ein paar Kanäle, über die wir Informationen darüber teilen, an was wir arbeiten.</p>
+
+<h2 id="Blogs">Blogs</h2>
+
+<dl>
+ <dt><a href="https://hacks.mozilla.org/">Mozilla Hacks (englisch)</a></dt>
+ <dd>Neuigkeiten und ausführliche Berichte zu Web- und Mozilla-Technologien und -Features.</dd>
+ <dt><a href="https://blog.mozilla.org/community/category/developer-engagement/">Entwickler einbinden (englisch)</a></dt>
+ <dd>Förderung der Aktivitäten und Diskussionen zwischen der an MDN beteiligten Community bei Mozilla.</dd>
+</dl>
+
+<h2 id="Streams">Streams</h2>
+
+<ul>
+ <li><a href="https://twitter.com/MozDevNet">@MozDevNet (englisch)</a>: Interessante Seiten, Tutorials, Guides, Aufrufe zur Einbringung, besondere Ankündigungen und andere Neuigkeiten über das Mozilla Developer Network.</li>
+ <li><a href="https://twitter.com/mozhacks">@MozHacks (englisch)</a>: Tweets über neue Webtechnologien, tolle HTML5-Apps und Firefox-Features.</li>
+ <li><a href="https://www.youtube.com/user/mozhacks">Mozilla Hacks (YouTube; englisch)</a></li>
+</ul>
+
+<h2 id="Statusboards_und_Dashboards">Statusboards und Dashboards</h2>
+
+<p>Das MDN-Dokumentationsteam unterhält ein <a href="https://trello.com/b/HAhl54zz/status">Trello board (englisch)</a>, auf dem unsere Projekte verwaltet werden. Dieses Board ist nur lesbar, erlaubt es dir jedoch, zu sehen, an was gearbeitet wird und was wir hoffen, bald angehen zu können, und ermöglicht es dir, herauszufinden, wo du helfen kannst. <a href="/de/docs/MDN/Contribute/Community/Trello">Dieser Artikel</a> erklärt, wie dieses Board verwendet wird.</p>
+
+<p>Außerdem solltest du einen Blick auf die <a href="/de/docs/MDN/Doc_status">Dokumentationsstatus</a>-Seiten werfen, um zu sehen, was aktuell in Bezug zu allen MDN-Inhalten passiert. Du kannst sehen, welche Artikel geschrieben oder aktualisiert werden müssen, welche Themen die meiste Hilfe benötigen und viel, viel mehr.</p>
+
+<h2 id="MDN-Meetings">MDN-Meetings</h2>
+
+<p>Es gibt einige regelmäßige Meetings, um den Fortschritt verschiedener MDN-Projekte und -Prozesse zu verfolgen und zu teilen. Diese sind auf der <a href="https://wiki.mozilla.org/MDN/Meetings">MDN-Meetings-Wikiseite (englisch)</a> beschrieben.</p>
+
+<p>Um einen allgemeinen Sinn dafür zu bekommen, was aktuell passiert, sollte man am MDN-Community-Meeting teilnehmen, welches alle zwei Wochen mittwochs, 10:00 US-Pazifikzeit (UTC-0800 Oktober-März, UTC-0700 März-Oktober) im <a href="irc://irc.mozilla.org/mdn">#mdn</a> <a href="https://wiki.mozilla.org/IRC">IRC-Kanal</a> stattfindet. Siehe die <a href="https://wiki.mozilla.org/MDN/Meetings/Community">MDN-Community-Meetings</a>-Wikiseite für Termine und Notizen zu vergangenen Meetings.</p>
+
+<p>Der Kalender für <a class="external text" href="https://www.google.com/calendar/embed?src=mozilla.com_2d35383434313235392d323530%40resource.calendar.google.com" rel="nofollow">öffentliche MDN-Events (englisch)</a> beinhaltet MDN-Community-Meetings, Docsprints und andere MDN-bezogene Ereignisse. Falls du ein Meeting siehst, das im "mdn"-Kanal unseres Vidyo-Videokonferenzsystems stattfindet, kannst du <a href="https://v.mozilla.com/flex.html?roomdirect.html&amp;key=gMM1xZxpQgqiQFNkUR3eBuHgxg">an der Konversation im Web teilnehmen (englisch)</a>.</p>
diff --git a/files/de/mdn/community/index.html b/files/de/mdn/community/index.html
new file mode 100644
index 0000000000..f8df9274e7
--- /dev/null
+++ b/files/de/mdn/community/index.html
@@ -0,0 +1,80 @@
+---
+title: Tritt der MDN-Gemeinschaft bei
+slug: MDN/Community
+tags:
+  - Community
+  - Guide
+  - Landing
+  - MDN Meta
+  - Meeting
+translation_of: MDN/Community
+---
+<div>{{MDNSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-de/docs/MDN")}}</div>
+
+<p>MDN ist mehr als ein Wiki: Es ist eine Gemeinschaft von Entwicklern, die zusammenarbeiten um MDN zu einer eigenständigen Ressource für Entwickler, die openWeb-Technologien nutzen, zu machen. Die "Arbeit" wird auf der  MDN-Seite gemacht, aber die "Community" funktioniert auch (asynchron) durch Diskussionen und (synchron) durch Online-Chats.</p>
+
+<p>Wir würden uns freuen, wenn Du beim MDN mitmachen würdest, aber noch mehr, wenn Du bei der MDN-Community mitmachen würdest. Hierunter kannst Du lesen, wie man sich in wenigen Schritten anmeldet:</p>
+
+<ol>
+ <li>Erstelle ein MDN-Konto.</li>
+ <li>Abonniere die dev-mdc Verteilerliste.</li>
+ <li>Gehe zu IRC.</li>
+</ol>
+
+<h2 id="Erstelle_ein_MDN-Konto">Erstelle ein MDN-Konto</h2>
+
+<p>{{page("/en-US/docs/Project:MDN/Contributing/Getting_started", "Creating an account") }}</p>
+
+<h2 id="Unseren_Verteiler-Listen_beitreten">Unseren Verteiler-Listen beitreten</h2>
+
+<p>Zum Informationsaustausch und für Diskussionen hat Mozilla mehrere nützliche Mailinglisten. Insbesondere für MDN sind das:</p>
+
+<dl>
+ <dt><a href="https://lists.mozilla.org/listinfo/dev-mdc">dev-mdc</a></dt>
+ <dd>In dieser Liste diskutieren wir über die Dokumentation auf MDN. Wir sprechen über Änderungen und Verbesserungen die wir gemacht haben und wir klären, wer welche Inhalte bearbeiten möchte. Wir empfehlen dringend, dass Du dieser Liste beitrittst, wenn Du Dich ernsthaft für die Dokumentation auf MDN interessierst!</dd>
+ <dt><a href="https://lists.mozilla.org/listinfo/dev-mdn">dev-mdn</a></dt>
+ <dd>In dieser Liste führen wir Diskussionen über die Entwicklung der MDN zugrunde liegenden Plattform Kuma. Wenn Du neugierig auf die Entwicklung und Arbeit hinter den Kulissen bist und am Entscheidungsprozess über die Plattform beteiligt sein möchtest, oder an Verbesserungen für die Plattform arbeiten willst, solltest Du Dich auf jeden Fall in dieser Liste engagieren.</dd>
+ <dt><a href="https://lists.mozilla.org/listinfo/mdn-drivers">mdn-drivers</a></dt>
+ <dd>Diese Mailingliste wird verwendet, um über die Prioritäten für die MDN-Entwicklung zu entscheiden. Es dient in der Regel dazu zu diskutieren, was weitergehend bearbeitet werden soll und gehen wir das Entwicklungsteam Aufmerksamkeit zu erregen, wenn ein ernstes Problem muss behoben werden, nachdem wir einen Bug für das Thema eingereicht haben.</dd>
+</dl>
+
+<p>Es gibt auch ein paar Listen speziell für MDN Lokalisierung Gemeinschaften. Wenn Ihre Gemeinde sehr groß und aktiv ist, erhalten Sie wahrscheinlich eine Liste erstellt für Ihre Gemeinde; Fragen Sie uns und wir schauen hinein. Derzeit haben diese Sprachen Listen : <a href="https://lists.mozilla.org/listinfo/dev-mdc-es">Spanish</a>, <a href="https://lists.mozilla.org/listinfo/dev-mdc-ja">Japanese</a>, und <a href="https://lists.mozilla.org/listinfo/dev-mdc-pt">Portuguese</a>.</p>
+
+<p>Warum "Dev-Mdc"? In der Vergangenheit wurde dies als "Mozilla Developer Center" oder MDC bezeichnet. Die Mailing-Liste stammt aus jener Zeit, so ist es Dev-Mdc. Es gibt auch eine Dev-Mdn Mailing-Liste für die Diskussion ist über die Entwicklung der Kuma-Plattform, die MDN läuft auf. Du bist herzlich eingeladen, die auch, aber es ist nicht notwendig, wenn Sie nur in MDN Inhalt interessiert.</p>
+
+<h2 id="In_den_IRC_gehen">In den IRC gehen</h2>
+
+<p>Der Internet Relay Chat (IRC) ist unserer bevorzugter Weg um uns täglich abzusprechen und in Echtzeit Diskussionen unter Community-Mitgliedern zu führen. Wir nutzen verschiedene Kanäle um Diskussionen zu führen, die mit dem MDN zu tun haben.</p>
+
+<dl>
+ <dt><a href="irc://irc.mozilla.org/devmo" title="irc://irc.mozilla.org/devmo">#devmo</a></dt>
+ <dd>Internet Relay Chat (IRC) ist unsere bevorzugte Methode für die täglichen Chat und Diskussionen unter den Community-Mitgliedern in Echtzeit. Wir verwenden ein paar Kanäle für Diskussionen im Zusammenhang mit MDN.</dd>
+ <dt><a href="irc://irc.mozilla.org/mdn" title="irc://irc.mozilla.org/mdn">#mdn</a></dt>
+ <dd>MDN ist mehr als nur die Dokumentation, und aus diesem Grund haben wir einen Kanal für das Gespräch über die größeren MDN-Projekts. Das ist #mdn.</dd>
+ <dt><a href="irc://irc.mozilla.org/mdndev" title="irc://irc.mozilla.org/mdndev">#mdndev</a></dt>
+ <dd>dieses Kanals ist unsere primäre Kanal für die Erörterung des Dokumentation Inhalts selbst. Wir sprechen über das Schreiben, Organisation von Inhalten, und so weiter. Wir haben auch "Wasser-Kühler" Gespräche hier – es ist ein Weg, unsere Community in Kontakt zu bleiben und einfach nur rumhängen kann.</dd>
+</dl>
+
+<p>Diese Kanäle sind am ehesten in Nordamerika unter der Woche aktiv sein.</p>
+
+<p>Erfahre mehr über IRC, wenn Du damit nicht vertraut bist. ChatZilla ist ein IRC-Client implementiert als Firefox Add-on, das macht es schnell und einfach zu installieren und starten Sie mit it.</p>
+
+<h2 id="Nimm_an_unseren_zweiwöchentlichen_Besprechungen_(und_anderen_Veranstaltungen)_teil">Nimm an unseren zweiwöchentlichen Besprechungen (und anderen Veranstaltungen) teil</h2>
+
+<p>Jede zweite Woche, hält die MDN Gemeinschaft ein IRC-basierten Live Meeting Notizen austauschen, reden, was wir getan haben und klären wir für die nächsten zwei Wochen zu tun möchten. Wir sprechen auch über Entwicklungspläne für die MDN-Plattform selbst und oft Updates über neue und kommende Features der Website erhalten. Dies sind lockere, lustige treffen, und jeder ist herzlich willkommen.<br>
+ <br>
+ Auf der Seite MDN Gemeindeversammlungen auf der Mozilla-Wiki für Details über den Zeitplan sowie die Tagesordnungen und Notizen für vergangene und geplante Veranstaltungen.</p>
+
+<p>Auf der Seite <a href="https://wiki.mozilla.org/MDN/Community_meetings" title="https://wiki.mozilla.org/MDN/Community_meetings">MDN Community Meetings</a> auf der Mozilla-Wiki für Details über den Zeitplan sowie die Tagesordnungen und Notizen für vergangene und geplante Veranstaltungen.</p>
+
+<p>Die <a href="https://mail.mozilla.com/home/publiccalendar@mozilla.com/MDN_Events.html">MDN Events calendar</a> für diese und andere Meetings, Doc Sprints und anderen Veranstaltungen zu sehen.</p>
+
+<h2 id="Nächste_Schritte">Nächste Schritte</h2>
+
+<ul>
+ <li>Einen Beitrag zur MDN: Hier finden Sie Anleitungen für Arbeiten in MDN und Vorschläge für Unternehmungen, an zu arbeiten.<br>
+  Verfolgen, was passiert ist: mehr Möglichkeiten mit MDN und Mozilla Entwickler Engagement im allgemeinen mithalten. .</li>
+ <li>Verfolgen, was passiert ist: mehr Möglichkeiten mit MDN und Mozilla Entwickler Engagement im allgemeinen mithalten.</li>
+</ul>
diff --git a/files/de/mdn/contribute/feedback/index.html b/files/de/mdn/contribute/feedback/index.html
new file mode 100644
index 0000000000..fcc2560b5d
--- /dev/null
+++ b/files/de/mdn/contribute/feedback/index.html
@@ -0,0 +1,51 @@
+---
+title: Feedback zu MDN senden
+slug: MDN/Contribute/Feedback
+tags:
+  - Dokumentation
+  - Guide
+  - MDN
+  - MDN-Meta
+translation_of: MDN/Contribute/Feedback
+---
+<div>{{MDNSidebar}}</div>
+
+<div>{{IncludeSubnav("/de/docs/MDN")}}</div>
+
+<p>Willkommen auf MDN! <span class="seoSummary">Falls du Verbesserungsvorschläge für oder Probleme mit der Benutzer von MDN hast, ist dies der richtige Ort. Dass du Interesse daran zeigst, Feedback zu geben, macht dich mehr Teil der Mozilla-Community, und wir danken dir im Voraus für dein Interesse.</span></p>
+
+<p><span class="seoSummary">Du hast mehrere Möglichkeiten, deine Eindrücke zu schildern; dieser Artikel hilft dir dabei.</span></p>
+
+<h2 id="Die_Dokumentation_aktualisieren">Die Dokumentation aktualisieren</h2>
+
+<p>Zuallererst, falls du ein Problem im Zusammenhang mit der Dokumentation gesehen hast, kannst du ihn gerne selbst korrigieren. <a href="/de/docs/MDN/Contribute/Howto/ERstellung_eines_MDN_Profils">Melde dich an</a>, indem du <a href="https://github.com/">GitHub</a> verwendest, dann klicke auf einen blauen <strong>Bearbeiten</strong>-Button, um den <a href="/de/docs/MDN/Contribute/Editoren_Anleitung">Editor</a> zu öffnen und damit an der MDN-Dokumentation mitzuwirken. Die Dokumentation hier ist in einem Wiki und wird durch ein Team von Freiwilligen und bezahlten Arbeitskräften betreut, seit also nicht schüchtern — deine Grammatik muss nicht perfekt sein. Wenn du einen Fehler machen solltest, werden wir ihn beheben; keine Sorge!</p>
+
+<p>Für weitere Informationen über die Mitwirkung zur MDN-Dokumentation siehe:</p>
+
+<ul>
+ <li><a href="/de/docs/MDN/Erste_Schritte">Erste Schritte</a></li>
+ <li><a href="/de/docs/MDN/Contribute">Beitragen zu MDN</a></li>
+ <li><a href="/de/docs/MDN/Contribute/Editoren_Anleitung" title="/en-US/docs/Project:MDN_editing_interface">Editoren-Anleitung</a></li>
+</ul>
+
+<h2 id="Nimm_an_der_Konversation_teil">Nimm an der Konversation teil</h2>
+
+<p>Sprich mit uns! Es gibt mehrere Wege, um mit anderen Leuten, die an MDN-Inhalten arbeiten, in Kontakt zu treten.</p>
+
+<h3 id="Synchron_Chat">(Synchron) Chat</h3>
+
+<p>
+ </p><h3 id="Asynchron_Diskussionen">(Asynchron) Diskussionen</h3>
+
+
+<p>Längere Diskussionen finden in unserem <a href="https://discourse.mozilla-community.org/c/mdn">MDN-Diskussionsforum (englisch)</a> statt. Du kannst über die E-Mail-Adresse <a href="mailto://mdn@mozilla-community.org">mdn@mozilla-community.org</a> ins Forum posten. Falls du dem Forum beitritts, kannst du zudem auswählen, ob du Benachrichtigungen über Diskussionen via E-Mail erhalten willst.</p>
+
+<h2 id="Fehler_melden">Fehler melden</h2>
+
+<h3 id="Dokumentationsfehler">Dokumentationsfehler</h3>
+
+<p>Falls du einen Fehler in der Dokumentation siehst und ihn aus irgendeinem Grund nicht selbst beheben kannst, kannst du einen <a href="https://github.com/mdn/sprints/issues/new?template=issue-template.md&amp;projects=mdn/sprints/2&amp;labels=user-report">Fehlerbericht erstellen (englisch)</a>! Du kannst dieses Formular für beliebige Dokumentationsprobleme verwenden, egal ob es eine einfache Korrektur ist oder eine Anfrage für einen komplett neuen Inhalt. Wie zuvor erwähnt, laden wir dich dazu ein, die Änderungen selbst beizutragen, jedoch steht dir diese Option ebenfalls offen.</p>
+
+<h3 id="Seitenfehler">Seitenfehler</h3>
+
+<p>Falls du auf Probleme mit der MDN-Webseite stößt oder Ideen für neue Features für die Seite hast, kannst du <a href="https://bugzilla.mozilla.org/form.mdn">ein Ticket an das MDN-Entwicklerteam stellen (englisch)</a>.</p>
diff --git a/files/de/mdn/contribute/getting_started/index.html b/files/de/mdn/contribute/getting_started/index.html
new file mode 100644
index 0000000000..a1f27d9d62
--- /dev/null
+++ b/files/de/mdn/contribute/getting_started/index.html
@@ -0,0 +1,125 @@
+---
+title: Erste Schritte auf MDN
+slug: MDN/Contribute/Getting_started
+tags:
+  - Documentation
+  - Getting Started
+  - Guide
+  - MDN
+  - MDN Project
+  - New Contributors
+translation_of: MDN/Contribute/Getting_started
+---
+<div>{{MDNSidebar}}</div><p id="What_is_MDN.3F">Wir sind eine offene Gemeinschaft von Entwicklern, die Ressourcen für ein besseres Internet ohne Rücksicht auf Marke, Browser oder Plattform erstellen. Jeder kann dazu einen Beitrag leisten und jeder, der uns dabei hilft, macht uns stärker. Gemeinsam können wir auch in Zukunft Neuerungen im Internet zum Nutzen Aller voranbringen. Es beginnt hier, mit Ihnen.</p>
+
+<p>Alle Bestandteile von MDN (Dokumentationen, Demos und die Webseiten an sich) werden von einer offenen Gemeinschaft von Entwicklern erstellt. Bitte schließen Sie sich uns an!</p>
+
+<h2 id="3_einfache_Schritte_um_bei_MDN_mitzumachen"><span><span>3 einfache Schritte um bei MDN mitzumachen</span></span></h2>
+
+<p>MDN ist ein Wiki, dem <strong>jeder</strong> Inhalte hinzufügen und diese bearbeiten kann. Sie müssen kein Programmierer sein oder besonders viel über Technologien wissen. Es gibt eine ganze Reihe von Aufgaben, die erledigt werden müssen, vom Einfachen (Korrekturlesen und Beheben von Tippfehlern) bis zum Komplexen (API Dokumentationen schreiben).</p>
+
+<p>Einen Beitrag zu leisten ist einfach und sicher. Wenn Sie einen Fehler machen, wird dieser schnell behoben werden. Auch wenn Sie sich nicht sicher sind, wie manche Dinge aussehen sollen oder Ihre Grammatik nicht allzu gut ist, zerbrechen Sie sich darüber nicht den Kopf. Wir haben ein Team von Leuten, deren Job es ist zu gewährleisten, dass die Inhalte auf MDN so gut wie möglich sind. Jemand wird da sein um sicherzustellen, dass Ihre Arbeit ordentlich und gut formuliert ist.</p>
+
+<h3 id="Schritt_1_Legen_Sie_ein_Konto_für_MDN_an">Schritt 1: Legen Sie ein Konto für MDN an</h3>
+
+<p>Um mit Ihren Beiträgen auf MDN zu beginnen, benötigen Sie ein Konto für MDN. Näheres erfahren Sie unter <a href="/de/docs/MDN/Contribute/Howto/Create_an_MDN_account">Anlegen eines Accounts</a>.</p>
+
+<h3 id="Schritt_2_Suchen_Sie_sich_eine_zu_erledigende_Aufgabe">Schritt 2: Suchen Sie sich eine zu erledigende Aufgabe</h3>
+
+<p>Sobald Sie eingeloggt sind, lesen Sie die Beschreibungen der verschiedenen Arten von Aufgaben in der Liste unten und entscheiden Sie, welche Sie davon am Meisten reizt. Sie können sich jede Aufgabe die Ihnen gefällt aussuchen, um mit Ihrem Beitrag zu beginnen.</p>
+
+<h3 id="Schritt_3_Erledigen_Sie_die_Aufgabe">Schritt 3: Erledigen Sie die Aufgabe</h3>
+
+<p>Sobald Sie entschieden haben, welche Art von Aufgabe Sie erledigen wollen, suchen Sie nach einer Seite, einem Code Beispiel o. ä. an dem Sie arbeiten wollen und legen Sie einfach los!</p>
+
+<p>Machen Sie sich keine Gedanken, ob es perfekt ist! Andere Mitwirkende von MDN sind da, um durchgerutschte Fehler zu beheben. Möchten Sie lieber erst experimentieren bevor Sie etwas “in Echt” machen, können Sie die <a href="/de/docs/Sandbox">Sandbox</a> Seite editieren. Bei auftauchenden Fragen finden Sie auf der <a href="/de/docs/MDN/Community">Community</a> Seite Informationen über Mailing Listen und Chat Kanäle, auf denen Sie Antworten erhalten können.</p>
+
+<p>Wenn Sie fertig sind, können Sie sich gerne eine weitere Aufgabe aussuchen oder schauen Sie unten <a href="#Was_Sie_noch_auf_MDN_tun_k.C3.B6nnen">was Sie noch auf MDN tun können</a>.</p>
+
+<h2 id="Mögliche_Arten_von_Aufgaben">Mögliche Arten von Aufgaben</h2>
+
+<p>Abhängig von Ihren Fähigkeiten und Interessen gibt es viele Möglichkeiten, um zu MDN beizutragen. Obwohl manche Aufgaben gewaltig sind, haben wir auch eine Menge einfacher Arbeiten zur Auswahl. Viele davon sind in fünf Minuten (oder weniger!) erledigt. Zusätzlich zur Aufgabe und einer kurzen Beschreibung finden Sie die ungefähre Zeit, die jede Art von Aufgabe normalerweise erfordert, mit angegeben.</p>
+
+<h3 id="Option_1_Ich_mag_Worte">Option 1: Ich mag Worte</h3>
+
+<p>Sie können uns bei der Durchsicht und beim Bearbeiten bestehender Dokumentationen und beim Anlegen zutreffender Schlagwörter behilflich sein.</p>
+
+<ul>
+ <li><a href="/de/docs/MDN/Contribute/Howto/Set_the_summary_for_a_page">Schreiben Sie die Zusammenfassung für eine Seite</a> (5-15 Minuten)</li>
+ <li><a href="/de/docs/Project:MDN/Contributing/How_to/Do_an_editorial_review">Redaktionelle Durchsichten</a> (5–30 Minuten)</li>
+ <li><a href="/de/docs/MDN/User_guide/Writing#Editing_an_existing_page">Aktualisieren Sie einen bestehenden Artikel mit neuen Informationen</a> (5 Minuten - 1 Stunde)</li>
+ <li><a href="/de/docs/MDN/User_guide/Writing#Adding_a_new_page">Schreiben Sie einen Artikel über eine neue Technologie oder API</a> (30 Minuten - 2 Stunden)</li>
+</ul>
+
+<div class="note"><strong>Hinweis:</strong> Wenn Sie Artikel rezensieren oder neue Artikel verfassen, bitten wir Sie den <a href="/de/docs/Project:MDN/Style_guide">Style Guide</a> einzusehen. Somit wird gewährleistet, dass alle Artikel einheitlich bleiben.</div>
+
+<h3 id="Option_2_Ich_mag_Code">Option 2: Ich mag Code</h3>
+
+<p>Wir brauchen mehr Code Beispiele! Außerdem können Sie uns beim Aufbau unserer Webseiten Plattform <a href="https://developer.mozilla.org/de/docs/Project:MDN/Kuma">Kuma</a> behilflich sein!</p>
+
+<ul>
+ <li><a href="/de/docs/Project:MDN/Contributing/How_to/Convert_code_samples_to_be_live_">Wandeln Sie Code Beispiele in “live Code” um</a> (30 Minuten)</li>
+ <li><a href="https://kuma.readthedocs.org/en/latest/installation-vagrant.html">Richten Sie eine Kuma Build Umgebung ein</a> (1 Stunde)</li>
+ <li><a href="https://github.com/mozilla/kuma#readme">Senden Sie Ihren Code Patch an die Kuma Codebase</a> (1 Stunde)</li>
+ <li><a href="https://developer.mozilla.org/de/demos/submit">Reichen Sie eine neue Demo ein</a><a href="https://developer.mozilla.org/en-US/demos/submit"> </a>(1 Stunde)</li>
+</ul>
+
+<h3 id="Option_3_Ich_mag_sowohl_Worte_als_auch_Code">Option 3: Ich mag sowohl Worte als auch Code</h3>
+
+<p>Wir haben Aufgaben, die sowohl technische als auch sprachliche Fähigkeiten erfordern, wie z.B. neue Artikel verfassen, Durchsichten auf technische Genauigkeit oder das Anpassen von Dokumenten.</p>
+
+<ul>
+ <li><a href="/de/docs/Project:MDN/Contributing/How_to/Tag_JavaScript_pages">Javascript Seiten mit Schlagwörtern versehen</a> (5 Minuten)</li>
+ <li><a href="/de/docs/MDN/Promote">MDN auf Ihrer eigenen Website promoten</a> (5 Minuten)</li>
+ <li><a href="/de/docs/Project:MDN/Contributing/How_to/Do_a_technical_review">Technische Durchsichten</a> (30 Minuten)</li>
+ <li><a href="/de/docs/Project:MDN/Contributing/How_to/Update_API_page_layout">API Seiten Layout aktualisieren</a> (30 Minuten)</li>
+ <li><a href="/de/docs/MDN/Contribute/Creating_and_editing_pages#Creating_a_new_page">Schreiben Sie einen neuen Artikel über ein Thema, mit dem Sie vertraut sind</a> (1 Stunde oder mehr)</li>
+</ul>
+
+<h3 id="Option_4_Ich_möchte_MDN_in_meiner_Sprache">Option 4: Ich möchte MDN in meiner Sprache</h3>
+
+<p>Sämtliche Lokalisierungs- und Übersetzungsarbeiten auf MDN werden von unserer phantastischen Gemeinschaft von Freiwilligen geleistet.</p>
+
+<ul>
+ <li><a href="/de/docs/MDN/Contribute/Localize/Translating_pages">Seiten übersetzen</a> (2 Stunden)</li>
+ <li>Treten Sie in Verbindung mit anderen Lokalisierern die unter <a href="/de/docs/Project:MDN/Localizing/Localization_projects">Lokalisierungsprojekte</a> aufgeführt sind (30 Minuten)</li>
+</ul>
+
+<h3 id="Option_5_Ich_habe_eine_falsche_Information_gefunden_aber_ich_weiß_nicht_wie_ich_den_Fehler_beheben_kann">Option 5: Ich habe eine falsche Information gefunden, aber ich weiß nicht wie ich den Fehler beheben kann</h3>
+
+<p>Sie können Probleme melden indem Sie einen <a class="external" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Mozilla%20Developer%20Network">Dokumentations-Bug anlegen</a>. (5 Minuten)</p>
+
+<p>Verwenden Sie diese Feldwerte:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><strong>Bugzilla Feld</strong></td>
+   <td><strong>Wert</strong></td>
+  </tr>
+  <tr>
+   <td><code>product</code></td>
+   <td><a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Developer+Documentation">Entwicklerdokumentation</a></td>
+  </tr>
+  <tr>
+   <td><code>component</code></td>
+   <td>[Wählen Sie einen geeigneten Bereich für das Thema oder "General", wenn Sie sich nicht sicher sind oder den richtigen Bereich nicht finden können]</td>
+  </tr>
+  <tr>
+   <td><code>URL</code></td>
+   <td>Die Seite auf der Sie das Problem gefunden haben</td>
+  </tr>
+  <tr>
+   <td><code>Description</code></td>
+   <td>So viel Sie über das Problem wissen oder Zeit haben, das Problem zu beschreiben und wo korrekte Informationen zu finden sind. Das können sowohl Menschen ("sprich mit so-und-so") als auch Web-Links sein.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Was_Sie_noch_auf_MDN_tun_können">Was Sie noch auf MDN tun können</h2>
+
+<ul>
+ <li><a href="/de/docs/Project:MDN/Contributing/Join_the_community">Schließen Sie sich der MDN Community an</a>.</li>
+ <li><a href="/de/profile">Füllen Sie Ihr Profil aus</a>, so dass andere mehr über Sie erfahren können.</li>
+ <li>Erfahren Sie mehr darüber, wie Sie <a href="/de/docs/MDN/Contribute">zu MDN beitragen</a> können.</li>
+</ul>
diff --git a/files/de/mdn/contribute/howto/convert_code_samples_to_be_live/index.html b/files/de/mdn/contribute/howto/convert_code_samples_to_be_live/index.html
new file mode 100644
index 0000000000..4c4a0a283e
--- /dev/null
+++ b/files/de/mdn/contribute/howto/convert_code_samples_to_be_live/index.html
@@ -0,0 +1,28 @@
+---
+title: How to convert code samples to be "live"
+slug: MDN/Contribute/Howto/Convert_code_samples_to_be_live
+translation_of: MDN/Contribute/Howto/Convert_code_samples_to_be_live
+---
+<div>{{MDNSidebar}}</div><p class="summary">MDN besitzt ein "<a href="/en-US/docs/MDN/Contribute/Editor/Live_samples">live sample</a>"-System, bei dem die Ausgabe des angezeigten Codes direkt angezeigt wird. Allerdings gibt es noch viele Codebeispiele, die dieses System noch nicht nutzen und noch konvertiert werden müssen.</p>
+
+<p><span class="seoSummary">Live-Beispiele, die dir direkt die Ausgabe anzeigen, machen Dokumentationen dynamischer und informativer. Der Leitfaden beschreibt, wie die "live"-Funktionalität zu bereits bestehenden Beispielen hinzugefügt werden kann.</span></p>
+
+<ul>
+ <li>Beispielabhängige Fähigkeiten in HTML, CSS und JavaScript</li>
+ <li>Fähigkeit <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Tools/KumaScript">KumaScript</a> in Artikeln zu nutzen</li>
+</ul>
+
+<ol>
+ <li><span style="display: none;"> </span><span style="display: none;"> </span>Wähle einen Artikel mit dem Tag "<a href="https://developer.mozilla.org/en-US/docs/tag/NeedsLiveSample">NeedsLiveSample</a>" aus</li>
+ <li>Konvertiere das Codebeispiels</li>
+ <li>Lösche alle Bilder oder<span style="display: none;"> </span> Texte, auf denen die Ausgabe gezeigt wird<span style="display: none;"> </span></li>
+</ol>
+
+<dl>
+ <dt><strong>Wo muss dies gemacht werden?</strong></dt>
+ <dd>Bei Artikeln mit dem Tag "<a href="/en-US/docs/tag/NeedsLiveSample">NeedsLiveSample</a>".</dd>
+ <dt><strong>Was musst du können um diese Aufgabe zu erledigen?</strong></dt>
+ <dt><strong>Welche Schritte müssen<span style="display: none;"> </span> unternommen werden?</strong></dt>
+</dl>
+
+<p>Für weitere Informationen um das Thema Erstellen und Bearbeiten von Live-Beispielen, schau dir <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Editor/Live_samples">Using the live sample system</a> an</p>
diff --git a/files/de/mdn/contribute/howto/do_a_technical_review/index.html b/files/de/mdn/contribute/howto/do_a_technical_review/index.html
new file mode 100644
index 0000000000..0f52932293
--- /dev/null
+++ b/files/de/mdn/contribute/howto/do_a_technical_review/index.html
@@ -0,0 +1,54 @@
+---
+title: Wie eine technische Überprüfung gemacht wird
+slug: MDN/Contribute/Howto/Do_a_technical_review
+translation_of: MDN/Contribute/Howto/Do_a_technical_review
+---
+<div>{{MDNSidebar}}</div><p class="summary"><strong>Technische Überprüfungen beinhalten die Prüfung der technischen Genauigkeit und Vollständigkeit eines Artikels und gegebenenfalls dessen Korrektur.</strong> Falls ein Autor eines Artikels will, dass jemand anderes den technischen Inhalt eines Artikels überprüft, so kann er das Kontrollkästchen "Technisch – Quelltext-Ausschnitte, APIs oder Technologien" während der Bearbeitung anhaken. Oftmals kontaktiert der Autor eine bestimmte Person, damit diese die technische Überprüfung durchführt, jedoch kann jeder mit technischer Expertise im jeweiligen Bereich diese durchführen.</p>
+
+<p><span class="seoSummary">Dieser Artikel beschreibt, wie man bei einer technischen Überprüfung vorgeht, und hilft somit, sicherzustellen, dass die Inhalte auf MDN korrekt sind.</span></p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td><strong>Was ist die Aufgabe?</strong></td>
+   <td>Überprüfen und korrigieren von Artikeln auf technische Genauigkeit und Vollständigkeit</td>
+  </tr>
+  <tr>
+   <td><strong>Wo muss sie gemacht werden?</strong></td>
+   <td>Innerhalb bestimmter Artikel, die markiert wurden, dass sie eine <a href="/de/docs/needs-review/technical">technische Überprüfung</a> benötigen.</td>
+  </tr>
+  <tr>
+   <td><strong>Was muss ich wissen, um die Aufgabe zu erledigen?</strong></td>
+   <td>
+    <ul>
+     <li>Expertenwissen im Bereich, den der Artikel, den du überprüfst, umfasst.</li>
+     <li>Fähigkeit, einen Wikiartikel auf MDN zu bearbeiten.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><strong>Was sind die auszuführenden Schritte?</strong></td>
+   <td>
+    <ol>
+     <li>Wähle einen Artikel zur Überprüfung:
+      <ol>
+       <li>Schau dir die <a href="/de/docs/needs-review/technical">Liste der Artikel, die technische Überprüfung benötigen</a>, an. Diese listet alle Seiten auf, für die eine redaktionelle Überprüfung angefordert wurde.</li>
+       <li>Wähle eine Seite, mit dessen Thema du dich auskennst.</li>
+       <li>Klicke auf den Artikellink, um die Seite zu laden.</li>
+      </ol>
+     </li>
+     <li>Sobald die Seite geladen ist, klicke auf die <strong>BEARBEITEN</strong> Schaltfläche oben auf der Seite; dies startet den <a href="/de/docs/Project:MDN/Contributing/Editoren_Anleitung">MDN Editor</a>. Zögere nicht, zu einer anderen Seite zu wechseln, falls dir die erste nicht zusagt.</li>
+     <li>Während des Lesens des Artikels korrigiere alle technischen Informationen, die fehlerhaft sind, und füge wichtige Informationen hinzu, die fehlen.</li>
+     <li>Gib einen <strong>Kommentar zur Version</strong> des Artikels ein, der beschreibt, was du getan hast; beispielsweise '<em>Technische Überprüfung durchgeführt.</em>' Falls du Informationen korrigiert hast, füge dies deinem Kommetar hinzu, beispielsweise <em>'Technische Überprüfung: Parameterbeschreibungen korrigiert.'</em></li>
+     <li>Klicke auf die <strong>ÄNDERUNGEN SPEICHERN</strong> Schaltfläche.</li>
+     <li>Sobald der korrigierte Artikel auf dem Bildschirm erscheint nachdem der Editor geschlossen wurde, setze einen Haken bei <strong>Technisch</strong> (unterhalb <strong>Die folgenden Überprüfungen wurden angefordert</strong>) und klicke auf <strong>ÜBERPRÜFUNG ABSENDEN</strong>.</li>
+     <li>
+      <p>Fertig!</p>
+     </li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/de/mdn/contribute/howto/do_an_editorial_review/index.html b/files/de/mdn/contribute/howto/do_an_editorial_review/index.html
new file mode 100644
index 0000000000..2c8df95aa6
--- /dev/null
+++ b/files/de/mdn/contribute/howto/do_an_editorial_review/index.html
@@ -0,0 +1,49 @@
+---
+title: Wie eine redaktionelle Überprüfung gemacht wird
+slug: MDN/Contribute/Howto/Do_an_editorial_review
+translation_of: MDN/Contribute/Howto/Do_an_editorial_review
+---
+<div>{{MDNSidebar}}</div><p class="summary"><strong>Redaktionelle Überprüfungen beinhalten die Korrigierung von Tipp-, Rechtschreib-, Grammatik- oder Benutzungsfehlern - also ausdrücklich keine inhaltliche Zensur - in einem Artikel. Nicht alle Mitwirkenden sind Sprachexperten, haben jedoch durch ihr Wissen äußerst nützliche Artikel beigetragen, welche korrekturgelesen werden müssen.</strong> Dies findet in der redaktionellen Überprüfung statt.</p>
+
+<p><span class="seoSummary">Dieser Artikel beschreibt, wie man bei einer redaktionellen Überprüfung vorgeht, und hilft somit, sicherzustellen, dass die Inhalte auf MDN korrekt sind.</span></p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td><strong>Was ist die Aufgabe?</strong></td>
+   <td>Korrekturlesen von Artikeln, die markiert wurden, dass sie eine redaktionelle Überprüfung benötigen.</td>
+  </tr>
+  <tr>
+   <td><strong>Wo muss sie gemacht werden?</strong></td>
+   <td>Innerhalb bestimmter Artikel, die markiert wurden, dass sie eine redaktionelle Überprüfung benötigen.</td>
+  </tr>
+  <tr>
+   <td><strong>Was muss ich wissen, um die Aufgabe zu erledigen?</strong></td>
+   <td>Du benötigst gute Grammatik- und Rechtschreibkenntnisse in Deutsch.</td>
+  </tr>
+  <tr>
+   <td><strong>Was sind die auszuführenden Schritte?</strong></td>
+   <td>
+    <ol>
+     <li>Wähle einen Artikel zur Überprüfung:
+      <ol>
+       <li>Schau dir die <a href="/de/docs/needs-review/editorial">Liste der Artikel, die redaktionelle Überprüfung benötigen</a>, an. Diese listet alle Seiten auf, für die eine redaktionelle Überprüfung angefordert wurde.</li>
+       <li>Wähle eine Seite, die eine englische Überschrift hat und deren Pfad nicht mit <code>Template:</code> beginnt.</li>
+       <li>Klicke auf den Artikellink, um die Seite zu laden.</li>
+      </ol>
+     </li>
+     <li>Sobald die Seite geladen ist, klicke auf die <strong>BEARBEITEN</strong> Schaltfläche oben auf der Seite; dies startet den <a href="/de/docs/Project:MDN/Contributing/Editoren_Anleitung">MDN Editor</a>. Zögere nicht, zu einer anderen Seite zu wechseln, falls dir die erste nicht zusagt.</li>
+     <li>Korrigiere alle Tipp-, Rechtschreib- und Grammatik- oder Benutzungsfehler, die du siehst.</li>
+     <li>Gib einen <strong>Kommentar zur Version</strong> des Artikels ein; beispielsweise '<em>Redaktionelle Überprüfung: Tipp-, Grammatik- und Rechtschreibfehler korrigiert.</em>'</li>
+     <li>Klicke auf die <strong>ÄNDERUNGEN SPEICHERN</strong> Schaltfläche.</li>
+     <li>Sobald der korrigierte Artikel auf dem Bildschirm erscheint nachdem der Editor geschlossen wurde, setze einen Haken bei <strong>Redaktionell</strong> (unterhalb <strong>Die folgenden Überprüfungen wurden angefordert</strong>) und klicke auf <strong>ÜBERPRÜFUNG ABSENDEN</strong>.</li>
+     <li>
+      <p>Fertig!</p>
+     </li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/de/mdn/contribute/howto/document_a_css_property/index.html b/files/de/mdn/contribute/howto/document_a_css_property/index.html
new file mode 100644
index 0000000000..3270d75064
--- /dev/null
+++ b/files/de/mdn/contribute/howto/document_a_css_property/index.html
@@ -0,0 +1,89 @@
+---
+title: How to document a CSS property
+slug: MDN/Contribute/Howto/Document_a_CSS_property
+tags:
+  - CSS
+  - Guide
+  - Howto
+  - MDN Meta
+  - NeedsTranslation
+  - TopicStub
+translation_of: MDN/Contribute/Howto/Document_a_CSS_property
+---
+<div>{{MDNSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/MDN")}}</div>
+
+<p>As the <a href="/en-US/docs/Web/CSS">CSS</a> standards evolve, new properties are always being added. The MDN <a href="/en-US/docs/Web/CSS/Reference">CSS Reference</a> needs to be kept up to date with these developments. This document gives step-by-step instructions for creating a CSS property reference page.</p>
+
+<p>Each CSS property reference page follows the same structure. This helps readers find information more easily, especially once they are familiar with the standard reference page format.</p>
+
+<h2 id="Step_1_—_Decide_which_property_to_document">Step 1 — Decide which property to document</h2>
+
+<p>First, you will need to decide which property to document. The <em>CSS Documentation status</em> page lists properties that <a href="/en-US/docs/Web/CSS/Documentation_status#Missing_pages">need to be documented</a>. For details about the CSS property you will need to find a relevant specification for it (e.g., a <a href="http://www.w3.org/Style/CSS/">W3C specification</a>, a <a href="https://wiki.mozilla.org">Mozilla Wiki page</a>, or a bug report for a non-standard property used in rendering engines like Gecko or Blink).</p>
+
+<div class="note">
+<p><strong>Pro tips:</strong></p>
+
+<ul>
+ <li>When using a W3C spec, always use the <strong>Editor's Draft</strong> (note the red banner on the left side) and not a published version (e.g. Working Draft). The Editor's Draft is always closer to the final version!</li>
+ <li>If the implementation and spec diverge, feel free to mention it in the implementation bug: it may be a bug in the implementation (and a follow-up bug will be filed), a delay in the publication of a new spec, or an error in the spec (in which case a spec bug is worth filing).</li>
+</ul>
+</div>
+
+<h2 id="Step_2_—_Check_the_database_of_CSS_properties">Step 2 — Check the database of CSS properties</h2>
+
+<p>Several characteristics of a CSS property, such as its syntax or if it can be animated, are mentioned in several pages and are therefore stored in an ad-hoc database. Macros that you'll use on the page need information about the property that is stored there, so start by <a href="/en-US/docs/MDN/Contribute/Howto/Update_the_CSS_JSON_DB">checking that this information is there</a>.</p>
+
+<p>If not, contact an admin or a power user, either in the <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">MDN Web Docs (Matrix) chat room</a>, or, if nobody is available, by <a href="https://bugzilla.mozilla.org/form.doc">filing a bug</a>.</p>
+
+<h2 id="Step_3_—_Creating_the_CSS_property_page">Step 3 — Creating the CSS property page</h2>
+
+<p>Preparations finished! Now we can add the actual CSS property page. The easiest way to create a new CSS property page is to copy the content of an existing page and to edit it. We will go through the different steps now.</p>
+
+<div class="note">
+<p>Cloning a page is currently broken on MDN. That's why we need to go through these somewhat more complex steps. Please vote for ({{bug(870691)}}).</p>
+</div>
+
+<ol>
+ <li>Clone the <a href="/en-US/docs/MDN/Contribute/Howto/Document_a_CSS_property/Property_template">following page</a>, set the title to <em>your-property</em> (without capitals) and the slug to <code>Web/CSS/<em>your-property</em></code><em>.</em></li>
+ <li>Change the summary to fit, but keep it starting the same way : "The <em><code>your-property</code></em> <a href="/en-US/docs/Web/CSS">CSS</a> property…". Explain briefly what this property is for.</li>
+ <li>If the property is not experimental, remove the <code>\{{SeeCompatTable}}</code> macro. The purpose of this macro is to alert developers to the possibility that the feature may not yet have consistent support across browsers, and may change in the future as its specificaton evolves. Deciding whether a feature is experimental is a matter of judgement, and should include factors like:
+  <ul>
+   <li>Is the feature supported by several browsers?</li>
+   <li>Is the feature prefixed or behind a preference?</li>
+   <li>Is there any reason to think that the implementation of the feature will change in the future?</li>
+  </ul>
+ </li>
+ <li>Replace the parameter of the <code>\{{cssinfo("animation-name")}}</code> macro by the name of the CSS property you are documenting. This will allow you to build the summary box using the data you entered in step 2.</li>
+ <li>Replace the example of the syntax by relevant ones. Keep them very simple and don't forget that a lot of people don't understand a formal syntax so it needs to be simple and exhaustive. Keep the <code>inherit</code>, <code>initial</code>, and <code>unset</code> keywords examples at the end. It reminds users that these are valid values, too.</li>
+ <li>Under the chapter <em>Values</em>, put the meaning of each value. If it is a keyword, don't forget to mark it as code (select it and press <code>CTRL-O</code>). Each description should start by "Is a" followed by the type of the value, or indicating it is a keyword.</li>
+ <li>Clear the <em>Examples</em> chapter, we will add them at the end!</li>
+ <li>Update the specification table. For information about how to do it, read this <a href="/en-US/docs/MDN/Contribute/Structures/Specification_tables">tutorial</a>.</li>
+ <li>Update the compatibility information. For information about how to do it, read this <a href="/en-US/docs/MDN/Contribute/Structures/Compatibility_tables">tutorial</a>.</li>
+ <li>Update the <em>See also</em> section with relevant links. Do not link to specs here and usually link to internal documents. External documents are welcome, but only if they bring really good information. There are spam or SEO links often, so don't worry if external links are removed sometimes. Just start the discussion if you still find it useful and want to see it back.</li>
+ <li>Add the relevant tags: you need to add <code>CSS</code>, <code>CSS Property</code>, and <code>Reference.</code> You also need to add <code>Experimental</code> or <code>Non-standard</code> if this is the case. Finally you also need to add a <code>CSS XYZ</code> tag, where XYZ stands for the group of CSS properties it belongs to. It is often the spec short name. All these tags are used to generate quicklinks and other niceties.</li>
+</ol>
+
+<p>At any point, you can save by hitting the <code>SAVE</code> button. You can continue to edit right along. If you haven't saved your page until now, please do so! :-)</p>
+
+<p>The last step is to add <em>Examples</em>. To do that follow this <a href="/en-US/docs/Project:MDN/Contributing/Editor_guide/Live_samples">tutorial about live samples</a>. Don't forget that we are in a document explaining one single property: you need to add examples that show how this property is working in isolation, not how the whole specification is used. That means, examples for <code>list-style-type</code> will show what the different values generate, but not how to combine it with other property, pseudo-classes or pseudo-elements to generate nice effects; tutorials and guide can be written to show more.</p>
+
+<h2 id="Step_4_—_Getting_a_review">Step 4 — Getting a review</h2>
+
+<p>You have documented your CSS property! Congratulations!</p>
+
+<p>In order to have a good quality and consistency throughout the MDN CSS reference, it is good practice to request a review. Just click on the checkbox at the bottom of the article (in edit mode), and, optional, if you want to have a more personal review helping you to improve editorial skills, ask for it on the <a href="https://discourse.mozilla-community.org/c/mdn">MDN forum</a>.</p>
+
+<h2 id="Step_5_—_Integrating_the_new_page_in_the_MDN">Step 5 — Integrating the new page in the MDN</h2>
+
+<p>Now that your page is created, you want it to be found by the readers. Adding tags helped about this already as it allowed it to appear in the quicklinks to related CSS pages. Also you want it to appear on the <a href="/en-US/docs/Web/CSS/Reference">CSS index page</a>. If the newly documented property is on the standard track and at least one major browser is implementing it, it deserves to be listed this. Only administrator can add it there, so contact the CSS driver on IRC (currently at #mdn ping teoli) or file a documentation bug requesting it.</p>
+
+<p>Also, if the property is implemented by Firefox, you need to check that it is listed, and linked! in the correct <a href="/en-US/Firefox/Releases">Firefox for developers</a> MDN page. The new CSS property is likely already listed in the HTML section, just be sure that its name links back to your newly created page.</p>
+
+<h2 id="Contact_us">Contact us</h2>
+
+<ul>
+ <li>On IRC: <a href="irc://irc.mozilla.org/mdn">#mdn</a></li>
+ <li><a href="https://discourse.mozilla.org/c/mdn">Discourse</a></li>
+</ul>
diff --git a/files/de/mdn/contribute/howto/erstellung_eines_mdn_profils/index.html b/files/de/mdn/contribute/howto/erstellung_eines_mdn_profils/index.html
new file mode 100644
index 0000000000..d0f017a0f1
--- /dev/null
+++ b/files/de/mdn/contribute/howto/erstellung_eines_mdn_profils/index.html
@@ -0,0 +1,50 @@
+---
+title: Anleitung zur Erstellung eines MDN Profils
+slug: MDN/Contribute/Howto/ERstellung_eines_MDN_Profils
+tags:
+  - Anfänger
+  - Einführung
+translation_of: MDN/Contribute/Howto/Create_an_MDN_account
+---
+<div>{{MDNSidebar}}</div><p><span class="Summary">Um Änderungen an den Inhalten von MDN vornehmen zu können, brauchst du ein MDN - Profil (egal ob du Seiten ändern oder eine Demo hinzufügen willst). Aber keine Angst, du brauchst kein Profil wenn du in MDN lesen oder suchen  willst. </span></p>
+
+<h4 id="Diese_kleine_Anleitung_wird_dir_helfen_dein_MDN_Profil_selbst_zu_erstellen">Diese kleine Anleitung wird dir helfen, dein MDN Profil selbst zu erstellen:</h4>
+
+<p>Warum braucht MDN deine eMail adresse ?   Die eMail Adresse wird verwendet um den Account wieder herzustellen</p>
+
+<div style="width: 280px;" class="standardSidebar"><strong>Warum braucht MDN deine E-Mail-Adresse ?</strong><br>
+<br>
+Die E-Mail-Adresse wird verwendet, um den Account wiederherzustellen.                                                                                                                          Zusätzlich hast du die Möglichkeit, Benachrichtigungen zu erhalten (wie z.B. <a href="/en-US/docs/MDN/Contribute/Howto/Watch_a_page">wenn sich bestimmte Seiten ändern</a>). Wenn Du z.B. die Option "Teilnehmen am Beta Test Team" gewählt hast, erhälst du E-Mails über neue Funktionen, die getestet werden können.<br>
+<br>
+Deine E-Mail-Adresse wird in MDN <strong>nie</strong> und ausschließlich in Übereinstimmung mit unserer <a href="https://www.mozilla.org/privacy/websites/">Datenschutzrichtlinie</a> benutzt.</div>
+
+<ol>
+ <li>In der rechten oberen Ecke jeder Seite befindet sich die Schaltfläche <strong><span style="color: #6699ff;">Anmelden mit</span></strong><span style="color: #008000;">. </span>Gehe mit Deinem Mausezeiger dorthin und du bekommst eine Liste von Anmeldediensten für MDN angezeigt.</li>
+ <li>Wähle einen Dienst z.B.<strong> Anmelden </strong><strong>mit <span style="color: #40e0d0;"><strong><span style="color: #6699ff;">Persona</span></strong></span></strong>. Es öffnet sich ein neues Fenster mit dem <strong>Persona</strong> Login.</li>
+ <li>Gib Deine E-Mail-Adresse ein, die Du für Dein neues Profil benutzen willst und drücke auf <strong>Weiter</strong>.</li>
+ <li>Der nächste Punkt ist anhängig davon, ob Du E-Mail-Adresse bereits für Persona benutzt.
+  <ul>
+   <li>Falls Sie bereits Persona nutzen, wird nach Ihrem existierenden Passwort gefragt. Geben Sie es ein und klicken Sie auf <strong>Fertig</strong>.</li>
+   <li>Falls dies nicht der Fall ist, wird Persona Sie darum bitten, ein neues Password zu erstellen.
+    <ol>
+     <li>Geben Sie ihr Passwort zweimal ein und drücken Sie auf <strong>Fertig</strong>.</li>
+     <li>Überprüfen Sie ihren E-Mail Nachrichtenkorb auf eine Nachricht von <code>no-reply@persona.org</code>; Falls Sie die Nachricht nicht erhalten, kontrollieren Sie bitte ihren Spam-Filter.</li>
+     <li>Bestätigen Sie den Registrationslink in der Nachricht . Ihr Persona Profil wurde erstellt.</li>
+     <li>Wechseln Sie wieder zu dem Tab, oder Fenster, indem Sie mit der Registrierung bei MDN begannen.</li>
+    </ol>
+   </li>
+  </ul>
+ </li>
+ <li>Sobald Sie sich bei Persona authentifiziert haben. öffnet sich die <strong>Neues Profil</strong> Seite von MDN.</li>
+ <li>Geben Sie einen Nutzernamen ein, um sich mit Ihren Profil zu verknüpfen und drücken Sie auf<strong> Neues Profil erstellen</strong>.</li>
+</ol>
+
+<p>Das war's! Sie haben jetzt einen MDN Account und könne sofort Seiten bearbeiten oder mit Tags versehen, oder Demos einreichen!</p>
+
+<p>Auf jeder MDN Seite können Sie auf Ihren Namen klicken um ihr öffentliches Profil zu sehen. Dort können Sie auf "Bearbeiten" klicken um Ihr Profil zu ändern oder zu erweitern. Auch können Sie etwas über Ihre Intressen teilen, einen Twitter Account oder Blog hinzufügen, und so weiter.</p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Nutzernamen können keine Leerzeichen oder das "@" Symbol beinhalten. Bedenken Sie bitte, dass ihr Nutzername für die Öffentlichkeit sichtbar ist, um festzustellen, was sie schon alles geleistet haben!</p>
+</div>
+
+<p> </p>
diff --git a/files/de/mdn/contribute/howto/index.html b/files/de/mdn/contribute/howto/index.html
new file mode 100644
index 0000000000..9b2c82cf9f
--- /dev/null
+++ b/files/de/mdn/contribute/howto/index.html
@@ -0,0 +1,13 @@
+---
+title: How-to Leitfäden
+slug: MDN/Contribute/Howto
+tags:
+  - Documentation
+  - Landing
+  - MDN
+  - NeedsTranslation
+  - TopicStub
+translation_of: MDN/Contribute/Howto
+---
+<div>{{MDNSidebar}}</div><p><span id="result_box" lang="de"><span class="hps">Diese Artikel</span> <span class="hps">bieten Schritt-für</span><span>-Schritt-Anleitungen</span> <span class="hps">zum</span> <span class="hps">Erreichuen</span> <span class="hps">bestimmter Zielsetzungen</span><span>, wenn</span> <span class="hps">Sie zu</span> <span class="hps">MDN</span><span> beitragen.</span></span></p>
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/de/mdn/contribute/howto/schlagwörter_für_javascript_seiten/index.html b/files/de/mdn/contribute/howto/schlagwörter_für_javascript_seiten/index.html
new file mode 100644
index 0000000000..42a1d25435
--- /dev/null
+++ b/files/de/mdn/contribute/howto/schlagwörter_für_javascript_seiten/index.html
@@ -0,0 +1,81 @@
+---
+title: Wie man JavaScript bezogene Seiten mit Schlagworten versieht
+slug: MDN/Contribute/Howto/Schlagwörter_für_JavaScript_Seiten
+translation_of: MDN/Contribute/Howto/Tag_JavaScript_pages
+---
+<div>{{MDNSidebar}}</div><p class="summary"><strong>Schlagwörter sind Metadaten, welche helfen den Inhalt einer Seite </strong>zusammenzufassen um unteranderem die Suche zu verbessern.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td><strong>Wo muss es gemacht werden?</strong></td>
+   <td>Auf bestimmten <a href="/de/docs/MDN/Doc_status/JavaScript">JavaScript bezogenen Seiten, welche keine Schlagwörter haben</a></td>
+  </tr>
+  <tr>
+   <td><strong>Was muss du wissen um die Aufgabe zu erledigen?</strong></td>
+   <td>
+    <ul>
+     <li>JavaScript Grundkenntnisse, z.B. was eine Methode oder ein Attribut ist.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><strong>Welche Schritte müssen gemacht werden?</strong></td>
+   <td>
+    <ol>
+     <li>Such dir eine Seite aus, welche du auf der oben verlinkten Liste findest.</li>
+     <li>Klicke auf den Artikel-Link um die Seite zu öffnen.</li>
+     <li>Sobald die Seite geladen ist kannst du auf den <strong>BEARBEITEN</strong>-Button oben rechts klicken, welcher den MDN-Editor öffnet.</li>
+     <li>Es sollte mindestens das Schlagwort JavaScript eingefügt werden. Folgend findest du weitere mögliche Schlagwörter die hinzugefügt werden können:
+      <table class="standard-table">
+       <thead>
+        <tr>
+         <th scope="col">Schlagwort</th>
+         <th scope="col">Wann es verwendet werden sollte</th>
+        </tr>
+       </thead>
+       <tbody>
+        <tr>
+         <td><code>Method</code></td>
+         <td>Methoden</td>
+        </tr>
+        <tr>
+         <td><code>Property</code></td>
+         <td>Attribute</td>
+        </tr>
+        <tr>
+         <td><code>prototype</code></td>
+         <td>Prototypen</td>
+        </tr>
+        <tr>
+         <td>Objekttypen Name</td>
+         <td>Methoden eines Objektes z.B.: String.fromCharCode sollte das Schlagwort "<code>String" haben</code></td>
+        </tr>
+        <tr>
+         <td><code>ECMAScript6 </code>and <code>Experimental</code></td>
+         <td>Funktionen welche in einer neuen ECMAScript Version hinzugefügt wurden</td>
+        </tr>
+        <tr>
+         <td><code>Deprecated</code></td>
+         <td>Veraltete Funktionen (Deren Verwendung nicht mehr empfohlen wird, dennoch noch möglich ist)</td>
+        </tr>
+        <tr>
+         <td><code>Obsolete</code></td>
+         <td>Obsolete Funktionen (Welche nicht mehr von neueren Browsern unterstützt werden)</td>
+        </tr>
+        <tr>
+         <td>others</td>
+         <td>Siehe <a href="/de/docs/MDN/Contribute/Howto/Tag">MDN Leitfaden zur sachgemäßen Seitenkennzeichnung</a> für andere mögliche Schlagwörter</td>
+        </tr>
+       </tbody>
+      </table>
+     </li>
+     <li>Speichere mit einem kurzen Kommentar.</li>
+     <li>Du bist fertig!</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/de/mdn/contribute/howto/set_the_summary_for_a_page/index.html b/files/de/mdn/contribute/howto/set_the_summary_for_a_page/index.html
new file mode 100644
index 0000000000..8c30eb2dcb
--- /dev/null
+++ b/files/de/mdn/contribute/howto/set_the_summary_for_a_page/index.html
@@ -0,0 +1,54 @@
+---
+title: Wie erstelle ich eine Zusammenfassung für eine Seite
+slug: MDN/Contribute/Howto/Set_the_summary_for_a_page
+tags:
+  - Beginner
+  - Guide
+translation_of: MDN/Contribute/Howto/Set_the_summary_for_a_page
+---
+<div>{{MDNSidebar}}</div><p><span class="seoSummary">Sie können die Zusammenfassung einer Seite am MDN definieren, diese wird in verschiedenen Arten verwendet, einschließlich in Suchmaschinenergebnissen, auf anderen MDN Seiten wie als Themeneinführung, und in Tooltipps.</span> Es sollte ein Text sein, welcher in Zusammenhang mit der Seite, als auch alleine Sinn macht.</p>
+
+<p>Eine Zusammenfassung kann explizit für eine Seite definiert werden. Wenn sie nicht explizit definiert wird, so wird oft der erste Satz oder ähnliche benutzt, welche nicht immer die besten für diese Verwendung sind.</p>
+
+<table class="full-width-table">
+ <tbody>
+  <tr>
+   <td><strong>Was ist die Aufgabe?</strong></td>
+   <td>Markieren Sie den Text in einer Seite, welcher als Zusammenfassung, auch in anderen Zusammenhängen,  verwendet werden soll; diese Aufgabe kann das Schreiben eines entsprechenden Texts beinhalten.</td>
+  </tr>
+  <tr>
+   <td><strong>Wo muss es gemacht werden?</strong></td>
+   <td>Auf Seiten, welche keine oder keine gute Zusammenfassung haben.</td>
+  </tr>
+  <tr>
+   <td><strong>Was müssen Sie wissen, um die Aufgabe zu erledigen?</strong></td>
+   <td>Fähigkeit den MDN Editor zu benutzen; gute Schreibkompetenz in Deutsch; genug Vertrautheit mit der Seite um eine gute Zusammenfassung schreiben zu können.</td>
+  </tr>
+  <tr>
+   <td><strong>Welche Schritte sind zu unternehmen?</strong></td>
+   <td>
+    <ol>
+     <li>Wählen Sie eine Seite aus, für welche die Zusammenfassung erstellt werden soll:
+      <ol>
+       <li>Wählen Sie auf der <a href="/en-US/docs/MDN/Doc_status">MDN Dokumentationsstatus</a> Seite unter der Kategorie <strong>Sections</strong> ein Thema über welches Sie etwas wissen (zum Beispiel: HTML).</li>
+       <li>Klicken Sie <strong>Pages </strong>auf der Dokumentationsstatus Seite, um eine Übersicht über alle Seiten in diesem Abschnitt zu bekommen; in der linken Spalte sehen Sie Links zu den Seiten, und in der Rechten Spalte sehen Sie die Schlüsselwörter und die Zusammenfassung.</li>
+       <li>Wählen Sie eine Seite aus, welche keine oder nur eine schlechte Zusammenfassung besitzt.</li>
+       <li>Klicken Sie auf den Link um auf die Seite zu gelangen.</li>
+      </ol>
+     </li>
+     <li>Klicken Sie auf <strong>Edit</strong> um die Seite im MDN Editor zu öffnen.</li>
+     <li>Suchen Sie einen oder zwei Sätze, welche auch außerhalb der Seite als Zusammenfassung funktionieren. Wenn benötigt, bearbeiten Sie den existierenden Inhalt indem sie Sätze erzeugen, oder so verändern, dass sie eine gute Zusammenfassung ergeben.</li>
+     <li>Wählen Sie den Text der Zusammenfassung aus.</li>
+     <li>Wählen Sie im Styles Widget in der Editor Toolbar <strong>SEO Summary</strong> aus. (Im Seitenquelltext erzeugt das ein {{HTMLElement("span")}} Element mit <code>class="seoSummary"</code> um den ausgewählten Text.)</li>
+     <li>Speichern Sie Ihre Änderungen mit einem Revision Comment wie "Seitenzusammenfassung erstellt."</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
diff --git a/files/de/mdn/contribute/howto/tag/index.html b/files/de/mdn/contribute/howto/tag/index.html
new file mode 100644
index 0000000000..7fd597e80f
--- /dev/null
+++ b/files/de/mdn/contribute/howto/tag/index.html
@@ -0,0 +1,429 @@
+---
+title: Leitfaden zum Setzen von Schlagwörtern
+slug: MDN/Contribute/Howto/Tag
+tags:
+  - Beginner
+  - Contribute
+  - Guide
+  - Howto
+  - Intro
+  - MDN Meta
+  - Tutorial
+translation_of: MDN/Contribute/Howto/Tag
+---
+<div>{{MDNSidebar}}</div>
+
+<p class="summary"><strong>Artikel-Schlagwörter</strong> sind ein wichtiges Hilfsmittel, es Besuchern zu ermöglichen, hilfreichen Inhalt zu finden. Jede Seite sollte im Normalfall mehrere Schlagwörter enthalten. Diese Seite erklärt die beste Art Seiten zu markieren, so dass Leser Informationen finden und wir selbst Ordnung bewahren können.</p>
+
+<p>Um zur Hilfe für die Oberfläche zur Bearbeitung von Schlagwörtern zu gelangen, rufen Sie bitte den Link <a href="/en-US/docs/MDN/Contribute/Editor/Basics#The_tags_box">tagging section</a> in unserem Editor-Handbuch auf.</p>
+
+<p>Bitte nutzen Sie die Schlagwörter sachgemäß, wie folgend beschrieben. Wenn Sie dies nicht tun, sind unsere automatischen Werkzeuge nicht in der Lage, Listen des Inhalts, der Einstiegsseiten und querverweisenden Artikel zu generieren.</p>
+
+<h2 id="Schlagwort-Verwendung_im_MDN">Schlagwort-Verwendung im MDN</h2>
+
+<p>Auf MDN werden Schlagwörter auf verschiedene Weisen verwendet.</p>
+
+<dl>
+ <dt>Dokument-Kategorisierung</dt>
+ <dd>Um welchen Dokumenten-Typ handelt es sich? Ist es eine Referenz? Ein Tutorial? Eine Eine Einstiegsseite zu einem Thema? Unsere Besucher können diese Schlagwörter verwenden, um Suchen zu filtern, deshalb sind sie sehr wichtig!</dd>
+ <dt>Topic-Identifizierung</dt>
+ <dd>Worum geht es in dem Artikel? Ist er über eine API? Das DOM? Grafik? Auch diese Schlagwörter sind sehr wichtig, weil sie als Suchfilter verwendet werden können.</dd>
+ <dt>API-Identifizierung</dt>
+ <dd>Referenzseiten über eine API müssen die spezifische Komponente der API, die auf Ihnen dokumentiert wird, bezeichnen (das heißt: zu welchem Interface sie gehört und welche Eigenschaft oder Methode sie umfasst, falls zutreffend).</dd>
+ <dt>Technologie-Status</dt>
+ <dd>Welchen Status hat die beschriebene Technologie? Entspricht sie einem Standard oder nicht? Wird sie nicht mehr verwendet oder ist veraltet? Ist sie experimentell?</dd>
+ <dt>Skill-Level</dt>
+ <dd>Für Tutorials und Anleitungen - Wie weit fortgeschritten ist das Material, das im Artikel behandelt wird?</dd>
+ <dt>Dokument-Metadaten</dt>
+ <dd>Die Autoren-Gemeinschaft verwendet Schlagwörter, um nachvollziehen zu können, welche Seiten welcher Art von Arbeit bedürfen.</dd>
+</dl>
+
+<h2 id="Handbuch_zu_Schlagwort-Typen">Handbuch zu Schlagwort-Typen</h2>
+
+<p>Hier ist eine Kurzanleitung zu den verschiedenen Schlagwort-Typen und ihre konkreten Werte.</p>
+
+<h3 id="Kategorie">Kategorie</h3>
+
+<p>Wenn Sie einen Artikel mit einem Schlagwörter aus diesen Kategorien versehen, unterstützen sie die automatischen Werkzeuge dabei, genauer Einstiegsseiten, Inhaltsverzeichnise usw. zu generieren.</p>
+
+<p>Wir verwenden die folgenden Kategorien als Standard-Schlagwörter:</p>
+
+<dl>
+ <dt><code>{{Tag("Intro")}}</code></dt>
+ <dd>Der Artikel stellt Einführungs-Material zu einem Thema zur Verfügung. Theoretisch sollte jeder Technologie-Bereich nur ein "Intro" haben.</dd>
+ <dt><code>{{Tag("Featured")}}</code></dt>
+ <dd>Dieser Artikel ist ein äußerst wichtiger Artikel, der mittels einer speziellen Methode auf erreichte Seiten hinweist. Bitte achten Sie auf eine äußerst sparsame Anwendung. Es sollten max. drei oder weniger in den Dokumentations-Bereichen existieren <em>(Dieses Schlagwort wird in der englischen Version dieser Seite nicht mehr beschrieben und ist möglicherweise nicht mehr aktuell)</em>.</dd>
+ <dt><code>{{Tag("Reference")}}</code></dt>
+ <dd>Der Artikel enthält Referenz-Material über ein API, ein Element, ein Attribut, ein Merkmal oder ähnliches.</dd>
+ <dt><code>{{Tag("Landing")}}</code></dt>
+ <dd>Diese Seite ist eine Einstiegsseite.</dd>
+ <dt><code>{{Tag("Guide")}}</code></dt>
+ <dd>Dieser Artikel ist eine Schritt-für-Schritt Anleitung oder ein Leitfaden.</dd>
+ <dt><code>{{Tag("Example")}}</code></dt>
+ <dd>Dieser Artikel ist eine reine Code-Beispielseite, oder enthält Code-Beispiele (das heißt, tatsächlich nützliche Code-Schnipsel, nicht einzeilige "Syntaxbeispiele").</dd>
+</dl>
+
+<h3 id="Themen">Themen</h3>
+
+<p>Durch die Angabe des Themenbereiches können Sie helfen, bessere Suchergebnisse zu erzeugen (und damit auch Einstiegsseiten und sonstige Navigations-Hilfen).</p>
+
+<p>Derzeit ist hier noch etwas Raum für Flexibilität, da wir noch neue Themenbereiche identifizieren. Wir versuchen allerdings, uns auf die Namen von APIs oder Technologien zu beschränken. Einige nützliche Bespiele:</p>
+
+<ul>
+ <li><code>{{Tag("HTML")}}</code></li>
+ <li><code>{{Tag("CSS")}}</code></li>
+ <li><code>{{Tag("JavaScript")}}</code> (Beachten Sie dabei den Großbuchstaben "S"!)</li>
+ <li><code>{{Tag("Document")}}</code></li>
+ <li><code>{{Tag("DOM")}}</code></li>
+ <li><code>{{Tag("API")}}</code> für jedes Interface, jede Methode und jede Eigenschaft..</li>
+ <li><code>{{Tag("Method")}}</code> für jede Methode einer API.</li>
+ <li><code>{{Tag("Property")}}</code> für jede Eigenschaft einer API.</li>
+ <li><code>{{Tag("Graphics")}}</code></li>
+ <li><code>{{Tag("SVG")}}</code></li>
+ <li><code>{{Tag("WebGL")}}</code></li>
+ <li><code>{{Tag("Tools")}}</code></li>
+ <li><code>{{Tag("Web")}}</code></li>
+ <li><code>{{Tag("Element")}}</code></li>
+ <li><code>{{Tag("Node")}}</code> <em>(Dieses Schlagwort wird in der englischen Version dieser Seite nicht mehr beschrieben und ist möglicherweise nicht mehr aktuell, s.u.) </em></li>
+ <li><code>{{Tag("Extensions")}}</code> und <code>{{Tag("WebExtensions")}}</code> für die WebExtension-Dokumentation</li>
+</ul>
+
+<p>Generell nützlich ist der Name eines Interfaces, wie auch weitere verwandte Seiten (wie z.B. bei <a href="/en-US/docs/Web/API/Node" title="/en-US/docs/Web/API/Node">Node</a>, das viele verwandte Seiten für seine verschiedenen Eigenschaften und Methoden hat), oder der Name des übergeordneten Technologie-Typs. Eine Seite über WebGL könnten Sie zum Beispiel mit den Schlagwörtern <code>Graphics</code> und <code>WebGL</code> versehen, aber eine Seite über {{HTMLElement("canvas")}} könnte mit <code>HTML</code>, <code>Element</code>, <code>Canvas</code>, und <code>Graphics</code> gekennzeichnet werden.</p>
+
+<h4 id="Mozilla-spezifische_Inhalte">Mozilla-spezifische Inhalte</h4>
+
+<p>Diese Schlagwörter werden nur für Mozilla-spezifische Inhalte verwendet:</p>
+
+<ul>
+ <li><code>{{Tag("Mozilla")}}</code></li>
+ <li><code>{{Tag("Firefox")}}</code></li>
+ <li><code>{{Tag("Firefox OS")}}</code></li>
+ <li><code>{{Tag("Gecko")}}</code></li>
+ <li><code>{{Tag("XUL")}}</code></li>
+ <li><code>{{Tag("XPCOM")}}</code></li>
+</ul>
+
+<h3 id="API-Identifikation">API-Identifikation</h3>
+
+<p>In der API-Referenz sollte aus jedem Artikel hervorgehen, welchen Teil der API er abdeckt:</p>
+
+<dl>
+ <dt><strong><code>{{Tag("Interface")}}</code></strong></dt>
+ <dd>Der Hauptartikel für ein Interface sollte dieses Schlagwort verwenden. Zum Beispiel: RTCPeerConnection.</dd>
+ <dt><code>{{Tag("Constructor")}}</code></dt>
+ <dd>Jedes Interface darf bis zu eine Seite haben, die mit "Constructor" gekennzeichnet ist. Dies ist der Konstruktor des Interface. Die Seite sollte den gleichen Namen haben wie das Interface, wie in RTCPeerConnection.RTCPeerConnection().</dd>
+ <dt><code>{{Tag("Property")}}</code></dt>
+ <dd>Jeder Artikel, der eine Eigenschaft von einem Interface beschreibt, benötigt dieses Schlagwort. Siehe zum Beispiel: RTCPeerConnection.connectionState().</dd>
+ <dt><code>{{Tag("Method")}}</code></dt>
+ <dd>Jeder Artikel, der eine Methode eines Interfaces dokumentiert, benötigt dieses Schlagwort. Siehe zum Beispiel: RTCPeerConnection.createOffer().</dd>
+</dl>
+
+<p>Weiterhin müssen Referenzseiten Interface, Eigenschaft und Methodennamen in ihrer Schlagwortliste enthalten. Einige Bespiele:</p>
+
+<dl>
+ <dt>Das Interface RTCPeerConnection</dt>
+ <dd>Fügen Sie die Schlagwörter <code>RTCPeerConnection</code> zusammen mit den anderen relevanten Schlagwörtern ( <code>Interface</code>, <code>WebRTC</code>, <code>WebRTC API</code>, <code>API</code>, <code>Reference</code>, usw.) hinzu.</dd>
+ <dt>Die Methode RTCPeerConnection.createOffer()</dt>
+ <dd>Fügen Sie die Schlagwörter <code>RTCPeerConnection</code> und <code>createOffer</code> (Beachten Sie hierbei: <em>keine</em> Klammern in Schlagwörtern!) zusammen mit den anderen relevanten Schlagwörtern hinzu, wie <code>Method</code>, <code>WebRTC</code>, <code>WebRTC API</code>, <code>API</code>, <code>Reference</code>, usw. Erwägen Sie auch die Verwendung von Schlagwörtern wie <code>Offer</code> und <code>SDP</code>, die hier auch relevant sind.</dd>
+ <dt>Die Eigenschaft RTCPeerConnection.iceConnectionState</dt>
+ <dd>Fügen Sie die Schlagwörter <code>RTCPeerConnection</code> und <code>iceConnectionState</code> zusammen mit anderen relevanten Schlagwörtern hinzu, wie <code>Property</code>, <code>WebRTC</code>, <code>WebRTC API</code>, <code>API</code> und <code>Reference</code>. Erwägen sie auch, <code>ICE</code> hinzuzufügen.</dd>
+</dl>
+
+<h3 id="Technologie-Status">Technologie-Status</h3>
+
+<p>Um dem Leser bei dem Verstehen, wie praktikabel eine Technologie ist, zu unterstützen, verwenden wir Schlagwörter, um Seiten mit dem Stand einer technischen Spezifikation zu markieren. Dies ist zwar nicht so detailliert, wie das erklären der Spezifikation und wie weit der Spezifikations-Prozess fortgeschritten ist (dafür gibt es die Spezifikations-Tabelle), aber es hilft dem Leser, mit einem kurzen Blick einzuschätzen, ob es eine gute Idee ist, die beschriebene Technologie zu verwenden.</p>
+
+<p>Hier sind mögliche Belegungen für diese Schlagwörter:</p>
+
+<dl>
+ <dt><code>{{Tag("Read-only")}}</code></dt>
+ <dd>Nutzen Sie dieses Schlagwort für Referenzseiten, die eine Eigenschaft oder ein Attribut beschreiben, das einen Nur-Lese-Status hat.</dd>
+ <dt><code>{{Tag("Non-standard")}}</code></dt>
+ <dd>Weist darauf hin, dass die auf der Seite beschriebene Technologie oder API nicht Teil eines Standards ist, unabhängig davon, ob es in den Browsern, die es implementieren, stabil funktioniert (wenn es nicht stabil sind, sollte die Seite mit Experimental gekennzeichnet werden). Wenn Sie dieses Schlagwort nicht verwenden, werden Ihre Leser davon ausgehen, dass die Technologie ein Standard ist. Die Kompatibilitäts-Tabelle auf der Seite sollte klarstellen, welche/-r Browser diese API oder Technologie unterstützen.</dd>
+ <dt><code>{{Tag("Deprecated")}}</code></dt>
+ <dd>Die Technologie oder die API auf der Seite ist in der Spezifikation als veraltet gekennzeichnet und es ist zu erwarten, dass sie irgendwann entfernt wird, jedoch ist sie im Allgemeinen in den aktuellen Versionen der Browser noch verfügbar.</dd>
+ <dt><code>{{Tag("Obsolete")}}</code></dt>
+ <dd>Die Technologie oder API gilt als veraltet und wurde aus allen, bzw. den meisten aktuellen Browsern entfernt (oder sie wird gerade aktiv entfernt).</dd>
+ <dt><code>{{Tag("Experimental")}}</code></dt>
+ <dd>Die Technologie ist nicht standardisiert und ist noch eine experimentelle Technologie oder API, die möglicherwiese zukünftig ein Standard werden könnte. Sie unterliegt zudem der stetigen Veränderungen in der Browserengine, die sie implementiert (typischerweise ist dies nur eine). Wenn die Technologie nicht Teil einer Spezifikation ist (auch, falls sie Teil eines Entwurfs derselben ist), so sollte sie außerdem das Schlagwort Non-standard bekommen.</dd>
+ <dt><code>{{Tag("Needs Privileges")}}</code></dt>
+ <dd>Die API benötigt privilegierten Zugriff zu dem Gerät, auf dem der Code läuft.</dd>
+ <dt><code>{{Tag("Certified Only")}}</code></dt>
+ <dd>Die API funktioniert ausschließlich mit zertifiziertem Code.</dd>
+</dl>
+
+<p>Die Verwendung dieser Schlagwörter ist kein Grund dafür, dass Sie die <a href="de/docs/MDN/Contribute/Structures/Kompatibilitaets_Tabellen" title="/en-US/docs/Project:Compatibility_tables">Kompatibilitätstabelle</a> in Ihrem Artikel weglassen können! Die sollte immer vorhanden sein.</p>
+
+<h3 id="Fertigkeitsstand">Fertigkeitsstand</h3>
+
+<p>Nutzen Sie die Fertigkeitsstand-Schlagwörter nur für Guides und Tutorials (also Seiten, die mit dem Schlagwort: <code>Guide</code> gekennzeichnet wurden). Sie sollen den Benutzern dabei helfen, basierend darauf, wie gut sie eine Technologie kennen, das richtige Tutorial auszuwählen. Hierfür gibt es drei Schlagwörter:</p>
+
+<dl>
+ <dt><code>{{Tag("Beginner")}}</code></dt>
+ <dd>Artikel für Anfänger mit dem Zweck der Einführung in eine Technologie, die sie noch nie angewendet haben bzw. mit der sie nur wenig vertraut sind.</dd>
+ <dt><code>{{Tag("Intermediate")}}</code></dt>
+ <dd>Artikel für Anwender, die zwar schon begonnen haben, die Technologie zu benutzen, jedoch keine Experten sind.</dd>
+ <dt><code>{{Tag("Advanced")}}</code></dt>
+ <dd>Artikel mit dem Ziel, die Fähigkeiten der Technologien und des Lesers vollständig auszuschöpfen.</dd>
+</dl>
+
+<h3 id="Dokument-Metadaten">Dokument-Metadaten</h3>
+
+<p>Die Autoren-Gemeinschaft verwendet Schlagwörter, um Artikel entsprechend der Art der Arbeit, die gemacht werden muss, zu kennzeichnen. Hier ist eine Liste der Schlagwörter, die wir am häufigsten dafür benutzen:</p>
+
+<dl>
+ <dt><code>{{Tag("Draft")}}</code></dt>
+ <dd>Der Artikel ist noch nicht vollständig und wird zumindest theoretisch noch aktiv überarbeitet (auch wenn es möglich ist, dass man ihn vergessen hat). Versuchen Sie, die letzten Beitragenden zu kontaktieren, bevor Sie Veränderungen vornehmen, um mögliche Inhaltskollisionen zu vermeiden.</dd>
+ <dt><strong><code>{{Tag("junk")}}</code></strong></dt>
+ <dd>Beitrag enthält wertloses Zeug - sollte entfernt werden <em>(Dieses Schlagwort wird in der englischen Version dieser Seite nicht mehr beschrieben und ist möglicherweise nicht mehr aktuell)</em>.</dd>
+ <dt><code>{{Tag("NeedsCompatTable")}}</code></dt>
+ <dd>Der Artikel benötigt eine Tabelle, welche die Kompatibilität eines Features mit verschiedenen Browsern aufzeigt. <a href="/de/docs/MDN/Contribute/Structures/Kompatibilitaets_Tabellen">Siehe hier</a> für die Anleitung zum Beitragen der Browser-Kompatiblität.</dd>
+ <dt><code>{{Tag("NeedsContent")}}</code></dt>
+ <dd>Der Artikel ist ein Kurzeintrag oder es fehlen auf eine andere Art und Weise Informationen. Das bedeutet, dass jemand den Inhalt überarbeiten, mehr Details hinzufügen und/oder den Artikel zu Ende schreiben sollte.</dd>
+ <dt><code>{{Tag("NeedsExample")}}</code></dt>
+ <dd>Der Artikel benötigt ein oder mehrere Beispiele, um den Inhalt zu illustrieren. Solche Beispiele sollten das <a href="/en-US/docs/Project:MDN/Contributing/How_to_help/Code_samples" title="/en-US/docs/Project:MDN/Contributing/How_to_help/Code_samples">live sample system</a> benutzen.</dd>
+ <dt><code>{{Tag("NeedsLiveSamples")}}</code></dt>
+ <dd>In diesem Artikel bit es ein oder mehrere Beispiele, die mittels <a href="/en-US/docs/Project:MDN/Contributing/How_to_help/Code_samples" title="/en-US/docs/Project:MDN/Contributing/How_to_help/Code_samples">live sample system</a> erneuert werden müssen.</dd>
+ <dt><code>{{Tag("NeedsSpecTable")}}</code></dt>
+ <dd>Der Artikel benötigt eine Tabelle, welche das bzw. die Dokument/-e enthält, in dem/denen das Feature definiert wurde.</dd>
+ <dt><code>{{Tag("NeedsUpdate")}}</code></dt>
+ <dd>Der Inhalt ist veraltet und muss aktualisiert werden.</dd>
+ <dt><code>{{Tag("l10n:exclude")}}</code></dt>
+ <dd>Der Inhalt ist es nicht wirklich wert, übersetzt zu werden und wird nicht auf Übersetzungs-Status-Seiten erscheinen.</dd>
+ <dt><code>{{Tag("l10n:priority")}}</code></dt>
+ <dd>Der Inhalt ist wichtig und sollte für MDN-Übersetzer als priorisiert markiert sein. Er wird in einer extra Prioritäts-Tabelle auf Lokalisierungs-Status-Seiten erscheinen.</dd>
+</dl>
+
+<h3 id="Web_Literacy_Map">Web Literacy Map</h3>
+
+<p><em>(Dieser Abschnitt ist in der Englischen Version dieser Seite nicht mehr vorhanden und möglicherweise nicht mehr aktuell)</em> Das <a href="https://webmaker.org" rel="external">WebMaker</a> Projekt, siehe <a href="https://webmaker.org/literacy" rel="external">Web Literacy Map</a>, hat eine Reihe von Schlagwörtern definiert, um die verschiedenen und empfohlenen Fähigkeiten zu definieren, die ein besseres Lesen, Schreiben und die Teilnahme am Web ermöglichen. Wir benutzen sie auf MDN, um unseren Anwendern die besten Resourcen zu finden, welche ihren Ansprüchen genügen:</p>
+
+<dl>
+ <dt>{{Tag("Navigation")}}</dt>
+ <dd>Der Beitrag liefert Informationen darüber wie man das Web durchsuchen kann.</dd>
+ <dt>{{Tag("WebMechanics")}}</dt>
+ <dd>Der Beitrag liefert Informationen darüber wie das Web organisiert ist und wie es funktioniert.</dd>
+ <dt>{{Tag("Search")}}</dt>
+ <dd>Der Beitrag zeigt die Möglichkeiten auf, wo Informationen, Personen und Resourcen mittels des des Webs zu finden sind.</dd>
+ <dt>{{Tag("Credibility")}}</dt>
+ <dd>Der Artikel liefert Informationen darüber wie kritisch zu bewertende Informationen sind, die auf dem Web gefunden wurden.</dd>
+ <dt>{{Tag("Security")}}</dt>
+ <dd>Der Artikel liefert Informationen wie man Systeme, Identitäten und Inhalt sicher aufbewahrt.</dd>
+ <dt>{{Tag("Composing")}}</dt>
+ <dd>Der Artikel liefert Informationen wie Inhalt für das Web kreiert und sichert.</dd>
+ <dt>{{Tag("Remixing")}}</dt>
+ <dd>Der Artikel liefert Informationen wie man existierende Web-Resourcen nutzt, um neue Inhalte zu erstellen.</dd>
+ <dt>{{Tag("DesignAccessibility")}}</dt>
+ <dd>Der Artikel liefert Informationen darüber, wie eine effektive und universelle Kommunikation mittels Nutzung der Web-Resourcen zustande gebracht werden kann.</dd>
+ <dt>{{Tag("CodingScripting")}}</dt>
+ <dd>Der Artikel liefert Informationen wie interaktive Kodierung und/oderErfahrungen auf dem Web erstellt werden können.</dd>
+ <dt>{{Tag("infrastructure")}}</dt>
+ <dd>Der Artikel liefert Informationen, die das Verständnis der Internet-Technik aufzeigen.</dd>
+ <dt>{{Tag("Sharing")}}</dt>
+ <dd>Der Artikel zeigt auf, wie man zusammen mit anderen Teilnehmern Resourcen kreiert.</dd>
+ <dt>{{Tag("Collaborating")}}</dt>
+ <dd>Der Artikel liefert Informationen wie man mit an deren zusammenarbeiten kann.</dd>
+ <dt>{{Tag("Community")}}</dt>
+ <dd>Der Artikel liefert Informationen wie man in Web-Communities eingebunden werden kann und zeigt deren Praktiken auf.</dd>
+ <dt>{{Tag("Privacy")}}</dt>
+ <dd>Der Artikel liefert Informationen über Konsequenzen, wenn Daten online ausgetauscht werden.</dd>
+ <dt>{{Tag("OpenPracticies")}}</dt>
+ <dd>Der Artikel liefert Informationen wie geholfen werden kann, das Web universell zugänglich zu machen.</dd>
+</dl>
+
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+
+<p>Für jede Seite fügen Sie nun verscheidene Schlagwort-Typen hinzu, zum Beispiel:</p>
+
+<dl>
+ <dt>Eine Anleitung über WebGL für Anfänger:</dt>
+ <dd>{{Tag("WebGL")}}, {{Tag("Graphics")}}, {{Tag("Guide")}}, {{Tag("Beginner")}}</dd>
+ <dt>Referenz-Seite für das {{HTMLElement("canvas")}} Element</dt>
+ <dd>{{Tag("Canvas")}}, {{Tag("HTML")}}, {{Tag("Element")}}, {{Tag("Graphics")}}, {{Tag("Reference")}}</dd>
+ <dt>Seite für Firefox OS Entwickler-Werkzeuge</dt>
+ <dd>{{Tag("Tools")}}, {{Tag("Firefox OS")}}, {{Tag("Landing")}}</dd>
+</dl>
+
+<h2 id="Schlagwörter_und_Suchfilter">Schlagwörter und Suchfilter</h2>
+
+<p>Suchfilter funktionieren nicht richtig, außer wir verwenden die Schlagwörter der MDN-Seiten korrekt. Hier ist eine Tabelle mit Suchfiltern und den Schlagwörtern, die sie benutzen. <em>(Diese Tabelle ist möglicherweise nicht aktuell, siehe auch <a href="en-US/docs/MDN/Contribute/Howto/Tag#Tagging_and_search_filters">englische Version</a>)</em></p>
+
+<div class="note">
+<p><strong>Note:</strong> Falls mehrere Tags unter "Tag Name" gelistet sind, bedeutet das, dass einer oder mehrere dieser Tags benötigt werden, damit der Artikel gefunden wird.</p>
+</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Filter-Gruppe</th>
+   <th scope="col">Suchfilter Name</th>
+   <th scope="col">Schlagwörter</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th>Topic</th>
+   <td>Open Web Apps</td>
+   <td>{{Tag("Apps")}}</td>
+  </tr>
+  <tr>
+   <th></th>
+   <td>HTML</td>
+   <td>{{Tag("HTML")}}</td>
+  </tr>
+  <tr>
+   <th></th>
+   <td>CSS</td>
+   <td>{{Tag("CSS")}}</td>
+  </tr>
+  <tr>
+   <th></th>
+   <td>JavaScript</td>
+   <td>{{Tag("JavaScript")}}</td>
+  </tr>
+  <tr>
+   <th></th>
+   <td>APIs and DOM</td>
+   <td>{{Tag("API")}}</td>
+  </tr>
+  <tr>
+   <th></th>
+   <td>Canvas</td>
+   <td>{{Tag("Canvas")}}</td>
+  </tr>
+  <tr>
+   <th></th>
+   <td>SVG</td>
+   <td>{{Tag("SVG")}}</td>
+  </tr>
+  <tr>
+   <th></th>
+   <td>MathML</td>
+   <td>{{Tag("MathML")}}</td>
+  </tr>
+  <tr>
+   <th></th>
+   <td>WebGL</td>
+   <td>{{Tag("WebGL")}}</td>
+  </tr>
+  <tr>
+   <th></th>
+   <td>XUL</td>
+   <td>{{Tag("XUL")}}</td>
+  </tr>
+  <tr>
+   <th></th>
+   <td>Marketplace</td>
+   <td>{{Tag("Marketplace")}}</td>
+  </tr>
+  <tr>
+   <th></th>
+   <td>Firefox</td>
+   <td>{{Tag("Firefox")}}</td>
+  </tr>
+  <tr>
+   <th></th>
+   <td>Firefox for Android</td>
+   <td>{{Tag("Firefox Mobile")}}</td>
+  </tr>
+  <tr>
+   <th></th>
+   <td>Firefox for Desktop</td>
+   <td>{{Tag("Firefox Desktop")}}</td>
+  </tr>
+  <tr>
+   <th></th>
+   <td>Firefox OS</td>
+   <td>{{Tag("Firefox OS")}}</td>
+  </tr>
+  <tr>
+   <th></th>
+   <td>Mobile</td>
+   <td>{{Tag("Mobile")}}</td>
+  </tr>
+  <tr>
+   <th></th>
+   <td>Web Development</td>
+   <td>{{Tag("Web Development")}}</td>
+  </tr>
+  <tr>
+   <th></th>
+   <td>Add-ons &amp; Extensions</td>
+   <td>{{Tag("Add-ons ")}}|| {{Tag("Extensions")}} || {{Tag("Plugins")}} || {{Tag("Themes")}}</td>
+  </tr>
+  <tr>
+   <th></th>
+   <td>Games</td>
+   <td>{{Tag("Games")}}</td>
+  </tr>
+  <tr>
+   <th>Skill level</th>
+   <td>I'm an Expert</td>
+   <td>{{Tag("Advanced")}}</td>
+  </tr>
+  <tr>
+   <th></th>
+   <td>Intermediate</td>
+   <td>{{Tag("Intermediate")}}</td>
+  </tr>
+  <tr>
+   <th></th>
+   <td>I'm Learning</td>
+   <td>{{Tag("Beginner")}}</td>
+  </tr>
+  <tr>
+   <th>Document type</th>
+   <td>Docs</td>
+   <td><em>This will restrict the search to docs content, leaving out Hacks and other MDN content.</em></td>
+  </tr>
+  <tr>
+   <th></th>
+   <td>Demos</td>
+   <td><em>This will include Demo Studio content in the search results.</em></td>
+  </tr>
+  <tr>
+   <th></th>
+   <td>Tools</td>
+   <td>{{Tag("Tools")}}</td>
+  </tr>
+  <tr>
+   <th></th>
+   <td>Code Samples</td>
+   <td>{{Tag("Example")}}</td>
+  </tr>
+  <tr>
+   <th></th>
+   <td>How-To &amp; Tutorial</td>
+   <td>{{Tag("Guide")}}</td>
+  </tr>
+  <tr>
+   <th></th>
+   <td>Developer Profiles</td>
+   <td><em>This will include developer profiles from the MDN site in the search results.</em></td>
+  </tr>
+  <tr>
+   <th></th>
+   <td>External Resources</td>
+   <td><em>This is something the dev team will need to figure out.</em></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Schlagwörter-Probleme_die_Sie_beheben_können">Schlagwörter-Probleme, die Sie beheben können</h2>
+
+<p>Es gibt verschiene Typen von Problemen mit Schlagwörtern, die Sie beheben können.</p>
+
+<dl>
+ <dt>Keine Schlagwörter</dt>
+ <dd>im Allgemeinen sollten alle Artikel <em>mindestens</em> mit einem <a href="/en-US/docs/Project:MDN/Contributing/Tagging_standards#Category" title="/en-US/docs/Project:MDN/Contributing/Tagging_standards#Categories">category </a>und einem <a href="/en-US/docs/Project:MDN/Contributing/Tagging_standards#Topic" title="/en-US/docs/Project:MDN/Contributing/Tagging_standards#Topic">topic </a>Schlagwort versehen sein. Meistens sind auch andere Schlagwörter sinnvoll, aber wenn Sie uns helfen können, diese minimale Kennzeichnung mit Schlagwörtern auf allen Seiten sicherzustellen, sind sie ein Dokumentationsheld!</dd>
+ <dt>Schlagwörter, die nicht unseren Schlagwort-Standards entsprechen</dt>
+ <dd>Bitte beseitigen sie in alle Probleme auf Seiten, deren Schlagwörter nicht den Standars auf dieser Seite folgen. Beachten Sie, dass Sie gelegentlich einige lokalisierte Schlagwörter auf Englischen Seiten sehen werden (wie <code>Référence</code>). Dies ist aufgrund eines <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=776048">Bugs in Kuma</a> passiert, was dazu führte, das einige Schlagwörter wieder auftauchten, auch wenn sie bereits gelöscht waren. Dieser Bug wurde <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=776048#c37">seitdem behoben</a>, sodass sämtliche verbliebene lokalisierte Schlagwörter (auf den englischen Seiten) bereinigt werden können, wenn sie gesichtet werden.</dd>
+ <dt>Falsch verwendete Schlagwörter</dt>
+ <dd>Wenn Sie sich einen Artikel über HTML ansehen, der mit dem Schlagwort "JavaScript" versehen ist, dann ist das wahrscheinlich falsch! Genauso ist es, wenn ein Artikel Mozilla-interne Dinge beschreibt, aber mit einem "Web" Schlagwort versehen ist. Das ist vermutlich auch falsch. Entfernen Sie diese Schlagwörter und fügen Sie die richtigen hinzu, falls sie noch nicht vorhanden sind. Bitte korrigieren Sie auch falsch geschriebene Schlagwörter (z.B. würde "Javascript" immer noch funktionieren, da Schlagwörter keine Groß- und Kleinschreibung berücksichtigen, aber lassen Sie uns nicht nachlässig sein!).</dd>
+ <dt>Fehlende Schlagwörter</dt>
+ <dd>Wenn ein Artikel ein paar, aber noch nicht alle Schlagwörter hat, die er benötigt, fügen Sie ruhig mehr hinzu. Zum Beispiel, wenn eine JavaScript-Referenzseite (korrekterweise) mit dem Schlagwort JavaScript versehen ist, aber keinem sonst, fügen Sie gerne das Schlagwort "Reference" oder einen anderes, passendes Kategorie-Schlagwort hinzu!</dd>
+ <dt>Schlagwort-Spam</dt>
+ <dd>Dieses heimtückische Biest ist das abstoßendste aller Schlagwort-Probleme: irgendein Web-Ungeziefer hat seine Häufchen in den Schlagwörtern hinterlassen (wie zum Beispiel "Free warez!" oder "Hey ich war auf deiner Seite unterwegs und wollte fragen ob du mir helfen kannst mein Flashplayer stürzt dauernd ab"). Wir müssen solche Schlagwörter sofort löschen! Sie sind unschön, es wird schwer, sie loszuwerden, wenn wir sie zu lange rumlungern lassen und sie sind schrecklich für {{Glossary("SEO")}}.</dd>
+</dl>
+
+<p>Wenn Sie eines (oder mehrere) dieser Probleme bemerken, <a href="https://developer.mozilla.org/en-US/docs/Project:MDN/Contributing/Getting_started#Logging_into_MDN">melden Sie sich bei MDN an</a> und klicken Sie auf "Bearbeiten" oben rechts am MDN-Fenster. Nachdem der Editor geladen ist, scrollen Sie nach unten zum Ende der Seite. Dort finden Sie die Schlagwort-Box. Für mehr Details zur Schlagwort-Oberfläche besuchen Sie bitte "<a href="https://developer.mozilla.org/de/docs/MDN/Contribute/Editoren_Anleitung/Basics#The_tags_box">The tags box</a>" im <a href="/de/docs/MDN/Contribute/Editoren_Anleitung">MDN-Editor-Leitfaden</a>.</p>
diff --git a/files/de/mdn/contribute/index.html b/files/de/mdn/contribute/index.html
new file mode 100644
index 0000000000..9859a888b0
--- /dev/null
+++ b/files/de/mdn/contribute/index.html
@@ -0,0 +1,91 @@
+---
+title: Beitragen zu MDN
+slug: MDN/Contribute
+tags:
+  - Anleitung
+  - Dokumentation
+  - Einstieg
+  - MDC Projekt
+  - MDN
+translation_of: MDN/Contribute
+---
+<div>{{MDNSidebar}}</div><p>Willkommen! Durch das Betreten dieser Seite haben Sie bereits den ersten Schritt getan, um bei MDN mitzuwirken. Hier finden Sie Anleitungen zu allen Möglichkeiten des Mitwirkens bei MDN, wie etwa Style Guides, Leitfäden zur Benutzung unseres Editors und verschiedener Tools und vieles mehr.</p>
+<div class="row topicpage-table">
+ <div class="section">
+  <h2 id="Leitfäden_für_Helfer">Leitfäden für Helfer</h2>
+  <dl>
+   <dt>
+    <a href="/de/docs/MDN/Erste_Schritte">Erste Schritte</a></dt>
+   <dd>
+    Eine Kurzanleitung für Ihren ersten Beitrag.</dd>
+   <dt>
+    <a href="/de/docs/MDN/Contribute/Style_guide">Leitfaden für Inhalte und Styles</a></dt>
+   <dd>
+    Im Leitfaden für Inhalte und Styles auf MDN erfahren Sie Details zu Schreibstil, Seitenlayout und Styles von Inhalten, so dass die von Ihnen verfassten Inhalte zu den restlichen Inhalten auf MDN passen.</dd>
+   <dt>
+    <a href="/de/docs/MDN/Contribute/Editor">Autoren Anleitung</a></dt>
+   <dd>
+    Eine vollständige Anleitung zur Verwendung des Editors von MDN.</dd>
+   <dt>
+    <a href="/de/docs/MDN/Contribute/Reviewing_articles">Artikel überprüfen</a></dt>
+   <dd>
+    <span id="result_box" lang="de"><span class="hps">Ein Leitfaden zur</span> <span class="hps">Durchführung von</span> <span class="hps">technischen und redaktionellen</span> Überprüfungen <span class="hps">des</span> <span class="hps">Inhalts der Beiträge. So </span><span class="hps">helfen Sie</span> <span class="hps">sicherzustellen, dass alle</span> <span class="hps">Inhalte auf</span> <span class="hps">MDN</span> <span class="hps">so nützlich und</span> <span class="hps">lesbar</span> <span class="hps">wie möglich sind!</span></span></dd>
+   <dt>
+    <a href="/de/docs/MDN/Contribute/Conventions">Terminologie und Konventionen</a></dt>
+   <dd>
+    Unser Handbuch über Terminologie und Konventionen stellt Informationen bereit, die Ihnen helfen, das korrekte Fachvokabular in Ihren Beiträgen zu verwenden.</dd>
+   <dt>
+    <a href="/de/docs/MDN/Contribute/Community">Mit der MDN Community zusammenarbeiten</a></dt>
+   <dd>
+    Ein Leitfaden zur Zusammenarbeit mit unserer Community, zum Auffinden von Hilfe und wie man mit den Leuten Kontakt aufnimmt, die Antworten auf die Fragen haben, die während Ihren Beiträgen zu MDN auftauchen.</dd>
+   <dt>
+    <a href="/de/docs/MDN/Contribute/FAQ">Häufig gestellte Fragen</a></dt>
+   <dd>
+    Tipps und Antworten zu den häufigsten Fragen über Beiträge zu MDN.</dd>
+  </dl>
+  <dl>
+   <dt>
+    <a href="/de/docs/MDN/Kuma/Contributing">Zu Kuma beitragen</a></dt>
+   <dd>
+    Eine Anleitung zu Beiträgen zum Kuma Projekt. Kuma ist der Name der Plattform, welche die MDN Webseiten unterstützt.</dd>
+  </dl>
+ </div>
+ <div class="section">
+  <h2 id="How_to...">How to...</h2>
+  <p>Unsere <a href="/de/docs/MDN/Contribute/Howto">how-to Leitfäden</a> stellen Schritt-für-Schritt-Anleitungen bereit, die Ihnen bei der Bewältigung spezieller Aufgaben während des Verfassens von Beiträgen für MDN behilflich sind.</p>
+  <dl>
+   <dt>
+    <a href="/de/docs/MDN/Contribute/Howto/Document_a_CSS_property">Wie man eine CSS Eigenschaft dokumentiert</a></dt>
+   <dd>
+    Eine Anleitung zum Dokumentieren von CSS Eigenschaften. Alle Dokumente über CSS Eigenschaften sollten dem in diesem Artikel beschriebenen Stil und Layout entsprechen.</dd>
+   <dt>
+    Wie man ein HTML Element dokumentiert</dt>
+   <dd>
+    Diese Anleitung zur Dokumentation von HTML Elementen gewährleistet, dass von Ihnen verfasste Dokumente zu anderen auf MDN passen.</dd>
+   <dt>
+    <a href="/de/docs/MDN/Contribute/Howto/Tag">Wie man Seiten richtig mit Schlagwörtern auszeichnet</a></dt>
+   <dd>
+    Diese Anleitung zur Verschlagwortung von Seiten informiert über unsere Standards bezüglich Schlagwörtern (Tags), einschließlich Listen mit Tags, die eine Standardbedeutung auf MDN haben. Indem Sie dieser Anleitung folgen wird gewährleistet, dass Ihre Inhalte korrekt kategorisiert und leichter durchsuchbar sind und dass unser Suchfiltermechanismus mit Ihren Artikeln richtig funktioniert.</dd>
+   <dt>
+    <a href="/de/docs/MDN/Contribute/Howto/Interpret_specifications">Wie man Spezifikationen deutet</a></dt>
+   <dd>
+    Diese Anleitung hilft Ihnen, Standard-Web-Spezifikationen richtig zu verstehen. In der Lage zu sein, diese zu lesen, kann eine Kunst sein, und zu wissen, wie es geht, wird Ihnen helfen, bessere Dokumentationen zu schreiben.</dd>
+  </dl>
+  <h2 id="Lokalisierung">Lokalisierung</h2>
+  <dl>
+   <dt>
+    <a href="/de/docs/MDN/Contribute/Localize/Tour">Führung zur Lokalisierung</a></dt>
+   <dd>
+    Während dieser Führung lernen Sie, wie Sie Inhalte auf MDN lokalisieren.</dd>
+   <dt>
+    <a href="/de/docs/MDN/Contribute/Localize/Guide">Leitfaden zur Lokalisierung</a></dt>
+   <dd>
+    Diese Anleitung<span id="result_box" lang="de"><span class="hps"> bietet</span> detaillierte <span class="hps">Informationen über den</span> <span class="hps">Lokalisierungsprozess</span> <span class="hps">für</span> Inhalte auf <span class="hps">MDN</span><span>.</span></span></dd>
+   <dt>
+    <a href="/de/docs/MDN/Contribute/Localize/Localization_projects">Lokalisierungsprojekte</a></dt>
+   <dd>
+    Finden Sie das Lokalisierungsprojekt für Ihre Sprache—oder, wenn es noch keines gibt, erfahren Sie, wie man ein neues startet!</dd>
+  </dl>
+ </div>
+</div>
+<p> </p>
diff --git a/files/de/mdn/contribute/localize/index.html b/files/de/mdn/contribute/localize/index.html
new file mode 100644
index 0000000000..dcb1fcc13e
--- /dev/null
+++ b/files/de/mdn/contribute/localize/index.html
@@ -0,0 +1,29 @@
+---
+title: Lokalisieren von MDN
+slug: MDN/Contribute/Localize
+tags:
+  - Documentation
+  - Localization
+  - MDN
+  - NeedsTranslation
+  - TopicStub
+translation_of: MDN/Contribute/Localize
+---
+<div>{{MDNSidebar}}</div><p>MDN wird von Menschen auf der ganzen Welt als Referenz und Anleitung für Web Technologien, wie auch für Internas von Firefox selbst, genutzt. Unsere Lokalisierungsgemeinschaften sind ein wichtiger Teil des Mozilla Projekts. Ihre Übersetzungs- und Lokalisierungsarbeit hilft Menschen auf der ganzen Welt, um für das offene Web zu entwickeln. Wenn Sie mehr über unsere Lokalisierungsteams erfahren möchten, einem Team beitreten oder sogar eine neue Lokalisierung beginnen möchten, ist dies der Ort, um damit zu beginnen.</p>
+<p>{{LandingPageListSubpages}}</p>
+<h2 id="Lokalisierungstools">Lokalisierungstools</h2>
+<p>Es gibt einige nützliche Tools, die Sie bei Ihrer Übersetzungsarbeit nutzen werden:</p>
+<dl>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Localization/Localizing_with_Verbatim" title="/en-US/docs/Mozilla/Localization/Localizing_with_Verbatim">Verbatim</a></dt>
+ <dd>
+  Wird für die Übersetzung von Zeichenketten über verschiedene Mozilla Projekte hinweg genutzt, einschließlich der MDN Benutzeroberfläche (sowie der Firefox Benutzeroberfläche).</dd>
+ <dt>
+  <a href="http://transvision.mozfr.org/" title="http://transvision.mozfr.org/">Transvision</a></dt>
+ <dd>
+  Ein Werkzeug von Mozilla France, das Sie nach einer englischen Zeichenkette suchen lässt und als Ergebnis die verschiedenen Übersetzungen einer Sprache dazu liefert, die im gesamten Mozilla Code verwendet werden. Dieses Werkzeug eignet sich, um die bevorzugte Übersetzung eines Wortes oder eines Satzes zu finden.</dd>
+</dl>
+<h2 id="Siehe">Siehe</h2>
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Localization" title="/en-US/docs/Mozilla/Localization">Localization at Mozilla</a></li>
+</ul>
diff --git a/files/de/mdn/contribute/localize/translating_pages/index.html b/files/de/mdn/contribute/localize/translating_pages/index.html
new file mode 100644
index 0000000000..796212f0ac
--- /dev/null
+++ b/files/de/mdn/contribute/localize/translating_pages/index.html
@@ -0,0 +1,58 @@
+---
+title: MDN Seiten übersetzen
+slug: MDN/Contribute/Localize/Translating_pages
+tags:
+  - Anfänger
+  - Beginner
+  - Guide
+  - Lokalisation
+  - MDN
+  - Seite Übersetzen
+  - Übersetzung
+  - übersetzen
+translation_of: MDN/Contribute/Localize/Translating_pages
+---
+<div>{{MDNSidebar}}</div>
+
+<p>Dieser Artikel ist eine grundlegende Anleitung für die Übersetzung von Inhalten auf MDN. Er beinhaltet sowohl die Grundlagen für Übersetzungsarbeit als auch Tipps für den richtigen Umgang mit den verschiedenen Arten von Inhalten.</p>
+
+<h2 id="Eine_neue_Übersetzung_einer_Seite_starten">Eine neue Übersetzung einer Seite starten</h2>
+
+<p>Befolgen Sie diese Schritte, wenn Sie eine Seite in Ihre Sprache übersetzen möchten:</p>
+
+<ol>
+ <li>Klicken Sie auf das Sprachen-Symbol ({{FontAwesomeIcon("icon-language")}}), um das <strong>Sprachen</strong>-Menü zu öffnen und wählen Sie <strong>Übersetzung hinzufügen</strong>. Daraufhin erscheint die Auswahlseite der verfügbaren Sprachen.</li>
+ <li>Wählen Sie die Sprache, in die Sie die Seite übersetzen möchten. Anschließend öffnet sich ein Editor, auf dessen linker Hälfte die originale Seite, auf der rechten die Vorschau der übersetzten Seite zu sehen ist.</li>
+ <li>Unter <strong>Beschreibung übersetzen</strong> können Sie den Titel und optional den Adressnamen (Slug) in die Zielsprache übersetzen. Der Adressname ist der letzte Teil der URL einer Seite (zum Beispiel: "Translating_pages" für diesen Artikel.) Manche Sprachcommunities übersetzen den Adressnamen nicht und übernehmen den Englischen. Vergleichen Sie dazu am besten andere Artikel in Ihrer Sprache, um die gängige Praxis zu ermitteln. Um mehr Platz für den Abschnitt <strong>Übersetzung in Deutsch</strong> zu erhalten, können Sie auf das Minus-Zeichen neben dem Abschnitt <strong>Beschreibung übersetzen</strong> klicken und ihn so ausblenden.</li>
+ <li>Übersetzen Sie den Inhalt der Seite unter <strong>Übersetzung in Deutsch</strong>.</li>
+ <li>Tragen Sie mindestens ein <strong>Schlagwort</strong> für die Seite ein.</li>
+ <li>Drücken Sie<strong> Änderungen speichern</strong> wenn Sie fertig sind.</li>
+</ol>
+
+<div class="note"><strong>Hinweis:</strong> Die Benutzeroberfläche der "Artikel übersetzen"-Ansicht wird anfangs in Englisch angezeigt. Bei nachfolgenden Bearbeitungen eines bestimmten Artikels im Editor wird die Benutzeroberfläche in der jeweils passenden Sprache angezeigt, falls eine Lokalisierung für MDN in dieser Sprache verfügbar ist. Die MDN Benutzeroberfläche kann mit <a href="https://localize.mozilla.org/projects/mdn/" title="https://localize.mozilla.org/projects/mdn/">Pontoon</a> lokalisiert werden. Konsultieren Sie dazu <a href="/en-US/docs/Mozilla/Localization/Localizing_with_Verbatim" title="/en-US/docs/Mozilla/Localization/Localizing_with_Verbatim">Lokalisierung mit Pontoon</a> für Details zu dessen Benutzung.</div>
+
+<h2 id="Eine_übersetzte_Seite_bearbeiten">Eine übersetzte Seite bearbeiten</h2>
+
+<ul>
+ <li>Drücken Sie auf einer übersetzten Seite den <strong>Bearbeiten</strong> Knopf (mitunter auch englisch: <strong>Edit</strong>). Die <strong>Artikel-Übersetzen</strong>-Ansicht öffnet sich.</li>
+</ul>
+
+<p>Wenn die englische Version seit der letzten Aktualisierung der Übersetzung verändert wurde, wird in der Artikel-Übersetzen-Ansicht die Quellebene "diff" mit den Änderungen der englischen Version angezeigt. Dies hilft Ihnen, Aktualisierungen schneller durchzuführen.</p>
+
+<h2 id="Schlagwort-Übersetzungen">Schlagwort-Übersetzungen</h2>
+
+<p>Es ist wichtig, dass jede Seite mit mindestens einem Schlagwort getaggt wird, auch wenn es sich um eine Übersetzung handelt.</p>
+
+<p>Manche Tags werden von Suchfiltern oder als Konventionen zwischen Beitragserstellern benutzt. Diese Schlagwörter sollten nicht übersetzt werden. Lesen Sie hierzu die <a href="/en-US/docs/Project:MDN/Contributing/Tagging_standards">Tagging Standards</a>, um diese Schlagwörter zu erkennen.<br>
+ Sie dürfen gern übersetzte Schlagwörter erstellen, um Inhalte zu gruppieren, wenn sie nicht von einem Standard-Schlagwort abgedeckt werden.</p>
+
+<h2 id="Tipps_für_neue_Übersetzer">Tipps für neue Übersetzer</h2>
+
+<p>Sie sind neu bei der Lokalisierung auf MDN? Dann sind hier ein paar Ratschläge:</p>
+
+<ul>
+ <li>Artikel im <a href="/de/docs/Glossary">Glossar</a> eignen sich hervorragend für Einsteiger, weil sie einfach und kurz sind.</li>
+ <li>Artikel mit dem Schlagwort <a href="/en-US/docs/tag/l10n:priority">"l10n:priority"</a> werden beim Übersetzen mit einer hohen Priorität berücksichtigt.</li>
+ <li>Wenn Text in doppelten geschweiften Klammern steht, wie beispielsweise <code>\{{some-text("more text")}}</code>, dann lassen Sie diesen unübersetzt, und ändern Sie die Satzzeichen nicht. Dies sind <a href="/en-US/docs/MDN/Contribute/Structures/Macros">Makros</a>, die Strukturen auf der Seite erstellen oder andere nützliche Funktionen übernehmen. Es kann sein, dass das Makro unübersetzten Text erzeugt, machen Sie sich darüber aber keine Gedanken, bis Sie mehr Erfahrung mit MDN gewonnen haben (das Bearbeiten dieses Textes erfordert <a href="/en-US/docs/MDN/Contribute/Tools/Template_editing">spezielle Privilegien</a>, weil Makros sehr mächtige Werkzeuge sein können). Wenn Sie neugierig sind, werfen Sie doch einen Blick auf die <a href="/en-US/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros">häufig verwendeten Makros</a>, um die Möglichkeiten der Makros zu verstehen.</li>
+ <li>Schauen Sie auf die <a href="/en-US/docs/MDN/Contribute/Localize/Localization_projects">Lokalisations-Projektseite</a>, um mehr über die Lokalisierung in Ihrer Sprache zu erfahren.</li>
+</ul>
diff --git a/files/de/mdn/contribute/zu_tun_im_mdn/index.html b/files/de/mdn/contribute/zu_tun_im_mdn/index.html
new file mode 100644
index 0000000000..9eeff3ffd6
--- /dev/null
+++ b/files/de/mdn/contribute/zu_tun_im_mdn/index.html
@@ -0,0 +1,27 @@
+---
+title: Was alles im MDN zu tun ist
+slug: MDN/Contribute/zu_tun_im_MDN
+tags:
+  - Anleitung
+  - Guide
+  - MDN
+translation_of: MDN/Contribute/Getting_started
+---
+<div>{{MDNSidebar}}</div><p>Du willst das MDN besser machen? Es gibt viele Wege, wie du helfen kannst: du kannst Tippfehler verbessern, neue Inhalte verfassen, du kannst sogar die <a href="/en-US/docs/Project:MDN/Kuma">Kuma</a> Plattform verbessern, auf welcher diese Seite aufbaut. Der Artikel "<a href="https://developer.mozilla.org/de/docs/MDN/Contribute">Beitragen zu MDN</a>" deckt alle Möglichkeiten ab, wobei und wie du uns helfen könntest. Unten findest du eine etwas spezifischere Liste an Aufgaben die erledigt werden müssen.</p>
+
+<p>Es gibt viele Möglichkeiten für dich zu helfen. Hier ist eine Liste mit den verschiedenen Dingen, die noch getan werden müssen:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/de/docs/MDN/Contribute/Reviewing_articles">Inhalte auf Richtigkeit prüfen</a> (technisch oder redaktionell)</li>
+ <li><a href="https://developer.mozilla.org/de/docs/MDN/Contribute/Howto/Tag">Tags zu Artikeln hinzufügen</a> um die Suchergebnisse und Inhaltslisten zu verbessern</li>
+ <li><a href="/en-US/docs/MDN/User_guide/Writing#Adding_a_new_page">Neue Artikel schreiben</a></li>
+ <li><a href="/en-US/docs/MDN/User_guide/Writing#Editing_an_existing_page">Bestehende Articles verbessern</a> und mit neuen Informationen füllen oder Fehler ausbessern</li>
+ <li><a href="/en-US/docs/MDN/Contribute/Howto/Convert_code_samples_to_be_live">Bestehende Codebeispiele konvertieren</a> damit diese vom Livesystem profitieren können</li>
+ <li><a href="/en-US/docs/MDN/Contribute/Editor/Live_samples">Füge neue Live-Code Beispiele hinzu</a> damit Andere den Code in Aktion sehen können</li>
+ <li><a href="/en-US/docs/MDN/Plans">Sieh dir die nächsten großen Dokumentierungsprojekte an</a></li>
+ <li><a href="/en-US/docs/Project:MDN/Kuma/Contributing">Hilf mit die Kuma Plattform zu entwickeln, auf der das MDN läuft</a></li>
+</ul>
+
+<p>Für mehr Ideen wie du helfen kannst, sieh dir unsere <a href="/de/docs/MDN/Contribute/Howto">How-to Leitfäden</a> an. Du kannst auf <a href="/de/docs/MDN/Doc_status/Overview">dieser Seite</a> kategorisierte Listen von Seiten finden, die deine Hilfe benötigen.</p>
+
+<p>Zusätzlich kannst du eine Liste mit großen Projekten die demnächst gestartet werden auf dem <a href="https://trello.com/b/HAhl54zz/status">Trello Board</a> vom MDN Team finden. Dieses Board zeigt dir sowohl woran die MDN Autoren gerade arbeiten, als auch Projekte an denen vermutlich demnächst angefangen wird zu arbeiten. <a href="/en-US/docs/MDN/Contribute/Community/Trello">Dieser Artikel</a> zeigt dir wie du dieses Board nutzen kannst.</p>
diff --git a/files/de/mdn/guidelines/index.html b/files/de/mdn/guidelines/index.html
new file mode 100644
index 0000000000..cbf0c6aa77
--- /dev/null
+++ b/files/de/mdn/guidelines/index.html
@@ -0,0 +1,14 @@
+---
+title: MDN content and style guides
+slug: MDN/Guidelines
+tags:
+  - Guidelines
+  - Landing
+  - MDN Meta
+translation_of: MDN/Guidelines
+---
+<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/MDN")}}</div>
+
+<p><span class="seoSummary">These guides provide details on how MDN documentation should be written and formatted, as well as how our code samples and other content should be presented.</span> By following these guides, you can ensure that the material you produce is clean and easy to use.</p>
+
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/de/mdn/guidelines/style_guide/index.html b/files/de/mdn/guidelines/style_guide/index.html
new file mode 100644
index 0000000000..274d9d4f8c
--- /dev/null
+++ b/files/de/mdn/guidelines/style_guide/index.html
@@ -0,0 +1,560 @@
+---
+title: MDN style guide
+slug: MDN/Guidelines/Style_guide
+translation_of: MDN/Guidelines/Writing_style_guide
+---
+<div>{{MDNSidebar}}</div>
+
+<div>{{IncludeSubnav("/de-DE/docs/MDN")}}</div>
+
+<p>Um die Dokumentation in einer organisierten, standardisierten und leicht verständlichen Weise darzustellen, beschreibt der MDN Web Docs Style Guide, wie dieser Text organisiert, geschrieben, formatiert und gestaltet werden sollte. Das sind eher Richtlinien als strenge Regeln. Wir sind mehr an Inhalten als an der Formatierung interessiert, also fühlen Sie sich nicht verpflichtet, den Style Guide zu lernen, bevor Sie einen Beitrag leisten. Seien Sie jedoch nicht verärgert oder überrascht, wenn ein fleißiger Freiwilliger Ihre Arbeit später bearbeitet, um sie an diesen Leitfaden anzupassen.</p>
+
+<p>Wenn Sie nach Spezifikationen suchen, wie eine bestimmte Art von Seite strukturiert sein sollte, lesen Sie den <a href="/en-US/docs/MDN/Contribute/Content/Layout">MDN page layout guide</a>.</p>
+
+<p>Die sprachlichen Aspekte dieses Leitfadens gelten in erster Linie für die englischsprachige Dokumentation. Andere Sprachen haben möglicherweise ihre eigenen Styleguides (und können diese gerne erstellen). Diese sollten als Unterseiten auf der Seite des Lokalisierungsteams veröffentlicht werden.</p>
+
+<p>Stilstandards, die für Inhalte gelten, die für andere Sites als MDN geschrieben wurden, finden Sie im <a href="http://www.mozilla.org/en-US/styleguide/" title="http://www.mozilla.org/en-US/styleguide/">One Mozilla style guide</a>.</p>
+
+<h2 id="Page_name_and_heading_capitalization" name="Page_name_and_heading_capitalization">Basics</h2>
+
+<p>The best place to start in any major publishing style guide is with some very basic text standards to help keep documentation consistent. The following sections outline some of these basics to help you.</p>
+
+<h3 id="Page_titles">Page titles</h3>
+
+<p>Page titles are used in search results and also used to structure the page hierarchy in the breadcrumb list at the top of the page. The page title (which is displayed at the top of the page and in the search results) can be different from the page "slug," which is the portion of the page's URL following "<em>&lt;locale&gt;/docs/</em>".</p>
+
+<h4 id="Title_and_heading_capitalization">Title and heading capitalization</h4>
+
+<p>Page titles and section headings should use sentence-style capitalization (only capitalize the first word and proper nouns) rather than headline-style capitalization:</p>
+
+<ul>
+ <li><span class="correct"><strong>Correct</strong></span>: "A new method for creating JavaScript rollovers"</li>
+ <li><span class="incorrect"><strong>Incorrect</strong></span>: "A New Method for Creating JavaScript Rollovers"</li>
+</ul>
+
+<p>We have many older pages that were written before this style rule was established. Feel free to update them as needed if you like. We're gradually getting to them.</p>
+
+<h4 id="Choosing_titles_and_slugs">Choosing titles and slugs</h4>
+
+<p>Page slugs should be kept short; when creating a new level of hierarchy, the new level's component in the slug should generally just be a word or two.</p>
+
+<p>Page titles, on the other hand, may be as long as you like, within reason, and they should be descriptive.</p>
+
+<h4 id="Creating_new_subtrees">Creating new subtrees</h4>
+
+<p>When you need to add a number of articles about a topic or topic area, you will typically do so by creating a landing page, then adding subpages for each of the individual articles. The landing page should open with a paragraph or two describing the topic or technology, then provide a list of the subpages with descriptions of each page. You can automate the insertion of pages into the list using a number of macros we've created.</p>
+
+<p>For example, consider the <a href="/en-US/docs/Web/JavaScript">JavaScript</a> guide, which is structured as follows:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide" title="JavaScript/Guide">JavaScript/Guide</a> - Main table-of-contents page</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/JavaScript_Overview" title="JavaScript/Guide/JavaScript_Overview">JavaScript/Guide/JavaScript Overview</a></li>
+ <li><a href="/en-US/docs/JavaScript/Guide/Functions" title="JavaScript/Guide/Functions">JavaScript/Guide/Functions</a></li>
+ <li><a href="/en-US/docs/JavaScript/Guide/Details_of_the_Object_Model" title="JavaScript/Guide/Details_of_the_Object_Model">JavaScript/Guide/Details of the Object Model</a></li>
+</ul>
+
+<p>Try to avoid putting your article at the top of the hierarchy, which slows the site down and makes search and site navigation less effective.</p>
+
+<h3 id="Sections.2C_Paragraphs.2C_Newlines" name="Sections.2C_Paragraphs.2C_Newlines">Sections, paragraphs, and newlines</h3>
+
+<p>Use heading levels in decreasing order: {{HTMLElement("h2")}} then {{HTMLElement("h3")}} then {{HTMLElement("h4")}}, without skipping levels. H2 is the highest level allowed because H1 is reserved for the page title. If you need more than three or four levels of headers you should consider breaking up the article into several smaller articles with a landing page, linking them together using the {{TemplateLink("Next")}}, {{TemplateLink("Previous")}}, and {{TemplateLink("PreviousNext")}} macros.</p>
+
+<p>The Enter (or Return) key on your keyboard starts a new paragraph. To insert a newline without a space, hold down the Shift key while pressing Enter.</p>
+
+<p>Don't create single subsections -- you don't subdivide a topic into one. It's either two subheadings or more or none at all. </p>
+
+<p>Don't have bumping heads, which are headings followed immediately by headings. Aside from looking horrible, it's helpful to readers if every heading has at least a brief intro after it to introduce the subsections beneath.</p>
+
+<h3 id="Text_Formatting" name="Text_Formatting">Text formatting and styles</h3>
+
+<p>Use the "Formatting Styles" drop-down list to apply predefined styles to selected content.</p>
+
+<div class="note"><strong>Note: </strong>The "Note" style is used to call out important notes, like this one.</div>
+
+<div class="warning"><strong>Warning:</strong> Similarly, the "Warning" style creates warning boxes like this.</div>
+
+<p>Unless specifically instructed to do so, <strong>do not</strong> use the HTML <code>style</code> attribute to manually style content. If you can't do it using a predefined class, drop into {{IRCLink("mdn")}} and ask for help.</p>
+
+<h3 id="Code_sample_style_and_formatting">Code sample style and formatting</h3>
+
+<h4 id="Tabs_and_line_breaks">Tabs and line breaks</h4>
+
+<p>Use two spaces per tab in all code samples. Code should be indented cleanly, with open-brace ("{") characters on the same line as the statement that opens the block. For example:</p>
+
+<pre class="brush: js notranslate">if (condition) {
+  /* handle the condition */
+} else {
+  /* handle the "else" case */
+}
+</pre>
+
+<p>Long lines shouldn't be allowed to stretch off horizontally to the extent that they require horizontal scrolling to read. Instead, break at natural breaking points. Some examples follow:</p>
+
+<pre class="brush: js notranslate">if (class.CONDITION || class.OTHER_CONDITION || class.SOME_OTHER_CONDITION
+       || class.YET_ANOTHER_CONDITION ) {
+  /* something */
+}
+
+var toolkitProfileService = Components.classes["@mozilla.org/toolkit/profile-service;1"]
+                           .createInstance(Components.interfaces.nsIToolkitProfileService);
+</pre>
+
+<h4 id="Inline_code_formatting">Inline code formatting</h4>
+
+<p>Use the "Code" button (labeled with two angle brackets "&lt;&gt;") to apply inline code-style formatting to function names, variable names, and method names (this uses the {{HTMLElement("code")}} element). For example, "the <code class="js plain">frenchText()</code> function".</p>
+
+<p>Method names should be followed by a pair of parentheses: <code>doSomethingUseful()</code>. This helps to differentiate methods from other code terms.</p>
+
+<h4 id="Syntax_highlighting">Syntax highlighting</h4>
+
+<p><img alt='Screenshot of the "syntax highlighting" menu.' src="https://mdn.mozillademos.org/files/7857/syntax-highlighting-menu.png" style="border-style: solid; border-width: 1px; float: right; height: 315px; margin: 2px 4px; width: 183px;">Entire lines (or multiple lines) of code should be formatted using syntax highlighting rather than the {{HTMLElement("code")}} element. Click the "pre" button in the toolbar to create the preformatted content box in which you'll then write your code. Then, with the text entry cursor inside the code box, select the appropriate language from the language list button to the right of the "pre" button, as seen in the screenshot to the right. The following example shows text with JavaScript formatting:</p>
+
+<div class="line number2 index1 alt1">
+<pre class="brush: js notranslate">for (var i = 0, j = 9; i &lt;= 9; i++, j--)
+  document.writeln("a[" + i + "][" + j + "]= " + a[i][j]);</pre>
+</div>
+
+<p>If no appropriate transformation is available, use the <code>pre</code> tag without specifying a language ("No Highlight" in the language menu).</p>
+
+<pre class="notranslate">x = 42;</pre>
+
+<h4 id="Styling_HTML_element_references">Styling HTML element references</h4>
+
+<p>There are various specific rules to follow when writing about HTML elements, in order to consistently describe the various components of elements, and to ensure that they're properly linked to detailed documentation.</p>
+
+<dl>
+ <dt>Element names</dt>
+ <dd>Use the {{TemplateLink("HTMLElement")}} macro, which creates a link to the page for that element. For example, writing \{{HTMLElement("title")}} produces "{{HTMLElement("title")}}". If you don't want to create a link, <strong>enclose the name in angle brackets</strong> and use "Code (inline)" style (e.g., <code>&lt;title&gt;</code>).</dd>
+ <dt>Attribute names</dt>
+ <dd>Use <strong>bold face</strong>.</dd>
+ <dt>Attribute definitions</dt>
+ <dd>Use the {{TemplateLink("htmlattrdef")}} macro (e.g., <span class="nowiki">\{{htmlattrdef("type")}}</span>) for the definition term, so that it can be linked to from other pages, then use the {{TemplateLink("htmlattrxref")}} macro (e.g., <span class="nowiki">\{{htmlattrxref("attr","element")}}</span>) to reference attribute definitions.</dd>
+ <dt>Attribute values</dt>
+ <dd>Use "Code (inline)" style, and do not use quotation marks around strings, unless needed by the syntax of a code sample. E.g.: When the <strong>type</strong> attribute of an <code>&lt;input&gt;</code> element is set to <code>email</code> or <code>tel</code> ...</dd>
+ <dt>Labeling attributes</dt>
+ <dd>Use labels like {{HTMLVersionInline(5)}} thoughtfully. For example, use them next to the bold attribute name but not for every occurrence in your body text.</dd>
+</dl>
+
+<h3 id="Latin_abbreviations" name="Latin_abbreviations">Latin abbreviations</h3>
+
+<h4 id="In_notes_and_parentheses" name="In_notes_and_parentheses">In notes and parentheses</h4>
+
+<ul>
+ <li>Common Latin abbreviations (etc., i.e., e.g.) may be used in parenthetical expressions and in notes. Use periods in these abbreviations.
+  <ul>
+   <li><span class="correct"><strong>Correct</strong></span>: Web browsers (e.g. Firefox) can be used ...</li>
+   <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers e.g. Firefox can be used ...</li>
+   <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers, e.g. Firefox, can be used ...</li>
+   <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers, (eg: Firefox) can be used ...</li>
+  </ul>
+ </li>
+</ul>
+
+<h4 id="In_running_text" name="In_running_text">In running text</h4>
+
+<ul>
+ <li>In regular text (i.e. text outside of notes or parentheses), use the English equivalent of the abbreviation.
+  <ul>
+   <li><span class="correct"><strong>Correct</strong></span>: ... web browsers, and so on.</li>
+   <li><span class="incorrect"><strong>Incorrect</strong></span>: ... web browsers, etc.</li>
+   <li><span class="correct"><strong>Correct</strong></span>: Web browsers such as Firefox can be used ...</li>
+   <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers e.g. Firefox can be used ...</li>
+  </ul>
+ </li>
+</ul>
+
+<h4 id="Meanings_and_English_equivalents_of_Latin_abbreviations" name="Meanings_and_English_equivalents_of_Latin_abbreviations">Meanings and English equivalents of Latin abbreviations</h4>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>Abbrev</th>
+   <th>Latin</th>
+   <th>English</th>
+  </tr>
+  <tr>
+   <td>cf.</td>
+   <td><em>confer</em></td>
+   <td>compare</td>
+  </tr>
+  <tr>
+   <td>e.g.</td>
+   <td><em>exempli gratia</em></td>
+   <td>for example</td>
+  </tr>
+  <tr>
+   <td>et al.</td>
+   <td><em>et alii</em></td>
+   <td>and others</td>
+  </tr>
+  <tr>
+   <td>etc.</td>
+   <td><em>et cetera</em></td>
+   <td>and so forth, and so on</td>
+  </tr>
+  <tr>
+   <td>i.e.</td>
+   <td><em>id est</em></td>
+   <td>that is, in other words</td>
+  </tr>
+  <tr>
+   <td>N.B.</td>
+   <td><em>nota bene</em></td>
+   <td>note well</td>
+  </tr>
+  <tr>
+   <td>P.S.</td>
+   <td><em>post scriptum</em></td>
+   <td>postscript</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note:</strong> Always consider whether it's truly beneficial to use a Latin abbreviation. Some of these are used so rarely that many readers won't understand the meaning, and others are often confused with one another. And be sure that <strong>you</strong> use them correctly, if you choose to do so. For example, be careful not to confuse "e.g." with "i.e.", which is a common error.</p>
+</div>
+
+<h3 id="Acronyms_and_abbreviations" name="Acronyms_and_abbreviations">Acronyms and abbreviations</h3>
+
+<h4 id="Capitalization_and_periods" name="Capitalization_and_periods">Capitalization and periods</h4>
+
+<p>Use full capitals and delete periods in all acronyms and abbreviations, including organizations such as "US" and "UN".</p>
+
+<ul>
+ <li><span class="correct"><strong>Correct</strong></span>: XUL</li>
+ <li><span class="incorrect"><strong>Incorrect</strong></span>: X.U.L.; Xul</li>
+</ul>
+
+<h4 id="Expansion" name="Expansion">Expansion</h4>
+
+<p>On the first mention of a term on a page, expand acronyms likely to be unfamiliar to users. When in doubt, expand it, or, better, link it to the article or <a href="/en-US/docs/Glossary">glossary</a> entry describing the technology.</p>
+
+<ul>
+ <li><span class="correct"><strong>Correct</strong></span>: "XUL (XML User Interface Language) is Mozilla's XML-based language..."</li>
+ <li><span class="incorrect"><strong>Incorrect</strong></span>: "XUL is Mozilla's XML-based language..."</li>
+</ul>
+
+<h4 id="Plurals_of_acronyms_and_abbreviations" name="Plurals_of_acronyms_and_abbreviations">Plurals of acronyms and abbreviations</h4>
+
+<p>For plurals of acronyms or abbreviations, add <em>s</em>. Don't use an apostrophe. Ever. Please.</p>
+
+<ul>
+ <li><span class="correct"><strong>Correct</strong></span>: CD-ROMs</li>
+ <li><span class="incorrect"><strong>Incorrect</strong></span>: CD-ROM's</li>
+</ul>
+
+<h3 id="Contractions" name="Contractions">Capitalization</h3>
+
+<p>Use standard English capitalization rules in body text, and capitalize "World Wide Web" and "Web".</p>
+
+<p>Keyboard keys should use sentence-style capitalization, not all-caps capitalization. For example, "Enter" not "ENTER."</p>
+
+<h3 id="Contractions" name="Contractions">Contractions</h3>
+
+<p>Use contractions (e.g. "don't", "can't", "shouldn't") if you prefer. We're not that formal!</p>
+
+<h3 id="Pluralization" name="Pluralization">Pluralization</h3>
+
+<p>Use English-style plurals, not the Latin- or Greek-influenced forms.</p>
+
+<ul>
+ <li><span class="correct"><strong>Correct</strong></span>: syllabuses, octopuses</li>
+ <li><span class="incorrect"><strong>Incorrect</strong></span>: syllabi, octopi</li>
+</ul>
+
+<h3 id="Hyphenation" name="Hyphenation">Hyphenation</h3>
+
+<p>Hyphenate compounds when the last letter of the prefix is a vowel and is the same as the first letter of the root.</p>
+
+<ul>
+ <li><font color="green"><strong>Correct</strong></font>: email, re-elect, co-op</li>
+ <li><font color="red"><strong>Incorrect</strong></font>: e-mail, reelect, coop</li>
+</ul>
+
+<h3 id="Gender-neutral_language">Gender-neutral language</h3>
+
+<p>It is a good idea to use gender-neutral language in any kind of writing where gender is irrelevant to the subject matter, to make the text as inclusive as possible. So for example, if you are talking about the actions of a specific man, usage of he/his would be fine, but if the subject is a person of either gender, he/his isn't really appropriate.<br>
+ <br>
+ Let's take the following example:</p>
+
+<blockquote>
+<p>A confirmation dialog appears, asking the user if he allows the web page to make use of his web cam.</p>
+</blockquote>
+
+<blockquote>
+<p>A confirmation dialog appears, asking the user if she allows the web page to make use of her web cam.</p>
+</blockquote>
+
+<p>Both versions in this case are gender-specific. This could be fixed by using gender-neutral pronouns:</p>
+
+<blockquote>
+<p>A confirmation dialog appears, asking the user if they allow the web page to make use of their web cam.</p>
+</blockquote>
+
+<div class="note">
+<p><strong>Note:</strong> MDN allows the use of this very common syntax (which is controversial among usage authorities), in order to make up for the lack of a neutral gender in English. The use of the third-person plural as a neutral gender pronoun (that is, using "they," them", "their," and "theirs") is an accepted practice, commonly known as "<a href="http://en.wikipedia.org/wiki/Singular_they">singular 'they.'</a>"</p>
+</div>
+
+<p>You can use both genders:</p>
+
+<blockquote>
+<p>A confirmation dialog appears, asking the user if he or she allows the web page to make use of his/her web cam.</p>
+</blockquote>
+
+<p>making the users plural:</p>
+
+<blockquote>
+<p>A confirmation dialog appears, asking the users if they allow the web page to make use of their web cams.</p>
+</blockquote>
+
+<p>The best solution, of course, is to rewrite and eliminate the pronouns completely:</p>
+
+<blockquote>
+<p>A confirmation dialog appears, requesting the user's permission for web cam access.</p>
+</blockquote>
+
+<blockquote>
+<p>A confirmation dialog box appears, which asks the user for permission to use the web cam.</p>
+</blockquote>
+
+<p>The last way of dealing with the problem is arguably better, as it is not only grammatically more correct but removes some of the complexity associated with dealing with genders across different languages that may have wildly varying gender rules. This can make translation easier, both for readers reading English, then translating it into their own language as they read, and for localizers translating articles into their own language.</p>
+
+<h3 id="Numbers_and_numerals" name="Numbers_and_numerals">Numbers and numerals</h3>
+
+<h4 id="Dates">Dates</h4>
+
+<p>For dates (not including dates in code samples) use the format "January 1, 1990".</p>
+
+<ul>
+ <li><span class="correct"><strong>Correct</strong></span>: February 24, 2006</li>
+ <li><span class="incorrect"><strong>Incorrect</strong></span>: February 24th, 2006; 24 February, 2006; 24/02/2006</li>
+</ul>
+
+<p>Alternately, you can use the YYYY/MM/DD format.</p>
+
+<ul>
+ <li><span class="correct"><strong>Correct</strong></span>: 2006/02/24</li>
+ <li><span class="incorrect"><strong>Incorrect</strong></span>: 02/24/2006; 24/02/2006; 02/24/06</li>
+</ul>
+
+<h4 id="Decades" name="Decades">Decades</h4>
+
+<p>For decades, use the format "1990s". Don't use an apostrophe.</p>
+
+<ul>
+ <li><span class="correct"><strong>Correct</strong></span>: 1990s</li>
+ <li><span class="incorrect"><strong>Incorrect</strong></span>: 1990's</li>
+</ul>
+
+<h4 id="Plurals_of_numerals" name="Plurals_of_numerals">Plurals of numerals</h4>
+
+<p>For plurals of numerals add "s". Don't use an apostrophe.</p>
+
+<ul>
+ <li><span class="correct"><strong>Correct</strong></span>: 486s</li>
+ <li><span class="incorrect"><strong>Incorrect</strong></span>: 486's</li>
+</ul>
+
+<h4 id="Commas" name="Commas">Commas</h4>
+
+<p>In running text, use commas only in five-digit and larger numbers.</p>
+
+<ul>
+ <li><span class="correct"><strong>Correct</strong></span>: 4000; 54,000</li>
+ <li><span class="incorrect"><strong>Incorrect</strong></span>: 4,000; 54000</li>
+</ul>
+
+<h3 id="Punctuation" name="Punctuation">Punctuation</h3>
+
+<h4 id="Serial_comma" name="Serial_comma">Serial comma</h4>
+
+<p><strong>Use the serial comma</strong>. The serial (also known as "Oxford") comma is the comma that appears before the conjunction in a series of three or more items.</p>
+
+<ul>
+ <li><span class="correct"><strong>Correct</strong></span>: I will travel on trains, planes, and automobiles.</li>
+ <li><span class="incorrect"><strong>Incorrect</strong></span>: I will travel on trains, planes and automobiles.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note:</strong> This is in contrast to the <a href="http://www.mozilla.org/en-US/styleguide/" title="http://www.mozilla.org/en-US/styleguide/">One Mozilla style guide</a>, which specifies that the serial comma is not to be used. MDN is an exception to this rule.</p>
+</div>
+
+<h3 id="Spelling" name="Spelling">Spelling</h3>
+
+<p>For words with variant spellings, always use the first entry at <a href="http://www.answers.com/library/Dictionary">Answers.com</a>. Do not use variant spellings.</p>
+
+<ul>
+ <li><span class="correct"><strong>Correct</strong></span>: localize, honor</li>
+ <li><span class="incorrect"><strong>Incorrect</strong></span>: localise, honour</li>
+</ul>
+
+<h3 id="Terminology">Terminology</h3>
+
+<h4 id="Obsolete_vs._deprecated">Obsolete vs. deprecated</h4>
+
+<p>It's important to be clear on the difference between the terms <strong>obsolete</strong> and <strong>deprecated</strong>.</p>
+
+<dl>
+ <dt>Obsolete:</dt>
+ <dd>On MDN, the term <strong>obsolete</strong> marks an API or technology that is not only no longer recommended, but also no longer implemented in the browser. For Mozilla-specific technologies, the API is no longer implemented in Mozilla code; for Web standard technology, the API or feature is no longer supported by current, commonly-used browsers.</dd>
+ <dt>Deprecated:</dt>
+ <dd>On MDN, the term <strong>deprecated</strong> marks an API or technology that is no longer recommended, but is still implemented and may still work. These technologies will in theory eventually become <em>obsolete</em> and be removed, so you should stop using them. For Mozilla-specific technologies, the API is still supported in Mozilla code; for Web standard technology, the API or feature has been removed or replaced in a recent version of the defining standard.</dd>
+</dl>
+
+<h4 id="HTML_elements">HTML elements</h4>
+
+<p>Use "elements" to refer to HTML and XML elements, rather than "tags". In addition, they should almost always be wrapped in "&lt;&gt;", and should be in the {{HTMLElement("code")}} style. Also, at least the first time you reference a given element in a section should use the {{TemplateLink("HTMLElement")}} macro, to create a link to the documentation for the element (unless you're writing within that element's reference document page).</p>
+
+<ul>
+ <li><span class="correct"><strong>Correct</strong></span>: the {{HTMLElement("span")}} element</li>
+ <li><span class="incorrect"><strong>Incorrect</strong></span>: the span tag</li>
+</ul>
+
+<h4 id="User_interface_actions">User interface actions</h4>
+
+<p>In task sequences, describe user interface actions using the imperative mood. Identify the user interface element by its label and type.</p>
+
+<ul>
+ <li><span class="correct"><strong>Correct</strong></span>: Click the Edit button.</li>
+ <li><span class="incorrect"><strong>Incorrect</strong></span>: Click Edit.</li>
+</ul>
+
+<h3 id="Voice">Voice</h3>
+
+<p>While the active voice is generally preferred, the passive voice is also acceptable, given the informal feel of our content. Try to be consistent, though.</p>
+
+<h2 id="Wiki_markup_and_usage">Wiki markup and usage</h2>
+
+<h3 id="External_links">External links</h3>
+
+<p>To automatically create a link to a Bugzilla bug, use this template:</p>
+
+<pre class="notranslate">\{{Bug(322603)}}
+</pre>
+
+<p>This results in:</p>
+
+<p>{{Bug(322603)}}</p>
+
+<p>For WebKit bugs, you can use this template:</p>
+
+<pre class="notranslate">\{{Webkitbug("322603")}}
+</pre>
+
+<p>This results in:</p>
+
+<p>{{Webkitbug("322603")}}</p>
+
+<h3 id="Page_tags">Page tags</h3>
+
+<p>Tags provide meta information about a page and/or indicate that a page has specific improvements needed to its content. Every page in the wiki should have tags. You can find details on tagging in our <a href="/en-US/docs/MDN/Contribute/Howto/Tag">How to properly tag pages</a> guide.</p>
+
+<p>The tagging interface lives at the bottom of a page while you're in edit mode, and looks something like this:</p>
+
+<p><img alt="Screenshot of the UX for adding and removing tags on MDN" src="https://mdn.mozillademos.org/files/7859/tag-interface.png" style="border-style: solid; border-width: 1px; height: 167px; width: 863px;"></p>
+
+<p>To add a tag, click in the edit box at the end of the tag list and type the tag name you wish to add. Tags will autocomplete as you type. Press enter (or return) to submit the new tag. Each article may have as many tags as needed. For example, an article about using JavaScript in AJAX programming might have both "JavaScript" and "AJAX" as tags.</p>
+
+<p>To remove a tag, simply click the little "X" icon in the tag.</p>
+
+<h4 id="Tagging_pages_that_need_work">Tagging pages that need work</h4>
+
+<p>In addition to using tags to track information about the documentation's quality and content, we also use them to mark articles as needing specific types of work.</p>
+
+<h4 id="Tagging_obsolete_pages">Tagging obsolete pages</h4>
+
+<p>Use the following tags for pages that are not current:</p>
+
+<ul>
+ <li><em>Junk</em>: Use for spam, pages created by mistake, or content that is so bad that it should be deleted. Pages with this tag are deleted from time to time.</li>
+ <li><em>Obsolete</em>: Use for content that is technically superceded, but still valid in context. For example an HTML element that is obsolete in HTML5 is still valid in HTML 4.01. You can also use the <span class="nowiki">{{TemplateLink("obsolete_header")}}</span> macro to put a prominent banner on the topic.</li>
+ <li><em>Archive</em>: Use for content that is technically superceded and no longer useful. If possible, add a note to the topic referring readers to a more current topic. For example, a page that describes how to use the Mozilla CVS repository should refer readers to a current topic on using Mercurial repos. (If no corresponding current topic exists, use the <em>NeedsUpdate</em> tag, and add an explanation on the Talk page.) Pages with the Archive tag are eventually moved from the main content of MDN to the <a href="/en-US/docs/Archive">Archive</a> section.</li>
+</ul>
+
+<h3 id="SEO_summary">SEO summary</h3>
+
+<p>The SEO summary is a very short summary of the page. It will be reported as a summary of the article to robots crawling the site, and will then appear in search results for the page. It is also used by macros that automate the construction of landing pages inside MDN itself.</p>
+
+<p>By default, the first pagragraph of the page is used as the SEO summary. However you can override this behavior by marking a section with the <a href="/en-US/docs/Project:MDN/Contributing/Editor_guide/Editing#Formatting_styles">"SEO summary" style in the WYSIWYG editor</a>.</p>
+
+<h3 id="Landing_pages">Landing pages</h3>
+
+<p><strong>Landing pages</strong> are pages at the root of a topic area of the site, such as the main <a href="/en-US/docs/CSS" title="CSS">CSS</a> or <a href="/en-US/docs/HTML" title="HTML">HTML</a> pages. They have a standard format that consists of three areas:</p>
+
+<ol>
+ <li>A brief (typically one paragraph) overview of what the technology is and what it's used for. See {{anch("Writing a landing page overview")}} for tips.</li>
+ <li>A two-column list of links with appropriate headings. See {{anch("Creating a page link list")}} for guidelines.</li>
+ <li>An <strong>optional</strong> "Browser compatibility" section at the bottom of the page.</li>
+</ol>
+
+<h4 id="Creating_a_page_link_list">Creating a page link list</h4>
+
+<p>The link list section of an MDN landing page consists of two columns. These are created using the following HTML:</p>
+
+<pre class="brush: html notranslate">&lt;div class="row topicpage-table"&gt;
+  &lt;div class="section"&gt;
+    ... left column contents ...
+  &lt;/div&gt;
+  &lt;div class="section"&gt;
+    ... right column contents ...
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>The left column should be a list of articles, with an <code>&lt;h2&gt;</code> header at the top of the left column explaining that it's a list of articles about the topic (for example "Documentation and tutorials about foo"); this header should use the CSS class "Documentation". Below that is a <code>&lt;dl&gt;</code> list of articles with each article's link in a <code>&lt;dt&gt;</code> block and a brief one-or-two sentence summary of the article in the corresponding <code>&lt;dd&gt;</code> block.</p>
+
+<p>The right column should contain one or more of the following sections, in order:</p>
+
+<dl>
+ <dt>Getting help from the community</dt>
+ <dd>This should provide information on Matrix chat rooms and mailing lists available about the topic. The heading should use the class "Community".</dd>
+ <dt>Tools</dt>
+ <dd>A list of tools the user can look at to help with the use of the technology described in this section of MDN. The heading should use the class "Tools".</dd>
+ <dt>Related topics</dt>
+ <dd>A list of links to landing pages for other, related, technologies of relevance. The heading should use the class "Related_Topics".</dd>
+</dl>
+
+<p><strong>&lt;&lt;&lt;finish this once we finalize the landing page standards&gt;&gt;&gt;</strong></p>
+
+<h2 id="Using_inserting_images">Using, inserting images</h2>
+
+<p>It's sometimes helpful to provide an image in an article you create or modify, especially if the article is very technical. To include an image:</p>
+
+<ol>
+ <li>Attach the desired image file to the article (at the bottom of every article in edit mode)</li>
+ <li>Create an image in the WYSIWYG editor</li>
+ <li>In the WYSIWYG editor in the drop-down list listing attachments, select the newly created attachment which is your image</li>
+ <li>Press OK.</li>
+</ol>
+
+<h2 id="Other_References">Other References</h2>
+
+<h3 id="Preferred_style_guides" name="Preferred_style_guides">Preferred style guides</h3>
+
+<p>If you have questions about usage and style not covered here, we recommend referring to the <a href="http://www.economist.com/research/StyleGuide/">Economist style guide</a> or, failing that, the <a href="http://www.amazon.com/gp/product/0226104036/">Chicago Manual of Style</a>.</p>
+
+<h3 id="Preferred_dictionary" name="Preferred_dictionary">Preferred dictionary</h3>
+
+<p>For questions of spelling, please refer to <a href="http://www.answers.com/library/Dictionary">Answers.com</a>. The spell-checker for this site uses American English. Please do not use variant spellings (e.g., use <em>honor</em> rather than <em>honour</em>).</p>
+
+<p>We will be expanding the guide over time, so if you have specific questions that aren't covered in this document, please send them to the <a href="/en-US/docs/Project:Community" title="Project:en/Community">MDC mailing list</a> or <a href="/User:Sheppy" title="User:Sheppy">project lead</a> so we know what should be added.</p>
+
+<h3 id="MDC-specific" name="MDC-specific">MDN-specific</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Project:Custom_CSS_Classes" title="Project:en/Custom_CSS_Classes">Custom CSS classes</a> defined for all MDC pages.</li>
+ <li><a href="/en-US/docs/Project:Custom_Templates" title="Project:en/Custom_Templates">Custom templates</a> created for use on MDC, with explanations.</li>
+</ul>
+
+<h3 id="Other_resources" name="Other_resources">Language, grammar, spelling</h3>
+
+<p>If you're interested in improving your writing and editing skills, you may find the following resources to be helpful.</p>
+
+<ul>
+ <li><a href="http://www.amazon.com/Writing-Well-30th-Anniversary-Nonfiction/dp/0060891548">On Writing Well</a>, by William Zinsser (Amazon link)</li>
+ <li><a href="http://www.amazon.com/Style-Basics-Clarity-Grace-4th/dp/0205830765/" title="http://www.amazon.com/Style-Lessons-Clarity-Grace-Edition/dp/0321898680">Style: The Basics of Clarity and Grace</a>, by Joseph Williams and Gregory Colomb (Amazon link)</li>
+ <li><a href="http://www.bartleby.com/64/">American Heritage Book of English Usage</a></li>
+ <li><a href="http://www.wsu.edu/~brians/errors/">Common Errors in English</a></li>
+ <li><a href="http://www-personal.umich.edu/~jlawler/aue.html">English Grammar FAQ</a> (alt.usage.english)</li>
+ <li><a href="http://www.angryflower.com/bobsqu.gif">Bob's quick guide to the apostrophe, you idiots</a> (funny)</li>
+ <li><a href="http://www.amazon.com/Merriam-Websters-Concise-Dictionary-English-Usage/dp/B004L2KNI2" title="http://www.amazon.com/Merriam-Websters-Concise-Dictionary-English-Usage/dp/B004L2KNI2">Merriam-Webster's Concise Dictionary of English Usage</a> (Amazon link): Scholarly but user-friendly, evidence-based advice; very good for non-native speakers, especially for preposition usage.</li>
+</ul>
diff --git a/files/de/mdn/index.html b/files/de/mdn/index.html
new file mode 100644
index 0000000000..0c8645cb03
--- /dev/null
+++ b/files/de/mdn/index.html
@@ -0,0 +1,33 @@
+---
+title: Das MDN Projekt
+slug: MDN
+tags:
+  - Landing
+  - MDN Meta
+  - 'l10n:priority'
+translation_of: MDN
+---
+<div>{{MDNSidebar}}</div>
+
+<p>Das <strong>Mozilla Developer Network</strong> (MDN) ist ein Wiki, auf dem wir das Offene Web, Technologien von Mozilla, Firefox OS und andere für Entwickler interessante Themen dokumentieren. WIr freuen uns über jeden, der Inhalte beisteuert oder bearbeitet. Sie müssen kein Programmierer sein oder besonders viel über Technologien wissen; wir haben viele unterschiedliche Aufgaben, vom Einfachen (Korrekturlesen und Beheben von Tippfehlern) bis zum Komplexen (API Dokumentationen schreiben).</p>
+
+<div class="summary">
+<p>Ziel des MDN Projekts ist es, das Offene Web, Mozillas Technologien und Projekte von Mozilla zu dokumentieren. Wir laden Sie ein, dabei zu helfen!</p>
+</div>
+
+<p>Wir brauchen Ihre Hilfe! Es ist ganz einfach. Machen Sie sich keine Gedanken darüber, um Erlaubnis zu bitten oder Fehler zu machen. Hingegen bitten wir Sie, sich mit der <a href="/de/docs/MDN/Community" title="/de/docs/MDN/Community">MDN community</a> vertraut zu machen; wir sind da, um Ihnen zu helfen! Die folgende Dokumentation soll Ihnen den Einstieg erleichtern.</p>
+
+
+
+<ul class="card-grid">
+ <li><span><a href="/de/docs/MDN/Erste_Schritte">Ich bin neu hier</a></span>
+
+  <p>Sind Sie neu bei MDN und wollen erfahren, wie Sie mithelfen können es noch besser zu machen? Starten Sie hier!</p>
+ </li>
+ <li><span><a href="/de/docs/MDN/Contribute">Für Fortgeschrittene</a></span>
+  <p>Besuchen Sie unseren vollständigen, detaillierten Leitfaden für Mitwirkende bei MDN, um mehr zu erfahren, sobald Sie sich vertraut damit gemacht haben.</p>
+ </li>
+ <li><span><a class="new" href="/de/docs/MDN/Promote" rel="nofollow">Sagen Sie es weiter</a></span>
+  <p>Wenn Sie MDN mögen, helfen Sie die Nachricht zu verbreiten! FInden Sie Designs, Tools und Leitfäden um MDN zu promoten.</p>
+ </li>
+</ul>
diff --git a/files/de/mdn/kuma/beheben_von_kumascript_fehlern/index.html b/files/de/mdn/kuma/beheben_von_kumascript_fehlern/index.html
new file mode 100644
index 0000000000..0255388aa1
--- /dev/null
+++ b/files/de/mdn/kuma/beheben_von_kumascript_fehlern/index.html
@@ -0,0 +1,63 @@
+---
+title: Beheben von KumaScript Fehlern
+slug: MDN/Kuma/Beheben_von_KumaScript_Fehlern
+translation_of: MDN/Tools/KumaScript/Troubleshooting
+---
+<div>{{MDNSidebar}}</div><div class="summary">
+<p><a href="/en-US/docs/MDN/Kuma/Introduction_to_KumaScript">KumaScript</a> Fehler plaziert in großen roten Kästen wirken auf die Leser abstossend. Zum Glück kann jedoch jeder mit einem MDN Konto solche Fehler beseitigen. Wenn ein Fehler auf einer Seite auftritt, landet die betreffende Seite in der List der <a href="/docs/with-errors">Dokumente mit Fehlern</a>.  Seitenauthoren gehen diese Seiten regelmäßig durch um Fehler zu finden und zu beseitigen. Dieser Artikel erläutert vier Typen von KumaScript Fehlern und beschreibt einige Methoden zu ihrer Beseitigung.</p>
+</div>
+
+<h2 id="DocumentParsingError">DocumentParsingError</h2>
+
+<p><code>DocumentParsingError</code> tritt auf, wenn KumaScript etwas in dem Dokument nicht versteht. Im allgemeinen handelt es sich um einen Syntaxfehler in einem <a href="/en-US/docs/MDN/Contribute/Content/Macros">Makro</a>.</p>
+
+<p>Beispiele:</p>
+
+<dl>
+ <dt>Geschweifte Klammern ohne Aufruf eines Makros.</dt>
+ <dd>Falls \{ in einem Dokument stehen soll ohne ein Makro aufzurufen, kann man einen Schrägstrich \ voranstellen: <code>\\{</code></dd>
+ <dt>Sonderzeichen in einem Makro Parameter.</dt>
+ <dd>Wenn " oder \  innerhalb eines Makro Parameters stehen, kann ein Schrägstrich \ vorangestellt werden: <code>\\</code> oder <code>\"</code></dd>
+ <dt>Fehlende Kommas zwischen den Makro Parametern.</dt>
+ <dd>Makro Parameters sind mit Kommas (,) zu trennen, jedoch sollte am Ende der Parameterliste kein Komma stehen: z. B. <code>\{\{anch("top", "Back to top")}}</code>.</dd>
+ <dt>HTML Tags innerhalb eines Makro Aufrufs</dt>
+ <dd>Makros werden oft durch Textformatiertungen zerstört. <code>So kann z. B. das Tag &lt;/code&gt;</code> in den Quellcode des Makros geraten. Die Quellcode Ansicht (source view) zeigt die zu beseitigenden Formatierungselemente.</dd>
+</dl>
+
+<ul>
+</ul>
+
+<h2 id="TemplateLoadingError">TemplateLoadingError</h2>
+
+<p><code>TemplateLoadingError</code> Fehler treten auf, wenn KumaScript nicht weiß, welches <a href="/en-US/docs/MDN/Contribute/Content/Macros">Makro</a> in die Seite geladen soll.</p>
+
+<p>Beispiele:</p>
+
+<dl>
+ <dt>Typos in der Benennung von Makro oder Namensänderungen von Makros.</dt>
+ <dd>Der Aufruf der Template Seite zeigt die richtigen Namen der Makros. Die URLs für Template Seiten erhält man durch Anheften des Template Namen ans Ende der URL <code>https://developer.mozilla.org/en-US/docs/Template: z.B. ist die Template Seite für</code> <code>\{\{anch("top", "Back to top")}}</code>: <a href="https://developer.mozilla.org/en-US/docs/Template:anch">https://developer.mozilla.org/en-US/docs/Template:anch</a>.<br>
+ <br>
+ Es gibt eine eigene Liste von <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Content/Custom_macros">Makros für MDN</a>, die das gesuchte Makro mit korrekter bzw. neuer Schreibweise enthalten kann.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Tipp:</strong> Ein gesuchtes Makro ist leicht und schnell durch Hinzufügen eines <a href="http://kb.mozillazine.org/Using_keyword_searches">Suchbegriffs (search keyword)</a> in Firefox zu finden. &lt;&lt;&lt;MEHR DAZU DEMNÄCHST&gt;&gt;</p>
+</div>
+
+<h2 id="TemplateExecutionError">TemplateExecutionError</h2>
+
+<p><code>TemplateExecutionError</code> Fehler treten auf, wenn KumaScript durch einen Fehler im Makro betroffen wird. Diese Fehler können nur durch Benutzer mit Admin Rechten beseitigt werden, und sollten gemeldet werden (bug report).</p>
+
+<p>Vor dem Schreiben des Fehlerreports sollte man überprüfen, ob der Fehler nicht bereits beseitigt wurde. Folgendermassen zwingt man KumaScript die Seite neu zu laden:  <kbd>Shift</kbd> gedrückt halten und zum Neuladen der Seite drücken: <kbd>Shift</kbd> + <kbd>Ctrl</kbd> + <kbd>R</kbd> unter Windows/Linux, sowie <kbd>Shift</kbd> + <kbd>Cmd</kbd> + <kbd>R</kbd> auf einem Mac.</p>
+
+<p>Wenn derselbe Fehler wieder auftritt <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Mozilla_Developer_Network&amp;component=General#h=detail|bug">sollte ein Fehlerbericht (bug report) erstellte werden</a>. Dieser Bericht sollte die URL der Seite sowie die Fehlermeldung enthalten.</p>
+
+<h2 id="Fehler_Unbekannt">Fehler &amp; Unbekannt</h2>
+
+<p>In diese Kategory fallen alle anderen Fehler.</p>
+
+<p>Diese Fehler sollten auf die selbe Art wie <a href="#TemplateExecutionError">TemplateExecutionError</a> untersucht und beseitigt werden.</p>
+
+<p> </p>
+
+<p> </p>
diff --git a/files/de/mdn/kuma/index.html b/files/de/mdn/kuma/index.html
new file mode 100644
index 0000000000..06e83f21ee
--- /dev/null
+++ b/files/de/mdn/kuma/index.html
@@ -0,0 +1,28 @@
+---
+title: 'Kuma: MDN''s wiki platform'
+slug: MDN/Kuma
+tags:
+  - Einstieg bei Mozilla
+  - Helfen
+  - Kuma
+  - MDN Meta
+  - Mitarbeiten
+translation_of: MDN/Kuma
+---
+<div>{{MDNSidebar}}</div>
+
+<div>{{IncludeSubnav("/de/docs/MDN")}}</div>
+
+<p>Kuma ist der Django Code der die MDN Dokumentation unterstützt.</p>
+
+<p>{{SubpagesWithSummaries}}</p>
+
+<h2 id="An_Kuma_mitarbeiten.">An Kuma mitarbeiten.</h2>
+
+<p>Um an Kuma mit zuarbeiten musst du:</p>
+
+<ul>
+ <li>Besuche das <a href="https://github.com/mozilla/kuma">Kuma Projekt auf Github</a>.</li>
+ <li>Lies den <a href="https://github.com/mozilla/kuma/blob/master/CONTRIBUTING.md">Contribution Guide.</a></li>
+ <li>Alles was du brauchst findest du hier: <a href="http://kuma.readthedocs.org/en/latest/">Die ganze Kuma Dokumentation</a></li>
+</ul>
diff --git a/files/de/mdn/nutzer_leitfaden/index.html b/files/de/mdn/nutzer_leitfaden/index.html
new file mode 100644
index 0000000000..da9a177a1b
--- /dev/null
+++ b/files/de/mdn/nutzer_leitfaden/index.html
@@ -0,0 +1,8 @@
+---
+title: MDN Benutzerhandbuch
+slug: MDN/nutzer_leitfaden
+translation_of: MDN/Tools
+---
+<div>{{MDNSidebar}}</div><p><span id="result_box" lang="de"><span class="hps">Die</span> <span class="hps">Mozilla Developer Network</span><span>-Website</span> <span class="hps">ist ein fortschrittliches</span> <span class="hps">System</span></span> zum suchen, lesen und eine beitragene Dokumentions Hilfe für Web-Entwickler (<span id="result_box" lang="de"><span>wie auch für</span> <span class="hps">Firefox</span> <span class="hps">und</span> <span class="hps">Firefox</span> <span class="hps">OS</span><span>-Entwickler</span></span>). Die MDN Mitglieder liefern detailierte Artikel welche zum benutzen des MDN, für Dokumentionen die du brauchst und wenn du möchtest die dir helfen das Material besser und weiter und zu vervollständigen, hilft. </p>
+
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/de/mdn/structures/index.html b/files/de/mdn/structures/index.html
new file mode 100644
index 0000000000..f8ea007204
--- /dev/null
+++ b/files/de/mdn/structures/index.html
@@ -0,0 +1,10 @@
+---
+title: Document structures
+slug: MDN/Structures
+translation_of: MDN/Structures
+---
+<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/MDN")}}</div>
+
+<p>Throughout MDN, there are various document structures that are used repeatedly, to provide consistent presentation of information in MDN articles. Here are articles describing these structures, so that, as an MDN author, you can recognize, apply, and modify them as appropriate for documents you write, edit, or translate.</p>
+
+<p>{{LandingPageListSubPages()}}</p>
diff --git a/files/de/mdn/structures/kompatibilitaets_tabellen/index.html b/files/de/mdn/structures/kompatibilitaets_tabellen/index.html
new file mode 100644
index 0000000000..758d450e7c
--- /dev/null
+++ b/files/de/mdn/structures/kompatibilitaets_tabellen/index.html
@@ -0,0 +1,500 @@
+---
+title: Kompatibilitäts Tabellen
+slug: MDN/Structures/Kompatibilitaets_Tabellen
+tags:
+  - Browser Kompatibilität
+translation_of: MDN/Structures/Compatibility_tables
+---
+<div>{{MDNSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/MDN")}}</div>
+
+<p class="summary">MDN hat ein Standard Format für Kompatibilitätstabellen für unsere Offenes Web Dokumentation; Das beeinhaltet die Dokumentation von Technologien, wie zum Beispiel, DOM, HTML, CSS, JavaScript, SVG und viele weitere, welche in jedem Browsern verwendet werden. Dieser Artikel bearbeitet, wie unsere Features verwendet werden sollen um Kompatibilitätsdaten zu den MDN Seiten hinzuzufügen.</p>
+
+<div class="warning">
+<p><strong>Wichtig</strong>: <strong><em>Die Art, wie die Daten generiert werden, wurde geändert</em></strong>. Früher wurden unsere Tabellen in die Seite eingefügt und die Daten wurden manuell befüllt. Dies ist Ineffizient, macht die Pflege der Daten schwierig und sorgt für unflexible Daten. Deswegen verschieben wir den Speicher unserer Browserkompatibilitätsdaten in ein Daten Repository (siehe <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>) und generieren die Tabellen mit einem Programm.<br>
+ <br>
+ In dieser Anleitung dokumentieren wir die neue Art Kompatibilitätsdaten zu MDN hinzuzufügen, aber wir haben die Dokumentation der alten Art immer noch behalten, weil du manuelle Tabellen noch länger auf MDN sehen wirst. Wenn du die alte Dokumentation sehen musst, kannst du unseren <a href="/en-US/docs/MDN/Contribute/Structures/Old_compatibility_tables">Alten Kompatibiltätstabellen</a> Artikel besuchen.</p>
+</div>
+
+<div class="note">
+<p><strong>Notiz</strong>: Wenn du Hilfe zu einem der Schritte dieser Anleitung brauchst, würden wir uns freuen, wenn du uns im <a href="https://discourse.mozilla-community.org/c/mdn">MDN Diskussionsforum</a> kontaktierst.</p>
+</div>
+
+<h2 id="Wie_ist_das_Repository_erreichbar">Wie ist das Repository erreichbar?</h2>
+
+<p>Die Daten sind in einem GitHub Repository gespeichert — siehe <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Um darauf zugreifen zu können, musst du einen GitHub Benutzer erstellen,das browser-compat-data Repository in deinen Account forken, und deinen Fork auf deinen Rechner clonen.</p>
+
+<h2 id="Wähle_ein_Feature_für_das_du_Daten_hinzufügen_willst">Wähle ein Feature für das du Daten hinzufügen willst</h2>
+
+<p>Such dir zuerst ein Feature aus, zu dem du Browser-Kompatibilitäts-Daten hinzufügen willst. Das könnte, zum Beispiel ein HTML-Element, eine CSS-Eigenschaft, ein JS-Sprachen-Feature oder ein JS-API-Schnittstelle sein. Wir würden uns wünschen, dass du an API Features arbeitest, da wir bereits Leute haben, die an HTML, JS und CSS arbeiten. Du findest den Status eines Features, für das noch Daten auf das Repository hinzugefügt werden müssen, auf unserer <a href="https://docs.google.com/spreadsheets/d/1ivgyPBr9Lj3Wvj5kyndT1rgGbX-pGggrxuMtrgcOmjM/edit#gid=926663640">Browser-Kompatibilitäts-Daten Verschiebungstabelle</a>.</p>
+
+<p>Der Ablauf für das Hinzufügen von Browser-Kompatibilitäts-Daten lautet:</p>
+
+<ol>
+ <li>Öffne die Tabelle und wähle ein Feature an dem nicht schon gearbeitet wird oder bereits übertragen wurde. Schreibe deinen Namen in die "Who" Spalte, wir bevorzugen deinen MDN Nutzernamen, damit wir dich, falls notwendig, über deine E-Mail-Adresse kontaktieren können.</li>
+ <li>Falls das Feature, an dem du Arbeiten willst noch nicht in der Tabelle ist, füge eine Zeile unter Verwendung mit dem gleichen Format und Bennenung ein (z.B. Getrennte Zeilen für unterschiedliche HTML-Elemente, CSS-Eigenschaften, CSS-Selectoren, JS-Objekt und Schnittstellen einer API).</li>
+ <li>Sobald du an einem Feature arbeitest, ändere den Status auf "In progress".</li>
+ <li>Sobald du daten hinzugefügt hast und einen Pull Request zum Main Repo gestellt hast, setze den Status auf "PR done".</li>
+ <li>Wenn deine Daten in das Repo gemerged und zum npm Package hinzugefügt wurden, ändere den Status dementsprechend.</li>
+ <li>Sobald du die Dokumentations-Seite(n) das neue Makro angegeben hast, damit die aktualisierten Tabellen generiert werden, setze den Status auf "Article updated". Damit ist deine Arbeit abgeschlossen.</li>
+</ol>
+
+<h2 id="Preparing_to_add_the_data">Preparing to add the data</h2>
+
+<p>Before adding some new data, you should make sure that your fork is up-to-date with the main repo (it contains the same content), create a new branch inside your fork to contain your additions, then pull that branch into your local clone so you can start working inside it:</p>
+
+<p>Let's look at a simple way to make sure your fork is to-to-date is as follows:</p>
+
+<h3 id="Adding_the_main_browser-compat-data_repo_as_a_remote">Adding the main browser-compat-data repo as a remote</h3>
+
+<p>Go to your local clone of your fork in your terminal/command line, and add a remote pointing to the main (upstream) repo like so (you only need to do this once):</p>
+
+<pre class="brush: bash notranslate">git remote add upstream https://github.com/mdn/browser-compat-data.git</pre>
+
+<p>If you are unsure whether you've done this, you can check what remotes your repo has using</p>
+
+<pre class="brush: bash notranslate">git remote -v</pre>
+
+<h3 id="Updating_your_fork_with_the_remotes_content">Updating your fork with the remote's content</h3>
+
+<p>Now, whenever you want to update your fork, you can do so by:</p>
+
+<ol>
+ <li>
+  <p>Making sure you are in the master branch:</p>
+
+  <pre class="brush: bash notranslate">git checkout master</pre>
+ </li>
+ <li>
+  <p>fetching the up-to-date repo contents using the following:</p>
+
+  <pre class="brush: bash notranslate">git fetch upstream</pre>
+ </li>
+ <li>
+  <p>rebasing the contents of your master with the main repo's contents:</p>
+
+  <pre class="brush: bash notranslate">git rebase upstream/master</pre>
+ </li>
+ <li>
+  <p>pushing these updates back to your remote fork using this:</p>
+
+  <pre class="brush: bash notranslate">git push -f</pre>
+ </li>
+</ol>
+
+<h3 id="Creating_a_new_branch_to_do_your_work_in">Creating a new branch to do your work in</h3>
+
+<p>Next, go to your remote fork (it will be at <code>https://github.com/<em>your-username</em>/browser-compat-data</code>) and create a new branch to store your changes for this data addition. This can be done by:</p>
+
+<ol>
+ <li>Clicking on the "Branch: Master" button.</li>
+ <li>Entering a new branch name into the "Find or create a branch..." text field.</li>
+ <li>Pressing the resulting "Create branch <em>name-of-branch</em> from Master" button.</li>
+</ol>
+
+<p>For example, if you were wanting to add data for the WebVR API, you'd create a branch called something like "webvr".</p>
+
+<h3 id="Switching_to_the_new_branch">Switching to the new branch</h3>
+
+<p>At this point, go back to your terminal/command line, and update your fork's local clone to include your new branch using the following command:</p>
+
+<pre class="brush: bash notranslate">git pull</pre>
+
+<p>Now switch to your new branch using this:</p>
+
+<pre class="brush: bash notranslate">git checkout<em> name-of-branch</em></pre>
+
+<p>You should now be ready to start adding your data!</p>
+
+<h2 id="Adding_the_data">Adding the data</h2>
+
+<p>To add the data, you need to create a new file or files to store your compat data in. The files you need to create differ, depending on what technology you are working on:</p>
+
+<ul>
+ <li>HTML: One file per HTML element, contained in <a href="https://github.com/mdn/browser-compat-data/tree/master/html/elements">browser-compat-data/html/elements</a>. The file should be called the name of the element, all in lower case, e.g. <code>div.json</code>.</li>
+ <li>CSS: One file per CSS property or selector, contained in the appropriate directory (see <a href="https://github.com/mdn/browser-compat-data/tree/master/css">browser-compat-data/css</a>). The file should be called the name of the feature, all in lower case, e.g. <code>background-color.json</code>, or <code>hover.json</code>.</li>
+ <li>JS: One file per JS object, contained in <a href="https://github.com/mdn/browser-compat-data/tree/master/javascript/builtins">browser-compat-data/javascript/builtins</a>. The file should be called the exact name of the object, with the casing preserved, e.g. <code>Date.json</code> or <code>InternalError.json</code>.</li>
+ <li>APIs: One file per interface contained in the API, put in <a href="https://github.com/mdn/browser-compat-data/tree/master/api">browser-compat-data/api</a>. Each file should be called the exact name of the interface, with the casing preserved, e.g. The WebVR API has <code>VRDisplay.json</code>, <code>VRDisplayCapabilities.json</code>, etc.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: You'll notice that the repo also contains data for <a href="/en-US/Add-ons/WebExtensions">Browser Extensions</a> and <a href="/en-US/docs/Web/HTTP">HTTP</a>. These data sets are basically finished as they stand, but more features may need to be added in the future.</p>
+</div>
+
+<p>Each file you create has to follow the pattern defined in the schema contained within our repo; you can see the <a href="https://github.com/mdn/browser-compat-data/blob/master/schemas/compat-data-schema.md">detailed schema description here</a>.</p>
+
+<h3 id="Basic_compat_data_structure">Basic compat data structure</h3>
+
+<p>Let's look at an example. CSS property JSON files for example need the following basic structure:</p>
+
+<pre class="brush: json notranslate">{
+  "css": {
+    "properties": {
+      "border-width": {
+        "__compat": {
+          ...
+        }
+      }
+    }
+  }
+}</pre>
+
+<p>You have the <code>css</code> object, inside of which is a <code>properties</code> object. Inside the <code>properties</code> object, you need one member for each of the specific features you want to define the compat data for. Each of these members has a <code>__compat</code> member, inside of which the actual data goes.</p>
+
+<p>The above data is found in the <a href="https://github.com/mdn/browser-compat-data/blob/master/css/properties/border-width.json">border-width.json</a> file — compare this to the <a href="/en-US/docs/Web/CSS/border-width#Browser_compatibility">rendered border-width support table on MDN</a>.</p>
+
+<p>Other types of features work in the same way, but with different object names:</p>
+
+<ul>
+ <li>CSS selectors work in basically the same way as CSS properties, except that the top-level object structure is <code>css.selectors</code> instead of <code>css.properties</code>. See <a href="https://github.com/mdn/browser-compat-data/blob/master/css/selectors/cue.json">cue.json</a> for an example.</li>
+ <li>HTML data works in basically the same way, except that the top-level object structure is <code>html.elements</code>. See <code>article.json</code> for an example.</li>
+ <li>The top level object structure for JS built-in objects is <code>javascript.builtins</code>; see <a href="https://github.com/mdn/browser-compat-data/blob/master/javascript/builtins/Array.json">Array.json</a> for an example.</li>
+</ul>
+
+<div>
+<p>In HTML, CSS, and JS pages, you'll normally only need one feature. API interfaces work slightly differently — they always have multiple sub-features (see {{anch("Sub-features")}}, below).</p>
+
+<h3 id="Basic_structure_inside_a_feature">Basic structure inside a feature</h3>
+
+<p>Inside a feature <code>__compat</code> member, you need to include the following members:</p>
+
+<ul>
+ <li><code>mdn_url</code>: Contains the URL of the reference page for this feature on MDN. Note that this needs to be written without the locale directory inside, e.g. <code>/docs/...</code> not <code>/docs/en-US/...</code> (or whatever). This is added in by the macro when the data is put on the page, for localization purposes.</li>
+ <li><code>support</code>: Contains members representing the browser support information for this feature in all the different browsers we want to report.</li>
+ <li><code>status</code>: Contains members reporting the standards track status of this feature.</li>
+</ul>
+
+<p>The names of the browser members are defined in the schema (see <a href="https://github.com/mdn/browser-compat-data/blob/master/schemas/compat-data-schema.md#browser-identifiers">Browser identifiers</a>). You should use the full list of currently defined identifiers. If you wish to add another browser, talk to us first, as this could have a wide-ranging impact and should not be done without careful thought.</p>
+
+<p>In a basic browser compat data file, you'll only need to include "version_added" inside the browser identifier members (we'll cover {{anch("Advanced cases")}} later on). The different values you might want to include are as follows:</p>
+
+<ul>
+ <li>A version number: If you know the exact version in which a browser started to support your feature, use a string representing the number, e.g. "47".</li>
+ <li><code>true</code>: If a browser supports a feature but you don't know the exact version number, use the value <code>true</code>. This equivalent to the <code>\{{CompatVersionUnknown}}</code> macro call in the old manual tables.</li>
+ <li><code>false</code>: If a browser does not support a feature, use the value <code>false</code>. This is equivalent to the the <code>\{{CompatNo}}</code> macro call in the old manual tables.</li>
+ <li><code>null</code>: If you don't know whether a browser supports a feature or not, use the value <code>null</code>. This is equivalent to the <code>\{{CompatUnknown}}</code> macro call in the old manual tables.</li>
+</ul>
+
+<p>Inside the <code>status</code> member, you'll include three submembers:</p>
+
+<ul>
+ <li> "experimental": This should be set to <code>true</code> if the feature is <a href="/en-US/docs/MDN/Contribute/Guidelines/Conventions_definitions#Experimental">experimental</a>, or <code>false</code> otherwise.</li>
+ <li>"standard_track": This should be set to <code>true</code> if a feature is on some kind of standards track (most commonly W3C/WHATWG, but there are also other standards efforts such as Khronos, TC39, etc.) or <code>false</code> otherwise.</li>
+ <li>"deprecated": This should be set to <code>true</code> if the feature is <a href="/en-US/docs/MDN/Contribute/Guidelines/Conventions_definitions#Deprecated_and_obsolete">deprecated</a>, or <code>false</code> otherwise.</li>
+</ul>
+
+<p>The feature data for <a href="/en-US/docs/Web/CSS/border-width#Browser_compatibility">border-width</a> (also see <a href="https://github.com/mdn/browser-compat-data/blob/master/css/properties/border-width.json">border-width.json</a>) is shown below as an example:</p>
+
+<pre class="brush: json notranslate">"__compat": {
+  "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/border-width",
+  "support": {
+    "chrome": {
+      "version_added": "1"
+    },
+    "webview_android": {
+      "version_added": "2"
+    },
+    "edge": {
+      "version_added": true
+    },
+    "edge_mobile": {
+      "version_added": true
+    },
+    "firefox": {
+      "version_added": "1"
+    },
+    "firefox_android": {
+      "version_added": "1"
+    },
+    "ie": {
+      "version_added": "4"
+    },
+    "ie_mobile": {
+      "version_added": "6"
+    },
+    "opera": {
+      "version_added": "3.5"
+    },
+    "opera_android": {
+      "version_added": "11"
+    },
+    "safari": {
+      "version_added": "1"
+    },
+    "safari_ios": {
+      "version_added": "3"
+    }
+  },
+  "status": {
+    "experimental": false,
+    "standard_track": true,
+    "deprecated": false
+  }
+}</pre>
+
+<h4 id="Adding_a_description">Adding a description</h4>
+
+<p>There is a fourth, optional, member that can go inside the __compat member — <code>description</code>. This can be used to include a human-readable description of the feature. You should only include this if it is hard to see what the feature is from glancing at the data. For example, it might not be that obvious what a constructor is from looking at the data structure, so you can include a description like so:</p>
+
+<pre class="brush: json notranslate">{
+  "api": {
+    "AbortController": {
+      "__compat": {
+        ...
+      },
+      "AbortController": {
+        "__compat": {
+          "mdn_url": "https://developer.mozilla.org/docs/Web/API/AbortController/AbortController",
+          "description": "&lt;code&gt;AbortController()&lt;/code&gt; constructor",
+          "support": {
+            ...
+          }
+        }
+      }
+
+      ... etc.
+    }
+  }
+}</pre>
+
+<h3 id="Sub-features">Sub-features</h3>
+
+<p>In a page where the compat table has more than one row, you'll need multiple subfeatures inside each feature to define the information for each row. This can happen, for example, when you've got the basic support for a feature stored in one row, but then the feature also has a new property or value type that was addded much later in the specification's life and is only supported in a couple of browsers.</p>
+
+<p>As an example, see the <a href="https://github.com/mdn/browser-compat-data/blob/master/css/properties/background-color.json">compat data</a> and <a href="/en-US/docs/Web/CSS/background-color">corresponding MDN page</a> for the <code>background-color</code> property. The basic support exists inside the <code>__compat</code> object as explained above, then you have an additional row for browsers' support for "alpha channel for hex values", which contains its own <code>__compat</code> object.</p>
+
+<pre class="brush: json notranslate">{
+  "css": {
+    "properties": {
+      "background-color": {
+        "__compat": {
+          ...
+        },
+        "alpha_ch_for_hex": {
+          "__compat": {
+            ...
+          },
+        }
+      }
+    }
+  }
+}</pre>
+
+<p>For an API, you've got the top two levels defined as <code>api.<em>name-of-the-interface</em></code>, then a top-level <code>__compat</code> section to define the overall browser compatibility of the interface, then a sub-feature for each of the methods, properties, and constructors contained inside the interface. The basic structure looks like this:</p>
+
+<pre class="brush: json notranslate">{
+  "api": {
+    "VRDisplay": {
+      "__compat": {
+        ...
+      },
+      "cancelAnimationFrame": {
+        "__compat": {
+          ...
+        }
+      },
+      "capabilities": {
+        "__compat": {
+          ...
+        }
+      },
+
+      ... etc.
+
+    }
+  }
+}</pre>
+
+<p>See <a href="https://github.com/mdn/browser-compat-data/blob/master/api/VRDisplay.json">VRDisplay.json</a> for a full example.</p>
+</div>
+
+<h2 id="Adding_data_Advanced_cases">Adding data: Advanced cases</h2>
+
+<p>There are some advanced features that you'll want to include in browser compat data. The aim of this section is to list the most common ones, providing an example of each to show how you can implement them in your own compat data.</p>
+
+<h3 id="Including_a_footnote">Including a footnote</h3>
+
+<p>Often compat tables will include footnotes related to certain entries that explain useful details or strange behavior that developers will find useful. As an example, the Chrome Android entry for {{domxref("VRDisplay.capabilities")}} (see also <a href="https://github.com/mdn/browser-compat-data/blob/master/api/VRDisplay.json">VRDisplay.json</a>)  (at the time of writing) had a footnote "<span class="pl-s">Currently supported only by Google Daydream." To include this in the capabilities data, we added a "notes" submember inside the relevant "chrome_android" submember; it would look like this:</span></p>
+
+<pre class="brush: json notranslate">"chrome_android": {
+  "version_added": true,
+  "notes": "Currently supported only by Google Daydream."
+}</pre>
+
+<h3 id="Including_a_vendor_prefix">Including a vendor prefix</h3>
+
+<p>If a feature is supported behind a vendor prefix in one or more browsers, you'll want to make that clear in the browser compat data. imagine you had a feature that was supported with a <code>-moz-</code> prefix in Firefox. To specify this in the compat data, you'd need to add a "prefix" submember inside the relevant "firefox" submember. It would look something like this:</p>
+
+<pre class="brush: json notranslate">"firefox": {
+  "version_added": true,
+  "prefix": "-moz-"
+}</pre>
+
+<h3 id="Including_browser_preferences_or_flags">Including browser preferences or flags</h3>
+
+<p>Some features may be supported in a browser, but they are experimental and turned off by default. If a user wants to play with this feature they need to turn it on using a preference/flag.</p>
+
+<p>To represent this in the compat data, you need to add the "flags" submember inside the relevant browser identifier submember. The value of "flags" is an array of objects each of which contains of three members:</p>
+
+<ul>
+ <li>"type": The type of flag or pref this is. The most common value is "preference", which is set inside the browser (for example, using <code>about:config</code> in Firefox, or <code>chrome://flags</code> in Chrome), but you might also sometimes use a value of <span class="pl-s"><span class="pl-pds">"</span>compile_flag<span class="pl-pds">", which is a preference set when the browser build is compiled.</span></span></li>
+ <li>"name": This is a string representing the name of the preference that needs to have a value set on it. For example, "Enable Experimental Web Platform Features" is a preference that exists in Chrome, found in <code>chrome://flags</code>.</li>
+ <li>"value_to_set": This is a string representing the value that needs to be set on the preference, for example "true".</li>
+</ul>
+
+<p>So to add a preference/flag to the Chrome support for a feature, you'd do something like this:</p>
+
+<pre class="brush: json notranslate">"chrome": {
+  "version_added": "50",
+  "flags": [
+    {
+      "type": "preference",
+      "name": "Enable Experimental Web Platform Features",
+      "value_to_set": "true"
+    }
+  ]
+},</pre>
+
+<p>If a feature is behind two or more flags, you can add additional objects to the "flags" array, like in this case, for example:</p>
+
+<pre class="brush: json notranslate">"firefox": {
+  "version_added": "57",
+  "flags": [
+    {
+      "type": "preference",
+      "name": "dom.streams.enabled",
+      "value_to_set": "true"
+    },
+    {
+      "type": "preference",
+      "name": "javascript.options.streams",
+      "value_to_set": "true"
+    }
+  ]
+},</pre>
+
+<h3 id="Including_a_version_where_support_was_removed">Including a version where support was removed</h3>
+
+<p>Sometimes a feature will be added in a certain browser version, but then removed again as the feature is deprecated. This can be easily represented using the "version_removed" submember, which takes as its value a string representing the version number it was removed on. For example:</p>
+
+<pre class="brush: json notranslate">"firefox": {
+  "version_added": "35",
+  "version_removed": "47",
+},</pre>
+
+<h3 id="Including_multiple_support_points_for_the_same_browser_entry">Including multiple support points for the same browser entry</h3>
+
+<p>Sometimes you'll want to add multiple support data points for the same browser inside the same feature.</p>
+
+<p>As an example, the {{cssxref("text-align-last")}} property (see also <a href="https://github.com/mdn/browser-compat-data/blob/master/css/properties/text-align-last.json">text-align-last.json</a>) was added to Chrome in version 35, supported behind a pref.</p>
+
+<p>The support mentioned above was then removed in version 47; also in version 47, support was added for <code>text-align-last</code> enabled by default.</p>
+
+<p>To include both of these data points, you can make the value of the "chrome" submember an array containing two support information objects, rather than just a single support information object:</p>
+
+<pre class="brush: json notranslate">"chrome": [
+  {
+    "version_added": "47"
+  },
+  {
+    "version_added": "35",
+    "version_removed": "47",
+    "flags": [
+      {
+        "type": "preference",
+        "name": "Enable Experimental Web Platform Features",
+        "value_to_set": "true"
+      }
+    ]
+  }
+],</pre>
+
+<div class="note">
+<p><strong>Note</strong>: You should put the most current or important support point first in the array — this makes the data easier to read for people who just want to scan it for the latest info.</p>
+</div>
+
+<h3 id="Including_an_alternative_name">Including an alternative name</h3>
+
+<p>Occasionally browsers will support a feature under a different name to the name defined in its specification. This might be for example because a browser added experimental support for a feature early, and then the name changed before the spec stabilized.</p>
+
+<p>To include such a case in the browser compat data, you can include a support information point that specifies the alternative name inside an "alternative_name" member.</p>
+
+<div class="note">
+<p><strong>Note</strong>: The alternative name might not be an exact alias — it might have differing behaviour to the standard version.</p>
+</div>
+
+<p>Let's look at an example. The {{cssxref("border-top-right-radius")}} property (see also <a href="https://github.com/mdn/browser-compat-data/blob/2a0cc3f6bb17aa4345441bed47a059dffd847793/css/properties/border-top-right-radius.json">border-top-right-radius.json</a>) was supported in Firefox:</p>
+
+<ul>
+ <li>From version 4 onwards with the standard name <code>border-top-right-radius</code>.</li>
+ <li>From version 49 onwards with a <code>-webkit-</code> prefix, for browser compatibility purposes.</li>
+ <li>From version 1 onwards with the alternative name <code>-moz-border-radius-topright</code>. Support for this alias was removed in version 12.</li>
+</ul>
+
+<p>To represent this in the data, we used the following JSON:</p>
+
+<pre class="brush: json notranslate">"firefox": [
+  {
+    "version_added": "4",
+    "notes": "Prior to Firefox 50.0, border styles of rounded corners were always rendered as if &lt;code&gt;border-style&lt;/code&gt; was solid. This has been fixed in Firefox 50.0."
+  },
+  {
+    "prefix": "-webkit-",
+    "version_added": "49",
+    "notes": "From Firefox 44 to 48, the &lt;code&gt;-webkit-&lt;/code&gt; prefix was available with the &lt;code&gt;layout.css.prefixes.webkit&lt;/code&gt; preference. Starting with Firefox 49, the preference defaults to &lt;code&gt;true&lt;/code&gt;."
+  },
+  {
+    "alternative_name": "-moz-border-radius-topright",
+    "version_added": "1",
+    "version_removed": "12"
+  }
+],</pre>
+
+<h2 id="Pushing_a_change_back_to_the_main_repo">Pushing a change back to the main repo</h2>
+
+<p>Once you are finished with adding your compat data, you should first test it using the following commands:</p>
+
+<ul>
+ <li><code>npm run lint</code> — tests all the compat data to make sure the JSON is valid, and is written in the correct style, for example correct indentation, no missing commas, etc. It will print out a long list of file names and test results; if an error is found, the linter will throw an error on the file it is found in, giving you useful debugging info like line number, error message, etc.</li>
+ <li><code>npm run show-errors</code> — validates the JSON against the data schema, and highlights errors such as invalid browser version numbers being used.</li>
+ <li><code>npm run render dotted.path.to.feature</code> — allows you to preview the markup for the compat table for a data file in the repo. As an example, <code>npm run render css.properties.background</code> shows the table markup for the {{cssxref("background")}} property.</li>
+</ul>
+
+<p>If it is looking OK, you then need to commit it and push it back up to your remote fork on GitHub. You can do this easily with terminal commands like this:</p>
+
+<pre class="brush: bash notranslate">git add .
+git commit -m 'adding compat data for name-of-feature'
+git push</pre>
+
+<p>Now go to your remote fork (i.e. <code>https://github.com/<em>your-username</em>/browser-compat-data</code>) and you should see information about your push at the top of the files list (under "Your recently pushed branches"). You can create a pull request (starting the process of pushing this to the main repo) by pressing the "Compare &amp; pull request" button, then following the simple prompts on the subsequent screen.</p>
+
+<p>At this point, you just need to wait. A reviewer will review your pull request, and merge it with the main repo, OR request that you make changes. If changes are needed, make the changes and submit again until the PR is accepted.</p>
+
+<h2 id="Inserting_the_data_into_MDN_pages">Inserting the data into MDN pages</h2>
+
+<p>Once your new data has been included in the main repo, you can start dynamically generating browser compat tables based on that data on MDN pages using the \{{Compat}} macro. This takes a single parameter, the dot notation required to walk down the JSON data and find the object representing the feature you want to generate the compat table for.</p>
+
+<p>Above the macro call, to help other contributors finding their way, you should add a hidden text that is only visible in MDN contributors in edit mode:</p>
+
+<pre class="brush: html notranslate">&lt;div class="hidden"&gt;
+&lt;p&gt;The compatibility table on this page is generated from structured data.
+If you'd like to contribute to the data, please check out
+&lt;a href="https://github.com/mdn/browser-compat-data"&gt;https://github.com/mdn/browser-compat-data&lt;/a&gt;
+and send us a pull request.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<p>As an example, on the {{httpheader("Accept-Charset")}} HTTP header page, the macro call looks like this: \{{Compat("http.headers.Accept-Charset")}}. If you look at the <a href="https://github.com/mdn/browser-compat-data/blob/master/http/headers/accept-charset.json">accept-charset.json</a> file in the repo, you'll see how this is reflected in the JSON data.</p>
+
+<p>As another example, The compat table for the {{domxref("VRDisplay.capabilities")}} property is generated using \{{Compat("api.VRDisplay.capabilities")}}. The macro call generates the following table (and corresponding set of notes):</p>
+
+<hr>
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.VRDisplay.capabilities")}}</p>
+
+<div class="note">
+<p><strong>Note</strong>: The filenames often match the labels given to the interfaces inside the JSON structures, but it is not always the case. When the macro calls generate the tables, they walk through all the files until they find the relevant JSON to use, so the filenames are not critical. Saying that, you should always name them as intuitively as possible.</p>
+</div>
diff --git a/files/de/mdn/über/index.html b/files/de/mdn/über/index.html
new file mode 100644
index 0000000000..745152be79
--- /dev/null
+++ b/files/de/mdn/über/index.html
@@ -0,0 +1,99 @@
+---
+title: Über MDN
+slug: MDN/Über
+translation_of: MDN/About
+---
+<div>{{MDNSidebar}}</div>
+
+<div>{{IncludeSubNav("/en-US/docs/MDN")}}</div>
+
+<p>MDN Web Docs ist eine sich entwickelnde Lernplattform für Web-Techniken und Software, die das Web antreibt, einschließlich:</p>
+
+<ul>
+ <li>Web-Standards, wie <a href="/en-US/docs/CSS" title="/en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/HTML" title="/en-US/docs/HTML">HTML</a> und <a href="/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a></li>
+ <li><a href="/en-US/docs/Apps" title="/en-US/docs/Apps">Entwicklung offener Web-Apps</a></li>
+ <li><a href="/en-US/docs/Add-ons" title="/en-US/docs/Add-ons">Entwicklung von Firefox Add-Ons</a></li>
+</ul>
+
+<h2 id="Unsere_Mission">Unsere Mission</h2>
+
+<p>MDNs Mission ist einfach: Entwickler mit den Informationen versorgen, die sie benötigen, um Projekte für ein <a href="/en-US/docs/Web">offenes Web</a> einfach umzusetzen. Wenn es sich um eine offene Technik für das Web handelt, möchten wir sie dokumentieren.</p>
+
+<p>Darüber hinaus stellen wir die Dokumentation zu <a href="/en-US/docs/Mozilla">Mozilla-Produkten</a> zur Verfügung und wie man <a href="/en-US/docs/Mozilla">Mozilla-Projekte erstellt und zu ihnen beiträgt</a>.</p>
+
+<p>Wenn du dir nicht sicher bist, ob ein bestimmtes Thema für MDN geeignet ist, lies: <a href="/en-US/docs/Project:MDN/Contributing/Does_this_belong">Gehört das zu MDN?</a></p>
+
+<h2 id="Wie_du_helfen_kannst">Wie du helfen kannst</h2>
+
+<p>Du musst nicht programmieren — oder gut schreiben können — um bei MDN beitragen zu können! Es gibt viele Möglichkeiten zu unterstützen. Vom Korrekturlesen von Artikeln, um sicherzustellen, dass sie verständlich sind, über das Beitragen von Texten, bis zum Hinzufügen von Beispiel-Quelltexten. Tatsächlich gibt es so viele Arten zu helfen, dass wir eine <a href="/en-US/docs/MDN/Getting_started">Erste Schritte</a>-Seite erstellt haben, die dir dabei helfen soll, zu erledigende Aufgaben nach deinen Interessen und der zur Verfügung stehenden Zeit auszuwählen!</p>
+
+<p>Du kannst uns auch helfen <a href="/en-US/docs/MDN/About/Promote">MDN bekannter</a> zu machen, in dem du es auf deinem Blog oder deiner Website erwähnst.</p>
+
+<h2 id="Die_MDN-Gemeinschaft">Die MDN-Gemeinschaft</h2>
+
+<p>Unsere Gemeinschaft ist global! Wir haben Mitwirkende aus der ganzen Welt, in einer Vielzahl an Sprachen. Wenn du mehr über uns erfahren möchtest, oder auf irgendeine Art Hilfe bei MDN benötigst, zögere nicht unser <a href="https://discourse.mozilla-community.org/c/mdn">Diskussionsforum</a> oder unseren <a href="irc://irc.mozilla.org#mdn">IRC-Kanal</a> zu besuchen! Du kannst auch auf dem Laufenden bleiben in dem du unserem Twitter-Konto unter <a href="http://twitter.com/MozDevNet">@MozDevNet</a> folgst. Auf diese Art kannst du auch Tweets an uns senden, falls dir Unstimmigkeiten auffallen, du uns deine Meinung sagen oder ein großes Dankeschön an unsere Autoren und Mitwirkenden senden möchtest!</p>
+
+<h2 id="Verwendung_der_MDN_Web_Docs-Inhalte">Verwendung der MDN Web Docs-Inhalte</h2>
+
+<h3 id="Urheberrecht_und_Lizenzen">Urheberrecht und Lizenzen</h3>
+
+<p><strong>MDN wiki documents</strong> have been prepared with the contributions of many authors, both within and outside the Mozilla Foundation. Unless otherwise indicated, the content is available under the terms of the <a class="external text" href="http://creativecommons.org/licenses/by-sa/2.5/" rel="nofollow" title="http://creativecommons.org/licenses/by-sa/2.5/">Creative Commons Attribution-ShareAlike license</a> (CC-BY-SA), v2.5 or any later version. Please attribute "Mozilla Contributors" and include a hyperlink (online) or URL (in print) to the specific wiki page for the content being sourced. For example, to provide attribution for this article, you can write:</p>
+
+<blockquote><a href="https://developer.mozilla.org/en-US/docs/MDN/About">About MDN</a> by <a href="https://developer.mozilla.org/en-US/docs/MDN/About$history">Mozilla Contributors</a> is licensed under <a href="http://creativecommons.org/licenses/by-sa/2.5/">CC-BY-SA 2.5</a>.</blockquote>
+
+<p>Note that in the example, "Mozilla Contributors" links to the history of the cited page. See <a href="http://wiki.creativecommons.org/Marking/Users">Best practices for attribution</a> for further explanation.</p>
+
+<div class="note">
+<p>See <a href="/en-US/docs/MDN_content_on_WebPlatform.org" title="/en-US/docs/MDN_content_on_WebPlatform.org">MDN content on WebPlatform.org</a> for information about how to reuse and attribute MDN content on that site.</p>
+</div>
+
+<p>Code samples added to this wiki before August 20, 2010 are available under the <a class="external" href="http://www.opensource.org/licenses/mit-license.php" title="http://www.opensource.org/licenses/mit-license.php">MIT license</a>; you should insert the following attribution information into the MIT template: "© &lt;date of last wiki page revision&gt; &lt;name of person who put it in the wiki&gt;".</p>
+
+<p>Code samples added on or after August 20, 2010 are in the <a class="external" href="http://creativecommons.org/publicdomain/zero/1.0/" title="http://wiki.creativecommons.org/Public_domain">public domain</a>. No licensing notice is necessary, but if you need one, you can use: "Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/".</p>
+
+<p>If you wish to contribute to this wiki, you must make your documentation available under the Attribution-ShareAlike license (or occasionally an alternative license already specified by the page you are editing), and your code samples available under <a href="http://creativecommons.org/publicdomain/zero/1.0/" title="http://creativecommons.org/publicdomain/zero/1.0/">Creative Commons CC-0</a> (a Public Domain dedication). Adding to this wiki means you agree that your contributions will be made available under those licenses.</p>
+
+<p>Some older content was made available under a license other than the licenses noted above; these are indicated at the bottom of each page by way of an <a class="internal" href="/Archive/Meta_docs/Examples/Alternate_License_Block" title="Project:En/Examples/Alternate License Block">Alternate License Block</a>.</p>
+
+<div class="warning">
+<p>Es dürfen keine neuen Seiten unter Verwendung anderer Lizenzen erstellt werden.</p>
+</div>
+
+<p><strong>Das Urheberrecht für beigetragenes Material verbleibt beim Autor, bis der Autor es auf jemand anderen überträgt</strong>.</p>
+
+<p>Wenn du Fragen oder Bedenken betreffs der hier diskutierten Belange hast, kontaktiere bitte <a class="external" href="mailto:eshepherd@mozilla.com" rel="nofollow" title="mailto:eshepherd@mozilla.com">Eric Shepherd</a>.</p>
+
+<hr>
+<p>Die Rechte an den Markenzeichen, Logos und Dienstleistungsmarken der Mozilla Foundation, sowie die Gestaltung dieser Website, stehen nicht unter der Creative Commons-Lizenz, and to the extent they are works of authorship (wie Logos und grafische Entwürfe), sie sind nicht Bestandteil der Werke die unter diesen Bedingungen lizenziert sind. If you use the text of documents, and wish to also use any of these rights, or if you have any other questions about complying with our licensing terms for this collection, you should contact the Mozilla Foundation here: <a class="external text" href="mailto:licensing@mozilla.org" rel="nofollow" title="mailto:licensing@mozilla.org">licensing@mozilla.org</a>.</p>
+
+<h3 id="Inhalte_herunterladen">Inhalte herunterladen</h3>
+
+<p>Du kannst <a href="/media/developer.mozilla.org.tar.gz">ein vollständiges, gespiegeltes Archiv von MDN</a> (2.5 GB, Stand: 2016-11-30) herunterladen.</p>
+
+<h4 id="Einzelne_Seiten">Einzelne Seiten</h4>
+
+<p>Du kannst den Inhalt einer einzelnen Seite von MDN abfragen, in dem du den <a href="/en-US/docs/MDN/Kuma/API#Document_parameters">Dokumentparameter</a>, mit dem du auch gleich das Dateiformat festlegst, zur URL hinzufügst.</p>
+
+<h4 id="Werkzeuge_von_Dritten">Werkzeuge von Dritten</h4>
+
+<p>Du kannst dir MDN-Inhalte durch Werkzeuge, die von Dritten erstellt wurden, ansehen, wie zum Beispiel <a href="http://kapeli.com/dash">Dash</a> (für Mac OS) und <a href="http://zealdocs.org/">Zeal</a> (für Linux und Windows).</p>
+
+<p><a href="https://kapeli.com/">Kapeli</a> veröffentlich auch <a href="https://kapeli.com/mdn_offline">offline MDN docs</a>, die die Bereiche HTML, CSS, JavaScript, SVG und XSLT abdecken.</p>
+
+<h3 id="Verlinken_auf_MDN">Verlinken auf MDN</h3>
+
+<p>Lies diesen Artikel für eine Anleitung und die beste Vorgehensweise beim <a href="/en-US/docs/MDN/About/Linking_to_MDN">Verlinken auf MDN</a>.</p>
+
+<h2 id="Probleme_mit_MDN_Web_Docs_melden">Probleme mit MDN Web Docs melden</h2>
+
+<p>Siehe <a href="/en-US/docs/MDN/Contribute/Howto/Report_a_problem">Wie kann man auf MDN ein Problem melden</a>.</p>
+
+<h2 id="Geschichte_der_MDN_Web_Docs">Geschichte der MDN Web Docs</h2>
+
+<p>Das Projekt MDN Web Docs (zuvor <em>Mozilla Developer Network (MDN)</em>, zuvor <em>Mozilla Developer Center (MDC)</em>, a.k.a. <em>Devmo</em>) startete im Jahr 2005 als die <a class="external" href="http://www.mozillafoundation.org">Mozilla Foundation</a> eine Lizenz von AOL erhielt um die originalen Netscape <a href="https://web.archive.org/web/*/devedge.netscape.com" title="Project:en/DevEdge">DevEdge</a>-Inhalte nutzen zu dürfen. Die DevEdge-Inhalte wurden dann nach noch brauchbarem Material durchsucht, welches dann von Freiwilligen in dieses Wiki übertragen wurde, so dass es leichter aktuell zu halten und zu warten wäre.</p>
+
+<p>Du kannst mehr über die Geschichte von MDN auf unserer Seite über die <a href="/en-US/docs/MDN_at_ten">Feier zum 10. Jubiläum</a> erfahren, einschließlich mündlicher Berichte von einigen der daran Beteiligten.</p>
+
+<h2 id="Über_Mozilla">Über Mozilla</h2>
+
+<p>Whether you want to learn more about who we are, how to be a part of <em>Mozilla</em> or just where to find us, you've come to the right place. To find out what drives us and makes us different, please visit our <a href="http://www.mozilla.org/en-US/mission/">mission</a> page.</p>
diff --git a/files/de/mdn/über/link_zu_mdn/index.html b/files/de/mdn/über/link_zu_mdn/index.html
new file mode 100644
index 0000000000..47411ecf30
--- /dev/null
+++ b/files/de/mdn/über/link_zu_mdn/index.html
@@ -0,0 +1,82 @@
+---
+title: Verknüpfung zu MDN
+slug: MDN/Über/Link_zu_MDN
+tags:
+  - Anleitung
+  - MDN Meta
+  - Richtlinien
+translation_of: MDN/About/Linking_to_MDN
+---
+<div>{{MDNSidebar}}</div><p><span class="seoSummary">Wir bekommen regelmässige Anfragen von Benutzern, wie Verknüpfungen (Link) zu MDN erstellt werden können, und ob dies überhaupt erlaubt ist. Die kurze Antwort ist: <strong>Ja!</strong> Wie das am besten zu bewerkstelligen ist, wird im folgenden Abschnitt erklärt, bitte weiterlesen!</span></p>
+
+<h2 id="Darf_ich_zu_MDN_verknüpfen">Darf ich zu MDN verknüpfen?</h2>
+
+<p><strong>Ja!</strong> Absolut! Nicht nur ist der Link die Essenz des Webs, es ist gleichzeitig ein Weg den Benutzer auf glaubwürdige Quellen zu verweisen, sondern auch um die Arbeit zu zeigen, die die Community macht.</p>
+
+<p>Also, ja, wir bitten dich definitiv auf den Inhalt von MDN zu verknüpfen. Bitte nicht zögern: verknüpfe zur <a href="/">MDN Hauptseite</a>, oder, besser, verknüpfe tiefer zu einer spezifischen Seite in MDN, so wie angebracht. Für eine genaue Beschreibung zu welchen Seiten verknüpft werden kann, ist weiter unten nachzulesen.</p>
+
+<h2 id="Zu_welcher_Seite_sollte_ich_verknüpfen">Zu welcher Seite sollte ich verknüpfen?</h2>
+
+<p>Es gibt keine spezifische Seite zu der man sich verknüpfen kann. Was wichtig ist, ist <strong>wie relevant die Seite für <em>eure</em> Leser ist</strong>.</p>
+
+<ul>
+ <li>MDN-Hauptseite, <a href="/">https://developer.mozilla.org/</a>, wenn es um MDN in genereller Form geht.</li>
+ <li>Zu einer <strong>spezifischen Landungsseite</strong>: eine spezielle Seite, welche ein Inhaltsverzeichnis oder Index beinhaltet zu einem spezifischen Thema. Einige Seiten sind:
+  <ul>
+   <li>HTML: <a href="/en-US/docs/Web/HTML">https://developer.mozilla.org/en-US/docs/Web/HTML</a></li>
+   <li>HTML5: <a href="/en-US/docs/Web/Guide/HTML/HTML5">https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5</a></li>
+   <li>CSS: <a href="/en-US/docs/Web/CSS">https://developer.mozilla.org/en-US/docs/Web/CSS</a></li>
+   <li>CSS3: <a href="/en-US/docs/Web/CSS/CSS3">https://developer.mozilla.org/en-US/docs/Web/CSS/CSS3</a></li>
+   <li>DOM: <a href="/en-US/docs/Web/API/Document_Object_Model">https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model</a></li>
+   <li>JavaScript: <a href="/en-US/docs/Web/JavaScript">https://developer.mozilla.org/en-US/docs/Web/JavaScript</a></li>
+  </ul>
+ </li>
+ <li>Es kann auch direkt zu spezifischen Seite verknüpft werden, wenn es über bestimmte Elemente, Methoden... geht, wie zum Beispiel:
+  <ul>
+   <li>Wenn es über HTML Elemente geht (<a href="/en-US/docs/Web/HTML/Element">https://developer.mozilla.org/en-US/docs/Web/HTML/Element</a>) oder zu einem speziellen Element wie {{HTMLElement("colgroup")}}.</li>
+   <li>Wenn es über CSS geht, kann zu unserer Seite mit der CSS-Referenz verknüpft werden (ein grösseres Verzeichnis: <a href="/en-US/docs/Web/CSS/Reference">https://developer.mozilla.org/en-US/docs/Web/CSS/Reference</a>) oder direkt zu einer Eigenschaft wie {{cssxref("list-style-type")}}.</li>
+  </ul>
+ </li>
+</ul>
+
+<p><strong>Aber, wirklich, es sollte zur am besten passenden Seite für die Benutzer verknüpft werden.</strong> Bitte nicht vergessen, das wichtigste ist der Leser, nicht die Verknüpfung oder wir.</p>
+
+<h2 id="Wie_wird_eine_gute_Verknüpfung_erstellt">Wie wird eine gute Verknüpfung erstellt?</h2>
+
+<p>Eine Verknüpfung zu erstellen ist einfach, aber eine gute Verknüpfung zu erstellen ist umso schwieriger. Es gibt verschiedene Möglichkeiten:</p>
+
+<h3 id="Verknüpfen_im_Text">Verknüpfen im Text</h3>
+
+<p>Dies ist wohl die hilfreichste Art der Verknüpfung: der Sinn besteht darin, den Benutzer zu weiteren Informationen zu einem bestimmten Konzept zu leiten. Die meiste Zeit, führen diese Verknüpfungen zu Seiten, die bestimmte Informationen zu einem Thema enthalten und nicht zu einer generellen Heimseite eines Webauftritts (es gibt bestimmt auch Ausnahmen).</p>
+
+<blockquote>
+<p>… durch die Benutzung der <a href="/en-US/docs/IndexedDB">IndexedDB</a>-API, können Informationen in einer lokalen Datenbank gespeichert werden…</p>
+</blockquote>
+
+<p>Solche Verknüpfungen sind nicht nur für den Benutzer wertvoll, welcher alle relevanten Informationen mit einem Klick finden kann, sondern auch für MDN, weil dieser präzise Kontext womöglich Leser dazu bringt, den Inhalt von MDN zu mögen. Unsere Mission besteht darin, dem Leser zu helfen, alle wichtigen Informationen zu einem Thema schnellstmöglich zu finden.</p>
+
+<h4 id="Was_zu_vermeiden_ist_wenn_Verknüpfungen_im_Text_erstellt_werden">Was zu vermeiden ist, wenn Verknüpfungen im Text erstellt werden</h4>
+
+<p>Verknüpfungen im Text sind gut und hilfreich, aber es sollten einige Dinge beachtet werden:</p>
+
+<ul>
+ <li><strong>Nicht zu oft verknüpfen.</strong> Nicht jedes Wort verknüpfen, oder fast jedes Wort. Dies ist nervig. Sorgfältig auswählen, und nur die Hauptbestandteile im Text verknüpfen, oder zu speziellen Konzepten verknüpfen, die der Benutzer vermutlich noch nicht kennt.</li>
+ <li><strong>Nicht dasselbe Thema immer wieder verknüpfen.</strong> Wenn über CSS-Animationen geschrieben wird, so nicht jedes mal zu <a href="/en-US/docs/Web/CSS/animation"><code>animation</code> CSS property</a> verknüpfen, wenn der Begriff "animation" auftaucht. Sollte der Leser dieses Konzept nicht kennen, so wird er vermutlich auf die erste auftauchende Verknüpfung klicken und die betreffenden Informationen bekommen. Später im Text darf davon ausgegangen werden, dass dieses Konzept bekannt ist. Zum Begriff kann zwischendurch verknüpft werden (ein mal alle paar Abschnitte/Seiten), damit nicht ewig herumgesucht werden muss.</li>
+ <li><strong>Achtung wenn zu Forumen und Blogseiten verknüpft wird.</strong> Eine  Verknüpfung zu einer relevanten Quelle zu einer bestimmten Frage oder Problem ist gut und wird oft begrüsst. Wandern im Web und Spam-Verknüpfungen zu MDN werden nicht geschätzt: der Seiteninhaber sowie die Benutzer, werden Sie schnell als Spammer identifizieren und das Vertrauen in MDN wird leiden. Wir arbeiten hart daran, eine wertvolle Quelle zu bauen und mögen es nicht zu sehen, dass diese Bemühungen durch ein solches Verhalten zerstört werden, also nur Verknüpfungen setzen wenn sie unbedingt benötigt werden.</li>
+</ul>
+
+<h3 id="Ein_Banner_oder_ein_Bild_zur_Site_hinzufügen">Ein Banner oder ein Bild zur Site hinzufügen</h3>
+
+<p>Ein anderer Weg um zu MDN zu verknüpfen ist das Hinzufügen einer Bildverknüpfung ausserhalb des Textes, zum Beispiel in der Seitenleiste. Dies hat eine andere Bedeutung: so wie die Verknüpfung innerhalb des Textes zusätzliche Informationen für den Benutzer zugängig macht, ist das Hinzufügen von Bildverknüpfungen in der Seitenleiste mehr ein Weg um die Unterstützung vom MDN-Projekt hervorzuheben, oder ein Weg um MDN bekannter zu machen. Es ist ein Weg um MDN als globale Quelle von Informationen anzubieten.</p>
+
+<p>Bitte nicht zögern um uns ihre Unterstützung zu zeigen: besuchen Sie <a href="/en-US/docs/MDN/Promote">Promote MDN</a> und bauen Sie eine Schaltfläche (Button), welche auf Ihre Webseite zugeschnitten ist. Sie sind selbstverständlich frei zu anderen Seiten zu verknüpfen, wie zum Beispiel zu einer der Landungsseiten.</p>
+
+<h3 id="Automatische_Verknüpfung_zu_MDN_aus_WordPress">Automatische Verknüpfung zu MDN aus WordPress</h3>
+
+<p>Wir haben ein <a href="/en-US/docs/MDN/Promote#WordPress_plugin">WordPress plugin</a> erstellt, welches automatisch aus den Blogs heraus, Verknüpfungen zu den entsprechenden MDN-Seiten erstellt. Es verfolgt die oben gezeigten Richtlinien, und bildet so eine grosse Hilfe für Blogger, die über Webinhalte schreiben. Geben Sie ein schönes Aussehen und installieren Sie es wo es hilfreich sein kann.</p>
+
+<p>Vielen Dank für die Unterstützung!</p>
+
+<h2 id="Cross-Origin_Ressourcenfreigabe">Cross-Origin Ressourcenfreigabe</h2>
+
+<p>Unsere Absicht ist <a href="/docs/HTTP/Access_control_CORS" title="/docs/HTTP/Access_control_CORS">CORS</a> auf allen frei zugänglichen Informationen auf MDN anzubieten, wo es ungefährlich ist. Sollten Sie etwas finden was nicht erreicht werden kann mit <a href="/docs/HTTP/Access_control_CORS" title="/docs/HTTP/Access_control_CORS">cross-origin Anfragen</a>, ist dies <a href="https://bugzilla.mozilla.org/form.mdn" title="https://bugzilla.mozilla.org/form.mdn">ein Fehler der behoben werden sollte</a>!</p>
diff --git a/files/de/mdn_at_ten/history_of_mdn/index.html b/files/de/mdn_at_ten/history_of_mdn/index.html
new file mode 100644
index 0000000000..3e33c984f3
--- /dev/null
+++ b/files/de/mdn_at_ten/history_of_mdn/index.html
@@ -0,0 +1,228 @@
+---
+title: MDNs Geschichte
+slug: MDN_at_ten/History_of_MDN
+tags:
+  - MDN
+translation_of: MDN_at_ten/History_of_MDN
+---
+<div class="summary">
+<p>In diesem Gespräch schauen mehrere Mitwirkende von MDN auf die vergangenen zehn Jahre von <a href="https://developer.mozilla.org">developer.mozilla.org</a> zurück und auf das kommende Jahrzehnt. Du wirst die Geschichte verschiedener Wiki-Software-Migrationen hören, wie eine Gemeinschaft rund ums Dokumentieren entstanden ist und viele weitere Highlights der Geschichte dieser Seite. Anschließend spricht die Gruppe auch über aktuelle Herausforderungen und Projekte, an denen die MDN Gemeinschaft dieses Jahr arbeitet.</p>
+
+<div class="chapter-audio">
+<div class="hidden" id="audio">
+<h3 id="HTML_Inhalt">HTML Inhalt</h3>
+
+<pre class="brush: html">&lt;audio controls="controls"&gt;
+  Es sieht so aus, als ob dein Browser keinen eingebauten Audioplayer hat. Du kannst dir die Datei herunterladen und lokal abspielen: https://videos.cdn.mozilla.net/uploads/mdn/MDN10/MDN_RoundTable.mp3
+  &lt;source src="https://videos.cdn.mozilla.net/uploads/mdn/MDN10/MDN_RoundTable.mp3" type="audio/mp3"&gt;
+&lt;/audio&gt;
+</pre>
+
+<h3 id="CSS_Inhalt">CSS Inhalt</h3>
+
+<pre class="brush: css"> body{margin-top:8px;}</pre>
+
+<p>{{ EmbedLiveSample('audio', 'auto', '50px') }}</p>
+
+<p>Unten lernst du mehr über die Leute kennen, die ihre Erinnerungen und Gedanken teilen und erhalte einen tieferen Einblick in bestimmte Details, die sie erwähnen.</p>
+</div>
+</div>
+
+<div class="chapters" id="chapters">
+<article class="chapter chapter-portrait" id="hoosteeno"><a class="chapter-portrait-img" href="https://twitter.com/hoosteeno"><img alt="Justin Crawford" src="https://avatars0.githubusercontent.com/u/94519" style="height: 128px; width: 128px;"> </a>
+
+<h2 id="Justin_Crawford_Produktmanager_MDN">Justin Crawford <small>Produktmanager, MDN</small></h2>
+
+<p>Justin moderiert dieses Gespräch und macht Dinge mit Code, Wörtern, Fahrradteilen und moderates this talk and makes things with code, words, bike parts, and Trödelkram. Er ist <a href="https://twitter.com/hoosteeno">@hoosteeno</a> auf Twitter.</p>
+</article>
+
+<article class="chapter chapter-justtext" id="mdn-intro">
+<h2 id="Was_ist_MDN_und_für_wen_ist_es_Ein_Platz_für_die_Gemeinschaft_des_Open_Web">Was ist MDN und für wen ist es? <small> Ein Platz für die Gemeinschaft des Open Web</small></h2>
+
+<p>MDN bietet nützliche Informationen rund um Web Technologien und fördert das Lernen, Teilen und Schulen innerhalb der Open Web Gemeinschaft. Auf MDN kommen die Leute zusammen und erstellen Dinge für dich und für andere.</p>
+Ein Platz für Mozilla Entwickler
+
+<p>MDN ist auch ein Platz für Mozilla Entwickler, wie Gecko oder Firefox Programmierer, Add-on Entwickler und Firefox OS Mitwirkende.</p>
+</article>
+
+<article class="chapter chapter-portrait" id="sheppy"><a class="chapter-portrait-img" href="https://twitter.com/sheppy"><img alt="Eric Shepherd" src="https://pbs.twimg.com/profile_images/454358640518914048/WX1xBTs9.jpeg" style="height: 128px; width: 128px;"> </a>
+
+<h2 id="Eric_Sheppy_Shepherd_Technischer_Autor_MDN">Eric "Sheppy" Shepherd <small> Technischer Autor, MDN</small></h2>
+
+<p>Sheppy ist hier und dokumentiert für Mozilla seit 2006 und hat eine lange Geschichte (und verrückte Ideen) im Zusammenhang mit MDC und MDN. Er ist <a href="https://twitter.com/sheppy">@sheppy</a> auf Twitter.</p>
+</article>
+
+<article class="chapter chapter-justtext" id="mdn-history">
+<h2 id="Die_Geschichte_von_MDN_Ära_vor_Wiki_–_Netscape_DevEdge">Die Geschichte von MDN <small>Ära vor Wiki – Netscape DevEdge</small></h2>
+
+<p>In den frühen Jahren gab es <em>DevEdge</em>, die Entwicklerdokumentation von Netscape, welche die Basis für einen Teil der Dokumentation auf MDN bildet. Schau dir die Vergangenheit auf <a href="https://web.archive.org/web/20020819120942/http://devedge.netscape.com/">archive.org</a> an:</p>
+
+<p><a href="https://web.archive.org/web/20020819120942/http://devedge.netscape.com/"><img alt="Netscape DevEdge" src="https://mdn.mozillademos.org/files/11597/devedge.png" style="height: 300px; width: 600px;"> </a></p>
+
+<p>Am 12. Oktober 2004 wurde diese beliebte Entwicklerwebseite von AOL, Netscapes Mutterkonzern, abgeschaltet. Nur ein paar Monate später, im Februar 2015 konnte <a href="https://blog.lizardwrangler.com/">Mitchell Baker</a> <a href="https://blog.lizardwrangler.com/2005/02/23/devmo-and-devedge-updates/">DevEdge retten</a> und eine Vereinbarung mit AOL aushandeln, die es Mozilla erlaubte, basierend auf den früheren Netscape DevEdge Materialien neue Dokumente zu posten, zu verändern und zu erstellen. Mit anderen Worten, was 1998 mit dem Mozilla Quellcode geschehen ist, passierte schließlich auch mit Netscapes Entwicklerdokumentation: Sie wurde quelloffen.</p>
+
+<p>Deb Richardson ist der Mozilla Foundation als technische Autorin beigetreten und leitete das neue <em>DevMo</em> Projekt für die von der Gemeinschaft geleitete Dokumentation.</p>
+</article>
+
+<article class="chapter chapter-justtext" id="mediawiki">
+<h2 id="MediaWiki_Die_erste_Wiki-Engine">MediaWiki <small> Die erste Wiki-Engine</small></h2>
+
+<p>Mit MediaWiki als neuer darunterliegender Projektplatform wurde die Mozilla Entwicklerdokumentation im Juli 2005 für jedermann bearbeitbar gemacht. Es wurde ein neues kollaboratives Element in Mozilla eingeführt und seit diesem Augenblick ist jeder willkommen, um es zu verbessern und sein Wissen zu teilen. Eine neue internationale Gemeinschaft begann zu wachsen und Entwicklerinhalte in andere Sprachen zu übersetzen.</p>
+
+<p><a href="https://web.archive.org/web/20051226031957/http://developer.mozilla.org/en/docs/Main_Page"><img alt="MDC MediaWiki" src="https://mdn.mozillademos.org/files/11603/mediawiki.png" style="height: 390px; width: 600px;"> </a></p>
+</article>
+
+<article class="chapter chapter-portrait" id="fscholz"><a class="chapter-portrait-img" href="https://twitter.com/floscholz"><img alt="Florian Scholz" src="https://avatars1.githubusercontent.com/u/349114" style="height: 128px; width: 128px;"> </a>
+
+<h2 id="Florian_Scholz_Technischer_Autor_MDN">Florian Scholz <small> Technischer Autor, MDN</small></h2>
+
+<p>Florian ist ein technischer Autor bei Mozilla, der sich auf Technologien des Open Web fokussiert. Er ist ein Wikizwerg, der die Dokumentation pflanzt als wäre sie Blumen, und er mag es, gemeinsam mit der Gemeinschaft an dem Ziel zu arbeiten, das Web zu dokumentieren und es für jeden zugänglich zu machen. Florian ist passioniert gegenüber Open Source. Er wohnt in Bremen, Deutschland, und tweetet als <a href="https://twitter.com/floscholz">@floscholz</a> auf Twitter.</p>
+</article>
+
+<article class="chapter chapter-justtext" id="dekiwiki">
+<h2 id="DekiWiki_Die_zweite_Wiki-Engine">DekiWiki <small> Die zweite Wiki-Engine</small></h2>
+
+<p>Im August 2008 wechselte das Mozilla Developer Center zu MindTouch DekiWiki, einem leistungsstarken und neuen Content Management System und Wiki System für technische Dokumentation. Dieser Plattformwechsel wurde in der Gemeinschaft kontrovers aufgenommen, die MediaWiki seit 2005 gewohnt war und Werkzeuge dafür entwickelt hatte.</p>
+
+<p><a href="https://web.archive.org/web/20080907231611/http://developer.mozilla.org/en"><img alt="MDC DekiWiki" src="https://mdn.mozillademos.org/files/11595/dekiwiki.png"> </a></p>
+</article>
+
+<article class="chapter chapter-portrait" id="aspivak"><a class="chapter-portrait-img" href="https://twitter.com/alispivak"><img alt="Ali Spivak" src="https://pbs.twimg.com/profile_images/111121498/ali_profile1.jpg" style="height: 128px; width: 128px;"> </a>
+
+<h2 id="Ali_Spivak_Hirtin_der_fantastischen_MDN-Katzen">Ali Spivak <small> Hirtin der fantastischen MDN-Katzen</small></h2>
+
+<p>Ali Spivak managt Inhalt und Gemeinschaft im Mozilla Developer Network und verbringt ihre Zeit damit, sich Wege auszudenken, die helfen, das Web noch toller zu geschalten. Sie kümmert sich darum, dass das Web offen und frei bleibt und, nachdem sie durch ihren Beitritt zu Mozilla 2012 mit Open Source in Berührung gekommen ist, konzentriert sie sich darauf, die Entwicklercommunities bei Mozilla zu stärken und daran teilzunehmen. Sie ist <a href="https://twitter.com/alispivak">@alispivak</a> auf Twitter.</p>
+</article>
+
+<article class="chapter chapter-justtext" id="kuma">
+<h2 id="Kuma_Die_dritte_und_aktuelle_Wiki-Engine">Kuma <small> Die dritte und aktuelle Wiki-Engine</small></h2>
+
+<p><a href="https://github.com/mozilla/kuma">Kuma</a>, das sich Anfang 2011 von <a href="https://github.com/mozilla/kitsune">Kitsune</a> abgezweigt hat und am 3. August 2012 veröffentlicht wurde, ist eine von Mozilla entwickelte Wikiplattform basierend auf Django, mit seinem eigenen <a href="/en-US/docs/MDN/Kuma/Introduction_to_KumaScript">KumaScript</a> Makrosystem, welches Node.js verwendet.</p>
+
+<p>Dadurch, dass der Code auf GitHub lebt, fing die Gemeinschaft an, ebenfalls an MDNs CMS mitzuwirken. Seit diesem Zeitpunkt beinhaltet Programmieren auf MDN beides, die Dokumentation zu schreiben und Kuma zu entwickeln.</p>
+
+<p><a href="https://web.archive.org/web/20121003233220/https://developer.mozilla.org/en-US/"><img alt="MDN KUMA" src="https://mdn.mozillademos.org/files/11599/kuma.png" style="height: 287px; width: 600px;"> </a></p>
+</article>
+
+<article class="chapter chapter-portrait" id="davidwalsh"><a class="chapter-portrait-img" href="http://twitter.com/davidwalshblog"><img alt="David Walsh" src="https://pbs.twimg.com/profile_images/2587630901/6gk0dqubt5512yk18a6o_400x400.png" style="height: 128px; width: 128px;"> </a>
+
+<h2 id="David_Walsh_Webentwickler_MDN">David Walsh <small> Webentwickler, MDN</small></h2>
+
+<p>Mozilla Senior Webentwickler, Front-End Engineer, MooTools Hauptentwickler, JavaScript Fanatiker, CSS Tüftler, PHP Hacker, Web und Open Source Liebhaber. David ist <a href="https://twitter.com/davidwalshblog">@davidwalshblog</a> auf Twitter.</p>
+</article>
+
+<article class="chapter chapter-justtext" id="mdn-redesign">
+<h2 id="Neugestaltung_von_MDN_Kuma_mit_erneuertem_Design">Neugestaltung von MDN <small> Kuma mit erneuertem Design</small></h2>
+
+<p>Das Redesign von MDN war ein Großprojekt. <a href="https://twitter.com/mart3ll">Sean Martell</a> entwarf MDNs neues Erscheinungsbild. Zu der Zeit war es ein iterativer Prozess mit einer Beta-Benutzergruppe von 3000 MDN-Leuten, der mehrere Monate in Anspruch genommen hat. Das neue Aussehen war hinter einem "Waffle Flag" (MDNs Featureflag System). Großer Dank auch an <a href="https://twitter.com/davidwalshblog/">David Walsh</a>, der das gesamte Redesign meisterte und MDN das Frontend gab, das es verdient.</p>
+<img alt="Waffle flag" src="https://mdn.mozillademos.org/files/11601/waffle-flag.jpg" style="height: 384px; width: 400px;"></article>
+
+<article class="chapter chapter-portrait" id="jswisher"><a class="chapter-portrait-img" href="https://twitter.com/jmswisher"><img alt="Janet Swisher" src="https://pbs.twimg.com/profile_images/3681972492/8ed406f7d19e188e4e8936b6836b2214.jpeg" style="height: 128px; width: 128px;"> </a>
+
+<h2 id="Janet_Swisher_Community_Managerin_MDN">Janet Swisher <small> Community Managerin, MDN</small></h2>
+
+<p>Janet ist eine Mozilla Community Managerin für das Mozilla Developer Network. She trat Mozilla 2010 bei und hat seit 2004 mit Open Source Software zu tun und mit technischer Kommunikation seit dem 20. Jahrhundert. Sie lebt in Austin, Texas, mit ihrem Ehemann und einem Pudel. Sie ist <a href="https://twitter.com/jmswisher">@jmswisher</a> auf Twitter.</p>
+</article>
+
+<article class="chapter chapter-justtext" id="mdn-open">
+<h2 id="Gemeinschaft_rund_um_Open_Web_Dokumentation_Von_der_Gemeinschaft_geleitete_browserunabhängige_Open_Web_Dokumentation">Gemeinschaft rund um Open Web Dokumentation <small> Von der Gemeinschaft geleitete, browserunabhängige Open Web Dokumentation</small></h2>
+
+<p>Irgendwann 2010, insbesondere als <a href="https://hacks.mozilla.org/2010/10/web-standards-doc-sprint-finis/">sich Mitglieder der Gemeinschaft und technische Autoren in Paris trafen</a>, wurde deutlich, dass sich MDNs Fokus weg von "Lass uns alles rund um Firefox dokumentieren!" hin zu "Lass uns das Web dokumentieren!" bewegt. Die Dokumentation wurde über die letzten Jahre bereinigt und umstrukturiert, sodass MDNs Open Web Dokumentation browserunabhängig ist. Dieses Material, das für alle nützlich ist, die für das Web entwickeln, ist der beliebteste und am häufigsten benutzte Inhalt.</p>
+
+<p>Verschiedene Browserhersteller haben von Zeit zu Zeit dazu beigetragen, diesen Teil von MDN mitzugestalten. Diese browserübergreifende Zusammenarbeit war sehr erfolgreisch und wurde von den MDN Lesern sehr geschätzt.</p>
+</article>
+
+<article class="chapter chapter-portrait" id="groovecoder"><a class="chapter-portrait-img" href="https://twitter.com/groovecoder"><img alt="Luke Crouch" src="https://pbs.twimg.com/profile_images/620387561031102464/DC_PRaDa.jpg" style="height: 128px; width: 128px;"> </a>
+
+<h2 id="Luke_Crouch_Webentwickler_MDN">Luke Crouch <small>Webentwickler, MDN</small></h2>
+
+<p>Luke Crouch ist ein Hobbybrauer, Fußballfan und Webentwickler für Mozilla. Er arbeitet am Web seit 1996 und benutzt Firefox seit 2004, schreibt Open Source Software seit 2006 und trat 2010 Mozilla als erster angestellter MDN-Webentwickler bei. Luke ist <a href="https://twitter.com/groovecoder">@groovecoder</a> auf Twitter.</p>
+</article>
+
+<article class="chapter chapter-justtext" id="l10n">
+<h2 id="Übersetzungscommunities_MDN_dient_einem_globalen_Publikum_in_vielen_Sprachen">Übersetzungscommunities <small> MDN dient einem globalen Publikum in vielen Sprachen</small></h2>
+
+<p>Übersetzung ist ein großer Teil der Mozilla Gemeinschaft; sie ist eine Komponente fast jedes Projekts und Produkts. Durch Kuma ist MDN ebenfalls sehr leicht übersetzbar und angepasst an <a href="/en-US/docs/MDN/Contribute/Localize">unsere Übersetzercommunity</a>. Die W3C-Spezifikationen und andere Ressourcen, die die Funktionalität des Webs beschreiben, haben keine genauen Ziele und haben Communities, die Spezifikationen in mehreren Sprachen erstellen. Besonders für Einsteiger ist MDN der erste Schritt zur Erkundung der Webtechnologien, daher ist es unser Ziel, für jeden da zu sein. MDN hat ein breites Publikum und will nicht nur englische Muttersprachler einbinden. Es wird in aller Welt geschätzt.</p>
+</article>
+
+<article class="chapter chapter-portrait"><a class="chapter-portrait-img" href="https://twitter.com//Sphinx_Twitt"><img alt="Julien" src="https://ffp4g1ylyit3jdyti1hqcvtb-wpengine.netdna-ssl.com/community/files/2015/05/ensemble.png" style="height: 128px; width: 128px;"> </a>
+
+<h2 id="Julien_(a.k.a._Sphinx)_Französische_Übersetzung_MDN">Julien (a.k.a. Sphinx) <small> Französische Übersetzung, MDN</small></h2>
+
+<p>Julien verbringt viele Nächte und Wochenenden damit, JavaScript-Artikel in französisch zu übersetzen. Er ist kein Programmierer, aber hat einen IT-Hintergrund und will mehr über neue Technologien lernen. Er arbeitet lieber an MDN mit anstatt fernzusehen.</p>
+</article>
+
+<article class="chapter chapter-portrait" id="teoli"><a class="chapter-portrait-img" href="https://twitter.com/Teoli2003"><img alt="an-Yves Perrier" src="https://pbs.twimg.com/profile_images/604271935099392001/NMrPWLGm.jpg" style="height: 128px; width: 128px;"> </a>
+
+<h2 id="Jean-Yves_Perrier_Technischer_Autor_MDN">Jean-Yves Perrier <small> Technischer Autor, MDN</small></h2>
+
+<p>Jean-Yves ist seit 2010 technischer Autor für MDN und trat Mozilla 2011 als Vollzeitmitarbeiter bei. Er liebt das Open Web mit 15 Jahren Erfahrung C++. Er ist Schweizer, aber lebt in London, England. Seine Erdős-Zahl ist 5 und er ist <a href="https://twitter.com/Teoli2003">@Teoli2003</a> auf Twitter.</p>
+</article>
+
+<article class="chapter chapter-justtext" id="mdn-learning">
+<h2 id="Lernbereich">Lernbereich</h2>
+
+<p>Die <a href="https://developer.mozilla.org/en-US/Learn">Learning Area</a> ist ein neues Bestreben, grundlegende Webfähigkeiten zu vermitteln. Über die letzten 10 Jahre hat MDN viel fortgeschrittenes Material hinzugefügt, das Experten wertvolle Informationen bietet. Dieses Projekt liefert Materialien für Anfänger und versucht, viele Wissenslücken zu schließen.</p>
+</article>
+
+<article class="chapter chapter-portrait" id="jeremie"><a class="chapter-portrait-img" href="https://twitter.com/jeremiepat"><img alt="Jérémie Patonnier" src="https://pbs.twimg.com/profile_images/1731588715/jeremie-patonnier-150.jpg" style="height: 128px; width: 128px;"> </a>
+
+<h2 id="Jérémie_Patonnier_Technischer_Autor_MDN">Jérémie Patonnier <small> Technischer Autor, MDN</small></h2>
+
+<p>Jérémie ist langjähriger Mitwirkender am Mozilla Developer Network und ein professioneller Webentwickler seit 2000. Er verfechtet Webstandards und schreibt Dokumentation über Webtechnologien mit dem Ziel, sie für jeden zugänglich zu machen. Er ist <a href="https://twitter.com/JeremiePat">@JeremiePat</a> auf Twitter.</p>
+</article>
+
+<article class="chapter chapter-justtext" id="mdn-future">
+<h2 id="MDNs_Zukunft_Was_wird_anders_sein_wenn_wir_20_Jahre_MDN_feiern">MDNs Zukunft <small> Was wird anders sein, wenn wir 20 Jahre MDN feiern?</small></h2>
+
+<p>Jeder, der an MDN arbeitet, engagiert sich dafür, dass das Web offen und zugänglich ist, und das ist der Grund warum wir die Übersetzerteams und all die mitwirkenden Leute haben. MDN hofft, weiterhin eine Schlüsselrolle darin zu spielen, das Web so zu bewahren, wie wir finden, dass es sein sollte.</p>
+
+<p>Ein großer Teil dieser Zukunft werden Lernmaterialien sein. Es wird die nächsten zehn Jahre wesentlich mehr Webentwickler geben.</p>
+
+<p>Ein weiterer großer Teil unserer Arbeit besteht darin, die bereits bestehenden Informationen zu pflegen und zu aktualisieren, sodass wir Webentwicklern immer relevanten Inhalt bieten.</p>
+
+<p>Was sich ändert und in Zukunft wahrscheinlich noch mehr, ist, wie Informationen konsumiert werden. Heute suchen Leute nach Information und schauen in der Dokumentation nach. In Zukunft könnte MDN Dokumentation in Codeeditoren, den Firefox Entwicklertools und vielen anderen Entwicklertools und Services zur Verfügung stehen.</p>
+</article>
+
+<article class="chapter chapter-justtext" id="mdn-contributors">
+<h2 id="Erwähnenswerte_Mitwirkende_Viele_weitere_Leute_leisten_fantastische_Arbeit_auf_MDN">Erwähnenswerte Mitwirkende <small> Viele weitere Leute leisten fantastische Arbeit auf MDN</small></h2>
+
+<div class="twocolumns">
+<ul>
+ <li>Les Orchard</li>
+ <li>John Karahalis</li>
+ <li>David Walsh</li>
+ <li>Jannis Leidel</li>
+ <li>Stephanie Hobson</li>
+ <li>James Bennett</li>
+ <li>Isac Lagerblad</li>
+ <li>Piotrek Koszuliński</li>
+ <li>Craig Cook</li>
+ <li>Rob Hudson</li>
+ <li>John Whitlock</li>
+ <li>...<br>
+  Und viele weitere <a href="https://github.com/mozilla/kuma/graphs/contributors">Kuma Mitwirkende.</a></li>
+</ul>
+
+
+<ul>
+ <li>Chris Mills</li>
+ <li>Will Bamberg</li>
+ <li>David Bruant</li>
+ <li>Thierry Régagnon</li>
+ <li>etherthank</li>
+ <li>Saurabh Nair</li>
+ <li>Deb Richardson</li>
+ <li>Sebastian Zartner</li>
+ <li>Tooru Fujisawa</li>
+ <li>Karen Scarfone</li>
+ <li>Niklas Barning</li>
+ <li>...<br>
+  Und hunderte weiterer Wiki-Mitarbeiter.</li>
+</ul>
+</div>
+<img alt="The Berlin Office" src="https://mdn.mozillademos.org/files/11593/11073502_781006205281080_8135317797319228200_o-600x400.jpg"></article>
+
+<div style=""> </div>
+</div>
+</div>
diff --git a/files/de/mdn_at_ten/index.html b/files/de/mdn_at_ten/index.html
new file mode 100644
index 0000000000..91495de944
--- /dev/null
+++ b/files/de/mdn_at_ten/index.html
@@ -0,0 +1,40 @@
+---
+title: 10 Jahre MDN
+slug: MDN_at_ten
+tags:
+  - MDN
+  - TopicStub
+translation_of: MDN_at_ten
+---
+<p class="hidden"><span class="seoSummary summary">Feiern Sie zehn Jahre Dokumentation Ihres Internets.</span></p>
+
+<div class="column-container">
+<div class="column-8">
+<h2 id="Die_Geschichte_des_MDN">Die Geschichte des MDN</h2>
+
+<p>Anfang 2005 machte es sich ein kleines Team von Idealisten zum Ziel eine neue, freie und von einer Gemeinschaft geförderte Online-Resource für alle Webentwickler zu schaffen. Ihre brillante, wenn auch ungewöhnliche Idee entwickelte sich zum heutigen Mozilla Developer Network — die wichtigste Informationsquelle für alle offenen Webtechnologien. Zehn Jahre später ist unsere globale Gemeinschaft grösser als je zuvor und gemeinsam erstellen wir noch immer Dokumentationen, Beispielcode und Lernmaterialien für alle offenen Webtechnologien, darunter CSS, HTML, JavaScript und alles andere, was das Web so mächtig macht wie wir es kennen.</p>
+
+<p><a class="learnmore" href="/de/docs/MDN_at_ten/History_of_MDN">Mehr erfahren <span class="offscreen">about the history</span></a></p>
+
+
+<h2 id="Zum_MDN_beitragen">Zum MDN beitragen</h2>
+
+<p>Seit zehn Jahren dokumentiert die MDN Gemeinschaft bereits das offene Web. Von der Korrektur kleiner Tippfehler bis zum Schreiben verschiedener Folgen über brandneue APIs: Jede und jeder kann etwas beitragen und kein Beitrag ist zu gross oder zu klein. Wir verfügen über 90.000 Seiten an Inhalt, welche von unserer hervorragenden Gemeinschaft an Mozillianern und Mozillianerinnen geschrieben oder übersetzt wurden. Sie können auch jemand von ihnen werden.</p>
+
+<p><a class="learnmore" href="/de/docs/MDN_at_ten/Contributing_to_MDN">Mehr erfahren <span class="offscreen">about contributing</span></a></p>
+
+<p> </p>
+
+<p> </p>
+</div>
+
+<div class="column-4">{{TenthCampaignQuote}}</div>
+
+<h2 id="Subnav">Subnav</h2>
+
+<ol>
+ <li><a href="/de/docs/MDN_at_ten/">10 Jahre MDN</a></li>
+ <li><a href="/de/MDN_at_ten/History_of_MDN">Die Geschichte des MDN</a></li>
+ <li><a href="/docs/MDN_at_ten/Contributing_to_MDN">Zum MDN beitragen</a></li>
+</ol>
+</div>
diff --git a/files/de/mdn_at_ten/zum_mdn_beitragen/index.html b/files/de/mdn_at_ten/zum_mdn_beitragen/index.html
new file mode 100644
index 0000000000..7fc3bce3fa
--- /dev/null
+++ b/files/de/mdn_at_ten/zum_mdn_beitragen/index.html
@@ -0,0 +1,93 @@
+---
+title: Zum MDN beitragen
+slug: MDN_at_ten/Zum_MDN_beitragen
+tags:
+  - MDN Meta
+  - Mitmachen
+translation_of: MDN_at_ten/Contributing_to_MDN
+---
+<div class="column-container">
+<div class="column-8">
+<h2 id="Wie_Du_helfen_kannst">Wie Du helfen kannst</h2>
+
+<p>Das ist sehr einfach. Es gibt zwei Wege: Siehst Du etwas was man auf einer Seite verbessern kann, z.B. Tippfehler korrigieren, neue Informationen hinzufügen oder inhaltliche Fehler korrigieren? Dann klicke auf die grosse blaue "Bearbeiten" Schaltfläche ganz oben auf der Seite. Weisst Du etwas worüber es noch keinen Artikel im MDN gibt? Dann<a href="https://developer.mozilla.org/de/docs/MDN/Contribute/Creating_and_editing_pages#Creating_a_new_page"> lege eine neue Seite an</a>; unsere Gemeinschaft von erstklassigen Redakteuren und Textern wird sicherstellen, dass Deine Seite unseren<a href="https://developer.mozilla.org/de/docs/MDN/Contribute/Guidelines/Writing_style_guide"> Design-Richtlinien</a> entspricht und sich am richtigen Platz auf der MDN-Homepage befindet. Du brauchst keine Angst vor Fehlern haben. Jeder kann helfen, das Web zu verbessern.</p>
+</div>
+
+<div class="column-4">
+<div class="promo10 promo10-globe">
+<div class="promo10-text">
+<h3 id="Mach_mit!">Mach mit!</h3>
+
+<p>Hilf uns der Welt zu zeigen wie man für ein offenes Internet entwickelt!</p>
+
+<p><a class="learnmore" href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started">Mitmachen</a></p>
+</div>
+</div>
+</div>
+</div>
+
+<div class="column-container">
+<div class="column-8">
+<h2 id="Einige_Mitwirkende">Einige Mitwirkende</h2>
+
+<p>Das MDN besteht aus einer grossen Gemeinschaft von Helfern. Wir können hier nicht die Profile aller Mitwirkenden präsentieren (das würde sehr lange dauern!). Aber wir möchten Dir einige Menschen vorstellen, die einen wesentlichen Beitrag zum MDN geleistet haben und immer noch leisten und die Leute, die Dir sehr wahrscheinlich im Falle von Fragen oder Problemen im <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">MDN Web Docs</a> helfen können.</p>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Chris_Blizzard_Früherer_Director_of_Evangelism_Mozilla">Chris Blizzard<br>
+ <small>Früherer Director of Evangelism, Mozilla</small></h3>
+
+<p><a href="/profiles/Blizzard">Blizzard</a> beaufsichtigte und leitete den Wandel des Mozilla Developer Centers (MDC) weg von einer auf Mozilla-Themen fokussierten Quelle hin zu einem community-basierten Netzwerk für viele verschiedene Web-Entwickler.</p>
+
+<h3 id="Nickolay_Ponomarev_Volunteer">Nickolay Ponomarev<br>
+ <small>Volunteer</small></h3>
+
+<p><a href="/profiles/Nickolay">Nickolay</a> <span class="author-p-1669">war einer der ersten Mitwirkenden und half bei der initialen Bereinigung des Systems beim Wechsel vom MDC zum MDN. Er hat seitdem in vielen Bereichen geholfen, sowohl bei Web Standards als auch bei Mozilla-Produkten</span>.</p>
+
+<h3 id="Andrew_Overholt_Engineering_Manager">Andrew Overholt<br>
+ <small>Engineering Manager</small></h3>
+
+<p><a href="/profiles/Overholt">Andrew</a><span class="author-g-l0xhvihafq5iyoyt"> leitet ein Entwickler-Team im Bereich Web API. Ein Teil seiner Arbeit ist es, alle DOM und API Entwickler zu ermutigen eine exzellente Dokumentation zu ermöglichen indem sie den Texter-Teams alle benötigten Informationen liefern, die erstellten Dokumentationen überprüfen und Beispielcode bereit stellen. Dieses Beispiel macht das MDN Team sehr, sehr glücklich.</span></p>
+
+<h3 id="Jérémie_Patonnier_Project_Manager">Jérémie Patonnier<br>
+ <small>Project Manager</small></h3>
+
+<p><a href="/profiles/Jeremie">Jérémie</a> begann im Jahr 2011 das MDN durch das Dokumentieren von SVG Eigenschaften zu unterstützen, denn er brauchte diese Informationen für seine eigene Arbeit. Jérémie wurde zur Führungsperson in der französischen MDN community und veranstaltet regelmäßig "Mercredi Docs" (Wednesday Docs) Tagungen in der Pariser Niederlassung von Mozilla . Momentan leitet er die Projekte zum Aufbau des <a href="/en-US/Learn">Schulungsbereichs</a> und zum Verbessern und Vereinheitlichen von Browser Kompatibilitätsdaten im MDN.</p>
+
+<h3 id="Julien_Sphinx_Volunteer_2"><span id="Julien_Sphinx_Volunteer">Julien (Sphinx)<br>
+ <small>Volunteer</small></span></h3>
+
+<p><a href="/en-US/profiles/SphinxKnight">Julien</a> steuerte den Löwenanteil zum Übersetzen des gesamten JavaScript Bereichs ins Französische bei. Viele andere halfen dabei mit, aber Julien verbrachte viele Monate lang viele Nächte und Wochenenden damit die JavaScript Artikel zu übersetzen.</p>
+
+<h3 id="Jeff_Walden_Software_Engineer_JavaScript_Engine">Jeff Walden<br>
+ <small>Software Engineer, JavaScript Engine</small></h3>
+
+<p><a href="/profiles/Waldo">Jeff Walden</a> <span class="author-p-1669">ist jetzt</span><span class="author-g-jkiyvakmsbole3bz122z"> im SpiderMonkey Team, welches am MDN von Anfang an mitgewirkt hat und das in vielen Themenbereichen, z.B. <a href="/en-US/docs/Mozilla/XPCOM">XPCOM</a>, Mozilla build and test, <a href="/en-US/docs/en-US/javascript">JavaScript</a>, <a href="/en-US/docs/Web/CSS">CSS</a>, und anderen</span>.</p>
+</div>
+
+<div class="column-half">
+<h3 id="Priyanka_Nag_Volunteer">Priyanka Nag<br>
+ <small>Volunteer</small></h3>
+
+<p><a href="/profiles/Priyanka13">Priyanka Nag</a> trat im Jahr 2012 dem MDN bei. Aktiv wurde sie in der MDN community aber erst nach dem Mozilla Summit 2013, wo sie mit Luke Crouch und David Walsh vom MDN Entwickler-Team zusammen arbeitete. Das war ihre größte Inspiration um im MDN aktiv zu werden. Priyanka kümmert sich am liebsten um die Verbreitung des MDN, veranstaltet MDN Events und gewinnt neue MDN-Mitwirkende, zudem pflegt sie das Wiki von Zeit zu Zeit. Momentan arbeitet sie als Technische Texterin bei Red Hat und voller Stolz erzählt sie dass ihr Interesse am technischen Schreiben durch die Mitarbeit im MDN geweckt wurde, was letzlich auch ihre Entscheidung hinsichtlich ihres beruflichen Wegs massgeblich und positiv beeinflusst hat.</p>
+
+<h3 id="Saurabh_Nair_Volunteer">Saurabh Nair<br>
+ <small>Volunteer</small></h3>
+
+<p><a href="/profiles/jsx">Saurabh</a> wirkt seit 2011 im MDN mit und wurde im letzten Jahr aktiver. Er ist im  “spam watch” Team, welches nach Spam-Seiten Ausschau hält, diese löscht und die Spammer verbannt sobald sie auftauchen. Da er in Indien lebt kann er diese Arbeit machen während die MDN-Mitarbeiter in Europa und Nord-Amerika schlafen.</p>
+
+<h3 id="Eric_Shepherd_Sheppy_Senior_Technical_Writer">Eric Shepherd (Sheppy)<br>
+ <small>Senior Technical Writer</small></h3>
+
+<p>{{UserLink("Sheppy")}} war der erste bei Mozilla angestellte Vollzeit-Texter ausschliesslich für Entwickler-Dokumentation, begonnen hat er am 3. April 2006. Er schreibt über alles was dokumentiert werden muss; einschliesslich der Sachen, mit denen sonst niemand etwas zu tun haben will. Über die Jahre hat er ausführlich über alles Mögliche geschrieben von Add-ons bis XUL.</p>
+
+<h3 id="Sebastian_Zartner_Volunteer">Sebastian Zartner<br>
+ <small>Volunteer</small></h3>
+
+<p><a href="/en-US/profiles/sebastianz">Sebastian</a>s erste Arbeiten waren im Jahr 2007 im Bereich deutschsprachiger Übersetzungen, aber er begann schnell die englischsprachigen Artikel zu bearbeiten. Er hat sowohl zum Content als auch zur Struktur der CSS Referenz viel beigetragen, einschliesslich der Erstellung eines JSON API für CSS Seiten und Makros die dieses API verwenden.</p>
+</div>
+</div>
+</div>
+
+<div class="column-4">{{TenthCampaignQuote(7)}} {{TenthCampaignQuote(5)}}</div>
+</div>
diff --git a/files/de/mercurial/index.html b/files/de/mercurial/index.html
new file mode 100644
index 0000000000..35b8843732
--- /dev/null
+++ b/files/de/mercurial/index.html
@@ -0,0 +1,36 @@
+---
+title: Mercurial
+slug: Mercurial
+translation_of: Mozilla/Mercurial
+---
+<p><a class="external" href="http://mercurial.selenic.com/"><strong>Mercurial</strong></a> (also known as "hg"), is the <a class="external" href="https://en.wikipedia.org/wiki/Distributed_revision_control">distributed version control</a> software used for the development of Firefox, Thunderbird, and the shared Gecko core. It replaced <a href="/en-US/docs/Developer_Guide/Source_Code/CVS" title="en-US/docs/Developer_Guide/Source_Code/CVS">CVS</a> after Mozilla 1.9 was branched.</p>
+
+<p><strong><code>hg</code></strong> is the Mercurial command-line tool, Hg being the chemical symbol for the element mercury.</p>
+
+<h2 id="Learning_to_use_Mercurial" name="Learning_to_use_Mercurial">Installation, configuration, and getting the source</h2>
+
+<p>See <a href="/en-US/docs/Installing_Mercurial" title="/en-US/docs/Installing_Mercurial">Installing Mercurial</a> for installation and configuration tips.</p>
+
+<p>See <a href="/en-US/docs/Developer_Guide/Source_Code/Mercurial" title="en-US/docs/Developer_Guide/Source_Code/Mercurial">Getting Mozilla Source Code Using Mercurial</a> for getting a tree to build.</p>
+
+<h2 id="Learning_to_use_Mercurial" name="Learning_to_use_Mercurial">Learning to use Mercurial</h2>
+
+<p>If you are new to Mercurial, you should start with the <a href="http://mercurial.selenic.com/guide">official guide</a>.</p>
+
+<p>Then, move on to <a href="/en-US/docs/Mercurial_basics" title="en-US/docs/Mercurial_basics">Mercurial basics</a> and <a href="/en-US/docs/Mercurial_FAQ" title="en-US/docs/Mercurial_FAQ">Mercurial FAQ</a> and the <a href="https://mozilla-version-control-tools.readthedocs.org/en/latest/hgmozilla/">version control tool docs</a> for Mozilla-centric Mercurial information.</p>
+
+<h2 id="Further_reading" name="Further_reading">Further reading</h2>
+
+<p>See <a href="/en-US/docs/Mercurial_Queues" title="en-US/docs/Mercurial_Queues">Mercurial Queues</a> for managing queues of patches, and how to integrate Mercurial with Bugzilla.</p>
+
+<p>The <a href="https://developer.mozilla.org/en-US/docs/tag/Mercurial" title="https://developer.mozilla.org/en-US/docs/tag/Mercurial">Mercurial tag</a> lists the Mercurial-related articles on MDN.</p>
+
+<p>And on wiki.mozilla.org, these helpful pages:</p>
+
+<ul>
+ <li>{{ interwiki('wikimo', 'Using_Mercurial_locally_with_CVS', 'Using Mercurial locally with CVS') }}, a how-to. (Note that this is only useful for code that's still exclusively in CVS.)</li>
+ <li>{{ interwiki('wikimo', 'Mercurial_on_Windows', 'Mercurial on Windows') }}</li>
+ <li><a href="/en-US/docs/Creating_Mercurial_User_Repositories" title="en-US/docs/Creating_Mercurial_User_Repositories">Creating Mercurial User Repositories</a> - If you have a LDAP account that allows you to push to hg.mozilla.org you can also create your own user repositories on the server to share work.</li>
+</ul>
+
+<p>{{ languages( { "es": "es/Mercurial", "fr": "fr/Mercurial", "ja": "ja/Mercurial" } ) }}</p>
diff --git a/files/de/midas/index.html b/files/de/midas/index.html
new file mode 100644
index 0000000000..547ad3f550
--- /dev/null
+++ b/files/de/midas/index.html
@@ -0,0 +1,328 @@
+---
+title: Midas
+slug: Midas
+tags:
+  - DOM
+  - Midas
+  - NeedsContent
+  - NeedsHelp
+  - NeedsTechnicalReview
+  - NeedsTranslation
+  - TopicStub
+  - needsattention
+translation_of: Mozilla/Projects/Midas
+---
+<h2 id="Introduction" name="Introduction">Introduction</h2>
+
+<p>Midas is the code name for Gecko's built-in rich text editor. Midas can be enabled via JavaScript on an HTML document. When Midas is enabled, the document becomes editable by the user. Scripting for Midas is based on the <a href="http://msdn.microsoft.com/en-us/library/ms533049.aspx">DHTML commands</a> supported by Internet Explorer. Internet Explorer supports the ability to make an entire document editable by setting the <code>designMode</code> property of the {{domxref("document")}} object; this is how Midas is invoked in Gecko. Internet Explorer also supports the ability to edit specific elements using the <code>contentEditable</code> attribute; Starting with Firefox 3, Gecko also supports <code>contentEditable</code>. Once Midas is invoked, a few more methods of the <code>document</code> object become available.</p>
+
+<h2 id="Properties" name="Properties">Properties</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Midas/designMode">document.designMode</a></dt>
+ <dd>By setting this property to "on", the document becomes editable.</dd>
+</dl>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Since an entire document becomes editable, authors often load the editable document into an <code>IFRAME</code> and do the bulk of the scripting in the parent document. According to <a href="http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-50708718">standards</a>, The <code>IFRAME</code> element has the <code>contentDocument</code> property that refers to the document in the inline frame. It also has a property called <code>contentWindow</code> that refers to the window object inside the inline frame. This also avoids problems with {{bug(198155)}}.</p>
+
+<p>In addition to the built-in commands, advanced editing can be done by manipulating the {{domxref("Selection")}} and {{domxref("range")}} objects. It is beneficial to be familiar with these objects when working with an editable document.</p>
+
+<h2 id="Examples" name="Examples">Examples</h2>
+
+<p>This example shows the basic structure described in the Notes section :</p>
+
+<pre>&lt;html&gt;
+	&lt;head&gt;
+		&lt;title&gt;Simple Edit Box&lt;/title&gt;
+	&lt;/head&gt;
+	&lt;body&gt;
+		&lt;iframe
+			id="MidasForm"
+			src="about:blank"
+			onload="this.contentDocument.designMode='on';"
+		&gt;&lt;/iframe&gt;
+	&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Methods" name="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("Document.execCommand")}}</dt>
+ <dd>Executes the given command.</dd>
+ <dt>{{domxref("Document.queryCommandEnabled")}}</dt>
+ <dd>Determines whether the given command can be executed on the document in its current state.</dd>
+ <dt>{{domxref("Document.queryCommandIndeterm")}}</dt>
+ <dd>Determines whether the current selection is in an indetermined state.</dd>
+ <dt>{{domxref("Document.queryCommandState")}}</dt>
+ <dd>Determines whether the given command has been executed on the current selection.</dd>
+ <dt>{{domxref("Document.queryCommandValue")}}</dt>
+ <dd>Determines the current value of the document, range, or current selection for the given command.</dd>
+</dl>
+
+<h2 id="Supported_Commands" name="Supported_Commands">Supported Commands</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Command</td>
+   <td class="header">Value</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td>backcolor</td>
+   <td>A color code.</td>
+   <td>This command will set the background color of the document.</td>
+  </tr>
+  <tr>
+   <td>bold</td>
+   <td> </td>
+   <td>If there is no selection, the insertion point will set bold for subsequently typed characters.
+    <p>If there is a selection and all of the characters are already bold, the bold will be removed. Otherwise, all selected characters will become bold.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>contentReadOnly</td>
+   <td> </td>
+   <td>This command will make the editor readonly(true)or editable(false). Anticipated usage is for temporarily disabling input while something else is occurring elsewhere in the web page.</td>
+  </tr>
+  <tr>
+   <td>copy</td>
+   <td> </td>
+   <td>If there is a selection, this command will copy the selection to the clipboard. If there isn't a selection, nothing will happen.
+    <p>note: this command won't work without setting a pref or using signed JS. See: <a href="http://www.mozilla.org/editor/midasdemo/securityprefs.html">more about security preferences</a></p>
+
+    <p>note: the shortcut key will automatically trigger this command (typically accel-C) with or without the signed JS or any code on the page to handle it.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>createlink</td>
+   <td>A URI.</td>
+   <td>This command will not do anything if no selection is made. If there is a selection, a link will be inserted around the selection with the url parameter as the href of the link.</td>
+  </tr>
+  <tr>
+   <td>cut</td>
+   <td> </td>
+   <td>If there is a selection, this command will copy the selection to the clipboard and remove the selection from the edit control. If there isn't a selection, nothing will happen.
+    <p>note: this command won't work without setting a pref or using signed JS. See: <a href="http://www.mozilla.org/editor/midasdemo/securityprefs.html">more about security preferences</a></p>
+
+    <p>note: the shortcut key will automatically trigger this command (typically accel-X) with or without the signed JS or any code on the page to handle it.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>decreasefontsize</td>
+   <td> </td>
+   <td>This command will add a &lt;small&gt; tag around selection or at insertion point.</td>
+  </tr>
+  <tr>
+   <td>delete</td>
+   <td> </td>
+   <td>This command will delete all text and objects that are selected. If no text is selected it deletes one character to the right. This is similar to the <em>Delete</em> button on the keyboard.</td>
+  </tr>
+  <tr>
+   <td>fontname</td>
+   <td>A font name</td>
+   <td>This command will set the font face for a selection or at the insertion point if there is no selection.
+    <p>The given string is such as would be used in the "face" attribute of the font tag, i.e., a comma-separated list of font names.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>fontsize</td>
+   <td>A number</td>
+   <td>This command will set the fontsize for a selection or at the insertion point if there is no selection.
+    <p>The given number is such as would be used in the "size" attribute of the font tag.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>forecolor</td>
+   <td>A color code</td>
+   <td>This command will set the text color of the selection or at the insertion point.</td>
+  </tr>
+  <tr>
+   <td>formatblock</td>
+   <td>H1, H2, H3, H4, H5, H6, P, DIV, ADDRESS, BLOCKQUOTE (more?)</td>
+   <td>The selection surrounded by the given block element.</td>
+  </tr>
+  <tr>
+   <td>heading</td>
+   <td>H1, H2, H3, H4, H5, H6</td>
+   <td>Selected block will be formatted as the given type of heading.</td>
+  </tr>
+  <tr>
+   <td>hilitecolor</td>
+   <td>A color code</td>
+   <td>This command will set the hilite color of the selection or at the insertion point. It only works with styleWithCSS enabled.</td>
+  </tr>
+  <tr>
+   <td>increasefontsize</td>
+   <td> </td>
+   <td>This command will add a &lt;big&gt; tag around selection or at insertion point.</td>
+  </tr>
+  <tr>
+   <td>indent</td>
+   <td> </td>
+   <td>Indent the block where the caret is located. If the caret is inside a list, that item becomes a sub-item one level deeper.</td>
+  </tr>
+  <tr>
+   <td>insertbronreturn</td>
+   <td>true/false</td>
+   <td>Selects whether pressing return inside a paragraph creates another paragraph or just inserts a &lt;br&gt; tag.</td>
+  </tr>
+  <tr>
+   <td>inserthorizontalrule</td>
+   <td>null/string (when string is the Line's id)</td>
+   <td>This command will insert a horizontal rule (line) at the insertion point.
+    <p>Does it delete the selection? Yes!</p>
+   </td>
+  </tr>
+  <tr>
+   <td>inserthtml</td>
+   <td>A string.</td>
+   <td>This command will insert the given html into the &lt;body&gt; in place of the current selection or at the caret location.
+    <p>The given string is the HTML to insert.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>insertimage</td>
+   <td>A URI.</td>
+   <td>This command will insert an image (referenced by the given url) at the insertion point.</td>
+  </tr>
+  <tr>
+   <td>insertorderedlist</td>
+   <td> </td>
+   <td>Depends on the selection. If the caret is not inside a non-LI block, that block becomes the first LI and an OL. If the caret is inside a bulleted item, the bulleted item becomes a numbered item.</td>
+  </tr>
+  <tr>
+   <td>insertunorderedlist</td>
+   <td> </td>
+   <td>Depends on the selection. If the caret is not inside a non-LI block, that block becomes the first LI and UL. If the caret is inside a numbered item, the numbered item becomes a bulleted item.</td>
+  </tr>
+  <tr>
+   <td>insertparagraph</td>
+   <td> </td>
+   <td>Inserts a new paragraph.</td>
+  </tr>
+  <tr>
+   <td>italic</td>
+   <td> </td>
+   <td>If there is no selection, the insertion point will set italic for subsequently typed characters.
+    <p>If there is a selection and all of the characters are already italic, the italic will be removed. Otherwise, all selected characters will become italic.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>justifycenter</td>
+   <td> </td>
+   <td>Center-aligns the current block.</td>
+  </tr>
+  <tr>
+   <td>justifyfull</td>
+   <td> </td>
+   <td>Fully-justifies the current block.</td>
+  </tr>
+  <tr>
+   <td>justifyleft</td>
+   <td> </td>
+   <td>Left-aligns the current block.</td>
+  </tr>
+  <tr>
+   <td>justifyright</td>
+   <td> </td>
+   <td>Right aligns the current block.</td>
+  </tr>
+  <tr>
+   <td>outdent</td>
+   <td> </td>
+   <td>Outdent the block where the caret is located. If the block is not indented prior to calling outdent, nothing will happen.
+    <p>If the caret is in a list item, the item will bump up a level in the list or break out of the list entirely.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>paste</td>
+   <td> </td>
+   <td>This command will paste the contents of the clipboard at the location of the caret. If there is a selection, it will be deleted prior to the insertion of the clipboard's contents.
+    <p>note: this command won't work without setting a pref or using signed JS. user_pref("capability.policy.policynames", "allowclipboard"); user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess"); See: <a href="http://www.mozilla.org/editor/midasdemo/securityprefs.html">more about security preferences</a></p>
+
+    <p>note: the shortcut key will automatically trigger this command (typically accel-V) with or without the signed JS or any code on the page to handle it.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>redo</td>
+   <td> </td>
+   <td>This command will redo the previous undo action. If undo was not the most recent action, this command will have no effect.
+    <p>note: the shortcut key will automatically trigger this command (typically accel-shift-Z)</p>
+   </td>
+  </tr>
+  <tr>
+   <td>removeformat</td>
+   <td> </td>
+   <td>Removes inline formatting from the current selection.</td>
+  </tr>
+  <tr>
+   <td>selectall</td>
+   <td> </td>
+   <td>This command will select all of the contents within the editable area.
+    <p>note: the shortcut key will automatically trigger this command (typically accel-A)</p>
+   </td>
+  </tr>
+  <tr>
+   <td>strikethrough</td>
+   <td> </td>
+   <td>If there is no selection, the insertion point will set strikethrough for subsequently typed characters.
+    <p>If there is a selection and all of the characters are already striked, the strikethrough will be removed. Otherwise, all selected characters will have a line drawn through them.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>styleWithCSS</td>
+   <td> </td>
+   <td>This command is used for toggling the format of generated content. By default (at least today), this is true. An example of the differences is that the "bold" command will generate &lt;b&gt; if the styleWithCSS command is false and generate css style attribute if the styleWithCSS command is true.</td>
+  </tr>
+  <tr>
+   <td>subscript</td>
+   <td> </td>
+   <td>If there is no selection, the insertion point will set subscript for subsequently typed characters.
+    <p>If there is a selection and all of the characters are already subscripted, the subscript will be removed. Otherwise, all selected characters will be drawn slightly lower than normal text.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>superscript</td>
+   <td> </td>
+   <td>If there is no selection, the insertion point will set superscript for subsequently typed characters.
+    <p>If there is a selection and all of the characters are already superscripted, the superscript will be removed. Otherwise, all selected characters will be drawn slightly higher than normal text.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>underline</td>
+   <td> </td>
+   <td>If there is no selection, the insertion point will set underline for subsequently typed characters.
+    <p>If there is a selection and all of the characters are already underlined, the underline will be removed. Otherwise, all selected characters will become underlined.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>undo</td>
+   <td> </td>
+   <td>This command will undo the previous action. If no action has occurred in the document, then this command will have no effect.
+    <p>note: the shortcut key will automatically trigger this command (typically accel-Z)</p>
+   </td>
+  </tr>
+  <tr>
+   <td>unlink</td>
+   <td> </td>
+   <td>If the insertion point is within a link or if the current selection contains a link, the link will be removed and the text will remain.</td>
+  </tr>
+  <tr>
+   <td colspan="3">{{Deprecated_header}}</td>
+  </tr>
+  <tr>
+   <td>readonly</td>
+   <td> </td>
+   <td>This command has been replaced with contentReadOnly. It takes the same values as contentReadOnly, but the meaning of true and false are inversed.</td>
+  </tr>
+  <tr>
+   <td>useCSS</td>
+   <td> </td>
+   <td>This command has been replaced with styleWithCSS. It takes the same values as styleWithCSS, but the meaning of true and false are inversed.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/de/midas/sicherheitseinstellungen/index.html b/files/de/midas/sicherheitseinstellungen/index.html
new file mode 100644
index 0000000000..acd8aaa5ad
--- /dev/null
+++ b/files/de/midas/sicherheitseinstellungen/index.html
@@ -0,0 +1,73 @@
+---
+title: Sicherheitseinstellungen
+slug: Midas/Sicherheitseinstellungen
+tags:
+  - Security preferences
+  - Sicherheitseinstellungen
+  - einfügen
+  - kopieren
+translation_of: Mozilla/Projects/Midas/Security_preferences
+---
+<div class="mttextarea" dir="ltr" id="TranslationOutput">
+<div><span id="Dst[0][0:1:0:1]">Um</span><span> </span><span id="Dst[0][18:24:3:9]">private</span><span> </span><span id="Dst[0][26:36:11:23]">Informationen</span><span> der </span><span id="Dst[0][11:15:29:36]">Benutzer</span><span> </span><span id="Dst[0][3:9:38:48]">zu schützen</span><span>,</span><span> </span><span id="Dst[0][60:65:51:62]">können </span><span id="Dst[0][39:50:64:82]">nicht privilegierte</span><span> </span><span id="Dst[0][52:58:84:91]">Skripten</span><span> </span><span id="Dst[0][74:76:93:95]">die</span><span> </span><span id="Dst[0][99:106:97:103]">Befehle</span><span> </span><span id="Dst[0][78:80:105:116]">Ausschneiden</span><span>,</span><span> </span><span id="Dst[0][83:86:119:126]">kopieren</span><span> </span><span id="Dst[0][89:91:128:130]">und</span><span> </span><span id="Dst[0][93:97:132:139]">Einfügen</span><span> </span><span id="Dst[0][108:109:141:142]">in</span><span> </span><span id="Dst[0][111:113:144:146]">den</span><span> </span><span id="Dst[0][115:121:148:154]">Mozilla</span><span>-</span><span id="Dst[0][123:126:156:159]">rich</span><span>-</span><span id="Dst[0][128:131:161:164]">Text</span><span>-</span><span id="Dst[0][133:138:166:171]">Editor</span><span> </span><span id="Dst[0][67:72:173:182]">aufrufen</span><span>, </span><span id="Dst[0][141:142:185:189]">damit</span><span> </span><span id="Dst[0][144:146:191:193]">die</span><span> </span><span id="Dst[0][148:160:195:208]">entsprechenden</span><span> </span><span id="Dst[0][162:168:210:215]">Tasten</span><span> </span><span id="Dst[0][170:171:217:219]">auf</span><span> </span><span id="Dst[0][173:175:221:223]">der</span><span> </span><span id="Dst[0][177:183:225:231]">Mozilla</span><span>-</span><span id="Dst[0][185:188:233:236]">Rich</span><span>-</span><span id="Dst[0][190:193:238:241]">Text</span><span>-</span><span id="Dst[0][195:201:243:249]">Editing</span><span> </span><span id="Dst[0][203:206:251:254]">Demo</span><span>-</span><span id="Dst[0][208:211:256:260]">Seite</span><span> </span><span id="Dst[0][218:220:262:266]">nicht</span><span> </span><span id="Dst[0][213:216:268:279]">funktionieren</span><span>.</span><span> </span><span id="Dst[0][228:229:282:283]">Um</span><span> </span><span id="Dst[0][238:242:285:289]">diese</span><span> </span><span id="Dst[0][244:252:291:300]">Funktionen</span><span> </span><span id="Dst[0][254:256:302:303]">zu</span><span> </span><span id="Dst[0][258:265:305:311]">Zwecken</span><span> </span><span id="Dst[0][267:268:313:315]">der</span><span> </span><span id="Dst[0][274:277:317:320]">Demo</span><span> zu </span><span id="Dst[0][231:236:325:334]">aktivieren</span><span>,</span><span> </span><span id="Dst[0][284:287:337:342]">müssen</span><span> </span><span id="Dst[0][280:282:344:346]">Sie</span><span> </span><span id="Dst[0][296:299:348:351]">Ihre</span><span> </span><span id="Dst[0][301:319:353:372]">Browsereinstellungen</span><span> </span><span id="Dst[0][289:294:374:379]">ändern</span><span>.</span></div>
+</div>
+
+<h2 id="Ändern_Sie_die_Einstellungen_in_Firefox">Ändern Sie die Einstellungen in Firefox</h2>
+
+<ol>
+ <li>
+  <div class="mttextarea" dir="ltr" id="TranslationOutput">
+  <div><span id="Dst[0][0:3:0:10]">Beenden Sie</span><span> </span><span id="Dst[0][5:11:12:18]">Firefox</span><span>.</span><span> </span><span id="Dst[0][14:15:21:24]">Wenn</span><span> </span><span id="Dst[0][17:19:26:28]">Sie</span><span> </span><span id="Dst[0][26:37:30:47]">Schnellstartleiste</span><span> </span><span id="Dst[0][39:45:49:58]">ausgeführt</span><span> </span><span id="Dst[0][21:24:60:64]">haben</span><span> </span><span id="Dst[0][47:49:66:66]">(</span><span id="Dst[0][60:63:67:70]">Dies</span><span> </span><span id="Dst[0][65:66:72:74]">ist</span><span> </span><span id="Dst[0][47:49:76:80]">unter</span><span> </span><span id="Dst[0][51:57:82:88]">Windows</span><span> </span><span id="Dst[0][68:69:90:92]">ein</span><span> </span><span id="Dst[0][71:74:94:99]">Symbol</span><span> </span><span id="Dst[0][76:77:101:102]">in</span><span> </span><span id="Dst[0][79:81:104:106]">der</span><span> </span><span id="Dst[0][83:91:108:121]">Symbolleiste),</span><span> </span><span id="Dst[0][98:101:123:125]">die</span><span> </span><span id="Dst[0][103:105:127:128]">zu</span><span> </span><span id="Dst[0][93:96:130:136]">beenden</span><span>.</span></div>
+  </div>
+ </li>
+ <li><a class="external" href="http://support.mozilla.com/en-US/kb/Profiles"><span id="Dst[0][0:3:0:5]">Finden</span><span> Sie </span><span id="Dst[0][5:8:11:13]">Ihr</span><span> </span><span id="Dst[0][10:16:15:21]">Firefox</span><span>-</span><span id="Dst[0][18:24:23:28]">Profil</span><span>-</span><span id="Dst[0][26:34:30:40]">Verzeichnis</span><span>.</span></a></li>
+ <li>
+  <div><span id="Dst[0][0:3:0:5]">Öffnen</span><span> Sie </span><span id="Dst[0][5:7:11:13]">die</span><span> </span><span id="Dst[0][17:20:15:19]">Datei</span><span> </span><span id="Dst[0][9:15:21:27]">user.js</span><span>, </span><span id="Dst[0][22:25:30:32]">aus</span><span> </span><span id="Dst[0][27:30:34:39]">diesem</span><span> </span><span id="Dst[0][32:40:41:51]">Verzeichnis</span><span> </span><span id="Dst[0][42:43:53:54]">in</span><span> </span><span id="Dst[0][45:45:56:60]">einem</span><span> </span><span id="Dst[0][52:57:62:71]">Texteditor</span><span>.</span><span> </span><span id="Dst[0][60:61:74:77]">Wenn</span><span> </span><span id="Dst[0][71:72:79:83]">keine</span><span> </span><span id="Dst[0][82:85:85:89]">Datei</span><span> </span><span id="Dst[0][74:80:91:97]">user.js</span><span> </span><span id="Dst[0][63:69:99:111]">vorhanden ist</span><span>,</span><span> </span><span id="Dst[0][88:93:114:122]">erstellen</span><span>.</span></div>
+ </li>
+ <li>
+  <div><span id="Dst[1][0:2:0:4]">Fügen</span><span> Sie </span><span id="Dst[1][4:8:10:14]">diese</span><span> </span><span id="Dst[1][10:14:16:21]">Zeilen</span><span> </span><span id="Dst[1][16:17:23:24]">in</span><span> </span><span id="Dst[1][19:25:26:32]">user.js</span><span>:</span></div>
+
+  <pre class="code">user_pref("capability.policy.policynames", "allowclipboard");
+user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org");
+user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess");
+user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");</pre>
+ </li>
+ <li>
+  <div class="mttextarea" dir="ltr" id="TranslationOutput">
+  <div><span id="Dst[0][0:5:0:5]">Ändern</span><span> Sie </span><span id="Dst[0][7:9:11:13]">die</span><span> </span><span id="Dst[0][11:13:15:17]">Url</span> <span id="Dst[0][15:37:19:41]">https://www.mozilla.org</span><span> </span><span id="Dst[0][39:40:43:45]">auf</span><span> </span><span id="Dst[0][42:44:47:49]">die</span><span> </span><span id="Dst[0][46:49:51:54]">Site</span><span> ab, </span><span id="Dst[0][51:59:57:61]">wofür</span><span> </span><span id="Dst[0][61:63:63:65]">Sie</span><span> </span><span id="Dst[0][80:83:67:71]">diese</span><span> </span><span id="Dst[0][85:92:73:80]">Funktion</span><span> </span><span id="Dst[0][73:78:82:91]">aktivieren</span><span> </span><span id="Dst[0][65:71:93:99]">möchten</span><span>.</span></div>
+  </div>
+ </li>
+ <li>
+  <div class="mttextarea" dir="ltr" id="TranslationOutput">
+  <div><span id="Dst[0][0:3:0:8]">Speichern</span><span> Sie </span><span id="Dst[0][5:7:14:16]">die</span><span> </span><span id="Dst[0][9:12:18:22]">Datei</span><span> </span><span id="Dst[0][14:16:24:26]">und</span><span> starten Sie </span><span id="Dst[0][26:32:40:46]">Firefox</span><span> </span><span id="Dst[0][18:24:48:50]">neu</span><span>.</span><span> </span><span id="Dst[0][35:37:53:55]">Die</span><span> </span><span id="Dst[0][39:47:57:70]">Zwischenablage</span><span>-</span><span id="Dst[0][49:55:72:77]">Tasten</span><span> </span><span id="Dst[0][57:62:79:85]">sollten</span><span> </span><span id="Dst[0][64:66:87:91]">jetzt</span><span> </span><span id="Dst[0][68:75:93:105]">funktionieren</span><span>.</span></div>
+  </div>
+ </li>
+</ol>
+
+<div class="note">
+<div class="mttextarea" dir="ltr" id="TranslationOutput">
+<div><span id="Dst[0][0:3:0:6]">Hinweis</span><span>:</span><span> </span><span id="Dst[0][6:8:9:11]">Die</span><span> </span><span id="Dst[0][10:19:13:23]">Einstellung</span><span> </span><span id="Dst[0][21:22:25:27]">ist</span><span> </span><span id="Dst[0][24:27:29:35]">Website</span><span> </span><span id="Dst[0][29:38:37:41]">sowie</span><span> </span><span id="Dst[0][49:56:43:53]">spezifische</span><span> </span><span id="Dst[0][40:47:55:63]">Protokoll</span><span>.</span><span> </span><span id="Dst[0][59:61:66:68]">Zum</span><span> </span><span id="Dst[0][63:69:70:77]">Beispiel</span><span>:</span></div>
+</div>
+
+<pre>user_pref("capability.policy.allowclipboard.sites", "http://www.mozilla.org")</pre>
+
+<p>ist nicht dasselbe wie:</p>
+
+<pre>user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org")</pre>
+
+<p><span id="Dst[0][0:3:0:3]">Dies</span><span> </span><span id="Dst[0][5:6:5:7]">ist</span><span> </span><span id="Dst[0][8:14:9:10]">da</span><span> </span><span id="Dst[0][16:18:12:14]">die</span><span> </span><span id="Dst[0][20:24:16:20]">erste</span><span> </span><span id="Dst[0][31:34:22:25]">HTTP</span><span> </span><span id="Dst[0][26:29:27:35]">verwendet</span><span>, </span><span id="Dst[0][36:40:38:44]">während</span><span> </span><span id="Dst[0][42:44:46:48]">die</span><span> </span><span id="Dst[0][46:51:50:55]">zweite</span><span> </span><span id="Dst[0][58:62:57:61]">HTTPS</span><span> </span><span id="Dst[0][53:56:63:71]">verwendet</span><span>.</span></p>
+</div>
+
+<div class="mttextarea" dir="ltr" id="TranslationOutput">
+<div><span id="Dst[0][0:1:0:3]">Wenn</span><span> </span><span id="Dst[0][3:5:5:7]">Sie</span><span> </span><span id="Dst[0][21:28:9:15]">mehreren</span><span> </span><span id="Dst[0][30:33:17:20]">URLs</span><span> </span><span id="Dst[0][45:47:22:24]">die</span><span> </span><span id="Dst[0][49:63:26:41]">Einfügeoperation</span><span> </span><span id="Dst[0][38:43:43:49]">Zugriff</span><span> </span><span id="Dst[0][15:19:55:62]">zulassen</span><span> </span><span id="Dst[0][7:13:64:70]">möchten</span><span>,</span><span> </span><span id="Dst[0][66:73:73:79]">trennen</span><span> Sie </span><span id="Dst[0][75:77:85:87]">die</span><span> </span><span id="Dst[0][79:82:89:92]">URLs</span><span> </span><span id="Dst[0][84:87:94:96]">mit</span><span> </span><span id="Dst[0][89:89:98:102]">einem</span><span> </span><span id="Dst[0][91:95:104:114]">Leerzeichen</span><span>.</span><span> </span><span id="Dst[0][98:100:117:119]">Zum</span><span> </span><span id="Dst[0][102:108:121:128]">Beispiel</span><span>:</span></div>
+</div>
+
+<pre>user_pref("capability.policy.allowclipboard.sites",
+
+ "https://www.mozilla.org https://developer.mozilla.org")
+</pre>
+
+<h2 id="See_also">See also</h2>
+
+<p>Lesen Sie weitere Informationen zu den Sicherheitsrichtlinien hier:<br>
+ <a href="http://www.mozilla.org/projects/security/components/ConfigPolicy.html" title="http://www.mozilla.org/projects/security/components/ConfigPolicy.html">Configurable Security Policies</a>.</p>
diff --git a/files/de/mozilla/add-ons/add-on_guidelines/index.html b/files/de/mozilla/add-ons/add-on_guidelines/index.html
new file mode 100644
index 0000000000..e781073547
--- /dev/null
+++ b/files/de/mozilla/add-ons/add-on_guidelines/index.html
@@ -0,0 +1,124 @@
+---
+title: Add-on guidelines
+slug: Mozilla/Add-ons/Add-on_guidelines
+tags:
+  - Zusatzgerä
+translation_of: 'https://extensionworkshop.com/documentation/publish/add-on-policies/'
+---
+<p>These add-on guidelines were created to foster an open and diverse add-on developer community while ensuring an excellent user experience. They apply to all add-ons and add-on updates regardless of where they are hosted, and also apply to customizations performed by installers that configure Firefox without using an add-on. Add-ons hosted on <a class="external text" href="https://addons.mozilla.org/" rel="nofollow">AMO</a> are subject to <a href="https://addons.mozilla.org/developers/docs/policies" title="https://addons.mozilla.org/developers/docs/policies">additional policies</a>.</p>
+
+<h2 id="Be_Transparent">Be Transparent</h2>
+
+<ul>
+ <li>Add-ons must either be installed using the add-on web install system, or be approved by the user using the <a class="external text" href="https://blog.mozilla.org/addons/2011/08/11/strengthening-user-control-of-add-ons/" rel="nofollow">install opt-in dialog</a>.
+
+  <ul>
+   <li>We want our users to know what they are installing so that they are not unpleasantly surprised by changes they did not expect. We also want them to know what to remove if they decide not to keep it.</li>
+   <li>Add-ons installed through application installers should <a class="external text" href="/en-US/docs/Adding_Extensions_using_the_Windows_Registry" rel="nofollow">use the Windows Registry</a> or equivalent global install methods so that Firefox displays the opt-in screen. The opt-in screen must not be tampered with in any way, including overlaying additional information or images on top of it.</li>
+  </ul>
+ </li>
+ <li>Add-ons must always be possible to uninstall or disable from the Add-ons Manager.
+  <ul>
+   <li>Add-ons installed globally using the Windows registry or global extension directories cannot be uninstalled (<a class="external text" href="https://bugzilla.mozilla.org/show_bug.cgi?id=640775" rel="nofollow">bug 640775</a>), but they can be disabled to the same effect.</li>
+  </ul>
+ </li>
+ <li>Add-ons must use a <a class="external text" href="/en-US/docs/Install_manifests#id" rel="nofollow">single unique ID</a> during their entire lifetime.
+  <ul>
+   <li>Using the same ID for multiple products, or multiple IDs for a single product, can lead to problems with automatic updates as well as blocklisting conflicts. Add-ons may change their IDs due to ownership changes, as they commonly use an email address-like format (<em>e.g.,</em> personasplus@mozilla.com).</li>
+  </ul>
+ </li>
+ <li>Add-ons must not use brand names, trademarks, or other terms in ways that deceive users. Using Mozilla trademarks must follow <a class="external text" href="http://www.mozilla.org/foundation/trademarks/policy.html" rel="nofollow">our trademark policy</a>.</li>
+ <li>Add-ons should clearly communicate their intended purpose and active features, including features introduced through updates.
+  <ul>
+   <li>While we understand and support add-on developers who choose to monetize their products, this should not come at the expense of users' browsing experience. If an add-on inserts advertisements, affiliate codes, sponsored search results, or the like, into web pages, the user should be made aware of this when the add-on is installed. Likewise, if some features require payment to use, or require payment to remain active after a trial period, users should be made aware of this.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Be_Respectful_to_Users">Be Respectful to Users</h2>
+
+<ul>
+ <li>Add-ons must remove all introduced code, executables, and application configuration changes when they are uninstalled.
+  <ul>
+   <li>Uninstalling an add-on using the regular uninstall process should generally suffice. This guideline primarily applies to changes made to preferences such as the homepage, default search URL, network settings, and so forth. These preferences should be restored to their previous values when the add-on is uninstalled. Most add-ons can easily accomplish this by making such changes via a <a class="external text" href="/en-US/docs/Building_an_Extension#Defaults_Files" rel="nofollow">default preferences file</a>.</li>
+  </ul>
+ </li>
+ <li>Add-ons must respect the users' choices and not make unexpected changes, or limit users' ability to revert them.
+  <ul>
+   <li>For instance, users generally do not expect an add-on to change the Firefox homepage. Asking users to opt-in to such extra changes is recommended.</li>
+   <li>Making settings changes difficult or impossible to revert is prohibited. It's not allowed to block users or other add-ons or installers from changing any settings.</li>
+  </ul>
+ </li>
+ <li>Add-ons should make it clear how private user data is being used.
+  <ul>
+   <li>Add-ons which send user data over the Internet should generally provide a Privacy Policy, ideally concise and easily readable.</li>
+  </ul>
+ </li>
+ <li>Add-on developers should provide a mechanism for them to be contacted.
+  <ul>
+   <li>While developers are not required to provide a support channel for users, it is recommended. All add-on developers should have a contact form or public email address so that they can be contacted in case of emergencies, such as guideline violations that could lead to blocklisting.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Be_Safe">Be Safe</h2>
+
+<ul>
+ <li>Add-ons must not cause harm to users' data, system, or online identities.</li>
+ <li>Add-ons must not transmit users' private data unsafely, or expose it to third parties unnecessarily.
+  <ul>
+   <li>Private data should always be sent over a secure connection. This includes browsing data such as visited URLs and bookmarks.</li>
+   <li>Making the browser easier to fingerprint by adding text to the User-Agent string or adding custom headers is also a privacy concern, and should be avoided.</li>
+  </ul>
+ </li>
+ <li>Add-ons must not create or expose application or system vulnerabilities.
+  <ul>
+   <li>Security bugs happen, but once discovered they need to be addressed immediately. A popular add-on with a security vulnerability is a valuable attack vector for hackers, and in such cases we will move quickly to blocklist the add-on if there is no prompt response from the developer.</li>
+  </ul>
+ </li>
+ <li>Add-ons must not tamper with the application or blocklist update systems.</li>
+ <li>Add-ons should not store any browsing data while in Private Browsing Mode.
+  <ul>
+   <li>It's worth stressing that PBM is about avoiding storing<em>local</em> data while browsing, not about sending data elsewhere. To learn more about PBM we recommend reading <a class="external text" href="http://ehsanakhgari.org/tag/privatebrowsing" rel="nofollow">Ehsan's blog posts</a> about it.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Be_Stable">Be Stable</h2>
+
+<ul>
+ <li>Add-ons must not cause hangs or crashes.</li>
+ <li>Add-ons should not break or disable core application features.
+  <ul>
+   <li>This includes features like tabbed browsing, Private Browsing Mode, and the location bar. Add-ons that are specifically meant to do this are exempt.</li>
+  </ul>
+ </li>
+ <li>Add-ons should not cause memory leaks, or unnecessarily consume large amounts of memory.</li>
+ <li>Add-ons should not slow down the application or system significantly.</li>
+ <li>Add-ons should not consume network resources to an extent that affects regular application usage.
+  <ul>
+   <li>Downloading large amounts of data without user awareness can significantly disrupt regular browsing, and may result in unexpected charges for users who have network usage limitations (notably on mobile).</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Exceptions">Exceptions</h2>
+
+<ul>
+ <li>Add-ons can break some of these guidelines if that's their intended purpose and there isn't malicious intent (<em>e.g.,</em> a security exploit proof of concept).</li>
+ <li>Add-ons deployed by administrators within workplaces, schools, kiosks, and so forth, are exempt from most guidelines.</li>
+ <li>As add-ons can only run clean up code if they are uninstalled while Firefox is running and they are enabled, we do not require that they attempt to clean up after themselves when they are uninstalled under other circumstances. Application installers that configure Firefox without add-ons should revert any changes when uninstalled.</li>
+ <li>Add-ons may leave behind preferences changes in private preference branches which do not affect Firefox when the add-on is not active, so that any previous add-on configuration is not lost if the user decides to re-install the add-on in the future.</li>
+</ul>
+
+<p>Other exceptions may apply.</p>
+
+<h2 id="Enforcement">Enforcement</h2>
+
+<p>Add-ons that do not follow these guidelines may qualify for blocklisting, depending on the extent of the violations. Guidelines qualified with the word<em>must</em> are especially important, and violations thereof will most likely result in a blocklisting nomination.</p>
+
+<p>The Add-ons Team will do their best to contact the add-on's developers and provide a reasonable time frame for the problems to be corrected before a block is put in place. If an add-on is considered malicious or its developers have proven unreachable or unresponsive, or in case of repeat violations, blocklisting may be immediate.</p>
+
+<p>Guideline violations should be <a class="external text" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Tech%20Evangelism&amp;component=Add-ons" rel="nofollow">reported via Bugzilla</a>, under Tech Evangelism &gt; Add-ons. Questions can be posted in the <a class="external text" href="irc://irc.mozilla.org/addons" rel="nofollow">#addons IRC channel</a>.</p>
+
+<p>These guidelines may change in the future. All updates will be announced in the <a class="external text" href="https://blog.mozilla.org/addons/" rel="nofollow">Add-ons Blog</a>.</p>
diff --git a/files/de/mozilla/add-ons/amo/index.html b/files/de/mozilla/add-ons/amo/index.html
new file mode 100644
index 0000000000..5867afab50
--- /dev/null
+++ b/files/de/mozilla/add-ons/amo/index.html
@@ -0,0 +1,9 @@
+---
+title: AMO
+slug: Mozilla/Add-ons/AMO
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Mozilla/Add-ons/AMO
+---
+<p>Seiten, die <a href="https://addons.mozilla.org/en-US/firefox/">addons.mozilla.org</a> dokumentieren:</p>
diff --git a/files/de/mozilla/add-ons/amo/policy/index.html b/files/de/mozilla/add-ons/amo/policy/index.html
new file mode 100644
index 0000000000..45bdc8ac09
--- /dev/null
+++ b/files/de/mozilla/add-ons/amo/policy/index.html
@@ -0,0 +1,19 @@
+---
+title: AMO Policies
+slug: Mozilla/Add-ons/AMO/Policy
+translation_of: Mozilla/Add-ons/AMO/Policy
+---
+<p>{{AddonSidebar}}</p>
+
+<p><span id="result_box" lang="de"><span>Mozilla ist bestrebt, unseren Nutzern und Entwicklern eine großartige Add-On-Erfahrung zu bieten.</span> <span>Bitte lesen Sie die folgenden Richtlinien, bevor Sie Ihr Add-on abschicken.</span></span></p>
+
+
+<dl>
+ <dd></dd><dt><a href="/Mozilla/Add-ons/AMO/Policy/Agreement">Developer Agreement</a></dt>
+<dd>Effective January 5, 2016</dd> <dt><a href="/Mozilla/Add-ons/AMO/Policy/Reviews">Review Process</a></dt>
+<dd>Add-ons extend the core capabilities of Firefox, allowing users to modify and personalize their Web experience. A healthy add-on ecosystem, built on trust, is vital for developers to be successful and users to feel safe making Firefox their own. For these reasons, Mozilla requires all add-ons to comply with the following set of policies on acceptable practices. The below is not intended to serve as legal advice, nor is it intended to serve as a comprehensive list of terms to include in your add-on’s privacy policy.</dd> <dt><a href="/Mozilla/Add-ons/AMO/Policy/Featured">Featured Add-ons</a></dt>
+<dd>How up-and-coming add-ons become featured and what's involved in the process. </dd> <strong><a href="/de/Add-ons#Contact_us">Contacting us</a></strong>
+
+ <p>     <span id="result_box" lang="de"><span>Wie Sie uns bezüglich dieser Richtlinien oder Ihres Add-ons kontaktieren können.</span></span></p>
+
+</dl>
diff --git a/files/de/mozilla/add-ons/bootstrapped_extensions/index.html b/files/de/mozilla/add-ons/bootstrapped_extensions/index.html
new file mode 100644
index 0000000000..582b48c775
--- /dev/null
+++ b/files/de/mozilla/add-ons/bootstrapped_extensions/index.html
@@ -0,0 +1,243 @@
+---
+title: Bootstrapped extensions
+slug: Mozilla/Add-ons/Bootstrapped_extensions
+translation_of: Archive/Add-ons/Bootstrapped_extensions
+---
+<p>{{ gecko_minversion_header("2.0") }}</p>
+<div class="note">
+ <p><strong>Note:</strong> All extensions created using the <a class="link-https" href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/">Add-on SDK</a> are bootstrapped! All the bootstrapping code is generated for you, so you don't really need to think about it. Not using the Add-on SDK? Read on...</p>
+</div>
+<p>Traditional extensions include <strong>overlays</strong>, wherein the application can load up XUL from the extension's package and automatically apply it atop its own UI. While this makes creating extensions that add to the application's user interface relatively easy, it means that updating, installing, or disabling an extension requires an application restart.</p>
+<p>Gecko 2.0 {{ geckoRelease("2.0") }} introduces <strong>bootstrapped extensions</strong>. These are special extensions that, instead of using overlays to apply their user interface to the application, programmatically insert themselves into the application. This is done using a special script file that's included in the extension that contains functions the browser calls to command the extension to install, uninstall, start up, and shut down.</p>
+<p>All the application does is call into this script file; the extension is responsible for adding and removing its user interface and handling any other setup and shutdown tasks it requires.</p>
+<p>This article discusses how bootstrapped extensions work. See this tutorial on <a href="/en-US/Add-ons/How_to_convert_an_overlay_extension_to_restartless">converting from an overlay extension to restartless</a> for a practical step by step guide to migrating.</p>
+<h2 id="The_startup_and_shutdown_process">The startup and shutdown process</h2>
+<p>A key feature of bootstrapped extensions is that they must be able to be started up and shut down on demand by the application. When the extension's <code>startup()</code> function is called, it must manually inject its user interface and other behavior into the application. Similarly, when its <code>shutdown()</code> function is called, it must remove anything it's added to the application, as well as all references to any of its objects.</p>
+<p>There are several scenarios in which the <code>startup()</code> function may be called; for example:</p>
+<ul>
+ <li>When the extension is first installed, assuming that it's both compatible with the application and is enabled.</li>
+ <li>When the extension becomes enabled using the add-ons manager window.</li>
+ <li>When the application is started up, if the extension is enabled and compatible with the application.</li>
+</ul>
+<p>Some examples of when the <code>shutdown()</code> function may be called:</p>
+<ul>
+ <li>When the extension is uninstalled, if it's currently enabled.</li>
+ <li>When the extension becomes disabled.</li>
+ <li>When the user quits the application, if the extension is enabled.</li>
+</ul>
+<h2 id="Notes_on_modifying_the_application_user_interface">Notes on modifying the application user interface</h2>
+<h3 id="chrome.manifest_in_bootstrapped_add-ons">chrome.manifest in bootstrapped add-ons</h3>
+<p>You can use a <a href="/en-US/docs/Chrome_Registration"><code>chrome.manifest</code></a> file in bootstrapped add-ons to:</p>
+<ol>
+ <li>make your add-on's content available via a <code>chrome://</code> URL (using the <code>content</code>, <code>locale</code>, and <code>skin</code> instructions in the manifest);</li>
+ <li>replace existing <code>chrome://</code> URIs with your content (using the <code>override</code> instruction).</li>
+</ol>
+<p>Not all <code>chrome.manifest</code> instructions are supported in bootstrapped add-ons, for example you still cannot register <a href="/en-US/docs/XUL_Overlays">XUL Overlays</a> from a bootstrapped add-on. See the <a href="/en-US/docs/Chrome_Registration"><code>chrome.manifest</code></a> documentation for details.</p>
+<p>In Firefox 10 and later the <code>chrome.manifest</code> file located in the root of the add-on's XPI (i.e. a sibling of the <code>install.rdf</code>) is loaded automatically. In Firefox 8 and 9 you had to load/unload the manifest manually using {{ ifmethod("nsIComponentManager", "addBootstrappedManifestLocation") }} and {{ ifmethod("nsIComponentManager", "removeBootstrappedManifestLocation") }}. This feature was unavailable in Firefox versions before 8.</p>
+<h3 id="Adding_user_interface_manually">Adding user interface manually</h3>
+<p>If you decide to go ahead and try to develop a bootstrapped extension that modifies the application's user interface, here are a few suggestions to get you started.</p>
+<p>You need to look up the relevant application UI elements by their ID by calling {{ domxref("document.getElementById()") }}, then manipulate them to inject your UI. For example, you can get access to the menu bar in Firefox with <code>document.getElementById("main-menubar")</code>.</p>
+<p>Be sure that at shutdown time, you remove any user interface you've added.</p>
+<h2 id="Creating_a_bootstrapped_extension">Creating a bootstrapped extension</h2>
+<p>To mark an extension as bootstrappable, you need to add the following element to its <a href="/en-US/docs/Install_Manifests">install manifest</a>:</p>
+<pre><code>&lt;em:bootstrap&gt;true&lt;/em:bootstrap&gt;</code></pre>
+<p>Then you need to add a <a href="/en-US/docs/Extensions/bootstrap.js"><code><strong>bootstrap.js</strong></code> file</a> that contains the required functions; this should be alongside the <a href="/en-US/docs/Install_Manifests"><code>install.rdf</code> file</a> in the extension's package.</p>
+<h3 id="Backward_compatibility">Backward compatibility</h3>
+<p>Because older versions of Firefox don't know about the <code>bootstrap</code> property or <code>bootstrap.js</code> file, it's not overly difficult to create an XPI that will work on both as a bootstrappable extension and as a traditional extension. Create your extension as a bootstrappable extension, then add the traditional overlays as well. Newer versions of Firefox will use the <code>bootstrap.js</code> script, ignoring the components and overlays, while older versions will use the overlays.</p>
+<h2 id="Bootstrap_entry_points">Bootstrap entry points</h2>
+<p>The <code>bootstrap.js</code> script should contain several specific functions, which are called by the browser to manage the extension. The script gets executed in a privileged sandbox, which is cached until the extension is shut down.</p>
+<h3 id="startup">startup</h3>
+<p>Called when the extension needs to start itself up. This happens at application launch time or when the extension is enabled after being disabled (or after it has been shut down in order to install an update. As such, this can be called many times during the lifetime of the application.</p>
+<p>This is when your add-on should inject its UI, start up any tasks it may need running, and so forth.</p>
+<pre>void startup(
+  data,
+  reason
+);
+</pre>
+<h6 id="Parameters">Parameters</h6>
+<dl>
+ <dt>
+  <code>data</code></dt>
+ <dd>
+  A <a href="#Bootstrap_data">bootstrap data structure</a>.</dd>
+ <dt>
+  <code>reason</code></dt>
+ <dd>
+  One of the <a href="#Reason_constants">reason constants</a>, indicating why the extension is being started up. This will be one of <code>APP_STARTUP</code>, <code>ADDON_ENABLE</code>, <code>ADDON_INSTALL</code>, <code>ADDON_UPGRADE</code>, or <code>ADDON_DOWNGRADE</code>.</dd>
+</dl>
+<h3 id="shutdown">shutdown</h3>
+<p>Called when the extension needs to shut itself down, such as when the application is quitting or when the extension is about to be upgraded or disabled. Any user interface that has been injected must be removed, tasks shut down, and objects disposed of.</p>
+<pre>void shutdown(
+  data,
+  reason
+);
+</pre>
+<h6 id="Parameters_2">Parameters</h6>
+<dl>
+ <dt>
+  <code>data</code></dt>
+ <dd>
+  A <a href="#Bootstrap_data">bootstrap data structure</a>.</dd>
+ <dt>
+  <code>reason</code></dt>
+ <dd>
+  One of the <a href="#Reason_constants">reason constants</a>, indicating why the extension is being shut down. This will be one of <code>APP_SHUTDOWN</code>, <code>ADDON_DISABLE</code>, <code>ADDON_UNINSTALL</code>, <code>ADDON_UPGRADE</code>, or <code>ADDON_DOWNGRADE</code>.</dd>
+</dl>
+<h3 id="install">install</h3>
+<p>Your bootstrap script must include an <code>install()</code> function, which the application calls before the first call to <code>startup()</code> after the extension is installed, upgraded, or downgraded.</p>
+<div class="note">
+ <strong>Note:</strong> This method is never called if the extension has never been started; for example, if an extension is installed but isn't compatible with the current version of the application, <code>install()</code> never gets called if it is uninstalled before becoming compatible. However, if the extension gets upgraded to a version that's compatible with the application, its <code>install()</code> function will be called at that time, before the first <code>startup()</code> call.</div>
+<pre>void install(
+  data,
+  reason
+);
+</pre>
+<h6 id="Parameters_3">Parameters</h6>
+<dl>
+ <dt>
+  <code>data</code></dt>
+ <dd>
+  A <a href="#Bootstrap_data">bootstrap data structure</a>.</dd>
+ <dt>
+  <code>reason</code></dt>
+ <dd>
+  One of the <a href="#Reason_constants">reason constants</a>, indicating why the extension is being installed. This will be one of <code>ADDON_INSTALL</code>, <code>ADDON_UPGRADE</code>, or <code>ADDON_DOWNGRADE</code>.</dd>
+</dl>
+<h3 id="uninstall">uninstall</h3>
+<p>This function is called after the last call to <code>shutdown()</code> before a particular version of an extension is uninstalled. This will not be called if <code>install()</code> was never called.</p>
+<div class="note">
+ <strong>Note:</strong> It's important to keep in mind that <code>uninstall()</code> can be called even on extensions that are currently disabled, or are not compatible with the current application. Because of this, it's crucial that the function be implemented to gracefully handle APIs that may not be present in the application. This function will also not be called if a third-party application removes the extension while Firefox isn't running. Simply having code <code>function install() {} </code>IS NOT ENOUGH, if you have code in <code>uninstall </code>it will not run, you MUST run some code in the <code>install </code>function, at the least you must set arguments on the <code>install </code>function so like: <code>function install(aData, aReason) {}</code> then uninstall WILL WORK.</div>
+<div class="note">
+ <strong>Note:</strong> If you open addon manager and then click "Remove" on addon, it will not call uninstall function right away. Because it was soft uninstalled, as the "Undo" button is there. If you close addon manager or something to make that "Undo" button to go away then the hard uninstall takes place.</div>
+<div class="note">
+ <strong>Note:</strong> The uninstall function fires on downgrade and upgrade as well so you should make sure it is an uninstall by doing this:<br>
+ <code>function uninstall(aData, aReason) {</code><br>
+ <code>     if (aReason == ADDON_UNINSTALL) {</code><br>
+ <code>          console.log('really uninstalling');</code><br>
+ <code>     } else {</code><br>
+ <code>          console.log('not a permanent uninstall, likely an upgrade or downgrade');</code><br>
+ <code>     }</code><br>
+ <code>}</code></div>
+<pre>void uninstall(
+  data,
+  reason
+);
+</pre>
+<h6 id="Parameters_4">Parameters</h6>
+<dl>
+ <dt>
+  <code>data</code></dt>
+ <dd>
+  A <a href="#Bootstrap_data">bootstrap data structure</a>.</dd>
+ <dt>
+  <code>reason</code></dt>
+ <dd>
+  One of the <a href="#Reason_constants">reason constants</a>, indicating why the extension is being uninstalled. This will be one of <code>ADDON_UNINSTALL</code>, <code>ADDON_UPGRADE</code>, or <code>ADDON_DOWNGRADE</code>.</dd>
+</dl>
+<h2 id="Reason_constants">Reason constants</h2>
+<p>The bootstrap functions accept a <code>reason</code> parameter, which explains to the extension why it's being called. The reason constants are:</p>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Constant</td>
+   <td class="header">Value</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>APP_STARTUP</code></td>
+   <td>1</td>
+   <td>The application is starting up.</td>
+  </tr>
+  <tr>
+   <td><code>APP_SHUTDOWN</code></td>
+   <td>2</td>
+   <td>The application is shutting down.</td>
+  </tr>
+  <tr>
+   <td><code>ADDON_ENABLE</code></td>
+   <td>3</td>
+   <td>The add-on is being enabled.</td>
+  </tr>
+  <tr>
+   <td><code>ADDON_DISABLE</code></td>
+   <td>4</td>
+   <td>The add-on is being disabled. (Also <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=620541">sent during uninstallation</a>)</td>
+  </tr>
+  <tr>
+   <td><code>ADDON_INSTALL</code></td>
+   <td>5</td>
+   <td>The add-on is being installed.</td>
+  </tr>
+  <tr>
+   <td><code>ADDON_UNINSTALL</code></td>
+   <td>6</td>
+   <td>The add-on is being uninstalled.</td>
+  </tr>
+  <tr>
+   <td><code>ADDON_UPGRADE</code></td>
+   <td>7</td>
+   <td>The add-on is being upgraded.</td>
+  </tr>
+  <tr>
+   <td><code>ADDON_DOWNGRADE</code></td>
+   <td>8</td>
+   <td>The add-on is being downgraded.</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Bootstrap_data">Bootstrap data</h2>
+<p>Each of the entry points is passed a simple data structure containing some useful information about the add-on being bootstrapped. More information about the add-on can be obtained by calling <code><a href="/en-US/docs/Addons/Add-on_Manager/AddonManager#getAddonByID()">AddonManager.getAddonByID()</a></code>. The data is a simple JavaScript object with the following properties:</p>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Property</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>id</code></td>
+   <td><code>string</code></td>
+   <td>The ID of the add-on being bootstrapped.</td>
+  </tr>
+  <tr>
+   <td><code>version</code></td>
+   <td><code>string</code></td>
+   <td>The version of the add-on being bootstrapped.</td>
+  </tr>
+  <tr>
+   <td><code>installPath</code></td>
+   <td><code>nsIFile</code></td>
+   <td>The installation location of the add-on being bootstrapped. This may be a directory or an XPI file depending on whether the add-on is installed unpacked or not.</td>
+  </tr>
+  <tr>
+   <td><code>resourceURI</code></td>
+   <td><code>nsIURI</code></td>
+   <td>A URI pointing at the root of the add-ons files, this may be a <code>jar:</code> or <code>file:</code> URI depending on whether the add-on is installed unpacked or not. {{ gecko_minversion_inline("7.0") }}</td>
+  </tr>
+  <tr>
+   <td><code>oldVersion</code></td>
+   <td><code>string</code></td>
+   <td>The previously installed version, if the reason is <code>ADDON_UPGRADE</code> or <code>ADDON_DOWNGRADE</code>, and the method is <code>install</code> or <code>startup</code>. {{ gecko_minversion_inline("22.0") }}</td>
+  </tr>
+  <tr>
+   <td><code>newVersion</code></td>
+   <td><code>string</code></td>
+   <td>The version to be installed, if the reason is <code>ADDON_UPGRADE</code> or <code>ADDON_DOWNGRADE</code>, and the method is <code>shutdown</code> or <code>uninstall</code>. {{ gecko_minversion_inline("22.0") }}</td>
+  </tr>
+ </tbody>
+</table>
+<div class="note">
+ <p><strong>Note:</strong> An add-on may be upgraded/downgraded at application startup, in this case the <code>startup</code> method reason is <code>APP_STARTUP</code>, and the <code>oldVersion</code> property is not set. Also be aware that in some circumstances an add-on upgrade/downgrade may occur without the <code>uninstall</code> method being called.</p>
+</div>
+<h2 id="Add-on_debugger">Add-on debugger</h2>
+<p>From Firefox 31 onwards, you can use the <a href="/en-US/Add-ons/Add-on_Debugger">Add-on Debugger</a> to debug bootstrapped add-ons.</p>
+<h2 id="Further_reading">Further reading</h2>
+<ul>
+ <li>Dave Garrett provides a step-by-step guide to <a class="external" href="https://flagfox.wordpress.com/2014/01/19/writing-restartless-addons/">convert an old overlay based extension into a restartless addon</a>. Some code samples provided.</li>
+ <li>Dave Townsend provides a basic code base to <a class="external" href="http://www.oxymoronical.com/blog/2011/01/Playing-with-windows-in-restartless-bootstrapped-extensions">load UI for each opened window</a> in a bootstrapped extension.</li>
+ <li>Wladimir Palant explains <a class="external" href="http://adblockplus.org/blog/how-many-hacks-does-it-take-to-make-your-extension-install-without-a-restart">problems and bugs found when converting an existing extension</a>, including some solutions and workarounds. (largely obsolete)</li>
+ <li>Mark Finkle provides some simple example code for <a class="external" href="http://starkravingfinkle.org/blog/2011/01/bootstrap-jones-adventures-in-restartless-add-ons/">restartless add-ons in mobile Firefox</a>, <a class="external" href="http://starkravingfinkle.org/blog/2011/01/restartless-add-ons-more-resources/">adding resources (like the options window)</a> to bootstrapped extensions and <a class="external" href="http://starkravingfinkle.org/blog/2011/01/restartless-add-ons-%e2%80%93-default-preferences/">using default preferences</a> without a <code>default/preferences/prefs.js</code> file.</li>
+ <li>Kris Maglione writes about <a class="external" href="http://maglione-k.users.sourceforge.net/bootstrapped.xhtml">the requirements for the cleanup procedures</a> in bootstrapped extensions.</li>
+ <li>Edward Lee shows off some <a class="external" href="http://ed.agadak.net/2011/01/restartless-add-on-example-code">helpful coding patterns and examples</a> you can use in your bootstrapped add-on.</li>
+ <li>Documentation for <a href="/en-US/docs/Extensions/Inline_Options">Inline Options</a> in Firefox 7 and later.</li>
+</ul>
diff --git a/files/de/mozilla/add-ons/index.html b/files/de/mozilla/add-ons/index.html
new file mode 100644
index 0000000000..298aba8754
--- /dev/null
+++ b/files/de/mozilla/add-ons/index.html
@@ -0,0 +1,198 @@
+---
+title: Add-ons
+slug: Mozilla/Add-ons
+tags:
+  - Add-ons
+  - Erweiterungen
+  - Mozilla
+translation_of: Mozilla/Add-ons
+---
+<div>{{AddonSidebar}}</div>
+
+<div class="summary"><u><em><strong>Ändern und Erweitern von Mozilla-Anwendungen</strong></em></u></div>
+
+<p><span class="seoSummary">Add-ons fügen neue Funktionalitäten zu <a href="/de/docs/Mozilla/Gecko">Gecko</a>-basierten Anwendungen wie zum Beispiel Firefox, SeaMonkey und Thunderbird hinzu.</span><strong> </strong>Es gibt zwei Arten von Add-ons: <a href="#Extensions">Erweiterungen</a> fügen neue Funktionen zur Anwendung hinzu, während <a href="#Themes">Themes</a> nur die Oberfläche verändern.</p>
+
+<p><span id="ouHighlight__0_2TO0_2">Für</span><span id="noHighlight_0.46174817388551737"> </span><span id="ouHighlight__9_18TO4_16">Erweiterungen</span><span id="noHighlight_0.9728453500078768"> </span><span id="ouHighlight__20_22TO18_20">und</span><span id="noHighlight_0.8772702394846859"> </span><span id="ouHighlight__24_29TO22_27">Themes</span><span id="noHighlight_0.10864923417065742"> </span><span id="ouHighlight__40_47TO29_36">betreibt</span><span id="noHighlight_0.2896404695195993"> </span><span id="ouHighlight__32_38TO38_44">Mozilla</span><span id="noHighlight_0.616403534771801"> </span><span id="ouHighlight__49_49TO46_48">ein</span><span id="noHighlight_0.3610688851925862"> </span><span id="ouHighlight__51_60TO50_59">Repository</span><span id="noHighlight_0.4564345131244706"> </span><span id="ouHighlight__62_63TO61_63">auf</span><span id="noHighlight_0.8092074683100744"> </span><a href="https://addons.mozilla.org/">addons.mozilla.org</a><span id="noHighlight_0.2282951451891393">,</span><span id="noHighlight_0.6708139759356772"> </span><span id="ouHighlight__85_88TO85_88">auch</span><span id="noHighlight_0.05199455050576829"> </span><span id="ouHighlight__90_94TO90_96">bekannt</span><span id="noHighlight_0.5422853980015302"> </span><span id="ouHighlight__96_97TO98_100">als</span><span id="noHighlight_0.7749799119731183"> </span><span id="ouHighlight__99_101TO102_104">AMO</span><span id="noHighlight_0.6685905641724511">.</span><span id="noHighlight_0.631834269557855"> </span><span id="ouHighlight__104_107TO107_110">Wenn</span><span id="noHighlight_0.7392724408625175"> </span><span id="ouHighlight__109_111TO112_114">Sie</span><span id="noHighlight_0.21350134406125387"> </span><a href="/de/Add-ons/Submitting_an_add-on_to_AMO"><span id="ouHighlight__120_126TO116_122">Add-ons</span><span id="noHighlight_0.2923239221030458"> bei</span><span id="noHighlight_0.8881758058990628"> </span><span id="ouHighlight__131_133TO128_130">AMO</span><span id="noHighlight_0.025624897842256078"> einreichen</span></a><span id="noHighlight_0.8413771821831256"> </span><span id="ouHighlight__140_142TO143_148">werden</span><span id="noHighlight_0.5558507955998613"> diese </span><span id="ouHighlight__144_151TO150_158">überprüft</span><span id="noHighlight_0.9072753976621971"> </span><span id="ouHighlight__154_156TO160_162">und erst</span><span id="noHighlight_0.6736322856600808"> </span><span id="ouHighlight__158_162TO164_167">nach</span><span id="noHighlight_0.25558448245838705"> </span><span id="ouHighlight__164_170TO169_179">bestandener</span><span id="noHighlight_0.8168167267155648"> </span><span id="ouHighlight__172_177TO181_187">Prüfung</span><span id="noHighlight_0.7442566133261889"> veröffentlicht</span><span id="noHighlight_0.8740845934787674">. Allerdings ist es nicht zwingend erforderlich, dass Add-ons nur über AMO veröffentlicht werden, aber durch die Überprüfung gewinnen Anwender an Vertrauen und im Gegenzug können Sie von AMO als einer zentralen Plattform, auf der viele hilfreiche Add-ons zu finden sind, nur profitieren.</span></p>
+
+<div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+<div><span class="highlight" id="ouHighlight__0_6TO0_6">Add-ons</span><span id="noHighlight_0.8073168651876949"> </span><span id="ouHighlight__8_10TO8_13">können</span><span id="noHighlight_0.5161412189661699"> </span><span id="ouHighlight__12_18TO15_20">großen</span><span id="noHighlight_0.7385260295513605"> </span><span id="ouHighlight__20_25TO22_33">Einfluss auf</span><span id="noHighlight_0.6855261499753901"> </span><span id="ouHighlight__27_29TO35_37">das</span><span id="noHighlight_0.16685755020083615"> </span><span id="ouHighlight__31_39TO39_47">Verhalten</span><span id="noHighlight_0.8541112890313974"> </span><span id="ouHighlight__41_42TO49_51">der</span><span id="noHighlight_0.4702563262360646"> </span><span id="ouHighlight__48_58TO53_61">Anwendung haben</span><span id="ouHighlight__60_63TO62_66">, die</span><span id="noHighlight_0.4344044719962509"> </span><span id="ouHighlight__71_74TO68_70">sie</span><span id="noHighlight_0.6103633117751325"> </span><span id="ouHighlight__65_69TO72_77">hosten</span><span id="noHighlight_0.5064620255593768">.</span><span id="noHighlight_0.8461832550228662"> </span><span id="ouHighlight__77_81TO80_88">Wir haben</span><span id="noHighlight_0.5294361961437433"> </span><span id="ouHighlight__93_93TO90_93">eine</span><span id="noHighlight_0.6544640902426183"> </span><span id="ouHighlight__95_97TO95_99">Reihe</span><span id="noHighlight_0.03377692679910005"> </span><span id="ouHighlight__99_100TO101_103">von</span><span id="noHighlight_0.9377326475684262"> </span><a href="/de/docs/Mozilla/Add-ons/Add-on_guidelines"><span id="ouHighlight__102_111TO105_115">Richtlinien</span></a><span id="ouHighlight__83_91TO194_203"> entwickelt</span><span id="noHighlight_0.5106467926791978">, </span><span id="ouHighlight__113_114TO118_119">um</span><span id="noHighlight_0.14890796820080987"> </span><span id="ouHighlight__116_126TO121_135">sicherzustellen</span><span id="ouHighlight__128_131TO136_141">, dass</span><span id="noHighlight_0.07500516160225124"> S</span><span id="ouHighlight__133_136TO143_145">ie</span><span id="noHighlight_0.08855436033349207"> </span><span id="ouHighlight__146_146TO147_150">eine</span><span id="noHighlight_0.3070385633480808"> </span><span id="ouHighlight__148_151TO152_155">gute</span><span id="noHighlight_0.3381150327176671"> </span><span id="ouHighlight__153_162TO157_165">Erfahrung</span><span id="noHighlight_0.07569587577790593"> </span><span id="ouHighlight__164_165TO167_169">für</span><span id="noHighlight_0.8464872954812956"> </span><span id="ouHighlight__167_171TO171_178">Benutzer</span><span id="noHighlight_0.6111953604296508"> </span><span id="ouHighlight__138_144TO180_192">bereitstellen</span><span id="noHighlight_0.754293482871765">.</span><span id="noHighlight_0.8279596833879079"> </span><span id="ouHighlight__174_178TO206_210">Diese</span><span id="noHighlight_0.1932574202336862"> </span><span id="ouHighlight__180_189TO212_222">Richtlinien</span><span id="noHighlight_0.2279840053412009"> </span><span id="ouHighlight__191_195TO224_229">gelten</span><span id="noHighlight_0.7699032448605116"> </span><span id="ouHighlight__197_199TO231_233">für</span><span id="noHighlight_0.5009387101195566"> </span><span id="ouHighlight__201_203TO235_238">alle</span><span id="noHighlight_0.1494141467754172"> </span><span id="ouHighlight__205_209TO240_244">Arten</span><span id="noHighlight_0.14879182542509328"> </span><span id="ouHighlight__211_212TO246_248">von</span><span id="noHighlight_0.5012259301526238"> </span><span id="ouHighlight__214_220TO250_253">Add-</span><span id="noHighlight_0.23289593709132983">ons</span><span id="noHighlight_0.4169765534770873">,</span><span id="noHighlight_0.48070762106654374"> </span><span id="ouHighlight__223_229TO259_260">ob</span><span id="noHighlight_0.3238985427414621"> </span><span id="ouHighlight__231_234TO262_264">sie</span><span id="noHighlight_0.5918557393357521"> </span><span id="ouHighlight__247_248TO266_268">auf</span><span id="noHighlight_0.7562549712671994"> </span><a href="https://addons.mozilla.org/"><span id="ouHighlight__250_267TO270_287">addons.mozilla.org</span></a><span id="noHighlight_0.5740639914818754"> </span><span id="ouHighlight__269_270TO289_292">oder</span><span id="noHighlight_0.28226842992825674"> </span><span id="ouHighlight__272_274TO294_298">nicht</span><span id="noHighlight_0.8114463871280692"> gehostet werden</span><span id="noHighlight_0.7988823650391782">.</span></div>
+</div>
+
+<hr>
+<h2 id="Erweiterungen"><a name="Extensions">Erweiterungen</a></h2>
+
+<p><span id="ouHighlight__0_9TO0_12">Erweiterungen</span><span id="noHighlight_0.5729434698073165"> fügen </span><span id="ouHighlight__15_17TO73_76">neue</span><span id="noHighlight_0.5426566923941274"> </span><span id="ouHighlight__19_31TO78_91">Funktionalität</span><span id="noHighlight_0.5729434698073165"> bei</span><span id="noHighlight_0.17223497468812032"> </span><span id="ouHighlight__36_42TO25_31">Mozilla</span><span id="noHighlight_0.30201855489047735">-</span><span id="ouHighlight__44_55TO33_43">Anwendungen</span><span id="noHighlight_0.9323699890664823"> </span><span id="ouHighlight__57_63TO45_47">wie</span><span id="noHighlight_0.6288054173067209"> </span><span id="ouHighlight__65_71TO49_55">Firefox</span><span id="noHighlight_0.3720649555765366"> </span><span id="ouHighlight__73_75TO57_59">und</span><span id="noHighlight_0.41093353307315184"> </span><span id="ouHighlight__77_87TO61_71">Thunderbird</span><span id="noHighlight_0.005072096932092651"> </span><span id="ouHighlight__33_34TO14_23">hinzu</span><span id="noHighlight_0.514778115570198">.</span><span id="noHighlight_0.8402892092302489"> Sie k</span><span id="ouHighlight__95_97TO94_99">önnen dem Browser</span><span id="noHighlight_0.6506630460504175"> </span>neue Funktionen <span id="ouHighlight__123_129TO105_111">hinzufügen</span><span id="noHighlight_0.4739361983240178">,</span><span id="noHighlight_0.9961192317983276"> </span><span id="ouHighlight__132_138TO114_118">z. B.</span><span id="noHighlight_0.8826244039728934"> </span><span id="ouHighlight__140_140TO120_123">eine</span><span id="noHighlight_0.5894468244715919"> </span><span id="ouHighlight__142_150TO125_130">andere</span><span id="noHighlight_0.21119886019042655"> </span><span id="ouHighlight__152_154TO132_142">Möglichkeit</span><span id="noHighlight_0.040012773147417136"> </span><span id="ouHighlight__156_157TO144_146">zum</span><span id="noHighlight_0.6037609008470418"> </span><span id="ouHighlight__159_164TO148_156">Verwalten</span><span id="noHighlight_0.7243803787966292"> von </span><span id="ouHighlight__166_169TO162_175">Registerkarten</span><span id="noHighlight_0.9132172497546358">,</span><span id="noHighlight_0.3979001439345283"> </span><span id="ouHighlight__103_105TO178_181">neue</span><span id="noHighlight_0.707735932331072"> </span><span id="ouHighlight__107_114TO183_192">Funktionen</span><span id="noHighlight_0.40561987701461166"> </span><span id="ouHighlight__116_117TO194_203">hinzufügen</span><span id="noHighlight_0.9616888386930491"> </span><span id="ouHighlight__172_174TO205_207">und</span><span id="noHighlight_0.6438472756046978"> </span><span id="ouHighlight__176_179TO209_211">sie</span><span id="noHighlight_0.5784811038902246"> </span><span id="ouHighlight__181_183TO213_218">können</span><span id="noHighlight_0.5937395654078539"> </span><span id="ouHighlight__192_194TO220_222">Web</span><span id="noHighlight_0.7099929023902743">-</span><span id="ouHighlight__196_202TO224_230">Inhalte</span><span id="noHighlight_0.9209985235882363"> </span><span id="ouHighlight__204_205TO232_234">zur</span><span id="noHighlight_0.09029320754299464"> </span><span id="ouHighlight__207_213TO236_247">Verbesserung</span><span id="noHighlight_0.20353211567771035"> </span><span id="ouHighlight__215_217TO249_251">der</span><span id="noHighlight_0.2439272349522139"> </span><span id="ouHighlight__219_227TO253_274">Benutzerfreundlichkeit</span><span id="noHighlight_0.9924717971226085"> </span><span id="ouHighlight__229_230TO276_279">oder</span><span id="noHighlight_0.43115927678722177"> die </span><span id="ouHighlight__232_239TO285_294">Sicherheit</span><span id="noHighlight_0.9524965819559671"> </span><span id="ouHighlight__241_242TO296_298">von</span><span id="noHighlight_0.7894184901812318"> </span><span id="ouHighlight__244_253TO300_309">bestimmten</span><span id="noHighlight_0.47692432029040743"> </span><span id="ouHighlight__255_262TO311_319">Webseiten</span><span id="noHighlight_0.07282619191471151"> </span><span id="ouHighlight__185_190TO321_326">ändern</span><span id="noHighlight_0.28402655314769354">.</span></p>
+
+<div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+<div><span class="highlight" id="ouHighlight__0_4TO0_1">Es</span><span id="noHighlight_0.5618336419358886"> </span><span id="ouHighlight__6_8TO3_6">gibt</span><span id="noHighlight_0.20951348350366739"> </span><span id="ouHighlight__10_14TO8_11">drei</span><span id="noHighlight_0.5210041330526933"> </span><span id="ouHighlight__16_24TO13_24">verschiedene</span><span id="noHighlight_0.15803069640292677"> Ansätze </span><span id="ouHighlight__58_67TO40_52">Erweiterungen</span><span id="noHighlight_0.7944043659249324"> </span><span id="ouHighlight__52_56TO54_62">zu erstellen</span><span id="noHighlight_0.7515176659448694"> können</span><span id="noHighlight_0.9583879950808301">:</span><span id="noHighlight_0.48850260791567"> </span><span id="ouHighlight__70_75TO72_77">Add-on</span><span id="noHighlight_0.5063497891968006"> </span><span id="ouHighlight__77_85TO79_90">SDK-basierte</span><span id="noHighlight_0.6910049815748374"> </span><span id="ouHighlight__87_96TO92_104">Erweiterungen</span><span id="noHighlight_0.8618006793204717">,</span><span id="noHighlight_0.42408608134295733"> </span><span id="ouHighlight__99_106TO107_113">manuell</span><span id="noHighlight_0.1487685728083037"> </span><span id="ouHighlight__108_119TO115_126">bootstrapped</span><span id="noHighlight_0.6457540411668959"> </span><span id="ouHighlight__121_131TO128_138">restartless</span><span id="noHighlight_0.20860427395815706"> </span><span id="ouHighlight__133_142TO140_152">Erweiterungen</span><span id="noHighlight_0.3909614429694541"> </span><span id="ouHighlight__145_147TO154_156">und</span><span id="noHighlight_0.5844507143177976"> </span><span id="ouHighlight__149_155TO158_164">Overlay</span><span id="noHighlight_0.6223730968805569">-</span><span id="ouHighlight__157_166TO166_178">Erweiterungen</span><span id="noHighlight_0.04213765936154057">.</span></div>
+
+<div></div>
+</div>
+
+<ul class="card-grid">
+ <li><span><a href="https://developer.mozilla.org/de/Add-ons/SDK">Add-on SDK Erweiterungen</a></span>
+
+  <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+  <div></div>
+
+  <div>Erweiterungen, die auf high-level JavaScript APIs aufbauen und keinen Browserneustart bei der Installation erfordern.</div>
+  </div>
+ </li>
+ <li><span><a href="/en-US/Add-ons/Bootstrapped_extensions">Restartless Erweiterungen</a></span>
+  <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+  <div></div>
+
+  <div>Erweiterungen, die keinen Browserneustart bei der Installation erfordern.</div>
+  </div>
+ </li>
+ <li><a href="/de/Add-ons/Overlay_Extensions"><span>Overlay Erweiterungen</span></a>
+  <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+  <div></div>
+
+  <div>Overlay-Erweiterungen, die gewöhnlich <a href="/de/docs/Mozilla/Tech/XUL/Overlays">XUL-Overlays</a> verwenden, und einen Browserneustart bei der Installation erfordern</div>
+  </div>
+ </li>
+</ul>
+
+<div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+<div><span id="ouHighlight__0_1TO0_3">Wenn</span><span id="noHighlight_0.3337830105998172"> </span><span id="ouHighlight__3_5TO5_7">Sie</span><span id="noHighlight_0.7746803241322997"> </span><span id="ouHighlight__7_9TO9_14">können</span><span id="noHighlight_0.585451144512538">,</span><span id="noHighlight_0.4911257835218017"> </span><span id="ouHighlight__12_15TO17_22">ist es</span><span id="noHighlight_0.6065425206393317"> </span><span id="ouHighlight__17_25TO24_29">ratsam</span><span id="noHighlight_0.550658005662535">,</span><span id="noHighlight_0.24798880559775416"> </span><span id="ouHighlight__34_36TO32_34">das</span><span id="noHighlight_0.8340677088719144"> </span><span id="ouHighlight__38_43TO36_41">Add-on</span><span id="noHighlight_0.00014064138883218558">-</span><span id="ouHighlight__45_47TO43_45">SDK</span><span id="noHighlight_0.8375346034178479">  zu </span><span id="ouHighlight__30_32TO47_55">verwenden</span><span id="noHighlight_0.005823161182457626">, die <span id="ouHighlight__38_43TO36_41">Add-on</span><span id="noHighlight_0.00014064138883218558">-</span><span id="ouHighlight__45_47TO43_45">SDK </span></span><span id="ouHighlight__56_59TO58_66">verwendet</span><span id="noHighlight_0.14337984823954886"> </span><span id="ouHighlight__61_63TO68_70">die</span><span id="noHighlight_0.7781581584527945"> </span><span id="ouHighlight__65_75TO72_82">restartless</span><span id="noHighlight_0.4376804997463938"> </span><span id="ouHighlight__77_95TO84_106">Erweiterungsmechanismus</span><span id="noHighlight_0.3984695253305903"> die aber</span><span id="noHighlight_0.7931560723784686"> </span><span id="ouHighlight__112_118TO113_121">bestimmte</span><span id="noHighlight_0.2588679376188092"> </span><span id="ouHighlight__120_124TO123_130">Aufgaben</span><span id="noHighlight_0.8667723987939762"> </span><span id="ouHighlight__101_110TO132_142">vereinfacht</span><span id="noHighlight_0.6199566203398377"> </span><span id="ouHighlight__126_128TO144_146">und</span><span id="noHighlight_0.2381105889500461"> </span><span id="ouHighlight__146_151TO163_166">sich selbst </span><span id="ouHighlight__130_138TO148_156">bereinigt. </span><span id="ouHighlight__154_155TO169_172">Wenn</span><span id="noHighlight_0.8347930705003632"> </span><span id="ouHighlight__157_159TO174_176">das</span><span id="noHighlight_0.0387513500553347"> </span><span id="ouHighlight__161_166TO178_183">Add-on</span><span id="noHighlight_0.6450042984906047"> </span><span id="ouHighlight__168_170TO185_187">SDK</span><span id="noHighlight_0.7701572494323595"> nicht </span><span id="ouHighlight__178_187TO195_205">ausreichend</span><span id="noHighlight_0.6563860977922914"> </span><span id="ouHighlight__189_191TO207_209">für</span><span id="noHighlight_0.6976277595872102"> </span><span id="ouHighlight__193_196TO211_214">Ihre</span><span id="noHighlight_0.04591068407091248"> </span><span id="ouHighlight__198_202TO216_226">Bedürfnisse</span><span id="noHighlight_0.22159616810780236"> </span><span id="ouHighlight__172_176TO228_230">ist</span><span id="noHighlight_0.6674557675600933">,</span><span id="noHighlight_0.07989125941461361"> </span><span id="ouHighlight__205_213TO233_246">implementieren</span><span id="noHighlight_0.30761721803101016"> Sie </span><span id="ouHighlight__246_252TO252_262">stattdessen</span><span id="noHighlight_0.8909545170859443"> </span><span id="ouHighlight__215_215TO264_267">eine</span><span id="noHighlight_0.6468098346773389"> </span><span id="ouHighlight__217_222TO269_276">manuelle</span><span id="noHighlight_0.6341425702033984"> </span><span id="ouHighlight__224_234TO278_288">restartless</span><span id="noHighlight_0.6460871563716616">-</span><span id="ouHighlight__236_244TO290_300">Erweiterung</span><span id="noHighlight_0.5146973093507594">.</span></div>
+
+<div></div>
+</div>
+
+<div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+<div><span id="ouHighlight__57_60TO0_4">Lesen</span><span id="noHighlight_0.6551587170848595"> Sie </span><span id="ouHighlight__0_2TO10_12">für</span><span id="noHighlight_0.5235885588700181"> </span><span id="ouHighlight__4_7TO14_20">weitere</span><span id="noHighlight_0.3269583681457525"> </span><span id="ouHighlight__9_19TO22_34">Informationen</span><span id="noHighlight_0.540100826342384"> </span><span id="ouHighlight__21_22TO36_38">zur</span><span id="noHighlight_0.13894618541551684"> </span><span id="ouHighlight__24_31TO40_46">Auswahl</span><span id="noHighlight_0.25469384450538257"> "</span><span id="ouHighlight__33_37TO48_53">welche</span><span id="noHighlight_0.7575584097586778"> </span><span id="ouHighlight__39_47TO55_61">Technik</span><span id="noHighlight_0.5414143564779148"> </span><span id="ouHighlight__52_54TO63_71">verwenden</span><span id="noHighlight_0.8016183801484662">" </span><span id="ouHighlight__62_65TO73_78">diesen</span><span id="noHighlight_0.2896063301754803"> </span><a href="/de/Add-ons/Comparing_Extension_Toolchains"><span id="ouHighlight__67_76TO80_88">Vergleich</span></a><span id="noHighlight_0.9816731982769745">.</span></div>
+
+<div></div>
+</div>
+
+<h3 id="Debugging">Debugging</h3>
+
+<p>Die Entwicklung von Erweiterung wird erschwert, wenn man für den Debug über keine Möglichkeit verfügt zu sehen, in welcher Zeile der Fehler aufgetreten ist. Sie müssen die Entwickler Präferenzen aktivieren, damit die logs in der Browser Konsole gezeigt werden. Für Dektopnutzer: <a href="https://developer.mozilla.org/de/docs/Einrichten_einer_Entwicklungsumgebung_f%C3%BCr_Erweiterungen#Entwicklungseinstellungen">Einrichten einer Entwicklungsumgebung für Erweiterungen</a>.</p>
+
+<p>Für eine Desktop-Umgebung nutzen Sie: <a href="/de/docs/XUL/School_tutorial/Eine_Entwicklungsumgebung_einrichten_Environment">Eine Entwicklungsumgebung einrichten</a>, für Mobile Geräte (Android/iOS) nutzen Sie: <a href="/de/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">Debugging Firefox for Android with WebIDE</a>. Letztere verwendet die "Browser Toolbox" innerhalb der Dektop WebIDE, um auf dem Mobilgerät auftretende Fehler zu erkennen, nutzen Sie für Firefox OS auch die WebIDE.</p>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Empfohlene_Vorgehensweisen"><span id="ouHighlight__0_13TO0_7">Empfohlene Vorgehensweisen</span></h3>
+
+<div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+<div><span class="highlight" id="ouHighlight__0_8TO0_3">Egal</span><span id="noHighlight_0.9527565672013398">, </span><span id="ouHighlight__10_12TO6_8">wie</span><span id="noHighlight_0.9263453430701603"> </span><span id="ouHighlight__14_16TO10_12">Sie</span><span id="noHighlight_0.20698839178159"> </span><span id="ouHighlight__26_27TO14_17">eine</span><span id="noHighlight_0.6200662748583877"> </span><span id="ouHighlight__29_37TO19_29">Erweiterung</span><span id="noHighlight_0.6728120070352871"> </span><span id="ouHighlight__18_24TO34_43">entwickeln</span><span id="noHighlight_0.4299495607061933">.</span><span id="noHighlight_0.7741888108021036"> </span><span id="ouHighlight__40_48TO46_49">Gibt</span><span id="noHighlight_0.5415096933419522"> es </span><span id="ouHighlight__50_53TO54_59">einige</span><span id="noHighlight_0.0720089039768479"> </span><span id="ouHighlight__55_64TO61_71">Richtlinien</span><span id="noHighlight_0.803657196413949">, denen </span><span id="ouHighlight__66_68TO78_80">Sie</span><span id="noHighlight_0.5984322114595474"> </span><span id="ouHighlight__74_79TO82_87">folgen</span><span id="noHighlight_0.12869484077400462"> </span><span id="ouHighlight__70_72TO89_94">können</span><span id="noHighlight_0.8370743591981885">, </span><span id="ouHighlight__81_82TO97_98">um</span><span id="noHighlight_0.6622236277215582"> </span><span id="ouHighlight__84_94TO100_114">sicherzustellen</span><span id="noHighlight_0.8564379951141409">, dass </span><span id="ouHighlight__96_99TO122_125">Ihre</span><span id="noHighlight_0.4459602478330692"> </span><span id="ouHighlight__101_109TO127_137">Erweiterung</span><span id="noHighlight_0.8961693769838563"> </span><span id="ouHighlight__128_128TO146_150">einem</span><span id="noHighlight_0.9686635232190152"> </span><span id="ouHighlight__130_133TO152_159">Benutzer eine möglichst gute Nutzererfahrung</span><span id="noHighlight_0.6251852022548666"> bietet</span><span id="ouHighlight__149_156TO174_180">.</span></div>
+
+<div></div>
+</div>
+
+<dl>
+ <dt><a href="/de/Add-ons/Performance_best_practices_in_extensions">Leistung</a></dt>
+ <dd>
+ <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+ <div><span id="ouHighlight__9_12TO0_2">Die</span><span id="noHighlight_0.5269484393147706"> </span><span id="ouHighlight__14_22TO4_14">Erweiterung</span><span id="noHighlight_0.9292851327044691"> </span><span id="ouHighlight__24_25TO16_18">ist</span><span id="noHighlight_0.7115102572562606"> </span><span id="ouHighlight__27_30TO20_26">schnell</span><span id="noHighlight_0.9124290392126198">,</span><span id="noHighlight_0.8579411377226112"> </span><span id="ouHighlight__33_42TO29_42">reaktionsfähig</span><span id="noHighlight_0.14649752077292222"> </span><span id="ouHighlight__44_46TO44_46">und</span><span id="noHighlight_0.8931592573259234"> </span><span id="ouHighlight__48_64TO48_66">Speicher-effizient.</span></div>
+ </div>
+ </dd>
+ <dt><a href="/de/Add-ons/Security_best_practices_in_extensions">Sicherheit</a></dt>
+ <dd>
+ <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+ <div><span id="noHighlight_0.7809287776294521">Die Erweiterung setzt den Nutzer keinen schädlichen Websites aus.</span></div>
+ </div>
+ </dd>
+ <dt><a href="/de/Add-ons/Extension_etiquette">Etikette</a></dt>
+ <dd>
+ <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+ <p><span id="ouHighlight__0_7TO0_13">Die Erweiterung arbeitet problemlos mit anderen Erweiterungen</span><span id="noHighlight_0.5275381715109507">.</span></p>
+ </div>
+ </dd>
+</dl>
+</div>
+
+<div class="column-half">
+<h3 id="Anwendungsspezifische"><span id="ouHighlight__0_19TO0_20">Anwendungsspezifische</span></h3>
+
+<div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+<div><span id="noHighlight_0.28953880883995153">Der </span><span id="ouHighlight__0_3TO4_11">Großteil</span><span id="noHighlight_0.841644606651682"> </span><span id="ouHighlight__5_6TO13_15">der</span><span id="noHighlight_0.9945862029585774"> </span><span id="ouHighlight__12_24TO17_29">Dokumentation</span><span id="noHighlight_0.4540168435472163"> </span><span id="ouHighlight__26_32TO31_52">geht davon aus</span><span id="ouHighlight__34_39TO53_62">, dass Sie</span><span id="noHighlight_0.7684776301011831"> </span><span id="ouHighlight__52_54TO64_66">für</span><span id="noHighlight_0.4193207842861575"> </span><span id="ouHighlight__56_62TO68_74">Firefox</span><span id="noHighlight_0.9088718078539929"> </span><span id="ouHighlight__64_70TO76_82">Desktop</span><span id="noHighlight_0.49963813570432103"> </span><span id="ouHighlight__41_50TO84_93">entwickeln</span><span id="noHighlight_0.9909568108756502">.</span><span id="noHighlight_0.7634750581056711"> </span><span id="ouHighlight__73_74TO96_99">Wenn</span><span id="noHighlight_0.18227136516518694"> </span><span id="ouHighlight__76_81TO101_103">Sie</span><span id="noHighlight_0.7937397378231141"> </span><span id="ouHighlight__94_96TO105_107">für</span><span id="noHighlight_0.446034339567268"> </span><span id="ouHighlight__98_101TO109_114">einige</span><span id="noHighlight_0.6132288336308135"> </span><span id="ouHighlight__103_107TO116_121">andere</span><span id="noHighlight_0.4998320478574969"> </span><span id="ouHighlight__109_119TO123_136">Gecko-basierte</span><span id="noHighlight_0.9832400471917658"> </span><span id="ouHighlight__121_131TO138_146">Anwendung</span><span id="noHighlight_0.2489654801480421"> </span><span id="ouHighlight__83_92TO148_157">entwickeln</span><span id="noHighlight_0.5137074691361836">,</span><span id="noHighlight_0.52164172348249"> </span><span id="ouHighlight__134_142TO160_163">gibt</span><span id="noHighlight_0.5326594647041315"> es </span><span id="ouHighlight__144_148TO168_172">große</span><span id="noHighlight_0.49279966118057716"> </span><span id="ouHighlight__150_160TO174_185">Unterschiede</span><span id="noHighlight_0.00917762905149666">, über die Sie Bescheid wissen müssen</span>.</div>
+
+<div></div>
+</div>
+
+<dl>
+ <dt><a href="/de/Add-ons/Thunderbird">Thunderbird</a></dt>
+ <dd>
+ <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+ <div><span class="highlight" id="ouHighlight__0_9TO0_10">Entwicklung</span><span id="noHighlight_0.8594649359455269"> von </span><span id="ouHighlight__11_20TO16_28">Erweiterungen</span><span id="noHighlight_0.808223459280189"> </span><span id="ouHighlight__22_24TO30_32">für</span><span id="noHighlight_0.1371760678355618"> </span><span id="ouHighlight__26_28TO34_36">den</span><span id="noHighlight_0.07522888675983863"> </span><span id="ouHighlight__30_40TO38_48">Thunderbird</span><span id="noHighlight_0.8486035940187313">-</span><span id="ouHighlight__42_45TO50_53">Mail</span><span id="noHighlight_0.47393784639771463">-</span><span id="ouHighlight__47_52TO55_60">Client</span><span id="noHighlight_0.1425177715644017">.</span></div>
+ </div>
+ </dd>
+ <dt><a href="/de/Add-ons/Firefox_for_Android">Firefox for Android</a></dt>
+ <dd>
+ <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+ <div><span class="highlight" id="ouHighlight__0_9TO0_10">Entwicklung</span><span id="noHighlight_0.4886350776165175"> von </span><span id="ouHighlight__11_20TO16_28">Erweiterungen</span><span id="noHighlight_0.8972505665957908"> </span><span id="ouHighlight__22_24TO30_32">für</span><span id="noHighlight_0.7124573638197107"> </span><span id="ouHighlight__26_32TO34_40">Firefox</span><span id="noHighlight_0.21979868666214342"> </span><span id="ouHighlight__34_36TO42_44">für</span><span id="noHighlight_0.18709199135447352"> </span><span id="ouHighlight__38_44TO46_52">Android</span><span id="noHighlight_0.7186912318112938">.</span></div>
+ </div>
+ </dd>
+ <dt><a href="/de/Add-ons/SeaMonkey_2">SeaMonkey</a></dt>
+ <dd>
+ <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+ <div><span id="ouHighlight__0_9TO0_10">Entwicklung</span><span id="noHighlight_0.4353357474301892"> von </span><span id="ouHighlight__11_20TO16_28">Erweiterungen</span><span id="noHighlight_0.3231901619416755"> </span><span id="ouHighlight__22_24TO30_32">für </span><a href="http://www.seamonkey-project.org/">SeaMonkey</a><span id="noHighlight_0.8390064965105459"> </span><span id="ouHighlight__40_47TO44_51">Software</span><span id="noHighlight_0.4412931994597855">-</span><span id="ouHighlight__49_53TO53_57">Suite</span><span id="noHighlight_0.3284779725993763">.</span></div>
+ </div>
+ </dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="Themes_2"><a name="Themes">Themes</a></h2>
+
+<div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+<div><span class="highlight" id="ouHighlight__0_5TO0_5">Themen</span><span id="noHighlight_0.7091726869291386"> </span><span id="ouHighlight__7_9TO7_10">sind</span><span id="noHighlight_0.7158110424914277"> </span><span id="ouHighlight__11_17TO12_18">Add-ons</span><span id="ouHighlight__19_22TO19_23">, die</span><span id="noHighlight_0.7855084263475988"> </span><span id="ouHighlight__52_65TO25_42">Benutzeroberfläche</span><span id="noHighlight_0.14409582791714548"> </span><span id="ouHighlight__34_36TO44_46">der</span><span id="noHighlight_0.9733285273704742"> </span><span id="ouHighlight__38_50TO48_56">Anwendung</span><span id="noHighlight_0.8181555853832905"> </span><span id="ouHighlight__24_32TO58_65">anpassen</span><span id="noHighlight_0.20276572757547962">.</span><span id="noHighlight_0.2625807275944092"> </span><span id="ouHighlight__68_72TO68_69">Es</span><span id="noHighlight_0.40480842245991133"> </span><span id="ouHighlight__74_76TO71_74">gibt</span><span id="noHighlight_0.35580628877654075"> </span><span id="ouHighlight__78_80TO76_79">zwei</span><span id="noHighlight_0.6726631148974175"> </span><span id="ouHighlight__82_86TO81_85">Arten</span><span id="noHighlight_0.6951386979247874"> </span><span id="ouHighlight__88_89TO87_89">von</span><span id="noHighlight_0.1266225433530359"> </span><span id="ouHighlight__91_96TO91_96">Themen</span><span id="noHighlight_0.6480903868387894">:</span><span id="noHighlight_0.3826606478753982"> </span><span id="ouHighlight__99_109TO99_105">leichte</span><span id="noHighlight_0.6792783607305855"> </span><span id="ouHighlight__111_116TO107_112">Themen</span><span id="noHighlight_0.4933933862487505"> </span><span id="ouHighlight__118_120TO114_116">und</span><span id="noHighlight_0.376437195200402"> </span><span id="ouHighlight__122_129TO118_126">komplette</span><span id="noHighlight_0.6218638899327298"> </span><span id="ouHighlight__131_136TO128_133">Themen</span><span id="noHighlight_0.796731371924988">.</span></div>
+
+<div></div>
+</div>
+
+<div class="column-container">
+<div class="column-half">
+<p><a href="https://addons.mozilla.org/de/developers/docs/themes"><span class="highlight" id="ouHighlight__0_10TO0_6">Leichte</span><span id="noHighlight_0.8076423798904167"> </span><span id="ouHighlight__12_17TO8_13">Themen</span></a><span id="noHighlight_0.8955283939242232"> </span><span id="ouHighlight__19_21TO15_18">sind</span><span id="noHighlight_0.9476356229330717"> </span><span id="ouHighlight__23_26TO20_23">viel</span><span id="noHighlight_0.860282754437777"> </span><span id="ouHighlight__28_34TO25_33">einfacher</span><span id="noHighlight_0.582288824259858"> </span><span id="ouHighlight__36_37TO35_36">zu</span><span id="noHighlight_0.5216144599053265"> </span><span id="ouHighlight__39_47TO38_51">implementieren</span><span id="noHighlight_0.765565431708579"> </span><span id="ouHighlight__49_52TO53_55">als</span><span id="noHighlight_0.5166018447680067"> </span><span id="ouHighlight__54_61TO57_65">komplette</span><span id="noHighlight_0.40329506865457243"> </span><span id="ouHighlight__63_68TO67_72">Themen</span><span id="noHighlight_0.9061345100744131">,</span><span id="noHighlight_0.35463797060676616"> </span><span id="ouHighlight__71_73TO75_78">aber sie </span><span id="ouHighlight__75_81TO105_110">bieten</span><span id="noHighlight_0.4430890269706572"> </span><span id="ouHighlight__83_86TO80_83">sehr</span><span id="noHighlight_0.9701129855139587"> </span><span id="ouHighlight__88_94TO85_93">begrenzte</span><span id="noHighlight_0.6256824291356461"> </span><span id="ouHighlight__96_108TO95_103">Anpassung</span><span id="noHighlight_0.22200604584963135">s möglichkeiten </span><span id="noHighlight_0.2890287412664867">.</span></p>
+</div>
+
+<div class="column-half">
+<div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+<div><span id="ouHighlight__0_3TO0_2">Mit</span><span id="noHighlight_0.7117414737790739"> </span><a href="/de/docs/Themes"><span id="ouHighlight__5_12TO4_13">kompletten</span><span id="noHighlight_0.04497219750149328"> Themes</span><span id="noHighlight_0.900419536727446"> </span></a><span id="ouHighlight__25_32TO23_28">machen</span><span id="noHighlight_0.7218148045305813"> </span><span id="ouHighlight__21_23TO30_32">Sie</span><span id="noHighlight_0.4386707677328683"> </span><span id="ouHighlight__34_37TO34_37">viel</span><span id="noHighlight_0.6945682788019498"> </span><span id="ouHighlight__39_44TO39_46">tieferen</span><span id="noHighlight_0.02507011941532078"> </span><span id="ouHighlight__46_58TO48_57">Änderungen</span><span id="noHighlight_0.6993966692173353"> </span><span id="ouHighlight__60_61TO59_60">an</span><span id="noHighlight_0.5480234798726392"> </span><span id="ouHighlight__63_65TO62_64">der</span><span id="noHighlight_0.32801931360345093"> </span><span class="highlight" id="ouHighlight__79_80TO66_83">Benutzeroberfläche</span><span id="noHighlight_0.812546935384922"> der </span><span id="ouHighlight__67_77TO89_97">Anwendung</span><span id="noHighlight_0.35402061599221446">.</span><span id="noHighlight_0.3490873352351369"> </span><span id="ouHighlight__83_85TO100_102">Die</span><span id="noHighlight_0.5419638678279032"> </span><span id="ouHighlight__87_99TO104_116">Dokumentation</span><span id="noHighlight_0.4889522018065986"> </span><span id="ouHighlight__101_103TO118_120">für</span><span id="noHighlight_0.3147442304269288"> </span><span id="ouHighlight__105_112TO122_130">komplette</span><span id="noHighlight_0.7409278300021354"> </span><span id="ouHighlight__114_119TO132_137">Themes</span><span id="noHighlight_0.9310480698691203"> </span><span id="ouHighlight__121_122TO139_141">ist</span><span id="noHighlight_0.19504357656123383"> </span><span id="ouHighlight__131_134TO143_150">veraltet</span><span id="noHighlight_0.351278927378499">,</span><span id="noHighlight_0.7834788929649756"> </span><span id="ouHighlight__137_139TO153_156">aber</span><span id="noHighlight_0.23221578864327252"> </span><span id="ouHighlight__141_142TO158_160">ist</span><span id="noHighlight_0.2072200413320433"> </span><span id="ouHighlight__154_157TO162_165">hier</span><span id="noHighlight_0.48896474805878065"> </span><span id="ouHighlight__159_160TO167_169">als</span><span id="noHighlight_0.7927970407375282"> </span><span id="ouHighlight__162_162TO171_174">eine</span><span id="noHighlight_0.3640498873599233"> </span><span id="ouHighlight__164_171TO176_183">mögliche</span><span id="noHighlight_0.4694294791588658"> </span><span id="ouHighlight__173_177TO185_193">Grundlage</span><span id="noHighlight_0.7299930099582119"> </span><span id="ouHighlight__179_181TO195_197">für</span><span id="noHighlight_0.08697375973628907"> </span><span id="ouHighlight__183_189TO199_211">aktualisierte</span><span id="noHighlight_0.4713024466741753"> </span><span id="ouHighlight__191_203TO213_225">Dokumentation</span><span id="noHighlight_0.9536066369584425"> </span><span id="ouHighlight__144_149TO227_235">verbunden</span><span id="noHighlight_0.8079093729885053">.</span></div>
+</div>
+</div>
+</div>
+
+<h2 id="Andere_Arten_von_Add-ons">Andere Arten von Add-ons</h2>
+
+<div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+<div><a href="/de/docs/Creating_OpenSearch_plugins_for_Firefox">Search engine plugins</a><span id="noHighlight_0.19786193015987918"> </span><span id="ouHighlight__22_24TO20_23">sind</span><span id="noHighlight_0.4042654635760823"> </span><span id="ouHighlight__26_26TO25_28">eine</span><span id="noHighlight_0.013331733575812854"> </span><span id="ouHighlight__28_33TO30_37">einfache</span><span id="noHighlight_0.3357292309767407"> </span><span id="ouHighlight__35_37TO39_41">und</span><span id="noHighlight_0.6906528779067063"> </span><span id="ouHighlight__39_42TO43_46">sehr</span><span id="noHighlight_0.795727328148957"> </span><span id="ouHighlight__44_51TO48_58">spezifische</span><span id="noHighlight_0.3885277082041798"> </span><span id="ouHighlight__53_56TO60_62">Art</span><span id="noHighlight_0.9928546588503686"> </span><span id="ouHighlight__58_59TO64_66">von</span><span id="noHighlight_0.05442968422145267"> </span><span id="ouHighlight__61_66TO68_73">Add-on</span><span id="noHighlight_0.23935903302768258">:</span><span id="noHighlight_0.3205499902071268"> </span><span id="ouHighlight__69_72TO76_78">sie</span><span id="noHighlight_0.7641452782587046"> </span><span id="ouHighlight__78_80TO80_83">fügen neue</span><span id="noHighlight_0.25923348582678285"> </span><span id="ouHighlight__82_95TO85_97">Suchmaschinen</span><span id="noHighlight_0.40861143856459026"> </span><span id="ouHighlight__97_98TO99_100">zu</span><span id="noHighlight_0.9796185082863216"> </span><span id="ouHighlight__100_102TO102_104">den</span><span id="noHighlight_0.9744248881763996"> </span><span id="ouHighlight__104_112TO106_112">Browser</span><span id="noHighlight_0.238452498937324">-</span><span id="ouHighlight__114_124TO114_123">Suchleiste</span><span id="noHighlight_0.6935225429152729"> </span><span id="ouHighlight__74_76TO125_134">hinzu</span><span id="noHighlight_0.8712683010470288">.</span></div>
+
+<div></div>
+</div>
+
+<div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+<div><strong><a href="/de/docs/Plugins">Plugins</a></strong><span id="noHighlight_0.308275920971552"> </span><span id="ouHighlight__8_11TO8_13">helfen</span><span id="noHighlight_0.005012862116077099"> </span><span id="ouHighlight__13_15TO15_17">den</span><span id="noHighlight_0.5836467766155674"> </span><span id="ouHighlight__17_27TO19_27">Anwendung</span><span id="noHighlight_0.5622831932929843"> den </span><span id="ouHighlight__40_46TO29_34">Inhalt</span><span id="noHighlight_0.0759762703159298"> zu </span><span id="ouHighlight__29_38TO39_47">verstehen</span><span id="ouHighlight__48_51TO48_52">, die</span><span id="noHighlight_0.9410264063356472"> </span><span id="ouHighlight__61_63TO54_58">nicht</span><span id="noHighlight_0.027592567795727163"> </span><span id="ouHighlight__65_72TO60_64">nativ</span><span id="noHighlight_0.1596520819365158"> </span><span id="ouHighlight__74_80TO66_76">unterstützt</span><span id="noHighlight_0.35445393961131644"> </span><span id="ouHighlight__56_59TO78_81">werden</span><span id="noHighlight_0.20435452023787382">.</span><span id="noHighlight_0.6269652232383389"> </span><span id="ouHighlight__83_84TO84_86">Wir</span><span id="noHighlight_0.4575597174820274"> </span><span id="ouHighlight__86_88TO88_91">sind</span><span id="noHighlight_0.9182470995338107"> </span><span id="ouHighlight__90_106TO93_97">dabei</span><span id="noHighlight_0.2323513020812058"> </span><span id="ouHighlight__108_118TO99_108">ablehnend</span><span id="noHighlight_0.18013907391857142"> Plugins zu </span><span id="ouHighlight__120_126TO110_122">Supporten</span><span id="noHighlight_0.8477490172852702">, </span><span id="ouHighlight__147_148TO143_144">da</span><span id="noHighlight_0.6743600132620321"> </span><span id="ouHighlight__150_153TO146_148">sie</span><span id="noHighlight_0.4732348168075391"> </span><span id="ouHighlight__160_160TO150_153">eine</span><span id="noHighlight_0.03990327193490939"> </span><span id="ouHighlight__162_168TO155_164">Geschichte</span><span id="noHighlight_0.053116464521166584"> </span><span id="ouHighlight__170_171TO166_168">der</span><span id="noHighlight_0.9308770254849978"> </span><span id="ouHighlight__181_189TO170_179">Stabilität</span><span id="noHighlight_0.053022201910917444">,</span><span id="noHighlight_0.9255764685927823"> </span><span id="ouHighlight__192_202TO182_189">Leistung</span><span id="noHighlight_0.2685633189745187"> </span><span id="ouHighlight__205_207TO191_193">und</span><span id="noHighlight_0.10023133462949951"> </span><span id="ouHighlight__218_225TO195_213">Sicherheitsprobleme</span><span id="noHighlight_0.7081075791010901"> </span><span id="ouHighlight__173_179TO215_224">verursacht</span><span id="noHighlight_0.26674105625618405"> </span><span id="ouHighlight__155_158TO226_230">haben</span><span id="noHighlight_0.03774240860132083">.</span></div>
+</div>
+
+<h2 id="Inhalt">Inhalt</h2>
+
+<ol>
+ <li><a href="/de/Add-ons/Overlay_Extensions" title="Overlay extensions">Overlay Erweiterung</a></li>
+ <li><a href="/de/Add-ons/Bootstrapped_extensions" title="Restartless extensions">Restartless Erweiterung</a></li>
+ <li><a href="/de/Add-ons/SDK">Add-on SDK</a></li>
+ <li><a href="#">Erweiterung  Bewährte</a>
+  <ol>
+   <li><a href="/de/Add-ons/Performance_best_practices_in_extensions" title="Performance">Leistung</a></li>
+   <li><a href="/de/Add-ons/Security_best_practices_in_extensions" title="Security">Sicherheit</a></li>
+   <li><a href="/de/Add-ons/Extension_etiquette" title="Etiquette">Etikette</a></li>
+  </ol>
+ </li>
+ <li><a href="#">Themes</a>
+  <ol>
+   <li><a href="https://addons.mozilla.org/de/developers/docs/themes" title="Lightweight themes">Leichte Themes</a></li>
+   <li><a href="/de/docs/Themes" title="Complete themes">Komplete Themes</a></li>
+  </ol>
+ </li>
+ <li><a href="#">Veröffentlichung Add-ons</a>
+  <ol>
+   <li><a href="https://addons.mozilla.org/" title="addons.mozilla.org">addons.mozilla.org</a></li>
+   <li><a href="/de/docs/Mozilla/Add-ons/Add-on_guidelines">Add-on Richtlinien</a></li>
+  </ol>
+ </li>
+</ol>
diff --git a/files/de/mozilla/add-ons/performance_best_practices_in_extensions/index.html b/files/de/mozilla/add-ons/performance_best_practices_in_extensions/index.html
new file mode 100644
index 0000000000..5a1c7e8052
--- /dev/null
+++ b/files/de/mozilla/add-ons/performance_best_practices_in_extensions/index.html
@@ -0,0 +1,156 @@
+---
+title: Best Practice für Performance in Erweiterungen
+slug: Mozilla/Add-ons/Performance_best_practices_in_extensions
+tags:
+  - Add-ons
+  - Best Practice
+  - Erweiterungen
+  - Leitfaden
+  - Performanz
+translation_of: Archive/Add-ons/Performance_best_practices_in_extensions
+---
+<p>Einer der größten Vorteile von Firefox ist seine Erweiterbarkeit. Erweiterungen können beinahe jede beliebige Funktion erfüllen. Doch dieses Konzept hat einen Nachteil: Eine schlecht geschriebene Erweiterung kann sich stark negativ auf das Nutzungserlebnis auswirken, und auch zu allgemeinen Leistungseinbußen in Firefox führen. Der folgende Artikel soll eine Reihe von Vorschlägen liefern, um die Leistung und Geschwindigkeit Deiner Erweiterung zu erhöhen, und dadurch auch von Firefox selbst.</p>
+
+<h2 id="Die_Startup_Leistung_Verbessern">Die Startup Leistung Verbessern</h2>
+
+<p>Erweiterungen werden immer dann geladen und gestartet, wenn eine neues Browser Fenster geöffnet wird. Im Umkehrschluss bedeutet das aber, dass Deine Erweiterung einen direkten Einfluss darauf hat, wie lange ein Benutzer beim Laden einer neuen Seite warten muss. Es gibt mehrere Möglichkeiten, die Startzeit Deiner Erweiterung zu optimieren und somit die Verzögerung für den Endbenutzer zu minimieren.</p>
+
+<h3 id="Lade_nur_was_nötig_ist">Lade nur, was nötig ist</h3>
+
+<p>Lade keine Ressourcen beim Startup, die nicht direkt benötigt werden. Das sind Daten, die erst nach einer Benutzerinteraktion, etwa ein Klick auf einen Button, benötigt werden, oder Daten die nur bei bestimmten Einstellungen zum Tragen kommen. Auch wenn Deine Erweiterung Features anbietet, die nur funktionieren wenn der Benutzer sich in ein Service eingeloggt hat, lade die Ressourcen für diese Features erst beim tatsächlichen Login.</p>
+
+<h3 id="Nutze_JavaScript_Code_Module">Nutze JavaScript Code Module</h3>
+
+<p>Du kannst Teile deiner Erweiterung in <a href="/de/docs/Mozilla/JavaScript_code_modules/Using" title="/en-US/docs/Mozilla/JavaScript_code_modules/Using">JavaScript code modules</a> kapseln. Diese Module können zur Laufzeit bei Bedarf geladen werden und reduzieren somit den Ladeaufwand zum Programmstart.</p>
+
+<p>Die JavaScript Code Module bieten hier einen Vorteil gegenüber XPCOM Modulen, die immer zu Beginn geladen werden.</p>
+
+<p>Natürlich hängt es von der Komplexität der Erweiterung ab, ob eine Modularisierung des Codes sinnvoll ist.</p>
+
+<h3 id="Verschiebe_alles_was_verschoben_werden_kann">Verschiebe alles, was verschoben werden kann</h3>
+
+<p>Die meisten Erweiterungen fangen das load event eines Fensters ab, um ihren Startup Code auszuführen. Hier sollte so wenig wie möglich getan werden. Das Browser Fenster wird so lange blockiert, bis der load Handler deiner Erweiterung abgeschlossen ist. Das bedeutet, je länger die Erweiterung dafür braucht, desto langsamer wirkt Firefox für den Benutzer.</p>
+
+<p>Jede Operation, die nicht sofort ausgeführt werden muss, kann mittels einem {{ interface("nsITimer") }} oder mit der {{ domxref("window.setTimeout()") }} Funktion für einen späteren Zeitpunkt geplant werden. Sogar kurze Verzögerungen in diesem Programmbereich können eine große Auswirkung auf die Ladegeschwindigkeit haben.</p>
+
+<h2 id="General_Performance_Tips">General Performance Tips</h2>
+
+<h3 id="Vermeide_Speicherlecks">Vermeide Speicherlecks</h3>
+
+<p>Speicherlecks können die Leistung deiner Erweiterung stark reduzieren, weil sie dafür sorgen, dass der Garbage Collector und der Cycle Collector mehr Arbeit haben.</p>
+
+<p>Sogenannte Zombiebereiche sind eine Form von Speicherlecks, die Du selbst sehr einfach entdecken und verhindern kannst. Lies dazu den Artikel zu <a href="/de/Zombie_compartments" title="en/Zombie_compartments">Zombie compartments</a>, speziell die Sektion <a href="/de/Zombie_compartments#Proactive_checking_of_add-ons" title="en/Zombie_compartments#Proactive_checking_of_add-ons">Proactive checking of add-ons</a>.</p>
+
+<p>Im Artikel <a href="/de/Extensions/Common_causes_of_memory_leaks_in_extensions" title="en/Extensions/Common_causes_of_zombie_compartments_in_extensions">Common causes of memory leaks in extensions</a> werden weitere Möglichkeiten, wie Du Zombiebereiche und andere Formen von Speicherlecks verhindern kannst, besprochen.</p>
+
+<p>Neben der direkten Suche nach den oben genannten Lecks solltest Du auch allgemein ein Auge auf die Speichernutzung deines Addons haben und regelmäßig unter about:memory überprüfen. Als Beispiel sei <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=719601" title="https://bugzilla.mozilla.org/show_bug.cgi?id=719601">bug 719601</a> genannt, bei dem ein "System Principal" JavaScript Bereich auf mehrere 100 MB an Speicher anwuchs, was <em>sehr</em> viel größer ist als im Regelfall.</p>
+
+<h3 id="Nutze_JavaScript_Module">Nutze JavaScript Module</h3>
+
+<p>JavaScript Module verhalten sich wie jeder andere JavaScript Code, mit dem feinen Unterschied, dass sie als Singletons agieren und daher von Firefox in den Cache abgelegt werden können. Dadurch können sie beim nächsten Start sehr viel effizienter geladen werden. Wann immer deine Erweiterung JavaScript Code von einem {{ HTMLElement("script") }} Element lädt, solltest du überlegen, stattdessen ein JavaScript Modul zu nutzen. Weitere Information über JavaScript Module und ihre Verwendung werden im Artikel <a href="/de/docs/Mozilla/JavaScript_code_modules/Using" title="/en-US/docs/Mozilla/JavaScript_code_modules/Using">Using JavaScript Code Modules</a> besprochen.</p>
+
+<h3 id="Vermeide_Langsamen_CSS_Code">Vermeide Langsamen CSS Code</h3>
+
+<ul>
+ <li>Lies den Leitfaden <a href="/de/CSS/Writing_Efficient_CSS" title="en/CSS/Writing_Efficient_CSS">"writing efficient CSS"</a></li>
+ <li>Beachte, dass jeder Selektor, der auf viele unterschiedliche Knoten zutreffen könnte, eine Quelle von Ineffizienz darstellen kann, entweder während dem Matching oder beim Verarbeiten von Updates. Das ist speziell in letzterem Fall problematisch, wenn der Selektor dynamisch zutreffen könnte oder nicht. Ein unqualifiziertes ":hover" sollte vermieden werden wie die Pest.</li>
+</ul>
+
+<h3 id="Vermeide_DOM_Mutation_Event_Listeners">Vermeide DOM Mutation Event Listeners</h3>
+
+<p>Durch das Hinzufügen eines DOM Mutation Listeners in einem Dokument werden die meisten DOM Mutation Optimierungen deaktiviert und die Performanz von weiteren Änderungen der DOM-Struktur des Dokuments wird <a href="http://groups.google.com/group/mozilla.dev.platform/browse_thread/thread/2f42f1d75bb906fb?pli=1">stark herabgesetzt</a>. Des weiteren kann dieser Effekt durch das Deaktivieren eines Mutation Listeners nicht wieder rückgängig gemacht werden. Die folgenden Events sollten daher strikt vermieden werden: <code>DOMAttrModified</code>, <code>DOMAttributeNameChanged</code>, <code>DOMCharacterDataModified</code>, <code>DOMElementNameChanged</code>, <code>DOMNodeInserted</code>, <code>DOMNodeInsertedIntoDocument</code>, <code>DOMNodeRemoved</code>, <code>DOMNodeRemovedFromDocument</code>, <code>DOMSubtreeModified</code></p>
+
+<p>Weitere Information zu diesen veralteten Events findest Du im Artikel <a href="/de/docs/Web/Guide/DOM/Events/Mutation_events" title="en-US/docs/Web/Guide/DOM/Events/Mutation_events">Mutation events</a>. Stattdessen sollten <a href="/de/docs/Web/API/MutationObserver" title="en-US/docs/Web/API/MutationObserver">Mutation Observers</a> benutzt werden.</p>
+
+<h3 id="Benutze_Lazy_Load_für_Services">Benutze Lazy Load für Services</h3>
+
+<p>Das JavaScript Modul <a href="/de/JavaScript_code_modules/XPCOMUtils.jsm#Methods">XPCOMUtils</a> bietet zwei Möglichkeiten für Lazy Loading:</p>
+
+<ul>
+ <li><code>defineLazyGetter()</code> definiert eine Getter-Funktion für ein bestimmtes Objekt, die erst bei der erstmaligen Verwendung angelegt wird. <a href="http://mxr.mozilla.org/mozilla-central/search?string=defineLazyGetter">Beispiele</a>.</li>
+ <li><code>defineLazyServiceGetter()</code> definiert eine Funktion für ein bestimmtes Objekt, die als Getter für ein Service fungiert. Das Service wird dabei erst aktiviert, wenn es zum ersten Mal benutzt wird. {{ LXRSearch("ident", "string", "defineLazyServiceGetter", "Lies den Quellcode") }} für Beispiele.</li>
+</ul>
+
+<p>Seit Firefox 4.0 werden viele übliche Services bereits in <a href="/de/JavaScript_code_modules/Services.jsm" title="en/JavaScript_code_modules/Services.jsm">Services.jsm</a> gecached.</p>
+
+<h3 id="Reduziere_File_IO">Reduziere File I/O</h3>
+
+<p>TODO: Hier fehlen Beispiele, wie etwa Links zu Code, Bugs, oder Docs.</p>
+
+<ul>
+ <li>Wenn du mit Firefox 3.6 und darunter kompatibel sein willst, oder wenn du <code>em:unpack</code> benutzt, verwende chrome JARs!</li>
+ <li>Kombiniere dein CSS</li>
+ <li>Kombiniere deine Einstellungsseiten</li>
+ <li>Kombiniere Schnittstellen in eine einzelne .idl Datei, um xpt Dateien zu reduzieren</li>
+ <li>Kombiniere Toolbar Icons in eine einzelne Datei</li>
+</ul>
+
+<h3 id="Benutze_die_Richtige_Kompressionsstufe_für_JAR_und_XPI_Dateien">Benutze die Richtige Kompressionsstufe für JAR und XPI Dateien</h3>
+
+<p>Daten von komprimierten Archiven zu lesen ist zeitaufwändig. Je stärker ein Archiv komprimiert ist, desto mehr Aufwand muss auch für das Lesen der darin befindlichen Daten erbracht werden. Daher sollten alle JAR Dateien in deiner Erweiterung mit Kompressionslevel 0 (keine Kompression) gepackt werden. Es mag kontraproduktiv klingen, aber dadurch wird zwar die Dateigröße der JAR Datei erhöht, die Größe der XPI Datei aber <em>reduziert</em>, weil dadurch die Möglichkeit gegeben ist, dass beim Komprimiered der XPI Datei Kompressionen der einzelnen im JAR enthaltenen Dateien stattfinden können. (Das kann als eine Art <a href="https://de.wikipedia.org/wiki/Progressive_Kompression">progressive Kompression</a> bezeichnet werden).</p>
+
+<p>Wenn deine Erweiterung nicht explizit <code>em:unpack</code> verwendet, wird das XPI file ab Firefox 4 nicht entpackt, sondern direkt genutzt. Aus diesem Grund ist eine niedrige Kompressionsstufe zu bevorzugen, wobei wir zu Kompressionslevel 1 raten. Selbst im Vergleich mit maximaler Kompression wird dadurch die Größe des Downloads nur geringfügig angehoben.</p>
+
+<h3 id="Benutze_asynchrone_IO">Benutze asynchrone I/O</h3>
+
+<p>Diese Regel kann nicht oft genug wiederholt werden: Benutze niemals synchrone I/O in einem GUI Thread.</p>
+
+<ul>
+ <li>Benutze keine synchronen XMLHttpRequests (XHR). Verwende stattdessen asynchrone Anfragen und zeige dem Benutzer ein Ladesymbol oder eine Nachricht, falls es zu Wartezeiten kommt.</li>
+ <li>Hilfsfunktionen für asynchrones Lesen und Kopieren von Dateien werden von <a href="/de/JavaScript_code_modules/NetUtil.jsm" title="en/JavaScript_code_modules/NetUtil.jsm">NetUtils.jsm</a> bereitgestellt.</li>
+ <li>Greife niemals synchron auf eine SQLite Datenbank zu. Benutze stattdessen die <a href="/de/Storage#Asynchronously">asynchrone API</a>.</li>
+</ul>
+
+<h3 id="Unnötige_Verwendung_von_onreadystatechange_in_XHR">Unnötige Verwendung von onreadystatechange in XHR</h3>
+
+<p>Für die meisten Anwendungsfälle sind <code>addEventListener</code>(load/error) und/oder xhr.onload/.onerror völlig ausreichend und bieten den Vorteil, dass sie nur einmal aufgerufen werden, im Gegensatz zu <code>onreadystatechange</code>. In vielen Fällen wird <code>onreadystatechange</code> aus Kompatibilitätsgründen verwendet, wenn XHR in einer Webseite verwendet wird. Das ist oft auchreichend, um Ressourcen zu laden oder Fehler zu behandeln. Allerdings werden load/error Event Listener viel seltener aufgerufen als <code>onreadystatechange</code>, genauer gesagt nur einmal, und es ist nicht notwendig jedes mal den <code>readyState</code>  zu überprüfen oder herauszufinden, ob es sich um ein error Event handelt. <code>onreadystatechange</code> sollte nur benutzt werden, wenn es notwendig ist, eine Antwort noch während ihrem Einlangen zu behandeln.</p>
+
+<h3 id="Entferne_Event_Listeners">Entferne Event Listeners</h3>
+
+<p>Entferne Event Listener, wenn sie nicht mehr benötigt werden. Es ist viel effizienter, Event Listener zu entfernen, als sie etwa durch Flags zu deaktivieren; denn bei zweiterem Ansatz muss bei jedem auftretenden Event die Flag abgefragt werden. Konstrukte wie <code>function onMouseOver(evt) { if (is_active) { /* doSomeThing */ } }</code> sollten also vermieden werden. Auch "Einmal-Events" sollten danach wieder deaktiviert werden:</p>
+
+<pre class="brush: js"> function init() {
+   var largeArray;
+   addEventListener('load', function onLoad() {
+        removeEventListener('load', onLoad, true);
+        largeArray.forEach();
+ }, true);
+</pre>
+
+<p>Andernfalls kann es vorkommen, dass Closure Objekte des Listeners weiter referenziert werden (in obigem Beispiel die Variable <code>largeArray</code>). Der Listener wird dadurch weit über seine nötige Lebensdauer im Speicher gehalten.</p>
+
+<h3 id="Befülle_Menüs_nach_Bedarf">Befülle Menüs nach Bedarf</h3>
+
+<p>Befülle Kontextmenüs (page, tabs, tools) nur nach Bedarf und reduziere Berechnungen auf ein Minimum, um die Reaktionsgeschwindigkeit der UI zu erhalten. Es ist nicht notwendig, bei jeder Änderung das gesamte Menü neu zu befüllen. Diese Aufgabe kann warten, bis der Benutzer das Menü tatsächlich verwenden will. Füge einen Listener für das "popupshowing" Event hinzu und erstelle/befülle das Kontextmenü dort.</p>
+
+<h3 id="Vermeide_Maus-Bewegungs-Events">Vermeide Maus-Bewegungs-Events</h3>
+
+<p>Vermeide die Verwendung von Mausbewegungsevents (enter, over, exit) oder minimiere zumindest die Berechnungen, die beim Auslösen eines solchen Events durchgeführt werden auf ein Minimum. Solche Events, besonders das <code>mouseover</code> Event, treten überlichweise sehr häufig auf. Es wird geraten, im Eventhandler nur neue Information zu speichern und die Berechnung erst dann auszuführen, wenn der Benutzer sie benötigt (zum Beispiel bei einem <code>popupshowing</code> Event). Vergiss auch nicht darauf, nicht mehr benötigte Event Listener auszuschalten (siehe oben).</p>
+
+<h3 id="Vermeide_Polling">Vermeide Polling</h3>
+
+<p>Benutze die {{ interface("nsIObserverService") }} Funktion stattdessen. Jede Erweiterung darf via {{ interface("nsIObserverService") }} eigene Benachrichtigungen versenden, aber die wenigsten benutzen diese Funktionalität. Auch viele andere Services bieten Funktionalität zur Beobachtung, etwa nslPrefBranch2.</p>
+
+<h3 id="aPNGaGIF_sind_oft_nicht_zu_Empfehlen">aPNG/aGIF sind oft nicht zu Empfehlen</h3>
+
+<p>Animationen benötigen viel Ladezeit, weil eine große Anzahl an Bildern dekodiert werden muss (die Frames der Animation). Animierte Bilder werden häufig aus dem Cache entfernt, was dazu führt, dass sie immer wieder neu geladen werden müssen. Besonders anfällig dafür ist {{ interface("nsITree") }} / {{ XULElem("tree") }}, das unter manchen Umständen gar kein Caching betreibt.</p>
+
+<h3 id="base64md5sha1_Implementierungen">base64/md5/sha1 Implementierungen</h3>
+
+<p>Verwende keine eigenen base64/md5/sha1 Implementierungen. Die eingebauten Funktionen für base64 <code>atob</code>/<code>btoa</code> sind völlig ausreichend und können in overlay Scripts sowie in JavaScript Modulen verwendet werden. Hashes können mit {{ interface("nsICryptoHash") }}, berechnet werden, das entweder einen String oder {{ interface("nsIInputStream") }} akzeptiert.</p>
+
+<h3 id="Image_sprites">Image sprites</h3>
+
+<p>Mehrere Bilder können in ein Sprite kombiniert werden. Siehe {{ cssxref("-moz-image-region") }}. Die meisten XUL Widgets, die zum Anzeigen von Bildern verwendet werden können (inklusive {{ XULElem("button") }} und {{ XULElem("toolbarbutton") }}) erlauben auch die Verwendung von {{ cssxref("list-style-image") }}. Vermeide die Benutzung der <code>imagesrc</code>/<code>src</code> Attribute für die einbettung von Bildern.</p>
+
+<h3 id="Verwende_Chrome_Workers">Verwende Chrome Workers</h3>
+
+<p>Für lange andauernde Berechnungen oder Datenverarbeitung kann {{ domxref("ChromeWorker") }} verwendet werden.</p>
+
+<h2 id="Weiterführende_Links">Weiterführende Links</h2>
+
+<ul>
+ <li><a href="/en/Performance/Measuring_add-on_startup_performance" title="en/Measuring Add-on Startup Performance">Measuring Add-on Startup Performance</a></li>
+ <li><a class="external" href="http://blog.mozilla.com/addons/2010/06/14/improve-extension-startup-performance/" title="http://blog.mozilla.com/addons/2010/06/14/improve-extension-startup-performance/">How to Improve Extension Startup Performance</a></li>
+ <li><a href="/en-US/docs/Performance">General information about measuring and improving performance in Mozilla code</a></li>
+</ul>
diff --git a/files/de/mozilla/add-ons/sdk/builder/index.html b/files/de/mozilla/add-ons/sdk/builder/index.html
new file mode 100644
index 0000000000..d243acec45
--- /dev/null
+++ b/files/de/mozilla/add-ons/sdk/builder/index.html
@@ -0,0 +1,16 @@
+---
+title: Builder
+slug: Mozilla/Add-ons/SDK/Builder
+tags:
+  - builder
+translation_of: Archive/Add-ons/Add-on_SDK/Builder
+---
+<p>Der Add-on Builder war ein web-basiertes Entwicklungssystem welches Entwicklern erlaubt hat, mit den SDK APIs Addons zu erstellen ohne das cfx Kommando-Zeilen-Tool verwenden zu müssen. Es wurde am 1. April 2014 eingestellt und jetzt leitet es auf die builder.addons.mozilla.org-Seite weiter.<br>
+ <br>
+ Falls sie bisher das SDK nur über den Builder verwendet haben, wissen sie bereits das meiste, das sie benötigen um direkt mit dem SDK arbeiten zu können. Die <a href="/en-US/Add-ons/SDK/High-Level_APIs">high-level</a> und <a href="/en-US/Add-ons/SDK/Low-Level_APIs">low-level</a> APIs, die für Builder Addons verwendet wurden sind jeweils die gleichen. Mit folgenden Schritten können sie zum SDK wechseln:</p>
+
+<ul>
+ <li>installieren sie <a href="/de/Add-ons/SDK/Tutorials/Installation">das SDK lokal</a></li>
+ <li>machen sie sich mit dem cfx Kommando-Zeilen-Tool mit Hilfe dieser <a href="/de/Add-ons/SDK/Tutorials/Getting_started">Einführung</a> und der  <a href="/de/Add-ons/SDK/Tools/cfx">detailierten <code>cfx</code> Referenz </a>vertraut</li>
+ <li>lernen sie die <a href="/en-US/Add-ons/SDK/Tools/package_json">package.json</a> Datei zum Konfigurieren ihres Add-On kennen</li>
+</ul>
diff --git a/files/de/mozilla/add-ons/sdk/guides/content_scripts/index.html b/files/de/mozilla/add-ons/sdk/guides/content_scripts/index.html
new file mode 100644
index 0000000000..a94176f2cb
--- /dev/null
+++ b/files/de/mozilla/add-ons/sdk/guides/content_scripts/index.html
@@ -0,0 +1,484 @@
+---
+title: Content Scripts
+slug: Mozilla/Add-ons/SDK/Guides/Content_Scripts
+translation_of: Archive/Add-ons/Add-on_SDK/Guides/Content_Scripts
+---
+<article id="wikiArticle">
+<p><span class="seoSummary">Viele Add-ons müssen den Inhalt von Webseiten modifizieren oder auf diesen zugreifen können. Der Grundcode des Add-on  bekommt aber keinen direkten Zugriff auf Webinhalte. Stattdessen müssen SDK Add-ons den Code,  der Zugriff auf Webinhalte erhält in seperate Skripte auslagern, die sogenannten "Content Scripts". Diese Seite beschreibt wie man Content Scripts entwickelt und diese implementiert. </span></p>
+
+<p>Content Scripts sind einer der verwirrenderen Aspekte beim Arbeiten mit der SDK, aber Sie werden mit Sicherheit mit ihnen arbeiten müssen. Es gibt fünf grundlegende Prinzipien:</p>
+
+<ul>
+ <li>Der Grundcode des Add-ons, wie zum Beispiel "main.js" und andere module im "lib" Verzeichnis, können die <a href="/de/Add-ons/SDK/High-Level_APIs">high-level</a> und <a href="/de/Add-ons/SDK/Low-Level_APIs">low-level</a> APIs benutzen, aber nicht direkt auf Webinhalte zugreifen.</li>
+ <li>Content Skripts <a href="/de/Add-ons/SDK/Guides/Two_Types_of_Scripts#API_Access_for_Add-on_Code_and_Content_Scripts">können keine SDK APIs</a> ( kein Zugang zu <code>exports</code>, <code>require</code>), dafür aber auf Webinhalte zugreifen.</li>
+ <li>SDK APIs, die Content Skripts verwenden, wie zum Beispiel <a href="/de/Add-ons/SDK/High-Level_APIs/page-mod">page-mod</a> und <a href="/de/Add-ons/SDK/High-Level_APIs/tabs">tabs</a>, bieten Funktionen die es dem Grundcode des Add-ons ermöglichen Content Skripts  in eine Weebseite zu laden.</li>
+ <li>Content Skripts können als Strings geladen werden, werden aber öfter in seperaten Dateien im Add-on Ordner "data" abgespeichert. Jpm erzeugt keinen "data" Ordner, daher muss dieser manuell hinzugefügt werden und ihr Content Scrikt dort abgespeichert werden.</li>
+ <li>Eine Nachricht übertragende API erlaubt es dem Grundcode und dem Content Skript miteinander zu kommunizieren.</li>
+</ul>
+
+<p>Dieses komplette Add-on zeigt alle diese Prinzipien. Die "main.js" hängt ein Content Skript an den aktuellen Tab, mittels den <a href="/de/Add-ons/SDK/High-Level_APIs/tabs">tabs </a>Modules, an. In diesem Fall wird der Content Skript in Form eines Strings übergeben. Das Content Skript ersetzt einfach nur den Inhalt der Seite:</p>
+
+<pre class="brush: js">// main.js
+var tabs = require("sdk/tabs");
+var contentScriptString = 'document.body.innerHTML = "&lt;h1&gt;Diese Seite wurde aufgegessen&lt;/h1&gt;";'
+
+tabs.activeTab.attach({
+  contentScript: contentScriptString
+});</pre>
+
+<p>Die folgenden high-level SDK Module können Content Skripts benutzen, um Webseiten zu bearbeiten:</p>
+
+<ul>
+ <li><a href="/de/Add-ons/SDK/High-Level_APIs/page-mod">page-mod</a>: Erlaubt es Ihnen Content Skripts bei Webseiten, die mit einem bestimmten URL Muster übereinstimmen, einzusetzen.</li>
+ <li><a href="/de/Add-ons/SDK/High-Level_APIs/tabs">tabs</a>: Exportiert ein Tab Objekt um mit einem Browser Tab zu arbeiten.Das Tab Objekt beinhaltet eine Funktion <a href="/de/Add-ons/SDK/High-Level_APIs/tabs#attach(options)"><code>attach()</code></a> um dem Skript Content Skripte anzuhängen.</li>
+ <li><a href="/de/Add-ons/SDK/High-Level_APIs/page-worker">page-worker</a>:  Lässt Sie eine Webseite erhalten ohne diese anzuzeigen. Sie können diesen Seiten Content Skripte anhängen, die DOM der Seite erreichen oder diese maniulieren.</li>
+ <li><a href="/de/Add-ons/SDK/High-Level_APIs/context-menu">context-menu</a>: Hiermit können Sie ein Content Skript benutzen um mit einer Seite zu interagieren, in der das Menü aufgerufen ist.</li>
+</ul>
+
+<p>Zusätzlich sind manche SDK Benutzeroberflächen Komponenten - Panel, Sidebar, frames - darauf ausgelegt HTML zu benutzen und haben deshalb seperate Skripte um mit ihrem Inhalt zu interagieren. In vielen Punkten sind diese Skripte wie Content Skripte, aber dies ist nicht Teil dieses Artikels. Um mehr über die Interaktion des Inhalts eines Benutzeroberflächenmoduls zu erfahren, schauen Sie sich die modulspezifischen Dokumentationen: <a href="/de/Add-ons/SDK/High-Level_APIs/panel">panel</a>, <a href="/de/Add-ons/SDK/Low-Level_APIs/ui_sidebar">sidebar</a>, <a href="/de/Add-ons/SDK/Low-Level_APIs/ui_frame">frame </a>an.</p>
+
+<p>Fast alle diese Beispiele, die in dieser Anleitung präsentiert werden, sind als komplette, aber minimalistische, Add-ons in der<a href="https://github.com/mdn/addon-sdk-content-scripts"> addon-sdk-content-scripts repository</a> auf Github vorhanden.</p>
+
+<h2 id="Content_Skripts_laden">Content Skripts laden</h2>
+
+<article id="wikiArticle">
+<p>Sie können ein einzelnes Skript laden, indem Sie einen String an die <code>contentScript</code> oder die <code>contentScriptFile</code> Option übergeben. Die <code>contentScript</code> Option behandelt den übergebenen String wie ein eigenes Skript:</p>
+
+<pre class="brush: js">// main.js
+
+var pageMod = require("sdk/page-mod");
+var contentScriptValue = 'document.body.innerHTML = ' +
+                         ' "&lt;h1&gt;Page matches ruleset&lt;/h1&gt;";';
+
+pageMod.PageMod({
+  include: "*.mozilla.org",
+  contentScript: contentScriptValue
+});</pre>
+
+<p><code>Die contentScriptFile</code> Option behandelt den String wie eine resource:// URL, die auf ein Skript zeigt, dass in ihrem Add-on Verzeichnis "data" gespeichert ist. jpm erstellt standardmäßig keinen "data" Ordner, also muss dieser erst erstellt werden, wenn Sie ihre Content Scripts verwenden wollen.</p>
+
+<p>Das Add-on liefert eine URL, die auf die Datei "content-script.js" zeigt, welche im <code>data</code> Unterordner des Add-on Stammverzeichnisses enthalten ist:</p>
+
+<pre class="brush: js">// main.js
+
+var data = require("sdk/self").data;
+var pageMod = require("sdk/page-mod");
+
+pageMod.PageMod({
+  include: "*.mozilla.org",
+  contentScriptFile: data.url("content-script.js")
+});</pre>
+
+<pre class="brush: js">// content-script.js
+
+document.body.innerHTML = "&lt;h1&gt;Seite erfüllt die Regeln.&lt;/h1&gt;";</pre>
+
+<div class="note">
+<p>Ab Firefox 34 , kann "./content-script.js" als Alias für self.data.url("content-script.js") verwendet werden. Die main.js kann also auch folgendermaßen geschrieben werden:</p>
+
+<pre class="brush: js">var pageMod = require("sdk/page-mod");
+
+pageMod.PageMod({
+  include: "*.mozilla.org",
+  contentScriptFile: "./content-script.js"
+});
+</pre>
+</div>
+
+<div class="warning">
+<p>Wenn ihr Content Skript nicht sehr simpel ist oder aus einem statischen String besteht, sollten Sie <code>contentScript</code>:  nicht benutzen. Wenn Sie es doch tun, könnten Sie Probleme haben Ihr Add.on auf AMO verifiziert zu bekommmen.</p>
+
+<p>Stattdessen sollten Sie ihr Skript in einer seperaten Datei schreiben und mit<code> contentScriptFile</code> laden. Das macht ihren Code übersichtlicher und er ist einfacher zu Warten, sichern und debuggen.</p>
+</div>
+
+<p>Sie können auch mehrere Skripte in <code>contentScript oder contentScriptFile laden, indem Sie ein Array von Strings übergeben:</code></p>
+
+<pre class="brush: js">// main.js
+
+var tabs = require("sdk/tabs");
+
+tabs.on('ready', function(tab) {
+  tab.attach({
+      contentScript: ['document.body.style.border = "5px solid red";', 'window.alert("hi");']
+  });
+});
+</pre>
+
+<pre class="brush: js">// main.js
+
+var data = require("sdk/self").data;
+var pageMod = require("sdk/page-mod");
+
+pageMod.PageMod({
+  include: "*.mozilla.org",
+  contentScriptFile: [data.url("jquery.min.js"), data.url("my-content-script.js")]
+});</pre>
+
+<p>Wenn Sie das tuen, können die Skripte direkt miteinander kommunizieren, als wären es Skripte der gleichen Webseite.</p>
+
+<p>Sie können auch <code>contentScript und contentScriptFile zusammen benutzen.</code> Wenn Sie das tun, werden die Skripte, die sie in <code>contentScriptFile spezifizieren vor denen in contentScript geladen. Das ermöglicht es Ihnen javaScript Bibliotheken, wie JQuery über eine URL zu laden und dann ein simples Skript inline zu verwenden, dass diese Bibliothek benutzt:</code></p>
+
+<pre class="brush: js">// main.js
+
+var data = require("sdk/self").data;
+var pageMod = require("sdk/page-mod");
+
+var contentScriptString = '$("body").html("&lt;h1&gt;Page matches ruleset&lt;/h1&gt;");';
+
+pageMod.PageMod({
+  include: "*.mozilla.org",
+  contentScript: contentScriptString,
+  contentScriptFile: data.url("jquery.js")
+});</pre>
+
+<div class="warning">
+<p>Wenn ihr Content Skript nicht sehr simpel ist oder aus einem statischen String besteht, sollten Sie <code>contentScript</code>:  nicht benutzen. Wenn Sie es doch tun, könnten Sie Probleme haben Ihr Add.on auf AMO verifiziert zu bekommmen.</p>
+
+<p>Stattdessen sollten Sie ihr Skript in einer seperaten Datei schreiben und mit<code> contentScriptFile</code> laden. Das macht ihren Code übersichtlicher und er ist einfacher zu Warten, sichern und debuggen.</p>
+</div>
+
+<h3 id="Kontrollieren_wann_das_Skript_angehängt_werden_soll.">Kontrollieren, wann das Skript angehängt werden soll.</h3>
+
+<p>Die <code>contentScriptWhen</code> Option spezifiziert, wann das/die Content Skript/e geladen werden sollen. Diese brauch eine dieser Parameter:</p>
+
+<ul>
+ <li><code>"start"</code>: Läd das Skript sofort, nach dem das Dokumentelement der Seite in den DOM eingefügt wird. ZU diesem Zeitpunkt wurde der DOM Inhalt noch nicht geladen,, deshalb kann das Skript nicht damit interagieren.</li>
+ <li><code>"ready"</code>: Läd das Skript nachdem der DOM der Seite geladen wurde: Dies ist der Fall, wenn das <a href="https://developer.mozilla.org/de/Gecko-Specific_DOM_Events">DOMContentLoaded Event  </a>abgefeuert wird. Ab diesem Zeitpunkt können Content Skripts mit dem DOM interagieren, aber extern referenzierte Stylesheets und Bilder könnten noch nicht geladen sein.</li>
+ <li><code>"end"</code>: Läd das Skript nachdem der komplette Inhalt (DOM, JS, CSS, images) der Seute geladen wurde. Zu diesem Zeitpunkt wird das <a href="https://developer.mozilla.org/de/DOM/window.onload">window.onload event</a> abgefeuert.</li>
+</ul>
+
+<p>Der Standardwert ist <code>"end"</code>.</p>
+
+<p>Die Funktion <a href="/de/Add-ons/SDK/High-Level_APIs/tabs#attach(options)"><code>tab.attach()</code></a> akzepiert contentScriptWhen nicht, da es generell aufgerufen wird wenn die Seite geladen wurde.</p>
+
+<h3 id="Übergabe_von_Konfigurationsoptionen">Übergabe von Konfigurationsoptionen</h3>
+
+<p>Das <code>contentScriptOptions</code> Objekt ist ein JSON Objekt, das den Content Skripts als "read-only" Wert als <code><a href="/de/Add-ons/SDK/Guides/Content_Scripts/self">self</a>.options Eigenschaft</code> übergeben wird:</p>
+
+<pre class="brush: js">// main.js
+
+var tabs = require("sdk/tabs");
+
+tabs.on('ready', function(tab) {
+  tab.attach({
+      contentScript: 'window.alert(self.options.message);',
+      contentScriptOptions: {"message" : "hello world"}
+  });
+});</pre>
+
+<p>Jeder Wert (Objekt, Feld, String, etc), dass in JSON dargestellt werden kann, kann hier benutzt werden.</p>
+
+<h2 id="Zugriff_auf_den_DOM">Zugriff auf den DOM</h2>
+
+<p>Content Skripts können natürlich wie jedes andere Skript, dass die Seite geladen hat ( Page Skripts) auf den DOM zugreifen. Content Skripts und Page Skripts sind wie folgt von einander isoliert:</p>
+
+<ul>
+ <li>Content Skripts sehen keine JavaScript Objekte, die der Seite über Page Skripts hinzugefügt wurden.</li>
+ <li>Auch wenn ein Page Skript das Verhalten eines DOM Objekts verändert hat, sieht das Content Skript nur das Originalverhalten.</li>
+</ul>
+
+<p>Das gleiche gilt auch umgekehrt: Page Skripts sehen keine JavaScript Objekte, die von Content Skripts hinzugefügt wurden.</p>
+
+<p>Stellen Sie sich eine Seite vor, die zum Beispiel eine Variable <code>foo</code> über ein Page Skript zum <code>window</code> Objekt hinzufügt:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html"&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;script&gt;
+    window.foo = "hello from page script"
+    &lt;/script&gt;
+  &lt;/head&gt;
+&lt;/html&gt;</pre>
+
+<p>Ein anderes Skript, dass nach diesem Skript in die Seite geladen wird, kann auf <code>foo </code>zugreifen. Ein Content Skript kann dies nicht:</p>
+
+<pre class="brush: js">// main.js
+
+var tabs = require("sdk/tabs");
+var mod = require("sdk/page-mod");
+var self = require("sdk/self");
+
+var pageUrl = self.data.url("page.html")
+
+var pageMod = mod.PageMod({
+  include: pageUrl,
+  contentScript: "console.log(window.foo);"
+})
+
+tabs.open(pageUrl);</pre>
+
+<pre>console.log: my-addon: null
+</pre>
+
+<p>Es gibt gute Gründe für diese Isolation. Erstens können Content Skripts so keine Objekte an Webseiten übermitteln und somit Sicherheitslücken schaffen. Zweitens können Content Skripts so Objekte erzeugen, ohne sich Sorgen machen zu müssen, dass diese mit Objekten kollidieren, die in Page Skripts erzeugt wurden.</p>
+
+<p>Die Isulation bedeutet, dass wenn zum Beispiel eine Webseite die JQuery Bibliothek läd, das Content Skript nicht in der Lage ist dieses zu sehen, aber eine eigene JQuery Bibliothek laden kann ohne das es ein Problem mit der Version gibt, die über das Page Skript hinzugefügt wurde.</p>
+
+<h3 id="Interaktion_mit_Page_Skripts">Interaktion mit Page Skripts</h3>
+
+<p>Normalerweise möchte man Content Skripts und Page Skripts voneinander isolieren. Wenn dies nicht der Fall ist, da Sie zum Beispiel Objekte zwischen beiden Skripten austauschen wollen, oder Nachrichten zwischen ihnen schicken wollen können Sie mehr zum Thema unter  <a href="https://developer.mozilla.org/de/Add-ons/SDK/Guides/Content_Scripts/Interacting_with_page_scripts">Interaktion mit Page Skripts</a> finden.</p>
+
+<h3 id="Event_Listeners">Event Listeners</h3>
+
+<p>Man kann in Content Skripts genau wie in einem Page Skript auf DOM Events warten. Es gibt nur zwei wichtige Unterschieden:</p>
+
+<p>Erstens: Falls Sie einen Event Listener als String an <a href="https://developer.mozilla.org/de/DOM/element.setAttribute"><code>setAttribute()</code></a> übergeben, wird der Listener im Seitenkontext ausgeführt und hat somit keinen Zugriff auf Variablen, die im Content Skript definiert wurden.</p>
+
+<p>Zum Beispiel, wird dieses Content Skript mit der Fehlermeldung "theMessage is not defined" ausgeben:</p>
+
+<pre class="brush: js">var theMessage = "Hello from content script!";
+anElement.setAttribute("onclick", "alert(theMessage);");</pre>
+
+<p>Zweitens: Falls Sie einen Event Listener per direkter Zuweisung einem <a href="/de/docs/Web/API/GlobalEventHandlers">globalen Event Handler</a>  wie <code>onclick zuweisen</code>, könnten Zuweisungen, die die Seite vornimmt überschrieben werden. Zur Veranschaulichung ist hier ein Add-on, das versucht einen click Handler per Zuweisung an window.onclick anzufügen:</p>
+
+<pre class="brush: js">var myScript = "window.onclick = function() {" +
+               "  console.log('unsafewindow.onclick: ' + window.document.title);" +
+               "}";
+
+require("sdk/page-mod").PageMod({
+  include: "*",
+  contentScript: myScript,
+  contentScriptWhen: "start"
+});</pre>
+
+<p>Das wird auf den meisten Seiten funktionieren, bis auf denen, die ebenfalls ein onclick zuweisen:</p>
+
+<pre class="brush: html">&lt;html&gt;
+  &lt;head&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;script&gt;
+    window.onclick = function() {
+      window.alert("it's my click now!");
+    }
+    &lt;/script&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Aus diesen Gründen ist es besser Event Listeners per <a href="https://developer.mozilla.org/de/DOM/element.addEventListener"><code>addEventListener()</code></a> hinzuzufügen. So definieren Sie einen Listener als Funktion:</p>
+
+<pre class="brush: js">var theMessage = "Hello from content script!";
+
+anElement.onclick = function() {
+  alert(theMessage);
+};
+
+anotherElement.addEventListener("click", function() {
+  alert(theMessage);
+});</pre>
+
+<h2 id="Kommunikation_mit_dem_Add-on">Kommunikation mit dem Add-on</h2>
+
+<p>Damit Add-On Sktipts und Content Skripts miteinander kommunizieren können, haben beide Seiten der Konversation Zugriff auf ein <code>port</code> Objekt.</p>
+
+<ul>
+ <li>Um eine Nachricht von einer Seite zur anderen zu schicken nutzen Sie <code>port.emit()</code></li>
+ <li>Um eine Nachricht von der anderen Seite zu empfangen nutzen <code>port.on()</code></li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7873/content-scripting-overview.png" style="display: block; margin-left: auto; margin-right: auto;">Nachrichten sind asyncron, was bedeutet, dass der Sender nicht wartet, bis er eine Antwort des Empfängers erhält, sondern die Nachricht schickt und das weiter arbeitet.</p>
+
+<p>Hier ist ein simples Beispieladd-on, das eine Nachricht an ein Content Skript per <code>port </code>schickt:</p>
+
+<pre class="brush: js">// main.js
+
+var tabs = require("sdk/tabs");
+var self = require("sdk/self");
+
+tabs.on("ready", function(tab) {
+  worker = tab.attach({
+    contentScriptFile: self.data.url("content-script.js")
+  });
+  worker.port.emit("alert", "Message from the add-on");
+});
+
+tabs.open("http://www.mozilla.org");</pre>
+
+<pre class="brush: js">// content-script.js
+
+self.port.on("alert", function(message) {
+  window.alert(message);
+});</pre>
+
+<div class="note">
+<p>Das context-menu Modul benutzt das Kommunikationsmodul, das hier beschrieben wird nicht. Um etwas über die Kommunikation mit geladenen Content Skripts im context-menu zu erfahren, schauen Sie in die <a href="/de/Add-ons/SDK/High-Level_APIs/context-menu">context-menu Dokumentation</a>.</p>
+</div>
+
+<h3 id="Zugriff_auf_port_im_Content_Skript">Zugriff auf port im Content Skript</h3>
+
+<p>Im Content Skript ist das port Objekt als Eigenschaft im globalen Objekt<a href="/de/Add-ons/SDK/Guides/Content_Scripts/self"><code> self</code></a> verfügbar. So versenden Sie eine Nachricht vom Content Skript:</p>
+
+<pre class="brush: js">self.port.emit("myContentScriptMessage", myContentScriptMessagePayload);</pre>
+
+<p>Um eine Nachricht vom Add-on Code zu bekommen:</p>
+
+<pre class="brush: js">self.port.on("myAddonMessage", function(myAddonMessagePayload) {
+  // Handle the message
+});</pre>
+
+<div class="note">
+<p><span>Das globale <a href="/de/Add-ons/SDK/Guides/Content_Scripts/self"><code>self</code></a> Objekt ist etwas komplett anderes als das <a href="https://developer.mozilla.org/de/Add-ons/SDK/High-Level_APIs/self">self Modul</a>, das einer API in einem Add-on die Möglichkeit bietet auf Daten und die ID des Add-ons zuzugreifen.</span></p>
+</div>
+
+<h3 id="Zugriff_auf_port_im_Add-on_Skript">Zugriff auf port im Add-on Skript</h3>
+
+<p>Im Add-on Code ist das Bindeglied zur Kommunikation zwischen Add-on und einem spezifischen Content Skript das  <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/content_worker"><code>worker</code></a> Objekt. Das <code>port Objekt ist also eine Eigenschaft des</code>  <code>worker</code> Objekts.</p>
+
+<p>Der worker wird aber im Add-on Code nicht von allen Modulen gleich verwendet.</p>
+
+<h4 id="Vom_page-worker"><code>Vom page-worker</code></h4>
+
+<p><code>Das page-worker</code> Objekt integriert die worker API direkt. Um also eine Nachricht von einem Content Skript zu erhalten, das mit dem page-worker assoziiert wird benutzt man <code>pageWorker.port.on()</code>:</p>
+
+<pre class="brush: js">// main.js
+
+var pageWorkers = require("sdk/page-worker");
+var self = require("sdk/self");
+
+var pageWorker = require("sdk/page-worker").Page({
+  contentScriptFile: self.data.url("content-script.js"),
+  contentURL: "http://en.wikipedia.org/wiki/Internet"
+});
+
+pageWorker.port.on("first-para", function(firstPara) {
+  console.log(firstPara);
+});</pre>
+
+<p>Um eine benutzerdefinierte Nachricht vom Add-on zu schicken, nutz man <code>pageWorker.port.emit()</code>:</p>
+
+<pre class="brush: js">// main.js
+
+var pageWorkers = require("sdk/page-worker");
+var self = require("sdk/self");
+
+pageWorker = require("sdk/page-worker").Page({
+  contentScriptFile: self.data.url("content-script.js"),
+  contentURL: "http://en.wikipedia.org/wiki/Internet"
+});
+
+pageWorker.port.on("first-para", function(firstPara) {
+  console.log(firstPara);
+});
+
+pageWorker.port.emit("get-first-para");</pre>
+
+<pre class="brush: js">// content-script.js
+
+self.port.on("get-first-para", getFirstPara);
+
+function getFirstPara() {
+  var paras = document.getElementsByTagName("p");
+  if (paras.length &gt; 0) {
+    var firstPara = paras[0].textContent;
+    self.port.emit("first-para", firstPara);
+  }
+}</pre>
+
+<h4 id="Vom_page-mod"><code>Vom page-mod</code></h4>
+
+<p>Ein einziges  <code>page-mod</code> Objekt kann ein Skript an mehrere Seiten anhängen. Jede dieser Seiten hat ihren eigenen Context, in dem sie dieses Skript aufrufen. Daher benötigt es seperate Kanäle(worker) für jede Seite.</p>
+
+<p><code>page-mod</code> integriert also die worker API nicht direkt, sondern es wird jedes Mal wenn ein Content Skript an eine Seite angehängt wird das <code>attach</code> Event aufgerufen,  dessen listener einen worker für den Kontext übergeben bekommt. Durch das bereit stellen eines listeners bei attach kann man das port Objekt für das Content Skript, dass dieser Seite angefügt wurde über diesen page-mod verwenden:</p>
+
+<pre class="brush: js">// main.js
+
+var pageMods = require("sdk/page-mod");
+var self = require("sdk/self");
+
+var pageMod = pageMods.PageMod({
+  include: ['*'],
+  contentScriptFile: self.data.url("content-script.js"),
+  onAttach: startListening
+});
+
+function startListening(worker) {
+  worker.port.on('click', function(html) {
+    worker.port.emit('warning', 'Do not click this again');
+  });
+}</pre>
+
+<pre class="brush: js">// content-script.js
+
+window.addEventListener('click', function(event) {
+  self.port.emit('click', event.target.toString());
+  event.stopPropagation();
+  event.preventDefault();
+}, false);
+
+self.port.on('warning', function(message) {
+  window.alert(message);
+});
+</pre>
+
+<p>Im oben gezeigten Add-on gibt es zwei Nachrichten:</p>
+
+<ul>
+ <li><code>click</code> wird vom page-mod an das Add-on geschickt, wenn der Nutzer auf ein Element auf der Seite klickt</li>
+ <li><code>warning</code> schickt einen String zurück an den page-mod</li>
+</ul>
+
+<h4 id="Von_Tab.attach()"><code>Von Tab.attach()</code></h4>
+
+<p><code>Die Tab.attach()</code> methode liefert einen worker zurück, den man zur Kommunikation mit dem/den Content Skript/Content Skripts, die angehängt wurden, verwenden kann.</p>
+
+<p>Das Add-on fügt einen Button zu Firefox hinzu: Wenn der Benutzer den Button drückt, fügt das Add-on ein Content Skript an den aktuellen Tab an. Das Skript sendet eine Nachricht namens "my-addon-message" und wartet auf eine Antwort namens "my-script-response":</p>
+
+<pre class="brush: js">//main.js
+
+var tabs = require("sdk/tabs");
+var buttons = require("sdk/ui/button/action");
+var self = require("sdk/self");
+
+buttons.ActionButton({
+  id: "attach-script",
+  label: "Attach the script",
+  icon: "./icon-16.png",
+  onClick: attachScript
+});
+
+function attachScript() {
+  var worker = tabs.activeTab.attach({
+    contentScriptFile: self.data.url("content-script.js")
+  });
+  worker.port.on("my-script-response", function(response) {
+    console.log(response);
+  });
+  worker.port.emit("my-addon-message", "Message from the add-on");
+}
+</pre>
+
+<pre class="brush: js">// content-script.js
+
+self.port.on("my-addon-message", handleMessage);
+
+function handleMessage(message) {
+  alert(message);
+  self.port.emit("my-script-response", "Response from content script");
+}</pre>
+
+<h3 id="Die_port_API">Die port API</h3>
+
+<p>Schaue unter <a href="/de/Add-ons/SDK/Guides/Content_Scripts/port">der Referenzseite für das port Objekt</a>.</p>
+</article>
+
+<h3 id="Die_postMessage_API">Die postMessage API</h3>
+
+<p>bevor das port Objekt hinzugefügt wurde, kommunizierten Add-on Code und Content Skripts über eine andere API:</p>
+
+<ul>
+ <li>Das Content Skript rief <code>self.postMessage()</code> auf, um zu senden und <code>self.on() um zu empfangen.</code></li>
+ <li>Das Add-on Skript rief <code>worker.postMessage()</code> auf, um zu senden und  <code>worker.on()</code> um zu empfangen</li>
+</ul>
+
+<p>Die API ist immer noch verfügbar und <a href="/de/Add-ons/SDK/Guides/Content_Scripts/using_postMessage">dokumentiert</a>, aber es gibt keinen Grund sie statt der port API zu verwenden, die hier beschrieben wird. Die Ausnahme bildet das<a href="/de/Add-ons/SDK/High-Level_APIs/context-menu"> context-menu</a> Modul, welches immer noch postMessage verwendet.</p>
+
+<h3 id="Content_Skript_zu_Content_Skript">Content Skript zu Content Skript</h3>
+
+<p>Content Skripts können nur direkt miteinander kommunizieren, wenn diese im gleichen Kontext geladen wurden. Beispiel: Wenn ein einziger Aufruf von  <code>Tab.attach()</code>  zwei Content Skripts anhängt, können diese sich gegenseitig sehen. Wenn aber <code>Tab.attach() </code>zweimal aufgerufen wird, und die Content Skripts einzeln anhängt,können die Content Skripte nicht miteinander kommunizieren. Dann müssen die Nachrichten über die  port API über den Add-on code gesendet werden.</p>
+
+<h2 id="Cross-domain_Content_Skripts">Cross-domain Content Skripts</h2>
+
+<p>Grundsätzlich hat ein Content Skript keine cross-domain Privilegien. Sie können also keinen Inhalt eines iframes auslesen, wenn dieser Inhalt von einer anderen Domain stammt, oder XMLHttpRequests an eine andere Domain schicken.</p>
+
+<p>Um dieses Feature für spezielle Domains hinzuzufügen fügen Sie dem <a href="/de/Add-ons/SDK/Tools/package_json">package.json </a>ihres Add-ons den Schlüssel <code>"cross-domain-content" </code>unter dem <code>"permissions"</code> Schlüssel hinzu. Siehe dafür den Artikel  <a href="/de/Add-ons/SDK/Guides/Content_Scripts/Cross_Domain_Content_Scripts">cross-domain content scripts</a>.</p>
+</article>
diff --git a/files/de/mozilla/add-ons/sdk/guides/index.html b/files/de/mozilla/add-ons/sdk/guides/index.html
new file mode 100644
index 0000000000..fbb8311866
--- /dev/null
+++ b/files/de/mozilla/add-ons/sdk/guides/index.html
@@ -0,0 +1,154 @@
+---
+title: Leitfäden
+slug: Mozilla/Add-ons/SDK/Guides
+translation_of: Archive/Add-ons/Add-on_SDK/Guides
+---
+<p>Auf dieser Seite sind theoretische und detailliertere Artikel über das SDK auffindbar.</p>
+<hr>
+<h3 id="Für_Mitwirkende"><a name="contributors-guide">Für Mitwirkende</a></h3>
+<div class="column-container">
+ <div class="column-half">
+  <dl>
+   <dt>
+    <a href="Guides/Getting_Started">Erste Schritte</a></dt>
+   <dd>
+    Erfahre, wie du zu dem SDK beitragen kannst: den Quellcode erhalten, Bugs melden und beheben, Patches einreichen, Überprüfungen und Hilfe erhalten.</dd>
+   <dt>
+    <a href="Guides/Modules">Module</a></dt>
+   <dd>
+    Erfahre mehr über das vom SDK verwendete Modulsystem (basierend auf der CommonJS-Spezifikation), wie Sandboxes und Compartments zum Erhöhen der Sicherheit verwendet werden können, und über den im SDK enthaltenen Modul-Loader Cuddlefish.</dd>
+   <dt>
+    <a href="Guides/Classes_and_Inheritance">Klassen und Vererbung</a></dt>
+   <dd>
+    Erfahre, wie Klassen und Vererbungen in JavaScript implementiert werden können, unter Verwendung von Konstruktoren und Prototypen, und über die Helper-Funktion des SDKs zum Vereinfachen dieser Prozesse.</dd>
+  </dl>
+ </div>
+ <div class="column-half">
+  <dl>
+   <dt>
+    <a href="Guides/Private_Properties">Private Eigenschaften</a></dt>
+   <dd>
+    Erfahre, wie private Eigenschaften in JavaScript unter Verwendung von Prefixes, Closures und WeakMaps implementiert werden können und wie das SDK private Eigenschaften durch das Verwenden von Namespaces (eine Verallgemeinerung von WeakMaps) unterstützt.</dd>
+   <dt>
+    <a href="Guides/Content_Processes">Prozesse</a></dt>
+   <dd>
+    Das SDK wurde dafür entwickelt, in einer Umgebung zu arbeiten, in welcher Code zum Manipulieren von Web-Inhalten in unterschiedlichen Prozessen wie der Haupt-Code des Add-ons ausgeführt wird. Dieser Artikel erklärt die wichtigsten Vorteile dieses Konzepts.</dd>
+  </dl>
+ </div>
+</div>
+<hr>
+<h3 id="SDK-Infrastruktur"><a name="sdk-infrastructure">SDK-Infrastruktur</a></h3>
+<div class="column-container">
+ <div class="column-half">
+  <dl>
+   <dt>
+    <a href="Guides/Module_structure_of_the_SDK">Modulstruktur des SDKs</a></dt>
+   <dd>
+    Das SDK selbst sowie die dafür konzipierten Add-ons bestehen aus wiederverwendbaren JavaScript-Modulen. Dieser Artikel erklärt, worum es sich bei diesen Modulen handelt, wie sie geladen werden können und wie die Modul-Baumstruktur des SDKs aufgebaut ist.</dd>
+   <dt>
+    <a href="Guides/SDK_API_Lifecycle">SDK-API-Lebenszyklus</a></dt>
+   <dd>
+     Einführung in den Lebenszyklus der SDK-APIs, beinhaltet Stabilitätsbewertungen für APIs.</dd>
+  </dl>
+ </div>
+ <div class="column-half">
+  <dl>
+   <dt>
+    <a href="Guides/Program_ID">Programm-ID</a></dt>
+   <dd>
+    Die Programm-ID ist ein eindeutiger Bezeichner für ein Add-on. Dieser Leitfaden zeigt, wie sie erstellt wird, und wozu sie dient.</dd>
+   <dt>
+    <a href="Guides/Firefox_Compatibility">Firefox-Kompatibilität</a></dt>
+   <dd>
+    Lerne, mit welchen Firefox-versionen eine SDK-Version kompatibel ist und wie Kompatibilitätsprobleme behandelt werden können.</dd>
+  </dl>
+ </div>
+</div>
+<hr>
+<h3 id="SDK-Spracheigenschaften"><a name="sdk-idioms">SDK-Spracheigenschaften</a></h3>
+<div class="column-container">
+ <div class="column-half">
+  <dl>
+   <dt>
+    <a href="Guides/Working_with_Events">Arbeiten mit Events</a></dt>
+   <dd>
+    Erstelle Event-basierten Code mit Hilfe des SDK-Eventausgabe-Frameworks.</dd>
+  </dl>
+ </div>
+ <div class="column-half">
+  <dl>
+   <dt>
+    <a href="Guides/Two_Types_of_Scripts">Zwei Arten von Scripts</a></dt>
+   <dd>
+    Dieser Artikel erklärt die Unterschiede zwischen den vom Haupt-Code des Add-ons verwendbaren APIs und von denen, die von einem Content-Script verwendet werden können.</dd>
+  </dl>
+ </div>
+</div>
+<hr>
+<h3 id="Content-Scripts"><a name="content-scripts">Content-Scripts</a></h3>
+<div class="column-container">
+ <div class="column-half">
+  <dl>
+   <dt>
+    <a href="Guides/Content_Scripts">Einführung in Content-Scripts</a></dt>
+   <dd>
+    Eine Übersicht über Content-Scripts.</dd>
+   <dt>
+    <a href="Guides/Loading_content_scripts">Laden von Content-Scripts</a></dt>
+   <dd>
+    Laden von Content-Scripts in Webseiten, Einbindung entweder von Strings oder von eigenen Dateien und Festlegen des Ausführungszeitpunktes.</dd>
+   <dt>
+    <a href="Guides/Accessing_the_DOM">Auf das DOM zugreifen</a></dt>
+   <dd>
+    Informationen über den Zugriff von Content-Scripts auf das DOM (Document Object Model).</dd>
+   <dt>
+    <a href="Guides/Communicating_with_other_scripts">Kommunikation mit anderen Scripts</a></dt>
+   <dd>
+    Erfahre, wie ein Content-Script mit der <em>main.js</em>-Datei, mit anderen Content-Scripts und von der Webseite selbst geladenen Scripts kommunizieren kann.</dd>
+  </dl>
+ </div>
+ <div class="column-half">
+  <dl>
+   <dt>
+    <a href="Guides/using_port">Verwendung von "port"</a></dt>
+   <dd>
+    Kommunikation zwischen einem Content-Script und den anderen Bestandteilen des Add-ons über das <code>port</code>-Objekt.</dd>
+   <dt>
+    <a href="Guides/using_postMessage">Verwendung von "postMessage()"</a></dt>
+   <dd>
+    Kommunikation zwischen einem Content-Script und den anderen Bestandteilen des Add-ons über die <code>postMessage()</code>-API und ein Vergleich dieser Technik mit dem <code>port</code>-Objekt.</dd>
+   <dt>
+    <a href="Guides/Cross_domain_content_scripts">Domainübergreifende Content-Scripts</a></dt>
+   <dd>
+    Lerne, wie man Content-Scripts dazu befähigt, mit Inhalten von anderen Domains zu interagieren.</dd>
+   <dt>
+    <a href="Guides/Reddit_example">Reddit-Beispiel</a></dt>
+   <dd>
+    Ein einfaches Add-on mit Content-Scripts.</dd>
+  </dl>
+ </div>
+</div>
+<hr>
+<h3 id="XUL-Portierung"><a name="xul-migration">XUL-Portierung</a></h3>
+<div class="column-container">
+ <div class="column-half">
+  <dl>
+   <dt>
+    <a href="Guides/XUL_Migration_Guide">XUL Portierungsleitfaden</a></dt>
+   <dd>
+    Techniken zum Portieren eines XUL Add-ons auf das SDK.</dd>
+   <dt>
+    <a href="Guides/XUL_vs_SDK">XUL versus SDK</a></dt>
+   <dd>
+    Ein Vergleich der Stärken und Schwächen des SDK's mit denen der traditionellen XUL-basierten Add-ons.</dd>
+  </dl>
+ </div>
+ <div class="column-half">
+  <dl>
+   <dt>
+    <a href="Guides/Porting_the_Library_Detector">Portierungs-Beispiel</a></dt>
+   <dd>
+    Ein Walkthrough durch das Portieren eines relativ einfachen XUL-basierten Add-ons auf das SDK.</dd>
+  </dl>
+ </div>
+</div>
diff --git a/files/de/mozilla/add-ons/sdk/index.html b/files/de/mozilla/add-ons/sdk/index.html
new file mode 100644
index 0000000000..4a73b5fbeb
--- /dev/null
+++ b/files/de/mozilla/add-ons/sdk/index.html
@@ -0,0 +1,83 @@
+---
+title: Add-on SDK
+slug: Mozilla/Add-ons/SDK
+translation_of: Archive/Add-ons/Add-on_SDK
+---
+<p>Das Add-on SDK ermöglicht es, Add-ons für Firefox unter Verwendung der Standard-Webtechnologien zu entwickeln: JavaScript, HTML und CSS. Das SDK beinhaltet JavaScript APIs zum Erstellen, Ausführen, Testen und Packen von Add-ons.</p>
+
+<hr>
+<h3 id="Tutorials">Tutorials</h3>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/de/docs/Mozilla/Add-ons/SDK/Tutorials#getting-started">Erste Schritte</a></dt>
+ <dd>Anleitungen zum <a href="/en-US/Add-ons/SDK/Tutorials/Installation">Installieren des SDKs</a> sowie zur Verwendung des <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">cfx-Tools</a> zum Entwickeln, Testen und Packen von Add-ons.</dd>
+ <dt> </dt>
+ <dt><a href="/de/docs/Mozilla/Add-ons/SDK/Tutorials#interact-with-the-browser">Interagieren mit dem Browser</a></dt>
+ <dd><a href="/en-US/Add-ons/SDK/Tutorials/Open_a_Web_Page">Webseiten öffnen, auf das Laden von Webseiten reagieren und geöffnete Webseiten auflisten. </a></dd>
+ <dd>Das <a href="/en-US/Add-ons/SDK/Tutorials/Listen_For_Page_Load">Laden von Webseiten reagieren</a> und <a href="/en-US/Add-ons/SDK/Tutorials/List_Open_Tabs">geöffnete Webseiten auflisten</a>.</dd>
+ <dt><a href="/de/docs/Mozilla/Add-ons/SDK/Tutorials#development-techniques">Entwicklungstechnologien</a></dt>
+ <dd>Lerne Entwicklungstechnologien wie das <a href="/en-US/Add-ons/SDK/Tutorials/Unit_testing">Testen der Add-on-Elemente</a>, <a href="/en-US/Add-ons/SDK/Tutorials/Logging">Loggen</a>, <a href="/en-US/Add-ons/SDK/Tutorials/Creating_Reusable_Modules">Erstellen von wiederverwendbaren Modulen</a>, die <a href="/en-US/Add-ons/SDK/Tutorials/l10n">Lokalisierung</a> und das<a href="/en-US/Add-ons/SDK/Tutorials/Mobile_development"> Entwickeln für mobile Endgeräte</a> kennen.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/de/docs/Mozilla/Add-ons/SDK/Tutorials#create-user-interfaces">Benutzeroberflächen</a></dt>
+ <dd>Erstelle Benutzeroberflächenkomponenten wie <a href="/en-US/Add-ons/SDK/Tutorials/Adding_a_Button_to_the_Toolbar">Toolbar-Buttons</a>, <a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Context_Menu_Item">Kontextmenüs</a>, <a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox">Menüeinträge</a> oder <a href="/en-US/Add-ons/SDK/Tutorials/Display_a_Popup">Dialoge</a>.</dd>
+ <dt><a href="/de/docs/Mozilla/Add-ons/SDK/Tutorials#modify-web-pages">Inhalte von Webseiten bearbeiten</a></dt>
+ <dd>Inhalte von Seiten <a href="/en-US/Add-ons/SDK/Tutorials/Modifying_Web_Pages_Based_on_URL">über ein spezifisches URL-Muster</a> oder dynamisch <a href="/en-US/Add-ons/SDK/Tutorials/Modifying_the_Page_Hosted_by_a_Tab">einen bestimmten Tab bearbeiten</a>.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Annotator">Zusammenfassung</a></dt>
+ <dd>Walk-through durch das Beispiel-Add-on "Annotator".</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h3 id="Leitfäden">Leitfäden</h3>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Add-ons/SDK/Guides#contributors-guide">Zum SDK beitragen</a></dt>
+ <dd><a href="/en-US/Add-ons/SDK/Guides/Getting_Started">Trage zum SDK bei</a> und lerne die wichtigsten im SDK-Quelltext verwendeten Objekte wie <a href="/en-US/Add-ons/SDK/Guides/Modules">Module</a>, <a href="/en-US/Add-ons/SDK/Guides/Classes_and_Inheritance">Klassen und Vererbung</a>, <a href="/en-US/Add-ons/SDK/Guides/Private_Properties">private Eigenschaften</a> und <a href="/en-US/Add-ons/SDK/Guides/Content_Processes">Inhaltsabläufe</a> kennen.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Guides#sdk-infrastructure">SDK-Aufbau</a></dt>
+ <dd>Verstehe die Technologien, die dem SDK zugrunde liegen: <a href="/en-US/Add-ons/SDK/Guides/Module_structure_of_the_SDK">Modulstruktur</a>, <a href="/en-US/Add-ons/SDK/Guides/Program_ID">Programm-ID</a> und die Regeln, die die <a href="/en-US/Add-ons/SDK/Guides/Firefox_Compatibility">Firefox-Kompatibilität</a> definieren.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Guides/Content_Scripts">Content-Scripts</a></dt>
+ <dd>Eine detaillierte Anleitung zum <a href="/en-US/Add-ons/SDK/Guides/Content_Scripts">Arbeiten mit Content-Scripts</a>. Erklärt wird das <a href="/en-US/Add-ons/SDK/Guides/Loading_content_scripts">Laden von Content-Scripts</a>,<a href="/en-US/Add-ons/SDK/Guides/Accessing_the_DOM"> auf welche Objekte ein Content-Script zugreifen kann</a> und <a href="/en-US/Add-ons/SDK/Guides/Communicating_with_other_scripts">wie man zwischen einem Content-Script und dem Rest des Add-ons kommunizieren kann</a>.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Add-ons/SDK/Guides#sdk-idioms">SDK-Spracheigenschaften</a></dt>
+ <dd>Das  <a href="/en-US/Add-ons/SDK/Guides/Working_with_Events">SDK-Event-Framework</a> und die <a href="/en-US/Add-ons/SDK/Guides/Two_Types_of_Scripts">Unterscheidung zwischen Add-on-Scripts und Content-Scripts</a>.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Guides/XUL_Migration_Guide">XUL-Migration</a></dt>
+ <dd>Anleitung zum <a href="/en-US/Add-ons/SDK/Guides/XUL_Migration_Guide">Portieren von XUL-Add-ons auf das SDK</a>. Diese Anleitung beinhaltet einen <a href="/en-US/Add-ons/SDK/Guides/XUL_vs_SDK">Vergleich der beiden Umgebungen</a> und ein <a href="/en-US/Add-ons/SDK/Guides/Porting_the_Library_Detector">Beispiel des Portierens eines XUL-Add-ons</a>.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h3 id="Referenzen">Referenzen</h3>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Add-ons/SDK/High-Level_APIs">High-Level-APIs</a></dt>
+ <dd>Dokumentation der High-Level-SDK-APIs.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Tools">Tools-Referenz</a></dt>
+ <dd>Dokumentation des <a href="/en-US/Add-ons/SDK/Tools/cfx">cfx-Tools</a> zum Entwickeln, Testen und Packen von Add-ons, der <a href="/en-US/Add-ons/SDK/Tools/console">Konsole</a>, die global zum Loggen verwendet wird und der <a href="/en-US/Add-ons/SDK/Tools/package_json">package.json-Datei</a>.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Add-ons/SDK/Low-Level_APIs">Low-Level-APIs</a></dt>
+ <dd>Dokumentation der Low-Level-SDK-APIs.</dd>
+</dl>
+</div>
+</div>
+
+<p> </p>
diff --git a/files/de/mozilla/add-ons/sdk/tools/index.html b/files/de/mozilla/add-ons/sdk/tools/index.html
new file mode 100644
index 0000000000..8c67b4644e
--- /dev/null
+++ b/files/de/mozilla/add-ons/sdk/tools/index.html
@@ -0,0 +1,14 @@
+---
+title: Tools
+slug: Mozilla/Add-ons/SDK/Tools
+tags:
+  - Add-on SDK
+  - CFX
+  - JPM
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/Add-ons/Add-on_SDK/Tools
+---
+<p>Articles listed here provide a reference for the SDK's tools:</p>
+
+<p>{{ LandingPageListSubpages ("/en-US/Add-ons/SDK/Tools", 7) }}</p>
diff --git a/files/de/mozilla/add-ons/sdk/tools/jpm/index.html b/files/de/mozilla/add-ons/sdk/tools/jpm/index.html
new file mode 100644
index 0000000000..86e6a82aa3
--- /dev/null
+++ b/files/de/mozilla/add-ons/sdk/tools/jpm/index.html
@@ -0,0 +1,497 @@
+---
+title: jpm
+slug: Mozilla/Add-ons/SDK/Tools/jpm
+translation_of: Archive/Add-ons/Add-on_SDK/Tools/jpm
+---
+<div class="note">
+<p>Sie können <code>jpm</code> ab Firefox 38 verwenden.</p>
+
+<p>Dieser Artikel bezieht sich auf <code>jpm</code>.</p>
+</div>
+
+<p><span class="seoSummary">Der Node-basierte Ersatz für <code><a href="/de/Add-ons/SDK/Tools/cfx">cfx</a></code>, erlaubt das Testen, Starten und Paketieren von Add-Ons.</span></p>
+
+<p>Schauen Sie sich das <a href="/de/Add-ons/SDK/Tutorials/Getting_Started_%28jpm%29"><code>jpm</code>-Tutorial</a> als Einführung an.</p>
+
+<p><code>jpm</code> wird folgendermaßen verwendet:</p>
+
+<pre class="brush: bash">jpm [command] [options]
+</pre>
+
+<p><code>jpm</code> unterstützt die folgenden globalen Optionen:</p>
+
+<pre class="brush: bash">-h, --help        - Zeigt eine Hilfsnachricht
+-V, --version     - Anzeigen der JPM Versionsnummer
+</pre>
+
+<h2 id="Installation">Installation</h2>
+
+<p><code>jpm</code> wird über den Node Package Manager (<code><a class="external external-icon" href="https://www.npmjs.org/package/jpm">npm</a></code>) installiert. <code>npm</code> ist im Installer von Node.js enthalten, welchen Sie auf <a class="external external-icon" href="http://nodejs.org/">nodejs.org</a> finden.</p>
+
+<p>Nachdem Sie <code>npm</code> installiert haben, können Sie <code>jpm</code> wie jedes andere <code>npm</code>-Paket installieren:</p>
+
+<pre class="brush: bash">npm install jpm -g</pre>
+
+<p>Abhängig von ihren Einstellungen müssen Sie den Befehl möglicherweise mit Adminrechten ausführen:</p>
+
+<pre class="brush: bash">sudo npm install jpm -g</pre>
+
+<p>Tippen Sie folgendes in die Eingabeaufforderung:</p>
+
+<pre class="brush: bash">jpm</pre>
+
+<p>Es sollte sich eine Zusammenfassung der <code>jpm</code>-Kommandos öffnen. Im Gegensatz zu <code>cfx</code> ist <code>jpm</code> in jeder Eingabeaufforderung verwendbar, solange Sie es mit der Option <code>-g</code> installiert haben.</p>
+
+<h3 id="Probleme">Probleme?</h3>
+
+<p>Falls Sie die Zusammenfassung nicht verstehen, fragen Sie nach Hilfe. SDK-Nutzer und Teammitglieder des Projekts diskutieren über Probleme und Vorschläge in der  <a class="external external-icon" href="http://groups.google.com/group/mozilla-labs-jetpack/topics">Projekt- Mailingliste</a>. Andere könnten das selbe Problem wie Sie gehabt haben, also suchen Sie bitte zuerst im Listenarchiv. Sie können mit anderen SDK-Nutzern im Kanal <a class="external external-icon" href="http://mibbit.com/?channel=%23jetpack&amp;server=irc.mozilla.org">#jetpack</a> in <a class="external external-icon" href="http://irc.mozilla.org/">Mozillas IRC-Netzwerk</a> chatten.</p>
+
+<h2 id="Command_reference">Command reference</h2>
+
+<p>There are six jpm commands:</p>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <td style="width: 20%;"><a href="/en-US/Add-ons/SDK/Tools/jpm#jpm_init"><code>jpm init</code></a></td>
+   <td>Create a skeleton add-on as a starting point for your own add-on.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/Add-ons/SDK/Tools/jpm#jpm_run"><code>jpm run</code></a></td>
+   <td>Launch an instance of Firefox with your add-on installed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/Add-ons/SDK/Tools/jpm#jpm_test"><code>jpm test</code></a></td>
+   <td>Runs your add-on's unit tests.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/Add-ons/SDK/Tools/jpm#jpm_xpi"><code>jpm xpi</code></a></td>
+   <td>Package your add-on as an <a href="https://developer.mozilla.org/en/XPI">XPI</a> file, which is the install file format for Firefox add-ons.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/Add-ons/SDK/Tools/jpm#jpm_post"><code>jpm post</code></a></td>
+   <td>Package your add-on as an <a href="https://developer.mozilla.org/en/XPI">XPI</a> file, then post it to some url.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/Add-ons/SDK/Tools/jpm#jpm_watchpost"><code>jpm watchpost</code></a></td>
+   <td>Package your add-on as an <a href="https://developer.mozilla.org/en/XPI">XPI</a> file whenever there is a file changed, and post that to some url.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="jpm_init">jpm init</h3>
+
+<p>This command initializes a new add-on from scratch.</p>
+
+<p>Create a new directory, change into it, and run <code>jpm init</code>.</p>
+
+<pre class="brush: bash">mkdir my-addon
+cd my-addon
+jpm init</pre>
+
+<p>You'll then be asked to supply some information about your add-on: this will be used to create your add-on's <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/package_json">package.json</a> file.</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/package_json#title">title</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/package_json#name">name</a>: this defaults to the name of the directory in which you are running <code>jpm init</code>. Unless an <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/package_json#id"><code>id</code></a> field is present in package.json, jpm will prepend "@" to <code>name</code> and use the result as the <a href="https://developer.mozilla.org/en-US/Add-ons/Install_Manifests#id"><code>id</code> field in the add-on's install manifest</a>.</li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/package_json#version">version</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/package_json#description">description</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/package_json#main">entry point</a> (which maps to "main" in package.json)</li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/package_json#author">author</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/package_json#engines">engines</a> (supported applications)</li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/package_json#license">license</a></li>
+</ul>
+
+<p>Most of these fields have a default, which is shown in brackets after the question. If you just press Enter, your add-on will get the default value.</p>
+
+<p>Once you've supplied a value or accepted the default for these properties, you'll be shown the complete contents of "package.json" and asked to accept it.</p>
+
+<p>Then jpm will create an skeleton add-on, as a starting point for your own add-on development, with the following file structure:</p>
+
+<ul class="directory-tree">
+ <li>my-addon
+  <ul>
+   <li>index.js</li>
+   <li>package.json</li>
+   <li>test
+    <ul>
+     <li>test-index.js</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="jpm_run">jpm run</h3>
+
+<p>This command runs a new instance of Firefox with the add-on installed:</p>
+
+<pre class="brush: bash">jpm run</pre>
+
+<p><code>jpm run</code> accepts the following options:</p>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%;"><code>-b --binary BINARY</code></td>
+   <td>
+    <p>Use the version of Firefox specified in BINARY. BINARY may be specified as a full path or as a path relative to the current directory.</p>
+
+    <pre class="brush: bash">
+jpm run -b /path/to/Firefox/Nightly</pre>
+    See <a href="/en-US/Add-ons/SDK/Tools/jpm#Selecting_a_browser_version">Selecting a browser version</a>.</td>
+  </tr>
+  <tr>
+   <td><code>--binary-args CMDARGS</code></td>
+   <td>
+    <p>Pass <a href="/en-US/docs/Mozilla/Command_Line_Options">extra arguments</a> to Firefox.</p>
+
+    <p>For example, to pass the <code>-jsconsole</code> argument to Firefox, which will launch the <a href="/en-US/docs/Tools/Browser_Console">Browser Console</a>, try the following:</p>
+
+    <pre class="brush: bash">
+jpm run --binary-args -jsconsole</pre>
+
+    <p>To pass multiple arguments, or arguments containing spaces, quote them:</p>
+
+    <pre class="brush: bash">
+jpm run --binary-args '-url mzl.la -jsconsole'</pre>
+   </td>
+  </tr>
+  <tr>
+   <td><code>--debug</code></td>
+   <td>Run the <a href="/en-US/Add-ons/Add-on_Debugger">add-on debugger</a> attached to the add-on.</td>
+  </tr>
+  <tr>
+   <td><code>-o --overload PATH</code></td>
+   <td>
+    <p>Rather than use the SDK modules built into Firefox, use the modules found at PATH. If <code>-o</code> is specified and PATH is omitted, jpm will look for the JETPACK_ROOT environment variable and use its value as the path.</p>
+
+    <p>See <a href="/en-US/Add-ons/SDK/Tools/jpm#Overloading_the_built-in_modules">Overloading the built-in modules</a> for more information.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>-p --profile=<code> PROFILE</code></code></td>
+   <td>
+    <p>By default, jpm uses a clean temporary Firefox <a href="http://support.mozilla.com/en-US/kb/profiles">profile</a> each time you call jpm run. Use the <code>--profile</code> option to instruct jpm to launch Firefox with an existing profile.</p>
+
+    <p>The PROFILE value may be a profile name or the path to the profile.</p>
+
+    <p>See <a href="/en-US/Add-ons/SDK/Tools/jpm#Using_profiles">Using profiles</a> for more information.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>-v --verbose</code></td>
+   <td>Verbose operation.</td>
+  </tr>
+  <tr>
+   <td><code>--no-copy</code></td>
+   <td>
+    <div class="warning">Use with caution because <code>jpm run|test</code> changes many preferences, never use with your main profile.</div>
+
+    <div class="note">This only applies when <code>--profile</code> is used.</div>
+    Disables the copying of the profile used, which allows one to reuse a profile.</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="jpm_test">jpm test</h3>
+
+<p>Use this command to run an add-on's unit tests. It will:</p>
+
+<ul>
+ <li>look for a directory called "test" under the add-on's root</li>
+ <li>open every file in there whose name starts with "test-" (note the hyphen after "test" in the filename. <code>jpm test</code> will include a file called "test-myCode.js", but will exclude files called "test_myCode.js" or "testMyCode.js")</li>
+ <li>call every function exported from that file whose name starts with "test"</li>
+</ul>
+
+<pre class="brush: bash">jpm test
+</pre>
+
+<p>See the <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Unit_testing">tutorial on unit testing</a> and the <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/test_assert">reference documentation for the <code>assert</code> module</a> for more details on this.</p>
+
+<p><code>jpm test</code> accepts the following options:</p>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <td><code>-b --binary BINARY</code></td>
+   <td>
+    <p>Use the version of Firefox specified in BINARY. BINARY may be specified as a full path or as a path relative to the current directory.</p>
+
+    <pre class="brush: bash">
+jpm test -b /path/to/Firefox/Nightly</pre>
+
+    <p>See <a href="/en-US/Add-ons/SDK/Tools/jpm#Selecting_a_browser_version">Selecting a browser version</a>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>--binary-args CMDARGS</code></td>
+   <td>
+    <p>Pass <a href="http://kb.mozillazine.org/Command_line_arguments">extra arguments</a> to Firefox.</p>
+
+    <p>For example, to pass the <code>-jsconsole</code> argument to Firefox, which will launch the <a href="/en-US/docs/Tools/Browser_Console">Browser Console</a>, try the following:</p>
+
+    <pre class="brush: bash">
+jpm test --binary-args -jsconsole</pre>
+
+    <p>To pass multiple arguments, or arguments containing spaces, quote them:</p>
+
+    <pre class="brush: bash">
+jpm test --binary-args '-url mzl.la -jsconsole'</pre>
+   </td>
+  </tr>
+  <tr>
+   <td><code>--debug</code></td>
+   <td>Run the <a href="/en-US/Add-ons/Add-on_Debugger">add-on debugger</a> attached to the add-on.</td>
+  </tr>
+  <tr>
+   <td style="width: 30%;"><code>-f --filter FILE[:TEST]</code></td>
+   <td>
+    <p>Only run tests whose filenames match FILE and optionally match TEST, both regexps.</p>
+
+    <pre class="brush: bash">
+jpm test --filter base64:btoa</pre>
+
+    <p>The above command only runs tests in files whose names contain "base64", and in those files only runs tests whose names contain "btoa".</p>
+   </td>
+  </tr>
+  <tr>
+   <td style="width: 30%;"><code>-o --overload PATH</code></td>
+   <td>
+    <p>Rather than use the SDK modules built into Firefox, use the modules found at PATH. If <code>-o</code> is specified and PATH is omitted, jpm will look for the JETPACK_ROOT environment variable and use its value as the path.</p>
+
+    <p>See <a href="/en-US/Add-ons/SDK/Tools/jpm#Overloading_the_built-in_modules">Overloading the built-in modules</a> for more information.</p>
+   </td>
+  </tr>
+  <tr>
+   <td style="width: 30%;"><code>-p --profile<code> PROFILE</code></code></td>
+   <td>
+    <p>By default, jpm uses a clean temporary Firefox <a href="http://support.mozilla.com/en-US/kb/profiles">profile</a> each time you call jpm run. Use the <code>--profile</code> option to instruct jpm to launch Firefox with an existing profile.</p>
+
+    <p>The PROFILE value may be a profile name or the path to the profile.</p>
+
+    <p>See <a href="/en-US/Add-ons/SDK/Tools/jpm#Using_profiles">Using profiles</a> for more information.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>--stop-on-error</code></td>
+   <td>
+    <p>By default jpm test keeps running tests even after tests fail. Specify <code>--stop-on-error</code> to stop running tests after the first failure:</p>
+
+    <pre class="brush: bash">
+jpm test --stop-on-error</pre>
+   </td>
+  </tr>
+  <tr>
+   <td><code>--tbpl</code></td>
+   <td>Print test output in <a href="https://treeherder.mozilla.org/">Treeherder</a> format</td>
+  </tr>
+  <tr>
+   <td><code>--times NUMBER</code></td>
+   <td>
+    <p>Run tests NUMBER of times:</p>
+
+    <pre class="brush: bash">
+jpm test --times 2</pre>
+   </td>
+  </tr>
+  <tr>
+   <td><code>-v --verbose</code></td>
+   <td>Verbose operation.</td>
+  </tr>
+  <tr>
+   <td><code>--no-copy</code></td>
+   <td>
+    <div class="warning">Use with caution because <code>jpm run|test</code> changes many preferences, never use with your main profile.</div>
+
+    <div class="note">This only applies when <code>--profile</code> is used.</div>
+    Disables the copying of the profile used, which allows one to reuse a profile.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="jpm_xpi">jpm xpi</h3>
+
+<p>This command packages the add-on as an <a href="https://developer.mozilla.org/en/XPI">XPI</a> file, which is the install file format for Mozilla add-ons.</p>
+
+<pre class="brush: bash">jpm xpi</pre>
+
+<p>It looks for a file called <code>package.json</code> in the current directory and creates the corresponding XPI file. It ignores any ZIPs or XPIs in the add-on's root, and any test files.</p>
+
+<p>Once you have built an XPI file you can distribute your add-on by submitting it to <a href="http://addons.mozilla.org">addons.mozilla.org</a>.</p>
+
+<p><code>jpm xpi</code> accepts the following option:</p>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <td><code>-v --verbose</code></td>
+   <td>
+    <p>Verbose operation:</p>
+
+    <pre class="brush: bash">
+jpm xpi -v</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="jpm_post">jpm post</h3>
+
+<p>This command packages the add-on as an <a href="https://developer.mozilla.org/en/XPI">XPI</a> file, the posts it to some url.</p>
+
+<pre class="brush: bash">jpm post</pre>
+
+<p>It looks for a file called <code>package.json</code> in the current directory and creates a XPI file with which to post to the <code>--post-url</code>.</p>
+
+<p><code>jpm post</code> accepts the following options:</p>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <td><code>--post-url URL</code></td>
+   <td>
+    <p>The url to post the extension to after creating a XPI.</p>
+
+    <pre class="brush: bash">
+jpm post --post-url http://localhost:8888/</pre>
+
+    <p>See <a href="https://www.npmjs.com/package/jpm#using-post-and-watchpost">Using Post and Watchpost</a> for more information.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>-v --verbose</code></td>
+   <td>
+    <p>Verbose operation:</p>
+
+    <pre class="brush: bash">
+jpm post --post-url http://localhost:8888/ -v</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="jpm_watchpost">jpm watchpost</h3>
+
+<p>This command packages the add-on as an <a href="https://developer.mozilla.org/en/XPI">XPI</a> file, the posts it to some url whenever a file in the current working directory changes.</p>
+
+<pre class="brush: bash">jpm watchpost</pre>
+
+<p>Creates a XPI whenever a file in the current working directory changes and posts that to the <code>--post-url</code>.</p>
+
+<p><code>jpm watchpost</code> accepts the following options:</p>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <td><code>--post-url URL</code></td>
+   <td>
+    <p>The url to post the extension to after creating a XPI.</p>
+
+    <pre class="brush: bash">
+jpm watchpost --post-url http://localhost:8888/</pre>
+
+    <p>See <a href="https://www.npmjs.com/package/jpm#using-post-and-watchpost">Using Post and Watchpost</a> for more information.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>-v --verbose</code></td>
+   <td>
+    <p>Verbose operation:</p>
+
+    <pre class="brush: bash">
+jpm watchpost --post-url http://localhost:8888/ -v</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Techniques">Techniques</h2>
+
+<h3 id="Selecting_a_browser_version">Selecting a browser version</h3>
+
+<p>By default, <code>jpm run</code> and <code>jpm test</code> will run the release version of Firefox. You can instruct jpm to use a different version in one of two ways:</p>
+
+<ul>
+ <li>
+  <p>you can use the <code>-b</code> or <code>--binary</code> option to instruct jpm to run a different version of Firefox. You can supply a path to a specific binary:</p>
+
+  <pre class="brush: bash">jpm run -b /path/to/Firefox/Nightly</pre>
+
+  <p>As a shorthand for this, you can pass "nightly", "aurora", "beta", or "firefox" and jpm will look in the default location for these Firefox versions:</p>
+
+  <pre class="brush: bash">jpm run -b nightly</pre>
+ </li>
+ <li>
+  <p>you can set the <code>JPM_FIREFOX_BINARY</code> environment variable with the path to the version of Firefox you want to run. When you invoke <code>jpm run</code> or <code>jpm test</code> without the <code>-b</code> option, jpm will first check  <code>JPM_FIREFOX_BINARY</code>, and use this as the path if it is set.</p>
+ </li>
+</ul>
+
+<h3 id="Using_.jpmignore_to_ignore_files">Using <code>.jpmignore</code> to ignore files</h3>
+
+<p>Using <code>.jpmignore</code> is similar to using <code>.gitignore</code> with <code>git</code>, <code>.hgignore</code> with Mercurial, or <code>.npmignore</code> with <code>npm</code>. By using this file you can let <code>jpm</code> know which files you would like it to ignore when building a <code>.xpi</code> file with <code>jpm xpi</code>.</p>
+
+<p>Here is an example:</p>
+
+<pre class="brush: bash"># Ignore .DS_Store files created by mac
+.DS_Store
+
+# Ignore any zip or xpi files
+*.zip
+*.xpi
+</pre>
+
+<p>A <code>.jpmignore</code> file with the above contents would ignore all zip files and <code>.DS_Store</code> files from the xpi generated by <code>jpm xpi</code>.</p>
+
+<h3 id="Using_profiles_2"><a name="Using_profiles">Using profiles</a></h3>
+
+<p>By default, <code>jpm run</code> uses a new profile each time it is executed. This means that any profile-specific data entered from one run of <code>jpm</code> will not, by default, be available in the next run.</p>
+
+<p>This includes, for example, any extra add-ons you installed, or your history, or any data stored using the <a href="/en-US/Add-ons/SDK/High-Level_APIs/simple-storage">simple-storage</a> API.</p>
+
+<p>To make <code>jpm</code> use a specific profile, pass the <code>--profile</code> option, specifying the name of the profile you wish to use, or the path to the profile.</p>
+
+<pre class="brush: bash">jpm run --profile boogaloo
+</pre>
+
+<pre class="brush: bash">jpm run --profile path/to/boogaloo</pre>
+
+<p>If you supply <code>--profile</code> but its argument is not the name of or path to an existing profile, jpm will open the <a href="https://support.mozilla.org/en-US/kb/profile-manager-create-and-remove-firefox-profiles">profile manager</a>,  enabling you to select and existing profile or create a new one:</p>
+
+<pre class="brush: bash">jpm run --profile i-dont-exist</pre>
+
+<h3 id="Developing_without_browser_restarts">Developing without browser restarts</h3>
+
+<p>Because <code>jpm run</code> restarts the browser each time you invoke it, it can be a little cumbersome if you are making very frequent changes to an add-on. An alternative development model is to use the <a href="https://addons.mozilla.org/en-US/firefox/addon/autoinstaller/" rel="noreferrer">Extension Auto-Installer</a> add-on: this listens for new XPI files on a specified port and installs them automatically. That way you can test new changes without needing to restart the browser:</p>
+
+<ul>
+ <li>make a change to your add-on</li>
+ <li>run <code>jpm post --post-url http://localhost:8888/</code>, to make a xpi and post it.</li>
+</ul>
+
+<p>You could even automate this workflow with a simple script. For example:</p>
+
+<pre class="brush: bash">jpm watchpost --post-url http://localhost:8888/
+</pre>
+
+<p>Note that the logging level defined for the console is different when you use this method, compared to the logging level used when an add-on is run using <code>jpm run</code>. This means that if you want to see output from <a href="/en-US/Add-ons/SDK/Tutorials/Logging" rel="noreferrer"><code>console.log()</code></a> messages, you'll have to tweak a setting. See the documentation on <a href="/en-US/Add-ons/SDK/Tools/console#Logging_Levels" rel="noreferrer">logging levels</a> for the details on this.</p>
+
+<h3 id="Overloading_the_built-in_modules">Overloading the built-in modules</h3>
+
+<p>The SDK modules you use to implement your add-on are built into Firefox. When you run or package an add-on using <code>jpm run</code> or <code>jpm xpi</code>, the add-on will use the versions of the modules in the version of Firefox that hosts it.</p>
+
+<p>As an add-on developer, this is usually what you want. But if you're developing the SDK modules themselves, of course, it isn't. In this case you need to:</p>
+
+<ul>
+ <li>get a local copy of the SDK modules that you want: this usually means checking out the SDK from its <a href="https://github.com/mozilla/addon-sdk" rel="noreferrer">GitHub repo</a></li>
+ <li>set the <code>JETPACK_ROOT</code> environment variable to your local copy</li>
+ <li>pass the <code>-o</code> option to <code>jpm run</code> or <code>jpm xpi</code>:</li>
+</ul>
+
+<pre>jpm run -o
+</pre>
+
+<p>This instructs jpm to use the local copies of the SDK modules, not the ones in Firefox. If you don't want to set the <code>JETPACK_ROOT</code> environment variable, you can pass the location of your copy of the SDK modules along with <code>-o</code>:</p>
+
+<pre>jpm run -o "/path/to/SDK/"</pre>
diff --git a/files/de/mozilla/add-ons/sdk/tutorials/adding_a_button_to_the_toolbar/index.html b/files/de/mozilla/add-ons/sdk/tutorials/adding_a_button_to_the_toolbar/index.html
new file mode 100644
index 0000000000..c5f41a2baf
--- /dev/null
+++ b/files/de/mozilla/add-ons/sdk/tutorials/adding_a_button_to_the_toolbar/index.html
@@ -0,0 +1,100 @@
+---
+title: Einen Button zur Toolbar hinzufügen
+slug: Mozilla/Add-ons/SDK/Tutorials/Adding_a_Button_to_the_Toolbar
+translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Adding_a_Button_to_the_Toolbar
+---
+<div class="note">
+ Für dieses Tutorial wird die erfolgreiche <a href="/en-US/Add-ons/SDK/Tutorials/Installation">Installation des SDK</a> und erlernte <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">Vorkenntnisse von <code>cfx</code></a> vorrausgesetzt.</div>
+<div class="warning">
+ <p>Dieses Widget wird ab Firefox 29 nicht mehr verwendet/funktionieren. Um Buttons in Firefox 29 (+) hinzuzufügen, benutze bitte die <a href="/en-US/Add-ons/SDK/High-Level_APIs/ui">UI Module</a>, besonders die <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">Action-Buttons</a> oder <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_toggle">Toogle-Buttons</a> APIs.</p>
+</div>
+<p>Um einen Button zur Toolbar hinzuzufügen, verwende das <a href="/en-US/Add-ons/SDK/High-Level_APIs/widget"><code>widget</code></a>-Module.</p>
+<p>Erstelle ein neues Verzeichnis, navigiere mit der Eingabeaufforderung in dieses Verzeichnis, und gib <code>cfx init</code> ein. Dann öffne die Datei "main.js" im "lib"-Verzeichnis und gib folgenden Code ein:</p>
+<pre class="brush: js">var widgets = require("sdk/widget");
+var tabs = require("sdk/tabs");
+
+var widget = widgets.Widget({
+  id: "mozilla-link",
+  label: "Mozilla website",
+  contentURL: "http://www.mozilla.org/favicon.ico",
+  onClick: function() {
+    tabs.open("http://www.mozilla.org/");
+  }
+});</pre>
+<p>Das Widget wird wird zur AddOn-Leiste (unten am Fensterrand) hinzugefügt:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/6697/widget-mozilla.png" style="width: 464px; height: 184px; display: block; margin-left: auto; margin-right: auto;">Du kannst leider nicht die Standart-Position des Icons ändern, aber der User kann den Standort jederzeit verändern. Das <code>id</code>-Attribut ist zwingend erforderlich. Es speichert die Position des Icons und sollte nicht verändert weren, da sonst wieder der Standart wiederhergestellt wird.</p>
+<p>Beim Aktivieren wird dieser Link geöffnet: <a href="http://www.mozilla.org">http://www.mozilla.org</a>.</p>
+<div style="">
+  </div>
+<h2 id="Das_Icon_angeben_(URL)">Das Icon angeben (URL)</h2>
+<p>Wenn Du dieses Widget verwendest, kannst Du das Icon via <code>contentURL</code>: anzeigen. Das kann eine lokale, aber auch eine externe Datei sein. Allerdings lässt es sich nicht empfehlen Icons im Internet zu verwenden, da bei einem Serverausfall die Grafik nicht geladen werden kann. Das Beispiel verwendet eine Grafik namens "my-icon.png" aus dem AddOn-Verzeichnis (data):</p>
+<div>
+ <pre class="brush: js" id="highlighter_533558" style="width: auto;">var widgets = require("sdk/widget");
+var tabs = require("sdk/tabs");
+var self = require("sdk/self");
+
+var widget = widgets.Widget({
+  id: "mozilla-link",
+  label: "Mozilla website",
+  contentURL: self.data.url("my-icon.png"),
+  onClick: function() {
+    tabs.open("http://www.mozilla.org/");
+  }
+});</pre>
+</div>
+<p><code><font face="Open Sans, sans-serif"><span style="line-height: 21px;">Du kannst das Icon immer mit </span></font>contentURL</code> ändern!</p>
+<h2 id="Responding_To_the_User">Responding To the User</h2>
+<p>You can listen for <code>click</code>, <code>mouseover</code>, and <code>mouseout</code> events by passing handler functions as the corresponding constructor options. The widget example above assigns a listener to the <code>click</code> event using the <code>onClick</code> option, and there are similar <code>onMouseover</code> and <code>onMouseout</code> options.</p>
+<p>To handle user interaction in more detail, you can attach a content script to the widget. Your add-on script and the content script can't directly access each other's variables or call each other's functions, but they can send each other messages.</p>
+<p>Here's an example. The widget's built-in <code>onClick</code> property does not distinguish between left and right mouse clicks, so to do this we need to use a content script. The script looks like this:</p>
+<pre class="brush: js">window.addEventListener('click', function(event) {
+  if(event.button == 0 &amp;&amp; event.shiftKey == false)
+    self.port.emit('left-click');
+  if(event.button == 2 || (event.button == 0 &amp;&amp; event.shiftKey == true))
+    self.port.emit('right-click');
+    event.preventDefault();
+}, true);</pre>
+<p>It uses the standard DOM <code>addEventListener()</code> function to listen for click events, and handles them by sending the corresponding message to the main add-on code. Note that the messages "left-click" and "right-click" are not defined in the widget API itself, they're custom events defined by the add-on author.</p>
+<p>Save this script in your <code>data</code> directory as "click-listener.js".</p>
+<p>Next, modify <code>main.js</code> to:</p>
+<ul>
+ <li>pass in the script by setting the <code>contentScriptFile</code> property</li>
+ <li>listen for the new events:</li>
+</ul>
+<pre class="brush: js">var widgets = require("sdk/widget");
+var tabs = require("sdk/tabs");
+var self = require("sdk/self");
+
+var widget = widgets.Widget({
+  id: "mozilla-link",
+  label: "Mozilla website",
+  contentURL: "http://www.mozilla.org/favicon.ico",
+  contentScriptFile: self.data.url("click-listener.js")
+});
+widget.port.on("left-click", function(){
+  console.log("left-click");
+});
+widget.port.on("right-click", function(){
+  console.log("right-click");
+});</pre>
+<p>Now execute <code>cfx run</code> again, and try right- and left-clicking on the button. You should see the corresponding string written to the command shell.</p>
+<h2 id="Attaching_a_Panel">Attaching a Panel</h2>
+
+<p><img alt="" class="image-right" src="https://mdn.mozillademos.org/files/6527/widget-panel-clock.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+<p>If you supply a <a href="/en-US/Add-ons/SDK/High-Level_APIs/panel"><code>panel</code></a> object to the widget's constructor, then the panel will be shown when the user clicks the widget:</p>
+<pre class="brush: js">var data = require("sdk/self").data;
+var clockPanel = require("sdk/panel").Panel({
+  width:215,
+  height:160,
+  contentURL: data.url("clock.html")
+});
+require("sdk/widget").Widget({
+  id: "open-clock-btn",
+  label: "Clock",
+  contentURL: data.url("History.png"),
+  panel: clockPanel
+});</pre>
+<p>To learn more about working with panels, see the tutorial on <a href="/en-US/Add-ons/SDK/Display_a_Popup">displaying a popup</a>.</p>
+<h2 id="Learning_More">Learning More</h2>
+<p>To learn more about the widget module, see its <a href="/en-US/Add-ons/SDK/High-Level_APIs/widget">API reference documentation</a>.</p>
+<p>To learn more about content scripts, see the <a href="/en-US/Add-ons/SDK/Guides/Content_Scripts">content scripts guide</a>.</p>
diff --git a/files/de/mozilla/add-ons/sdk/tutorials/getting_started/index.html b/files/de/mozilla/add-ons/sdk/tutorials/getting_started/index.html
new file mode 100644
index 0000000000..dbafb57553
--- /dev/null
+++ b/files/de/mozilla/add-ons/sdk/tutorials/getting_started/index.html
@@ -0,0 +1,214 @@
+---
+title: Getting started
+slug: Mozilla/Add-ons/SDK/Tutorials/Getting_started
+translation_of: Mozilla/Add-ons/SDK/Tutorials/Getting_Started_%28jpm%29
+---
+<p>This tutorial walks through creating a simple add-on using the SDK.</p>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>To create add-ons for Firefox using the SDK, you'll first need to follow the instructions to <a href="/en-US/Add-ons/SDK/Tutorials/Installation" rel="noreferrer">install and activate the SDK</a>. Once you've done that, you'll be looking at a command prompt.</p>
+
+<h2 id="Initializing_an_empty_add-on">Initializing an empty add-on</h2>
+
+<p>In the command prompt, create a new directory. The directory doesn't have to be under the SDK root: you can create it anywhere you like. Navigate to it, type <code>cfx init</code>, and hit enter:</p>
+
+<pre>mkdir my-addon
+cd my-addon
+cfx init
+</pre>
+
+<p>You'll see some output like this:</p>
+
+<pre>* lib directory created
+* data directory created
+* test directory created
+* doc directory created
+* README.md written
+* package.json written
+* test/test-main.js written
+* lib/main.js written
+* doc/main.md written
+Your sample add-on is now ready for testing:
+try "cfx test" and then "cfx run". Have fun!"
+</pre>
+
+<h2 id="Implementing_the_add-on">Implementing the add-on</h2>
+
+<p>Now you can write the add-on's code, which goes in the "main.js" file in your "lib" directory. This file was created for you in the previous step. Open it and add the following code:</p>
+
+<pre class="brush: js">var buttons = require('sdk/ui/button/action');
+var tabs = require("sdk/tabs");
+
+var button = buttons.ActionButton({
+  id: "mozilla-link",
+  label: "Visit Mozilla",
+  icon: {
+    "16": "./icon-16.png",
+    "32": "./icon-32.png",
+    "64": "./icon-64.png"
+  },
+  onClick: handleClick
+});
+
+function handleClick(state) {
+  tabs.open("https://www.mozilla.org/");
+}
+</pre>
+
+<p>Save the file.</p>
+
+<p>Next, save these three icon files to the "data" directory:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/7635/icon-16.png" style="width: 16px; height: 16px;"></td>
+   <td>icon-16.png</td>
+  </tr>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/7637/icon-32.png" style="width: 32px; height: 32px;"></td>
+   <td>icon-32.png</td>
+  </tr>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/7639/icon-64.png" style="width: 64px; height: 64px;"></td>
+   <td>icon-64.png</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Back at the command prompt, type:</p>
+
+<pre>cfx run
+</pre>
+
+<p>This is the SDK command to run a new instance of Firefox with your add-on installed. When Firefox launches, in the top-right corner of the browser you'll see an icon with the Firefox logo. Click the icon, and a new tab will open with <a href="https://www.mozilla.org/" rel="noreferrer">https://www.mozilla.org/</a> loaded into it.</p>
+
+<div class="note">
+<p>You might see an error message like this when you type cfx run:</p>
+
+<pre class="bz_comment_text" id="comment_text_0">A given cfx option has an inappropriate value:
+  ZIP does not support timestamps before 1980</pre>
+
+<p>If so, you've run into <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1005412">bug 1005412</a>, meaning that the icon files you downloaded are given a timestamp of 1970. Until this bug is fixed, the workaround is to use the <a href="http://www.linfo.org/touch.html"><code>touch</code></a> command to update the timestamps:</p>
+
+<pre>touch icon-16.png</pre>
+</div>
+
+<p>That's all this add-on does. It uses two SDK modules: the <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button</a> module, which enables you to add buttons to the browser, and the <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs" rel="noreferrer">tabs</a> module, which enables you to perform basic operations with tabs. In this case, we've created a button whose icon is the Firefox icon, and added a click handler that loads the Mozilla home page in a new tab.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7643/mozilla-button.png" style="width: 382px; height: 221px; display: block; margin-left: auto; margin-right: auto;">Try editing this file. For example, we could change the page that gets loaded:</p>
+
+<pre class="brush: js">var buttons = require('sdk/ui/button/action');
+var tabs = require("sdk/tabs");
+
+var button = buttons.ActionButton({
+  id: "mozilla-link",
+  label: "Visit Mozilla",
+  icon: {
+    "16": "./icon-16.png",
+    "32": "./icon-32.png",
+    "64": "./icon-64.png"
+  },
+  onClick: handleClick
+});
+
+function handleClick(state) {
+  tabs.open("https://developer.mozilla.org/");
+}</pre>
+
+<p>At the command prompt, execute <code>cfx run</code> again. This time clicking it takes you to <a href="https://developer.mozilla.org/">https://developer.mozilla.org/</a>.</p>
+
+<h2 id="Packaging_the_add-on">Packaging the add-on</h2>
+
+<p>When you've finished the add-on and are ready to distribute it, you'll need to package it as an XPI file. This is the installable file format for Firefox add-ons. You can distribute XPI files yourself or publish them to <a href="https://addons.mozilla.org" rel="noreferrer">https://addons.mozilla.org</a> so other users can download and install them.</p>
+
+<p>To build an XPI, just execute the command <code>cfx xpi</code> from the add-on's directory:</p>
+
+<pre>cfx xpi
+</pre>
+
+<p>You should see a message like:</p>
+
+<pre>Exporting extension to my-addon.xpi.
+</pre>
+
+<p>To test that this worked, try installing the XPI file in your own Firefox installation. You can do this by pressing the Ctrl+O key combination (Cmd+O on Mac) from within Firefox, or selecting the "Open" item from Firefox's "File" menu. This will bring up a file selection dialog; navigate to the "my-addon.xpi" file, open it and follow the prompts to install the add-on.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>In this tutorial we've built and packaged an add-on using three commands:</p>
+
+<ul>
+ <li><code>cfx init</code> to initialize an empty add-on template</li>
+ <li><code>cfx run</code> to run a new instance of Firefox with the add-on installed, so we can try it out</li>
+ <li><code>cfx xpi</code> to package the add-on into an XPI file for distribution</li>
+</ul>
+
+<p>These are the three main commands you'll use when developing SDK add-ons. There's comprehensive <a href="/en-US/Add-ons/SDK/Tools/cfx" rel="noreferrer">reference documentation</a> covering all the commands you can use and all the options they take.</p>
+
+<p>The add-on code itself uses two SDK modules, <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button</a> and <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs" rel="noreferrer">tabs</a>. There's reference documentation for all the <a href="/en-US/Add-ons/SDK/High-Level_APIs" rel="noreferrer">high-level</a> and <a href="/en-US/Add-ons/SDK/Low-Level_APIs" rel="noreferrer">low-level</a> APIs in the SDK.</p>
+
+<h2 id="What's_next">What's next?</h2>
+
+<p>To get a feel for some of the things you can do with the SDK APIs, try working through some of the <a href="/en-US/Add-ons/SDK/Tutorials" rel="noreferrer">tutorials</a>.</p>
+
+<h2 id="Advanced_techniques">Advanced techniques</h2>
+
+<h3 id="Overriding_the_built-in_modules">Overriding the built-in modules</h3>
+
+<p>The SDK modules you use to implement your add-on are built into Firefox. When you run or package an add-on using <code>cfx run</code> or <code>cfx xpi</code>, the add-on will use the versions of the modules in the version of Firefox that hosts it.</p>
+
+<p>As an add-on developer, this is usually what you want. But if you're developing the SDK modules themselves, of course, it isn't. In this case it's assumed that you have checked out the SDK from its <a href="https://github.com/mozilla/addon-sdk" rel="noreferrer">GitHub repo</a> and will have run the <a href="/en-US/Add-ons/SDK/Tutorials/Installation" rel="noreferrer">bin/activate</a> script from the root of your checkout.</p>
+
+<p>Then when you invoke <code>cfx run</code> or <code>cfx xpi</code>, you pass the "-o" option:</p>
+
+<pre>cfx run -o
+</pre>
+
+<p>This instructs cfx to use the local copies of the SDK modules, not the ones in Firefox.</p>
+
+<h3 id="Developing_without_cfx_run">Developing without cfx run</h3>
+
+<p>Because <code>cfx run</code> restarts the browser each time you invoke it, it can be a little cumbersome if you are making frequent changes to an add-on. An alternative development model is to use the <a href="https://addons.mozilla.org/en-US/firefox/addon/autoinstaller/" rel="noreferrer">Extension Auto-Installer</a> add-on: this listens for new XPI files on a specified port and installs them automatically. That way you can test new changes without needing to restart the browser:</p>
+
+<ul>
+ <li>make a change to your add-on</li>
+ <li>run cfx xpi</li>
+ <li>post the add-on to the port specified</li>
+</ul>
+
+<p>You could even automate this workflow with a simple script. For example:</p>
+
+<pre>while true ; do cfx xpi ; wget --post-file=codesy.xpi http://localhost:8888/ ; sleep 5 ; done
+</pre>
+
+<p>Note that the logging level defined for the console is different when you use this method, compared to the logging level used when an add-on is run using <code>cfx run</code>. This means that if you want to see output from <a href="/en-US/Add-ons/SDK/Tutorials/Logging" rel="noreferrer"><code>console.log()</code></a> messages, you'll have to tweak a setting. See the documentation on <a href="/en-US/Add-ons/SDK/Tools/console#Logging_Levels" rel="noreferrer">logging levels</a> for the details on this.</p>
+
+<p>Another example using <a href="http://gruntjs.com/">grunt</a> and <a href="https://www.npmjs.com/package/grunt-shell">grunt-shell</a>:</p>
+
+<pre class="brush: js">module.exports = function(grunt) {
+  'use strict';
+  require('matchdep').filterDev('grunt-!(cli)').forEach(grunt.loadNpmTasks);
+  grunt.initConfig({
+    shell: {
+      xpi: {
+        command: [
+          'cd pluginpath',
+          'cfx xpi',
+          'wget --post-file=pluginname.xpi http://localhost:8888/ || echo&gt;/dev/null'
+        ].join('&amp;&amp;')
+      }
+    },
+    watch: {
+      xpi: {
+        files: ['pluginpath/**'],
+        tasks: ['shell:xpi']
+      }
+    }
+  });
+
+  grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.loadNpmTasks('grunt-shell');
+  grunt.registerTask('default', ['watch']);
+};</pre>
diff --git a/files/de/mozilla/add-ons/sdk/tutorials/index.html b/files/de/mozilla/add-ons/sdk/tutorials/index.html
new file mode 100644
index 0000000000..6eb7e95b49
--- /dev/null
+++ b/files/de/mozilla/add-ons/sdk/tutorials/index.html
@@ -0,0 +1,165 @@
+---
+title: Tutorials
+slug: Mozilla/Add-ons/SDK/Tutorials
+translation_of: Archive/Add-ons/Add-on_SDK/Tutorials
+---
+<p>Auf dieser Seite wird gezeigt, wie man spezifische praktische Aufgaben unter Verwendung des SDKs bewältigen kann.</p>
+<hr>
+<h3 id="Erste_Schritte"><a name="getting-started">Erste Schritte</a></h3>
+<div class="column-container">
+ <div class="column-half">
+  <dl>
+   <dt>
+    <a href="/en-US/Add-ons/SDK/Tutorials/Installation">Installation</a></dt>
+   <dd>
+    Download, Installation und Einrichtung des SDKs unter Windows, OS X und Linux.</dd>
+  </dl>
+  <dl>
+   <dt>
+    <a href="/en-US/Add-ons/SDK/Tutorials/Troubleshooting">Fehlerbehebung</a></dt>
+   <dd>
+    Lösungsansätze zum Beheben klassischer Probleme und Möglichkeiten zum Erhalten weiterer Hilfe.</dd>
+  </dl>
+ </div>
+ <div class="column-half">
+  <dl>
+   <dt>
+    <a href="/en-US/Add-ons/SDK/Tutorials/Getting_started_with_cfx">Erste Schritte mit cfx</a></dt>
+   <dd>
+    Die elementaren cfx-Befehle zum Erstellen von Add-ons.</dd>
+  </dl>
+ </div>
+</div>
+<hr>
+<h3 id="Benutzeroberflächen_erstellen"><a name="create-user-interfaces">Benutzeroberflächen erstellen</a></h3>
+<div class="column-container">
+ <div class="column-half">
+  <dl>
+   <dt>
+    <a href="/en-US/Add-ons/SDK/Tutorials/Adding_a_Button_to_the_Toolbar">Toolbar-Button hinzufügen</a></dt>
+   <dd>
+    Einen Button zur Firefox-Toolbar hinzufügen.</dd>
+   <dt>
+    <a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox">Hauptmenü erweitern</a></dt>
+   <dd>
+    Items den Hauptmenüs von Firefox hinzufügen.</dd>
+  </dl>
+ </div>
+ <div class="column-half">
+  <dl>
+   <dt>
+    <a href="/en-US/Add-ons/SDK/Tutorials/Display_a_Popup">Popups anzeigen</a></dt>
+   <dd>
+    Einen Popup-Dialog unter Verwendung von HTML und JavaScript anzeigen.</dd>
+   <dt>
+    <a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Context_Menu_Item">Kontextmenü erweitern</a></dt>
+   <dd>
+    Items dem Kontextmenü von Firefox hinzufügen.</dd>
+  </dl>
+ </div>
+</div>
+<hr>
+<h3 id="Interagieren_mit_dem_Browser"><a name="interact-with-the-browser">Interagieren mit dem Browser</a></h3>
+<div class="column-container">
+ <div class="column-half">
+  <dl>
+   <dt>
+    <a href="/en-US/Add-ons/SDK/Tutorials/Open_a_Web_Page">Webseiten öffnen</a></dt>
+   <dd>
+    Mit Hilfe des tabs-Moduls eine Seite in einem neuen Tab oder einem neuen Fenster öffnen und auf deren Inhalt zugreifen.</dd>
+   <dt>
+    <a href="/en-US/Add-ons/SDK/Tutorials/Listen_for_Page_Load">Auf das Laden von Webseiten reagieren</a></dt>
+   <dd>
+    Mit dem tabs-Modul erkennen, wenn neue Webseiten geladen werden und auf deren Inhalte zugreifen.</dd>
+  </dl>
+ </div>
+ <div class="column-half">
+  <dl>
+   <dt>
+    <a href="/en-US/Add-ons/SDK/Tutorials/List_Open_Tabs">Geöffnete Tabs auflisten </a></dt>
+   <dd>
+    Mit dem tabs-Modul geöffnete Tabs auflisten und auf ihre Inhalte zugreifen.</dd>
+  </dl>
+ </div>
+</div>
+<hr>
+<h3 id="Inhalte_von_Webseiten_bearbeiten"><a name="modify-web-pages">Inhalte von Webseiten bearbeiten</a></h3>
+<div class="column-container">
+ <div class="column-half">
+  <dl>
+   <dt>
+    <a href="/en-US/Add-ons/SDK/Tutorials/Modifying_Web_Pages_Based_on_URL">Webseiten basierend auf deren URL bearbeiten</a></dt>
+   <dd>
+    URL-Filter für Webseiten erstellen und ein Script darin ausführen, sobald eine Seite geladen wird, deren URL mit einer URL im Filter übereinstimmt.</dd>
+  </dl>
+ </div>
+ <div class="column-half">
+  <dl>
+   <dt>
+    <a href="/en-US/Add-ons/SDK/Tutorials/Modifying_the_Page_Hosted_by_a_Tab">Aktive Webseite bearbeiten</a></dt>
+   <dd>
+    Ein Script dynamisch in der aktuell aktiven Website ausführen.</dd>
+  </dl>
+ </div>
+</div>
+<hr>
+<h3 id="Entwicklungstechnologien"><a name="development-techniques">Entwicklungstechnologien</a></h3>
+<div class="column-container">
+ <div class="column-half">
+  <dl>
+   <dt>
+    <a href="/en-US/Add-ons/SDK/Tutorials/Logging">Loggen</a></dt>
+   <dd>
+    Nachrichten auf der Konsole für Diagnosezwecke ausgeben.</dd>
+   <dt>
+    <a href="/en-US/Add-ons/SDK/Tutorials/Creating_reusable_modules">Wiederverwendbare Module erstellen</a></dt>
+   <dd>
+    Gliedere dein Add-on in einzelne Module und erleichtere somit das Entwickeln, Debuggen und Erhalten des Add-ons. Erstelle wiederverwendbare Pakete, die deine Module enthalten, damit auch andere Add-on-Entwickler diese verwenden können.</dd>
+   <dt>
+    <a href="/en-US/Add-ons/SDK/Tutorials/Unit_testing">Testen der Bestandteile</a></dt>
+   <dd>
+    Erstellen und Ausführen von Tests mit dem SDK-test-Framework.</dd>
+   <dt>
+    <a href="/en-US/Add-ons/SDK/Tutorials/Chrome_authority">Chrome-Autorität</a></dt>
+   <dd>
+    Erhalte Zugriff auf das Components-Objekt und erlaube deinem Add-on XPCOM-Objekte zu laden und zu verwenden.</dd>
+   <dt>
+    <a href="/en-US/Add-ons/SDK/Tutorials/Creating_event_targets">Erstellen von benutzerdefinierten Events</a></dt>
+   <dd>
+    Erlaube deinen erstellten Objekten, eigene Events auszugeben.</dd>
+  </dl>
+ </div>
+ <div class="column-half">
+  <dl>
+   <dt>
+    <a href="/en-US/Add-ons/SDK/Tutorials/Listening_for_load_and_unload">Auf das Starten und Beenden des Add-ons reagieren</a></dt>
+   <dd>
+    Werde benachrichtigt, wenn ein Add-on von Firefox gestartet oder beendet wird und übergebe Argumente an das Add-on über die Kommandozeile.</dd>
+   <dt>
+    <a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox">Module von Drittanbietern verwenden</a></dt>
+   <dd>
+    Installation und Verwendung von zusätzlichen Modulen, die nicht im SDK enthalten sind.</dd>
+   <dt>
+    <a href="/en-US/Add-ons/SDK/Tutorials/l10n">Lokalisierung</a></dt>
+   <dd>
+    Entwicklung lokalisierbarer Add-ons.</dd>
+   <dt>
+    <a href="/en-US/Add-ons/SDK/Tutorials/Mobile_development">Entwicklung für mobile Endgeräte</a></dt>
+   <dd>
+    Entwicklung von Add-ons für Firefox Mobile für Android.</dd>
+  </dl>
+ </div>
+</div>
+<hr>
+<h3 id="Zusammenfassung"><a name="putting-it-together">Zusammenfassung</a></h3>
+<div class="column-container">
+ <div class="column-half">
+  <dl>
+   <dt>
+    <a href="/en-US/Add-ons/SDK/Tutorials/Annotator">Add-on "Annotator"</a></dt>
+   <dd>
+    Walk-through durch das Beispiel-Add-on "Annotator".</dd>
+  </dl>
+ </div>
+</div>
+<p> </p>
diff --git a/files/de/mozilla/add-ons/sdk/tutorials/installation/index.html b/files/de/mozilla/add-ons/sdk/tutorials/installation/index.html
new file mode 100644
index 0000000000..28e899226e
--- /dev/null
+++ b/files/de/mozilla/add-ons/sdk/tutorials/installation/index.html
@@ -0,0 +1,134 @@
+---
+title: Installation
+slug: Mozilla/Add-ons/SDK/Tutorials/Installation
+translation_of: Mozilla/Add-ons/SDK/Tools/jpm#Installation
+---
+<div class="warning">
+<p><strong><code>Die </code></strong><strong><code>cfx</code> Installation ist veraltet. Sie sollten stattdessen  <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/jpm">jpm</a> benutzen.</strong></p>
+
+<p>Mehr Informationen finden Sie unter <a href="https://blog.mozilla.org/addons/2015/02/26/jpm-replaces-cfx-for-firefox-38/">JPM replaces CFX for Firefox 38</a>.</p>
+</div>
+
+<h2 id="Vorraussetzungen">Vorraussetzungen</h2>
+
+<p>Um mit dem Add-on SDK zu entwickeln, brauchen Sie:</p>
+
+<ul>
+ <li><a href="http://www.python.org/">Python</a> 2.5, 2.6 or 2.7. Achtung, die Versionen 3.x von Python werden auf keinen Plattformen unterstützt. Python sollte in ihrem Pfad enthalten sein.</li>
+ <li>Firefox.</li>
+ <li>Die SDK: Sie können die letzte Version der SDK als <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/jetpack/jetpack-sdk-latest.tar.gz">tarball</a> oder als <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/jetpack/jetpack-sdk-latest.zip">zip file</a>, oder die neuste Entwicklungsversion im <a href="https://github.com/mozilla/addon-sdk">GitHub repository</a> herunterladen. Wenn Sie sich für die letzte Ebtwicklungsversion entscheiden, müssen die diese mit einer Nightly Version von Firefox verwenden.</li>
+</ul>
+
+<h2 id="Installation">Installation</h2>
+
+<h3 id="Installation_auf_FreeBSD_OS_X_Linux">Installation auf FreeBSD/ OS X / Linux</h3>
+
+<p>Entpacken Sie die Dateien an einen beliebigen Ort und navigieren Sie mit einer Kommandozeile/Shell in das Stammverzeichnis der SDK. Zum Beispiel so:</p>
+
+<pre>tar -xf addon-sdk.tar.gz
+cd addon-sdk
+</pre>
+
+<p>Danach aktivieren Sie so die SDK, wenn Sie ein Bash Benutzer sind (was die meisten sind):</p>
+
+<pre>source bin/activate
+</pre>
+
+<p>Als nicht-Bash Benutzer, müssen Sie folgenden Befehl verwenden:</p>
+
+<pre>bash bin/activate
+</pre>
+
+<p>In Ihrer Eingabeaufforderung sollten Sie jetzt einen neuen Prefix haben, der den Namen des SDK's root Verzeichniss hat:</p>
+
+<pre>(addon-sdk)~/mozilla/addon-sdk &gt;
+</pre>
+
+<h3 id="Installation_auf_Mac_mit_Homebrew">Installation auf Mac mit Homebrew</h3>
+
+<p>Falls Sie ein Mac Benutzer sind, können Sie die SDK auch mithilfe von <a href="http://brew.sh/">Homebrew</a> und dem folgenden Befehl installieren:</p>
+
+<pre>brew install mozilla-addon-sdk</pre>
+
+<p>Sobald die Installation erfolgreich abgeschlossen wurde, können Sie das cfx Programm jederzeit in der Kommandozeile verwenden und benötigen keine vorherige Aktivierung.</p>
+
+<h3 id="Installation_auf_Windows">Installation auf Windows</h3>
+
+<p>Entpacken Sie die Dateien an einen beliebigen Ort und navigieren Sie mit einer Kommandozeile/Shell in das Stammverzeichnis der SDK. Zum Beispiel so:</p>
+
+<pre>7z.exe x addon-sdk.zip
+cd addon-sdk
+</pre>
+
+<p>Dann führen Sie folgenden Befehl aus:</p>
+
+<pre>bin\activate
+</pre>
+
+<p>In Ihrer Eingabeaufforderung sollten Sie jetzt einen neuen Prefix haben, der den Namen des SDK's root Verzeichniss hat:</p>
+
+<pre>(C:\Users\mozilla\sdk\addon-sdk) C:\Users\Work\sdk\addon-sdk&gt;
+</pre>
+
+<h2 id="Plausibilitätsprüfung"><span class="st">Plausibilitätsprüfung</span></h2>
+
+<p>Rufen Sie diesen Befehl in einer Kommandozeile auf:</p>
+
+<pre>cfx
+</pre>
+
+<p>Es sollte eine Meldung produzieren, die in etwa so aussieht, gefolgt von einer Auflistung der Benutzungsoptionen:</p>
+
+<pre>Usage: cfx [options] [command]
+</pre>
+
+<p>Das ist das <a href="/en-US/Add-ons/SDK/Tools/cfx"><code>cfx</code> Kommandozeilen Programm</a>. Es ist ihr primäres Interface für das Add-on SDK. Damit können Sie Firefox starten und ihr Add-on testen, ihr Add-on zur Veröffentlichung verpacken, sich Dokumentationen ansehen und Unit tests durchführen.</p>
+
+<h2 id="Nächste_Schritte">Nächste Schritte</h2>
+
+<p>Schauen Sie sich als nächstes das Tutorial  <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">Getting Started With cfx</a> an, das erklärt, wie man ein Add-on mit dem CFX Tool erstellt.</p>
+
+<h2 id="Fortgeschrittene_Themen">Fortgeschrittene Themen</h2>
+
+<h3 id="Das_SDK_von_Git_verwenden">Das SDK von Git verwenden</h3>
+
+<p>Die SDK wurde in GitHub entwickelt. Statt das verpackte Release zu verwenden, können Sie von <a class="external external-icon" href="https://github.com/mozilla/addon-sdk">GitHub repository </a>den letzten Entwicklungsstand, statt dem offiziellen Release verwenden.</p>
+
+<p>Wenn Sie den letzten Entwicklungsstand verwenden, benötigen Sie eine Nightly Version von Firefox und Sie können keine Add-ons bei <a class="external external-icon" href="https://addons.mozilla.org/">addons.mozilla.org</a> (AMO) einreichen, da AMP den offiziellen Release vorraussetzt.</p>
+
+<h4 id="Erweiterungen_für_AMO_von_Git_Quellen_entwickeln">Erweiterungen für AMO von Git Quellen entwickeln</h4>
+
+<p>Zum Einreichein bei <a href="https://addons.mozilla.org/">AMO</a> können nur der neuste git release tag für die Add-On SDK Quelldateien benutzt werden.</p>
+
+<p>Der Gitarchivbefehl wird benötigt um ein Paar  Git Atrributplatzhalter im Git Klonverzeichnis zu erweitern.</p>
+
+<p>git checkout 1.16</p>
+
+<p>git archive 1.16 python-lib/cuddlefish/_version.py | tar -xvf -</p>
+
+<h3 id="Permanente_Aktivierung"><code>Permanente Aktivierung</code></h3>
+
+<p>Sie können die Aktivierung permanent machen, in dem Sie die Variablen in ihrer Umgebung permanent setzen, so dass jede Eingabeaufforderung sie lesen kann. In diesem Fall müssen nicht jedesmal den activate Befehl verwenden, sobald Sie eine neue Eingabeaufforderung öffnen.</p>
+
+<p>Da sich die Anzahl der zu setzenden Variable mit jeder neuen Version des SDK ändern kann, ist es am Besten sich nach den jeweiligen Aktivierungsskripten zu richten um Festzustellen welche Variablen verwendet werden. Die Aktivierung benutzt verschieden Skripte für Bashumgebungen (Linux und OS X) und Windowsumgebungen.</p>
+
+<h4 id="Windows">Windows</h4>
+
+<p>Bei Windows, <code>benutzt bin\activate</code> die <code>activate.bat</code> Datei. Sie können die Aktivierung permanent machen, indem Sie in der Kommandozeile das setx tool verwenden.</p>
+
+<h4 id="Linux_OS_X">Linux / OS X</h4>
+
+<p>Auf Linux und OS X<code> benutz source bin/activate</code> das <code>activate</code> bash Skript. Die Aktivierung kann per <code>~/.bashrc</code> (Linux) oder <code>~/.bashprofile</code> (OS X) Permanent gemacht werden.</p>
+
+<p>Eine Alternative ist das Erstellen eines symbolischen Links im Ordner <code>~/bin, </code>der auf das cfx Programm verweist:</p>
+
+<pre>ln -s PATH_TO_SDK/bin/cfx ~/bin/cfx
+</pre>
+
+<p>Falls Sie Homebrew zur Installation des SDKs verwenden, werden die Umgebungsvariablen bereits permanent für Sie gesetzt.</p>
+
+<h2 id="activate">activate</h2>
+
+<p>Der activate Befehl setzt Umgebungsvariablen, die zur Nutzung der SDK nötig sind. Er setzt die Variablen nur für die aktuelle Kommandozeile. Das heisst, wenn Sie eine neue Kommandozeile öffnen, müssen Sie den Befehl erneut ausführen, bevor Sie die SDK wieder benutzen können.</p>
+
+<p>Das bedeutet, dass Sie mehrere Kopien der SDK an verschiedenen Orten ihrer Festplatte haben können und zwischen diesen wechseln können, oder sogar gleichzeitig in verschiedenen Eingabeaufforderungen aktiviert haben können.</p>
diff --git a/files/de/mozilla/add-ons/sdk/tutorials/mobile_development/index.html b/files/de/mozilla/add-ons/sdk/tutorials/mobile_development/index.html
new file mode 100644
index 0000000000..9d33162519
--- /dev/null
+++ b/files/de/mozilla/add-ons/sdk/tutorials/mobile_development/index.html
@@ -0,0 +1,476 @@
+---
+title: Developing for Firefox Mobile
+slug: Mozilla/Add-ons/SDK/Tutorials/Mobile_development
+translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Mobile_development
+---
+<div class="warning">
+ <p>Developing add-ons for Firefox Mobile is still an experimental feature of the SDK. Although the SDK modules used are stable, the setup instructions and cfx commands are likely to change.</p>
+</div>
+<div class="note">
+ <p><span>To follow this tutorial you'll need to have <a href="/en-US/Add-ons/SDK/Tutorials/Installation">installed the SDK</a> and learned the <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">basics of <code>cfx</code></a>. </span></p>
+</div>
+<p>Firefox for Android implements its UI using native Android widgets instead of XUL. With the add-on SDK you can develop add-ons that run on this new version of Firefox Mobile as well as on the desktop version of Firefox.</p>
+<p>You can use the same code to target both desktop Firefox and Firefox Mobile, and just specify some extra options to <code>cfx run</code>, <code>cfx test</code>, and <code>cfx xpi</code> when targeting Firefox Mobile.</p>
+<p>Right now not all modules are fully functional, but we're working on adding support for more modules. The <a href="/en-US/Add-ons/SDK/Tutorials/Mobile_development#Module_Compatibility">tables at the end of this guide</a> list the modules that are currently supported on Firefox Mobile.</p>
+<p>This tutorial explains how to run SDK add-ons on an Android device connected via USB to your development machine. We'll use the <a href="http://developer.android.com/guide/developing/tools/adb.html">Android Debug Bridge</a> (adb) to communicate between the Add-on SDK and the device.</p>
+<p><img src="https://mdn.mozillademos.org/files/6555/mobile-setup-adb.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+<p>It's possible to use the <a href="http://developer.android.com/guide/developing/tools/emulator.html">Android emulator</a> to develop add-ons for Android without access to a device, but it's slow, so for the time being it's much easier to use the technique described below.</p>
+<h2 id="Setting_up_the_Environment">Setting up the Environment</h2>
+<p>First you'll need an <a href="https://wiki.mozilla.org/Mobile/Platforms/Android#System_Requirements">Android device capable of running the native version of Firefox Mobile</a>. Then:</p>
+<ul>
+ <li>install the <a href="https://wiki.mozilla.org/Mobile/Platforms/Android#Download_Nightly">Nightly build of the native version of Firefox Mobile</a> on the device.</li>
+ <li><a href="http://developer.android.com/guide/developing/device.html#setting-up">enable USB debugging on the device (step 3 of this link only)</a></li>
+</ul>
+<p>On the development machine:</p>
+<ul>
+ <li>install version 1.5 or higher of the Add-on SDK</li>
+ <li>install the correct version of the <a href="http://developer.android.com/sdk/index.html">Android SDK</a> for your device</li>
+ <li>using the Android SDK, install the <a href="http://developer.android.com/sdk/installing.html#components">Android Platform Tools</a></li>
+</ul>
+<p>Next, attach the device to the development machine via USB.</p>
+<p>Now open up a command shell. Android Platform Tools will have installed <code>adb</code> in the "platform-tools" directory under the directory in which you installed the Android SDK. Make sure the "platform-tools" directory is in your path. Then type:</p>
+<pre>adb devices
+</pre>
+<p>You should see some output like:</p>
+<pre>List of devices attached
+51800F220F01564 device
+</pre>
+<p>(The long hex string will be different.)</p>
+<p>If you do, then <code>adb</code> has found your device and you can get started.</p>
+<h2 id="Running_Add-ons_on_Android">Running Add-ons on Android</h2>
+<p>You can develop your add-on as normal, as long as you restrict yourself to the supported modules.</p>
+<p>When you need to run the add-on, first ensure that Firefox is not running on the device. Then execute <code>cfx run</code> with some extra options:</p>
+<pre>cfx run -a fennec-on-device -b /path/to/adb --mobile-app fennec --force-mobile
+</pre>
+<p>See <a href="/en-US/Add-ons/SDK/Tutorials/Mobile_development#cfx_Options_for_Mobile_Development">"cfx Options for Mobile Development"</a> for the details of this command.</p>
+<p>In the command shell, you should see something like:</p>
+<pre>Launching mobile application with intent name org.mozilla.fennec
+Pushing the addon to your device
+Starting: Intent { act=android.activity.MAIN cmp=org.mozilla.fennec/.App (has extras) }
+--------- beginning of /dev/log/main
+--------- beginning of /dev/log/system
+Could not read chrome manifest 'file:///data/data/org.mozilla.fennec/chrome.manifest'.
+info: starting
+info: starting
+zerdatime 1329258528988 - browser chrome startup finished.
+</pre>
+<p>This will be followed by lots of debug output.</p>
+<p>On the device, you should see Firefox launch with your add-on installed.</p>
+<p><code>console.log()</code> output from your add-on is written to the command shell, just as it is in desktop development. However, because there's a lot of other debug output in the shell, it's not easy to follow. The command <code>adb logcat</code> prints <code>adb</code>'s log, so you can filter the debug output after running the add-on. For example, on Mac OS X or Linux you can use a command like the below to filter only the lines of console output:</p>
+<pre>adb logcat | grep console
+</pre>
+<p>You can experiment with different filter strings on <code>adb logcat</code> to focus in on the lines relevant to you.</p>
+<p>Running <code>cfx test</code> is identical:</p>
+<pre>cfx test -a fennec-on-device -b /path/to/adb --mobile-app fennec --force-mobile
+</pre>
+<h2 id="cfx_Options_for_Mobile_Development"><a name="cfx-options">cfx Options for Mobile Development</a></h2>
+<p>As you see in the quote above, <code>cfx run</code> and <code>cfx test</code> need four options to work on Android devices.</p>
+<table>
+ <colgroup>
+  <col>
+  <col>
+ </colgroup>
+ <tbody>
+  <tr>
+   <td><code>-a fennec-on-device</code></td>
+   <td>This tells the Add-on SDK which application will host the add-on, and should be set to "fennec-on-device" when running an add-on on Firefox Mobile on a device.</td>
+  </tr>
+  <tr>
+   <td><code>-b /path/to/adb</code></td>
+   <td>
+    <p>As we've seen, <code>cfx</code> uses the Android Debug Bridge (adb) to communicate with the Android device. This tells <code>cfx</code> where to find the <code>adb</code> executable.</p>
+    <p>You need to supply the full path to the <code>adb</code> executable.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>--mobile-app</code></td>
+   <td>
+    <p>This is the name of the <a href="http://developer.android.com/reference/android/content/Intent.html"> Android intent</a>. Its value depends on the version of Firefox Mobile that you're running on the device:</p>
+    <ul>
+     <li><code>fennec</code>: if you're running Nightly</li>
+     <li><code>fennec_aurora</code>: if you're running Aurora</li>
+     <li><code>firefox_beta</code>: if you're running Beta</li>
+     <li><code>firefox</code>: if you're running Release</li>
+    </ul>
+    <p>If you're not sure, run a command like this (on OS X/Linux, or the equivalent on Windows):</p>
+    <pre>
+adb shell pm list packages | grep mozilla</pre>
+    <p>You should see "package" followed by "org.mozilla." followed by a string. The final string is the name you need to use. For example, if you see:</p>
+    <pre>
+package:org.mozilla.fennec</pre>
+    <p>...then you need to specify:</p>
+    <pre>
+--mobile-app fennec</pre>
+    <p>This option is not required if you have only one Firefox application installed on the device.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>--force-mobile</code></td>
+   <td>
+    <p>This is used to force compatibility with Firefox Mobile, and should always be used when running on Firefox Mobile.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Packaging_Mobile_Add-ons">Packaging Mobile Add-ons</h2>
+<p>To package a mobile add-on as an XPI, use the command:</p>
+<pre>cfx xpi --force-mobile
+</pre>
+<p>Actually installing the XPI on the device is a little tricky. The easiest way is probably to copy the XPI somewhere on the device:</p>
+<pre>adb push my-addon.xpi /mnt/sdcard/
+</pre>
+<p>Then open Firefox Mobile and type this into the address bar:</p>
+<pre>file:///mnt/sdcard/my-addon.xpi
+</pre>
+<p>The browser should open the XPI and ask if you want to install it.</p>
+<p>Afterwards you can delete it using <code>adb</code> as follows:</p>
+<pre>adb shell
+cd /mnt/sdcard
+rm my-addon.xpi
+</pre>
+<p><a name="modules-compatibility"></a></p>
+<h2 id="Module_Compatibility">Module Compatibility</h2>
+<p>Modules not supported in Firefox Mobile are <span>marked</span> in the tables below.</p>
+<h3 id="High-Level_APIs">High-Level APIs</h3>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td style="width: 200px;">addon-page</td>
+   <td style="background-color: rgb(255, 51, 51); width: 200px;">Not supported</td>
+  </tr>
+  <tr>
+   <td>base64</td>
+   <td style="background-color: rgb(102, 204, 51);"><span style="background-color: #66cc33;">Supported</span></td>
+  </tr>
+  <tr>
+   <td>clipboard</td>
+   <td style="background-color: rgb(255, 51, 51);">Not supported</td>
+  </tr>
+  <tr>
+   <td>context-menu</td>
+   <td style="background-color: rgb(255, 51, 51);">Not supported</td>
+  </tr>
+  <tr>
+   <td>hotkeys</td>
+   <td style="background-color: rgb(102, 204, 51);"><span style="background-color: #66cc33;">Supported</span></td>
+  </tr>
+  <tr>
+   <td>indexed-db</td>
+   <td style="background-color: rgb(102, 204, 51);"><span style="background-color: #66cc66;">Supported</span></td>
+  </tr>
+  <tr>
+   <td>l10n</td>
+   <td style="background-color: rgb(102, 204, 51);"><span style="background-color: #66cc66;">Supported</span></td>
+  </tr>
+  <tr>
+   <td>notifications</td>
+   <td style="background-color: rgb(102, 204, 51);"><span style="background-color: #66cc66;">Supported</span></td>
+  </tr>
+  <tr>
+   <td>page-mod</td>
+   <td style="background-color: rgb(102, 204, 51);"><span style="background-color: #66cc66;">Supported</span></td>
+  </tr>
+  <tr>
+   <td>page-worker</td>
+   <td style="background-color: rgb(102, 204, 51);"><span style="background-color: #66cc66;">Supported</span></td>
+  </tr>
+  <tr>
+   <td>panel</td>
+   <td style="background-color: rgb(255, 51, 51);"><span style="background-color: #ff3333;">Not supported</span></td>
+  </tr>
+  <tr>
+   <td>passwords</td>
+   <td style="background-color: rgb(102, 204, 51);"><span style="background-color: #66cc66;">Supported</span></td>
+  </tr>
+  <tr>
+   <td>private-browsing</td>
+   <td style="background-color: rgb(255, 51, 51);">Not supported</td>
+  </tr>
+  <tr>
+   <td>querystring</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>request</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>selection</td>
+   <td style="background-color: rgb(255, 51, 51);">Not supported</td>
+  </tr>
+  <tr>
+   <td>self</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>simple-prefs</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>simple-storage</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>system</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>tabs</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>timers</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>ui</td>
+   <td style="background-color: rgb(255, 51, 51);">Not supported</td>
+  </tr>
+  <tr>
+   <td>url</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>widget</td>
+   <td style="background-color: rgb(255, 51, 51);">Not supported</td>
+  </tr>
+  <tr>
+   <td>windows</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+ </tbody>
+</table>
+<h3 id="Low-Level_APIs">Low-Level APIs</h3>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td style="width: 200px;">loader</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>chrome</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>console/plain-text</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>console/traceback</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>content/content</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>content/loader</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>content/mod</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>content/worker</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>core/heritage</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>core/namespace</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>core/promise</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>event/core</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>event/target</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>frame/hidden-frame</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>frame/utils</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>io/byte-streams</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>io/file</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>io/text-streams</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>lang/functional</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>lang/type</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>loader/cuddlefish</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>loader/sandbox</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>net/url</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>net/xhr</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>places/bookmarks</td>
+   <td style="background-color: rgb(255, 51, 51);">Not supported</td>
+  </tr>
+  <tr>
+   <td>places/favicon</td>
+   <td style="background-color: rgb(255, 51, 51);">Not supported</td>
+  </tr>
+  <tr>
+   <td>places/history</td>
+   <td style="background-color: rgb(255, 51, 51);">Not supported</td>
+  </tr>
+  <tr>
+   <td>platform/xpcom</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>preferences/service</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>stylesheet/style</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>stylesheet/utils</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>system/environment</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>system/events</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>system/globals</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>system/runtime</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>system/unload</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>system/xul-app</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>tabs/utils</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>test/assert</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>test/harness</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>test/httpd</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>test/runner</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>test/utils</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>ui/button/action</td>
+   <td style="background-color: rgb(255, 51, 51);">Not supported</td>
+  </tr>
+  <tr>
+   <td>ui/button/toggle</td>
+   <td style="background-color: rgb(255, 51, 51);">Not supported</td>
+  </tr>
+  <tr>
+   <td>ui/frame</td>
+   <td style="background-color: rgb(255, 51, 51);">Not supported</td>
+  </tr>
+  <tr>
+   <td>ui/id</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>ui/sidebar</td>
+   <td style="background-color: rgb(255, 51, 51);">Not supported</td>
+  </tr>
+  <tr>
+   <td>ui/toolbar</td>
+   <td style="background-color: rgb(255, 51, 51);">Not supported</td>
+  </tr>
+  <tr>
+   <td>util/array</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>util/collection</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>util/deprecate</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>util/list</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>util/match-pattern</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>util/object</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>util/uuid</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>window/utils</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+ </tbody>
+</table>
+<p> </p>
diff --git a/files/de/mozilla/add-ons/security_best_practices_in_extensions/index.html b/files/de/mozilla/add-ons/security_best_practices_in_extensions/index.html
new file mode 100644
index 0000000000..689a9b9679
--- /dev/null
+++ b/files/de/mozilla/add-ons/security_best_practices_in_extensions/index.html
@@ -0,0 +1,80 @@
+---
+title: Sicherheitsleitfaden bei Erweiterungen
+slug: Mozilla/Add-ons/Security_best_practices_in_extensions
+tags:
+  - Add-ons
+  - Anleitung
+  - Erweiterungen
+  - Leitfaden
+  - Sicherheit
+translation_of: Archive/Add-ons/Security_best_practices_in_extensions
+---
+<p>{{ draft() }}</p>
+
+<p>Dieses Dokument ist dazu gedacht, für Entwickler als Leitfaden zu bestmöglichen Vorgensweisen bei der Absicherung ihrer Erweiterung zu dienen. Dein Ziel ist es, deine Nutzer zu schützen. Einige Einträge sind strikte Richtlinien, was Bedeutet, dass wenn Du diesen nicht folgst, dein Add-On im Gegenzug auf Mozilla Add-Ons nicht akzeptiert wird. Andere Einträge sind Empfehlungen. Der Unterschied wird klar gekennzeichnet.</p>
+
+<p>Es ist aus der Perspektive einer Firefox Erweiterung geschrieben, aber die meisten Einträge beziehen sich auf Erweiterungen für andere Mozilla-basierte Applikationen wie Thunderbird oder SeaMonkey.</p>
+
+<h2 id="Handhabung_von_Webinhalten">Handhabung von Webinhalten</h2>
+
+<p>Im Allgemeinen ist der beste Weg sicherzustellen, dass der Browser beim Laden von Inhalten nicht kompromittiert wird, dafür zu sorgen, dass diese keine entsprechenden Rechte haben. Eine detailliertere Erklärung dieses Prozesses findet sich unter <a class="internal" href="https://developer.mozilla.org/en/Displaying_web_content_in_an_extension_without_security_issues" title="En/Displaying web content in an extension without security issues">Webinhalte ohne Sicherheitsprobleme in einer Erweiterung anzeigen</a>.</p>
+
+<p>Die Rechte, die ein Dokument bekommt, hängen auch davon ab, wo es herkommt.  Zum Beispiel: Wenn Du eine chrome URL lädst, bedeutet es, dass der Inhalt in Firefox registriert wurde und vollen Zugriff hat. Inhalt von einer Domain (wie http://example.com) kann nur auf die gleiche Domain zugreifen. Über das File Protocol geladene Dateien können auf solche zugreifen, die auf der Festplatte und anderen lokalen Datenträgern liegen. Es gibt Wege, die content/chrome Sicherheitsbarriere zu umgehen, falls Du zum Beispiel möchtest, dass eine Webseite eine Notifikation an ein Add-On sendet (oder umgekehrt). Ein Weg das zu tun ist es, eigene DOM Events zu nutzen; siehe <a class="internal" href="/en/Code_snippets/Interaction_between_privileged_and_non-privileged_pages" title="en/Code snippets/Interaction between privileged and non-privileged pages">Interaktionen zwischen priviligierten und nicht-priviligierten Seiten</a>.</p>
+
+<p>Unabhängig davon, wo das Dokument herkommt, kannst du weiter Beschränken, was es kann, indem du Eigenschaften zum Dokumentenhalter - auch bekannt als docshell - zuweist.</p>
+
+<p><code>frame.docShell.allowImages = false;<br>
+ frame.docShell.allowJavascript = false;<br>
+ frame.docShell.allowPlugins = false;</code></p>
+
+<p>Es gibt mehr Beispiele in dem oben gelisteten Dokument. Unter gewissen Umständen möchte man Code in der Erweiterung ausführen, allerdings solltest du ihm eingeschränkte Rechte geben. Einer der besten Wege das zu tun ist <a class="internal" href="/en/Components.utils.evalInSandbox" title="en/Components.utils.evalInSandbox"><code>Components.utils.evalInSandbox()</code></a> zu nutzen. Beachte, dass Objekte, die an die Sandbox weitergegeben werden, eingeschränkt sind, aber solche, die wieder herauskommen es nicht sind. Nimm Bezug auf den Artikel, um herauszufinden, wie du solche Tücken vermeidest. Für weitere Informationen, siehe den Abschnitt evalInSandbox.</p>
+
+<h2 id="Die_Sidebar_Ein_Anwendungsfall">Die Sidebar: Ein Anwendungsfall</h2>
+
+<p>Die Sidebar in Firefox ist dafür gestaltet, sowohl chrome (priviligierte) Inhalte, als auch Web (nichtpriviligierte) Inhalte zu beinhalten - letzteres in Form von Webseiten. Diese Webseiten können von einem Server oder von lokalen HTML Dateien, die mit der Erweiterung gekommen sind, stammen. Für Seiten, die vom Server kommen, musst du Schritte vornehmen, um zu sicherzustellen, dass die Inhalte nicht in den Browser rückrufen und Schadcode ausführen. Hauptsächlich wird dies bewerkstelligt, indem man ein Iframe- oder Browserelement in der Sidebar erstellt und dort die Inhalte lädt. Gebe dem Inhalt ein type="content" Attribut, welches den Code im Wesentlichen sandboxed und alle Rückrufe direkt nach chrome blockiert.</p>
+
+<h2 id="eval()_in_einer_Erweiterung_nutzen">eval() in einer Erweiterung nutzen</h2>
+
+<p>Das Nutzen der eingebauten JavaScript Funktion {{jsxref("eval")}} ist im Kontext von Erweiterungen verpönt. Während es einige Fälle gibt, in denen die Nutzung legitim ist, gibt es meist sicherere Alternativen. <a class="external" href="http://adblockplus.org/blog/five-wrong-reasons-to-use-eval-in-an-extension" title="http://adblockplus.org/blog/five-wrong-reasons-to-use-eval-in-an-extension">Dieser Blogeintrag</a> bietet einige exzellente Beispiele, warum man eval() <strong>nicht </strong>nutzen sollte.</p>
+
+<h2 id="Gesandboxte_HTTP_Verbindungen">Gesandboxte HTTP Verbindungen</h2>
+
+<p>Der Hauptzweck von gesandboxten HTTP Verbindungen ist es, mit einem Webdienst zu kommunizieren, ohne mit im Browser zu der Website/dem Service gesetzten Cookies zu interferieren. Wenn Du zum Beispiel Fotos oder andere Daten von einer photo sharing Seite lädst, kannst du die Verbindungen sandboxen, sodass normales Surfen des Nutzers auf der Webseite nicht beeinflusst wird. Für einen echten Anwendungsfall, siehe <a class="external" href="http://weblogs.mozillazine.org/doron/archives/2006/06/creating_sandboxed_http_connec.html" title="http://weblogs.mozillazine.org/doron/archives/2006/06/creating_sandboxed_http_connec.html">diesen Blogeintrag</a>.</p>
+
+<h2 id="Umgang_mit_Logins_und_Passwörtern">Umgang mit Logins und Passwörtern</h2>
+
+<p>Es gibt viele Möglichkeiten, Daten in Firefox zu speichern, aber für Logins und Passwörter, solltest Du den <a class="internal" href="/en/XPCOM_Interface_Reference/Using_nsILoginManager" title="en/Using nsILoginManager">Login Manager</a> nutzen. Das ist der gleiche Speicher, welcher Logins von Webseiten beinhaltet und Passwörter können nur abgerufen werden, indem die Kombination von Seite/Username dem Author bekannt sind. Die Gepflogenheit für Erweiterungen ist es, eine chrome URL als den Seitenidentifikator zu nutzen, um Konflikte mit Logins für Seiten zu verhindern. Es könnte der Fall sein, dass deine Erweiterung ein anderes Werkzeug oder andere Werkzeuge für Dienste auf deiner Seite anbietet.</p>
+
+<p>Diese Herangehensweise ist vorzuziehen, da es den Nutzern eine gewohnte Oberfläche für die Interaktion mit Logins über den <a class="external" href="https://support.mozilla.org/de/kb/passworter-verwalten-speichern-loeschen-aendern" title="http://support.mozilla.com/en-US/kb/Remembering+passwords">Firefox Passwort Manager</a> bietet. Wenn Nutzer Logins über die "Neueste Chronik löschen" Option säubern, wird das die Daten deiner Erweiterung miteinbeziehen.</p>
+
+<h2 id="APIs_und_Umgang_mit_anderen_Daten">APIs und Umgang mit anderen Daten</h2>
+
+<p>Web Inhalte sind mehr als nur Seiten, und mehr und mehr Add-Ons interagieren über das Application Programming Interfae (API) mit Webdiensten.</p>
+
+<ul>
+ <li>API Provider sollten das HTTPS Protokoll nutzen, welches besseren Schutz für Daten über das Netzwerk bietet.</li>
+ <li>JSON ist ein beliebtes Datenformat für Antwortenformate von Webdienste geworden. Gehe sicher, <a class="internal" href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/JSON" title="En/Using native JSON">Natives JSON nutzen</a> zu lesen, um den richten Umgang damit herauszufinden.</li>
+ <li>APIs können nicht mit selbst-signierten Zertifikaten genutzt werden.</li>
+</ul>
+
+<h2 id="Remote_Javascript_und_-Inhalte">Remote Javascript und -Inhalte</h2>
+
+<p>Es gibt eine Zahl von Arten, wie Remotescripte in Erweiterungen genutzt werden können. Sie können in Inhalten eingebettet oder in Intervallen heruntergeladen werden.</p>
+
+<p>Nicht-chrome URLs in chrome XUL oder HTML, so wie im folgenden Beispiel sind <strong>nicht</strong> erlaubt:</p>
+
+<p><code>&lt;script type="text/javascript" src="<span class="nowiki">http://mysite.greatsite.com/js/wow-content.js</span>" /&gt;</code></p>
+
+<p>Im Allgemeinen sind Skripte von Remotequellen, die im Kontext von chrome laufen, nicht akzeptabel, da die Quelle der Skripte nie zu 100% garantiert werden kann und sie für Man-In-The-Middle Attacken empfindlich sind. Die einzig legitime Umgebung für Remoteskripte ist es, in einer Sandbox zu laufen. Für mehr Informationen, siehe die Sektion <a class="internal" href="#evalInSandbox" title="en/Security best practices in extensions#evalInSandbox"><code>evalInSandbox()</code></a>.</p>
+
+<h2 id="evalInSandbox">evalInSandbox</h2>
+
+<p>Das <a class="internal" href="/en/Components.utils.evalInSandbox" title="en/Components.utils.evalInSandbox">evalInSandbox Dokument</a> erklärt die Funktion ziemlich gut, also wird es hier keine Wiederholung geben. Die Nützlichkeit und Kraft der Funktionsweise wird von der beliebten Erweiterung <a class="link-https" href="https://addons.mozilla.org/de/firefox/addon/748" title="https://addons.mozilla.org/de/firefox/addon/748">Greasemonkey</a> veranschaulich, welche unter der Prämisse arbeitet, dass Skripte heruntergeladen und gespeichert werden, um im Kontext von Webinhalten via der Sandbox injiziert zu werden. Viele Erweiterungen nutzen den <a class="external external-icon" href="http://arantius.com/misc/greasemonkey/script-compiler" title="http://arantius.com/misc/greasemonkey/script-compiler">Greasemonkey compiler</a>, um die Funktion aus Bequemlichkeit in ihrer Erweiterung zu bündeln. Wenn Du dich entscheidest das zu tun, sei vorsichtig beim Editieren von gebündelten Dateien, insofern als, gut durchdachte Sicherheitsarchitekturen nicht zu verletzen.</p>
+
+<h2 id="Drittanbieter_JavaScript">Drittanbieter JavaScript</h2>
+
+<p>Im Kontext von Webseiten, ist das Nutzen von JavaScripten, welche von anderen geschrieben wurden sehr geläufig. Auch in Add-Ons ist es nicht unbekannt und kann einen nützlichen Weg darstellen, um Codewiederholungen zu vermeiden und die Entwicklung zu beschleunigen. <a class="external" href="http://adblockplus.org/blog/third-party-javascript-yes-it-is-a-security-risk">Dieser Artikel</a> ist über Webseiten, aber liefert einige Einsichten in generelle Risiken. Wenn Du andere Skripte einbettest, gibt es eine Reihe von Dingen, die du tun kannst, um ihre Integrität und Sicherheit für Nutzer zu gewährleisten. Als erstes, es immer von einer glaubwürdigen Quelle zu beziehen. Eine andere Sache, die du tun solltest, ist das Namespacen, nur für den Fall, dass andere Add-Ons es inkludieren. Zum Beispiel, wenn Du jQuery nutzt, gibt es da <a class="external external-icon" href="http://docs.jquery.com/Using_jQuery_with_Other_Libraries" title="http://docs.jquery.com/Using_jQuery_with_Other_Libraries"><code>jQuery.noConflict()</code></a>.</p>
+
+<h2 id="Fazit">Fazit</h2>
+
+<p>Sicherheit kann nicht als selbstverständlich angesehen werden und jede Veröffentlichung deines Add-Ons, sollte es eine neue Sicherheitsprüfung geben. Ein guter Ort, um mit Mozillas Sicherheitsmeldungen und Sicherheitsdiskussionen mitzuhalten, ist im  <a class="external external-icon" href="http://blog.mozilla.com/security/" title="http://blog.mozilla.com/security/">Mozilla Security Blog</a>.</p>
diff --git a/files/de/mozilla/add-ons/themes/obsolete/index.html b/files/de/mozilla/add-ons/themes/obsolete/index.html
new file mode 100644
index 0000000000..d420b6ebf0
--- /dev/null
+++ b/files/de/mozilla/add-ons/themes/obsolete/index.html
@@ -0,0 +1,10 @@
+---
+title: Obsolete
+slug: Mozilla/Add-ons/Themes/Obsolete
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Mozilla/Add-ons/Themes/Obsolete
+---
+<p>This page collects theme docs that we don't expect will ever be updated, but which we're keeping for the time being as potential source material for updated docs.</p>
+<p>{{ ListSubPages ("/en-US/Add-ons/Themes/Obsolete", 5) }}</p>
diff --git a/files/de/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html b/files/de/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html
new file mode 100644
index 0000000000..04bd9d08b5
--- /dev/null
+++ b/files/de/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html
@@ -0,0 +1,133 @@
+---
+title: Aufbau einer WebExtension
+slug: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension
+translation_of: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension
+---
+<div>{{AddonSidebar}}</div>
+
+<p>Eine Extension (Erweiterung) beinhaltet eine Sammlung von Dateien, gepackt für die Verbreitung and Installation. In diesem Artikel, gehen wir kurz auf Dateien ein, die vorhanden sein könnten.</p>
+
+<h2 id="manifest.json">manifest.json</h2>
+
+<p>"manifest.json" ist die einzige Datei, die in jeder Extension vorhanden sein muss. Sie enthält die grundlegenden Metadaten wie Name, Version und benötigte Genehmigungen. Außerdem verweist sie auf andere Dateien der Extension.</p>
+
+<p>Dieses Manifest kann auch Zeiger zu mehreren anderen Dateitypen haben:</p>
+
+<ul>
+ <li><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">Hintergrundseiten</a>: führen Langzeitprozesse aus</li>
+ <li>Icons für die Extension und jegliche Buttons können festgelegt werden.</li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Sidebars_popups_options_pages">Sidebars, Pop-ups und Options-Pages</a>: HTML-Dokumente, die Inhalte für unterschiedliche Komponenten der Benutzeroberfläche bereitstellen.</li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Content_scripts">Content-Scripts</a>: JavaScript in Ihrer Erweiterung, das in Webseiten eingefügt wird.</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13669/webextension-anatomy.png" style="display: block; height: 581px; margin-left: auto; margin-right: auto; width: 600px;"></p>
+
+<p>Für weitere Einzelheiten gehe auf <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a>.</p>
+
+<p>Neben den vom Manifest referenzierten Seiten, kann eine Extension zusätzlche <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Extension_pages">Extension pages</a> mit unterstützenden Dateien enthalten.</p>
+
+<h2 id="Hintergrundskripte">Hintergrundskripte</h2>
+
+<p>Extensions müssen oft langzeitig ihren Zustand aufrechterhalten oder Operationen, unabhängig der Lebensdauer von irgendwelchen speziellen Webseiten oder Browserfenstern, durchführen. Dafür gibt es Hintergrundskripte (background scripts).</p>
+
+<p>Hintergrundskripte werden geladen, sobald die Extension geladen ist und laufen bis die Extension deaktiviert oder deinstalliert wird. Du kannst alles aus den <a href="/en-US/Add-ons/WebExtensions/API">WebExtension APIs</a> im Skript benutzen, solange du die notwendigen <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">Berechtigungen</a> abgefragt hast.</p>
+
+<h3 id="Hintergrundskripte_festlegen">Hintergrundskripte festlegen</h3>
+
+<p>Du kannst ein Hintergrundskript einbinden in dem du den <code>background</code>-Key in "manifest.json" benutzt:</p>
+
+<pre class="brush: json">// manifest.json
+
+"background": {
+  "scripts": ["background-script.js"]
+}</pre>
+
+<p>Du kannst mehrere background scripts angeben: wenn du sie im selben Kontext laufen lässt, so wie mehrere Skripts, die in eine einzelne Seite geladen werden.</p>
+
+<h3 id="Hintergrundskript-Umgebung">Hintergrundskript-Umgebung</h3>
+
+<h4 id="DOM_APIs">DOM APIs</h4>
+
+<p>Hintergrundskripte laufen im Rahmen spezieller Seiten genannt 'background pages' (Hintergrundseiten). Diese geben ihnen ein globales <code><a href="/en-US/docs/Web/API/Window">window</a></code>, samt der vollständigen Standard DOM APIs, die von diesem Objekt bereitgestellt werden.</p>
+
+<p>Du musst deine Hintergrundseite nicht bereitstellen. Wenn du dein Hintergrundskript hinzufügst, wird eine leere Hintergrundseite für dich erstellt.</p>
+
+<p>Dennoch kannst du deine Hintergrundseite auch als separate HTML-Datei erstellen:</p>
+
+<pre class="brush: json">// manifest.json
+
+"background": {
+  "page": "background-page.html"
+}</pre>
+
+<h4 id="WebExtension_APIs">WebExtension APIs</h4>
+
+<p>Hintergrundskripte können alles aus den <a href="/en-US/Add-ons/WebExtensions/API">WebExtension APIs</a> im Skript nutzen, solange deren Extension die notwendigen <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">Berechtigungen</a> hat.</p>
+
+<h4 id="Cross-origin_access">Cross-origin access</h4>
+
+<p>Hintergrundskripte können XHR-Anfragen an alle Hosts machen, für die sie <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">host permissions</a> haben.</p>
+
+<h4 id="Web_content">Web content</h4>
+
+<p>Hintergrundskripte haben keinen direkten Zugriff auf Webseiten. Sie können jedoch <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">Content-Scripts</a> in Webseiten laden und <a href="/en-US/Add-ons/WebExtensions/Content_scripts#Communicating_with_background_scripts">mit ihnen über message-passing API kommunizieren</a>.</p>
+
+<h4 id="Content_security_policy">Content security policy</h4>
+
+<p>Hintergrundskripte sind beschränkt in einigen potenziell gefährlichen Operationen, wie dem Benutzen von <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a></code>, durch ein Sicherheitskonzept. Für mehr Informationen siehe <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">Content Security Policy</a>.</p>
+
+<h2 id="Sidebars_Pop-ups_Options-Pages">Sidebars, Pop-ups, Options-Pages</h2>
+
+<p>Deine Extension kann unterschiedliche Benutzeroberflächenkomponenten enthalten, deren Inhalt wird durch ein HTML-Dokument festgelegt:</p>
+
+<ul>
+ <li>eine <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars">Sidebar</a> ist ein Element, das auf der linken Seite des Browserfensters neben der Webseite angezeigt wird</li>
+ <li>ein <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">Pop-up</a> ist ein Dialogfenster, dass du anzeigen kannst, wenn der Benutzer auf einen <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_action">Button der Werkzeugleiste</a> oder der <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Page_actions">Adressleiste </a>klickt</li>
+ <li>eine <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages">Options-Page</a> ist eine Seite, die gezeigt wird, wenn der Benutzer deine Add-on-Einstellungen im browser-eigenen Add-ons-Manager abruft.</li>
+</ul>
+
+<p>Für jeden dieser Komponenten, erstellst du eine HTML-Datei und verweist auf sie über ein spezielles Attribut in <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a>. Die HTML-Datei kann, wie eine normale Webseite, CSS- und JavaScript-Dateien einbinden.</p>
+
+<p>Sie alle sind Arten von <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages">Extension pages</a>, und nicht wie eine normale Webseite, dein JavaScript kann dieselben WebExtension APIs wie dein Hintergrundskript benutzen. Sie können sogar direkt Variabeln aus der Hintergrundseite, mit {{WebExtAPIRef("runtime.getBackgroundPage()")}}, abrufen.</p>
+
+<h2 id="Extension_pages">Extension pages</h2>
+
+<p>Du kannst außerdem HTML-Dokumente in deine Extension mit einbeziehen, die nicht vordefinierten Benutzeroberflächenkomponenten beigefügt wurden. Anders als die Dokumente, die du für Sidebars, Pop-ups, oder Option-Pages bereitstellen könntest, haben diese keinen Zugang zu "manifest.json". Dennoch haben sie Zugriff auf dieselben WebExtension APIs wie dein Hintergrundskript.</p>
+
+<p>Du lädst eine solche Seite normalerweise mit {{WebExtAPIRef("windows.create()")}} oder {{WebExtAPIRef("tabs.create()")}}.</p>
+
+<p>Siehe <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages">Extension pages</a> um mehr zu lernen.</p>
+
+<h2 id="Content_scripts">Content scripts</h2>
+
+<p>Benutze Content-Scripts um Webseiten abzurufen und zu manipulieren. Content-Scripts werden in Webseiten geladen und laufen im Rahmen der jeweiligen Seite.</p>
+
+<p>Content-Scripts sind von der Erweiterung bereitgestellte Skripts, die im Kontext einer Webseite laufen; das unterscheidet sie von Skripts, die von der Seite selber geladen werden, einschließlich derer, die in {{HTMLElement("script")}}-Elementen innerhalb der Seite bereitgestellt werden.</p>
+
+<p>Content-Scripts können das Seiten-DOM sehen und manipulieren, so wie normale, von der Seite geladene Skripte.</p>
+
+<p>Im Gegensatz zu normalen Skripten können sie:</p>
+
+<ul>
+ <li>domainübergreifende XHR-Anfragen machen.</li>
+ <li>eine kleine Teilmenge der <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API">WebExtension APIs</a> benutzen.</li>
+ <li>Nachrichten mit ihren Hintergrundskripten austauschen und auf diesem Web indirekt die gesamten WebExtension APIs abrufen.</li>
+</ul>
+
+<p>Content-Scripts können nicht direkt normale Skripte der Seite abrufen, aber mit ihnen Nachrichten austauschen über die übliche <code><a href="/en-US/docs/Web/API/Window/postMessage">window.postMessage()</a></code> API.</p>
+
+<p>Wenn wir gewöhnlich über Content-Scripts sprechen, dann im Bezug auf JavaScript. Du kannst jedoch auch CSS zu einer Webseite über das selbe System hinzufügen.</p>
+
+<p>Sieh dir <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> an um mehr zu erfahren.</p>
+
+<h2 id="Web_accessible_resources">Web accessible resources</h2>
+
+<p>Zugängliche Webressourcen(Web accessible resources) sind Ressourcen wie Bilder, HTML, CSS, und JavaScript, die du in die Extension einbindest und für Content-Scripts und Skripten der Seite zugänglich machen möchtest. Ressourcen, die web-zugänglich gemacht werden, können von Skripten der Seite und Content-Scripts über ein spezielles URI-Schema referenziert werden.</p>
+
+<p>Wenn zum Beispiel ein Content-Script Bilder in eine Webseite einfügen will, kannst du sie in der Extension beifügen und web-zugänglich machen. Dann könnte das Content-Script <code><a href="/en-US/docs/Web/HTML/Element/img">img</a></code>-Tags erzeugen und hinzufügen, die über das <code>src</code>-Attribut auf die Bilder verweisen.</p>
+
+<p>Um mehr zu lernen, sieh die Dokumentation für den <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources">web_accessible_resources</a> manifest.json key.</p>
+
+<p> </p>
+
+<p> </p>
diff --git a/files/de/mozilla/add-ons/webextensions/api/browseraction/index.html b/files/de/mozilla/add-ons/webextensions/api/browseraction/index.html
new file mode 100644
index 0000000000..184dccf3d6
--- /dev/null
+++ b/files/de/mozilla/add-ons/webextensions/api/browseraction/index.html
@@ -0,0 +1,135 @@
+---
+title: browserAction
+slug: Mozilla/Add-ons/WebExtensions/API/browserAction
+tags:
+  - API
+  - Add-ons
+  - Extensions
+  - Interface
+  - NeedsTranslation
+  - Non-standard
+  - Reference
+  - TopicStub
+  - WebExtensions
+  - browserAction
+translation_of: Mozilla/Add-ons/WebExtensions/API/browserAction
+---
+<div>{{AddonSidebar}}</div>
+
+<p>Adds a button to the browser's toolbar.</p>
+
+<p>A <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_action">browser action</a> is a button in the browser's toolbar.</p>
+
+<p>You can associate a popup with the button. The popup is specified using HTML, CSS and JavaScript, just like a normal web page. JavaScript running in the popup gets access to all the same WebExtension APIs as your background scripts, but its global context is the popup, not the current page displayed in the browser. To affect web pages you need to communicate with them via <a href="/en-US/Add-ons/WebExtensions/Modify_a_web_page#Messaging">messages</a>.</p>
+
+<p>If you specify a popup, it will be shown — and the content will be loaded — when the user clicks the icon. If you do not specify a popup, then when the user clicks the icon an event is dispatched to your extension.</p>
+
+<p>You can define most of a browser action's properties declaratively using the <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> key in the manifest.json.</p>
+
+<p>With the <code>browserAction</code> API, you can:</p>
+
+<ul>
+ <li>use {{WebExtAPIRef("browserAction.onClicked")}} to listen for clicks on the icon.</li>
+ <li>get and set the icon's properties — icon, title, popup, and so on. You can get and set these globally across all tabs, or for a specific tab by passing the tab ID as an additional argument.</li>
+</ul>
+
+<h2 id="Types">Types</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("browserAction.ColorArray")}}</dt>
+ <dd>An array of four integers in the range 0-255 defining an RGBA color.</dd>
+ <dt>{{WebExtAPIRef("browserAction.ImageDataType")}}</dt>
+ <dd>Pixel data for an image. Must be an <code><a href="/en-US/docs/Web/API/ImageData">ImageData</a></code> object (for example, from a {{htmlelement("canvas")}} element).</dd>
+</dl>
+
+<h2 id="Functions">Functions</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("browserAction.setTitle()")}}</dt>
+ <dd>Sets the browser action's title. This will be displayed in a tooltip.</dd>
+ <dt>{{WebExtAPIRef("browserAction.getTitle()")}}</dt>
+ <dd>Gets the browser action's title.</dd>
+ <dt>{{WebExtAPIRef("browserAction.setIcon()")}}</dt>
+ <dd>Sets the browser action's icon.</dd>
+ <dt>{{WebExtAPIRef("browserAction.setPopup()")}}</dt>
+ <dd>Sets the HTML document to be opened as a popup when the user clicks on the browser action's icon.</dd>
+ <dt>{{WebExtAPIRef("browserAction.getPopup()")}}</dt>
+ <dd>Gets the HTML document set as the browser action's popup.</dd>
+ <dt>{{WebExtAPIRef("browserAction.openPopup()")}}</dt>
+ <dd>Open the browser action's popup.</dd>
+ <dt>{{WebExtAPIRef("browserAction.setBadgeText()")}}</dt>
+ <dd>Sets the browser action's badge text. The badge is displayed on top of the icon.</dd>
+ <dt>{{WebExtAPIRef("browserAction.getBadgeText()")}}</dt>
+ <dd>Gets the browser action's badge text.</dd>
+ <dt>{{WebExtAPIRef("browserAction.setBadgeBackgroundColor()")}}</dt>
+ <dd>Sets the badge's background color.</dd>
+ <dt>{{WebExtAPIRef("browserAction.getBadgeBackgroundColor()")}}</dt>
+ <dd>Gets the badge's background color.</dd>
+ <dt>{{WebExtAPIRef("browserAction.setBadgeTextColor()")}}</dt>
+ <dd>Sets the badge's text color.</dd>
+ <dt>{{WebExtAPIRef("browserAction.getBadgeTextColor()")}}</dt>
+ <dd>Gets the badge's text color.</dd>
+ <dt>{{WebExtAPIRef("browserAction.enable()")}}</dt>
+ <dd>Enables the browser action for a tab. By default, browser actions are enabled for all tabs.</dd>
+ <dt>{{WebExtAPIRef("browserAction.disable()")}}</dt>
+ <dd>Disables the browser action for a tab, meaning that it cannot be clicked when that tab is active.</dd>
+ <dt>{{WebExtAPIRef("browserAction.isEnabled()")}}</dt>
+ <dd>Checks whether the browser action is enabled or not.</dd>
+</dl>
+
+<h2 id="Events">Events</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("browserAction.onClicked")}}</dt>
+ <dd>Fired when a browser action icon is clicked. This event will not fire if the browser action has a popup.</dd>
+</dl>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("webextensions.api.browserAction")}}</p>
+
+<div class="hidden note">
+<p>The "Chrome incompatibilities" section is included from <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities"> https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities</a> using the <a href="/en-US/docs/Template:WebExtChromeCompat">WebExtChromeCompat</a> macro.</p>
+
+<p>If you need to update this content, edit <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities">https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities</a>, then shift-refresh this page to see your changes.</p>
+</div>
+
+<p>{{WebExtExamples("h2")}}</p>
+
+<div class="note"><strong>Acknowledgements</strong>
+
+<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/browserAction"><code>chrome.browserAction</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json"><code>browser_action.json</code></a> in the Chromium code.</p>
+
+<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p>
+</div>
+
+<div class="hidden">
+<pre>// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+</pre>
+</div>
diff --git a/files/de/mozilla/add-ons/webextensions/api/browseraction/setpopup/index.html b/files/de/mozilla/add-ons/webextensions/api/browseraction/setpopup/index.html
new file mode 100644
index 0000000000..2a4a40e794
--- /dev/null
+++ b/files/de/mozilla/add-ons/webextensions/api/browseraction/setpopup/index.html
@@ -0,0 +1,136 @@
+---
+title: browserAction.setPopup()
+slug: Mozilla/Add-ons/WebExtensions/API/browserAction/setPopup
+translation_of: Mozilla/Add-ons/WebExtensions/API/browserAction/setPopup
+---
+<div>{{AddonSidebar()}}</div>
+
+<p>Sets the HTML document that will be opened as a popup when the user clicks on the browser action's icon. Tabs without a specific popup will inherit the global popup, which defaults to the <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action"><code>default_popup</code></a> specified in the manifest.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox brush:js">browser.browserAction.setPopup(
+  details // object
+)
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>details</code></dt>
+ <dd><code>object</code>.</dd>
+ <dd>
+ <dl class="reference-values">
+  <dt><code>tabId</code>{{optional_inline}}</dt>
+  <dd><code>integer</code>. Sets the popup only for a specific tab. The popup is reset when the user navigates this tab to a new page.</dd>
+  <dt><code>windowId</code>{{optional_inline}}</dt>
+  <dd><code>integer</code>. Sets the popup only for the specified window.</dd>
+ </dl>
+
+ <dl class="reference-values">
+  <dt><code>popup</code></dt>
+  <dd>
+  <p><code>string</code> or <code>null</code>. The HTML file to show in a popup, specified as a URL.</p>
+
+  <p>This can point to a file packaged within the extension (for example, created using {{WebExtAPIRef("extension.getURL")}}), or a remote document (e.g. <code>https://example.org/</code>).</p>
+
+  <p>If an empty string (<code>""</code>) is passed here, the popup is disabled, and the extension will receive {{WebExtAPIRef("browserAction.onClicked")}} events.</p>
+
+  <p>If <code>popup</code> is <code>null</code>:</p>
+
+  <p>If <code>tabId</code> is specified, removes the tab-specific popup so that the tab inherits the global popup.</p>
+
+  <p>If <code>windowId</code> is specified, removes the window-specific popup so that the window inherits the global popup.</p>
+
+  <p>Otherwise it reverts the global popup to the default value.</p>
+  </dd>
+ </dl>
+ </dd>
+</dl>
+
+<ul>
+ <li>If <code>windowId</code> and <code>tabId</code> are both supplied, the function fails and the popup is not set.</li>
+ <li>If <code>windowId</code> and <code>tabId</code> are both omitted, the global popup is set.</li>
+</ul>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("webextensions.api.browserAction.setPopup",2)}}</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>This code adds a pair of context menu items that you can use to switch between two popups. Note that you'll need the "contextMenus" <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a> set in the extension's manifest to create context menu items.</p>
+
+<pre class="brush: js">function onCreated() {
+  if (browser.runtime.lastError) {
+    console.log("error creating item:" + browser.runtime.lastError);
+  } else {
+    console.log("item created successfully");
+  }
+}
+
+browser.contextMenus.create({
+  id: "popup-1",
+  type: "radio",
+  title: "Popup 1",
+  contexts: ["all"],
+  checked: true
+}, onCreated);
+
+browser.contextMenus.create({
+  id: "popup-2",
+  type: "radio",
+  title: "Popup 2",
+  contexts: ["all"],
+  checked: false
+}, onCreated);
+
+browser.contextMenus.onClicked.addListener(function(info, tab) {
+  if (info.menuItemId == "popup-1") {
+    browser.browserAction.setPopup({popup: "/popup/popup1.html"})
+  } else if (info.menuItemId == "popup-2") {
+    browser.browserAction.setPopup({popup: "/popup/popup2.html"})
+  }
+});</pre>
+
+<p>{{WebExtExamples}}</p>
+
+<div class="note"><strong>Acknowledgements</strong>
+
+<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/browserAction#method-setPopup"><code>chrome.browserAction</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json"><code>browser_action.json</code></a> in the Chromium code.</p>
+
+<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p>
+</div>
+
+<div class="hidden">
+<pre>// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+</pre>
+</div>
diff --git a/files/de/mozilla/add-ons/webextensions/api/commands/index.html b/files/de/mozilla/add-ons/webextensions/api/commands/index.html
new file mode 100644
index 0000000000..af45cea002
--- /dev/null
+++ b/files/de/mozilla/add-ons/webextensions/api/commands/index.html
@@ -0,0 +1,83 @@
+---
+title: commands
+slug: Mozilla/Add-ons/WebExtensions/API/commands
+translation_of: Mozilla/Add-ons/WebExtensions/API/commands
+---
+<div>{{AddonSidebar}}</div>
+
+<p>Verwenden Sie die Ausführungsbefehle der Benutzer, die Sie mit Hilfe des <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/commands"><code>Schlüssels commands</code> der manifest.json</a> registriert haben.</p>
+
+<h2 id="Typen">Typen</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("commands.Command")}}</dt>
+ <dd>Objekt, das einen Befehl repräsentiert. Es enthält die für den Befehl im <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/commands"><code>Schlüssel commands der </code>manifest.json</a> festgelegten Informationen.</dd>
+</dl>
+
+<h2 id="Funktionen">Funktionen</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("commands.getAll")}}</dt>
+ <dd>
+ <p>Stellt alle registrierten Befehle für diese Erweiterung zur Verfügung.</p>
+ </dd>
+ <dt>{{WebExtAPIRef("commands.reset")}}</dt>
+ <dd>
+ <p>Angegebene Befehlsbeschreibung und das Tastaturkürzel auf die im Manifest-Schlüssel angegebenen Werte zurücksetzen.</p>
+ </dd>
+ <dt>{{WebExtAPIRef("commands.update")}}</dt>
+ <dd>
+ <p>Beschreibung oder Tastenkürzel des angegebenen Befehls ändern.</p>
+ </dd>
+</dl>
+
+<h2 id="Ereignisse">Ereignisse</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("commands.onCommand")}}</dt>
+ <dd>
+ <div>Wird ausgelöst, wenn ein Befehl mit Hilfe seines zugewiesenen Tastenkürzels ausgeführt wird.</div>
+ </dd>
+</dl>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{Compat("webextensions.api.commands")}} {{WebExtExamples("h2")}}</p>
+
+<div class="note"><strong>Danksagungen</strong>
+
+<p>Diese API basiert auf der API <a href="https://developer.chrome.com/extensions/commands"><code>chrome.commands</code></a> von Chromium.</p>
+
+<p>Die Kompatibilitätsdaten von Microsoft Edge werden von der Microsoft Corporation bereitgestellt und stehen hier unter der Lizenz Creative Commons Attribution 3.0 United States.</p>
+</div>
+
+<div class="hidden">
+<pre>// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+</pre>
+</div>
diff --git a/files/de/mozilla/add-ons/webextensions/api/downloads/index.html b/files/de/mozilla/add-ons/webextensions/api/downloads/index.html
new file mode 100644
index 0000000000..7363cde811
--- /dev/null
+++ b/files/de/mozilla/add-ons/webextensions/api/downloads/index.html
@@ -0,0 +1,123 @@
+---
+title: downloads
+slug: Mozilla/Add-ons/WebExtensions/API/downloads
+translation_of: Mozilla/Add-ons/WebExtensions/API/downloads
+---
+<div>0ü</div>
+
+<p>Enables extensions to interact with the browser's download manager. You can use this API module to download files, cancel, pause, resume downloads, and show downloaded files in the file manager.</p>
+
+<p>To use this API you need to have the "downloads" <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#API_permissions">API permission</a> specified in your <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> file.</p>
+
+<h2 id="Types">Types</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("downloads.FilenameConflictAction")}}</dt>
+ <dd>Defines options for what to do if the name of a downloaded file conflicts with an existing file.</dd>
+ <dt>{{WebExtAPIRef("downloads.InterruptReason")}}</dt>
+ <dd>Defines a set of possible reasons why a download was interrupted.</dd>
+ <dt>{{WebExtAPIRef("downloads.DangerType")}}</dt>
+ <dd>Defines a set of common warnings of possible dangers associated with downloadable files.</dd>
+ <dt>{{WebExtAPIRef("downloads.State")}}</dt>
+ <dd>Defines different states that a current download can be in.</dd>
+ <dt>{{WebExtAPIRef("downloads.DownloadItem")}}</dt>
+ <dd>Represents a downloaded file.</dd>
+ <dt>{{WebExtAPIRef("downloads.StringDelta")}}</dt>
+ <dd>Represents the difference between two strings.</dd>
+ <dt>{{WebExtAPIRef("downloads.DoubleDelta")}}</dt>
+ <dd>Represents the difference between two doubles.</dd>
+ <dt>{{WebExtAPIRef("downloads.BooleanDelta")}}</dt>
+ <dd>Represents the difference between two booleans.</dd>
+ <dt>{{WebExtAPIRef("downloads.DownloadTime")}}</dt>
+ <dd>Represents the time a download took to complete.</dd>
+ <dt>{{WebExtAPIRef("downloads.DownloadQuery")}}</dt>
+ <dd>Defines a set of parameters that can be used to search the downloads manager for a specific set of downloads.</dd>
+</dl>
+
+<h2 id="Functions">Functions</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("downloads.download()")}}</dt>
+ <dd>Downloads a file, given its URL and other optional preferences.</dd>
+ <dt>{{WebExtAPIRef("downloads.search()")}}</dt>
+ <dd>Queries the {{WebExtAPIRef("downloads.DownloadItem", "DownloadItems")}} available in the browser's downloads manager, and returns those that match the specified search criteria.</dd>
+ <dt>{{WebExtAPIRef("downloads.pause()")}}</dt>
+ <dd>Pauses a download.</dd>
+ <dt>{{WebExtAPIRef("downloads.resume()")}}</dt>
+ <dd>Resumes a paused download.</dd>
+ <dt>{{WebExtAPIRef("downloads.cancel()")}}</dt>
+ <dd>Cancels a download.</dd>
+ <dt>{{WebExtAPIRef("downloads.getFileIcon()")}}</dt>
+ <dd>Retrieves an icon for the specified download.</dd>
+ <dt>{{WebExtAPIRef("downloads.open()")}}</dt>
+ <dd>Opens the downloaded file with its associated application.</dd>
+ <dt>{{WebExtAPIRef("downloads.show()")}}</dt>
+ <dd>Opens the platform's file manager application to show the downloaded file in its containing folder.</dd>
+ <dt>{{WebExtAPIRef("downloads.showDefaultFolder()")}}</dt>
+ <dd>Opens the platform's file manager application to show the default downloads folder.</dd>
+ <dt>{{WebExtAPIRef("downloads.erase()")}}</dt>
+ <dd>Erases matching {{WebExtAPIRef("downloads.DownloadItem", "DownloadItems")}} from the browser's download history, without deleting the downloaded files from disk.</dd>
+ <dt>{{WebExtAPIRef("downloads.removeFile()")}}</dt>
+ <dd>Removes a downloaded file from disk, but not from the browser's download history.</dd>
+ <dt>{{WebExtAPIRef("downloads.acceptDanger()")}}</dt>
+ <dd>Prompts the user to accept or cancel a dangerous download.</dd>
+ <dt>{{WebExtAPIRef("downloads.drag()")}}</dt>
+ <dd>Initiates dragging the downloaded file to another application.</dd>
+ <dt>{{WebExtAPIRef("downloads.setShelfEnabled()")}}</dt>
+ <dd>Enables or disables the gray shelf at the bottom of every window associated with the current browser profile. The shelf will be disabled as long as at least one extension has disabled it.</dd>
+</dl>
+
+<h2 id="Events">Events</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("downloads.onCreated")}}</dt>
+ <dd>Fires with the {{WebExtAPIRef("downloads.DownloadItem", "DownloadItem")}} object when a download begins.</dd>
+ <dt>{{WebExtAPIRef("downloads.onErased")}}</dt>
+ <dd>Fires with the <code>downloadId</code> when a download is erased from history.</dd>
+ <dt>{{WebExtAPIRef("downloads.onChanged")}}</dt>
+ <dd>When any of a {{WebExtAPIRef("downloads.DownloadItem", "DownloadItem")}}'s properties except <code>bytesReceived</code> changes, this event fires with the <code>downloadId</code> and an object containing the properties that changed.</dd>
+</dl>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("webextensions.api.downloads")}}</p>
+
+<p>{{WebExtExamples("h2")}}</p>
+
+<div class="note"><strong>Acknowledgements</strong>
+
+<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/downloads"><code>chrome.downloads</code></a> API.</p>
+
+<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p>
+</div>
+
+<div class="hidden">
+<pre>// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+</pre>
+</div>
diff --git a/files/de/mozilla/add-ons/webextensions/api/index.html b/files/de/mozilla/add-ons/webextensions/api/index.html
new file mode 100644
index 0000000000..1a500cdc0c
--- /dev/null
+++ b/files/de/mozilla/add-ons/webextensions/api/index.html
@@ -0,0 +1,51 @@
+---
+title: JavaScript APIs
+slug: Mozilla/Add-ons/WebExtensions/API
+tags:
+  - NeedsTranslation
+  - TopicStub
+  - WebExtensions
+translation_of: Mozilla/Add-ons/WebExtensions/API
+---
+<div>{{AddonSidebar}}</div>
+
+<div>
+<p>JavaScript APIs for WebExtensions can be used inside the extension's <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">background scripts</a> and in any other documents bundled with the extension, including <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_action">browser action</a> or <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Page_actions">page action</a> popups, <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Sidebars">sidebars</a>, <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Options_pages">options pages</a>, or <a href="/en-US/Add-ons/WebExtensions/manifest.json/chrome_url_overrides">new tab pages</a>. A few of these APIs can also be accessed by an extension's <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Content_scripts">content scripts</a> (see the <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_scripts#WebExtension_APIs">list in the content script guide</a>).</p>
+
+<p>To use the more powerful APIs you need to <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions">request permission</a> in your extension's manifest.json.</p>
+
+<p>You can access the APIs using the <code>browser</code> namespace:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">logTabs</span><span class="punctuation token">(</span>tabs<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>tabs<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">query</span><span class="punctuation token">(</span><span class="punctuation token">{</span>currentWindow<span class="punctuation token">:</span> <span class="keyword token">true</span><span class="punctuation token">}</span><span class="punctuation token">,</span> logTabs<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+</div>
+
+<div>
+<p>Many of the APIs are asynchronous, returning a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">logCookie</span><span class="punctuation token">(</span>c<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>c<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">function</span> <span class="function token">logError</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">var</span> setCookie <span class="operator token">=</span> browser<span class="punctuation token">.</span>cookies<span class="punctuation token">.</span><span class="keyword token">set</span><span class="punctuation token">(</span>
+  <span class="punctuation token">{</span>url<span class="punctuation token">:</span> <span class="string token">"https://developer.mozilla.org/"</span><span class="punctuation token">}</span>
+<span class="punctuation token">)</span><span class="punctuation token">;</span>
+setCookie<span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span>logCookie<span class="punctuation token">,</span> logError<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+</div>
+
+<div>
+<p>Note that this is different from Google Chrome's extension system, which uses the <code>chrome</code> namespace instead of <code>browser</code>, and which uses callbacks instead of promises for asynchronous functions. As a porting aid, the Firefox implementation of WebExtensions APIs supports <code>chrome</code> and callbacks as well as <code>browser</code> and promises. Mozilla has also written a polyfill which enables code that uses <code>browser</code> and promises to work unchanged in Chrome: <a class="external external-icon" href="https://github.com/mozilla/webextension-polyfill">https://github.com/mozilla/webextension-polyfill</a>.</p>
+
+<p>Microsoft Edge uses the <code>browser</code> namespace, but doesn't yet support promise-based asynchronous APIs. In Edge, for the time being, asynchronous APIs must use callbacks.</p>
+
+<p>Not all browsers support all the APIs: for the details, see <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">Browser support for JavaScript APIs</a>.</p>
+</div>
+
+<div>{{SubpagesWithSummaries}}</div>
diff --git a/files/de/mozilla/add-ons/webextensions/api/lesezeich/index.html b/files/de/mozilla/add-ons/webextensions/api/lesezeich/index.html
new file mode 100644
index 0000000000..7c43bda2af
--- /dev/null
+++ b/files/de/mozilla/add-ons/webextensions/api/lesezeich/index.html
@@ -0,0 +1,121 @@
+---
+title: Lesezeichen
+slug: Mozilla/Add-ons/WebExtensions/API/Lesezeich.
+translation_of: Mozilla/Add-ons/WebExtensions/API/bookmarks
+---
+<div>{{AddonSidebar}}</div>
+
+<p>Die <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a> {{WebExtAPIRef("bookmarks")}} API erlaubt es einer Erweiterung mit dem Lesezeichensystem des Browsers interagieren und dieses zu manipulieren. Sie können die API verwenden, um für Seiten Lesezeichen zu setzen, vorhandene Lesezeichen abzurufen und Lesezeichen zu bearbeiten, zu entfernen und zu organisieren.</p>
+
+<p>Um diese API zu verwenden, muss die Erweiterung die <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">Berechtigung</a> "Lesezeichen" in der <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a></code> Datei besitzen.</p>
+
+<h2 id="Types">Types</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("bookmarks.BookmarkTreeNodeUnmodifiable")}}</dt>
+ <dd>Ein {{jsxref("String")}} enum, das angibt, warum ein Lesezeichen oder ein Ordner unmodifizierbar ist.</dd>
+ <dt>{{WebExtAPIRef("bookmarks.BookmarkTreeNode")}}</dt>
+ <dd>Stellt ein Lesezeichen oder einen Ordner im Lesezeichenbaum dar.</dd>
+ <dt>{{WebExtAPIRef("bookmarks.CreateDetails")}}</dt>
+ <dd>Enthält Informationen, die bei der Erstellung eines neuen Lesezeichens an die {{WebExtAPIRef("bookmarks.create()")}} Funktion übergeben werden.</dd>
+</dl>
+
+<h2 id="Functions">Functions</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("bookmarks.create()")}}</dt>
+ <dd>Erstellt ein Lesezeichen oder Ordner.</dd>
+ <dt>{{WebExtAPIRef("bookmarks.get()")}}</dt>
+ <dd>Ruft eine oder mehrere {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}} ab und übergibt eine Lesezeichen-ID oder ein Array von Lesezeichen ID.</dd>
+ <dt>{{WebExtAPIRef("bookmarks.getChildren()")}}</dt>
+ <dd>Ruft die Kinder des angegebenen {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}} ab.</dd>
+ <dt>{{WebExtAPIRef("bookmarks.getRecent()")}}</dt>
+ <dd>Ruft eine angeforderte Anzahl von zuletzt hinzugefügten Lesezeichen ab.</dd>
+ <dt>{{WebExtAPIRef("bookmarks.getSubTree()")}}</dt>
+ <dd>Ruft einen Teil des Lesezeichenbaums ab und beginnt am angegebenen Knoten.</dd>
+ <dt>{{WebExtAPIRef("bookmarks.getTree()")}}</dt>
+ <dd>Ruft den gesamten Lesezeichenbaum in ein Array von {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}} Objekte auf.</dd>
+ <dt>{{WebExtAPIRef("bookmarks.move()")}}</dt>
+ <dd>Moves the specified {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}} to a new location in the bookmark tree.</dd>
+ <dt>{{WebExtAPIRef("bookmarks.remove()")}}</dt>
+ <dd>Removes a bookmark or an empty bookmark folder, given the node's ID.</dd>
+ <dt>{{WebExtAPIRef("bookmarks.removeTree()")}}</dt>
+ <dd>Recursively removes a bookmark folder; that is, given the ID of a folder node, removes that node and all its descendants.</dd>
+ <dt>{{WebExtAPIRef("bookmarks.search()")}}</dt>
+ <dd>Searches for {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}}s matching a specified set of criteria.</dd>
+ <dt>{{WebExtAPIRef("bookmarks.update()")}}</dt>
+ <dd>Updates the title and/or URL of a bookmark, or the name of a bookmark folder, given the bookmark's ID.</dd>
+</dl>
+
+<h2 id="Events">Events</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("bookmarks.onCreated")}}</dt>
+ <dd>Fired when a bookmark or folder is created.</dd>
+ <dt>{{WebExtAPIRef("bookmarks.onRemoved")}}</dt>
+ <dd>Fired when a bookmark or folder is removed. When a folder is removed recursively, a single notification is fired for the folder, and none for its contents.</dd>
+ <dt>{{WebExtAPIRef("bookmarks.onChanged")}}</dt>
+ <dd>Fired when a bookmark or folder changes. Currently, only <code>title</code> and <code>url</code> changes trigger this.</dd>
+ <dt>{{WebExtAPIRef("bookmarks.onMoved")}}</dt>
+ <dd>Fired when a bookmark or folder is moved to a different parent folder or to a new offset within its folder.</dd>
+ <dt>{{WebExtAPIRef("bookmarks.onChildrenReordered")}}</dt>
+ <dd>Fired when the user has sorted the children of a folder in the browser's UI. This is not called as a result of a {{WebExtAPIRef("bookmarks.move", "move()")}}.</dd>
+ <dt>{{WebExtAPIRef("bookmarks.onImportBegan")}}</dt>
+ <dd>Fired when a bookmark import session is begun. Expensive observers should ignore {{WebExtAPIRef("bookmarks.onCreated")}} updates until {{WebExtAPIRef("bookmarks.onImportEnded")}} is fired. Observers should still handle other notifications immediately.</dd>
+ <dt>{{WebExtAPIRef("bookmarks.onImportEnded")}}</dt>
+ <dd>Fired when a bookmark import session has finished.</dd>
+</dl>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("webextensions.api.bookmarks")}}</p>
+
+<div class="hidden note">
+<p>The "Chrome incompatibilities" section is included from <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities"> https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities</a> using the <a href="/en-US/docs/Template:WebExtChromeCompat">WebExtChromeCompat</a> macro.</p>
+
+<p>If you need to update this content, edit <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities">https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities</a>, then shift-refresh this page to see your changes.</p>
+</div>
+
+<h3 id="Edge_incompatibilities">Edge incompatibilities</h3>
+
+<p>Promises are not supported in Edge. Use callbacks instead.</p>
+
+<p>{{WebExtExamples("h2")}}</p>
+
+<div class="note"><strong>Acknowledgements</strong>
+
+<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/bookmarks"><code>chrome.bookmarks</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json"><code>bookmarks.json</code></a> in the Chromium code.</p>
+
+<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p>
+</div>
+
+<div class="hidden">
+<pre>// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+</pre>
+</div>
diff --git a/files/de/mozilla/add-ons/webextensions/arbeiten_mit_taps_api/index.html b/files/de/mozilla/add-ons/webextensions/arbeiten_mit_taps_api/index.html
new file mode 100644
index 0000000000..39498fa606
--- /dev/null
+++ b/files/de/mozilla/add-ons/webextensions/arbeiten_mit_taps_api/index.html
@@ -0,0 +1,608 @@
+---
+title: Arbeiten mit Taps API
+slug: Mozilla/Add-ons/WebExtensions/Arbeiten_mit_Taps_API
+tags:
+  - tabs
+translation_of: Mozilla/Add-ons/WebExtensions/Working_with_the_Tabs_API
+---
+<p>{{AddonSidebar}}</p>
+
+<p>Tabs lassen einen Benutzer mehrere Webseiten in seinem Browserfenster öffnen und wechseln dann zwischen diesen Webseiten. Mit der Tabs API können Sie mit diesen Tabs arbeiten und diese manipulieren, um Programme zu erstellen, die Nutzern neue Möglichkeiten bieten, mit Tabs zu arbeiten oder die Funktionen Ihrer Erweiterung zu liefern.</p>
+
+<p>In diesem "how-to"-Artikel schauen wir uns an:</p>
+
+<ul>
+ <li>Berechtigungen, die für die Verwendung der Tabs API benötigt werden.</li>
+ <li>Mehr über Tabs und ihre Eigenschaften erfahren Sie mit {{WebExtAPIRef("tabs.query")}}.</li>
+ <li>Tabs erstellen, duplizieren, verschieben, aktualisieren, neu laden und entfernen.</li>
+ <li>Manipulationen des Zoomniveaus eines Tab.</li>
+ <li>Manipulationen eines Tabs CSS.</li>
+</ul>
+
+<p>Wir schließen dann mit Blick auf einige andere, andere Funktionen, die von der API angeboten werden.</p>
+
+<div class="blockIndicator note">
+<p><strong>Hinweis:</strong> Es gibt einige Tab-API-Funktionen, die an anderer Stelle abgedeckt sind. Dies sind die Methoden, die Sie verwenden können, um den Inhalt der Registerkarten mit Skripten zu manipulieren  ({{WebExtAPIRef("tabs.connect")}},  {{WebExtAPIRef("tabs.sendMessage")}} und  {{WebExtAPIRef("tabs.executeScript")}}). Wenn Sie mehr Informationen über diese Methoden wünschen, lesen Sie die <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">Artikelinhaltskripte</a> Concepts und die Anleitung ändern Sie<a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Modify_a_web_page">eine Webseite</a>.</p>
+</div>
+
+<p><strong>Berechtigungen und die Tabs API</strong></p>
+
+<p>Für die meisten Tabs API-Funktionen benötigen Sie keine Berechtigungen; Es gibt jedoch einige Ausnahmen:</p>
+
+<ul>
+ <li>Für den Zugriff auf die Eigenschaften <code>Tab.url</code>, <code>Tab.title </code>und <code>Tab.favIconUrl</code> des Tab-Objekts ist die Erlaubnis "Tabs" erforderlich. In Firefox benötigen Sie auch "Tabs", um eine <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/query">Abfrage</a> per URL durchzuführen.</li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions">Die Host-Berechtigung</a> ist für die {{WebExtAPIRef("tabs.executeScript")}} oder  {{WebExtAPIRef("tabs.insertCSS")}}. erforderlich.</li>
+</ul>
+
+<p>Im Folgenden können Sie in der manifest.json-Datei Ihrer Erweiterung die Erlaubnis "Tabs " beantragen :</p>
+
+<pre class="brush: json line-numbers language-json"><code class="language-json"><span class="property token">"permissions"</span><span class="operator token">:</span> <span class="punctuation token">[</span>
+  <span class="string token">"&lt;all_urls&gt;"</span><span class="punctuation token">,</span>
+  <span class="string token">"tabs"</span>
+<span class="punctuation token">]</span><span class="punctuation token">,</span></code></pre>
+
+<p>Diese Anfrage gibt Ihnen die Nutzung aller Tabs API-Funktion auf allen Websites, die Ihr Nutzer besucht. Es gibt auch einen alternativen Ansatz für die Anforderung von Berechtigungen zur Verwendung von {{WebExtAPIRef("tabs.executeScript")}} or {{WebExtAPIRef("tabs.insertCSS")}}, bei dem Sie keine Host-Erlaubnis benötigen, in Form von <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions#activeTab_permission">"activeTab"</a>. Diese Erlaubnis bietet die gleichen Rechte wie "Tabs" mit&lt; all _ urls &gt;,aber mit zwei Einschränkungen:</p>
+
+<ul>
+ <li>Der Benutzer muss mit der Erweiterung über seine Browser-oder Seiten-Aktion, Kontextmenü oder Tastenkombination interagieren.</li>
+ <li>Es erteilt nur die Erlaubnis innerhalb der aktiven Registerkarte.</li>
+</ul>
+
+<p>Der Vorteil dieses Ansatzes ist, dass der Benutzer keine Berechtigung erhält, die besagt, dass Ihre Erweiterung "Zugriff auf Ihre Daten für alle Websites" kann. Das liegt daran , dass &lt; all _ urls &gt; Erlaubnis einer Erweiterung die Möglichkeit gibt, Skripte in jedem Tab auszuführen, zu jeder Zeit, die sie mag, während <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions#activeTab_permission">"activeTab"</a> darauf beschränkt ist, der Erweiterung zu erlauben, eine vom Benutzer angeforderte Aktion in der Aktuelle Registerkarte.</p>
+
+<p><strong>Mehr über Tabs und ihre Eigenschaften entdecken</strong></p>
+
+<p>Es wird Gelegenheiten geben, in denen Sie eine Liste aller Tabs in allen Browser-Fenstern erhalten wollen. Zu anderen Zeiten möchten Sie vielleicht eine Untergruppe von Tabs finden, die bestimmten Kriterien entsprechen, wie zum Beispiel solchen, die von einem bestimmten Tab geöffnet werden oder Seiten aus einer bestimmten Domain anzeigen. Und wenn Sie Ihre Liste der Tabs haben, werden Sie wahrscheinlich mehr über ihre Eigenschaften wissen wollen.</p>
+
+<p>Hier kommt die {{WebExtAPIRef("tabs.query")}} in den Fall. Wird allein verwendet, um alle Tabs zu erhalten oder das queryInfo-Objekt zu nehmen —, um Abfragekriterien anzugeben, wie zum Beispiel, ob die Registerkarte im aktuellen Fenster aktiv ist, oder eines oder mehrere von 17 Kriterien —  {{WebExtAPIRef("tabs.query")}} gibt ein Array von  {{WebExtAPIRef("tabs.Tab")}} Objekte, die Informationen über die Registerkarten enthalten.</p>
+
+<p>Wenn Sie nur Informationen über den aktuellen Reiter wünschen, können Sie eine {{WebExtAPIRef("tabs.Tab")}} erhalten. Objekt für diese Registerkarte mit {{WebExtAPIRef("tabs.getCurrent")}}. Wenn Sie eine Tab-ID haben, können Sie die  {{WebExtAPIRef("tabs.Tab")}} Objekt mit {{WebExtAPIRef("tabs.get")}}.</p>
+
+<div class="blockIndicator note">
+<p><strong>notiz:</strong></p>
+
+<ul>
+ <li><strong>In Chrome</strong> kann der Benutzer mehrere Tabs in einem Fenster auswählen, und die Tabs API sieht diese als hervorgehobene Tabs.</li>
+ <li><strong>In Firefox</strong> kann der Benutzer mehrere Tabs nicht auswählen, daher sind "hervorgehoben" und "aktiv" synonym.</li>
+</ul>
+</div>
+
+<h3 id="Wie_man_mit_dem_Beispiel_geht">Wie man mit dem Beispiel geht</h3>
+
+<p>Um zu sehen, wie  {{WebExtAPIRef("tabs.query")}} und  {{WebExtAPIRef("tabs.Tab")}} werden verwendet, lassen Sie uns durch, wie  das <a href="https://github.com/mdn/webextensions-examples/tree/master/tabs-tabs-tabs">Tabs-Tabs-Tabs </a>Beispiel fügt die Liste von" Schalter auf Tabs "zu seiner Toolbar-Taste Popup.</p>
+
+<p><a href="https://mdn.mozillademos.org/files/15723/Switch_to_tab.png"><img alt="" src="https://mdn.mozillademos.org/files/15723/Switch_to_tab.png" style="height: 645px; width: 369px;"></a></p>
+
+<h3 id="manifest.json"><strong>manifest.json</strong></h3>
+
+<p>Hier ist das <a href="https://github.com/mdn/webextensions-examples/blob/master/tabs-tabs-tabs/manifest.json">manifest.json</a>:</p>
+
+<pre class="brush: json line-numbers language-json"><code class="language-json"><span class="punctuation token">{</span>
+  <span class="property token">"browser_action"</span><span class="operator token">:</span> <span class="punctuation token">{</span>
+    <span class="property token">"browser_style"</span><span class="operator token">:</span> <span class="boolean token">true</span><span class="punctuation token">,</span>
+    <span class="property token">"default_title"</span><span class="operator token">:</span> <span class="string token">"Tabs, tabs, tabs"</span><span class="punctuation token">,</span>
+    <span class="property token">"default_popup"</span><span class="operator token">:</span> <span class="string token">"tabs.html"</span>
+  <span class="punctuation token">}</span><span class="punctuation token">,</span>
+  <span class="property token">"description"</span><span class="operator token">:</span> <span class="string token">"A list of methods you can perform on a tab."</span><span class="punctuation token">,</span>
+  <span class="property token">"homepage_url"</span><span class="operator token">:</span> <span class="string token">"https://github.com/mdn/webextensions-examples/tree/master/tabs-tabs-tabs"</span><span class="punctuation token">,</span>
+  <span class="property token">"manifest_version"</span><span class="operator token">:</span> <span class="number token">2</span><span class="punctuation token">,</span>
+  <span class="property token">"name"</span><span class="operator token">:</span> <span class="string token">"Tabs, tabs, tabs"</span><span class="punctuation token">,</span>
+  <span class="property token">"permissions"</span><span class="operator token">:</span> <span class="punctuation token">[</span>
+    <span class="string token">"tabs"</span>
+  <span class="punctuation token">]</span><span class="punctuation token">,</span>
+  <span class="property token">"version"</span><span class="operator token">:</span> <span class="string token">"1.0"</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="blockIndicator note">
+<p>Hinweis:</p>
+
+<ul>
+ <li><strong>Tabs.html wird als Standard </strong><strong>_ Popup in</strong> browser<strong> _ </strong><strong>action</strong><strong>definiert.</strong>Es wird angezeigt, wenn der Benutzer auf das Symbollei-Symbol der Erweiterung klickt.</li>
+ <li><strong>Die Berechtigungen beinhalten Registerkarten. </strong>Dies ist notwendig, um die Tabelliste zu unterstützen, da die Erweiterung den Titel der Registerkarten für die Anzeige im Popup liest.</li>
+</ul>
+</div>
+
+<h3 id="Tabs.html">Tabs.html</h3>
+
+<p>Tabs.html definiert den Inhalt des Popups der Erweiterung:</p>
+
+<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="doctype token">&lt;!DOCTYPE html&gt;</span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>
+
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>utf-8<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>link</span> <span class="attr-name token">rel</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>stylesheet<span class="punctuation token">"</span></span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>tabs.css<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>panel<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>panel-section panel-section-header<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+     <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text-section-header<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Tabs-tabs-tabs<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>#<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>tabs-move-beginning<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Move active tab to the beginning of the window<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>a</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span>
+
+
+…
+
+Define the other menu items
+…
+
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>switch-tabs<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+
+     <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Switch to tab<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+
+     <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>tabs-list<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>tabs.js<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>Hier ist eine Zusammenfassung der oben genannten tut:</p>
+
+<ol>
+ <li>Die Menüpunkte werden deklariert.</li>
+ <li>Ein leerer <code>Div </code>mit der ID-<code>Tabs-Liste</code> wird deklariert, um die Liste der Tabs zu enthalten.</li>
+ <li>Tabs.js heißt.</li>
+</ol>
+
+<h3 id="Tabs.js">Tabs.js</h3>
+
+<p>In <a href="https://github.com/mdn/webextensions-examples/blob/master/tabs-tabs-tabs/tabs.js">tabs.js</a>werdenwir sehen, wie die Liste der Tabs aufgebaut und zum Popup hinzugefügt wird.  </p>
+
+<p><strong>Das Popup schaffen</strong></p>
+
+<p>Zunächst wird ein Event-Handler hinzugefügt, um ListTabs () auszuführen , wenn tabs.html geladen wird:</p>
+
+<pre>document.addEventListener ("DOMContentLoaded", hört Tabs);</pre>
+
+<p>Das erste, was <code>listTabs ()</code> tut, ist <code>getCurrentWindowTabs ()</code>zu nennen. Hier wird ein {{WebExtAPIRef("tabs.query")}} verwendet, um eine  {{WebExtAPIRef("tabs.Tab")}} zu erhalten. Objekt für die Tabs im aktuellen Fenster:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">getCurrentWindowTabs</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">return</span> browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">query</span><span class="punctuation token">(</span><span class="punctuation token">{</span>currentWindow<span class="punctuation token">:</span> <span class="boolean token">true</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>Jetzt ist <code>listTabs()</code> bereit , den Inhalt für das Popup zu erstellen.</p>
+
+<p>Zunächst:</p>
+
+<ol>
+ <li>Schnappen Sie sich die <code>tabs-list div</code>.</li>
+ <li>Erstellen Sie ein Dokumentenfragment (in das die Liste eingebaut wird).</li>
+ <li>Setzen Sie Zähler.</li>
+ <li>Klären Sie den Inhalt der <code>Tabs-Liste div</code>.</li>
+</ol>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">listTabs</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+<span class="function token"> getCurrentWindowTabs</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="parameter token">tabs</span><span class="punctuation token">)</span> <span class="operator token">=&gt;</span> <span class="punctuation token">{</span>
+    <span class="keyword token">let</span> tabsList <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'tabs-list'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">let</span> currentTabs <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createDocumentFragment</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">let</span> limit <span class="operator token">=</span> <span class="number token">5</span><span class="punctuation token">;</span>
+    <span class="keyword token">let</span> counter <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span>
+
+    tabsList<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">''</span><span class="punctuation token">;</span></code></pre>
+
+<p>Als nächstes werden wir die Links für jeden Tab erstellen:</p>
+
+<ol>
+ <li>Schleifen Sie sich durch die ersten 5 Elemente aus der   {{WebExtAPIRef("tabs.Tab")}} Objekt.</li>
+ <li>Fügen Sie für jeden Artikel einen Hyperlink zum Dokumentenfragment hinzu.
+  <ul>
+   <li>Das Etikett des Links — das heißt, sein Text — wird mit dem Titel des Tab gesetzt (oder mit der ID, wenn er keinen Titel hat).</li>
+   <li>Die Adresse des Links wird mit der Personalausweis des Tabs gesetzt.</li>
+  </ul>
+ </li>
+</ol>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"> <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">let</span> tab <span class="keyword token">of</span> tabs<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+     <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span>tab<span class="punctuation token">.</span>active <span class="operator token">&amp;&amp;</span> counter <span class="operator token">&lt;=</span> limit<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="keyword token">let</span> tabLink <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'a'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+        tabLink<span class="punctuation token">.</span>textContent <span class="operator token">=</span> tab<span class="punctuation token">.</span>title <span class="operator token">||</span> tab<span class="punctuation token">.</span>id<span class="punctuation token">;</span>
+
+       tabLink<span class="punctuation token">.</span><span class="function token">setAttribute</span><span class="punctuation token">(</span><span class="string token">'href'</span><span class="punctuation token">,</span> tab<span class="punctuation token">.</span>id<span class="punctuation token">)</span><span class="punctuation token">;</span>
+        tabLink<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">add</span><span class="punctuation token">(</span><span class="string token">'switch-tabs'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+        currentTabs<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>tabLink<span class="punctuation token">)</span><span class="punctuation token">;</span>
+     <span class="punctuation token">}</span>
+
+     counter <span class="operator token">+=</span> <span class="number token">1</span><span class="punctuation token">;</span>
+
+    <span class="punctuation token">}</span></code></pre>
+
+<p>Schließlich wird das Dokumentenfragment auf die Tabs-Liste div geschrieben:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js">  tabsList<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>currentTabs<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p><strong>Arbeiten mit dem aktiven Reiter</strong></p>
+
+<p>Ein weiteres verwandtes Beispielmerkmal ist die Info-Option "Alert active tab", die alle Registerkarten [{WebExtAPIRef ("-Register) ablegt. Tab ")} Objekteigenschaften für die aktive Registerkarte in einen Alarm:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"> <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>target<span class="punctuation token">.</span>id <span class="operator token">===</span> <span class="string token">"tabs-alertinfo"</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+<span class="function token">   callOnActiveTab</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="parameter token">tab</span><span class="punctuation token">)</span> <span class="operator token">=&gt;</span> <span class="punctuation token">{</span>
+     <span class="keyword token">let</span> props <span class="operator token">=</span> <span class="string token">""</span><span class="punctuation token">;</span>
+     <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="parameter token"><span class="keyword token">let</span> item <span class="keyword token">in</span> tab</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+       props <span class="operator token">+=</span> <span class="template-string token"><span class="string token">`</span><span class="interpolation token"><span class="interpolation-punctuation punctuation token">${</span> item <span class="interpolation-punctuation punctuation token">}</span></span><span class="string token"> = </span><span class="interpolation token"><span class="interpolation-punctuation punctuation token">${</span> tab<span class="punctuation token">[</span>item<span class="punctuation token">]</span> <span class="interpolation-punctuation punctuation token">}</span></span><span class="string token"> \n`</span></span><span class="punctuation token">;</span>
+     <span class="punctuation token">}</span>
+<span class="function token">     alert</span><span class="punctuation token">(</span>props<span class="punctuation token">)</span><span class="punctuation token">;</span>
+   <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+ <span class="punctuation token">}</span></code></pre>
+
+<p>Wobei <code>callOnActiveTab() </code>das aktive Tab-Objekt findet, indem man sich durch die Registerkarten {{WebExtAPIRef("tabs.Tab")}} schlodert. Tab ")} Objekte, die nach dem Gegenstand mit aktivem Satz suchen:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js">document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">e</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ <span class="keyword token">function</span> <span class="function token">callOnActiveTab</span><span class="punctuation token">(</span><span class="parameter token">callback</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+<span class="function token">   getCurrentWindowTabs</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="parameter token">tabs</span><span class="punctuation token">)</span> <span class="operator token">=&gt;</span> <span class="punctuation token">{</span>
+     <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="parameter token"><span class="keyword token">var</span> tab <span class="keyword token">of</span> tabs</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+       <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="parameter token">tab<span class="punctuation token">.</span>active</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+<span class="function token">         callback</span><span class="punctuation token">(</span>tab<span class="punctuation token">,</span> tabs<span class="punctuation token">)</span><span class="punctuation token">;</span>
+       <span class="punctuation token">}</span>
+     <span class="punctuation token">}</span>
+   <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+ <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p><strong>Tabs erstellen, duplizieren, verschieben, aktualisieren, neu laden und entfernen</strong></p>
+
+<p>Nachdem Sie Informationen über die Registerkarten gesammelt haben, werden Sie höchstwahrscheinlich etwas mit ihnen machen wollen — entweder den Benutzern Funktionen für die Manipulation und Verwaltung von Registern bieten oder Funktionen in Ihrer Erweiterung implementieren.</p>
+
+<p>Folgende Funktionen stehen zur Verfügung:</p>
+
+<ul>
+ <li>Erstellen Sie eine neue Registerkarte ({{WebExtAPIRef("tabs.create")}}).</li>
+ <li>Duplizieren sie eine neue Registerkarte ({{WebExtAPIRef("tabs.duplicate")}}).</li>
+ <li>Entfernen Sie eine Registerkarte ({{WebExtAPIRef("tabs.remove")}}).</li>
+ <li>Verschieben Sie eine Registerkarte ({{WebExtAPIRef("tabs.move")}}).</li>
+ <li>Aktualisieren Sie die URL der Registerkarte, um — effektiv auf eine neue Seite — ({{WebExtAPIRef("tabs.update")}}).</li>
+ <li>Die Seite der Registerkarte neu Laden ({{WebExtAPIRef("tabs.reload")}}).</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>notiz:</strong></p>
+
+<p>Diese Funktionen erfordern alle die ID (oder IDs) der Registerkarte, die sie manipulieren:</p>
+
+<ul>
+ <li>{{WebExtAPIRef ("tabs.duplicate")}}</li>
+ <li>{{WebExtAPIRef("tabs.remove")}})</li>
+ <li>{{WebExtAPIRef ("tabs.move")}}</li>
+</ul>
+
+<p>Während die folgenden Funktionen auf dem aktiven Tab (sofern keine Tab-ID zur Verfügung gestellt wird) wirken:</p>
+
+<ul>
+ <li>{{WebExtAPIRef("tabs.update")}}</li>
+ <li>{{WebExtAPIRef("tabs.reload")}}</li>
+</ul>
+</div>
+
+<p><strong>Wie man mit dem Beispiel geht</strong></p>
+
+<p>Das Beispiel <a href="https://github.com/mdn/webextensions-examples/tree/master/tabs-tabs-tabs">Tabs-Tabs</a> übt all diese Funktionen aus, bis hin zur Aktualisierung der URL eines Tabs. Die Art und Weise, in der diese APIs verwendet werden, ist ähnlich, so dass wir uns eine der am meisten involvierten Implementierungen ansehen werden, die des "Move active tab to the beginning of the the. Option "Option der Fensterliste.</p>
+
+<p>Aber zunächst ist hier eine Demonstration des Features in Aktion:</p>
+
+<p>{{EmbedYouTube("-lJRzTIvhxo")}}</p>
+
+<p><a href="https://github.com/mdn/webextensions-examples/blob/master/tabs-tabs-tabs/manifest.json"><strong>manifest.json</strong></a></p>
+
+<p>Keine der Funktionen benötigt eine Betriebsgenehmigung, so dass es keine Funktionen in der manifest.json-Datei gibt, die hervorgehoben werden müssen.</p>
+
+<p><a href="https://github.com/mdn/webextensions-examples/blob/master/tabs-tabs-tabs/tabs.html"><strong>Tabs.html</strong></a></p>
+
+<p>Tabs.html definiert das "Menü", das im Popup angezeigt wird, das die Option "Aktive Registerkarte zum Anfang der Fensterliste verschieben" enthält, mit einer Reihe von<code> &lt;a&gt; </code>Tags, die von einem visuellen Separator gruppiert sind. Jeder Menüpunkt erhält eine ID, die in tabs.js verwendet wird, um festzustellen, welcher Menüpunkt angefordert wird.</p>
+
+<pre class="brush: html line-numbers language-html"><code class="language-html">  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>#<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>tabs-move-beginning<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Move active tab to the beginning of the window<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>a</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>#<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>tabs-move-end<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Move active tab to the end of the window<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>a</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span>
+
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>panel-section-separator<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>#<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>tabs-duplicate<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Duplicate active tab<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>a</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span>
+
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>#<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>tabs-reload<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Reload active tab<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>a</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>#<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>tabs-alertinfo<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Alert active tab info<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>a</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p><a href="https://github.com/mdn/webextensions-examples/blob/master/tabs-tabs-tabs/tabs.js"><strong>Tabs.js</strong></a></p>
+
+<p>Um das in tabs.html definierte "Menü" zu implementieren, enthält tabs.js einen Hörer für Klicks in tabs.html:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js">document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">e</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ <span class="keyword token">function</span> <span class="function token">callOnActiveTab</span><span class="punctuation token">(</span><span class="parameter token">callback</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+
+<span class="function token">   getCurrentWindowTabs</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="parameter token">tabs</span><span class="punctuation token">)</span> <span class="operator token">=&gt;</span> <span class="punctuation token">{</span>
+     <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="parameter token"><span class="keyword token">var</span> tab <span class="keyword token">of</span> tabs</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+       <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="parameter token">tab<span class="punctuation token">.</span>active</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+<span class="function token">         callback</span><span class="punctuation token">(</span>tab<span class="punctuation token">,</span> tabs<span class="punctuation token">)</span><span class="punctuation token">;</span>
+       <span class="punctuation token">}</span>
+     <span class="punctuation token">}</span>
+   <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>Eine Reihe von <code>if</code>Anweisungen dann schauen, um die ID des Artikels geklickt.</p>
+
+<p>Dieser Code-Snippet ist für die Option "Aktive Registerkarte zum Anfang der Fensterliste verschieben":</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"> <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>target<span class="punctuation token">.</span>id <span class="operator token">===</span> <span class="string token">"tabs-move-beginning"</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+<span class="function token">   callOnActiveTab</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="parameter token">tab<span class="punctuation token">,</span> tabs</span><span class="punctuation token">)</span> <span class="operator token">=&gt;</span> <span class="punctuation token">{</span>
+     <span class="keyword token">var</span> index <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span>
+     <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="parameter token"><span class="operator token">!</span>tab<span class="punctuation token">.</span>pinned</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+       index <span class="operator token">=</span> <span class="function token">firstUnpinnedTab</span><span class="punctuation token">(</span>tabs<span class="punctuation token">)</span><span class="punctuation token">;</span>
+     <span class="punctuation token">}</span>
+     console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="template-string token"><span class="string token">`moving </span><span class="interpolation token"><span class="interpolation-punctuation punctuation token">${</span>tab<span class="punctuation token">.</span>id<span class="interpolation-punctuation punctuation token">}</span></span><span class="string token"> to </span><span class="interpolation token"><span class="interpolation-punctuation punctuation token">${</span>index<span class="interpolation-punctuation punctuation token">}</span></span><span class="string token">`</span></span><span class="punctuation token">)</span>
+     browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">move</span><span class="punctuation token">(</span><span class="punctuation token">[</span>tab<span class="punctuation token">.</span>id<span class="punctuation token">]</span><span class="punctuation token">,</span> <span class="punctuation token">{</span>index<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+   <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+ <span class="punctuation token">}</span></code></pre>
+
+<p>Es ist erwähnenswert, die Verwendung von <code>console.log ()</code>. Auf diese Weise können Sie Informationen an die <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Debugging">Debugger-Konsole</a> ausgeben , was bei der Lösung von Problemen, die während der Entwicklung gefunden wurden, nützlich sein kann.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15722/console.png"></p>
+
+<p>Der Bewegungscode ruft zunächst <code>callOnActiveTab ()</code> an , der wiederum <code>getCurrentWindowTabs ()</code> anruft, um eine {{WebExtAPIRef("tabs.Tab")}} Objekt, das die Registerkarten des aktiven Fensters enthält. Es schleift sich dann durch das Objekt, um das aktive Tab-Objekt zu finden und zurückzugeben:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">callOnActiveTab</span><span class="punctuation token">(</span><span class="parameter token">callback</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+<span class="function token">   getCurrentWindowTabs</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="parameter token">tabs</span><span class="punctuation token">)</span> <span class="operator token">=&gt;</span> <span class="punctuation token">{</span>
+     <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="parameter token"><span class="keyword token">var</span> tab <span class="keyword token">of</span> tabs</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+       <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="parameter token">tab<span class="punctuation token">.</span>active</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+<span class="function token">         callback</span><span class="punctuation token">(</span>tab<span class="punctuation token">,</span> tabs<span class="punctuation token">)</span><span class="punctuation token">;</span>
+       <span class="punctuation token">}</span>
+     <span class="punctuation token">}</span>
+   <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+ <span class="punctuation token">}</span></code></pre>
+
+<p><strong>Gepinnte Tabs</strong></p>
+
+<p>Eine Besonderheit von Registern ist, dass  der Benutzer Tabs in ein Fenster einfügen kann. Gepinnte Tabs werden am Anfang der Tab-Liste platziert und können nicht verschoben werden. Das bedeutet, dass die früheste Position, in die sich ein Tab bewegen kann, die erste Position nach einem gefiederten Tabs ist. Also , <code>firstUnpinnedTab ()</code> wird aufgerufen, um die Position des ersten ungepasten Tab zu finden, indem man durch das <code>Tabs</code>-Objekt Looping:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">firstUnpinnedTab</span><span class="punctuation token">(</span><span class="parameter token">tabs</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="parameter token"><span class="keyword token">var</span> tab <span class="keyword token">of</span> tabs</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+   <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="parameter token"><span class="operator token">!</span>tab<span class="punctuation token">.</span>pinned</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+     <span class="keyword token">return</span> tab<span class="punctuation token">.</span>index<span class="punctuation token">;</span>
+   <span class="punctuation token">}</span>
+ <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>Wir haben jetzt alles, was zum Verschieben des Tab notwendig ist: Das aktive Tab-Objekt, von dem wir die Reiter-ID erhalten können und die Position, in die der Reiter verschoben werden soll. So können wir den Schritt umsetzen:</p>
+
+<pre>browser.tabs.move ([tab.id], {index});</pre>
+
+<p>Die restlichen Funktionen zum Duplizieren, Laden, Erstellen und Entfernen von Tabs werden ähnlich implementiert.</p>
+
+<h4 id="Manipulationen_eines_Tab"><strong>Manipulationen eines Tab</strong></h4>
+
+<p>Die nächste Reihe von Funktionen ermöglicht es Ihnen, die Zoomstufe in einem Tab zu erhalten  ({{WebExtAPIRef("tabs.getZoom")}}) und zu setzen ({{WebExtAPIRef("tabs.setZoom")}}) . Sie können auch die Zoom-Einstellungen abrufen ({{WebExtAPIRef("tabs.getZoomSettings")}}) , aber zum Zeitpunkt des Schreibens war die Möglichkeit, die Einstellungen zu setzen ({{WebExtAPIRef("tabs.setZoomSettings")}}) , war in Firefox nicht verfügbar.</p>
+
+<p>Der Zoomwert kann zwischen 30% und 300% liegen (dargestellt als Dezimalzahl <code>0,3 bis 3</code>).</p>
+
+<p>In Firefox sind die Standard-Zoom-Einstellungen:</p>
+
+<ul>
+ <li><strong>Standard-Zoom-Level: </strong>100%.</li>
+ <li><strong>Zoommodus:</strong> Automatik (so verwaltet der Browser, wie Zoomstufen gesetzt werden).</li>
+ <li><strong>Umfang der Zoomwechsel</strong> : "pro-origin",was bedeutet, dass, wenn Sie eine Website wieder besuchen, es die Zoomstufe, die in Ihrem letzten Besuch eingestellt wird, benötigt.</li>
+</ul>
+
+<h3 id="Wie_man_mit_dem_Beispiel_geht_2">Wie man mit dem Beispiel geht</h3>
+
+<p>Das  Beispiel der Tabs-Tabs-Tabs enthält drei Vorführungen der Zoom-Funktion: Zoomen, Zoomen und Zoom zurücksetzen. Hier ist das Feature in Aktion:</p>
+
+<p>{{EmbedYouTube("RFr3oYBCg28")}}</p>
+
+<p>Schauen wir uns an, wie der Zoom-In umgesetzt wird.</p>
+
+<p><a href="https://github.com/mdn/webextensions-examples/blob/master/tabs-tabs-tabs/manifest.json"><strong>manifest.json</strong></a></p>
+
+<p>Keine der Zoom-Funktionen benötigt Berechtigungen, so dass es keine Funktionen in der manifest.json-Datei gibt, die hervorgehoben werden müssen.</p>
+
+<p><a href="https://github.com/mdn/webextensions-examples/blob/master/tabs-tabs-tabs/tabs.html"><strong>Tabs.html</strong></a></p>
+
+<p>Wir haben bereits darüber diskutiert, wie der tabs.html die Optionen für diese Erweiterung definiert, nichts Neues oder Einzigartiges wird getan, um die Zoom-Optionen zur Verfügung zu stellen.</p>
+
+<p><a href="https://github.com/mdn/webextensions-examples/blob/master/tabs-tabs-tabs/tabs.js"><strong>Tabs.js</strong></a></p>
+
+<p>Tabs.js beginnt mit der Definition mehrerer Konstanten, die im Zoom-Code verwendet werden:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">const</span> <span class="constant token">ZOOM_INCREMENT</span> <span class="operator token">=</span> <span class="number token">0.2</span><span class="punctuation token">;</span>
+<span class="keyword token">const</span> <span class="constant token">MAX_ZOOM</span> <span class="operator token">=</span> <span class="number token">3</span><span class="punctuation token">;</span>
+<span class="keyword token">const</span> <span class="constant token">MIN_ZOOM</span> <span class="operator token">=</span> <span class="number token">0.3</span><span class="punctuation token">;</span>
+<span class="keyword token">const</span> <span class="constant token">DEFAULT_ZOOM</span> <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span></code></pre>
+
+<p>Es verwendet dann den gleichen Hörer, den wir zuvor besprochen haben, so dass es auf Klicks in tabs.html wirken kann.</p>
+
+<p>Für den Zoom in der Funktion läuft das:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>target<span class="punctuation token">.</span>id <span class="operator token">===</span> <span class="string token">"tabs-add-zoom"</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+<span class="function token">   callOnActiveTab</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="parameter token">tab</span><span class="punctuation token">)</span> <span class="operator token">=&gt;</span> <span class="punctuation token">{</span>
+     <span class="keyword token">var</span> gettingZoom <span class="operator token">=</span> browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">getZoom</span><span class="punctuation token">(</span>tab<span class="punctuation token">.</span>id<span class="punctuation token">)</span><span class="punctuation token">;</span>
+     gettingZoom<span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="parameter token">zoomFactor</span><span class="punctuation token">)</span> <span class="operator token">=&gt;</span> <span class="punctuation token">{</span>
+       <span class="comment token">//the maximum zoomFactor is 3, it can't go higher</span>
+       <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="parameter token">zoomFactor <span class="operator token">&gt;=</span> <span class="constant token">MAX_ZOOM</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+<span class="function token">         alert</span><span class="punctuation token">(</span><span class="string token">"Tab zoom factor is already at max!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+       <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+         <span class="keyword token">var</span> newZoomFactor <span class="operator token">=</span> zoomFactor <span class="operator token">+</span> <span class="constant token">ZOOM_INCREMENT</span><span class="punctuation token">;</span>
+         <span class="comment token">//if the newZoomFactor is set to higher than the max accepted</span>
+         <span class="comment token">//it won't change, and will never alert that it's at maximum</span>
+         newZoomFactor <span class="operator token">=</span> newZoomFactor <span class="operator token">&gt;</span> <span class="constant token">MAX_ZOOM</span> <span class="operator token">?</span> <span class="constant token">MAX_ZOOM</span> <span class="punctuation token">:</span> newZoomFactor<span class="punctuation token">;</span>
+         browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">setZoom</span><span class="punctuation token">(</span>tab<span class="punctuation token">.</span>id<span class="punctuation token">,</span> newZoomFactor<span class="punctuation token">)</span><span class="punctuation token">;</span>
+       <span class="punctuation token">}</span>
+     <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+   <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+ <span class="punctuation token">}</span></code></pre>
+
+<p>Dieser Code verwendet <code>callOnActiveTab ()</code> , um die Details des aktiven Tab zu erhalten, dann wird {{WebExtAPIRef("tabs.getZoom")}} den aktuellen Zoom-Faktor der Registerkarte erhalten. Der aktuelle Zoom wird mit dem definierten Maximum (MAX _ ZOOM)und einem Alarm verglichen, der ausgegeben wird, wenn sich der Tab bereits im Maximalzoom befindet. Andernfalls wird der Zoom-Level erhöht, aber auf den maximalen Zoom beschränkt, dann wird der Zoom mit {{WebExtAPIRef("tabs.getZoom")}}. gesetzt .</p>
+
+<h4 id="Manipulationen_eines_Tabs_CSS"><strong>Manipulationen eines Tabs CSS</strong></h4>
+
+<p>Eine weitere wichtige Fähigkeit, die die Tabs API bietet, ist die Möglichkeit, die CSS innerhalb eines Tab zu manipulieren — neue CSS zu einem Tab hinzufügen ({{WebExtAPIRef ("tabu Die [[Datei]] der [[Datei]] der [[Datei]] der [[Datei]] der [[Datei]] ist (" tabs.removeCSS ")).</p>
+
+<p>Dies kann zum Beispiel nützlich sein, wenn Sie bestimmte Seitenelemente markieren oder das Standardlayout der Seite ändern wollen.</p>
+
+<h3 id="Wie_man_mit_dem_Beispiel_geht_3">Wie man mit dem Beispiel geht</h3>
+
+<p>Das <a href="https://github.com/mdn/webextensions-examples/tree/master/apply-css">Apply-css-Beispiel</a> nutzt diese Funktionen, um der Webseite im aktiven Tab einen roten Rand hinzuzufügen. Hier ist das Feature in Aktion:</p>
+
+<p>{{EmbedYouTube ("bcK-GT2Dyhs")}</p>
+
+<p>Gehen wir durch, wie es aufgebaut ist.</p>
+
+<p><a href="https://github.com/mdn/webextensions-examples/blob/master/apply-css/manifest.json"><strong>manifest.json</strong></a></p>
+
+<p>Um die CSS-Funktionen nutzen zu können, benötigen Sie entweder:</p>
+
+<ul>
+ <li><code>"Tabs "</code> -Erlaubnis und <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions">Host-Erlaubnis</a> oder</li>
+ <li><code>"activeTab"</code>-Erlaubnis .</li>
+</ul>
+
+<p>Letzteres ist das nützlichste, da es einer Erweiterung erlaubt,  {{WebExtAPIRef("tabs.insertCSS")}} und  {{WebExtAPIRef("tabs.removeCSS")}} in der aktiven Registerkarte zu verwenden, wenn sie von der Browser-oder Seitenaktion, dem Kontextmenü oder einem Shortcut der Erweiterung ausgeführt wird.</p>
+
+<pre class="brush: json line-numbers language-json"><code class="language-json"><span class="punctuation token">{</span>
+  <span class="property token">"description"</span><span class="operator token">:</span> <span class="string token">"Adds a page action to toggle applying CSS to pages."</span><span class="punctuation token">,</span>
+
+ <span class="property token">"manifest_version"</span><span class="operator token">:</span> <span class="number token">2</span><span class="punctuation token">,</span>
+ <span class="property token">"name"</span><span class="operator token">:</span> <span class="string token">"apply-css"</span><span class="punctuation token">,</span>
+ <span class="property token">"version"</span><span class="operator token">:</span> <span class="string token">"1.0"</span><span class="punctuation token">,</span>
+ <span class="property token">"homepage_url"</span><span class="operator token">:</span> <span class="string token">"https://github.com/mdn/webextensions-examples/tree/master/apply-css"</span><span class="punctuation token">,</span>
+
+ <span class="property token">"background"</span><span class="operator token">:</span> <span class="punctuation token">{</span>
+
+    <span class="property token">"scripts"</span><span class="operator token">:</span> <span class="punctuation token">[</span><span class="string token">"background.js"</span><span class="punctuation token">]</span>
+ <span class="punctuation token">}</span><span class="punctuation token">,</span>
+
+ <span class="property token">"page_action"</span><span class="operator token">:</span> <span class="punctuation token">{</span>
+
+    <span class="property token">"default_icon"</span><span class="operator token">:</span> <span class="string token">"icons/off.svg"</span><span class="punctuation token">,</span>
+    <span class="property token">"browser_style"</span><span class="operator token">:</span> <span class="boolean token">true</span>
+ <span class="punctuation token">}</span><span class="punctuation token">,</span>
+
+ <span class="property token">"permissions"</span><span class="operator token">:</span> <span class="punctuation token">[</span>
+    <span class="string token">"activeTab"</span><span class="punctuation token">,</span>
+    <span class="string token">"tabs"</span>
+ <span class="punctuation token">]</span>
+
+<span class="punctuation token">}</span></code></pre>
+
+<p>Sie werden darauf hinweisen, dass zusätzlich zu "<code>activeTab</code>" die Erlaubnis " Tabs"angefordert wird. Diese zusätzliche Erlaubnis ist erforderlich, um das Skript der Erweiterung in die Lage zu versetzen, auf die URL des Registers zuzugreifen, deren Bedeutung wir gleich sehen werden.</p>
+
+<p>Die anderen Hauptmerkmale in der manifest.json-Datei sind die Definition von:</p>
+
+<ul>
+ <li><strong>Ein Hintergrundskript</strong>, das gestartet wird, sobald die Erweiterung geladen wird.</li>
+ <li><strong>Eine "Seitenaktion</strong>", die ein Symbol definiert, das in die Adressleiste des Browsers aufgenommen werden soll.</li>
+</ul>
+
+<p><a href="https://github.com/mdn/webextensions-examples/blob/master/apply-css/background.js"><strong>Background.js</strong></a></p>
+
+<p>Beim Start setzt background.js einige Konstanten, um die zu bewendenden CSS zu definieren, Titel für die "Seitenaktion", und eine Liste von Protokollen, in denen die Erweiterung funktioniert:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">const</span> <span class="constant token">CSS</span> <span class="operator token">=</span> <span class="string token">"body { border: 20px solid red; }"</span><span class="punctuation token">;</span>
+<span class="keyword token">const</span> <span class="constant token">TITLE_APPLY</span> <span class="operator token">=</span> <span class="string token">"Apply CSS"</span><span class="punctuation token">;</span>
+<span class="keyword token">const</span> <span class="constant token">TITLE_REMOVE</span> <span class="operator token">=</span> <span class="string token">"Remove CSS"</span><span class="punctuation token">;</span>
+<span class="keyword token">const</span> <span class="constant token">APPLICABLE_PROTOCOLS</span> <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">"http:"</span><span class="punctuation token">,</span> <span class="string token">"https:"</span><span class="punctuation token">]</span><span class="punctuation token">;</span></code></pre>
+
+<p>Wenn die Erweiterung zum ersten Mal geladen wird, verwendet sie {{WebExtAPIRef("tabs.query")}}, um eine Liste aller Tabs im aktuellen Browserfenster zu erhalten. Es schleit sich dann durch die Tabs, die <code>InitializePageAction()</code>rufen.</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> gettingAllTabs <span class="operator token">=</span> browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">query</span><span class="punctuation token">(</span><span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+gettingAllTabs<span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="parameter token">tabs</span><span class="punctuation token">)</span> <span class="operator token">=&gt;</span> <span class="punctuation token">{</span>
+ <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="parameter token"><span class="keyword token">let</span> tab <span class="keyword token">of</span> tabs</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+<span class="function token">   initializePageAction</span><span class="punctuation token">(</span>tab<span class="punctuation token">)</span><span class="punctuation token">;</span>
+ <span class="punctuation token">}</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p><code>InitializePageAction</code> verwendet protokolIsApplicable () , um festzustellen, ob die URL der aktiven Registerkarte eine ist, auf die die CSS angewendet werden kann:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">protocolIsApplicable</span><span class="punctuation token">(</span><span class="parameter token">url</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ <span class="keyword token">var</span> anchor <span class="operator token">=</span>  document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'a'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+ anchor<span class="punctuation token">.</span>href <span class="operator token">=</span> url<span class="punctuation token">;</span>
+ <span class="keyword token">return</span> <span class="constant token">APPLICABLE_PROTOCOLS</span><span class="punctuation token">.</span><span class="function token">includes</span><span class="punctuation token">(</span>anchor<span class="punctuation token">.</span>protocol<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>Wenn das Beispiel dann auf der Registerkarte wirken kann, setzt <code>initializePageAction ()</code> das <code>PageAction</code>-Symbol und den Titel des Tab, um die "Off"-Versionen zu verwenden, bevor die <code>PageAction</code>-Version sichtbar gemacht wird:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">initializePageAction</span><span class="punctuation token">(</span><span class="parameter token">tab</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+
+ <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="parameter token"><span class="function token">protocolIsApplicable</span><span class="punctuation token">(</span>tab<span class="punctuation token">.</span>url<span class="punctuation token">)</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+   browser<span class="punctuation token">.</span>pageAction<span class="punctuation token">.</span><span class="function token">setIcon</span><span class="punctuation token">(</span><span class="punctuation token">{</span>tabId<span class="punctuation token">:</span> tab<span class="punctuation token">.</span>id<span class="punctuation token">,</span> path<span class="punctuation token">:</span> <span class="string token">"icons/off.svg"</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+   browser<span class="punctuation token">.</span>pageAction<span class="punctuation token">.</span><span class="function token">setTitle</span><span class="punctuation token">(</span><span class="punctuation token">{</span>tabId<span class="punctuation token">:</span> tab<span class="punctuation token">.</span>id<span class="punctuation token">,</span> title<span class="punctuation token">:</span> <span class="constant token">TITLE_APPLY</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+   browser<span class="punctuation token">.</span>pageAction<span class="punctuation token">.</span><span class="function token">show</span><span class="punctuation token">(</span>tab<span class="punctuation token">.</span>id<span class="punctuation token">)</span><span class="punctuation token">;</span>
+ <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>Als Nächstes wartet ein Zuhörer auf der <code>pageAction.onClicked</code> darauf, dass das <code>PageAction</code>-Symbol angeklickt wird  , und ruft toggleCSS an , wenn es ist.</p>
+
+<pre>browser.pageAction.onClicked.addListener (toggleCSS);</pre>
+
+<p><code>ToggleCSS ()</code> erhält den Titel der <code>PageAction</code> und nimmt dann die beschriebene Aktion auf:</p>
+
+<ul>
+ <li><strong>Für "Apply CSS":</strong>
+
+  <ul>
+   <li>Das <code>PageAction</code>-Symbol und den Titel in die "Entfernen"-Versionen.</li>
+   <li>Es ist eine sehr gut. {{WebExtAPIRef("tabs.insertCSS")}}.</li>
+  </ul>
+ </li>
+ <li><strong>Für "Remove CSS":</strong>
+  <ul>
+   <li>Das <code>PageAction</code>-Symbol und den Titel in die "Anwendung"-Versionen.</li>
+   <li>Entfernt die CSS mit {{WebExtAPIRef("tabs.removeCSS")}}.</li>
+  </ul>
+ </li>
+</ul>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">toggleCSS</span><span class="punctuation token">(</span><span class="parameter token">tab</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+
+
+ <span class="keyword token">function</span> <span class="function token">gotTitle</span><span class="punctuation token">(</span><span class="parameter token">title</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+
+    <span class="keyword token">if</span> <span class="punctuation token">(</span>title <span class="operator token">===</span> <span class="constant token">TITLE_APPLY</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+     browser<span class="punctuation token">.</span>pageAction<span class="punctuation token">.</span><span class="function token">setIcon</span><span class="punctuation token">(</span><span class="punctuation token">{</span>tabId<span class="punctuation token">:</span> tab<span class="punctuation token">.</span>id<span class="punctuation token">,</span> path<span class="punctuation token">:</span> <span class="string token">"icons/on.svg"</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+     browser<span class="punctuation token">.</span>pageAction<span class="punctuation token">.</span><span class="function token">setTitle</span><span class="punctuation token">(</span><span class="punctuation token">{</span>tabId<span class="punctuation token">:</span> tab<span class="punctuation token">.</span>id<span class="punctuation token">,</span> title<span class="punctuation token">:</span> <span class="constant token">TITLE_REMOVE</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+     browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">insertCSS</span><span class="punctuation token">(</span><span class="punctuation token">{</span>code<span class="punctuation token">:</span> <span class="constant token">CSS</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+     browser<span class="punctuation token">.</span>pageAction<span class="punctuation token">.</span><span class="function token">setIcon</span><span class="punctuation token">(</span><span class="punctuation token">{</span>tabId<span class="punctuation token">:</span> tab<span class="punctuation token">.</span>id<span class="punctuation token">,</span> path<span class="punctuation token">:</span> <span class="string token">"icons/off.svg"</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+     browser<span class="punctuation token">.</span>pageAction<span class="punctuation token">.</span><span class="function token">setTitle</span><span class="punctuation token">(</span><span class="punctuation token">{</span>tabId<span class="punctuation token">:</span> tab<span class="punctuation token">.</span>id<span class="punctuation token">,</span> title<span class="punctuation token">:</span> <span class="constant token">TITLE_APPLY</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+     browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">removeCSS</span><span class="punctuation token">(</span><span class="punctuation token">{</span>code<span class="punctuation token">:</span> <span class="constant token">CSS</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+ <span class="punctuation token">}</span>
+
+ <span class="keyword token">var</span> gettingTitle <span class="operator token">=</span> browser<span class="punctuation token">.</span>pageAction<span class="punctuation token">.</span><span class="function token">getTitle</span><span class="punctuation token">(</span><span class="punctuation token">{</span>tabId<span class="punctuation token">:</span> tab<span class="punctuation token">.</span>id<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+ gettingTitle<span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span>gotTitle<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>Um sicherzustellen, dass die PageAction nach jedem Update auf den Tab gültig ist, ruft ein Zuhörer auf  {{WebExtAPIRef("tabs.onUpdated")}} jedes Mal, wenn der Tab aktualisiert wird, auf initializePageAction () , um zu überprüfen, ob der Reiter immer noch ein Protokoll, auf das das CSS angewendet werden kann.</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js">browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span>onUpdated<span class="punctuation token">.</span><span class="function token">addListener</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="parameter token">id<span class="punctuation token">,</span> changeInfo<span class="punctuation token">,</span> tab</span><span class="punctuation token">)</span> <span class="operator token">=&gt;</span> <span class="punctuation token">{</span>
+<span class="function token"> initializePageAction</span><span class="punctuation token">(</span>tab<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h4 id="Einige_weitere_interessante_Fähigkeiten"><strong>Einige weitere interessante Fähigkeiten</strong></h4>
+
+<p>Es gibt noch ein paar andere Tabs API-Funktionen, die nicht in einen der früheren Abschnitte passen:</p>
+
+<ul>
+ <li>Erfassen Sie den sichtbaren Tab-Inhalt mit {{WebExtAPIRef("tabs.captureVisibleTab")}}.</li>
+ <li>Erkennen Sie die Hauptsprache des Inhalts in einem Tab mit {{WebExtAPIRef("tabs.detectLanguage")}} . Dies könnte zum Beispiel verwendet werden, um die Sprache in Ihrem UI mit der Seite, in der sie läuft, zu vergleichen.</li>
+</ul>
+
+<p><strong>Weitere Informationen</strong></p>
+
+<p>Wenn Sie mehr über die Tabs API erfahren möchten, schauen Sie sich an:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/tabs">Tabs API-Referenz</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples">Beispielerweiterungen</a> (von denen viele die Tabs API verwenden)<a name="_GoBack"></a></li>
+</ul>
+
+<p> </p>
diff --git a/files/de/mozilla/add-ons/webextensions/beispiele/index.html b/files/de/mozilla/add-ons/webextensions/beispiele/index.html
new file mode 100644
index 0000000000..627dbe559d
--- /dev/null
+++ b/files/de/mozilla/add-ons/webextensions/beispiele/index.html
@@ -0,0 +1,22 @@
+---
+title: Beispiele für Erweiterungen
+slug: Mozilla/Add-ons/WebExtensions/Beispiele
+tags:
+  - WebExtensions
+translation_of: Mozilla/Add-ons/WebExtensions/Examples
+---
+<div>{{AddonSidebar}}</div>
+
+<p><span id="result_box" lang="de"><span>Um zu veranschaulichen, wie Erweiterungen entwickelt werden, gibt es von uns ein Repository mit einfachen Beispielerweiterungen unter https://github.com/mdn/webextensions-examples.</span></span> <span id="result_box" lang="de"><span>Dieser Artikel beschreibt die WebExtension-APIs, die in diesem Repository verwendet werden.</span></span></p>
+
+<p><span lang="de"><span>Diese Beispiele funktionieren in Firefox Nightly: Die meisten funktionieren in früheren Versionen von Firefox, aber überprüfen Sie zur Sicherheit den Schlüssel <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/applications">strict_min_version</a> in der Datei manifest.json der Erweiterung.</span><br>
+ <br>
+ <span>Wenn Sie diese Beispiele ausprobieren möchten, haben Sie drei Möglichkeiten:</span><br>
+ <br>
+ 1.  <span>Klonen Sie das Repository, und laden Sie die Erweiterung direkt aus dem Quellverzeichnis mit der Funktion <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">"Load Temporary Add-on"</a>.</span> <span>Die Erweiterung bleibt solange geladen, bis Sie Firefox neu starten.</span></span><br>
+ <span lang="de"><span>2. Klonen Sie das Repository und verwenden Sie dann das <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Getting_started_with_web-ext">web-ext</a> Befehlszeilentool, um Firefox mit der installierten Erweiterung auszuführen.</span><br>
+ 3. <span>Klonen Sie das Repository und gehen Sie dann zum <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">Build</a>-Verzeichnis.</span> <span>Dieses enthält "Build"- und "Signed"-Versionen aller Beispiele; Sie können sie also einfach in Firefox öffnen (mit Datei / Datei öffnen) und sie dauerhaft installieren, genau wie eine Erweiterung, die Sie von <a href="https://addons.mozilla.org/">addons.mozilla.org</a> installieren würden.</span><br>
+ <br>
+ <span>Wenn Sie einen Beitrag zum Repository leisten möchten, senden Sie uns ein <a href="https://github.com/mdn/webextensions-examples/blob/master/CONTRIBUTING.md">Pull-Request</a>!</span></span></p>
+
+<p>{{WebExtAllExamples}}</p>
diff --git a/files/de/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html b/files/de/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html
new file mode 100644
index 0000000000..1dffe19399
--- /dev/null
+++ b/files/de/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html
@@ -0,0 +1,15 @@
+---
+title: Browser support for JavaScript APIs
+slug: Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs
+translation_of: Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs
+---
+<div>{{AddonSidebar}}</div>
+
+<div>{{WebExtAllCompatTables}}</div>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<div class="note"><strong>Acknowledgements</strong>
+
+<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p>
+</div>
diff --git a/files/de/mozilla/add-ons/webextensions/deine_erste_weberweiterung/index.html b/files/de/mozilla/add-ons/webextensions/deine_erste_weberweiterung/index.html
new file mode 100644
index 0000000000..b48b805b98
--- /dev/null
+++ b/files/de/mozilla/add-ons/webextensions/deine_erste_weberweiterung/index.html
@@ -0,0 +1,155 @@
+---
+title: Deine erste Erweiterung
+slug: Mozilla/Add-ons/WebExtensions/Deine_erste_WebErweiterung
+tags:
+  - Anleitung
+  - Erweiterung
+  - Weberweiterung
+translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension
+---
+<div>{{AddonSidebar}}</div>
+
+<p>In diesem Artikel wird die Erstellung einer Erweiterung (Extension) für Firefox komplett beschrieben. Diese Erweiterung soll einen roten Rand zu jeder Seite, die von "mozilla.org" oder einer Subdomain geladen wurde, hinzufügen.</p>
+
+<p>Der Quellcode für dieses Beispiel ist auf GitHub auffindbar: <a href="https://github.com/mdn/webextensions-examples/tree/master/borderify">https://github.com/mdn/webextensions-examples/tree/master/borderify</a>.</p>
+
+<p>Als Erstes benötigst du Firefox Version 45 oder neuer.</p>
+
+<h2 id="Schreiben_der_Erweiterung">Schreiben der Erweiterung</h2>
+
+<p>Erstelle ein neues Verzeichnis und navigiere zu diesem:</p>
+
+<pre class="brush: bash">mkdir borderify
+cd borderify</pre>
+
+<h3 id="manifest.json">manifest.json</h3>
+
+<p>Jetzt erstelle eine Datei namens "manifest.json" direkt in dem "borderify" -Verzeichnis mit dem folgenden Inhalt:</p>
+
+<pre class="brush: json">{
+
+  "manifest_version": 2,
+  "name": "Borderify",
+  "version": "1.0",
+
+  "description": "Adds a red border to all webpages matching mozilla.org.",
+
+  "icons": {
+    "48": "icons/border-48.png"
+  },
+
+  "content_scripts": [
+    {
+      "matches": ["*://*.mozilla.org/*"],
+      "js": ["borderify.js"]
+    }
+  ]
+
+}</pre>
+
+<ul>
+ <li>Die ersten drei <em>Keys</em>: <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/manifest_version">manifest_version</a></code>, <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/name">name</a></code> und <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/version">version</a></code> sind verpflichtend und beinhalten grundlegende Metadaten für die Erweiterung.</li>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/description">description</a></code> ist optional, aber empfehlenswert: diese wird dann im Add-ons Manager angezeigt.</li>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/icons">icons</a></code> ist optional, aber empfehlenswert: es erlaubt es dir ein Icon für deine Erweiterung festzulegen, welches ebenfalls im Add-ons Manager angezeigt wird.</li>
+</ul>
+
+<p>Der interessanteste <em>Key</em> hier ist  <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code>, welcher Firefox auffordert, ein Skript in allen Webseiten zu laden, deren URLs einem spezifischen Muster zuzuordnen sind. In diesem Fall fragen wir Firefox nach dem Skript namens "borderify.js", um es in allen HTTP oder HTTPS Seiten von "mozilla.org" oder einer Subdomain zu laden.</p>
+
+<ul>
+ <li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">Lerne mehr über content scripts.</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Match_patterns">Lerne mehr über übereinstimmende Muster</a>.</li>
+</ul>
+
+<div class="warning">
+<p><a href="/en-US/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID#When_do_you_need_an_Add-on_ID">In manchen Situation musst eine ID für deine Erweiterung festlegen</a>. Wenn du eine Add-on ID festlegen musst, schreibe den  <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/applications">applications</a></code> key in <code>manifest.json</code> und setze die <code>gecko.id</code>-Eigenschaft:</p>
+
+<pre class="brush: json">"applications": {
+  "gecko": {
+    "id": "borderify@example.com"
+  }
+}</pre>
+</div>
+
+<h3 id="iconsborder-48.png">icons/border-48.png</h3>
+
+<p>Die Erweiterung sollte ein Icon haben. Dieses wird neben dem Erweiterungseintrag in dem Add-ons manager angezeigt. Unsere manifest.json gibt den Ort des Icons unter "icons/border-48.png" an.</p>
+
+<p>Erstelle das "icons" Verzeichnis direkt in dem "borderify" Verzeichnis. Speichere dort ein Icon namens "border-48.png".  Du kannst dazu das <a href="https://github.com/mdn/webextensions-examples/blob/master/borderify/icons/border-48.png">von unserem Beispiel benutzen</a>, welches von der Google Material Design Iconsammlung stammt und unter den Richtlinien der <a href="https://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike</a> Lizenz steht.</p>
+
+<p>Wenn du dich entscheidest ein eigenes Icon zu verwenden, dann sollte dieses 48x48 Pixel groß sein. Du kannst ebenfalls ein 96x96 Pixel großes Icon für hochauflösende Bildschirme, übergeben, welches dann als die <code>96</code> Property des <code>icons</code>-Objekts in der manifest.json festgelegt wird:</p>
+
+<pre class="brush: json">"icons": {
+  "48": "icons/border-48.png",
+  "96": "icons/border-96.png"
+}</pre>
+
+<p>Alternativ kannst du auch eine SVG-Datei übergeben, welche dann automatisch korrekt skaliert wird.<br>
+ (Beachte: Wenn du SVG verwendest und dein Symbol Text enthält, kannst du das Werkzeug "convert to path" deines SVG-Editors verwenden, um den Text zu verflachen, so dass er mit einer einheitlichen Größe/Position skaliert wird.</p>
+
+<ul>
+ <li><a href="/en-US/Add-ons/WebExtensions/manifest.json/icons">Lerne mehr über das festlegen von Icons.</a></li>
+</ul>
+
+<h3 id="borderify.js">borderify.js</h3>
+
+<p>Schließlich erstelle eine Datei namens "borderify.js" direkt in dem "borderify"-Verzeichnis mit diesem Inhalt:</p>
+
+<pre class="brush: js">document.body.style.border = "5px solid red";</pre>
+
+<p>Dieses Skript wird in Seiten geladen, welche mit dem Muster des  <code>content_scripts</code>-Keys in der manifest.json Datei übereinstimmen. Das Skript hat direkten Zugriff auf das Dokument, genauso wie die Skripte, die von der Seite selbst geladen werden.</p>
+
+<ul>
+ <li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">Lerne mehr über content scripts.</a></li>
+</ul>
+
+<h2 id="Probiere_es_aus">Probiere es aus:</h2>
+
+<p>Als Erstes stelle sicher, dass du die richtigen Dateien an den richtigen Orten hast:</p>
+
+<pre>borderify/
+    icons/
+        border-48.png
+    borderify.js
+    manifest.json</pre>
+
+<h3 id="Installiere_nun_das_Plugin">Installiere nun das Plugin</h3>
+
+<p>Öffne "about:debugging" in Firefox, klicke "Add-on temporär laden" und wähle eine beliebige Datei aus deinem Erweiterungsverzeichnis:</p>
+
+<p>{{EmbedYouTube("cer9EUKegG4")}}</p>
+
+<p>Die Erweiterung wird nun ausgeführt und ist solange aktiv, bis du Firefox neustartest.</p>
+
+<p>Alternativ kannst du Erweiterung auch von der Kommandozeile mit dem <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext">web-ext</a> Tool ausführen.</p>
+
+<h3 id="Teste_es_nun_aus">Teste es nun aus</h3>
+
+<p>Nun besuche eine Seite von "mozilla.org". Du solltest jetzt einen roten Rand um die Seite erkennen:</p>
+
+<p>{{EmbedYouTube("rxBQl2Z9IBQ")}}</p>
+
+<div class="note">
+<p>Versuche es allerdings nicht auf addons.mozilla.org! Content Scripts werden zurzeit auf dieser Domain geblockt.</p>
+</div>
+
+<p>Experimentiere nun ein bisschen. Bearbeite das "content script", um die Farbe des Randes zu ändern oder mache etwas anderes mit dem Seiteninhalt. Speichere das "content script", lade die Erweiterungsdateien in about:debugging neu mit Hilfe des "Neu laden"-Knopfs. Du kannst die Änderungen sofort sehen:</p>
+
+<p>{{EmbedYouTube("NuajE60jfGY")}}</p>
+
+<ul>
+ <li><a href="/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">Lerne mehr über das Laden von Erweiterungen</a></li>
+</ul>
+
+<h2 id="Verpacken_und_Veröffentlichen">Verpacken und Veröffentlichen</h2>
+
+<p>Damit andere Personen deine Erweiterung benutzen können musst du deine Erweiterung verpacken und zum Signieren an Mozilla senden. Um mehr darüber zu lernen, siehe  <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension">"Deine Erweiterung veröffentlichen"</a>.</p>
+
+<h2 id="Was_nun">Was nun?</h2>
+
+<p>Jetzt hast du eine Vorstellung vom Prozess der WebExtension-Entwicklung für Firefox erhalten. Versuche:</p>
+
+<ul>
+ <li><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">mehr über die Anatomie von Erweiterungen zu lesen</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Your_second_WebExtension">eine komplexere Erweiterung zu schreiben</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/API">über die verfügbaren JavaScript APIs für Erweiterungen zu lesen.</a></li>
+</ul>
diff --git a/files/de/mozilla/add-ons/webextensions/deine_zweite_erweiterung/index.html b/files/de/mozilla/add-ons/webextensions/deine_zweite_erweiterung/index.html
new file mode 100644
index 0000000000..cc002d0b24
--- /dev/null
+++ b/files/de/mozilla/add-ons/webextensions/deine_zweite_erweiterung/index.html
@@ -0,0 +1,357 @@
+---
+title: Deine zweite Erweiterung
+slug: Mozilla/Add-ons/WebExtensions/Deine_zweite_Erweiterung
+translation_of: Mozilla/Add-ons/WebExtensions/Your_second_WebExtension
+---
+<p>{{AddonSidebar}}</p>
+
+<p>Wenn du den Artikel "<a href="https://developer.mozilla.org/de/Add-ons/WebExtensions/Deine_erste_WebErweiterung">Deine erste Erweiterung</a>" gelesen hast, hast du schon eine Vorstellung, wie man eine Erweiterung schreibt. In diesem Artikel werden wir eine komplexere Erweiterung schreiben, die mehr APIs benutzt.</p>
+
+<p>Die Erweiterung fügt eine neue Schaltfläche zu Firefox hinzu. Wenn der Nutzer diese anklickt, wird ihm ein Popup angezeigt auf dem er ein Tier auswählen kann. Sobald er eines ausgewählt hat, wird der aktulle Inhalt der Website mit dem Bild des ausgewählten Tieres ersetzt.</p>
+
+<p>Um das zu implementieren werden wir:</p>
+
+<ul>
+ <li><strong>eine <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/user_interface/Browser_action">Browser-Aktion</a> definieren, die zur Firefox-Toolbar hinzugefügt werden wird.</strong><br>
+  Für die Schaltfläche benötigen wir:
+  <ul>
+   <li>ein Icon namens "beasts-32.png"</li>
+   <li>Ein Popup welches sich öffnet, sobald der Nutzer auf die Schaltfläche klickt. Das Popup wird <a href="https://developer.mozilla.org/de/docs/Glossary/HTML">HTML</a>, <a href="https://developer.mozilla.org/de/docs/Glossary/CSS">CSS</a>, und <a href="https://developer.mozilla.org/de/docs/Glossary/JavaScript">JavaScript</a> beinhalten.</li>
+  </ul>
+ </li>
+ <li><strong>ein Icon festlegen</strong>, genannt "beasts-48.png". Dieses wird im Addon-Manager angezeigt werden.</li>
+ <li><strong>Ein content-script "beastify.js" schreiben, welches auf Webseiten angezeigt werden wird.</strong><br>
+  Das ist der Code, der letztendlich die Webseite verändert.</li>
+ <li><strong>Einige Tier-Bilder einfügen, um die Bilder auf der Webseite zu ersetzen</strong><br>
+  Die Bilder werden "web-abrufbare Ressourcen" werden, sodass die Webseite sie abrufen kann.</li>
+</ul>
+
+<p>Man kann die Struktur der Erweiterung wie folgt darstellen:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13671/Untitled-1.png" style="display: block; height: 1200px; margin-left: auto; margin-right: auto; width: 860px;"></p>
+
+<p>Es ist eine einfache Erweiterung, aber es zeigt viele der Grundkonzepte der WebExtensions API:</p>
+
+<ul>
+ <li>Hinzufügen einer Schaltfläche zur Toolbar</li>
+ <li>Erstellen eines Popup-Menüs mit HTML, CSS, und JavaScript</li>
+ <li>Verändern des Webseiteninhalts</li>
+ <li>Kommunikation zwischen dem content-script und dem Rest der Erweiterung</li>
+ <li>Verpacken von Ressourcen, die später auf der Webseite genutzt werden können.</li>
+</ul>
+
+<p>Der <a href="https://github.com/mdn/webextensions-examples/tree/master/beastify">komplette Quellcode der Erweiterung</a> ist auf GitHub zu finden.</p>
+
+<p>Um die Erweiterung zu erstellen, brauchst du mindestens Firefox 45.</p>
+
+<h2 id="Die_Erweiterung_schreiben">Die Erweiterung schreiben</h2>
+
+<p>Erstelle einen neuen Ordner und öffne ihn:</p>
+
+<pre class="brush: bash">mkdir beastify
+cd beastify</pre>
+
+<h3 id="manifest.json">manifest.json</h3>
+
+<p>Erstelle jetzt eine Datei namens "manifest.json" und füge den folgenden Inhalt ein:</p>
+
+<pre class="brush: json">{
+
+  "manifest_version": 2,
+  "name": "Beastify",
+  "version": "1.0",
+
+  "description": "Erstellt eine Schaltfläche in der Toolbar. Klicke auf eine der Schaltflächen, um ein Tier auszuwählen. Der Inhalt des gerade geöffneten Tabs wird dann mit dem Bild des ausgewählten Tieres ersetzt. Nachschlagen: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples#beastify",
+  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/beastify",
+  "icons": {
+    "48": "icons/beasts-48.png"
+  },
+
+  "permissions": [
+    "activeTab"
+  ],
+
+  "browser_action": {
+    "default_icon": "icons/beasts-32.png",
+    "default_title": "Beastify",
+    "default_popup": "popup/choose_beast.html"
+  },
+
+  "web_accessible_resources": [
+    "beasts/frog.jpg",
+    "beasts/turtle.jpg",
+    "beasts/snake.jpg"
+  ]
+
+}
+</pre>
+
+<ul>
+ <li>Die ersten drei Eigenschaften <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/manifest_version">manifest_version</a></code>, <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/name">name</a></code>, und <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/version">version</a></code> sind erforderlich und enthalten Basismetadaten.</li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/description">description</a></code> und <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/homepage_url">homepage_url</a></code> sind optional aber empfohlen, sie erhalten nützliche Informationen.</li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/icons">icons</a></code> ist optional aber empfohlen, hier kannst du ein Icon festlegen, welches im Addon-Manager angezeigt werden wird.</li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code> listet die Berechtigungen auf, die die Erweiterung benötigt. Hier brauchen wir nur die <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions#activeTab_permission">activeTab Berechtigung</a>.</li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> spezifiziert die Schaltfläche. Hier übergeben wir drei Informationen:
+  <ul>
+   <li><code>default_icon</code> ist notwendig, und gibt das Icon der Schaltfläche an</li>
+   <li><code>default_title</code> ist optional und wird unter dem Icon angezeigt</li>
+   <li><code>default_popup</code> wird verwendet, wenn ein Popup angezeigt werden soll, sobald der Nutzer auf die Schaltfläche klickt. Das soll so sein, deshalb wird hier die Eigenschaft mit einer HTML-Datei belegt.</li>
+  </ul>
+ </li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources">web_accessible_resources</a></code> listet die Dateien auf, die auf Webseiten verwendet werden solllen. Weil die Erweiterung den Inhalt der Webseite mit den Bilder, die der Erweiterung hinzugefügt wurden, verändern soll, müssen die Bilder hier aufgelistet werden.</li>
+</ul>
+
+<p>Beachte, dass alle Pfade relativ zur manifest.json angegeben werden.</p>
+
+<h3 id="Das_Icon">Das Icon</h3>
+
+<p>Die Erweiterung soll ein Icon beinhalten, das neben dem Eintrag der Erweiterung in der Add-ons-Verwaltung angezeigt wird (diese kannst du durch Aufrufen der URL "about:addons" öffnen). In manifest.json haben wir festgelegt, dass wir ein Icon für die Toolbar unter "icons/beasts-48.png" bereitstellen.</p>
+
+<p>Erstelle das "icons"-Verzeichnis and speichere dort das Icon namens "beasts-48.png".  Du kannst das <a href="https://github.com/mdn/webextensions-examples/blob/master/beastify/icons/beasts-48.png">Icon aus unserem Beispiel</a> verwenden, welches aus dem <a href="https://www.iconfinder.com/iconsets/free-retina-icon-set">Aha-Soft’s Free Retina Icon-Set</a> stammt und gemäß seiner <a href="http://www.aha-soft.com/free-icons/free-retina-icon-set/">Lizenzbestimmungen</a> genutzt wird.</p>
+
+<p>Wenn du dich entscheidest, ein eigenes Icon zu verwenden, sollte es eine Auflösung von 48x48 Pixeln besitzen. Zusätzlich kannst du ein 96x96 Pixel großes Icon für hochaufgelöste Bildschirme bereitstellen. In diesem Fall wird es unter der Eigenschaft <code>96</code> des <code>icons</code> Objekts in manifest.json aufgeführt:</p>
+
+<pre class="brush: json line-numbers  language-json"><code class="language-json"><span class="key token">"icons":</span> <span class="punctuation token">{</span>
+  <span class="key token">"48":</span> <span class="string token">"icons/beasts-48.png"</span><span class="punctuation token">,</span>
+  <span class="key token">"96":</span> <span class="string token">"icons/beasts-96.png"</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="Die_Toolbar-Schaltfläche">Die Toolbar-Schaltfläche</h3>
+
+<p>Die Toolbar-Schaltfläche benötigt ebenfalls ein Icon, das laut unserer manifest.json unter "icons/beasts-32.png" bereitsteht.</p>
+
+<p>Speichere ein Icon namens "beasts-32.png" im Verzeichnis "icons".Du kannst das <a href="https://github.com/mdn/webextensions-examples/blob/master/beastify/icons/beasts-32.png">Icon aus unserem Beispiel</a> verwenden, welches aus dem <a href="http://www.iconbeast.com/free">IconBeast Lite Icon-Set</a> stammt und gemäß seiner <a href="http://www.iconbeast.com/faq/">Lizenzbestimmungen</a> genutzt wird.</p>
+
+<p>Wenn du kein Popup einsetzt, dann wird ein Klick-Event zur Erweiterung gesendet, sobald der Benutzer die Schaltfläche anklickt. Wenn du hingegen ein Popup einsetzt, wird dieses Klick-Event nicht gesendet, sondern das Popup wird geöffnet. Da wir ein Popup verwenden wollen, soll dieses im nächsten Schritt erstellt werden.</p>
+
+<h3 id="Das_Popup">Das Popup</h3>
+
+<p>Mithilfe des Popups soll der Benutzer eines von drei Tieren auswählen können.</p>
+
+<p>Erstelle ein neues Verzeichnis namens "popup" in der obersten Ebene des Erweiterungsverzeichnisses. Dieses Verzeichnis wird den Code für das Popup enthalten. Das Popup besteht aus drei Dateien:</p>
+
+<ul>
+ <li><strong><code>choose_beast.html</code></strong> legt den Inhalt des Fensters fest</li>
+ <li><strong><code>choose_beast.css</code></strong> legt das Styling des Fensters fest</li>
+ <li><strong><code>choose_beast.js</code></strong> verarbeitet die Auswahl des Benutzers, indem es im aktiven Tab ein Content Script ausführt</li>
+</ul>
+
+<h4 id="choose_beast.html">choose_beast.html</h4>
+
+<p>Die HTML-Datei sieht folgendermaßen aus:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;link rel="stylesheet" href="choose_beast.css"/&gt;
+  &lt;/head&gt;
+
+  &lt;body&gt;
+    &lt;div class="button beast"&gt;Frog&lt;/div&gt;
+    &lt;div class="button beast"&gt;Turtle&lt;/div&gt;
+    &lt;div class="button beast"&gt;Snake&lt;/div&gt;
+    &lt;div class="button clear"&gt;Reset&lt;/div&gt;
+
+    &lt;script src="choose_beast.js"&gt;&lt;/script&gt;
+  &lt;/body&gt;
+
+&lt;/html&gt;</pre>
+
+<p>Es gibt ein Element für jedes Tier. Beachte, dass in dieser Datei auch die CSS- und JavaScript-Dateien verlinkt werden, genau wie auf einer Website.</p>
+
+<h4 id="choose_beast.css">choose_beast.css</h4>
+
+<p>Die CSS-Datei legt die Größe des Popups fest, stellt sicher, dass die drei Auswahlmöglichkeiten, den verfügbaren Platz ausfüllen und legt das grundlegende Styling fest:</p>
+
+<pre class="brush: css">html, body {
+  width: 100px;
+}
+
+.button {
+  margin: 3% auto;
+  padding: 4px;
+  text-align: center;
+  font-size: 1.5em;
+  cursor: pointer;
+}
+
+.beast:hover {
+  background-color: #CFF2F2;
+}
+
+.beast {
+ background-color: #E5F2F2;
+}
+
+.clear {
+ background-color: #FBFBC9;
+}
+
+.clear:hover {
+ background-color: #EAEAC9;
+}
+</pre>
+
+<h4 id="choose_beast.js">choose_beast.js</h4>
+
+<p>In der JavaScript-Datei des Popups empfangen wir Klick-Events. Wenn ein Klick auf eines der Tiere erfolgte, wird das Content Script zum aktiven Tab hinzugefügt. Sobald das Content Script geladen wird, übergeben wir ihm eine Nachricht mit der Auswahl des Tieres:</p>
+
+<pre class="brush: js">/*
+Given the name of a beast, get the URL to the corresponding image.
+*/
+function beastNameToURL(beastName) {
+  switch (beastName) {
+    case "Frog":
+      return browser.extension.getURL("beasts/frog.jpg");
+    case "Snake":
+      return browser.extension.getURL("beasts/snake.jpg");
+    case "Turtle":
+      return browser.extension.getURL("beasts/turtle.jpg");
+  }
+}
+
+/*
+Listen for clicks in the popup.
+
+If the click is on one of the beasts:
+  Inject the "beastify.js" content script in the active tab.
+
+  Then get the active tab and send "beastify.js" a message
+  containing the URL to the chosen beast's image.
+
+If it's on a button which contains class "clear":
+  Reload the page.
+  Close the popup. This is needed, as the content script malfunctions after page reloads.
+*/
+
+document.addEventListener("click", (e) =&gt; {
+  if (e.target.classList.contains("beast")) {
+    var chosenBeast = e.target.textContent;
+    var chosenBeastURL = beastNameToURL(chosenBeast);
+
+    browser.tabs.executeScript(null, {
+      file: "/content_scripts/beastify.js"
+    });
+
+    var gettingActiveTab = browser.tabs.query({active: true, currentWindow: true});
+    gettingActiveTab.then((tabs) =&gt; {
+      browser.tabs.sendMessage(tabs[0].id, {beastURL: chosenBeastURL});
+    });
+  }
+  else if (e.target.classList.contains("clear")) {
+    browser.tabs.reload();
+    window.close();
+  }
+});
+</pre>
+
+<p>It uses three WebExtensions API functions:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/executeScript">browser.tabs.executeScript</a></code> to inject a content script found at "content_scripts/beastify.js" into the active tab</li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/query">browser.tabs.query</a></code> to get the active tab</li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/sendMessage">browser.tabs.sendMessage</a></code> to send a message to content scripts running in the active tab. The message contains the URL to an image of the chosen beast.</li>
+</ul>
+
+<h3 id="The_content_script">The content script</h3>
+
+<p>Create a new directory, under the extension root, called "content_scripts" and create a new file in it called "beastify.js", with the following contents:</p>
+
+<pre class="brush: js">/*
+beastify():
+* removes every node in the document.body,
+* then inserts the chosen beast
+* then removes itself as a listener
+*/
+function beastify(request, sender, sendResponse) {
+  removeEverything();
+  insertBeast(request.beastURL);
+  browser.runtime.onMessage.removeListener(beastify);
+}
+
+/*
+Remove every node under document.body
+*/
+function removeEverything() {
+  while (document.body.firstChild) {
+    document.body.firstChild.remove();
+  }
+}
+
+/*
+Given a URL to a beast image, create and style an IMG node pointing to
+that image, then insert the node into the document.
+*/
+function insertBeast(beastURL) {
+  var beastImage = document.createElement("img");
+  beastImage.setAttribute("src", beastURL);
+  beastImage.setAttribute("style", "width: 100vw");
+  beastImage.setAttribute("style", "height: 100vh");
+  document.body.appendChild(beastImage);
+}
+
+/*
+Assign beastify() as a listener for messages from the extension.
+*/
+browser.runtime.onMessage.addListener(beastify);
+</pre>
+
+<p>The content script adds a listener to messages from the extension (specifically, from "choose_beast.js" above). In the listener, it:</p>
+
+<ul>
+ <li>removes every element in the <code>document.body</code></li>
+ <li>creates an <code>&lt;img&gt;</code> element pointing to the given URL, and inserts it into the DOM</li>
+ <li>removes the message listener.</li>
+</ul>
+
+<h3 id="The_beasts">The beasts</h3>
+
+<p>Finally, we need to include the images of the animals.</p>
+
+<p>Create a new directory called "beasts", and add the three images in that directory, with the appropriate names. You can get the images from <a href="https://github.com/mdn/webextensions-examples/tree/master/beastify/beasts">the GitHub repository</a>, or from here:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11459/frog.jpg" style="display: inline-block; height: 200px; margin: 20px; width: 200px;"><img alt="" src="https://mdn.mozillademos.org/files/11461/snake.jpg" style="display: inline-block; height: 200px; margin: 20px; width: 200px;"><img alt="" src="https://mdn.mozillademos.org/files/11463/turtle.jpg" style="display: inline-block; height: 200px; margin: 20px; width: 200px;"></p>
+
+<h2 id="Testing_it_out">Testing it out</h2>
+
+<p>First, double check that you have the right files in the right places:</p>
+
+<pre>beastify/
+
+    beasts/
+        frog.jpg
+        snake.jpg
+        turtle.jpg
+
+    content_scripts/
+        beastify.js
+
+    icons/
+        beasts-32.png
+        beasts-48.png
+
+    popup/
+        choose_beast.css
+        choose_beast.html
+        choose_beast.js
+
+    manifest.json</pre>
+
+<p>Starting in Firefox 45, you can install extensions temporarily from disk.</p>
+
+<p>Open "about:debugging" in Firefox, click "Load Temporary Add-on", and select your manifest.json file. You should then see the extension's icon appear in the Firefox toolbar:</p>
+
+<p>{{EmbedYouTube("sAM78GU4P34")}}</p>
+
+<p>Open a web page, then click the icon, select a beast, and see the web page change:</p>
+
+<p>{{EmbedYouTube("YMQXyAQSiE8")}}</p>
+
+<h2 id="Developing_from_the_command_line">Developing from the command line</h2>
+
+<p>You can automate the temporary installation step by using the <a href="/en-US/Add-ons/WebExtensions/Getting_started_with_web-ext">web-ext</a> tool. Try this:</p>
+
+<pre class="brush: bash">cd beastify
+web-ext run</pre>
diff --git a/files/de/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html b/files/de/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html
new file mode 100644
index 0000000000..688d48f544
--- /dev/null
+++ b/files/de/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html
@@ -0,0 +1,143 @@
+---
+title: Extending the developer tools
+slug: Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools
+tags:
+  - Deutsch Guide
+  - DevTools
+  - Extentions
+  - german
+translation_of: Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools
+---
+<div class="note">
+<p>Das heißt Folgendes wird nicht unterstützt , sie können Änderungen an der Seite sehen, die von Seitenskripten vorgenommen wurden.Diese Seite beschreibt devtools-APIs, wie sie in Firefox 55 vorhanden sind. Obwohl die APIs auf den Chrome devtools APIs basieren, gibt es noch viele Funktionen, die in Firefox noch nicht implementiert sind und daher hier nicht dokumentiert sind. Informationen zu den derzeit fehlenden Funktionen finden Sie unter Einschränkungen der devtools-APIs.</p>
+</div>
+
+<ul>
+ <li>Sie können WebExtensions-APIs verwenden, um die integrierten Entwicklertools des Browsers zu erweitern. Um eine devtools-Erweiterung zu erstellen, geben Sie den Schlüssel "devtools_Seite" in manifest.json ein:</li>
+ <li>
+  <pre class="brush: json">"devtools_seite": "devtools/devtools-seite.html"</pre>
+ </li>
+ <li><span style="font-size: 1rem; letter-spacing: -0.00278rem;">Der Wert dieses Schlüssels ist eine URL, die auf eine HTML-Datei verweist, die mit Ihrer Erweiterung gebündelt wurde . Die URL sollte relativ zur manifest.json-Datei selbst sein.</span></li>
+ <li>Die HTML-Datei definiert eine spezielle Seite in der Verlängerung, Seite der devtools ResourceHinzufügen
+  <h3 id="Devtools_Seite">Devtools Seite</h3>
+ </li>
+ <li><span style="font-size: 1rem; letter-spacing: -0.00278rem;">Die davetool Seite wird beim Öffnen der Browser Devtools geladen und beim Schließen entladen. Beachten Sie, dass, weil die devtools Fenster mit einem einzigen Register zugeordnet ist, es für mehr als ein devtools Fenster durchaus möglich ist - also mehr als eine devtools Seite - zur gleichen Zeit existieren.</span></li>
+</ul>
+
+<p><span style="font-size: 1rem; letter-spacing: -0.00278rem;">Die devtools-Seite hat kein sichtbares DOM, kann aber JavaScript-Quellen mit &lt;script&gt; -Tags enthalten. Die Quellen müssen mit der Erweiterung selbst gebündelt werden. Die normalen DOM-APIs, auf die über das globale Fensterobjekt zugegriffen werden kann Die gleichen WebExtension-APIs wie in Inhaltsskripten Die devtools-APIs: Devtools </span>inspiziertes Fenster devtools.network devtools.panels Beachten Sie, dass die devtools-Seite keinen Zugriff auf andere Web Extensions-APIs erhält und die Hintergrundseite keinen Zugriff auf die devtools-APIs erhält. Stattdessen müssen die davetool-Seite und die Hintergrundseite definiert werden. Verwenden der Laufzeit-Messeging-APIs. Hier ist ein Beispiel:</p>
+
+<div class="twocolumns">
+<ul>
+ <li>
+  <pre class="syntaxbox">&lt;!DOCTYPE html&gt; &lt;html&gt;   &lt;head&gt;     &lt;meta charset="utf-8"&gt;   &lt;/head&gt;   &lt;body&gt;     &lt;script sec="devtools.js"&gt;&lt;/script&gt;   &lt;/body&gt; &lt;/html&gt;The devtools.js file will hold the actual code creating your dev tools extensions.</pre>
+ </li>
+ <li>
+  <h3 id="Erstellen_von_panel">Erstellen von panel </h3>
+ </li>
+ <li>Das devtools-Fenster enthält eine Reihe separater Tools - den JavaScript-Debugger, den Netzwerkmonitor usw.  Über eine Reihe von Registerkarten am oberen Rand kann der Benutzer zwischen den verschiedenen Werkzeugen wechseln.  Das Fenster, in dem sich die Benutzeroberfläche jedes Tools befindet, wird als "Panel" bezeichnet.</li>
+ <li><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Gebrauche der </span></font>devtools.panels.create()</code> API,,  um Ihren eigenen  Panel Herzustellen in devtools Fenster(Window)</li>
+ <li>
+  <pre class="brush: js">browser.devtools.panels.create(
+  "My Panel",                      // title
+  "icons/star.png",                // icon
+  "devtools/panel/panel.html"      // content
+).then((newPanel) =&gt; {
+  newPanel.onShown.addListener(initialisePanel);
+  newPanel.onHidden.addListener(unInitialisePanel);
+});</pre>
+ </li>
+ <li>
+  <p>Hierfür sind drei Argumente erforderlich: Titel, Symbol und Inhalt des Panels.  Es wird ein Versprechen zurück gegeben, das devtool panel ExtensionPanel-Objekt aufgelöst wird, das in neue Panel darstellt.</p>
+ </li>
+ <li><code>devtools.panels.ExtensionPanel</code> dieser obieckt reprsentiert das neue Panel</li>
+ <li>
+  <h3 id="Interaktion_mit_dem_Zielfenster">Interaktion mit dem Zielfenster</h3>
+ </li>
+ <li>Die Entwicklertools sind immer an eine bestimmte Browserregisterkarte angehängt.  Dies wird als "Ziel" für die Entwicklertools oder als "inspiziertes Fenster" bezeichnet, damit können Sie inspizierten Fenster mit der Sie interagieren</li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow">devtools.inspectedWindow</a></code> API.</li>
+</ul>
+</div>
+
+<dl>
+ <dt>
+ <h3 id="Code_im_Zielfenster_ausführen">Code im Zielfenster ausführen</h3>
+ </dt>
+</dl>
+
+<p>Der<code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/eval">devtools.inspectedWindow.eval()</a></code> bereitgestellt in einfacher weisen um den Code auszuführen in den lnspector Fensten </p>
+
+<div class="blockIndicator note">
+<p class="syntaxbox">Arbeiten mit Inhaltsskripten Dies entspricht in etwa der Verwendung von {{WebExtAPIRef ("tabs.executeScript ()")}} zum Einfügen eines Inhaltsskripts, mit einem wichtigen Unterschied nommen wurden.Beachten Sie, dass eine saubere Ansicht des DOM eine Sicherheitsfunktion ist, mit der verhindert werden soll, dass feindliche Seiten Erweiterungen austricksen, indem das Verhalten nativer DOM-Funktionen neu definiert wird.  Das bedeutet, dass Sie mit eval () sehr vorsichtig sein müssen und ein normales Inhaltsskript verwenden sollten, wenn Sie können.</p>
+</div>
+
+<p>Mit devtools.inspectedWindow.eval () geladene Skripte sehen auch keine von c definierten JavaJavaScript-Variablen</p>
+
+<h3 id="Arbeiten_mit_Inhaltsskripten">Arbeiten mit Inhaltsskripten</h3>
+
+<p>devtools document hat keinen direkten Zugrif Beachten Sie, dass eine saubere Ansicht des DOM eine Sicherheitsfunktion ist, mit der verhindert werden soll, dass feindliche Seiten Erweiterungen austricksen, indem das Verhalten nativer DOM-Funktionen neu definiert wird.  Das bedeutet, dass Sie mit eval () sehr vorsichtig sein müssen und ein normales Inhaltsskript verwenden sollten, wenn Sie können.&lt;</p>
+
+<p>Bei einem Skript muss das devtools5-Dokument eine Nachricht senden, in der es aufgefordert wird, das Skript einzufügen.  Die devtools.inspectedWindow.table gibt die ID der Zielregisterkarte an:</p>
+
+<p>Wenn Sie Nachrichten zwischen den im Zielfenster ausgeführten Inhaltsskripten und einem devtools-Dokument austauschen müssen, sollten Sie {{WebExtAPIRef ("runtime.connect ()")} und {{WebExtAPIRef ("runtime.onConnect") verwenden  ")}}, um eine Verbindung zwischen der Hintergrundseite und dem devtools-Dokument herzustellen.  Die Hintergrundseite kann dann eine Zuordnung zwischen Registerkarten-IDs und {{WebExtAPIRef ("runtime.Port")}} -Objekten verwalten und diese verwenden, um Nachrichten zwischen den beiden Bereichen weiterzuleiten.</p>
+
+<p>Diese APIs basieren auf den Chrome devtools-APIs, aber im Vergleich zu Chrome fehlen noch viele Funktionen.  In diesem Abschnitt werden die Funktionen aufgeführt, die ab Firefox 54 noch nicht implementiert sind. Beachten Sie, dass sich die devtools-APIs in der aktiven Entwicklung befinden und wir erwarten, dass die meisten davon in zukünftigen Versionen unterstützt werden.</p>
+
+<ul>
+ <li>
+  <pre class="brush: js">// devtools-panel.js
+
+const scriptToAttach = "document.body.innerHTML = 'Hi from the devtools';";
+
+window.addEventListener("click", () =&gt; {
+  browser.runtime.sendMessage({
+    tabId: browser.devtools.inspectedWindow.tabId,
+    script: scriptToAttach
+  });
+});</pre>
+ </li>
+ <li>
+  <pre class="brush: js">// background.js
+
+function handleMessage(request, sender, sendResponse) {
+  browser.tabs.executeScript(request.tabId, {
+    code: request.script
+  });
+}
+
+browser.runtime.onMessage.addListener(handleMessage);</pre>
+ </li>
+ <li><img alt="" src="https://mdn.mozillademos.org/files/14923/devtools-content-scripts.png" style="display: block; height: 416px; margin-left: auto; margin-right: auto; width: 600px;"></li>
+ <li>
+  <h2 id="Einschränkungen_der_devtools_APIs">Einschränkungen der devtools APIs</h2>
+ </li>
+ <li>
+  <h3 id="devtools_inspizierte_Window">devtools inspizierte Window</h3>
+ </li>
+ <li>Folgendes wird nicht unterstüzt</li>
+ <li><code>inspectedWindow.getResources()</code></li>
+ <li><code>inspectedWindow.onResourceAdded</code></li>
+ <li><code>inspectedWindow.onResourceContentCommitted</code></li>
+ <li>None of the options to <code>inspectedWindow.eval()</code> are supported.</li>
+ <li>Scripts injected using <code>inspectedWindow.eval()</code> can't use all the Console's command-line helper functions, but <code>$0</code> and <code>inspect(...)</code> are both supported (starting from Firefox 55).</li>
+ <li>
+  <h3 id="devtools.panele">devtools.panele</h3>
+ </li>
+ <li>The following are not supported:</li>
+ <li><code>panels.elements</code></li>
+ <li><code>panels.sources</code></li>
+ <li><code>panels.setOpenResourceHandler()</code></li>
+ <li><code>panels.openResource()</code></li>
+ <li><code>panels.ExtensionPanel.createStatusBarButton()</code></li>
+ <li><code>panels.Button</code></li>
+ <li><code>panels.ElementsPanel</code></li>
+ <li><code>panels.SourcesPanel</code></li>
+ <li>
+  <h3 id="Beispielsweise">Beispielsweise</h3>
+ </li>
+ <li>Das <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> bericht an GitHub, enthält einige Beispiele für Erweiterungen, die devtools-Panels verwenden:</li>
+ <li>
+  <p><a href="https://github.com/mdn/webextensions-examples/blob/master/devtools-panels/">devtools-panels</a> benutzen Sie dentools Panels</p>
+ </li>
+</ul>
+
+<p><span style="display: none;"> </span></p>
diff --git a/files/de/mozilla/add-ons/webextensions/index.html b/files/de/mozilla/add-ons/webextensions/index.html
new file mode 100644
index 0000000000..bb1b68b2de
--- /dev/null
+++ b/files/de/mozilla/add-ons/webextensions/index.html
@@ -0,0 +1,86 @@
+---
+title: WebExtensions
+slug: Mozilla/Add-ons/WebExtensions
+translation_of: Mozilla/Add-ons/WebExtensions
+---
+<div>{{AddonSidebar}}</div>
+
+<p>WebExtensions sind ein Cross-Browser-System zur Entwicklung von Browser-Add-ons. Das System ist in weiten Teilen kompatibel mit der <a class="external-icon external" href="https://developer.chrome.com/extensions">extension API</a>, welche von Google Chrome und Opera unterstützt wird. Erweiterungen, welche für diese Browser geschrieben wurden, werden in den meisten Fällen mit <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Porting_from_Google_Chrome">nur wenigen Anpassungen</a> auch in Firefox oder <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/">Microsoft Edge</a> lauffähig sein. Die API ist außerdem vollständig kompatibel mit <a href="https://developer.mozilla.org/en-US/Firefox/Multiprocess_Firefox">Multiprozess-Firefox</a>.</p>
+
+<p>Wir beabsichtigen auch, die APIs zu erweitern, um die Unterstützung für Add-on-Entwickler zu verbessern. Sollten Sie Vorschläge dazu haben, würden wir uns über Ihre Mitteilung freuen. Sie erreichen uns über die englischsprachige <a href="https://mail.mozilla.org/listinfo/dev-addons">Mailingliste für Add-on-Entwickler</a> oder auf <a href="irc://irc.mozilla.org/webextensions">#webextensions</a> im <a href="https://wiki.mozilla.org/IRC">IRC</a>.</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h3 id="Erste_Schritte">Erste Schritte</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/What_are_WebExtensions_">Was sind WebExtensions?</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Your_first_WebExtension">Deine erste WebExtension</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Your_second_WebExtension">Deine zweite WebExtension</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">Anatomie einer WebExtension</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Examples">Beispiel-WebExtensions</a></li>
+</ul>
+
+<h3 id="Kurzanleitungen">Kurzanleitungen</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests">Abfangen von HTTP-Anfragen</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Modify_a_web_page">Eine Web-Seite verändern</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar">Eine Schaltfläche zu einer Werkzeugleiste hinzufügen</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page">Eine Einstellungen-Seite erstellen</a></li>
+ <li>Browser-Tabs beeinflussen</li>
+ <li>Zugreifen auf und verändern von Lesezeichen</li>
+ <li>Zugreifen auf und verändern von Cookies</li>
+</ul>
+
+<h3 id="Konzepte">Konzepte</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Using_the_JavaScript_APIs">Verwendung der JavaScript-APIs</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">Content scripts</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Match_patterns">Match patterns</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Internationalization">Internationalisierung</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">Content Security Policy</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Native_messaging">Native messaging</a></li>
+</ul>
+
+<h3 id="Portieren">Portieren</h3>
+
+<ul>
+ <li><a href="/en-US/Add-ons/WebExtensions/Porting_from_Google_Chrome">Portieren einer Google Chrome-Erweiterung</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Porting_a_legacy_Firefox_add-on">Portieren eines veralteten Firefox Add-ons</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Embedded_WebExtensions">Eingebettete WebExtensions</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_the_Add-on_SDK">Vergleich mit dem Add-on SDK</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_XUL_XPCOM_extensions">Vergleich mit XUL/XPCOM-Erweiterungen</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities">Inkompatibilitäten mit Chrome</a></li>
+</ul>
+
+<h3 id="Firefox_workflow">Firefox workflow</h3>
+
+<ul>
+ <li><a href="/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">Installation</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Debugging">Debugging</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext">Einstieg in Web-Ext</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/web-ext_command_reference">Web-Ext Befehlsreferenz</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID">WebExtensions und die Add-On-ID</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension">Veröffentlichen deiner WebExtension</a></li>
+</ul>
+</div>
+
+<div class="section">
+<h3 id="Referenz">Referenz</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API">JavaScript-API-Überblick</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">Tabellen zur Browser-Kompatibilität zu JavaScript-APIs</a></li>
+</ul>
+
+<h4 id="JavaScript_APIs">JavaScript APIs</h4>
+
+<div class="twocolumns">{{ ListSubpages ("/en-US/Add-ons/WebExtensions/API") }}</div>
+
+<h4 id="Manifest_keys">Manifest keys</h4>
+
+<div class="twocolumns">{{ ListSubpages ("/en-US/Add-ons/WebExtensions/manifest.json") }}</div>
+</div>
+</div>
diff --git a/files/de/mozilla/add-ons/webextensions/manifest.json/commands/index.html b/files/de/mozilla/add-ons/webextensions/manifest.json/commands/index.html
new file mode 100644
index 0000000000..6222b35145
--- /dev/null
+++ b/files/de/mozilla/add-ons/webextensions/manifest.json/commands/index.html
@@ -0,0 +1,184 @@
+---
+title: commands
+slug: Mozilla/Add-ons/WebExtensions/manifest.json/commands
+tags:
+  - Add-ons Erweiterungen WebExtensions
+translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/commands
+---
+<div>{{AddonSidebar}}</div>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 30%;">Typ</th>
+   <td><code>Objekt</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Obligatorisch</th>
+   <td>Nein</td>
+  </tr>
+  <tr>
+   <th scope="row">Beispiel</th>
+   <td>
+    <pre class="brush: json no-line-numbers">
+"commands": {
+  "toggle-feature": {
+    "suggested_key": {
+      "default": "Ctrl+Shift+Y",
+      "linux": "Ctrl+Shift+U"
+    },
+    "description": "Ereignis 'toggle-feature' senden"
+  }
+}</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Verwenden Sie den<code>commands-Schlüssel, um für Ihre Erweiterung eine oder mehrere Tastenkürzel zu definieren</code>.</p>
+
+<p>Jedes Tastenkürzel wird mit einem Namen, eine Kombination von Tasten und einer Beschreibung definiert. Sobald Sie einige Befehle in der manifest.json definiert haben, können Sie die zugewiesenen Tastenkombinationen mittels der JavaScript-API  {{WebExtAPIRef("commands")}} verwenden.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>Der <code>commands-Schlüssel</code>ist ein Objekt, und jedes Tastenkürzel ist eine Eigenschaft von ihm. Der Name der Eigenschaft ist der Name des Tastenkürzels.</p>
+
+<p>Jedes Tastenkürzel ist selbst ein Objekt, das bis zu zwei Eigenschaften hat:</p>
+
+<ul>
+ <li><code>suggested_key</code>: diese definiert die Tastenkombination</li>
+ <li><code>description</code>: eine Zeichenkette, die dieses Tastenkürzel beschreibt</li>
+</ul>
+
+<p>Die Eigenschaft <code>suggested_key</code> ist selbst ein Objekt, das folgende Eigenschaften haben kann, die alle Zeichenketten sind:</p>
+
+<ul>
+ <li><code>"default"</code>, <code>"mac"</code>, <code>"linux"</code>, <code>"windows"</code>, <code>"chromeos"</code>, <code>"android"</code>, <code>"ios"</code></li>
+</ul>
+
+<p>Der Wert jeder Eigenschaft ist das Tastenkürzel für den Befehl auf der angegebenen Plattform, der als Zeichenkette angegeben wird, die die durch ein „+“ voneinander getrennten Tasten enthält. Der Wert für <code>„default“</code> wird auf allen Plattformen verwendet, die nicht ausdrücklich angegeben sind.</p>
+
+<p>Beispiel:</p>
+
+<pre class="brush: json no-line-numbers">"commands": {
+  "toggle-feature": {
+    "suggested_key": {
+      "default": "Alt+Shift+U",
+      "linux": "Ctrl+Shift+U"
+    },
+    "description": "'toggle-feature'-Ereignis an die Erweiterung senden"
+  },
+  "do-another-thing": {
+    "suggested_key": {
+      "default": "Ctrl+Shift+Y"
+    }
+  }
+}</pre>
+
+<p>Dies definiert zwei Tastenkürzel:</p>
+
+<ul>
+ <li>eine mit dem Namen "toggle-feature", auf die mit Hilfe von <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>U</kbd> auf Linux und <kbd>Alt</kbd>+<kbd>Shift</kbd>+<kbd>U</kbd> auf allen anderen Plattformen zugegriffen wird</li>
+ <li>eine mit dem Namen "do-another-thing", auf die mit Hilfe von <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Y</kbd> auf allen Plattformen zugegriffen wird.</li>
+</ul>
+
+<p>Sie könnten dann den ersten dieser Befehle mit einem Code wie diesen verwenden:</p>
+
+<pre class="brush: js no-line-numbers">browser.commands.onCommand.addListener(function(command) {
+  if (command == "toggle-feature") {
+    console.log("toggling the feature!");
+  }
+});</pre>
+
+<h3 id="Besondere_Tastenkürzel">Besondere Tastenkürzel</h3>
+
+<p>Es gibt drei besondere Tastenkürzel:</p>
+
+<ul>
+ <li>_execute_browser_action: funktioniert wie ein Klick auf die <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_action">Browseraktion</a> der Erweiterung.</li>
+ <li>_execute_page_action: funktioniert wie ein Klick auf die <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Page_actions">Seitenaktion</a> der Erweiterung.</li>
+ <li>_execute_sidebar_action: öffnet die <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Sidebars">Seitenleiste</a> der Erweiterung. Wird nur in Firefox unterstützt und erst ab Firefox Version 54.</li>
+</ul>
+
+<p>Dies definiert zum Beispiel eine Tastenkombination, um auf die Browseraktion der Erweiterung zu klicken:</p>
+
+<pre class="brush: js no-line-numbers">"commands": {
+  "_execute_browser_action": {
+    "suggested_key": {
+      "default": "Ctrl+Shift+Y"
+    }
+  }
+}</pre>
+
+<h2 id="Tastenkürzel-Werte">Tastenkürzel-Werte</h2>
+
+<p>Es gibt zwei gültige Formate für Tastenkürzel: als Tastenkombination oder als Medien-Taste.</p>
+
+<h3 id="Tastenkombinationen">Tastenkombinationen</h3>
+
+<div class="pull-aside">
+<div class="moreinfo">Auf Macs wird "Ctrl" als  "Command"-Taste interpretiert, geben Sie also "MacCrtl" an, wenn Sie eigentlich "Ctrl" brauchen.</div>
+</div>
+
+<p>Tastenkombinationen müssen aus zwei oder mehr Tasten bestehen:</p>
+
+<ul>
+ <li><strong>Modifikator </strong>(obligatorisch, mit Ausnahme der Funktionstasten). Dieser kann sein: "Ctrl", "Alt", "Command", "MacCtrl".</li>
+ <li><strong>zweiter Modifikator</strong> (optional). Wenn angegeben, muss dieser entweder "Shift" oder (für Firefox ≥ 63)  "Ctrl", "Alt", "Command" und "MacCtrl" sein, wenn sie nicht als Hauptmodifikator verwendet werden.</li>
+ <li><strong>Taste </strong>(obligatorisch). Die kann sein:
+  <ul>
+   <li>die Buchstaben A-Z</li>
+   <li>die Zahlen 0-9</li>
+   <li>die Funktionstasten F1-F12</li>
+   <li>Comma (Komma), Period (Punkt), Home (Pos1), End (Ende), PageUp (Bild hoch) , PageDown (Bild runter), Space (Leertaste), Insert (Einfg), Delete (Entf), Up (Pfeil hoch), Down (Pfeil runter), Left (Pfeil links), Right (Pfeil rechts)</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Die Taste wird dann als Zeichenkette angegeben, die den Satz an Tastenwerten enthält, in der oben angegebenen Reihenfolge, getrennt durch "+": zum Beispiel "Ctrl+Shift+Z".</p>
+
+<p>Wenn eine Tastenkombination bereits vom Browser (zum Beispiel "Ctrl+P") oder durch ein bestehendes Add-on verwendet wird, können Sie sie nicht überschreiben. Sie dürfen sie definieren, aber Ihr Eventhandler wird nicht aufgerufen, wenn der Benutzer sie eingibt.</p>
+
+<h3 id="Medientasten">Medientasten</h3>
+
+<p>Alternativ kann das Tastenkürzel als eine der folgenden Medientasten angegeben werden:</p>
+
+<ul>
+ <li>"MediaNextTrack", "MediaPlayPause", "MediaPrevTrack", "MediaStop"</li>
+</ul>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Definieren Sie ein einzelnes Tastenkürzel, das nur standardmäßig verwendet wird:</p>
+
+<pre class="brush: json no-line-numbers">"commands": {
+  "toggle-feature": {
+    "suggested_key": {
+      "default": "Ctrl+Shift+Y"
+    },
+    "description": "Ereignis'toggle-feature' senden"
+  }
+}</pre>
+
+<p>Definieren Sie zwei Tastenkürzel, eins mit einer plattformspezifischen Tastenkombination:</p>
+
+<pre class="brush: json no-line-numbers">"commands": {
+  "toggle-feature": {
+    "suggested_key": {
+      "default": "Alt+Shift+U",
+      "linux": "Ctrl+Shift+U"
+    },
+    "description": "Ereignis 'toggle-feature' senden"
+  },
+  "do-another-thing": {
+    "suggested_key": {
+      "default": "Ctrl+Shift+Y"
+    }
+  }
+}</pre>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("webextensions.manifest.commands")}}</p>
diff --git a/files/de/mozilla/add-ons/webextensions/manifest.json/devtools_page/index.html b/files/de/mozilla/add-ons/webextensions/manifest.json/devtools_page/index.html
new file mode 100644
index 0000000000..1b4afb1cfa
--- /dev/null
+++ b/files/de/mozilla/add-ons/webextensions/manifest.json/devtools_page/index.html
@@ -0,0 +1,42 @@
+---
+title: devtools_page
+slug: Mozilla/Add-ons/WebExtensions/manifest.json/devtools_page
+translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/devtools_page
+---
+<div>{{AddonSidebar}}</div>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 30%;">Type</th>
+   <td><code>String</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Mandatory</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Example</th>
+   <td>
+    <pre class="brush: json no-line-numbers">
+"devtools_page": "devtools/my-page.html"</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Use this key to enable your extension to extend the browser's built-in devtools.</p>
+
+<p>This key is defined as a URL to an HTML file. The HTML file must be bundled with the extension, and the URL is relative to the extension's root.</p>
+
+<p>See <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">Extending the developer tools</a> to learn more.</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: json no-line-numbers">"devtools_page": "devtools/my-page.html"</pre>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("webextensions.manifest.devtools_page")}}</p>
diff --git a/files/de/mozilla/add-ons/webextensions/manifest.json/index.html b/files/de/mozilla/add-ons/webextensions/manifest.json/index.html
new file mode 100644
index 0000000000..10a4fd8597
--- /dev/null
+++ b/files/de/mozilla/add-ons/webextensions/manifest.json/index.html
@@ -0,0 +1,105 @@
+---
+title: manifest.json
+slug: Mozilla/Add-ons/WebExtensions/manifest.json
+tags:
+  - Add-ons
+  - Extensions
+  - NeedsTranslation
+  - TopicStub
+  - WebExtensions
+translation_of: Mozilla/Add-ons/WebExtensions/manifest.json
+---
+<div>{{AddonSidebar}}</div>
+
+<p>Die Datei manifest.json ist eine <a href="/en-US/docs/Glossary/JSON">JSON</a>-formatierte Datei, und die einzige Datei, die eine Erweiterung, die das WebExtensions API verwendet, unterstützt.</p>
+
+<p>Durch das Verwenden von manifest.json, legst du Metadaten, wie zum Beispiel Name und Version, für deine Erweiterung fest, und kannst auch einige Aspekte der Funktionalität deiner Erweiterung,wie zum Beispiel Hintergrundskripte, Inhaltsskripte und Browserationen.</p>
+
+<p>Manifest.json keys sind unten gelistet:</p>
+
+<div class="twocolumns">{{ ListSubpages ("/en-US/Add-ons/WebExtensions/manifest.json") }}</div>
+
+<div class="twocolumns"> </div>
+
+<p><code>"manifest_version"</code>, <code>"version"</code>, und <code>"name"</code> sind die einzigen verpflichtenden Keys. <code>"default_locale"</code> muss vorhanden sein, wenn der "_locales"-Ordner vorhanden ist und darf sonst nicht vorhanden sein. <code>"applications"</code> wird von Google Chrome nicht unterstützt, und ist verpflichtend in Firefox vor Firefox 48 und Firefox für Android.</p>
+
+<h2 id="Browserkompatiblität">Browserkompatiblität</h2>
+
+<p>{{Compat("webextensions.manifest")}}</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Hier ein kurzes Syntax-Beispiel für manifest.json:</p>
+
+<pre class="brush: json">{
+  "applications": {
+    "gecko": {
+      "id": "addon@example.com",
+      "strict_min_version": "42.0"
+    }
+  },
+
+  "background": {
+    "scripts": ["jquery.js", "my-background.js"],
+    "page": "my-background.html"
+  },
+
+  "browser_action": {
+    "default_icon": {
+      "19": "button/geo-19.png",
+      "38": "button/geo-38.png"
+    },
+    "default_title": "Whereami?",
+    "default_popup": "popup/geo.html"
+  },
+
+  "commands": {
+    "toggle-feature": {
+      "suggested_key": {
+        "default": "Ctrl+Shift+Y",
+        "linux": "Ctrl+Shift+U"
+      },
+      "description": "Send a 'toggle-feature' event"
+    }
+  },
+
+  "content_security_policy": "script-src 'self' https://example.com; object-src 'self'",
+
+  "content_scripts": [
+    {
+      "exclude_matches": ["*://developer.mozilla.org/*"],
+      "matches": ["*://*.mozilla.org/*"],
+      "js": ["borderify.js"]
+    }
+  ],
+
+  "default_locale": "en",
+
+  "description": "...",
+
+  "icons": {
+    "48": "icon.png",
+    "96": "icon@2x.png"
+  },
+
+  "manifest_version": 2,
+
+  "name": "...",
+
+  "page_action": {
+    "default_icon": {
+      "19": "button/geo-19.png",
+      "38": "button/geo-38.png"
+    },
+    "default_title": "Whereami?",
+    "default_popup": "popup/geo.html"
+  },
+
+  "permissions": ["webNavigation"],
+
+  "version": "0.1",
+
+  "web_accessible_resources": ["images/my-image.png"]
+}</pre>
+
+<p> </p>
diff --git a/files/de/mozilla/add-ons/webextensions/manifest.json/theme/index.html b/files/de/mozilla/add-ons/webextensions/manifest.json/theme/index.html
new file mode 100644
index 0000000000..30825db592
--- /dev/null
+++ b/files/de/mozilla/add-ons/webextensions/manifest.json/theme/index.html
@@ -0,0 +1,1361 @@
+---
+title: theme
+slug: Mozilla/Add-ons/WebExtensions/manifest.json/theme
+translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/theme
+---
+<div>{{AddonSidebar}}</div>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 30%;">Type</th>
+   <td><code>Object</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Mandatory</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Example</th>
+   <td>
+    <pre class="brush: json notranslate">
+"theme": {
+  "images": {
+    "theme_frame": "images/sun.jpg"
+  },
+  "colors": {
+    "frame": "#CF723F",
+    "tab_background_text": "#000"
+  }
+}</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Use the theme key to define a static theme to apply to Firefox.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you want to include a theme with an extension, please see the {{WebExtAPIRef("theme")}} API.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Since May 2019, themes need to be signed to be installed ({{bug(1545109)}}).  See <a href="/en-US/docs/Mozilla/Add-ons/Distribution">Signing and distributing your add-on</a> for more details.</p>
+</div>
+
+<div class="note">
+<p><strong>Theme support in Firefox for Android</strong>: A new version of Firefox for Android, based on GeckoView, is under development. A <a href="https://play.google.com/store/apps/details?id=org.mozilla.fenix" rel="noreferrer nofollow">pre-release version</a> is available. The pre-release version does not support themes.</p>
+</div>
+
+<h2 id="Image_formats">Image formats</h2>
+
+<p>The following image formats are supported in all theme image properties:</p>
+
+<ul>
+ <li>JPEG</li>
+ <li>PNG</li>
+ <li>APNG</li>
+ <li>SVG (animated SVG is supported from Firefox 59)</li>
+ <li>GIF (animated GIF isn’t supported)</li>
+</ul>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>The theme key is an object that takes the following properties:</p>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Name</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>images</code></td>
+   <td><code>Object</code></td>
+   <td>
+    <p>Optional as of Firefox 60. Mandatory before Firefox 60.</p>
+
+    <p>A JSON object whose properties represent the images to display in various parts of the browser. See <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/theme#images">images</a></code> for details on the properties that this object can contain.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>colors</code></td>
+   <td><code>Object</code></td>
+   <td>
+    <p>Mandatory.</p>
+
+    <p>A JSON object whose properties represent the colors of various parts of the browser. See <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/theme#colors">colors</a></code> for details on the properties that this object can contain.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>properties</code></td>
+   <td><code>Object</code></td>
+   <td>
+    <p>Optional</p>
+
+    <p>This object has two properties that affect how the <code>"additional_backgrounds"</code> images are displayed. See <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/theme#properties">properties</a></code> for details on the properties that this object can contain.</p>
+
+    <ul>
+     <li><code>"additional_backgrounds_alignment":</code> an array of enumeration values defining the alignment of the corresponding <code>"additional_backgrounds":</code> array item.<br>
+      The alignment options include: <code>"bottom"</code>, <code>"center"</code>, <code>"left"</code>, <code>"right"</code>, <code>"top"</code>, <code>"center bottom"</code>, <code>"center center"</code>, <code>"center top"</code>, <code>"left bottom"</code>, <code>"left center"</code>, <code>"left top"</code>, <code>"right bottom"</code>, <code>"right center"</code>, and <code>"right top"</code>. If not specified, defaults to <code>"right top"</code>.<br>
+      Optional</li>
+     <li><code>"additional_backgrounds_tiling":</code> an array of enumeration values defining how the corresponding <code>"additional_backgrounds":</code> array item repeats, with support for <code>"no-repeat"</code>, <code>"repeat"</code>, <code>"repeat-x"</code>, and <code>"repeat-y"</code>. If not specified, defaults to <code>"no-repeat"</code>.<br>
+      Optional</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="images">images</h3>
+
+<p dir="ltr">All URLs are relative to the manifest.json file and cannot reference an external URL.</p>
+
+<p dir="ltr">Images should be 200 pixels high to ensure they always fill the header space vertically.</p>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Name</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>headerURL </code> <code>{{Deprecated_Inline}}</code></td>
+   <td><code>String</code></td>
+   <td>
+    <div class="blockIndicator warning">
+    <p><code>headerURL</code> has been removed in Firefox 70. You will begin to get warnings in Firefox 65 and later if you load a theme that uses this property. Use <code>theme_frame</code> instead.</p>
+    </div>
+
+    <p>The URL of a foreground image to be added to the header area and anchored to the upper right corner of the header area.</p>
+
+    <p>Optional in desktop Firefox from Firefox 60 onwards. One of <code>theme_frame</code> or <code>headerURL</code> had to be specified before Firefox 60. Note also that in Firefox 60 onwards, any {{cssxref("text-shadow")}} applied to the header text is removed if no <code>headerURL</code> is specified (see {{bug(1404688)}}).</p>
+
+    <p>In Firefox for Android, <code>headerURL</code> or <code>theme_frame</code>  must be specified.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>theme_frame</code></td>
+   <td><code>String</code></td>
+   <td>
+    <p>The URL of a foreground image to be added to the header area and anchored to the upper right corner of the header area.</p>
+
+    <div class="blockIndicator note">
+    <p>Chrome anchors the image to the top left of the header and if the image doesn’t fill the header area tile the image.</p>
+    </div>
+
+    <p>Optional in desktop Firefox 60 onwards. One of <code>theme_frame</code> or <code>headerURL</code> had to be specified before Firefox 60.</p>
+
+    <p>In Firefox for Android, <code>headerURL</code> or <code>theme_frame</code>  must be specified.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>additional_backgrounds</code></td>
+   <td><code>Array </code>of <code>String</code></td>
+   <td>
+    <div class="warning">
+    <p>The <code>additional_backgrounds</code> property is experimental. It is currently accepted in release versions of Firefox, but its behavior is subject to change. It is not supported in Firefox for Android.</p>
+    </div>
+
+    <p>An array of URLs for additional background images to be added to the header area and displayed behind the <code>"theme_frame":</code> image. These images layer the first image in the array on top, the last image in the array at the bottom.</p>
+
+    <p>Optional.</p>
+
+    <p>By default all images are anchored to the upper right corner of the header area, but their alignment and repeat behavior can be controlled by properties of <code>"properties":</code>.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="colors">colors</h3>
+
+<p>These properties define the colors used for different parts of the browser. They are all optional (but note that <code>"accentcolor"</code> and <code>"textcolor"</code> were mandatory in Firefox before version 63).  How these properties affect the Firefox UI  is shown here:</p>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <td style="background-color: white;">
+    <p><img alt="Overview of the color properties and how they apply to Firefox UI components" src="https://mdn.mozillademos.org/files/16855/Themes_components_annotations.png" style="height: 1065px; width: 1521px;"></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="blockIndicator note">
+<p>Where a component is affected by multiple color properties, the properties are listed in order of precedence.</p>
+</div>
+
+<p>All these properties can be specified as either a string containing any valid <a href="/en-US/docs/Web/CSS/color_value">CSS color string</a> (including hexadecimal), or an RGB array, such as <code>"tab_background_text": [ 107 , 99 , 23 ]</code>.</p>
+
+<div class="blockIndicator note">
+<p><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/theme#Chrome_compatibility">In Chrome, colors may only be specified as RGB arrays</a>.</p>
+
+<p>In Firefox for Android colors can be specified using:</p>
+
+<ul>
+ <li>full hexadecimal notation, that is #RRGGBB only. <em>alpha</em> and shortened syntax, as in #RGB[A], are not supported.</li>
+ <li><a href="/en-US/docs/Web/CSS/color_value#Syntax_2">Functional notation</a> (RGB arrays) for themes targeting Firefox 68.2 or later.</li>
+</ul>
+
+<p>Colors for Firefox for Android themes cannot be specified using color names.</p>
+</div>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Name</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <p><code>accentcolor</code><code> {{Deprecated_Inline}}</code></p>
+   </td>
+   <td>
+    <div class="blockIndicator warning">
+    <p><code>accentcolor</code> has been removed in Firefox 70. You will begin to get warnings in Firefox 65 and later if you load a theme that uses this property. Use the <code>frame</code> property instead.</p>
+    </div>
+
+    <p>The color of the header area background, displayed in the part of the header not covered or visible through the images specified in <code>"headerURL"</code> and <code>"additional_backgrounds"</code>.</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+     "accentcolor": "red",
+     "tab_background_text": "white"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15871/theme-accentcolor.png" style="height: 302px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>bookmark_text</code></td>
+   <td>
+    <p>The color of text and icons in the bookmark and find bars. Also, if <code>tab_text</code> isn't defined it sets the color of the active tab text and if <code>icons</code> isn't defined the color of the toolbar icons. Provided as Chrome compatible alias for <code>toolbar_text</code>.</p>
+
+    <div class="blockIndicator note">
+    <p>Ensure any color used contrasts well with those used in <code>frame</code> and <code>frame_inactive</code> or <code>toolbar</code> if you're using that property.</p>
+
+    <p>Where <code>icons</code> isn't defined, also ensure good contrast with<code> button_background_active</code> and <code>button_background_hover</code>.</p>
+    </div>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+    "frame": "black",
+    "tab_background_text": "white",
+    "tab_text": "white",
+    "toolbar": "black",
+    "bookmark_text": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="Example use of the bookmark_text color property" src="https://mdn.mozillademos.org/files/16668/theme-bookmark_text.png"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>button_background_active</code></td>
+   <td>
+    <p>The color of the background of the pressed toolbar buttons.</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+     "frame": "black",
+     "tab_background_text": "white",
+     "button_background_active": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15872/theme-button_background_active.png" style="height: 302px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>button_background_hover</code></td>
+   <td>
+    <p>The color of the background of the toolbar buttons on hover.</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+     "frame": "black",
+     "tab_background_text": "white",
+     "button_background_hover": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15873/theme-button_background_hover.png" style="height: 302px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>icons</code></td>
+   <td>
+    <p>The color of toolbar icons, excluding those in the find toolbar.</p>
+
+    <div class="blockIndicator note">
+    <p>Ensure the color used contrasts well with those used in <code>frame</code>,  <code>frame_inactive</code>, <code>button_background_active</code>, and <code>button_background_hover</code>.</p>
+    </div>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+     "frame": "black",
+     "tab_background_text": "white",
+     "icons": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15874/theme-icons.png" style="height: 302px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>icons_attention</code></td>
+   <td>
+    <p>The color of toolbar icons in attention state such as the starred bookmark icon or finished download icon.</p>
+
+    <div class="blockIndicator note">
+    <p>Ensure the color used contrasts well with those used in <code>frame</code>,  <code>frame_inactive</code>, <code>button_background_active</code>, and <code>button_background_hover</code>.</p>
+    </div>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+     "frame": "black",
+     "tab_background_text": "white",
+     "icons_attention": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15875/theme-icons_attention.png" style="height: 324px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>frame</code></td>
+   <td>
+    <p>The color of the header area background, displayed in the part of the header not covered or visible through the images specified in <code>"theme_frame"</code> and <code>"additional_backgrounds"</code>.</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+     "frame": "red",
+     "tab_background_text": "white"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15871/theme-accentcolor.png" style="height: 302px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>frame_inactive</code></td>
+   <td>
+    <p>The color of the header area background when the browser window is inactive, displayed in the part of the header not covered or visible through the images specified in <code>"theme_frame"</code> and <code>"additional_backgrounds"</code>.</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+     "frame": "red",
+     "frame_inactive": "gray",
+     "tab_text": "white"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="Example use of the frame_inactive color property" src="https://mdn.mozillademos.org/files/16669/theme-frame_inactive.png" style="height: 193px; width: 752px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>ntp_background</code></td>
+   <td>
+    <p>The new tab page background color.</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+     "ntp_background": "red",
+     "ntp_text": "white"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/16175/ntp_colors.png" style="display: block; height: 190px; margin: 0 auto;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>ntp_text</code></td>
+   <td>
+    <p>The new tab page text color.</p>
+
+    <div class="blockIndicator note">
+    <p>Ensure the color used contrasts well with that used in <code>ntp_background</code>.</p>
+    </div>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+     "ntp_background": "red",
+     "ntp_text": "white"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/16175/ntp_colors.png" style="display: block; height: 190px; margin: 0 auto;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>popup</code></td>
+   <td>
+    <p>The background color of popups (such as the url bar dropdown and the arrow panels).</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+     "frame": "black",
+     "tab_background_text": "white",
+     "popup": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15876/theme-popup.png" style="height: 324px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>popup_border</code></td>
+   <td>
+    <p>The border color of popups.</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+     "frame": "black",
+     "tab_background_text": "white",
+     "popup": "black",
+     "popup_text": "white",
+     "popup_border": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15877/theme-popup_border.png" style="height: 324px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>popup_highlight</code></td>
+   <td>
+    <p>The background color of items highlighted using the keyboard inside popups (such as the selected url bar dropdown item).</p>
+
+    <div class="blockIndicator note">
+    <p>It's recommended to define <code>popup_highlight_text</code> to override the browser default text color on various platforms.</p>
+    </div>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+     "frame": "black",
+     "tab_background_text": "white",
+     "popup_highlight": "red",
+     "popup_highlight_text": "white"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15878/theme-popup_highlight.png" style="height: 490px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>popup_highlight_text</code></td>
+   <td>
+    <p>The text color of items highlighted inside popups.</p>
+
+    <div class="blockIndicator note">
+    <p>Ensure the color used contrasts well with that used in <code>popup_highlight</code>.</p>
+    </div>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+     "frame": "black",
+     "tab_background_text": "white",
+     "popup_highlight": "black",
+     "popup_highlight_text": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15879/theme-popup_highlight_text.png" style="height: 490px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>popup_text</code></td>
+   <td>
+    <p>The text color of popups.</p>
+
+    <div class="blockIndicator note">
+    <p>Ensure the color used contrasts well with that used in <code>popup</code>.</p>
+    </div>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+     "frame": "black",
+     "tab_background_text": "white",
+     "popup": "black",
+     "popup_text": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15880/popup_text.png" style="height: 490px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>sidebar</code></td>
+   <td>
+    <p>The background color of the sidebar.</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+     "sidebar": "red",
+     "sidebar_highlight": "white",
+     "sidebar_highlight_text": "green",
+     "sidebar_text": "white"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/16176/sidebar_colors.png" style="display: block; margin: 0 auto; width: 250px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>sidebar_border</code></td>
+   <td>
+    <p>The border and splitter color of the browser sidebar</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+     "sidebar_border": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/16177/Screen_Shot_2018-09-16_at_6.13.31_PM.png" style="display: block; height: 286px; margin: 0px auto; width: 300px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>sidebar_highlight</code></td>
+   <td>
+    <p>The background color of highlighted rows in built-in sidebars</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+     "sidebar_highlight": "red",
+     "sidebar_highlight_text": "white"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/16223/Screen_Shot_2018-10-04_at_11.15.46_AM.png" style="display: block; height: 357px; margin: 0px auto; width: 269px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>sidebar_highlight_text</code></td>
+   <td>
+    <p>The text color of highlighted rows in sidebars.</p>
+
+    <div class="blockIndicator note">
+    <p>Ensure the color used contrasts well with that used in <code>sidebar_highlight</code>.</p>
+    </div>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+    "sidebar_highlight": "pink",
+    "sidebar_highlight_text": "red",
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/16224/Screen_Shot_2018-10-04_at_11.22.41_AM.png" style="display: block; height: 363px; margin: auto; width: 262px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>sidebar_text</code></td>
+   <td>
+    <p>The text color of sidebars.</p>
+
+    <div class="blockIndicator note">
+    <p>Ensure the color used contrasts well with that used in <code>sidebar</code>.</p>
+    </div>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+     "sidebar": "red",
+     "sidebar_highlight": "white",
+     "sidebar_highlight_text": "green",
+     "sidebar_text": "white"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/16176/sidebar_colors.png" style="display: block; margin: 0 auto; width: 250px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>tab_background_separator</code></td>
+   <td>
+    <p>The color of the vertical separator of the background tabs.</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+     "frame": "black",
+     "tab_background_text": "white",
+     "tab_background_separator": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="A closeup of browser tabs to highlight the separator." src="https://mdn.mozillademos.org/files/16048/theme-tab-background-separator.png" style="height: 356px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>tab_background_text</code></td>
+   <td>
+    <p>The color of the text displayed in the inactive page tabs. If <code>tab_text</code> or <code>bookmark_text</code> isn't specified, applies to the active tab text.</p>
+
+    <div class="blockIndicator note">
+    <p>Ensure the color used contrasts well with those used in <code>tab_selected</code> or <code>frame</code> and  <code>frame_inactive</code>.</p>
+    </div>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+    "frame": "black",
+    "toolbar": "white",
+    "tab_background_text": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15885/theme-textcolor.png" style="height: 302px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>tab_line</code></td>
+   <td>
+    <p>The color of the selected tab line.</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+     "frame": "black",
+     "tab_background_text": "white",
+     "tab_line": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15881/theme-tab_line.png" style="height: 302px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>tab_loading</code></td>
+   <td>
+    <p>The color of the tab loading indicator and the tab loading burst.</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+     "frame": "black",
+     "tab_background_text": "white",
+     "tab_loading": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15882/theme-tab_loading.gif" style="height: 186px; width: 618px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>tab_selected</code></td>
+   <td>
+    <p>The background color of the selected tab. When not in use selected tab color is set by <code>frame</code> and the <code>frame_inactive</code>.</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "images": {
+  "theme_frame": "weta.png"
+},
+  "colors": {
+     "frame": "black",
+     "tab_background_text": "white",
+     "tab_selected": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15883/theme-tab_selected.png" style="height: 302px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>tab_text</code></td>
+   <td>
+    <p>From Firefox 59, it represents the text color for the selected tab. If <code>tab_line</code> isn't specified, it also defines the color of the selected tab line.</p>
+
+    <div class="blockIndicator note">
+    <p>Ensure the color used contrasts well with those used in <code>tab_selected</code> or <code>frame</code> and  <code>frame_inactive</code>.</p>
+    </div>
+
+    <p>From Firefox 55 to 58, it is incorrectly implemented as alias for <code>"textcolor"</code></p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "images": {
+  "theme_frame": "weta.png"
+},
+  "colors": {
+     "frame": "black",
+     "tab_background_text": "white",
+     "tab_selected": "white",
+     "tab_text": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15884/theme-tab_text.png" style="height: 302px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>textcolor {{Deprecated_Inline}}</code></td>
+   <td>
+    <div class="blockIndicator warning">
+    <p><code>textcolor</code> has been removed in Firefox 70. You will begin to get warnings in Firefox 65 and later if you load a theme that uses this property. Use <code>tab_background_text</code> instead.</p>
+    </div>
+
+    <p>The color of the text displayed in the header area.</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+    "frame": "black",
+    "toolbar": "white",
+    "textcolor": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15885/theme-textcolor.png" style="height: 302px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>toolbar</code></td>
+   <td>
+    <p>The background color for the navigation bar, the bookmarks bar, and the selected tab.</p>
+
+    <p>This also sets the background color of the "Find" bar.</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+    "frame": "black",
+    "toolbar": "red",
+    "tab_background_text": "white"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15966/toolbar.png" style="height: 335px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>toolbar_bottom_separator</code></td>
+   <td>
+    <p>The color of the line separating the bottom of the toolbar from the region below.</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+    "frame": "black",
+    "tab_background_text": "white",
+    "toolbar_bottom_separator": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15887/theme-toolbar_bottom_separator.png" style="height: 302px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>toolbar_field</code></td>
+   <td>
+    <p>The background color for fields in the toolbar, such as the URL bar.</p>
+
+    <p>This also sets the background color of the <strong>Find in page</strong> field.</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+    "frame": "black",
+    "tab_background_text": "white",
+    "toolbar_field": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15967/toolbar-field.png" style="height: 335px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>toolbar_field_border</code></td>
+   <td>
+    <p>The border color for fields in the toolbar.</p>
+
+    <p>This also sets the border color of the <strong>Find in page</strong> field.</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+    "frame": "black",
+    "toolbar": "black",
+    "tab_background_text": "white",
+    "toolbar_field": "black",
+    "toolbar_field_text": "white",
+    "toolbar_field_border": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15968/toolbar-field-border.png" style="height: 335px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>toolbar_field_border_focus</code></td>
+   <td>
+    <p>The focused border color for fields in the toolbar.</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+    "frame": "black",
+    "toolbar": "black",
+    "tab_background_text": "white",
+    "toolbar_field": "black",
+    "toolbar_field_text": "white",
+    "toolbar_field_border_focus": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15890/theme-toolbar_field_border_focus.png" style="height: 302px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>toolbar_field_focus</code></td>
+   <td>
+    <p>The focused background color for fields in the toolbar, such as the URL bar.</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+    "frame": "black",
+    "toolbar": "black",
+    "tab_background_text": "white",
+    "toolbar_field": "black",
+    "toolbar_field_text": "white",
+    "toolbar_field_focus": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15891/theme-toolbar_field_focus.png" style="height: 302px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>toolbar_field_highlight</code></td>
+   <td>The background color used to indicate the current selection of text in the URL bar (and the search bar, if it's configured to be separate).
+    <details open><summary>See example</summary>
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+    "toolbar_field": "rgba(255, 255, 255, 0.91)",
+    "toolbar_field_text": "rgb(0, 100, 0)",
+    "toolbar_field_highlight": "rgb(180, 240, 180, 0.9)",
+    "toolbar_field_highlight_text": "rgb(0, 80, 0)"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="Example showing customized text and highlight colors in the URL bar" src="https://mdn.mozillademos.org/files/16632/toolbar_field_highlight.png" style="height: 289px; width: 738px;"></p>
+
+    <p>Here, the <code>toolbar_field_highlight</code> field specifies that the highlight color is a light green, while the text is set to a dark-to-medium green using <code>toolbar_field_highlight_text</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>toolbar_field_highlight_text</code></td>
+   <td>
+    <p>The color used to draw text that's currently selected in the URL bar (and the search bar, if it's configured to be separate box).</p>
+
+    <div class="blockIndicator note">
+    <p>Ensure the color used contrasts well with those used in <code>toolbar_field_highlight</code>.</p>
+    </div>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+    "toolbar_field": "rgba(255, 255, 255, 0.91)",
+    "toolbar_field_text": "rgb(0, 100, 0)",
+    "toolbar_field_highlight": "rgb(180, 240, 180, 0.9)",
+    "toolbar_field_highlight_text": "rgb(0, 80, 0)"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="Example showing customized text and highlight colors in the URL bar" src="https://mdn.mozillademos.org/files/16632/toolbar_field_highlight.png" style="height: 289px; width: 738px;"></p>
+
+    <p>Here, the <code>toolbar_field_highlight_text</code> field is used to set the text color to a dark medium-dark green, while the highlight color is  a light green.</p>
+   </td>
+  </tr>
+  <tr>
+  </tr>
+  <tr>
+   <td><code>toolbar_field_separator</code></td>
+   <td>
+    <p>The color of separators inside the URL bar. In Firefox 58 this was implemented as <code>toolbar_vertical_separator</code>.</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+    "frame": "black",
+    "toolbar": "black",
+    "tab_background_text": "white",
+    "toolbar_field_separator": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15895/theme-toolbar_field_separator.png" style="height: 302px; width: 738px;"></p>
+
+    <p>In this screenshot, <code>"toolbar_vertical_separator"</code> is the white vertical line in the URL bar dividing the Reader Mode icon from the other icons.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>toolbar_field_text</code></td>
+   <td>
+    <p>The color of text in fields in the toolbar, such as the URL bar. This also sets the color of text in the <strong>Find in page</strong> field.</p>
+
+    <div class="blockIndicator note">
+    <p>Ensure the color used contrasts well with those used in <code>toolbar_field</code>.</p>
+    </div>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+    "frame": "black",
+    "toolbar": "black",
+    "tab_background_text": "white",
+    "toolbar_field": "black",
+    "toolbar_field_text": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15969/toolbar-field-text.png" style="height: 335px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>toolbar_field_text_focus</code></td>
+   <td>
+    <p>The color of text in focused fields in the toolbar, such as the URL bar.</p>
+
+    <div class="blockIndicator note">
+    <p>Ensure the color used contrasts well with those used in <code>toolbar_field_focus</code>.</p>
+    </div>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+    "frame": "black",
+    "toolbar": "black",
+    "tab_background_text": "white",
+    "toolbar_field": "black",
+    "toolbar_field_text": "white",
+    "toolbar_field_text_focus": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15893/theme-toolbar_field_text_focus.png" style="height: 302px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>toolbar_text </code></td>
+   <td>
+    <p>The color of toolbar text. This also sets the color of  text in the "Find" bar.</p>
+
+    <div class="blockIndicator note">
+    <p>For compatibility with Chrome, use the alias <code>bookmark_text</code>.</p>
+    </div>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+    "frame": "black",
+    "tab_background_text": "white",
+    "toolbar": "black",
+    "toolbar_text": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15970/toolbar-text.png" style="height: 335px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>toolbar_top_separator</code></td>
+   <td>
+    <p>The color of the line separating the top of the toolbar from the region above.</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+    "frame": "black",
+    "tab_background_text": "white",
+    "toolbar": "black",
+    "toolbar_top_separator": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15897/theme-toolbar_top_separator.png" style="height: 302px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>toolbar_vertical_separator</code></td>
+   <td>
+    <p>The color of the separator next to the application menu icon. In Firefox 58, it corresponds to the color of separators inside the URL bar.</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+    "frame": "black",
+    "tab_background_text": "white",
+    "toolbar": "black",
+    "toolbar_vertical_separator": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15898/theme-toolbar_vertical_separator.png" style="height: 302px; width: 738px;"></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Aliases">Aliases</h4>
+
+<p>Additionally, this key accepts various properties that are aliases for one of the properties above. These are provided for compatibility with Chrome. If an alias is given, and the non-alias version is also given, then the value will be taken from the non-alias version.</p>
+
+<div class="blockIndicator warning">
+<p>Beginning Firefox 70, the following properties are removed: <code>accentcolor</code> and <code>textcolor</code>. Use <code>frame</code> and <code>tab_background_text</code> instead. Using these values in themes loaded into Firefox 65 or later will raise warnings.</p>
+</div>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Name</th>
+   <th scope="col">Alias for</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>bookmark_text</code></td>
+   <td><code>toolbar_text</code></td>
+  </tr>
+  <tr>
+   <td><code>frame</code></td>
+   <td><code>accentcolor</code> <code>{{Deprecated_Inline}}</code></td>
+  </tr>
+  <tr>
+   <td><code>frame_inactive</code></td>
+   <td><code>accentcolor</code> <code>{{Deprecated_Inline}}</code></td>
+  </tr>
+  <tr>
+   <td><code>tab_background_text</code></td>
+   <td><code>textcolor</code> <code>{{Deprecated_Inline}}</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="properties">properties</h3>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Name</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>additional_backgrounds_alignment</code></td>
+   <td>
+    <p><code>Array</code> of <code>String</code></p>
+   </td>
+   <td>
+    <p>Optional.</p>
+
+    <p>An array of enumeration values defining the alignment of the corresponding <code>"additional_backgrounds":</code> array item.<br>
+     The alignment options include:</p>
+
+    <ul>
+     <li><code>"bottom"</code></li>
+     <li><code>"center"</code></li>
+     <li><code>"left"</code></li>
+     <li><code>"right"</code></li>
+     <li><code>"top"</code></li>
+     <li><code>"center bottom"</code></li>
+     <li><code>"center center"</code></li>
+     <li><code>"center top"</code></li>
+     <li><code>"left bottom"</code></li>
+     <li><code>"left center"</code></li>
+     <li><code>"left top"</code></li>
+     <li><code>"right bottom"</code></li>
+     <li><code>"right center"</code></li>
+     <li><code>"right top"</code>.</li>
+    </ul>
+
+    <p>If not specified, defaults to <code>"right top"</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>additional_backgrounds_tiling</code></td>
+   <td>
+    <p><code>Array</code> of <code>String</code></p>
+   </td>
+   <td>
+    <p>Optional.</p>
+
+    <p>An array of enumeration values defining how the corresponding <code>"additional_backgrounds":</code> array item repeats. Options include:</p>
+
+    <ul>
+     <li><code>"no-repeat"</code></li>
+     <li><code>"repeat"</code></li>
+     <li><code>"repeat-x"</code></li>
+     <li><code>"repeat-y"</code></li>
+    </ul>
+
+    <p>If not specified, defaults to <code>"no-repeat"</code>.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples">Examples</h2>
+
+<p dir="ltr" id="docs-internal-guid-f85f22a2-6854-24d7-769b-8a47c376e2f2">A basic theme must define an image to add to the header, the accent color to use in the header, and the color of text used in the header:</p>
+
+<pre class="brush: json notranslate" dir="ltr"> "theme": {
+   "images": {
+     "theme_frame": "images/sun.jpg"
+   },
+   "colors": {
+     "frame": "#CF723F",
+     "tab_background_text": "#000"
+   }
+ }</pre>
+
+<p dir="ltr">Multiple images can be used to fill the header. Before Firefox version 60, use a blank or transparent header image to gain control over the placement of each additional image:</p>
+
+<pre class="brush: json notranslate" dir="ltr"> "theme": {
+   "images": {
+     "additional_backgrounds": [ "images/left.png" , "images/middle.png", "images/right.png"]
+   },
+   "properties": {
+     "additional_backgrounds_alignment": [ "left top" , "top", "right top"]
+   },
+   "colors": {
+     "frame": "blue",
+     "tab_background_text": "#ffffff"
+   }
+ }</pre>
+
+<p dir="ltr">You can also fill the header with a repeated image, or images, in this case a single image anchored in the middle top of the header and repeated across the rest of the header:</p>
+
+<pre class="brush: json notranslate" dir="ltr"> "theme": {
+   "images": {
+     "additional_backgrounds": [ "images/logo.png"]
+   },
+   "properties": {
+     "additional_backgrounds_alignment": [ "top" ],
+     "additional_backgrounds_tiling": [ "repeat"  ]
+   },
+   "colors": {
+     "frame": "green",
+     "tab_background_text": "#000"
+   }
+ }</pre>
+
+<p><a id="example-screenshot" name="example-screenshot">The following example uses most of the different values for <code>theme.colors</code>:</a></p>
+
+<pre class="brush: json notranslate">  "theme": {
+    "images": {
+      "theme_frame": "weta.png"
+    },
+
+    "colors": {
+       "frame": "darkgreen",
+       "tab_background_text": "white",
+       "toolbar": "blue",
+       "bookmark_text": "cyan",
+       "toolbar_field": "orange",
+       "toolbar_field_border": "white",
+       "toolbar_field_text": "green",
+       "toolbar_top_separator": "red",
+       "toolbar_bottom_separator": "white",
+       "toolbar_vertical_separator": "white"
+    }
+  }</pre>
+
+<p>It will give you a browser that looks like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15789/theme.png" style="display: block; height: 652px; margin-left: auto; margin-right: auto; width: 1446px;"></p>
+
+<p>In this screenshot, <code>"toolbar_vertical_separator"</code> is the white vertical line in the URL bar dividing the Reader Mode icon from the other icons.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("webextensions.manifest.theme")}}</p>
+
+<h3 id="Colors">Colors</h3>
+
+<p>{{Compat("webextensions.manifest.theme.colors", 10)}}</p>
+
+<h3 id="Images">Images</h3>
+
+<p>{{Compat("webextensions.manifest.theme.images", 10)}}</p>
+
+<h3 id="Properties">Properties</h3>
+
+<p>{{Compat("webextensions.manifest.theme.properties", 10)}}</p>
+
+<h3 id="Chrome_compatibility">Chrome compatibility</h3>
+
+<p>In Chrome:</p>
+
+<ul>
+ <li><code>colors/toolbar_text</code> is not used, use <code>colors/bookmark_text</code> instead.</li>
+ <li><code>images/theme_frame</code> anchors the image to the top left of the header and if the image doesn’t fill the header area tile the image.</li>
+ <li>all colors must be specified as an array of RGB values, like this:
+  <pre class="brush: json notranslate">"theme": {
+  "colors": {
+     "frame": [255, 0, 0],
+     "tab_background_text": [0, 255, 0],
+     "bookmark_text": [0, 0, 255]
+  }
+}</pre>
+
+  <p>From Firefox 59 onward, both the array form and the CSS color form are accepted for all properties. Before that, <code>colors/frame</code> and <code>colors/tab_background_text</code> required the array form, while other properties required the CSS color form.</p>
+ </li>
+</ul>
diff --git a/files/de/mozilla/add-ons/webextensions/match_patterns/index.html b/files/de/mozilla/add-ons/webextensions/match_patterns/index.html
new file mode 100644
index 0000000000..6c4694c922
--- /dev/null
+++ b/files/de/mozilla/add-ons/webextensions/match_patterns/index.html
@@ -0,0 +1,430 @@
+---
+title: Match patterns in extension manifests
+slug: Mozilla/Add-ons/WebExtensions/Match_patterns
+translation_of: Mozilla/Add-ons/WebExtensions/Match_patterns
+---
+<div>{{AddonSidebar}}</div>
+
+<p>Match patterns are a way to specify groups of URLs: a match pattern matches a specific set of URLs. They are used in WebExtensions APIs in a few places, most notably to specify which documents to load <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> into, and to specify which URLs to add <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/webRequest">webRequest</a></code> listeners to.</p>
+
+<p>APIs that use match patterns usually accept a list of match patterns, and will perform the appropriate action if the URL matches any of the patterns. See, for example, the <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code> key in manifest.json.</p>
+
+<h2 id="Match_pattern_structure">Match pattern structure</h2>
+
+<div class="note">
+<p><strong>Note:</strong> Some browsers don’t support certain schemes.<br>
+ Check the <a href="#Browser_compatibility">Browser compatibility table</a> for details.</p>
+</div>
+
+<p>All match patterns are specified as strings. Apart from the special <code><a href="/en-US/Add-ons/WebExtensions/Match_patterns#%3Call_urls%3E">&lt;all_urls&gt;</a></code> pattern, match patterns consist of three parts: <em>scheme</em>, <em>host</em>, and <em>path</em>. The scheme and host are separated by <code>://</code>.</p>
+
+<pre>&lt;scheme&gt;://&lt;host&gt;&lt;path&gt;</pre>
+
+<h3 id="scheme">scheme</h3>
+
+<p>The <em>scheme</em> component may take one of two forms:</p>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col" style="width: 50%;">Form</th>
+   <th scope="col">Matches</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>*</code></td>
+   <td>Only "http" and "https" and in some browsers also <a href="/en-US/docs/Web/API/WebSockets_API">"ws" and "wss"</a>.</td>
+  </tr>
+  <tr>
+   <td>One of <code>http</code>, <code>https</code>, <code>ws</code>, <code>wss</code>, <code>ftp</code>, <code>ftps</code>, <code>data</code> or <code>file</code>.</td>
+   <td>Only the given scheme.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="host">host</h3>
+
+<p>The <em>host</em> component may take one of three forms:</p>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col" style="width: 50%;">Form</th>
+   <th scope="col">Matches</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>*</code></td>
+   <td>Any host.</td>
+  </tr>
+  <tr>
+   <td><code>*.</code> followed by part of the hostname.</td>
+   <td>The given host and any of its subdomains.</td>
+  </tr>
+  <tr>
+   <td>A complete hostname, without wildcards.</td>
+   <td>Only the given host.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><em>host</em> must not include a port number.</p>
+
+<p><em>host</em> is optional only if the <em>scheme</em> is "file".</p>
+
+<p>Note that the wildcard may only appear at the start.</p>
+
+<h3 id="path">path</h3>
+
+<p>The <em>path</em> component must begin with a <code>/</code>.</p>
+
+<p>After that, it may subsequently contain any combination of the <code>*</code> wildcard and any of the characters that are allowed in URL paths or query strings. Unlike <em>host</em>, the <em>path</em> component may contain the <code>*</code> wildcard in the middle or at the end, and the <code>*</code> wildcard may appear more than once.</p>
+
+<p>The value for the <em>path</em> matches against the string which is the URL path plus the <a href="https://en.wikipedia.org/wiki/Query_string">URL query string</a>. This includes the <code>?</code> between the two, if the query string is present in the URL. For example, if you want to match URLs on any domain where the URL path ends with <code>foo.bar</code>, then you need to use an array of Match Patterns like <code>['*://*/*foo.bar', '*://*/*foo.bar?*']</code>. The <code>?*</code> is needed, rather than just <code>bar*</code>, in order to anchor the ending <code>*</code> as applying to the URL query string and not some portion of the URL path.</p>
+
+<p>Neither the <a href="https://en.wikipedia.org/wiki/Fragment_identifier">URL fragment identifier</a>, nor the <code>#</code> which precedes it, are considered as part of the <em>path</em>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: The path pattern string should not include a port number. Adding a port, as in: <em>"http://localhost:1234/*" </em>causes the match pattern to be ignored. However, "<em>http://localhost:1234</em>" will match with "<em>http://localhost/*</em>"</p>
+</div>
+
+<h3 id="&lt;all_urls>">&lt;all_urls&gt;</h3>
+
+<p>The special value <code>&lt;all_urls&gt;</code> matches all URLs under any of the supported schemes: that is "http", "https", "ws", "wss", "ftp", "data", and "file".</p>
+
+<h2 id="Examples">Examples</h2>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col" style="width: 33%;">Pattern</th>
+   <th scope="col" style="width: 33%;">Example matches</th>
+   <th scope="col" style="width: 33%;">Example non-matches</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <p><code>&lt;all_urls&gt;</code></p>
+
+    <p>Match all URLs.</p>
+   </td>
+   <td>
+    <p><code>http://example.org/</code></p>
+
+    <p><code>https://a.org/some/path/</code></p>
+
+    <p><code>ws://sockets.somewhere.org/</code></p>
+
+    <p><code>wss://ws.example.com/stuff/</code></p>
+
+    <p><code>ftp://files.somewhere.org/</code></p>
+
+    <p><code>ftps://files.somewhere.org/</code></p>
+   </td>
+   <td>
+    <p><code>resource://a/b/c/</code><br>
+     (unsupported scheme)</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>*://*/*</code></p>
+
+    <p>Match all HTTP, HTTPS and WebSocket URLs.</p>
+   </td>
+   <td>
+    <p><code>http://example.org/</code></p>
+
+    <p><code>https://a.org/some/path/</code></p>
+
+    <p><code>ws://sockets.somewhere.org/</code></p>
+
+    <p><code>wss://ws.example.com/stuff/</code></p>
+   </td>
+   <td>
+    <p><code>ftp://ftp.example.org/</code><br>
+     (unmatched scheme)</p>
+
+    <p><code>ftps://ftp.example.org/</code><br>
+     (unmatched scheme)</p>
+
+    <p><code>file:///a/</code><br>
+     (unmatched scheme)</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>*://*.mozilla.org/*</code></p>
+
+    <p>Match all HTTP, HTTPS and WebSocket URLs that are hosted at "mozilla.org" or one of its subdomains.</p>
+   </td>
+   <td>
+    <p><code>http://mozilla.org/</code></p>
+
+    <p><code>https://mozilla.org/</code></p>
+
+    <p><code>http://a.mozilla.org/</code></p>
+
+    <p><code>http://a.b.mozilla.org/</code></p>
+
+    <p><code>https://b.mozilla.org/path/</code></p>
+
+    <p><code>ws://ws.mozilla.org/</code></p>
+
+    <p><code>wss://secure.mozilla.org/something</code></p>
+   </td>
+   <td>
+    <p><code>ftp://mozilla.org/</code><br>
+     (unmatched scheme)</p>
+
+    <p><code>http://mozilla.com/</code><br>
+     (unmatched host)</p>
+
+    <p><code>http://firefox.org/</code><br>
+     (unmatched host)</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>*://mozilla.org/</code></p>
+
+    <p>Match all HTTP, HTTPS and WebSocket URLs that are hosted at exactly "mozilla.org/".</p>
+   </td>
+   <td>
+    <p><code>http://mozilla.org/</code></p>
+
+    <p><code>https://mozilla.org/</code></p>
+
+    <p><code>ws://mozilla.org/</code></p>
+
+    <p><code>wss://mozilla.org/</code></p>
+   </td>
+   <td>
+    <p><code>ftp://mozilla.org/</code><br>
+     (unmatched scheme)</p>
+
+    <p><code>http://a.mozilla.org/</code><br>
+     (unmatched host)</p>
+
+    <p><code>http://mozilla.org/a</code><br>
+     (unmatched path)</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>ftp://mozilla.org/</code></p>
+
+    <p>Match only "ftp://mozilla.org/".</p>
+   </td>
+   <td><code>ftp://mozilla.org</code></td>
+   <td>
+    <p><code>http://mozilla.org/</code><br>
+     (unmatched scheme)</p>
+
+    <p><code>ftp://sub.mozilla.org/</code><br>
+     (unmatched host)</p>
+
+    <p><code>ftp://mozilla.org/path</code><br>
+     (unmatched path)</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>https://*/path</code></p>
+
+    <p>Match HTTPS URLs on any host, whose path is "path".</p>
+   </td>
+   <td>
+    <p><code>https://mozilla.org/path</code></p>
+
+    <p><code>https://a.mozilla.org/path</code></p>
+
+    <p><code>https://something.com/path</code></p>
+   </td>
+   <td>
+    <p><code>http://mozilla.org/path</code><br>
+     (unmatched scheme)</p>
+
+    <p><code>https://mozilla.org/path/</code><br>
+     (unmatched path)</p>
+
+    <p><code>https://mozilla.org/a</code><br>
+     (unmatched path)</p>
+
+    <p><code>https://mozilla.org/</code><br>
+     (unmatched path)</p>
+
+    <p><code>https://mozilla.org/path?foo=1</code><br>
+     (unmatched path due to URL query string)</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>https://*/path/</code></p>
+
+    <p>Match HTTPS URLs on any host, whose path is "path/" and which has no URL query string.</p>
+   </td>
+   <td>
+    <p><code>https://mozilla.org/path/</code></p>
+
+    <p><code>https://a.mozilla.org/path/</code></p>
+
+    <p><code>https://something.com/path</code>/</p>
+   </td>
+   <td>
+    <p><code>http://mozilla.org/path/</code><br>
+     (unmatched scheme)</p>
+
+    <p><code>https://mozilla.org/path</code><br>
+     (unmatched path)</p>
+
+    <p><code>https://mozilla.org/a</code><br>
+     (unmatched path)</p>
+
+    <p><code>https://mozilla.org/</code><br>
+     (unmatched path)</p>
+
+    <p><code>https://mozilla.org/path/</code><code>?foo=1</code><br>
+     (unmatched path due to URL query string)</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>https://mozilla.org/*</code></p>
+
+    <p>Match HTTPS URLs only at "mozilla.org", with any URL path and URL query string.</p>
+   </td>
+   <td>
+    <p><code>https://mozilla.org/</code></p>
+
+    <p><code>https://mozilla.org/path</code></p>
+
+    <p><code>https://mozilla.org/another</code></p>
+
+    <p><code>https://mozilla.org/path/to/doc</code></p>
+
+    <p><code>https://mozilla.org/path/to/doc?foo=1</code></p>
+   </td>
+   <td>
+    <p><code>http://mozilla.org/path</code><br>
+     (unmatched scheme)</p>
+
+    <p><code>https://mozilla.com/path</code><br>
+     (unmatched host)</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>https://mozilla.org/a/b/c/</code></p>
+
+    <p>Match only this URL, or this URL with any URL fragment.</p>
+   </td>
+   <td>
+    <p><code>https://mozilla.org/a/b/c/</code></p>
+
+    <p><code>https://mozilla.org/a/b/c/#section1</code></p>
+   </td>
+   <td>Anything else.</td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>https://mozilla.org/*/b/*/</code></p>
+
+    <p>Match HTTPS URLs hosted on "mozilla.org", whose path contains a component "b" somewhere in the middle. Will match URLs with query strings, if the string ends in a <code>/</code>.</p>
+   </td>
+   <td>
+    <p><code>https://mozilla.org/a/b/c/</code></p>
+
+    <p><code>https://mozilla.org/d/b/f/</code></p>
+
+    <p><code>https://mozilla.org/a/b/c/d/</code></p>
+
+    <p><code>https://mozilla.org/a/b/c/d/#section1</code></p>
+
+    <p><code>https://mozilla.org/a/b/c/d/?foo=/</code></p>
+
+    <p><code>https://mozilla.org/a?foo=21314&amp;bar=/b/&amp;extra=c/</code></p>
+   </td>
+   <td>
+    <p><code>https://mozilla.org/b/*/</code><br>
+     (unmatched path)</p>
+
+    <p><code>https://mozilla.org/a/b/</code><br>
+     (unmatched path)</p>
+
+    <p><code>https://mozilla.org/a/b/c/d/?foo=bar</code><br>
+     (unmatched path due to URL query string)</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>file:///blah/*</code></p>
+
+    <p>Match any FILE URL whose path begins with "blah".</p>
+   </td>
+   <td>
+    <p><code>file:///blah/</code></p>
+
+    <p><code>file:///blah/bleh</code></p>
+   </td>
+   <td><code>file:///bleh/</code><br>
+    (unmatched path)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Invalid_match_patterns">Invalid match patterns</h3>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Invalid pattern</th>
+   <th scope="col">Reason</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>resource://path/</code></td>
+   <td>Unsupported scheme.</td>
+  </tr>
+  <tr>
+   <td><code>https://mozilla.org</code></td>
+   <td>No path.</td>
+  </tr>
+  <tr>
+   <td><code>https://mozilla.*.org/</code></td>
+   <td>"*" in host must be at the start.</td>
+  </tr>
+  <tr>
+   <td><code>https://*zilla.org/</code></td>
+   <td>"*" in host must be the only character or be followed by ".".</td>
+  </tr>
+  <tr>
+   <td><code>http*://mozilla.org/</code></td>
+   <td>"*" in scheme must be the only character.</td>
+  </tr>
+  <tr>
+   <td><code>https://mozilla.org:80/</code></td>
+   <td>Host must not include a port number.</td>
+  </tr>
+  <tr>
+   <td><code>*://*</code></td>
+   <td>Empty path: this should be "<code>*://*/*</code>".</td>
+  </tr>
+  <tr>
+   <td><code>file://*</code></td>
+   <td>Empty path: this should be "<code>file:///*</code>".</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<h3 id="scheme_2">scheme</h3>
+
+
+
+<p>{{Compat("webextensions.match_patterns.scheme",10)}}</p>
diff --git a/files/de/mozilla/add-ons/webextensions/what_are_webextensions/index.html b/files/de/mozilla/add-ons/webextensions/what_are_webextensions/index.html
new file mode 100644
index 0000000000..85498e8b30
--- /dev/null
+++ b/files/de/mozilla/add-ons/webextensions/what_are_webextensions/index.html
@@ -0,0 +1,24 @@
+---
+title: Was sind WebExtensions?
+slug: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions
+tags:
+  - WebExtensions
+translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions
+---
+<div>{{AddonSidebar}}</div>
+
+<p>WebExtensions erweitern und modifizieren die Funktionen eines Web-Browsers. Sie werden unter Verwendung von Standard-Webtechnologien - JavaScript, HTML und CSS - sowie zusätzlichen speziell dafür vorgesehenen JavaScript APIs erstellt. Unter anderem können mit so einer Erweiterung neue Funktionen zum Browser hinzufügt, das Erscheinungsbild oder der Inhalt bestimmter Webseiten verändert werden.</p>
+
+<p>Erweiterungen für Firefox werden mit Hilfe von WebExtensions APIs erstellt, einem Cross-Browser-System zum Entwickeln von Browsererweiterungen. Zum größten Teil ist die API kompatibel mit der <a class="external external-icon" href="https://developer.chrome.com/extensions">extension API</a> für Google Chrome und Opera. Erweiterungen, die für diese Browser erstellt wurden, laufen in den meisten Fällen mit <a href="/de/docs/Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension">wenigen Änderungen</a> in Firefox oder Microsoft Edge. Die API ist ebenfalls vollständig mit <a href="/de/Firefox/Multiprocess_Firefox">Multiprozess-Firefox</a> kompatibel.</p>
+
+<p>Vor WebExtensions gab es drei unterschiedliche Möglichkeiten, Erweiterungen für Firefox zu erstellen: <a href="/de/Add-ons/überliegende_Erweiterungen">XUL/XPCOM overlays</a>, <a href="/de/Add-ons/Bootstrapped_extensions">bootstrapped extensions</a> und das <a href="/de/Add-ons/SDK">Add-on SDK</a>. Seit Ende November 2017 sind WebExtensions APIs die einzige Möglichkeit, Firefox-Erweiterungen zu entwickeln, die vorherigen Systeme gelten als veraltet.</p>
+
+<p>Wir sind stets bemüht, die API ständig zu erweitern, um den Anforderungen der Add-on-Entwickler gerecht zu werden. Sollten Sie Anregungen dazu haben, würden wir uns über Ihre Mitteilung auf der englischsprachigen <a class="external external-icon" href="https://mail.mozilla.org/listinfo/dev-addons">Mailingliste für Add-on-Entwickler</a> oder auf <a href="irc://irc.mozilla.org/webextensions">#webextensions</a> im <a class="external external-icon" href="https://wiki.mozilla.org/IRC">IRC</a> freuen.</p>
+
+<h2 id="Nächste_Schritte">Nächste Schritte?</h2>
+
+<ul>
+ <li><a href="/de/Add-ons/WebExtensions/Examples">WebExtensions Beispiele</a>.</li>
+ <li><a href="/de/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">Aufbau einer WebExtension</a>.</li>
+ <li><a href="/de/Add-ons/WebExtensions/Your_first_WebExtension">Schritt-für-Schritt Entwicklung einer einfachen WebExtension</a>.</li>
+</ul>
diff --git a/files/de/mozilla/add-ons/überliegende_erweiterungen/index.html b/files/de/mozilla/add-ons/überliegende_erweiterungen/index.html
new file mode 100644
index 0000000000..0214de4021
--- /dev/null
+++ b/files/de/mozilla/add-ons/überliegende_erweiterungen/index.html
@@ -0,0 +1,54 @@
+---
+title: Legacy-Erweiterungen
+slug: Mozilla/Add-ons/überliegende_Erweiterungen
+tags:
+  - Add-ons
+  - Erweiterungen
+translation_of: Archive/Add-ons/Overlay_Extensions
+---
+<p>Diese Seite enthält Links zu der Dokumentation für die approach für Entwickeln von Erweiterungen für Gecko-basierte Applikationen welche benutzen:</p>
+
+<ul>
+ <li>XUL Überliegungen um das Interface zu spezialisieren</li>
+ <li>APIs, welche auf privilegiertem Code, solchem wie <a href="/en-US/docs/XUL/tabbrowser"><code>tabbrowser</code></a> und <a href="/en-US/docs/Mozilla/JavaScript_code_modules">JavaScript modules</a>,verfügbar sind, um mit der Applikation und dem Inhalt zu interagieren.</li>
+</ul>
+
+<p>Priorität zu Firefox 4, und der Gecko-2- Engine welche es ermöglicht, dies war die einzige Möglichkeit Erweiterungen zu entwickeln. Diese Methode wurde sehr übertroffen von <a href="/en-US/docs/Extensions/Bootstrapped_extensions">Neustartlosen Erweiterungen</a>, und der <a href="/en-US/Add-ons/SDK">Add-on SDK</a>, welche an ihrer Spitze gebaut ist. Die privilegierten JavaScript APIs, welche hier beschrieben wurden, können in diesen neueren Typen von Add-ons immer noch benutzt werden.</p>
+
+<h2 id="XUL-Schule">XUL-Schule</h2>
+
+<p><a href="/en-US/Add-ons/Overlay_Extensions/XUL_School">XUL-Schule</a> ist ein verständliches Addonentwicklungstutorial, fokussierend auf die Entwicklung  von Firefoxerweiterungen, aber ist meistens übertragbar auf andere Gecko-basierte Applikationen.</p>
+
+<h2 id="Mehr_Ressourcen">Mehr Ressourcen</h2>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Mozilla/Add-ons/Setting_up_extension_development_environment">Setting up your environment</a></dt>
+ <dd>Setting up the application for extension development.</dd>
+ <dt><a href="/en-US/docs/XUL">XUL</a></dt>
+ <dd>Tutorials and reference for the user interface language used by XUL extensions.</dd>
+ <dt><a href="/en-US/Mozilla/Add-ons/Code_snippets">Code snippets</a></dt>
+ <dd>Sample code for many of the things you'll want to do.</dd>
+ <dt><a href="/en-US/Mozilla/Add-ons/Installing_extensions">Installing extensions</a></dt>
+ <dd>How to install an extension by copying the extension files into the application's install directory.</dd>
+ <dt><a href="/en-US/Add-ons/Overlay_extensions/Firefox_addons_developer_guide">Firefox add-ons developer guide</a></dt>
+ <dd>A guide to developing overlay extensions.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules">JavaScript code modules</a></dt>
+ <dd>JavaScript modules available to extension developers.</dd>
+ <dt><a href="/en-US/Mozilla/Add-ons/Inline_Options">Extension preferences</a></dt>
+ <dd>How to specify the preferences for your extension that will appear in the Add-ons Manager.</dd>
+ <dt><a href="/en-US/Mozilla/Add-ons/Extension_Packaging">Extension packaging</a></dt>
+ <dd>How extensions are packaged and installed.</dd>
+ <dt><a href="/en-US/Mozilla/Add-ons/Creating_Custom_Firefox_Extensions_with_the_Mozilla_Build_System">Binary Firefox extensions</a></dt>
+ <dd>Creating binary extensions for Firefox.</dd>
+</dl>
+</div>
+</div>
+
+<p> </p>
diff --git a/files/de/mozilla/chrome_registration/index.html b/files/de/mozilla/chrome_registration/index.html
new file mode 100644
index 0000000000..44fb60e26f
--- /dev/null
+++ b/files/de/mozilla/chrome_registration/index.html
@@ -0,0 +1,48 @@
+---
+title: Chrome registration
+slug: Mozilla/Chrome_Registration
+translation_of: Mozilla/Chrome_Registration
+---
+<h2 id="What_is_Chrome.3F" name="What_is_Chrome.3F">Was ist chrome?</h2>
+
+<p><a href="/en/Chrome" title="en/Chrome">Chrome</a> <span id="result_box" lang="de"><span style="background-color: transparent;">ist eine Gruppe von Benutzeroberflächenelementen des Anwendungsfensters, die sich außerhalb des Inhaltsbereichs des Fensters befinden.</span> <span style="background-color: transparent;">Symbolleisten, Menüleisten, Fortschrittsleisten und Fenstertitelleisten sind Beispiele für Elemente, die normalerweise zum Chrom gehören.</span></span></p>
+
+<p><span id="result_box" lang="de"><span style="background-color: transparent;">Mozilla sucht und liest die root-Datei </span></span><code>chrome.manifest</code> <span id="result_box" lang="de"><span style="background-color: transparent;">nach Erweiterungen und Designs.</span></span></p>
+
+<div class="note">
+<p><strong>Note:</strong> With {{Gecko("1.9.2")}} and older, Mozilla reads <code>chrome/*.manifest</code> files from applications. Starting with {{Gecko("2.0")}}, the root <code>chrome.manifest</code> is the only manifest used; you can add <a href="/en/Chrome_Registration#manifest" title="en/Chrome Registration#manifest"><code>manifest</code></a> commands to that file to load secondary manifests.</p>
+</div>
+
+<h2 id="Chrome_Providers" name="Chrome_Providers">Chrome Anbieter</h2>
+
+<p><span id="result_box" lang="de"><span title="A supplier of chrome for a given window type (e.g., for the browser window) is called a chrome provider.">Ein Anbieter von Chrom für einen bestimmten Fenstertyp (z. B. für das Browserfenster) wird als Chromanbieter bezeichnet. </span><span title="The providers work together to supply a complete set of chrome for a particular window, from the images on the toolbar buttons to the files that describe the text, content, and appearance of the window itself.
+
+">Die Anbieter arbeiten zusammen, um einen vollständigen Chromsatz für ein bestimmtes Fenster bereitzustellen, von den Bildern auf den Symbolleistenschaltflächen bis zu den Dateien, die den Text, den Inhalt und das Erscheinungsbild des Fensters selbst beschreiben.</span><br>
+ <br>
+ <span title="There are three basic types of chrome providers:
+
+">Es gibt drei grundlegende Arten von Chromanbietern:</span><br>
+ <br>
+ <span title="Content
+    "><strong>Inhalt</strong><br>
+     </span><span title="The main source file for a window description comes from the content provider, and it can be any file type viewable from within Mozilla.">Die Hauptquelldatei für eine Fensterbeschreibung stammt vom Inhaltsanbieter und kann von jedem Dateityp sein, der in Mozilla angezeigt werden kann. </span><span title="It will typically be a XUL file, since XUL is designed for describing the contents of windows and dialogs.">Normalerweise handelt es sich um eine XUL-Datei, da XUL zur Beschreibung des Inhalts von Fenstern und Dialogen gedacht ist. </span><span title='The JavaScript files that define the user interface are also contained within the content packages, as well as most {{Glossary("XBL")}} binding files.
+'>Die JavaScript-Dateien, die die Benutzeroberfläche definieren, sind auch in den Inhaltspaketen sowie in den meisten {{Glossary ("XBL")}} - Bindungsdateien enthalten.</span></span></p>
+
+<p><span lang="de"><span title="Locale
+    "><strong>Gebietsschema</strong><br>
+     </span><span title="Localizable applications keep all their localized information in locale providers.">Lokalisierbare Anwendungen speichern alle lokalisierten Informationen in Gebietsschemaanbietern. </span><span title="This allows translators to plug in a different chrome package to translate an application without altering the rest of the source code.">Dadurch können Übersetzer ein anderes Chrome-Paket zum Übersetzen einer Anwendung einstecken, ohne den Rest des Quellcodes zu ändern. </span><span title='The two main types of localizable files are {{Glossary("DTD")}} files and Java-style properties files.
+'>Die zwei Haupttypen von lokalisierbaren Dateien sind {{Glossary ("DTD")}} - Dateien und Java-Eigenschaftendateien.</span></span></p>
+
+<p><span lang="de"><span title="Skin
+    "><strong>Skin</strong><br>
+     </span><span title="A skin provider is responsible for providing a complete set of files that describe the visual appearance of the chrome.">Ein Skin-Anbieter ist dafür verantwortlich, einen vollständigen Satz von Dateien bereitzustellen, der das optische Erscheinungsbild des Chroms beschreibt. </span><span title='Typically a skin provider will provide {{Glossary("CSS")}} files and images.
+
+'>Normalerweise stellt ein Skin-Provider Dateien und Bilder {{Glossary ("CSS")}} bereit.</span></span></p>
+
+<p> </p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> <span id="result_box" lang="de"><span style="background-color: transparent;" title="Note: Scripts (including those found in XBL) loaded from skin packages will not execute.">Aus Skin-Paketen geladene Skripts </span></span> ( <span id="result_box" lang="de"><span style="background-color: transparent;" title="Note: Scripts (including those found in XBL) loaded from skin packages will not execute.">einschließlich der in </span></span> <a href="/en/XBL" title="en/XBL">XBL</a> gefundenen) werden nicht ausgeführt.</p>
+</div>
+
+<p> </p>
diff --git a/files/de/mozilla/creating_a_spell_check_dictionary_add-on/index.html b/files/de/mozilla/creating_a_spell_check_dictionary_add-on/index.html
new file mode 100644
index 0000000000..6fea30e835
--- /dev/null
+++ b/files/de/mozilla/creating_a_spell_check_dictionary_add-on/index.html
@@ -0,0 +1,105 @@
+---
+title: >-
+  Auf dieser Seite wird beschrieben, wie Sie ein Wörterbuch für die
+  Rechtschreibprüfung von Hunspell als Firefox-Add-On
+slug: Mozilla/Creating_a_spell_check_dictionary_add-on
+tags:
+  - Deutsch
+  - German Translation
+  - Lesen Sie die Tagging-Anleitung.
+  - Übersetzung
+translation_of: Mozilla/Creating_a_spell_check_dictionary_add-on
+---
+<div class="blockIndicator note">
+<p dir="rtl">This paDieserge describes how to package a Hunspell spell check dictionary as a Firefox add-on, or how to update your existing add-on, so that it can be installed, uninstalled and updated without a restart.</p>
+</div>
+
+<h2 id="Parts_neededdictionary_add-on_you_first_need_two_things">Parts neededdictionary add-on, you first need two things:</h2>
+
+<ul>
+ <li>A spell check dictionary in Hunspell or Myspell format, with a license which allows you to use it. Such a dictionary consists of two files, one with a <code>.dic</code> and one with an <code>.aff</code> file extension.</li>
+ <li>A locale code to describe the language of the dictionary. For example <code>en-US</code>, <code>de-DE</code> or <code>da</code>. It is important to choose the right locale code, or the spell checker will not be able to match the language of your dictionary against the language of a web page in order to select the right dictionary to use.</li>
+</ul>
+
+<p>If you are creating a new dictionary, as opposed to updating an existing one, please make sure that there is not already a <a href="https://addons.mozilla.org/en-US/firefox/language-tools/" title="https://addons.mozilla.org/en-US/firefox/language-tools/">dictionary available</a> for your locale. If there already is one, try contacting the author to get it updated, or contact <a href="https://wiki.mozilla.org/AMO:Editors" title="https://wiki.mozilla.org/AMO:Editors">AMO editors</a> if the author does not respond.</p>
+
+<h2 id="Packaging">Packaging</h2>
+
+<p>A Firefox add-on is a ZIP file renamed to use an <code>.xpi</code> file extension instead of the normal <code>.zip</code> file extension. To create a dictionary add-on, simply create a ZIP file which contains the following files and folders:</p>
+
+<p><code>my-dictionary.xpi</code></p>
+
+<ul>
+ <li><code>install.rdf</code></li>
+ <li><code>dictionaries/</code>
+  <ul>
+   <li><em>locale-code</em><code>.dic</code></li>
+   <li><em>locale-code</em><code>.aff</code></li>
+  </ul>
+ </li>
+</ul>
+
+<p>The <code>.dic</code> and <code>.aff</code> files must be placed in a subfolder named <code>dictionaries</code> within the ZIP file. Both files must have the locale code as their file name. You also have to add a file named <code>install.rdf</code> to the root of the ZIP file. This file contains information about your add-on such as name and version number (see below). In addition to these required files, you may add optional files, for example to give your add-on an <a href="/en-US/docs/Install_Manifests#iconURL" title="/en-US/docs/Install_Manifests#iconURL">icon</a> or to describe the license of the dictionary.</p>
+
+<p>Here is an example of the <code>install.rdf</code> file. You can create and edit it with a plain text editor such as Notepad.</p>
+
+<p><code>&lt;?xml version="1.0"?&gt;<br>
+ &lt;RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"<br>
+      xmlns:em="http://www.mozilla.org/2004/em-rdf#"&gt;<br>
+   &lt;Description about="urn:mozilla:install-manifest"&gt;<br>
+     &lt;em:id&gt;<span style="color: #ff0000;"><strong><em>locale-code</em></strong></span>@dictionaries.addons.mozilla.org&lt;/em:id&gt;<br>
+     &lt;em:version&gt;<em><strong><span style="color: #ff0000;">version number</span></strong></em>&lt;/em:version&gt;<br>
+     &lt;em:type&gt;64&lt;/em:type&gt;<br>
+     &lt;em:unpack&gt;true&lt;/em:unpack&gt;<br>
+     &lt;em:name&gt;<span style="color: #ff0000;"><em><strong>Name</strong></em></span>&lt;/em:name&gt;<br>
+     <em><strong>&lt;!--<br>
+       Other <a href="/en-US/docs/Install_Manifests" title="/en-US/docs/Install_Manifests">install.rdf metadata</a> such as em:localized, em:description, em:creator,<br>
+       em:developer, em:translator, em:contributor or em:homepageURL<br>
+     --&gt;</strong></em><br>
+ <br>
+     &lt;!-- Firefox --&gt;<br>
+     &lt;em:targetApplication&gt;<br>
+       &lt;Description&gt;<br>
+         &lt;em:id&gt;{ec8030f7-c20a-464f-9b0e-13a3a9e97384}&lt;/em:id&gt;<br>
+         &lt;em:minVersion&gt;18.0a1&lt;/em:minVersion&gt;<br>
+         &lt;em:maxVersion&gt;46.0&lt;/em:maxVersion&gt;<br>
+       &lt;/Description&gt;<br>
+     &lt;/em:targetApplication&gt;<br>
+ <br>
+     &lt;!-- Thunderbird --&gt;<br>
+     &lt;em:targetApplication&gt;<br>
+       &lt;Description&gt;<br>
+         &lt;em:id&gt;{3550f703-e582-4d05-9a08-453d09bdfdc6}&lt;/em:id&gt;<br>
+         &lt;em:minVersion&gt;18.0a1&lt;/em:minVersion&gt;<br>
+         &lt;em:maxVersion&gt;22.0&lt;/em:maxVersion&gt;<br>
+       &lt;/Description&gt;<br>
+     &lt;/em:targetApplication&gt;<br>
+ <br>
+     &lt;!-- SeaMonkey --&gt;<br>
+     &lt;em:targetApplication&gt;<br>
+       &lt;Description&gt;<br>
+         &lt;em:id&gt;{92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}&lt;/em:id&gt;<br>
+         &lt;em:minVersion&gt;2.15a1&lt;/em:minVersion&gt;<br>
+         &lt;em:maxVersion&gt;2.49&lt;/em:maxVersion&gt;<br>
+       &lt;/Description&gt;<br>
+     &lt;/em:targetApplication&gt;<br>
+   &lt;/Description&gt;<br>
+ &lt;/RDF&gt;</code></p>
+
+<p>There are some rules about how you should adapt the <code>install.rdf</code> file:</p>
+
+<ul>
+ <li>If you are creating a new dictionary add-on, we recommend that the <code>em:id</code> consists of your locale code followed by <code>@dictionaries.addons.mozilla.org</code>, but if there is more than one dictionary for your language (for example the German "old spelling" versus "new spelling" dictionaries), you may need to choose another ID, that follows the <a href="/en-US/docs/Install_Manifests#id" title="/en-US/docs/Install_Manifests#id">rules of em:id</a>. If you update an existing dictionary add-on, you must keep the existing <code>em:id</code>, or your users will not be updated to the latest version.</li>
+ <li>The <code>em:version</code> should follow the <a href="/en-US/docs/Toolkit_version_format" title="/en-US/docs/Toolkit_version_format">rules of Mozilla add-on version numbers</a>, and if you update an existing dictionary add-on, the new version number must be greater than the old one.</li>
+ <li>Don't change <code>em:type</code> or <code>em:unpack</code>, and don't add a <code>em:bootstrap</code> element. Type = 64 indicates that the add-on is in the restartless format, and unpack is required for Hunspell to read the dictionary.</li>
+ <li>Although the restartless format for dictionary add-ons were introduced in Gecko 10, dictionary updates only works starting from Gecko 18. The <code>em:minVersion</code> should therefore be the same as in the example above (or greater). If you set <code>em:minVersion</code> to a lower value, Gecko 10-17 will not be able to update your dictionary add-on once the restartless dictionary is installed (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=782118">bug 782118</a>), and Gecko 10-16 may warn the user that your dictionary is not compatible, when users try to update to a newer version of Firefox/Thunderbird (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=782115" title="https://bugzilla.mozilla.org/show_bug.cgi?id=782115">bug 782115</a>).</li>
+ <li>Update the <code>em:maxVersion</code> to the <a href="https://addons.mozilla.org/en-us/firefox/pages/appversions/" title="https://addons.mozilla.org/en-us/firefox/pages/appversions/">greatest versions available</a>.</li>
+</ul>
+
+<p>Once you have added these files to your ZIP file and renamed the file to have the <code>.xpi</code> extension, you can install your add-on in Firefox and test it. After a successful test, you can upload your add-on to <a href="https://addons.mozilla.org/" title="https://addons.mozilla.org/">addons.mozilla.org</a> and ask for it to be included in the <a href="https://addons.mozilla.org/en-US/firefox/language-tools/" title="https://addons.mozilla.org/en-US/firefox/language-tools/">Dictionaries &amp; Language Packs</a> page.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<ul>
+ <li><a href="http://www.suares.com/index.php?page_id=25&amp;news_id=233">Creating a hunspell dictionary</a></li>
+</ul>
diff --git a/files/de/mozilla/css/index.html b/files/de/mozilla/css/index.html
new file mode 100644
index 0000000000..52ff0c90d6
--- /dev/null
+++ b/files/de/mozilla/css/index.html
@@ -0,0 +1,11 @@
+---
+title: Mozilla internal-only CSS
+slug: Mozilla/CSS
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Mozilla/Gecko/Chrome/CSS
+---
+<p>This set of pages details CSS features that are only available internally in the Firefox browser — i.e. only inside the US stylesheet.</p>
+
+<p>{{SubpagesWithSummaries}}</p>
diff --git a/files/de/mozilla/developer_guide/firefox_erfolgreich_erstellt/index.html b/files/de/mozilla/developer_guide/firefox_erfolgreich_erstellt/index.html
new file mode 100644
index 0000000000..1734710732
--- /dev/null
+++ b/files/de/mozilla/developer_guide/firefox_erfolgreich_erstellt/index.html
@@ -0,0 +1,14 @@
+---
+title: 'So, Du hast Firefox erfolgreich erstellt'
+slug: Mozilla/Developer_guide/firefox_erfolgreich_erstellt
+translation_of: Mozilla/Developer_guide/So_you_just_built_Firefox
+---
+<p>Ein Link zu dieser Seite wird nach dem erfolgreichen Erstellen von Firefox angezeigt. Diese Seite sollte nützliche nächste Schritte enthalten, wie Links wie man Test laufen lassen kann, Build packen kann, etc. Der Inhalt hier sollte kurz gehalten werden, genauere Informationen sollten in den verlinkten Seiten hinzugefügt werden. Die Zielgruppe sind Besucher, die gerade Firefox zum ersten mal gebaut haben.</p>
+
+<p>Ein paar interessante Links:</p>
+
+<p><a href="/en-US/docs/Running_automated_tests" title="Running automated tests">Tests laufen lassen</a></p>
+
+<p><a href="/en-US/docs/Mozilla/Debugging" title="Debugging">Debuggen</a></p>
+
+<p><a href="/en-US/docs/Mozilla/QA/Bug_writing_guidelines" title="Bug writing guidelines">Fehler melden</a></p>
diff --git a/files/de/mozilla/developer_guide/index.html b/files/de/mozilla/developer_guide/index.html
new file mode 100644
index 0000000000..82603e44bc
--- /dev/null
+++ b/files/de/mozilla/developer_guide/index.html
@@ -0,0 +1,108 @@
+---
+title: Entwicklerhandbuch
+slug: Mozilla/Developer_guide
+tags:
+  - Entwicklerhandbuch
+translation_of: Mozilla/Developer_guide
+---
+<p>Egal, ob Sie ein alter Hase sind oder gerade erst anfangen, von dieser Seite aus finden Sie Artikel, die Ihnen während der Entwicklung von Mozilla Hilfestellung bieten können.</p>
+<h2 id="Zum_ersten_Mal_hier">Zum ersten Mal hier?</h2>
+<dl>
+ <dt>
+  <a href="/en-US/docs/Introduction" title="Introduction (Englisch)">Getting Started (auf Englisch)</a></dt>
+ <dd>
+  Eine Schritt-für-Schritt-Anleitung für Anfänger darüber, wie man sich an Mozilla beteiligen kann.</dd>
+</dl>
+<div class="row topicpage-table">
+  <div class="section">
+    <h2 id="Dokumentation">Dokumentation</h2>
+    <dl>
+     <dt>
+      <a href="/de/Entwicklerhandbuch/Quelltexte" title="de/Entwicklerhandbuch/Quelltexte">Mit dem Mozilla-Quellcode arbeiten</a></dt>
+     <dd>
+      Ein Überblick über den Code, wie man den Code bekommt und der Code-Stilführer.</dd>
+     <dt>
+      <a href="/de/Entwicklerhandbuch/Build_Anweisungen" title="de/Entwicklerhandbuch/Build_Anweisungen">Build-Anweisungen</a></dt>
+     <dd>
+      Wie man Firefox, Thunderbird, SeaMonkey, oder andere Mozilla-Applikationen kompiliert.</dd>
+     <dt>
+      <a href="/de/Entwicklerhandbuch/Überblick_über_den_Entwicklugsprozess" title="de/Entwicklerhandbuch/Überblick_über_den_Entwicklugsprozess">Überblick über den Entwicklungsprozess</a></dt>
+     <dd>
+      Ein Überblick über den kompletten Entwicklungsprozess von Mozilla</dd>
+     <dt>
+      <a href="/de/Automatisiertes_Testen" title="de/Automatisiertes_Testen">Automatisiertes Testen</a></dt>
+     <dd>
+      Wie man Mozillas automatisierte Tests ausführt und wie neue Tests hinzugefügt werden können.</dd>
+     <dt>
+      <a href="/de/Entwicklerhandbuch/Wie_ein_Patch_eingereicht_werden_kann" title="de/Entwicklerhandbuch/Wie_ein_Patch_eingereicht_werden_kann">Wie Sie Ihren Patch einreichen können</a></dt>
+     <dd>
+      Wenn Sie Ihren Patch geschrieben haben, muss dieser im Tree eingereicht werden. Dieser Artikel erklärt den Review-Prozess und wie Sie es schaffen, dass Ihr Patch angenommen wird.</dd>
+     <dt>
+      <a href="/de/Mozilla_Module_und_Modul_Ownership" title="de/Mozilla_Module_und_Modul_Ownership">Mozilla-Module und "Eigentum" an Modulen</a></dt>
+     <dd>
+      Dieser Artikel enthält Informationen über Mozillas Module, was die Rolle eines Modul-Eigentümers ist und wie Modul-Eigentümer ausgewählt werden.</dd>
+     <dt>
+      <a href="/de/Hacking_Firefox" title="de/Hacking_Firefox">Arbeit an der Firefox-Benutzeroberfläche</a></dt>
+     <dd>
+      Wie man in die Entwicklung der Firefox Benutzerschnittstelle und Front-End-Software beteiligt werden kann.</dd>
+     <dt>
+      <a href="/de/Codeschnipsel" title="de/Codeschnipsel">Codeschnipsel</a></dt>
+     <dd>
+      Nützliche Code-Beispiele für weit gestreute Anwendungsgebiete.</dd>
+     <dt>
+      <a href="/de/Mozilla_Entwicklundsstrategien" title="de/Mozilla_Entwicklundsstrategien">Mozilla Entwicklungsstrategien</a></dt>
+     <dd>
+      Tipps wie man das meiste aus seiner Arbeit am Mozilla Projekt herausholen kann.</dd>
+     <dt>
+      <a href="/de/Debugging" title="de/Debugging">Debugging</a></dt>
+     <dd>
+      Hilfsreiche Tipps und Anleitungen für das Debugging von Mozilla Code.</dd>
+     <dt>
+      <a href="/de/Die_Mozilla_Plattform" title="de/Die_Mozilla_Plattform">Die Mozilla Plattform</a></dt>
+     <dd>
+      Informationen über die Arbeit mit der Mozilla Plattform.</dd>
+     <dt>
+      <a href="/de/Entwicklerhandbuch/Interface_Kompatibilität">Interface Kompatibilität</a></dt>
+     <dd>
+      Hinweise zu Änderungen an skriptbaren und binären APIs in Mozilla</dd>
+    </dl>
+  </div>
+  <div class="section">
+    <h2 id="Tools">Tools</h2>
+    <dl>
+     <dt>
+      <a class="link-https" href="https://bugzilla.mozilla.org/">Bugzilla</a></dt>
+     <dd>
+      Die <a href="/de/Bugzilla" title="de/Bugzilla">Bugzilla</a>-Datenbank wird verwendet, um Fehler in Mozilla-Produkten aufzuzeichnen.</dd>
+     <dt>
+      <a class="external" href="http://mxr.mozilla.org/">MXR</a></dt>
+     <dd>
+      Durchsuchen des Mozilla-Quellcodes im Web.</dd>
+     <dt>
+      <a class="external" href="http://bonsai.mozilla.org/cvsqueryform.cgi">Bonsai</a></dt>
+     <dd>
+      Mit dem <a href="/de/Bonsai" title="de/Bonsai">Bonsai</a> Tool lässt sich heraus finden, wer wann welche Datei verändert hat.</dd>
+     <dt>
+      <a href="/de/Mercurial" title="de/Mercurial">Mercurial</a></dt>
+     <dd>
+      Das Versions-Kontrollsystem, das Mozillas Quellcode verwaltet.</dd>
+     <dt>
+      <a class="external" href="http://tinderbox.mozilla.org/showbuilds.cgi">Tinderbox</a></dt>
+     <dd>
+      <a href="/de/Tinderbox" title="de/Tinderbox">Tinderbox</a> zeigt den Status des Trees (ob aktuell erfolgreich kompliliert werden kann oder nicht). Überprüfen Sie den Status bevor Sie Code einreichen, um sicher zu gehen, dass Sie nicht an einem arbeiten Tree arbeiten.</dd>
+     <dt>
+      <a href="/de/Crash_Reporting" title="de/Crash_Reporting">Crash tracking</a></dt>
+     <dd>
+      Informationen über die <a class="link-https" href="https://crash-reports.mozilla.com/reports">Socorro</a> und <a class="external" href="http://talkback-public.mozilla.org/search/start.jsp">Talkback</a> Crash Report Systeme.</dd>
+     <dt>
+      <a class="external" href="http://graphs.mozilla.org/">Performance Aufzeichnung</a></dt>
+     <dd>
+      Siehe Performance Informationen für Mozilla Projekte.</dd>
+     <dt>
+      <a class="external" href="http://www.mozilla.org/community/developer-forums.html">Entwicklerforen</a></dt>
+     <dd>
+      Eine Themen-spezifische Liste von Forendiskussionen, in denen Sie sich über die Entwicklung von Mozilla austauschen können.</dd>
+    </dl>
+  </div>
+</div>
+<p>{{ languages( { "en": "en/Developer_Guide", "zh-cn": "Cn/Developer_Guide", "ja": "ja/Developer_Guide" } ) }}</p>
diff --git a/files/de/mozilla/developer_guide/quelltexte/index.html b/files/de/mozilla/developer_guide/quelltexte/index.html
new file mode 100644
index 0000000000..b5cc6c79bb
--- /dev/null
+++ b/files/de/mozilla/developer_guide/quelltexte/index.html
@@ -0,0 +1,46 @@
+---
+title: Mit Mozilla Quellcode arbeiten
+slug: Mozilla/Developer_guide/Quelltexte
+translation_of: Mozilla/Developer_guide/Source_Code
+---
+<p>Die unten aufgeführten Artikel helfen Ihnen dabei mit dem Mozilla Quelltext umgehen zu können, zu lernen wie man durch den Code navigiert und wie Änderungen in Projekte einfließen können.</p>
+
+<table class="mainpage-table">
+ <tbody>
+  <tr>
+   <td colspan="2">
+    <h2 id="Dokumentation">Dokumentation</h2>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <dl>
+     <dt><a href="/de/Entwicklerhandbuch/Quelltexte/Mercurial" title="de/Entwicklerhandbuch/Quelltexte/Mercurial">Code aus der Mercurial Repository erhalten</a></dt>
+     <dd>Falls Sie vorhaben sich am Mozilla Projekt zu beteiligen, bietet es sich an den Quelltext über die Mercurial Repository zu erhalten. Lesen Sie hier wie Sie das am Besten machen.</dd>
+     <dt><a href="/de/Entwicklerhandbuch/Quelltexte/Mozilla_Quelltexte_herunterladen">Mozilla Quelltexte herunterladen</a></dt>
+     <dd>Wenn Sie den Quelltext für eine bestimmte Version eines Mozilla Produkts suchen, können Sie ein Archiv herunterladen.</dd>
+     <dt><a href="/de/Mozilla_Quelltexte_online_durchsuchen" title="de/Mozilla_Quelltexte_online_durchsuchen">Mozilla Quelltexte online durchsuchen</a></dt>
+     <dd>Lernen Sie wie man MXR, Mozillas online Code-Suchwerkzeug, bedient.  Das ist kein guter Weg um Code herunterzuladen, aber um ihn zu durchsuchen.</dd>
+     <dt><a href="/de/Mozilla_Quelltext_Verzeichnisstrukturen" title="de/Mozilla_Quelltext_Verzeichnisstrukturen">Mozilla Verzeichnisstrukturen für Quelltexte</a></dt>
+     <dd>Lernen Sie mehr über die unterschiedlichen Verzeichnisse in Mozillas Verzeichnisstrukturen und finden Sie schnell das, was Sie suchen.</dd>
+     <dt><a class="external" href="http://www.mozilla.org/contribute/hacking/first-bugs/" title="http://www.mozilla.org/contribute/hacking/first-bugs/">Anfänger Bugs</a></dt>
+     <dd>Wenn Sie neu dabei sind und an etwas arbeiten möchten, schauen Sie sich mal diese Bugs an.</dd>
+    </dl>
+   </td>
+   <td>
+    <dl>
+     <dt><a href="/de/Entwicklerhandbuch/Coding_Style" title="de/Entwicklerhandbuch/Coding_Style">Mozilla Coding Style</a></dt>
+     <dd>Dieser Code Style Guide liefert Information über das korrekte Format der Quelltexte, damit Reviewers Sie nicht direkt verspotten, wenn Sie Ihren Code einreichen.</dd>
+     <dt><a class="link-https" href="https://wiki.mozilla.org/Build:TryServer" title="https://wiki.mozilla.org/Build:TryServer">Try Servers</a></dt>
+     <dd>Mozilla Produkte werden auf mindestens drei Plattformen kompiliert. Wenn Sie nicht Zugang zu allen haben, können Sie diese Testserver nutzen, um zu überprüfen, ob Ihr Patch auf allen Plattformen funktioniert.</dd>
+     <dt><a href="/de/Einen_Patch_erstellen" title="de/Einen_Patch_erstellen">Einen Patch erstellen</a></dt>
+     <dd>Sobald Sie den Mozilla Code verändert haben und sicher sind, dass alles funktioniert, erstellen Sie einen Patch und reichen diesen zur Überprüfung ein<em>.</em></dd>
+     <dt><a class="external" href="http://www.mozilla.org/hacking/committer/" title="http://www.mozilla.org/hacking/committer/">Commit Zugang zum Quelltext erhalten</a></dt>
+     <dd>Sind Sie bereit den wenigen Committers beizutreten? Finden Sie heraus, wie Sie Check-in Zugang zum Mozilla Code erhalten.</dd>
+     <dt><a href="/de/Entwicklerhandbuch/Quelltexte/CVS" title="de/Entwicklerhandbuch/Quelltexte/CVS">Ältere Mozilla Codes über CVS erhalten</a></dt>
+     <dd>Ältere Versionen des Mozilla Quelltexts und auch Versionen von NSS und NSPR werden in einer CVS Repository aufbewahrt. Lernen Sie hier mehr darüber.</dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/de/mozilla/firefox/developer_edition/index.html b/files/de/mozilla/firefox/developer_edition/index.html
new file mode 100644
index 0000000000..41bacac01d
--- /dev/null
+++ b/files/de/mozilla/firefox/developer_edition/index.html
@@ -0,0 +1,57 @@
+---
+title: Developer Edition
+slug: Mozilla/Firefox/Developer_Edition
+translation_of: Mozilla/Firefox/Developer_Edition
+---
+<div>{{FirefoxSidebar}}</div><p><img alt="" src="https://mdn.mozillademos.org/files/9069/firefox-dev-ed_logo-only_1024.png" style="display: block; height: 256px; margin-left: auto; margin-right: auto; width: 256px;"></p>
+
+<p style="text-align: center;">Eine Version von Firefox, maßgeschneidert für Webentwickler.</p>
+
+<p><a href="https://www.mozilla.org/de-DE/firefox/developer/" style="width: 270px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Firefox Developer Edition herunterladen</a></p>
+
+<hr>
+<div class="column-container">
+<div class="column-half">
+<h3 id="Die_neuesten_Firefox-Features"><strong>Die neuesten Firefox-Features</strong></h3>
+
+<p>Firefox Developer Edition ersetzt den Aurora-Kanal im <a href="https://wiki.mozilla.org/Release_Management/Release_Process">Firefox Release-Prozess</a>. Wie bei Aurora werden Features alle sechs Wochen in die Developer Edition einfließen, nachdem sie in den Nightly-Builds stabilisiert wurden.</p>
+
+<p>Indem Sie die Developer Edition nutzen, erhalten Sie Zugriff auf Tools und Plattform-Features mindestens 12 Wochen, bevor sie den Firefox Release-Kanal erreichen.</p>
+
+<p><a href="/en-US/Firefox/Releases/35">Finden Sie heraus, was neu in der Developer Edition ist</a>.</p>
+</div>
+
+<div class="column-half">
+<h3 id="Experimentelle_Entwickler-Tools"><strong>Experimentelle Entwickler-Tools</strong></h3>
+
+<p>Wir binden experimentelle Tools ein, die noch nicht für eine allgemeine Veröffentlichung bereit sind.</p>
+
+<p>Zum Beispiel enthält die Developer Edition den <a href="/en-US/docs/Tools/Firefox_Tools_Adapter">Firefox Tools-Adapter</a>, mit dem Sie die <a href="/en-US/docs/Tools">Firefox Tools für Webentwickler</a> mit anderen Browsern verbinden können, wie Chrome auf Android und Safari auf iOS.</p>
+</div>
+</div>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Ein_unabhängiges_Profil"><strong>Ein unabhängiges Profil</strong></h3>
+
+<p>Firefox Developer Edition benutzt ein eigenes Profil, unabhängig von anderen Firefox-Versionen auf Ihrem Gerät. Das bedeutet, dass Sie die Developer Edition leicht neben Ihrer Release- oder Beta-Version von Firefox verwenden können.</p>
+</div>
+
+<div class="column-half">
+<h3 id="Für_Webentwickler_eingestellt"><strong>Für Webentwickler eingestellt</strong></h3>
+
+<p>Wir haben die Standard-Einstellungswerte für Webentwickler zugeschnitten. Zum Beispiel sind Chrome- und Remote-Debugging standardmäßig aktiviert.</p>
+</div>
+</div>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Ein_eigenständiges_Theme"><strong>Ein eigenständiges Theme</strong></h3>
+
+<p>Dies beinhaltet schnelleren Zugriff auf die Entwicklertools.</p>
+</div>
+
+<div class="column-half"> </div>
+</div>
+
+<p> </p>
diff --git a/files/de/mozilla/firefox/developer_edition/zurückkehren/index.html b/files/de/mozilla/firefox/developer_edition/zurückkehren/index.html
new file mode 100644
index 0000000000..7e5b838c6c
--- /dev/null
+++ b/files/de/mozilla/firefox/developer_edition/zurückkehren/index.html
@@ -0,0 +1,25 @@
+---
+title: Zurückkehren
+slug: Mozilla/Firefox/Developer_Edition/Zurückkehren
+translation_of: Mozilla/Firefox/Developer_Edition/Reverting
+---
+<div>{{FirefoxSidebar}}</div><h2 id="Vom_Developer_Edition_Theme_zurück_wechseln">Vom Developer Edition Theme zurück wechseln</h2>
+
+<p><br>
+ Wenn Sie die Developer Edition nutzen wollen, aber das 'Australis'-Aussehen von Firefox und Firefox Beta bevorzugen, können Sie auf das normale Firefox Design umschalten: Öffnen Sie dazu lediglich das "Anpassen"-Feld und klicken sie die Schaltfläche "Use Firefox Developer Edition Theme" an.</p>
+
+<p>{{EmbedYouTube("OvJwofTjsNg")}}</p>
+
+<p>Bitte beachten Sie, dass das Developer Edition Design noch nicht mit minimalistischen Designs kompatibel ist. Wenn Sie also ein minimalistisches Theme verwenden wollen, so werden Sie zum Australis-Design zurück wechseln müssen.</p>
+
+<h2 id="Zurückkehren_zu_Firefox_Aurora">Zurückkehren zu Firefox Aurora</h2>
+
+<p><br>
+ Wenn Sie alle vor-Beta Funktionen in Firefox Developer Edition nutzen wollen, aber keine der anderen Änderungen, dann können Sie zu einer Art Firefox Aurora zurückkehren. Das ist ein Prozess in zwei Schritten, es ist wichtig, dass Sie die Reihenfolge der Anweisungen befolgen:</p>
+
+<ol>
+ <li>Öffnen Sie die Einstellungen der Developer Edition und entfernen Sie den Haken bei "Allow Firefox Developer Edition and Firefox to run at the same time". Sie werden aufgefordert, den Browser neu zu starten.</li>
+ <li>Nach dem Neustart können Sie vom Developer Edition Design zurückkehren, indem Sie das "Anpassen"-Feld öffnen und die Schaltfläche "Use Firefox Developer Edition Theme" anklicken.</li>
+</ol>
+
+<p>{{EmbedYouTube("0Ofq-vlw8Qw")}}</p>
diff --git a/files/de/mozilla/firefox/headless-mode/index.html b/files/de/mozilla/firefox/headless-mode/index.html
new file mode 100644
index 0000000000..a2c3c424ee
--- /dev/null
+++ b/files/de/mozilla/firefox/headless-mode/index.html
@@ -0,0 +1,237 @@
+---
+title: Headless mode
+slug: Mozilla/Firefox/Headless-Mode
+tags:
+  - Automaisierung
+  - Firefox
+  - Flag
+  - Flagge
+  - Headless Modus
+  - Kopflos
+  - Mozilla
+  - QA
+  - Testautomatisierung
+  - Testen
+  - headless
+  - headless mode
+  - node.js
+translation_of: Mozilla/Firefox/Headless_mode
+---
+<div>{{FirefoxSidebar}}</div>
+
+<p class="summary">Der Headless-Mode ist eine sehr nützliche Weise auf dem der Firefox betrieben werden kann —  dabei funktioniert Firefox normal, nur dass die Oberfläche nicht sichtbar ist. Das erscheint nicht besonder sinnvoll, wenn man im Web surfen möchte, aber es ist sehr nützlich für automatisierte Tests. Dieser Artikel gibt dir alle Infos, die du brauchst um Firefox im Headless-Mode laufen zu lassen.</p>
+
+<h2 id="Den_Headless-Mode_verwenden">Den Headless-Mode verwenden</h2>
+
+<p>Dieser Bereich bietet eine grunsätzliche Anleitung wie man den Headless-Mode verwendet.</p>
+
+<h3 id="Grundsätzliche_Verwendung">Grundsätzliche Verwendung</h3>
+
+<p>Auf der Komandozeile kannst du Firefox im Headless-Mode starten indem du das <code>-headless</code> Flag anhängst. Zum Beispiel:</p>
+
+<pre class="brush: bash">/path/to/firefox -headless</pre>
+
+<h3 id="Screenshots_aufnehmen">Screenshots aufnehmen</h3>
+
+<p>Seit Firefox 57 ermöglicht es das <code>-screenshot</code> Flag auf Webseiten im Headless-Mode Screenshots aufzunehmen. Grundsätzlich sieht das dann so aus:</p>
+
+<pre class="brush: bash">/path/to/firefox -headless -screenshot https://developer.mozilla.org/</pre>
+
+<p>Das erzeugt einen Screenshot in voller Höhe von <code>https://developer.mozilla.com</code> in das aktuelle Verzeichnis mit dem Dateinamen <code>screenshot.png</code>, mit einer Viewport-Breite von 800px.</p>
+
+<p>Beachte, dass du <code>-headless</code>  weg lassen kannst, wenn du <code>-screenshot</code> angibst— es ist implizit enthalten.</p>
+
+<pre class="brush: bash">/path/to/firefox -screenshot https://developer.mozilla.org/</pre>
+
+<p>Um die Default-Werte, die oben angegeben sind, zu überschreiben,kannst du folgende <code>Flags/Features</code> verwenden<code>:</code></p>
+
+<ul>
+ <li><code>-screenshot name url</code> — Setze einen beliebigen Dateinamen für den Screenshot indem du zwischen dem <code>-screenshot</code> Flag und der URL diesen angibst. Beachte, dass du auch weitere web-kompatible Bildformate wie z.B. <code>.jpg</code>, <code>.bmp</code>, etc.</li>
+ <li><code>--window-size=x,y</code> — Setze eine beliebige Bildbreite und -höhe für den Screenshot.</li>
+</ul>
+
+<p>Zum Beispiel erzeugt der folgende Befehl einen Screenshot von <code>https://developer.mozilla.com </code>im aktuellen Verzeichnis mit Dateinamen <code>test.jpg</code>, mit einer Breite von 800px und einer Höhe von 1000px:</p>
+
+<pre class="brush: bash">/path/to/firefox -screenshot test.jpg https://developer.mozilla.org/ --window-size=480,1000</pre>
+
+<h3 id="Browser_support">Browser support</h3>
+
+<p>Headless Firefox works on Fx55+ on Linux, and 56+ on Windows/Mac.</p>
+
+<h2 id="Automated_testing_with_headless_mode">Automated testing with headless mode</h2>
+
+<p>The most useful way to use headless Firefox is to run automated tests with it, meaning that you can make your testing process much more efficient.</p>
+
+<h3 id="Selenium_in_Node.js">Selenium in Node.js</h3>
+
+<p>Here we'll create a <a href="http://www.seleniumhq.org/">Selenium</a> test using <a href="https://nodejs.org/">Node.js</a> and the <code><a href="https://www.npmjs.com/package/selenium-webdriver">selenium-webdriver</a></code> package. For this guide we'll assume that you already have basic familiarity with Selenium, Webdriver, and Node, and that you already have a testing environment set up. If you don't, work through our <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment#Setting_up_Selenium_in_Node">Setting up Selenium in Node</a> guide first, then come back.</p>
+
+<p>First, of all, make sure you've got Node installed on your system, and the <code>selenium-webdriver</code> package installed, then create a new file called <code>selenium-test.js</code> and follow the steps below to populate it with test code.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Alternatively, you could clone our <a href="https://github.com/mdn/headless-examples">headless-examples repo</a>; this also includes a package file so you can just use <code>npm install</code> to install necessary dependencies.</p>
+</div>
+
+<ol>
+ <li>
+  <p>Let's add some code. Inside this file, start by importing the main <code>selenium-webdriver</code> module, and the <code>firefox</code> submodule:</p>
+
+  <pre class="brush: js">var webdriver = require('selenium-webdriver'),
+    By = webdriver.By,
+    until = webdriver.until;
+
+var firefox = require('selenium-webdriver/firefox');</pre>
+ </li>
+ <li>
+  <p>Next, we will create a new <code>binary</code> object representing Firefox Nightly, and add the <code>-headless</code> argument to it so that it will be run in headless mode:</p>
+
+  <pre class="brush: js">var binary = new firefox.Binary(firefox.Channel.NIGHTLY);
+binary.addArguments("-headless");</pre>
+ </li>
+ <li>
+  <p>Now let's create a new driver instance for Firefox, and use <code>setFirefoxOptions()</code> to include an options object that specifies that we want to run the test using the binary we created above (this step will be unnecessary on Linux, and after headless mode lands in the release channel on Windows/Mac, but it is still useful if you want to test a Nightly-specific feature):</p>
+
+  <pre class="brush: js">var driver = new webdriver.Builder()
+    .forBrowser('firefox')
+    .setFirefoxOptions(new firefox.Options().setBinary(binary))
+    .build();</pre>
+ </li>
+ <li>
+  <p>Finally, add the following code, which performs a simple test on the Google search homepage:</p>
+
+  <pre class="brush: js">driver.get('https://www.google.com');
+driver.findElement(By.name('q')).sendKeys('webdriver');
+
+driver.sleep(1000).then(function() {
+  driver.findElement(By.name('q')).sendKeys(webdriver.Key.TAB);
+});
+
+driver.findElement(By.name('btnK')).click();
+
+driver.sleep(2000).then(function() {
+  driver.getTitle().then(function(title) {
+    if(title === 'webdriver - Google Search') {
+      console.log('Test passed');
+    } else {
+      console.log('Test failed');
+    }
+  });
+});
+
+driver.quit();</pre>
+ </li>
+ <li>
+  <p>Finally, run your test with following command:</p>
+
+  <pre class="brush: bash">node selenium-test</pre>
+ </li>
+</ol>
+
+<p>That's it! After a few seconds, you should see the message "Test passed" returned in the console.</p>
+
+<p><a href="https://mykzilla.org/2017/08/30/headless-firefox-in-node-js-with-selenium-webdriver/">Headless Firefox in Node.js with selenium-webdriver</a> by Myk Melez contains additional useful tips and tricks for running Node.js Selenium tests with headless mode.</p>
+
+<h3 id="Selenium_in_Java">Selenium in Java</h3>
+
+<div class="note">
+<p><strong>Note</strong>: Thanks a lot to nicholasdipiazza for writing these instructions!</p>
+</div>
+
+<p>This guide assumes that you already have Geckodriver on your machine, as explained in our <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment#Setting_up_Selenium_in_Node">Setting up Selenium in Node</a> guide, and that you have an IDE set up that supports Gradle projects.</p>
+
+<ol>
+ <li>
+  <p>Download our <a href="https://github.com/mdn/headless-examples/blob/master/headlessfirefox-gradle.zip">headlessfirefox-gradle.zip</a> archive (<a href="https://github.com/mdn/headless-examples/tree/master/headlessfirefox-gradle">see the source here</a>), extract it, and import the headlessfirefox folder into your IDE as a gradle project.</p>
+ </li>
+ <li>
+  <p>Edit the <code>build.gradle</code> file to set selenium to a later version if needed. At the time of writing, we used 3.5.3.</p>
+
+  <pre class="brush: java">group 'com.mozilla'
+version '1.0'
+
+apply plugin: 'java'
+
+sourceCompatibility = 1.8
+
+repositories {
+   mavenCentral()
+}
+
+dependencies {
+   compile('org.seleniumhq.selenium:selenium-api:3.5.3')
+   compile('org.seleniumhq.selenium:selenium-remote-driver:3.5.3')
+   compile('org.seleniumhq.selenium:selenium-server:3.5.3')
+
+   testCompile group: 'junit', name: 'junit', version: '4.12'
+}</pre>
+ </li>
+ <li>
+  <p>Edit the <code>webdriver.gecko.driver</code> property in the HeadlessFirefoxSeleniumExample.java file to equal the path where you installed geckodriver (see line 15 below).</p>
+
+  <pre class="brush: java">package com.mozilla.example;
+
+import org.openqa.selenium.By;
+import org.openqa.selenium.WebElement;
+import org.openqa.selenium.firefox.FirefoxBinary;
+import org.openqa.selenium.firefox.FirefoxDriver;
+import org.openqa.selenium.firefox.FirefoxOptions;
+
+import java.util.concurrent.TimeUnit;
+
+public class HeadlessFirefoxSeleniumExample {
+ public static void main(String [] args) {
+   FirefoxBinary firefoxBinary = new FirefoxBinary();
+   firefoxBinary.addCommandLineOptions("--headless");
+   System.setProperty("webdriver.gecko.driver", "/opt/geckodriver");
+   FirefoxOptions firefoxOptions = new FirefoxOptions();
+   firefoxOptions.setBinary(firefoxBinary);
+   FirefoxDriver driver = new FirefoxDriver(firefoxOptions);
+   try {
+     driver.get("http://www.google.com");
+     driver.manage().timeouts().implicitlyWait(4,
+         TimeUnit.SECONDS);
+     WebElement queryBox = driver.findElement(By.name("q"));
+     queryBox.sendKeys("headless firefox");
+     WebElement searchBtn = driver.findElement(By.name("btnK"));
+     searchBtn.click();
+     WebElement iresDiv = driver.findElement(By.id("ires"));
+     iresDiv.findElements(By.tagName("a")).get(0).click();
+     System.out.println(driver.getPageSource());
+   } finally {
+     driver.quit();
+   }
+ }
+}</pre>
+ </li>
+ <li>
+  <p>Run the java class and you should see the HTML content of this page printed in your console/terminal.</p>
+ </li>
+</ol>
+
+<h3 id="Other_testing_solutions">Other testing solutions</h3>
+
+<ul>
+ <li>Slimerjs has Firefox support built in on Linux, with Mac and Windows support coming soon. See <a href="https://adriftwith.me/coding/2017/04/21/headless-slimerjs-with-firefox/">Headless SlimerJS with Firefox</a> by Brendan Dahl for more details.</li>
+ <li><a href="https://github.com/DevExpress/testcafe">TestCafe</a> (v.0.18.0 and higher) also supports testing in headless Firefox out of the box. See <a href="https://devexpress.github.io/testcafe/blog/testcafe-v0-18-0-released.html#testing-in-headless-firefox">the documentation</a> for the details.</li>
+</ul>
+
+<p>In addition, you will be able to use headless Firefox to run automated tests written in most other popular testing apps, as long as they allow you to set environment variables.</p>
+
+<h2 id="Troubleshooting_and_further_help">Troubleshooting and further help</h2>
+
+<p>If you are having trouble getting headless mode to work, then do not worry — we are here to help. This section is designed to be added to as more questions arise and answers are found.</p>
+
+<ul>
+ <li>On Linux, certain libraries are currently required on your system even though headless mode doesn't use them — because Firefox links against them. See {{bug(1372998)}} for more details and progress towards a fix.</li>
+</ul>
+
+<p>If you want to ask the engineers a question, the best place to go is the <code>#headless</code> channel on <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. If you are pretty sure you've found a bug, file it on <a href="https://bugzilla.mozilla.org/">Mozilla Bugzilla</a>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://intoli.com/blog/running-selenium-with-headless-firefox/">Using Selenium with Headless Firefox (on Windows)</a> by Andre Perunicic (uses Python)</li>
+ <li><a href="https://mykzilla.org/2017/08/30/headless-firefox-in-node-js-with-selenium-webdriver/">Headless Firefox in Node.js with selenium-webdriver</a> by Myk Melez</li>
+ <li><a href="https://adriftwith.me/coding/2017/04/21/headless-slimerjs-with-firefox/">Headless SlimerJS with Firefox</a> by Brendan Dahl</li>
+ <li><a href="http://blog.rousek.name/2017/09/08/going-headless-with-firefox-since-55/">Using Selenium with Headless Firefox on Travis-CI</a> by Josef Rousek</li>
+</ul>
diff --git a/files/de/mozilla/firefox/index.html b/files/de/mozilla/firefox/index.html
new file mode 100644
index 0000000000..57b51632bf
--- /dev/null
+++ b/files/de/mozilla/firefox/index.html
@@ -0,0 +1,60 @@
+---
+title: Firefox
+slug: Mozilla/Firefox
+tags:
+  - Firefox
+  - Mozilla
+translation_of: Mozilla/Firefox
+---
+<div>{{FirefoxSidebar}}</div>
+
+<p><a class="external external-icon" href="https://www.mozilla.org/firefox/">Firefox</a> ist Mozillas beliebter Webbrowser, der für viele Betriebssysteme verfügbar ist, insbesondere Windows, OS X, Linux auf dem Desktop und mobilen Endgeräten mit Android. Durch seine umfassende Kompatibilität, den aktuellsten Web-Technologien und mächtigen Entwicklerwerkzeugen ist Firefox eine großartige Wahl für Webentwickler wie Anwender.</p>
+
+<p>Firefox ist ein Open-Source-Projekt. Der größte Teil des Quellcodes wird von unserer riesigen Gemeinschaft aus Freiwilligen hinzugefügt. Hier lernen Sie wie Sie zum Firefox-Projekt beitragen können und dazu finden Sie Links zu Informationen über die Entwicklung von Firefix-Add-ons, wie man die Entwickler-Werkzeuge benutzt und andere Aufgaben.</p>
+
+<div class="summary">
+<p>Lernen Sie, wie man Add-ons für <a class="external external-icon" href="https://www.mozilla.org/firefox/">Firefox</a> erstellt, wie man Firefox selbst entwickelt und wie die Kernelemente von Firefox und seine Unterprojekte funktionieren.</p>
+</div>
+
+<ul class="card-grid">
+ <li><span>Details zu Veröffentlichungen für Entwickler</span>
+
+  <p><a href="/de/Firefox/Releases">Informationen zu </a><a href="/de/Firefox/Releases">Veröffentlichungen für Entwickler</a>; lernen Sie welche Fähigkeiten sowohl für Websites als auch für Add-Ons mit jeder weiteren Firefoxversion entstehen.</p>
+ </li>
+ <li><span>Projektdokumentation</span>
+  <p>Die neuesten informationen zu den <a href="/de/docs/Mozilla">internen Abläufen bei Firefox</a> und zum Aufbau des Systems, sodass Sie einen Zugang zum Code bekommen.</p>
+ </li>
+ <li><span>Entwickleranleitung</span>
+  <p>Unsere <a href="/de/docs/Developer_Guide">Anleitung für Entwickler</a> liefert Antworten, wie man an den Code von Firefox kommt, wie man ihn kompiliert, wie man sich zurechtfindet und wie man zum Projekt beitragen kann.</p>
+ </li>
+</ul>
+
+<h2 id="Firefox_Entwicklungskanäle">Firefox Entwicklungskanäle</h2>
+
+<p>Firefox ist verfügbar in vier <strong>Kanälen</strong>.</p>
+
+<h3 id="Firefox_Nightly">Firefox Nightly</h3>
+
+<p>Jede Nacht arbeiten wir von der <a href="/de/docs/mozilla-central">Mozilla Zentrale</a> an Firefox mit dem neuesten Code. Diese Builds sind für alle Firefox Entwickler und für diejenigen die die neuesten innovativen Features ausprobieren wollen, während sie noch entwickelt werden.</p>
+
+<p><a class="external external-icon" href="https://www.mozilla.org/de/firefox/developer/" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Firefox Nightly herunterladen</a></p>
+
+<h3 id="Firefox_Developer_Edition">Firefox Developer Edition</h3>
+
+<p>Diese Version von Firefox ist speziell für Entwickler gedacht. Alle sechs Wochen werden die stabilsten Features von Firefox Nightly in der Firefox Developer Edition veröffentlicht. Wir veröffentlichen auch ein paar Features die nur für Entwickler in diesem Kanal verfügbar sein werden.</p>
+
+<p><a href="/de/Firefox/Developer_Edition">Mehr zur Developer Edition von Firefox erfahren</a>.</p>
+
+<p><a class="external external-icon" href="https://www.mozilla.org/firefox/developer/" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Firefox für Entwickler herunterladen</a></p>
+
+<h3 id="Firefox_Beta">Firefox Beta</h3>
+
+<p>Nach sechs Wochen in der Firefox Developer Edition, werden die stabilsten Features in die neue Firefox Beta-Version übertragen. Firefox Beta ist für Firefoxenthusiasten, die gerne die neusten Features von der nächsten Firefox-Version vorab testen möchten.</p>
+
+<p><a class="external external-icon" href="https://www.mozilla.org/firefox/channel/#beta" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Firefox Beta herunterladen</a></p>
+
+<h3 id="Firefox">Firefox</h3>
+
+<p>Nachdem die Features der Firefox Beta-Version nocheinmal sechs Wochen lange stabilisiert wurden, wird eine neue Firefox-Version für die Hunderte von Millionen Nutzer in Form einer neuen Version veröffentlicht.</p>
+
+<p><a class="external external-icon" href="https://www.mozilla.org/firefox/channel/#firefox" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Firefox herunterladen</a></p>
diff --git a/files/de/mozilla/firefox/multiprocess_firefox/index.html b/files/de/mozilla/firefox/multiprocess_firefox/index.html
new file mode 100644
index 0000000000..b21a7228c1
--- /dev/null
+++ b/files/de/mozilla/firefox/multiprocess_firefox/index.html
@@ -0,0 +1,80 @@
+---
+title: Multiprozess-Firefox
+slug: Mozilla/Firefox/Multiprocess_Firefox
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Mozilla/Firefox/Multiprocess_Firefox
+---
+<div>{{FirefoxSidebar}}</div><p>In den aktuellen Desktop-Versionen des Firefox läuft der gesamte Browser in einem einzigen Betriebssystem-Prozess. Insbesondere läuft der JavaScript-Code, welcher die Browser-Benutzeroberfläche (auch "chrome code" bekannt) ausführt, im selben Prozess wie der Code von Webseiten (auch  "Content" oder "Web Content" genannt).</p>
+
+<p>Zukünftige Versionen von Firefox werden die Browser-Benutzeroberfläche in einem vom Web Content separaten Prozess ausführen. In der ersten Iteration dieser Architektur werden alle Browser-Tabs im selben Prozess laufen, getrennt vom Prozess, in dem die Browser-Benutzeroberfläche ausgeführt wird. In zukünftigen Iterationen wollen wir mehr als einen Prozess verwenden, um die Inhalte von Webseiten darzustellen. Das Projekt, welches den Multiprozess-Firefox abliefern soll, nennt sich Electrolysis (manchmal abgekürzt als e10s).</p>
+
+<p>Normale Webseiten bleiben vom Multiprozess-Firefox unberührt. Die Menschen, die an Firefox selbst arbeiten sowie die Add-On-Entwickler werden von der Änderung nur beeinflusst sein, wenn ihr Code auf der Fähigkeit basiert, direkt auf Web Content zuzugreifen.</p>
+
+<p>Anstatt direkt auf Content zuzugreifen, muss das chrome JavaScript den <a href="/en-US/Firefox/Multiprocess_Firefox/The_message_manager">message manager</a> nutzen, um auf Content zuzugreifen. Um den Übergang zu erleichtern, haben wir <a href="/en-US/Firefox/Multiprocess_Firefox/Cross_Process_Object_Wrappers">Cross Process Object Wrappers</a> implementiert und einige <a href="/en-US/Firefox/Multiprocess_Firefox/Compatibility_shims">Kompabilitäts-Shims für Add-On-Entwickler</a> zur Verfügung gestellt. Falls du ein Add-On-Entwickler bist und dich fragst, ob du davon betroffen bist, siehe auch den <a href="/en-US/Add-ons/Working_with_multiprocess_Firefox">Guide zur Arbeit mit dem Multiprozess-Firefox</a>.</p>
+
+<p>Multiprozess-Firefox ist momentan in der <a class="external external-icon" href="https://www.mozilla.org/firefox/developer/">Developer Edition</a> standardmäßig aktiviert.</p>
+
+<hr>
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Firefox/Multiprocess_Firefox/Technical_overview">Technische Übersicht</a></dt>
+ <dd>Ein sehr abstrakter Überbllick über die Implementierung des Multiprozess-Firefox.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/Firefox/Multiprocess_Firefox/Web_content_compatibility">Web Content Kompatibilitätsanleitung</a></dt>
+ <dd>Leitlinien und details zu potentiellen Web-Seiten-Kompatibilitätsproblemen, die durch den Übergang entstehen könnten. Tip: Es gibt nicht sehr viele!</dd>
+ <dt><a href="/en-US/Firefox/Multiprocess_Firefox/Glossary">Glossar</a></dt>
+ <dd>Ein Nachschlagewerk für den Jargon, der in Multiprozess-Firefox benutzt wird.</dd>
+ <dt><a href="https://developer.mozilla.org/Firefox/Multiprocess_Firefox/Message_Manager">Message manager</a></dt>
+ <dd>Vollständiger Guide zu den Objekten, die für die Kommunikation zwischen Chrome (Benutzeroberfläche) und Content (Webseiten Code) benutzt werden.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/Mozilla/Add-ons/SDK/Guides/Multiprocess_Firefox_and_the_SDK">SDK basierte Add-ons</a></dt>
+ <dd>Wie Add-ons, die mit dem Add-on SDK entwickelt wurden, migriert werden können.</dd>
+ <dt><a href="https://developer.mozilla.org/Firefox/Multiprocess_Firefox/Which_URIs_load_where">Welche URIs laden wo</a></dt>
+ <dd>Eine schnelle Einführung darüber, welche URIs (chrome:, about:, file:, resource:), in welchem prozess laden.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Firefox/Multiprocess_Firefox/Motivation">Motivation</a></dt>
+ <dd>Die Gründe, wieso wir den Multiprozess-Firefox implementieren: Performanz, Sicherheit und Stabilität.</dd>
+ <dt><a href="https://developer.mozilla.org/Mozilla/Add-ons/Working_with_multiprocess_Firefox">Add-on migrations Anleitung</a></dt>
+ <dd>Wenn du ein Add-on-Entwickler bist, finde heraus, ob du betroffen bist und wie du deinen Code aktuallisieren kannst.</dd>
+ <dt><a href="https://developer.mozilla.org/Firefox/Multiprocess_Firefox/Cross_Process_Object_Wrappers">Cross Process Object Wrappers</a></dt>
+ <dd>Cross Process Object Wrappers sind eine Migrationshilfe, die Chrome Code synchronen zugriff auf Content erlaubt.</dd>
+ <dt><a href="https://developer.mozilla.org/Firefox/Multiprocess_Firefox/Debugging_frame_scripts">Debugging von Content-Prozessen</a></dt>
+ <dd>Wie Code, der im Content-Prozess läuft (einschließlich Frame- und Prozessskripte), debugt werden kann.</dd>
+ <dt><a href="https://developer.mozilla.org/docs/Mozilla/Firefox/Multiprocess_Firefox/Tab_selection_in_multiprocess_Firefox">Tab auswahl in Multiprozess-Firefox</a></dt>
+ <dd>Wie Tab-Wechsel funktioniert in Multiprozess-Firefox.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="https://developer.mozilla.org/Firefox/Multiprocess_Firefox/Limitations_of_chrome_scripts">Einschränkungen von Chrome-Skripten</a></dt>
+ <dd>Praktiken, die in Chrome-Code nicht mehr funktionieren und wie man dies behebt.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="https://developer.mozilla.org/Firefox/Multiprocess_Firefox/Limitations_of_frame_scripts">Einschränkungen von Frame-Skripten</a></dt>
+ <dd>Praktiken, die innerhalb von Frame-Skripten nicht funktionieren werden und was stattdessen zutun ist.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="Kontaktiere_uns">Kontaktiere uns</h2>
+
+<p>Finde mehr über das Projekt heraus, mach mit oder frag uns etwas.</p>
+
+<ul>
+ <li><strong>Electrolysis Projektseite</strong>: <a href="https://wiki.mozilla.org/Electrolysis">https://wiki.mozilla.org/Electrolysis</a></li>
+ <li><strong>IRC</strong>: #e10s auf <a href="https://wiki.mozilla.org/IRC">irc.mozilla.org</a></li>
+ <li><strong>Mailing-List</strong>: <a href="https://groups.google.com/forum/#!forum/mozilla.dev.tech.electrolysis">dev.tech.electrolysis</a></li>
+</ul>
diff --git a/files/de/mozilla/firefox/multiprocess_firefox/technical_overview/index.html b/files/de/mozilla/firefox/multiprocess_firefox/technical_overview/index.html
new file mode 100644
index 0000000000..f0de7c5457
--- /dev/null
+++ b/files/de/mozilla/firefox/multiprocess_firefox/technical_overview/index.html
@@ -0,0 +1,164 @@
+---
+title: Technical overview
+slug: Mozilla/Firefox/Multiprocess_Firefox/Technical_overview
+translation_of: Mozilla/Firefox/Multiprocess_Firefox/Technical_overview
+---
+<div>{{FirefoxSidebar}}</div><div class="note">
+<p>Diese Seite ist ein bearbeiteter Auszug aus Bill McCloskey's Blogbeitrag Multiprozess Firefox:(engl) <a class="external external-icon" href="http://billmccloskey.wordpress.com/2013/12/05/multiprocess-firefox/">http://billmccloskey.wordpress.com/2013/12/05/multiprocess-firefox/</a></p>
+</div>
+
+<p><span id="result_box" lang="de"><span class="hps">Auf einer sehr hohen</span> <span class="hps">Ebene arbeitet</span> <span class="hps">Multiprozess</span> <span class="hps">Firefox</span> <span class="hps">wie folgt.</span> <span class="hps">Der</span> <span class="alt-edited hps">Prozess, der</span> <span class="hps">beginnt, wenn</span> <span class="hps">Firefox</span> <span class="hps">startet</span><span class="alt-edited"> wird </span><span class="alt-edited hps">übergeordneter Prozess</span><span> genannt.</span> <span class="hps">Zunächst</span> <span class="hps">arbeitet</span> <span class="hps">dieses Verfahren</span> <span class="hps">ähnlich wie</span> <span class="alt-edited hps">Einzelprozess.</span> <span class="alt-edited hps">Es</span> <span class="alt-edited hps">wird ein Firefox Fenster geöffnet</span><span class="alt-edited">, das</span> <span class="hps">alle wichtigen</span> <span class="hps">Elemente der Benutzeroberfläche für</span> <span class="hps">Firefox</span> <span class="hps">enthält</span> (</span> <span id="result_box" lang="de"><span class="hps">browser.xul</span></span><span lang="de">)<span class="alt-edited hps">.</span> <span class="hps">Firefox</span> <span class="hps">hat eine flexibles</span> <span class="hps">GUI</span>-<span class="hps">Toolkit namens</span> <span class="hps">XUL</span><span>, das </span><span class="hps">GUI-Elemente</span> <span class="hps">deklarativ</span> <span class="hps">beschreibt</span><span>, ähnlich wie bei</span> <span class="hps">Web-Content</span><span>.</span> <span class="hps">Genau wie</span> <span class="hps">Web-Inhalte</span><span>, hat das</span> <span class="hps">Firefox</span><span>-UI</span> <span class="hps">ein Fenster</span><span>-Objekt, das</span> <span class="hps">eine Dokumenteigenschaft</span> <span class="hps">hat</span><span>,</span> <span class="hps">und dieses Dokument</span> <span class="hps">enthält alle</span> <span class="hps">XML-Elemente</span> <span class="hps">aus</span> der <span class="hps">browser.xul</span><span>.</span> <span class="hps">Alle</span> <span class="hps">Firefox</span> <span class="hps">Menüs, Symbolleisten</span><span>, Seitenleisten</span> <span class="hps">und</span> <span class="hps">Tabs sind</span> <span class="hps">XML-Elemente</span> <span class="hps">in diesem Dokument.</span> <span class="hps">Jedes Register</span> <span class="hps">enthält ein</span> <span class="hps">&lt;browser</span><span>&gt; -Element</span> um<span class="hps"> Web-Inhalte</span> <span class="hps">anzuzeigen.</span><br>
+ <br>
+ <span class="hps">Die erste Stelle</span><span class="hps">, an der</span> <span class="hps">Multiprozess</span> <span class="hps">Firefox</span> <span class="alt-edited hps">von</span> <span class="atn hps">Single-</span><span class="alt-edited">Prozess</span> <span class="hps">Firefox</span> <span class="alt-edited hps">abweicht ist, dass jedes</span> <span class="hps">&lt;browser</span><span>&gt;</span> <span class="alt-edited hps">Element ein</span> <span class="alt-edited hps">remote</span> <span class="hps">= "true"</span> <span class="alt-edited hps">-Attribut besitzt.</span> <span class="alt-edited hps">Wenn ein solches</span> <span class="hps">Browser</span> <span class="hps">Element</span> <span class="hps">in das Dokument eingefügt</span> <span class="alt-edited hps">wird, wird ein</span> <span class="alt-edited hps">neuer Inhaltsprozess</span> <span class="hps">gestartet</span><span>.</span> <span class="hps">Dieser Prozess wird als</span> <span class="alt-edited hps">ein untergeordneter Prozess bezeichnet</span><span>.</span> <span class="hps">Ein</span> <span class="hps">IPC-Kanal</span> <span class="alt-edited hps">erstellt, der die</span> <span class="atn hps">Eltern-Kind-</span><span class="alt-edited">Prozesse</span> <span class="hps">verknüpft</span><span>.</span> <span class="hps">Anfangs zeigt</span> <span class="hps">das Kind</span> <span class="hps">about: blank</span><span>, aber die</span> <span class="hps">Eltern können</span> <span class="hps">dem Kind einen</span> <span class="hps">Befehl</span> <span class="hps">senden, um</span> <span class="hps">an anderer Stelle</span> <span class="hps">zu navigieren.</span></span></p>
+
+<h2 id="Zeichnen"><span class="short_text" id="result_box" lang="de"><span class="alt-edited hps">Zeichnen</span></span></h2>
+
+<p>Somehow, displayed web content needs to get from the child process to the parent and then to the screen. Multiprocess Firefox depends on a new Firefox feature called <a href="http://benoitgirard.wordpress.com/2012/05/15/off-main-thread-compositing-omtc-and-why-it-matters/"><em>off main thread compositing</em></a> (OMTC). In brief, each Firefox window is broken into a series of <em>layers</em>, somewhat similar to layers in Photoshop. Each time Firefox draws, these layers are submitted to a compositor thread that clips and translates the layers and combines them together into a single image that is then drawn.</p>
+
+<p>Layers are structured as a tree. The root layer of the tree is responsible for the entire Firefox window. This layer contains other layers, some of which are responsible for drawing the menus and tabs. One subtree displays all the web content. Web content itself may be broken into multiple layers, but they’re all rooted at a single “content” layer.</p>
+
+<p>In multiprocess Firefox, the content layer subtree is actually a shim. Most of the time, it contains a placeholder node that simply keeps a reference to the IPC link with the child process. The content process retains the actual layer tree for web content. It builds and draws to this layer tree. When it’s done, it sends the structure of its layer tree to the parent process via IPC. Backing buffers are shared with the parent either through shared memory or GPU memory. References to this memory are sent as part of the layer tree. When the parent receives the layer tree, it removes its placeholder content node and replaces it with the actual tree from content. Then it composites and draws as normal. When it’s done, it puts the placeholder back.</p>
+
+<p>The basic architecture of how OMTC works with multiple processes has existed for some time, since it is needed for Firefox OS. However, Matt Woodrow and David Anderson have done a lot of work to get everything working properly on Windows, Mac, and Linux. One of the big challenges for multiprocess Firefox will be getting OMTC enabled on all platforms. Right now, only Macs use it by default.</p>
+
+<h2 id="User_input"><strong id="input">User input</strong></h2>
+
+<p>Events in Firefox work the same way as they do on the web. Namely, there is a DOM tree for the entire window, and events are threaded through this tree in capture and bubbling phases. Imagine that the user clicks on a button on a web page. In single-process Firefox, the root DOM node of the Firefox window gets the first chance to process the event. Then, nodes lower down in the DOM tree get a chance. The event handling proceeds down through to the XUL <code>&lt;browser&gt;</code> element. At this point, nodes in the web page’s DOM tree are given a chance to handle the event, all the way down to the button. The bubble phase follows, running in the opposite order, all the way back up to the root node of the Firefox window.</p>
+
+<p>With multiple processes, event handling works the same way until the <code>&lt;browser&gt;</code> element is hit. At that point, if the event hasn’t been handled yet, it gets sent to the child process by IPC, where handling starts at the root of the content DOM tree. The parent process then waits to run its bubbling phase until the content process has finished handling the event.</p>
+
+<h2 id="Inter-process_communication"><strong id="ipc">Inter-process communication</strong></h2>
+
+<p>All IPC happens using the Chromium IPC libraries. Each child process has its own separate IPC link with the parent. Children cannot communicate directly with each other. To prevent deadlocks and to ensure responsiveness, the parent process is not allowed to sit around waiting for messages from the child. However, the child is allowed to block on messages from the parent.</p>
+
+<p>Rather than directly sending packets of data over IPC as one might expect, we use code generation to make the process much nicer. The IPC protocol is defined in <a href="https://wiki.mozilla.org/IPDL">IPDL</a>, which sort of stands for “inter-* protocol definition language”. A typical IPDL file is <code><a href="http://mxr.mozilla.org/mozilla-central/source/netwerk/ipc/PNecko.ipdl">PNecko.ipdl</a></code>. It defines a set messages and their parameters. Parameters are serialized and included in the message. To send a message <code>M</code>, C++ code just needs to call the method <code>SendM</code>. To receive the message, it implements the method <code>RecvM</code>.</p>
+
+<p>IPDL is used in all the low-level C++ parts of Gecko where IPC is required. In many cases, IPC is just used to forward actions from the child to the parent. This is a common pattern in Gecko:</p>
+
+<pre class="brush: cpp">void AddHistoryEntry(param) {
+  if (XRE_GetProcessType() == GeckoProcessType_Content) {
+    // If we're in the child, ask the parent to do this for us.
+    SendAddHistoryEntry(param);
+    return;
+  }
+
+  // Actually add the history entry...
+}
+
+bool RecvAddHistoryEntry(param) {
+  // Got a message from the child. Do the work for it.
+  AddHistoryEntry(param);
+  return true;
+}
+</pre>
+
+<p>When <code>AddHistoryEntry</code> is called in the child, we detect that we’re inside the child process and send an IPC message to the parent. When the parent receives that message, it calls <code>AddHistoryEntry</code> on its side.</p>
+
+<p>For a more realistic illustration, consider the Places database, which stores visited URLs for populating the awesome bar. Whenever the user visits a URL in the content process, we call <a href="http://mxr.mozilla.org/mozilla-central/source/toolkit/components/places/History.cpp?rev=8b9687f6c602#2326">this code</a>. Notice the content process check followed by the <code>SendVisitURI</code> call and an immediate return. The message is received <a href="http://mxr.mozilla.org/mozilla-central/source/dom/ipc/ContentParent.cpp?rev=fecda5f4a0df#2666">here</a>; this code just calls <code>VisitURI</code> in the parent.</p>
+
+<p>The code for IndexedDB, the places database, and HTTP connections all runs in the parent process, and they all use roughly the same proxying mechanism in the child.</p>
+
+<h2 id="Frame_scripts"><strong id="contentscripts">Frame scripts</strong></h2>
+
+<p>IPDL takes care of passing messages in C++, but much of Firefox is actually written in JavaScript. Instead of using IPDL directly, JavaScript code relies on <a href="/en-US/Firefox/Multiprocess_Firefox/The_message_manager">the message manager</a> to communicate between processes. To use the message manager in JS, you need to get hold of a message manager object. There is a global message manager, message managers for each Firefox window, and message managers for each <code>&lt;browser&gt;</code> element. A message manager can be used to load JS code into the child process and to exchange messages with it.</p>
+
+<p>As a simple example, imagine that we want to be informed every time a <code>load</code> event triggers in web content. We’re not interested in any particular browser or window, so we use the global message manager. The basic process is as follows:</p>
+
+<pre class="brush: js">// Get the global message manager.
+let mm = Cc["@<span class="skimlinks-unlinked">mozilla.org/globalmessagemanager;1</span>"].
+         getService(Ci.nsIMessageListenerManager);
+
+// Wait for load event.
+mm.addMessageListener("GotLoadEvent", function (msg) {
+  dump("Received load event: " + <span class="skimlinks-unlinked">msg.data.url</span> + "\n");
+});
+
+// Load code into the child process to listen for the event.
+mm.loadFrameScript("chrome://content/<span class="skimlinks-unlinked">content-script.js</span>", true);
+</pre>
+
+<p>For this to work, we also need to have a file <code>content-script.js</code>:</p>
+
+<pre class="brush: js">// Listen for the load event.
+addEventListener("load", function (e) {
+  // Inform the parent process.
+  let docURL = content.document.documentURI;
+  sendAsyncMessage("GotLoadEvent", {url: docURL});
+}, false);
+</pre>
+
+<p>This file is called a <em>frame script</em>. When the <code>loadFrameScript</code> function call runs, the code for the script is run once for each <code>&lt;browser&gt;</code> element. This includes both remote browsers and regular ones. If we had used a per-window message manager, the code would only be run for the browser elements in that window. Any time a new browser element is added, the script is run automatically (this is the purpose of the <code>true</code> parameter to <code>loadFrameScript</code>). Since the script is run once per browser, it can access the browser’s window object and docshell via the <code>content</code> and <code>docShell</code> globals.</p>
+
+<p>The great thing about frame scripts is that they work in both single-process and multiprocess Firefox. To learn more about the message manager, see the <a href="/en-US/Firefox/Multiprocess_Firefox/The_message_manager">message manager guide</a>.</p>
+
+<h2 id="Cross-process_APIs"><strong id="shims">Cross-process APIs</strong></h2>
+
+<p>There are a lot of APIs in Firefox that cross between the parent and child processes. An example is the <code>webNavigation</code> property of XUL <code>&lt;browser&gt;</code> elements. The <code>webNavigation</code> property is an object that provides methods like <code>loadURI</code>, <code>goBack</code>, and <code>goForward</code>. These methods are called in the parent process, but the actions need to happen in the child. First I’ll cover how these methods work in single-process Firefox, and then I’ll describe how we adapted them for multiple processes.</p>
+
+<p>The <code>webNavigation</code> property is defined using the XML Binding Language (XBL). XBL is a declarative language for customizing how XML elements work. Its syntax is a combination of XML and JavaScript. Firefox uses XBL extensively to customize XUL elements like <code>&lt;browser&gt;</code> and <code>&lt;tabbrowser&gt;</code>. The <code>&lt;browser&gt;</code> customizations reside in <code><a href="http://mxr.mozilla.org/mozilla-central/source/toolkit/content/widgets/browser.xml?rev=754cf7fc84cd">browser.xml</a></code>. <a href="http://mxr.mozilla.org/mozilla-central/source/toolkit/content/widgets/browser.xml?rev=754cf7fc84cd#262">Here</a> is how <code>browser.webNavigation</code> is defined:</p>
+
+<pre class="brush: xml">&lt;field name="_webNavigation"&gt;null&lt;/field&gt;
+
+&lt;property name="webNavigation" readonly="true"&gt;
+   &lt;getter&gt;
+   &lt;![CDATA[
+     if (!this._webNavigation)
+       this._webNavigation = this.docShell.QueryInterface(Components.interfaces.nsIWebNavigation);
+     return this._webNavigation;
+   ]]&gt;
+   &lt;/getter&gt;
+&lt;/property&gt;
+</pre>
+
+<p>This code is invoked whenever JavaScript code in Firefox accesses <code>browser.webNavigation</code>, where <code>browser</code> is some <code>&lt;browser&gt;</code> element. It checks if the result has already been cached in the <code>browser._webNavigation</code> field. If it hasn’t been cached, then it fetches the navigation object based off the browser’s <em>docshell</em>. The docshell is a Firefox-specific object that encapsulates a lot of functionality for loading new pages, navigating back and forth, and saving page history. In multiprocess Firefox, the docshell lives in the child process. Since the <code>webNavigation</code> accessor runs in the parent process, <code>this.docShell</code> above will just return null. As a consequence, this code will fail completely.</p>
+
+<p>One way to fix this problem would be to create a fake docshell in C++ that could be returned. It would operate by sending IPDL messages to the real docshell in the child to get work done. We may eventually take this route in the future. We decided to do the message passing in JavaScript instead, since it’s easier and faster to prototype things there. Rather than change every docshell-using accessor to test if we’re using multiprocess browsing, we decided to create a new XBL binding that applies only to remote <code>&lt;browser&gt;</code> elements. It is called <a href="http://mxr.mozilla.org/mozilla-central/source/toolkit/content/widgets/remote-browser.xml?rev=9583bd3099ae"><code>remote-browser.xml</code></a>, and it extends the existing <code>browser.xml</code> binding.</p>
+
+<p>The <code>remote-browser.xml</code> binding returns a JavaScript <em>shim object</em> whenever anyone uses <code>browser.webNavigation</code> or other similar objects. The shim object is implemented <a href="http://mxr.mozilla.org/mozilla-central/source/toolkit/modules/RemoteWebNavigation.jsm">in its own JavaScript module</a>. It uses the message manager to send messages like <code>"WebNavigation:LoadURI"</code> to <a href="http://mxr.mozilla.org/mozilla-central/source/toolkit/content/browser-child.js?rev=9583bd3099ae#107">a content script loaded by <code>remote-browser.xml</code></a>. The content script performs the actual action.</p>
+
+<p>The shims we provide emulate their real counterparts imperfectly. They offer enough functionality to make Firefox work, but add-ons that use them may find them insufficient. I’ll discuss strategies for making add-ons work in more detail later.</p>
+
+<h2 id="Cross-process_object_wrappers"><strong id="cpows">Cross-process object wrappers</strong></h2>
+
+<p>The message manager API does not allow the parent process to call <code>sendSyncMessage</code>; that is, the parent is not allowed to wait for a response from the child. It’s detrimental for the parent to wait on the child, since we don’t want the browser UI to be unresponsive because of slow content. However, converting Firefox code to be asynchronous (i.e., to use <code>sendAsyncMessage</code> instead) can sometimes be onerous. As an expedient, we’ve introduced a new primitive that allows code in the parent process to access objects in the child process synchronously.</p>
+
+<p>These objects are called cross-process object wrappers, frequently abbreviated to CPOWs. They’re created using the message manager. Consider this example content script:</p>
+
+<pre class="brush: js">addEventListener("load", function (e) {
+  let doc = content.document;
+  sendAsyncMessage("GotLoadEvent", <strong>{}, {document: doc}</strong>);
+}, false);
+</pre>
+
+<p>In this code, we want to be able to send a reference to the document to the parent process. We can’t use the second parameter to <code>sendAsyncMessage</code> to do this: that argument is converted to JSON before it is sent up. The optional third parameter allows us to send object references. Each property of this argument becomes accessible in the parent process as a CPOW. Here’s what the parent code might look like:</p>
+
+<pre class="brush: js">let mm = Cc["@<span class="skimlinks-unlinked">mozilla.org/globalmessagemanager;1</span>"].
+         getService(Ci.nsIMessageListenerManager);
+
+mm.addMessageListener("GotLoadEvent", function (msg) {
+  let uri = <strong>msg.objects.document.documentURI</strong>;
+  dump("Received load event: " + uri + "\n");
+});
+mm.loadFrameScript("chrome://content/<span class="skimlinks-unlinked">content-script.js</span>", true);
+</pre>
+
+<p>It’s important to realize that we’re send object <em>references</em>. The <code>msg.objects.document</code> object is only a wrapper. The access to its <code>documentURI</code> property sends a synchronous message down to the child asking for the value. The dump statement only happens after a reply has come back from the child.</p>
+
+<p>Because every property access sends a message, CPOWs can be slow to use. There is no caching, so 1,000 accesses to the same property will send 1,000 messages.</p>
+
+<p>Another problem with CPOWs is that they violate some assumptions people might have about message ordering. Consider this code:</p>
+
+<pre class="brush: js">mm.addMessageListener("GotLoadEvent", function (msg) {
+  mm.sendAsyncMessage("ChangeDocumentURI", {newURI: "<span class="skimlinks-unlinked">hello.com</span>"});
+  let uri = <strong>msg.objects.document.documentURI</strong>;
+  dump("Received load event: " + uri + "\n");
+});
+</pre>
+
+<p>This code sends a message asking the child to change the current document URI. Then it accesses the current document URI via a CPOW. You might expect the value of <code>uri</code> to come back as <code>"hello.com"</code>. But it might not. In order to avoid deadlocks, CPOW messages can bypass normal messages and be processed first. It’s possible that the request for the <code>documentURI</code> property will be processed before the <code>"ChangeDocumentURI"</code> message, in which case <code>uri</code> will have some other value.</p>
+
+<p>For this reason, it’s best not to mix CPOWs with normal message manager messages. It’s also a bad idea to use CPOWs for anything security-related, since you may not get results that are consistent with surrounding code that might use the message manager.</p>
+
+<p>Despite these problems, we’ve found CPOWs to be useful for converting certain parts of Firefox to be multiprocess-compatible. It’s best to use them in cases where users are less likely to notice poor responsiveness. As an example, we use CPOWs to implement the context menu that pops up when users right-click on content elements. Whether this code is asynchronous or synchronous, the menu cannot be displayed until content has responded with data about the element that has been clicked. The user is unlikely to notice if, for example, tab animations don’t run while waiting for the menu to pop up. Their only concern is for the menu to come up as quickly as possible, which is entirely gated on the response time of the content process. For this reason, we chose to use CPOWs, since they’re easier than converting the code to be asynchronous.</p>
+
+<p>It’s possible that CPOWs will be phased out in the future. Asynchronous messaging using the message manager gives a user experience that is at least as good as, and often strictly better than, CPOWs. We strongly recommend that people use the message manager over CPOWs when possible. Nevertheless, CPOWs are sometimes useful.</p>
diff --git a/files/de/mozilla/firefox/multiprocess_firefox/web_content_compatibility/index.html b/files/de/mozilla/firefox/multiprocess_firefox/web_content_compatibility/index.html
new file mode 100644
index 0000000000..1a25906f9e
--- /dev/null
+++ b/files/de/mozilla/firefox/multiprocess_firefox/web_content_compatibility/index.html
@@ -0,0 +1,32 @@
+---
+title: Web content compatibility
+slug: Mozilla/Firefox/Multiprocess_Firefox/Web_content_compatibility
+tags:
+  - Electrolysis
+  - Firefox
+  - Guide
+  - Multiprocess
+  - e10s
+translation_of: Mozilla/Firefox/Multiprocess_Firefox/Web_content_compatibility
+---
+<div>{{FirefoxSidebar}}</div><p><span class="seoSummary">While the introduction of multi-process capabilities to Firefox should be seamless and invisible to Web content, there are some exceptions and subtle changes from past behavior. This article discusses the known differences you may encounter.</span></p>
+
+<h2 id="Events">Events</h2>
+
+<p>Here you'll find information about events whose behaviors have changed due to multiprocess Firefox's implementation.</p>
+
+<h3 id="No_bubbling_of_events_from_&lt;option>_to_&lt;select>">No bubbling of events from <code>&lt;option&gt;</code> to <code>&lt;select&gt;</code></h3>
+
+<p>Historically, Firefox has allowed keyboard and mouse events to bubble up from the <code>&lt;option&gt;</code> element to the parent {{HTMLElement("select")}} element. This doesn't happen in Chrome, however, although this behavior is inconsistent across many browsers. For better Web compatibility (and for technical reasons), when Firefox is in multi-process mode and the <code>&lt;select&gt;</code> element is displayed as a drop-down list. This behavior is unchanged if the <code>&lt;select&gt;</code> is presented inline and it has either the <code>multiple</code> attribute defined or a <code>size</code> attribute set to more than 1.</p>
+
+<p>Rather than watching <code>&lt;option&gt;</code> elements for events, you should watch for {event("change")}} events on {{HTMLElement("select")}}. See {{bug(1090602)}} for details.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Multiprocess Firefox</li>
+ <li>{{HTMLElement("option")}}</li>
+ <li>{{HTMLElement("select")}}</li>
+ <li>{{domxref("HTMLOptionElement")}}</li>
+ <li>{{domxref("HTMLSelectElement")}}</li>
+</ul>
diff --git a/files/de/mozilla/firefox/nutzung_in_unternehmen/index.html b/files/de/mozilla/firefox/nutzung_in_unternehmen/index.html
new file mode 100644
index 0000000000..bb01035bad
--- /dev/null
+++ b/files/de/mozilla/firefox/nutzung_in_unternehmen/index.html
@@ -0,0 +1,142 @@
+---
+title: Firefox in einem Unternehmen nutzen
+slug: Mozilla/Firefox/Nutzung_in_Unternehmen
+tags:
+  - Administratoren
+  - Anleitung
+  - Bereitstellung
+  - Firefox
+  - Unternehmen
+translation_of: Mozilla/Firefox/Enterprise_deployment_before_60
+---
+<div>{{FirefoxSidebar}}</div>
+
+<p>Diese Seite versucht zu dokumentieren, wie Mozilla Firefox für Windows und Mac in einem Unternehmen genutzt werden kann. Falls Sie Fragen haben, kontaktieren Sie bitte <a href="https://mail.mozilla.org/listinfo/enterprise">enterprise@mozilla.org</a>.</p>
+
+<h2 id="Die_richtige_Variante">Die richtige Variante</h2>
+
+<h3 id="RR_(Rapid_Release)">RR (Rapid Release)</h3>
+
+<p>Mozilla veröffentlicht alle sechs Wochen (und, je nach Bedarf, weitere Sicherheitsupdates dazwischen) neue Versionen mit höheren Versionsnummern, neuen Features und Fehlerbehebungen. Am Tag, an dem ein großes Update veröffentlicht wird, wird Mozilla in den meisten Fällen (Ausnahme, siehe unten) die Veröffentlichung von Fehlerbehebungen für die vorherige Version einstellen.</p>
+
+<p>Die geplanten Veröffentlichungen finden Sie in der Spalte "release date" in der  <a href="https://wiki.mozilla.org/RapidRelease/Calendar#Future_branch_dates">Future branch dates</a> tabelle in der Mozilla wiki (Englisch).</p>
+
+<h3 id="ESR_(Extended_Support_Release)">ESR (Extended Support Release)</h3>
+
+<p>Jede siebte veröffentlichte Hauptversion von Firefox ist ein Extended Support Release. Diese Versionen werden für 54 Wochen (neun der sechswöchigen Veröffentlichungszyklen) sehr stark auf Probleme hin überprüft. Es überlappen sich 12 Wochen (zwei Veröffentlichungszyklen)  zwischen zwei aufeinanderfolgenden ESR-Veröffentlichungen, in denen beide ESR-Versionen gleichzeitig überprüft werden.</p>
+
+<p>Die ESR-Veröffentlichungen waren bisher die Versionen 10, 17, 24, und 31. </p>
+
+<p>Viele Unternehmen und Organisationen mit zentral organisierten Netzwerksystemen bevorzugen die ESR-Version von Firefox, weil sie dann nicht alle 6 Wochen sondern nur noch alle 42 Wochen die Kompatibilität prüfen müssen. Desweiteren haben sie 12 Wochen mehr Zeit (der Überlappungszeitraum zwischen zwei ESR-Veröffentlichungen) eine Lösung für Probleme zu finden (zusätzlich zu den 6 Wochen die sie bekommen indem sie die Betaversion testen), falls Probleme auftreten.</p>
+
+<p>Nehmen Sie zur Kenntnis, dass unerwünschte Nebeneffekte auftreten können wenn Sie von einer RR-Version zu einer früheren ESR-Version wechseln, wie zum Beispiel von Version 26-RR zurück zu Version 24.2-ESR, selbst wenn sie am gleichen Tag veröffentlicht wurden. Der Grund dafür ist, dass oft neue Features in die RR-Versionen eingebaut werden, auch wenn sie noch unvollendet und deshalb deaktiviert sind. Schlussendlich entscheidet Mozilla die Features in einer bestimmten Version zu aktivieren. Wenn Sie dann auf eine vorherige, ältere Version wechseln, behalten alle Nutzer ihre letzten Einstellungen in ihren Profilordnern. So bleibt die Option nun angestellt, obwohl das Feature noch nicht komplett fehlerfrei läuft. Wenn Sie also von RR auf ESR wechsel wollen, sollten Sie auf eine neue ESR-Version warten.</p>
+
+<h2 id="Installation">Installation</h2>
+
+<ol>
+ <li>Den kompletten, weiterverteilbaren Installer bekommen Sie von  <a href="http://www.mozilla.org/firefox/all/">http://www.mozilla.org/firefox/all/</a> (RR) oder <a href="https://www.mozilla.org/firefox/organizations/all.html">https://www.mozilla.org/firefox/organizations/all.html</a> (ESR).</li>
+ <li>Installieren Sie ihre Version, in dem Sie die Softwareverteilungsmethode ihrer Wahl nutzen. Die Kommand-Zeile für eine stille Installation ist <code>-ms</code>. </li>
+ <li>Optional können Sie eine INI-Datei spezifizieren, um beispielsweise die Nutzung von Tastenkürzeln und die Installation vom MaintenanceService zu verhindern. Nutzen Sie dafür <a href="https://wiki.mozilla.org/Installer:Command_Line_Arguments">Installer Command Line Arguments</a>.</li>
+</ol>
+
+<h2 id="Konfiguration">Konfiguration</h2>
+
+<ol>
+ <li>Finden Sie den Firefox <strong>Programmverzeichnis</strong> in dem Firefox' ausführende Datei liegt. In Windows7x64 ist er meist <code>C:\Program Files (x86)\Mozilla Firefox</code>; in OSX 10.8 zumeist <code>/Applications/Firefox.app/Contents/MacOS</code>. Unterordner die unten genannt werden sind abhängig von diesem Pfad. </li>
+ <li>Erstellen Sie eine Javascript Datei in <code>defaults/pref</code> (für gewöhlich, <code>autoconfig.js</code> - andere Dateinamen funktionieren gleicherweise, doch um beste Resultate zu erzielen sollte es am Anfang des Alphabets stehen.) Der Inhalt dieser Datei zeigt Firefox, wo die konfigurierende Datei zu finden ist (siehe auch <a href="http://mike.kaply.com/2012/03/15/customizing-firefox-default-preference-files/">Customizing Firefox default preference files/</a>).
+  <p>Die zwei Zeilen die Sie brauchen sind:</p>
+
+  <pre class="brush: js">pref("general.config.obscure_value", 0);
+pref("general.config.filename", "mozilla.cfg");</pre>
+ </li>
+ <li>Erstellen Sie eine .cfg Datei (für gewöhlich, <code>mozilla.cfg</code> — es kann wirklich jeder Name sein; es muss nur zu dem passen, was in  <code>general.config.filename</code> zuvor spezifiziert wurde) im Programmverzeichnis. Überspringen Sie die erste Zeile oder kommentieren Sie sie aus und fangen Sie an ihre Einstellungen vorzunehmen. Um herauszufinden welche Einstellungen Sie nutzen müssen, nutzen Sie about:config in einer Kopie von Firefox, die Sie korrekt eingestellt haben und suchen Sie alle Einstellungen die vom Nutzer eingestellt sind, oder sehen Sie sich das folgende Beispiel an. Jede Einstellung die in about:config auftaucht (und noch einige andere) können mit eine der folgenden Funktionen eingestellt werden:
+  <dl>
+   <dt><strong>pref </strong></dt>
+   <dd>nimmt eine Einstellung vor, als hätte der Benutzer sie eingestellt, jedes Mal wenn der Browser gestartet wird. Nutzer können zwar Änderungen an den Einstellungen vornehmen, jedoch werden diese beim nächsten Start überschrieben. Wenn Sie auf diese Weise Einstellungen vornehmen, wird die Einstellung in about:config als "<strong>vom Benutzer eingestellt</strong>" angezeigt.</dd>
+   <dt><strong>defaultPref</strong></dt>
+   <dd>wird gebraucht um die Standardeinstellung zu ändern, jedoch kann jeder Nutzer die Einstellungen ändern. Die Einstellungen werden zwischen Sitzungen gespeichert. Sollten alle Werte auf ihren Ursprung zurückgesetzt werden, werden die so geänderten Einstellungen auf den von Ihnen gesetzten Wert geändert. Taucht in about:config als "standard" auf.</dd>
+   <dt><strong>lockPref</strong></dt>
+   <dd>wird genutzt um Einstellungen zu blockieren, sodass sie nicht mehr vom Nutzer umgestellt werden können, weder über die Einstellungen, noch über about:config. Das Fenster mit den Einstellungen wird sich ändern um dies zu reflektieren, indem es nicht verstellbare Optionen weglässt oder grau färbt.Taucht in about:config auf als "<strong>blockiert</strong>". <span class="author-g-fer323ku83ypu55t">Manche Einstellungen benötigen <strong>lockPref</strong> um geändert zu werden, wie beispielsweise <strong>app.update.enabled</strong>. Es funktioniert nicht, wenn es nur mit <strong>pref</strong> geändert wird.</span></dd>
+   <dt><span class="author-g-fer323ku83ypu55t">clearPref</span></dt>
+   <dd><span class="author-g-fer323ku83ypu55t">kann benutzt werden um einige Einstellungen auszublenden. Dies kann nützlich sein, um einige Funktionen zu deaktivieren, die darauf basieren Versionsnummern zu vergleichen.</span></dd>
+  </dl>
+ </li>
+</ol>
+
+<p>Sehen Sie sich auch <a href="http://mike.kaply.com/2012/03/16/customizing-firefox-autoconfig-files/">Firefox' autoconfig-Dateien ändern</a> und <a href="http://mike.kaply.com/2012/03/20/customizing-firefox-autoconfig-files-continued/">Firefox' autoconfig-Dateien ändern (Fortführung)</a> an, um mehr zu erfahren. Für tiefergehende Einstellungen, wie beispielsweise das Ausschalten bestimmter Elemente der graphischen Benutzeroberfläche, können Sie die <a href="http://mike.kaply.com/cck2/">CCK2</a>-Extension nutzen.</p>
+
+<h3 id="Beispiel_für_eine_config-Datei">Beispiel für eine config-Datei</h3>
+
+<p>Ihnen mag der Bezug auf "komplexe Einstellungen" auffallen, die in einer anderen Art und Weise eingestellt werden müssen; seit FF31 scheinen alle Einstellungen auf normalem Wege änderbar zu sein, ähnlich wie im folgenden Beispiel.  Für genauere Informationen zu individuellen Einstellungen, durchsuchen Sie die <a href="http://kb.mozillazine.org/Knowledge_Base">Wissensdatenbank</a>.</p>
+
+<pre class="brush: js"><span class="brush: js">// Deaktiviert den Updater
+lockPref("app.update.enabled", false);
+// Stellt sicher dass er tatsächlich abgestellt ist
+lockPref("app.update.auto", false);
+lockPref("app.update.mode", 0);
+lockPref("app.update.service.enabled", false);
+
+// Deaktiviert die Kompatbilitätsprüfung der Add-ons
+clearPref("extensions.lastAppVersion");
+
+// Deaktiviert 'Kenne deine Rechte' beim ersten Start
+pref("browser.rights.3.shown", true);
+
+// Versteckt 'Was ist neu?' beim ersten Start nach jedem Update
+pref("browser.startup.homepage_override.mstone","ignore");
+
+// Stellt eine Standard-Homepage ein - Nutzer können sie ändern
+defaultPref("browser.startup.homepage", "http://home.example.com");
+
+// Deaktiviert den internen PDF-Viewer
+pref("pdfjs.disabled", true);
+
+// Deaktiviert den Flash zu JavaScript Converter
+pref("shumway.disabled", true);
+
+// Verhindert die Frage nach der Installation des Flash Plugins
+pref("plugins.notifyMissingFlash", false);
+
+//Deaktiviert das 'plugin checking'
+lockPref("plugins.hide_infobar_for_outdated_plugin", true);
+clearPref("plugins.update.url");
+
+// Deaktiviert den 'health reporter'
+lockPref("datareporting.healthreport.service.enabled", false);
+
+</span>// Disable all data upload (Telemetry and FHR)
+lockPref("datareporting.policy.dataSubmissionEnabled", false);
+<span class="brush: js">
+// Deaktiviert den 'crash reporter'
+lockPref("toolkit.crashreporter.enabled", false);
+Components.classes["@mozilla.org/toolkit/crash-reporter;1"].getService(Components.interfaces.nsICrashReporter).submitReports = false;</span><em> </em>
+</pre>
+
+<h2 id="Packaging_Extensions">Packaging Extensions</h2>
+
+<ol>
+ <li>Installieren Sie die Erweiterung auf einem Rechner zu Testzwecken. Sehen Sie in about:support unter Extensions nach um die GUID zu fnden. </li>
+ <li>Sehen Sie im <a href="https://support.mozilla.org/en-US/kb/profiles-where-firefox-stores-user-data">Profilverzeichnis</a> (z.B.: <code>%APPDATA%\Mozilla\Firefox\Profiles</code> auf Win7; um diesen zu finden, klicken Sie auf <strong>Ordner anzeigen</strong> in about:support), dann unter "extensions" nach dem Add-On dass Sie suchen. Beachten Sie dass es entweder eine einzelne .xpi Datei (wie eine zip Datei) oder extrahiert zu einem Ordner mit mehreren Dateien.</li>
+ <li>Entscheiden Sie wie Sie sie nutzen wollen. Die einfachste Methode ist, die .xpi Datei oder den Ordner in <strong>Programm<code>verzeichnis</code></strong><code>/distribution/extensions</code> zu legen, jedoch funktioniert dies nur für Profile die Installiert wurden nachdem die Erweiterung installiert wurde. Außerdem, wenn Sie Firefox manuell updaten indem Sie das Programm erneut installieren, wird dieser Programmverzeichnis gelöscht. Vergewissern SIe sich dann, ob Sie die Erweiterung ebenfalls manuell erneut installiert haben. Sehen Sie sich auch <a href="http://mike.kaply.com/2012/02/09/integrating-add-ons-into-firefox/">Integrating add-ons into Firefox/</a> (Englisch) an, um alternative Methoden zu lernen.</li>
+</ol>
+
+<p>Beachten Sie auch: <a href="http://mike.kaply.com/2013/05/03/add-on-scopes-redux/">Add-on scopes redux/</a> (Englisch)</p>
+
+<h2 id="Änderungen_mit_der_Zeit">Änderungen mit der Zeit</h2>
+
+<h3 id="Änderungen_in_der_Verzeichnisstruktur">Änderungen in der Verzeichnisstruktur</h3>
+
+<p>Die Verzeichnisstruktur des Programmpfades wurde zweimal geändert. Sollten Sie einer Anleitung für eine Firefox-Version <strong>vor</strong> Version 21 folgen, dann müssen Sie vermutlich diese Änderungen beachten:</p>
+
+<ul>
+ <li>Seit Version 14, funktionieren einige der pref Einstellungen nicht mehr wenn sie in einer Datei geändert werden, die im Pfad <code>defaults/pref</code> liegt. Sie können das Problem beheben, indem Sie den Pfad <code>defaults/preferences</code> erstellen und die Datei dort ablegen.</li>
+ <li>Seit Version 21 wurde der neue Ordner <code>browser</code> erstellt. Die Datei <code>override.ini</code> und die Pfade <code>defaults/preferences</code>, <code>defaults/profile</code>, <code>extensions</code>, <code>plugins</code>, und <code>searchplugins</code> wurden dorthinein verlegt. Plug-ins im Ordner <code>plugins</code> können reaktiviert werden, indem die Einstellung <code>plugins.load_appdir_plugins</code> zu <strong>true</strong> geändert wird.</li>
+</ul>
+
+<p>Die Einstellungen preferences <code>general.config.filename</code> und <code>general.config.obscure_value</code> zur AutoConfiguration können immer noch in <code>defaults/pref</code> vorgenommen werden, jedoch sollte der Dateiname mit dem Buchstaben 'a' beginnen, wie zum Beispiel <code>autoconfig.js</code>.</p>
+
+<p>Sollte es in <code>defaults/pref</code> in einer zuünftigen Version von Firefox nicht mehr funktionieren, probieren Sie <code>browser/defaults/preferences</code> als den wahrscheinlichsten Platz für die Datei.</p>
+
+<h3 id="Änderungen_in_ESR_24.x_mit_Adobe_PDF_Files">Änderungen in ESR 24.x mit Adobe PDF Files</h3>
+
+<p>Firefox RR 19.x änderte den Standard-Viewer für Adobe PDF Dateien zu dem internen PDF Viewer. Diese Änderung betrifft nun die ESR Versionen seit 24.x, und wird (auf Windows) angewandt, wenn von 17.x auf eine höhere Version geupgradet wird, <em>selbst wenn ein externer Viewer bereits eingestellt wurde</em>. Der Name des Dateitypes wurde von <strong>Adobe Acrobat Document</strong> zu <strong>Portable Document Format (PDF)</strong> geändert, was die Lokalisierung durch die Tools-, Options- oder Applications-Tabs erschwert. Um dies abzustellen, ändern Sie <code>pdfjs.disabled</code> zu true wie auch im oben genannten Beispiel.</p>
diff --git a/files/de/mozilla/firefox/privacy/index.html b/files/de/mozilla/firefox/privacy/index.html
new file mode 100644
index 0000000000..c6a9e69b09
--- /dev/null
+++ b/files/de/mozilla/firefox/privacy/index.html
@@ -0,0 +1,9 @@
+---
+title: Privacy
+slug: Mozilla/Firefox/Privacy
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Mozilla/Firefox/Privacy
+---
+<div>{{FirefoxSidebar}}</div><p>{{ ListSubpages () }}</p>
diff --git a/files/de/mozilla/firefox/privacy/tracking_protection/index.html b/files/de/mozilla/firefox/privacy/tracking_protection/index.html
new file mode 100644
index 0000000000..7ebf5f19da
--- /dev/null
+++ b/files/de/mozilla/firefox/privacy/tracking_protection/index.html
@@ -0,0 +1,88 @@
+---
+title: Verfolgungsschutz
+slug: Mozilla/Firefox/Privacy/Tracking_Protection
+tags:
+  - Privacy
+  - Privat
+  - Private browsing
+  - Privates Surfen
+  - blocking
+  - tracker
+  - tracking
+translation_of: Mozilla/Firefox/Privacy/Tracking_Protection
+---
+<div>{{FirefoxSidebar}}</div>
+
+<h2 id="Was_ist_Verfolgungsschutz">Was ist Verfolgungsschutz?</h2>
+
+<p>Beginnend mit Version 42 beinhalten Firefox Desktop und Firefox für Android einen eingebauten Schutz gegen Verfolgung. In privaten Browserfenstern (Tabs, in Firefox für Android) wird Firefox Inhalte, die von Domains geladen werden, die Nutzer über Seiten verfolgen, blockieren.</p>
+
+<p>Einige dieser blockierten Inhalte sind Teil des Seitenlayouts, weswegen Nutzer Probleme mit diesem haben können. Ist das Seitenraster so angepasst, dass andere Elemente die Lücken der blockierten Inhalte füllen, merken Nutzer keinen Unterschied.</p>
+
+<p>Wenn Firefox Inhalte blockiert, wird die folgende Nachricht ausgegeben:</p>
+
+<pre><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">Die Ressource auf "https://some/url" wurde blockiert, weil das Blockieren von Seitenelementen aktiviert ist.</span></span></span></pre>
+
+<div class="blockIndicator note">
+<p>Die Ausgaben auf der Konsole in Firefox für Android können über den Remote Debugger angezeigt werden.</p>
+</div>
+
+<p>Das Firefox Benutzerinterface zeigt Nutzern an wenn Inhalte blockiert wurden und ermöglicht es ihnen diese für die Dauer der Sitzung zu entblocken. Nutzer können sich auch entscheiden, den Trackingschutz auch dauerthaft abzuschalten.</p>
+
+<h2 id="Wie_entscheidet_Firefox_was_blockiert_wird">Wie entscheidet Firefox was blockiert wird?</h2>
+
+<p>Inhalte werden auf Basis der Domain blockiert, von der sie geladen werden.</p>
+
+<p>Firefox kommt mit einer Liste von Seiten, die Nutzer über Seiten hinweg verfolgen. Wenn der Verfolgungschutz aktiv ist, wird Firefox Inhalte von Seiten auf dieser Liste blockieren</p>
+
+<p>Seiten die User tracken sind hauptsächlich externe Werbe- und Analyseseiten</p>
+
+<h2 id="Was_bedeutet_das_für_deine_Webseite">Was bedeutet das für deine Webseite?</h2>
+
+<p>Zuerst einmal bedeutet das offensichtlich, dass wenn der Trackingschutz aktiviert ist:</p>
+
+<ul>
+ <li>Inhalte die von externen Trackern bereit gestellt werden sind für User nicht sichtbar</li>
+ <li>deine Seite wird externe Werbe- und Analyseservices, die tracken, nicht nutzen können</li>
+</ul>
+
+<p>Weniger offensichtlich, falls Teile deiner Seite davon abhänging sind, dass Tracker geladen werden, werden diese Teile nicht funktionieren, wenn der Trackingschutz aktiv is. Beinhaltet deine Seite beispielsweise einen Callback, der ausgeführt wird, wenn Inhalte von einer Trackingseite geladen wurde, so wird dieser Callback nicht ausgeführt.</p>
+
+<p>Zum Beispiel solltest du Google Analytics nicht so verwenden:</p>
+
+<pre class="brush:html example-bad">&lt;a href="http://www.example.com" onclick="trackLink('http://www.example.com', event);"&gt;Visit example.com&lt;/a&gt;
+&lt;script&gt;
+function trackLink(url,event) {
+    event.preventDefault();
+    ga('send', 'event', 'outbound', 'click', url, {
+     'transport': 'beacon',
+     'hitCallback': function() {
+       document.location = url;
+     }
+   });
+}
+&lt;/script&gt;</pre>
+
+<p>Stattdessen solltest  du den Fall berücksichtigen, dass Google Analytics fehlt, in dem du überprüftst ob das <code>ga</code> Objekt initialisiert wurde.</p>
+
+<pre class="brush:html example-good">&lt;a href="http://www.example.com" onclick="trackLink('http://www.example.com', event);"&gt;Visit example.com&lt;/a&gt;
+&lt;script&gt;
+function trackLink(url,event) {
+    event.preventDefault();
+    if (window.ga &amp;&amp; <span class="pl-smi">ga</span>.loaded) {
+         ga('send', 'event', 'outbound', 'click', url, {
+         'transport': 'beacon',
+         'hitCallback': function() { document.location = url; }
+       });
+    } else {
+        document.location = url;
+    }
+}
+&lt;/script&gt;
+</pre>
+
+<p>Mehr Informationen zu dieser Technik ist verfügbar auf <a href="https://hacks.mozilla.org/2016/01/google-analytics-privacy-and-event-tracking/">Google Analytics, Privacy, and Event Tracking</a>.</p>
+
+<div class="blockIndicator note">
+<p>Sich auf externe Services zu verlassen ist so oder so kein guter Stil: Es bedeutet deine Seite funktioniert nicht, wenn der Service langsam oder nicht verfügbar ist oder der Tracker von einem Addon blockiert wird.</p>
+</div>
diff --git a/files/de/mozilla/firefox/releases/16/index.html b/files/de/mozilla/firefox/releases/16/index.html
new file mode 100644
index 0000000000..1f341acc1e
--- /dev/null
+++ b/files/de/mozilla/firefox/releases/16/index.html
@@ -0,0 +1,104 @@
+---
+title: Firefox 16 für Entwickler
+slug: Mozilla/Firefox/Releases/16
+tags:
+  - Firefox
+  - Firefox 16
+translation_of: Mozilla/Firefox/Releases/16
+---
+<div>{{FirefoxSidebar}}</div><p>Firefox 16 erschien am 9. Oktober 2012. Dieser Artikel listet die hauptsächlichen Änderungen auf, welche nicht nur für Web-Entwickler gedacht sind, aber auch Firefox- , Gecko- und AddOn-Entwickler.</p>
+
+<p>Möchten Sie helfen Firefox 16 zu dokumentieren? Schauen Sie auf die <a href="http://beta.elchi3.de/doctracker/#list=fx&amp;version=16.0">Liste von Bugs, über die geschrieben werden sollte</a> und schreibe Sie dazu.</p>
+
+<h2 id="Änderungen_für_Web-Entwickler">Änderungen für Web-Entwickler</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<ul>
+ <li>Das {{HTMLElement("meter")}}-Element ist nun verfügbar.</li>
+
+ <li>Die HTML Microdata API kann nun genutzt werden. (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=591467">bug 591467</a>)</li>
+ <li>{{HTMLElement("canvas")}} ist nun für alle CSS <code>currentColor</code> verfügbar. ({{bug("629882")}})</li>
+ <li>{{HTMLElement("input")}} erlaubt nun Filterung durch verschiedene Mimetypes in <code>accept</code>. ({{bug("565274")}})</li>
+ <li>Die Attribute <code>width</code> and <code>height</code> wurden zum Element {{HTMLElement("input")}} hinzugefügt. (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=683855">bug 683855</a>)</li>
+</ul>
+
+<h3 id="CSS">CSS</h3>
+
+<ul>
+ <li>Support for the standard, unprefixed version of <a href="/en-US/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_transforms">CSS Animations</a> has been landed. (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=762302">bug 762302</a>)</li>
+ <li>Support for reverse animation direction (keywords <code>reverse</code> and <code>alternate-reverse</code> on the {{cssxref("animation-direction")}} property) has been added. (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=655920">bug 655920</a>)</li>
+ <li>You can now animate the CSS {{cssxref("height")}} and {{cssxref("width")}} properties.</li>
+ <li>The {{cssxref("animation-duration")}} and {{cssxref("transition-duration")}} CSS properties now reject negative values (and do not handle them as <code>0s</code> anymore) (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=773102" title="https://bugzilla.mozilla.org/show_bug.cgi?id=773102">bug 773102</a>)</li>
+ <li>Support for the standard, unprefixed version of <a href="/en-US/docs/CSS/Using_CSS_transforms" title="CSS/Using_CSS_transforms">CSS Transforms</a> has been landed. (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=745523">bug 745523</a>)</li>
+ <li>Support for the standard, unprefixed version of <a href="/en-US/docs/CSS/Using_CSS_gradients" title="CSS/Using_CSS_gradients">CSS Gradients</a> has been landed. Note that the syntax has changed significantly since the prefixed version, so you should read up on this. (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=752187">bug 752187</a>)</li>
+ <li>The {{cssxref("box-sizing", "-moz-box-sizing")}} implementation has been updated to apply to table cells too. (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=338554">bug 338554</a>)</li>
+ <li>Support for the standard, unprefixed version of {{cssxref("calc")}} has been landed. (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=771678" title="https://bugzilla.mozilla.org/show_bug.cgi?id=771678">bug 771678</a>)</li>
+ <li>The {{cssxref("&lt;resolution&gt;")}} CSS data type has been extended to support the <code>dppx</code>. (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=741644" title="https://bugzilla.mozilla.org/show_bug.cgi?id=741644">bug 741644</a>)</li>
+ <li>On screen, for <a href="/en-US/docs/CSS/Media_queries" title="CSS/Media_queries">media queries</a>, <code>dppx</code>, <code>dpi</code>, and <code>dpcm</code> are now representing values based on CSS pixels and no more with the physical units. (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=771390" title="https://bugzilla.mozilla.org/show_bug.cgi?id=771390">bug 771390</a>)</li>
+ <li>Three new pseudo-classes <code>:-moz-meter-optimum</code>, <code>:-moz-meter-sub-optimum</code>, and <code>:-moz-meter-sub-sub-optimum</code> have been added for accessing/styling a {{HTMLElement("meter")}} element in a paraticular state. (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=660238" title="https://bugzilla.mozilla.org/show_bug.cgi?id=660238">bug 660238</a>)</li>
+ <li>The {{cssxref("-moz-appearance")}} property gains two new values: <code>meterbar</code> and <code>meterchunk</code>. They represent components inside the {{HTMLElement("meter")}} element. (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=659999" title="https://bugzilla.mozilla.org/show_bug.cgi?id=659999">bug 659999</a>)</li>
+ <li>The {{cssxref("min-width")}} and {{cssxref("min-height")}} now supports the <code>auto</code> keyword for flex items (and resolves to <code>0</code> for other items). ({{bug("763689")}})</li>
+</ul>
+
+<h3 id="DOM">DOM</h3>
+
+<ul>
+ <li>Two new properties <code>width</code> and <code>height</code> have been added to the {{domxref("HTMLInputElement")}} interface (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=683855">bug 683855</a>).</li>
+ <li>IndexedDB properties and methods have been unprefixed. (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=726378">bug 726378</a>)</li>
+ <li>The <a href="/en-US/docs/DOM/window.navigator.battery" title="DOM/window.navigator.battery">Battery API</a> is now unprefixed.</li>
+ <li>The Vibration API has been unprefixed.</li>
+ <li>The {{domxref("Keyboard")}} interface, still prefixed as <code>mozKeyboard</code>, now has the {{domxref("Keyboard.setSelectedOption()")}} and {{domxref("Keyboard.setValue()")}} methods, as well as the {{domxref("Keyboard.onfocuschange")}} property.</li>
+ <li>The <a href="/en-US/docs/LiveConnect_Reference/java" title="/en-US/docs/LiveConnect_Reference/java"><code>java</code></a> and <a href="/en-US/docs/LiveConnect_Reference/Packages" title="/en-US/docs/LiveConnect_Reference/Packages"><code>Packages</code></a> global objects have been removed. See <a href="/en-US/docs/LiveConnect" title="/en-US/docs/LiveConnect">LiveConnect</a>.</li>
+ <li>The <code>CSSRule.type</code> associated with {{domxref("CSSNamespaceRule")}} has been updated from <code>UNKNOWN_RULE</code> (<code>0</code>) to <code>NAMESPACE_RULE</code> (<code>10</code>). (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=765590" title="https://bugzilla.mozilla.org/show_bug.cgi?id=765590">bug 765590</a>)</li>
+ <li>WebSMS API: {{domxref("SmsRequest")}} has been superseded by the more general {{domxref("DOMRequest")}}.</li>
+</ul>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="JavaScript/Reference/Global_Objects/Number"><code>Number</code></a> objects now offer <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isFinite">isFinite</a>()</code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toInteger">toInteger</a>()</code>, and <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isInteger">isInteger</a>()</code> methods. (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=761480">bug 761480</a>, <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=761495">bug 761495</a>)</li>
+ <li>The Harmony <a href="http://wiki.ecmascript.org/doku.php?id=harmony:spread" title="http://wiki.ecmascript.org/doku.php?id=harmony:spread">spread operator</a> is now supported in <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="JavaScript/Reference/Global_Objects/Array"><code>Array</code></a> initializers (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=574130">bug 574130</a>). Note it is not yet supported in calls (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=762363" title="https://bugzilla.mozilla.org/show_bug.cgi?id=762363">bug 762363</a>).</li>
+</ul>
+
+<h3 id="WebGL">WebGL</h3>
+
+<h3 id="SVG">SVG</h3>
+
+<h3 id="MathML">MathML</h3>
+
+<ul>
+ <li>The <code>lspace</code> and <code>rspace</code> attributes of {{MathMLElement("mo")}} now correctly default to <code>thickmathspace</code>.</li>
+</ul>
+
+<h3 id="Network">Network</h3>
+
+<h3 id="Developer_tools">Developer tools</h3>
+
+<ul>
+ <li>There's now a handy developer toolbar you can access by going to Tools &gt; Web Developer &gt; Developer Toolbar, or by pressing Ctrl-Shift-V (Cmd-Opt-V on Mac OS X). This toolbar offers a command line interface as well as buttons for quickly accessing useful tools. The graphical command line interface (<a href="/en-US/docs/Tools/GCLI" title="Tools/GCLI">GCLI</a>) is easy to expand and additional commands are expected in the future. Type "help" to get a list of supported commands.</li>
+ <li>The Web Console now displays an error count so you can quickly see how much work you have ahead of you.</li>
+ <li>The Scratchpad now offers a list of recently opened files.</li>
+</ul>
+
+<h2 id="Changes_for_Open_Web_App_developers">Changes for Open Web App developers</h2>
+
+<ul>
+ <li>Initial <a href="https://developer.mozilla.org/en-US/docs/Apps/Getting_Started">Open Web App support</a> has been implemented in the desktop versions of Firefox (that is, on Windows, Mac OS X, and Linux).</li>
+</ul>
+
+<h2 id="Changes_for_add-on_and_Mozilla_developers">Changes for add-on and Mozilla developers</h2>
+
+<h3 id="Interface_changes">Interface changes</h3>
+
+<p>{{interface("nsIPrivateDOMEvent")}} has been merged into {{interface("nsIDOMEvent")}}. ({{bug("761613")}})</p>
+
+<h4 id="New_interfaces">New interfaces</h4>
+
+<h4 id="Removed_interfaces">Removed interfaces</h4>
+
+<p>The following interfaces have been removed.</p>
+
+<h2 id="See_also">See also</h2>
+
+<div>{{Firefox_for_developers('15')}}</div>
diff --git a/files/de/mozilla/firefox/releases/27/index.html b/files/de/mozilla/firefox/releases/27/index.html
new file mode 100644
index 0000000000..cb671b3b3c
--- /dev/null
+++ b/files/de/mozilla/firefox/releases/27/index.html
@@ -0,0 +1,56 @@
+---
+title: Firefox 27 für Entwickler
+slug: Mozilla/Firefox/Releases/27
+tags:
+  - Firefox
+translation_of: Mozilla/Firefox/Releases/27
+---
+<div>{{FirefoxSidebar}}</div><div class="overheadIndicator draft draftHeader"><strong>Diese Seite ist noch nicht fertig.</strong>
+<div>Firefox 27 ist noch keine vollständige Version. Neue Features werden demnächst hinzugefügt.</div>
+</div>
+
+<p>Möchten Sie helfen Firefox 27 zu dokumentieren? Schauen Sie auf die <a href="http://beta.elchi3.de/doctracker/#list=fx&amp;version=27.0"><span class="external">Liste von Bugs, über die geschrieben werden sollte</span></a> und schreibe Sie dazu.</p>
+
+<h2 id="Änderungen_für_Web-Entwickler">Änderungen für Web-Entwickler</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<p><em>Keine Änderung.</em></p>
+
+<h3 id="CSS">CSS</h3>
+
+<ul>
+ <li>Die Element <code>grab</code> und <code>grabbing</code> der Eigenschaft {{cssxref("cursor")}} sind nunmehr ohne Präfix (<code>-moz-grab</code> und <code>-moz-grabbing</code>).</li>
+</ul>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p><a href="/en-US/docs/Web/JavaScript/ECMAScript_6_support_in_Mozilla" title="/en-US/docs/Web/JavaScript/ECMAScript_6_support_in_Mozilla">EcmaScript 6</a> (Harmony)<span class="short_text" id="result_box" lang="de"><span class="alt-edited hps"> Implementierung</span></span> wird fortgeführt!</p>
+
+<ul>
+ <li>Der Harmony <a href="http://wiki.ecmascript.org/doku.php?id=harmony:spread">Spread Operator</a> ist nun in der Funktion calls verfügbar. ({{bug("762363")}})</li>
+</ul>
+
+<h3 id="InterfacesAPIsDOM">Interfaces/APIs/DOM</h3>
+
+<p><em>Keine Änderung.</em></p>
+
+<h3 id="MathML">MathML</h3>
+
+<p><em>Keine Änderung.</em></p>
+
+<h3 id="SVG">SVG</h3>
+
+<p><em>Keine Änderung.</em></p>
+
+<h2 id="Veränderungen_für_AddOn-_und_Mozilla-Entwickler">Veränderungen für AddOn- und Mozilla-Entwickler</h2>
+
+<ul>
+ <li>Der <code>downloads-indicator</code>-Button wurde entfernt. Das Element <code>downloads-button</code> sollte nun verwendet werden. <span id="result_box" lang="de"><span class="alt-edited hps">Wenn Sie prüfen möchten</span><span>, dass es seine</span> <span class="hps">Overlay</span> <span class="alt-edited hps">geladen hat</span><span>,</span> <span class="alt-edited hps">überprüfen Sie das <code>indicator</code></span>-<span class="hps">Attribut</span> <span class="alt-edited hps">auf diesen Button</span> <span class="alt-edited hps">.</span></span></li>
+ <li>Das <code>chrome://browser/skin/downloads/indicator.css-</code>Stylesheet ist nicht länger in Firefox referenziert.</li>
+ <li><a href="https://developer.mozilla.org/de/docs/Mozilla/Firefox/Releases/27/Site_Compatibility"><span class="short_text" id="result_box" lang="de"><span class="alt-edited hps">Seiten-</span><span>Kompatibilität</span> <span class="hps">für</span> <span class="hps">Firefox</span> <span class="hps">27</span></span></a></li>
+</ul>
+
+<h3 id="Ältere_Versionen">Ältere Versionen</h3>
+
+<p>{{Firefox_for_developers('26')}}</p>
diff --git a/files/de/mozilla/firefox/releases/28/index.html b/files/de/mozilla/firefox/releases/28/index.html
new file mode 100644
index 0000000000..64f7d7796e
--- /dev/null
+++ b/files/de/mozilla/firefox/releases/28/index.html
@@ -0,0 +1,116 @@
+---
+title: Firefox 28 for developers
+slug: Mozilla/Firefox/Releases/28
+translation_of: Mozilla/Firefox/Releases/28
+---
+<div>{{FirefoxSidebar}}</div>
+
+<p>Firefox 28 wurde am 18. März 2014 veröffentlicht. Dieser Artikel listet wichtige Änderungen, die sowohl für Webentwickler, als auch für Firefox-, Gecko- und AddOn-Entwickler nützlich sind.</p>
+
+<h2 id="Änderungen_für_Web-Entwickler">Änderungen für Web-Entwickler</h2>
+
+<h3 id="Developer_Tools">Developer Tools</h3>
+
+<ul>
+ <li>Die {{domxref("console.exception")}} Eigenschaft wurde hinzugefügt ({{bug("922214")}}).</li>
+ <li>Die {{domxref("console.assert")}} Eigenschaft wurde hinzugefügt ({{bug("760193")}}).</li>
+ <li>App Manager: ein neuer Manifest-Texteditor wurde hinzugefügt.</li>
+ <li>App-Manager: die Toolbox für die Fehlersuche von Apps ist jetzt in die Benutzeroberfläche des App Managers integriert.</li>
+ <li>Web-Konsole: ein "split console"-Modus wurde hinzugefügt - drücken Sie die Abbruchtaste, um die Konsole in anderen Tools schnell zu öffnen.</li>
+ <li>Web-Konsole: ein dunkles Theme wurde für den Output hinzugefügt.</li>
+ <li>Fehlersuche: lesbares minifiziertes JavaScript.</li>
+ <li>Fehlersuche: einfach den Mauszeiger über eine Variable bewegen oder diese anklicken, um ein Popup für den derzeitigen Wert anzuzeigen.</li>
+ <li>Inspector: ein Farbwähler und diverse Tooltips wurden der Regel-Ansicht hinzugefügt.</li>
+ <li>Browser Toolbox: erlaubt AddOn- und Platformentwicklern die Benutzung von fast allen Entwickler-Tools während der Erfassung des Browsers.</li>
+</ul>
+
+<p>Mehr Einzelheiten in <a href="https://hacks.mozilla.org/2013/12/split-console-pretty-print-minified-js-and-more-firefox-developer-tools-episode-28/" title="Split console, pretty-print minified JS and more – Firefox Developer Tools Episode 28">diesem Beitrag</a>.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<ul>
+ <li>Support for multi-line <a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes">flexbox</a> has been added ({{bug("939901")}}).</li>
+ <li><span id="summary_alias_container"><span id="short_desc_nonedit_display">Longhand East Asian <a href="/en-US/docs/Web/CSS/list-style-type">counter styles</a></span></span> have been implemented ({{bug("934072")}}).</li>
+ <li><span id="summary_alias_container"><span id="short_desc_nonedit_display">Experimental support for the {{cssxref("background-blend-mode")}} property has been added, but is disabled by default</span></span> ({{bug("841601")}}).</li>
+ <li>The <code>none</code> value has been added to {{cssxref("font-variant-ligatures")}} ({{bug("913264")}}).</li>
+ <li>Support for the {{cssxref(":hover")}} user action pseudo-class on pseudo-elements has been implemented ({{bug("922669")}}).</li>
+</ul>
+
+<h3 id="HTML">HTML</h3>
+
+<ul>
+ <li><code>&lt;input type=color&gt;</code> and <code>&lt;input type=number&gt;</code> have been implemented, disabled by default.</li>
+</ul>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/ECMAScript_6_support_in_Mozilla" title="/en-US/docs/Web/JavaScript/ECMAScript_6_support_in_Mozilla">ECMAScript 2015</a> implementation continues:
+
+  <ul>
+   <li>New <code>Array</code> methods have been implemented: {{jsxref("Array.prototype.entries()")}} and {{jsxref("Array.prototype.keys()")}} ({{bug("894658")}}).</li>
+  </ul>
+ </li>
+ <li>A bug causing that {{jsxref("Object.getOwnPropertyNames()")}} did not see unresolved properties of {{jsxref("Error")}} objects has been fixed ({{bug("724768")}}).</li>
+</ul>
+
+<h3 id="InterfacesAPIsDOM">Interfaces/APIs/DOM</h3>
+
+<ul>
+ <li><span id="summary_alias_container"><span id="short_desc_nonedit_display"><code>HTMLVideoElement.canPlayType('video/webm')</code> now reports <code>maybe</code>.</span></span> ({{bug("884275")}}).</li>
+ <li>The {{domxref("DocumentFragment.getElementById()")}} method has been implemented. E.g. <code>document.createDocumentFragment().getElementById()</code> ({{bug("933193")}}).</li>
+ <li>The {{domxref("KeyboardEvent.repeat")}} attribute has been implemented ({{bug("600117")}}).</li>
+ <li>The {{domxref("File")}} constructor, e.g. <code>new File(["foo"], "foo.txt")</code> has been implemented. ({{bug("819900")}}).</li>
+ <li>The {{domxref("NavigatorPlugins.plugins", "navigator.plugins")}} is no more enumerable, for privacy reasons ({{bug(757726)}}).</li>
+ <li>The two attributes {{domxref("Window.screenX")}} and {{domxref("Window.screenY")}} now return CSS pixels (and no more device pixels) ({{bug(943668)}}).</li>
+ <li>The two methods {{domxref("CanvasRenderingContext2D.drawSystemFocusRing()")}} and {{domxref("CanvasRenderingContext2D.drawCustomFocusRing()")}} have been implemented. The preference <code>canvas.focusring.enabled</code> must be set to <code>true</code> to activate both ({{bug(540456)}}).</li>
+ <li>The <code>willReadFrequently</code> context attribute for "<code>2d</code>" canvas contexts has been implemented (see {{domxref("HTMLCanvasElement.getContext()")}}) ({{bug(884226)}}).</li>
+ <li>The following attributes and methods of {{domxref("NavigatorID")}} have been implemented on {{domxref("WorkerNavigator")}} to allow their use in workers: {{domxref("NavigatorID.appCodeName", "appCodeName")}}, {{domxref("NavigatorID.product", "product")}}, and {{domxref("NavigatorID.taintEnabled", "taintEnabled()")}} ({{bug(925847)}}).</li>
+ <li>The {{domxref("NonDocumentTypeChildNode.previousElementSibling" , "previousElementSibling")}} and {domxref("NonDocumentTypeChildNode.nextElementSibling" , "nextElementSibling")}} properties has been removed from {{domxref("DocumentType")}}, because of compatibility problems ({{bug(932501)}}).</li>
+</ul>
+
+<h3 id="MathML">MathML</h3>
+
+<ul>
+ <li>Support of <span id="summary_alias_container"><span id="short_desc_nonedit_display">the </span></span><code>mathvariant</code> attribute has been added ({{bug("114365")}}).</li>
+</ul>
+
+<h3 id="SVG">SVG</h3>
+
+<p><em>No change.</em></p>
+
+<h3 id="AudioVideo">Audio/Video</h3>
+
+<ul>
+ <li><span id="summary_alias_container"><span id="short_desc_nonedit_display">Opus in WebM</span></span> is now supported ({{bug("887978")}}).</li>
+ <li><span id="summary_alias_container"><span id="short_desc_nonedit_display">The VP9 video decoder</span></span> is now supported ({{bug("833023")}}).</li>
+</ul>
+
+<h3 id="Network">Network</h3>
+
+<ul>
+ <li>Support of <code>SPDY/2</code> has been removed.</li>
+</ul>
+
+<h2 id="Changes_for_addon_and_Mozilla_developers">Changes for addon and Mozilla developers</h2>
+
+<ul>
+ <li>The interface of <a href="/en-US/docs/Mozilla/JavaScript_code_modules/DeferredTask.jsm">DeferredTask.jsm</a> has been changed, and the <code>isPending()</code>, <code>start()</code>, <code>flush()</code>, and <code>cancel()</code> methods have been removed ({{bug("940408")}}).</li>
+</ul>
+
+<h2 id="Security">Security</h2>
+
+<ul>
+ <li>CSP was not enforced in sandboxed iframes. This has been fixed ({{bug(886164)}}).</li>
+ <li>The CSP 1.1 experimental <code>script-nonce</code> directive has been implemented. The preference <code>security.csp.experimentalEnabled</code> should be set to <code>true</code> to enable this functionality ({{bug(855326)}}).</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://www.fxsitecompat.com/en-US/versions/28/">Site Compatibility for Firefox 28</a></li>
+</ul>
+
+<h3 id="Older_versions">Older versions</h3>
+
+<p>{{Firefox_for_developers('27')}}</p>
diff --git a/files/de/mozilla/firefox/releases/3.6/index.html b/files/de/mozilla/firefox/releases/3.6/index.html
new file mode 100644
index 0000000000..dcd0edcee8
--- /dev/null
+++ b/files/de/mozilla/firefox/releases/3.6/index.html
@@ -0,0 +1,301 @@
+---
+title: Firefox 3.6 for developers
+slug: Mozilla/Firefox/Releases/3.6
+translation_of: Mozilla/Firefox/Releases/3.6
+---
+<div><section class="Quick_links" id="Quick_Links">
+  <ol>
+    <li class="toggle">
+        <details>
+            <summary>Firefox developer release notes</summary>
+            <ol>
+              <li><a href="/de/docs/Mozilla/Firefox/Releases">Firefox developer release notes</a></li>
+            </ol>
+        </details>
+    </li>
+    <li class="toggle">
+        <details>
+            <summary>Add-ons</summary>
+            <ol>
+              <li><a href="/de/Add-ons/WebExtensions">Browser extensions</a></li>
+              <li><a href="/de/Add-ons/Themes">Themes</a></li>
+            </ol>
+        </details>
+    </li>
+    <li class="toggle">
+        <details>
+            <summary>Firefox internals</summary>
+            <ol>
+              <li><a href="/de/docs/Mozilla/">Mozilla project</a></li>
+              <li><a href="/de/docs/Mozilla/Gecko">Gecko</a></li>
+              <li><a href="/de/docs/Mozilla/Firefox/Headless_mode">Headless mode</a></li>
+              <li><a href="/de/docs/Mozilla/JavaScript_code_modules">JavaScript code modules</a></li>
+              <li><a href="/de/docs/Mozilla/js-ctypes">JS-ctypes</a></li>
+              <li><a href="/de/docs/Mozilla/MathML_Project">MathML project</a></li>
+              <li><a href="/de/docs/Mozilla/MFBT">MFBT</a></li>
+              <li><a href="/de/docs/Mozilla/Projects">Mozilla projects</a></li>
+              <li><a href="/de/docs/Mozilla/Preferences">Preference system</a></li>
+              <li><a href="/de/docs/Mozilla/WebIDL_bindings">WebIDL bindings</a></li>
+              <li><a href="/de/docs/Mozilla/Tech/XPCOM">XPCOM</a></li>
+              <li><a href="/de/docs/Mozilla/Tech/XUL">XUL</a></li>
+            </ol>
+        </details>
+    </li>
+    <li class="toggle">
+        <details>
+            <summary>Building and contributing</summary>
+            <ol>
+              <li><a href="/de/docs/Mozilla/Developer_guide/Build_Instructions">Build instructions</a></li>
+              <li><a href="/de/docs/Mozilla/Developer_guide/Build_Instructions/Configuring_Build_Options">Configuring build options</a></li>
+              <li><a href="/de/docs/Mozilla/Developer_guide/Build_Instructions/How_Mozilla_s_build_system_works">How the build system works</a></li>
+              <li><a href="/de/docs/Mozilla/Developer_guide/Source_Code/Mercurial">Mozilla source code</a></li>
+              <li><a href="/de/docs/Mozilla/Localization">Localization</a></li>
+              <li><a href="/de/docs/Mozilla/Mercurial">Mercurial</a></li>
+              <li><a href="/de/docs/Mozilla/QA">Quality assurance</a></li>
+              <li><a href="/de/docs/Mozilla/Using_Mozilla_code_in_other_projects">Using Mozilla code in other projects</a></li>
+            </ol>
+        </details>
+    </li>
+  </ol>
+</section></div><p><a class="external" href="http://www.firefox.com/" title="http://www.firefox.com/">Firefox 3.6</a> offers support for new and developing web standards, increased performance, and an overall better experience for web users and developers. This page provides links to articles covering the new capabilities of Firefox 3.6.</p>
+
+<h2 id="For_web_site_and_application_developers">For web site and application developers</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/CSS/Using_CSS_gradients" title="en-US/docs/Using gradients">Using gradients</a></dt>
+ <dd>Firefox 3.6 adds support for the proposed <a href="/de/docs/Web/CSS/-moz-linear-gradient" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben. Bitte überlege, mitzuwirken!"><code>-moz-linear-gradient</code></a> and <a href="/de/docs/Web/CSS/-moz-radial-gradient" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben. Bitte überlege, mitzuwirken!"><code>-moz-radial-gradient</code></a> properties for <a href="/de/docs/Web/CSS/background" title="Die background CSS Eigenschaft ist eine Kurzschreibweise, um die verschiedenen Hintergrundwerte an einer einzigen Stelle im Stylesheet zu setzen. background kann dazu verwendet werden, einen oder mehrere der folgenden Werte zu setzen: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size und background-attachment."><code>background</code></a>.</dd>
+ <dt><a href="/en-US/docs/CSS/Multiple_backgrounds" title="en-US/docs/CSS/Multiple backgrounds">Multiple backgrounds</a></dt>
+ <dd>The <a href="/de/docs/Web/CSS/background" title="Die background CSS Eigenschaft ist eine Kurzschreibweise, um die verschiedenen Hintergrundwerte an einer einzigen Stelle im Stylesheet zu setzen. background kann dazu verwendet werden, einen oder mehrere der folgenden Werte zu setzen: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size und background-attachment."><code>background</code></a> property (as well as <a href="/de/docs/Web/CSS/background-color" title="Die background-color CSS Eigenschaft setzt die Hintergrundfarbe eines Elements, entweder durch einen Farbwert oder das Schlüsselwort transparent."><code>background-color</code></a>, <a href="/de/docs/Web/CSS/background-image" title="Die background-image-Eigenschaft legt ein oder mehrere Hintergrundbilder für ein Element fest. Die einzelnen Bilder werden übereinander gestapelt, wobei die erste Schicht so dargestellt wird, dass sie dem Benutzer am nächsten erscheint. Hintergrundbilder werden immer über Hintergrundfarben gelegt."><code>background-image</code></a>, <a href="/de/docs/Web/CSS/background-position" title="Die background-position Eigenschaft bestimmt die Position des Hintergrundbildes"><code>background-position</code></a>, <a href="/de/docs/Web/CSS/background-repeat" title="Die background-repeat Eigenschaft bestimmt, ob und wie Hintergrundbilder wiederholt werden."><code>background-repeat</code></a>, and <a href="/de/docs/Web/CSS/background-attachment" title="Die background-attachment Eigenschaft bestimmt, ob, das über background-image festgelegte Hintergrundbild beim Scrollen mit wandert oder an einem festen Ort fixiert ist."><code>background-attachment</code></a>) now supports multiple backgrounds. This lets you specify multiple backgrounds that are rendered atop one another in layers.</dd>
+ <dt><a href="/en-US/docs/CSS/Media_queries#Mozilla-specific_media_features" title="en-US/docs/CSS/Media queries#Mozilla-specific media features">Mozilla-specific media features</a></dt>
+ <dd>Media features have been added for Mozilla-specific system metrics, so that <a href="/en-US/docs/CSS/Media_queries" title="en-US/docs/CSS/Media queries">media queries</a> can be used to more safely check on the availability of features such as touch support.</dd>
+ <dt><a href="/en-US/docs/CSS/Scaling_background_images" title="en-US/docs/CSS/Scaling background images">Scaling background images</a></dt>
+ <dd>The <code>background-size </code>property from the <a class="external" href="http://dev.w3.org/csswg/css3-background/" title="http://dev.w3.org/csswg/css3-background/#the-background-size-property">CSS 3 Backgrounds and Borders draft</a> is now supported under the name <a href="/de/docs/Web/CSS/-moz-background-size" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben. Bitte überlege, mitzuwirken!"><code>-moz-background-size</code></a>.</dd>
+ <dt><a href="/en-US/docs/WOFF" title="en-US/docs/About WOFF">WOFF font support</a></dt>
+ <dd><a href="/de/docs/Web/CSS/@font-face" title="Die @font-face CSS at-Regel erlaubt Web-Autoren, Texte mit spezifischen Schriftarten (Fonts), die auf dem jeweiligen Webserver abgelegt sind,  darzustellen. Durch die @font-face Regel sind Web-Autoren nicht mehr länger auf die eingeschränkte Zahl an Fonts angewiesen, die auf den Computern von Usern installiert ist. Die @font-face at Regel lässt sich nicht nur in der oberen CSS-Ebene einbinden, sondern auch in irgendeiner CSS conditional-group at-Regel."><code>@font-face</code></a> now supports the WOFF downloadable font file format.</dd>
+ <dt><a href="/en-US/docs/CSS/pointer-events" title="en-US/docs/CSS/pointer-events">Pointer events</a></dt>
+ <dd>The <a href="/de/docs/Web/CSS/pointer-events" title="Die CSS-Eigenschaft pointer-events erlaubt es dem Autor zu steuern, unter welchen Umständen (wenn überhaupt) ein spezifisches grafisches Element target eines Mouse-Events wird. Wenn die Eigenschaft nicht gesetzt ist, werden die Eigenschaften von visiblePainted auf den SVG Inhalt angewandt."><code>pointer-events</code></a> property lets content specify whether or not an element may be the target of mouse pointer events.</dd>
+</dl>
+
+<h4 id="Miscellaneous_CSS_changes">Miscellaneous CSS changes</h4>
+
+<ul>
+ <li>The <a href="/en-US/docs/CSS/length#Relative_length_units" title="en-US/docs/CSS/length#Relative length units"><code>rem</code></a> length unit from <a class="external" href="http://www.w3.org/TR/css3-values/#lengths" title="http://www.w3.org/TR/css3-values/#lengths">CSS3 Values and Units</a> is now supported. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=472195" title="FIXED: support css3 root em ('rem' or 're') units">Bug 472195</a></li>
+ <li><a href="/de/docs/Web/CSS/image-rendering" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben. Bitte überlege, mitzuwirken!"><code>image-rendering</code></a> is supported for images, background images, videos and canvases. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=423756" title="FIXED: Request: Switch for authors to turn on/off bilinear filtering when enlarging images">Bug 423756</a></li>
+ <li><a href="/de/docs/Web/CSS/text-align" title="Die CSS Eigenschaft text-align beschreibt, wie Inlineinhalte wie Text in ihrem Elternblockelement ausgerichtet werden. text-align steuert nicht die Ausrichtung von Blockelementen selbst, nur deren Inlineinhalte."><code>text-align</code></a>:end is now supported. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=299837" title="FIXED: [FIX]add support for text-align: end">Bug 299837</a></li>
+ <li>DOM changes to elements using the table <a href="/de/docs/Web/CSS/display" title="Die display Eigenschaft legt den Typ einer Rendering-Box eines Elements fest. Für HTML sind die standardmäßigen display Werte in der HTML-Spezifikation beschrieben und in den User- bzw. Browser-Stylesheets angegeben. Für XML-Dokumente ist der voreingestellte Wert inline."><code>display</code></a> types now work much better.</li>
+ <li>Added <a href="/de/docs/Web/CSS/:-moz-locale-dir(ltr)" title='Die :-moz-locale-dir(ltr) CSS Pseudoklasse matcht ein Element, falls die Benutzerschnittstelle von links nach rechts angezeigt wird. Dies wird durch das Setzen der Einstellung intl.uidirection.locale (wobei locale die aktuelle Sprachumgebung ist) auf "ltr" bestimmt.'><code>:-moz-locale-dir(ltr)</code></a> and <a href="/de/docs/Web/CSS/:-moz-locale-dir(rtl)" title='Die :-moz-locale-dir(rtl) CSS Pseudoklasse matcht ein Element, falls die Benutzerschnittstelle von rechts nach links angezeigt wird. Dies wird durch das Setzen der Einstellung intl.uidirection.locale (wobei locale die aktuelle Sprachumgebung ist) auf "rtl" bestimmt.'><code>:-moz-locale-dir(rtl)</code></a> to make it easier to customize layouts based on whether the user interface is being displayed using a left-to-right or a right-to-left locale. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=478416" title="FIXED: Replace chromedir with something more sane">Bug 478416</a></li>
+ <li>Added support for the <a href="/de/docs/Web/CSS/:indeterminate" title='Die :indeterminate CSS Pseudoklasse repräsentiert alle &amp;lt;input type="checkbox"> Elements, deren indeterminate DOM Eigenschaft durch JavaScript auf true gesetzt wurde. Darüber hinaus wird sie in manchen Browsern dazu verwendet, &amp;lt;progress> Elemente in einem Zwischenstatus zu finden.'><code>:indeterminate</code></a> pseudo-class, which matches <code>checkbox</code> <a class="internal" href="/en-US/docs/HTML/Element/Input" title="en-US/docs/HTML/Element/input"><code>input</code></a> elements whose <code>indeterminate</code> attribute is <code>true</code>.</li>
+ <li>Windowed plugins are no longer displayed in CSS transforms, because they can't be transformed properly by the compositor.</li>
+</ul>
+
+<h3 id="HTML">HTML</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Using_files_from_web_applications" title="en-US/docs/Using files from web applications">Using files from web applications</a></dt>
+ <dd>Support for the new HTML5 File API has been added to Gecko, making it possible for web applications to access local files selected by the user. This includes support for selecting multiple files using the <code>input type="file"</code> HTML element's new <code>multiple</code> attribute.</dd>
+ <dt>HTML5 video supports poster frames</dt>
+ <dd>The <code>poster</code> attribute is now supported for the <a class="internal" href="/en-US/docs/HTML/Element/Video" title="en-US/docs/HTML/Element/Video"><code>video</code></a> element, allowing content to specify a poster frame to be displayed until the video begins to play.</dd>
+ <dt>Checkboxes and radio buttons support the <code>indeterminate</code> property</dt>
+ <dd>HTML <a class="internal" href="/en-US/docs/HTML/Element/Input" title="en-US/docs/HTML/Element/input"><code>input</code></a> elements of types <code>checkbox</code> and <code>radio</code> now support the indeterminate property, which allows a third, "indeterminate" state.</dd>
+ <dt>Canvas image smoothing can be controlled</dt>
+ <dd>The new <a class="internal" href="/en-US/docs/Canvas_tutorial/Using_images#Controlling_image_scaling_behavior" title="en-US/docs/Canvas tutorial/Using images#Controlling image scaling behavior"><code>mozImageSmoothingEnabled</code></a> property can be used to turn on and off image smoothing when scaling in <a class="internal" href="/en-US/docs/HTML/Element/canvas" title="en-US/docs/HTML/Element/canvas"><code>canvas</code></a> elements.</dd>
+ <dt>Asynchronous script execution</dt>
+ <dd>By setting the <code>async</code> attribute on a <a href="/en-US/docs/HTML/Element/Script" title="en-US/docs/HTML/Element/Script"><code>script</code></a> element, the <code>script</code> will not block loading or display of the rest of the page. Instead the <code>script</code> executes as soon as it is downloaded.</dd>
+</dl>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>Gecko 1.9.2 introduces JavaScript 1.8.2, which adds a number of language features from the <a href="/en-US/docs/JavaScript/ECMAScript_5_support_in_Mozilla" title="https://developer.mozilla.org/en-US/docs/JavaScript/ECMAScript_5_support_in_Mozilla">ECMAScript 5 standard</a>:</p>
+
+<ul>
+ <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date/parse" title="en-US/docs/Core JavaScript 1.5 Reference/Global Objects/Date/parse"><code>Date.parse()</code></a> can now parse ISO 8601 dates like YYYY-MM-DD.</li>
+ <li>
+  <p>The <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/prototype" title="en-US/docs/Core JavaScript 1.5 Reference/Global Objects/Function/prototype"><code>prototype</code></a> property of function instances is no longer enumerable.</p>
+ </li>
+</ul>
+
+<dl>
+</dl>
+
+<h3 id="DOM">DOM</h3>
+
+<dl>
+ <dt>Web workers can now self-terminate</dt>
+ <dd><a href="/en-US/docs/DOM/Using_web_workers" title="en-US/docs/Using web workers">Workers</a> now support the <code><a href="https://developer.mozilla.org/de/docs/XPCOM_Interface_Reference/nsIWorkerScope#close()">nsIWorkerScope.close()</a></code> method, which allows them to terminate themselves.</dd>
+ <dt>Drag and drop now supports files</dt>
+ <dd>The <a href="/en-US/docs/DragDrop/DataTransfer" title="en-US/docs/DragDrop/DataTransfer"><code>DataTransfer</code></a> object provided to drag listeners now includes a list of files that were dragged.</dd>
+ <dt>Checking to see if an element matches a specified CSS selector</dt>
+ <dd>The new <a href="/de/docs/Web/API/Node/mozMatchesSelector" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben. Bitte überlege, mitzuwirken!"><code>element.mozMatchesSelector</code></a> method lets you determine whether or not an element matches a specified CSS selector. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=518003" title="FIXED: implement function to check whether element matches a CSS selector">Bug 518003</a>.</dd>
+ <dt><a href="/en-US/docs/Detecting_device_orientation" title="en-US/docs/Detecting device orientation">Detecting device orientation</a></dt>
+ <dd>Content can now detect the orientation of the device if it has a supported accelerometer, using the <a href="/en-US/docs/DOM/MozOrientation" title="en-US/docs/DOM/MozOrientation"><code>MozOrientation</code></a> event. Firefox 3.6 supports the accelerometer in Mac laptops.</dd>
+ <dt><a href="/en-US/docs/DOM/Detecting_document_width_and_height_changes" title="en-US/docs/DOM/Detecting document width and height changes">Detecting document width and height changes</a></dt>
+ <dd>The new <code>MozScrollAreaChanged</code> event is dispatched whenever the document's <code>scrollWidth</code> and/or <code>scrollHeight</code> properties change.</dd>
+</dl>
+
+<h4 id="Miscellaneous_DOM_changes">Miscellaneous DOM changes</h4>
+
+<ul>
+ <li>The <code>getBoxObjectFor()</code> method has been <strong>removed</strong>, as it was non-standard and exposed even more non-standard stuff to the web. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=340571" title="FIXED: getBoxObjectFor leaking-onto-the-Web disaster">Bug 340571</a>. Also affects <a class="external" href="http://mootools.net/" title="http://mootools.net/">MooTools</a> which uses this call for Gecko detection; this has been fixed in the latest version of MooTools, so be sure to update.</li>
+ <li>The new <a class="internal" href="/en-US/docs/DOM/window.mozInnerScreenX" title="en-US/docs/DOM/window.mozInnerScreenX"><code>mozInnerScreenX</code></a> and <a class="internal" href="/en-US/docs/DOM/window.mozInnerScreenY" title="en-US/docs/DOM/window.mozInnerScreenY"><code>mozInnerScreenY</code></a> properties on DOM windows have been added; these return the screen coordinates of the top-left corner of the window's viewport.</li>
+ <li>The new <code>mozScreenPixelsPerCSSPixel</code> attribute on the <code><a href="/de/docs/XPCOM_Interface_Referenz/nsIDOMWindowUtils" title="">nsIDOMWindowUtils</a></code> interface, accessible only to chrome, provides a conversion factor between CSS pixels and screen pixels; this value can vary based on the zoom level of the content.</li>
+ <li>When the page's URI's document fragment identifier (the part after the "#" (hash) character) changes, a new <code>hashchange</code> event is sent to the page. See <a class="internal" href="/en-US/docs/DOM/window.onhashchange" title="window.onhashchange">window.onhashchange</a> for more information. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=385434" title="FIXED: Add support for HTML5 onhashchange (event for named anchor changes)">Bug 385434</a></li>
+ <li>The attribute <a class="internal" href="/en-US/docs/DOM/document.readyState" title="en-US/docs/DOM/document.readyState"><code>document.readyState</code></a> is now supported. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=347174" title='FIXED: Implement document.readystate == "complete"'>Bug 347174</a></li>
+ <li>Support for HTML5's <code><a class="internal" href="/en-US/docs/DOM/element.classList" title="element.classList">element.classList</a></code> to allow easier handling of the class attribute. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=501257" title="FIXED: Implement HTML 5's HTMLElement.classList property">Bug 501257</a></li>
+ <li><code>localName</code> and <code>namespaceURI</code> in HTML documents now behave like they do in XHTML documents: <code>localName</code> returns in lower case and <code>namespaceURI</code> for HTML elements is <code>"<a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a>"</code>.</li>
+ <li><a href="/en-US/docs/DOM/element.getElementsByTagNameNS" title="en-US/docs/DOM/element.getElementsByTagNameNS"><code>element.getElementsByTagNameNS</code></a> no longer lowercases its argument, so upper-case ASCII letters in the argument make matches against HTML elements fail. The same is true for <a href="/en-US/docs/DOM/document.getElementsByTagNameNS" title="en-US/docs/DOM/document.getElementsByTagNameNS"><code>document.getElementsByTagNameNS</code></a>.</li>
+ <li>Support has been added for addresses in geolocation via the <code><a href="/de/docs/XPCOM_Interface_Referenz/nsIDOMGeoPositionAddress" title="">nsIDOMGeoPositionAddress</a></code> interface and a new field added to <code><a href="/de/docs/XPCOM_Interface_Referenz/nsIDOMGeoPosition" title="">nsIDOMGeoPosition</a></code>.</li>
+ <li>The <a href="/de/docs/Web/API/Window/getComputedStyle" title="Die Methode Window.getComputedStyle() gibt ein Objekt zurück, das alle CSS-Eigenschaften eines Elements enthält; und zwar nachdem alle aktiven Stylesheets geladen und Basisberechungen ausgeführt wurden."><code>window.getComputedStyle</code></a> function now returns quotes within <code>url()</code> values.</li>
+</ul>
+
+<h3 id="XPath">XPath</h3>
+
+<dl>
+ <dt>The choose() XPath method is now supported</dt>
+ <dd>The <a href="/en-US/docs/XPath/Functions/choose" title="en-US/docs/XPath/Functions/choose"><code>choose()</code></a> method is now supported by our implementation of <a href="/en-US/docs/XPath" title="en-US/docs/XPath">XPath</a>.</dd>
+</dl>
+
+<h2 id="For_XUL_and_add-on_developers">For XUL and add-on developers</h2>
+
+<p>If you're an extension developer, you should start by reading <a class="internal" href="/en-US/docs/Updating_extensions_for_Firefox_3.6" title="en-US/docs/Updating extensions for Firefox 3.6">Updating extensions for Firefox 3.6</a>, which offers a helpful overview of what changes may affect your extension. Plug-in developers should read <a class="internal" href="/en-US/docs/Updating_plug-ins_for_Firefox_3.6" title="en-US/docs/Updating plug-ins for Firefox 3.6">Updating plug-ins for Firefox 3.6</a>.</p>
+
+<h3 id="New_features">New features</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Detecting_device_orientation" title="en-US/docs/Detecting device orientation">Detecting device orientation</a></dt>
+ <dd>Content can now detect the orientation of the device if it has a supported accelerometer, using the <a href="/en-US/docs/DOM/MozOrientation" title="en-US/docs/DOM/MozOrientation"><code>MozOrientation</code></a> event. Firefox 3.6 supports the accelerometer in Mac laptops.</dd>
+ <dt><a href="/en-US/docs/Monitoring_HTTP_activity" title="en-US/docs/Monitoring HTTP activity">Monitoring HTTP activity</a></dt>
+ <dd>You can now monitor HTTP transactions to observe requests and responses in real time.</dd>
+ <dt><a href="/en-US/docs/Working_with_the_Windows_taskbar" title="en-US/docs/Working with the Windows taskbar">Working with the Windows taskbar</a></dt>
+ <dd>It's now possible to customize the appearance of windows in the taskbar in Windows 7 or later. <em>This has been disabled by default in Firefox 3.6.</em></dd>
+</dl>
+
+<h3 id="Places">Places</h3>
+
+<ul>
+ <li>Places queries can now use the <code>redirectsMode</code> attribute on the <code><a href="/de/docs/XPCOM_Interface_Referenz/nsINavHistoryQueryOptions" title="">nsINavHistoryQueryOptions</a></code> interface to specify whether or not to include redirected pages in results.</li>
+ <li>Added the new <code><a href="https://developer.mozilla.org/de/docs/XPCOM_Interface_Reference/nsIFaviconService#expireAllFavicons()">nsIFaviconService.expireAllFavicons()</a></code> method to the <code><a href="/de/docs/XPCOM_Interface_Referenz/nsIFaviconService" title="">nsIFaviconService</a></code> interface.</li>
+</ul>
+
+<h3 id="Storage">Storage</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Storage#Collation_(sorting)" title="en-US/docs/Storage#Collation (sorting)">Locale-aware collation of data is now supported by the Storage API</a></dt>
+ <dd>Gecko 1.9.2 added several new collation methods to provide optimized collation (sorting) of results using locale-aware techniques.</dd>
+ <dt><a href="/en-US/docs/mozIStorageStatementParams#Enumeration_of_properties" title="en-US/docs/mozIStorageStatementParams#Enumeration of properties">Properties on a statement can now be enumerated</a></dt>
+ <dd>You can now use a <code><a class="internal" href="/en-US/docs/JavaScript/Reference/Statements/for...in" title="en-US/docs/Core JavaScript 1.5 Reference/Statements/For...in">for..in</a></code> enumeration to enumerate all the properties on a statement.</dd>
+ <dt>mozIStorageStatement's getParameterIndex changed behavior between 3.5 and 3.6.</dt>
+ <dd>See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=528166" title="mozIStorageStatement getParameterIndex causes NS_ERROR_ILLEGAL_VALUE">Bug 528166</a> for details.</dd>
+ <dt>Asynchronously bind multiple sets of parameters and execute a statement.</dt>
+ <dd>See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=490085" title="FIXED: Add ability to bind multiple sets of parameters and execute asynchronously">Bug 490085</a> for details. Documentation coming soon.</dd>
+</dl>
+
+<h3 id="Preferences">Preferences</h3>
+
+<ul>
+ <li>The <code><a href="/de/docs/XPCOM_Interface_Referenz/nsIContentPrefService" title="">nsIContentPrefService</a></code> interface has two new methods: <code><a href="https://developer.mozilla.org/de/docs/XPCOM_Interface_Reference/nsIContentPrefService#getPrefsByName()">nsIContentPrefService.getPrefsByName()</a></code> and <code><a href="https://developer.mozilla.org/de/docs/XPCOM_Interface_Reference/nsIContentPrefService#removePrefsByName()">nsIContentPrefService.removePrefsByName()</a></code>.</li>
+</ul>
+
+<h3 id="Themes">Themes</h3>
+
+<p>See <a class="internal" href="/en-US/docs/Updating_themes_for_Firefox_3.6" title="en-US/docs/Updating themes for Firefox 3.6">Updating themes for Firefox 3.6</a> for a list of changes related to themes.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Themes/Lightweight_themes" title="en-US/docs/Themes/Lightweight themes">Lightweight themes</a></dt>
+ <dd>Firefox 3.6 supports lightweight themes; these are easy-to-create themes that simply apply a background to the top (URL bar and button bar) and bottom (status bar) of browser windows. This is an integration of the existing <a class="external" href="http://www.getpersonas.com/" title="http://www.getpersonas.com/">Personas</a> theme architecture into Firefox.</dd>
+</dl>
+
+<h3 id="Miscellaneous">Miscellaneous</h3>
+
+<ul>
+ <li>Firefox will no longer load third-party components installed in its internal components directory. This helps to ensure stability by preventing buggy third-party components from being executed. Developers that install components this way must <a href="/en-US/docs/Migrating_raw_components_to_add-ons" title="en-US/docs/Migrating raw components to add-ons">repackage their components as XPI packages</a> so they can be installed as standard add-ons.</li>
+ <li><code>contents.rdf</code> is no longer supported for registering chrome in extensions. You must now use the <a class="internal" href="/en-US/docs/Install_Manifests" title="en-US/docs/Install manifests"><code>chrome.manifest</code></a> file instead. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=492008" title="FIXED: Drop support for contents.rdf chrome registrations">Bug 492008</a>.</li>
+ <li>Added support for hiding the menu bar automatically. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=477256" title="FIXED: Implement menubar auto-hiding in toolkit">Bug 477256</a>.</li>
+ <li>Added support for the <code>container-live-role</code> attribute to objects. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=391829" title="FIXED: Add support for container-live-role to object attributes">Bug 391829</a>.</li>
+ <li>The <code>tabs-closebutton</code> binding has been removed. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=500971" title="FIXED: Remove obsolete tabs-closebutton binding">Bug 500971</a>.</li>
+ <li>Added support to <code><a href="/de/docs/XPCOM_Interface_Referenz/nsISound" title="">nsISound</a></code> for playing sounds based on events that have occurred. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=502799" title="FIXED: add new nsISound method for the event sounds">Bug 502799</a>.</li>
+ <li>The syntax for the <code><a href="/de/docs/XPCOM_Interface_Referenz/nsITreeView" title="">nsITreeView</a></code> methods <code><a href="https://developer.mozilla.org/de/docs/XPCOM_Interface_Reference/nsITreeView#canDrop()">nsITreeView.canDrop()</a></code> and <code><a href="https://developer.mozilla.org/de/docs/XPCOM_Interface_Reference/nsITreeView#drop()">nsITreeView.drop()</a></code> has changed to support the new drag &amp; drop API introduced in Gecko 1.9. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=455590" title="FIXED: Allow new dnd api with tree views">Bug 455590</a>.</li>
+ <li>Added support to snap the mouse cursor to the default button of dialog or wizard on Windows, see <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=76053" title='FIXED: Windows mouse integration: "Snap to default button in dialog boxes"'>Bug 76053</a>. This is processed automatically by dialog and wizard element. But if a XUL application creates a window using the <code>window</code> element and it has a default button, it needs to call <code><a href="https://developer.mozilla.org/de/docs/XPCOM_Interface_Reference/nsIDOMChromeWindow#notifyDefaultButtonLoaded()">nsIDOMChromeWindow.notifyDefaultButtonLoaded()</a></code> during the window's <code>onload</code> event handler.</li>
+ <li>The <code><a href="/de/docs/XPCOM_Interface_Referenz/nsILocalFileMac" title="">nsILocalFileMac</a></code> interface has had two methods removed: <code>setFileTypeAndCreatorFromMIMEType()</code> and <code>setFileTypeAndCreatorFromExtension()</code>.</li>
+ <li>The new <a class="internal" href="/en-US/docs/JavaScript_code_modules/NetUtil.jsm" title="en-US/docs/JavaScript code modules/NetUtil.jsm"><code>NetUtils.jsm</code></a> code module provides an easy-to-use method for asynchronously copying data from an input stream to an output stream.</li>
+ <li>The new <a class="internal" href="/en-US/docs/JavaScript_code_modules/openLocationLastURL.jsm" title="en-US/docs/JavaScript code modules/openLocationLastURL.jsm"><code>openLocationLastURL.jsm</code></a> code module makes it easy to read and change the value of the "Open Location" dialog box's remembered URL while properly taking private browsing mode into account.</li>
+ <li>On Windows, the <code><a href="/de/docs/XPCOM_Interface_Referenz/nsIScreen" title="">nsIScreen</a></code> interface now reports 24 bit per pixel color depths when the graphics driver claims 32 bits, since 24 more accurately represents the actual number of color pixels in use.</li>
+ <li>Menu bars can now be hidden on Windows, using the new <code id="a-autohide"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/autohide">autohide</a></code> attribute on the <code><a href="/de/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code> XUL element.</li>
+ <li>The <span id="m-loadOneTab"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/loadOneTab">loadOneTab</a></code></span> and <span id="m-addTab"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/addTab">addTab</a></code></span> methods now accept a new <code>relatedToCurrent</code> parameter and, in addition, allow the parameters to be specified by name, since nearly all of the parameters are optional.</li>
+ <li>The "<a href="/en-US/docs/Install_Manifests#hidden" title="en-US/docs/Install Manifests#hidden">hidden</a>" property is no longer supported in install manifests; it's no longer possible to prevent the user from seeing add-ons in the add-on manager window.</li>
+ <li>The <code>@mozilla.org/webshell;1</code> component no longer exists; you need to use <code>@mozilla.org/docshell;1</code> instead.</li>
+ <li>You can now register with the update-timer category to schedule timer events without having to instantiate the object that the timer will eventually call into; it will instead be instantiated when it's needed. See <code><a href="https://developer.mozilla.org/de/docs/XPCOM_Interface_Reference/nsIUpdateTimerManager#registerTimer()">nsIUpdateTimerManager.registerTimer()</a></code> for details.</li>
+ <li>The <a href="/en-US/docs/NPN_GetValue" title="en-US/docs/NPN GetValue"><code>NPN_GetValue()</code></a> function no longer provides access to XPCOM through the variable values <code>NPNVserviceManager</code>, <code>NPNVDOMelement</code>, and <code>NPNVDOMWindow</code>. This is part of the work toward making plugins run in separate processes in a future version of Gecko.</li>
+ <li>Plugins are no longer scriptable through XPCOM (IDL) interfaces, <a href="/en-US/docs/Gecko_Plugin_API_Reference/Scripting_plugins" title="en-US/docs/Gecko Plugin API Reference:Scripting plugins">NPRuntime</a> is the API to use for making plugins scriptable, and <a href="/en-US/docs/NPP_GetValue" title="en-US/docs/NPP GetValue"><code>NPP_GetValue()</code></a> is no longer called to with the value <code>NPPVpluginScriptableInstance</code> or <code>NPPVpluginScriptableIID</code>. This is part of the work toward making plugins run in separate processes in a future version of Gecko.</li>
+</ul>
+
+<h2 id="For_FirefoxGecko_developers">For Firefox/Gecko developers</h2>
+
+<p>Certain changes are only really interesting if you work on the internals of Firefox itself.</p>
+
+<h3 id="Interfaces_merged">Interfaces merged</h3>
+
+<p>The following interfaces have been combined together:</p>
+
+<ul>
+ <li><code>nsIPluginTagInfo2</code> has been merged into <code>nsIPluginTagInfo</code>.</li>
+ <li><code>nsIPluginInstanceInternal</code>, <code>nsIPPluginInstancePeer</code>, <code>nsIPluginInstancePeer1</code>, <code>nsIPluginInstancePeer2</code>, and <code>nsIPluginInstancePeer3</code> have all been merged into <code>nsIPluginInstance</code>.</li>
+ <li><code>nsIWindowlessPlugInstPeer</code> has been merged into <code>nsIPluginInstance</code>.</li>
+ <li><code>nsIPluginManager</code> and <code>nsIPluginManager2</code> have been merged into <code>nsIPluginHost</code>.</li>
+</ul>
+
+<h3 id="Interfaces_removed">Interfaces removed</h3>
+
+<p>The following interfaces have been removed entirely because they were unused, unimplemented, or obsolete:</p>
+
+<ul>
+ <li><code>nsIFullScreen</code></li>
+ <li><code>nsIDOMSVGListener</code></li>
+ <li><code>nsIDOMSVGZoomListener</code></li>
+ <li><code>nsIInternetConfigService</code></li>
+ <li><code>nsIDKey</code></li>
+ <li><code>nsIEventHandler</code></li>
+ <li><code>nsIJRILiveConnectPIPeer</code></li>
+ <li><code>nsIJRILiveConnectPlugin</code></li>
+ <li><code>nsIScriptablePlugin</code></li>
+ <li><code>nsIClassicPluginFactory</code></li>
+ <li><code>nsIFileUtilities</code></li>
+</ul>
+
+<h3 id="Interfaces_moved">Interfaces moved</h3>
+
+<p>The following interfaces have been relocated from their previous IDL files into new ones:</p>
+
+<ul>
+ <li><code>nsIDOMNSCSS2Properties</code> is now located in its own IDL file (<code>dom/interfaces/css/nsIDOMCSS2Properties.idl</code>).</li>
+ <li><code><a href="/de/docs/XPCOM_Interface_Referenz/nsIUpdateTimerManager" title="">nsIUpdateTimerManager</a></code> is now located in its own IDL file.</li>
+</ul>
+
+<p>A large number of interfaces have been moved. See <a href="/en-US/docs/Interfaces_moved_in_Firefox_3.6" title="en-US/docs/Interfaces moved in Firefox 3.6">Interfaces moved in Firefox 3.6</a> for a complete list.</p>
+
+<h3 id="Other_interface_changes">Other interface changes</h3>
+
+<p>The following assorted changes have been made:</p>
+
+<ul>
+ <li>The <code>nsIPlugin</code> interface now inherits from <code><a href="/de/docs/XPCOM_Interface_Referenz/nsISupports" title="">nsISupports</a></code> instead of <code><a href="/de/docs/XPCOM_Interface_Referenz/nsIFactory" title="">nsIFactory</a></code>.</li>
+ <li>The <code>nsIPluginHost</code> interface now inherits from <code><a href="/de/docs/XPCOM_Interface_Referenz/nsISupports" title="">nsISupports</a></code> instead of <code><a href="/de/docs/XPCOM_Interface_Referenz/nsIFactory" title="">nsIFactory</a></code>.</li>
+ <li>The <code>nsIFrame</code> interface now inherits from <code>nsQueryFrame</code> instead of <code><a href="/de/docs/XPCOM_Interface_Referenz/nsISupports" title="">nsISupports</a></code>.</li>
+ <li>The <code><a href="/de/docs/XPCOM_Interface_Referenz/nsIDeviceContext" title="">nsIDeviceContext</a></code> method <code>getPaletteInfo()</code> has been removed, as it was never implemented.</li>
+ <li>The <code><a href="/de/docs/XPCOM_Interface_Referenz/nsIScriptContext" title="">nsIScriptContext</a></code> method <code>reportPendingException()</code> has been removed, since it was no longer being used.</li>
+</ul>
+
+<h3 id="Changes_in_accessibility_code">Changes in accessibility code</h3>
+
+<ul>
+ <li>The <span style="font-family: monospace;">EVENT</span><code>_REORDER</code> <a href="/en-US/docs/XPCOM_Interface_Reference/nsIAccessibleEvent" title="en-US/docs/XPCOM Interface Reference/nsIAccessibleEvent">accessibility event</a> is now sent when the children of frames and iframes change, as well as when the main document's children change. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=420845" title="FIXED: Fire event_reorder on any embedded frames/iframes whos document has just loaded.">Bug 420845</a>.</li>
+ <li>The <code><a href="https://developer.mozilla.org/de/docs/XPCOM_Interface_Reference/nsIAccessibleTable#selectRow()">nsIAccessibleTable.selectRow()</a></code> now correctly removes any current selection before selecting the specified row.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<div><div class="multiColumnList">
+<ul>
+<li><a href="/de/docs/Mozilla/Firefox/Releases/3.5">Firefox 3.5 for developers</a></li><li><a href="/de/docs/Mozilla/Firefox/Releases/3">Firefox 3 for developers</a></li><li><a href="/de/docs/Mozilla/Firefox/Releases/2">Firefox 2 for developers</a></li><li><a href="/de/docs/Mozilla/Firefox/Releases/1.5">Firefox 1.5 for developers</a></li></ul>
+</div></div>
diff --git a/files/de/mozilla/firefox/releases/34/index.html b/files/de/mozilla/firefox/releases/34/index.html
new file mode 100644
index 0000000000..b0fcd927ab
--- /dev/null
+++ b/files/de/mozilla/firefox/releases/34/index.html
@@ -0,0 +1,107 @@
+---
+title: Firefox 34 für Entwickler
+slug: Mozilla/Firefox/Releases/34
+tags:
+  - Firefox
+  - Releases
+translation_of: Mozilla/Firefox/Releases/34
+---
+<div>{{FirefoxSidebar}}</div><p>Möchtest du helfen Firefox 34 zu dokumentieren? Schaue dir die <a href="http://beta.elchi3.de/doctracker/#list=fx&amp;version=34.0">Liste der Bugs an, über die noch geschrieben werden muss</a>.</p>
+
+<h2 id="Änderungen_für_Webentwickler">Änderungen für Webentwickler</h2>
+
+<h3 id="Entwickler_Werkzeuge">Entwickler Werkzeuge</h3>
+
+<p>Höhepunkte:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Storage_Inspector">Storage Inspector: a new tool enabling you to view data stored by web pages</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Performance">Performance tool: revamped Profiler UI and frame rate timeline</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/tools/Working_with_iframes">Frame switching: point the developer tools at a specific iframe in the page</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Console.table">console.table support</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector#Examining_event_listeners">jQuery events are visible in the Page Inspector</a></li>
+</ul>
+
+<p><a class="external-icon external" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&amp;chfieldto=2014-09-02&amp;chfield=resolution&amp;query_format=advanced&amp;chfieldfrom=2014-07-21&amp;chfieldvalue=FIXED&amp;component=Developer%20Tools&amp;component=Developer%20Tools%3A%203D%20View&amp;component=Developer%20Tools%3A%20Canvas%20Debugger&amp;component=Developer%20Tools%3A%20Console&amp;component=Developer%20Tools%3A%20Debugger&amp;component=Developer%20Tools%3A%20Framework&amp;component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&amp;component=Developer%20Tools%3A%20Inspector&amp;component=Developer%20Tools%3A%20Memory&amp;component=Developer%20Tools%3A%20Netmonitor&amp;component=Developer%20Tools%3A%20Object%20Inspector&amp;component=Developer%20Tools%3A%20Profiler&amp;component=Developer%20Tools%3A%20Responsive%20Mode&amp;component=Developer%20Tools%3A%20Scratchpad&amp;component=Developer%20Tools%3A%20Source%20Editor&amp;component=Developer%20Tools%3A%20Storage%20Inspector&amp;component=Developer%20Tools%3A%20Style%20Editor&amp;component=Developer%20Tools%3A%20Timeline&amp;component=Developer%20Tools%3A%20User%20Stories&amp;component=Developer%20Tools%3A%20Web%20Audio%20Editor&amp;component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&amp;component=Developer%20Tools%3A%20WebIDE&amp;component=Simulator&amp;product=Firefox&amp;product=Firefox%20OS&amp;list_id=11184176">All devtools bugs fixed between Firefox 33 and Firefox 34</a>.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<ul>
+ <li>Unsere experimentelle Implementierung der CSS Schriftarten Level 3 schreitet voran. Neu implementierte Funktionen sind:
+  <ul>
+   <li>Der Fallback Algorithmus von {{cssxref("font-variant-position")}}, erstellt synthetische Alternativen für fehlende Glyphen, basierend auf den subscript and superscript metrics supplied by the font ({{bug(1024804)}}).</li>
+   <li>Das <code>layout.css.font-features.enabled</code> wurde entfernt, was beudeutet, dass die folgenden Eigenschaften standartmäßig aktiviert sind :
+    <ul>
+     <li>The CSS Font Level 3 version of {{cssxref("font-variant")}} which is now a shorthand property.</li>
+     <li>The longhand properties {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-ligatures")}}, and {{cssxref("font-variant-alternates")}}.</li>
+     <li>The properties {{cssxref("font-kerning")}} and {{cssxref("font-synthesis")}}</li>
+     <li>The properties {{cssxref("font-feature-settings")}} and {{cssxref("font-language-override")}} are unprefixed. The prefixed version are still available for some time to ease transition.</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+ <li>To reflect the latest specification changes, the value <code>auto</code> has been renamed in <code>main-size</code> on the {{cssxref("flex-basis")}} property. The shorthand {{cssxref("flex")}} keep an <code>auto</code> value, but it is a synonym of <code>1 1 main-size</code> ({{bug(1032922)}}). The value used for the longhand {{cssxref("flex-basis")}} when omitted in the shorthand is now  <code>0%</code>, and the one for {{cssxref("flex-growth")}} is now <code>1</code>, both different than their initial value.</li>
+ <li>The value <code>auto</code> has been added to {{cssxref("min-width")}} and {{cssxref("min-height")}} with a different behavior than the last time ({{bug(984711)}} and {{bug(1015474)}}).</li>
+ <li>An experimental implementation, disabled by default, of the filter functional values of the {{cssxref("filter")}} property have been implemented. It is controlled by the <code>layout.css.filters.enabled</code> pref. ({{bug(948265)}})</li>
+</ul>
+
+<h3 id="HTML">HTML</h3>
+
+<p><em>Keine Veränderungen.</em></p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<ul>
+ <li>The ES6 syntax for <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names">computed property names on object literals</a> has been implemented ({{bug(924688)}}).
+
+  <ul>
+   <li>This includes <a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a> method names as well ({{bug(1048384)}}) and can also be used with <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Computed_object_property_names_and_destructuring">destructuring</a>.</li>
+  </ul>
+ </li>
+ <li>The ES6<a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions"> shorthand syntax for defining methods</a> on objects has been implemented ({{bug(924672)}}).</li>
+ <li>The ES6 <code>Object</code> method {{jsxref("Object.assign", "Object.assign()")}} has been implemented ({{bug(937855)}}).</li>
+ <li>ES6 <a href="/en-US/docs/Web/JavaScript/Reference/template_strings">template strings</a> and the {{jsxref("String.raw()")}} method are now supported ({{bug(1038259)}}, {{bug(1039774)}}).</li>
+ <li>A new ES6 object {{jsxref("WeakSet")}} has been added ({{bug(792439)}}).</li>
+ <li>ES6 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol">Symbols</a> (only available in the Nightly channel) have been updated to conform with recent specification changes ({{bug(1042602)}}):
+  <ul>
+   <li>When trying to convert a symbol to a number, a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypeError" title="The TypeError object represents an error when a value is not of the expected type."><code>TypeError</code></a> will be thrown now.</li>
+   <li>When using loose equality, <code>Object(sym) == sym</code> returns <code>true</code> now.</li>
+  </ul>
+ </li>
+ <li>The experimental {{jsxref("TypedArray.prototype.move()")}} method (only available in former Nightly and Aurora channels) has been replaced with the now implemented standard ES6 {{jsxref("TypedArray.prototype.copyWithin()")}} method ({{bug(1021379)}}).</li>
+ <li>In <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>, setting a <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Duplicate_property_names">duplicate property name in object literals</a> will no longer throw a <code>SyntaxError</code> as per ES6 specification ({{bug(1041128)}}).</li>
+</ul>
+
+<h3 id="InterfacesAPIsDOM">Interfaces/APIs/DOM</h3>
+
+<ul>
+ <li>The {{domxref("Element.matches()")}} method has been added; it does what the non-standard <code>mozMatchesSelector()</code> was doing ({{bug(886308)}}).</li>
+ <li>The {{domxref("URLUtils.searchParams", "searchParams")}} property has been added to the {{domxref("Location")}} interface, available via the {{domxref("document.location")}} and {{domxref("window.location")}} properties ({{bug(1037715)}}).</li>
+ <li>The {{domxref("Performance.now()")}} method is now available to Web workers ({{bug(908390)}}).</li>
+ <li>The non-standard interface <code>MozNamedAttrMap</code> has been renamed to the standard {{domxref("NamedNodeMap")}} and {{domxref("Element.attributes")}} has been adapted to use it ({{bug(1055467)}}).</li>
+ <li>The non-standard methods and properties of {{domxref("Window.crypto")}} have been removed ({{bug(1030963)}}). Only methods and properties defined in the standard WebCrypto API are left.</li>
+</ul>
+
+<h3 id="MathML">MathML</h3>
+
+<p><em>Keine Veränderungen.</em></p>
+
+<h3 id="SVG">SVG</h3>
+
+<p><em>Keine Veränderungen.</em></p>
+
+<h3 id="AudioVideo">Audio/Video</h3>
+
+<p><em>Keine Veränderungen</em><em>.</em></p>
+
+<h2 id="Sicherheit">Sicherheit</h2>
+
+<p><em>Keine Veränderungen</em><em>.</em></p>
+
+<h2 id="Änderungen_für_Add-on_und_Mozilla_Entwickler">Änderungen für Add-on und Mozilla Entwickler</h2>
+
+<p><em>Keine Veränderungen</em><em>.</em></p>
+
+<h2 id="Ältere_Versionen">Ältere Versionen</h2>
+
+<p>{{Firefox_for_developers('33')}}</p>
diff --git a/files/de/mozilla/firefox/releases/47/index.html b/files/de/mozilla/firefox/releases/47/index.html
new file mode 100644
index 0000000000..cf76445536
--- /dev/null
+++ b/files/de/mozilla/firefox/releases/47/index.html
@@ -0,0 +1,174 @@
+---
+title: Firefox 47 for developers
+slug: Mozilla/Firefox/Releases/47
+translation_of: Mozilla/Firefox/Releases/47
+---
+<div>{{FirefoxSidebar}}</div><p> </p>
+
+<p><a href="https://www.mozilla.org/firefox/developer/" style="float: right; margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">To test the latest developer features of Firefox,<br>
+ install Firefox Developer Edition</a>Firefox 47 was released on June 6, 2016. This article lists key changes that are useful not only for web developers, but also Firefox and Gecko developers as well as add-on developers.</p>
+
+<h2 id="Changes_for_Web_developers">Changes for Web developers</h2>
+
+<h3 id="Developer_Tools">Developer Tools</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Browser_detection_using_the_user_agent">User-agent spoofing</a> from the <a href="https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Mode">Responsive mode</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Memory/Dominators_view#Retaining_Paths_panel">Retaining paths panel</a> in memory tool</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker">Service workers</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/Push_API">Push API</a> debugging
+  <ul>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Tools/about:debugging">about:debugging</a> dashboard for workers</li>
+   <li>Cached requests are now shown in <a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor">Network Monitor</a></li>
+   <li>Support for <a href="https://developer.mozilla.org/en-US/docs/Web/API/Cache">cache storage</a> in <a href="https://developer.mozilla.org/en-US/docs/Tools/Storage_Inspector">Storage Inspector</a></li>
+  </ul>
+ </li>
+ <li>Ability to filter <a href="https://developer.mozilla.org/en-US/docs/Tools/Storage_Inspector">Storage Inspector</a> entries</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console">Console</a> now detects incomplete input and switches multi-line mode</li>
+ <li>Updated breakpoint style in <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger">Debugger</a></li>
+ <li>Prevent panels from hiding automatically using the <a href="https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox">Browser Toolbox</a>, to aid browser and add-on debugging</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/UI_Tour#Fonts_view">Font inspector</a> has been disabled by default</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/3D_View">3D view</a> has been removed</li>
+ <li>Developer tools theme refresh</li>
+ <li>Disable the Font Panel ({{bug(1247723)}}).</li>
+</ul>
+
+<h3 id="HTML">HTML</h3>
+
+<p><em>No change.</em></p>
+
+<h3 id="CSS">CSS</h3>
+
+<ul>
+ <li>Support for the {{cssxref("::backdrop")}} pseudo-element has been added ({{bug(1064843)}}).</li>
+ <li>The case-insensitive modifier <code>i</code> (like in <code>[foo=bar i]</code>) for <a href="/en-US/docs/Web/CSS/Attribute_selectors">attribute selectors</a> has been implemented ({{bug(888190)}}).</li>
+ <li>An experimental implementation of CSS Mask Image properties landed. For the moment, this will only be available on Nightly versions of Firefox.y: shorthand version of {{cssxref("mask")}}, as well as {{cssxref("mask-repeat")}}, {{cssxref("mask-position")}}, {{cssxref("mask-size")}} are now available ({{bug(686281)}}).</li>
+ <li>The {{cssxref("clip-path")}} property now experimentally supports <code>polygon()</code>, <code>ellipse()</code>, and <code>circle()</code> on HTML elements (does not support <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1246762">inset()</a> and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1246764">path()</a>), behind the pref <code>layout.css.clip-path-shapes.enabled</code> that defaults to <code>false</code> ({{bug(1075457)}}). Interpolation (and therefore animation) of these values is not yet supported.</li>
+ <li>Our still experimental grid implementation has been updated:
+  <ul>
+   <li>{{cssxref("align-content")}}: <code>normal</code> behaves now as <code>stretch</code> for grid containers ({{bug(1237754)}}).</li>
+   <li>The order of column/row values for {{cssxref('grid')}}, {{cssxref('grid-template')}}, and {{cssxref('grid-gap')}} properties has been swapped ({{bug(1251999)}}).</li>
+  </ul>
+ </li>
+ <li>The {{cssxref("@media/display-mode", "display-mode")}} media feature is now supported ({{bug("1104916")}}).</li>
+ <li>The value <code>true</code> of {{cssxref("text-align")}} and {{cssxref("text-align-last")}} has been renamed to <code>unsafe</code> ({{bug("1250342")}}).</li>
+</ul>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<ul>
+ <li>The new ES2017 {{jsxref("Object.values()")}} and {{jsxref("Object.entries()")}} methods have been implemented ({{bug(1232639)}}).</li>
+ <li>The deprecated <a href="/en-US/docs/Archive/Web/Old_Proxy_API">old Proxy API</a> (<code>Proxy.create</code> and <code>Proxy.createFunction</code>) now presents a deprecation warning in the console and will be removed in a future version. Use the standard {{jsxref("Proxy")}} object instead ({{bug(892903)}}).</li>
+ <li>Support for the deprecated non-standard <code>flags</code> argument of <code>String.prototype.</code>{{jsxref("String.prototype.match", "match")}}/{{jsxref("String.prototype.search", "search")}}/{{jsxref("String.prototype.replace", "replace")}} has been dropped in non-release builds ({{bug(1245801)}}).</li>
+ <li>As per the new ES2016 specification, the {{jsxref("Proxy")}} <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/enumerate">enumerate</a> trap for <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code> statements has been removed ({{bug(1246318)}}).</li>
+ <li>The {{jsxref("Array.prototype.indexOf()")}} and {{jsxref("Array.prototype.lastIndexOf()")}} methods (and their {{jsxref("TypedArray")}} equivalents) have been updated to never return <code>-0</code> as per the ECMAScript specification ({{bug(1242043)}}).</li>
+</ul>
+
+<h3 id="InterfacesAPIsDOM">Interfaces/APIs/DOM</h3>
+
+<h4 id="DOM_HTML_DOM">DOM &amp; HTML DOM</h4>
+
+<ul>
+ <li>The property {{domxref("Document.scrollingElement")}} has been implemented behind the pref <code>dom.document.scrollingElement.enabled</code> that defaults to <code>false</code> ({{bug(1153322)}}).</li>
+</ul>
+
+<h4 id="WebGL">WebGL</h4>
+
+<p><em>No change.</em></p>
+
+<h4 id="IndexedDB">IndexedDB</h4>
+
+<ul>
+ <li>The {{domxref("IDBKeyRange.includes()")}} method has been implemented ({{bug("1251498")}}).</li>
+</ul>
+
+<h4 id="Service_Worker_and_related_APIs">Service Worker and related APIs</h4>
+
+<ul>
+ <li>The {{domxref("Request.Request()")}} constructor can now accept a referrer option in its init object ({{bug(1251448)}}).</li>
+ <li>The {{domxref("Request.referrerPolicy")}} property is now supported ({{bug(1251872)}}).</li>
+ <li>
+  <p><a href="/en-US/docs/Web/API/Service_Worker_API">Service workers</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/Push_API">Push</a> have been disabled in the <a class="external external-icon" href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR) ({{bug(1232029)}}).</p>
+ </li>
+</ul>
+
+<h4 id="WebRTC">WebRTC</h4>
+
+<ul>
+ <li>Support for the {{domxref("RTCIceServer")}} dictionary has been updated in keeping with revisions to the WebGL 1.0 specification by adding support for the {{domxref("RTCIceServer.credentialType", "credentialType")}} property. This property is a string which specifies whether the credential is a password or a token. Currently, Firefox only supports <code>"password"</code>.</li>
+</ul>
+
+<h4 id="New_APIs">New APIs</h4>
+
+<p><em>No change.</em></p>
+
+<h4 id="Others">Others</h4>
+
+<ul>
+ <li>{{domxref("Cache.add()")}} and {{domxref("Cache.addAll()")}} now raises a <code>TypeError</code> exception if the response status is not in the <code>200</code> range ({{bug(1244764)}}).</li>
+ <li>The <a href="/en-US/docs/Mozilla/Firefox_OS/API/App_installation_and_management_APIs">App installation and management APIs</a> (<code>navigator.mozApps.*</code>) are no longer exposed to non-Firefox OS platforms ({{bug("1238576")}}).</li>
+ <li><a href="/en-US/docs/Web/API/Web_Crypto_API">Web Crypto API</a> methods can now use the RSA-PSS cryptographic algorithm ({{bug (1191936)}}).</li>
+ <li>The <a href="/en-US/docs/Web/API/Permissions_API">Permissions API</a> has had the {{domxref("Permissions.revoke()")}} method added ({{bug("1197461")}}).</li>
+ <li>The <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>, which extends the functionality of {{htmlelement("iframe")}}s to allow the creation of frames for displaying web content using HTML — and was previously only available in Firefox OS — is now available to desktop chrome code too ({{bug(1238160)}}).</li>
+ <li>The <a href="/en-US/docs/Web/API/notification">Notification API</a>'s {{domxref("Notification.requestPermission()","requestPermission()")}} method has been updated from a callback to a promised-based syntax ({{bug(1241278)}}).</li>
+ <li>The <a href="/en-US/docs/Web/API/Fullscreen_API">Fullscreen API</a> has been updated to the latest spec and unprefixed. Some methods have been renamed or have seen their capitalisation changed ({{bug(743198)}}). Note that this is not yet activated by default by behind the <code>full-screen-api.unprefix.enabled</code> preference ({{bug(1268749)}}).</li>
+</ul>
+
+<h3 id="AudioVideo">Audio/Video</h3>
+
+<ul>
+ <li>Now WAV file with u-law compression encoding can be played({{bug(851530)}}).</li>
+ <li><a href="https://www.widevine.com/">Widevine</a> Content Decryption Module provided by Google Inc. is available via the <a href="/en-US/docs/Web/API/Encrypted_Media_Extensions_API">Encrypted Media Extensions API</a> for use with MP4 (only; see {{bug(1257716)}} for EME-with-WebM support) on Windows Vista and later and on Mac OS X enabling migration off Silverlight ({{bug(1265270)}}).</li>
+</ul>
+
+<h2 id="HTTP">HTTP</h2>
+
+<p><em>No change.</em></p>
+
+<h2 id="Networking">Networking</h2>
+
+<p><em>No change.</em></p>
+
+<h2 id="Security">Security</h2>
+
+<ul>
+ <li>URL with the <code>view-source:</code> protocol don't open the <a href="/en-US/docs/Tools/View_source">View Source</a> tool anymore when used from a Web page ({{bug(1172165)}}).</li>
+ <li>The Firefox <a href="https://blog.mozilla.org/futurereleases/2013/09/24/plugin-activation-in-firefox/">click-to-activate plugin whitelist</a> has been removed: only Flash doesn't need to be clicked to be activated ({{bug(1263630)}}).</li>
+</ul>
+
+<h2 id="Changes_for_add-on_and_Mozilla_developers">Changes for add-on and Mozilla developers</h2>
+
+<h3 id="Interfaces">Interfaces</h3>
+
+<ul>
+ <li>The CSS tokenizer is now available in JavaScript for add-ons ({{bug(1152033)}}).</li>
+</ul>
+
+<h3 id="FUEL">FUEL</h3>
+
+<p>The <a href="/en-US/docs/Mozilla/Tech/Toolkit_API/FUEL">FUEL</a> JavaScript library, introduced back in Firefox 3, <strong>has been removed</strong>. This library was designed to aid in add-on development and with the introduction of the <a href="/en-US/docs/Mozilla/Add-ons/SDK">Add-on SDK</a> and, now, by <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a> support, is no longer useful. ({{bug(1090880)}})</p>
+
+<h3 id="XUL">XUL</h3>
+
+<p><em>No change.</em></p>
+
+<h3 id="JavaScript_code_modules">JavaScript code modules</h3>
+
+<p><em>No change.</em></p>
+
+<h3 id="XPCOM">XPCOM</h3>
+
+<p><em>No change.</em></p>
+
+<h3 id="Other">Other</h3>
+
+<p><em>No change.</em></p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://www.fxsitecompat.com/en-US/versions/47">Site Compatibility for Firefox 47</a></li>
+</ul>
+
+<h2 id="Older_versions">Older versions</h2>
+
+<p>{{Firefox_for_developers(46)}}</p>
diff --git a/files/de/mozilla/firefox/releases/5/index.html b/files/de/mozilla/firefox/releases/5/index.html
new file mode 100644
index 0000000000..febb262599
--- /dev/null
+++ b/files/de/mozilla/firefox/releases/5/index.html
@@ -0,0 +1,169 @@
+---
+title: Firefox 5 for developers
+slug: Mozilla/Firefox/Releases/5
+tags:
+  - Firefox
+  - Firefox 5
+  - Gecko 5.0
+  - NeedsTranslation
+  - TopicStub
+translation_of: Mozilla/Firefox/Releases/5
+---
+<div>{{FirefoxSidebar}}</div><p>Firefox 5, based on Gecko 5.0, was released on June 21, 2011. This article provides links to information about the changes that affect developers in this release.</p>
+
+<h2 id="Changes_for_web_developers">Changes for web developers</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<ul>
+ <li>All HTML elements now have the {{ domxref("element.accessKey", "accessKey") }} attribute, as well as the {{ domxref("element.blur()", "blur()") }}, {{ domxref("element.click()", "click()") }}, and {{ domxref("element.focus()", "focus()") }} methods. These are specified in the {{ domxref("HTMLElement") }} interface.</li>
+ <li>In order to comply with the HTML5 specification, support for the UTF-7 and UTF-32 <a href="/en/Character_Sets_Supported_by_Gecko" title="en/Character Sets Supported by Gecko">character sets</a> has been removed.</li>
+ <li>When in quirks mode, empty {{ HTMLElement("map") }}s are no longer skipped over in favor of non-empty ones when matching. See the <a href="/en/HTML/Element/map#Gecko_notes" title="en/HTML/Element/map#Gecko notes">Gecko notes</a> on the {{ HTMLElement("map") }} element for details.</li>
+ <li>Firefox mobile on Android now supports WOFF fonts for {{ cssxref("@font-face") }}.</li>
+ <li>WebGL <a href="/en/WebGL/Cross-Domain_Textures" title="en/WebGL/Cross-Domain Textures">no longer loads textures from domains other than the originating domain</a>, as a security measure. <a href="/En/HTTP_access_control" title="en/HTTP access control">HTTP access control</a> support should be coming sometime in the future to make this possible more securely.</li>
+</ul>
+
+<h4 id="Canvas_improvements">Canvas improvements</h4>
+
+<ul>
+ <li>The {{ HTMLElement("canvas") }} 2D drawing context now supports specifying an <code>ImageData</code> object as the input to the <code>createImageData()</code> method; this <a href="/En/HTML/Canvas/Pixel_manipulation_with_canvas#Creating_an_ImageData_object" title="En/HTML/Canvas/Pixel manipulation with canvas#Creating an ImageData object">creates a new <code>ImageData</code> object</a> initialized with the same dimensions as the specified object, but still with all pixels preset to transparent black. This was documented as implemented already but was not.</li>
+ <li>Specifying non-finite values when adding color stops through a call to the {{ domxref("CanvasGradient") }} method <code>addColorStop()</code> now correctly throws <code>INDEX_SIZE_ERR</code> instead of <code>SYNTAX_ERR</code>.</li>
+ <li>The {{ domxref("HTMLCanvasElement") }} method <code>toDataURL()</code> now correctly lower-cases the specified MIME type before matching.</li>
+ <li><code>getImageData()</code> now correctly accepts rectangles that extend beyond the bounds of the canvas; pixels outside the canvas are returned as transparent black.</li>
+ <li><code>drawImage()</code> and <code>createImageData()</code> now handle negative arguments in accordance with the specification, by flipping the rectangle around the appropriate axis. <strong>We need an article about <a class="external" href="http://dev.w3.org/csswg/css3-images/#default-sizing" title="http://dev.w3.org/csswg/css3-images/#default-sizing">CSS sizing</a> and how this works.</strong></li>
+ <li>Specifying non-finite values when calling <code>createImageData()</code> now properly throws a <code>NOT_SUPPORTED_ERR</code> exception.</li>
+ <li><code>createImageData()</code> and <code>getImageData()</code> now correctly return at least one pixel's worth of image data if a rectangle smaller than one pixel is specified.</li>
+ <li>Specifying a negative radius when calling <code>createRadialGradient()</code> now correctly throws <code>INDEX_SIZE_ERR</code>.</li>
+ <li>Specifying a <code>null</code> or <code>undefined</code> image when calling <code>createPattern()</code> or <code>drawImage()</code> now correctly throws a <code>TYPE_MISMATCH_ERR</code> exception.</li>
+ <li>Specifying invalid values for <code>globalAlpha</code> no longer throws a <code>SYNTAX_ERR</code> exception; these are now correctly silently ignored.</li>
+ <li>Specifying invalid values when calling <code>translate()</code>, <code>transform()</code>, <code>rect()</code>, <code>clearRect()</code>, <code>fillRect()</code>, <code>strokeRect()</code>, <code>lineTo()</code>, <code>moveTo()</code>, <code>quadraticCurveTo()</code>, or <code>arc()</code> no longer throws an exception; these calls are now correctly silently ignored.</li>
+ <li>Setting the value of <code>shadowOffsetX</code>, <code>shadowOffsetY</code>, or <code>shadowBlur</code> to an invalid value is now silently ignored.</li>
+ <li>Setting the value of <code>rotate</code> or <code>scale</code> to an invalid value is now silently ignored.</li>
+</ul>
+
+<h3 id="CSS">CSS</h3>
+
+<dl>
+ <dt><a href="/en/CSS/CSS_animations" title="en/CSS/CSS animations">CSS animations</a></dt>
+ <dd>Support for CSS animations has been added, using the <code>-moz-</code> prefix for now.</dd>
+</dl>
+
+<h3 id="DOM">DOM</h3>
+
+<ul>
+ <li>The {{ domxref("selection") }} object's <a href="/en/DOM/Selection/modify" title="en/DOM/Selection/modify"><code>modify()</code></a> method has been changed so that the "word" selection granularity no longer includes trailing spaces; this makes it more consistent across platforms and matches the behavior of WebKit's implementation.</li>
+ <li>The {{ domxref("window.setTimeout()") }} method now clamps to send no more than one timeout per second in inactive tabs. In addition, it now clamps nested timeouts to the smallest value allowed by the HTML5 specification: 4 ms (instead of the 10 ms it used to clamp to).</li>
+ <li>Similarly, the {{ domxref("window.setInterval()") }} method now clamps to no more than one interval per second in inactive tabs.</li>
+ <li><a href="/en/DOM/XMLHttpRequest" title="en/XMLHttpRequest"><code>XMLHttpRequest</code></a> now <a href="/en/DOM/XMLHttpRequest/Using_XMLHttpRequest#Detecting_any_load_end_condition" title="en/XMLHttpRequest/Using XMLHttpRequest#Detecting any load end condition">supports the <code>loadend</code> event</a> for progress listeners. This is sent after any transfer is finished (that is, after the <code>abort</code>, <code>error</code>, or <code>load</code> event). You can use this to handle any tasks that need to be performed regardless of success or failure of a transfer.</li>
+ <li>The {{ domxref("Blob") }} and, by extension, the {{ domxref("File") }} objects' <code>slice()</code> method has been removed and replaced with a new, proposed syntax that makes it more consistent with <a href="/en/JavaScript/Reference/Global_Objects/Array/slice" title="en/JavaScript/Reference/Global Objects/Array/slice"><code>Array.slice()</code></a> and <a href="/en/JavaScript/Reference/Global_Objects/String/slice" title="en/JavaScript/Reference/Global Objects/String/slice"><code>String.slice()</code></a> methods in JavaScript. This method is named <a href="/en/DOM/Blob#mozSlice()" title="en/DOM/Blob#mozSlice()"><code>mozSlice()</code></a> for now.</li>
+ <li>The value of {{ domxref("window.navigator.language") }} is now determined by looking at the value of the <code>Accept-Language</code> <a href="/en/HTTP/Headers" title="en/HTTP/Headers">HTTP header</a>.</li>
+ <li>The {{ domxref("Node.prefix") }} property is now read only, as required by the DOM specification.</li>
+ <li>The {{ domxref("HTMLVideoElement") }} now supports experimental properties to get information about video paint statistics like frame rates.</li>
+</ul>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<ul>
+ <li>Regular expressions are no longer callable as if they were functions; this change has been made in concert with the WebKit team to ensure compatibility (see {{ WebkitBug(28285) }}. This feature had existed for a long time but was never documented (at least, not here on MDC).</li>
+ <li>The <a href="/en/JavaScript/Reference/Global_Objects/Function/isGenerator" title="en/JavaScript/Reference/Global Objects/Function/isGenerator"><code>Function.prototype.isGenerator()</code></a> method is now supported; this lets you determine if a function is a <a href="/en/JavaScript/Guide/Iterators_and_Generators#Generators.3a_a_better_way_to_build_Iterators" title="en/Core JavaScript 1.5 Guide/Iterators and Generators#Generators.3a a better way to build Iterators">generator</a>.</li>
+ <li>The following <a href="/en/JavaScript/Reference/Reserved_Words" title="en/JavaScript/Reference/Reserved Words">reserved words</a> were previously only treated as reserved when in strict mode; now they're always treated as reserved: <code>class</code>, <code>enum</code>, <code>export</code>, <code>extends</code>, <code>import</code>, and <code>super</code>.</li>
+ <li>DOM documents created in chrome code may no longer be exposed to sandboxed scripts.</li>
+ <li>The JSON parser has been re-written for improved speed and compliance. This includes a fix for {{ bug("572279") }}.</li>
+</ul>
+
+<h3 id="SVG">SVG</h3>
+
+<ul>
+ <li>The {{ SVGAttr("class") }} SVG attribute can now be animated.</li>
+ <li>The following SVG-related DOM interfaces representing lists of objects are now indexable and can be accessed like arrays; in addition, they have a <code>length</code> property indicating the number of items in the lists: {{ domxref("SVGLengthList") }}, {{ domxref("SVGNumberList") }}, {{ domxref("SVGPathSegList") }}, and {{ domxref("SVGPointList") }}.</li>
+</ul>
+
+<h3 id="HTTP">HTTP</h3>
+
+<ul>
+ <li>Firefox no longer sends the <code>Keep-Alive</code> HTTP header; we weren't formatting it correctly, and it was redundant since we were also sending the {{ httpheader("Connection") }} or {{ httpheader("Proxy-Connection") }} header with the value "keep-alive" anyway.</li>
+ <li>The HTTP transaction model has been updated to be more intelligent about reusing connections in the persistent connection pool; instead of treating the pool as a {{ interwiki("wikipedia", "FIFO") }} queue, Necko now attempts to sort the pool with connections with the largest {{ interwiki("wikipedia", "congestion window") }} (CWND) first. This can reduce the round-trip time (RTT) of HTTP transactions by avoiding the need to grow connections' windows in many cases.</li>
+ <li>Firefox now handles the <code>Content-Disposition</code> HTTP response header more effectively if both the <code>filename</code> and <code>filename*</code> parameters are provided; it looks through all provided names, using the <code>filename*</code> parameter if one is available, even if a <code>filename</code> parameter is included first. Previously, the first matching parameter would be used, thereby preventing a more appropriate name from being used. See {{ bug(588781) }}.</li>
+</ul>
+
+<h3 id="MathML">MathML</h3>
+
+<ul>
+ <li>Support for <a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#id.3.2.5.7.3" title="http://www.w3.org/TR/MathML3/chapter3.html#id.3.2.5.7.3">embellished operators</a></li>
+</ul>
+
+<h3 id="Developer_tools">Developer tools</h3>
+
+<ul>
+ <li>The <a href="/en/Using_the_Web_Console#The_console_object" title="en/Using the Web Console#The console object">Web Console's <code>Console</code> object</a> now has a <code>debug()</code> method, which is an alias for its <code>log()</code> method; this improves compatibility with certain existing sites.</li>
+</ul>
+
+<h2 id="Changes_for_Mozilla_and_add-on_developers">Changes for Mozilla and add-on developers</h2>
+
+<p>For a guide to updating your add-on for Firefox 5, please see <a href="/en/Firefox/Updating_add-ons_for_Firefox_5" title="en/Firefox/Updating add-ons for Firefox 5">Updating add-ons for Firefox 5</a>.</p>
+
+<div class="note"><strong>Note:</strong> Firefox 5 requires that binary components be recompiled, as do all major releases of Firefox. See <a href="/En/Developer_Guide/Interface_Compatibility#Binary_Interfaces" title="En/Developer Guide/Interface Compatibility#Binary Interfaces">Binary Interfaces</a> for details.</div>
+
+<h3 id="Changes_to_JavaScript_code_modules">Changes to JavaScript code modules</h3>
+
+<h4 id="New_JavaScript_code_modules">New JavaScript code modules</h4>
+
+<ul>
+ <li>The <a href="/en/JavaScript_code_modules/Dict.jsm" title="en/JavaScript code modules/Dict.jsm"><code>Dict.jsm</code></a> code module was added; it provides an API for dictionaries of key/value pairs.</li>
+</ul>
+
+<h4 id="NetUtil.jsm">NetUtil.jsm</h4>
+
+<ul>
+ <li>The <a href="/en/JavaScript_code_modules/NetUtil.jsm#asyncFetch()" title="en/JavaScript code modules/NetUtil.jsm#asyncFetch()"><code>asyncFetch()</code></a> method now supports specifying the input source as an {{ interface("nsIInputStream") }}.</li>
+</ul>
+
+<h3 id="Interface_changes">Interface changes</h3>
+
+<ul>
+ <li>The {{ interface("nsIHttpChannelInternal") }} interface has new attributes providing access to information about the channels' endpoints' addresses and ports. This information is provided primarily for debugging purposes.</li>
+ <li>The {{ HTMLElement("canvas") }} element's {{ htmlattrxref("width", "canvas") }} and {{ htmlattrxref("height", "canvas") }} attributes are now reflected in IDL as unsigned integers instead of signed (see <a href="/en/DOM/HTMLCanvasElement" title="en/DOM/HTMLCanvasElement"><code>HTMLCanvasElement</code></a>).</li>
+ <li>The <code>nsIAppStartup2</code> and {{ interface("nsIAppStartup_MOZILLA_2_0") }} interfaces have been merged into the {{ interface("nsIAppStartup") }} interface.</li>
+ <li>The <code>nsIDocShell_MOZILLA_2_0_BRANCH</code> interface has been merged into the {{ interface("nsIDocShell") }} interface.</li>
+ <li>The <code>nsIFocusManager_MOZILLA_2_0_BRANCH</code> interface has been merged into the {{ interface("<code><code>nsIFocusManager</code></code>") }} interface.</li>
+ <li>The <code>nsIHTMLEditor_MOZILLA_2_0_BRANCH</code> interface has been merged into the {{ interface("nsIHTMLEditor") }} interface.</li>
+</ul>
+
+<h4 id="New_interfaces">New interfaces</h4>
+
+<ul>
+ <li><code>nsIDOMAnimationEvent</code> added. {{domxref("AnimationEvent")}}</li>
+</ul>
+
+<h4 id="Removed_interfaces">Removed interfaces</h4>
+
+<p>The following interfaces were implementation details that are no longer needed:</p>
+
+<ul>
+ <li><code>nsICiter</code> (see {{ bug("633066") }})</li>
+ <li><code>nsIDOM3Document</code> (see {{ bug("639849") }})</li>
+ <li><code>nsIFIXptrEvaluator</code></li>
+ <li><code>nsISelectElement</code> (see {{ bug("619996") }})</li>
+</ul>
+
+<h3 id="Debugging_aids">Debugging aids</h3>
+
+<ul>
+ <li>The new <a href="/En/Namespace/Mozilla/DebugOnly%3CT%3E" title="En/Namespace/Mozilla/DebugOnly&lt;T>"><code>DebugOnly&lt;T&gt;</code></a> helper makes it possible to declare variables only for <code>DEBUG</code> builds.</li>
+</ul>
+
+<h3 id="JavaScript_API_(SpiderMonkey)">JavaScript API (SpiderMonkey)</h3>
+
+<ul>
+ <li><a href="/en/SpiderMonkey/JSAPI_Reference/JS_DoubleToInt32" title="en/SpiderMonkey/JSAPI Reference/JS DoubleToInt32"><code>JS_DoubleToInt32()</code></a> and <a href="/en/SpiderMonkey/JSAPI_Reference/JS_DoubleToInt32" title="en/SpiderMonkey/JSAPI Reference/JS DoubleToInt32"><code>JS_DoubleToUint32()</code></a> have been added, for converting <code><a href="/en/SpiderMonkey/JSAPI_Reference/jsdouble" title="en/jsdouble">jsdouble</a></code> values into C integers and unsigned integers.</li>
+</ul>
+
+<h3 id="Build_system_changes">Build system changes</h3>
+
+<ul>
+ <li>You can now build Firefox without a <code>mozconfig</code> file; the <a href="/en/Configuring_Build_Options#Choose_an_application" title="en/Configuring Build Options#Choose an application"><code>--enable-application</code> setting</a> now defaults to "browser". After pulling or downloading the code, you can simply <code>configure &amp;&amp; make</code> (or <code>make -f client.mk</code>) to build Firefox.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<div>{{Firefox_for_developers('4')}}</div>
diff --git a/files/de/mozilla/firefox/releases/56/index.html b/files/de/mozilla/firefox/releases/56/index.html
new file mode 100644
index 0000000000..0158450bdc
--- /dev/null
+++ b/files/de/mozilla/firefox/releases/56/index.html
@@ -0,0 +1,122 @@
+---
+title: Firefox 56 for developers
+slug: Mozilla/Firefox/Releases/56
+translation_of: Mozilla/Firefox/Releases/56
+---
+<div>{{FirefoxSidebar}}</div><article class="text-content" id="wikiArticle">
+<p>Dieser Artikel enthält Informationen über die Änderungen in Firefox 56, die Entwickler betreffen. Firefox 56 ist die aktuelle <a href="https://www.mozilla.org/en-US/firefox/channel/desktop/#beta">Beta-Version von Firefox</a> und wird am <a href="https://wiki.mozilla.org/RapidRelease/Calendar#Future_branch_dates">26. September 2017</a> veröffentlicht werden</p>
+
+<article class="text-content" id="wikiArticle">
+<h2 id="Änderungen_für_Web-Entwickler">Änderungen für Web-Entwickler</h2>
+
+<h3 id="Entwicklerwerkzeuge">Entwicklerwerkzeuge</h3>
+
+<p><em>Keine Änderungen.</em></p>
+
+<h3 id="HTML">HTML</h3>
+
+<ul>
+ <li>Implementiert die Label-Eigenschaft für beschreibbare Formular-Steuerelemente, zum Beispiel {{domxref("HTMLInputElement.labels")}} ({{bug(556743)}}).</li>
+ <li>Implementiert <code>&lt;link rel="preload"&gt;</code>; siehe <a href="/en-US/docs/Web/HTML/Preloading_content">Preloading content with rel="preload"</a> für mehr Details ({{bug(1222633)}}).</li>
+</ul>
+
+<h3 id="CSS">CSS</h3>
+
+<ul>
+ <li>Implementiert die propietären Mozilla-spezifischen Werte {{cssxref("&lt;color&gt;")}} <code>-moz-win-accentcolor</code> und <code>-moz-win-accentcolortext</code> (see {{bug(1344910)}}), und die propietäre Medienabfrage <code><a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#-moz-windows-accent-color-in-titlebar">-moz-windows-accent-color-in-titlebar</a></code> (see {{bug(1379938)}}).</li>
+</ul>
+
+<h3 id="SVG">SVG</h3>
+
+<p><em>Keine Änderungen.</em></p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<ul>
+ <li>The <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl">Intl API</a> has been enabled on Firefox for Android ({{bug(1344625)}}).</li>
+</ul>
+
+<h3 id="APIs">APIs</h3>
+
+<h4 id="New_APIs">New APIs</h4>
+
+<p><em>Keine Änderungen.</em></p>
+
+<h4 id="DOM">DOM</h4>
+
+<ul>
+ <li>Auf Macist jetzt {{domxref("Document.hidden")}} wahr, wenn das Fenster hinter einer anderen nicht-lichtdurchlässigen Anwendung steht {{bug(1236512)}}.</li>
+ <li>Die Eigenschaft {{domxref("Gamepad.displayId")}} wurde implementiert ({{bug(1375816)}}).</li>
+ <li>Die Methode {{domxref("CanvasRenderingContext2D.drawImage()")}} wurde aktualisiert, so dass so dass die Glättung beim Downscaling erfolgt, auch wenn <code>imageSmoothingEnabled</code> ist <code>false</code>. Dies ist nicht obligatorisch wie pro Spezifikation, sondern folgt Chromes Verhalten. Siehe {{bug(1360415)}}.</li>
+ <li>Die Eigenschaft {{domxref("PerformanceTiming.secureConnectionStart")}} wurde implementiert ({{bug(772589)}}).</li>
+ <li>Firefox verwendet<code> iso-2022-jp-2</code>, um Sequenzen zu nehmen, wenn ein iso-2022-jp {{domxref ("TextDecoder.TextDecoder", "TextDecoder ()")}} instanziiert wurde. Dies wurde nun entfernt, um die API zu vereinfachen, da keine anderen Browser oder Webseiten es unterstützen. ({{bug(715833)}}).</li>
+ <li>Das 4ms- Klemmeverhalten von {{domxref("WindowOrWorkerGlobalScope.setTimeout","setTimeout()")}} und {{domxref("WindowOrWorkerGlobalScope.setInterval","setInterval()")}} wurde aktualisiert, um besser in Einklang mit anderen Browsern, wie in <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Timeouts_throttled_to_%3E4ms">Timeouts throttled to &gt;=4ms</a> zu sein. ({{bug(1378586)}}).</li>
+ <li>Der <a href="/en-US/docs/Web/API/Page_Visibility_API">Page Visibility API's</a> {{domxref("Document.onvisibilitychange")}} handler wurde hinzugefügt ({{bug("1333912")}}).</li>
+</ul>
+
+<h4 id="DOM_events">DOM events</h4>
+
+<ul>
+ <li>{{domxref("GlobalEventHandlers.onwheel")}} ist ab sofort verfügbar {{domxref("HTMLElement")}} — es war nicht vorher ({{bug(1370550)}}).</li>
+</ul>
+
+<h4 id="WebRTC">WebRTC</h4>
+
+<ul>
+ <li>Firefox unterstützt nun die {{domxref("RTCPeerConnection")}} Eigenschaften, die Sie die aktuellen und ausstehenden Konfigurationen der lokalen und entfernten Enden der Verbindung untersuchen lassen, um zu helfen, Änderungen in der Konfiguration zu verwalten:{{domxref("RTCPeerConnection.currentLocalDescription", "currentLocalDescription")}}, {{domxref("RTCPeerConnection.pendingLocalDescription", "pendingLocalDescription")}}, {{domxref("RTCPeerConnection.currentRemoteDescription", "currentRemoteDescription")}}, and {{domxref("RTCPeerConnection.pendingRemoteDescription", "pendingRemoteDescription")}}.</li>
+</ul>
+
+<h3 id="Sicherheit">Sicherheit</h3>
+
+<p><em>Keine Änderungen.</em></p>
+
+<h3 id="Plugins">Plugins</h3>
+
+<p><em>Keine Änderungen.</em></p>
+
+<h3 id="Weiteres">Weiteres</h3>
+
+<ul>
+ <li>Gecko kodiert nun URLs intern als <a href="https://en.wikipedia.org/wiki/Punycode">punycode</a>, um URL-Codierungsprobleme zu vermeiden (siehe {{Bug ("945240")}}, siehe auch Diskussion in {{Bug ("942074")}}).</li>
+ <li>Firefox unter Windows und Mac OS X kann nun im <a href="/en-US/docs/Mozilla/Firefox/Headless_mode">headless Modus</a> mit der -headless-Flagge ausgeführt werden (siehe {{bug (1355150)}} und {{bug (1355147)}}).</li>
+</ul>
+
+<h2 id="Von_der_Web-Plattform_entfernt">Von der Web-Plattform entfernt</h2>
+
+<h3 id="HTML_2">HTML</h3>
+
+<ul>
+ <li>Das {{htmlelement("isindex")}} Element wurde vom HTML parser und aus der Formularvorlage entfernt. ({{bug(1266495)}}).</li>
+ <li>Das {{htmlelement("applet")}} Element wurde entfernt ({{bug(1279218)}}).</li>
+</ul>
+
+<h3 id="APIs_2">APIs</h3>
+
+<ul>
+ <li>Die {{domxref("KeyframeEffectReadOnly.spacing")}} Eigenschaft wurde von dem {{SpecName('Web Animations')}} spec entfernt, und deswegen wurde es auch von Gecko entfernt ({{bug(1339690)}}).</li>
+</ul>
+
+<h3 id="SVG_2">SVG</h3>
+
+<p><em>Keine Änderungen.</em></p>
+
+<h2 id="Änderungen_für_add-on_und_Mozilla-Entwickler">Änderungen für add-on und Mozilla-Entwickler</h2>
+
+<h3 id="WebExtensions">WebExtensions</h3>
+
+<p><em>Keine Änderungen.</em></p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="https://www.fxsitecompat.com/en-US/versions/56">Standortkompatibilität für Firefox 56</a></li>
+</ul>
+</article>
+
+<ul>
+</ul>
+
+<h2 id="Ältere_Versionen">Ältere Versionen</h2>
+
+<p>{{Firefox_for_developers(55)}},</p>
+</article>
diff --git a/files/de/mozilla/firefox/releases/57/index.html b/files/de/mozilla/firefox/releases/57/index.html
new file mode 100644
index 0000000000..dccbe85dea
--- /dev/null
+++ b/files/de/mozilla/firefox/releases/57/index.html
@@ -0,0 +1,99 @@
+---
+title: Firefox 57 für Entwickler
+slug: Mozilla/Firefox/Releases/57
+translation_of: Mozilla/Firefox/Releases/57
+---
+<div>{{FirefoxSidebar}}</div><div>{{draft}}</div>
+
+<p>Dieser Artikel enthält Informationen über die Änderungen in Firefox 57, die Entwicklern nützlich sind. Firefox 57 ist die aktuelle <a href="https://www.mozilla.org/en-US/firefox/channel/desktop/#nightly">Nightly-Version von Firefox</a> und wird am <a href="https://wiki.mozilla.org/RapidRelease/Calendar#Future_branch_dates">14. November 2017</a> veröffentlicht werden.</p>
+
+<article class="text-content" id="wikiArticle">
+<h2 id="Firefox_57_Firefox_Quantum">Firefox 57 = Firefox Quantum</h2>
+
+<p>Firefox 57 wurde Quantum genannt, weil dies der passendste Name für "Stabilität, Performance, etc." ist.</p>
+
+<h2 id="Änderungen_für_Web-Entwickler">Änderungen für Web-Entwickler</h2>
+
+<h3 id="Entwickler-Tools">Entwickler-Tools</h3>
+
+<p><em>Keine Änderungen.</em></p>
+
+<h3 id="HTML">HTML</h3>
+
+<p><em>Keine Änderungen.</em></p>
+
+<h3 id="CSS">CSS</h3>
+
+<p><em>Keine Änderungen.</em></p>
+
+<h3 id="SVG">SVG</h3>
+
+<p><em>Keine Änderungen.</em></p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p><em>Keine Änderungen.</em></p>
+
+<h3 id="APIs">APIs</h3>
+
+<h4 id="Neue_APIs">Neue APIs</h4>
+
+<p><em>Keine Änderungen.</em></p>
+
+<h4 id="DOM">DOM</h4>
+
+<p><em>Keine Änderungen.</em></p>
+
+<h4 id="DOM_events">DOM events</h4>
+
+<p><em>Keine Änderungen.</em></p>
+
+<h4 id="WebRTC">WebRTC</h4>
+
+<p><em>Keine Änderungen.</em></p>
+
+<h3 id="Sicherheit">Sicherheit</h3>
+
+<p><em>Keine Änderungen.</em></p>
+
+<h3 id="Plugins">Plugins</h3>
+
+<p><em>Keine Änderungen.</em></p>
+
+<h3 id="Anderes">Anderes</h3>
+
+<p><em>Keine Änderungen.</em></p>
+
+<h2 id="Von_der_Web-Plattform_entfernt">Von der Web-Plattform entfernt</h2>
+
+<h3 id="HTML_2">HTML</h3>
+
+<p><em>Keine Änderungen.</em></p>
+
+<h3 id="APIs_2">APIs</h3>
+
+<p><em>Keine Änderungen.</em></p>
+
+<h3 id="SVG_2">SVG</h3>
+
+<p><em>Keine Änderungen.</em></p>
+
+<h2 id="Änderungen_für_add-on_und_Mozilla-Entwickler">Änderungen für add-on und Mozilla-Entwickler</h2>
+
+<h3 id="WebExtensions">WebExtensions</h3>
+
+<p><em>Keine Änderungen.</em></p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="https://www.fxsitecompat.com/en-US/versions/57">Standortkompatibilität für Firefox 57</a></li>
+</ul>
+</article>
+
+<ul>
+</ul>
+
+<h2 id="Ältere_Versionen">Ältere Versionen</h2>
+
+<p>{{Firefox_for_developers(56)}}</p>
diff --git a/files/de/mozilla/firefox/releases/58/index.html b/files/de/mozilla/firefox/releases/58/index.html
new file mode 100644
index 0000000000..ba03bbbc43
--- /dev/null
+++ b/files/de/mozilla/firefox/releases/58/index.html
@@ -0,0 +1,186 @@
+---
+title: Firefox 58 for developers
+slug: Mozilla/Firefox/Releases/58
+translation_of: Mozilla/Firefox/Releases/58
+---
+<div>{{FirefoxSidebar}}</div><article class="text-content" id="wikiArticle">
+<p class="summary">Dieser Artikel enthält Informationen zu den Änderungen in Firefox 58, die sich auf Entwickler auswirken. Firefox 58 ist die aktuelle <a href="https://www.mozilla.org/en-US/firefox/channel/desktop/#beta">Beta-Version von Firefox</a> und wird am <a href="https://wiki.mozilla.org/RapidRelease/Calendar#Future_branch_dates">16. Januar 2018</a> ausgeliefert.</p>
+
+<article class="text-content" id="wikiArticle">
+<h2 id="Änderungen_für_Web_Entwickler">Änderungen für Web Entwickler</h2>
+
+<h3 id="Developer_Tools">Developer Tools</h3>
+
+<ul>
+ <li>Der Code für den alten Responsive-Design-Modus (standardmäßig aktiviert vor Firefox 52) wurde jetzt aus den Devtools entfernt ({{bug (1305777)}}). Informationen zu den neuen Tools finden Sie im <a href="/en-US/docs/Tools/Responsive_Design_Mode">Responsive Design-Modus</a>.</li>
+ <li>Die Option zum Anzeigen von MDN-Dokumenten aus dem CSS-Bereich des Seiteninspektors wurde entfernt ({{bug (1382171)}}).</li>
+ <li>Der <a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">CSS-Formen-Textmarker</a> wurde standardmäßig für Formen aktiviert, die über {{cssxref ("clip-path")}} ({{bug (1405339)}}) erstellt wurden.</li>
+ <li>Der <a href="/en-US/docs/Tools/Network_Monitor">Netzwerkmonitor</a> verfügt jetzt über eine Schaltfläche zum <a href="/en-US/docs/Tools/Network_Monitor#Pausing_and_resume_network_traffic_recording">Anhalten / Wiedergeben der Aufzeichnung des Netzwerkverkehr</a>s ({{bug (1005755)}}).</li>
+ <li>Im <a href="/en-US/docs/Tools/Network_Monitor">Netzwerkmonitor </a>ist die Filterschaltfläche "Flash" nicht mehr verfügbar und Flash-Anforderungen sind im Filter "Others" enthalten ({{bug (1413540)}}).</li>
+</ul>
+
+<h3 id="HTML">HTML</h3>
+
+<p><em>Keine Änderungen.</em></p>
+
+<h3 id="CSS">CSS</h3>
+
+<ul>
+ <li>Der Deskriptor {{cssxref ("@ font-face / font-display", "font-display")}} ist jetzt standardmäßig auf allen Plattformen verfügbar ({{bug (1317445)}}).</li>
+</ul>
+
+<h3 id="SVG">SVG</h3>
+
+<p><em>Keine Änderungen</em> <em>.</em></p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<ul>
+ <li>Das Objekt {{jsxref ("Global_Objects / DateTimeFormat", "Intl.DateTimeFormat")}} unterstützt jetzt die Option <code>hourCycle</code> und das <code>hc</code> Sprachen Tag ({{bug (1386146)}}).</li>
+</ul>
+
+<h3 id="APIs">APIs</h3>
+
+<h4 id="Neue_APIs">Neue APIs</h4>
+
+<ul>
+ <li>Die API {{domxref ("PerformanceNavigationTiming")}} wurde implementiert ({{bug (1263722)}}).
+  <ul>
+   <li>Gecko besitzt nun eine Pref Einstellung, die verwendet werden kann, um die Schnittstelle bei Bedarf zu deaktivieren — <code>dom.enable_performance_navigation_timing</code>, Standardwert ist <code>true</code> ({{bug(1403926)}}).</li>
+  </ul>
+ </li>
+</ul>
+
+<h4 id="DOM">DOM</h4>
+
+<ul>
+ <li>Fehler, die über Fehlerobjekte in bestimmten APIs gemeldet werden - z. B. in der <code>error</code> Eigenschaft von {{domxref ("FileReader")}}, {{domxref ("IDBRequest")}} und {{domxref ("IDBTransaction")}}, sowie wenn Anfragen über bestimmte Methoden von {{domxref ("RTCPeerConnection")}} nicht erfolgreich sind - werden jetzt durch {{domxref ("DOMException")}} Instanzen repräsentiert. {{domxref ("DOMError")}} ist veraltet und wurde aus der DOM4-Spezifikation ({{bug (1120178)}}) ​​entfernt.</li>
+ <li>Die <a href="/en-US/docs/Web/API/WebVR_API">WebVR-API</a> wurde standardmäßig unter macOS aktiviert ({{bug (1374399)}}).</li>
+ <li>Die Eigenschaft {{domxref ("PerformanceResourceTiming.workerStart")}} wird jetzt unterstützt ({{bug (1191943)}}).</li>
+ <li>Budget-basierte Timeout-Throttling-Regeln wurden implementiert - siehe <a href="/en-US/docs/Web/API/Page_Visibility_API#Policies_in_place_to_aid_background_page_performance">Richtlinien zur Unterstützung der Performance von Hintergrundseiten</a> für weitere Details ({{bug (1377766)}}).</li>
+</ul>
+
+<h4 id="DOM_Events">DOM Events</h4>
+
+<p><em>Keine Änderungen.</em></p>
+
+<h4 id="Media_and_WebRTC">Media and WebRTC</h4>
+
+<ul>
+ <li>Die vorangestellte Version von {{domxref ("HTMLMediaElement.srcObject")}} wurde entfernt. Es ist sicherzustellen, daß der Code aktualisiert wird, um das Standard-<code>srcObject</code> anstelle von <code>mozSrcObject</code> ({{bug (1183495)}}) zu verwenden.</li>
+</ul>
+
+<h4 id="Canvas_und_WebGL">Canvas und WebGL</h4>
+
+<p><em>Keine Änderungen.</em></p>
+
+<h3 id="HTTP">HTTP</h3>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors">frame-ancestors</a></code> wird nicht mehr ignoriert in {{httpheader ("Content-Security-Policy-Report-Only")}} ({{bug (1380755)}}).</li>
+ <li>Firefox implementiert jetzt ein TLS-Handshake-Timeout mit einem Standardwert von 30 Sekunden. Der Timeout-Wert kann durch Bearbeiten des Parameters <code>network.http.tls-handshake-timeout</code> in about:config ({{bug(1393691)}}).</li>
+ <li>Die <code><a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/worker-src">worker-src</a></code> CSP Richtlinie wurde implementiert ({{bug(1302667)}}).</li>
+</ul>
+
+<h3 id="Security">Security</h3>
+
+<p><em>Keine Änderungen.</em></p>
+
+<h3 id="Plugins">Plugins</h3>
+
+<p><em>Keine Änderungen.</em></p>
+
+<h3 id="Andere">Andere</h3>
+
+<p><em>Keine Änderungen.</em></p>
+
+<h2 id="Webplattform_Berichtigungen">Webplattform Berichtigungen</h2>
+
+<h3 id="HTML_2">HTML</h3>
+
+<ul>
+ <li>{{htmlelement ("a")}} -Elemente können nicht mehr in ein {{htmlelement ("map")}} -Element eingebettet werden, um einen Hotspot-Bereich zu erstellen - ein {{htmlelement ("area")}} -Element muss stattdessen verwendet werden ({{bug (1317937)}}).</li>
+</ul>
+
+<h3 id="CSS_2">CSS</h3>
+
+<ul>
+ <li>Die folgenden proprietären Mozilla-Systemmetrik-Pseudoklassen sind für Webinhalte nicht mehr verfügbar ({{bug(1396066)}}):
+  <ul>
+   <li>{{Cssxref(":-moz-system-metric(images-in-menus)")}}</li>
+   <li>{{Cssxref(":-moz-system-metric(mac-graphite-theme)")}}</li>
+   <li>{{Cssxref(":-moz-system-metric(scrollbar-end-backward)")}}</li>
+   <li>{{Cssxref(":-moz-system-metric(scrollbar-end-forward)")}}</li>
+   <li>{{Cssxref(":-moz-system-metric(scrollbar-start-backward)")}}</li>
+   <li>{{Cssxref(":-moz-system-metric(scrollbar-start-forward)")}}</li>
+   <li>{{Cssxref(":-moz-system-metric(scrollbar-thumb-proportional)")}}</li>
+   <li>{{Cssxref(":-moz-system-metric(touch-enabled)")}}</li>
+   <li>{{Cssxref(":-moz-system-metric(windows-default-theme)")}}</li>
+  </ul>
+ </li>
+ <li>Die folgenden proprietären Mozilla-Medienfunktionen stehen nicht mehr für Webinhalte zur Verfügung ({{bug(1396066)}}):
+  <ul>
+   <li><code>-moz-color-picker-available</code></li>
+   <li><code>-moz-is-glyph</code></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-moz-mac-graphite-theme"><code>-moz-mac-graphite-theme</code></a></li>
+   <li><code>-moz-mac-yosemite-theme</code></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-moz-os-version"><code>-moz-os-version</code></a></li>
+   <li><code>-moz-overlay-scrollbars</code></li>
+   <li><code>-moz-physical-home-button</code></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-moz-scrollbar-end-backward"><code>-moz-scrollbar-end-backward</code></a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-moz-scrollbar-end-forward"><code>-moz-scrollbar-end-forward</code></a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-moz-scrollbar-start-backward"><code>-moz-scrollbar-start-backward</code></a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-moz-scrollbar-start-forward"><code>-moz-scrollbar-start-forward</code></a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-moz-scrollbar-thumb-proportional"><code>-moz-scrollbar-thumb-proportional</code></a></li>
+   <li><code>-moz-swipe-animation-enabled</code></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-moz-windows-accent-color-in-titlebar"><code>-moz-windows-accent-color-in-titlebar</code></a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-moz-windows-classic"><code>-moz-windows-classic</code></a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-moz-windows-compositor"><code>-moz-windows-compositor</code></a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-moz-windows-default-theme"><code>-moz-windows-default-theme</code></a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-moz-windows-glass"><code>-moz-windows-glass</code></a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-moz-windows-theme"><code>-moz-windows-theme</code></a></li>
+  </ul>
+ </li>
+ <li>Die proprietäte Mozilla <code>:-moz-styleeditor-transitioning</code> steht nicht mehr für Webinhalte zur Verfügung ({{bug(1396099)}}).</li>
+</ul>
+
+<h3 id="JavaScript_2">JavaScript</h3>
+
+<ul>
+ <li>Die nicht standardmäßige Methode {{jsxref ("Date.prototype.toLocaleFormat ()")}} wurde entfernt ({{bug (818634)}}). <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Siehe Warnung: Date.prototype.toLocaleFormat ist für weitere Informationen und die Migrationshilfe veraltet</a>.</li>
+ <li>Die nicht standardmäßigen und veralteten Methoden {{jsxref ("Object.prototype.watch ()")}} und {{jsxref ("Object.prototype.unwatch", "unwatch ()")}} wurden entfernt und werden nicht mehr angezeigt ({{bug (638054)}}). Erwägen Sie stattdessen, <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Setter und Getter</a> Methoden oder Proxys zu verwenden.</li>
+ <li>Das <a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol">Legacy-Iterator-Protokoll</a>, das <code><a href="/en-US/docs/Archive/Web/StopIteration">StopIteration</a></code> Objekt, die <a href="/en-US/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function">Legacy-Generator-Funktionen</a> und die nicht standardmäßige {{jsxref ("Function.prototype.isGenerator ()")}} - Methode wurden entfernt. Verwenden Sie stattdessen die ES2015-<a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">Iterationsprotokolle</a> und standardkonforme <a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iteratoren und Generatoren</a> ({{bug (1083482)}}, {{bug (1413867)}}, {{bug (1119777)}}).</li>
+</ul>
+
+<h3 id="APIs_2">APIs</h3>
+
+<ul>
+ <li>Die proprietären <code>moz-blob</code> und <code>moz-chunked-text</code> Werte der {{Domxref ("XMLHttpRequest.responseType")}} - Eigenschaft wurden in Firefox 58 vollständig entfernt ({{bug (1397145)}}, {{bug (1397151)}}, {{bug (1120171)}}).</li>
+ <li>Die Voreinstellungen <code>dom.abortController.enabled</code> und <code>dom.abortController.fetch.enabled</code>, die die Belichtung der Abort-API-Funktionalität kontrollierten, wurden nun entfernt, da diese Funktionen jetzt standardmäßig aktiviert sind ({{bug (1402317)}}).</li>
+ <li>Die proprietäre Eigenschaft <code>mozSrcObject</code> wurde in Firefox 58 entfernt ({{bug (1183495)}}). Verwenden Sie stattdessen die standardmäßige {{domxref ("HTMLMediaElement.srcObject")}} -Eigenschaft.</li>
+</ul>
+
+<h3 id="SVG_2">SVG</h3>
+
+<p><em>Keine Änderungen.</em></p>
+
+<h2 id="Änderungen_für_Add-On_und_Mozilla_Entwickler">Änderungen für Add-On und Mozilla Entwickler</h2>
+
+<h3 id="WebExtensions">WebExtensions</h3>
+
+<p><em>Keine Änderungen.</em></p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="https://www.fxsitecompat.com/en-US/versions/58">Site Compatibility for Firefox 58</a></li>
+</ul>
+</article>
+
+<ul>
+</ul>
+
+<h2 id="Ältere_Versionen">Ältere Versionen</h2>
+
+<p>{{Firefox_for_developers(57)}}</p>
+</article>
diff --git a/files/de/mozilla/firefox/releases/60/index.html b/files/de/mozilla/firefox/releases/60/index.html
new file mode 100644
index 0000000000..2d75e69ac2
--- /dev/null
+++ b/files/de/mozilla/firefox/releases/60/index.html
@@ -0,0 +1,146 @@
+---
+title: Firefox 60 for developers
+slug: Mozilla/Firefox/Releases/60
+translation_of: Mozilla/Firefox/Releases/60
+---
+<div>{{FirefoxSidebar}}</div><div>{{draft}}</div>
+
+<p class="summary">This article provides information about the changes in Firefox 60 that will affect developers. Firefox 60 is the current <a href="https://www.mozilla.org/en-US/firefox/channel/desktop/#nightly">Nightly version of Firefox</a>, and will ship on <a href="https://wiki.mozilla.org/RapidRelease/Calendar#Future_branch_dates">May 8, 2018</a>.</p>
+
+<h2 id="Stylo_comes_to_Firefox_for_Android_in_60">Stylo comes to Firefox for Android in 60</h2>
+
+<p><a href="https://hacks.mozilla.org/2017/08/inside-a-super-fast-css-engine-quantum-css-aka-stylo/">Firefox's new parallel CSS engine</a> — also known as <strong>Quantum CSS</strong> or <strong>Stylo</strong>, which was <a href="/en-US/Firefox/Releases/57#Firefox_57_Firefox_Quantum">first enabled by default in Firefox 57 for desktop</a>, has now been enabled in Firefox for Android.</p>
+
+<h2 id="Changes_for_web_developers">Changes for web developers</h2>
+
+<h3 id="Developer_tools">Developer tools</h3>
+
+<ul>
+ <li>In the CSS Pane rules view (see <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examine and edit CSS</a>), the keyboard shortcuts for precise value increments (increase/decrease by 0.1) have changed from <kbd>Alt</kbd> + <kbd>Up</kbd>/<kbd>Down</kbd> to <kbd>Ctrl</kbd> + <kbd>Up</kbd>/<kbd>Down</kbd> on Linux and Windows, to avoid clashes with default OS-level shortcuts (see {{bug("1413314")}}).</li>
+ <li>Also in the CSS Pane rules view, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables">CSS variable names</a> will now auto-complete ({{bug(1422635)}}). If you enter <code>var(</code> into a property value and then type a dash (<code>-</code>), any variables you have declared in your CSS will then appear in an autocomplete list.</li>
+</ul>
+
+<h3 id="HTML">HTML</h3>
+
+<p>Pressing the Enter key in <code>designMode</code> and <code>contenteditable</code> now inserts <code>&lt;div&gt;</code> elements when the caret is in an inline element or text node which is a child of a block level editing host — instead of inserting <code>&lt;br&gt;</code> elements like it used to. If you want to use the old behavior on your app, you can do it with <code>document.execCommand()</code>. See <a href="/en-US/docs/Web/Guide/HTML/Editable_content#Differences_in_markup_generation">Differences in markup generation</a> for more details.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<ul>
+ <li>The {{cssxref("align-content")}}, {{cssxref("align-items")}}, {{cssxref("align-self")}}, {{cssxref("justify-content")}}, and {{cssxref("place-content")}} property values have been updated as per the latest <a href="https://drafts.csswg.org/css-align-3/">CSS Box Alignment Module Level 3</a> spec ({{bug(1430817)}}).</li>
+ <li>The {{cssxref("paint-order")}} property has been implemented ({{bug(1426146)}}).</li>
+</ul>
+
+<h3 id="SVG">SVG</h3>
+
+<p><em>No changes.</em></p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>The {{jsxref("Array.prototype.values()")}} method has been added again ({{bug(1420101)}}). It was disabled due to <a href="https://www.fxsitecompat.com/en-CA/docs/2016/array-prototype-values-breaks-some-legacy-apps/">compatibilty issues</a> in earlier versions. Make sure your code doesn't have any custom implementation of this method.</p>
+
+<h3 id="APIs">APIs</h3>
+
+<h4 id="New_APIs">New APIs</h4>
+
+<p><em>No changes.</em></p>
+
+<h4 id="DOM">DOM</h4>
+
+<ul>
+ <li>In the <a href="/en-US/docs/Web/API/Web_Authentication_API">Web Authentication API</a>, the <code>MakePublicKeyCredentialOptions</code> dictionary object has been renamed {{domxref("PublicKeyCredentialCreationOptions")}}; this change has been made in Firefox ({{bug(1436473)}}).</li>
+ <li>The <code>dom.workers.enabled</code> pref has been removed, meaning workers can no longer be disabled ({{bug(1434934)}}).</li>
+ <li>The {{domxref("Document.body","body")}} property is now implemented on the {{domxref("Document")}} interface, rather than the {{domxref("HTMLDocument")}} interface ({{bug(1276438)}}).</li>
+ <li>{{domxref("PerformanceResourceTiming")}} is now available in workers ({{bug(1425458)}}).</li>
+ <li>The {{domxref("PerformanceObserver.takeRecords()")}} method has been implemented ({{bug(1436692)}}).</li>
+ <li>The {{domxref("KeyboardEvent.keyCode")}} attribute of punctuation key becomes non-zero even if active keyboard layout doesn't produce ASCII character. See <a href="/en-US/docs/Web/API/KeyboardEvent/keyCode#keyCode_of_punctuation_keys_on_some_keyboard_layout">the detail</a>. Note that please do <strong>not</strong> use <code>KeyboardEvent.keyCode</code> in new applications. Please consider to use {{domxref("KeyboardEvent.key")}} or {{domxref("KeyboardEvent.code")}} instead.</li>
+ <li>The {{domxref("Animation.updatePlaybackRate()")}} method has been implemented ({{bug("1436659")}}).</li>
+ <li>New rules have been included for determining <a href="/en-US/docs/Web/API/KeyboardEvent/keyCode#keyCode_of_punctuation_keys_on_some_keyboard_layout">keyCode values of punctuation keys</a> ({{bug(1036008)}}).</li>
+</ul>
+
+<h4 id="DOM_events">DOM events</h4>
+
+<p><em>No changes.</em></p>
+
+<h4 id="Service_workers">Service workers</h4>
+
+<p><em>No changes.</em></p>
+
+<h4 id="Media_and_WebRTC">Media and WebRTC</h4>
+
+<ul>
+ <li>When recording or sharing media obtained using {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}, muting the camera by setting the corresponding track's {{domxref("MediaStreamTrack.enabled")}} property to <code>false</code> now turns off the camera's "in use" indicator light, to help the user more easily see that the camera is not in use ({{bug(1299515)}}).</li>
+ <li>Removing a track from an {{domxref("RTCPeerConnection")}} using {{domxref("RTCPeerConnection.removeTrack", "removeTrack()")}} no longer removes the track's {{domxref("RTCRtpSender")}} from the peer connection's list of senders as reported by {{domxref("RTCPeerConnection.getSenders", "getSenders()")}} ({{bug(1290949)}}).</li>
+ <li>The {{domxref("RTCRtpContributingSource")}} and {{domxref("RTCRtpSynchronizationSource")}} objects' timestamps were previously being reported based on values returned by {{jsxref("Date.getTime()")}}. In Firefox 60, these have been fixed to correctly use the <a href="/en-US/docs/Web/API/Performance_API">Performance Timing API</a> instead ({{bug(1433576)}}).</li>
+</ul>
+
+<h4 id="Canvas_and_WebGL">Canvas and WebGL</h4>
+
+<p><em>No changes.</em></p>
+
+<h3 id="CSSOM">CSSOM</h3>
+
+<p><em>No changes.</em></p>
+
+<h3 id="HTTP">HTTP</h3>
+
+<p><em>No changes.</em></p>
+
+<h3 id="Security">Security</h3>
+
+<p><em>No changes.</em></p>
+
+<h3 id="Plugins">Plugins</h3>
+
+<p><em>No changes.</em></p>
+
+<h3 id="Other">Other</h3>
+
+<p><em>No changes.</em></p>
+
+<h2 id="Removals_from_the_web_platform">Removals from the web platform</h2>
+
+<h3 id="HTML_2">HTML</h3>
+
+<p><em>No changes.</em></p>
+
+<h3 id="CSS_2">CSS</h3>
+
+<ul>
+ <li>The proprietary {{cssxref("-moz-user-input")}} property's <code>enabled</code> and <code>disabled</code> values are no longer available ({{bug("1405087")}}).</li>
+ <li>The proprietary {{cssxref("-moz-border-top-colors")}}, {{cssxref("-moz-border-right-colors")}}, {{cssxref("-moz-border-bottom-colors")}}, and {{cssxref("-moz-border-left-colors")}} properties have been removed from the platform completely ({{bug(1429723)}}).</li>
+</ul>
+
+<h3 id="JavaScript_2">JavaScript</h3>
+
+<p>The non-standard <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Expression_closures">expression closure</a> syntax has been removed ({{bug(1426519)}}).</p>
+
+<h3 id="APIs_2">APIs</h3>
+
+<p><em>No changes.</em></p>
+
+<h3 id="SVG_2">SVG</h3>
+
+<p><em>No changes.</em></p>
+
+<h3 id="Other_2">Other</h3>
+
+<p><em>No changes.</em></p>
+
+<h2 id="Changes_for_add-on_and_Mozilla_developers">Changes for add-on and Mozilla developers</h2>
+
+<h3 id="WebExtensions">WebExtensions</h3>
+
+<p><em>No changes.</em></p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Site compatibility for Firefox 60</li>
+</ul>
+
+<h2 id="Older_versions">Older versions</h2>
+
+<p>{{Firefox_for_developers(58)}}</p>
+
+<p> </p>
diff --git a/files/de/mozilla/firefox/releases/68/index.html b/files/de/mozilla/firefox/releases/68/index.html
new file mode 100644
index 0000000000..8a5c4fa572
--- /dev/null
+++ b/files/de/mozilla/firefox/releases/68/index.html
@@ -0,0 +1,162 @@
+---
+title: Firefox 68 für Entwickler
+slug: Mozilla/Firefox/Releases/68
+translation_of: Mozilla/Firefox/Releases/68
+---
+<p>{{FirefoxSidebar}}{{Draft}}</p>
+
+<p class="summary">This article provides information about the changes in Firefox 68 that will affect developers. Firefox 68 is the current <a href="https://www.mozilla.org/en-US/firefox/channel/desktop/#beta" rel="noopener">Beta version of Firefox</a>, and will ship on <a href="https://wiki.mozilla.org/RapidRelease/Calendar#Future_branch_dates" rel="noopener">July 9, 2019</a>.</p>
+
+<h2 id="Changes_for_web_developers">Changes for web developers</h2>
+
+<h3 id="Developer_tools">Developer tools</h3>
+
+<ul>
+ <li>Die Einstellung, die die Sichtbarkeit interner Erweiterungen (System-Add-Ons und versteckte Erweiterungen) auf der <a href="/en-US/docs/Tools/about:debugging">about:debugging</a>-Seite kontrolliert, wurde von <code>devtools.aboutdebugging.showSystemAddons</code> zu  <code>devtools.aboutdebugging.showHiddenAddons</code> geändert ({{bug(1544372)}}).</li>
+ <li>Die Konsole zeigt jetzt <a href="/en-US/docs/Tools/Web_Console/Console_messages#CSS">mehr Informationen über CSS-Warnungen</a> inklusive einer Liste der Knoten der DOM-Elemente, die die Regel genutzt haben ({{bug(1093953)}}).</li>
+ <li>Über die <a href="/en-US/docs/Tools/Network_Monitor/request_list#Filtering_requests">Anfragen-Liste</a> der Netzwerkanalyse kann jetzt eine spezifische URL geblockt werden ({{bug(1151368)}}).</li>
+ <li>Es ist jetzt möglich, eine Netzwerkanfrage erneut zu senden, ohne das Verfahren, die URL, die Parameter oder die Überschrift ändern zu müssen, indem der <a href="/en-US/docs/Tools/Network_Monitor/request_list#Context_menu">Resend</a>-Befehl im Kontextmenü ausgeführt wird ({{bug(1422014)}}).</li>
+ <li>Es ist jetzt möglich, die <a href="/en-US/docs/Tools/Network_Monitor/request_list#Network_request_columns">Breite der Spalten</a> in der Netzwerkanalyse zu ändern, um dem Arbeitsalauf gerecht zu werden. ({{bug(1358414)}}).</li>
+ <li>The context menu of the <a href="/en-US/docs/Tools/Network_Monitor/request_details#Headers">Headers</a> tab now allows you to copy all or some of the header information to the clipboard in JSON format ({{bug(1442249)}}).</li>
+ <li>A button has been added to the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_CSS_rules">rules panel</a> of the Page Inspector that allows you to toggle display of any print media queries ({{bug(1534984)}}).</li>
+ <li>An icon will be displayed next to invalid or unsupported <a href="/en-US/docs/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_CSS_rules">CSS rules</a> in the Rules pane of the Page Inspector ({{bug(1306054)}}).</li>
+</ul>
+
+<h4 id="Removals">Removals</h4>
+
+<h3 id="HTML">HTML</h3>
+
+<p><em>No changes.</em></p>
+
+<h4 id="Removals_2"> Removals</h4>
+
+<h3 id="CSS">CSS</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Scroll_Snap">CSS Scroll Snapping</a> has been updated to the latest version of the specification ({{bug(1312163)}}) and ({{bug(1544136)}}), this includes:
+
+  <ul>
+   <li>The scroll-padding properties ({{bug(1373832)}})</li>
+   <li>The scroll-margin properties ({{bug(1373833)}})</li>
+   <li>{{CSSxRef("scroll-snap-align")}} ({{bug(1373835)}})</li>
+  </ul>
+ </li>
+ <li>The {{CSSxRef("-webkit-line-clamp")}} property has been implemented for compatibility with other browsers ({{bug(866102)}}).</li>
+ <li>Support {{CSSxRef("::marker")}} pseudo-element ({{bug(205202)}}) and animation for ::marker pseudos ({{bug(1538618)}})</li>
+ <li>Change {{CSSxRef("currentColor")}} to be a computed value (except for color property)  ({{bug(760345)}}).</li>
+ <li>Fix support for the 'ch' length unit to match spec (fallback for no '0' glyph, vertical metrics) ({{bug(282126)}})</li>
+ <li>The  {{CSSxRef("counter-set")}} property has been implemented. ({{bug(1518201)}})</li>
+ <li>Implement list numbering using a built-in 'list-item' counter - fixes list numbering bugs ({{bug(288704)}})</li>
+ <li>CSS Transforms are now supported in indirectly rendered things e.g.)  {{SVGElement("mask")}},  {{SVGElement("marker")}},  {{SVGElement("pattern")}},  {{SVGElement("clipPath")}} ({{bug(1323962)}}).</li>
+</ul>
+
+<h4 id="Removals_3">Removals</h4>
+
+<ul>
+ <li>{{CSSxRef("scroll-snap-coordinate")}}, {{CSSxRef("scroll-snap-destination")}}, {{CSSxRef("scroll-snap-type-x")}} and {{CSSxRef("scroll-snap-type-y")}} have been removed.</li>
+ <li>The {{CSSxRef("scroll-snap-type")}} property has become a longhand, so the old shorthand syntax like <code>scroll-snap-type:mandatory</code> will stop working. See the <a href="https://www.fxsitecompat.com/en-CA/docs/2019/legacy-css-scroll-snap-syntax-support-has-been-dropped/">Firefox Site Compatability</a> note.</li>
+</ul>
+
+<h3 id="SVG">SVG</h3>
+
+<p><em>No changes.</em></p>
+
+<h4 id="Removals_4">Removals</h4>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p><em>No changes.</em></p>
+
+<h4 id="Removals_5">Removals</h4>
+
+<h3 id="APIs">APIs</h3>
+
+<p><em>No changes.</em></p>
+
+<h4 id="New_APIs">New APIs</h4>
+
+<ul>
+ <li>Implement Resize Observer API ({{bug(1272409)}}).</li>
+</ul>
+
+<h4 id="DOM">DOM</h4>
+
+<ul>
+ <li>The <a href="/en-US/docs/Web/API/Visual_Viewport_API">Visual Viewport API</a> has now been enabled by default on Android ({{bug(1512813)}}). Adding this API to desktop versions of Firefox is being tracked in {{bug(1551302)}}.</li>
+ <li>The {{domxref("HTMLImageElement.decode", "decode()")}} element on images is now implemented. this can be used to trigger loading and decoding of an image prior to adding it to the DOM ({{bug(1501794)}}).</li>
+ <li>The <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a> now requires that the user interact with the page before it can request permission to send notifications ({{bug(1524619)}}).</li>
+ <li>{{domxref("XMLHttpRequest")}} has been updated to no longer accept the non-standard <code>moz-chunked-arraybuffer</code> value for {{domxref("XMLHttpRequest.responseType", "responseType")}}. Code still using it should be updated to <a href="/en-US/docs/Web/API/Streams_API/Using_readable_streams#Consuming_a_fetch_as_a_stream">use the Fetch API as a stream</a> ({{bug(1120171)}}).</li>
+ <li><code>XMLHttpRequest</code> now outputs a warning to console if you perform a synchronous request while handling an {{domxref("Window.unload_event", "unload")}}, {{domxref("Window.beforeunload_event", "beforeunload")}}, or {{domxref("Window.pagehide_event", "pagehide")}} event ({{bug(980902)}}).</li>
+ <li>The {{domxref("Document.cookie", "cookie")}} property has moved from the {{domxref("HTMLDocument")}} interface to the {{domxref("Document")}} interface, allowing documents other than {{Glossary("HTML")}} to use cookies ({{bug(144795)}}).</li>
+</ul>
+
+<h4 id="DOM_events">DOM events</h4>
+
+<h4 id="Service_workers">Service workers</h4>
+
+<h4 id="Media_Web_Audio_and_WebRTC">Media, Web Audio, and WebRTC</h4>
+
+<ul>
+ <li>WebRTC has been updated to recognize that a <code>null</code> candidate passed into the {{domxref("RTCPeerConnection.icecandidate", "icecandidate")}} event handler, indicating the receipt of a candidate, instead indicates that there are no further candidates coming; when this happens the ICE gathering ({{domxref("RTCPeerConnection.iceGatheringState", "iceGatheringState")}}) state reaches <code>complete</code> ({{bug(1318167)}}).</li>
+ <li>The {{domxref("RTCRtpReceiver")}} methods {{domxref("RTCRtpReceiver.getContributingSources", "getContributingSources()")}} and {{domxref("RTCRtpReceiver.getSynchronizationSources", "getSynchronizationSources()")}} now support video tracks; previously they only worked on audio ({{bug(1534466)}}).</li>
+ <li>
+  <p>{{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} may no longer be used from a non-secure context; attempting to do so now throws a <code>NotAllowedError</code> result. Secure contexts are those loaded using HTTPS, those located using the <code>file:///</code> scheme, and those loaded from <code>localhost</code>. For now, if you must, you can re-enable the ability to perform insecure calls to <code>getUserMedia()</code> by setting the preference <code>media.getusermedia.insecure.enabled</code> to <code>true</code> ({{bug(1335740)}}).</p>
+
+  <div class="blockIndicator note">
+  <p><strong>Note:</strong> In the future, Firefox will also remove the {{domxref("navigator.mediaDevices")}} property on insecure contexts, preventing all access to the {{domxref("MediaDevices")}} APIs; see {{bug()}} for the status of this work. <strong>This is already the case in Nightly builds.</strong></p>
+  </div>
+ </li>
+</ul>
+
+<h4 id="Canvas_and_WebGL">Canvas and WebGL</h4>
+
+<h4 id="Removals_6">Removals</h4>
+
+<ul>
+ <li>Removed the non-standard {{DOMxRef("XMLDocument.load()")}} method ({{bug(332175)}}).</li>
+ <li>Removed the non-standard {{DOMxRef("XMLDocument.async")}} property ({{bug(1328138)}}).</li>
+</ul>
+
+<h3 id="Security">Security</h3>
+
+<p><em>No changes.</em></p>
+
+<h4 id="Removals_7">Removals</h4>
+
+<h3 id="Plugins">Plugins</h3>
+
+<p><em>No changes.</em></p>
+
+<h4 id="Removals_8">Removals</h4>
+
+<h3 id="Other">Other</h3>
+
+<p><em>No changes.</em></p>
+
+<h4 id="Removals_9">Removals</h4>
+
+<h2 id="Changes_for_add-on_developers">Changes for add-on developers</h2>
+
+<h3 id="API_changes">API changes</h3>
+
+<ul>
+ <li>The The proxy.register() and proxy.unregister() functions have been deprecated and will be removed from Firefox 71 ({{bug(1545811)}}).</li>
+</ul>
+
+<h4 id="Removals_10">Removals</h4>
+
+<h3 id="Manifest_changes">Manifest changes</h3>
+
+<p><em>No changes.</em></p>
+
+<h4 id="Removals_11">Removals</h4>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://www.fxsitecompat.com/en-CA/versions/68/">Site compatibility for Firefox 68</a></li>
+</ul>
+
+<h2 id="Older_versions">Older versions</h2>
+
+<p>{{Firefox_for_developers(67)}}</p>
diff --git a/files/de/mozilla/firefox/releases/index.html b/files/de/mozilla/firefox/releases/index.html
new file mode 100644
index 0000000000..e5af49da21
--- /dev/null
+++ b/files/de/mozilla/firefox/releases/index.html
@@ -0,0 +1,12 @@
+---
+title: Firefox developer release notes
+slug: Mozilla/Firefox/Releases
+tags:
+  - Firefox
+  - NeedsTranslation
+  - TopicStub
+translation_of: Mozilla/Firefox/Releases
+---
+<div>{{FirefoxSidebar}}</div><p>This page provides links to the "Firefox X for developers" articles for each Firefox release. These notes let you see what features were added and bugs eliminated in each version of Firefox.</p>
+
+<div class="multiColumnList">{{ListSubpages("",1,0,1)}}</div>
diff --git a/files/de/mozilla/firefox/the_about_protocol/index.html b/files/de/mozilla/firefox/the_about_protocol/index.html
new file mode 100644
index 0000000000..5225af8915
--- /dev/null
+++ b/files/de/mozilla/firefox/the_about_protocol/index.html
@@ -0,0 +1,190 @@
+---
+title: Firefox und das "about"-Protokoll
+slug: Mozilla/Firefox/The_about_protocol
+tags:
+  - Einstellungen
+  - Firefox
+  - Guide
+  - Protokolle
+  - Referenz
+  - 'about:'
+translation_of: Mozilla/Firefox/The_about_protocol
+---
+<div>{{FirefoxSidebar}}</div>
+
+<div class="syntaxbox">Es gibt eine Menge wichtiger Informationen über Firefox, die sich hinter dem <code>about:</code> URL-Protokoll verbergen. Am wichtigsten ist die URL <code>about:config</code>, die Einstellungen anzeigt, die sich dort betrachten und ändern lassen. Hier ist eine komplette Liste mit allen URLs  des <code>about:</code>-Pseudo-Protokolls::</div>
+
+<div class="syntaxbox"> </div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><code>about:</code> Seite</th>
+   <th scope="col">Beschriebung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>about:</code></td>
+   <td>Zeigt die Versionsnummer, Buildinformationen, Links zu den Beitragenden, Lizenzinformationen und Einstellungen zur Build-Konfiguration an.</td>
+  </tr>
+  <tr>
+   <td><code>about:about</code></td>
+   <td>Zeigt einen Überblick über alle about:-Seiten an.</td>
+  </tr>
+  <tr>
+   <td><code>about:accounts</code></td>
+   <td>Zeigt Informationen zur <a href="https://www.mozilla.org/en-US/firefox/sync/">Sync-Funktion </a>an.</td>
+  </tr>
+  <tr>
+   <td><code>about:addons</code></td>
+   <td>Öffnet den Add-ons-Manager</td>
+  </tr>
+  <tr>
+   <td><code>about:app-manager</code></td>
+   <td>Öffnet den App-Manager</td>
+  </tr>
+  <tr>
+   <td><code>about:buildconfig</code></td>
+   <td>Zeigt die für die Version von Firefox verwendete Konfiguration und Plattform an.</td>
+  </tr>
+  <tr>
+   <td><code>about:cache</code></td>
+   <td>Zeigt Informationen zum Speicher, Speichermedium und Arbeitsspeicher an.</td>
+  </tr>
+  <tr>
+   <td><code>about:compartments</code></td>
+   <td>
+    <div class="note">
+    <p>Seit Firefox 26 können diese Informationen unter "Other Measurements" in about:memory gefunden werden.</p>
+    </div>
+
+    <p>Zeigt Informationen zu einzelnen "<a href="/en-US/docs/SpiderMonkey/SpiderMonkey_compartments">Compartments"</a>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>about:config</code></td>
+   <td>Bietet eine Möglichkeit, Einstellungen in Firefox zu untersuchen und zu ändern.</td>
+  </tr>
+  <tr>
+   <td><code>about:crashes</code></td>
+   <td>Listet alle Abstürze, die während der gesamten Lebenszeit von Firefox passierten, auf.</td>
+  </tr>
+  <tr>
+   <td><code>about:credits</code></td>
+   <td>Listet alle Ünterstützer und Mitwirkenden des Firefox-Projektes auf.</td>
+  </tr>
+  <tr>
+   <td><code>about:customizing</code></td>
+   <td>Wechselt zur Anpassungsseite, die Anpassungen der Benutzeroberfläche von Firefox erlaubt.</td>
+  </tr>
+  <tr>
+   <td><code>about:downloads</code></td>
+   <td>Listet alle Downloads von Firefox aus auf.</td>
+  </tr>
+  <tr>
+   <td><code>about:healthreport</code></td>
+   <td>Zeigt Leistungsinformationen von Firefox an (nur wenn der Nutzer dies aktiviert hat).</td>
+  </tr>
+  <tr>
+   <td><code>about:home</code></td>
+   <td>Öffnet die Startseite, die beim Öffnen eines neuen Fensters erscheint.</td>
+  </tr>
+  <tr>
+   <td><code>about:license</code></td>
+   <td>Zeigt Lizenzinformationen an.</td>
+  </tr>
+  <tr>
+   <td><code>about:logo</code></td>
+   <td>Zeigt das Firefox-Logo an.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Mozilla/Performance/about%3Amemory">about:memory</a></td>
+   <td>Bietet eine Möglichkeit, die Speicherverwendung anzuzeigen, als Bericht zu speichern oder GC und CC auszuführen.</td>
+  </tr>
+  <tr>
+   <td><code>about:mozilla</code></td>
+   <td>Diese Sonderseite zeigt eine Nachricht aus dem "The Book of Mozilla".</td>
+  </tr>
+  <tr>
+   <td><code>about:networking</code></td>
+   <td>Zeigt Netzwerk-Informationen an.</td>
+  </tr>
+  <tr>
+   <td><code>about:newtab</code></td>
+   <td>Öffnet die Startseite für einen neuen Tab.</td>
+  </tr>
+  <tr>
+   <td><code>about:permissions</code></td>
+   <td>
+    <div class="warning">
+    <p>Wurde mit Firefox 45 entfernt. ({{bug(933917)}})</p>
+    </div>
+
+    <p>Bietet eine Möglichkeit, Berechtigungen anzuzeigen und verwalten zu lassen.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>about:plugins</code></td>
+   <td>Zeigt Informationen zu installierten Plugins an.</td>
+  </tr>
+  <tr>
+   <td><code>about:preferences</code></td>
+   <td>Öffnet die Einstellungen zu Firefox (auch erreichbar über das Firefox-Menü &gt; <em>Optionen</em>)</td>
+  </tr>
+  <tr>
+   <td><code>about:privatebrowsing</code></td>
+   <td>Öffnet die Startseite, die beim Öffnen eines privaten Tabs angezeigt wird.</td>
+  </tr>
+  <tr>
+   <td><code>about:profiles</code></td>
+   <td>Zeigt und verwaltet Firefox-Profile.</td>
+  </tr>
+  <tr>
+   <td><code>about:rights</code></td>
+   <td>Zeigt rechtliche Informationen an.</td>
+  </tr>
+  <tr>
+   <td><code>about:robots</code></td>
+   <td>Diese Sonderseite zeigt Informationen zu Robots an.</td>
+  </tr>
+  <tr>
+   <td><code>about:serviceworkers</code></td>
+   <td>Zeigt aktuell laufende Service Workers an.</td>
+  </tr>
+  <tr>
+   <td><code>about:sessionrestore</code></td>
+   <td>Öffnet die Sitzungswiederherstellungsseite (wird nach einem Absturz angezeigt).</td>
+  </tr>
+  <tr>
+   <td><code>about:support</code></td>
+   <td>Öffnet die Fehlerbehebungsseite (auch erreichbar über das Firefox-Menü &gt; <em>? (Fragezeichen)</em> &gt; <em>Informationen zur Fehlerbehebung</em>)</td>
+  </tr>
+  <tr>
+   <td><code>about:sync-log</code></td>
+   <td>Zeigt ein Synchronisations-Protokoll bezogen auf die <a href="https://www.mozilla.org/en-US/firefox/sync/">Sync</a>-Funktion an.</td>
+  </tr>
+  <tr>
+   <td><code>about:sync-progress</code></td>
+   <td>Zeigt die Seite, die nach der Einrichtung der <a href="https://www.mozilla.org/en-US/firefox/sync/">Sync</a>-Funktion aufgerufen wird.</td>
+  </tr>
+  <tr>
+   <td><code>about:sync-tabs</code></td>
+   <td>Zeigt synchronisierbare Tabs an (für die <a href="https://www.mozilla.org/en-US/firefox/sync/">Sync</a>-Funktion).</td>
+  </tr>
+  <tr>
+   <td><code>about:telemetry</code></td>
+   <td>Zeigt die von Firefox gesammelten und an Mozilla gesendeten telemetrischen Daten an (nur wenn der Nutzer Telemetrie aktiviert hat).</td>
+  </tr>
+  <tr>
+   <td><code>about:webrtc</code></td>
+   <td>Zeigt Informationen zur Verwendung von WebRTC an.</td>
+  </tr>
+  <tr>
+   <td><code>about:welcomeback</code></td>
+   <td>Zeigt die Seite, die nach einer Zurücksetzung aufgerufen wird.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Diese URLs wurden in {{source("docshell/base/nsAboutRedirector.cpp")}} innerhalb des <code>kRedirMap</code>-Arrays definiert. Der Array zeigt die meisten der URLs, wie <code>config</code> in URLs im <code>chrome:</code>-Pseudo-Protokoll, wie <code>chrome://global/content/config.xul an</code>.  Der Ort der about:-Informationen wurde aus {{source("docshell/build/nsDocShellModule.cpp")}} kopiert..</p>
diff --git a/files/de/mozilla/firefox/updating_add-ons_for_firefox_5/index.html b/files/de/mozilla/firefox/updating_add-ons_for_firefox_5/index.html
new file mode 100644
index 0000000000..f57ae8a1fc
--- /dev/null
+++ b/files/de/mozilla/firefox/updating_add-ons_for_firefox_5/index.html
@@ -0,0 +1,69 @@
+---
+title: Updating add-ons for Firefox 5
+slug: Mozilla/Firefox/Updating_add-ons_for_Firefox_5
+translation_of: Mozilla/Firefox/Releases/5/Updating_add-ons
+---
+<div>{{FirefoxSidebar}}</div><p>This article provides an overview of the changes you may need to make to your add-ons in order for them to work properly in Firefox 5. You can find a complete list of developer-related changes in Firefox 5 in <a href="/en/Firefox_5_for_developers" title="en/Firefox 5 for developers">Firefox 5 for developers</a>.</p>
+
+<h2 id="Do_you_need_to_do_anything_at_all">Do you need to do anything at all?</h2>
+
+<p>If your add-on is distributed on <a class="external" href="http://addons.mozilla.org" title="http://addons.mozilla.org/">addons.mozilla.org</a> (AMO), it's been checked by an automated compatibility verification tool. Add-ons that don't use APIs that changed in Firefox 5, and have no binary components (which <a href="/En/Developer_Guide/Interface_Compatibility#Binary_Interfaces" title="En/Developer Guide/Interface Compatibility#Binary Interfaces">need to be recompiled for every major Firefox release</a>), have automatically been updated on AMO to indicate that they work in Firefox 5.</p>
+
+<p>So you should start by visiting AMO and looking to see if your add-on needs any work done at all.</p>
+
+<div class="note"><strong>Note:</strong> You should still test your add-on on Firefox 5, even if it's been automatically upgraded. There are edge cases that may not be automatically detected.</div>
+
+<p>Once you've confirmed that you need to make changes, come on back to this page and read on.</p>
+
+<h2 id="User_interface_related_changes">User interface related changes</h2>
+
+<p>Due to the short development cycle (even for our rapid release cycle; Firefox 5 was on an extra-short schedule for timing reasons), there are very few UI related changes in Firefox 5.</p>
+
+<h3 id="Determining_the_UI_language">Determining the UI language</h3>
+
+<p>In the past, the {{ domxref("window.navigator.language") }} DOM property reflected the language of Firefox's user interface. This is no longer the case; instead, it reflects the value of the <code>Accept-Language</code> header for the current document. If you need to detect the UI language, you should instead look at the value of the <code>general.useragent.locale</code> preference.</p>
+
+<h2 id="DOM_changes">DOM changes</h2>
+
+<p>The behaviors of {{ domxref("window.setTimeout()") }} and {{ domxref("window.setInterval()") }} have changed; the minimum allowed time has changed, and <a href="/En/Window.setTimeout#Minimum_delay_and_timeout_nesting" title="En/Window.setTimeout#Minimum delay and timeout nesting">varies depending on the situation</a>. In addition, timeouts and intervals are clamped to one per second in inactive tabs (that is, tabs the user isn't currently looking at).</p>
+
+<h2 id="JavaScript_changes">JavaScript changes</h2>
+
+<p>The following keywords are now reserved in JavaScript, even when you're not in <a href="/en/JavaScript/Strict_mode" title="en/JavaScript/Strict mode">strict mode</a>:</p>
+
+<ul>
+ <li><code>class</code></li>
+ <li><code>enum</code></li>
+ <li><code>export</code></li>
+ <li><code>extends</code></li>
+ <li><code>import</code></li>
+ <li><code>super</code></li>
+</ul>
+
+<p>Don't use those keywords anywhere in your code, even as object property names.</p>
+
+<div class="note"><strong>Note:</strong> This is one of those things that AMO's automatically upgrade tool may not always catch, so check your code for these if your add-on was automatically upgraded but is still not working properly.</div>
+
+<h2 id="Interface_changes">Interface changes</h2>
+
+<p>Instantiating certain services, including the {{ interface("nsICertOverrideService") }}, at startup can make Firefox unusable ({{ bug(650858) }}. This happens only if you try to instantiate a service before the <code>load</code> event is fired.</p>
+
+<p>To fix this, simply move your instantiation of these services into your <code>load</code> event handler:</p>
+
+<pre class="brush: js">var MyObject = {
+  comp : null,
+  init: function() {
+    this.comp = Components.classes[...].getService(...);
+  },
+  ...
+}
+window.addEventListener("load", function() { MyObject.init(); }, false);
+</pre>
+
+<p>An even better solution, of course, is to follow <a href="/en/Extensions/Performance_best_practices_in_extensions" title="en/Extensions/Performance best practices in extensions">performance best practices</a> and to not instantiate services until you need to use them.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en/Firefox_5_for_developers" title="en/Firefox 5 for developers">Firefox 5 for developers</a></li>
+</ul>
diff --git a/files/de/mozilla/firefox_fuer_android/compatibility_testing/index.html b/files/de/mozilla/firefox_fuer_android/compatibility_testing/index.html
new file mode 100644
index 0000000000..e8c5b26907
--- /dev/null
+++ b/files/de/mozilla/firefox_fuer_android/compatibility_testing/index.html
@@ -0,0 +1,103 @@
+---
+title: Site Compatibility Testing for Firefox for Android
+slug: Mozilla/Firefox_fuer_Android/Compatibility_Testing
+translation_of: Mozilla/Firefox_for_Android/Compatibility_Testing
+---
+<h2 id="Overview">Overview</h2>
+<p>Our goal, is to <strong>open up the Web to all mobile browsers via promotion of standards and best practices</strong>.</p>
+<p>However, some websites serve content either that doesn't function well or that is different than that served to some specific popular mobile browsers of the moment. This content may be:</p>
+<ul>
+  <li>A basic mobile site</li>
+  <li>A traditional desktop site</li>
+  <li>A WAP (Wireless Application Protocol) site designed for a feature phone</li>
+  <li>A touch-optimized mobile site that is broken visibly or functionally</li>
+</ul>
+<p>We refer to this category of issues as <strong>Web compatibility issues</strong>. Web compatibility issues (for Firefox for Android, Firefox OS and other browsers with limited market share in one or more regions) typically result from one or more of several causes:</p>
+<dl>
+  <dt>
+    User-agent sniffing</dt>
+  <dd>
+    Identifying the browser by its user-agent string and sending different content.</dd>
+  <dt>
+    Use of non standard (typically Webkit) CSS properties</dt>
+  <dd>
+    Using non standard CSS properties that the browser does not recognize, causing layout or style issues</dd>
+  <dt>
+    Use of non standard (typically Webkit) DOM properties</dt>
+  <dd>
+    Using non standard DOM properties in JavaScript that the browser does not recognize, causing functional issues</dd>
+  <dt>
+    Browser limitations</dt>
+  <dd>
+    Using standard CSS and DOM properties that the browser does not currently implement or that have functional or performance issues</dd>
+</dl>
+<p>For <strong>Firefox</strong> specifically, we need your help to identify sites that do not work well by reporting the specific issues that you find in your investigation. Other browsers vendors have bug reporting systems, where you can report the issues as well for their specific browser.</p>
+<p>Outlined below are steps that you can follow to identify and report site issues.</p>
+<h2 id="Setup">Setup</h2>
+<p>To start, let's set up your hardware and software for compatibility testing.</p>
+<ol>
+  <li>An Android phone is a prerequisite for testing Firefox for Android. See our <a href="http://www.mozilla.org/firefox/mobile/platforms/" title="http://www.mozilla.org/firefox/mobile/platforms/">list of supported devices for Firefox for Android</a> to ensure that your phone is supported.</li>
+  <li>Install <a href="https://play.google.com/store/apps/details?id=org.mozilla.firefox" title="https://play.google.com/store/apps/details?id=org.mozilla.firefox">Firefox for Android from Google Play</a>.</li>
+  <li>Install the <a href="https://addons.mozilla.org/en-US/android/addon/phony/">Phony</a> Add-on for Firefox on Android. This add-on lets Firefox for Android pretend to be another browser by changing the <a href="https://developer.mozilla.org/en-US/docs/Browser_detection_using_the_user_agent" title="https://developer.mozilla.org/en-US/docs/Browser_detection_using_the_user_agent">user-agent</a> string that is sent with each HTTP request.</li>
+  <li><a href="https://bugzilla.mozilla.org/createaccount.cgi" title="https://bugzilla.mozilla.org/createaccount.cgi">Set up an account on bugzilla</a> so that you can report issues.</li>
+</ol>
+<p><strong>Optional steps:</strong></p>
+<ul>
+  <li>Install Firefox for Android for a different release channel: <a href="https://play.google.com/store/apps/details?id=org.mozilla.firefox_beta" title="https://play.google.com/store/apps/details?id=org.mozilla.firefox_beta">Beta</a>, <a href="http://www.mozilla.org/en-US/mobile/aurora/" title="http://www.mozilla.org/en-US/mobile/aurora/">Aurora</a>, or <a href="http://nightly.mozilla.org/" title="http://nightly.mozilla.org/">Nightly</a>.</li>
+  <li>You can try to reproduce and debug issues that you discover in Desktop Firefox. Install Desktop Firefox for Windows, Linux or Mac OS X and an <a href="https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/?src=search" title="https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/? data-cke-saved-src=search src=search">add-on like Phony for the desktop</a>.</li>
+</ul>
+<div class="note">
+  <p>Note: See the article<a href="https://developer.mozilla.org/en/Browser_detection_using_the_user_agent"> Browser detection using the user agent</a> for an in-depth explanation about browser user-agents.</p>
+</div>
+<h2 id="Compatibility_Testing">Compatibility Testing</h2>
+<p>The following steps walk you through the method that Mozilla QA uses for compatibility testing:</p>
+<ol>
+  <li>Select a site to test.
+    <ul>
+      <li>This may be a site that you already visited and saw that something is wrong in your daily browser usage.</li>
+      <li>Alternatively, you can select one of the top sites listed on the <a href="http://arewecompatibleyet.com" title="http://arewecompatibleyet.com">Are We Compatible Yet report</a>. Sites that have not yet been investigated are shown in white.</li>
+    </ul>
+  </li>
+  <li>Open the site that you selected in Firefox for Android. Test the functionality of the site by exploring different areas of the site. For example, if the site displays articles, pictures, and videos, you should explore all three areas of the site. Click on links, use forms, create accounts, sign in, and question:
+    <ol>
+      <li>Is the site a desktop site? If so, skip to #3 and #4 to determine if Safari on iPhone and the Android browser are served the same desktop content.</li>
+      <li>Does the site have obvious layout problems? Are elements positioned on top of one another? Is there missing content? Do menus display correctly? Are header background colors correct? Are areas of the page shown correctly? Does the site simply look bad?<br>
+         </li>
+    </ol>
+  </li>
+  <li>Visit the same website using your device’s Android browser, using the same exploration methods in #2, and question:
+    <ol>
+      <li>Is the site a desktop site? Does the content greatly differ than what you saw on Firefox for Android? If so, how is it different? Is it a mobile optimized site?</li>
+      <li>Are there any similar layout issues as seen in Firefox for Android? If so, what problems do you see with Firefox for Android that you do not see in the Android browser?<br>
+         </li>
+    </ol>
+  </li>
+  <li>Make Firefox for Android appear to the site as though it is Safari on iPhone by clicking Menu-&gt;Phony and selecting iPhone. After selecting iPhone click Menu-&gt;Reload. Visit the same site again and continue with the same exploration methods in #2 and question:
+    <ol>
+      <li>Is the site a desktop site? Does the content greatly differ than what you previously saw in Firefox for Android? If so, how is it different? Is it a mobile optimized site?</li>
+      <li>Does the site have any layout problems? If so, what are those problems?</li>
+    </ol>
+  </li>
+</ol>
+<h2 id="Reporting_Results">Reporting Results</h2>
+<p>For any site that looks or functions differently in Firefox for Android, the Android browser, or Safari on iPhone you should report each issue in Bugzilla. To report an issue, file a bug in the <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox%20for%20Android&amp;component=Evangelism&amp;rep_platform=ARM&amp;op_sys=Android">Firefox for Android Evangelism component</a> and provide as much information about the issue as you can. Here are some pieces of information that are typically helpful to submit with your report:</p>
+<dl>
+</dl>
+<dl>
+  <dt>
+    Summary</dt>
+  <dd>
+    Summarize the issue that you have identified with the site. It is helpful to include the domain name, such as mozilla.org, in the summary.</dd>
+  <dt>
+    Description</dt>
+  <dd>
+    Describe the issue as best as you can. Include details such as how the content differs between Firefox for Android, Android browser, and Safari on iPhone, the specific places (titles, article list, options menu) where the site does not look correct, and what parts of the site (articles are unreadable, videos don't play, can't click on links) that do not function as you expected that they would.<br>
+    <br>
+    If you have some knowledge of HTML, CSS, and JavaScript, it is also very helpful to have references to the lines of code that are the root cause of the issue.</dd>
+  <dt>
+    Attachments</dt>
+  <dd>
+    It is also valuable to attach a screen capture that shows the problem in Firefox for Android. How to take a screenshot on Android differs based on your version of the operating system.</dd>
+</dl>
+<h2 id="Contact_Information">Contact Information</h2>
+<p>If you have any questions about compatibility testing or want to become involved in Mozilla’s mobile web compatibility effort, please sign up for the <a href="https://lists.mozilla.org/listinfo/compatibility">compatibility@lists.mozilla.org</a> mailing list.</p>
diff --git a/files/de/mozilla/firefox_fuer_android/index.html b/files/de/mozilla/firefox_fuer_android/index.html
new file mode 100644
index 0000000000..1df1e939c9
--- /dev/null
+++ b/files/de/mozilla/firefox_fuer_android/index.html
@@ -0,0 +1,64 @@
+---
+title: Firefox für Android
+slug: Mozilla/Firefox_fuer_Android
+translation_of: Mozilla/Firefox_for_Android
+---
+<p>Für mehr und mehr Menschen sind Mobilgeräte der Hauptweg, oder sogar der einzige Weg, Zugang zum Web zu erlangen. <a class="link-https" href="https://www.mozilla.org/de/mobile/">Firefox für Android</a> (Codename Fennec) ist ein offener, hackbarer, auf Standards basierender Browser, genau wie Firefox für den Desktop.</p>
+
+<p>Firefox für Android erzeugt seine Benutzeroberfläche aus systemeigenen Android Widgets anstatt aus XUL: dies verbessert die Performanz außerordentlich, insbesondere die Zeit des Startvorgangs, und den Speicherbedarf.</p>
+
+<h2 id="Zu_Firefox_für_Android_beitragen">Zu Firefox für Android beitragen</h2>
+
+<p>Die Hauptbezugsquelle für Informationen über das Firefox für Android Projekt selbst ist die <a class="link-https" href="https://wiki.mozilla.org/Mobile">Wikiseite des Projekts</a>.</p>
+
+<p>Sie können uns helfen Firefox für Android zu gestalten und zu verbessern:</p>
+
+<ul>
+ <li>helfen Sie uns <a class="link-https" href="https://wiki.mozilla.org/Mobile/Testdrivers_Program">beim Testen</a>
+
+  <ul>
+   <li>testen Sie Top-Sites auf Kompatibilität mit mobile gecko – siehe <a href="/de/docs/Mozilla/Firefox_for_Android/Compatibility_Testing" title="https://developer-new.mozilla.org/en-US/docs/Mozilla/Firefox_for_Android/Compatibility_Testing">hier</a> für weitere Informationen</li>
+  </ul>
+ </li>
+ <li>wenden Sie sich über <a class="link-irc" href="irc://irc.mozilla.org/#mobile">IRC</a> an das Team oder nehmen Sie an unserem <a class="link-https" href="https://wiki.mozilla.org/Mobile/Notes">mittwöchigen Entwicklertreffen</a> teil</li>
+ <li>verfolgen Sie Projektneuigkeiten auf <a class="external" href="http://planet.firefox.com/mobile/">planet firefox</a> und <a class="link-https" href="https://twitter.com/#!/mozmobile" title="https://twitter.com/#!/mozmobile">Twitter</a></li>
+ <li><a href="https://wiki.mozilla.org/Mobile/Fennec/Android" title="https://wiki.mozilla.org/Mobile/Fennec/Android">build and hack on Firefox for Android</a> (Fennec)</li>
+</ul>
+
+<h2 id="Entwickeln_für_das_mobile_Web">Entwickeln für das mobile Web</h2>
+
+<p>Wir haben begonnen eine Anleitung zum <a href="/de/docs/Mozilla/Mobile" title="En/Mobile">Gestalten von Websites für Mobilgeräte</a> zusammenzuschreiben.</p>
+
+<p>Mit Firefox für Android erhalten Sie Zugang zu einer Reihe von APIs, die das unterliegende Leistungsvermögen des Gerätes zum Vorschein bringen und somit die Lücke zwischen Web und systemeigenen Anwendungen schließen:</p>
+
+<ul>
+ <li><a class="external external-icon" href="https://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/">Akku</a></li>
+ <li><a href="/de/docs/Web/Guide/Introduction_to_the_Camera_API" title="Using the Camera API">Kamera</a></li>
+ <li><a href="/de/docs/Web/Guide/Telephony/Introduction_to_WebTelephony" title="Introduction to WebTelephony">WebTelefonie</a></li>
+ <li><a href="/de/docs/WebAPI/WebSMS/Introduction_to_WebSMS" title="Introduction to WebSMS">WebSMS</a></li>
+ <li><a href="/de/docs/WebAPI/Using_geolocation" title="Using geolocation">Ortung</a></li>
+ <li><a href="/de/docs/WebAPI/Detecting_device_orientation" title="https://developer.mozilla.org/en/detecting_device_orientation">Orientierung</a></li>
+</ul>
+
+<p>Um Ihre Website auf Firefox für Android zu testen, können Sie <a class="external external-icon" href="https://www.mozilla.org/de/firefox/">ihn auf Ihrem Android Gerät installieren</a> oder <a class="link-https" href="https://wiki.mozilla.org/Mobile/Fennec/Android/Emulator">ihn auf ihrem Desktop mithilfe des Android Emulators laufen lassen</a>.</p>
+
+<h2 id="Erstellen_mobiler_Add-ons">Erstellen mobiler Add-ons</h2>
+
+<p><a href="/de/docs/Extensions/Mobile" title="en/Extensions/Firefox_on_Android">Firefox für Android unterstützt Add-ons</a> durch genau das gleiche <a href="/en/Extensions" title="en/Extensions">Erweiterungssystem</a>, das auch alle anderen Gecko-basierten Anwendungen verwenden. Wir haben kein neues Add-on-System erfunden. Das bedeutet, dass beim Erstellen eines Add-ons für Firefox für Android <a href="/de/docs/Erweiterung_erstellen" title="en/Building_an_Extension">der gleiche Prozess</a> verwendet wird wie für den Desktop Firefox. Add-ons, die im Desktop Firefox laufen, laufen <strong>nicht</strong> automatisch im Firefox auf Android. Die Benutzeroberflächen sind einfach zu unterschiedlich.</p>
+
+<div class="note">Firefox auf Android hat eine eindeutige Anwendungskennung, die in <code>install.rdf</code> angegeben werden muss. Die Kennung ist <code>{aa3c5121-dab2-40e2-81ca-7ea25febc110}</code></div>
+
+<p>Sowohl die klassischen Add-on-Herangehensweisen, die einen Neustart erfordern, als auch die neueren Add-on-Herangehensweisen, die <a href="/de/docs/Extensions/Bootstrapped_extensions" title="en/Extensions/Bootstrapped_extensions">ohne Neustart</a> auskommen, werden unterstützt. Die Herangehensweise, die ohne Neustart auskommt, ist wann immer möglich die bevorzugte, weil gegenüber dem erzwungenen Anwendungsneustart beim Installieren und Entfernen von Add-ons das Nutzererlebnis hier weitaus besser ist.</p>
+
+<h3 id="Kurzer_Überblick">Kurzer Überblick</h3>
+
+<ul>
+ <li>Es gibt kein sichtbares XUL in der Benutzeroberfläche, deshalb ist die Verwendung von Overlays zum Hinzufügen von Oberflächen oder das Verändern der Oberfläche wirkungslos.</li>
+ <li>Interner Code und Objekte, wie <code>gBrowser</code>, existieren nicht. Schauen Sie sich die Datei <a class="external" href="http://mxr.mozilla.org/mozilla-central/source/mobile/android/chrome/content/browser.js" title="http://mxr.mozilla.org/mozilla-central/source/mobile/android/chrome/content/browser.js"><code>browser.js</code></a> von Firefox für Android an, um über Interna zu erfahren. Much of the same fundamental functionality exists.</li>
+ <li>Dienste wie <code>nsIPromptService</code> und <code>nsIAlertsService</code> sind implementiert um die systemeigene Android-Benutzeroberfläche benutzen zu können.</li>
+ <li>Es gibt ein einfaches JavaScript-Objekt namens <a href="/en/Extensions/Mobile/API/NativeWindow" title="en/Extensions/Mobile/NativeWindow"><code>NativeWindow</code></a>, das einem erlaubt Teile der systemeigenen Android-Benutzeroberfläche zu manipulieren.</li>
+</ul>
+
+<h2 id="Erhalten_Sie_Hilfe_zu_Firefox_für_Android">Erhalten Sie Hilfe zu Firefox für Android</h2>
+
+<p>Dokumentationen und Tutoriale zur Verwendung und Fehlerbehebung von Firefox für Android sind auf der <a class="external" href="http://support.mozilla.org/de/products/mobile" title="http://support.mozilla.org/mobile">Mozilla Support Website</a> verfügbar.</p>
diff --git a/files/de/mozilla/index.html b/files/de/mozilla/index.html
new file mode 100644
index 0000000000..64886b45c6
--- /dev/null
+++ b/files/de/mozilla/index.html
@@ -0,0 +1,12 @@
+---
+title: Mozilla
+slug: Mozilla
+tags:
+  - TopicStub
+translation_of: Mozilla
+---
+<div>
+  {{draft}}</div>
+<p>Das hier wird bald eine geniale Zielseite für internes von Mozilla sein. Aber momentan ist es das nicht.</p>
+<div>
+  {{ListSubpages}}</div>
diff --git a/files/de/mozilla/javascript_code_modules/deutsch/index.html b/files/de/mozilla/javascript_code_modules/deutsch/index.html
new file mode 100644
index 0000000000..361b8eaa94
--- /dev/null
+++ b/files/de/mozilla/javascript_code_modules/deutsch/index.html
@@ -0,0 +1,197 @@
+---
+title: Benutzung von JavaScript Code Modulen
+slug: Mozilla/JavaScript_code_modules/Deutsch
+tags:
+  - Anleitung
+  - Erweiterungen
+  - JavaScript
+  - XPCOM
+translation_of: Mozilla/JavaScript_code_modules/Using
+---
+<div>{{gecko_minversion_header("1.9")}}</div>
+
+<p>Das Konzept von JavaScript Code Modulen wurde in {{Gecko("1.9")}} eingeführt und dient der gemeinsamen Verwendung von Code in unterschiedlichen Anwendungsbereichen. Module können außerdem dazu genutzt werden, globale JavaScript Singletons anzulegen, wofür früher JavaScript XPCOM Objekte nötig waren. Ein javaScript Code Modul ist nichts weiter als eine Sammlung von JavaScript code, der an einem bestimmten Ort abgelegt ist. Solch ein Modul wird mit <code><a href="/en-US/docs/Components.utils.import">Components.utils.import()</a></code> oder <code><a href="/en-US/docs/Components.utils.import">Components.utils["import"]()</a></code> in einen bestimmten JavaScript Anwendungsbereich geladen, etwa ein XUL oder JavaScript XPCOM Script.</p>
+
+<h2 id="Erstellen_eines_JavaScript_Code_Moduls">Erstellen eines JavaScript Code Moduls</h2>
+
+<p>Ein sehr einfaches JavaScript Modul sieht so aus:</p>
+
+<pre class="brush: js">var EXPORTED_SYMBOLS = ["foo", "bar"];
+
+function foo() {
+  return "foo";
+}
+
+var bar = {
+  name : "bar",
+  size : 3
+};
+
+var dummy = "dummy";
+</pre>
+
+<p>Wie zu sehen ist, verwendet das Modul reguläres JavaScript, um Funktionen, Objekte, Konstanten und jeden anderen JavaScript Datentyp anzulegen. Das Modul definiert außerdem eine spezielle Variable namens <code>EXPORTED_SYMBOLS</code>. Alle JavaScript Objekte, die in <code>EXPORTED_SYMBOLS</code> angeführt sind, werden aus dem Modul exportiert und in den Anwendungsbereich geladen, der das Modul einbindet. Ein Beispiel:</p>
+
+<pre class="brush: js">Components.utils.import("resource://app/my_module.jsm");
+
+alert(foo());         // displays "foo"
+alert(bar.size + 3);  // displays "6"
+alert(dummy);         // displays "dummy is not defined" because 'dummy' was not exported from the module
+</pre>
+
+<div class="note"><strong>Hinweis:</strong> Wenn Änderungen an einem Modul getestet werden sollen, muss immer darauf geachtet werden, die Versionsnummer der Anwendung zu erhöhen. Andernfalls kann es passieren, dass die vorherige Version des Moduls verwendet wird.</div>
+
+<h3 id="Die_URL_eines_Code_Moduls">Die URL eines Code Moduls</h3>
+
+<p>Wie im obigen Beispiel ersichtlich ist, benötigt man für den Import eines Code Moduls eine URL. (Die URL im Beispielcode ist "resource://app/my_module.jsm".)</p>
+
+<p>Code Module können nur mit einer <strong>chrome:</strong> ({{gecko_minversion_inline("2")}}), <strong>resource:</strong>, oder <strong>file:</strong> URL geladen werden.</p>
+
+<ul>
+ <li>Wenn Du eine Erweiterung für Firefox 4 entwickelst und bereits ein <a href="/de/docs/Chrome_Registration">chrome.manifest</a> mit einer <code>content</code> Anweisung verwendest, kannst du das Modul einfach in den content Ordner legen und auf die selbe Art referenzieren wie andere content Dateien, mit <code>chrome://&lt;yourextension&gt;/content/&lt;yourmodule&gt;.jsm</code>.</li>
+ <li>Wenn deine Erweiterung Mozilla 1.9x (Firefox 3.x) unterstützen soll, muss eine neue Resourcen URL registriert werden. Wie das geht, wird weiter unten in <a href="#Extending_resource.3A_URLs">"Extending resource: URLs"</a> behandelt.</li>
+</ul>
+
+<h3 id="Gemeinsame_Verwendung_von_Objekten">Gemeinsame Verwendung von Objekten</h3>
+
+<p>Eine besonders wichtige Eigenschaft von <code><a href="/en-US/docs/Components.utils.import">Components.utils.import()</a></code> ist es, dass Module beim erstmaligen Importieren im Zwischenspeicher abgelegt werden und alle weiteren Importvorgänge diese gespeicherte Version verwenden anstatt das Modul neu zu laden. Das bedeutet, dass das Modul von allen Anwendungsbereichen die es importiert haben, gemeinsam verwendet wird. Alle Änderungen von Daten, Objekten oder Funktionen sind in jeden Anwendungsbereich, der das Modul benutzt, sichtbar. Wenn wir beispielsweise unser einfaches Modul in zwei JavaScript Bereichen importieren, können Änderungen aus einem Bereich auch im anderen Bereich beobachtet werden.</p>
+
+<p>Bereich 1:</p>
+
+<pre class="brush: js">Components.utils.import("resource://app/my_module.jsm");
+
+alert(bar.size + 3);  // displays "6"
+
+bar.size = 10;
+</pre>
+
+<p>Bereich 2:</p>
+
+<pre class="brush: js">Components.utils.import("resource://app/my_module.jsm");
+
+alert(foo());         // displays "foo"
+alert(bar.size + 3);  // displays "13"
+</pre>
+
+<p>Durch diese Eigenschaft können Module als Singleton Objekte verwendet werden um Daten zwischen verschiedenen Fenstern, oder auch zwischen XUL Scripten und XPCOM Objekten, auszutauschen.</p>
+
+<p>{{Note("Jeder Bereich, der ein Modul importiert, erhält eine Kopie (by-value) aller exportierten Symbole des Moduls. Änderungen der Werte in dieser Kopie werden nicht an andere Bereiche weitergeleitet (allerdings werden Objekteigenschaften per Referenz manipuliert).")}}</p>
+
+<p>Bereich 1:</p>
+
+<pre class="brush: js">Components.utils.import("resource://app/my_module.jsm");
+
+bar = "foo";
+alert(bar);         // displays "foo"
+</pre>
+
+<p>Bereich 2:</p>
+
+<pre class="brush: js">Components.utils.import("resource://app/my_module.jsm");
+
+alert(bar);         // displays "[object Object]"
+</pre>
+
+<p>Der Haupteffekt dieser by-value Kopie besteht darin, dass globale Variablen eines einfachen Typs nicht in allen Bereichen geteilt werden. Variablen sollten daher immer in eine Wrapper Klasse gehüllt werden (siehe <code>bar</code> im obigen Beispiel).</p>
+
+<p>{{h2_gecko_minversion("Code Module Entladen", "7.0")}}</p>
+
+<p>Mit <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Components.utils.unload">Components.utils.unload()</a></code> kann ein zuvor importiertes Modul wieder entladen werden. Nach dem Aufruf dieser Funktion sind zwar alte Referenzen auf das Modul weiterhin gültig, aber ein nachträgliches Importieren wird das Modul neu laden und ihm auch eine neue Referenz zuweisen.</p>
+
+<h3 id="Beispiele">Beispiele</h3>
+
+<ul>
+ <li>Eine Vorlage zum Download gibt es auf <a href="https://gist.github.com/Noitidart/9045387">GitHub - Gists - _template-BootstrapJSM.xpi</a></li>
+</ul>
+
+<h2 id="Erweiterung_von_resource_URLs">Erweiterung von resource: URLs</h2>
+
+<p>Vor der Einführung von {{Gecko("2.0")}} war der übliche Weg, ein Modul einzubinden, die <strong>resource:</strong> URL. Die grundlegende Syntax sieht wie folgt aus:</p>
+
+<pre>resource://&lt;alias&gt;/&lt;relative-path&gt;/&lt;file.js|jsm&gt;
+</pre>
+
+<p><code>&lt;alias&gt;</code> bezeichnet einen Ort, üblicherweise einen physikalischen Ort relativ zur Anwendung oder der XUL Laufzeitumgebung. Die XUL Laufzeitumgebung bietet verschiedene vordefinierte Aliase:</p>
+
+<ul>
+ <li><code>app</code> - Speicherort der XUL Anwendung</li>
+ <li><code>gre</code> - Speicherort der XUL Laufzeitumgebung</li>
+</ul>
+
+<p>Der Pfad in <code>&lt;relative-path&gt;</code> kann beliebig tief sein und ist immer relativ zum in <code>&lt;alias&gt;</code> angegbenen Ort. Der übliche relative Pfad, der auch von XUL Runner und Firefox verwendet wird, ist "modules". Code Module sind einfache JavaScript Dateien mit einer .js oder .jsm Dateiendung.</p>
+
+<p>Das verwendete <code>&lt;alias&gt;</code> muss für jede Erweiterung einzigartig sein, da alle definierten Alias Werte aller Anwendungen und Erweiterungen in einem gemeinsamen Namespace gespeichert werden.</p>
+
+<h3 id="Mittels_chrome.manifest">Mittels chrome.manifest</h3>
+
+<p>Die einfachste Möglichkeit, ein neues Alias für eine Erweiterung oder XUL Anwendung anzulegen, besteht darin, eine Zeile wie die Folgende in <a href="/en-US/docs/Chrome_Registration">chrome manifest</a> einzufügen:</p>
+
+<pre>resource <em>aliasname</em> <em>uri/to/files/</em>
+</pre>
+
+<p>Wenn zum Beispiel die XPI deiner<em> foo</em> Erweiterung einen top-level Ordner namens modules/ besitzt, in dem sich das <em>bar.js</em> Modul befindet (das beudeutet, der modules/ Ordner liegt neben chrome.manifest und install.rdf), kann ein Alias etwa so angelegt werden:</p>
+
+<pre>resource foo modules/
+</pre>
+
+<p>(Beachte den Schrägstrich am Ende!) Danach kannst du das Modul wie folgt in deinen JavaScript Code importieren:</p>
+
+<pre class="brush: js">Components.utils.import("resource://foo/bar.js");
+</pre>
+
+<h3 id="Programmatisches_Hinzufügen_eines_Alias">Programmatisches Hinzufügen eines Alias</h3>
+
+<p>Aliase auf Pfade, die als {{interface("nsILocalFile")}} dargestellt werden können, können auch programmatisch angelegt werden. Zum Beispiel:</p>
+
+<pre class="brush: js">// Import Services.jsm unless in a scope where it's already been imported
+Components.utils.import("resource://gre/modules/Services.jsm");
+
+var resProt = Services.io.getProtocolHandler("resource")
+                      .QueryInterface(Components.interfaces.nsIResProtocolHandler);
+
+var aliasFile = Components.classes["@mozilla.org/file/local;1"]
+                          .createInstance(Components.interfaces.nsILocalFile);
+aliasFile.initWithPath("/some/absolute/path");
+
+var aliasURI = Services.io.newFileURI(aliasFile);
+resProt.setSubstitution("myalias", aliasURI);
+
+// assuming the code modules are in the alias folder itself
+</pre>
+
+<h2 id="Anmerkungen">Anmerkungen</h2>
+
+<h3 id="Eigene_Module_und_XPCOM_Komponenten">Eigene Module und XPCOM Komponenten</h3>
+
+<p>In früheren Versionen als {{Gecko("2.0")}} werden JavaScript XPCOM Komponenten bereits vor der Chrome Registrierung geladen. Das bedeutet, dass <code><a href="/en-US/docs/Components.utils.import">Components.utils.import()</a></code> nicht mit einer eigenen URL in einer Komponente verwendet werden kann. Eine mögliche Lösung des Problems besteht darin, den Aufruf von <code><a href="/en-US/docs/Components.utils.import">Components.utils.import()</a></code> in den Konstruktor der XPCOM Komponente zu legen (<a href="http://groups.google.com/group/mozilla.dev.apps.firefox/browse_thread/thread/e178d41afa2ccc87?hl=en#">Diskussion</a>).</p>
+
+<h3 id="Packaging_Anmerkungen">Packaging Anmerkungen</h3>
+
+<p>Unter normalen Umständen gibt es keinen guten Grund JavaScript Code Module in einer JAR Datei zu verpacken. Von Firefox 3.6 wird diese Form der Distribution gar nicht unterstützt. Nur in einem Anwendungsfall kann es sinnvoll sein, Module in JAR zu packen: In einer Erweiterung, die nur Firefox 4 unterstützt, und die ungepackt installiert werden muss. In allen anderen Fällen wird dadurch nur unnötigerweise die Kompatibilität zerstört.</p>
+
+<h2 id="CommonJS_Module_Importieren">CommonJS Module Importieren</h2>
+
+<p>Die hier beschriebenen JavaScript Code Module sind nicht zu verwechseln mit <a href="http://www.commonjs.org/specs/modules/1.0/">CommonJS modules</a>, aber auch CommonJS Module können in jeden Bereich importiert werden, der <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Language_Bindings/Components.utils.import">Components.utils.import</a> unterstützt. Der folgende Aufruf wird <code>require()</code> in deinen Anwendungsbereich importieren:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">const</span> <span class="punctuation token">{</span> require <span class="punctuation token">}</span> <span class="operator token">=</span> Cu<span class="punctuation token">.</span><span class="keyword token">import</span><span class="punctuation token">(</span><span class="string token">"resource://gre/modules/commonjs/toolkit/require.js"</span><span class="punctuation token">,</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">)</span></code></pre>
+
+<p>Damit können danach andere CommonJS Module importiert werden. Auch <a href="/en-US/docs/Mozilla/Add-ons/SDK">Add-on SDK</a> Module können auf die selbe Art importiert werden, wie aus einem SDK Add-on:</p>
+
+<pre class="brush: js">// import the SDK's base64 module
+
+var base64 = require("sdk/base64");
+base64.encode("hello"); // "aGVsbG8="</pre>
+
+<p>Auch andere CommonJS Module können importiert werden, solange der Pfad bekannt ist:</p>
+
+<pre class="brush: js">// import my module
+
+var myModule = require("resource://path/to/my/module.js");</pre>
+
+<p>In diesem Fall kann es aber ratsam sein, <a href="/de/Add-ons/SDK/Low-Level_APIs/_loader">einen eigenen Loader</a> zu entwickeln, damit das <code><a href="/en-US/Add-ons/SDK/Low-Level_APIs/_loader#paths">paths</a></code> Attribut selbst gewählt werden kann.</p>
+
+<h2 id="See_also" name="See_also">Weiterführende Links</h2>
+
+<ul>
+ <li><a href="/de/docs/Mozilla/JavaScript_code_modules">JavaScript code modules</a> Themenseite</li>
+</ul>
diff --git a/files/de/mozilla/javascript_code_modules/index.html b/files/de/mozilla/javascript_code_modules/index.html
new file mode 100644
index 0000000000..1a977f72f2
--- /dev/null
+++ b/files/de/mozilla/javascript_code_modules/index.html
@@ -0,0 +1,102 @@
+---
+title: JavaScript code modules
+slug: Mozilla/JavaScript_code_modules
+tags:
+  - Add-ons
+  - Extensions
+  - JavaScript
+  - Landing
+  - Modules
+  - NeedsTranslation
+  - TopicStub
+  - XPCOM
+translation_of: Mozilla/JavaScript_code_modules
+---
+<p>JavaScript code modules let multiple privileged JavaScript scopes share code. For example, a module could be used by Firefox itself as well as by extensions, in order to avoid code duplication.</p>
+
+<h2 id="General_topics">General topics</h2>
+
+<dl style="-moz-columns: 2; columns: 2;">
+ <dt><a href="/en-US/docs/JavaScript_code_modules/Using" title="./Using">Using JavaScript code modules</a></dt>
+ <dd>An introduction to how to use JavaScript code modules.</dd>
+ <dt><a href="/en-US/docs/Components.utils.import" title="Components.utils.import">Components.utils.import</a></dt>
+ <dd>How to import a JavaScript code module.</dd>
+ <dt><a href="/en-US/docs/Components.utils.unload" title="Components.utils.unload">Components.utils.unload</a></dt>
+ <dd>How to unload a JavaScript code module.</dd>
+ <dt><a href="/en-US/docs/Code_snippets/Modules" title="Code_snippets/Modules">Code snippets: Modules</a></dt>
+ <dd>Examples of how to use code modules.</dd>
+ <dt><a class="external" href="http://wiki.mozilla.org/Labs/JS_Modules">Mozilla Labs JS Modules</a></dt>
+ <dd>This page features a list of JS modules, along with download links and documentation, that extension developers can use in their code.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Standard_code_modules">Standard code modules</h2>
+
+<dl style="-moz-columns: 2; columns: 2;">
+ <dt><a href="/en-US/docs/Addons/Add-on_Manager" title="Addons/Add-on_Manager">AddonManager.jsm</a></dt>
+ <dd>Interface to install, manage, and uninstall add-ons.</dd>
+ <dt><a href="/en-US/docs/Addons/Add-on_Repository" title="Addons/Add-on Repository">AddonRepository.jsm</a></dt>
+ <dd>Allows searching of the add-ons repository.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Assert.jsm" title="./Assert.jsm">Assert.jsm</a></dt>
+ <dd>Implements the <a href="http://wiki.commonjs.org/wiki/Unit_Testing/1.1" title="http://wiki.commonjs.org/wiki/Unit_Testing/1.1">CommonJS Unit Testing specification version 1.1</a>, which provides a basic, standardized interface for performing in-code logical assertions with optional, customizable error reporting.</dd>
+ <dt>BookmarkHTMLUtils.jsm</dt>
+ <dd>Provides utility functions for importing and exporting bookmarks from the old-school "bookmarks.html" style bookmark files.</dd>
+ <dt><a href="/en-US/docs/Mozilla/js-ctypes" title="./ctypes.jsm">ctypes.jsm</a></dt>
+ <dd>Provides an interface that allows JavaScript code to call native libraries without requiring the development of an XPCOM component.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/CustomizableUI.jsm" title="./ctypes.jsm">CustomizableUI.jsm</a></dt>
+ <dd>Allows you to interact with customizable buttons and items in Firefox's main window UI.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/DeferredTask.jsm" title="./DeferredTask.jsm">DeferredTask.jsm</a></dt>
+ <dd>Run a task after a delay.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Dict.jsm" title="./Dict.jsm">Dict.jsm</a></dt>
+ <dd>Provides an API for key/value pair dictionaries.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/DownloadLastDir.jsm" title="./DownloadLastDir.jsm">DownloadLastDir.jsm</a></dt>
+ <dd>Provides the path to the directory into which the last download occurred.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Downloads.jsm" title="./Downloads.jsm">Downloads.jsm</a></dt>
+ <dd>Provides a single entry point to interact with the downloading capabilities of the platform.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/FileUtils.jsm" title="./FileUtils.jsm"><strong style="font-weight: bold;">FileUtils.jsm</strong></a></dt>
+ <dd>Provides helpers for dealing with files.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Geometry.jsm" title="./Geometry.jsm">Geometry.jsm</a></dt>
+ <dd>Provides routines for performing basic geometric operations on points and rectangles.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Http.jsm" title="./Geometry.jsm">HTTP.jsm</a></dt>
+ <dd>A wrapper for XMLHttpRequest that provides convenient and simplified API for dealing with HTTP requests.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/JNI.jsm">JNI.jsm</a></dt>
+ <dd>Abstracts the js-ctypes to provide an interface that allows JavaScript code to call code running in native JVMs.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/ISO8601DateUtils.jsm" title="./ISO8601DateUtils.jsm">ISO8601DateUtils.jsm</a></dt>
+ <dd>Provides routines to convert between JavaScript <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date" title="JavaScript/ Reference/Global Objects/Date"><code>Date</code></a> objects and ISO 8601 date strings.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Log.jsm">Log.jsm</a> (formerly log4moz)</dt>
+ <dd>Provides a <a href="https://en.wikipedia.org/wiki/Log4j">log4j</a> style API for logging log messages to various endpoints, such as the <a href="/en-US/docs/Tools/Browser_Console">Browser Console</a> or a file on disk. This module was formerly</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/NetUtil.jsm" title="./NetUtil.jsm"><strong style="font-weight: bold;">NetUtil.jsm</strong></a></dt>
+ <dd>Provides helpful networking utility functions, including the ability to easily copy data from an input stream to an output stream asynchronously.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/openLocationLastURL.jsm" title="./openLocationLastURL.jsm">openLocationLastURL.jsm</a></dt>
+ <dd>Provides access to the last URL opened using the "Open Location" option in the File menu.</dd>
+ <dt><a href="/Mozilla/JavaScript_code_modules/OSFile.jsm" title="/en-US/docs/JavaScript_OS.File">OSFile.jsm</a></dt>
+ <dd>Provides routines to access files. Read, write, rename, create directories, ...</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/PerfMeasurement.jsm" title="./PerfMeasurement.jsm">PerfMeasurement.jsm</a></dt>
+ <dd>Provides access to low-level hardware and OS performance measurement tools.</dd>
+ <dt><a href="/en-US/docs/Localization_and_Plurals" title="Localization and Plurals">PluralForm.jsm</a></dt>
+ <dd>Provides an easy way to get the correct plural forms for the current locale, as well as ways to localize to a specific plural rule.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/PopupNotifications.jsm" title="./PopupNotifications.jsm">PopupNotifications.jsm</a></dt>
+ <dd>Provides an easy way to present non-modal notifications to users.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm" title="./Promise.jsm">Promise.jsm</a></dt>
+ <dd>Implements the <a class="external" href="https://github.com/promises-aplus/promises-spec/blob/1.0.0/README.md" title="https://github.com/promises-aplus/promises-spec/blob/1.0.0/README.md">Promises/A+</a> proposal as known in April 2013.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/PromiseWorker.jsm">PromiseWorker.jsm</a></dt>
+ <dd>A version of {{domxref("ChromeWorker")}} which uses promises to return the worker's result instead of using an event to do so.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Services.jsm" title="./Services.jsm">Services.jsm</a></dt>
+ <dd>Provides getters for conveniently obtaining access to commonly-used services.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/source-editor.jsm" title="./source-editor.jsm">source-editor.jsm</a></dt>
+ <dd>The Source Editor is used by developer tools such as the Style Editor; this interface implements the editor and lets you interact with it.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Sqlite.jsm" title="./Sqlite.jsm">Sqlite.jsm</a></dt>
+ <dd>A Promise-based API to mozIStorage/SQLite.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Task.jsm" title="./Task.jsm">Task.jsm</a></dt>
+ <dd>Implements a subset of <a class="external" href="https://taskjs.org/">Task.js</a> to make sequential, asynchronous operations simple, using the power of JavaScript's <code>yield</code> operator.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Timer.jsm" title="/en-US/docs/Mozilla/JavaScript_code_modules/Timer.jsm">Timer.jsm</a></dt>
+ <dd>A pure JS implementation of <code>window.setTimeout</code>.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Webapps.jsm" title="/en-US/docs/Mozilla/JavaScript_code_modules/Timer.jsm">Webapps.jsm</a></dt>
+ <dd>Provides an interface to manager Open Web Apps.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/WebRequest.jsm">WebRequest.jsm</a></dt>
+ <dd>Provides an API to add event listeners for the various stages of making an HTTP request. The event listener receives detailed information about the request, and can modify or cancel the request.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/XPCOMUtils.jsm" title="./XPCOMUtils.jsm">XPCOMUtils.jsm</a></dt>
+ <dd>Contains utilities for JavaScript components loaded by the JS component loader.</dd>
+</dl>
diff --git a/files/de/mozilla/localization/index.html b/files/de/mozilla/localization/index.html
new file mode 100644
index 0000000000..54d427c2de
--- /dev/null
+++ b/files/de/mozilla/localization/index.html
@@ -0,0 +1,25 @@
+---
+title: Lokalisation bei Mozilla
+slug: Mozilla/Localization
+tags:
+  - Landing
+  - Localization
+  - Mozilla
+  - NeedsTranslation
+  - TopicStub
+  - Translation
+  - l10n
+translation_of: Mozilla/Localization
+---
+<p><span class="seoSummary"><strong>Localization</strong> (L10n) ist die Übersetzung der Benutzeroberfläche von einer Sprache in die andere, um diese so einer anderen Sprache und Kultur anzupassen. Diese Quellen stehen jedem zur Verfügung, der sich für die technischen Aspekte der L10n interessiert - Entwicklern und Helfern</span></p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<dl>
+ <dt><a href="/de/docs/MDN/Contribute/Localize">Lokalisieren von MDN</a></dt>
+ <dd>Diese Ressource beinhaltet die Lokalization der Dokumentation hier bei MDN.</dd>
+ <dt><a href="/en-US/Apps/Build/Localization">App localization</a></dt>
+ <dd>Diese Sammlung von Dokumenten bezieht sich genauer auf das Lokalisieren von Apps, inklusive Firefox OS apps.</dd>
+ <dt><a href="/en-US/docs/Web/API/L10n">L10n</a></dt>
+ <dd>Referenzdokumente für die L10n API, die Mozilla für das Lokalisieren von Firefox OS nutzt.</dd>
+</dl>
diff --git a/files/de/mozilla/localization/kodierung_fuer_lokalisierungs-dateien/index.html b/files/de/mozilla/localization/kodierung_fuer_lokalisierungs-dateien/index.html
new file mode 100644
index 0000000000..46b60bbf1f
--- /dev/null
+++ b/files/de/mozilla/localization/kodierung_fuer_lokalisierungs-dateien/index.html
@@ -0,0 +1,137 @@
+---
+title: Kodierungen für Lokalisierungsdateien
+slug: Mozilla/Localization/Kodierung_fuer_Lokalisierungs-Dateien
+tags:
+  - Internationalisierung
+  - Lokalisierung
+translation_of: Mozilla/Localization/Encodings_for_localization_files
+---
+<p>Beim Erstellen einer Lokalisierung für Mozilla Produkte ist es wichtig die Kodierung der Dateien zu beachten, die man generiert.</p>
+
+<p>Im Allgemeinen sind Dateien im Mozilla Repository UTF-8 kodiert. Es gibt allerdings einige wenige Ausnahmen.</p>
+
+<h3 id="Installer" name="Installer">Installer</h3>
+
+<p>Der Windows Installer unterstützt UTF-8 nicht, sondern nur die von Windows vorgegebenen Zeichensatztabellen. Die Einbindung in den Erstellungsprozess ist kompliziert, daher hier einige Hinweise:  </p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td class="header">Datei</td>
+   <td class="header">Kodierung</td>
+   <td class="header">Hinweise</td>
+  </tr>
+  <tr>
+   <td>toolkit/installer/windows/charset.mk</td>
+   <td>ASCII</td>
+   <td>Die Variable WIN_INSTALLER_CHARSET muss eine Kodierung haben, die mit dem Parameter CHARSET= aus toolkit/installer/windows/install.it übereinstimmt. Geeignete Werte siehe in der Tabelle unten. </td>
+  </tr>
+  <tr>
+   <td>toolkit/installer/windows/install.it</td>
+   <td>
+    <p>Eine Zeichensatztabelle von Windows. Der Parameter CHARSET= in dieser Datei und der Parameter WIN_INSTALLER_CHARSET in der Datei charset.mk müssen mit dem Zeichensatz übereinstimmen.</p>
+   </td>
+   <td>Die Parameter FONTNAME/FONTSIZE/CHARSET in dieser Datei müssen geeigete Werte haben. Für die meisten westlichen Zeichensätze sind die Werte "MS Sans Serif" und "8" sinnvolle Standardwerte. Für östliche Schriftsätze müssen geeignete Schriftarten aus dem Lieferumfang von Windows ausgewählt werden. Geeignete Werte für den Parameter CHARSET= siehe in der Tabelle unten.</td>
+  </tr>
+  <tr>
+   <td>browser/installer/installer.inc</td>
+   <td>UTF-8</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>toolkit/installer/unix/install.it</td>
+   <td>UTF-8</td>
+   <td>{{ Deprecated_inline() }}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Native_Windows_encodings" name="Native_Windows_encodings">Native Windows-Kodierungen</h4>
+
+<p>Die nachfolgende Tabelle beinhaltet native Windows-Kodierungen und die jeweiligen Werte für WIN_INSTALLER_CHARSET und CHARSET=:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Kodierungsbezeichnung</td>
+   <td class="header">WIN_INSTALLER_CHARSET (charset.mk)</td>
+   <td class="header">CHARSET= (windows/install.it)</td>
+  </tr>
+  <tr>
+   <td>ANSI_CHARSET</td>
+   <td>CP1252</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>BALTIC_CHARSET</td>
+   <td>CP1257</td>
+   <td>186</td>
+  </tr>
+  <tr>
+   <td>CHINESEBIG5_CHARSET</td>
+   <td>CP950</td>
+   <td>136</td>
+  </tr>
+  <tr>
+   <td>EASTEUROPE_CHARSET</td>
+   <td>CP1250</td>
+   <td>238</td>
+  </tr>
+  <tr>
+   <td>GB2312_CHARSET</td>
+   <td>CP936</td>
+   <td>134</td>
+  </tr>
+  <tr>
+   <td>GREEK_CHARSET</td>
+   <td>CP1253</td>
+   <td>161</td>
+  </tr>
+  <tr>
+   <td>HANGUL_CHARSET</td>
+   <td>CP949</td>
+   <td>129</td>
+  </tr>
+  <tr>
+   <td>RUSSIAN_CHARSET</td>
+   <td>CP1251</td>
+   <td>204</td>
+  </tr>
+  <tr>
+   <td>SHIFTJIS_CHARSET</td>
+   <td>CP932</td>
+   <td>128</td>
+  </tr>
+  <tr>
+   <td>TURKISH_CHARSET</td>
+   <td>CP1254</td>
+   <td>162</td>
+  </tr>
+  <tr>
+   <td>VIETNAMESE_CHARSET</td>
+   <td>CP1258</td>
+   <td>163</td>
+  </tr>
+  <tr>
+   <td colspan="3"><strong>Windows Sprachversionen Middle East</strong>:</td>
+  </tr>
+  <tr>
+   <td>ARABIC_CHARSET</td>
+   <td>CP1256</td>
+   <td>178</td>
+  </tr>
+  <tr>
+   <td>HEBREW_CHARSET</td>
+   <td>CP1255</td>
+   <td>177</td>
+  </tr>
+  <tr>
+   <td colspan="3"><strong>Windows Sprachversionen Thai</strong>:</td>
+  </tr>
+  <tr>
+   <td>THAI_CHARSET</td>
+   <td>CP874</td>
+   <td>222</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/de/mozilla/localization/localization_content_best_practices/index.html b/files/de/mozilla/localization/localization_content_best_practices/index.html
new file mode 100644
index 0000000000..d5b4c70dfc
--- /dev/null
+++ b/files/de/mozilla/localization/localization_content_best_practices/index.html
@@ -0,0 +1,324 @@
+---
+title: Localization content best practices
+slug: Mozilla/Localization/Localization_content_best_practices
+translation_of: Mozilla/Localization/Localization_content_best_practices
+---
+<div class="summary">
+<p> </p>
+
+<p><span class="seoSummary">Dieses Dokument stellt Entwicklern bewährte Methoden zum Erstellen von standortabhängigem Code bereit und beschreibt wie man häufige Fehler, bei der Lokalisierbarkeit verhindert.</span></p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: If you're a localizer and you want to contribute to the localization of Mozilla products, you might want to read our <a href="/en-US/docs/Mozilla/Localization/Quick_start_guide">Localization quick start guide</a> for information on localizing Mozilla code.</p>
+</div>
+
+<h2 id="Note_on_localizers">Note on localizers</h2>
+
+<p>Mozilla localizers a volunteers with very diverse technical skills: some of them rely exclusively on translation tools, others prefer to work directly with text editors and don't have problems working with VCS systems.</p>
+
+<p>It's important to consider this when adding strings, and especially localization comments for strings that contain references, or obscure technical details.</p>
+
+<h2 id="Localization_files">Localization files</h2>
+
+<h3 id="Choose_good_key_IDs">Choose good key IDs</h3>
+
+<p>The IDs (names) chosen for your keys, regardless of the file format, should always be descriptive of the string, and its role in the interface (button label, title, etc.). Think of them as long variable names. When you have to change a key ID, adding a progressive number to the existing key should always be used as a last resort. For example, suppose this string needs to be changed from "Event" to "Add New Event":</p>
+
+<pre>new-event-header = Event</pre>
+
+<p><code>add-new-event-header</code> is definitely a better choice for the new string than <code>new-event-header1</code>.</p>
+
+<p>If a string is tied to an accesskey or a tooltip, use string IDs that highlight this relation:</p>
+
+<pre>neweventbtn.label = Add event
+neweventbtn.accesskey = A
+neweventbtn.tooltip = Add a new event
+</pre>
+
+<h3 id="Don't_duplicate_IDs">Don't duplicate IDs</h3>
+
+<p>If you're adding new strings, check that you're not duplicating an existing ID. Depending on the parser logic, one of these two translations will be ignored.</p>
+
+<h3 id="Add_localization_notes">Add localization notes</h3>
+
+<p>Localizers usually work on the localizable files without the context of the source files including the localized strings; it is important to add comments to the localizable files themselves, too. These comments are generally referred to as localization notes.</p>
+
+<p>Don't forget to add a localization note when:</p>
+
+<ul>
+ <li>Part of the string is not supposed to be localized (for example, the name of an HTML attribute in a warning).</li>
+ <li>String includes variables: always explain what will be the value of these variables at run-time.</li>
+ <li>English could be ambiguous. For example: <code>bookmark</code>. Is this a noun or a verb? Using meaningful IDs could also help in these cases.</li>
+ <li>Strings are used in a specific context. For example accessibility (a11y) strings: in this case space is less important than clarity, since these strings are not displayed in the UI but used by tools like screen readers.</li>
+</ul>
+
+<p>There is an established format for localization comments: it's important to follow the format as closely as possible, since there are a number of automated tools that parse these comments for easier access and use by localizers.</p>
+
+<h4 id="DTD_files">DTD files</h4>
+
+<pre class="eval language-html">&lt;!-- LOCALIZATION NOTE (entity name): \{{privacy}} will be replaced at run-time by an
+     active link. the string 'privacy-link' will be used as text for this link. --&gt;
+</pre>
+
+<h4 id="Properties_files">Properties files</h4>
+
+<pre class="eval language-html"># LOCALIZATION NOTE(privacy-text): \{{privacy}} will be replaced at run-time by an
+# active link. the string 'privacy-link' will be used as text for this link.
+privacy-text = By proceeding you accept the \{{privacy}}.
+privacy-link = Privacy Terms
+</pre>
+
+<p>File-wide comments should use the same format, they should be at the top of the file (after the license header) and just drop the <em>(entity name/key)</em> reference.</p>
+
+<h3 id="Land_good_quality_strings">Land good quality strings</h3>
+
+<ul>
+ <li>Don't land temporary strings. If you already know that your strings are temporary, they shouldn't be exposed to the localization process. This would waste everybody's time and create unnecessary frustration: localizers have to translate strings that are destined to change, developers will need to <a href="#Changing_existing_strings">use new IDs</a> later to update them.</li>
+ <li>If you're reviewing a patch, check also strings for grammar errors, capitalization or inconsistencies. For example, use the single Unicode …, and not three dots. If you have any doubts about the quality of strings, ask a copywriter to do a copy review of this text. Ideally, all strings landing in code should originate from approved UX wireframes, any copy review should be part of the initial stage of creating these wireframes.</li>
+</ul>
+
+<h4 id="Use_Unicode_characters_over_their_ASCII_counterparts_when_possible">Use Unicode characters over their ASCII counterparts when possible</h4>
+
+<p>Strings should use directional quotation marks when possible.</p>
+
+<ul>
+ <li>U+2018 and U+2019 (\u2018 and \u2019 in JavaScript) are the left and right single quotation marks, respectively. The right single quotation mark should be used as an apostrophe.</li>
+ <li>U+201C and U+201D (\u201c and \u201d in JavaScript) are the left and right double quotation marks, respectively. The pair should be used to surround statements and references to user input.
+  <ul>
+   <li>Example:  You have chosen a keyword that is currently in use by “%S”. Please select another.</li>
+   <li>Example: Search %1$S for “%2$S”</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Non-directional single, and double, quotation marks should be used in reference to HTML code, or other languages where ASCII character usage is required, such as HTML. <em>HTML does not prefer one over the other, and our codebase uses them interchangeably as of March 2016.</em></p>
+
+<ul>
+ <li>Example: This web page at &lt;span id='malware_sitename'/&gt; has been reported as an attack page and has been blocked based on your security preferences.</li>
+</ul>
+
+<p>U+2026 (\u2026) is the horizontal ellipsis character. This character should be used in place of three consecutive periods.</p>
+
+<h2 id="Create_localizable_strings">Create localizable strings</h2>
+
+<h3 id="Don't_assume_grammar_structures">Don't assume grammar structures</h3>
+
+<p>You need to consider the need for different grammar structures in different locales, and add switching mechanisms to present them appropriately. You shouldn't make assumptions as to what those structures will be: instead, let locales/localizers decide. When in doubt, ask the localizers.</p>
+
+<h4 id="Date_and_time_formats">Date and time formats</h4>
+
+<p>For example, you shouldn't hard code date formats into applications:</p>
+
+<pre>%A, %b %e
+// resulting in Wednesday, May 20</pre>
+
+<p>This is fine in English, but in Italian results in "Mercoledì, Mag 20", which sounds unnatural. Every time you use this kind of structure, you should have a localizable string behind it, and let localizers decide the best order for their language.</p>
+
+<h4 id="Units">Units</h4>
+
+<p>Another example is localizing percentages or units. Some locales use a space between the number and the % symbol, some don't, some use a non-breaking space.</p>
+
+<h4 id="Splitting">Splitting</h4>
+
+<p>Splitting sentences into several keys often inadvertently presumes a grammar, a sentence structure, and such composite strings are often very difficult to translate. When a composite string is needed, try to give the translators "room to move".</p>
+
+<h4 id="Word_Order">Word Order</h4>
+
+<p>If a string will contain a placeholder, always add the placeholder to the string to allow the localizer to change the word order if necessary. For example, it might seem ok in English to present the strings <code>[username] says: </code>to localizers simply as <code>says:</code> but this will cause serious issues in many other languages as the agent of an action often will not come in front of the verb, but some other position. For example in Irish/Gaelic the correct order is <code>be [username] at saying:</code>. If a placeholder is present, this can be correctly localized as <code>Tá %s ag rádh:</code> but not without.</p>
+
+<p>Similarly, if the UI string is <code>Flash Version</code>, do not simply present the translator with <code>Version </code>for translation. Present the whole string or, if there is a significant need for a placeholder, use a placeholder. the word Version may have to go before or after <code>Flash </code>and one or both may need to be inflected.</p>
+
+<h4 id="Idiom">Idiom</h4>
+
+<p>Idiom, in a loose sense, also has an impact on localization if it leads to strings being prepared in a way that renders them unlocalizable. For example, in English all the following begin with the same clause: <code>The URL of this feed is invalid; The URL of this feed cannot be reached; The URL of this feed cannot be parsed</code>. It might be tempting to 'save time' by presenting this as <code>The URL of this feed %s</code> and then <code>is invalid; cannot be reached</code> and <code>cannot be parsed</code>. However, linguistically these are different types of sentences and will be handled differently in other languages. This is usually not a case of translator choice but obligatory in the language. For example, in Gaelic these sentences must be translated as <code>Tha URL an inbhir seo mì-dhligheach;Cha ruig sinn URL an inbhir seo</code> and <code>Cha ghabh URL an inbhir seo a pharsadh</code>.</p>
+
+<div class="blockIndicator geckoVersionNote">
+<p>Unless there are significant savings of translation volume involved, it is usually easier and quicker for translators to handle these as fixed strings rather than composed strings, especially considering the time needed for locating, checking and potentially fixing composed strings.</p>
+</div>
+
+<h4 id="Case_and_inflections">Case and inflections</h4>
+
+<p>(Also see section on Placeholders)</p>
+
+<p>Many languages have features like noun classes (i.e. nouns belonging to different categories and are treated differently by the grammar), case and inflections (changes are made to a word to indicate differences in meaning or use) and so on. In modern English, such features are rare and are mainly restricted to plural <code>-s</code> and verb forms (e.g. <code>go &gt; went</code> is a form of inflection). Examples from other languages:</p>
+
+<ul>
+ <li>Gender in German: nouns can be either masculine, feminine or neuter. The most obvious impact is that the definite article which in English is always <code>the </code>can either be <code>der, die</code> or <code>das</code>. To complicate matters, if the grammatical context changes, the article will change: <code><span style="background-color: #add8e6;">Der</span> Text</code> 'the text' changes to <code>Wollen Sie <span style="background-color: #add8e6;">den</span> Text speichern?</code> 'Do you want to save the text?'</li>
+ <li>Suffixes in Basque: where English tends to use expressions such as 'to the' or 'from the', Basque adds an ending to a word to express the same concept. For example <code><span style="background-color: #add8e6;">From the</span> menu</code> in Basque is <code>Menu<span style="background-color: #add8e6;">tik</span> </code>and <code><span style="background-color: #add8e6;">To the</span></code><code> printers</code> is <code>Inprimagailu<span style="background-color: #add8e6;">ei</span></code>.</li>
+</ul>
+
+<div class="blockIndicator geckoVersionNote">
+<p><strong>Implication:</strong> Using placeholders for something like 'the text' or 'the file' works well in English but is likely to cause severe headaches for localizers if the placeholders cannot be inflected.</p>
+</div>
+
+<h3 id="Use_proper_plural_forms">Use proper plural forms</h3>
+
+<p>Firefox supports proper <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Localization/Localization_and_Plurals">plural forms</a>. As a native English speaker, you might find it natural to use</p>
+
+<pre>delete-cookie = Delete cookie
+delete-cookies = Delete cookies
+</pre>
+
+<p>In Firefox this should be</p>
+
+<pre class="language-html"># LOCALIZATION NOTE (delete-cookies): Semi-colon list of plural forms.
+# See: http://developer.mozilla.org/en/docs/Localization_and_Plurals
+# #1 is the number of cookies to delete
+# example:
+delete-cookies = Delete #1 cookie;Delete #1 cookies</pre>
+
+<div class="blockIndicator geckoVersionNote">
+<p><strong>Important:</strong> always include the localization note with this format if you use a plural form in Firefox. This comment is used by tools to identify strings with plural forms.</p>
+</div>
+
+<p>One last advice: never use plural form as a replacement for single/multiple conditional. See {{ Bug("658191") }} for more details.</p>
+
+<h3 id="Use_ordered_variables_in_string_with_multiple_variables">Use ordered variables in string with multiple variables</h3>
+
+<p>Consider this string from /browser:</p>
+
+<pre>generalSiteIdentity=This website is owned by %S\nThis has been verified by %S</pre>
+
+<p>First thing: always add a localization comment explaining what these variables mean, even if it seems obvious. Using multiple <code>%S</code> give the impression that the order of variables if fixed, which is actually not.</p>
+
+<pre># LOCALIZATION NOTE(generalSiteIdentity): %1$S is the owner of the current website,
+# %2$S is the name of the Certification Authority signing the certificate.
+generalSiteIdentity=This website is owned by %1$S\nThis has been verified by %2$S</pre>
+
+<h3 id="Avoid_concatenations_use_placeholders_instead">Avoid concatenations, use placeholders instead</h3>
+
+<p>Consider this string:</p>
+
+<pre>tos-text = By proceeding you accept the
+tos-link = Terms of Services
+</pre>
+
+<p>Most developers would consider this a good solution and display the concatenation of <code>tos-text+tos-link</code>, with an active link on the second part. Unfortunately, this won't work at all: you need at least a third string to place after the link, without that some languages won't be able to create a natural sounding sentence.<br>
+ <br>
+ A much more flexible solution would be:</p>
+
+<pre># LOCALIZATION NOTE(tos-text): \{{link}} will be replaced at run-time
+# by an active link. String with ID 'tos-link' will be used as text
+# for this link.
+tos-text = By proceeding you accept the \{{link}}
+tos-link = Terms of Services</pre>
+
+<p>And then replace <code>\{{link}}</code> at run-time with the second string. Note also the localization comments and make sure it is clear to the localizer which placeholder string will appear in lieu of the placeholder as this may affect translation and/or inflection. For example, <code>By proceeding you accept the \{{Terms of Service}}</code> will result in the Gaelic translation <code>Ma leanas tu air adhart, bidh tu a' gabhail ri \{{teirmichean na seirbheise}}</code>. But in another grammatical context, <code>\{{Terms of Service}}</code> may require a different inflection, for example <code>\{{<span style="background-color: #add8e6;">th</span>eirmichean na seirbheise}}</code>. So if the localizer is left unsure as to which string goes into which placeholder, this may lead to bad translations.</p>
+
+<h3 id="Don't_reuse_strings_in_different_contexts">Don't reuse strings in different contexts</h3>
+
+<p>This is particularly important for mobile, where different context often means different font and available space for the string. For example, if you're adding a new menu item in Settings on Android, don't use the same string for the menu item and the following screen header.</p>
+
+<p>Another example, some locales use nouns for titles, and verbs for actions (for example button labels). Sometimes they coincide with English, but they rarely do in other languages. Take <code>Bookmark</code>: it can be both a noun and a verb in English. A developer could be tempted to reuse the same string "Bookmark" in the button to add a bookmark, and in the header for the next dialog. This won't work in some languages.</p>
+
+<h3 id="Avoid_unnecessary_complexity_in_strings">Avoid unnecessary complexity in strings</h3>
+
+<p>Consider this string:</p>
+
+<pre class="brush: html">privacy-link = &lt;p&gt;By proceeding you accept the &lt;a href="https://www.mozilla.org/privacy" class="external"&gt;Privacy Terms&lt;/a&gt;.&lt;/p&gt;</pre>
+
+<p>In this case, you shouldn't put the URL inside the localization string, unless you need it to be localizable. If you change the URL, you're going to need a new string ID; the same goes for the anchor's attributes, or the paragraph markup. Instead, you should use the following strings</p>
+
+<pre># LOCALIZATION NOTE(privacy-text): \{{link}} will be replaced at run-time
+# by an active link. String with ID 'privacy-link' will be used as text
+# for this link.
+privacy-text = By proceeding you accept the \{{link}}.
+privacy-link = Privacy Terms</pre>
+
+<p>And then replace <code><code>{</code>{link}}</code> at run-time with the link.</p>
+
+<h3 id="Don't_hardcode_characters">Don't hardcode characters</h3>
+
+<p>Typically white spaces, commas, or other separators (":", "|").</p>
+
+<p>If you need a trailing white space in a string, use the Unicode character \u0020 (that's usually a bad sign, you're concatenating it to another string). At some point, someone will accidentally trim that whitespace.</p>
+
+<h3 id="Remove_unused_strings">Remove unused strings</h3>
+
+<p>If you're removing features, don't leave around unused strings in the .properties file.</p>
+
+<h3 id="Tooltips">Tooltips</h3>
+
+<p>If a string is used as a tooltip, it should not end in a period (in English). Tooltips are never written in imperative mood but infinitive mood instead. Hence the proper absence of periods to indicate this isn't just a matter of consistency for en-US, as it is also vital info for localizers.</p>
+
+<h3 id="Menu_and_control_labels">Menu and control labels</h3>
+
+<p>The labels on controls and menu titles, menu option strings, and so forth should not end in periods (in English). These are generally not complete sentences, but instead, phrases that convey the idea of a concept or action. Therefore, for both correctness and consistency within en-US, please leave out the trailing periods for these items. This also helps with localization.</p>
+
+<h3 id="Developer_tools_key_shortcuts">Developer tools key shortcuts</h3>
+
+<p>When translating Firefox strings from /devtools/ folder, you may see some keys like this:</p>
+
+<pre class="sourcelines"><span class="difflineplus" id="l8.16">inspector.searchHTML.key=CmdOrCtrl+F</span></pre>
+
+<p>The first part of the string `<em>CmdOrCtrl</em>` should not be translated. You may only translate the letter to better match your locale. This key shortcut definition matches the <a href="https://github.com/electron/electron/blob/master/docs/api/accelerator.md">Electron key shortcut definition</a>.</p>
+
+<h2 id="Create_localizable_UI">Create localizable UI</h2>
+
+<h3 id="CSS_issues">CSS issues</h3>
+
+<p>Some CSS text/font properties may cause problems with text legibility when applied to certain language texts.</p>
+
+<ul>
+ <li>Avoid using Italic for CJKT. This acronym stands for: <span class="st">Chinese (Simplified and Traditional), Japanese, Korean, and Taiwanese</span>.</li>
+ <li>The {{ cssxref("text-transform") }} property is not reliable for some locales; for example, <code>text-transform: uppercase</code> won't work properly with languages such as Irish/Gaelic. For example, <code>App Size</code> in English may be capitalized via <code>text-transform: uppercase</code> to <code>APP SIZE</code> but in Gaelic this would change <code>Meud na h-aplacaid</code> to <code>MEUD NA H-APLACAID</code> which violates the locales orthographic rules, as it ought to be <code>MEUD NA hAPLACAID</code>. In general, localizers should make the decision about capitalization. If you want to display <code>WARNING</code>, add a string with that capitalization, and explain it in the localization note.</li>
+</ul>
+
+<h3 id="Design_for_50">Design for +50%</h3>
+
+<p>Bear in mind that English strings will likely be a lot shorter than their international equivalents, so you need to leave some space in your UI to allow for this. Some examples:</p>
+
+<ul>
+ <li><code>OK</code> in English becomes <code>Ceart ma-thà</code> in Gaelic.</li>
+ <li><code>Save document?</code> in English becomes <code>A bheil thu airson an sgrìobhainn a shàbhaladh</code> in Gaelic.</li>
+</ul>
+
+<p>Another good example is Yes/No. There are two types of languages, those that have Yes/No as a single word, and those that don't and work on mirroring the verb. For example, a <code>Do you want to open the page?</code> &gt; <code>Yes/No</code> dialog works in English, but in Gaelic/Irish/Welsh and several other languages the equivalent answer is <code>Want/Not want</code>.</p>
+
+<p>W3C has a good <a href="http://www.w3.org/International/articles/article-text-size">guide</a> on the length ratios a developer should be prepared for.</p>
+
+<h2 id="Test_localizability">Test localizability</h2>
+
+<p>As a developer, you should always test your patches not just for code errors, but also for localizability issues in case they involve string or UI changes.</p>
+
+<h3 id="Gecko_and_mozilla-central">Gecko and mozilla-central</h3>
+
+<p>First, make sure that there are no hard-coded strings, and all strings are available in localization files (.dtd, .properties). One possible way to test a patch for localizability issues is to alter the en-US localization files, adding extraneous characters to the original strings: this can help to identify both hard-coded strings and "flexibility issues" in the UI.</p>
+
+<h2 id="Changing_existing_strings">Changing existing strings</h2>
+
+<h3 id="Updating_Entity_Names">Updating Entity Names</h3>
+
+<p>If you are changing a string such that its meaning has changed, you must update the entity or property name for the string to match the new meaning. If your changes are relevant only for English — for example, to correct a typographical error or to make letter case consistent — then there is generally no need to update the entity name.</p>
+
+<p>Changing the string ID will invalidate the existing translation, the new string will be reported as missing in all tools, and localizers will have to retranslate it. Given the diversity of tools used by localization teams, this is the only reliable method to ensure that localizers update existing localizations.</p>
+
+<p>If you change the entity or property name of a string, you must also update all instances where that entity or property name is used in the source code, including localization comments.</p>
+
+<p>If you change the entity or property name of a string, and the string has an accompanying access key, command key, or tooltip, you should update their names as well for consistency. This change is fundamental for access keys, since many localization tools use the entity name to connect an access key to its label. For example, to check if it's using a character not available in the original string, given entities "useBookmark.label" and "useBookmark.accesskey", if you change to "chooseBookmark.label" due to a string change, change the access key entity to "chooseBookmark.accesskey" to match it.</p>
+
+<h3 id="String_freeze">String freeze</h3>
+
+<p>Some repositories are considered to be <em>string-frozen</em>. This means that string changes are not allowed to land, and each case must be evaluated before landing. As a general rule, it's recommended to fix strings on the trunk/master repository, and create ad-hoc patches for string frozen repositories that don't involve string changes. Note that even removing strings is considered a breakage.</p>
+
+<p>In the case of Firefox and Thunderbird, string frozen repositories are: mozilla-aurora, mozilla-beta, mozilla-release.</p>
+
+<h2 id="Bugzilla_and_l10n">Bugzilla and l10n</h2>
+
+<h3 id="Do_I_need_l10n_feedback">Do I need l10n feedback?</h3>
+
+<p>Feedback from <a href="https://wiki.mozilla.org/L10n:Mozilla_Team">l10n-drivers</a> is not necessary for each landing involving strings, as long as you're following the basic rules described in this document. If you have doubts about the localizability of some text or structure (not about the text itself, that would need copywriters), it's definitely good to ask feedback.</p>
+
+<h3 id="Keywords_l12y_late-l10n">Keywords: l12y, late-l10n</h3>
+
+<p>Two keywords are generally used on Bugzilla:</p>
+
+<ul>
+ <li>l12y: it's used to track "localizability" bugs. A bug marked with l12y describes an issue that prevents localizers to create a good quality localization. Some examples: hard-coded strings, implicit grammar structure in the code, lack of plural forms support, UI that breaks with long strings, etc.</li>
+ <li>late-l10n: it's used by release-drivers to identify bugs, involving new strings, that will land late in the cycle, typically after soft string freeze in Firefox OS.</li>
+</ul>
+
+<h3 id="Alias_l10n">Alias :l10n</h3>
+
+<p>The :l10n alias on Bugzilla (community@localization.bugs) is followed by some localizers and it could be CC'd to gather opinions from the wider l10n community (no point in opening NEEDINFO or requiring actions from this alias). There is also a <a href="https://lists.mozilla.org/listinfo/dev-l10n">dev-l10n mailing list</a> and a #l10n channel on IRC, they might be a good place to ask questions.</p>
diff --git a/files/de/mozilla/localization/lokalisierung_mit_mercurial/index.html b/files/de/mozilla/localization/lokalisierung_mit_mercurial/index.html
new file mode 100644
index 0000000000..6f7835ed1b
--- /dev/null
+++ b/files/de/mozilla/localization/lokalisierung_mit_mercurial/index.html
@@ -0,0 +1,252 @@
+---
+title: Lokalisierung mit Mercurial
+slug: Mozilla/Localization/Lokalisierung_mit_Mercurial
+translation_of: Mozilla/Localization/Localizing_with_Mercurial
+---
+<p>Für Mozillla verwenden wir das Versionskontrollsystem von <a href="../../../../en/Mercurial_basics" rel="internal">Mercurial</a> (Hg) zur Verwaltung des Quellcodes und der Lokalisierungen. Mit Mercurial können Lokalisierer lokal arbeiten (auf dem eigenen Rechner) und dann die Änderungen an ein Remote-Repository hochladen (<code style="font-size: 14px;">push</code>), das überlicherweise auf den Mozilla-Servern (<a class="external" href="http://hg.mozilla.org/" title="http://hg.mozilla.org/">hg.mozilla.org</a>) gehostet wird. Für die Lokalisierung aktueller Versionen von Firefox, Thunderbird und SeaMonkey wird Mercurial verwendet. Falls die Dokumentation unvollständig ist oder du Fragen hast, schau bitte bei den <a href="irc://irc.mozilla.org/l10n" title="irc://irc.mozilla.org/l10n">#l10n</a>- oder <a href="irc://irc.mozilla.org/hg" title="irc://irc.mozilla.org/hg">#hg</a>-Kanälen oder auf irc.mozilla.org vorbei. Es lohnt sich auch die <a class="internal" href="/en/Mercurial_FAQ" title="En/Mercurial FAQ">Mercurial FAQ</a> zu lesen, falls du auf ein Problem stoßen solltest.</p>
+
+<p>Für die Motivierten und Schnellen unter euch folgen hier Anweisungen zur Installation und Konfiguration von Mercurial, eine Anleitung dazu, wie man Hochlade-Rechte für seinen Hg-Account erhält und einige Aufgaben, die ohne Account-Rechte erfüllt werden können.</p>
+
+<h2 id="Mercurial_installieren">Mercurial installieren</h2>
+
+<p>Befolge die nachfolgenden Anweisungen um Mercurial auf deinem System zu installieren. Sobald du mit der Installation von Mercurial fertig bist, zeigen wir dir Schritt für Schritt wie man Mercurial <a href="/en/Mercurial_FAQ#Configuration" title="en/Mercurial FAQ#Configuration">konfiguriert</a>.</p>
+
+<h3 id="Mercurial_unter_Linux">Mercurial unter Linux</h3>
+
+<p>Mit einem der folgenden Befehle ist es ganz einfach möglich Mercurial aus der Befehlszeile  heraus zu installieren. Wähle den zu deiner Distribution passenden Befehl aus und stelle sicher, dass das Terminal als <em>root</em> läuft.</p>
+
+<pre># Debian/ubuntu
+$ apt-get install mercurial
+
+# Fedora
+$ yum install mercurial
+
+# Gentoo
+$ emerge mercurial
+
+# Arch Linux
+$ pacman -S mercurial
+
+# OpenSolaris
+$ pkg install SUNWmercurial
+</pre>
+
+<p>Wenn du eine grafische Oberfläche bevorzugst kannst du <a href="http://javaforge.com/project/HGE">MercurialEclipe hier herunterladen und istallieren</a>.</p>
+
+<h4 id="Hat_es_funktioniert">Hat es funktioniert?</h4>
+
+<p>Öffne ein Terminalfenster und gib folgenden Befehl ein: <code>hg --version</code>. Wenn eine Meldung mit der Version von Mercurial erscheint (z. B. <code>Mercurial Distributed SCM (version 1.3.1)</code>), war die Installation von Mercurial erfolgreich.</p>
+
+<h4 id="Weitere_Details">Weitere Details</h4>
+
+<p>Weitere Details zur Installation von Hg auf Linus-Systemen findest in den <a href="https://www.mercurial-scm.org/downloads">Anweisungen auf der Download-Seite von Mercurial</a>. </p>
+
+<h3 id="Mercurial_unter_Windows">Mercurial unter Windows</h3>
+
+<p>Unter Windows gibt es zwei Möglichkeiten zur Installation:</p>
+
+<ul>
+ <li>Herunterladen und installieren des {{ interwiki("wikimo", "MozillaBuild") }}-Paketes für eine <strong>Befehlszeilenschnittstelle</strong>. So wird nicht nur Hg installiert, sondern auch alle Tools, die für die Erstellung von Mozilla-Produkten unter Windows benötigt werden. trust us, you'll want this eventually.</li>
+ <li><a href="/@api/deki/files/3863/=TortoiseHg.png" title="TortoiseHg.png"><img alt="TortoiseHg.png" class="internal rwrap" src="/@api/deki/files/3863/=TortoiseHg.png?size=thumb" style="float: right; height: 115px; width: 160px;"></a>Installieren von <a class="external" href="http://tortoisehg.bitbucket.org/" title="http://tortoisehg.bitbucket.org/">TortoiseHg</a> für eine <strong>grafische Oberfläche</strong>. TurtoiseHg wird in die Windows Explorer-Shell integriert und installiert zusätzlich das Befehlszeilenprogramm.</li>
+</ul>
+
+<p><a href="/@api/deki/files/3861/=Mercurial_Installer.png" title="Mercurial Installer.png"><img alt="Mercurial Installer.png" class="internal rwrap" src="/@api/deki/files/3861/=Mercurial_Installer.png?size=thumb" style="float: right; height: 125px; width: 160px;"></a>Bei derr Befehlszeileninstallation von Hg unter Windows ist es wichtig sicherzustellen, dass sich die ausführbare Datei von <code>hg</code> in der Variable <code>%PATH%</code> des Systems befindet (für TortoiseHg is dieser Schritt nicht nötig). Verwende das Hilfsprogramm <code>add_path.exe</code>, das unter <code>C:\mozilla-build\hg</code> zu finden ist, um diesen Schritt auszuführen.</p>
+
+<pre>PS C:\Users\your_id&gt; cd C:\mozilla-build\hg
+PS C:\mozilla-build\hg&gt; .\add_path.exe /result .
+</pre>
+
+<p>Beachte, dass der Punkt ("<code>.</code>") am Ende des zweiten Befehl für das <em>aktuelle Verzeichnis</em> steht. Wenn das Hilfsprogramm <code><em>%PATH%</em></code> erfolgreich modifiziert hat, öffnet sich ein Dialog mit der Meldung "<em><code>%PATH%</code> wurde korrekt aktualisiert</em>".</p>
+
+<p>Alternativ kann die Variable <code><em>%PATH%</em></code> auch manuell bearbeitet werden. Klicke hierfür mit der rechten Maustaste auf den Eintrag Computer im Startmenü, gehe zu <code>Eigenschafte &gt; Erweitert &gt; Umgebungsvariablen</code>, wähle <code>PATH</code> und klicke auf <code>Bearbeiten</code>. Wenn xx in der Auswahl nicht angezeigt wird, musst du auf <code>Hinzufügen</code> klicken und die Bearbeitung innerhalb des Dialogs <strong>Hinzufügen</strong> vornehmen (Beispiel siehe Screenshot).<br>
+ <a href="/@api/deki/files/3862/=PATH.jpg" title="PATH.jpg"><img alt="PATH.jpg" class="internal rwrap" src="/@api/deki/files/3862/=PATH.jpg?size=thumb" style="float: right; height: 71px; width: 160px;"></a></p>
+
+<h4 id="Hat_es_funktioniert_2">Hat es funktioniert?</h4>
+
+<ol>
+ <li>Gehe zu <code>Start &gt; Ausführen...</code></li>
+ <li>Gib <code>cmd.exe</code> ein und klicke auf <code>OK</code>. Ein neues Shell-Fenster sollte erscheinen.</li>
+ <li>Gib im neuen Shell-Fenster <code>hg --version</code> ein. Wenn eine Meldung mit der Version von Mercurial erscheint (z. B. <code>Mercurial Distributed SCM (version 1.3.1)</code>), war die Installation von Mercurial erfolgreich.</li>
+</ol>
+
+<h4 id="Weitere_Details_2" style="font-size: 14px;">Weitere Details</h4>
+
+<p>Weitere Details zur Installation von Hg unter Windows findest in den <a href="https://www.mercurial-scm.org/downloads">Anweisungen auf der Download-Seite von Mercurial</a>.</p>
+
+<h3 id="Mercurial_unter_Mac_OSX">Mercurial unter Mac OSX</h3>
+
+<p>Die Installation von Hg unter Mac OSX ist sehr einfach. Mit Hilfe von <a class="external" href="http://www.macports.org/" title="http://www.macports.org/">MacPorts</a> kann Mercurial über das Terminal mit folgendem Befehl installiert werden:</p>
+
+<p><code>$ sudo port install mercurial</code></p>
+
+<p>Es ist außerdem möglich Mercurial über die dmg-Datei von der <a href="http://mercurial.selenic.com/wiki/Download#Mac_OS_X" title="http://mercurial.selenic.com/wiki/Download#Mac_OS_X">Hg Download-Seite</a> zu installieren. Hier wird man über einen Installations-Dialog Schritt für Schritt durch den Prozess geleitet.</p>
+
+<p>Wenn du eine grafische Oberfläche bevorzugst, kannst du <a href="http://javaforge.com/project/HGE">MercurialEclipse hier herunterladen und installieren</a>.</p>
+
+<h4 id="Hat_es_funktioniert_3">Hat es funktioniert?</h4>
+
+<p>Öffne ein Terminal-Fenster und gib folgenden Befehl ein: <code>hg --version</code>. Wenn eine Meldung mit der Version von Mercurial erscheint (z. B. <code>Mercurial Distributed SCM (version 1.3.1)</code>), war die Installation von Mercurial erfolgreich.</p>
+
+<h4 id="Weitere_Details_3" style="font-size: 14px;">Weitere Details</h4>
+
+<p>Weitere Details zur Installation von Hg unter Mac OSX findest in den <a href="https://www.mercurial-scm.org/downloads">Anweisungen auf der Download-Seite von Mercurial</a>.</p>
+
+<h2 id="Mercurial_konfigurieren">Mercurial konfigurieren</h2>
+
+<p>Sobald Mercurial installiert wurde, muss es konfiguriert werden, um genutzt werden zu können.</p>
+
+<p>Die Mercurial-Konfiguration befindet sich in einer config-Datei, die du selbst erstellen musst. Je nach Betriebssystem heißt die config-Datei entweder <code style="font-size: 14px; color: rgb(51, 51, 51);">~/.hgrc</code> (UNIX-Systeme) oder <code style="font-size: 14px; color: rgb(51, 51, 51);">Mercurial.ini</code> (Windows).</p>
+
+<p>Die config-Datei sollte die folgenden Einstellungen haben:</p>
+
+<pre class="eval">[ui]
+username = Your Real Name &lt;<a class="link-mailto" href="mailto:user@example.com" rel="external" title="mailto:user@example.com">user@example.com</a>&gt;
+merge = internal:merge
+
+[defaults]
+commit = -v
+
+[diff]
+git = 1
+showfunc = 1
+unified = 8</pre>
+
+<p>Befolge folgende Schritte für die Konfiguration von Hg: </p>
+
+<ol>
+ <li>Erstelle eine neue Datei in einem Texteditor deiner Wahl. </li>
+ <li>Kopiere die Einstellungen oben und füge sie in diese neue Datei ein. </li>
+ <li>Speichere die Datei entweder unter dem Namen <code>.hgrc</code> (UNIX-Systeme) oder <code>Mercurial.ini</code> (Windows) und lege Sie in unter <code>$HOME/</code> oder <code>C:\mozilla-build\hg\</code> or <code>C:\Program Files\Mercurial\</code> ab.</li>
+</ol>
+
+<p>Wenn die Installation und Konfiguration von Hg abgeschlossen ist, gibt es einige Aufgaben die ohne Upload-Rechte für Hg ausgeführt werden können. </p>
+
+<h2 id="Repositorys_klonen_und_aktualisieren">Repositorys klonen und aktualisieren</h2>
+
+<p>Es gibt ein paar Repositorys mit  en-US Quelldateien, die für die meisten Localea relevant sind:</p>
+
+<ul>
+ <li><a class="external" href="https://hg.mozilla.org/mozilla-central/" title="https://hg.mozilla.org/mozilla-central/">mozilla-central</a> beinhaltet Dateien für Firefox Nightly.</li>
+ <li><a class="external" href="https://hg.mozilla.org/comm-central/" title="https://hg.mozilla.org/comm-central">comm-central</a> beinhaltet Dateien für SeaMonkey und Thunderbird, die nicht auch schon Teil von Firefox sind. </li>
+ <li><a href="https://hg.mozilla.org/l10n-central/" title="https://hg.mozilla.org/l10n-central/">l10n-central</a> beinhaltet alle L10n-Repositrys für Firefox Nightly.</li>
+</ul>
+
+<div class="note">
+<p>Wenn man das comm-central Repository erstellt, beinhaltet dieses auch das mozilla-central repository. Es ist also möglich, das für die Entwicklung von Firefox, SeaMonkey und Thunderbird konfigurierte Repository zu verwenden, ohne mozilla-central ein weiteres Mal anlegen zu müssen. </p>
+</div>
+
+<p>So erstellt (oder klont) man die en-US Quelldateien beim ersten Mal:</p>
+
+<ul>
+ <li>Führe den folgenden Befehl in der Kommandozeile aus, um die en-US Quelldateien für Firefox zu erhalten:</li>
+</ul>
+
+<pre class="eval">hg clone https://hg.mozilla.org/mozilla-central/
+</pre>
+
+<p>So wird das mozilla-central Repository ins Verzeichnis mozilla-central geklont.</p>
+
+<ul>
+ <li>Führe die folgenden Befehle in der Kommandozeile aus, um die en-US Quelldateien für Firefox, SeaMonkey und/oder Thunderbird zu erhalten:</li>
+</ul>
+
+<pre>hg clone https://hg.mozilla.org/comm-central/
+cd comm-central
+python client.py checkout
+</pre>
+
+<p>Der erste Befehl erstellt einen Klon des comm-central Repositorys. Der zweite Befehl führt dich zu diesem Verzeichnis. Der dritte Befehl erstellt einen Klon von mozilla-central und legt einige weitere hg-Repositorys an. Die anderen Verzeichnisse werden für SeaMonkey und Thunderbird benötigt.</p>
+
+<ul>
+ <li>Das erstmalige Klonen des Lokalisierungs-Repositorys ist genauso einfach. Um beispielsweise das Firefox Nightly L10N Repository zu klonen, führe folgenden Befehl aus und ersetze ab-CD mit dem Code deiner Locale.</li>
+</ul>
+
+<pre class="eval" style="font-size: 14px;">hg clone https://hg.mozilla.org/l10n-central/ab-CD/</pre>
+
+<h3 id="Lokale_Repositorys_aktualisieren">Lokale Repositorys aktualisieren</h3>
+
+<ul>
+ <li>Um deine Arbeitskopie von mozilla-central zu aktualisieren, gehe zum lokalen mozilla-central Verzeichnis und führe folgenden Befehl aus:</li>
+</ul>
+
+<pre class="eval">hg pull -u
+</pre>
+
+<p>Dieser Befehl ruft neue Changesets von mozilla-central ab und wendet diese Änderungen auf deine Arbeitskopie an.</p>
+
+<ul>
+ <li>Um deine Arbeitskopie von comm-central zu aktualisieren, gehe zum lokalen comm-central Verzeichnis und führe folgenden Befehl aus:</li>
+</ul>
+
+<pre>python client.py checkout</pre>
+
+<p>Dieser Befehl ruft neue Changesets von comm-central, mozilla-central und anderen passenden Repositorys ab und wendet diese Änderungen auf deine Arbeitskopie an.</p>
+
+<ul>
+ <li>Um das lokale L10n Repository nach dem ersten Klonen zu aktualieren, führe folgenden Befehl aus dem lokalen L10n-Verzeichnis aus:</li>
+</ul>
+
+<pre style="font-size: 14px;">hg pull -u</pre>
+
+<h2 id="L10n-Patches_erstellen">L10n-Patches erstellen</h2>
+
+<p>Another thing you can do with Hg without needing account priviledges is creating L10n patches of your work for someone else to commit to your remote L10n repo on the Mozilla servers. Doing this ensures that your dashboards are always accurate, as they look at your remote repo.</p>
+
+<p>Here's how to create a L10n patch with Hg and the <a href="http://mercurial.selenic.com/wiki/MqExtension" title="http://mercurial.selenic.com/wiki/MqExtension">Mq extension</a>:</p>
+
+<ol>
+ <li>Enable Mq by adding <code>hg.ext = </code> to your Mercurial config file (<code>~/.hgrc</code> on Unix-like systems or <code>Mercurial.ini</code> on Windows) under the <code>[extensions]</code> section.</li>
+ <li>Open your command line tool and navigate to your L10n directory.</li>
+ <li>Inside your L10n directory, init your repo with Mq by running <code>hg init --mq</code>.</li>
+ <li>To create a new patch, run <code>hg qnew -m "Your commit message" patch-name.patch</code>. The commit message should take the form of "Bug 123456 - Change this thing to work better by doing something; r=reviewers" if you are to fix a bug.</li>
+ <li>Make your change.</li>
+ <li>Once you finish making your change, run <code>hg qrefresh</code> to commit your changes to the patch.</li>
+ <li>Navigate to your <code>&lt;repository&gt;/.hg/patches</code> to find your <code>.patch</code>.</li>
+ <li>You may repeat from step 4 to create another patch. Your patches will be incremental, i.e. new patches are created based on old patches. If you want to commit all the patches to the repository and cleanup the patch queue, run <code>hg qfinish</code>.</li>
+</ol>
+
+<p>Please refer to <a href="http://mercurial.selenic.com/wiki/MqTutorial" title="http://mercurial.selenic.com/wiki/MqTutorial">MqTutorial</a> and <a href="http://mercurial.selenic.com/wiki/MqExtension" title="http://mercurial.selenic.com/wiki/MqExtension">Mq documentation</a> for further uses of Mq extension to manage patches.</p>
+
+<h2 id="Mercurial_account_priviledges">Mercurial account priviledges</h2>
+
+<p>Eventually, you or your team leader will need Hg account priviledges. Let's face it, it's just more convenient to commit and push your work to the remote repo yourself, rather than creating patches and asking someone else to push them for you.</p>
+
+<p>To get write access to the l10n hg repositories on the Mozilla server,<a class="external" href="http://www.mozilla.org/hacking/commit-access-policy/" title="http://www.mozilla.org/hacking/commit-access-policy/"> there's a bit of paper work to be done</a>. The localization team owner needs to <a class="link-https" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=mozilla.org&amp;component=Repository%20Account%20Requests&amp;rep_platform=All&amp;op_sys=All&amp;cc=l10n%40mozilla.com&amp;short_desc=l10n%20hg%20account%20for%20John%20Doe%20(ab-CD)" title="https://bugzilla.mozilla.org/enter_bug.cgi?product=mozilla.org&amp;component=Repository%20Account%20Requests&amp;rep_platform=All&amp;op_sys=All&amp;cc=l10n%40mozilla.com&amp;short_desc=l10n%20hg%20account%20for%20John%20Doe%20(ab-CD)">file a bug requesting an hg account</a>. This bug will request level 1 L10n priviledges. You need to follow the instructions regarding the <a class="external" href="http://www.mozilla.org/hacking/committer/" title="http://www.mozilla.org/hacking/committer/">contributor form</a>. Write access to the hg repositories requires a ''voucher'', which, for the owner, will be done based on the review by Mozilla. For peers of a localization, the owner can vouch (once she or he is registered).</p>
+
+<h2 id="Pull_your_locale" name="Pull_your_locale">Sending changes to Mozilla</h2>
+
+<p>Now that you have Hg account privileges, you can send your work to Mozilla all by yourself. Here are the steps to send your L10n work using Mercurial:</p>
+
+<ol>
+ <li>Since your L10n work takes place in your own local repository, you should ensure that there are no changes made to the remote repository before committing your work. To do this, <a href="https://developer.mozilla.org/en-US/docs/Localizing_with_Mercurial#Updating_your_local_repos" title="https://developer.mozilla.org/en-US/docs/Localizing_with_Mercurial#Updating_your_local_repos">update your locale, as per the section above</a>.</li>
+ <li>After finishing a change or set of changes and checking you have updated to the latest, you should commit by entering this command:</li>
+</ol>
+
+<pre class="eval">hg commit -m "your message identifying the change (bug 555)"</pre>
+
+<p>Committing won’t send your changes to Mozilla’s repository, but prepares them for it. The next step will send your changes to your remote repo via <code>push</code>.</p>
+
+<ol start="3">
+ <li>To push to mozilla-hosted repositories, you have to have committer access, and you must edit the file <code><em>(your-local-hg-root AKA the directory you pulled your locale into)</em>/.hg/hgrc</code> (note, this is <strong>NOT</strong> your <code>~/.hgrc</code>) to add these lines (replacing ab-CD with your locale code):</li>
+</ol>
+
+<pre class="eval">[paths]
+default = https://hg.mozilla.org/l10n-central/ab-CD/
+default-push = ssh://hg.mozilla.org/l10n-central/ab-CD/
+</pre>
+
+<ol start="4">
+ <li>You’ll also need to tell ssh which account to use for your pushes, too, by editing <code>~/.ssh/config</code> and adding these lines, where <code style="font-size: 14px; color: rgb(51, 51, 51);">user@host.domain</code> is your account:</li>
+</ol>
+
+<pre>Host hg.mozilla.org
+User user@host.domain
+</pre>
+
+<ol start="5">
+ <li>Now you can push your work to the repository (and check the result on the dashboard) by entering this command from your local directory:</li>
+</ol>
+
+<pre class="eval">hg push</pre>
+
+<p id="A_.mozconfig">And tah dah! You're done! Congratulations on finishing the tutorial. Take a break and grab a snack, you deserve it</p>
diff --git a/files/de/mozilla/localization/lokalisierung_von_pontoon/index.html b/files/de/mozilla/localization/lokalisierung_von_pontoon/index.html
new file mode 100644
index 0000000000..edd35eb17e
--- /dev/null
+++ b/files/de/mozilla/localization/lokalisierung_von_pontoon/index.html
@@ -0,0 +1,135 @@
+---
+title: Lokalisierung von Pontoon
+slug: Mozilla/Localization/Lokalisierung_von_Pontoon
+translation_of: Mozilla/Localization/Localizing_with_Pontoon
+---
+<p>Lokalisierung von <a href="https://pontoon.mozilla.org" title="https://pontoon.mozilla.org">Pontoon</a> is a web-based, What-You-See-Is-What-You-Get (WYSIWYG), localization (l10n) tool. At Mozilla, we use Pontoon to localize all Mozilla products and websites, ranging from Firefox to Mozilla.org. Pontoon is a very simple and intuitive tool that requires little to no technical skill to use in the l10n workflow. Here we'll discuss how to use Pontoon to localize projects, from first sign-in to finalizing your contributions. Along the way, we'll point out some sweet features that will make you more efficient and make your l10n contributions easier.</p>
+
+<div class="note">
+<p><strong>Are you a developer?</strong> Read about <a href="/en-US/docs/Implementing_Pontoon_Mozilla">implementing Pontoon in your project</a> or learn how to get involved on <a href="https://github.com/mozilla/pontoon">GitHub</a>.</p>
+</div>
+
+<h2 id="First_steps">First steps</h2>
+
+<p><a href="https://pontoon.mozilla.org" title="https://pontoon.mozilla.org">Pontoon's home page</a> is very easy to use. To begin localizing the project, click on the Persona icon and sign in. Next, simply select the project you want to work on and your locale from the dropdown menus. Pontoon will automatically open that locale's project for you to get started. Note that for our purposes here, we'll be using <a href="https://affiliates.mozilla.org/">Firefox Affiliates</a> website to demo Pontoon's functionality and workflow. And there it is, opened inside Pontoon:</p>
+
+<p><em><img alt="Browser app and workspace" src="https://mdn.mozillademos.org/files/8323/affiliates.png" style="height: 558px;"></em></p>
+
+<h3 id="Main_toolbar">Main toolbar</h3>
+
+<p>As you can see, most of the interface is taken by the website being translated. Only the toolbar on top belongs to Pontoon, containing the following items (from left to right):</p>
+
+<p><img alt="Main toolbar" src="https://mdn.mozillademos.org/files/8325/toolbar.png"></p>
+
+<h4 id="List_of_strings">List of strings</h4>
+
+<p>Opens a sidebar with a list of all strings to localize.</p>
+
+<h4 id="Project_selector_(Affiliates)"><span id="cke_bm_939S" style="display: none;"> </span>Project selector (Affiliates)</h4>
+
+<p>Switches between projects to localize.</p>
+
+<h4 id="Resource_selector_(Homepage)"><span id="cke_bm_940S" style="display: none;"> </span>Resource selector (Homepage)</h4>
+
+<p>Switches between project resources to localize, like subpages or localization files. Hidden if no resources available for project.</p>
+
+<h4 id="sect1"><span id="cke_bm_941S" style="display: none;"> </span></h4>
+
+<dl>
+</dl>
+
+<h4 id="Locale_selector_(Slovenian)">Locale selector (Slovenian)</h4>
+
+<p>Switches between languages to localize.</p>
+
+<h4 id="Go">Go</h4>
+
+<p>Opens project-resource-locale selection.</p>
+
+<h4 id="Progress_indicator">Progress indicator</h4>
+
+<p>Displays your progress on the resource being localized. More details are available in the popup.</p>
+
+<dl>
+</dl>
+
+<h4 id="User_menu"><span id="cke_bm_943S" style="display: none;"> </span>User menu</h4>
+
+<p>Allows for user-specific tasks, like commiting to repository, downloading files and signing out.</p>
+
+<h4 id="Info_menu">Info menu</h4>
+
+<p>Gives important information, like the anticipated project timeline and a list of keyboard shortcuts.</p>
+
+<dl>
+</dl>
+
+<p>Alright, how about we do some translating now?<span id="cke_bm_608E" style="display: none;"> </span></p>
+
+<dl>
+</dl>
+
+<h2 id="Translate_strings">Translate strings</h2>
+
+<p>When using Pontoon for localization, you have a couple of options to translate your strings. You can translate in-context, out-of-context, or a combination of the two. We'll start with looking at in-context translation.</p>
+
+<h3 id="In-context">In-context</h3>
+
+<p>Pontoon's in-context translation mode is what puts it above others. It opens a web page (or web app) and enables real-time editing of that page. Here's how you translate your first string:</p>
+
+<p><img alt="In-context localization" src="https://mdn.mozillademos.org/files/8331/in-context.png"></p>
+
+<ol>
+ <li>Hover over the text you want to translate with your mouse.</li>
+ <li>An edit button appears over that text. Click on it to enable the translate mode.</li>
+ <li>Replace the original text with its translation into your language.</li>
+ <li>Click the save button to save your translation.</li>
+</ol>
+
+<div>
+<h3 id="Out-of-context">Out-of-context</h3>
+
+<p>Some strings are impossible to translate in-context, e.g. the contents of the &lt;title&gt; tag in websites and strings with placeables or different plural forms. By clicking on the hamburger icon in the main toolbar, a list of all strings and available translations will open in the sidebar. You can also use the sidebar for out-of-context localization:</p>
+
+<p><img alt="Out-of-context localization: list" src="https://mdn.mozillademos.org/files/8337/out-of-context-1.png"> <img alt="Out-of-context localization: translate" src="https://mdn.mozillademos.org/files/8335/out-of-context-2.png"></p>
+
+<ol>
+ <li>Click on the string you'd like to translate.</li>
+ <li>Translation panel with original string and its details (e.g. comments) opens.</li>
+ <li>Translate the string in the translation area below.</li>
+ <li>Click the save button to save your translation.</li>
+</ol>
+
+<p>As you translate strings out-of-context, translations will also appear in website, if they could also be translated in-context.</p>
+
+<h3 id="Translation_helpers">Translation helpers</h3>
+</div>
+
+<p>As you can see, suggestions from history, translation memory, machine translation and other locales are also available in the out-of-context translation panel. We call all of these translation helpers and here's how each of them will help you as you translate strings:</p>
+
+<p><img alt="Translation helpers: History" src="https://mdn.mozillademos.org/files/8339/helpers-history.png"> <img alt="Translation helpers: Machinery" src="https://mdn.mozillademos.org/files/8341/helpers-machinery.png"> <img alt="Translation helpers: Other locales" src="https://mdn.mozillademos.org/files/8343/helpers-locales.png"> <img alt="Translation helpers: Search" src="https://mdn.mozillademos.org/files/8345/helpers-menu.png"></p>
+
+<h4 id="History">History</h4>
+
+<p>Displays previously suggested translations, including from other users.</p>
+
+<h4 id="Machinery">Machinery</h4>
+
+<p>Displays matches from various services: internal translation memory, <a href="http://transvision.mozfr.org/">Mozilla Transvision</a>, <a href="https://amagama-live.translatehouse.org/">open source translation memory</a>, <a href="http://www.microsoft.com/Language/">Microsoft terminology</a> and <a href="http://www.bing.com/translator">machine translation</a>.</p>
+
+<h4 id="Other_locales">Other locales</h4>
+
+<p>Displays matching translations from other locales.</p>
+
+<h4 id="Search">Search</h4>
+
+<p>Almost like machinery, but takes provided keyword as input parameter instead of the original string.</p>
+
+<p>By clicking a suggestion, it gets copied into translation area.</p>
+
+<dl>
+</dl>
+
+<h2 id="Publishing_your_localization">Publishing your localization</h2>
+
+<p>Suppose you now want to publish your l10n work by committing it to a repo. Pontoon lets you do that too! Actually, it does that for you by automatically syncing with repositories on hourly basis. You can now pat yourself on the back, do a little dance, go to sleep or do something else to celebrate your work!</p>
diff --git a/files/de/mozilla/localization/lokalisierung_von_xliff-dateien/index.html b/files/de/mozilla/localization/lokalisierung_von_xliff-dateien/index.html
new file mode 100644
index 0000000000..b11efae69b
--- /dev/null
+++ b/files/de/mozilla/localization/lokalisierung_von_xliff-dateien/index.html
@@ -0,0 +1,59 @@
+---
+title: Lokalisierung von XLIFF-Dateien für iOS
+slug: Mozilla/Localization/Lokalisierung_von_XLIFF-Dateien
+translation_of: Mozilla/Localization/Localizing_XLIFF_files
+---
+<p>Firefox für iOS verwendet das XML-basierte Dateiformat XLIFF zur Speicherung und Weitergabe von Lokalisierungsdaten. <a href="https://www.oasis-open.org/committees/xliff/">XLIFF (eXtensible Localisation Interchange File Format)</a> ist ein Lokaliserungsstandard, der von der Normungsorganisation OASIS verwaltet wird. Ziel dieses Standards ist ein XML-basiertes Dateiformat, das ohne das Risiko von Datenverlust oder -beschädigung zum Austausch von Lokaliserungsdaten zwischen verschiedenen Tools verwendet werden kann. Die meisten Übersetzungstools unterstützen den XLIFF-Standard, sodass die Lokalisierung von XLIFF-Dateien für Firefox für iOS einfach mit diesen Tools erfolgen kann. Die direkte Bearbeitung einer XLIFF-Datei ist recht simpel, besonders wenn man sich mit XML auskennt. Dieses Tutorial wird Schritt für Schritt zeigen wie Strings in einer XLIFF-Datei übersetzt werden. </p>
+
+<h3 id="String-Repository_für_Firefox_auf_iOS">String-Repository für Firefox auf iOS</h3>
+
+<p>Die Datei firefox-ios.xliff befindet sich im SVN.</p>
+
+<ol>
+ <li>Entscheiden Sie, wo auf Ihrem lokalen Computer Sie die Kopie aus dem github-Repository speichern möchten und navigieren Sie im Terminal dorthin.</li>
+ <li>Geben Sie folgenden Befehl ein: <code>git clone </code>https://github.com/mozilla-l10n/firefoxios-l10n<code>/your-locale-code/</code></li>
+ <li>Das Projekt firefox-os sollte sich nun zusammen mit der Datei <code>firefox-ios.xliff </code>in dem von Ihnen gewählten Ordner befinden.</li>
+</ol>
+
+<h3 id="Übersetzen_der_XLIFF-Datei">Übersetzen der XLIFF-Datei</h3>
+
+<ol>
+ <li>Öffnen Sie die Datei firefox-ios.xliff in einem Texteditor Ihrer Wahl.</li>
+ <li>Fügen Sie im <code>&lt;file&gt;</code>-Tag das Attribut <code>target-language</code> mit dem Code Ihrer Locale als Wert hinzu (z. B. <code>target-language="xx-XX"</code>). Beachten Sie, dass es innerhalb eines XLIFF-Dokuments viele <code>&lt;file&gt;</code>-Tags geben kann. Jedes <code>&lt;file&gt;</code>-Tag muss das Attribut <code>target-language</code> mit dem Code Ihrer Locale als Wert enthalten (z. B. <code>target-language="xx-XX"</code>).</li>
+ <li>Strings befinden sich zwischen <code>&lt;trans-unit&gt;</code>-Tags. Englische Quell-Strings befinden sich zwischen den Child-Tags <code>&lt;source&gt;</code>. Nachfolgend ein Beispiel einer solchen <code>&lt;trans-unit&gt;</code>.
+  <pre>&lt;trans-unit id="Add to Bookmarks"&gt;
+    &lt;source&gt;Add to Bookmarks&lt;/source&gt;
+&lt;/trans-unit&gt;</pre>
+ </li>
+ <li>Ihre Übersetzung muss sich zwischen den Child-Tags <code>&lt;target&gt;</code> befinden. Gehen Sie die gesamte XLIFF-Datei durch und fügen Sie unter jedem <code>&lt;source&gt;</code>-Tag das Tagpaar <code>&lt;target&gt;&lt;/target&gt;</code> hinzu. Dies wird Ihnen helfen, die Strings auszumachen, die übersetzt werden müssen. Das Tagpaar <code>&lt;source&gt;</code> darf nicht gelöscht werden.
+  <pre>&lt;trans-unit id="Add to Bookmarks"&gt;
+    &lt;source&gt;Add to Bookmarks&lt;/source&gt;
+    &lt;target&gt;YOUR_TRANSLATION_HERE&lt;/target&gt;
+&lt;/trans-unit&gt;
+</pre>
+ </li>
+ <li>Fügen Sie die Übersetzungen der Strings zwischen den <code>&lt;source&gt;</code>-Tags zwischen die <code>&lt;target&gt;</code>-Tags darunter ein. Bitte beachten Sie, dass folgende Zeichenfolgen nicht übersetzt werden dürfen.
+  <ol>
+   <li><code>$(SOME_TEXT_HERE)</code> ein Variablenformat,</li>
+   <li><code>%1$@</code> ist ein weiteres Variablenformat.</li>
+   <li>&lt;note&gt;-Tags beinhalten Hinweise der Entwickler zur Lokalisierung und sollten nicht übersetzt werden. </li>
+  </ol>
+
+  <pre>&lt;trans-unit id="Add to Bookmarks"&gt;
+    &lt;source&gt;Add to Bookmarks&lt;/source&gt;
+    &lt;target&gt;Agregar a marcadores&lt;/target&gt;
+    &lt;note&gt;No comment provided by engineer.&lt;/note&gt;
+&lt;/trans-unit&gt;
+</pre>
+ </li>
+ <li>Speichern Sie Ihre Übersetzungen regelmäßig.</li>
+ <li>Wenn Sie mit Ihrer Übersetzung fertig sind, ist es wichtig sicherzustellen, dass der XML-Code in der XLIFF-Datei valide ist (z. B. keine beschädigten Tagpaare enthält). Öffnen Sie die Datei in Firefoy, um eine Validitätsprüfung auszuführen und verbessern Sie alle Fehler, die gemeldet werden. </li>
+</ol>
+
+<h3 id="Hochladen_der_XLIFF-Datei">Hochladen der XLIFF-Datei</h3>
+
+<ol>
+ <li>Laden Sie mit dem folgenden Befehl die übersetzte XLIFF-Datei in das Verzeichnis Ihrer Locale hoch: <code>git commit -m "Commit message here"</code> .</li>
+ <li>Speichern Sie Ihre Version im github-Repository: <code>git push</code></li>
+ <li>Legen Sie die Füße hoch, gönnen Sie sich ein Bier (oder eine Limo) und seien Sie stolz darauf etwas Neues, Anderes und Aufregendes gemacht zu haben! </li>
+</ol>
diff --git a/files/de/mozilla/localization/programmübersetungen_mit_mercurial/index.html b/files/de/mozilla/localization/programmübersetungen_mit_mercurial/index.html
new file mode 100644
index 0000000000..f2dd7ac06d
--- /dev/null
+++ b/files/de/mozilla/localization/programmübersetungen_mit_mercurial/index.html
@@ -0,0 +1,284 @@
+---
+title: Programmübersetzungen mit Mercurial
+slug: Mozilla/Localization/Programmübersetungen_mit_Mercurial
+translation_of: Mozilla/Localization/Application_Translation_with_Mercurial
+---
+<h4 id="draft">{{draft}}</h4>
+
+<h2 id="Herausfinden_wo_Übersetzungen_fehlen">Herausfinden, wo Übersetzungen fehlen</h2>
+
+<ol>
+ <li>Herausfinden, für welche Ableger der Mozilla-Familie noch Übersetzungen fehlen. Dazu sollte die Übersetzungsseite des verantwortlichen Sprachteams gelesen werden (dazu <a href="https://l10n.mozilla.org/teams/">hier</a> den richtigen <a href="https://en.wikipedia.org/wiki/Language_code">Sprachcode</a> - z. B. "de" für Deutsch - anklicken). Das Lokalisationstem kennt die Ableger. Der <strong>Standard-Lokalisationsableger</strong> ist <strong>aurora</strong>.</li>
+ <li>Als nächstes muss überprüft werden, was noch unübersetzt ist, dazu zur <a href="https://l10n.mozilla.org/teams/">Lokalisations-Statusseite</a> gehen und die Seite der Zielsprache aufrufen.</li>
+ <li>Im Abschnitt "Applications &amp; Sign-offs" befinden sich verschiedene Produkte und deren Ableger, die noch nicht fertig übersetzt sind.
+  <ul>
+   <li>gaia-* bezeichnet Ableger von <a href="http://www.mozilla.org/en-US/firefox/os/">Firefox OS</a>, dem Betriebssystem für Mobilgeräte.</li>
+   <li>Firefox und fx-* beueichnen Ableger vom <a href="http://www.mozilla.org/firefox">Desktop-Firefox</a>, dem Browser für PCs und Laptops auf Windows, Mac OS oder Linux.</li>
+   <li>Fennec und fennec-* bezeichnen Ableger vom <a href="http://www.mozilla.org/en-US/firefox/fx/">mobilen Firefox</a>, dem Firefoxbrowser für Android.</li>
+   <li>Thunderbird und tb-* bezeichen Ableger von <a href="http://www.mozilla.org/thunderbird">Thunderbird</a>, dem E-Mail-Programm, Newsgroup- und Feedreader und Chatprogramm. Die Lokalisation des <a href="https://www.mozilla.org/en-US/projects/calendar/">Lightning Kalendar Add-Ons </a>findet auch hier statt.</li>
+   <li>SeaMonkey und sea-* bezeichnen Ableger von <a href="http://www.seamonkey-project.org/">SeaMonkey</a>, der All-in-One Internetsuite, die Browser, E-Mail- und Chatprogramm und mehr enthält.</li>
+   <li>Lightning und cal-* bezeichnen Ableger von Lightning, dem Kalender Add-On für Thunderbird. Die Lokalisation von Lightning findet inzwischen in Thunderbirds tb-*-Teil statt, der cal-*-Bereich wird nicht länger verwendet.</li>
+  </ul>
+ </li>
+ <li>In diesem Beispiel soll der Aurora-Ableger des Desktop-Firefox übersetzt werden. Deshalb zu<strong> fx_aurora</strong> scrollen.</li>
+ <li>Der Text daneben zeigt den Übersetzungsstatus an.
+  <ul>
+   <li>Wenn dort '<strong>Translated</strong>' steht, ist der Ableger schon fertig übersetzt. Nun können Sie entweder ein anderes Produkt übersetzen oder jemanden von der Lokalisationsseite (siehe oben) kontaktieren, damit er Sie informieren kann, wenn neue unübersetzte Texte vorhanden sind.</li>
+   <li>Wenn es ein roter Text ist, der aus einer <strong>Nummer</strong> und dem Wort '<strong>missing</strong>' besteht, sind unübersetzte Texte vorhanden und die Anleitung kann weiter ausgeführt werden.<br>
+     </li>
+  </ul>
+ </li>
+</ol>
+
+<h2 id="Required_Tools">Required Tools</h2>
+
+<h4 id="Build_pre-requisites">Build pre-requisites</h4>
+
+<p>First, get the required programs to compile Mozilla applications like Firefox and Thunderbird from <a href="/en-US/docs/Developer_Guide/Build_Instructions">Build Instructions</a>. This is only necessary once.</p>
+
+<div class="note">
+<p>Install MozillaBuild 1.9.0pre from <a href="https://groups.google.com/forum/#!topic/mozilla.dev.platform/aIFUKRrb3IY">https://groups.google.com/forum/#!topic/mozilla.dev.platform/aIFUKRrb3IY</a></p>
+</div>
+
+<div class="warning">
+<p>MozillaBuild must be installed into an absolute file path without whitespaces, else it will break.</p>
+</div>
+
+<h4 id="File_comparison_program">File comparison program</h4>
+
+<p>For the translation, it is recommend to use file comparison program to compare the English file (containing the new texts) with the file of your locale (which is still missing the new strings). This example uses <a href="http://winmerge.org/">WinMerge</a>: Download and install it. A comparison of alternatives (e.g. for Linux and Mac OS) is available on <a href="https://en.wikipedia.org/wiki/Comparison_of_file_comparison_tools">Wikipedia</a>.</p>
+
+<h4 id="File_and_text_editor">File and text editor</h4>
+
+<p>For editing individual files a text editor can be a better choice than a file comparion program, e.g. because the file is new and everything has to be translated, the file is too customized to compare it to the English one, or special functionality is required (e.g. bookmarking untranslated lines). Use a text editor you are comfortable with. This example uses <a href="http://notepad-plus-plus.org/">Notepad++</a>.</p>
+
+<h4 id="Progress_tracking_tool">Progress tracking tool</h4>
+
+<p>To track which strings and files already have been translated and later also to see which new strings have already been tested in the product as being a good translation for the functionality behind the translated strings and that the translated texts fit into the available, the translation progress should be tracked. This can be done in a text editor or word processor or any other tool in which you can attach different kind of states to the individual texts to translate. The Firefox extension <a href="https://addons.mozilla.org/firefox/addon/scrapbook/">Scrapbook</a> is used in this guide. Install it into your default Firefox profile (you will have more than one profile when following this guide).</p>
+
+<h2 id="Getting_the_current_Texts_in_English_and_your_Locale">Getting the current Texts in English and your Locale</h2>
+
+<h4 id="Obtaining_the_English_texts_with_the_source_code">Obtaining the English texts with the source code</h4>
+
+<p>Get the source code by downloading the following file:</p>
+
+<ul>
+ <li><strong>Firefox Desktop</strong> or <strong>Firefox for Android</strong>: Download the <strong>mozilla-&lt;branch&gt;.hg</strong> file (e.g. mozilla-aurora.hg) from <a href="https://ftp.mozilla.org/pub/mozilla.org/firefox/bundles/">https://ftp.mozilla.org/pub/mozilla.org/firefox/bundles/</a> The file is not small, but after initially downloading it, you only need to download the latest changes in the future.</li>
+ <li><strong>Thunderbird</strong>, <strong>Lightning</strong> or <strong>SeaMonkey</strong>: Download the <strong>comm-&lt;branch&gt;.hg</strong> file (e.g. comm-aurora.hg) from <a href="http://ftp.mozilla.org/pub/mozilla.org/thunderbird/bundles/">https://ftp.mozilla.org/pub/mozilla.org/thunderbird/bundles/</a></li>
+</ul>
+
+<p>In the next step, we will unpack the source code:</p>
+
+<ol>
+ <li>Open an input shell, e.g. by pressing the Windows key and R on the keyboard <img alt="Screenshot of Windows key + R key" src="https://mdn.mozillademos.org/files/7211/windows%20key%20plus%20r.png" style="width: 82px; height: 30px;"> or by calling the "<code>Run...</code>" command from the Windows "Start" button, and then typing <code><strong>cmd</strong></code> and pressing the Enter key.</li>
+ <li>Launch the installed MozillaBuild toolset by launching it with its path, e.g. <code>C:\Mozilla\Coding\Buildtools\MozillaBuild\start-shell-msvc2010.bat</code> You can autocomplete the file path after typing a few characters and then pressing the Tabulator key.<br>
+  If you launch the start-shell-l10n.bat, compiling features will be disabled. You can create translation patches, but creating language packs for the application, binary repacks of the application (changing the localization of the program), and compiling the application likely won't work.</li>
+ <li>You are now in the Mozilla development environment which emulates a Linux environment. Now go to the directory where you want to put the source code. It's highly recommended to put it onto the fastest hard drive in the device. File paths here work starting with a slash (/) followed by the drive letter, and then the directory structure like on Windows, but using slashes (/) instead of backslashes (\). So let's go to C:\Mozilla by typing<br>
+  <code>cd /c/Mozilla/</code></li>
+ <li>Create a new directory for the source code:<br>
+  <code>mkdir mozilla-aurora</code></li>
+ <li>Initialize the new directory as new repository:<br>
+  <code>hg init mozilla-aurora</code></li>
+ <li>Go into the new directory:<br>
+  <code>cd mozilla-aurora</code></li>
+ <li>Unpack the source code:<br>
+  <code>hg unbundle /path/to/the/downloaded/mozilla-aurora.hg</code><br>
+  This can take some time, mostly depending on the performance of the hard drive.</li>
+</ol>
+
+<h4 id="Obtaining_the_texts_of_your_localization">Obtaining the texts of your localization</h4>
+
+<ol>
+ <li>Go back to the parent folder of <code>mozilla-aurora</code>:<br>
+  <code>cd ..</code></li>
+ <li>Find the localization repository for your branch and language on <a href="http://hg.mozilla.org/">http://hg.mozilla.org/</a> E.g. for aurora and German (language code 'de'), it is <code>http://hg.mozilla.org/releases/l10n/mozilla-aurora/de/</code> Copy that url to the clipboard.</li>
+ <li>Copy the repository to your computer by running the following command:<br>
+  <code>hg clone http://hg.mozilla.org/releases/l10n/mozilla-aurora/de/ de-mozilla-aurora</code><br>
+  This should proceed pretty fast.<br>
+  On Windows, you can paste the url by calling the Paste command from the window menu in the upper left corner of the window.</li>
+</ol>
+
+<h2 id="Configuring_your_Mercurial_user_settings">Configuring your Mercurial user settings</h2>
+
+<p>Still in the command prompt, go to your home directory in the file system, e.g. for a Windows user, it looks like C:\Users\MyName , depending on your Windows version:</p>
+
+<p><code>cd /c/Users/MyName</code></p>
+
+<p>Now list all the files here:</p>
+
+<p><code>ls -l</code></p>
+
+<p>If there is no file called <code>.hgrc</code> , create it with</p>
+
+<p><code>&gt; .hgrc</code></p>
+
+<p>This file stores your general Mercurial settings (Mercurial is the tool which manages the source code and its history of changes).</p>
+
+<p>Now go in the file system to the file and open it in your favorite text editor. Windows users can use e.g. <a href="http://notepad-plus-plus.org/">Notepad++</a>.</p>
+
+<p>Paste the following content into the file:</p>
+
+<pre>[ui]
+username = Firstname Lastname &lt;mynick@example.com&gt;
+merge = internal:merge
+
+[alias]
+qexport = export -g -r qtip
+qexportall = diff -r qparent
+
+[defaults]
+commit = -v
+diff = -p -U 8
+qdiff = -p -U 8
+qnew = -U
+
+[diff]
+git = 1
+showfunc = 1
+unified = 8
+
+[extensions]
+hgext.mq =
+progress =
+
+[hooks]
+
+</pre>
+
+<p>Put in your name and email address which later will be public on the internet after your translation patch got accepted and uploaded. Save the file and close it.</p>
+
+<h2 id="Enabling_Mercurial_queues_(revertable_patches)">Enabling Mercurial queues (revertable patches)</h2>
+
+<p>Some time will pass between the moment in which you start the localization, finish it, test it, improve it, upload it for review and get review (maybe not approved on first try). Other localizers will likely have done changes to the translation, either adding new texts, removing obsolete ones or improving the current texts. This can cause conflicts between the changes you created and theirs. For this reason, updating patches kann be necessary so Mercurial is still able to find the lines in the files which it has to replace or where it has to add them. <a href="/en-US/docs/Mercurial_Queues">Mercurial queues</a> allow to revert changes and also pull changes and reapply your local changes.</p>
+
+<p>Go back to the localization directory:</p>
+
+<p><code>cd /c/Mozilla/de-mozilla-aurora</code></p>
+
+<p>Initiate Mercurial queues:</p>
+
+<p><code>hg qinit</code></p>
+
+<h2 id="Get_to_know_the_translation_style">Get to know the translation style</h2>
+
+<p>For having good chances that the translation suggestions get accepted, they should match the translation style of the texts in the application already translated. In general, the labels in the applications should have the same style like the operating system, e.g. use the same order of subject, verb and objects; decline verbs or not like the operating system does.</p>
+
+<p>The following resources can help figuring out the translation style and translate according to them:</p>
+
+<ul>
+ <li><a href="https://l10n.mozilla.org/teams/">Check your localization team's page</a> by clicking on the team with your <a href="https://en.wikipedia.org/wiki/Language_code">language code</a> (e.g. "de" for German) for a style guide (e.g. <a href="https://wiki.mozilla.org/L10n:Teams:de/Leitfaden_%C3%9Cbersetzung">style guide</a> for German).</li>
+ <li><a href="http://transvision.mozfr.org/">Transvision</a> offers searching for texts and text ids ("entities" or "keys"), allowing to quickly find translations for already translated texts.</li>
+ <li><a href="http://www.microsoft.com/language/de-de/default.aspx">Microsoft's terminology search</a> allows fast lookups of localized technical terms.</li>
+</ul>
+
+<h2 id="Choosing_what_to_translate">Choosing what to translate</h2>
+
+<p>Go to the <a href="https://l10n.mozilla.org/teams/">Localization status page</a> and click on the '&lt;number&gt; missing' label of the Firefox branch on which you want to translate, e.g. <strong>fx_aurora</strong>. The page which opens has a bar holding information about how many texts (strings) have already been translated, how many there are in English and your locale and have the same text, and how many are missing in your local. The interesting part follows below as list of missing texts.</p>
+
+<p><img alt="unchanged localization report" src="https://mdn.mozillademos.org/files/7303/mozilla%20-%20localization%20report%20-%20new.png" style="width: 483px; height: 396px;"></p>
+
+<p>The first line shows the locale for which the texts are bing translated (in this example: de - German). With the second line start the file paths of the files which require changes. The file paths follow the directory structure of the locale repository downloaded for translation. In this example, the file aboutDialog can be found in the folder browser/chrome/browser/. The text striked through are texts which have been removed in the English version and can also be removed from the locale being worked on. In this example we will translate the one new text with the id <strong>privatebrowsingpage.howToStart4</strong> in the file <strong>aboutPrivateBrowsing.dtd</strong>.</p>
+
+<p>Tips for finding files with usually easily translateable texts:</p>
+
+<ul>
+ <li>Look for files in browser/chrome/browser/</li>
+ <li>Look for a file with only a few changes</li>
+ <li>Suggestions
+  <ul>
+   <li>Files starting with <strong>about</strong>...</li>
+   <li>Files in the <strong>preferences</strong> directory (browser/chrome/browser/preferences/)</li>
+   <li>The <strong>browser.dtd</strong> and <strong>browser.properties</strong> files if there aren't too many new strings.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Tracking_the_translation_progress">Tracking the translation progress</h2>
+
+<p>If you translate more than a few strings, you usually want to keep track of what has already been translated (and later if the text has been tested in the product as fitting into the available area and suiting the functionality it describes). This guide achieves this with the Firefox extension <a href="https://addons.mozilla.org/firefox/addon/scrapbook/">Scrapbook</a>.</p>
+
+<ol>
+ <li>You installed Scrapbook earlier, now open it in Firefox either by calling it from the Firefox menu bar (press the Alt key to show it if necessary) using "View" &gt; "Sidebar" &gt; "Scrapbook" or by clicking its toolbar button which you likely have to add by toolbar customization if you didn't do this before.</li>
+ <li>Drag the tab with the localization error showing missing and obsolete strings to the sidebar.</li>
+ <li>After Scrapbook has saved the web page to your local disk, click with the right mouse button on the page in the sidebar and choose "Properties" from the context menu which gets opened. Rename it something meaningful, e.g. "Firefox &lt;version number&gt; translation".</li>
+ <li>After you saved the dialog, click with the left mouse button on the page in the sidebar to open the locally saved copy.</li>
+</ol>
+
+<h2 id="Opening_English_files_and_the_target_locale_side-by-side">Opening English files and the target locale side-by-side</h2>
+
+<p>The localization report shows the IDs of added or removed texts, but the English text itself is still unknown. We get this by comparing the English version of the file with the one of the locale we are translating in. To do so,</p>
+
+<ol>
+ <li>Launch WinMerge.</li>
+ <li>From its "File" menu, choose "Save project".</li>
+ <li>For the file path of the left directory, go to the downloaded <code>mozilla-aurora</code> source code and then into its <strong><code>browser/locales/en-US/</code></strong> folder. In this example, the absolute file path is <code>C:\Mozilla\mozilla-aurora\browser\locales\en-US</code>.</li>
+ <li>Enable read-only mode for the left directory.</li>
+ <li>For the file path of the right directory, go to the downloaded translation directory <code>de-mozilla-aurora</code> and then into its <code>browser</code> folder. In this example, the absolute file path is <code>C:\Mozilla\de-mozilla-aurora\browser</code>.</li>
+ <li>Save this comparison as project so you can easily relaunch this comparision without selecting the directories again. A good name is e.g. <code>translation-mozilla-aurora-browser.winmerge</code></li>
+ <li>Open the comparison you just saved.</li>
+</ol>
+
+<h2 id="The_translation">The translation</h2>
+
+<ol>
+ <li>
+  <p>Bring the console with Mercurial to the front.</p>
+ </li>
+ <li>
+  <p class="brush: bash">Start tracking changes you make against the localization repository by telling it that with the <strong><code>qnew</code></strong> subcommand to save these changes as patch in a mercurial queue. This patch needs a name, choose something meaning full like "<code>Firefox-&lt;version number&gt;-more-details</code>". In this example, <code>Firefox-29-aboutPrivateBrowsing</code> will be used.<br>
+   <code>hg qnew Firefox-29-aboutPrivateBrowsing</code></p>
+ </li>
+ <li>Switch back to WinMerge and navigate to <code>browser/chrome/browser/</code> and open the <code>aboutPrivateBrowsing.dtd</code> file. You will see something like this:<br>
+  <img alt="single file comparision in WinMerge without changes by the user" src="https://mdn.mozillademos.org/files/7305/mozilla%20-%20compare%20-%20unchanged.png"><br>
+  On the left, you see an overview of the comparison of the English and the non-English file. Gray parts indicate blocks of texts which can't be found in that file, dark yellow represents changed lines and light yellow the parts of text in it which is different.</li>
+ <li>Below the license header which should never changed, the texts are organized in the following format:<br>
+  <code>&lt;!ENTITY stringid "Text which will be shown in Firefox"&gt;</code></li>
+ <li>As you can see there is a bigger block of text not recognized. This is due to the texts which have in the English versionmoved from below the string with the id <code>privatebrowsingpage.howToStart3</code> to a position above it. Cut and paste these strings in the localized file so their position corresponds to the on in the English file.</li>
+ <li>Press the F5 key or click the reload button in WinMerge's toolbar to re-compare the files.</li>
+ <li>Now copy the empty lines below <code>privatebrowsingpage.learnMore</code> and the line <code>&lt;!-- TO BE REMOVED POST-AUSTRALIS --&gt;</code> to the localized file. This text is a comment (which in .dtd files always can be found between <code>&lt;!--</code> and <code>--&gt;</code>). There is no need to translate this text.</li>
+ <li>Now we copy the two missing lines from the English file and insert them in the localized file:<br>
+  <code>&lt;!-- LOCALIZATION NOTE (privatebrowsingpage.howToStart4): please leave &amp;newPrivateWindow.label; intact in the translation --&gt;<br>
+  &lt;!ENTITY privatebrowsingpage.howToStart4               "To start Private Browsing, you can also select &amp;newPrivateWindow.label; from the menu."&gt;</code><br>
+  The first line is a comment providing information on the localization of the text in the following line. <code>&amp;newPrivateWindow.label;</code> has to be left unchanged so it can be replaced with the text of the string id <code>&amp;newPrivateWindow.label;</code> whis is stored elsewhere<code>.</code></li>
+ <li><strong>Translation time</strong>: Translate the text. Afterwars, the line should look somehow like this:<br>
+  <code>&lt;!ENTITY privatebrowsingpage.howToStart4               "Der private Modus kann auch über den Menü-Eintrag &amp;newPrivateWindow.label; gestartet werden."&gt;</code></li>
+ <li>Save the file.</li>
+</ol>
+
+<h2 id="Exporting_the_changes_as_patch">Exporting the changes as patch</h2>
+
+<p>A patch is a file containing recorded changes to a repository. It can be used to apply these changes to a copy of the repository yet without these changes.</p>
+
+<ol>
+ <li>Tell Mercurial to store the changes in the Mercurial queue with the <code>qref</code> command. We also create a commit message which will describe the changes in the patch and later get used when the patched gets checked in ('added') to the official repository with the localized files. For the commit message, we have to use the <code>-m</code> command line flag,<br>
+  <code>hg qref -m "Firefox 29: Localize missing string in aboutPrivateBrowsing.dtd"</code><br>
+  You can change the commit message in the Mercurial queue every time by calling <code>hg qref</code> again.</li>
+ <li>Now export the patch to the file system using the <code>qexport</code> command which is defined in the <code>.hgrc</code> file (see above):<br>
+  <code>hg qexport &gt; ../firefox-29-aboutPrivateBrowsing-v1.patch</code><br>
+  This creates a patch file called <code>firefox-29-aboutPrivateBrowsing-v1.patch</code> containing the changes in the parent directory of <code>de-mozilla-aurora</code> (in this example: <code>C:\Mozilla\</code>).</li>
+</ol>
+
+<h2 id="Proof-reading_and_altering_the_patch">Proof-reading and altering the patch</h2>
+
+<p>Now proof-read the patch. This detects often more than 90 percent of the possible reasons for the reviewer to not accept the patch. If you find that changes have to be done, edit the real aboutPrivateBrowsing.dtd file from the localization repository, save it and follow the steps from Exporting the changes as patch (see above).</p>
+
+<h2 id="Validating_the_translation_in_the_product">Validating the translation in the product</h2>
+
+<p>This guide hasn't yet a section about the validation of the translation. Please follow the instructions from the <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Localization/Quick_start_guide/QA_phase">QA phase section of the Localization quick start guide</a>.</p>
+
+<h2 id="Submitting_the_patch_for_review">Submitting the patch for review</h2>
+
+<p>Now the patch has to be shared so the people currently trusted to change the official translation can review the suggested changes.</p>
+
+<ol>
+ <li>File a <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Mozilla%20Localizations">bug ("ticket") in the Mozilla Localization product</a> and choose as component the localization for which you have translated.</li>
+ <li>Choose a meaningful bug summary which will be shown for searches etc. like in this example "Firefox 29: aboutPrivateBrowsing.dtd"</li>
+ <li>Fill any important and additional information into the description field.</li>
+ <li>Click the 'Add attachment' button.</li>
+ <li>Select the exported patch file with the file picker. The checkbox for 'patch' should get automatically checked.</li>
+ <li>Add a meaningful name for the attachment, e.g. aboutPrivateBrowsing.dtd, patch, v1</li>
+ <li>Go to the review 'Flags' category and set the one for <strong>review</strong> to <strong>?</strong>, meaning that you request review for the patch.</li>
+ <li>In the text field next to it, add the mail address of the person leading the translation of the locale. This information can be found on the <a href="https://l10n.mozilla.org/teams/">page of the localization team</a>.</li>
+ <li>Submit the bug report.</li>
+ <li>Now you have to wait for the review of that person. This can happen on the same day, on the next weekend or later, but should happen in the timeframe given for the localization of aurora. If the person requests changes, follow the instructions under <strong>Proof-reading and altering the patch</strong>. If the reviewer accepts the changes, the patch will get uploaded and your translation will officially be added to Firefox.</li>
+</ol>
diff --git a/files/de/mozilla/mathml_project/index.html b/files/de/mozilla/mathml_project/index.html
new file mode 100644
index 0000000000..b1f0bf57d0
--- /dev/null
+++ b/files/de/mozilla/mathml_project/index.html
@@ -0,0 +1,72 @@
+---
+title: Mozilla MathML Project
+slug: Mozilla/MathML_Project
+tags:
+  - MathML
+  - MathML Project
+  - TopicStub
+translation_of: Mozilla/MathML_Project
+---
+<p>Das Mozilla MathML Project ist Mozillas Projekt, um <a href="/en-US/docs/Web/MathML" title="/en-US/docs/Web/MathML">MathML</a>-Unterstützung mit Firefox und anderen Mozilla-basierten Applikationen zu erstellen und zu verbessern. Für einen schnellen Überblick, sehen Sie die <a href="https://fred-wang.github.io/MozSummitMathML/index.html">Aufgaben für die Entwickler bei Mozilla Summit 2013</a>.</p>
+
+<h2 id="Updates">Updates</h2>
+
+<p><img alt="Mathzilla" class="default internal" src="https://mdn.mozillademos.org/files/6281/mathzilla.svg" style="float: right; height: 150px; width: 150px;"></p>
+
+<ul>
+ <li><a href="/docs/Mozilla/MathML_Project/Status" title="Mozilla MathML Project/Status">Status von jedem Tag</a></li>
+ <li><a href="/docs/Mozilla/MathML_Project/MathML3Testsuite" title="Mozilla MathML Project/MathML3Testsuite">Resultat von der MathML 3 Testsuite</a></li>
+ <li><a class="external" href="https://www.wg9s.com/mozilla/firefox/">Unoffizielle nächtliche Gebilde mit MathML Patches</a> (maintained by Bill Gianopoulos)</li>
+ <li><a href="/docs/Mozilla/MathML_Project/Updates" title="Mozilla_MathML_Project/Updates">Mehr Inhalt und archivierter Inhalt</a></li>
+</ul>
+
+<h2 id="Community">Community</h2>
+
+<ul>
+ <li>Die Forma von Mozilla anschauen... {{DiscussionList("dev-tech-mathml", "mozilla.dev.tech.mathml")}}</li>
+ <li><a class="link-irc" href="irc://irc.mozilla.org/%23mathml" rel="external" title="irc://irc.mozilla.org/%23mathml">IRC channel</a></li>
+ <li><a class="link-https" href="https://wiki.mozilla.org/MathML:Home_Page">Wiki, welches von den Entwicklern benutzt wird</a> - schauen Sie sich die letzten Entwickelungen an und helfen Sie uns, MathML in Mozilla zu verbessern.</li>
+</ul>
+
+<h2 id="Links">Links</h2>
+
+<ul>
+ <li><a href="/docs/Mozilla/MathML_Project/Fonts" title="Mozilla MathML Project/Fonts">Fonts für Mozillas MathML - Engine</a> installieren</li>
+ <li><a class="external" href="https://www.w3.org/TR/MathML3/">MathML Version 3.0</a> - W3C Recommendation, 21 October 2010</li>
+ <li><a class="external" href="https://www.w3.org/Math/testsuite/"><abbr>W3C</abbr> <abbr>MathML</abbr> Test Suite</a> - Wurde erstellt, um die Implementation von jedem Element einem Attribut (oder eingebautem Rendering-Verhalten) bei der Zeit in einer ziemlich gründlichen Weise zu überprüfen.</li>
+ <li><a href="/docs/Web/MathML" title="MathML">MathML im Mozilla Developer Network</a></li>
+ <li><a href="/en-US/docs/Mozilla/MathML_Project/a11y">MathML - Zugänglichkeit in Mozilla</a></li>
+</ul>
+
+<h3 id="Beispiel-MathML-Dokumente">Beispiel-<abbr>MathML</abbr>-Dokumente</h3>
+
+<ul>
+ <li><a href="/docs/Mozilla/MathML_Project/Screenshots" title="Mozilla MathML Project/Screenshots">Screenshots</a></li>
+ <li><a href="/de/docs/Mozilla/MathML_Project/Start" title="Mozilla_MathML_Project/Start"><abbr>MathML</abbr> Startseite</a> - mit Übersetzungen in verschiedene Sprachen ( <a href="/ar/docs/Mozilla_MathML_Project/Start" title="/ar/Mozilla_MathML_Project/Start">Arabisch</a>, <a href="/zh-CN/docs/Mozilla_MathML_Project/Start" title="/zh-CN/Mozilla_MathML_Project/Start">Chinesisch</a>, <a href="/he/docs/Mozilla_MathML_Project/Start" title="/he/Mozilla_MathML_Project/Start">Hebräisch</a>, <a href="/th/docs/Mozilla_MathML_Project/Start" title="/th/Mozilla_MathML_Project/Start">Thai</a>)</li>
+ <li><a class="external" href="/docs/Mozilla/MathML_Project/Basics">MathML Basics</a> - Dokument zugeschnitten, mit nur dem Symbol Font, welcher auf den meisten OS-Konfigurationen vorinstalliert ist, richtig angezeigt zu werden.</li>
+ <li><a class="external" href="/de/docs/Mozilla/MathML_Project/MathML_Torture_Test"><abbr>MathML</abbr> Torture Test</a> - Test zum Vergleich von dem MathML - Rendering und TeX.</li>
+ <li>Demo von einigen MathML - Tags: <a class="external" href="/docs/Mozilla/MathML_Project/mfrac">mfrac</a>, <a class="external" href="/docs/Mozilla/MathML_Project/mo">mo</a>, <a class="external" href="/docs/Mozilla/MathML_Project/mtable">mtable</a>, <a class="external" href="/docs/Mozilla/MathML_Project/mspace">mspace</a>, <a class="external" href="/docs/Mozilla/MathML_Project/mmultiscripts">mmultiscripts</a>, <a class="external" href="/docs/Mozilla/MathML_Project/roots">msqrt-mroot</a>.</li>
+ <li><a class="external" href="/docs/Mozilla/MathML_Project/Extras">MathML Extras</a> - Technologiedemonstration von einigen interessanten Erscheinungen vor der Unterstützung des Browsers.</li>
+ <li><a href="/docs/Mozilla/MathML_Project/Various" title="Mozilla_MathML_Project/Various">Verschiedene MathML-Tests</a> - Diese Seiten wurden von <code>layout/mathml/tests/</code> importiert.</li>
+ <li><a class="external" href="https://golem.ph.utexas.edu/~distler/blog/archives/000104.html">Blog</a> mit Kommentaren, welche MathML enthalten.</li>
+</ul>
+
+<h3 id="MathML_Dokumente_erstellen"><abbr>MathML</abbr> Dokumente erstellen</h3>
+
+<ul>
+ <li><a href="/docs/Web/MathML/Authoring" title="Mozilla MathML Project/Authoring">MathML bearbeiten</a></li>
+ <li><a class="external" href="https://www.w3.org/Math/Software/mathml_software_cat_editors.html">Editors</a></li>
+ <li><a class="external" href="https://www.w3.org/Math/Software/mathml_software_cat_converters.html">Converter</a></li>
+ <li><a class="external" href="https://www.w3.org/Math/Software/mathml_software_cat_stylesheets.html">Stylesheets</a></li>
+</ul>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2>
+
+<ul>
+ <li>Author(s): Roger B. Sidje</li>
+ <li>Other Contributors: Frédéric Wang</li>
+ <li>Last Updated Date: April 4, 2010</li>
+ <li>Copyright Information: Portions of this content are © 1999–2010 by individual mozilla.org contributors; content available under a Creative Commons license | <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Details</a>.</li>
+</ul>
+</div>
diff --git a/files/de/mozilla/mathml_project/mathml_torture_test/index.html b/files/de/mozilla/mathml_project/mathml_torture_test/index.html
new file mode 100644
index 0000000000..f48515f89d
--- /dev/null
+++ b/files/de/mozilla/mathml_project/mathml_torture_test/index.html
@@ -0,0 +1,1323 @@
+---
+title: MathML Härtetest
+slug: Mozilla/MathML_Project/MathML_Torture_Test
+tags:
+  - Beispiel
+  - Intermediate
+  - MathML
+translation_of: Mozilla/MathML_Project/MathML_Torture_Test
+---
+<h2 id="MathML_Torture_Test" name="MathML_Torture_Test">MathML Härtetest</h2>
+
+<div style="display: none;">
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  Render mathematics with:
+  &lt;select name="MathFont" id="MathFont"&gt;
+    &lt;option value="Default" selected="selected"&gt;Default fonts&lt;/option&gt;
+    &lt;option value="Asana"&gt;Asana&lt;/option&gt;
+    &lt;option value="Cambria"&gt;Cambria&lt;/option&gt;
+    &lt;option value="LatinModern"&gt;Latin Modern&lt;/option&gt;
+    &lt;option value="LucidaBright"&gt;Lucida Bright&lt;/option&gt;
+    &lt;option value="Minion"&gt;Minion&lt;/option&gt;
+    &lt;option value="STIX"&gt;STIX&lt;/option&gt;
+    &lt;option value="TeXGyreBonum"&gt;TeX Gyre Bonum&lt;/option&gt;
+    &lt;option value="TeXGyrePagella"&gt;TeX Gyre Pagella&lt;/option&gt;
+    &lt;option value="TeXGyreSchola"&gt;TeX Gyre Schola&lt;/option&gt;
+    &lt;option value="TeXGyreTermes"&gt;TeX Gyre Termes&lt;/option&gt;
+    &lt;option value="XITS"&gt;XITS&lt;/option&gt;
+    &lt;option value="XITSRTL"&gt;XITS RTL&lt;/option&gt;
+  &lt;/select&gt; &lt;br/&gt;
+&lt;/p&gt;
+
+&lt;table&gt;
+
+&lt;tr&gt;
+&lt;td&gt;&lt;/td&gt;
+&lt;th scope="col"&gt;As rendered by TeX&lt;/th&gt;
+&lt;th scope="col"&gt;As rendered by your browser&lt;/th&gt;&lt;/tr&gt;
+
+&lt;tr&gt;
+&lt;td&gt;1&lt;/td&gt;
+
+&lt;td&gt;&lt;img src="https://developer.mozilla.org/@api/deki/files/4578/=ex1.png" width="38" height="22"
+alt="TeXbook, 16.2-16.3" /&gt;&lt;/td&gt;
+&lt;td&gt;
+&lt;math display="block"&gt;
+&lt;mrow&gt;
+  &lt;msup&gt;
+    &lt;mi&gt;x&lt;/mi&gt;
+    &lt;mn&gt;2&lt;/mn&gt;
+  &lt;/msup&gt;
+  &lt;msup&gt;
+    &lt;mi&gt;y&lt;/mi&gt;
+
+    &lt;mn&gt;2&lt;/mn&gt;
+  &lt;/msup&gt;
+&lt;/mrow&gt;
+&lt;/math&gt;
+&lt;/td&gt;&lt;/tr&gt;
+
+&lt;tr&gt;
+&lt;td&gt;2&lt;/td&gt;
+&lt;td&gt;&lt;img src="https://developer.mozilla.org/@api/deki/files/4579/=ex2.png" width="30" height="17" alt="TeXbook, 16.2-16.3" /&gt;&lt;/td&gt;
+&lt;td&gt;
+&lt;math display="block"&gt;
+&lt;!--
+&lt;mrow&gt;
+  &lt;msub&gt;&lt;mi&gt;&lt;/mi&gt;&lt;mn&gt;2&lt;/mn&gt;&lt;/msub&gt;
+  &lt;msub&gt;&lt;mi&gt;F&lt;/mi&gt;&lt;mn&gt;3&lt;/mn&gt;&lt;/msub&gt;
+&lt;/mrow&gt;
+--&gt;
+&lt;mrow&gt;
+
+  &lt;mmultiscripts&gt;
+    &lt;mi&gt;F&lt;/mi&gt;
+    &lt;mn&gt;3&lt;/mn&gt;&lt;none/&gt;
+    &lt;mprescripts/&gt;
+    &lt;mn&gt;2&lt;/mn&gt;&lt;none/&gt;
+  &lt;/mmultiscripts&gt;
+&lt;/mrow&gt;
+&lt;/math&gt;
+
+&lt;/td&gt;&lt;/tr&gt;
+
+&lt;tr&gt;
+&lt;td&gt;3&lt;/td&gt;
+&lt;td&gt;&lt;img src="https://developer.mozilla.org/@api/deki/files/4586/=ex21.png" width="58" height="47" alt="TeXbook, 17-17.1" /&gt;&lt;/td&gt;
+&lt;td&gt;
+&lt;math display="block"&gt;
+&lt;mrow&gt;
+  &lt;mfrac&gt;
+    &lt;mrow&gt;
+      &lt;mi&gt;x&lt;/mi&gt;
+      &lt;mo&gt;+&lt;/mo&gt;
+
+      &lt;msup&gt;
+        &lt;mi&gt;y&lt;/mi&gt;
+        &lt;mn&gt;2&lt;/mn&gt;
+      &lt;/msup&gt;
+    &lt;/mrow&gt;
+    &lt;mrow&gt;
+      &lt;mi&gt;k&lt;/mi&gt;
+
+      &lt;mo&gt;+&lt;/mo&gt;
+      &lt;mn&gt;1&lt;/mn&gt;
+    &lt;/mrow&gt;
+  &lt;/mfrac&gt;
+&lt;/mrow&gt;
+&lt;/math&gt;
+&lt;/td&gt;&lt;/tr&gt;
+
+&lt;tr&gt;
+&lt;td&gt;4&lt;/td&gt;
+
+&lt;td&gt;&lt;img src="https://developer.mozilla.org/@api/deki/files/4587/=ex22.png" width="76" height="25" alt="TeXbook, 17-17.1" /&gt;&lt;/td&gt;
+&lt;td&gt;
+&lt;math display="block"&gt;
+&lt;mrow&gt;
+  &lt;mi&gt;x&lt;/mi&gt;
+  &lt;mo&gt;+&lt;/mo&gt;
+  &lt;msup&gt;
+    &lt;mi&gt;y&lt;/mi&gt;
+    &lt;mfrac&gt;
+
+      &lt;mn&gt;2&lt;/mn&gt;
+      &lt;mrow&gt;
+        &lt;mi&gt;k&lt;/mi&gt;
+        &lt;mo&gt;+&lt;/mo&gt;
+        &lt;mn&gt;1&lt;/mn&gt;
+      &lt;/mrow&gt;
+    &lt;/mfrac&gt;
+
+  &lt;/msup&gt;
+&lt;/mrow&gt;
+&lt;/math&gt;
+&lt;/td&gt;&lt;/tr&gt;
+
+&lt;tr&gt;
+&lt;td&gt;5&lt;/td&gt;
+&lt;td&gt;&lt;img src="https://developer.mozilla.org/@api/deki/files/4588/=ex23.png" width="30" height="42" alt="TeXbook, 17-17.1" /&gt;&lt;/td&gt;
+&lt;td&gt;
+&lt;math display="block"&gt;
+&lt;mrow&gt;
+  &lt;mfrac&gt;
+    &lt;mi&gt;a&lt;/mi&gt;
+
+    &lt;mrow&gt;
+      &lt;mi&gt;b&lt;/mi&gt;
+      &lt;mo&gt;/&lt;/mo&gt;
+      &lt;mn&gt;2&lt;/mn&gt;
+    &lt;/mrow&gt;
+  &lt;/mfrac&gt;
+&lt;/mrow&gt;
+&lt;/math&gt;
+
+&lt;/td&gt;&lt;/tr&gt;
+
+&lt;tr&gt;
+&lt;td&gt;6&lt;/td&gt;
+&lt;td&gt;&lt;img src="https://developer.mozilla.org/@api/deki/files/4589/=ex24.png" width="220" height="138" alt="TeXbook, 17.5-17.6" /&gt;&lt;/td&gt;
+&lt;td&gt;
+&lt;math display="block"&gt;
+&lt;mrow&gt;
+  &lt;msub&gt;
+    &lt;mi&gt;a&lt;/mi&gt;
+    &lt;mn&gt;0&lt;/mn&gt;
+
+  &lt;/msub&gt;
+  &lt;mo&gt;+&lt;/mo&gt;
+  &lt;mfrac&gt;
+    &lt;mn&gt;1&lt;/mn&gt;
+    &lt;mstyle displaystyle="true" scriptlevel="0"&gt;
+      &lt;msub&gt;
+        &lt;mi&gt;a&lt;/mi&gt;
+
+        &lt;mn&gt;1&lt;/mn&gt;
+      &lt;/msub&gt;
+      &lt;mo&gt;+&lt;/mo&gt;
+      &lt;mfrac&gt;
+        &lt;mn&gt;1&lt;/mn&gt;
+        &lt;mstyle displaystyle="true" scriptlevel="0"&gt;
+          &lt;msub&gt;
+
+            &lt;mi&gt;a&lt;/mi&gt;
+            &lt;mn&gt;2&lt;/mn&gt;
+          &lt;/msub&gt;
+          &lt;mo&gt;+&lt;/mo&gt;
+          &lt;mfrac&gt;
+            &lt;mn&gt;1&lt;/mn&gt;
+            &lt;mstyle displaystyle="true" scriptlevel="0"&gt;
+
+              &lt;msub&gt;
+                &lt;mi&gt;a&lt;/mi&gt;
+                &lt;mn&gt;3&lt;/mn&gt;
+              &lt;/msub&gt;
+              &lt;mo&gt;+&lt;/mo&gt;
+              &lt;mfrac&gt;
+                &lt;mn&gt;1&lt;/mn&gt;
+
+                &lt;mstyle displaystyle="true" scriptlevel="0"&gt;
+                  &lt;msub&gt;
+                    &lt;mi&gt;a&lt;/mi&gt;
+                    &lt;mn&gt;4&lt;/mn&gt;
+                  &lt;/msub&gt;
+                &lt;/mstyle&gt;
+              &lt;/mfrac&gt;
+            &lt;/mstyle&gt;
+          &lt;/mfrac&gt;
+
+        &lt;/mstyle&gt;
+      &lt;/mfrac&gt;
+    &lt;/mstyle&gt;
+  &lt;/mfrac&gt;
+&lt;/mrow&gt;
+&lt;/math&gt;
+&lt;/td&gt;&lt;/tr&gt;
+
+&lt;tr&gt;
+&lt;td&gt;7&lt;/td&gt;
+&lt;td&gt;&lt;img src="https://developer.mozilla.org/@api/deki/files/4590/=ex25.png" width="200" height="85" alt="TeXbook, 17.5-17.6" /&gt;&lt;/td&gt;
+&lt;td&gt;
+
+&lt;math&gt;
+&lt;mrow&gt;
+  &lt;msub&gt;
+    &lt;mi&gt;a&lt;/mi&gt;
+    &lt;mn&gt;0&lt;/mn&gt;
+  &lt;/msub&gt;
+  &lt;mo&gt;+&lt;/mo&gt;
+  &lt;mfrac&gt;
+
+    &lt;mn&gt;1&lt;/mn&gt;
+    &lt;mrow&gt;
+      &lt;msub&gt;
+        &lt;mi&gt;a&lt;/mi&gt;
+        &lt;mn&gt;1&lt;/mn&gt;
+      &lt;/msub&gt;
+      &lt;mo&gt;+&lt;/mo&gt;
+
+      &lt;mfrac&gt;
+        &lt;mn&gt;1&lt;/mn&gt;
+        &lt;mrow&gt;
+          &lt;msub&gt;
+            &lt;mi&gt;a&lt;/mi&gt;
+            &lt;mn&gt;2&lt;/mn&gt;
+          &lt;/msub&gt;
+
+          &lt;mo&gt;+&lt;/mo&gt;
+          &lt;mfrac&gt;
+            &lt;mn&gt;1&lt;/mn&gt;
+            &lt;mrow&gt;
+              &lt;msub&gt;
+                &lt;mi&gt;a&lt;/mi&gt;
+                &lt;mn&gt;3&lt;/mn&gt;
+
+              &lt;/msub&gt;
+              &lt;mo&gt;+&lt;/mo&gt;
+              &lt;mfrac&gt;
+                &lt;mn&gt;1&lt;/mn&gt;
+                &lt;mrow&gt;
+                  &lt;msub&gt;
+                    &lt;mi&gt;a&lt;/mi&gt;
+
+                    &lt;mn&gt;4&lt;/mn&gt;
+                  &lt;/msub&gt;
+                &lt;/mrow&gt;
+              &lt;/mfrac&gt;
+            &lt;/mrow&gt;
+          &lt;/mfrac&gt;
+        &lt;/mrow&gt;
+      &lt;/mfrac&gt;
+
+    &lt;/mrow&gt;
+  &lt;/mfrac&gt;
+&lt;/mrow&gt;
+&lt;/math&gt;
+&lt;/td&gt;&lt;/tr&gt;
+
+&lt;tr&gt;
+&lt;td&gt;8&lt;/td&gt;
+&lt;td&gt;&lt;img src="https://developer.mozilla.org/@api/deki/files/4591/=ex26.png" width="54" height="50" alt="TeXbook, 17.5-17.6" /&gt;&lt;/td&gt;
+&lt;td&gt;
+&lt;math display="block"&gt;
+&lt;mrow&gt;
+  &lt;mo&gt;(&lt;/mo&gt;
+
+  &lt;mfrac linethickness="0px"&gt;
+    &lt;mi&gt;n&lt;/mi&gt;
+    &lt;mrow&gt;
+      &lt;mi&gt;k&lt;/mi&gt;
+      &lt;mo&gt;/&lt;/mo&gt;
+      &lt;mn&gt;2&lt;/mn&gt;
+    &lt;/mrow&gt;
+
+  &lt;/mfrac&gt;
+  &lt;mo&gt;)&lt;/mo&gt;
+&lt;/mrow&gt;
+&lt;/math&gt;
+&lt;/td&gt;&lt;/tr&gt;
+
+&lt;tr&gt;
+&lt;td&gt;9&lt;/td&gt;
+&lt;td&gt;&lt;img src="https://developer.mozilla.org/@api/deki/files/4592/=ex27.png" width="237" height="50" alt="TeXbook, 17.7" /&gt;&lt;/td&gt;
+&lt;td&gt;
+&lt;math display="block"&gt;
+&lt;mrow&gt;
+  &lt;mrow&gt;
+
+
+    &lt;mo&gt;(&lt;/mo&gt;
+    &lt;mfrac linethickness="0px"&gt;
+      &lt;mi&gt;p&lt;/mi&gt;
+      &lt;mn&gt;2&lt;/mn&gt;
+    &lt;/mfrac&gt;
+    &lt;mo&gt;)&lt;/mo&gt;
+  &lt;/mrow&gt;
+
+  &lt;msup&gt;
+    &lt;mi&gt;x&lt;/mi&gt;
+    &lt;mn&gt;2&lt;/mn&gt;
+  &lt;/msup&gt;
+  &lt;msup&gt;
+    &lt;mi&gt;y&lt;/mi&gt;
+    &lt;mrow&gt;
+
+      &lt;mi&gt;p&lt;/mi&gt;
+      &lt;mo&gt;-&lt;/mo&gt;
+      &lt;mn&gt;2&lt;/mn&gt;
+    &lt;/mrow&gt;
+  &lt;/msup&gt;
+  &lt;mo&gt;-&lt;/mo&gt;
+  &lt;mfrac&gt;
+
+    &lt;mn&gt;1&lt;/mn&gt;
+    &lt;mrow&gt;
+      &lt;mn&gt;1&lt;/mn&gt;
+      &lt;mo&gt;-&lt;/mo&gt;
+      &lt;mi&gt;x&lt;/mi&gt;
+    &lt;/mrow&gt;
+  &lt;/mfrac&gt;
+
+  &lt;mfrac&gt;
+    &lt;mn&gt;1&lt;/mn&gt;
+    &lt;mrow&gt;
+      &lt;mn&gt;1&lt;/mn&gt;
+      &lt;mo&gt;-&lt;/mo&gt;
+      &lt;msup&gt;
+        &lt;mi&gt;x&lt;/mi&gt;
+
+        &lt;mn&gt;2&lt;/mn&gt;
+      &lt;/msup&gt;
+    &lt;/mrow&gt;
+  &lt;/mfrac&gt;
+&lt;/mrow&gt;
+&lt;/math&gt;
+&lt;/td&gt;&lt;/tr&gt;
+
+&lt;tr&gt;
+&lt;td&gt;10&lt;/td&gt;
+&lt;td&gt;&lt;img src="https://developer.mozilla.org/@api/deki/files/4593/=ex29.png" width="116" height="63" alt="TeXbook, 17.7-17.8" /&gt;&lt;/td&gt;
+
+&lt;td&gt;
+&lt;math display="block"&gt;
+&lt;mrow&gt;
+  &lt;munder&gt;
+    &lt;mo&gt;&amp;sum;&lt;/mo&gt;
+    &lt;mrow&gt;
+      &lt;mfrac linethickness="0px"&gt;
+        &lt;mrow&gt;
+          &lt;mn&gt;0&lt;/mn&gt;
+          &lt;mo&gt;&amp;leq;&lt;/mo&gt;
+
+          &lt;mi&gt;i&lt;/mi&gt;
+          &lt;mo&gt;&amp;leq;&lt;/mo&gt;
+          &lt;mi&gt;m&lt;/mi&gt;
+        &lt;/mrow&gt;
+        &lt;mrow&gt;
+          &lt;mn&gt;0&lt;/mn&gt;
+          &lt;mo&gt;&amp;lt;&lt;/mo&gt;
+
+          &lt;mi&gt;j&lt;/mi&gt;
+          &lt;mo&gt;&amp;lt;&lt;/mo&gt;
+          &lt;mi&gt;n&lt;/mi&gt;
+        &lt;/mrow&gt;
+      &lt;/mfrac&gt;
+    &lt;/mrow&gt;
+  &lt;/munder&gt;
+  &lt;mi&gt;P&lt;/mi&gt;
+
+  &lt;mo stretchy="false"&gt;(&lt;/mo&gt;
+  &lt;mi&gt;i&lt;/mi&gt;
+  &lt;mo&gt;,&lt;/mo&gt;
+  &lt;mi&gt;j&lt;/mi&gt;
+  &lt;mo stretchy="false"&gt;)&lt;/mo&gt;
+&lt;/mrow&gt;
+&lt;/math&gt;
+
+&lt;/td&gt;&lt;/tr&gt;
+
+&lt;tr&gt;
+&lt;td&gt;11&lt;/td&gt;
+&lt;td&gt;&lt;img src="https://developer.mozilla.org/@api/deki/files/4580/=ex3.png" width="27" height="18" alt="TeXbook, 16.2-16.3" /&gt;&lt;/td&gt;
+&lt;td&gt;
+&lt;math display="block"&gt;
+&lt;mrow&gt;
+&lt;msup&gt;
+  &lt;mi&gt;x&lt;/mi&gt;
+  &lt;mrow&gt;
+    &lt;mn&gt;2&lt;/mn&gt;
+
+    &lt;mi&gt;y&lt;/mi&gt;
+  &lt;/mrow&gt;
+&lt;/msup&gt;
+&lt;/mrow&gt;
+&lt;/math&gt;
+&lt;/td&gt;&lt;/tr&gt;
+
+&lt;tr&gt;
+&lt;td&gt;12&lt;/td&gt;
+&lt;td&gt;&lt;img src="https://developer.mozilla.org/@api/deki/files/4594/=ex30.png" width="175" height="61" alt="TeXbook, 17.8" /&gt;&lt;/td&gt;
+&lt;td&gt;
+&lt;math display="block"&gt;
+&lt;mrow&gt;
+
+  &lt;munderover&gt;
+    &lt;mo&gt;&amp;sum;&lt;/mo&gt;
+    &lt;mrow&gt;
+      &lt;mi&gt;i&lt;/mi&gt;
+      &lt;mo&gt;=&lt;/mo&gt;
+      &lt;mn&gt;1&lt;/mn&gt;
+    &lt;/mrow&gt;
+
+    &lt;mi&gt;p&lt;/mi&gt;
+  &lt;/munderover&gt;
+  &lt;munderover&gt;
+    &lt;mo&gt;&amp;sum;&lt;/mo&gt;
+    &lt;mrow&gt;
+      &lt;mi&gt;j&lt;/mi&gt;
+      &lt;mo&gt;=&lt;/mo&gt;
+
+      &lt;mn&gt;1&lt;/mn&gt;
+    &lt;/mrow&gt;
+    &lt;mi&gt;q&lt;/mi&gt;
+  &lt;/munderover&gt;
+  &lt;munderover&gt;
+    &lt;mo&gt;&amp;sum;&lt;/mo&gt;
+    &lt;mrow&gt;
+      &lt;mi&gt;k&lt;/mi&gt;
+
+      &lt;mo&gt;=&lt;/mo&gt;
+      &lt;mn&gt;1&lt;/mn&gt;
+    &lt;/mrow&gt;
+    &lt;mi&gt;r&lt;/mi&gt;
+  &lt;/munderover&gt;
+  &lt;msub&gt;
+    &lt;mi&gt;a&lt;/mi&gt;
+
+    &lt;mrow&gt;
+      &lt;mi&gt;i&lt;/mi&gt;
+      &lt;mi&gt;j&lt;/mi&gt;
+    &lt;/mrow&gt;
+  &lt;/msub&gt;
+  &lt;msub&gt;
+    &lt;mi&gt;b&lt;/mi&gt;
+
+    &lt;mrow&gt;
+      &lt;mi&gt;j&lt;/mi&gt;
+      &lt;mi&gt;k&lt;/mi&gt;
+    &lt;/mrow&gt;
+  &lt;/msub&gt;
+  &lt;msub&gt;
+    &lt;mi&gt;c&lt;/mi&gt;
+
+    &lt;mrow&gt;
+      &lt;mi&gt;k&lt;/mi&gt;
+      &lt;mi&gt;i&lt;/mi&gt;
+    &lt;/mrow&gt;
+  &lt;/msub&gt;
+&lt;/mrow&gt;
+&lt;/math&gt;
+&lt;/td&gt;&lt;/tr&gt;
+
+&lt;tr&gt;
+
+&lt;td&gt;13&lt;/td&gt;
+&lt;td&gt;&lt;img src="https://developer.mozilla.org/@api/deki/files/4595/=ex31.png" width="405" height="100" alt="TeXbook, 17.9-17.10" /&gt;&lt;/td&gt;
+&lt;td&gt;
+&lt;math display="block"&gt;
+&lt;mrow&gt;
+  &lt;msqrt&gt;
+    &lt;mn&gt;1&lt;/mn&gt;
+    &lt;mo&gt;+&lt;/mo&gt;
+    &lt;msqrt&gt;
+      &lt;mn&gt;1&lt;/mn&gt;
+
+      &lt;mo&gt;+&lt;/mo&gt;
+      &lt;msqrt&gt;
+        &lt;mn&gt;1&lt;/mn&gt;
+        &lt;mo&gt;+&lt;/mo&gt;
+        &lt;msqrt&gt;
+          &lt;mn&gt;1&lt;/mn&gt;
+          &lt;mo&gt;+&lt;/mo&gt;
+
+          &lt;msqrt&gt;
+            &lt;mn&gt;1&lt;/mn&gt;
+            &lt;mo&gt;+&lt;/mo&gt;
+            &lt;msqrt&gt;
+              &lt;mn&gt;1&lt;/mn&gt;
+              &lt;mo&gt;+&lt;/mo&gt;
+              &lt;msqrt&gt;
+
+                &lt;mn&gt;1&lt;/mn&gt;
+                &lt;mo&gt;+&lt;/mo&gt;
+                &lt;mi&gt;x&lt;/mi&gt;
+              &lt;/msqrt&gt;
+            &lt;/msqrt&gt;
+          &lt;/msqrt&gt;
+        &lt;/msqrt&gt;
+
+      &lt;/msqrt&gt;
+    &lt;/msqrt&gt;
+  &lt;/msqrt&gt;
+&lt;/mrow&gt;
+&lt;/math&gt;
+&lt;/td&gt;&lt;/tr&gt;
+
+&lt;tr&gt;
+&lt;td&gt;14&lt;/td&gt;
+&lt;td&gt;&lt;img src="https://developer.mozilla.org/@api/deki/files/4596/=ex34.png" width="272" height="50" alt="TeXbook, 17.10" /&gt;&lt;/td&gt;
+&lt;td&gt;
+&lt;math display="block"&gt;
+&lt;mrow&gt;
+
+  &lt;mrow&gt;
+    &lt;mo&gt;(&lt;/mo&gt;
+    &lt;mfrac&gt;
+      &lt;msup&gt;
+        &lt;mo&gt;&amp;part;&lt;/mo&gt;
+        &lt;mn&gt;2&lt;/mn&gt;
+      &lt;/msup&gt;
+      &lt;mrow&gt;
+
+        &lt;mo&gt;&amp;part;&lt;/mo&gt;
+        &lt;msup&gt;
+          &lt;mi&gt;x&lt;/mi&gt;
+          &lt;mn&gt;2&lt;/mn&gt;
+        &lt;/msup&gt;
+      &lt;/mrow&gt;
+    &lt;/mfrac&gt;
+    &lt;mo&gt;+&lt;/mo&gt;
+
+    &lt;mfrac&gt;
+      &lt;msup&gt;
+        &lt;mo&gt;&amp;part;&lt;/mo&gt;
+        &lt;mn&gt;2&lt;/mn&gt;
+      &lt;/msup&gt;
+      &lt;mrow&gt;
+        &lt;mo&gt;&amp;part;&lt;/mo&gt;
+        &lt;msup&gt;
+
+          &lt;mi&gt;y&lt;/mi&gt;
+          &lt;mn&gt;2&lt;/mn&gt;
+        &lt;/msup&gt;
+      &lt;/mrow&gt;
+    &lt;/mfrac&gt;
+    &lt;mo&gt;)&lt;/mo&gt;
+  &lt;/mrow&gt;
+
+  &lt;msup&gt;
+    &lt;mrow&gt;
+      &lt;mo minsize="150%"&gt;|&lt;/mo&gt;
+      &lt;mi&gt;&amp;#x3C6; &lt;!-- \varphi --&gt;&lt;/mi&gt;
+      &lt;mo stretchy="false"&gt;(&lt;/mo&gt;
+      &lt;mi&gt;x&lt;/mi&gt;
+      &lt;mo&gt;+&lt;/mo&gt;
+
+      &lt;mi mathvariant="normal"&gt;i&lt;/mi&gt;
+      &lt;mi&gt;y&lt;/mi&gt;
+      &lt;mo stretchy="false"&gt;)&lt;/mo&gt;
+      &lt;mo minsize="150%"&gt;|&lt;/mo&gt;
+    &lt;/mrow&gt;
+    &lt;mn&gt;2&lt;/mn&gt;
+
+  &lt;/msup&gt;
+  &lt;mo&gt;=&lt;/mo&gt;
+  &lt;mn&gt;0&lt;/mn&gt;
+&lt;/mrow&gt;
+&lt;/math&gt;
+&lt;/td&gt;&lt;/tr&gt;
+
+&lt;tr&gt;
+&lt;td&gt;15&lt;/td&gt;
+&lt;td&gt;&lt;img src="https://developer.mozilla.org/@api/deki/files/4581/=ex4.png" width="31" height="22" alt="TeXbook, 16.2-16.3" /&gt;&lt;/td&gt;
+&lt;td&gt;
+
+&lt;math display="block"&gt;
+&lt;mrow&gt;
+  &lt;msup&gt;
+    &lt;mn&gt;2&lt;/mn&gt;
+    &lt;msup&gt;
+      &lt;mn&gt;2&lt;/mn&gt;
+      &lt;msup&gt;
+        &lt;mn&gt;2&lt;/mn&gt;
+
+        &lt;mi&gt;x&lt;/mi&gt;
+      &lt;/msup&gt;
+    &lt;/msup&gt;
+  &lt;/msup&gt;
+&lt;/mrow&gt;
+&lt;/math&gt;
+&lt;/td&gt;&lt;/tr&gt;
+
+&lt;tr&gt;
+&lt;td&gt;16&lt;/td&gt;
+&lt;td&gt;&lt;img src="https://developer.mozilla.org/@api/deki/files/4597/=ex40.png" width="55" height="49" alt="TeXbook, 18.10-18.11" /&gt;&lt;/td&gt;
+
+&lt;td&gt;
+&lt;math display="block"&gt;
+&lt;mrow&gt;
+  &lt;msubsup&gt;
+    &lt;mo stretchy="false"&gt;&amp;int;&lt;/mo&gt;
+    &lt;mn&gt;1&lt;/mn&gt;
+    &lt;mi&gt;x&lt;/mi&gt;
+ &lt;/msubsup&gt;
+ &lt;mfrac&gt;
+
+   &lt;mrow&gt;&lt;mi&gt;d&lt;/mi&gt;&lt;mi&gt;t&lt;/mi&gt;&lt;/mrow&gt;
+   &lt;mi&gt;t&lt;/mi&gt;
+ &lt;/mfrac&gt;
+&lt;/mrow&gt;
+&lt;/math&gt;
+&lt;/td&gt;&lt;/tr&gt;
+
+&lt;tr&gt;
+&lt;td&gt;17&lt;/td&gt;
+&lt;td&gt;&lt;img src="https://developer.mozilla.org/@api/deki/files/4599/=ex41.png" width="91" height="47" alt="TeXbook, 18.12-18.13" /&gt;&lt;/td&gt;
+&lt;td&gt;
+
+&lt;math display="block"&gt;
+&lt;mrow&gt;
+  &lt;msub&gt;
+    &lt;mo&gt;&amp;#x222C; &lt;!-- \iint --&gt;&lt;/mo&gt;
+    &lt;mi&gt;D&lt;/mi&gt;
+  &lt;/msub&gt;
+  &lt;mi&gt;d&lt;/mi&gt;&lt;mi&gt;x&lt;/mi&gt;
+  &lt;mspace width="thinmathspace"/&gt;
+
+  &lt;mi&gt;d&lt;/mi&gt;&lt;mi&gt;y&lt;/mi&gt;
+&lt;/mrow&gt;
+&lt;/math&gt;
+&lt;/td&gt;&lt;/tr&gt;
+
+&lt;tr&gt;
+&lt;td&gt;18&lt;/td&gt;
+&lt;td&gt;&lt;img src="https://developer.mozilla.org/@api/deki/files/4600/=ex43.png" width="250" height="66" alt="TeXbook, 18.23" /&gt;&lt;/td&gt;
+&lt;td&gt;
+&lt;math display="block"&gt;
+&lt;mrow&gt;
+  &lt;mi&gt;f&lt;/mi&gt;
+
+  &lt;mo stretchy="false"&gt;(&lt;/mo&gt;
+  &lt;mi&gt;x&lt;/mi&gt;
+  &lt;mo stretchy="false"&gt;)&lt;/mo&gt;
+  &lt;mo&gt;=&lt;/mo&gt;
+  &lt;mrow&gt;
+    &lt;mo&gt;{&lt;/mo&gt;
+
+    &lt;mtable&gt;
+      &lt;mtr&gt;
+        &lt;mtd columnalign="center"&gt;
+          &lt;mrow&gt;
+            &lt;mn&gt;1&lt;/mn&gt;
+            &lt;mo&gt;/&lt;/mo&gt;
+            &lt;mn&gt;3&lt;/mn&gt;
+
+          &lt;/mrow&gt;
+        &lt;/mtd&gt;
+        &lt;mtd columnalign="left"&gt;
+          &lt;mrow&gt;
+            &lt;mtext&gt;if&amp;nbsp;&lt;/mtext&gt;
+            &lt;mn&gt;0&lt;/mn&gt;
+            &lt;mo&gt;&amp;leq;&lt;/mo&gt;
+            &lt;mi&gt;x&lt;/mi&gt;
+
+            &lt;mo&gt;&amp;leq;&lt;/mo&gt;
+            &lt;mn&gt;1&lt;/mn&gt;
+            &lt;mo&gt;;&lt;/mo&gt;
+          &lt;/mrow&gt;
+        &lt;/mtd&gt;
+      &lt;/mtr&gt;
+      &lt;mtr&gt;
+        &lt;mtd columnalign="center"&gt;
+
+          &lt;mrow&gt;
+            &lt;mn&gt;2&lt;/mn&gt;
+            &lt;mo&gt;/&lt;/mo&gt;
+            &lt;mn&gt;3&lt;/mn&gt;
+          &lt;/mrow&gt;
+        &lt;/mtd&gt;
+        &lt;mtd columnalign="center"&gt;
+
+          &lt;mrow&gt;
+            &lt;mtext&gt;if&amp;nbsp;&lt;/mtext&gt;
+            &lt;mn&gt;3&lt;/mn&gt;
+            &lt;mo&gt;&amp;leq;&lt;/mo&gt;
+            &lt;mi&gt;x&lt;/mi&gt;
+            &lt;mo&gt;&amp;leq;&lt;/mo&gt;
+            &lt;mn&gt;4&lt;/mn&gt;
+
+            &lt;mo&gt;;&lt;/mo&gt;
+          &lt;/mrow&gt;
+        &lt;/mtd&gt;
+      &lt;/mtr&gt;
+      &lt;mtr&gt;
+        &lt;mtd columnalign="center"&gt;
+          &lt;mn&gt;0&lt;/mn&gt;
+        &lt;/mtd&gt;
+
+        &lt;mtd columnalign="left"&gt;
+          &lt;mtext&gt;elsewhere.&lt;/mtext&gt;
+        &lt;/mtd&gt;
+      &lt;/mtr&gt;
+    &lt;/mtable&gt;
+  &lt;/mrow&gt;
+&lt;/mrow&gt;
+&lt;/math&gt;
+&lt;/td&gt;&lt;/tr&gt;
+
+&lt;tr&gt;
+&lt;td&gt;19&lt;/td&gt;
+&lt;td&gt;&lt;img src="https://developer.mozilla.org/@api/deki/files/4601/=ex44.png" width="101" height="44" alt="TeXbook, 18.23-18.24" /&gt;&lt;/td&gt;
+&lt;td&gt;
+&lt;math display="block"&gt;
+&lt;mover&gt;
+  &lt;mrow&gt;
+    &lt;mi&gt;x&lt;/mi&gt;
+    &lt;mo&gt;+&lt;/mo&gt;
+    &lt;mo&gt;...&lt;/mo&gt;
+
+    &lt;mo&gt;+&lt;/mo&gt;
+    &lt;mi&gt;x&lt;/mi&gt;
+  &lt;/mrow&gt;
+  &lt;mover&gt;
+    &lt;mo&gt;&amp;OverBrace;&lt;/mo&gt;
+    &lt;mrow&gt;&lt;mi&gt;k&lt;/mi&gt; &lt;mspace width="thinmathspace"/&gt; &lt;mtext&gt;times&lt;/mtext&gt;&lt;/mrow&gt;
+  &lt;/mover&gt;
+
+&lt;/mover&gt;
+&lt;/math&gt;
+&lt;/td&gt;&lt;/tr&gt;
+
+&lt;tr&gt;
+&lt;td&gt;20&lt;/td&gt;
+&lt;td&gt;&lt;img src="https://developer.mozilla.org/@api/deki/files/4582/=ex5.png" width="25" height="13" alt="TeXbook, 16.2-16.3" /&gt;&lt;/td&gt;
+&lt;td&gt;
+&lt;math display="block"&gt;
+&lt;mrow&gt;
+  &lt;msub&gt;
+    &lt;mi&gt;y&lt;/mi&gt;
+    &lt;msup&gt;
+
+      &lt;mi&gt;x&lt;/mi&gt;
+      &lt;mn&gt;2&lt;/mn&gt;
+    &lt;/msup&gt;
+  &lt;/msub&gt;
+&lt;/mrow&gt;
+&lt;/math&gt;
+&lt;/td&gt;&lt;/tr&gt;
+
+&lt;tr&gt;
+&lt;td&gt;21&lt;/td&gt;
+
+&lt;td&gt;&lt;img src="https://developer.mozilla.org/@api/deki/files/4602/=ex51.png" width="253" height="56" alt="TeXbook, 18.40" /&gt;&lt;/td&gt;
+&lt;td&gt;
+&lt;math display="block"&gt;
+&lt;mrow&gt;
+  &lt;munder&gt;
+    &lt;mo&gt;&amp;sum;&lt;/mo&gt;
+    &lt;mrow&gt;
+      &lt;mi&gt;p&lt;/mi&gt;
+      &lt;mtext&gt;&amp;nbsp;prime&lt;/mtext&gt;
+    &lt;/mrow&gt;
+
+  &lt;/munder&gt;
+  &lt;mi&gt;f&lt;/mi&gt;
+  &lt;mo stretchy="false"&gt;(&lt;/mo&gt;
+  &lt;mi&gt;p&lt;/mi&gt;
+  &lt;mo stretchy="false"&gt;)&lt;/mo&gt;
+  &lt;mo&gt;=&lt;/mo&gt;
+
+  &lt;msub&gt;
+    &lt;mo stretchy="false"&gt;&amp;int;&lt;/mo&gt;
+    &lt;mrow&gt;
+      &lt;mi&gt;t&lt;/mi&gt;
+      &lt;mo&gt;&amp;gt;&lt;/mo&gt;
+      &lt;mn&gt;1&lt;/mn&gt;
+    &lt;/mrow&gt;
+  &lt;/msub&gt;
+
+  &lt;mi&gt;f&lt;/mi&gt;
+  &lt;mo stretchy="false"&gt;(&lt;/mo&gt;
+  &lt;mi&gt;t&lt;/mi&gt;
+  &lt;mo stretchy="false"&gt;)&lt;/mo&gt;
+  &lt;mspace width="thinmathspace"/&gt;
+  &lt;mi&gt;d&lt;/mi&gt;
+  &lt;mi&gt;&amp;pi;&lt;/mi&gt;
+  &lt;mo stretchy="false"&gt;(&lt;/mo&gt;
+  &lt;mi&gt;t&lt;/mi&gt;
+  &lt;mo stretchy="false"&gt;)&lt;/mo&gt;
+&lt;/mrow&gt;
+&lt;/math&gt;
+&lt;/td&gt;&lt;/tr&gt;
+
+&lt;tr&gt;
+&lt;td&gt;22&lt;/td&gt;
+
+&lt;td&gt;&lt;img src="https://developer.mozilla.org/@api/deki/files/4603/=ex52.png" width="159" height="81" alt="TeXbook, 18.41" /&gt;&lt;/td&gt;
+&lt;td&gt;
+&lt;math display="block"&gt;
+&lt;mrow&gt;
+  &lt;mo stretchy="false"&gt;{&lt;/mo&gt;
+  &lt;munder&gt;
+    &lt;mrow&gt;
+      &lt;mover&gt;
+        &lt;mrow&gt;
+          &lt;mpadded width="0em"&gt;&lt;mphantom&gt;&lt;mo&gt;(&lt;/mo&gt;&lt;/mphantom&gt;&lt;/mpadded&gt;
+          &lt;mi&gt;a&lt;/mi&gt;
+          &lt;mo&gt;,&lt;/mo&gt;
+          &lt;mo&gt;...&lt;/mo&gt;
+          &lt;mo&gt;,&lt;/mo&gt;
+          &lt;mi&gt;a&lt;/mi&gt;
+        &lt;/mrow&gt;
+
+        &lt;mover&gt;
+          &lt;mo&gt;&amp;OverBrace;&lt;/mo&gt;
+          &lt;mrow&gt;
+            &lt;mi&gt;k&lt;/mi&gt;
+            &lt;mtext&gt;&amp;nbsp;&lt;/mtext&gt;
+            &lt;mi&gt;a&lt;/mi&gt;
+            &lt;mtext&gt;'s&lt;/mtext&gt;
+
+          &lt;/mrow&gt;
+        &lt;/mover&gt;
+      &lt;/mover&gt;
+      &lt;mo&gt;,&lt;/mo&gt;
+      &lt;mover&gt;
+        &lt;mrow&gt;
+          &lt;mpadded width="0em"&gt;&lt;mphantom&gt;&lt;mo&gt;(&lt;/mo&gt;&lt;/mphantom&gt;&lt;/mpadded&gt;
+          &lt;mi&gt;b&lt;/mi&gt;
+          &lt;mo&gt;,&lt;/mo&gt;
+          &lt;mo&gt;...&lt;/mo&gt;
+          &lt;mo&gt;,&lt;/mo&gt;
+          &lt;mi&gt;b&lt;/mi&gt;
+        &lt;/mrow&gt;
+
+        &lt;mover&gt;
+          &lt;mo&gt;&amp;OverBrace;&lt;/mo&gt;
+          &lt;mrow&gt;
+            &lt;mi&gt;&amp;ell;&lt;/mi&gt;
+            &lt;mtext&gt;&amp;nbsp;&lt;/mtext&gt;
+            &lt;mi&gt;b&lt;/mi&gt;
+            &lt;mtext&gt;'s&lt;/mtext&gt;
+          &lt;/mrow&gt;
+
+        &lt;/mover&gt;
+      &lt;/mover&gt;
+    &lt;/mrow&gt;
+    &lt;munder&gt;
+      &lt;mo&gt;&amp;UnderBrace;&lt;/mo&gt;
+      &lt;mrow&gt;
+        &lt;mi&gt;k&lt;/mi&gt;
+        &lt;mo&gt;+&lt;/mo&gt;
+
+        &lt;mi&gt;&amp;ell;&lt;/mi&gt;
+        &lt;mtext&gt;&amp;nbsp;elements&lt;/mtext&gt;
+      &lt;/mrow&gt;
+    &lt;/munder&gt;
+  &lt;/munder&gt;
+  &lt;mo stretchy="false"&gt;}&lt;/mo&gt;
+&lt;/mrow&gt;
+&lt;/math&gt;
+&lt;/td&gt;&lt;/tr&gt;
+
+&lt;tr&gt;
+&lt;td&gt;23&lt;/td&gt;
+&lt;td&gt;&lt;img src="https://developer.mozilla.org/@api/deki/files/4604/=ex53.png" width="213" height="108" alt="TeXbook, 18.42" /&gt;&lt;/td&gt;
+&lt;td&gt;
+&lt;math display="block"&gt;
+&lt;mrow&gt;
+  &lt;mo&gt;(&lt;/mo&gt;
+  &lt;mtable&gt;
+    &lt;mtr&gt;
+      &lt;mtd columnalign="center"&gt;
+
+        &lt;mrow&gt;
+          &lt;mo&gt;(&lt;/mo&gt;
+          &lt;mtable&gt;
+            &lt;mtr&gt;
+              &lt;mtd columnalign="center"&gt;
+                &lt;mi&gt;a&lt;/mi&gt;
+              &lt;/mtd&gt;
+              &lt;mtd columnalign="center"&gt;
+
+                &lt;mi&gt;b&lt;/mi&gt;
+              &lt;/mtd&gt;
+            &lt;/mtr&gt;
+            &lt;mtr&gt;
+              &lt;mtd columnalign="center"&gt;
+                &lt;mi&gt;c&lt;/mi&gt;
+              &lt;/mtd&gt;
+              &lt;mtd columnalign="center"&gt;
+
+                &lt;mi&gt;d&lt;/mi&gt;
+              &lt;/mtd&gt;
+            &lt;/mtr&gt;
+          &lt;/mtable&gt;
+          &lt;mo&gt;)&lt;/mo&gt;
+        &lt;/mrow&gt;
+      &lt;/mtd&gt;
+      &lt;mtd columnalign="center"&gt;
+
+        &lt;mrow&gt;
+          &lt;mo&gt;(&lt;/mo&gt;
+          &lt;mtable&gt;
+            &lt;mtr&gt;
+              &lt;mtd columnalign="center"&gt;
+                &lt;mi&gt;e&lt;/mi&gt;
+              &lt;/mtd&gt;
+              &lt;mtd columnalign="center"&gt;
+
+                &lt;mi&gt;f&lt;/mi&gt;
+              &lt;/mtd&gt;
+            &lt;/mtr&gt;
+            &lt;mtr&gt;
+              &lt;mtd columnalign="center"&gt;
+                &lt;mi&gt;g&lt;/mi&gt;
+              &lt;/mtd&gt;
+              &lt;mtd columnalign="center"&gt;
+
+                &lt;mi&gt;h&lt;/mi&gt;
+              &lt;/mtd&gt;
+            &lt;/mtr&gt;
+          &lt;/mtable&gt;
+          &lt;mo&gt;)&lt;/mo&gt;
+        &lt;/mrow&gt;
+      &lt;/mtd&gt;
+    &lt;/mtr&gt;
+
+    &lt;mtr&gt;
+      &lt;mtd columnalign="center"&gt;
+        &lt;mn&gt;0&lt;/mn&gt;
+      &lt;/mtd&gt;
+      &lt;mtd columnalign="center"&gt;
+        &lt;mrow&gt;
+          &lt;mo&gt;(&lt;/mo&gt;
+          &lt;mtable&gt;
+
+            &lt;mtr&gt;
+              &lt;mtd columnalign="center"&gt;
+                &lt;mi&gt;i&lt;/mi&gt;
+              &lt;/mtd&gt;
+              &lt;mtd columnalign="center"&gt;
+                &lt;mi&gt;j&lt;/mi&gt;
+              &lt;/mtd&gt;
+            &lt;/mtr&gt;
+
+            &lt;mtr&gt;
+              &lt;mtd columnalign="center"&gt;
+                &lt;mi&gt;k&lt;/mi&gt;
+              &lt;/mtd&gt;
+              &lt;mtd columnalign="center"&gt;
+                &lt;mi&gt;l&lt;/mi&gt;
+              &lt;/mtd&gt;
+            &lt;/mtr&gt;
+
+          &lt;/mtable&gt;
+          &lt;mo&gt;)&lt;/mo&gt;
+        &lt;/mrow&gt;
+      &lt;/mtd&gt;
+    &lt;/mtr&gt;
+  &lt;/mtable&gt;
+  &lt;mo&gt;)&lt;/mo&gt;
+&lt;/mrow&gt;
+
+&lt;/math&gt;
+&lt;/td&gt;&lt;/tr&gt;
+
+&lt;tr&gt;
+&lt;td&gt;24&lt;/td&gt;
+&lt;td&gt;&lt;img src="https://developer.mozilla.org/@api/deki/files/4605/=ex54.png" width="344" height="130" alt="TeXbook, 18.43" /&gt;&lt;/td&gt;
+&lt;td&gt;
+&lt;math display="block"&gt;
+&lt;mrow&gt;
+  &lt;mi&gt;det&lt;/mi&gt;
+  &lt;mo&gt;|&lt;/mo&gt;
+  &lt;mtable&gt;
+
+    &lt;mtr&gt;
+      &lt;mtd columnalign="center"&gt;
+        &lt;msub&gt;
+          &lt;mi&gt;c&lt;/mi&gt;
+          &lt;mn&gt;0&lt;/mn&gt;
+        &lt;/msub&gt;
+      &lt;/mtd&gt;
+      &lt;mtd columnalign="center"&gt;
+
+        &lt;msub&gt;
+          &lt;mi&gt;c&lt;/mi&gt;
+          &lt;mn&gt;1&lt;/mn&gt;
+        &lt;/msub&gt;
+      &lt;/mtd&gt;
+      &lt;mtd columnalign="center"&gt;
+        &lt;msub&gt;
+          &lt;mi&gt;c&lt;/mi&gt;
+
+          &lt;mn&gt;2&lt;/mn&gt;
+        &lt;/msub&gt;
+      &lt;/mtd&gt;
+      &lt;mtd columnalign="center"&gt;
+        &lt;mo&gt;&amp;mldr;&lt;/mo&gt;
+      &lt;/mtd&gt;
+      &lt;mtd columnalign="center"&gt;
+        &lt;msub&gt;
+
+          &lt;mi&gt;c&lt;/mi&gt;
+          &lt;mi&gt;n&lt;/mi&gt;
+        &lt;/msub&gt;
+      &lt;/mtd&gt;
+    &lt;/mtr&gt;
+    &lt;mtr&gt;
+      &lt;mtd columnalign="center"&gt;
+        &lt;msub&gt;
+
+          &lt;mi&gt;c&lt;/mi&gt;
+          &lt;mn&gt;1&lt;/mn&gt;
+        &lt;/msub&gt;
+      &lt;/mtd&gt;
+      &lt;mtd columnalign="center"&gt;
+        &lt;msub&gt;
+          &lt;mi&gt;c&lt;/mi&gt;
+
+          &lt;mn&gt;2&lt;/mn&gt;
+        &lt;/msub&gt;
+      &lt;/mtd&gt;
+      &lt;mtd columnalign="center"&gt;
+        &lt;msub&gt;
+          &lt;mi&gt;c&lt;/mi&gt;
+          &lt;mn&gt;3&lt;/mn&gt;
+
+        &lt;/msub&gt;
+      &lt;/mtd&gt;
+      &lt;mtd columnalign="center"&gt;
+        &lt;mo&gt;&amp;mldr;&lt;/mo&gt;
+      &lt;/mtd&gt;
+      &lt;mtd columnalign="center"&gt;
+        &lt;msub&gt;
+          &lt;mi&gt;c&lt;/mi&gt;
+
+          &lt;mrow&gt;
+            &lt;mi&gt;n&lt;/mi&gt;
+            &lt;mo&gt;+&lt;/mo&gt;
+            &lt;mn&gt;1&lt;/mn&gt;
+          &lt;/mrow&gt;
+        &lt;/msub&gt;
+      &lt;/mtd&gt;
+
+    &lt;/mtr&gt;
+    &lt;mtr&gt;
+      &lt;mtd columnalign="center"&gt;
+        &lt;msub&gt;
+          &lt;mi&gt;c&lt;/mi&gt;
+          &lt;mn&gt;2&lt;/mn&gt;
+        &lt;/msub&gt;
+      &lt;/mtd&gt;
+
+      &lt;mtd columnalign="center"&gt;
+        &lt;msub&gt;
+          &lt;mi&gt;c&lt;/mi&gt;
+          &lt;mn&gt;3&lt;/mn&gt;
+        &lt;/msub&gt;
+      &lt;/mtd&gt;
+      &lt;mtd columnalign="center"&gt;
+        &lt;msub&gt;
+
+          &lt;mi&gt;c&lt;/mi&gt;
+          &lt;mn&gt;4&lt;/mn&gt;
+        &lt;/msub&gt;
+      &lt;/mtd&gt;
+      &lt;mtd columnalign="center"&gt;
+        &lt;mo&gt;&amp;mldr;&lt;/mo&gt;
+      &lt;/mtd&gt;
+      &lt;mtd columnalign="center"&gt;
+
+        &lt;msub&gt;
+          &lt;mi&gt;c&lt;/mi&gt;
+          &lt;mrow&gt;
+            &lt;mi&gt;n&lt;/mi&gt;
+            &lt;mo&gt;+&lt;/mo&gt;
+            &lt;mn&gt;2&lt;/mn&gt;
+          &lt;/mrow&gt;
+
+        &lt;/msub&gt;
+      &lt;/mtd&gt;
+    &lt;/mtr&gt;
+    &lt;mtr&gt;
+      &lt;mtd columnalign="center"&gt;
+        &lt;mo&gt;&amp;#x22EE;&lt;/mo&gt;
+      &lt;/mtd&gt;
+      &lt;mtd columnalign="center"&gt;
+        &lt;mo&gt;&amp;#x22EE;&lt;/mo&gt;
+
+      &lt;/mtd&gt;
+      &lt;mtd columnalign="center"&gt;
+        &lt;mo&gt;&amp;#x22EE;&lt;/mo&gt;
+      &lt;/mtd&gt;
+      &lt;mtd columnalign="center"&gt;
+      &lt;/mtd&gt;
+      &lt;mtd columnalign="center"&gt;
+        &lt;mo&gt;&amp;#x22EE;&lt;/mo&gt;
+      &lt;/mtd&gt;
+
+    &lt;/mtr&gt;
+    &lt;mtr&gt;
+      &lt;mtd columnalign="center"&gt;
+        &lt;msub&gt;
+          &lt;mi&gt;c&lt;/mi&gt;
+          &lt;mi&gt;n&lt;/mi&gt;
+        &lt;/msub&gt;
+      &lt;/mtd&gt;
+
+      &lt;mtd columnalign="center"&gt;
+        &lt;msub&gt;
+          &lt;mi&gt;c&lt;/mi&gt;
+          &lt;mrow&gt;
+            &lt;mi&gt;n&lt;/mi&gt;
+            &lt;mo&gt;+&lt;/mo&gt;
+            &lt;mn&gt;1&lt;/mn&gt;
+
+          &lt;/mrow&gt;
+        &lt;/msub&gt;
+      &lt;/mtd&gt;
+      &lt;mtd columnalign="center"&gt;
+        &lt;msub&gt;
+          &lt;mi&gt;c&lt;/mi&gt;
+          &lt;mrow&gt;
+            &lt;mi&gt;n&lt;/mi&gt;
+
+            &lt;mo&gt;+&lt;/mo&gt;
+            &lt;mn&gt;2&lt;/mn&gt;
+          &lt;/mrow&gt;
+        &lt;/msub&gt;
+      &lt;/mtd&gt;
+      &lt;mtd columnalign="center"&gt;
+        &lt;mo&gt;&amp;mldr;&lt;/mo&gt;
+      &lt;/mtd&gt;
+
+      &lt;mtd columnalign="center"&gt;
+        &lt;msub&gt;
+          &lt;mi&gt;c&lt;/mi&gt;
+          &lt;mrow&gt;
+            &lt;mn&gt;2&lt;/mn&gt;
+            &lt;mi&gt;n&lt;/mi&gt;
+          &lt;/mrow&gt;
+
+        &lt;/msub&gt;
+      &lt;/mtd&gt;
+    &lt;/mtr&gt;
+  &lt;/mtable&gt;
+  &lt;mo&gt;|&lt;/mo&gt;
+  &lt;mo&gt;&amp;gt;&lt;/mo&gt;
+  &lt;mn&gt;0&lt;/mn&gt;
+&lt;/mrow&gt;
+
+&lt;/math&gt;
+&lt;/td&gt;&lt;/tr&gt;
+
+&lt;tr&gt;
+&lt;td&gt;25&lt;/td&gt;
+&lt;td&gt;&lt;img src="https://developer.mozilla.org/@api/deki/files/4598/=ex6.png" width="25" height="14" alt="TeXbook, 16.2-16.3" /&gt;&lt;/td&gt;
+&lt;td&gt;
+&lt;math display="block"&gt;
+&lt;msub&gt;
+  &lt;mi&gt;y&lt;/mi&gt;
+  &lt;msub&gt;
+    &lt;mi&gt;x&lt;/mi&gt;
+
+    &lt;mn&gt;2&lt;/mn&gt;
+  &lt;/msub&gt;
+&lt;/msub&gt;
+&lt;/math&gt;
+&lt;/td&gt;&lt;/tr&gt;
+
+&lt;tr&gt;
+&lt;td&gt;26&lt;/td&gt;
+&lt;td&gt;&lt;img src="https://developer.mozilla.org/@api/deki/files/4583/=ex7.png" width="90" height="23" alt="TeXbook, 16.4-16.5" /&gt;&lt;/td&gt;
+&lt;td&gt;
+&lt;math display="block"&gt;
+&lt;mrow&gt;
+  &lt;msubsup&gt;
+
+    &lt;mi&gt;x&lt;/mi&gt;
+    &lt;mn&gt;92&lt;/mn&gt;
+    &lt;mn&gt;31415&lt;/mn&gt;
+  &lt;/msubsup&gt;
+  &lt;mo&gt;+&lt;/mo&gt;
+  &lt;mi&gt;&amp;pi;&lt;/mi&gt;
+&lt;/mrow&gt;
+
+&lt;/math&gt;
+&lt;/td&gt;&lt;/tr&gt;
+
+&lt;tr&gt;
+&lt;td&gt;27&lt;/td&gt;
+&lt;td&gt;&lt;img src="https://developer.mozilla.org/@api/deki/files/4584/=ex8.png" width="27" height="36" alt="TeXbook, 16.4-16.5" /&gt;&lt;/td&gt;
+&lt;td&gt;
+&lt;math display="block"&gt;
+&lt;msubsup&gt;
+  &lt;mi&gt;x&lt;/mi&gt;
+  &lt;msubsup&gt;
+    &lt;mi&gt;y&lt;/mi&gt;
+
+    &lt;mi&gt;b&lt;/mi&gt;
+    &lt;mi&gt;a&lt;/mi&gt;
+  &lt;/msubsup&gt;
+  &lt;msubsup&gt;
+    &lt;mi&gt;z&lt;/mi&gt;
+    &lt;mi&gt;c&lt;/mi&gt;
+    &lt;mi&gt;d&lt;/mi&gt;
+
+  &lt;/msubsup&gt;
+&lt;/msubsup&gt;
+&lt;/math&gt;
+&lt;/td&gt;&lt;/tr&gt;
+
+&lt;tr&gt;
+&lt;td&gt;28&lt;/td&gt;
+&lt;td&gt;&lt;img src="https://developer.mozilla.org/@api/deki/files/4585/=ex9.png" width="24" height="22" alt="TeXbook, 16.4-16.5" /&gt;&lt;/td&gt;
+&lt;td&gt;
+&lt;math display="block"&gt;
+&lt;msubsup&gt;
+  &lt;mi&gt;y&lt;/mi&gt;
+  &lt;mn&gt;3&lt;/mn&gt;
+  &lt;mo&gt;&amp;#x2034;&lt;/mo&gt;
+&lt;/msubsup&gt;
+&lt;/math&gt;
+
+&lt;/td&gt;&lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">  /* Table style */
+
+  body {
+   text-align: center;
+  }
+
+  table
+  {
+  border: solid thin;
+  border-collapse: collapse;
+  margin-left: auto;
+  margin-right: auto;
+  }
+
+  th
+  {
+  background-color: #ddf;
+  border: solid thin;
+  color: black;
+  padding: 5px;
+  }
+
+  td
+  {
+  border: solid thin;
+  padding: 5px;
+  text-align: center;
+  }
+
+  .Asana math { font-family: Asana Math; }
+  .Cambria math { font-family: Cambria Math; }
+  .LatinModern math { font-family: Latin Modern Math; }
+  .LucidaBright math { font-family: Lucida Bright Math; }
+  .Minion math { font-family: Minion Math; }
+  .STIX math { font-family: STIX Math; }
+  .TeXGyreBonum math { font-family: TeX Gyre Bonum Math; }
+  .TeXGyrePagella math { font-family: TeX Gyre Pagella Math; }
+  .TeXGyreSchola math { font-family: TeX Gyre Schola Math; }
+  .TeXGyreTermes math { font-family: TeX Gyre Termes Math; }
+  .XITS math { font-family: XITS Math; }
+  .XITSRTL math { font-family: XITS Math; direction: rtl; }
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js">  function updateMathFont()
+  {
+  var mathFont = document.getElementById("MathFont").value;
+  if (mathFont == "Default") {
+    document.body.removeAttribute("class");
+  } else {
+    document.body.setAttribute("class", mathFont);
+  }
+  }
+
+  function load()
+  {
+  document.getElementById("MathFont").
+  addEventListener("change", updateMathFont, false)
+  }
+
+  window.addEventListener("load", load, false);
+
+</pre>
+</div>
+
+<p>Der folgende Test enthält TeX-Beispielformeln aus Knuths TeX book und vergleichbare MathML-Repräsentationen. Es vergleicht das Rendering von der XeTeX - Engine, die das standarte Latin Modern Font benutzt, und das MathML-Rendering von Ihrem Browser, welcher das standarte Math Font oder ein alternatives OpenType MATH Font benutzt. Um das beste Rendering zu erhalten, stellen Sie sicher, dass sie diese <a href="/en-US/docs/Mozilla_MathML_Project/Fonts">Mathematischen Fonts</a> auf Ihrem Betriebssystem installiert haben und einen Browser mit OpenType Math - Support, wie Gecko 31.0 {{GeckoRelease("31.0")}} oder höher, benutzen. Sie können sich auch diese <a href="http://fred-wang.github.io/MathFonts/">Seite für Tests von Mathematischen OpenType Fonts</a>, welche stattdessen auf Web Fonts basiert. Zuletzt können Sie sich <a href="/en-US/docs/Mozilla/MathML_Project/a11y#mathml_torture_test">diese Tabelle</a> anschauen wollen, die vergleicht, wie die Tests von verschiedenen Screen Readern für Mozilla-Browser gelesen werden.</p>
+
+<p>{{ EmbedLiveSample('MathML_Torture_Test', '100%', '2500px') }}</p>
+
+<div id="cke_pastebin" style="position: absolute; top: 74.6667px; width: 1px; height: 1px; overflow: hidden; left: -1000px;"> </div>
diff --git a/files/de/mozilla/mathml_project/start/index.html b/files/de/mozilla/mathml_project/start/index.html
new file mode 100644
index 0000000000..69d5538254
--- /dev/null
+++ b/files/de/mozilla/mathml_project/start/index.html
@@ -0,0 +1,95 @@
+---
+title: MathML in Aktion
+slug: Mozilla/MathML_Project/Start
+translation_of: Mozilla/MathML_Project/Start
+---
+<h2 id="MathML_in_Aktion">MathML in Aktion</h2>
+
+<p>Sehen Sie schlaue Formeln auf dieser Seite? Nicht? Zu schlecht. Hier ist ein <a href="https://developer.mozilla.org/@api/deki/files/5690/=start.png">Screenshot</a> von dem, was Sie verpassen. <a href="https://developer.mozilla.org/de/docs/Mozilla/MathML_Project">Downloaden</a> Sie einen Mozilla-Browser, der MathML untestützt, um diese traurige Situation zu ändern.</p>
+
+<p>You already have a MathML-enabled build but what you see on the screenshot is not what you get? In that case you are probably missing some crucial <a href="fonts/">MathML fonts</a>.</p>
+
+<p>Now that you are well-equipped, you should be able to see this inline equation with varying accents: <math> <mrow> <mover> <mi>x</mi> <mo>^</mo> </mover> <mo>+</mo> <mover> <mrow><mi>x</mi><mo>⁢</mo><mi>y</mi></mrow> <mo>^</mo> </mover> <mo>+</mo> <mover> <mrow><mi>x</mi><mo>⁢</mo><mi>y</mi><mo>⁢</mo><mi>z</mi></mrow> <mo>^</mo> </mover> <mo>.</mo> </mrow> </math> Next to it is this tiny formula, <math> <mrow> <mo>det</mo> <mo lspace="0" rspace="0" symmetric="false">|</mo> <mfrac linethickness="0"> <mi>a</mi> <mi>c</mi> </mfrac> <mfrac linethickness="0"> <mi>b</mi> <mi>d</mi> </mfrac> <mo lspace="0" rspace="0" symmetric="false">|</mo> <mo>=</mo> <mi>a</mi> <mi>d</mi> <mo>-</mo> <mi>b</mi> <mi>c</mi> <mo>,</mo> </mrow> </math> which can also be typeset in displaystyle as <math display="block"> <mrow> <mo>det</mo> <mo>|</mo> <mtable> <mtr> <mtd> <mi>a</mi> </mtd> <mtd> <mi>b</mi> </mtd> </mtr> <mtr> <mtd> <mi>c</mi> </mtd> <mtd> <mi>d</mi> </mtd> </mtr> </mtable> <mo>|</mo> <mo>=</mo> <mi>a</mi> <mi>d</mi> <mo>-</mo> <mi>b</mi> <mi>c</mi> <mo>.</mo> </mrow> </math></p>
+
+<p>Mathematical typesetting is picky. <a href="./">MathML in Mozilla</a> aims at complying with the <a href="http://www.w3.org/Math/">MathML specification</a> so that<em>What You See Is What You Markup</em>, or to put it another way<em>What You See Is What You Made</em>, or in short "WYSIWYM". The difference between these two is in the markup! <math display="block"> <msup> <mrow> <mo minsize="3" symmetric="false">(</mo> <mo>...</mo> <msup> <mrow> <mo minsize="2" symmetric="false">(</mo> <msup> <mrow> <mo symmetric="false">(</mo> <msub> <mi>a</mi> <mn>0</mn> </msub> <mo>+</mo> <msub> <mi>a</mi> <mn>1</mn> </msub> <mo symmetric="false">)</mo> </mrow> <msub> <mi>n</mi> <mn>1</mn> </msub> </msup> <mo>+</mo> <msub> <mi>a</mi> <mn>2</mn> </msub> <mo minsize="2" symmetric="false">)</mo> </mrow> <msub> <mi>n</mi> <mn>2</mn> </msub> </msup> <mo>+</mo> <mo>...</mo> <mo>+</mo> <msub> <mi>a</mi> <mi>p</mi> </msub> <mo minsize="3" symmetric="false">)</mo> </mrow> <msub> <mi>n</mi> <mi>p</mi> </msub> </msup> </math> <math display="block"> <msup> <mrow> <mo>(</mo> <mo>...</mo> <msup> <mrow> <mo>(</mo> <msup> <mrow> <mo>(</mo> <msub> <mi>a</mi> <mn>0</mn> </msub> <mo>+</mo> <msub> <mi>a</mi> <mn>1</mn> </msub> <mo>)</mo> </mrow> <msub> <mi>n</mi> <mn>1</mn> </msub> </msup> <mo>+</mo> <msub> <mi>a</mi> <mn>2</mn> </msub> <mo>)</mo> </mrow> <msub> <mi>n</mi> <mn>2</mn> </msub> </msup> <mo>+</mo> <mo>...</mo> <mo>+</mo> <msub> <mi>a</mi> <mi>p</mi> </msub> <mo>)</mo> </mrow> <msub> <mi>n</mi> <mi>p</mi> </msub> </msup> </math></p>
+
+<p>The roots of this bold equation <math> <mstyle mathvariant="bold"> <msup> <mi>y</mi> <mn>3</mn> </msup> <mo>+</mo> <mi>p</mi> <mi>y</mi> <mo>+</mo> <mi>q</mi> <mo>=</mo> <mn>0</mn> </mstyle> </math> are also bold <math display="block"> <mstyle mathvariant="bold"> <mi>y</mi> <mo>=</mo> <mroot> <mrow> <mo>-</mo> <mfrac> <mi>q</mi> <mn>2</mn> </mfrac> <mo>+</mo> <mroot> <mrow> <mfrac> <msup> <mi>q</mi> <mn>2</mn> </msup> <mn>4</mn> </mfrac> <mo>+</mo> <mfrac> <msup> <mi>p</mi> <mn>3</mn> </msup> <mn>27</mn> </mfrac> </mrow> <mn>2</mn> </mroot> </mrow> <mn>3</mn> </mroot> <mo>+</mo> <mroot> <mrow> <mo>-</mo> <mfrac> <mi>q</mi> <mn>2</mn> </mfrac> <mo>-</mo> <mroot> <mrow> <mfrac> <msup> <mi>q</mi> <mn>2</mn> </msup> <mn>4</mn> </mfrac> <mo>+</mo> <mfrac> <msup> <mi>p</mi> <mn>3</mn> </msup> <mn>27</mn> </mfrac> </mrow> <mn>2</mn> </mroot> </mrow> <mn>3</mn> </mroot> <mo>.</mo> </mstyle> </math></p>
+
+<p>As for the roots of the equation <math> <mrow> <mi>a</mi> <msup> <mi>x</mi> <mn>2</mn> </msup> <mo>+</mo> <mi>b</mi> <mi>x</mi> <mo>+</mo> <mi>c</mi> <mo>=</mo> <mn>0</mn> <mo>,</mo> </mrow> </math> click anywhere in the yellow area to zoom-in/zoom-out:</p>
+
+<div style="display: none;">
+<h2 id="Zoomable_Math" name="Zoomable_Math">Zoomable Math</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">    &lt;p&gt;
+      &lt;math display="block"&gt;
+        &lt;mstyle id="zoomableMath" mathbackground="yellow"&gt;
+          &lt;mrow&gt;
+            &lt;mi&gt;x&lt;/mi&gt;
+            &lt;mo&gt;=&lt;/mo&gt;
+            &lt;mfrac&gt;
+              &lt;mrow&gt;
+                &lt;mrow&gt;
+                  &lt;mo&gt;-&lt;/mo&gt;
+                  &lt;mi&gt;b&lt;/mi&gt;
+                &lt;/mrow&gt;
+                &lt;mo&gt;&amp;#xB1;&lt;/mo&gt;
+                &lt;msqrt&gt;
+                  &lt;mrow&gt;
+                    &lt;msup&gt;
+                      &lt;mi&gt;b&lt;/mi&gt;
+                      &lt;mn&gt;2&lt;/mn&gt;
+                    &lt;/msup&gt;
+                    &lt;mo&gt;-&lt;/mo&gt;
+                    &lt;mrow&gt;
+                      &lt;mn&gt;4&lt;/mn&gt;
+                      &lt;mi&gt;a&lt;/mi&gt;
+                      &lt;mi&gt;c&lt;/mi&gt;
+                    &lt;/mrow&gt;
+                  &lt;/mrow&gt;
+                &lt;/msqrt&gt;
+              &lt;/mrow&gt;
+              &lt;mrow&gt;
+                &lt;mn&gt;2&lt;/mn&gt;
+                &lt;mi&gt;a&lt;/mi&gt;
+              &lt;/mrow&gt;
+            &lt;/mfrac&gt;
+          &lt;/mrow&gt;
+        &lt;/mstyle&gt;
+      &lt;/math&gt;
+    &lt;/p&gt;
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js">      function zoomToggle()
+      {
+      if (this.hasAttribute("mathsize")) {
+      this.removeAttribute("mathsize");
+      } else {
+      this.setAttribute("mathsize", "200%");
+      }
+      }
+
+      function load()
+      {
+      document.getElementById("zoomableMath").
+      addEventListener("click", zoomToggle, false);
+      }
+
+      window.addEventListener("load", load, false);</pre>
+</div>
+
+<p style="text-align: center;">{{ EmbedLiveSample('Zoomable_Math') }}</p>
+
+<p>Consider an interesting markup like this <math display="block"> <mrow> <mo>{</mo> <mtable> <mtr> <mtd> <mrow> <msub> <mi>u</mi> <mi>t</mi> </msub> <mo>+</mo> <msub> <mrow> <mi>f</mi> <mo>(</mo> <mi>u</mi> <mo>)</mo> </mrow> <mi>x</mi> </msub> <mo>=</mo> <mn>0</mn> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mi>u</mi> <mo stretchy="false">(</mo> <mn>0</mn> <mo>,</mo> <mi>x</mi> <mo stretchy="false">)</mo> <mo>=</mo> <mrow> <mo>{</mo> <mtable> <mtr> <mtd> <mrow> <msup> <mi>u</mi> <mo>-</mo> </msup> </mrow> </mtd> <mtd> <mrow> <mtext>if </mtext> <mi>x</mi> <mo>&lt;</mo> <mn>0</mn> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <msup> <mi>u</mi> <mo>+</mo> </msup> </mrow> </mtd> <mtd> <mrow> <mtext>if </mtext> <mi>x</mi> <mo>&gt;</mo> <mn>0</mn> </mrow> </mtd> </mtr> </mtable> </mrow> </mrow> </mtd> </mtr> </mtable> </mrow> </math> or other complex markups like these <math display="block"> <mrow> <msub> <mover> <mi>Ell</mi> <mo>^</mo> </mover> <mi>Y</mi> </msub> <mo stretchy="false">(</mo> <mi>Z</mi> <mo>;</mo> <mi>z</mi> <mo>,</mo> <mi>τ</mi> <mo stretchy="false">)</mo> <mo>:=</mo> <msub> <mo>∫</mo> <mi>Y</mi> </msub> <mo>(</mo> <munder> <mo>∏</mo> <mi>l</mi> </munder> <mfrac> <mrow> <mrow> <mo>(</mo> <mfrac> <msub> <mi>y</mi> <mi>l</mi> </msub> <mrow> <mn>2</mn> <mi>π</mi> <mi mathvariant="normal">i</mi> </mrow> </mfrac> <mo>)</mo> </mrow> <mrow> <mi>θ</mi> <mo>(</mo> <mfrac> <msub> <mi>y</mi> <mi>l</mi> </msub> <mrow> <mn>2</mn> <mi>π</mi> <mi mathvariant="normal">i</mi> </mrow> </mfrac> <mo>-</mo> <mi>z</mi> <mo>)</mo> </mrow> <msup> <mi>θ</mi> <mo>′</mo> </msup> <mo stretchy="false">(</mo> <mn>0</mn> <mo stretchy="false">)</mo> </mrow> <mrow> <mi>θ</mi> <mo stretchy="false">(</mo> <mo>-</mo> <mi>z</mi> <mo stretchy="false">)</mo> <mrow> <mi>θ</mi> <mo>(</mo> <mfrac> <msub> <mi>y</mi> <mi>l</mi> </msub> <mrow> <mn>2</mn> <mi>π</mi> <mi mathvariant="normal">i</mi> </mrow> </mfrac> <mo>)</mo> </mrow> </mrow> </mfrac> <mo>)</mo> <mo>×</mo> <mo>(</mo> <munder> <mo>∏</mo> <mi>k</mi> </munder> <mfrac> <mrow> <mrow> <mi>θ</mi> <mo>(</mo> <mfrac> <msub> <mi>e</mi> <mi>k</mi> </msub> <mrow> <mn>2</mn> <mi>π</mi> <mi mathvariant="normal">i</mi> </mrow> </mfrac> <mo>-</mo> <mo stretchy="false">(</mo> <msub> <mi>α</mi> <mi>k</mi> </msub> <mo>+</mo> <mn>1</mn> <mo stretchy="false">)</mo> <mi>z</mi> <mo>)</mo> </mrow> <mi>θ</mi> <mo stretchy="false">(</mo> <mo>-</mo> <mi>z</mi> <mo stretchy="false">)</mo> </mrow> <mrow> <mrow> <mi>θ</mi> <mo>(</mo> <mfrac> <msub> <mi>e</mi> <mi>k</mi> </msub> <mrow> <mn>2</mn> <mi>π</mi> <mi mathvariant="normal">i</mi> </mrow> </mfrac> <mo>-</mo> <mi>z</mi> <mo>)</mo> </mrow> <mi>θ</mi> <mo stretchy="false">(</mo> <mo>-</mo> <mo stretchy="false">(</mo> <msub> <mi>α</mi> <mi>k</mi> </msub> <mo>+</mo> <mn>1</mn> <mo stretchy="false">)</mo> <mi>z</mi> <mo stretchy="false">)</mo> </mrow> </mfrac> <mo>)</mo> </mrow> </math> <math display="block"> <mrow> <mi>π</mi> <mo stretchy="false">(</mo> <mi>n</mi> <mo stretchy="false">)</mo> <mo>=</mo> <munderover> <mo>∑</mo> <mrow> <mi>m</mi> <mo>=</mo> <mn>2</mn> </mrow> <mi>n</mi> </munderover> <mrow> <mo>⌊</mo> <msup> <mrow> <mo>(</mo> <mrow> <munderover> <mo>∑</mo> <mrow> <mi>k</mi> <mo>=</mo> <mn>1</mn> </mrow> <mrow> <mi>m</mi> <mo>-</mo> <mn>1</mn> </mrow> </munderover> <mrow> <mo minsize="1.5">⌊</mo> <mo>(</mo> <mi>m</mi> <mo>/</mo> <mi>k</mi> <mo>)</mo> <mo minsize="2">/</mo> <mo>⌈</mo> <mi>m</mi> <mo>/</mo> <mi>k</mi> <mo>⌉</mo> <mo minsize="1.5">⌋</mo> </mrow> </mrow> <mo>)</mo> </mrow> <mrow> <mo>-</mo> <mn>1</mn> </mrow> </msup> <mo>⌋</mo> </mrow> </mrow> </math> <math display="block"> <mrow> <msub> <mrow> <mo>‖</mo> <mi>ϕ</mi> <mo>‖</mo> </mrow> <mrow> <msubsup> <mi>W</mi> <mi>s</mi> <mi>k</mi> </msubsup> <mo stretchy="false">(</mo> <msub> <mi>Ω</mi> <mi>g</mi> </msub> <mo stretchy="false">)</mo> </mrow> </msub> <mo>≝</mo> <msup> <mrow> <mo>(</mo> <munder> <mo>∑</mo> <mrow> <mo>|</mo> <mi>α</mi> <mo>|</mo> <mo>≦</mo> <mi>k</mi> </mrow> </munder> <msubsup> <mfenced close="‖" open="‖"> <mfrac> <mrow> <msup> <mo>∂</mo> <mi>α</mi> </msup> <mi>ϕ</mi> </mrow> <mrow> <mo>∂</mo> <msup> <mi>ξ</mi> <mi>α</mi> </msup> </mrow> </mfrac> </mfenced> <mrow> <msup> <mi>L</mi> <mi>s</mi> </msup> <mo stretchy="false">(</mo> <msub> <mi>Ω</mi> <mi>g</mi> </msub> <mo stretchy="false">)</mo> </mrow> <mi>s</mi> </msubsup> <mo>)</mo> </mrow> <mrow> <mn>1</mn> <mo>/</mo> <mi>s</mi> </mrow> </msup> </mrow> </math></p>
+
+<p>For more examples, refer to links on the <a href="./">MathML Project</a> page, and if you are <a href="build.html">building</a> your own Mozilla binary, see the directory<em>mozilla/layout/mathml/tests</em>.</p>
+
+<p>Now, what next? As you try out MathML in Mozilla, what to do with those few things that appear to you not to work as per the MathML spec? Or what about those things that just seem itchy, and that you wish could be done just a little better? Or what about those things that were working before and are not working anymore (a.k.a. regressions)? In either case, head over to <a href="../../quality/bug-writing-guidelines.html">Bugzilla</a> to report the discrepancies. Bugzilla has a big memory for these things, and besides, how would your problems be fixed if they are not reported?!</p>
+
+<p><a href="../../get-involved.html">Getting involved</a> is part of your contribution towards enriching <a href="../../newlayout/">Gecko</a> with an elegant standards-compliant MathML renderer. Your feedback can be manifested by <a href="authoring.html">putting MathML content on the web</a>, reporting bugs in <a href="../../quality/bug-writing-guidelines.html">Bugzilla</a>, and, if you can help with code, <a href="http://lxr.mozilla.org/seamonkey/source/layout/mathml/">inspecting/improving the current code</a>, and/or picking up an item in the <a href="update.html">ToDo</a> list.</p>
+
+<div id="cke_pastebin" style="position: absolute; top: 1775.63px; width: 1px; height: 1px; overflow: hidden; left: -1000px;"> </div>
diff --git a/files/de/mozilla/mobile/index.html b/files/de/mozilla/mobile/index.html
new file mode 100644
index 0000000000..b3a3dc1803
--- /dev/null
+++ b/files/de/mozilla/mobile/index.html
@@ -0,0 +1,25 @@
+---
+title: Mobil
+slug: Mozilla/Mobile
+tags:
+  - Mozilla
+  - mobil
+translation_of: Mozilla/Mobile
+---
+<h2 id="Firefox_OS" name="Firefox_OS"><a href="/en-US/docs/Archive/B2G_OS">Firefox OS</a></h2>
+
+<p>Firefox OS ist ein Open Source Betriebssystem, welches Linux und Mozilla's Gecko Rendering Engine verwendet um eine Benutzeroberfläche und viele Anwendungen bereit zu stellen, die komplett in HTML, CSS und JavaScript geschrieben sind.</p>
+
+<p>Informiere Dich darüber wie Firefox OS installiert wird und wie Apps für Firefox OS entwickelt werden.</p>
+
+<h2 id="Firefox_for_Android" name="Firefox_for_Android"><a href="/en-US/docs/Mozilla/Firefox_for_Android">Firefox für Android</a></h2>
+
+<p>Firefox für Android ist Mozilla's Web Browser für Android-Geräte. Firefox für Android wurde vor kurzem komplett überarbeitet um Android's natives User Interface zu nutzen und um es schneller, schlanker und besser anpassbar zu machen. Es unterstützt hardware-nahe APIs um z.B. auf die Kamera und die Telefonfunktionen zugreifen zu können.</p>
+
+<p>Informiere Dich darüber wie Du beim Aufbau von Firefox für Android helfen kannst, wie die APIs benutzt werden und wie mobile Add Ons entwickelt werden.</p>
+
+<h2 id="Mobile_web_development" name="Mobile_web_development"><a href="/en-US/docs/Web/Guide/Mobile">Mobile Web Entwicklung</a></h2>
+
+<p>Mobile Geräte haben deutlich andere Hardware-Voraussetzungen als PCs oder Laptops und viele der genutzen APIs sind noch nicht standardisiert.</p>
+
+<p>Informiere Dich darüber wie Web-Seiten entwickelt werden, die auf Mobil-Geräten gut aussehen und erfahre mehr über die neuen Möglichkeiten dieser Technologien. Lerne wie Du sicherstellen kannst, dass Deine Web-Seiten auf verschiedenen Browsern gut funktionieren.</p>
diff --git a/files/de/mozilla/mobile/viewport_meta_tag/index.html b/files/de/mozilla/mobile/viewport_meta_tag/index.html
new file mode 100644
index 0000000000..c17554471a
--- /dev/null
+++ b/files/de/mozilla/mobile/viewport_meta_tag/index.html
@@ -0,0 +1,86 @@
+---
+title: Using the viewport meta tag to control layout on mobile browsers
+slug: Mozilla/Mobile/Viewport_meta_tag
+translation_of: Mozilla/Mobile/Viewport_meta_tag
+---
+<h2 id="Hintergrund">Hintergrund</h2>
+
+<p> </p>
+
+<p>Der {{glossary("viewport")}} des Browsers ist der Bereich des Fensters, in dem Webinhalte zu sehen sind. Dies ist oft nicht die gleiche Größe wie die komplette gerenderte Seite. In diesem Fall stellt der Browser Scrollbars zur Verfügung, mit denen der Benutzer umherscrollen und auf alle Inhalte zugreifen kann.</p>
+
+<p>Geräte mit schmalem Display (z.B. Handys) rendern Seiten in einem virtuellen Fenster oder Ansichtsfenster, das normalerweise breiter als der Bildschirm ist, und verkleinern dann das gerenderte Ergebnis, so dass es auf einmal zu sehen ist. Die Benutzer können dann schwenken und zoomen, um verschiedene Bereiche der Seite zu sehen. Wenn beispielsweise ein mobiler Bildschirm eine Breite von 640px hat, können Seiten mit einem virtuellen Ansichtsfenster von 980px gerendert und dann verkleinert werden, um in den 640px-Bereich zu passen.</p>
+
+<p>Dies geschieht, weil viele Seiten nicht mobil optimiert sind und bei einer kleinen Ansichtsfensterbreite brechen (oder zumindest schlecht aussehen). Dieses virtuelle Ansichtsfenster ist eine Möglichkeit, nicht-mobile optimierte Seiten auf schmalen Bildschirmen besser aussehen zu lassen.</p>
+
+<h3 id="Enter_viewport_meta_tag">Enter viewport meta tag</h3>
+
+<p>However, this mechanism is not so good for pages that are optimized for narrow screens using <a href="/en-US/docs/Web/CSS/Media_Queries">media queries</a> — if the virtual viewport is 980px for example, media queries that kick in at 640px or 480px or less will never be used, limiting the effectiveness of such responsive design techniques.</p>
+
+<p>To mitigate this problem, Apple introduced the "viewport meta tag" in Safari iOS to let web developers control the viewport's size and scale. Many other mobile browsers now support this tag, although it is not part of any web standard. Apple's <a class="external" href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html">documentation</a> does a good job explaining how web developers can use this tag, but we had to do some detective work to figure out exactly how to implement it in Fennec. For example, Safari's documentation says the content is a "comma-delimited list," but existing browsers and web pages use any mix of commas, semicolons, and spaces as separators.</p>
+
+<p>Learn more about viewports in different mobile browsers in <a class="external" href="http://www.quirksmode.org/mobile/viewports2.html" title="http://www.quirksmode.org/mobile/viewports2.html">A Tale of Two Viewports</a> at quirksmode.org.</p>
+
+<h2 id="Viewport_basics">Viewport basics</h2>
+
+<p>A typical mobile-optimized site contains something like the following:</p>
+
+<pre>&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;</pre>
+
+<p>The <code>width</code> property controls the size of the viewport. It can be set to a specific number of pixels like <code>width=600</code> or to the special value <code>device-width</code>, which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding <code>height</code> and <code>device-height</code> values, which may be useful for pages with elements that change size or position based on the viewport height.)</p>
+
+<p>The <code>initial-scale</code> property controls the zoom level when the page is first loaded. The <code>maximum-scale</code>, <code>minimum-scale</code>, and <code>user-scalable</code> properties control how users are allowed to zoom the page in or out.</p>
+
+<h2 id="A_pixel_is_not_a_pixel">A pixel is not a pixel</h2>
+
+<p>In recent years, screen resolutions have risen to the size that individual pixels are hard to distinguish with the human eye. For example, recent smartphones generally have a 5-inch screens with resolutions upwards of 1920—1080 pixels (~400 dpi). Because of this, many browsers can display their pages in a smaller physical size by translating multiple hardware pixels for each CSS "pixel". Initially this caused usability and readability problems on many touch-optimized web sites. Peter-Paul Koch wrote about this problem in <a class="external" href="http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html">A pixel is not a pixel</a>.</p>
+
+<p>On high dpi screens, pages with <code>initial-scale=1</code> will effectively be zoomed by browsers. Their text will be smooth and crisp, but their bitmap images will probably not take advantage of the full screen resolution. To get sharper images on these screens, web developers may want to design images – or whole layouts – at a higher scale than their final size and then scale them down using CSS or viewport properties. This is consistent with the <a class="external" href="http://www.w3.org/TR/CSS2/syndata.html#length-units">CSS 2.1 specification</a>, which says:</p>
+
+<blockquote>
+<p>If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values. It is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel. It is recommended that the reference pixel be the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length.</p>
+</blockquote>
+
+<p>For web developers, this means that the size of a page is much smaller than the actual pixel count and browsers may size their layouts and images accordingly. But remember that not all mobile devices are the same width; you should make sure that your pages work well in a large variation of screen sizes and orientations.</p>
+
+<p>The default pixel ratio depends on the display density. On a display with density less than 200dpi, the ratio is 1.0. On displays with density between 200 and 300dpi, the ratio is 1.5. For displays with density over 300dpi, the ratio is the integer floor(<em>density</em>/150dpi). Note that the default ratio is true only when the viewport scale equals 1. Otherwise, the relationship between CSS pixels and device pixels depends on the current zoom level.</p>
+
+<h2 id="Viewport_width_and_screen_width">Viewport width and screen width</h2>
+
+<p>Sites can set their viewport to a specific size. For example, the definition <code>"width=320, initial-scale=1"</code> can be used to fit precisely onto a small phone display in portrait mode. This can cause <a class="external" href="http://starkravingfinkle.org/blog/2010/01/perils-of-the-viewport-meta-tag/">problems</a> when the browser doesn't render a page at a larger size. To fix this, browsers will expand the viewport width if necessary to fill the screen at the requested scale. This is especially useful on large-screen devices like the iPad. (Allen Pike's <a class="external" href="http://www.antipode.ca/2010/choosing-a-viewport-for-ipad-sites/">Choosing a viewport for iPad sites</a> has a good explanation for web developers.)</p>
+
+<p>For pages that set an initial or maximum scale, this means the <code>width</code> property actually translates into a <em>minimum</em> viewport width. For example, if your layout needs at least 500 pixels of width then you can use the following markup. When the screen is more than 500 pixels wide, the browser will expand the viewport (rather than zoom in) to fit the screen:</p>
+
+<pre>&lt;meta name="viewport" content="width=500, initial-scale=1"&gt;</pre>
+
+<p>Other <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#Attributes">attributes</a> that are available are <code>minimum-scale</code>, <code>maximum-scale</code>, and <code>user-scalable</code>. These properties affect the initial scale and width, as well as limiting changes in zoom level.</p>
+
+<p>Not all mobile browsers handle orientation changes in the same way. For example, Mobile Safari often just zooms the page when changing from portrait to landscape, instead of laying out the page as it would if originally loaded in landscape. If web developers want their scale settings to remain consistent when switching orientations on the iPhone, they must add a <code>maximum-scale</code> value to prevent this zooming, which has the sometimes-unwanted side effect of preventing users from zooming in:</p>
+
+<pre>&lt;meta name="viewport" content="initial-scale=1, maximum-scale=1"&gt;
+</pre>
+
+<h2 id="Common_viewport_sizes_for_mobile_and_tablet_devices">Common viewport sizes for mobile and tablet devices</h2>
+
+<p>If you want to know what mobile and tablet devices have which viewport widths, there is a comprehensive list of <a href="http://viewportsizes.com/" title="http://viewportsizes.com/">mobile and tablet viewport sizes here</a>. This gives information such as viewport width on portrait and landscape orientation as well as physical screen size, operating system and the pixel density of the device.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Device', '#viewport-meta', '&lt;meta name="viewport"&gt;')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Non-normatively describes the Viewport META element</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>There is clearly demand for the viewport meta tag, since it is supported by most popular mobile browsers and used by thousands of web sites. It would be good to have a true standard for web pages to control viewport properties. As the standardization process proceeds, we at Mozilla will work to keep up to date with any changes.</p>
diff --git a/files/de/mozilla/performance/index.html b/files/de/mozilla/performance/index.html
new file mode 100644
index 0000000000..1127358db7
--- /dev/null
+++ b/files/de/mozilla/performance/index.html
@@ -0,0 +1,145 @@
+---
+title: Performance
+slug: Mozilla/Performance
+tags:
+  - Add-ons
+  - Debugging
+  - Development
+  - Mozilla
+  - NeedsTranslation
+  - Performance
+  - TopicStub
+translation_of: Mozilla/Performance
+---
+<p>The articles linked to from here will help you improve performance, whether you're developing core Mozilla code or an add-on.</p>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h3 id="Documentation">Documentation</h3>
+
+    <dl>
+     <dt><a href="/en/Performance/Reporting_a_Performance_Problem" title="en/Performance/Reporting_a_Performance_Problem">Reporting a Performance Problem</a></dt>
+     <dd>A user friendly guide to reporting a performance problem. A development environment is not required.</dd>
+     <dt><a href="Benchmarking" title="Performance/Benchmarking advice">Benchmarking</a></dt>
+     <dd>Tips on generating valid performance metrics.</dd>
+     <dt><a href="/en/Extensions/Performance_best_practices_in_extensions" title="en/Extensions/Performance best practices in extensions">Performance best practices in extensions</a></dt>
+     <dd>A performance "best practices" guide for extension developers.</dd>
+     <dt><a href="/en/Performance/Measuring_add-on_startup_performance" title="en/Measuring Add-on Startup Performance">Measuring Add-on Startup Performance</a></dt>
+     <dd>A guide for add-on developers on how to set up a performance testing environment.</dd>
+     <dt><a href="/en/XUL_School/Appendix_A:_Add-on_Performance" title="en/XUL School/Appendix A: Add-on Performance">XUL School: Add-on Performance</a></dt>
+     <dd>Tips for add-on developers to help them avoid impairing application performance.</dd>
+     <dt><a href="/en/Performance/GPU_performance" title="en/GPU performance">GPU performance</a></dt>
+     <dd>Tips for profiling and improving performance when using a GPU.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Performance/ScrollLinkedEffects">Scroll-Linked Effects</a></dt>
+     <dd>Information on scroll-linked effects, their effect on performance, related tools, and possible mitigation techniques.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Performance/Automated_Performance_Testing_and_Sheriffing">Automated Performance Testing and Sheriffing</a></dt>
+     <dd>Information on automated performance testing and sheriffing at Mozilla.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Firefox/Performance_best_practices_for_Firefox_fe_engineers">Best practices for Front-end Engineers</a></dt>
+     <dd>Tips for reducing impacts on browser performance in front-end code.</dd>
+    </dl>
+
+    <p><span class="alllinks"><a class="internal" href="/Special:Tags?tag=Performance" title="Special:Tags?tag=Performance">View all pages tagged with "Performance"...</a></span></p>
+
+    <h3 id="Memory_profiling_and_leak_detection_tools">Memory profiling and leak detection tools</h3>
+
+    <dl>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Memory" title="en/Performance/Profiling with the Built-in Profiler">The Developer Tools "Memory" panel</a></dt>
+     <dd>The memory panel in the devtools supports taking heap snapshots, diffing them, computing dominator trees to surface "heavy retainers", and recording allocation stacks.</dd>
+    </dl>
+
+    <dl>
+     <dt><a href="/en-US/docs/Mozilla/Performance/about:memory">about:memory</a></dt>
+     <dd>about:memory is the easiest-to-use tool for measuring memory usage in Mozilla code, and is the best place to start. It also lets you do other memory-related operations like trigger GC and CC, dump GC &amp; CC logs, and dump DMD reports. about:memory is built on top of Firefox's <a href="/en-US/docs/Mozilla/Performance/Memory_reporting">memory reporting</a> infrastructure.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Performance/DMD">DMD</a></dt>
+     <dd>DMD is a tool that identifies shortcomings in about:memory's measurements, and can also do multiple kinds of general heap profiling.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Performance/AWSY">Are We Slim Yet</a></dt>
+     <dd>areweslimyet.com (a.k.a. AWSY) is a memory usage and regression tracker.</dd>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Performance/BloatView">BloatView</a></dt>
+     <dd>BloatView prints per-class statistics on allocations and refcounts, and provides gross numbers on the amount of memory being leaked broken down by class. It is used as part of Mozilla's continuous integration testing.</dd>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Refcount_tracing_and_balancing">Refcount tracing and balancing</a></dt>
+     <dd>Refcount tracing and balancing are ways to track down leaks caused by incorrect uses of reference counting. They are slow and not particular easy to use, and thus most suitable for use by expert developers.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Performance/GC_and_CC_logs">GC and CC logs</a></dt>
+     <dd>GC and CC logs can be generated and analyzed to in various ways. In particular, they can help you understand why a particular object is being kept alive.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Testing/Valgrind">Valgrind</a></dt>
+     <dd><a class="external text" href="http://valgrind.org/" rel="nofollow">Valgrind</a> is a tool that detects various memory-related problems at runtime, including leaks. Valgrind is used as <a class="external text" href="/en-US/docs/Valgrind_test_job" rel="nofollow">part</a> of Mozilla's continuous integration testing, though the coverage is limited because Valgrind is slow.</dd>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Testing/Firefox_and_Address_Sanitizer#LeakSanitizer">LeakSanitizer</a></dt>
+     <dd><span class="external text">LeakSanitizer</span> (a.k.a. LSAN) is similar to Valgrind, but it runs faster because it uses static source code instrumentation. LSAN is part of Mozilla's continuous integration testing, with most tests running through it as part of the AddressSanitizer (a.k.a. ASAN) test jobs.</dd>
+     <dt><a href="https://developer.apple.com/documentation/Performance/Conceptual/ManagingMemory/Articles/FindingLeaks.html">Apple tools</a></dt>
+     <dd>Apple provides <span class="external text">some tools</span> for Mac OS X that report similar problems to those reported by LSAN and Valgrind. The "leaks" tool is not recommended for use with SpiderMonkey or Firefox, because it gets confused by tagged pointers and thinks objects have leaked when they have not (see <a class="external text" href="https://bugzilla.mozilla.org/show_bug.cgi?id=390944" rel="nofollow">bug 390944</a>).</dd>
+     <dt><a href="/en-US/docs/Mozilla/Performance/Leak_Gauge">Leak Gauge</a></dt>
+     <dd>Leak Gauge is a tool that can be used to detect certain kinds of leaks in Gecko, including those involving documents, window objects, and docshells.</dd>
+     <dt><a href="https://dxr.mozilla.org/mozilla-central/source/memory/replace/logalloc/README">LogAlloc</a></dt>
+     <dd>LogAlloc is a tool that dumps a log of memory allocations in Gecko. That log can then be replayed against Firefox's default memory allocator independently or through another replace-malloc library, allowing the testing of other allocators under the exact same workload.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Performance/Memory_Profiler">Memory Profiler</a></dt>
+     <dd>The memory profiler samples allocation events and provides different views to analyze the allocation characteristic.</dd>
+    </dl>
+
+    <p>See also the documentation on <a href="/en-US/docs/Mozilla/Performance/Leak-hunting_strategies_and_tips">Leak-hunting strategies and tips.</a></p>
+   </td>
+   <td>
+    <h3 id="Profiling_and_performance_tools">Profiling and performance tools</h3>
+
+    <dl>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Performance" title="en/Performance/Profiling with the Built-in Profiler">Profiling with the Developer Tools Profiler</a></dt>
+     <dd>The profiler built into the developer tools has a high-level waterfall, detailed call tree, allocations and GC profiling, and flame graphs. It is available on all platforms and release channels, and also supports remote profiling b2g and Fennec.</dd>
+    </dl>
+
+    <dl>
+     <dt><a href="/en/Performance/Profiling_with_the_Built-in_Profiler" title="en/Performance/Profiling with the Built-in Profiler">Profiling with the Gecko Profiler</a> {{ gecko_minversion_inline("16.0") }}</dt>
+     <dd>The Gecko Profiler is a good tool to start with, particularly for understanding where time is spent within C++ code in Firefox.</dd>
+     <dt><a href="/en/Performance/Profiling_with_Instruments" title="en/Performance/Profiling with Instruments">Profiling with Instruments</a></dt>
+     <dd>How to use Apple's Instruments tool to profile Mozilla code.</dd>
+     <dt><a href="/en/Performance/Profiling_with_Xperf" title="en/Performance/Profiling with Xperf">Profiling with Xperf</a></dt>
+     <dd>How to use Microsoft's Xperf tool to profile Mozilla code.</dd>
+     <dt><a href="/en-US/docs/Performance/Profiling_with_Concurrency_Visualizer" title="en/Performance/Profiling with Concurrency Visualizer">Profiling with Concurrency Visualizer</a></dt>
+     <dd>How to use Visual Studio's Concurrency Visualizer tool to profile Mozilla code.</dd>
+     <dt><a href="/en/Performance/Profiling_with_Zoom" title="en/Performance/Profiling with Zoom">Profiling with Zoom</a></dt>
+     <dd>Zoom is a profiler for Linux done by the people who made Shark</dd>
+     <dt><a href="/en/Performance/Measuring_performance_using_the_PerfMeasurement.jsm_code_module" title="en/Performance/Measuring performance using the PerfMeasurement.jsm code module">Measuring performance using the PerfMeasurement.jsm code module</a> {{ gecko_minversion_inline("2.0") }}</dt>
+     <dd>Using <a href="/en/JavaScript_code_modules/PerfMeasurement.jsm" title="en/JavaScript code modules/PerfMeasurement.jsm"><code>PerfMeasurement.jsm</code></a> to measure performance data in your JavaScript code.</dd>
+     <dt><a href="/en-US/docs/Performance/Adding_a_new_Telemetry_probe" title="https://developer.mozilla.org/en-US/docs/Performance/Adding_a_new_Telemetry_probe">Adding a new Telemetry probe</a></dt>
+     <dd>Information on how to add a new measurement to the Telemetry performance-reporting system</dd>
+     <dt><a href="/en/Performance/Profiling_JavaScript_with_Shark" title="en/Performance/Profiling JavaScript with Shark">Profiling JavaScript with Shark</a> (obsolete - replaced by Instruments)</dt>
+     <dd>How to use the Mac OS X Shark profiler to profile JavaScript code in Firefox 3.5 or later.</dd>
+     <dt><a href="/en/Performance/Profiling_with_Shark" title="en/Performance/Profiling with Shark">Profiling with Shark</a> (obsolete - replaced by Instruments)</dt>
+     <dd>How to use Apple's Shark tool to profile Mozilla code.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Performance/Investigating_CSS_Performance">Investigating CSS Performance</a></dt>
+     <dd>How to figure out why restyle is taking so long</dd>
+    </dl>
+
+    <h3 id="Power_profiling">Power profiling</h3>
+
+    <dl>
+     <dt><a href="/en-US/docs/Mozilla/Performance/Power_profiling_overview">Power profiling overview</a></dt>
+     <dd>This page provides an overview of relevant information, including details about hardware, what can be measured, and recommended approaches. It should be the starting point for anybody new to power profiling.</dd>
+     <dt><code><a href="/en-US/docs/Mozilla/Performance/tools_power_rapl">tools/power/rapl</a></code> (Mac, Linux)</dt>
+     <dd><code>tools/power/rapl</code> is a command-line utility in the Mozilla codebase that uses the Intel RAPL interface to gather direct power estimates for the package, cores, GPU and memory.</dd>
+     <dt><code><a href="/en-US/docs/Mozilla/Performance/powermetrics">powermetrics</a></code> (Mac-only)</dt>
+     <dd><code>powermetrics</code> is a command-line utility that gathers and displays a wide range of global and per-process measurements, including CPU usage, GPU usage, and various wakeups frequencies.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Performance/TimerFirings_logging">TimerFirings logging</a> (All platforms)</dt>
+     <dd>TimerFirings logging is a built-in logging mechanism that prints data on every time fired.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Performance/Activity_Monitor_and_top">Activity Monitor, Battery Status Menu and <code>top</code></a> (Mac-only)</dt>
+     <dd>The battery status menu, Activity Monitor and <code>top</code> are three related Mac tools that have major flaws but often consulted by users, and so are worth understanding.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Performance/Intel_Power_Gadget">Intel Power Gadget</a> (Windows, Mac, Linux)</dt>
+     <dd>Intel Power Gadget provides real-time graphs for package and processor RAPL estimates. It also provides an API through which those estimates can be obtained.</dd>
+     <dt><code><a href="/en-US/docs/Mozilla/Performance/perf">perf</a></code> (Linux-only)</dt>
+     <dd><code>perf</code> is a powerful command-line utility that can measure many different things, including energy estimates and high-context measurements of things such as wakeups.</dd>
+     <dt><code><a href="/en-US/docs/Mozilla/Performance/turbostat">turbostat</a></code> (Linux-only)</dt>
+     <dd><code>turbostat</code> is a command-line utility that gathers and displays various power-related measurements, with a focus on per-CPU measurements such as frequencies and C-states.</dd>
+     <dt><code><a href="https://01.org/powertop">powertop</a></code> (Linux-only)</dt>
+     <dd><code>powertop</code> is an interactive command-line utility that gathers and displays various power-related measurements.</dd>
+    </dl>
+
+    <h3 id="Related_Topics">Related Topics</h3>
+
+    <dl>
+     <dd><a href="/en/JavaScript" title="en/JavaScript">JavaScript</a>, <a href="/en/XPCOM" title="en/XPCOM">XPCOM</a>, <a href="/En/Developer_Guide" title="en/Developing_Mozilla">Developing Mozilla</a>, <a href="/en/Extensions" title="en/Extensions">Extensions</a>, <a href="/en/Addons" title="en/Addons">Addons</a></dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/de/mozilla/persona/bootstrapping_persona/index.html b/files/de/mozilla/persona/bootstrapping_persona/index.html
new file mode 100644
index 0000000000..f4405da59f
--- /dev/null
+++ b/files/de/mozilla/persona/bootstrapping_persona/index.html
@@ -0,0 +1,31 @@
+---
+title: Bootstrapping Persona
+slug: Mozilla/Persona/Bootstrapping_Persona
+tags:
+  - ich kann nur deutsch
+translation_of: Archive/Mozilla/Persona/Bootstrapping_Persona
+---
+<p>To be truly successful and decentralized, Persona needs support from three different groups:</p>
+<ul>
+  <li><strong>Web Sites</strong> must let their users sign in with Persona.</li>
+  <li><strong>Web Browsers</strong> must implement the <a href="/en/DOM/navigator.id" title="navigator.id"><code>navigator.id</code></a> APIs.</li>
+  <li><strong>Email Providers</strong> must become Identity Providers (IdPs).</li>
+</ul>
+<p>This creates a chicken-and-egg problem: none of these groups would significantly benefit unless there was a critical mass of users, but a distributed system can't get a critical mass of users without support from the above groups.</p>
+<p>To solve this problem, <a class="link-https" href="https://login.persona.org" rel="freelink">https://login.persona.org</a> hosts three resources:</p>
+<ol>
+  <li>A fallback Identity Provider, which vouches for users whose email providers don't support Persona.</li>
+  <li>A <a href="/en-US/docs/persona/Browser_compatibility" title="/en-US/docs/persona/Browser_compatibility">cross-browser</a>, JavaScript implementation of the <code><a href="/en/DOM/navigator.id" title="navigator.id">navigator.id</a></code> APIs for browsers without native support.</li>
+  <li>A hosted verification API to make it easy for sites to verify user credentials.</li>
+</ol>
+<p>Together, this allows web sites to offer Persona to users regardless of browser and without email providers needing to get involved.</p>
+<p>These services are temporary, and the Persona system is designed such that they transparently and automatically drop away as native support gets added to browsers and email providers. Thus, they will become less relevant as Persona matures, and may eventually be removed all together. At that point, <a href="https://login.persona.org" rel="freelink">https://login.persona.org</a> won't feature at all in the Persona system.</p>
+<h2 id="Fallback_Identity_Provider">Fallback Identity Provider</h2>
+<p>Any domain can become an Identity Provider as long as relying parties are willing to trust the certificates issued by that domain. We expect email providers to act as an IdPs for the addresses they administer, making the user experience of Persona seamless for those users.  It allows the user to leverage their existing relationship with the email provider when authenticating at other sites.</p>
+<p>However, email providers won't become IdPs until there is significant demand from their users. In the meantime, Mozilla operates a fallback IdP at <a href="https://login.persona.org" rel="freelink">https://login.persona.org</a>. This fallback allows users to sign into sites with their existing email address, regardless of whether or not the email provider supports Persona. The fallback IdP will certify email addresses from any domain using its own authentication flow and its own password, so long as the user is able to prove control of an address by clicking a link in a verification email.</p>
+<p>Once an email provider supports Persona natively, its users will transparently begin use it instead of the fallback IdP.</p>
+<h2 id="Cross-browser_API_Library">Cross-browser API Library</h2>
+<p>For Persona to work, the user's browser must support the <a href="/en/DOM/navigator.id" title="navigator.id">navigator.id</a> API. Eventually, browsers will add native support for these APIs, but until then a <a href="/en-US/docs/persona/Browser_compatibility" title="/en-US/docs/persona/Browser_compatibility">cross-browser </a>implementation is available at <a href="https://login.persona.org/include.js" title="https://login.persona.org/include.js">https://login.persona.org/include.js</a>. By including this file, web sites can already begin using Persona. Once native implementations of the API are available, the library will automatically defer to those.</p>
+<h2 id="Remote_verification_service">Remote verification service</h2>
+<p>At <a href="https://login.persona.org" rel="freelink">https://login.persona.org</a> Mozilla hosts a <a href="/en/Persona/Remote_Verification_API" title="en/BrowserID/Remote_Verification_API">remote verification service</a> that web sites can use to verify identity assertions sent from users. This makes it simpler for web sites to support Persona as it takes care of parsing the assertion and cryptographically verifying user identities.</p>
+<p>Once the Persona data formats stabilize, verification will most likely be done locally on each site's server. This transition is especially important for user privacy, since it will make it impossible for the fallback IdP to track its users. Even with remote verification, users of native IdPs can't be tracked by that IdP.</p>
diff --git a/files/de/mozilla/persona/branding/index.html b/files/de/mozilla/persona/branding/index.html
new file mode 100644
index 0000000000..f35f03575c
--- /dev/null
+++ b/files/de/mozilla/persona/branding/index.html
@@ -0,0 +1,42 @@
+---
+title: Branding resources
+slug: Mozilla/Persona/branding
+translation_of: Archive/Mozilla/Persona/User_interface_guidelines
+---
+<h2 id="Einloggen_mit_Persona_Buttons">Einloggen mit Persona Buttons</h2>
+<h3 id="Bilder">Bilder</h3>
+<p>Der "Einloggen" Button ist in drei Versionen und drei Farben erhältlich:</p>
+<table>
+  <thead>
+    <tr>
+      <th scope="row"> </th>
+      <th scope="col">Einloggen mit Emailadresse</th>
+      <th scope="col">Einloggen mit Persona</th>
+      <th scope="col">Einloggen</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">Schwarz</th>
+      <td><img alt="" src="/files/3955/email_sign_in_black.png" style="width: 202px; height: 25px;"></td>
+      <td><img alt="" src="/files/3961/persona_sign_in_black.png" style="width: 185px; height: 25px;"></td>
+      <td><img alt="" src="/files/3967/plain_sign_in_black.png" style="width: 95px; height: 25px;"></td>
+    </tr>
+    <tr>
+      <th scope="row">Blau</th>
+      <td><img alt="" src="/files/3957/email_sign_in_blue.png" style="width: 202px; height: 25px;"></td>
+      <td><img alt="" src="/files/3963/persona_sign_in_blue.png" style="width: 185px; height: 25px;"></td>
+      <td><img alt="" src="/files/3969/plain_sign_in_blue.png" style="width: 95px; height: 25px;"></td>
+    </tr>
+    <tr>
+      <th scope="row">Rot</th>
+      <td><img alt="" src="/files/3959/email_sign_in_red.png" style="width: 202px; height: 25px;"></td>
+      <td><img alt="" src="/files/3965/persona_sign_in_red.png" style="width: 185px; height: 25px;"></td>
+      <td><img alt="" src="/files/3971/plain_sign_in_red.png" style="width: 95px; height: 25px;"></td>
+    </tr>
+  </tbody>
+</table>
+<h3 id="CSS-Basis">CSS-Basis</h3>
+<p><a href="http://sawyerhollenshead.com/" title="http://sawyerhollenshead.com/">Sawyer Hollenshead</a> erzeugte ein Set exzellenter CSS-basierter Buttons. <a href="/files/3973/persona-css-buttons.zip" title="/files/3973/persona-css-buttons.zip">Download (.zip)</a></p>
+<h2 id="Mehr_Info">Mehr Info</h2>
+<p>Mehr Informationen über Persona's visuelles Design bei <a href="http://people.mozilla.org/~smartell/persona/" title="http://people.mozilla.org/~smartell/persona/">Sean Martell's style primer</a>.</p>
diff --git a/files/de/mozilla/persona/browser_compatibility/index.html b/files/de/mozilla/persona/browser_compatibility/index.html
new file mode 100644
index 0000000000..716b5c3c46
--- /dev/null
+++ b/files/de/mozilla/persona/browser_compatibility/index.html
@@ -0,0 +1,84 @@
+---
+title: Browser Kompatibilität
+slug: Mozilla/Persona/Browser_compatibility
+translation_of: Archive/Mozilla/Persona/Browser_compatibility
+---
+<h2 id="Unterstützte_Browser">Unterstützte Browser</h2>
+<p>Persona wird mit den folgenden Browsern entwickelt und getestet. Dank Personas plattformübergreifender JavaScript Bibliothek benötigen Nutzer keine Add-Ons, um Persona zu nutzen.</p>
+<table>
+ <tbody>
+  <tr>
+   <th colspan="3" scope="row" style="text-align: center; background-color: #d3d7cf;"><strong>Desktop Browser</strong></th>
+  </tr>
+  <tr>
+   <th scope="row"><strong>Internet Explorer</strong></th>
+   <td colspan="2" rowspan="1" style="background-color: #8ae234;">8.0<sup>*</sup>, 9.0<sup>†</sup>, 10.0<sup>*</sup><sup>*</sup> (siehe <a href="#Internet_Explorer_Kompatibilit.C3.A4tsmodus" title="https://developer.mozilla.org/docs/persona/Browser_compatibility#Internet_Explorer_.22Compatibility_Mode.22">Kompatibilitätsmodus</a>)</td>
+  </tr>
+  <tr>
+   <th scope="row"><strong>Firefox</strong></th>
+   <td colspan="2" style="background-color: #8ae234;">Aktuelle Version, Beta, Aurora, Nightly, und Extended Support Versionen, vorige stabile Version</td>
+  </tr>
+  <tr>
+   <th scope="row"><strong>Chrome</strong></th>
+   <td colspan="2" style="background-color: #8ae234;">Letzte stabile Version</td>
+  </tr>
+  <tr>
+   <th scope="row"><strong>Safari</strong></th>
+   <td colspan="2" style="background-color: #8ae234;">Letzte stabile Version</td>
+  </tr>
+  <tr>
+   <th scope="row"><strong>Opera</strong></th>
+   <td colspan="2" style="background-color: #8ae234;">Letzte stabile Version<sup>‡</sup></td>
+  </tr>
+  <tr>
+   <th colspan="3" scope="row" style="text-align: center; background-color: #d3d7cf;"><strong>iOS Browser</strong></th>
+  </tr>
+  <tr>
+   <th scope="row"><strong>Mobile Safari</strong></th>
+   <td colspan="2" rowspan="1" style="background-color: #8ae234;">iOS 5.x — 6.x</td>
+  </tr>
+  <tr>
+   <th colspan="3" scope="row" style="text-align: center; background-color: #d3d7cf;"><strong>Android Browser</strong></th>
+  </tr>
+  <tr>
+   <th scope="row"><strong>Standardbrowser</strong></th>
+   <td colspan="2" rowspan="1" style="background-color: #8ae234;">2.2 — 4.x</td>
+  </tr>
+  <tr>
+   <th scope="row"><strong>Firefox</strong></th>
+   <td colspan="2" style="background-color: #8ae234;">Aktuelle Version, Beta, Aurora, Nightly, und Extended Support Versionen, vorige stabile Version</td>
+  </tr>
+  <tr>
+   <th scope="row"><strong>Chrome</strong></th>
+   <td colspan="2" style="background-color: #8ae234;">Letzte stabile Version</td>
+  </tr>
+ </tbody>
+</table>
+<p><sup>*</sup>: für Windows XP. <sup>†</sup>: für Windows Vista und Windows 7. <sup>*</sup><sup>*</sup>Windows 8.<sup>  </sup><sup>‡</sup>: As time allows.</p>
+<h2 id="Nicht_unterstützte_Browser">Nicht u<span style="font-size: 2.142857142857143rem;">nterstützte Browser</span></h2>
+<ul>
+ <li>Internet Explorer 6.0 and 7.0 werden nicht unterstützt. Nutzer werden aufgefordert, ihre Browser zu aktualisieren. Siehe auch <a href="#Internet_Explorer_Kompatibilit.C3.A4tsmodus" title="https://developer.mozilla.org/docs/persona/Browser_compatibility#Internet_Explorer_.22Compatibility_Mode.22">Kompatibilitätsmodus</a>.</li>
+ <li>Google Chrome Frame wird nicht unterstützt und wird nicht funktionieren. Unterstüzung kann folgen (<a href="https://github.com/mozilla/browserid/issues/796" title="https://github.com/mozilla/browserid/issues/796">Issue #796</a>).</li>
+ <li>Drittanbieter-Bowser in iOS werden nicht unterstützt und werden nicht funktionieren. Unterstüzung kann folgen (<a href="https://github.com/mozilla/browserid/issues/2034" title="https://github.com/mozilla/browserid/issues/2034">Issue #2034</a>).</li>
+</ul>
+<h2 id="Internet_Explorer_Kompatibilitätsmodus">Internet Explorer Kompatibilitätsmodus</h2>
+<p>Ab Version 8.0 unterstützt der Internet Explorer eine Funktion namens Kompatibilitätsmodus, die<span style="line-height: 1.5;"> zur Emulation älterer Internet Explorer Versionen beim Rendern einer Seite dient. Die Funktion kann über drei verschiedene Wege kontrolliert werden:</span></p>
+<ol>
+ <li>Als lokale Einstellung im Browser</li>
+ <li>Basierend auf der Präsenz und dem Inhalt der <a href="https://developer.mozilla.org/docs/Quirks_Mode_and_Standards_Mode" title="https://developer.mozilla.org/docs/Quirks_Mode_and_Standards_Mode">DOCTYPE</a> Deklaration auf der Seite.</li>
+ <li>Als <a href="http://msdn.microsoft.com/library/cc288325%28v=vs.85%29.aspx" title="http://msdn.microsoft.com/library/cc288325%28v=vs.85%29.aspx">"X-UA-Compatible"</a> header anstatt eines HTTP headers oder als <a href="https://developer.mozilla.org/docs/HTML/Element/meta" title="https://developer.mozilla.org/docs/HTML/Element/meta"><code>&lt;meta&gt;</code></a> tag auf einer Seite. Diese Mehtode überschreibt die beiden ersten.</li>
+</ol>
+<p>Weil nur Internet Explorer 8.0 und neuer von Persona unterstützt werden, werden Internet Explorer, die eine ältere Version emulieren, nicht mit Persona funktionieren. Dies ist typisch für einen der folgenden Gründe:</p>
+<ul>
+ <li>Ihre Seite benutzt "X-UA-Compatible", um dem Browser zu sagen, er solle eine Internet Explorer Version vor 8.0 emulieren.</li>
+ <li>Ihre Seite enthält kein DOCTYPE, hat kein DOCTYPE auf der ersten Linie der Seite, Ihre Seite funktioniert nicht mit dem Browser oder Ihre Seite setzt "X-UA-Compatible" nicht auf Internet Explorer Version 8.0 oder höher.</li>
+ <li>Der Internet Explorer wurde so konfiguriert, dass er eine ältere Version emuliert und Ihre Seite überschreibt diese Einstellung nicht indem sie "X-UA-Compatible" zu Internet Explorer 8.0 oder höher setzt.</li>
+</ul>
+<p>Für weitere Informationen siehe <a href="https://blogs.msdn.com/b/askie/archive/2009/03/23/understanding-compatibility-modes-in-internet-explorer-8.aspx?Redirected=true" title="https://blogs.msdn.com/b/askie/archive/2009/03/23/understanding-compatibility-modes-in-internet-explorer-8.aspx?Redirected=true">"Understanding Compatibility Modes in Internet Explorer 8"</a> und <a href="http://hsivonen.iki.fi/doctype/index.html#ie8" title="http://hsivonen.iki.fi/doctype/index.html#ie8">"IE8 and IE9 Complications"</a>.</p>
+<h2 id="Andere_Browser">Andere Browser</h2>
+<p>Obwohl nicht explizit unterstützt, jeder Browser der {{ domxref("window.postMessage()") }} und {{ domxref("Storage", "localStorage") }} unterstützt sollte funktionieren. Diese APIs werden seit März 2010 von allen bekannten Browsern untertützt.</p>
+<h2 id="Bekannte_Fehler">Bekannte Fehler</h2>
+<ul>
+ <li>Browser müssen Drittanbiertecookies akzeptieren (<a href="https://github.com/mozilla/browserid/issues/1352" title="https://github.com/mozilla/browserid/issues/1352">Issue #1352</a>).</li>
+ <li>Android 2.x Nutzer, die keinen Standard Browser gewählt haben, werden sich vermutlich nicht anmelden können (<a href="https://github.com/mozilla/browserid/issues/1854" title="https://github.com/mozilla/browserid/issues/1854">Issue #1854</a>).</li>
+</ul>
diff --git a/files/de/mozilla/persona/index.html b/files/de/mozilla/persona/index.html
new file mode 100644
index 0000000000..0a8aa84850
--- /dev/null
+++ b/files/de/mozilla/persona/index.html
@@ -0,0 +1,133 @@
+---
+title: Persona
+slug: Mozilla/Persona
+tags:
+  - Persona
+translation_of: Archive/Mozilla/Persona
+---
+<div class="callout-box">
+<p><strong>Bleibe informiert oder bekomme Hilfe!</strong></p>
+
+<p>Verfolge <a class="external" href="http://identity.mozilla.com/" title="http://identity.mozilla.com/">unseren Blog</a>, trete <a class="link-https" href="https://lists.mozilla.org/listinfo/dev-identity" title="https://lists.mozilla.org/listinfo/dev-identity">unserer Mailingliste</a> bei oder finde uns in <a class="link-irc" href="irc://irc.mozilla.org/identity" title="irc://irc.mozilla.org/identity">#identity</a> in <a class="link-https" href="https://wiki.mozilla.org/IRC" title="https://wiki.mozilla.org/IRC"> IRC</a>.</p>
+</div>
+
+<p><a class="link-https" href="https://www.mozilla.org/en-US/persona/" title="https://www.mozilla.org/en-US/persona/">Mozilla Persona</a> ist ein browserunabhängiges Login-System für das Web, das einfach zu verwenden und einfach einzusetzen ist. Es funktioniert mit <a href="/de/docs/Mozilla/Persona/Browser_compatibility" title="/de/docs/Mozilla/Persona/Browser_compatibility">allen wichtigen Browsern</a> und du kannst <a href="/de/docs/Mozilla/Persona/Quick_Setup" title="/de/docs/Mozilla/Persona/Quick_Setup">noch heute beginnen</a>.</p>
+
+<p><strong>Warum solltest du Persona auf deiner Seite verwenden?</strong></p>
+
+<ol>
+ <li><strong>Persona löst Webseiten-spezifische Passwörter vollständig ab</strong>, wodurch es Benutzer und Websites von der Last der Erstellung, Verwaltung und sicheren Speicherung von Passwörtern befreit.</li>
+ <li><strong>Persona ist einfach zu bedienen</strong>. Mit nur zwei Klicks kann sich ein Persona-Benutzer bei einer neuen Website wie <a href="http://voo.st/" title="http://voo.st/">Voost</a> registrieren und dabei alle Probleme bei der Account-Erstellung umgehen.</li>
+ <li><strong>Persona ist einfach zu implementieren</strong>. Entwickler können Persona zu einer Website in einem einzigen Nachmittag hinzufügen.</li>
+ <li><span class="short_text" id="result_box" lang="de"><span class="alt-edited hps">Das Beste von allem,</span> <span class="hps">es gibt kein</span> <strong><span class="atn hps">Lock-in</span></strong></span><strong>.</strong> Entwickler erhalten eine verifizierte E-Mail-Adresse für alle ihre Benutzer und Benutzer können eine beliebige E-Mail-Adresse mit Persona verwenden.</li>
+</ol>
+
+<p>Und Persona wird stetig besser: <span id="result_box" lang="de"><span class="hps">Es </span><span class="alt-edited hps">basiert auf einem <strong>offenen, dezentralisierten Protokoll</strong></span><span>, das dafür ausgelegt ist</span></span>, eine <strong>direkte Integration in Browser</strong> und <strong>native Unterstützung von E-Mail-Providern</strong> zu erlauben. Webseiten die Persona heute implementieren werden diese Verbesserungen automatisch in Erfahrung bringen, ohne irgendeinen Code ändern zu müssen.</p>
+
+<div class="note"><strong>Hinweis:</strong> Persona befindet sich in aktiver Entwicklung. Verfolge <a class="external" href="http://identity.mozilla.com/" title="http://identity.mozilla.com/">unseren Blog</a> um von neuen Funktionen zu erfahren oder trete <a class="link-https" href="https://lists.mozilla.org/listinfo/dev-identity" title="https://lists.mozilla.org/listinfo/dev-identity">unserer Mailingliste</a> bei und gib uns dein Feedback!</div>
+
+<h2 id="Verwenden_von_Persona_auf_Ihrer_Webseite">Verwenden von Persona auf Ihrer Webseite</h2>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h3 id="Der_Einstieg">Der Einstieg</h3>
+
+    <dl>
+     <dt><a href="/en-US/docs/Persona/Why_Persona" title="en/BrowserID/Why_BrowserID">Warum Persona?</a></dt>
+    </dl>
+
+    <p>Sehen Sie, wieso Persona entwickelt wurde und warum es so toll ist! Und auch den Vergleich mit anderen Diensten scheuen wir uns nicht.</p>
+
+    <dl>
+     <dt><a href="/de/docs/Persona/Schnellstart" title="BrowserID/Quick setup">Schnellstart</a></dt>
+     <dd>Ein Schnellrundgang zeigt Ihnen, wie Sie Persona auf Ihrer Webseite integrieren können.</dd>
+    </dl>
+   </td>
+   <td>
+    <h3 id="Persona_API_Referenz">Persona API Referenz</h3>
+
+    <dl>
+     <dt><a href="/en/DOM/navigator.id" title="navigator.id">Die navigator.id API-Referenz</a></dt>
+     <dd>Referenz für das <code>navigator.id</code> Objekt, welches Webentwickler nutzen können, um Persona in Webseiten einzubinden.</dd>
+     <dt><a href="/en/Persona/Remote_Verification_API" title="en/BrowserID/Remote_Verification_API">Verifikations-API-Referenz</a></dt>
+     <dd>Die Referenz für die remote verification API finden Sie auf <code>https://verifier.login.persona.org/verify</code>.</dd>
+    </dl>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <h3 id="Leitfaden">Leitfaden</h3>
+
+    <dl>
+     <dt><a href="/en/Persona/Security_Considerations" title="BrowserID/Security considerations">Sicherheitsaspekte</a></dt>
+     <dd>Praktiken und Techniken um sicherzustellen, dass Ihre Persona-Einbindung sicher ist.</dd>
+     <dt><a href="/en/Persona/Browser_compatibility" title="/Browser_compatibility">Browserkompatiblität</a></dt>
+     <dd>Erfahre ganau, welche Browser Persona unterstützen.</dd>
+     <dt><a href="/en/Persona/Internationalization" title="/Internationalization">Internationalisierung</a></dt>
+     <dd>Erfahre, wie Persona mit unterschiedlichen Sprachen umgeht.</dd>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/Persona/The_implementor_s_guide">Leitfaden für Website-Entwickler</a></dt>
+     <dd>Tipps von Web-Seiten, die eine Unterstützung für PERSONA bereits anbieten</dd>
+    </dl>
+   </td>
+   <td>
+    <h3 id="Ressourcen">Ressourcen</h3>
+
+    <dl>
+     <dt><a class="link-https" href="https://github.com/mozilla/browserid/wiki/Persona-Libraries" title="https://github.com/mozilla/browserid/wiki/BrowserID-Libraries">Libraries und Plugins</a></dt>
+     <dd>Finde eine drop-in Bibliothek für deine bevorzugte Programmiersprache, Web-Framework, Blog oder Content-Management-System.</dd>
+     <dt><a class="link-https" href="https://github.com/mozilla/browserid-cookbook" title="https://github.com/mozilla/browserid-cookbook">Das Persona Kochbuch</a></dt>
+     <dd>Beispiel Sourcecode für Persona-Seiten. Beinhaltet Schnipsel in PHP, Node.JS und mehr.</dd>
+     <dt><a href="/en-US/docs/persona/branding" title="/en-US/docs/persona/branding">Branding resources</a></dt>
+     <dd>Anmelde-Buttons und andere Grafiken, die dabei helfen Persona Ihren Nutzern zu präsentieren.</dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 id="Informationen_für_Identitäts-Provider">Informationen für Identitäts-Provider</h2>
+
+    <p>Wenn du ein E-Mail Betreiber oder ein Idäntitäts-Provider bist, dann schau dir die folgenden Links an in denen man ein Persona Idäntitäts-Provider werden kann.</p>
+
+    <dl>
+     <dt><a href="/en-US/docs/Persona/Identity_Provider_Overview" title="IdP">IdP Überblick</a></dt>
+     <dd>Ein hoher Rang von Persona Idäntitäts-Providern.</dd>
+     <dt><a href="/en/Persona/Implementing_a_Persona_IdP" title="Guide to Implementing a Persona IdP">Implementieren eines IdP</a></dt>
+     <dd>Ein detaillierter Leitfaden zu den technischen Details, wie man ein IdP wird.</dd>
+     <dt><a href="/en-US/docs/Persona/.well-known-browserid" title="https://developer.mozilla.org/en-US/docs/Persona/.well-known-browserid">.well-known/browserid</a></dt>
+     <dd>Ein Überblick über die Struktur und den Zweck der <code>.well-known/browserid</code> Datei, welche IdPs benutzen, um auf deren Unterstützung für das Protokoll hinzuweisen.</dd>
+    </dl>
+   </td>
+   <td>
+    <h2 id="Das_Persona_Projekt">Das Persona Projekt</h2>
+
+    <dl>
+     <dt><a href="/en/Persona/Glossary" title="navigator.id">Glossary</a></dt>
+     <dd>Die BrowserID und Persona Fachsprache.</dd>
+     <dt><a href="/en/Persona/FAQ" title="en/BrowserID/FAQ">FAQ</a></dt>
+     <dd>Antworten zu gängigen Fragen.</dd>
+     <dt><a href="/en/Persona/Protocol_Overview" title="BrowserID/Protocol overview">Überblick des Protokolls</a></dt>
+     <dd>Gewinnen Sie einen Überblick über das verwendete BrowserID-Protokoll.</dd>
+     <dt><a href="/en/persona/Crypto" title="MDN">Kryptographie</a></dt>
+     <dd>Ein Blick auf die kryptographischen Konzepte und Sicherheitsfunktionen hinter Persona und BrowserID.</dd>
+     <dt><a class="link-https" href="https://github.com/mozilla/id-specs/blob/prod/browserid/index.md" title="https://github.com/mozilla/id-specs/blob/master/browserid/index.md">Die Spezifikation</a></dt>
+     <dd>Tiefe technische Details gibt es hier.</dd>
+     <dt><a href="/Persona/Bootstrapping_Persona" title="en/BrowserID/Bootstrapping_BrowserID">Die Persona Webseite</a></dt>
+     <dd>Damit Persona perfekt funktionieren kann verwenden wir drei Dienste auf: <a class="link-https" href="https://login.persona.org" rel="freelink">https://login.persona.org</a>: Eine Rückfall-System für die Anmeldun, eine browser- und systemunabhängige Implementierung der {{ domxref("navigator.id") }} APIs und natürlich einen Verifizierungs-Dienst.</dd>
+     <dt><a href="https://github.com/mozilla/browserid">Der Persona Quellcode</a></dt>
+     <dd>Der Code hinter der Persona-Webseite liegt in einem Repository bei GitHub. Helfer sind immer ❤ Willkommen!</dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/de/mozilla/persona/protocol_overview/index.html b/files/de/mozilla/persona/protocol_overview/index.html
new file mode 100644
index 0000000000..44c6eab3da
--- /dev/null
+++ b/files/de/mozilla/persona/protocol_overview/index.html
@@ -0,0 +1,61 @@
+---
+title: Protokoll Überblick
+slug: Mozilla/Persona/Protocol_Overview
+translation_of: Archive/Mozilla/Persona/Protocol_Overview
+---
+<p>Persona baut auf dem BrowserID Protokoll auf. Diese Seite beschreibt das BrowserID Protokoll auf hohem Niveau.</p>
+<h2 id="Akteure">Akteure</h2>
+<p>Das Protokoll umfasst drei Akteure:</p>
+<ul>
+  <li><strong>Benutzer:</strong> Die Person, welche sich mit Persona in einer Webseite einloggen will.</li>
+  <li><strong>Relying Parties (RPs): </strong>Webseiten, welche es dem Benutzer ermögliche wollen, sich mit Persona anzumelden.</li>
+  <li><strong>Identity Providers (IdPs): </strong>Domains, welche ihren Benutzern ein Persona-kompatibles Identitäts Zertifikat austellen können.</li>
+</ul>
+<p>Persona und das BrowserID Protokoll benutzen E-mail Adressen als Identität, daher ist es üblich, dass der E-mail Provider die Rolle des IdPs einnimmt.</p>
+<p>Mozilla betreibt einen "fallback IdP", so dass Benutzer jede E-mail Adresse für Persona benutzen können, sogar wenn eine Domain keinen IdP Status besitzt.</p>
+<h2 id="Protocol_Steps">Protocol Steps</h2>
+<p>There are three distinct steps in the protocol:</p>
+<ol>
+  <li>User Certificate Provisioning</li>
+  <li>Assertion Generation</li>
+  <li>Assertion Verification</li>
+</ol>
+<p>As a prerequisite, the user should have an active identity (email address) that they wish to use when logging in to websites. The protocol does not require that IdP-backed identities are SMTP-routable, but it does require that identities follow the <code>user@domain</code> format.</p>
+<h3 id="User_Certificate_Provisioning">User Certificate Provisioning</h3>
+<p>In order to sign into an RP, a user must be able to prove ownership of their preferred email address. The foundation of this proof is a cryptographically signed certificate from an IdP certifying the connection between a browser's user and a given identity within the IdP's domain.</p>
+<p>Because Persona uses standard <a href="http://en.wikipedia.org/wiki/Public-key_cryptography" title="http://en.wikipedia.org/wiki/Public-key_cryptography">public key cryptography</a> techniques, the user certificate is signed by the IdP's private key and contains:</p>
+<ul>
+  <li>The user's email address.</li>
+  <li>The user's public key for that address on that browser.</li>
+  <li>The time that the certificate was issued.</li>
+  <li>The time that the certificate expires.</li>
+  <li>The IdP's domain name.</li>
+</ul>
+<p>The user's browser generates a different keypair for each of the user's email addresses, and these keypairs are not shared across browsers. Thus, a user must obtain a fresh certificate whenever one expires, or whenever using a new browser or computer. Certificates must expire within 24 hours of being issued.</p>
+<p>When a user selects an identity to use when signing into an RP, the browser checks to see if it has a fresh user certificate for that address. If it does, this step is complete and the browser continues with the assertion generation step below. If the browser does not have a fresh certificate, it attempts to obtain one from the domain associated with the chosen identity.</p>
+<ol>
+  <li>The browser fetches the <a href="/en-US/docs/Persona/.well-known-browserid" title="/en-US/docs/Persona/.well-known-browserid">/.well-known/browserid</a> support document over SSL from the identity's domain.</li>
+  <li>Using information from the support document, the browser passes the user's email address and associated public key to the IdP and requests a signed certificate.</li>
+  <li>If necessary, the user is asked to sign into the IdP before provisioning proceeds.</li>
+  <li>The IdP creates, signs, and gives a user certificate to the user's browser.</li>
+</ol>
+<p>With the certificate in hand, the browser can continue with generating an identity assertion and signing into an RP.</p>
+<p><img alt="user-certificate-provisioning.png" class="internal default" src="/@api/deki/files/6043/=user-certificate-provisioning.png"></p>
+<h3 id="Assertion_Generation">Assertion Generation</h3>
+<p>The user certificate establishes a verifiable link between an email address and a public key. However, this is alone not enough to log into a website: the user still has to show their connection to the certificate by proving ownership of the private key.</p>
+<p>In order to prove ownership of a private key, the user's browser creates and signs a new document called an "identity assertion." It contains:</p>
+<ul>
+  <li>The domain of the RP that the user wants to sign into.</li>
+  <li>An expiration time for the assertion, generally less than five minutes after it was created.</li>
+</ul>
+<p>The browser then presents both the user certificate and the identity assertion to the RP for verification.</p>
+<h3 id="Assertion_Verification">Assertion Verification</h3>
+<p>The combination of user certificate and identity assertion is sufficient to confirm a user's identity.</p>
+<p>First, the RP checks the domain and expiration time in the assertion. If the assertion is expired or intended for a different domain, it's rejected. This prevents malicious re-use of assertions.</p>
+<p>Second, the RP validates the signature on the assertion with the public key inside the user certificate. If the key and signature match, the RP is assured that the current user really does possess the key associated with the certificate.</p>
+<p>Last, the RP fetches the IdP's public key from its <a href="/en-US/docs/Persona/.well-known-browserid" title="/en-US/docs/Persona/.well-known-browserid">/.well-known/browserid</a> document and verifies that it matches the signature on the user certificate. If it does, then the RP can be certain that the certificate really was issued by the domain in question.</p>
+<p>Once verifying that this is a current login attempt for the proper RP, that the user certificate matches the current user, and that the user certificate is legitimate, the RP is done and can authenticate the user as the identity contained in the certificate.</p>
+<p><img alt="assertion-generation-and-verify.png" class="internal default" src="/@api/deki/files/6042/=assertion-generation-and-verify.png"></p>
+<h2 id="The_Persona_Fallback_IdP">The Persona Fallback IdP</h2>
+<p>What if a user's email provider doesn't support Persona? In that case, the provisioning step would fail. By convention, the user's browser handles this by asking a trusted third party, <a href="https://login.persona.org/" title="https://login.persona.org/">https://login.persona.org/</a>, to certify the user's identity on behalf of the unsupported domain. After demonstrating ownership of the address, the user would then receive a certificate issued by the fallback IdP, <code>login.persona.org</code>, rather than the identity's domain.</p>
+<p>RPs follow a similar process when validating the assertion: the RP would ultimately request the fallback IdP's public key in order to verify the certificate.</p>
diff --git a/files/de/mozilla/persona/schnellstart/index.html b/files/de/mozilla/persona/schnellstart/index.html
new file mode 100644
index 0000000000..31a45b7553
--- /dev/null
+++ b/files/de/mozilla/persona/schnellstart/index.html
@@ -0,0 +1,201 @@
+---
+title: Schnellstart
+slug: Mozilla/Persona/Schnellstart
+translation_of: Archive/Mozilla/Persona/Quick_Setup
+---
+<p>Sie benötigen nur 5 Schritte um Persona ihrer Webseite hinzuzufügen:</p>
+<ol>
+ <li>Binden Sie die Persona JavaScript Bibliothek in ihre Webseite ein.</li>
+ <li>Fügen Sie jeweils einen "Login" und "Logout" Button hinzu.</li>
+ <li>Achten Sie auf die Aktionen der Nutzer.</li>
+ <li>Überprüfen Sie die Informationen des Nutzers.</li>
+ <li>Beachten Sie die Informationen für Sicheres Einbinden.</li>
+</ol>
+<p>Sie sollten in der Lage sein, Persona an einem einzigen Nachmittag zu implementieren. Zuvor sollten Sie sich allerdings in den <a href="https://mail.mozilla.org/listinfo/persona-notices">Persona notices</a> Newsletter eintragen. Der Newsletter versendet nur sicherheitsrelevante E-Mails.</p>
+<h2 id="Schritt_1_Einbinden_der_Persona_Bibliothek">Schritt 1: Einbinden der Persona Bibliothek</h2>
+<p>Persona ist Browser-neutral programmiert und unterstützt <a href="https://developer.mozilla.org/docs/persona/Browser_compatibility">alle großen Desktop- und Mobilbrowser. </a></p>
+<p>Wir erwarten für die Zukunft, dass die Browser Persona direkt und ohne externe Bibliothek unterstützten. Solange dies nicht der Fall ist, stellen wir eine JavaScript Bibliothek bereit, die die Benutzeroberfläche und den Client-seitigen Teil des Persona-Protokolls übernimmt. Durch die Einbindung dieser Bibliothek kann sich jeder Nutzer anmelden, egal, ob sein Browser Persona direkt unterstützt, oder nicht.</p>
+<p>Sobald die Bibliothek in der Seite geladen ist, sind die Persona Funktionen ({{ domxref("navigator.id.watch()", "watch()") }}, {{ domxref("navigator.id.request()", "request()") }}, und {{ domxref("navigator.id.logout()", "logout()") }}) im globalen <code>navigator.id</code> Knoten vorhanden.</p>
+<p>Um die Persona JavaScript Bibliothek einzubinden plazieren Sie diesen <code>script</code> Tag am Ende der HTML-Seite:</p>
+<pre class="brush: html;">&lt;script src="https://login.persona.org/include.js"&gt;&lt;/script&gt;
+</pre>
+<p>Sie <strong>müssen </strong>dies am Ende jeder Seite einfügen, die {{ domxref("navigator.id") }}  benutzen soll. Da sich Persona immer noch in der Entwicklung befindet, sollten Sie die Persona <code>include.js</code> Datei nicht selber bereitstellen.</p>
+<h3 id="Unterdrückung_des_Kompatibilitätsmodus">Unterdrückung des Kompatibilitätsmodus</h3>
+<p>Damit Persona auch im Internet Explorer funktioniert, sollten Sie dessen Kompatibilitätsmodus unterdrücken. Dies kann auf zwei Wegen geschehen:</p>
+<ul>
+ <li>entweder fügen Sie auf ihrer Seite noch vor dem ersten Skript Element ein : <code>&lt;meta http-equiv="X-UA-Compatible" content="IE=Edge"&gt;</code></li>
+ <li>oder aber Sie liefern diesen HTTP-Kopf mit aus: <code>X-UA-Compatible: IE=Edge</code>.</li>
+</ul>
+<p>Für weitere Informationen schauen Sie bitte bei <a href="/en-US/docs/persona/Browser_compatibility#Internet_Explorer_.22Compatibility_Mode.22" title="/en-US/docs/persona/Browser_compatibility#Internet_Explorer_.22Compatibility_Mode.22">IE Compatibility Mode</a> und <a href="http://hsivonen.iki.fi/doctype/index.html#ie8" title="http://hsivonen.iki.fi/doctype/index.html#ie8">"IE8 and IE9 Complications"</a> vorbei.</p>
+<h2 id="Schritt_2_Hinzufügen_der_Login_und_Logout_Buttons">Schritt 2: Hinzufügen der Login und Logout Buttons</h2>
+<p>Da Persona als Bestandteil der DOM API entwickelt wurde, müssen Sie Funktionen ausführen, sobald ein Nutzer auf einen der beiden Button klickt. Um den Anmelden Dialog auszuführen, sollten sie {{ domxref("navigator.id.request()") }} aufrufen. Für den Logout starten Sie bitte {{ domxref("navigator.id.logout()") }}. Notiz: Der Aufruf von {{ domxref("navigator.id.logout()", "logout()") }} <em>muss</em> in dem Click-Handler des Logout-Buttons ausgeführt werden.</p>
+<p>Als Beispiel:</p>
+<pre class="brush: js;">var signinLink = document.getElementById('signin');
+if (signinLink) {
+  signinLink.onclick = function() { navigator.id.request(); };
+}
+
+var signoutLink = document.getElementById('signout');
+if (signoutLink) {
+  signoutLink.onclick = function() { navigator.id.logout(); };
+}
+</pre>
+<p>Wie sollten diese Buttons aussehen? Betrachte unsere <a href="https://developer.mozilla.org/docs/persona/branding">Branding Resources</a> Seite für vorgefertigte Persona-Bilder und CSS-basierte Buttons.</p>
+<h2 id="Schritt_3_Warte_auf_Login_und_Logout_Aktionen">Schritt 3: Warte auf Login und Logout Aktionen</h2>
+<p>Damit Persona funktioniert, musst du ihm mitteilen, wenn sich ein Nutzer an- bzw. abmeldet. Dies geschieht durch Übergabe dreier Parameter an die Funktion {{ domxref("navigator.id.watch()") }}. Die drei Parameter sind:</p>
+<ol>
+ <li>
+  <p>Die E-Mail Adresse des momentan angemeldeten Nutzers, oder aber, wenn niemand angemeldet ist <code>null</code> Beispielsweise kannst du den Cookie auslesen, um herauszufinden, wer angemeldet ist.</p>
+ </li>
+ <li>
+  <p>Eine Funktion für den Fall, dass <code>onlogin</code> ausgelöst wird. This function is passed a single parameter, an “identity assertion,” which must be verified.</p>
+ </li>
+ <li>
+  <p>Eine Funktion, die aufzurufen ist, wenn <code>onlogout</code> ausgelöst wird. Dieser Funktion werden keine Parameter mitgegeben.</p>
+ </li>
+</ol>
+<div class="note style-wrap">
+ <div class="note">
+  <p><strong>Beachte:</strong> Sie müssen immer beide, <code>onlogin</code> und <code>onlogout</code> übergeben, wenn Sie {{ domxref("navigator.id.watch()") }} aufrufen.</p>
+ </div>
+</div>
+<p>Wenn beispielsweise Bob angemeldet ist, müssen Sie folgendes tun:</p>
+<pre class="brush: js;">var currentUser = 'bob@example.com';
+
+navigator.id.watch({
+  loggedInUser: currentUser,
+  onlogin: function(assertion) {
+    // Ein Nutzer hat sich angemeldete. Hier müssen Sie:
+    // 1. Send the assertion to your backend for verification and to create a session.
+    // 2. Aktualisiere die Oberfläche
+    $.ajax({ /* &lt;-- This example uses jQuery, but you can use whatever you'd like */
+      type: 'POST',
+      url: '/auth/login', // This is a URL on your website.
+      data: {assertion: assertion},
+      success: function(res, status, xhr) { window.location.reload(); },
+      error: function(xhr, status, err) {
+        navigator.id.logout();
+        alert("Login failure: " + err);
+      }
+    });
+  },
+  onlogout: function() {
+    // A user has logged out! Here you need to:
+    // Tear down the user's session by redirecting the user or making a call to your backend.
+    // Also, make sure loggedInUser will get set to null on the next page load.
+    // (That's a literal JavaScript null. Not false, 0, or undefined. null.)
+    $.ajax({
+      type: 'POST',
+      url: '/auth/logout', // This is a URL on your website.
+      success: function(res, status, xhr) { window.location.reload(); },
+      error: function(xhr, status, err) { alert("Logout failure: " + err); }
+    });
+  }
+});
+</pre>
+<p>In this example, both <code>onlogin</code> and <code>onlogout</code> are implemented by making an asynchronous <code>POST</code> request to your site’s backend. The backend then logs the user in or out, usually by setting or deleting information in a session cookie. Then, if everything checks out, the page reloads to take into account the new login state.</p>
+<p>Note that if the identity assertion can't be verified, you should call {{ domxref("navigator.id.logout()") }}: this has the effect of telling Persona that none is currently logged in. If you don't do this, then Persona may immediately call onlogin again with the same assertion, and this can lead to an <a href="/en-US/docs/Persona/The_implementor_s_guide/Call_logout()_after_a_failed_login" title="/en-US/docs/Persona/The_implementor_s_guide/Call_logout()_after_a_failed_login">endless loop of failed logins</a>.</p>
+<p>You can, of course, use AJAX to implement this without reloading or redirecting, but that’s beyond the scope of this tutorial.</p>
+<p>Here is another example, this time not using jQuery.</p>
+<pre class="brush: js;">function simpleXhrSentinel(xhr) {
+    return function() {
+        if (xhr.readyState == 4) {
+            if (xhr.status == 200){
+                // reload page to reflect new login state
+                window.location.reload();
+              }
+            else {
+                navigator.id.logout();
+                alert("XMLHttpRequest error: " + xhr.status);
+              }
+            }
+          }
+        }
+
+function verifyAssertion(assertion) {
+    // Your backend must return HTTP status code 200 to indicate successful
+    // verification of user's email address and it must arrange for the binding
+    // of currentUser to said address when the page is reloaded
+    var xhr = new XMLHttpRequest();
+    xhr.open("POST", "/xhr/sign-in", true);
+    // see http://www.openjs.com/articles/ajax_xmlhttp_using_post.php
+    var param = "assertion="+assertion;
+    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+    xhr.setRequestHeader("Content-length", param.length);
+    xhr.setRequestHeader("Connection", "close");
+    xhr.send(param); // for verification by your backend
+
+    xhr.onreadystatechange = simpleXhrSentinel(xhr); }
+
+function signoutUser() {
+    // Your backend must return HTTP status code 200 to indicate successful
+    // sign out (usually the resetting of one or more session variables) and
+    // it must arrange for the binding of currentUser to 'null' when the page
+    // is reloaded
+    var xhr = new XMLHttpRequest();
+    xhr.open("GET", "/xhr/sign-out", true);
+    xhr.send(null);
+    xhr.onreadystatechange = simpleXhrSentinel(xhr); }
+
+// Go!
+navigator.id.watch( {
+    loggedInUser: currentUser,
+         onlogin: verifyAssertion,
+        onlogout: signoutUser } );
+</pre>
+<p>You <strong>must</strong> call <code>navigator.id.watch()</code> on every page with a login or logout button. To support Persona enhancements like automatic login and global logout for your users, you <strong>should</strong> call this function on every page of your site.</p>
+<p>Persona will compare the email address you've passed into <code>loggedInUser</code> with its own knowledge of whether a user is currently logged in, and who they are. If these don't match, it may automatically invoke <code>onlogin</code> or <code>onlogout</code> on page load.</p>
+<p> </p>
+<h2 id="Step_4_Verify_the_user’s_credentials">Step 4: Verify the user’s credentials</h2>
+<p>Instead of passwords, Persona uses “identity assertions,” which are kind of like single-use, single-site passwords combined with the user’s email address. When a user wants to log in, your <code>onlogin</code> callback will be invoked with an assertion from that user. Before you can log them in, you must verify that the assertion is valid.</p>
+<p>It’s <em>extremely important</em> that you verify the assertion on your server, and not in JavaScript running on the user’s browser, since that would be easy to forge. The example above handed off the assertion to the site’s backend by using jQuery’s <code>$.ajax()</code> helper to <code>POST</code> it to <code>/auth/login</code>.</p>
+<p>Once your server has an assertion, how do you verify it? The easiest way is to use a helper service provided by Mozilla. Simply <code>POST</code> the assertion to <code>https://verifier.login.persona.org/verify</code> with two parameters:</p>
+<ol>
+ <li><code>assertion</code>: The identity assertion provided by the user.</li>
+ <li><code>audience</code>: The hostname and port of your website. You must hardcode this value in your backend; do not derive it from any data supplied by the user.</li>
+</ol>
+<p>For example, if you’re <code>example.com</code>, you can use the command line to test an assertion with:</p>
+<pre class="brush: bash;">$ curl -d "assertion=&lt;ASSERTION&gt;&amp;audience=https://example.com:443" "https://verifier.login.persona.org/verify"
+</pre>
+<p>If it’s valid, you’ll get a JSON response like this:</p>
+<pre class="brush: js;">{
+  "status": "okay",
+  "email": "bob@eyedee.me",
+  "audience": "https://example.com:443",
+  "expires": 1308859352261,
+  "issuer": "eyedee.me"
+}
+</pre>
+<p>You can learn more about the verification service by reading <a href="https://developer.mozilla.org/en-US/docs/BrowserID/Remote_Verification_API">The Verification Service API</a>. An example <code>/auth/login</code> implementation, using <a href="http://python.org/">Python</a>, the <a href="http://flask.pocoo.org/">Flask</a> web framework, and the <a href="http://python-requests.org">Requests</a> HTTP library might look like this:</p>
+<pre class="brush: python;">@app.route('/auth/login', methods=['POST'])
+def login():
+    # The request has to have an assertion for us to verify
+    if 'assertion' not in request.form:
+        abort(400)
+
+    # Send the assertion to Mozilla's verifier service.
+    data = {'assertion': request.form['assertion'], 'audience': 'https://example.com:443'}
+    resp = requests.post('https://verifier.login.persona.org/verify', data=data, verify=True)
+
+    # Did the verifier respond?
+    if resp.ok:
+        # Parse the response
+        verification_data = json.loads(resp.content)
+
+        # Check if the assertion was valid
+        if verification_data['status'] == 'okay':
+            # Log the user in by setting a secure session cookie
+            session.update({'email': verification_data['email']})
+            return 'You are logged in'
+
+    # Oops, something failed. Abort.
+    abort(500)
+</pre>
+<p>For examples of how to use Persona in other languages, have a look at the <a href="https://github.com/mozilla/browserid-cookbook" title="https://github.com/mozilla/browserid-cookbook">cookbook</a>.</p>
+<p>The session management is probably very similar to your existing login system. The first big change is in verifying the user’s identity by checking an assertion instead of checking a password. The other big change is ensuring that the user’s email address is available for use as the <code>loggedInUser</code> parameter to {{ domxref("navigator.id.watch()") }}.</p>
+<p>Logout is simple: you just need to remove the user’s session cookie.</p>
+<h2 id="Step_5_Review_best_practices">Step 5: Review best practices</h2>
+<p>Once everything works and you’ve successfully logged into and out of your site, you should take a moment to review <a href="https://developer.mozilla.org/docs/BrowserID/Security_Considerations">best practices</a> for using Persona safely and securely.</p>
+<p>If you're making a production site, have a look at the <a href="/en-US/docs/Persona/The_implementor_s_guide" title="/en-US/docs/Persona/The_implementor_s_guide">implementor's guide</a>, where we've collected tips for adding the kind of features often needed in real-world login systems.</p>
+<p>Lastly, don’t forget to sign up for the <a href="https://mail.mozilla.org/listinfo/persona-notices">Persona notices</a> mailing list so you’re notified of any security issues or backwards incompatible changes to the Persona API. The list is extremely low traffic: it’s only used to announce changes which may adversely impact your site.</p>
+<p> </p>
diff --git a/files/de/mozilla/persona/warum_persona/index.html b/files/de/mozilla/persona/warum_persona/index.html
new file mode 100644
index 0000000000..337a84a544
--- /dev/null
+++ b/files/de/mozilla/persona/warum_persona/index.html
@@ -0,0 +1,31 @@
+---
+title: Warum Persona?
+slug: Mozilla/Persona/Warum_Persona
+translation_of: Archive/Mozilla/Persona/Why_Persona
+---
+<p style=""> </p>
+<p style="">Das existierende System von Benutzernamen und Paswörtern ist inakzeptabel: Von den Nutzern wird erwartet, dass sie ein neues, komplexes Passwort für jede Site und jeden Dienst erstellen und sich an dieses erinnern. Und jede Site muss das Passwort sicher speichern. Allerdings zeigen Hacker-Angriffe gerade in letzter Zeit, dass sogar namhafte Unternehmen Lücken in der Passwortsicherheit haben und die Daten ihrer Nutzer damit in Gefahr bringen.</p>
+<p>Persona ist ein offenes, verteiltes, webweites Identitätssystem, das die Passworteingabe für jede Site ersetzt.  Es orientiert sich an der Benutzerfreundlichkeit und begegnet den Datenschutzmängeln von Systemen wie OpenID, ohne dabei auf die zentrale Infrastruktur zurückzugreifen wie sie beispielsweise Facebook Connect nutzt.</p>
+<h2 id="Persona_macht_Passwörter_für_jede_Site_überflüssig">Persona macht Passwörter für jede Site überflüssig</h2>
+<p>Anstatt eines Passworts für jede einzelne Site, erlaubt Persona die Anmeldung mit nur zwei Klicks, nach Abschluß eines einfachen, einmaligen Vorgangs für jede Identität.  Das ist sicher, geschützt und basiert auf einem öffentlichen Schlüssel modernster Kryptografie. Statt eines Passworts erzeugt der Browser des Nuzers eine kryptografische "Idenditätserklärung", die nach wenigen Minuten abläuft und nur für eine einzelne Site gültig ist. Weil es keine seitenspezifischen Passwörter gibt, brauchen sich Websites, die Persona nutzen, nicht um die sichere Speicherung oder den potentiellen Verlust der Passwortdatenbank kümmern.</p>
+<p>Der schnelle Registriervorgang reduziert außerdem den "Nutzerwiderstand" beim Besuch neuer Sites.</p>
+<h2 id="Persona_Identitäten_sind_Email-Addressen">Persona Identitäten sind Email-Addressen</h2>
+<p>Anstatt eines freien Usernamens verwendet Persona Email-Addressen als Identitäten. Dies hat zahlreiche Vorteile sowohl für den Nutzer als auch den Entwickler:</p>
+<h3 id="Nutzervorteile_bei_Verwendung_von_Email-Adressen">Nutzervorteile bei Verwendung von Email-Adressen</h3>
+<ul>
+ <li>Nutzer wissen bereits ihre Email-Adresse im Gegensatz zum Lernen einer neuen und möglicherweise verwirrenden URL mit OpenID.</li>
+ <li>Email-Addressen stellen übersichtlich die Idee dar von <code>irgendwer@irgendein-kontext</code>, und machen es dem Nutzer dabei einfach, Ihre Identität <code>@arbeit</code>, <code>@zuhause</code>, oder <code>@schule</code> auseinander zu halten. Dies unterscheidet sie vom Trend, Identitäten durch reale Namen zusammenzufassen, wie etwa die Politik von Einmalzugängen bei sozialen Netzwerken wie Facebook und Google+.</li>
+ <li>Email kann selbst gehosted oder an Provider delegiert werden und gibt so dem Nutzer selbst Kontrolle über seine Identität.</li>
+</ul>
+<h3 id="Vorteile_für_Entwickler_bei_Verwendung_von_Email-Addressen">Vorteile für Entwickler bei Verwendung von Email-Addressen</h3>
+<ul>
+ <li>Email-Addressen geben Entwicklern ein direktes Mittel zur Kontaktaufnahme mit den Nutzern.</li>
+ <li>Die meisten Sites verlangen eine Email-Adresse von ihren Nutzern. Persona bietet dies automatisch wenn sich Nutzer anmelden. Dadurch entfallen zusätzlich notwendige Email-Bestätigungen.</li>
+ <li>Viele Login-Systeme behandeln bereits Email-Adressen als eindeutige Schlüssel. In diesem Fall ist eine Anmeldung mit Persona nicht erforderlich und Persona kann neben bestehenden Login-Systemen eingesetzt werden.</li>
+</ul>
+<p>Ganz zu schweigen davon, dass Email ein bereits bestehendes, ausgereiftes System mit Milliarden von Konten unzähliger Anbieter darstellt.</p>
+<h2 id="Worin_unterscheidet_sich_Persona_von_anderen_Einmal-Zugangsanbietern" style="">Worin unterscheidet sich Persona von anderen Einmal-Zugangsanbietern?</h2>
+<p>Persona ist sicher, geschützt und einfach. Es schützt die Privatspähre, die Kontrolle und die Wahlfreiheit der Nutzer in einer Art, wie es andere Anbieter nicht tun oder nicht können.</p>
+<p>Viele soziale Netzwerke wie Facebook and Google+ benötigen Nutzer die ihren realen Namen verwenden und schränken die Nutzer auf ein einziges Konto ein. Dadurch, dass Persona auf Email-Adressen beruht, erlaubt es den Nutzern ihre verschiedenen Arbeits-, Heim-, Schul- und andere Identitäten zu trennen.</p>
+<p>Persona ist offen und dezentral: Jeder mit einer Email-Adresse kann sich bei Sites anmelden, die Persona verwenden. Zudem kann jeder seine eigene Identität hosten oder delegieren - eben genau wie Emails. Dies steht im Gegensatz zu Zugangsdiensten sozialer Netzwerke, die ein einziges, zentrales Konto benötigen.</p>
+<p>Persona bietet außerdem einen neuen Ansatz um die Privatspähre der Nutzer zu schützen, indem es den Browser des Nutzers in den Mittelpunkt des Authentifzierungsprozesses stellt: Der Browser erhält Anmeldeinformationen vom Email-Anbieter des Nutzers und stellt diese Informationen der Website zur Verfügung. Der Email-Anbieter kann den Nutzer nicht nachverfolgen ("tracken"), aber Websiten können dennoch durch die kryptografisches Verifikation der Anmeldeinformationen der Identität des Nutzers vertrauen. Die meisten anderen Systeme, selbst dezentrale wie OpenID, verlangen, dass die Site "nach Hause telefoniert" bevor sie dem Nutzer die Anmeldung gestatten.</p>
diff --git a/files/de/mozilla/preferences/eine_kurze_anleitung_zu_mozilla_einstellungen/index.html b/files/de/mozilla/preferences/eine_kurze_anleitung_zu_mozilla_einstellungen/index.html
new file mode 100644
index 0000000000..ac734def51
--- /dev/null
+++ b/files/de/mozilla/preferences/eine_kurze_anleitung_zu_mozilla_einstellungen/index.html
@@ -0,0 +1,10 @@
+---
+title: Eine kurze Anleitung zur Mozilla- Einstellungen
+slug: Mozilla/Preferences/Eine_kurze_Anleitung_zu_Mozilla_Einstellungen
+tags:
+  - Favoriten
+translation_of: Mozilla/Preferences/A_brief_guide_to_Mozilla_preferences
+---
+<p>Dieser Artikel ist für Mozilla viel Nutzer und Systemadministratoren, das darauf abzielt einen allgemeinen Überblick in den Mozilla- Einstellungen zu gewährleisten.<br>
+ Insbesondere über das speichern</p>
+<p>Datei-für-Datei so wie das Bearbeiten der Ladesequenz dieser</p>
diff --git a/files/de/mozilla/preferences/index.html b/files/de/mozilla/preferences/index.html
new file mode 100644
index 0000000000..1169ecabf1
--- /dev/null
+++ b/files/de/mozilla/preferences/index.html
@@ -0,0 +1,48 @@
+---
+title: Preferences
+slug: Mozilla/Preferences
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Mozilla/Preferences
+---
+<p>The preference system makes it possible to store data for Mozilla applications using a key/value pairing system. These articles provide information about how to use the preference system.</p>
+<table class="topicpage-table">
+  <tbody>
+    <tr>
+      <td>
+        <h2 class="Documentation" id="Documentation" name="Documentation">Documentation</h2>
+        <dl>
+          <dt><a href="/en-US/docs/Preferences/Preferences_system" title="Preferences/Preferences system">Preferences system</a></dt>
+          <dd>An introduction to using the preference system in Mozilla.</dd>
+          <dt><a href="/en-US/docs/XUL_School/Handling_Preferences" title="XUL School/Handling Preferences">XUL School: Handling preferences</a></dt>
+          <dd>The XUL School tutorial chapter on preferences.</dd>
+          <dt><a href="/en-US/docs/Preferences/Preference_reference" title="Preferences/Preference_reference">Mozilla preference reference</a></dt>
+          <dd>A reference guide to all Mozilla preferences; currently a work in progress.</dd>
+          <dt><a href="/en-US/docs/Preferences/A_brief_guide_to_Mozilla_preferences" title="Preferences/A brief guide to Mozilla preferences">A brief guide to Mozilla preferences</a></dt>
+          <dd>An introductory guide to where preferences are stored and other useful information about the core preference system.</dd>
+          <dt><a href="/en-US/docs/Preferences/Using_preferences_from_application_code" title="Preferences/Using preferences from application code">Using preferences from application code</a> {{gecko_minversion_inline("6.0")}}</dt>
+          <dd>Firefox 6 introduced static functions for accessing preferences efficiently from within application code. This API is not available for add-ons, but if you're working on a Gecko application, this API is the preferred way to access preferences.</dd>
+          <dt><a href="/en-US/docs/Preferences/Mozilla_networking_preferences" title="Preferences/Mozilla networking preferences">Mozilla networking preferences</a></dt>
+          <dd>A guide to key networking-related preferences.</dd>
+          <dt><a href="/en-US/docs/Preferences/Mozilla_preferences_for_uber-geeks" title="Preferences/Mozilla preferences for uber-geeks">Mozilla preferences for uber-geeks</a></dt>
+          <dd>A guide to preferences that only truly elite geeks should play with.</dd>
+        </dl>
+        <p><span class="alllinks"><a href="/en-US/docs/tag/Preferences" title="tag/Preferences">View all pages tagged with "Preferences"...</a></span></p>
+      </td>
+      <td>
+        <h2 class="Community" id="Examples" name="Examples">Examples</h2>
+        <dl>
+          <dt><a href="/en-US/docs/Code_snippets/Preferences" title="Code snippets/Preferences">Code snippets</a></dt>
+          <dd>Preference-related code snippets.</dd>
+          <dt><a href="/en-US/docs/Adding_preferences_to_an_extension" title="Adding preferences to an extension">Adding preferences to an extension</a></dt>
+          <dd>How to add preferences to an existing extension.</dd>
+        </dl>
+        <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related Topics</h2>
+        <ul>
+          <li><a href="/en-US/docs/XUL" title="XUL">XUL</a>, <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>, <a href="/en-US/docs/XPCOM" title="XPCOM">XPCOM</a>, <a href="/en-US/docs/Extensions" title="Extensions">Extensions</a>, <a href="/en-US/docs/Developer_Guide" title="Developing_Mozilla">Developing Mozilla</a></li>
+        </ul>
+      </td>
+    </tr>
+  </tbody>
+</table>
diff --git a/files/de/mozilla/projects/deutsch/index.html b/files/de/mozilla/projects/deutsch/index.html
new file mode 100644
index 0000000000..e422dcde65
--- /dev/null
+++ b/files/de/mozilla/projects/deutsch/index.html
@@ -0,0 +1,35 @@
+---
+title: Emscripten
+slug: Mozilla/Projects/Deutsch
+translation_of: Mozilla/Projects/Emscripten
+---
+<div class="summary">
+ <p><span class="seoSummary">Emscripten is an <strong>LLVM</strong> to <strong>JavaScript</strong> compiler. It takes LLVM bytecode (e.g. generated from C/C++ using Clang, or from another language) and compiles that into JavaScript, which can be run on the Web.</span></p>
+</div>
+<div class="column-container zone-callout">
+ <p><strong>The resources here provide you with all you need to know to get up and running with Emscripten at a basic level, allowing you to take your first steps with Emscripten, and discover how Emscripten can be leveraged to produce more powerful web apps. For a more detailed set of documentation, you should <a href="https://github.com/kripken/emscripten/wiki">consult the official Emscripten Wiki.</a></strong></p>
+ <p>Using Emscripten, you can</p>
+ <ul>
+  <li>Compile C and C++ code into JavaScript and run that on the web</li>
+  <li>Run code in languages like Python as well, by compiling CPython from C to JavaScript and interpreting code in that on the web</li>
+ </ul>
+ <p>If you are new to Emscripten you start off by <a href="/en-US/docs/Emscripten/Download_and_install">installing Emscripten</a> on your system, and working through our <a href="/en-US/docs/Emscripten/Introducing">Introducing Emscripten</a> section.</p>
+ <div class="note">
+  <p>Note: the current release version of Emscripten is 1.7.8.</p>
+ </div>
+</div>
+<h2 id="Subnav">Subnav</h2>
+<ol>
+ <li><a href="/en-US/docs/Emscripten/Introducing">Introducing Emscripten</a>
+  <ol>
+   <li><a href="/en-US/docs/Emscripten/Introducing/Emscripten_beginners_tutorial">Emscripten beginner's tutorial</a></li>
+   <li><a href="/en-US/docs/Emscripten/Introducing/What_is_Emscripten_and_how_does_it_work">What is Emscripten and how does it work?</a></li>
+   <li><a href="/en-US/docs/Emscripten/Introducing/The_nature_of_Emscripten-compiled_JavaScript">The nature of Emscripten-compiled JavaScript</a></li>
+   <li><a href="/en-US/docs/Emscripten/Introducing/Putting_Emscripten_in_your_toolchain">Putting Emscripten in your toolchain</a></li>
+  </ol>
+ </li>
+ <li><a href="/en-US/docs/Emscripten/Web_abilities_and_limitations">Web abilities and limitations</a></li>
+ <li><a href="/en-US/docs/Emscripten/Download_and_install">Download and install</a></li>
+ <li><a href="/en-US/docs/Emscripten/Workflow_and_tools">Workflow and tools</a></li>
+ <li><a href="/en-US/docs/Emscripten/Techniques">Emscripten Techniques</a></li>
+</ol>
diff --git a/files/de/mozilla/projects/index.html b/files/de/mozilla/projects/index.html
new file mode 100644
index 0000000000..6291137b31
--- /dev/null
+++ b/files/de/mozilla/projects/index.html
@@ -0,0 +1,14 @@
+---
+title: Projects
+slug: Mozilla/Projects
+tags:
+  - Mozilla
+  - NeedsContent
+  - NeedsTranslation
+  - Projects
+  - TopicStub
+translation_of: Mozilla/Projects
+---
+<p>{{ draft() }}</p>
+<p>This page needs to become a pretty index to Mozilla projects whose documentation is located under it.</p>
+<p>{{ LandingPageListSubpages() }}</p>
diff --git a/files/de/mozilla/projects/nss/index.html b/files/de/mozilla/projects/nss/index.html
new file mode 100644
index 0000000000..f69cd1dab7
--- /dev/null
+++ b/files/de/mozilla/projects/nss/index.html
@@ -0,0 +1,186 @@
+---
+title: Network Security Services
+slug: Mozilla/Projects/NSS
+tags:
+  - JSS
+  - NSS
+  - NeedsMigration
+  - NeedsTranslation
+  - TopicStub
+translation_of: Mozilla/Projects/NSS
+---
+<p><strong>Network Security Services</strong> (<strong>NSS</strong>) is a set of libraries designed to support cross-platform development of security-enabled client and server applications. Applications built with NSS can support SSL v3, TLS, PKCS #5, PKCS #7, PKCS #11, PKCS #12, S/MIME, X.509 v3 certificates, and other security standards.</p>
+
+<p>For detailed information on standards supported, see <a href="/en-US/docs/Overview_of_NSS" title="Overview_of_NSS">Overview of NSS</a>. For a list of frequently asked questions, see the <a href="/en-US/docs/NSS_FAQ" title="NSS_FAQ">FAQ</a>.</p>
+
+<p>NSS is available under the Mozilla Public License. For information on downloading NSS releases as tar files, see <a href="https://developer.mozilla.org/en-US/docs/NSS_Sources_Building_Testing">Download PKI Source</a>.</p>
+
+<p>If you're a developer and would like to contribute to NSS, you might want to read the documents <a href="/en-US/docs/An_overview_of_NSS_Internals" title="/en-US/docs/An_overview_of_NSS_Internals">highlevel overview of internal details of NSS</a> and <a href="/en-US/docs/Getting_Started_With_NSS" title="/en-US/docs/Getting_Started_With_NSS">getting started with NSS</a>.</p>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 class="Documentation" id="Documentation" name="Documentation">Documentation</h2>
+
+    <h3 id="Background_Information">Background Information</h3>
+
+    <dl>
+     <dt><a href="/en-US/docs/Overview_of_NSS">Overview of NSS</a></dt>
+     <dd>Provides a brief summary of NSS and its capabilities.</dd>
+     <dt><a href="/en-US/docs/NSS_FAQ">NSS FAQ</a></dt>
+     <dd>Answers basic questions about NSS.</dd>
+     <dt><a href="/en-US/docs/Introduction_to_Public-Key_Cryptography">Introduction to Public-Key Cryptography</a></dt>
+     <dd>Explains the basic concepts of public-key cryptography that underlie NSS.</dd>
+     <dt><a href="/en-US/docs/Introduction_to_SSL">Introduction to SSL</a></dt>
+     <dd>Introduces the SSL protocol, including information about cryptographic ciphers supported by SSL and the steps involved in the SSL handshake.</dd>
+    </dl>
+
+    <h3 id="Getting_Started">Getting Started</h3>
+
+    <dl>
+     <dt><a href="/en-US/docs/NSS/NSS_Releases" title="NSS_releases">NSS Releases</a></dt>
+     <dd>This page contains information about the current and past releases of NSS.</dd>
+     <dt><a href="/en-US/docs/NSS_Sources_Building_Testing">Get the source code and Build it</a></dt>
+     <dd>Instructions on how to build NSS on the different supported platforms.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Developer_guide/Source_Code/Mercurial">Get Mozilla Source Code Using Mercurial</a></dt>
+     <dd>Information about with working with Mercurial.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Developer_guide/Source_Code/CVS">Get Mozilla Source Code Using CVS (deprecated)</a></dt>
+     <dd>Old deprecated CVS documentation.</dd>
+    </dl>
+
+    <h3 id="NSS_APIs">NSS APIs</h3>
+
+    <dl>
+     <dt><a href="/en-US/docs/Introduction_to_Network_Security_Services">Introduction to Network Security Services</a></dt>
+     <dd>Provides an overview of the NSS libraries and what you need to know to use them.</dd>
+     <dt><a href="NSS/SSL_functions">NSS Public Functions</a></dt>
+     <dd>Summarizes the APIs exported by the NSS shared libraries.</dd>
+     <dt><a href="/en-US/docs/NSS_reference">NSS Reference</a></dt>
+     <dd>API used to invoke SSL operations.</dd>
+     <dt><a href="NSS/NSS_API_GUIDELINES">NSS API Guidelines</a></dt>
+     <dd>Explains how the libraries and code are organized, and guidelines for developing code (naming conventions, error handling, thread safety, etc.)</dd>
+     <dt><a href="NSS/nss_tech_notes">NSS Technical Notes</a></dt>
+     <dd>Links to NSS technical notes, which provide latest information about new NSS features and supplementary documentation for advanced topics in programming with NSS.</dd>
+    </dl>
+
+    <h3 id="Tools_testing_and_other_technical_details">Tools, testing, and other technical details</h3>
+
+    <dl>
+     <dt><a href="/en-US/docs/NSS_Sources_Building_Testing">Build Instructions for NSS</a></dt>
+     <dd>Describe how to check out and build NSS releases.</dd>
+    </dl>
+
+    <dl>
+     <dt><a href="/en-US/docs/Mozilla/Projects/NSS/NSS_Developer_Tutorial">NSS Developer Tutorial</a></dt>
+     <dd>How to make changes in NSS. Coding style, maintaining ABI compatibility.</dd>
+    </dl>
+
+    <dl>
+     <dt><a href="NSS/Tools">NSS Tools</a></dt>
+     <dd>Tools for developing, debugging, and managing applications that use NSS.</dd>
+     <dt><a href="NSS/NSS_Sample_Code">Sample Code</a></dt>
+     <dd>Demonstrates how NSS can be used for cryptographic operations, certificate handling, SSL, etc.</dd>
+     <dt><a href="http://www-archive.mozilla.org/projects/security/pki/nss/testnss_32.html">NSS 3.2 Test Suite</a></dt>
+     <dd><strong>Archived version.</strong> Describes how to run the standard NSS tests.</dd>
+     <dt><a href="http://www-archive.mozilla.org/projects/security/pki/nss/performance_reports.html">NSS Performance Reports</a></dt>
+     <dd><strong>Archived version.</strong> Links to performance reports for NSS 3.2 and later releases.</dd>
+     <dt><a href="http://www-archive.mozilla.org/projects/security/pki/nss/nss-3.11/nss-3.11-algorithms.html">Encryption Technologies Available in NSS 3.11</a></dt>
+     <dd><strong>Archived version.</strong> Lists the cryptographic algorithms used by NSS 3.11.</dd>
+     <dt><a href="http://www-archive.mozilla.org/projects/security/pki/nss/loadable_certs.html">NSS 3.1 Loadable Root Certificates</a></dt>
+     <dd><strong>Archived version.</strong> Describes the scheme for loading root CA certificates.</dd>
+     <dt><a href="http://www-archive.mozilla.org/projects/security/pki/nss/db_formats.html">cert7.db</a></dt>
+     <dd><strong>Archived version.</strong> General format of the cert7.db database.</dd>
+    </dl>
+
+    <h3 id="PKCS_11_information">PKCS #11 information</h3>
+
+    <ul>
+     <li><a href="/en-US/docs/PKCS11" title="PKCS11">Documentation on PKCS #11 modules</a></li>
+     <li><a href="/en-US/docs/PKCS11_Implement">Implementing PKCS #11 for NSS</a></li>
+     <li><a href="/en-US/docs/PKCS11_Module_Specs" title="PKCS11_Module_Specs">The strings NSS uses to load PKCS #11 modules</a></li>
+     <li><a href="/en-US/docs/PKCS11_FAQ">PKCS #11 FAQ</a></li>
+     <li><a href="/en-US/docs/PKCS11_Jar_Install">Using the JAR Installation Manager to Install a PKCS #11 Cryptographic Module</a></li>
+     <li><a href="http://www-archive.mozilla.org/projects/security/pki/pkcs11/">PKCS #11 Conformance Testing - Archived version</a></li>
+    </ul>
+
+    <dl>
+    </dl>
+
+    <h3 id="CA_certificates_pre-loaded_into_NSS">CA certificates pre-loaded into NSS</h3>
+
+    <ul>
+     <li><a href="http://www.mozilla.org/projects/security/certs/policy/">Mozilla CA certificate policy</a></li>
+     <li><a href="http://www.mozilla.org/projects/security/certs/included/">List of pre-loaded CA certificates</a>
+      <ul>
+       <li>Consumers of this list must consider the trust bit setting for each included root certificate. <a href="https://www.imperialviolet.org/2012/01/30/mozillaroots.html">More Information</a>, <a href="https://github.com/agl/extract-nss-root-certs">Extracting roots and their trust bits</a></li>
+      </ul>
+     </li>
+    </ul>
+
+    <dl>
+    </dl>
+
+    <h3 id="NSS_is_built_on_top_of_Netscape_Portable_Runtime_(NSPR)">NSS is built on top of Netscape Portable Runtime (NSPR)</h3>
+
+    <dl>
+     <dt><a href="NSPR">Netscape Portable Runtime</a></dt>
+     <dd>NSPR project page.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Projects/NSPR/Reference">NSPR Reference</a></dt>
+     <dd>NSPR API documentation.</dd>
+    </dl>
+
+    <h3 id="Additional_Information">Additional Information</h3>
+
+    <ul>
+     <li><a href="/en-US/docs/JavaScript_crypto" title="JavaScript_crypto">Using the window.crypto object from JavaScript</a></li>
+     <li><a href="/en-US/docs/HTTP_Delegation" title="HTTP_Delegation">Delegation of HTTP download for OCSP</a></li>
+     <li><a href="/en-US/docs/TLS_Cipher_Suite_Discovery" title="TLS_Cipher_Suite_Discovery">TLS Cipher Suite Discovery</a></li>
+     <li><a href="/en-US/docs/NSS_Certificate_Download_Specification" title="NSS_Certificate_Download_Specification">NSS Certificate Download Specification</a></li>
+     <li><a href="/en-US/docs/NSS/FIPS_Mode_-_an_explanation" title="FIPS Mode - an explanation">FIPS Mode - an explanation</a></li>
+     <li><a href="/en-US/docs/NSS_Key_Log_Format" title="NSS Key Log Format">Format of key log files</a></li>
+     <li>View <a href="/en-US/docs/tag/NSS" title="/en-US/docs/tag/NSS">all NSS-related articles on MDN</a></li>
+    </ul>
+
+    <h3 id="Testing">Testing</h3>
+
+    <ul>
+     <li><a href="/en-US/docs/Testing_third-party_PKCS#11_modules.2Ftokens_with_NSS" title="Testing_third-party_PKCS#11_modules.2Ftokens_with_NSS">Testing third-party PKCS #11 modules/tokens with NSS</a></li>
+    </ul>
+
+    <h3 id="Planning">Planning</h3>
+
+    <p>Information on NSS planning can be found at <a class="external" href="http://wiki.mozilla.org/NSS">wiki.mozilla.org</a>, including:</p>
+
+    <ul>
+     <li><a class="external" href="http://wiki.mozilla.org/FIPS_Validation">FIPS Validation</a></li>
+     <li><a class="external" href="http://wiki.mozilla.org/NSS:Roadmap">NSS Roadmap page</a></li>
+     <li><a href="https://fedoraproject.org/wiki/User:Mitr/NSS:DeveloperFriendliness" title="https://fedoraproject.org/wiki/User:Mitr/NSS:DeveloperFriendliness">NSS Improvement Project</a></li>
+    </ul>
+   </td>
+   <td>
+    <h2 class="Community" id="Community" name="Community">Community</h2>
+
+    <ul>
+     <li>View Mozilla Security forums...</li>
+    </ul>
+
+    <p>{{ DiscussionList("dev-security", "mozilla.dev.security") }}</p>
+
+    <ul>
+     <li>View Mozilla Cryptography forums...</li>
+    </ul>
+
+    <p>{{ DiscussionList("dev-tech-crypto", "mozilla.dev.tech.crypto") }}</p>
+
+    <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related Topics</h2>
+
+    <ul>
+     <li><a href="/en-US/docs/Security" title="Security">Security</a></li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/de/mozilla/projects/nss/nss_3.33_release_notes/index.html b/files/de/mozilla/projects/nss/nss_3.33_release_notes/index.html
new file mode 100644
index 0000000000..6bcaf94043
--- /dev/null
+++ b/files/de/mozilla/projects/nss/nss_3.33_release_notes/index.html
@@ -0,0 +1,78 @@
+---
+title: NSS 3.33 release notes
+slug: Mozilla/Projects/NSS/NSS_3.33_release_notes
+translation_of: Mozilla/Projects/NSS/NSS_3.33_release_notes
+---
+<h2 id="Einführung">Einführung</h2>
+
+<p>Das Network Security Services (NSS) Team hat NSS 3.33 veröffentlicht, was eine Nebenversion darstellt.</p>
+
+<h2 id="Distribution_information">Distribution information</h2>
+
+<p>The hg tag is NSS_3_33_RTM. NSS 3.33 requires Netscape Portable Runtime (NSPR) 4.17 or newer.</p>
+
+<p>NSS 3.33 source distributions are available on ftp.mozilla.org for secure HTTPS download:</p>
+
+<ul>
+ <li>Source tarballs:<br>
+  <a href="https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/NSS_3_33_RTM/src/">https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/NSS_3_33_RTM/src/</a></li>
+</ul>
+
+<h2 id="Bedeutende_Änderungen_in_NSS_3.33">Bedeutende Änderungen in NSS 3.33</h2>
+
+<ul>
+ <li>TLS-Kompression wird nicht mehr unterstützt. API calls that attempt to enable compression are accepted without failure. However, TLS compression will remain disabled.</li>
+ <li>Diese Version von NSS verwendet eine <a href="https://blog.mozilla.org/security/2017/09/13/verified-cryptography-firefox-57/">formal bestätigte Implementierung</a> von Curve25519 auf 64-Bit-Systemen.</li>
+ <li>The compile time flag DISABLE_ECC has been removed.</li>
+ <li>When NSS is compiled without NSS_FORCE_FIPS=1 startup checks are not performed anymore.</li>
+ <li>Fixes CVE-2017-7805, a potential use-after-free in TLS 1.2 server when verifying client authentication</li>
+ <li>Various minor improvements and correctness fixes.</li>
+</ul>
+
+<h2 id="Neu_in_NSS_3.33">Neu in NSS 3.33</h2>
+
+<h3 id="Neue_Funktionalität">Neue Funktionalität</h3>
+
+<ul>
+ <li>When listing an NSS database using certutil -L, but the database hasn't yet been initialized with any non-empty or empty password, the text "Database needs user init" will be included in the listing.</li>
+ <li>When using certutil to set an inacceptable password in FIPS mode, a correct explanation of acceptable passwords will be printed.</li>
+</ul>
+
+<h4 id="Neue_Funktionen">Neue Funktionen</h4>
+
+<ul>
+ <li><em>in cert.h</em>
+
+  <ul>
+   <li><strong>CERT_FindCertByIssuerAndSNCX</strong> - a variation of existing function CERT_FindCertByIssuerAndSN that accepts an additional password context parameter.</li>
+   <li><strong>CERT_FindCertByNicknameOrEmailAddrCX</strong> - a variation of existing function CERT_FindCertByNicknameOrEmailAddr that accepts an additional password context parameter.</li>
+   <li><strong>CERT_FindCertByNicknameOrEmailAddrForUsageCX</strong> - a variation of existing function CERT_FindCertByNicknameOrEmailAddrForUsage that accepts an additional password context parameter.</li>
+  </ul>
+ </li>
+ <li><em>in secport.h</em>
+  <ul>
+   <li><strong>NSS_SecureMemcmpZero</strong> - check if a memory region is all zero in constant time.</li>
+   <li><strong>PORT_ZAllocAligned</strong> - allocate aligned memory.</li>
+   <li><strong>PORT_ZAllocAlignedOffset</strong> - allocate aligned memory for structs.</li>
+  </ul>
+ </li>
+ <li><em>in ssl.h</em>
+  <ul>
+   <li><strong>SSL_GetExperimentalAPI</strong> - access experimental APIs in libssl.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Fehler_behoben_in_NSS_3.33">Fehler behoben in NSS 3.33</h2>
+
+<p>This Bugzilla query returns all the bugs fixed in NSS 3.33:</p>
+
+<p><a href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&amp;classification=Components&amp;query_format=advanced&amp;product=NSS&amp;target_milestone=3.33">https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&amp;classification=Components&amp;query_format=advanced&amp;product=NSS&amp;target_milestone=3.33</a></p>
+
+<h2 id="Kompatibilität">Kompatibilität</h2>
+
+<p>NSS 3.33 shared libraries are backward compatible with all older NSS 3.x shared libraries. A program linked with older NSS 3.x shared libraries will work with NSS 3.33 shared libraries without recompiling or relinking. Furthermore, applications that restrict their use of NSS APIs to the functions listed in NSS Public Functions will remain compatible with future versions of the NSS shared libraries.</p>
+
+<h2 id="Rückmeldung">Rückmeldung</h2>
+
+<p>Entdeckte Fehler sollten durch das Ausfüllen eines Fehlerberichts mithilfe von<a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=NSS"> bugzilla.mozilla.org</a> gemeldet werden (Produkt NSS).</p>
diff --git a/files/de/mozilla/projects/nss/nss_sample_code/index.html b/files/de/mozilla/projects/nss/nss_sample_code/index.html
new file mode 100644
index 0000000000..a765114f0b
--- /dev/null
+++ b/files/de/mozilla/projects/nss/nss_sample_code/index.html
@@ -0,0 +1,25 @@
+---
+title: NSS Beispielcode
+slug: Mozilla/Projects/NSS/NSS_Sample_Code
+translation_of: Mozilla/Projects/NSS/NSS_Sample_Code
+---
+<h2 id="NSS_Beispielcode">NSS Beispielcode</h2>
+
+<p>Die Sammlung an Beispielcode demonstriert wie NSS für Kryptographische Operationen, Zertifikat Handhabung, SSL, etc. verwendet werden kann. Außerdem werden einige "best practices" in der Anwendung von Kryptographie demonstriert.</p>
+
+<ol>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Projects/NSS/nss_sample_code/NSS_Sample_Code_Sample1">Beispielcode 1: Schlüsselgenerierung und Transport zwischen Servern</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Projects/NSS/nss_sample_code/NSS_Sample_Code_sample2">Beispielcode 2: Symmetrische Verschlüsselung</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Projects/NSS/nss_sample_code/NSS_Sample_Code_sample3">Beispielcode 3: Hashing, MAC</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Projects/NSS/nss_sample_code/NSS_Sample_Code_sample4">Beispielcode 4: PKI Verschlüsselung</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Projects/NSS/nss_sample_code/NSS_Sample_Code_sample5">Beispielcode 5: PKI Verschlüsselung mit rohem öffentlichem &amp; privatem Schlüssel im DER Format</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Projects/NSS/nss_sample_code/NSS_Sample_Code_sample6">Beispielcode 6: Konstante Symmetrische Schlüssel in der NSS Datenbank</a></li>
+</ol>
+
+<p><br>
+ Dies sind sehr alte Code Beispiele die ersetzt werden müssen. Siehe https://bugzilla.mozilla.org/show_bug.cgi?id=490238</p>
+
+<p>Die Beispiele können wie folgt heruntergeladen werden:</p>
+
+<pre class="bz_comment_text" id="comment_text_42">hg clone https://hg.mozilla.org/projects/nss; cd nss; hg update SAMPLES_BRANCH
+</pre>
diff --git a/files/de/mozilla/projects/nss/pkcs11/index.html b/files/de/mozilla/projects/nss/pkcs11/index.html
new file mode 100644
index 0000000000..1bb5996d30
--- /dev/null
+++ b/files/de/mozilla/projects/nss/pkcs11/index.html
@@ -0,0 +1,20 @@
+---
+title: PKCS11
+slug: Mozilla/Projects/NSS/PKCS11
+tags:
+  - NSS
+  - NeedsTranslation
+  - Security
+  - TopicStub
+translation_of: Mozilla/Projects/NSS/PKCS11
+---
+<p> </p>
+
+<p>PKCS #11 information for implementors of cryptographic modules:</p>
+
+<ul>
+ <li><a href="PKCS11_Implement">Implementing PKCS11 for NSS</a></li>
+ <li><a href="/en-US/docs/PKCS11_FAQ">PKCS11 FAQ</a></li>
+ <li><a href="PKCS11_Jar_Install">Using the JAR Installation Manager to Install a PKCS #11 Cryptographic Module</a></li>
+ <li><a href="PKCS11_Conformance">PKCS #11 Conformance Testing</a></li>
+</ul>
diff --git a/files/de/mozilla/projects/nss/pkcs11/module_installation/index.html b/files/de/mozilla/projects/nss/pkcs11/module_installation/index.html
new file mode 100644
index 0000000000..158c1944b0
--- /dev/null
+++ b/files/de/mozilla/projects/nss/pkcs11/module_installation/index.html
@@ -0,0 +1,32 @@
+---
+title: Installation des PKCS11-Moduls
+slug: Mozilla/Projects/NSS/PKCS11/Module_Installation
+translation_of: Mozilla/Projects/NSS/PKCS11/Module_Installation
+---
+<p><span class="seoSummary"><a class="internal" href="/en/PKCS11" title="en/PKCS11">PKCS #11</a> Module sind externe Module, die Firefox-Unterstützung für Smartcard-Lesegeräte, biometrische Sicherheitsgeräte und externe Zertifikatspeicher ergänzen. Dieser Artikel behandelt die beiden Methoden zum Installieren von PKCS-#11 Modulen in Firefox.</span><font> Benutzer können das Einstellungsdialogfeld verwenden, um PKCS #11-Modul zu installieren oder zu entfernen. Erweiterungen können PKCS-#11 Module nsIPKCS11 programmgesteuert verwalten.</font></p>
+
+<div class="note"><strong>Hinweis:</strong> Die Informationen in diesem Artikel sind spezifisch für Firefox 3.5 und neuer. Ältere Versionen von Firefox unterstützen möglicherweise die <a class="internal" href="/en/DOM/window.pkcs11" title="en/DOM/window.pkcs11">window.pkcs11-Eigenschaft</a> für die Installation von PKCS #11 Modulen.</div>
+
+<h2 id="Verwenden_der_Firefox-Einstellungen_zum_Installieren_von_PKCS-11_Modulen">Verwenden der Firefox-Einstellungen zum Installieren von PKCS-#11 Modulen</h2>
+
+<ol>
+ <li>Speichern des PKCS-#11-Moduls an einem dauerhaften Speicherort auf Ihrem lokalen Computer</li>
+ <li>Öffnen Sie das Dialogfeld Firefox-Einstellungen. Wählen Sie "Erweitert" &gt; "Verschlüsselung" &gt; "Sicherheitsgeräte"</li>
+ <li>Wählen Sie "Load"</li>
+ <li>Geben Sie einen Namen für das Sicherheitsmodul ein, z. B. "Meine Clientdatenbank". HINWEIS: Es gibt derzeit einen Fehler in Firefox, bei dem internationale Zeichen Probleme verursachen können.</li>
+ <li>Wählen Sie "Durchsuchen..." , um den Speicherort des PKCS-#11-Moduls auf Ihrem lokalen Computer zu finden, und wählen Sie "OK", wenn Sie fertig sind.</li>
+</ol>
+
+<h2 id="Bereitstellen_von_PKCS-11-Modulen_mithilfe_der_pkcs11-API">Bereitstellen von PKCS-#11-Modulen mithilfe der pkcs11-API</h2>
+
+<p><font>Ab Firefox 58 können Erweiterungen die Browsererweiterungs-API verwenden, um PKCS-#11 Module aufzuzählen und sie dem Browser als Schlüssel- und Zertifikatquellen zugänglich zu machen.</font><code><a href="/en-US/Add-ons/WebExtensions/API/pkcs11">pkcs11</a></code></p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Security">Websicherheit</a></li>
+ <li><a href="/en-US/docs/Mozilla/Projects/NSS/PKCS11">PKCS11</a></li>
+ <li>The <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/pkcs11">pkcs11</a> <a href="/en-US/docs/User:bram/Add-ons/WebExtensions">WebExtensions</a> API</li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/pkcs11/installModule">pkcs11.installModule()</a></code></li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/pkcs11/isModuleInstalled">pkcs11.isModuleInstalled()</a></code></li>
+</ul>
diff --git a/files/de/mozilla/projects/thunderbird/thunderbird_lokalisation/index.html b/files/de/mozilla/projects/thunderbird/thunderbird_lokalisation/index.html
new file mode 100644
index 0000000000..5b4c9e60d8
--- /dev/null
+++ b/files/de/mozilla/projects/thunderbird/thunderbird_lokalisation/index.html
@@ -0,0 +1,98 @@
+---
+title: Thunderbird Lokalisation
+slug: Mozilla/Projects/Thunderbird/Thunderbird_Lokalisation
+tags:
+  - Lokalisation
+  - thunderbird
+translation_of: Mozilla/Projects/Thunderbird/Thunderbird_Localization
+---
+<p>Diese Seite richtet sich an aktuelle und zukünftige Lokalisierer Thunderbirds, Mozilla Messagings E-Mail- und Usenet- Client. Sie deckt viele Aspekts ab, die ein Lokalisierer Thunderbirds kennen sollte, wie, notwendige Werkzeuge und wie man Informationen über lokalisationsrelevante Veranstaltungen und verschiedene andere interessante Angelegenheiten bekommt.</p>
+
+<h2 id="Erstellen_einer_Thunderbird-Lokalisation"><span class="mw-headline">Erstellen einer Thunderbird-Lokalisation</span></h2>
+
+<p><a href="/en/Bootstrapping_a_New_Locale" title="En/Creating_a_new_localization_(Mercurial)">Eine neue Lokalisation erstellen (Mercurial)</a> - Dieser Artikel beschreibt, wie du eine neue Lokalisation Thunderbirds erstellen kannst.</p>
+
+<h3 id="Über_Repostorien_und_Entwicklungszweige">Über Repostorien und Entwicklungszweige</h3>
+
+<p>Es gibt 3 aktive Repositorien für die Thunderbird-Entwicklung. Der Entwicklungsfortschritt Thunderbirds wird von einem Zweig zum nächsten alle sechs Wochen zusammengeführt.</p>
+
+<ul>
+ <li>comm-central - auch als Trunk oder "Daily" bekannt.
+  <ul>
+   <li>Hier findet die reguläre Thunderbird-Entwicklung statt. Zeichenketten ändern sich zu jeder Zeit.</li>
+   <li>Es wird nur von wenigen Sprachumgebungen erwartet, dass sie in diesem Zweig übersetzt werden.</li>
+  </ul>
+ </li>
+ <li>comm-aurora - auch bekannt als "Earlybird"
+  <ul>
+   <li>Hier wird die Entwicklung für eine bestimnte Veröffentlichung stabilisiert.</li>
+   <li>Es sind keine neuen Funktionen erlaubt und auch Zeichenketten werden nicht mehr verändert.</li>
+   <li>Sprachprojekte sollten so viel ihrer Arbeit wie möglich auf diesen Zweig konzentrieren und den Abschluss erreichen.</li>
+   <li>Hier erledigte Arbeit wird automatisch mit der Beta- und Release-Version alle 6 Wochen zusammengeführt.</li>
+  </ul>
+ </li>
+ <li>comm-beta - "Beta"-Kanal
+  <ul>
+   <li>Hier ermöglichen wir einer großen Anzahl an Nutzern eine Vorschau der Thunderbird-Entwicklung.</li>
+   <li>Letzte Stabilisierungen werden vorgenommen.</li>
+   <li>Hier wird wenig oder keine L10n-Arbeit vorgenommen.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Most locales will being working on comm-aurora. This repository/branch is stable with respect to strings for each six week period. Completing work here means it is ready for the first beta, and you won't need to work on beta branch. Your work will also automatically be carried forward.</p>
+
+<h3 id="Lokalisationsanforderungen">Lokalisationsanforderungen</h3>
+
+<p>There are not significant restrictions on what locales can change. However, we need to work together on providing search engines for Thunderbird users to use to get the right balance of search engines and the correct options set. For further information <a href="/en/Thunderbird_Localization/Productization" title="en/Thunderbird_Localization/Productization">see this page</a>.</p>
+
+<h3 id="Lokalisationsübersicht"><span class="mw-headline">Lokalisationsübersicht </span></h3>
+
+<p>Die <a class="external text" href="https://l10n.mozilla.org/teams/" rel="nofollow" title="Lokalisations-Übersicht">Lokalisations-Übersicht</a> für Thunderbird gibt Lokalisierern eine präzise Übersicht über den aktuellen Zustand ihrer Lokalisationen. Weitere Informationen gibt es auf der  <a class="link-https" href="https://wiki.mozilla.org/Thunderbird:Localization:Dashboard" title="https://wiki.mozilla.org/Thunderbird:Localization:Dashboard">L10n Übersichts-Seite</a>.</p>
+
+<p>A localization will added to the l10n dashboard on request when it has reached a high-level of completion (&gt; 80%) as shown by the <a href="/en/Compare-locales" title="En/Compare-locales">compare-locales</a> output. To request the addition of your locale to the dashboard, <a class="external text" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Thunderbird&amp;component=Build%20Config" rel="nofollow" title="https://bugzilla.mozilla.org/enter_bug.cgi?product=Thunderbird&amp;component=Build%20Config">file a bug</a> in the Thunderbird product/Build Config component.</p>
+
+<h2 id="L10n-relevante_Informationen_erhalten"><span class="mw-headline">L10n-relevante Informationen erhalten </span></h2>
+
+<h3 id="Nachrichtengruppen_E-Mail-Verteiler"><span class="mw-headline">Nachrichtengruppen &amp; E-Mail-Verteiler</span></h3>
+
+<p>Localizers of Thunderbird should read the localization newsgroups (<a class="external" href="http://groups.google.de/group/mozilla.dev.l10n.announce" title="http://groups.google.de/group/mozilla.dev.l10n.announce">mozilla.dev.l10n.announce</a> <a class="external text" href="http://groups.google.de/group/mozilla.dev.l10n" rel="nofollow" title="http://groups.google.de/group/mozilla.dev.l10n">mozilla.dev.l10n</a>) to stay informed of Thunderbird-specific and general l10n-related items of interest to them. They are further encouraged to read the Thunderbird development newsgroup (<a class="external text" href="http://groups.google.de/group/mozilla.dev.apps.thunderbird" rel="nofollow" title="http://groups.google.de/group/mozilla.dev.apps.thunderbird">mozilla.dev.apps.thunderbird</a>) to stay informed of recent Thunderbird-related developments.</p>
+
+<p>These newsgroups can also be accessed via the <a class="link-https" href="https://lists.mozilla.org/listinfo/dev-l10n-announce" title="https://lists.mozilla.org/listinfo/dev-l10n-announce">dev-l10n-announce@lists.mozilla.org</a>, <a class="link-https" href="https://lists.mozilla.org/listinfo/dev-l10n" title="https://lists.mozilla.org/listinfo/dev-l10n">dev-l10n@lists.mozilla.org</a> (localization mailinglist) or <a class="link-https" href="https://lists.mozilla.org/listinfo/dev-apps-thunderbird" title="https://lists.mozilla.org/listinfo/dev-apps-thunderbird">dev-apps-thunderbird@lists.mozilla.org</a> (Thunderbird development mailinglist) mailinglists, which mirror the newsgroups mentioned above. You can subscribe to or unsubscribe from these mailinglists via the web interface at <a class="link-https" href="https://lists.mozilla.org/listinfo" title="https://lists.mozilla.org/listinfo">lists.mozilla.org</a>.</p>
+
+<h3 id="Bugzilla"><span class="mw-headline">Bugzilla </span></h3>
+
+<p>Localizers should watch the <a class="link-mailto" href="mailto:thunderbird@localization.bugs" rel="freelink">thunderbird@localization.bugs</a> mail address (or its alias :tb-l10n) to stay current on bugs that might affect Thunderbird localizers. This can be done by adding this mail address to the "User Watching" section of your <a class="link-https" href="https://bugzilla.mozilla.org/userprefs.cgi?tab=email" title="https://bugzilla.mozilla.org/userprefs.cgi?tab=email">Email preferences in bugzilla</a>.</p>
+
+<h3 id="Ein_paar_hilfreiche_Links"><span class="mw-headline">Ein paar hilfreiche Links </span></h3>
+
+<ul>
+ <li><a class="external text" href="https://bugzilla.mozilla.org/buglist.cgi?product=MailNews+Core&amp;product=Thunderbird&amp;keywords_type=allwords&amp;keywords=l12y&amp;bug_status=UNCONFIRMED,NEW,ASSIGNED,REOPENED" rel="nofollow" title="https://bugzilla.mozilla.org/buglist.cgi?product=MailNews+Core&amp;product=Thunderbird&amp;keywords_type=allwords&amp;keywords=l12y&amp;bug_status=UNCONFIRMED,NEW,ASSIGNED,REOPENED">Open bugs with the l12y (localizability) keyword</a></li>
+ <li><a class="external text" href="https://bugzilla.mozilla.org/buglist.cgi?product=MailNews+Core&amp;product=Thunderbird&amp;bug_status=UNCONFIRMED,NEW,ASSIGNED,REOPENED&amp;emailcc1=1&amp;emailtype1=exact&amp;email1=thunderbird@localization.bugs" rel="nofollow" title="https://bugzilla.mozilla.org/buglist.cgi?product=MailNews+Core&amp;product=Thunderbird&amp;bug_status=UNCONFIRMED,NEW,ASSIGNED,REOPENED&amp;emailcc1=1&amp;emailtype1=exact&amp;email1=thunderbird%40localization.bugs">Open bugs which need localizer attention (thunderbird@localization.bugs has been CC'ed on that bug)</a></li>
+</ul>
+
+<h2 id="Sprachumgebungsschichten"><span class="mw-headline">Sprachumgebungsschichten </span></h2>
+
+<p>Locale tiers reflect locales that we need to have in a good state for release. There are 10 locales in tier 1, which are the most important for Thunderbird, because of their number of Thunderbird users or potential for growth.</p>
+
+<p>These locales are being treated as first-class citizens, as important as en-US, which is to say that any Tier 1 locale that does not meet the requirements may block a final release of Thunderbird.</p>
+
+<h3 id="Schicht_1"><span class="mw-headline">Schicht 1 </span></h3>
+
+<p>The following are P1 (Priorität 1) locales in order of priority:</p>
+
+<pre>* de             -  Deutsch
+* fr             -  Französisch
+* ja, ja-JP-mac  -  Japanisch
+* en-GB          -  Britisches Englisch
+* es-ES          -  Spanisch (kontinentaleuropäisch)
+* it             -  Italienisch
+* pl             -  Polnisch
+* ru             -  Russisch
+* nl             -  Niederländisch
+* pt-BR          -  Brasilianisches Portugiesisch
+</pre>
+
+<h3 id="Schicht_2"><span class="mw-headline">Schicht 2 </span></h3>
+
+<p>Alle anderen unterstützten Sprachumgebungen befinden sich in der Schicht 2.</p>
diff --git a/files/de/mozilla/qa/index.html b/files/de/mozilla/qa/index.html
new file mode 100644
index 0000000000..b6efbed387
--- /dev/null
+++ b/files/de/mozilla/qa/index.html
@@ -0,0 +1,70 @@
+---
+title: 'QA: Quality assurance at Mozilla'
+slug: Mozilla/QA
+tags:
+  - NeedsTranslation
+  - QA
+  - Testing
+  - TopicStub
+translation_of: Mozilla/QA
+---
+<p>Es gibt viele Dinge, die im Bereich der Qualitätssicherung erledigt werden müssen und dabei muss man nicht zwingend programmieren können. Einige Aufgaben erfordern nicht mal Kenntnisse in HTML oder andren Webtechnologien. Wenn Sie interessiert sind uns beim Testen von Anwendungen oder anderen Aufgaben der Qualitätssicherung zu unterstützen, können Sie zunächst einmal auf den Seiten von <a class="external" href="http://quality.mozilla.org/">quality.mozilla.org</a> vorbei schauen.</p>
+
+
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h4 id="Dokumentation"><a href="/Special:Tags?tag=QA&amp;language=de" title="Special:Tags?tag=QA&amp;language=de">Dokumentation</a></h4>
+
+    <dl>
+     <dt><a href="/de/Richtlinien_zum_Schreiben_eines_Bugreports" title="de/Richtlinien_zum_Schreiben_eines_Bugreports">Richtlinien zum Schreiben eines Bugreports</a></dt>
+     <dd><small>Je besser ein Bug gemeldet worden ist, umso besser wird ein Entwickler ihn sofort beseitigen. Wenn Sie diesen Leitfaden befolgen, können Sie helfen, dass ihre Bugs an oberster Stelle der Entwicklerliste stehen, und sie umso schneller beseitigt werden können.</small></dd>
+     <dt style="font-style: normal; font-weight: bold;"><a href="/de/Unbestätigte_Bugs_bestätigen" title="de/Unbestätigte_Bugs_bestätigen">Unbestätigte Bugs bestätigen</a></dt>
+     <dd style="margin-left: 0px; margin-bottom: 0.5em; padding-left: 15px;"><small>Nützliche Fehlermeldungen identifizieren und restliche Meldungen schließen.</small></dd>
+     <dt style="font-style: normal; font-weight: bold;"><a class="external" href="http://www.mozilla.org/quality/help/screening-duplicates.html">Doppelte Fehlermeldungen aussortieren</a></dt>
+     <dd style="margin-left: 0px; margin-bottom: 0.5em; padding-left: 15px;"><small>Helfen Sie uns Fehler schneller zu beseitigen, indem Sie vermeiden doppelte Fehlermeldungen zu senden oder doppelte Einträge auszusortieren.</small></dd>
+     <dt><a href="/de/Reduzierte_Testfälle" title="de/Reduzierte_Testfälle">Reduzierte Testfällen</a></dt>
+     <dd><small>Verbessern Sie ihre Fehlermeldungen in dem Sie fehlerhafte Webseiten auf einfache Testseiten reduzieren, welche Entwicklern schnell helfen den Fehler zu verstehen und außerdem für automatisierte Tests verwendet werden können.</small></dd>
+     <dt><a href="/de/Tests_entwickeln" title="de/Tests_entwickeln">Tests entwickeln</a></dt>
+     <dd><small>Tests sichern, dass zukünftige Veränderungen an Mozilla nichts kaputt machen, was vorher korrekt funktioniert hat.</small></dd>
+    </dl>
+
+    <p><span class="alllinks"><a href="/Special:Tags?tag=QA&amp;language=de" title="Special:Tags?tag=QA&amp;language=de">Alles anzeigen...</a></span></p>
+   </td>
+   <td>
+    <h4 id="Community" name="Community">Community</h4>
+
+    <ul>
+     <li><a class="external" href="http://quality.mozilla.org/">QMO | quality.mozilla.org</a></li>
+     <li>Mozillas Foren zur Qualitätssicherung:</li>
+    </ul>
+
+
+
+    <ul>
+     <li><a class="link-irc" href="irc://irc.mozilla.org/qa">#qa auf irc.mozilla.org</a></li>
+     <li><a class="link-irc" href="irc://irc.mozilla.org/bugs">#bugs auf irc.mozilla.org</a></li>
+     <li><a class="link-irc" href="irc://irc.mozilla.org/smoketest">#smoketest auf irc.mozilla.org</a></li>
+     <li>MozillaZine Foren: <a class="external" href="http://forums.mozillazine.org/viewforum.php?f=23">Firefox Builds</a>, <a class="external" href="http://forums.mozillazine.org/viewforum.php?f=29">Thunderbird Builds</a></li>
+    </ul>
+
+    <h4 id="Tools" name="Tools">Tools</h4>
+
+    <ul>
+     <li><a href="/de/Bugzilla" title="de/Bugzilla">Bugzilla</a> - Fehlerdatenbank für die Mozilla Projekte</li>
+     <li><a class="external" href="http://litmus.mozilla.org/">Litmus</a></li>
+     <li><a href="/de/Qualitätssicherung/Stress_Testing" title="de/Qualitätssicherung/Stress_Testing">Stress Testing</a></li>
+     <li><a href="/Special:Tags?tag=QA:Tools&amp;language=de" title="Special:Tags?tag=QA:Tools&amp;language=de">...weitere Tools</a></li>
+    </ul>
+
+    <h4 id="Verwandte_Themen">Verwandte Themen</h4>
+
+    <dl>
+     <dd><a href="/de/Entwicklerhandbuch" title="de/Mozilla_entwickeln">Mozilla entwickeln</a></dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/de/mozilla/tech/index.html b/files/de/mozilla/tech/index.html
new file mode 100644
index 0000000000..f9682e62e1
--- /dev/null
+++ b/files/de/mozilla/tech/index.html
@@ -0,0 +1,14 @@
+---
+title: Mozilla technologies
+slug: Mozilla/Tech
+tags:
+  - Landing
+  - Mozilla
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - XUL
+translation_of: Mozilla/Tech
+---
+<p>Mozilla has several technologies used as components of its projects. These are documented here. (flesh out this text).</p>
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/de/mozilla/tech/xpcom/guide/empfang_von_benachrichtigungen_zum_startprozess/index.html b/files/de/mozilla/tech/xpcom/guide/empfang_von_benachrichtigungen_zum_startprozess/index.html
new file mode 100644
index 0000000000..a81f28519f
--- /dev/null
+++ b/files/de/mozilla/tech/xpcom/guide/empfang_von_benachrichtigungen_zum_startprozess/index.html
@@ -0,0 +1,56 @@
+---
+title: Empfang von Benachrichtigungen zum Startprozeß
+slug: Mozilla/Tech/XPCOM/Guide/empfang_von_benachrichtigungen_zum_startprozess
+translation_of: Mozilla/Tech/XPCOM/Guide/Receiving_startup_notifications
+---
+<p>Manchmal brauchen XPCOM Komponenten Benachrichtigungen über den Fortschritt beim Hochfahren der Anwendung, zum Beispiel um neue Dienste zur passenden Zeit starten können</p>
+<h2 id="Empfang_von_Benachrichtigungen_zum_Startprozeß_ab_Gecko_2.0_(Firefox_4)">Empfang von Benachrichtigungen zum Startprozeß ab Gecko 2.0 (Firefox 4)</h2>
+<p>Der XPCOM Startprozeß wurde verändert um die zum Hochfahren benötigte Zeit zu verbessern. Siehe <a href="#der_startprozess">Der Startprozeß</a> für Details über die Funktionsweise, wenn dich die Einzelheiten interessieren.</p>
+<p>Die entscheidende Änderung ist, daß man jetzt entsprechende Zeilen zum <a href="/en/Chrome_registration" title="en/Chrome registration"><code>chrome.manifest</code></a> hinzufügt damit die Anwendung sich darum kümmert, anstelle die Registrierung programmatisch mit dem Category Manager durchzuführen wie früher. Zum Beispiel:</p>
+<pre>category profile-after-change MyComponent @foobar/mycomponent;1</pre>
+<div class="warning">
+ <strong>Wichtig:</strong> Bisher begann die Contract ID des Kategorie-EIntrags mit "service," wenn die Komponente als Dienst (Service) implementiert war. Das ist nicht länger der Fall, dieses muß bei der Codemigration entfernt werden..</div>
+<p>Hinzu kommt, daß die früheste Benachrichtigung beim Startprozeß, die man erhalten kann, jetzt  <code>profile-after-change</code> ist. Dein Add-On wird keine <code><code>xpcom-startup</code></code> oder <code>app-startup</code> Benachrichtigungen mehr erhalten.</p>
+<h3 id="Der_Startprozeß"><a name="der_startprozess">Der Startprozeß</a></h3>
+<p>Während des Startprozesses wird aus dem Manifest der Anwendung die Liste der Komponenten ausgelesen, die registriert werden müssen, und diese Komponenten werden dann gestartet. Damit sind dann XPCOM und die Anwendung soweit hochgefahren, daß der Erweiterungs-Manager geladen werden kann, um sich um Installation, Deinstallation und Aktualisierung von Erweiterungen zu kümmern.</p>
+<p>Sobald dieser Prozess abgeschlossen ist, können Erweiterungen einfach dadurch geladen werden, daß ihr Manifest gelesen, ihre Komponenten geladen und der Anwendungsstart fortgesetzt wird, ohne den Browser neu starten zu müssen.</p>
+<h2 id="Empfang_von_Benachrichtigungen_zum_Startprozeß_vor_Gecko_2.0_(Firefox_4)">Empfang von Benachrichtigungen zum Startprozeß vor Gecko 2.0 (Firefox 4)</h2>
+<p>Um Benachrichtigungen zum Startprozeß zu empfangen muß man {{ interface("nsICategoryManager") }} benutzen um sich für die "app-startup" Kategorie zu registrieren. Damit wird die Komponente dann unter anderem folgende Benachrichtigungen zum Anwendungsstart erhalten:</p>
+<dl>
+ <dt>
+  <code>xpcom-startup</code></dt>
+ <dd>
+  Wird gesendet, wenn XPCOM fertig mit dem Hochfahren ist. Die meisten Anwendungsdienste sind dann noch nicht verfügbar, aber XPCOM selbst steht bereit.</dd>
+ <dt>
+  <code>app-startup</code></dt>
+ <dd>
+  Wird gesendet, wenn die Anwendung mit dem Startprozess fertig ist.</dd>
+ <dt>
+  <code>final-ui-startup</code></dt>
+ <dd>
+  Wird gesendet eben bevor das erste Anwendungsfenster dargestellt wird.</dd>
+</dl>
+<h3 id="Registrierung_am_Kategorien-Manager">Registrierung am Kategorien-Manager</h3>
+<p>Um sich beim Kategorien-Manager anzumelden, muß man nur dessen Methode {{ ifmethod("nsICategoryManager", "AddCategoryEntry") }} aufrufen:</p>
+<pre>categoryManager-&gt;AddCategoryEntry(APPSTARTUP_CATEGORY,
+                                  "mycomponentname",
+                                  "contract-id",
+                                  PR_TRUE, PR_TRUE,
+                                  getter_Copies(previous));
+</pre>
+<p>Das bewirkt, daß die Komponente mit {{ ifmethod("nsIComponentManager","createInstance") }} instanziiert wird.</p>
+<p>Wenn die Komponente als Dienst (Service) laufen soll, laß die Contract ID mit "service," beginnen:</p>
+<pre>categoryManager-&gt;AddCategoryEntry(APPSTARTUP_CATEGORY,
+                                  "mycomponentname",
+                                  "service,contract-id",
+                                  PR_TRUE, PR_TRUE,
+                                  getter_Copies(previous));</pre>
+<p>Wenn "service," angegeben ist, wird die Komponente mit {{ ifmethod("nsIComponentManager","getService") }} instanziiert.</p>
+<p>In beiden Fällen braucht man keine weitere Registrierung für die Benachrichtigungen zum Startprozeß, die Registrierung am Kategorien-Manager reicht dazu aus.</p>
+<h3 id="Wie_es_weitergeht">Wie es weitergeht</h3>
+<p>Nachdem die Registrierung am Kategorien-Manager erfolgt ist, wird zum Zeitpunkt des Starts von Mozilla (oder wenn bei einer eingebetteten Anwendung die Funktion <code>NS_InitEmbedding()</code> aufgerufen wurde) die AppStartupNotifier Komponente instanziiert und ihre <code>Observe()</code> Methode aufgerufen; Diese wiederum läuft über alle Komponenten in der <code>app-startup</code> Kategorie und sendet ihnen die passenden Benachrichtigungen.</p>
+<h2 id="Siehe_auch">Siehe auch</h2>
+<ul>
+ <li>{{ interface("nsICategoryManager") }}</li>
+ <li><a href="/en/Observer_Notifications" title="en/Observer Notifications">Observer Notifications</a></li>
+</ul>
diff --git a/files/de/mozilla/tech/xpcom/guide/index.html b/files/de/mozilla/tech/xpcom/guide/index.html
new file mode 100644
index 0000000000..781a596b2e
--- /dev/null
+++ b/files/de/mozilla/tech/xpcom/guide/index.html
@@ -0,0 +1,13 @@
+---
+title: XPCOM guide
+slug: Mozilla/Tech/XPCOM/Guide
+tags:
+  - Landing
+  - Mozilla
+  - NeedsTranslation
+  - TopicStub
+  - XPCOM
+translation_of: Mozilla/Tech/XPCOM/Guide
+---
+<p><span class="seoSummary">These articles provide tutorials and usage documentation for XPCOM, including how to use it in your own projects and how to build XPCOM components for your Firefox add-ons and the like.</span></p>
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/de/mozilla/tech/xpcom/reference/index.html b/files/de/mozilla/tech/xpcom/reference/index.html
new file mode 100644
index 0000000000..29d07953d6
--- /dev/null
+++ b/files/de/mozilla/tech/xpcom/reference/index.html
@@ -0,0 +1,27 @@
+---
+title: XPCOM reference
+slug: Mozilla/Tech/XPCOM/Reference
+tags:
+  - Add-ons
+  - Extensions
+  - Landing
+  - Mozilla
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - XPCOM
+translation_of: Mozilla/Tech/XPCOM/Reference
+---
+<p>This reference describes the interfaces and functions provided by the <a href="/en-US/docs/Mozilla/Tech/XPCOM">XPCOM</a> library. In addition, it details the various helper classes and functions, as well as the components, provided by the <a href="/en-US/docs/Mozilla/Tech/XPCOM/Glue">XPCOM glue</a> library. The contents herein are oriented primarily toward extension developers and people embedding XPCOM in other projects.</p>
+
+<div class="warning">
+<p><strong>WebExtensions are becoming the new standard for creating add-ons. </strong>Eventually support for XPCOM add-ons will be deprecated, so you should begin to investigate porting your add-ons to use the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a> API, and <a href="https://mzl.la/webext-feature-needed">report any missing functionality</a> so we can be sure to address your concerns. Work is ongoing on WebExtension capabilities, so your input will help prioritize and plan the work. To learn more about the kinds of changes that will be needed, see <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_XUL_XPCOM_extensions">Comparison with XUL/XPCOM extensions</a>. In addition, any binaries you use will then need to be converted for use with the WebExtensions <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Native_messaging">native messaging</a> API, or compiled using <a href="https://webassembly.github.io/">WebAssembly</a> or <a href="/en-US/docs/Mozilla/Projects/Emscripten">Emscripten</a>.</p>
+</div>
+
+<div class="note">
+<p>If you're working on a module in the Mozilla codebase that's compiled with the <code>MOZILLA_INTERNAL_API</code> flag set, some of these APIs -- the string functions and classes in particular -- are not the ones you should be using. See the <a href="/en-US/docs/Mozilla/Tech/XPCOM/Guide/Internal_strings">XPCOM internal string guide</a> for documentation of the internal string API used within the Mozilla codebase.</p>
+</div>
+
+<p>{{LandingPageListSubpages}}</p>
+
+<p>Many XPCOM pages return an <code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Core_functions/nsresult">nsresult</a></code>. Prior to Gecko 19 {{geckoRelease(19)}}, this was an integer that simply returned an error code. It is now a strongly typed <code>enum</code> when XPCOM is built using a C++11 compiler. This causes compile-time errors to occur when improper values are returned as nsresult values, thereby making it easier to catch many bugs.</p>
diff --git a/files/de/mozilla/tech/xpcom/reference/interface/index.html b/files/de/mozilla/tech/xpcom/reference/interface/index.html
new file mode 100644
index 0000000000..d098cf8402
--- /dev/null
+++ b/files/de/mozilla/tech/xpcom/reference/interface/index.html
@@ -0,0 +1,19 @@
+---
+title: XPCOM Interface Reference
+slug: Mozilla/Tech/XPCOM/Reference/Interface
+tags:
+  - NeedsTranslation
+  - TopicStub
+  - XPCOM
+  - XPCOM Interface Reference
+translation_of: Mozilla/Tech/XPCOM/Reference/Interface
+---
+<p><span class="seoSummary">This is a reference to the XPCOM interfaces provided by the Mozilla platform.</span></p>
+
+<div class="cols-3">{{tree('','1')}}</div>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/XPCOM_Interface_Reference_group" title="XPCOM_Interface_Reference_group">Interfaces grouped by function</a></li>
+</ul>
diff --git a/files/de/mozilla/tech/xpcom/reference/interface/nsiloginmanager/index.html b/files/de/mozilla/tech/xpcom/reference/interface/nsiloginmanager/index.html
new file mode 100644
index 0000000000..2c354b2b2b
--- /dev/null
+++ b/files/de/mozilla/tech/xpcom/reference/interface/nsiloginmanager/index.html
@@ -0,0 +1,420 @@
+---
+title: nsILoginManager
+slug: Mozilla/Tech/XPCOM/Reference/Interface/nsILoginManager
+tags:
+  - Firefox 3
+  - Interfaces
+  - 'Interfaces:Scriptable'
+  - Login Manager
+  - NeedsTranslation
+  - Thunderbird 3
+  - TopicStub
+  - XPCOM
+  - XPCOM API Reference
+  - thunderbird
+translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsILoginManager
+---
+<p></p><div style="border: solid #ddd 2px; margin-bottom: 12px;">
+<div style="background: #eee; padding: 2px;"><code><a href="https://dxr.mozilla.org/mozilla-central/source/toolkit/components/passwordmgr/public/nsILoginManager.idl" rel="custom">toolkit/components/passwordmgr/public/nsILoginManager.idl</a></code><span style="text-align: right; float: right;"><a href="/en-US/docs/Interfaces/About_Scriptable_Interfaces" style="color: #00cc00; font-weight: 700;">Scriptable</a></span></div>
+<span style="padding: 4px 2px;">
+
+Used to interface with the built-in Password Manager
+</span>
+
+  <div style="height: 42px; position: relative; padding: 2px; width: auto;">
+
+  <div style="top: 22px; font-size: 11px; position: absolute;">1.0</div>
+
+  <div style="top: 22px; font-size: 11px; position: absolute; left: 0px; text-align: right; float: right; width: 100%;">66</div>
+
+  <div style="height: 8px; top: 16px; background: #dd0000; left: 0px; position: absolute; width: 8.571428571428571%;"></div>
+
+<div style="height: 8px; top: 16px; left: 8.571428571428571%; background: #00dd00; position: absolute; width: 91.42857142857143%;" title="Introduced in Gecko 1.9 (Firefox 3)"></div>
+
+<div style="top: 0px; font-size: 11px; position: absolute; left: 8.571428571428571%;">Introduced</div>
+<div style="top: 22px; font-size: 11px; position: absolute; left: 8.571428571428571%;">Gecko 1.9</div>
+
+    <div style="height: 8px; top: 16px; left: 9.976190285714287%; background: #eeee00; position: absolute; width: 1%; border-radius: 4px; -webkit-border-radius: 4px;" title="Last changed in Gecko 1.9.2 (Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)"></div>
+
+</div>
+
+<div style="background: #eee; padding: 2px;">
+Inherits from: <code><a href="/de/docs/XPCOM_Interface_Referenz/nsISupports" title="">nsISupports</a></code>
+<span style="text-align: right; float: right;">Last changed in Gecko 1.9.2 (Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)</span></div>
+</div><p></p>
+
+<p>Replaces <code><a href="/de/docs/XPCOM_Interface_Referenz/nsIPasswordManager" title="">nsIPasswordManager</a></code> which was used in older versions of Gecko.</p>
+
+<p>Implemented by: <code>@mozilla.org/login-manager;1</code>. To create an instance, use:</p>
+
+<pre class="eval">var loginManager = Components.classes["@mozilla.org/login-manager;1"]
+                   .getService(Components.interfaces.nsILoginManager);
+</pre>
+
+<h2 id="Method_overview" name="Method_overview">Method overview</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="#addLogin()">addLogin</a>(in nsILoginInfo aLogin);</code></td>
+  </tr>
+  <tr>
+   <td><code>nsIAutoCompleteResult <a href="#autoCompleteSearch()">autoCompleteSearch</a>(in AString aSearchString, in nsIAutoCompleteResult aPreviousResult, in nsIDOMHTMLInputElement aElement);</code></td>
+  </tr>
+  <tr>
+   <td><code>unsigned long <a href="#countLogins()">countLogins</a>(in AString aHostname, in AString aActionURL, in AString aHttpRealm);</code></td>
+  </tr>
+  <tr>
+   <td><code>boolean <a href="#fillForm()">fillForm</a>(in nsIDOMHTMLFormElement aForm);</code> </td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#findLogins()">findLogins</a>(out unsigned long count, in AString aHostname, in AString aActionURL, in AString aHttpRealm, [retval, array, size_is(count)] out nsILoginInfo logins);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#getAllDisabledHosts()">getAllDisabledHosts</a>([optional] out unsigned long count, [retval, array, size_is(count)] out wstring hostnames);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#getAllLogins()">getAllLogins</a>([optional] out unsigned long count, [retval, array, size_is(count)] out nsILoginInfo logins);</code></td>
+  </tr>
+  <tr>
+   <td><code>boolean <a href="#getLoginSavingEnabled()">getLoginSavingEnabled</a>(in AString aHost);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#modifyLogin()">modifyLogin</a>(in nsILoginInfo oldLogin, in nsISupports newLoginData);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#removeAllLogins()">removeAllLogins</a>();</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#removeLogin()">removeLogin</a>(in nsILoginInfo aLogin);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#searchLogins()">searchLogins</a>(out unsigned long count, in nsIPropertyBag matchData, [retval, array, size_is(count)] out nsILoginInfo logins);</code> </td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#setLoginSavingEnabled()">setLoginSavingEnabled</a>(in AString aHost, in boolean isEnabled);</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Methods" name="Methods">Methods</h2>
+
+<h3 id="addLogin()" name="addLogin()">addLogin()</h3>
+
+<p>Stores a new login in the Login Manager.</p>
+
+<p></p><div class="blockIndicator note"><strong>Hinweis:</strong> Default values for the <code><a href="/de/docs/XPCOM_Interface_Referenz/nsILoginMetaInfo" title="">nsILoginMetaInfo</a></code> properties are created if the specified login doesn't explicitly specify them.</div><p></p>
+
+<pre class="eval">void addLogin(
+  in nsILoginInfo aLogin
+);
+</pre>
+
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+
+<dl>
+ <dt><code>aLogin</code></dt>
+ <dd>The login to store.</dd>
+</dl>
+
+<h6 id="Exceptions_thrown" name="Exceptions_thrown">Exceptions thrown</h6>
+
+<dl>
+ <dt> </dt>
+ <dd>An exception is thrown if the login information is already stored in the Login Manager. To change a login, you have to use <code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsILoginManager#modifyLogin()">modifyLogin()</a></code>.</dd>
+</dl>
+
+<h3 id="autoCompleteSearch()" name="autoCompleteSearch()">autoCompleteSearch()</h3>
+
+<p>Generates results for a user field autocomplete menu.</p>
+
+<p></p><div class="blockIndicator note"><strong>Hinweis:</strong> This method is provided for use only by the <code>FormFillController</code>, which calls it directly. It should not be used for any other purpose.</div><p></p>
+
+<pre class="eval">nsIAutoCompleteResult autoCompleteSearch(
+  in AString aSearchString,
+  in nsIAutoCompleteResult aPreviousResult,
+  in nsIDOMHTMLInputElement aElement
+);
+</pre>
+
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+
+<dl>
+ <dt><code>aSearchString</code></dt>
+ <dd>Missing Description</dd>
+ <dt><code>aPreviousResult</code></dt>
+ <dd>Missing Description</dd>
+ <dt><code>aElement</code></dt>
+ <dd>Missing Description</dd>
+</dl>
+
+<h6 id="Return_value" name="Return_value">Return value</h6>
+
+<p>Missing Description</p>
+
+<h3 id="countLogins()" name="countLogins()">countLogins()</h3>
+
+<p>Returns the number of logins matching the specified criteria. Called when only the number of logins is needed, and not the actual logins (which avoids prompting the user for a Master Password, as the logins don't need to be decrypted).</p>
+
+<pre class="eval">unsigned long countLogins(
+  in AString aHostname,
+  in AString aActionURL,
+  in AString aHttpRealm
+);
+</pre>
+
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+
+<dl>
+ <dt><code>aHostname</code></dt>
+ <dd>The hostname to which to restrict searches, formatted as a URL. For example, "<a class="external" href="http://www.bar.com" rel="freelink">http://www.bar.com</a>". To match all hostnames, specify <code>""</code> (empty string). A value of <code>null</code> will cause countLogins() to not match any logins.</dd>
+ <dt><code>aActionURL</code></dt>
+ <dd>For form logins, this parameter should specify the URL to which the form will be submitted. To match any form login, specify <code>""</code> (empty string). To not match any form logins (For example when interested in protocol logins only), specify <code>null</code>.</dd>
+ <dt><code>aHttpRealm</code></dt>
+ <dd>For protocol logins, specify the HTTP Realm for which the login applies; this is obtained from the WWW-Authenticate header (see <a class="external" href="http://tools.ietf.org/html/rfc2617" title="http://tools.ietf.org/html/rfc2617">RFC 2617</a>). To match any protocol login, specify <code>""</code> (empty string). To not match any protocol logins (For example when interested in form logins only), specify <code>null</code>.</dd>
+</dl>
+
+<h6 id="Return_value" name="Return_value">Return value</h6>
+
+<p>The number of logins matching the parameters passed.</p>
+
+<p></p><h3 id="fillForm()">fillForm()</h3><p></p>
+
+<p>Fills out a form with login information, if appropriate information is available.</p>
+
+<p></p><div class="blockIndicator note"><strong>Hinweis:</strong> This method will attempt to fill out the form regardless of the setting of the <code>signon.autofillForms</code> preference.</div><p></p>
+
+<pre class="eval">boolean fillForm(
+  in nsIDOMHTMLFormElement aForm
+);
+</pre>
+
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+
+<dl>
+ <dt><code>aForm</code></dt>
+ <dd>The HTMLform to attempt to fill out.</dd>
+</dl>
+
+<h6 id="Return_value" name="Return_value">Return value</h6>
+
+<p><code>true</code> if the form was successfully filled out; otherwise <code>false</code>.</p>
+
+<h3 id="findLogins()" name="findLogins()">findLogins()</h3>
+
+<p>Searches for logins matching the specified criteria. Called when looking for logins that might be applicable to a given form or authentication request.</p>
+
+<pre class="eval">void findLogins(
+  out unsigned long count,
+  in AString aHostname,
+  in AString aActionURL,
+  in AString aHttpRealm,
+  [retval, array, size_is(count)] out nsILoginInfo logins
+);
+</pre>
+
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+
+<dl>
+ <dt><code>count</code></dt>
+ <dd>The number of elements in the returned array. JavaScript callers can simply use the array's <code>length</code> property and supply a dummy argument for this parameter.</dd>
+ <dt><code>aHostname</code></dt>
+ <dd>The hostname to restrict searches to, formatted as a URL. For example, "<a class="external" href="http://www.bar.com" rel="freelink">http://www.bar.com</a>".</dd>
+ <dt><code>aActionURL</code></dt>
+ <dd>For form logins, this parameter should specify the URL to which the form will be submitted. For protocol logins, specify <code>null</code>. An empty string ("") will match any value (except <code>null</code>).</dd>
+ <dt><code>aHttpRealm</code></dt>
+ <dd>For protocol logins, specify the HTTP Realm for which the login applies; this is obtained from the WWW-Authenticate header (see <a class="external" href="http://tools.ietf.org/html/rfc2617" title="http://tools.ietf.org/html/rfc2617">RFC 2617</a>). For form logins, this parameter should be <code>null</code>. An empty string ("") will match any value (except <code>null</code>).</dd>
+ <dt><code>logins</code></dt>
+ <dd>An array of <code><a href="/de/docs/XPCOM_Interface_Referenz/nsILoginInfo" title="">nsILoginInfo</a></code> objects.</dd>
+</dl>
+
+<h6 id="Example" name="Example">Example</h6>
+
+<p>This method can be called from JavaScript like this:</p>
+
+<pre class="brush: js"> var logins = myLoginMgr.findLogins({}, 'https://bugzilla.mozilla.org', '', '', {});
+</pre>
+
+<h3 id="getAllDisabledHosts()" name="getAllDisabledHosts()">getAllDisabledHosts()</h3>
+
+<p>Returns a list of all hosts for which login saving is disabled.</p>
+
+<pre class="eval">void getAllDisabledHosts(
+  [optional] out unsigned long count,
+  [retval, array, size_is(count)] out wstring hostnames
+);
+</pre>
+
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+
+<dl>
+ <dt><code>count</code></dt>
+ <dd>The number of elements in the returned array. JavaScript callers can simply use the array's <code>length</code> property and supply a dummy argument for this parameter.</dd>
+ <dt><code>hostnames</code></dt>
+ <dd>An array of hostname strings in URL format without a pathname. For example: <span class="nowiki">"https://www.site.com"</span>.</dd>
+</dl>
+
+<h6 id="Example" name="Example">Example</h6>
+
+<p>You can call this method from JavaScript like this:</p>
+
+<pre class="brush: js"> var disabledHosts = myLoginMgr.getAllDisabledHosts({});
+</pre>
+
+<h3 id="getAllLogins()" name="getAllLogins()">getAllLogins()</h3>
+
+<p>Returns an array containing all logins recorded by the Login Manager.</p>
+
+<p>If you just want to see if any logins are stored, use <code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsILoginManager#countLogins()">countLogins()</a></code> instead. It's more efficient, and avoids the possibility of the user being prompted for their master password.</p>
+
+<pre class="eval">void getAllLogins(
+  [optional] out unsigned long count,
+  [retval, array, size_is(count)] out nsILoginInfo logins
+);
+</pre>
+
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+
+<dl>
+ <dt><code>count</code></dt>
+ <dd>The number of elements in the returned array. JavaScript callers can simply use the array's <code>length</code> property and supply a dummy argument for this parameter.</dd>
+ <dt><code>logins</code></dt>
+ <dd>An array of <code><a href="/de/docs/XPCOM_Interface_Referenz/nsILoginInfo" title="">nsILoginInfo</a></code> objects containing all the logins the Login Manager has on record.</dd>
+</dl>
+
+<h6 id="Example" name="Example">Example</h6>
+
+<p>You can call this method from JavaScript like this:</p>
+
+<pre class="brush: js"> var logins = myLoginMgr.getAllLogins({});
+</pre>
+
+<h3 id="getLoginSavingEnabled()" name="getLoginSavingEnabled()">getLoginSavingEnabled()</h3>
+
+<p>Reports whether or not saving login information is enabled for a host.</p>
+
+<pre class="eval">boolean getLoginSavingEnabled(
+  in AString aHost
+);
+</pre>
+
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+
+<dl>
+ <dt><code>aHost</code></dt>
+ <dd>The hostname to check. This argument should be in the origin URL format, with no pathname. For example: <span class="nowiki">"https://www.site.com"</span>.</dd>
+</dl>
+
+<h6 id="Return_value" name="Return_value">Return value</h6>
+
+<p><code>true</code> if login saving is enabled for the host, otherwise <code>false</code>.</p>
+
+<h3 id="modifyLogin()" name="modifyLogin()">modifyLogin()</h3>
+
+<p>Modifies an existing login by replacing it with a new one.</p>
+
+<p>If newLoginData is a <code><a href="/de/docs/XPCOM_Interface_Referenz/nsILoginInfo" title="">nsILoginInfo</a></code>, all of the old login's <code><a href="/de/docs/XPCOM_Interface_Referenz/nsILoginInfo" title="">nsILoginInfo</a></code> properties are changed to the values from newLoginData (but the old login's <code><a href="/de/docs/XPCOM_Interface_Referenz/nsILoginMetaInfo" title="">nsILoginMetaInfo</a></code> properties are unmodified).</p>
+
+<p>If newLoginData is a <code><a href="/de/docs/XPCOM_Interface_Referenz/nsIPropertyBag" title="">nsIPropertyBag</a></code>, only the specified properties will be changed. The <code><a href="/de/docs/XPCOM_Interface_Referenz/nsILoginMetaInfo" title="">nsILoginMetaInfo</a></code> properties of oldLogin can be changed in this manner.</p>
+
+<p>If the propertybag contains an item named "timesUsedIncrement", the login's timesUsed property will be incremented by the item's value.</p>
+
+<pre class="eval">void modifyLogin(
+  in nsILoginInfo oldLogin,
+  in nsISupports newLoginData
+);
+</pre>
+
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+
+<dl>
+ <dt><code>oldLogin</code></dt>
+ <dd>The login to be modified.</dd>
+ <dt><code>newLoginData</code></dt>
+ <dd>The login information to replace the <code>oldLogin</code> with. This may be specified as either an <code><a href="/de/docs/XPCOM_Interface_Referenz/nsILoginInfo" title="">nsILoginInfo</a></code> or an <code><a href="/de/docs/XPCOM_Interface_Referenz/nsIPropertyBag2" title="">nsIPropertyBag2</a></code> object.</dd>
+</dl>
+
+<h3 id="removeAllLogins()" name="removeAllLogins()">removeAllLogins()</h3>
+
+<p>Removes all logins known by the Login Manager. This works without a need for the master password, if one is set.</p>
+
+<pre class="eval">void removeAllLogins();
+</pre>
+
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+
+<p>None.</p>
+
+<h3 id="removeLogin()" name="removeLogin()">removeLogin()</h3>
+
+<p>Removes a login from the Login Manager.</p>
+
+<p></p><div class="blockIndicator note"><strong>Hinweis:</strong> The specified login must exactly match a stored login. However, the values of any <code><a href="/de/docs/XPCOM_Interface_Referenz/nsILoginMetaInfo" title="">nsILoginMetaInfo</a></code> properties are ignored.</div><p></p>
+
+<pre class="eval">void removeLogin(
+  in nsILoginInfo aLogin
+);
+</pre>
+
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+
+<dl>
+ <dt><code>aLogin</code></dt>
+ <dd>The login to remove from the Login Manager. Only a login that is an exact match is deleted.</dd>
+</dl>
+
+<p></p><h3 id="searchLogins()">searchLogins()</h3><p></p>
+
+<p>Searches for logins in the login manager's data store, returning an array of matching logins. If there are no matching logins, an empty array is returned.</p>
+
+<pre class="eval">void searchLogins(
+  out unsigned long count,
+  in nsIPropertyBag matchData,
+  [retval, array, size_is(count)] out nsILoginInfo logins
+);
+</pre>
+
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+
+<dl>
+ <dt><code>count</code></dt>
+ <dd>The number of elements in the returned array.</dd>
+ <dt><code>matchData</code></dt>
+ <dd>The data used for the search. This does not follow the same requirements as <code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsILoginManager#findLogins()">findLogins()</a></code> for those fields; wildcard matches are not specified.</dd>
+ <dt><code>logins</code></dt>
+ <dd>An array of matching <code><a href="/de/docs/XPCOM_Interface_Referenz/nsILoginInfo" title="">nsILoginInfo</a></code> objects.</dd>
+</dl>
+
+<h6 id="Example" name="Example">Example</h6>
+
+<p>This method can be called from JavaScript like this:</p>
+
+<pre class="brush: js"> var logins = myLoginMgr.searchLogins({}, matchData);
+ var numLogins = logins.length;
+</pre>
+
+<h3 id="setLoginSavingEnabled()" name="setLoginSavingEnabled()">setLoginSavingEnabled()</h3>
+
+<p>Enables or disables storing logins for a specified host. When login storing is disabled, the Login Manager won't prompt the user to store logins for that host. Existing logins are not affected.</p>
+
+<pre class="eval">void setLoginSavingEnabled(
+  in AString aHost,
+  in boolean isEnabled
+);
+</pre>
+
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+
+<dl>
+ <dt><code>aHost</code></dt>
+ <dd>The hostname to adjust the setting for. This argument should be in the origin URL format, with no pathname. For example: <span class="nowiki">"https://www.site.com"</span>.</dd>
+ <dt><code>isEnabled</code></dt>
+ <dd>If <code>true</code>, login saving is enabled for the specified host. If <code>false</code>, login saving is disabled.</dd>
+</dl>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li><code><a href="/de/docs/XPCOM_Interface_Referenz/nsILoginInfo" title="">nsILoginInfo</a></code></li>
+ <li><a href="/en/XPCOM_Interface_Reference/nsILoginManager/Using_nsILoginManager" title="en/Using_nsILoginManager">Using nsILoginManager</a></li>
+</ul>
diff --git a/files/de/mozilla/tech/xpcom/reference/interface/nsiloginmanager/using_nsiloginmanager/index.html b/files/de/mozilla/tech/xpcom/reference/interface/nsiloginmanager/using_nsiloginmanager/index.html
new file mode 100644
index 0000000000..2cc68a291f
--- /dev/null
+++ b/files/de/mozilla/tech/xpcom/reference/interface/nsiloginmanager/using_nsiloginmanager/index.html
@@ -0,0 +1,212 @@
+---
+title: Using nsILoginManager
+slug: Mozilla/Tech/XPCOM/Reference/Interface/nsILoginManager/Using_nsILoginManager
+translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsILoginManager/Using_nsILoginManager
+---
+<div>{{ Gecko_minversion_header("1.9") }}</div>
+
+<h2 id="Working_with_the_Login_Manager" name="Working_with_the_Login_Manager">Den Login-Manager verwenden</h2>
+
+<p>Extensions speichern oftmals - auch wenn es eigentlich gar nicht wirklich nötig wäre - Paßwörter zu Webseiten, web-apps und so weiter. To do so securely, they can use <code><a href="/en-US/docs/XPCOM_Interface_Reference/nsILoginManager" title="en-US/docs/nsILoginManager">nsILoginManager</a></code>, which provides for secure storage of sensitive password information and <code><a href="/en-US/docs/XPCOM_Interface_Reference/nsILoginInfo" title="en-US/docs/nsILoginInfo">nsILoginInfo</a></code>, which provides a way of storing login information.</p>
+
+<h2 id="Getting_nsILoginManager" name="Getting_nsILoginManager">Getting <code>nsILoginManager</code></h2>
+
+<p>To get a component implementing <code>nsILoginManager</code>, use the following:</p>
+
+<div style="margin-right: 270px;">
+<pre class="brush: js">var passwordManager = Components.classes["@mozilla.org/login-manager;1"].getService(
+	Components.interfaces.nsILoginManager
+);</pre>
+</div>
+
+<p>Most Login Manager functions take an <code><a href="/en-US/docs/XPCOM_Interface_Reference/nsILoginInfo" title="en-US/docs/nsILoginInfo">nsILoginInfo</a></code> object as a parameter. An <code><a href="/en-US/docs/XPCOM_Interface_Reference/nsILoginInfo" title="en-US/docs/nsILoginInfo">nsILoginInfo</a></code> object contains the following attributes: hostname, form submit URL, HTTP realm, username, username field, password, and password field. The hostname, username and password attributes are mandatory, while the other fields are set based on whether the login is for a web page form or an HTTP/FTP authentication site login. See the <code><a href="/en-US/docs/XPCOM_Interface_Reference/nsILoginInfo" title="en-US/docs/nsILoginInfo">nsILoginInfo</a></code> attribute definitions for more details. Defining an <code><a href="/en-US/docs/XPCOM_Interface_Reference/nsILoginInfo" title="en-US/docs/nsILoginInfo">nsILoginInfo</a></code> object is simple:</p>
+
+<div style="margin-right: 270px;">
+<pre class="brush: js">var nsLoginInfo = new Components.Constructor(
+	"@mozilla.org/login-manager/loginInfo;1",
+	Components.interfaces.nsILoginInfo,
+	"init"
+);
+
+var loginInfo = new nsLoginInfo(
+	hostname, formSubmitURL, httprealm, username, password, usernameField, passwordField
+);
+</pre>
+</div>
+
+<h2 id="Examples" name="Examples">Examples</h2>
+
+<h3 id="Creating_a_login_for_a_web_page" name="Creating_a_login_for_a_web_page">Creating a login for a web page</h3>
+
+<pre class="brush: js">var formLoginInfo = new nsLoginInfo(
+	'http://www.example.com',
+	'http://login.example.com',
+	null,
+	'joe',
+	'SeCrEt123',
+	'uname',
+	'pword'
+);</pre>
+
+<p>This login would correspond to a HTML form such as:</p>
+
+<pre class="brush: html">&lt;form action="http://login.example.com/foo/authenticate.cgi"&gt;
+	&lt;div&gt;Please log in.&lt;/div&gt;
+	&lt;label&gt;Username:&lt;/label&gt; &lt;input type="text" name="uname"&gt;
+	&lt;label&gt;Password:&lt;/label&gt; &lt;input type="password" name="pword"&gt;
+&lt;/form&gt;
+</pre>
+
+<h3 id="Creating_a_site_authentication_login" name="Creating_a_site_authentication_login">Creating a site authentication login</h3>
+
+<pre class="brush: js">var authLoginInfo = new nsLoginInfo(
+	'http://www.example.com',
+	null,
+	'ExampleCo Login',
+	'alice',
+	'SeCrEt321',
+	"",
+	""
+);
+</pre>
+
+<p>This would correspond to a login on <span class="nowiki">http://www.example.com</span> when the server sends a reply such as:</p>
+
+<pre class="eval"> HTTP/1.0 401 Authorization Required
+ Server: Apache/1.3.27
+ WWW-Authenticate: Basic realm="ExampleCo Login"
+
+</pre>
+
+<h3 id="Creating_a_local_extension_login" name="Creating_a_local_extension_login">Creating a local extension login</h3>
+
+<pre class="brush: js">var extLoginInfo = new nsLoginInfo(
+	'chrome://firefoo',
+	null,
+	'User Registration',
+	'bob',
+	'123sEcReT',
+	"",
+	""
+);</pre>
+
+<p>From a component creating a new info block is done slightly differently:</p>
+
+<pre>var nsLoginInfo = <span class="k"><span class="s0">new</span></span> <a class="r" title='Search for references of "Components"'>Components</a>.<a class="r" title='Search for references of "Constructor"'>Constructor</a>("@<a class="r" title='Search for references of "mozilla"'>mozilla</a>.<a class="r" title='Search for references of "org"'>org</a>/<a class="r" title='Search for references of "login"'>login</a>-<a class="r" title='Search for references of "manager"'>manager</a>/<a class="r" title='Search for references of "loginInfo"'>loginInfo</a>;1", <a class="r" title='Search for references of "Ci"'>Ci</a>.<a class="r" title='Search for references of "nsILoginInfo"'>nsILoginInfo</a>, "<a class="r" title='Search for references of "init"'>init</a>");
+<span class="k">var</span> extLoginInfo = <span class="k"><span class="s0">new</span></span> <a class="r" title='Search for references of "nsLoginInfo"'><span class="s1">nsLoginInfo</span></a>('<a class="r" title='Search for references of "chrome"'>chrome</a>:<span class="c">//firefoo',</span> null, 'User Registration', 'bob', '123sEcReT', '', '');
+//var extLoginInfo = new nsLoginInfo(<a class="r" title='Search for references of "aHostname"'>aHostname</a>, <a class="r" title='Search for references of "aFormSubmitURL"'>aFormSubmitURL</a>, <a class="r" title='Search for references of "aHttpRealm"'>aHttpRealm</a>, <a class="r" title='Search for references of "aUsername"'>aUsername</a>, <a class="r" title='Search for references of "aPassword"'>aPassword</a>, <a class="r" title='Search for references of "aUsernameField"'>aUsernameField</a>, <a class="r" title='Search for references of "aPasswordField"'>aPasswordField)</a>
+</pre>
+
+<p>The Login Manager treats this as if it was a web site login. You should use your extension's chrome:// URL to prevent conflicts with other extensions, and a realm string which briefly denotes the login's purpose.</p>
+
+<h2 id="Storing_a_password" name="Storing_a_password">Storing a password</h2>
+
+<p>To store a password in the Login Manager, you first need to create an <code><a href="/en-US/docs/XPCOM_Interface_Reference/nsILoginInfo" title="en-US/docs/nsILoginInfo">nsILoginInfo</a></code> object as defined above. Then you simply need to call the <code><a href="/en-US/docs/XPCOM_Interface_Reference/nsILoginManager" title="en-US/docs/nsILoginManager">nsILoginManager</a></code> method <code><a href="/en-US/docs/XPCOM_Interface_Reference/nsILoginManager#addLogin.28.29" title="en-US/docs/nsILoginManager#addLogin.28.29">addLogin()</a></code>.</p>
+
+<pre class="brush: js">myLoginManager.addLogin(loginInfo);
+</pre>
+
+<p>{{ Note("This will throw an exception if both the <code>httprealm</code> and <code>formSubmitURL</code> parameters are <code>NULL</code>. One must be specified when storing a password. The <code>hostname</code>, <code>username</code> and <code>password</code> parameters are also mandatory.") }}</p>
+
+<h2 id="Retrieving_a_password" name="Retrieving_a_password">Retrieving a password</h2>
+
+<p>Retrieving a password from the Login Manager is slightly more difficult. In order to locate a password, the <code>hostname</code>, <code>formSubmitURL</code> and <code>httprealm</code> must <strong>match exactly</strong> what is stored for the password to be found. The only exception is that if the stored <code>formSubmitURL</code> is blank, in which case the <code>formSubmitURL</code> parameter is ignored. Note that the <code>hostname</code> and <code>formSubmitURL</code> arguments should not include the path from the full URL. The example below should serve as a starting point for matching form logins:</p>
+
+<pre class="brush: js">var hostname = 'http://www.example.com';
+var formSubmitURL = 'http://www.example.com';  // not http://www.example.com/foo/auth.cgi
+var httprealm = null;
+var username = 'user';
+var password;
+
+try {
+	// Get Login Manager
+	var myLoginManager = Components.classes["@mozilla.org/login-manager;1"].
+		getService(Components.interfaces.nsILoginManager);
+
+	// Find users for the given parameters
+	var logins = myLoginManager.findLogins({}, hostname, formSubmitURL, httprealm);
+
+	// Find user from returned array of nsILoginInfo objects
+	for (var i = 0; i &lt; logins.length; i++) {
+		if (logins[i].username == username) {
+			password = logins[i].password;
+			break;
+		}
+	}
+}
+
+catch(ex) {
+	// This will only happen if there is no nsILoginManager component class
+}</pre>
+
+<p>Note that the user will be prompted for their master password if they have chosen to set one to secure their passwords.</p>
+
+<h2 id="Removing_a_password" name="Removing_a_password">Removing a password</h2>
+
+<p>Removing a password is simple:</p>
+
+<pre class="brush: js">myLoginManager.removeLogin(loginInfo);
+</pre>
+
+<p>When removing a password the specified <code><a href="/en-US/docs/XPCOM_Interface_Reference/nsILoginInfo" title="en-US/docs/nsILoginInfo">nsILoginInfo</a></code> object must <strong>exactly match</strong> what was stored or an exception will be thrown. This includes the password attribute. Here's an example on how to remove the password without actually knowing what the password is:</p>
+
+<pre class="brush: js">// example values
+var hostname = 'http://www.example.com';
+var formSubmitURL = 'http://www.example.com';
+var httprealm = null;
+var username = 'user';
+
+try {
+	// Get Login Manager
+	var passwordManager = Components.classes["@mozilla.org/login-manager;1"].
+		getService(Components.interfaces.nsILoginManager);
+
+	// Find users for this extension
+	var logins = passwordManager.findLogins({}, hostname, formSubmitURL, httprealm);
+
+	for (var i = 0; i &lt; logins.length; i++) {
+		if (logins[i].username == username) {
+			passwordManager.removeLogin(logins[i]);
+			break;
+		}
+	}
+}
+catch(ex) {
+	// This will only happen if there is no nsILoginManager component class
+}</pre>
+
+<h2 id="Changing_stored_login_information" name="Changing_stored_login_information">Changing stored login information</h2>
+
+<p>Changing a password is rather simple. Since all this does is make a <code><a href="/en-US/docs/XPCOM_Interface_Reference/nsILoginManager#removeLogin.28.29" title="en-US/docs/nsILoginManager#removeLogin.28.29">removeLogin()</a></code> call followed by an <code><a href="/en-US/docs/XPCOM_Interface_Reference/nsILoginManager#addLogin.28.29" title="en-US/docs/nsILoginManager#addLogin.28.29">addLogin()</a></code> call, it has the same caveats as both of them: namely that the <code>oldLogin</code> must match an existing login exactly (see above) and that the <code>newLogin</code> attributes must be set correctly.:</p>
+
+<pre class="brush: js">myLoginManager.modifyLogin(oldLogin, newLogin);</pre>
+
+<h2 id="Debugging" name="Debugging">Login Manager notifications</h2>
+
+<p>{{ fx_minversion_note("3.5", "The Login Manager notifications were added in Firefox 3.5.") }}</p>
+
+<p>Firefox 3.5 and later send assorted notifications when various Login Manager related events occur, including when form autofill does not occur for various reasons, as well as when changes are made to the Login Manager's database. See the <a class="internal" href="/en-US/docs/Observer_Notifications#Login_Manager" title="en-US/docs/Observer Notifications#Login Manager">Login Manager</a> section of the article on observer notifications for details.</p>
+
+<h2 id="Debugging" name="Debugging">Debugging</h2>
+
+<p>The login manager implementation has the ability to send debug messages to the Error Console, which can provide some visibility into what it's doing. To enable the debug logging, see <a class="external" href="http://wiki.mozilla.org/Firefox:Password_Manager_Debugging" rel="freelink">http://wiki.mozilla.org/Firefox:Pass...ager_Debugging</a>.</p>
+
+<h2 id="Supporting_older_versions_of_Firefox" name="Supporting_older_versions_of_Firefox">Supporting older versions of Gecko</h2>
+
+<p>If you want your extension to support both Gecko 1.9 (Firefox 3, Thunderbird 3, SeaMonkey 2) and older versions it will need to implement both the <code><a href="/en-US/docs/XPCOM_Interface_Reference/nsILoginManager" title="en-US/docs/nsILoginManager">nsILoginManager</a></code> and <code><a href="/en-US/docs/nsIPasswordManager" title="en-US/docs/nsIPasswordManager">nsIPasswordManager</a></code> components. A simple method to do this is as follows:</p>
+
+<pre class="brush: js">if ("@mozilla.org/passwordmanager;1" in Components.classes) {
+	// Password Manager exists so this is not Firefox 3 (could be Firefox 2, Netscape, SeaMonkey, etc).
+	// Password Manager code
+} else if ("@mozilla.org/login-manager;1" in Components.classes) {
+	// Login Manager exists so this is Firefox 3
+	// Login Manager code
+}</pre>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li>{{ Interface("nsILoginManager") }}</li>
+ <li>{{ Interface("nsILoginInfo") }}</li>
+ <li><a href="/en-US/docs/Creating_a_Login_Manager_storage_module" title="en-US/docs/Creating_a_Login_Manager_storage_module">Creating a Login Manager storage module</a></li>
+</ul>
diff --git a/files/de/mozilla/tech/xpcom/reference/interface/nsixmlhttprequest/index.html b/files/de/mozilla/tech/xpcom/reference/interface/nsixmlhttprequest/index.html
new file mode 100644
index 0000000000..3907d126bd
--- /dev/null
+++ b/files/de/mozilla/tech/xpcom/reference/interface/nsixmlhttprequest/index.html
@@ -0,0 +1,89 @@
+---
+title: nsIXMLHttpRequest
+slug: Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest
+translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest
+---
+<div class="blockIndicator obsolete obsoleteHeader">
+<p><strong>Obsolete since Gecko 60 (Firefox 60 / Thunderbird 60 / SeaMonkey 2.57)</strong><br>
+ This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.</p>
+</div>
+
+
+
+<p><code>nsIXMLHttpRequest</code> along with <code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIJSXMLHttpRequest" title="">nsIJSXMLHttpRequest</a></code> and <code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequestEventTarget" title="">nsIXMLHttpRequestEventTarget</a></code> are Mozilla's implementation details of the DOM <a href="/en/DOM/XMLHttpRequest" title="en/DOM/XMLHttpRequest">XMLHttpRequest</a> object.</p>
+
+<div class="note"><strong>Note:</strong> If you're a web developer or a Mozilla add-on developer, please refer to the <a href="/en/DOM/XMLHttpRequest" title="en/DOM/XMLHttpRequest">XMLHttpRequest</a> documentation instead.</div>
+
+<p>This page contains documentation, specific to Mozilla application and add-on developers.</p>
+
+<p>The interface definition: <a href="https://dxr.mozilla.org/mozilla-central/source/dom/xhr/nsIXMLHttpRequest.idl">https://dxr.mozilla.org/mozilla-central/source/dom/xhr/nsIXMLHttpRequest.idl</a></p>
+
+<h3 id="Elevated_Privileges">Elevated Privileges</h3>
+
+<p>As mentioned in the "Non-Standard Properties" the property of <code>channel</code> was read-only. When using the XPCOM interface, as seen below in <a href="#Example_code">Example 2</a>, we can get access to this. The most obvious benefit is that we can set <a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/NsIRequest#Constants">nsiRequest - Constants</a> in the <code>xhr.channel.loadFlags</code>. For instance, as done in <a href="#Example_code">Example 2</a>, the flag of <code>LOAD_ANONYMOUS</code> is added, this strips all user data (cookies, tokens, etc).</p>
+
+<h3 id="Using_event_handlers_from_native_code">Using event handlers from native code</h3>
+
+<p>(Not sure if it's up-to-date)</p>
+
+<p>From native code, the way to set up onload and onerror handlers is a bit different. Here is a comment from Johnny Stenback &lt;<a class="link-mailto" href="mailto:jst@netscape.com" rel="freelink">jst@netscape.com</a>&gt;:</p>
+
+<blockquote>The mozilla implementation of nsIXMLHttpRequest implements the interface nsIDOMEventTarget and that's how you're supported to add event listeners. Try something like this: nsCOMPtr&lt;nsIDOMEventTarget&gt; target(do_QueryInterface(myxmlhttpreq)); target-&gt;AddEventListener(NS_LITERAL_STRING("load"), mylistener, PR_FALSE) where mylistener is your event listener object that implements the interface nsIDOMEventListener. The 'onload', 'onerror', and 'onreadystatechange' attributes moved to nsIJSXMLHttpRequest, but if you're coding in C++ you should avoid using those.</blockquote>
+
+<p>Though actually, if you use addEventListener from C++ weird things will happen too, since the result will depend on what JS happens to be on the stack when you do it....</p>
+
+<p>Conclusion: Do not use event listeners on XMLHttpRequest from C++, unless you're aware of all the security implications. And then think twice about it.</p>
+
+<h2 id="Example_code" name="Example_code">Example code</h2>
+
+<p>This is a simple example code for opening a simple HTTP request from a xul application (like a Mozilla extension) without using observers:</p>
+
+<pre class="eval notranslate"> var req = Components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"].createInstance();
+ req.open('POST', "<a class="external" href="http://www.foo.bar:8080/nietzsche.do" rel="freelink">http://www.foo.bar:8080/nietzsche.do</a>", true);
+ req.send('your=data&amp;and=more&amp;stuff=here');
+</pre>
+
+<h2 id="Example_code" name="Example_code">Example 2</h2>
+
+<pre class="notranslate"><code>var {Cu: utils, Cc: classes, Ci: instances} = Components;
+Cu.import('resource://gre/modules/Services.jsm');
+function xhr(url, cb) {
+    let xhr = Cc["@mozilla.org/xmlextras/xmlhttprequest;1"].createInstance(Ci.nsIXMLHttpRequest);
+
+    let handler = ev =&gt; {
+        evf(m =&gt; xhr.removeEventListener(m, handler, !1));
+        switch (ev.type) {
+            case 'load':
+                if (xhr.status == 200) {
+                    cb(xhr.response);
+                    break;
+                }
+            default:
+                Services.prompt.alert(null, 'XHR Error', 'Error Fetching Package: ' + xhr.statusText + ' [' + ev.type + ':' + xhr.status + ']');
+                break;
+        }
+    };
+
+    let evf = f =&gt; ['load', 'error', 'abort'].forEach(f);
+    evf(m =&gt; xhr.addEventListener(m, handler, false));
+
+    xhr.mozBackgroundRequest = true;
+    xhr.open('GET', url, true);
+    xhr.channel.loadFlags |= Ci.nsIRequest.LOAD_ANONYMOUS | Ci.nsIRequest.LOAD_BYPASS_CACHE | Ci.nsIRequest.INHIBIT_PERSISTENT_CACHING;
+    xhr.responseType = "arraybuffer"; //dont set it, so it returns string, you dont want arraybuffer. you only want this if your url is to a zip file or some file you want to download and make a nsIArrayBufferInputStream out of it or something
+    xhr.send(null);
+}
+
+xhr('https://www.gravatar.com/avatar/eb9895ade1bd6627e054429d1e18b576?s=24&amp;d=identicon&amp;r=PG&amp;f=1', data =&gt; {
+    Services.prompt.alert(null, 'XHR Success', data);
+    var file = OS.Path.join(OS.Constants.Path.desktopDir, "test.png");
+    var promised = OS.File.writeAtomic(file, new UInt8Array(data));
+    promised.then(
+        function() {
+            alert('succesfully saved image to desktop')
+        },
+        function(ex) {
+             alert('FAILED in saving image to desktop')
+        }
+    );
+});</code></pre>
diff --git a/files/de/mozilla/thunderbird/autokonfiguration/index.html b/files/de/mozilla/thunderbird/autokonfiguration/index.html
new file mode 100644
index 0000000000..300c47d686
--- /dev/null
+++ b/files/de/mozilla/thunderbird/autokonfiguration/index.html
@@ -0,0 +1,146 @@
+---
+title: Automatische Konfiguration in Thunderbird
+slug: Mozilla/Thunderbird/Autokonfiguration
+tags:
+  - Administration
+  - enterprise
+translation_of: Mozilla/Thunderbird/Autoconfiguration
+---
+<p>Author: Ben Bucksch<br>
+ Bitte nehmen Sie keine Änderungen an diesem Dokument vor ohne den Autor zu kontaktieren</p>
+
+<p>Thunderbird 3.1 und neuer (sowie 3.0 zu einem gewissen Grad) beinhalten eine Funktion zur automatischen Konfiguration des E-Mail Kontos. Das Ziel der Autokonfiguration ist es, den Nutzern die Herstellung einer Verbindung zwischen Thunderbird und den Mail-Servern zu erleichtern. In den meisten Fällen sollten Nutzer in der Lage sein Thunderbird herunterzuladen und zu installieren sowie anschließend ihren Namen, E-Mail Adresse und Passwort in dem Einrichtungsassistenten einzugeben, wodurch sie einen voll funktionsfähigen E-Mail Client erhalten und ihre Mails so sicher wie möglich verschicken können. </p>
+
+<p>Siehe auch:</p>
+
+<ul>
+ <li>Die <a class="link-https" href="https://wiki.mozilla.org/Thunderbird:Autoconfiguration" title="https://wiki.mozilla.org/Thunderbird:Autoconfiguration">Projektseite im Mozilla Wiki</a> für Hintergrund, Design, Implementierung und Projektdetails</li>
+ <li>Für Anleitungen für Nutzer siehe <a class="external" href="https://support.mozilla.org/de/kb/automatisch-konto-konfigurieren" title="https://support.mozilla.org/de/kb/automatisch-konto-konfigurieren">Automatisch ein Konto konfigurieren lassen</a> in der Thunderbird Knowledge Base</li>
+ <li>Die <a href="/en/Thunderbird/Autoconfiguration/FileFormat/HowTo" title="en/Thunderbird/Autoconfiguration/FileFormat/HowTo">Beschreibung</a> und <a href="https://wiki.mozilla.org/Thunderbird:Autoconfiguration:ConfigFileFormat" title="en/Thunderbird/Autoconfiguration/FileFormat/Definition">Definition</a> der Konfigurationsdatei</li>
+</ul>
+
+<p>Dieses Dokument beschreibt wie die automatische Konfiguration in Thunderbird funktioniert und wie man E-Mail Servern die Autokonfiguration ermöglicht.</p>
+
+<h1 id="Mechanismen">Mechanismen</h1>
+
+<p>Thunderbird erhält die Server-Einstellungen über verschiedene Wege, wovon jeder für einen bestimmten Fall geeignet ist:</p>
+
+<ul>
+ <li>ISPDB<br>
+  The ISPDB is a central database, currently hosted by Mozilla Messaging, but free to use for any client. It contains settings for the world's largest ISPs. We hope that the database will soon have enough information to autoconfigure approximately 50% of our user's email accounts.<br>
+  It was added merely because we cannot assume that all big ISPs (including Microsoft) will immediately set up a configuration server for Thunderbird.</li>
+ <li>Configuration server at ISP<br>
+  ISPs have the option to provide their configuration information themselves directly to users, by setting up a web server at autoconfig.&lt;domain&gt;, which simply returns a static XML file with the configuration, as described below. For more complicated setups, for example when the login name does not appear in the the email address, the XML file can also be generated by the ISP. In such complicated cases, this is the only way to allow an automatic setup.</li>
+ <li>Configuration file on harddisk<br>
+  Administrators may place a configuration file in the Thunderbird installation folder. This is mainly intended for companies who install Thunderbird on their employees' computers and want to enable easy account setup without having to set up a configuration server. This method is not practical for other use cases, because it is difficult to update the configuration file. Therefore, public ISPs should use a configuration server.</li>
+ <li>Guessing<br>
+  If all other mechanisms failed, Thunderbird tries to guess the configuration, by trying common server names like imap.&lt;domain&gt;, smtp.&lt;domain&gt;, mail.&lt;domain&gt; etc., and, when a mail server answers, checking whether it supports SSL, STARTTLS and encrypted passwords (CRAM-MD5).</li>
+ <li>Manual configuration<br>
+  If guessing fails the user must manually enter the configuration information. Users can may also manually modify the account settings even if configuration information is successfully obtained by the methods described above.</li>
+</ul>
+
+<p>All the lookup mechanisms use the email address domain as base for the lookup. For example, for the email address <a class="moz-txt-link-abbreviated link-mailto" href="mailto:fred@example.com">fred@example.com</a> , the lookup is performed as (in this order):</p>
+
+<ol>
+ <li><em>tb-install-dir</em>/isp/example.com.xml on the harddisk</li>
+ <li>check for autoconfig.example.com</li>
+ <li>look up of "example.com" in the ISPDB</li>
+ <li>look up "MX example.com" in DNS, and for mx1.mail.hoster.com, look up "hoster.com" in the ISPDB</li>
+ <li>try to guess (imap.example.com, smtp.example.com etc.)</li>
+</ol>
+
+<p>We may in the future add DNS SRV records as supported mechanism in the future, but we currently do not.</p>
+
+<h1 id="How_to_add_support_for_your_domain">How to add support for your domain</h1>
+
+<h2 id="Classification">Classification</h2>
+
+<p>If you are a big ISP (&gt; 100,000 users) providing email addresses solely under a few domains like "example.com" and "example.de", you may either submit the configuration to the ISPDB or set up a configuration server.<br>
+ <br>
+ If you support email aliases and the user's login name is not part of the email address (for example, users may have <a class="moz-txt-link-rfc2396E link-mailto" href="mailto:hero@example.com">"hero@example.com"</a> as email address, but the IMAP/POP/SMTP login name is neither "hero" nor <a class="moz-txt-link-rfc2396E link-mailto" href="mailto:hero@example.com">"hero@example.com"</a>, but "u67578"), you need to set up a configuration server, which does the email address -&gt; login name lookup.<br>
+ <br>
+ If you host customer domains, i.e. you are "hoster.com", but your customers have <a class="moz-txt-link-rfc2396E link-mailto" href="mailto:fred@flintstone.com">"fred@flintstone.com"</a> and <a class="moz-txt-link-rfc2396E link-mailto" href="mailto:louis@kent.com">"louis@kent.com"</a> as domains, with only a few users per domain, you need to set up a configuration server (or rely on DNS MX).<br>
+ <br>
+ If you are a small company installing Thunderbird on your employees' desktops, you can place a configuration file in the Thunderbird installation folder.</p>
+
+<h2 id="ISPDB">ISPDB</h2>
+
+<p>Database URL is <a class="moz-txt-link-rfc2396E link-https" href="https://live.mozillamessaging.com/autoconfig/v1.1/" title="https://live.mozillamessaging.com/autoconfig/v1.1/">&lt;https://live.mozillamessaging.com/autoconfig/v1.1/&gt;</a>, append domain name, e.g. <a class="moz-txt-link-rfc2396E link-https" href="https://live.mozillamessaging.com/autoconfig/v1.1/freenet.de" title="https://live.mozillamessaging.com/autoconfig/v1.1/freenet.de">&lt;https://live.mozillamessaging.com/autoconfig/v1.1/freenet.de&gt;</a>.<br>
+ <br>
+ Current process: File a bug in <a class="link-https" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Webtools&amp;component=ISPDB%20Database%20Entries&amp;op_sys=All&amp;rep_platform=All">Bugzilla</a>, Product "Webtools", Component "ISPDB Database Entries", with a configuration file that matches the requirements described below.  The component is actively watched for new bugs (as of November 2015) so there is no need to request review on the file.</p>
+
+<h2 id="Configuration_server_at_ISP">Configuration server at ISP</h2>
+
+<p>Given the email address <a class="moz-txt-link-rfc2396E link-mailto" href="mailto:fred@example.com">"fred@example.com"</a>, Thunderbird first checks &lt;<span class="external free"><a class="moz-txt-link-freetext external" href="http://autoconfig.example.com/mail/config-v1.xml?emailaddress=fred@example.com">http://autoconfig.example.com/mail/config-v1.1.xml?emailaddress=fred@example.com</a></span>&gt; and then <a class="moz-txt-link-rfc2396E external" href="http://example.com/.well-known/autoconfig/mail/config-v1.1.xml" title="http://example.com/.well-known/autoconfig/mail/config-v1.1.xml">&lt;http://example.com/.well-known/autoconfig/mail/config-v1.1.xml&gt;</a>.</p>
+
+<h3 id="Small_company">Small company</h3>
+
+<p>If you are a small company, you can put the XML configuration file on your web server, at URL <a class="moz-txt-link-rfc2396E external" href="http://example.com/.well-known/autoconfig/mail/config-v1.1.xml">&lt;http://example.com/.well-known/autoconfig/mail/config-v1.1.xml&gt;</a>. (This is not yet finalized and subject to change.)</p>
+
+<h3 id="Domain_hoster">Domain hoster</h3>
+
+<p>If you are an ISP that hosts domains for your customers - for example, you are hoster.com and your customer registers fancy.com or example.com, and your servers accept and serve the mail for example.com -, you should set up an autoconfig server.</p>
+
+<h4 id="DNS">DNS</h4>
+
+<p>For each customer domain, you add a DNS record (in addition to the existing MX, A www etc. DNS records):<br>
+ <code>autoconfig IN A 10.2.3.4</code><br>
+ or<br>
+ <code>autoconfig IN CNAME autoconfig.hoster.com</code>.<br>
+ ... where 10.2.3.4 and autoconfig.hoster.com are IP addresses / hostnames you own.<br>
+ This allows Thunderbird to find you as hoster.</p>
+
+<p>To make the Version without an autoconfig DNS Entry work you have to make sure that example.com points to the Webserver you will place the config-v1.1.xml on.</p>
+
+<p>Example: <span style="font-family: courier new,andale mono,monospace; line-height: normal;">example.com A 10.2.3.4</span></p>
+
+<h4 id="Web_server">Web server</h4>
+
+<p>You set up a web server bound to a physical IP address. This may be on the same machine as other web servers, but the web server must be configured to the content to any requested domain.<br>
+ <br>
+ You must use an virtual host that match all autoconfig.* domains of your customers. In Apache terms, you can use a "ip-based virtual host". In the Apache configuration files, that means something like: Listen 10.2.3.4:80 (of course, you use a public IP address that you own)</p>
+
+<pre class="notranslate">&lt;VirtualHost 10.2.3.4:80&gt; #Must be the first and only virtual host with this ip!
+    DocumentRoot /var/www/autoconfig/
+    ServerName autoconfig.hoster.com
+    &lt;Directory /var/www/autoconfig&gt;
+	Order allow,deny
+	allow from all
+    &lt;/Directory&gt;
+&lt;/VirtualHost&gt;</pre>
+
+<p>Place the configuration file at the URL /mail/config-v1.1.xml on that host.</p>
+
+<p>All config files must be served as <code>Content-Type: text/xml</code> (or <code>application/xml</code>), otherwise the file will be ignored. Also, they must use charset UTF-8 (esp. if there are any non-ASCII-characters).</p>
+
+<p>If you like to use name-based virtual hosts. You probably don't want to setup the autoconfig subdomain for every domain of your customers.<br>
+ You can add a Rewriterule in the default virtual host (on debian /etc/apache2/sites-enabled/000-default)  to match all autoconfig.* subdomains:</p>
+
+<pre class="notranslate">&lt;VirtualHost *:80&gt; #Must be the first Virtual host
+	ServerAdmin webmaster@hoster.com
+	ServerName www
+	DocumentRoot /var/www
+	RewriteEngine On
+	RewriteCond %{HTTP_HOST} ^autoconfig\. [NC]
+	RewriteRule ^/(.*)	http://autoconfig.hoster.com/$1 [L,R=301,NE]
+        #...
+&lt;/VirtualHost&gt;
+&lt;VirtualHost *:80&gt;
+    DocumentRoot /var/www/autoconfig/
+    ServerName autoconfig.hoster.com
+    &lt;Directory /var/www/autoconfig&gt;
+ 	Order allow,deny
+	allow from all
+    &lt;/Directory&gt;
+&lt;/VirtualHost&gt;
+</pre>
+
+
+
+
+
+<h2 id="Configuration_file">Configuration file</h2>
+
+<p>This is described at <a href="/en/Thunderbird/Autoconfiguration/FileFormat/HowTo" title="en/Thunderbird/Autoconfiguration/FileFormat/HowTo">How to create a configuration file</a> and <a href="/en/Thunderbird/Autoconfiguration/FileFormat/Definition" title="en/Thunderbird/Autoconfiguration/FileFormat/Definition">defined</a> on the sub-pages.</p>
+
+<p>{{ languages( { "ja": "ja/Thunderbird/Autoconfiguration" } ) }}</p>
diff --git a/files/de/mozilla/thunderbird/index.html b/files/de/mozilla/thunderbird/index.html
new file mode 100644
index 0000000000..7bf0a47087
--- /dev/null
+++ b/files/de/mozilla/thunderbird/index.html
@@ -0,0 +1,75 @@
+---
+title: Thunderbird
+slug: Mozilla/Thunderbird
+translation_of: Mozilla/Thunderbird
+---
+<p><strong>Thunderbird</strong> ist Mozillas Mail- und Nachrichtenprogramm. Diese Seiten dokumentieren Thunderbird und bieten außerdem Links zu Dokumentationen über das <a href="/en-US/docs/tag/MailNews" title="tag/MailNews">MailNews-Backend</a>, welches in weiteren Projekten wie <a href="http://wiki.mozilla.org/Penelope">Eudora/Penelope</a>, <a href="http://www.seamonkey-project.org/">Seamonkey</a> und <a href="http://nkreeger.com/correo/">Correo</a> genutzt wird.</p>
+<p>Thunderbird ist das Geschwisterkind von Firefox und auf der gleichen technischen Platform aufgebaut wie der Web-Browser. Nach vielen Jahren der Entwicklung ist Thunderbird einer der meist genutzen, quelloffenen Mail-Clients und wird von Millionen von Menschen weltweilt genutzt, um alle ihre Mail-Accounts, Newsgroups und Nachrichtenfeeds in einer bekannten, hochproduktiven Umgebung zusammenzubringen. (Von Anfang 2007 bis Anfang 2011 wurde Thunderbird von <a class="link-https" href="https://en.wikipedia.org/wiki/Mozilla_Messaging" title="https://en.wikipedia.org/wiki/Mozilla_Messaging">Mozilla Messaging</a> entwickelt, einer Tochtergesellschaft von Mozilla.)</p>
+<table class="topicpage-table">
+  <tbody>
+    <tr>
+      <td>
+        <h2 class="Documentation" id="Documentation" name="Documentation">Dokumentation</h2>
+        <dl>
+          <dt>
+            <a href="https://developer.mozilla.org/en-US/docs/Simple_Thunderbird_build" title="Simple Thunderbird build">Thunderbird erstellen</a></dt>
+          <dd>
+            Informationen über das Erstellen von Thunderbird-Builds mit dem <a href="/en-US/docs/comm-central" title="comm-central">comm-central</a> Repository. Es gibt außerdem Infos darüber, <a href="/en-US/docs/How_comm-central%27s_build_system_works" title="How_comm-central's_build_system_works"> wie comm-central arbeitet,</a> wie der <a href="/en-US/docs/Mailnews_and_Mail_code_review_requirements" title="Mailnews and Mail code review requirements">Bewertungsprozess läuft </a> und wie der <a href="/en-US/docs/Using_the_Mozilla_symbol_server" title="Using the Mozilla symbol server">Mozilla Symbol-Server</a> Hilfe zum Debuggen anbietet.</dd>
+          <dt>
+            <a href="/en-US/docs/MailNews_Protocols" title="MailNews_Protocols">MailNews Protokolle</a></dt>
+          <dd>
+            Eine - eher ungenaue - Dokumentation über Mailprotokolle...</dd>
+          <dt>
+            <a href="/en-US/docs/DB_Views_%28message_lists%29" title="DB_Views_(message_lists)">Datenbankzugriffe</a></dt>
+          <dd>
+            Informationen über das Backend von {{ Interface("nsIMsgDBView") }} und verwandten Schnittstellen...</dd>
+          <dt>
+            <a href="/en-US/docs/Thunderbird/Thunderbird_API_documentation" title="Thunderbird API documentation">Thunderbird API-Dokumentation</a></dt>
+          <dd>
+            Die Dokumentation über Thunderbirds <span class="st">Programmierschnittstellen (APIs)</span></dd>
+          <dt>
+            <a href="/en-US/docs/Extensions/Thunderbird" title="Extensions/Thunderbird/">Dokumentationen von Erweiterungen</a></dt>
+          <dd>
+            Einführungen und Tipps zum Erstellen von Erweiterungen für Thunderbird<a href="/en-US/docs/Thunderbird/Thunderbird_Automated_Testing" title="Thunderbird Automated Testing"> </a></dd>
+          <dt>
+            <a href="/en-US/docs/Thunderbird/Thunderbird_Automated_Testing" title="Thunderbird Automated Testing">Automatisiertes Testen</a></dt>
+          <dd>
+            Details über automatisiertes Testen von Thunderbird</dd>
+          <dt>
+            <a href="/en-US/docs/Thunderbird/Thunderbird_in_the_Enterprise" title="Thunderbird in Firmen">Thunderbird in Firmen</a></dt>
+          <dd>
+            Hilfe beim Entwickeln von Thunderbird für große Organisationen</dd>
+        </dl>
+        <p><span class="alllinks"><a href="/en-US/docs/tag/Thunderbird" title="tag/Thunderbird">Alle anzeigen...</a></span></p>
+      </td>
+      <td>
+        <h2 class="Community" id="Community" name="Community">Community</h2>
+        <ul>
+          <li>Support wird bei <a href="http://getsatisfaction.com/mozilla_messaging" title="http://getsatisfaction.com/mozilla_messaging">getsatisfaction</a> gegeben.</li>
+          <li>Fragen zu Erweiterungen werden häufig in der dev-apps-thunderbird Gruppe besprochen: {{ DiscussionList("dev-apps-thunderbird", "mozilla.dev.apps.thunderbird") }}</li>
+          <li>Diskussionen über die Entwicklung von Thunderbird werden in der tb-planning Mailingliste geführt:
+            <ul>
+              <li><a class="link-https" href="https://mail.mozilla.org/listinfo/tb-planning" title="https://mail.mozilla.org/listinfo/tb-planning">Eintragen</a></li>
+              <li><a class="link-https" href="https://mail.mozilla.org/pipermail/tb-planning/" title="https://mail.mozilla.org/pipermail/tb-planning/">Archiv</a></li>
+            </ul>
+          </li>
+          <li><a href="http://forums.mozillazine.org/viewforum.php?f=50">Das Mozillazine Forum</a></li>
+          <li><a href="http://www.mozillamessaging.com/">Die Website von Mozilla Messaging </a></li>
+          <li><a class="link-irc" href="irc://irc.mozilla.org/thunderbird">#thunderbird bei irc.mozilla.org</a> (für Benutzer)</li>
+          <li><a class="link-irc" href="irc://irc.mozilla.org/maildev">#maildev bei irc.mozilla.org</a> (für Entwickler)</li>
+          <li>Eine Liste mit allen <a href="http://wiki.mozilla.org/Thunderbird/CommunicationChannels" title="Thunderbird communication channels">Kommunikationskanälen von Thunderbird</a></li>
+        </ul>
+        <h2 class="Tools" id="Tools" name="Tools">Tools</h2>
+        <ul>
+          <li><a href="http://ted.mielczarek.org/code/mozilla/extensiondev/">Erweiterungen für Entwickler</a></li>
+          <li><a href="/en-US/docs/DOM_Inspector" title="DOM_Inspector">DOM Inspector</a></li>
+        </ul>
+        <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related Topics</h2>
+        <ul>
+          <li><a href="/en-US/docs/Extensions" title="Extensions">Erweiterungen</a></li>
+        </ul>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<p> </p>
diff --git a/files/de/mozilla/thunderbird/thunderbird_extensions/building_a_thunderbird_extension/index.html b/files/de/mozilla/thunderbird/thunderbird_extensions/building_a_thunderbird_extension/index.html
new file mode 100644
index 0000000000..d6209dea6a
--- /dev/null
+++ b/files/de/mozilla/thunderbird/thunderbird_extensions/building_a_thunderbird_extension/index.html
@@ -0,0 +1,57 @@
+---
+title: 'Eine Thunderbird-Erweiterung programmieren 1: Einleitung'
+slug: Mozilla/Thunderbird/Thunderbird_extensions/Building_a_Thunderbird_extension
+tags:
+  - Addons
+  - Erweiterungen
+  - thunderbird
+translation_of: Mozilla/Thunderbird/Thunderbird_extensions/Building_a_Thunderbird_extension
+---
+<p>{{AddonSidebar}}</p>
+
+<p>Thunderbird ist eine von der <a href="https://www.thunderbird.net/en-US/">community gemanagete Open-Source Emailanwendung</a>. Sie verwendet viele der Technologien, die auch Mozilla Firefox verwendet, einschließlich  <a class="internal" href="/en/JavaScript" title="en/JavaScript">JavaScript</a>, der <a class="internal" href="/en/Gecko" title="en/Gecko">Gecko</a> Layout Engine, der <a class="internal" href="/en/XUL" title="en/XUL">XUL</a> XML User Interface Language und dem <a class="internal" href="/en/XPCOM" title="en/XPCOM">XPCOM</a> <span class="tlid-translation translation"><span title="">plattformübergreifenden Komponentenobjektmodell</span></span> . Ähnlich wie bei Firefox kann die Funktionalität von Thunderbird durch <a class="external" href="https://addons.mozilla.org/thunderbird/" title="http://addons.mozilla.org/en-US/thunderbird/">Erweiterungen</a> erweitert und angepasst werden.</p>
+
+<p><u><strong>Hinweis: Diese Dokumentationsserie ist noch nicht für die Firefox Version 60 aktualisiert.</strong></u>  <strong>Thunderbird 60, das im Sommer 2018 veröffentlicht wurde, führt Veränderungen bei Erweiterung ein, die im <a href="https://wiki.mozilla.org/Thunderbird/Add-ons_Guide_57">Thunderbird 57-60 add-ons guide</a> dokumentiert sind.</strong></p>
+
+<p>Dieses Tutorial dient der Einführung in die Komponenten einer Thunderbird-Erweiterung und es wird gezeigt, wie man seine eigene Erweiterung entwickelt. Das Tutorial setzt sich aus folgenden Seiten zusammen:</p>
+
+<ol>
+ <li>Einleitung (Diese Seite)</li>
+ <li><a class="internal" href="/en/Extensions/Thunderbird/Building_a_Thunderbird_extension_2:_extension_filesystem" title="en/Extensions/Thunderbird/Building a Thunderbird extension 2: extension filesystem">Das Erweiterungsdateisystem</a> (das lokale System vorbereiten und aufsetzen)</li>
+ <li><a class="internal" href="/en/Extensions/Thunderbird/Building_a_Thunderbird_extension_3:_install_manifest" title="en/Extensions/Thunderbird/Building a Thunderbird extension 3: install manifest">Installation des manifests</a> (Die <code>install.rdf</code> Datei. Sie beinhaltet die Metainformationen der Erweiterung)</li>
+ <li><a class="internal" href="/en/Extensions/Thunderbird/Building_a_Thunderbird_extension_4:_chrome_manifest" title="en/Extensions/Thunderbird/Building a Thunderbird extension 4: chrome manifest">Chrome Manifest</a> (Eine Liste von Packages und Overlays)</li>
+ <li><a class="internal" href="/en/Extensions/Thunderbird/Building_a_Thunderbird_extension_5:_XUL" title="en/Extensions/Thunderbird/Building a Thunderbird extension 5: XUL">XUL</a> (Die XML User Interface Language, die eingesetzt wird, um die Benutzeroberfläche von Thunderbird zu verändern)</li>
+ <li><a href="/en/Extensions/Thunderbird/Building_a_Thunderbird_extension_6:_Adding_Javascript" title="en/Extensions/Thunderbird/Building a Thunderbird extension 6: Adding Javascript">Hinzufügen von JavaScript</a> (beschreibt wie man seiner Thunderbird-Erweiterung simplen JavaScriptcode hinzufügen kann)</li>
+ <li><a class="internal" href="/en/Extensions/Thunderbird/Building_a_Thunderbird_extension_7:_Installation" title="en/Extensions/Thunderbird/Building a Thunderbird extension 7: Installation">Lokale Installation</a> (Aktivieren der Erweiterung in der lokalen Thunderbirdinstanz)</li>
+ <li><a class="internal" href="/en/Extensions/Thunderbird/Building_a_Thunderbird_extension_8:_packaging" title="en/Extensions/Thunderbird/Building a Thunderbird extension 8: packaging">Packaging</a> (Erstellen eines <span class="tlid-translation translation"><span title="">Distributionspakets</span></span>, das die Erweiterung beinhaltet)</li>
+ <li><a class="internal" href="/en/Extensions/Thunderbird/Building_a_Thunderbird_extension_9:_distributing" title="en/Extensions/Thunderbird/Building a Thunderbird extension 9: distributing">Veröffentlichung</a> (auf der eigenen Website oder auf <a class="external" href="https://addons.mozilla.org/" rel="external nofollow" title="http://addons.mozilla.org/">https://addons.mozilla.org/</a>)</li>
+</ol>
+
+<p>Dieses Tutorial ist kompatibel mit den Thunderbirdversionen 2, 3 und 5. Alle Thunderbird Builds sind auf dieser F<a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/thunderbird/" title="http://ftp.mozilla.org/pub/mozilla.org/thunderbird/">TP-Seite</a> verfügbar.</p>
+
+<h2 id="Verweise_und_Ressourcen">Verweise und Ressourcen</h2>
+
+<h3 id="Tools_und_Hilfserweiterungen">Tools und Hilfserweiterungen</h3>
+
+<p>Es gibt viele Tools, die dabei helfen Thunderbird-Erweiterungen zu entwickeln. Das Mindeste, was benötigt wird:</p>
+
+<ul>
+ <li><a class="external" href="http://en.wikipedia.org/wiki/List_of_text_editors" title="http://en.wikipedia.org/wiki/List_of_text_editors">Texteditor</a>: Ein beliebiger Editor, der in der Lage ist reinen Text zu schreiben, reicht bereits aus, um eine Erweiterung zu entwickeln. Die meisten Entwickler benutzen jedoch ein Programm, das dafür ausgelegt ist, Code zu entwickeln (auch als Integrated Development Environment [IDE] bezeichnet). Solche IDEs bieten zusätzliche Features wie Syntax-highlighting und Code-Färbung, Einrückung, Autovervollständigung usw., an.</li>
+ <li><a class="external" href="http://en.wikipedia.org/wiki/Comparison_of_file_archivers" title="http://en.wikipedia.org/wiki/Comparison_of_file_archivers">Archivierungsprogramme</a>: Irgendein Programm, das in der Lage ist, Archivdateien zu erzeugen.</li>
+</ul>
+
+<p>Darüber hinaus gibt es eine große Zahl von Erweiterungen und Anwendungen, die nützlich sind zum Testen und Debuggen von Thunderbird-Erweiterungen, wie z. B. JavaScript-Konsolen und XPCOM Inspektoren. Diese werden auf der Seite "<a class="internal" href="/en/Setting_up_extension_development_environment" title="en/Setting up extension development environment">Aufsetzen einer Erweiterungs-Entwicklungsumgebung</a>" beschrieben.</p>
+
+<h3 id="Dokumentation">Dokumentation</h3>
+
+<ul>
+ <li><a class="internal" href="/en/Extensions/Thunderbird" title="en/Extensions/Thunderbird">Thunderbird extensions (Dokumentationsübersicht)</a></li>
+ <li><a class="internal" href="/En/Firefox_addons_developer_guide" title="En/Firefox addons developer guide">Firefox addons developer guide</a> (Viele Inhalte sind auch anwendbar für Thunderbird)</li>
+ <li><a class="external" href="https://dxr.mozilla.org/comm-central/source/" title="http://mxr.mozilla.org/comm-central/">Mozilla cross-reference</a> Quelltext-Browser ("comm-central" beinhaltet das Thunderbird Coderepository)</li>
+</ul>
+
+<h3 id="Community">Community</h3>
+
+<p>Die Thunderbird-Development-Community hat eine <a class="external" href="http://groups.google.com/group/mozilla.dev.apps.thunderbird/topics?lnk" title="http://groups.google.com/group/mozilla.dev.apps.thunderbird/topics?lnk">Mailing-Liste mit einem umfangreichen und durchsuchbaren Archiv</a>. Es lässt sich auch mit der Community sprechen über den <a class="link-irc" href="irc://moznet/#maildev" title="irc://moznet/#maildev">#maildev IRC channel</a>.</p>
+
+<p>{{ Next("Mozilla/Thunderbird/Thunderbird_extensions/Eine_Thunderbird-Erweiterung_programmieren_2:_Erweiterungs-Dateisystem") }}</p>
diff --git a/files/de/mozilla/thunderbird/thunderbird_extensions/building_a_thunderbird_extension_3_colon__install_manifest/index.html b/files/de/mozilla/thunderbird/thunderbird_extensions/building_a_thunderbird_extension_3_colon__install_manifest/index.html
new file mode 100644
index 0000000000..69c95d4d01
--- /dev/null
+++ b/files/de/mozilla/thunderbird/thunderbird_extensions/building_a_thunderbird_extension_3_colon__install_manifest/index.html
@@ -0,0 +1,61 @@
+---
+title: 'Eine Thunderbird-Erweiterung programmieren 3: Manifest installieren'
+slug: >-
+  Mozilla/Thunderbird/Thunderbird_extensions/Building_a_Thunderbird_extension_3:_install_manifest
+tags:
+  - Addons
+  - Erweiterungen
+  - thunderbird
+translation_of: >-
+  Mozilla/Thunderbird/Thunderbird_extensions/Building_a_Thunderbird_extension_3:_install_manifest
+---
+<p>{{AddonSidebar}}</p>
+
+<p>Die <code>install.rdf</code> Datei ist eine XML-Datei<span class="tlid-translation translation"><span title="">, die allgemeine Informationen zur Erweiterung enthält.</span></span> <span style="line-height: 1.5;"> </span></p>
+
+<p>Öffne die Datei namens <code>install.rdf</code>, <span class="tlid-translation translation"><span title="">die du oben in der Erweiterungsverzeichnishierarchie erstellt haben, und füge den folgenden Text in die Datei ein:</span></span></p>
+
+<pre class="brush: xml">&lt;?xml version="1.0"?&gt;
+
+&lt;RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:em="http://www.mozilla.org/2004/em-rdf#"&gt;
+
+  &lt;Description about="urn:mozilla:install-manifest"&gt;
+    &lt;em:id&gt;myfirstext@jen.zed&lt;/em:id&gt;
+    &lt;em:name&gt;My First Extension&lt;/em:name&gt;
+    &lt;em:version&gt;1.0&lt;/em:version&gt;
+    &lt;em:creator&gt;jenzed&lt;/em:creator&gt;
+
+    &lt;em:targetApplication&gt;
+      &lt;Description&gt;
+        &lt;em:id&gt;{3550f703-e582-4d05-9a08-453d09bdfdc6}&lt;/em:id&gt;
+        &lt;em:minVersion&gt;1.5&lt;/em:minVersion&gt;
+        &lt;em:maxVersion&gt;5.0.*&lt;/em:maxVersion&gt;
+      &lt;/Description&gt;
+    &lt;/em:targetApplication&gt;
+
+  &lt;/Description&gt;
+&lt;/RDF&gt;
+</pre>
+
+<p> Die folgende Elemente (Fett markiert) sollten für deine Erweiterung verändert werden:</p>
+
+<ul>
+ <li><code><strong>&lt;em:id&gt;<a class="link-mailto" href="mailto:myfirstext@jen.zed" rel="freelink">myfirstext@jen.zed</a>&lt;/em:id&gt;</strong></code>: Das ist die ID der Erweiterung. <span class="tlid-translation translation"><span title="">Der erste Teil ist der Kurzname der Erweiterung und muss in Kleinbuchstaben angegeben werden</span></span>; <span class="tlid-translation translation"><span title="">Der letzte Teil ist ein aus zwei Teilen bestehender, durch Punkte begrenzter Wert, z. B. Dein Vor- und Nachname oder die Top-Level-Domain deiner Website</span></span>. <span class="tlid-translation translation"><span title="">Dieser Wert hat zwar das E-Mail-Adressformat, ist jedoch <em>keine</em> E-Mail-Adresse</span></span>. <span class="tlid-translation translation"><span title="">Es sollte jedoch ein einzigartiger Wert sein, damit er nicht mit anderen Erweiterungen kollidiert.</span></span></li>
+ <li><code><strong>&lt;em:name&gt;My First Extension&lt;/em:name&gt;</strong></code>: <span class="tlid-translation translation"><span title="">Der Erweiterungsname wird im Erweiterungs-Manager von Thunderbird angezeigt.</span></span></li>
+ <li><code><strong>&lt;em:version&gt;1.0&lt;/em:version&gt;</strong></code>: <span class="tlid-translation translation"><span title="">Dies ist die Versionsnummer deiner Erweiterung</span></span>. <span class="tlid-translation translation"><span title="">Sie muss jedes Mal aktualisiert werden, wenn du eine neue Version deiner Erweiterung veröffentlichst</span></span>. <span class="tlid-translation translation"><span title="">Es ist <em>nicht </em>die Thunderbird-Versionsnummer (die in den Feldern <code>minVersion </code>und <code>maxVersion </code>gespeichert ist).</span></span></li>
+ <li><code><strong>&lt;em:creator&gt;jenzed&lt;/em:creator&gt;</strong></code>: <span class="tlid-translation translation"><span title="">Dieser optionale Wert wird zum Speichern des Namens des Erweiterungsautors verwendet.</span></span></li>
+ <li><code><strong>&lt;em:id&gt;{3550f703-e582-4d05-9a08-453d09bdfdc6}&lt;/em:id&gt;</strong></code>: <span class="tlid-translation translation"><span title="">Dieses Element enthält die Versions-ID der Anwendung, für die diese Erweiterung entwickelt wurde</span></span>.  <span class="tlid-translation translation"><span title="">Es wird von Mozilla definiert.</span></span>
+  <div class="text-wrap tlid-copy-target">
+  <div class="tlid-transliteration-content transliteration-content full"><span class="tlid-translation translation"><span title="">Eine Liste der gültigen Anwendungs-IDs findest du </span></span><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/pages/appversions" title="https://addons.mozilla.org/en-US/firefox/pages/appversions">hier</a>. <span class="tlid-translation translation"><span title="">Normalerweise ändert sich die ID nicht und ist auch für verschiedene Thunderbird-Versionen immer gleich.</span></span></div>
+  </div>
+ </li>
+ <li><strong><code>&lt;em:minVersion&gt;1.5&lt;/em:minVersion&gt;</code></strong>: <span class="tlid-translation translation"><span title="">Dieses Element gibt die früheste Version von Thunderbird an, für die die Erweiterung funktioniert.</span></span> <span class="tlid-translation translation"><span title="">Verwende keine Platzhalter (wie <em><strong>*</strong></em>).</span></span> <span class="tlid-translation translation"><span title="">Eine Liste der unterstützten Versionsnummern und -formate findest du unter </span></span><a class="external" href="http://addons.mozilla.org/en-US/firefox/pages/appversions" title="http://addons.mozilla.org/en-US/firefox/pages/appversions">Gültige Anwendungsversionen</a>.</li>
+ <li><strong><code>&lt;em:maxVersion&gt;5.0.*&lt;/em:maxVersion&gt;</code></strong>: <span class="tlid-translation translation"><span title="">Dieses Element gibt die neueste Version von Thunderbird an, für die die Erweiterung funktioniert</span></span>. <span class="tlid-translation translation"><span title="">Dies kann nicht höher sein als die aktuell verfügbare Version.</span></span> <span class="tlid-translation translation"><span title="">Hier sind Platzhalter (wie <strong><em>*</em></strong>) erlaubt. </span></span><span class="tlid-translation translation"><span title="">"<em>5.0. *</em>" Zeigt an, dass die Erweiterung mit Thunderbird 5.0 und allen nachfolgenden 5.0.x-Versionen funktioniert.</span></span> <span class="tlid-translation translation"><span title="">Eine Liste der unterstützten Versionsnummern und -formate findest du unter </span></span><a class="external" href="http://addons.mozilla.org/en-US/firefox/pages/appversions" title="http://addons.mozilla.org/en-US/firefox/pages/appversions">Gültige Anwendungsversionen</a>.</li>
+</ul>
+
+<p><span class="tlid-translation translation"><span title="">Es gibt weitere optionale Elemente, die in <code>install.rdf</code> angegeben werden können.</span></span> <span class="tlid-translation translation"><span title="">Diese werden auf der Seite </span></span><a class="internal" href="/en/Install_Manifests" title="en/Install Manifests">Installationsmanifeste</a> <span class="tlid-translation translation"><span title="">beschrieben.</span></span> <span class="tlid-translation translation"><span title="">Beachte, dass Elemente in beliebiger Reihenfolge angegeben werden können, solange sie dem Knoten <code>&lt;Description&gt;</code> untergeordnet sind.</span></span></p>
+
+<p>{{ Previous("Mozilla/Thunderbird/Thunderbird_extensions/Eine_Thunderbird-Erweiterung_programmieren_2:_Erweiterungs-Dateisystem") }}</p>
+
+<p>{{ Next("Mozilla/Thunderbird/Thunderbird_extensions/Eine_Thunderbird-Erweiterung_programmieren_4:_Chrome_Manifest") }}</p>
diff --git a/files/de/mozilla/thunderbird/thunderbird_extensions/building_a_thunderbird_extension_7_colon__installation/index.html b/files/de/mozilla/thunderbird/thunderbird_extensions/building_a_thunderbird_extension_7_colon__installation/index.html
new file mode 100644
index 0000000000..4448e0b311
--- /dev/null
+++ b/files/de/mozilla/thunderbird/thunderbird_extensions/building_a_thunderbird_extension_7_colon__installation/index.html
@@ -0,0 +1,58 @@
+---
+title: 'Eine Thunderbird-Erweiterung programmieren 7: Installation'
+slug: >-
+  Mozilla/Thunderbird/Thunderbird_extensions/Building_a_Thunderbird_extension_7:_Installation
+translation_of: >-
+  Mozilla/Thunderbird/Thunderbird_extensions/Building_a_Thunderbird_extension_7:_Installation
+---
+<p>{{AddonSidebar}}</p>
+
+<p>Während du die Erweiterung entwickelst, gibt es zwei Möglichkeiten, wie du Thunderbird die Erweiterung laden lässt, um sie zu testen. Du kannst den Ordner mit den Erweiterungsdateien entweder direkt im Erweiterungsordner von Thunderbird ablegen oder eine Datei dort ablegen, die Thunderbird mitteilt, wo sich deine Erweiterung befindet. (In Schritt 8 erfährst Du, wie Du eine .xpi-Datei für die Veröffentlichung und Installation erstellst.)</p>
+
+<p><span class="tlid-translation translation"><span title="">Um den Erweiterungsordner von Thunderbird zu finden, navigiere zum Profilverzeichnis von Thunderbird und öffne den Ordner extensions /.</span></span> <span class="tlid-translation translation"><span title="">Je nach Betriebssystem befindet es sich an einem der folgenden Speicherorte:</span></span></p>
+
+<ul>
+ <li><span style="font-family: helvetica;"><strong>Windows:</strong></span> <code><span class="nowiki">%APPDATA%\Thunderbird\Profiles\&lt;Profile Name&gt;\extensions\</span></code></li>
+ <li><span style="font-family: helvetica;"><strong>Linux:</strong></span> <code><span class="nowiki">~/.thunderbird/&lt;Profile Name&gt;/extensions/</span></code></li>
+ <li><span style="font-family: helvetica;"><strong>MAC:</strong></span> <code><span class="nowiki">~/Library/Thunderbird/Profiles/&lt;Profile Name&gt;/extensions/</span></code></li>
+</ul>
+
+<div class="note">Um sicherzustellen, dass deine aktuellen E-Mails und Einstellungen während des Tests nicht durcheinander geraten, ist es sicherer, bei der Entwicklung von Erweiterungen ein Testprofil anstelle deines Standardprofils zu verwenden. <span class="tlid-translation translation"><span title="">In diesem <a href="http://mzl.la/1ml3Fmj">Artikel</a> der Mozilla-Knowledgedatenbank erfahren Sie, wie Sie mehrere Profile einrichten.</span></span></div>
+
+<div class="note"><span class="tlid-translation translation"><span title="">Wenn das Verzeichnis extensions/ noch nicht existiert, musst du es erstellen.</span></span></div>
+
+<p><strong><span class="tlid-translation translation"><span title="">Verwenden einer Textdatei zum Verweisen auf deine Erweiterungsdateien (empfohlen):</span></span></strong></p>
+
+<ol>
+ <li>Wenn Du deine Erweiterung in einem anderen Ordner entwickelst (z.B. "...\Dokumente\Code\Thunderbird Erweiterungen\<strong>myfirstext@jen.zed</strong>\"), kannst Du eine Textdatei im Ordner extensions/ erstellen, die auf deine Erweiterung verweist. <span class="tlid-translation translation"><span title="">Der Name der Textdatei muss genau dem Wert von <code>&lt;em:id&gt;</code> aus <strong>install.rdf </strong>entsprechen.</span></span> <span class="tlid-translation translation"><span title="">In unserem Fall erhält die Datei den Namen <code><strong>myfirstext@jen.zed</strong></code>.</span></span></li>
+ <li><span class="tlid-translation translation"><span title="">Die Datei muss eine einzige Zeile mit dem absoluten Pfad der Erweiterung enthalten.</span></span>
+  <div class="text-wrap tlid-copy-target">
+  <div class="result-shield-container tlid-copy-target"><span class="tlid-translation translation"><span title="">Der Ordner, auf den verwiesen wird, muss mit dem Wert von<code> &lt;em: id&gt;</code> von <strong>install.rdf</strong> <strong>identisch </strong>sein.</span></span></div>
+
+  <div class="result-shield-container tlid-copy-target"><span class="tlid-translation translation"><span title="">.</span></span><code>C:\Users\&lt;Nutzername&gt;\Documents\Code\Thunderbird Erweiterungen\<strong>myfirsttext@jen.zed</strong>\</code></div>
+  </div>
+ </li>
+</ol>
+
+<p><strong><span class="tlid-translation translation"><span title="">Die Erweiterungsdatei direkt in den Erweiterungsordner einfügen (Alternativ):</span></span></strong></p>
+
+<ol>
+ <li>Nachdem du den Ordner extensions/ geöffnet hast, erstelle einen Unterordner mit dem Namen deiner Erweiterung. Dieser Name muss genau der ID des Feldes <code>&lt;em:id&gt;</code> in der Datei <strong>install.rdf </strong>entsprechen.<span class="tlid-translation translation"><span title=""> In unserem Fall heißt der Ordner: <code>myfirstext@jen.zed/</code>.</span></span> <span class="tlid-translation translation"><span title="">Je nach Format Ihrer ID kann der Ordnername auch eine </span></span> <a href="/en/Generating_GUIDs" title="en/Generating GUIDs">GUID</a> <span class="tlid-translation translation"><span title=""> sein.</span></span></li>
+</ol>
+
+<p><span class="tlid-translation translation"><span title="">Jetzt können Sie Thunderbird starten.</span> <span title="">Thunderbird wird die Erweiterung erkennen und versuchen, sie zu laden.</span></span></p>
+
+<p>Informationen zum Einrichten eines Entwicklerprofils und zum Aktivieren von Debugging-Funktionen findest Du unter <a href="/en/Setting_up_extension_development_environment" title="en/Setting_up_extension_development_environment">Setting up extension development environment</a>.</p>
+
+<p>Du kannst jetzt zurückgehen und Änderungen an der <code>.xul</code>-Datei vornehmen. Wenn Du Thunderbird schließst und neu startest, sollten sie angezeigt werden.</p>
+
+<ul>
+</ul>
+
+<div class="note">
+<div class="text-wrap tlid-copy-target">
+<div class="tlid-transliteration-content transliteration-content full"><span class="tlid-translation translation"><span title="">Es besteht auch die Möglichkeit, Thunderbird mit dem Firefox-Debugger zu Remote-debuggen.</span></span> In diesem <a href="https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Thunderbird">Artikel</a> der Mozilla-Knowledgedatenbank erfährst du, wie du das Remote-Debugging einrichtest.</div>
+</div>
+</div>
+
+<p>{{ PreviousNext("Mozilla/Thunderbird/Thunderbird_extensions/Eine_Thunderbird-Erweiterung_programmieren_6:_Javascript_hinzufuegen", "Mozilla/Thunderbird/Thunderbird_extensions/Building_a_Thunderbird_extension_8:_packaging") }}</p>
diff --git a/files/de/mozilla/thunderbird/thunderbird_extensions/building_a_thunderbird_extension_8_colon__packaging/index.html b/files/de/mozilla/thunderbird/thunderbird_extensions/building_a_thunderbird_extension_8_colon__packaging/index.html
new file mode 100644
index 0000000000..d33997f94e
--- /dev/null
+++ b/files/de/mozilla/thunderbird/thunderbird_extensions/building_a_thunderbird_extension_8_colon__packaging/index.html
@@ -0,0 +1,24 @@
+---
+title: 'Eine Thunderbird-Erweiterung programmieren 8: Packaging'
+slug: >-
+  Mozilla/Thunderbird/Thunderbird_extensions/Building_a_Thunderbird_extension_8:_packaging
+translation_of: >-
+  Mozilla/Thunderbird/Thunderbird_extensions/Building_a_Thunderbird_extension_8:_packaging
+---
+<p>{{AddonSidebar}}</p>
+
+<p><span class="tlid-translation translation"><span title="">Wenn Du mit den Funktionen deiner Erweiterung zufrieden bist, packe sie für die Bereitstellung und Installation.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Zipe den Inhalt des Erweiterungsordners (nicht den Erweiterungsordner selbst) und benenne die ZIP-Datei um, so dass sie die Endung .xpi hat.</span></span> <span class="tlid-translation translation"><span title="">In Windows 7 wähle alle Dateien und Unterordner im Erweiterungsordner aus, klicke mit der rechten Maustaste und wähle "Senden an -&gt; Komprimierter (gezippter) Ordner". E</span></span><span class="tlid-translation translation"><span title="">ine ZIP-Datei wird erstellt.</span> <span title="">Umbenennen und fertig!</span></span></p>
+
+<p>Unter Mac OS X kannst Du mit der rechten Maustaste auf den Inhalt des Erweiterungsordners klicken und "Archiv erstellen ..." wählen, um die ZIP-Datei zu erstellen. Seit Mac OS X zum Verfolgen von Dateimetadaten ausgeblendete Dateien in Ordner hinzufügte, solltest Du stattdessen das Terminal verwenden, die versteckten Dateien löschen (deren Namen mit einem Punkt beginnen) und dann den Befehl zip in der Befehlszeile zum Erstellen der Zip-Datei verwenden. <span class="tlid-translation translation"><span title="">Die Dateien haben normalerweise den Namen .DS_Store.</span></span></p>
+
+<p>Unter Linux solltest Du ebenfalls das Befehlszeilen-Zip-Tool verwenden.</p>
+
+<pre class="eval"> cd ~/Erweiterungen/Meine_Erweiterungen
+ zip -r ../sample.xpi *
+</pre>
+
+<p>Wenn er in das Verzeichnis (Benutzerprofil)/extension eingefügt wird, öffnet Thunderbird die xpi-Datei, überprüft die ID in der Datei <code>install.rdf</code> und erstellt dieses Verzeichnis für Ihr Package. Es wird dann in dieses Verzeichnis kopiert und die Dateien werden entpackt, wodurch eine Kopie deiner <code>~/Erweiterung/Meine_Erweiterungen</code>-Verzeichnisstruktur und -Dateien erstellt wird.</p>
+
+<p>{{ PreviousNext("Mozilla/Thunderbird/Thunderbird_extensions/Building_a_Thunderbird_extension_7:_Installation", "Mozilla/Thunderbird/Thunderbird_extensions/Building_a_Thunderbird_extension_9:_distributing") }}</p>
diff --git a/files/de/mozilla/thunderbird/thunderbird_extensions/building_a_thunderbird_extension_9_colon__distributing/index.html b/files/de/mozilla/thunderbird/thunderbird_extensions/building_a_thunderbird_extension_9_colon__distributing/index.html
new file mode 100644
index 0000000000..8177b45f65
--- /dev/null
+++ b/files/de/mozilla/thunderbird/thunderbird_extensions/building_a_thunderbird_extension_9_colon__distributing/index.html
@@ -0,0 +1,24 @@
+---
+title: 'Eine Thunderbird-Erweiterung programmieren 9: Verbreitung'
+slug: >-
+  Mozilla/Thunderbird/Thunderbird_extensions/Building_a_Thunderbird_extension_9:_distributing
+translation_of: >-
+  Mozilla/Thunderbird/Thunderbird_extensions/Building_a_Thunderbird_extension_9:_distributing
+---
+<p>{{AddonSidebar}}</p>
+
+<h2 class="editable" id="Verwenden_von_addons.mozilla.org">Verwenden von addons.mozilla.org</h2>
+
+<p>Die Website <a href="http://addons.mozilla.org/en-US/thunderbird">addons.mozilla.org</a> ist eine Veröffentlichungssite, auf der Du deine Erweiterung kostenlos hosten kannst. Deine Erweiterung wird im Mirror-Netzwerk von Mozilla gehostet werden. Die Mozilla-Site bietet Benutzern eine einfachere Installation und stellt Benutzern deiner älteren Versionen automatisch neue Versionen zur Verfügung, wenn Du sie hochlädst. Darüber hinaus können Benutzer mit Mozilla Update deine Erweiterung kommentieren und Feedback geben.Es ist empfohlen, AMO zu verwenden.</p>
+
+<p>Besuche <a href="http://addons.mozilla.org/developers/">http://addons.mozilla.org/developers/</a>, um ein Konto zu erstellen und mit dem Veröffentlichen deiner Erweiterungen zu beginnen. Beachte, dass deine Erweiterung schneller genehmigt und häufiger heruntergeladen wird, wenn Du eine gute Beschreibung und Screenshots der Erweiterung in Aktion hast.</p>
+
+<h2 class="editable" id="Installation_von_einer_Webseite">Installation von einer Webseite</h2>
+
+<p>Es gibt verschiedene Möglichkeiten, Erweiterungen von Webseiten zu installieren, einschließlich der direkten Verknüpfung mit den XPI-Dateien und der Verwendung des InstallTrigger-Objekts. Erweiterungs- und Web-Autoren sollten die <a href="https://developer.mozilla.org/de/en/Installing_Extensions_and_Themes_From_Web_Pages">InstallTrigger-Methode</a> zum Installieren von XPIs verwenden, da sie den Benutzern die beste Benutzererfahrung bietet.</p>
+
+<h3 class="editable" id="Registrieren_von_Erweiterungen_in_der_Windows-Registry">Registrieren von Erweiterungen in der Windows-Registry</h3>
+
+<p>Unter Windows können der Registry Informationen zu Erweiterungen hinzugefügt werden. Die Erweiterungen werden beim nächsten Start der Anwendung automatisch abgerufen. Auf diese Weise können Anwendungsinstallationsprogramme Integrations-Hooks als Erweiterungen hinzufügen. Weitere Informationen finden Sie unter <a href="https://developer.mozilla.org/de/en/Adding_Extensions_using_the_Windows_Registry">Adding Extensions using the Windows Registry</a>.</p>
+
+<p>{{ Previous("Mozilla/Thunderbird/Thunderbird_extensions/Building_a_Thunderbird_extension_8:_packaging") }}</p>
diff --git a/files/de/mozilla/thunderbird/thunderbird_extensions/ein_thunderbird_addon_programmieren_5_colon__xul/index.html b/files/de/mozilla/thunderbird/thunderbird_extensions/ein_thunderbird_addon_programmieren_5_colon__xul/index.html
new file mode 100644
index 0000000000..4f227fe3d1
--- /dev/null
+++ b/files/de/mozilla/thunderbird/thunderbird_extensions/ein_thunderbird_addon_programmieren_5_colon__xul/index.html
@@ -0,0 +1,43 @@
+---
+title: 'Eine Thunderbird-Erweiterung programmieren 5: XUL'
+slug: >-
+  Mozilla/Thunderbird/Thunderbird_extensions/Ein_Thunderbird_Addon_programmieren_5:_XUL
+tags:
+  - Addons
+  - Erweiterung
+  - thunderbird
+translation_of: >-
+  Mozilla/Thunderbird/Thunderbird_extensions/Building_a_Thunderbird_extension_5:_XUL
+---
+<p>{{AddonSidebar}}</p>
+
+<p>Thunderbirds Nutzerinterface ist in<a href="/en/XUL" title="https://developer.mozilla.org/en/XUL"> XUL </a>und <a href="/en/JavaScript" title="https://developer.mozilla.org/en/JavaScript">JavaScript</a> geschrieben. XUL ist eine XML Art, die Nutzerinterfacewidgets wie Knöpfe, Menüs, Toolbars, Trees etc. bietet. Wir fügen Widgets hinzu, indem wir neue XUL DOM Elemente in das Programmfenster hinzufügen und sie mit Scripts und angehängten Event Handlern modifizieren. Während XUL die Elemente des Nutzerinterfaces bietet, sind die Aktionen in JavaScript geschrieben.</p>
+
+<p>Bei unserer erster Erweiterung fügen wir Text in die Thunderbird Statusbar ein. Die Statusbar ist ist in einer XUL Datei namens <code>messenger.xul</code> implementiert, die sich im <code>chrome/messenger/content/messenger</code>  Ordner innerhalb des <a href="/en/About_omni.jar" title="en/About omni.jar">omni.ja</a> Archives befindet. Um diese XUL Datei lesen zu können, nutze die <s><a class="link-https" href="https://addons.mozilla.org/en-US/thunderbird/addon/dom-inspector/" title="https://addons.mozilla.org/en-US/thunderbird/addon/dom-inspector/">DOM</a></s><a class="link-https" href="https://addons.mozilla.org/en-US/thunderbird/addon/dom-inspector/" title="https://addons.mozilla.org/en-US/thunderbird/addon/dom-inspector/"> </a><s><a class="link-https" href="https://addons.mozilla.org/en-US/thunderbird/addon/dom-inspector/" title="https://addons.mozilla.org/en-US/thunderbird/addon/dom-inspector/">Inspector</a></s> <s>Erweiterung</s> (Nicht mehr ünterstützt) oder schau in das <a href="/en/About_omni.jar" title="en/About omni.jar">omni.ja</a> Archiv, welches sich im Thunderbird Programmordner befindet. omni.ja kann ganz einfach durchsucht werden, indem man die Datei an einen anderen Speicherplatz kopiert und sie in omni.zip umbenennt. Solltest du mit einem Zip Manager Probleme haben (wie 7Zip), nutze einen anderen (wie WinRAR). In <code>messenger.xul</code> finden wir die Statusbar, welche ungefähr so ausschaut:</p>
+
+<pre class="brush: xml">&lt;statusbar id="status-bar" ...&gt;
+ ... &lt;statusbarpanel&gt;s ...
+&lt;/statusbar&gt;
+</pre>
+
+<p><span class="nowiki"><code>&lt;statusbar id="status-bar"&gt;</code></span> ist ein "Zusammenführungspunkt" für ein XUL Overlay. <a href="../../../../en/XUL_Overlays" rel="internal">XUL Overlays</a> sind eine Methode, andere UI Widgets zu einem XUL Dokument anzuhängen, sobald die Erweiterung startet. Ein XUL Overlay ist eine <code>.xul</code> Datei die XUL-Fragmente spezifiziet, um sie bei bestimmten Zussamenführungspunkten innerhalb eines <strong>"</strong>Haupt<strong>"-</strong>Dokuments" einzufügen. Diese Fragmente können Widgets zum Einfügen, Entfernen oder Bearbeiten spezifizieren. In diesem Beispiel fügst du eine Linie der Statusbar hinzu. Deshalb wird es <span class="tlid-translation translation"><span title="">zu einem Element mit der ID "Statusleiste".</span></span> Das zeigt, wie die Thunderbirdarchitektur Erweiterungen erlaubt, die Nutzererfahrung zu ändern, ohne dabei die Installationsdateien zu ändern. Das erlaubt auch Versionsunabhängigkeit zwischen Thunderbird und Thunderbird-Erweiterungen.</p>
+
+<p><strong>Beispiel XUL Overlay Dokument</strong></p>
+
+<p>Erstelle eine neue Datei namens <code><strong>myhelloworld.xul</strong></code> innerhalb des <code>content</code> Ordners, den du vorhin erstellt hast, mit folgendem Inhalt:</p>
+
+<pre class="brush: html">&lt;?xml version="1.0"?&gt;
+&lt;overlay id="sample"
+xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
+ &lt;script type="application/javascript" src="chrome://myfirstext/content/overlay.js"/&gt;&lt;!-- A reference to your JavaScript file --&gt;
+ &lt;statusbar id="status-bar"&gt;
+  &lt;statusbarpanel id="my-panel" label="Date"/&gt;
+ &lt;/statusbar&gt;
+&lt;/overlay&gt;
+</pre>
+
+<p>Das <span class="nowiki"><code>&lt;statusbar</code>&gt;</span> Widget names <code><strong>status-bar</strong></code> spezifiziert den Zusammenführungspunkt innerhalb des Programmfensters, das wir anhängen wollen. Wenn unsere Overlay Datei geparsed wird, nimmt die XUL Engine alle Unterelemente des &lt;statusbar&gt; Tags und führt die mit dem orginalen XUL Dokuments <span class="nowiki">&lt;statusbar&gt;</span> Tag zusammen. In dem Bespiel überhalb haben wir ein neues &lt;statusbarpanel&gt; Element definiert (Das als <strong><code>my-panel</code></strong> bezeichnet wird), das eine neue Instanz dieses Widgettyps erstellt und am Ende der Statusbar hinbaut. In Thunderbird erscheint es als Label auf der rechten Seite der Statusbar von Thunderbird und zeigt "Date" an.  Wir haben auch einen &lt;script&gt; Tag geschrieben, der eine Refezenz zur JavaScript Datei <strong><code>overlay.js</code></strong> beinhaltet. In der nächsten Sektion wirst du lernen, wie du JavaScript nutzt um dein Label so zu modifizieren, dass es das momentane Datum anzeigt.</p>
+
+<div class="note">Die <strong>overlay.js</strong> Datei wird in einer späteren Sektion erstellt. Deine Erweiterung wird auch ohne diese Datei funktionieren. Momentan kannst du diese Linie ignorieren, aber erinnere dich daran, dass das hier ist, wie du auf eine JavaScript Datei verweist.</div>
+
+<p>{{ PreviousNext("Mozilla/Thunderbird/Thunderbird_extensions/Eine_Thunderbird-Erweiterung_programmieren_4:_Chrome_Manifest", "Mozilla/Thunderbird/Thunderbird_extensions/Eine_Thunderbird-Erweiterung_programmieren_6:_Javascript_hinzufuegen") }}</p>
diff --git a/files/de/mozilla/thunderbird/thunderbird_extensions/eine_thunderbird-erweiterung_programmieren_2_colon__erweiterungs-dateisystem/index.html b/files/de/mozilla/thunderbird/thunderbird_extensions/eine_thunderbird-erweiterung_programmieren_2_colon__erweiterungs-dateisystem/index.html
new file mode 100644
index 0000000000..f023c7b8c8
--- /dev/null
+++ b/files/de/mozilla/thunderbird/thunderbird_extensions/eine_thunderbird-erweiterung_programmieren_2_colon__erweiterungs-dateisystem/index.html
@@ -0,0 +1,31 @@
+---
+title: 'Eine Thunderbird-Erweiterung programmieren 2: Erweiterungs-Dateisystem'
+slug: >-
+  Mozilla/Thunderbird/Thunderbird_extensions/Eine_Thunderbird-Erweiterung_programmieren_2:_Erweiterungs-Dateisystem
+translation_of: >-
+  Mozilla/Thunderbird/Thunderbird_extensions/Building_a_Thunderbird_extension_2:_extension_filesystem
+---
+<p>{{AddonSidebar}}</p>
+
+<p>Erweiterungen sind in Archiv-Dateien (Auch <a href="../../../../en/Bundles" rel="internal">Bundles</a> genannt) mit der <code>XPI</code> (<em> “zippy”</em> <em>ausgesprochen</em>)-Dateiendung gepackt und verteilt. Sie enthalten mindestens eine <strong>install.rdf</strong>, ein <strong>chrome.manifest</strong> und einen <em>"</em><strong>chrome/</strong> Ordner. Ein <strong>content/</strong> Ordner enthält manchmal die eigentlichen Kontentdateien. Diese Dateien enthalten den Code, der deine Erweiterung etwas machen lässt. Wenn dieses Tutorial fertig ist, wird unsere Erweiterung so ausschauen:</p>
+
+<pre class="eval">myfirstext.xpi:                                //Erstellt in Schritt 8
+              /install.rdf                     //Erstellt in Schritt 3
+              /chrome.manifest                 //Erstellt in Schritt 4
+              /chrome/
+              /content/
+              /content/myhelloworld.xul        //Erstellt in Schritt 5
+              /content/overlay.js              //Erstellt in Schritt 6
+              /chrome/locale/*                 //<span class="tlid-translation translation"><span title="">Erstellen einer Erweiterungs</span></span><a href="/en/Building_an_Extension#Localization" title="https://developer.mozilla.org/en/Building_an_Extension#Localization">lokalisierung</a>
+              /chrome/skin/
+              /defaults/preferences/           // <span class="tlid-translation translation"><span title="">Erstellen von Erweiterungs-Standarddateien</span></span>
+</pre>
+
+<p>Die folgende Tutorialseiten werden erklären, wie man jede dieser Dateien schreibt (Außer <strong>locale/</strong> und <strong>defaults/</strong>) und sie in eine XPI (zippy) Datei packt. Du kannst Informationen über die <strong>locale/</strong> und <strong>defaults/</strong> Ordner in der allgemeineren "<a href="/en/Building_an_Extension" title="en/Building an Extension"><strong>Building an Extension</strong></a>" Dokumentation.</p>
+
+<p>Um mit dem Tutorial zu starten, <span class="tlid-translation translation"><span title="">erstelle manuell die anfängliche Verzeichnisstruktur für die Erweiterung, wie sie oben in einem Ordner namens <code>myfirstext@jen.zed</code> dargestellt ist.</span></span> <span class="tlid-translation translation"><span title="">Dieses Verzeichnis kann an einem beliebigen Ort im Dateisystem erstellt werden.</span></span></p>
+
+<p><br>
+ {{ Previous("Mozilla/Thunderbird/Thunderbird_extensions/Building_a_Thunderbird_extension") }}</p>
+
+<p>{{ Next("Mozilla/Thunderbird/Thunderbird_extensions/Building_a_Thunderbird_extension_3:_install_manifest") }}</p>
diff --git a/files/de/mozilla/thunderbird/thunderbird_extensions/eine_thunderbird-erweiterung_programmieren_4_colon__chrome_manifest/index.html b/files/de/mozilla/thunderbird/thunderbird_extensions/eine_thunderbird-erweiterung_programmieren_4_colon__chrome_manifest/index.html
new file mode 100644
index 0000000000..639204a1ef
--- /dev/null
+++ b/files/de/mozilla/thunderbird/thunderbird_extensions/eine_thunderbird-erweiterung_programmieren_4_colon__chrome_manifest/index.html
@@ -0,0 +1,44 @@
+---
+title: 'Eine Thunderbird-Erweiterung programmieren 4: Chrome Manifest'
+slug: >-
+  Mozilla/Thunderbird/Thunderbird_extensions/Eine_Thunderbird-Erweiterung_programmieren_4:_Chrome_Manifest
+tags:
+  - Addons
+  - Extensions
+  - thunderbird
+translation_of: >-
+  Mozilla/Thunderbird/Thunderbird_extensions/Building_a_Thunderbird_extension_4:_chrome_manifest
+---
+<p>{{AddonSidebar}}</p>
+
+<p>Die Datei namens <code>chrome.manifest</code> <span class="tlid-translation translation"><span title="">teilt Thunderbird mit, welche Packages und Overlays von der Erweiterung bereitgestellt werden.</span></span> <span class="tlid-translation translation"><span title="">Öffne die von dir erstellte Datei <code>chrome.manifest</code> und füge diesen Code hinzu:</span></span></p>
+
+<pre class="eval">content     myfirstext    content/
+</pre>
+
+<ul>
+ <li><code><strong>content</strong></code> <span class="tlid-translation translation"><span title="">gibt die Art des Materials in der Verpackung an.</span></span></li>
+ <li><code><strong>myfirstext</strong></code> <span class="tlid-translation translation"><span title="">ist der Name des Chrome-Packages (im ersten Segment von <code>&lt;em: id&gt;</code> in der Datei <code>install.rdf</code> angegeben).</span></span></li>
+ <li><code><strong>content/</strong></code>  <span class="tlid-translation translation"><span title="">Gibt den Speicherort der Packagedateien an und wird beim Auflösen der URI <code>chrome://myfirstext/content /...</code> verwendet.</span></span></li>
+</ul>
+
+<p><span class="tlid-translation translation"><span title="">Diese Zeile besagt, dass wir für ein Chrome-Package <code><strong>myfirstext</strong></code> die <strong>Kontent</strong>dateien im Verzeichnis <code>content/</code> finden können (das ist ein Pfad relativ zum Speicherort von <code>chrome.manifest</code>).</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Um die Thunderbird-Benutzeroberfläche so zu ändern, dass sie die Erweiterung unterstützt, erstelle ein Overlay und führe es mit dem Standard Thunderbird-Interface zusammen.</span></span> <span class="tlid-translation translation"><span title="">Im weiteren Verlauf des Tutorials werden wir eine XUL-Overlay-Datei erstellen, die mit der Standarddatei <code>messenger.xul</code> zusammengeführt wird.</span></span> <span class="tlid-translation translation"><span title="">An dieser Stelle legen wir in <code>chrome.manifest</code> die Existenz des Overlays fest (das wir später erstellen werden).</span></span></p>
+
+<div class="tlid-result-transliteration-container result-transliteration-container transliteration-container">
+<div class="tlid-transliteration-content transliteration-content full"> </div>
+</div>
+
+<p><span class="tlid-translation translation"><span title="">Füge diese Zeile am Ende von <code>chrome.manifest</code> hinzu:</span></span></p>
+
+<div id="section_8">
+<pre class="eval">overlay <a class="external" rel="freelink">chrome://messenger/content/messenger.xul</a> <a class="external" rel="freelink">chrome://myfirstext/content/myhelloworld.xul</a>
+</pre>
+
+<p><span class="tlid-translation translation"><span title="">Dies sagt Thunderbird, dass <code>myhelloworld.xul</code> beim Laden von <code>messenger.xul</code> mit <code>messenger.xul</code> zusammengeführt wird.</span></span> <span class="tlid-translation translation"><span title="">Weitere Informationen zu Chrome-Manifesten und den unterstützten Eigenschaften findest du in der </span></span><a href="../../Chrome_Registration" rel="internal">Chrome-Manifest</a>referenz.</p>
+</div>
+
+<div class="note"><s><span class="tlid-translation translation"><span title="">Es</span></span></s><span class="tlid-translation translation"><span title=""> </span></span><s><span class="tlid-translation translation"><span title="">kann</span></span></s><span class="tlid-translation translation"><span title=""> </span></span><s><span class="tlid-translation translation"><span title="">hilfreich</span></span></s><span class="tlid-translation translation"><span title=""> </span></span><s><span class="tlid-translation translation"><span title="">sein</span></span></s><span class="tlid-translation translation"><span title="">, </span></span><s><span class="tlid-translation translation"><span title="">eine</span></span></s><span class="tlid-translation translation"><span title=""> </span></span><s><span class="tlid-translation translation"><span title="">Erweiterung</span></span></s><span class="tlid-translation translation"><span title=""> </span></span><s><span class="tlid-translation translation"><span title="">wie</span></span></s><span class="tlid-translation translation"><span title=""> </span></span><s><span class="tlid-translation translation"><span title="">den</span></span></s> <s><a href="/en/DOM_Inspector" title="en/DOM Inspector"><strong>DOM</strong></a></s><a href="/en/DOM_Inspector" title="en/DOM Inspector"><strong> </strong></a><s><a href="/en/DOM_Inspector" title="en/DOM Inspector"><strong>Inspector</strong></a> </s><span class="tlid-translation translation"><span title=""><s>zu</s> <s>installieren</s>, <s>um</s> <s>das Layout</s> <s>der vorhandenen</s> <s>XUL</s>-<s>Dateien</s> <s>besser</s> <s>zu</s> <s>verstehen</s> <s>und</s> <s>eigene</s> <s>Overlays</s> <s>zu debuggen</s>.</span></span> <span class="tlid-translation translation"><span title="">(nicht unterstützt ab Thunderbird 60)</span></span></div>
+
+<p>{{ PreviousNext("Mozilla/Thunderbird/Thunderbird_extensions/Building_a_Thunderbird_extension_3:_install_manifest", "Mozilla/Thunderbird/Thunderbird_extensions/Ein_Thunderbird_Addon_programmieren_5:_XUL") }}</p>
diff --git a/files/de/mozilla/thunderbird/thunderbird_extensions/eine_thunderbird-erweiterung_programmieren_6_colon__javascript_hinzufuegen/index.html b/files/de/mozilla/thunderbird/thunderbird_extensions/eine_thunderbird-erweiterung_programmieren_6_colon__javascript_hinzufuegen/index.html
new file mode 100644
index 0000000000..959e9dc753
--- /dev/null
+++ b/files/de/mozilla/thunderbird/thunderbird_extensions/eine_thunderbird-erweiterung_programmieren_6_colon__javascript_hinzufuegen/index.html
@@ -0,0 +1,53 @@
+---
+title: 'Eine Thunderbird-Erweiterung programmieren 6: JavaScript hinzufügen'
+slug: >-
+  Mozilla/Thunderbird/Thunderbird_extensions/Eine_Thunderbird-Erweiterung_programmieren_6:_Javascript_hinzufuegen
+translation_of: >-
+  Mozilla/Thunderbird/Thunderbird_extensions/Building_a_Thunderbird_extension_6:_Adding_Javascript
+---
+<p>{{AddonSidebar}}</p>
+
+<p><span class="tlid-translation translation"><span title="">In diesem Schritt erstellen wir ein kleines Stück JavaScript-Code, der das aktuelle Datum ins Statusleisten-Widget einfügt.</span></span> <span class="tlid-translation translation"><span title="">Die Statusleiste wird normalerweise am unteren Rand des Thunderbird-Fensters angezeigt. Je nach installiertem </span></span><a class="external" href="http://addons.mozilla.org/en-US/thunderbird/themes/" title="http://addons.mozilla.org/en-US/thunderbird/themes/">Theme</a> <span class="tlid-translation translation"><span title="">sieht das Ergebnis etwa so aus:</span></span></p>
+
+<p style="margin-left: 40px;"><a href="/@api/deki/files/5567/=current_date.png" title="current_date.png"><img alt="current_date.png" class="default internal" src="/@api/deki/files/5567/=current_date.png?size=webview" style="height: 25px; width: 102px;"></a></p>
+
+<p><strong>XUL Elemente mit JavaScript modifizieren</strong></p>
+
+<div class="text-wrap tlid-copy-target">
+<div class="result-shield-container tlid-copy-target"><span class="tlid-translation translation"><span title="">Speichere den folgenden JavaScript-Code im <strong>content</strong>/ Ordner neben der Datei <strong><code>myhelloworld.xul</code></strong> und nenne ihn <code><strong>overlay.js</strong></code>.</span></span></div>
+</div>
+
+<pre class="brush: js">window.addEventListener("load", function(e) {
+	startup();
+}, false);
+
+window.setInterval(
+	function() {
+		startup();
+	}, 60000); //Aktualisiert das Datum jede Minute
+
+function startup() {
+	var myPanel = document.getElementById("my-panel");
+	var date = new Date();
+	var day = date.getDay();
+	var dateString = date.getFullYear() + "." + (date.getMonth()+1) + "." + date.getDate();
+	myPanel.label = "Date: " + dateString;
+}</pre>
+
+<p><span class="tlid-translation translation"><span title="">Der erste Teil registriert einen neuen Ereignis-Listener, der beim Laden von Thunderbird automatisch ausgeführt wird.</span></span> <span class="tlid-translation translation"><span title="">Der Ereignis-Listener ruft dann die <code>Startup</code>-Funktion auf, die unser <code>&lt;statusbarpanel&gt;</code> -Element mit der ID <strong>my-panel </strong>aus dem DOM-Tree des Dokuments erhält.</span></span><span class="tlid-translation translation"><span title="">Dann verwendet es die <code>Date</code>-Klasse von JavaScript, um das aktuelle Datum abzurufen, das in eine String konvertiert wird, der das Format <em>YYYY.MM.DD</em> hat.Da der Monat nullbasiert ist, müssen wir beim Monat eins addieren.</span></span> <span class="tlid-translation translation"><span title="">Schließlich wird das Label unseres Panels auf "Date:" gesetzt und mit der Datums-String verkettet, die das formatierte Datum enthält.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Wir verwenden die Funktion </span></span><a href="/en/DOM/window.setInterval" title="https://developer.mozilla.org/en/DOM/window.setInterval"><strong><code>window.setInterval</code></strong></a><span class="tlid-translation translation"><span title="">, um das Datum zu aktualisieren, falls Thunderbird länger als einen Tag läuft.</span></span>. <span class="tlid-translation translation"><span title="">Dadurch können wir die <code>Startup</code>-Funktion wiederholt mit einem Intervall von 60000 ms (jede Minute) aufrufen.</span></span></p>
+
+<h3 id="Weitere_Dokumentation">Weitere Dokumentation</h3>
+
+<p><span class="tlid-translation translation"><span title="">Weitere Funktionen für die DOM-Objekte findest du unter:</span></span></p>
+
+<ul>
+ <li><strong><a href="/en/DOM/window" title="en/DOM/Window">DOM/Window</a></strong> (<span class="tlid-translation translation"><span title="">API-Referenz für das Window-Objekt</span></span>)</li>
+ <li><strong><a href="/en/DOM/document" title="en/DOM/Document">DOM/Document</a></strong> (<span class="tlid-translation translation"><span title="">API-Referenz für das Document-Objekt</span></span>)</li>
+ <li><strong><a href="/en/Gecko_DOM_Reference" title="https://developer.mozilla.org/en/Gecko_DOM_Reference">Gecko DOM Reference</a></strong> (<span class="tlid-translation translation"><span title="">Übersicht aller DOM-Objekte in Gecko</span></span>)</li>
+</ul>
+
+<p><span class="tlid-translation translation"><span title="">Das </span></span><strong><a class="external" href="http://www.addedbytes.com/cheat-sheets/javascript-cheat-sheet/" title="http://www.addedbytes.com/cheat-sheets/javascript-cheat-sheet/">Javascript Cheat Sheet</a></strong><span class="tlid-translation translation"><span title=""> kann auch sehr nützlich sein.</span></span></p>
+
+<p>{{ PreviousNext("Mozilla/Thunderbird/Thunderbird_extensions/Ein_Thunderbird_Addon_programmieren_5:_XUL", "Mozilla/Thunderbird/Thunderbird_extensions/Building_a_Thunderbird_extension_7:_Installation") }}</p>
diff --git a/files/de/mozilla/thunderbird/thunderbird_extensions/index.html b/files/de/mozilla/thunderbird/thunderbird_extensions/index.html
new file mode 100644
index 0000000000..8dba5ff294
--- /dev/null
+++ b/files/de/mozilla/thunderbird/thunderbird_extensions/index.html
@@ -0,0 +1,138 @@
+---
+title: Thunderbird extensions
+slug: Mozilla/Thunderbird/Thunderbird_extensions
+tags:
+  - Add-ons
+  - Extensions
+  - NeedsTranslation
+  - TopicStub
+  - thunderbird
+translation_of: Mozilla/Thunderbird/Thunderbird_extensions
+---
+<div class="callout-box"><strong><a href="/en/Extensions/Thunderbird/Building_a_Thunderbird_extension" title="en/Building_a_Thunderbird_extension">Entwickeln einer Thunderbird Erweiterung</a></strong><br>
+Schritt-für-Schritt Anleitung zur Erstellung einer Erweiterung für Thunderbird.</div>
+
+<div>
+<p>{{AddonSidebar}}</p>
+Die nachfolgende Dokumentation dient als Hilfestellung zur Entwicklung von Erweiterungen für den <a class="internal" href="/en/Thunderbird" title="En/Thunderbird">Thunderbird</a> email client. Ähnlichkeiten zu den <a href="/en/Extensions" title="en/Extensions">Firefox extensions</a> sind vorhanden, jedoch ebenso Unterschiede die den zukünftigen Thunderbird Entwickler verwirren können. Diese Dokumentenreihe beschäftigt sich mit Thunderbird.</div>
+
+<div><br>
+Sie benötigen Hilfe zu einem spezifischen Thema? Fragen Sie die Community / Communications.</div>
+
+<div></div>
+
+<div><strong>Bitte helfen Sie!</strong> Sie können ein <a class="internal" href="/en/Extensions/Thunderbird/HowTos" title="en/Extensions/Thunderbird/HowTos">how-to</a> (eine Frage, eine Antwort, ein Codeschnipsel), <a class="internal" href="/en/Extensions/Thunderbird/Useful_newsgroups_discussions" title="En/Extensions/Thunderbird/Useful newsgroups discussions">eine relevante newsgroup Diksussion zusammenfassen und verlinken</a> oder ein Tutorial verfassen.</div>
+
+<div></div>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 id="Documentation" name="Documentation"><a href="/Special:Tags?tag=Extensions&amp;language=de" title="Special:Tags?tag=Extensions&amp;language=de">Dokumentation</a></h2>
+
+    <h3 id="Erste_Schritte_mit_Thunderbird">Erste Schritte mit Thunderbird</h3>
+
+    <p>Ein mutiger, junger Entwickler möchte eine eine Erweiterung für Thunderbird entwickeln. Nachfolgende Links helfen ihm auf dieser Reise.  <u><strong>Hinweis: Diese Dokumentation wurde noch nicht für Version 60 aktualisiert.</strong></u></p>
+
+    <ul>
+     <li>Beginnen Sie mit dem Studium des Tutorials und lernen Sie, wie Sie eine <a class="internal" href="/en/Extensions/Thunderbird/Building_a_Thunderbird_extension" title="En/Building a Thunderbird extension">Thunderbird Erweiterung erstellen</a> können.<a class="internal" href="/en/Extensions/Thunderbird/Building_a_Thunderbird_extension" title="En/Building a Thunderbird extension"> </a> <strong>Beachten Sie auch den <a href="https://wiki.mozilla.org/Thunderbird/Add-ons_Guide_57">Thunderbird 57-60 add-ons guide</a> für mit Thunderbird 60 eingeführte Änderungen.</strong></li>
+     <li>Erfahren Sie mehr über die <a href="/en/Thunderbird/Main_Windows" title="Main Windows">Hauptfenster </a>und lernen Sie die « thread pane », « preview pane », und « folder pane » kennen.</li>
+     <li>Spielen Sie mit einem <a href="/en/Extensions/Thunderbird/Demo_Addon" title="Demo Addon">demo add-on</a> welches erweiterte Thunderbird-spezifische features bietet.</li>
+     <li>Sie möchten mehr tun?  Erfinden Sie nicht das Rad neu: bedienen Sie sich bei dem <a class="link-https" href="https://github.com/protz/thunderbird-stdlib" title="https://github.com/protz/thunderbird-stdlib">thunderbird-stdlib</a> Projekt (Doku <a class="external" href="http://protz.github.com/thunderbird-stdlib/doc/symbols/_global_.html" title="http://protz.github.com/thunderbird-stdlib/doc/symbols/_global_.html">hier</a>). Funktionen zum Umgang mit Nachrichten (löschen, archivieren, tags ändern, etc.) sind hier enthalten. <a href="https://dxr.mozilla.org/comm-central/source/mail/base/modules/MailUtils.js">MailUtils.js</a>.</li>
+     <li>Nicht das gefunden, was Sie benötigen? Lesen Sie die <a class="internal" href="/en/Extensions/Thunderbird/HowTos" rel="internal" title="en/Extensions/Thunderbird/HowTos">Thunderbird how-tos</a>; sie enthalten viele Vorgehensweisen für Dinge, die Erweiterungen tun möchten.</li>
+     <li>Sie hängen fest?  Fragen Sie in einem Kommunikationskanal (auf der rechten Seite) nach.</li>
+     <li>Richtig mutig? Lesen Sie den source in einer ausgefallenen Oberfläche <a class="external" href="http://doxygen.db48x.net/comm-central/html/" title="http://doxygen.db48x.net/comm-central/html/">fancy interface</a> (der Link ist tot); Sie können oftmals Tests finden, die zeigen was Sie versuchen zu erreichen.</li>
+    </ul>
+
+    <h3 id="Die_Gloda_Datenbank">Die Gloda Datenbank</h3>
+
+    <p>Thunderbird verfügt über ein subsystem Namens Gloda. Gloda steht für « Global Database », und erzeugt Thunderbird-weite Beziehungen zwischen Objekten. Gloda stellt Konzepte wie Unterhaltungen, Nachrichten, Identitäten, Kontakte zur Verfügung. Alles diese Konzepte sind verbunden: Eine Unterhaltung enthält Nachrichten, die mit Identitäten verknüpft sind (<strong>from</strong> Feld, <strong>to</strong> Feld), die widerum selbst Teil eines Kontaktes sind. Tatsächlich: ein Kontakt hat mehrere Identitäten.</p>
+
+    <p>Typischer Anwendungsfall für Gloda: Finde alle Nachrichten deren Betreff übereinstimmt [Suchbegriff], finde alle Nachrichten von [Person], finde alle Nachrichten im gleichen Thread wie [eine vorgegebene Nachricht], finde alle Nachrichten mit [Person] etc. etc.</p>
+
+    <p>Gloda ist extrem mächtig und wird sehr stark von add-ons wie z. B. <a class="link-https" href="https://addons.mozilla.org/en-US/thunderbird/addon/gmail-conversation-view/" title="https://addons.mozilla.org/en-US/thunderbird/addon/gmail-conversation-view/">Thunderbird Conversations</a> genutzt.<br>
+     Erfahren Sie mehr über Gloda:</p>
+
+    <ul>
+     <li>Ein Überblick über <a href="/en/Thunderbird/gloda" title="Gloda">Gloda</a></li>
+     <li>Wie erstelle ich <a href="/en/Thunderbird/Creating_a_Gloda_message_query" title="Creating a gloda message query">die erste Nachrichten Abfrage</a> und lesen Sie die <a href="/en/Thunderbird/Gloda_examples" title="Gloda examples">gloda Beispiele</a></li>
+     <li>Gloda interna: <a href="/en/Thunderbird/Gloda_debugging" title="Gloda debugging">Gloda debugging</a>, <a href="/en/Thunderbird/Gloda_indexing" title="Gloda indexing">Gloda indexing</a></li>
+    </ul>
+
+    <h3 id="Weitere_Thunderbird-spezifische_Links_Englisch">Weitere Thunderbird-spezifische Links (Englisch)</h3>
+
+    <p>Manche Links können veraltet sein, jedoch stellten sie immer noch wertvolle Informationen zur codebase zur Verfügung.</p>
+
+    <ul>
+     <li><a class="internal" href="/en/Extensions/Thunderbird/An_overview_of_the_Thunderbird_interface" title="En/Extensions/Thunderbird/An overview of the Thunderbird interface">An overview of Thunderbird components</a></li>
+     <li><a class="internal" href="/en/Extensions/Thunderbird/Thunderbird_developer_reference_docs" title="en/Extensions/Thunderbird/Thunderbird developer reference docs">Developer reference docs</a>:
+      <ul>
+       <li><a class="internal" href="/en/Folders" title="En/Folders">Folder classes</a></li>
+       <li><a class="internal" href="/en/DB_Views_(message_lists)" title="En/DB Views (message lists)">DB views (message list)</a></li>
+       <li><a class="internal" href="/en/Message_Summary_Database" title="En/Message Summary Database">Message summary database</a></li>
+       <li><a class="internal" href="/en/MailNews_Protocols" title="En/MailNews Protocols">MailNews protocols</a></li>
+       <li><a class="internal" href="/En/MailNews_Filters" rel="internal" title="En/MailNews Filters">MailNews filters</a></li>
+       <li><a class="internal" href="/en/Extensions/Thunderbird/Error_reporting_tools" title="en/Extension Library/Extensions/Thunderbird/Error reporting tools">Error reporting tools</a></li>
+       <li><a href="/en/Toolkit_API/STEEL" title="en/Toolkit API/STEEL">STEEL library</a> (Mit Thunderbird 52 veraltet, verwenden Sie <a class="link-https" href="https://github.com/protz/thunderbird-stdlib" title="https://github.com/protz/thunderbird-stdlib">https://github.com/protz/thunderbird-stdlib</a>)</li>
+       <li><a class="external" href="http://quetzalcoatal.blogspot.com/2010/01/developing-new-account-types-part-0.html" title="http://quetzalcoatal.blogspot.com/2010/01/developing-new-account-types-part-0.html">Developing new account types</a></li>
+      </ul>
+     </li>
+     <li><a class="internal" href="/en/Extensions/Thunderbird/Useful_newsgroups_discussions" title="En/Extensions/Thunderbird/Useful newsgroups discussions">Useful newsgroup discussions</a> (Alles, was sehr als ist, sollte kritisch betrachtet werden, da in den letzten Jahren wurde die API signifikant überarbeitet, wurde die die meisten Techniken erheblich vereinfachen).</li>
+     <li><a href="/en/Thunderbird/Thunderbird_API_documentation" title="en/Thunderbird/Thunderbird API documentation">Thunderbird API docs</a> (hauptsächlich eine Sammlung von veralteten Seiten, deren Relevanz eher als zweifelhaft anzusehen ist).</li>
+     <li><a href="/en/Mozilla/Thunderbird/Releases" title="Thunderbird developer release notes">Thunderbird developer release notes</a> - Änderungen im aktuellen Thunderbird die die add-on Entwickler betreffen. <a href="/Thunderbird_5_for_developers" title="Thunderbird 5 for developers">Thunderbird 5 for developers</a> enthält wichtige Informationen über MsgHdrToMimeMessage welches ein zentrales Stück des Codes ist.</li>
+    </ul>
+
+    <h3 id="Allegemeine_Links_Englisch">Allegemeine Links (Englisch)</h3>
+
+    <ul>
+     <li><a href="/en/Extensions/Thunderbird/Finding_the_code_for_a_feature" title="en/Extensions/Thunderbird/Finding the code for a feature">Finding the code for a feature</a></li>
+     <li><a class="external" href="http://kb.mozillazine.org/Category:Thunderbird" title="http://kb.mozillazine.org/Category:Thunderbird">Mozillazine articles on Thunderbird</a></li>
+     <li><a href="/Special:Tags?tag=Thunderbird" title="https://developer.mozilla.org/Special:Tags?tag=Thunderbird">All pages tagged with Thunderbird</a></li>
+     <li><a href="/Special:Tags?tag=MailNews" title="https://developer.mozilla.org/Special:Tags?tag=MailNews">All pages tagged with MailNews</a></li>
+    </ul>
+   </td>
+   <td>
+    <h2 id="Community" name="Community">Community / Communications</h2>
+
+    <p>Thunderbird spezifisch :</p>
+
+    <ul>
+     <li><a class="external" href="https://www.thunderbird.net/en-US/get-involved/#communication" title="http://wiki.mozilla.org/Thunderbird/CommunicationChannels">Thunderbird communication channels </a>ist Ihre erste Anlaufstelle</li>
+     <li><a class="link-irc" href="irc://moznet/#maildev">#maildev IRC channel</a></li>
+    </ul>
+
+    <p>Mehr allgemein :</p>
+
+    <ul>
+     <li><a class="external" href="http://forums.mozillazine.org/viewforum.php?f=19">MozillaZine Extension Development forum</a></li>
+     <li><a href="/docs/Mozilla/Add-ons#Contact_us">General developer channels</a></li>
+    </ul>
+
+    <p>Tools</p>
+
+    <ul>
+     <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622" rel="external nofollow" title="https://addons.mozilla.org/en-US/firefox/addon/6622">DOM Inspector</a> edit the live DOM (Firefox and Thunderbird)</li>
+     <li><a class="link-https" href="https://addons.mozilla.org/thunderbird/addon/workspace-for-thunderbird/" title="https://addons.mozilla.org/thunderbird/addon/workspace-for-thunderbird/">Workspace for Thunderbird</a>, erlaubt Codeschnipsel in Thunderbird laufen zu lassen und deren Variablen Struktur und Inhalt zu untersuchen.</li>
+     <li><a class="external" href="http://www.hacksrus.com/~ginda/venkman/" rel="external nofollow" title="http://www.hacksrus.com/~ginda/venkman/">Venkman</a>, ein JavaScript debugger (<a class="external" href="http://addons.mozilla.org/en-US/firefox/addon/216" rel="external nofollow" title="http://addons.mozilla.org/en-US/firefox/addon/216">Firefox</a>, <a class="external" href="http://addons.mozilla.org/en-US/thunderbird/addon/216" rel="external nofollow" title="http://addons.mozilla.org/en-US/thunderbird/addon/216">Thunderbird</a>)</li>
+     <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/7434/" rel="external nofollow" title="https://addons.mozilla.org/en-US/firefox/addon/7434/">Extension Developer's Extension</a> Eine Reihe von Entwicklungswerkzeugen</li>
+     <li><a class="external" href="http://www.gijsk.com/" rel="external nofollow" title="http://www.gijsk.com/">Chrome List</a> zeigt Dateien in chrome:// (<a class="external" href="http://addons.mozilla.org/en-US/firefox/addon/4453" rel="external nofollow" title="http://addons.mozilla.org/en-US/firefox/addon/4453">Firefox</a>, <a class="external" href="http://addons.mozilla.org/en-US/thunderbird/addon/4453" rel="external nofollow" title="http://addons.mozilla.org/en-US/thunderbird/addon/4453">Thunderbird</a>)</li>
+     <li><a href="/en/Mozmill" title="en/Mozmill">Mozmill</a> Test tool und Framework</li>
+     <li><a class="external" href="http://xpcomviewer.mozdev.org/" rel="external nofollow" title="http://xpcomviewer.mozdev.org">XPCOMViewer</a> ein XPCOM Inspector (Firefox and Thunderbird)</li>
+    </ul>
+
+    <p>... <a class="internal" href="/en/Setting_up_extension_development_environment#Development_extensions" title="en/Setting up extension development environment#Development extensions">weitere Tools</a> ...</p>
+
+    <p><span class="alllinks"><a href="/Special:Tags?tag=Extensions:Tools&amp;language=en" title="Special:Tags?tag=Extensions:Tools&amp;language=en">Alle anzeigen...</a></span></p>
+
+    <h2 id="Related_Topics" name="Related_Topics">Verwandte Themen</h2>
+
+    <dl>
+     <dd><a href="/en/XUL" title="en/XUL">XUL</a>, <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a>, <a href="/en/XPCOM" title="en/XPCOM">XPCOM</a>, <a href="/en/Themes" title="en/Themes">Themes</a>, <a href="/En/Developer_Guide" title="en/Developing_Mozilla">Developing Mozilla</a></dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span class="comment">Categori</span></p>
diff --git a/files/de/mozilla/verbinden/index.html b/files/de/mozilla/verbinden/index.html
new file mode 100644
index 0000000000..a103f9d5f9
--- /dev/null
+++ b/files/de/mozilla/verbinden/index.html
@@ -0,0 +1,94 @@
+---
+title: Mit Mozilla verbinden
+slug: Mozilla/Verbinden
+tags:
+  - Landung
+translation_of: Mozilla/Connect
+---
+<div class="summary">
+<p><span class="seoSummary">Ermöglichen, inspirieren und zusammenarbeiten damit das Internet die primäre Plattform wird um auf allen verbundenen Endgeräten Erlebnisse zu erschaffen.</span></p>
+</div>
+
+
+<div>
+<div class="column-container dev-program-callouts dev-program-block dev-program-first dev-program-column-wrapper">
+<div class="dev-program-callout">
+<div class="callout-link-container">
+<h2 id="Hacks_blog">Hacks blog</h2>
+
+<p>Eine wichtige Quelle für Menschen die für das offene Internet entwickeln. Der Mozilla Hacks blog bietet Neuigkeiten und Diskussionen zu den neusten Web Technolgien und Browser Eigenschaften.</p>
+
+<div class="callout-link-wrapper"><a class="callout-link" href="https://hacks.mozilla.org/">jetzt lesen </a></div>
+</div>
+</div>
+
+<div class="dev-program-callout">
+<div class="callout-link-container">
+<h2 id="Hilfe_QA">Hilfe Q&amp;A</h2>
+
+<p>Treten Sie der Diskussion über das Web und Web apps auf Stack Overflow bei, dort können Sie Ideen mit anderen Webentwicklern austauschen.<br>
+ <span class="smaller"><strong>{{anch("Developer discussions", "Search the Q&amp;A below")}}</strong></span></p>
+
+<div class="callout-link-wrapper"><a class="callout-link" href="http://stackoverflow.com/r/mozilla">Mozilla Q&amp;A auf Stack Overflow </a></div>
+</div>
+</div>
+
+<div class="dev-program-callout">
+<div class="callout-link-container">
+<h2 id="MDN_beitreten">MDN beitreten</h2>
+
+<p>Melden Sie sich bei MDN an! Sie werden in der Lage sein Dokumentationen zu bearbeiten, können unseren Newsletter abonnieren und bekommen Zugriff auf neue Features sobald wir diese veröffentlichen.</p>
+
+<div class="callout-link-wrapper"><a class="callout-link" href="/profile/edit">Beitreten oder einloggen </a></div>
+</div>
+</div>
+</div>
+
+<div class="dev-program-explanation dev-program-block">
+<h2 id="Mit_Mozilla_verbinden">Mit Mozilla verbinden</h2>
+Entwickler erschaffen die Zukunft indem Sie Dienste und Apps für Menschen auf der ganzen Welt aufbauen. Das Ziel der Mozilla Entwickler Beziehung ist es Entwickler dabei zu unterstützen offene und standardisierte Web Technologien zu verwenden um damit erfolgreich Ihre Ziele zu erreichen. Zusätzlich zu der Dokumentation hier auf MDN bieten wir auf verschiedenen anderen Kanälen Hilfe und Ressourcen an um dieses Ziel zu erreichen. Wir laden Sie ein sich zu beteiligen, zu lernen und Ihr eigenes Wissen zu teilen.<br>
+Um spezielle technische Fragen und Herausforderungen zu beantworten, bieten wir Hilfe über Q&amp;A auf Stack Overflow. Unser Newsletter hält Sie über die neusten Ereignisse in der Webszene rund um Web Apps und andere Themen auf dem Laufenden.<br>
+Wir haben viele Pläne und Ideen um unsere Entwickler Beziehungen iterativ auszubauen, wir möchten dich beteiligen genau wie wir es sind. <a href="http://stackoverflow.com/r/mozilla"> Folgen Sie den Tags auf Stack Overflow</a>, <a href="https://hacks.mozilla.org/">Abonnieren Sie den Hacks blog</a>, und <a href="/profile/edit">Melden Sie sich für einen Account an</a>!</div>
+
+<div class="column-container dev-program-block">
+<div class="column-half" id="Developer_discussions">
+<h2 id="QA_auf_Stack_Overflow_Ansicht_aller_QA...">Q&amp;A auf Stack Overflow <a class="heading-link" href="http://stackoverflow.com/r/mozilla">Ansicht aller Q&amp;A...</a></h2>
+
+<p>Wir haben ein Q&amp;A um Herausforderungen und Fragen beim Entwickeln zu diskutieren. Insbesondere für Firefox OS und open Web auf Handys. Zu finden auf Stack Overflow unter der einfachen URL <a href="http://stackoverflow.com/r/mozilla">http://stackoverflow.com/r/mozilla</a>.</p>
+
+
+<div class="stack-form">Stack Formular</div>
+
+<h3 id="Neuste_QA_Themen">Neuste Q&amp;A Themen</h3>
+</div>
+
+<div class="column-half dev-program-hacks dev-program-block"> </div>
+</div>
+
+<p class="dev-program-block"><img alt="Developers at a Firefox OS workshop in Madrid." src="https://mdn.mozillademos.org/files/7479/PhonesUp.jpg" style="display: block; height: 359px; margin: 0px auto; max-width: 100%; width: 720px;"></p>
+
+<div class="column-container dev-program-block">
+<div class="column-7 dev-program-events">
+<h2 id="Wo_ist_Mozilla_Sehen_Sie_Teilnehmer_und_Einzelheiten_auf_unserer_Veranstaltungseite...">Wo ist Mozilla? <a class="heading-link" href="https://developer.mozilla.org/en/events">Sehen Sie Teilnehmer und Einzelheiten auf unserer Veranstaltungseite...</a></h2>
+
+<p>Hier ist eine Liste von Mozilla Repräsentanten die auf einer Veranstaltung in Ihrer Nähe sprechen. Sprechen Sie mit Ihnen!</p>
+</div>
+
+<div class="column-5">
+<h2 id="weitere_Ressourcen">weitere Ressourcen</h2>
+
+<ul class="no-bullets">
+ <li><a href="http://www.youtube.com/user/mozhacks">Mozilla Hacks auf YouTube</a>
+
+  <ul>
+   <li><a href="http://www.youtube.com/playlist?list=PLo3w8EB99pqIHIUUv08hBCHq1OgPKhdo0">Firefox OS videos</a></li>
+   <li><a href="http://www.youtube.com/playlist?list=PLo3w8EB99pqLZNY22xKbTEzMfYo9PXAlm">Firefox Entwickler Werkzeuge videos</a></li>
+  </ul>
+ </li>
+ <li><a href="https://twitter.com/mozhacks">@mozhacks auf Twitter</a></li>
+</ul>
+</div>
+</div>
+</div>
+
+<p> </p>
diff --git a/files/de/mozilla/über_colon_omni.ja_(ehemals_omni.jar)/index.html b/files/de/mozilla/über_colon_omni.ja_(ehemals_omni.jar)/index.html
new file mode 100644
index 0000000000..381dc0e052
--- /dev/null
+++ b/files/de/mozilla/über_colon_omni.ja_(ehemals_omni.jar)/index.html
@@ -0,0 +1,62 @@
+---
+title: Über omni.ja (ehemals omni.jar)
+slug: 'Mozilla/Über:omni.ja_(ehemals_omni.jar)'
+tags:
+  - Firefox
+  - Gecko
+  - Guide
+  - Mozilla
+translation_of: Mozilla/About_omni.ja_(formerly_omni.jar)
+---
+<p>{{ gecko_minversion_header("2.0") }}</p>
+
+<p>Firefox und Thunderbird erreichen Verbesserungen der Performance, indem sie viele ihrer internen Teile, bestehend aus einzelnen Dateien oder mehreren  JAR-Dateien in eine einzige JAR-Datei,  <code>omni.ja</code> genannt, auslagern; dies reduziert die I/O-Menge, die benötigt wird, um die Anwendung zu laden. Seit Firefox und Thunderbird 10 wird die Dateierweiterung <code>.ja</code> genutzt, weil die Windows Systemwiederherstellung Dateien mit der <code>.jar</code> Erweiterung nicht sichert,  <code>.ja</code> Dateien dagegen schon.</p>
+
+<h2 id="omni.ja_inspizieren">omni.ja inspizieren</h2>
+
+<div class="note"><strong>Hinweis:</strong> Während der Extrahierung von <code>omni.ja</code> könnten Fehlmeldungen einiger Antivirenprogramme auftreten.</div>
+
+<p>Einige Kompressionsprogramme und Archive ( <em>jede</em> Version von 7-Zip mit einbezogen) können <code>omni.ja</code> aufgrund der Optimierungen, die in der Datei angewendet wurden, zurzeit nicht lesen. Windows 7 Nutzern wird empfohlen die Datei zu entpacken, indem sie in <code>omni.zip</code> umbenannt wird und sie mit Windows Explorer zu extrahieren. Nutzer älterer Versionen von Windows können das <a class="link-ftp" href="ftp://ftp.info-zip.org/pub/infozip/win32/unz552dn.zip" title="ftp://ftp.info-zip.org/pub/infozip/win32/unz552dn.zip">InfoZip's UnZip tool</a> verwenden, um Dateien zu entpacken - fertigen sie eine Kopie von <code>omni.ja</code> an und bewegen sie es per Drag n' Drop auf <code>unzip.exe</code>.</p>
+
+<p><code>omni.ja</code> ist auch aus der anderen Richtung mit Zip-Dateien inkompatibel; das Bearbeiten extrahierter Dateien wird Firefox nicht beeinflussen und wieder zurückgepackte editierte Dateien könnten Firefox zum Absturz bringen, wenn sie während des Packens nicht die richtigen Einstellungen nutzen. Der korrekte Befehl, um Dateien in <code>omni.ja</code> zu packen, ist:</p>
+
+<pre>zip -qr9XD omni.ja *</pre>
+
+<div class="note"><strong>Hinweis:</strong> Vor dem Erscheinen von Firefox 10 und Thunderbird 10, wurde die <code>omni.ja</code>  noch <code>omni.jar</code> genannt.</div>
+
+<h2 id="Die_Inhalte_von_omni.ja">Die Inhalte von omni.ja</h2>
+
+<p><code>omni.ja</code> enthält ausgewählte Programmressourcen:</p>
+
+<dl>
+ <dt><code>chrome.manifest</code></dt>
+ <dd>Das <a href="/de/docs/Mozilla/Chrome_Registration">chrome Manifest</a>.</dd>
+ <dt><code>/chrome/</code></dt>
+ <dd>UI-Dateien der Anwendung</dd>
+ <dt><code>/chrome/localized.manifest</code></dt>
+ <dd>Manifest für lokalisierten Inhalt; bezieht sich auf das chrome Manifest.</dd>
+ <dt><code>/chrome/nonlocalized.manifest</code></dt>
+ <dd>Manifest für nicht lokalisierten Inhalt; bezieht sich auf das chrome Manifest.</dd>
+ <dt><code>/components/</code></dt>
+ <dd>XPCOM-Komponenten, auf die sich die Anwendung stützt.</dd>
+ <dt><code>/defaults/</code></dt>
+ <dd>Standarddateien.</dd>
+ <dt><code>/modules</code></dt>
+ <dd><a href="/de/docs/Mozilla/JavaScript_code_modules">JavaScript Codemodule</a>.</dd>
+ <dt><code>/res/</code></dt>
+ <dd>Verschiedene Ressourcen.</dd>
+</dl>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en/Firefox_4_for_developers" title="en/Firefox 4 for developers">Firefox 4 for developers</a></li>
+ <li><a href="/en/Thunderbird_5_for_developers" title="en/Thunderbird 3.3 for developers">Thunderbird 3.3 for developers</a></li>
+ <li><a href="/en/Theme_changes_in_Firefox_4" title="en/Theme changes in Firefox 4">Theme changes in Firefox 4</a></li>
+ <li><a class="external" href="http://blog.mozilla.com/tglek/2010/09/14/firefox-4-jar-jar-jar/" title="http://blog.mozilla.com/tglek/2010/09/14/firefox-4-jar-jar-jar/">Firefox 4: jar jar jar</a> (blog post)</li>
+ <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=701875">Bug 701875 - Rename omni.jar to omni.ja</a></li>
+</ul>
+
+<div class="noinclude">
+<p>{{ languages( { "ja": "ja/About_omni.jar" } ) }}</p>
+</div>
diff --git a/files/de/neue_kompatibilitätstabellen_in_beta/index.html b/files/de/neue_kompatibilitätstabellen_in_beta/index.html
new file mode 100644
index 0000000000..a353880b4b
--- /dev/null
+++ b/files/de/neue_kompatibilitätstabellen_in_beta/index.html
@@ -0,0 +1,24 @@
+---
+title: Neue Kompatibilitätstabellen in Beta
+slug: Neue_Kompatibilitätstabellen_in_Beta
+translation_of: Archive/MDN/New_Compatibility_Tables_Beta
+---
+<p>Sie sind wahrscheinlich hier, weil sie einem Beta-Hinweis von einer unserer neuen Kompatibilitäts-Tabellen gefolgt sind. (Nein? Wollen Sie die neuen Tabellen sehen? <a href="en-US/docs/MDN/Contribute/Howto/Be_a_beta_tester">Beta-Tester werden (auf Englisch).</a>)</p>
+
+<p>Danke, dass Sie uns helfen, diese Kompatibilitäts-Tabellen zu testen. Sie sind Teil eines größeren Projekts. Wir ändern alle unsere <a href="https://github.com/mdn/browser-compat-data">Browser-Kompatibilitätsdaten zu strukturiertem JSON</a>.</p>
+
+<p>Die neuen Tabellen werden nach und nach auf den Seiten auftauchen, je nachdem wie die Daten kovertiert werden.</p>
+
+<h2 id="Bearbeitung">Bearbeitung</h2>
+
+<p>Unsere Kompatibilitäts-Daten wurden zu JSON-Dateien im<a href="https://github.com/mdn/browser-compat-data"> "browser-compat-data" GitHub-Repository</a> geändert.</p>
+
+<p>Um Kompatibilitäts-Daten beizutragen, können Sie jetzt einen Pull Request starten oder einen neuen Issue erstellen.</p>
+
+<h2 id="Wie_kann_ich_helfen">Wie kann ich helfen?</h2>
+
+<p>Wenn Sie ein Problem mit den Daten feststellen, dann erstellen Sie bitte einen <a href="https://github.com/mdn/browser-compat-data">Issue im GitHub-Repository</a>.</p>
+
+<p>Wenn die Tabelle nicht richig dargestellt wird oder nicht richtig funktioniert, nutzen Sie bitte den <strong>"report an error"</strong>-Knopf im Drop-Down-Menü über der Tabelle.</p>
+
+<p>Wenn sie einen Moment Zeit haben, würden wir uns freuen, wenn Sie  <a class="external external-icon" href="http://www.surveygizmo.com/s3/2342437/0b5ff6b6b8f6">an unserer Umfrage teilnehmen (auf Englisch)</a>.</p>
diff --git a/files/de/opensearch_plugin_für_firefox_erstellen/index.html b/files/de/opensearch_plugin_für_firefox_erstellen/index.html
new file mode 100644
index 0000000000..154f66b01c
--- /dev/null
+++ b/files/de/opensearch_plugin_für_firefox_erstellen/index.html
@@ -0,0 +1,161 @@
+---
+title: OpenSearch Plugin für Firefox erstellen
+slug: OpenSearch_Plugin_für_Firefox_erstellen
+tags:
+  - Add-ons
+  - OpenSearch
+translation_of: Web/OpenSearch
+---
+<h2 id="OpenSearch">OpenSearch</h2>
+<p>{{ fx_minversion_header(2) }}</p>
+<p><a href="/de/Firefox_2_für_Entwickler" title="de/Firefox 2 für Entwickler">Firefox 2</a> unterstützt das <a class="external" href="http://opensearch.org/">OpenSearch</a>(engl.) Beschreibungsformat für Such-Plugins. Plugins, die <a class="external" href="http://www.opensearch.org/Specifications/OpenSearch/1.1#OpenSearch_description_document">OpenSearch description syntax</a>(engl.) verwenden, sind kompatibel mit IE 7 und Firefox. Daher sind sie das empfohlene Format für das Web.</p>
+<p>Firefox unterstützt zudem zusätzliche Suchoptionen, die nicht im <a class="external" href="http://www.opensearch.org/Specifications/OpenSearch/1.1#OpenSearch_description_document">OpenSearch description syntax</a>(engl.) genannt werden, wie zum Beispiel Suchvorschläge und das <code>SearchForm</code> Element. Dieser Artikel bezieht sich auf die Erstellung von OpenSearch-kompatiblen Such-Plugins, die die zusätzlichen Firefox-spezifischen Funktionen unterstützen.</p>
+<p>OpenSearch Beschreibungsdateien können auch <a href="/de/OpenSearch_Plugin_für_Firefox_erstellen#Automatische_Erkennung_von_Such-Plugins" title="de/OpenSearch Plugin für Firefox erstellen#Automatische Erkennung von Such-Plugins">automatisch erkannt</a> und <a href="/de/Hinzufügen_von_Suchmaschinen_von_Webseiten" title="de/Hinzufügen von Suchmaschinen von Webseiten">von Webseiten</a> installiert werden.</p>
+<h2 id="OpenSearch_Beschreibungsdatei">OpenSearch Beschreibungsdatei</h2>
+<p>Die XML Datei, die eine Suchmaschine beschreibt, ist sehr einfach aufgebaut. Eine Vorlage findet sich unterhalb. Die fett markierten Abschnitte müssen angepasst werden, je nach dem was auf Ihre Suchmaschine zutrifft.</p>
+<pre class="eval">&lt;OpenSearchDescription xmlns="<span class="nowiki">http://a9.com/-/spec/opensearch/1.1/</span>"
+                       xmlns:moz="<span class="nowiki">http://www.mozilla.org/2006/browser/search/</span>"&gt;
+&lt;ShortName&gt;<strong>engineName</strong>&lt;/ShortName&gt;
+&lt;Description&gt;<strong>engineDescription</strong>&lt;/Description&gt;
+&lt;InputEncoding&gt;<strong>inputEncoding</strong>&lt;/InputEncoding&gt;
+&lt;Image width="16" height="16" type="image/x-icon"&gt;data:image/x-icon;base64,<strong>imageData</strong>&lt;/Image&gt;
+&lt;Url type="text/html" method="<strong>method</strong>" template="<strong>searchURL</strong>"&gt;
+  &lt;Param name="<strong>paramName1</strong>" value="<strong>paramValue1</strong>"/&gt;
+  ...
+  &lt;Param name="<strong>paramNameN</strong>" value="<strong>paramValueN</strong>"/&gt;
+&lt;/Url&gt;
+&lt;Url type="application/x-suggestions+json" template="<strong>suggestionURL</strong>"/&gt;
+&lt;moz:SearchForm&gt;<strong>searchFormURL</strong>&lt;/moz:SearchForm&gt;
+&lt;/OpenSearchDescription&gt;
+</pre>
+<dl>
+ <dt>
+  <strong>ShortName</strong></dt>
+ <dd>
+  Ein kurzer Name für Ihre Suchmaschine.</dd>
+ <dd>
+  <strong>Einschränkungen:</strong> Der Wert muss 16 oder weniger Zeichen enthalten und darf kein HTML oder sonstiges Markup enthalten.</dd>
+</dl>
+<dl>
+ <dt>
+  <strong>Description</strong></dt>
+ <dd>
+  Eine kurze Beschreibung der Suchmaschine.</dd>
+ <dd>
+  <strong>Einschränkungen:</strong> Der Wert muss 1024 oder weniger Zeichen enthalten und darf kein HTML oder sonstiges Markup enthalten.</dd>
+</dl>
+<dl>
+ <dt>
+  <strong>InputEncoding</strong></dt>
+ <dd>
+  Das Encoding, welches für die eingegeben Daten verwendet werden soll. Beispiel: <code>&lt;InputEncoding&gt;UTF-8&lt;/InputEncoding&gt;</code>.</dd>
+</dl>
+<dl>
+ <dt>
+  <strong>Image</strong></dt>
+ <dd>
+  URI zu einem Icon, welches die Suchmaschine repräsentiert. Nach Möglichkeit sollten Suchmaschinen ein 16x16 großes Bild des Typs "image/x-icon" und ein 64x64 großes Bild des Typs "image/jpeg" oder "image/png" bereitstellten. Der Link kann auch das <a class="external" href="http://en.wikipedia.org/wiki/Data:_URI_scheme">data: URI scheme</a> verwenden. Ein hilfreiches Tool zum Erstellen der data URIs lässt sich hier finden: <a class="external" href="http://software.hixie.ch/utilities/cgi/data/data">The data: URI kitchen</a>.
+  <pre class="eval">&lt;Image height="16" width="16" type="image/x-icon"&gt;<a class="external" href="http://example.com/favicon.ico" rel="freelink">http://example.com/favicon.ico</a>&lt;/Image&gt;
+  Oder
+&lt;Image height="16" width="16"&gt;data:image/x-icon;base64,AAABAAEAEBAAA ... DAAA=&lt;/Image&gt;
+</pre>
+  Firefox speichert das Icon als eine base64 data: URI im Cache (Such-Plugins werden im "searchplugins" Ordner im Profil gespeichert). http: URIs werden auf data: URIs umgewandelt, wenn diese vorhanden sind.</dd>
+</dl>
+<dl>
+ <dt>
+  <strong>Url</strong></dt>
+ <dd>
+  Gibt die URL oder die URLs an, die zur Suche verwendet werden sollen. Das <code>method</code> Attribut gibt an, ob eine <code>GET</code> oder <code>POST</code> Anfrage verwendet wird. Das <code>template</code> Attribut gibt die Basis-URL für die Suchanfrage an.</dd>
+ <dd>
+  <div class="note">
+   <strong>Hinweis:</strong> Der Internet Explorer 7 unterstützt keine <code>POST</code> Anfragen.</div>
+ </dd>
+</dl>
+<dl>
+ <dd>
+  Es gibt zwei URL-Typen, die Firefox unterstützt:</dd>
+</dl>
+<ul>
+ <li><code>type="text/html"</code> wird benutzt, um die URL für die Suchanfrage selbst festzulegen.</li>
+ <li><code>type="application/x-suggestions+json"</code> wird benutzt, um die URL anzugeben, die die Suchvorschläge enthält.</li>
+</ul>
+<dl>
+ <dd>
+  Für jeden URL-Typ können Sie <code>{searchTerms}</code> einsetzen, um dort den Suchausdruck des Benutzers einzufügen. Andere unterstützte dynamische Suchparameter sind unter <a class="external" href="http://www.opensearch.org/Specifications/OpenSearch/1.1/Draft_3#OpenSearch_1.1_parameters">OpenSearch 1.1 parameters</a> beschrieben.</dd>
+</dl>
+<dl>
+ <dd>
+  Für Suchvorschläge wird die festgelegte Vorlage verwendet, um eine Liste im JavaScript Object Notation (JSON) Format zu erhalten. Für weitere Details zur Implementierung von Suchvorschlägen, siehe <a href="/de/Suchvorschläge_in_Such-Plugins_unterstützen" title="de/Suchvorschläge in Such-Plugins unterstützen">Suchvorschläge in Such-Plugins unterstützen</a>.</dd>
+</dl>
+<p><img alt="Image:SearchSuggestionSample.png" class="internal" src="/@api/deki/files/358/=SearchSuggestionSample.png"></p>
+<dl>
+ <dt>
+  <strong>Param</strong></dt>
+ <dd>
+  Die Parameter, die durch die Suchanfrage laufen müssen, als Schlüssel/Wert Paare. Wenn Werte festgelegt werden, können Sie <code>{searchTerms}</code> verwenden, um den Suchausdruck vom Benutzer in der Suchleiste einzufügen.</dd>
+ <dd>
+  <div class="note">
+   <strong>Hinweis:</strong> Der Internet Explorer 7 unterstützt dieses Element nicht.</div>
+ </dd>
+</dl>
+<dl>
+ <dt>
+  <strong>SearchForm</strong></dt>
+ <dd>
+  Die URL zur der Suchseite auf der Seite, für die das Plugin erstellt wurde. Das bietet einen Weg für den Benutzer an, die Seite direkt zu besuchen, auf der er suchen möchte.</dd>
+ <dd>
+  <div class="note">
+   <strong>Hinweis:</strong> Da dieses Element Firefox-spezifisch ist und nicht Teil der OpenSearch Spezifikation ist, verwenden wir das "<code>moz:</code>" XML Namespace Präfix im Beispiel oben, um sicher zu stellen, dass andere Browser dieses Element ignorieren.</div>
+ </dd>
+</dl>
+<h2 id="Automatische_Erkennung_von_Such-Plugins">Automatische Erkennung von Such-Plugins</h2>
+<p>Eine Webseite, die ein Such-Plugin anbietet, kann dieses bemerkbar machen, sodass Firefox Benutzer dieses einfach herunterladen und installieren können.</p>
+<p>Um die automatisch Erkennung zu unterstützen, müssen Sie einfach einen Link im <code>&lt;head&gt;</code> Ihrer Webseite hinzufügen:</p>
+<pre class="eval">&lt;link rel="search" type="application/opensearchdescription+xml" title="<em>searchTitle</em>" href="<em>pluginURL</em>"&gt;
+</pre>
+<p>Ersetzen Sie die kursiven Einträge, wie unten erklärt:</p>
+<dl>
+ <dt>
+  <strong>searchTitle</strong></dt>
+ <dd>
+  Der Name der Suche, etwa "MDC Suche" oder "Yahoo! Suche". Dieser Wert sollte mit dem ShortName Ihres Plugins übereinstimmen.</dd>
+</dl>
+<dl>
+ <dt>
+  <strong>pluginURL</strong></dt>
+ <dd>
+  Die URL zum XML Such-Plugin, von welchem der Browser das Plugin herunterladen kann.</dd>
+</dl>
+<p>Wenn Ihre Seite mehrere Such-Plugins anbietet, können Sie diese Zeile für Zeile angeben. Zum Beispiel:</p>
+<pre class="eval">&lt;link rel="search" type="application/opensearchdescription+xml" title="MySite: By Author" href="<a class="external" href="http://www.mysite.com/mysiteauthor.xml" rel="freelink">http://www.mysite.com/mysiteauthor.xml</a>"&gt;
+&lt;link rel="search" type="application/opensearchdescription+xml" title="MySite: By Title" href="<a class="external" href="http://www.mysite.com/mysitetitle.xml" rel="freelink">http://www.mysite.com/mysitetitle.xml</a>"&gt;
+</pre>
+<p>Dadurch bietet Ihre Seite sowohl die Such nach Autor und nach Titel als separate Möglichkeiten an.</p>
+<h2 id="Automatische_Aktualisierungen_für_OpenSearch_Plugins_bereitstellen">Automatische Aktualisierungen für OpenSearch Plugins bereitstellen</h2>
+<p>{{ fx_minversion_note(3.5, "Dieser Abschnitt beschreibt Funktionen, die in Firefox 3.5 eingeführt wurden.") }}</p>
+<p>Ab Firefox 3.5 können OpenSearch Plugins automatsch aktualisiert werden. Um dies zu unterstützen, muss ein zusätzliches <code>Url</code> Element des Typs "<code>application/opensearchdescription+xml</code>" eingefügt werden. Das <code>rel</code> Attribut muss "<code>self</code>" lauten und das template Attribut muss die URL des OpenSearch Dokuments sein, welches automatisch aktualisiert werden muss.</p>
+<p>Zum Beispiel:</p>
+<pre>&lt;Url type="application/opensearchdescription+xml"
+     rel="self"
+     template="http://www.foo.com/mysearchdescription.xml" /&gt;
+</pre>
+<h2 id="Tipps_zur_Problemlösung">Tipps zur Problemlösung</h2>
+<p>Falls sich ein Fehler in Ihr Such-Plugin XML eingeschlichen hat, können Fehler beim Hinzufügen von Such-Plugin auftreten. Die Fehlermeldungen sind meist nicht sehr hilfreich, die folgenden Tipps können Ihnen aber vielleicht helfen das Problem zu finden.</p>
+<ul>
+ <li>Ihr Server sollte OpenSearch Plugins mit dem MIME type <code>application/opensearchdescription+xml</code> ausliefern.</li>
+ <li>Stellen Sie sicher, dass die XML Datei des Plugins wohlgeformt ist. Das können Sie überprüfen, indem Sie die Datei direkt in Firefox aufrufen. Ampersands in der template URL müssen mit &amp;amp; maskiert werden und Tags müssen mit einem Slash oder einem schließenden Tag geschlossen werden.</li>
+ <li>Das <code>xmlns</code> Attribut ist wichtig, ohne diesem taucht die Fehlermeldung auf: "Firefox could not download the search plugin from: (URL)".</li>
+ <li>Achten Sie darauf, dass Sie eine <code>text/html</code> URL einfügen <strong>müssen</strong> — Such-Plugins mit Atom oder <a href="/de/RSS" title="de/RSS">RSS</a> URL Typen (was gültig wäre, Firefox aber nicht unterstützt) werden ebenfalls zum Fehler "could not download the search plugin" führen.</li>
+ <li>Favicons aus einer entfernten Quelle dürfen nicht größer als 10KB sein (siehe {{ Bug(361923) }}).</li>
+</ul>
+<p>Zusätzlich bietet das Such-Plugin einen Log-Mechanismus, der von Plugin Entwicklern verwendet werden kann. Verwenden Sie <em>about:config</em> um die Einstellung '<code>browser.search.log</code>' auf <code>true</code> zu setzen. Logging Informationen werden in Firefox's <a href="/de/Fehlerkonsole" title="de/Fehlerkonsole">Fehlerkonsole</a> (Extras-&gt;Fehlerkonsole) erscheinen, wenn Such-Plugins hinzugefügt werden.</p>
+<h2 id="Referenzmaterial">Referenzmaterial</h2>
+<ul>
+ <li><a class="external" href="http://opensearch.org/">OpenSearch Documentation</a>, <a class="external" href="http://www.opensearch.org/Specifications/OpenSearch/Extensions/Parameter/1.0">OpenSearch Documentation about the Url and Param element</a></li>
+ <li>Technorati.com hat eine  <a class="external" href="http://technorati.com/osd.xml">arbeitende osd.xml</a></li>
+ <li>Schwierigkeiten bei der automatischen Erkennung: {{ Bug(340208) }}</li>
+ <li><a class="external" href="http://en.wikipedia.org/wiki/Data:_URI_scheme"><code>data:</code> URI scheme</a></li>
+ <li><a class="external" href="http://www.searchplugins.net">searchplugins.net</a> - OpenSearch Plugins für Firefox 2. <a class="external" href="http://www.searchplugins.net/pluginlist.aspx">Liste von genierten Such-Plugins</a></li>
+ <li><a class="external" href="http://keijisaito.info/ready2search/e/">Ready2Search</a> - OpenSearch Plugins erstellen. <a class="external" href="http://keijisaito.info/arc/search/en_make_plugin.htm">Benutzerdefinierte Suche durch Ready2Search</a></li>
+</ul>
+<p>{{ languages( { "en": "en/Creating_OpenSearch_plugins_for_Firefox", "ca": "ca/Creaci\u00f3_de_connectors_OpenSearch_per_al_Firefox", "fr": "fr/Cr\u00e9ation_de_plugins_OpenSearch_pour_Firefox", "ja": "ja/Creating_OpenSearch_plugins_for_Firefox", "pl": "pl/Tworzenie_wtyczek_OpenSearch_dla_Firefoksa", "pt": "pt/Criando_plugins_OpenSearch_para_o_Firefox" } ) }}</p>
diff --git a/files/de/packen_von_erweiterungen/index.html b/files/de/packen_von_erweiterungen/index.html
new file mode 100644
index 0000000000..5b824abfb4
--- /dev/null
+++ b/files/de/packen_von_erweiterungen/index.html
@@ -0,0 +1,42 @@
+---
+title: Packen von Erweiterungen
+slug: Packen_von_Erweiterungen
+tags:
+  - Erweiterungen
+  - Toolkit API
+translation_of: Archive/Add-ons/Extension_Packaging
+---
+<p>Erweiterungen sind eine Art <a href="/de/Bundles" title="de/Bundles">installierbare Pakete</a>, welche vom Benutzer heruntergeladen und direkt in der Anwendung installiert werden können. Außerdem können Erweiterungen bereits mit der Anwendung mitgeliefert oder von einem anderen Programm eingebunden werden. Erweiterungen benutzen eine <a href="/de/Bundles" title="de/Bundles">Verzeichnisstruktur</a>, die Platz für Chromedateien, Komponenten und andere Daten bietet, um die Funktionalität der XUL-Anwendung zu erweitern.</p>
+<p>Jede Erweiterung benötigt eine <a href="/de/Installationsmanifest" title="de/Installationsmanifest">install.rdf</a> Datei mit beschreibenden Informationen über die Erweiterung, wie eine einmalige ID, Version, Urheber oder Informationen zur Kompatibilität.</p>
+<p>Nachdem die Erweiterung sowie die install.rdf vorbereitet wurden, gibt es verschiedene Wege, um diese zu installieren. Das Erweiterungsverzeichnis kann als <a href="/de/XPI" title="de/XPI"> Installationspaket (xpinstall)</a> gepackt, direkt in das Anwendungs- oder Profilverzeichnis kopiert oder in der Windows Registry eingetragen werden.</p>
+<div class="geckoVersionNote">
+  <div class="geckoVersionHeading">
+Hinweis zu Gecko 2.0
+<div style="font-size: 9px; line-height: 1; font-style: italic;">(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)</div>
+</div>
+  <p>Ab Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) werden XPI Dateien nicht mehr entpackt, wenn Erweiterungen installiert werden. Stattdessen wird die XPI-Datei in das Erweiterungsverzeichnis kopiert und die Dateien werden direkt aus dem Paket geladen. Siehe <a href="/de/Erweiterungen/Erweiterungen_für_Firefox_4_aktualisieren" title="de/Erweiterungen/Erweiterungen für Firefox 4 aktualisieren">Erweiterungen für Firefox 4 aktualisieren</a> für weitere Details.</p>
+</div>
+<h3 id="Erweiterung_als_Installationspaket">Erweiterung als Installationspaket</h3>
+<p>Eine <a href="/de/XPI" title="de/XPI">XPI</a>-Datei (XPInstall) ist eine einfache Zip-Datei, die die Erweiterung sowie die <a href="/de/Installationsmanifest" title="de/Installationsmanifest">install.rdf</a> im Wurzelverzeichnis des Archivs enthält. Benutzer können ein Installationspaket sowohl von einer Webseite als auch als lokale Datei installieren. Dazu muss das Paket lediglich geöffnet oder in den Addon-Manager per Drag &amp; Drop gezogen werden.</p>
+<p>Der, vom Firefox so erkannte, MIME-Typ einer XPI-Datei ist <em>application/x-xpinstall</em>. Da die meisten HTTP-Server defaultmäßig nicht konfiguriert sind diesen MIME-Typ für das .xpi Endung zurückzugeben, werden Sie vermutlich die Konfiguration Ihres HTTP-Servers anpassen müssen. Beim Apache HTTP-Server kann dies ganz einfach gemacht werden, indem folgende Anweisung in der Konfiguration oder .htaccess-Datei hinzugefügt wird:</p>
+<pre class="eval">AddType application/x-xpinstall .xpi
+</pre>
+<h3 id="Eine_Erweiterung_direkt_installieren">Eine Erweiterung direkt installieren</h3>
+<p>Wenn Sie den Pfad der Anwendung kennen, weil Sie z.B. die Erweiterung zusammen mit der Anwendung installieren, können Sie die Erweiterung direkt nach <span style="white-space: nowrap;"><em>&lt;appdir&gt;/extensions/&lt;extensionID&gt;</em></span> installieren. Die Erweiterung wird vom Addon-Manager automatisch gefunden sobald die Anwendung das nächste mal gestartet wird.</p>
+<p>Wenn Sie diese Methode wählen, müssen Sie sichergehen, dass die Zugriffsrechte für die Verzeichnisse und Dateien richtig gesetzt sind. Ansonsten kann der Addon-Manager unter Umständen nicht richtig mit der Erweiterung funktionieren.</p>
+<h3 id="Add-ons_in_eine_benutzerdefinierte_Anwendung_einfügen">Add-ons in eine benutzerdefinierte Anwendung einfügen</h3>
+<p>Eine benutzerdefinierte Anwendung kann Add-ons einbinden (auch Erweiterungen und Themes), indem diese in das <code>&lt;appdir&gt;/distribution/bundles</code> Verzeichnis gepackt werden.</p>
+<h3 id="Eine_Erweiterung_in_der_Windows_Registry_registrieren">Eine Erweiterung in der Windows Registry registrieren</h3>
+<p>Externe Installationsroutinen, wie z.B. die Java Laufzeitumgebung, können eine Anwendung als Erweiterung integrieren, obwohl diese noch nicht installiert ist. Die Installation wird dann mit Hilfe der <a href="/de/Erweiterungen_installieren_mittels_Windows_Registry" title="de/Erweiterungen_installieren_mittels_Windows_Registry"> Windows Registry</a> beendet.</p>
+<h3 id="Multi-Item_Extension_XPIs">Multi-Item Extension XPIs</h3>
+<p>Manchmal werden mit einer einzelnen XPI-Datei mehrere Erweiterungen/Themes installiert. Ein spezieller Typ <a href="/de/Packen_von_mehreren_Erweiterungen" title="de/Packen_von_mehreren_Erweiterungen">Gruppen Paket</a> zeigt wie dieser Typ gepackt wird. (Firefox 1.5/XULRunner 1.8 wird benötigt.)</p>
+<h3 id="Offizielle_Toolkit_API_Referenzen">Offizielle <a href="/de/Toolkit_API" title="de/Toolkit_API">Toolkit API</a> Referenzen</h3>
+<p>
+      </p><ul>
+        <li><a href="/de/Bundles" title="de/Bundles">Struktur eines installierbaren Bündels</a>: Beschreibung der gemeinsamen Struktur von installierbaren Bündeln von Erweiterungen, Themes und XULRunner Anwendungen</li>
+        <li><a href="/de/Packen_von_Erweiterungen" title="de/Packen_von_Erweiterungen">Packen von Erweiterungen</a>: Informationen über das Packen von Erweiterungen</li>
+        <li><a href="/de/Packen_von_Themes" title="de/Packen_von_Themes">Packen von Themes</a>: Informationen über das Packen von Themes</li>
+        <li><a href="/de/Packen_von_mehreren_Erweiterungen" title="de/Packen_von_mehreren_Erweiterungen">Packen von mehreren Erweiterungen</a>: Informationen über das Packen von mehreren Erweiterungen</li>
+        <li><a href="/de/Packen_einer_XUL_Anwendung" title="de/Packen_einer_XUL_Anwendung">Packen einer XUL Anwendung</a>: Informationen über das Packen von XUL Anwendungen</li>
+        <li><a href="/de/Chrome_Registrierung" title="de/Chrome_Registrierung">Chrome Registrierung</a></li>
+      </ul>
diff --git a/files/de/plugins/beispiele_und_testfälle/index.html b/files/de/plugins/beispiele_und_testfälle/index.html
new file mode 100644
index 0000000000..484eef64f4
--- /dev/null
+++ b/files/de/plugins/beispiele_und_testfälle/index.html
@@ -0,0 +1,19 @@
+---
+title: Beispiele und Testfälle
+slug: Plugins/Beispiele_und_Testfälle
+tags:
+  - Add-ons
+  - Plugins
+translation_of: Archive/Plugins/Samples_and_Test_Cases
+---
+<h2 id="NPAPI_Plugin_Beispiele">NPAPI Plugin Beispiele</h2>
+<p>Einige NPAPI Plugin-Beispiele finden sich im Mozilla Quellcode unter <a class=" external" href="http://mxr.mozilla.org/mozilla-central/source/modules/plugin/sdk/samples/" title="http://mxr.mozilla.org/mozilla-central/source/modules/plugin/sdk/samples/">/modules/plugin/sdk/samples</a>.</p>
+<p>Die Beispiele können unter Umständen nicht mehr auf allen Plattformen kompiliert werden. Es gibt Pläne die Beispiel-Plugins zu erneuern - bessere Organisation, aktualisierte Build-Systeme sowie Builds auf allen Plattformen. Auch wenn ein Beispiel nicht kompiliert werden kann, sind sie als Code-Referenz immer noch sehr wertvoll.</p>
+<p>Es gibt eine <a href="/de/Kompilierung_des_npruntime_Beispiel-Plugins_in_Visual_Studio" title="de/Kompilierung_des_npruntime_Beispiel-Plugins_in_Visual_Studio">Anleitung zur Kompilierung des npruntime Beispiels in Visual Studio</a>.</p>
+<p>Zusätzlich zu diesen Beispielen gibt es zwei weitere Plugins, die hilfreich sein könnnten.</p>
+<ul> <li><a class="external" href="http://mxr.mozilla.org/seamonkey/source/modules/plugin/tools/spy/">Spy</a></li> <li><a class="external" href="http://mxr.mozilla.org/seamonkey/source/modules/plugin/tools/tester/">Tester</a></li>
+</ul>
+<h2 id="NPAPI_Plugin_Testfälle">NPAPI Plugin Testfälle</h2>
+<ul> <li>mozilla.org QA <a class="external" href="http://www.mozilla.org/quality/browser/front-end/testcases/plugins/">Plugin Testfälle</a></li> <li>mozilla.org QA <a class="external" href="http://www.mozilla.org/quality/browser/front-end/testcases/oji/">OJI Testfälle</a></li> <li><a class="external" href="http://www.mozilla.org/projects/plugins/plugins_testing_checklist.html">Test-Checkliste zur Plugin Verifizierung</a> (darunter <a class="external" href="http://www.mozilla.org/quality/smoketests/">SmokeTesting</a>)</li>
+</ul>
+<p>{{ languages( { "en": "en/Plugins/Samples_and_Test_Cases" } ) }}</p>
diff --git a/files/de/plugins/flash-aktivierung_colon__browser-vergleich/index.html b/files/de/plugins/flash-aktivierung_colon__browser-vergleich/index.html
new file mode 100644
index 0000000000..a9f1244e75
--- /dev/null
+++ b/files/de/plugins/flash-aktivierung_colon__browser-vergleich/index.html
@@ -0,0 +1,139 @@
+---
+title: 'Aktivierung von Flash: Vergleich verschiedener Browser'
+slug: 'Plugins/Flash-Aktivierung:_Browser-Vergleich'
+translation_of: 'Plugins/Flash_Activation:_Browser_Comparison'
+---
+<p>Alle wichtigen Browser haben inzwischen eine Funktion implementiert, durch welche Inhalte von Adobe Flash standardmäßig nicht ausgeführt werden, aber in jedem dieser Browser gibt es Unterschiede in Implementierung und Benutzeroberfläche. Diese Anleitung zeigt sowohl die Gemeinsamkeiten als auch die Unterschiede der Browser, damit Webentwickler dem Endnutzer die bestmögliche Erfahrung bieten können. Eine weitere Anleitung unterstützt die Website-Autoren bei der <a href="/en-US/docs/Plugins/Flash_to_HTML5">Migration weg von Flash</a>.</p>
+
+<p>Die Entscheidung zur Aktivierung von Flash wird in jedem Browser vom Nutzer für jede Website einzeln getroffen. <span id="result_box" lang="de"><span>Wenn eine Website versucht, Flash zu verwenden</span></span>, sieht der Nutzer im Browser eine Anfrage, ob Flash für diese Website aktiviert werden soll. Es sind also keine Erweiterungen zum Blockieren von Flash mehr erforderlich, da diese Funktionalität nun in den Browser integriert ist.</p>
+
+<table class="fullwidth-table">
+ <thead>
+  <tr>
+   <td> </td>
+   <th scope="col">Mozilla Firefox</th>
+   <th scope="col">Google Chrome</th>
+   <th scope="col">Microsoft Edge</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Name der Einstellung</th>
+   <td>Nachfragen, ob aktiviert werden soll</td>
+   <td>standardmäßig HTML5</td>
+   <td>Click-to-run</td>
+  </tr>
+  <tr>
+   <th scope="row">Standardwert für 'application/x-shockwave-flash' in navigator.mimeTypes, sollte Flash inaktiv sein</th>
+   <td>ja</td>
+   <td>nein</td>
+   <td>nein</td>
+  </tr>
+  <tr>
+   <th scope="row">Wert für 'application/x-shockwave-flash' in navigator.mimeTypes, sollte der Nutzer Flash erlaubt haben</th>
+   <td>ja</td>
+   <td>ja</td>
+   <td>ja</td>
+  </tr>
+  <tr>
+   <th scope="row">&lt;object&gt; mit Ersatzinhalt löst UI aus</th>
+   <td>ja, mit Ausnahmen</td>
+   <td>nein</td>
+   <td>ja</td>
+  </tr>
+  <tr>
+   <th scope="row">kleines/verstecktes Flash löst erweiterte UI aus</th>
+   <td>ja</td>
+   <td>nein</td>
+   <td>nein</td>
+  </tr>
+  <tr>
+   <th scope="row">Durch Erlauben von Flash wird die Seite automatisch neu geladen</th>
+   <td>nein</td>
+   <td>ja</td>
+   <td>ja</td>
+  </tr>
+  <tr>
+   <th scope="row">Andere Funktionen im Zusammenhang mit Flash</th>
+   <td><a href="/en-US/docs/Plugins/Blocking_By_Domain">Domain Blocking</a></td>
+   <td><a href="https://sites.google.com/a/chromium.org/dev/flash-roadmap#TOC-Plugin-Power-Savings-Mode-Shipped:-Chrome-42---Sept-2015-">Plugin Power Saver</a></td>
+   <td><a href="https://blogs.windows.com/msedgedev/2016/04/07/putting-users-in-control-of-flash/#fLGW6bYgr4BpSHIr.97">Peripheral Content Pause</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Jeder Browseranbieter hat eine Strategie über die zukünftige Unterstützung von Flash und die Interaktionen der Nutzer mit Flash erstellt. Der <a href="/en-US/docs/Plugins/Roadmap">Plan von Firefox für Flash</a> beinhaltet auch Links zu den Plänen und Informationen anderer Anbieter.  </p>
+
+<h2 id="Vergleich_der_Benutzeroberflächen">Vergleich der Benutzeroberflächen</h2>
+
+<h3 id="Mozilla_Firefox">Mozilla Firefox</h3>
+
+<p>Wenn eine Seite versucht, Flash zu nutzen, wird innerhalb dieser Seite eine Aufforderung zur Aktivierung eingeblendet. Außerdem erscheint ein Symbol an der linken Seite der Adressleiste. Der Nutzer kann entweder auf das Flash-Element in der Seite oder auf das Symbol in der Adressleiste klicken, um Flash zu aktivieren.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15127/Firefox-flash-inpage.png" style="height: 389px; width: 673px;"></p>
+
+<p>Der Nutzer hat die Wahl, ob er Flash nur für die aktuelle Sitzung erlauben möchte, oder ob die Entscheidung für kommende Sitzungen beibehalten werden soll:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15131/Firefox-notification.png" style="height: 199px; width: 426px;"></p>
+
+<h3 id="Google_Chrome">Google Chrome</h3>
+
+<p>Die Anzeige wird innerhalb der Seite eingeblendet, wenn diese versucht, Flash zu nutzen. Es wird kein alternativer Inhalt angezeigt.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15141/Chrome-flash-inpage.png" style="height: 412px; width: 635px;"></p>
+
+<p>Nachdem der Nutzer auf das Plugin-Element geklickt hat, öffnet sich ein Fenster, in dem Flash erlaubt werden kann.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15161/Chrome-flash-prompt.png" style="height: 182px; width: 516px;"></p>
+
+<p>Sollte die Seite einen alternativen Inhalt für ein object-Element bereitstellen, so zeigt Chrome diesen Inhalt an und fragt nicht, ob Flash aktiviert werden soll. Wenn ein Flash-Element für den Nutzer unsichtbar ist, erhält der Nutzer auch keine sichtbare Aufforderung. Der Nutzer kann aber auf jeder Seite auf das Informationssymbol auf der linken Seite der Adresszeile klicken, um die Seiteninformationen zu öffnen und dort Flash zu erlauben.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15145/Chrome-info-icon.png" style="height: 544px; width: 399px;"></p>
+
+<h3 id="Microsoft_Edge">Microsoft Edge</h3>
+
+<p>Die Aufforderung wird innerhalb der Seite angezeigt, wenn diese versucht, Flash zu nutzen. Zusätzlich erscheint ein Symbol auf der rechten Seite der Adressleiste. Der Nutzer kann auf das Flash-Element klicken, um die Aktivierungsoptionen zu sehen.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15135/Edge-flash-inpage.png" style="height: 227px; width: 611px;"></p>
+
+<p>Der Nutzer hat die Wahl, Flash nur für diese oder für alle weiteren Sitzungen auf dieser Website zu aktivieren:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15139/Edge-flash-inpage.png" style="height: 173px; width: 453px;"></p>
+
+<h2 id="Tipps_für_Seitenautoren">Tipps für Seitenautoren</h2>
+
+<p>Wenn Flash-Elemente sehr klein, versteckt oder von anderen Inhalten überdeckt sind, werden Nutzer nicht bemerken, dass Flash für diese Seite benötigt wird und werden verwirrt sein. Sogar wenn das Plugin-Element eigentlich versteckt ist, sollte die Seite es sichtbar darstellen und die Größe erst dann ändern bzw. es verstecken, wenn der Nutzer das Plugin aktiviert hat. Dies kann mithilfe einer JavaScript-Funktion ermöglicht werden, welche beim Aktivieren des Plugins aufgerufen wird.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">pluginCreated</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="comment token">// We don't need to see the plugin, so hide it by resizing</span>
+  <span class="keyword token">var</span> plugin <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'myPlugin'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  plugin<span class="punctuation token">.</span>height <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span>
+  plugin<span class="punctuation token">.</span>width <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span>
+  plugin<span class="punctuation token">.</span><span class="function token">callPluginMethod</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>Der HTML-Code spezifiziert standardmäßig die Größe eines Flash-Objekts, wodurch es sichtbar wird. Dies kann beispielsweise so realisiert werden:</p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="comment token">&lt;!-- Give the plugin an initial size so it is visible --&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>object</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>application/x-shockwave-flash<span class="punctuation token">"</span></span> <span class="attr-name token">data</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>myapp.swf<span class="punctuation token">"</span></span>
+      <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>myPlugin<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>300<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>300<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>param</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>callback<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pluginCreated()<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>object</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>Der in HTML definierte <code>callback</code> Parameter kann in Flash unter Nutzung seiner <code>flash.external.ExternalInterface</code> API aufgerufen werden.</p>
+
+<h3 id="Verwenden_eines_Skript-Callbacks_um_festzustellen_ob_ein_Plugin_aktiviert_ist">Verwenden eines Skript-Callbacks, um festzustellen, ob ein Plugin aktiviert ist</h3>
+
+<p><span id="result_box" lang="de"><span>Ebenso sollte das Skript einer Site nicht versuchen, ein Plugin sofort nach der Erstellung zu skripten.</span></span> Stattdessen sollte das Plugin-Objekt über eine JavaScript-Funktion aufgerufen werden. Diese Funktion kann nun in der Gewissheit, dass alles eingerichtet und fertig ist, den Aufruf in das Plugin erstellen</p>
+
+<p>Richten Sie zuerst Ihr HTML mit einem Callback ein, welcher die JavaScript-Funktion <code>pluginCreated()</code> aufruft, beispielsweise so:</p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>object</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>application/x-my-plugin<span class="punctuation token">"</span></span> <span class="attr-name token">data</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>somedata.mytype<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>myPlugin<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>param</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>callback<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pluginCreated()<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>object</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>Die Funktion <code>pluginCreated()</code> ist dann für das Einrichten Ihres Skripts und für jeden Aufruf zurück in das Plugin verantwortlich:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">pluginCreated</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'myPlugin'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">callPluginMethod</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
diff --git a/files/de/plugins/index.html b/files/de/plugins/index.html
new file mode 100644
index 0000000000..6ee5358256
--- /dev/null
+++ b/files/de/plugins/index.html
@@ -0,0 +1,88 @@
+---
+title: Plugins
+slug: Plugins
+tags:
+  - Add-ons
+  - Plugins
+translation_of: Archive/Plugins
+---
+<div>
+ <p>Plugins (oder Plug-ins) sind Softwaremodule zur Darstellung von speziellen Inhalten im Browserfenster, die der Browser selbst nicht interpretieren und darstellen kann. Ein bekanntes Beispiel ist das Adobe Reader Plugin, mit dem der Anwender PDF-Dateien direkt im Browserfenster öffnen kann. Mit dem Quicktime und Realplayer Plugin können Videos in verschiedenen Formaten und mit unterschiedlichen Transportprotokollen auf einer Webseite abgespielt werden.</p>
+ <p>Plugins können für Anwendungen nützlich sein, die das Mozilla Framework verwenden. Zum Beispiel benutzt {{ interwiki('wikipedia', 'ActiveState_Komodo', 'ActiveState Komodo') }} Plugins, um den {{ interwiki('wikipedia', 'Scintilla_(editing_component)', 'Scintilla Editor') }} in seine XUL-basierte Benutzeroberfläche einzubetten.</p>
+ <p>Plugins werden mit der <strong>NPAPI</strong> erstellt, der browserübergreifenden API für Plugins. Die NPAPI ist in der <a href="/de/Gecko_Plugin_API_Referenz" title="de/Gecko_Plugin_API_Referenz">Gecko Plugin API Referenz</a> dokumentiert. Um ein Plugin scriptingfähig zu machen, kann die <a href="/de/Gecko_Plugin_API_Referenz/Scripting_plugins" title="de/Gecko_Plugin_API_Referenz/Scripting_plugins">npruntime</a> verwendet werden. Die älteren, <a href="/de/XPCOM" title="de/XPCOM">XPCOM</a>- und <a href="/de/LiveConnect" title="de/LiveConnect">LiveConnect</a>- basierten APIs für Plugins sollten nicht mehr benutzt werden. Die in diesen APIs verwendeten Technologien werden weiterhin benutzt, jedoch nicht mehr für Plugins.</p>
+ <p>Für eine einfachere Erstellung von scriptgesteuerten Grafik- und Animationskomponenten können <a href="/de/SVG" title="de/SVG">SVG</a> und <a href="/de/HTML/Canvas" title="de/HTML/Canvas">Canvas</a> benutzt werden.</p>
+ <p>Plugins unterscheiden sich von <a href="/de/Erweiterungen" title="de/Erweiterungen">Erweiterungen</a>, welche die Funktionalität des Browsers selbst verändern oder erweitern. Weiterhin unterscheiden sich Plugins von <a href="/de/Suche_Plugins" title="de/Suche_Plugins">OpenSearch Plugins</a>, die zusätzliche Suchmaschinen in der Suchleiste implementieren.</p>
+</div>
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h4 id="Dokumentation" name="Dokumentation"><a href="/Special:Tags?tag=Plugins&amp;language=de" title="Special:Tags?tag=Plugins&amp;language=de">Dokumentation</a></h4>
+    <dl>
+     <dt>
+      <a href="/de/Gecko_Plugin_API_Referenz" title="de/Gecko_Plugin_API_Referenz">Gecko Plugin API Referenz</a> (NPAPI)</dt>
+     <dd>
+      <small>Dieses Dokument beschreibt die Schnittstellen für Anwendungsprogramme zur Erstellung von NPAPI Plugins.</small></dd>
+     <dt>
+      <a href="/de/Gecko_Plugin_API_Referenz/Scripting_plugins" title="de/Gecko_Plugin_API_Referenz/Scripting_plugins">Scripting plugins</a> (npruntime)</dt>
+     <dd>
+      <small>Dieses Dokument beschreibt die neuen browserübergreifenden NPAPI-Erweiterungen, mit denen scriptingfähige Plugins erstellt werden können, die auch auf Scriptobjekte im Browser zugreifen können.</small></dd>
+     <dt>
+      <a href="/de/Gecko_SDK" title="de/Gecko_SDK">Gecko Plugin SDK</a></dt>
+     <dd>
+      <small>Das Gecko plugin SDK enthält alle Werkzeuge und Headerdateien die benötigt werden, um scriptingfähige Plugins für Gecko erstellen zu können. Enthalten sind auch der XPIDL Compiler/Linker und die neueste Version der <code>npapi.h</code>.</small></dd>
+     <dt>
+      <a href="/de/Plugins/Out_of_process_Plugins" title="de/Plugins/Out_of_process_Plugins">Out-of-process Plugins</a></dt>
+     <dd>
+      <small>Firefox 3.6.4 führt sogenannte „out-of-process“ Plugins ein, welche in einzelnen Threads ausgeführt werden, sodass der Crash eines Plugins nicht mehr den kompletten Browser betrifft.</small></dd>
+     <dt>
+      <a href="/de/XPInstall_zur_Installation_von_Plugins_verwenden" title="de/XPInstall_zur_Installation_von_Plugins_verwenden">Verwendung von XPInstall zur Installation von Plugins</a></dt>
+     <dd>
+      <small><a href="/de/XPInstall" title="de/XPInstall">XPInstall</a> ermöglicht eine einfache Installation von Plugins durch den Anwender innerhalb der Browseroberfläche, ohne dass ein separates Installationsprogramm gestartet werden muss.</small></dd>
+     <dt>
+      <a class="external" href="http://developer.apple.com/internet/webcontent/detectplugins.html">Plugins finden</a></dt>
+     <dd>
+      <small>"Da es offensichtlich Situationen gibt, in denen es sinnvoll ist, Plugins zu benutzten, stellt sich die Frage, wie zu verfahren ist, wenn das erforderliche Plugin nicht installiert ist."</small></dd>
+     <dt>
+      <a href="/de/Scripting_Plugins/Macromedia_Flash" title="de/Scripting_Plugins/Macromedia_Flash">Scripting Plugins: Macromedia Flash</a></dt>
+     <dd>
+      <small>Dieser Artikel erklärt, wie JavaScript benutzt werden kann, um auf Methoden des Flash-Plugins zuzugreifen und wie man FSCommands verwendet, um auf JavaScript-Funktionen aus der Flash-Animation heraus aufzurufen.</small></dd>
+     <dt>
+      <a href="/de/Plugins/Das_Erstinstallationsproblem" title="de/Plugins/Das_Erstinstallationsproblem">Plugins: Das Erstinstallationsproblem</a></dt>
+     <dd>
+      <small>Das Erstinstallationsproblem tritt auf, wenn ein Plugin oder integrierbare Softwarekomponenten sich auf einem System installieren, bevor irgendein Gecko-basierter Browser vorhanden ist.</small></dd>
+     <dt>
+      <a href="/de/ActiveX_Control_zur_Integration_von_Netscape_Plug-ins_im_IE" title="de/ActiveX_Control_zur_Integration_von_Netscape_Plug-ins_im_IE">ActiveX Control zur Integration von Netscape Plug-ins im IE</a></dt>
+     <dd>
+      <small>Microsoft hat die Unterstützung für Netscape-Plugins aus seinem Browser IE 5.5 SP2 (und höher) entfernt. Für Plugin-Autoren dürfte dieses Projekt eine große Arbeitserleichterung sein!</small></dd>
+     <dt>
+      <a href="/de/Plugins/Beispiele_und_Testfälle" title="de/Plugins/Beispiele_und_Testfälle">Plugins: Beispiele und Testfälle</a></dt>
+     <dd>
+      <small>NPAPI Plugin Beispiele und Testfälle.</small></dd>
+     <dt>
+      <a href="/de/Plugins/Externe_Seiten_zur Plugin-Erstellung">Externe Seiten zur Plugin-Erstellung</a></dt>
+     <dd>
+      <small>Externe Projekte, Frameworks und Blogeinträge, die zur Erstellung von Plugins nützlich sein können.</small></dd>
+     <dt>
+      <a href="/de/XEmbed_Erweiterung_für_Mozilla_Plugins" title="de/XEmbed_Erweiterung_für_Mozilla_Plugins">XEmbed Erweiterung für Mozilla Plugins</a></dt>
+     <dd>
+      <small>Neuere Versionen von Mozilla enthalten eine Erweiterung zum Erstellen von Plugins, die XEmbed verwendet, anstatt der alten Xt-basierten Hauptschleife, die von den meisten Plugins seit der Zeit von Netscape 3.x benutzt wird.</small></dd>
+    </dl>
+    <p><span class="alllinks"><a href="/Special:Tags?tag=Plugins&amp;language=de" title="Special:Tags?tag=Plugins&amp;language=de">Alles ansehen...</a></span></p>
+   </td>
+   <td>
+    <h4 id="Community" name="Community">Community</h4>
+    <ul>
+     <li>Mozillas Plugin Foren:</li>
+    </ul>
+    <p>{{ DiscussionList("dev-tech-plugins", "mozilla.dev.tech.plugins") }}</p>
+    <h4 id=".C3.84hnliche_Themen" name=".C3.84hnliche_Themen">Verwandte Themen</h4>
+    <dl>
+     <dd>
+      <a href="/de/Erweiterungen" title="de/Erweiterungen">Erweiterungen</a>, <a href="/de/SVG" title="de/SVG">SVG</a>, <a href="/de/HTML/Canvas" title="de/HTML/Canvas">Canvas</a></dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<p>{{ languages( { "en": "en/Plugins", "es": "es/Plugins", "fr": "fr/Plugins", "ja": "ja/Plugins", "pl": "pl/Wtyczki", "pt": "pt/Plugins", "ko": "ko/Plugins" } ) }}</p>
diff --git a/files/de/preferences_system/index.html b/files/de/preferences_system/index.html
new file mode 100644
index 0000000000..882de5958a
--- /dev/null
+++ b/files/de/preferences_system/index.html
@@ -0,0 +1,36 @@
+---
+title: Preferences System
+slug: Preferences_System
+tags:
+  - XUL
+translation_of: Mozilla/Preferences/Preferences_system
+---
+<p>Dieses Dokument beschreibt das neue Aviary Toolkit Einstellungssystem. Mit der Verwendung dieses Systems ist es möglich Einstellungsfenster zu erstellen, die auf verschiedenen Plattformen (Windows, MacOS X und GNOME) angezeigt und ausgeführt werden können.</p>
+<p><strong>Hinweis:</strong> Das Einstellungssystem ist erst ab Firefox/Thunderbird 1.5 (und deren alpha und beta Releases) verfügbar. Es kann nicht in Firefox 1.0-basierenden Anwendungen und Erweiterungen benutzt werden.</p>
+<p>Das neue System ist durch einige <a href="/en/XUL" title="en/XUL">XUL</a> Elemente und Attribute implementiert. Referenzinformationen über diese sind unter den folgenden Links verfügbar:</p>
+<div class="moreinfo">  <p><strong><a href="/de/docs/Preferences_System">Einstellungssystem</a>dokumentation:</strong></p>  <ul>    <li>Einführung: <a href="/de/docs/Preferences_System/Erste_Schritte">Erste Schritte</a> | <a href="/de/docs/Preferences_System/Beispiele">Beispiele</a> | <a href="/de/docs/Preferences_System/Fehlerbehebung">Fehlerbehebung</a></li>    <li>Referenz: <code><a href="/de/docs/Mozilla/Tech/XUL/prefwindow" title="prefwindow">prefwindow</a></code> | <code><a href="/de/docs/Mozilla/Tech/XUL/prefpane" title="prefpane">prefpane</a></code> | <code><a href="/de/docs/Mozilla/Tech/XUL/preferences" title="preferences">preferences</a></code> | <code><a href="/de/docs/Mozilla/Tech/XUL/preference" title="preference">preference</a></code> | <a href="/de/docs/Preferences_System/Neue_Attribute">XUL Attribute</a></li>  </ul></div>
+<h3 id="Verwendung">Verwendung</h3>
+<p>Der Code für ein typisches Einstellungsfenster könnte in etwa so aussehen:</p>
+<pre>&lt;prefwindow id="appPreferences"
+            xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
+  &lt;prefpane id="pane1" label="&amp;pane1.title;"&gt;
+    &lt;preferences&gt;
+      &lt;preference id="pref1" name="pref.name" type="bool"/&gt;
+    &lt;/preferences&gt;
+
+   .. UI elements that refer to the preferences above, e.g.:
+    &lt;checkbox id="check1" preference="pref1"
+              label="&amp;check1.label;" accesskey="&amp;check1.accesskey;"/&gt;
+  &lt;/prefpane&gt;
+
+  &lt;prefpane id="pane2" label="&amp;pane2.title;" src="chrome://uri/to/pane.xul"/&gt;
+&lt;/prefwindow&gt;
+</pre>
+<p>Die pane Inhalte können inline festgelegt werden oder eine externe chrome URI sorgt für die Inhalte über ein dynamisches Overlay. Die <a class=" external" href="http://en.wikipedia.org/wiki/Human_interface_guidelines" title="http://en.wikipedia.org/wiki/Human_interface_guidelines">HIGs</a> sollten für die angestrebten Plattformen gründlich gelesen werden und der XUL Präprozessor sollte, wenn nötig, verwendet werden, um unterschiedlich passende Fenstertitel festzulegen. Außerdem sollte man vorsichtig sein, wenn man die Breite des Fensters (in em) angibt, genau wie die Höhe des Fenster (in em), denn bei einigen Plattformen verändert sich die Fenstergröße nicht so wie das ausgewählte Panel verändert wird (z.B. Windows).</p>
+<h3 id="Verwendung_in_XULRunner_Anwendungen">Verwendung in XULRunner Anwendungen</h3>
+<p>Wird <code>openDialog()</code> aufgerufen, um einen Einstellungsdialog zu öffnen, sollte "toolbar" im <code>features</code> String enthalten sein. Beispiel:</p>
+<pre class="eval">var features = "chrome,titlebar,toolbar,centerscreen,modal";
+window.openDialog(url, "Preferences", features);
+</pre>
+<h3 id="Bugzilla">Bugzilla</h3>
+<p>Die Komponente für Bugs in den „Preferences bindings“ (aber nicht in den Options UIs von Firefox/Thunderbird) ist »Toolkit:Preferences« (<a class="link-https" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Toolkit">Fehler melden</a> <a class="link-https" href="https://bugzilla.mozilla.org/buglist.cgi?query_format=advanced&amp;product=Toolkit&amp;component=Preferences&amp;resolution=---&amp;chfieldto=Now">Offene Bugs auflisten</a>).</p>
diff --git a/files/de/profile_manager/index.html b/files/de/profile_manager/index.html
new file mode 100644
index 0000000000..06b118354e
--- /dev/null
+++ b/files/de/profile_manager/index.html
@@ -0,0 +1,173 @@
+---
+title: Profilmanager
+slug: Profile_Manager
+translation_of: Mozilla/Profile_Manager
+---
+<p>Firefox und andere XULRunner Anwendungen speichern Benutzereinstellungen und -daten in speziellen Ordnern, den sogenannten <a class="external" href="http://support.mozilla.com/en-US/kb/Profiles" title="http://support.mozilla.com/en-US/kb/Profiles">Profilen</a>. Firefox stellt ein eingebautes Hilfsprogramm zum <a class="external" href="http://support.mozilla.com/en-US/kb/Managing%20profiles" title="http://support.mozilla.com/en-US/kb/Managing profiles">Verwalten dieser Profile</a> bereit, allerdings könnte dieser zukünftig entfernt werden (siehe <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=214675" title="https://bugzilla.mozilla.org/show_bug.cgi?id=214675">bug 214675</a>), weshalb eine neue, eigenständige Profilmanager-Anwendung entwickelt wurde die mit jeder XULRunner-Anwendung funktioniert und etliche Funktionen enthält, die in der in Firefox eingebauten Version nicht zu finden waren.</p>
+
+<h2 id="Herunterladen">Herunterladen</h2>
+
+<h4 id="Binaries">Binaries</h4>
+
+<p><a name="downloading">Du kannst die Profilmanager-Builds unter </a><a class="link-ftp" href="ftp://ftp.mozilla.org/pub/mozilla.org/utilities/profilemanager/1.0/" title="ftp://ftp.mozilla.org/pub/mozilla.org/utilities/profilemanager/1.0/">ftp://ftp.mozilla.org/pub/mozilla.org/utilities/profilemanager/1.0/</a> herunterladen. Es gibt kein Installationsprogramm; entpacke einfach die Dateien aus dem Archiv.</p>
+
+<p>Systemanforderungen:</p>
+
+<ul>
+ <li>Mac: ein Intel Prozessor, i386 oder x86_64</li>
+ <li>Linux: jede Version auf der Firefox 4.0 läuft</li>
+ <li>Windows: XP oder später</li>
+</ul>
+
+<h4 id="Quelltext">Quelltext</h4>
+
+<p>You can download the source as well:</p>
+
+<p style="margin-left: 40px;"><code>hg clone <a class="external" href="http://hg.mozilla.org/automation/profilemanager" rel="freelink">http://hg.mozilla.org/automation/profilemanager</a></code>/</p>
+
+<p>Instructions for building can be found in <a class="external" href="http://hg.mozilla.org/automation/profilemanager/file/tip/BUILD.txt" title="http://hg.mozilla.org/automation/profilemanager/file/tip/BUILD.txt">BUILD.txt</a>.</p>
+
+<h2 id="Fehler_melden">Fehler melden</h2>
+
+<p>Fehler im Profilmanager sollten in Bugzilla unter <a class="link-https" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Testing&amp;Component=ProfileManager" title="https://bugzilla.mozilla.org/enter_bug.cgi?product=Testing&amp;Component=ProfileManager">Testing -&gt; ProfileManager</a> berichtet werden.</p>
+
+<h2 id="Profilmanager_starten">Profilmanager starten</h2>
+
+<p><a name="starting">Starte einfach die profilemanager.exe (unter Windows) oder profilemanager-bin (unter Linux und Mac). Standardmäßig verwaltet der Profilmanager Firefox-Profile, aber du kannst ihn auch für Profile anderer Xulrunner-Anwendungen wie Thunderbird oder SeaMonkey verwenden. Um den Profilmanager mit einer anderen Anwendung als Firefox zu verwenden, musst du ihn mit dem Namen der gewünschten Anwendung als Argument starten, z.B.:</a></p>
+
+<p>
+ </p><p style="margin-left: 40px;"><a name="starting"><code>profilemanager-bin seamonkey</code></a></p>
+<p></p>
+
+<h2 id="Profile_und_Programmversionen"><a name="starting">Profile und Programmversionen</a></h2>
+
+<p><a name="starting"></a><a name="appversions">Der Profilmanager verwaltet zwei verschiedene Listen: eine mit Benutzerprofilen und die andere mit den Anwendungsversionen, die mit den Profilen benutzt werden kann. Standardmäßig heißt das, er beobachtet eine Liste der Firefox-Installationen auf deinem System sowie eine Liste der Profile, die von Firefox genutzt werden.</a></p>
+
+<p><a name="appversions">Ein Profil kann jeweils mit einer bestimmten Firefox-Installation verknüpft werden, sodass diese Version von Firefox startet, wenn das betreffende Profil gewählt wird. Z.B. könnte Profil A mit einer Installation von Firefox 3.6.10 verknüpft sein, Profil B mit einer Installation von Firefox 3.5.3.</a></p>
+
+<p>Nach dem Start sucht der Profilmanager in einigen Standard-Pfaden nach installierten Versionen von Firefox bzw. anderen Anwendungen, für die du den Profilmanager verwendest. Außerdem kannst du Firefox-Versionen manuell hinzufügen, indem du die Schaltfläche "Firefox-Versionen verwalten..." anklickst:</p>
+
+<p><a name="appversions"> <img alt=""></a></p>
+
+<p><a name="appversions">Jede Firefox-Version in der Liste hat die folgenden Eigenschaften: Pfad, Version und Standard. Die Eigenschaft "Standard" gibt an, dass diese Firefox-Version mit Profilen verwendet wird, mit denen keine bestimmte Anwendung verknüpft ist. </a></p>
+
+<p><a name="appversions"> </a></p>
+
+<p>
+ </p><h2 id="Ein_Profil_erstellen"><a name="appversions">Ein Profil erstellen</a></h2>
+<p></p>
+
+<p><a name="appversions"></a><a name="create">To create a new profile, just click the New button from Profile Manager's toolbar.  A dialog will appear that allows you to specify the profile's name, and optionally the profile's path, and the version of Firefox (or other application) that will be used with this profile:</a></p>
+
+<p><a name="create"> </a></p>
+
+<p><a name="create"><img alt=""></a></p>
+
+<p><a name="create"> </a></p>
+
+<h2 id="Firefox_mit_einem_Profil_starten"><a name="create">Firefox mit einem Profil starten</a></h2>
+
+<p><a name="create"></a><a name="launching">To launch Firefox with a specific profile, select the profile in the main window, and hit the "Start Firefox" button:  Firefox will be launched with that profile, and Profile Manager will terminate.  The version of Firefox which will be launched is indicated in the "Firefox version" dropdown in the Launch Options box:</a></p>
+
+<p><a name="launching"> </a></p>
+
+<p><a name="launching"><img alt=""></a></p>
+
+<p><a name="launching">Für Firefox sind mehrere zusätzliche Startparameter verfügbar. Diese führen dazu, dass Firefox mit unterschiedlichen Kommanodzeilenargumenten gestartet wird.  Auf der Seite </a><a href="/en/Command_Line_Options" title="en/Command Line Options">Command Line Options</a> erhältst du eine Beschreibung dieser Parameter.</p>
+
+<table style="width: 400px;">
+ <thead>
+  <tr>
+   <th scope="col">Startoption</th>
+   <th scope="col">Kommandozeilenparameter</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Führe Firefox im Offline-Modus aus</td>
+   <td><a href="/en/Command_Line_Options#-offline" title="https://developer.mozilla.org/en/Command_Line_Options#-offline">-offline</a></td>
+  </tr>
+  <tr>
+   <td>Führe Firefox im Safe-Mode aus</td>
+   <td><a href="/en/Command_Line_Options#-safe-mode" title="https://developer.mozilla.org/en/Command_Line_Options#-safe-mode">-safe-mode</a></td>
+  </tr>
+  <tr>
+   <td>Starte Firefox mit einer Konsole</td>
+   <td><a href="/en/Command_Line_Options#-console" title="https://developer.mozilla.org/en/Command_Line_Options#-console">-console</a></td>
+  </tr>
+  <tr>
+   <td>Starte eine neue Instanz</td>
+   <td><a href="/en/Command_Line_Options#-no-remote" title="https://developer.mozilla.org/en/Command_Line_Options#-no-remote">-no-remote</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><strong>Hinweis:</strong> Es ist nicht möglich eine zweite Firefox-Instanz zu starten ohne den Parameter -no-remote anzugeben. Aus diesem Grund wird für dich, unabhängig davon ob diese Startoption gesetzt wurde, automatisch der Parameter -no-remote hinzugefügt, falls du versuchst den Profilmanager zu nutzen und erkannt wird, dass bereits eine Instanz von Firefox läuft.</p>
+
+<p> </p>
+
+<h2 id="Gesperrte_Profile">Gesperrte Profile</h2>
+
+<p><a name="locked">Some profiles may be shown as locked in the main window.   Such profiles are currently being used by an instance of Firefox.  If you attempt to perform any operation on a locked profile, you'll get a warning; if you choose to continue despite the warning, you may encounter errors or corrupt a profile.</a></p>
+
+<p><a name="locked"> </a></p>
+
+<p><a name="locked">It's strongly recommended to avoid operations on locked profiles.  If you need to do something with a locked profile, close the instance of Firefox which is using the profile first.</a></p>
+
+<p><a name="locked"> </a></p>
+
+<h2 id="Sichern_und_Wiederherstellen_von_Profilen"><a name="locked">Sichern und Wiederherstellen von Profilen</a></h2>
+
+<p><a name="locked"></a><a name="backingup">Der Profilmanager bietet zwei unterschiedliche Mechanismen an um Profile zu sichern und wiederherzustellen.</a></p>
+
+<p><a name="backingup"> </a></p>
+
+<h4 id="Backup_folder"><a name="backingup">Backup folder</a></h4>
+
+<p><a name="backingup">Profile Manager has a local backup folder where it can manage profile backups.  This is the easiest way to backup and restore profiles. </a></p>
+
+<p><a name="backingup">To backup a profile:  select the profile you want to backup, and choose "backup to-&gt;backup folder" from the toolbar's Backup menu.  The profile will be backed up, and the backup will appear under the backups column in the main display:</a></p>
+
+<p><a name="backingup"><img alt=""></a></p>
+
+<p><a name="backingup">Wiederherstellen eines Profils: select the backup in the main display, open the context menu, and choose "restore".  When you restore a profile, the backup is retained, so you can restore from the same backup at a later date.</a></p>
+
+<p><a name="backingup">Löschen einer Sicherung:  select the backup in the main display, open the context menu, and choose "delete".</a></p>
+
+<h4 id="Profilarchive"><a name="backingup">Profilarchive</a></h4>
+
+<p><a name="backingup">Profile Manager can also backup to and restore from .zip archives.  Profile Manager does not track these backups in the UI, but using profile archives is an easy way to move profiles between machines.</a></p>
+
+<p><a name="backingup">To backup a profile to an archive:  select the profile you want to backup, and choose "backup to-&gt;archive" from the toolbar's backup menu.  You'll be prompted for a name and location for the archive.</a></p>
+
+<p><a name="backingup">To create a profile from a profile archive:  Select "restore from-&gt;archive" from the toolbar's backup menu.  You'll be prompted for the location of the archive, and then for the name of the profile you'd like to create from the archive.</a></p>
+
+<p><a name="backingup"> </a></p>
+
+<h2 id="Andere_Operationen"><a name="backingup">Andere Operationen</a></h2>
+
+<p><a name="backingup">Ein rechtsklick auf ein Profil in der Profilliste öffnet ein Optionsmenü mit den folgenden Befehlen:</a></p>
+
+<ul>
+ <li><a name="backingup"><strong>Copy</strong><strong> - </strong>erstellt eine Kopie des Profils unter Verwendung eines Namens und eines Ortes deiner Wahl.</a></li>
+ <li><a name="backingup"><strong>Delete</strong> - löscht das Profil und alle damit verknüpften Dateien.</a></li>
+ <li><a name="backingup"><strong>Properties </strong>- shows a dialog that displays the profile's path and last-modified date.</a></li>
+ <li><a name="backingup"><strong>Rename</strong> - erlaubt es dir einen neuen Namen für das Profil anzugeben.</a></li>
+ <li><a name="backingup"><strong>Version </strong>- allows you change the default application version to be used with the profile.</a></li>
+</ul>
+
+<p><a name="backingup"> </a></p>
+
+<h2 id="Zukünftige_Erweiterungen"><a name="backingup">Zukünftige Erweiterungen</a></h2>
+
+<ul>
+ <li><a name="backingup">Möglichkeiten zum installieren/deinstallieren/deaktivieren von Erweiterungen in Profilen.</a></li>
+ <li><a name="backingup">Möglichkeit zum Kopieren bestimmter Daten (z.B. Lesezeichen) zwischen Profilen.</a></li>
+ <li><a name="backingup">Hinzufügen der "Profilgröße" zum Eigenschaftsdialog.</a></li>
+ <li><a name="backingup">Möglichkeit zum zurücksetzen eines Profils (setzt das Profil auf einen Standardzustand zurück mit Außnahme der Lesezeichen und Passwörter).</a></li>
+ <li><a name="backingup">Hinzufügen einer Option zum angeben des Ortes der profiles.ini.</a></li>
+</ul>
+
+<p><a name="backingup"> </a></p>
+
+<p><a name="backingup">{{ languages( {"es" : "es/Administrador_de_perfiles" ,"zh-cn" : "zh-cn/Profile_Manager" } ) }}</a></p>
diff --git a/files/de/qualitätssicherung/stress_testing/index.html b/files/de/qualitätssicherung/stress_testing/index.html
new file mode 100644
index 0000000000..0678872b51
--- /dev/null
+++ b/files/de/qualitätssicherung/stress_testing/index.html
@@ -0,0 +1,12 @@
+---
+title: Qualitätssicherung/Stress_Testing
+slug: Qualitätssicherung/Stress_Testing
+tags:
+  - QA
+  - 'QA:Tools'
+  - Tools
+translation_of: Archive/Mozilla/Stress_testing
+---
+<h3 id="Werkzeuge_für_Microsoft_Windows">Werkzeuge für Microsoft Windows</h3>
+<p>Consume.exe aus den <a class="external" href="http://www.microsoft.com/downloads/details.aspx?FamilyID=9d467a69-57ff-4ae7-96ee-b18c4790cffd&amp;displaylang=en">Windows Server 2003 Resource Kit Tools</a>kann verschiedene Ressourcen verwenden: physikalischer Speicher, CPU-Zeit, Speicherplatz und auch Kernel Pool. Obwohl es für  Win2003 gedacht ist, sollte es problemlos auf WinXP installiert werden können (Win2000-Kompatibilität ist unbekannt). Die einzige Schattenseite ist, dass Sie nicht angeben können, wie viel Rechenleistung prozentual gebraucht werden darf, sondern nur absolut. Also seine Sie gewarnt: Gebrauchen sie sich immer die "-time" Option oder Sie werden den Reset-Button früher drücken müssen als Sie wollen!</p>
+<p>{{ languages( { "en": "en/QA/Stress_Testing", "fr": "fr/Assurance_qualit\u00e9/Tests_en_charge" } ) }}</p>
diff --git a/files/de/quickstart_lokalisierung/index.html b/files/de/quickstart_lokalisierung/index.html
new file mode 100644
index 0000000000..5b9f007bff
--- /dev/null
+++ b/files/de/quickstart_lokalisierung/index.html
@@ -0,0 +1,43 @@
+---
+title: 'Lokalisierung: Kurz-Anleitung'
+slug: Quickstart_Lokalisierung
+tags:
+  - Anleitung
+  - Lokalisierung
+  - l10n
+  - Übersetzung
+translation_of: Mozilla/Localization/Quick_start_guide
+---
+<p>Willkommen bei der Mozilla Lokalisierung (kurz l10n)!</p>
+
+<p>Ob Du Deine eigene Lokalisierungs-Community für Deine Sprache im Mozilla-Projekt gründen oder einer bereits vorhandenen beitreten möchtest - hier bist Du richtig. Hier erfährst Du alles Wesentliche über die technischen Grundlagen des Mozilla l10n-Programms. Wir erklären Dir alle notwendigen Schritte, vom Aufsetzen einer entsprechenden Umgebung bis hin zum Testen und Veröffentlichen Deiner eigenen Lokalisierung. Dabei lernst Du alles über die verschiedenen Projekte, zu denen Du beitragen kannst und über die dafür benötigten Werkzeuge.</p>
+
+<p>Wir nehmen unsere Beispiele gerne aus dem Firefox-Projekt, weil dessen Lokalisierung vom gesamten Mozilla-Projekt am weitesten fortgeschritten ist. Kurz vor Ende dieser Anleitung solltest Du in der Lage sein, etwas an Deiner lokalen Firefox-Installation zu ändern und diese Änderung anschließend in der Oberfläche zu sehen. Am Ende wirst Du alle notwendigen Werkzeuge haben um mit dem Lokalisieren zu beginnen!</p>
+
+<p>Bitte denke daran, dass diese Anleitung nur eine Einweisung in die technischen Aspekte der Mozilla-Lokalisierung ist. Auf der Seite <a class="link-https" href="https://wiki.mozilla.org/L10n:Localization_Process" title="https://wiki.mozilla.org/L10n:Overview">l10n-Prozess</a> erfährst Du alles über den Gesamtprozess.</p>
+
+<div style="width: 25%; background-color: #4AA02C; float: left; display: block; margin: 1.5%; border: 1px solid #C4C295; text-align: center; padding: 2.5%; padding-top: 0px;">
+<h2 id="Vorbereiten"><a href="/en-US/docs/Mozilla/Localization/Quick_start_guide/Initial_setup" title="en/Localization_Quick_Start_Guide/Initial_setup">Vorbereiten</a></h2>
+Technische Vorbereitungen vor der Lokalisierung.</div>
+
+<div style="width: 25%; background-color: #A2BFF4; float: left; display: block; margin: 1.5%; border: 1px solid #C4C295; text-align: center; padding: 2.5%; padding-top: 0px;">
+<h2 id="Übersetzen"><a href="/en-US/docs/Mozilla/Localization/Quick_start_guide/Translation_phase" title="en/Localization_Quick_Start_Guide/Translation_phase">Übersetzen</a></h2>
+L10n Anleitungen zu Übersetzungs-Werkzeugen.</div>
+
+<div style="width: 25%; background-color: orange; float: left; display: block; margin: 1.5%; border: 1px solid #C4C295; text-align: center; padding: 2.5%; padding-top: 0px;">
+<h2 id="Testen"><a href="/en-US/docs/Mozilla/Localization/Quick_start_guide/QA_phase" title="en/Localization_Quick_Start_Guide/QA_phase">Testen</a></h2>
+L10n Anleitungen zum Testen von Lokalisierungen.</div>
+
+<div style="width: 92%; background-color: #C0C0C0; float: left; display: block; margin: 1.5%; border: 1px solid #C4C295; text-align: center; padding: 2.5%; padding-top: 0px;">
+<h2 id="Freigeben"><a href="/en-US/docs/Mozilla/Localization/Quick_start_guide/Release_phase" title="en/Localization_Quick_Start_Guide/Release_phase">Freigeben</a></h2>
+Schritte zum Veröffentlichen Deiner Lokalisierung.</div>
+
+<div style="background-color: white; border: 3px solid; display: block; padding: 20px; margin-top: 20px;">Das sind die vier technischen Phasen des l10n Prozesses, für Details klicke auf die jeweiligen Links. Um einen Gesamtüberblick zu bekommen solltest Du die Anleitungen aller Phasen lesen.</div>
+
+<p> </p>
+
+<div class="note"><strong>Hinweis</strong>: Diese Anleitung wurde für zwei Gruppen von Mitwirkenden geschrieben: Für diejenigen, die eine neue Lokalisierungs-Community gründen möchten und für diejenigen, die einer vorhandenen Community beitreten möchten. Es ist wichtig zu wissen, welche Information zu welcher dieser beiden Vorhaben gehört. Um Dir zu helfen die wichtigsten Informationen herauszufiltern haben wir alle ausschließlich zum Gründen einer neuen Lokalisierungs-Community gehörenden Informationen <span style="color: #daa520;">in orange</span> dargestellt. Alle Informationen die ausschließlich das Beitreten zu einer bestehenden Lokalisierungs-Community betreffen sind <span style="color: #0000ff;">blauer Schrift </span>dargestellt.</div>
+
+<p class="note"> </p>
+
+<p>{{ Next("Localization_Quick_Start_Guide/Initial_setup") }}</p>
diff --git a/files/de/quickstart_lokalisierung/initial_setup/index.html b/files/de/quickstart_lokalisierung/initial_setup/index.html
new file mode 100644
index 0000000000..42cbc9f7d7
--- /dev/null
+++ b/files/de/quickstart_lokalisierung/initial_setup/index.html
@@ -0,0 +1,84 @@
+---
+title: 'Lokalisierung: Vorbereitung'
+slug: Quickstart_Lokalisierung/Initial_setup
+tags:
+  - Lokalisierung
+  - Vorbereiten
+translation_of: Mozilla/Localization/Quick_start_guide/Initial_setup
+---
+<p>Eine Voraussetzung zum Lokalisieren ist der Zugriff auf Code und Werkzeuge und eine entsprechend konfigurierte lokale Arbeitsumgebung (d.h., auf Deinem Computer). Zudem musst Du herausfinden, ob für Deine Sprache bereits eine Lokalisierungs-Community existiert. An dieser Stelle beschäftigen wir uns mit den benötigten Benutzer-Konten sowie den verwendeten Werkzeugen und deren Konfigurationen, die für das Lokalisieren benötigt werden.</p>
+
+<h3 id="Neu_oder_bereits_vorhanden">Neu oder bereits vorhanden</h3>
+
+<p>Als Erstes musst Du wissen, ob Du eine neue Lokalisierungs-Community gründen oder einer bereits vorhandenen beitreten möchtest. Davon hängt ab, welche Informationen in dieser Anleitung für Dich nützlich sind.</p>
+
+<p>Das hast Du zu tun:</p>
+
+<p>Prüfe im <a class="link-https" href="https://wiki.mozilla.org/L10n:Teams" title="https://wiki.mozilla.org/L10n:Teams">Localization Community Directory</a>, ob zu Deiner Sprache bereits eine Community existiert.</p>
+
+<ol start="1" style="list-style-type: lower-alpha;">
+ <li><span style="color: #0000cd;">Wenn bereits eine Community existiert: Melde Dich dort und frag wie Du helfen kannst.</span></li>
+ <li><span style="color: #ff8c00;">Wenn noch keine Community existiert: Sende eine <a class="link-https" href="https://groups.google.com/forum/?fromgroups#!forum/mozilla.dev.l10n.new-locales" title="https://groups.google.com/forum/?fromgroups#!forum/mozilla.dev.l10n.new-locales">e-Mail an die new-locales newsgroup</a> für weitere Unterstützung</span><span style="color: #ff8c00;">.</span></li>
+</ol>
+
+<h3 id="Benutzer-Konten">Benutzer-Konten</h3>
+
+<p>Es gibt eine Handvoll Benutzer-Konten, die Du zu Beginn Deiner Lokalisierungs-Arbeit kennen solltest. Sie sind nicht notwendig, um an der Lokalisierung mitzuwirken. Aber sie werden notwendig, wenn Du Deine Arbeiten veröffentlichen möchtest. Momentan sollst Du nur wissen, dass sie für Deine Arbeit wichtig sein werden. Unter diesen Benutzer-Konten werden Dein Code und Deine anderen Tätigkeiten gespeichert und sie werden Dir bei der Veröffentlichung Deiner Lokalisierungs-Arbeiten helfen.</p>
+
+<dl>
+ <dt style="margin-left: 40px;">hg (Mercurial)</dt>
+ <dd>Mercurial ist eine Umgebung zum Verwalten von Software-Versionen und besteht hauptsächlich aus Mozilla Quellcode, es enthält aber auch lokalisierten Code für jede offizielle Mozilla Lokalisation. Du wirst es brauchen, um Mozilla Anwendungen zu lokalisieren. Eine Berechtigung zum Speichern ist zu Beginn Deiner Arbeit <u>nicht</u> notwendig in hg. Wenn Du etwas Erfahrung mit hg gesammelt hast, dann wirst Du vielleicht eine Speicher-Berechtigung haben wollen. Dazu besuchst Du bitte die <a class="external" href="http://www.mozilla.org/hacking/committer/" title="http://www.mozilla.org/hacking/committer/">Mozilla Commiter Page</a> und folgst dem dort beschriebenen Prozess. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=741305" title="https://bugzilla.mozilla.org/show_bug.cgi?id=741305">Hier ist eine Beispiel-Meldung</a>, die den Prozess verdeutlicht. Nutze <a class="link-https" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=mozilla.org&amp;component=Repository%20Account%20Requests&amp;rep_platform=All&amp;op_sys=All&amp;cc=l10n%40mozilla.com&amp;short_desc=l10n%20hg%20account%20for%20John%20Doe%20(ab-CD)" title="https://bugzilla.mozilla.org/enter_bug.cgi?product=mozilla.org&amp;component=Repository%20Account%20Requests&amp;rep_platform=All&amp;op_sys=All&amp;cc=l10n%40mozilla.com&amp;short_desc=l10n%20hg%20account%20for%20John%20Doe%20(ab-CD)">diese Vorlage</a> zum Ausfüllen Deiner hg Registrierungs-Anfrage. Lege eine Meldung zu Deinem neuen Lokalisierungs-Projekt in der<span> <a class="external" href="http://groups.google.com/group/mozilla.dev.l10n.new-locales/topics" title="http://groups.google.com/group/mozilla.dev.l10n.new-locales/topics">new locales newsgroup</a> an.</span></dd>
+ <dt style="margin-left: 40px;">SVN</dt>
+ <dd style="margin-left: 40px;">SVN ist eine Umgebung zum Verwalten von Software-Versionen, die Mozilla zum Betreiben seiner eigenen Quellcode-Webseiten und deren offiziellen Lokalisierungen verwendet. Auf <a class="link-https" href="https://wiki.mozilla.org/SVN#SVN_account_for_localizers" title="https://wiki.mozilla.org/SVN#SVN_account_for_localizers">dieser Wiki-Seite</a> ist der Registrierungs-Prozess von SVN beschrieben. Die <a href="https://developer.mozilla.org/en-US/docs/SVN_guide_for_localizers" title="https://developer.mozilla.org/en-US/docs/SVN_guide_for_localizers">Anleitung für SVN Lokalisierer</a> hilft Dir beim Lernen der wichtigsten SVN Kommandos für l10n. Lege eine Meldung zu Deinem neuen Lokalisierungs-Projekt in der<span> <a class="external" href="http://groups.google.com/group/mozilla.dev.l10n.new-locales/topics" title="http://groups.google.com/group/mozilla.dev.l10n.new-locales/topics"><u><font color="#0066cc">new locales newsgroup</font></u></a> an.</span></dd>
+</dl>
+
+<dl>
+ <dt style="margin-left: 40px;">Web-basierte L10n Werkzeuge</dt>
+ <dd style="margin-left: 40px;">Darüber werden wir später ein paar Worte verlieren. Für den Moment reicht es zu wissen, dass Du zum Nutzen dieser Werkzeuge einen eigenen Benutzer-Zugang benötigst.</dd>
+ <dt style="margin-left: 40px;">Mozilla LDAP</dt>
+ <dd style="margin-left: 40px;">Du wirst einen LDAP Benutzer brauchen, wenn Du Deine Lokalisierung im Lokalisierungs-Verzeichnis von Mozilla registrieren möchtest. Lege eine Meldung zu Deinem neuen LDAP Zugang in der<span> <a class="external" href="http://groups.google.com/group/mozilla.dev.l10n.new-locales/topics" title="http://groups.google.com/group/mozilla.dev.l10n.new-locales/topics"><u><font color="#0066cc">new locales newsgroup</font></u></a> an.</span></dd>
+ <dt style="margin-left: 40px;"><span>Lokalisierungsspezifische Bugzilla Kompenente</span></dt>
+ <dd style="margin-left: 40px;"><span>Eine eigene Bugzilla "Component" für Deine Lokalisierung hilft uns beim Nachverfolgen Deines Lokalisierungs-Prozesses von den ersten Schritten bis zur Veröffentlichung. Zudem werden wir so informiert falls Du Probleme hast, die eindeutig Deiner Lokalisierungs-Arbeit zuzuordnen sind. </span>Lege eine Meldung zu Deiner neuen Bugzilla Component in der<span> <a class="external" href="http://groups.google.com/group/mozilla.dev.l10n.new-locales/topics" title="http://groups.google.com/group/mozilla.dev.l10n.new-locales/topics"><u><font color="#0066cc">new locales newsgroup</font></u></a> an.</span></dd>
+</dl>
+
+<h3 id="Lokale_Werkzeuge">Lokale Werkzeuge</h3>
+
+<p>Ähnlich wie bei den Benutzer-Konten gibt es auch einige lokale Werkzeuge, die auf Deinem Computer installiert werden sollten. Diese Werkzeuge dienen dem Speichern Deiner Arbeit, dem Erzeugen von Mozilla Anwendungen, dem Erzeugen von Sprachpaketen und dem Testen.</p>
+
+<dl>
+ <dt style="margin-left: 40px;">Hg (Mercurial)</dt>
+ <dd style="margin-left: 40px;">Wie oben erwähnt nutzen wir Mercurial zum Pflegen von Mozilla Quellcode und lokalisiertem Code. Du wirst nicht nur ein Lokalisierungs-Repository zum Speichern Deiner Objekte brauchen, sondern es muss auch auf Deinem Rechner installiert und konfiguriert sein. <a href="/en/Localizing_with_Mercurial#Install_Mercurial" title="https://developer.mozilla.org/en/L10n_on_Mercurial#Install_Mercurial">Hier</a> findest Du alles, was Du zum Installieren und Konfigurieren von Mercurial wissen musst.</dd>
+</dl>
+
+<dl>
+ <dt style="margin-left: 40px;">compare-locales</dt>
+ <dd style="margin-left: 40px;">compare-locales ist ein Python Skript zum Prüfen Deiner Arbeit, ohne dass Firefox oder eine andere Anwendung laufen muss. Installationsanweisungen findest Du <a href="/en/Compare-locales" title="https://developer.mozilla.org/en/Compare-locales">hier</a>.</dd>
+ <dt style="margin-left: 40px;">L10n checks</dt>
+ <dd style="margin-left: 40px;">L10n checks ist ein weiteres Python Skript zum Prüfen Deiner Arbeit, ohne dass Firefox oder eine andere Anwendung laufen muss. Installationsanweisungen findest Du <a href="/en/L10n_Checks" title="https://developer.mozilla.org/en/L10n_Checks">hier</a>.</dd>
+ <dt style="margin-left: 40px;">autoconf 2.13</dt>
+ <dd style="margin-left: 40px;">autoconf ist ein Hilfsmittel zum manuellen Erzeugen von Mozilla Anwendungs-Builds und Sprachpaketen. Wir verwenden Version 2.13 und höher für diese Builds. Installationsdateien und -anleitungen findest Du <a class="external" href="http://www.gnu.org/software/autoconf/" title="http://www.gnu.org/software/autoconf/">hier</a>.</dd>
+ <dt style="margin-left: 40px;">wget</dt>
+ <dd style="margin-left: 40px;">wget ist ein Kommandozeilen-Werkzeug zum Laden von Dateien über Internet-Protokolle. Wir nutzen es zum Laden von Dateien aus Repositories. Installationsdateien und -anleitungen findest Du <a href="http://www.gnu.org/software/wget/">hier</a>.</dd>
+ <dt style="margin-left: 40px;">Perl</dt>
+ <dd style="margin-left: 40px;">Perl ist eine Programmiersprache, mit der Du Mozilla Anwendungs-Builds und Sprachpakete erstellen kannst. Installationsdateien und -anleitungen findest Du <a class="external" href="http://www.perl.org/" title="http://www.perl.org/">hier</a>.</dd>
+ <dt style="margin-left: 40px;">Python</dt>
+ <dd style="margin-left: 40px;">Python ist eine Programmiersprache, in der viele unserer L10n Test-Skripte geschrieben sind. Installationsdateien und -anleitungen findest Du <a class="external" href="http://python.org/" title="http://python.org/">hier</a>.</dd>
+ <dt style="margin-left: 40px;">Locale Switcher oder Quick Locale Switcher</dt>
+ <dd style="margin-left: 40px;">Sowohl Locale Switcher als auch Quick Locale Switcher sind Add-Ons für Mozilla Anwendungen. Eines von beiden brauchst Du zum Anzeigen Deiner Lokalisierungen in einer Mozilla Anwendung. Du kannst sie über den Add-On Manager im Firefox Browser installieren oder über <a class="link-https" href="https://addons.mozilla.org/de/firefox/addon/locale-switcher/" title="https://addons.mozilla.org/en-US/firefox/addon/locale-switcher/">diese Links</a>.</dd>
+ <dt style="margin-left: 40px;">Einen guten, unicode-basierten Text-Editor</dt>
+ <dd style="margin-left: 40px;">Hier einige Empfehlungen:
+ <ul>
+  <li style="margin-left: 40px;">Windows: <a class="external" href="http://notepad-plus.sourceforge.net/uk/site.htm" rel="external nofollow" title="http://notepad-plus.sourceforge.net/uk/site.htm">Notepad++</a> oder <a class="external" href="http://www.flos-freeware.ch/notepad2.html" rel="external nofollow" title="http://www.flos-freeware.ch/notepad2.html">Notepad2</a></li>
+  <li style="margin-left: 40px;">GNU/Linux: <a class="external" href="http://en.wikipedia.org/wiki/Vim_%28text_editor%29" rel="external nofollow" title="http://en.wikipedia.org/wiki/Vim_(text_editor)">vim</a>, <a class="external" href="http://projects.gnome.org/gedit/" rel="external nofollow" title="http://projects.gnome.org/gedit/">gedit</a> oder <a class="external" href="http://www.kate-editor.org/kate" rel="external nofollow" title="http://www.kate-editor.org/kate">Kate</a></li>
+  <li style="margin-left: 40px;">Mac OS X: <a class="external" href="http://www.barebones.com/products/TextWrangler/" rel="external nofollow" title="http://www.barebones.com/products/TextWrangler/">TextWrangler</a></li>
+ </ul>
+ </dd>
+ <dt style="margin-left: 40px;">GNU make</dt>
+ <dd style="margin-left: 40px;"><span class="external">Make ist ein Werkzeug zur Versions-Verwaltung von ausführbaren Dateien. Du findest die Version </span>3.79.1 oder höher <a class="external" href="http://www.gnu.org/software/make/" title="http://www.gnu.org/software/make/">hier</a>. Andere Varianten von <code>make</code> funktionieren leider nicht.</dd>
+</dl>
+
+<h2 id="Ende_der_Vorbereitungen">Ende der Vorbereitungen</h2>
+
+<p>Nun, nachdem alle Vorbereitungen getroffen sind, ist es Zeit für den schönsten Teil: Übersetzen!</p>
+
+<p>{{ PreviousNext("Localization_Quick_Start_Guide", "Localization_Quick_Start_Guide/Translation_phase") }}</p>
diff --git a/files/de/quickstart_lokalisierung/translation_phase/index.html b/files/de/quickstart_lokalisierung/translation_phase/index.html
new file mode 100644
index 0000000000..e1bddf447d
--- /dev/null
+++ b/files/de/quickstart_lokalisierung/translation_phase/index.html
@@ -0,0 +1,122 @@
+---
+title: 'Lokalisierung: Übersetzung'
+slug: Quickstart_Lokalisierung/Translation_phase
+tags:
+  - Lokalisation
+  - Werkzeuge
+  - Übersetzung
+translation_of: Mozilla/Localization/Quick_start_guide/Translation_phase
+---
+<p>Glückwunsch zur erfolgreichen Vorbereitung Deiner Lokalisierung! Als Belohnung für Deine Mühen kommen wir nun zum eigentlichen Grund Deiner Mitarbeit: Mozilla Projekte lokalisieren. "Wo ist da die Belohnung?" fragst Du Dich natürlich!</p>
+
+<p>Ab hier unterteilt sich der technische Part des Prozesses. Bei Mozilla lokalisieren wir viele verschiedene Projekte, die in drei Gruppen unterteilt werden können. Jede dieser Gruppen benötigt einen anderen Typ l10n Werkzeug zum, Du ahnst es, Lokalisieren des Projekts. Die l10n Werkzeuge sollen Dir helfen, den lokalisierten Inhalt von Version zu Version zu pflegen und bereits lokalisierte Objekte beim Lokalisieren neuer Inhalte zu beeinflussen.</p>
+
+<p>Wir identifizieren hier diese Gruppen von Projekten und die mit ihnen verbundenen l10n Werkzeuge. Auf diesem Weg werden wir Dich auf die technischen Grundlagen-Tutorien zum Lokalisieren der jeweiligen Projekt-Gruppe hinweisen. Es ist an Dir und Deiner Lokalisierungs-Community herauszufinden, welche l10n Werkzeuge am besten Euren Bedürfnissen entsprechen. Mit zunehmender Erfahrung möchtest Du vielleicht unabhängig von den von Mozilla entwickelten l10n Werkzeugen lokalisieren, auch das werden wir hier behandeln.</p>
+
+<h2 id="Projekte">Projekte</h2>
+
+<p>Die Mozilla-Projekte und ihre l10n Abläufe werden in diese Gruppen unterteilt: Mozilla Anwendungen, Mozilla Webseiten und Add-Ons. Weiter unten findest Du eine Liste mit Mozilla-Projekten, ihren zugeordneten l10n Werkzeugen und Links zu Tutorien mit Beschreibungen zu den jeweiligen Abläufen.</p>
+
+<h3 id="Mozilla_Anwendungen">Mozilla Anwendungen</h3>
+
+<p>Du bist also am Lokalisieren von Mozilla Anwendungen interessiert. Jedes l10n Werkzeug folgt einem anderen Ablauf zum Lokalisieren von Mozilla Anwendungs-Projekten. Zu jedem unten angegebenen l10n Werkzeug haben wir einen Link zu einem Einweisungs-Tutorial eingefügt. Folge den Tutorien und entscheide selbst, welches l10n Werkzeug Deinen speziellen Bedürfnissen entspricht.</p>
+
+<p>Das sind die l10n Werkzeuge, die wir zum Lokalisieren von Mozilla Anwendungen nutzen:</p>
+
+<dl>
+ <dt style="margin-left: 40px;"><a class="external" href="http://translate.sourceforge.net/wiki/guide/mozilla" title="http://translate.sourceforge.net/wiki/guide/mozilla">Pootle</a></dt>
+ <dd style="margin-left: 40px;">Ein benutzerfreundliches Web-Portal basierend auf dem Translate Toolkit API. Diese Anwendung enthält Arbeitsbereiche zum Übersetzen und Überprüfen von Strings und Projekt-Dashboards. Siehe <a class="external" href="http://pootle.locamotion.org/" title="http://pootle.locamotion.org/">Beispiel für die Lokalisierung von Mozilla Anwendungen mit Pootle</a>.</dd>
+</dl>
+
+<dl>
+ <dt style="margin-left: 40px;"><a href="/en/Localizing_with_Koala" title="https://developer.mozilla.org/en/Localizing_with_Koala">Koala</a></dt>
+ <dd style="margin-left: 40px;">Ein l10n Add-On für den nicht netzwerkfähigen Komodo Edit Text-Editor.</dd>
+ <dt style="margin-left: 40px;"><a class="external" href="/en/Localizing_with_Mozilla_Translator" title="https://developer.mozilla.org/en/Localizing_with_Mozilla_Translator">Mozilla Translator</a></dt>
+ <dd style="margin-left: 40px;">Ein nicht netzwerkfähiges, Java-basiertes l10n Werkzeug zum Übersetzen, welches die eigenen Repositories integriert. Schaue auf der <a class="external" href="http://kenai.com/projects/moztrans/downloads" title="http://kenai.com/projects/moztrans/downloads">Mozilla Translator (MT) Download Seite</a> zum Herunterladen eines MT Clients. Version 5.26 ist die aktuelle Version.</dd>
+ <dt style="margin-left: 40px;">Virtaal</dt>
+ <dd style="margin-left: 40px;">Eine nicht netzwerkfähige Version von Pootle, ebenfalls auf dem Translate Toolkit API basierend.</dd>
+</dl>
+
+<p>Die folgenden Mozilla Anwendungen wurden mit den oben vorgestellten l10n Werkzeugen lokalisiert:</p>
+
+<dl>
+ <dt style="margin-left: 40px;">Firefox</dt>
+ <dd style="margin-left: 40px;">Der preisgekrönte Firefox® Web Browser ist sicher, schnell und hat neue Features, die Deine Art der Web-Nutzung verändern werden. <span style="color: #daa520;">Siehe diese <a class="external" href="http://zaf.svn.sourceforge.net/viewvc/zaf/trunk/po/fftb/firefox.phaselist" title="http://zaf.svn.sourceforge.net/viewvc/zaf/trunk/po/fftb/firefox.phaselist">Liste der kritischsten zu lokalisierenden Strings in Firefox</a></span><span style="color: #daa520;"> und ebenso die <a class="external" href="http://zaf.svn.sourceforge.net/viewvc/zaf/trunk/po/fftb/phases" title="http://zaf.svn.sourceforge.net/viewvc/zaf/trunk/po/fftb/phases">Beschreibung um zu verstehen, wie diese organisiert sind</a></span><span style="color: #daa520;">.</span></dd>
+ <dt style="margin-left: 40px;">Thunderbird</dt>
+ <dd style="margin-left: 40px;">Geniesse sicheres, schnelles und einfaches Mailen nach Art von Mozilla. Der Thunderbird® E-Mail Client enthält intelligente Spam-Filter, leistungsfähige Suchmöglichkeiten und individuell anpassbare Ansichten.</dd>
+ <dt style="margin-left: 40px;">Seamonkey</dt>
+ <dd style="margin-left: 40px;">SeaMonkey® ist die Alles-in-Einem Anwendung, früher bekannt als die "Mozilla Application Suite", mit einem Web Browser, einem E-Mail und einem Newsgroups Client, einem HTML-Editor, Werkzeugen für Web-Entwickler und einem IRC Chat Client.</dd>
+ <dt style="margin-left: 40px;">Firefox Mobile</dt>
+ <dd style="margin-left: 40px;">Durch das Hinzufügen von Firefox® zu Deinem Smartphone hast Du Zugriff auf unzählige Web-Inhalte und Du kannst Deine bevorzugten Firefox Features überall geniessen.</dd>
+ <dt style="margin-left: 40px;">Lightning</dt>
+ <dd style="margin-left: 40px;">Lightning ist eine beliebte Erweiterung für Kalender-, Terminverwaltungs- und Aufgabenplanungs-Anwendungen.</dd>
+</dl>
+
+<p><span style="color: #0000ff;">Falls für Deine Sprache ein hg Repository im Mozilla-Netzwerk existiert, kannst Du Deine aktuellen Lokalisierungsarbeiten in den l10n Dashboards verfolgen</span><span style="color: #0000ff;">.</span></p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> <span style="color: #ff8c00;">Wenn Du eine neue Lokalisierung startest und Dich für ein Offline-Werkzeug zum Lokalisieren von Mozilla Anwendungen entscheidest, dann solltest Du Dich mit der Bedienung von Mercurial (hg) vertraut machen. Lese hierfür das </span><a href="https://developer.mozilla.org/en-US/docs/Localizing_with_Mercurial" title="https://developer.mozilla.org/en-US/docs/Localizing_with_Mercurial"><span style="color: #ff8c00;">hg Anwender-Tutorial</span></a><span style="color: #ff8c00;">. </span></p>
+</div>
+
+<h3 id="Mozilla_Webseiten">Mozilla Webseiten</h3>
+
+<p>Du bist also am Lokalisieren von Mozilla Webseiten interessiert. Jedes l10n Werkzeug folgt einem anderen Ablauf zum Lokalisieren von Mozilla Webprojekten. Zu jedem unten angegebenen l10n Werkzeug haben wir einen Link zu einem Einweisungs-Tutorial eingefügt. Folge den Tutorien und entscheide selbst, welches l10n Werkzeug Deinen speziellen Bedürfnissen entspricht.</p>
+
+<p>Das sind die l10n Werkzeuge, die wir zum Lokalisieren von Mozilla Webprojekten nutzen:</p>
+
+<dl>
+ <dt style="margin-left: 40px;"><a href="/en/Localizing_with_Verbatim" title="https://developer.mozilla.org/en/Localizing_with_Verbatim">Verbatim</a></dt>
+ <dd style="margin-left: 40px;">Eine angepasste, von Mozilla betriebene Pootle-Version zum Lokalisieren von Mozilla Webseiten, speziell von Mozilla Mitmach-Kampagnen. Zudem beinhaltet es Funktionen zur Projektverwaltung, um den Projekt-Fortschritt zu kontrollieren. Besuche <a class="link-https" href="https://localize.mozilla.org/" title="https://localize.mozilla.org/">Verbatim</a> hier.</dd>
+ <dt style="margin-left: 40px;"><a href="/en-US/docs/Localizing_with_Pontoon" title="/en-US/docs/Localizing_with_Pontoon">Pontoon</a></dt>
+ <dd style="margin-left: 40px;">Ein Web-basiertes What-You-See-Is-What-You-Get (WYSIWYG) l10n Werkzeug zum Lokalisieren von Mozilla Webseiten innerhalb der Seite selbst. Besuche <a class="external" href="https://pontoon.mozilla.org" title="http://horv.at/pontoon/">Pontoon</a> hier. Bitte beachte, dass Pontoon zur Zeit noch nicht für alle Webprojekte verfügbar ist.</dd>
+</dl>
+
+<p>Die folgenden Mozilla Webprojekte wurden mit den oben vorgestellten l10n Werkzeugen lokalisiert:</p>
+
+<dl>
+ <dt style="margin-left: 40px;">mozilla.org</dt>
+ <dd style="margin-left: 40px;">Der Einstieg für alle.</dd>
+ <dt style="margin-left: 40px;">addons.mozilla.org (AMO)</dt>
+ <dd style="margin-left: 40px;">Ein Portal für alle, die Add-Ons für ihre Mozilla Anwendungen finden wollen. Lese die <a class="link-https" href="https://addons.mozilla.org/en-US/localizers/" title="https://addons.mozilla.org/en-US/localizers/">Anleitungen zum Lokalisieren von AMO</a> direkt vom AMO Team.</dd>
+ <dt style="margin-left: 40px;">developer.mozilla.org (MDN)</dt>
+ <dd style="margin-left: 40px;">Wo Du gerade bist! Helfe beim Lokalisieren der MDN Benutzeroberfläche für alle in Deiner Region.</dd>
+ <dt style="margin-left: 40px;">support.mozilla.com (SUMO)</dt>
+ <dd style="margin-left: 40px;">Ein Portal für alle, die technische Unterstützung für ihre Mozilla Anwendungen brauchen. Helfe beim Lokalisieren der SUMO Benutzeroberfläche für alle in Deiner Region.</dd>
+ <dt style="margin-left: 40px;">Mozilla Mitmach-Kampagnen</dt>
+ <dd style="margin-left: 40px;">Individuelle Mozilla Kampagnen zum Gewinnen neuer Mitwirkender.</dd>
+ <dt style="margin-left: 40px;">hacks.mozilla.org</dt>
+ <dd style="margin-left: 40px;">Für alle, die an den technisch tiefer gehenden Sachen interessiert sind, die die Anwender mit Mozilla Firefox und dem Open Web so machen.</dd>
+ <dt style="margin-left: 40px;">In-product Seiten</dt>
+ <dd style="margin-left: 40px;">Eine Sammlung von Seiten zum Kommunizieren mit den Anwendern und zum Informieren der Anwender bei deren Einstieg in Mozilla Anwendungen.</dd>
+</dl>
+
+<p><span style="color: #ff8c00;">Wenn Du Deine eigene Lokalisation anlegst, dann gibt es eine Fülle von Mozilla Webseiten die lokalisiert werden müssen bevor Deine Arbeit eine offiziell freigegebene Lokalisation wird. Siehe </span><span style="color: #ff8c00;"><a class="link-https" href="https://wiki.mozilla.org/L10n:Web_parts#Firefox_in-product_pages" title="https://wiki.mozilla.org/L10n:Web_parts#Firefox_in-product_pages">Liste der lokalisierten Mozilla Webseiten</a>. </span></p>
+
+<p>Ausserdem solltest Du <a class="link-https" href="https://wiki.mozilla.org/L10n:Web_parts" title="https://wiki.mozilla.org/L10n:Web_parts">mehr Informationen über das Lokalisieren von Mozilla Webprojekten</a> lesen.</p>
+
+<dl>
+ <dt> </dt>
+</dl>
+
+<h3 id="Add-Ons">Add-Ons</h3>
+
+<p>l10n für Add-Ons wird von mindestens zwei weiteren Organisationen/Teams namens Babelzilla und Adofex durchgeführt. Beide haben umfangreiche Projekte und l10n Werkzeuge aufgebaut, zum Lokalisieren aller eigenen Add-ons und aller Add-Ons von Drittanbietern für Mozilla Anwendungen. Besuche ihre Webseiten um zu sehen, wie Du Dich einbringen kannst.</p>
+
+<ul>
+ <li><a class="external" href="http://babelzilla.org" title="http://babelzilla.org">Babelzilla</a></li>
+ <li><a class="external" href="http://adofex.clear.com.ua/" title="http://adofex.clear.com.ua/">Adofex</a></li>
+</ul>
+
+<h2 id="Werkzeug-unabhängige_Lokalisation">Werkzeug-unabhängige Lokalisation</h2>
+
+<p>Du bist ein Meister der Kommandozeilen? Du bevorzugst Unicode Text-Editoren vor allen anderen Anwendungen auf diesem Planeten? Dein Liebling ist ein CAT (computer-assisted translation) Werkzeug wie OmegaT? Dann bist Du vielleicht nicht interessiert daran, eines der oben vorgestellten Werkzeuge für Deine Lokalisierungen zu benutzen. Wenn das der Fall ist,  dann ist dieser Abschnitt für Dich!</p>
+
+<p>Für Lokalisierer, die das Lokalisieren ohne spezielle Werkzeuge bevorzugen ist der Ablauf zum Lokalisieren von Mozilla Anwendungen und Mozilla Webseiten grundsätzlich gleich.<a href="/en/Localizing_without_a_specialized_tool" title="https://developer.mozilla.org/en/Localizing_without_a_specialized_tool"> Dieses Tutorial</a> sollte Dich mit allen benötigten technischen Informationen zum Erhalt und zur Pflege Deiner Unabhängigkeit versorgen.</p>
+
+<h2 id="Produktisierung">Produktisierung</h2>
+
+<p>Produktisierung ist ein unverzichtbarer Teil beim Lokalisieren von Mozilla Produkten. In diesem Schritt implementierst Du die zu verwendenden Plug-Ins für die Suche, die Content- und Protokoll-Steuerung, Lesezeichen und die Links zu den empfohlenen Stellen in den in-product Seiten, die die Anwender in Deiner Sprache zu den jeweiligen Mozilla Produkten benötigen.</p>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Productization_guide" title="https://developer.mozilla.org/en/Productization_patches">Dieses Tutorial geht mit Dir die einzelen Produktisierungs-Schritte durch</a>, also durch das Anlegen von Produktisierungs-Patches und deren Weiterleitung an die Qualitätssicherung.</p>
+
+<p>{{ PreviousNext("Localization_Quick_Start_Guide/Initial_setup", "Localization_Quick_Start_Guide/QA_phase") }}</p>
diff --git a/files/de/rdf/index.html b/files/de/rdf/index.html
new file mode 100644
index 0000000000..d110399eae
--- /dev/null
+++ b/files/de/rdf/index.html
@@ -0,0 +1,12 @@
+---
+title: RDF
+slug: RDF
+tags:
+  - RDF
+translation_of: Archive/Web/RDF
+---
+<p><strong>Resource Description Framework (RDF)</strong> ist eine Familie von Spezifikationen für ein Metadaten-Modell, das meist als XML-Anwendung implementiert ist. Die verschiedenen RDF Spezifikationen werden durch das World Wide Web Consortium (W3C) gewartet.</p>
+<p>Das RDF-Metadaten-Modell basiert auf der Idee, Aussagen über Ressourcen in der Form eines Subjekt-Prädikat-Objekt-Ausdrucks zu machen, welchen man in der RDF-Terminologie als Triple bezeichnet. Das Subjekt ist die Ressource, das zu beschreibende "Ding". Das Prädikat ist ein Merkmal oder Aspekt dieser Ressource, und meist Ausdruck einer Beziehung zwischen dem Subjekt und dem Objekt. Das Objekt ist das Objekt der Beziehung oder der Wert dieses Merkmals.</p>
+<table class="topicpage-table"> <tbody> <tr> <td> <h4 id="Dokumentation"><a href="/Special:Tags?tag=RDF&amp;language=de" title="Special:Tags?tag=RDF&amp;language=de">Dokumentation</a></h4> <dl> <dt><a href="/en/XTech_2005_Presentations/Directions_of_the_Mozilla_RDF_engine" title="en/XTech_2005_Presentations/Directions_of_the_Mozilla_RDF_engine">Entwicklungen der Mozilla RDF Engine</a> (en)</dt> <dd><small>Diese Präsentation zeigt neue Entwicklungen in Mozillas RDF Engine. Es gibt Pläne die RDF-API als öffentlichen Webinhalt freizugeben, sowie Performance und Genauigkeit zu verbessern .</small></dd> </dl> <dl> <dt><a class="external" href="http://www.xml.com/pub/a/2001/01/24/rdf.html">Was ist RDF</a></dt> <dd><small>Tim Brays Einführung in das Resource Description Framework auf <a class="external" href="http://www.xml.com">XML.com</a>.</small></dd> </dl> <dl> <dt><a href="/de/RDF_in_Mozilla_FAQ" title="de/RDF_in_Mozilla_FAQ">RDF in Mozilla FAQ</a></dt> <dd><small>Häufig gestellte Fragen zum Resource Description Framework in Mozilla.</small></dd> </dl> <dl> <dt><a href="/de/RDF_in_fünfzig_Worten_oder_weniger" title="de/RDF_in_fünfzig_Worten_oder_weniger">RDF in fünfzig Worten oder weniger</a></dt> <dd><small>Eine schnelle Einführung in das Resource Description Framework.</small></dd> </dl> <dl> <dt><a href="/de/RDF_Datenquellen_Tutorial" title="de/RDF_Datenquellen_Tutorial">RDF Datenquellen Tutorial</a></dt> <dd><small>Ein Artikel, der die Zutaten für eine systemeigene und clientseitige Datenquelle liefert, die mit Mozillas RDF Implementierung zusammenarbeitet.</small></dd> </dl> <dl> <dt><a href="/de/Füllen_der_In-Memory_Datenquelle" title="de/Füllen_der_In-Memory_Datenquelle">Füllen der In-Memory Datenquelle</a></dt> <dd><small>Benutzen von <a href="/de/XPCOM" title="de/XPCOM">XPCOM</a> Aggregation mit der In-Memory-Datenquelle.</small></dd> </dl> <p><span><a href="/Special:Tags?tag=RDF&amp;language=de" title="Special:Tags?tag=RDF&amp;language=de">Alle anzeigen...</a></span></p> </td> <td> <h4 id="Community">Community</h4> <ul> <li>Mozillas RDF Foren:</li> </ul> <p>{{ DiscussionList("dev-tech-rdf", "mozilla.dev.tech.rdf") }}</p> <ul> <li><a class="external" href="http://www.ilrt.bris.ac.uk/discovery/rdf-dev/">RDF-Entwickler Mailing Liste</a></li> </ul> <h4 id="Tools">Tools</h4> <ul> <li><a class="external" href="http://planetrdf.com/guide/#sec-tools">RDF Editoren und Tools</a></li> <li><a class="external" href="http://www.w3.org/RDF/Validator/">RDF Validator</a></li> </ul> <h4 id="Verwandte_Themen">Verwandte Themen</h4> <dl> <dd><a href="/de/XML" title="de/XML">XML</a></dd> </dl> </td> </tr> </tbody>
+</table>
+<p>{{ languages( { "en": "en/RDF", "es": "es/RDF", "fr": "fr/RDF", "it": "it/RDF", "ja": "ja/RDF", "ko": "ko/RDF", "pl": "pl/RDF", "pt": "pt/RDF", "ru": "ru/RDF" } ) }}</p>
diff --git a/files/de/rhino/index.html b/files/de/rhino/index.html
new file mode 100644
index 0000000000..2505563c91
--- /dev/null
+++ b/files/de/rhino/index.html
@@ -0,0 +1,14 @@
+---
+title: Rhino
+slug: Rhino
+translation_of: Mozilla/Projects/Rhino
+---
+<p><img alt="Image:rhino.jpg" class="internal" src="/@api/deki/files/832/=Rhino.jpg"></p>
+<p><strong>Rhino</strong> ist eine Open-Source-Implementierung von <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a>, die vollständig in Java entwickelt wurde. Sie wird typischerweise in Java-Anwendungen eingebettet, um Endanwendern Skripting zu ermöglichen. In J2SE 6 wird Rhino als Standard-Scripting-Engine mitgeliefert.</p>
+<h4 id="Rhino_downloads" name="Rhino_downloads">Rhino Downloads</h4>
+<p>Wie man an <a class="internal" href="/en/RhinoDownload" title="en/RhinoDownload">Sourcen und Binaries</a> kommt. </p>
+<h4 id="Rhino_documentation" name="Rhino_documentation">Rhino Dokumentation</h4>
+<p><a href="/en/Rhino_documentation" title="en/Rhino_documentation">Informationen zu Rhino</a> für das Schreiben von Skripten und das Einbetten in Applikationen.</p>
+<h4 id="Rhino_help" name="Rhino_help">Rhino Hilfe</h4>
+<p><a href="/en/Rhino/Community" title="en/Rhino/Community">Ein paar Resourcen</a>, für den Fall, dass man nicht mehr weiter kommt.</p>
+<p>{{ languages( { "ja": "ja/Rhino" } ) }}</p>
diff --git a/files/de/rhino_documentation/index.html b/files/de/rhino_documentation/index.html
new file mode 100644
index 0000000000..c664463d0d
--- /dev/null
+++ b/files/de/rhino_documentation/index.html
@@ -0,0 +1,115 @@
+---
+title: Rhino Dokumentation
+slug: Rhino_documentation
+translation_of: Mozilla/Projects/Rhino/Documentation
+---
+<p>Information zu Rhino für das Schreiben von Skripten und das Einbetten in Appliketionen.</p>
+<h2 id="General" name="General">Allgemein</h2>
+<dl>
+  <dt>
+    <a href="/en-US/docs/Rhino/Overview" title="Rhino_Overview">Überblick</a></dt>
+  <dd>
+    Ein Überblick über die Sprache JavaScript und Rhino.</dd>
+  <dt>
+    <a href="/en-US/docs/Rhino/License" title="Rhino_License">Lizenz</a></dt>
+  <dd>
+    Rhino Lizenzinformationen.</dd>
+  <dt>
+    <a href="/en-US/docs/Rhino/Requirements_and_Limitations" title="Rhino_Requirements_and_Limitations">Vorraussetzungen und Einschränkungen</a></dt>
+  <dd>
+    Was man braucht, um Rhino zu nutzen; was Rhino nicht kann.</dd>
+  <dt>
+    <a href="/en-US/docs/Rhino/Downloads_archive" title="Rhino_downloads_archive">Downloadarchiv</a></dt>
+  <dd>
+    Ältere Versionen von Rhino mit ihren Releasenotes</dd>
+  <dt>
+    <a href="/en-US/docs/Rhino/Optimization" title="Rhino_Optimization">Optimierungen</a></dt>
+  <dd>
+    Details zu den verschiedenen Optimierungsstufen.</dd>
+  <dt>
+    <a href="/en-US/docs/Rhino/FAQ" title="Rhino_FAQ">FAQ</a></dt>
+  <dd>
+    Antworten zu häufig über Rhino gestellten Fragen.</dd>
+  <dt>
+    <a class="external" href="/en-US/docs/Rhino/History">Rhino Historie</a></dt>
+  <dd>
+    Historie des Tiers.</dd>
+</dl>
+<h2 id="Writing_Scripts" name="Writing_Scripts">Schreiben von Skripten</h2>
+<dl>
+  <dt>
+    <a class="internal" href="/en-US/docs/Scripting_Java" title="Scripting Java">Scripting Java</a></dt>
+  <dd>
+    How to use Rhino to script Java classes.</dd>
+  <dt>
+    <a class="external" href="http://www.mozilla.org/rhino/scriptjava.html">Scripting Java</a></dt>
+  <dd>
+    How to use Rhino to script Java classes (an older treatment).</dd>
+  <dt>
+    <a class="external" href="/en-US/docs/Rhino/Performance">Performance Hints</a></dt>
+  <dd>
+    Some tips on writing faster JavaScript code.</dd>
+</dl>
+<h2 id="JavaScript_Tools" name="JavaScript_Tools">JavaScript Tools</h2>
+<dl>
+  <dt>
+    <a href="/en-US/docs/Rhino/Shell" title="Rhino_Shell">Rhino Shell</a></dt>
+  <dd>
+    Interactive or batch execution of scripts.</dd>
+  <dt>
+    <a class="external" href="/en-US/docs/Rhino/Debugger">JavaScript Debugger</a></dt>
+  <dd>
+    Debugging scripts running in Rhino.</dd>
+  <dt>
+    <a href="/en-US/docs/Rhino/JavaScript_Compiler" title="Rhino_JavaScript_Compiler">JavaScript Compiler</a></dt>
+  <dd>
+    Compiling scripts into Java class files.</dd>
+  <dt>
+    <a href="/en-US/docs/Running_the_Rhino_tests" title="Running_the_Rhino_tests">Running the Rhino tests</a></dt>
+  <dd>
+    Running the JavaScript test suite with Rhino.</dd>
+</dl>
+<h2 id="Embedding_Rhino" name="Embedding_Rhino">Embedding Rhino</h2>
+<dl>
+  <dt>
+    <a class="external" href="/en-US/docs/Rhino/Embedding_tutorial">Embedding tutorial</a></dt>
+  <dd>
+    A short tutorial on how to embed Rhino into your application.</dd>
+  <dt>
+    <a class="external" href="http://www.mozilla.org/rhino/apidocs/">API javadoc Reference</a> (Link broken?  <a href="http://www.jarvana.com/jarvana/view/org/mozilla/rhino/1.7R3/rhino-1.7R3-javadoc.jar!/index.html" title="http://www.jarvana.com/jarvana/view/org/mozilla/rhino/1.7R3/rhino-1.7R3-javadoc.jar!/index.html">Try this at Jarvana.</a>)</dt>
+  <dd>
+    An annotated outline of the programming interface to Rhino (tip only).</dd>
+  <dt>
+    <a class="external" href="/en-US/docs/Rhino/Scopes_and_Contexts" title="https://developer.mozilla.org/editor/fckeditor/core/editor/en-US/docs/Rhino_documentation/Scopes_and_Contexts">Scopes and Contexts</a></dt>
+  <dd>
+    Describes how to use scopes and contexts for the best performance and flexibility, with an eye toward multithreaded environments.</dd>
+  <dt>
+    <a class="external" href="/en-US/docs/Rhino/Serialization">Serialization</a></dt>
+  <dd>
+    How to serialize JavaScript objects and functions in Rhino.</dd>
+  <dt>
+    <a class="external" href="/en-US/docs/Rhino/Runtime">Runtime</a></dt>
+  <dd>
+    A brief description of the JavaScript runtime.</dd>
+  <dt>
+    <a class="external" href="/en-US/docs/Rhino/Footprint">Small Footprint</a></dt>
+  <dd>
+    Hints for those interested in small-footprint embeddings.</dd>
+  <dt>
+    <a class="external" href="/en-US/docs/Rhino/Examples">Examples</a></dt>
+  <dd>
+    A set of examples showing how to control the JavaScript engine and build JavaScript host objects.</dd>
+  <dt>
+    <a class="external" href="/en-US/docs/Rhino/BSF">Using Rhino with Bean Scripting Framework (BSF)</a></dt>
+  <dd>
+    How to use Rhino with apps that support BSF (Bean Scripting Framework) from the Apache Jakarta project.</dd>
+</dl>
+<h2 id="External_references" name="External_references">External references</h2>
+<dl>
+  <dt>
+    <a class="external" href="http://www.ociweb.com/jnb/archive/jnbMar2001.html">Scripting Languages for Java</a></dt>
+  <dd>
+    An article comparing and contrasting Rhino and Jython.</dd>
+</dl>
+<h2 id="Rhino_contributors" name="Rhino_contributors">Rhino contributors</h2>
+<p>Interested in contributing to Rhino? Check out the <a href="/en-US/docs/Rhino_Wish_List" title="Rhino_Wish_List">Rhino Wish List</a>.</p>
diff --git a/files/de/richtlinien_zum_schreiben_eines_bugreports/index.html b/files/de/richtlinien_zum_schreiben_eines_bugreports/index.html
new file mode 100644
index 0000000000..a62c84c82c
--- /dev/null
+++ b/files/de/richtlinien_zum_schreiben_eines_bugreports/index.html
@@ -0,0 +1,147 @@
+---
+title: Richtlinien zum Schreiben eines Bugreports
+slug: Richtlinien_zum_Schreiben_eines_Bugreports
+tags:
+  - QA
+  - Qualitätssicherung
+translation_of: Mozilla/QA/Bug_writing_guidelines
+---
+<div class="note"><strong>Wenn Sie Hilfe mit Mozilla-Software benötigen (zum Beispiel Firefox oder Thunderbird), nutzen Sie bitte die <a class="external" href="http://www.mozilla.org/support/">Supportseiten</a>. Ändern Sie diese Seite nicht.</strong>
+
+<p>Wenn Sie noch nie einen Bugreport verfasst haben, möchten Sie vielleicht Hilfe von erfahrenen Mitarbeitern erhalten. Schauen Sie dazu auf die Community-Links auf der Seite zur <a href="/de/Qualitätssicherung" title="de/Qualitätssicherung">Qualitätssicherung</a>. Wenn Sie einen Firefox-Bug melden wollen, können Sie auch im <a class="link-irc" href="irc://irc.mozilla.org/firefox.de">#firefox.de</a> IRC-Channel Hilfe suchen.</p>
+</div>
+
+<h2 id="Grundsätze">Grundsätze</h2>
+
+<p>Genau beschriebene Fehlermeldungen werden schneller behoben. Dieser Leitfaden erklärt, wie Sie solche Berichte schreiben sollten.</p>
+
+<ul>
+ <li>Seien Sie präzise;</li>
+ <li>Seien Sie klar - erklären Sie so, dass die anderen Ihren Bug nachvollziehen können;</li>
+ <li>Beschreiben Sie nur einen Bug pro Meldung;</li>
+ <li>Kein Bug ist zu banal, um gemeldet zu werden - kleine Bugs könnten größere Fehler verstecken;</li>
+ <li>Trennen Sie Fakten klar von Vermutungen ab;</li>
+ <li>Schreiben Sie die Bug-Meldung - wenn möglich - auf Englisch;</li>
+</ul>
+
+<h2 id="Vorbereitungen">Vorbereitungen</h2>
+
+<ol>
+ <li>Reproduzieren Sie Ihren Bug, indem Sie die <a class="external" href="http://www.mozilla.org/developer/#builds">neueste Version</a> der Software benutzen, um zu sehen, ob der Bug schon behoben wurde.</li>
+ <li>Suchen Sie in <a href="/de/Bugzilla" title="de/Bugzilla">Bugzilla</a>, um zu sehen, ob Ihr Bug schon gemeldet wurde.</li>
+</ol>
+
+<h2 id="Einen_neuen_Bug_melden">Einen neuen Bug melden</h2>
+
+<p>Wenn Sie den Bug in einer neuen Version reproduziert haben und noch niemand den Bug gemeldet hat, dann:</p>
+
+<ol>
+ <li>Wählen Sie "<a class="link-https" href="https://bugzilla.mozilla.org/enter_bug.cgi?format=guided">Einen neuen Bug melden</a>"</li>
+ <li>Falls Sie noch keinen Bugzilla-Account haben, erstellen Sie <a class="link-https" href="https://bugzilla.mozilla.org/createaccount.cgi">hier</a> einen</li>
+ <li>Loggen Sie sich ein</li>
+ <li>Wählen Sie das Produkt, in welchem Sie den Bug gefunden haben</li>
+ <li>Füllen Sie das Formular aus. Hier ist eine kleine Hilfe, um die Einzelheiten zu verstehen:</li>
+</ol>
+
+<p><strong>Component:</strong> In welchem Teil der Software besteht der Bug?</p>
+
+<p>Dieses Feld wird benötigt. Klicken Sie auf "Component" um eine Beschreibung aller Komponenten zu sehen. Falls keins angebracht scheint, suchen Sie nach einer "General" Komponente.</p>
+
+<p><strong>Version:</strong> Das Feld zeigt die früheste Version, mit der der Bug nachgewiesen wurde. Entwickler benötigen diese Information, um die Code-Änderung, die das Problem verursacht, aufzuspüren. Außderdem dient die Versions-Information der Unterscheidung von Bugs mit unterschiedlichen Ursachen, aber ähnlchen oder gar gleichen Symptomen: Bugs, die defenitiv mit unterschiedlichen Produkt-Versionen auftraten, haben mit großer Sicherheit tatsächlich unterschiedliche Ursachen und sind keine <a href="https://bugzilla.mozilla.org/page.cgi?id=fields.html#status">DUPLICATEs</a>.</p>
+
+<p><strong>OS:</strong> Auf welchem Betriebssystem haben Sie den Bug gefunden? (z.B. Linux, Windows XP, Mac OS X)</p>
+
+<p>Wenn Sie wissen, dass der Bug auf mehreren Betriebssystemen besteht, klicken Sie "All". Wenn ihr Betriebssystem nicht aufgelistet ist, klicken Sie auf "Other".</p>
+
+<p><strong>Summary:</strong> Wie würden Sie den Bug beschreiben, möglichst in 60 oder weniger Buchstaben?</p>
+
+<p>Eine gute Kurzfassung sollte eine Bug-Meldung schnell und unverwechselbar beschreiben. Sie sollte das Problem erklären, nicht Ihre vorgeschlagene Lösung.</p>
+
+<ul>
+ <li>Gut: "Cancelling a File Copy dialog crashes File Manager" <em>("Wenn der Kopiervorgang einer Datei abgebrochen wird stürzt das Dateisystem ab")</em></li>
+ <li>Schlecht: "Software crashes" <em>("Programm stürzt ab")</em></li>
+ <li>Gut: "Down-arrow scrolling doesn't work in &lt;textarea&gt; styled with overflow:hidden" <em>("Pfeiltaste-nach-unten-scrollen funktioniert nicht in  &lt;Textbereich&gt; gestaltet mit overflow:hidden")</em></li>
+ <li>Schlecht: "Browser should work with my web site" <em>("Browser sollte mit meiner Internetseite funktionieren")</em></li>
+</ul>
+
+<p><strong>Description:</strong> Die Details ihrer Bug-Meldung, einschließlich:</p>
+
+<p><strong>Overview:</strong> Detailliertere Beschreibung der Zusammenfassung.</p>
+
+<pre class="eval">Drag-selecting any page crashes Mac builds in the NSGetFactory function.</pre>
+
+<p><strong>Steps to Reproduce:</strong> Kleine, einfache Schritte, um den Bug nachzumachen. Mit Hinweisen zum Setup.</p>
+
+<pre class="eval">1) View any web page. (I used the default sample page,
+resource:/res/samples/test0.html)
+
+2) Drag-select the page. (Specifically, while holding down
+the mouse button, drag the mouse pointer downwards from any
+point in the browser's content region to the bottom of the
+browser's content region.)
+</pre>
+
+<p><strong>Actual Results:</strong> Was die Applikation macht, nachdem Sie die oben aufgeführten Schritte durchgeführt haben.</p>
+
+<pre class="eval">The application crashed.</pre>
+
+<p><strong>Expected Results:</strong> Was die Applikation hätte tun sollen, wenn der Bug nicht da wäre.</p>
+
+<pre class="eval">The window should scroll downwards. Scrolled content should be selected.
+(Or, at least, the application should not crash.)
+</pre>
+
+<p><strong>Build Date &amp; Platform:</strong> Datum und Betriebssystem auf dem die Applikation lief, als sie den Bug zum ersten Mal gesehen haben.</p>
+
+<pre class="eval">Build 2006-08-10 on Mac OS 10.4.3</pre>
+
+<p><strong>Additional Builds and Platforms:</strong> Falls Sie wissen, dass der Bug auch in anderen Betriebssystemen (oder Browsern) auftritt (oder nicht), schreiben Sie dies dazu.</p>
+
+<pre class="eval">Doesn't Occur On Build 2006-08-10 on Windows XP Home (Service Pack 2)</pre>
+
+<p><strong>Additional Information:</strong> Andere wichtige Informationen.</p>
+
+<p>Für Bugs, die den Browser abstürzen lassen:</p>
+
+<ul>
+ <li>Win32: Wenn Sie einen Dr. Watson-Fehler erhalten, notieren Sie bitte den Typ des Absturz und das Modul in welchem die Applikation abstürzte (z.B. "Access violation in mozilla.exe")</li>
+ <li>Mac OS X: Wenn die Applikation abstürzt, klicken Sie den Report-Button im Bestätigungsfenster, das erscheint, kopieren Sie dann den ganzen Text, der unter der Nachricht "Problem and system information" erscheint und fügen Sie ihn in Ihre Bug-Meldung ein. Sie müssen die Meldung nicht an Apple senden, also klicken Sie nur auf den roten "Schließen"-Button am oberen Rand des Fensters</li>
+ <li>Unix: Bitte stellen Sie einen minimierten Stack-Trace zur Verfügung, welche generiert werden kann, indem Sie <code>gdb mozilla core</code> in eine Eingabeaufforderung eingeben.</li>
+</ul>
+
+<pre>Date/Time:      2006-12-26 12:15:20.089 -0500
+OS Version:     10.4.8 (Build 8L2127)
+Report Version: 4
+
+Command: firefox-bin
+Path:    /Applications/Firefox.app/Contents/MacOS/firefox-bin
+Parent:  WindowServer [71]
+
+Version: 2.0.0.1 (2.0.0.1)
+
+PID:    114
+Thread: 0
+
+Exception:  EXC_BAD_ACCESS (0x0001)
+Codes:      KERN_PROTECTION_FAILURE (0x0002) at 0x000000ca
+
+Thread 0 Crashed:
+0   libxpcom_core.dylib 	0x0186329b AppendUTF8toUTF16(char const*, nsAString_internal&amp;) + 31
+1   libxpcom_core.dylib 	0x01822916 nsTextFormatter::smprintf_free(unsigned short*) + 3248
+... (many many more lines like this) ...</pre>
+
+<p><strong>Add an attachment:</strong> Sie können relevante Dateien an ihre Bug-Meldung anfügen. Debugging-Informationen, die länger als 20 Zeilen sind, sollten auf diesem Weg geliefert werden. Sollten Sie eine HTML-Datei haben, die diesen Bug beschreibt, sollten Sie sie anfügen. Sie können anfänglich nur eine Datei anfügen. Sollte ihre Meldung mehr Dateien angehängt haben, besuchen Sie den neu hinzugefügten Bug später noch einmal, um das zu tun. Hängen Sie zuerst untergeordnete Dateien an (z.B. Bilder) und ändern Sie anschließend die HTML-Datei, sodass die Demo unabhängig ist. Fragen Sie, bevor Sie mehr als 5 Dateien anhängen.</p>
+
+<p>Prüfen Sie Ihren Report zweimal auf Fehler und drücken Sie dann "Commit". Ihre Bug-Meldung wird nun in die Bugzilla-Datenbank kommen.</p>
+
+<div class="originaldocinfo">
+<h2 id="Informationen_zum_Originaldokument">Informationen zum Originaldokument</h2>
+
+<ul>
+ <li>Author(en): Gervase Markham, basierend auf dem Original von Eli Goldberg</li>
+ <li>Andere Beteiligte: Claudius Gayle, Jan Leger, Felix Miata, Peter Mock, Chris Pratt, Chris Yeh, und weitere.</li>
+ <li>Erste Übersetzung English-German von Lukas Diener</li>
+</ul>
+</div>
+
+<p> </p>
diff --git a/files/de/sandbox/index.html b/files/de/sandbox/index.html
new file mode 100644
index 0000000000..2f88f3ca0f
--- /dev/null
+++ b/files/de/sandbox/index.html
@@ -0,0 +1,69 @@
+---
+title: Junk
+slug: Sandbox
+translation_of: Sandbox
+---
+<h2 id="Hallo_Welt1">Hallo Welt1</h2>
+
+<h3 id="HTML_Inhalt1">HTML Inhalt1</h3>
+
+<h2 id="Hallo_Welt!">Hallo Welt!</h2>
+
+<h2 id="&lt;p>Das_ist_ein_&lt;i>unglaublicher1&lt;i>Paragraph&lt;p>">&lt;p&gt;Das ist ein &lt;i&gt;unglaublicher1&lt;/i&gt;Paragraph&lt;/p&gt;</h2>
+
+<p> </p>
+
+<p>Dies ist eine exmperimentelle Seite für Leute, die als MDN Beiträger starten.</p>
+
+<div class="warning">
+<h2 id="CSS_Inhalt1">CSS Inhalt1</h2>
+</div>
+
+<div class="twocolumns">
+<div class="threecolumns">
+<div class="twocolumns">
+<pre class="brush: css"><code>1  h1{
+2  color: yellow;
+3  }
+4
+5  p{
+6  font-size: low;
+7  }</code></pre>
+</div>
+</div>
+</div>
+
+<p> </p>
+
+<h2 id="Testvorlage">Testvorlage</h2>
+
+<h3 id="HTML_Inhalt">HTML Inhalt</h3>
+
+<pre class="brush: html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">1  </span></span></span></code><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span>'the_canvas'</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+
+<h2 id="mathvariant-Examples" name="mathvariant-Examples">mathvariant-Examples</h2>
+
+<h3 id="HTML-Inhalt">HTML-Inhalt</h3>
+
+<pre class="brush: html"><code>normal</code> (Standardwert) ; <math><mn mathvariant="normal">Beispiel</mn></math>
+<code>bold</code> ; <math><mn mathvariant="bold">Beispiel</mn></math>
+<code>italic</code> ; <math><mn mathvariant="italic">Beispiel</mn></math>
+<code>bold-italic</code> ; <math><mn mathvariant="bold-italic">Beispiel</mn></math>
+<code>double-struck</code> ; <math><mn mathvariant="double-struck">Beispiel</mn></math>
+<code>bold-fraktur</code> ; <math><mn mathvariant="bold-fraktur">Beispiel</mn></math>
+<code>script</code> ; <math><mn mathvariant="script">Beispiel</mn></math>
+<code>bold-script</code> ; <math><mn mathvariant="bold-script">Beispiel</mn></math>
+<code>fraktur</code> ; <math><mn mathvariant="fraktur">Beispiel</mn></math>
+<code>sans-serif</code> ; <math><mn mathvariant="sans-serif">Beispiel</mn></math>
+<code>bold-sans-serif</code> ; <math><mn mathvariant="bold-sans-serif">Beispiel</mn></math>
+<code>sans-serif-italic</code> ; <math><mn mathvariant="sans-serif-italic">Beispiel</mn></math>
+<code>sans-serif-bold-italic</code> ; <math><mn mathvariant="sans-serif-bold-italic">Beispiel</mn></math>
+<code>monospace</code> ; <math><mn mathvariant="monospace">Beispiel</mn></math>
+<code>initial</code> ; <math><mn mathvariant="initial">مثال</mn></math>
+<code>tailed</code> ; <math><mn mathvariant="tailed">مثال</mn></math>
+<code>looped</code> ; <math><mn mathvariant="looped">مثال</mn></math>
+<code>stretched</code> ; <math><mn mathvariant="stretched">مثال</mn></math>
+</pre>
+
+<p>{{ EmbedLiveSample('mathvariant-Examples') }}</p>
diff --git a/files/de/social_api/index.html b/files/de/social_api/index.html
new file mode 100644
index 0000000000..38ad560b63
--- /dev/null
+++ b/files/de/social_api/index.html
@@ -0,0 +1,69 @@
+---
+title: Social API
+slug: Social_API
+translation_of: Archive/Social_API
+---
+<p>Die Social API macht es einfacher für Webentwickler, soziale Dienste in den Webbrowser zu integrieren. Ist ein Dienstanbieter einmal für Firefox implementiert, so kann der Browser benutzerdefinierte Steuerelemente und Informationen zu einem konkreten Dienst anzuzeigen. Die folgenden Artikel erklären, wie man einen solchen Anbieter implementiert.  </p>
+<div class="note">
+  <p><strong>Anmerkung:</strong>  Viele der Inhalte der hier aufgeführten Unterseiten wurden entworfen, aber noch nicht in diesen Baum migriert; Temporär sind diese <a href="/en-US/docs/User:Sheppy/Social_API_temp" title="/en-US/docs/User:Sheppy/Social_API_temp">hier</a> aufzufinden.</p>
+</div>
+<div class="row topic-page">
+  <div class="section">
+    <h2 class="Documentation" id="Social_API_Dokumentation">Social API Dokumentation</h2>
+    <dl>
+      <dt>
+        <a href="/en-US/docs/Social_API/Glossary" title="/en-US/docs/Social_API/Glossary">Social API Glossar</a></dt>
+      <dd>
+        Stellt Definitionen der wichtigsten Begriffe bereit, die du wissen musst, um die Social API zu benutzen.</dd>
+      <dt>
+        <a href="/en-US/docs/Social_API/Guide" title="/en-US/docs/Social_API/Guide">Social API und Anleitung für soziale Dienste</a></dt>
+      <dd>
+        Vorstellung und Einführung in die Social API und zugehörige Dienste.</dd>
+      <dt>
+        <a href="/en-US/docs/Social_API/Manifest" title="/en-US/docs/Social_API/Manifest">Manifest sozialer Dienste</a></dt>
+      <dd>
+        Eine Beschreibung des (TBD: und Anleitung für die Erstellung) Manifests notwendig</dd>
+      <dt>
+        <a href="/en-US/docs/Social_API/Service_worker_API_reference" title="/en-US/docs/Social_API/Service_worker_API_reference">Worker API sozialer Dienste</a></dt>
+      <dd>
+        Eine Referenz zur Worker API sozialer Dienste.</dd>
+      <dt>
+        <a href="/en-US/docs/DOM/navigator.mozSocial" title="/en-US/docs/DOM/navigator.mozSocial">Social service content API: MozSocial</a></dt>
+      <dd>
+        Eine Referenz für die social service content API, die vom </dd>
+      <dd>
+        {{domxref("navigator.MozSocial")}} Objekt bereitgestellt wird. </dd>
+      <br>
+    </dl>
+    <dl>
+      <dt>
+        <a href="/en-US/docs/Social_API/Widgets" title="/en-US/docs/Social_API/Widgets">Social service widgets</a></dt>
+      <dd>
+        Eine Anleitung für Widgets, die von sozialen Diensten bereitgestellt werden.</dd>
+      <dt>
+        <a href="/en-US/docs/Social_API/Implementing_chat_functionality" title="/en-US/docs/Social_API/Implementing_chat_functionality">Implementieren von Chatfunktionalität</a></dt>
+      <dd>
+        Eine Anleitung für die Implementiereung von Chatfunktionalitäten mit der Social API.</dd>
+    </dl>
+    <p><span class="alllinks"><a href="/en-US/docs/tag/Social" title="/en-US/docs/tag/CSS">Alle anzeigen...</a></span></p>
+  </div>
+  <div class="section">
+    <h2 class="Community" id="Community" name="Community">Hilfe von der Community erhalten</h2>
+    <p>Du brauchst Hilfe bei einem Problem, dass die Social API betrifft und kannst keine Lösung in der Dokumentation finden?</p>
+    <ul>
+      <li>Stelle deine Frage im Mozilla IRC channel: <a href="irc://irc.mozilla.org/socialdev" title="irc://irc.mozilla.org/socialdev">#socialdev</a></li>
+    </ul>
+    <p style="margin-left: 40px;"><em><a href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">Vergiss die netiquette nicht...</a></em></p>
+    <p> </p>
+    <h2 class="Tools" id="Tools" name="Tools">Tools und Demos</h2>
+    <ul>
+      <li><a href="https://github.com/mixedpuppy/socialapi-demo" title="https://github.com/mixedpuppy/socialapi-demo">Ein Beispielprovider auf Github</a></li>
+    </ul>
+    <p><span class="alllinks"><a href="/en-US/docs/tag/Social" title="/en-US/docs/tag/CSS:Tools">Alle anzeigen...</a></span></p>
+    <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Verwandte Themen</h2>
+    <ul>
+      <li><a href="/en-US/docs/Apps" title="/en-US/docs/Apps">Freie Webapplikationen</a></li>
+    </ul>
+  </div>
+</div>
+<p> </p>
diff --git a/files/de/spidermonkey/build_documentation/index.html b/files/de/spidermonkey/build_documentation/index.html
new file mode 100644
index 0000000000..9502dcd4be
--- /dev/null
+++ b/files/de/spidermonkey/build_documentation/index.html
@@ -0,0 +1,239 @@
+---
+title: SpiderMonkey Build Documentation
+slug: SpiderMonkey/Build_Documentation
+tags:
+  - Build Dokumentation
+  - Guide
+  - Linux Build
+  - SpiderMonkey
+  - Windows Build
+translation_of: Mozilla/Projects/SpiderMonkey/Build_Documentation
+---
+<div>{{SpiderMonkeySidebar("General")}}</div>
+
+<h2 id="SpiderMonkey_erstellen">SpiderMonkey erstellen</h2>
+
+<p>Befolgen Sie diese Schritte um den aktuellsten SpiderMonkey Build zu erstellen.</p>
+
+<p>Bevor Sie jedoch beginnen, stellen Sie sicher, dass sich die richtigen Build Werkzeuge auf Ihrem Computer befinden: <a href="/En/Developer_Guide/Build_Instructions/Linux_Prerequisites" title="en/Linux_Build_Prerequisites">Linux</a>, <a href="/En/Developer_Guide/Build_Instructions/Windows_Prerequisites" title="en/Windows_Build_Prerequisites">Windows</a>, <a href="/En/Developer_Guide/Build_Instructions/Mac_OS_X_Prerequisites" title="en/Mac_OS_X_Build_Prerequisites">Mac</a>, <a href="/En/Developer_Guide/Build_Instructions" title="en/Build_Documentation">others</a>. Sollten Sie eine ältere Version als 28 erstellen wollen, benötigen Sie zusätzlich <a href="/en/NSPR" title="en/NSPR">NSPR</a>.</p>
+
+<p style="margin: 0px 0px 1.7em; padding: 0px;">Selbstverständlich benötigen Sie auch den <a class="internal" href="/En/SpiderMonkey/Getting_SpiderMonkey_source_code#Getting_the_latest_SpiderMonkey_source_code" title="En/SpiderMonkey/Getting SpiderMonkey source code#Getting the latest SpiderMonkey source code">SpiderMonkey Quellcode</a>.</p>
+
+<h3 id="Non-developer_(optimierter)_Build">Non-developer (optimierter) Build</h3>
+
+<p>Befolgen Sie diese Schritte wenn Sie SpiderMonkey einfach nur installieren oder es als Bibliothek nutzen wollen. (Wenn Sie SpiderMonkey an sich verbessern wollen, sollten Sie zusätzlich einen Developer/Debug-Build wie unten beschrieben erstellen.)</p>
+
+<pre class="eval">cd js/src
+autoconf-2.13
+
+# This name should end with "_OPT.OBJ" to make the version control system ignore it.
+mkdir build_OPT.OBJ
+cd build_OPT.OBJ
+../configure
+# Use "mozmake" on Windows
+make
+</pre>
+
+<p>Beachten Sie, dass autoconf version 2.13 benötigt wird. Keine ältere Version wird funktionieren. Das <a href="/En/Developer_Guide/Build_Instructions/Windows_Prerequisites#mozillabuild" title="https://developer.mozilla.org/en/Windows_Build_Prerequisites#mozillabuild">MozillaBuild</a> Paket für Windows beeinhaltet autoconf 2.13.</p>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Sollten Sie einen Mac nutzen und eine ähnliche Fehlermeldung wie folgendes erhalten:</p>
+
+<p>"<code>checking whether the C compiler (gcc-4.2  ) works... no<br>
+ configure: error: installation or configuration problem: C compiler cannot create executables.</code>"</p>
+
+<p>Dann können Sie versuchen es so zu konfigurieren :</p>
+
+<pre><code>CC=clang CXX=clang++  ../configure</code></pre>
+</div>
+
+<p>Dies erstellt eine ausfühbare Datei mit Namen <code>js</code> im Verzeichnis <code>build-release/dist/bin</code>. Sie können es mit <code>dist/bin/js --help</code> testen,  welches eine Hilfeseite anzeigt. An diesem Punkt sind Sie bereit <a href="/En/SpiderMonkey/Introduction_to_the_JavaScript_shell" title="en/Introduction_to_the_JavaScript_shell">die Shell auszuführen und zu testen</a>.</p>
+
+<p>Auf Mac, Linux, oder UNIX können Sie SpiderMonkey auf Ihrem System mit dem zusätzlichen Befehl <code>make install</code> installieren. Dies installiert die geteilte Bibliothek nach <code>/usr/local/lib</code>, die C-Header-Dateien nach <code>/usr/local/include</code>, und die ausführbare <code>js</code>  nach <code>/usr/local/bin</code>.</p>
+
+<h3 id="Developer_(debug)_Build">Developer (debug) Build</h3>
+
+<p>Um SpiderMonkey zu debuggen und zu verbessern ist es das Beste beide, einen Debug-Build  (für alltägliches debugging) und einen optimierten Build (zum Testen der Performance), in separaten Build Verzeichnissen zu haben. Daher sollten Sie zusätzlich zu den oben genannten Schritten auch einen Debug-Build mit den folgenden Schritten erstellen:</p>
+
+<pre class="eval">cd js/src
+autoconf-2.13
+
+# This name should end with "_DBG.OBJ" to make the version control system ignore it.
+mkdir build_DBG.OBJ
+cd build_DBG.OBJ
+../configure --enable-debug --disable-optimize
+# Use "mozmake" on Windows
+make
+</pre>
+
+<p>Sie können auch Debug-Builds von SpiderMonkey mit der Option <code>JS_GC_ZEAL</code>  erstellen, die SpiderMonkey eine neue integrierte Funktion hinzufügt, mit der Sie eine eifrige Garbage Collection konfigurieren können. Dies ist nützlich um Speicherlecks und andere speicherbezogene Probleme zu beheben. Siehe <a class="internal" href="/en/SpiderMonkey/JSAPI_Reference/JS_SetGCZeal" title="En/SpiderMonkey/JSAPI Reference/JS SetGCZeal"><code>JS_SetGCZeal()</code></a> für weitere Details.</p>
+
+<p>Für eine Liste anderer verfügbarer Build-Optionen geben Sie Folgendes ein (vorausgesetzt, das aktuelle Arbeitsverzeichnis ist eines der oben erstellten Build-Verzeichnisse):</p>
+
+<pre class="eval">../configure --help
+</pre>
+
+<h3 id="Building" name="Building">Windows Builds</h3>
+
+<div class="note">
+<p>Seit Version 28, <strong>sind threadsafe Builds Standard</strong> und sollten auf allen POSIX-Plattformen sofort einsatzbereit sein. Daher sollten die folgenden Anweisungen nur relevant sein, wenn Sie unter Windows arbeiten oder eine ältere Version von SpiderMonkey kompilieren.</p>
+</div>
+
+<p>Die MozillaBuild-Batch-Datei, die Sie zum Öffnen Ihrer Shell verwendet haben (z. B. <code>start-shell-msvc2013.bat</code> oder <code>start-shell-msvc2013-x64.bat</code>), bestimmt, ob die Compiler-Toolchain auf 32-Bit- oder 64-Bit-Builds abzielt. Um einen 64-Bit-Build zu erstellen beachten Sie, dass Sie mit <code>--target=x86_64-pc-mingw32 --host=x86_64-pc-mingw32</code> konfigurieren müssen. </p>
+
+<p>Da die POSIX NSPR-Emulation für Windows nicht verfügbar ist, muss eine funktionierende Version von NSPR für Ihren Build verfügbar sein. <strong>Die einfachste Option ist die Konfiguration mit <code>--enable-nspr-build</code>.</strong> Diese Konfigurationsoption erstellt die In-Tree-Version von NSPR, die Sie wahrscheinlich verwenden möchten. Da SpiderMonkey neuere NSPR-Symbole verwendet, funktioniert der mit Ihrem Betriebssystem ausgelieferte NSPR wahrscheinlich nicht.</p>
+
+<p>Wenn <code>--enable-nspr-build</code> nicht funktioniert, teilen Sie <code>configure</code> explizit mit, wo es NSPR findet, indem Sie die Konfigurationsoptionen <code>-with-nspr-cflags</code> und <code>--with-nspr-libs</code> verwenden. Angenommen, Ihr lokaler NSPR wurde in <code>C:/mozilla-build/msys/local</code> installiert:</p>
+
+<pre><span style="line-height: normal;"><code><span style="line-height: normal;"><code><code>./configure<code> --with-nspr-cflags="-IC:/mozilla-build/msys/local/include" \
+            --with-nspr-libs="<span style="line-height: normal;"><code><span style="line-height: normal;"><code><code><code>C:/mozilla-build/msys/local</code></code></code></span></code></span>/lib/libnspr4.a \
+                              <span style="line-height: normal;"><code><span style="line-height: normal;"><code><code><code>C:/mozilla-build/msys/local</code></code></code></span></code></span>/lib/libplds4.a \
+                              <span style="line-height: normal;"><code><span style="line-height: normal;"><code><code><code>C:/mozilla-build/msys/local</code></code></code></span></code></span>/lib/libplc4.a"</code>
+</code></code></span></code></span></pre>
+
+<p>Sollten Sie beim Laden von Symbolen oder der dynamischen Bibliothek Fehler erhalten, können Sie erzwingen den korrekten NSPR mit:</p>
+
+<pre><span style="line-height: normal;">PATH="$PATH;<span style="line-height: normal;">C:/mozilla-build/msys/local/lib/</span><span style="line-height: normal;">" ./js</span></span></pre>
+
+<p><span style="line-height: normal;"><span style="line-height: normal;">zu laden.</span></span></p>
+
+<h2 id="Angeben_der_Installationsverzeichnisse">Angeben der Installationsverzeichnisse</h2>
+
+<p><code>make install</code> legt Dateien standardmäßig in den folgenden Verzeichnissen ab. Sie können dies überschreiben, indem Sie Optionen an das <code>configure</code>-Skript übergeben:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Was es ist</th>
+   <th>Wo es abgelegt wird</th>
+   <th><code>configure</code> Option</th>
+  </tr>
+  <tr>
+   <td>ausführbare Dateien, Shell-Skripte</td>
+   <td><code>/usr/local/bin</code></td>
+   <td><code>--bindir</code></td>
+  </tr>
+  <tr>
+   <td>Bibliotheken, Daten</td>
+   <td><code>/usr/local/lib</code></td>
+   <td><code>--libdir</code></td>
+  </tr>
+  <tr>
+   <td>architekturunabhängige Daten</td>
+   <td><code>/usr/local/share</code></td>
+   <td><code>--sharedir</code></td>
+  </tr>
+  <tr>
+   <td>C-Header-Dateien</td>
+   <td><code>/usr/local/include</code></td>
+   <td><code>--includedir</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Der Einfachhalt halber können Sie dem <code>configure</code> Script (Konfigurationsskript) eine Option der Form <code>--prefix=&lt;PREFIXDIR&gt;</code> übergeben, die <code>&lt;PREFIXDIR&gt;</code> für <code>/usr/local</code> in allen obigen Einstellungen in einem Schritt ersetzt. Dies ist normalerweise die am wenigsten problematische Sache, da es die typische Anordnung von <code>lib</code>, <code>bin</code> und dem Rest beibehält. </p>
+
+<div class="note"><strong>Hinweis:</strong> Alle Verzeichnisse, die Sie zur <code>configure</code> übergeben, werden im generierten makefile aufgezeichnet, sodass Sie sie erst erneut angeben müssen, wenn Sie <code>configure</code> erneut ausführen.</div>
+
+<h2 id="SpiderMonkey_als_statische_Bibliothek_erstellen">SpiderMonkey als statische Bibliothek erstellen</h2>
+
+<p>Standardmäßig wird SpiderMonkey als gemeinsam genutzte Bibliothek erstellt. Sie können SpiderMonkey jedoch als statische Bibliothek erstellen, indem Sie beim Ausführen von <code>configure</code> das Flag <code>--disable-shared-js</code> angeben. </p>
+
+<h2 id="Angeben_der_Compiler_und_Compiler_Flags">Angeben der Compiler und Compiler Flags</h2>
+
+<p>Wenn Sie einen anderen Compiler verwenden möchten als den, den das <code>configure</code> -Skript standardmäßig für Sie auswählt, können Sie die CXX-Variable in der Umgebung festlegen, wenn Sie <code>configure</code> ausführen. Dadurch werden die Werte gespeichert, die Sie im generierten Makefile angegeben haben. Wenn Sie diese Makefile einmal festgelegt haben, müssen Sie dies erst wieder tun, wenn Sie <code>configure</code> rneut ausführen.</p>
+
+<p>Wenn Sie bestimmte Flags an den Compiler übergeben möchten, können Sie die <code>CXXFLAGS</code> -Umgebungsvariable beim Ausführen von <code>configure</code> festlegen. Wenn Sie beispielsweise die GNU-Toolchain verwenden, wird im Folgenden das Flag <code>-g3</code> an den Compiler übergeben, wodurch Debug-Informationen zu Makros ausgegeben werden. Dann können Sie diese Makros in <code>gdb</code> -Befehlen verwenden:</p>
+
+<pre class="eval">$ <strong>CXXFLAGS=-g3 $SRC/configure</strong>
+<em>...</em>
+checking whether the C++ compiler (c++ -g3 ) works... yes
+<em>...</em>
+$
+</pre>
+
+<p>Um eine 32-Bit Version auf einem 64-Bit Linux System zu erstellen können Sie Folgendes verwenden:</p>
+
+<pre class="eval">PKG_CONFIG_LIBDIR=/usr/lib/pkgconfig CC="gcc -m32" CXX="g++ -m32" AR=ar $SRC/configure --target=i686-pc-linux
+</pre>
+
+<p>Um eine 64-Bit Version auf einem 32-Bit Mac System (bspw. Mac OS X 10.5) zu erstellen können Sie Folgendes verwenden:</p>
+
+<pre class="eval">AR=ar CC="gcc -m64" CXX="g++ -m64" ../configure --target=x86_64-apple-darwin10.0.0
+</pre>
+
+<p>Um eine 64-Bit Version für Windows zu erstellen können Sie Folgendes verwenden:</p>
+
+<pre class="eval">$SRC/configure --host=x86_64-pc-mingw32 --target=x86_64-pc-mingw32
+</pre>
+
+<div class="note"><strong>Hinweis:</strong> Sie müssen Ihre MozillaBuild Shell mit dem korrekten -x64.bat Skript gestartet haben, damit sich die 64-Bit Compiler in Ihrem PATH befinden.</div>
+
+<p>Die Compiler und Flags, die Sie <code>configure</code> (Konfiguration) übergeben, werden in der generierten Makefile aufgezeichnet. Sie müssen diese daher erst wieder angeben, wenn Sie <code>configure</code> erneut ausführen.</p>
+
+<h2 id="Erstellung_Ihrer_Anwendung">Erstellung Ihrer Anwendung</h2>
+
+<p>Während "Wie können Sie eine komplette Anwendung erstellen" für dieses Dokument eindeutig nicht möglich ist, hier ein paar Tipps, die Ihnen dabei helfen werden:</p>
+
+<ul>
+ <li>Die SpideMonkey Entwickler ändern häufig und absichtlich die JSAPI ABI. Sie können keine für eine Version / Konfiguration von JSAPI erstellten Header verwenden, um Objektdateien zu erstellen, die mit anderen verknüpft sind.</li>
+ <li>Die Unterstüztung für JS_THREADSAFE wurde kürzlich eingestellt und threadsafe Builds sind jetzt standardmäßig aktiviert.</li>
+ <li>Das unten beschriebene <code>js-config</code> Skript ist die empfohlene Methode, um korrekte Include-Pfade, erforderliche Bibliotheken usw. zu bestimmen, damit Ihre Einbettung während der Kompilierung verwendet werden kann. Wir empfehlen dringend, das <code>js-config</code> Skript aus dem Makefile Ihrer Einbettung aufzurufen, um Ihre CFLAGS, LDFLAGS usw einzustellen.</li>
+ <li>Um SpiderMonkey in einem anderen Verzeichnis als dem Standard zu installieren, müssen Sie die <code>configure</code> <code>--prefix</code> Option, wie oben beschrieben, verwenden. Andernfalls kann der Header in <code>js-config.h</code> oder das Skript <code>js-config</code> beschädigt werden.</li>
+ <li>Some features detected by the <code>configure</code> script do not work for cross-compilation.</li>
+</ul>
+
+<h3 id="Using_the_js-config_script">Using the js-config script</h3>
+
+<p>In addition to the SpiderMonkey libraries, header files, and shell, the SpiderMonkey build also produces a shell script named <code>js-config</code> which other build systems can use to find out how to compile code using the SpiderMonkey APIs, and how to link with the SpiderMonkey libraries.</p>
+
+<div class="note"><strong>Note:</strong> In SpiderMonkey 1.8.5, the js-config script is not generated properly on many platforms. If the instructions below do not work, you can try this <a href="/en/SpiderMonkey/1.8.5#js-config" title="https://developer.mozilla.org/en/SpiderMonkey/1.8.5#js-config">workaround</a>.</div>
+
+<p>When invoked with the <code>--cflags</code> option, <code>js-config</code> prints the flags that you should pass to the C compiler when compiling files that use the SpiderMonkey API. These flags ensure the compiler will find the SpiderMonkey header files.</p>
+
+<pre class="eval">$ ./js-config --cflags # Example output: -I/usr/local/include/js -I/usr/include/nspr
+</pre>
+
+<p>When invoked with the <code>--libs</code> option, <code>js-config</code> prints the flags that you should pass to the C compiler when linking an executable or shared library that uses SpiderMonkey. These flags ensure the compiler will find the SpiderMonkey libraries, along with any libraries that SpiderMonkey itself depends upon (like NSPR).</p>
+
+<pre class="eval">$ ./js-config --libs # Example output: -L/usr/local/lib -lmozjs -L/usr/lib -lplds4 -lplc4 -lnspr4 -lpthread -ldl -ldl -lm  -lm -ldl</pre>
+
+<h2 id="Test" name="Test">Testing SpiderMonkey</h2>
+
+<ul>
+ <li>
+  <p>Run <code>${BUILDDIR}/dist/bin/js </code><code>Y.js</code> and check if appropriate output is printed. (It should say: <code>5! is 120</code>.)</p>
+ </li>
+ <li>
+  <p>Run the main test suite by running <code>./tests/jstests.py ${BUILDDIR}/dist/bin/js</code></p>
+ </li>
+ <li>
+  <p>Run JIT-specific tests by running: <code>./jit-test/jit_test.py ${BUILDDIR}/dist/bin/js</code></p>
+ </li>
+</ul>
+
+<h2 id="Building_SpiderMonkey_1.8_or_earlier">Building SpiderMonkey 1.8 or earlier</h2>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Use these instructions to build SpiderMonkey from an official source release or from the old CVS repository. To build the latest SpiderMonkey sources from Mercurial, see <a href="#Building_SpiderMonkey_tip" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;">Building SpiderMonkey </a>above.</p>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><a href="/en/SpiderMonkey" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;" title="en/SpiderMonkey">SpiderMonkey</a> is easy to build from source if you have the usual Mozilla build prerequisites installed. Before you begin, make sure you have right build tools for your computer: <a href="/En/Developer_Guide/Build_Instructions/Linux_Prerequisites" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;" title="en/Linux_Build_Prerequisites">Linux</a>, <a href="/En/Developer_Guide/Build_Instructions/Windows_Prerequisites" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;" title="en/Windows_Build_Prerequisites">Windows</a>, <a href="/En/Developer_Guide/Build_Instructions/Mac_OS_X_Prerequisites" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;" title="en/Mac_OS_X_Build_Prerequisites">Mac</a>, <a href="/En/Developer_Guide/Build_Instructions" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;" title="en/Build_Documentation">others</a>.</p>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">First, download a SpiderMonkey source distribution, such as <a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/js/js-1.8.0-rc1.tar.gz" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;">SpiderMonkey 1.8 Release Candidate 1</a>.</p>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">To build, use these commands:</p>
+
+<pre class="eval" style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(246, 246, 242); font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;">tar xvzf js-1.8.0-rc1.tar.gz
+cd js/src
+make -f Makefile.ref
+</pre>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">This builds a debug version of SpiderMonkey. All build files are created in a subdirectory named depending on your system (for example,<code style="font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace; color: inherit; font-weight: inherit;">Linux_All_DBG.OBJ</code> if you are on Linux). To install this build on your system, see <a class="external" href="http://ebixio.com/blog/2010/07/31/how-to-install-libjs-spidermonkey/" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;" title="http://ebixio.com/blog/2010/07/31/how-to-install-libjs-spidermonkey/">SpiderMonkey installation instructions</a>.</p>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">To build an optimized (non-debug) version of SpiderMonkey:</p>
+
+<pre class="eval" style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(246, 246, 242); font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;">make BUILD_OPT=1 -f Makefile.ref</pre>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">To build a <a href="/en/SpiderMonkey/JSAPI_Reference/JS_THREADSAFE" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;" title="JS_THREADSAFE">thread-safe</a> version of SpiderMonkey:</p>
+
+<pre class="eval" style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(246, 246, 242); font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;">make JS_DIST=/full/path/to/directory/containing/nspr JS_THREADSAFE=1 -f Makefile.ref
+</pre>
diff --git a/files/de/spidermonkey/index.html b/files/de/spidermonkey/index.html
new file mode 100644
index 0000000000..59667350fa
--- /dev/null
+++ b/files/de/spidermonkey/index.html
@@ -0,0 +1,106 @@
+---
+title: SpiderMonkey
+slug: SpiderMonkey
+tags:
+  - JavaScript
+  - SpiderMonkey
+translation_of: Mozilla/Projects/SpiderMonkey
+---
+<p>   </p>
+
+<p><strong>SpiderMonkey</strong> ist die in C geschriebene <a href="/de/JavaScript" title="de/JavaScript">JavaScript</a> Engine für <a href="/de/Gecko" title="de/Gecko">Gecko</a>. SpiderMonkey wird in verschiedenen Mozilla Produkten (auch Firefox) verwendet und ist unter der MPL/GPL/LGPL Lizenz verfügbar.</p>
+
+<div class="note">Hinweis: Das <a class="internal" href="/de/SpiderMonkey/FOSS" title="de/SpiderMonkey/FOSS">FOSS</a> Wiki enthält Links zu einigen anderen Bibliotheken und Programmen, die einem das Leben vereinfachen, wenn man Spidermonkey und JSAPI verwendet.</div>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h3 id="Dokumentation">Dokumentation</h3>
+
+    <table>
+     <tbody>
+      <tr>
+       <td colspan="2">
+        <h4 id="Allgemein">Allgemein</h4>
+       </td>
+      </tr>
+      <tr>
+       <td><a href="/de/SpiderMonkey/Build_Dokumentation">SpiderMonkey Build Dokumentation</a></td>
+       <td><small>Wie man die SpiderMonkey Source erhält, kompiliert und Testläufe durchführt.</small></td>
+      </tr>
+      <tr>
+       <td><a href="/de/SpiderMonkey/Einführung_in_die_JavaScript_Shell">Einführung in die JavaScript Shell</a></td>
+       <td>
+        <p><small>Wie man die JavaScript Shell bekommt, kompiliert und verwendet.</small></p>
+       </td>
+      </tr>
+      <tr>
+       <td><a href="/de/SpiderMonkey/Automatisierte_JavaScript_Testläufe">Automatisierte JavaScript Testläufe</a></td>
+       <td><small>Wie automatisierte JavaScript Tests durchgeführt werden können.</small></td>
+      </tr>
+      <tr>
+       <td><a href="/de/SpiderMonkey/Erstellen_von_JavaScript_Tests">Erstellen von JavaScript Tests</a></td>
+       <td><small>Einen Test zu den JavaScript Testsuites hinzufügen.</small></td>
+      </tr>
+      <tr>
+       <td colspan="2">
+        <h4 id="JSAPI">JSAPI</h4>
+       </td>
+      </tr>
+      <tr>
+       <td><a href="/de/SpiderMonkey/JSAPI_Handbuch">JSAPI Handbuch</a></td>
+       <td><small>Dieser Wegweiser bietet einen Überblick über SpiderMonkey und beschreibt wie man die Engine in die eigene Anwendung einbettet, um sie JavaScript-fähig zu machen.</small></td>
+      </tr>
+      <tr>
+       <td><a href="/de/SpiderMonkey/JSAPI_Sprachführer">JSAPI Sprachführer</a></td>
+       <td><small>Zeigt die JSAPI Übersetzung einiger gemeinsam genutzter JavaScript Ausdrücke und Aussagen.</small></td>
+      </tr>
+      <tr>
+       <td><a href="/de/SpiderMonkey/JSAPI_Referenz">JSAPI Referenz</a></td>
+       <td><small>SpiderMonkey API Referenz.</small></td>
+      </tr>
+      <tr>
+       <td><a href="/de/JSDBGAPI_Referenz">JSDBGAPI Referenz</a></td>
+       <td><small>SpiderMonkey Debugging API Referenz.</small></td>
+      </tr>
+      <tr>
+       <td colspan="2">
+        <h4 id="Tipps_Tricks_und_Philosophie">Tipps, Tricks und Philosophie</h4>
+       </td>
+      </tr>
+      <tr>
+       <td><a href="/de/Einbetten_der_JavaScript_Engine">Einbetten der JavaScript Engine</a></td>
+       <td><small>Ein Tutorial über das Einbetten von SpiderMonkey.</small></td>
+      </tr>
+      <tr>
+       <td><a href="/de/SpiderMonkey_Garbage_Collection_Tipps">SpiderMonkey Garbage Collection Tipps</a></td>
+       <td><small>Tipps, die die Fallen des Garbage Collectors vermeiden sollen.</small></td>
+      </tr>
+      <tr>
+       <td><a href="/de/SpiderMonkey/Internals">SpiderMonkey Internals</a></td>
+       <td><small>Ein Überblick über die Dateien und den Aufbau von SpiderMonkey</small></td>
+      </tr>
+      <tr>
+       <td><a href="/de/SpiderMonkey/Internals/Thread_Safety">SpiderMonkey Internals: Thread Safety</a></td>
+       <td><small>Wie SpiderMonkey's Anfragenmodell arbeitet.</small></td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>
+    <h3 id="Verwandte_Themen">Verwandte Themen</h3>
+
+    <ul>
+     <li><a href="/de/JavaScript" title="de/JavaScript">JavaScript</a></li>
+     <li><a href="/de/SpiderMonkey/FOSS" title="de/SpiderMonkey/FOSS">FOSS Projekte, die Spidermonkey verwenden oder darauf basieren</a></li>
+    </ul>
+
+
+    <h3 id="Community" name="Community">Community</h3>
+
+    <p>Fragen? <a class="link-irc" href="irc://irc.mozilla.org/jsapi">Frag im IRC!</a></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/de/theme_erstellen/contents.rdf/index.html b/files/de/theme_erstellen/contents.rdf/index.html
new file mode 100644
index 0000000000..589b4825c1
--- /dev/null
+++ b/files/de/theme_erstellen/contents.rdf/index.html
@@ -0,0 +1,47 @@
+---
+title: contents.rdf
+slug: Theme_erstellen/contents.rdf
+tags:
+  - Themes
+translation_of: Archive/Themes/Creating_a_Skin_for_Firefox/contents.rdf
+---
+<p>Kopieren Sie den folgenden Text in ein neues Textdokument und speichern Sie es unter dem Namen »<code>contents.rdf</code>«:</p>
+<pre>&lt;?xml version="1.0"?&gt;
+
+&lt;RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:chrome="http://www.mozilla.org/rdf/chrome#"&gt;
+
+  &lt;!-- List all the skins being supplied by this theme --&gt;
+  &lt;RDF:Seq about="urn:mozilla:skin:root"&gt;
+    &lt;RDF:li resource="urn:mozilla:skin:My_Theme"/&gt;
+  &lt;/RDF:Seq&gt;
+
+  &lt;RDF:Description about="urn:mozilla:skin:My_Theme"
+        chrome:displayName="My Theme"
+        chrome:accessKey="N"
+        chrome:author="Name des Autors"
+        chrome:authorURL="Webseite des Autors"
+        chrome:description="Beschreibung"
+        chrome:name="My_Theme"
+        chrome:image="vorschaubild.png"&gt;
+   &lt;chrome:packages&gt;
+      &lt;RDF:Seq about="urn:mozilla:skin:My_Theme:packages"&gt;
+        &lt;RDF:li resource="urn:mozilla:skin:My_Theme:browser"/&gt;
+        &lt;RDF:li resource="urn:mozilla:skin:My_Theme:communicator"/&gt;
+        &lt;RDF:li resource="urn:mozilla:skin:My_Theme:global"/&gt;
+        &lt;RDF:li resource="urn:mozilla:skin:My_Theme:mozapps"/&gt;
+        &lt;RDF:li resource="urn:mozilla:skin:My_Theme:help"/&gt;
+      &lt;/RDF:Seq&gt;
+    &lt;/chrome:packages&gt;
+  &lt;/RDF:Description&gt;
+
+  &lt;!-- Version Information. State that we work only with major version 1 of this package. --&gt;
+  &lt;RDF:Description chrome:skinVersion="1.5" about="urn:mozilla:skin:My_Theme:browser"/&gt;
+  &lt;RDF:Description chrome:skinVersion="1.5" about="urn:mozilla:skin:My_Theme:communicator"/&gt;
+  &lt;RDF:Description chrome:skinVersion="1.5" about="urn:mozilla:skin:My_Theme:global"/&gt;
+  &lt;RDF:Description chrome:skinVersion="1.5" about="urn:mozilla:skin:My_Theme:mozapps"/&gt;
+  &lt;RDF:Description chrome:skinVersion="1.5" about="urn:mozilla:skin:My_Theme:help"/&gt;
+&lt;/RDF:RDF&gt;
+
+</pre>
+<p>{{ languages( { "fr": "fr/Cr\u00e9er_un_th\u00e8me_pour_Firefox/contents.rdf", "ja": "ja/Creating_a_Skin_for_Firefox/contents.rdf", "pl": "pl/Tworzenie_sk\u00f3rek_dla_Firefoksa/contents.rdf", "pt": "pt/Criando_um_visual_para_o_Firefox/contents.rdf", "en": "en/Creating_a_Skin_for_Firefox/contents.rdf", "zh-tw": "zh_tw/\u88fd\u4f5c_Firefox_\u4f48\u666f\u4e3b\u984c/contents.rdf" } ) }}</p>
diff --git a/files/de/theme_erstellen/einführung/index.html b/files/de/theme_erstellen/einführung/index.html
new file mode 100644
index 0000000000..ebc2d3232c
--- /dev/null
+++ b/files/de/theme_erstellen/einführung/index.html
@@ -0,0 +1,83 @@
+---
+title: Theme_erstellen/Einführung
+slug: Theme_erstellen/Einführung
+tags:
+  - Add-ons
+  - Themes
+translation_of: Archive/Mozilla/Creating_a_sking_for_Firefox_Getting_Started
+---
+<p>Laden Sie die neueste Version von Firefox herunter und installieren Sie diese. Stellen Sie sicher, dass Sie auch den DOM Inspector installieren.</p>
+<h3 id="Theme_entpacken">Theme entpacken</h3>
+<p>Theoretisch kann man jedes bereits für Firefox erstellte Theme als Grundlage verwenden, der Einheitlichkeit halber wird in diesem Beipiel das Standard Firefox Theme "Winstripe" verwendet. Dieses befindet sich in der Datei <code>classic.jar</code>, die im Firefox Installationsverzeichnis zu finden ist. Eine JAR-Datei ist in Wirklichkeit ein umbenanntes ZIP-Archiv. Wenn JAR-Dateien in einem Archivierungstool geöffnet werden, sollte es automatisch als solches erkannt werden. Falls Ihr Programm <code>classic.jar</code> nicht als ZIP-Archiv erkennen sollte, benennen Sie die Datei einfach in <code>classic.zip</code> um und fahren mit dem Entpacken fort.</p>
+<h4 id="Standard_classic.jar_Verzeichnisse">Standard classic.jar Verzeichnisse</h4>
+<p><strong>Linux:</strong> <code>/usr/lib/MozillaFirefox/chrome/classic.jar</code> oder <code>/usr/lib/firefox-*.*.*/chrome/classic.jar</code></p>
+<p><strong>Windows:</strong> \Programme\Mozilla Firefox\chrome\classic.jar</p>
+<p><strong>Mac OS X:</strong></p>
+<ul> <li>Gehen Sie zum Anwendungsordner</li> <li>Führen Sie einen Control-Klick auf das Anwendungsicon (Firefox Icon) aus und wählen Sie Paketinhalte anzeigen.</li> <li>Gehen Sie zu contents/MacOS/Chrome/classic.jar</li>
+</ul>
+<p>Kopieren Sie <code>classic.jar</code> in ein anderes, einfach zu erreichendes Verzeichnis - <code>Classic</code> wird empfohlen - und entpacken Sie die Inhalte der Datei in diesen Ordner. Achten Sie dabei darauf, dass die Ordnerstruktur beibehalten wird.</p>
+<h3 id="Verzeichnisse">Verzeichnisse</h3>
+<p>Innerhalb <code>classic.jar</code> gibt es einen Ordner <code>skin</code>, sowie zwei Dateien, <code>preview.png</code> und <code>icon.png</code>.</p>
+<dl> <dt><code>skin</code></dt> <dd><code>skin</code> enthält ausschließlich den Ordner <code>classic</code></dd> <dt><code>skin/classic</code></dt> <dd><code>classic</code> enthält die folgenden Verzeichnisse:</dd> <dt><code>skin/classic/browser</code></dt> <dd><code>browser</code> enthält alle Symbolleisten Icons sowie die Icons des Lesezeichen-Managers und des Einstellungen-Fensters.</dd> <dt><code>skin/classic/communicator</code></dt> <dd>Macht nicht allzu viel und kann deshalb normalerweise außen vor gelassen werden.</dd> <dt><code>skin/classic/global</code></dt> <dd><code>global</code> enthält fast alle wichtigen CSS-Dateien, die die Darstellung des Browsers definieren. Dieser Ordner stellt den wichtigsten Bereich bei der Erstellung eines Themes dar.</dd> <dt><code>skin/classic/help</code></dt> <dd><code>help</code> enthält alle Dateien zur Darstellung des Hilfe-Dialogs.</dd> <dt><code>skin/classic/mozapps</code></dt> <dd><code>mozapps</code> enthält alle Styles und Icons der Dialoge innerhalb des Browsers, wie z. B. für die Add-ons und den Update-Assistenten.</dd>
+</dl>
+<h3 id="Installation_des_neuen_Themes">Installation des neuen Themes</h3>
+<p>Bevor Sie die Änderungen sehen können, die Sie an einem Firefox Theme gemacht haben, müssen Sie zunächst verstehen, wie man das classic Theme wieder packt, um es installierbar zu machen. Zur Einfachheit nennen wir das Theme einfach "My_Theme". Sie können ihm jedoch einen beliebigen Namen geben.</p>
+<h4 id="Kopieren_der_erforderlichen_Dateien">Kopieren der erforderlichen Dateien</h4>
+<p>Im ersten Schritt werden alle Dateien in die richtige Verzeichnisstruktur verschoben. Erstellen Sie hierzu einen neuen Ordner <code>My_Theme</code>. In dieses Verzeichnis verschieben Sie anschließend die Ordner <code>browser</code>, <code>global</code>, <code>communicator</code>, <code>help</code> und <code>mozapps</code> aus dem classic Theme von Firefox zusammen mit den Dateien <code>icon.png</code> und <code>preview</code>. Die Struktur von "My_Theme" und <code>classic.jar</code> unterscheidet sich dabei leicht.</p>
+<h4 id="Erstellen_der_Installationsdateien">Erstellen der Installationsdateien</h4>
+<h5 id="contents.rdf">contents.rdf</h5>
+<p>Machen Sie eine Kopie von <a href="/de/Theme_erstellen/contents.rdf" title="de/Theme_erstellen/contents.rdf">contents.rdf</a> und platzieren Sie die Datei innerhalb von <code>\My_Theme</code>. Diese Datei stellt eine XML-Datei dar, die zur Beschreibung des Skins verwendet wird.</p>
+<p>Öffnen Sie die Datei in einem Texteditor. Ersetzen Sie alle Vorkommen von "My_Theme" innerhalb des Codes durch den Namen ihres Themes.</p>
+<p>Der "packages"-Bereich listet die Komponenten des Browsers auf, die verändert werden. Falls wir zusätzliche Skins für Chatzilla hätten, müssten wir eine weitere Zeile hinzufügen ähnlich den anderen und sie so verändern, dass die auf Chatzilla verweist.</p>
+<pre class="eval">&lt;RDF:li resource="urn:mozilla:skin:<span style="color: #00D; font-weight: bold;">My_Theme</span>:communicator"/&gt;
+&lt;RDF:li resource="urn:mozilla:skin:<span style="color: #00D; font-weight: bold;">My_Theme</span>:editor"/&gt;
+&lt;RDF:li resource="urn:mozilla:skin:<span style="color: #00D; font-weight: bold;">My_Theme</span>:global"/&gt;
+&lt;RDF:li resource="urn:mozilla:skin:<span style="color: #00D; font-weight: bold;">My_Theme</span>:messenger"/&gt;
+&lt;RDF:li resource="urn:mozilla:skin:<span style="color: #00D; font-weight: bold;">My_Theme</span>:navigator"/&gt;
+</pre>
+<p>Speichern Sie die Datei und beenden Sie den Texteditor.</p>
+<h5 id="install.rdf">install.rdf</h5>
+<p>Erstellen Sie eine Kopie von <a href="/de/Theme_erstellen/install.rdf" title="de/Theme_erstellen/install.rdf">install.rdf</a> und platzieren Sie die Datei innerhalb von <code>\My_Theme</code>. Diese Datei stellt eine XML-Datei dar, die zur Beschreibung des Skins verwendet wird.</p>
+<pre>  &lt;Description about="urn:mozilla:install-manifest"&gt;
+  &lt;em:id&gt;{Themes_UUID}&lt;/em:id&gt;
+  &lt;em:version&gt;Themes_Version&lt;/em:version&gt;
+</pre>
+<p>Die erste Sektion benötigt eine <a href="/de/Theme_erstellen/UUID" title="de/Theme_erstellen/UUID">UUID</a> und eine Versionsnummer für ihr Theme.</p>
+<p>Sie müssen zudem die Minimal- und Maximalversion von Firefox angeben, zu der ihr Theme kompatibel ist:</p>
+<pre>  &lt;em:targetApplication&gt;
+    &lt;Description&gt;
+      &lt;!-- Firefox's UUID --&gt;
+      &lt;em:id&gt;{ec8030f7-c20a-464f-9b0e-13a3a9e97384}&lt;/em:id&gt;
+      &lt;em:minVersion&gt;Min_FF_Version&lt;/em:minVersion&gt;
+      &lt;em:maxVersion&gt;Max_FF_Version&lt;/em:maxVersion&gt;
+    &lt;/Description&gt;
+  &lt;/em:targetApplication&gt;
+</pre>
+<p>Die Angabe der Minimal- und Maximalversion vermeidet Konflikte mit Versionen von Firefox, für die Ihr Theme nicht erstellt wurde - oder nicht getestet wurde.</p>
+<h3 id="CSS-Dateien">CSS-Dateien</h3>
+<p>Die CSS-Dateien in den Verzeichnissen beschreiben dem Browser, wie er Buttons und andere Kontrollelemente darstellen soll, wo Bilder angezeigt werden sollen, welche Ränder und Abstände er um sie legen soll usw.</p>
+<p>Als Beispiel ändern wir den Standard Button.</p>
+<p>Wechseln sie in das <code>global</code> Verzeichnis und öffnen sie die Datei <code>button.css</code> in einem Texteditor. Scrollen Sie bis zu der Zeile mit <code>button</code>. Dieser Style definiert die Darstellung des Stardard Buttons in seinem Ausgangszustand (ohne Mouse-Over-Effekt, der Button ist nicht deaktiviert und nicht ausgewählt).</p>
+<p>Ändern Sie <code>background-color:</code> zu <code>DarkBlue</code> und <code>color:</code> zu <code>White</code> und speichern die Datei ab.</p>
+<h3 id="Wieder_zu_JAR-Datei_packen" name="Wieder_zu_JAR-Datei_packen">Wieder zu JAR-Datei packen</h3>
+<p>Alles was Sie jetzt noch tun müssen, ist die folgende Verzeichnisstruktur wieder in eine JAR-Datei zu packen:</p>
+<pre>/browser/*
+/communicator/*
+/global/*
+/help/*
+/mozapps/*
+/contents.rdf
+/install.rdf
+/icon.png
+/preview.png
+</pre>
+<p>Stellen Sie sicher, dass Sie nicht nur das Hauptverzeichnis <code>My_Theme</code> packen, sonst schlägt die Drag &amp; Drop Installation fehl.</p>
+<h3 id="Installation_aus_einer_Webseite_heraus" name="Installation_aus_einer_Webseite_heraus">Installation aus einer Webseite heraus</h3>
+<p>Um das Theme direkt aus dem Internet zu installieren, müssen Sie JavaScript bemühen:</p>
+<pre> &lt;a href='javascript:InstallTrigger.installChrome(InstallTrigger.SKIN,
+  "<span style="color: #00D; font-weight: bold;">myskin.jar</span>", "<span style="color: #00D; font-weight: bold;">Meinen Skin installieren</span>")'&gt;Meinen Skin installieren&lt;/a&gt;
+</pre>
+<h3 id="Installation_von_der_Festplatte">Installation von der Festplatte</h3>
+<p>Wenn Sie JAR-Dateien mit Themes auf Ihrer Festplatte haben und installieren wollen, benutzen Sie <a class="external" href="http://developer.mozilla.org/samples/installjar.html">dieses Formular</a>.</p>
+<p>Sie können auf einfach die JAR-Datei per Drag &amp; Drop in den Themes-Dialog innerhalb Firefox ziehen.</p>
+<p>{{ languages( { "en": "en/Creating_a_Skin_for_Firefox//Getting_Started", "es": "es/Creando_un_skin_para_Firefox/Como_empezar", "fr": "fr/Cr\u00e9er_un_th\u00e8me_pour_Firefox/Premiers_pas", "ja": "ja/Creating_a_Skin_for_Firefox/Getting_Started", "pl": "pl/Tworzenie_sk\u00f3rek_dla_Firefoksa/Zaczynamy", "pt": "pt/Criando_um_visual_para_o_Firefox/Iniciando" } ) }}</p>
diff --git a/files/de/theme_erstellen/index.html b/files/de/theme_erstellen/index.html
new file mode 100644
index 0000000000..b96e8b4351
--- /dev/null
+++ b/files/de/theme_erstellen/index.html
@@ -0,0 +1,26 @@
+---
+title: Theme erstellen
+slug: Theme_erstellen
+tags:
+  - Skin
+  - Themes
+translation_of: Archive/Themes/Creating_a_Skin_for_Firefox
+---
+<h3 id="Vorwort">Vorwort</h3>
+<p>Um einen Skin für Firefox zu erstellen, müssen Sie drei Dinge wissen: Wie man Bilder bearbeitet, wie man ZIP-Dateien extrahiert und wie man <a href="/de/CSS" title="de/CSS">CSS</a> bearbeitet. Firefox benutzt normale GIF, PNG und JPEG Bilder für die Buttons und CSS, um alles andere der Benutzeroberfläche darzustellen.</p>
+<p><strong>Was ist ein Skin?</strong></p>
+<p>Ein Skin ändert nicht die komplette Benutzeroberfläche; stattdessen definiert er, wie die Oberfläche dargestellt wird. Sie können nicht die Verhaltensweise des Programms ändern, wie beispielsweise die Aktion nach einem Rechtsklick auf ein Bild, aber Sie können das Aussehen des Kontextmenüs ändern. Wenn Sie jedoch nicht das Aussehen von Firefox, sondern dessen Funktionsweise verändern wollen, können Sie hierfür eine <a href="/de/Erweiterung_erstellen" title="de/Erweiterung_erstellen">Erweiterung erstellen</a>.</p>
+<h3 id="Inhalt">Inhalt</h3>
+<ul>
+  <li><a href="/de/Theme_erstellen/Einführung" title="de/Theme_erstellen/Einführung">Einführung</a></li>
+</ul>
+<div class="originaldocinfo">
+  <h3 id="Informationen_zum_Originaldokument">Informationen zum Originaldokument</h3>
+  <ul>
+    <li>Autor: Neil Marshall und Tucker Lee</li>
+    <li>Beteiligte Autoren (Vorschläge/Korrekturen): Brent Marshall, CDN (<a class="external" href="http://themes.mozdev.org" rel="freelink">http://themes.mozdev.org</a>), JP Martin, Boris Zbarsky, Asa Dotzler, WeSaySo, David James, Dan Mauch, Anders Conbere, Tim Regula (<a class="external" href="http://www.igraphics.nn.cx" rel="freelink">http://www.igraphics.nn.cx</a>)</li>
+    <li>Informationen zum Copyright: Copyright 2002-2003 Neil Marshall, Erlaubnis zur Verwendung im MDC Wiki im April 2005 via Email erteilt.</li>
+    <li>Originaladresse: <a class="external" href="http://www.eightlines.com/neil/mozskin">http://www.eightlines.com/neil/mozskin</a></li>
+  </ul>
+</div>
+<p>{{ languages( { "en": "en/Creating_a_Skin_for_Firefox", "es": "es/Creando_un_tema_para_Firefox", "fr": "fr/Cr%c3%a9er_un_th%c3%a8me_pour_Firefox", "pl": "pl/Tworzenie_sk%c3%b3rek_dla_Firefoksa", "ja": "ja/Creating_a_Skin_for_Firefox" } ) }}</p>
diff --git a/files/de/theme_erstellen/install.rdf/index.html b/files/de/theme_erstellen/install.rdf/index.html
new file mode 100644
index 0000000000..66871db2c2
--- /dev/null
+++ b/files/de/theme_erstellen/install.rdf/index.html
@@ -0,0 +1,46 @@
+---
+title: install.rdf
+slug: Theme_erstellen/install.rdf
+tags:
+  - Themes
+translation_of: Archive/Themes/Creating_a_Skin_for_Firefox/install.rdf
+---
+<p>Kopieren Sie den folgenden Text und fügen sie ihn in eine Textdatei ein, speichern Sie die Datei anschließend als <span style="">»</span><code>install.rdf«</code>:</p>
+<pre>&lt;?xml version="1.0"?&gt;
+
+&lt;RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:em="http://www.mozilla.org/2004/em-rdf#"&gt;
+
+  &lt;Description about="urn:mozilla:install-manifest"&gt;
+  &lt;em:id&gt;{Themes_UUID}&lt;/em:id&gt;
+    &lt;em:version&gt;Themes_Version&lt;/em:version&gt;
+
+&lt;!-- Target Application this extension can install into,
+         with minimum and maximum supported versions. --&gt;
+
+&lt;em:targetApplication&gt;
+    &lt;Description&gt;
+      &lt;!-- Firefox's UUID --&gt;
+      &lt;em:id&gt;{ec8030f7-c20a-464f-9b0e-13a3a9e97384}&lt;/em:id&gt;
+      &lt;em:minVersion&gt;Min_FF_Version&lt;/em:minVersion&gt;
+      &lt;em:maxVersion&gt;Max_FF_Version&lt;/em:maxVersion&gt;
+    &lt;/Description&gt;
+  &lt;/em:targetApplication&gt;
+
+  &lt;!-- Front End MetaData --&gt;
+  &lt;!-- My_Theme --&gt;
+  &lt;em:name&gt;My_Theme&lt;/em:name&gt;
+  &lt;em:description&gt;My_Theme&lt;/em:description&gt;
+  &lt;em:creator&gt;Your_Name&lt;/em:creator&gt;
+  &lt;em:contributor&gt;Contributors_Names&lt;/em:contributor&gt;
+  &lt;em:homepageURL&gt;Themes_HomePage&lt;/em:homepageURL&gt;
+  &lt;em:updateURL&gt; Url_of_Update_Location &lt;/em:updateURL&gt;
+  &lt;em:aboutURL&gt; Url_of_About_Page &lt;/em:aboutURL&gt;
+
+  &lt;!-- Front End Integration Hooks (used by Theme Manager)--&gt;
+    &lt;em:internalName&gt;My_Theme&lt;/em:internalName&gt;
+  &lt;/Description&gt;
+
+&lt;/RDF&gt;
+</pre>
+<p>{{ languages( { "en": "en/Creating_a_Skin_for_Firefox/install.rdf", "fr": "fr/Cr\u00e9er_un_th\u00e8me_pour_Firefox/install.rdf", "ja": "ja/Creating_a_Skin_for_Firefox/install.rdf", "pl": "pl/Tworzenie_sk\u00f3rek_dla_Firefoksa/install.rdf", "pt": "pt/Criando_um_visual_para_o_Firefox/install.rdf", "zh-tw": "zh_tw/\u88fd\u4f5c_Firefox_\u4f48\u666f\u4e3b\u984c/install.rdf" } ) }}</p>
diff --git a/files/de/theme_erstellen/uuid/index.html b/files/de/theme_erstellen/uuid/index.html
new file mode 100644
index 0000000000..7ce4b2eb92
--- /dev/null
+++ b/files/de/theme_erstellen/uuid/index.html
@@ -0,0 +1,12 @@
+---
+title: UUID
+slug: Theme_erstellen/UUID
+tags:
+  - Themes
+translation_of: Archive/Themes/Creating_a_Skin_for_Firefox/UUID
+---
+<h3 id="UUID_Universal_Unique_Identifier">UUID: Universal Unique Identifier</h3>
+<p>Eine UUID kann man unter <a class=" external" href="http://www.famkruithof.net/uuid/uuidgen">http://www.famkruithof.net/uuid/uuidgen</a> erhalten oder indem man »firebot: uuid?« auf <a class=" link-irc" href="irc://irc.mozilla.org">irc.mozilla.org</a> eingibt.</p>
+<h3 id="Siehe_auch">Siehe auch</h3>
+<p><a href="/de/GUIDs_generieren" title="de/GUIDs_generieren">GUIDs generieren</a></p>
+<p>{{ languages( { "en": "en/Creating_a_Skin_for_Firefox/UUID", "es": "es/Creando_un_skin_para_Firefox/UUID", "fr": "fr/Cr\u00e9er_un_th\u00e8me_pour_Firefox/UUID", "ja": "ja/Creating_a_Skin_for_Firefox/UUID", "pl": "pl/Tworzenie_sk\u00f3rek_dla_Firefoksa/UUID", "pt": "pt/Criando_um_visual_para_o_Firefox/UUID", "zh-tw": "zh_tw/\u88fd\u4f5c_Firefox_\u4f48\u666f\u4e3b\u984c/UUID" } ) }}</p>
diff --git a/files/de/themes/hintergrund/index.html b/files/de/themes/hintergrund/index.html
new file mode 100644
index 0000000000..a9df6faa4b
--- /dev/null
+++ b/files/de/themes/hintergrund/index.html
@@ -0,0 +1,98 @@
+---
+title: Hintergrund Themes
+slug: Themes/Hintergrund
+translation_of: Mozilla/Add-ons/Themes/Lightweight_themes
+---
+<h2 id="Gestalten_Sie_Ihr_eigenes_Hintergrundbild_Thema"><span class="short_text" id="result_box" lang="de"><span class="alt-edited hps">Gestalten Sie Ihr eigenes </span>Hintergrundbild Thema</span><span class="short_text" lang="de"><span class="alt-edited hps"> </span></span></h2>
+
+<div class="primary auto" id="getting-started">
+<p>Themen werden mit einem Grafikprogamm gestaltet und als Bilddatei hochgeladen. A<span class="short_text" id="result_box" lang="de"><span class="alt-edited atn hps">ls Hintergrundbild ergänzen sie die standardmäßig einfarbige Kopfleiste </span><span class="alt-edited">der Firefox</span>-<span class="alt-edited hps">Benutzeroberfläche.</span></span></p>
+
+<p><span class="short_text" id="result_box" lang="de"><span class="alt-edited hps">Sie haben ein passendes Bild</span><span>?</span> Sie können e<span class="hps">s <strong><u><a href="https://addons.mozilla.org/developers/theme/submit">hier hochladen</a></u></strong></span></span>!</p>
+
+<h3 id="Ein_Bild_als_Kopfleisten-Thema_gestalten">Ein Bild als Kopfleisten-Thema gestalten</h3>
+
+<p>Das Kopfleisten-Hintergrundbild wird oberhalb der <span class="short_text" id="result_box" lang="de"><span class="alt-edited hps">Benutzeroberfläche</span></span> angezeigt, eingebettet hinter Symbolleisten, Addressleiste, Suchleiste und den Tabs. Ankerpunkt ist die <strong>obere rechten Ecke </strong>der Browser-Kopfleiste.</p>
+
+<p class="screenshot"><img alt="" src="https://mdn.mozillademos.org/files/9929/header-step.jpg" style="height: 215px; width: 1059px;"></p>
+
+<ul>
+ <li><a href="https://addons.cdn.mozilla.net/static/img/docs/themes/header.jpg">Ein Beispiel für ein Kopfleisten-Thema sehen Sie hier.</a></li>
+</ul>
+
+<h4 id="Erforderliche_Bilddaten">Erforderliche Bilddaten</h4>
+
+<ul>
+ <li>Bildformat: <strong>Breite 3000 px </strong>und<strong> Höhe 200 px</strong></li>
+ <li>Dateiformat: <strong>PNG </strong>oder <strong>JPG</strong></li>
+ <li>Dateigröße: maximal <strong>300 KB</strong></li>
+</ul>
+
+<h4 id="Tipps">Tipps</h4>
+
+<ul>
+ <li>Zarte Themenbilder mit weichem Verlauf eignen sich am Besten; hoch detailierte Bilder mit starkem Kontrast konkurrieren mit der Firefox-Bedienerleiste.</li>
+ <li>Firefox zeigt einen größeren Ausschnitt der unteren Themenbildhälfte, wenn eine weitere Werkzeugleiste oder andere Bedienelemente oberhalb des Browserfensters eingefügt werden.</li>
+ <li>Das rechte obere Viertel des Themenbildes sollte die wichtigsten Details  enthalten - wenn ein Nutzer das Browserfenster verbreitert, wird zunehmend mehr von der linken Seite des Bildes sichtbar.</li>
+</ul>
+
+<h4 id="Online_Bildbearbeitung">Online Bildbearbeitung</h4>
+
+<ul>
+ <li><a href="http://www.pixlr.com">Pixlr</a> — professionelle und einfach zu bedienende Bildbearbeitung und Gestaltung im Browser.</li>
+ <li><a href="http://www.photoshop.com">Photoshop </a> — einfache online Bildbearbeitung mit dem freien Photoshop® Express Editor.</li>
+</ul>
+
+<h3 id="Ein_Fußleisten-Thema_erstellen">Ein Fußleisten-Thema erstellen</h3>
+
+<p>Ältere Firefoxversionen beziehungsweise neuere Versionen mit bestimmten Add-ons, blenden ein Fußleisten-Themenbild hinter die Add-on und Suchleiste, am unteren Rand des Browser-Fensters ein. Das Fußleisten-Thema wird an der <strong>unteren linken Ecke</strong> des Browserfensters verankert. Fußleisten-Hintergrundbilder sind optional.</p>
+
+<p class="screenshot"><img alt="" src="https://mdn.mozillademos.org/files/9935/footer-step.jpg" style="height: 56px; width: 1249px;"></p>
+
+<ul>
+ <li><a href="https://addons.cdn.mozilla.net/static/img/docs/themes/footer.jpg">Hier sehen Sie ein Beispiel eines Fußleisten-Themas.</a></li>
+</ul>
+
+<h4 id="Erforderliche_Bilddaten_2">Erforderliche Bilddaten</h4>
+
+<ul>
+ <li>Bildformat:  <strong>Breite 3000 px </strong>und<strong> Höhe 100 px</strong></li>
+ <li>Dateiformat: <strong>PNG </strong>oder <strong>JPG</strong></li>
+ <li>Dateigröße: maximal 300 KB</li>
+</ul>
+
+<h4 id="Tipps_2">Tipps</h4>
+
+<ul>
+ <li>Zarte Themenbilder mit weichem Verlauf eignen sich am Besten; hoch detailierte Bilder mit starkem Kontrast konkurrieren mit der Firefox-Bedienerleiste.</li>
+ <li>Firefox wird einen größeren Ausschnitt des oberen Themenbildes zeigen, wenn die Suchleiste oder eine Erweiterung mehr Platz am unteren Ende des Fensters benötigen.</li>
+ <li>Der linke Seite des Bildes sollte die meisten Details enthalten - wird zunehmend mehr von der rechten Seite des Bildes sichtbar.</li>
+</ul>
+
+<h3 id="Hintergrundthemen_einsenden">Hintergrundthemen einsenden</h3>
+
+<p>Um Ihre Themenbilder einzusenden, gehen Sie auf die Seite "Theme Submission":</p>
+
+<ol class="itemized">
+ <li><strong>Benennen Sie Ihr Themenbild </strong>— wählen Sie einen einen einmaligen Namen für Ihr Hintergrundthema. Die mehrfache Vergabe des selben Namens ist nicht gestattet, so dass Sie eventuell einige Versuche brauchen, um einen passenden Namen zu finden.</li>
+ <li><strong>Wählen Sie eine Kategorie und Schlagworte</strong> — wählen Sie eine Kategorie und geben Sie einige Tags (Schlagworte) ein, die Ihr Hintergrundthema am besten beschreiben. Denken Sie daran, dass ein Prüfer (Reviewer) Ihr Thema ablehnen kann, wenn Kategorie oder Schlagworte offensichtlich nicht zum Thema passen.</li>
+ <li><strong>Beschreiben Sie Ihr Hintergrundthema</strong> — geben Sie eine kurze Erläuterung Ihres Themas. Denken Sie daran, dass ein Prüfer (Reviewer) Ihr Hintergrundthema ablehnen kann, wenn die Beschreibung nicht genau Ihrem Thema entspricht.</li>
+ <li><strong>Wählen Sie eine Lizenz für Ihr Themenbild</strong> — entscheiden Sie sich, unter welchen Bedingungen Sie Ihr Werk verbreiten möchten. <a href="http://creativecommons.org/licenses/">Lesen Sie mehr über die verschiedenen Creative Commons Lizenzen.</a>
+  <ul>
+   <li><strong>Wichtig:</strong> Stellen Sie sicher, dass Sie allein die Bildrechte für Ihr Hintergrundthema besitzen!</li>
+  </ul>
+ </li>
+ <li><strong>Laden Sie Ihre Bilder hoch </strong> — stellen Sie sicher, dass Sie unter 300 KB groß sind und im JPG oder PNG Format!</li>
+ <li><strong>Wählen Sie die Farben für Text und Tabs</strong> — Sie können die Hintergrundfarbe (für Tabs) und die Vordergrundfarbe (für Text) auswählen, die am besten zu Ihrem Bild passen.</li>
+ <li><strong>Prüfen Sie Ihr Themenbild mit der Vorschau </strong> — es ist jetzt soweit! Bewegen Sie einfach den Mauszeiger über die "Submit"-Schaltfläche, und Sie sehen das Ergebnis sofort.</li>
+ <li><strong>Senden Sie Ihr Themenbild ein</strong> — wenn alles richtig aussieht, klicken Sie auf die "Submit"-Schaltfläche. Das war alles! Auf Ihrer Profilseite können Sie sämtliche Hintergrundthemen sehen, die Sie erstellt haben.
+  <ul>
+   <li><strong>Tipp:</strong> um sicherzustellen, dass Ihr Thema für die Gallerie zugelassen wird, müssen die inhaltlichen Richtlinien (rewiew guidelines) und die Nutzungbedingungen (terms of service) erfüllt sein!</li>
+  </ul>
+ </li>
+</ol>
+
+<p class="screenshot"><img alt="" src="https://mdn.mozillademos.org/files/9933/submission-step.jpg" style="height: 1800px; width: 785px;"></p>
+
+<p class="call-to-submit"><a class="button prominent" href="https://addons.mozilla.org/en-US/developers/theme/submit">Submit Your Theme Now</a></p>
+</div>
diff --git a/files/de/themes/index.html b/files/de/themes/index.html
new file mode 100644
index 0000000000..d94b7d2de4
--- /dev/null
+++ b/files/de/themes/index.html
@@ -0,0 +1,13 @@
+---
+title: Themes
+slug: Themes
+tags:
+  - Themes
+translation_of: Mozilla/Add-ons/Themes
+---
+<div class="callout-box"><strong><a href="/de/Theme_erstellen" title="de/Theme_erstellen">Theme erstellen</a></strong><br>
+Eine Einführung in die Erstellung von Themes für Firefox</div>
+<div><strong>Themes</strong> ermöglichen Veränderungen am Aussehen der verschiedenen Mozilla-Programmen. Das Aussehen und Verhalten beim Benutzen der Programme kann so auf eigene Bedürfnissen angepasst werden. Ein Theme kann einfach nur eine Farbe oder das ganze Aussehen im kleinsten Detail verändern.</div>
+<table class="topicpage-table"> <tbody> <tr> <td> <h4 id="Dokumentation"><a href="/Special:Tags?tag=Themes&amp;language=de" title="Special:Tags?tag=Themes&amp;language=de">Dokumentation</a></h4> <dl> <dt><a href="/de/Theme_erstellen" title="de/Theme_erstellen">Ein Theme erstellen</a></dt> <dd><small>Wie man ein einfaches Theme für Firefox 3.0 oder neuer erstellt.</small></dd> <dt><a href="/de/Themes/Lightweight_Themes" title="de/Themes/Lightweight_Themes">Lightweight Themes</a></dt> <dd><small>Erstellen von <em>»leicht-gewichtigen«</em> Themes (Personas) ab Firefox 3.6 oder Firefox 3 mit dem <a class=" link-https" href="https://addons.mozilla.org/en-US/firefox/addon/10900" title="https://addons.mozilla.org/en-US/firefox/addon/10900">Personas</a> Add-on.</small></dd> <dt><a href="/de/Skins_für_Firefox_erstellen" title="de/Skins_für_Firefox_erstellen">Skins für Firefox erstellen</a></dt> <dd><small>Eine Einleitung zum Erstellen von Themes für ältere Versionen von Firefox (vor 3.0)</small></dd> <dt><a href="/de/Skins_für_SeaMonkey_2.x_erstellen" title="de/Skins_für_SeaMonkey_2.x_erstellen">Skins für SeaMonkey 2.x erstellen</a></dt> <dd><small>Eine Einleitung zum Erstellen von neuen Themes für SeaMonkey 2.</small></dd> <dt><a href="/de/Themes/RTL_Schreibrichtungen" title="de/Themes/RTL_Schreibrichtungen">Sprachen mit Schreibrichtungen von rechts nach links</a></dt> <dd><small>Wie man sicherstellt, dass das Theme in Sprachen wie Hebräisch, Arabisch, Persisch und Urdu korrekt dargestellt wird.</small></dd> <dt><a href="/de/Themes/Themes_packen" title="de/Themes/Themes_packen">Themes packen</a></dt> <dd><small>Wie man Themes für Firefox und Thunderbird packt</small></dd> <dt><a href="/de/Themes/Theme_Änderungen_in_Firefox_3.5" title="de/Themes/Theme_Änderungen_in_Firefox_3.5">Theme Änderungen zwischen Firefox 3.0 und 3.5</a></dt> <dd><small>Eine Auflistung aller Theme Änderungen zwischen Version 3.0 und 3.5 von Firefox</small></dd> <dt><a href="/de/Themes/Theme_Änderungen_in_Firefox_3" title="de/Themes/Theme_Änderungen_in_Firefox_3">Theme Änderungen zwischen Firefox 2.0 und 3.0</a></dt> <dd><small>Eine Auflistung aller Theme Änderungen zwischen Version 2.0 und 3.0 von Firefox</small></dd> <dt><a href="/de/Themes/Theme_Änderungen_in_Firefox_2" title="de/Themes/Theme_Änderungen_in_Firefox_2">Theme Änderungen zwischen Firefox 1.5 und 2.0</a></dt> <dd><small>Eine Auflistung aller Theme Änderungen zwischen Version 1.5 und 2.0 von Firefox</small></dd> <dt><a class="external" href="http://forums.mozillazine.org/viewtopic.php?t=197434">Theme Änderungen zwischen Firefox 1.0 to 1.5 (Forumspost)</a></dt> <dd><small>Ein Forumspost bei <a class="external" href="http://www.mozillazine.org">MozillaZine</a>, der die grundlegenden Theme bezogenen Änderungen zwischen Firefox 1.0 und 1.5 beschreibt.</small></dd> <dt><a class="external" href="http://cheeaun.phoenity.com/weblog/2004/12/first-steps-in-theme-design.html">Erste Schritte bei der Theme Erstellung</a></dt> <dd><small>Ein relativ alter Artikel, der die Theme Erstellung unter Firefox beschreibt.</small></dd> <dt><a class="external" href="http://www.melez.com/mykzilla/2009/03/personas-in-thunderbird.html" title="http://www.melez.com/mykzilla/2009/03/personas-in-thunderbird.html">Thunderbird Personas</a></dt> <dd><small>Neu in Thunderbird 3</small></dd> </dl> <p><span><a href="/Special:Tags?tag=Themes&amp;language=de" title="Special:Tags?tag=Themes&amp;language=de">Alles anzeigen...</a></span></p> </td> <td> <h4 id="Community">Community</h4> <ul> <li>Mozillas Theme Foren:</li> </ul> <p>{{ DiscussionList("dev-themes", "mozilla.dev.themes") }}</p> <ul> <li><a class="external" href="http://forums.mozillazine.org/viewforum.php?f=18">MozillaZine Themes Forum</a></li> </ul> <h4 id="Tool">Tool</h4> <ul> <li><a href="/en/DOM_Inspector" title="en/DOM_Inspector">DOM Inspector</a></li> <li><a class="link-https" href="https://addons.mozilla.org/firefox/63/">InspectorWidget</a></li> <li><a class="external" href="http://www.extensionsmirror.nl/index.php?showtopic=21">ChromeEdit Erweiterung</a></li> <li><a class="link-https" href="https://addons.mozilla.org/firefox/7438">RTL erzwingen</a>: Test für die RTL-Kompatibilität</li> </ul> <h4 id="Verwandte_Themen">Verwandte Themen</h4> <dl> <dd><a href="/de/CSS" title="de/CSS">CSS</a></dd> </dl> </td> </tr> </tbody>
+</table>
+<p>{{ languages( { "en": "en/Themes", "es": "es/Temas", "fr": "fr/Th\u00e8mes", "ja": "ja/Themes", "pl": "pl/Motywy", "zh-cn": "cn/\u4e3b\u9898", "zh-tw": "zh_tw/\u4f48\u666f\u4e3b\u984c" } ) }}</p>
diff --git a/files/de/toolkit_api/index.html b/files/de/toolkit_api/index.html
new file mode 100644
index 0000000000..76011f32bf
--- /dev/null
+++ b/files/de/toolkit_api/index.html
@@ -0,0 +1,36 @@
+---
+title: Toolkit API
+slug: Toolkit_API
+tags:
+  - Toolkit API
+translation_of: Mozilla/Tech/Toolkit_API
+---
+<p>Das <strong>Mozilla Toolkit</strong> (deutsch »Mozilla Werkzeugsatz«) ist eine Zusammenstellung von Schnittstellen (APIs), die auf <a href="/de/Gecko" title="de/Gecko">Gecko</a> basieren und fortgeschrittene Services für XUL-Applikationen bereitstellen. Dazu zählen:</p>
+
+<ul>
+ <li>Profil Management</li>
+ <li>Chrome Registrierung</li>
+ <li>Browserverlauf</li>
+ <li>Erweiterung- und Themes-Management</li>
+ <li>Applikations-Update-Service</li>
+ <li>Abgesicherter Modus</li>
+</ul>
+
+<h3 id="Offizielle_Hinweise" name="Offizielle_Hinweise">Offizielle Hinweise</h3>
+
+<p>
+      </p><ul>
+        <li><a href="/de/Bundles" title="de/Bundles">Struktur eines installierbaren Bündels</a>: Beschreibung der gemeinsamen Struktur von installierbaren Bündeln von Erweiterungen, Themes und XULRunner Anwendungen</li>
+        <li><a href="/de/Packen_von_Erweiterungen" title="de/Packen_von_Erweiterungen">Packen von Erweiterungen</a>: Informationen über das Packen von Erweiterungen</li>
+        <li><a href="/de/Packen_von_Themes" title="de/Packen_von_Themes">Packen von Themes</a>: Informationen über das Packen von Themes</li>
+        <li><a href="/de/Packen_von_mehreren_Erweiterungen" title="de/Packen_von_mehreren_Erweiterungen">Packen von mehreren Erweiterungen</a>: Informationen über das Packen von mehreren Erweiterungen</li>
+        <li><a href="/de/Packen_einer_XUL_Anwendung" title="de/Packen_einer_XUL_Anwendung">Packen einer XUL Anwendung</a>: Informationen über das Packen von XUL Anwendungen</li>
+        <li><a href="/de/Chrome_Registrierung" title="de/Chrome_Registrierung">Chrome Registrierung</a></li>
+      </ul>
+
+
+<h3 id="Mehr_Informationen" name="Mehr_Informationen">Weitere Informationen</h3>
+
+<p>Die folgenden Entwicklerseiten enthalten Beispiele und Diskussionen rund um spezielle Themen:</p>
+
+<p><a href="/de/XUL" title="de/XUL">XUL</a>; <a href="/de/XUL_Overlays" title="de/XUL_Overlays">XUL Overlays</a>; <a href="/de/Erweiterungen" title="de/Erweiterungen">Erweiterungen entwickeln</a>; <a href="/de/XULRunner" title="de/XULRunner">XULRunner</a>; <a href="/de/Themes" title="de/Themes">Themes entwickeln</a>; <a href="/de/DOM" title="de/DOM">DOM</a>; <a href="/de/RDF" title="de/RDF">RDF</a>; <a href="/de/Speicherung" title="de/Speicherung">Speicherung</a>; <a href="/de/Help_Viewer" title="de/Help_Viewer">Hilfe-Dokumentation erstellen</a>; <a href="/de/Toolkit_API/FUEL" title="de/Toolkit API/FUEL">FUEL</a> / <a href="/de/Toolkit_API/STEEL" title="de/Toolkit API/STEEL">STEEL</a> / <a href="/de/Toolkit_API/SMILE" title="de/Toolkit API/SMILE">SMILE</a>;</p>
diff --git a/files/de/tools/3d_untersuchung/index.html b/files/de/tools/3d_untersuchung/index.html
new file mode 100644
index 0000000000..061ce4f11b
--- /dev/null
+++ b/files/de/tools/3d_untersuchung/index.html
@@ -0,0 +1,99 @@
+---
+title: 3D-Untersuchung
+slug: Tools/3D_untersuchung
+translation_of: Tools/3D_View
+---
+<div>{{ToolsSidebar}}</div>
+<div class="warning">
+<p>Seit Firefox 47 ist die 3D-Ansicht nicht mehr verfügbar.</p>
+
+<p>Es gibt ein Add-on, das diese Funktionalität erhält: <a href="https://addons.mozilla.org/firefox/addon/tilt/">Tilt 3D</a>. Beachten Sie allerdings, dass auch dieses nicht mit dem <a href="/en-US/docs/Mozilla/Firefox/Multiprocess_Firefox">Multiprocess-Firefox</a> kompatibel ist.</p>
+</div>
+
+<p>Mit einem Klick auf die 3D-Untersuchung Schaltfläche gelangst du in in den 3D-Untersuchungsmodus. In diesem Modus werden die HTML Elemente als dreidimensionale Blöcke dargestellt. Die Verschachtelung der Inhalte wird so auf eine eindrückliche Art und Weise virtualisiert, was einem das Studieren des Aufbaus der Seite erleichtert.</p>
+
+<p><img alt="" class="default internal" src="/files/3625/3dview.png"></p>
+
+<p>Durch Klicken uns Ziehen mit der Maus, kann man die Ansicht in alle Richtungen drehen und so die DOM Struktur von verschiedenen Winkeln aus betrachten. Auch Elemente ausserhalb des Bildschirmrands und solche, die versteckt sind, werden in dieser Ansicht sichtbar. Mit einem Klick auf ein Element, sieht man den entsprächenden Code im <a href="/en-US/docs/Tools/Page_Inspector#HTML_pane">HTML panel</a> bzw. dem <a href="/en/Tools/Page_Inspector/Style_panel" title="Style panel">Style panel</a>. Umgekehrt kann man auch ein Element im Code auswählen, damit es im 3D-Untersuchungsmodus hervorgehoben wird.</p>
+
+<p>Falls der 3D-Untersuchung Schaltfläche nicht angezeigt wird, ist es möglich, dass du deinen Grafik-Treiber aktualisieren musst. Siehe <a class="link-https" href="https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers" title="https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers">Liste blockierter Grafik-Treiber</a> für weitere Informationen.</p>
+
+<h2 id="Steuerung_der_3D-Ansicht">Steuerung der 3D-Ansicht</h2>
+
+<p>Die Ansicht im 3D-Untersuchungsmodus kann mit der Maus und der Tastatur gesteuert werden.</p>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <td class="header">Funktion</td>
+   <td class="header">Tastatur</td>
+   <td class="header">Maus</td>
+  </tr>
+  <tr>
+   <td>Vergrössern/Verkleinern</td>
+   <td>+ / -</td>
+   <td>Scroll wheel up/down</td>
+  </tr>
+  <tr>
+   <td>Nach links/rechts drehen</td>
+   <td>a / d</td>
+   <td>Maus nach links/rechtsziehen</td>
+  </tr>
+  <tr>
+   <td>Nach oben/unten kippen</td>
+   <td>w / s</td>
+   <td>Maus nach oben/unten ziehen</td>
+  </tr>
+  <tr>
+   <td>Ansicht nach links/rechts verschieben</td>
+   <td>← / →</td>
+   <td>-</td>
+  </tr>
+  <tr>
+   <td>Ansicht nach oben/unten verschieben</td>
+   <td>↑ / ↓</td>
+   <td>-</td>
+  </tr>
+  <tr>
+   <td>Vergrösserung/Verkleinerung zurücksetzten</td>
+   <td>0</td>
+   <td>-</td>
+  </tr>
+  <tr>
+   <td>Ausgewähles Element fokusieren {{ fx_minversion_inline("13.0") }}</td>
+   <td>f</td>
+   <td>-</td>
+  </tr>
+  <tr>
+   <td>Ansicht (Grösse und Sichtswinkel) zurücksetzten {{ fx_minversion_inline("12.0") }}</td>
+   <td>r</td>
+   <td>-</td>
+  </tr>
+  <tr>
+   <td>Ausgewähltes Element ausblenden  {{ fx_minversion_inline("12.0") }}</td>
+   <td>x</td>
+   <td>-</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Anwendungsbeispiele">Anwendungsbeispiele</h2>
+
+<p>Die 3D-Untersuchung ist in vielen Hinsichten hilfreich:</p>
+
+<ul>
+ <li>Zur Evaluierung von Fehlern bei der Verschachtelung. Oft schleichen sich Fehler bei der Verschachtelung von Inhalten ein. In der 3D-Ansicht können diese Fehler viel schneller gefunden werden.</li>
+ <li>Falls Inhalte gar nicht oder nicht vollständig angezeigt werden, kann die 3D-Ansicht helfen, die Fehlerquelle zu finden. Auch Elemente, welche sich ausserhalb des Bildschirmrands befinden, werden dadurch sichtbar.</li>
+ <li>Du kannst die Struktur deiner Seite genau analysieren und so dein Layout optimieren.</li>
+ <li>Und zu guter letzt: Es sieht einfach cool aus!</li>
+</ul>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Tools/Seiten_Inspektor">Seiteninspektor</a></li>
+ <li><a href="/de/docs/Tools" title="Tools">Firefox Tools für Webentwickler</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/" title="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/">New Developer Tools in Firefox 11 Aurora</a> (Blog Eintrag)</li>
+</ul>
+
+<p>{{ languages( { "ja": "ja/Tools/Page_Inspector/3D_view", "zh-cn": "zh-cn/Tools/Page_Inspector/3D_view"} ) }}</p>
diff --git a/files/de/tools/about_colon_debugging/index.html b/files/de/tools/about_colon_debugging/index.html
new file mode 100644
index 0000000000..a342b78ee8
--- /dev/null
+++ b/files/de/tools/about_colon_debugging/index.html
@@ -0,0 +1,252 @@
+---
+title: 'about:debugging'
+slug: 'Tools/about:debugging'
+translation_of: 'Tools/about:debugging'
+---
+<p>{{ToolsSidebar}}</p>
+
+<p>The <code>about:debugging</code> page provides a single place from which you can attach the Firefox Developer Tools to a number of debugging targets. At the moment it supports three main sorts of targets: restartless add-ons, tabs, and workers.</p>
+
+<h2 id="Opening_the_aboutdebugging_page">Opening the about:debugging page</h2>
+
+<p>There are two ways to open <code>about:debugging</code>:</p>
+
+<ul>
+ <li>Type <code>about:debugging</code> in the Firefox URL bar.</li>
+ <li>In the <strong>Tools</strong> &gt; <strong>Web Developer</strong> menu, click <strong>Remote Debugging</strong>.</li>
+</ul>
+
+<p>When about:debugging opens, on the left-hand side, you'll see a sidebar with two options and information about your remote debugging setup:</p>
+
+<dl>
+ <dt>Setup</dt>
+ <dd>Use the Setup tab to configure the connection to your remote device.</dd>
+ <dt>This Firefox</dt>
+ <dd>Provides information about temporary extensions you have loaded for debugging, extensions that are installed in Firefox, the tabs that you currently have open, and service workers running on Firefox.</dd>
+</dl>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16650/about_debugging_setup.png" style="border: 1px solid black; display: block; height: 751px; margin: 0px auto; width: 918px;"></p>
+
+<p>If your <code>about:debugging</code> page is different from the one displayed here, go to <code>about:config</code>, find and set the option <code>devtools.aboutdebugging.new-enabled</code> to <strong>true</strong>.</p>
+
+<h2 id="Setup_tab">Setup tab</h2>
+
+<h3 id="Connecting_to_a_remote_device">Connecting to a remote device</h3>
+
+<p>Firefox supports debugging over USB with Android devices, using the about:debugging page.</p>
+
+<p>Before you connect:</p>
+
+<ol>
+ <li>Enable Developer settings on your Android device.</li>
+ <li>Enable USB debugging in the Android Developer settings.</li>
+ <li>Enable <strong>Remote Debugging via USB</strong> in the Advanced Settings in Firefox on the Android device.</li>
+ <li>Connect the Android device to your computer using a USB cable.</li>
+</ol>
+
+<p>If your device doesn't appear in the lefthand side of the about:debugging page, try clicking the <strong>Refresh devices</strong> button.</p>
+
+<p><strong>If it still doesn't appear</strong>, it may be because the link between your Android device and your computer is not authorized yet. First make sure you have installed <a href="https://developer.android.com/studio/command-line/adb.html">Android Debug Bridge</a> from Android Tools on your computer in order for it to be able to connect to your device. Next, disable every debugging setting already activated and repeat the steps described before. Your device should show a popup to authorize your computer to connect to it — accept this and then click the <strong>Refresh devices</strong> button again. The device should appear.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: You do not need to install the full Android Studio SDK. Only adb is needed.</p>
+</div>
+
+<p>To start a debugging session, first open the page that you wish to debug and then click <strong>Connect</strong> next to the device name to open a connection to it. If the connection was successful, you can now click the name of the device to switch to a tab with information about the device.</p>
+
+<p><img alt="Screenshot of the debugging page for an Android device" src="https://mdn.mozillademos.org/files/16915/device_information.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p>
+
+<p>The information on this page is the same as the information on the <strong>This Firefox</strong> tab, but instead of displaying information for your computer, it displays the information for the remote device with the addition of a <strong>Tabs</strong> section with an entry for each of the tabs open on the remote device.</p>
+
+<p>Note: If the version of Firefox on your remote device is more than one major version older than the version running on your computer, you may see a message like the following:</p>
+
+<p><img alt="The connected browser has an old version (68.2.0). The minimum supported version (69.0a1). This is an unsupported setup and may cause DevTools to fail. Please update the connected browser." src="https://mdn.mozillademos.org/files/16917/version_warning.png" style="display: block; margin: 0 auto;"></p>
+
+<p>In Firefox 76 and above, the message can look like the following:</p>
+
+<p><img alt="This version of Firefox cannot debug Firefox for Android (68). We recommend installing Firefox for Android Nightly on your phone for testing. More details" src="https://mdn.mozillademos.org/files/17171/fxand-68-error.png" style="height: 64px; width: 675px;"></p>
+
+<p>See <a href="#">Connection for Firefox for Android 68</a> for more information.</p>
+
+<p>In the image above, there are three tabs open: <strong>Network or cache Recipe</strong>, <strong>Nightly Home</strong>, and <strong>About Nightly</strong>. To debug the contents of one of these tabs, click the <strong>Inspect</strong> button next to its title. When you do, the Developer Tools open in a new tab.</p>
+
+<p><img alt="Screenshot showing the remote debugging window, with the editable URL bar" src="https://mdn.mozillademos.org/files/17317/remote-debugger-w-URL-buttons.png" style="border: 1px solid black; display: block; height: 471px; margin: 0px auto; width: 1014px;"></p>
+
+<p>Above the usual list of tools, you can see information about the device you are connected to, including the fact that you are connected (in this example) via USB, to Firefox Preview, on a Pixel 2, as well as the title of the page that you are debugging, and the address of the page.</p>
+
+<p>Starting in Firefox 78, the URL bar is editable, so that you can change the URL used by the browser on the remote device, by typing in Firefox for Desktop. You can also reload the page by clicking the <strong>Reload</strong> button next to the URL bar, and (starting 79), navigate backward or forward in the browsing history with the <strong>Back</strong> and <strong>Forward</strong> buttons.</p>
+
+<h3 id="Connecting_over_the_Network">Connecting over the Network</h3>
+
+<p>You can connect to a Firefox Debug server on your network, or on your debugging machine using the <strong>Network Location</strong> settings of the about:debugging page.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16942/network_location.png" style="display: block; margin: 0px auto;"></p>
+
+<p>Enter the location and port on which the debugger server is running. When you do, it is added to the Network locations list along with the devices, as shown below:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16943/connect_network_location.png" style="display: block; margin: 0 auto;"></p>
+
+<h2 id="This_Firefox">This Firefox</h2>
+
+<p>The <strong>This Firefox</strong> tab combines the features of Extensions, Tabs, and Workers into a single tab with the following sections:</p>
+
+<dl>
+ <dt>Temporary Extensions</dt>
+ <dd>Displays a list of the extensions that you have loaded using the <strong>Load Temporary Add-on</strong> button.</dd>
+ <dt>Extensions</dt>
+ <dd>This section lists information about the extensions that you have installed on your system.</dd>
+ <dt>Service Workers, Shared Workers, and Other Workers</dt>
+ <dd>There are three sections on this page that deal with Service Workers, Shared Workers, and Other Workers.</dd>
+</dl>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16654/about_debugging_this_firefox.png" style="border: 1px solid black; display: block; height: 867px; margin: 0px auto; width: 1138px;"></p>
+
+<p>Whether internal extensions appear in the list on this page depends on the setting of the <code>devtools.aboutdebugging.showHiddenAddons</code> preference. If you need to see these extensions, navigate to <code>about:config</code> and make sure that the preference is set to <code>true</code>.</p>
+
+<h2 id="Extensions">Extensions</h2>
+
+<h3 id="Loading_a_temporary_extension">Loading a temporary extension</h3>
+
+<p>With the <strong>Load Temporary Add-on</strong> button you can temporarily load a web extension from a directory on disk. Click the button, navigate to the directory containing the add-on and select its manifest file. The temporary extension is then displayed under the <strong>Temporary Extensions</strong> header.</p>
+
+<p>You don't have to package or sign the extension before loading it, and it stays installed until you restart Firefox.</p>
+
+<p>The major advantages of this method, compared with installing an add-on from an XPI, are:</p>
+
+<ul>
+ <li>You don't have to rebuild an XPI and reinstall when you change the add-on's code;</li>
+ <li>You can load an add-on without signing it and without needing to disable signing.</li>
+</ul>
+
+<p>Once you have loaded a temporary extension, you can see information about it and perform operations on it.</p>
+
+<p><img alt="Screenshot of the debugging information panel for a temporary extension" src="https://mdn.mozillademos.org/files/16652/temporary_extension.png" style="display: block; height: 322px; margin: 0 auto; width: 680px;"></p>
+
+<p>You can use the following buttons:</p>
+
+<dl>
+ <dt>Inspect</dt>
+ <dd>Loads the extension in the debugger.</dd>
+ <dt>Reload</dt>
+ <dd>Reloads the temporary extension. This is handy when you have made changes to the extension.</dd>
+ <dt>Remove</dt>
+ <dd>Unloads the temporary extension.</dd>
+</dl>
+
+<p>Other information about the extension is displayed:</p>
+
+<dl>
+ <dt>Location</dt>
+ <dd>The location of the extension's source code on your local system.</dd>
+ <dt>Extension ID</dt>
+ <dd>The temporary ID assigned to the extension.</dd>
+ <dt>Internal UUID</dt>
+ <dd>The internal UUID assigned to the extension.</dd>
+ <dt>Manifest URL</dt>
+ <dd>If you click the link, the manifest for this extension is loaded in a new tab.</dd>
+</dl>
+
+<h3 id="Updating_a_temporary_extension">Updating a temporary extension</h3>
+
+<p>If you install an extension in this way, what happens when you update the extension?</p>
+
+<ul>
+ <li>If you change files that are loaded on demand, like <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> or <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Browser_actions_2">popups</a>, then changes you make are picked up automatically, and you'll see them the next time the content script is loaded or the popup is shown.</li>
+ <li>For other changes, click the <strong>Reload</strong> button. This does what it says:
+  <ul>
+   <li>Reloads any persistent scripts, such as <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">background scripts</a></li>
+   <li>Parses the <code>manifest.json</code> file again, so changes to <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code>, <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code>, <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> or any other keys take effect</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Installed_Extensions">Installed Extensions</h3>
+
+<p>The permanently installed extensions are listed in the next section, <strong>Extensions</strong>. For each one, you see something like the following:</p>
+
+<p><img alt="Screenshot of the debugging information panel for an installed extension" src="https://mdn.mozillademos.org/files/16651/installed_extension.png" style="display: block; margin: 0 auto;"></p>
+
+<p>The <strong>Inspect</strong> button, and the <strong>Extension ID</strong> and <strong>Internal UUID</strong> fields are the same as for temporary extensions.</p>
+
+<p>Just as it does with temporarily loaded extensions, the link next to <strong>Manifest URL</strong> opens the loaded manifest in a new tab.</p>
+
+<div class="note">
+<p><strong>Note: </strong>It's recommended that you use the Browser Toolbox, not the Add-on Debugger, for debugging WebExtensions. See <a href="/en-US/Add-ons/WebExtensions/Debugging">Debugging WebExtensions</a> for all the details.</p>
+</div>
+
+<p>The Add-ons section in about:debugging lists all web extensions that are currently installed. Next to each entry is a button labeled <strong>Inspect</strong>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note: </strong>This list may include add-ons that came preinstalled with Firefox.</p>
+</div>
+
+<p>If you click <strong>Inspect</strong>, the <a href="/en-US/docs/Mozilla/Add-ons/Add-on_Debugger">Add-on Debugger</a> will start in a new tab.</p>
+
+<p>{{EmbedYouTube("efCpDNuNg_c")}}</p>
+
+<p>See the page on the <a href="/en-US/docs/Mozilla/Add-ons/Add-on_Debugger">Add-on Debugger</a> for all the things you can do with this tool.</p>
+
+<h2 id="Workers">Workers</h2>
+
+<p>The Workers section shows all the workers you've got registered on your Firefox, categorised as follows:</p>
+
+<ul>
+ <li>All registered <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a></li>
+ <li>All registered <a href="/en-US/docs/Web/API/SharedWorker">Shared Workers</a></li>
+ <li>Other workers, including <a href="/en-US/docs/Web/API/ChromeWorker">Chrome Workers</a> and <a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers#Dedicated_workers">Dedicated Workers</a></li>
+</ul>
+
+<p>You can connect the developer tools to each worker, and send push notifications to service workers.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16657/about_debugging_workers.png" style="border: 1px solid black; display: block; height: 642px; margin-left: auto; margin-right: auto; width: 567px;"></p>
+
+<h3 id="Service_worker_state">Service worker state</h3>
+
+<p>The list of service workers shows the state of the service worker in its <a href="https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle">lifecycle</a>. Three states are possible:</p>
+
+<ul>
+ <li><em>Registering</em>: this covers all states between the service worker's initial registration, and its assuming control of pages. That is, it subsumes the <em>installing</em>, <em>activating</em>, and <em>waiting</em> states.</li>
+ <li><em>Running</em>: the service worker is currently running. It's installed and activated, and is currently handling events.</li>
+ <li><em>Stopped</em>: the service worker is installed and activated, but has been terminated after being idle.</li>
+</ul>
+
+<p><img alt="Screenshot of the debugging panel for a service worker that is in the Running state" src="https://mdn.mozillademos.org/files/16659/sample_service_worker.png" style="display: block; height: 237px; margin-left: auto; margin-right: auto; width: 556px;"></p>
+
+<p>This section uses a simple ServiceWorker demo, hosted at <a href="https://serviceworke.rs/push-simple/">https://serviceworke.rs/push-simple/</a>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: From Firefox 79 onwards, you can access similar information on the Service Workers registered on a particular domain by going to the Firefox DevTools <a href="/en-US/docs/Tools/Application">Application panel</a>.</p>
+</div>
+
+<h3 id="Unregistering_service_workers">Unregistering service workers</h3>
+
+<p>Click the <strong>Unregister</strong> button to unregister the service worker.</p>
+
+<h3 id="Sending_push_events_to_service_workers">Sending push events to service workers</h3>
+
+<p>To debug push notifications, you can set a breakpoint in the <a href="/en-US/docs/Web/API/PushEvent">push event</a> listener. However, you can also debug push notifications locally, without needing the server. Click the <strong>Push</strong> button to send a push event to the service worker.</p>
+
+<h3 id="Service_workers_not_compatible">Service workers not compatible</h3>
+
+<div>
+<p>A warning message is displayed at the top of the <strong>This Firefox</strong> tab if service workers are incompatible with the current browser configuration, and therefore cannot be used or debugged.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16655/worker_warning.png" style="display: block; height: 44px; margin: 0px auto; width: 551px;"></p>
+</div>
+
+<p>Service workers can be unavailable if the <code>dom.serviceWorkers.enable</code> preference is set to false in <code>about:config</code>.</p>
+
+<h2 id="Connection_to_Firefox_for_Android_68">Connection to Firefox for Android 68</h2>
+
+<p>Releases of Firefox for Android that are based on version 68 cannot be debugged from desktop Firefox versions 69 or later, because of the difference in release versions. Until such time as Firefox for Android is updated to a newer major release, in synch with desktop Firefox, you should use one of the following Firefox for Android versions:</p>
+
+<ul>
+ <li><a href="https://play.google.com/store/apps/details?id=org.mozilla.fenix">Firefox Preview</a>, if your desktop Firefox is the main release or Developer Edition</li>
+ <li><a href="https://play.google.com/store/apps/details?id=org.mozilla.fenix">Firefox for Android Nightly</a></li>
+</ul>
+
+<p>If you prefer to test with the main release of Firefox for Android (i.e., based on release 68), you can do so with the desktop <a href="https://support.mozilla.org/en-US/kb/switch-to-firefox-extended-support-release-esr">Firefox Extended Support Release (ESR)</a>, which is also based on version 68.</p>
+
+<p>Note that <code>about:debugging</code> is not enabled by default in Firefox ESR.  To enable it, open the <a href="https://support.mozilla.org/en-US/kb/about-config-editor-firefox">Configuration Editor</a> (<code>about:config</code>) and set <code>devtools.aboutdebugging.new-enabled</code> to <strong>true</strong>.</p>
+
+<p>If you used a higher version of Firefox prior to installing Firefox ESR, you will be prompted to create a new user profile, in order to protect your user data. For more information, see <a href="https://support.mozilla.org/en-US/kb/dedicated-profiles-firefox-installation#w_what-happens-to-my-profile-if-i-downgrade-to-a-previous-version-of-firefox">What happens to my profile if I downgrade to a previous version of Firefox?</a></p>
diff --git a/files/de/tools/add-ons/index.html b/files/de/tools/add-ons/index.html
new file mode 100644
index 0000000000..24ffbe79e9
--- /dev/null
+++ b/files/de/tools/add-ons/index.html
@@ -0,0 +1,17 @@
+---
+title: Add-ons
+slug: Tools/Add-ons
+tags:
+  - NeedsTranslation
+  - TopicStub
+  - Web Development
+  - 'Web Development:Tools'
+translation_of: Tools/Add-ons
+---
+<div>{{ToolsSidebar}}</div><p>Developer tools that are not built into Firefox, but ship as separate add-ons.</p>
+
+<dl>
+ <dt><a href="https://addons.mozilla.org/en-US/firefox/addon/websocket-monitor/">WebSocket Monitor</a></dt>
+ <dd>Examine the data exchanged in a WebSocket connection.</dd>
+ <dd> </dd>
+</dl>
diff --git a/files/de/tools/barrierefreiheits_inspektor/index.html b/files/de/tools/barrierefreiheits_inspektor/index.html
new file mode 100644
index 0000000000..24195cabad
--- /dev/null
+++ b/files/de/tools/barrierefreiheits_inspektor/index.html
@@ -0,0 +1,136 @@
+---
+title: Barrierefreiheitsinspektor
+slug: Tools/Barrierefreiheits_inspektor
+translation_of: Tools/Accessibility_inspector
+---
+<p>{{ToolsSidebar}}</p>
+
+<p class="summary">Der Barrierefreiheitsinspektor bietet Zugriff auf wichtige Informationen, die auf der aktuellen Seite über die barrierefreie Strukturansicht den Hilfstechnologien zur Verfügung gestellt werden. So können Sie überprüfen, was fehlt oder ob Sie anderweitig darauf achten müssen. Dieser Artikel führt Sie durch die Hauptfunktionen des Barrierefreiheitsinspektor und dessen Verwendung.</p>
+
+<h2 id="Ein_sehr_kurzer_Leitfaden_zur_Barrierefreiheit">Ein (sehr) kurzer Leitfaden zur Barrierefreiheit</h2>
+
+<p>Barrierefreiheit ist die Praxis, Ihre Websites für möglichst viele Menschen nutzbar zu machen. Dies bedeutet, dass Sie alles versuchen sollten, um Personen nicht daran zu hindern, auf Informationen zuzugreifen, weil sie eine Behinderung haben oder andere persönliche Umstände sie einschränken wie das von ihnen verwendete Gerät, die Geschwindigkeit ihrer Netzwerkverbindung oder ihre geografische Position oder ihr Gebietsschema.</p>
+
+<p>Hier geht es vor allem darum, Informationen für Menschen mit Sehbehinderungen zu anzuzeigen - dies geschieht über die in Webbrowsern verfügbaren <a href="https://www.smashingmagazine.com/2015/03/web-accessibility-with-accessibility-api/">Zugänglichkeits-APIs</a>, die Informationen darüber liefern, welche Rollen die verschiedenen Elemente auf Ihrer Seite spielen (z.B. bestehen sie nur aus Text oder sind es Buttons, Links, Formularelemente, etc.?).</p>
+
+<p>Semantischen DOM-Elementen sind standardmäßig Rollen zugewiesen, die auf ihren Zweck hindeuten. Manchmal müssen Sie jedoch ein nicht-semantisches Markup (z. B. {{htmlelement ("div")}} s) verwenden, um ein komplexes benutzerdefiniertes Steuerelement zu erstellen, und das Steuerelement hat keine Standardrolle, die seinen Zweck widerspiegelt. In solch einer Situation können Sie <a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a>-Rollenattribute verwenden, um Ihre eigenen Rollen bereitzustellen.</p>
+
+<p>Rollen und andere Informationen, die von Browser-APIs zur Verfügung gestellt werden, werden in einer hierarchischen Struktur namens Zugänglichkeitsbaum dargestellt. Ähnlich wie der DOM-Baum, außer dass er eine begrenzte Anzahl von Elementen und etwas andere Informationen über sie enthält.</p>
+
+<p>Hilfstechnologien wie Screenreader nutzen diese Informationen, um herauszufinden, was auf einer Webseite vorhanden ist, lesen ihren Benutzern vor, was dort ist, und ermöglichen ihnen, mit der Seite zu interagieren. Der Zugänglichkeitsinspektor verwendet diese Informationen auch, um wertvolle Debugging-Funktionen für die Barrierefreiheit in den DevTools bereitzustellen.</p>
+
+<h2 id="Auf_den_Barrierefreiheitsinspektor_zugreifen">Auf den Barrierefreiheitsinspektor zugreifen</h2>
+
+<p>Der Barrierefreiheitsinspektor (verfügbar seit Firefox 61) wird in den DevTools standardmäßig nicht angezeigt. Um ihn einzuschalten, müssen Sie zu den DevTools-Einstellungen gehen (drücken Sie <kbd>F1</kbd> , oder gehen Sie zum "Drei Punkte" -Menü und wählen Sie <em>Einstellungen</em>) und aktivieren Sie das Kontrollkästchen <em>Barrierefreiheit </em>unter der Überschrift <em>Standard-Entwicklungswerkzeuge</em>. Die Registerkarte <em>Barrierefreiheit</em> im DevTools-Fenster wird angezeigt, auf die man klicken kann, um den Barrierefreiheitsinspektor anzuzeigen:</p>
+
+<p><img alt='Barrierefreiheitsregister in Firefox DevTools, deaktiviert, mit einem Button, der die Beschriftung trägt "Barrierefreiheitsfunktionen aktivieren"ures' src="https://mdn.mozillademos.org/files/16021/accessibility-inspector-panel-off.png" style="border-style: solid; border-width: 1px; height: 654px; width: 1692px;"></p>
+
+<p>Anfangs sind die DevTools-Barrierefreiheitsfunktionen deaktiviert. (Es sei denn, Sie haben sie bereits in einer anderen Browser-Registerkarte aktiviert oder die Firefox-Barrierefreiheit-Engine wurde bereits gestartet, z. B. könnten Sie ein Screenreader-Benutzer oder -Tester sein). Dies liegt daran, dass die Eingabehilfen-Engine im Hintergrund ausgeführt wird, wenn die Barrierefreiheitsfunktionen aktiviert sind. Während sie ausgeführt wird, verlangsamt sie Leistung und Arbeitsspeicher; Daher stört es die Messwerte anderer Panels wie <a href="https://developer.mozilla.org/en-US/docs/Tools/Memory">Speicher </a>und <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance">Leistung </a>sowie die allgemeine Browserleistung. Aus diesem Grund sollten Sie die Barrierefreiheitsfunktionen ausschalten, wenn Sie sie nicht verwenden.</p>
+
+<p>Sie können die Funktionen mithilfe der Schaltfläche <em>Barrierefreiheitsfunktionen aktivieren</em> einschalten.</p>
+
+<p>Sobald der Inhalt des Bedienfelds geladen ist, können Sie ihn mithilfe der Schaltfläche <em>Barrierefreiheitsfunktionen deaktivieren</em> in der oberen linken Ecke wieder deaktivieren, es sei denn, die Barrierefreiheitsengine wurde zuvor zum Ausführen eines Bildschirmlesers ausgeführt. In diesem Fall wird diese Schaltfläche deaktiviert.</p>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Wenn Sie die Eingabehilfen auf mehreren Registerkarten verwenden, werden sie auf allen Registerkarten deaktiviert.</p>
+</div>
+
+<h2 id="Features_of_the_Accessibility_panel">Features of the Accessibility panel</h2>
+
+<p>The enabled accessibility panel looks like so:</p>
+
+<p><img alt="Accessibility tab in firefox devtools, turned on, showing two information panels plus a button labeled Turn Off Accessibility Features" src="https://mdn.mozillademos.org/files/16022/accessibility-inspector-panel-on.png" style="border-style: solid; border-width: 1px; height: 654px; width: 1692px;"></p>
+
+<p>On the left-hand side, there is a tree diagram representing all the items in the accessibility tree for the current page. Items with nested children have arrows that can be clicked to reveal the children, so you can move deeper into the hierarchy. Each item has two properties listed:</p>
+
+<ul>
+ <li><em>Role</em> — the role this item has on the page (e.g., <code>pushbutton</code>, or <code>footer</code>). This can be either a default role provided by the browser, or a role given to it via a WAI-ARIA <code>role</code> attribute.</li>
+ <li><em>Name</em> — the name this item has on the page. Where this comes from depends on the element; for example, the name of most text elements is simply their <code>textContent</code>, whereas form elements' names are the contents of their associated {{htmlelement("label")}}.</li>
+</ul>
+
+<p>On the right-hand side, you can see further information about the currently selected item. The listed properties are as follows:</p>
+
+<ul>
+ <li><em>name</em> — the item's name, as described above.</li>
+ <li><em>role</em> — the item's role, as described above.</li>
+ <li><em>actions</em> — a list of the actions that can be performed on the item, for example a pushbutton would have "Press" listed, while a link would have "Jump" listed.</li>
+ <li><em>value</em> — the value of the item. This can mean different things depending on the type of item; for example, a form input (role: entry) would have a value of whatever is entered in the input, whereas a link's value would be the URL in the corresponding <code>&lt;a&gt;</code> element's <code>href</code>.</li>
+ <li><em>DOMNode</em> — the type of DOM node that the item in the accessibility tree represents. You can click on the "target" icon that comes after it to select the node in the <a href="/en-US/docs/Tools/Page_Inspector">Page Inspector</a>. Hovering over the "target" icon highlights the DOM node in the page content.<br>
+  <img alt="DOMNode property in accessibility inspector with target icon highlighted" src="https://mdn.mozillademos.org/files/16025/dom-node-target-icon.png" style="height: 55px; width: 294px;"></li>
+ <li><em>description</em> — any further description provided on the element, usually by the content of a title attribute.</li>
+ <li><em>help</em> — this is not implemented in Gecko, so it always returns an empty string. This will be removed from the inspector in Firefox 62 ({{bug(1467643)}}).</li>
+ <li><em>keyboardShortcut</em> — any keyboard shortcut that is available to activate the element, as specified in an <code>accessKey</code> attribute. Note that this works correctly as of Firefox 62 ({{bug("1467381")}}).</li>
+ <li><em>childCount</em> — the number of child items the current item has in the accessibility tree hierarchy.</li>
+ <li><em>indexInParent</em> — an index value indicating what number child the item is, inside its parent. If the item is the first item inside its parent, it has a value of 0. If it is the second, it has a value of 1. And so on.</li>
+ <li><em>states</em> — a list of the different accessibility-relevant states that can apply to the current item. For example, one of the links in one demo has states of focusable, linked, selectable text, opaque, enabled, and sensitive. For a full list of internal states, see <a href="/en-US/docs/Web/Accessibility/AT-APIs/Gecko/States">Gecko states</a>.</li>
+ <li><em>attributes</em> — a list of all the accessibility-relevant attributes that are applied to the item. This can include style-related attributes such as margin-left and text-indent, and other useful states for accessibility information, such as draggable and level (e.g., what heading level is it, in the case of headings). For a full list of possible attributes, see <a href="/en-US/docs/Web/Accessibility/AT-APIs/Gecko/Attrs">Gecko object attributes</a>.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: The exposed information is the same across all platforms — the inspector exposes Gecko's accessibility tree, rather than information from the platform accessibility layer.</p>
+</div>
+
+<h3 id="Keyboard_controls">Keyboard controls</h3>
+
+<p>The <em>Accessibility</em> tab is fully keyboard-accessible:</p>
+
+<ul>
+ <li>You can tab between the <em>Turn Off Accessibility Features</em> button and left and right panels.</li>
+ <li>When one of the panels is focused, you can move the focus up and down items using the up and down arrow keys, and use the left and right arrow keys to expand and collapse expandable rows (e.g., different hierarchy levels of the accessibility tree).</li>
+</ul>
+
+<h2 id="Notable_related_features">Notable related features</h2>
+
+<p>When the accessibility features are turned on, there are a number of useful additional features available in the DevTools, which are detailed below:</p>
+
+<h3 id="Context_menu_options">Context menu options</h3>
+
+<p>An extra context menu option is added, both for the general context menu on the web page when right/<kbd>Ctrl</kbd> + clicking a UI feature, and the HTML pane of the page inspector when right/<kbd>Ctrl</kbd> + clicking a DOM element:</p>
+
+<p><img alt="context menu in the browser viewport, with a highlighted option: Inspect Accessibility Properties" src="https://mdn.mozillademos.org/files/16028/web-page-context-menu.png" style="border-style: solid; border-width: 1px; height: 798px; width: 1200px;"></p>
+
+<p><img alt="context menu in the DOM inspector, with a highlighted option: Show Accessibility Properties" src="https://mdn.mozillademos.org/files/16020/dom-inspector-context-menu.png" style="border-style: solid; border-width: 1px; height: 803px; width: 1200px;"></p>
+
+<p>When you choose the <em>Inspect Accessibility Properties</em>/<em>Show Accessibility Properties</em> context menu options, the <em>Accessibility</em> tab is immediately opened to show the corresponding accessibility tree item and its properties.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Some DOM elements do not have accessibility properties — in such a case, the <em>Inspect Accessibility Properties</em>/<em>Show Accessibility Properties</em> context menu item is grayed out.</p>
+</div>
+
+<h3 id="Highlighting_of_UI_items">Highlighting of UI items</h3>
+
+<p>In the Accessibility tab, when the mouse hovers over accessibility items, you can see a semi-transparent highlight appear over the UI items they relate to, if appropriate. This is useful for determining how the items in the accessibility tree relate to the UI items on the actual page.</p>
+
+<h3 id="Accessibility_picker">Accessibility picker</h3>
+
+<p>In a similar way to the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element#With_the_node_picker">Page Inspector HTML pane picker</a>, when the <em>Accessibility</em> tab's picker button is pressed you can then hover and select UI items in the current page, and the corresponding accessible object is highlighted in the accessibility tree.</p>
+
+<p>The accessibility tab picker differs in look slightly from the Page Inspector HTML pane picker, as shown below:</p>
+
+<p><img alt="highlighted dom inspector picker button, with a tooltip saying Pick an element from the page" src="https://mdn.mozillademos.org/files/16024/dom-inspector-picker.png" style="border-style: solid; border-width: 1px; height: 677px; width: 1716px;"></p>
+
+<p><img alt="highlighted accessibility inspector button, with a tooltip saying Pick accessible object from the page" src="https://mdn.mozillademos.org/files/16023/accessibility-inspector-picker.png" style="border-style: solid; border-width: 1px; height: 677px; width: 1717px;"></p>
+
+<p>When you "perform a pick", you see the accessibility object highlighted in the accessibility tree, and the picker is then deactivated. Note, however, that if you hold the <kbd>Shift</kbd> key down when "performing a pick", you can "preview" the accessibility object in the tree (and its properties in the right-hand pane), but then continue picking as many times as you like (the picker does not get cancelled) until you release the <kbd>Shift</kbd> key.</p>
+
+<p>When the picker is activated, you can also deactivate it by pressing the picker button a second time, or pressing the <kbd>Esc</kbd> key.</p>
+
+<h2 id="Typical_use_cases">Typical use cases</h2>
+
+<p>The accessibility inspector is very useful for spotting accessibility problems at a glance. For a start, you can investigate items that don't have a proper text equivalent — images without <code>alt</code> text and form elements without proper labels have a <code>name</code> property of <code>null</code>, for example.</p>
+
+<p><img alt="A form input highlighted in the UI, with information about it shown in the accessibility inspector to reveal that it has no label — it has a name property of null" src="https://mdn.mozillademos.org/files/16027/use-case-no-label.png" style="border-style: solid; border-width: 1px; height: 1180px; width: 1182px;"></p>
+
+<p>It is also very handy for verifying semantics — you can use the <em>Inspect Accessibility Properties</em> context menu option to quickly see whether an item has the correct role set on it (e.g., whether a button is really a button, or whether a link is really a link).</p>
+
+<p><img alt="A UI element that looks like a button, with information about it shown in the accessibility inspector to reveal that it isn't a button, it is a section element. It has a name property of null" src="https://mdn.mozillademos.org/files/16026/use-case-fake-button.png" style="border-style: solid; border-width: 1px; height: 1180px; width: 1182px;"></p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Accessibility">Accessibility fundamentals</a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Practical debugging information</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG">Understanding WCAG</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li>
+ <li><a href="https://www.smashingmagazine.com/2015/03/web-accessibility-with-accessibility-api/">Accessibility APIs: A Key To Web Accessibility</a> by Léonie Watson</li>
+</ul>
diff --git a/files/de/tools/bildschirmgroessen-testen/index.html b/files/de/tools/bildschirmgroessen-testen/index.html
new file mode 100644
index 0000000000..08921cb77d
--- /dev/null
+++ b/files/de/tools/bildschirmgroessen-testen/index.html
@@ -0,0 +1,81 @@
+---
+title: Bildschirmgrößen testen
+slug: Tools/bildschirmgroessen-testen
+translation_of: Tools/Responsive_Design_Mode
+---
+<div>{{ToolsSidebar}}</div><p><a href="/en-US/docs/Web_Development/Responsive_Web_design">Responsive Designs</a> passen sich an verschiedene Bildschirmgrößen an um auf verschiedenen Arten von Geräten, wie zum Beispiel Mobilgeräte oder Tablets, angemessen dargestellt zu werden. Die Ansicht "Bildschirmgrößen testen" macht es einfach zu sehen, wie Ihre Webseite oder Web-App auf verschiedenen Bildschirmgrößen aussehen wird.</p>
+
+<p>Im folgenden Bildschirmfoto wird eine Seite der mobilen Version von Wikipedia auf einer 320 mal 480 Pixel großen Fläche dargestellt.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6137/responsive-design-view.png">Die Ansicht "Bildschirmgrößen testen" ist leicht zu bedienen, da sie schnell und präzise die Größe der Darstellungsfläche ändern können.</p>
+
+<p>Natürlich könnten Sie einfach die größe Ihres Browser-Fensters ändern: aber wenn Sie dies tun, werden dann auch alle anderen Registerkarten im Registerkartenreiter verkleinert, was die Bedienung der Benutzeroberfläche des Browsers viel schwerer macht.</p>
+
+<p>Während die Ansicht "Bildschirmgrößen testen" aktiviert ist, können sie weiterhin wie gewohnt im skalierten Inhaltsbereich navigieren.</p>
+
+<h2 id="Aktivieren_und_deaktivieren">Aktivieren und deaktivieren</h2>
+
+<p>Es gibt zwei Möglichkeiten um Bildschirmgrößen zu testen:</p>
+
+<ul>
+ <li>Wählen Sie "Bildschirmgrößen testen" vom Web-Entwickler-Untermenü im Firefox-Menü (oder Extras-Menü, wenn die Menüleiste aktiviert ist oder Sie Mac OS X benutzen) aus</li>
+ <li>Klicken Sie auf die Schaltfläche "Bildschirmgrößen testen" in der <a href="/en-US/docs/Tools_Toolbox#Toolbar" title="/en-US/docs/Tools_Toolbox#Toolbar">Symbolleiste der Werkzeugleiste</a>.</li>
+</ul>
+
+<p>Es gibt drei Möglichkeiten, um die Ansicht wieder zu deaktivieren:</p>
+
+<ul>
+ <li>Wählen Sie den Menüpunkt "Bildschirmgrößen testen" erneut aus</li>
+ <li>Drücken Sie die Escape-Taste auf der Tastatur</li>
+ <li>Klicken Sie auf die x-Schaltfläche in der oberen, linken Ecke des Fensters.</li>
+</ul>
+
+<h2 id="Skalieren">Skalieren</h2>
+
+<p>Sie können die Inhaltsfläche auf eine von zwei Arten ändern:</p>
+
+<ul>
+ <li>indem Sie die <a href="#select-size">Größe mit der Auswahliste festlegen</a></li>
+ <li>indem Sie die Bedienelemente auf der rechten und unteren Seite der Inhaltsfläche, oder in der unteren, rechten Ecke, anklicken und verschieben</li>
+</ul>
+
+<p>Wenn Sie mit der zweiten Methode die Ansicht skalieren, können Sie die Funktionstaste (Steuertaste auf Mac OS X) gedrückt halten um die Größe beim Skalieren zu verfeinern. Dies macht das Auswählen der Größe viel präziser.</p>
+
+<div style="overflow: hidden;">
+<h2 id="Bedienelemente_der_Ansicht">Bedienelemente der Ansicht</h2>
+<img alt="" src="https://mdn.mozillademos.org/files/7525/bildschirmgroessen-testen-steuerungselemente.png" style="float: right; height: 356px; width: 545px;">
+<p>Auf der Oberseite des Fensters, in dem die Bildschirmgrößen getestet werden, gibt es fünf Bedienelemente:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><strong>Schließen</strong></td>
+   <td>Schließen Sie die Ansicht "Bildschirmgrößen testen" und kehren Sie zur normalen Ansicht zurück</td>
+  </tr>
+  <tr>
+   <td><strong><a name="select-size">Größe auswählen</a></strong></td>
+   <td>Wählen Sie aus mehreren vorgegebenen Breiten x Höhen-Kombinationen oder geben Sie Ihre eigenen ein.</td>
+  </tr>
+  <tr>
+   <td><strong>Drehen</strong></td>
+   <td>Drehen Sie die die Ansicht und wechseln Sie so zwischen horizontaler und vertikaler Ansicht.</td>
+  </tr>
+  <tr>
+   <td>
+    <p><strong>Berührungsereignisse simulieren</strong></p>
+   </td>
+   <td>
+    <p>"Berührungsereignisse simulieren" aktivieren/deaktivieren: falls aktiviert, werden Mausereignisse in <a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events">Berührungsereignisse</a> umgewandelt.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><strong>Bildschirmfoto erstellen</strong></p>
+   </td>
+   <td>Bildschirmfoto der Inhaltsansicht erstellen. Bildschirmfotos werden im standardmäßigen Download-Ordner abgespeichert.</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/de/tools/browser_console/index.html b/files/de/tools/browser_console/index.html
new file mode 100644
index 0000000000..39d8c889ec
--- /dev/null
+++ b/files/de/tools/browser_console/index.html
@@ -0,0 +1,157 @@
+---
+title: Browser Console
+slug: Tools/Browser_Console
+translation_of: Tools/Browser_Console
+---
+<div>{{ToolsSidebar}}</div><p>The Browser Console is like the <a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Web Console</a>, but applied to the whole browser rather than a single content tab.</p>
+
+<p>So it logs the same sorts of information as the Web Console - network requests, JavaScript, CSS, and security errors and warnings, and messages explicitly logged by JavaScript code. However, rather than logging this information for a single content tab, it logs information for all content tabs, for add-ons, and for the browser's own code.</p>
+
+<p>Similarly, you can execute JavaScript expressions using the Browser Console. But while the Web Console executes code in the page window scope, the Browser Console executes them in the scope of the browser's chrome window. This means you can interact with all the browser's tabs using the <a href="/en-US/docs/Code_snippets/Tabbed_browser" title="/en-US/docs/Code_snippets/Tabbed_browser"><code>gBrowser</code></a> global, and even with the XUL used to specify the browser's user interface.</p>
+
+<p>To open the Browser Console, select "Browser Console" from the Web Developer submenu in the Firefox Menu (or Tools menu if you display the menu bar or are on Mac OS X).</p>
+
+<p>From Firefox 27 onwards, you can also start the Browser Console by launching Firefox from the command line and passing the <code>-jsconsole</code> argument:</p>
+
+<pre>/Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole</pre>
+
+<p>The Browser Console looks like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5847/browser-console-window.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>You can see that the Browser Console looks and behaves very much like the <a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Web Console</a>:</p>
+
+<ul>
+ <li>most of the window is occupied by a <a href="/en-US/docs/Tools/Web_Console#Message_Display_Pane" title="/en-US/docs/Tools/Web_Console#Message_Display_Pane">pane that display messages</a></li>
+ <li>at the top, a <a href="/en-US/docs/Tools/Web_Console#Filtering_and_searching" title="/en-US/docs/docs/Tools/Web_Console#Filtering_and_searching">toolbar</a> enables you to filter the messages that appear</li>
+ <li>at the bottom, a <a href="/en-US/docs/Tools/Web_Console#The_command_line_interpreter" title="/en-US/docs/docs/Tools/Web_Console#The_command_line_interpreter">command line interpreter</a> enables you to evaluate JavaScript expressions.</li>
+</ul>
+
+<h2 id="Browser_Console_logging">Browser Console logging</h2>
+
+<p>The Browser console logs the same sorts of messages as the Web Console:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Web_Console#HTTP_requests" title="/en-US/docs/Tools/Web_Console#HTTP_requests">HTTP requests</a></li>
+ <li><a href="/en-US/docs/Tools/Web_Console#Warnings_and_errors" title="/en-US/docs/Tools/Web_Console#Warnings_and_errors">Warnings and errors</a> (including JavaScript, CSS, security warnings and errors, and messages explicitly logged by JavaScript code using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/console" title="/en-US/docs/Web/API/console">console</a> API)</li>
+ <li><a href="/en-US/docs/Tools/Web_Console#Input.2Foutput_messages" title="/en-US/docs/Tools/Web_Console#Input.2Foutput_messages">Input/output messages</a>: commands send to the browser via the command line, and the result of executing them.</li>
+</ul>
+
+<p>However, it displays such messages from:</p>
+
+<ul>
+ <li>web content hosted by all browser tabs</li>
+ <li>the browser's own code</li>
+ <li>add-ons.</li>
+</ul>
+
+<h3 id="Messages_from_add-ons">Messages from add-ons</h3>
+
+<p>The Browser Console displays messages logged by all Firefox add-ons.</p>
+
+<h4 id="Console.jsm">Console.jsm</h4>
+
+<p>To use the console API from a traditional or bootstrapped add-on, get it from the Console module.</p>
+
+<p>One exported symbol from Console.jsm is "console". Below is an example of how to acess it, which adds a message to the Browser Console.</p>
+
+<pre class="brush: js">const Cu = Components.utils;
+const consoleJSM =
+Cu.import("resource://gre/modules/devtools/Console.jsm", {});
+let console = consoleJSM.console; //access exported symbol of "console" from the Console.jsm
+
+<code>console.log("Hello from Firefox code"); //output messages to the console</code></pre>
+
+<p> </p>
+
+<p>The full module with other functionality is found here on <a href="http://mxr.mozilla.org/mozilla-release/source/toolkit/devtools/Console.jsm">Mozilla Cross-Reference</a>.</p>
+
+<p>For more methods of the console exported attribute of the Console.jsm see this article: <a href="/en-US/docs/Web/API/console?redirectlocale=en-US&amp;redirectslug=DOM%2Fconsole">Console</a></p>
+
+<h4 id="HUDService">HUDService</h4>
+
+<p>There is also the HUDService which allows access to the Browse Console. The module is available at <a href="http://mxr.mozilla.org/mozilla-release/source/browser/devtools/webconsole/hudservice.js">Mozilla Cross-Reference</a>. We see we can not only access the Browser Console but also Web Console.</p>
+
+<p>Here is an example on how to clear the contents of the Browser console:</p>
+
+<pre class="brush: js">var devtools = Cu.import("resource://gre/modules/devtools/Loader.jsm", {}).devtools;
+var HUDService = devtools.require("devtools/webconsole/hudservice");
+
+var hud = HUDService.getBrowserConsole();
+hud.jsterm.clearOutput(true);</pre>
+
+<p>If you would like to access the content document of the Browser Console this can be done with the HUDService. This example here makes it so that when you mouse over the "Clear" button it will clear the Browser Console:</p>
+
+<pre class="brush: js">var devtools = Cu.import("resource://gre/modules/devtools/Loader.jsm", {}).devtools;
+var HUDService = devtools.require("devtools/webconsole/hudservice");
+
+var hud = HUDService.getBrowserConsole();
+
+var clearBtn = hud.chromeWindow.document.querySelector('.webconsole-clear-console-button');
+clearBtn.addEventListener('mouseover', function() {
+  hud.jsterm.clearOutput(true);
+}, false);</pre>
+
+<h4 id="Bonus_Features_Available">Bonus Features Available</h4>
+
+<p>For <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/index.html" title="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/index.html">Add-on SDK</a> add-ons, the console API is available automatically. Here's an example add-on that just logs an error when the user clicks a widget:</p>
+
+<pre class="brush: js">widget = require("sdk/widget").Widget({
+  id: "an-error-happened",
+  label: "Error!",
+  width: 40,
+  content: "Error!",
+  onClick: logError
+});
+
+function logError() {
+  console.error("something went wrong!");
+}</pre>
+
+<p>If you <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/tutorials/installation.html" title="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/tutorials/installation.html">build this as an XPI file</a>, then open the Browser Console, then open the XPI file in Firefox and install it, you'll see a widget labeled "Error!" in the Add-on bar:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5937/browser-console-addon.png" style="display: block; margin-left: auto; margin-right: auto;">Click the icon. You'll see output like this in the Browser Console:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5851/browser-console-addon-output.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>For Add-on SDK-based add-ons only, the message is prefixed with the name of the add-on ("log-error"), making it easy to find all messages from this add-on using the <a href="/en-US/docs/Tools/Web_Console#Filtering_and_searching" title="/en-US/docs/Tools/Web_Console#Filtering_and_searching">"Filter output"</a> search box. By default, only error messages are logged to the console, although <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/console.html#Logging%20Levels" title="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/console.html#Logging%20Levels">you can change this in the browser's preferences</a>.</p>
+
+<h2 id="Browser_Console_command_line">Browser Console command line</h2>
+
+<p>Like the Web Console, the command line interpreter enables you to evaluate JavaScript expressions in real time:<img alt="" src="https://mdn.mozillademos.org/files/5855/browser-console-commandline.png" style="display: block; margin-left: auto; margin-right: auto;">Also like the Web Console's command line interpreter, this command line supports <a href="/en-US/docs/Tools/Web_Console#Autocomplete" title="/en-US/docs/Tools/Web_Console#Autocomplete">autocomplete</a>, <a href="/en-US/docs/Tools/Web_Console#Command_history" title="/en-US/docs/Tools/Web_Console#Command_history">history</a>, and various <a href="/en-US/docs/Tools/Web_Console#Keyboard_shortcuts" title="/en-US/docs/docs/Tools/Web_Console#Keyboard_shortcuts">keyboard shortcuts </a>and <a href="/en-US/docs/Tools/Web_Console#Helper_commands" title="/en-US/docs/Tools/Web_Console#Helper_commands">helper commands</a>. If the result of a command is an object, you can <a href="/en-US/docs/Tools/Web_Console#Inspecting_objects" title="/en-US/docs/Tools/Web_Console#Inspecting_objects">click on the object to see its details</a>.</p>
+
+<p>But while the Web Console executes code in the scope of the content window it's attached to, the browser console executes code in the scope of the chrome window of the browser. You can confirm this by evaluating <code>window</code>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5867/browser-console-chromewindow.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>This means you can control the browser: opening, closing tabs and windows and changing the content that they host, and modify the browser's UI by creating, changing and removing XUL elements.</p>
+
+<h3 id="Controlling_the_browser">Controlling the browser</h3>
+
+<p>The command line interpreter gets access to the <a href="/en-US/docs/XUL/tabbrowser" title="/en-US/docs/XUL/tabbrowser"><code>tabbrowser</code></a> object, through the <code>gBrowser</code> global, and that enables you to control the browser through the command line. Try running this code in the Browser Console's command line (remember that to send multiple lines to the Browser Console, use Shift+Enter):</p>
+
+<pre class="brush: js">var newTabBrowser = gBrowser.getBrowserForTab(gBrowser.selectedTab);
+newTabBrowser.addEventListener("load", function() {
+  newTabBrowser.contentDocument.body.innerHTML = "&lt;h1&gt;this page has been eaten&lt;/h1&gt;";
+}, true);
+newTabBrowser.contentDocument.location.href = "https://mozilla.org/";</pre>
+
+<p>It adds a listener to the currently selected tab's <code>load</code> event that will eat the new page, then loads a new page.</p>
+
+<h3 id="Modifying_the_browser_UI">Modifying the browser UI</h3>
+
+<p>Since the global <code>window</code> object is the browser's chrome window, you can also modify the browser's user interface. On Windows, the following code will add a new item to the browser's main menu:</p>
+
+<pre class="brush: js">var parent = window.document.getElementById("appmenuPrimaryPane");
+var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
+makeTheTea.setAttribute("label", "A nice cup of tea?");
+parent.appendChild(makeTheTea);</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5859/browser-console-modify-ui-windows.png" style="display: block; margin-left: auto; margin-right: auto;">On OS X, this similar code will add a new item to the "Tools" menu:</p>
+
+<pre class="brush: js">var parent = window.document.getElementById("menu_ToolsPopup");
+var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
+makeTheTea.setAttribute("label", "A nice cup of tea?");
+parent.appendChild(makeTheTea);</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5861/browser-console-modify-ui-osx.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
diff --git a/files/de/tools/browser_werkzeuge/index.html b/files/de/tools/browser_werkzeuge/index.html
new file mode 100644
index 0000000000..63c820a218
--- /dev/null
+++ b/files/de/tools/browser_werkzeuge/index.html
@@ -0,0 +1,42 @@
+---
+title: Browser_Werkzeuge
+slug: Tools/Browser_Werkzeuge
+tags:
+  - Developer
+  - Fehlerbehebung
+  - Firefox
+  - JavaScript
+translation_of: Tools/Browser_Toolbox
+---
+<div>{{ToolsSidebar}}</div><p>Die Browser-Werkzeuge sind wie die normale <a href="/de/docs/Tools/Web_Konsole">Webkonsole</a>, aber funktionieren mit dem ganzen Browser und nicht nur mit einem einzelnen Tab. Es erlaubt Ihnen die normalen Entwicklertools für den Browser an sich zu benutzen, statt nur für eine Seite. Dies erlaubt Ihnen dann auch das debuggen von Addons und vom browsereigenen JavaScript Code und nicht nur von Internetseiten.</p>
+
+<h2 id="Öffnen_der_Browser-Werkzeuge">Öffnen der Browser-Werkzeuge</h2>
+
+<p>Die Browser-Werkzeuge sind nicht standardmäßig aktiviert. Um dies zu tun, müssen Sie diese Schritte befolgen:</p>
+
+<ul>
+ <li>öffnen Sie die <a href="/en-US/docs/Tools_Toolbox#Settings">Toolbox settings</a></li>
+ <li>Klicken Sie auf "<em>chrome-Debugging aktivieren</em>" und <em>"Externes Debugging aktivieren".</em></li>
+</ul>
+
+<p>Jetzt sollten sie einen neuen Menüpunkt mit dem Namen "Browser-Werkzeuge" sehen.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6661/open-menu.png" style="display: block; height: 477px; margin-left: auto; margin-right: auto; width: 508px;">Nach dem Klick auf Browser Toolbox wird Ihnen eine Meldung wie folgt angezeigt:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6663/warning.png" style="display: block; height: 243px; margin-left: auto; margin-right: auto; width: 554px;">Bestätigen Sie diese mit OK und die Browser Toolbox wird in einem seperatem Fenster geöffnet:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6665/browser-toolbox.png" style="display: block; margin-left: auto; margin-right: auto;">Sie sehen alle JavaScript Dateien, die vom Browser und den laufenen Add-Ons, geladen wurden und können diese debuggen. Außerdem haben Sie Zugriff auf folgende Entwickler Werkzeuge (developer tools):</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Debugger">Debugger</a></li>
+ <li><a href="/en-US/docs/Tools/Browser_Console">Console</a></li>
+ <li><a href="/en-US/docs/Tools/Style_Editor">Style Editor</a></li>
+ <li><a href="/en-US/docs/Tools/Profiler">Profiler</a></li>
+ <li><a href="/en-US/docs/Tools/Network_Monitor">Network Monitor</a></li>
+ <li><a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector">Page Inspector</a></li>
+</ul>
+
+<p> </p>
+
+<p> </p>
diff --git a/files/de/tools/debugger/how_to/index.html b/files/de/tools/debugger/how_to/index.html
new file mode 100644
index 0000000000..084f1717e5
--- /dev/null
+++ b/files/de/tools/debugger/how_to/index.html
@@ -0,0 +1,11 @@
+---
+title: How to
+slug: Tools/Debugger/How_to
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Tools/Debugger/How_to
+---
+<div>{{ToolsSidebar}}</div><p><span class="seoSummary">These articles describe how to use the debugger.</span></p>
+
+<p>{{ ListSubpages () }}</p>
diff --git a/files/de/tools/debugger/how_to/open_the_debugger/index.html b/files/de/tools/debugger/how_to/open_the_debugger/index.html
new file mode 100644
index 0000000000..1fe2d0fb8b
--- /dev/null
+++ b/files/de/tools/debugger/how_to/open_the_debugger/index.html
@@ -0,0 +1,22 @@
+---
+title: Öffne den Debugger
+slug: Tools/Debugger/How_to/Open_the_debugger
+translation_of: Tools/Debugger/How_to/Open_the_debugger
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Es gibt drei Möglichkeiten den Debugger zu öffnen:</p>
+
+<ul>
+ <li>Wähle "Debugger" im Untermenü "Web-Entwickler" (oder "Werkzeuge" wenn du die die Menüleite eingeblendet hast oder Mac OS X benutzt) im Firefoxmenü.</li>
+ <li>
+  <p>Drücke die Tastenkombination <kbd>Strg</kbd> <kbd>Shift</kbd> <kbd>S</kbd>(<kbd>Command</kbd><kbd>Option</kbd><kbd>S</kbd> in OS X).</p>
+
+  <div class="blockIndicator note"><strong>Note:</strong> Wenn Firefox 66 veröffentlicht wurde, wird diese Tastenkombination nicht mehr den Debugger öffnen.</div>
+ </li>
+ <li>Drück die Menütate ( <img alt="new fx menu" class="frameless wiki-image" src="https://support.cdn.mozilla.net/media/uploads/gallery/images/2014-01-10-13-08-08-f52b8c.png" title=""> ), drücke"Developer", wähle dann "Debugger".</li>
+</ul>
+
+<p>{{EmbedYouTube("yI5SlVQiZtI")}}</p>
+
+<p> </p>
diff --git a/files/de/tools/debugger/how_to/use_a_source_map/index.html b/files/de/tools/debugger/how_to/use_a_source_map/index.html
new file mode 100644
index 0000000000..db733cd8f2
--- /dev/null
+++ b/files/de/tools/debugger/how_to/use_a_source_map/index.html
@@ -0,0 +1,32 @@
+---
+title: Use a source map
+slug: Tools/Debugger/How_to/Use_a_source_map
+translation_of: Tools/Debugger/How_to/Use_a_source_map
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>The JavaScript sources executed by the browser are often transformed in some way from the original sources created by a developer. For example:</p>
+
+<ul>
+ <li>sources are often combined and <a href="https://en.wikipedia.org/wiki/Minification_(programming)">minified</a> to make delivering them from the server more efficient.</li>
+ <li>JavaScript running in a page is often machine-generated, as when compiled from a language like <a href="http://coffeescript.org/">CoffeeScript</a> or <a href="http://www.typescriptlang.org/">TypeScript</a>.</li>
+</ul>
+
+<p>In these situations, it's much easier to debug the original source, rather than the source in the transformed state that the browser has downloaded. A <a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">source map</a> is a file that maps from the transformed source to the original source, enabling the browser to reconstruct the original source and present the reconstructed original in the debugger.</p>
+
+<p>To enable the debugger to work with a source map, you must:</p>
+
+<ul>
+ <li>generate the source map</li>
+ <li>include a comment in the transformed file, that points to the source map. The comment's syntax is like this:</li>
+</ul>
+
+<pre class="brush: js"><code>//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map</code></pre>
+
+<p>{{EmbedYouTube("Fqd15gHC4Pg")}}</p>
+
+<p>In the video above we load <a href="https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html">https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html</a>. This page loads a source called "main.js" that was originally written in CoffeeScript and compiled to JavaScript. The compiled source contains a comment like this, that points to a source map:</p>
+
+<pre class="brush: js"><code>//# sourceMappingURL=main.js.map</code></pre>
+
+<p>In the Debugger's <a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_list_pane">source list pane</a>, the original CoffeeScript source now appears as "main.coffee", and we can debug it just like any other source.</p>
diff --git a/files/de/tools/debugger/index.html b/files/de/tools/debugger/index.html
new file mode 100644
index 0000000000..e105ba65b5
--- /dev/null
+++ b/files/de/tools/debugger/index.html
@@ -0,0 +1,369 @@
+---
+title: Debugger
+slug: Tools/Debugger
+translation_of: Tools/Debugger
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Der JavaScript Debugger ermöglicht es dir, schrittweise durch den JavaScript Code zu gehen und dabei seinen Zustand zu sehen und zu verändern, um Fehler im Code einfacher zu finden.</p>
+
+<p>Man kann ihn benutzen, um Code lokal in Firefox zu debuggen, oder remote - zum Beispiel auf einem Firefox-OS-Gerät oder einem Firefox auf Android. In dieser Anleitung wird davon ausgegangen, dass du lokalen Code bearbeitest, aber das meiste trifft auch für das Remote-Debugging zu. Zu den Unterschieden siehe die <a href="/de/docs/Tools/Remote_Debugging">Anleitung zum Remote-Debugging</a>.</p>
+
+<p>Um den Debugger zu öffnen, wählt man einfach "Debugger" aus dem Webentwickler-Untermenü von Firefox (oder im Werkzeuge-Menü, wenn die Menüleiste benutzt wird oder du auf Mac OS X arbeitest), oder indem man die Tastenkombination (das "Shortcut") <em>Control-Shift-S</em> (<em>Command-Option-S</em> auf Mac) auf der Tastatur drückt.</p>
+
+<p>Die <a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window" title="/en-US/docs/Tools/DevTools_Window">Toolbox</a> erscheint am unteren Rand des Browserfensters. Als Standardeinstellung ist der Debugger aktiviert. So sieht sie aus, wenn sie zum ersten mal geöffnet wird:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5955/debugger-startup.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>Und das ist die Ansicht während des Debugging-Prozesses:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5957/debugger-breakpoint-hit.png" style="display: block; margin-left: auto; margin-right: auto;">In dieser Anleitung werden wir uns zunächst kurz die Benutzeroberfläche des Debuggers ansehen und dann beschreiben, wie man einige häufig vorkommende Debuggingaufgaben durchführt.</p>
+
+<h2 id="Die_Benutzeroberfläche_des_Debuggers"><a name="Benutzeroberfläche"></a>Die Benutzeroberfläche des Debuggers</h2>
+
+<p>Die Benutzeroberfläche ("User Interface", UI) ist in vier Bereiche aufgeteilt, die wir uns nacheinander ansehen werden:</p>
+
+<ul>
+ <li>die Werkzeugleiste ("toolbar")</li>
+ <li>die Quellcode-Dateiliste ("source list pane")</li>
+ <li>der Quellcodebereich ("source pane")</li>
+ <li>die Variablenliste ("variables pane")</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5959/debugger-sections.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Die_Quellcode-Dateiliste"><a name="Quellcode-Dateiliste">Die Quellcode-Dateiliste</a></h3>
+
+<p>Auf der linken Seite siehst du eine Liste mit allen JS-Quelldateien, die von der aktuellen Seite geladen wurden. Man kann jede davon auswählen, um sie zu debuggen.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5961/debugger-source-list-pane.png" style="display: block; margin-left: auto; margin-right: auto;">Die Quelldateien sind unter Überschriften eingeordnet, die angeben, von wo sie geladen wurden. Hier ein Beispiel für eine Quellcode-Dateiliste, wenn eine Seite von developer.mozilla.org geladen ist:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5965/debugger-source-list-pane-only.png" style="display: block; height: 275px; margin-left: auto; margin-right: auto; width: 250px;"></p>
+
+<p>Die Dateinamen und Domains stimmen überein mit den folgenden <code>script</code>-Tags im Quellcode der Seite:</p>
+
+<pre class="brush: html"><span>&lt;<span class="start-tag">script</span> <span class="attribute-name">src</span>="<a class="attribute-value">/en-US/jsi18n/build:8987063</a>"&gt;</span><span>&lt;/<span class="end-tag">script</span>&gt;</span><span>
+</span><span>&lt;<span class="start-tag">script</span> <span class="attribute-name">src</span>="<a class="attribute-value">https://login.persona.org/include.js</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text/javascript</a>"&gt;</span><span>&lt;/<span class="end-tag">script&gt;
+<span>&lt;<span class="start-tag">script</span> <span class="attribute-name">src</span>="<span><a class="attribute-value">//mozorg.cdn.mozilla.net/en-US/</a>libs/jquery-1.7.1.min.js</span>" <span class="attribute-name">type</span>="<a class="attribute-value">text/javascript</a>"&gt;</span><span>&lt;/<span class="end-tag">script&gt;</span></span></span></span>
+<span>&lt;<span class="start-tag">script</span> <span class="attribute-name">src</span>="<a class="attribute-value">//mozorg.cdn.mozilla.net/en-US/tabzilla/tabzilla.js</a>" <span class="attribute-name">async</span>&gt;</span><span>&lt;/<span class="end-tag">script</span>&gt;</span></pre>
+
+<p>In der Quellcode-Dateiliste kann man einfach eine der Dateien anklicken, um sie im Quellcodebereich anzeigen und untersuchen zu können.</p>
+
+<p>Haltepunkte ("Breakpoints"), die man durch Klick neben eine Codezeile gesetzt hat, erscheinen unter dem Dateinamen.<img alt="" src="https://mdn.mozillademos.org/files/5967/debugger-breakpoints-set.png" style="display: block; margin-left: auto; margin-right: auto;">Mit der Checkbox kann man Breakpoints an- und ausschalten. Durch Rechts-Klick auf einen Brakepoint-Eintrag in der Liste kann man ein Kontextmenü anzeigen lassen, mit dem man</p>
+
+<ul>
+ <li>einzelne oder alle Haltepunkte aktivieren oder deaktivieren kann (oder alle Haltepunkte <em>bis auf</em> den angeklickten)</li>
+ <li>Bedingungen ("conditions") definieren kann, unter denen die Ausführung an dieser Stelle unterbrochen werden soll (oder diese Bedingungen verändern, wenn sie bereits gesetzt sind)</li>
+</ul>
+
+<p>Durch Klick auf den "Augapfel" kann man das Verdecken ("black boxing") für eine bestimmte Quelle an- und abschalten (z.B. Sprünge in JavaScript-Bibliotheken verhindern). Mehr Informationen dazu findest du unter "<a href="#black-box-a-source" title="#black-box-a-source">Black box a source</a>".</p>
+
+<h3 id="Quellcodebereich_2"><a name="Quellcodebereich">Quellcodebereich</a></h3>
+
+<p>Hier wird die aktuell geladene JavaScript-Datei angezeigt. Haltepunkte ("Breakpoints", im Bild "Breakpoint Set") sind die blauen Kreise neben den Zeilennummern, während Haltepunkte, an der die Code-Ausführung aktuell gestoppt wurde, einen grünen Pfeil innerhalb des Kreises haben ("Breakpoint Hit"):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5969/debugger-breakpoint-hit-annotated.png" style="display: block; margin-left: auto; margin-right: auto;">Im Quellcodebereich kann man über das Kontextmenü folgende Aufgaben erledigen:</p>
+
+<ul>
+ <li>Breakpoints setzen</li>
+ <li>bedingte Breakpoints setzen</li>
+ <li>einen Überwachungsausdruck für die Auswahl hinzufügen</li>
+ <li>die <a href="#Skriptsuche">Skriptsuche</a> benutzen bzw. mit Hilfe eines solchen Filters suchen</li>
+</ul>
+
+<h3 id="Werkzeugleiste_2"><a name="Werkzeugleiste">Werkzeugleiste</a></h3>
+
+<p>Die Werkzeugleiste ("toolbar") besteht aus vier Teilen:</p>
+
+<ul>
+ <li>eine Buttonleiste, mit der man die Bewegung durch das Script steuern kann (Pause/Weiter, Hineinspringen, Verlassen, Ausführen)</li>
+ <li>eine Visualisierung des "Call stack" (Aufrufliste)</li>
+ <li>der Scriptfilter</li>
+ <li>Buttons, mit denen man die <a href="#Variablenliste">Variablenliste</a> und die Debugger-Einstellungen ein- und ausklappen kann</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5733/debugger-toolbar.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>Die vier Buttons auf der linken Seite haben folgende Funktionen:</p>
+
+<ul>
+ <li><strong>Pause/Weiter</strong> (F6): Unterbricht die Skript-Ausführung bzw. setzt sie fort. Wenn der Schalter blau und "gedrückt" dargestellt wird wie oben, ist die Ausführung unterbrochen - entweder weil du selbst diesen Button gedrückt hast, oder weil sie an einem Breakpoint (Haltepunkt) angekommen ist. ("Pause/Resume<strong>"</strong>)</li>
+ <li><strong>Ausführen</strong> (F7): Führt die aktuelle JavaScript-Codezeile aus und springt zur nächsten. ("Step over")</li>
+ <li><strong>Hineinspringen</strong> (F8): Springt in die Funktion, die in der aktuellen JavaScript-Zeile aufgerufen wird. ("Step into")</li>
+ <li><strong>Verlassen</strong> (Shift-F8): Lässt das Skript durchlaufen (und führt es aus), bis die aktuelle Funktion beendet ist. ("Step out")</li>
+</ul>
+
+<p>Die visuelle Darstellung des "Call stack" (Liste der Code-Unterbrechungen, an denen  eine Ebene tiefer in eine neue Funktion gesprungen wurde) zeigt die Liste aller Code-Stellen an denen Funktionsaufrufe zum aktuellen Breakpoint geführt haben. Über diese Liste kann man herausfinden, wie das Programm "an die aktuelle Stelle gekommen ist".</p>
+
+<p>Durch Klick auf die Einträge wird im <a href="#Quellcodebereich" title="#source-pane">Quellcodebereich</a> die Absprungstelle angezeigt und man kann nachvollziehen, von wo gesprungen wurde. Gleichzeitig werden in der <a href="#Variablenliste">Variablenliste</a> die Variablenwerte zum Zeitpunkt des jeweiligen Funktionsaufrufs anzeigt. Oft lässt sich dadurch herausfinden, ob und warum Parameter falsch übergeben wurden und wo der eigentliche Fehler aufgetreten ist. Auch wenn Funktionen von verschiedenen Stellen im Code aufgerufen werden, lässt sich über den Stack herausfinden, um welchen Fall es sich handelt.</p>
+
+<h4 id="Skriptsuche_2"><a name="Skriptsuche"><strong>Skripts</strong>uche</a></h4>
+
+<p>Mit der Skriptsuche ("script filter") kann man alle drei Debugger-Bereiche durchsuchen. Man kann dem Suchbegriff eines der folgenden Sonderzeichen voranstellen, um verschiedene Sonderfunktionen zu nutzen.</p>
+
+<dl>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Prefix</th>
+   <th scope="col">Function</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Nichts</td>
+   <td>Skripte durchsuchen, die in der <a href="#Quellcode-Dateiliste">Quellcodeliste</a> angezeigt werden.</td>
+  </tr>
+  <tr>
+   <td>!</td>
+   <td>In sämtlichen Dateien nach dem Suchbegriff suchen.</td>
+  </tr>
+  <tr>
+   <td>@</td>
+   <td>Nur nach Funktions-Definitionen in allen Dateien suchen, die den Begriff enthalten.</td>
+  </tr>
+  <tr>
+   <td>#</td>
+   <td>Nur in der Datei, die aktuell im <a href="#Quellcodebereich" title="#source-pane">Quellcodebereich</a> angezeigt wird, nach dem Begriff suchen.</td>
+  </tr>
+  <tr>
+   <td>:</td>
+   <td>Zu einer Zeilennummer springen (in der aktuell im<a href="#Quellcodebereich" title="#source-pane"> Quellcodebereich</a> angezeigten Datei).</td>
+  </tr>
+  <tr>
+   <td>*</td>
+   <td>Variablen durchsuchen, die in der <a href="#Variablenliste">Variablenliste</a> angezeigt werden.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Diese Optionen werden in einem Popup angezeigt, wenn du in das Suchfeld klickst, und sie sind außerdem über das Kontextmenü im<a href="#Quellcodebereich" title="#source-pane"> Quellcodebereich</a> erreichbar. Die Sonderzeichen können auch kombiniert werden, um präzisere Suchen machen: "<em>file.js:12</em>" öffnet zum Beispiel file.js und springt in Zeile 12. "<em>mod#onLoad</em>" sucht in allen Dateien, die "mod" im Namen enthalten nach dem Begriff "onLoad". Mit der Return-/Enter-Taste kann von einem zum nächsten Ergebnis gesprungen werden.</p>
+
+<h4 id="Debugger-Einstellungen"><a name="Einstellungen">Debugger-Einstellungen</a></h4>
+
+<p>Am rechten Ende der Werkzeugleiste befinden sich zwei weitere Buttons. Der erste schaltet zwischen Ein- und Ausblenden der <a href="#Variablenliste">Variablenliste</a> hin und her. Mit dem zweiten kann man zwischen verschiedenen Debugger-Einstellungen umschalten:</p>
+
+<p>With this option enabled, the debugger will automatically detect minified JS files and pretty-print them.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>
+    <p><strong>Auto Prettify Minified Sources</strong></p>
+   </td>
+   <td>Ist diese Option eingeschaltet, findet der Debugger automatisch minimierte JavaScript-Dateien und stellt sie in lesbarer Form dar.</td>
+  </tr>
+  <tr>
+   <td>
+    <p><strong>Pause bei Exceptions</strong></p>
+   </td>
+   <td>Skriptausführung automatisch unterbrechen, wenn eine JavaScript-Exception geworfen wird.</td>
+  </tr>
+  <tr>
+   <td><strong>Ignore caught exceptions</strong></td>
+   <td>
+    <p>Wenn diese Einstellung gesetzt ist (Voreinstellung) und "Pause bei Exceptions" aktiviert ist, wird nur noch bei Fehlern unterbrochen, die nicht mit <code>try-catch</code> abgefangen werden. Diese Einstellung ist Standard, weil man davon ausgehen kann, dass abgefangene Exceptions im Programm ordnungsgemäß behandelt werden.</p>
+
+    <div class="geckoVersionNote">
+    <p>Neue Option in Firefox 26.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><strong>Show panes on startup</strong></td>
+   <td>Wenn diese Option aktiviert ist, wird die <a href="#Variablenliste">Variablenliste</a> des Debuggers angezeigt, sobald der Debugger zum ersten mal aktiviert wird.</td>
+  </tr>
+  <tr>
+   <td><strong>Show only enumerable properties</strong></td>
+   <td>Enabling this option adds a "Filter variables" search box to the <a href="#variables-pane" title="#variables-pane">variables panel</a>, so that you can filter the displayed list of variables.</td>
+  </tr>
+  <tr>
+   <td><strong>Show variables filter box</strong></td>
+   <td>Do not display non-enumerable JavaScript properties</td>
+  </tr>
+  <tr>
+   <td><strong>Show original sources</strong></td>
+   <td>Enabling this option will make the debugger use <a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/" title="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">source maps</a>, if they are available, to display the original source for code which has been combined, minified, or even compiled to JavaScript from a language like CoffeeScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+</dl>
+
+<h3 id="Variablenliste_2"><a name="Variablenliste">Variablenliste</a></h3>
+
+<p>In der Variablenliste kann man sehen, welche Werte die Variablen an einer bestimmten Stelle im Programm gerade haben - und man kann sie sogar für Versuche manuell verändern und das Skript dann weiterlaufen lassen:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5737/debugger-variables-pane.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h4 id="Variablenwerte_beobachten">Variablenwerte beobachten</h4>
+
+<p>Die Variablen sind nach Geltungsbereich ("scope") gruppiert: im Funktions-Scope sieht man die (standardmäßig vorhandenen) Werte von <code>arguments</code> und <code>this</code> und lokale Variablen, die in der Funktion definiert wurden (im Beispiel: <code>user</code> und <code>greeting</code>).</p>
+
+<p>Ähnlich verhält es sich mit globalen Variablen, die auf der obersten Ebene des JavaScript-Files (also nicht in Funktionen) definiert wurden - im Bild etwa <code>greetme</code>, aber auch standardmäßig vorhandene Variablen wie <code>localStorage</code> und <code>console</code>.</p>
+
+<p>Objekte können mit dem kleinen Pfeil links von ihnen auf- und zugeklappt werden. Dadurch werden ihre Eigenschaften (und Funktionen) und deren Werte sichtbar.</p>
+
+<p>Wenn man mit dem Cursor über die Variablen fährt, wird ein Tooltip mit weiteren Informationen angezeigt - bei Rollover über das <code>greeting</code>-Objekt wird zum Beispiel "<em><s>configurable</s> enumerable writable</em>" angezeigt. Weitere Details zur Bedeutung dieser Eigenschaften unter <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty"><code>Object.defineProperty()</code></a>.</p>
+
+<p>Die angezeigten Variablen lassen sich filtern - entweder durch Nutzung des "*"-Modifiers in the <a href="#Skriptsuche">Skriptsuche</a>, oder durch Text-Eingabe des Filters (#,!,...) vor dem Suchbegriff im Suchfeld, wenn diese Option in den <a href="#Einstellungen">Debugger-Einstellungen</a> aktiviert wurde.</p>
+
+<h4 id="Variablenwerte_verändern"><a name="Variablenwerte_veraendern">Variablenwerte verändern</a></h4>
+
+<p>Variablenwerte können einfach manuell verändert werden, indem man auf die Werte klickt und einen anderen Wert eingibt. Wenn man etwa auf <code>"Hi, Dr. Nick!"</code> klickt, den Variablenwert von <code>greeting</code>, kann man die Begrüßung ändern und das Programm mit diesem Wert weiter arbeiten lassen.</p>
+
+<h4 id="Überwachungsausdrücke"><a name="watch-expressions">Überwachungsausdrücke</a></h4>
+
+<p>Überwachungsausdrücke sind Ausdrücke, die jedesmal ausgewertet werden, wenn die Code-Ausführung gestoppt wird. Mit Hilfe von Überwachungsausdrücken kann man sich einen Überblick über Werte verschaffen, die nicht direkt in der Variablenliste angezeigt werden - wie etwa bestimmte Eigenschaften eines Objekts, die für das Verständnis des Codeablaufs gerade erforderlich sind (siehe Beispiel <code>user.value</code> im Bild). Oder Variablen im Code, die nicht mit <code>var</code> deklariert wurden und daher vom Debugger nicht in der Liste angezeigt werden - oder Werte, die nur mit einer getter-Methode ausgelesen werden können (wie etwa <code>user.getValue("something")</code>) oder jQuery-Ausdrücke wie <code>$("div.myclass&gt;table")</code>.</p>
+
+<p>Einfach auf "Überwachungsausdruck hinzufügen" über der Variablenliste klicken ("Add watch expression") und einen Ausdruck genauso eingeben, wie man es im Code an der aktuellen Stelle machen würde, um einen Wert zu erhalten. Dieser Wert wird dann, während man durch den Code geht, bei jedem Programm-Stop berechnet und wie die Werte der Variablen in der Liste angezeigt.<img alt="" src="https://mdn.mozillademos.org/files/5765/debugger-watch.png" style="display: block; margin-left: auto; margin-right: auto;">Auf diese Weise kann man beim Durchlaufen des Programmes dabei zusehen, wie bestimmte Werte sich ändern. In dem Moment, wo eine Veränderung stattfindet, wird der Überwachungsausdruck kurz gelb hinterlegt, so dass man die Änderungen auch aus dem Augenwinkel mitbekommt, während man den Programmcode liest.</p>
+
+<p>Selbstverständlich kann man auch mehrere Ausdrücke gleichzeitig in der Liste überwachen. Um einen Ausdruck wieder zu entfernen, klickt man einfach auf das kleine "x", das rechts neben dem Überwachungsausdruck erscheint, wenn man mit dem Cursor darüber fährt.</p>
+
+<h2 id="Wie_kann_ich...">Wie kann ich...?</h2>
+
+<h3 id="den_Debugger_öffnen">den Debugger öffnen</h3>
+
+<p>Einfach im Webentwickler-Submenü "Debugger" auswählen (oder in der Firefox-Menüleiste unter "Werkzeuge &gt; Webentwickler &gt; Debugger" klicken, falls du Mac OS X nutzt oder die Menüleiste eingeblendet hast). Alternativ auch mit <em>Control-Shift-S</em> (bzw. <em>Command-Option-S</em> auf Mac).</p>
+
+<h3 id="eine_Quelldatei_finden">eine Quelldatei finden</h3>
+
+<p>Quelldateien ("source files") sind leicht zu finden: Wenn der Debugger geöffnet ist, werden alle JavaScript Quelldateien ("source files") links in der <a href="#Quellcode-Dateiliste">Quellcodeliste</a> aufgelistet. Wenn die Liste zu lang ist, ist es of einfacher, die <a href="#Skriptsuche">Skriptsuche</a> oben rechts zu benutzen.</p>
+
+<h3 id="Codestellen_in_einer_Datei_finden">Codestellen in einer Datei finden</h3>
+
+<p>Um eine Funktion zu finden, nach einem Stichwort zu suchen oder in eine bestimmte Zeile im Code zu sprichen, der im <a href="#Quellcodebereich" title="#source-pane">Quellcodebereich</a> geöffnet ist, kann man die Spezialfilter der <a href="#Skriptsuche">Skriptsuche</a> verwenden.</p>
+
+<h3 id="Breakpoint_setzen">Breakpoint setzen</h3>
+
+<p>Um einen Haltepunkt ("breakpoint") in einer Datei zu setzen, die im <a href="#Quellcodebereich" title="#source-pane">Quellcodebereich</a> geöffnet ist:</p>
+
+<ul>
+ <li>etweder auf die Zeilennummer neben der Codezeile klicken, wo unterbrochen werden soll</li>
+ <li>oder über der Codezeile selbst das Kontextmenü öffnen (Rechtsklick, Ctrl-Klick) und dort "Haltepunkt hinzufügen" wählen ("Add Breakpoint").</li>
+</ul>
+
+<p>Jeder Breakpoint wird an drei Stellen im Debugger angezeigt:</p>
+
+<ul>
+ <li>in der <a href="#Quellcode-Dateiliste">Quellcodeliste</a> unter dem Dateinamen</li>
+ <li>die Zeile im <a href="#Quellcodebereich" title="#source-pane">Quellcodebereich</a> ist neben den Zeilennummern mit einem blauen Kringel markiert</li>
+ <li>die graue Leiste rechts neben der Quellcode-Scrollbar zeigt alle Haltepunkte als kleine blaue Kästchen (im Maßstab der Scrollbar, also auch aktuell im <a href="#Quellcodebereich" title="#source-pane">Quellcodebereich</a> nicht sichtbare Haltepunkte)</li>
+</ul>
+
+<p>In dem Screenshot unten siehst du Breakpoints in den Zeilen 7 und 65 der JavaScript-Datei:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5743/debugger-breakpoint-set-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Einen_bedingten_Breakpoint_setzen">Einen bedingten Breakpoint setzen</h3>
+
+<p>Um einen bedingten Haltepunkt  ("conditional breakpoint") zu setzen, an dem nur in bestimmten Fällen unterbrochen werden soll, öffnet man in der betreffenden Zeile das Kontextmenü und wählt "Bedingten Haltepunkt hinzufügen" ("Add conditional breakpoint"). In dem Textfeld, das sich daraufhin öffnet, kann einfach ein Boolscher Ausdruck eingesetzt werden. Die Syntax ist genau die gleiche wie in der Klammer einer if-Anweisung:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5747/debugger-conditional-breakpoint.png" style="display: block; margin-left: auto; margin-right: auto;">Um die Haltebedingung ("condition") zu verändern oder einem "normalen" Breakpoint nachträglich eine Bedingung hinzuzufügen, kann einfach das Kontextmenü auf dem Breakpoint geöffnet werden und "Haltebedingung  hinzufügen" ("Configure conditional breakpoint") gewählt werden:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5749/debugger-configure-conditional-breakpoint.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Breakpoint_deaktivieren">Breakpoint deaktivieren</h3>
+
+<p>Um einen Brakepoint außer Kraft zu setzen ("disable a breakpoint") ohne ihn zu löschen:</p>
+
+<ul>
+ <li>entweder: Häkchen in der Checkbox neben dem Breakpoint-Eintrag in der <a href="#Quellcode-Dateiliste">Quellcodeliste</a> entfernen</li>
+ <li>oder: über das Kontextmenü über dem Eintrag in der <a href="#Quellcode-Dateiliste">Quellcodeliste</a> und dort "Haltepunkt deaktivieren" ("Disable breakpoint") klicken</li>
+</ul>
+
+<h3 id="Dem_Programmablauf_folgen">Dem Programmablauf folgen</h3>
+
+<p>Wenn die Ausführung des Codes an einem Breakpoint gestoppt wird, kannst du Schritt für Schritt die Abarbeitung Programmzeilen und einzelner Befehle folgen. Dazu verwendet man die vier Buttons (Pause/Weiter, Hineinspringen, Verlassen, Ausführen) oben links in der <a href="#Werkzeugleiste">Werkzeugleiste</a> ("toolbar"):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5769/debugger-stepping-through.png" style="display: block; margin-left: auto; margin-right: auto;">Die vier Buttons auf der linken Seite haben folgende Funktionen:</p>
+
+<ul>
+ <li><strong>Pause/Weiter</strong> (F6): Unterbricht die Skript-Ausführung bzw. setzt sie fort. Wenn der Schalter blau und "gedrückt" dargestellt wird wie oben, ist die Ausführung unterbrochen - entweder weil du selbst diesen Button gedrückt hast, oder weil sie an einem Breakpoint (Haltepunkt) angekommen ist. ("Pause/Resume<strong>"</strong>)</li>
+ <li><strong>Ausführen</strong> (F7): Führt die aktuelle JavaScript-Codezeile aus und springt zur nächsten. ("Step over")</li>
+ <li><strong>Hineinspringen</strong> (F8): Springt in die Funktion, die in der aktuellen JavaScript-Zeile aufgerufen wird. ("Step into")</li>
+ <li><strong>Verlassen</strong> (Shift-F8): Lässt das Skript durchlaufen (und führt es aus), bis die aktuelle Funktion beendet ist. ("Step out")</li>
+</ul>
+
+<h3 id="Source_Maps">Source Maps</h3>
+
+<p>JavaScript-Quellcode wird oft aus mehreren Dateien zusammengefasst und das Ergebnis wird "minified" (komprimiert), um Serverbelastung und Ladezeiten zu optimieren. Immer häufiger ist das geladene JavaScript auch Maschinen-generiert, zum Beispiel aus Sprachen wie CoffeeScript.</p>
+
+<p>Durch die Nutzung von <a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/" title="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">source maps</a>, kann der Debugger den gerade ausgeführten Code auf JS-Dateien "mappen", die für Menschen bequemer lesbar sind - also die entsprechenden Stellen in den Menschen-lesbaren Dateien anzeigen, was das Debuggen sehr erleichtert.</p>
+
+<p>Dazu muss man dem Debugger mitteilen, dass es solche Source maps zum verwendeten Code gibt, indem man in den <a href="#Einstellungen">Debugger-Einstellungen</a> (Zahnrad-Icon oben rechts) auf "Originalquellen anzeigen" klickt ("Show original sources"):<img alt="" src="https://mdn.mozillademos.org/files/5763/debugger-show-original-sources.png" style="display: block; margin-left: auto; margin-right: auto;">Damit das funktioniert, muss man in der Quelldatei eine Mapping-URL in einem Kommentar angegeben haben, der dem Debugger sagt, wo sich die alternativen Dateien befinden. Ein solcher Kommentar in der JavaScript-Datei sollte folgendermaßen aussehen:</p>
+
+<p><code>//@ sourceMappingURL=http://example.com/path/to/your/sourcemap.map</code></p>
+
+<h3 id="Variablenwerte_prüfen">Variablenwerte prüfen</h3>
+
+<p>Wenn der Debugger an einem Haltepunkt ("breakpoint") die Programm-Ausführung unterbricht, kann man sich die aktuellen Werte der Variablen an dieser Stelle im Code ansehen. Sie werden rechts in der <a href="#Variablenliste">Variablenliste</a> angezeigt:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5737/debugger-variables-pane.png" style="display: block; margin-left: auto; margin-right: auto;">Rechts befindet sich die <a href="#Variablenliste">Variablenliste</a>. Die Variablen werden in Blöcken nach Geltungsbereichen ("scopes") gefiltert angezeigt. Obje können ausgeklappt werden, wenn man einzelne Eigenschaften sehen möchte (siehe <a href="#Variablenliste">Variablenwerte</a> oben). Auch über ein "*" am Beginn des <a href="#Skriptsuche">Skriptsuche</a>-Eingabefelds ("filter expression") kann die Anzeige der Variablen gefiltert werden:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5767/debugger-filter-variables.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Variablen_andere_Werte_zuweisen">Variablen andere Werte zuweisen</h3>
+
+<p>Wenn die Ausführung des Codes an einem Breakpoint ("Haltepunkt") unterbrochen wurde, können die Werte in der <a href="#Variablenwerte_veraendern">Variablenanzeige</a> des Debuggers verändert werden. Einfach auf den aktuellen Variablenwert klicken - der Wert wird zu einem Eingabefeld und kann sofort geändert werden:<img alt="" src="https://mdn.mozillademos.org/files/5761/debugger-modify-variable.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Einen_Ausdruck_beobachten">Einen Ausdruck beobachten</h3>
+
+<p>Sie können den Wert eines Javascript-Ausdrucks mit der Funktion "Ausdruck beobachten" in der Variablenleiste beobachten.</p>
+
+<h3 id="Mobile_Geräte_debuggen">Mobile Geräte debuggen</h3>
+
+<p>Das debuggen von mobilen Geräten wird in <a href="/en-US/docs/Tools/Remote_Debugging" title="/en-US/docs/Tools/Remote_Debugging">remote debugging </a>behandelt.</p>
+
+<h3 id="Verstecken_von_Quelldateien_(Black_boxing)"><a name="black-box-a-source">Verstecken von Quelldateien ("Black boxing")</a></h3>
+
+<p>Viele Webseiten und Programme nutzen heute Frameworks wie <a href="http://jquery.com/">jQuery</a>, <a href="http://emberjs.com/">Ember</a> oder <a href="http://angularjs.org/">Angular</a> und zu 99% kann man einfach davon ausgehen, dass deren Code funktioniert. Die Interna dieser Bibliotheken wollen wir beim Debuggen meistens nicht sehen - wir verstecken sie und behandeln sie als <a href="http://en.wikipedia.org/wiki/Black_box">Black box</a>. Durch Black boxing entfällt das leidige Eintauchen in Bibliothek-Dateien (zum Beispiel bei each-Schleifen oder dem Auslösen von Events) und wir können uns auf unseren eigentlichen Code konzentrieren.</p>
+
+<dl>
+ <dt style="text-align: center;"><img alt="How to blackbox a source" src="https://mdn.mozillademos.org/files/6279/debugger-blackbox.png" style="display: block; margin-left: auto; margin-right: auto;"></dt>
+</dl>
+
+<p>Black boxing kann auch man für einzelne Dateien ein- und ausschalten, indem man auf das Breakpoint-Symbol (<em>"eyeball"</em>: Augapfel) links neben der Quelldatei in der Liste klickt. Viele Quellen können auch versteckt werden, indem man in der Entwickler-Toolbar (Shift + F2) den <code>blackbox</code>-Befehl benutzt:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5997/command.png" style="display: block; height: 48px; margin-left: auto; margin-right: auto; width: 537px;">Wenn eine Code-Datei versteckt ist:</p>
+
+<ul>
+ <li>... werden alle Haltepunkte in dieser Quelldatei deaktiviert.</li>
+ <li>... lässt der Debugger diesen Code auch beim schrittweisen Durchlaufen des Codes ("stepping") aus.</li>
+ <li>Wenn "Unterbrechung bei Exceptions" (<a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger/Settings">"pause on exceptions"</a>) eingeschaltet ist, hält der Debugger nicht an, wenn ein Fehler in einer versteckten ("black boxed") Quelldatei geworfen wird - stattdessen wartet er, bis (und: ob) er in der Aufrufliste ("call stack") an einen nicht versteckten Punkt zurück kommt.</li>
+</ul>
+
+<h3 id="Browser-Add-Ons_debuggen">Browser-Add-Ons debuggen</h3>
+
+<p>Im Chrome Umfeld gibt es die folgenden Debug-Möglichkeiten:</p>
+
+<p>chrome://browser/content/debugger.xul oder</p>
+
+<p>in Version 23 beta, chrome://browser/content/devtools/debugger.xul:</p>
+
+<ul>
+ <li>window.addEventListener("Debugger:EditorLoaded") - wird nach dem Laden des read-only script panel aufgerufen.</li>
+ <li>window.addEventListener("Debugger:EditorUnloaded")</li>
+</ul>
+
+<p>Zugehörige Dateien:</p>
+
+<ul>
+ <li>chrome://browser/content/devtools/debugger-controller.js</li>
+ <li>chrome://browser/content/devtools/debugger-toolbar.js</li>
+ <li>chrome://browser/content/devtools/debugger-view.js</li>
+ <li>chrome://browser/content/devtools/debugger-panes.js</li>
+</ul>
+
+<p>Unglücklicherweise gibt es bis jetzt noch keine API um Ausdrücke im Debug-Bereich auszuwerten oder um Seitenelemente zu markieren die durch Variablen im Debug-Bereich referenziert werden. (Ist im Moment in Arbeit, siehe auch Bug-Meldung <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=653545" title="https://bugzilla.mozilla.org/show_bug.cgi?id=653545">653545</a>.)</p>
+
+<h2 id="Siehe_auch">Siehe auch:</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Firefox_OS/Debugging" title="/en-US/docs/Mozilla/Firefox_OS/Debugging">Debugging on Firefox OS</a></li>
+ <li><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol" title="https://wiki.mozilla.org/Remote_Debugging_Protocol">Remote debugging protocol</a></li>
+ <li><a href="https://hacks.mozilla.org/2012/08/remote-debugging-on-firefox-for-android/" title="https://hacks.mozilla.org/2012/08/remote-debugging-on-firefox-for-android/">Remote Debugging on Firefox for Android</a> (blog post)</li>
+</ul>
diff --git a/files/de/tools/debugger/settings/index.html b/files/de/tools/debugger/settings/index.html
new file mode 100644
index 0000000000..972e98ff9a
--- /dev/null
+++ b/files/de/tools/debugger/settings/index.html
@@ -0,0 +1,57 @@
+---
+title: Settings
+slug: Tools/Debugger/Settings
+translation_of: Archive/Tools/Debugger_settings
+---
+<div>{{ToolsSidebar}}</div><p>The Debugger has its own settings menu, which you can access from an icon in the <a href="/en-US/docs/Tools/Debugger/UI_Tour#toolbar">toolbar</a>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9819/debugger-settings.png" style="display: block; margin-left: auto; margin-right: auto;">Each setting is a simple on/off switch:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td style="width: 40%;"><strong>Auto Prettify Minified Sources</strong></td>
+   <td>With this option enabled, the debugger will automatically detect minified JS files and <a href="/en-US/docs/Tools/Debugger/How_to/Pretty-print_a_minified_file">pretty-print</a> them.</td>
+  </tr>
+  <tr>
+   <td><strong>Pause on Exceptions</strong></td>
+   <td>When this option is enabled, execution of the script will automatically pause whenever a JavaScript exception is thrown.</td>
+  </tr>
+  <tr>
+   <td><strong>Ignore Caught Exceptions</strong></td>
+   <td>
+    <p>If this option is set (it is set by default) and "Pause on exceptions" is set, then execution will pause on an exception only if that exception is not caught.</p>
+
+    <p>This is usually the behavior you want. You don't generally want to pause execution when an exception that is thrown is caught, since that generally indicates that your program is handling it properly.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><strong>Show Panes on Startup</strong></td>
+   <td>When this option is enabled, the debugger's <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger/UI_Tour#Variables_pane" title="#variables-pane">variables pane</a> is visible when you first start the debugger.</td>
+  </tr>
+  <tr>
+   <td><strong>Show Only Enumerable Properties</strong></td>
+   <td>Do not display non-enumerable JavaScript properties.</td>
+  </tr>
+  <tr>
+   <td><strong>Show Variables Filter Box</strong></td>
+   <td>Enabling this option adds a "Filter variables" search box to the <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger/UI_Tour#Variables_pane" title="#variables-pane">variables pane</a>, so that you can filter the displayed list of variables.</td>
+  </tr>
+  <tr>
+   <td><strong>Show Original Sources</strong></td>
+   <td>Enabling this option will make the debugger use <a class="external external-icon" href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/" title="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">source maps</a>, if they are available, to display the original source for code which has been combined, minified, or even compiled to JavaScript from a language like CoffeeScript. Defaults to true.</td>
+  </tr>
+  <tr>
+   <td><strong>Automatically Black Box Minified Sources</strong></td>
+   <td>
+    <div class="geckoVersionNote">
+    <p>New in Firefox 33.</p>
+    </div>
+
+    <p><span id="summary_alias_container"><span id="short_desc_nonedit_display">Automatically <a href="/en-US/docs/Tools/Debugger/How_to/Black_box_a_source">black box</a> sources whose URL ends with ".min.js". Defaults to true.</span></span></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/de/tools/debugger/source_map_errors/index.html b/files/de/tools/debugger/source_map_errors/index.html
new file mode 100644
index 0000000000..b5c88af661
--- /dev/null
+++ b/files/de/tools/debugger/source_map_errors/index.html
@@ -0,0 +1,70 @@
+---
+title: Source map errors
+slug: Tools/Debugger/Source_map_errors
+tags:
+  - Debugger
+  - Debugging
+  - Dev Tools
+  - Reference
+  - Source maps
+  - Tools
+translation_of: Tools/Debugger/Source_map_errors
+---
+<div>{{ToolsSidebar}}</div>
+
+<p class="summary">Source maps sind JSON files, die einen Weg bieten, transformierte Quellen, so wie sie vom Browser gesehen werden, mit Original Sourcen, so wie sie von einem Entwickler geschrieben wurden, in Einklang zu bringen. Manchmal erhält man Fehler, wenn man mit source maps arbeitet. Diese Seite erklärt die Probleme, die am häufigsten auftreten und wie man diese Probleme beheben kann.</p>
+
+<div class="note">
+<p><strong>Anmerkung</strong>: Wenn Sie mehr über das Thema source maps erfahren möchten, klicken Sie hier: <a href="/en-US/docs/Tools/Debugger/How_to/Use_a_source_map">How to use a source map</a>.</p>
+</div>
+
+<h2 id="Allgemeines_source_map_error_reporting">Allgemeines source map error reporting</h2>
+
+<p>Wenn Sie ein Problem sehen, erscheint eine Meldung in der Webconsole. Diese Meldung enthält eine Fehlermeldung, die URL der Ressource und die URL der source map:</p>
+
+<p><img alt="Error from invalid JSON" src="https://mdn.mozillademos.org/files/15423/invalid-json.png" style="border-style: solid; border-width: 1px; display: block; height: 57px; margin: 0px auto; width: 744px;"></p>
+
+<p>Hier wird uns mitgeteilt, dass <code>bundle.js</code> eine source map voraussetzt und die URL der source map sagt uns, wo die source-map-Daten zu finden sind (in diesem Fall relativ zur Ressoucre). Der Fehler teilt uns mit, dass die source map nicht im JSON-Format vorliegt - wir bieten also die falsche Datei an.</p>
+
+<p>Source maps können in ein paar allgemeinen Fällen fehlerhaft sein; die folgenden Abschnitte beschrieben diese Fälle.</p>
+
+<h2 id="Source_map_nicht_vorhanden_oder_nicht_zugreifbar">Source map nicht vorhanden oder nicht zugreifbar</h2>
+
+<p>Auf die source map Ressource kann nicht zugegriffen werden oder sie ist nicht vorhanden.</p>
+
+<p><img alt="Source map file is missing" src="https://mdn.mozillademos.org/files/15429/missing-map.png" style="border-style: solid; border-width: 1px; display: block; height: 42px; margin: 0px auto; width: 733px;"></p>
+
+<p>Die Lösung ist hier, sicherzustellen, dass auf die Datei zugegriffen werden kann.</p>
+
+<h2 id="Ungültige_source_map">Ungültige source map</h2>
+
+<p>Die Source Map Daten können ungültig sein — entweder, es ist überhaupt kein JSON file, oder es hat eine ungültige Struktur. Typische Fehlermeldungen sind hier:</p>
+
+<ul>
+ <li><code>SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data</code></li>
+ <li><code>Error: "version" is a required argument</code></li>
+</ul>
+
+<p><img alt='Error: "version" is a required argument' src="https://mdn.mozillademos.org/files/15425/missing-field.png" style="border-style: solid; border-width: 1px; display: block; height: 45px; margin: 0px auto; width: 743px;"></p>
+
+<h2 id="Originale_Quelle_fehlt">Originale Quelle fehlt</h2>
+
+<p>Es kann sein, dass eine originale Quelle fehlt. Sie werden dies eventuell feststellen, wenn Sie versuchen, eine der Original Sourcen im Debugger zu öffnen. Die Meldung sieht in diesem Fall ein bisschen anders aus:</p>
+
+<p><img alt="Debugger source tab showing the error" src="https://mdn.mozillademos.org/files/15421/Screenshot%20from%202017-09-15%2014-32-02.png" style="border-style: solid; border-width: 1px; display: block; height: 35px; margin: 0px auto; width: 727px;"></p>
+
+<p>In diesem Fall wird die Meldung auch im Source Tab im Debugger angezeigt:</p>
+
+<p><img alt="Debugger source tab showing the error" src="https://mdn.mozillademos.org/files/15427/debugger-tab.png" style="border-style: solid; border-width: 1px; display: block; height: 109px; margin: 0px auto; width: 616px;"></p>
+
+<h2 id="Netzwerkfehler_beim_Zugriff_auf_die_Ressource">Netzwerkfehler beim Zugriff auf die Ressource</h2>
+
+<p>Ein Fehler in Firefox verhindert, dass die Source map für web extensions geladen wird.</p>
+
+<p>Details dazu finden Sie hier: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1437937">Bug 1437937: WebExtensions Doesn't Find Source Maps</a>.</p>
+
+<pre class="syntaxbox"><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">Source-Map-Fehler: TypeError: NetworkError when attempting to fetch resource.
+ Ressourcen-Adresse: moz-extension://c7f0f003-4fcf-49fd-8ec0-c49361266581/background.js
+ Source-Map-Adresse: background.js.map</span></span></span></pre>
+
+<p>Der einzige Weg, dies zu umgehen, besteht darin, die URL manuell auf eine öffentliche Adresse (http://localhost:1234/file.map.js) zu ändern und einen lokalen Webserver auf diesem Port zu starten.</p>
diff --git a/files/de/tools/firefox_os_1.1_simulator/index.html b/files/de/tools/firefox_os_1.1_simulator/index.html
new file mode 100644
index 0000000000..ec2bafe6ee
--- /dev/null
+++ b/files/de/tools/firefox_os_1.1_simulator/index.html
@@ -0,0 +1,352 @@
+---
+title: Firefox OS 1.1 Simulator
+slug: Tools/Firefox_OS_1.1_Simulator
+translation_of: Tools/Firefox_OS_1.1_Simulator
+---
+<div>{{ToolsSidebar}}</div><div id="doc-content">
+<div class="page-content boxed">
+<div class="note">
+<p>Diese Seite beschreibt den "alten" Firefox OS Simulator. Dieser sollte nur verwendet werden, falls man Apps für Firefox 1.1 entwickelt und er kann daher auch nur auf Firefox 24 oder Firefox 25 installiert werden.</p>
+
+<p>Wenn man Apps für Firefox OS 1.2 oder später entwickelt, muß stattdessen der <a href="/en-US/Firefox_OS/Using_the_App_Manager">App Manager </a>verwendet werden.</p>
+
+<p>Falls Hilfe benötigt wird, kann man in der <a href="https://lists.mozilla.org/listinfo/dev-developer-tools">dev-developer-tools mailing list </a>oder bei <a href="irc://irc.mozilla.org/#devtools">#devtools auf irc.mozilla.org</a> nachfragen.</p>
+</div>
+
+<p>Die Firefox OS Simulator-Erweiterung ist ein Werkzeug, welches es ermöglicht, eigene <a href="https://developer.mozilla.org/en-US/docs/Apps" title="/en-US/docs/Apps">Firefox OS Apps</a> auf dem Desktop zu testen und zu debuggen. Der Code-Test-Debug-Zyklus ist sehr viel schneller mit dem Simulator als mit dem echten Gerät und dieses braucht man dafür natürlich dann auch nicht.</p>
+
+<p>Im Wesentlichen enthält die Simulator-Erweiterung:</p>
+
+<ul>
+ <li><strong>den Simulator</strong>: dieser beinhaltet den <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client" title="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client">Firefox OS Desktop Client</a>, welcher eine Version der höheren Schichten des <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS" title="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> ist, das auf dem Desktop läuft. Der Simulator enthält auch einige <a href="https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_1.1_Simulator#Simulator-toolbar" title="#Simulator-toolbar">zusätzliche Features in der Emulation</a>, die in den Standard Firefox OS Desktop Builds nicht enthalten sind.</li>
+ <li><strong>das Dashboard</strong>: ein Werkzeug, welches durch den Firefox-Browser gehostet wird und Start und Stop des Simulators ermöglicht, sowie das Installieren, Deinstallieren und Debuggen von Apps, die darin laufen. Das Dashboard hilft ebenfalls, die Apps auf ein reales Gerät zu übetragen und überprüft die App-Manifests auf die geläufigsten Probleme.</li>
+</ul>
+
+<p>Der Screenshot im Folgenden zeigt eine Debugging-Sitzung unter Verwendung des Simulators.</p>
+
+<p>Das Dashboard ist oben rechts innerhalb eines Firefox-Tabs. Wir haben eine App hinzugefügt, eine "Packaged App", die wir "Wo bin ich? (Where am I?)" genannt haben. Links oben läuft die App im Simulator. Wir haben ebenfalls die Debugger-Werkzeuge eingebunden, die im Panel weiter unten sind. Man kann sehen, daß das Konsolenfeld Meldungen über die App anzeigt.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5513/Simulator-overview-4.0.png"></p>
+
+<p>Dieses Handbuch behandelt folgende Themen:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator#Installing" title="#Installing">Wie man die Simulator-Erweiterung installiert</a></li>
+ <li><a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator#Adding-updating-removing" title="#Adding-updating-removing">Wie man Apps hinzufügt, entfernt und auffrischt</a></li>
+ <li><a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator#Manifest-validation" title="#Manifest-validation">Überprüfung eines Manifests</a></li>
+ <li><a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator#Running-the-Simulator" title="#Running-the-Simulator">Wie man den Simulator startet</a></li>
+ <li><a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator#Attaching-developer-tools" title="#Attaching-developer-tools">Wie man Entwickler-Werkzeuge in im Simulator laufende Apps einbindet, wie z.B. den JS debugger</a></li>
+ <li><a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator#Simulator-receipts" title="#Simulator-receipts">Wie man Testergebnisse für eine "paid App" bekommt</a></li>
+ <li><a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator#Push-to-device" title="#Push-to-device">Wie man Apps auf ein verbundenes Gerät überträgt</a></li>
+ <li><a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator#Limitations" title="#Limitations">Die Beschränkungen des Simulators im Vergleich zu einem echten Firefox OS-Gerät</a></li>
+</ul>
+
+<div class="note">For a practical walkthrough that shows how to use the Simulator to debug a real web app, see the <a href="https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator/Simulator_Walkthrough" title="/en-US/docs/Tools/Firefox_OS_Simulator/Simulator_Walkthrough">Simulator Walkthrough</a> page.</div>
+
+<h2 id="Die_Simulator-Erweiterung_installieren"><a name="Installing">Die Simulator-Erweiterung installieren</a></h2>
+
+<p>Der Simulator kommt als Firefox Erweiterung. So wird er insatlliert:</p>
+
+<ol>
+ <li>Besuche mit Firefox die folgende Seite: <a href="https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/" title="https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/">Simulator's page on addons.mozilla.org</a>.</li>
+ <li>Klicke "Add to Firefox".</li>
+ <li>Nach dem Download wirst Du aufgefordert, es zu installieren: Klicke "Install Now".</li>
+</ol>
+
+<p>Aufgrund der Größe der Erweiertung kann Firefox für einige Sekunden einfrieren. Falls ein Dialog mit der Warnung: "Unresponsive script" erscheint, klicke "Continue" um die Installation vollständig auszuführen. Das sollte aber nicht mit Firefox ab Version 27 passieren.<br>
+ <br>
+ Firefox wird nach der Installation regelmäßig nach Aktualisierungen des Simulators suchen und diese automatisch installieren.</p>
+
+<p>Das Dashboard des Simulators öffnet sich bei der Insatllation automatisch, und Du kannst es jederzeit erneut öffnen im "Firefox" Menü (oder dem "Extras" Menü unter OS X und Linux), dann "Web-Entwickler", dann "Firefox OS Simulator":</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5141/simulator-open-on-windows-7.png" style="display: block; margin-left: auto; margin-right: auto;"><br>
+ Das Dashboard ist das Werkzeug, mit dem Du Deine App dem Simularot hinzufügst und laufen lässt. So sieht es aus: <img alt="" src="https://mdn.mozillademos.org/files/5491/dashboard-4.0.png" style="height: 650px; width: 1212px;"></p>
+
+<h2 id="Adding_removing_and_refreshing_apps"><a name="Adding-updating-removing">Adding, removing and refreshing apps</a></h2>
+
+<h3 id="Adding_apps">Adding apps</h3>
+
+<p>To add a <a href="https://developer.mozilla.org/en-US/docs/Apps/Packaged_apps" title="/en-US/docs/Apps/Packaged_apps">packaged app</a> to the Simulator, open the Dashboard, click "Add Directory" and select the <a href="https://developer.mozilla.org/en-US/docs/Apps/Manifest" title="/en-US/docs/Apps/Manifest">manifest file</a> for your app.<br>
+ <br>
+ To add a hosted app, enter a URL in the textbox where it says "URL for page or manifest.webapp", then click "Add URL". If the URL points to a manifest, then that manifest will be used. If it doesn't, the Dashboard will generate a manifest for the URL: so you can add any website as an app just by entering its URL.<br>
+ <br>
+ When you add an app, the Dashboard will run a series of tests on your manifest file, checking for common problems. See the section on <a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator#Manifest-validation" title="#Manifest-validation">Manifest Validation</a> for details on what tests are run.</p>
+
+<p>The Dashboard will then automatically run your app in the Simulator unless the Manifest Validation Process discovers an error in your app.</p>
+
+<h3 id="Managing_apps">Managing apps</h3>
+
+<p>Once you have added an app, it will appear in the Manager's list of installed apps:<br>
+ <img alt="" src="https://mdn.mozillademos.org/files/5493/dashboard-list-apps-4.0.png"><br>
+ Each entry gives us the following information about the app:</p>
+
+<ul>
+ <li>its name, taken from the manifest</li>
+ <li>its type, which will be one of "Packaged", "Hosted", or "Generated"</li>
+ <li>a link to its manifest file</li>
+ <li>the result of manifest validation</li>
+</ul>
+
+<p>It also gives us four commands:</p>
+
+<ul>
+ <li><strong>"Refresh":</strong> use this to update and reload the app in the Simulator after you have made changes to it. This also makes the Dashboard validate the manifest again. If you make changes to your app they will not be reflected automatically in the installed app: you will need to refresh the app to apply the changes.</li>
+ <li><strong>"Connect": </strong>use this to connect developer tools to the selected app. The Dashboard will start the Simulator and app if they aren't already running.</li>
+ <li><strong>"Remove" ("X"):</strong> use this to remove the app from the Simulator and the Dashboard. You can undo this action as long as the Dashboard tab is open.</li>
+ <li><strong>"Receipt":</strong> use this to test receipt verification for paid apps. After you select a type of receipt to test, the app will be reinstalled with a test receipt of the given type.</li>
+</ul>
+
+<div class="note">
+<p><strong>Refresh App from the Simulator window</strong>: you can update and reload an app directly from the Simulator window <a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator#Simulator-menubar" title="#Simulator-menubar">using the menubar action or its associated shortcut</a> while the app is running.</p>
+</div>
+
+<h3 id="Manifest_validation"><a name="Manifest-validation">Manifest validation</a></h3>
+
+<p>When you supply a manifest, the Manager will run some validation tests on it. It reports three categories of problems:</p>
+
+<ul>
+ <li>manifest errors: problems that will prevent your app from installing or running</li>
+ <li>manifest warnings: problems that may prevent your app from working properly</li>
+ <li>simulator-specific warnings: features your app is using that the Simulator doesn't yet support</li>
+</ul>
+
+<p>It summarises the problems encountered in the entry for the app: clicking on the summary provides more details.</p>
+
+<h4 id="Manifest_errors">Manifest errors</h4>
+
+<p>The Dashboard will report the following conditions as errors, meaning that you won't be able to run your app in the Simulator without fixing them:</p>
+
+<ul>
+ <li>the manifest does not include the mandatory "name" field</li>
+ <li>the manifest is not valid JSON</li>
+ <li>the app is a hosted app, but the <a href="https://developer.mozilla.org/en-US/docs/Apps/Manifest#type" title="/en-US/docs/Apps/Manifest#type">type</a> field in its manifest is <a href="https://developer.mozilla.org/en-US/docs/Apps/Packaged_apps#Types_of_packaged_apps" title="/en-US/docs/Apps/Packaged_apps#Types_of_packaged_apps">"privileged" or "certified"</a>, which are only available to packaged apps</li>
+ <li>common appCache errors (packaged apps can't use appCache, requests to the manifest URL return an HTTP redirect or an HTTP error status)</li>
+</ul>
+
+<p>Here's the result of trying to add a manifest file with a missing "name":<br>
+ <img alt="" src="https://mdn.mozillademos.org/files/5495/dashboard-missing-name-4.0.png"></p>
+
+<h4 id="Manifest_warnings">Manifest warnings</h4>
+
+<p>The Dashboard will report the following manifest issues as warnings:</p>
+
+<ul>
+ <li>missing icons</li>
+ <li>the icon is less than 128 pixels: all apps submitted to the Marketplace must have at least one icon that is at least 128 pixels square</li>
+ <li>the <a href="https://developer.mozilla.org/en-US/docs/Apps/Manifest#type" title="/en-US/docs/Apps/Manifest#type">type</a> field is unrecognized</li>
+ <li>the manifest requests a <a href="https://developer.mozilla.org/en-US/docs/Apps/Manifest#permissions" title="/en-US/docs/Apps/Manifest#permissions">permission</a> that is unrecognized</li>
+ <li>the manifest requests a <a href="https://developer.mozilla.org/en-US/docs/Apps/Manifest#permissions" title="/en-US/docs/Apps/Manifest#permissions">permission</a> which will be denied</li>
+ <li>the manifest requests a <a href="https://developer.mozilla.org/en-US/docs/Apps/Manifest#permissions" title="/en-US/docs/Apps/Manifest#permissions">permission</a> for which access could not be determined</li>
+</ul>
+
+<h4 id="Simulator-specific_warnings">Simulator-specific warnings</h4>
+
+<p>Finally, the Manager will emit warnings for apps that use features of Firefox OS not yet fully supported by the Simulator:</p>
+
+<ul>
+ <li>the <a href="https://developer.mozilla.org/en-US/docs/Apps/Manifest#type" title="/en-US/docs/Apps/Manifest#type">type</a> field is "certified", but the Simulator does not yet fully support certified apps</li>
+ <li>the manifest requests a <a href="https://developer.mozilla.org/en-US/docs/Apps/Manifest#permissions" title="/en-US/docs/Apps/Manifest#permissions">permission</a> to use an API that is <a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator#Unsupported-APIs" title="#Unsupported-APIs">not yet supported</a> by the Simulator</li>
+</ul>
+
+<h2 id="Running_the_Simulator"><a name="Running-the-Simulator">Running the Simulator</a></h2>
+
+<p>There are two different ways the Simulator may be started:</p>
+
+<ul>
+ <li>if you add an app or click the "Refresh" or "Connect" button next to your app's entry, the Dashboard will automatically run your app in the Simulator</li>
+ <li>if you click the button labeled "Stopped" on the left-hand side of the Dashboard, the Simulator will boot to the Home screen and you'll need to navigate to your app</li>
+</ul>
+
+<p>Either way, once the Simulator is running, the button labeled "Stopped" turns green and the label changes to "Running". To stop the Simulator, click this button again.<br>
+ <br>
+ The Simulator appears as a separate window, sized so the simulated screen area is 320x480 pixels, with a <a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator#Simulator-toolbar" title="#Simulator-toolbar">toolbar at the bottom</a> and a <a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator#Simulator-menubar" title="#Simulator-menubar">menubar at the top</a> that contains some extra features:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5505/simulator-bars.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>To simulate touch events you can click the mouse button and drag while holding the button down. So by clicking and dragging right-to-left from the Home Screen, you'll see the built-in apps, as well as any apps you have added:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5517/simulator-homescreen.png"></p>
+
+<h3 id="Simulator_toolbar"><a name="Simulator-toolbar">Simulator toolbar</a></h3>
+
+<p>In the bottom toolbar, from left to right, these are the <strong>Home button</strong>, the <strong>Screen Rotation button</strong>, and the <strong>Geolocation button</strong>.</p>
+
+<ul>
+ <li>the <strong>Home button</strong> takes you to the Home screen (or to the task list if you keep it pressed for a couple of seconds)</li>
+ <li>the <strong>Screen Rotation button</strong> switches the device between portrait and landscape orientation. This will generate the <a href="https://developer.mozilla.org/en-US/docs/WebAPI/Managing_screen_orientation#Listening_orientation_change" title="/en-US/docs/WebAPI/Detecting_device_orientation">orientationchange</a> event.</li>
+ <li>the <strong>Geolocation button</strong> triggers a dialog asking you to share your geographic location, either using your current coordinates or supplying custom coordinates: this will be made available to your app via the <a href="https://developer.mozilla.org/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Geolocation API</a>.</li>
+</ul>
+
+<p><a href="https://mdn.mozillademos.org/files/5511/simulator-geolocation.png"><img alt="" src="https://mdn.mozillademos.org/files/5511/simulator-geolocation.png" style="height: 309px; width: 520px;"></a><a href="https://mdn.mozillademos.org/files/5519/simulator-screen-orientation.png"><img alt="" src="https://mdn.mozillademos.org/files/5519/simulator-screen-orientation.png" style="height: 297px; width: 500px;"></a></p>
+
+<h3 id="Simulator_menubar"><a name="Simulator-menubar"></a>Simulator menubar</h3>
+
+<p>In the top menubar, you can access some useful commands to make development more efficient:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5525/simulator-menubar.png"></p>
+
+<ul>
+ <li><strong>File -&gt; Quit</strong> (<em>Ctrl/Cmd - Q</em>): shut down the Simulator</li>
+ <li><strong>App -&gt; Refresh</strong> (<em>Ctrl/Cmd - R</em>): refresh the running app</li>
+</ul>
+
+<p>The keyboard shortcut for the <strong>"App Refresh"</strong> command makes it possible to iteratively develop an app much like a web page:</p>
+
+<ul>
+ <li>make a change to the code (and rerun your build tool if needed, e.g. volo / yeoman / grunt)</li>
+ <li>type the keyboard shortcut to refresh the app running in the Simulator</li>
+</ul>
+
+<div class="note">
+<p><strong>"Refresh App and Clear Data" hidden shortcut:</strong> sometimes it's useful to clear data that the Simulator has stored for an app, so the Simulator contains a hidden shortcut, <em>Shift - Ctrl/Cmd - R</em>, that will refresh the running app while clearing the following data:</p>
+
+<ul>
+ <li>
+  <p>localStorage / sessionStorage</p>
+ </li>
+ <li>
+  <p>cookies</p>
+ </li>
+ <li>
+  <p>indexedDB</p>
+ </li>
+ <li>
+  <p>appCache</p>
+ </li>
+</ul>
+</div>
+
+<h2 id="Attaching_developer_tools"><a name="Attaching-developer-tools">Attaching developer tools</a></h2>
+
+<p>You can attach developer tools to the Simulator, to help debug your app. At the moment you can only attach the <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger" title="/en-US/docs/Tools/Debugger">JavaScript Debugger</a>, the <a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Web Console</a>, the <a href="https://developer.mozilla.org/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Style_Editor">Style Editor</a>, the <a href="https://developer.mozilla.org/en-US/docs/Tools/Profiler" title="/en-US/docs/Tools/Profiler">Profiler</a> and the <a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor" title="/en-US/docs/Tools/Network_Monitor">Network Monitor</a>, but we're working on adding support for more <a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window" title="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window">developer tools</a>.</p>
+
+<div class="geckoVersionNote">
+<p>Some of these tools are only available in Beta, Aurora, or Nightly builds of Firefox.</p>
+</div>
+
+<p>To attach developer tools to the Simulator, click the <strong>"Connect"</strong> button for an app:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5497/connect-to-app-button.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>The Dashboard will then open a developer toolbox pane at the bottom of the Dashboard tab and connect it to the app:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5501/simulator-devtools-connected.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Web_Console">Web Console</h3>
+
+<p>The app can log to this console using the global <a href="https://developer.mozilla.org/en-US/docs/DOM/console" title="/en-US/docs/DOM/console">console</a> object, and it displays various other messages generated by the app: network requests, CSS and JS warnings/errors, and security errors. (<a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Learn more about the Web Console.</a>)</p>
+
+<h3 id="Debugger">Debugger</h3>
+
+<p>Using the Debugger, you can step through JavaScript code that is running in the connected app, manage breakpoints, and watch expressions to track down errors and problems faster. (<a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger" title="/en-US/docs/Tools/Web_Console">Learn more about the Debugger.</a>)</p>
+
+<h3 id="Style_Editor">Style Editor</h3>
+
+<p>You can view and edit CSS files referenced in the app using the connected Style Editor. Your changes will be applied to the app in real time, without needing to refresh the app. (<a href="https://developer.mozilla.org/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Web_Console">Learn more about the Style Editor.</a>)</p>
+
+<h3 id="Profiler">Profiler</h3>
+
+<p>Using the Profiler tool connected to the app, you can to find out where your JavaScript code is spending too much time. The Profiler periodically samples the current JavaScript call stack and compiles statistics about the samples. (<a href="https://developer.mozilla.org/en-US/docs/Tools/Profiler" title="/en-US/docs/Tools/Web_Console">Learn more about the Profiler.</a>)</p>
+
+<h3 id="Network_Monitor">Network Monitor</h3>
+
+<p>Thanks to the new Network Monitor, you can analyze the status, headers, content and timing of all the network requests initiated by the app through a friendly interface. (<a href="https://hacks.mozilla.org/2013/06/network-monitor-now-in-firefox-beta/" title="https://hacks.mozilla.org/2013/06/network-monitor-now-in-firefox-beta/">Learn more about the Network Monitor.</a>)</p>
+
+<h2 id="Receipts"><a name="Simulator-receipts"></a>Receipts</h2>
+
+<p>If you are developing a paid app, you should test your receipt validation code (e.g. the code that verifies that a user has already purchased the app or has been issued a refund and then informs the user and locks or unlocks app features accordingly) on a valid (cryptographically signed) receipt.</p>
+
+<p>Thanks to the <strong>"Receipts"</strong> menu in each app entry on the Simulator Dashboard, you can install an app with a <strong>"Valid"</strong>, <strong>"Invalid"</strong>, or <strong>"Refunded"</strong> test receipt. Simply select the type of receipt you wish to test, and the Dashboard will retrieve a test receipt of that type from the Marketplace receipt service and reinstall the app with that receipt in the Simulator:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5523/simulator-receipts-selector-4.0.png"></p>
+
+<h2 id="Push_to_device"><a name="Push-to-device">Push to device</a></h2>
+
+<p>If you have a Firefox OS device you can connect it to the Simulator, and can then push apps from the Dashboard to the device.</p>
+
+<h3 id="Connecting_a_device">Connecting a device</h3>
+
+<p>To connect the device, follow the instructions in the guide to <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Debugging/Connecting_a_Firefox_OS_device_to_the_desktop" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/Connecting_a_Firefox_OS_device_to_the_desktop">connecting a Firefox OS device to the desktop</a>. Note that you don't have to install ADB, as the Simulator add-on includes it already.</p>
+
+<h3 id="Pushing_apps_to_the_device">Pushing apps to the device</h3>
+
+<p>Once you've set up the device and desktop, and connected the device to your desktop via USB, you'll see the note <strong>"Device connected"</strong> appear on the left of the Dashboard, and a new command appear in the entry for each app labeled <strong>"Push"</strong>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5521/simulator-push2device.png"></p>
+
+<p>Click <strong>"Push"</strong>, and the app will be installed on the Firefox OS device.</p>
+
+<div class="note">
+<p><strong>Manual Steps:</strong></p>
+
+<ul>
+ <li>
+  <p>Once you’ve pushed the app to the device, you need to manually close and restart it again, to get updated content</p>
+ </li>
+ <li>
+  <p>If you update anything in the manifest (e.g. app name, orientation, type, permissions), you need to reboot the operating system for those changes to have effect</p>
+ </li>
+</ul>
+</div>
+
+<h3 id="Firefox_OS_Device_Connection_Confirmation">Firefox OS Device Connection Confirmation</h3>
+
+<p>On every device reboot, the first <strong>"Push"</strong> request needs to be confirmed on the device:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5527/device-push-confirmation.png" style="height: 480px; width: 320px;"></p>
+
+<h3 id="Troubleshooting_on_Linux">Troubleshooting on Linux</h3>
+
+<p>If you are unable to connect your device after creating udev rules, please see this <a href="https://github.com/mozilla/r2d2b2g/issues/515" title="https://github.com/mozilla/r2d2b2g/issues/515">bug</a>.</p>
+
+<h2 id="Limitations_of_the_Simulator"><a name="Limitations">Limitations of the Simulator</a></h2>
+
+<p>Note that the Firefox OS Simulator isn't a perfect simulation.</p>
+
+<h3 id="Hardware_limitations">Hardware limitations</h3>
+
+<p>Apart from screen size, the Simulator does not simulate the hardware limitations of a Firefox OS device such as available memory or CPU speed.</p>
+
+<h3 id="Audiovideo_codecs">Audio/video codecs</h3>
+
+<p>The following codecs depend on hardware-accelerated decoding and are therefore not yet supported:</p>
+
+<ul>
+ <li>MP3</li>
+ <li>AAC</li>
+ <li>H.264 (MP4)</li>
+ <li>WebM</li>
+</ul>
+
+<p>This means it isn't possible to use the Simulator to test video playback in apps and on websites like Youtube that rely on these codecs.</p>
+
+<h3 id="Unsupported_APIs"><a name="Unsupported-APIs">Unsupported APIs</a></h3>
+
+<p>Certain APIs that work on the device won't work on the Simulator, generally because the supporting hardware is not available on the desktop. We've implemented simulations for some APIs such as geolocation, and expect to add more in future releases. However, at the moment the following APIs are not supported. Using them might throw errors or just return incorrect results:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/WebAPI/WebTelephony" title="/en-US/WebAPI/WebTelephony">Telephony</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/WebAPI/WebSMS" title="/en-US/docs/WebAPI/WebSMS">WebSMS</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/WebAPI/WebBluetooth" title="/en-US/docs/WebAPI/WebBluetooth">WebBluetooth</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/WebAPI/Using_Light_Events" title="/en-US/docs/WebAPI/Using_Light_Events">Ambient Light</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/WebAPI/Proximity" title="/en-US/docs/WebAPI/Proximity">Proximity</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/WebAPI/Network_Information" title="/en-US/docs/WebAPI/Network_Information">Network Information</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Online_and_offline_events" title="/en-US/docs/Online_and_offline_events">navigator.onLine and offline events</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/WebAPI/Vibration" title="/en-US/docs/WebAPI/Vibration">Vibration</a></li>
+</ul>
+
+<h2 id="Getting_help"><a name="Simulator-help"></a>Getting help</h2>
+
+<p><span style="line-height: 1.572;">If you have a question, try asking us on the </span><a href="https://lists.mozilla.org/listinfo/dev-developer-tools" style="line-height: 1.572;">dev-developer-tools mailing list</a><span style="line-height: 1.572;"> or on </span><a href="irc://irc.mozilla.org/#devtools" style="line-height: 1.572;">#devtools on irc.mozilla.org</a><span style="line-height: 1.572;">.</span></p>
+
+<h3 id="How_to_enable_verbose_logging"><a name="Simulator-verbose-logging"></a>How to enable verbose logging</h3>
+
+<p>Use about:config to create the preference <a href="mailto:extensions.r2d2b2g@mozilla.org.sdk.console.logLevel">extensions.r2d2b2g@mozilla.org.sdk.console.logLevel</a>, set it to the integer value 0, and disable/reenable the addon. Additional messages about the Simulator's operation will appear in the Error Console (or Browser Console in newer versions of Firefox).</p>
+</div>
+</div>
+
+<div class="note">
+<p> </p>
+</div>
+
+<p> </p>
diff --git a/files/de/tools/index.html b/files/de/tools/index.html
new file mode 100644
index 0000000000..4daa07374a
--- /dev/null
+++ b/files/de/tools/index.html
@@ -0,0 +1,149 @@
+---
+title: Firefox Tools für Webentwickler
+slug: Tools
+tags:
+  - Entwickler
+  - Tools
+  - Webentwicklung
+translation_of: Tools
+---
+<div>{{ToolsSidebar}}</div>
+
+<div class="summary"><span class="seoSummary"><math display="block"><semantics><mrow></mrow><annotation encoding="TeX"></annotation></semantics></math>Untersuchen, bearbeiten und debuggen von HTML, CSS und JavaScript für Desktop- und Mobilseiten</span></div>
+
+<div class="column-container">
+<div class="column-half">
+<p>Falls Sie auf der Suche nach Informationen sind, wie man die Developer Tools von Firefox verwendet, sind Sie hier richtig – diese Seite stellt Links zu detaillierten Informationen über alle Kern-Werkzeuge und zusätzlichen Werkzeuge bereit, sowie zu weiteren Informationen, zum Beispiel wie man sich mit Firefox für Android verbindet und es debugged, wie man die Developer Tools erweitert, und wie man den Browser als Ganzes debugged.</p>
+
+<p>Bitte erkunden Sie die Links in der Seitenleiste und weiter unten auf der Seite. Falls Sie Feedback oder Fragen zu den Developer Tools haben, schicken Sie uns Nachrichten auf unserer Mailingliste oder unserem IRC-Kanal (siehe die Community-Links am unteren Ende der Seite). Falls Sie hingegen Feedback oder Fragen zur Dokumentation haben, ist die <a href="https://discourse.mozilla.org/c/mdn">MDN Discourse-Seite</a> ein guter Ort dafür.</p>
+
+<h2 id="Creating" name="Creating">Entwerfen</h2>
+
+<p>Werkzeuge zum Erstellen von Webseiten und Web Apps.</p>
+
+<dl>
+ <dt><a href="/de/docs/Tools/Scratchpad" title="Tools/Scratchpad">JavaScript-Umgebung</a></dt>
+ <dd>Ein Texteditor innerhalb Firefox zum Schreiben und Ausführen von JavaScript.</dd>
+ <dt><a href="/de/docs/Tools/Style_Editor" title="Tools/Style_Editor">Stilbearbeitung</a></dt>
+ <dd>Betrachten und bearbeiten von CSS-Styles der aktuellen Seite.</dd>
+ <dt><a href="/de/docs/Tools/Shader_Editor">Shader Bearbeitung</a></dt>
+ <dd>Ansehen und bearbeiten der <a href="/de/docs/Web/WebGL">WebGL</a> Vertex/Fragment Shaders.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<h2 id="Exploring" name="Exploring">Untersuchen und Debuggen</h2>
+
+<p>Untersuchen, optimieren, entdecken und debuggen von Webseiten und Web Apps.</p>
+
+<dl>
+ <dt><a href="/de/docs/Tools/Web_Console" title="Tools/Web_Console">Web-Konsole</a></dt>
+ <dd>Log-Nachrichten einer Webseite anschauen und mittels JavaScript mit der Seite interagieren.</dd>
+ <dt><a href="/de/docs/Tools/Page_Inspector" title="Tools/Page_Inspector">Inspektor</a></dt>
+ <dd>HTML und CSS einer Seite anschauen und verändern.</dd>
+ <dt><a href="/de/docs/Tools/Debugger" title="Tools/Debugger">JavaScript Debugger</a></dt>
+ <dd>JavaScript einer Seite stoppen, schrittweise laufen lassen, untersuchen und verändern.</dd>
+ <dt><a href="/de/docs/Tools/Network_Monitor" title="Tools/Network_Monitor">Netzwerkanalyse</a></dt>
+ <dd>Netzwerkanfragen beim Laden der Seite untersuchen.</dd>
+ <dt><a href="/de/docs/Tools/GCLI" title="Developer Toolbar">Developer Toolbar</a></dt>
+ <dd>Eine Kommandozeile für die Entwickler-Werkzeuge.</dd>
+ <dt><a href="/de/docs/Tools/3D_View" title="Tools/3D_View">3D-Untersuchung</a></dt>
+ <dd>3D-Visualisierung der Seite und deren Aufbau. Ganz einfach und übersichtlich.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<div class="column-container">
+<div class="column-half">
+<h2 id="Mobile" name="Mobile">Mobilgeräte</h2>
+
+<p>Hilfreiche und leistungsstarke Werkzeuge für die Entwicklung mit Mobilgeräten.</p>
+
+<dl>
+ <dt><a href="/de/Firefox_OS/Using_the_App_Manager" title="App Manager">App-Manager</a></dt>
+ <dd>Designen und entwickeln von großartigen Apps für Firefox OS.</dd>
+ <dt><a href="/de/docs/Tools/Firefox_OS_Simulator" title="Tools/Firefox_OS_Simulator">Firefox OS Simulator</a></dt>
+ <dd>Starten und debuggen Sie Ihre Firefox OS App auf dem Desktop, ohne ein echtes Firefox OS Handy zu benötigen. Dies spart Ihnen viel Zeit beim Entwickeln.</dd>
+ <dt><a href="/de/docs/Tools/Responsive_Design_View" title="/de/docs/Tools/Responsive_Design_View">Reaktives Design</a></dt>
+ <dd>Sehen Sie sich an, wie Ihre Webseite oder App in verschiedenen Browser-Größen dargestellt wird, ohne dass Sie die Größe Ihres Browser-Fensters verändern müssen.</dd>
+ <dt><a href="/de/docs/Tools/Remote_Debugging/Firefox_for_Android" title="Firefox for Android">Firefox auf Android debuggen</a></dt>
+ <dd>Verbinden Sie die Entwickler-Werkzeuge mit Firefox auf dem Android-Handy.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<h2 id="Performance" name="Performance">Performance</h2>
+
+<p>Finden und beheben von Geschwindigkeitsproblemen.</p>
+
+<dl>
+ <dt><a href="/de/docs/Tools/Profiler" title="Tools/Profiler">JavaScript Profiler</a></dt>
+ <dd>Finden Sie heraus, wo JavaScript Zeit benötigt, um den Code auszuführen. Optimieren Sie so Ihre Scripte.</dd>
+ <dt><a href="/de/docs/Tools/Paint_Flashing_Tool" title="Tools/Paint_Flashing_Tool">Paint Flashing Tool</a></dt>
+ <dd>Hebt die neu gezeichneten Flächen einer Seite hervor.</dd>
+ <dt><a href="/de/docs/Tools/Web_Konsole#DOM-Neuberechnungen" title="Reflow events">Reflow Event Logging</a></dt>
+ <dd>Untersuchen von Reflow-Ereignissen in der Web-Konsole.</dd>
+ <dt><a href="de/docs/Tools/netzwerkanalyse#Netzwerkanalyse_starten" title="Network performance">Laufzeitanalyse</a></dt>
+ <dd>Untersuchen, wie lange Teile der Seite zum Laden brauchen.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<div class="column-container">
+<div class="column-half">
+<h2 id="Den_Browser_debuggen">Den Browser debuggen</h2>
+
+<p>Normalerweise werden die Entwickler-Werkzeuge für Webseiten oder Web Apps verwendet. Es gibt aber auch die Möglichkeit, den Browser als Ganzes zu untersuchen und zu debuggen. Das kann zum Beispiel für die Entwicklung des Browsers selbst oder von Add-ons nützlich sein.</p>
+
+<dl>
+ <dt><a href="/de/docs/Tools/Browser_Console" title="Browser Console">Browser Konsole</a></dt>
+ <dd>Sehen Sie sich die Log-Nachrichten des Browsers selbst und von Add-ons an und führen Sie JavaScript-Code im Kontext des Browsers aus.</dd>
+ <dt><a href="/de/docs/Tools/Browser_Toolbox" title="Browser Toolbox">Browser Toolbox</a></dt>
+ <dd>Verbinden der Entwickler-Werkzeuge mit dem Browser.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<h2 id="Die_Entwickler-Werkzeuge_erweitern">Die Entwickler-Werkzeuge erweitern</h2>
+
+<p>Die Entwickler-Werkzeuge sind so gebaut, dass es möglich ist, diese zu erweitern. Firefox Add-ons haben Zugriff auf die Entwickler-Werkzeuge und auf Komponenten zum Ausbau bestehender Tools sowie zum Hinzufügen neuer Tools. Mit dem Remote Debugging Protokoll ist es möglich, eigene Debugging-Clients und -Server zu entwickeln, um somit Webseiten mit den eigenen Tools zu debuggen.</p>
+
+<dl>
+ <dt><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol" title="Remote Debugging Protocol">Remote Debugging Protokoll</a></dt>
+ <dd>Protokoll zur Verbindung der Entwickler-Werkzeuge mit einem Debugging-Ziel, wie zum Beispiel einer Instanz von Firefox oder einem Firefox OS.</dd>
+ <dt><a href="/de/docs/Tools/Editor" title="Source Editor">Source Editor</a></dt>
+ <dd>Ein eingebauter Code-Editor in Firefox, welcher in Ihr Add-on eingebunden werden kann.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<p>Dieser Bereich stellt einige Ressourcen bereit, die nicht vom Mozilla Developer Tools Team zur Verfügung gestellt, von Webentwicklern jedoch viel genutzt werden. Es sind nur einige Firefox-Add-ons aufgelistet, eine komplette Liste befindet sich in der Kategorie <a href="https://addons.mozilla.org/de/firefox/extensions/web-development/" title="https://addons.mozilla.org/de/firefox/extensions/web-development/">"Webentwicklung" auf addons.mozilla.org</a>.</p>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="https://www.getfirebug.com/" title="Firebug">Firebug</a></dt>
+ <dd>Ein sehr bekanntes und mächtiges Werkzeug für Webentwickler mit einem JavaScript-Debugger, HTML und CSS Inspektor und Editor sowie einer Netzwerkanalyse.</dd>
+ <dt><a href="/de/docs/DOM_Inspector" title="DOM_Inspector">DOM Inspector</a></dt>
+ <dd>Untersuchen und bearbeiten des DOM von Webseiten oder XUL-Fenstern.</dd>
+ <dt><a href="https://addons.mozilla.org/de/firefox/addon/web-developer/" title="Web-Developer">Web Developer</a></dt>
+ <dd>Fügt ein Menü und eine Symbolleiste mit verschiedenen Entwickler-Werkzeugen zum Browser hinzu.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="https://webmaker.org/de/tools/" title="https://webmaker.org/de/tools/">Webmaker Tools</a></dt>
+ <dd>Eine Reihe von Tools für Anfänger im Bereich der Webentwicklung.</dd>
+ <dt><a href="http://www.w3.org/Status.html" title="W3C">W3C Validators</a></dt>
+ <dd>Das W3C stellt einige Tools zur Überprüfung des Webseitencodes bereit. Zum Beispiel Gültigkeitsprüfungen für <a href="http://validator.w3.org/" title="http://validator.w3.org/">HTML</a> und <a href="http://jigsaw.w3.org/css-validator/" title="http://jigsaw.w3.org/css-validator/">CSS</a>.</dd>
+ <dt><a href="http://www.jshint.com/" title="JSHint">JSHint</a></dt>
+ <dd>Analysiert JavaScript-Code.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/de/tools/index/index.html b/files/de/tools/index/index.html
new file mode 100644
index 0000000000..7505b123b1
--- /dev/null
+++ b/files/de/tools/index/index.html
@@ -0,0 +1,9 @@
+---
+title: Index
+slug: Tools/Index
+tags:
+  - Index
+  - Tools
+translation_of: Tools/Index
+---
+<div>{{ToolsSidebar}}</div><p>{{Index("/de/docs/Tools")}}</p>
diff --git a/files/de/tools/json_viewer/index.html b/files/de/tools/json_viewer/index.html
new file mode 100644
index 0000000000..ed3cda58c2
--- /dev/null
+++ b/files/de/tools/json_viewer/index.html
@@ -0,0 +1,26 @@
+---
+title: JSON Viewer
+slug: Tools/JSON_viewer
+tags:
+  - Tools
+translation_of: Tools/JSON_viewer
+---
+<div>{{ToolsSidebar}}</div>
+
+<div class="geckoVersionNote">
+<p>Der JSON-Viewer is neu in Firefox 44.</p>
+
+<p><span class="tlid-translation translation" lang="de"><span title="">Vor Firefox 53 ist der JSON-Viewer standardmäßig nur in der Firefox Developer Edition und Firefox Nightly aktiviert.</span> <span title="">Um diese Funktion in anderen Release-Kanälen zu aktivieren, setzen Sie die Einstellung </span></span> <code>devtools.jsonview.enabled</code> <span class="tlid-translation translation" lang="de"><span title=""> auf <code>true</code>.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="de"><span title="">Ab Firefox 53 ist der JSON-Viewer auch in der Beta und der normalen Release-Version von Firefox standardmäßig aktiviert.</span></span></p>
+</div>
+
+<p><span class="tlid-translation translation" lang="de"><span title="">Firefox enthält einen JSON-Viewer.</span></span> Wenn Sie eine JSON-Datei im Browser öffnen, oder eine Remote-URL mit dem Content-Type application/json aufrufen, wird sie analysiert und die Syntax hervorgehoben. Arrays und Objekte können über das Pfeilsymbol erweitert oder reduziert werden.</p>
+
+<p>{{EmbedYouTube("ktFcevMwYXw")}}</p>
+
+<p><span class="tlid-translation translation" lang="de"><span title="">Der JSON-Viewer bietet ein Suchfeld, mit dem Sie den Inhalt der JSON-Ausgabe filtern können.</span></span></p>
+
+<p>Sie können auch die Rohdaten der JSON-Antwort anzeigen lassen und diese einheitlich formatieren.</p>
+
+<p><span class="tlid-translation translation" lang="de"><span title="">Wenn das Dokument das Ergebnis einer Netzwerkanforderung war, zeigt der Viewer außerdem die Anforderungs- und Antwortheader an.</span></span></p>
diff --git a/files/de/tools/keyboard_shortcuts/index.html b/files/de/tools/keyboard_shortcuts/index.html
new file mode 100644
index 0000000000..fb9fd61b10
--- /dev/null
+++ b/files/de/tools/keyboard_shortcuts/index.html
@@ -0,0 +1,847 @@
+---
+title: Tastaturkürzel
+slug: Tools/Keyboard_shortcuts
+tags:
+  - Tools
+translation_of: Tools/Keyboard_shortcuts
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Auf dieser Seite sind alle Tastaturkürzel der in Firefox integrierten Entwicklerwerkzeuge aufgeführt.</p>
+
+<p>Im ersten Abschnitt befinden sich die Tastaturkürzel, mit denen die einzelnen Werkzeuge geöffnet werden. Im zweiten Abschnitt befinden sich die Tastaturkützel, die im Werkzeugkasten Verwendung finden. Anschließend folgt je ein Abschnitt pro Werkzeug, der die Tastaturkürzel auflistet, die im jeweiligen Werkzeug verwendet werden können.</p>
+
+<p>Da Access-Keys von der Sprachversion abhängen, werden sie auf dieser Seite nicht dokumentiert.</p>
+
+<h2 id="Öffnen_und_Schließen_von_Werkzeugen">Öffnen und Schließen von Werkzeugen</h2>
+
+<p>Diese Tastaturkürzel funktionieren im Browser-Hauptfenster und öffnen das entsprechende Werkzeug. Bei Werkzeugen im Werkzeugkasten schließen sie das Werkzeug, wenn es aktiv ist. Bei Werkzeugen wie der Browser-Konsole, die ein neues Fenster öffnen, müssen Sie das Fenster schließen, um das Werkzeug zu schließen.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">Befehl</th>
+   <th scope="col">Windows</th>
+   <th scope="col">Mac OS X</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">Öffne Werkzeugkasten (öffnet sich mit zuletzt aktiviertem Werkzeug)</th>
+   <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>I</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>Wahltaste</kbd> + <kbd>I</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>I</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Öffne Web-Konsole<a href="#opening-closing-web-console-note"><strong><sup>1</sup></strong></a></th>
+   <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>K</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>Wahltaste</kbd> + <kbd>K</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>K</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Schalte Inspektor ein oder aus</th>
+   <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>C</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>Wahltaste</kbd> + <kbd>C</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>C</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Öffne Debugger</th>
+   <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>S</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>Wahltaste</kbd> + <kbd>S</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>S</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Öffne Stilbearbeitung</th>
+   <td><kbd>Umschalt</kbd> + <kbd>F7</kbd></td>
+   <td><kbd>Umschalt</kbd> + <kbd>F5</kbd><a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td>
+   <td><kbd>Umschalt</kbd> + <kbd>F5</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Öffne Laufzeitanalyse</th>
+   <td><kbd>Umschalt</kbd> + <kbd>F5</kbd></td>
+   <td><kbd>Umschalt</kbd> + <kbd>F5</kbd><a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td>
+   <td><kbd>Umschalt</kbd> + <kbd>F5</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Öffne Netzwerkanalyse</th>
+   <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>E</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>Wahltaste</kbd> + <kbd>E</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>E</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Entwickler-Symbolleiste (an- und ausschalten)</th>
+   <td><kbd>Umschalt</kbd> + <kbd>F2</kbd></td>
+   <td><kbd>Umschalt</kbd> + <kbd>F2</kbd><a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td>
+   <td><kbd>Umschalt</kbd> + <kbd>F2</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Bildschirmgrößen testen (an- und ausschalten)</th>
+   <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>M</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>Wahltaste</kbd> + <kbd>M</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>M</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Öffne Browser-Konsole<a href="#opening-closing-browser-console-note"><sup>2</sup></a></th>
+   <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>J</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>Umschalt</kbd> + <kbd>J</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>J</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Öffne Browser-Werkzeugkasten (neu in Firefox 39)</th>
+   <td><kbd>Strg</kbd> + <kbd>Alt</kbd> + <kbd>Umschalt</kbd> + <kbd>I</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>Opt</kbd> + <kbd>Umschalt</kbd> + <kbd>I</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>Alt</kbd> + <kbd>Umschalt</kbd> + <kbd>I</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Öffne JavaScript-Umgebung</th>
+   <td><kbd>Umschalt</kbd> + <kbd>F4</kbd></td>
+   <td><kbd>Umschalt</kbd> + <kbd>F4</kbd></td>
+   <td><kbd>Umschalt</kbd> + <kbd>F4</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Öffne Entwickler-Umgebung (WebIDE)</th>
+   <td><kbd>Umschalt</kbd> + <kbd>F8</kbd></td>
+   <td><kbd>Umschalt</kbd> + <kbd>F8</kbd></td>
+   <td><kbd>Umschalt</kbd> + <kbd>F8</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Öffne Speicher-Inspektor<a href="#disabled-tools-shortcut"><sup>3</sup></a></th>
+   <td><kbd>Umschalt</kbd> + <kbd>F9</kbd></td>
+   <td><kbd>Umschalt</kbd> + <kbd>F9</kbd></td>
+   <td><kbd>Umschalt</kbd> + <kbd>F9</kbd></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a id="opening-closing-web-console-note" name="opening-closing-web-console-note">1. Im Gegensatz zu den anderen Werkzeugen im Werkzeugkasten, kann dieses Kürzel nicht auch zum Schliessen der Web-Konsole verwendet werden. Das Kürzel fokussiert die Kommandozeile innerhalb der Web-Konsole. Um die Web-Konsole zu schliessen, verwenden Sie das globale Werkzeugkasten-Tastaturkürzel Strg + Umschalt + I (Befehlstaste + Wahltaste + I auf Mac)</a></p>
+
+<p><a id="opening-closing-browser-console-note" name="opening-closing-browser-console-note">2. Vor Firefox 38 wird die Browser Konsole von dieser Tasten-Kombination geschlossen, wenn sie von einem Firefox Fenster verdeckt ist. Beginnend mit Firefox 38 wird eine verdeckte Browser Konsole in den Vordergrund gebracht und fokussiert.</a></p>
+
+<p><a href="/en-US/docs/Tools_Toolbox#Settings" name="disabled-tools-shortcut">3. Das Werkzeug ist in der Voreinstellung nicht freigeschaltet. Die Tasten-Kombination funktioniert also erst, sobald es unter Einstellungen angewählt wird.</a></p>
+
+<h2 id="Werkzeugkasten">Werkzeugkasten</h2>
+
+<div id="toolbox-shortcuts">
+<p>Diese Tastaturkürzel funktionieren immer wenn der Werkzeugkasten geöffnet ist, egal welches Werkzeug aktiv ist.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">Befehl</th>
+   <th scope="col">Windows</th>
+   <th scope="col">Mac OS X</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">Von links nach rechts durch die Werkzeuge blättern</th>
+   <td><kbd>Strg</kbd> + <kbd>]</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>]</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>]</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Von rechts nach links durch die Werkzeuge blättern</th>
+   <td><kbd>Strg</kbd> + <kbd>[</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>[</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>[</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Einstellungen der Entwicklerwerkzeuge anzeigen</th>
+   <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>O</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>Umschalt</kbd> + <kbd>O</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>O</kbd></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="all-toolbox-tools">
+<p>Diese Tastaturkürzel funktionieren bei allen Werkzeugen, die sich im Werkzeugkasten befinden.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">Befehl</th>
+   <th scope="col">Windows</th>
+   <th scope="col">Mac OS X</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">Schrift vergrößern</th>
+   <td><kbd>Strg</kbd> + <kbd>+</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>+</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>+</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Schrift verkleinern</th>
+   <td><kbd>Strg</kbd> + <kbd>-</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>-</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>-</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Schriftgröße zurücksetzen</th>
+   <td><kbd>Strg</kbd> + <kbd>0</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>0</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>0</kbd></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Quelltext-Editor">Quelltext-Editor</h2>
+
+<div id="source-editor">
+<p>In dieser Tabelle befinden sich die Standardtastaturkürzel für den Quelltext-Editor.</p>
+
+<p>Ab Firefox 29 können stattdessen Vim- oder Emacs-Tastaturkürzel verwendet werden. Um diese auszuwählen, öffnen Sie <code>about:config</code>, wählen Sie die Einstellung <code>devtools.editor.keymap </code>und weisen Sie ihr den Wert „vim“ oder „emacs“ zu. Wenn Sie dies tun, werden die ausgewählten Tastaturkürzel für alle Entwicklerwerkzeuge verwendet, die den Quelltext-Editor nutzen.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">Befehl</th>
+   <th scope="col">Windows</th>
+   <th scope="col">Mac OS X</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">Zu Zeile springen</th>
+   <td><kbd>Strg</kbd> + <kbd>J</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>J</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>J</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">In Datei suchen</th>
+   <td><kbd>Strg</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>F</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Weitersuchen</th>
+   <td><kbd>Strg</kbd> + <kbd>G</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>G</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>G</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Alle auswählen</th>
+   <td><kbd>Strg</kbd> + <kbd>A</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>A</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>A</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Ausschneiden</th>
+   <td><kbd>Strg</kbd> + <kbd>X</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>X</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>X</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Kopieren</th>
+   <td><kbd>Strg</kbd> + <kbd>C</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>C</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>C</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Einfügen</th>
+   <td><kbd>Strg</kbd> + <kbd>V</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>V</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>V</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Rückgängig</th>
+   <td><kbd>Strg</kbd> + <kbd>Z</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>Z</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>Z</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Wiederholen</th>
+   <td><kbd>Strg</kbd> + <kbd>Umschalt </kbd> + <kbd>Z</kbd> / <kbd>Strg</kbd> + <kbd>Y</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>Umschalt </kbd> + <kbd>Z</kbd> / <kbd>Befehlstaste</kbd> + <kbd>Y</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>Umschalt </kbd> + <kbd>Z</kbd> / <kbd>Strg</kbd> + <kbd>Y</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Einrücken</th>
+   <td><kbd>Tab</kbd></td>
+   <td><kbd>Tab</kbd></td>
+   <td><kbd>Tab</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Einrücken rückgängig machen</th>
+   <td><kbd>Umschalt</kbd> + <kbd>Tab</kbd></td>
+   <td><kbd>Umschalt</kbd> + <kbd>Tab</kbd></td>
+   <td><kbd>Umschalt</kbd> + <kbd>Tab</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Zeile(n) nach oben verschieben</th>
+   <td><kbd>Alt</kbd> + <kbd>Pfeil oben</kbd></td>
+   <td><kbd>Alt</kbd> + <kbd>Pfeil oben</kbd></td>
+   <td><kbd>Alt</kbd> + <kbd>Pfeil oben</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Zeile(n) nach unten verschieben</th>
+   <td><kbd>Alt</kbd> + <kbd>Pfeil unten</kbd></td>
+   <td><kbd>Alt</kbd> + <kbd>Pfeil unten</kbd></td>
+   <td><kbd>Alt</kbd> + <kbd>Pfeil unten</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Zeile(n) auskommentieren/nicht mehr auskommenrieren</th>
+   <td><kbd>Strg</kbd> + <kbd>/</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>/</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>/</kbd></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Seiteninspektor">Seiteninspektor</h2>
+
+<div id="page-inspector">
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">Befehl</th>
+   <th scope="col">Windows</th>
+   <th scope="col">Mac OS X</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">Inspektor öffnen</th>
+   <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>C</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>Wahltaste</kbd> + <kbd>C</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>C</kbd></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="HTML-Bereich">HTML-Bereich</h3>
+
+<p>Diese Tastaturkürzel funktionieren im <a href="/en-US/docs/Tools/Page_Inspector#HTML_pane" title="/en-US/docs/Tools/Page_Inspector#HTML_pane">HTML-Bereich des Inspektors</a>.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">Befehl</th>
+   <th scope="col">Windows</th>
+   <th scope="col">Mac OS X</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">Ausgewählten Knoten löschen</th>
+   <td><kbd>Löschen</kbd></td>
+   <td><kbd>Löschen</kbd></td>
+   <td><kbd>Löschen</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Löschen eines Knotens rückgängig machen</th>
+   <td><kbd>Strg</kbd> + <kbd>Z</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>Z</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>Z</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Löschen eines Knotens wiederholen</th>
+   <td><kbd>Strg</kbd> + <kbd>Umschalt </kbd> + <kbd>Z</kbd> / <kbd>Strg</kbd> + <kbd>Y</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>Umschalt </kbd> + <kbd>Z</kbd> / <kbd>Befehlstaste</kbd> + <kbd>Y</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>Umschalt </kbd> + <kbd>Z</kbd> / <kbd>Strg</kbd> + <kbd>Y</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Zum nächsten Knoten springen (nur aufgeklappte Knoten)</th>
+   <td><kbd>Pfeil unten</kbd></td>
+   <td><kbd>Pfeil unten</kbd></td>
+   <td><kbd>Pfeil unten</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Zum vorherigen Knoten springen</th>
+   <td><kbd>Pfeil oben</kbd></td>
+   <td><kbd>Pfeil oben</kbd></td>
+   <td><kbd>Pfeil oben</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Aktuellen Knoten aufklappen</th>
+   <td><kbd>Pfeil rechts</kbd></td>
+   <td><kbd>Pfeil rechts</kbd></td>
+   <td><kbd>Pfeil rechts</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Aktuellen Knoten einklappen</th>
+   <td><kbd>Pfeil links</kbd></td>
+   <td><kbd>Pfeil links</kbd></td>
+   <td><kbd>Pfeil links</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Durch Attribute eines Knotens nach vorne blättern</th>
+   <td><kbd>Tab</kbd></td>
+   <td><kbd>Tab</kbd></td>
+   <td><kbd>Tab</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Durch Attribute eines Knotens nach hinten blättern</th>
+   <td><kbd>Umschalt</kbd> + <kbd>Tab</kbd></td>
+   <td><kbd>Umschalt</kbd> + <kbd>Tab</kbd></td>
+   <td><kbd>Umschalt</kbd> + <kbd>Tab</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Ausgewähltes Attribut bearbeiten</th>
+   <td><kbd>Eingabetaste</kbd></td>
+   <td><kbd>Eingabetaste</kbd></td>
+   <td><kbd>Eingabetaste</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Ausgewählten Knoten ein-/ausblenden</th>
+   <td><kbd>H</kbd></td>
+   <td><kbd>H</kbd></td>
+   <td><kbd>H</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Suchleiste im HTML-Bereich auswählen</th>
+   <td><kbd>Strg</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>F</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Als HTML bearbeiten</th>
+   <td><kbd>F2</kbd></td>
+   <td><kbd>F2</kbd></td>
+   <td><kbd>F2</kbd></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="CSS-Bereich">CSS-Bereich</h3>
+
+<p>Diese Tastaturkürzel funktionieren im <a href="/en-US/docs/Tools/Page_Inspector#CSS_pane" title="/en-US/docs/Tools/Page_Inspector#CSS_pane">CSS-Bereich des Inspektors</a>.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">Befehl</th>
+   <th scope="col">Windows</th>
+   <th scope="col">Mac OS X</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">Durch Eigenschaften und Werte nach vorne blättern</th>
+   <td><kbd>Tab</kbd></td>
+   <td><kbd>Tab</kbd></td>
+   <td><kbd>Tab</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Durch Eigenschaften und Werte nach hinten blättern</th>
+   <td><kbd>Umschalt</kbd> + <kbd>Tab</kbd></td>
+   <td><kbd>Umschalt</kbd> + <kbd>Tab</kbd></td>
+   <td><kbd>Umschalt</kbd> + <kbd>Tab</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Ausgewählten Wert um eins erhöhen</th>
+   <td><kbd>Pfeil oben</kbd></td>
+   <td><kbd>Pfeil oben</kbd></td>
+   <td><kbd>Pfeil oben</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Ausgewählten Wert um eins vermindern</th>
+   <td><kbd>Pfeil unten</kbd></td>
+   <td><kbd>Pfeil unten</kbd></td>
+   <td><kbd>Pfeil unten</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Ausgewählten Wert um 10 erhöhen</th>
+   <td><kbd>Umschalt</kbd> + <kbd>Pfeil oben</kbd></td>
+   <td><kbd>Umschalt</kbd> + <kbd>Pfeil oben</kbd></td>
+   <td><kbd>Umschalt</kbd> + <kbd>Pfeil oben</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Ausgewählten Wert um 10 vermindern</th>
+   <td><kbd>Umschalt</kbd> + <kbd>Pfeil unten</kbd></td>
+   <td><kbd>Umschalt</kbd> + <kbd>Pfeil unten</kbd></td>
+   <td><kbd>Umschalt</kbd> + <kbd>Pfeil unten</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Ausgewählten Wert um 0,1 erhöhen</th>
+   <td><kbd>Alt</kbd> + <kbd>Pfeil oben</kbd></td>
+   <td><kbd>Wahltaste</kbd> + <kbd>Pfeil oben</kbd></td>
+   <td><kbd>Alt</kbd> + <kbd>Pfeil oben</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Ausgewählten Wert um 0,1 vermindern</th>
+   <td><kbd>Alt</kbd> + <kbd>Pfeil unten</kbd></td>
+   <td><kbd>Wahltaste</kbd> + <kbd>Pfeil unten</kbd></td>
+   <td><kbd>Alt</kbd> + <kbd>Pfeil unten</kbd></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Debugger">Debugger</h2>
+
+<div id="debugger">
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">Befehl</th>
+   <th scope="col">Windows</th>
+   <th scope="col">Mac OS X</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">Debugger öffnen</th>
+   <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>S</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>Wahltaste</kbd> + <kbd>S</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>S</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Mit dem <a href="/en-US/docs/Tools/Debugger#Script_filter" title="/en-US/docs/Tools/Debugger#Script_filter">Skriptfilter</a> im aktuellen Quelltext suchen</th>
+   <td><kbd>Strg</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>F</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Im aktuellen Quelltext weitersuchen</th>
+   <td><kbd>Eingabetaste</kbd> / <kbd>Pfeil oben</kbd></td>
+   <td><kbd>Eingabetaste</kbd> / <kbd>Pfeil oben</kbd></td>
+   <td><kbd>Eingabetaste</kbd> / <kbd>Pfeil oben</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Im aktuellen Quelltext rückwärts suchen</th>
+   <td><kbd>Umschalt</kbd> + <kbd>Enter</kbd> / <kbd>Pfeil unten</kbd></td>
+   <td><kbd>Umschalt</kbd> + <kbd>Enter</kbd> / <kbd>Pfeil unten</kbd></td>
+   <td><kbd>Umschalt</kbd> + <kbd>Enter</kbd> / <kbd>Pfeil unten</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Mit dem <a href="/en-US/docs/Tools/Debugger#Script_filter" title="/en-US/docs/Tools/Debugger#Script_filter">Skriptfilter</a> in allen Quelltexten suchen</th>
+   <td><kbd>Strg</kbd> + <kbd>Alt</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>Wahltaste</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>Alt</kbd> + <kbd>F</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Nach Skripten nach Namen suchen</th>
+   <td><kbd>Strg</kbd> + <kbd>P</kbd> / <kbd>Strg</kbd> + <kbd>O</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>P</kbd> / <kbd>Strg</kbd> + <kbd>O</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>P</kbd> / <kbd>Strg</kbd> + <kbd>O</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Nach Funktionsdefinitionen suchen</th>
+   <td><kbd>Strg</kbd> + <kbd>D</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>D</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>D</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Variablen filtern, wenn Ausführung pausiert ist</th>
+   <td><kbd>Strg</kbd> + <kbd>Alt</kbd> + <kbd>V</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>Wahltaste</kbd> + <kbd>V</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>Alt</kbd> + <kbd>V</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Ausführung nach Erreichen eines Haltepunkts fortsetzen</th>
+   <td><kbd>F8</kbd></td>
+   <td><kbd>F8</kbd><a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td>
+   <td><kbd>F8</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Schritt darüber</th>
+   <td><kbd>F10</kbd></td>
+   <td><kbd>F10</kbd><a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td>
+   <td><kbd>F10</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Schritt hinein</th>
+   <td><kbd>F11</kbd></td>
+   <td><kbd>F11</kbd><sup><a href="#mac-function-key-note" title="#mac-function-key-note">1</a></sup></td>
+   <td><kbd>F11</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Schritt heraus</th>
+   <td><kbd>Umschalt</kbd> + <kbd>F11</kbd></td>
+   <td><kbd>Umschalt</kbd> + <kbd>F11</kbd><sup><a href="#mac-function-key-note" title="#mac-function-key-note">1</a></sup></td>
+   <td><kbd>Umschalt</kbd> + <kbd>F11</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Haltepunkt an der aktuellen Zeile an-/ausschalten</th>
+   <td><kbd>Strg</kbd> + <kbd>B</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>B</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>B</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Bedingten Haltepunkt an der aktuellen Zeile an-/ausschalten</th>
+   <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>B</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>Umschalt</kbd> + <kbd>B</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>B</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Auswahl als zu beobachtenten Ausdruck hinzufügen</th>
+   <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>E</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>Umschalt</kbd> + <kbd>E</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>E</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Mit dem <a href="/en-US/docs/Tools/Debugger#Script_filter" title="/en-US/docs/Tools/Debugger#Script_filter">Skriptfilter</a> zu Zeile springen</th>
+   <td><kbd>Strg</kbd> + <kbd>L</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>L</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>L</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Mit dem <a href="/en-US/docs/Tools/Debugger#Script_filter" title="/en-US/docs/Tools/Debugger#Script_filter">Skriptfilter</a> suchen</th>
+   <td><kbd>Strg</kbd> + <kbd>O</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>O</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>O</kbd></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a name="mac-function-key-note">1. Standardmäßig wird den Funktionstasten auf einigen Macs eine besondere Funktion zugewiesen, beispielsweise die Änderung der Bildschirmhelligkeit. Informationen finden Sie in diesem </a><a href="http://support.apple.com/kb/HT3399" title="http://support.apple.com/kb/HT3399">Leitfaden zur Verwendung dieser Tasten als Standard-Funktionstasten</a>. Um eine anders zugewiesene Taste als Standard-Funktionstaste zu verwenden, drücken Sie gleichzeitig die <kbd>Fn</kbd>-Taste (um die Laufzeitanalsyse zu öffnen drücken Sie also <kbd>Umschalt</kbd> + <kbd>Fn</kbd> + <kbd>F5</kbd>).</p>
+</div>
+
+<h2 id="Web-Konsole">Web-Konsole</h2>
+
+<div id="web-console">
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">Befehl</th>
+   <th scope="col">Windows</th>
+   <th scope="col">Mac OS X</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">Web-Konsole öffnen</th>
+   <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>K</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>Wahltaste</kbd> + <kbd>K</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>K</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Im Nachrichtenfenster suchen</th>
+   <td><kbd>Strg</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>F</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Tools/Web_Console#Inspecting_objects" title="/en-US/docs/Tools/Web_Console#Inspecting_objects">Bereich „Objektinspektor“</a> leeren</th>
+   <td><kbd>Escape</kbd></td>
+   <td><kbd>Escape</kbd></td>
+   <td><kbd>Escape</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Fokus auf die Kommandozeile setzen</th>
+   <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>K</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>Wahltaste</kbd> + <kbd>K</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>K</kbd></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Kommandozeile">Kommandozeile</h3>
+
+<p>Diese Tastaturkürzel funktionieren in der <a href="/en-US/docs/Tools/Web_Console#The_command_line_interpreter" title="/en-US/docs/Tools/Web_Console#The_command_line_interpreter">Kommandozeile</a>.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">Befehl</th>
+   <th scope="col">Windows</th>
+   <th scope="col">Mac OS X</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">Rückwärts durch die Ausgabe blättern</th>
+   <td><kbd>Bild Auf</kbd></td>
+   <td><kbd>Bild Auf</kbd></td>
+   <td><kbd>Bild Auf</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Vorwärts durch die Ausgabe blättern</th>
+   <td><kbd>Bild Ab</kbd></td>
+   <td><kbd>Bild Ab</kbd></td>
+   <td><kbd>Bild Ab</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Rückwärts durch die <a href="/en-US/docs/Tools/Web_Console#Command_history" title="/en-US/docs/Tools/Web_Console#Command_history">bereits ausgeführten Befehle</a> blättern</th>
+   <td><kbd>Pfeil oben</kbd></td>
+   <td><kbd>Pfeil oben</kbd></td>
+   <td><kbd>Pfeil oben</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row" style="width: 40%;">Vorwärts durch die <a href="/en-US/docs/Tools/Web_Console#Command_history" title="/en-US/docs/Tools/Web_Console#Command_history">bereits ausgeführten Befehle</a> blättern</th>
+   <td><kbd>Pfeil unten</kbd></td>
+   <td><kbd>Pfeil unten</kbd></td>
+   <td><kbd>Pfeil unten</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Zum Zeilenanfang springen</th>
+   <td><kbd>Pos1</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>A</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>A</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Zum Zeilenende sprinten</th>
+   <td><kbd>Ende</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>E</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>E</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Den aktuellen Ausdruck ausführen</th>
+   <td><kbd>Eingabetaste</kbd></td>
+   <td><kbd>Eingabetaste</kbd></td>
+   <td><kbd>Eingabetaste</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Zeilenumbruch für mehrzeilige Ausdrücke einfügen</th>
+   <td><kbd>Umschalt</kbd> + <kbd>Eingabetaste</kbd></td>
+   <td><kbd>Umschalt</kbd> + <kbd>Eingabetaste</kbd></td>
+   <td><kbd>Umschalt</kbd> + <kbd>Eingabetaste</kbd></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Autovervollständigung_Anzeige">Autovervollständigung Anzeige</h3>
+
+<p>Diese Tastaturkürzel funktionieren, wenn die <a href="/en-US/docs/Tools/Web_Console#Autocomplete">Autovervollständigung</a> Anzeige geöffnet ist.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">Befehl</th>
+   <th scope="col">Windows</th>
+   <th scope="col">Mac OS X</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">Auswählen des aktuellen Vorschlags der Autovervollständigung</th>
+   <td><kbd>Tab</kbd></td>
+   <td><kbd>Tab</kbd></td>
+   <td><kbd>Tab</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Anzeige der Autovervollständigung schließen</th>
+   <td><kbd>Escape</kbd></td>
+   <td><kbd>Escape</kbd></td>
+   <td><kbd>Escape</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Bei geöffneter Anzeige den vorherigen Vorschlag der Autovervollständigung auswählen</th>
+   <td><kbd>Pfeil oben</kbd></td>
+   <td><kbd>Pfeil oben</kbd></td>
+   <td><kbd>Pfeil oben</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Bei geöffneter Anzeige den nächsten Vorschlag der Autovervollständigung auswählen</th>
+   <td><kbd>Pfeil unten</kbd></td>
+   <td><kbd>Pfeil unten</kbd></td>
+   <td><kbd>Pfeil unten</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Rückwärts durch die Autovervollständigung-Vorschläge blättern</th>
+   <td><kbd>Bild Auf</kbd></td>
+   <td><kbd>Bild Auf</kbd></td>
+   <td><kbd>Bild Auf</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Vorwärts durch die Autovervollständigung-Vorschläge blättern</th>
+   <td><kbd>Bild Ab</kbd></td>
+   <td><kbd>Bild Ab</kbd></td>
+   <td><kbd>Bild Ab</kbd></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="scratchpad">
+<h2 id="Stilbearbeitung">Stilbearbeitung</h2>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">Befehl</th>
+   <th scope="col">Windows</th>
+   <th scope="col">Mac OS X</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">Stilbearbeitung öffnen</th>
+   <td><kbd>Umschalt</kbd> + <kbd>F7</kbd></td>
+   <td><kbd>Umschalt</kbd> + <kbd>F7</kbd></td>
+   <td><kbd>Umschalt</kbd> + <kbd>F7</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Anzeige der Autovervollständigung öffnen</th>
+   <td><kbd>Strg</kbd> + <kbd>Leertaste</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>Leertaste</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>Leertaste</kbd></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="JavaScript-Umgebung">JavaScript-Umgebung</h2>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">Befehl</th>
+   <th scope="col">Windows</th>
+   <th scope="col">Mac OS X</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">JavaScript-Umgebung öffnen</th>
+   <td><kbd>Umschalt</kbd> + <kbd>F4</kbd></td>
+   <td><kbd>Umschalt</kbd> + <kbd>F4</kbd></td>
+   <td><kbd>Umschalt</kbd> + <kbd>F4</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Quelltext in der JavaScript-Umgebung ausführen</th>
+   <td><kbd>Strg</kbd> + <kbd>R</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>R</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>R</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Quelltext in der JavaScript-Umgebung ausführen und das Ergebnis im <a href="/en-US/docs/Tools/Web_Console#Inspecting_objects" title="/en-US/docs/Tools/Web_Console#Inspecting_objects">Objektinspektor</a> anzeigen</th>
+   <td><kbd>Strg</kbd> + <kbd>I</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>I</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>I</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Quelltext in der JavaScript-Umgebung ausführen und Ergebnis als Kommentar einfügen</th>
+   <td><kbd>Strg</kbd> + <kbd>L</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>L</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>L</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Aktuelle Funktion neu auswerten</th>
+   <td><kbd>Strg</kbd> + <kbd>E</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>E</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>E</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Aktuelle Seite neu laden, dann den Quelltext in der JavaScript-Umgebung ausführen</th>
+   <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>R</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>Umschalt</kbd> + <kbd>R</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>Umschalt</kbd> + <kbd>R</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Inhalt der JavaScript-Umgebung speichern</th>
+   <td><kbd>Strg</kbd> + <kbd>S</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>S</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>S</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Existierende JavaScript-Umgebung öffnen</th>
+   <td><kbd>Strg</kbd> + <kbd>O</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>O</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>O</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Neue JavaScript-Umgebung erstellen</th>
+   <td><kbd>Strg</kbd> + <kbd>N</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>N</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>N</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">JavaScript-Umgebung schließen</th>
+   <td><kbd>Strg</kbd> + <kbd>W</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>W</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>W</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Quelltext in der JavaScript-Umgebung einheitlich formatieren</th>
+   <td><kbd>Strg</kbd> + <kbd>P</kbd></td>
+   <td><kbd>Befehlstaste</kbd> + <kbd>P</kbd></td>
+   <td><kbd>Strg</kbd> + <kbd>P</kbd></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/de/tools/netzwerkanalyse/index.html b/files/de/tools/netzwerkanalyse/index.html
new file mode 100644
index 0000000000..1eed8449f5
--- /dev/null
+++ b/files/de/tools/netzwerkanalyse/index.html
@@ -0,0 +1,126 @@
+---
+title: Netzwerkanalyse
+slug: Tools/netzwerkanalyse
+translation_of: Tools/Network_Monitor
+---
+<div>{{ToolsSidebar}}</div><p>Die Netzwerkanalyse zeigt Ihnen alle Netzwerkanfragen in Firefox  (z. B. wenn er eine Seite lädt oder über <a href="/docs/Web/API/XMLHttpRequest">XMLHttpRequests</a>), wie lange jede Anfrage gedauert hat und Details dazu. Um die Analyseansicht zu öffnen, wählen Sie „Netzwerkanalyse“ im Menü „Web-Entwickler“ (welches ein Untermenü von „Extras“ unter Mac und Linux ist) oder öffnen Sie die Entwickler-Symbolleiste und wechseln Sie zum Reiter „Netzwerk“.</p>
+
+<p>Die Netzwerkanalyse erscheint am unteren Browserrand. Laden Sie die Seite neu, um die Anfrage zu sehen:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7405/nm-overview.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Liste_der_Netzwerkanfragen">Liste der Netzwerkanfragen</h2>
+
+<p>Per Voreinstellung zeigt die Netzwerkanalyse eine Liste aller Netzwerkanfragen, die während des Ladens der Seite gemacht wurden. Jede Anfage steht in einer eigenen Zeile:<br>
+ <img alt="" src="https://mdn.mozillademos.org/files/7419/nm-row.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Felder_der_Netzwerkanfragen">Felder der Netzwerkanfragen</h3>
+
+<p>Jede Zeile zeigt folgendes:</p>
+
+<ul>
+ <li><strong>√</strong>: der zurückgegebene HTTP-Statuscode. Das wird als eingefärbtes Symbol dargestellt: grün steht für Erfolg (Codes mit 2XX), orange steht für Weiterleitung (3XX) und rot steht für Fehler (4XX und 5XX). Ab Firefox 30 wird der exakte Code gleich hinter dem Symbol angezeigt.</li>
+ <li><strong>Methode</strong>: die HTTP-Anfragemethode</li>
+ <li><strong>Datei</strong>: Basisname der angefragten Datei</li>
+ <li><strong>Domain</strong>: Domain des angefragten Pfades</li>
+ <li><strong>Typ</strong>: <code>Content-type</code> der Anfrage</li>
+ <li><strong>Größe</strong>: Größe der Anfrage</li>
+</ul>
+
+<p>Die Symbolleiste oberhalb benennt diese Spalten und das Klicken auf eine Benennung sortiert die Anfragen nach dieser Spalte.</p>
+
+<p>Ab Firefox 30 wird ein Vorschaubild der Grafik angezeigt, wenn es sich bei der Datei und eine Grafik handelt, und beim Drüberfahren mit dem Mauszeiger wird ein Vorschaubild angezeigt:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7403/nm-image-preview.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Zeitverlauf">Zeitverlauf</h3>
+
+<p>Die Anfrageliste zeigt ebenfalls einen Zeitverlauf für die verschiedenen Teilen jeder Anfrage. Jeder Zeitverlauf erhält eine horizontale Position in seiner Reihe relativ zu den anderen Netzwerkanfragen. Damit können Sie sehen, wie lange die Seite insgesamt zum Laden benötigt hat. </p>
+
+<h3 id="Nach_Content-Typen_filtern">Nach Content-Typen filtern</h3>
+
+<p>Am Ende jeder Seite können Sie über die Schaltflächen Filter für die Anfragen erstellen, abhängig vom Content-Typ der Anfrage:<img alt="" src="https://mdn.mozillademos.org/files/7395/nm-filter-by-type.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<div class="geckoVersionNote">
+<p>Das Leeren der Liste der Netzwerkanfragen ist neu seit Firefox 28.</p>
+</div>
+
+<p>Ab Firefox 28 gibt es ganz rechts in der Zeile die Schaltfläche „Leeren“: Wie Sie sicher ahnen, können Sie damit die Liste der Netzwerkanfragen löschen.</p>
+
+<h2 id="Details_zu_den_Netzwerkanfragen">Details zu den Netzwerkanfragen</h2>
+
+<p>Durch einen Klick auf eine Zeile wird eine neue Ansicht im rechten Teil des Netzwerkanalyse-Fensters angezeigt, das Ihnen detaillierte Informationen über die Anfrage bietet.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7393/nm-details-annotated.png" style="display: block; margin-left: auto; margin-right: auto;">Mithilfe der Reiter ganz oben in dieser Ansicht können Sie zwischen verschiedenen Seiten wechseln:</p>
+
+<ul>
+ <li><strong>Kopfzeilen</strong></li>
+ <li><strong>Cookies</strong></li>
+ <li><strong>Parameter</strong></li>
+ <li><strong>Antwort</strong></li>
+ <li><strong>Zeit</strong></li>
+</ul>
+
+<p>Ab Firefox 30 gibt es eine sechste Seite namens <strong>Vorschau</strong>, die nur angezeigt wird, wenn der Content-Typ HTML ist.</p>
+
+<p>Durch Klicken auf das Symbol links von den Reitern schließt diese Ansicht und bringt Sie zurück zur Listenansicht.</p>
+
+<h3 id="Kopfzeilen">Kopfzeilen</h3>
+
+<p>Dieser Reiter listet Basisinformationen über die Anfragen auf und enthält die URL, den Status-Code, die HTTP-Anfrage und die Antwortkopfzeilen, die gesendet wurden:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7397/nm-headers.png" style="display: block; margin-left: auto; margin-right: auto;">Sie können zu den angezeigten Kopfzeilen Filter setzen:</p>
+
+<h3 id="Cookies"><img alt="" src="https://mdn.mozillademos.org/files/7399/nm-headers-filtered.png" style="display: block; margin-left: auto; margin-right: auto;">Cookies</h3>
+
+<p>Dieser Reiter zeigt alle Details zu jedem Cookie, das mit einer Anfrage oder einer Antwort gesendet wurde:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7391/nm-cookies.png" style="display: block; margin-left: auto; margin-right: auto;">So wie bei den Kopfzeilen können Sie auch die angezeigten Cookies filtern.</p>
+
+<h3 id="Parameter">Parameter</h3>
+
+<p>Dieser Reiter zeigt die GET-Parameter und POST-Daten einer Anfrage:</p>
+
+<h3 id="Antwort"><img alt="" src="https://mdn.mozillademos.org/files/7407/nm-params.png" style="display: block; margin-left: auto; margin-right: auto;">Antwort</h3>
+
+<p>Der vollständige Inhalt einer Antwort wird in diesem Reiter angezeigt. Wenn die Antwort HTML, JS oder CSS ist, wird es als Text dargestellt:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7413/nm-response-html.png" style="display: block; margin-left: auto; margin-right: auto;">Wenn die Antwort JSON ist, wird es als untersuchbares Objekt dargestellt:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7421/nm-response-json.png" style="display: block; margin-left: auto; margin-right: auto;">Wenn die Anfrage eine Grafik ist, wird im Reiter eine Vorschau dargestellt:</p>
+
+<h3 id="Zeitverlauf_2"><img alt="" src="https://mdn.mozillademos.org/files/7415/nm-response-image.png" style="display: block; margin-left: auto; margin-right: auto;">Zeitverlauf</h3>
+
+<p>Im Reiter Zeitverlauf wird eine detailliertere und kommentierte Ansicht der Zeitverlaufsleiste dieser Anfrage angezeigt und stellt die Gesamtwartezeit in seinen verschiedenen Abschnitten dar:<img alt="" src="https://mdn.mozillademos.org/files/7417/nm-timings.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Vorschau">Vorschau</h3>
+
+<div class="geckoVersionNote">
+<p>Diese Funktion ist neu ab Firefox 30.</p>
+</div>
+
+<p>Ab Firefox 30 wird der Reiter „Vorschau“ als sechstes Element angezeigt, wenn der Dateityp HTML ist. Es zeigt den HTML-Inhalt:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7401/nm-html-preview.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Netzwerkanalyse_starten">Netzwerkanalyse starten</h2>
+
+<div class="geckoVersionNote">
+<p>Das Werkzeug zum Starten der Netzwerkanalyse ist neu ab Firefox 29.</p>
+</div>
+
+<p>Ab Firefox 29 enthält die Netzwerkanalyse ein Werkzeug zum Starten derselben. Das hilft Ihnen zu zeigen, wie lange der Browser braucht, um die verschiedenen Teile Ihrer Website zu laden.</p>
+
+<p>Klicken Sie zum Starten der Netzwerkanalyse auf das Symbol mit der Stoppuhr in der Symbolleiste am unteren Rand der Anzeige:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7411/nm-performance-button.png" style="display: block; margin-left: auto; margin-right: auto;">(Alternativ dazu und wenn Sie gerade erst die Netzwerkanalyse geöffnet haben und es noch keine Daten enthält, erhalten Sie ein Stoppuhr-Symbol im Hauptfenster.)</p>
+
+<p>Die Website wird dann zweimal geladen: einmal mit einem leeren Browser-Cache und einmal mit einem gefüllten Cache. Dies simuliert den erstmaligen sowie darauffolgende Besuche eines Nutzers auf ihrer Seite.</p>
+
+<p>Die Ergebnisse werden für jeden Testdurchlauf nebeneinander dargestellt – oder vertikal angeordnet, wenn das Fenster schmaler ist:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7409/nm-performance.png" style="display: block; margin-left: auto; margin-right: auto;">Das Ergebnis jedes Testdurchlaufes wird mittels einer Tabelle und einer Tortengrafik zusammengefasst. Die Tabelle gruppiert die Ressourcen nach ihrem Typ und zeigt die einzelnen Gesamtgrößen und den Gesamtzeitverlauf, den das Laden benötigt, an. Die dazugehörige Tortengrafik zeigt die relativen Größen jeder Ressource an.</p>
+
+<p>Um zur Liste der Netzwerkanfragen zurückzukehreren, klicken Sie auf die Schaltfläche „Zurück“ auf der linken Seite.</p>
+
+<p>Wenn Sie auf einen Ausschnitt in der Tortengrafik klicken, werden Sie zum entsprechenden Testdurchlauf weitergeleitet und Filter wird <a href="/docs/Tools/Network_Monitor#Nach_Content-Typen_filtern">nur dieser Ressoure-Typ</a> dargestellt.</p>
diff --git a/files/de/tools/page_inspector/how_to/event_listener_untersuchen/index.html b/files/de/tools/page_inspector/how_to/event_listener_untersuchen/index.html
new file mode 100644
index 0000000000..ac8aca1c8a
--- /dev/null
+++ b/files/de/tools/page_inspector/how_to/event_listener_untersuchen/index.html
@@ -0,0 +1,27 @@
+---
+title: Event Listener untersuchen
+slug: Tools/Page_Inspector/How_to/Event_Listener_untersuchen
+tags:
+  - Guide
+  - Inspector
+  - Werkzeuge
+translation_of: Tools/Page_Inspector/How_to/Examine_event_listeners
+---
+<div>{{ToolsSidebar}}</div><p>Seit Firefox 33 wird ein "ev" Symbol im <a href="/de/docs/Tools/Page_Inspector/UI_Tour#HTML_panel">HTML Panel</a> neben Elementen angezeigt, an die Event Listener gebunden sind:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9955/ev-icon.png" style="display: block; margin-left: auto; margin-right: auto; width: 571px;"></p>
+
+<p>Wird auf das Symbol geklickt, wird ein Popup angezeigt, das alle Event Listener anzeigt, die an dieses Element gebunden sind:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9953/ev-popup.png" style="display: block; margin-left: auto; margin-right: auto; width: 628px;">Jede Zeile beinhaltet:</p>
+
+<ul>
+ <li>einen Pausieren Button: Wird darauf geklickt, gelangt man zum Event Listener innerhalb des <a href="/de/docs/Tools/Debugger">Debuggers</a>, wo ein Haltepunkt für ihn gesetzt werden kann.</li>
+ <li>den Namen des Events.</li>
+ <li>den Namen und die Zeilennummer des Listeners: Wird darauf geklickt, wird die Listenerfunktion im Popup angezeigt.</li>
+ <li>die Information, ob ein Event nach oben steigt (Bubbling) und welche Spezifikation es definiert.</li>
+</ul>
+
+<p>Beachte, dass auch <a class="external external-icon" href="http://api.jquery.com/category/events/">jQuery Events</a> untersucht werden können, nicht nur DOM Events.</p>
+
+<p> </p>
diff --git a/files/de/tools/page_inspector/how_to/index.html b/files/de/tools/page_inspector/how_to/index.html
new file mode 100644
index 0000000000..54b596910d
--- /dev/null
+++ b/files/de/tools/page_inspector/how_to/index.html
@@ -0,0 +1,13 @@
+---
+title: Wie handeln (How to)
+slug: Tools/Page_Inspector/How_to
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Tools/Page_Inspector/How_to
+---
+<div>{{ToolsSidebar}}</div>
+
+<p><span class="seoSummary">Links for various HOW TO's can be found here. These links describe in depth the HOW TO techniques.</span></p>
+
+<p>{{ ListSubpages () }}</p>
diff --git a/files/de/tools/page_inspector/how_to/raster_layout_untersuchen/index.html b/files/de/tools/page_inspector/how_to/raster_layout_untersuchen/index.html
new file mode 100644
index 0000000000..0318a735a4
--- /dev/null
+++ b/files/de/tools/page_inspector/how_to/raster_layout_untersuchen/index.html
@@ -0,0 +1,23 @@
+---
+title: 'CSS Raster Inspektor: Raster-Layout untersuchen'
+slug: Tools/Page_Inspector/How_to/Raster_Layout_untersuchen
+tags:
+  - Anleitung
+  - Inspektor
+  - Raster
+  - Tools
+translation_of: Tools/Page_Inspector/How_to/Examine_grid_layouts
+---
+<div>{{ToolsSidebar}}</div>
+
+<div class="geckoVersionNote">Neu in Firefox 52</div>
+
+<p>Seit den Firefox 52 Entwickler-Tools ist es möglich, sich zur Untersuchung eines CSS-Rasters die Spalten und Zeilen eines Rasters anzeigen zu lassen.</p>
+
+<p>Wenn ein Element mit <code><a href="/en-US/docs/Web/CSS/display">display: grid</a></code> als Raster-Layout definiert wird, wird ein kleines Rastersymbol sichtbar: <img alt="" src="https://mdn.mozillademos.org/files/14524/Screen%20Shot%202016-12-16%20at%2010.51.15%20AM.png" style="height: 22px; margin-bottom: -5px; width: 22px;">. Klicke auf das Icon, um die Struktur des Rasters zu visualisieren:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14526/inspector-grid-overlay.png" style="display: block; height: 893px; margin-left: auto; margin-right: auto; width: 695px;">Die Rasterlinien werden auch dann noch angezeigt, wenn andere Elemente ausgewählt werden. Auswirkung von Änderungen anderer Elemente auf das Raster können so leicht nachverfolgt werden.</p>
+
+<p>{{EmbedYouTube("lzjIe-8WhiQ")}}</p>
+
+<p>Besuche <a href="http://labs.jensimmons.com/">labs.jensimmons.com</a> (Englisch) für viele interessante Raster-Ideen.</p>
diff --git a/files/de/tools/page_inspector/how_to/schriftarten_bearbeitung/index.html b/files/de/tools/page_inspector/how_to/schriftarten_bearbeitung/index.html
new file mode 100644
index 0000000000..0106b4d282
--- /dev/null
+++ b/files/de/tools/page_inspector/how_to/schriftarten_bearbeitung/index.html
@@ -0,0 +1,231 @@
+---
+title: Schriftarten Bearbeitung
+slug: Tools/Page_Inspector/How_to/Schriftarten_Bearbeitung
+translation_of: Tools/Page_Inspector/How_to/Edit_fonts
+---
+<div>{{ToolsSidebar}}</div>
+
+<div> Dieser Artikel bietet einen Überblick über die in den Firefox DevTools verfügbaren Schriftarten-Tools. Dieses Tool enthält mehrere nützliche Funktionen zum Anzeigen und Bearbeiten von Schriftarten, die auf ein im Browser geladenes Dokument angewendet werden, einschließlich der Überprüfung aller auf die Seite angewendeten Schriftarten und der präzisen Anpassung der Werte variabler Schriftachsen.{</div>
+
+<div>{ToolsSidebar}}</div>
+
+<p class="summary">This article provides a tour of the Font tools available in the Firefox DevTools. This tool contains several useful features for viewing and manipulating fonts applied to any document loaded in the browser including inspection of all fonts applied to the page, and precise adjustment of variable font axis values.</p>
+
+<div class="note">
+<p><strong>Note:</strong> The updated Font tools as shown in this article are available in Firefox 63 onwards; if you are using an older version of Firefox the tools will not look or behave quite the same, but they will be similar (most notably the Font Editor will not be available).</p>
+</div>
+
+<h2 id="The_Fonts_tab">The Fonts tab</h2>
+
+<p>The Fonts tab is located on the right-hand side of the <a href="/en-US/docs/Tools/Page_Inspector">Page Inspector</a> when it is docked to the bottom of the screen. When it is docked to the right or left sides of the screen, the Fonts tab appears beneath the HTML pane. To access it:</p>
+
+<ol>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector">Open the Page Inspector</a>.</li>
+ <li>Select the Fonts tab; the last of the tabs shown in the right-hand side of the CSS pane.</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16157/full-fonts-tab-new63.png" style="border: 1px solid black; display: block; height: 663px; margin: 0px auto; width: 500px;"></p>
+
+<p>The Fonts tab has three major sections:</p>
+
+<ul>
+ <li>"Fonts used" by the currently inspected element.</li>
+ <li>The new Fonts Editor. In Firefox 61 and 62, this section does not exist.</li>
+ <li>"All fonts on page" — This section lists all of the fonts in use on the page. In Firefox 61 and 62, this area is labeled "Other fonts in page" and doesn't include the fonts mentioned in the "Fonts used" section.</li>
+</ul>
+
+<h2 id="Fonts_used">Fonts used</h2>
+
+<p>The top section of the Font Editor shows the fonts used by the currently inspected element, grouped by font family.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16150/fonts-used.png" style="border-style: solid; border-width: 1px; display: block; height: 114px; margin: 0px auto; width: 400px;"></p>
+
+<p>Fonts are considered "used" when there is text content in the inspected element that has the font applied to it. Empty elements will not have any fonts used and will display the message "No fonts were found for the current element."</p>
+
+<p>Fonts will be included in this section for one of the following reasons:</p>
+
+<ul>
+ <li>They are listed in the element's <code>font-family</code> CSS declaration value.</li>
+ <li>They are applied to the element as part of the browser's default styling (Times New Roman for most browsers), and no author-defined font has been supplied.</li>
+ <li>They are used by a descendant of the inspected element, for example, when it is a container for other elements which have text content with fonts applied.</li>
+ <li>They are system fallback fonts used when nothing from the <code>font-family</code> CSS declaration has been applied.</li>
+</ul>
+
+<h2 id="Fonts_Editor">Fonts Editor</h2>
+
+<p>Firefox 63 adds the Font Editor — a new area below "Fonts used" with additional controls for editing the fonts’ characteristics.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16159/fonts-editor-closeup-63-cropped.png" style="border-style: solid; border-width: 1px; display: block; height: 134px; margin: 0px auto; width: 500px;"></p>
+
+<p>For standard (static) fonts, you will be able to change the settings listed below</p>
+
+<h3 id="Size">Size</h3>
+
+<p>The {{cssxref("font-size")}} for the inspected element.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16160/font-size_cropped.png" style="border-style: solid; border-width: 1px; display: block; height: 26px; margin: 0px auto; width: 360px;"></p>
+
+<p>This can be set using <code>em</code>, <code>rem</code>, <code>%</code>, <code>px</code>, <code>vh</code>, or <code>vw</code> units. You can select values using the slider or enter a numeric value directly into the text box.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you want to use a different unit such as <code>pt</code> for <code>font-size</code> or <code>line-height</code>, you can set the property value applied to the currently inspected element to use that unit via the <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Rules_view">rules view</a>, and the font editor will automatically pick it up and make it available in the associated units dropdown menu.</p>
+</div>
+
+<p>Changing the unit of measure converts the numerical value to its equivalent in the new unit, so the same computed value is maintained.</p>
+
+<p>Example: If <code>1rem</code> is equivalent to 10 pixels, when you change the unit of measurement from <code>rem</code> to <code>px</code>, <code>2rem</code> becomes <code>20px</code>.</p>
+
+<h3 id="Line_height">Line height</h3>
+
+<p>The {{cssxref("line-height")}} of the inspected element.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16166/line-height_cropped.png" style="border-style: solid; border-width: 1px; display: block; height: 31px; margin: 0px auto; width: 360px;"></p>
+
+<p>This can be set using unitless, <code>em</code>, <em>%</em>, or <code>px</code> units. You can select values using the slider or enter a numeric value directly into the text box.</p>
+
+<p>Changing the unit of measure changes the value relative to the <code>font-size</code> setting.</p>
+
+<p>Example: If the font is 20 pixels high and the line-height is <code>1.5em</code>, when you change the unit of measure from <code>em</code> to <code>px</code>, the value will become <code>30px</code>.</p>
+
+<h3 id="Weight">Weight</h3>
+
+<p>The {{cssxref("font-weight")}} for the inspected element.</p>
+
+<p><img alt="Font weight setting" src="https://mdn.mozillademos.org/files/16162/font-weight_cropped.png" style="border-style: solid; border-width: 1px; display: block; height: 31px; margin: 0px auto; width: 360px;"></p>
+
+<p>You can select values using the slider or enter a numeric value directly into the text box. For non-variable fonts the slider ranges from 100 to 900 in increments of 100.</p>
+
+<div class="note">
+<p><strong>Note</strong>: For <a href="/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">variable fonts</a> (see below) that define a <code>wght</code> variation axis, this range is custom.</p>
+</div>
+
+<h3 id="Italic">Italic</h3>
+
+<p>The {{cssxref("font-style")}} for the inspected element.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16163/font-italic_cropped.png" style="border-style: solid; border-width: 1px; display: block; height: 31px; margin: 0px auto; width: 360px;"></p>
+
+<p>This setting toggles between <code>italic</code> and <code>normal</code> values for the <code>font-style</code> CSS property.</p>
+
+<div class="note">
+<p><strong>Note</strong>: As you change settings, Firefox applies inline styles to the element to make the changes instantly visible on the page.</p>
+</div>
+
+<h2 id="All_fonts_on_page">All fonts on page</h2>
+
+<p>The remaining area, at the bottom of the Fonts tab, shows an expandable list of all of the fonts in use on the page.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16158/all-fonts-on-page_new63.png" style="border: 1px solid black; display: block; height: 641px; margin: 0px auto; width: 500px;"></p>
+
+<p>The list is useful because you can easily determine whether a font is a web font or a font hosted on your system.</p>
+
+<p>Each font listed in this section shows you:</p>
+
+<ul>
+ <li>The <code>font-family</code> identifier and full name of the font.</li>
+ <li>The URL to the font file in the case of web fonts not available on your system, or "System" in the case of fonts loaded from your computer (either default system fonts, or web fonts that you've also got installed on your system). You can copy the URL to the font file by clicking on the icon to the right of the URL.</li>
+ <li>The {{cssxref("@font-face")}} descriptor that loads the font into the page, in the case of web fonts. The descriptor is expandable — when opened it shows its full syntax as defined in the stylesheet.</li>
+ <li>A text sample, to give you an idea of what the font looks like when rendered. The default text for the sample is "Abc" but the preview text can be edited by clicking on the input field at the top of the section and entering a new value. Once entered, all of the sample text will be set to the same custom value.</li>
+</ul>
+
+<h2 id="Variable_font_support_in_Firefox_Developer_Tools">Variable font support in Firefox Developer Tools</h2>
+
+<p>Firefox 62 added support for variable fonts and Firefox 63 features support for editing the properties of variable fonts in the Font Editor.</p>
+
+<h3 id="What_are_variable_fonts">What are variable fonts?</h3>
+
+<p><a href="/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">Variable Fonts</a>, or <strong>OpenType Font Variations</strong>, define a new font file format that allows the font designer to include multiple variations of a typeface inside a single font file. That means you no longer have to apply several different web fonts to a single page to represent a complete typeface for which a variable font is available, provided it includes the desired values for the different characteristics you want to vary.</p>
+
+<p>Variable fonts make it easy to vary font characteristics in a much more granular fashion because their allowable ranges are defined by <strong>axes of variation</strong> (see <a href="/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide#Introducing_the_'variation_axis'">Introducing the 'variation axis'</a> for more information). For example, {{cssxref("font-weight")}} can be set to any value between 1 and 1000 in variable fonts (although it is not guaranteed that a variable font will support this entire range).</p>
+
+<p>There are several registered axes. Although it isn't required that these axes be defined for every font, if the font designer <em>does </em>implement a registered axis, its behavior <em>must</em> follow the defined behavior.</p>
+
+<p>All variable font axes have a four-character axis tag. The CSS <code>{{cssxref("font-variation-settings")}}</code> property uses the tag as part of the key-value pair. For example, to set {{cssxref("font-weight")}} using <code>font-variation-settings</code>, you could do something like this:</p>
+
+<pre class="brush: css notranslate">font-variation-settings: "wght" 350;</pre>
+
+<p>However, you should only use <code>font-variation-settings</code> as a last resort if there is no basic font property available for setting those characteristic values (e.g. custom axes).</p>
+
+<div class="note">
+<p><strong>Note</strong>: font characteristics set using <code>font-variation-settings</code> will always override those set using the corresponding basic font properties, e.g. <code>font-weight</code>, no matter where they appear in the cascade.</p>
+</div>
+
+<p>Here are the registered axes along with their corresponding CSS properties:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Axis Tag</th>
+   <th scope="col">CSS Property</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>"wght"</td>
+   <td>{{cssxref("font-weight")}}</td>
+  </tr>
+  <tr>
+   <td>"wdth"</td>
+   <td>{{cssxref("font-stretch")}}</td>
+  </tr>
+  <tr>
+   <td>"slnt" (slant)</td>
+   <td>{{cssxref("font-style")}}: <code>oblique + angle</code></td>
+  </tr>
+  <tr>
+   <td>"ital"</td>
+   <td>{{cssxref("font-style")}}: <code>italic</code></td>
+  </tr>
+  <tr>
+   <td>"opsz"</td>
+   <td>
+    <p>{{cssxref("font-optical-sizing")}}</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Any axis that is not on the list of registered axes is considered a custom axis. Custom axes do not have corresponding CSS font properties. Font designers can define whatever axis they want; each one needs to be given a unique four-character tag. The axis name and its range is up to the font designer.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Registered axis tags are identified using lower-case tags, whereas custom axes should be given upper-case tags. Note that font designers aren't forced follow this practice in any way, and some won't. The important takeaway here is that axis tags are case-sensitive.</p>
+</div>
+
+<div class="warning">
+<p><strong>Warning</strong>: In order to use variable fonts, you need to make sure that your operating system is up to date. For example Linux OSes need the latest Linux Freetype version, and macOS prior to 10.13 does not support variable fonts. If your operating system is not up to date, you will not be able to use variable fonts in web pages or the Firefox Developer Tools.</p>
+</div>
+
+<h4 id="Working_with_Variable_fonts_in_the_Font_Editor">Working with Variable fonts in the Font Editor</h4>
+
+<p>If the inspected element uses a variable font, the Fonts tab shows the axes that have been implemented for that particular font, providing control to alter the value of each one. This is very useful for quickly finding out what axes are available in a particular font — they can vary quite dramatically as font designers can implement basically anything they like.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16164/v_fonts_example_cropped.png" style="border: 1px solid black; display: block; height: 379px; margin: 0px auto; width: 350px;"></p>
+
+<p>You can adjust the axes individually or, if the font designer has included defined instances, you can select one from the "Instance" drop-down list and view the updates live on your page.</p>
+
+<p>Here are a couple of examples of fonts with different axes defined:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16167/v_fonts-examples_cropped.png" style="display: block; height: 29px; margin: 0px auto; width: 700px;"></p>
+
+<p>In the following example, you can see that the font "Cheee Variable" includes settings for Yeast and Gravity. These are custom axes defined by the font designer.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16169/change_font_before_cropped.png" style="border: 1px solid black; display: block; height: 329px; margin: 0px auto; width: 889px;"></p>
+
+<p>The first image shows the font as it is used on the page with default settings. The second image shows the same font after selecting the "Hi Yeast Hi Gravity" variation.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16168/change_font_after_cropped.png" style="border: 1px solid black; display: block; height: 329px; margin: 0px auto; width: 897px;"></p>
+
+<ul>
+</ul>
+
+<h2 id="Tips">Tips</h2>
+
+<p>Finally, here are a few tips for making effective use of the Fonts tab:</p>
+
+<ul>
+ <li>When using the Page Inspector's <a href="/en-US/docs/Tools/Page_Inspector/3-pane_mode">3-pane mode</a>, you can view the CSS rules for the inspected element simultaneously alongside the Fonts tab.</li>
+ <li>If you hover over the {{cssxref("font-family")}} property in the Rules view, a tooltip shows a sample of the font:
+  <p><img alt="" src="https://mdn.mozillademos.org/files/16170/fonts_62_tooltip_cropped.png" style="border: 1px solid black; display: block; height: 153px; margin: 0px auto; width: 450px;"></p>
+ </li>
+ <li>You'll also notice in the above screenshot that the font in the <code>font-family</code> font stack that is actually applied to the inspected element is underlined. This makes it easy to see exactly what is being applied where, when font stacks are specified.</li>
+</ul>
diff --git a/files/de/tools/paint_flashing_tool/index.html b/files/de/tools/paint_flashing_tool/index.html
new file mode 100644
index 0000000000..7fca9a3167
--- /dev/null
+++ b/files/de/tools/paint_flashing_tool/index.html
@@ -0,0 +1,94 @@
+---
+title: Paint Flashing Tool
+slug: Tools/Paint_Flashing_Tool
+translation_of: Tools/Paint_Flashing_Tool
+---
+<div>{{ToolsSidebar}}</div><p>The paint flashing tool, when activated, highlights the part of a page that the browser needs to repaint in response to some input: for example, the user moving the mouse or scrolling. With the help of this tool you can figure out whether your website is causing the browser to repaint more than it needs to. Because repaints can be performance-intensive operations, eliminating unnecessary repaints can improve your website's responsiveness.</p>
+
+<h2 id="Repaints_and_responsiveness">Repaints and responsiveness</h2>
+
+<p>When the browser renders a web page it parses the HTML and CSS, determines how to lay it out, and then paints it to actually display the content on the screen. Whenever an event happens that might change a visible part of the web page then the browser must repaint some portion of the page. For example, a repaint will be needed if the user scrolls the page or moves the mouse pointer over an element with a <a href="/en-US/docs/Web/CSS/:hover" title="/en-US/docs/Web/CSS/:hover"><code>:hover</code></a> pseudo-class that changes the element's style.</p>
+
+<p>Repainting can be an expensive operation, so the browser tries to minimise the amount of repainting that it needs to do. It tries to work out which parts of the screen are "damaged" and repaint only those. The browser also splits its model of the page into layers that it expects will be updated independently of each other. Layers are painted independently and then composited, so a change in the appearance of one layer does not trigger a repaint in any other layers, and when only the relation of two layers changes (in an animation, for example) no repaints are required at all.</p>
+
+<p>The choices made by a web developer can hinder the browser here, causing it to trigger more repaints, and for more of the screen, than necessary. This can then cause a site to be slow responding to user input (also known as "janky"). That's where the paint flashing tool helps: by showing you the areas that the browser repaints in response to an event, you can see whether it is repainting more than it needs to.</p>
+
+<h2 id="Using_the_paint_flashing_tool">Using the paint flashing tool</h2>
+
+<p>There are two ways to switch on paint flashing:</p>
+
+<ul>
+ <li>open the <a href="/en-US/docs/Tools_Toolbox" title="/en-US/docs/Tools_Toolbox">Toolbox</a>, then click the icon labeled "Highlight painted area":</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5929/paint-flashing-open-from-toolbox.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<ul>
+ <li>activate the <a href="/en-US/docs/Tools/GCLI" title="/en-US/docs/Tools/GCLI">Developer Toolbar</a> and type "paintflashing on", then press the Enter key:</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5931/paint-flashing-open-from-toolbar.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>Then try using the page. After moving the mouse around and scrolling a bit, the above page looks like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5935/paint-flashing-activated.png" style="display: block; margin-left: auto; margin-right: auto;">In this example, there are two main sources of repaints:</p>
+
+<ul>
+ <li>moving the mouse over links makes the browser repaint them, because they have a style applied using the <a href="/en-US/docs/Web/CSS/:hover" title="/en-US/docs/Web/CSS/:hover"><code>:hover</code></a> pseudo-class</li>
+ <li>scrolling makes the browser repaint the new part of the page coming into view at the bottom of the screen, and also the scrollbar at the top-right</li>
+</ul>
+
+<p>To deactivate paint flashing, click the "Highlight painted area" icon in the Toolbox again, or type "paintflashing off" into the Developer Toolbar and press Enter.</p>
+
+<h2 id="Example_CSS_transitions">Example: CSS transitions</h2>
+
+<p>One area where implementation choices can affect repaint efficiency is in <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions" title="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">CSS transitions</a>. The example below shows two different ways to move an element using a CSS transition. The first way applies the transition to the element's <a href="/en-US/docs/Web/CSS/margin-left" title="/en-US/docs/Web/CSS/margin-left"><code>margin-left</code></a>, while the second way moves the element using the <a href="/en-US/docs/Web/CSS/transform" title="/en-US/docs/Web/CSS/transform"><code>transform</code></a> property.</p>
+
+<pre class="brush: html">&lt;body&gt;
+    &lt;div id="container"&gt;
+      &lt;div class="moving-box" id="moving-box-left-margin"&gt;Transition using margin-left&lt;/div&gt;
+      &lt;div class="moving-box" id="moving-box-transform"&gt;Transition using transform&lt;/div&gt;
+    &lt;/div&gt;
+&lt;/body&gt;
+
+</pre>
+
+<pre class="brush: css">#container {
+  border: 1px solid;
+}
+
+.moving-box {
+  height: 20%;
+  width:20%;
+  margin: 2%;
+  padding: 2%;
+  background-color: blue;
+  color: white;
+  font-size: 24px;
+}
+
+#moving-box-left-margin {
+  transition: margin-left 4s;
+}
+
+#moving-box-transform {
+  transition: transform 4s;
+}
+
+body:hover #moving-box-left-margin{
+  margin-left: 74%;
+}
+
+body:hover #moving-box-transform {
+  transform: translate(300%);
+}</pre>
+
+<p>To see the transition, move the mouse into the space below:</p>
+
+<p>{{ EmbedLiveSample('Example.3A_CSS_transitions', 600, 300) }}</p>
+
+<p>Now switch paint flashing on, and try it again. You should see that the <code>margin-left</code> version triggers a series of repaints as the element moves, while the <code>transform</code> version only causes repaints in the start and end positions.</p>
+
+<p>Why? Well, when you use <code>transform</code>, the browser creates a separate layer for the element. So when the element is moved, all that's changed is the relation of the two layers to each other, which is handled in composition: neither layer needs a repaint.</p>
+
+<p>In this case, with a simple style, the extra repaints don't make much of a difference. But if the style were computationally expensive to paint, they might. It's difficult to know what optimizations the browser will make to minimize repaints, and they are subject to change from one version to the next. So testing your website with the paint flashing tool helps ensure that it's still performing optimally.</p>
diff --git a/files/de/tools/performance/index.html b/files/de/tools/performance/index.html
new file mode 100644
index 0000000000..21a61a4805
--- /dev/null
+++ b/files/de/tools/performance/index.html
@@ -0,0 +1,96 @@
+---
+title: Performance
+slug: Tools/Performance
+translation_of: Tools/Performance
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Mit dem Leistungstool erhalten Sie Einblick in die allgemeine Reaktionsfähigkeit, JavaScript und Layoutleistung Ihrer Website. Mit dem Leistungstool erstellen Sie über einen bestimmten Zeitraum eine Aufnahme oder ein Profil Ihrer Website. Das Tool zeigt Ihnen dann einen <a href="/de/docs/Tools/Performance/UI_Tour#Waterfall_overview">Überblick</a> über die Aktivitäten des Browsers zum Rendern Ihrer Website über das Profil und eine Grafik der <a href="/de/docs/Tools/Performance/Frame_rate">Bildrate</a> über dem Profil.</p>
+
+<p>Sie erhalten vier Unterwerkzeuge, mit denen Sie Aspekte des Profils genauer untersuchen können:</p>
+
+<ul>
+ <li>Der <a href="/de/docs/Tools/Performance/Waterfall">Wasserfall</a> zeigt die verschiedenen Vorgänge, die der Browser ausgeführt hat, z. B. die Ausführung von Layout, JavaScript, Repaints und Garbage Collection</li>
+ <li>Der <a href="/de/docs/Tools/Performance/Call_Tree">Aufrufbaum</a> zeigt die JavaScript-Funktionen, in denen der Browser die meiste Zeit verbracht hat</li>
+ <li>Das <a href="/de/docs/Tools/Performance/Flame_Chart">Flammendiagramm</a> zeigt den JavaScript-Aufrufstack über den Verlauf der Aufzeichnung</li>
+ <li>Die <a href="/de/docs/Tools/Performance/Allocations">Allokationsansicht</a> zeigt die von Ihrem Code im Verlauf der Aufzeichnung vorgenommenen Heap-Zuordnungen an. Diese Ansicht wird nur angezeigt, wenn Sie in den Einstellungen des Leistungstools die Option "Datensatzzuordnungen" aktiviert haben.</li>
+</ul>
+
+<p>{{EmbedYouTube("WBmttwfA_k8")}}</p>
+
+<hr>
+<h2 id="Erste_Schritte">Erste Schritte</h2>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/de/docs/Tools/Performance/UI_Tour">UI Tour</a></dt>
+ <dd>
+ <p>Um sich im Performance-Tool zurechtzufinden, finden Sie hier eine kurze Einführung in die Benutzeroberfläche.</p>
+ </dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/de/docs/Tools/Performance/How_to">How to</a></dt>
+ <dd>Grundlagen: Öffnen Sie das Tool, erstellen, speichern, laden und konfigurieren Sie Aufnahmen</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="Komponenten_des_Performance-Tools">Komponenten des Performance-Tools</h2>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/de/docs/Tools/Performance/Frame_rate">Bildrate</a></dt>
+ <dd>Understand your site's overall responsiveness.</dd>
+ <dt><a href="/de/docs/Tools/Performance/Call_Tree">Aufruf-Baum</a></dt>
+ <dd>Find bottlenecks in your site's JavaScript.</dd>
+ <dt><a href="/de/docs/Tools/Performance/Allocations">Allokationen</a></dt>
+ <dd>See the allocations made by your code over the course of the recording.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/de/docs/Tools/Performance/Waterfall">Wasserfall</a></dt>
+ <dd>Understand the work the browser's doing as the user interacts with your site.</dd>
+ <dt><a href="/de/docs/Tools/Performance/Flame_Chart">Flammendiagramm</a></dt>
+ <dd>See which JavaScript functions are executing, and when, over the course of the recording.</dd>
+ <dd> </dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="Scenarios">Scenarios</h2>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/de/docs/Tools/Performance/Scenarios/Animating_CSS_properties">Animieren von CSS-Eigenschaften</a></dt>
+ <dd>Uses the Waterfall to understand how the browser updates a page, and how animating different CSS properties can affect performance.</dd>
+ <dd> </dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/de/docs/Tools/Performance/Scenarios/Intensive_JavaScript">Intensives JavaScript</a></dt>
+ <dd>Uses the frame rate and Waterfall tools to highlight performance problems caused by long-running JavaScript, and how using workers can help in this situation.</dd>
+</dl>
+</div>
+</div>
+
+<p> </p>
+
+<div class="column-half">
+<dl>
+ <dd> </dd>
+</dl>
+</div>
+
+<p> </p>
diff --git a/files/de/tools/remote_debugging/debugging_firefox_desktop/index.html b/files/de/tools/remote_debugging/debugging_firefox_desktop/index.html
new file mode 100644
index 0000000000..0b90f7db95
--- /dev/null
+++ b/files/de/tools/remote_debugging/debugging_firefox_desktop/index.html
@@ -0,0 +1,38 @@
+---
+title: Debugging Firefox Desktop
+slug: Tools/Remote_Debugging/Debugging_Firefox_Desktop
+translation_of: Tools/Remote_Debugging/Debugging_Firefox_Desktop
+---
+<p>{{draft}}</p>
+
+<p>{{ToolsSidebar}}</p>
+
+<p>This guide explains how you can use the Firefox Developer Tools to debug a different instance of desktop Firefox running on the same machine. In this guide, the instance of Firefox being debugged is called the <em>debuggee</em>, and the instance of Firefox doing the debugging is called the <em>debugger</em>.</p>
+
+<h2 id="Enable_remote_debugging">Enable remote debugging</h2>
+
+<p>First, you'll need to ensure that both debugger and debuggee have the "Enable browser chrome and add-on debugging toolboxes" and "Enable remote debugging" settings checked in the <a href="/en-US/docs/Tools/Tools_Toolbox#Settings">Developer Tools Settings</a>. If you're using <a href="/en-US/Firefox/Developer_Edition">Firefox Developer Edition</a>, they are checked by default.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16905/remote_debug_settings.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p>
+
+<p>You only need to do this once: the setting values persist across restarts.</p>
+
+<h2 id="Start_the_debugger_server">Start the debugger server</h2>
+
+<p>Next, you need to start the debugger server in the debuggee.</p>
+
+<p>Run the debuggee from the command line, passing it the <code>--start-debugger-server</code> option:</p>
+
+<pre class="notranslate">/path/to/firefox --start-debugger-server</pre>
+
+<p>Passed with no arguments, --start-debugger-server makes the debugger server listen on port 6000. To use a different port, pass the desired port number:</p>
+
+<pre class="notranslate">/path/to/firefox --start-debugger-server 1234</pre>
+
+<p>Note: in Windows, the <code>start-debugger-server</code> call will only have one dash:</p>
+
+<pre class="notranslate">firefox.exe -start-debugger-server 1234</pre>
+
+<div class="note">
+<p><strong>Note</strong>: By default, and for security reasons, the <code>devtools.debugger.force-local</code> option is set. If you want to debug a Firefox instance from an external machine, you can change this option, but only do this on a trusted network or set a strong firewall rule to lock down which machines can access it.</p>
+</div>
diff --git a/files/de/tools/remote_debugging/firefox_for_android/index.html b/files/de/tools/remote_debugging/firefox_for_android/index.html
new file mode 100644
index 0000000000..f21c00f2e2
--- /dev/null
+++ b/files/de/tools/remote_debugging/firefox_for_android/index.html
@@ -0,0 +1,136 @@
+---
+title: Externes Debugging mit Firefox for Android
+slug: Tools/Remote_Debugging/Firefox_for_Android
+translation_of: Tools/Remote_Debugging/Firefox_for_Android
+---
+<div>{{ToolsSidebar}}</div><p>Diese Anleitung erklärt, wie man <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_usage_tips/Remote_debugging">remote debugging</a> verwendet, um Code unter <a href="/en-US/docs/Mozilla/Firefox_for_Android">Firefox for Android</a> über USB zu inspizieren und zu debuggen.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5833/remote-debugging-overview.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>Diese Anleitung ist in zwei Teile aufgeteilt: im ersten Teil, "Voraussetzungen", werden die Voraussetzungen erklärt, welche aber nur einmal durchgeführt werden müssen. Im zweiten Teil, "Verbinden", wird erklärt, wie man zum Gerät verbindet. Dieser zweite Teil muss immer wieder durchgeführt werden.</p>
+
+<h2 id="Voraussetzungen">Voraussetzungen</h2>
+
+<p>Um zu beginnen, benötigen Sie folgendes:</p>
+
+<ul>
+ <li>einen Computer oder Laptop mit Firefox</li>
+ <li>ein Android-Mobilgerät mit Firefox for Android installiert </li>
+ <li>ein USB-Kabel, um das Mobilgerät mit dem Computer zu verbinden</li>
+</ul>
+
+<h3 id="ADB_Installation">ADB Installation</h3>
+
+<p>Als nächstes müssen Sie das Mobilgerät und den Computer so einrichten, dass die beiden miteinander kommunizieren können. Dafür wird das <a href="https://developer.android.com/tools/help/adb.html" title="https://developer.android.com/tools/help/adb.html">adb</a> Kommandozeilen-Programm verwendet.</p>
+
+<h4 class="note" id="Auf_dem_Android-Mobilgerät">Auf dem Android-Mobilgerät</h4>
+
+<ul>
+ <li><a href="http://developer.android.com/guide/developing/device.html#setting-up" title="http://developer.android.com/guide/developing/device.html#setting-up">USB Debugging aktivieren (nur Schritt 2 von diesem Link)</a>.</li>
+ <li>Schliessen Sie das Mobilgerät über USB an den Computer an</li>
+</ul>
+
+<h4 class="note" id="Auf_dem_ComputerLaptop">Auf dem Computer/Laptop</h4>
+
+<ul>
+ <li>Installieren Sie die passende <a href="http://developer.android.com/sdk/index.html" title="http://developer.android.com/sdk/index.html">Android SDK</a> Version für Ihr Mobilgerät.</li>
+ <li>Installieren die <a href="http://developer.android.com/sdk/installing.html#components" title="http://developer.android.com/sdk/installing.html#components">Android Platform Tools</a> mit Hilfe des Android SDK.</li>
+ <li>Android Platform Tools installiert adb im "platform-tools" Ordner im Android-SDK-Installationspfad. Stellen Sie sicher, dass der "platform-tools" Ordner in der PATH-Variable eingetragen ist.</li>
+</ul>
+
+<p>Um dies zu testen, können Sie folgenden Befehl in  der Kommandozeile eingeben:</p>
+
+<pre>adb devices</pre>
+
+<p>Nun sehen Sie eine Ausgabe analog zu folgender:</p>
+
+<pre>List of devices attached
+51800F220F01564 device
+</pre>
+
+<p>(Die lange Hex-Zeichenkette wird verschieden sein.)</p>
+
+<p>Wenn diese Ausgabe korrekt ist, wurde ADB korrekt installiert und ADB konnte das Mobilgerät korrekt erkennen.</p>
+
+<p>Falls unter OSX die Zeile unterhalb von "List of devices attached" leer sein sollte, könnte es an EasyTether liegen:</p>
+
+<blockquote>
+<p>ADB on Mac OS X stops recognizing the attached device after installing EasyTether driver. Use kextload/kextunload to unload from memory the EasyTetherUSBEthernet.kext kernel extension manually. It is in /System/Library/Extensions/</p>
+
+<p>(Aus der Webseite von EasyTether)</p>
+</blockquote>
+
+<h3 id="Remote_Debugging_aktivieren">Remote Debugging aktivieren</h3>
+
+<p>Als nächstes muss "Remote Debugging" auf dem Mobilgerät und dem Computer aktiviert werden.</p>
+
+<h4 id="Firefox_for_Android_24_und_früher">Firefox for Android 24 und früher</h4>
+
+<p>Um "Remote Debugging" auf dem Mobilgerät zu aktivieren, muss der Wert der <code>devtools.debugger.remote-enabled</code> Einstellung auf <code>true</code> gesetzt werden.</p>
+
+<p>Gehen Sie nach <code>about:config</code> in Firefox for Android, tippen Sie "devtools" ins Suchfeld und drücken Sie auf den Suchen-Button. Nun sehen Sie alle devtools-Einstellungen. Setzen Sie nun die <code>devtools Einstellung debugger.remote-enabled</code> auf <code>true</code>, indem Sie auf "Umschalten" klicken.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5803/remote-debugger-about-config-toggle.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h4 class="note" id="Firefox_for_Android_25_und_später">Firefox for Android 25 und später</h4>
+
+<p>Bei Firefox for Android 24 und später gibt es einen Menü-Eintrag, um "Remote Debugging" zu aktivieren. Öffnen Sie das Menü, wählen Sie "Einstellungen", dann "Entwicklerwerkzeuge" (auf einigen Android-Geräten müssen Sie auf "Mehr" klicken, um den Einstellungen-Eintrag zu sehen). Aktivieren Sie das Kontrollkästchen bei "Remote debugging":</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5829/remote-debugging-device-enable.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>Der Browser zeigt nun eine Notifikation an, dass die Portweiterleitung noch aktiviert werden muss. Dies werden wir später machen.</p>
+
+<h4 id="Auf_dem_Computer">Auf dem Computer</h4>
+
+<p>Auf dem Computer wird "Remote debugging" über die Entwicklerwerkzeuge aktiviert. <a href="/en-US/docs/Tools_Toolbox" title="/en-US/docs/Tools_Toolbox">Öffnen Sie die Entwicklerwerkzeuge</a>, klicken Sie auf die "Einstellungen" Schaltfläche in der Symbolleiste und aktivieren Sie das Kontrollkästchen neben "Externes Debugging aktivieren":</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5827/remote-debugger-toolbox-settings.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<div class="Note">Wenn Sie Firefox 26 oder älter verwenden, müssen Sie danach Firefox neu starten. Nach diesem Schritt sehen Sie im "Web-Entwickler" Menü einen neuen Eintrag "Verbinden...":</div>
+
+<div class="Note"> </div>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5811/remote-debugging-connect-menuitem.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Verbinden">Verbinden</h2>
+
+<p>Da Sie nun alles eingerichtet haben, können Sie den Computer über den "Verbinden..." Menü-Eintrag mit Ihrem Firefox for Android verbinden. Dazu verbinden Sie zuerst Ihr Mobilgerät mit Ihrem Computer, falls Sie dies nicht bereits gemacht haben.</p>
+
+<h4 class="note" id="Auf_dem_Computer_2">Auf dem Computer</h4>
+
+<p>Öffnen Sie ein Kommandozeilen-Fenster und tippen Sie:</p>
+
+<pre>adb forward tcp:6000 tcp:6000</pre>
+
+<p>(Falls Sie den zu verwendeten Port auf dem Android-Mobilgerät geändert haben, müssen Sie hier den geänderten Wert eintragen.)</p>
+
+<p>Für Firefox OS, tippen Sie:</p>
+
+<pre>adb forward tcp:6000 localfilesystem:/data/local/debugger-socket</pre>
+
+<p>Diesen Befehl müssen Sie immer ausführen, wenn das Mobilgerät über USB-Kabel an den Computer angeschlossen wird.</p>
+
+<p>Gehen Sie nun ins "Web-Entwickler" Menü und wählen Sie "Verbinden...". Sie werden folgende Seite sehen:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5813/remote-debugging-desktop-connect.png" style="display: block; margin-left: auto; margin-right: auto;">Sofern Sie den Android-Port nicht geändert haben, wählen Sie hier 6000 und drücken auf "Verbinden".</p>
+
+<h4 class="note" id="Auf_dem_Android-Mobilgerät_2">Auf dem Android-Mobilgerät</h4>
+
+<p>Nun sehen Sie auf Ihrem Mobilgerät folgende Meldung, da sich nun Firefox mit Ihrem Mobilgerät verbinden möchte.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5815/remote-debugging-device-connect.png" style="display: block; margin-left: auto; margin-right: auto;">Drücken Sie auf "OK". Firefox auf Ihrem Computer wartet einige Sekunden, damit Sie genug Zeit haben, auf dem Mobilgerät die Meldung zu quittieren. Wenn die Zeit nicht ausreicht, können Sie nochmals auf "Verbinden" klicken.</p>
+
+<h4 class="note" id="Auf_dem_Computer_3">Auf dem Computer</h4>
+
+<p>Als nächsten sehen Sie auf Ihrem Computer folgende Anzeige:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5819/remote-debugging-desktop-select-target.png" style="display: block; margin-left: auto; margin-right: auto;">Nun werden Sie gefragt, ob Sie den Code in einem Browser Tab oder den Browser selbst debuggen möchten.</p>
+
+<ul>
+ <li>Sie sehen jeweils pro geöffnetem Tab einen Eintrag unter "Verfügbare externe <span class="highlight">Tabs</span>". Sobald Sie auf den gewünschten Tab klicken, wird der Debugger an den Inhalt dieses Tabs angehängt. Wählen Sie diese Option, wenn Sie den Inhalt eines Tabs debuggen möchten.</li>
+ <li>Sie sehen einen Eintrag unter "Verfügbare externe Prozesse": das ist der Browser selbst. Wählen Sie diese Option, wenn Sie den Browser selbst debuggen möchten.</li>
+</ul>
+
+<p>Wir entscheiden uns für das Anfügen des Debuggers an die mozilla.org Webseite. Die Entwicklerwerkzeuge werden in einem eigenen Fenster geöffnet und werden an die Webseite innerhalb von Firefox for Android angehängt:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5821/remote-debugging-console.png" style="display: block; margin-left: auto; margin-right: auto;">Die Entwicklerwerkzeuge unterscheiden nicht zwischen lokalem Inhalt und Inhalt auf anderen Geräten. Sie funktionieren in beiden Fällen identisch.<img alt="" src="https://mdn.mozillademos.org/files/5823/remote-debugging-debugger.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
diff --git a/files/de/tools/remote_debugging/index.html b/files/de/tools/remote_debugging/index.html
new file mode 100644
index 0000000000..5253b47cff
--- /dev/null
+++ b/files/de/tools/remote_debugging/index.html
@@ -0,0 +1,44 @@
+---
+title: Remote Debugging
+slug: Tools/Remote_Debugging
+tags:
+  - Debugging
+  - Tools
+translation_of: Tools/Remote_Debugging
+---
+<div>{{ToolsSidebar}}</div><p>Du kannst die <a href="/de/docs/Tools">Firefox Developer Tools</a> dazu nutzen Websites und Webapps zu debuggen, die in anderen Browsern oder Umgebungen laufen. Andere Browser können auf dem selben Gerät sein oder auf einem anderen Gerät, wie zum Beispiel auf einem via USB verbundenen Gerät.</p>
+
+<p>Die detaillierten Verbindungsanleitungen sind umgebungsspezifisch, d.h. je nach Gerät und Umgebung ist eine andere Anleitung verfügbar.</p>
+
+<h2 id="Gecko-basierte_Umgebungen">Gecko-basierte Umgebungen</h2>
+
+<p>In erster Linie kannst du die Developer Tools mit gecko-basierten Umgebungen, wie zum Beispiel Firefox Desktop, Firefox für Android, Firefox OS oder Thunderbird, verbinden.</p>
+
+<ul>
+ <li><a href="/de/docs/Tools/Remote_Debugging/Debugging_Firefox_Desktop">Firefox Desktop</a></li>
+ <li>Firefox für Android
+  <ul>
+   <li><a href="/de/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">über USB</a></li>
+   <li><a href="/de/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi">über WiFi</a></li>
+  </ul>
+ </li>
+ <li>Firefox OS
+  <ul>
+   <li><a href="/de/docs/Tools/Remote_Debugging/Debugging_Firefox_OS_over_USB">über USB</a></li>
+   <li><a href="/de/docs/Tools/Remote_Debugging/Debugging_Firefox_OS_over_Wifi">über WiFi</a></li>
+  </ul>
+ </li>
+ <li><a href="/de/docs/Tools/Remote_Debugging/Thunderbird">Thunderbird</a></li>
+</ul>
+
+<h2 id="Andere_Umgebungen">Andere Umgebungen</h2>
+
+<p>Das experimentelle <a href="/de/docs/Tools/Valence">Valence</a>-AddOn kann helfen Websites anderer, nicht gecko-basierter, Umgebungen zu verbinden, dazu gehören beispielsweise Google Chrome Desktop, Chrome für Android oder Safari für iOS.</p>
+
+<p>Valence ist standardmäßig in die <a href="/de/Firefox/Developer_Edition">Firefox Developer Edition</a> integriert.</p>
+
+<ul>
+ <li><a href="/de/docs/Tools/Remote_Debugging/Chrome_Desktop">Chrome Desktop</a></li>
+ <li><a href="/de/docs/Tools/Valence">Chrome für Android</a></li>
+ <li><a href="/de/docs/Tools/Valence">Safari für iOS</a></li>
+</ul>
diff --git a/files/de/tools/scratchpad/index.html b/files/de/tools/scratchpad/index.html
new file mode 100644
index 0000000000..c17554d944
--- /dev/null
+++ b/files/de/tools/scratchpad/index.html
@@ -0,0 +1,85 @@
+---
+title: JavaScript-Umgebung
+slug: Tools/Scratchpad
+tags:
+  - Tools
+translation_of: Archive/Tools/Scratchpad
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Das Werkzeug „JavaScript-Umgebung“ bietet eine Umgebung zum Experimentieren mit JavaScript-Quelltext. Sie können Quelltext schreiben und testen, der mit den Inhalten der Webseite interagiert und dann zu Ihren gewohnten Entwicklungwerkzeugen wechseln, wo Sie Ihre Arbeit verfeinern und fertigstellen.</p>
+
+<p>Anders als die <a href="/de/Tools/Web_Console" title="Verwenden der Web-Konsole">Web-Konsole</a>, die nur eine Zeile Quelltext auf einmal interpretieren soll, können Sie mit der JavaScript-Umgebung größere Blöcke JavaScript-Quelltext bearbeiten und diese dann auf vielfältige Weise ausführen, je nachdem, wie Sie das Ergebnis verwenden möchten.</p>
+
+<p>{{EmbedYouTube("lvQf2u3rmkw")}}</p>
+
+<h2 id="Verwenden_der_JavaScript-Umgebung">Verwenden der JavaScript-Umgebung</h2>
+
+<p>Um ein Fenster der JavaScript-Umgebung zu öffnen, drücken Sie Umschalt+F4 oder öffnen Sie das Menü „Web-Entwickler“ (dieses ist unter Mac OS X und Linux ein Untermenü des Menüs „Extras“) und wählen Sie „JavaScript-Umgebung“. Dies öffnet ein Editorfenster der JavaScript-Umgebung mit einem Kommentar, der einige kurze Hinweise zur Verwendung der JavaScript-Umgebung liefert. Von dort aus können Sie direkt JavaScript-Quelltext eingeben und ausprobieren.</p>
+
+<p>Das Fenster der JavaScript-Umgebung sieht ungefähr so aus (unter Mac OS X ist die Menüleiste am oberen Bildschirmrand):</p>
+
+<p><img alt="German Scratchpad screenshot" src="https://mdn.mozillademos.org/files/7351/scratchpad-de.png" style="height: 289px; width: 678px;"></p>
+
+<p>Unter <a href="https://developer.mozilla.org/de/docs/tools/Keyboard_shortcuts#Quelltext-Editor" title="Verwenden des Quelltext-Editors">Verwenden des Quelltext-Editors</a> finden Sie eine Dokumentation zum Editor selbst, einschließlich nützlicher Tastaturkürzel.</p>
+
+<p>Im Datei-Menü finden Sie Optionen zum Speichern und Laden von Ausschnitten von JavaScript-Quelltext, so dass Sie Quelltext bei Gefallen später wiederverwenden können.</p>
+
+<h3 id="Ausführen_Ihres_Quelltexts">Ausführen Ihres Quelltexts</h3>
+
+<p class="note">Sobald Sie Ihren Quelltext geschrieben haben, wählen Sie den Quelltext aus, den Sie ausführen möchten. Wenn Sie nichts auswählen, wird der gesamte Quelltext im Fenster ausgeführt. Klicken Sie dann mit der rechten Maustaste (oder verwenden Sie das Menü „Ausführen“ in der Menüleiste) und wählen Sie, wie Ihr Quelltext ausgewählt werden soll. Es gibt vier Möglichkeiten zur Ausführung.<strong> </strong></p>
+
+<h4 id="Ausführen">Ausführen</h4>
+
+<p>Wenn Sie die Option „Ausführen“ wählen, wird der gewählte Quelltext ausgeführt. Dies können Sie verwenden, wenn Sie eine Funktion oder Quelltext ausführen möchten, der den Inhalt Ihrer Seite verändert, ohne dass Sie das Ergebnis sehen müssen.</p>
+
+<h4 id="Untersuchen">Untersuchen</h4>
+
+<p>Mit der Option „Untersuchen“ wird der Quelltext ebenso ausgeführt wie bei der Option „Ausführen“; anschließend wird allerdings ein Objektinspektor geöffnet, mit dem Sie den Ergebniswert untersuchen können.</p>
+
+<p>Wenn Sie beispielsweise diesen Quelltext eingeben:</p>
+
+<pre>window
+</pre>
+
+<p>und dann „Untersuchen“ wählen, öffnet sich der Objektinspektor und zeigt in etwa folgendes :</p>
+
+<p><img alt="German Scratchpad inspection screenshot" src="https://mdn.mozillademos.org/files/7353/scratchpad-inspect-de.png" style="height: 289px; width: 678px;"></p>
+
+<p> </p>
+
+<h4 id="Anzeigen">Anzeigen</h4>
+
+<p>Die Option „Anzeigen“ führt den gewählen Quelltext aus und fügt das Ergebnis direkt als Kommentar in das Editor-Fenster Ihrer JavaScript-Umgebung ein. Dies ist ein bequemer Weg, um während Ihrer Arbeit ein fortlaufendes Protokoll Ihrer Testergebnisse zu erstellen. Zur Not können Sie dies auch als Taschenrechner verwenden, aber wenn Sie schon keinen Taschenrechnerprogramm haben, haben Sie vielleicht größere Probleme.</p>
+
+<h4 id="Neu_laden_und_ausführen">Neu laden und ausführen</h4>
+
+<p>Die Option „Neu laden und ausführen“ lädt erst die Seite neu und fürt dann den Quelltext aus, wenn das „load“-Ereignis der Seite ausgelöst wird. Dies ist hilfreich, wenn der Quelltext in einer sauberen Umgebung ausgeführt werden soll.</p>
+
+<h2 id="Wann_ist_es_sinnvoll_Scratchpad_zu_benutzen">Wann ist es sinnvoll, Scratchpad zu benutzen?</h2>
+
+<p>Es gibt viele Möglichkeiten, die JavaScript-Umgebung sinnvoll einzusetzen. In diesem Abschnitt finden Sie einige davon.</p>
+
+<h3 id="Testen_von_neuem_Quelltext">Testen von neuem Quelltext</h3>
+
+<p>Die JavaScript-Umgebung ist besonders nützlich, um neuen Quelltext in einer laufenden Browser-Umgebung zu testen; Sie können den Quelltext, den Sie debuggen, in die JavaScript-Umgebung kopieren, ihn ausführen und dann anpassen, bis er funktioniert. Sobald er funktioniert, kopieren Sie ihn wieder in die Hauptdatei Ihres Quelltexts und schon sind Sie fertig. Oftmals können Sie Ihren Quelltext schreiben, debuggen und testen, ohne jemals die Seite laden zu müssen.</p>
+
+<h3 id="Wiederverwendbare_Quelltext-Ausschnitte">Wiederverwendbare Quelltext-Ausschnitte</h3>
+
+<p>Die Menüleiste der JavaScript-Umgebung bietet Befehle zum Speichern und Laden von JavaScript-Quelltext. Dies kann genutzt werden, um Teile von JavaScript-Quelltext aufzubewahren, den Sie häufig verwenden. Wenn Sie beispielsweise an einer Website arbeiten, die Daten mit AJAX-Anfragen lädt, können Sie Ausschnitte aufbewahren, die diese Ladeoperationen ausführen, um die Daten zu testen oder zu verifizieren. Ebenso können Sie hilfreiche allgemeine Debugging-Funktionen aufbewahren, wie solche, die bestimmte Arten von Informationen über das DOM liefern.</p>
+
+<h2 id="Umgebung_der_JavaScript-Umgebung">Umgebung der JavaScript-Umgebung</h2>
+
+<p>Quelltext, den Sie in der JavaScript-Umgebung ausführen, wird in der globalen Umgebung des zum Zeitpunkt der Ausführung gewählten Tabs ausgeführt. Variablen, die Sie außerhalb einer Funktion deklarieren, werden dem globalen Objekt für diesen Tab hinzugefügt.</p>
+
+<h2 id="Verwenden_der_JavaScript-Umgebung_zum_Zugriff_auf_Firefox-interne_Funktionen">Verwenden der JavaScript-Umgebung zum Zugriff auf Firefox-interne Funktionen</h2>
+
+<p>Wenn Sie an Firefox selbst arbeiten oder Add-ons entwickeln, finden Sie es möglicherweise hilfreich, über die JavaScript-Umgebung auf alle internen Funktionen des Browsers zuzugreifen. Um dies zu tun, müssen Sie in <code>about:config</code> die Einstellung <code>devtools.chrome.enabled</code> auf <code>true</code> setzen. Sobald dies geschehen ist, hat das Menü der Umgebung eine Option „Browser“; sobald Sie diese aktiviert haben, ist Ihre Umgebung nicht mehr nur der Inhalt der Seite, sondern der gesamte Browser.</p>
+
+<h2 id="Tastaturkürzel">Tastaturkürzel</h2>
+
+<p>{{ Page ("de/docs/tools/Keyboard_shortcuts", "scratchpad") }}</p>
+
+<h3 id="Tastaturkürzel_des_Quelltext-Editors">Tastaturkürzel des Quelltext-Editors</h3>
+
+<p>{{ Page ("de/docs/tools/Keyboard_shortcuts", "source-editor") }}</p>
diff --git a/files/de/tools/seiten_inspektor/index.html b/files/de/tools/seiten_inspektor/index.html
new file mode 100644
index 0000000000..f44fe105ce
--- /dev/null
+++ b/files/de/tools/seiten_inspektor/index.html
@@ -0,0 +1,109 @@
+---
+title: Seiteninspektor
+slug: Tools/Seiten_Inspektor
+translation_of: Tools/Page_Inspector
+---
+<div>{{ToolsSidebar}}</div><p>{{ fx_minversion_header("10") }}</p>
+
+<p>Der Seiteninspektor ist ein handliches Werkzeug zur Untersuchung von Stuktur und Gestaltung einer Seite.</p>
+
+<h2 id="Den_Inspektor_öffnen"><a name="den-inspektor-oeffnen">Den Inspektor öffnen</a></h2>
+
+<p>Es gibt verschiedene Wege, den Inspektor zu öffnen:</p>
+
+<ul>
+ <li>Wählen Sie die "Inspektor"-Option des "Web Entwickler"-Menüs (die beim Mac ein Untermenü von "Tools"/"Werkzeuge" ist),</li>
+ <li>Drücken Sie Strg-Umschalt-C (Cmd-Option-C auf dem Mac OSX und in Linux).</li>
+ <li>Klicken Sie mit der rechten Maustaste auf ein Element in einer Webseite und wählen Sie "Element untersuchen"</li>
+</ul>
+
+<p>Der Inspektor erscheint in der Werkzeuge-Box am unteren Rand des Browser-Fensters.</p>
+
+<p>Wenn Sie den Inspektor durch "Element untersuchen" aufgerufen haben, ist das gewählte Element bereits im Inspektor ausgewählt und er verhält sich, wie im Abschnitt "<a href="#ein-element-auswaehlen">Ein Element auswählen</a>" beschrieben.</p>
+
+<p>Andernfalls wird das Element unter Ihrem Mauszeiger mit einem gestrichelten Rahmen und einer Notiz mit dem Namen des HTML-Elements angezeigt. Wenn Sie die Maus über die Webseite bewegen, ändert sich das hervorgehobene Element. Gleichzeitig wird seine HTML-Defintion im Kontext der Seite linken Bereich des Inspektors angezeigt. Ab Firefox 30 werden ebenfalls Rasterlinien für das Element und sein Box-Modell dargestellt.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7571/inspector-opening-de.png" style="display: block; height: 801px; margin-left: auto; margin-right: auto; width: 929px;">Wenn Sie auf ein Element klicken, wird es ausgewählt und der Inspektor verhält sich, wie im Abschnitt "<a href="#ein-element-auswaehlen">Ein Element auswählen</a>" beschrieben.</p>
+
+<h2 id="Ein_Element_auswählen"><a name="ein-element-auswaehlen">Ein Element auswählen</a></h2>
+
+<p>Wenn ein Element ausgewählt ist, wird seine HTML-Definition im HTML-Abschntt im linken Teil und die Stil-Information im rechten CSS-Abschnitt des Inspektors angezeigt.<img alt="" src="https://mdn.mozillademos.org/files/7601/inspector-selected-annotated-de.png">Das Verhalten beim Auswählen von Elementen hat sich in Firefox 29 grundlegend geändert. Ab Firefox 30 zeigt der Inspektor das Box-Modell von Elementen in der Webseite.</p>
+
+<h3 id="Vor_Firefox_29">Vor Firefox 29</h3>
+
+<p>Sobald Sie ein Element durch Klicken auf der Webseite auswählen, wird die Anzeige im Inspektor auf dieses Element fest gelegt, das heißt, Sie können die Maus über die Seite bewegen ohne dass der Inspektor zu einem anderen Element wechselt.</p>
+
+<p>In der Notiz des Elements erscheint auf der linken und der rechten Seite eine Schaltfläche. Die Schaltfläche auf der linken Seite hebt die Festlegung auf das Element auf, so dass Sie neue Elemente auswählen können. Die Schaltfläche auf der rechten Seite öffnet ein <a href="#das-element-kontext-menue">Kontextmenü</a> für das Element.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7577/inspector-element-annotation-de.png" style="height: 167px; width: 389px;"></p>
+
+<h3 id="Firefox_29">Firefox 29</h3>
+
+<p>In Firefox 29 wird der gestrichelte Rahmen um ein Element in der Seite sowie die Notiz nicht mehr angezeigt, wenn ein Element ausgewählt wird. Der Inspektor ist auch nicht mehr auf das ausgewählte Element festelegt: Wenn Sie die Maus im HTML-Teil des Inspektors bewegen, wird das entsprechende Element auf der Webseite hervorgehoben. Um ein anderes Element auf der Webseite auszuwählen, klicken Sie auf die Schaltfläche "Ein Element der Seite auswählen" in der <a href="/de/docs/Tools/Tools_Toolbox#Toolbar">Werkzeugleiste der Werkzeuge-Box</a>:</p>
+
+<p>{{EmbedYouTube("zBYEg40ByCM")}}</p>
+
+<h3 id="Firefox_30_und_neuer">Firefox 30 und neuer</h3>
+
+<p>In Firefox 30 und neueren Version ist das Verhalten identisch zu Firefox 29, zusätzlich zeigt der Inspektor das Box-Modell und Rastlinien für das ausgewählte Element auf der Webseite.</p>
+
+<p>{{EmbedYouTube("X1aGlwmUF94")}}</p>
+
+<h2 id="Das_Element-Kontext-Menü"><a name="das-element-kontext-menue">Das Element-Kontext-Menü</a></h2>
+
+<p>Sie können eine Reihe von üblichen Aufgaben mit Hilfe des Kontext-Menüs erledigen. Um das Kontext-Menü zu öffnen, klicken Sie mit der rechten Maustaste auf ein Element im &lt;HTML-Bereich&gt; des Inspektors.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7579/inspector-popup-de.png" style="height: 308px; width: 540px;"></p>
+
+<p>Das Kontext-Menü bietet Ihnen folgende Möglichkeiten:</p>
+
+<ul>
+ <li><a href="#html-bearbeiten">Editieren der HTML-Struktur</a> des Elements</li>
+ <li>Kopieren des inneren oder äußeren HTML</li>
+ <li>Kopieren des eindeutigen Selektors (id) des Elements</li>
+ <li><a href="#grafik-als-data-uri-kopieren">Kopieren einer Grafik als Data-URI</a></li>
+ <li>Löschen des Elements</li>
+ <li>Setzen der CSS-Pseudo-Klassen <a href="/de/docs/Web/CSS/:hover">:hover</a>, <a href="/de/docs/Web/CSS/:focus">:focus</a> und <a href="/de/docs/Web/CSS/:active">:active</a></li>
+</ul>
+
+<h3 id="Grafik_als_Data-URI_kopieren"><a name="grafik-als-data-uri-kopieren">Grafik als Data-URI kopieren</a></h3>
+
+<div class="geckoVersionNote">
+<p>Diese Funktion ist neu in Firefox 29.</p>
+</div>
+
+<p>In Firefox 29 und neuer enthält das Kontext-Menü einen Eintrag, der das ausgewählte Bild als Data-URI in die Zwischenablage kopiert.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7581/inspector-copyasdatauri-de.png" style="height: 282px; width: 529px;"></p>
+
+<h3 id="HTML_bearbeiten"><a name="html-bearbeiten">HTML bearbeiten</a></h3>
+
+<p>Um das äußere HTML eines Elements zu bearbeiten, klicken Sie im Kontext-Menü auf "HTML bearbeiten". Es erscheint ein Textfeld im HTML-Bereich:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7451/inspector-editHTML.png" style="height: 269px; width: 540px;"></p>
+
+<p>Sie können hier HTML beliebig bearbeiten: Ändern des Element-Elements, Ändern von Element-Eigenschaften oder Hinzufügen von neuen. Sobald sie außerhalb des Textfeldes klicken werden die Änderungen wirksam.</p>
+
+<h2 id="HTML-Bereich"><a name="html-bereich">HTML-Bereich</a></h2>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7605/inspector-html-toolbar-annotated-de.png" style="height: 422px; width: 913px;"></p>
+
+<p>Der HTML-Bereich zeigt das HTML der Webseite als Baum mit zusammenklappbaren Knoten. Das ausgewählte Element wird durch einen grauen Hintergrund hervorgehoben.</p>
+
+<p>Sie können das HTML – Elemente, Attribute und Inhalt – in diesem Bereich direkt editieren: Klicken Sie doppelt auf das Element, nehmen Sie die gewünschten Änderungen vor und drücken Sie anschließend "Enter", um die Änderungen sofort anzuwenden.</p>
+
+<p>Wenn Sie mit der rechten Maustaste auf ein Element klicken, erscheint das <a href="#das-element-kontext-menue">Element-Kontext-Menü</a>.</p>
+
+<h3 id="HTML-Bereich_Werkzeugleiste">HTML-Bereich Werkzeugleiste</h3>
+
+<p>Über dem HTML-Bereich befindet sich eine Werkzeugleiste, bestehend aus drei Teilen:</p>
+
+<div class="geckoVersionNote">
+<p>In Firefox 29 und neuer wurde die Schaltfläche "Ein Element der Seite auswählen" in die <a href="/de/docs/Tools_Toolbox#Toolbar">Werkzeuge-Box</a> verschoben.</p>
+</div>
+
+<p><em>Ein Element der Seite auswählen</em>: Wenn Sie diese Schaltfläche anklicken können Sie ein Element auf der Webseite auswählen.<br>
+ HTML-Brotkrümelnavigation: Sie zeigt die komplette Hierarchie im aktuellen Zweig des ausgewählten Elements. Klicken und halten Sie auf ein Element in dieser Leiste, um ein Kontextmenü zu öffnen, in dem sie ein Geschwisterelement des ausgewählten Eintrags auswählen können. Klicken sie auf die Pfeile am Anfang und Ende der Leiste, um seitlich zu scrollen, falls sie größer als der zur Verfügung stehende Platz sein sollte.<br>
+ <span class="author-g-29jbfyyo329p4e97">HTML-Element-Suche</span>:</p>
+
+<p> </p>
diff --git a/files/de/tools/seiten_inspektor/tastenkombinationen/index.html b/files/de/tools/seiten_inspektor/tastenkombinationen/index.html
new file mode 100644
index 0000000000..a77ee75e45
--- /dev/null
+++ b/files/de/tools/seiten_inspektor/tastenkombinationen/index.html
@@ -0,0 +1,12 @@
+---
+title: Tastenkombinationen
+slug: Tools/Seiten_Inspektor/Tastenkombinationen
+translation_of: Tools/Page_Inspector/Keyboard_shortcuts
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "page-inspector") }}</p>
+
+<h3 id="Global_shortcuts">Global shortcuts</h3>
+
+<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}</p>
diff --git a/files/de/tools/shader-editor/index.html b/files/de/tools/shader-editor/index.html
new file mode 100644
index 0000000000..baf56c7597
--- /dev/null
+++ b/files/de/tools/shader-editor/index.html
@@ -0,0 +1,57 @@
+---
+title: Shader Editor
+slug: Tools/Shader-Editor
+translation_of: Tools/Shader_Editor
+---
+<div>{{ToolsSidebar}}</div><p>Der Shader Editor ermöglicht es, Vertex- and Fragment-Shader unter Verwendung von <a href="/en-US/docs/Web/WebGL">WebGL</a> zu editieren.</p>
+
+<p>{{EmbedYouTube("-pEZXNuFFWI")}}</p>
+
+<p>WebGL ist eine JavaScript API um 3D und 2D Grafiken ohne zusätzliche PlugIns im Browser zu rendern. WebGL verfügt 2 Programme ("shader") auf der betreffenden Ebene der <a href="https://www.opengl.org/wiki/Rendering_Pipeline_Overview">OpenGL rendering pipeline</a> arbeiten:  ein <a href="https://www.opengl.org/wiki/Vertex_Shader">vertex shader</a>, der die Koordinaten für jeden Vertex liefert und den <a href="https://www.opengl.org/wiki/Fragment_Shader">fragment shader</a>, der Farbwerte jedes einzelnen pixels liefert, der gezeichnet werden soll.<br>
+ <br>
+ Diese Programme ("Shader") wurden in der OpenGL Shading Language, or <a href="https://www.opengl.org/documentation/glsl/">GLSL</a> geschrieben. WebGL kann auf unterschiedliche Arten in Webseiten eingebunden werden: als hardcodierter Text in einem Java Skript Quellcode , als externe Quelldatei über das &lt;script&gt;-Tag oder als Klartext direkt vom Server abgerufen werden.Der auf der Webseite enthaltene Java Script code wird mittels einer WebGL API direkt auf der GPU des jeweiligen Gerät (Device) ausgeführt.</p>
+
+<p>Mit dem Shader-Editor kann der Quellcode von Vertex- und Fragment-Shadern untersucht und bearbeiten werden.</p>
+
+<p>Hier ein weiterer Screencast, der zeigt wie der Schader-Editor für complexe Applikationen genutzt werden kann (in diesem Fall, der <a href="http://www.unrealengine.com/html5/">Unreal Engine</a> Demo):</p>
+
+<p>{{EmbedYouTube("YBErisxQkPQ")}}</p>
+
+<h2 id="Öffnen_des_Shader-Editors">Öffnen des Shader-Editors</h2>
+
+<p>Standartmäßig ist der Shader-Editor deaktiviert. Dieser kann in den <a href="/en-US/docs/Tools_Toolbox#Settings">Toolbox settings</a> unter "Default Firefox Developer Tools" aktiviert werden.  Der Shader Editor ist nun in der Toolbar verfügbar und kann mittels Mausklick auf Shader-Editor geöffnet werden.<br>
+ <br>
+ Zunächst erscheint ein leeres Fenster mit einem RELOAD-Button um die Seite neu zu laden:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6421/shader-editor-open.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>Der RELOAD der Seite erzeugt einen WebGL Kontext der das Programm lädt.<br>
+ Der folgende Screenshot zeigt eine Demo der <a href="http://www.unrealengine.com/html5/">Unreal Engine</a>.</p>
+
+<p>Das Fenster ist in drei Bereiche unterteilt: links eine Auflistung der GLSL Programme, in der Mitte der Vertex-Shader mit dem aktuell selektierten Programm und der Fragment-Shader des aktuell selektierten Programms im rechten Fenster.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6431/shader-editor-loaded.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Programme_verwalten">Programme verwalten</h2>
+
+<p>Im linken Fenster werden die aktuellen Programme des WebGL-Kontext aufgelistet. Fährt man mit dem Cursor über einen der Listeneinträge, wird die betreffende Geometrie in rot hervor gehoben:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6427/shader-editor-highlight.png" style="display: block; margin-left: auto; margin-right: auto;">Mit einen Mausklick auf das Auge-Icon links der Programmeinträge, wird das betreffende Programm deaktiviert. Das ist praktisch bei Fokussierung eines bestimmten Shaders oder zum auffinden überlappender Geometrien:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6429/shader-editor-disable.png" style="display: block; margin-left: auto; margin-right: auto;">Durch Anklicken eines Programmeintrags erscheint dessen Vertex- und Fragment Shader in den beiden angrenzenden Fenstern und kann bearbeitet werden.</p>
+
+<h2 id="Shader_bearbeiten">Shader bearbeiten</h2>
+
+<p>Das mittlere und rechte Fenster zeigen den Vertex- und den Fragment-Shader des aktuell ausgewählten Programms.<br>
+ <br>
+ Sie können die Programme bearbeiten und die Ergebnisse ansehen nachdem der WebGL Kontext neu gezeichnet hat (beispielsweise im nächsten Animations-Frame). Zum Beispiel nach dem modifizieren der Farbwerte:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6433/shader-editor-edit-color.png" style="display: block; margin-left: auto; margin-right: auto;">Der Editor markiert ("highlighted") Fehler im Quellcode:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6435/shader-editor-error.png" style="display: block; margin-left: auto; margin-right: auto;">Wenn Sie die X-Icons neben den Zeilen mit der Maus überfahren ("hovern") werden Ihnen detailierte Informationen zum jeweiligen Problem angezeigt:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6437/shader-editor-error-info.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p> </p>
+
+<p> </p>
diff --git a/files/de/tools/storage_inspector/cache_storage/index.html b/files/de/tools/storage_inspector/cache_storage/index.html
new file mode 100644
index 0000000000..b8411a08dd
--- /dev/null
+++ b/files/de/tools/storage_inspector/cache_storage/index.html
@@ -0,0 +1,15 @@
+---
+title: Cache Storage
+slug: Tools/Storage_Inspector/Cache_Storage
+translation_of: Tools/Storage_Inspector/Cache_Storage
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Under the <em>Cache Storage</em> type within the <a href="/en-US/docs/Tools/Storage_Inspector">Storage Inspector</a> you can see the contents of any DOM caches created using the <a href="/en-US/docs/Web/API/Cache">Cache API</a>. If you select a cache, you'll see a list of the resources it contains. For each resource, you'll see:</p>
+
+<ul>
+ <li>the URL for the resource.</li>
+ <li>the status code for the request that was made to fetch it.</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16810/cache_storage_detail.png" style="border: 1px solid black; display: block; height: 251px; margin-left: auto; margin-right: auto; width: 926px;"></p>
diff --git a/files/de/tools/storage_inspector/cookies/index.html b/files/de/tools/storage_inspector/cookies/index.html
new file mode 100644
index 0000000000..9ed14c7fd6
--- /dev/null
+++ b/files/de/tools/storage_inspector/cookies/index.html
@@ -0,0 +1,43 @@
+---
+title: Cookies
+slug: Tools/Storage_Inspector/Cookies
+translation_of: Tools/Storage_Inspector/Cookies
+---
+<p>{{ToolsSidebar}}</p>
+
+<p>Wenn Sie im Speicherbaum eine Herkunft innerhalb des Cookie-Speichertyps auswählen, werden alle für diese Herkunft vorhandenen Cookies in einer Tabelle aufgelistet. Die Cookie-Tabelle enthält die folgenden Spalten:</p>
+
+<ul>
+ <li><em>Name</em> — Der Name des Cookies.</li>
+ <li><em>Value</em> — Der Wert des Cookies.</li>
+ <li><em>Domain</em> — Die Domain des Cookies.</li>
+ <li><em>Path</em> — Die Pfadeigenschaft des Cookies.</li>
+ <li><em>Expires / Max-Age</em> — Die Zeit, zu der der Cookie abläuft. Wenn es sich bei dem Cookie um ein Sitzungscookie handelt, lautet der Wert dieser Spalte "Sitzung".</li>
+ <li><em>Size</em> — Die Größe des Cookienamens plus Wert in Bytes.</li>
+ <li><em>HttpOnly</em> — Ist dieser Cookie nur HTTP?</li>
+ <li><em>Secure</em> — Ist dieser Cookie ein sicherer Cookie?</li>
+ <li><em>SameSite</em> — Ist dieses Cookie auf derselben Seite? Mit Cookies auf derselben Seite können Server das Risiko von CSRF- und Informationsleckangriffen verringern, indem sie behaupten, dass ein bestimmter Cookie nur mit Anforderung gesendet werden soll, die von derselben registrierbaren Domain initiiert wurden.</li>
+ <li><em>Last accessed</em> — Datum und Uhrzeit des letzten Lesens des Cookies.</li>
+ <li><em>Created</em> — Datum und Uhrzeit der Erstellung des Cookies.</li>
+ <li><em>HostOnly</em> — Ist dieser Cookie ein Domaincookie? Das heißt, der Domain-Wert stimmt genau mit der Domain der aktuellen Website überein.</li>
+</ul>
+
+<div class="note">
+<p>Hinweis: Einige der Spalten werden standardmäßig nicht angezeigt. Um die Spaltenanzeige zu ändern, klicken Sie mit der rechten Maustaste auf die vorhandenen Tabellenüberschriften und verwenden Sie das resultierende Kontextmenü, um die Spalten anzuzeigen / auszublenden.</p>
+</div>
+
+<p>Sie können Cookies bearbeiten, indem Sie auf Zellen im Tabellen-Widget doppelklicken und die darin enthaltenen Werte bearbeiten. Fügen Sie neue Cookies hinzu, indem Sie auf die Schaltfläche "Plus" (+) klicken und dann die resultierende neue Zeile auf den gewünschten Wert bearbeiten.</p>
+
+<h3 id="Kontextmenü">Kontextmenü</h3>
+
+<p>Das Kontextmenü für jeden Cookie beinhaltet die folgenden Befehle:</p>
+
+<ul>
+ <li><em>Add item</em> - füge einen neuen Cookie hinzu.</li>
+ <li><em>Delete &lt;cookie name&gt;.&lt;domain&gt;</em> - löscht den ausgewählten Cookie</li>
+ <li><em>Delete All From &lt;domain&gt;</em> - löscht alle Cookies von der ausgewählten Domain. Dies muss genau übereinstimmer. Zum Beispiel, wenn sie "Delete All From test8.example.com" auswählen, werden nur Cookies von dieser Domain gelöscht. Cookies von "test13.example.com" werden nicht gelöscht.</li>
+ <li><em>Delete All</em> - löscht alle Cookies für den aktuellen Host.</li>
+ <li><em>Delete All Session Cookies</em> - löscht alle Cookies für den aktuellen Host, die beim Schließen des Browsers gelöscht werden sollen.</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16811/cookie_table_widget_context.png" style="border: 1px solid black; display: block; height: 250px; margin-left: auto; margin-right: auto; width: 924px;"></p>
diff --git a/files/de/tools/storage_inspector/index.html b/files/de/tools/storage_inspector/index.html
new file mode 100644
index 0000000000..475f4c28d2
--- /dev/null
+++ b/files/de/tools/storage_inspector/index.html
@@ -0,0 +1,200 @@
+---
+title: Storage Inspector
+slug: Tools/Storage_Inspector
+tags:
+  - Entwicklerwerkzeug
+  - Sessionspeicher
+  - Speicher
+  - Werkzeuge
+  - lokaler Speicher
+translation_of: Tools/Storage_Inspector
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Der Web-Speicher-Inspektor ermöglicht dir die Einsicht der verschiedenen Speicher-Typen, welche Websites zur Nutzung zur verfügung stehen. Zur Zeit besteht die Möglichkeit des auslesens folgender Speicher-Typen:</p>
+
+<ul>
+ <li><em>Cache Speicher</em>— sämtliche DOM caches die über die <a href="/en-US/docs/Web/API/Cache">Cache API </a>erzeugt wurden.</li>
+ <li><em>Cookies (Kekse)</em> — Sämtliche <a href="/en-US/docs/Web/API/Document/cookie">cookies</a> welche von der Website selbst, oder von in ihr eigebetteten iFrames erzeugt wurden. Cookies die Bestandteil der Antworten auf Netzwerkanfragen sind, werden dann aufgelistet, wenn sie bei geöffnetem Web-Speicher erzeugt wurden oder darauf zugegriffen wird.</li>
+ <li><em>IndexedDB</em> — Von allen <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> (indizierte Datenbanken) die von der einer Seite oder in ihr eingebetteteten iFrames erzeugt wurden, können die Objekt-Speicher ausgelesen und ihre Inhalte aufgelistet werden</li>
+ <li><em>Local Storage</em> — Alle Einzelpositionen, der von der Web-Seite oder in ihr eigebetteteten Iframes erzeugten <a href="/en-US/docs/Web/API/Window/localStorage">local storage</a> (lokalen Speicher) sind einsehbar.</li>
+ <li><em>Session Storage </em> — Alle Inhalte im <a href="/en-US/docs/Web/API/Window/sessionStorage">session storage</a> die von der aktuellen Web-Site und der in ihr eingebetteten iFrames erzeugt wurden oder werden, können betrachtet werden.</li>
+</ul>
+
+<p>Vorerst ermöglicht der Web-Speicher-Inspektor nur Lesezugriff auf die einzelnen Speicher-Typen. Aber wir arbeiten daran in einer zukünftigen Version auch den Schreibzugriff zu ermöglichen, damit es möglich wird, die einzelnen Speicher Inhalte auch zu verändern.</p>
+
+<h2 id="Den_Web-Speicher-Inspektor_öffnen">Den Web-Speicher-Inspektor öffnen</h2>
+
+<p>Du kannst den Web-Speicher-Inspektor durch Auswählen von "Web-Speicher-Inspektor" im Entwickler-Untermenü im Firefox Hauptmenü (oder im Web-Entwickler-Menü, wenn die Menü-Zeile angezeigt wird oder bei Mac OS X) oder durch Drücken von Shift + F9 auf der Tastatur.</p>
+
+<p>Die <a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window">Entwickler-Box</a> wird am Fuß des Browser-Fensters erscheinen, mit dem Web-Speicher-Inspektor aktiviert. In der Box heißt er nur "Web-Speicher".</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14247/1-storage-inspector-open.png" style="display: block; height: 846px; margin-left: auto; margin-right: auto; width: 1311px;"></p>
+
+<h2 id="Web-Speicher-Inspektor_Benutzeroberfläche">Web-Speicher-Inspektor Benutzeroberfläche</h2>
+
+<p>Die Web-Speicher-Inspektor-Benutzeroberfläche ist in drei Hauptkomponenten unterteilt:</p>
+
+<ul>
+ <li><a href="#Speicherbaum">Speicherbaum</a></li>
+ <li><a href="#tabellenuebersicht">Tabellarische Übersicht</a></li>
+ <li><a href="#sidebar">Sidebar</a></li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14249/2-storage-inspector-annotated.png" style="display: block; height: 858px; margin-left: auto; margin-right: auto; width: 1323px;"></p>
+
+<h3 id="Speicherbaum_2"><a id="Speicherbaum" name="Speicherbaum">Speicherbaum</a></h3>
+
+<p>Der Speicherbaum zeigt alle Speichertypen, die der Web-Speicher-Inspektor anzeigen kann:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14251/3-storage-types.png" style="display: block; height: 166px; margin-left: auto; margin-right: auto; width: 386px;"></p>
+
+<p>Unter jedem Type werden die Objekte nach ihrer Herkunft organisiert. <span class="tlid-translation translation" lang="de"><span title="">Bei Cookies unterscheidet das Protokoll nicht die Herkunft</span></span>. Für Indexed DB oder lokalen Speicher ist die Herkunft eine Kombination aus Protokoll und Hostnamen. Zum Beisiel sind "http://mozilla.org" und "https://mozilla.org" zwei verschiedene Herkünfte, somit kann lokaler speicher nicht zwischen ihnen ausgetauscht werden.</p>
+
+<p>Unter "Cache-Speicher" sind die Objekte erst nach Herkunft und dann nach Name des Caches gespeichert:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14253/4-cachestorage.png" style="display: block; height: 210px; margin-left: auto; margin-right: auto; width: 350px;"></p>
+
+<p>IndexedDB sind nach Herkunft, dann nach Datenbank-Name und dann nach Objekt-Speicher-Name abgelegt:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14255/5-indexeddb.png" style="display: block; height: 360px; margin-left: auto; margin-right: auto; width: 350px;"></p>
+
+<p>Bei Cookies, lokalem Speicher und Sitzungs-Speicher gibt es nur eine Hierarchie-Ebene also sind die Objekte direkt unter der Herkunft aufgelistet:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14257/6-cookies.png" style="display: block; height: 598px; margin-left: auto; margin-right: auto; width: 350px;"></p>
+
+<p>Du kannst auf jeden Eintrag klicken, um die Untereinträge auf- oder zuzuklappen.</p>
+
+<p>Klicken auf einen Untereintrag stellt detaillierte Informationen in der tabellarischen Ansicht rechts davon dar.Zum Beispiel führt das Klicken auf einen Eintrag im Cookies-Abschnitt dazu, dass alle Cookies von der ausgewählten Domain gezeigt werden.</p>
+
+<h3 id="Tabellarische_Übersicht"><a id="tabellenuebersicht" name="tabellenuebersicht">Tabellarische Übersicht</a></h3>
+
+<p>Die tabellarische Übersicht ist der Platz, wo alle Einträge entsprechend zu dem gewählten Eintrag aufgelistet werden (egal ob Herkunft oder Datenbank).</p>
+
+<p>Alle Spalten in der tabellarischen Übersicht sind skalierbar. Du kannst Spalten zeigen oder verstecken durch Klicken auf den Tabellenkopf und Auswählen welche Spalten du sehen möchtest:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14259/7-col-selection.png" style="display: block; height: 594px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<h3 id="Suche">Suche</h3>
+
+<p>Es gibt eine Suchzeile am Kopf der tabellarischen Übersicht:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14261/8-search.png" style="display: block; height: 646px; margin-left: auto; margin-right: auto; width: 912px;"></p>
+
+<p>Diese filtert die Tabelle damit nur noch Einträge die den Suchbegriff enthalten angezeigt werden. Einträge passen zum Suchbegriff, wenn in einem beliebigen Feld (auch den ausgeblendeten) der Begriff enthalten ist.</p>
+
+<p>Ab Firefox 50 aufwärts kann man  <kbd>Strg</kbd> + <kbd>F</kbd> (<kbd>Cmd</kbd> + <kbd>F</kbd> beim Mac) drücken, um in die Suchbox zu springen.</p>
+
+<h3 id="Hinzufügen_und_aktualisieren_des_Speichers">Hinzufügen und aktualisieren des Speichers</h3>
+
+<p>Bei neueren Versionen des Firefox hast du Knöpfe verfügbar, um die aktuelle Ansicht des betrachteten Speichers zu aktualisieren und wo möglich einen eigenen Eintrag hinzuzufügen (du kannst bei IndexedDB oder Cache keine eigenen Einträge vornehmen):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15812/add-refresh-storage.png" style="display: block; margin: 0 auto;"></p>
+
+<h3 id="Sidebar"><a name="sidebar">Sidebar</a></h3>
+
+<p>Wenn du eine Reihe in der Tabelle auswählst, werden in der Sidebar Details über diese Zeile angezeigt. Wenn ein Cookie ausgewählt wird, werden alle Details dieses Cookies angezeigt.</p>
+
+<p>Die Sidebar kann den Wert eines Cookies, lokalen Speicherobjekts oder eines Indexed DB Eintrags parsen und in einen aussagekräftiges Objekt erzeugen anstatt nur eines Strings. Zum Beispiel:</p>
+
+<ul>
+ <li>Ein stringifizierter JSON wie <code>'{"foo": "bar"}'</code> wird angezeigt wie das Original-JSON: <code>{foo: "bar"}</code>.</li>
+ <li>Ein schlüsselseparierter String, wie <code>"1~2~3~4"</code> oder <code>"1=2=3=4"</code>, wird wie ein Array angezeigt: <code>[1, 2, 3, 4]</code>.</li>
+ <li>Ein String mit Wertpaaren, wie <code>"ID=1234:foo=bar"</code> wird wie JSON angezeigt: <code>{ID:1234, foo: "bar"}</code>.</li>
+</ul>
+
+<p>Die gezeigten Werte können mit Hilfe des Suchfeldes im Kopf der Sidebar gefiltert werden.</p>
+
+<h2 id="Cache_Speicher">Cache Speicher</h2>
+
+<p>Unter dem Eintrag "Cache Storage" kannst du den Inhalt jedes DOM Caches sehen, der unter Verwendung von <a href="/en-US/docs/Web/API/Cache">Cache API</a> erzeugt wurde. Wenn du einen Cache auswählst, siehst du eine Liste der Einträge die er enthält. Für jeden Eintrag siehst du:</p>
+
+<ul>
+ <li>die URL des Eintrags</li>
+ <li>den Status Code für den Aufruf der für den Abruf der Daten gemacht wurde.</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14263/9-cachedstorage-details.png" style="display: block; height: 213px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<h2 id="Cookies_Kekse_-">Cookies (Kekse ;-)</h2>
+
+<p>Wenn du eine Herkunft aus dem "Cookie Storage" Eintrag im Speicherbaum auswählst, werden alle Cookies die für diese Herkunft gespeichert sind im Tabellen-Fenster angezeigt. Die Cookies-Tabelle hat folgende Spalten:</p>
+
+<ul>
+ <li><em>Name</em> — Der Name des Cookies</li>
+ <li><em>Pfad</em>— Der Pfad-Eintrag des Cookies</li>
+ <li><em>Domain</em> — Die Domäne des Cookies</li>
+ <li><em>Läuft ab am</em> — Die Zeit wann der Cookie üngültig wird. Wenn es ein Session-Cookie ist, ist der Inhalt "Session"</li>
+ <li><em>Zuletzt zugegriffen</em> — Wann der Cookie zuletzt gelesen wurde</li>
+ <li>Erstellt — Wann der Cookie erstellt wurde</li>
+ <li><em>Wert</em> — Der Inhalt des Cookies</li>
+ <li><em>HostOnly</em> — Ist dies ein Domain-Cookie: wenn ja, beginnt der Eintrag "domain" mit "."</li>
+ <li><em>Secure </em>— Ist es ein sicherer Cookie</li>
+ <li><em>HttpOnly</em> — Ist dieser Cookie nur für HTTP</li>
+ <li><em>sameSite</em> — Ist es ein Dieselbe-Site-Cookie? "Same-site cookies" erlauben Servern das Risiko von CSRF und Informations-Leck-Attacken zu verringern, wenn Sie sicherstellen, dass bestimmte Cookies nur gesendet werden, wenn die Anfrage von derselben registrierten Domain erfolgt.</li>
+</ul>
+
+<div class="note">
+<p><strong>Bitte beachten</strong>: Einige Spalten werden standardmäßig nicht gezeigt — um die Spaltendarstellung zu ändern, Rechts/<kbd>Ctrl</kbd>-Klick auf den angezeigten Tabellenkopf und das erscheinende Menü benutzen, um die Spalten ein- und auszuschalten.</p>
+</div>
+
+<p>Du kann die Cookies editieren, wenn du in der <a href="/en-US/docs/Tools/Storage_Inspector#Table_Widget">Tabellen-Ansicht</a> doppelklickst und die angezeigten Werte veränderst. Neue Cookies können mit dem "Plus" (+) Knopf und dem Editieren der erscheinenden neuen Zeile erstellt werden.</p>
+
+<p>Du kannst außerdem Cookies löschen, indem du das Menü in jeder Zeile benutzt:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14273/delete-cookies.png" style="display: block; height: 208px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<h2 id="Local_storage_Session_storage">Local storage / Session storage</h2>
+
+<p>Wenn ein Eintrag aus dem local Storage oder dem session storage ausgewählt wird, zeigt die Tabelle alle Einträge, die mit der entsprechenden Session und local oder session storage zu tun haben.</p>
+
+<p>Du kannst die Einträge im local und session storage bearbeiten, wenn du in die entsprechende Zelle im <a href="/de/docs/Tools/Storage_Inspector#Tabellarische_%C3%9Cbersicht">Tabellen-Widget</a> doppelklickst und die Werte editierst:</p>
+
+<p>{{EmbedYouTube("UKLgBBUi11c")}}</p>
+
+<p>Außerdem kannst die local und session storage Einträge mit Hilfe des Kontext-Menüs löschen:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14275/14-delete-localstorage.png" style="display: block; height: 444px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<p>Schließlich kannst du auch Einträge durch drücken des "Plus" (+) Knopfes hinzufügen und dann die erzeugte Zeile mit Wunschwerten füllen.</p>
+
+<h2 id="IndexedDB">IndexedDB</h2>
+
+<p>Wenn du einen Ursprung innerhalb des Speichertyps IndexedDB in der Speicherstruktur auswählst, werden in der Tabelle die Details aller für diesen Ursprung vorhandenen Datenbanken aufgelistet.</p>
+
+<div class="blockIndicator note">
+<p><strong>Hinweis</strong>: <span class="tlid-translation translation" lang="de"><span title="">Die in einer IndexedDB-Datenbank angezeigten Daten sind eine Momentaufnahme der Daten, wie sie beim Öffnen des Web-Speicher-Werkzeugs vorhanden waren.</span></span></p>
+</div>
+
+<p>Datenbanken haben folgende Details:</p>
+
+<ul>
+ <li><em>Datenbankname</em> — Der Name der Datenbank</li>
+ <li><em>Speicher</em> — Der <a href="/de/docs/IndexedDB/Browser_storage_limits_and_eviction_criteria#Unterschiedliche_Typen_der_Datenspeicherung">Speichertyp</a> spezifiziert für die Datenbank</li>
+ <li><em>Herkunft</em> — Ihre Herkunft</li>
+ <li><em>Version</em> — Die Datenbank-Version</li>
+ <li><em>Speicher-Objekte</em> — Anzahl der gespeicherten Objekte in der Datenbank</li>
+</ul>
+
+<p><span class="tlid-translation translation" lang="de"><span title="">Wenn eine IndexedDB-Datenbank in der Speicherstruktur ausgewählt ist, werden Details zu allen Objektspeichern in der Tabelle aufgelistet.</span> <span title="">Jeder Objektspeicher enthält die folgenden Details:</span></span></p>
+
+<ul>
+ <li><em>Objektspeichername</em> — Der Name des Objektspeichers</li>
+ <li><em>Schlüssel</em> — Der SchlüsselPfad der zum Objektspeicher gehört.</li>
+ <li><em>Auto Increment</em> — Zeigt, ob <em>auto increment</em> aktiviert ist</li>
+ <li><em>Indexes</em> — Liste von Indizes im Objektspeicher wie unten angezeigt</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14265/10-indexeddb-details.png" style="display: block; height: 205px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<p>Wenn ein Objektspeicher in der Speicherstruktur ausgewählt wird, werden alle Einträge in dem Objektspeicher in der Tabelle aufgelistet.</p>
+
+<p>Du kannst eine Indexed DB Datenbank löschen, indem du den Eintrag aus dem Kontextmenü in der Speicherstruktur benutzt:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14277/15-delete-database.png" style="display: block; height: 194px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<p>Wenn eine Datenbank nicht gelöscht werden kann (meistens, weil es noch aktive Verbindungen zur Datenbank gibt), wird eine Warnmeldung im Speicher-Inspektor angezeigt:<img alt="" src="https://mdn.mozillademos.org/files/14267/11-indexeddb-delete-warning.png" style="display: block; height: 255px; margin: 0px auto; width: 900px;"></p>
+
+<p>Du kannst das Kontext-Menü im Tabellen-Editor benutzen, um alle Einträge in einem Objektspeicher zu löschen oder nur einzelne:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14279/16-delete-database-entries.png" style="display: block; height: 195px; margin-left: auto; margin-right: auto; width: 900px;"></p>
diff --git a/files/de/tools/storage_inspector/indexeddb/index.html b/files/de/tools/storage_inspector/indexeddb/index.html
new file mode 100644
index 0000000000..2ede236480
--- /dev/null
+++ b/files/de/tools/storage_inspector/indexeddb/index.html
@@ -0,0 +1,45 @@
+---
+title: IndexedDB
+slug: Tools/Storage_Inspector/IndexedDB
+translation_of: Tools/Storage_Inspector/IndexedDB
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>When you select an origin inside the <em>Indexed DB</em> storage type in the storage tree of the <a href="/en-US/docs/Tools/Storage_Inspector">Storage Inspector</a>, a table lists the details of all the databases present for that origin.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: The data shown in an IndexedDB database is a snapshot of the data as it was when you opened the Storage Inspector tool.</p>
+</div>
+
+<p>Databases have the following details:</p>
+
+<ul>
+ <li><em>Database Name</em> — The name of the database.</li>
+ <li><em>Storage</em> — The <a href="/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria#Different_types_of_data_storage">storage type</a> specified for the database.</li>
+ <li><em>Origin</em> — The origin of the database.</li>
+ <li><em>Version</em> — The database version.</li>
+ <li><em>Object Stores</em> — The number of object stores in the database.</li>
+</ul>
+
+<p>When an IndexedDB database is selected in the storage tree, details about all the object stores are listed in the table. Any object store has the following details:</p>
+
+<ul>
+ <li><em>Object Store Name</em> — The name of the object store.</li>
+ <li><em>Key</em> — The {{domxref("IDBIndex.keyPath", "keyPath")}} property of the object store.</li>
+ <li><em>Auto Increment</em> — Is automatic incrementation of the keys enabled?</li>
+ <li><em>Indexes</em> — Array of indexes present in the object store as shown below.</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16812/indexed_db_details.png" style="border: 1px solid black; display: block; height: 250px; margin-left: auto; margin-right: auto; width: 926px;"></p>
+
+<p>When an object store is selected in the storage tree, all the items in that object store are listed in the table. All items have a key and a value associated with them.</p>
+
+<p>You can delete an IndexedDB database using the context menu in the storage tree:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16813/indexed_db_context_menu.png" style="border: 1px solid black; display: block; height: 249px; margin-left: auto; margin-right: auto; width: 924px;"></p>
+
+<p>If the database cannot be deleted (most commonly because there are still active connections to the database), a warning message will be displayed in the Storage Inspector:<img alt="" src="https://mdn.mozillademos.org/files/16815/indexedDB_delete_warning.png" style="border: 1px solid black; display: block; height: 250px; margin: 0px auto; width: 926px;"></p>
+
+<p>You can use the context menu in the table widget to delete all items in an object store, or a particular item:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16814/indexed_db_table_widget_context.png" style="border: 1px solid black; display: block; height: 249px; margin-left: auto; margin-right: auto; width: 924px;"></p>
diff --git a/files/de/tools/storage_inspector/local_storage_session_storage/index.html b/files/de/tools/storage_inspector/local_storage_session_storage/index.html
new file mode 100644
index 0000000000..464345892a
--- /dev/null
+++ b/files/de/tools/storage_inspector/local_storage_session_storage/index.html
@@ -0,0 +1,20 @@
+---
+title: Local Storage / Session Storage
+slug: Tools/Storage_Inspector/Local_Storage_Session_Storage
+translation_of: Tools/Storage_Inspector/Local_Storage_Session_Storage
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>When an origin corresponding to local storage or session storage is selected within the <a href="/en-US/docs/Tools/Storage_Inspector">Storage Inspector</a>, the names and values of all the items corresponding to local storage or session storage will be listed in a table.</p>
+
+<p>You can edit local and session storage items by double-clicking inside cells in the <a href="/en-US/docs/Tools/Storage_Inspector#Table_Widget">Table Widget</a> and editing the values they contain:</p>
+
+<p>{{EmbedYouTube("UKLgBBUi11c")}}</p>
+
+<p>You can delete local storage and session storage entries using the context menu:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16768/delete_storage_menu.png" style="border: 1px solid black; display: block; height: 270px; margin-left: auto; margin-right: auto; width: 914px;"></p>
+
+<p>You can also delete local and session storage entries by selecting an item and pressing the <kbd>Delete</kbd> or <kbd>Backspace</kbd> key.</p>
+
+<p>Finally, you can add new storage items by clicking the "Plus" (+) button and then editing the resulting new row to the value you want.</p>
diff --git a/files/de/tools/style_editor/index.html b/files/de/tools/style_editor/index.html
new file mode 100644
index 0000000000..bb39d8f812
--- /dev/null
+++ b/files/de/tools/style_editor/index.html
@@ -0,0 +1,54 @@
+---
+title: Style Editor
+slug: Tools/Style_Editor
+translation_of: Tools/Style_Editor
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Die Stilbearbeitung ermöglicht:</p>
+
+<ul>
+ <li>alle Stylesheets einer Seite anzuschauen und zu bearbeiten</li>
+ <li>komplett neue Stylesheets zu erstellen und diese auf eine Seite anzuwenden</li>
+ <li>bestehende Stylesheets zu importieren und auf eine Seite anzuwenden</li>
+</ul>
+
+<p>{{EmbedYouTube("7839qc55r7o")}}</p>
+
+
+
+<p>Um die Stilbearbeitung zu öffnen, wählen Sie die Option "Stilbearbeitung" aus dem Menü "Webentwickler" (ein Untermenü im Menü "Werkzeuge" auf dem Mac). Die <a href="/de/docs/Tools/Tools_Toolbox">Toolbox </a>erscheint am unteren Rand des Browser-Fensters, wobei die Stilbearbeitung aktiviert ist:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5651/style-editor.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>Links (oder oben, wenn Ihr Fenster sehr schmal ist) befindet sich eine Liste aller vom Dokument verwendeten Stylesheets, und rechts (oder unten, wenn Ihr Fenster sehr schmal ist) ist die Quelle für das Stylesheet, das Sie gerade in diesem Stylesheet-Fenster ausgewählt haben.</p>
+
+<h2 id="Die_Stylesheet-Ansicht">Die Stylesheet-Ansicht</h2>
+
+<p>Die Ansicht der Stylesheets auf der linken Seite listet alle Stylesheets auf, die vom aktuellen Dokument verwendet werden. Sie können die Verwendung eines bestimmten Stylesheets schnell ein- und ausschalten, indem Sie auf das Augesymbol links neben dem Stylsheetnamen klicken. Sie können alle Änderungen, die Sie am Stylesheet vorgenommen haben, auf Ihrem lokalen Computer speichern, indem Sie auf die Schaltfläche "Speichern" in der rechten unteren Ecke jedes Eintrags in der Liste klicken.</p>
+
+<h2 id="Das_Bearbeitungsfenster">Das Bearbeitungsfenster</h2>
+
+<p>Auf der rechten Seite befindet sich das Bearbeitungsfenster. Hier steht Ihnen die Quelle für das ausgewählte Stylesheet zum Lesen und Bearbeiten zur Verfügung. Alle Änderungen, die Sie vornehmen, werden in Echtzeit auf die Seite angewendet. Dadurch ist es wirklich einfach, mit dem Aussehen Ihrer Seite zu experimentieren, sie zu überarbeiten und zu testen. Wenn Sie mit Ihren Änderungen zufrieden sind, können Sie eine Kopie lokal speichern, indem Sie auf die Schaltfläche Speichern am Eintrag des Blattes im Blattfenster klicken.</p>
+
+<p>Der Editor bietet Zeilennummern und Syntaxhervorhebung, um das Lesen Ihres CSS zu erleichtern. Siehe <a href="/en/Tools/Using_the_Source_Editor">Verwendung des Quelltexteditors</a> für die Dokumentation über den Editor selbst, einschließlich nützlicher Tastaturkürzel.</p>
+
+<p>Eine besonders praktische Funktion der Stilbearbeitung: Sie minimiert automatisch die von ihr erkannten Stilvorlagen, ohne das Original zu beeinflussen. Dies erleichtert die Arbeit auf optimierten Seiten erheblich.</p>
+
+<h2 id="Erstellen_und_Importieren_von_Stylesheets">Erstellen und Importieren von Stylesheets</h2>
+
+<p>Sie können ein neues Stylesheet erstellen, indem Sie auf die Schaltfläche Neu in der Symbolleiste klicken. Dann können Sie einfach mit der Eingabe von CSS in den neuen Editor beginnen und beobachten, wie die neuen Stile in Echtzeit angewendet werden, genau wie die Änderungen in den anderen Sheets.</p>
+
+<p>Sie können ein Stylesheet von der Festplatte laden und auf die Seite anwenden, indem Sie auf die Schaltfläche Importieren klicken.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en/Tools/Page_Inspector" title="Page Inspector">Page Inspector</a></li>
+ <li><a href="/en/Tools/Page_Inspector/3D_view" title="3D view">3D view</a></li>
+ <li><a href="/en/Tools/Page_Inspector/HTML_panel" title="HTML panel">HTML panel</a></li>
+ <li><a href="/en/Tools" title="Tools">Tools</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/" title="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/">New Developer Tools in Firefox 11 Aurora</a> (blog post)</li>
+</ul>
+
+<p>{{ languages( { "ja": "ja/Tools/Style_Editor"} ) }}</p>
diff --git a/files/de/tools/web_konsole/hilfe/index.html b/files/de/tools/web_konsole/hilfe/index.html
new file mode 100644
index 0000000000..d8dd2b0241
--- /dev/null
+++ b/files/de/tools/web_konsole/hilfe/index.html
@@ -0,0 +1,65 @@
+---
+title: Konsole Bild
+slug: Tools/Web_Konsole/Hilfe
+tags:
+  - Anfänger
+  - Befehle
+  - Beispiele
+  - Debugging
+  - Deutsch
+  - Firefox
+  - Konsole
+  - Maxi
+  - Übersetzung
+translation_of: Tools/Web_Console/Helpers
+---
+<div>{{ToolsSidebar}}</div><h2 id="Die_Befehle">Die Befehle</h2>
+
+<p><span id="result_box" lang="de"><span class="hps">Die</span> <span class="hps">von der</span> <span class="hps">Web Console</span> <span class="hps">bereitgestellt</span> <span class="hps">JavaScript</span> <span class="hps">Kommandozeile</span> <span class="hps">bietet ein paar</span> <span class="hps">eingebauten</span> <span class="hps">Hilfsfunktionen,</span> <span class="hps">bestimmte Aufgaben</span> <span class="hps">zu erleichtern.</span><br>
+ <br>
+ <strong><span class="hps">$ ()</span></strong><br>
+      <span class="hps">Sucht nach einer</span> <span class="hps">CSS-Selektor</span><span>-String</span><span>, der Rückkehr</span> <span class="hps">auf das erste Element</span><span>, das</span> <span class="hps">passt.</span> <span class="hps">Entspricht</span> <span class="atn hps">{</span><span class="atn">{</span><span>domxref</span> <span class="atn hps">(</span><span class="atn hps">"</span><span>document.querySelector</span> <span class="hps">()")</span><span>}}</span> <span class="hps">oder</span> <span class="hps">ruft die</span> <span class="hps">$ -Funktion</span> <span class="hps">in</span> <span class="hps">der Seite</span><span>,</span> <span class="hps">wenn es vorhanden ist</span><span>.</span><br>
+ <strong><span class="atn hps">$$ (</span><span>)</span></strong><br>
+      <span class="hps">Sucht nach einer</span> <span class="hps">CSS-Selektor</span><span>-String</span><span>, der Rückkehr</span> <span class="hps">eine</span> <span class="hps">Liste von DOM</span><span>-Knoten</span> <span class="hps">zusammenpasst.</span> <span class="hps">Dies</span> <span class="hps">ist eine Abkürzung für</span> <span class="atn hps">{</span><span class="atn">{</span><span>domxref</span> <span class="atn hps">(</span><span class="atn hps">"</span><span>document.querySelectorAll</span> <span class="hps">()")</span><span>}}</span><span>.</span><br>
+ <strong><span class="hps">$ 0</span></strong><br>
+      <span class="hps">Das aktuell</span> <span class="hps">geprüft</span> <span class="hps">Element in der</span> <span class="hps">Seite</span><span>.</span><br>
+ <strong><span class="hps">$ x</span> <span class="hps">()</span></strong><br>
+      <span class="hps">Wertet</span> <span class="hps">einen XPath-Ausdruck</span> <span class="hps">und</span> <span class="hps">gibt ein Array von</span> <span class="hps">passenden</span> <span class="hps">Knoten.</span><br>
+ <strong><span class="atn hps">keys (</span><span>)</span></strong><br>
+      <span class="hps">Für</span> <span class="hps">ein gegebenes Objekt</span><span> </span><span class="hps">wird eine Liste</span> <span class="hps">der Schlüsseln</span> <span class="hps">(oder</span> <span class="hps">Eigenschaftsnamen</span><span>)</span> <span class="hps">für das Objekt</span><span> angezeigt.</span> <span class="hps">Dies</span> <span class="hps">ist eine Abkürzung für</span> <span class="hps">Object.keys</span><span>.</span><br>
+ <strong><span class="hps">values</span> <span class="hps">()</span></strong><br>
+      <span class="hps">Für</span> <span class="hps">ein gegebenes Objekt</span><span> </span></span>wird<span lang="de"> <span class="hps">eine Liste der</span> <span class="hps">Werte</span> <span class="hps">für das Objekt</span><span> zurückgegeben;</span> <span class="hps">dient als</span> <span class="hps">Ergänzung zu</span> <span class="atn hps">keys (</span><span>)</span><span>.</span><br>
+ <strong><span class="hps">clear ()</span></strong><br>
+      <span class="hps">Löscht den</span> <span class="hps">Ausgabebereich</span><span> der Konsole.</span><br>
+ <strong><span class="hps">inspect</span> <span class="hps">()</span></strong><br>
+      <span class="hps">Da</span> <span class="hps">ein Objekt</span> <span class="hps">öffnet</span> <span class="hps">den Objektinspektor</span> <span class="hps">für das Objekt</span><span>.</span><br>
+ <strong><span class="hps">pprint</span> <span class="hps">()</span></strong><br>
+      <span class="hps">Formatiert</span> <span class="hps">den angegebenen Wert</span> <span class="hps">in lesbarer</span> <span class="hps">Weise</span><span>;</span> <span class="hps">Dies</span> <span class="hps">ist nützlich für die</span> <span class="hps">Dumping</span> <span class="hps">den Inhalt der</span> <span class="hps">Objekte und Arrays</span><span>.</span><br>
+ <strong><span class="hps">help</span><span class="hps">()</span></strong><br>
+      <span class="hps">Zeigt Hilfetext</span> <span class="hps">.</span> <span class="hps">Eigentlich</span> <span class="hps">in einem schönen</span> <span class="hps">Beispiel für</span> <span class="hps">Rekursion</span><span>,</span> <span class="hps">es wird Sie</span> <span class="hps">zu dieser Seite</span> <span class="hps">zu bringen.</span><br>
+ <strong><span class="hps">cd</span> <span class="hps">()</span></strong><br>
+      <span class="hps">Schalten Sie</span> <span class="hps">JavaScript</span> <span class="hps">Auswertung</span> <span class="hps">Kontext</span> <span class="hps">in einen anderen</span> <span class="hps">iframe</span> <span class="hps">auf der Seite</span><span>.</span> <span class="hps">Siehe</span> <span class="hps">Arbeiten mit</span> <span class="hps">eingebetteten Frames anzeigen</span><span>.</span><br>
+ <span class="hps">Bitte beachten Sie die</span> <span class="hps">Konsole</span> <span class="hps">API</span> <span class="hps">für weitere Informationen über</span> <span class="hps">die Anmeldung</span> <span class="hps">von</span> <span class="hps">Inhalten</span><span>.</span><br>
+ <br>
+ <span class="hps">Beispiele</span><br>
+ <span class="hps">Beispiel:</span> <span class="hps">Eine Sicht auf</span> <span class="hps">den Inhalt einer</span> <span class="hps">DOM-Knoten</span><br>
+ <br>
+ <span class="hps">Angenommen, Sie haben</span> <span class="hps">einen</span> <span class="hps">DOM-Knoten</span> <span class="atn hps">mit der ID "</span><span>Titel"</span> <span class="hps">zu haben.</span> <span class="hps">In der Tat,</span> <span class="hps">diese</span> <span class="hps">Seite, die Sie</span> <span class="hps">gerade lesen</span> <span class="hps">muss man</span><span>,</span> <span class="hps">so können Sie</span> <span class="hps">öffnen Sie die</span> <span class="hps">Web-Konsole</span> <span class="hps">und</span> <span class="hps">versuchen Sie diese</span> <span class="hps">jetzt.</span><br>
+ <br>
+ <span class="hps">Werfen wir einen</span> <span class="hps">Blick auf den Inhalt</span> <span class="hps">dieses Knotens</span> <span class="hps">mit der</span> <span class="hps">$ ()</span> <span class="hps">und prüfen</span> <span class="hps">()</span> <span class="hps">Funktionen:</span></span></p>
+
+<pre class="language-html"><code class="language-html">inspect($("#Titel"))</code></pre>
+
+<p><br>
+ <br>
+ <span id="result_box" lang="de"><span class="hps">Es öffnet sich</span> <span class="hps">automatisch das</span> <span class="hps">Objekt-Inspektor</span> <span class="hps">und zeigt Ihnen</span> <span class="hps">den Inhalt des</span> <span class="hps">DOM-Knoten</span><span>, der die</span> <span class="hps">CSS-Selektor</span> <span class="atn hps">"</span><span>#title</span><span>"</span><span>, was natürlich</span> <span class="hps">ist das Element</span> <span class="atn hps">mit der ID "</span><span>Titel"</span> <span class="hps">entspricht.</span><br>
+ <span class="hps">Beispiel</span><span>: Dumping</span> <span class="hps">den Inhalt eines</span> <span class="hps">DOM-Knoten</span><br>
+ <br>
+ <span class="hps">Das ist</span> <span class="hps">schön und gut,</span> <span class="hps">wenn Sie geschehen,</span> <span class="hps">im</span> <span class="hps">Browser</span> <span class="hps">zu sitzen</span> <span class="hps">ein Problem</span> <span class="hps">aufweisen</span><span>, aber</span> <span class="hps">lassen Sie uns sagen</span> <span class="hps">Sie</span> <span class="hps">remote</span> <span class="hps">Debugging</span> <span class="hps">für einen Benutzer</span><span>,</span> <span class="hps">und</span> <span class="hps">müssen</span> <span class="hps">Sie einen Blick auf</span> <span class="hps">den Inhalt</span> <span class="hps">eines Knotens</span><span>.</span> <span class="hps">Sie können Ihre</span> <span class="hps">Benutzer</span> <span class="hps">öffnen Sie die</span> <span class="hps">Web-Konsole</span> <span class="hps">und Dump</span> <span class="hps">den Inhalt der</span> <span class="hps">Knoten</span> <span class="hps">in das Protokoll</span><span>, dann kopieren</span> <span class="hps">und fügen Sie ihn</span> <span class="hps">in eine</span> <span class="hps">E-Mail an</span> <span class="hps">Sie</span><span>,</span> <span class="hps">mit Hilfe der</span> <span class="hps">pprint</span> <span class="hps">() -Funktion</span><span>:</span></span><br>
+  </p>
+
+<pre class="language-html"><code class="language-html">pprint($("#Titel"))</code></pre>
+
+<p> </p>
+
+<p>This spews out the contents of the node so you can take a look. Of course, this may be more useful with other objects than a DOM node, but you get the idea.</p>
diff --git a/files/de/tools/web_konsole/index.html b/files/de/tools/web_konsole/index.html
new file mode 100644
index 0000000000..1616e7c9a7
--- /dev/null
+++ b/files/de/tools/web_konsole/index.html
@@ -0,0 +1,582 @@
+---
+title: Web-Konsole
+slug: Tools/Web_Konsole
+translation_of: Tools/Web_Console
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Die Web-Konsole</p>
+
+<ol>
+ <li>zeichnet Informationen auf, die mit einer Webseite verknüpft sind: alle Netzwerkanfragen, JavaScript, CSS und Sicherheitsfehler, sowie Fehler-, Warn- und Informationsmeldungen, die speziell von JavaScript-Code auf einer Seite verursacht werden</li>
+ <li>erlaubt es Ihnen, mit einer Webseite zu interagieren, indem Sie JavaScript-Befehle auf einer Seite ausführen</li>
+</ol>
+
+<p>Es ist ein Ersatz für die alte <a href="/en/Error_Console" title="en/Error Console">Fehlerkonsole</a>, die in Firefox eingebaut war: sie hat Fehler, Warnungen und Nachrichten von allen Internetseiten, vom Browser-Code und Add-ons angezeigt. Das machte es viel schwerer zu sehen, welche Nachrichten zu welcher Internetseite gehören. Die Web-Konsole ist immer mit einer spezifischen Internetseite verknüpft und zeigt Informationen an, die mit dieser Seite zusammenhängen.</p>
+
+<p>Der andere Teil der Fehlerkonsole ist die <a href="/en-US/docs/Tools/Browser_Console" title="/en-US/docs/Tools/Browser_Console">Browserkonsole</a>, die Fehler, Warnungen und Meldungen vom Browser-Code und von Add-ons anzeigt.</p>
+
+<p>{{EmbedYouTube("AlYMRAQnkX8")}}</p>
+
+<h2 id="Die_Web-Konsole_öffnen">Die Web-Konsole öffnen</h2>
+
+<p>Um die Web-Konsole zu öffnen, wählen Sie "Web-Konsole" vom Web-Entwickler Untermenü im Firefox-Menü (oder Extras-Menü, wenn Sie die Menüleiste aktiviert haben oder Mac OS X benutzen) aus, oder halten Sie die Tasten Steuerung-Umschalt-K (Befehl-Wahl-K auf einem Mac) gedrückt.</p>
+
+<p>https://developer.mozilla.org/de/docs/Tools/Web_Konsole$edit</p>
+
+<p>Die <a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window" title="/en-US/docs/Tools/DevTools_Window">Browser-Werkzeuge</a> werden zusammen mit der Web-Konsole (sie wird in der <a href="/en-US/docs/Tools/DevTools_Window#Toolbar" title="/en-US/docs/Tools/DevTools_Window#Toolbar">DevTools Werkzeugleiste</a> nur "Konsole" genannt) am unteren Teil des Browser-Fensters angezeigt:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7529/web-console-de.png" style="display: block; height: 1053px; margin-left: auto; margin-right: auto; width: 945px;"></p>
+
+<p>Unter der <a href="/en-US/docs/Tools/DevTools_Window#Toolbar" title="/en-US/docs/Tools/DevTools_Window#Toolbar">Symbolleiste der Entwicklerwerkzeuge</a> ist die Oberfläche der Web-Konsole in drei Abschnitte eingeteilt:</p>
+
+<ul>
+ <li><a href="#filtering-and-searching" title="#filtering-and-searching">Symbolleiste</a>: oben ist eine Symbolleiste, die Schaltflächen mit Beschriftungen wie "Netz", "CSS" und "JS" beinhaltet. Diese Symbolleiste wird verwendet, um die Nachrichten zu filtern</li>
+ <li><a href="#command-line" title="#command-line">Kommandozeile</a>: unten ist eine Kommandozeile, in der Sie JavaScript-Befehle eingeben können</li>
+ <li><a href="#message-display-pane" title="#message-display-pane">Meldungsansicht</a>: zwischen der Symbolleiste und der Kommandozeile zeigt die Web-Konsole Meldungen im größten Teil des Fensters an</li>
+</ul>
+
+<h2 id="Meldungsansicht"><a name="meldungsansicht">Meldungsansicht</a></h2>
+
+<p>Der Großteil der Web-Konsole wird von der Meldungsansicht genutzt:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7537/web-console-messages-highlighted-de.png" style="display: block; height: 431px; margin-left: auto; margin-right: auto; width: 945px;"></p>
+
+<p>Die Meldungsanzeige zeigt folgende Meldungen an:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Web_Console#HTTP_requests">HTTP-Anfragen</a></li>
+ <li><a href="/en-US/docs/Tools/Web_Console#JavaScript_errors_and_warnings">JavaScript-Warnungen und -Fehler</a></li>
+ <li><a href="/en-US/docs/Tools/Web_Console#CSS_errors.2C_warnings.2C_and_reflow_messages">CSS-Warnungen, Fehler und DOM-Neuberechnungen</a></li>
+ <li><a href="/en-US/docs/Tools/Web_Console#Security_warnings_and_errors">Sicherheitswarnungen und -fehler</a></li>
+ <li><a href="/en-US/docs/Tools/Web_Console#console_API_messages">console API-Aufrufe</a></li>
+ <li><a href="/en-US/docs/Tools/Web_Console#Input.2Foutput_messages">Eingabe/Ausgabe-Meldungen</a>: Befehle und Ergebnisse der Befehle, die dem Browser über die Kommandozeile der Web-Konsole geschickt wurden.</li>
+</ul>
+
+<p>Jede Nachricht wird in einer neuen Zeile angezeigt:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7539/web-console-message-annotated-de.png" style="display: block; height: 170px; margin-left: auto; margin-right: auto; width: 929px;"></p>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <td><strong>Zeit</strong></td>
+   <td>Die Zeit, zu der die Meldung aufgezeichnet wurde. Ab Firefox 28 wird sie standardmäßig nicht angezeigt, jedoch können Sie Zeitstempel mit einer <a href="/en-US/docs/Tools_Toolbox#Settings">Einstellung in der Werkzeugleiste</a> anzeigen lassen.</td>
+  </tr>
+  <tr>
+   <td><strong>Kategorie</strong></td>
+   <td>
+    <p><strong>Kategorie</strong>: zeigt an, um welche Art von Meldung es sich handelt:</p>
+
+    <ul style="margin-left: 40px;">
+     <li><strong>Schwarz</strong>: HTTP-Anfrage</li>
+     <li><span style="color: #0099ff;"><strong>Blau</strong></span>: CSS-Warnung/Fehler/Meldung</li>
+     <li><strong><span style="color: #ff8c00;">Orange</span></strong>: JavaScript-Warnung/Fehler</li>
+     <li><span style="color: #ff0000;"><strong>Grün</strong></span>: Sicherheitswarnung/-fehler</li>
+     <li><span style="color: #a9a9a9;"><strong>Hellgrau</strong></span>: Meldungen, die explizit durch von der <a href="/en-US/docs/Web/API/console" title="/en-US/docs/Web/API/console">console</a>-API ausgeführtem JavaScript-Code stammen</li>
+     <li><span style="color: #696969;"><strong>Dunkelgrau</strong></span>: Eingaben/Ausgaben von der interaktiven <a href="/en-US/docs/Tools/Web_Console#The_command_line_interpreter">Kommandozeile</a></li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><strong>Typ</strong></td>
+   <td>Für alle Meldungen außer HTTP-Anfragen und interaktiven Eingaben/Ausgaben, ein Symbol das anzeigt, ob es sich um ein Fehler(X), eine Warnung(!) oder eine Meldung (i) handelt.</td>
+  </tr>
+  <tr>
+   <td><strong>Meldung</strong></td>
+   <td>Die Meldung an sich.</td>
+  </tr>
+  <tr>
+   <td><strong>Anzahl der Meldungen</strong></td>
+   <td>Wenn eine Zeile, die eine Warnung oder ein Fehler erzeugt, mehrmals ausgeführt wird, wird sie nur einmal aufgezeichnet und der Zähler zeigt die Anzahl an Meldungen an.</td>
+  </tr>
+  <tr>
+   <td><strong>Dateiname und Zeilennummer</strong></td>
+   <td>JavaScript-, CSS- und console API-Meldungen können zu einer spezifischen Codezeile zurückverfolgt werden. Die Konsole gibt den Dateinamen und Zeilennummer des Codeabschnitts an, das die Meldung erzeugt hat.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="HTTP-Anfragen">HTTP-Anfragen</h3>
+
+<p>HTTP-Anfragen werden in einer Zeile dargestellt, die folgendermaßen aussieht:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7559/web-console-message-request-annotated-de.png" style="display: block; height: 164px; margin-left: auto; margin-right: auto; width: 810px;"></p>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <td><strong>Zeit</strong></td>
+   <td>Die Zeit, zu der die Meldung aufgezeichnet wurde.</td>
+  </tr>
+  <tr>
+   <td><strong>Kategorie</strong></td>
+   <td>Zeigt an, dass die Meldung eine HTTP-Anfrage ist.</td>
+  </tr>
+  <tr>
+   <td><strong>Methode</strong></td>
+   <td>Die Methode der HTTP-Anfrage</td>
+  </tr>
+  <tr>
+   <td><strong>URI</strong></td>
+   <td>Die Ziel-URI</td>
+  </tr>
+  <tr>
+   <td><strong>Zusammenfassung</strong></td>
+   <td>Die HTTP-Version, Status-Code und Laufzeit.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Wenn Sie auf eine Meldung klicken, sehen Sie so ein Fenster mit mehr Informationen über die Anfrage und Antwort:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7531/detailspanel-de.png" style="display: block; height: 636px; margin-left: auto; margin-right: auto; width: 463px;">Durch Herunterscrollen sehen Sie die Antwort-Zeilen. Standardmäßig werden Anfrage- und Antwort-Inhalte nicht aufgezeichnet: um dies zu tun, wählen Sie im Auswahlmenü der Web-Konsole "Anfrage- und Antwort-Inhalte aufzeichnen" aus, laden Sie die Seite neu und öffnen Sie das Fenster "Netzwerk-Request untersuchen".</p>
+
+<p>Nur das erste Megabyte an Daten wird für alle Anfrage- und Antwort-Inhalte aufgezeichnet, weshalb sehr große Anfragen und Antworten gekürzt werden.</p>
+
+<div class="geckoVersionNote">
+<p>Ab Firefox 30 werden Netzwerk-Meldungen standardmäßig nicht angezeigt.</p>
+</div>
+
+<h3 id="JavaScript-Fehler_und_Warnungen">JavaScript-Fehler und Warnungen</h3>
+
+<p>JavaScript-Meldungen sehen folgendermaßen aus:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7541/js-error-annotated-de.png" style="display: block; height: 190px; margin-left: auto; margin-right: auto; width: 810px;"></p>
+
+<div class="geckoVersionNote">
+<p>Ab Firefox 30 werden JavaScript-Warnungen standardmäßig nicht angezeigt.</p>
+</div>
+
+<h3 id="CSS-Fehler_-Warnungen_und_DOM-Neuberechnungen">CSS-Fehler, -Warnungen und DOM-Neuberechnungen</h3>
+
+<p>CSS-Meldungen sehen folgendermaßen aus:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7539/web-console-message-annotated-de.png" style="display: block; height: 170px; margin-left: auto; margin-right: auto; width: 929px;"></p>
+
+<p>Standardmäßig werden CSS-Warnungen und Meldungen nicht angezeigt.</p>
+
+<h4 id="DOM-Neuberechnungen">DOM-Neuberechnungen</h4>
+
+<p>Die Web-Konsole zeichnet auch DOM-Neuberechnungen unter der CSS-Kategorie auf. Eine Neuberechnung bezeichnet der Vorgang, bei dem der Browser das Layout von der ganzen Seite oder von Teilen berechnet. Neuberechnungen treten auf, wenn Änderungen auf einer Seite aufgetreten sind, von denen der Browser denkt, dass das Layout der Seite beeinflusst wurde. Viele Ereignisse können Neuberechnungen auslösen, inklusive: Skalieren des Browser-Fensters, Aktivieren von Pseudoklassen wie :hover oder Manipulieren des DOM in JavaScript.</p>
+
+<p>Da Neuberechnungen manchmal Rechenaufwendig sind und die Benutzeroberfläche direkt beeinflussen, können sie einen großen Einfluss auf die responsiveness einer Webseite oder Web-App haben. Indem Neuberechnungen in der Web-Konsole aufgezeichnet werden, können Sie sehen, wann Neuberechnungen erzwungen werden, wie lange es dauert, sie auszuführen, ob die Neuberechnungen <a href="#synchronous-and-asynchronous-reflows">synchrone Neuberechnungen</a> sind und von welchem JavaScript-Code sie erzwungen werden.</p>
+
+<p>Neuberechnungen werden als "Logbuch"-Meldungen angezeigt, im Gegensatz zu CSS-Fehlern oder Warnungen. Standardmäßig sind sie deaktiviert. Sie können sie aktivieren, indem Sie auf die "CSS"-Schaltfläche in der <a href="#filtering-and-searching">Symbolleiste</a> klicken und "Logbuch" auswählen.</p>
+
+<p>Jede Meldung wird mit "reflow" markiert und zeigt die Zeit an, die für die Neuberechnung gebraucht wurde:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7547/web-console-reflow-asynch-de.png" style="display: block; height: 23px; margin-left: auto; margin-right: auto; width: 636px;">Wenn die Neuberechnung synchron ist und von JavaScript-Code erzwungen wurde, wird auch ein Link zur Codezeile angezeigt, die die Neuberechnung erzwungen hat.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7549/web-console-reflow-synch-de.png" style="display: block; height: 23px; margin-left: auto; margin-right: auto; width: 721px;">Klicken Sie auf den Link um die Datei im <a href="/en-US/docs/Tools/Debugger">Debugger</a> zu öffnen.</p>
+
+<h4 id="Synchrone_and_asynchrone_Neuberechnungen"><a name="synchrone-und-asynchrone-neuberechnungen">Synchrone and asynchrone Neuberechnungen</a></h4>
+
+<p>Wenn eine Änderung das aktuelle Layout ungültig macht - zum Beispiel, wenn der Browser-Fenster skaliert wird oder JavaScript-Code das CSS eines Elements ändert - wird das Layout nicht augenblicklich neu berechnet. Stattdessen geschieht die Neuberechnung asynchron, sobald der Browser entscheidet, dass es notwendig ist (üblicherweise, wenn das Aussehen des Browser-Fensters neu gezeichnet wird). So kann der Browser mehrere ungültig machende Änderungen sammeln und alle auf einmal neuberechnen.</p>
+
+<p>Wenn ein JavaScript-Code jedoch CSS ausliest, das geändert wurde, muss der Browser eine synchrone Neuberechnung durchführen um das berechnete Aussehen zurückzugeben. Folgender Code-Beispiel löst beim Aufruf von <code>window.getComputedStyle(thing).height</code> sofort eine synchrone Neuberechnung aus:</p>
+
+<pre class="brush: js">var thing = document.getElementById("the-thing");
+thing.style.display = "inline-block";
+var thingHeight = window.getComputedStyle(thing).height;</pre>
+
+<p>Deshalb ist es eine gute Idee, Verschachtelungen von Schreib- und Leseanfragen zu vermeiden, da bei jedem Lesen eines durch eine vorangegangene Schreibanfrage ungültig gemachten Stils eine synchrone Neuberechnung erzwungen wird.</p>
+
+<h3 id="Sicherheitswarnungen_und_-fehler">Sicherheitswarnungen und -fehler</h3>
+
+<p>Sicherheitswarnungen und -fehler sehen folgendermaßen aus:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7555/sec-error-annotated-de.png" style="display: block; height: 190px; margin-left: auto; margin-right: auto; width: 810px;">Die Sicherheitsmeldungen in der Web-Konsole helfen Ihnen dabei, (potentielle) Sicherheitslücken in Ihren Seiten zu finden. Außerdem helfen diese Meldungen Entwickler dabei, zu lernen, da sie mit einem Link "Weitere Informationen" enden, womit Sie zu einer Seite mit Hintergrundinformationen und Hilfestellungen zur Problemlösung geführt werden.</p>
+
+<p>Die folgende Liste führt alle Sicherheitsmeldungen auf:</p>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <th scope="col">Meldung</th>
+   <th scope="col">Details</th>
+  </tr>
+  <tr>
+   <td>Laden von gemischten aktiven Inhalten wurde blockiert.</td>
+   <td>Die Seite besitzt gemischte aktive Inhalte: die Hauptseite wurde über HTTPS bereitgestellt, hat den Browser aber gebeten, "aktive Inhalte" wie Skripte über HTTP zu laden. Der Browser hat diesen aktiven Inhalt blockiert. Siehe <a href="/en-US/docs/Security/MixedContent">Gemischte Inhalte</a> für mehr Details.</td>
+  </tr>
+  <tr>
+   <td>Laden von gemischten Ansichtsinhalten wurde blockiert.</td>
+   <td>Die Seite besitzt gemischte Ansichtsinhalte: die Hauptseite wurde über HTTPS bereitgestellt, hat den Browser aber gebeten, "Ansichtsinhalte" wie Bilder über HTTP zu laden. Der Browser hat diesen aktiven Inhalt blockiert. Siehe <a href="/en-US/docs/Security/MixedContent">Gemischte Inhalte</a> für mehr Details.</td>
+  </tr>
+  <tr>
+   <td>Lade gemischte (unsichere) aktive Inhalte auf einer sicheren Seite</td>
+   <td>Die Seite besitzt gemischte aktive Inhalte: die Hauptseite wurde über HTTPS bereitgestellt, hat den Browser aber gebeten, "aktive Inhalte" wie Skripte über HTTP zu laden. Der Browser hat diesen aktiven Inhalt geladen. Siehe <a href="/en-US/docs/Security/MixedContent">Gemischte Inhalte</a> für mehr Details.</td>
+  </tr>
+  <tr>
+   <td>Lade gemischte (unsichere) anzeige-Inhalte auf einer sicheren Seite</td>
+   <td>Die Seite besitzt gemischte Ansichtsinhalte: die Hauptseite wurde über HTTPS bereitgestellt, hat den Browser aber gebeten, "Ansichtsinhalte" wie Bilder über HTTP zu laden. Der Browser hat diesen aktiven Inhalt geladen. Siehe <a href="/en-US/docs/Security/MixedContent">Gemischte Inhalte</a> für mehr Details.</td>
+  </tr>
+  <tr>
+   <td>Diese Website hat Kopfzeilen sowohl mit <span class="highlight">X-Content-Security-Policy/Report-Only</span> als auch <span class="highlight">Content-Security-Policy/Report-Only</span> angegeben. Jene mit <span class="highlight">X-Content-Security-Policy/Report-Only</span> werden ignoriert.</td>
+   <td>Siehe <a href="/en-US/docs/Security/CSP">Content Security Policy</a> für mehr Details.</td>
+  </tr>
+  <tr>
+   <td>Die Kopfzeilen <span class="highlight">X-Content-Security-Policy</span> und <span class="highlight">X-Content-Security-Report-Only</span> werden in Zukunft nicht mehr unterstützt. Verwenden Sie bitte stattdessen die Kopfzeilen <span class="highlight">Content-Security-Policy</span> und <span class="highlight">Content-Security-Report-Only</span> mit <span class="highlight">CSP</span>-Spezifikations-kompatibler <span class="highlight">Syntax</span>.</td>
+   <td>Siehe <a href="/en-US/docs/Security/CSP">Content Security Policy</a> für mehr Details.</td>
+  </tr>
+  <tr>
+   <td>Passwort-Felder sind auf einer unsicheren <span class="highlight">(http://)</span> Seite vorhanden. Dies ist ein Sicherheitsrisiko, durch das Zugangsdaten gestohlen werden können.</td>
+   <td>Seiten mit Anmeldeformularen müssen über HTTPS, nicht HTTP, bereitgestellt werden.</td>
+  </tr>
+  <tr>
+   <td>Passwort-Felder sind in einem Formular mit einer unsicheren <span class="highlight">(http://)</span> Formular-aktion vorhanden. Dies ist ein Sicherheitsrisiko, durch das Zugangsdaten gestohlen werden können.</td>
+   <td>Formulare mit Passwortfeldern müssen diese über HTTPS, nicht HTTP, absenden.</td>
+  </tr>
+  <tr>
+   <td>Passwort-Felder sind in einem unsicheren <span class="highlight">(http://)</span> Iframe vorhanden. Dies ist ein Sicherheitsrisiko, durch das Zugangsdaten gestohlen werden können.</td>
+   <td>iframes, die Anmeldeformulare beinhalten, müssen über HTTPS, nicht HTTP, bereitgestellt werden.</td>
+  </tr>
+  <tr>
+   <td>Diese Website hat eine ungültige <span class="highlight">Strict-Transport-Security</span>-Kopfzeile angegeben.</td>
+   <td>Siehe <a href="/en-US/docs/Security/HTTP_Strict_Transport_Security">HTTP Strict Transport Security</a> für mehr Details.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=863874">Bug 863874</a> ist ein Problembericht um für Sicherheit relevante Meldungen in der Web-Konsole zu sammeln. Wenn Sie mehr Ideen für nützliche Funktionen wie diese haben, oder einfach nur mitmachen wollen, schauen Sie sich den Fehlerbericht und die davon abhängigen an.</p>
+
+<h3 id="console_API-Meldungen">console API-Meldungen</h3>
+
+<p><br>
+ <img alt="" src="https://mdn.mozillademos.org/files/7557/console-api-message-annotated-de.png" style="display: block; height: 190px; margin-left: auto; margin-right: auto; width: 216px;"></p>
+
+<p>Dieser Abschnitt beschreibt die Ausgaben der Web-Konsole für die console API-Aufrufe, die Ausgaben erzeugen. Für mehr oberflächliche Informationen über die console API, siehe folgende <a href="/en-US/docs/Web/API/console">Dokumentationsseite</a>.</p>
+
+<h4 id="Fehlermeldungen">Fehlermeldungen</h4>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">API</th>
+   <th scope="col">Meldungsinhalt</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>error()</code></td>
+   <td>
+    <p>Argument für <code>error()</code>.</p>
+
+    <pre class="brush: js">
+console.error("an error");</pre>
+    <img alt="" src="https://mdn.mozillademos.org/files/7143/api-error.png" style="display: block; margin-left: auto; margin-right: auto;"></td>
+  </tr>
+  <tr>
+   <td><code>exception()</code></td>
+   <td>Alias für <code>error()</code>.</td>
+  </tr>
+  <tr>
+   <td><code>assert()</code></td>
+   <td>
+    <div class="geckoVersionNote">
+    <p>Neu in Firefox 29.</p>
+    </div>
+
+    <p>Wenn die Aussage erfolgreich ist, nichts. Wenn die Aussage fehlschlägt, Argument:</p>
+
+    <pre class="brush: js">
+console.assert(false, "My assertion always fails");</pre>
+    <img alt="" src="https://mdn.mozillademos.org/files/7139/api-assert.png" style="display: block; margin-left: auto; margin-right: auto;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Warnmeldungen">Warnmeldungen</h4>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">API</th>
+   <th scope="col">Meldungsinhalt</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>warn()</code></td>
+   <td>
+    <p>Argument für <code>warn()</code>.</p>
+
+    <pre class="brush: js">
+console.warn("a warning");</pre>
+    <img alt="" src="https://mdn.mozillademos.org/files/7155/api-warn.png" style="display: block; margin-left: auto; margin-right: auto;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Informationsmeldungen">Informationsmeldungen</h4>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">API</th>
+   <th scope="col">Meldungsinhalt</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>info()</code></td>
+   <td>
+    <p>Argument für <code>info()</code>.</p>
+
+    <pre class="brush: js">
+console.info("some info");</pre>
+    <img alt="" src="https://mdn.mozillademos.org/files/7145/api-info.png" style="display: block; margin-left: auto; margin-right: auto;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Meldungen">Meldungen</h4>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">API</th>
+   <th scope="col">Meldungsinhalt</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>count()</code></td>
+   <td>
+    <div class="geckoVersionNote">
+    <p>Diese Meldung ist neu in Firefox 30.</p>
+    </div>
+
+    <p>Diese Beschreibung gibt an, ob und wie oft  <code>count()</code> aufgerufen wurde mit der gegebenen Beschriftung:</p>
+
+    <pre class="brush: js">
+console.count(user.value);</pre>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/7359/api-count.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>log()</code></td>
+   <td>
+    <p>Argument für <code>log()</code>.</p>
+
+    <pre class="brush: js">
+console.log("logged");</pre>
+    <img alt="" src="https://mdn.mozillademos.org/files/7147/api-log.png" style="display: block; margin-left: auto; margin-right: auto;"></td>
+  </tr>
+  <tr>
+   <td><code>trace()</code></td>
+   <td>
+    <p>Stack-Trace:</p>
+
+    <pre class="brush: js">
+console.trace();</pre>
+    <img alt="" src="https://mdn.mozillademos.org/files/7159/api-trace.png" style="display: block; margin-left: auto; margin-right: auto;"></td>
+  </tr>
+  <tr>
+   <td><code>dir()</code></td>
+   <td>
+    <p>Auflisten der Objekteigenschaften:</p>
+
+    <pre class="brush: js">
+var user = document.getElementById('user');
+console.dir(user);</pre>
+    <img alt="" src="https://mdn.mozillademos.org/files/7157/api-dir.png" style="display: block; margin-left: auto; margin-right: auto;"></td>
+  </tr>
+  <tr>
+   <td><code>time()</code></td>
+   <td>
+    <p>Benachrichtigung, dass der spezifische Timer gestartet wurde.</p>
+
+    <pre class="brush: js">
+console.time("t");</pre>
+    <img alt="" src="https://mdn.mozillademos.org/files/7553/api-time-de.png" style="display: block; height: 16px; margin-left: auto; margin-right: auto; width: 586px;"></td>
+  </tr>
+  <tr>
+   <td><code>timeEnd()</code></td>
+   <td>
+    <p>Dauer für den spezifischen Timer.</p>
+
+    <pre class="brush: js">
+console.timeEnd("t");</pre>
+    <img alt="" src="https://mdn.mozillademos.org/files/7151/api-timeEnd.png" style="display: block; margin-left: auto; margin-right: auto;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Gruppieren_von_Meldungen">Gruppieren von Meldungen</h4>
+
+<p>Sie können <code>console.group()</code> benutzen um eingerückte Gruppen in der Konsolenausgabe zu erstellen. Siehe <a href="/en-US/docs/Web/API/console#Using_groups_in_the_console">Gruppen in der Konsole benutzen</a> für mehr Informationen.</p>
+
+<h3 id="Eingabe-Ausgabemeldungen">Eingabe-/Ausgabemeldungen</h3>
+
+<p>Befehle, die dem Browser über die <a href="#command-line" title="#command-line">Kommandozeile der Web-Konsole</a> geschickt wurden und die dazugehörigen Antworten werden mit Zeilen wie diese aufgezeichnet:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5587/web-console-message-input-output.png" style="display: block; height: 68px; margin-left: auto; margin-right: auto; width: 554px;">Die dunkelgraue Leiste gibt an, dass es sich um Eingabe-/Ausgabemeldungen handelt, während die Richtung, in die die Pfeile zeigen, zwischen Eingabe und Ausgabe unterscheidet.</p>
+
+<h3 id="Filtern_und_suchen"><a name="filtering-and-searching">Filtern und suchen</a></h3>
+
+<p>Sie können die Symbolleiste oben benutzen, um die angezeigten Ergebnisse zu verfeinern.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7561/web-console-toolbar-highlighted-de.png" style="display: block; height: 431px; margin-left: auto; margin-right: auto; width: 945px;">Sie können nur bestimmte Meldungen oder Meldungen, die einen bestimmten String enthalten, anzeigen lassen.</p>
+
+<p>Zuletzt können Sie diese Symbolleiste benutzen um die Aufzeichnungen zu löschen.</p>
+
+<dl>
+</dl>
+
+<h2 id="Der_Kommandozeileninterpreter"><a name="command-line">Der Kommandozeileninterpreter</a></h2>
+
+<p>Sie können JavaScript-Ausdrücke mit der von der Web-Konsole bereitgestellten Kommandozeile in Echtzeit interpretieren.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7563/web-console-commandline-highlighted-de.png" style="display: block; height: 431px; margin-left: auto; margin-right: auto; width: 945px;"></p>
+
+<h3 id="Ausdrücke_eingeben">Ausdrücke eingeben</h3>
+
+<p>Um Ausdrücke einzugeben, tippen Sie sie in die Kommandozeile ein und drücken Sie die Eingabetaste.</p>
+
+<p>Die Eingabe, die Sie eintippen, wird in der Meldungsansicht zusammen mit dem Ergebnis angezeigt:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7377/commandline-executejs.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Auf_Variablen_zugreifen">Auf Variablen zugreifen</h3>
+
+<p>Sie können auf Variablen, die auf der Seite definiert werden, zugreifen, egal ob eingebaute Variablen wie <code>window</code> oder Variablen, die von JavaScript-Code erstellt wurden, wie <code>jQuery</code>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7367/commandline-accessbuiltin.png" style="display: block; margin-left: auto; margin-right: auto;"><img alt="" src="https://mdn.mozillademos.org/files/7369/commandline-accesspageadded.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Automatische_Vervollständigung">Automatische Vervollständigung</h3>
+
+<p>Die Kommandozeile hat eine automatische Vervollständigung: geben Sie die ersten Buchstaben ein und ein Dialogfenster mit möglichen Vervollständigungen erscheint:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7567/commandline-autocomplete-de.png" style="display: block; height: 192px; margin-left: auto; margin-right: auto; width: 720px;">Drücken Sie die Eingabe- oder Tabulatortaste um den Vorschlag zu übernehmen, benutzen Sie die Pfeiltasten um zu einem anderen Vorschlag zu gelangen, oder tippen Sie einfach weiter, wenn Ihnen keines der Vorschläge gefällt.</p>
+
+<p>Die Konsole schlägt Vervollständigungen im Umfang des momentan ausgeführten Stack-Frames vor. Das heißt, wenn Sie ein Haltepunkt erreichen, bekommen Sie Vervollständigungen für für die Funktion lokale Objekte.</p>
+
+<p>Ab Firefox 30 können auch Array-Elemente automatisch vervöllständigt werden:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7383/commandline-arrayautocomplete.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Elemente_untersuchen">Elemente untersuchen</h3>
+
+<p>Falls das Ergebnis ein Objekt ist, wird es kursiv dargestellt. Beim Anklicken erscheint eine Ansicht mit weiteren Informationen zum Objekt:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7551/commandline-inspecting-de.png" style="display: block; height: 373px; margin-left: auto; margin-right: auto; width: 720px;">Um diese Ansicht zu schließen, drücken Sie die Escape-Taste.</p>
+
+<div class="geckoVersionNote">
+<p>Vor Firefox 30 erscheinen untersuchbare Objekte in eckigen Klammern und sind unterstrichen, wie <code><u>[Objekt Funktion]</u></code>.</p>
+</div>
+
+<h3 id="Variablen_festlegen">Variablen festlegen</h3>
+
+<p>Sie können Ihre eigenen Variablen festlegen und auf diese zugreifen:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7371/commandline-addingvariable1.png" style="display: block; margin-left: auto; margin-right: auto;"><img alt="" src="https://mdn.mozillademos.org/files/7373/commandline-addingvariable2.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Knoten_hervorheben_und_untersuchen">Knoten hervorheben und untersuchen</h3>
+
+<div class="geckoVersionNote">
+<p>Diese Funktion ist neu in Firefox 30.</p>
+</div>
+
+<p>Wenn Sie mit dem Mauszeiger über ein DOM-Element in der Konsolenausgabe fahren, wird es auf der Seite hervorgehoben:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7533/commandline-highlightnode-de.png" style="display: block; height: 596px; margin-left: auto; margin-right: auto; width: 715px;">In dem oberen Bildschirmfoto können Sie auch ein "Ziel"-Symbol in blau neben dem Knoten in der Konsolenausgabe sehen: klicken Sie darauf um den Knoten zu <a href="/en-US/docs/Tools/Page_Inspector">untersuchen</a>.</p>
+
+<h3 id="Befehlsverlauf">Befehlsverlauf</h3>
+
+<p>Die Kommandozeile merkt sich Ihre eingegebenen Befehle: um durch den Verlauf zu navigieren, benutzen Sie die Pfeiltasten.</p>
+
+<h3 id="Mit_iframes_arbeiten">Mit iframes arbeiten</h3>
+
+<div class="geckoVersionNote">
+<p>Diese Funktion ist neu in Firefox 30.</p>
+</div>
+
+<p>Wenn eine Seite über eingebettete <a href="/en-US/docs/Web/HTML/Element/iframe">iframes</a> verfügt, können Sie den <code>cd()</code>-Befehl benutzen um den Umfang der Konsole auf einen spezifischen iframe zu setzen und Funktionen, die im iframe-Dokument definiert werden, auszuführen. Es gibt drei Wege um ein iframe mit <code>cd()</code> auszuwählen:</p>
+
+<p>Sie können das iframe DOM-Element übergeben:</p>
+
+<pre class="brush: js">var frame = document.getElementById("frame1");
+cd(frame);</pre>
+
+<p>Sie können einen CSS-Selektor übergeben, der zum iframe gehört:</p>
+
+<pre class="brush: js">cd("#frame1");</pre>
+
+<p>Sie können den globalen Fensterobjekt des iframes übergeben:</p>
+
+<pre class="brush: js">var frame = document.getElementById("frame1");
+cd(frame.contentWindow);
+</pre>
+
+<p>Um zum übergeordneten Fenster zu wechseln, rufen Sie <code>cd()</code> ohne Argumente auf:</p>
+
+<pre class="brush: js">cd();</pre>
+
+<p>Nehmen wir beispielsweise an, wir haben ein Dokument, das ein iframe einbettet:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;iframe id="frame1" src="static/frame/my-frame1.html"&gt;&lt;/iframe&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Der iframe definiert eine neue Funktion:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+    &lt;script&gt;
+      function whoAreYou() {
+        return "I'm frame1";
+      }
+   &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>So können Sie den Umfang zum iframe wechseln:</p>
+
+<pre class="brush: js">cd("#frame1");</pre>
+
+<p>Nun werden Sie sehen, dass das Dokument des globalen Fensters der iframe ist:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7355/web-console-iframe-document.png" style="display: block; height: 75px; margin-left: auto; margin-right: auto; width: 632px;">Sie können auch die Funktion, die in dem iframe definiert wird, aufrufen:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7357/web-console-iframe-function.png" style="display: block; height: 77px; margin-left: auto; margin-right: auto; width: 632px;"></p>
+
+<h3 id="Hilfsbefehle">Hilfsbefehle</h3>
+
+<p>{{ page("/en/Using_the_Web_Console/Helpers", "Die Befehle") }}</p>
+
+<h2 id="Die_geteilte_Konsole">Die geteilte Konsole</h2>
+
+<div class="geckoVersionNote">
+<p>Die geteilte Konsole ist neu in Firefox 28.</p>
+</div>
+
+<p>{{EmbedYouTube("G2hyxhPHyXo")}}</p>
+
+<p>Ab Firefox 28 können Sie die Konsole zusammen mit anderen Werkzeugen benutzen. Während Sie in einem anderen Werkzeug in der Werkzeugkiste sind, drücken Sie die Escape-Taste oder die Schaltfläche "Erzwingen der Anzeige der Konsole umschalten, gegebenenfalls zusätzlich zum aktuellen Entwicklerwerkzeug" in der <a href="/en-US/docs/Tools_Toolbox#Toolbar">Werkzeugleiste</a>. Die Werkzeugkiste wird nun geteilt dargestellt, mit dem ursprünglichen Werkzeug über der Web-Konsole.</p>
+
+<p>Wie üblich funktioniert <code>$0</code> als Abkürzung für das in der Ansicht "Element unterschen" ausgewählte Element:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7535/web-console-split-inspector-de.png" style="display: block; height: 772px; margin-left: auto; margin-right: auto; width: 1006px;">Wenn Sie die geteilte Konsole zusammen mit dem Debugger benutzen, wird der Umfang der Konsole auf den momentan ausgeführten Stack-Frame beschränkt. Wenn Sie einen Haltepunkt einer Funktion erreichen, wird der Umfang auf diese Funktion beschränkt. Sie können in der Funktion definierte Objekte automatisch vervollständigen und spontan ändern:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6621/web-console-split-debugger.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Tastenkürzel">Tastenkürzel</h2>
+
+<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "web-console") }}</p>
+
+<h3 id="Allgemeine_Tastenkürzel">Allgemeine Tastenkürzel</h3>
+
+<h3 id="Page_(en-USdocstoolsKeyboard_shortcuts_all-toolbox-tools)">{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}</h3>
diff --git a/files/de/tools/webide/index.html b/files/de/tools/webide/index.html
new file mode 100644
index 0000000000..def42cbac3
--- /dev/null
+++ b/files/de/tools/webide/index.html
@@ -0,0 +1,280 @@
+---
+title: WebIDE
+slug: Tools/WebIDE
+translation_of: Archive/WebIDE
+---
+<div>{{ToolsSidebar}}</div><div class="geckoVersionNote">
+<p>Die WebIDE ist verfügbar in Firexfox 34 und neuer</p>
+
+<p>Du kannst sie aber auch schon in Firefox 33 aktivieren in dem du die Einstellungen veränderst: Besuche <a href="http://kb.mozillazine.org/About:config">about:config</a>, finde die Einstellung <code>devtools.webide.enabled</code> und stelle sie auf <code>true</code> um.</p>
+</div>
+
+<div class="summary">
+<p>Die WebIDE ist der Ersatz des <a href="/en-US/Firefox_OS/Using_the_App_Manager">App Managers</a>. Genauso wie der App Manager, kannst du mit der WebIDE <a href="/en-US/Firefox_OS">Firefox OS</a> Apps ausführen und debuggen mit dem <a href="/de/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> oder einem richtigen Firefox OS Gerät</p>
+
+<p>Darüber hinaus ist sie dir eine vollwertige Entwicklungsumgebung zur Erstellung und Bearbeitung deiner Firefox OS Apps.  WebIDE bietet eine Baumansicht zur strukturierten Anzeige, Bearbeitung und Sichern aller Dateien deiner App.  Für den leichten Einstieg helfen dir zwei App Templates.</p>
+</div>
+
+<p>{{EmbedYouTube("2xmj4W8O3E4")}}</p>
+
+<p>Mit der WebIDE, musst du zuerst <a href="/en-US/docs/Tools/WebIDE#Setting_up_runtimes">eine oder mehr Laufzeiten</a> erstellen. Eine Laufzeit ist eine Umgebung, in der du deine App ausführst und debuggst. Eine Laufzeit kann ein Gerät mit Firefox OS sein, welches per USB verbunden ist oder auch der <a href="/de/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a>.</p>
+
+<p>Als Nächstes <a href="/de/docs/Tools/WebIDE#Creating_and_opening_apps">öffnest oder erstellst du eine App</a>. Falls du eine neue App erstellst, beginnst du mit einer Vorlage, die die Verzeichnisstruktur und die minimalen Textbausteine enthält, die du zu Anfang benötigst. Du kannst auch mit einer umfangreicheren Vorlage anfangen, die zeigt, wie du eine privilegierte API benutzt. Die WebIDE zeigt deine App-Dateien in einer Baumansicht und du kannst sie mit dem eingebauten Quelleditor bearbeiten und speichern. Natürlich kannst du deine Apps auch mit deinen bevorzugten Werkzeugen entwickeln und die WebIDE nur zur Fehlersuche benutzen.</p>
+
+<p>Finally, you can <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Running_and_debugging_apps">install the app in one of the runtimes and run it</a>. You can then open the usual suite of developer tools - the <a href="/en-US/docs/Tools/Page_Inspector">Inspector</a>, <a href="/en-US/docs/Tools/Web_Console">Console</a>, <a href="/en-US/docs/Tools/Debugger">JavaScript Debugger</a> and so on - to examine and modify the running app.</p>
+
+<h2 id="System_requirements">System requirements</h2>
+
+<p>To develop and debug apps using the WebIDE, all you need is Firefox version 33 or later. To test on a real Firefox OS device, you need a device running Firefox OS 1.2 or later, and a USB cable.</p>
+
+<p>You can only use the WebIDE if you're targeting Firefox OS 1.2 or later.</p>
+
+<h2 id="Opening_the_WebIDE">Opening the WebIDE</h2>
+
+<p>In the Web Developer menu, click on the WebIDE entry and the WebIDE opens. You can also use the keybinding Shift-F8:<img alt="" src="https://mdn.mozillademos.org/files/8033/webide-initial.png" style="display: block; height: 560px; margin-left: auto; margin-right: auto; width: 720px;">The dropdown on the left labeled "Open App" lets you open existing apps or create new ones. The dropdown on the right labeled "Select Runtime" lets you select a runtime or set up a new runtime.</p>
+
+<p>The buttons in the middle run, stop, and debug the app: they are only enabled when you have opened an app and selected a runtime.</p>
+
+<h2 id="Setting_up_runtimes">Setting up runtimes</h2>
+
+<p>Under the "Select Runtime" dropdown, runtimes are grouped into three types:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Connecting_a_Firefox_OS_device">USB devices</a>: Firefox OS devices connected over USB</li>
+ <li><a href="/en-US/docs/Tools/WebIDE#Adding_a_Simulator">Simulators</a>: instances of the Firefox OS Simulator that you've installed</li>
+ <li><a href="/en-US/docs/Tools/WebIDE#Custom_runtimes">Custom</a>: use this to connect to the WebIDE using an arbitrary name and port.</li>
+</ul>
+
+<p>The first time you click the dropdown, you might not see any runtimes here:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8043/webide-no-runtimes.png" style="display: block; height: 564px; margin-left: auto; margin-right: auto; width: 723px;">The rest of this section describes how you can add some runtimes.</p>
+
+<h3 id="Connecting_a_Firefox_OS_device">Connecting a Firefox OS device</h3>
+
+<p>Before you can connect a Firefox OS device, there's some setup you have to go through:</p>
+
+<ul>
+ <li><strong>check your Firefox OS version: </strong>make sure your device is running Firefox OS 1.2/Boot2Gecko 1.2 or higher. To check the version, go to the Settings app on the device, then <code>Device Information &gt; Software</code>. If you don't have a high enough version, find your device in the <a href="/en-US/Firefox_OS/Developer_phone_guide">developer phone guide</a> and follow the instructions for upgrading.</li>
+ <li><strong>enable remote debugging: </strong>in the Settings app on the device, go to <code>Device information &gt; More information &gt; Developer</code>.
+  <ul>
+  </ul>
+
+  <ul>
+   <li>Firefox OS 1.3 and earlier: "Remote Debugging" is just a simple checkbox. Check it.</li>
+   <li>Firefox OS 1.4 and later: "Remote Debugging" asks you to enable for just ADB, or for ADB and DevTools. Select "ADB and DevTools".</li>
+  </ul>
+ </li>
+ <li><strong>disable Screen lock on your device:</strong> in the Settings app on the device, go to <code>Screen Lock</code> and unchecking the <code>Lock Screen</code> checkbox. This is a good idea because when the screen gets locked, the phone connection gets lost, meaning it is no longer available for debugging.</li>
+ <li><strong>if you want to debug certified apps, including built-in apps</strong>: see the section on <a href="/en-US/docs/Tools/WebIDE#Debugging_certified_apps">debugging certified apps</a>.</li>
+</ul>
+
+<div class="note">
+<p><strong>Linux only:</strong></p>
+
+<ul>
+ <li>add a <code>udev</code> rules file, as documented in step 3 of this guide to <a href="http://developer.android.com/tools/device.html#setting-up">setting up an Android device</a>. The <code>idVendor</code> attribute to use for the Geeksphone is "05c6", and <a href="http://developer.android.com/tools/device.html#VendorIds">this page</a> lists other <code>idVendor</code> values.</li>
+</ul>
+</div>
+
+<div class="note">
+<p><strong>Windows only:</strong></p>
+
+<ul>
+ <li>you need to install drivers, as documented in step 3 of this guide to <a href="http://developer.android.com/tools/device.html#setting-up">setting up an Android device</a>. You can find drivers for Geeksphone devices on the <a href="http://downloads.geeksphone.com/">Geeksphone web site</a>. Windows 8 by default will not let you install unsigned drivers. See this tutorial on <a class="external external-icon" href="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html" title="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html">"How to install an unsigned driver on Windows 8"</a>.</li>
+ <li>if the WebIDE can't see your device after following all the steps, you may have to <a class="external external-icon" href="http://blog.fh-kaernten.at/wehr/?p=1182">edit adb_usb.ini</a>.</li>
+</ul>
+</div>
+
+<p>If there are any other Android devices connected to your computer, disconnect them. Now connect the device to the computer using USB. You should see the device appear under "USB DEVICES":</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8045/webide-select-runtime-keon.png" style="display: block; height: 562px; margin-left: auto; margin-right: auto; width: 710px;"></p>
+
+<p>If you don't see your device, see the <a href="/en-US/docs/Tools/WebIDE/Troubleshooting">Troubleshooting</a> page.</p>
+
+<h3 id="Adding_a_Simulator">Adding a Simulator</h3>
+
+<p><span style="line-height: 1.5;">The <a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> is <span style="line-height: 1.5;">a version of the higher layers of Firefox OS</span> that simulates a Firefox OS device, but runs on the desktop</span><span style="line-height: 1.5;">. </span><span style="line-height: 1.5;">It runs in a window the same size as a Firefox OS device, includes the Firefox OS user interface and built-in apps, and simulates many of the Firefox OS device APIs.</span></p>
+
+<p><span style="line-height: 1.5;">This means that in many cases, you don't need a real device to test and debug your app. </span></p>
+
+<p>The Simulator is big, so it doesn't ship inside Firefox but as a Firefox <a href="/en-US/Add-ons">add-on</a>. If you click "Install Simulator" in the Runtimes dropdown menu, you will go to a page from which you can install Simulators for various versions of Firefox OS.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8039/webide-install-simulator.png" style="display: block; height: 560px; margin-left: auto; margin-right: auto; width: 720px;">You can install as many as you like. Be patient, though: the Simulator is large and may take a few minutes to download. Once you've installed some Simulators you can close this "Extra Components" window, and the Simulators you've installed appear as options in the Runtimes dropdown menu:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8047/webide-select-runtime-keon-simulator.png" style="display: block; height: 559px; margin-left: auto; margin-right: auto; width: 712px;">To learn more about the Simulator, see its <a href="/en-US/docs/Tools/Firefox_OS_Simulator">documentation page</a>.</p>
+
+<h3 id="Custom_runtimes">Custom runtimes</h3>
+
+<p>With a custom runtime you can use an arbitrary hostname and port to connect to the remote device.</p>
+
+<p>Under the hood, Firefox OS devices and Android devices connect to the desktop using a program called the Android Debug Bridge, or <a href="http://developer.android.com/tools/help/adb.html">ADB</a>. By default, the WebIDE uses an add-on called the ADB Helper: this simplifies the process for you by installing ADB and setting up port forwarding so the Firefox desktop tools can exchange messages with the device.</p>
+
+<p>This is convenient in most cases, but sometimes you might want to use ADB outside of the WebIDE: for example, you might be running ADB directly from the command line. In that case you'll connect to the device by specifying a host and port using the <a href="http://developer.android.com/tools/help/adb.html#forwardports"><code>adb forward</code></a> command.<br>
+ <br>
+ If you then want to use WebIDE to connect as well, you should <a href="https://support.mozilla.org/en-US/kb/disable-or-remove-add-ons#w_how-to-disable-extensions-and-themes">disable the ADB Helper add-on</a> and connect WebIDE using the Custom runtime option, entering the host and port that you passed to <code>adb forward</code>.</p>
+
+<p>Also, the ADB Helper does not yet support connecting to Firefox for Android, so if you want to connect WebIDE to Firefox for Android, you'll need to set up your own port forwarding and use a custom runtime. <a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">See more about connecting to Firefox for Android using ADB</a>.</p>
+
+<h2 id="Selecting_a_runtime">Selecting a runtime</h2>
+
+<p>Once you've set up a runtime you can select it using the "Select Runtime" menu.</p>
+
+<ul>
+ <li>If you select a Simulator, the WebIDE launches the Simulator.</li>
+ <li>If you select a Firefox OS device the WebIDE connects to the device. On the device a dialog will ask you to confirm that you wish to connect: press "OK".</li>
+</ul>
+
+<p>Now the "play" button in the center of the WebIDE toolbar is enabled: click it to install and run the app in the selected runtime.</p>
+
+<h3 id="Runtime_actions">Runtime actions</h3>
+
+<p>When a runtime is selected, the Runtimes dropdown menu has three extra items:</p>
+
+<ul>
+ <li><strong>Runtime Info</strong>: information on the current runtime</li>
+ <li><strong>Permissions Table</strong>: a table summarising <a href="/en-US/Apps/Build/App_permissions">app permissions</a> for the current runtime, indicating, for each API and each <a href="/en-US/Marketplace/Options/Packaged_apps#Types_of_packaged_apps">app type</a>, whether access is allowed (✓), denied (✗), or whether the user is prompted (!)</li>
+ <li><strong>Screenshot</strong>: a command to take a screenshot from the runtime</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8147/webide-runtimes-menu.png" style="display: block; height: 596px; margin-left: auto; margin-right: auto; width: 789px;"></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8145/webide-runtimeinfo.png" style="display: block; height: 593px; margin-left: auto; margin-right: auto; width: 753px;"><img alt="" src="https://mdn.mozillademos.org/files/8149/webide-permissions.png" style="display: block; height: 593px; margin-left: auto; margin-right: auto; width: 753px;"></p>
+
+<h2 id="Creating_and_opening_apps">Creating and opening apps</h2>
+
+<p>Under the "Open App" menu you get three options: create a new app, open a packaged app, and open a hosted app:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8049/webide-open-app-empty.png" style="display: block; height: 562px; margin-left: auto; margin-right: auto; width: 723px;"></p>
+
+<h3 id="Create_a_new_app">Create a new app</h3>
+
+<p>Select "New App..." to create a new app. You'll see a dialog offering you a choice between two templates, "Privileged Empty App" and "Privileged App".</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8053/webide-new-app.png" style="display: block; height: 591px; margin-left: auto; margin-right: auto; width: 739px;"></p>
+
+<p>Both templates are from Mozilla's <a href="https://github.com/mozilla/mortar">app template collection</a>, and provide you with the basic structure you need to get started. The "Privileged App" shows how an app can use permissions to load cross-origin content.</p>
+
+<p>Once you've selected a template you'll be asked to name the app and select a directory to store the files, and then the new app is opened in the <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">project editor</a>.</p>
+
+<h3 id="Open_a_packaged_app">Open a packaged app</h3>
+
+<p>Select "Open Packaged App..." to open a <a href="/en-US/Marketplace/Options/Packaged_apps">packaged app</a>. You'll be asked to select a directory containing the app's <a href="/en-US/Apps/Build/Manifest">manifest</a>, and the app will be opened in the <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">project editor</a>.</p>
+
+<h3 id="Open_a_hosted_app">Open a hosted app</h3>
+
+<p>Select "Open Hosted App..." to open a <a href="/en-US/Marketplace/Options/Hosted_apps">hosted app</a>. You'll be asked to enter a URL pointing to the app's <a href="/en-US/Apps/Build/Manifest">manifest</a>, and the app will be opened in the <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">project editor</a>.</p>
+
+<h2 id="Editing_apps">Editing apps</h2>
+
+<p>The project editor provides an environment for editing apps. There's a tree view on the left of all the files in the app: you can add and delete files here using a context menu. There's an editor pane on the right.</p>
+
+<h3 id="The_app_summary_page">The app summary page</h3>
+
+<p>When you first open or create an app, the editor pane is occupied by the app summary page, which is shown below:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8055/webide-new-app-editor.png" style="display: block; height: 625px; margin-left: auto; margin-right: auto; width: 846px;"></p>
+
+<p>You can always get back to the app summary page by clicking on the root of the tree on the left.</p>
+
+<h3 id="Manifest_validation">Manifest validation</h3>
+
+<p>The WebIDE automatically checks the manifest for certain common problems. If it finds a problem it indicates that the app is invalid and describes the problem in the app's summary:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8063/webide-invalid-manifest.png" style="display: block; height: 626px; margin-left: auto; margin-right: auto; width: 847px;"></p>
+
+<p>Of course, you can edit the <a href="/en-US/Apps/Build/Manifest">manifest.webapp</a> file right in the project editor as well.</p>
+
+<h3 id="The_source_editor">The source editor</h3>
+
+<p>The WebIDE uses the <a href="http://codemirror.net/">CodeMirror</a> source editor.</p>
+
+<h4 id="Source_editor_shortcuts">Source editor shortcuts</h4>
+
+<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}</p>
+
+<h4 id="Code_completion">Code completion</h4>
+
+<p>When editing CSS and JavaScript, the editor provides autocomplete suggestions. CSS autocompletion is always enabled:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8057/webide-css-autocomplete.png" style="display: block; height: 628px; margin-left: auto; margin-right: auto; width: 849px;">To display autocomplete suggestions in JavaScript press Control + Space:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8059/webide-js-autocomplete.png" style="display: block; height: 653px; margin-left: auto; margin-right: auto; width: 867px;"></p>
+
+<h4 id="Inline_documentation">Inline documentation</h4>
+
+<p>The editor also shows inline documentation for JavaScript. Press Shift + Space to see a popup containing documentation for the symbol your cursor is on:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8061/webide-js-inline-docs.png" style="display: block; height: 652px; margin-left: auto; margin-right: auto; width: 872px;"></p>
+
+<p>Clicking the <code>[docs]</code> link in the popup will take you to the MDN page for the symbol.</p>
+
+<h4 id="Saving_files">Saving files</h4>
+
+<p>For changes to your files to take effect you need to save them. Files with unsaved changes get an asterisk next to their name in the tree view, and you can save files using the menu or Control+S (Command+S on Mac OS X).</p>
+
+<h3 id="Removing_projects">Removing projects</h3>
+
+<p>To remove an app from the WebIDE, go to the <a href="/en-US/docs/Tools/WebIDE#The_app_summary_page">app summary page</a> and click "Remove Project".</p>
+
+<h2 id="Running_and_debugging_apps">Running and debugging apps</h2>
+
+<p>When you're ready to run the app, you need to <a href="/en-US/docs/Tools/WebIDE#Selecting_a_runtime">select a runtime from the "Select Runtime" dropdown menu</a>. If you don't have any available runtimes here, find out how to add some in <a href="/en-US/docs/Tools/WebIDE#Setting_up_runtimes">Setting up runtimes</a>.</p>
+
+<p>The "play" button in the center of the WebIDE toolbar is now enabled: click it to install and run the app in the selected runtime:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8065/webide-running.png" style="display: block; height: 718px; margin-left: auto; margin-right: auto; width: 1314px;">To debug the app, click the "Pause" button and the Developer Tools <a href="/en-US/docs/Tools/Tools_Toolbox">Toolbox</a> appears, connected to your app:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8067/webide-debugging.png" style="display: block; height: 688px; margin-left: auto; margin-right: auto; width: 1310px;">Exactly which tools you'll have available depends on the runtime, but you will at least have the basics: the <a href="/en-US/docs/Tools/Page_Inspector">Inspector</a>, <a href="/en-US/docs/Tools/Web_Console">Console</a>, <a href="/en-US/docs/Tools/Debugger">JavaScript Debugger</a>, <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a>, <a href="/en-US/docs/Tools/Profiler">Profiler</a> and <a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a>. Just as in a web page, any changes you make in the tools are visible immediately in the app, but are not persistent. Conversely, any changes you make in the editor pane can be saved straight back to disk, but are not visible without restarting the app.</p>
+
+<h3 id="Debugging_certified_apps">Debugging certified apps</h3>
+
+<p>With the Simulator, if you click on the app dropdown menu while the runtime is selected, you can see and debug not only your app but all apps running in that runtime, including <a href="/en-US/Marketplace/Options/Packaged_apps#Certified_app">certified apps</a>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8069/webide-debugging-builtin.png" style="display: block; height: 681px; margin-left: auto; margin-right: auto; width: 1302px;"></p>
+
+<p><br>
+ However, to debug certified apps on a real device:</p>
+
+<ul>
+ <li>the device must be running a development build of Firefox OS 1.2+</li>
+ <li>you must enable certified app debugging</li>
+</ul>
+
+<p>To enable certified app debugging, connect to the runtime, and then, in the menu, go to <code>Runtime &gt; Runtime Info</code>. From here, if you see <code>"DevTools restricted privileges: yes</code>", that means certified apps can't be debugged. The path then differs depending on what you are debugging against:</p>
+
+<ul>
+ <li>Real device
+  <ul>
+   <li>If it can be rooted, clicking <code>"request higher privileges"</code> will enable certified apps debugging (Firefox OS will restart).</li>
+  </ul>
+ </li>
+ <li>Simulator
+  <ul>
+   <li>The simulators come with certified debugging enabled by default.</li>
+  </ul>
+ </li>
+ <li>B2G desktop
+  <ul>
+   <li>Manually edit the B2G desktop client <a href="https://developer.mozilla.org/en-US/Firefox_OS/Using_the_App_Manager#Using_the_B2G_desktop_client">preferences</a> before connecting to enable certified app debugging.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Now (or after a restart of the B2G desktop client) in the WebIDE you should see all the certified apps on the device.</p>
+
+<h2 id="Monitoring_performance">Monitoring performance</h2>
+
+<p>If you're interested in the performance of your apps, there are a few ways to measure their impact on the runtime in WebIDE:</p>
+
+<ul>
+ <li>The <a href="/docs/Tools/WebIDE/Monitor">Monitor</a> panel offers a good overview of a device's performance. This can help you detect problems, e.g. a sudden, excessive increase in an app's memory usage (leak).</li>
+ <li>The <a href="/docs/Tools/Profiler">Profiler</a> tool gives you a way to analyze a single app's footprint in great detail. This is especially useful when investigating a known performance problem.</li>
+</ul>
+
+<h2 id="Troubleshooting">Troubleshooting</h2>
+
+<p>If you have any problems working with the WebIDE, see the <a href="/en-US/docs/Tools/WebIDE/Troubleshooting">Troubleshooting</a> page.</p>
+
+<p> </p>
+
+<p> </p>
diff --git a/files/de/tools/webide/problemlösung/index.html b/files/de/tools/webide/problemlösung/index.html
new file mode 100644
index 0000000000..1e15175d33
--- /dev/null
+++ b/files/de/tools/webide/problemlösung/index.html
@@ -0,0 +1,165 @@
+---
+title: WebIDE Problemlösung
+slug: Tools/WebIDE/Problemlösung
+translation_of: Archive/WebIDE/Troubleshooting
+---
+<div>{{ToolsSidebar}}</div><h2 id="Mit_einem_Firefox-OS-Gerät_verbinden">Mit einem Firefox-OS-Gerät verbinden</h2>
+
+<p>Wenn du mit dem WebIDE eine Verbindung zu deinem Firefox-OS-Gerät herstellen möchtest, das Gerät aber nicht angezeigt wird, prüfe folgendes:</p>
+
+<ul>
+ <li>Überprüfe die Firefox OS-Version:<br>
+  Stell sicher, dass auf Deinem Gerät <strong>Firefox OS 1.2/ Boot2Gecko 1.2</strong> oder höher läuft. Um die Version zu prüfen, starte die SettingsApp (Einstellungen) und gehe zu <code>Device Information &gt; Software (Geräteinformationen &gt; Software)</code>. Wenn Deine Version zu alt ist, finde dein Gerät im <a href="/de/Firefox_OS/Developer_phone_guide">Developer Phone Guide</a> und folge den Anweisungen zum Upgraden.</li>
+ <li>Erlaube das Remote Debugging (Externes Debuggen):
+  <ul>
+   <li>Gehe in der SettingsApp (Einstellungen) zu <code>Device Information &gt; More information &gt; Developer &gt; Debugging via USB (Geräteinformation &gt; Weitere Informationen &gt; Entwickler &gt; Debuggen über USB)</code>
+    <ul>
+     <li>in Firefox OS 1.3 und früher: "Remote Debugging" ist eine einfache Checkbox um dieses zu aktivieren.</li>
+     <li>in Firefox OS 1.4 und später: "Remote Debugging" fragt ob nur ADB oder ADB und DevTools erlaubt werden sollen. Wähle hier "ADB und DevTools"</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+ <li>Deaktiviere das Abschalten des Bildschirms:<br>
+  Gehe in den Einstellungen auf deines Gerätes (Settings-App) auf "Bildschirm sperren" und entferne das Häkchen. Warum? Wenn der Bildschirm gesperrt wird, verliert das Gerät die Verbindung und steht für das Remote Debugging nicht mehr zur Verfügung.</li>
+ <li>Achte darauf, dass kein anderes Android-Gerät zur selben Zeit mit dem Computer verbunden ist, ausser dem Firefox-OS-Gerät.</li>
+ <li>Überprüfe das USB-Kabel:
+  <ul>
+   <li>Zieh das USB-Kabel heraus und verbinde es erneut.</li>
+   <li>Prüfe das Kabel an einem anderen Rechner und auch an anderen USB-Anschlüssen.</li>
+   <li>Versuche ein anderes USB-Kabel. Die mit dem Gerät mitgelieferten Kabel sind meist von minderer Qualität und fallen oft aus.</li>
+   <li>Versuche ein kürzeres USB-Kabel. Es ist bekannt, dass längere Kabel nicht so gut arbeiten.</li>
+  </ul>
+ </li>
+ <li>Deaktiviere und aktiviere erneut das Remote Debugging auf dem Firefox-OS-Gerät.</li>
+ <li><a href="/de/docs/Tools/WebIDE#Custom_runtimes">Wenn du das "ADB Addon Helper" deaktiviert hast</a>. Kannst du erfolgreich den Befehl <code>adb forward</code> ausführen?</li>
+ <li>Wenn du Linux nutzt:
+  <ul>
+   <li>Stelle sicher, dass du die <code>udev rules</code> so angepasst hast, wie im dritten Schritt der Anleitung <a href="http://developer.android.com/tools/device.html#setting-up">Gerät zum Entwickeln vorbereiten</a>. Die <code>idVendor</code>-Eigenschaft für Geeksphone ist "05c6". Weitere Werte für <code>idVendor</code> findest du auf <a href="http://developer.android.com/tools/device.html#VendorIds">dieser Seite</a>. Starte nun <code>adb devices</code> um sicher zu gehen, dass das Gerät gelistet wird. Wenn du "keine Berechtigung"  hast, starte den adb-Server neu (z.B. <code>adb kill-server;adb start-server</code>).</li>
+   <li>Wenn du das <code>android-tools-adb</code>-Paket von Debian nutzt, kann es sein, dass der ADB Helper verlangt alle existierenden ADB-Server zu schließen. Dieses Paket deaktiviert die TCP-Verbindung, die ADB Helper nutzt.</li>
+  </ul>
+ </li>
+ <li>Wenn du Windows nutzt:
+  <ul>
+   <li>Du musst alle Treiber wie in Schritt 3 der Anleitung <a href="http://developer.android.com/tools/device.html#setting-up">Gerät zum Entwickeln vorbereiten</a> installiert haben. Treiber für Geekphones findest auf der Geeksphone-Website und für Google-Geräte auf der Google-Website.<br>
+    Windows 8-Benutzer: Standardmäßig verweigert Windows 8 das Installieren von nicht-signierten Treibern. Bei Problemen, schau dir dieses Tutorial an: <a href="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html">"Wie installiert man unsignierte Treiber in Windows 8"</a>.</li>
+   <li>Wenn das WebIDE dein Gerät nach all diesen Schritten immer noch nicht erkennt, wirst du wohl die <a href="http://blog.fh-kaernten.at/wehr/?p=1182">adb_usb.ini editieren</a> müssen.</li>
+  </ul>
+ </li>
+ <li>Wenn du Mac OS X nutzt:
+  <ul>
+   <li>Treten Timeout-Fehler beim Verbinden mit einem Simulator und dem realen Gerät auf, kannst du dich vermutlich aufgrund einer fehlenden oder falschen /etc/hosts-Datei nicht mit localhost verbinden. Erstelle die Datei und lösche den DNS-Cache, <a href="https://discussions.apple.com/thread/2729411?tstart=0">wie hier beschrieben</a>.</li>
+   <li>
+    <p>Bist du ein EasyTether-User, musst du EasyTether deaktivieren oder deinstallieren: <code>sudo kextunload /System/Library/Extensions/EasyTetherUSBEthernet.kext</code></p>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Über_Wi-Fi_mit_Firefox_OS_verbinden">Über Wi-Fi mit Firefox OS verbinden</h2>
+
+<ul>
+ <li>Überprüfe deine Firefox Version: Wi-Fi-Debugging setzt Firefox 39 oder höher voraus, sowie ein Firefox OS-Gerät mit laufendem Firefox OS 3.0 vom 27.03.2015 oder später.</li>
+ <li>Sowohl der Computer als auch das Firefox OS-Gerät müssen mit dem selben Wi-Fi-Netzwerk verbunden werden
+  <ul>
+   <li>Der Computer darf <strong>nicht </strong>über Kabel an den Router angeschlossen sein. Beide Geräte müssen über Wi-Fi verbunden werden.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Über_USB_mit_Firefox_für_Android_verbinden">Über USB mit Firefox für Android verbinden</h2>
+
+<p>Wenn du versucht dich mit einer laufenden Firefox Anwendung auf deinem Android-Gerät zu verbinden und dieses nicht angezeigt wird, versuche folgendes:</p>
+
+<ul>
+ <li>Überprüfe deine Firefox-Version: Firefox für Android muss in Version 36 oder höher vorliegen. Das WebIDE kann ältere Versionen nicht automatisch erkennen, dafür muss Port Forwarding aktiviert werden und mit dem Geräte-Port verbunden werden - folge <a href="/de/docs/Tools/Remote_Debugging/Firefox_for_Android">dieser Anleitung</a>.</li>
+ <li>Überprüfe, ob Externes Debugging aktiviert ist, gehe hierzu in die Einstellungen &gt; Entwicklerwerkzeuge &gt; Externes Debuggen und setzte ein Häkchen.</li>
+ <li>Überprüfe, ob USB Debugging in den Entwickler-Einstellungen deines Gerätes aktiviert ist.</li>
+ <li>Wenn du dein Gerät im WebIDE-Fenster immernoch nicht siehst, versuche Externes Debuggen auf dem Gerät erneut zu aktivieren:
+  <ul>
+   <li>Entferne die Verbindung zwischen deinem Computer und dem Gerät und schalte Externes Debuggen aus.</li>
+   <li>Verbinde das Gerät erneut und schalte Externes Debuggen ein -  das startet die Debugger-Instanz auf dem Gerät neu.</li>
+   <li>Versuche erneut eine WebIDE-Verbindung herzustellen.</li>
+  </ul>
+ </li>
+ <li>Wenn du Linux nutzt:
+  <ul>
+   <li>Stelle sicher, dass du die <code>udev rules</code> so angepasst hast, wie im dritten Schritt der Anleitung <a href="http://developer.android.com/tools/device.html#setting-up">Gerät zum Entwickeln vorbereiten</a>. Die <code>idVendor</code>-Eigenschaft für Geeksphone ist "05c6". Weitere Werte für <code>idVendor </code>findest du auf <a href="http://developer.android.com/tools/device.html#VendorIds">dieser Seite</a>. Starte nun <code>adb devices</code> um sicher zu gehen, dass das Gerät gelistet wird. Wenn du "keine Berechtigung"  hast, starte den adb-Server neu (z.B. <code>adb kill-server;adb start-server</code>).</li>
+   <li>Wenn du das <code>android-tools-adb</code>-Paket von Debian nutzt, kann es sein, dass der ADB Helper verlangt alle existierenden ADB-Server zu schließen. Dieses Paket deaktiviert die TCP-Verbindung, die ADB Helper nutzt.</li>
+  </ul>
+ </li>
+ <li>Wenn du Windows nutzt:
+  <ul>
+   <li>Überprüfe, ob das Gerät richtig verbunden ist und das es den Google USB Treiber benutzt, der im Android SDK enthalten ist.</li>
+  </ul>
+ </li>
+ <li>Wenn du Mac OS X nutzt:
+  <ul>
+   <li>
+    <p>Bist du ein EasyTether-User, musst du EasyTether deaktivieren oder deinstallieren: <code>sudo kextunload /System/Library/Extensions/EasyTetherUSBEthernet.kext</code></p>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Über_Wi-Fi_mit_Firefox_für_Android_verbinden">Über Wi-Fi mit Firefox für Android verbinden</h2>
+
+<ul>
+ <li>Überprüfe deine Firefox Version: Wi-Fi-Debugging setzt Firefox 42 oder höher voraus, sowie ein Android-Gerät mit installiertem Firefox in Version 42 oder höher.</li>
+ <li>Sowohl der Computer als auch das Firefox OS-Gerät müssen mit dem selben Wi-Fi-Netzwerk verbunden werden
+  <ul>
+   <li>Der Computer darf <strong>nicht </strong>über Kabel an den Router angeschlossen sein. Beide Geräte müssen über Wi-Fi verbunden werden.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Verbindung_zu_anderen_Browsern_herstellen_(Chrome_Safari_iOS)">Verbindung zu anderen Browsern herstellen (Chrome, Safari, iOS)</h2>
+
+<p>WebIDE nutzt <a href="/de/docs/Tools/Valence">Valence (Firefox Tools Adapter)</a>, um sich mit anderen Browsern, wie Chrome, Safari oder iOS, zu verbinden.</p>
+
+<p>Wenn du Probleme bei der Verbindung mit anderen Browsern hast, überprüfe die Installationsschritte und andere Hinweise für diese Browser auf der <a href="/de/docs/Tools/Valence">Valence-Seite</a>.</p>
+
+<h2 id="Manche_Apps_sind_nicht_debuggbar">Manche Apps sind nicht debuggbar</h2>
+
+<p>Wenn du der Meinung bist, dass zertifizierte Apps, eingebaute Apps oder bereits auf einem echten Gerät installierte Apps nicht debuggbar sind, dann kann dies durch die Restricted Privileges Security Policies des WebIDE (dt.: Sicherheitsrichtlinien für beschränkte Berechtigungen) ausgelöst werden. Für mehr Informationen sieh dir <a href="/de/docs/Tools/WebIDE#Unrestricted_app_debugging_%28including_certified_apps.2C_main_process.2C_etc.%29">Unrestricted app debugging (including certified apps, main process, etc.)</a> (dt.: Unbeschränktes App-Debugging) an.</p>
+
+<h2 id="Die_Projekt-Liste_kann_nicht_geladen_werden">Die Projekt-Liste kann nicht geladen werden</h2>
+
+<p>Wenn du das WebIDE in einer Firefox-Version öffnest und dann zu einer früheren Version von Firefox mit dem selben Profil wechselst, kann es passieren, dass der Fehler "Die Projekt-Liste kann nicht geladen werden" beim Öffnen des WebIDE mit der früheren Version auftritt.</p>
+
+<p>Dieser Fehler tritt auf, da das vom WebIDE genutzte Speicherungssystem in neuere Versionen die Daten verschiebt und restrukturiert. Somit wird die Projekt-Liste unbenutzbar für frühere Versionen</p>
+
+<p>Die Daten gehen dabei nicht verloren, aber du wirst die neueste Version von Firefox nutzen müssen, um deine Projekt-Liste nutzen zu können.</p>
+
+<p>Wenn du wirklich eine ältere Version von Firefox benutzen willst, kannst du versuchen einfach die Projekt-Liste zu löschen, dieser Weg wird jedoch nicht empfohlen und wird nicht unterstützt. Es können Probleme auftreten und Daten verloren gehen.</p>
+
+<p>Anleitung:</p>
+
+<ol>
+ <li>Schließe Firefox.</li>
+ <li>Öffne den Firefox-Profil-Ordner.</li>
+ <li>Öffne den darin enthaltenen <code>storage</code>-Ordner.</li>
+ <li>An manchen Stellen des Dateibaums sollten Dateien oder Ordner mit folgendem Namen beginnen: <code>4268914080AsptpcPerjo</code>  (gehashter Name der Datenbank).
+  <ul>
+   <li>Beispielsweise kann solch eine Datei im Ordner <code>/storage/permanent/indexeddb+++fx-devtools/idb</code> sein.</li>
+  </ul>
+ </li>
+ <li>Lösche alle so aussehenden Dateien und Ordner.</li>
+ <li>Starte Firefox und WebIDE neu.</li>
+</ol>
+
+<h2 id="Logging_aktivieren">Logging aktivieren</h2>
+
+<p>Du kannst auch die ausführliche Protokollierung aktivieren, um eine genauere Diagnose zu erhalten:</p>
+
+<ol start="1" style="list-style-type: decimal;">
+ <li>Öffne <a class="external external-icon" href="http://kb.mozillazine.org/About:config">about:config</a>.</li>
+ <li>Erstelle eine neue Einstellung, die <code>extensions.adbhelper@mozilla.org.sdk.console.logLevel</code> heißt. und den String-Inhalt <code>all </code>enthält.</li>
+ <li>Setze den Wert von <code>extensions.adbhelper@mozilla.org.debug</code> auf <code>true</code>.</li>
+ <li>Öffne den <a href="/de/kb/disable-or-remove-add-ons">AddOns-Manager</a>, deaktivere und reaktiviere das ADB Helper-AddOn.</li>
+ <li>Öffne die <a href="/de/docs/Tools/Browser_Console">Browser-Konsole</a>, dort kannst du nun Eintragungen mit dem Präfix <code>adb</code> sehen. Wenn dir diese Eintragungen nichts sagen, dann <a href="#Get_help">frage bitte nach Hilfe</a>.</li>
+</ol>
+
+<h2 id="Hilfe_bekommen">Hilfe bekommen</h2>
+
+<p>Gehe in den <a class="external external-icon" href="https://wiki.mozilla.org/DevTools/GetInvolved#Communication">#devtools room on IRC</a> und es wird versucht dir zu helfen (Vorwiegend englischer IRChat).</p>
diff --git a/files/de/tools/webide_clone/index.html b/files/de/tools/webide_clone/index.html
new file mode 100644
index 0000000000..c0be23b241
--- /dev/null
+++ b/files/de/tools/webide_clone/index.html
@@ -0,0 +1,279 @@
+---
+title: WebIDE
+slug: Tools/WebIDE_clone
+---
+<div>{{ToolsSidebar}}</div><div class="geckoVersionNote">
+<p>Die WebIDE ist in Firexfox 34 und neuer verfügbar</p>
+
+<p>Du kannst sie bereits in Firefox 33 aktivieren. Besuche hierzu <a href="http://kb.mozillazine.org/About:config">about:config</a>, gehe zur Einstellung <code>devtools.webide.enabled</code> und setzte den Wert auf <code>true</code>.</p>
+</div>
+
+<div class="summary">
+<p>Die WebIDE ersetzt den <a href="/en-US/Firefox_OS/Using_the_App_Manager">App Manager</a>. Genau wie im App Manager kannst du mit der WebIDE <a href="/en-US/Firefox_OS">Firefox OS</a> Apps mithilfe des <a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> oder einem richtigen Firefox OS Gerät ausführen und debuggen.</p>
+
+<p>Darüber hinaus ist es eine vollwertige Entwicklungsumgebung zur Erstellung und Bearbeitung deiner Firefox OS Apps. Sie bietet eine Baumansicht zur strukturierten Anzeige, Bearbeitung und Sicherung aller Dateien deiner App. Für die Erleichterung deines Einstiegs helfen dir zwei App Templates.</p>
+</div>
+
+<p>{{EmbedYouTube("2xmj4W8O3E4")}}</p>
+
+<p>In der WebIDE, musst du zuerst <a href="/en-US/docs/Tools/WebIDE#Setting_up_runtimes">ein oder mehrere Laufzeiten</a> erstellen. Eine Laufzeit ist eine Umgebung, in der du deine Apps ausführst und debuggst. Sie ist entweder ein Firefox OS Gerät, welches per USB verbunden ist oder der Firefox OS Simulator.</p>
+
+<p>Als nächstes kannst du eine <a href="/en-US/docs/Tools/WebIDE#Creating_and_opening_apps">App erstellen oder öffnen</a>. Wenn du eine neue App öffnest beginnst du mit einem Template, welches bereits das mindeste an Ordnerstrucktur und Code enthält, was du für den Start benötigst. Du kannst auch mit einem umfangreicheren Code Template anfangen, welcher dir Zeigt, wie man mit privilegierte APIs umgeht. Deine App Dateien werden in einer Baumansicht dargestellt und mithilfe des eingebauten Quelleditors kannst du sie jederzeit komfortabel ändern und speichern. Natürlich kannst du auch mit deinem Quelleditor deiner Wahl arbeiten und die WebIDE nur zum debuggen verwenden.</p>
+
+<p>Zum Schluss kannst du deine <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Running_and_debugging_apps">App in eine der Laufzeiten installieren und ausführen</a>. Ab dann kannst du auch zu den üblichen Entwickler Tools, wie <a href="/en-US/docs/Tools/Page_Inspector">Inspector</a>, <a href="/en-US/docs/Tools/Web_Console">Console</a>, <a href="/en-US/docs/Tools/Debugger">JavaScript Debugger</a> und mehr zurückgreifen, um deine laufende App zu prüfen und modifizieren.</p>
+
+<h2 id="Systemanforderungen">Systemanforderungen</h2>
+
+<p>Alles was du zum Entwickeln und Debugging mit der WebIDE benötigst ist Firefox Version 33 oder höher. Zum Test deiner App auf einem echten Firefox OS Gerät benötigst du ein Gerät mit min. Firefox OS 1.2 und einem USB Kabel.</p>
+
+<p>Du kannst die WebIDE nur nutzen, wenn du dich auf Firefox OS 1.2 oder höher ausrichtest.</p>
+
+<h2 id="Öffnen_der_WebIDE">Öffnen der WebIDE</h2>
+
+<p>Klick hierzu im Web Entwickler Menü auf den WebIDE Eintrag. Die WebIDE sollte sich öffnen. Alternativ kannst du auch die Tastenkombination Shift-F8 nutzen:<img alt="" src="https://mdn.mozillademos.org/files/8033/webide-initial.png" style="display: block; height: 560px; margin-left: auto; margin-right: auto; width: 720px;">The dropdown on the left labeled "Open App" lets you open existing apps or create new ones. The dropdown on the right labeled "Select Runtime" lets you select a runtime or set up a new runtime.</p>
+
+<p>The buttons in the middle run, stop, and debug the app: they are only enabled when you have opened an app and selected a runtime.</p>
+
+<h2 id="Setting_up_runtimes">Setting up runtimes</h2>
+
+<p>Under the "Select Runtime" dropdown, runtimes are grouped into three types:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Connecting_a_Firefox_OS_device">USB devices</a>: Firefox OS devices connected over USB</li>
+ <li><a href="/en-US/docs/Tools/WebIDE#Adding_a_Simulator">Simulators</a>: instances of the Firefox OS Simulator that you've installed</li>
+ <li><a href="/en-US/docs/Tools/WebIDE#Custom_runtimes">Custom</a>: use this to connect to the WebIDE using an arbitrary name and port.</li>
+</ul>
+
+<p>The first time you click the dropdown, you might not see any runtimes here:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8043/webide-no-runtimes.png" style="display: block; height: 564px; margin-left: auto; margin-right: auto; width: 723px;">The rest of this section describes how you can add some runtimes.</p>
+
+<h3 id="Connecting_a_Firefox_OS_device">Connecting a Firefox OS device</h3>
+
+<p>Before you can connect a Firefox OS device, there's some setup you have to go through:</p>
+
+<ul>
+ <li><strong>check your Firefox OS version: </strong>make sure your device is running Firefox OS 1.2/Boot2Gecko 1.2 or higher. To check the version, go to the Settings app on the device, then <code>Device Information &gt; Software</code>. If you don't have a high enough version, find your device in the <a href="/en-US/Firefox_OS/Developer_phone_guide">developer phone guide</a> and follow the instructions for upgrading.</li>
+ <li><strong>enable remote debugging: </strong>in the Settings app on the device, go to <code>Device information &gt; More information &gt; Developer</code>.
+  <ul>
+  </ul>
+
+  <ul>
+   <li>Firefox OS 1.3 and earlier: "Remote Debugging" is just a simple checkbox. Check it.</li>
+   <li>Firefox OS 1.4 and later: "Remote Debugging" asks you to enable for just ADB, or for ADB and DevTools. Select "ADB and DevTools".</li>
+  </ul>
+ </li>
+ <li><strong>disable Screen lock on your device:</strong> in the Settings app on the device, go to <code>Screen Lock</code> and unchecking the <code>Lock Screen</code> checkbox. This is a good idea because when the screen gets locked, the phone connection gets lost, meaning it is no longer available for debugging.</li>
+ <li><strong>if you want to debug certified apps, including built-in apps</strong>: see the section on <a href="/en-US/docs/Tools/WebIDE#Debugging_certified_apps">debugging certified apps</a>.</li>
+</ul>
+
+<div class="note">
+<p><strong>Linux only:</strong></p>
+
+<ul>
+ <li>add a <code>udev</code> rules file, as documented in step 3 of this guide to <a href="http://developer.android.com/tools/device.html#setting-up">setting up an Android device</a>. The <code>idVendor</code> attribute to use for the Geeksphone is "05c6", and <a href="http://developer.android.com/tools/device.html#VendorIds">this page</a> lists other <code>idVendor</code> values.</li>
+</ul>
+</div>
+
+<div class="note">
+<p><strong>Windows only:</strong></p>
+
+<ul>
+ <li>you need to install drivers, as documented in step 3 of this guide to <a href="http://developer.android.com/tools/device.html#setting-up">setting up an Android device</a>. You can find drivers for Geeksphone devices on the <a href="http://downloads.geeksphone.com/">Geeksphone web site</a>. Windows 8 by default will not let you install unsigned drivers. See this tutorial on <a class="external external-icon" href="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html" title="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html">"How to install an unsigned driver on Windows 8"</a>.</li>
+ <li>if the WebIDE can't see your device after following all the steps, you may have to <a class="external external-icon" href="http://blog.fh-kaernten.at/wehr/?p=1182">edit adb_usb.ini</a>.</li>
+</ul>
+</div>
+
+<p>If there are any other Android devices connected to your computer, disconnect them. Now connect the device to the computer using USB. You should see the device appear under "USB DEVICES":</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8045/webide-select-runtime-keon.png" style="display: block; height: 562px; margin-left: auto; margin-right: auto; width: 710px;"></p>
+
+<p>If you don't see your device, see the <a href="/en-US/docs/Tools/WebIDE/Troubleshooting">Troubleshooting</a> page.</p>
+
+<h3 id="Adding_a_Simulator">Adding a Simulator</h3>
+
+<p><span style="line-height: 1.5;">The <a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> is <span style="line-height: 1.5;">a version of the higher layers of Firefox OS</span> that simulates a Firefox OS device, but runs on the desktop</span><span style="line-height: 1.5;">. </span><span style="line-height: 1.5;">It runs in a window the same size as a Firefox OS device, includes the Firefox OS user interface and built-in apps, and simulates many of the Firefox OS device APIs.</span></p>
+
+<p><span style="line-height: 1.5;">This means that in many cases, you don't need a real device to test and debug your app. </span></p>
+
+<p>The Simulator is big, so it doesn't ship inside Firefox but as a Firefox <a href="/en-US/Add-ons">add-on</a>. If you click "Install Simulator" in the Runtimes dropdown menu, you will go to a page from which you can install Simulators for various versions of Firefox OS.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8039/webide-install-simulator.png" style="display: block; height: 560px; margin-left: auto; margin-right: auto; width: 720px;">You can install as many as you like. Be patient, though: the Simulator is large and may take a few minutes to download. Once you've installed some Simulators you can close this "Extra Components" window, and the Simulators you've installed appear as options in the Runtimes dropdown menu:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8047/webide-select-runtime-keon-simulator.png" style="display: block; height: 559px; margin-left: auto; margin-right: auto; width: 712px;">To learn more about the Simulator, see its <a href="/en-US/docs/Tools/Firefox_OS_Simulator">documentation page</a>.</p>
+
+<h3 id="Custom_runtimes">Custom runtimes</h3>
+
+<p>With a custom runtime you can use an arbitrary hostname and port to connect to the remote device.</p>
+
+<p>Under the hood, Firefox OS devices and Android devices connect to the desktop using a program called the Android Debug Bridge, or <a href="http://developer.android.com/tools/help/adb.html">ADB</a>. By default, the WebIDE uses an add-on called the ADB Helper: this simplifies the process for you by installing ADB and setting up port forwarding so the Firefox desktop tools can exchange messages with the device.</p>
+
+<p>This is convenient in most cases, but sometimes you might want to use ADB outside of the WebIDE: for example, you might be running ADB directly from the command line. In that case you'll connect to the device by specifying a host and port using the <a href="http://developer.android.com/tools/help/adb.html#forwardports"><code>adb forward</code></a> command.<br>
+ <br>
+ If you then want to use WebIDE to connect as well, you should <a href="https://support.mozilla.org/en-US/kb/disable-or-remove-add-ons#w_how-to-disable-extensions-and-themes">disable the ADB Helper add-on</a> and connect WebIDE using the Custom runtime option, entering the host and port that you passed to <code>adb forward</code>.</p>
+
+<p>Also, the ADB Helper does not yet support connecting to Firefox for Android, so if you want to connect WebIDE to Firefox for Android, you'll need to set up your own port forwarding and use a custom runtime. <a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">See more about connecting to Firefox for Android using ADB</a>.</p>
+
+<h2 id="Selecting_a_runtime">Selecting a runtime</h2>
+
+<p>Once you've set up a runtime you can select it using the "Select Runtime" menu.</p>
+
+<ul>
+ <li>If you select a Simulator, the WebIDE launches the Simulator.</li>
+ <li>If you select a Firefox OS device the WebIDE connects to the device. On the device a dialog will ask you to confirm that you wish to connect: press "OK".</li>
+</ul>
+
+<p>Now the "play" button in the center of the WebIDE toolbar is enabled: click it to install and run the app in the selected runtime.</p>
+
+<h3 id="Runtime_actions">Runtime actions</h3>
+
+<p>When a runtime is selected, the Runtimes dropdown menu has three extra items:</p>
+
+<ul>
+ <li><strong>Runtime Info</strong>: information on the current runtime</li>
+ <li><strong>Permissions Table</strong>: a table summarising <a href="/en-US/Apps/Build/App_permissions">app permissions</a> for the current runtime, indicating, for each API and each <a href="/en-US/Marketplace/Options/Packaged_apps#Types_of_packaged_apps">app type</a>, whether access is allowed (✓), denied (✗), or whether the user is prompted (!)</li>
+ <li><strong>Screenshot</strong>: a command to take a screenshot from the runtime</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8147/webide-runtimes-menu.png" style="display: block; height: 596px; margin-left: auto; margin-right: auto; width: 789px;"></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8145/webide-runtimeinfo.png" style="display: block; height: 593px; margin-left: auto; margin-right: auto; width: 753px;"><img alt="" src="https://mdn.mozillademos.org/files/8149/webide-permissions.png" style="display: block; height: 593px; margin-left: auto; margin-right: auto; width: 753px;"></p>
+
+<h2 id="Creating_and_opening_apps">Creating and opening apps</h2>
+
+<p>Under the "Open App" menu you get three options: create a new app, open a packaged app, and open a hosted app:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8049/webide-open-app-empty.png" style="display: block; height: 562px; margin-left: auto; margin-right: auto; width: 723px;"></p>
+
+<h3 id="Create_a_new_app">Create a new app</h3>
+
+<p>Select "New App..." to create a new app. You'll see a dialog offering you a choice between two templates, "Privileged Empty App" and "Privileged App".</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8053/webide-new-app.png" style="display: block; height: 591px; margin-left: auto; margin-right: auto; width: 739px;"></p>
+
+<p>Both templates are from Mozilla's <a href="https://github.com/mozilla/mortar">app template collection</a>, and provide you with the basic structure you need to get started. The "Privileged App" shows how an app can use permissions to load cross-origin content.</p>
+
+<p>Once you've selected a template you'll be asked to name the app and select a directory to store the files, and then the new app is opened in the <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">project editor</a>.</p>
+
+<h3 id="Open_a_packaged_app">Open a packaged app</h3>
+
+<p>Select "Open Packaged App..." to open a <a href="/en-US/Marketplace/Options/Packaged_apps">packaged app</a>. You'll be asked to select a directory containing the app's <a href="/en-US/Apps/Build/Manifest">manifest</a>, and the app will be opened in the <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">project editor</a>.</p>
+
+<h3 id="Open_a_hosted_app">Open a hosted app</h3>
+
+<p>Select "Open Hosted App..." to open a <a href="/en-US/Marketplace/Options/Hosted_apps">hosted app</a>. You'll be asked to enter a URL pointing to the app's <a href="/en-US/Apps/Build/Manifest">manifest</a>, and the app will be opened in the <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">project editor</a>.</p>
+
+<h2 id="Editing_apps">Editing apps</h2>
+
+<p>The project editor provides an environment for editing apps. There's a tree view on the left of all the files in the app: you can add and delete files here using a context menu. There's an editor pane on the right.</p>
+
+<h3 id="The_app_summary_page">The app summary page</h3>
+
+<p>When you first open or create an app, the editor pane is occupied by the app summary page, which is shown below:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8055/webide-new-app-editor.png" style="display: block; height: 625px; margin-left: auto; margin-right: auto; width: 846px;"></p>
+
+<p>You can always get back to the app summary page by clicking on the root of the tree on the left.</p>
+
+<h3 id="Manifest_validation">Manifest validation</h3>
+
+<p>The WebIDE automatically checks the manifest for certain common problems. If it finds a problem it indicates that the app is invalid and describes the problem in the app's summary:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8063/webide-invalid-manifest.png" style="display: block; height: 626px; margin-left: auto; margin-right: auto; width: 847px;"></p>
+
+<p>Of course, you can edit the <a href="/en-US/Apps/Build/Manifest">manifest.webapp</a> file right in the project editor as well.</p>
+
+<h3 id="The_source_editor">The source editor</h3>
+
+<p>The WebIDE uses the <a href="http://codemirror.net/">CodeMirror</a> source editor.</p>
+
+<h4 id="Source_editor_shortcuts">Source editor shortcuts</h4>
+
+<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}</p>
+
+<h4 id="Code_completion">Code completion</h4>
+
+<p>When editing CSS and JavaScript, the editor provides autocomplete suggestions. CSS autocompletion is always enabled:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8057/webide-css-autocomplete.png" style="display: block; height: 628px; margin-left: auto; margin-right: auto; width: 849px;">To display autocomplete suggestions in JavaScript press Control + Space:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8059/webide-js-autocomplete.png" style="display: block; height: 653px; margin-left: auto; margin-right: auto; width: 867px;"></p>
+
+<h4 id="Inline_documentation">Inline documentation</h4>
+
+<p>The editor also shows inline documentation for JavaScript. Press Shift + Space to see a popup containing documentation for the symbol your cursor is on:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8061/webide-js-inline-docs.png" style="display: block; height: 652px; margin-left: auto; margin-right: auto; width: 872px;"></p>
+
+<p>Clicking the <code>[docs]</code> link in the popup will take you to the MDN page for the symbol.</p>
+
+<h4 id="Saving_files">Saving files</h4>
+
+<p>For changes to your files to take effect you need to save them. Files with unsaved changes get an asterisk next to their name in the tree view, and you can save files using the menu or Control+S (Command+S on Mac OS X).</p>
+
+<h3 id="Removing_projects">Removing projects</h3>
+
+<p>To remove an app from the WebIDE, go to the <a href="/en-US/docs/Tools/WebIDE#The_app_summary_page">app summary page</a> and click "Remove Project".</p>
+
+<h2 id="Running_and_debugging_apps">Running and debugging apps</h2>
+
+<p>When you're ready to run the app, you need to <a href="/en-US/docs/Tools/WebIDE#Selecting_a_runtime">select a runtime from the "Select Runtime" dropdown menu</a>. If you don't have any available runtimes here, find out how to add some in <a href="/en-US/docs/Tools/WebIDE#Setting_up_runtimes">Setting up runtimes</a>.</p>
+
+<p>The "play" button in the center of the WebIDE toolbar is now enabled: click it to install and run the app in the selected runtime:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8065/webide-running.png" style="display: block; height: 718px; margin-left: auto; margin-right: auto; width: 1314px;">To debug the app, click the "Pause" button and the Developer Tools <a href="/en-US/docs/Tools/Tools_Toolbox">Toolbox</a> appears, connected to your app:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8067/webide-debugging.png" style="display: block; height: 688px; margin-left: auto; margin-right: auto; width: 1310px;">Exactly which tools you'll have available depends on the runtime, but you will at least have the basics: the <a href="/en-US/docs/Tools/Page_Inspector">Inspector</a>, <a href="/en-US/docs/Tools/Web_Console">Console</a>, <a href="/en-US/docs/Tools/Debugger">JavaScript Debugger</a>, <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a>, <a href="/en-US/docs/Tools/Profiler">Profiler</a> and <a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a>. Just as in a web page, any changes you make in the tools are visible immediately in the app, but are not persistent. Conversely, any changes you make in the editor pane can be saved straight back to disk, but are not visible without restarting the app.</p>
+
+<h3 id="Debugging_certified_apps">Debugging certified apps</h3>
+
+<p>With the Simulator, if you click on the app dropdown menu while the runtime is selected, you can see and debug not only your app but all apps running in that runtime, including <a href="/en-US/Marketplace/Options/Packaged_apps#Certified_app">certified apps</a>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8069/webide-debugging-builtin.png" style="display: block; height: 681px; margin-left: auto; margin-right: auto; width: 1302px;"></p>
+
+<p><br>
+ However, to debug certified apps on a real device:</p>
+
+<ul>
+ <li>the device must be running a development build of Firefox OS 1.2+</li>
+ <li>you must enable certified app debugging</li>
+</ul>
+
+<p>To enable certified app debugging, connect to the runtime, and then, in the menu, go to <code>Runtime &gt; Runtime Info</code>. From here, if you see <code>"DevTools restricted privileges: yes</code>", that means certified apps can't be debugged. The path then differs depending on what you are debugging against:</p>
+
+<ul>
+ <li>Real device
+  <ul>
+   <li>If it can be rooted, clicking <code>"request higher privileges"</code> will enable certified apps debugging (Firefox OS will restart).</li>
+  </ul>
+ </li>
+ <li>Simulator
+  <ul>
+   <li>The simulators come with certified debugging enabled by default.</li>
+  </ul>
+ </li>
+ <li>B2G desktop
+  <ul>
+   <li>Manually edit the B2G desktop client <a href="https://developer.mozilla.org/en-US/Firefox_OS/Using_the_App_Manager#Using_the_B2G_desktop_client">preferences</a> before connecting to enable certified app debugging.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Now (or after a restart of the B2G desktop client) in the WebIDE you should see all the certified apps on the device.</p>
+
+<h2 id="Monitoring_performance">Monitoring performance</h2>
+
+<p>If you're interested in the performance of your apps, there are a few ways to measure their impact on the runtime in WebIDE:</p>
+
+<ul>
+ <li>The <a href="/docs/Tools/WebIDE/Monitor">Monitor</a> panel offers a good overview of a device's performance. This can help you detect problems, e.g. a sudden, excessive increase in an app's memory usage (leak).</li>
+ <li>The <a href="/docs/Tools/Profiler">Profiler</a> tool gives you a way to analyze a single app's footprint in great detail. This is especially useful when investigating a known performance problem.</li>
+</ul>
+
+<h2 id="Troubleshooting">Troubleshooting</h2>
+
+<p>If you have any problems working with the WebIDE, see the <a href="/en-US/docs/Tools/WebIDE/Troubleshooting">Troubleshooting</a> page.</p>
+
+<p> </p>
+
+<p> </p>
diff --git a/files/de/unterstützung_von_internationalized_domain_names_(idn)_in_mozilla_browsern/index.html b/files/de/unterstützung_von_internationalized_domain_names_(idn)_in_mozilla_browsern/index.html
new file mode 100644
index 0000000000..3716f356e7
--- /dev/null
+++ b/files/de/unterstützung_von_internationalized_domain_names_(idn)_in_mozilla_browsern/index.html
@@ -0,0 +1,95 @@
+---
+title: Unterstützung von Internationalized Domain Names (IDN) in Mozilla Browsern
+slug: Unterstützung_von_Internationalized_Domain_Names_(IDN)_in_Mozilla_Browsern
+tags:
+  - MDC Archiv
+translation_of: Mozilla/Internationalized_domain_names_support_in_Mozilla
+---
+<h3 id="Einführung">Einführung</h3>
+
+<p>Netscape 7.1 ist der erste kommerzielle Browser, der eine eingebaute Unterstützung für Internationalized Domain Name nach dem neuen IETF RFC von 2003 hat.</p>
+
+<p>Ein Internationalized Domain Name (IDN) ist eine Domain oder ein host name, der andere Buchstaben als nur die in ASCII definierten nutzt. Bis vor kurzem erlaubten Domainnamen nur eine Teilmenge von Buchstaben (der 7-bit ASCII Charset). Durch die Verbreitung des Internet in weitere Länder der Erde, in denen kein Englisch gesprochen wird, wurde es immer mehr klar, dass die Beschränkung der Nutzung von Domainnamen auf eine Teilmenge des Latin alphabet nicht ideal ist.</p>
+
+<p>Viele der europäischen Sprachen benutzen das lateinische Alphabet mit zusätzlichen akzentuierten Buchstaben zum Schreiben, konnten diese aber nicht in Domainnamen benutzen. Sprecher dieser Sprachen war es nicht möglich bekannte Namen in ihrer jeweiligen Sprache als Teil eines Domainnames zu verwenden.</p>
+
+<p>In den letzten paar Jahren gab es eine Menge an IETF Aktivitäten um die Protokolle, die beim Handling von nicht-ASCII Buchstaben in Domainnamen beteiligt sind zu standardisieren. Im März 2003 wurden drei wichtige RfCs dazu vom IETF akzeptiert (<a class="external" href="http://www.ietf.org/rfc/rfc3490.txt">3490</a>, <a class="external" href="http://www.ietf.org/rfc/rfc3491.txt">3491</a>, <a class="external" href="http://www.ietf.org/rfc/rfc3492.txt">3492</a>). Diese drei neuen RfCs machen es nun für DNS Server möglich, dass diese nicht-ASCII Domains registrieren und ermöglichen es für Hersteller von Anwendungen, dass diese standardisierten Support für die Behandlung von nicht-ASCII Buchstaben in Domainnamen einbauen.</p>
+
+<h3 id="Wie_IDN_funktioniert">Wie IDN funktioniert</h3>
+
+<p>Wenn ein Webbrowser einen host name wie <em><a class="external" href="http://developer.mozilla.org" rel="freelink">http://developer.mozilla.org</a></em> sieht, gibt er eine Anfrage an den DNS Resolver Service (ist meistens im Betriebssystem eingebaut) weiter, welcher wiederum eine Anfrage zum nächsten DNS Server sendet, der eine IP Adresse zurück liefert, die zum Hostnamen passt. Diese IP Adresse wird dann dazu benutzt um zum fraglichen Webserver zu verbinden.</p>
+
+<p>IDN erlaubt Host- und Domainnamen mit nicht-ASCII Zeichen als Usereingabe in die Adressleiste eines Browsers oder für URLs, die einer Website eingebunden sind. Auf der Netzwerkprotokoll-Ebene ergibt sich keine Änderung an der Einschränkung, dass nur eine Teilmenge des ASCII-Zeichensatzes verwendet werden kann. Wenn die Eingabe des Benutzers nicht-ASCII Zeichen als Teil eines Domainnamens enthält oder eine Website einen Link enthält, der nicht-ASCII Zeichen verwendet muss die Anwendung dies in eine spezielles Format umwandeln welches nur die übliche Teilmenge des ASCII Zeichensatzes verwendet. <a class="external" href="http://tools.ietf.org/html/rfc3490" title="http://tools.ietf.org/html/rfc3490">RFC 3490</a> (Internationalizing Domain Names in Applications (IDNA)) definiert die Zeichen die in IDN benutzt werden. Auch definiert dieser wie eine Anwendung nicht-ASCII Zeichen auf so eine Weise verarbeiten soll, dass diese im Einklang steht mit bestehenden Restriktionen in Hinblick auf host names.</p>
+
+<h3 id="Wie_die_Mozilla_Browser_nicht-ASCII_Domainnamen_behandeln">Wie die Mozilla Browser nicht-ASCII Domainnamen behandeln</h3>
+
+<h4 id="Unicode_und_Nameprep">Unicode und Nameprep</h4>
+
+<p>Wenn Mozilla von einem Benutzer eine IDN Eingabe über die Adressleiste empfängt oder eine Anfrage nicht-ASCII host name links zu verarbeiten vorliegt, wandelt es zuerst diese Eingabe in Unicode um. Anschließend normalisiert und validiert es diese Eingabe um diese konform zu den Anforderungen an einen URI zu machen.</p>
+
+<p>Der Prozess wandelt Großbuchstaben in Kleinbuchstaben um, vereinheitlicht Zeichen mit mehreren Darstellungsweisen, z.B. die Umwandlung von Kana Zeichen halber Breite im Japanischen in Zeichen mit voller Breite, entfernt verbotene Zeichen (z.B. Leerzeichen), eliminiert Zweideutigkeiten in bidirektionalem Text (z.B. Arabisch und Hebräisch) und prüft ob nicht zugewiesene Zeichen aus dem Unicode Zeichenraum verwendet werden - diese werden für "query strings" erlaubt, sind aber bei "stored strings" wie z.B. bei der Dateneingabe für eine Domainregistrierung verboten.</p>
+
+<p>Dieser Prozess wird "Nameprep" genannt und wird nach dem <a class="external" href="http://tools.ietf.org/html/rfc3491" title="http://tools.ietf.org/html/rfc3491">RFC 3491</a> (en) (Nameprep: A Stringprep Profile for Internationalized Domain Names (IDN)) und dem <a class="external" href="http://tools.ietf.org/html/rfc3454" title="http://tools.ietf.org/html/rfc3454">RFC 3454</a> (en) (Preparation of Internationalized Strings ("stringprep")) ausgeführt.</p>
+
+<h4 id="ASCII-kompatible_Kodierung_(ACE)">ASCII-kompatible Kodierung (ACE)</h4>
+
+<p>Der nächste Schritt ist die Umwandlung der 8-Bit Zeichen in Unicode zu 7-Bit Zeichen, die nur bestimmte ASCII Zeichen verwenden dürfen. Während der Diskussionsphase von der Entwicklung des IDN Protokolls gab es ein paar konkurrierende, ASCII-kompatible Kodierungsschema (aka ASCII-compatible encoding (ACE)), aber man konnte sich schließlich darauf einigen einen Typ von ACE, der "Punnycode" genannt wird, zu standardisieren. Dieser ist definiert im <a class="external" href="http://tools.ietf.org/html/rfc3492" title="http://tools.ietf.org/html/rfc3492">RFC 3492</a> (en) (Punycode: A Bootstring encoding of Unicode for Internationalized Domain Names in Applications (IDNA)).</p>
+
+<p>Der Punnycode Vorschlag nutzt nur eine beschränkte Anzahl von ASCII Zeichen und Nummern (a-z0-0) und den Bindestrich (-). Er wurde als sprachunabhängig, überlegen in der Kompression, kompakt in Hinsicht auf die Codegröße, <em>round-trip safe</em> und überlegen in Hinsicht auf die Kodierung von chinesischen/japanischen/koreanischen Zeichen dargestellt.</p>
+
+<p>Der letzte Schritt des Prozesses ist es, dass ACE Präfix der Ausgabe der Nameprep/stringprep und Punnycode Verarbeitung voranzustellen. Da Punnycode nur ASCII Zeichen enthält, ist es möglich, dass sich diese Ausgabe, wenn auch unwahrscheinlich, mit einem existierenden Domainnamen deckt. Um so eine Kollision zu vermeiden definiert <a class="external" href="http://tools.ietf.org/html/rfc3490" title="http://tools.ietf.org/html/rfc3490">RFC 3490</a> ein spezielles Präfix, nämlich "xn--", für die Ausgabe des ACE (Punnycode). Andere Kodierungen benutzen andere Präfixe, z.B. "bq--" bei RACE, aber all diese außer dem Standard Präfix "xn--" für ACE sind jetzt in IDN verboten.</p>
+
+<h3 id="Domainnamen-Registrierung">Domainnamen-Registrierung</h3>
+
+<p>Nachdem die technischen Standards vom IETF eingeführt wurden, war das letzte noch verbleibende Problem, dass sich die Registrare auf eine internationale Richtlinie zur Verwendung von IDN Zeichen einigen müssen. Dies wurde mit der Veröffentlichung der <a class="external" href="http://www.icann.org/announcements/announcement-20jun03.htm">ICANN Richtlinie für IDN (en)</a> im Juni 2003 bewerkstelligt. Diese Richtlinie erlaubt es Domainnamen Registraren in jedem Land die Nutzung von bestimmten Zeichen in Domainnamen zu beschränken. Da das Unicode Repertoire Zeichen enthält, die in keiner lebenden Sprache mehr verwendet werden und es auch Zeichen gibt, die in den meisten Sprachen nicht für die Erstellung von URIs/URLs geeignet sind, erlaubt die ICANN Richtlinie dem <em>governing body</em> den Registraren jedes Landes angemessene Beschränkungen für die Benutzung solcher Zeichen zu setzen.</p>
+
+<p>Da dieses letzte Hindernis für eine Standardisierung nun aus dem Weg geräumt wurde, wird erwartet, dass die Registrare schnell voranschreiten um diese neuen RFCs für existierende und kommende IDN Registrierungen einzuführen.</p>
+
+<p>Der JPRS (<a class="external" href="http://jprs.jp/en/">Japan Registry Service (en)</a>) hat sich dazu entschieden <a class="external" href="http://jprs.jp/en/topics/030623.html">die neue RFC Implementierung (en)</a> am 10. Juli 2003, nur ein paar Wochen nachdem die Richtlinie des ICANN veröffentlich wurde, einzuführen. Dies macht es für Netscape 7.1/Mozilla 1.4 User möglich japanische Domainnamen unter der Topleveldomain .jp ohne weitere Änderungen nur mit der eingebauten IDN-Funktionalität aufzurufen.</p>
+
+<p> </p>
+
+<h3 id="Beispiele_aus_der_Wirklichkeit">Beispiele aus der Wirklichkeit</h3>
+
+<h4 id="Punycode">Punycode</h4>
+
+<p>Es gibt einige Beispiele von IDN, die Sie mit Netscape 7.1 testen können, welcher Punycode als standardmäßiges IDN Encoding nutzt. Zum Beispiel können die meisten Beispiellinks auf den folgenden Testseiten ohne weitere Einstellungen benutzt werden:</p>
+
+<ul>
+ <li><a class="external" href="http://www.nunames.nu/eu-lang-test.htm" rel="freelink">http://www.nunames.nu/eu-lang-test.htm</a> (Domain names mit Latin 1)</li>
+ <li><a class="external" href="http://www.nunames.nu/lldemo/default.htm" rel="freelink">http://www.nunames.nu/lldemo/default.htm</a> (Domain names in anderen Sprachen)</li>
+</ul>
+
+<p>Seit July 10, 2003 und danach, kann man eine Vielzahl von japanischen Domain name Seiten unter der .jp Toplevel-Domain ohne weitere Einstellungen in Netscape 7.1/Mozilla 1.4 erreichen:</p>
+
+<ul>
+ <li><a class="external" href="http://mitsuketa-nihongo.jp" rel="freelink">http://mitsuketa-nihongo.jp</a></li>
+</ul>
+
+<h4 id="RACE_(Row-based_ASCII_Compatible_Encoding)">RACE (Row-based ASCII Compatible Encoding)</h4>
+
+<p>Fast alle IDN Registrierungsdaten werden zu Punycode bis zum Ende 2003 verändert. Einige Länder werden schnell dabei sein, z.B. Japan wie oben genannt, aber andere wie .com und .net Toplevel-Domains werden länger brauchen.</p>
+
+<p>Die meisten der existierenden Seiten nutzen das ASCII-kompatible Encoding, welches als RACE oder "Row-based ASCII Compatible Encoding" bekannt ist, welches allerdings  kein akzeptierter Standard von IETF. Wenn Sie IDN Testseiten unter .com und .net Toplevel-Domains finden und wenn Sie nicht auf diese Seiten zugreifen können, sollten Sie den folgenden Workaround nutzen, bis Punycode komplett vorhanden ist:</p>
+
+<p>Netscape 7.1 oder Mozilla 1.4:</p>
+
+<ol>
+ <li>Tippen Sie <strong>about:config</strong> in die Adressleiste. Es werden alle Präferenzen für Ihr System angezeigt. Diese Einstellungen können geändert werden oder neue können erstellt werden ohne, dass der Browser beendet werden muss.</li>
+ <li>Erstellen Sie einen neuen Eintrag über <strong>Neu &gt; String</strong> über einen rechts-Klick. Der Name lautet: <strong>network.IDN_prefix</strong>. Der Wert sollte "bq--" lauten. Das wird von Puncycode auf RACE umschalten.</li>
+ <li>Als nächstes erstellen Sie einen weiteren Eintrag über rechts-Klick <strong>Neu &gt; Boolean</strong>. Der Name lautet: <strong>network.IDN_testbed</strong>. Der Wert sollte "true" lauten.</li>
+ <li>Jetzt wechseln Sie auf eine IDN Seite unter <em>.com</em> und <em>.net</em> Toplevel-Domain. Sie sollten erfolgreich auf eine dieser Beispielseiten landen.</li>
+ <li>Vergessen Sie nicht den Wert dieser Einstellungen auf "default" zu setzen, wenn Sie mit dem Testen fertig sind!</li>
+</ol>
+
+<h3 id="Vorbehalte_und_Rückschlüsse">Vorbehalte und Rückschlüsse</h3>
+
+<p>Netscape 7.1/Mozilla 1.4 verfügt über eine gute Unterstützung von Internationalized Domain Names und ist der erste Browser mit eingebautem Support für neue RFC's für IDN vom IETF. Das bedeutet, dass es nicht länger notwendig ist, dass ein Plug-in für nicht-ASCII Domain names installiert werden muss.</p>
+
+<p>Netscape/Mozillas Unterstützung für IDN ist nicht ohne Fehler. Ein bemerkenswerter Fehler ist, dass nicht-ASCII names nicht immer richtig in allen UI Bereichen angezeigt werden. Nicht-ASCII names werden nicht immer in der Adresszeile dargestellt, da ACE zu Unicode Umwandlung noch nicht implementiert ist.</p>
+
+<p>IDN ist ein globaler Trend und wird von einer Großzahl von Seiten angenommen und machen es für durchschnittliche Internetuser außerdem einfacher Webseiten zu finden. Viele Webseiten rund um die Welt sind werden ihre host names mit der entsprechenden Domain name Registrierung für ihre Toplevel-Domains einrichten. Netscape 7.1 und Mozilla 1.4 spielen dabei eine signifikante Rolle, damit IDN weiter entwickelt wird.</p>
+
+<p>Original author: Katsuhiko Momoi</p>
+
+<p> </p>
diff --git a/files/de/updating_web_applications_for_firefox_3/index.html b/files/de/updating_web_applications_for_firefox_3/index.html
new file mode 100644
index 0000000000..c727ef5df2
--- /dev/null
+++ b/files/de/updating_web_applications_for_firefox_3/index.html
@@ -0,0 +1,97 @@
+---
+title: Webanwendungen für Firefox 3 aktualisieren
+slug: Updating_web_applications_for_Firefox_3
+tags:
+  - Firefox 3
+translation_of: Mozilla/Firefox/Releases/3/Updating_web_applications
+---
+<div>{{FirefoxSidebar}}</div>
+
+<p>{{ Fx_minversion_header(3) }} In der kommenden Version von Firefox (Firefox 3) gibt es eine nicht geringe Anzahl an Veränderungen, die möglicherweise Ihre Webseite oder Webanwendungen betreffen könnten. Möglicherweise wollen Sie auch von den neuen Funktionen Gebrauch machen. Dieser Artikel kann dazu als Einstiegspunkt dienen.</p>
+
+<h3 id="DOM_Änderungen">DOM Änderungen</h3>
+
+
+<p></p><p>Nodes from external documents should be cloned using <a href="/de/docs/Web/API/Document/importNode" title="Die Document-Methode importNode() erzeugt eine neue Kopie eines konkreten Knotens (Node) oder Dokumenten-Fragments (DocumentFragment) eines anderen Dokuments, so dass diese dann in das aktuelle Dokument eingefügt werden kann. "><code>document.importNode()</code></a> (or adopted using <a href="/de/docs/Web/API/Document/adoptNode" title="Überträgt einen Knoten. Der Knoten und sein Unterbaum werden aus dem Dokument, in dem sie sich befinden entfernt (so vorhanden), und sein ownerDocument wird zu dem aktuellen Dokument geändert. Der Knoten kann dann in das aktuelle Dokument eingefügt werden."><code>document.adoptNode()</code></a>) before they
+    can be inserted into the current document. For more on the <a class="new" href="/de/docs/Web/API/Node/ownerDocument" rel="nofollow" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben. Bitte überlege, mitzuwirken!"><code>Node.ownerDocument</code></a> issues, see the
+    <a class="external" href="http://www.w3.org/DOM/faq.html#ownerdoc" rel="noopener">W3C DOM FAQ</a>.</p>
+
+    <p>Firefox doesn't currently enforce this rule (it did for a while during the development of Firefox 3, but too many
+    sites break when this rule is enforced). We encourage Web developers to fix their code to follow this rule for
+    improved future compatibility.</p><p></p>
+
+<h3 id="HTML_Änderungen">HTML Änderungen</h3>
+
+<h4 id="Veränderung_an_der_Zeichensatz-Vererbung.">Veränderung an der Zeichensatz-Vererbung.</h4>
+
+<p>Firefox 3 schließt eine Sicherheitsschwachstelle in Frames und iFrames, die einem erlaubten, den Zeichensatz des Elternelementes zu vererben. In bestimmten Fällen war dies eine Problemursache. Nun ist die Zeichensatzvererbung in Frames und iFrames lediglich erlaubt, wenn jenes Element und das Elternelement von dem selben Server stammen. Wenn Sie in ihrer Seite Frames haben, die den selben Zeichensatz von einem fremden Server vererben sollen, sollten Sie den HTML-Code der Frames an die Neuerung anpassen und ihren Zeichensatz explizit angeben.</p>
+
+<h4 id="Veränderungen_am_&lt;script>-Element">Veränderungen am <code>&lt;script&gt;</code>-Element</h4>
+
+<p>Das <code>&lt;script&gt;</code>-Element in <code>text/html</code>-Dokumenten benötigt nun ein schließendes <code>&lt;/script&gt;</code>-Tag in HTML 4 Dokumenten, auch wenn zwischen ihnen nichts steht.</p>
+
+<p>Früher war es möglich, folgendes zu schreiben:</p>
+
+<pre class="eval">&lt;script ... /&gt;
+</pre>
+
+<p>Nun wird Konformität zur HTML Spezifikation sichergestellt und es wird folgendes notiert:</p>
+
+<pre class="eval">&lt;script ...&gt;&lt;/script&gt;
+</pre>
+
+<p>Damit wird die Stabilität, Kompatibilität und Sicherheit verbessert.</p>
+
+<h3 id="CSS_Änderungen">CSS Änderungen</h3>
+
+<h4 id="Veränderungen_bei_font-size_basierend_auf_em_und_ex_Einheiten">Veränderungen bei <code>font-size</code> basierend auf <code>em</code> und <code>ex</code> Einheiten</h4>
+
+<p><code>font-size</code> Werte in <code>em</code> und <code>ex</code> Einheiten waren auf die kleinste Schriftgröße des Benutzers bezogen: Wenn die kleinste Schriftgröße größer dargestellt wurde, basierten die <code>em</code> und <code>ex</code> Einheiten für <code>font-size</code> auf die vergrößerte Schriftgröße. Das war widersprüchlich zum Verhalten mit prozentualen Angaben für die Schriftgröße.</p>
+
+<p><code>font-size</code> Werte in <code>em</code> und <code>ex</code> Einheiten sind nun auf einer »intended font size« basiert, die nicht auf die kleinste Schriftgröße des Benutzers basiert. Mit anderen Worten, werden Schriftgrößen immer mit der Absicht des Designers berechnet und hinterher an die kleinste Schriftgröße angepasst.</p>
+
+<p>Siehe {{ Bug(434718) }}, und speziell im <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=322943">Anhang von Bug 322943</a> für eine Demonstration (muss mit einer minimalen Schriftgröße von &gt;= 6 angesehen werden, um einen Unterschied erkennen zu können).</p>
+
+<h3 id="Sicherheitsänderungen">Sicherheitsänderungen</h3>
+
+<h4 id="Chrome_Zugang">Chrome Zugang</h4>
+
+<p>In vorherigen Versionen von Firefox konnte jede Webseite Scripts über das <code>chrome://</code> Protokoll laden. Neben anderen Dingen, waren Webseiten in der Lage herauszufinden, welche Add-ons installiert sind und konnten diese Informationen dann benutzen, um gezielt Sicherheitsmechanismen des Browser zu umgehen.</p>
+
+<p>Firefox 3 erlaubt nur noch Zugang zu <code><a class="external" rel="freelink">chrome://browser/</a></code> und <code><a class="external" rel="freelink">chrome://toolkit/</a></code> Pfaden. Diese Dateien sind dafür bestimmt von Webseiten zugänglich zu sein. Alle weiteren Chrome Inhalten werden nun für den Zugriff von außerhalb blockiert.</p>
+
+<p>Es gibt jedoch einen Weg für Erweiterungen ihre Inhalte zugänglich für das Web zu machen. Sie können ein Kennzeichen in der <code>chrome.manifest</code> Datei angeben, das wie folgt lautet:</p>
+
+<pre class="eval">content mypackage location/ contentaccessible=yes
+</pre>
+
+<p>Das Setzen dieses Kennzeichens sollte die Ausnahme bleiben, steht aber für die seltenen Fälle zur Verfügung. Beachten Sie, dass Firefox den Benutzer gegebenenfalls benachrichtigt, wenn Ihre Erweiterung <code>contentaccessible</code> benutzt und es als potentielles Sicherheitsrisiko angesehen wird.</p>
+
+<div class="note"><strong>Hinweis:</strong> Weil Firefox 2 die <code>contentaccessible</code> Flag nicht versteht (es wird die komplette Zeile ignoriert), sollten zur Kompatibilität zu Firefox 2 und Firefox 3 die folgenden zwei Zeilen notiert werden.
+
+<pre class="eval">content mypackage location/
+content mypackage location/ contentaccessible=yes
+</pre>
+</div>
+
+<h4 id="Datei-upload_Felder">Datei-upload Felder</h4>
+
+<p>In vorherigen Firefox Versionen gab es Fälle in denen der Benutzer ein Formular ausgefüllt hat, um eine Datei hochzuladen, wobei der gesamte Dateipfad der Datei für die Webanwendung verfügbar war. Dieser Eingriff in die Privatsphäre wurde in Firefox 3 behoben und jetzt ist nur noch der Dateiname selbst verfügbar.</p>
+
+<h4 id="Änderungen_an_der_»Same-origin_policy«_für_file_URIs">Änderungen an der »Same-origin policy« für file: URIs</h4>
+
+<p>Die »same-origin policy« für Dateien file: URIs wurde in Firefox 3 verändert. Das konnte Ihre Inhalte betreffen. Siehe dazu: <a href="/de/Same-origin_policy_für_file:_URIs" title="de/Same-origin_policy_für_file:_URIs">Same-origin policy für file: URIs</a> für weitere Details.</p>
+
+<h3 id="JavaScript_Änderungen">JavaScript Änderungen</h3>
+
+<p>Firefox 3 unterstützt <a href="/de/Neu_in_JavaScript_1.8" title="de/Neu_in_JavaScript_1.8">JavaScript 1.8</a>. Eine wichtige Änderung die eventuell Änderungen nötig machen könnte, ist das das veraltete und nicht-standardisierte <code>Script</code> Objekt nicht länger unterstützt wird. Das ist nicht das <code>&lt;script&gt;</code> Tag, aber ein JavaScript Objekt, das niemals standardisiert wurde. Wahrscheinlich haben Sie es niemals verwendet.</p>
+
+<h3 id="Siehe_auch">Siehe auch</h3>
+
+<ul>
+ <li><a href="/de/Firefox_3_für_Entwickler" title="de/Firefox_3_für_Entwickler">Firefox 3 für Entwickler</a></li>
+ <li><a href="/de/Neu_in_JavaScript_1.8" title="de/Neu_in_JavaScript_1.8">Neu in JavaScript 1.8</a></li>
+ <li><a href="/de/Erweiterungen_für_Firefox_3_aktualisieren" title="de/Erweiterungen_für_Firefox_3_aktualisieren">Erweiterungen für Firefox 3 aktualisieren</a></li>
+</ul>
+
+<p>{{ languages( {"en": "en/Updating_web_applications_for_Firefox_3", "es": "es/Actualizar_aplicaciones_web_para_Firefox_3", "fr": "fr/Mise_\u00e0_jour_des_applications_Web_pour_Firefox_3", "ja": "ja/Updating_web_applications_for_Firefox_3", "pl": "pl/Aktualizacja_aplikacji_internetowych_dla_Firefoksa_3" } ) }}</p>
diff --git a/files/de/web/accessibility/understanding_wcag/index.html b/files/de/web/accessibility/understanding_wcag/index.html
new file mode 100644
index 0000000000..fe71b20ebc
--- /dev/null
+++ b/files/de/web/accessibility/understanding_wcag/index.html
@@ -0,0 +1,59 @@
+---
+title: Understanding the Web Content Accessibility Guidelines
+slug: Web/Accessibility/Understanding_WCAG
+tags:
+  - NeedsTranslation
+  - TopicStub
+  - WCAG
+  - Web Content Accessibility Guidelines
+translation_of: Web/Accessibility/Understanding_WCAG
+---
+<p class="summary">This set of articles provides quick explanations to help you understand the steps that need to be taken to conform to the recommendations outlined in the W3C Web Content Accessibility Guidelines 2.0 or 2.1 (or just WCAG, for the purposes of this writing).</p>
+
+<p>The WCAG 2.0 and 2.1 provide a detailed set of guidelines for making web content more accessible to people with a wide variety of disabilities. It is comprehensive but incredibly detailed, and quite difficult to gain a rapid understanding of. For this reason, we have summarised the practical steps you need to take to satisfy the different recommendations, with further links to more details where required.</p>
+
+<h2 id="The_four_principles">The four principles</h2>
+
+<p>WCAG is broadly broken down into four principles — major things that web content <strong>must be</strong> to be considered accessible (see <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html#introduction-fourprincs-head">Understanding the Four Principles of Accessibility </a>for the WCAG definitions).</p>
+
+<p>Each of the links below will take you to pages that further expand on these areas, giving you practical advice on how to write your web content so it conforms to the success criteria outlined in each of the WCAG 2.0 and 2.1 guidelines that further sub-divides each principle.</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Perceivable">Perceivable:</a> Users must be able to perceive it in some way, using one or more of their senses.</li>
+ <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Operable">Operable</a>: Users must be able to control UI elements (e.g. buttons must be clickable in some way — mouse, keyboard, voice command, etc.).</li>
+ <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Understandable">Understandable</a>: The content must be understandable to its users.</li>
+ <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Robust">Robust</a>: The content must be developed using well-adopted web standards that will work across different browsers, now and in the future.</li>
+</ul>
+
+<h2 id="Should_I_use_WCAG_2.0_or_2.1">Should I use WCAG 2.0 or 2.1?</h2>
+
+<p>WCAG 2.1 is the most recent and relevant accessibility standard. Use WCAG 2.1 to help more people with disabilities and reduce the future legal risk for web site owners. Target WCAG 2.0 first when allocating resources. Then step up to WCAG 2.1. </p>
+
+<h3 id="What_is_WCAG_2.1">What is WCAG 2.1?</h3>
+
+<p>WCAG 2.1 was published as an official recommendation on 05 June 2018. The European Union (EU) adopted WCAG 2.1 as the digital accessibility standard in September 2018. W3C published a press release <a href="https://www.w3.org/blog/2018/09/wcag-2-1-adoption-in-europe/">WCAG 2.1 Adoption in Europe</a>. </p>
+
+<p>WCAG 2.1 includes:</p>
+
+<ul>
+ <li>all of WCAG 2.0 (verbatim, word-for-word)</li>
+ <li>17 new Success Criteria at the A / AA / AAA levels primarily addressing user needs in these areas:
+  <ul>
+   <li>Mobile Accessibility </li>
+   <li>Low Vision</li>
+   <li>Cognitive</li>
+  </ul>
+ </li>
+ <li>Read more about WCAG 2.1:
+  <ul>
+   <li>Deque: <a href="https://www.deque.com/blog/wcag-2-1-what-is-next-for-accessibility-guidelines/">WCAG 2.1:  What is Next for Accessibility Guidelines</a></li>
+   <li>TPG:  <a href="https://developer.paciellogroup.com/blog/2018/06/web-content-accessibility-guidelines-wcag-2-1/">Web Content Accessibility Guidelines (WCAG) 2.1</a></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Legal_standing">Legal standing</h2>
+
+<p>This guide is intended to provide practical information to help you build better, more accessible websites. However, we are not lawyers, and none of this constitutes legal advice. If you are worried about the legal implications of web accessibility, we'd recommend that you check the specific legislation governing accessibility for the web/public resources in your country or locale, and seek the advice of a qualified lawyer.</p>
+
+<p><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a> and particularity the <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_guidelines_and_the_law">Accessibility guidelines and the law</a> section provide more related information.</p>
diff --git a/files/de/web/accessibility/understanding_wcag/perceivable/index.html b/files/de/web/accessibility/understanding_wcag/perceivable/index.html
new file mode 100644
index 0000000000..e8059d8fca
--- /dev/null
+++ b/files/de/web/accessibility/understanding_wcag/perceivable/index.html
@@ -0,0 +1,359 @@
+---
+title: Perceivable
+slug: Web/Accessibility/Understanding_WCAG/Perceivable
+tags:
+  - Accessibility
+  - NeedsTranslation
+  - Principle 1
+  - TopicStub
+  - WCAG
+  - Web Content Accessibility Guidelines
+  - contrast
+  - different presentation
+  - text alternatives
+  - time-based media
+translation_of: Web/Accessibility/Understanding_WCAG/Perceivable
+---
+<p class="summary">This article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the <strong>Perceivable</strong> principle of the Web Content Accessibility Guidelines (WCAG) 2.0 and 2.1. Perceivable states that users must be able to perceive it in some way, using one or more of their senses.</p>
+
+<div class="note">
+<p><strong>Note</strong>: To read the W3C definitions for Perceivable and its guidelines and success criteria, see <a href="https://www.w3.org/TR/WCAG21/#perceivable">Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive.</a></p>
+</div>
+
+<h2 id="Guideline_1.1_—_Providing_text_alternatives_for_non-text_content">Guideline 1.1 — Providing text alternatives for non-text content</h2>
+
+<p>The key here is that text can be converted to other forms people with disabilities can use, so for example spoken by a screenreader, zoomed in, or represented on a braille display. Non-text content refers to multimedia such as images, audio, and video.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Success criteria</th>
+   <th scope="col">How to conform to the criteria</th>
+   <th scope="col">Practical resource</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="5">1.1.1 Provide text equivalents  (A)</td>
+   <td>All images that convey meaningful content should be given suitable alternative text.</td>
+   <td><a href="/en-US/docs/Learn/Accessibility/HTML#Text_alternatives">Text alternatives.</a></td>
+  </tr>
+  <tr>
+   <td>Complex images or charts should have an accessible alternative provided, either on the same page or linked to. Use a regular link rather than the <code>longdesc</code> attribute.</td>
+   <td>
+    <p>A text description may work, or an accessible data table (see <a href="/en-US/docs/Learn/HTML/Tables/Advanced">HTML table advanced features and accessibility</a>). Also see <a href="/en-US/docs/Learn/Accessibility/HTML#Other_text_alternative_mechanisms">Other text alternative mechanisms</a> for the argument against <code>longdesc</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Multimedia content (e.g. audio or video) should at least have a descriptive identification available (e.g. a caption or similar).</td>
+   <td>
+    <p>See <a href="/en-US/docs/Learn/Accessibility/HTML#Text_alternatives">Text alternatives</a> for static caption options, and <a href="/en-US/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a>, <a href="/en-US/docs/Learn/Accessibility/Multimedia#Video_text_tracks">Video text tracks</a>, and <a href="/en-US/docs/Learn/Accessibility/Multimedia#Other_multimedia_content">Other multimedia content</a> for other alternatives.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>UI Controls such as form elements and buttons should have text labels that describe their purpose.</td>
+   <td>Buttons are simple — you should make sure the button text describes the function of the button (e.g. <code>&lt;button&gt;Upload image&lt;/button&gt;</code>). For further information on other UI controls, see <a href="/en-US/docs/Learn/Accessibility/HTML#UI_controls">UI controls</a>.</td>
+  </tr>
+  <tr>
+   <td>Implement decorative (non-content) images, video, etc., in a way that is invisible to assistive technology, so it doesn't confuse users.</td>
+   <td>
+    <p>Decorative images should be implemented using CSS background images (see <a href="/en-US/docs/Learn/CSS/Styling_boxes/Backgrounds">Backgrounds</a>).  If you have to include an image via an {{htmlelement("img")}} element, give it a blank alt (<code>alt=""</code>), otherwise screenreaders may try to read out the filepath, etc.</p>
+
+    <p>If you are including background video or audio that autoplays, make it as unobtrusive as possible. Don't make it look/sound like content, and provide a control to turn it off. Ideally, don't include it at all.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note</strong>: Also see the <a href="https://www.w3.org/TR/WCAG21/#text-alternatives">WCAG description for Guideline 1.1: Text alternatives</a>.</p>
+</div>
+
+<h2 id="Guideline_1.2_—_Providing_text_alternatives_for_time-based_media">Guideline 1.2 — Providing text alternatives for time-based media</h2>
+
+<p>Time-based media refers to multimedia with a duration, i.e. audio and video. Also note that if the audio/video serves as an alternative to existing text content, you don't need to provide another text alternative.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Success criteria</th>
+   <th scope="col">How to conform to the criteria</th>
+   <th scope="col">Practical resource</th>
+  </tr>
+  <tr>
+   <td colspan="1" rowspan="1">1.2.1 Provide alternatives for pre-recorded audio-only and video-only content (A)</td>
+   <td>A transcript should be provided for prerecorded audio-only media, and a transcript or audio description should be provided for prerecorded video-only media (i.e. silent video).</td>
+   <td>See <a href="/en-US/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a> for transcript information. No audio description tutorial available as yet.</td>
+  </tr>
+  <tr>
+   <td colspan="1">1.2.2 Provide captions for web-based video (A)</td>
+   <td>You should provide captions for video presented on the web, e.g. HTML5 video. This is for the benefit of people who can't hear the audio part of the video.</td>
+   <td>See <a href="/en-US/docs/Learn/Accessibility/Multimedia#Video_text_tracks">Video text tracks</a> for HTML5 video captions, and <a href="/en-US/docs/Learn/Accessibility/Multimedia#Other_multimedia_content">Other multimedia content</a> for other technologies. See also <a href="https://support.google.com/youtube/answer/2734796?hl=en">Add your own subtitles &amp; closed captions</a> (YouTube).</td>
+  </tr>
+  <tr>
+   <td colspan="1">1.2.3 Provide text transcript or audio description for web-based video (A)</td>
+   <td>You should provide text transcripts or audio descriptions for video presented on the web, e.g. HTML5 video. This is for the benefit of people who can't see the visual part of the video, and don't get the full content from the audio alone.</td>
+   <td>See <a href="/en-US/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a> for transcript information. No audio description tutorial available as yet.</td>
+  </tr>
+  <tr>
+   <td colspan="1">1.2.4 Provide captions for live audio (AA)</td>
+   <td>You should provide synchronized captions for all live multimedia that contains audio (e.g. video conferences, live audio broadcasts.)</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.2.5 Provide audio descriptions for prerecorded video (AA)</td>
+   <td>Audio descriptions should be provided for prerecorded video, but only where the existing audio does not convey the full meaning expressed by the video.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.2.6 Provide sign language equivalent to prerecorded audio (AAA)</td>
+   <td>An equivalent sign language video should be provided for any prerecorded content containing audio.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.2.7 Provide extended video with audio descriptions (AAA)</td>
+   <td>Where audio descriptions cannot be provided (see 1.2.5) due to video timing issues (e.g. there are no suitable pauses in the content in which to insert the audio descriptions), an alternative version of the video should be provided that includes inserted pauses (and audio descriptions).</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.2.8 Provide an alternative for prerecorded media (AAA)</td>
+   <td>For all content that features video, a descriptive text transcript should be provided, for example a script of the movie you are watching. This is for the benefit of hearing impaired viewers who cannot hear the content.</td>
+   <td>See <a href="/en-US/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a> for transcript information.</td>
+  </tr>
+  <tr>
+   <td colspan="1">1.2.9 Provide a transcript for live audio (AAA)</td>
+   <td>For any live audio content being broadcast, a descriptive text should be provided, for example a script of the play or musical you are listening to. This is for the benefit of hearing impaired viewers who cannot hear the content.</td>
+   <td>See <a href="/en-US/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a> for transcript information.</td>
+  </tr>
+ </thead>
+</table>
+
+<div class="note">
+<p><strong>Note</strong>: Also see the <a href="https://www.w3.org/TR/WCAG21/#time-based-media">WCAG description for Guideline 1.2: Time-based Media: Provide alternatives for time-based media</a>.</p>
+</div>
+
+<h2 id="Guideline_1.3_—_Create_content_that_can_be_presented_in_different_ways">Guideline 1.3 — Create content that can be presented in different ways</h2>
+
+<p>This guideline refers to the ability of content to be consumed by users in multiple ways, accomodating their differing needs.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Success criteria</th>
+   <th scope="col">How to conform to the criteria</th>
+   <th scope="col">Practical resource</th>
+  </tr>
+  <tr>
+   <td colspan="1" rowspan="1">1.3.1 Info and relationships (A)</td>
+   <td>
+    <p>Any content structure — or visual relationship made between content —  can also be determined programmatically, or be inferred from text description. The main situations in which this is relevant are:</p>
+
+    <ul>
+     <li>Text labels and the form elements they describe are associated unambiguously using the {{htmlelement("label")}} element, which can be picked up by screenreaders, etc.</li>
+     <li>Image alt text — content images should have text available that clearly describes the image's contents, which can be programmatically associated with it (e.g. <code>alt</code> text), or otherwise is easy to associate (e.g. describes it and is sat right next to it). This should means that the full meaning can still be inferred even if you can't see the image.</li>
+     <li>Lists — if the order of list items is important, and ordered list should be used ({{htmlelement("ol")}}).</li>
+    </ul>
+   </td>
+   <td>The whole of
+    <p><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a> is packed with information about this, but you should particularly refer to <a href="/en-US/docs/Learn/Accessibility/HTML#Good_semantics">Good semantics</a>, <a href="/en-US/docs/Learn/Accessibility/HTML#UI_controls">UI controls</a>, and <a href="/en-US/docs/Learn/Accessibility/HTML#Text_alternatives">Text alternatives</a>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.3.2 Meaningful content sequence (A)</td>
+   <td>A sensible, logical reading order should be easy to determine for any content, even if it is visually presented in an unusual way. The order should be made obvious by use of correct semantic elements (e.g. headings, paragraphs), with CSS being used to create any unusual layout styles, irrespective of the markup.</td>
+   <td>Again, refer to <a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a>.</td>
+  </tr>
+  <tr>
+   <td colspan="1">1.3.3 Sensory characteristics (A)</td>
+   <td>
+    <p>Instructions for operating controls or understanding content do not rely on a single sense — this may prove inaccessible to people with a disability related to that sense, or a device that does not support that sense. So for example:</p>
+
+    <ul>
+     <li>"Click the round button to continue" — The button should be clearly labelled so that it is obvious that it is the button you need to press. If there are multiple buttons, make sure there are all clearly labelled to distinguish their function.</li>
+     <li>"Listen to the audio instructions for guidance" — This is obviously problematic — audio will be inaccessible to those with heading impairments, whereas text can be read, but also spoken by a screenreader if required.</li>
+     <li>"Swipe from the right hand side of the screen to reveal the menu" — some users might not be able to swipe the screen, either due to disability or because their device does not support touch. An alternative should be provided, such as a keyboard shortcut or button that can be activated by keyboard or other means.</li>
+    </ul>
+
+    <div class="note">
+    <p><strong>Note</strong>: Conveying instructions solely by color is related, but covered in a different guideline — 1.4.1.</p>
+    </div>
+   </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.3.4 Orientation (AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td>
+   <td>Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential.</td>
+   <td>
+    <p><a href="https://www.w3.org/WAI/WCAG21/Understanding/orientation.html">Understanding Orientation</a> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.3.5 Identify Input Purpose (AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td>
+   <td>
+    <p> </p>
+
+    <p>Follow the list of <a href="https://www.w3.org/TR/WCAG21/#input-purposes">53 input fields</a> to programmatically identify the purpose of a field.   </p>
+   </td>
+   <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">Understanding Identify Input Purpose</a></td>
+  </tr>
+  <tr>
+   <td colspan="1">1.3.6 Identify Purpose (AAA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td>
+   <td>In content implemented using markup languages, the purpose of User Interface Components, icons, and regions can be programmatically determined.</td>
+   <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-purpose.html">Understanding Identify Purpose</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note</strong>: Also see the WCAG description for <a href="https://www.w3.org/TR/WCAG21/#adaptable">Guideline 1.3: Adaptable: Create content that can be presented in different ways without losing information or structure.</a></p>
+</div>
+
+<h2 id="Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Guideline 1.4: Make it easier for users to see and hear content including separating foreground from background</h2>
+
+<p>This guideline relates to making sure core content is easy to discernable from backgrounds and other decoration. The classic example is color (both color contrast and use of color to convey instructions), but it applies in other situations too.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Success criteria</th>
+   <th scope="col">How to conform to the criteria</th>
+   <th scope="col">Practical resource</th>
+  </tr>
+  <tr>
+   <td colspan="1" rowspan="1">1.4.1 Use of color (A)</td>
+   <td>
+    <p>Color should not be solely relied upon to convey information — for example, in forms you should never mark required fields purely with a color (like red). Instead (or as well as), something like an asterisk with a label of "required" would be more appropriate.</p>
+   </td>
+   <td>See <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Color and color contrast</a> and <a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form#Multiple_labels">Multiple labels</a>.</td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.2 Audio controls (A)</td>
+   <td>For any audio that plays for longer than three seconds, accessible controls should be provided to play and pause the audio/video, and mute/adjust volume.</td>
+   <td>Use native <code>&lt;button&gt;</code>s to provide accessible keyboard controls, as shown in <a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics">Video player syling basics</a>.</td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.3 Minimum contrast (AA)</td>
+   <td>
+    <p>The color contrast between background and foreground content should be at a minimum level to ensure legibility:</p>
+
+    <ul>
+     <li>Text and its background should have a contrast ratio of at least 4.5.1.</li>
+     <li>Heading (or just larger) text should have a ratio of at least 3.1. Larger text is defined as at least 18pt, or 14pt bold.</li>
+    </ul>
+   </td>
+   <td>See <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Color and color contrast</a>.</td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.4 Resize text (AA)</td>
+   <td>The page should be readable and usable when the text size is doubled. This means that designs should be responsive, so that when the text size is increased, the content is still accessible.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.5 Images of text (AA)</td>
+   <td>Images should NOT be used to present content where text would do the job. For example, if an image is mostly textual, it could be represented using text as well as images.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.6 Enhanced contrast (AAA)</td>
+   <td>
+    <p>This follows, and builds on, criterion 1.4.3.</p>
+
+    <ul>
+     <li>Text and its background should have a contrast ratio of at least 7.1.</li>
+     <li>Heading (or just larger) text should have a ratio of at least 4.5.1. Larger text is defined as at least 18pt, or 14pt bold.</li>
+    </ul>
+   </td>
+   <td>See <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Color and color contrast</a>.</td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.7 Low or no background audio (AAA)</td>
+   <td>Prerecorded audio recordings that primarily feature speech should have minimal background noise, so the content can be easily understood.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.8 Visual presentation (AAA)</td>
+   <td>
+    <p>For text content presentation, the following should be true:</p>
+
+    <ul>
+     <li>Foreground and background colors should be user-selectable.</li>
+     <li>Text blocks should be no wider than 80 characters (or glyphs), for maximum readability.</li>
+     <li>Text should not be fully justified (e.g. <code>text-align: justify;</code>)</li>
+     <li>line height should be at least 1.5 times the text size within paragraphs (e.g. <code>line-height: 1.5;</code>), and at least 2.25 times the text size between paragraphs (e.g. <code>padding: 2.25rem;</code>)</li>
+     <li>When the text size is doubled, the content should not need to be scrolled.</li>
+    </ul>
+   </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.9 Images of text (No Exception) (AAA)</td>
+   <td>Text should not be presented as part of an image unless it is purely decoration (i.e. it does not convey any content), or cannot be presented in any other way.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.10 Reflow (AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td>
+   <td>
+    <ul>
+     <li>No horizontal scrolling for right-to-left languages (like English) or left-to-right languages (like Arabic)   </li>
+     <li>No vertical scrolling for top-to-bottom languages (like Japanese)</li>
+     <li>Except for parts of the content which require two-dimensional layout for usage or meaning (like a large data table).</li>
+    </ul>
+   </td>
+   <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/reflow.html">Understanding Reflow</a></td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.11 Non-Text Contrast(AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td>
+   <td>Minimum color contrast ratio of 3 to 1 for user interface components and graphical objects. </td>
+   <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">Understanding Non-Text Contrast</a></td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.12 Text Spacing (AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td>
+   <td>
+    <p>No loss of content or functionality occurs when the following styles are applied: </p>
+
+    <ul>
+     <li>Line height (line spacing) to at least 1.5 times the font size;</li>
+     <li>Spacing following paragraphs to at least 2 times the font size;</li>
+     <li>Letter spacing (tracking) to at least 0.12 times the font size;</li>
+     <li>Word spacing to at least 0.16 times the font size.</li>
+    </ul>
+   </td>
+   <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html">Understanding Text Spacing</a></td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.13 Content on Hover or Focus (AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td>
+   <td>
+    <p>Additional content appear and disappear in coordination with hover and keyboard focus, this success criterion specifies three conditions that must be met:</p>
+
+    <ul>
+     <li>dismissable (can be closed/removed)</li>
+     <li>hoverable (the additional content does not disappear when the pointer is over it) </li>
+     <li>persistent (the additional content does not disappear without user action)</li>
+    </ul>
+   </td>
+   <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html">Understanding Content on Hover or Focus</a></td>
+  </tr>
+ </thead>
+</table>
+
+<div class="note">
+<p><strong>Note</strong>: Also see the WCAG description for <a href="https://www.w3.org/TR/WCAG21/#distinguishable">Guideline 1.4: Distinguishable: Make it easier for users to see and hear content including separating foreground from background.</a><a href="https://www.w3.org/TR/WCAG21/#distinguishable">.</a></p>
+</div>
+
+<p> </p>
+
+<h2 id="See_Also">See Also</h2>
+
+<ul>
+ <li><a href="en-US/docs/Web/Accessibility/Understanding_WCAG">WCAG</a>
+
+  <ol>
+   <li>Perceivable</li>
+   <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable">Operable</a></li>
+   <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable">Understandable</a></li>
+   <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Robust">Robust</a></li>
+  </ol>
+ </li>
+</ul>
+
+<p> </p>
diff --git a/files/de/web/api/aescbcparams/index.html b/files/de/web/api/aescbcparams/index.html
new file mode 100644
index 0000000000..65c2effd7b
--- /dev/null
+++ b/files/de/web/api/aescbcparams/index.html
@@ -0,0 +1,52 @@
+---
+title: AesCbcParams
+slug: Web/API/AesCbcParams
+translation_of: Web/API/AesCbcParams
+---
+<div>{{ APIRef("Web Crypto API") }}</div>
+
+<p>Das <strong><code>AesCbcParams</code></strong> Verzeichnis (dictionary) der <a href="/en-US/docs/Web/API/Web_Crypto_API">Web Crypto API </a>wird als <code>algorithm</code> Parameter an die Funktionen {{domxref("SubtleCrypto.encrypt()")}}, {{domxref("SubtleCrypto.decrypt()")}}, {{domxref("SubtleCrypto.wrapKey()")}} und {{domxref("SubtleCrypto.unwrapKey()")}} übergeben, wenn der Algorithmus <a href="/en-US/docs/Web/API/SubtleCrypto/encrypt#AES-CBC">AES-CBC</a> verwendet wird.</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>A {{domxref("DOMString")}}. Der Wert sollte auf <code>AES-CBC</code> gesetzt werden.</dd>
+ <dt><code>iv</code></dt>
+ <dd>Ein {{domxref("BufferSource")}}. Der Initialisierungsvektor. Er muss 16 Bytes lang sein und sollte unvorhersehbar und am besten kryptografisch zufällig sein. Er muss aber nicht geheim sein, er kann unverschlüsselt mit dem Kryptogram übertragen werden.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Siehe Beispiele für {{domxref("SubtleCrypto.encrypt()")}} und {{domxref("SubtleCrypto.decrypt()")}}.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('Web Crypto API', '#dfn-AesCbcParams', 'SubtleCrypto.AesCbcParams') }}</td>
+   <td>{{ Spec2('Web Crypto API') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>Browser mit Unterstützung für den "AES-CBC" Algorithmus werden die Methoden {{domxref("SubtleCrypto.encrypt()")}}, {{domxref("SubtleCrypto.decrypt()")}}, {{domxref("SubtleCrypto.wrapKey()")}} und {{domxref("SubtleCrypto.unwrapKey()")}} für diesen Typ unterstützen.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>CBC Modus wird in Sektion 6.2 des <a class="external external-icon" href="https://nvlpubs.nist.gov/nistpubs/Legacy/SP/nistspecialpublication800-38a.pdf#%5B%7B%22num%22%3A70%2C%22gen%22%3A0%7D%2C%7B%22name%22%3A%22Fit%22%7D%5D" rel="noopener">NIST SP800-38A standard</a> spezifiziert.</li>
+ <li>{{domxref("SubtleCrypto.encrypt()")}}.</li>
+ <li>{{domxref("SubtleCrypto.decrypt()")}}.</li>
+ <li>{{domxref("SubtleCrypto.wrapKey()")}}.</li>
+ <li>{{domxref("SubtleCrypto.unwrapKey()")}}.</li>
+</ul>
diff --git a/files/de/web/api/animationevent/index.html b/files/de/web/api/animationevent/index.html
new file mode 100644
index 0000000000..7bd808e0ca
--- /dev/null
+++ b/files/de/web/api/animationevent/index.html
@@ -0,0 +1,190 @@
+---
+title: AnimationEvent
+slug: Web/API/AnimationEvent
+tags:
+  - API
+  - Experimental
+  - Expérimental(2)
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - Référence(2)
+  - TopicStub
+  - Web Animations
+translation_of: Web/API/AnimationEvent
+---
+<p>{{SeeCompatTable}}{{APIRef("Web Animations API")}}</p>
+
+<p>The <strong><code>AnimationEvent</code></strong> interface represents events providing information related to <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">animations</a>.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Also inherits properties from its parent {{domxref("Event")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("AnimationEvent.animationName")}} {{readonlyInline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the value of the {{cssxref("animation-name")}} CSS property associated with the transition.</dd>
+ <dt>{{domxref("AnimationEvent.elapsedTime")}} {{readonlyInline}}</dt>
+ <dd>Is a <code>float</code> giving the amount of time the animation has been running, in seconds, when this event fired, excluding any time the animation was paused. For an <code>"animationstart"</code> event, <code>elapsedTime</code> is <code>0.0</code> unless there was a negative value for {{cssxref("animation-delay")}}, in which case the event will be fired with <code>elapsedTime</code> containing  <code>(-1 * </code><em>delay</em><code>)</code>.</dd>
+ <dt>{{domxref("AnimationEvent.pseudoElement")}} {{readonlyInline}}</dt>
+ <dd>Is a {{domxref("DOMString")}}, starting with <code>'::'</code>, containing the name of the <a href="/en-US/docs/Web/CSS/Pseudo-elements" title="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-element</a> the animation runs on. If the animation doesn't run on a pseudo-element but on the element, an empty string: <code>''</code><code>.</code></dd>
+</dl>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("AnimationEvent.AnimationEvent", "AnimationEvent()")}}</dt>
+ <dd>Creates an <code>AnimationEvent</code> event with the given parameters.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Also inherits methods from its parent {{domxref("Event")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("AnimationEvent.initAnimationEvent()")}} {{non-standard_inline}}{{deprecated_inline}}</dt>
+ <dd>Initializes a <code>AnimationEvent</code> created using the deprecated {{domxref("Document.createEvent()", "Document.createEvent(\"AnimationEvent\")")}} method.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent') }}</td>
+   <td>{{ Spec2('CSS3 Animations') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>
+    <p>1.0 {{ property_prefix("webkit") }}</p>
+
+    <p>{{CompatChrome(43.0)}}</p>
+   </td>
+   <td>{{ CompatGeckoDesktop("6.0") }}</td>
+   <td>10.0</td>
+   <td>12 {{ property_prefix("o") }}<br>
+    12.10<br>
+    15.0 {{ property_prefix("webkit") }}</td>
+   <td>4.0 {{ property_prefix("webkit") }}</td>
+  </tr>
+  <tr>
+   <td><code>AnimationEvent()</code> constructor</td>
+   <td>
+    <p>{{CompatChrome(43.0)}}</p>
+   </td>
+   <td>{{ CompatGeckoDesktop("23.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>initAnimationEvent()</code> {{non-standard_inline}}{{deprecated_inline}}</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop("6.0") }}<br>
+    Removed in {{ CompatGeckoDesktop("23.0") }}</td>
+   <td>10.0</td>
+   <td>12</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td><code>pseudoelement</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("23.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}{{ property_prefix("webkit") }}</td>
+   <td>{{ CompatGeckoMobile("6.0") }}</td>
+   <td>10.0</td>
+   <td>12 {{ property_prefix("o") }}<br>
+    12.10<br>
+    15.0 {{ property_prefix("webkit") }}</td>
+   <td>{{CompatVersionUnknown}}{{ property_prefix("webkit") }}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>AnimationEvent()</code> constructor</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("23.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>initAnimationEvent()</code> {{non-standard_inline}}{{deprecated_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("6.0") }}<br>
+    Removed in {{ CompatGeckoMobile("23.0") }}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>pseudoelement</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("23.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_animations">Using CSS animations</a></li>
+ <li>Animation-related CSS properties and at-rules: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.</li>
+</ul>
diff --git a/files/de/web/api/audiocontext/decodeaudiodata/index.html b/files/de/web/api/audiocontext/decodeaudiodata/index.html
new file mode 100644
index 0000000000..32cfda28eb
--- /dev/null
+++ b/files/de/web/api/audiocontext/decodeaudiodata/index.html
@@ -0,0 +1,218 @@
+---
+title: AudioContext.decodeAudioData()
+slug: Web/API/AudioContext/decodeAudioData
+translation_of: Web/API/BaseAudioContext/decodeAudioData
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>Die Methode decodeAudioData() im Interface {{ domxref("AudioContext") }} wird dazu benutzt um in einem {{ domxref("ArrayBuffer")}} enthaltene Audiodaten asynchron zu dekodieren. Im Normalfall wird der ArrayBuffer mit der  {{domxref("XMLHttpRequest")}} <code>response</code> Eigenschaft befüllt, nachdem der <code>responseType</code> auf <code>arraybuffer gesetzt wurde</code>. Der dekodierte AudioBuffer wird auf die Samplerate des AudioContextes angepasst und anschließend an ein Callback oder Promise weitergegeben.</p>
+</div>
+
+<p>Dies ist die bevorzugte Methode im eine Audioquelle für die Web Audio API aus einem Audiotrack zu generieren.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>Alte Callbacksyntax:</p>
+
+<pre class="syntaxbox">audioCtx.decodeAudioData(audioData, function(decodedData) {
+  // use the dec​oded data here
+});</pre>
+
+<p>Neue Promise basierte Syntax:</p>
+
+<pre class="syntaxbox">audioCtx.decodeAudioData(audioData).then(function(decodedData) {
+  // use the decoded data here
+});</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>In diesem Abschnitt wird zuerst die ältere Callback basierte Syntax und anschließend die neue Promise basierte Syntax behandelt.</p>
+
+<h3 id="Ältere_Callbacksyntax">Ältere Callbacksyntax</h3>
+
+<p>In diesem Beispiel nutzt die getData() Funktion XHR um einen Audiotrack zu laden, indem sie die responseType Eigenschaft setzt um einen ArrayBuffer als Antwort zu erhalten, welcher anschließend in der audioData variable gespeichert wird. Dieser Buffer wird nun an die decodeAudioData() Funktion übergeben; Das success Callback nutzt die erfolgreich dekodierten PCM Daten, erstellt einen {{ domxref("AudioBufferSourceNode") }} mit Hilfe von {{ domxref("AudioContext.createBufferSource()") }}, verbindet diese Quelle mit {{domxref("AudioContext.destination") }} und setzt den Schleifenmodus.</p>
+
+<p>Die Buttons in diesem Beispiel rufen lediglich getData() um die Daten zu laden und die Wiedergabe zu starten, sowie stop() um die Wiedergabe anzuhalten auf. Wenn die stop() Methode der Quelle aufgerufen wird die Quelle geleert.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can <a href="http://mdn.github.io/decode-audio-data/">run the example live</a> (or <a href="https://github.com/mdn/decode-audio-data">view the source</a>.)</p>
+</div>
+
+<pre class="brush: js">// Variablen definieren
+
+var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var source;
+
+var pre = document.querySelector('pre');
+var myScript = document.querySelector('script');
+var play = document.querySelector('.play');
+var stop = document.querySelector('.stop');
+
+// Benutzt XHR um einen Track zu laden und
+// decodeAudioData um diesen zu dekodieren und in einen Buffer zu kopieren.
+// Anschließend wird der Buffer in eine Quelle kopiert.
+
+function getData() {
+  source = audioCtx.createBufferSource();
+  var request = new XMLHttpRequest();
+
+  request.open('GET', 'viper.ogg', true);
+
+  request.responseType = 'arraybuffer';
+
+
+  request.onload = function() {
+    var audioData = request.response;
+
+    audioCtx.decodeAudioData(audioData, function(buffer) {
+        source.buffer = buffer;
+
+        source.connect(audioCtx.destination);
+        source.loop = true;
+      },
+
+      function(e){"Error with decoding audio data" + e.err});
+
+  }
+
+  request.send();
+}
+
+// Buttons setzen um Wiedergabe zu starten und stoppen
+
+play.onclick = function() {
+  getData();
+  source.start(0);
+  play.setAttribute('disabled', 'disabled');
+}
+
+stop.onclick = function() {
+  source.stop(0);
+  play.removeAttribute('disabled');
+}
+
+
+// Script ausgeben
+
+pre.innerHTML = myScript.innerHTML;</pre>
+
+<h3 id="Neue_Promise_basierte_Syntax">Neue Promise basierte Syntax</h3>
+
+<pre class="brush: js">ctx.decodeAudioData(compressedBuffer).then(function(decodedData) {
+ // Die dekodierten PCM Daten können hier verwendet werden
+});</pre>
+
+<h2 id="Parameter">Parameter</h2>
+
+<dl>
+ <dt>ArrayBuffer</dt>
+ <dd>Ein ArrayBuffer der die zu dekodierenden Daten enthält. Dieser wird normalerweise durch einen {{domxref("XMLHttpRequest")}} befüllt nachdem der <code>responseType</code> auf <code>arraybuffer gesetzt wurde</code>.</dd>
+ <dt>DecodeSuccessCallback</dt>
+ <dd>Ein Callback das aufgerufen wird wenn die Dekodierung erfolgreich abgeschlossen wird. Der einzige Parameter der an diese Funktion übergeben wird stellt einen AudioBuffer dar, der die dekodierten Audiodaten enthält. Normalerweise wird dieser Buffer an einen {{domxref("AudioBufferSourceNode")}} übergeben, von wo er wiedergeben und verändert werden kann.</dd>
+ <dt>DecodeErrorCallback</dt>
+ <dd>Ein optionales Callback das bei einem Fehler während der Dekodierung aufgerufen wird.</dd>
+</dl>
+
+<h2 id="Rückgabewerte">Rückgabewerte</h2>
+
+<p>Ein {{domxref("AudioBuffer") }} der die dekodierten Audiodaten enthällt.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AudioContext-decodeAudioData-Promise-AudioBuffer--ArrayBuffer-audioData-DecodeSuccessCallback-successCallback-DecodeErrorCallback-errorCallback', 'decodeAudioData()')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserunterstützung">Browserunterstützung</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td>Promise-based syntax</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(33.0)}}</td>
+  </tr>
+  <tr>
+   <td>Promise-based syntax</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(49.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/de/web/api/audiocontext/index.html b/files/de/web/api/audiocontext/index.html
new file mode 100644
index 0000000000..cc2c2db92e
--- /dev/null
+++ b/files/de/web/api/audiocontext/index.html
@@ -0,0 +1,232 @@
+---
+title: AudioContext
+slug: Web/API/AudioContext
+translation_of: Web/API/AudioContext
+---
+<p>{{APIRef("Web Audio API")}}</p>
+
+<div>
+<p>Die <code>AudioContext</code> Schnittstelle bildet einen Audioverarbeitungsdiagramm, aus mehreren miteinander verbundenen Audiomodulen bestehend, ab. Bei jedem dieser Module handelt es sich um einen Knoten ({{domxref("AudioNode")}}). Ein AudioContext kontrolliert sowohl die Erstellung der einzelnen in ihm enthaltenen Knoten als auch den Prozess der Audioverarbeitung oder des Dekodierens. Als erster Schritt muss immer ein Audio Kontext angelegt werden, da sämtliche Funktionen innerhalb dieses Kontextes ausgeführt werden.</p>
+</div>
+
+<p><code>Ein AudioContext</code> kann das Ziel von Events sein, aufgrund dessen unterstützt er auch die {{domxref("EventTarget")}} Schnittstelle.</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt>{{domxref("AudioContext.currentTime")}} {{readonlyInline}}</dt>
+ <dd>Returns a double representing an ever-increasing hardware time in seconds used for scheduling. It starts at <code>0</code>.</dd>
+ <dt>{{domxref("AudioContext.destination")}} {{readonlyInline}}</dt>
+ <dd>Returns an {{domxref("AudioDestinationNode")}} representing the final destination of all audio in the context. It can be thought of as the audio-rendering device.</dd>
+ <dt>{{domxref("AudioContext.listener")}} {{readonlyInline}}</dt>
+ <dd>Returns the {{domxref("AudioListener")}} object, used for 3D spatialization.</dd>
+ <dt>{{domxref("AudioContext.sampleRate")}} {{readonlyInline}}</dt>
+ <dd>Returns a float representing the sample rate (in samples per second) used by all nodes in this context. The sample-rate of an {{domxref("AudioContext")}} cannot be changed.</dd>
+ <dt>{{domxref("AudioContext.state")}} {{readonlyInline}}</dt>
+ <dd>Returns the current state of the <code>AudioContext</code>.</dd>
+ <dt>{{domxref("AudioContext.mozAudioChannelType")}} {{ non-standard_inline() }} {{readonlyInline}}</dt>
+ <dd>Used to return the audio channel that the sound playing in an {{domxref("AudioContext")}} will play in, on a Firefox OS device.</dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<dl>
+ <dt>{{domxref("AudioContext.onstatechange")}}</dt>
+ <dd>An event handler that runs when an event of type {{event("statechange")}} has fired. This occurs when the <code>AudioContext</code>'s state changes, due to the calling of one of the state change methods ({{domxref("AudioContext.suspend")}}, {{domxref("AudioContext.resume")}}, or {{domxref("AudioContext.close")}}.)</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<p><em>Implementiert zusätzlich die Methoden der Schnittstelle </em>{{domxref("EventTarget")}}.</p>
+
+<dl>
+ <dt>{{domxref("AudioContext.close()")}}</dt>
+ <dd>Closes the audio context, releasing any system audio resources that it uses.</dd>
+ <dt>{{domxref("AudioContext.createBuffer()")}}</dt>
+ <dd>Creates a new, empty {{ domxref("AudioBuffer") }} object, which can then be populated by data and played via an {{ domxref("AudioBufferSourceNode") }}.</dd>
+ <dt>{{domxref("AudioContext.createBufferSource()")}}</dt>
+ <dd>Creates an {{domxref("AudioBufferSourceNode")}}, which can be used to play and manipulate audio data contained within an {{ domxref("AudioBuffer") }} object. {{ domxref("AudioBuffer") }}s are created using {{domxref("AudioContext.createBuffer")}} or returned by {{domxref("AudioContext.decodeAudioData")}} when it successfully decodes an audio track.</dd>
+ <dt>{{domxref("AudioContext.createMediaElementSource()")}}</dt>
+ <dd>Creates a {{domxref("MediaElementAudioSourceNode")}} associated with an {{domxref("HTMLMediaElement")}}. This can be used to play and manipulate audio from {{HTMLElement("video")}} or {{HTMLElement("audio")}} elements.</dd>
+ <dt>{{domxref("AudioContext.createMediaStreamSource()")}}</dt>
+ <dd>Creates a {{domxref("MediaStreamAudioSourceNode")}} associated with a {{domxref("MediaStream")}} representing an audio stream which may come from the local computer microphone or other sources.</dd>
+ <dt>{{domxref("AudioContext.createMediaStreamDestination()")}}</dt>
+ <dd>Creates a {{domxref("MediaStreamAudioDestinationNode")}} associated with a {{domxref("MediaStream")}} representing an audio stream which may be stored in a local file or sent to another computer.</dd>
+ <dt>{{domxref("AudioContext.createScriptProcessor()")}}</dt>
+ <dd>Creates a {{domxref("ScriptProcessorNode")}}, which can be used for direct audio processing via JavaScript.</dd>
+ <dt>{{domxref("AudioContext.createStereoPanner()")}}</dt>
+ <dd>Creates a {{domxref("StereoPannerNode")}}, which can be used to apply stereo panning to an audio source.</dd>
+ <dt>{{domxref("AudioContext.createAnalyser()")}}</dt>
+ <dd>Creates an {{domxref("AnalyserNode")}}, which can be used to expose audio time and frequency data and for example to create data visualisations.</dd>
+ <dt>{{domxref("AudioContext.createBiquadFilter()")}}</dt>
+ <dd>Creates a {{domxref("BiquadFilterNode")}}, which represents a second order filter configurable as several different common filter types: high-pass, low-pass, band-pass, etc.</dd>
+ <dt>{{domxref("AudioContext.createChannelMerger()")}}</dt>
+ <dd>Creates a {{domxref("ChannelMergerNode")}}, which is used to combine channels from multiple audio streams into a single audio stream.</dd>
+ <dt>{{domxref("AudioContext.createChannelSplitter()")}}</dt>
+ <dd>Creates a {{domxref("ChannelSplitterNode")}}, which is used to access the individual channels of an audio stream and process them separately.</dd>
+ <dt>{{domxref("AudioContext.createConvolver()")}}</dt>
+ <dd>Creates a {{domxref("ConvolverNode")}}, which can be used to apply convolution effects to your audio graph, for example a reverberation effect.</dd>
+ <dt>{{domxref("AudioContext.createDelay()")}}</dt>
+ <dd>Creates a {{domxref("DelayNode")}}, which is used to delay the incoming audio signal by a certain amount. This node is also useful to create feedback loops in a Web Audio API graph.</dd>
+ <dt>{{domxref("AudioContext.createDynamicsCompressor()")}}</dt>
+ <dd>Creates a {{domxref("DynamicsCompressorNode")}}, which can be used to apply acoustic compression to an audio signal.</dd>
+ <dt>{{domxref("AudioContext.createGain()")}}</dt>
+ <dd>Creates a {{domxref("GainNode")}}, which can be used to control the overall volume of the audio graph.</dd>
+ <dt>{{domxref("AudioContext.createOscillator()")}}</dt>
+ <dd>Creates an {{domxref("OscillatorNode")}}, a source representing a periodic waveform. It basically generates a tone.</dd>
+ <dt>{{domxref("AudioContext.createPanner()")}}</dt>
+ <dd>Creates a {{domxref("PannerNode")}}, which is used to spatialise an incoming audio stream in 3D space.</dd>
+ <dt>{{domxref("AudioContext.createPeriodicWave()")}}</dt>
+ <dd>Creates a {{domxref("PeriodicWave")}}, used to define a periodic waveform that can be used to determine the output of an {{ domxref("OscillatorNode") }}.</dd>
+ <dt>{{domxref("AudioContext.createWaveShaper()")}}</dt>
+ <dd>Creates a {{domxref("WaveShaperNode")}}, which is used to implement non-linear distortion effects.</dd>
+ <dt>{{domxref("AudioContext.createAudioWorker()")}}</dt>
+ <dd>Creates an {{domxref("AudioWorkerNode")}}, which can interact with a web worker thread to generate, process, or analyse audio directly. This was added to the spec on August 29 2014, and is not implemented in any browser yet.</dd>
+ <dt>{{domxref("AudioContext.decodeAudioData()")}}</dt>
+ <dd>Asynchronously decodes audio file data contained in an {{domxref("ArrayBuffer")}}. In this case, the ArrayBuffer is usually loaded from an {{domxref("XMLHttpRequest")}}'s <code>response</code> attribute after setting the <code>responseType</code> to <code>arraybuffer</code>. This method only works on complete files, not fragments of audio files.</dd>
+ <dt>{{domxref("AudioContext.resume()")}}</dt>
+ <dd>Resumes the progression of time in an audio context that has previously been suspended.</dd>
+ <dt>{{domxref("AudioContext.suspend()")}}</dt>
+ <dd>Suspends the progression of time in the audio context, temporarily halting audio hardware access and reducing CPU/battery usage in the process.</dd>
+</dl>
+
+<h2 id="Obsolete_Methoden">Obsolete Methoden</h2>
+
+<dl>
+ <dt>{{domxref("AudioContext.createJavaScriptNode()")}}</dt>
+ <dd>Creates a {{domxref("JavaScriptNode")}}, used for direct audio processing via JavaScript. This method is obsolete, and has been replaced by {{domxref("AudioContext.createScriptProcessor()")}}.</dd>
+ <dt>{{domxref("AudioContext.createWaveTable()")}}</dt>
+ <dd>Creates a {{domxref("WaveTableNode")}}, used to define a periodic waveform. This method is obsolete, and has been replaced by {{domxref("AudioContext.createPeriodicWave()")}}.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Grundsätzliche Deklarierung eines Audio Kontextes:</p>
+
+<pre class="brush: js">var audioCtx = new AudioContext();</pre>
+
+<p>Browserunabhängige Variante:</p>
+
+<pre class="brush: js">var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+var oscillatorNode = audioCtx.createOscillator();
+var gainNode = audioCtx.createGain();
+var finish = audioCtx.destination;
+// etc.</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#the-audiocontext-interface', 'AudioContext')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}<br>
+    35</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>createStereoPanner()</code></td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatGeckoDesktop(37.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>onstatechange</code>, <code>state</code>, <code>suspend()</code>, <code>resume()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(40.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(37.0)}} </td>
+   <td>2.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>createStereoPanner()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onstatechange</code>, <code>state</code>, <code>suspend()</code>, <code>resume()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul style="margin-left: 40px;">
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+ <li>{{domxref("OfflineAudioContext")}}</li>
+</ul>
diff --git a/files/de/web/api/audiodestinationnode/index.html b/files/de/web/api/audiodestinationnode/index.html
new file mode 100644
index 0000000000..4acda5845c
--- /dev/null
+++ b/files/de/web/api/audiodestinationnode/index.html
@@ -0,0 +1,141 @@
+---
+title: AudioDestinationNode
+slug: Web/API/AudioDestinationNode
+translation_of: Web/API/AudioDestinationNode
+---
+<p>{{APIRef("Web Audio API")}}</p>
+
+<div>
+<p>Die <code>AudioDestinationNode</code> Schnittstelle repräsentiert das Ziel bzw. den Ausgang eines Audiographen in einem gegebenen Kontext — in der Regel die Lautsprecher. Es könnte aber auch ein Knoten <em>(Node)</em> sein, der Audiodaten in einem <code>OfflineAudioContext </code>aufzeichnet.</p>
+</div>
+
+<p><code>AudioDestinationNode</code> hat einen Eingang und keinen Ausgang (denn er ist der Ausgang, kein weiterer Audio Node kann verlinkt werden). Die Anzahl der Kanäle des Eingangs muss zwischen null und dem Wert von <code>maxChannelCount</code> liegen, sonst wird eine <em>Exception </em>ausgelöst.</p>
+
+<p>Der <code>AudioDestinationNode</code> eines gegebenen <code>AudioContext</code> kann über das {{domxref("AudioContext.destination")}} Attribut erzeugt bzw. empfangen werden.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Anzahl Inputs</th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Anzahl Outputs</th>
+   <td><code>0</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Kanalzählmethode</th>
+   <td><code>"explicit"</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Kanal Anzahl</th>
+   <td><code>2</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Kanal Interpretation</th>
+   <td><code>"speakers"</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<p><em>erbt Eigenschaften von der Elternklasse, </em><em>{{domxref("AudioNode")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("AudioDestinationNode.maxChannelCount")}}</dt>
+ <dd>Ist ein <code>unsigned long</code> der die maximale Kanalzahl definiert, die das physische Gerät bedienen kann.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<p><em>Keine spezifischen Methoden; erbt die Methoden der Elternklasse, </em><em>{{domxref("AudioNode")}}</em>.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Das Benutzen des<code> AudioDestinationNode</code> ist per Design einfach gehalten — es repräsentiert den Ausgang des physikalischen Geräts (Lautsprecher), so dass man dieses mit ein paar Zeilen Code mit einem Audiographen verbinden kann:</p>
+
+<pre class="brush: js">var audioCtx = new AudioContext();
+var source = audioCtx.createMediaElementSource(myMediaElement);
+source.connect(gainNode);
+gainNode.connect(audioCtx.destination);</pre>
+
+<p>Für ein kompletteres Beispiel, sehen Sie sich eines unserer MDN Web Audio Beispiele, wie den <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-o-matic</a> oder das <a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a> an.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#the-audiodestinationnode-interface', 'AudioDestinationNode')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>14 {{property_prefix("webkit")}}</td>
+   <td>23</td>
+   <td>{{CompatNo}}</td>
+   <td>15 {{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>28 {{property_prefix("webkit")}}</td>
+   <td>25</td>
+   <td>1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/de/web/api/audionode/index.html b/files/de/web/api/audionode/index.html
new file mode 100644
index 0000000000..8ad96dc760
--- /dev/null
+++ b/files/de/web/api/audionode/index.html
@@ -0,0 +1,191 @@
+---
+title: AudioNode
+slug: Web/API/AudioNode
+translation_of: Web/API/AudioNode
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<p>Ein <strong><code>AudioNode</code></strong> ist eine generische Schnittstelle um ein Signalverarbeitungsmodul wie z.B. ein HTML {{HTMLElement("audio")}} or {{HTMLElement("video")}} Element, ein {{domxref("OscillatorNode")}}, die Audio Destination, ein zwischengeschaltenes audio-verarbeitendes Modul wie z.B. einen {{domxref("BiquadFilterNode")}} oder {{domxref("ConvolverNode")}}), oder Lautstärkeregler (like {{domxref("GainNode")}}).</p>
+
+<p><img alt="AudioNodes participating in an AudioContext create a audio routing graph." src="https://mdn.mozillademos.org/files/9713/WebAudioBasics.png" style="display: block; height: 230px; margin: 0px auto; width: 677px;"></p>
+
+<p>Ein <code>AudioNode</code> hat Ein- und Ausgänge, jeweils mit einer gegebenen Anzahl an Kanälen.<em> </em>Einen <code>AudioNode</code> ohne Eingänge und mit einem oder mehreren Ausgängen nennt man <em>source node </em>(dt.: Quellknoten). Die Art der Signalverarbeitung in einem Audio Node variiert mit dessen Funktion. Der folgende Ablauf liegt jedoch immer zugrunde:  das Signal am Eingang wird eingelesen,  das Signal wird zu einem neuen Signal verarbeitet und an den Ausgang geleitet. In einigen Fällen, wir das Signal unverarbeitet durchgeschleust, so z.B. beim {{domxref("AnalyserNode")}}, wo das Resultat der Signalverarbeitung separat zugänglich ist.</p>
+
+<p>Mehrere Nodes können zu einem <em>Processing Graph </em>(dt.:Verarbeitungs-Netz) verbunden werden. Ein solcher Graph befindet sich immer in genau einem {{domxref("AudioContext")}}. Signal- verarbeitende Nodes erben die Eigenschaften und Methoden von <code>Audio Node</code>, implementieren aber auch eigene Funktionalität. Weitere Informationen geben die Seiten der speziellen <code>Audio Nodes</code>,  die sie auf der Homepage der <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> finden.</p>
+
+<div class="note">
+<p><span style="font-size: 14px; line-height: 21px;"><strong>Hinweis</strong></span>: Ein <code>AudioNode</code> kann das Ziel von Events sein, und implementiert daher die {{domxref("EventTarget")}} Schnittstelle.</p>
+</div>
+
+<h2 id="Properties" style="">Properties</h2>
+
+<dl>
+ <dt>{{domxref("AudioNode.context")}} {{readonlyInline}}</dt>
+ <dd>Liefert den assoziierten {{domxref("AudioContext")}}, der den signalverarbeitenden Graphen (processing graph) enthält, in den der Node eingebunden ist.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AudioNode.numberOfInputs")}} {{readonlyInline}}</dt>
+ <dd>Liefert die Anzahl der Eingänge des Nodes. Source nodes (dt. Quellknoten) sind definiert als Nodes, deren <code>numberOfInputs</code> Eigenschaft einen Wert von <code>0 </code>aufweist.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AudioNode.numberOfOutputs")}} {{readonlyInline}}</dt>
+ <dd>Liefert die Anzahl der Ausgänge des Nodes. Destination nodes (dt.: Zielknoten) — wie {{ domxref("AudioDestinationNode") }} — haben einen Wert von  <code>0</code> für diese Eigenschaft.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AudioNode.channelCount")}}</dt>
+ <dd>Represents an integer used to determine how many channels are used when <a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Up-mixing_and_down-mixing">up-mixing and down-mixing</a> connections to any inputs to the node. Its usage and precise definition depend on the value of {{domxref("AudioNode.channelCountMode")}}.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AudioNode.channelCountMode")}}</dt>
+ <dd>Represents an enumerated value describing the way channels must be matched between the node's inputs and outputs.</dd>
+ <dt>{{domxref("AudioNode.channelInterpretation")}}</dt>
+ <dd>Represents an enumerated value describing the meaning of the channels. This interpretation will define how audio <a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Up-mixing_and_down-mixing">up-mixing and down-mixing</a> will happen.<br>
+ The possible values are <code>"speakers"</code> or <code>"discrete"</code>.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Also implements methods from the interface </em>{{domxref("EventTarget")}}.</p>
+
+<dl>
+ <dt>{{domxref("AudioNode.connect(AudioNode)")}}</dt>
+ <dd>Allows us to connect one output of this node to one input of another node.</dd>
+ <dt>{{domxref("AudioNode.connect(AudioParam)")}}</dt>
+ <dd>Allows us to connect one output of this node to one input of an audio parameter.</dd>
+ <dt>{{domxref("AudioNode.disconnect()")}}</dt>
+ <dd>Allows us to disconnect the current node from another one it is already connected to.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<p>This simple snippet of code shows the creation of some audio nodes, and how the <code>AudioNode</code> properties and methods can be used. You can find examples of such usage on any of the examples linked to on the <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> landing page (for example <a href="https://github.com/mdn/violent-theremin">Violent Theremin</a>.)<span class="p"> </span></p>
+
+<pre class="brush: js;highlight[8,9,11,12,13,14]">var AudioContext = window.AudioContext || window.webkitAudioContext;
+
+var audioCtx = new AudioContext();
+
+var oscillator = audioCtx.createOscillator();
+var gainNode = audioCtx.createGain();
+
+oscillator.connect(gainNode);
+gainNode.connect(audioCtx.destination);
+
+oscillator.context;
+oscillator.numberOfInputs;
+oscillator.numberOfOutputs;
+oscillator.channelCount;</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#the-audionode-interface', 'AudioNode')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>channelCount</code> <code>channelCountMode</code></td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>connect</code><code>(AudioParam)</code></td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>25.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>channelCount</code><br>
+    <code>channelCountMode</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>connect</code><code>(AudioParam)</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/de/web/api/audiotrack/index.html b/files/de/web/api/audiotrack/index.html
new file mode 100644
index 0000000000..3ef55d93ad
--- /dev/null
+++ b/files/de/web/api/audiotrack/index.html
@@ -0,0 +1,86 @@
+---
+title: AudioTrack
+slug: Web/API/AudioTrack
+translation_of: Web/API/AudioTrack
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">Das <strong><code>AudioTrack</code></strong> Interface stellt einen einzelnen Audiotrack aus einem der HTML-Medienelemente {{HTMLElement("audio")}} oder {{HTMLElement("video")}} dar. </span>Die häufigste Verwendung für ein <code>AudioTrack</code> Objekt ist das (De-)Aktivieren seiner Eigenschaft {{domxref("AudioTrack.enabled", "enabled")}} um den Track stummzuschalten.</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt>{{domxref("AudioTrack.enabled", "enabled")}}</dt>
+ <dd>Ein Boolescher Wert, der kontrolliert ob der Sound für den Audiotrack aktiviert ist. Steht dieser Wert auf  <code>false</code>, ist der Ton stummgeschaltet.</dd>
+ <dt>{{domxref("AudioTrack.id", "id")}} {{ReadOnlyInline}}</dt>
+ <dd>Eine {{domxref("DOMString")}}, die den Track eindeutig innerhalb des Mediums identifiziert. Diese ID kann genutzt werden, um einen bestimmten Track auf einer Audio-Track-Liste durch Aufruf von {{domxref("AudioTrackList.getTrackById()")}} zu finden. Die ID kann auch als Fragment der URL genutzt werden, wenn das Medium die Suche per Medienfragment laut <a href="https://www.w3.org/TR/media-frags/">Media Fragments URI-Spezifikation</a> unterstützt.</dd>
+ <dt>{{domxref("AudioTrack.kind", "kind")}} {{ReadOnlyInline}}</dt>
+ <dd>Ein {{domxref("DOMString")}}, das bestimmt zu welcher Kategorie ein Track gehört. Der Haupt-Audiotrack hätte bspw. als <code>kind</code> die Eigenschaft <code>"main"</code>.</dd>
+ <dt>{{domxref("AudioTrack.label", "label")}} {{ReadOnlyInline}}</dt>
+ <dd>Ein {{domxref("DOMString")}}, das ein visuelles Label für den Track anzeigt. Z.B. hätte ein Audiokommentar-Track für einen Film als <code>label</code>  <code>"Kommentar mit Regisseur Max Mustermann und den Schauspielern XYZ und ZYX."</code> Dieser String bleibt leer, wenn kein Label angegeben wurde.</dd>
+ <dt>{{domxref("AudioTrack.language", "language")}} {{ReadOnlyInline}}</dt>
+ <dd>A {{domxref("DOMString")}} specifying the audio track's primary language, or an empty string if unknown. The language is specified as a BCP 47 ({{RFC(5646)}}) language code, such as <code>"en-US"</code> or <code>"pt-BR"</code>.</dd>
+ <dt>{{domxref("AudioTrack.sourceBuffer", "sourceBuffer")}} {{ReadOnlyInline}}</dt>
+ <dd>The {{domxref("SourceBuffer")}} that created the track. Returns null if the track was not created by a {{domxref("SourceBuffer")}} or the {{domxref("SourceBuffer")}} has been removed from the {{domxref("MediaSource.sourceBuffers")}} attribute of its parent media source.</dd>
+</dl>
+
+<h2 id="Usage_notes">Usage notes</h2>
+
+<p>To get an <code>AudioTrack</code> for a given media element, use the element's {{domxref("HTMLMediaElement.audioTracks", "audioTracks")}} property, which returns an {{domxref("AudioTrackList")}} object from which you can get the individual tracks contained in the media:</p>
+
+<pre class="brush: js">var el = document.querySelector("video");
+var tracks = el.audioTracks;
+</pre>
+
+<p>You can then access the media's individual tracks using either array syntax or functions such as {{jsxref("Array.forEach", "forEach()")}}.</p>
+
+<p>This first example gets the first audio track on the media:</p>
+
+<pre class="brush: js">var firstTrack = tracks[0];</pre>
+
+<p>The next example scans through all of the media's audio tracks, enabling any that are in the user's preferred language (taken from a variable <code>userLanguage</code>) and disabling any others.</p>
+
+<pre class="brush: js">tracks.forEach(function(track) {
+  if (track.language === userLanguage) {
+    track.enabled = true;
+  } else {
+    track.enabled = false;
+  }
+});
+</pre>
+
+<p>The {{domxref("AudioTrack.language", "language")}} is in standard ({{RFC(5646)}}) format. For US English, this would be <code>"en-US"</code>, for example.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>{{page("/en-US/docs/Web/API/AudioTrack/label", "Example")}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'media.html#audiotrack', 'AudioTrack')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#audiotrack', 'AudioTrack')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.AudioTrack")}}</p>
diff --git a/files/de/web/api/battery_status_api/index.html b/files/de/web/api/battery_status_api/index.html
new file mode 100644
index 0000000000..498c8bb6ae
--- /dev/null
+++ b/files/de/web/api/battery_status_api/index.html
@@ -0,0 +1,92 @@
+---
+title: Battery Status API
+slug: Web/API/Battery_Status_API
+translation_of: Web/API/Battery_Status_API
+---
+<p>{{DefaultAPISidebar("Battery API")}}{{Obsolete_Header}}</p>
+
+<p>Die <strong>Battery Status API</strong>, oder kurz <strong>Battery API</strong>, stellt Informationen über den Ladezustand der Systembatterie zur Verfügung. Diese Informationen können zur Anpassung der Ressourcennutzung verwendet werden. Wenn nur noch wenig Energie zur Verfügung steht, sollten unnötige Operationen eingestellt werden, damit die Laufzeit erhöht wird. Oder aber der Zustand gespeichert werden, damit ein Datenverlust verhindert werden kann.</p>
+
+<p>Die Battery Status API erweitert  {{domxref("window.navigator")}} mit einer Methode  {{domxref("navigator.getBattery()")}}, die ein Promise mit einem  {{domxref("BatteryManager")}} Objekt liefert, sowie einigen Nachrichten zum Überwachen des Batteriestatus.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>In diesem Beispiel wird der Ladezustand (Netz, ladend, etc.) und Änderungen des Batterieniveaus und der Zeit überwacht. Dies erfolgt durch Überwachen der Events:  {{event("chargingchange")}}, {{event("levelchange")}} und {{event("chargingtimechange")}}, {{event("dischargingtimechange")}}.</p>
+
+<pre class="brush: js;">navigator.getBattery().then(function(battery) {
+  function updateAllBatteryInfo(){
+    updateChargeInfo();
+    updateLevelInfo();
+    updateChargingInfo();
+    updateDischargingInfo();
+  }
+  updateAllBatteryInfo();
+
+  battery.addEventListener('chargingchange', function(){
+    updateChargeInfo();
+  });
+  function updateChargeInfo(){
+    console.log("Battery charging? "
+                + (battery.charging ? "Yes" : "No"));
+  }
+
+  battery.addEventListener('levelchange', function(){
+    updateLevelInfo();
+  });
+  function updateLevelInfo(){
+    console.log("Battery level: "
+                + battery.level * 100 + "%");
+  }
+
+  battery.addEventListener('chargingtimechange', function(){
+    updateChargingInfo();
+  });
+  function updateChargingInfo(){
+    console.log("Battery charging time: "
+                 + battery.chargingTime + " seconds");
+  }
+
+  battery.addEventListener('dischargingtimechange', function(){
+    updateDischargingInfo();
+  });
+  function updateDischargingInfo(){
+    console.log("Battery discharging time: "
+                 + battery.dischargingTime + " seconds");
+  }
+
+});
+</pre>
+
+<p>Siehe auch die <a class="external" href="http://www.w3.org/TR/battery-status/#examples">Beispiel in der Spezifikation</a>.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Battery API")}}</td>
+   <td>{{Spec2("Battery API")}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Beteiligung ist über <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> möglich, bitte schickt uns einen "pull request" Anfrage.</div>
+
+<p>{{Compat("api.BatteryManager")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/Apps/Build/gather_and_modify_data/retrieving_battery_status_information">Batterie Statusinformationen abrufen - Beispiel und Artikel</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/">Hacks blog post - Nutzung der Battery API</a></li>
+</ul>
diff --git a/files/de/web/api/blob/index.html b/files/de/web/api/blob/index.html
new file mode 100644
index 0000000000..352c978ac5
--- /dev/null
+++ b/files/de/web/api/blob/index.html
@@ -0,0 +1,245 @@
+---
+title: Blob
+slug: Web/API/Blob
+tags:
+  - API
+  - Files
+  - Reference
+  - TopicStub
+  - checkTranslation
+translation_of: Web/API/Blob
+---
+<p>{{ APIRef("File API") }}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Ein <code>Blob</code> ist eine dateiähnliche Menge unveränderlicher Roh-Daten, die nicht notwendigerweise native JavaScript-Daten enthalten. Das {{ domxref("File") }}-Interface basiert auf <code>Blob</code> und erweitert dessen Funktionen und die Unterstützung von Dateien auf dem System des Nutzers.</p>
+
+<p>Eine einfache Methode, um einen Blob zu erstellen, ist der Aufruf des {{domxref("Blob.Blob", "Blob()")}}-Konstruktors. Anders ist es auch mit Hilfe eines Aufrufs von <code>slice()</code> möglich, einen Ausschnitt aus einem anderen Blob zu erhalten.</p>
+
+<p>Die APIs, welche Blob-Objekte akzeptieren, werden ebenfalls in der {{domxref("File")}}-Dokumentation genannt.</p>
+
+<div class="note">
+<p>Note: The <code>slice()</code> method had initially taken <code>length</code> as the second argument to indicate the number of bytes to copy into the new <code>Blob</code>. If you specified values such that <code>start + length</code>exceeded the size of the source <code>Blob</code>, the returned <code>Blob</code> contained data from the start index to the end of the source <code>Blob</code>.</p>
+</div>
+
+<div class="note">
+<p>Zu beachten: Der <code>slice()-</code>Methode kann in manchen Browsern (und Versionen) ein Vendor-Präfix vorangestellt sein. Firefox 12 und früher: <code>blob.mozSlice()</code>. Safari: <code>blob.webkitSlice()</code>. Eine alte Version von <code>slice()</code> ohne Vendor-Präfix ist überholt. Die Unterstützung von <code>blob.mozSlice()</code> wurde mit Firefox 30 eingestellt.</p>
+</div>
+
+<h2 id="Konstruktor">Konstruktor</h2>
+
+<dl>
+ <dt>{{domxref("Blob.Blob", "Blob()")}}</dt>
+ <dd>Gibt einen neuen <code>Blob</code> zurück, dessen Inhalt das als Parameter übergebene Array in zusammengesetzter Form ist.</dd>
+</dl>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt>{{domxref("Blob.isClosed")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>Gibt einen booleschen Wert zurück, der anzeigt, ob die {{domxref("Blob.close()")}}-Methode zu diesem <code>Blob</code> bereits aufgerufen wurde. Geschlossene Blobs können nicht mehr ausgelesen werden.</dd>
+ <dt>{{domxref("Blob.size")}} {{readonlyinline}}</dt>
+ <dd>Gibt die Größe des <code>Blob</code>-Inhalts in Bytes zurück.</dd>
+ <dt>{{domxref("Blob.type")}} {{readonlyinline}}</dt>
+ <dd>Ein <code>String,</code> der den MIME-Typ enthält. Ist der Typ unbekannt, ist der Rückgabe-String leer.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<dl>
+ <dt>{{domxref("Blob.close()")}} {{experimental_inline}}</dt>
+ <dd>Schließt das <code>Blob</code>-Objekt und gibt gegebenenfalls reservierte Ressourcen frei.</dd>
+ <dt>{{domxref("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}</dt>
+ <dd>Gibt ein neues <code>Blob-Objekt</code> zurück, das die spezifierte Menge an Daten enthält.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele:</h2>
+
+<h3 id="Beispielanwendung_des_Blob-Konstruktors">Beispielanwendung des Blob-Konstruktors</h3>
+
+<p>Der {{domxref("Blob.Blob", "Blob() constructor")}} ermöglicht es, <code>Blobs</code> aus Objekten zu erzeugen. Beispielsweise kann man einen <code>Blob</code> von einem String-Objekt erzeugen:</p>
+
+<pre><code>var debug = {hello: "world"};
+var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});</code>
+</pre>
+
+<div class="warning">
+<p>{{ domxref("BlobBuilder") }} bietet noch eine weitere Möglichkeit Blobs zu erstellen, welche mittlerweile allerdings veraltet ist und nicht mehr genutzt werden sollte.</p>
+
+<div class="syntaxbox">
+<pre class="brush: js">var builder = new BlobBuilder();
+var fileParts = ['&lt;a id="a"&gt;&lt;b id="b"&gt;hey!&lt;/b&gt;&lt;/a&gt;'];
+builder.append(fileParts[0]);
+var myBlob = builder.getBlob('text/xml');</pre>
+</div>
+</div>
+
+<h3 id="Erstellen_einer_URL_für_ein_typed_array_durch_einen_Blob">Erstellen einer URL für ein "typed array" durch einen Blob</h3>
+
+<p>Beispiel-Code:</p>
+
+<pre class="brush: js">var typedArray = EinTypedArrayErstellen();
+var blob = new Blob([typedArray], {type: 'application/octet-binary'}); // ein gültiger MIME-Typ
+var url = URL.createObjectURL(blob);
+// Die URL wird etwa so sein: blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
+// Nun kann die URL überall genutzt werden, wo URLs verwendung finden, z.B. in Bildquellen (image.src)
+</pre>
+
+<h3 id="Daten_aus_einem_Blob_lesen">Daten aus einem Blob lesen</h3>
+
+<p>Um Daten aus einem Blob zu lesen, muss ein {{domxref("FileReader")}} genutzt werden. Der folgende Code liest den Inhalt eines Blobs als ein typisiertes Array aus.</p>
+
+<pre class="brush: js">var reader = new FileReader();
+reader.addEventListener("loadend", function() {
+   // reader.result beinhaltet den Inhalt des Blobs
+});
+reader.readAsArrayBuffer(blob);</pre>
+
+<p>Über eine andere Methode von {{domxref("FileReader")}} ist es möglich, den Inhalt eines Blobs als String oder Data-URL zu lesen.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Hinweis</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API','#blob','Blob')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Grundlegende Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser-Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5[1]</td>
+   <td>4[2]</td>
+   <td>10</td>
+   <td>11.10[1]</td>
+   <td>5.1[1]</td>
+  </tr>
+  <tr>
+   <td><code>slice()</code></td>
+   <td>10 {{property_prefix("webkit")}}<br>
+    21</td>
+   <td>5 {{property_prefix("moz")}}[3]<br>
+    13</td>
+   <td>10</td>
+   <td>12</td>
+   <td>5.1 {{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>Blob()</code>constructor</td>
+   <td>20</td>
+   <td>{{CompatGeckoDesktop("13.0")}}</td>
+   <td>10</td>
+   <td>12.10</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td><code>close()</code>and <code>isClosed</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}[4]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("13.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>slice()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>Blob()</code>constructor</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>close()</code>and <code>isClosed</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}[4]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}<br>
+     </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Anmerkung_zur_slice()-Implementierung">Anmerkung zur slice()-Implementierung</h3>
+
+<p>[1] Eine Version von <code>slice()</code>, die als zweites Argument die gewünschte Größe enthält, war in <a href="http://trac.webkit.org/changeset/55670">WebKit</a> und <a href="http://www.opera.com/docs/specs/presto28/file/#blob">Opera 11.10</a> implementiert. Da sich jedoch diese Syntax von {{jsxref("Array/slice", "Array.slice()")}} und {{jsxref("String/slice", "String.slice()")}} unterschied, wurde die Unterstützung in WebKit fallen gelassen zu Gunsten der neuen Syntax von <code><a href="http://trac.webkit.org/changeset/83873">Blob.webkitSlice()</a>.</code></p>
+
+<p>[2] Eine Variante von <code>slice()</code>, die als zweites Argument die gewünschte Größe enthält, war in <a href="https://hg.mozilla.org/mozilla-central/rev/1b3947ed93c6">Firefox 4</a> verfügbar. Da sich jedoch diese Syntax von {{jsxref("Array/slice", "Array.slice()")}} und {{jsxref("String/slice", "String.slice()")}} unterschied, wurde diese Unterstützung in Gecko fallen gelassen zu Gunsten der neuen Syntax von <code>mozSlice()</code>.</p>
+
+<p>[3] Vor Gecko 12.0 {{ geckoRelease("12.0") }} trat ein Fehler im Verhalten von slice() auf; die erste und letzte Position außerhalb des Bereichs von 64-Bit-Werten wurden fehlerhaft verarbeitet, was nun für vorzeichenlose 64-Bit-Werte behoben wurde.</p>
+
+<p>[4] Siehe {{bug("1048325")}}</p>
+
+<h3 id="Anmerkungen_zu_Gecko">Anmerkungen zu Gecko</h3>
+
+<p>Vor Gecko 12.0 {{ geckoRelease("12.0") }} gab es einen Bug, der das Verhalten von {{ manch("slice") }} beinflusste. Bei Start- und Endpositionen außerhalb von vorzeichenbehafteten 64-Bit-Werten funktionierte die Methode nicht. Dieser Bug wurde mittlerweile behoben und vorzeichenlose 64-Bit-Werte sind nun möglich.</p>
+
+<h2 id="Chrome_Code_-_Scope">Chrome Code - Scope</h2>
+
+<p>Um Blobs im Chrome Code, JSM und Bootstrap Scope zu verwenden, müssen sie folgendermaßen importiert werden:</p>
+
+<pre class="brush: js">Cu.importGlobalProperties(['Blob']);
+</pre>
+
+<p><code>Blobs</code> sind auch in Worker-Scopes verfügbar.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{ domxref("BlobBuilder") }}</li>
+ <li>{{ domxref("File") }}</li>
+ <li>{{ domxref("URL.createObjectURL") }}</li>
+ <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+</ul>
diff --git a/files/de/web/api/body/arraybuffer/index.html b/files/de/web/api/body/arraybuffer/index.html
new file mode 100644
index 0000000000..7550dfadc8
--- /dev/null
+++ b/files/de/web/api/body/arraybuffer/index.html
@@ -0,0 +1,87 @@
+---
+title: Body.arrayBuffer()
+slug: Web/API/Body/arrayBuffer
+translation_of: Web/API/Body/arrayBuffer
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>Die Methode <strong><code>arrayBuffer()</code></strong> des {{domxref("Body")}} Mixin nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Sie gibt ein Promise zurück, welches in einen {{domxref("ArrayBuffer")}} aufgelöst wird.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">response.arrayBuffer().then(function(buffer) {
+  // mach etwas mit dem Buffer
+});</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<p>Keine.</p>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein Promise, welches in einen {{domxref("ArrayBuffer")}} aufgelöst wird.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>In unserem <a href="https://mdn.github.io/fetch-examples/fetch-array-buffer/">Live-Beispiel zum Abruf eines Array Buffers</a> haben wir einen Wiedergabe-Knopf. Bei einem Klick darauf wird die Funktion <code>getData()</code> ausgeführt. Beachten Sie, dass vor der Wiedergabe die ganze Audio-Datei heruntergeladen wird. Benötigen Sie eine Wiedergabe noch während des Downloads (Streaming) ziehen Sie {{domxref("HTMLAudioElement")}} in Betracht:</p>
+
+<pre class="brush: js">new Audio(music.ogg).play()
+</pre>
+
+<p>In <code>getData()</code> erstellen wir eine neue Anfrage mit dem {{domxref("Request.Request")}} Konstruktor, um dann einen OGG Musik-Track abzurufen. Wir benutzen ebenfalls {{domxref("AudioContext.createBufferSource")}} um eine Audio-Puffer-Quelle zu erstellen. Ist der Abruf erfolgreich, lesen wir mit <code>arrayBuffer()</code> einen {{domxref("ArrayBuffer")}} aus der Antwort, dekodieren die Audiodaten mit {{domxref("AudioContext.decodeAudioData")}}, setzen die dekodierten Daten als Quelle für den Audio-Puffer fest und verbinden die Quelle mit {{domxref("AudioContext.destination")}}.</p>
+
+<p>Wenn <code>getData()</code> durchgelaufen ist, starten wir die Wiedergabe mit <code>start(0)</code> und deaktivieren den Wiedergabe-Knopf, damit er nicht erneut geklickt werden kann, während die Wiedergabe läuft (was zu einem Fehler führen würde).</p>
+
+<pre class="brush: js">function getData() {
+  source = audioCtx.createBufferSource();
+
+  var myRequest = new Request('viper.ogg');
+
+  fetch(myRequest).then(function(response) {
+    return response.arrayBuffer();
+  }).then(function(buffer) {
+    audioCtx.decodeAudioData(buffer, function(decodedData) {
+      source.buffer = decodedData;
+      source.connect(audioCtx.destination);
+    });
+  });
+};
+
+// Knöpfe zum Abspielen und Anhalten verknüpfen
+
+play.onclick = function() {
+  getData();
+  source.start(0);
+  play.setAttribute('disabled', 'disabled');
+}</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-body-arraybuffer','arrayBuffer()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("api.Body.arrayBuffer")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/de/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/de/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/de/web/api/body/blob/index.html b/files/de/web/api/body/blob/index.html
new file mode 100644
index 0000000000..53595fdbda
--- /dev/null
+++ b/files/de/web/api/body/blob/index.html
@@ -0,0 +1,73 @@
+---
+title: Body.blob()
+slug: Web/API/Body/blob
+translation_of: Web/API/Body/blob
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>Die Methode <strong><code>blob()</code></strong> des {{domxref("Body")}} Mixin nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Sie gibt ein Promise zurück, welches in einen {{domxref("Blob")}} aufgelöst wird.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">response.blob().then(function(myBlob) {
+  // mach etwas mit myBlob
+});</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<p>Keine.</p>
+
+<div class="note"><strong>Hinweis:</strong> Wenn die {{domxref("Response")}} vom {{domxref("Response.type")}} her <code>"opaque"</code> ist, hat der resultierende {{domxref("Blob")}} eine {{domxref("Blob.size")}} von <code>0</code> und einen {{domxref("Blob.type")}} eines leeren Strings <code>""</code>, wodurch er für Methoden wie {{domxref("URL.createObjectURL")}} <em>unbrauchbar</em> wird.</div>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein Promise, welches in einen {{domxref("Blob")}} aufgelöst wird.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>In unserem <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-request">Beispiel für eine Fetch Anfrage</a> (<a href="http://mdn.github.io/fetch-examples/fetch-request/">live ausführen</a>) erstellen wir eine neue Anfrage mit dem {{domxref("Request.Request")}} Konstruktor und rufen dann ein JPG ab. Wenn der Abruf erfolgreich ist, lesen wir mit <code>blob()</code> einen {{domxref("Blob")}} aus der Antwort, fügen ihn mit {{domxref("URL.createObjectURL")}} in eine Objekt-URL ein und legen diese URL als Quelle für das {{htmlelement("img")}} Element zum Anzeigen des Bildes fest.</p>
+
+<pre class="brush: js">var myImage = document.querySelector('img');
+
+var myRequest = new Request('flowers.jpg');
+
+fetch(myRequest)
+.then(function(response) {
+  return response.blob();
+})
+.then(function(myBlob) {
+  var objectURL = URL.createObjectURL(myBlob);
+  myImage.src = objectURL;
+});
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-body-blob','blob()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("api.Body.blob")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/de/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/de/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/de/web/api/body/body/index.html b/files/de/web/api/body/body/index.html
new file mode 100644
index 0000000000..cbe7484d91
--- /dev/null
+++ b/files/de/web/api/body/body/index.html
@@ -0,0 +1,86 @@
+---
+title: Body.body
+slug: Web/API/Body/body
+translation_of: Web/API/Body/body
+---
+<div>{{APIRef("Fetch")}}{{seecompattable}}</div>
+
+<p>Die schreibgeschützte <strong><code>body</code></strong> Eigenschaft des {{domxref("Body")}} Mixin ist ein einfacher Getter, der dazu benutzt wird den Inhalt des Body als {{domxref("ReadableStream")}} bereitzustellen.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">var stream = responseInstance.body;</pre>
+
+<h3 id="Wert">Wert</h3>
+
+<p>Ein {{domxref("ReadableStream")}}.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>In unserem einfachen <a href="https://mdn.github.io/dom-examples/streams/simple-pump.html">Stream-Pump-Beispiel</a> rufen wir ein Bild ab, machen den Antwort-Stream mit <code>response.body</code> sichtbar, erstellen einen Reader mit {{domxref("ReadableStream.getReader()")}} und reihen die Teile des Streams in einen zweiten, benutzerdefinierten, lesbaren Stream — wodurch wie eine exakte Kopie des Bilds erhalten.</p>
+
+<pre class="brush: js">const image = document.getElementById('target');
+
+// Bild holen
+fetch('./tortoise.png')
+// Body als ReadableStream abrufen
+.then(response =&gt; response.body)
+.then(body =&gt; {
+  const reader = body.getReader();
+
+  return new ReadableStream({
+    start(controller) {
+      return pump();
+
+      function pump() {
+        return reader.read().then(({ done, value }) =&gt; {
+          // Stream schließen, wenn keine weiteren Daten verarbeitet werden müssen
+          if (done) {
+            controller.close();
+            return;
+          }
+
+          // Das nächste Datenstück in unseren Ziel-Stream einreihen
+          controller.enqueue(value);
+          return pump();
+        });
+      }
+    }
+  })
+})
+.then(stream =&gt; new Response(stream))
+.then(response =&gt; response.blob())
+.then(blob =&gt; URL.createObjectURL(blob))
+.then(url =&gt; console.log(image.src = url))
+.catch(err =&gt; console.error(err));</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-body-body','body')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("api.Body.body")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/API/Fetch_API">Fetch API</a></li>
+ <li><a href="/de/docs/Web/API/Streams_API">Streams API</a></li>
+ <li><a href="/de/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+</ul>
diff --git a/files/de/web/api/body/bodyused/index.html b/files/de/web/api/body/bodyused/index.html
new file mode 100644
index 0000000000..052e8fcc7c
--- /dev/null
+++ b/files/de/web/api/body/bodyused/index.html
@@ -0,0 +1,73 @@
+---
+title: Body.bodyUsed
+slug: Web/API/Body/bodyUsed
+translation_of: Web/API/Body/bodyUsed
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>Die schreibgeschützte <strong><code>bodyUsed</code></strong> Eigenschaft des {{domxref("Body")}} Mixin enthält einen {{domxref("Boolean")}} der angibt, ob der Body schon eingelesen wurde.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">var myBodyUsed = response.bodyUsed;</pre>
+
+<h3 id="Wert">Wert</h3>
+
+<p>Ein {{domxref("Boolean")}}.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>In unserem <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-request">Beispiel für eine Fetch Anfrage</a> (<a href="http://mdn.github.io/fetch-examples/fetch-request/">live ausführen</a>) erstellen wir eine neue Anforderung mit dem {{domxref("Request.Request")}} Konstruktor und rufen dann ein JPG ab. Wenn der Abruf erfolgreich ist, lesen wir mit <code>blob()</code> einen {{domxref("Blob")}} aus der Antwort, fügen ihn mit {{domxref("URL.createObjectURL")}} in eine Objekt-URL ein und legen diese URL als Quelle für das {{htmlelement("img")}} Element zum Anzeigen des Bildes fest.</p>
+
+<p>Beachten Sie, dass wir <code>response.bodyUsed</code> vor dem Aufruf von <code>response.blob ()</code> und einmal danach in der Konsole protokollieren. Dies gibt vorher <code>false</code> zurück und anschließend <code>true</code>, da der Body ab diesem Punkt gelesen wurde.</p>
+
+<h3 id="HTML_Inhalt">HTML Inhalt</h3>
+
+<pre class="brush: html">&lt;img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png"&gt;
+</pre>
+
+<h3 id="JavaScript_Inhalt">JavaScript Inhalt</h3>
+
+<pre class="brush: js">var myImage = document.querySelector('.my-image');
+fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg').then(function(response) {
+    console.log(response.bodyUsed);
+    var res = response.blob();
+    console.log(response.bodyUsed);
+    return res;
+}).then(function(response) {
+    var objectURL = URL.createObjectURL(response);
+    myImage.src = objectURL;
+});</pre>
+
+<p>{{ EmbedLiveSample('Example', '100%', '250px') }}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-body-bodyused','bodyUsed')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("api.Body.bodyUsed")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/de/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/de/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/de/web/api/body/formdata/index.html b/files/de/web/api/body/formdata/index.html
new file mode 100644
index 0000000000..4ceb02aeb4
--- /dev/null
+++ b/files/de/web/api/body/formdata/index.html
@@ -0,0 +1,62 @@
+---
+title: Body.formData()
+slug: Web/API/Body/formData
+translation_of: Web/API/Body/formData
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>Die Methode <strong><code>formData()</code></strong> des {{domxref("Body")}} Mixin nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Sie gibt ein Promise zurück, welches in ein {{domxref("FormData")}} Objekt aufgelöst wird.</p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Dies ist hauptsächlich für <a href="/de/docs/Web/API/ServiceWorker_API">Service Worker</a> relevant. Wenn ein Benutzer ein Formular absendet und ein Service Worker die Anfrage abfängt, könnten Sie bspw. <code>formData()</code> aufrufen, um eine Key-Value-Abbildung zu erhalten, einige Felder zu modifizieren und das Formular dann an den Server weiterzuschicken (oder lokal zu benutzen).</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">response.formData()
+.then(function(formdata) {
+  // machen Sie etwas mit Ihren Formulardaten
+});</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<p>Keine.</p>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein Promise, welches in ein {{domxref("FormData")}} Objekt aufgelöst wird.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Wird nachgereicht.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-body-formdata','formData()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("api.Body.formData")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/de/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/de/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/de/web/api/body/index.html b/files/de/web/api/body/index.html
new file mode 100644
index 0000000000..3693a73653
--- /dev/null
+++ b/files/de/web/api/body/index.html
@@ -0,0 +1,99 @@
+---
+title: Body
+slug: Web/API/Body
+tags:
+  - API
+  - BODY
+  - Experimental
+  - Fetch
+  - Fetch API
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - request
+translation_of: Web/API/Body
+---
+<div>{{ APIRef("Fetch") }}</div>
+
+<p><span class="seoSummary">The <strong><code>Body</code></strong> {{glossary("mixin")}} of the <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> represents the body of the response/request, allowing you to declare what its content type is and how it should be handled.</span></p>
+
+<p><code>Body</code> is implemented by both {{domxref("Request")}} and {{domxref("Response")}}. This provides these objects with an associated <dfn>body</dfn> (a <a href="/en-US/docs/Web/API/Streams_API">stream</a>), a <dfn>used flag</dfn> (initially unset), and a <dfn>MIME type</dfn> (initially the empty byte sequence).</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("Body.body")}} {{readonlyInline}}</dt>
+ <dd>A simple getter used to expose a {{domxref("ReadableStream")}} of the body contents.</dd>
+ <dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt>
+ <dd>A {{domxref("Boolean")}} that indicates whether the body has been read.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("Body.arrayBuffer()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with an {{domxref("ArrayBuffer")}}.</dd>
+ <dt>{{domxref("Body.blob()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("Blob")}}.</dd>
+ <dt>{{domxref("Body.formData()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("FormData")}} object.</dd>
+ <dt>{{domxref("Body.json()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text as {{jsxref("JSON")}}.</dd>
+ <dt>{{domxref("Body.text()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("USVString")}} (text). The response is <em>always</em> decoded using UTF-8.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>The example below uses a simple fetch call to grab an image and display it in an {{htmlelement("img")}} tag. You'll notice that since we are requesting an image, we need to run {{domxref("Body.blob","Body.blob()")}} ({{domxref("Response")}} implements body) to give the response its correct MIME type.</p>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png"&gt;
+</pre>
+
+<h3 id="JS_Content">JS Content</h3>
+
+<pre class="brush: js">const myImage = document.querySelector('.my-image');
+fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg')
+	.then(res =&gt; res.blob())
+	.then(res =&gt; {
+		const objectURL = URL.createObjectURL(res);
+		myImage.src = objectURL;
+});</pre>
+
+<p>{{ EmbedLiveSample('Examples', '100%', '250px') }}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#body-mixin','Body')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Body")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/de/web/api/body/json/index.html b/files/de/web/api/body/json/index.html
new file mode 100644
index 0000000000..76271e680d
--- /dev/null
+++ b/files/de/web/api/body/json/index.html
@@ -0,0 +1,73 @@
+---
+title: Body.json()
+slug: Web/API/Body/json
+translation_of: Web/API/Body/json
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>Die Methode <strong><code>json()</code></strong> des {{domxref("Body")}} Mixin nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Sie gibt ein Promise zurück, welches den Inhalt des Body als {{jsxref("JSON")}} einliest.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">response.json().then(function(data) {
+  // mach etwas mit data
+});</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<p>Keine.</p>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein Promise, welches den Inhalt des Body als {{jsxref("JSON")}} einliest. Dies kann alles sein, was als JSON abgebildet werden kann — ein Objekt, ein Array, ein String, eine Zahl...</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>In unserem <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-json">Beispiel für den Abruf eines json</a> (<a href="https://mdn.github.io/fetch-examples/fetch-json/">live ausführen</a>) erstellen wir eine neue Anfrage mit dem {{domxref("Request.Request")}} Konstruktor und rufen dann eine <code>.json</code> Datei ab. Wenn der Abruf erfolgreich ist lesen wir die Daten ein und parsen sie mit <code>json()</code>, lesen die Werte erwartungsgemäß aus und fügen sie in eine Liste ein um unsere Produktdaten anzuzeigen.</p>
+
+<pre class="brush: js">var myList = document.querySelector('ul');
+
+var myRequest = new Request('products.json');
+
+fetch(myRequest)
+  .then(function(response) { return response.json(); })
+  .then(function(data) {
+    for (var i = 0; i &lt; data.products.length; i++) {
+      var listItem = document.createElement('li');
+      listItem.innerHTML = '&lt;strong&gt;' + data.products[i].Name + '&lt;/strong&gt; befindet sich in ' +
+                           data.products[i].Location +
+                           '. Preis: &lt;strong&gt;' + data.products[i].Price + '€&lt;/strong&gt;';
+      myList.appendChild(listItem);
+    }
+  });</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-body-json','json()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("api.Body.json")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/de/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/de/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/de/web/api/body/text/index.html b/files/de/web/api/body/text/index.html
new file mode 100644
index 0000000000..8ccc5fb358
--- /dev/null
+++ b/files/de/web/api/body/text/index.html
@@ -0,0 +1,80 @@
+---
+title: Body.text()
+slug: Web/API/Body/text
+translation_of: Web/API/Body/text
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>Die Methode <strong><code>text()</code></strong> des {{domxref("Body")}} Mixin nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Sie gibt ein Promise zurück, welches in ein {{domxref("USVString")}} Objekt (Text) aufgelöst wird. Die Antwort wird <em>immer</em> mit UTF-8 dekodiert.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">response.text().then(function (text) {
+  // do something with the text response
+});</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<p>Keine.</p>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein Promise, welches in einen {{domxref("USVString")}} aufgelöst wird.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>In unserem <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-text">Beispiel für den Abruf von Text</a> (<a href="https://mdn.github.io/fetch-examples/fetch-text/">live ausführen</a>) haben wir ein {{htmlelement("article")}} Element und drei Links (im Array <code>myLinks</code> gespeichert). Zuerst durchlaufen wir all diese, damit alle einen <code>onclick</code> Event Handler bekommen, der die Funktion <code>getData()</code> ausführt — der Bezeichner <code>data-page</code> des Links wird dabei als Argument übergeben — wenn einer der Links geklickt wird.</p>
+
+<p>Wenn <code>getData()</code> ausgeführt wird erstellen wie eine Anfrage mit dem {{domxref("Request.Request")}} Konstruktor und rufen dann eine <code>.txt</code> Datei ab. Wenn der Abruf erfolgreich ist lesen wir das {{jsxref("USVString")}} (Text) Objekt aus der Antwort mit <code>text()</code> und setzen dann {{domxref("Element.innerHTML","innerHTML")}} des {{htmlelement("article")}} Elements auf den Wert des Text-Objekts.</p>
+
+<pre class="brush: js">var myArticle = document.querySelector('article');
+var myLinks = document.querySelectorAll('ul a');
+
+for(i = 0; i &lt;= myLinks.length-1; i++) {
+  myLinks[i].onclick = function(e) {
+    e.preventDefault();
+    var linkData = e.target.getAttribute('data-page');
+    getData(linkData);
+  }
+};
+
+function getData(pageId) {
+  console.log(pageId);
+  var myRequest = new Request(pageId + '.txt');
+  fetch(myRequest).then(function(response) {
+    return response.text().then(function(text) {
+      myArticle.innerHTML = text;
+    });
+  });
+}</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-body-text','text()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("api.Body.text")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/de/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/de/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/de/web/api/cache/add/index.html b/files/de/web/api/cache/add/index.html
new file mode 100644
index 0000000000..778820ca66
--- /dev/null
+++ b/files/de/web/api/cache/add/index.html
@@ -0,0 +1,106 @@
+---
+title: Cache.add()
+slug: Web/API/Cache/add
+translation_of: Web/API/Cache/add
+---
+<p>{{APIRef("Service Workers API")}}</p>
+
+<p><span class="seoSummary">Die <strong><code>add()</code></strong> Methode des {{domxref("Cache")}} Interface nimmt eine URL, ruft sie ab und fügt das resultierende Objekt zum gegebenen Cache. </span>Die <code>add()</code> Methode gleicht funktional dem folgenden:</p>
+
+<pre class="brush: js">fetch(url).then(function(response) {
+  if (!response.ok) {
+    throw new TypeError('bad response status');
+  }
+  return cache.put(url, response);
+})</pre>
+
+<p>Für komplexere Operationen müssen Sie {{domxref("Cache.put","Cache.put()")}} direkt verwenden.</p>
+
+<div class="note">
+<p><strong>Hinweis</strong>: <code>add()</code> wird alle zuvor im Cache gespeicherten Schlüssel-Wert-Paare die der Request gleichen überschreiben.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="sytaxbox"><em>cache</em>.add(<em>request</em>).then(function() {
+  // request wurde dem Cache hinzugefügt
+});
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt>request</dt>
+ <dd>Die Request, die dem Cache hinzugefügt werden soll. Dies kann ein {{domxref("Request")}} Objekt oder eine URL sein.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine {{jsxref("Promise")}}, die auf void auflöst.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><strong>Exception</strong></th>
+   <th scope="col"><strong>Tritt auf wenn</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td>
+    <p>Das URL-Schema nicht <code>http</code> oder <code>https</code> ist.</p>
+
+    <p>Der Antwortstatus ist nicht im 200 Bereich (d.h. keine erfolgreiche Antwort) Dies tritt auf, wenn die Request nicht erfolgreich zurückgegeben wird aber auch wenn die Request eine <em>cross-origin no-cors</em> Request ist (In diesem Fall ist der Status immer 0.)</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Dieser Codeblock wartet darauf, dass ein {{domxref("InstallEvent")}} ausgelöst wird, ruft dann {{domxref("ExtendableEvent.waitUntil","waitUntil()")}} auf, um den Installationsprozess der Applikation einzuleiten. Dies beinhaltet den Aufruf von {{domxref("CacheStorage.open")}} um einen neuen Cache zu erstellen, um dann mittels {{domxref("Cache.add")}} etwas zu diesem hinzuzufügen.</p>
+
+<pre class="brush: js">this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.add('/sw-test/index.html');
+    })
+  );
+});
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#dom-cache-add', 'Cache: add')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Erstdefinition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("api.Cache.add")}}</p>
+</div>
+
+<h2 id="Weiterlesen">Weiterlesen</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/de/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service-Worker benutzen</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/de/web/api/cache/addall/index.html b/files/de/web/api/cache/addall/index.html
new file mode 100644
index 0000000000..78467ff40f
--- /dev/null
+++ b/files/de/web/api/cache/addall/index.html
@@ -0,0 +1,212 @@
+---
+title: Cache.addAll()
+slug: Web/API/Cache/addAll
+tags:
+  - Cache
+  - Experimentell
+  - Methoden
+  - Referenz
+  - Service Worker
+translation_of: Web/API/Cache/addAll
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+
+<p>Die <strong>addAll() </strong>Methode der {{domxref("Cache")}} Schnittstelle nimmt ein Array von URLS,  ruft diese ab und fügt die daraus resultierenden Antwortobjekte zum jeweiligen Cache hinzu. Die Antwortobjekte, welche während des Abrufens erzeugt werden, werden zu Schlüsselwerten für die gespeicherten Antwortoperationen. </p>
+
+<div class="note">
+<p><strong>Hinweis</strong>: <code>addAll()</code> überschreibt jegliche Schlüsselwertpaare im Cache, die der Anfrage entsprechen wird aber scheitern, wenn eine resultierende put() Operation einen früheren Cache-Eintrag, der durch die gleiche addAll() Methode erzeugt wurde, überschreiben würde.</p>
+</div>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Ursprüngliche Cache Implementationen (sowohl in Blink als auch in Gecko) lösen {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, und {{domxref("Cache.put")}}  Promises auf, wenn die jeweilige Antwort vollständig in den Speicher geschrieben wurde. Neuere Spezifikationsversionen haben aktualisierte Informationen, welche aussagen, dass der Browser den Promise bereits auflösen kann, wenn der Eintrag in die Datenbank erfolgt, auch wenn die Antwort  zu diesem Zeitpunkt noch nicht vollständig geschrieben wurde (sprich der Datenstrom in den Speicher ist noch nicht beendet).</p>
+</div>
+
+<div class="note">
+<p><strong>Hinweis: </strong> Zum Stand von Chrome 46 wird die Cache API nur Anfragen von sicheren Quellen speichern, also solche die via HTTPS angeboten werden.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">cache.addAll(requests[]).then(function() {
+  //Anfragen wurden zum Cache hinzugefügt
+});
+</pre>
+
+<h3 id="Argumente">Argumente</h3>
+
+<dl>
+ <dt>requests</dt>
+ <dd>Ein Array von {{domxref("Request")}} Objekten, die Sie zum Cache hinzufügen möchten.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein {{jsxref("Promise")}} der mit void auflöst.</p>
+
+<h3 id="Ausnahmen">Ausnahmen</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><strong>Ausnahme</strong></th>
+   <th scope="col"><strong>Passiert bei</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td>
+    <p>Das URL Schama ist nicht http oder https.</p>
+
+    <p>Der Antwortstatus ist nicht im 200er Bereich ( nicht erfolgreiche Antwort ). Dies entsteht, wenn die Anfrage nicht erfolreich zurückgibt, aber auch, wenn die Anfrage eine cross-origin no-cors Anfrage ist (in diesem Fall wird immer 0 als Berichtsstatus gegeben).</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Beispiele"><strong style="font-size: 2.14285714285714rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">Beispiele</strong></h2>
+
+<p>Dieser Programmblock wartet auf ein abgesetztes {{domxref("InstallEvent")}} , woraufhin ein {{domxref("ExtendableEvent.waitUntil","waitUntil")}} läuft, das den Installationsprozess für die Applikation handhabt. Das beinhaltet das Aufrufen von {{domxref("CacheStorage.open")}} um einen neuen Cache zu erstellen. Anschließend wird addAll() benutzt um diesem eine Reihe von Ressourcen (in diesem Fall html, css und Bild-Ressourcen) hinzuzufügen.</p>
+
+<pre class="brush: js">this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      ]);
+    })
+  );
+});
+</pre>
+
+<h3 id="Spezifikationen">Spezifikationen</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#cache', 'Cache')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Erste Definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserunterstützung">Browserunterstützung</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(46.0)}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Require HTTPS</td>
+   <td>{{CompatChrome(46.0)}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>TypeError</code> if request is not successful</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(47.0)}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(46.0)}}</td>
+  </tr>
+  <tr>
+   <td>Require HTTPS</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(46.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>TypeError</code> if request is not successful</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Service workers (und <a href="/en-US/docs/Web/API/Push_API">Push</a>) wurden in <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.) abgeschaltet.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/de/web/api/cache/index.html b/files/de/web/api/cache/index.html
new file mode 100644
index 0000000000..3043baa825
--- /dev/null
+++ b/files/de/web/api/cache/index.html
@@ -0,0 +1,288 @@
+---
+title: Cache
+slug: Web/API/Cache
+tags:
+  - API
+  - Cache
+  - Draft
+  - Experimental
+  - Interface
+  - NeedsTranslation
+  - Offline
+  - Reference
+  - Service Workers
+  - Storage
+  - TopicStub
+translation_of: Web/API/Cache
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>The <strong><code>Cache</code></strong> interface provides a storage mechanism for <code><a href="http://fetch.spec.whatwg.org/#request">Request</a></code> / <code><a href="http://fetch.spec.whatwg.org/#response">Response</a></code> object pairs that are cached, for example as part of the {{domxref("ServiceWorker")}} life cycle. Note that the <code>Cache</code> interface is exposed to windowed scopes as well as workers. You don't have to use it in conjunction with service workers, even though it is defined in the service worker spec.</p>
+
+<p>An origin can have multiple, named <code>Cache</code> objects. You are responsible for implementing how your script (e.g. in a {{domxref("ServiceWorker")}})  handles <code>Cache</code> updates. Items in a <code>Cache</code> do not get updated unless explicitly requested; they don’t expire unless deleted. Use {{domxref("CacheStorage.open", "CacheStorage.open(cacheName)")}} to open a specific named <code>Cache</code> object and then call any of the <code>Cache</code> methods to maintain the <code>Cache</code>.</p>
+
+<p>You are also responsible for periodically purging cache entries. Each browser has a hard limit on the amount of cache storage that a given origin can use. The browser does its best to manage disk space, but it may delete the Cache storage for an origin.  The browser will generally delete all of the data for an origin or none of the data for an origin. Make sure to version caches by name and use the caches only from the version of the script that they can safely operate on. See <a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers#Deleting_old_caches">Deleting old caches</a> for more information.</p>
+
+<div class="note">
+<p><strong>Note</strong>: {{domxref("Cache.put")}}, {{domxref("Cache.add")}}, and {{domxref("Cache.addAll")}} only allow <code>GET</code> requests to be stored in the cache.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Initial Cache implementations (in both Blink and Gecko) resolve {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, and {{domxref("Cache.put")}} promises when the response body is fully written to storage.  More recent spec versions have newer language stating that the browser can resolve the promise as soon as the entry is recorded in the database even if the response body is still streaming in.</p>
+</div>
+
+<div class="note">
+<p><strong>Note:</strong> As of Chrome 46, the Cache API will only store requests from secure origins, meaning those served over HTTPS.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: The key matching algorithm depends on the <a href="https://www.fastly.com/blog/best-practices-for-using-the-vary-header">VARY header</a> in the value. So matching a new key requires looking at both key and value for entries in the Cache.</p>
+</div>
+
+<div class="note">
+<p><strong>Note:</strong> The caching API doesn't honor HTTP caching headers.</p>
+</div>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("Cache.match", "Cache.match(request, options)")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that resolves to the response associated with the first matching request in the {{domxref("Cache")}} object.</dd>
+ <dt>{{domxref("Cache.matchAll", "Cache.matchAll(request, options)")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that resolves to an array of all matching requests in the {{domxref("Cache")}} object.</dd>
+ <dt>{{domxref("Cache.add", "Cache.add(request)")}}</dt>
+ <dd>Takes a URL, retrieves it and adds the resulting response object to the given cache. This is fuctionally equivalent to calling fetch(), then using Cache.put() to add the results to the cache.</dd>
+ <dt>{{domxref("Cache.addAll", "Cache.addAll(requests)")}}</dt>
+ <dd>Takes an array of URLs, retrieves them, and adds the resulting response objects to the given cache.</dd>
+ <dt>{{domxref("Cache.put", "Cache.put(request, response)")}}</dt>
+ <dd>Takes both a request and its response and adds it to the given cache.</dd>
+ <dt>{{domxref("Cache.delete", "Cache.delete(request, options)")}}</dt>
+ <dd>Finds the {{domxref("Cache")}} entry whose key is the request, and if found, deletes the {{domxref("Cache")}} entry and returns a {{jsxref("Promise")}} that resolves to <code>true</code>. If no {{domxref("Cache")}} entry is found, it returns <code>false</code>.</dd>
+ <dt>{{domxref("Cache.keys", "Cache.keys(request, options)")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that resolves to an array of {{domxref("Cache")}} keys.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>This code snippet is from the <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/selective-caching/service-worker.js">service worker selective caching sample</a>. (see <a href="https://googlechrome.github.io/samples/service-worker/selective-caching/">selective caching live</a>) The code uses {{domxref("CacheStorage.open", "CacheStorage.open(cacheName)")}} to open any {{domxref("Cache")}} objects with a Content-Type header that starts with <code>font/</code>.</p>
+
+<p>The code then uses {{domxref("Cache.match", "Cache.match(request, options)")}} to see if there's already a matching font in the cache, and if so, returns it. If there isn't a matching font, the code fetches the font from the network and uses {{domxref("Cache.put","Cache.put(request, response)")}} to cache the fetched resource.</p>
+
+<p>The code handles exceptions thrown from the {{domxref("Globalfetch.fetch","fetch()")}} operation. Note that a HTTP error response (e.g., 404) will not trigger an exception. It will return a normal response object that has the appropriate error code set.</p>
+
+<p>The code snippet also shows a best practice for versioning caches used by the service worker. Though there's only one cache in this example, the same approach can be used for multiple caches. It maps a shorthand identifier for a cache to a specific, versioned cache name. The code also deletes all caches that aren't named in <code>CURRENT_CACHES</code>.</p>
+
+<div class="note"><strong>Note:</strong> In Chrome, visit chrome://inspect/#service-workers and click on the "inspect" link below the registered service worker to view logging statements for the various actions the <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/selective-caching/service-worker.js">service-worker.js</a> script is performing.</div>
+
+<pre class="brush: js">var CACHE_VERSION = 1;
+
+// Shorthand identifier mapped to specific versioned cache.
+var CURRENT_CACHES = {
+  font: 'font-cache-v' + CACHE_VERSION
+};
+
+self.addEventListener('activate', function(event) {
+  var expectedCacheNames = Object.keys(CURRENT_CACHES).map(function(key) {
+    return CURRENT_CACHES[key];
+  });
+
+  // Active worker won't be treated as activated until promise resolves successfully.
+  event.waitUntil(
+    caches.keys().then(function(cacheNames) {
+      return Promise.all(
+        cacheNames.map(function(cacheName) {
+          if (expectedCacheNames.indexOf(cacheName) == -1) {
+            console.log('Deleting out of date cache:', cacheName);
+
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    })
+  );
+});
+
+self.addEventListener('fetch', function(event) {
+  console.log('Handling fetch event for', event.request.url);
+
+  event.respondWith(
+
+    // Opens Cache objects that start with 'font'.
+    caches.open(CURRENT_CACHES['font']).then(function(cache) {
+      return cache.match(event.request).then(function(response) {
+        if (response) {
+          console.log(' Found response in cache:', response);
+
+          return response;
+        }
+      }).catch(function(error) {
+
+        // Handles exceptions that arise from match() or fetch().
+        console.error('  Error in fetch handler:', error);
+
+        throw error;
+      });
+    })
+  );
+});</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#cache', 'Cache')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{CompatGeckoDesktop(39)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>add()</td>
+   <td>{{CompatChrome(44.0)}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>addAll()</td>
+   <td>{{CompatChrome(46.0)}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>matchAll()</td>
+   <td>{{CompatChrome(47.0)}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Require HTTPS for <code>add()</code>, <code>addAll()</code>, and <code>put()</code></td>
+   <td>{{CompatChrome(46.0)}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(39)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+  </tr>
+  <tr>
+   <td>add()</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(44.0)}}</td>
+  </tr>
+  <tr>
+   <td>addAll()</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(46.0)}}</td>
+  </tr>
+  <tr>
+   <td>matchAll()</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(46.0)}}</td>
+  </tr>
+  <tr>
+   <td>Require HTTPS for <code>add()</code>, <code>addAll()</code>, and <code>put()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(46.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Service workers (and <a href="/en-US/docs/Web/API/Push_API">Push</a>) have been disabled in the <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li><a class="external external-icon" href="https://github.com/mdn/sw-test">Service workers basic code example</a></li>
+ <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
+</ul>
diff --git a/files/de/web/api/canvasrenderingcontext2d/canvas/index.html b/files/de/web/api/canvasrenderingcontext2d/canvas/index.html
new file mode 100644
index 0000000000..47b01c8f72
--- /dev/null
+++ b/files/de/web/api/canvasrenderingcontext2d/canvas/index.html
@@ -0,0 +1,56 @@
+---
+title: CanvasRenderingContext2D.canvas
+slug: Web/API/CanvasRenderingContext2D/canvas
+translation_of: Web/API/CanvasRenderingContext2D/canvas
+---
+<div>{{APIRef}}</div>
+
+<p>Die <code><strong>CanvasRenderingContext2D.canvas</strong></code> Eigenschaft, Teil der <a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a>, ist eine Nurlese-Referenz auf das {{domxref("HTMLCanvasElement")}} Objekt, das mit einem gegebenen Kontext assoziiert ist. Sie kann {{jsxref("null")}} sein, wenn kein assoziiertes {{HTMLElement("canvas")}} Element existiert.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate"><var><em>ctx</em></var>.canvas;</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Wenn dieses {{HTMLElement("canvas")}} Element gegeben ist:</p>
+
+<pre class="brush: html notranslate">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>... kannst du eine Referenz auf das Canvas-Element innerhalb von <code>CanvasRenderingContext2D</code> herstellen, indem du die <code>canvas</code> Eigenschaft verwendest.</p>
+
+<pre class="brush: js notranslate">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.canvas // HTMLCanvasElement
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-canvas", "CanvasRenderingContext2D.canvas")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird mit strukturierten Daten generiert. Wenn du an diesen Daten mitwirken möchtest, schau dir <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> an und sende uns einen Pull Request.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.canvas")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{domxref("CanvasRenderingContext2D")}} interface</li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a></li>
+</ul>
diff --git a/files/de/web/api/canvasrenderingcontext2d/fillrect/index.html b/files/de/web/api/canvasrenderingcontext2d/fillrect/index.html
new file mode 100644
index 0000000000..178a861f4e
--- /dev/null
+++ b/files/de/web/api/canvasrenderingcontext2d/fillrect/index.html
@@ -0,0 +1,177 @@
+---
+title: CanvasRenderingContext2D.fillRect()
+slug: Web/API/CanvasRenderingContext2D/fillRect
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Method
+  - Methode(2)
+  - Reference
+  - Referenz
+translation_of: Web/API/CanvasRenderingContext2D/fillRect
+---
+<div>{{APIRef}}</div>
+
+<p>Die Methode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillRect()</code></strong> der Canvas 2D API zeichnet ein ausgefülltes Rechteck an der Position <em>(<code>x</code>, <code>y</code>)</em>. Die Größe wird über die Parameter <code><em>width</em></code> und <code><em>height</em></code> bestimmt. Die Füllfarbe wird über das Attribut <code>fillStyle</code> des Context-Objekts festgelegt.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.fillRect(x, y, width, height);</var>
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Die Koordinate auf der x-Achse als horizontaler Startpunkt des Rechtecks.</dd>
+ <dt><code>y</code></dt>
+ <dd>Die Koordinate auf der y-Achse als vertikaler Startpunkt des Rechtecks.</dd>
+ <dt><code>width</code></dt>
+ <dd>Die Breite des Rechtecks.</dd>
+ <dt><code>height</code></dt>
+ <dd>Die Höhe des Rechtecks.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Benutzung_der_Methode_fillRect">Benutzung der Methode <code>fillRect</code></h3>
+
+<p>Dies ist ein einfaches Code-Beispiel, welches die <code>fillRect</code> Methode nutzt.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[4]">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+ctx.fillStyle = "green";
+ctx.fillRect(10, 10, 100, 100);
+
+// fill the whole canvas
+// ctx.fillRect(0, 0, canvas.width, canvas.height);
+</pre>
+
+<p>Ändern Sie den unten gezeigten Code und sehen Sie Ihre Änderungen live im Canvas-Element:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.fillStyle = "green";
+ctx.fillRect(10, 10, 100, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillrect", "CanvasRenderingContext2D.fillRect")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Das zugehörige Interface, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.fillStyle")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.clearRect()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</li>
+</ul>
diff --git a/files/de/web/api/canvasrenderingcontext2d/getimagedata/index.html b/files/de/web/api/canvasrenderingcontext2d/getimagedata/index.html
new file mode 100644
index 0000000000..c8b6bdf2be
--- /dev/null
+++ b/files/de/web/api/canvasrenderingcontext2d/getimagedata/index.html
@@ -0,0 +1,142 @@
+---
+title: CanvasRenderingContext2D.getImageData()
+slug: Web/API/CanvasRenderingContext2D/getImageData
+translation_of: Web/API/CanvasRenderingContext2D/getImageData
+---
+<div>{{APIRef}}</div>
+
+<p>Die <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.getImageData()</code></strong> Methode der Canvas 2D API gibt ein Objekt des Types  {{domxref("ImageData")}} zurück. Dieses Objekt repräsentiert die jeweiligen Pixel-Daten im Bereich des Rechtecks mit den Startkoordinaten <em>(</em><em>sx</em><em>,</em><em>sy</em><em>) </em> und den Dimensionen <em>sw </em> in der Breite und<em> sy </em> in der Höhe. </p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">ImageData <var><em>ctx</em>.getImageData(sx, sy, sw, sh);</var>
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>sx</code></dt>
+ <dd>Die x Koordinate der oberen linken Ecke des Rechtecks, aus welchem die Pixel-Daten gelesen werden.</dd>
+ <dt><code>sy</code></dt>
+ <dd>Die y Koordinate der oberen linken Ecke des Rechtecks, aus welchem die Pixel-Daten gelesen werden.</dd>
+ <dt><code>sw</code></dt>
+ <dd>Die Breite des Rechtecks aus dem die Pixel-Daten gelesen werden.</dd>
+ <dt><code>sh</code></dt>
+ <dd>Die Höhe des Rechtecks aus dem die Pixel-Daten gelesen werden. </dd>
+</dl>
+
+<h3 id="Rückgabewerte">Rückgabewerte</h3>
+
+<p>Ein Objekt vom Typ {{domxref("ImageData")}} das die Pixeldaten im angegeben bereich des Canvas-Elements beinhaltet.</p>
+
+<h3 id="Fehlertypen">Fehlertypen</h3>
+
+<dl>
+ <dt><code>IndexSizeError</code></dt>
+ <dd>Tritt ein, wenn entweder das Höhen oder das Breiten Argument null ist.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Benutzung_der_getImageData_Funktion">Benutzung der <code>getImageData</code> Funktion</h3>
+
+<p>Das ist ein einfaches Code-Beispiel zur Benutzung der <code>getImageData</code> Funktion. Für mehr Informationen siehe <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">Pixel manipulation with canvas</a> und die Referenz zum {{domxref("ImageData")}} Objekt.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[6]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.rect(10, 10, 100, 100);
+ctx.fill();
+
+console.log(ctx.getImageData(50, 50, 100, 100));
+// ImageData { width: 100, height: 100, data: Uint8ClampedArray[40000] }
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-getimagedata", "CanvasRenderingContext2D.getImageData")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{ CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Ab {{GeckoRelease("5.0")}} unterstützt <code>getImageData()</code> die Angabe von Rechtecken, die die Ränder des <em>Canvas-</em>Elements überschreiten. Die Pixel, die außerhalb des Elementes liegen, werden als transparentes Schwarz zurückgegeben. Auch wenn die größe des Rechtecks kleiner als eins ist wird jetzt mindestens ein Pixel als Pixel-Daten zurückgegeben.</p>
+
+<h2 id="Sehen_Sie_auch">Sehen Sie auch</h2>
+
+<ul>
+ <li>Das Interface zur Definition, {{domxref("CanvasRenderingContext2D")}}.</li>
+ <li>{{domxref("ImageData")}}</li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">Pixel manipulation with canvas</a></li>
+</ul>
diff --git a/files/de/web/api/canvasrenderingcontext2d/index.html b/files/de/web/api/canvasrenderingcontext2d/index.html
new file mode 100644
index 0000000000..aa9c1ea07a
--- /dev/null
+++ b/files/de/web/api/canvasrenderingcontext2d/index.html
@@ -0,0 +1,432 @@
+---
+title: CanvasRenderingContext2D
+slug: Web/API/CanvasRenderingContext2D
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Graphics
+  - Image
+  - Shape
+translation_of: Web/API/CanvasRenderingContext2D
+---
+<div>{{APIRef}}</div>
+
+<p>Das <code><strong>CanvasRenderingContext2D</strong></code>-Interface stellt den 2D-Renderkontext für die Zeichenoberfläche eines {{ HTMLElement("canvas") }} zur Verfügung. Es wird zum Zeichnen von Formen, Text, Bildern und anderen Objekten benutzt.</p>
+
+<p>Eigenschaften und Methoden finden Sie in der Sidebar und weiter unten. Das <a href="/en-US/docs/Web/API/Canvas_API/Tutorial" title="Canvas tutorial">Canvas-Tutorial</a> bietet Ihnen außerdem weitere Informationen, Beispiele und Ressourcen.</p>
+
+<h2 id="Ein_einfaches_Beispiel">Ein einfaches Beispiel</h2>
+
+<p>Um eine <code>CanvasRenderingContext2D</code> Instanz zu erhalten, muss man erst ein  HTML <code>&lt;canvas&gt;</code> Element haben, mit dem man arbeiten kann:</p>
+
+<pre class="brush: html">&lt;canvas id="my-house" width="300" height="300"&gt;&lt;/canvas&gt;</pre>
+
+<p>Um ein Objekt dieses Interfaces zu erhalten, benutzen Sie die Methode {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} eines <code>&lt;canvas&gt;</code>, mit "2d" als Argument:</p>
+
+<pre class="brush: js">const canvas = document.getElementById('my-house');
+const ctx = canvas.getContext('2d');
+</pre>
+
+<p>Sobald Sie den Kontext der Zeichenoberfläche haben, können Sie darin zeichnen, was immer Sie möchten. Dieser Code zeichnet ein Haus:</p>
+
+<pre class="brush: js">// Die Lininestärke festlegen
+ctx.lineWidth = 10;
+
+// Wand
+ctx.strokeRect(75, 140, 150, 110);
+
+// Tür
+ctx.fillRect(130, 190, 40, 60);
+
+// Dach
+ctx.moveTo(50, 140);
+ctx.lineTo(150, 60);
+ctx.lineTo(250, 140);
+ctx.closePath();
+ctx.stroke();
+</pre>
+
+<p>Die enstandene Zeichnung sieht so aus:</p>
+
+<p>{{EmbedLiveSample("Basic_example", 700, 330)}}</p>
+
+<h2 id="Referenz">Referenz</h2>
+
+<h3 id="Rechtecke_zeichnen">Rechtecke zeichnen</h3>
+
+<p>Es gibt drei Methoden, die sofort Rechtecke innerhalb des Canvas zu zeichnen.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.clearRect()")}}</dt>
+ <dd>Setzt alle Pixel im Rechteck mit Startpunkt <em>(x, y)</em> und Größe <em>(width, height)</em> auf schwarz und transparent wodurch jeglicher vorheriger Inhalt gelöscht wird.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.fillRect()")}}</dt>
+ <dd>Zeichnet ein gefülltes Rechteck mit Startpunkt <em>(x, y)</em> und Größe <em>(width, height)</em>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</dt>
+ <dd>Zeichnet ein Rechteck mit Startpunkt <em>(x, y)</em> und Größe <em>(width, height),</em> verwendet dabei den aktuellem <em>stroke style</em>.</dd>
+</dl>
+
+<h3 id="Text_darstellen">Text darstellen</h3>
+
+<p>Die folgenden Methoden zeichnen Text auf dem Canvas. Siehe auch das {{domxref("TextMetrics")}} - Objekt für die Texteigenschaften.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fillText()")}}</dt>
+ <dd>Zeichnet einen gegebenen Text (gefüllt) an die gegebene Position <em>(x, y)</em>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeText()")}}</dt>
+ <dd>Zeichnet einen gegebenen Text (Umrisse) an die gegebene Position <em>(x, y)</em>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.measureText()")}}</dt>
+ <dd>Gibt ein {{domxref("TextMetrics")}}-Objekt zurück.</dd>
+</dl>
+
+<h3 id="Linienstile">Linienstile</h3>
+
+<p>Die folgenden Methoden und Eigenschaften beeinflussen die Art und Weise, wie Linien gezeichnet werden.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.lineWidth")}}</dt>
+ <dd>Linienbreite. Standard: <code>1.0</code></dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineCap")}}</dt>
+ <dd>Typ des Linienabschlusses. Mögliche Werte: <code>butt</code> (default), <code>round</code>, <code>square</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineJoin")}}</dt>
+ <dd>Definiert den Typ der Ecken, wo sich zwei Linien treffen. Mögliche Werte: <code>round</code>, <code>bevel</code>, <code>miter</code> (default).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.miterLimit")}}</dt>
+ <dd>Verbindungsecken-Größe. Standard: <code>10</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.getLineDash()")}}</dt>
+ <dd>Gibt das aktuelle Linienstrich-Array zurück, welches eine gerade Anzahl positiver Zahlen enthält.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.setLineDash()")}}</dt>
+ <dd>Setzt das aktuelle Linienstrich-Array auf einen neuen Wert.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineDashOffset")}}</dt>
+ <dd>Spezifiziert, wo auf einer Linie ein Strich-Array beginnt.</dd>
+</dl>
+
+<h3 id="Textstile">Textstile</h3>
+
+<p>Die folgenden Eigenschaften bestimmen, wie Text dargestellt wird.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.font")}}</dt>
+ <dd>Font-Einstellung. Standard: <code>10px sans-serif</code></dd>
+ <dt>{{domxref("CanvasRenderingContext2D.textAlign")}}</dt>
+ <dd>Ausrichtungs-Einstellung. Mögliche Werte: <code>start</code> (default), <code>end</code>, <code>left</code>, <code>right</code> oder <code>center</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.textBaseline")}}</dt>
+ <dd>Ausrichtungseinstellung zur Basislinie. Mögliche Werte: <code>top</code>, <code>hanging</code>, <code>middle</code>, <code>alphabetic</code> (default), <code>ideographic</code>, <code>bottom</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.direction")}}</dt>
+ <dd>Direktionalität. Mögliche Werte: <code>ltr, rtl, </code><code>inherit</code> (default).</dd>
+</dl>
+
+<h3 id="Füll-_und_Linienfarbe">Füll- und Linienfarbe</h3>
+
+<p>Die Füllfarbe (<code>fillStyle</code>) wird innerhalb von Formen angewendet, die Linienfarbe (<code>strokeStyle</code>) auf die Randlinie von Formen. Beides kann statt einer Farbe auch ein Farbverlauf oder ein Muster sein.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fillStyle")}}</dt>
+ <dd>Farbe oder Stil für innerhalb von Formen. Standardwert <code>#000</code> (schwarz).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeStyle")}}</dt>
+ <dd>Farbe oder Stil für die Randlinie von Formen. Standardwert <code>#000</code> (schwarz).</dd>
+</dl>
+
+<h3 id="Farbverläufe_und_Muster">Farbverläufe und Muster</h3>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}</dt>
+ <dd>Erzeugt einen linearen Farbverlauf entlang der Linie gegeben durch die Koordinaten, die als Parameter übergeben werden.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}</dt>
+ <dd>Erzeugt einen radialen (kreisförmigen) Farbverlauf entlang der Linie gegeben durch die Koordinaten, die als Parameter übergeben werden.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.createPattern()")}}</dt>
+ <dd>Erzeugt ein Muster aus dem angegebenen Bild (ein {{domxref("CanvasImageSource")}}). Es wiederholt das Bild in den Richtungen, die mit dem <code>repetition</code> Parameter definiert werden. Diese Methode gibt ein {{domxref("CanvasPattern")}} zurück.</dd>
+</dl>
+
+<h3 id="Schatten">Schatten</h3>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowBlur")}}</dt>
+ <dd>Definiert den <span class="short_text" id="result_box" lang="de"><span>Unschärfe</span><span>-Effekt</span></span>. Standardwert <code>0</code></dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowColor")}}</dt>
+ <dd>Farbe des Schattens. Standardwert: komplett transparentes Schwarz.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetX")}}</dt>
+ <dd>Horizontale Entfernung des Schattens. Standardwert 0.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetY")}}</dt>
+ <dd>Vertikale Entfernung des Schattens. Standardwert 0.</dd>
+</dl>
+
+<h3 id="Pfade">Pfade</h3>
+
+<p>Die folgende Methoden können verwendet werden, um Pfade von Objekten zu manipulieren.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.beginPath()")}}</dt>
+ <dd>Startet einen neuen Pfad, indem die Liste mit allen Unterpfaden geleert wird. Rufe diese Methode auf, wenn du einen neuen Pfad starten willst.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.closePath()")}}</dt>
+ <dd>Sorgt dafür, dass die Stiftspitze zum Start des aktuellen Unterpfades zurückwandert. Es wird versucht eine greade Linie von der aktuellen Position zum Beginn der Linie zu zeichen. Wenn die Form schon geschlossen wurde oder nur einen Punkt enthält, macht diese Funktion nichts.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.moveTo()")}}</dt>
+ <dd>Bewegt den Anfangspunkt für einen neuen Unterpfad zu den übergebenen <strong>(x, y)</strong> Koordinaten.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineTo()")}}</dt>
+ <dd>Verbindet den letzten Punkt im Unterpfad mit den übergebenen <strong>(x, y)</strong> Koordinaten in einer geraden Linie.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo()")}}</dt>
+ <dd>Fügt eine kubische Bézierkurve zum Pfad hinzu. Diese benötigt drei Punkte. Die ersten zwei sind Kontrollpunkte für die Krümmung, der dritte ist das Ende der Kurve. Die Kurve beginnt am letzten Punkt im aktuellen Pfad, dieser kann davor mit <code>moveTo()</code> geändert werden.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.quadraticCurveTo()")}}</dt>
+ <dd>Fügt eine quadratische Bézierkurve zum aktuellen Pfad hinzu.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.arc()")}}</dt>
+ <dd>Fügt einen Kreisbogen zum Pfad hinzu, mit Kreismittelpunkt <em>(x, y)</em> und Radius <em>r</em>. Der Startwinkel ist <em>startAngle</em>, der Endwinkel <em>endAngle</em>, Richtung gegen den Uhrzeigersinn.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.arcTo()")}}</dt>
+ <dd>Fügt einen Kreisbogen zum Pfad mit den gegebenen Kontrollpunkten und Radius hinzu, verbunden mit dem letzten Punkt im Pfad durch eine gerade Linie.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.ellipse()")}} {{experimental_inline}}</dt>
+ <dd>Fügt eine Ellipse zum Pfad hinzu, mit dem Zentrum <em>(x, y)</em> und den Radien <em>radiusX</em> und <em>radiusY</em>, beginnend bei <em>startAngle</em> und endend bei <em>endAngle</em>, Richtung gegen den Uhrzeigersinn.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.rect()")}}</dt>
+ <dd>Erzeugt einen Pfad mit einem Rechteck an der Position <em>(x, y)</em> und den Dimensionen <em>width</em> und <em>height</em>.</dd>
+</dl>
+
+<h3 id="Pfade_zeichnen">Pfade zeichnen</h3>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fill()")}}</dt>
+ <dd>Füllt den Unterpfad mit der aktuellen Füllfarbe (bzw. Farbverlauf, Muster).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.stroke()")}}</dt>
+ <dd>Zeichnet die Linien des Unterpfades mit der aktuellen Linienfarbe (bzw. Farbverlauf, Muster).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}}</dt>
+ <dd>Wenn ein gegebenes Element fokussiert wird, zeichnet diese Methode einen Fokusring um den aktuellen Pfad.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}}</dt>
+ <dd>Scrollt den aktuellen Pfad oder einen bestimmten Pfad in Sicht.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.clip()")}}</dt>
+ <dd>Erzeugt einen zugeschnittenen Pfad aus den aktuellen Unterpfaden. Alles, was nach <code>clip()</code> gezeichnet wird, erscheint nur im zugeschnittenen Pfad. Für ein Beispiel, siehe  <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Clipping paths">Clipping paths</a> im Canvas Tutorial.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.isPointInPath()")}}</dt>
+ <dd>Gibt zurück, ob der angegebene Punkt im aktuellen Pfad enthalten ist oder nicht.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.isPointInStroke()")}}</dt>
+ <dd>Gibt zurück, ob der angegebene Punkt innerhalb des bemalten Bereichs im Pfad ist oder nicht.</dd>
+</dl>
+
+<h3 id="Transformationen">Transformationen</h3>
+
+<p>Objekte im <code>CanvasRenderingContext2D</code>-Renderkontext haben eine aktuelle Transformationsmatrix und Methoden, um diese zu manipulieren. Die Transformationsmatrix wird angewendet, wenn der aktuelle Pfad erzeugt wird und wenn Text, Formen oder {{domxref("Path2D")}} Objekte gemalt werden. Folgende Methoden sind hier für historische und Kompatibilitätszwecke aufgelistet, da heutzutage meistens {{domxref("SVGMatrix")}} Objekte verwendet werden und in Zukunft diese Methoden ersetzen werden.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.currentTransform")}} {{experimental_inline}}</dt>
+ <dd>Die momentane Transformationsmatrix ({{domxref("SVGMatrix")}} object).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.rotate()")}}</dt>
+ <dd>Fügt eine Drehung zur Transformationsmatrix hinzu. Der <em>angle</em>-Parameter stellt einen Drehwinkel im Uhrzeigersinn dar und wird in radians ausgedrückt.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.scale()")}}</dt>
+ <dd>Fügt eine skalierende Transformation zu den Längeneinheiten des canvas hinzu (horizontal um Faktor <em>x</em>, vertikal um Faktor <em>y</em>). Was nach <code>scale()</code> auf das canvas gezeichnet wird, wird also dementsprechend gestaucht oder gestreckt.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.translate()")}}</dt>
+ <dd>Fügt eine übersetzende Transformation hinzu, die die Position des canvas relativ zu seinem Koordinatensystem verschiebt (horizontal um <em>x</em>, vertikal um <em>y</em>). Was nach <code>translate()</code> gezeichnet wird, ist also um <strong>(x, y)</strong> verschoben.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.transform()")}}</dt>
+ <dd>Multipliziert die aktuelle Transformationsmatrix mit der Matrix, die durch die Parameter dieser Funktion beschrieben wird.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.setTransform()")}}</dt>
+ <dd>Setzt die aktuellen Transformationen zurück und ruft dann die <code>transform()</code> Methode mit den selben Parametern auf.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.resetTransform()")}} {{experimental_inline}}</dt>
+ <dd>Setzt die aktuellen Transformationen zurück.</dd>
+</dl>
+
+<h3 id="Compositing">Compositing</h3>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.globalAlpha")}}</dt>
+ <dd>Alpha-Wert bzw. Deckkraft, die auf alle Formen und Bilder angewendet wird, bevor diese auf dem canvas gezeichnet werden. Standardwert <code>1.0</code> (undurchsichtig).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}</dt>
+ <dd>Zusammen mit <code>globalAlpha</code> legt dieser Wert fest, wie Formen und Bilder abhängig vom Hintergrund auf das canvas gezeichnet werden sollen.</dd>
+</dl>
+
+<h3 id="Bilder_zeichnen">Bilder zeichnen</h3>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.drawImage()")}}</dt>
+ <dd>Zeichnet das übergebene Bild. Diese Methode ist in diversen Formaten verfügbar, wodurch sie große Flexibilität in der Nutzung bietet.</dd>
+</dl>
+
+<h3 id="Pixelmanipulation">Pixelmanipulation</h3>
+
+<p>Siehe auch das {{domxref("ImageData")}} Objekt.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.createImageData()")}}</dt>
+ <dd>Erzeugt ein neues, leeres {{domxref("ImageData")}} Objekt mit den angegebenen Dimensionen. Alle Pixel in diesem Objekt sind transparent schwarz.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.getImageData()")}}</dt>
+ <dd>Gibt ein {{domxref("ImageData")}} Objekt zurück, das die dem canvas zugrunde liegenden Pixeldaten enthält. Die Methode wird auf einen bestimmten Ausschnitt des canvas angewendet, beginnend bei <em>(sx, sy)</em>, mit Breite <em>sw</em> und Höhe <em>sh</em>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.putImageData()")}}</dt>
+ <dd>Malt Pixeldaten des {{domxref("ImageData")}} Objekts auf das canvas. Wenn ein dreckiges Rechteck angegeben wird, werden nur die Pixel dieses Rechtecks gemalt.</dd>
+</dl>
+
+<h3 id="Bildglättung">Bildglättung</h3>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} {{experimental_inline}}</dt>
+ <dd>Bildglättungsmodus; wenn deaktiviert, werden Bilder beim Skalieren nicht geglättet.</dd>
+</dl>
+
+<h3 id="Der_Leinwand-Zustand">Der Leinwand-Zustand</h3>
+
+<p>Der <code>CanvasRenderingContext2D</code>-Renderkontext enthält eine Vielzahl an Zeichnungszuständen (Attribute für Linienstile, Füllstile, Schattenstile, Textstile). Die folgenden Methoden helfen Ihnen mit diesen Zuständen zu arbeiten:</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.save()")}}</dt>
+ <dd>Saves the current drawing style state using a stack so you can revert any change you make to it using <code>restore()</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.restore()")}}</dt>
+ <dd>Restores the drawing style state to the last element on the 'state stack' saved by <code>save()</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.canvas")}}</dt>
+ <dd>A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element.</dd>
+</dl>
+
+<h3 id="Trefferregionen">Trefferregionen</h3>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}</dt>
+ <dd>Fügt eine Trefferregion (hit region) zur Leinwand hinzu.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}</dt>
+ <dd>Entfernt eine Trefferregion mit gegebener <code>id</code> von der Leinwand.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}</dt>
+ <dd>Entfernt alle Trefferregionen von der Leinwand.</dd>
+</dl>
+
+<h3 id="Filter">Filter</h3>
+
+<dl>
+ <dt>{{experimental_inline}} {{domxref("CanvasRenderingContext2D.filter")}}</dt>
+ <dd>Applies a CSS or SVG filter to the canvas, e.g., to change its brightness or bluriness.</dd>
+</dl>
+
+<h2 id="Unstandardisierte_APIs">Unstandardisierte APIs</h2>
+
+<h3 id="Blink_and_WebKit">Blink and WebKit</h3>
+
+<p>Die meisten dieser APIs sind <a href="https://code.google.com/p/chromium/issues/detail?id=363198">veraltet und wurden kurz nach Chrome 36 entfernt</a>.</p>
+
+<dl>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.clearShadow()</code></dt>
+ <dd>Entfernt alle Schatteneinstellungen wie  {{domxref("CanvasRenderingContext2D.shadowColor")}} und {{domxref("CanvasRenderingContext2D.shadowBlur")}}.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.drawImageFromRect()</code></dt>
+ <dd>Das ist redundant zum equivalenten Überladung von  <code>drawImage</code>.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setAlpha()</code></dt>
+ <dd>Verwenden Sie {{domxref("CanvasRenderingContext2D.globalAlpha")}} anstelle dieser Methode.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setCompositeOperation()</code></dt>
+ <dd>Verwenden Sie {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} anstelle dieser Methode.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setLineWidth()</code></dt>
+ <dd>Verwenden Sie {{domxref("CanvasRenderingContext2D.lineWidth")}} anstelle dieser Methode.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setLineJoin()</code></dt>
+ <dd>Verwenden Sie {{domxref("CanvasRenderingContext2D.lineJoin")}} anstelle dieser Methode.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setLineCap()</code></dt>
+ <dd>Verwenden Sie {{domxref("CanvasRenderingContext2D.lineCap")}} anstelle dieser Methode.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setMiterLimit()</code></dt>
+ <dd>Verwenden Sie {{domxref("CanvasRenderingContext2D.miterLimit")}} anstelle dieser Methode.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setStrokeColor()</code></dt>
+ <dd>Verwenden Sie {{domxref("CanvasRenderingContext2D.strokeStyle")}} anstelle dieser Methode.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setFillColor()</code></dt>
+ <dd>Verwenden Sie {{domxref("CanvasRenderingContext2D.fillStyle")}} anstelle dieser Methode.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.setShadow()</code></dt>
+ <dd>Verwenden Sie {{domxref("CanvasRenderingContext2D.shadowColor")}} und {{domxref("CanvasRenderingContext2D.shadowBlur")}} anstelle dieser Methode.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.webkitLineDash</code></dt>
+ <dd>Verwenden Sie {{domxref("CanvasRenderingContext2D.getLineDash()")}} und {{domxref("CanvasRenderingContext2D.setLineDash()")}} anstelle dieser Methode.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.webkitLineDashOffset</code></dt>
+ <dd>Verwenden Sie {{domxref("CanvasRenderingContext2D.lineDashOffset")}} anstelle dieser Methode.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.webkitImageSmoothingEnabled</code></dt>
+ <dd>Verwenden Sie {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} anstelle dieser Methode.</dd>
+</dl>
+
+<h3 id="Blink_only">Blink only</h3>
+
+<dl>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.getContextAttributes()</code></dt>
+ <dd>Inspired by the same <code>WebGLRenderingContext</code> method it returns an <code>Canvas2DContextAttributes</code> object that contains the attributes "storage" to indicate which storage is used ("persistent" by default) and the attribute "alpha" (<code>true</code> by default) to indicate that transparency is used in the canvas.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.isContextLost()</code></dt>
+ <dd>Inspired by the same <code>WebGLRenderingContext</code> method it returns <code>true</code> if the Canvas context has been lost, or <code>false</code> if not.</dd>
+</dl>
+
+<h3 id="WebKit_only">WebKit only</h3>
+
+<dl>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitBackingStorePixelRatio</code></dt>
+ <dd>The backing store size in relation to the canvas element. See <a href="http://www.html5rocks.com/en/tutorials/canvas/hidpi/">High DPI Canvas</a>.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitGetImageDataHD</code></dt>
+ <dd>Intended for HD backing stores, but removed from canvas specifications.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitPutImageDataHD</code></dt>
+ <dd>Intended for HD backing stores, but removed from canvas specifications.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h3 id="Gecko_only">Gecko only</h3>
+
+<dl>
+ <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.filter")}}</dt>
+ <dd><span id="summary_alias_container"><span id="short_desc_nonedit_display">CSS and SVG filters as Canvas APIs</span></span>. Likely to be standardized in a new version of the specification.</dd>
+</dl>
+
+<h4 id="Prefixed_APIs">Prefixed APIs</h4>
+
+<dl>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozCurrentTransform</code></dt>
+ <dd>Sets or gets the current transformation matrix, see {{domxref("CanvasRenderingContext2D.currentTransform")}}.  {{ gecko_minversion_inline("7.0") }}</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozCurrentTransformInverse</code></dt>
+ <dd>Sets or gets the current inversed transformation matrix.  {{ gecko_minversion_inline("7.0") }}</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozFillRule</code></dt>
+ <dd>The <a class="external" href="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t" title="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t">fill rule</a> to use. This must be one of <code>evenodd</code> or <code>nonzero</code> (default).</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozImageSmoothingEnabled</code></dt>
+ <dd>See {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}.</dd>
+ <dt>{{non-standard_inline}} {{deprecated_inline}} <code>CanvasRenderingContext2D.mozDash</code></dt>
+ <dd>An array which specifies the lengths of alternating dashes and gaps {{ gecko_minversion_inline("7.0") }}. Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead.</dd>
+ <dt>{{non-standard_inline}} {{deprecated_inline}} <code>CanvasRenderingContext2D.mozDashOffset</code></dt>
+ <dd>Specifies where to start a dash array on a line. {{ gecko_minversion_inline("7.0") }}. Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead.</dd>
+ <dt>{{non-standard_inline}} {{deprecated_inline}} <code>CanvasRenderingContext2D.mozTextStyle</code></dt>
+ <dd>Introduced in in Gecko 1.9, deprecated in favor of the {{domxref("CanvasRenderingContext2D.font")}} property.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozDrawText()</code></dt>
+ <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.strokeText()")}} or {{domxref("CanvasRenderingContext2D.fillText()")}} instead.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozMeasureText()</code></dt>
+ <dd>This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.measureText()")}} instead.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozPathText()</code></dt>
+ <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozTextAlongPath()</code></dt>
+ <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.</dd>
+</dl>
+
+<h4 id="Internal_APIs_(chrome-context_only)">Internal APIs (chrome-context only)</h4>
+
+<dl>
+ <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.asyncDrawXULElement()")}}</dt>
+ <dd>Renders a region of a XUL element into the <code>canvas</code>.</dd>
+ <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.drawWindow()")}}</dt>
+ <dd>Renders a region of a window into the <code>canvas</code>. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.demote()</code></dt>
+ <dd>This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved.</dd>
+</dl>
+
+<h3 id="Internet_Explorer">Internet Explorer</h3>
+
+<dl>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.msFillRule</code></dt>
+ <dd>The <a class="external" href="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t" title="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t">fill rule</a> to use. This must be one of <code>evenodd</code> or <code>nonzero</code> (default).</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#2dcontext:canvasrenderingcontext2d", "CanvasRenderingContext2D")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.CanvasRenderingContext2D")}}</p>
+</div>
+
+<ul>
+ <li>Starting with Gecko 5.0 {{geckoRelease("5.0")}}, specifying invalid values are now silently ignored for the following methods and properties: <code>translate()</code>, <code>transform()</code>, <code>rotate(), </code><code>scale(),</code> <code>rect()</code>, <code>clearRect()</code>, <code>fillRect()</code>, <code>strokeRect()</code>, <code>lineTo()</code>, <code>moveTo()</code>, <code>quadraticCurveTo()</code>, <code>arc()</code>, <code>shadowOffsetX</code>, <code>shadowOffsetY</code>,  <code>shadowBlur</code>.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("HTMLCanvasElement")}}</li>
+</ul>
diff --git a/files/de/web/api/canvasrenderingcontext2d/ispointinpath/index.html b/files/de/web/api/canvasrenderingcontext2d/ispointinpath/index.html
new file mode 100644
index 0000000000..5eac7321fe
--- /dev/null
+++ b/files/de/web/api/canvasrenderingcontext2d/ispointinpath/index.html
@@ -0,0 +1,206 @@
+---
+title: CanvasRenderingContext2D.isPointInPath()
+slug: Web/API/CanvasRenderingContext2D/isPointInPath
+translation_of: Web/API/CanvasRenderingContext2D/isPointInPath
+---
+<div>{{APIRef}}</div>
+
+<p>Die Methode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.isPointInPath()</code></strong> der Canvas 2D API entscheidet darüber, ob ein Punkt in einem gegeben Pfad enthalten ist.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">boolean <var><em>ctx</em>.isPointInPath(x, y);
+boolean <var><em>ctx</em>.isPointInPath(x, y, fillRule);
+
+boolean <var><em>ctx</em>.isPointInPath(path, x, y);
+boolean <var><em>ctx</em>.isPointInPath(path, x, y, fillRule);</var></var></var></var>
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt>x</dt>
+ <dd>Die X-Koordinate des zu prüfenden Punktes.</dd>
+ <dt>y</dt>
+ <dd>Die Y-Koordinate des zu prüfenden Punktes.</dd>
+ <dt><code>fillRule</code></dt>
+ <dd>Der Algorithmus, der prüft, ob der Punkt innerhalb oder außerhalb des Pfades liegt.<br>
+ Mögliche Werte:
+ <ul>
+  <li><code><strong>"nonzero</strong></code>": Die <a href="http://en.wikipedia.org/wiki/Nonzero-rule">non-zero winding Regel</a>, sie ist standardmäßig eingestellt.</li>
+  <li><code><strong>"evenodd"</strong></code>: Die <a href="http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule">even-odd winding Regel</a>.</li>
+ </ul>
+ </dd>
+ <dt><code>path</code></dt>
+ <dd>Ein {{domxref("Path2D")}} Objekt.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<dl>
+ <dt>{{jsxref("Boolean")}}</dt>
+ <dd>Ein Boolean, welcher <code>true</code> ist, wenn der gegebene Punkt innerhalb des gegeben Pfades liegt, ansonsten <code>false</code>.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Benutzung_der_Methode_isPointInPath">Benutzung der Methode <code>isPointInPath</code></h3>
+
+<p>Dies ist ein einfaches Snippet, welches die <code>isPointinPath</code> Methode nutzt, um zu prüfen, ob ein Punkt in gegebenem Pfad enthalten ist.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[6]">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.rect(10, 10, 100, 100);
+ctx.stroke();
+console.log(ctx.isPointInPath(10, 10)); // true
+</pre>
+
+<p>Editieren Sie den folgenden Quelltext. Die Änderungen werden in Echtzeit übernommen und Log-Ausgaben in die <a href="/en-US/docs/Tools/Browser_Console">console</a> ausgegeben:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.rect(10, 10, 100, 100);
+ctx.stroke();
+console.log(ctx.isPointInPath(10, 10)); // true&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-ispointinpath", "CanvasRenderingContext2D.isPointInPath")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Path parameter</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop(31) }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Path parameter</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile(31) }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Compatibility_notes">Compatibility notes</h2>
+
+<ul>
+ <li>Prior to Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4), this method incorrectly failed to multiply the specified point's coordinates by the current transformation matrix before comparing it to the path. Now this method works correctly even if the context is rotated, scaled, or otherwise transformed.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The interface defining it, {{domxref("CanvasRenderingContext2D")}}.</li>
+</ul>
diff --git a/files/de/web/api/canvasrenderingcontext2d/scale/index.html b/files/de/web/api/canvasrenderingcontext2d/scale/index.html
new file mode 100644
index 0000000000..b26824a51e
--- /dev/null
+++ b/files/de/web/api/canvasrenderingcontext2d/scale/index.html
@@ -0,0 +1,223 @@
+---
+title: CanvasRenderingContext2D.scale()
+slug: Web/API/CanvasRenderingContext2D/scale
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Méthode
+  - Referenz
+translation_of: Web/API/CanvasRenderingContext2D/scale
+---
+<div>{{APIRef}}</div>
+
+<p>Die Methode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.scale()</code></strong> der Canvas 2D API skaliert das Canvas-Element um den Faktor x horizontal und um den Faktor y vertikal.</p>
+
+<p>Normalerweise ist eine Einheit auf dem Canvas genau ein Pixel. Wenn wir zum Beispiel einen Skalierungsfaktor von 0,5 Pixeln anwenden, ist eine Einheit 0,5 Pixel und alle Objekte werden mit der halben Größe gezeichnet. Analog dazu vergößert der Skalierungsfaktor 2,0 die Längeneinheit auf zwei Pixel. Die Objekte werden dann doppelt so groß gezeichnet.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.scale(x, y);</var>
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Skalierungsfaktor in horizontaler Richtung.</dd>
+ <dt><code>y</code></dt>
+ <dd>Skalierungsfaktor in vertikaler Richtung</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Die_Methode_scale_verwenden">Die Methode <code>scale</code> verwenden</h3>
+
+<p>Dies ist nur ein kurzes Beispiel, das die Methode <code>scale</code> benutzt.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.scale(10, 3);
+ctx.fillRect(10, 10, 10, 10);
+
+// reset current transformation matrix to the identity matrix
+ctx.setTransform(1, 0, 0, 1, 0, 0);
+</pre>
+
+<p>Editieren Sie den folgenden Code und sehen Sie die Änderungen sofort im Canvas:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.scale(10, 3);
+ctx.fillRect(10,10,10,10);
+ctx.setTransform(1, 0, 0, 1, 0, 0);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h3 id="scale_verwenden_um_horizontal_oder_vertikal_zu_spiegeln"><code>scale</code> verwenden, um horizontal oder vertikal zu spiegeln</h3>
+
+<p>Sie können <code>ctx.scale(-1, 1)</code> benutzen, um den Inhalt horizontal zu spiegeln und <code>ctx.scale(1, -1)</code>, um ihn vertikal zu spiegeln.</p>
+
+<div style="display: none;">
+<h6 id="Playable_code2">Playable code2</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.scale(-1, 1);
+ctx.font = "48px serif";
+ctx.fillText("Hello world!", -320, 120);
+ctx.setTransform(1, 0, 0, 1, 0, 0);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code2', 700, 360) }}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-scale", "CanvasRenderingContext2D.scale")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompabilität">Browserkompabilität</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Das Interface, durch das es definiert wird, {{domxref("CanvasRenderingContext2D")}}</li>
+</ul>
diff --git a/files/de/web/api/canvasrenderingcontext2d/setlinedash/index.html b/files/de/web/api/canvasrenderingcontext2d/setlinedash/index.html
new file mode 100644
index 0000000000..a7d5bd82c3
--- /dev/null
+++ b/files/de/web/api/canvasrenderingcontext2d/setlinedash/index.html
@@ -0,0 +1,179 @@
+---
+title: CanvasRenderingContext2D.setLineDash()
+slug: Web/API/CanvasRenderingContext2D/setLineDash
+translation_of: Web/API/CanvasRenderingContext2D/setLineDash
+---
+<div>{{APIRef}}</div>
+
+<p>The <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.setLineDash()</code></strong> method of the Canvas 2D API sets the line dash pattern.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.setLineDash(segments);</var>
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>segments</code></dt>
+ <dd>An {{jsxref("Array")}}. A list of numbers that specifies distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example, <code>[5, 15, 25]</code> will become <code>[5, 15, 25, 5, 15, 25]</code>. An empty array clears the dashes, so that a solid line will be drawn.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_the_setLineDash_method">Using the <code>setLineDash</code> method</h3>
+
+<p>This is just a simple code snippet which uses the <code>setLineDash</code> method to draw a dashed line.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[4]">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.setLineDash([5, 15]);
+
+ctx.beginPath();
+ctx.moveTo(0,100);
+ctx.lineTo(400, 100);
+ctx.stroke();
+</pre>
+
+<p>Edit the code below and see your changes update live in the canvas:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.setLineDash([5, 15]);
+ctx.beginPath();
+ctx.moveTo(0,100);
+ctx.lineTo(400, 100);
+ctx.stroke();&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-setlinedash", "CanvasRenderingContext2D.setLineDash")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop(27) }}</td>
+   <td>{{ CompatIE(11) }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile(27) }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Gecko-specific_notes">Gecko-specific notes</h2>
+
+<ul>
+ <li>Starting with Gecko 7.0 {{geckoRelease("7.0")}}, the non-standard and deprecated property <code>mozDash</code> has been implemented to set and get a dash list. This property will be deprecated and removed in the future, see {{bug(931643)}}. Use <code>setLineDash()</code> instead.</li>
+</ul>
+
+<h2 id="WebKit-specific_notes">WebKit-specific notes</h2>
+
+<ul>
+ <li>In WebKit-based browsers (e.g. Safari), the non-standard and deprecated property <code>webkitLineDash</code> is implemented besides this method. Use <code>setLineDash()</code> instead.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The interface defining it, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.getLineDash()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.lineDashOffset")}}</li>
+</ul>
diff --git a/files/de/web/api/canvasrenderingcontext2d/textalign/index.html b/files/de/web/api/canvasrenderingcontext2d/textalign/index.html
new file mode 100644
index 0000000000..1f1651f456
--- /dev/null
+++ b/files/de/web/api/canvasrenderingcontext2d/textalign/index.html
@@ -0,0 +1,128 @@
+---
+title: CanvasRenderingContext2D.textAlign
+slug: Web/API/CanvasRenderingContext2D/textAlign
+translation_of: Web/API/CanvasRenderingContext2D/textAlign
+---
+<div>{{APIRef}}</div>
+
+<p>Die <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.textAlign</code></strong> Eigenschaft der Canvas 2D API spezifiert die aktuelle Textausrichtung welche beim zeichnen von Text verwendet wird.</p>
+
+<p>Nehmen Sie in Acht, dass die Ausrichtung auf dem x Wert der {{domxref("CanvasRenderingContext2D.fillText", "fillText()")}} Methode basiert. Wenn <code>textAlign</code>  <code>"center"</code> ist,  dann würde der Text an der Stelle <code>x - (width / 2)</code> gezeichnet werden.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var><em>ctx</em>.textAlign = "left" || "right" || "center" || "start" || "end";</var>
+</pre>
+
+<h3 id="Optionen">Optionen</h3>
+
+<p>Mögliche Werte:</p>
+
+<dl>
+ <dt><code>left</code></dt>
+ <dd>Der Text wird linksbündig ausgerichtet.</dd>
+ <dt><code>right</code></dt>
+ <dd>Der Text wird rechtsbündig ausgerichtet.</dd>
+ <dt><code>center</code></dt>
+ <dd>Der Text wird zentiert ausgerichtet.</dd>
+ <dt><code>start</code></dt>
+ <dd>Der Text wird am normalen Start der Zeile ausgerichtet. (Links -oder rechtsbündig, je nach Sprache).</dd>
+ <dt><code>end</code></dt>
+ <dd>Der Text wird am normalen Ende der Zeile ausgerichtet (Links -oder rechtsbündig, je nach Sprache).</dd>
+</dl>
+
+<p>Der Standardwert ist <code>start</code>.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Using_the_textAlign_property" name="Using_the_textAlign_property">Benutzung der <code>textAlign</code> Eigenschaft</h3>
+
+<p>Ein einfaches Beispiel welches die <code>textAlign</code> Eigenschaft benutzt um die Textausrichtung zu ändern.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.font = '48px serif';
+ctx.textAlign = 'left';
+ctx.strokeText('Hello world', 0, 100);
+</pre>
+
+<p>Ändern Sie den Code um Ihre Änderungen im Canvas zu sehen:</p>
+
+<div class="hidden">
+<h6 id="Playable_code" name="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.font = '48px serif';
+ctx.textAlign = 'left';
+ctx.strokeText('Hello world', 0, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var edit = document.getElementById('edit');
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener('click', function() {
+  textarea.focus();
+})
+
+textarea.addEventListener('input', drawCanvas);
+window.addEventListener('load', drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textalign", "CanvasRenderingContext2D.textAlign")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.textAlign")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Das Interface welches es definiert, {{domxref("CanvasRenderingContext2D")}}.</li>
+</ul>
diff --git a/files/de/web/api/childnode/index.html b/files/de/web/api/childnode/index.html
new file mode 100644
index 0000000000..07dcc1cb33
--- /dev/null
+++ b/files/de/web/api/childnode/index.html
@@ -0,0 +1,190 @@
+---
+title: ChildNode
+slug: Web/API/ChildNode
+tags:
+  - API
+  - DOM
+  - Experimental
+  - Interface
+  - NeedsTranslation
+  - Node
+  - TopicStub
+translation_of: Web/API/ChildNode
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>The <code><strong>ChildNode</strong></code> interface contains methods that are particular to {{domxref("Node")}} objects that can have a parent.</p>
+
+<p><code>ChildNode</code> is a raw interface and no object of this type can be created; it is implemented by {{domxref("Element")}}, {{domxref("DocumentType")}}, and {{domxref("CharacterData")}} objects.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>There are neither inherited, nor specific properties.</em></p>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>There are no inherited methods.</em></p>
+
+<dl>
+ <dt>{{domxref("ChildNode.remove()")}} {{experimental_inline}}</dt>
+ <dd>Removes this <code>ChildNode</code> from the children list of its parent.</dd>
+ <dt>{{domxref("ChildNode.before()")}} {{experimental_inline}}</dt>
+ <dd>Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this <code>ChildNode</code>'s parent, just before this <code>ChildNode</code>. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd>
+ <dt>{{domxref("ChildNode.after()")}} {{experimental_inline}}</dt>
+ <dd>Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this <code>ChildNode</code>'s parent, just after this <code>ChildNode</code>. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd>
+ <dt>{{domxref("ChildNode.replaceWith()")}} {{experimental_inline}}</dt>
+ <dd>Replaces this <code>ChildNode</code> in the children list of its parent with a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-childnode', 'ChildNode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Split the <code>ElementTraversal</code> interface in {{domxref("ParentNode")}} and <code>ChildNode</code>. <code>previousElementSibling</code> and <code>nextElementSibling</code> are now defined on the latter. The {{domxref("CharacterData")}} and {{domxref("DocumentType")}} implemented the new interfaces. Added the <code>remove()</code>, <code>before()</code>, <code>after()</code> and <code>replaceWith()</code> methods.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Added the initial definition of its properties to the <code>ElementTraversal</code> pure interface and use it on {{domxref("Element")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>External on github: <a href="https://github.com/seznam/JAK/blob/master/lib/polyfills/childNode.js">childNode.js</a></p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support (on {{domxref("Element")}})</td>
+   <td>{{CompatChrome(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(23)}}</td>
+   <td>9.0</td>
+   <td>10.0</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Support on {{domxref("DocumentType")}} and {{domxref("CharacterData")}} {{experimental_inline}}</td>
+   <td>{{CompatChrome(23.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(23)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>remove()</code>{{experimental_inline}}</td>
+   <td>{{CompatChrome(29.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(23)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>before()</code>, <code>after()</code>, and <code>replaceWith()</code> {{experimental_inline}}</td>
+   <td>{{CompatChrome(54.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(49)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(39)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support (on {{domxref("Element")}})</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(23)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Support on {{domxref("DocumentType")}} and {{domxref("CharacterData")}} {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(23)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>remove()</code>{{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(23)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>before()</code>, <code>after()</code>, and <code>replaceWith()</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(54.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(49)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(39)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(54.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{domxref("ParentNode")}} pure interface.</li>
+ <li>
+  <div class="syntaxbox">Object types implementing this pure interface: {{domxref("CharacterData")}}, {{domxref("Element")}}, and {{domxref("DocumentType")}}.</div>
+ </li>
+</ul>
diff --git a/files/de/web/api/childnode/remove/index.html b/files/de/web/api/childnode/remove/index.html
new file mode 100644
index 0000000000..bae33f75c0
--- /dev/null
+++ b/files/de/web/api/childnode/remove/index.html
@@ -0,0 +1,97 @@
+---
+title: ChildNode.remove()
+slug: Web/API/ChildNode/remove
+tags:
+  - API
+  - ChildNode
+  - DOM
+  - Experimentell
+  - Méthode
+translation_of: Web/API/ChildNode/remove
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Die <code><strong>ChildNode.remove()</strong></code> Methode entfernt ein Objekt aus der Baumstruktur ("tree") zu der es gehört.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>node</em>.remove();
+</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="Benutzung_von_remove()">Benutzung von <code>remove()</code></h3>
+
+<pre class="brush: html">&lt;div id="div-01"&gt;Dies ist div-01&lt;/div&gt;
+&lt;div id="div-02"&gt;Dies ist div-02&lt;/div&gt;
+&lt;div id="div-03"&gt;Dies ist div-03&lt;/div&gt;
+</pre>
+
+<pre class="brush: js">var el = document.getElementById('div-02');
+el.remove(); // Entfernt das div Element mit der id 'div-02'
+</pre>
+
+<h3 id="ChildNode.remove()_kann_nicht_gescopet_werden"><code>ChildNode.remove()</code> kann nicht gescopet werden</h3>
+
+<p>Die <code>remove()</code> Methode kann nicht mit dem <code>with</code> Statement gescopet werden. {{jsxref("Symbol.unscopables")}} enthält mehr Informationen darüber.</p>
+
+<pre class="brush: js">with(node) {
+  remove();
+}
+// Erzeught einen ReferenceError</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Ein Polyfill der <code>remove()</code> Methode in Internet Explorer 9 und höher sieht folgendermaßen aus:</p>
+
+<pre class="brush: js">// von:https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/remove()/remove().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('remove')) {
+      return;
+    }
+    Object.defineProperty(item, 'remove', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function remove() {
+        if (this.parentNode !== null)
+          this.parentNode.removeChild(this);
+      }
+    });
+  });
+})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);</pre>
+
+<h2 id="Specifikationen">Specifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-childnode-remove', 'ChildNode.remove')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Erste Definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.ChildNode.remove")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Das reine {{domxref("ChildNode")}} Interface.</li>
+ <li>
+  <div class="syntaxbox">Objekttypen die dieses Interface implementieren: {{domxref("CharacterData")}}, {{domxref("Element")}} und {{domxref("DocumentType")}}.</div>
+ </li>
+</ul>
diff --git a/files/de/web/api/console/assert/index.html b/files/de/web/api/console/assert/index.html
new file mode 100644
index 0000000000..834e253ce5
--- /dev/null
+++ b/files/de/web/api/console/assert/index.html
@@ -0,0 +1,98 @@
+---
+title: Console.assert()
+slug: Web/API/Console/assert
+translation_of: Web/API/console/assert
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Schreibt eine Fehlermeldung in die Konsole, wenn eine Behauptung falsch ist. Wenn die Behauptung wahr ist, passiert nichts.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<p>Die Methode <code>console.assert()</code> wurde in älteren Node.js Versionen anders implementiert als in Browsern. In Browsern wird durch den Aufruf von <code>console.assert()</code> mit einer falschen Behauptung <code>message</code> in die Konsole ausgegeben, <em>ohne</em> die Ausführung des nachfolgenden Codes zu unterbrechen. Vor Node.js v10.0.0 bewirkt eine falsche Behauptung jedoch auch, dass ein <code>AssertionError</code> ausgelöst wird. Diese Diskrepanz wurde mit Node v10 behoben, so dass <code>console.assert()</code> jetzt sowohl in Node als auch im Browser gleich funktioniert.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">console.assert(<var>assertion</var>, <var>obj1</var> [, <var>obj2</var>, ..., <var>objN</var>]);
+console.assert(<var>assertion</var>, <var>msg</var> [, <var>subst1</var>, ..., <var>substN</var>]); // c-ähnliche Formatierung
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>assertion</code></dt>
+ <dd>Jeder boolesche Ausdruck. Wenn die Behauptung falsch ist, wird <code>message</code> in der Console ausgegeben.</dd>
+ <dt><code>obj1</code> ... <code>objN</code></dt>
+ <dd>Eine Liste der auszugebenden JavaScript-Objekte. Die String-Darstellungen jedes dieser Objekte werden in der angegebenen Reihenfolge zusammengefügt und ausgegeben.</dd>
+ <dt><code>msg</code></dt>
+ <dd>Ein JavaScript-String, der keine oder mehrere Ersetzungsstrings enthält.</dd>
+ <dt><code>subst1</code> ... <code>substN</code></dt>
+ <dd>JavaScript-Objekte, mit denen Ersetzungsstrings in msg ersetzt werden sollen. Dieser Parameter gibt Ihnen zusätzliche Kontrolle über das Format der Ausgabe.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Im folgenden Codebeispiel wird die Verwendung eines JavaScript-Objekts nach der Behauptung veranschaulicht:</p>
+
+<pre class="brush: js">const errorMsg = 'the # is not even';
+for (let number = 2; number &lt;= 5; number += 1) {
+    console.log('the # is ' + number);
+    console.assert(number % 2 === 0, {number: number, errorMsg: errorMsg});
+    // oder mit ES2015 Object Property Shorthand:
+    // console.assert(number % 2 === 0, {number, errorMsg});
+}
+// Ausgabe:
+// the # is 2
+// the # is 3
+// Assertion failed: {number: 3, errorMsg: "the # is not even"}
+// the # is 4
+// the # is 5
+// Assertion failed: {number: 5, errorMsg: "the # is not even"}</pre>
+
+<p>Beachten Sie, dass ein String, der einen Ersatzstring enthält, als Parameter für <code>console.log()</code> in Node und vielen, wenn nicht allen Browsern, funktioniert...</p>
+
+<pre class="brush: js">console.log('the word is %s', 'foo');
+// Ausgabe: the word is foo</pre>
+
+<p>...die Verwendung eines solchen Strings als Parameter für <code>console.assert()</code> jedoch derzeit nicht in allen Browsern wie erwartet funktioniert:</p>
+
+<pre class="brush: js">console.assert(false, 'the word is %s', 'foo');
+// korrekte Ausgabe in Node (e.g. v8.10.0) und einigen Browsern
+//     (z. B. Firefox v60.0.2):
+// Assertion failed: the word is foo
+// inkorrekte Ausgabe in einigen Browsern
+//     (z. B. Chrome v67.0.3396.87):
+// Assertion failed: the word is %s foo</pre>
+
+<p>Weitere Informationen finden Sie in der Dokumentation von {{domxref("console")}} unter <a href="/de/docs/Web/API/console#Outputting_text_to_the_console">Text in der Konsole ausgeben</a>.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#assert", "console.assert()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Initiale Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{Compat("api.Console.assert")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="https://console.spec.whatwg.org/#assert-condition-data">WHATWG Console Standard: console.assert</a></li>
+ <li><a href="https://docs.microsoft.com/de-de/microsoft-edge/devtools-guide/console/console-api">Console API - Microsoft Edge Development | Microsoft Docs</a></li>
+ <li><a href="https://developers.google.com/web/tools/chrome-devtools/console/api#assert">Chrome Developer Tools: Using the Console</a></li>
+</ul>
diff --git a/files/de/web/api/console/clear/index.html b/files/de/web/api/console/clear/index.html
new file mode 100644
index 0000000000..3ff370c14b
--- /dev/null
+++ b/files/de/web/api/console/clear/index.html
@@ -0,0 +1,49 @@
+---
+title: Console.clear()
+slug: Web/API/Console/clear
+translation_of: Web/API/Console/clear
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Leert die Konsole.</p>
+
+<p>Der Inhalt der Konsole wird mit einer informativen Nachricht wie "Konsole wurde geleert" ersetzt.</p>
+
+<p>Beachten Sie, dass der Aufruf <code>console.clear()</code> in Google Chrome keine Wirkung hat, wenn der Benutzer in den <a href="https://developers.google.com/web/tools/chrome-devtools/console/#preserve-log">Einstellungen</a> die Option "Log bei Navigation nicht leeren" aktiviert hat.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">console.clear();
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#clear", "console.clear()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Initiale Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("api.Console.clear")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="https://docs.microsoft.com/de-de/microsoft-edge/devtools-guide/console/console-api">Console API - Microsoft Edge Development | Microsoft Docs</a></li>
+ <li><a href="https://developers.google.com/web/tools/chrome-devtools/console/#working_with_the_console_history">Chrome Developer Tools: Using the Console</a></li>
+</ul>
diff --git a/files/de/web/api/console/count/index.html b/files/de/web/api/console/count/index.html
new file mode 100644
index 0000000000..4fdcf42299
--- /dev/null
+++ b/files/de/web/api/console/count/index.html
@@ -0,0 +1,103 @@
+---
+title: Console.count()
+slug: Web/API/Console/count
+translation_of: Web/API/Console/count
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p><span class="seoSummary">Die Methode <code>count()</code> protokolliert, wie oft sie an einer Stelle oder mit einem Bezeichner aufgerufen wurde. Sie nimmt ein optionales Argument <code>label</code> entgegen.</span></p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">console.count(<var>[label]</var>);
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>label</code> {{optional_inline}}</dt>
+ <dd>Ein {{jsxref("String")}}. Wenn angegeben, gibt <code>count()</code> die Anzahl der Aufrufe mit diesem Label aus, ansonsten mit der Bezeichnung "default".</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Nehmen wir folgenden Code als Beispiel:</p>
+
+<pre class="brush: js">let user = "";
+
+function greet() {
+  console.count();
+  return "hi " + user;
+}
+
+user = "bob";
+greet();
+user = "alice";
+greet();
+greet();
+console.count();</pre>
+
+<p>Sieht die Ausgabe in der Konsole in etwa so aus:</p>
+
+<pre class="eval">"default: 1"
+"default: 2"
+"default: 3"
+"default: 4"
+</pre>
+
+<p>Das Label wird als <code>default</code> angezeigt, da kein explizites Label angegeben wurde.</p>
+
+<p>Wenn wir die Variable <code>user</code> als das Argument <code>label</code> an den ersten Aufruf von <code>count()</code> übergeben und den String "alice" an den zweiten:</p>
+
+<pre class="brush: js">let user = "";
+
+function greet() {
+  console.count(user);
+  return "hi " + user;
+}
+
+user = "bob";
+greet();
+user = "alice";
+greet();
+greet();
+console.count("alice");</pre>
+
+<p>Sieht die Ausgabe so aus:</p>
+
+<pre>"bob: 1"
+"alice: 1"
+"alice: 2"
+"alice: 3"</pre>
+
+<p>Wir führen jetzt separate Zählungen ein, die nur auf dem Wert von <code>label</code> basieren.</p>
+
+<dl>
+</dl>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#count", "console.count()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Initiale Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("api.Console.count")}}</p>
diff --git a/files/de/web/api/console/debug/index.html b/files/de/web/api/console/debug/index.html
new file mode 100644
index 0000000000..15d8e258fc
--- /dev/null
+++ b/files/de/web/api/console/debug/index.html
@@ -0,0 +1,63 @@
+---
+title: Console.debug()
+slug: Web/API/Console/debug
+translation_of: Web/API/Console/debug
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p><span class="seoSummary">Die Methode <strong><code>debug()</code></strong> gibt eine Nachricht der Protokollstufe "debug" auf der Konsole aus. Die Nachricht wird dem Benutzer nur angezeigt, wenn die Konsole für die Anzeige von Debug-Ausgaben konfiguriert ist.</span></p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">console.debug(<var>obj1</var> [, <var>obj2</var>, ..., <var>objN</var>]);
+console.debug(<var>msg</var> [, <var>subst1</var>, ..., <var>substN</var>]);
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>obj1</code> ... <code>objN</code> {{optional_inline}}</dt>
+ <dd>Eine Liste der auszugebenden JavaScript-Objekte. Die String-Darstellungen jedes dieser Objekte werden in der angegebenen Reihenfolge zusammengefügt und an die Konsole ausgegeben.</dd>
+ <dt><code>msg</code> {{optional_inline}}</dt>
+ <dd>Ein JavaScript String, die keine oder mehrere Stringersetzungen enthält, die in aufeinanderfolgender Reihenfolge durch <code>subst1</code> bis <code>substN</code> ersetzt werden.</dd>
+ <dt><code>subst1</code> ... <code>substN</code> {{optional_inline}}</dt>
+ <dd>JavaScript-Objekte, mit denen Stringersetzungen in <code>msg</code> ersetzt werden sollen. Dies gibt Ihnen zusätzliche Kontrolle über das Format der Ausgabe. Eine Beschreibung der Funktionsweise von Ersetzungen finden Sie unter {{SectionOnPage("/de-de/docs/Web/API/Console", "Verwenden von Ersatzstrings")}}.</dd>
+</dl>
+
+<p>Weitere Informationen finden Sie unter <a href="/de/docs/Web/API/console#Outputting_text_to_the_console">Text in der Konsole ausgeben</a> in der Dokumentation des Objekts {{domxref("console")}}.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#debug", "console.debug()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Initiale definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("api.Console.debug")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="https://docs.microsoft.com/de-de/microsoft-edge/devtools-guide/console/console-api">Console API - Microsoft Edge Development | Microsoft Docs</a></li>
+ <li><a href="https://developers.google.com/web/tools/chrome-devtools/console/api#debug">Chrome Developer Tools: Using the Console</a></li>
+</ul>
diff --git a/files/de/web/api/console/dir/index.html b/files/de/web/api/console/dir/index.html
new file mode 100644
index 0000000000..bd54b88c46
--- /dev/null
+++ b/files/de/web/api/console/dir/index.html
@@ -0,0 +1,56 @@
+---
+title: Console.dir()
+slug: Web/API/Console/dir
+translation_of: Web/API/Console/dir
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Zeigt eine interaktive Liste der Eigenschaften des angegebenen JavaScript-Objekts an. Die Ausgabe wird als hierarchische Liste mit Aufklapp-Dreiecken angezeigt, in denen Sie den Inhalt untergeordneter Objekte sehen können.</p>
+
+<p>Mit anderen Worten: Mit <code>console.dir()</code> können Sie alle Eigenschaften eines angegebenen JavaScript-Objekts in der Konsole anzeigen und problemlos abrufen.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<p><img alt="console-dir.png" class="default internal" src="/@api/deki/files/6081/=console-dir.png"></p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">console.dir(<var>object</var>);
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>object</code></dt>
+ <dd>Ein JavaScript-Objekt, dessen Eigenschaften angezeigt werden sollen.</dd>
+</dl>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#consoledirobject", "console.dir()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Initiale Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{Compat("api.Console.dir")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="https://docs.microsoft.com/de-de/microsoft-edge/devtools-guide/console/console-api">Console API - Microsoft Edge Development | Microsoft Docs</a></li>
+ <li><a href="https://developers.google.com/web/tools/chrome-devtools/console/api#dir">Chrome Console API reference</a></li>
+</ul>
diff --git a/files/de/web/api/console/index.html b/files/de/web/api/console/index.html
new file mode 100644
index 0000000000..4f045815f1
--- /dev/null
+++ b/files/de/web/api/console/index.html
@@ -0,0 +1,296 @@
+---
+title: Console
+slug: Web/API/Console
+tags:
+  - API
+  - DOM
+  - Debugging
+  - Reference
+  - web console
+translation_of: Web/API/Console
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Das <strong><code>Console</code></strong> Objekt bietet Zurgiff auf die Debugging-Konsole des Browsers (z. B. die <a href="/de/docs/Tools/Web_Console">Web-Konsole</a> in Firefox). Die Einzelheiten der Funktionsweise sind von Browser zu Browser unterschiedlich, es gibt jedoch <em>de facto</em> eine Reihe von Funktionen, die normalerweise bereitgestellt werden.</p>
+
+<p>Auf das <code>Console</code> Objekt kann von jedem globalen Objekt aus zugegriffen werden. {{domxref("Window")}} im Browser und {{domxref("WorkerGlobalScope")}} als spezifische Varianten in Workern über die Property-Konsole. Es wird unter {{domxref("Window.console")}} zur Verfügung gestellt und kann als einfache Konsole referenziert werden. Zum Beispiel:</p>
+
+<pre class="brush: js">console.log("Failed to open the specified link")</pre>
+
+<p>Diese Seite dokumentiert die {{anch("Methods", "Methoden")}}, die für das <code>Console</code> Objekt verfügbar sind und enthält einige {{anch("Usage", "Anwendungsbeispiele")}}.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Methoden">Methoden</h2>
+
+<dl>
+ <dt>{{domxref("Console.assert()")}}</dt>
+ <dd>Protokolliert eine Nachricht und eine Stack-Ablaufverfolgung in der Konsole, wenn das erste Argument <code>false</code> ist.</dd>
+ <dt>{{domxref("Console.clear()")}}</dt>
+ <dd>Leert die Konsole.</dd>
+ <dt>{{domxref("Console.count()")}}</dt>
+ <dd>Protokolliert, wie oft diese Zeile mit dem angegebenen Label aufgerufen wurde.</dd>
+ <dt>{{domxref("Console.countReset()")}}</dt>
+ <dd>Setzt den Wert des Zählers mit der angegebenen Bezeichnung zurück.</dd>
+ <dt>{{domxref("Console.debug()")}}</dt>
+ <dd>Gibt eine Nachricht mit der Protokollebene <code>"debug"</code> in der Konsole aus.
+ <div class="note"><strong>Hinweis:</strong> Ab Chromium 58 wird diese Methode nur in Chromium-Browserkonsolen angezeigt, wenn die Stufe "Verbose" ausgewählt ist.</div>
+ </dd>
+ <dt>{{domxref("Console.dir()")}}</dt>
+ <dd>Zeigt eine interaktive Auflistung der Eigenschaften eines angegebenen JavaScript-Objekts an. In dieser Auflistung können Sie Offenlegungsdreiecke verwenden, um den Inhalt untergeordneter Objekte zu untersuchen.</dd>
+ <dt>{{domxref("Console.dirxml()")}}</dt>
+ <dd>
+ <p>Zeigt eine XML/HTML-Elementdarstellung des angegebenen Objekts an, falls möglich, oder die JavaScript-Objektansicht, falls dies nicht möglich ist.</p>
+ </dd>
+ <dt>{{domxref("Console.error()")}}</dt>
+ <dd>Gibt eine Fehlermeldung aus. Sie können <a href="/de/docs/Web/API/console#Using_string_substitutions">Stringersetzung</a> und zusätzliche Argumente mit dieser Methode verwenden.</dd>
+ <dt>{{domxref("Console.exception()")}} {{Non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Ein Alias für <code>error()</code>.</dd>
+ <dt>{{domxref("Console.group()")}}</dt>
+ <dd>Erstellt eine neue Inline-<a href="/de/docs/Web/API/console#Using_groups_in_the_console">Gruppe</a>, in der alle folgenden Ausgaben von einer anderen Ebene eingerückt werden. Um eine Ebene wieder zu verlassen, rufen Sie <code>groupEnd()</code> auf.</dd>
+ <dt>{{domxref("Console.groupCollapsed()")}}</dt>
+ <dd>Erstellt eine neue Inline-<a href="/de/docs/Web/API/console#Using_groups_in_the_console">Gruppe</a>, in der alle folgenden Ausgaben von einer anderen Ebene eingerückt werden. Anders als bei <code>group()</code> beginnt die Inline-Gruppe eingeklappt und muss über einen Button erst aufgeklappt werden. Um eine Ebene wieder zu verlassen, rufen Sie <code>groupEnd()</code> auf.</dd>
+ <dt>{{domxref("Console.groupEnd()")}}</dt>
+ <dd>Verlässt die aktuelle Inline-<a href="/de/docs/Web/API/console#Using_groups_in_the_console">Gruppe</a>.</dd>
+ <dt>{{domxref("Console.info()")}}</dt>
+ <dd>Informative Protokollierung von Informationen. Sie können <a href="/de/docs/Web/API/console#Using_string_substitutions">Stringersetzung</a> und zusätzliche Argumente mit dieser Methode verwenden.</dd>
+ <dt>{{domxref("Console.log()")}}</dt>
+ <dd>Zur allgemeinen Ausgabe von Protokollinformationen. Sie können <a href="/de/docs/Web/API/console#Using_string_substitutions">Stringersetzung</a> und zusätzliche Argumente mit dieser Methode verwenden.</dd>
+ <dt>{{domxref("Console.profile()")}} {{Non-standard_inline}}</dt>
+ <dd>Startet den integrierten Profiler des Browsers (z. B. das <a href="/de/docs/Tools/Performance">Firefox-Leistungstool</a>). Sie können einen optionalen Namen für das Profil angeben.</dd>
+ <dt>{{domxref("Console.profileEnd()")}} {{Non-standard_inline}}</dt>
+ <dd>Stoppt den Profiler. Das resultierende Profil wird im Leistungstool des Browsers angezeigt (z. B. im <a href="/de/docs/Tools/Performance">Firefox-Leistungstool</a>).</dd>
+ <dt>{{domxref("Console.table()")}}</dt>
+ <dd>Zeigt tabellarische Daten als Tabelle an.</dd>
+ <dt>{{domxref("Console.time()")}}</dt>
+ <dd>Startet einen <a href="/de/docs/Web/API/console#Timers">Timer</a> mit einem als Eingabeparameter angegebenen Namen. Auf einer Seite können bis zu 10.000 gleichzeitige Timer ausgeführt werden.</dd>
+ <dt>{{domxref("Console.timeEnd()")}}</dt>
+ <dd>Stoppt den angegebenen <a href="/de/docs/Web/API/console#Timers">Timer</a> und protokolliert die abgelaufene Zeit in Sekunden seit dem Start.</dd>
+ <dt>{{domxref("Console.timeLog()")}}</dt>
+ <dd>Protokolliert den Wert des angegebenen <a href="/de/docs/Web/API/console#Timers">Timers</a> in der Konsole.</dd>
+ <dt>{{domxref("Console.timeStamp()")}} {{Non-standard_inline}}</dt>
+ <dd>Fügt der <a href="https://developer.chrome.com/devtools/docs/timeline">Zeitleiste</a> oder dem <a href="/de/docs/Tools/Performance/Waterfall">Wasserfallwerkzeug</a> des Browsers eine Markierung hinzu.</dd>
+ <dt>{{domxref("Console.trace()")}}</dt>
+ <dd>Gibt eine <a href="/de/docs/Web/API/console#Stack_traces">Stapelablaufverfolgung</a> (stack trace) aus.</dd>
+ <dt>{{domxref("Console.warn()")}}</dt>
+ <dd>Gibt eine Warnmeldung aus. Sie können <a href="/de/docs/Web/API/console#Using_string_substitutions">Stringersetzung</a> und zusätzliche Argumente mit dieser Methode verwenden.</dd>
+</dl>
+
+<h2 id="Usage" name="Usage">Benutzung</h2>
+
+<h3 id="Outputting_text_to_the_console" name="Outputting_text_to_the_console">Text auf der Konsole ausgeben</h3>
+
+<p>Die am häufigsten verwendete Funktion der Konsole ist das Protokollieren von Text und anderen Daten. Sie können vier Ausgabekategorien erstellen, die Sie mit den Methoden {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}} und {{domxref("console.error()")}} generieren können. Jedes dieser Ergebnisse hat eine unterschiedliche Ausgabe im Protokoll. Sie können die von Ihrem Browser bereitgestellten Filtersteuerelemente verwenden, um nur die Arten von Ausgaben anzuzeigen, die Sie interessieren.</p>
+
+<p>Es gibt zwei Möglichkeiten, jede der Ausgabemethoden zu verwenden. Sie können einfach eine Liste von Objekten übergeben, deren Stringdarstellungen zu einem String verkettet werden, dann an die Konsole ausgegeben werden, oder Sie können einen String übergeben, der keine oder mehrere Ersatzstrings enthält, gefolgt von einer Liste von Objekten, um diese zu ersetzen.</p>
+
+<h4 id="Ein_einzelnes_Objekt_ausgeben">Ein einzelnes Objekt ausgeben</h4>
+
+<p>Die einfachsten Methoden zur Verwendung der Protokollierungsmethoden sind die Ausgabe eines einzelnen Objekts:</p>
+
+<pre class="brush: js">var someObject = { str: "Some text", id: 5 };
+console.log(someObject);
+</pre>
+
+<p>Die Ausgabe sieht ungefähr so aus:</p>
+
+<pre>[09:27:13.475] ({str:"Some text", id:5})</pre>
+
+<h4 id="Mehrere_Objekte_ausgeben">Mehrere Objekte ausgeben</h4>
+
+<p>Sie können auch mehrere Objekte ausgeben, indem Sie sie beim Aufrufen der Protokollierungsmethode einfach nacheinander auflisten:</p>
+
+<pre class="brush: js">var car = "Dodge Charger";
+var someObject = { str: "Some text", id: 5 };
+console.info("My first car was a", car, ". The object is:", someObject);</pre>
+
+<p>Diese Ausgabe sieht folgendermaßen aus:</p>
+
+<pre>[09:28:22.711] My first car was a Dodge Charger . The object is: ({str:"Some text", id:5})
+</pre>
+
+<h4 id="String-Ersetzungen_verwenden">String-Ersetzungen verwenden</h4>
+
+<p>Wenn Sie einen String an eine der Methoden des Konsolenobjekts übergeben, die einen String akzeptiert (z. B. <code>log()</code>), können Sie folgende Ersatzstrings verwenden:</p>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <td class="header">Ersatzstring</td>
+   <td class="header">Beschreibung</td>
+  </tr>
+  <tr>
+   <td>%o ode %O</td>
+   <td>Gibt ein JavaScript-Objekt aus. Durch Klicken auf den Objektnamen werden weitere Informationen dazu im Inspektor geöffnet.</td>
+  </tr>
+  <tr>
+   <td>%d oder %i</td>
+   <td>
+    <p>Gibt eine Ganzzahl aus. Zahlenformatierung wird unterstützt, z. B. gibt <code>console.log("Foo %.2d", 1.1)</code> die Zahl als zwei signifikante Ziffern mit einer führenden 0 aus: <code>Foo 01</code></p>
+   </td>
+  </tr>
+  <tr>
+   <td>%s</td>
+   <td>Gibt einen String aus.</td>
+  </tr>
+  <tr>
+   <td>%f</td>
+   <td>
+    <p>Gibt einen Gleitkommawert aus. Die Formatierung wird unterstützt, zum Beispiel gibt <code>console.log("Foo %.2f", 1.1)</code> die Zahl mit 2 Dezimalstellen aus: <code>Foo 1.10</code></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Die Präzisionsformatierung funktioniert in Chrome nicht</p>
+</div>
+
+<p>Jedes dieser Elemente zieht das nächste Argument nach dem Formatstring aus der Parameterliste. Zum Beispiel:</p>
+
+<pre>for (var i=0; i&lt;5; i++) {
+  console.log("Hello, %s. You've called me %d times.", "Bob", i+1);
+}
+</pre>
+
+<p>Die Ausgabe sieht folgendermaßen aus:</p>
+
+<pre>[13:14:13.481] Hello, Bob. You've called me 1 times.
+[13:14:13.483] Hello, Bob. You've called me 2 times.
+[13:14:13.485] Hello, Bob. You've called me 3 times.
+[13:14:13.487] Hello, Bob. You've called me 4 times.
+[13:14:13.488] Hello, Bob. You've called me 5 times.
+</pre>
+
+<h4 id="Konsolenausgaben_stylen">Konsolenausgaben stylen</h4>
+
+<p>Sie können die <code>%c</code> Direktive verwenden, um einen CSS-Stil auf die Konsolenausgabe anzuwenden:</p>
+
+<pre class="brush: js">console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px");</pre>
+
+<div>Der Text vor der Direktive wird nicht beeinflusst. Der Text nach der Direktive wird jedoch mit den CSS-Deklarationen im Parameter formatiert.</div>
+
+<div> </div>
+
+<div><img alt="" src="https://mdn.mozillademos.org/files/12527/CSS-styling.png" style="display: block; margin: 0 auto;"></div>
+
+<div> </div>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Es werden etliche CSS-Eigenschaften von diesem Stil unterstützt. Sie sollten experimentieren und sehen, welche sich als nützlich erweisen.</p>
+</div>
+
+<div> </div>
+
+<div>{{h3_gecko_minversion("Gruppen in der Konsole verwenden", "9.0")}}</div>
+
+<p>Sie können verschachtelte Gruppen verwenden, um Ihre Ausgabe zu organisieren, indem Sie verwandtes Material visuell kombinieren. Um einen neuen verschachtelten Block zu erstellen, rufen Sie <code>console.group()</code> auf. Die Methode <code>console.groupCollapsed()</code> ist ähnlich, erstellt den neuen Block jedoch zusammengeklappt und erfordert die Verwendung einer Schaltfläche zum Öffnen.</p>
+
+<div class="note"><strong>Hinweis:</strong> Minimierte Gruppen werden in Gecko noch nicht unterstützt. Die Methode <code>groupCollapsed()</code> ist zu diesem Zeitpunkt die gleiche wie <code>group()</code>.</div>
+
+<p>Um die aktuelle Gruppe zu verlassen, rufen Sie einfach <code>console.groupEnd()</code> auf. Zum Beispiel mit diesem Code:</p>
+
+<pre class="brush: js">console.log("This is the outer level");
+console.group();
+console.log("Level 2");
+console.group();
+console.log("Level 3");
+console.warn("More of level 3");
+console.groupEnd();
+console.log("Back to level 2");
+console.groupEnd();
+console.debug("Back to the outer level");
+</pre>
+
+<p>Die Ausgabe sieht folgendermaßen aus:</p>
+
+<p><img alt="nesting.png" class="default internal" src="/@api/deki/files/6082/=nesting.png"></p>
+
+<div>{{h3_gecko_minversion("Timer", "10.0")}}</div>
+
+<p>Um die Dauer einer bestimmten Operation zu berechnen, hat Gecko 10 die Unterstützung von Timern im <code>console</code>-Objekt eingeführt. Um einen Timer zu starten, rufen Sie die Methode <code>console.time</code><code>()</code> auf und geben Sie ihm als einzigen Parameter einen Namen. Um den Timer zu stoppen und die verstrichene Zeit in Millisekunden abzurufen, rufen Sie einfach die Methode <code>console.timeEnd()</code> auf und übergeben den Namen des Timers erneut als Parameter. Auf einer Seite können bis zu 10.000 Timer gleichzeitig ausgeführt werden.</p>
+
+<p>Zum Beispiel mit diesem Code:</p>
+
+<pre class="brush: js">console.time("answer time");
+alert("Click to continue");
+console.timeLog("answer time");
+alert("Do a bunch of other stuff...");
+console.timeEnd("answer time");
+</pre>
+
+<p>Protokolliert die Zeit, die der Benutzer zum Deaktivieren des Alert-Felds benötigt, schreibt die benötigte Zeit in der Konsole, wartet, bis der Benutzer die zweite Alert-Nachricht wegklickt und protokolliert dann die Endzeit in der Konsole:</p>
+
+<p><img alt="timerresult.png" class="default internal" src="https://mdn.mozillademos.org/files/16113/console-timeLog.png" style="border: 1px solid black; height: 102px; margin: 0 auto; width: 318px;"></p>
+
+<p>Beachten Sie, dass der Name des Timers sowohl beim Start als auch beim Stoppen des Timers angezeigt wird.</p>
+
+<div class="blockIndicator note">
+<p><strong>Hinweis:</strong> Es ist wichtig zu beachten, dass der Timer die Gesamtzeit für die Transaktion angibt, wenn Sie das Timing für den Netzwerkverkehr protokollieren. Die im Netzwerkbereich aufgeführte Zeit ist nur die Zeit, die der Header benötigt. Wenn Sie die Antwort-Body-Protokollierung aktiviert haben, sollte die angegebene Zeit für den Antwortheader und den Nachrichtentext der Anzeige in der Konsolenausgabe entsprechen.</p>
+</div>
+
+<h3 id="Stapelverfolgung_(Strack_Traces)">Stapelverfolgung (Strack Traces)</h3>
+
+<p>Das Konsolenobjekt unterstützt auch die Ausgabe eines Stack-Trace. Daraufhin wird der Anrufpfad angezeigt, mit dem Sie den Punkt erreichen, an dem Sie {{domxref("console.trace()")}} aufrufen. Gegebener Code wie folgt:</p>
+
+<pre class="brush: js">function foo() {
+  function bar() {
+    console.trace();
+  }
+  bar();
+}
+
+foo();
+</pre>
+
+<p>Die Ausgabe in der Konsole sieht ungefähr so aus:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7167/api-trace2.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Console API')}}</td>
+   <td>{{Spec2('Console API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("api.Console")}}</p>
+
+<h2 id="Hinweise">Hinweise</h2>
+
+<ul>
+ <li>Wenn in Firefox auf einer Seite ein <code>console</code>-Objekt definiert ist, wird das in Firefox integrierte Objekt überschrieben.</li>
+ <li>Vor {{Gecko("12.0")}} funktionieren die Methoden des <code>console</code>-Objekts nur, wenn die Webkonsole geöffnet ist. Beginnend mit {{Gecko("12.0")}} wird die Ausgabe zwischengespeichert, bis die Webkonsole geöffnet wird. Anschließend wird sie angezeigt.</li>
+ <li>Es ist erwähnenswert, dass das in Firefox integrierte <code>Console</code>-Objekt mit dem von <a href="http://getfirebug.com/">Firebug</a> bereitgestellten kompatibel ist.</li>
+</ul>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Tools" title="Tools">Tools</a></li>
+ <li><a href="/de/docs/Tools/Web_Console" title="Web Console">Web-Konsole</a> — Wie die Web-Konsole Konsolen-API-Aufrufe in Firefox verarbeitet</li>
+ <li><a href="/de/docs/Tools/Remote_Debugging">Remote-Debugging</a> — Anzeigen der Konsolenausgabe, wenn das Debugging-Ziel ein mobiles Gerät ist</li>
+ <li><a href="/de/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging">Protokollierung der Konsole auf dem Gerät</a> — So protokollieren Sie auf Firefox OS-Geräten</li>
+</ul>
+
+<h3 id="Andere_Implementierungen">Andere Implementierungen</h3>
+
+<ul>
+ <li><a href="https://developers.google.com/web/tools/chrome-devtools/console/api">Google Chrome DevTools</a></li>
+ <li><a href="http://msdn.microsoft.com/en-us/library/hh772173(v=vs.85).aspx">Internet Explorer</a></li>
+ <li><a href="https://support.apple.com/de-de/guide/safari-developer/log-messages-with-the-console-dev4e7dedc90/mac">Safari</a></li>
+</ul>
diff --git a/files/de/web/api/console/log/index.html b/files/de/web/api/console/log/index.html
new file mode 100644
index 0000000000..3f26aec9c3
--- /dev/null
+++ b/files/de/web/api/console/log/index.html
@@ -0,0 +1,180 @@
+---
+title: Console.log()
+slug: Web/API/Console/log
+tags:
+  - API
+  - Debugging
+  - NeedsBrowserCompatibility
+  - Web Entwicklung
+  - Web Konsole
+  - console
+  - console.dir
+  - console.log
+translation_of: Web/API/Console/log
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Gibt eine Nachricht auf der Web-Konsole aus.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">console.log(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.log(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
+</pre>
+
+<h2 id="Parameter">Parameter</h2>
+
+<dl>
+ <dt><code>obj1</code> ... <code>objN</code></dt>
+ <dd>Eine Liste von auszugebenden JavaScript-Objekten. Die Zeichenfolgedarstellungen der Objekte werden in der angegebenen Reihenfolge aneinandergehängt und ausgegeben.</dd>
+ <dt><code>msg</code></dt>
+ <dd>Eine JavaScript-Zeichenfolge, die Null oder mehr Ersatzzeichefolgen enthält.</dd>
+ <dt><code>subst1</code> ... <code>substN</code></dt>
+ <dd>JavaScript-Objekte durch die die Ersatzzeichenfolgen in <code>msg</code> ersetzt werden sollen. Dies gibt Ihnen zusätzliche Kontrolle über die Formatierung der Ausgabe.</dd>
+</dl>
+
+<p>Weitere Details finden Sie im Abschnitt <a href="https://developer.mozilla.org/de/docs/Web/API/Console#Outputting_text_to_the_console">Outputting text to the console</a> in der Dokumentation zu {{domxref("console")}}.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#log", "console.log()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Erste Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Ersatzzeichenfolgen</td>
+   <td>{{CompatVersionUnknown}}<br>
+    {{CompatChrome(28)}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("9.0")}}</td>
+   <td>10<sup>[2]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Verfügbar in Workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("38.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Ersatzzeichenfolgen</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("9.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Verfügbar in Workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("38.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Weisst man <code>%d</code> einen negativen Wert zu, wird dieser zur nächsten negative Ganzzahl abgerundet; z. B. wird -0.1 zu -1.</p>
+
+<p>[2] <code>%c</code> wird nicht unterstützt; <code>%d</code> wird als 0 angezeigt, falls der Wert keine Nummer ist.</p>
+
+<h2 id="Unterschied_zu_console.dir()">Unterschied zu console.dir()</h2>
+
+<p>In Firefox generieren beide Kommandos dieselbe Ausgabe, wenn als Parameter ein DOM-Element mitgegeben wird: Man erhält in beiden Fällen eine JSON-artige Baumstruktur.</p>
+
+<p>In Chrome besteht aber bei gleicher Eingabe ein nützlicher Unterschied:</p>
+
+<p><img alt="" src="https://i.imgur.com/DozDcYR.png"></p>
+
+<p>Bemerkung:</p>
+
+<ul>
+ <li><code>console.log</code> gibt das Element als HTML-artige Baumstruktur aus</li>
+ <li><code>console.dir</code> gibt das Element als JSON-artige Baumstruktur aus</li>
+</ul>
+
+<p>Mit <code>console.log</code> werden DOM-Elemente also speziell behandelt. Bei <code>console.dir</code> ist dies nicht der Fall. Dies ist oft dann nützlich, wenn man die vollständige Darstellung des DOM-JS-Objekts ansehen möchte.</p>
+
+<p>Mehr Informationen dazu finden Sie unter <a href="https://developers.google.com/chrome-developer-tools/docs/console-api#consoledirobject">Chrome Console API reference</a>.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+ <li><a href="http://getfirebug.com/wiki/index.php/Console_API">Firebug wiki: Console API</a> - FireBug unterstützt noch weitere Features in seiner console.log()-Implementation, wie z. B. <a href="http://www.softwareishard.com/blog/firebug/firebug-tip-styled-logging/">styled logging</a>.</li>
+ <li><a href="http://nodejs.org/docs/latest/api/console.html#console_console_log_data">NodeJS: Console API</a></li>
+</ul>
diff --git a/files/de/web/api/console/table/index.html b/files/de/web/api/console/table/index.html
new file mode 100644
index 0000000000..c641bf0c6f
--- /dev/null
+++ b/files/de/web/api/console/table/index.html
@@ -0,0 +1,214 @@
+---
+title: Console.table()
+slug: Web/API/Console/table
+tags:
+  - Konsole
+  - Tabelle
+  - log
+  - tabellarisch
+translation_of: Web/API/Console/table
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p><span class="seoSummary">Zeigt tabellarische Daten als Tabelle im Log an.</span></p>
+
+<p>Diese Funktion benötigt einen Parameter <code>data</code>, welcher ein Array oder ein Objekt sein muss und außerdem einen optionalen Parameter <code>columns</code>.</p>
+
+<p>Die Funktion zeigt <code>data</code> als Tabelle im Log an. Jedes Element im Array (bzw. jede zählbare Eigenschaft im <code>data</code> Objekt) wird als Tabellenzeile angezeigt.</p>
+
+<p>Die erste Tabellenspalte wird mit <code>(index)</code> bezeichnet. Wenn <code>data</code> ein Array ist, dann erscheinen in dieser Spalte die Arrayindizes. Wenn <code>data</code> ein Objekt ist, dann erscheinen in dieser Spalte die Eigenschaftsnamen. Beachten Sie, dass (bei Firefox) <code>console.table</code> maximal 1000 Zeilen anzeigt. (Die erste Zeile ist die Überschriftszeile mit der Bezeichnung index).</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h3 id="Sammlungen_(Collections)_mit_primitiven_Datentypen">Sammlungen (Collections) mit primitiven Datentypen</h3>
+
+<p>Der <code>data</code> Parameter kann ein Array oder ein Objekt sein.</p>
+
+<pre class="brush: js">// Ein String-Array
+
+console.table(["apples", "oranges", "bananas"]);</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8567/console-table-array.png"></p>
+
+<pre class="brush: js">// Ein Objekt mit Eigenschaften, die Strings sind
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var me = new Person("John", "Smith");
+
+console.table(me);</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8559/console-table-simple-object.png"></p>
+
+<h3 id="Sammlungen_(Collections)_mit_zusammengesetzen_Typen">Sammlungen (Collections) mit zusammengesetzen Typen</h3>
+
+<p>Wenn die Arrayinhalte oder die Objekteigenschaften selbt Arrays oder Objekte sind, dann werden deren Elemente einzeln in jeder Spalte dargestellt:</p>
+
+<pre class="brush: js">// Ein Array, welches Arrays enthält
+
+var people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]]
+console.table(people);</pre>
+
+<p><img alt="Table displaying array of arrays" src="https://mdn.mozillademos.org/files/8561/console-table-array-of-array.png"></p>
+
+<pre class="brush: js">// Ein Array mit Objekten
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var john = new Person("John", "Smith");
+var jane = new Person("Jane", "Doe");
+var emily = new Person("Emily", "Jones");
+
+console.table([john, jane, emily]);</pre>
+
+<p>Beachten Sie: Wenn das Array Objekte enthält, dann werden die Spalten mit dem Eigenschaftsnamen beschriftet.</p>
+
+<p><img alt="Table displaying array of objects" src="https://mdn.mozillademos.org/files/8563/console-table-array-of-objects.png"></p>
+
+<pre class="brush: js">// Ein Objekt mit Eigenschaften, welche wiederum ein
+// Objekt sind
+
+var family = {};
+
+family.mother = new Person("Jane", "Smith");
+family.father = new Person("John", "Smith");
+family.daughter = new Person("Emily", "Smith");
+
+console.table(family);</pre>
+
+<p><img alt="Table displaying object of objects" src="https://mdn.mozillademos.org/files/8565/console-table-object-of-objects.png"></p>
+
+<h3 id="Auswahl_der_anzuzeigenden_Spalten">Auswahl der anzuzeigenden Spalten</h3>
+
+<p>Nromalerweise zeigt <code>console.table()</code> alle Elemente in jeder Zeile an. Sie können aber den optionalen Parameter <code>columns</code> verwenden, um nur bestimmte Spalten anzuzeigen:</p>
+
+<pre class="brush: js">// Ein Array mit Objekten, nur der "firstName"
+// wird angezeigt.
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var john = new Person("John", "Smith");
+var jane = new Person("Jane", "Doe");
+var emily = new Person("Emily", "Jones");
+
+console.table([john, jane, emily], ["firstName"]);</pre>
+
+<p><img alt="Table displaying array of objects with filtered output" src="https://mdn.mozillademos.org/files/8569/console-table-array-of-objects-firstName-only.png"></p>
+
+<h3 id="Tabelle_sortieren">Tabelle sortieren</h3>
+
+<p>Sie können die Tabelle durch einen Klick auf den jeweiligen Spaltenkopf umsortieren.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">console.table(data [, <em>columns</em>]);
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>data</code></dt>
+ <dd>Die anzuzeigenden Daten. Diese müssen ein Array oder ein Objekt sein.</dd>
+ <dt><code>columns</code></dt>
+ <dd>Ein Array mit den anzuzeigenden Spalten.</dd>
+</dl>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#table", "console.table()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("34.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("38.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("34.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("38.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/de/web/api/console/time/index.html b/files/de/web/api/console/time/index.html
new file mode 100644
index 0000000000..850c459e99
--- /dev/null
+++ b/files/de/web/api/console/time/index.html
@@ -0,0 +1,56 @@
+---
+title: Console.time()
+slug: Web/API/Console/time
+translation_of: Web/API/Console/time
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Startet einen Timer, den man benutzen kann, um zu überprüfen wie lange eine bestimmte Operation. Man kann jedem Timer einen einzigartigen Namen geben und kann bis zu 10000 Timer gleichzeitig auf einer Seite laufen lassen. Wenn man {{domxref("console.timeEnd()")}} mit dem selben Namen aufruft, gibt der Browser die Zeit in Millisekunden zurück, die seit dem Starten des Timers verstrichen ist.</p>
+
+<p>Siehe auch <a href="/en-US/docs/Web/API/console#Timers">Timer</a> in der {{domxref("console")}} Dokumentation für weitere Details und Beispiele.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">console.time(<em>Bezeichnung</em>);
+</pre>
+
+<h2 id="Parameter">Parameter</h2>
+
+<dl>
+ <dt><code>Bezeichnung</code></dt>
+ <dd>Der Name des neuen Timers. Dieser wird den Timer identifizieren; Der selbe Name sollte beim aufrufen von {{domxref("console.timeEnd()")}} genutzt werden, um den Timer zu stoppen und das Ergebnis in die Konsole zu drucken.</dd>
+</dl>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#time", "console.time()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Console.time")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Console.timeEnd()")}}</li>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+</ul>
diff --git a/files/de/web/api/console/timeend/index.html b/files/de/web/api/console/timeend/index.html
new file mode 100644
index 0000000000..65c6242a83
--- /dev/null
+++ b/files/de/web/api/console/timeend/index.html
@@ -0,0 +1,57 @@
+---
+title: Console.timeEnd()
+slug: Web/API/Console/timeEnd
+translation_of: Web/API/Console/timeEnd
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Stopt einen Timer, der zuvor mit {{domxref("console.time()")}} gestartet wurde.</p>
+
+<p>Siehe auch <a href="/en-US/docs/Web/API/console#Timers">Timer</a> in der Dokumentation für mehr Details und Beispiele</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">console.timeEnd(<em>Bezeichnung</em>);
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>Bezeichnung</code></dt>
+ <dd>Der Name des zu stoppenden Timers. Nachdem der Timer gestoppt wurde, wird die verstrichene Zeit automatisch in der <a href="/en-US/docs/Tools/Web_Console">Web Konsole</a> ausgegeben.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#timeend", "console.timeEnd()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.Console.timeEnd")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+</ul>
diff --git a/files/de/web/api/console/warn/index.html b/files/de/web/api/console/warn/index.html
new file mode 100644
index 0000000000..a481fda12b
--- /dev/null
+++ b/files/de/web/api/console/warn/index.html
@@ -0,0 +1,147 @@
+---
+title: Console.warn()
+slug: Web/API/Console/warn
+translation_of: Web/API/Console/warn
+---
+<div>{{APIRef("Console API")}}{{non-standard_header}}</div>
+
+<p>Ausgabe einer Warnmeldung in der Web-Konsole.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<p>{{Note("In Firefox haben Warnungen in der Web-Console ein kleines Ausrufzeichen Symbol neben dem Meldungstext.")}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">console.warn(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.warn(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
+</pre>
+
+<h2 id="Parameter">Parameter</h2>
+
+<dl>
+ <dt><code>obj1</code> ... <code>objN</code></dt>
+ <dd>Eine Liste von JavaScript Objecten, die ausgegeben werden sollen. Die String-Darstellung jedes einzelnen Objekts wird in der angegebenen Reihenfolge aneinander gehangen und ausgegeben.</dd>
+ <dt><code>msg</code></dt>
+ <dd>Ein JavaScript String der keinen oder mehrere Platzhalter-Strings enthält.</dd>
+ <dt><code>subst1</code> ... <code>substN</code></dt>
+ <dd>JavaScript Objekte, die in die Platzhalter-Strings in <code>msg</code> eingesetzt werden. Dadurch kann das Ausgabeformat der Meldung zusätzlich beeinflusst werden.</dd>
+</dl>
+
+<p>Sie <a href="/en-US/docs/Web/API/console#Outputting_text_to_the_console">Textausgabe in der Konsole</a> in der Dokumentation von {{domxref("console")}} für weitere Details.</p>
+
+<h2 id="Spekifikationen">Spekifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#consolewarnobject--object-", "console.warn()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Substitution strings</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("9.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("38.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Substitution strings</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("9.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("38.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+</ul>
diff --git a/files/de/web/api/crypto/index.html b/files/de/web/api/crypto/index.html
new file mode 100644
index 0000000000..0bf9eb23fc
--- /dev/null
+++ b/files/de/web/api/crypto/index.html
@@ -0,0 +1,68 @@
+---
+title: Crypto
+slug: Web/API/Crypto
+tags:
+  - API
+  - Interface
+  - Referenz
+  - Schnittstelle
+  - Web Crypto API
+translation_of: Web/API/Crypto
+---
+<p>{{APIRef("Web Crypto API")}}</p>
+
+<p>Die <code><strong>Crypto</strong></code>-Schnittstelle bietet grundlegende kryptographische Funktionen, die im aktuellen Kontext verfügbar sind. Sie ermöglicht den Zugriff auf kryptographische Primitive wie z.B. einen verschlüsselungstechnisch starken Zufallszahlengenerator.</p>
+
+<p>Ein Objekt mit dieser Schnittstelle ist im Web-Kontext über die Eigenschaft {{domxref("Window.crypto")}} verfügbar.</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<p><em>Diese Schnittstelle implementiert Eigenschaften, die unter {{domxref("RandomSource")}} definiert sind.</em></p>
+
+<dl>
+ <dt>{{domxref("Crypto.subtle")}} {{readOnlyInline}}</dt>
+ <dd>Gibt ein {{domxref("SubtleCrypto")}}-Objekt zurück, das Zugriff auf einfache kryptographische Methoden wie Hash-Funktionen, Signierung, Ver- und Entschlüsselung ermöglicht.</dd>
+ <dt> </dt>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<p><em>Diese Schnittstelle implementiert Methoden, die unter {{domxref("RandomSource")}} beschrieben sind.</em></p>
+
+<dl>
+ <dt>{{domxref("Crypto.getRandomValues()")}}</dt>
+ <dd>Füllt das übergebene {{ jsxref("TypedArray") }} mit kryptographisch sinnvollen Zufallswerten.</dd>
+</dl>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Web Crypto API", "#crypto-interface", "Crypto")}}</td>
+   <td>{{Spec2("Web Crypto API")}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("api.Crypto")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+</ul>
diff --git a/files/de/web/api/css/escape/index.html b/files/de/web/api/css/escape/index.html
new file mode 100644
index 0000000000..904da32560
--- /dev/null
+++ b/files/de/web/api/css/escape/index.html
@@ -0,0 +1,79 @@
+---
+title: CSS.escape()
+slug: Web/API/CSS/escape
+tags:
+  - API
+  - CSS
+  - CSSOM
+  - Méthode
+  - Referenz
+  - Statisch
+  - escape()
+  - maskieren
+translation_of: Web/API/CSS/escape
+---
+<p>{{APIRef("CSSOM")}}{{SeeCompatTable}}</p>
+
+<p>Die statische Methode <code><strong>CSS.escape()</strong></code><strong> </strong>gibt ein {{DOMxRef("CSSOMString")}} zurück, das die maskierte Zeichenfolge des übergebenen String Parameters enthält, hauptsächlich zur Verwendung als Teil eines CSS Selektors.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate"><var>escapedStr</var> = CSS.escape(<var>str</var>);
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><em>str</em></dt>
+ <dd>Die zu maskierende Zeichenfolge {{DOMxRef("CSSOMString")}}.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Grundlegende_Ergebnisse"><span class="tlid-translation translation" lang="de"><span title="">Grundlegende Ergebnisse</span></span></h3>
+
+<pre class="brush: js notranslate">CSS.escape(".foo#bar")        // "\.foo\#bar"
+CSS.escape("()[]{}")          // "\(\)\[\]\\{\\}"
+CSS.escape('--a')             // "--a"
+CSS.escape(0)                 // "\30 ", the Unicode code point of '0' is 30
+CSS.escape('\0')              // "\ufffd", the Unicode REPLACEMENT CHARACTER</pre>
+
+<h3 id="Verwendung_im_Kontext">Verwendung im Kontext</h3>
+
+<p>Um einen String als Teil eines Selektors zu maskieren kann die <code>escape()</code> Methode verwendet werden:</p>
+
+<pre class="brush: js; notranslate">var element = document.querySelector('#' + CSS.escape(id) + ' &gt; img');</pre>
+
+<p>Die <code>escape()</code> Methode kann auch verwendet werden um Strings zu maskieren. Die Maskierung wird dabei auf Zeichen angewendet, die streng genommen nicht maskiert werden müssen.</p>
+
+<pre class="brush: js; notranslate">var element = document.querySelector('a[href="#' + CSS.escape(fragment) + '"]');</pre>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM', '#the-css.escape()-method', 'CSS.escape()')}}</td>
+   <td>{{Spec2('CSSOM')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("api.CSS.escape")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Das {{DOMxRef("CSS")}} Interface das die statischen Methoden beinhaltet.</li>
+ <li><a href="https://github.com/mathiasbynens/CSS.escape/blob/master/css.escape.js">Ein Polyfill für CSS.escape</a></li>
+</ul>
diff --git a/files/de/web/api/css/index.html b/files/de/web/api/css/index.html
new file mode 100644
index 0000000000..fe659bba03
--- /dev/null
+++ b/files/de/web/api/css/index.html
@@ -0,0 +1,90 @@
+---
+title: CSS
+slug: Web/API/CSS
+tags:
+  - API
+  - CSSOM
+  - Interface
+  - NeedsTranslation
+  - Painting
+  - Reference
+  - TopicStub
+translation_of: Web/API/CSS
+---
+<div>{{APIRef("CSSOM")}}</div>
+
+<p>The <code><strong>CSS</strong></code> interface holds useful CSS-related methods. No objects with this interface are implemented: it contains only static methods and is therefore a utilitarian interface.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>The CSS interface is a utility interface and no object of this type can be created: only static properties are defined on it.</em></p>
+
+<h3 id="Static_properties">Static properties</h3>
+
+<dl>
+ <dt>{{DOMxRef("CSS.paintWorklet")}} {{Experimental_Inline}}{{SecureContext_Inline}}</dt>
+ <dd>Provides access to the Worklet responsible for all the classes related to painting.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>The CSS interface is a utility interface and no object of this type can be created: only static methods are defined on it.</em></p>
+
+<h3 id="Static_methods">Static methods</h3>
+
+<p><em>No inherited static methods</em>.</p>
+
+<dl>
+ <dt>{{DOMxRef("CSS.registerProperty()")}}</dt>
+ <dd>Registers {{cssxref('--*', 'custom properties')}}, allowing for property type checking, default values, and properties that do or do not inherit their value.</dd>
+ <dt>{{DOMxRef("CSS.supports()")}}</dt>
+ <dd>Returns a {{JSxRef("Boolean")}} indicating if the pair <em>property-value</em>, or the condition, given in parameter is supported.</dd>
+ <dt>{{DOMxRef("CSS.escape()")}}</dt>
+ <dd>Can be used to escape a string mostly for use as part of a CSS selector.</dd>
+ <dt>{{DOMxRef("CSS.factory_functions", 'CSS factory functions')}}</dt>
+ <dd>Can be used to return a new <code><a href="/en-US/docs/Web/API/CSSUnitValue">CSSUnitValue</a></code> with a value of the parameter number of the units of the name of the factory function method used.</dd>
+ <dd>
+ <pre class="notranslate">CSS.em(3) // CSSUnitValue {value: 3, unit: "em"}</pre>
+ </dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Painting API','#dom-css-paintworklet','paintWorklet')}}</td>
+   <td>{{Spec2('CSS Painting API')}}</td>
+   <td>Adds the <code>paintWorklet</code> static property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM', '#the-css.escape()-method', 'CSS')}}</td>
+   <td>{{Spec2('CSSOM')}}</td>
+   <td>Adds the <code>escape()</code> static method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Conditional', '#the-css-interface', 'CSS')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.CSS", 1)}}</p>
+
+<h2 id="See_Also">See Also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+</ul>
diff --git a/files/de/web/api/css_painting_api/guide/index.html b/files/de/web/api/css_painting_api/guide/index.html
new file mode 100644
index 0000000000..536040de4e
--- /dev/null
+++ b/files/de/web/api/css_painting_api/guide/index.html
@@ -0,0 +1,534 @@
+---
+title: Die CSS Painting API verwenden
+slug: Web/API/CSS_Painting_API/Guide
+translation_of: Web/API/CSS_Painting_API/Guide
+---
+<p>Die CSS Paint API wurde entworfen, um Entwicklern zu ermöglichen, programmatisch Bilder festzulegen, die überall dort verwendet werden können, wo ein CSS Bild aufgerufen werden kann, wie in CSS <code><a href="/en-US/docs/Web/CSS/background-image">background-image</a></code>, <code><a href="/en-US/docs/Web/CSS/border-image-source">border-image</a></code>, <code><a href="/en-US/docs/Web/CSS/mask-image">mask-image</a></code>, etc.</p>
+
+<p>Um programmatisch ein Bild zu erstellen, das von einem CSS stylesheet verwendet wird, müssen wir folgende Schritte abarbeiten:</p>
+
+<ol>
+ <li>Lege ein "paint worklet" mit der <code><a href="/en-US/docs/Web/API/PaintWorklet/registerPaint">registerPaint()</a></code> Funktion fest.</li>
+ <li>Melde das worklet an.</li>
+ <li>Binde mit Include die <code>{{cssxref('paint()','paint()')}}</code> CSS Funktion ein.</li>
+</ol>
+
+<p>Zum besseren Verständnis dieser einzelnen Schritte werden wir eine halbhohe farbliche Markierung wie in folgender Titelzeile erstellen:</p>
+
+<p><img alt="Text reading 'My Cool Header' with a solid yellow background image block on the bottom left two thirds of the header" src="https://mdn.mozillademos.org/files/16774/mycoolheader.png" style="height: 54px; width: 239px;"></p>
+
+<h2 id="CSS_paint_worklet">CSS paint worklet</h2>
+
+<p>In einer externen Skript-Datei nutzen wir die <code><a href="/en-US/docs/Web/API/PaintWorklet/registerPaint">registerPaint()</a></code> Funktion, um unser <a href="/en-US/docs/Web/API/PaintWorklet">CSS Paint worklet</a> zu benennen. Diese benötigt zwei Parameter. Der erste ist der Name, den wir dem worklet geben — diesen Namen werden wir als einen Parameter von der paint() Funktion verwenden, wenn wir das Bild einem Element hinzufügen wollen. Der zweite Parameter ist die Klasse, die die ganze Magie ausführt: die die Kontext-Entscheidungen festlegt und natürlich das Bild, das wir auf unsere Oberfläche malen wollen.</p>
+
+<pre class="brush: js notranslate">registerPaint('headerHighlight', class {
+
+  /*
+       definiere dies, wenn die Alphatransparenz erlaubt ist;
+       alpha ist standardmäßig true; wenn auf false gesetzt, sind
+       alle Farben, die auf der Canvas genutzt werden, opak
+    */
+  static get contextOptions() {
+           return { alpha: true };
+    }
+
+    /*
+        <strong>ctx</strong> ist der 2D Zeichen Kontext
+        eine Untermenge der <a href="/en-US/docs/Web/API/Canvas_API">HTML5 Canvas API</a>.
+    */
+  paint(ctx) {
+        ctx.fillStyle = 'hsla(55, 90%, 60%, 1.0)';
+        ctx.fillRect(0, 15, 200, 20);     /* order: x, y, w, h */
+  }
+});</pre>
+
+<p>In diesem Klassenbeispiel haben wir die Umstände (options) eines einzelnen Kontexts mit der <code>contextOptions()</code> Funktion festgelegt: wir haben ein einfaches Objekt zurückgegeben, das aussagt, dass die Alphatransparenz erlaubt ist.</p>
+
+<p>Wir haben dann die <code>paint()</code> Funktion verwendet, um unser Objekt auf die Canvas zu zeichnen.</p>
+
+<p>Die <code>paint()</code> Funktion kann drei Parameter aufnehmen. Hier übergeben wir nur ein Argument: den Rendering Kontext (wir schauen uns das im weiteren Verlauf noch genauer an), der oftmals mit dem Variablennamen <code>ctx</code> bezeichnet wird. Der 2D Rendering Context ist eine Untermenge der <a href="/en-US/docs/Web/API/Canvas_API">HTML5 Canvas API</a>; die Version, die für CSS Houdini verfügbar is (auch <code>PaintRenderingContext2D genannt</code>), ist eine weitere Untermenge, die über die meisten Zusätze verfügt, die auch in der Canvas API vorhanden sind, mit Ausnahme von <code>CanvasImageData</code>, <code>CanvasUserInterface</code>, <code>CanvasText</code>, und <code>CanvasTextDrawingStyles</code> APIs.</p>
+
+<p>Wir weisen mit <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle">fillStyle</a></code> den Wert <code>hsla(55, 90%, 60%, 1.0)</code> zu, ein blasses Gelb, und rufen dann <code>fillRect()</code> auf, um ein farbiges Rechteck zu erstellen. Die Parameter von <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/fillRect">fillRect()</a></code> sind, in der Abfolge, x-Achse und y-Achse (und zugleich die feste Koordinate), Breite und Höhe. <code>fillRect(0, 15, 200, 20)</code> erstellt ein Rechteck von 200 Einheiten Breite und 20 Einheiten Höhe, die 0 Einheiten von der linken und 15 Einheiten von der oberen Seite der Box entfernt sind, in der das Rechteck eingezeichnet wird.</p>
+
+<p>Wir können die CSS <code><a href="/en-US/docs/Web/CSS/background-size">background-size</a></code> and <code><a href="/en-US/docs/Web/CSS/background-position">background-position</a></code> Eigenschaften (properties) verwenden, um das Hintergrundbild in seiner Größe und Position zu verändern, aber die oben festgelegten Werte sind die Standardwerte der gelben Box, die wir in unserem paint worklet definiert haben.</p>
+
+<p>Wir haben dieses Beispiel einfach gehalten. Für mehr Möglichkeiten werfen Sie bitte einen Blick in die <a href="/en-US/docs/Web/HTML/Element/canvas">Canvas Dokumentation</a>. Wir werden weiter unten im Tutorial auch komplexere Beispiele nutzen.</p>
+
+<h2 id="Das_paint_worklet_verwenden">Das paint worklet verwenden</h2>
+
+<p>Um das paint worklet zu verwenden, müssen wir dies mit <code><a href="/en-US/docs/Web/API/Worklet/addModule">addModule()</a></code> anmelden und in unsere CSS einfügen, wobei wir sicherstellen müssen, dass der CSS Selektor zu einem DOM Knoten in unserem HTML-Code passt.</p>
+
+<h3 id="Das_worklet_anmelden">Das worklet anmelden</h3>
+
+<p>Wir haben unser paint worklet in einer externen script-Datei erstellt, wie oben geziegt. Wir müssen jetzt unser <a href="/en-US/docs/Web/API/PaintWorklet">worklet</a> in unserer Hauptanwendung anmelden:</p>
+
+<pre class="brush: js notranslate">CSS.paintWorklet.addModule('nameOfPaintWorkletFile.js');</pre>
+
+<p>Dazu benutzen wir die von Paint Worklet bereitgestellte Funktion <code>addModule()</code> in einem <code>&lt;script&gt;</code>-Block innerhalb unseres HTML oder in einer externen JavaScript-Datei, die dann seinerseits von der Hauptanwendung aufgerufen werden muss.</p>
+
+<p>In unserem Beispiel ist das worklet auf GitHub gespeichert.</p>
+
+<div id="paintapi">
+<pre class="brush: js notranslate">CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/01partOne/header-highlight.js');</pre>
+
+<h3 id="Auf_das_paint_worklet_in_CSS_verweisen">Auf das paint worklet in CSS verweisen</h3>
+
+<p>Haben wir das paint worklet angemeldet, können wir es in CSS benutzen. Dabei kann man die Funktion <code>paint()</code> so benutzen, wie man auch jeden anderen <code>&lt;image&gt;</code> Typ verwendet. In <code>paint()</code> wird als Parameter derselbe Name des worklets übergeben, den wir bei <code>registerPaint()</code> eingetragen haben.</p>
+
+<pre class="brush: css notranslate">.fancy {
+  background-image: paint(headerHighlight);
+}</pre>
+
+<h3 id="Alles_zusammensetzen">Alles zusammensetzen</h3>
+
+<p>Nun können wir die fancy-Klasse aus CSS einem HTML-Element ganz normal in der Property class übergeben, um die gelbe Box als Hintergrundbild erscheinen zu lassen:</p>
+
+<pre class="brush: html notranslate">&lt;h1 class="fancy"&gt;My Cool Header&lt;/h1&gt;</pre>
+
+<p>Das folgende Beispiel wird wie das obige Beispiel in einem <a href="/Web/API/CSS/paintWorklet#Browser_compatibility">Browsers, der die CSS Painting API unterstützt</a>, aussehen.</p>
+</div>
+
+<p>{{EmbedLiveSample("paintapi", 120, 120)}}</p>
+
+<p>Während Sie vom HTML aus das worklet nicht mehr (innerlich) verändern können, können Sie trotzdem mit CSS über <code>background-size</code> und <code>background-position</code> Größe und Position des Bildes anpassen.</p>
+
+<h2 id="PaintSize">PaintSize</h2>
+
+<p>Im Beispiel oben haben wir eine Box aus 20x200 Einheiten erstellt, die 15 Einheiten vom oberen Rand der umgebenen Box - eines HTML-Elements - entfernt liegt, gleichgültig, welche Größe die umhüllende Box selbst hat. Ist der Text klein, sieht die Box wie eine große Unterstreichung aus, ist er groß und lang, ist die Box gleich einem Balken unter den ersten Buchstaben. Günstiger wäre aber, wenn das Hintergrundbild relativ zur Größe des umhüllenden Elementes wäre. Dafür können wir die <code>paintSize</code> Property, bzw. <code>size.width</code> und <code>size.height</code>, verwenden. Diese übernimmt die Breite und Höhe des umliegenden Elements und rechnet die Größe des worklets dafür aus.</p>
+
+<p><img alt="The background is 50% of the height and 60% of the width of the element" src="https://mdn.mozillademos.org/files/16783/mycoolheadersized.png" style="height: 148px; width: 554px;"></p>
+
+<p>In diesem Beispiel-Bild ist der Hintergrund proportional zu der Größe des umhüllenden Elements. Das dritte Beispiel hat als Breite <code>width: 50%</code>; das Hintergrundbild passt sich in den ersten beiden Beispielen der Größe der Schrift an und damit der Höhe des Blocks, im dritten Beispiel sieht man aber auch deutlich, dass die Breite ebenfalls passend gemacht wird.</p>
+
+<p>Der Code, mit dem das möglich ist, sieht dann folgendermaßen aus:</p>
+
+<pre class="brush: js notranslate">registerPaint('headerHighlight', class {
+
+  static get contextOptions() {
+           return { alpha: true };
+  }
+
+    /*
+        <strong>ctx</strong> is the 2D drawing context
+        <strong>size</strong> is the paintSize, the dimensions (height and width) of the box being painted
+    */
+
+  paint(ctx, size) {
+        ctx.fillStyle = 'hsla(55, 90%, 60%, 1.0)';
+        ctx.fillRect( 0, size.height / 3, size.width * 0.4, size.height * 0.6 );
+  }
+});</pre>
+
+<p>Der Code unterscheidet sich an zwei Stellen vom ersten Beispiel:</p>
+
+<ol>
+ <li>Wir haben ein zweites Argument in <code>paint()</code> eingefügt, die Größe <code>size</code>.</li>
+ <li>Wir berechnen die Dimensionen und die Position unseres Rechtecks relativ zu dieser Größe <code>size</code> und nicht mehr mit absoluten Werten, mit Hilfe der Properties <code>.width</code> und <code>.height</code>.</li>
+</ol>
+
+<p>Unsere HTML-Elemente haben nur ein Hintergrundbild, welches sich in Größe und Breite ändert.</p>
+
+<div class="hidden" id="example2">
+<pre class="brush: js notranslate">CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/02partTwo/header-highlight.js');</pre>
+
+<pre class="brush: css notranslate">.fancy {
+  background-image: paint(headerHighlight);
+}
+.half {
+    width: 50%;
+}</pre>
+
+<pre class="brush: html notranslate">&lt;h1 class="fancy"&gt;Largest Header&lt;/h1&gt;
+&lt;h6 class="fancy"&gt;Smallest Header&lt;/h6&gt;
+&lt;h3 class="fancy half"&gt;50% width header&lt;/h3&gt;
+</pre>
+</div>
+
+<p>Wenn du mit diesem worklet herumspielst, kannst du dessen Größe über die Eigenschaften <code>font-size</code> und <code>width</code> des umhüllenden Elements ändern.</p>
+
+<p>In Browsern, die CSS Paint API unterstützen, erscheint das unten aufgeführte Beispielt wie das Bild oben.</p>
+
+<p>{{EmbedLiveSample("example2", 300, 300)}}</p>
+
+<h2 id="Properties_anpassen">Properties anpassen</h2>
+
+<p>Zusätzlich zu der Größe des Elements kann ein worklet auch auf andere CSS-Eigenschaften zugreifen.</p>
+
+<pre class="brush: js notranslate">registerPaint('cssPaintFunctionName', class {
+     static get inputProperties() { return ['PropertyName1', '--customPropertyName2']; }
+     static get inputArguments() { return ['&lt;color&gt;']; }
+     static get contextOptions() { return {alpha: true}; }
+
+     paint(drawingContext, elementSize, styleMap) {
+         // Paint code goes here.
+     }
+});
+</pre>
+
+<p>Die drei Parameter der Funktion <code>paint()</code> enthalten den Zeichenkontext, die Größe des Malgrundes (meist des umgebenden Elements) und Eigenschaften (properties). Um auf die Eigenschaften zugreifen zu können, muss man die statische Methode <code>inputProperties()</code> aufrufen, die den Zugriff auf die CSS properties ermöglicht, sowohl der regulären als auch <a href="/en-US/docs/Web/CSS/CSS_Variables">angepasster Eigenschaften</a>. Diese liefert ein <code><a href="/en-US/docs/Glossary/array">array</a></code> mit den Namen der Eigenschaften zurück (wir werfen im letzten Abschnitt einen näheren Blick auf <code>inputArguments).</code></p>
+
+<h3 id="Example">Example</h3>
+
+<div id="example3">
+<p>Legen wir dazu eine Liste an, deren Hintergrundbild zwischen drei verschiedenen Farben und drei unterschiedlichen Breiten wechselt.</p>
+
+<p><img alt="The width and color of the background image changes based on the custom properties" src="https://mdn.mozillademos.org/files/16784/boxbg.png" style="height: 255px; width: 739px;"></p>
+
+<p>In unserer CSS weisen wir verschiedene Farben und eine Anpassung der Breite des worklets über die <code>--boxColor</code> und <code>--widthSubtractor</code> Eigenschaften zu.</p>
+
+<pre class="brush: html; hidden notranslate">&lt;ul&gt;
+    &lt;li&gt;item 1&lt;/li&gt;
+    &lt;li&gt;item 2&lt;/li&gt;
+    &lt;li&gt;item 3&lt;/li&gt;
+    &lt;li&gt;item 4&lt;/li&gt;
+    &lt;li&gt;item 5&lt;/li&gt;
+    &lt;li&gt;item 6&lt;/li&gt;
+    &lt;li&gt;item 7&lt;/li&gt;
+    &lt;li&gt;item 8&lt;/li&gt;
+    &lt;li&gt;item 9&lt;/li&gt;
+    &lt;li&gt;item 10&lt;/li&gt;
+    &lt;li&gt;item 11&lt;/li&gt;
+    &lt;li&gt;item 12&lt;/li&gt;
+    &lt;li&gt;item 13&lt;/li&gt;
+    &lt;li&gt;item 14&lt;/li&gt;
+    &lt;li&gt;item 15&lt;/li&gt;
+    &lt;li&gt;item 16&lt;/li&gt;
+    &lt;li&gt;item 17&lt;/li&gt;
+    &lt;li&gt;item&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<pre class="brush: js; hidden notranslate">CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/boxbg.js');</pre>
+
+<pre class="brush: css notranslate">li {
+   background-image: paint(boxbg);
+   --boxColor: hsla(55, 90%, 60%, 1.0);
+}
+
+li:nth-of-type(3n) {
+   --boxColor: hsla(155, 90%, 60%, 1.0);
+   --widthSubtractor: 20;
+}
+
+li:nth-of-type(3n+1) {
+   --boxColor: hsla(255, 90%, 60%, 1.0);
+   --widthSubtractor: 40;
+}</pre>
+</div>
+
+<p>Beachte, dass wir im CSS Eigenschaften verwenden, die nicht zum normalen CSS gehören, sondern von uns selbst definiert worden sind: <code>boxColor</code> und <code>widthSubtractor</code>. Auf diese können wir im worklet zugreifen, wenn wir diese über <code>inputProperties()</code> zugänglich machen.</p>
+
+<pre class="brush: js notranslate">registerPaint('boxbg', class {
+
+  static get contextOptions() { return {alpha: true}; }
+
+  /*
+     use this function to retrieve any custom properties (or regular properties, such as 'height')
+     defined for the element, return them in the specified array
+  */
+  <strong>static get inputProperties() { return ['--boxColor', '--widthSubtractor']; }</strong>
+
+  paint(ctx, size, props) {
+    /*
+       ctx -&gt; drawing context
+       size -&gt; paintSize: width and height
+       props -&gt; properties: get() method
+    */
+
+    ctx.fillStyle = <strong>props.get('--boxColor')</strong>;
+    ctx.fillRect(0, size.height/3, size.width*0.4 - <strong>props.get('--widthSubtractor')</strong>, size.height*0.6);
+  }
+});</pre>
+
+<p>Wir haben die Methode <code>inputProperties()</code> in der <code>registerPaint()</code> Klasse verwendet, um die Werte der beiden von uns definierten Eigenschaften zu erhalten, die das worklet <code>boxbg</code> anwenden. Mit <code>inputProperties()</code> legen wir uns einen Array an, der normale CSS-Eigenschaften wie auch selbst definierte erhalten kann.</p>
+
+<p>In unserem <code>&lt;script&gt;</code>-Block melden wir das worklet an:</p>
+
+<div id="paintapi">
+<pre class="brush: js notranslate">CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/worklet/boxbg.js');</pre>
+</div>
+
+<p>{{EmbedLiveSample("example3", 300, 300)}}</p>
+
+<p>In der Anwendung können wir zwar nicht das Script des worklets verändern, aber alle Werte, die über CSS übergeben werden und die vom worklet verarbeitet werden.</p>
+
+<h2 id="Komplexität_hinzufügen">Komplexität hinzufügen</h2>
+
+<p>Das obenstehende Beispiel ist nicht sonderlich aufregend, da man es ebenso mit CSS in wenigen Schritten und ohne den Aufwand eines worklets programmieren kann, etwa, indem man <a href="/en-US/docs/Learn/CSS/Howto/Generated_content">dekorative Inhalte</a> mit <code><a href="/en-US/docs/Web/CSS/::before">::before</a> hinzufügt</code> oder mit <code>background: linear-gradient(yellow, yellow) 0 15px / 200px 20px no-repeat;</code> - Was die CSS Painting API so interessant und machtvoll macht, ist die Möglichkeit, komplexe Bilder zu erstellen und Variablen zu übergeben.</p>
+
+<p>Werfen wir einen Blick auf ein komplexeres Beispiel.</p>
+
+<pre class="brush: js notranslate">registerPaint('headerHighlight', class {
+  static get inputProperties() { return ['--highColour']; }
+  static get contextOptions() { return {alpha: true}; }
+
+  paint(ctx, size, props) {
+
+		/* set where to start the highlight &amp; dimensions */
+		const x = 0;
+		const y = size.height * 0.3;
+		const blockWidth = size.width * 0.33;
+		const highlightHeight = size.height * 0.85;
+        const color = props.get('--highColour');
+
+		ctx.fillStyle = color;
+
+		ctx.beginPath();
+		ctx.moveTo( x, y );
+		ctx.lineTo( blockWidth, y );
+		ctx.lineTo( blockWidth + highlightHeight, highlightHeight );
+		ctx.lineTo( x, highlightHeight );
+		ctx.lineTo( x, y );
+		ctx.closePath();
+		ctx.fill();
+
+		/* create the dashes */
+		for (let i = 0; i &lt; 4; i++) {
+			let start = i * 2;
+			ctx.beginPath();
+			ctx.moveTo( (blockWidth) + (start * 10) + 10, y );
+			ctx.lineTo( (blockWidth) + (start * 10) + 20, y );
+			ctx.lineTo( (blockWidth) + (start * 10) + 20 + (highlightHeight), highlightHeight );
+			ctx.lineTo( (blockWidth) + (start * 10) + 10 + (highlightHeight), highlightHeight );
+			ctx.lineTo( (blockWidth) + (start * 10) + 10, y );
+			ctx.closePath();
+			ctx.fill();
+		}
+  } // paint
+});</pre>
+
+<div id="example4">
+<p>Wir können dann einige Zeilen HTML mit der entsprechenden Klasse aus CSS schreiben:</p>
+
+<pre class="brush: html notranslate">&lt;h1 class="fancy"&gt;Largest Header&lt;/h1&gt;
+&lt;h3 class="fancy"&gt;Medium size header&lt;/h3&gt;
+&lt;h6 class="fancy"&gt;Smallest Header&lt;/h6&gt;</pre>
+
+<p>Dann geben wir den einzelnen HTML-Elementen je einen verschiedenen Wert für die <a href="/en-US/docs/Web/CSS/CSS_Variables">von uns definierte Eigenschaft</a> <code>--highColour:</code></p>
+
+<pre class="brush: css notranslate">.fancy {
+  background-image: paint(headerHighlight);
+}
+h1 { --highColour: hsla(155, 90%, 60%, 0.7); }
+h3 { --highColour: hsla(255, 90%, 60%, 0.5); }
+h6 { --highColour: hsla(355, 90%, 60%, 0.3); }</pre>
+
+<p>Und wir melden das worklet an:</p>
+
+<pre class="brush: js notranslate">CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/03partThree/header-highlight.js');</pre>
+
+<p>{{EmbedLiveSample("example4", 300, 300)}}</p>
+
+<p>Während man das worklet selbst nicht ändern kann, kann man mit CSS und HTML jedoch herumspielen. Vielleicht probieren Sie mal <code><a href="/en-US/docs/Web/CSS/float">float</a></code> und <code><a href="/en-US/docs/Web/CSS/clear">clear</a></code> bei den Titelzeilen <code>&lt;h1&gt;</code>, <code>&lt;h3&gt;</code> und <code>&lt;h6&gt;</code> aus.</p>
+
+<p>Man kann natürlich auch Hintergrundbilder ohne CSS paint API erstellen. Das kann allerdings zu einem großen Mehraufwand und wesentlich mehr Code führen. Mit CSS Paint API kann ein worklet immer wieder verwendet werden und über eine Parameter-Übergabe rasch angepasst werden.</p>
+</div>
+
+<h2 id="Parameter_übergeben">Parameter übergeben</h2>
+
+<p>Mit der CSS Paint API können wir nicht nur auf selbstdefinierte Eigenschaften zugreifen, sondern auch über die CSS-Funktion <code>paint()</code> auch Parameter übergeben.</p>
+
+<p>Nehmen wir an, wir wollen ab und zu den Hintergrund nur mit einem Strich statt vollständig füllen. Dafür können wir ein Extra-Argument übergeben, welches dann im worklet abgefragt und entsprechend verarbeitet wird.</p>
+
+<pre class="brush: css notranslate">li {
+	background-image: paint(hollowHighlights, stroke);
+}
+</pre>
+
+<p>Mit der Methode <code>inputArguments()</code> in der Klasse <code>registerPaint()</code> machen wir das zusätzliche Argument aus der CSS-Funktion <code>paint()</code> zugänglich:</p>
+
+<pre class="brush: js notranslate">static get inputArguments() { return ['*']; }
+</pre>
+
+<p>Und wenn wir darauf zugreifen wollen:</p>
+
+<pre class="brush:js notranslate">paint(ctx, size, props, args) {
+
+	// use our custom arguments
+	const hasStroke = args[0].toString();
+
+	// if stroke arg is 'stroke', don't fill
+	if (hasStroke === 'stroke') {
+		ctx.fillStyle = 'transparent';
+		ctx.strokeStyle = colour;
+	}
+	...
+}
+</pre>
+
+<p>Wir können auch mehr als ein Argument übergeben:</p>
+
+<pre class="brush: css notranslate">li {
+	background-image: paint(hollowHighlights, stroke, 10px);
+}
+</pre>
+
+<p>Wir können auch den Datentyp genau angeben. Wenn wir die Werte der Argumente mit <code>get</code> holen, fragen wir dann speziell nach einer <code>&lt;length&gt;</code> Einheit.</p>
+
+<pre class="brush: js notranslate">static get inputArguments() { return ['*', '&lt;length&gt;']; }</pre>
+
+<p>In diesem Fall haben wir spezifisch nach einem <code>&lt;length&gt;</code> Attribut gefragt. Das erste Element des Arrays wird dann als <code><a href="/en-US/docs/Web/API/CSSUnparsedValue">CSSUnparsedValue</a></code>, das zweite als <code><a href="/en-US/docs/Web/API/CSSStyleValue">CSSStyleValue</a></code> übergeben.</p>
+
+<p>Wenn das selbstdefinierte Argument ein CSS-Wert ist, zum Beispiel eine Maßeinheit, können wir die Typed OM CSSStyleValue Klasse (und deren Unterklassen) aufrufen, indem wir das Schlüsselwort für diesen Typen in der Methode <code>inputArguments()</code> nutzen.</p>
+
+<p>Fügen wir einfach ein weiteres Argument für die Pixel-Breite unserer Hintergrundlinie hinzu:</p>
+
+<pre class="brush: css notranslate">li {
+	background-image: paint(hollowHighlights, stroke, 10px);
+}
+</pre>
+
+<p>Wenn wir mit <code>get</code> unsere Argumentenliste holen, können wir direkt nach der <code>&lt;length&gt;</code> Einheit fragen.</p>
+
+<pre class="brush: js notranslate">static get inputArguments() { return ['*', '&lt;length&gt;']; }
+</pre>
+
+<p>Nun können wir Typen und Werte der Properties übergeben, was bedeutet: wir können die Anzahl der Pixel und den Typ Nummer direkt verwenden (zugegeben nimmt <code>ctx.lineWidth</code> einen Float als Wert und eigentlich keinen Wert mit Längeneinheiten, aber um des Beispiels willen ...).</p>
+
+<pre class="brush: js notranslate">paint(ctx, size, props, args) {
+
+		const strokeWidth = args[1];
+
+		if (strokeWidth.unit === 'px') {
+			ctx.lineWidth = strokeWidth.value;
+		} else {
+			ctx.lineWidth = 1.0;
+		}
+
+	...
+}
+</pre>
+
+<p>Es ist wichtig, hier den Unterschied zwischen selbsterstellten Properties und den Argumenten zu erwähnen. Selbsterstellte Properties (und auch alle Properties für einen bestimmten Selektor) sind global - sie können überall in unserem CSS und JS verwendet werden.</p>
+
+<p>Wenn Sie zum Beispiel ein <code>--mainColor</code> definiert haben, der dazu dient, eine Farbe mit der Funktion <code>paint()</code> zu setzen, kann dieser auch dazu verwendet werden, anderswo im CSS Farben zu setzen. Wenn Sie diesen Wert speziell für paint ändern wollen, kann sich das als schwierig erweisen. Hier kommt dann das angepasste Argument ins Spiel. Argumente dienen dazu, das zu kontrollieren, was man aktuell zeichnet, während Properties dazu dienen, den Stil zu kontrollieren.</p>
+
+<p><img alt="The list items have a background image that is either pink, purple or green, with different stroke widths, and the green one being filled." src="https://mdn.mozillademos.org/files/16786/hollowfilled.png" style="height: 292px; width: 327px;"></p>
+
+<p>Nun können wir die Vorteile dieser API sehen: wir können zahlreiche selbsterstellte Properties und Argumente dafür verwenden, um wiederverwendbare und vollkommen kontrollierbare Styling-Funktionen zu erstellen.</p>
+
+<pre class="brush: js notranslate">registerPaint('hollowHighlights', class {
+
+  static get inputProperties() { return ['--boxColor']; }
+  // Input arguments that can be passed to the `paint` function
+  static get inputArguments() { return ['*','']; }
+
+  static get contextOptions() { return {alpha: true}; }
+
+  paint(ctx, size, props, args) {
+    // ctx   -&gt; drawing context
+    // size  -&gt; size of the box being painted
+    // props -&gt; list of custom properties available to the element
+	// args  -&gt; list of arguments set when calling the paint() function in the css
+
+		// where to start the highlight &amp; dimensions
+		const x = 0;
+		const y = size.height * 0.3;
+		const blockWidth = size.width * 0.33;
+		const blockHeight = size.height * 0.85;
+
+		// the values passed in the paint() function in the CSS
+		const colour = props.get( '--boxColor' );
+		const strokeType = args[0].toString();
+		const strokeWidth = parseInt(args[1]);
+
+
+		// set the stroke width
+		if ( strokeWidth ) {
+			ctx.lineWidth = strokeWidth;
+		} else {
+			ctx.lineWidth = 1.0;
+		}
+		// set the fill type
+		if ( strokeType === 'stroke' ) {
+			ctx.fillStyle = 'transparent';
+			ctx.strokeStyle = colour;
+		} else if ( strokeType === 'filled' ) {
+			ctx.fillStyle = colour;
+			ctx.strokeStyle = colour;
+		} else {
+			ctx.fillStyle = 'none';
+			ctx.strokeStyle = 'none';
+		}
+
+		// block
+		ctx.beginPath();
+		ctx.moveTo( x, y );
+		ctx.lineTo( blockWidth, y );
+		ctx.lineTo( blockWidth + blockHeight, blockHeight );
+		ctx.lineTo( x, blockHeight );
+		ctx.lineTo( x, y );
+		ctx.closePath();
+		ctx.fill();
+		ctx.stroke();
+		// dashes
+		for (let i = 0; i &lt; 4; i++) {
+			let start = i * 2;
+			ctx.beginPath();
+			ctx.moveTo( blockWidth + (start * 10) + 10, y);
+			ctx.lineTo( blockWidth + (start * 10) + 20, y);
+			ctx.lineTo( blockWidth + (start * 10) + 20 + blockHeight, blockHeight);
+			ctx.lineTo( blockWidth + (start * 10) + 10 + blockHeight, blockHeight);
+			ctx.lineTo( blockWidth + (start * 10) + 10, y);
+			ctx.closePath();
+			ctx.fill();
+			ctx.stroke();
+		}
+
+  } // paint
+});
+</pre>
+
+<p>Wir können verschiedene Farbe und Strichstärken setzen und entscheiden, ob das Hintergrundbild gefüllt oder leer ist:</p>
+
+<div id="example5">
+<pre class="brush: css notranslate">li {
+   --boxColor: hsla(155, 90%, 60%, 0.5);
+   background-image: paint(hollowHighlights, stroke, 5px);
+}
+
+li:nth-of-type(3n) {
+   --boxColor: hsla(255, 90%, 60%, 0.5);
+   background-image: paint(hollowHighlights, filled,  3px);
+}
+
+li:nth-of-type(3n+1) {
+   --boxColor: hsla(355, 90%, 60%, 0.5);
+   background-image: paint(hollowHighlights, stroke, 1px);
+}</pre>
+
+<pre class="brush: html; hidden notranslate">&lt;ul&gt;
+    &lt;li&gt;item 1&lt;/li&gt;
+    &lt;li&gt;item 2&lt;/li&gt;
+    &lt;li&gt;item 3&lt;/li&gt;
+    &lt;li&gt;item 4&lt;/li&gt;
+    &lt;li&gt;item 5&lt;/li&gt;
+    &lt;li&gt;item 6&lt;/li&gt;
+    &lt;li&gt;item 7&lt;/li&gt;
+    &lt;li&gt;item 8&lt;/li&gt;
+    &lt;li&gt;item 9&lt;/li&gt;
+    &lt;li&gt;item 10&lt;/li&gt;
+    &lt;li&gt;item 11&lt;/li&gt;
+    &lt;li&gt;item 12&lt;/li&gt;
+    &lt;li&gt;item 13&lt;/li&gt;
+    &lt;li&gt;item 14&lt;/li&gt;
+    &lt;li&gt;item 15&lt;/li&gt;
+    &lt;li&gt;item 16&lt;/li&gt;
+    &lt;li&gt;item 17&lt;/li&gt;
+    &lt;li&gt;item&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<p>In unserem <code>&lt;script&gt;</code>-Block melden wir das Worklet an:</p>
+
+<pre class="brush: js notranslate">CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hollow.js');</pre>
+</div>
+
+<p>{{EmbedLiveSample("example5", 300, 300)}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/CSS_Painting_API">CSS Painting API </a></li>
+ <li><a href="/en-US/docs/Web/Houdini/CSS_Typed_OM">CSS Typed Object Model API</a></li>
+</ul>
diff --git a/files/de/web/api/css_painting_api/index.html b/files/de/web/api/css_painting_api/index.html
new file mode 100644
index 0000000000..799979f66b
--- /dev/null
+++ b/files/de/web/api/css_painting_api/index.html
@@ -0,0 +1,199 @@
+---
+title: CSS Painting API
+slug: Web/API/CSS_Painting_API
+tags:
+  - API
+  - CSS
+  - CSS Paint API
+  - Houdini
+  - NeedsTranslation
+  - Painting
+  - Reference
+  - TopicStub
+translation_of: Web/API/CSS_Painting_API
+---
+<div>{{DefaultAPISidebar("CSS Painting API")}}</div>
+
+<p>The CSS Painting API — part of the <a href="/en-US/docs/Web/Houdini">CSS Houdini</a> umbrella of APIs — allows developers to write JavaScript functions that can draw directly into an element's background, border, or content.</p>
+
+<h2 id="Concepts_and_usage">Concepts and usage</h2>
+
+<p>Essentially, the CSS Painting API contains functionality allowing developers to create custom values for {{cssxref('paint', 'paint()')}}, a CSS <code><a href="/en-US/docs/Web/CSS/image">&lt;image&gt;</a></code> function. You can then apply these values to properties like {{cssxref("background-image")}} to set complex custom backgrounds on an element.</p>
+
+<p>For example:</p>
+
+<pre class="brush: css notranslate">aside {
+  background-image: paint(myPaintedImage);
+}</pre>
+
+<p>The API defines {{domxref('PaintWorklet')}}, a {{domxref('worklet')}} that can be used to programmatically generate an image that responds to computed style changes. To find out more about how this is used, consult <a href="/en-US/docs/Web/API/CSS_Painting_API/Guide">Using the CSS Painting API</a>.</p>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt>{{domxref('PaintWorklet')}}</dt>
+ <dd>Programmatically generates an image where a CSS property expects a file. Access this interface through <a href="https://developer.mozilla.org/en-US/docs/Web/API/CSS/paintWorklet" title="paintWorklet is a static, read-only property of the CSS interface that provides access to the PaintWorklet, which programmatically generates an image where a CSS property expects a file. "><code>CSS.paintWorklet</code></a>.</dd>
+ <dt>{{domxref('PaintWorkletGlobalScope')}}</dt>
+ <dd>The global execution context of the <code>paintWorklet</code>.</dd>
+ <dt>{{domxref('PaintRenderingContext2D')}}</dt>
+ <dd>
+ <p>Implements a subset of the <a href="/en-US/docs/Web/API/CanvasRenderingContext2D">CanvasRenderingContext2D API</a>. It has an output bitmap that is the size of the object it is rendering to.</p>
+ </dd>
+ <dt>{{domxref('PaintSize')}}</dt>
+ <dd>Returns the read-only values of the output bitmap's width and height.</dd>
+</dl>
+
+<h2 id="Dictionaries">Dictionaries</h2>
+
+<dl>
+ <dt>{{domxref('PaintRenderingContext2DSettings')}}</dt>
+ <dd>A dictionary providing a subset of <a href="/en-US/docs/Web/API/CanvasRenderingContext2D">CanvasRenderingContext2D</a> settings.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Examples</h2>
+
+<p>To draw directly into an element's background using JavaScript in our CSS, we define a paint worklet using the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/PaintWorklet/registerPaint">registerPaint()</a></code> function, tell the document to include the worklet using the paintWorklet addModule() method, then include the image we created using the CSS <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/paint()" title="The documentation about this has not yet been written; please consider contributing!"><code>paint()</code></a></code>  function.</p>
+
+<p>We create our PaintWorklet called 'hollowHighlights' using the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/PaintWorklet/registerPaint">registerPaint()</a></code> function:</p>
+
+<pre class="brush: js notranslate">registerPaint('hollowHighlights', class {
+
+  static get inputProperties() { return ['--boxColor']; }
+
+  static get inputArguments() { return ['*','&lt;length&gt;']; }
+
+  static get contextOptions() { return {alpha: true}; }
+
+  paint(ctx, size, props, args) {
+		const x = 0;
+		const y = size.height * 0.3;
+		const blockWidth = size.width * 0.33;
+		const blockHeight = size.height * 0.85;
+
+		const theColor = props.get( '--boxColor' );
+		const strokeType = args[0].toString();
+		const strokeWidth = parseInt(args[1]);
+
+		console.log(theColor);
+
+		if ( strokeWidth ) {
+			ctx.lineWidth = strokeWidth;
+		} else {
+			ctx.lineWidth = 1.0;
+		}
+
+		if ( strokeType === 'stroke' ) {
+			ctx.fillStyle = 'transparent';
+			ctx.strokeStyle = theColor;
+		} else if ( strokeType === 'filled' ) {
+			ctx.fillStyle = theColor;
+			ctx.strokeStyle = theColor;
+		} else {
+			ctx.fillStyle = 'none';
+			ctx.strokeStyle = 'none';
+		}
+
+
+		ctx.beginPath();
+		ctx.moveTo( x, y );
+		ctx.lineTo( blockWidth, y );
+		ctx.lineTo( blockWidth + blockHeight, blockHeight );
+		ctx.lineTo( x, blockHeight );
+		ctx.lineTo( x, y );
+		ctx.closePath();
+		ctx.fill();
+		ctx.stroke();
+
+		for (let i = 0; i &lt; 4; i++) {
+			let start = i * 2;
+			ctx.beginPath();
+			ctx.moveTo( blockWidth + (start * 10) + 10, y);
+			ctx.lineTo( blockWidth + (start * 10) + 20, y);
+			ctx.lineTo( blockWidth + (start * 10) + 20 + blockHeight, blockHeight);
+			ctx.lineTo( blockWidth + (start * 10) + 10 + blockHeight, blockHeight);
+			ctx.lineTo( blockWidth + (start * 10) + 10, y);
+			ctx.closePath();
+			ctx.fill();
+			ctx.stroke();
+		}
+  }
+});</pre>
+
+<div id="hollowExample">
+<p>We then include the paintWorklet:</p>
+
+<pre class="brush: html hidden notranslate">&lt;ul&gt;
+    &lt;li&gt;item 1&lt;/li&gt;
+    &lt;li&gt;item 2&lt;/li&gt;
+    &lt;li&gt;item 3&lt;/li&gt;
+    &lt;li&gt;item 4&lt;/li&gt;
+    &lt;li&gt;item 5&lt;/li&gt;
+    &lt;li&gt;item 6&lt;/li&gt;
+    &lt;li&gt;item 7&lt;/li&gt;
+    &lt;li&gt;item 8&lt;/li&gt;
+    &lt;li&gt;item 9&lt;/li&gt;
+    &lt;li&gt;item 10&lt;/li&gt;
+    &lt;li&gt;item 11&lt;/li&gt;
+    &lt;li&gt;item 12&lt;/li&gt;
+    &lt;li&gt;item 13&lt;/li&gt;
+    &lt;li&gt;item 14&lt;/li&gt;
+    &lt;li&gt;item 15&lt;/li&gt;
+    &lt;li&gt;item 16&lt;/li&gt;
+    &lt;li&gt;item 17&lt;/li&gt;
+    &lt;li&gt;item 18&lt;/li&gt;
+    &lt;li&gt;item 19&lt;/li&gt;
+    &lt;li&gt;item 20&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<pre class="brush: js notranslate">  CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hilite.js');
+</pre>
+
+<p>Then we can use the {{cssxref('&lt;image&gt;')}} with the CSS {{cssxref('paint()')}} function:</p>
+
+<pre class="brush: css notranslate">li {
+   --boxColor: hsla(55, 90%, 60%, 1.0);
+   background-image: paint(hollowHighlights, stroke, 2px);
+}
+
+li:nth-of-type(3n) {
+   --boxColor: hsla(155, 90%, 60%, 1.0);
+   background-image: paint(hollowHighlights, filled,  3px);
+}
+
+li:nth-of-type(3n+1) {
+   --boxColor: hsla(255, 90%, 60%, 1.0);
+   background-image: paint(hollowHighlights, stroke, 1px);
+}</pre>
+</div>
+<p>We've included a custom property in the selector block defining a boxColor. Custom properties are accessible to the PaintWorklet.</p>
+
+<p>{{EmbedLiveSample("hollowExample", 300, 300)}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS Painting API')}}</td>
+   <td>{{Spec2('CSS Painting API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>See the browser compatibility data for each CSS Painting API Interfaces.</p>
+
+<h2 id="See_Also">See Also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Houdini/Learn/CSS_Painting_API">Using the CSS Painting API</a></li>
+ <li><a href="/en-US/docs/Web/CSS_Typed_OM">CSS Typed Object Model API</a></li>
+ <li><a href="/en-US/docs/Web/Houdini">CSS Houdini</a></li>
+</ul>
diff --git a/files/de/web/api/cssmediarule/index.html b/files/de/web/api/cssmediarule/index.html
new file mode 100644
index 0000000000..cf00ea0100
--- /dev/null
+++ b/files/de/web/api/cssmediarule/index.html
@@ -0,0 +1,120 @@
+---
+title: CSSMediaRule
+slug: Web/API/CSSMediaRule
+tags:
+  - API
+  - CSSOM
+  - Referenz
+  - Schnittstelle
+translation_of: Web/API/CSSMediaRule
+---
+<p>{{ APIRef("CSSOM") }}</p>
+
+<p>Die <strong>CSSMediaRule</strong> ist eine Schnittstelle, die eine einzelne CSS-Regel darstellt. Sie implementiert die {{domxref("CSSConditionRule")}}-Schnittstelle und somit auch die {{domxref("CSSGroupingRule")}}- sowie die {{domxref("CSSRule")}}-Schnittstelle mit einem Typwert von <code>4</code> (<code>CSSRule.MEDIA_RULE</code>).</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>Die Syntax wird mittels der <a href="http://dev.w3.org/2006/webapi/WebIDL/" title="http://dev.w3.org/2006/webapi/WebIDL/">WebIDL</a> definiert.</p>
+
+<pre>interface CSSMediaRule : CSSConditionRule {
+    readonly attribute MediaList media;
+}
+</pre>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<p>Als eine {{ domxref("CSSConditionRule") }}, und somit der {{domxref("CSSGroupingRule")}} und {{ domxref("CSSRule") }}, implementiert die <code>CSSMediaRule</code> auch gleichzeitig die Eigenschaften dieser Schnittstellen. Darüber hinaus hat sie die folgende spezielle Eigenschaft<code>:</code></p>
+
+<dl>
+ <dt>{{domxref("CSSMediaRule.media")}} {{readonlyinline()}}</dt>
+ <dd>Definiert {{domxref("MediaList")}}, welches das zugedachte Zielmedium für die Style-Informationen wiedergibt.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<p>Wie eine {{ domxref("CSSConditionRule") }} und daher eine {{domxref("CSSGroupingRule")}} als auch eine {{ domxref("CSSRule") }}, implementiert <code>CSSMediaRule</code> auch die Methoden dieser Schnittstelle. Sie selbst hat keine speziellen Methoden.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Conditional', '#the-cssmediarule-interface', 'CSSMediaRule') }}</td>
+   <td>{{ Spec2('CSS3 Conditional')}}</td>
+   <td>Als Ableitung von  {{domxref("CSSConditionRule")}}.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSSOM', '#the-cssmediarule-interface', 'CSSMediaRule') }}</td>
+   <td>{{ Spec2('CSSOM') }}</td>
+   <td>Keine Abweichungen von  {{SpecName('DOM2 Style')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Style', 'css.html#CSS-CSSMediaRule', 'CSSMediaRule') }}</td>
+   <td>{{ Spec2('DOM2 Style') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität </h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{ CompatChrome(45.0) }}</td>
+   <td>{{ CompatVersionUnknown }} [1]</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatChrome(45.0) }}</td>
+   <td>{{ CompatGeckoMobile("17") }} [1]</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatChrome(45.0) }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Das Setzen des Werts von <code>conditionText</code> in Gecko ist nur ab Firefox 20 möglich.</p>
diff --git a/files/de/web/api/csspagerule/index.html b/files/de/web/api/csspagerule/index.html
new file mode 100644
index 0000000000..c6a30fc95e
--- /dev/null
+++ b/files/de/web/api/csspagerule/index.html
@@ -0,0 +1,129 @@
+---
+title: CSSPageRule
+slug: Web/API/CSSPageRule
+tags:
+  - API
+  - CSSOM
+  - Referenz
+translation_of: Web/API/CSSPageRule
+---
+<p>{{ APIRef("CSSOM") }}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p><strong><code>CSSPageRule</code></strong> ist eine Schnittstelle, die eine einzelne CSS {{cssxref("@page")}} Regel repräsentiert. Sie implementiert die {{domxref("CSSRule")}} Schnittstelle mit dem Typwert <code>6</code> (<code>CSSRule.PAGE_RULE</code>).</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>Die Syntax wird im <a href="http://dev.w3.org/2006/webapi/WebIDL/" title="http://dev.w3.org/2006/webapi/WebIDL/">WebIDL</a> Format beschrieben.</p>
+
+<pre>interface CSSPageRule : CSSRule {
+    attribute DOMString selectorText;
+    readonly attribute CSSStyleDeclaration style;
+};
+</pre>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<p>Als eine {{ domxref("CSSRule") }} implementiert <code>CSSPageRule</code> auch die Eigenschaften dieser Schnittstelle. Sie hat die folgenden speziellen Eigenschaften:</p>
+
+<dl>
+ <dt>{{domxref("CSSPageRule.selectorText")}}</dt>
+ <dd>Repräsentiert den Text eines zur At-Regel gehörenden Seitenselektors.</dd>
+ <dt>{{domxref("CSSPageRule.style")}} {{readonlyinline()}}</dt>
+ <dd>Gibt den zur At-Regel gehörenden Deklarationsblock zurück.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<p>Als eine {{ domxref("CSSRule") }} implementiert <code>CSSPageRule</code> auch die Methoden dieser Schnittstelle. Sie hat keine speziellen Methoden.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSSOM', '#the-csspagerule-interface', 'CSSPageRule') }}</td>
+   <td>{{ Spec2('CSSOM') }}</td>
+   <td>Keine Änderungen bezüglich {{SpecName('DOM2 Style')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Style', 'css.html#CSS-CSSPageRule', 'CSSPageRule') }}</td>
+   <td>{{ Spec2('DOM2 Style') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatGeckoDesktop("19") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+  </tr>
+  <tr>
+   <td><code>selectorText</code></td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("19") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>selectorText</code></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/de/web/api/cssrule/csstext/index.html b/files/de/web/api/cssrule/csstext/index.html
new file mode 100644
index 0000000000..789cd7519a
--- /dev/null
+++ b/files/de/web/api/cssrule/csstext/index.html
@@ -0,0 +1,31 @@
+---
+title: CSSRule.cssText
+slug: Web/API/CSSRule/cssText
+tags:
+  - API
+  - CSSOM
+  - Eigenschaft
+  - Referenz
+translation_of: Web/API/CSSRule/cssText
+---
+<div>
+ {{ APIRef() }}</div>
+<h2 id="Summary" name="Summary">Übersicht</h2>
+<p><strong>cssText</strong> gibt den eigentlichen Text der Styleregel zurück. Um eine Stylesheet Regel dynamisch setzen zu können, siehe <a href="/de/docs/Web/API/CSS_Object_Model/Dynamische_Stylinginformationen_verwenden" title="DOM/Using_dynamic_styling_information">Dynamische Stylinginformationen verwenden.</a></p>
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+<pre class="syntaxbox"><em>string</em> = cssRule.cssText
+</pre>
+<h2 id="Example" name="Example">Beispiel</h2>
+<pre class="brush:html;">&lt;style&gt;
+body { background-color: darkblue; }
+&lt;/style&gt;
+&lt;script&gt;
+  var stylesheet = document.styleSheets[0];
+  alert(stylesheet.cssRules[0].cssText); // body { background-color: darkblue; }
+&lt;/script&gt;
+
+</pre>
+<h2 id="Specification" name="Specification">Spezifikation</h2>
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSRule">DOM Level 2 Style CSS - Interface CSSStyleRule (introduced in DOM Level 2)</a></li>
+</ul>
diff --git a/files/de/web/api/cssrule/index.html b/files/de/web/api/cssrule/index.html
new file mode 100644
index 0000000000..eeca8828cf
--- /dev/null
+++ b/files/de/web/api/cssrule/index.html
@@ -0,0 +1,258 @@
+---
+title: CSSRule
+slug: Web/API/CSSRule
+tags:
+  - CSSOM
+translation_of: Web/API/CSSRule
+---
+<div>{{APIRef("CSSOM")}}</div>
+
+<p>An object implementing the <strong><code>CSSRule</code></strong> DOM interface represents a single CSS at-rule. References to a <code>CSSRule</code>-implementing object may be obtained by looking at a <a href="/en-US/docs/Web/API/CSSStyleSheet">CSS style sheet's</a> {{domxref("CSSStyleSheet","cssRules")}} list.</p>
+
+<p>There are several kinds of rules. The <code>CSSRule</code> interface specifies the properties common to all rules, while properties unique to specific rule types are specified in the more specialized interfaces for those rules' respective types.</p>
+
+<h2 id="Properties" name="Properties">Syntax</h2>
+
+<p>The syntax is described using the <a href="http://dev.w3.org/2006/webapi/WebIDL/">WebIDL</a> format.</p>
+
+<pre>interface CSSRule {
+    const unsigned short STYLE_RULE = 1;
+    const unsigned short CHARSET_RULE = 2;
+    const unsigned short IMPORT_RULE = 3;
+    const unsigned short MEDIA_RULE = 4;
+    const unsigned short FONT_FACE_RULE = 5;
+    const unsigned short PAGE_RULE = 6;
+    const unsigned short KEYFRAMES_RULE = 7;
+    const unsigned short KEYFRAME_RULE = 8;
+    const unsigned short NAMESPACE_RULE = 10;
+    const unsigned short COUNTER_STYLE_RULE = 11;
+    const unsigned short SUPPORTS_RULE = 12;
+    const unsigned short DOCUMENT_RULE = 13;
+    const unsigned short FONT_FEATURE_VALUES_RULE = 14;
+    const unsigned short VIEWPORT_RULE = 15;
+    const unsigned short REGION_STYLE_RULE = 16;
+    readonly attribute unsigned short type;
+    attribute DOMString cssText;
+    readonly attribute CSSRule? parentRule;
+    readonly attribute CSSStyleSheet? parentStyleSheet;
+};</pre>
+
+<h2 id="Properties_common_to_all_CSSRule_instances">Properties common to all CSSRule instances</h2>
+
+<dl>
+ <dt id="cssText">{{domxref("CSSRule.cssText")}}</dt>
+ <dd>Represents the textual representation of the rule, e.g. <code>"h1,h2 { font-size: 16pt }"</code></dd>
+ <dt id="parentRule">{{domxref("CSSRule.parentRule")}} {{readonlyinline}}</dt>
+ <dd>Returns the containing rule, otherwise <code>null</code>. E.g. if this rule is a style rule inside an {{cssxref("@media")}} block, the parent rule would be that {{domxref("CSSMediaRule")}}.</dd>
+ <dt id="parentStyleSheet">{{domxref("CSSRule.parentStyleSheet")}} {{readonlyinline}}</dt>
+ <dd>Returns the {{domxref("CSSStyleSheet")}} object for the style sheet that contains this rule</dd>
+ <dt id="type">{{domxref("CSSRule.type")}} {{readonlyinline}}</dt>
+ <dd>One of the {{anch("Type constants")}} indicating the type of CSS rule.</dd>
+</dl>
+
+<h2 id="CSSRule" name="CSSRule">Constants</h2>
+
+<h3 id="Type_constants">Type constants</h3>
+
+<p>The <code>CSSRule</code> interface specifies integer constants that can be used in conjunction with a <code>CSSRule</code>'s {{domxref("cssRule/type","type")}} property to discern the rule type (and therefore, which specialized interface it implements). The relationships between these constants and the interfaces are:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Type</th>
+   <th>Value</th>
+   <th>Rule-specific interface</th>
+  </tr>
+  <tr>
+   <td><code>CSSRule.STYLE_RULE</code></td>
+   <td style="text-align: center;"><code>1</code></td>
+   <td>{{domxref("CSSStyleRule")}}</td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.MEDIA_RULE</code></td>
+   <td style="text-align: center;"><code>4</code></td>
+   <td>{{domxref("CSSMediaRule")}}</td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.FONT_FACE_RULE</code></td>
+   <td style="text-align: center;"><code>5</code></td>
+   <td>{{domxref("CSSFontFaceRule")}}</td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.PAGE_RULE</code></td>
+   <td style="text-align: center;"><code>6</code></td>
+   <td>{{domxref("CSSPageRule")}}</td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.IMPORT_RULE</code></td>
+   <td style="text-align: center;"><code>3</code></td>
+   <td>{{domxref("CSSImportRule")}} : <a href="http://mxr.mozilla.org/mozilla-central/source/dom/interfaces/css/nsIDOMCSSImportRule.idl#9">IDL: nsIDOMCSSImportRule</a></td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.CHARSET_RULE</code></td>
+   <td style="text-align: center;"><code>2</code></td>
+   <td>{{domxref("CSSCharsetRule")}} {{obsolete_inline}}</td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.UNKNOWN_RULE</code></td>
+   <td style="text-align: center;"><code>0</code></td>
+   <td>{{domxref("CSSUnknownRule")}}{{obsolete_inline}}</td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.KEYFRAMES_RULE</code></td>
+   <td style="text-align: center;"><code>7</code></td>
+   <td>{{domxref("CSSKeyframesRule")}} [1] {{experimental_inline}}</td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.KEYFRAME_RULE</code></td>
+   <td style="text-align: center;"><code>8</code></td>
+   <td>{{domxref("CSSKeyframeRule")}} [1] {{experimental_inline}}</td>
+  </tr>
+  <tr>
+   <td><em>Reserved for future use</em></td>
+   <td style="text-align: center;"><code>9</code></td>
+   <td>Should be used to define color profiles in the future</td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.NAMESPACE_RULE</code></td>
+   <td style="text-align: center;"><code>10</code></td>
+   <td>{{domxref("CSSNamespaceRule")}} {{experimental_inline}}</td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.COUNTER_STYLE_RULE</code></td>
+   <td style="text-align: center;"><code>11</code></td>
+   <td>{{domxref("CSSCounterStyleRule")}} {{experimental_inline}}</td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.SUPPORTS_RULE</code></td>
+   <td style="text-align: center;"><code>12</code></td>
+   <td>{{domxref("CSSSupportsRule")}}</td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.DOCUMENT_RULE</code></td>
+   <td style="text-align: center;"><code>13</code></td>
+   <td>{{domxref("CSSDocumentRule")}} {{experimental_inline}}</td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.FONT_FEATURE_VALUES_RULE</code></td>
+   <td style="text-align: center;"><code>14</code></td>
+   <td>{{domxref("CSSFontFeatureValuesRule")}}</td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.VIEWPORT_RULE</code></td>
+   <td style="text-align: center;"><code>15</code></td>
+   <td>{{domxref("CSSViewportRule")}} {{experimental_inline}}</td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.REGION_STYLE_RULE</code></td>
+   <td style="text-align: center;"><code>16</code></td>
+   <td>{{domxref("CSSRegionStyleRule")}} {{experimental_inline}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>An up-to-date informal list of constants can be found on the <a href="http://wiki.csswg.org/spec/cssom-constants">CSSWG Wiki</a>.</p>
+
+<p>[1] On Gecko, before Firefox 19, the keyframe-related constants existed only in their prefixed version: <code>CSSRule.MOZ_KEYFRAMES_RULE</code> and <code>CSSRule.MOZ_KEYFRAME_RULE.</code> From Firefox 20 onwards, both versions are available. The prefixed version will be removed in the future.</p>
+
+<h2 id="Specification" name="Specification">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM', '#css-rules', 'CSSRule')}}</td>
+   <td>{{Spec2('CSSOM')}}</td>
+   <td>Obsoleted values <code>CHARSET_RULE</code> and <code>UNKNOWN_RULE</code>. Added value <code>NAMESPACE_RULE</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Animations",'#cssrule', 'CSSRule')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Added values <code>KEYFRAMES_RULE</code> and <code>KEYFRAME_RULE</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#om-fontfeaturevalues', 'CSSRule')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Added value <code>FONT_FEATURE_VALUES_RULE</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Counter Styles", "#extentions-to-cssrule-interface", 'CSSRule')}}</td>
+   <td>{{Spec2("CSS3 Counter Styles")}}</td>
+   <td>Added value <code>COUNTER_STYLE_RULE</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Conditional", '#extentions-to-cssrule-interface', 'CSSRule')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td>Added value <code>SUPPORTS_RULE</code>. (<code>DOCUMENT_RULE</code> has been pushed to CSS Conditional Rules Level 4)</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Style', 'css.html#CSS-CSSRule', 'CSSRule')}}</td>
+   <td>{{Spec2('DOM2 Style')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>To get browser compatibility information about the different type constant value, please consult the compatibility table of the associated interface.</p>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/DOM/Using_dynamic_styling_information">Using dynamic styling information</a></li>
+</ul>
diff --git a/files/de/web/api/customelementregistry/define/index.html b/files/de/web/api/customelementregistry/define/index.html
new file mode 100644
index 0000000000..b51ed46c37
--- /dev/null
+++ b/files/de/web/api/customelementregistry/define/index.html
@@ -0,0 +1,241 @@
+---
+title: CustomElementRegistry.define()
+slug: Web/API/CustomElementRegistry/define
+tags:
+  - API
+  - CustomElementRegistry
+  - Method
+  - Reference
+  - Web Components
+  - Webkomponente
+  - benutzerdefiniert
+  - custom elements
+  - define
+translation_of: Web/API/CustomElementRegistry/define
+---
+<p>{{APIRef("CustomElementRegistry")}}</p>
+
+<p>Die <code><strong>define()</strong></code> Methode der {{domxref("CustomElementRegistry")}} Schnittstelle beschreibt ein neues benutzerdefiniertes Element.</p>
+
+<p>Es gibt zwei Arten von benutzerdefinierten Elementen, die erstellt werden können:</p>
+
+<ul>
+ <li><strong>Autonomes benutzerdefiniertes Element:</strong> Eigenständige Elemente; Sie erben nicht von eingebauten HTML-Elementen.</li>
+ <li><strong>Angepasstes integriertes Element:</strong> Diese Elemente erben und erweitern eingebaute HTML-Elemente.</li>
+</ul>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">customElements.define(<em>name</em>, <em>constructor</em>, <em>options</em>);
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt>name</dt>
+ <dd>Name des neuen benutzerdefinierten Elements. Beachte, dass Namen von benutzerdefinierten Elementen einen Bindestrich enthalten müssen.</dd>
+ <dt>constructor</dt>
+ <dd>Konstruktor für das neue, benutzerdefinierte Element.</dd>
+ <dt>options {{optional_inline}}</dt>
+ <dd>Objekt, das steuert, wie das Element definiert ist. Eine Option wird derzeit unterstützt:
+ <ul>
+  <li><code>extends</code>: String des Namens eines integrierten Elements das erweitert werden soll. Wird verwendet um ein <em>angepasstes integriertes Element</em>  zu erzeugen<em>.</em></li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>Void.</p>
+
+<h3 id="Ausnahmebehandlung">Ausnahmebehandlung</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>NotSupportedError</code></td>
+   <td>
+    <p>Das {{domxref("CustomElementRegistry")}} enthält bereits einen Eintrag mit dem gleichen Namen oder dem gleichen Konstruktor (oder ist auf andere Weise bereits definiert), oder <code>extends</code> ist angegeben und es ist ein <a href="https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name">gültiger benutzerdefinierter Elementname</a> oder <code>extends</code> ist angegeben, aber das Element, das es zu erweitern versucht, ist ein unbekanntes Element.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>SyntaxError</code></td>
+   <td>Der angegebene Name ist kein <a href="https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name">gültiger benutzerdefinierter Elementname</a>.</td>
+  </tr>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td>Der referenzierte Konstruktor ist kein Konstruktor.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Du wirst oftmals  <code>NotSupportedError</code>s geworfen bekommen, die so erscheinen als würde <code>define()</code> fehlschlagen, aber stattdessen wahrscheinlich ein Problem mit {domxref("Element.attachShadow()")}} sind.</p>
+</div>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Autonomes_benutzerdefiniertes_Element">Autonomes benutzerdefiniertes Element</h3>
+
+<p>Der folgende Code entstammt dem <a href="https://github.com/mdn/web-components-examples/tree/master/popup-info-box-web-component">popup-info-box-web-component</a> Beispiel (<a href="https://mdn.github.io/web-components-examples/popup-info-box-web-component/">siehe Live</a>).</p>
+
+<pre class="brush: js">// Create a class for the element
+class PopUpInfo extends HTMLElement {
+  constructor() {
+    // Always call super first in constructor
+    super();
+
+    // Create a shadow root
+    var shadow = this.attachShadow({mode: 'open'});
+
+    // Create spans
+    var wrapper = document.createElement('span');
+    wrapper.setAttribute('class','wrapper');
+    var icon = document.createElement('span');
+    icon.setAttribute('class','icon');
+    icon.setAttribute('tabindex', 0);
+    var info = document.createElement('span');
+    info.setAttribute('class','info');
+
+    // Take attribute content and put it inside the info span
+    var text = this.getAttribute('text');
+    info.textContent = text;
+
+    // Insert icon
+    var imgUrl;
+    if(this.hasAttribute('img')) {
+      imgUrl = this.getAttribute('img');
+    } else {
+      imgUrl = 'img/default.png';
+    }
+    var img = document.createElement('img');
+    img.src = imgUrl;
+    icon.appendChild(img);
+
+    // Create some CSS to apply to the shadow dom
+    var style = document.createElement('style');
+
+    style.textContent = '.wrapper {' +
+                           'position: relative;' +
+                        '}' +
+
+                         '.info {' +
+                            'font-size: 0.8rem;' +
+                            'width: 200px;' +
+                            'display: inline-block;' +
+                            'border: 1px solid black;' +
+                            'padding: 10px;' +
+                            'background: white;' +
+                            'border-radius: 10px;' +
+                            'opacity: 0;' +
+                            'transition: 0.6s all;' +
+                            'position: absolute;' +
+                            'bottom: 20px;' +
+                            'left: 10px;' +
+                            'z-index: 3;' +
+                          '}' +
+
+                          'img {' +
+                            'width: 1.2rem' +
+                          '}' +
+
+                          '.icon:hover + .info, .icon:focus + .info {' +
+                            'opacity: 1;' +
+                          '}';
+
+    // attach the created elements to the shadow dom
+
+    shadow.appendChild(style);
+    shadow.appendChild(wrapper);
+    wrapper.appendChild(icon);
+    wrapper.appendChild(info);
+  }
+}
+
+// Define the new element
+customElements.define('popup-info', PopUpInfo);
+</pre>
+
+<pre class="brush: html">&lt;popup-info img="img/alt.png" text="Your card validation code (CVC) is an extra
+                                    security feature — it is the last 3 or 4
+                                    numbers on the back of your card."&gt;</pre>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Konstruktoren für autonome benutzerdefinierte Elemente müssen {{domxref("HTMLElement")}} extenden.</p>
+</div>
+
+<h3 id="Benutzerdefiniertes_integriertes_Element">Benutzerdefiniertes integriertes Element</h3>
+
+<p>Der folgende Code entstammt dem <a href="https://github.com/mdn/web-components-examples/tree/master/word-count-web-component">word-count-web-component</a> Beispiel (<a href="https://mdn.github.io/web-components-examples/word-count-web-component/">siehe Live</a>).</p>
+
+<pre class="brush: js">// Create a class for the element
+class WordCount extends HTMLParagraphElement {
+  constructor() {
+    // Always call super first in constructor
+    super();
+
+    // count words in element's parent element
+    var wcParent = this.parentNode;
+
+    function countWords(node){
+      var text = node.innerText || node.textContent
+      return text.split(/\s+/g).length;
+    }
+
+    var count = 'Words: ' + countWords(wcParent);
+
+    // Create a shadow root
+    var shadow = this.attachShadow({mode: 'open'});
+
+    // Create text node and add word count to it
+    var text = document.createElement('span');
+    text.textContent = count;
+
+    // Append it to the shadow root
+    shadow.appendChild(text);
+
+
+    // Update count when element content changes
+    setInterval(function() {
+      var count = 'Words: ' + countWords(wcParent);
+      text.textContent = count;
+    }, 200)
+
+  }
+}
+
+// Define the new element
+customElements.define('word-count', WordCount, { extends: 'p' });</pre>
+
+<pre class="brush: html">&lt;p is="word-count"&gt;&lt;/p&gt;</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "custom-elements.html#dom-customelementregistry-define", "customElements.define()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("api.CustomElementRegistry.define")}}</p>
+</div>
diff --git a/files/de/web/api/customelementregistry/index.html b/files/de/web/api/customelementregistry/index.html
new file mode 100644
index 0000000000..db8bc5b464
--- /dev/null
+++ b/files/de/web/api/customelementregistry/index.html
@@ -0,0 +1,106 @@
+---
+title: CustomElementRegistry
+slug: Web/API/CustomElementRegistry
+tags:
+  - API
+  - CustomElementRegistry
+  - Experimental
+  - Interface
+  - Landing
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - Web Components
+  - custom elements
+translation_of: Web/API/CustomElementRegistry
+---
+<p>{{DefaultAPISidebar("Web Components")}}</p>
+
+<p><span class="seoSummary">The <strong><code>CustomElementRegistry</code></strong> interface provides methods for registering custom elements and querying registered elements. To get an instance of it, use the {{domxref("window.customElements")}} property. </span></p>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("CustomElementRegistry.define()")}}</dt>
+ <dd>Defines a new <a href="/en-US/docs/Web/Web_Components/Custom_Elements">custom element</a>.</dd>
+ <dt>{{domxref("CustomElementRegistry.get()")}}</dt>
+ <dd>Returns the constuctor for the named custom element, or <code>undefined</code> if the custom element is not defined.</dd>
+ <dt>{{domxref("CustomElementRegistry.upgrade()")}}</dt>
+ <dd>Upgrades a custom element directly, even before it is connected to its shadow root.</dd>
+ <dt>{{domxref("CustomElementRegistry.whenDefined()")}}</dt>
+ <dd>Returns an empty {{jsxref("Promise", "promise")}} that resolves when a custom element becomes defined with the given name. If such a custom element is already defined, the returned promise is immediately fulfilled.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>The following code is taken from our <a href="https://github.com/mdn/web-components-examples/tree/master/word-count-web-component">word-count-web-component</a> example (<a href="https://mdn.github.io/web-components-examples/word-count-web-component/">see it live also</a>). Note how we use the {{domxref("CustomElementRegistry.define()")}} method to define the custom element after creating its class.</p>
+
+<pre class="brush: js">// Create a class for the element
+class WordCount extends HTMLParagraphElement {
+  constructor() {
+    // Always call super first in constructor
+    super();
+
+    // count words in element's parent element
+    var wcParent = this.parentNode;
+
+    function countWords(node){
+      var text = node.innerText || node.textContent
+      return text.split(/\s+/g).length;
+    }
+
+    var count = 'Words: ' + countWords(wcParent);
+
+    // Create a shadow root
+    var shadow = this.attachShadow({mode: 'open'});
+
+    // Create text node and add word count to it
+    var text = document.createElement('span');
+    text.textContent = count;
+
+    // Append it to the shadow root
+    shadow.appendChild(text);
+
+
+    // Update count when element content changes
+    setInterval(function() {
+      var count = 'Words: ' + countWords(wcParent);
+      text.textContent = count;
+    }, 200)
+
+  }
+}
+
+// Define the new element
+customElements.define('word-count', WordCount, { extends: 'p' });</pre>
+
+<div class="note">
+<p>Note: The CustomElementRegistry is available through the {{domxref("Window.customElements")}} property.</p>
+</div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "custom-elements.html#customelementregistry", "CustomElementRegistry")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p> </p>
+
+
+
+<p>{{Compat("api.CustomElementRegistry")}}</p>
+
+<p> </p>
diff --git a/files/de/web/api/dedicatedworkerglobalscope/index.html b/files/de/web/api/dedicatedworkerglobalscope/index.html
new file mode 100644
index 0000000000..2aaef1f2e7
--- /dev/null
+++ b/files/de/web/api/dedicatedworkerglobalscope/index.html
@@ -0,0 +1,114 @@
+---
+title: DedicatedWorkerGlobalScope
+slug: Web/API/DedicatedWorkerGlobalScope
+translation_of: Web/API/DedicatedWorkerGlobalScope
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>Auf das <strong><code>DedicatedWorkerGlobalScope</code></strong> Objekt (Der globale Scope des {{domxref("Worker")}}) kann durch das Schlüsselwort {{domxref("window.self","self")}} zugegriffen werden. Einzelne weitere globale Funktionen, namespace Objekte und Konstruktoren, die nicht typischerweise mit dem Scope des Workers in Verbindung stehen, jedoch darauf verfügbar sind, können in der <a href="/en-US/docs/Web/JavaScript/Reference">JavaScript Reference</a> gefunden werden. Siehe auch: <a href="/en-US/docs/Web/Guide/Needs_categorization/Functions_available_to_workers">Functions available to workers</a>.</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<p><em>Dieses Interface erbt seine Eigenschaften aus dem Interface <em>{{domxref("WorkerGlobalScope")}} und seinem übergeordneten Interface {{domxref("EventTarget")}}. Deshalbt implementiert es die Eigenschaften {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, und {{domxref("WindowEventHandlers")}}.</em></em></p>
+
+<dl>
+ <dt>{{domxref("DedicatedWorkerGlobalScope.name")}} {{readOnlyinline}}</dt>
+ <dd>Der dem {{domxref("Worker")}} (optional) gegebene Name, als er im Konstruktor {{domxref("Worker.Worker", "Worker()")}} erzeugt wurde. Hauptsächlich nützlich für Debuggin.</dd>
+</dl>
+
+<h3 id="Von_WorkerGlobal_Scope_geerbte_Eigenschaften">Von WorkerGlobal Scope geerbte Eigenschaften</h3>
+
+<dl>
+ <dt>{{domxref("WorkerGlobalScope.self")}}</dt>
+ <dd>Gibt eine Objektreferenz auf das <code>DedicatedWorkerGlobalScope</code> Objekt selbst zurück.</dd>
+ <dt>{{domxref("WorkerGlobalScope.console")}} {{readOnlyinline}}</dt>
+ <dd>Gibt das mit dem Worker verbundene {{domxref("Console")}} Objekt zurück.</dd>
+ <dt>{{domxref("WorkerGlobalScope.location")}} {{readOnlyinline}}</dt>
+ <dd>Gibt das mit dem Worker verbundene {{domxref("WorkerLocation")}} Objekt zurück. Bei <code>WorkerLocation</code> handelt es sich um ein spezifisches location Objekt, welches aus Teilen des {{domxref("Location")}} Objekts des Browserscope besteht,  jedoch für den Worker angepasst wurde.</dd>
+ <dt>{{domxref("WorkerGlobalScope.navigator")}} {{readOnlyinline}}</dt>
+ <dd>Git das mit dem Worker verbundene {{domxref("WorkerNavigator")}} Objekt  zurück. Bei <code>WorkerNavigator </code>handelt es sich um ein spezifisches navigations Objekt, welches aus Teilen des {{domxref("Navigator")}} Objekts des Browserscope besteht, jedoch für den Worker angepasst wurde.</dd>
+ <dt>{{domxref("WorkerGlobalScope.performance")}} {{readOnlyinline}} {{Non-standard_inline}}</dt>
+ <dd>Git das mit dem Worker verbunde {{domxref("Performance")}} Objekt zurück. Dabei handelt es sich um ein reguläres performance Objekt,  welches jedoch nur teile der Eigenschaften und Methoden umfasst.</dd>
+</dl>
+
+<h3 id="Eventhandler">Eventhandler</h3>
+
+<p><em>Dieses Interface erbt seine Eventhandler  aus dem Interface {domxref("WorkerGlobalScope")}} und seinen übergeordneten Interface {{domxref("EventTarget")}}. Deshalb sind Eventhandler {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, und {{domxref("WindowEventHandlers")}} implementiert.</em></p>
+
+<dl>
+ <dt>{{domxref("DedicatedWorkerGlobalScope.onmessage")}}</dt>
+ <dd>Der entsprechende Code eines {{domxref("EventHandler")}} der beim Aufruf des Events {{event("message")}} aufgerufen wird. Diese Events sind vom Typ {{domxref("MessageEvent")}} und werden aufgerufen, wenn der Worker eine Nachricht aus dem Dokument erhält, welcher Ihn gestartet hat (Beispiel: {{domxref("Worker.postMessage")}} Methode.) </dd>
+ <dt>{{domxref("DedicatedWorkerGlobalScope.onmessageerror")}}</dt>
+ <dd>Der entsprechende Code eines {{domxref("EventHandler")}} der beim Aufruf des Events {{event("messageerror")}} aufgerufen wird.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<p><em>Dieses Interface erbt seine Methoden aus dem Interface {{domxref("WorkerGlobalScope")}} und seinen übergordneten Interface {{domxref("EventTarget")}}. Dementsprechend implementiert es Methoden von {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, und {{domxref("WindowEventHandlers")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("DedicatedWorkerGlobalScope.close()")}}</dt>
+ <dd>Verwirft alle im <code>WorkerGlobalScope</code>'s Eventloop eingereihten Aufgaben und schließt den entsprechenden Scope.</dd>
+ <dt>{{domxref("DedicatedWorkerGlobalScope.postMessage()")}}</dt>
+ <dd>Sendet eine Nachricht — welche aus Javascript Objecten vom Typ <code>any</code> bestehen — zum übergeordneten Dokument, welches den Worker gestartet hat.</dd>
+</dl>
+
+<h3 id="Geerbt_vom_WorkerGlobalScope">Geerbt vom WorkerGlobalScope</h3>
+
+<dl>
+ <dt>{{domxref("WorkerGlobalScope.dump()")}} {{non-standard_inline}}</dt>
+ <dd>Gibt eine Nachricht in der Konsole aus.</dd>
+ <dt>{{domxref("WorkerGlobalScope.importScripts()")}}</dt>
+ <dd>Importiert ein oder mehrere Skripte in den Worker Scope. Es ist möglich beliebig viele, durch Kommas getrennt, zu spezifizieren. Beispiel: <code>importScripts('foo.js', 'bar.js');</code></dd>
+</dl>
+
+<h3 id="Aus_verschiedenen_Orten_implementiert">Aus verschiedenen Orten implementiert</h3>
+
+<dl>
+ <dt>{{domxref("WindowBase64.atob()")}}</dt>
+ <dd>Dekodiert einen String von Daten welcher mit base-64 codiert wurde.</dd>
+ <dt>{{domxref("WindowBase64.btoa()")}}</dt>
+ <dd>Erzeugt einen base-64 codierten ASCII String aus einem String von Binärdaten.</dd>
+ <dt>{{domxref("WindowTimers.clearInterval()")}}</dt>
+ <dd>Bricht die wiederholte Ausführung mit {{domxref("WindowTimers.setInterval()")}} ab.</dd>
+ <dt>{{domxref("WindowTimers.clearTimeout()")}}</dt>
+ <dd>Bricht die wiederholte Ausführung mit {{domxref("WindowTimers.setTimeout()")}} ab.</dd>
+ <dt>{{domxref("WindowTimers.setInterval()")}}</dt>
+ <dd>Plant die Ausführung einer Funktion alle X Millisekunden</dd>
+ <dt>{{domxref("WindowTimers.setTimeout()")}}</dt>
+ <dd>Setzt eine X Millisekunden Verzögerung für die Ausführung einer Funktion</dd>
+</dl>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dedicatedworkerglobalscope', 'DedicatedWorkerGlobalScope')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("api.DedicatedWorkerGlobalScope")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{domxref("Worker")}}</li>
+ <li>{{domxref("WorkerGlobalScope")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
+ <li><a href="/en-US/docs/Web/Guide/Needs_categorization/Functions_available_to_workers">Functions available to workers</a></li>
+</ul>
diff --git a/files/de/web/api/dedicatedworkerglobalscope/message_event/index.html b/files/de/web/api/dedicatedworkerglobalscope/message_event/index.html
new file mode 100644
index 0000000000..8e457d414a
--- /dev/null
+++ b/files/de/web/api/dedicatedworkerglobalscope/message_event/index.html
@@ -0,0 +1,83 @@
+---
+title: 'DedicatedWorkerGlobalScope: message event'
+slug: Web/API/DedicatedWorkerGlobalScope/message_event
+translation_of: Web/API/DedicatedWorkerGlobalScope/message_event
+---
+<div>{{APIRef}}</div>
+
+<p><font><font>Das </font></font><code>message</code><font><font>Ereignis wird auf ein </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/DedicatedWorkerGlobalScope"><code>DedicatedWorkerGlobalScope</code></a><font><font>Objekt </font><font>ausgelöst, </font><font>wenn der Worker eine Nachricht von seinem übergeordneten Objekt empfängt (dh wenn der übergeordnete Benutzer eine Nachricht sendet mit </font></font><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker/postMessage">Worker.postMessage()</a></code><font><font>).</font></font></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bubbles</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Cancelable</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("MessageEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Event handler property</th>
+   <td><code><a href="/en-US/docs/Web/API/DedicatedWorkerGlobalScope/onmessage">onmessage</a></code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples">Examples</h2>
+
+<p>Dieser Code erstellt einen neuen Worker und sendet ihm eine Nachricht mit <code><a href="/en-US/docs/Web/API/Worker/postMessage">Worker.postMessage()</a></code>:</p>
+
+<pre class="brush: js notranslate">const worker = new Worker("static/scripts/worker.js");
+
+worker.addEventListener('message', (event) =&gt; {
+    console.log(`Received message from worker: ${event.data}`)
+});</pre>
+
+<p>Der Worker kann auf diese Nachricht warten, indem er <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> verwendet:</p>
+
+<pre class="brush: js notranslate">// inside static/scripts/worker.js
+
+self.addEventListener('message', (event) =&gt; {
+    console.log(`Received message from parent: ${event.data}`);
+});</pre>
+
+<p>Alternativ könnte er es mit der <code><a href="/en-US/docs/Web/API/DedicatedWorkerGlobalScope/onmessage">onmessage</a></code> <font>Event-Handler-Eigenschaft </font><font>abhören</font>:</p>
+
+<pre class="brush: js notranslate">// static/scripts/worker.js
+
+self.onmessage = (event) =&gt; {
+    console.log(`Received message from parent: ${event.data}`);
+};</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'indices.html#event-message')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.DedicatedWorkerGlobalScope.message_event")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Verwandte Ereignisse: <code><a href="/docs/Web/API/DedicatedWorkerGlobalScope/messageerror_event">messageerror</a></code>.</li>
+ <li><code><a href="/en-US/docs/Web/API/Worker/postMessage">Worker.postMessage()</a></code>.</li>
+</ul>
diff --git a/files/de/web/api/document/adoptnode/index.html b/files/de/web/api/document/adoptnode/index.html
new file mode 100644
index 0000000000..c996e689c5
--- /dev/null
+++ b/files/de/web/api/document/adoptnode/index.html
@@ -0,0 +1,53 @@
+---
+title: Document.adoptNode()
+slug: Web/API/Document/adoptNode
+translation_of: Web/API/Document/adoptNode
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<div> </div>
+
+<p>Überträgt einen Knoten. Der Knoten und sein Unterbaum werden aus dem Dokument, in dem sie sich befinden entfernt (so vorhanden), und sein <code><a href="/en-US/docs/DOM/Node.ownerDocument" title="DOM/Node.ownerDocument">ownerDocument</a></code> wird zu dem aktuellen Dokument geändert. Der Knoten kann dann in das aktuelle Dokument eingefügt werden.</p>
+
+<p><strong>Unterstützt seit Gecko 1.9 (Firefox 3)</strong></p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>knoten</var> = <em>document</em>.adoptNode(<var>externerKnoten</var>);
+</pre>
+
+<dl>
+ <dt><code><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span>knoten</code></dt>
+ <dd>Ist der übertragene Knoten, welcher nun dieses Dokument als sein <code><a href="/en-US/docs/DOM/Node.ownerDocument" title="DOM/Node.ownerDocument">ownerDocument</a> </code>hat.  Der Elternknoten (<code><a href="/en-US/docs/DOM/Node.parentNode">parentNode</a></code>) is <code>null</code>, da er noch nicht in den Dokumentenbaum eingefügt wurde. Zu beachten ist, dass <code>knoten</code> und <code>externerKnoten</code> nach dem Funktionsaufruf das gleiche Objekt sind.<span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span></dd>
+ <dt><code>externerKnoten</code></dt>
+ <dd>Ist der Knoten eines anderes Dokumentes, der übertragen werden soll.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Beispiel</h2>
+
+<p>{{todo}}</p>
+
+<h2 id="Notes" name="Notes">Anmerkungen</h2>
+
+<p>Es kann oassieren, dass der Aufruf von <code>adoptNode</code> fehlschlägt, wenn der Ursprungsknoten von einer anderen Implementierung kommt, was aber bei Browser-Implementierungen kein Problem darstellen sollte.</p>
+
+
+<p></p><p>Nodes from external documents should be cloned using <a href="/de/docs/Web/API/Document/importNode" title="Die Document-Methode importNode() erzeugt eine neue Kopie eines konkreten Knotens (Node) oder Dokumenten-Fragments (DocumentFragment) eines anderen Dokuments, so dass diese dann in das aktuelle Dokument eingefügt werden kann. "><code>document.importNode()</code></a> (or adopted using <a href="/de/docs/Web/API/Document/adoptNode" title="Überträgt einen Knoten. Der Knoten und sein Unterbaum werden aus dem Dokument, in dem sie sich befinden entfernt (so vorhanden), und sein ownerDocument wird zu dem aktuellen Dokument geändert. Der Knoten kann dann in das aktuelle Dokument eingefügt werden."><code>document.adoptNode()</code></a>) before they
+    can be inserted into the current document. For more on the <a class="new" href="/de/docs/Web/API/Node/ownerDocument" rel="nofollow" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben. Bitte überlege, mitzuwirken!"><code>Node.ownerDocument</code></a> issues, see the
+    <a class="external" href="http://www.w3.org/DOM/faq.html#ownerdoc" rel="noopener">W3C DOM FAQ</a>.</p>
+
+    <p>Firefox doesn't currently enforce this rule (it did for a while during the development of Firefox 3, but too many
+    sites break when this rule is enforced). We encourage Web developers to fix their code to follow this rule for
+    improved future compatibility.</p><p></p>
+
+<h2 id="Specification" name="Specification">Spezifikation</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Document3-adoptNode">DOM Level 3 Core: Document.adoptNode</a></li>
+</ul>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/document.importNode">document.importNode</a></li>
+</ul>
diff --git a/files/de/web/api/document/alinkcolor/index.html b/files/de/web/api/document/alinkcolor/index.html
new file mode 100644
index 0000000000..0c656de5cc
--- /dev/null
+++ b/files/de/web/api/document/alinkcolor/index.html
@@ -0,0 +1,30 @@
+---
+title: Document.alinkColor
+slug: Web/API/Document/alinkColor
+translation_of: Web/API/Document/alinkColor
+---
+<p>{{APIRef("DOM")}} {{ Deprecated_header() }}</p>
+
+<p>Gibt das Farbattribut eines aktiven Links im Dokumenten body wieder oder setzt es. Ein Link wird in der Zeit eines <code>mousedown</code> und <code>mouseup</code> Events als "aktiv" bezeichnet .</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="eval"><em>color</em> = document.alinkColor
+document.alinkColor =<em>color</em>
+</pre>
+
+<p><code>color</code> ist ein String der den Namen der Farbe (z.B., <code>"blue"</code>, <code>"darkblue"</code>, etc.) oder  den Hexadezimalwert der Farbe(z.B., <code>#0000FF</code>) enthält. Die Farben samt zugehöriger Hexadezimalcodes können zum Teil hier oder auf ähnlichen Seiten eingesehen werden: <a href="https://html-color-codes.info/">https://html-color-codes.info/ </a></p>
+
+<h2 id="Notes" name="Notes">Anmerkungen</h2>
+
+<p>Der Default Wert dieser Eigenschaft in Mozilla Firefox ist rot (<code>#ee0000</code> in hexadezimal).</p>
+
+<p><code>document.alinkColor</code> ist laut <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">DOM Level 2 HTML</a> veraltet. Eine Alternative wäre der CSS Selektor {{ Cssxref(":active") }}.</p>
+
+<p>Eine weitere Alternative ist <code>document.body.aLink</code>, obwohl diese laut<a class="external" href="http://www.w3.org/TR/html401/struct/global.html#adef-alink"> HTML 4.01</a> ebenfalls veraltet ist und der CSS Selektor präferiert wird.</p>
+
+<p><a href="en/Gecko">Gecko</a> unterstützt sowohl <code>alinkColor</code>/<code>:active</code> als auch{{ Cssxref(":focus") }}. Der Internet Explorer 6 und 7 unterstützen lediglich <code>alinkColor</code>/<code>:active</code> für <a href="en/HTML/Element/a"> HTML anchor (&lt;a&gt;) links</a> und verhält sich ähnlich wie <code>:focus</code> bei Gecko. <code>:focus</code> wird im IE nicht unterstützt.</p>
+
+<h2 id="Specification" name="Specification">Browser compatibility</h2>
+
+<p>{{Compat("api.Document.alinkColor")}}</p>
diff --git a/files/de/web/api/document/body/index.html b/files/de/web/api/document/body/index.html
new file mode 100644
index 0000000000..cc546cb0ae
--- /dev/null
+++ b/files/de/web/api/document/body/index.html
@@ -0,0 +1,140 @@
+---
+title: Document.body
+slug: Web/API/Document/body
+translation_of: Web/API/Document/body
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Gibt den {{HTMLElement("body")}} oder {{HTMLElement("frameset")}} Knoten des aktuellen Dokuments wieder, oder <code>null</code> falls keines dieser Elemente existiert.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>var objRef</em> = document.body;
+document.body = <em>objRef;</em></pre>
+
+<h2 id="Example" name="Example">Beispiel</h2>
+
+<pre class="brush:js">// in HTML: &lt;body id="oldBodyElement"&gt;&lt;/body&gt;
+alert(document.body.id); // "oldBodyElement"
+
+var aNewBodyElement = document.createElement("body");
+
+aNewBodyElement.id = "newBodyElement";
+document.body = aNewBodyElement;
+alert(document.body.id); // "newBodyElement"
+</pre>
+
+<h2 id="Notes" name="Notes">Anmerkungen</h2>
+
+<p><code>document.body</code> ist das Element, welches den Inhalt eines Dokuments enthält. In Dokumenten mit <code>&lt;body&gt;</code> Inhalt, gibt das <code>&lt;body&gt;</code> Element den Inhalt aus, in Frameset Dokumenten wiederum, wird das äußerste <code>&lt;frameset&gt;</code> Element ausgegeben.</p>
+
+<p>Da <code>body</code> setzbar ist, wird das Setzen eines neuen Body Elements alle aktuellen Elemente des existierenden <code>&lt;body&gt;</code> Elements entfernen.</p>
+
+<h2 id="Specification" name="Specification">Spezifikation</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','dom.html#dom-document-body','Document.body')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1','dom.html#dom-document-body','Document.body')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C','dom.html#dom-document-body','Document.body')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML','html.html#ID-56360201','Document.body')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1','level-one-html.html#attribute-body','Document.body')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>2</td>
+   <td>6</td>
+   <td>9.6 (möglicherweise früher)</td>
+   <td>4 (möglicherweise früher)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<p> </p>
+
+<div class="warning">
+<ol>
+ <li>
+  <p>Obwohl <code>document.body</code> eine sehr gute Methode ist, um das <code>&lt;body&gt;</code> Element in HTML anzusprechen, wird es von Firefox nicht unterstützt, wenn der <code>Content-Type</code> nicht <code>text/html</code> oder <code>application/xhtml+xml</code> ist. Eine sicherere Methode um das <code>&lt;body&gt;</code> Element anzusprechen ist es, <code>document.getElementsByTagName("body")</code> zu verwenden, welches einen Array mit einem einzigen Item ausgibt. Das ist übertragbar auf HTML und XHTML. Bei denen ist der <code>Content-Type</code> nicht im HTTP response header angegeben.</p>
+ </li>
+</ol>
+</div>
+
+<p> </p>
+
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>5 (probably earlier)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{domxref("document.head")}}</li>
+</ul>
diff --git a/files/de/web/api/document/createattribute/index.html b/files/de/web/api/document/createattribute/index.html
new file mode 100644
index 0000000000..009c6c898d
--- /dev/null
+++ b/files/de/web/api/document/createattribute/index.html
@@ -0,0 +1,76 @@
+---
+title: Document.createAttribute()
+slug: Web/API/Document/createAttribute
+tags:
+  - API
+  - DOM
+  - Méthode
+  - Referenz
+translation_of: Web/API/Document/createAttribute
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<p><strong>createAttribute</strong> erstellt einen neuen Attributsknoten und gibt ihn zurück.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>attribute</em> = document.createAttribute(name)
+</pre>
+
+<h3 id="Parameters" name="Parameters">Parameter</h3>
+
+<ul>
+ <li><code>attribute</code> ist ein Attributsknoten.</li>
+ <li><code>name</code> ist ein String, der den Namen des Attributs enthält.</li>
+</ul>
+
+<h2 id="Example" name="Example">Beispiel</h2>
+
+<pre class="brush:js">&lt;html&gt;
+
+&lt;head&gt;
+&lt;title&gt; create/set/get Attribut Beispiel&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function doAttrib() {
+  var node = document.getElementById("div1");
+  var a = document.createAttribute("my_attrib");
+  a.value = "newVal";
+  node.setAttributeNode(a);
+  alert(node.getAttribute("my_attrib")); // "newVal"
+}
+
+// Alternative form ohne die Verwendung von createAttribute
+//function doAttrib() {
+//  var node = document.getElementById("div1");
+//  node.setAttribute("my_attrib", "newVal");
+//  alert(node.getAttribute("my_attrib")); // "newVal"
+//}
+
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onload="doAttrib();"&gt;
+&lt;div id="div1"&gt;
+&lt;p&gt;Some content here&lt;/p&gt;
+&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Bemerkungen</h2>
+
+<p>Der Rückgabewert ist ein Knoten des Typs <code>attribute</code>. Sobald man diesen wie im vorangegangenen Beispiel hat, kann man ihren Wert festlegen, indem man der <code>nodeValue</code> <em>property</em> einen String zuweist, oder in der alternativen Form durch Benutzung der <a href="/en-US/docs/DOM/element.setAttribute" title="DOM/element.setAttribute">setAttribute()</a> Methode. Der DOM beschränkt auf diese Art nicht, welche Arten von Attributen an das jeweilige Element zugewiesen werden dürfen.</p>
+
+<h2 id="Specification" name="Specification">Spezifikation</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-1084891198">createAttribute </a></li>
+</ul>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{domxref("document.createElement")}}</li>
+</ul>
diff --git a/files/de/web/api/document/createdocumentfragment/index.html b/files/de/web/api/document/createdocumentfragment/index.html
new file mode 100644
index 0000000000..e7ba848e49
--- /dev/null
+++ b/files/de/web/api/document/createdocumentfragment/index.html
@@ -0,0 +1,137 @@
+---
+title: Document.createDocumentFragment()
+slug: Web/API/Document/createDocumentFragment
+tags:
+  - API
+  - DOM
+  - Document
+  - DocumentFragment
+  - Method
+  - Reference
+translation_of: Web/API/Document/createDocumentFragment
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>Erzeugt ein neues {{domxref("DocumentFragment")}} Objekt.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <var>fragment</var> = document.createDocumentFragment();
+</pre>
+
+<p><code>fragment</code> ist hierbei eine Referenz zu einem neu erstellten, leeren {{domxref("DocumentFragment")}} Objekt.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p><code>DocumentFragment</code>s sind DOM Knoten (DOM Nodes). Sie sind nicht Teil des Haupt- oder Seiten-DOM-Baums. Üblicherweise werden sie verwendet, um einen Teilbaum mit Objekten und Unterobjekten zu erstellen und das Ergebnis anschließend in den Seiten-DOM-Baum einzufügen. In dem DOM-Baum wird das document fragment dann ersetzt mit allen Kindelementen.</p>
+
+<p>Da das gesamte DocumentFragment <strong>nur im Speicher</strong> vorliegt ("in memory"<strong>)</strong> und nicht Teil des Seiten-DOM-Baums ist, führen Veränderungen in dem DocumentFragment, wie etwa das Hinzufügen von Elementen, nicht zu einem page <a href="https://developers.google.com/speed/articles/reflow?csw=1">reflow</a> (die Berechnung der Element Positionen und Geometrie). Dementsprechend führt die Nutzung von DocumentFragments zu einer <a href="http://ejohn.org/blog/dom-documentfragments/">besseren Performance</a>.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Dieses Beispiel erzeugt eine Liste gängiger Browser.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul id="ul"&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var element  = document.getElementById('ul'); // assuming ul exists
+var fragment = document.createDocumentFragment();
+var browsers = ['Firefox', 'Chrome', 'Opera',
+    'Safari', 'Internet Explorer'];
+
+browsers.forEach(function(browser) {
+    var li = document.createElement('li');
+    li.textContent = browser;
+    fragment.appendChild(li);
+});
+
+element.appendChild(fragment);
+</pre>
+
+<h3 id="Resultat">Resultat</h3>
+
+<p>{{EmbedLiveSample("Example", 600, 140)}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkungen</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-document-createdocumentfragment', 'Document.createDocumentFragment()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initiale Definition in der DOM 1 Spezifikation</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("DOMImplementation.createDocument", "document.implementation.createDocument()")}}</li>
+ <li>{{domxref("documentFragment")}}</li>
+</ul>
diff --git a/files/de/web/api/document/createelement/index.html b/files/de/web/api/document/createelement/index.html
new file mode 100644
index 0000000000..8b053c1379
--- /dev/null
+++ b/files/de/web/api/document/createelement/index.html
@@ -0,0 +1,153 @@
+---
+title: Document.createElement()
+slug: Web/API/Document/createElement
+tags:
+  - API
+  - DOM
+  - Document
+  - Method
+  - Méthode
+translation_of: Web/API/Document/createElement
+---
+<div>{{APIRef("DOM")}}</div>
+
+
+
+<p>In einem <a href="/de/docs/Web/HTML">HTML </a>Dokument erstellt die <strong><code>Document.createElement()</code></strong> Methode ein spezifiziertes HTML Element oder ein {{domxref("HTMLUnknownElement")}} wenn der gegebene Elementname ein unbekannter ist.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>var <em>element</em></var> = <var>document</var>.createElement(<em><var>tagName</var></em>, [optionen]);
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><strong><code>tagName</code></strong></dt>
+ <dd>Ein String der den Typ des zu erstellenden Elements spezifiziert. Der/Die/Das {{domxref("Node.nodeName", "nodeName")}} des erstellten Elements ist mit dem Wert von <code>tagName</code> initialisiert. Benutze keine qualifizierten Namen (wie "html:a") mit dieser Methode.</dd>
+ <dt><code>optionen</code> {{optional_inline}}</dt>
+ <dd>Ein optionales <code>ElementCreationOptions</code>-Objekt, welches eine einzige Eigenschaft namens <code>is</code> besitzt, deren Wert der Name des Tags für ein benutzerdefiniertes Element ist. Dieses benutzerdefinierte Element muss vorher mit <code>customElements.define()</code> definiert werden. Für mehr Informationen siehe {{anch("Web component example")}}.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Das neue <code><a href="/de/docs/Web/API/Element">Element</a></code>.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Grundlegendes_Beispiel">Grundlegendes Beispiel</h3>
+
+<p>Dies erstellt ein neues <code>&lt;div&gt;</code> und fügt es vor dem Element mit der ID <code>div1</code> ein.</p>
+
+<div>
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;||Arbeiten mit Elementen||&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;div id="div1"&gt;Der obere Text wurde dynamisch erstellt.&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<h4 id="JavaScript"><span style="line-height: normal;">JavaScript</span></h4>
+
+<pre class="brush:js">document.body.onload = addElement;
+
+function addElement () {
+  // erstelle ein neues div Element
+  // und gib ihm etwas Inhalt
+  var newDiv = document.createElement("div");
+  var newContent = document.createTextNode("Hi there and greetings!");
+  newDiv.appendChild(newContent); // füge den Textknoten zum neu erstellten div hinzu.
+
+  // füge das neu erstellte Element und seinen Inhalt ins DOM ein
+  var currentDiv = document.getElementById("div1");
+  document.body.insertBefore(newDiv, currentDiv);
+}
+</pre>
+
+<p>{{EmbedLiveSample("Basic_example", 500, 50)}}</p>
+
+<h3 id="Web-Komponentenbeispiel">Web-Komponentenbeispiel </h3>
+
+<p>Das folgende Beispiel wurde aus dem Beispiel expanding-list-web-component entnommen (Siehe es live). In diesem Fall erweitert unser Custom-Element die {{domxref("HTMLUListElement")}}, welche das {{htmlelement("ul")}}  Element repräsentiert. </p>
+
+<pre><code>// Erstelle eine Klasse für das Element
+class ExpandingList extends HTMLUListElement {
+  constructor() {
+    // Rufe immer super() in einem Konstruktor auf.
+    super();
+
+    // Konstruktordefinition wurde der kürze halber weggelassen
+    ...
+  }
+}
+
+// Definiere das neue Element
+customElements.define('expanding-list', ExpandingList, { extends: "ul" });</code></pre>
+
+<p>Würden wir eine Instanz dieses Elements programmatisch erstellen wollen, so würden wir einen Aufruf über den folgenden Ausschnitt machen: </p>
+
+<pre><code>let expandingList = document.createElement('ul', { is : 'expanding-list' })</code></pre>
+
+<p>Dem neuen Element wird ein <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/is">is</a></code> Attribut hinzugefügt, dessen Wert das Custom-Element's Tag-Name ist. </p>
+
+<div class="note">
+<p><strong>Notiz:</strong> Für Backwards-Kompatiblität mit früheren Versionen der Spezifikationen des Custom-Elements, erlauben einige Browser einen String, statt einem Objekt, als Parameter zu übergeben, wobei der Wert des Strings der Tag-Name des Custom-Elements ist. </p>
+</div>
+
+<h2 id="Notizen">Notizen</h2>
+
+<ul>
+ <li>Beim Aufruf auf ein als Dokument-Objekt gekennzeichnetes HTML-Dokument schreibt <code>createElement()</code> seine Argumente in Kleinbuchstaben, bevor es das diese erstellt.</li>
+ <li>Um ein Element mit qualifizierem Namen und namespace URl zu erstellen nutze {{ domxref("document.createElementNS()") }} stattessen .</li>
+ <li>Vor Gecko 2.0 {{ geckoRelease("2.0") }}, konntest du abgewinkelte Klammern (&lt; und &gt;)  um <code>tagName</code> im Quirks-Modus setzen; seit Gecko 2.0 verhält sich die Funktion im Quirks-Modus und im Standard-Modus gleich.</li>
+ <li>Seit Gecko 19.0 {{geckoRelease("19.0")}} <code>createElement(null)</code> hat das gleiche bewirkt wie <code>createElement("null")</code>.  Bemerke, dass Opera funktioniert mit null ebenfalls, während Chrome und Internet Explorer beide Fehler ausgeben würden.</li>
+ <li>Seit Gecko 22.0 {{geckoRelease("22.0")}} benutzt <code>createElement()</code> nicht mehr die  {{domxref("HTMLSpanElement")}} Schnittstelle, wenn das Argument "bgsounds", "multicol", oder "image" ist. Stattdessen wird <code>HTMLUnknownElement</code> für"bgsound" und "multicol" verwendet, und {{domxref("HTMLElement")}} <code>HTMLElement</code> wird für "image" verwendet.</li>
+ <li>Die Gecko Implementierung von <code>createElement</code> ist nicht konform mit der DOM Spezifikation für  XUL und XHTML Dokumente: <code>localName</code> und <code>namespaceURI</code> werden beim erstellten Element nicht auf <code>null</code> gesetzt.<code>.</code> Siehe auch  {{ Bug(280692) }} für weitere Details.</li>
+</ul>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-2141741547">DOM 2 Core: createElement</a></li>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML5: APIs in HTML documents</a></li>
+</ul>
+
+<h2 id="Browser-Kompatibiltät">Browser-Kompatibiltät</h2>
+
+<p>{{Compat("api.Document.createElement")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+
+
+<ul>
+ <li>{{domxref("Node.removeChild()")}}</li>
+ <li>{{domxref("Node.replaceChild()")}}</li>
+ <li>{{domxref("Node.appendChild()")}}</li>
+ <li>{{domxref("Node.insertBefore()")}}</li>
+ <li>{{domxref("Node.hasChildNodes()")}}</li>
+ <li>{{domxref("document.createElementNS()")}} — um die Namespace-URL explizit anzugeben.</li>
+</ul>
diff --git a/files/de/web/api/document/createelementns/index.html b/files/de/web/api/document/createelementns/index.html
new file mode 100644
index 0000000000..3f310fdb49
--- /dev/null
+++ b/files/de/web/api/document/createelementns/index.html
@@ -0,0 +1,175 @@
+---
+title: Document.createElementNS()
+slug: Web/API/Document/createElementNS
+translation_of: Web/API/Document/createElementNS
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<div>Erzeugt ein Element mit der angegebenen Namespace-URL und einem Namen.</div>
+
+<div> </div>
+
+<div>Um ein Element zu definieren, ohne eine Namespace-URL anzugeben, verwenden Sie die Methode <a href="createElement" title="createElement">createElement</a>.</div>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="brush: js"><var>var element</var> = <var>document</var>.createElementNS(<var>namespaceURI</var>, <var>qualifiedName</var>[, options]);
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>namespaceURI</code></dt>
+ <dd>Ein String, der die mit dem Element verknüpfte <a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/glossary.html#dt-namespaceURI">Namespace-URL</a> angibt. Die Eigenschaft <a href="/en-US/docs/DOM/element.namespaceURI">namespaceURI</a> des neu erstellten Elements wird mit dem Wert von <code>namespaceURI</code> initialisiert (siehe <a href="#Valid Namespace URIs">Gültige Namespace-URLs</a>).</dd>
+ <dt><code>qualifiedName</code></dt>
+ <dd>Ein String, der den Namen des Elements angibt. Die Eigenschaft <a href="/en-US/docs/DOM/element.nodeName">nodeName</a> des neu erstellten Elements wird mit dem Wert von <code>qualifiedName</code> initialisiert.</dd>
+ <dt><code>options</code><span class="inlineIndicator optional optionalInline">Optional</span></dt>
+ <dd>Das optionale Objekt <code>ElementCreationOptions</code> enthält eine einzelne Eigenschaft mit Namen  <code>is</code>, dessen Wert der Tag-Name eines zuvor mit <code>customElements.define()</code> definierten angepassten Elements ist. Aus Gründen der Abwärtskompatibilität erlauben einige Browser hier auch die Übergabe eines Strings mit dem Taf-Namen (s. <a class="external external-icon" href="https://www.w3.org/TR/custom-elements/">Custom Elements specification</a>). Siehe <a class="external external-icon" href="https://developers.google.com/web/fundamentals/primers/customelements/#extendhtml">Extending native HTML elements</a> für weitere Informationen zur Verwendung dieses Parameters.</dd>
+ <dd>Das neue Element erhält ein Attribut mit Namen <code>is</code> dessen Wert den Tag-Namen des Elements enthält. Angepasste Elemente sind ein experimentelles Feature, das nich in allen Browsern verfügbar ist.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Das neu erstelle <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element" title="The Element interface represents an object of a Document. This interface describes methods and properties common to all kinds of elements. Specific behaviors are described in interfaces which inherit from Element but add additional functionality."><code>Element</code></a>.</p>
+
+<h2 id="Example" name="Example"><a id="Valid Namespace URIs" name="Valid Namespace URIs">Gültige Namespace-URLs</a></h2>
+
+<ul>
+ <li>HTML - <code>http://www.w3.org/1999/xhtml</code></li>
+ <li>SVG - <code>http://www.w3.org/2000/svg</code></li>
+ <li>XBL - <code>http://www.mozilla.org/xbl</code></li>
+ <li>XUL - <code>http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</code></li>
+</ul>
+
+<h2 id="Example" name="Example">Beispiel</h2>
+
+<p>Dies erstellt ein neues Element vom Typ &lt;div&gt; im <a href="/en-US/docs/XHTML" title="XHTML">XHTML</a>-Namespace und fügt es dem vbox-Element hinzu. Obwohl dies kein besonders sinnvolles <a href="/en-US/docs/XUL" title="XUL">XUL</a>-Document ist, demonstriert es die Verwendung von Elementen verschiedener Namespaces innerhalb eines Dokuments:</p>
+
+<pre class="brush:xml">&lt;?xml version="1.0"?&gt;
+&lt;page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+      xmlns:html="http://www.w3.org/1999/xhtml"
+      title="||Working with elements||"
+      onload="init()"&gt;
+
+&lt;script type="text/javascript"&gt;&lt;![CDATA[
+ var container;
+ var newdiv;
+ var txtnode;
+
+ function init(){
+   container = document.getElementById("ContainerBox");
+   newdiv = document.createElementNS("http://www.w3.org/1999/xhtml","div");
+   txtnode = document.createTextNode("This is text that was constructed dynamically with createElementNS and createTextNode then inserted into the document using appendChild.");
+   newdiv.appendChild(txtnode);
+   container.appendChild(newdiv);
+ }
+
+]]&gt;&lt;/script&gt;
+
+ &lt;vbox id='ContainerBox' flex='1'&gt;
+  &lt;html:div&gt;
+   The script on this page will add dynamic content below:
+  &lt;/html:div&gt;
+ &lt;/vbox&gt;
+
+&lt;/page&gt;
+</pre>
+
+<div class="note">
+<p>Das obige Beispiel verwendet ein Inline-Skript, was für XHTML-Dokumente nicht empfohlen wird. Dieses Beispiel ist eigentlich ein XUL-Dokument mit eingebettetem XHTML. Nichts desto trotz bleibt die Empfehlung bestehen.</p>
+</div>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezigikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kpmmentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', "#dom-document-createelementns", "Document.createElement")}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>options</code> argument</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(50)}}<sup>[2][3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] In vorangegangenen Versionen dieser Spezifikation war dieses Argument ein einfacher String, dessen Wert der Tag-Name eines angepassten Elements ist. Aus Gründen der Abwärtskompatibilität akzeptiert Chrome hier beide Formate</p>
+
+<p>[2] Siehe [1] oben: Wie Chrome, akzeptiert hier auch Firefox einen String anstelle eines Objekts. Allerdings erst ab Version 51 aufwärts. In Version 50 muss  <code>options</code> ein Objekt sein.</p>
+
+<p>[3] Um in Firefox mit angepassten Elementen zu experimentieren müssen die Einstellungen  <code>dom.webcomponents.enabled</code> und <code>dom.webcomponents.customelements.enabled</code> auf <code>true</code> gesetzt werden.</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li><a href="createElement">document.createElement</a></li>
+ <li><a href="createTextNode">document.createTextNode</a></li>
+ <li><a href="../Node/namespaceURI">Node.namespaceURI</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/1999/REC-xml-names-19990114">Namespaces in XML</a></li>
+</ul>
diff --git a/files/de/web/api/document/createtextnode/index.html b/files/de/web/api/document/createtextnode/index.html
new file mode 100644
index 0000000000..53fae2cc1c
--- /dev/null
+++ b/files/de/web/api/document/createtextnode/index.html
@@ -0,0 +1,131 @@
+---
+title: Document.createTextNode()
+slug: Web/API/Document/createTextNode
+tags:
+  - API
+  - DOM
+  - Méthode
+  - Referenz
+  - Textknoten
+  - Textnode
+translation_of: Web/API/Document/createTextNode
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Erzeugt einen Textknoten.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>var text</var> = document.createTextNode(<var>data</var>);
+</pre>
+
+<ul>
+ <li><code>text</code> ist ein Textknoten</li>
+ <li><code>data</code> ist eine Zeichenkette oder ein Ausdruck, der eine Zeichenkette erzeugt. Entity-Definitionen (&amp;...;) werden nicht umgesetzt.</li>
+</ul>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+&lt;title&gt;createTextNode example&lt;/title&gt;
+&lt;script&gt;
+function addTextNode(text) {
+  var newtext = document.createTextNode(text),
+      p1 = document.getElementById("p1");
+
+  p1.appendChild(newtext);
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+  &lt;button onclick="addTextNode('JA! ');"&gt;JA!&lt;/button&gt;
+  &lt;button onclick="addTextNode('NEIN! ');"&gt;NEIN!&lt;/button&gt;
+  &lt;button onclick="addTextNode('WIR SCHAFFEN DAS! ');"&gt;WIR SCHAFFEN DAS!&lt;/button&gt;
+
+  &lt;hr /&gt;
+
+  &lt;p id="p1"&gt;Erste Zeile des Absatzes.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM3 Core", "core.html#ID-1975348127", "Document.createTextNode()")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "core.html#ID-1975348127", "Document.createTextNode()")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/de/web/api/document/createtreewalker/index.html b/files/de/web/api/document/createtreewalker/index.html
new file mode 100644
index 0000000000..61e526b92c
--- /dev/null
+++ b/files/de/web/api/document/createtreewalker/index.html
@@ -0,0 +1,241 @@
+---
+title: Document.createTreeWalker()
+slug: Web/API/Document/createTreeWalker
+tags:
+  - API
+  - DOM
+  - DOM-Referenz
+  - Document
+  - Dokument
+  - Méthode
+translation_of: Web/API/Document/createTreeWalker
+---
+<div>{{ApiRef("Document")}}</div>
+
+<p>Die Methode <strong><code>Document.createTreeWalker()</code></strong> erzeugt ein neues {{domxref("TreeWalker")}} Objekt und gibt dieses zurück.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>treeWalker</em> = <em>document</em>.createTreeWalker(<em>wurzel</em>, <em>anzeigeFilter</em>, <em>filter</em>, <em>entityReferenceExpansion</em>);
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><em>wurzel</em></dt>
+ <dd>Ist der Ursprungs- oder Wurzelknoten {{domxref("Node")}} des {{domxref("TreeWalker")}}-Durchlaufens. Normalerweise ist dies ein Element, das zum Dokument gehört.</dd>
+
+ <dt><em>anzeigeFilter {{optional_inline}}</em></dt>
+ <dd>Optionale <code>unsigned long</code>Bitmaske, erstellt durch bitweise ODER-Verknüpfung der Konstanten von <code><a href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeFilter">NodeFilter</a></code>. Erlaubt eine bequeme Filterung auf bestimmte Knotentypen. Der Standardwert ist <code>0xFFFFFFFF</code>, auch repräsentiert durch die <code>SHOW_ALL</code>-Konstante.
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td class="header">Konstante</td>
+    <td class="header">numerischer Wert</td>
+    <td class="header">Beschreibung</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ALL</code></td>
+    <td><code>-1</code> (Maximalwert von <code>unsigned long</code>)</td>
+    <td>Zeigt alle Knoten.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ATTRIBUTE</code> {{deprecated_inline}}</td>
+    <td><code>2</code></td>
+    <td>Zeigt Attribut-Knoten {{domxref("Attr")}}. Das ist nur sinnvoll, wenn der {{domxref("TreeWalker")}} mit einem {{domxref("Attr")}}-Knoten als Wurzel erzeugt wird. In diesem Fall erscheint der Attribut-Knoten an der ersten Position bei der Durchquerung. Da Attribute nie Kind-Knoten anderer Knoten sind, erscheinen sie nicht, wenn der Dokumentenbaum durchlaufen wird.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_CDATA_SECTION</code> {{deprecated_inline}}</td>
+    <td><code>8</code></td>
+    <td>Zeigt {{domxref("CDATASection")}}-Knoten.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_COMMENT</code></td>
+    <td><code>128</code></td>
+    <td>Zeigt {{domxref("Comment")}}-Knoten.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_DOCUMENT</code></td>
+    <td><code>256</code></td>
+    <td>Zeigt {{domxref("Document")}}-Knoten.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_DOCUMENT_FRAGMENT</code></td>
+    <td><code>1024</code></td>
+    <td>Zeigt {{domxref("DocumentFragment")}}-Knoten.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_DOCUMENT_TYPE</code></td>
+    <td><code>512</code></td>
+    <td>Zeigt {{domxref("DocumentType")}}-Knoten.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ELEMENT</code></td>
+    <td><code>1</code></td>
+    <td>Zeigt {{domxref("Element")}}-Knoten.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ENTITY</code> {{deprecated_inline}}</td>
+    <td><code>32</code></td>
+    <td>Zeigt {{domxref("Entity")}}-Knoten. Dies ist nur sinnvoll, wenn ein {{domxref("TreeWalker")}} mit einem {{domxref("Entity")}}-Knoten als Wurzel erzeugt wird. In diesem Fall erscheint der  {{domxref("Entity")}}-Knoten an der ersten Position bei der Durchquerung.  Da Entity-Knoten nie Kind-Knoten anderer Knoten sind, erscheinen sie nicht, wenn der Dokumentenbaum durchlaufen wird.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ENTITY_REFERENCE</code> {{deprecated_inline}}</td>
+    <td><code>16</code></td>
+    <td>Shows {{domxref("EntityReference")}} nodes.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_NOTATION</code> {{deprecated_inline}}</td>
+    <td><code>2048</code></td>
+    <td>Zeigt {{domxref("Notation")}}-Knoten. Dies ist nur sinnvoll, wenn ein {{domxref("TreeWalker")}} mit einem {{domxref("Notation")}}-Knoten als Wurzel erzeugt wird. In diesem Fall erscheint der  {{domxref("Notation")}}-Knoten an der ersten Position bei der Durchquerung.  Da Entity-Knoten nie Kind-Knoten anderer Knoten sind, erscheinen sie nicht, wenn der Dokumentenbaum durchlaufen wird.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_PROCESSING_INSTRUCTION</code></td>
+    <td><code>64</code></td>
+    <td>Zeigt {{domxref("ProcessingInstruction")}}-Knoten.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_TEXT</code></td>
+    <td><code>4</code></td>
+    <td>Zeigt {{domxref("Text")}}-Knoten.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+
+ <dt><em>filter <em>{{optional_inline}}</em></em></dt>
+ <dd>Ein optionaler {{domxref("NodeFilter")}}. Muss ein ein Objekt mit einer Methode namens <code>acceptNode</code> sein, die vom {{domxref("TreeWalker")}} aufgerufen wird. Diese Methode entscheidet, ob ein übergebener Knoten, der schon von <code>anzeigeFilter</code> durchgelassen wurde, ausgegeben wird oder nicht.</dd>
+
+ <dt><em>entityReferenceExpansion<em> {{optional_inline}}</em></em> <em>{{obsolete_inline}}</em></dt>
+ <dd>Optionaler {{domxref("Boolean")}}-Schalter. Entscheidet, ob der Teilbaum unter einer {{domxref("EntityReference")}} ausgelassen werden soll, wenn das Element ausgelassen wird.</dd>
+</dl>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Das folgende Beispiel läuft über alle Knoten im <code>body</code>, filtert die Menge auf Elementknoten und gibt im <code>filter</code> jeden Knoten als durchlässig an (die Filterung auf die Elementknoten hätte auch in der <code>acceptNode()</code>-Methode erfolgen können).
+Mithilfe des <code>treeWalker</code> werden alle durchgelassenen Knoten in ein Array gesammelt.</p>
+
+<pre class="brush: js">var treeWalker = document.createTreeWalker(
+  document.body,
+  NodeFilter.SHOW_ELEMENT,
+  { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+  false
+);
+
+var nodeList = [];
+
+while(treeWalker.nextNode()) nodeList.push(treeWalker.currentNode);
+</pre>
+
+<h2 id="Spezfikationen">Spezfikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezfikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Bemerkung</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-document-createtreewalker', 'Document.createTreeWalker')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td><code>expandEntityReferences</code>-Parameter wurde entfernt. <code>whatToShow</code>- und <code>filter</code>-Parameter wurden als optional markiert.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#NodeIteratorFactory-createTreeWalker', 'Document.createTreeWalker')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Initiale Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>grundsätzliche Unterstützung</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.8.1")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+  <tr>
+   <td><code>whatToShow</code> und <code>filter</code> optional</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("12")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3.0</td>
+  </tr>
+  <tr>
+   <td><code>expandEntityReferences</code></td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.8.1")}}<br>
+    In {{CompatGeckoDesktop("12")}} entfernt.</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>grundsätzliche Unterstützung</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.8.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+  <tr>
+   <td><code>whatToShow</code> und <code>filter</code> optional</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("12")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3.0</td>
+  </tr>
+  <tr>
+   <td><code>expandEntityReferences</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.8.1")}}<br>
+    In {{CompatGeckoDesktop("12")}} entfernt</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Schnittstelle des Ergebnis-Objekts: {{domxref("TreeWalker")}}.</li>
+ <li><a href="http://msdn.microsoft.com/en-us/library/ie/ff975302(v=vs.85).aspx">createTreeWalker auf MSDN</a></li>
+</ul>
diff --git a/files/de/web/api/document/dir/index.html b/files/de/web/api/document/dir/index.html
new file mode 100644
index 0000000000..532837e9dd
--- /dev/null
+++ b/files/de/web/api/document/dir/index.html
@@ -0,0 +1,95 @@
+---
+title: Document.dir
+slug: Web/API/Document/dir
+translation_of: Web/API/Document/dir
+---
+<p>{{ApiRef("")}}</p>
+
+<p>Die <code><strong>Document.dir</strong></code> Eigenschaft ist ein {{domxref("DOMString")}}, welcher die direktionaler Bedeutung von einem Text eines Dokuments repräsentiert. Entweder von links nach rechts (Standard) oder rechts nach links. Mögliche Werte sind <code>'rtl'</code> rechts nach links, und <code>'ltr',</code> links nach rechts.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>dirStr</em> = <em>document.</em>dir;
+<em>document.dir</em> = <em>dirStr;</em>
+</pre>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikationen</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "dom.html#the-dir-attribute:dom-dir", "Document.dir")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Initiale Spezifikation</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basis Unterstützung</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basis Unterstützung</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Vor Firefox 23, hat die <code>Document.dir</code> Eigenschaft "ltr" wiedergegeben. unabhängig der Einstellung von dem dir-Attribut im Haupt-Element (root) {{htmlelement("html")}}. Und wenn eine Richtung im <code>&lt;html&gt;</code> gesetzt war, hatte die Veränderung der Sichtbarkeit keinen Effekt (obwohl der spätere Abruf des <code>Document.dir</code> wird behaupten, dass die Direktionalität geändert wurde). Wenn ein solches Attribut nicht im <code>&lt;html&gt;</code> gesetzt ist und die Eigenschaft geändert wurde, werden beide sichtbaren direktionale geändert und die <code>document.dir</code>  Eigenschaft wird die Änderung korrekt wiedergeben.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ms533731.aspx" rel="freelink">http://msdn.microsoft.com/en-us/library/ms533731.aspx</a></li>
+</ul>
diff --git a/files/de/web/api/document/document/index.html b/files/de/web/api/document/document/index.html
new file mode 100644
index 0000000000..ce3bddf174
--- /dev/null
+++ b/files/de/web/api/document/document/index.html
@@ -0,0 +1,45 @@
+---
+title: Document()
+slug: Web/API/Document/Document
+tags:
+  - API
+  - DOM
+  - Document
+  - Dokument
+  - Méthode
+  - Reference
+translation_of: Web/API/Document/Document
+---
+<div>{{APIRef}}</div>
+
+<p>Die <strong><code>Document</code></strong> Methode erstellt ein neues {{domxref("Document")}} Objekt das als Webseite im Browser geladen werden kann und bietet Möglichkeiten auf diese Inhalte zuzugreifen.</p>
+
+<h2 id="Konstruktor">Konstruktor</h2>
+
+<pre class="syntaxbox notranslate">new Document();
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-document-document','Document')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+
+
+<div>{{Compat("api.Document.Document")}}</div>
diff --git a/files/de/web/api/document/documentelement/index.html b/files/de/web/api/document/documentelement/index.html
new file mode 100644
index 0000000000..aac46ae3ea
--- /dev/null
+++ b/files/de/web/api/document/documentelement/index.html
@@ -0,0 +1,42 @@
+---
+title: document.documentElement
+slug: Web/API/Document/documentElement
+translation_of: Web/API/Document/documentElement
+---
+<p>{{ApiRef}}</p>
+
+<h2 id="Summary" name="Summary">Zusammenfassung</h2>
+
+<p><strong>Lesbar, nicht schreibbar</strong></p>
+
+<p>Gibt das <a href="/en-US/docs/DOM/element"><code>Element</code></a> zurück, das die Wurzel des <code><a href="/en-US/docs/DOM/document">document</a></code> ist (zum Beispiel, das <code>&lt;html&gt;</code> Element für HTML Dokumente).</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>element</em> = document.documentElement;
+</pre>
+
+<h2 id="Example" name="Example">Beispiel</h2>
+
+<pre class="brush:js">var rootElement = document.documentElement;
+var firstTier = rootElement.childNodes;
+
+// firstTier ist die NodeList von direkten Kindern des Wurzel-Elementes
+for (var i = 0; i &lt; firstTier.length; i++) {
+   // hier irgendwas mit den direkten Kindern des Wurzel-Elementes mit Hilfe
+   // von firstTier[i] erledigen
+}</pre>
+
+<h2 id="Notes" name="Notes">Beobachtungen</h2>
+
+<p>Dieses Objekt ist lesbar aber nicht schreibbar. Es ist praktisch um auf die Wurzel eines beliebigen Dokumentes zuzugreifen.</p>
+
+<p>HTML Dokumente enthalten typischerweise ein einziges Tochter-Element<span style="line-height: 1.5;">, </span><code style="font-style: normal; line-height: 1.5;">&lt;html&gt;</code><span style="line-height: 1.5;">, manchmal mit einem DOCTYPE. XML-Doumente enthalten oft mehrere Tochter-Elemente, einen DOCTYPE und </span><a href="/en-US/docs/DOM/ProcessingInstruction" style="line-height: 1.5;">Verarbeitungshinweise</a><span style="line-height: 1.5;">.</span></p>
+
+<p>Deswegen sollte <code>document.documentElement</code> statt <code>{{Domxref("document.firstElementChild")}}</code> benutzt werden, um auf das Wurzel-Element zuzugreifen.</p>
+
+<h2 id="Specification" name="Specification">Spezifikation</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-87CD092">DOM Level 2 Core: Document.documentElement</a></li>
+</ul>
diff --git a/files/de/web/api/document/fullscreenchange_event/index.html b/files/de/web/api/document/fullscreenchange_event/index.html
new file mode 100644
index 0000000000..7c8026858c
--- /dev/null
+++ b/files/de/web/api/document/fullscreenchange_event/index.html
@@ -0,0 +1,87 @@
+---
+title: fullscreenchange
+slug: Web/API/Document/fullscreenchange_event
+translation_of: Web/API/Document/fullscreenchange_event
+---
+<p>Das <code>onfullscreenchange</code> Event wird gesendet, wenn der Browser den Vollbildmodus startet oder beendet.</p>
+
+<h2 id="Allgemeine_Information">Allgemeine Information</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Speifikation</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Fullscreen</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Schnittstelle</dt>
+ <dd style="margin: 0 0 0 120px;">Event</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Blubbert</dt>
+ <dd style="margin: 0 0 0 120px;">Ja</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Abbrechbar</dt>
+ <dd style="margin: 0 0 0 120px;">Nein</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Ziel</dt>
+ <dd style="margin: 0 0 0 120px;">Dokument</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Standardaktion</dt>
+ <dd style="margin: 0 0 0 120px;">Keine</dd>
+</dl>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush:js;">// Diese API hat noch immer Vendor Prefixe in den Browsern, die sie implementieren
+document.addEventListener("fullscreenchange", function( event ) {
+
+    // Das Event selber hat keine Informationen über darüber, ob sich der Browser
+    // im Vollbildmodus befindet, aber man kann diesen über die Fullscreen API
+    // erhalten
+    if ( document.fullscreen ) {
+
+        // Das Ziel des Events ist immer das Dokument,
+        // aber man kann das eigentliche Element im Vollbildmodus über die API
+        // abrufen
+        document.fullscreenElement;
+    }
+
+});</pre>
+
+<h2 id="Verwandte_Events">Verwandte Events</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla_event_reference/fullscreenerror"><code>fullscreenerror</code></a></li>
+</ul>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de-DE/docs/Web/API/Fullscreen_API">Fullscreen API</a></li>
+</ul>
diff --git a/files/de/web/api/document/getelementbyid/index.html b/files/de/web/api/document/getelementbyid/index.html
new file mode 100644
index 0000000000..dfb6cc0d36
--- /dev/null
+++ b/files/de/web/api/document/getelementbyid/index.html
@@ -0,0 +1,131 @@
+---
+title: Document.getElementById()
+slug: Web/API/Document/getElementById
+tags:
+  - API
+  - DOM
+  - Méthode
+  - Referenz
+translation_of: Web/API/Document/getElementById
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<div> </div>
+
+<div>Gibt eine Referenz zu einem Element anhand seiner <a href="/en-US/docs/DOM/element.id" title="en-US/docs/DOM/element.id">ID</a> zurück.</div>
+
+<div> </div>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="eval"><em>element</em> = document.getElementById(<em>id</em>);
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<ul>
+ <li><code>element </code>ist eine Referenz zu einem <a href="/en-US/docs/DOM/element" title="en-US/docs/DOM/element">Element</a>-Objekt oder <code>null</code> wenn sich kein Element mit der angegebenen ID im Dokument befindet.</li>
+ <li><code>id </code>ist ein String, der auf Groß- und Kleinschreibung achtet und die einmalige ID des gesuchten Elements darstellt.</li>
+</ul>
+
+<h2 id="Example" name="Example">Beispiel</h2>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;getElementById Beispiel&lt;/title&gt;
+  &lt;script&gt;
+  function changeColor(newColor) {
+    var elem = document.getElementById("para1");
+    elem.style.color = newColor;
+  }
+  &lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;p id="para1"&gt;Irgendein Text&lt;/p&gt;
+  &lt;button onclick="changeColor('blue');"&gt;Blau&lt;/button&gt;
+  &lt;button onclick="changeColor('red');"&gt;Rot&lt;/button&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Anmerkungen</h2>
+
+<p>Neue Benutzer sollten beachten, dass die Groß- und Kleinschreibung bei "Id" im Namen der Methode korrekt sein <em>muss</em>, damit der Code funktioniert - 'getElementByID' funktioniert <em>nicht</em>, auch wenn es richtig zu sein scheint.</p>
+
+<p>Wenn kein Element mit der angegebenen id existiert, gibt die Funktion <code>null </code>zurück. Beachte, dass der ID-Parameter auf Groß- und Kleinschreibung achtet. Daraus folgt, dass <code>document.getElementById("<strong>M</strong>ain") </code>anstatt des Elements <code>&lt;div id="main"&gt;</code> <code>null</code> zurückgibt, weil "M" und "m" für den Zweck der Methode unterschiedlich sind.</p>
+
+<p><strong>Elemente die sich nicht im Dokument befinden </strong>werden nicht von <code>getElementById </code>gesucht. Wenn man ein Element erstellt und ihm eine ID zuweist, so muss man das Element mit <code><a href="https://developer.mozilla.org/en-US/docs/DOM/Node.insertBefore" title="en-US/docs/DOM/Node.insertBefore">insertBefore</a></code> oder einer ähnlichen Methode in den Dokumentenbaum einfügen, bevor man darauf mit <code>getElementById</code> zugreifen kann.</p>
+
+<pre class="brush: js">var element = document.createElement("div");
+element.id = 'testqq';
+var el = document.getElementById('testqq'); // el wird null!
+</pre>
+
+<p><strong>Nicht-HTML-Dokumente. </strong>Die DOM-Implementierung muss eine Information enthalten, welche angibt, welches Attribut vom Typ ID ist. Attribute mit dem Namen "id" sind solange nicht vom Typ ID bis sie in der Dokumenttypdefinition als solche definiert werden. Das <code>id</code>-Attribut ist in gebräuchlichen Fällen wie bei <a href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>, <a href="/en-US/docs/XUL" title="en-US/docs/XUL">XUL</a> und anderen als ID-Typ definiert. Implementierungen, die nicht wissen, ob ein Attribut vom Typ ID ist oder nicht geben erwartungsgemäß <code>null </code>zurück.</p>
+
+<p><strong style="font-size: 2.14285714285714rem; font-weight: 700; letter-spacing: -1px; line-height: 1;">Browserkompatibilität</strong></p>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop(1.0) }}</td>
+   <td>5.5</td>
+   <td>7.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoMobile(1.0) }}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification">Spezifikation</h2>
+
+<p><code>getElementById</code> wurde in DOM Level 1 für HTML Dokumente eingeführt und in DOM Level 2 zu allen Dokumenten verschoben. </p>
+
+<ul>
+ <li>DOM Level 2 Spezifikation: <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getElBId">getElementById</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/document" title="en-US/docs/DOM/document">document</a> Referenz für andere Methoden und Eigenschaften, die man benutzen kann um Referenzen zu Elementen im Dokument zu bekommen.</li>
+ <li><a href="/en-US/docs/Web/API/document.querySelector">document.querySelector()</a> für Selektoren mit Abfragen wie <code>'div.myclass'</code></li>
+ <li><a href="/en-US/docs/xml/xml:id" title="en-US/docs/xml/id">xml:id</a> - hat eine Hilfsmethode, die es <code>getElementById </code>erlaubt, "xml:id" in XML-Dokumenten zu erhalten (wie es z.B. von Ajax-Aufrufen zurückgegeben wird)</li>
+</ul>
diff --git a/files/de/web/api/document/getelementsbyclassname/index.html b/files/de/web/api/document/getelementsbyclassname/index.html
new file mode 100644
index 0000000000..182fef2f42
--- /dev/null
+++ b/files/de/web/api/document/getelementsbyclassname/index.html
@@ -0,0 +1,105 @@
+---
+title: Document.getElementsByClassName()
+slug: Web/API/Document/getElementsByClassName
+tags:
+  - API
+  - DOM
+  - DOM Element Methoden
+  - Gecko
+  - Gecko DOM Referenz
+  - HTML5
+  - Méthode
+  - Referenz
+translation_of: Web/API/Document/getElementsByClassName
+---
+<p id="Summary">{{APIRef("DOM")}}</p>
+
+<p>Gibt ein Array-ähnliches Objekt von allen Kindelementen welche den gegebenen Klassennamen besitzen. Wenn dies auf das document-Objekt ausgeführt wird, wird das gesamte Dokument durchsucht, inklusive des root-Knoten. Man kann ebenfalls {{domxref("Element.getElementsByClassName", "getElementsByClassName()")}} mit jedem Element aufrufen; es werden nur Nachfolgende Elemente des gegebenenen root-Element zurückgegeben.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>var elements</var> = document.getElementsByClassName(<em>names</em>); // oder:
+<var>var elements</var> = rootElement.getElementsByClassName(<em>names</em>);</pre>
+
+<ul>
+ <li><var>elements</var> ist eine live {{ domxref("HTMLCollection") }} von gefunden Elementen.</li>
+ <li><var>names</var> ist ein String der eine Liste der gefundenen Klassennamen repräsentiert; Klassennamen sind durch Leerzeichen getrennt.</li>
+ <li>getElementsByClassName kann auf jedes Element aufgerufen werden und nicht nur auf <em>document</em>. Das Element, auf dass diese Funktion aufgerufen wird, wird als root-Element genutzt.</li>
+</ul>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<p>Alle Elemente der Klasse 'test' holen:</p>
+
+<pre class="brush: js">document.getElementsByClassName('test');</pre>
+
+<p>Alle Elemente die sowohl die Klassen 'red' und 'test' verwenden selektieren:</p>
+
+<pre class="brush: js">document.getElementsByClassName('red test');</pre>
+
+<p>Alle Elemente der Klasse 'test' die innerhalb eines Elements mit der ID 'main' selektieren:</p>
+
+<pre class="brush: js">document.getElementById('main').getElementsByClassName('test');</pre>
+
+<p>Man kann auch Methoden von Array.prototype auf {{ domxref("HTMLCollection") }} anwenden, in dem die <var>HTMLCollection</var>  in dem sie an die <var>this</var> Werte der Methoden übergeben wird. Hier finden wir alle div-Elemente der Klasse 'test':</p>
+
+<pre class="brush: js">var testElements = document.getElementsByClassName('test');
+var testDivs = Array.prototype.filter.call(testElements, function(testElement){
+    return testElement.nodeName === 'DIV';
+});</pre>
+
+<h2 id="Browserkompabilität">Browserkompabilität</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>3.0</td>
+   <td>9.0</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification">Spezifikation</h2>
+
+<ul>
+ <li><a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-getelementsbyclassname" title="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-getelementsbyclassname"><span class="external">W3C: getElementsByClassName</span></a></li>
+</ul>
diff --git a/files/de/web/api/document/head/index.html b/files/de/web/api/document/head/index.html
new file mode 100644
index 0000000000..63b389112d
--- /dev/null
+++ b/files/de/web/api/document/head/index.html
@@ -0,0 +1,73 @@
+---
+title: Document.head
+slug: Web/API/Document/head
+tags:
+  - Referenz
+translation_of: Web/API/Document/head
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p class="syntaxbox">Gibt das {{HTMLElement("head")}} Element des aktuellen Dokuments aus. Ist mehr als ein <code>&lt;head&gt;</code>  Element vorhanden, wird das erste Element ausgegeben.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>var objRef</em> = document.head;
+</pre>
+
+<h2 id="Example" name="Example">Beispiel</h2>
+
+<pre class="brush: js">// in HTML: &lt;head id="my-document-head"&gt;
+var aHead = document.head;
+
+alert(aHead.id); // "my-document-head";
+
+alert( document.head === document.querySelector("head") ); // true
+</pre>
+
+<h2 id="Example" name="Example">Anmerkungen</h2>
+
+<p><code>document.head</code> ist nur lesbar. Der Versuch dieser Eigenschaft einen Wert zu zuweisen, wird ohne Ausgabe einer Fehlermeldung fehlschlagen, oder, bei verwendetem<br>
+ <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">ECMAScript Strict Mode</a> in einem Gecko Browser, mit einem <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypeError">TypeError</a></code> quittiert.</p>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','dom.html#dom-document-head','Document.head')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1','dom.html#dom-document-head','Document.head')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C','dom.html#dom-document-head','Document.head')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p> </p>
+
+
+
+<p>{{Compat("api.Document.head")}}</p>
+
+<p> </p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{domxref("document.body")}}</li>
+</ul>
diff --git a/files/de/web/api/document/importnode/index.html b/files/de/web/api/document/importnode/index.html
new file mode 100644
index 0000000000..8420b6f794
--- /dev/null
+++ b/files/de/web/api/document/importnode/index.html
@@ -0,0 +1,93 @@
+---
+title: Document.importNode()
+slug: Web/API/Document/importNode
+tags:
+  - API
+  - DOM
+  - Dokument
+  - Knoten
+  - Kopie
+  - Méthode
+  - Referenz
+  - importNode
+translation_of: Web/API/Document/importNode
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary">Die {{domxref("Document")}}-Methode <code><strong>importNode()</strong></code> erzeugt eine neue Kopie eines konkreten Knotens ({{domxref("Node")}}) oder Dokumenten-Fragments ({{domxref("DocumentFragment")}}) eines anderen Dokuments, so dass diese dann in das aktuelle Dokument eingefügt werden kann. </span> An dieser Stelle ist es noch nicht im Dokumentenbaum eingefügt, um das zu erreichen, muss eine Methode wie {{domxref("Node.appendChild", "appendChild()")}} oder {{domxref("Node.insertBefore", "insertBefore()")}} aufgerufen werden.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>knoten</em> = <em>document</em>.importNode(<em>externerKnoten</em>, <em>deep</em>);
+</pre>
+
+<dl>
+ <dt><code>externerKnoten</code></dt>
+ <dd>Der neue Knoten oder das neue Dokumenten-Fragment, welches in das aktuelle Dokument importiert werden soll. Nach dem Import ist der Elternknoten <code>null</code>, da der neue Knoten noch nicht in den Dokumentenbaum eingefügt wurde.</dd>
+ <dt><code>deep</code></dt>
+ <dd>Ein boolscher Wert der anzeigt, ob der komplette Unterbaum von<code>externalNode </code>importiert werden soll. Ist dieser Parameter <code>true</code>, werden <code>externalNode</code> so wie all seine Nachfahren kopiert; Ist er <code>false</code>, wird nur der einzelne Knoten, <code>externalNode</code>, importiert.</dd>
+</dl>
+
+<div class="note">
+<p>In der DOM4-Spezifikation, ist <code>deep</code> als optionales Argument angeführt. Wird es weggelassen, verhält sich die Methode als ob der Wert von <code>deep</code><strong><code>true </code></strong>wäre, was zu standardmäßigen tiefen Kopieren führt. Um flach zu kopieren, muss <code>deep</code> explizit auf <code>false</code> gesetzt werden.</p>
+
+<p>Dieses Verhalten wurde in der letzten Spezifikation geändert, der Wert von <code>deep</code> wird bei Weglassen auf <strong><code>false </code></strong>gesetzt. Obwohl es immer noch optional ist, empfehlen wir für Vorwärts- und Rückwärtskompatibilität das <code>deep</code>-Argument immer explizit anzugeben. Seit Gecko 28.0 {{geckoRelease(28)}} ist eine Konsolenwarnung implementiert, wenn das Argument weggelassen wird. Seit Gecko 29.0 {{geckoRelease(29)}}) ist flaches Kopieren das Standardverhalten.</p>
+</div>
+
+<h2 id="Example" name="Example">Beispiel</h2>
+
+<pre class="brush: js">var iframe = document.getElementsByTagName("iframe")[0];
+var oldNode = iframe.contentWindow.document.getElementById("myNode");
+var newNode = document.importNode(oldNode, true);
+document.getElementById("container").appendChild(newNode);
+</pre>
+
+<h2 id="Notes" name="Notes">Anmerkungen</h2>
+
+<p>Der Originalknoten wird nicht aus dem Ursprungsdokument entfernt. Der importierte Knoten ist des Weiteren eine Kopie des ursprünglichen.</p>
+
+<p> </p>
+
+<p>Nodes from external documents should be cloned using <a href="/de/docs/Web/API/Document/importNode" title="Die Document-Methode importNode() erzeugt eine neue Kopie eines konkreten Knotens (Node) oder Dokumenten-Fragments (DocumentFragment) eines anderen Dokuments, so dass diese dann in das aktuelle Dokument eingefügt werden kann. "><code>document.importNode()</code></a> (or adopted using <a href="/de/docs/Web/API/Document/adoptNode" title="Überträgt einen Knoten. Der Knoten und sein Unterbaum werden aus dem Dokument, in dem sie sich befinden entfernt (so vorhanden), und sein ownerDocument wird zu dem aktuellen Dokument geändert. Der Knoten kann dann in das aktuelle Dokument eingefügt werden."><code>document.adoptNode()</code></a>) before they can be inserted into the current document. For more on the <a class="new" href="/de/docs/Web/API/Node/ownerDocument" rel="nofollow" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben. Bitte überlege, mitzuwirken!"><code>Node.ownerDocument</code></a> issues, see the <a class="external" href="http://www.w3.org/DOM/faq.html#ownerdoc" rel="noopener">W3C DOM FAQ</a>.</p>
+
+<p>Firefox doesn't currently enforce this rule (it did for a while during the development of Firefox 3, but too many sites break when this rule is enforced). We encourage Web developers to fix their code to follow this rule for improved future compatibility.</p>
+
+<p> </p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikationen</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-document-importnode", "document.importNode()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "core.html#Core-Document-importNode", "document.importNode()")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("api.Document.importNode")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{domxref("document.adoptNode()")}}</li>
+ <li>{{domxref("Node.appendChild()")}}</li>
+ <li>{{domxref("Node.insertBefore()")}}</li>
+</ul>
diff --git a/files/de/web/api/document/index.html b/files/de/web/api/document/index.html
new file mode 100644
index 0000000000..f9b00cacfc
--- /dev/null
+++ b/files/de/web/api/document/index.html
@@ -0,0 +1,405 @@
+---
+title: Document
+slug: Web/API/Document
+tags:
+  - DOM
+  - Gecko
+  - Gecko DOM Referenz
+translation_of: Web/API/Document
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<div></div>
+
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+
+<p>Jede im Browswer geladene Webseite hat ihr eigenen <code>document</code> Objekt.  Das <code>Document</code> Interface dient als Einstiegspunkt in den Inhalt der Webseite (der <a href="/en-US/docs/Using_the_W3C_DOM_Level_1_Core" title="Using_the_W3C_DOM_Level_1_Core">DOM tree</a>, beinhaltet Elemente wie {{HTMLElement("body")}} und {{HTMLElement("table")}}) und unterstützt Funktionen, die global für das Dokument gelten(z.B. das Aufrufen der URL der Seite und das Erstellen neuer Elemente im Dokument).</p>
+
+<p>Ein Dokument-Objekt kann von verschiedenen APIs bezogen werden:</p>
+
+<ul>
+ <li>Meistens arbeiten Sie mit dem Dokument, in dem das Skript läuft, indem Sie <code>document</code> in den <a href="/en-US/docs/HTML/Element/Script" title="HTML/Element/Script">scripts</a> des Dokuments verwenden. (Dasselbe Dokument kann auch als {{domxref("window.document")}} bezeichnet werden.)</li>
+ <li>Das Dokument eines Iframes über die <code><a href="/en-US/docs/Web/API/HTMLIFrameElement#Properties" title="DOM/HTMLIFrameElement#Properties">contentDocument</a></code> Eigenschaften des Iframes.</li>
+ <li>Die <a href="/en-US/docs/Web/API/XMLHttpRequest#responseXML" title="XMLHttpRequest#responseXML"><code>responseXML</code> of an <code>XMLHttpRequest</code> object</a>.</li>
+ <li>Das Dokument, zu dem ein bestimmter Knoten oder ein Element gehört, kann über die {{domxref("Node.ownerDocument","ownerDocument")}} -Eigenschaft des Knotens abgerufen werden.</li>
+</ul>
+
+<p>Depending on the kind of the document (e.g. <a href="/en-US/docs/HTML" title="HTML">HTML</a> or <a href="/en-US/docs/XML" title="XML">XML</a>), different APIs may be available on the document object.</p>
+
+<ul>
+ <li>All document objects implement the <a href="http://dom.spec.whatwg.org/#interface-document"><code>Document</code></a> interface (and hence the {{domxref("Node")}} and {{domxref("EventTarget")}} interfaces). Thus, the "core" properties and methods documented on this page are available for all kinds of documents.</li>
+ <li>In contemporary browsers, some documents (e.g. those served with the <code>text/html</code> content type) also implement the {{domxref("HTMLDocument")}} interface.</li>
+ <li>In heutigen Browsern, SVG Dokumente implementieren das {{domxref("SVGDocument")}} Interface.</li>
+</ul>
+
+<p>In der Zukunft, alle diese Interfaces werden zusammengefasst zum <code>Document</code> Interface.</p>
+
+<h2 id="Properties" name="Properties">Eigenschaften</h2>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Das <code>Document</code> Interface erbt auch vom {{domxref("Node")}} und {{domxref("EventTarget")}} Interface.</p>
+</div>
+
+<dl>
+ <dt>{{domxref("Document.all")}} {{Deprecated_inline}} {{non-standard_inline}}</dt>
+ <dd>Provides access to all elements with an id. This is a legacy non-standard interface, you should use the {{domxref("Document.getElementById()")}} method instead.</dd>
+ <dt>{{domxref("Document.async")}} {{Deprecated_inline}}</dt>
+ <dd>Used with {{domxref("document.load")}} to indicate an asynchronous request.</dd>
+ <dt>{{domxref("Document.characterSet")}} {{experimental_inline}}</dt>
+ <dd>Returns the character set being used by the document.</dd>
+ <dt>{{domxref("Document.compatMode")}} {{experimental_inline}}</dt>
+ <dd>Indicates whether the document is rendered in Quirks or Strict mode.</dd>
+ <dt>{{domxref("Document.contentType")}} {{experimental_inline}}</dt>
+ <dd>Returns the Content-Type from the MIME Header of the current document.</dd>
+ <dt>{{domxref("Document.doctype")}}</dt>
+ <dd>Returns the Document Type Definition (DTD) of the current document.</dd>
+ <dt>{{domxref("Document.documentElement")}}</dt>
+ <dd>Returns the Element that is a direct child of the document. For HTML documents, this is normally the HTML element.</dd>
+ <dt>{{domxref("Document.documentURI")}}</dt>
+ <dd>Returns the document URL.</dd>
+ <dt>{{domxref("Document.domConfig")}} {{Deprecated_inline}}</dt>
+ <dd>Should return a {{domxref("DOMConfiguration")}} object.</dd>
+ <dt>{{domxref("Document.implementation")}}</dt>
+ <dd>Returns the DOM implementation associated with the current document.</dd>
+ <dt>{{domxref("Document.inputEncoding")}} {{Deprecated_inline}}</dt>
+ <dd>Returns the encoding used when the document was parsed.</dd>
+ <dt>{{domxref("Document.lastStyleSheetSet")}}</dt>
+ <dd>Returns the name of the style sheet set that was last enabled. Has the value <code>null</code> until the style sheet is changed by setting the value of {{domxref("Document.selectedStyleSheetSet","selectedStyleSheetSet")}}.</dd>
+ <dt>{{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}} {{gecko_minversion_inline("8.0")}}</dt>
+ <dd><code>true</code> if this document is synthetic, such as a standalone image, video, audio file, or the like.</dd>
+ <dt>{{domxref("Document.mozFullScreen")}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt>
+ <dd><code>true</code> when the document is in {{domxref("Using_full-screen_mode","full-screen mode")}}.</dd>
+ <dt>{{domxref("Document.mozFullScreenElement")}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt>
+ <dd>The element that's currently in full screen mode for this document.</dd>
+ <dt>{{domxref("Document.mozFullScreenEnabled")}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt>
+ <dd><code>true</code> if calling {{domxref("element.mozRequestFullscreen()")}} would succeed in the curent document.</dd>
+ <dt>{{domxref("Document.pointerLockElement")}} {{experimental_inline}}</dt>
+ <dd>Returns the element set as the target for mouse events while the pointer is locked. <code>null</code> if lock is pending, pointer is unlocked, or if the target is in another document.</dd>
+ <dt>{{domxref("Document.preferredStyleSheetSet")}}</dt>
+ <dd>Returns the preferred style sheet set as specified by the page author.</dd>
+ <dt>{{domxref("Document.selectedStyleSheetSet")}}</dt>
+ <dd>Returns which style sheet set is currently in use.</dd>
+ <dt>{{domxref("Document.styleSheets")}}</dt>
+ <dd>Returns a list of the style sheet objects on the current document.</dd>
+ <dt>{{domxref("Document.styleSheetSets")}}</dt>
+ <dd>Returns a list of the style sheet sets available on the document.</dd>
+ <dt>{{domxref("Document.xmlEncoding")}} {{Deprecated_inline}}</dt>
+ <dd>Returns the encoding as determined by the XML declaration.</dd>
+ <dt>{{domxref("Document.xmlStandalone")}} {{obsolete_inline("10.0")}}</dt>
+ <dd>Returns <code>true</code> if the XML declaration specifies the document to be standalone (<em>e.g.,</em> An external part of the DTD affects the document's content), else <code>false</code>.</dd>
+ <dt>{{domxref("Document.xmlVersion")}} {{obsolete_inline("10.0")}}</dt>
+ <dd>Returns the version number as specified in the XML declaration or <code>"1.0"</code> if the declaration is absent.</dd>
+</dl>
+
+<p>The <code>Document</code> interface is extended with the {{domxref("ParentNode")}} interface:</p>
+
+<p>{{page("/en-US/docs/Web/API/ParentNode","Properties")}}</p>
+
+<h3 id="Erweiterung_für_HTML_Dokumente">Erweiterung für HTML Dokumente</h3>
+
+<p>Das <code>Document</code> Interface für HTML Dokumente erbt vom {{domxref("HTMLDocument")}} Interface oder, ist seit HTML5 erweitert für solche Dokumente:</p>
+
+<dl>
+ <dt>{{domxref("Document.activeElement")}}</dt>
+ <dd>Returns the currently focused element.</dd>
+ <dt>{{domxref("Document.alinkColor")}} {{Deprecated_inline}}</dt>
+ <dd>Returns or sets the color of active links in the document body.</dd>
+ <dt>{{domxref("Document.anchors")}}</dt>
+ <dd>Returns a list of all of the anchors in the document.</dd>
+ <dt>{{domxref("Document.applets")}} {{Deprecated_inline}}</dt>
+ <dd>Returns an ordered list of the applets within a document.</dd>
+ <dt>{{domxref("Document.bgColor")}} {{Deprecated_inline}}</dt>
+ <dd>Gets/sets the background color of the current document.</dd>
+ <dt>{{domxref("Document.body")}}</dt>
+ <dd>Returns the {{HTMLElement("body")}} element of the current document.</dd>
+ <dt>{{domxref("Document.cookie")}}</dt>
+ <dd>Returns a semicolon-separated list of the cookies for that document or sets a single cookie.</dd>
+ <dt>{{domxref("Document.defaultView")}}</dt>
+ <dd>Returns a reference to the window object.</dd>
+ <dt>{{domxref("Document.designMode")}}</dt>
+ <dd>Gets/sets the ability to edit the whole document.</dd>
+ <dt>{{domxref("Document.dir")}}</dt>
+ <dd>Gets/sets directionality (rtl/ltr) of the document.</dd>
+ <dt>{{domxref("Document.domain")}}</dt>
+ <dd>Returns the domain of the current document.</dd>
+ <dt>{{domxref("Document.embeds")}}</dt>
+ <dd>Returns a list of the embedded {{HTMLElement('embed')}} elements within the current document.</dd>
+ <dt>{{domxref("Document.fgColor")}} {{Deprecated_inline}}</dt>
+ <dd>Gets/sets the foreground color, or text color, of the current document.</dd>
+ <dt>{{domxref("Document.forms")}}</dt>
+ <dd>Returns a list of the {{HTMLElement("form")}} elements within the current document.</dd>
+ <dt>{{domxref("Document.head")}}</dt>
+ <dd>Returns the {{HTMLElement("head")}} element of the current document.</dd>
+ <dt>{{domxref("Document.height")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Gets/sets the height of the current document.</dd>
+ <dt>{{domxref("Document.images")}}</dt>
+ <dd>Returns a list of the images in the current document.</dd>
+ <dt>{{domxref("Document.lastModified")}}</dt>
+ <dd>Returns the date on which the document was last modified.</dd>
+ <dt>{{domxref("Document.linkColor")}} {{Deprecated_inline}}</dt>
+ <dd>Gets/sets the color of hyperlinks in the document.</dd>
+ <dt>{{domxref("Document.links")}}</dt>
+ <dd>Returns a list of all the hyperlinks in the document.</dd>
+ <dt>{{domxref("Document.location")}}</dt>
+ <dd>Returns the URI of the current document.</dd>
+ <dt>{{domxref("Document.plugins")}}</dt>
+ <dd>Returns a list of the available plugins.</dd>
+ <dt>{{domxref("Document.readyState")}} {{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>Returns loading status of the document.</dd>
+ <dt>{{domxref("Document.referrer")}}</dt>
+ <dd>Returns the URI of the page that linked to this page.</dd>
+ <dt>{{domxref("Document.scripts")}}</dt>
+ <dd>Returns all the {{HTMLElement("script")}} elements on the document.</dd>
+ <dt>{{domxref("Document.title")}}</dt>
+ <dd>Returns the title of the current document.</dd>
+ <dt>{{domxref("Document.URL")}}</dt>
+ <dd>Returns a string containing the URL of the current document.</dd>
+ <dt>{{domxref("Document.vlinkColor")}} {{Deprecated_inline}}</dt>
+ <dd>Gets/sets the color of visited hyperlinks.</dd>
+ <dt>{{domxref("Document.width")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Returns the width of the current document.</dd>
+</dl>
+
+<h3 id="Event_handlers" name="Event_handlers">Event handlers</h3>
+
+<dl>
+ <dt>{{domxref("Document.onpointerlockchange")}} {{experimental_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("pointerlockchange")}} event.</dd>
+ <dt>{{domxref("Document.onpointerlockerror")}} {{experimental_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("pointerlockerror")}} event.</dd>
+ <dt>{{domxref("Document.onreadystatechange")}} {{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>Returns the event handling code for the <code>readystatechange</code> event.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Methoden</h2>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Das <code>Document</code> Interface erbt auch vom {{domxref("Node")}} und {{domxref("EventTarget")}} Interface.</p>
+</div>
+
+<dl>
+ <dt>{{domxref("Document.adoptNode","Document.adoptNode(Node node)")}}</dt>
+ <dd>Adopt node from an external document.</dd>
+ <dt>{{domxref("Document.captureEvents","Document.captureEvents(String eventName)")}} {{Deprecated_inline}}</dt>
+ <dd>See {{domxref("window.captureEvents")}}.</dd>
+ <dt>{{domxref("Document.caretPositionFromPoint","Document.caretPositionFromPoint(Number x, Number y)")}}</dt>
+ <dd>Gets a {{domxref("CaretPosition")}} based on two coordinates.</dd>
+ <dt>{{domxref("Document.createAttribute","Document.createAttribute(String name)")}}</dt>
+ <dd>Creates a new {{domxref("Attr")}} object and returns it.</dd>
+ <dt>{{domxref("Document.createAttributeNS","Document.createAttributeNS(String namespace, String name)")}}</dt>
+ <dd>Creates a new attribute node in a given namespace and returns it.</dd>
+ <dt>{{domxref("Document.createCDATASection","Document.createCDATASection(String data)")}}</dt>
+ <dd>Creates a new CDATA node and returns it.</dd>
+ <dt>{{domxref("Document.createComment","Document.createComment(String comment)")}}</dt>
+ <dd>Creates a new comment node and returns it.</dd>
+ <dt>{{domxref("Document.createDocumentFragment()")}}</dt>
+ <dd>Creates a new document fragment.</dd>
+ <dt>{{domxref("Document.createElement","Document.createElement(String name)")}}</dt>
+ <dd>Creates a new element with the given tag name.</dd>
+ <dt>{{domxref("Document.createElementNS","Document.createElementNS(String namespace, String name)")}}</dt>
+ <dd>Creates a new element with the given tag name and namespace URI.</dd>
+ <dt>{{domxref("Document.createEntityReference","Document.createEntityReference(String name)")}} {{obsolete_inline}}</dt>
+ <dd>Creates a new entity reference object and returns it.</dd>
+ <dt>{{domxref("Document.createEvent","Document.createEvent(String interface)")}}</dt>
+ <dd>Creates an event object.</dd>
+ <dt>{{domxref("Document.createNodeIterator","Document.createNodeIterator(Node root[, Number whatToShow[, NodeFilter filter]])")}}</dt>
+ <dd>Creates a {{domxref("NodeIterator")}} object.</dd>
+ <dt>{{domxref("Document.createProcessingInstruction","Document.createProcessingInstruction(String target, String data)")}}</dt>
+ <dd>Creates a new {{domxref("ProcessingInstruction")}} object.</dd>
+ <dt>{{domxref("Document.createRange()")}}</dt>
+ <dd>Creates a {{domxref("Range")}} object.</dd>
+ <dt>{{domxref("Document.createTextNode","Document.createTextNode(String text)")}}</dt>
+ <dd>Creates a text node.</dd>
+ <dt>{{domxref("Document.createTreeWalker","Document.createTreeWalker(Node root[, Number whatToShow[, NodeFilter filter]])")}}</dt>
+ <dd>Creates a {{domxref("TreeWalker")}} object.</dd>
+ <dt>{{domxref("Document.elementFromPoint","Document.elementFromPoint(Number x, Number y)")}}</dt>
+ <dd>Returns the element visible at the specified coordinates.</dd>
+ <dt>{{domxref("Document.enableStyleSheetsForSet","Document.enableStyleSheetsForSet(String name)")}}</dt>
+ <dd>Enables the style sheets for the specified style sheet set.</dd>
+ <dt>{{domxref("Document.exitPointerLock()")}} {{experimental_inline}}</dt>
+ <dd>Release the pointer lock.</dd>
+ <dt>{{domxref("Document.getElementsByClassName","Document.getElementsByClassName(String className)")}}</dt>
+ <dd>Returns a list of elements with the given class name.</dd>
+ <dt>{{domxref("Document.getElementsByTagName","Document.getElementsByTagName(String tagName)")}}</dt>
+ <dd>Returns a list of elements with the given tag name.</dd>
+ <dt>{{domxref("Document.getElementsByTagNameNS","Document.getElementsByTagNameNS(String namespace, String tagName)")}}</dt>
+ <dd>Returns a list of elements with the given tag name and namespace.</dd>
+ <dt>{{domxref("Document.importNode","Document.importNode(Node node, Boolean deep)")}}</dt>
+ <dd>Returns a clone of a node from an external document.</dd>
+ <dt>{{domxref("document.mozSetImageElement")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Allows you to change the element being used as the background image for a specified element ID.</dd>
+ <dt>{{domxref("Document.normalizeDocument()")}} {{obsolete_inline}}</dt>
+ <dd>Replaces entities, normalizes text nodes, etc.</dd>
+ <dt>{{domxref("Document.releaseCapture()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Releases the current mouse capture if it's on an element in this document.</dd>
+ <dt>{{domxref("Document.releaseEvents")}} {{non-standard_inline}} {{Deprecated_inline}}</dt>
+ <dd>See {{domxref("window.releaseEvents")}}.</dd>
+ <dt>{{domxref("document.routeEvent")}} {{non-standard_inline}} {{obsolete_inline(24)}}</dt>
+ <dd>See {{domxref("window.routeEvent")}}.</dd>
+</dl>
+
+<p>The <code>Document</code> interface is extended with the {{domxref("ParentNode")}} interface:</p>
+
+<dl>
+ <dt>{{domxref("Document.getElementById","Document.getElementById(String id)")}}</dt>
+ <dd>Returns an object reference to the identified element.</dd>
+ <dt>{{domxref("Document.querySelector","Document.querySelector(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt>
+ <dd>Returns the first Element node within the document, in document order, that matches the specified selectors.</dd>
+ <dt>{{domxref("Document.querySelectorAll","Document.querySelectorAll(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt>
+ <dd>Returns a list of all the Element nodes within the document that match the specified selectors.</dd>
+</dl>
+
+<p>The <code>Document</code> interface is extended with the {{domxref("XPathEvaluator")}} interface:</p>
+
+<dl>
+ <dt>{{domxref("Document.createExpression","Document.createExpression(String expression, XPathNSResolver resolver)")}}</dt>
+ <dd>Compiles an <code><a href="/en-US/docs/XPathExpression" title="XPathExpression">XPathExpression</a></code> which can then be used for (repeated) evaluations.</dd>
+ <dt>{{domxref("Document.createNSResolver","Document.createNSResolver(Node resolver)")}}</dt>
+ <dd>Creates an {{domxref("XPathNSResolver")}} object.</dd>
+ <dt>{{domxref("Document.evaluate","Document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)")}}</dt>
+ <dd>Evaluates an XPath expression.</dd>
+</dl>
+
+<h3 id="Erweiterung_für_HTML_Dokumente_2">Erweiterung für HTML Dokumente</h3>
+
+<p>Das <code>Document</code> Interface für HTML Dokumente erbt vom {{domxref("HTMLDocument")}} Interface oder ist seit HTML5 erweitert für solche Dokumente:</p>
+
+<dl>
+ <dt>{{domxref("Document.clear()")}} {{non-standard_inline}} {{Deprecated_inline}}</dt>
+ <dd>In majority of modern browsers, including recent versions of Firefox and Internet Explorer, this method does nothing.</dd>
+ <dt>{{domxref("Document.close()")}}</dt>
+ <dd>Closes a document stream for writing.</dd>
+ <dt>{{domxref("Document.execCommand","Document.execCommand(String command[, Boolean showUI[, String value]])")}}</dt>
+ <dd>On an editable document, executes a formating command.</dd>
+ <dt>{{domxref("Document.getElementsByName","Document.getElementsByName(String name)")}}</dt>
+ <dd>Returns a list of elements with the given name.</dd>
+ <dt>{{domxref("Document.getSelection()")}}</dt>
+ <dd>Returns a {{domxref("Selection")}} object related to text selected in the document.</dd>
+ <dt>{{domxref("Document.hasFocus()")}}</dt>
+ <dd>Returns <code>true</code> if the focus is currently located anywhere inside the specified document.</dd>
+ <dt>{{domxref("Document.open()")}}</dt>
+ <dd>Opens a document stream for writing.</dd>
+ <dt>{{domxref("Document.queryCommandEnabled","Document.queryCommandEnabled(String command)")}}</dt>
+ <dd>Returns true if the formating command can be executed on the current range.</dd>
+ <dt>{{domxref("Document.queryCommandIndeterm","Document.queryCommandIndeterm(String command)")}}</dt>
+ <dd>Returns true if the formating command is in an indeterminate state on the current range.</dd>
+ <dt>{{domxref("Document.queryCommandState","Document.queryCommandState(String command)")}}</dt>
+ <dd>Returns true if the formating command has been executed on the current range.</dd>
+ <dt>{{domxref("Document.queryCommandSupported","Document.queryCommandSupported(String command)")}}</dt>
+ <dd>Returns true if the formating command is supported on the current range.</dd>
+ <dt>{{domxref("Document.queryCommandValue","Document.queryCommandValue(String command)")}}</dt>
+ <dd>Returns the current value of the current range for a formatting command.</dd>
+ <dt>{{domxref("Document.registerElement","Document.registerElement(String tagname[, Object options])")}}</dt>
+ <dd>Registers a new custom element in the browser and returns a constructor for the new element.</dd>
+ <dt>{{domxref("Document.write","Document.write(String text)")}}</dt>
+ <dd>Writes text in a document.</dd>
+ <dt>{{domxref("Document.writeln","Document.writeln(String text)")}}</dt>
+ <dd>Writes a line of text in a document.</dd>
+</dl>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1','#i-Document','Document')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition for the interface</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core','#i-Document','Document')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Supersede DOM 1</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core','#i-Document','Document')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Supersede DOM 2</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-document','Document')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Intend to supersede DOM 3</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','dom.html#the-document-object','Document')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Turn the {{domxref("HTMLDocument")}} interface into a <code>Document</code> extension.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 XPath','xpath.html#XPathEvaluator','XPathEvaluator')}}</td>
+   <td>{{Spec2('DOM3 XPath')}}</td>
+   <td>Define the {{domxref("XPathEvaluator")}} interface which extend <code>Document</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Editing','#dom-document-getselection','Document')}}</td>
+   <td>{{Spec2('HTML Editing')}}</td>
+   <td>Extend the <code>Document</code> interface</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View','#extensions-to-the-document-interface','Document')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Extend the <code>Document</code> interface</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM','#extensions-to-the-document-interface','Document')}}</td>
+   <td>{{Spec2('CSSOM')}}</td>
+   <td>Extend the <code>Document</code> interface</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Lock','#extensions-to-the-document-interface','Document')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>Extend the <code>Document</code> interface</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<h3 id="Firefox_Hinweise">Firefox Hinweise</h3>
+
+<p>Mozilla defines a set of non-standard properties made only for XUL content:</p>
+
+<dl>
+ <dt>{{domxref("document.currentScript")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Returns the {{HTMLElement("script")}} element that is currently executing.</dd>
+ <dt>{{domxref("document.documentURIObject")}} {{gecko_minversion_inline("1.9")}}</dt>
+ <dd>(<strong>Mozilla add-ons only!</strong>) Returns the {{Interface("nsIURI")}} object representing the URI of the document. This property only has special meaning in privileged JavaScript code (with UniversalXPConnect privileges).</dd>
+ <dt>{{domxref("document.popupNode")}}</dt>
+ <dd>Returns the node upon which a popup was invoked.</dd>
+ <dt>{{domxref("document.tooltipNode")}}</dt>
+ <dd>Returns the node which is the target of the current tooltip.</dd>
+</dl>
+
+<p>Mozilla also define some non-standard methods:</p>
+
+<dl>
+ <dt>{{domxref("Document.execCommandShowHelp")}} {{obsolete_inline("14.0")}}</dt>
+ <dd>This method never did anything and always threw an exception, so it was removed in Gecko 14.0 {{geckoRelease("14.0")}}.</dd>
+ <dt>{{domxref("Document.getBoxObjectFor")}} {{obsolete_inline}}</dt>
+ <dd>Use the {{domxref("Element.getBoundingClientRect()")}} method instead.</dd>
+ <dt>{{domxref("Document.loadOverlay")}} {{Fx_minversion_inline("1.5")}}</dt>
+ <dd>Loads a <a href="/en-US/docs/XUL_Overlays" title="XUL_Overlays">XUL overlay</a> dynamically. This only works in XUL documents.</dd>
+ <dt>{{domxref("document.queryCommandText")}} {{obsolete_inline("14.0")}}</dt>
+ <dd>This method never did anything but throw an exception, and was removed in Gecko 14.0 {{geckoRelease("14.0")}}.</dd>
+</dl>
+
+<h3 id="Internet_Explorer_Hinweise">Internet Explorer Hinweise</h3>
+
+<p>Microsoft defines some non-standard properties:</p>
+
+<dl>
+ <dt>{{domxref("document.fileSize")}}* {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Returns size in bytes of the document. Starting with Internet Explorer 11, that property is no longer supported. See <a href="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx">MSDN</a>.</dd>
+ <dt><span style="font-weight: normal; line-height: 1.5;">Internet Explorer does not support all methods from the <code>Node</code> interface in the <code>Document</code> interface:</span></dt>
+</dl>
+
+<dl>
+ <dt>{{domxref("document.contains")}}</dt>
+ <dd>As a work-around, <code>document.body.contains()</code> can be used.</dd>
+</dl>
diff --git a/files/de/web/api/document/queryselector/index.html b/files/de/web/api/document/queryselector/index.html
new file mode 100644
index 0000000000..7fadcd87ce
--- /dev/null
+++ b/files/de/web/api/document/queryselector/index.html
@@ -0,0 +1,129 @@
+---
+title: Document.querySelector()
+slug: Web/API/Document/querySelector
+tags:
+  - API
+  - DOM
+  - Funktion
+  - Methode(2)
+  - Méthode
+  - Referenz
+  - Selektor
+  - Selektoren
+translation_of: Web/API/Document/querySelector
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>Die Methode <code><strong>querySelector()</strong></code> von {{domxref("Document")}} gibt das erste {{domxref("Element")}} innerhalb eines Dokuments zurück, welches dem angegebenen Selektor bzw. Selektoren entspricht. Wurden keine Übereinstimmungen gefunden wird <code>null</code> zurückgegeben.</p>
+
+<div class="blockIndicator note">
+<p><strong>Hinweis:</strong> Der Abgleich erfolgt indem sämtliche Knoten des Dokuments und deren Unterknoten der Reihe nach mittels Tiefensuche in Hauptreihenfolge (<em>depth-first pre-order</em>) durchlaufen werden.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>element</var> = document.querySelector(<var>selectors</var>);
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>selectors</code></dt>
+ <dd>Ein {{domxref("DOMString")}} mit einem oder mehreren Selektoren die abgeblichen werden sollen. Dieser String muss ein gültiger CSS-Selektor-String sein. Ist dies nicht der Fall, wird eine <code>SYNTAX_ERR</code> Exception ausgelöst. Weitere Informationen zu Selektoren und deren Verwaltung finden Sie unter <a href="/de/docs/Gecko-DOM-Referenz/DOM_Elemente_mittels_Selektoren_ermitteln">DOM Elemente mittels Selektoren ermitteln</a>.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Zeichen, die nicht zur Standard-CSS-Syntax gehören, müssen mit einem Backslash-Zeichen maskiert werden. Da JavaScript auch Backslash-Escape-Anweisungen verwendet, müssen Sie beim Schreiben von String-Literalen mit diesen Zeichen besonders vorsichtig sein. Weitere Informationen finden Sie unter {{anch("Sonderzeichen maskieren")}}.</p>
+</div>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein {{domxref("Element")}}-Objekt, das das erste Element des Dokuments darstellt, das der angegebenen Gruppe von <a href="/de/docs/Web/CSS/CSS_Selectors">CSS-Selektoren</a> entspricht, oder <code>null</code>, wenn keine Übereinstimmungen vorhanden sind.</p>
+
+<p>Wenn Sie eine Liste aller Elemente benötigen, die mit den angegebenen Selektoren übereinstimmen, verwenden Sie stattdessen {{domxref("document.querySelectorAll()", "querySelectorAll()")}}.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt><code>SYNTAX_ERR</code></dt>
+ <dd>Die Syntax der angegebenen Selektoren ist ungültig.</dd>
+</dl>
+
+<h2 id="Nutzungshinweise">Nutzungshinweise</h2>
+
+<p>Wenn der angegebene Selektor mit einer ID übereinstimmt, die im Dokument fälschlicherweise mehrmals vorkommt, wird das erste Element mit dieser ID zurückgegeben.</p>
+
+<p><a href="/de/docs/Web/CSS/Pseudo-elements">CSS-Pseudoelemente</a> geben niemals Elemente zurück, wie in der <a href="https://www.w3.org/TR/selectors-api/#grammar">Selektoren-API</a> angegeben.</p>
+
+<h3 id="Sonderzeichen_maskieren">Sonderzeichen maskieren</h3>
+
+<p>Um mit einer ID oder Selektoren abzugleichen, die nicht der Standard-CSS-Syntax entsprechen (z. B. durch einen unzulässigen Doppelpunkt oder Leerzeichen), müssen Sie das Zeichen mit einem Backslash ("<code>\</code>") maskieren. Da der Backslash selbst ebenfalls ein Maskierungszeichen in JavaScript ist, müssen Sie ihn bei der Eingabe eines Stringliterals <em>zweimal</em> maskieren (einmal für den JavaScript String und einmal für <code>querySelector()</code>):</p>
+
+<pre class="brush: html">&lt;div id="foo\bar"&gt;&lt;/div&gt;
+&lt;div id="foo:bar"&gt;&lt;/div&gt;
+
+&lt;script&gt;
+  console.log('#foo\bar');               // "#fooar" (\b is the backspace control character)
+  document.querySelector('#foo\bar');    // Does not match anything
+
+  console.log('#foo\\bar');              // "#foo\bar"
+  console.log('#foo\\\\bar');            // "#foo\\bar"
+  document.querySelector('#foo\\bar'); // Match the first div
+
+  document.querySelector('#foo:bar');    // Does not match anything
+  document.querySelector('#foo\\:bar');  // Match the second div
+&lt;/script&gt;</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Erstes_Element_ermitteln_das_mit_einer_Klasse_übereinstimmt">Erstes Element ermitteln, das mit einer Klasse übereinstimmt</h3>
+
+<p>In diesem Beispiel wird das erste Element im Dokument mit der Klasse "<code>myclass</code>" zurückgegeben:</p>
+
+<pre class="brush: js">var el = document.querySelector(".myclass");
+</pre>
+
+<h3 id="Ein_komplexerer_Selektor">Ein komplexerer Selektor</h3>
+
+<p>Selektoren können auch sehr mächtig sein, wie das folgende Beispiel zeigt. Hier wird das erste {{HTMLElement("input")}}-Element mit dem Namen "login" (<code>&lt;input name="login"/&gt;</code>) innerhalb eines {{HTMLElement("div")}}, dessen Klasse "user-panel main" ist (<code>&lt;div class="user-panel main"&gt;</code>), im Dokument zurückgegeben:</p>
+
+<pre class="brush: js">var el = document.querySelector("div.user-panel.main input[name='login']");
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 2", "#interface-definitions", "document.querySelector()")}}</td>
+   <td>{{Spec2("Selectors API Level 2")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td>
+   <td>{{Spec2("Selectors API Level 1")}}</td>
+   <td>Initiale Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<div>{{Compat("api.Document.querySelector")}}</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Gecko-DOM-Referenz/DOM_Elemente_mittels_Selektoren_ermitteln">DOM Elemente mittels Selektoren ermitteln</a></li>
+ <li>{{domxref("Element.querySelector()")}}</li>
+ <li>{{domxref("Document.querySelectorAll()")}}</li>
+ <li>{{domxref("Element.querySelectorAll()")}}</li>
+ <li><a href="/de/docs/Code_snippets/QuerySelector">Code-Ausschnitte für querySelector</a></li>
+</ul>
diff --git a/files/de/web/api/document/queryselectorall/index.html b/files/de/web/api/document/queryselectorall/index.html
new file mode 100644
index 0000000000..80ab2a83c2
--- /dev/null
+++ b/files/de/web/api/document/queryselectorall/index.html
@@ -0,0 +1,172 @@
+---
+title: Document.querySelectorAll()
+slug: Web/API/Document/querySelectorAll
+tags:
+  - API
+  - Document
+  - querySelectorAll
+translation_of: Web/API/Document/querySelectorAll
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Die Methode <code><strong>querySelectorAll()</strong></code> von {{domxref("Document")}} gibt eine statische (nicht live) {{domxref("NodeList")}} zurück, die eine Liste der Elemente des Dokuments darstellt, die mit der angegebenen Selektorgruppe übereinstimmen.</p>
+
+<div class="blockIndicator note">
+<p><strong>Hinweis:</strong> Diese Methode wird basierend auf dem Mixin der Methode {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} von {{domxref("ParentNode")}} implementiert.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>elementList</var> = <em>parentNode</em>.querySelectorAll(<var>selectors</var>);
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>selectors</code></dt>
+ <dd>Ein {{domxref("DOMString")}} der einen oder mehrere Selektoren zum Abgleich enthält. Dieser String muss ein valider <a href="/de/docs/Web/CSS/CSS_Selectors">CSS-Selektor</a>-String sein, andernfalls wird eine <code>SyntaxError</code> Exception ausgelöst. Weitere Informationen zu Selektoren und deren Verwaltung finden Sie unter <a href="https://developer.mozilla.org/de/docs/Gecko-DOM-Referenz/DOM_Elemente_mittels_Selektoren_ermitteln">DOM Elemente mittels Selektoren ermitteln</a>. Es können mehrere durch Kommata getrennte Selektoren angegeben werden.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Zeichen, die nicht zur Standard-CSS-Syntax gehören, müssen mit einem Backslash-Zeichen maskiert werden. Da JavaScript auch Backslash-Escape-Anweisungen verwendet, müssen Sie beim Schreiben von String-Literalen mit diesen Zeichen besonders vorsichtig sein. Weitere Informationen finden Sie unter {{anch("Sonderzeichen maskieren")}}.</p>
+</div>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine statische (nicht-live) {{domxref("NodeList")}} mit je einem {{domxref("Element")}}-Objekt für jedes Element das mind. einem der angegebenen Selektoren entspricht oder eine leere {{domxref("NodeList")}} im Falle keiner Übereinstimmungen.</p>
+
+<div class="blockIndicator note">
+<p><strong>Hinweis:</strong> Wenn <code>selectors</code> ein <a href="/de/docs/Web/CSS/Pseudo-elements">CSS Pseudo-Element</a> enthält ist die zurückgegebene Liste immer leer.</p>
+</div>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd>Die Syntax des <code>selectors</code>-String ist ungültig.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Eine_Liste_von_Übereinstimmungen_erhalten">Eine Liste von Übereinstimmungen erhalten</h3>
+
+<p>Um eine {{domxref("NodeList")}} aller {{HTMLElement("p")}}-Elemente des Dokuments zu erhalten:</p>
+
+<pre class="brush: js">var matches = document.querySelectorAll("p");</pre>
+
+<p>Das folgende Beispiel gibt eine Liste aller {{HTMLElement("div")}}-Elemente innerhalb des Dokuments zurück, deren Klasse entweder <code>"note"</code> oder <code>"alert"</code> ist:</p>
+
+<pre class="brush: js">var matches = document.querySelectorAll("div.note, div.alert");
+</pre>
+
+<p>Hier erhalten wir eine Liste von <code>&lt;p&gt;</code>-Elementen, deren unmittelbares übergeordnetes Element ein {{HTMLElement("div")}} mit der Klasse <code>"highlighted"</code> ist und die sich in einem Container befinden, dessen ID <code>"test"</code> ist.</p>
+
+<pre class="brush: js">var container = document.querySelector("#test");
+var matches = container.querySelectorAll("div.highlighted &gt; p");</pre>
+
+<p>Das folgende Beispiel nutzt einen <a href="/de/docs/Web/CSS/Attribute_selectors">Attribut-Selektor</a>, um eine Liste von {{HTMLElement("iframe")}}-Elementen im Dokument zurückzugeben, die ein <code>"data-src"</code> Attribut besitzen:</p>
+
+<pre class="brush: js">var matches = document.querySelectorAll("iframe[data-src]");</pre>
+
+<p>Hier wird ein Attribut-Selektor verwendet, um eine Aufzählung der Listenelemente zurückzugeben, die in einer Liste mit der ID <code>"userlist"</code> enthalten sind und deren Attribut <code>"data-active"</code> den Wert <code>"1"</code> hat:</p>
+
+<pre class="brush: js">var container = document.querySelector("#userlist");
+var matches = container.querySelectorAll("li[data-active='1']");</pre>
+
+<h3 id="Auf_Übereinstimmungen_zugreifen">Auf Übereinstimmungen zugreifen</h3>
+
+<p>Sobald die {{domxref("NodeList")}} der übereinstimmenden Elemente zurückgegeben wird, können Sie sie wie jedes Array untersuchen. Wenn das Array leer ist (d. h. die Eigenschaft <code>length</code> 0 ist), wurden keine Übereinstimmungen gefunden.</p>
+
+<p>Ansonsten können Sie einfach die Standard-Array-Notation verwenden, um auf den Inhalt der Liste zuzugreifen. Sie können jede allgemeine Schleifenanweisung verwenden, wie etwa:</p>
+
+<pre class="brush: js">var highlightedItems = userList.querySelectorAll(".highlighted");
+
+highlightedItems.forEach(function(userItem) {
+  deleteUser(userItem);
+});</pre>
+
+<h2 id="Benutzerhinweise">Benutzerhinweise</h2>
+
+<p><code>querySelectorAll()</code> verhält sich anders als die meisten JavaScript-DOM-Bibliotheken, was zu unerwarteten Ergebnissen führen kann.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>Betrachten Sie dieses HTML mit seinen drei geschachtelten {{HTMLElement("div")}} Blöcken.</p>
+
+<pre class="brush: html">&lt;div class="outer"&gt;
+  &lt;div class="select"&gt;
+    &lt;div class="inner"&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var select = document.querySelector('.select');
+var inner = select.querySelectorAll('.outer .inner');
+inner.length; // 1, not 0!
+</pre>
+
+<p>Wenn Sie in diesem Beispiel <code>".outer .inner"</code> im Kontext des <code>&lt;div&gt;</code> mit der Klasse <code>"select"</code> auswählen, wird das Element mit der Klasse <code>".inner"</code> immer noch gefunden, obwohl <code>.outer</code> kein Nachkomme des Basis-Elements ist, auf dem die Suche durchgeführt wird (<code>".select"</code>). Standardmäßig überprüft <code>querySelectorAll()</code> nur, ob sich das letzte Element im Selektor im Suchbereich befindet.</p>
+
+<p>Die {{cssxref(":scope")}} Pseudo-Klasse stellt das erwartete Verhalten wieder her, bei dem Selektoren nur mit Nachkommen des Basis-Elements übereinstimmen:</p>
+
+<pre class="brush: js">var select = document.querySelector('.select');
+var inner = select.querySelectorAll(':scope .outer .inner');
+inner.length; // 0
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Lebender Standard</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("Selectors API Level 2")}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td>Initiale Definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td>
+   <td>{{Spec2("Selectors API Level 1")}}</td>
+   <td>Originale Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("api.Document.querySelectorAll")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/de/docs/Gecko-DOM-Referenz/DOM_Elemente_mittels_Selektoren_ermitteln">DOM Elemente mittels Selektoren ermitteln</a></li>
+ <li><a href="/de/docs/Web/CSS/Attribute_selectors">Attribut-Selektoren</a> im CSS-Leitfaden</li>
+ <li><a href="/de/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Attribut-Selektoren</a> im MDN Lernbereich</li>
+ <li>{{domxref("Element.querySelector()")}} und {{domxref("Element.querySelectorAll()")}}</li>
+ <li>{{domxref("Document.querySelector()")}}</li>
+ <li>{{domxref("DocumentFragment.querySelector()")}} und {{domxref("DocumentFragment.querySelectorAll()")}}</li>
+ <li>{{domxref("ParentNode.querySelector()")}} und {{domxref("ParentNode.querySelectorAll()")}}</li>
+ <li><a class="new" href="/de/docs/Code_snippets/QuerySelector" rel="nofollow">Code-Ausschnitte für <code>querySelector()</code></a></li>
+</ul>
diff --git a/files/de/web/api/document/readystate/index.html b/files/de/web/api/document/readystate/index.html
new file mode 100644
index 0000000000..da2593e9c7
--- /dev/null
+++ b/files/de/web/api/document/readystate/index.html
@@ -0,0 +1,111 @@
+---
+title: Document.readyState
+slug: Web/API/Document/readyState
+tags:
+  - API
+  - HTML DOM
+  - Property
+  - Referenz
+translation_of: Web/API/Document/readyState
+---
+<div>{{APIRef("DOM")}} {{ gecko_minversion_header("1.9.2") }}</div>
+
+<h2 id="Summary" name="Summary">Zusammenfassung</h2>
+
+<p>Die Eigenschaft <strong>Document.readyState</strong> eines {{ domxref("document") }}-Objektes beschreibt dessen Ladezustand.</p>
+
+<h3 id="Werte">Werte</h3>
+
+<p>Die Eigenschaft <strong>readyState</strong> kann folgende Werte haben:</p>
+
+<dl>
+ <dt>loading</dt>
+ <dd>Das Dokument wird noch geladen.</dd>
+ <dt>interactive</dt>
+ <dd>Das Dokument selbst wurde vollständig eingelesen und verarbeitet, aber das Laden weiterer Bestandteile wie Bilder, Stylesheets und Frames ist noch nicht abgeschlossen.<br>
+ Dieser Status zeigt an, dass das Ereignis {{event("DOMContentLoaded")}} ausgelöst wurde.</dd>
+ <dt>complete</dt>
+ <dd>Das Dokument und seine Bestandteile wurden geladen.<br>
+ Dieser Status zeigt an, dass das Ereignis {{event("load")}} ausgelöst wurde.</dd>
+</dl>
+
+<p>Ändert sich der Wert dieser Eigenschaft, wird das Ereignis {{event("readystatechange")}} des zugehörigen {{domxref("document") }}-Objekts augelöst.</p>
+
+<h2 id="Syntax"><span>Syntax</span></h2>
+
+<pre class="brush: js"><em>var string</em> = document.readyState;
+</pre>
+
+<h2 id="Beispiele"><span>Beispiele</span></h2>
+
+<h3 id="Verschiedene_Ladezustände">Verschiedene Ladezustände</h3>
+
+<pre class="brush: js"><span>switch (document.readyState) {
+  case "loading":
+    // Das Dokument wird noch geladen.
+    break;
+  case "interactive":
+    // Das Dokument wurde geladen. Wir können nun die DOM-Elemente ansprechen.
+    var span = document.createElement("span");
+    span.textContent = "A &lt;span&gt; element.";
+    document.body.appendChild(span);
+    break;
+  case "complete":
+    // Die Seite ist komplett geladen.
+    console.log("The first CSS rule is: " + document.styleSheets[0].cssRules[0].cssText);
+    break;
+}</span>
+</pre>
+
+<h3 id="readystatechange_als_eine_Alternative_zum_Ereignis_DOMContentLoaded">readystatechange als eine Alternative zum Ereignis DOMContentLoaded</h3>
+
+<pre class="brush:js">// Alternative zum Ereignis DOMContentLoaded
+document.onreadystatechange = function () {
+  if (document.readyState == "interactive") {
+    initApplication();
+  }
+}</pre>
+
+<h3 id="readystatechange_als_eine_Alternative_zum_Ereignis_load">readystatechange als eine Alternative zum Ereignis load</h3>
+
+<pre class="brush: js">// Alternative zum Ereignis load
+document.onreadystatechange = function () {
+  if (document.readyState == "complete") {
+    initApplication();
+  }
+}</pre>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "#current-document-readiness", "Document readiness")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "#current-document-readiness", "Document readiness")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#current-document-readiness", "Document readiness")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initiale Spezifikation.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{event("readystatechange")}}</li>
+ <li>{{event("DOMContentLoaded")}}</li>
+ <li>{{event("load")}}</li>
+</ul>
diff --git a/files/de/web/api/document/referrer/index.html b/files/de/web/api/document/referrer/index.html
new file mode 100644
index 0000000000..8c1cd8d888
--- /dev/null
+++ b/files/de/web/api/document/referrer/index.html
@@ -0,0 +1,46 @@
+---
+title: Document.referrer
+slug: Web/API/Document/referrer
+tags:
+  - Referenz
+translation_of: Web/API/Document/referrer
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Gibt den <a href="http://www.w3.org/Addressing/#background">URI</a> der Seite aus, von der die aktuelle Seite aufgerufen wurde.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">var <var>string</var> = <var>document</var>.referrer;
+</pre>
+
+<h3 id="Wert">Wert</h3>
+
+<p>Der Wert ist eine leere Zeichenkette, wenn der Benutzer direkt auf die Seite navigiert ist (nicht über einen Link, sondern z.B. über ein Lesezeichen). Da es sich bei dieser Eigenschaft lediglich um einen String handelt, ist der Zugriff auf das DOM der referenzierenden Seite nicht möglich.</p>
+
+<p>Innerhalb eines {{HTMLElement("iframe")}}, wird der <code>Document.referrer</code> anfänglich auf den identischen Wert wie {{domxref("HTMLHyperlinkElementUtils/href", "href")}} der {{domxref("Window/location", "Window.location")}} des übergeordneten Fensters gesetzt.</p>
+
+<h2 id="Specification" name="Specification">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-document-referrer-dev', 'document.referrer')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten erstellt. Wenn Sie einen Beitrag zu den Daten leisten möchten, dann laden Sie sich bitte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> herunter und senden Sie uns eine Pull-Anfrage.</div>
+
+<p>{{Compat("api.Document.referrer")}}</p>
diff --git a/files/de/web/api/document/registerelement/index.html b/files/de/web/api/document/registerelement/index.html
new file mode 100644
index 0000000000..f563250e8e
--- /dev/null
+++ b/files/de/web/api/document/registerelement/index.html
@@ -0,0 +1,113 @@
+---
+title: Document.registerElement()
+slug: Web/API/Document/registerElement
+tags:
+  - API
+  - DOM
+  - Veraltet
+  - Web Components
+translation_of: Web/API/Document/registerElement
+---
+<p>{{APIRef("DOM")}}</p>
+
+<div class="warning">
+<p><strong>Warnung: </strong>document.registerElement() läuft zu Gunsten von <a href="/en-US/docs/Web/API/CustomElementRegistry/define">customElements.define()</a> aus.</p>
+</div>
+
+<p>{{draft}}</p>
+
+<p>Die <code><strong>document.registerElement()</strong></code>-Methode registriert ein neues <a href="/en-US/docs/Web/Web_Components/Custom_Elements">benutzerdefiniertes Element</a> im Browser und gibt einen Konstruktor für das neue Element zurück.</p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Dies ist eine experimentelle Technologie. Der Browser, der sie benutzen soll, muss Web Components unterstützen. Siehe <a href="/en-US/docs/Web/Web_Components#Enabling_Web_Components_in_Firefox">Web Components in Firefox erlauben</a>.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>constructor</em> = document.registerElement(<em>tag-name</em>, <em>options</em>);</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><em>tag-name</em></dt>
+ <dd>Der Name des benutzerdefinierten Elements. Der Name muss einen Bindestrich (-) enthalten, zum Beispiel <code>my-tag</code>.</dd>
+ <dt><em>options {{optional_inline}}</em></dt>
+ <dd>
+ <p>Ein Objekt mit den Eigenschaften <strong>prototype</strong>, auf dem das benutzerdefinierte Element basieren soll, und <strong>extends</strong>, einem bestehenden Tag, der erweitert werden soll. Beide sind optional.</p>
+ </dd>
+</dl>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Hier ist ein einfaches Beispiel:</p>
+
+<pre class="brush: js">var Mytag = document.registerElement('my-tag');
+</pre>
+
+<p>Der Tag ist num im Browser registriert. Die <code>Mytag</code>-Variable enthält einen Konstruktor, der benutzt werden kann, um ein <code>my-tag</code>-Element wie folgt im Dokument zu erzeugen:</p>
+
+<pre class="brush: js">document.body.appendChild(new Mytag());</pre>
+
+<p>Das fügt ein leeres <code>my-tag</code>-Element ein, dass sichtbar wird, wenn die Entwicklerwerkzeuge des Browsers benutzt werden aber nicht, wenn mit Hilfe des Brwoser der Quellcode betrachtet wird. So lange dem Tag kein Inhalt beigefügt wird, wird es auch in der normalen Browser-Ansicht nicht sichtbar sein. Inhalt kann beispielsweise folgendermaßen hinzugefügt werden:</p>
+
+<pre class="brush: js">var mytag = document.getElementsByTagName("my-tag")[0];
+mytag.textContent = "I am a my-tag element.";
+</pre>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>35</td>
+   <td>31<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>4.4.4</td>
+   <td>31<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Diese API ist hinter einer Einstellung versteckt.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a dir="ltr" href="/en-US/docs/Web/Web_Components/Custom_Elements">Custom Elements</a></li>
+</ul>
diff --git a/files/de/web/api/document/title/index.html b/files/de/web/api/document/title/index.html
new file mode 100644
index 0000000000..9c54e274a6
--- /dev/null
+++ b/files/de/web/api/document/title/index.html
@@ -0,0 +1,70 @@
+---
+title: Document.title
+slug: Web/API/Document/title
+translation_of: Web/API/Document/title
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary">Die Eigenschaft <strong><code>document.title</code></strong> holt oder setzt den aktuellen <a href="/en-US/docs/Web/HTML/Element/title">Titel</a> des Dokuments.</span></p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <var>docTitle</var> = <var>document</var>.title;
+</pre>
+
+<p><em>docTitle</em> ist eine Zeichenfolge, die den Titel des Dokuments enthält. Wenn der Titel durch das Setzen von <code>document.title</code> überschrieben wurde, enthält er diesen Wert. Andernfalls enthält er den im Markup angegebenen Titel (siehe {{Anch("Anmerkungen")}} unten).</p>
+
+<pre class="syntaxbox"><em>document</em>.title = <em>newTitle</em>;
+</pre>
+
+<p><code>newTitle</code> ist der neue Titel des Dokuments. Die Zuweisung beeinflusst den Rückgabewert von <code>document.title</code>, den für das Dokument angezeigten Titel (z.B. in der Titelleiste des Fensters oder Tabs), und sie beeinflusst auch das DOM des Dokuments (z.B. den Inhalt des Elements <code>&lt;title&gt;</code> in einem HTML-Dokument).</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush:js">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;Hallo Welt!&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+  &lt;script&gt;
+    alert(document.title); // zeigt "Hallo Welt!"
+    document.title = "Tschüss Welt!";
+    alert(document.title); // zeigt "Tschüss Welt!"
+  &lt;/script&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Anmerkungen">Anmerkungen</h2>
+
+<p>Diese Eigenschaft gilt für HTML-, SVG-, XUL- und andere Dokumente in Gecko.</p>
+
+<p>Bei HTML-Dokumenten ist der Anfangswert von <code>document.title</code> der Textinhalt des Elements <code>&lt;title&gt;</code>. Bei XUL ist es der Wert des {{XULAttr("title")}} Attributs des {{XULElem("window")}} oder eines anderen XUL-Elements der obersten Ebene.</p>
+
+<p>In XUL hat der Zugriff auf <code>document.title</code>, bevor das Dokument vollständig geladen ist, ein undefiniertes Verhalten: <code>document.title</code> gibt möglicherweise eine leere Zeichenfolge zurück, und das Setzen von <code>document.title</code> hat möglicherweise keine Wirkung.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','#document.title','document.title')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+
+
+<p>{{Compat("api.Document.title")}}</p>
diff --git a/files/de/web/api/document/url/index.html b/files/de/web/api/document/url/index.html
new file mode 100644
index 0000000000..29770925ee
--- /dev/null
+++ b/files/de/web/api/document/url/index.html
@@ -0,0 +1,19 @@
+---
+title: Document.URL
+slug: Web/API/Document/URL
+translation_of: Web/API/Document/URL
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Die schreibgeschützte Eigenschaft <code><strong>URL</strong></code> des {{domxref("Document")}} interface gibt den Ort des Dokuments als String zurück.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="brush: js">var <em>string</em> = document.URL
+</pre>
+
+<h2 id="Specification" name="Specification">Spezifikation</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-46183437">DOM Level 2 HTML: URL</a></li>
+</ul>
diff --git a/files/de/web/api/document/width/index.html b/files/de/web/api/document/width/index.html
new file mode 100644
index 0000000000..5fc3e1c80a
--- /dev/null
+++ b/files/de/web/api/document/width/index.html
@@ -0,0 +1,45 @@
+---
+title: Document.width
+slug: Web/API/Document/width
+translation_of: Web/API/Document/width
+---
+<div>{{APIRef("DOM")}} {{Obsolete_header}}</div>
+
+<div class="note">
+<p><strong>Note:</strong> Starting in {{Gecko("6.0")}},<code> document.width </code>is no longer supported. Instead, use <code>document.body.clientWidth</code>. See {{domxref("element.clientWidth")}}.</p>
+</div>
+
+<p>Gibt die Breite des {{HTMLElement("body")}} Elements des aktuellen Dokuments in Pixeln zurück.</p>
+
+<p>Wird nicht vom Internet Explorer unterstützt.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>pixels</em> = document.width;
+</pre>
+
+<h2 id="Example" name="Example">Beispiel</h2>
+
+<pre class="brush:js">function init() {
+    alert("Die Breite des Dokuments beträgt " + document.width + " Pixel.");
+}
+</pre>
+
+<h2 id="Alternatives" name="Alternatives">Alternativen</h2>
+
+<pre class="syntaxbox">document.body.clientWidth              /* Breite des &lt;body&gt; */
+document.documentElement.clientWidth   /* Breite des &lt;html&gt; */
+window.innerWidth                      /* Breite des Browserfensters */
+</pre>
+
+<h2 id="Specification" name="Specification">Spezifikation</h2>
+
+<p>HTML5</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{domxref("document.height")}}</li>
+ <li>{{domxref("Element.clientWidth")}}</li>
+ <li>{{domxref("Element.scrollWidth")}}</li>
+</ul>
diff --git a/files/de/web/api/document/write/index.html b/files/de/web/api/document/write/index.html
new file mode 100644
index 0000000000..3b25f6b658
--- /dev/null
+++ b/files/de/web/api/document/write/index.html
@@ -0,0 +1,85 @@
+---
+title: Document.write()
+slug: Web/API/Document/write
+tags:
+  - API
+  - DOM
+  - Document
+  - Méthode
+  - Referenz
+translation_of: Web/API/Document/write
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<p>Schreibt eine Zeichenfolge in einen Dokument-Stream, der zuvor mittels <a href="/en-US/docs/Web/API/document.open">document.open()</a> geöffnet wurde.</p>
+
+<div class="note">Hinweis: da <code>document.write</code> in einen Dokument-<strong>Stream </strong>schreibt, wird beim Aufruf von <code>document.write</code> auf ein geschlossenes (fertig geladenes) Dokument dieses automatisch wieder mittels <code>document.open</code> geöffnet, <a href="https://developer.mozilla.org/en-US/docs/Web/API/document.open#Notes">wodurch das Dokument geleert wird</a>.</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">document.write(<em>markup</em>);
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>markup</code></dt>
+ <dd>Ein String, der in das Dokument geschrieben wird.</dd>
+</dl>
+
+<h3 id="Beispiel">Beispiel</h3>
+
+<pre class="brush: html">&lt;html&gt;
+
+&lt;head&gt;
+  &lt;title&gt;write example&lt;/title&gt;
+
+  &lt;script&gt;
+    function newContent() {
+      alert("load new content");
+      document.open();
+      document.write("&lt;h1&gt;Raus mit dem Alten - rein mit dem Neuen!&lt;/h1&gt;");
+      document.close();
+    }
+  &lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onload="newContent();"&gt;
+  &lt;p&gt;originaler Dokumenten-Inhalt&lt;/p&gt;
+&lt;/body&gt;
+
+&lt;/html&gt;
+</pre>
+
+<h2 id="Hinweise">Hinweise</h2>
+
+<p>Wird die Ausgabe auf ein Dokument angewendet, das zuvor nicht mittels <a href="/en-US/docs/Web/API/document.open"><code>document.open()</code></a> geöffnet wurde, löst dies ein implizites <code>document.open</code> aus. Sobald Sie den Schreibvorgang beendet haben, empfiehlt es sich <a href="/en-US/docs/Web/API/document.close"><code>document.close()</code></a> aufzurufen, um dem Browser mitzuteilen, dass das Dokument vollständig geladen werden kann. Der geschriebene Text wird in das Strukturmodell des Dokuments eingelesen. Im vorherigen Beispiel wird das <code>h1</code>-Element automatisch in einen Knoten im Dokument umgewandelt.</p>
+
+<p>Wird der <code>document.write()</code> Aufruf in ein im HTML eingeschlossenes <code>&lt;script&gt;</code> Tag eingebunden, wird <code>document.open()</code> nicht aufgerufen. Zum Beispiel:</p>
+
+<pre class="brush: html">&lt;script&gt;
+  document.write("&lt;h1&gt;Main title&lt;/h1&gt;")
+&lt;/script&gt;
+</pre>
+
+<div class="note"><strong>Hinweis:</strong> <code>document.write</code> und <code>document.writeln</code> <a href="/en-US/docs/Archive/Web/Writing_JavaScript_for_HTML">funktionieren nicht in XHTML Documenten</a> (Sie erhalten einen "Operation is not supported" [<code>NS_ERROR_DOM_NOT_SUPPORTED_ERR</code>] Fehler in der Fehlerkonsole). Dies tritt auf, sobald Sie eine lokale Datei mit der Erweiterung .xhtml laden oder eine Datei öffnen, die mit dem <code>application/xhtml+xml</code>-<a href="/en-US/docs/Glossary/MIME_type">MIME-Typ</a> vom Server gesendet wurde. Weitere Informationen erhalten Sie in der <a class="external" href="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite">W3C XHTML FAQ</a>.</div>
+
+<div class="note"><strong>Hinweis:</strong> <code>document.write</code> in <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer">verzögert geladenen</a> oder <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-async">asynchronen</a> Scripten wird ignoriert und Sie erhalten eine Nachricht ähnlich dieser in der Fehlerkonsole: "A call to <code>document.write()</code> from an asynchronously-loaded external script was ignored".</div>
+
+<div class="note"><strong>Hinweis </strong>(Nur Microsoft Edge): ein wiederholter Aufruf von<code>document.write</code> in einem <code>&lt;iframe&gt;</code> erzeugt den Fehler "SCRIPT70: Permission denied".</div>
+
+<div class="note"><strong>Hinweis </strong>(Chrome Version 55+): per <code>document.write()</code> injizierte <code>&lt;script&gt;</code>-Elemente werden bei einer 2G Verbindung nach einem HTTP Cache Miss nicht ausgeführt.</div>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75233634">DOM Level 2 HTML: <code>write()</code> Methode</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/2011/WD-html5-author-20110705/apis-in-html-documents.html#dynamic-markup-insertion">Dynamische Markup-Einfügung in HTML</a></li>
+</ul>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{ domxref("element.innerHTML") }}</li>
+ <li>{{ domxref("document.createElement()") }}</li>
+</ul>
diff --git a/files/de/web/api/document/writeln/index.html b/files/de/web/api/document/writeln/index.html
new file mode 100644
index 0000000000..6581924105
--- /dev/null
+++ b/files/de/web/api/document/writeln/index.html
@@ -0,0 +1,60 @@
+---
+title: Document.writeln()
+slug: Web/API/Document/writeln
+translation_of: Web/API/Document/writeln
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>Schreibt eine Textfolge, gefolgt von einem Zeilenumbruchzeichen, in ein Dokument.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="eval notranslate">document.writeln(<em>line</em>);
+</pre>
+
+<h3 id="Parameters" name="Parameters">Parameters</h3>
+
+<ul>
+ <li><code>line</code> ist eine Zeichenfolge welche eine Textzeile enthält.</li>
+</ul>
+
+<h2 id="Example" name="Example">Beispiel</h2>
+
+<pre class="notranslate">document.writeln("&lt;p&gt;enter password:&lt;/p&gt;");
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p><strong>document.writeln</strong> ist dasselbe wie {{domxref("document.write")}} aber fügt einen Zeilenumbruch hinzu.</p>
+
+<div class="note"><strong>Note:</strong> <strong>document.writeln</strong> (like <strong>document.write</strong>) does not work in XHTML documents (you'll get a "Operation is not supported" (<code>NS_ERROR_DOM_NOT_SUPPORTED_ERR</code>) error on the error console). This is the case if opening a local file with a .xhtml file extension or for any document served with an application/xhtml+xml MIME type. More information is available in the <a class="external" href="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite" title="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite">W3C XHTML FAQ</a>.</div>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Bemerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "#dom-document-writeln", "document.writeln()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 HTML", "html.html#ID-35318390", "document.writeln()")}}</td>
+   <td>{{Spec2("DOM2 HTML")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+
+
+<p>{{Compat("api.Document.writeln")}}</p>
diff --git a/files/de/web/api/documentfragment/index.html b/files/de/web/api/documentfragment/index.html
new file mode 100644
index 0000000000..8dc6abcceb
--- /dev/null
+++ b/files/de/web/api/documentfragment/index.html
@@ -0,0 +1,258 @@
+---
+title: DocumentFragment
+slug: Web/API/DocumentFragment
+tags:
+  - API
+  - DOM
+  - DocumentFragment
+  - Documents
+  - Interface
+  - Reference
+  - Web Components
+translation_of: Web/API/DocumentFragment
+---
+<div>{{ APIRef("DOM") }}</div>
+
+<p>Das <strong><code>DocumentFragment</code></strong> interface stellt ein einfaches Objekt dar, welches ohne Bezug zu einem parent erstellt und verwendet werden kann. Es kann somit verstanden werden als eine leichtgewichtige Variante des {{domxref("Document")}}, die einen Ausschnitt einer Dokumentstruktur aus Element-Knoten abbildet. Der zentrale Unterschied dabei ist jedoch, dass das Fragment nicht Bestandteil der aktiven Seitenstruktur und des DOM-Baums ist. Dadurch haben Änderungen an dem Fragment keine Auswirkungen auf das aktive Dokument, wodurch unerwünschte Seiteneffekte von DOM-Änderungen wie {{Glossary("reflow")}} oder Performanceeinbußen verhindert werden können.</p>
+
+<p>Üblicherweise wird das <code>DocumentFragment</code> dazu verwendet, um einen neuen DOM-Teilbaum für eine Seite zu erzeugen und darin beliebig Fragmente und Knoten vorbereiten zu können, diese über das {{domxref("Node")}} interface mittels Methoden wie {{domxref("Node.appendChild", "appendChild()")}} und {{domxref("Node.insertBefore", "insertBefore()")}} hinzuzufügen. Wenn das Frament schließlich in die aktive Dokumentstruktur und deren DOM eingefügt wird, bleibt ein leeres <code>DocumentFragment </code>zurück. Da alle Knoten auf einmal in das aktive Dokument hinzugefügt werden, wird lediglich ein einzelner reflow und render Prozess ausgelöst, anstelle von potentiell unzähligen für jeden einzelnen, separat eingefügten Knoten.</p>
+
+<p>Das interface wird ebenso bei Web components verwendet: {{HTMLElement("template")}}-Elemente beinhalten ein <code>DocumentFragment</code> in ihrer {{domxref("HTMLTemplateElement.content")}} Eigenschaft.</p>
+
+<p>Ein leeres <code>DocumentFragment</code> kann jederzeit erzeugt werden über {{domxref("document.createDocumentFragment()")}} oder über den constructor.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Specification" name="Specification">Eigenschaften</h2>
+
+<p><em>Das interface hat keine spezifischen Eigenschaften, erhält jedoch über Vererbung die des übergeordneten </em><em>{{domxref("Node")}} und implementiert darüber hinaus jene des {{domxref("ParentNode")}} interfaces zusätzlich.</em></p>
+
+<dl>
+ <dt>{{ domxref("ParentNode.children") }} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Stellt eine aktuelle {{domxref("HTMLCollection")}} bereit mit allen {{domxref("Element")}} Objekten, die dem <code>DocumentFragment</code> angehören.</dd>
+ <dt>{{ domxref("ParentNode.firstElementChild") }} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Stellt das {{domxref("Element")}} bereit, welches aktuell das erste Kind des <code>DocumentFragment</code> ist. <code>null</code> falls es keines gibt.</dd>
+ <dt>{{ domxref("ParentNode.lastElementChild") }} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Stellt das {{domxref("Element")}} bereit, welches aktuell das letzte Kind des <code>DocumentFragment</code> ist. <code>null</code> falls es keines gibt.</dd>
+ <dt>{{ domxref("ParentNode.childElementCount") }} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Stellt als <code>unsigned long</code> die Anzahl der Kindelemente des <code>DocumentFragment </code>bereit.</dd>
+</dl>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{ domxref("DocumentFragment.DocumentFragment()", "DocumentFragment()") }} {{experimental_inline}}</dt>
+ <dd>Erzeugt ein neues, leeres <code>DocumentFragment</code> Objekt.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<p><em>Das interface erbt die Methoden von {{domxref("Node")}}<em>, u</em>nd implementiert darüber hinaus jene des {{domxref("ParentNode")}} interfaces zusätzlich.</em></p>
+
+<dl>
+ <dt>{{domxref("DocumentFragment.find()")}} {{experimental_inline}}</dt>
+ <dd>Liefert das erste zutreffende {{domxref("Element")}} innerhalb des Baums des <code>DocumentFragment</code>.</dd>
+ <dt>{{domxref("DocumentFragment.findAll()")}} {{experimental_inline}}</dt>
+ <dd>Liefert eine {{domxref("NodeList")}} mit allen zutreffenden {{domxref("Element")}} innerhalb des Baums des <code>DocumentFragment</code>.</dd>
+ <dt>{{domxref("DocumentFragment.querySelector()")}}</dt>
+ <dd>Liefert den {{domxref("Element")}} Knoten im <code>DocumentFragment</code>, der in der Reihenfolge im document als erstes zu dem Selektor passt.</dd>
+ <dt>{{domxref("DocumentFragment.querySelectorAll()")}}</dt>
+ <dd>Liefert eine {{domxref("NodeList")}} mit allen {{domxref("Element")}} Knoden im <code>DocumentFragment</code>, die zu dem angegebenen Selektor passen.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("DocumentFragment.getElementById()")}}</dt>
+ <dd>Liefert den ersten {{domxref("Element")}} Knoten im <code style="font-size: 14px;">DocumentFragment</code>, dem in der document Reihenfolge zuerst die angegebene ID zugeordnet ist.</dd>
+</dl>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkungen</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-documentfragment', 'DocumentFragment')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Added the constructor and the implementation of {{domxref("ParentNode")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 2', '#the-apis', 'DocumentFragment')}}</td>
+   <td>{{Spec2('Selectors API Level 2')}}</td>
+   <td>Added the <code>find()</code> and <code>findAll()</code> methods.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 1', '#the-apis', 'DocumentFragment')}}</td>
+   <td>{{Spec2('Selectors API Level 1')}}</td>
+   <td>Added the <code>querySelector()</code> and <code>querySelectorAll()</code> methods.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>No change from {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>No change from {{SpecName('DOM1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-B63ED1A3', 'DocumentFragment')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>querySelector()</code> and <code>querySelectorAll()</code></td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>8.0</td>
+   <td>10.0</td>
+   <td>3.2 (525.3)</td>
+  </tr>
+  <tr>
+   <td><code>findAll()</code> and <code>find() </code>{{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>DocumentFragment()</code> constructor {{experimental_inline}}</td>
+   <td>28.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("24.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>ParentNode</code> properties {{experimental_inline}}</td>
+   <td>28.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>ParentNode</code> methods {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>querySelector()</code> and <code>querySelectorAll()</code></td>
+   <td>2.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>8.0</td>
+   <td>10.0</td>
+   <td>3.2 (525.3)</td>
+  </tr>
+  <tr>
+   <td><code>findAll()</code> and <code>find() </code>{{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>DocumentFragment()</code> constructor {{experimental_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("24.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ParentNode</code> properties {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>ParentNode</code> methods {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index.</a></li>
+</ul>
diff --git a/files/de/web/api/domerror/index.html b/files/de/web/api/domerror/index.html
new file mode 100644
index 0000000000..1251609ed3
--- /dev/null
+++ b/files/de/web/api/domerror/index.html
@@ -0,0 +1,189 @@
+---
+title: DOMError
+slug: Web/API/DOMError
+tags:
+  - API
+  - DOM
+  - Fehler
+  - Interface
+  - Referenz
+translation_of: Web/API/DOMError
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Das <strong><code>DOMError-</code></strong>Interface beschreibt ein Fehler-Objekt, welches ein Fehlername enthält.</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt>{{domxref("DOMError.name")}} {{readOnlyInline}}</dt>
+ <dd>Gibt ein {{ domxref("DOMString") }} zurück, welcher einer der folgenden Fehlertypnamen repäsentiert (siehe unten).</dd>
+</dl>
+
+<h2 id="Fehlertypen">Fehlertypen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Typ</td>
+   <td>Beschreibung</td>
+  </tr>
+  <tr>
+   <td><code>IndexSizeError</code></td>
+   <td>Der Index ist ausserhalb des gültigen Bereichs (z. B. bei einem {{ domxref("range") }}-Objekt).</td>
+  </tr>
+  <tr>
+   <td><code>HierarchyRequestError</code></td>
+   <td>Die  Knoten-Baum-Hierarchie ist nicht korrekt.</td>
+  </tr>
+  <tr>
+   <td><code>WrongDocumentError</code></td>
+   <td>Das Objekt ist im falschen {{ domxref("document") }}.</td>
+  </tr>
+  <tr>
+   <td><code>InvalidCharacterError</code></td>
+   <td>Der String beeinhaltet unglütige Charakter.</td>
+  </tr>
+  <tr>
+   <td><code>NoModificationAllowedError</code></td>
+   <td>Das Objekt kann nicht modifiziert werden.</td>
+  </tr>
+  <tr>
+   <td><code>NotFoundError</code></td>
+   <td>Das Objekt kann nicht gefunden werden.</td>
+  </tr>
+  <tr>
+   <td><code>NotSupportedError</code></td>
+   <td>Die Operation wird nicht unterstützt</td>
+  </tr>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td>Das Objekt hat einen ungültigen Status.</td>
+  </tr>
+  <tr>
+   <td><code>SyntaxError</code></td>
+   <td><span class="hps">Der String entspricht </span><span class="hps">nicht den erwarteten</span> <span class="hps">Muster.</span></td>
+  </tr>
+  <tr>
+   <td><code>InvalidModificationError</code></td>
+   <td>Das Objekt kann nicht in dieser Art modifiziert werden.</td>
+  </tr>
+  <tr>
+   <td><code>NamespaceError</code></td>
+   <td>Die Operation ist nicht erlaubt in XML-Namespaces.</td>
+  </tr>
+  <tr>
+   <td><code>InvalidAccessError</code></td>
+   <td>Das Objekt unterstützt diese Operation oder dieses Argument nicht.</td>
+  </tr>
+  <tr>
+   <td><code>TypeMismatchError</code></td>
+   <td>Der Typ des Objekts entspricht nicht dem erwarteten Typ.</td>
+  </tr>
+  <tr>
+   <td><code>SecurityError</code></td>
+   <td>Diese Operation ist unsicher.</td>
+  </tr>
+  <tr>
+   <td><code>NetworkError</code></td>
+   <td>Ein Netzwerkfehler ist aufgetreten.</td>
+  </tr>
+  <tr>
+   <td><code>AbortError</code></td>
+   <td>Die Operation wurde abgebrochen.</td>
+  </tr>
+  <tr>
+   <td><code>URLMismatchError</code></td>
+   <td>Die angegebene URL entspricht nicht einer anderen URL.</td>
+  </tr>
+  <tr>
+   <td><code>QuotaExceededError</code></td>
+   <td>Das Kontingent wurde überschritten.</td>
+  </tr>
+  <tr>
+   <td><code>TimeoutError</code></td>
+   <td>Timeout bei der Operation.</td>
+  </tr>
+  <tr>
+   <td><code>InvalidNodeTypeError</code></td>
+   <td>Der Knoten ist nicht korrekt oder hat falsche Vorfahren für die Operation.</td>
+  </tr>
+  <tr>
+   <td><code>DataCloneError</code></td>
+   <td>Das Objekt kann nicht geklont werden.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#interface-domerror', 'DOMError')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatiblität">Browser-Kompatiblität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basissupport</td>
+   <td>{{CompatUnknown}}</td>
+   <td>12.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basissupport</td>
+   <td>{{CompatUnknown}}</td>
+   <td>12.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{ domxref("DOMException") }}</li>
+</ul>
diff --git a/files/de/web/api/domparser/index.html b/files/de/web/api/domparser/index.html
new file mode 100644
index 0000000000..8082197658
--- /dev/null
+++ b/files/de/web/api/domparser/index.html
@@ -0,0 +1,181 @@
+---
+title: DOMParser
+slug: Web/API/DOMParser
+translation_of: Web/API/DOMParser
+---
+<p>{{APIRef("DOM")}}{{SeeCompatTable}}</p>
+
+<p>Der DOMParser kann XML oder HTML aus einem String in ein DOM-<a href="/en-US/docs/DOM/document" title="document">Document</a> parsen. Der DOMParser ist spezifiziert in <a href="http://html5.org/specs/dom-parsing.html" title="http://html5.org/specs/dom-parsing.html">DOM Parsing and Serialization</a>.</p>
+
+<p><a href="/en-US/docs/DOM/XMLHttpRequest" title="DOM/XMLHttpRequest">XMLHttpRequest</a> unterstützt das parsen von XML- und HTML-Dokumenten auf die über eine URL zugegriffen wird.</p>
+
+<h2 id="DOMParser_erzeugen">DOMParser erzeugen</h2>
+
+<p>Um einen neuen <code>DOMParser</code> zu erzeugen benutze einfach <code>new DOMParser()</code>.</p>
+
+<p>Für mehr Informationen über das Erstellen von einem <code>DOMParser</code> in einer Firefox-Erweiterung, konsultiere die <a href="/en-US/docs/nsIDOMParser" title="nsIDOMParser"><code>nsIDOMParser</code></a>-Dokumentation.</p>
+
+<h2 id="XML_parsen">XML parsen</h2>
+
+<p>Nachdem du einmal ein Parser-Objekt erzeugt hast, kannst du XML-Strings mit der <code>parseFromString</code>-Methode parsen.</p>
+
+<pre class="brush: js">const parser = new DOMParser();
+const doc = parser.parseFromString(stringContainingXMLSource, "application/xml");
+</pre>
+
+<h3 id="Error_handling" name="Error_handling">Fehlerbehandlung</h3>
+
+<p>Beachte dass derzeit keine Exception ausgelöst wird, wenn es beim Ausführen des Parser-Prozesses zu einem Fehler kommen sollte. Stattdessen wird ein Fehler-Dokument  (s.a. {{Bug(45566)}}) ausgelöst:</p>
+
+<pre class="brush:xml">&lt;parsererror xmlns="http://www.mozilla.org/newlayout/xml/parsererror.xml"&gt;
+(error description)
+&lt;sourcetext&gt;(a snippet of the source XML)&lt;/sourcetext&gt;
+&lt;/parsererror&gt;
+</pre>
+
+<p>Die Parsing-Fehler werden auch in der Error-Console, zusammen mit dem Dokument-URl als Fehlerquelle ausgegeben (s.u.).</p>
+
+<h2 id="Ein_SVG-_oder_HTML-Dokument_parsen">Ein SVG- oder HTML-Dokument parsen</h2>
+
+<p>Der <code>DOMParser</code> beherrscht auch SVG {{geckoRelease("10.0")}} und HTML {{geckoRelease("12.0")}}. Es gibt drei mögliche Ergebnisse, die mit der Übergabe eines MIME-Typen ausgewählt werden können. Ist der MIME-Typ <code>text/xml</code>, ist das resultierende Dokument ein <code>XMLDocument</code>, ist er <code>image/svg+xml</code>, wird ein <code>SVGDocument</code> zurückgegeben und für <code>text/html</code> erhält man ein <code>HTMLDocument</code>.</p>
+
+<pre class="brush: js">const xmlDoc = new DOMParser().parseFromString(stringContainingXMLSource, "application/xml");
+// returns a Document, but not a SVGDocument nor a HTMLDocument
+
+const svgDoc = new DOMParser().parseFromString(stringContainingXMLSource, "image/svg+xml");
+// returns a SVGDocument, which also is a Document.
+
+const htmlDoc = new DOMParser().parseFromString(stringContainingHTMLSource, "text/html");
+// returns a HTMLDocument, which also is a Document.
+</pre>
+
+<h3 id="DOMParser_HTML-Erweiterung_für_andere_Browser">DOMParser HTML-Erweiterung für andere Browser</h3>
+
+<pre class="brush: js">/* inspiriert von https://gist.github.com/1129031 */
+/*global document, DOMParser*/
+
+(function(DOMParser) {
+    "use strict";
+
+    const proto = DOMParser.prototype;
+    const nativeParse = <span style="font-size: 1rem;">proto</span><span style="font-size: 1rem;">.parseFromString</span>;
+
+    // Firefox/Opera/IE werfen bei unbekannten Typen Fehler
+    try {
+        // WebKit gibt bei bei unbekannten Typen `null` zurück
+        if (new DOMParser().parseFromString("", "text/html")) {
+            // text/html wird unterstützt
+            return;
+        }
+    } catch (ex) {}
+
+    <span style="font-size: 1rem;">proto</span><span style="font-size: 1rem;">.parseFromString = function(markup, type) {</span>
+        if (/^\s*text\/html\s*(?:;|$)/i.test(type)) {
+            const doc = document.implementation.createHTMLDocument("");
+            if (markup.toLowerCase().includes('&lt;!doctype')) {
+                doc.documentElement.innerHTML = markup;
+            } else {
+                doc.body.innerHTML = markup;
+            }
+            return doc;
+        } else {
+            return <span style="font-size: 1rem;">nativeParse</span><span style="font-size: 1rem;">.apply(this, arguments);</span>
+        }
+    };
+}(DOMParser));
+</pre>
+
+<h3 id="Den_DOMParser_im_ChromeJSMXPCOMPrivileged-Scope_aufrufen">Den DOMParser im Chrome/JSM/XPCOM/Privileged-Scope aufrufen</h3>
+
+<p>Siehe <a href="/en-US/docs/nsIDOMParser">nsIDOMParser</a></p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser-Kompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>XML support</td>
+   <td>{{CompatChrome(1)}}</td>
+   <td>{{CompatGeckoDesktop(1)}}</td>
+   <td>{{CompatIE(9)}}</td>
+   <td>{{CompatOpera(8)}}</td>
+   <td>{{CompatSafari(3.2)}}</td>
+  </tr>
+  <tr>
+   <td>SVG support</td>
+   <td>{{CompatChrome(4)}}</td>
+   <td>{{CompatGeckoDesktop(10.0)}}</td>
+   <td>{{CompatIE(10)}}</td>
+   <td>{{CompatOpera(15)}}</td>
+   <td>{{CompatSafari(3.2)}}</td>
+  </tr>
+  <tr>
+   <td>HTML support</td>
+   <td>{{CompatChrome(30)}}</td>
+   <td>{{CompatGeckoDesktop(12.0)}}</td>
+   <td>{{CompatIE(10)}}</td>
+   <td>{{CompatOpera(17)}}</td>
+   <td>{{CompatSafari(7.1)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>XML support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>SVG support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(10.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>HTML support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(12.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Parsing_and_serializing_XML" title="Parsing_and_serializing_XML">Parsing and serializing XML</a></li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest" title="DOM/XMLHttpRequest">XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/XMLSerializer" title="XMLSerializer">XMLSerializer</a></li>
+ <li><a href="/en-US/Add-ons/Code_snippets/HTML_to_DOM">Parsing HTML to DOM</a></li>
+</ul>
diff --git a/files/de/web/api/domstring/index.html b/files/de/web/api/domstring/index.html
new file mode 100644
index 0000000000..e6b148275c
--- /dev/null
+++ b/files/de/web/api/domstring/index.html
@@ -0,0 +1,57 @@
+---
+title: DOMString
+slug: Web/API/DOMString
+tags:
+  - API
+  - DOM
+  - DOM Referenz
+  - DOMString
+  - Referenz
+  - String
+translation_of: Web/API/DOMString
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><strong><code>DOMString</code></strong> ist ein UTF-16 String. Obwohl JavaScript bereits solche Strings nutzt wird <code>DOMString</code> direkt zu einem {{jsxref("String")}} gemappt.</p>
+
+<p>Wird <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></code> in einem Parameter oder einer Methode übergeben, so wandelt <code>DOMString<font face="Open Sans, Arial, sans-serif"> dies in den String </font></code><code>"null" um</code>.</p>
+
+<h2 id="Specification" name="Specification">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebIDL', '#idl-DOMString', 'DOMString')}}</td>
+   <td>{{Spec2('WebIDL')}}</td>
+   <td>Anpassung der Definition um</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#DOMString', 'DOMString')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Keine Änderung von {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-C74D1578', 'DOMString')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Keine Änderung von {{SpecName('DOM1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-C74D1578', 'DOMString')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Ursprüngliche Definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/Web/API/DOMString">String</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/String_view" title="/en-US/docs/Web/JavaScript/Typed_arrays/String_view"><code>StringView</code> – a C-like representation of strings based on typed arrays</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString/Binary">Binary strings</a></li>
+</ul>
diff --git a/files/de/web/api/domtokenlist/add/index.html b/files/de/web/api/domtokenlist/add/index.html
new file mode 100644
index 0000000000..2e1b6728c2
--- /dev/null
+++ b/files/de/web/api/domtokenlist/add/index.html
@@ -0,0 +1,73 @@
+---
+title: DOMTokenList.add()
+slug: Web/API/DOMTokenList/add
+translation_of: Web/API/DOMTokenList/add
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Die <code><strong>add()</strong></code> Methode des {{domxref("DOMTokenList")}} Interfaces, fügt ein <em>token</em> der Liste an.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">tokenList.add(token1[, token2[, ...]]);</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt>token</dt>
+ <dd>Ein {{domxref("DOMString")}} ,welches das <em>token</em> repräsentiert, welches an die Liste angefügt werden soll.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p><code>undefined</code></p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Im folgenden Beispiel erhalten wir die Liste der Klassen eines {{htmlelement("span")}} Elementes als <code>DOMTokenList</code>  , mit Hilfe von {{domxref("Element.classList")}}. Wir fügen der Liste dann ein neues <em>token</em> an und schreiben die Liste als inhalt in das <code>&lt;span&gt;.</code></p>
+
+<p>Das HTML:</p>
+
+<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+
+<p>Nun das JavaScript:</p>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+classes.add("d");
+span.textContent = classes;
+</pre>
+
+<p>Die Ausgabe:</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+
+<p>Man kann auch mehrere <em>tokens</em> auf einmal hinzufügen:</p>
+
+<pre class="brush: js">span.classList.add("d", "e", "f");
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-add','add()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<div>
+<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite ist aus strukturierten Daten generiert worden. Wenn du helfen willst, den Datenbestand zu erweitern, besuche <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und sende uns einen pull - Request.</div>
+
+<p>{{Compat("api.DOMTokenList.add")}}</p>
+</div>
diff --git a/files/de/web/api/domtokenlist/index.html b/files/de/web/api/domtokenlist/index.html
new file mode 100644
index 0000000000..c963c053e0
--- /dev/null
+++ b/files/de/web/api/domtokenlist/index.html
@@ -0,0 +1,125 @@
+---
+title: DOMTokenList
+slug: Web/API/DOMTokenList
+translation_of: Web/API/DOMTokenList
+---
+<p>{{APIRef("DOM")}}{{gecko_minversion_header("1.9.2")}}</p>
+
+<p>Die <code><strong>DOMTokenList </strong></code>Schnittstelle repräsentiert eine Sammlung von durch Leerzeichen getrennte Zeichen/ Merkmale (Tokens). Solch eine Ansammlung wird wiedergegben von {{domxref("Element.classList")}}, {{domxref("HTMLLinkElement.relList")}}, {{domxref("HTMLAnchorElement.relList")}} oder {{domxref("HTMLAreaElement.relList")}}. Deren Index beginnt bei 0 wie bei JavaScript {{jsxref("Array")}} Objekten. <code>DOMTokenList</code> achten immer auf die Groß- und Kleinschreibung.</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<p>Die Schnittstelle erbt keine Eigenschaften.</p>
+
+<dl>
+ <dt>{{domxref("DOMTokenList.length")}} {{ReadOnlyInline}}</dt>
+ <dd>Ist eine Ganzzahl, die die Anzahl der im Objekt gespeicherten Objekte darstellt.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<p>Diese Schnittstelle erbt keine Methode.</p>
+
+<dl>
+ <dt>{{domxref("DOMTokenList.item()")}}</dt>
+ <dd>Returns an item in the list by its index (or undefined if the number is greater than or equal to the length of the list, prior to {{gecko("7.0")}} returned null)</dd>
+ <dt>{{domxref("DOMTokenList.contains()")}}</dt>
+ <dd>Returns <code>true</code> if the underlying string contains <em>token</em>, otherwise <code>false</code></dd>
+ <dt>{{domxref("DOMTokenList.add()")}}</dt>
+ <dd>Fügt <em>token </em>der Liste hinzu.</dd>
+ <dt>{{domxref("DOMTokenList.remove()")}}</dt>
+ <dd>Removes <em>token</em> from the underlying string</dd>
+ <dt>{{domxref("DOMTokenList.replace()")}}</dt>
+ <dd>Replaces an existing <em>token</em> with a new token.</dd>
+ <dt>{{domxref("DOMTokenList.supports()")}}</dt>
+ <dd>Returns <code>true</code> if a given <em>token</em> is in the associated attribute's supported tokens.</dd>
+ <dt>{{domxref("DOMTokenList.toggle()")}}</dt>
+ <dd>Removes <em>token</em> from string and returns false. If <em>token</em> doesn't exist it's added and the function returns true</dd>
+ <dt>{{domxref("DOMTokenList.entries()")}}</dt>
+ <dd>Returns an {{jsxref("Iteration_protocols","iterator")}} allowing to go through all key/value pairs contained in this object.</dd>
+ <dt>{{domxref("DOMTokenList.forEach()")}}</dt>
+ <dd>Executes a provided function once per <code>DOMTokenList</code> element.</dd>
+ <dt>{{domxref("DOMTokenList.keys()")}}</dt>
+ <dd>Returns an {{jsxref("Iteration_protocols", "iterator")}} allowing to go through all keys of the key/value pairs contained in this object.</dd>
+ <dt>{{domxref("DOMTokenList.values()")}}</dt>
+ <dd>Returns an {{jsxref("Iteration_protocols", "iterator")}} allowing to go through all values of the key/value pairs contained in this object.</dd>
+</dl>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#interface-domtokenlist", "DOMTokenList")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{domxref("DOMSettableTokenList")}} (object that extends DOMTokenList with settable <em>.value</em> property)</li>
+</ul>
diff --git a/files/de/web/api/dragevent/index.html b/files/de/web/api/dragevent/index.html
new file mode 100644
index 0000000000..4f6ec7b562
--- /dev/null
+++ b/files/de/web/api/dragevent/index.html
@@ -0,0 +1,239 @@
+---
+title: DragEvent
+slug: Web/API/DragEvent
+translation_of: Web/API/DragEvent
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>Das <code>drag</code> Event wird ausgelöst, wenn ein Element oder ein Text "gezogen" wird (alle paar hundert Millisekunden).</p>
+
+<h2 id="Allgemeine_Informationen">Allgemeine Informationen</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spezifikation</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-drag">HTML5</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">DragEvent</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Steigt auf</dt>
+ <dd style="margin: 0 0 0 120px;">Ja</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Abbrechbar</dt>
+ <dd style="margin: 0 0 0 120px;">Ja</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Ziel</dt>
+ <dd style="margin: 0 0 0 120px;">Document, Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Standard-Aktion</dt>
+ <dd style="margin: 0 0 0 120px;">Mit der drag &amp; drop Operation fortfahren.</dd>
+</dl>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+   <td>The element that was underneath the element being dragged.</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event normally bubbles or not</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event is cancellable or not?</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+  <tr>
+   <td><code>dataTransfer</code></td>
+   <td>DataTransfer</td>
+   <td>The data that underlies a drag-and-drop operation, known as the <a href="/en-US/docs/Web/API/DataTransfer">drag data store</a>. Protected mode.</td>
+  </tr>
+  <tr>
+   <td><code>currentTarget</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>The node that had the event listener attached.</td>
+  </tr>
+  <tr>
+   <td><code>relatedTarget</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>screenX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>screenY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>clientX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>clientY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>button</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td>
+  </tr>
+  <tr>
+   <td><code>buttons</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td>
+  </tr>
+  <tr>
+   <td><code>mozPressure</code> {{readonlyInline}}</td>
+   <td>float</td>
+   <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td>
+  </tr>
+  <tr>
+   <td><code>ctrlKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>shiftKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>altKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>metaKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: js">&lt;div class="dropzone"&gt;
+    &lt;div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"&gt;
+        This div is draggable
+    &lt;/div&gt;
+&lt;/div&gt;
+&lt;div class="dropzone"&gt;&lt;/div&gt;
+&lt;div class="dropzone"&gt;&lt;/div&gt;
+&lt;div class="dropzone"&gt;&lt;/div&gt;
+
+&lt;style&gt;
+  #draggable {
+    width: 200px;
+    height: 20px;
+    text-align: center;
+    background: white;
+  }
+
+  .dropzone {
+    width: 200px;
+    height: 20px;
+    background: blueviolet;
+    margin-bottom: 10px;
+    padding: 10px;
+  }
+&lt;/style&gt;
+
+&lt;script&gt;
+  <span>var dragged;
+
+  /* Event wird vom ge-drag-ten Element ausgelöst */
+  document.addEventListener("drag", function( event ) {
+
+  }, false);
+
+  document.addEventListener("dragstart", function( event ) {
+      // Speichern einer ref auf das drag-bare Element
+      dragged = event.target;
+      // Element halb-transparent machen
+      event.target.style.opacity = .5;
+  }, false);
+
+  document.addEventListener("dragend", function( event ) {
+      // Transparenz zurücksetzen
+      event.target.style.opacity = "";
+  }, false);
+
+  /* events fired on the drop targets */
+  document.addEventListener("dragover", function( event ) {
+      // Standard-Aktion verhindern um das drop-Event zu erlauben
+      event.preventDefault();
+  }, false);
+
+  document.addEventListener("dragenter", function( event ) {
+      // Hintergrund des möglichen Drop-Zeils anfärben, wenn das drag-bare Element auf das Ziel gezogen wird
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "purple";
+      }
+
+  }, false);
+
+  document.addEventListener("dragleave", function( event ) {
+      // Hintergrund des möglichen Drop-Ziels, wenn das drag-bare Element vom Ziel wieder weggezogen wird / verlässt
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+      }
+  }, false);
+
+  document.addEventListener("drop", function( event ) {
+      // Standard-Aktion verhindern (Bei einigen Elementen wäre das das Öffnen als Link)
+      event.preventDefault();
+      // move dragged elem to the selected drop target
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+          dragged.parentNode.removeChild( dragged );
+          event.target.appendChild( dragged );
+      }
+
+  }, false);</span>
+&lt;/script&gt;
+</pre>
+
+<h2 id="Verwandte_Events">Verwandte Events</h2>
+
+<p> </p>
+
+<ul>
+ <li>{{event("drag")}}</li>
+ <li>{{event("dragstart")}}</li>
+ <li>{{event("dragend")}}</li>
+ <li>{{event("dragover")}}</li>
+ <li>{{event("dragenter")}}</li>
+ <li>{{event("dragleave")}}</li>
+ <li>{{event("dragexit")}}</li>
+ <li>{{event("drop")}}</li>
+</ul>
+
+<p> </p>
diff --git a/files/de/web/api/element/classlist/index.html b/files/de/web/api/element/classlist/index.html
new file mode 100644
index 0000000000..4e1f9b25df
--- /dev/null
+++ b/files/de/web/api/element/classlist/index.html
@@ -0,0 +1,300 @@
+---
+title: Element.classList
+slug: Web/API/Element/classList
+translation_of: Web/API/Element/classList
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Das <code><strong>Element.classList</strong></code> ist eine <code>read-only</code> Eigenschaft, welche die aktuelle {{domxref("DOMTokenList")}} Sammlung der Klassen-Attribute des Elements zurückgibt.</p>
+
+<p>Die Benutzung von <code>classList</code> ist eine angenehme Alternative zum Ansprechen der Klassen eines Elements als die leerzeichengetrennte Zeichenfolge via {{domxref("element.className")}}. </p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">const <var>elementClasses</var> = elementNodeReference.classList;
+</pre>
+
+<p><em>elementClasses</em> ist eine <a href="/en-US/docs/DOM/DOMTokenList">DOMTokenList</a>, welche die Klassen-Attribute der <em>elementNodeReference </em>repräsentiert. Wenn das Klassen-Attribut nicht gesetzt wurde oder <em>elementClasses.length </em>leer ist, wird 0 zurückgegeben. <code>Element.classList</code> selbst ist nur lesbar (read-only), obgleich es modifiziert werden kann, indem die Methoden <code>add()</code> und <code>remove()</code> angewendet werden.</p>
+
+<h2 id="Methoden">Methoden</h2>
+
+<dl>
+ <dt>add( String [, String [, ...]] )</dt>
+ <dd>Fügt angegebene Klassenwerte hinzu. Wenn diese Klassen bereits im Attribut des Elements vorhanden sind, werden sie ignoriert.</dd>
+ <dt>remove( String [, String [, ...]] )</dt>
+ <dd>Ausgewählte Klassenwerte entfernen.<br>
+ <strong>Bemerkung:</strong> Entfernen eines nicht vorhandenen Klassenwertes wirft keinen Fehler.</dd>
+ <dt><strong>item</strong> ( Number )</dt>
+ <dd>Rückgabewert nach Index in der Sammlung.</dd>
+ <dt><strong>toggle</strong> ( String [, force] )</dt>
+ <dd>Wenn nur ein Argument vorhanden ist: Klassenwert umschalten; d.h. wenn die Klasse existiert, dann <u>entfernt</u> es diese und gibt <code>false</code> zurück, wenn nicht, dann <u>fügt</u> es diese hinzu und gibt <code>true</code> zurück.</dd>
+ <dd>Wenn ein zweites Argument vorhanden ist: Wenn das zweite Argument auf <code>true</code> basiert, fügt es den angegebenen Klassenwert hinzu. Wenn es <code>false</code> auswertet, entfernt es ihn.</dd>
+ <dt>contains( String )</dt>
+ <dd>Überprüft, ob der angegebene Klassenwert im Klassenattribut des Elements vorhanden ist.</dd>
+ <dt>replace( oldClass, newClass )</dt>
+ <dd>Ersetzt einen vorhandenen Klassenwert.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js notranslate">const div = document.createElement('div');
+div.className = 'foo';
+
+// Status zum Beginn: &lt;div class="foo"&gt;&lt;/div&gt;
+console.log(div.outerHTML);
+
+// classList-API zum Entfernen und Ergänzen von Klassen nutzen
+div.classList.remove("foo");
+div.classList.add("anotherclass");
+
+// &lt;div class="anotherclass"&gt;&lt;/div&gt;
+console.log(div.outerHTML);
+
+// Wenn visible gesetzt ist entferne es, sonst füge es hinzu
+div.classList.toggle("visible");
+
+// Hinzufügen/Enfernen von visible, abhängig von der Bedingung, ob i kleiner 10 ist
+div.classList.toggle("visible", i &lt; 10 );
+
+console.log(div.classList.contains("foo"));
+
+// Mehrere Klassen hinzufügen / entfernen
+div.classList.add("foo", "bar", "baz");
+div.classList.remove("foo", "bar", "baz");
+
+// Mehrere Klassen mittels Spread-Syntax hinzufügen / entfernen
+const cls = ["foo", "bar"];
+div.classList.add(...cls);
+div.classList.remove(...cls);
+
+// Klasse "foo" durch "bar" ersetzen
+div.classList.replace("foo", "bar");</pre>
+
+<div class="note">
+<p>Firefox-Versionen vor 26 setzen nicht die Nutzung die Nutzung von mehreren Argumenten in den Methoden add/remove/toggle um. Siehe <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=814014">https://bugzilla.mozilla.org/show_bug.cgi?id=814014</a></p>
+</div>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush:js notranslate">// Source: https://gist.github.com/k-gun/c2ea7c49edf7b757fe9561ba37cb19ca
+/**
+ * Element.prototype.classList for IE8/9, Safari.
+ * @author    Kerem Güneş &lt;k-gun@mail.com&gt;
+ * @copyright Released under the MIT License &lt;https://opensource.org/licenses/MIT&gt;
+ * @version   1.2
+ * @see       https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
+ */
+;(function() {
+    // Helpers.
+    var trim = function(s) {
+            return s.replace(/^\s+|\s+$/g, '');
+        },
+        regExp = function(name) {
+            return new RegExp('(^|\\s+)'+ name +'(\\s+|$)');
+        },
+        forEach = function(list, fn, scope) {
+            for (var i = 0; i &lt; list.length; i++) {
+                fn.call(scope, list[i]);
+            }
+        };
+
+    // Class list object with basic methods.
+    function ClassList(element) {
+        this.element = element;
+    }
+
+    ClassList.prototype = {
+        add: function() {
+            forEach(arguments, function(name) {
+                if (!this.contains(name)) {
+                    this.element.className = trim(this.element.className +' '+ name);
+                }
+            }, this);
+        },
+        remove: function() {
+            forEach(arguments, function(name) {
+                this.element.className = trim(this.element.className.replace(regExp(name), ' '));
+            }, this);
+        },
+        toggle: function(name) {
+            return this.contains(name) ? (this.remove(name), false) : (this.add(name), true);
+        },
+        contains: function(name) {
+            return regExp(name).test(this.element.className);
+        },
+        item: function(i) {
+            return this.element.className.split(/\s+/)[i] || null;
+        },
+        // bonus
+        replace: function(oldName, newName) {
+            this.remove(oldName), this.add(newName);
+        }
+    };
+
+    // IE8/9, Safari
+    // Remove this if statements to override native classList.
+    if (!('classList' in Element.prototype)) {
+    // Use this if statement to override native classList that does not have for example replace() method.
+    // See browser compatibility: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Browser_compatibility.
+    // if (!('classList' in Element.prototype) ||
+    //     !('classList' in Element.prototype &amp;&amp; Element.prototype.classList.replace)) {
+        Object.defineProperty(Element.prototype, 'classList', {
+            get: function() {
+                return new ClassList(this);
+            }
+        });
+    }
+
+    // For others replace() support.
+    if (window.DOMTokenList &amp;&amp; !DOMTokenList.prototype.replace) {
+        DOMTokenList.prototype.replace = ClassList.prototype.replace;
+    }
+})();
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "dom.html#dom-classlist", "Element.classList")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Note within the HTML specification related to the {{htmlattrxref("class")}} attribute.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>8</td>
+   <td>12</td>
+   <td>{{CompatGeckoDesktop(1.9.2)}}</td>
+   <td>10<sup>[1]</sup></td>
+   <td>11.50</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>toggle()</code> method's second argument</td>
+   <td>24</td>
+   <td>12</td>
+   <td>{{CompatGeckoDesktop(24)}}</td>
+   <td>{{CompatNo}}<sup>[2]</sup></td>
+   <td>15</td>
+   <td>7</td>
+  </tr>
+  <tr>
+   <td>Multiple arguments for <code>add()</code> &amp; <code>remove()</code></td>
+   <td>28</td>
+   <td>12</td>
+   <td>{{CompatGeckoDesktop(26)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15</td>
+   <td>7</td>
+  </tr>
+  <tr>
+   <td><code>replace()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("49")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>3.0</td>
+   <td>12</td>
+   <td>{{CompatGeckoMobile(1.9.2)}}</td>
+   <td>10<sup>[1]</sup></td>
+   <td>11.10</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td>toggle method's second argument</td>
+   <td>4.4</td>
+   <td>12</td>
+   <td>{{CompatGeckoMobile(24)}}</td>
+   <td>{{CompatNo}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>7.0</td>
+  </tr>
+  <tr>
+   <td>multiple arguments for <code>add()</code> &amp; <code>remove()</code></td>
+   <td>4.4</td>
+   <td>12</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>7.0</td>
+  </tr>
+  <tr>
+   <td><code>replace()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("49")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Not supported for SVG elements.  See <a href="https://connect.microsoft.com/IE/feedback/details/1046039/classlist-not-working-on-svg-elements">a report at Microsoft about that</a>.<br>
+ [2] Internet Explorer never implemented this. See <a href="https://connect.microsoft.com/IE/feedback/details/878564/element-classlist-toggle-does-not-support-second-parameter">a report at Microsoft about that</a>.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{domxref("element.className")}}</li>
+ <li>{{domxref("DOMTokenList")}}</li>
+</ul>
diff --git a/files/de/web/api/element/classname/index.html b/files/de/web/api/element/classname/index.html
new file mode 100644
index 0000000000..1af7c129f0
--- /dev/null
+++ b/files/de/web/api/element/classname/index.html
@@ -0,0 +1,128 @@
+---
+title: Element.className
+slug: Web/API/Element/className
+translation_of: Web/API/Element/className
+---
+<div>{{APIRef("DOM")}}</div>
+
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+
+<p><strong>className</strong> holt und setzt den Wert des Attributs <code>class</code> eines bestimmten Elements.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>var cName</var> = <var>elementNodeReference</var>.className;
+<var>elementNodeReference</var>.className = <var>cName</var>;</pre>
+
+<ul>
+ <li><var>cName</var> ist eine Variable vom Typen string, die eine Klasse oder die, durch Leerzeichen getrennte, Klassen des aktuellen Elements darstellt.</li>
+</ul>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: js">let elm = document.getElementById('item');
+
+if(elm.className === 'active'){
+    elm.className = 'inactive';
+} else {
+    elm.className = 'active';
+}</pre>
+
+<h2 id="Notes" name="Notes">Anmerkungen</h2>
+
+<p>Der Name <code>className</code> wird für diese Eigenschaft anstelle von <code>class</code> benutzt, um Komplikationen mit dem Schlüsselwort "class", welches in vielen Sprachen verwendet wird um das DOM zu verändern, zu vermeiden.</p>
+
+<p><code>className</code> kann auch eine Instanz von {{domxref("SVGAnimatedString")}} wenn das <code>element</code> ein {{domxref("SVGElement")}} ist. Es ist besser das Attribut <code>className</code> eines Elements zu ändern, in dem {{domxref("Element.getAttribute")}} verwendet beziehungsweise {{domxref("Element.setAttribute")}}, wenn man mit SVG Elementen arbeitet.</p>
+
+<pre class="brush: js">elm.setAttribute('class', elm.getAttribute('class'))</pre>
+
+<p> </p>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-element-classname", "element.className")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-element-classname", "element.className")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 HTML", "html.html#ID-95362176", "element.className")}}</td>
+   <td>{{Spec2("DOM2 HTML")}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompabilität">Browserkompabilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funktionalität</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundsätzliche Unterstützung</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funktionalität</th>
+   <th>Android webview</th>
+   <th>Chrome für Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundsätzliche Unterstützung</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("element.classList")}}</li>
+</ul>
diff --git a/files/de/web/api/element/getboundingclientrect/index.html b/files/de/web/api/element/getboundingclientrect/index.html
new file mode 100644
index 0000000000..736314305d
--- /dev/null
+++ b/files/de/web/api/element/getboundingclientrect/index.html
@@ -0,0 +1,62 @@
+---
+title: Element.getBoundingClientRect()
+slug: Web/API/Element/getBoundingClientRect
+translation_of: Web/API/Element/getBoundingClientRect
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Die Methode <strong><code>Element.getBoundingClientRect()</code></strong>  gibt die Größe eines Elementes und dessen relative Position zum Viewport zurück.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var domRect = <a href="/de/docs/Web/API/Element">element</a>.getBoundingClientRect();
+</pre>
+
+<h3 id="Returns" name="Returns">Rückgabe</h3>
+
+<p>Der zurückgegebene Wert ist ein <a href="/en-US/docs/XPCOM_Interface_Reference/nsIDOMClientRect" title="nsIDOMClientRect">DOMRect</a> Objekt, welches die Vereinigungsmenge aller von <code><a href="/en-US/docs/DOM/element.getClientRects" title="DOM/element.getClientRects">getClientRects()</a></code> zurückgegebenen Rechtecken eines Elementes darstellt, das heißt, der CSS border-boxes, die mit dem Element verknüpft sind.</p>
+
+<p>Der Rückgabewert ist das kleinste Rechteck welches das komplette Element beinhaltet. Es enthält die read-only-Eigenschaften <code>left</code>, <code>top</code>, <code>right</code> ,<code>bottom</code>, <code>x</code>, <code>y</code>, <code>width</code> und <code>height</code>, welche die border-box in Pixeln beschreibt. Alle Eigenschaften, abgesehen von <code>width</code> und <code>height</code>, sind realtiv zur linken oberen Ecke des Viewports.</p>
+
+<div class="note">
+<p><strong>Merke: </strong>{{Gecko("1.9.1")}} fügt die Eigenschaften Breite und Höhe zu dem <code>DOMRect</code> Objekt hinzu.</p>
+</div>
+
+<p>Leere Borderboxen werden vollständig ignoriert. Sind sämtliche Borderboxen eines Elements leer, oder entsprechen die <code>top</code> und <code>left</code> Angaben der Borderbox der ersten CSS-Box (in der Reihenfolge des Inhalts), so wird Null (zero) für <code>top</code> und <code>left</code> zurückgegeben.</p>
+
+<p>Ein Rechteck mit Breiten- und Höhenwerten von Null wird stattdessen zurückgegeben, und wo <code>top</code> und <code>left</code> den top-left Werten der Border-Box der ersten CSS-Box (in Reihenfolge des Inhaltes) entsprechen.</p>
+
+<p>Bei der Berechnung des Rechtecks werden sowohl scrollbare Elemente sowie Scrolling an sich (wie viel bereits gescrollt wurde) einbezogen. Das bedeutet, dass die <code>top</code> und <code>left</code> Eigenschaften ihre Werte verändern, sobald sich deren Scrollposition verändert (d.h. ihre Werte sind <code><em>relativ</em> </code>zum <code>Viewport</code> und nicht absolut).</p>
+
+<p>Will man die Position des  Rechtecks in Bezug auf die Linke/Obere Ecke des <code>Dokumentes </code>haben, was der <code><em>absoluten</em></code> Position des Rechteckes entspricht, muss man zu den <code>top</code> und <code>left</code> Positionen, die Werte von <code>window.scrollX</code> und<code> window.scrollY</code>, addieren.</p>
+
+<p>Um Browserkompabilität zu gewährleisten, nutzen Sie <code>window.pageXOffset</code> und <code>window.pageYOffset</code> statt<code> window.scrollY</code> und <code>window.scrollX</code>. Sollten <code style="font-style: normal;">window.pageXOffset</code>, <code style="font-style: normal;">window.pageYOffset</code>, <code style="font-style: normal;">window.</code><span style="font-family: consolas,monaco,andale mono,monospace;">scrollX and</span> <code style="font-style: normal;">window.</code><span style="font-family: consolas,monaco,andale mono,monospace;">scrollY undefined sein, nutzen Sie </span><code style="font-style: normal;">(((t = document.documentElement) || (t = document.body.parentNode)) &amp;&amp; typeof t.ScrollLeft == 'number' ? t : document.body).ScrollLeft</code> and <code style="font-style: normal;">(((t = document.documentElement) || (t = document.body.parentNode)) &amp;&amp; typeof t.ScrollTop == 'number' ? t : document.body).ScrollTop</code>.</p>
+
+<h2 id="Example" name="Example">Beispiel</h2>
+
+<pre class="brush:js">// rect is a DOMRect object with four properties: left, top, right, bottom
+var rect = obj.getBoundingClientRect();
+</pre>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{Compat("api.Element.getBoundingClientRect")}}</div>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/cssom-view/#the-getclientrects%28%29-and-getboundingclientrect%28%29-methods">CSSOM Views: The getClientRects() and getBoundingClientRect() methods </a></li>
+</ul>
+
+<h3 id="Notes" name="Notes">Notes</h3>
+
+<p><code>getBoundingClientRect()</code> wurde erstmals im DHTML Objektmodell von MS IE implementiert.</p>
+
+<p>Der Rückgabewert von <code>getBoundingClientRect() </code>ist <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze">konstant</a>, es können keine weiteren Eigenschaften hinzugefügt werden.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://msdn.microsoft.com/en-us/library/ms536433(VS.85).aspx">MSDN: <code>getBoundingClientRect</code></a></li>
+ <li><a href="/en-US/docs/DOM/element.getClientRects"><code>getClientRects()</code></a></li>
+</ul>
diff --git a/files/de/web/api/element/hasattribute/index.html b/files/de/web/api/element/hasattribute/index.html
new file mode 100644
index 0000000000..991e9b9dcc
--- /dev/null
+++ b/files/de/web/api/element/hasattribute/index.html
@@ -0,0 +1,129 @@
+---
+title: Element.hasAttribute()
+slug: Web/API/Element/hasAttribute
+tags:
+  - API
+  - Attribut
+  - DOM
+  - Element
+  - Méthode
+translation_of: Web/API/Element/hasAttribute
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code>Die Methode </code><strong><code>Element.hasAttribute()</code></strong> nimmt einen <strong>String</strong> als Argument und gibt einen <strong>Boolean</strong> zurück. Der als Argument übergebene <strong>String </strong>spezifiziert das gemeinte Attribut und der Rückabe Wert gibt an, ob dieses Attribut in dem jeweiligen Element vorkommt . </p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>var <em>result</em></var> = <em><var>element</var></em>.hasAttribute(<em><var>name</var></em>);
+</pre>
+
+<dl>
+ <dt><code>result</code></dt>
+ <dd>Rückgabewert, wahr oder falsch.</dd>
+ <dt><code>name</code></dt>
+ <dd>Ein <strong>String</strong>, der das jeweilige Attribut spezifiziert.</dd>
+</dl>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush:js">var foo = document.getElementById("foo");
+if (foo.hasAttribute("bar")) {
+    // do something
+}
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush:js">;(function(prototype) {
+    prototype.hasAttribute = prototype.hasAttribute || function(name) {
+        return !!(this.attributes[name] &amp;&amp;
+                  this.attributes[name].specified);
+    }
+})(Element.prototype);
+</pre>
+
+<h2 id="Notizen">Notizen</h2>
+
+<div>{{DOMAttributeMethods}}</div>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-hasattribute', 'Element.hasAttribute()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Von {{SpecName('DOM3 Core')}}, verlegt von {{domxref("Node")}} nach {{domxref("Element")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Keine Veränderungen zu {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>8.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/de/web/api/element/index.html b/files/de/web/api/element/index.html
new file mode 100644
index 0000000000..71975f163b
--- /dev/null
+++ b/files/de/web/api/element/index.html
@@ -0,0 +1,522 @@
+---
+title: Element
+slug: Web/API/Element
+tags:
+  - DOM
+  - Interface
+translation_of: Web/API/Element
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><span class="seoSummary">The <strong><code>Element</code></strong> interface represents an object of a {{domxref("Document")}}. This interface describes methods and properties common to all kinds of elements. Specific behaviors are described in interfaces which inherit from <code>Element</code> but add additional functionality.</span> For example, the {{domxref("HTMLElement")}} interface is the base interface for HTML elements, while the {{domxref("SVGElement")}} interface is the basis for all SVG elements.</p>
+
+<p>Languages outside the realm of the Web platform, like XUL through the <code>XULElement</code> interface, also implement it.</p>
+
+<h2 id="Properties" name="Properties">Properties</h2>
+
+<p><em>Inherits properties from its parents {{domxref("Node")}}, and its own parent, {{domxref("EventTarget")}}, and implements those of {{domxref("ParentNode")}}, {{domxref("ChildNode")}}, {{domxref("NonDocumentTypeChildNode")}}, </em>and {{domxref("Animatable")}}.</p>
+
+<dl>
+ <dt>{{ domxref("Element.attributes") }} {{readOnlyInline}}</dt>
+ <dd>Returns a {{ domxref("NamedNodeMap") }} that lists all attributes associated with the element.</dd>
+ <dt>{{ domxref("ParentNode.childElementCount") }}</dt>
+ <dd>Is a {{jsxref("Number")}} representing the number of child nodes that are elements.</dd>
+ <dt>{{ domxref("ParentNode.children") }}</dt>
+ <dd>Is a live {{ domxref("HTMLCollection") }} containing all child elements of the element, as a collection.</dd>
+ <dt>{{ domxref("Element.classList") }} {{readOnlyInline}}</dt>
+ <dd>Returns a {{ domxref("DOMTokenList") }} containing the list of class attributes.</dd>
+ <dt>{{ domxref("Element.className") }}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the class of the element.</dd>
+ <dt>{{ domxref("Element.clientHeight") }} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the inner height of the element.</dd>
+ <dt>{{ domxref("Element.clientLeft") }} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the width of the left border of the element.</dd>
+ <dt>{{ domxref("Element.clientTop") }} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the width of the top border of the element.</dd>
+ <dt>{{ domxref("Element.clientWidth") }} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the inner width of the element.</dd>
+ <dt>{{ domxref("ParentNode.firstElementChild") }}</dt>
+ <dd>Is a {{ domxref("Element") }}, the first direct child element of an element, or <code>null</code> if the element has no child elements.</dd>
+ <dt>{{ domxref("Element.id") }}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the id of the element.</dd>
+ <dt>{{ domxref("Element.innerHTML") }} {{experimental_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the markup of the element's content.</dd>
+ <dt>{{ domxref("ParentNode.lastElementChild") }}</dt>
+ <dd>Is a {{ domxref("Element") }}, the last direct child element of an element, or <code>null</code> if the element has no child elements.</dd>
+ <dt>{{ domxref("NonDocumentTypeChildNode.nextElementSibling") }}</dt>
+ <dd>Is a {{ domxref("Element") }}, the element immediately following the given one in the tree, or <code>null</code> if there's no sibling node.</dd>
+ <dt>{{ domxref("Element.outerHTML") }} {{experimental_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the markup of the element including its content. When used as a setter, replaces the element with nodes parsed from the given string.</dd>
+ <dt>{{ domxref("NonDocumentTypeChildNode.previousElementSibling") }}</dt>
+ <dd>Is a {{ domxref("Element") }}, the element immediately preceding the given one in the tree, or <code>null</code> if there is no sibling element.</dd>
+ <dt>{{ domxref("Element.scrollHeight") }} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the scroll view height of an element.</dd>
+ <dt>{{ domxref("Element.scrollLeft") }} {{experimental_inline}}</dt>
+ <dd>Is a {{jsxref("Number")}} representing the left scroll offset of the element.</dd>
+ <dt>{{ domxref("Element.scrollLeftMax") }} {{non-standard_inline}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the maximum left scroll offset possible for the element.</dd>
+ <dt>{{ domxref("Element.scrollTop") }} {{experimental_inline}}</dt>
+ <dd>Is a {{jsxref("Number")}} representing the top scroll offset the an element.</dd>
+ <dt>{{ domxref("Element.scrollTopMax") }} {{non-standard_inline}} {{readOnlyInline}}</dt>
+ <dd>Returns a{{jsxref("Number")}} representing the maximum top scroll offset possible for the element.</dd>
+ <dt>{{ domxref("Element.scrollWidth") }} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the scroll view width of the element.</dd>
+ <dt>{{domxref("Element.shadowRoot") }} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>...</dd>
+ <dt>{{ domxref("Element.tagName") }} {{readOnlyInline}}</dt>
+ <dd>Returns a {{domxref("String")}} with the name of the tag for the given element.</dd>
+ <dt>{{ domxref("Element.undoManager")}} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Returns the {{domxref("UndoManager")}} associated with the element.</dd>
+ <dt>{{ domxref("Element.undoScope")}} {{experimental_inline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} indicating if the element is an undo scope host, or not.</dd>
+</dl>
+
+<h3 id="Handlers" name="Handlers">Event handlers</h3>
+
+<dl>
+ <dt>{{ domxref("Element.ongotpointercapture") }}</dt>
+ <dd>…</dd>
+ <dt>{{ domxref("Element.onlostpointercapture") }}</dt>
+ <dd>…</dd>
+ <dt>{{ domxref("Element.onwheel") }} {{ non-standard_inline() }}</dt>
+ <dd>Returns the event handling code for the <code>wheel</code> event.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Methods</h2>
+
+<p><em>Inherits methods from its parents {{domxref("Node")}}, and its own parent, {{domxref("EventTarget")}}<em>, and implements those of {{domxref("ParentNode")}}, {{domxref("ChildNode")}}<em>, {{domxref("NonDocumentTypeChildNode")}}, </em></em>and {{domxref("Animatable")}}.</em></p>
+
+<dl>
+ <dt>{{ domxref("EventTarget.addEventListener()") }}</dt>
+ <dd>Registers an event handler to a specific event type on the element.</dd>
+ <dt>{{ domxref("Element.closest()")}} {{experimental_inline}}</dt>
+ <dd>Returns the {{domxref("Element")}}, descendant of this element (or this element itself), that is the closest ancestor of the elements selected by the selectors given in parameter.</dd>
+ <dt>{{ domxref("Element.createShadowRoot()")}} {{experimental_inline}}</dt>
+ <dd>…</dd>
+ <dt>{{ domxref("EventTarget.dispatchEvent()") }}</dt>
+ <dd>Dispatches an event to this node in the DOM and returns a {{jsxref("Boolean")}} that indicates that at least one handler has not canceled it.</dd>
+ <dt>{{domxref("Element.find()")}}{{experimental_inline}}</dt>
+ <dd>...</dd>
+ <dt>{{domxref("Element.findAll()")}}{{experimental_inline}}</dt>
+ <dd>...</dd>
+ <dt>{{domxref("Animatable.getAnimationPlayers()")}} {{experimental_inline}}</dt>
+ <dd>…</dd>
+ <dt>{{ domxref("Element.getAttribute()") }}</dt>
+ <dd>Retrieves the value of the named attribute from the current node and returns it as an {{jsxref("Object")}}.</dd>
+ <dt>{{ domxref("Element.getAttributeNS()") }}</dt>
+ <dd>Retrieves the value of the attribute with the specified name and namespace, from the current node and returns it as an {{jsxref("Object")}}.</dd>
+ <dt>{{ domxref("Element.getAttributeNode()") }} {{obsolete_inline}}</dt>
+ <dd>Retrievse the node representation of the named attribute from the current node and returns it as an {{ domxref("Attr") }}.</dd>
+ <dt>{{ domxref("Element.getAttributeNodeNS()") }} {{obsolete_inline}}</dt>
+ <dd>Retrieves the node representation of the attribute with the specified name and namespace, from the current node and returns it as an {{ domxref("Attr") }}.</dd>
+ <dt>{{ domxref("Element.getBoundingClientRect()") }}<code> </code>{{experimental_inline}}</dt>
+ <dd>...</dd>
+ <dt>{{ domxref("Element.getClientRects()") }} {{experimental_inline}} TYPE of returnvalue????</dt>
+ <dd>Returns a collection of rectangles that indicate the bounding rectangles for each line of text in a client.</dd>
+ <dt>{{domxref("Element.getDestinationInsertionPoints()")}} {{experimental_inline}}</dt>
+ <dd>…</dd>
+ <dt>{{ domxref("Element.getElementsByClassName()") }}</dt>
+ <dd>Returns a live {{ domxref("HTMLCollection") }} that contains all descendant of the current element that posses the list of classes given in parameter.</dd>
+ <dt>{{ domxref("Element.getElementsByTagName()") }}</dt>
+ <dd>Returns a live {{ domxref("HTMLCollection") }} containing all descendant elements, of a particular tag name, from the current element.</dd>
+ <dt>{{ domxref("Element.getElementsByTagNameNS()") }}</dt>
+ <dd>Returns a live {{ domxref("HTMLCollection") }} containing all descendant elements, of a particular tag name and namespace, from the current element.</dd>
+ <dt>{{ domxref("Element.hasAttribute()") }}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute or not.</dd>
+ <dt>{{ domxref("Element.hasAttributeNS()") }}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute, in the specified namespace, or not.</dd>
+ <dt>{{ domxref("Element.insertAdjacentHTML") }} {{experimental_inline}}</dt>
+ <dd>Parses the text as HTML or XML and inserts the resulting nodes into the tree in the position given.</dd>
+ <dt>{{ domxref("Element.matches()") }}<code> </code>{{experimental_inline}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} indicating whether or not the element would be selected by the specified selector string.</dd>
+ <dt>{{ domxref("Element.querySelector()") }}</dt>
+ <dd>Returns {{ domxref("Node") }}...</dd>
+ <dt>{{ domxref("Element.querySelectorAll") }}</dt>
+ <dd>Returns a {{ domxref("NodeList") }}...</dd>
+ <dt>{{ domxref("Element.releasePointerCapture")}} {{experimental_inline}}</dt>
+ <dd>…</dd>
+ <dt>{{domxref("ChildNode.remove()")}}</dt>
+ <dd>Removes the element from the children list of its parent.</dd>
+ <dt>{{ domxref("Element.removeAttribute()") }}</dt>
+ <dd>Removes the named attribute from the current node.</dd>
+ <dt>{{ domxref("Element.removeAttributeNS()") }}</dt>
+ <dd>Removes the attribute with the specified name and namespace, from the current node.</dd>
+ <dt>{{ domxref("Element.removeAttributeNode()") }} {{obsolete_inline}}</dt>
+ <dd>Removes the node representation of the named attribute from the current node.</dd>
+ <dt>{{ domxref("EventTarget.removeEventListener()") }}</dt>
+ <dd>Removes an event listener from the element.</dd>
+ <dt>{{ domxref("Element.requestFullscreen()") }} {{experimental_inline}}</dt>
+ <dd>Asynchronously asks the browser to make the element full-screen.</dd>
+ <dt>{{ domxref("Element.requestPointerLock()")}} {{experimental_inline}}</dt>
+ <dd>Allows to asynchronously ask for the pointer to be locked on the given element.</dd>
+</dl>
+
+<dl>
+ <dt>{{ domxref("Element.scrollIntoView()") }} {{experimental_inline}}</dt>
+ <dd>Scrolls the page until the element gets into the view.</dd>
+ <dt>{{ domxref("Element.setAttribute()") }}</dt>
+ <dd>Sets the value of a named attribute of the current node.</dd>
+ <dt>{{ domxref("Element.setAttributeNS()") }}</dt>
+ <dd>Sets the value of the attribute with the specified name and namespace, from the current node.</dd>
+ <dt>{{ domxref("Element.setAttributeNode()") }} {{obsolete_inline}}</dt>
+ <dd>Sets the node representation of the named attribute from the current node.</dd>
+ <dt>{{ domxref("Element.setAttributeNodeNS()") }} {{obsolete_inline}}</dt>
+ <dd>Setw the node representation of the attribute with the specified name and namespace, from the current node.</dd>
+ <dt>{{ domxref("Element.setCapture()") }} {{non-standard_inline}}</dt>
+ <dd>Sets up mouse event capture, redirecting all mouse events to this element.</dd>
+ <dt>{{domxref("Element.setPointerCapture()")}}</dt>
+ <dd>…</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Web Animations", '', '')}}</td>
+   <td>{{Spec2("Web Animations")}}</td>
+   <td>Added the <code>getAnimationPlayers()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Undo Manager', '', 'Element')}}</td>
+   <td>{{Spec2('Undo Manager')}}</td>
+   <td>Added the <code>undoScope</code> and <code>undoManager</code> properties.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('Pointer Events')}}</td>
+   <td>Added the following event handlers: <code>ongotpointercapture</code> and <code>onlostpointercapture</code>.<br>
+    Added the following methods: <code>setPointerCapture()</code> and <code>releasePointerCapture()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 2', '#interface-definitions', 'Element')}}</td>
+   <td>{{Spec2('Selectors API Level 2')}}</td>
+   <td>Added the following methods:<code> matches()</code> (implemented as <code>mozMatchesSelector()</code>), <code>find()</code>, <code>findAll()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}</td>
+   <td>{{Spec2('Selectors API Level 1')}}</td>
+   <td>Added the following methods: <code>querySelector()</code> and <code>querySelectorAll()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Lock', 'index.html#element-interface', 'Element')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>Added the <code>requestPointerLock()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fullscreen', '#api', 'Element')}}</td>
+   <td>{{Spec2('Fullscreen')}}</td>
+   <td>Added the <code>requestFullscreen()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('DOM Parsing')}}</td>
+   <td>Added the following properties: <code>innerHTML</code>, and <code>outerHTML</code>.<br>
+    Added the following method: <code>insertAdjacentHTML()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Added the following properties: <code>scrollTop</code>, <code>scrollLeft</code>, <code>scrollWidth</code>, <code>scrollHeight</code>, <code>clientTop</code>, <code>clientLeft</code>, <code>clientWidth</code>, and <code>clientHeight</code>.<br>
+    Added the following methods: <code>getClientRects()</code>, <code>getBoundingClientRect()</code>, and <code>scrollIntoView()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Added inheritance of the {{domxref("ElementTraversal")}} interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Removed the following methods: <code>closest()</code>, <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, and <code>setIdAttributeNode()</code>.<br>
+    Removed the <code>schemaTypeInfo</code> property.<br>
+    Modified the return value of <code>getElementsByTag()</code> and <code>getElementsByTagNS()</code>.<br>
+    Moved <code>hasAttributes()</code> form the <code>Node</code> interface to this one.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Added the following methods: <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, and <code>setIdAttributeNode()</code>. These methods were never implemented and have been removed in later specifications.<br>
+    Added the <code>schemaTypeInfo</code> property. This property was never implemented and has been removed in later specifications.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>The <code>normalize()</code> method has been moved to {{domxref("Node")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td><code>children</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>7.0 with a significant bug [1]<br>
+    9.0 according to the spec</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>childElementCount</code>, <code>nextElementSibling</code>, <code>previousElementSibling</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>firstElementChild</code>, <code>lastElementChild</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>classList</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td> </td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>outerHTML</code> {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("11")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>clientLeft</code>, <code>clientTop</code> {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>getBoundingClientRect()</code>, <code>getClientRects()</code> {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>querySelector()</code>, <code>querySelectorAll()</code></td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>8.0</td>
+   <td>10.0</td>
+   <td>3.2 (525.3)</td>
+  </tr>
+  <tr>
+   <td><code>insertAdjacentHTML()</code> {{experimental_inline}}</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("8")}}</td>
+   <td>4.0</td>
+   <td>7.0</td>
+   <td>4.0 (527)</td>
+  </tr>
+  <tr>
+   <td><code>setCapture() </code>{{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("2")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>oncopy</code>, <code>oncut</code>, <code>onpaste</code> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td> </td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>onwheel</code> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("17")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>ongotpointercapture</code>, <code>onlostpointercapture</code>, <code>setPointerCapture()</code>, and <code>releasePointerCapture()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.0 {{property_prefix("MS")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>matches()</code> {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}} with the non-standard name <code>webkitMatchesSelector</code></td>
+   <td>{{CompatGeckoDesktop("1.9.2")}} with the non-standard name <code>mozMatchesSelector</code><br>
+    {{CompatGeckoDesktop("34")}} with the standard name</td>
+   <td>9.0 with the non-standard name <code>msMatchesSelector</code></td>
+   <td>11.5 with the non-standard name <code>oMatchesSelector</code><br>
+    15.0 with the non-standard name <code>webkitMatchesSelector</code></td>
+   <td>5.0 with the non-standard name <code>webkitMatchesSelector</code></td>
+  </tr>
+  <tr>
+   <td><code>find()</code> and <code>findAll()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>requestPointerLock()</code></td>
+   <td>16.0 {{property_prefix("webkit")}}, behind an about:flags<br>
+    22.0 {{property_prefix("webkit")}} (with special cases, progressively lifted see [2])</td>
+   <td>{{CompatGeckoDesktop("14")}}{{property_prefix("moz")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>requestFullscreen()</code></td>
+   <td>14.0 {{property_prefix("webkit")}}</td>
+   <td>{{CompatGeckoDesktop("10")}} {{property_prefix("moz")}}</td>
+   <td>11.0 {{property_prefix("ms")}}</td>
+   <td>12.10<br>
+    15.0 {{property_prefix("webkit")}}</td>
+   <td>5.1 {{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>undoManager</code> and <code>undoScope</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}} (behind the <code>dom.undo_manager.enabled</code> pref)</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>attributes</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("22")}}<br>
+    Before this it was available via the {{domxref("Node")}} interface that any <code>element</code> inherits.</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>scrollTopMax()</code> and <code>scrollLeftMax()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("16")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>closest()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("35")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>hasAttributes()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}} (on the {{domxref("Node")}} interface)<br>
+    {{CompatGeckoDesktop("35")}} (on this interface</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td><code>scrollTopMax()</code> and <code>scrollLeftMax()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("16")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>closest()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("35")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>hasAttributes()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}} (on the {{domxref("Node")}} interface)<br>
+    {{CompatGeckoMobile("35")}} (on this interface</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer 7 and 8 incorrectly return the comments as part of the children of an Element. This is fixed in Internet Explorer 9 and later.</p>
+
+<p>[2] Chrome 16 allowed <code>webkitRequestPointerLock()</code> only in fullscreen; Chrome 21 for trusted web site (permission asked); Chrome 22 allowed it by default for all same-origin document; Chrome 23 allowed it in sandboxed {{HTMLElement("iframe")}} if the non-standard value <code>webkit-allow-pointer-lock</code> is set to the {{htmlattrxref("sandbox", "iframe")}} attribute.</p>
diff --git a/files/de/web/api/element/innerhtml/index.html b/files/de/web/api/element/innerhtml/index.html
new file mode 100644
index 0000000000..a5d3d3011d
--- /dev/null
+++ b/files/de/web/api/element/innerhtml/index.html
@@ -0,0 +1,204 @@
+---
+title: Element.innerHTML
+slug: Web/API/Element/innerHTML
+translation_of: Web/API/Element/innerHTML
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary">Die {{domxref("Element")}} Eigenschaft <strong><code>innerHTML</code></strong> ruft das im Element enthaltene HTML-oder XML-Markup ab oder legt dieses fest.</span></p>
+
+<div class="note"><strong>Hinweis: </strong>Wenn ein {{HTMLElement("div")}}, {{HTMLElement("span")}} oder {{HTMLElement("noembed")}}-Knoten einen untergeordneten Textknoten mit den Zeichen <code>&amp;</code>, <code>&lt;</code> oder <code>&gt;</code> enthält, gibt <code>innerHTML</code> diese Zeichen als ihre entsprechende HTML-Entitäten <code>"&amp;amp;"</code>, <code>"&amp;lt;"</code> bzw. <code>"&amp;gt;"</code> zurück. Verwenden Sie {{domxref("Node.textContent")}}, um eine reine Kopie des Inhalts dieser Textknoten zu erhalten.</div>
+
+<p>Verwenden Sie die Methode {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}}, um den HTML-Code in das Dokument einzufügen, anstatt den Inhalt eines Elements zu ersetzen.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">const <var>content</var> = <var>element</var>.innerHTML;
+
+<var>element</var>.innerHTML = <var>htmlString</var>;
+</pre>
+
+<h3 id="Wert">Wert</h3>
+
+<p>Ein {{domxref("DOMString")}}, das die HTML-Serialisierung der Nachkommen des Elements enthält. Wenn Sie den Wert von <code>innerHTML</code> festlegen, werden alle Nachkommen des Elements entfernt und durch Knoten ersetzt, die durch Analysieren des in <em>htmlString</em> angegebenen HTML-Codes erstellt werden.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd>Es wurde versucht, den Wert von <code>innerHTML</code> mit einem nicht ordnungsgemäß formatierten HTML-String festzulegen.</dd>
+ <dt><code>NoModificationAllowedError</code></dt>
+ <dd>Es wurde versucht, den HTML-Code in einen Knoten einzufügen, dessen übergeordnetes Element {{domxref("Document")}} ist.</dd>
+</dl>
+
+<h2 id="Nutzungshinweise">Nutzungshinweise</h2>
+
+<p>Die <code>innerHTML</code>-Eigenschaft kann verwendet werden, um den aktuellen HTML-Quellcode der Seite einschließlich aller Änderungen zu überprüfen, die seit dem erstmaligen Laden der Seite vorgenommen wurden.</p>
+
+<h3 id="HTML-Inhalte_eines_Elements_auslesen">HTML-Inhalte eines Elements auslesen</h3>
+
+<p>Das Lesen von <code>innerHTML</code> bewirkt, dass der Benutzer-Agent das HTML- oder XML-Fragment serialisiert, das aus den Nachkommen des Elements besteht. Der resultierende String wird zurückgegeben.</p>
+
+<pre class="brush: js">let contents = myElement.innerHTML;</pre>
+
+<p>Auf diese Weise können Sie das HTML-Markup der Inhaltsknoten des Elements anzeigen.</p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Das zurückgegebene HTML- oder XML-Fragment wird basierend auf dem aktuellen Inhalt des Elements generiert, sodass das Markup und Formatierung des zurückgegebenen Fragments wahrscheinlich nicht mit dem ursprünglichen Seiten-Markup übereinstimmt.</p>
+</div>
+
+<h3 id="Inhalte_eines_Element_ersetzen">Inhalte eines Element ersetzen</h3>
+
+<p>Durch das Festlegen des Wertes von <code>innerHTML</code> können Sie den vorhandenen Inhalt eines Elements problemlos durch neuen Inhalt ersetzen.</p>
+
+<p>Beispielsweise können Sie den gesamten Inhalt eines Dokuments löschen, indem Sie den Inhalt des Attributs {{domxref("Document.body", "body")}} löschen:</p>
+
+<pre class="brush: js">document.body.innerHTML = "";</pre>
+
+<p>In diesem Beispiel wird das aktuelle HTML-Markup des Dokuments abgerufen und die Zeichen <code>"&lt;"</code> durch die HTML-Entität <code>"&amp;lt;"</code> ersetzt, wodurch der HTML-Code im Wesentlichen in unformatierten Text umgewandelt wird. Dieses wird dann in ein Element {{HTMLElement("pre")}} eingeschlossen. Dann wird der Wert von <code>innerHTML</code> in diesen neuen String geändert. Als Ergebnis wird der Dokumentinhalt durch eine Anzeige des gesamten Quellcodes der Seite ersetzt.</p>
+
+<pre class="brush: js">document.documentElement.innerHTML = "&lt;pre&gt;" +
+         document.documentElement.innerHTML.replace(/&lt;/g,"&amp;lt;") +
+            "&lt;/pre&gt;";</pre>
+
+<h4 id="Unter_der_Haube">Unter der Haube</h4>
+
+<p>Was passiert genau, wenn Sie den Wert von <code>innerHTML</code> festlegen? Der Benutzer-Agent führt dabei die folgenden Schritte aus:</p>
+
+<ol>
+ <li>Der angegebene Wert wird als HTML oder XML analysiert (basierend auf dem Dokumenttyp), sodass ein {{domxref("DocumentFragment")}}-Objekt den neuen Satz von DOM-Knoten für die neuen Elemente darstellt.</li>
+ <li>Wenn das Element, dessen Inhalt ersetzt wird, ein {{HTMLElement("template")}}-Element ist, wird das Attribut {{domxref("HTMLTemplateElement.content", "content")}} des Elements <code>&lt;template&gt;</code> durch das neue <code>DocumentFragment</code> ersetzt, welches in Schritt 1 erstellt wurde.</li>
+ <li>Bei allen anderen Elementen wird der Inhalt des Elements durch die Knoten im neuen <code>DocumentFragment</code> ersetzt.</li>
+</ol>
+
+<h3 id="Sicherheitsüberlegungen">Sicherheitsüberlegungen</h3>
+
+<p>Es ist nicht ungewöhnlich, dass <code>innerHTML</code> zum Einfügen von Text in eine Webseite verwendet wird. Es besteht jedoch die Möglichkeit, dass dies zu einem Angriffsvektor auf einer Website wird, wodurch ein potenzielles Sicherheitsrisiko entsteht.</p>
+
+<pre class="brush: js">const name = "John";
+// angenommen 'el' ist ein HTML DOM Element
+el.innerHTML = name; // in diesem Fall harmlos
+
+// ...
+
+name = "&lt;script&gt;alert('Ich bin John in einem störenden Alert!')&lt;/script&gt;";
+el.innerHTML = name; // in diesem Fall harmlos</pre>
+
+<p>Obwohl dies wie ein {{interwiki("wikipedia", "cross-site scripting")}}-Angriff aussieht, ist das Ergebnis harmlos. HTML5 schreibt vor, dass ein mit <code>innerHTML</code> eingefügtes {{HTMLElement("script")}}-Tag <a href="https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0">nicht ausgeführt werden soll</a>.</p>
+
+<p>Es gibt jedoch Möglichkeiten, JavaScript auszuführen, ohne {{HTMLElement("script")}}-Elemente zu verwenden. Daher besteht immer ein Sicherheitsrisiko, wenn Sie <code>innerHTML</code> verwenden, um Strings festzulegen, über die Sie keine Kontrolle haben. Zum Beispiel:</p>
+
+<pre class="brush: js">const name = "&lt;img src='x' onerror='alert(1)'&gt;";
+el.innerHTML = name; // zeigt den alert</pre>
+
+<p>Aus diesem Grund wird empfohlen, <code>innerHTML</code> nicht zum Einfügen von reinem Text zu verwenden. Verwenden Sie stattdessen {{domxref("Node.textContent", "textContent")}}. Der übergebene Inhalt wird nicht als HTML-Code analysiert, sondern als reiner Text eingefügt.</p>
+
+<div class="blockIndicator warning">
+<p><strong>Warnung:</strong> Wenn Ihr Projekt einer Sicherheitsüberprüfung unterzogen wird, führt die Verwendung von <code>innerHTML</code> höchstwahrscheinlich dazu, dass Ihr Code abgelehnt wird. <a href="https://wiki.mozilla.org/Add-ons/Reviewers/Guide/Reviewing#Step_2:_Automatic_validation">Wenn Sie beispielsweise <code>innerHTML</code></a> in einer <a href="/de/docs/Mozilla/Add-ons/WebExtensions">Browsererweiterung</a> verwenden und die Erweiterung bei <a href="https://addons.mozilla.org/">addons.mozilla.org</a> einreichen, wird sie den automatisierten Überprüfungsprozess nicht bestehen.</p>
+</div>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>In diesem Beispiel wird mit <code>innerHTML</code> ein Mechanismus zum Protokollieren von Nachrichten in einem Feld auf einer Webseite erstellt.</p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">function log(msg) {
+  var logElem = document.querySelector(".log");
+
+  var time = new Date();
+  var timeStr = time.toLocaleTimeString();
+  logElem.innerHTML += timeStr + ": " + msg + "&lt;br/&gt;";
+}
+
+log("Logging mouse events inside this container...");
+</pre>
+
+<p>Die Funktion <code>log()</code> erstellt die Protokollausgabe, indem sie mithilfe von {{jsxref("Date.toLocaleTimeString", "toLocaleTimeString()")}} die aktuelle Uhrzeit aus einem {{jsxref("Date")}}-Objekt abruft und einen String aus dem Zeitstempel und dem Nachrichtentext erstellt. Dann wird die Nachricht an die Box mit der Klasse <code>"log"</code> angehängt.</p>
+
+<p>Wir fügen eine zweite Methode hinzu, die Informationen zu auf {{domxref("MouseEvent")}} basierenden Ereignissen protokolliert (z. B. {{event("mousedown")}}, {{event("click")}} und {{event("mouseenter")}}):</p>
+
+<pre class="brush: js">function logEvent(event) {
+  var msg = "Event &lt;strong&gt;" + event.type + "&lt;/strong&gt; at &lt;em&gt;" +
+            event.clientX + ", " + event.clientY + "&lt;/em&gt;";
+  log(msg);
+}</pre>
+
+<p>Dann verwenden wir dies als Ereignishandler für eine Reihe von Mausereignissen in der Box, die unser Protokoll enthält:</p>
+
+<pre class="brush: js">var boxElem = document.querySelector(".box");
+
+boxElem.addEventListener("mousedown", logEvent);
+boxElem.addEventListener("mouseup", logEvent);
+boxElem.addEventListener("click", logEvent);
+boxElem.addEventListener("mouseenter", logEvent);
+boxElem.addEventListener("mouseleave", logEvent);</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<p>Das HTML für unser Beispiel ist denkbar einfach.</p>
+
+<pre class="brush: html">&lt;div class="box"&gt;
+  &lt;div&gt;&lt;strong&gt;Log:&lt;/strong&gt;&lt;/div&gt;
+  &lt;div class="log"&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>Das {{HTMLElement("div")}} mit der Klasse <code>"box"</code> ist nur ein Container für Layoutzwecke, der den Inhalt mit einem Rahmen darstellt. Der <code>&lt;div&gt;</code>, dessen Klasse <code>"log"</code> ist, ist der Container für den Protokolltext.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<p>Das folgende CSS formatiert unseren Beispielinhalt.</p>
+
+<pre class="brush: css">.box {
+  width: 600px;
+  height: 300px;
+  border: 1px solid black;
+  padding: 2px 4px;
+  overflow-y: scroll;
+  overflow-x: auto;
+}
+
+.log {
+  margin-top: 8px;
+  font-family: monospace;
+}</pre>
+
+<h3 id="Ergebnis">Ergebnis</h3>
+
+<p>Der resultierende Inhalt sieht so aus. Sie können die Ausgabe im Protokoll anzeigen, indem Sie die Maus in das Feld hinein- und herausbewegen, darauf klicken und so weiter.</p>
+
+<p>{{EmbedLiveSample("Example", 640, 350)}}</p>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#dom-element-innerhtml', 'Element.innerHTML')}}</td>
+   <td>{{Spec2('DOM Parsing')}}</td>
+   <td>Initiale Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("api.Element.innerHTML")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{domxref("Node.textContent")}} und {{domxref("Node.innerText")}}</li>
+ <li>{{domxref("Element.insertAdjacentHTML()")}}</li>
+ <li>HTML in einen DOM-Baum parsen: {{domxref("DOMParser")}}</li>
+ <li>Serialisieren von XML oder HTML in einen DOM-Baum: {{domxref("XMLSerializer")}}</li>
+</ul>
diff --git a/files/de/web/api/element/insertadjacenthtml/index.html b/files/de/web/api/element/insertadjacenthtml/index.html
new file mode 100644
index 0000000000..14f05ca474
--- /dev/null
+++ b/files/de/web/api/element/insertadjacenthtml/index.html
@@ -0,0 +1,144 @@
+---
+title: Element.insertAdjacentHTML()
+slug: Web/API/Element/insertAdjacentHTML
+tags:
+  - .textContent()
+  - Geschwindigkeitsvorteil
+  - HTML einfügen
+  - Méthode
+  - Referenz
+translation_of: Web/API/Element/insertAdjacentHTML
+---
+<div>{{APIRef("DOM")}}</div>
+
+<h2 id="Summary" name="Summary">Zusammenfassung</h2>
+
+<p><code>insertAdjacentHTML()</code> interpretiert den angegebenen Text als HTML oder XML und fügt resultierende Knoten an angegebener Position ins DOM ein. Das Zielobjekt wird nicht erneut interpretiert, wodurch darin enthaltene, bereits existierende Elemente nicht beeinträchtigt werden.<br>
+ Eine zusätzlich erforderliche Serialisierung wird vermieden, was einen deutlichen Geschwindigkeitsvorteil gegenüber einer <code>innerHTML</code> Manipulation ergibt.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre><em>element</em>.insertAdjacentHTML(<em>position</em>, <em>text</em>);</pre>
+
+<p><code>position</code> beschreibt den Einfügepunkt relativ zu einem Element und muss einem der folgenden Schlüsselbegriffe entsprechen:</p>
+
+<dl>
+ <dt><code style="color: red;">'beforebegin'</code></dt>
+ <dd>Vor dem <code>element</code> selbst.</dd>
+ <dt><code style="color: green;">'afterbegin'</code></dt>
+ <dd>Innerhalb des <code>element</code>, direkt <em>vor dessen erstem</em> Kind-Objekt. </dd>
+ <dt><code style="color: blue;">'beforeend'</code></dt>
+ <dd>Innerhalb des <code>element</code>, direkt <em>nach dessen letztem</em> Kind-Objekt.</dd>
+ <dt><code style="color: magenta;">'afterend'</code></dt>
+ <dd>Nach dem <code>element</code> selbst.</dd>
+</dl>
+
+<p><code>text</code> ist die Zeichenfolge, die als HTML oder XML interpretiert und in den DOM-Baum eingesetzt wird.</p>
+
+<h3 id="Verdeutlichung_der_position_Bezeichner">Verdeutlichung der position Bezeichner</h3>
+
+<pre>&lt;!-- <strong><code style="color: red;">beforebegin</code></strong> --&gt;
+<code style="font-weight: bold;">&lt;p&gt;</code>
+  &lt;!-- <strong><code style="color: green;">afterbegin</code></strong> --&gt;
+  foo
+  &lt;!-- <strong><code style="color: blue;">beforeend</code></strong> --&gt;
+<code style="font-weight: bold;">&lt;/p&gt;</code>
+&lt;!-- <strong><code style="color: magenta;">afterend</code></strong> --&gt;</pre>
+
+<div class="note"><strong>Hinweis: </strong> Die <code>beforebegin</code> und <code>afterend</code> Positionierungen wirken nur, wenn der Knoten innerhalb des DOM-Baums steht und ein Eltern-Element hat. </div>
+
+<h2 id="Example" name="Example">Beispiel</h2>
+
+<pre class="brush: js">// &lt;div id="one"&gt;one&lt;/div&gt;
+var d1 = document.getElementById('one');
+d1.insertAdjacentHTML('afterend', '&lt;div id="two"&gt;two&lt;/div&gt;');
+
+// Danach sieht die neue Struktur so aus:
+// &lt;div id="one"&gt;one&lt;/div&gt;&lt;div id="two"&gt;two&lt;/div&gt;</pre>
+
+<h2 id="Specification" name="Specification">Anmerkungen</h2>
+
+<h3 id="Sicherheitsaspekte">Sicherheitsaspekte</h3>
+
+<p>Beim Einfügen von HTML in eine Seite sollten keinesfalls unbehandelte Benutzereingaben genutzt werden (siehe 'Escaping'). </p>
+
+<p>Für das Einfügen reinen Texts sollte statt <code>insertAdjacentHTML</code> besser <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent" title="The Node.textContent property represents the text content of a node and its descendants.">node.textContent</a></code> benutzt werden. Diese Methode interpretiert Parameter nicht als HTML, sondern fügt puren Text ein.</p>
+
+<h2 id="Specification" name="Specification">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Beschreibung</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}}</td>
+   <td>{{ Spec2('DOM Parsing') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser Kompatibilität</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>grundsätzlich<br>
+    unterstützt</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop("8.0") }}</td>
+   <td>4.0</td>
+   <td>7.0</td>
+   <td>4.0 (527)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>grundsätzlich<br>
+    unterstützt</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("8.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{domxref("Element.insertAdjacentElement()")}}</li>
+ <li>{{domxref("Element.insertAdjacentText()")}}</li>
+ <li><a class="external" href="https://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/">hacks.mozilla.org Gastbeitrag</a><span class="external"> von Henri Sivonen mit Testergebnissen, die Geschwindigkeitsvorteile von insertAdjacentHTML in bestimmten Fällen aufzeigen.</span></li>
+</ul>
diff --git a/files/de/web/api/element/queryselector/index.html b/files/de/web/api/element/queryselector/index.html
new file mode 100644
index 0000000000..a3cf7d9d89
--- /dev/null
+++ b/files/de/web/api/element/queryselector/index.html
@@ -0,0 +1,89 @@
+---
+title: Element.querySelector()
+slug: Web/API/Element/querySelector
+translation_of: Web/API/Element/querySelector
+---
+<div>{{APIRef}}</div>
+
+<p>Gibt das erste Unterelement des Elements, von dem es aufgerufen wird, zurück, auf das die angegebenen Selektoren zutreffen.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>element</var> = baseElement.querySelector(<em>selector</em>s);
+</pre>
+
+<ul>
+ <li><code>element</code> und <code>baseElement</code> sind {{domxref("element")}}-Objekte.</li>
+ <li><code>selectors</code> ist eine Gruppe von <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">selectors</a>.</li>
+</ul>
+
+<h2 id="Example" name="Example">Beispiel</h2>
+
+<p>In diesem Beispiel wird das erste <code>style</code> Element aus dem body Element zurückgegeben, das den type <code>text/css</code> oder keinen type hat.</p>
+
+<pre class="brush:js">var el = document.body.querySelector("style[type='text/css'], style:not([type])");
+</pre>
+
+<h2 id="Notes" name="Notes">Bemerkungen</h2>
+
+<p>Gibt <code>null</code> zurück, wenn keine Elemente gefunden werden, andernfalls das Element.</p>
+
+<p>Eine <code>SYNTAX_ERR</code> Ausnahme tritt auf, wenn die angegebenen Selektoren ungültig sind.</p>
+
+<p><span style="font-family: Courier New;"><span>querySelector()</span></span> wurde in der WebApps API eingeführt.</p>
+
+<p>Das Argument <code>querySelector</code> muss der CSS Syntax folgen. Siehe {{domxref("document.querySelector")}} für konkrete Beispiele.</p>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Browser</th>
+   <th>Support</th>
+   <th>Anmerkungen</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>8</td>
+   <td>Nur CSS 2.1 Selektoren (IE8)</td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td><strong>3.5</strong> (1.9.1)</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>10</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>Chrome</td>
+   <td>1</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>Safari (webkit)</td>
+   <td>3.2 (525.3)</td>
+   <td><a class="link-https" href="https://bugs.webkit.org/show_bug.cgi?id=16587">webk.it/16587</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Specification" name="Specification">Spezifikation</h2>
+
+<ul>
+ <li>{{spec("http://www.w3.org/TR/selectors-api/","Selectors API Level 1","rec")}}</li>
+ <li>{{spec("http://www.w3.org/TR/selectors-api2/","Selectors API Level 2","wd")}}</li>
+ <li>{{spec("http://dev.w3.org/2006/webapi/selectors-api2/","Selectors API Level 2","ed")}}</li>
+</ul>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/Element.querySelectorAll"><code>element.querySelectorAll</code></a></li>
+ <li><a href="/en-US/docs/DOM/Document.querySelector"><code>document.querySelector</code></a></li>
+ <li><a href="/en-US/docs/DOM/Document.querySelectorAll"><code>document.querySelectorAll</code></a></li>
+ <li><a href="/en-US/docs/Code_snippets/QuerySelector">Codeausschnitte für querySelector</a></li>
+</ul>
diff --git a/files/de/web/api/element/queryselectorall/index.html b/files/de/web/api/element/queryselectorall/index.html
new file mode 100644
index 0000000000..009a105b89
--- /dev/null
+++ b/files/de/web/api/element/queryselectorall/index.html
@@ -0,0 +1,206 @@
+---
+title: Element.querySelectorAll()
+slug: Web/API/Element/querySelectorAll
+tags:
+  - Méthode
+  - Referenz
+translation_of: Web/API/Element/querySelectorAll
+---
+<div>{{APIRef("DOM")}}</div>
+
+<h2 id="Summary" name="Summary">Summary</h2>
+
+<p>Gibt eine statische <a href="/en-US/docs/DOM/NodeList" title="DOM/NodeList"><code>NodeList</code></a> aller Elemente absteigend des Elements, auf welchem querySelectorAll ausgeführt wird, die mit den angegebenen CSS Selektoren übereinstimmen.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>elementList</em> = baseElement.querySelectorAll(<em>selectors</em>);
+</pre>
+
+<p>wobei:</p>
+
+<dl>
+ <dt><code>elementList</code></dt>
+ <dd>ist statische Node Liste [<code> NodeList[elements]</code> <code>] mit</code> <a href="/en-US/docs/DOM/element" title="DOM/Element">element</a> Objekten.</dd>
+ <dt><code>baseElement</code></dt>
+ <dd>ist ein <a href="/en-US/docs/DOM/element" title="DOM/element">element</a> Objekt.</dd>
+ <dt><code>selectors</code></dt>
+ <dd>ist eine Gruppe von <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">Selektoren</a> die mit dem Element im DOM übereinstimmen soll. </dd>
+</dl>
+
+<h2 id="Example" name="Example">Beispiele</h2>
+
+<p>Dieses Beispiel gibt eine Liste der <code>p</code> Elementen im HTML body zurück:</p>
+
+<pre class="brush: js">let matches = document.body.querySelectorAll('p');
+</pre>
+
+<p>Dieses Beispiel gibt eine Liste der <code>p</code> Unter-Elementen eines Containers, dessen Überobjekt ein <code>div</code> mit der Klasse 'highlighted' ist:</p>
+
+<pre class="brush:js">let el = document.querySelector('#test');    //return an element with id='test'
+let matches = el.querySelectorAll('div.highlighted &gt; p'); // return a NodeList of p wrapped in a div with attribute class "highlighted"
+</pre>
+
+<p>Dieses Beispiel gibt eine Liste der <code>iframe</code> Elementen die ein <strong>data</strong> Attribut 'src' besitzen:</p>
+
+<pre class="brush: js">let matches = el.querySelectorAll('iframe[data-src]');
+</pre>
+
+<h2 id="Notes" name="Notes">Bemerkungen</h2>
+
+<p>If the specified "selectors" are not found inside the DOM of the page, the method <code>queryselectorAll</code> returns an empty NodeList as specified below:</p>
+
+<pre class="brush: js">&gt; let x = document.body.querySelectorAll('.highlighted'); //case: if the class highlighted doesn't exist in any attribute "class" of the DOM the result is
+&gt; [] //empty NodeList</pre>
+
+<p><code>querySelectorAll()</code> was introduced in the WebApps API.</p>
+
+<p>The string argument pass to <code>querySelectorAll</code> must follow the CSS syntax. See {{domxref("document.querySelector")}} for a concrete example.</p>
+
+<p>We could access a single item inside the NodeList in the following way:</p>
+
+<pre class="brush: js">let x = document.body.querySelectorAll('.highlighted');
+x.length; //return the size of x
+x[i_item]; //where i_item has a value between 0 and x.length-1. The operator "[]" return as in an array the element at index "i_item"
+</pre>
+
+<p>We could iterate inside a NodeList with the construct <code>for(....) {...} </code>as in the following code:</p>
+
+<pre class="brush: js"> let x = document.body.querySelectorAll('.highlighted');
+ let index = 0;
+ for( index=0; index &lt; x.length; index++ ) {
+       console.log(x[index]);
+ }</pre>
+
+<p>So in the above way, it is possible to manage and modify the behaviour of the page.</p>
+
+<h2 id="Quirks">Quirks</h2>
+
+<p><code>querySelectorAll()</code> behaves differently than most common JavaScript DOM libraries, which might lead to unexpected results:</p>
+
+<pre class="brush: html">&lt;div class="outer"&gt;
+  &lt;div class="select"&gt;
+    &lt;div class="inner"&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: js">let select = document.querySelector('.select');
+let inner = select.querySelectorAll('.outer .inner');
+inner.length; // 1, not 0!
+</pre>
+
+<p>In this example, when selecting <code>.outer .inner</code> in the context of <code>.select</code>, .<code>inner</code> is still found, even though <code>.outer</code> is not a descendant of the baseElement (<code>.select</code>).<br>
+ <code>querySelectorAll() </code>only verifies that the last element in the selector is within the baseElement.</p>
+
+<p>The <code><a href="/en-US/docs/Web/CSS/:scope">:scope</a></code> pseudo-class restores the expected behavior, only matching selectors on descendants of the baseElement:</p>
+
+<pre class="brush: js">let select = document.querySelector('.select');
+let inner = select.querySelectorAll(':scope .outer .inner');
+inner.length; // 0
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM4','#dom-parentnode-queryselectorallselectors','querySelectorAll')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll')}}</td>
+   <td>{{Spec2('Selectors API Level 2')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll')}}</td>
+   <td>{{Spec2('Selectors API Level 1')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>8</td>
+   <td>10</td>
+   <td>3.2 (525.3)</td>
+  </tr>
+  <tr>
+   <td><code>:scope</code> pseudo-class</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>32</td>
+   <td>{{CompatNo}}</td>
+   <td>15<sup>[1]</sup></td>
+   <td>7.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>:scope</code> pseudo-class</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>32</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>7.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Supported in Opera 15+ by enabling the "<strong>Enable &lt;style scoped&gt;</strong>" or "<strong>Enable experimental Web Platform features</strong>" flag in <code>chrome://flags</code>.</p>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/Document.querySelectorAll" title="DOM/document.querySelectorAll"><code>document.querySelectorAll</code></a></li>
+ <li><a href="/en-US/docs/DOM/Document.querySelector" title="DOM/document.querySelector"><code>document.querySelector</code></a></li>
+ <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="Code_snippets/QuerySelector">Code snippets for <code>querySelector</code></a></li>
+</ul>
diff --git a/files/de/web/api/element/removeattribute/index.html b/files/de/web/api/element/removeattribute/index.html
new file mode 100644
index 0000000000..91be13b037
--- /dev/null
+++ b/files/de/web/api/element/removeattribute/index.html
@@ -0,0 +1,42 @@
+---
+title: Element.removeAttribute()
+slug: Web/API/Element/removeAttribute
+tags:
+  - API
+  - Attribut
+  - DOM
+  - Element
+  - Méthode
+translation_of: Web/API/Element/removeAttribute
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><code>removeAttribute</code> entfernt ein Attribut vom gegebenen Element.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="eval"><em>element</em>.removeAttribute(<em>attrName</em>);
+</pre>
+
+<ul>
+ <li><code>attrName</code> ist der Name des zu entfernenden Attributs (ein String).</li>
+</ul>
+
+<h2 id="Example" name="Example">Beispiel</h2>
+
+<pre>// &lt;div id="div1" align="left" width="200px"&gt;
+document.getElementById("div1").removeAttribute("align");
+// now: &lt;div id="div1" width="200px"&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Anmerkungen</h2>
+
+<p>Man sollte <code>removeAttribute</code> verwenden, statt den Attributswert auf <code>null zu setzen</code> (mit <a href="/en/DOM/element.setAttribute" title="en/DOM/element.setAttribute">setAttribute</a>).</p>
+
+<p>Der Versuch, ein nicht vorhandenes Attribut zu entfernen, wirft keine Exception.</p>
+
+<p>{{ DOMAttributeMethods() }}</p>
+
+<h2 id="Specification" name="Specification">Spezifikation</h2>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6D6AC0F9">DOM Level 2 Core: removeAttribute</a> (eingeführt in <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeAttribute">DOM Level 1 Core</a>)</p>
diff --git a/files/de/web/api/element/requestfullscreen/index.html b/files/de/web/api/element/requestfullscreen/index.html
new file mode 100644
index 0000000000..01e207e00a
--- /dev/null
+++ b/files/de/web/api/element/requestfullscreen/index.html
@@ -0,0 +1,118 @@
+---
+title: Element.requestFullscreen()
+slug: Web/API/Element/requestFullScreen
+translation_of: Web/API/Element/requestFullScreen
+---
+<div>{{APIRef("Fullscreen API")}}</div>
+
+<p>Die Funktion <code><strong>Element.requestFullscreen()</strong></code> sendet eine asynchrone Anfrage, um das Element in Vollbild darzustellen.</p>
+
+<p>Es ist nicht garantiert, dass das Element in Vollbild angezeigt werden wird. Wenn die Berechtigung dazu erteilt wird, erhält das Dokument ein {{event("fullscreenchange")}} Event, um es wissen zu lassen, dass nun etwas in Vollbild angezeigt wird. Wird die Berechtigung jedoch verweigert, erhält das Dokument ein {{event('fullscreenerror')}} Event.</p>
+
+<div class="note">
+<p>Nur Elemente im HTML Namespace (Standard HTML Elemente), plus die {{HTMLElement("svg")}} und {{HTMLElement("math")}} Elemente, welche sich im Top-Level Dokument oder in einem {{HTMLElement('iframe')}} mit dem {{htmlattrxref("allowfullscreen", "iframe")}} Attribut befinden, können im Vollbildmodus angezeigt werden. Das bedeutet, dass ein {{HTMLElement('frame')}} oder ein {{HTMLElement('object')}} dies nicht kann.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>Element</em>.requestFullscreen();
+</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Bevor <code>requestFullScreen()</code> aufgerufen wird, sollte man Eventhandler für die {{event("fullscreenchange")}} und {{event("fullscreenerror")}} Events erstellen, damit man erfährt, wenn das Dokument in den Vollbildmodus wechselt (oder die entsprechende Berechtigung dazu fehlt).</p>
+
+<p>tbd</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Fullscreen", "#dom-element-requestfullscreen", "Element.requestFullScreen()")}}</td>
+   <td>{{Spec2("Fullscreen")}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox</th>
+   <th>Internet Explorer</th>
+   <th>Edge</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegene Unterstütung</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("webkit")}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop("9.0")}} as <code>mozRequestFullScreen</code><sup>[2]</sup><br>
+    {{CompatGeckoDesktop("47.0")}} (behind full-screen-api.unprefix.enabled</td>
+   <td>11{{property_prefix("ms")}}<sup>[3]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegene Unterstütung</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("webkit")}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("9.0")}} as <code>mozRequestFullScreen</code><sup>[2]</sup><br>
+    {{CompatGeckoMobile("47.0")}} (behind full-screen-api.unprefix.enabled</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Auch implementiert als <code>webkitRequestFullScreen</code>.</p>
+
+<p>[2] Implementiert als <code>mozRequestFullScreen</code> (man beachte das große S für Screen). Vor Firefox 44 erlaubte Gecko Elementen innerhalb eines {{HTMLElement('frame')}} oder {{HTMLElement('object')}} fälschlicherweise in den Vollbildmodus zu wechseln. Ab Firefox 44 wurde dieses Verhalten behoben: nur Elemente im Top-Level Dokument oder in einem {{HTMLElement('iframe')}} mit dem {{htmlattrxref("allowfullscreen", "iframe")}} Attribut können in den Vollbildmodus wechseln.</p>
+
+<p>[3] Siehe <a href="https://msdn.microsoft.com/en-us/library/dn254939%28v=vs.85%29.aspx">Dokumentation auf MSDN</a>.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Fullscreen_API">Full-screen API</a></li>
+ <li>{{ domxref("Element.requestFullscreen()") }}</li>
+ <li>{{ domxref("Document.exitFullscreen()") }}</li>
+ <li>{{ domxref("Document.fullscreen") }}</li>
+ <li>{{ domxref("Document.fullscreenElement") }}</li>
+ <li>{{ cssxref(":fullscreen") }}</li>
+ <li>{{ HTMLAttrXRef("allowfullscreen", "iframe") }}</li>
+</ul>
diff --git a/files/de/web/api/element/scrollintoview/index.html b/files/de/web/api/element/scrollintoview/index.html
new file mode 100644
index 0000000000..ccbcc3e6ea
--- /dev/null
+++ b/files/de/web/api/element/scrollintoview/index.html
@@ -0,0 +1,85 @@
+---
+title: Element.scrollIntoView()
+slug: Web/API/Element/scrollIntoView
+tags:
+  - API
+  - CSSOM Views
+  - Experimentell
+  - Methode(2)
+  - Reference
+translation_of: Web/API/Element/scrollIntoView
+---
+<div>{{ APIRef("DOM")}}{{SeeCompatTable}}</div>
+
+<p>Die Methode <code><strong>Element.scrollIntoView()</strong></code> scrolled das Element in den sichtbaren Bereich des Browsers.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">element.scrollIntoView(); // Gleich mit<code> element.scrollIntoView(true)
+</code>element.scrollIntoView(<em>alignToTop</em>); // Boolean Argument
+element.scrollIntoView(<em>scrollIntoViewOptions</em>); // Object Argument
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><em><code>alignToTop</code></em></dt>
+ <dd>Dies ist ein {{jsxref("Boolean")}} Wert:
+ <ul>
+  <li>Bei <code>true</code> wird der obere Rand des Elements an den oberen Rand des sichtbaren Bereichs im Browser gescrolled.</li>
+  <li>Bei <code>false</code> wird der untere Rand des Elements an den unteren Rand des sichtbaren Bereichs im Browser gescrolled.</li>
+ </ul>
+ </dd>
+ <dt><em><code>scrollIntoViewOptions</code></em></dt>
+ <dd>Ein Boolean oder Objekt mit den folgenden Optionen:</dd>
+ <dd>
+ <pre class="idl notranslate">{
+    behavior: <strong>"auto"</strong>  | "smooth",
+    block:    <strong>"start"</strong> | "end",
+}</pre>
+ </dd>
+ <dd>Wenn der Wert ein Boolean, enspricht <code>true</code> <code>{block: "start"} und false {block: "end"}.</code></dd>
+</dl>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: js notranslate">var element = document.getElementById("box");
+
+element.scrollIntoView();
+element.scrollIntoView(false);
+element.scrollIntoView({block: "end"});
+element.scrollIntoView({block: "end", behavior: "smooth"});
+</pre>
+
+<h2 id="Notizen">Notizen</h2>
+
+<p>Das Element wird eventuell nicht ganz nach oben oder unten gescrolled. Je nach Layout der anderen Elemente.</p>
+
+<h2 id="Technische_Daten"><span class="short_text" id="result_box" lang="de"><span>Technische Daten</span></span></h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#dom-element-scrollintoview", "Element.scrollIntoView()")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("api.Element.scrollIntoView")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{non-standard_inline}} <a href="/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded"><code>Element.scrollIntoViewIfNeeded()</code></a></li>
+</ul>
diff --git a/files/de/web/api/element/scrollleft/index.html b/files/de/web/api/element/scrollleft/index.html
new file mode 100644
index 0000000000..90c28a203e
--- /dev/null
+++ b/files/de/web/api/element/scrollleft/index.html
@@ -0,0 +1,83 @@
+---
+title: Element.scrollLeft
+slug: Web/API/Element/scrollLeft
+translation_of: Web/API/Element/scrollLeft
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Die <strong><code>Element.scrollLeft</code></strong> Eigenschaft setzt die Anzahl an Pixel, die der Inhalt eines Elements nach links gescrollt wird, oder liefert diese zurück.</p>
+
+<p>Beachten Sie:  Wenn die Eigenschaft {{cssxref("direction")}} des Elements den Wert <code>rtl</code> (right-to-left) aufweist,  ist <code>scrollLeft</code> <code>0</code>, falls der Scrollbalken ganz rechts ist (am Anfang des gescrollten Inhalts),  und nimmt zunehmend negative Werte an, wenn man gegen Ende des Inhalts scrollt.</p>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">Syntax</h2>
+
+<pre class="eval">// Liefert die Anzahl der gescrollten Pixel
+var <var>sLeft</var> = <var>element</var>.scrollLeft;
+</pre>
+
+<p><var>sLeft</var> ist ein Integer-Wert, der die Anzahl der Pixel repräsentiert, die <var>element</var> nach links gescrollt ist.</p>
+
+<pre class="eval">// Set the number of pixels scrolled
+<var>element</var>.scrollLeft = 10;
+</pre>
+
+<p><code>scrollLeft</code> kann als Integerwert gesetzt werden. Dabei gilt:</p>
+
+<ul>
+ <li>Wenn das erste Element nicht gescrollt werden kann (wenn es z.B. keinen overflow hat), erhält <code>scrollLeft</code> den Wert 0.</li>
+ <li>Wenn ein Wert kleiner als 0 gesetzt wird (größer als 0 für right-to-left Elemente), erhält <code>scrollLeft</code> den Wert 0.</li>
+ <li>Wenn der Maximalwert, den der Inhalt des gescrollten Elements annehmen kann, überschritten wrid, erhält <code>scrollLeft</code> (nur) den Maximalwert.</li>
+</ul>
+
+<h2 id="Example" name="Example">Beispiel</h2>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;style&gt;
+        #container {
+            border: 1px solid #ccc; height: 100px; overflow: scroll; width: 100px;
+        }
+        #content {
+            background-color: #ccc; width: 250px;
+        }
+    &lt;/style&gt;
+    &lt;script&gt;
+        document.addEventListener('DOMContentLoaded', function () {
+            var button = document.getElementById('slide');
+            button.onclick = function () {
+                document.getElementById('container').scrollLeft += 20;
+            };
+        }, false);
+    &lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;div id="container"&gt;
+        &lt;div id="content"&gt;Lorem ipsum dolor sit amet.&lt;/div&gt;
+    &lt;/div&gt;
+    &lt;button id="slide" type="button"&gt;Slide&lt;/button&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-element-scrollleft', 'scrollLeft')}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{Compat("api.Element.scrollLeft")}}</p>
diff --git a/files/de/web/api/element/scrollwidth/index.html b/files/de/web/api/element/scrollwidth/index.html
new file mode 100644
index 0000000000..2968c3ea64
--- /dev/null
+++ b/files/de/web/api/element/scrollwidth/index.html
@@ -0,0 +1,49 @@
+---
+title: Element.scrollWidth
+slug: Web/API/Element/scrollWidth
+tags:
+  - Eigenschaft
+  - Referenz
+translation_of: Web/API/Element/scrollWidth
+---
+<div>{{ APIRef("DOM") }}</div>
+
+<p>Die schreibgeschützte Eigenschaft <code><strong>Element.scrollWidth</strong></code> liefert entweder die Breite (in Pixeln) des Inhaltes eines Elements oder die Breite des Elementes selbst, je nachdem, welche von beiden größer ist. Ist der Inhalt eines Elementes breiter als sein Inhaltsbereich (z.B. wenn Bildlaufleisten mit eingeblendet werden), dann ist die <code>scrollWidth</code> des Elementes größer als seine <code>clientWidth</code>.</p>
+
+<div class="note">
+<p>Diese Eigenschaft rundet den Wert zu einem Integer (Ganzzahl). Sollte ein Wert mit Nachkommastellen benötigt werden, verwenden Sie {{ domxref("element.getBoundingClientRect()") }}.</p>
+</div>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">Syntax</h2>
+
+<pre class="syntaxbox">var <var>xScrollWidth</var> = <var>element</var>.scrollWidth;</pre>
+
+<p><code><var>xScrollWidth</var></code> ist die Breite des Inhaltes des Elementes <code>element</code> in Pixeln.</p>
+
+<h2 id="Example" name="Example">Beispiel</h2>
+
+<pre class="brush:html">&lt;div id="aDiv" style="width: 100px; height: 200px; overflow: auto;"&gt;
+  FooBar-FooBar-FooBar
+&lt;/div&gt;
+&lt;br&gt;
+&lt;input
+  type="button"
+  value="Show scrollWidth"
+  onclick="alert(document.getElementById('aDiv').scrollWidth);"
+&gt;</pre>
+
+<h2 id="Specification" name="Specification">Spezifikation</h2>
+
+<p>Die Eigenschaft <code>scrollWidth</code> ist im <a class="external" href="http://dev.w3.org/csswg/cssom-view/#dom-element-scrollwidth" title="http://dev.w3.org/csswg/cssom-view/#dom-element-scrollwidth">CSSOM View Module</a> definiert.</p>
+
+<h2 id="References" name="References">Referenzen</h2>
+
+<p>{{Compat("api.Element.scrollWidth")}}</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{domxref("Element.clientWidth")}}</li>
+ <li>{{domxref("HTMLElement.offsetWidth")}}</li>
+ <li><a href="/de-DE/docs/Determining_the_dimensions_of_elements">Bestimmung der Abmessungen von Elementen</a></li>
+</ul>
diff --git a/files/de/web/api/element/setattribute/index.html b/files/de/web/api/element/setattribute/index.html
new file mode 100644
index 0000000000..292dd24a6f
--- /dev/null
+++ b/files/de/web/api/element/setattribute/index.html
@@ -0,0 +1,48 @@
+---
+title: Element.setAttribute()
+slug: Web/API/Element/setAttribute
+tags:
+  - Attribut
+  - Methode(2)
+  - Méthode
+translation_of: Web/API/Element/setAttribute
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Fügt dem angegebenen Element ein Attribut hinzu oder ändert den Wert eines vorhandenen Attributs.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>element</em>.setAttribute(<em>name</em>, <em>value</em>);
+</pre>
+
+<ul>
+ <li><code>name</code> ist der Name des Attributs als String.</li>
+ <li><code>value</code> ist der gewünschte neue Wert des Attributs.</li>
+</ul>
+
+<h2 id="Example" name="Example">Beispiel</h2>
+
+<pre class="brush:js">var d = document.getElementById("d1");
+
+d.setAttribute("align", "center");
+</pre>
+
+<h2 id="Notes" name="Notes">Anmerkungen</h2>
+
+<p>Wenn <code>setAttribute</code> auf einem HTML-Element in einem HTML-Dokument aufgerufen wird, wird der Name des Attributes in Kleinbuchstaben umgewandelt.</p>
+
+<p>Wenn das angegebene Attribut bereits existiert, ersetzt <code>setAttribute</code> den alten Wert. Falls das Attribut nicht existiert, wird es erzeugt.</p>
+
+<p>Obwohl <code><a href="/en-US/docs/DOM/element.getAttribute" title="DOM/element.getAttribute">getAttribute()</a></code> für fehlende Attribute <code>null</code> liefert, sollte man <code><a href="/en-US/docs/DOM/element.removeAttribute" title="DOM/element.removeAttribute">removeAttribute()</a></code> statt <code><em>elt</em>.setAttribute(<em>attr</em>, null)</code> verwenden um ein Attribut zu entfernen.</p>
+
+<p><code>setAttribute()</code> zu benutzen, um einige XUL-Attribute (vor allem <code>value</code>) zu ändern, verhält sich inkonsistent, da das Attribut nur den Standardwert spezifiziert. Um den aktuellen Wert zu ändern sollte man die Eigenschaften direkt verwenden. Zum Beispiel <code><em>elt</em>.value</code> statt <code><em>elt</em>.setAttribute('value', <em>val</em>)</code>.</p>
+
+<div>{{DOMAttributeMethods}}</div>
+
+<h2 id="Specification" name="Specification">Spezifikation</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082">DOM Level 2 Core: setAttribute</a> (eingeführt im <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttribute">DOM Level 1 Core</a>)</li>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents" title="http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents">HTML5: APIs in HTML documents</a></li>
+</ul>
diff --git a/files/de/web/api/event/bubbles/index.html b/files/de/web/api/event/bubbles/index.html
new file mode 100644
index 0000000000..286bac6a23
--- /dev/null
+++ b/files/de/web/api/event/bubbles/index.html
@@ -0,0 +1,59 @@
+---
+title: Event.bubbles
+slug: Web/API/Event/bubbles
+translation_of: Web/API/Event/bubbles
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<h2 id="Summary" name="Summary">Zusammenfassung</h2>
+
+<p>Gibt an, ob ein Event in der DOM-Hierarchie nach oben propagiert wird oder nicht.</p>
+
+<h2 id="Syntax_2">Syntax</h2>
+
+<pre>event.bubbles</pre>
+
+<h3 id="Wert">Wert</h3>
+
+<p>Ein {{domxref("Boolean")}}, welches <code>true</code> ist, falls das Event durch die DOM-Hierarchie nach oben propagiert wird.</p>
+
+<h2 id="Syntax" name="Syntax">Beispiel</h2>
+
+<pre class="brush: js"> function goInput(e) {
+  // checks bubbles and
+  if (!e.bubbles) {
+     // passes event along if it's not
+     passItOn(e);
+  }
+  // already bubbling
+  doOutput(e)
+}
+</pre>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Nur bestimmte Events können weiter nach oben propagiert werden. Die Events, die dazu in der Lage sind, haben den Wert <em>true,  </em>für die hier beschriebene Eigenschaft.</p>
+</div>
+
+<h2 id="Specifications" name="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-event-bubbles', 'Event.bubbles')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', '#Events-Event-canBubble', 'Event.bubbles')}}</td>
+   <td>{{ Spec2('DOM2 Events') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/de/web/api/event/event/index.html b/files/de/web/api/event/event/index.html
new file mode 100644
index 0000000000..ee30a2064c
--- /dev/null
+++ b/files/de/web/api/event/event/index.html
@@ -0,0 +1,72 @@
+---
+title: Event()
+slug: Web/API/Event/Event
+translation_of: Web/API/Event/Event
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Der Konstruktor: <code><strong>Event()</strong></code>  erstellt ein neues {{domxref("Event")}}.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"> <em>event</em> = new Event(<em>typeArg</em>, <em>eventInit</em>);</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><em>typeArg</em></dt>
+ <dd>ist ein {{domxref("DOMString")}} und bestimmt den Namen des Events.</dd>
+ <dt><em>eventInit </em>{{optional_inline}}</dt>
+</dl>
+
+<dl>
+ <dd>ist ein {{jsxref("Object")}} und beinhaltet folgende Felder:
+ <ul>
+  <li><code>"bubbles"</code>: (Optional) Ein {{jsxref("Boolean")}}, welcher angibt, ob das Event gebubbled werden soll. Der Standardwert ist <code>false</code>.</li>
+  <li><code>"cancelable"</code>: (Optional) Ein {{jsxref("Boolean")}}, welcher angibt, ob das Event abgebrochen werden kann. Der Standardwert <code>false</code>.</li>
+  <li><code>"composed"</code>: (Optional) Ein {{jsxref("Boolean")}}, welcher angibt, ob das Event auch außerhalb eines Shadow-Root-Elements empfangen werden kann. Der Standardwert ist <code>false</code>.<span style="display: none;"> </span></li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">// create a look event that bubbles up and cannot be canceled
+
+var evt = new Event("look", {"bubbles":true, "cancelable":false});
+document.dispatchEvent(evt);
+
+// event can be dispached from any elmement, not only the document
+myDiv.dispatchEvent(evt);
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table" style="height: 49px; width: 1000px;">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-event','Event()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Event.Event")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Event")}}</li>
+</ul>
diff --git a/files/de/web/api/event/index.html b/files/de/web/api/event/index.html
new file mode 100644
index 0000000000..0962ba6de2
--- /dev/null
+++ b/files/de/web/api/event/index.html
@@ -0,0 +1,253 @@
+---
+title: Event
+slug: Web/API/Event
+tags:
+  - API
+  - DOM
+  - Event
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - UI
+translation_of: Web/API/Event
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Das <code><strong>Event</strong></code> Interface repräsentiert jegliches Ereignis, das im DOM auftritt.</p>
+
+<p>Ein Ereignis kann durch Benutzerinteraktion ausgelöst werden, z.B das Klicken einer Maustaste oder Eingaben der Tastatur, oder durch eine API generiert werden um den Fortschritt eines asynchronen Prozesses zu repräsentieren. Es kann auch durch ein Programm ausgelöst werden, beispielsweise indem die <a href="https://developer.mozilla.org/de/docs/Web/API/HTMLElement/click" title="The HTMLElement.click() method simulates a mouse click on an element."><code>HTMLElement.click()</code></a> Method eines Elements aufgerufen wird, oder indem ein Ereignis definiert wird und es danach mithilfe von <a href="https://developer.mozilla.org/de/docs/Web/API/EventTarget/dispatchEvent" title="Dispatches an Event at the specified EventTarget, (synchronously) invoking the affected EventListeners in the appropriate order. The normal event processing rules (including the capturing and optional bubbling phase) also apply to events dispatched manually with dispatchEvent()."><code>EventTarget.dispatchEvent()</code></a> an ein Ziel versandt wird.</p>
+
+<p>Es gibt eine Vielzahl verschiedener Typen von Ereignissen, von denen manche erweiterte Schnittstellen basieren auf dem zentralen <code><strong>Event</strong></code> Interface benutzen. <strong><code>Event</code></strong> beinhaltet alle Attribute und Methoden, die allen Ereignissen gemein sind.</p>
+
+<p>Viele DOM-Element können für das Empfangen dieser Events konfiguriert werden und rufen Code auf, um sie zu behandeln. Event-Handler werden normalerweise mit unterschiedlichen <a href="https://developer.mozilla.org/de/docs/Web/HTML/Element">HTML-Elementen</a> (so wie <code>&lt;button&gt;</code>, <code>&lt;div&gt;</code>, <code>&lt;span&gt;</code>, etc.) verbunden, durch den Aufruf von <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener" title="The EventTarget method addEventListener() sets up a function that will be called whenever the specified event is delivered to the target."><code>EventTarget.addEventListener()</code></a>. Dies ersetzt größtenteils die alten HTML <a class="new" rel="nofollow" title="Seite wurde noch nicht erstellt.">Event Handler</a> Attribute. Die neueren Event-Handler können außerdem nötigenfalls mithilfe von <a href="https://developer.mozilla.org/de/docs/Web/API/EventTarget/removeEventListener" title="The EventTarget.removeEventListener() method removes from the EventTarget an event listener previously registered with EventTarget.addEventListener(). The event listener to be removed is identified using a combination of the event type, the event listener function itself, and various optional options that may affect the matching process; see Matching event listeners for removal"><code>removeEventListener()</code></a> wieder entfernt werden.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Ein Element kann mehrere solcher Handler besitzen, sogar für das selbe Ereignis—so können sie verschiedene, unabhängige Code-Module angebracht werden, jeweils für deren unabhängige Zwecke. (Zum Beispiel eine Webseite mit einem Werbemodul und einem Statistikmodel, die beide Videowiedergabe überwachen.)</p>
+</div>
+
+<p>Gitb es viele verschachtelte Element, jedes mit eigenen Event-Handlern, kann das Verarbeiten von Ereignissen siehr schnell komplex werden—im Speziellen wenn ein Elternelement die selben Ereignissen wie sein Kindelement empfängt, weil sie sich überlappen und so Ereignisse technisch gesehen in beiden geschehen. Die Behandlungsreihenfolge solcher Ereignisse hängen von <a href="https://developer.mozilla.org/de/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture">Event bubbling and capture</a> Konfigurationen jedes ausgelösten Event-Handlers ab.</p>
+
+<h2 id="Introduction" name="Introduction">Interfaces based on <code>Event</code></h2>
+
+<p>Below is a list of interfaces which are based on the main <code>Event</code> interface, with links to their respective documentation in the MDN API reference. Note that all event interfaces have names which end in "Event".</p>
+
+<div class="index">
+<ul>
+ <li>{{domxref("AnimationEvent")}}</li>
+ <li>{{domxref("AudioProcessingEvent")}}</li>
+ <li>{{domxref("BeforeInputEvent")}}</li>
+ <li>{{domxref("BeforeUnloadEvent")}}</li>
+ <li>{{domxref("BlobEvent")}}</li>
+ <li>{{domxref("ClipboardEvent")}}</li>
+ <li>{{domxref("CloseEvent")}}</li>
+ <li>{{domxref("CompositionEvent")}}</li>
+ <li>{{domxref("CSSFontFaceLoadEvent")}}</li>
+ <li>{{domxref("CustomEvent")}}</li>
+ <li>{{domxref("DeviceLightEvent")}}</li>
+ <li>{{domxref("DeviceMotionEvent")}}</li>
+ <li>{{domxref("DeviceOrientationEvent")}}</li>
+ <li>{{domxref("DeviceProximityEvent")}}</li>
+ <li>{{domxref("DOMTransactionEvent")}}</li>
+ <li>{{domxref("DragEvent")}}</li>
+ <li>{{domxref("EditingBeforeInputEvent")}}</li>
+ <li>{{domxref("ErrorEvent")}}</li>
+ <li>{{domxref("FetchEvent")}}</li>
+ <li>{{domxref("FocusEvent")}}</li>
+ <li>{{domxref("GamepadEvent")}}</li>
+ <li>{{domxref("HashChangeEvent")}}</li>
+ <li>{{domxref("IDBVersionChangeEvent")}}</li>
+ <li>{{domxref("InputEvent")}}</li>
+ <li>{{domxref("KeyboardEvent")}}</li>
+ <li>{{domxref("MediaStreamEvent")}}</li>
+ <li>{{domxref("MessageEvent")}}</li>
+ <li>{{domxref("MouseEvent")}}</li>
+ <li>{{domxref("MutationEvent")}}</li>
+ <li>{{domxref("OfflineAudioCompletionEvent")}}</li>
+ <li>{{domxref("PageTransitionEvent")}}</li>
+ <li>{{domxref("PointerEvent")}}</li>
+ <li>{{domxref("PopStateEvent")}}</li>
+ <li>{{domxref("ProgressEvent")}}</li>
+ <li>{{domxref("RelatedEvent")}}</li>
+ <li>{{domxref("RTCDataChannelEvent")}}</li>
+ <li>{{domxref("RTCIdentityErrorEvent")}}</li>
+ <li>{{domxref("RTCIdentityEvent")}}</li>
+ <li>{{domxref("RTCPeerConnectionIceEvent")}}</li>
+ <li>{{domxref("SensorEvent")}}</li>
+ <li>{{domxref("StorageEvent")}}</li>
+ <li>{{domxref("SVGEvent")}}</li>
+ <li>{{domxref("SVGZoomEvent")}}</li>
+ <li>{{domxref("TimeEvent")}}</li>
+ <li>{{domxref("TouchEvent")}}</li>
+ <li>{{domxref("TrackEvent")}}</li>
+ <li>{{domxref("TransitionEvent")}}</li>
+ <li>{{domxref("UIEvent")}}</li>
+ <li>{{domxref("UserProximityEvent")}}</li>
+ <li>{{domxref("WebGLContextEvent")}}</li>
+ <li>{{domxref("WheelEvent")}}</li>
+</ul>
+</div>
+
+<h2 id="Constructor" name="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("Event.Event", "Event()")}}</dt>
+ <dd>Creates an <code>Event</code> object, returning it to the caller.</dd>
+</dl>
+
+<h2 id="Properties" name="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("Event.bubbles")}} {{readonlyinline}}</dt>
+ <dd>A Boolean indicating whether the event bubbles up through the DOM or not.</dd>
+ <dt>{{domxref("Event.cancelBubble")}}</dt>
+ <dd>A historical alias to {{domxref("Event.stopPropagation()")}}. Setting its value to <code>true</code> before returning from an event handler prevents propagation of the event.</dd>
+ <dt>{{domxref("Event.cancelable")}} {{readonlyinline}}</dt>
+ <dd>A Boolean indicating whether the event is cancelable.</dd>
+ <dt>{{domxref("Event.composed")}} {{ReadOnlyInline}}</dt>
+ <dd>A Boolean value indicating whether or not the event can bubble across the boundary between the shadow DOM and the regular DOM.</dd>
+ <dt>{{domxref("Event.currentTarget")}} {{readonlyinline}}</dt>
+ <dd>A reference to the currently registered target for the event. This is the object to which the event is currently slated to be sent; it's possible this has been changed along the way through <em>retargeting</em>.</dd>
+ <dt>{{domxref("Event.deepPath")}} {{non-standard_inline}}</dt>
+ <dd>An {{jsxref("Array")}} of DOM {{domxref("Node")}}s through which the event has bubbled.</dd>
+ <dt>{{domxref("Event.defaultPrevented")}} {{readonlyinline}}</dt>
+ <dd>Indicates whether or not {{domxref("event.preventDefault()")}} has been called on the event.</dd>
+ <dt>{{domxref("Event.eventPhase")}} {{readonlyinline}}</dt>
+ <dd>Indicates which phase of the event flow is being processed.</dd>
+ <dt>{{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>The explicit original target of the event (Mozilla-specific).</dd>
+ <dt>{{domxref("Event.originalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>The original target of the event, before any retargetings (Mozilla-specific).</dd>
+ <dt>{{domxref("Event.returnValue")}} {{non-standard_inline}}</dt>
+ <dd>A non-standard alternative (from old versions of Microsoft Internet Explorer) to {{domxref("Event.preventDefault()")}} and {{domxref("Event.defaultPrevented")}}.</dd>
+ <dt>{{domxref("Event.scoped")}} {{readonlyinline}} {{obsolete_inline}}</dt>
+ <dd>A {{jsxref("Boolean")}} indicating whether the given event will bubble across through the shadow root into the standard DOM. This property has been renamed to {{domxref("Event.composed", "composed")}}.</dd>
+ <dt>{{domxref("Event.srcElement")}} {{non-standard_inline}}</dt>
+ <dd>A non-standard alias (from old versions of Microsoft Internet Explorer) for {{domxref("Event.target")}}.</dd>
+ <dt>{{domxref("Event.target")}} {{readonlyinline}}</dt>
+ <dd>A reference to the target to which the event was originally dispatched.</dd>
+ <dt>{{domxref("Event.timeStamp")}} {{readonlyinline}}</dt>
+ <dd>The time at which the event was created, in milliseconds. By specification, this value is time since epoch, but in reality browsers' definitions vary; in addition, work is underway to change this to be a {{domxref("DOMHighResTimeStamp")}} instead.</dd>
+ <dt>{{domxref("Event.type")}} {{readonlyinline}}</dt>
+ <dd>The name of the event (case-insensitive).</dd>
+ <dt>{{domxref("Event.isTrusted")}} {{readonlyinline}}</dt>
+ <dd>Indicates whether or not the event was initiated by the browser (after a user click for instance) or by a script (using an event creation method, like <a href="/en-US/docs/DOM/event.initEvent">event.initEvent</a>)</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("Event.initEvent()")}} {{deprecated_inline}}</dt>
+ <dd>Initializes the value of an Event created. If the event has already being dispatched, this method does nothing.</dd>
+ <dt>{{domxref("Event.preventBubble()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}</dt>
+ <dd>Prevents the event from bubbling. Obsolete, use {{domxref("event.stopPropagation")}} instead.</dd>
+ <dt>{{domxref("Event.preventCapture()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}</dt>
+ <dd>Obsolete, use {{domxref("event.stopPropagation")}} instead.</dd>
+ <dt>{{domxref("Event.preventDefault()")}}</dt>
+ <dd>Cancels the event (if it is cancelable).</dd>
+ <dt>{{domxref("Event.stopImmediatePropagation()")}}</dt>
+ <dd>For this particular event, no other listener will be called. Neither those attached on the same element, nor those attached on elements which will be traversed later (in capture phase, for instance)</dd>
+ <dt>{{domxref("Event.stopPropagation()")}}</dt>
+ <dd>Stops the propagation of events further along in the DOM.</dd>
+ <dt>{{domxref("Event.getPreventDefault()")}} {{non-standard_inline}}</dt>
+ <dd>Non-standard. Returns the value of {{domxref("Event.defaultPrevented")}}. Use {{domxref("Event.defaultPrevented")}} instead.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-event', 'Event')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>cancelBubble</code> defined on Event</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(53)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>cancelBubble</code> defined on Event</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(53)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Previous to Firefox 52, this property was defined on the {{domxref("UIEvent")}} interface. See {{bug(1298970)}} for more details.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Types of events available: <a href="/en-US/docs/Web/Reference/Events">Event reference</a></li>
+ <li><a href="/en-US/docs/Web/API/Event/Comparison_of_Event_Targets">Comparison of Event Targets</a> (target vs currentTarget vs relatedTarget vs originalTarget)</li>
+ <li><a href="/en-US/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Creating and triggering custom events</a></li>
+ <li>For Firefox add-on developers:
+  <ul>
+   <li><a href="/en-US/docs/Listening_to_events_in_Firefox_extensions">Listening to events in Firefox extensions</a></li>
+   <li><a href="/en-US/docs/Listening_to_events_on_all_tabs">Listening to events on all tabs</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/de/web/api/eventlistener/index.html b/files/de/web/api/eventlistener/index.html
new file mode 100644
index 0000000000..c7eb012670
--- /dev/null
+++ b/files/de/web/api/eventlistener/index.html
@@ -0,0 +1,48 @@
+---
+title: EventListener
+slug: Web/API/EventListener
+tags:
+  - API
+  - DOM
+  - DOM Events
+translation_of: Web/API/EventListener
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<h2 id="Method_overview" name="Method_overview">Methodenübersicht</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>void <code><a href="#handleEvent()">handleEvent</a></code> (in Event event);</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Methods" name="Methods">Methoden</h2>
+
+<h3 id="handleEvent()" name="handleEvent()">handleEvent()</h3>
+
+<p>Diese Methode wird immer aufgerufen, wenn ein Event auftritt, welche im <code>EventListener</code> Interface registriert wurden.</p>
+
+<pre class="eval">void handleEvent(
+  in Event event
+);
+</pre>
+
+<h5 id="Parameters" name="Parameters">Parameter</h5>
+
+<dl>
+ <dt><code>event</code></dt>
+ <dd>Das DOM-{{ domxref("Event") }} das zu registrieren ist.</dd>
+</dl>
+
+<h3 id="Remarks" name="Remarks">Anmerkungen</h3>
+
+<p>Da das Interface mit dem <code><span class="nowiki">[function]</span></code> Flag gekennzeichnet ist, implementieren alle JavaScript-Funktionen dieses automatisch. Das Aufrufen von {{ manch("handleEvent") }} einer solchen Implementierung ruft automatisch diese Funktion auf.</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{ spec("http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventListener","Document Object Model Events: EventListener","REC") }}</li>
+</ul>
diff --git a/files/de/web/api/eventsource/index.html b/files/de/web/api/eventsource/index.html
new file mode 100644
index 0000000000..7942b2df95
--- /dev/null
+++ b/files/de/web/api/eventsource/index.html
@@ -0,0 +1,126 @@
+---
+title: EventSource
+slug: Web/API/EventSource
+tags:
+  - API
+  - Interface
+  - Referenz
+  - Server-sent events
+translation_of: Web/API/EventSource
+---
+<p>{{APIRef("Websockets API")}}</p>
+
+<p>Das <strong>EventSource</strong>-Interface erlaubt das Empfangen von Server-Sent Events. Es erlaubt den Zugriff auf Events im <code>text/event-stream</code> Format über eine persistente HTTP-Verbindung.</p>
+
+<dl>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Diese Interface erbt weitere Properties von seinem Parent-Object {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("EventSource.onerror")}}</dt>
+ <dd>Ist eine {{domxref("EventHandler")}}-Instanz. Diese wird aufgerufen, wenn ein Fehler auftritt und das {{event("error")}}-Event auf diesem Object ausgelöst wird.</dd>
+ <dt>{{domxref("EventSource.onmessage")}}</dt>
+ <dd>Ist eine {{domxref("EventHandler")}}-Instanz. Diese wir aufgerufen, wenn ein {{event("message")}}-event empfangen wird. Dies ist immer dann der Fall, wenn die Event-Quelle eine neue Nachricht erzeugt hat.</dd>
+ <dt>{{domxref("EventSource.onopen")}}</dt>
+ <dd>Ist eine {{domxref("EventHandler")}}-Instanz. Diese wird immer dann aufgerufen, wenn die Verbindung geöffnet wurde, also ein {{event("open")}}-Event empfangen wurde.</dd>
+ <dt>{{domxref("EventSource.readyState")}} {{readonlyinline}}</dt>
+ <dd>Ein <code>unsigned short</code>, welcher den aktuellen Status der Verbindung repräsentiert. Gültige werte sind <code>CONNECTING</code> (<code>0</code>), <code>OPEN</code> (<code>1</code>), or <code>CLOSED</code> (<code>2</code>).</dd>
+ <dt>{{domxref("EventSource.url")}} {{readonlyinline}}</dt>
+ <dd>Ein {{domxref("DOMString")}}, welcher die URL der Event-Quelle beinhaltet.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Diese Interface erbt weitere Methoden von seinem Parent-Object {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("EventSource.close()")}}</dt>
+ <dd>Schließt die Verbindung, soweit geöffnet, und setzt den Status (<code>readyState</code>) auf CLOSED. Auf bereits geschlossenen Verbindungen hat diese Methode keinen Effekt.</dd>
+</dl>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "comms.html#the-eventsource-interface", "EventSource")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<ul>
+</ul>
+
+<h2 id="Browser_Kompatiblität">Browser Kompatiblität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basis-Support</td>
+   <td>9</td>
+   <td>{{ CompatGeckoDesktop("6.0") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>11</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>CORS-Support</td>
+   <td>26</td>
+   <td>{{ CompatGeckoDesktop("11.0") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>12</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basis-Support</td>
+   <td>{{ CompatAndroid("4.4") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en/Server-sent_events/Using_server-sent_events" title="en/Server-sent events/Using server-sent events">Using server-sent events</a></li>
+</ul>
diff --git a/files/de/web/api/eventtarget/index.html b/files/de/web/api/eventtarget/index.html
new file mode 100644
index 0000000000..3ed264119e
--- /dev/null
+++ b/files/de/web/api/eventtarget/index.html
@@ -0,0 +1,174 @@
+---
+title: EventTarget
+slug: Web/API/EventTarget
+tags:
+  - API
+  - DOM
+  - DOM Events
+  - Interface
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/API/EventTarget
+---
+<p>{{ApiRef("DOM Events")}}</p>
+
+<p><code>EventTarget</code> is an interface implemented by objects that can receive events and may have listeners for them.</p>
+
+<p>{{domxref("Element")}}, {{domxref("document")}}, and {{domxref("window")}} are the most common event targets, but other objects can be event targets too, for example {{domxref("XMLHttpRequest")}}, {{domxref("AudioNode")}}, {{domxref("AudioContext")}}, and others.</p>
+
+<p>Many event targets (including elements, documents, and windows) also support setting <a href="/en-US/docs/Web/Guide/DOM/Events/Event_handlers">event handlers</a> via <code>on...</code> properties and attributes.</p>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("EventTarget.addEventListener()")}}</dt>
+ <dd>Register an event handler of a specific event type on the <code>EventTarget</code>.</dd>
+ <dt>{{domxref("EventTarget.removeEventListener()")}}</dt>
+ <dd>Removes an event listener from the <code>EventTarget</code>.</dd>
+ <dt>{{domxref("EventTarget.dispatchEvent()")}}</dt>
+ <dd>Dispatch an event to this <code>EventTarget</code>.</dd>
+</dl>
+
+<h3 id="Additional_methods_for_Mozilla_chrome_code">Additional methods for Mozilla chrome code</h3>
+
+<p>Mozilla extensions for use by JS-implemented event targets to implement on* properties. See also <a href="/en-US/docs/Mozilla/WebIDL_bindings">WebIDL bindings</a>.</p>
+
+<ul>
+ <li>void <strong>setEventHandler</strong>(DOMString type, EventHandler handler) {{non-standard_inline}}</li>
+ <li>EventHandler <strong>getEventHandler</strong>(DOMString type) {{non-standard_inline}}</li>
+</ul>
+
+<h2 id="Example">Example:</h2>
+
+<h3 id="_Simple_implementation_of_EventTarget" name="_Simple_implementation_of_EventTarget">Simple implementation of EventTarget</h3>
+
+<pre class="brush: js">var EventTarget = function() {
+  this.listeners = {};
+};
+
+EventTarget.prototype.listeners = null;
+EventTarget.prototype.addEventListener = function(type, callback) {
+  if (!(type in this.listeners)) {
+    this.listeners[type] = [];
+  }
+  this.listeners[type].push(callback);
+};
+
+EventTarget.prototype.removeEventListener = function(type, callback) {
+  if (!(type in this.listeners)) {
+    return;
+  }
+  var stack = this.listeners[type];
+  for (var i = 0, l = stack.length; i &lt; l; i++) {
+    if (stack[i] === callback){
+      stack.splice(i, 1);
+      return;
+    }
+  }
+};
+
+EventTarget.prototype.dispatchEvent = function(event) {
+  if (!(event.type in this.listeners)) {
+    return true;
+  }
+  var stack = this.listeners[event.type];
+  event.target = this;
+  for (var i = 0, l = stack.length; i &lt; l; i++) {
+    stack[i].call(this, event);
+  }
+  return !event.defaultPrevented;
+};
+</pre>
+
+<p>{{ EmbedLiveSample('_Simple_implementation_of_EventTarget') }}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-eventtarget', 'EventTarget')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', 'DOM3-Events.html#interface-EventTarget', 'EventTarget')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>A few parameters are now optional (<code>listener</code>), or accepts the <code>null</code> value (<code>useCapture</code>).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', 'events.html#Events-EventTarget', 'EventTarget')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>9.0</td>
+   <td>7</td>
+   <td>1.0<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>9.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <code>window.EventTarget</code> does not exist.</p>
+
+<h2 id="See_Also">See Also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Reference/Events">Event reference</a> - the events available in the platform.</li>
+ <li><a href="/en-US/docs/Web/Guide/DOM/Events">Event developer guide</a></li>
+ <li>{{domxref("Event")}} interface</li>
+</ul>
diff --git a/files/de/web/api/federatedcredential/index.html b/files/de/web/api/federatedcredential/index.html
new file mode 100644
index 0000000000..1d7569e449
--- /dev/null
+++ b/files/de/web/api/federatedcredential/index.html
@@ -0,0 +1,125 @@
+---
+title: FederatedCredential
+slug: Web/API/FederatedCredential
+tags:
+  - API
+  - Föderierte Zugangsdaten
+  - Schnittstelle
+  - Zugangsdaten
+translation_of: Web/API/FederatedCredential
+---
+<p>{{SeeCompatTable}}{{APIRef("Credential Management API")}}</p>
+
+<p>Die <strong><code>FederatedCredential</code></strong> Schnittstelle der <a href="/en-US/docs/Web/API/Credential_Management_API">Credential Management API</a> stellt Informationen über Zugangsdaten eines Anbieters föderierter Identitäten bereit. Ein Anbieter föderierter Identitäten ist ein Gebilde, dem eine Webseite vertraut, eine Nutzerin korrekt zu identifizieren und eine API für diesen Zweck bereit stellt. <a href="http://openid.net/developers/specs/">OpenID Connect</a> ist ein Beispiel für ein Framework für Anbieter föderierter Identitäten.</p>
+
+<p>In Brwosern, die dies unterstützen, kann eine Instanz dieser Schnittstelle in der <code>credential</code> Funktions des <code>init</code> Objekt für globales {{domxref('fetch')}} mitgegeben werden.</p>
+
+<dl>
+ <dt>{{domxref("FederatedCredential.FederatedCredential()","FederatedCredential()")}}</dt>
+ <dd>Erstellt ein neues <code>FederatedCredential</code> Objekt.</dd>
+</dl>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<p><em>Erbt Eigenschaften von seinem Vorfahren, {{domxref("Credential")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("FederatedCredential.provider")}} {{readonlyInline}}</dt>
+ <dd>Gibt einen {{domxref("USVString")}} zurück, der den Anbieter föderierter Identitäten eines Satzes von Zugangsdaten enthält.</dd>
+</dl>
+
+<h3 id="Event-Handler">Event-Handler</h3>
+
+<p>Keine.</p>
+
+<h2 id="Methoden">Methoden</h2>
+
+<p>Keine.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js">var cred = new FederatedCredential({
+  id: id,
+  name: name,
+  provider: 'https://account.google.com',
+  iconURL: iconUrl
+});
+
+// Store it
+navigator.credentials.store(cred)
+  .then(function() {
+  // Mach etwas anderes.
+});</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Credential Management')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompabilität">Browserkompabilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>
+    <p>{{CompatChrome(51.0)}}</p>
+   </td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatChrome(51.0)}}</td>
+   <td>{{CompatChrome(51.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/de/web/api/fetch_api/index.html b/files/de/web/api/fetch_api/index.html
new file mode 100644
index 0000000000..d45285bcd1
--- /dev/null
+++ b/files/de/web/api/fetch_api/index.html
@@ -0,0 +1,84 @@
+---
+title: Fetch API
+slug: Web/API/Fetch_API
+translation_of: Web/API/Fetch_API
+---
+<div>{{DefaultAPISidebar("Fetch API")}}</div>
+
+<p class="summary"><span class="seoSummary">Die Fetch API bietet eine Schnittstelle zum Abrufen von Ressourcen (auch über das Netzwerk). Wer schon einmal mit {{DOMxRef("XMLHttpRequest")}} gearbeitet hat wird Ähnlichkeiten erkennen. Die neue API bietet jedoch einen ganzen Satz leistungsfähigerer und flexiblerer Funktionen.</span></p>
+
+<h2 id="Konzepte_und_Verwendung">Konzepte und Verwendung</h2>
+
+<p>Fetch bietet eine generische Definition von {{DOMxRef("Request")}} und {{DOMxRef("Response")}} Objekten (und anderen Dingen, die mit Anfragen über ein Netzwerk zu tun haben). Dadurch können sie überall dort eingesetzt werden, wo sie in Zukunft benötigt werden, sei es für Service Worker, die Cache-API und andere ähnliche Dinge, mit denen Anfragen und Antworten abgewickelt oder geändert werden, oder in jedem Anwendungsfall, für den Sie möglicherweise eigene Antworten programmatisch erstellen müssen.</p>
+
+<p>Sie enthält auch eine Definition für verwandte Konzepte wie CORS und die HTTP-Origin-Semantik, die ihre separaten Definitionen an anderer Stelle ersetzen.</p>
+
+<p>Verwenden Sie zum Erstellen einer Anfrage und zum Abrufen einer Ressource die Methode {{DOMxRef("WindowOrWorkerGlobalScope.fetch()")}}. Es ist in mehreren Schnittstellen implementiert, insbesondere {{DOMxRef("Window")}} und {{DOMxRef("WorkerGlobalScope")}}. Dadurch ist es in nahezu jedem Kontext verfügbar, in dem Sie Ressourcen abrufen möchten.</p>
+
+<p>Die Methode <code>fetch()</code> nimmt ein obligatorisches Argument entgegen, den Pfad zu der Ressource, die Sie abrufen möchten. Sie gibt ein {{DOMxRef("Promise")}} zurück, das in die {{DOMxRef("Response")}} dieser Anfrage aufgelöst wird, unabhängig davon, ob sie erfolgreich ist oder nicht. Sie können optional auch ein <code>init</code> Objekt mit Optionen als zweites Argument übergeben (siehe {{DOMxRef("Request")}}).</p>
+
+<p>Nachdem eine {{DOMxRef("Response")}} abgerufen wurde, stehen eine Reihe von Methoden zur Verfügung, mit denen der Antwort-Inhalt (Body) definiert werden kann und wie er verarbeitet werden soll (siehe {{DOMxRef("Body")}}).</p>
+
+<p>Sie können eine Anfrage und Antwort direkt erstellen, indem Sie die Konstruktoren {{DOMxRef("Request.Request", "Request()")}} und {{DOMxRef("Response.Response", "Response()")}} verwenden, was Sie aber wahrscheinlich in den seltensten Fällen tun werden. Stattdessen werden diese eher als Ergebnis anderer API-Aktionen erstellt (z. B. durch {{DOMxRef("FetchEvent.respondWith()")}} von Service Workern).</p>
+
+<div class="note">
+<p>Hinweis: Erfahren Sie mehr über die Verwendung der Funktionen der Fetch API in der <a href="/de/docs/Web/API/Fetch_API/Using_Fetch">Verwendung von Fetch</a> und lernen Sie die <a href="/de/docs/Web/API/Fetch_API/Basic_concepts">Grundkonzepte von Fetch</a>.</p>
+</div>
+
+<h3 id="Einen_Abruf_abbrechen">Einen Abruf abbrechen</h3>
+
+<p>Browser haben begonnen, experimentelle Unterstützung für die Schnittstellen {{DOMxRef("AbortController")}} und {{DOMxRef("AbortSignal")}} hinzuzufügen (auch Abort API genannt), die den Abbruch von Operationen durch Fetch und XHR ermöglichen, sofern diese noch nicht abgeschlossen sind. Weitere Informationen finden Sie auf den Schnittstellenseiten.</p>
+
+<h2 id="Fetch_Interfaces">Fetch Interfaces</h2>
+
+<dl>
+ <dt>{{DOMxRef("WindowOrWorkerGlobalScope.fetch()")}}</dt>
+ <dd>Die <code>fetch()</code> Methode zum Abrufen einer Ressource.</dd>
+ <dt>{{DOMxRef("Headers")}}</dt>
+ <dd>Stellt die Antwort-/Anfrageheader dar, damit Sie sie abfragen und je nach Ergebnis unterschiedliche Aktionen ausführen können.</dd>
+ <dt>{{DOMxRef("Request")}}</dt>
+ <dd>Stellt eine Ressourcenanfrage dar.</dd>
+ <dt>{{DOMxRef("Response")}}</dt>
+ <dd>Stellt die Antwort auf eine Anfrage dar.</dd>
+</dl>
+
+<h2 id="Fetch_mixin">Fetch mixin</h2>
+
+<dl>
+ <dt>{{DOMxRef("Body")}}</dt>
+ <dd>Stellt Methoden bereit, die sich auf den Hauptteil (Body) der Antwort/Anfrage beziehen, sodass Sie den Inhaltstyp angeben können und wie dieser behandelt werden soll.</dd>
+</dl>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Fetch")}}</td>
+   <td>{{Spec2("Fetch")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/API/Fetch_API/Using_Fetch">Verwendung von Fetch</a></li>
+ <li><a href="/de/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/de/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/de/docs/Web/HTTP">HTTP</a></li>
+ <li><a href="https://github.com/github/fetch">Fetch Polyfill</a></li>
+ <li><a href="/de/docs/Web/API/Fetch_API/Basic_concepts">Grundkonzepte von Fetch</a></li>
+</ul>
diff --git a/files/de/web/api/file/filename/index.html b/files/de/web/api/file/filename/index.html
new file mode 100644
index 0000000000..7dbf4f7559
--- /dev/null
+++ b/files/de/web/api/file/filename/index.html
@@ -0,0 +1,35 @@
+---
+title: File.fileName
+slug: Web/API/File/fileName
+tags:
+  - DOM
+  - Files
+translation_of: Web/API/File/fileName
+---
+<p>{{APIRef("File API")}}{{non-standard_header}}</p>
+
+<p>{{deprecated_header(7.0)}}</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>Returns the name of the file. For security reasons the path is excluded from this property.</p>
+
+<div class="note">This property is deprecated. Use {{domxref("File.name")}} instead.</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre>var name = instanceOfFile.fileName</pre>
+
+<h2 id="Value">Value</h2>
+
+<p>A string</p>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<p>Not part of any specification.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("File.name")}}</li>
+</ul>
diff --git a/files/de/web/api/file/filesize/index.html b/files/de/web/api/file/filesize/index.html
new file mode 100644
index 0000000000..0c91c5f739
--- /dev/null
+++ b/files/de/web/api/file/filesize/index.html
@@ -0,0 +1,36 @@
+---
+title: File.fileSize
+slug: Web/API/File/fileSize
+tags:
+  - DOM
+  - Files
+  - Property
+translation_of: Web/API/File/fileSize
+---
+<p>{{APIRef("File API") }}{{non-standard_header}}</p>
+
+<p>{{deprecated_header(7.0)}}</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>Returns the size of a file in bytes.</p>
+
+<div class="note">This property is deprecated. Use {{domxref("Blob.size")}} instead.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>var size = <em>instanceOfFile</em>.fileSize</pre>
+
+<h2 id="Value">Value</h2>
+
+<p>A number</p>
+
+<h2 id="Specification">Specification</h2>
+
+<p>Not part of any specification.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Blob.size")}}</li>
+</ul>
diff --git a/files/de/web/api/file/getastext/index.html b/files/de/web/api/file/getastext/index.html
new file mode 100644
index 0000000000..fefda6647a
--- /dev/null
+++ b/files/de/web/api/file/getastext/index.html
@@ -0,0 +1,78 @@
+---
+title: File.getAsText()
+slug: Web/API/File/getAsText
+tags:
+  - DOM
+  - Files
+translation_of: Web/API/File/getAsText
+---
+<p>{{APIRef("File API") }}{{non-standard_header}}</p>
+
+<p>{{deprecated_header(7.0)}}</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>The <code>getAsText</code> method provides the file's data interpreted as text using a given encoding.</p>
+
+<div class="note">
+<p><strong>Note:</strong> This method is obsolete; you should use the {{domxref("FileReader")}} method {{domxref("FileReader.readAsText()","readAsText()")}} instead.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>var str = instanceOfFile.getAsText(encoding);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt>encoding</dt>
+ <dd>A string indicating the encoding to use for the returned data. If this string is empty, UTF-8 is assumed.</dd>
+</dl>
+
+<h3 id="Returns">Returns</h3>
+
+<p>A string containing the file's data interpreted as text in the specified <code>encoding</code>.</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">// fileInput is a HTMLInputElement: <input>
+var fileInput = document.getElementById("myfileinput");
+
+// files is a FileList object (similar to NodeList)
+var files = fileInput.files;
+
+// object for allowed media types
+var accept = {
+  binary : ["image/png", "image/jpeg"],
+  text   : ["text/plain", "text/css", "application/xml", "text/html"]
+};
+
+var file;
+
+for (var i = 0; i &lt; files.length; i++) {
+  file = files[i];
+
+  // if file type could be detected
+  if (file !== null) {
+    if (accept.text.indexOf(file.mediaType) &gt; -1) {
+      // file is of type text, which we accept
+      // make sure it's encoded as utf-8
+      var data = file.getAsText("utf-8");
+      // modify data with string methods
+
+    } else if (accept.binary.indexOf(file.mediaType) &gt; -1) {
+      // binary
+    }
+  }
+}</pre>
+
+<h2 id="Specification">Specification</h2>
+
+<p>Not part of any specification.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("File")}}</li>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/de/web/api/file/index.html b/files/de/web/api/file/index.html
new file mode 100644
index 0000000000..17fe3b3ff7
--- /dev/null
+++ b/files/de/web/api/file/index.html
@@ -0,0 +1,146 @@
+---
+title: File
+slug: Web/API/File
+tags:
+  - API
+  - DOM
+  - Files
+translation_of: Web/API/File
+---
+<div>{{APIRef }}</div>
+
+<p>Das<strong><code>File</code></strong> Interface stellt Informationen über Dateien bereit und erlaubt den Zugriff auf deren Inhalt.</p>
+
+<p><code>File</code> werden generell von einem {{domxref("FileList")}} Objekt als das Ergebnis einer Benutzerauswahl von Dateien über ein <code>{{ HTMLElement("input") }}</code> Element, von einem <a href="/en-US/docs/DragDrop/DataTransfer" title="DragDrop/DataTransfer"><code>DataTransfer</code></a> Objekt eines Drag-and-Drop-Vorgangs,<span style="line-height: 1.5;"> oder von der </span><code style="font-size: 14px;">mozGetAsFile()</code><span style="line-height: 1.5;"> API eines {{ domxref("HTMLCanvasElement") }} zurückgegeben</span><span style="line-height: 1.5;">. In Gecko ist es von privilegiertem Code aus möglich, den Konstruktor direkt mit einem String Pfad oder einem {{interface("nsIFile")}} aufzurufen. Siehe <a href="/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code" title="Using the DOM File API in chrome code">Using the DOM File API in chrome code</a> für weitere Details.</span></p>
+
+<p>Die Dateireferenz kann nach der Formularübermittlung gespeichert werden, während der Benutzer über keine Internetverbindung verfügt. Somit können die Daten empfangen und hochgeladen werden, sobald die Internetverbindung wiederhergestellt ist.</p>
+
+<h2 id="Properties" name="Properties">Properties</h2>
+
+<p><em>Das<code>File</code> Interface erbt ebenso von dem {{domxref("Blob")}} Interface.</em></p>
+
+<dl>
+ <dt>{{domxref("File.lastModifiedDate")}} {{readonlyinline}} {{gecko_minversion_inline("15.0")}}</dt>
+ <dd>Das <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a></code> der letzten Veränderung der Datei, referenziert durch das <code>File</code> Objekt.</dd>
+ <dt>{{domxref("File.name")}} {{readonlyinline}} {{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>Der Name der Datei, referenziert durch das <code>File</code> Objekt.</dd>
+ <dt>{{domxref("File.fileName")}} {{non-standard_inline}} {{readonlyinline}} {{obsolete_inline("7.0")}}</dt>
+ <dd>Der Name der Datei, referenziert durch das <code>File</code> Objekt.</dd>
+ <dt>{{domxref("File.fileSize")}} {{non-standard_inline}} {{readonlyinline}} {{obsolete_inline("7.0")}}</dt>
+ <dd>Die Größe der Datei in Bytes.</dd>
+</dl>
+
+<h2 id="Method_overview" name="Method_overview">Methods</h2>
+
+<p><em>The <code>File</code> interface also inherits methods from the {{domxref("Blob")}} interface.</em></p>
+
+<dl>
+ <dt>{{domxref("File.getAsBinary()")}} {{non-standard_inline}} {{obsolete_inline("7.0")}}</dt>
+ <dd>Returns a string containing the file's data in raw binary format.</dd>
+ <dt>{{domxref("File.getAsDataURL()")}} {{non-standard_inline}} {{obsolete_inline("7.0")}}</dt>
+ <dd>A string containing the file's data encoded as a <code>data:</code> URL.</dd>
+ <dt>{{domxref("File.getAsText()","File.getAsText(string encoding)")}} {{non-standard_inline}} {{obsolete_inline("7.0")}}</dt>
+ <dd>Returns the file's contents as a string in which the file's data is interpreted as text using a given encoding.</dd>
+</dl>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>13</td>
+   <td>{{CompatGeckoDesktop("1.9")}} (non standard)<br>
+    {{CompatGeckoDesktop("7")}} (standard)</td>
+   <td>10.0</td>
+   <td>11.5</td>
+   <td>6.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>{{CompatNo}}</td>
+   <td>11.1</td>
+   <td>6.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Specification" name="Specification">Implementation notes</h3>
+
+<h4 id="Gecko_notes">Gecko notes</h4>
+
+<ul>
+ <li>In Gecko, you can use this API from chrome code. See <a href="/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code" title="Using the DOM File API in chrome code">Using the DOM File API in chrome code</a> for details.</li>
+ <li>Starting in Gecko 6.0 {{geckoRelease("6.0")}}, privileged code (such as extensions) can pass an {{interface("nsIFile")}} object to the DOM <code>File</code> constructor to specify the file to reference.</li>
+ <li>Starting in Gecko 8.0 {{geckoRelease("8.0")}}, you can use <code>new File</code> to create <code>File</code> objects from XPCOM component code instead of having to instantiate the {{interface("nsIDOMFile")}} object directly. The constructor takes, in contrast to Blob, as second argument the filename. The filename can be any String.
+  <pre class="syntaxbox">File File(
+  Array parts,
+  String filename,
+  BlobPropertyBag properties
+);</pre>
+ </li>
+</ul>
+
+<h2 id="Chrome_Code_-_Scope_Availability">Chrome Code - Scope Availability</h2>
+
+<p>To use from chrome code, JSM and Bootstrap scope, you have to import it like this:</p>
+
+<pre class="brush: js">Cu.importGlobalProperties(['File']);
+</pre>
+
+<p><code>URL</code> is available in Worker scopes.</p>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Using_files_from_web_applications" title="Using files from web applications">Using files from web applications</a></li>
+ <li><a href="/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code" title="Extensions/Using the DOM File API in chrome code">Using the DOM File API in chrome code</a></li>
+ <li>{{domxref("FileReader")}}</li>
+ <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+</ul>
diff --git a/files/de/web/api/file/name/index.html b/files/de/web/api/file/name/index.html
new file mode 100644
index 0000000000..ffdb12db0f
--- /dev/null
+++ b/files/de/web/api/file/name/index.html
@@ -0,0 +1,104 @@
+---
+title: File.name
+slug: Web/API/File/name
+tags:
+  - DOM
+  - Files
+translation_of: Web/API/File/name
+---
+<p>{{APIRef("File API")}}</p>
+
+<p>Gibt den Namen der File zurück. Aus Sicherheitsgründen wird der Pfad der Datei nicht mit zurückgegeben.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre>var name = <em>instanceOfFile</em>.name</pre>
+
+<h2 id="Value">Value</h2>
+
+<p>Ein string, der den Namen der File ohne Pfad beinhaltet, bspw. "My Resume.rtf".</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush:js">// fileInput is a HTMLInputElement: <input>
+var fileInput = document.getElementById("myfileinput");
+
+// files is a FileList object (simliar to NodeList)
+var files = fileInput.files;
+
+for (var i = 0; i &lt; files.length; i++) {
+  alert("Filename " + files[i].name);
+}</pre>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API', '#file-attrs', 'name')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>File.name</td>
+   <td>13.0</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>10.0</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>File.name</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification">Siehe auch</h2>
+
+<ul>
+ <li>{{domxref("File")}}</li>
+</ul>
diff --git a/files/de/web/api/file/typ/index.html b/files/de/web/api/file/typ/index.html
new file mode 100644
index 0000000000..28c57a4cb1
--- /dev/null
+++ b/files/de/web/api/file/typ/index.html
@@ -0,0 +1,65 @@
+---
+title: File.type
+slug: Web/API/File/Typ
+translation_of: Web/API/File/type
+---
+<div>{{APIRef("File API")}}</div>
+
+<p>Gibt den Internet Media Typ (<a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME</a>) einer Datei zurück, welche durch ein {{domxref("File")}} Objekt dargestellt wird.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">var name = <var>file</var>.type;</pre>
+
+<h2 id="Wert">Wert</h2>
+
+<p>Eine Zeichenkette, welche den Internet Media Typ (MIME) enthält und den Typ der Datei angibt, zum Beispiel "image/png" für ein PNG Bild</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: html">&lt;input type="file" multiple onchange="showType(this)"&gt;
+</pre>
+
+<pre class="brush: js">function showType(fileInput) {
+  var files = fileInput.files;
+
+  for (var i = 0; i &lt; files.length; i++) {
+    var name = files[i].name;
+    var type = files[i].type;
+    alert("Filename: " + name + " , Type: " + type);
+  }
+}</pre>
+
+<p><strong>Hinweis:</strong> Basierend auf der aktuellen Implementierung, lesen Browser nicht wirklich den Bytestrom einer Datei, um ihren Medientyp zu bestimmen. Es wird aufgrund der Dateiendung angenommen; eine PNG-Bilddatei, die in .txt umbenannt wird, würde "<em>text/plain</em>" und nicht "<em>image/png</em>" ergeben. Darüber hinaus ist <code>file.type</code> im Allgemeinen nur für gängige Dateitypen wie Bilder, HTML-Dokumente, Audio und Video zuverlässig. Seltene Dateierweiterungen würden eine leere Zeichenkette zurückgeben. Die Client-Konfiguration (z.B. die Windows-Registrierung) kann auch bei gängigen Typen zu unerwarteten Werten führen. <strong>Entwicklern wird empfohlen, sich nicht auf diese Eigenschaft als einziges Validierungsschema zu verlassen.</strong></p>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('File API', '#dfn-type', 'type')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+
+
+<p>{{Compat("api.File.type")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/File/Using_files_from_web_applications">Using files from web applications</a></li>
+ <li>Blog Post: <a href="https://textslashplain.com/2018/07/26/be-skeptical-of-client-reported-mime-content-types/">Be skeptical of client-reported MIME types</a></li>
+</ul>
diff --git a/files/de/web/api/file/zugriff_auf_dateien_von_webapplikationen/index.html b/files/de/web/api/file/zugriff_auf_dateien_von_webapplikationen/index.html
new file mode 100644
index 0000000000..c44ac4b9df
--- /dev/null
+++ b/files/de/web/api/file/zugriff_auf_dateien_von_webapplikationen/index.html
@@ -0,0 +1,512 @@
+---
+title: Zugriff auf Dateien von Webapplikationen
+slug: Web/API/File/Zugriff_auf_Dateien_von_Webapplikationen
+translation_of: Web/API/File/Using_files_from_web_applications
+---
+<p>Mithilfe der File API, welche mit HTML5 zum DOM hinzugefügt wurde, ist es nun für Webinhalte möglich den Benutzer lokale Dateien auswählen zu lassen und den Inhalt dieser Dateien auszulesen. Die Auswahl kann entweder durch das HTML Element {{ HTMLElement("input") }} oder durch Drag and Drop erfolgen.</p>
+
+<p>Es ist auch möglich die DOM File API von Erweiterungen oder anderem Chrome Code zu benutzen. In diesem Fall müssen einige zusätzliche Dinge beachtet werden, die im Abschnitt <a href="/en/Extensions/Using_the_DOM_File_API_in_chrome_code" title="en/Extensions/Using the DOM File API in chrome code">Using the DOM File API in chrome code</a> näher erläutert werden.</p>
+
+<h2 id="Auf_ausgewählte_Dateien_zugreifen">Auf ausgewählte Dateien zugreifen</h2>
+
+<p>Gehen wir von folgendem HTML-Code aus:</p>
+
+<pre class="brush: html">&lt;input type="file" id="input"&gt;</pre>
+
+<p>Die File API erlaubt den Zugriff auf eine {{ domxref("FileList") }} mit {{ domxref("File") }} Objekten, die die vom Benutzer ausgewählten Dateien repräsentieren.</p>
+
+<p>Wenn der Benutzer nur eine Datei auswählt, dann muss nur die erste Datei in der Liste betrachtet werden.</p>
+
+<p>Eine ausgewählte Datei erhält man über den üblichen DOM Selektor:</p>
+
+<pre class="brush: js">var selectedFile = document.getElementById('input').files[0];</pre>
+
+<p>Oder mit einem <a href="http://jquery.com/" title="http://jquery.com/">jQuery</a> Selektor:</p>
+
+<pre class="brush: js">var selectedFile = $('#input').get(0).files[0];
+
+var selectedFile = $('#input')[0].files[0];</pre>
+
+<div class="note">
+<p>Tritt der Fehler "<code>files is undefined</code>" auf:<br>
+ Es wurde das falsche HTML element ausgewählt. Es ist zu beachten, dass ein jQuery Selektor eine Liste von zutreffenden DOM Elementen zurückliefert. Das richtige DOM Element muss ausgewählt werden, um "<code>files</code>" darauf anzuwenden.</p>
+</div>
+
+<h2 id="Zugriff_auf_ausgewählte_Dateien_über_den_Change_Event">Zugriff auf ausgewählte Dateien über den Change Event</h2>
+
+<p>Es ist auch möglich (aber nicht unbedingt erforderlich), auf die {{ domxref("FileList") }} über das change event zuzugreifen:</p>
+
+<pre class="brush: html">&lt;input type="file" id="input" onchange="handleFiles(this.files)"&gt;</pre>
+
+<p>Wenn der Benutzer eine Datei auswählt, wird die Funktion <code>handleFiles()</code> aufgerufen. Als Parameter wird die {{ domxref("FileList") }} übergeben. Sie enthält die {{ domxref("File") }} Objekte, die die vom Benutzer ausgewählten Dateien repräsentieren.</p>
+
+<p>Soll der Benutzer mehrere Dateien auswählen können, dann kann einfach das Attribut <code>multiple</code> auf das <code>input</code> Element angewendet werden:</p>
+
+<pre class="brush: html">&lt;input type="file" id="input" multiple onchange="handleFiles(this.files)"&gt;</pre>
+
+<p>In diesem Fall enthält die Dateiliste, die an die <code>handleFiles()</code> Funktion übergeben wird, ein {{ domxref("File") }} für jede Datei, die der Benutzer ausgewählt hat.</p>
+
+<h3 id="Dynamisch_einen_Change_Listener_hinzufügen">Dynamisch einen Change Listener hinzufügen</h3>
+
+<p>Wurde das <code>input</code> Feld mit einer JavaScript Bibliothek wie <a class="external" href="http://www.jquery.com/" title="http://www.jquery.com/">jQuery</a> erzeugt, dann muss der event Listener mit {{ domxref("element.addEventListener()") }} hinzugefügt werden:</p>
+
+<pre class="brush: js">var inputElement = document.getElementById("input");
+inputElement.addEventListener("change", handleFiles, false);
+function handleFiles() {
+  var fileList = this.files; /* Jetzt kann die Dateiliste verarbeitet werden */
+}</pre>
+
+<p>In diesem Fall ist die <code>handleFiles()</code> Funktion selbst der Event Handler, anders als in den vorigen Beispielen, wo sie von einem Event Handler aufgerufen wurde.</p>
+
+<h2 id="Informationen_über_die_ausgewählte(n)_Datei(en)">Informationen über die ausgewählte(n) Datei(en)</h2>
+
+<p>Das {{ domxref("FileList") }} Objekt, das vom DOM geliefert wurde, enthält eine Liste aller Dateien, die vom Benutzer ausgewählt wurden. Jede der Dateien wird durch ein {{ domxref("File") }} Objekt repräsentiert. Die Anzahl der ausgewälten Dateien kann über das <code>length</code> Attribut der Liste ermittelt werden:</p>
+
+<pre class="brush: js"><code>var numFiles = files.length;</code></pre>
+
+<p>Die einzelnen {{ domxref("File") }} Objekte erhält man, indem das {{ domxref("FileList") }} Objekt einfach wie ein Array behandelt wird:</p>
+
+<pre class="brush: js">for (var i = 0, numFiles = files.length; i &lt; numFiles; i++) {
+  var file = files[i];
+  ..
+}
+</pre>
+
+<p>Diese Schleife iteriert über alle Dateien in der Liste.</p>
+
+<p>Im {{ domxref("File") }} Objekt liefern drei Attribute hilfreiche Informationen über die Datei:</p>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Der Dateiname als read-only String. Es ist nur der Dateiname enthalten, keine Pfadinformationen.</dd>
+ <dt><code>size</code></dt>
+ <dd>Die Dateigröße in Bytes als read-only 64-Bit Integer.</dd>
+ <dt><code>type</code></dt>
+ <dd>Der MIME type der Datei als read-only String oder <code>""</code>, wenn der Typ nicht ermittelt werden konnte.</dd>
+</dl>
+
+<h3 id="Beispiel_Dateigröße_anzeigen">Beispiel: Dateigröße anzeigen</h3>
+
+<p>Das folgende Beispiel zeigt eine mögliche Verwendung des <code>size</code> Attributs:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8"&gt;
+&lt;title&gt;File(s) size&lt;/title&gt;
+&lt;script&gt;
+function updateSize() {
+  var nBytes = 0,
+      oFiles = document.getElementById("uploadInput").files,
+      nFiles = oFiles.length;
+  for (var nFileId = 0; nFileId &lt; nFiles; nFileId++) {
+    nBytes += oFiles[nFileId].size;
+  }
+  var sOutput = nBytes + " bytes";
+  // optional code for multiples approximation
+  for (var aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"], nMultiple = 0, nApprox = nBytes / 1024; nApprox &gt; 1; nApprox /= 1024, nMultiple++) {
+    sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
+  }
+  // end of optional code
+  document.getElementById("fileNum").innerHTML = nFiles;
+  document.getElementById("fileSize").innerHTML = sOutput;
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onload="updateSize();"&gt;
+&lt;form name="uploadForm"&gt;
+&lt;p&gt;&lt;input id="uploadInput" type="file" name="myFiles" onchange="updateSize();" multiple&gt; selected files: &lt;span id="fileNum"&gt;0&lt;/span&gt;; total size: &lt;span id="fileSize"&gt;0&lt;/span&gt;&lt;/p&gt;
+&lt;p&gt;&lt;input type="submit" value="Send file"&gt;&lt;/p&gt;
+&lt;/form&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Verstecktes_input_Element_mit_click()_Methode">Verstecktes input Element mit click() Methode</h2>
+
+<p>Ab Gecko 2.0 {{ geckoRelease("2.0") }}, kann das zugegebenermaßen hässliche Datei-{{ HTMLElement("input") }} Element versteckt und durch eigene Oberflächenelemente zum Zugriff auf den Datei-Öffnen-Dialog ersetzt werden. Dazu wird das <code>input</code> Element mit dem CSS Stil <code>display:none</code> versehen und mit der Methode {{ domxref("element.click","click()") }} aufgerufen.</p>
+
+<p>Gehen wir von folgendem HTML-Code aus:</p>
+
+<pre class="brush: html"><code>&lt;input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"&gt;
+&lt;a href="#" id="fileSelect"&gt;Bitte Dateien auswählen&lt;/a&gt;
+</code>
+</pre>
+
+<p>Der Code, der auf den <code>click</code> Event reagiert, kann wie folgt aussehen:</p>
+
+<pre class="brush: js">var fileSelect = document.getElementById("fileSelect"),
+  fileElem = document.getElementById("fileElem");
+
+fileSelect.addEventListener("click", function (e) {
+  if (fileElem) {
+    fileElem.click();
+  }
+  e.preventDefault(); // prevent navigation to "#"
+}, false);
+</pre>
+
+<p>Das neue Oberflächenelement zum Zugriff auf den Datei-Öffnen-Dialog kann nun beliebig gestaltet werden.</p>
+
+<h2 id="label_Element_zum_Auslösen_eines_versteckten_input_Elements">label Element zum Auslösen eines versteckten input Elements</h2>
+
+<p>Wird statt eines Links ({{ HTMLElement("a") }} Element) ein {{ HTMLElement("label") }} Element verwendet, dann kann das versteckte <code>input</code> Element auch ohne JavaScript ausgelöst werden. Dabei darf das input-Element aber weder mit <code>display: none</code> noch mit <code>visibility: hidden</code> versteckt werden, weil es in diesen Fällen nicht mit der Tastatur bedienbar wäre. Es darf nur <a href="https://a11yproject.com/posts/how-to-hide-content/">visuell versteckt</a> werden.</p>
+
+<p>Gehen wir von folgendem HTML-Code aus:</p>
+
+<pre class="brush: html">&lt;input type="file" id="fileElem" multiple accept="image/*" class="visually-hidden"&gt;
+&lt;label for="fileElem"&gt;Bitte Dateien auswählen&lt;/label&gt;
+</pre>
+
+<p>und folgendem CSS:</p>
+
+<pre class="brush: css">.visually-hidden {
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+}
+
+input.visually-hidden:focus + label {
+  outline: thin dotted;
+}
+</pre>
+
+<p>Bei einem Klick auf das <code>label</code> Element wird der Datei-Öffnen-Dialog angezeigt.</p>
+
+<p>Das <code>label</code> Element kann per CSS beliebig gestaltet werden. Man muss aber das Label des versteckten Eingabefelds hervorheben, wenn dieses den Fokus hat, d.h. per Tab-Taste angewählt wurde – sei es durch outline wie im obigen Beispiel oder background-color oder box-shadow. (Gegenwärtig stellt Firefox das Label von fokussierten <code>&lt;input type="file"&gt;</code>-Elementen nicht hervorgehoben dar.)</p>
+
+<h2 id="Dateien_per_Drag_and_Drop_auswählen">Dateien per Drag and Drop auswählen</h2>
+
+<p>Es ist auch möglich, per Drag and Drop Dateien an die Webanwendung zu übergeben.</p>
+
+<p>Zuerst muss eine Drop Zone eingerichtet werden. Welcher Teil der Oberfläche Drops entgegen nimmt, ist vom Design der Anwendung abhängig. Generell ist das Empfangen von Drop Events aber einfach:</p>
+
+<pre class="brush: js">var dropbox;
+
+dropbox = document.getElementById("dropbox");
+dropbox.addEventListener("dragenter", dragenter, false);
+dropbox.addEventListener("dragover", dragover, false);
+dropbox.addEventListener("drop", drop, false);
+</pre>
+
+<p>In diesem Beispiel wird das Element mit der ID <code>dropbox</code> als Drop Zone verwendet. Das wird durch Registrieren der Listener für {{event('dragenter')}}, {{event('dragover')}} und {{event('drop')}} Events erreicht.</p>
+
+<p>dragenter und dragover benötigen wir in unserem Fall eigentlich nicht. Wir verhindern lediglich eine weitere Behandlung der Events durch Aufruf von <code>e.stopPropagation()</code> und <code>e.preventDefault()</code>:</p>
+
+<pre class="brush: js">function dragenter(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+function dragover(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+</pre>
+
+<p>Das Wesentliche geschieht in der Behandlung des <code>drop</code> Events:</p>
+
+<pre class="brush: js">function drop(e) {
+  e.stopPropagation();
+  e.preventDefault();
+
+  var dt = e.dataTransfer;
+  var files = dt.files;
+
+  handleFiles(files);
+}
+</pre>
+
+<p>Hier ermitteln wir das <code>dataTransfer</code> Feld aus dem Event, entnehmen ihm die Dateiliste und übergeben diese an <code>handleFiles()</code>. Von da an ist die Weiterverarbeitung die gleiche wie bei Verwendung des <code>input</code> Elements.</p>
+
+<h2 id="Beispiel_Thumbnails_von_ausgewählten_Bildern_anzeigen">Beispiel: Thumbnails von ausgewählten Bildern anzeigen</h2>
+
+<p>Gehen wir davon aus, dass auf einer Foto-Webseite mit HTML5 eine Thumbnail Vorschau von Bildern angezeigt werden soll, bevor sie hochgeladen werden. Das input Element oder die Drop Zone kann wie oben beschrieben eingerichtet werden. Diese rufen die folgende handleFiles() Funktion auf:</p>
+
+<pre class="brush: js">function handleFiles(files) {
+  for (var i = 0; i &lt; files.length; i++) {
+    var file = files[i];
+    var imageType = /^image\//;
+
+    if (!imageType.test(file.type)) {
+      continue;
+    }
+
+    var img = document.createElement("img");
+    img.classList.add("obj");
+    img.file = file;
+    preview.appendChild(img); // Gehen wird davon aus, dass "preview" das div-Element ist, in dem der Inhalt angezeigt wird.
+
+    var reader = new FileReader();
+    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
+    reader.readAsDataURL(file);
+  }
+}
+</pre>
+
+<p>Mit der Schleife wird über die ausgewählten Dateien iteriert. Bei jeder Datei wird mit Hilfe des <code>type</code> Attributs (indem der Reguläre Ausdruck "^image\/" darauf angewendet wird) geprüft, ob es sich um eine Bild Datei handelt. Liegt eine Bild Datei vor, dann wird ein neues <code>img</code> Element erzeugt. Mit CSS können z.B. hübsche Ränder oder Schatten erzeugt und die Größe des Bildes festgelegt werden, das muss also nicht hier im Code erfolgen.</p>
+
+<p>Jedem Bild wird die CSS Klasse <code>obj</code> zugewiesen, so dass es einfach ist, es im DOM Baum zu finden. Außerdem wird jedem Bild im <code>file</code> Attribut das {{ domxref("File") }} Objekt für das Bild zugewiesen; das benötigen wir später für den tatsächlichen Upload der Datei. Mit {{ domxref("Node.appendChild()") }} wird das neue Thumbnail dem <code>preview</code> Bereich unserer Anwendung hinzugefügt.</p>
+
+<p>Dann erstellen wir einen {{ domxref("FileReader") }}, um das Bild asynchron zu laden und es dem <code>img</code> Element hinzuzufügen. Nach dem Erstellen des FileReader Objektes definieren wir die <code>onload</code> Funktion und rufen <code>readAsDataURL()</code> auf, um die Leseoperation im Hintergrund zu starten. Ist der komplette Inhalt der Bilddatei geladen, dann wird er in eine <code>data:</code> URL umgewandelt, die an den <code>onload</code> Callback übergeben wird. Unsere Implementation dieser Routine setzt das <code>src</code> Attribut des <code>img</code> Elements auf das geladene Bild, was dazu führt, dass das Bild im Thumbnail auf dem Bildschirm des Benutzers erscheint.</p>
+
+<h2 id="Verwendung_von_Objekt_URLs">Verwendung von Objekt URLs</h2>
+
+<p>Mit Gecko 2.0 {{ geckoRelease("2.0") }} wurde die Unterstützung für die DOM Methoden {{ domxref("window.URL.createObjectURL()") }} und {{ domxref("window.URL.revokeObjectURL()") }} eingeführt. Mit ihnen lassen sich einfache URL Strings erzeugen, die beliebige Daten referenzieren, auf die per DOM {{ domxref("File") }} Objekte zugegriffen werden kann; einschließlich lokale Dateien auf dem Computer des Anwenders.</p>
+
+<p>Wenn man aus HTML mit einer URL auf ein {{ domxref("File") }} Objekt verweisen möchte, dann kann man dafür eine Objekt URL erzeugen:</p>
+
+<pre class="brush: js"><code>var objectURL = window.URL.createObjectURL(fileObj);</code></pre>
+
+<p>Die Objekt URL ist ein String, der das {{ domxref("File") }} Objekt identifiziert. Jedes Mal, wenn {{ domxref("window.URL.createObjectURL()") }} aufgerufen wird, wird eine eindeutige Objekt URL erzeugt, auch wenn vorher bereits eine Objekt URL für diese Datei erzeugt wurde. Jede von ihnen muss wieder freigegeben werden. Sie werden automatisch freigegeben, wenn das Dokument entladen wird. Wenn ihre Anwendung die Objekt URLs dynamisch verwendet, dann sollten Sie sie auch explizit durch Aufruf von {{ domxref("window.URL.revokeObjectURL()") }} freigeben:</p>
+
+<pre class="brush: js"><code>window.URL.revokeObjectURL(objectURL);</code></pre>
+
+<h2 id="Beispiel_Mit_Objekt_URLs_Bilder_anzeigen">Beispiel: Mit Objekt URLs Bilder anzeigen</h2>
+
+<p>Dieses Beispiel verwendet Objekt URLs, um Thumbnails von Bildern anzuzeigen. Darüber hinaus werden weitere Dateiinformationen einschließlich Name und Größe angezeigt. <a href="/samples/domref/file-click-demo.html" title="https://developer.mozilla.org/samples/domref/file-click-demo.html">Live Ansicht des Beispiels</a>.</p>
+
+<p>Das HTML für die Oberfläche sieht folgendermaßen aus:</p>
+
+<pre class="brush: html">&lt;input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"&gt;
+&lt;a href="#" id="fileSelect"&gt;Bitte Dateien auswählen&lt;/a&gt;
+&lt;div id="fileList"&gt;
+  &lt;p&gt;Keine Dateien ausgewählt!&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Das erstellt ein Datei {{ HTMLElement("input") }} Element, zusammen mit einem Link, der den Datei-Öffnen-Dialog anzeigt (so kann das Datei <code>input</code> Element versteckt werden, da es nicht so attraktiv aussieht). Das wird oben im Abschnitt {{ anch("Verstecktes input Element mit click() Methode") }} näher beschrieben.</p>
+
+<p>Die <code>handleFiles()</code> Methode sieht folgendermaßen aus:</p>
+
+<pre class="brush: js">window.URL = window.URL || window.webkitURL;
+
+var fileSelect = document.getElementById("fileSelect"),
+    fileElem = document.getElementById("fileElem"),
+    fileList = document.getElementById("fileList");
+
+fileSelect.addEventListener("click", function (e) {
+  if (fileElem) {
+    fileElem.click();
+  }
+  e.preventDefault(); // prevent navigation to "#"
+}, false);
+
+function handleFiles(files) {
+  if (!files.length) {
+    fileList.innerHTML = "&lt;p&gt;No files selected!&lt;/p&gt;";
+  } else {
+    var list = document.createElement("ul");
+    for (var i = 0; i &lt; files.length; i++) {
+      var li = document.createElement("li");
+      list.appendChild(li);
+
+      var img = document.createElement("img");
+      img.src = window.URL.<strong>createObjectURL</strong>(files[i]);
+      img.height = 60;
+      img.onload = function() {
+        window.URL.<strong>revokeObjectURL</strong>(this.src);
+      }
+      li.appendChild(img);
+      var info = document.createElement("span");
+      info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
+      li.appendChild(info);
+    }
+  }
+}
+</pre>
+
+<p>Das {{ HTMLElement("div") }} Element mit der ID <code>fileList</code> wird ermittelt. Das ist der Block, in den wir später unsere Dateiliste einschließlich Thumbnails einfügen.</p>
+
+<p>Ist das {{ domxref("FileList") }} Objekt, das an <code>handleFiles()</code> übergeben wird, <code>null</code>, dann wird einfach "No files selected!" ausgegeben. Ansonsten bauen wir unsere Dateiliste wie folgt:</p>
+
+<ol>
+ <li>Ein neues ({{ HTMLElement("ul") }}) Element wird erzeugt.</li>
+ <li>Das neue Listenelement wird dem {{ HTMLElement("div") }} Block hinzugefügt durch Aufruf der {{ domxref("element.appendChild()") }} Methode.</li>
+ <li>Für jedes {{ domxref("File") }} in der {{ domxref("FileList") }}, die durch <code>files</code> repräsentiert wird:
+  <ol>
+   <li>Erzeuge ein neues Listenelement ({{ HTMLElement("li") }}) und füge es der Liste hinzu.</li>
+   <li>Erzeuge ein neues Bildelement ({{ HTMLElement("img") }}).</li>
+   <li>Setze das src Attribut des Bildes auf die neue Objekt URL, die die Datei repräsentiert, wobei die Objekt URL mit {{ domxref("window.URL.createObjectURL()") }} erzeugt wird.</li>
+   <li>Setze die Bildgröße auf 60 Pixel.</li>
+   <li>Richte den <code>onload</code> Event Handler ein, um die Objekt URL wieder freizugeben, da sie nach dem Laden des Bildes nicht mehr benötigt wird. Das wird durch Aufruf der Methode {{ domxref("window.URL.revokeObjectURL()") }} und Übergabe des Objekt URL Strings aus <code>img.src</code> gemacht.</li>
+   <li>Füge das neue Bildelement dem Listenelement hinzu.</li>
+  </ol>
+ </li>
+</ol>
+
+<h2 id="Example_Uploading_a_user-selected_file">Example: Uploading a user-selected file</h2>
+
+<p>Another thing you might want to do is let the user upload the selected file or files (such as the images selected using the previous example) to a server. This can be done asynchronously very easily.</p>
+
+<h3 id="Creating_the_upload_tasks">Creating the upload tasks</h3>
+
+<p>Continuing with the code that built the thumbnails in the previous example, recall that every thumbnail image is in the CSS class <code>obj</code> with the corresponding {{ domxref("File") }} attached in a <code>file</code> attribute. This allows us to select all of the images the user has chosen for uploading using {{ domxref("Document.querySelectorAll()") }}, like this:</p>
+
+<pre class="brush: js">function sendFiles() {
+  var imgs = document.querySelectorAll(".obj");
+
+  for (var i = 0; i &lt; imgs.length; i++) {
+    new FileUpload(imgs[i], imgs[i].file);
+  }
+}
+</pre>
+
+<p>Line 2 fetches a <span style="line-height: 1.5;">{{ domxref("NodeList") }}</span><span style="line-height: 1.5;">, called </span><code style="font-size: 14px;">imgs</code><span style="line-height: 1.5;">, of all the elements in the document with the CSS class </span><code style="font-size: 14px;">obj</code><span style="line-height: 1.5;">. In our case, these will be all of the image thumbnails. Once we have that list, it's trivial to go through it and create a new </span><code style="font-size: 14px;">FileUpload</code><span style="line-height: 1.5;"> instance for each. Each of these handles uploading the corresponding file.</span></p>
+
+<h3 id="Handling_the_upload_process_for_a_file">Handling the upload process for a file</h3>
+
+<p>The <code>FileUpload</code> function accepts two inputs: an image element and a file from which to read the image data.</p>
+
+<pre class="brush: js">function FileUpload(img, file) {
+  var reader = new FileReader();
+  this.ctrl = createThrobber(img);
+  var xhr = new XMLHttpRequest();
+  this.xhr = xhr;
+
+  var self = this;
+  this.xhr.upload.addEventListener("progress", function(e) {
+        if (e.lengthComputable) {
+          var percentage = Math.round((e.loaded * 100) / e.total);
+          self.ctrl.update(percentage);
+        }
+      }, false);
+
+  xhr.upload.addEventListener("load", function(e){
+          self.ctrl.update(100);
+          var canvas = self.ctrl.ctx.canvas;
+          canvas.parentNode.removeChild(canvas);
+      }, false);
+  xhr.open("POST", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php");
+  xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
+  reader.onload = function(evt) {
+    xhr.sendAsBinary(evt.target.result);
+  };
+  reader.readAsBinaryString(file);
+}
+</pre>
+
+<p>The <code>FileUpload()</code> function shown above creates a throbber, which is used to display progress information, and then creates an {{ domxref("XMLHttpRequest") }} to handle uploading the data.</p>
+
+<p>Before actually transferring the data, several preparatory steps are taken:</p>
+
+<ol>
+ <li>The <code>XMLHttpRequest</code>'s upload <code>progress</code> listener is set to update the throbber with new percentage information so that as the upload progresses the throbber will be updated based on the latest information.</li>
+ <li>The <code>XMLHttpRequest</code>'s upload <code>load</code> event handler is set to update the throbber progress information to 100% to ensure the progress indicator actually reaches 100% (in case of granularity quirks during the process). It then removes the throbber since it's no longer needed. This causes the throbber to disappear once the upload is complete.</li>
+ <li>The request to upload the image file is opened by calling <code>XMLHttpRequest</code>'s <code>open()</code> method to start generating a POST request.</li>
+ <li>The MIME type for the upload is set by calling the <code>XMLHttpRequest</code> function <code>overrideMimeType()</code>. In this case, we're using a generic MIME type; you may or may not need to set the MIME type at all depending on your use case.</li>
+ <li>The <code>FileReader</code> object is used to convert the file to a binary string.</li>
+ <li>Finally, when the content is loaded the <code>XMLHttpRequest</code> function <code>sendAsBinary()</code> is called to upload the file's content.</li>
+</ol>
+
+<div class="note"><strong>Note:</strong> The non-standard <code>sendAsBinary</code> method in the example above is considered deprecated as of Gecko 31 {{ geckoRelease(31) }} and will be removed soon. The standard <code>send(Blob data)</code> method can be used instead.</div>
+
+<h3 id="Handling_the_upload_process_for_a_file_asynchronously">Handling the upload process for a file, asynchronously</h3>
+
+<pre class="brush: js">&lt;?php
+if (isset($_FILES['myFile'])) {
+    // Example:
+    move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
+    exit;
+}
+?&gt;&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;title&gt;dnd binary upload&lt;/title&gt;
+    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
+    &lt;script type="text/javascript"&gt;
+        function sendFile(file) {
+            var uri = "/index.php";
+            var xhr = new XMLHttpRequest();
+            var fd = new FormData();
+
+            xhr.open("POST", uri, true);
+            xhr.onreadystatechange = function() {
+                if (xhr.readyState == 4 &amp;&amp; xhr.status == 200) {
+                    // Handle response.
+                    alert(xhr.responseText); // handle response.
+                }
+            };
+            fd.append('myFile', file);
+            // Initiate a multipart/form-data upload
+            xhr.send(fd);
+        }
+
+        window.onload = function() {
+            var dropzone = document.getElementById("dropzone");
+            dropzone.ondragover = dropzone.ondragenter = function(event) {
+                event.stopPropagation();
+                event.preventDefault();
+            }
+
+            dropzone.ondrop = function(event) {
+                event.stopPropagation();
+                event.preventDefault();
+
+                var filesArray = event.dataTransfer.files;
+                for (var i=0; i&lt;filesArray.length; i++) {
+                    sendFile(filesArray[i]);
+                }
+            }
+        }
+    &lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;div&gt;
+        &lt;div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;"&gt;Drag &amp; drop your file here...&lt;/div&gt;
+    &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Example_Using_object_URLs_to_display_PDF">Example: Using object URLs to display PDF</h2>
+
+<p>Object URLs can be used for other things than just images! They can be used to display embedded PDF files or any other resources that can be displayed by the browser.</p>
+
+<p>In Firefox, to have the PDF appear embedded in the iframe (rather than proposed as a downloaded file), the preference <code>pdfjs.disabled</code> must be set to <code>false</code> {{non-standard_inline()}}.</p>
+
+<pre class="brush: html">&lt;iframe id="viewer"&gt;
+</pre>
+
+<p>And here is the change of the <code>src</code> attribute:</p>
+
+<pre class="brush: js">var obj_url = window.URL.createObjectURL(blob);
+var iframe = document.getElementById('viewer');
+iframe.setAttribute('src', obj_url);
+window.URL.revokeObjectURL(obj_url);</pre>
+
+<h2 id="Example_Using_object_URLs_with_other_file_types">Example: Using object URLs with other file types</h2>
+
+<p>You can manipulate files of other formats the same way. Here is how to preview uploaded video:</p>
+
+<pre class="brush: js">var video = document.getElementById('video');
+var obj_url = window.URL.createObjectURL(blob);
+video.src = obj_url;
+video.play()
+window.URL.revokeObjectURL(obj_url);</pre>
+
+<h2 id="Specification" name="Specification">Specifications</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/progress-events/" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#concept-input-type-file-selected">File upload state</a> (HTML 5 working draft)</li>
+ <li><a href="http://www.w3.org/TR/FileAPI/" title="http://www.w3.org/TR/FileAPI/">File API</a></li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{ domxref("File") }}</li>
+ <li>{{ domxref("FileList") }}</li>
+ <li>{{ domxref("FileReader") }}</li>
+ <li><a href="/en/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="En/Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en/Extensions/Using_the_DOM_File_API_in_chrome_code" title="en/Extensions/Using the DOM File API in chrome code">Using the DOM File API in chrome code</a></li>
+ <li>{{ domxref("XMLHttpRequest") }}</li>
+ <li><a class="external" href="http://www.jquery.com/" title="http://www.jquery.com/">jQuery</a> JavaScript library</li>
+</ul>
+
+<p>{{ HTML5ArticleTOC() }}</p>
+
+<p>{{ languages( { "zh-cn": "zh-cn/Using_files_from_web_applications", "ja": "ja/Using_files_from_web_applications" } ) }}</p>
diff --git a/files/de/web/api/filereader/index.html b/files/de/web/api/filereader/index.html
new file mode 100644
index 0000000000..b7c8668c3a
--- /dev/null
+++ b/files/de/web/api/filereader/index.html
@@ -0,0 +1,153 @@
+---
+title: FileReader
+slug: Web/API/FileReader
+translation_of: Web/API/FileReader
+---
+<div>{{APIRef("File API")}}</div>
+
+<p>Mit dem FileReader-Objekt können Webapplikationen den Inhalt von auf dem Computer des Benutzers gespeicherten Dateien (oder Rohdaten-Buffer) asynchron lesen. Mit {{domxref("File")}} oder {{domxref("Blob")}}-Objekten wird die zu lesende Datei oder die zu lesenden Daten spezifiziert.</p>
+
+<p>File Objekte können über ein {{domxref("FileList")}} Objekt erhalten werden, welches als Ergebnis einer Dateiauswahl durch einen Benutzer über das {{HTMLElement("input")}} Element zurückgegeben wird. Weitere mögliche Quellen sind drag and drop Ereignisse über ein <a href="/en-US/docs/Web/API/DataTransfer"><code>DataTransfer</code></a> Objekt oder über die <code>mozGetAsFile()</code> API des {{domxref("HTMLCanvasElement")}}.</p>
+
+<h2 id="Konstruktor">Konstruktor</h2>
+
+<pre class="syntaxbox">FileReader FileReader();</pre>
+
+<p>Im Kapitel <a href="/de/docs/Zugriff_auf_Dateien_von_Webapplikationen">Zugriff auf Dateien von Webapplikationen</a> finden sich weitere Details und Beispiele.</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt>{{domxref("FileReader.error")}} {{readonlyinline}}</dt>
+ <dd>Ein {{domxref("DOMError")}}, der den Fehler angibt, welcher beim Lesen der Datei entstanden ist.</dd>
+ <dt>{{domxref("FileReader.readyState")}} {{readonlyinline}}</dt>
+ <dd>Eine Zahl, welche den Status des <code>FileReader</code> angibt. Möglich ist eine der {{anch("Status-Konstanten")}}.</dd>
+ <dt>{{domxref("FileReader.result")}} {{readonlyinline}}</dt>
+ <dd>Der Inhalt der Datei. Diese Eigenschaft ist nur gültig, nachdem der Lesevorgang abgeschlossen ist. Das Format der Daten hängt davon ab, welche der Methoden zum Starten des Lesevorgangs benutzt wurde.</dd>
+</dl>
+
+<h3 id="Event-Handler">Event-Handler</h3>
+
+<dl>
+ <dt>{{domxref("FileReader.onabort")}}</dt>
+ <dd>Ein Handler für das {{event("abort")}}-Event. Dieser Event wird gefeuert, wenn der Lesevorgang abgebrochen wird.</dd>
+ <dt>{{domxref("FileReader.onerror")}}</dt>
+ <dd>Ein Handler für das {{event("error")}}-Event. Dieser Event wird gefeuert, wenn beim Lesevorgang ein Fehler ensteht.</dd>
+ <dt>{{domxref("FileReader.onload")}}</dt>
+ <dd>Ein Handler für das {{event("load")}}-Event. Dieser Event wird gefeuert, wenn der Lesevorgang erfolgreich beendet wird.</dd>
+ <dt>{{domxref("FileReader.onloadstart")}}</dt>
+ <dd>Ein Handler für das {{event("loadstart")}}-Event. Dieser Event wird gefeuert, wenn der Lesevorgang gestartet wird.</dd>
+ <dt>{{domxref("FileReader.onloadend")}}</dt>
+ <dd>Ein Handler für das {{event("loadend")}}-Event. Dieser Event wird gefeuert, wenn der Lesevorgang beendet wird (entweder erfolgreich oder fehlerhaft).</dd>
+ <dt>{{domxref("FileReader.onprogress")}}</dt>
+ <dd>Ein Handler für das {{event("progress")}}-Event. Dieser Event wird gefeuert, während ein {{domxref("Blob")}}-Inhalt gelesen wird.</dd>
+</dl>
+
+<div class="note">
+<p>Hinweis: Da<code>FileReader</code> von {{domxref("EventTarget")}} erbt, kann auf alle diese Events auch mit der {{domxref("EventTarget.addEventListener()","addEventListener")}} Methode gehört werden.</p>
+</div>
+
+<h3 id="Status-Konstanten">Status-Konstanten</h3>
+
+<ul>
+ <li><code>EMPTY</code> : <code>0</code> : Noch keine Daten geladen.</li>
+ <li><code>LOADING</code> : <code>1</code> : Daten werden geladen.</li>
+ <li><code>DONE</code> : <code>2</code> : Der Lesevorgang ist abgeschlossen.</li>
+</ul>
+
+<h2 id="Methoden">Methoden</h2>
+
+<dl>
+ <dt>{{domxref("FileReader.abort()")}}</dt>
+ <dd>Bricht den Lesevorgang ab. Nach dem Return wird der <code>readyState</code> zu <code>DONE</code>.</dd>
+ <dt>{{domxref("FileReader.readAsArrayBuffer()")}} {{gecko_minversion_inline("7.0")}}</dt>
+ <dd>Startet den Lesevorgang und liest den spezifierten {{domxref("Blob")}} und, wenn der Lesevorgang abgeschlossen ist, enthält <code>result</code> ein {{domxref("ArrayBuffer")}} mit den Daten.</dd>
+ <dt>{{domxref("FileReader.readAsBinaryString()")}}</dt>
+ <dd>Startet den Lesevorgang und liest den spezifierten {{domxref("Blob")}} und, wenn der Lesevorgang abgeschlossen ist, enthält <code><font face="Courier New">result</font></code> die rohen Binär-Daten als String.</dd>
+ <dt>{{domxref("FileReader.readAsDataURL()")}}</dt>
+ <dd>Startet den Lesevorgang und liest den spezifierten {{domxref("Blob")}} und, wenn der Lesevorgang abgeschlossen ist, enthält <code><font face="Courier New">result</font></code> die Daten als Data-URL.</dd>
+ <dt>{{domxref("FileReader.readAsText()")}}</dt>
+ <dd>Startet den Lesevorgang und liest den spezifierten {{domxref("Blob")}} und , wenn der Lesevorgang abgeschlossen ist, enthält <code><font face="Courier New">result</font></code> die Daten als Text-String.</dd>
+</dl>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("File API", "#FileReader-interface", "FileReader")}}</td>
+   <td>{{Spec2("File API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatiblität">Browser-Kompatiblität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basissupport</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[1]</sup></td>
+   <td>7</td>
+   <td>10<sup>[2]</sup></td>
+   <td>12.02<sup>[3]</sup></td>
+   <td>6.0.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basissupport</td>
+   <td>32</td>
+   <td>3</td>
+   <td>10</td>
+   <td>11.5</td>
+   <td>6.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Vor Gecko 2.0 beta 7 (Firefox 4.0 beta 7), waren alle {{domxref("Blob")}} parameters stattdessen {{domxref("File")}} Parameter; Das wurde aktualisiert um die Spezifikation zu erfüllen. Vor Gecko 13.0 {{geckoRelease("13.0")}} gab die <code>FileReader.error</code> Eigenschaft ein  {{domxref("FileError")}} Objekt zurück. Dieses Interface wurde wurde entfernt und <code>FileReader.error</code> gibt nun einen {{domxref("DOMError")}} Objekt zurück, wie in dem aktuellen FileAPI Entwurf vorgesehen.</p>
+
+<p>[2] IE9 hat ein <a href="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info">File API Lab</a>.</p>
+
+<p>[3] Opera hat <a href="http://www.opera.com/docs/specs/presto28/file/">partiellen Support</a> in 11.1.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Zugriff_auf_Dateien_von_Webapplikationen">Zugriff auf Dateien von Webapplikationen</a></li>
+ <li>{{domxref("File")}}</li>
+ <li>{{domxref("Blob")}}</li>
+ <li><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMFileReader">nsIDOMFileReader</a> - Für addons/privileged scope</li>
+</ul>
diff --git a/files/de/web/api/filereader/onload/index.html b/files/de/web/api/filereader/onload/index.html
new file mode 100644
index 0000000000..95dda3e59f
--- /dev/null
+++ b/files/de/web/api/filereader/onload/index.html
@@ -0,0 +1,24 @@
+---
+title: onload
+slug: Web/API/FileReader/onload
+tags:
+  - Dateien
+  - Lesen
+translation_of: Web/API/FileReader/onload
+---
+<p>Das onload Event wird ausgelöst, wenn der Inhalt von <a href="/en-US/docs/Web/API/FileReader/readAsArrayBuffer">readAsArrayBuffer</a>, <a href="/en-US/docs/Web/API/FileReader/readAsBinaryString">readAsBinaryString</a>, <a href="/en-US/docs/Web/API/FileReader/readAsDataURL">readAsDataURL</a> or <a href="/en-US/docs/Web/API/FileReader/readAsText">readAsText</a> verfügbar ist.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush:js; line-numbers  language-js"><code class="language-js">// Callback von einem &lt;input type="file" onchange="onChange(event)"&gt;
+function onChange(event) {
+  var file = event.target.files[0];
+  var reader = new FileReader();
+  reader.onload = function(event) {
+    // Hier wird der Text der Datei ausgegeben
+    console.log(event.target.result)
+  };
+
+  reader.readAsText(file);
+}
+</code></pre>
diff --git a/files/de/web/api/formdata/formdata/index.html b/files/de/web/api/formdata/formdata/index.html
new file mode 100644
index 0000000000..40ce36053f
--- /dev/null
+++ b/files/de/web/api/formdata/formdata/index.html
@@ -0,0 +1,184 @@
+---
+title: FormData()
+slug: Web/API/FormData/FormData
+translation_of: Web/API/FormData/FormData
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>Der <code><strong>FormData()</strong></code> Konstruktor erzeugt ein neues {{domxref("FormData")}}-Objekt.</p>
+
+<div class="note">
+<p><span style="font-size: 14px;"><strong>Anmerkung: </strong>Dieses Feature is verfügbar auf </span><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js"><code>var formData = new FormData(</code><code>form</code><code>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parameter</h3>
+
+<dl>
+ <dt><code>form </code>{{optional_inline}}</dt>
+ <dd>Ein HTML {{HTMLElement("form")}}-Element — wenn angegeben, wird  das neue {{domxref("FormData")}}-Objekt mit den aktuellen Schlüssel/Wert-Paaren des form's gefüllt, wobei "name" der Schlüssel und "value" der Wert. Mitgeschickte Dateien werden ebenfalls codiert.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<p>So erzeugt man ein neues <code>FormData</code>-Objekt:</p>
+
+<pre class="brush: js">var formData = new FormData(); // leer</pre>
+
+<p>Nun kann man ein Schlüssel/Wert-Paar hinzufügen mit {{domxref("FormData.append")}}:</p>
+
+<pre class="brush: js">formData.append('username', 'Chris');
+</pre>
+
+<p>Oder man gibt das optionale <code><em>form</em></code> Argument an, um es direkt mit dessen Werten zu füllen:</p>
+
+<pre class="brush: html">&lt;form id="myForm" name="myForm"&gt;
+  &lt;div&gt;
+    &lt;label for="username"&gt;Enter name:&lt;/label&gt;
+    &lt;input type="text" id="username" name="username"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="useracc"&gt;Enter account number:&lt;/label&gt;
+    &lt;input type="text" id="useracc" name="useracc"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="userfile"&gt;Upload file:&lt;/label&gt;
+    &lt;input type="file" id="userfile" name="userfile"&gt;
+  &lt;/div&gt;
+&lt;input type="submit" value="Submit!"&gt;
+&lt;/form&gt;
+</pre>
+
+<div class="note">
+<p><strong>Anmerkung</strong>: Alle input-Elemente haben das 'name'-Attribut. Das ist notwendig um die Werte auszuwerten.</p>
+</div>
+
+<pre class="brush: js">var myForm = document.getElementById('myForm');
+formData = new FormData(myForm);</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#dom-formdata','FormData()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>7</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>12</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>append with filename</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("22.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>available in web workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("39.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>3.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>
+    <p>12</p>
+   </td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>append with filename</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Available in web workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("39.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<div class="note">
+<p><strong>Note</strong>: XHR in Android 4.0 sends empty content for FormData with blob.</p>
+</div>
+
+<h3 id="Gecko_notes">Gecko notes</h3>
+
+<p>Prior to Gecko 7.0 {{geckoRelease("7.0")}}, if you specified a {{domxref("Blob")}} as the data to append to the object, the filename reported in the "Content-Disposition" HTTP header was an empty string; this resulted in errors being reported by some servers. Starting in Gecko 7.0, the filename "blob" is sent.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
+</div>
diff --git a/files/de/web/api/formdata/get/index.html b/files/de/web/api/formdata/get/index.html
new file mode 100644
index 0000000000..1bcd503006
--- /dev/null
+++ b/files/de/web/api/formdata/get/index.html
@@ -0,0 +1,145 @@
+---
+title: FormData.get()
+slug: Web/API/FormData/get
+translation_of: Web/API/FormData/get
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>Die <code><strong>get()</strong></code> Methode der {{domxref("FormData")}} Schnittstelle gibt die den ersten Wert, der dem gegebenen Schlüssel zugeordnet ist, aus dem <code>FormData</code> Objekt zurück. Wenn mehrere Werte zu erwarten sind und diese alle verwendet werden sollen, sollte stattdeessen die Methode {{domxref("FormData.getAll()","getAll()")}} verwendet werden.</p>
+
+<div class="note">
+<p><strong><font>Hinweis</font></strong>: Diese Methode ist in <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a> verfügbar.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">formData.get(name);</pre>
+
+<h3 id="append()_Parameters" name="append()_Parameters">Parameter</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Ein {{domxref("USVString")}}, der den Namen des abzurufenden Schlüssels repräsentiert.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein {{domxref("FormDataEntryValue")}}, der den Wert enthält.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>Die folgende Zeile erzeugt ein leeres <code>FormData</code> Objekt:</p>
+
+<pre class="brush: js">var formData = new FormData();</pre>
+
+<p>Wenn man zwei Werte als <code>benutzername</code> mit {{domxref("FormData.append")}} hinzufügt:</p>
+
+<pre class="brush: js">formData.append('benutzername', 'Chris');
+formData.append('benutzername', 'Bob');</pre>
+
+<p>Der folgende Aufruf der <code>get()</code> Funktion liefert dann nur den zuerst hinzugefügten Wert für <code>benutzername</code>:</p>
+
+<pre class="brush: js">formData.get('benutzername'); // Gibt "Chris" zurück</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#dom-formdata-get','get()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td><span class="short_text" id="result_box" lang="de"><span>Grundlegende Unterstützung</span></span></td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatGeckoDesktop('39.0')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Verfügbar in web workers</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatGeckoDesktop('39.0')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td><span class="short_text" id="result_box" lang="de"><span>Grundlegende Unterstützung</span></span></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>
+    <p>{{CompatVersionUnknown}}</p>
+   </td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+  </tr>
+  <tr>
+   <td>Verfügbar in web workers</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/de/web/api/formdata/getall/index.html b/files/de/web/api/formdata/getall/index.html
new file mode 100644
index 0000000000..09cdc69036
--- /dev/null
+++ b/files/de/web/api/formdata/getall/index.html
@@ -0,0 +1,74 @@
+---
+title: FormData.getAll()
+slug: Web/API/FormData/getAll
+translation_of: Web/API/FormData/getAll
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>Die <code><strong>getAll()</strong></code> Methode der  {{domxref("FormData")}} Schnittstelle gibt alle Werte zurück, die innerhalb eines <code>FormData</code> Objekts mit einem gegebenen Schlüssel assoziiert sind.</p>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Diese Methode ist in <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a> verfügbar.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">formData.getAll(name);</pre>
+
+<h3 id="append()_Parameters" name="append()_Parameters">Parameter</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Ein {{domxref("USVString")}}, der den Namen des Schlüssels darstellt, der abgerufen werden soll.</dd>
+</dl>
+
+<h3 id="Rückgabewerte">Rückgabewerte</h3>
+
+<p>Ein Array von {{domxref("FormDataEntryValue")}}s.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Die folgende Zeile erstellt ein leeres <code>FormData</code> Objekt:</p>
+
+<pre class="brush: js">var formData = new FormData();</pre>
+
+<p>Hinzufügen von zwei <code>username</code> Werten mit Hilfe von {{domxref("FormData.append")}}:</p>
+
+<pre class="brush: js">formData.append('username', 'Chris');
+formData.append('username', 'Bob');</pre>
+
+<p>Der darauffolgende Aufruf der <code>getAll()</code> Funktion gibt beide <code>username</code> Werte in einem Array zurück.:</p>
+
+<pre class="brush: js">formData.getAll('username'); // gibt ["Chris", "Bob"] zurück</pre>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#dom-formdata-getall','getAll()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+
+
+<p>{{Compat("api.FormData.getAll")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/de/web/api/formdata/index.html b/files/de/web/api/formdata/index.html
new file mode 100644
index 0000000000..3ff1becbcf
--- /dev/null
+++ b/files/de/web/api/formdata/index.html
@@ -0,0 +1,80 @@
+---
+title: FormData
+slug: Web/API/FormData
+tags:
+  - API
+  - FomData
+  - Interface
+  - Referenz
+  - XMLHttpRequest
+translation_of: Web/API/FormData
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>Das <strong><code>FormData</code></strong>-Interface ermöglicht das einfache Erstellen eines Objektes bestehend aus Schlüssel/Werte-Paaren, welche Formular-Felder und ihre Werte repräsentieren. Dieses Objekt kann leicht durch das Aufrufen der {{domxref("XMLHttpRequest.send()")}} Methode abgeschickt werden. Es verwendet das gleiche Format wie ein HTML-Formular, dessen Kodierung auf <code>"multipart/form-data"</code> gesetzt wurde.</p>
+
+<p>Ein Objekt, dass FormData implementiert, kann direkt in den {{jsxref("Statements/for...of", "for...of")}} Strukturen benutzt werden, statt {{domxref('FormData.entries()', 'entries()')}} zu verwenden: <code>for (var p of myFormData)</code> ist identisch zu <code>for (var p of myFormData.entries())</code>.</p>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Dieses Feature ist in  <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a> verfügbar.</p>
+</div>
+
+<h2 id="Konstruktor">Konstruktor</h2>
+
+<dl>
+ <dt>{{domxref("FormData.FormData","FormData()")}}</dt>
+ <dd>Erzeugt ein neues <code>FormData</code>-Objekt.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<dl>
+ <dt>{{domxref("FormData.append()")}}</dt>
+ <dd>Fügt den Wert an den Wert eines bestehenden Schlüssel/Wert-Paares in einem <code>FormData</code>-Objekt an, oder fügt den Schlüssel mit dem Wert hinzu hinzu, falls dieser nicht vorhanden ist.</dd>
+ <dt>{{domxref("FormData.delete()")}}</dt>
+ <dd>Löscht ein Schlüssel/Wert-Paar aus einem <code>FormData</code>-Objekt.</dd>
+ <dt>{{domxref("FormData.entries()")}}</dt>
+ <dd>Gibt einen {{jsxref("Iteration_protocols","iterator")}} zurück, welcher das Iterieren über alle Schlüssel/Wert-Paare ermöglicht.</dd>
+ <dt>{{domxref("FormData.get()")}}</dt>
+ <dd>Gibt den ersten Wert zurück, welcher dem gegebenen Schlüssel in dem <code>FormData</code>-Objekt zugeordnet ist.</dd>
+ <dt>{{domxref("FormData.getAll()")}}</dt>
+ <dd>Erstellt ein Array, welches alle dem gegebenen Schlüssel zugeordneten Werte enthält.</dd>
+ <dt>{{domxref("FormData.has()")}}</dt>
+ <dd>Gibt einen boolean zurück, welcher Auskunft über das Vorhandenseins des gegeben Schlüssels im <code>FormData</code>-Objekt gibt.</dd>
+ <dt>{{domxref("FormData.keys()")}}</dt>
+ <dd>Gibt einen {{jsxref("Iteration_protocols", "iterator")}} zurück, welcher das Iterieren über alle Schlüssel der Schlüssel/Wert-Paare ermöglicht.</dd>
+ <dt>{{domxref("FormData.set()")}}</dt>
+ <dd>Ersetzt den Wert für einen bestimmten Schlüssel im <code>FormData</code>-Objekt, oder legt das Schlüssel/Wert-Paar an, sollte der Schlüssel noch nicht existieren.</dd>
+ <dt>{{domxref("FormData.values()")}}</dt>
+ <dd>Gibt einen {{jsxref("Iteration_protocols", "iterator")}} zurück, welcher das Iterieren über alle Werte der Schlüsselpaare ermöglicht.</dd>
+</dl>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#interface-formdata','FormData')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>FormData definiert in XHR Spezifikation</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{Compat("api.FormData")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">XMLHttpRequest benutzen</a></li>
+ <li><a href="/en-US/docs/Web/API/FormData/Using_FormData_Objects">FormData-Objekte benutzen</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/de/web/api/fullscreenoptions/index.html b/files/de/web/api/fullscreenoptions/index.html
new file mode 100644
index 0000000000..a4e76273e3
--- /dev/null
+++ b/files/de/web/api/fullscreenoptions/index.html
@@ -0,0 +1,43 @@
+---
+title: FullscreenOptions
+slug: Web/API/FullscreenOptions
+tags:
+  - API
+  - Aufbau
+  - Bildschirm
+  - Einstellungen
+  - Full-screen
+  - Fullscreen API
+  - FullscreenOptionen
+  - Navigation
+  - Optionen
+  - Referenz
+  - UI
+  - Wörterbuch
+  - fullscreen
+translation_of: Web/API/FullscreenOptions
+---
+<p>{{APIRef("Fullscreen API")}}</p>
+
+<p><span class="seoSummary">Das FullscreenOptions-Wörterbuch wird verwendet, um Konfigurationsoptionen bereitzustellen, wenn {{DOMxRef ("Element.requestFullscreen", "requestFullscreen ()")}} für ein Element aufgerufen wird, um dieses Element in den Vollbildmodus zu versetzen.</span></p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt>{{DOMxRef("FullscreenOptions.navigationUI", "navigationUI")}}{{Optional_Inline}}</dt>
+ <dd>Eine Zeichenfolge, mit der gesteuert wird, ob die Elemente der Browser-Benutzeroberfläche im Vollbildmodus angezeigt werden sollen. Mit der Standardeinstellung "auto" kann der Browser diese Entscheidung treffen.</dd>
+</dl>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, lesen Sie bitte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und senden Sie uns eine Pull-Anfrage.</div>
+
+<p>{{Compat("api.FullscreenOptions")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Fullscreen_API">Fullscreen API</a></li>
+ <li><a href="/en-US/docs/Web/API/Fullscreen_API/Guide">Anleitung zur Vollbild-API</a></li>
+ <li>{{DOMxRef("Element.requestFullscreen()")}}</li>
+</ul>
diff --git a/files/de/web/api/gainnode/index.html b/files/de/web/api/gainnode/index.html
new file mode 100644
index 0000000000..fb5adeb75e
--- /dev/null
+++ b/files/de/web/api/gainnode/index.html
@@ -0,0 +1,134 @@
+---
+title: GainNode
+slug: Web/API/GainNode
+translation_of: Web/API/GainNode
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>Die <code>GainNode</code> Schnittstelle ermöglicht eine Verstärkung (engl. gain) eines Signals, was als veränderte Lautstärke wahrgenommen wird. Es handelt sich um ein {{domxref("AudioNode")}} audio-verarbeitendes Modul, das ein Eingabesignal mit einer gewissen Verstärkung (die auch negativ sein kann) versieht, und es an den Ausgang weiterleitet. Ein <code>GainNode</code> hat immer genau einen Eingang und einen Ausgang, beide mit derselben Anzahl an Kanälen.</p>
+</div>
+
+<p>Verstärkung ist ein Wert ohne Einheit, der sich über die Zeit ändert. Er wird mit allen zeitlich korrespondierenden Samples aller Eingangskanäle multipliziert, um das Signal zu verändern.  Ändert sich der Wert, wird der neue Wert durch einen "de-zippering" Algorithmus angewendet, um unästhetisches Klick-Artifakte im Signal zu vermeiden.</p>
+
+<p><img alt="The GainNode is increasing the gain of the output." src="https://mdn.mozillademos.org/files/5085/WebAudioGainNode.png" style="height: 116px; width: 774px;"></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Anzahl der Eingänge</th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Anzahl der Ausgänge</th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Kanalzählmethode</th>
+   <td><code>"max"</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Anzahl Kanäle</th>
+   <td><code>2</code> (not used in the default count mode)</td>
+  </tr>
+  <tr>
+   <th scope="row">Kanalinterpretation</th>
+   <td><code>"speakers"</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<p><em>Inherits properties from its parent, </em><em>{{domxref("AudioNode")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("GainNode.gain")}} {{readonlyinline}}</dt>
+ <dd>Ist ein <a href="/en-US/docs/Web/API/AudioParam#a-rate">a-rate</a> {{domxref("AudioParam")}} der das Ausmaß der Verstärkung angibt.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<p><em>Keine spezifischen Methoden; erbt die Methoden der Elternklasse , </em><em>{{domxref("AudioNode")}}</em>.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>{{page("/en-US/docs/Web/API/AudioContext.createGain","Example")}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#the-gainnode-interface', 'GainNode')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>33.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Die Web Audio API</a> benutzen</li>
+</ul>
diff --git a/files/de/web/api/gamepad_api/index.html b/files/de/web/api/gamepad_api/index.html
new file mode 100644
index 0000000000..d72bf51274
--- /dev/null
+++ b/files/de/web/api/gamepad_api/index.html
@@ -0,0 +1,95 @@
+---
+title: Gamepad API
+slug: Web/API/Gamepad_API
+tags:
+  - API
+  - Experimentel
+  - Spiele
+  - Übersicht
+translation_of: Web/API/Gamepad_API
+---
+<div>{{DefaultAPISidebar("Gamepad API")}}</div>
+
+<p>Die <strong>Gamepad API</strong> ist ein Weg für  Entwickler auf Eingaben eines Gamepads und anderen Spiels<span class="tlid-translation translation" lang="de"><span title="">teuergeräte in einer einfachen und </span></span>konsequenten Weise zuzugreifen und darauf zu reagieren. Es enthält drei Schnittstellen, zwei Ereignisse und eine Spezialfunktion, welche verwendet wird, um auf verbindende und trennende Gamepads zu reagieren, um auf andere Informationen des Gamepads selbst zuzugreifen und welche Knöpfe und andere Kontrollelemente gerade gedrückt werden.</p>
+
+<h2 id="Schnittstellen">Schnittstellen</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/Gamepad" title="The Gamepad interface of the Gamepad API defines an individual gamepad or other controller, allowing access to information such as button presses, axis positions, and id."><code>Gamepad</code></a></dt>
+ <dd>Repräsentiert ein Gamepad/Spiels<span class="tlid-translation translation" lang="de"><span title="">teuergerät</span></span>, dass mit dem Computer verbunden ist.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadButton" title="The GamepadButton interface defines an individual button of a gamepad or other controller, allowing access to the current state of different types of buttons available on the control device."><code>GamepadButton</code></a></dt>
+ <dd>Repräsentiert einen Knopf auf einem verbundenen Gamepad.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadEvent" title="The GamepadEvent interface of the Gamepad API contains references to gamepads connected to the system, which is what the gamepad events Window.gamepadconnected and Window.gamepaddisconnected are fired in response to."><code>GamepadEvent</code></a></dt>
+ <dd>Das Ereignisobjekt, dass Ereignisse auf dem zusammenhängenden Gamepad repräsentativ auslöst.</dd>
+</dl>
+
+<h3 id="Experimentelle_Gamepad_Erweiterungen">Experimentelle Gamepad Erweiterungen</h3>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadHapticActuator" title="The GamepadHapticActuator interface of the Gamepad API represents hardware in the controller designed to provide haptic feedback to the user (if available), most commonly vibration hardware."><code>GamepadHapticActuator</code></a></dt>
+ <dd>Repräsentiert Hardware im S<span class="tlid-translation translation" lang="de"><span title="">teuergeräte</span></span> welche zur Verfügungstellung von haptischen Feedback für den Nutzer (Falls vefügbar) konzipiert worden ist, meistens handelt es sich um Vibrationsmotoren.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadPose" title="The GamepadPose interface of the Gamepad API represents the pose of a WebVR controller at a given timestamp (which includes orientation, position, velocity, and acceleration information.)"><code>GamepadPose</code></a></dt>
+ <dd>Repräsentiert die Stellung des Steuergeräts (z.B. Position und Orientierung im dreidimensionalen Raum) im Falle eines <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API">WebVR</a>-Steuergeräts.</dd>
+</dl>
+
+<p>Siehe unter <a href="https://developer.mozilla.org/en-US/docs/Web/API/Gamepad#Experimental_extensions_to_Gamepad">Experimentelle Erweiterungen der Gamepad Schnittstelle</a> nach Schnittstellen, die den Zugriff auf die oben erwähnten experimentellen Erweiterungen ermöglichen.</p>
+
+<h3 id="Erweiterungen_für_anderen_Schnittstellen">Erweiterungen für anderen Schnittstellen</h3>
+
+<h4 id="Navigator">Navigator</h4>
+
+<dl>
+ <dt>{{domxref("Navigator.getGamepads()")}}</dt>
+ <dd>Eine Erweiterung für das {{domxref("Navigator")}} Objekt, das ein Array von {{domxref("Gamepad")}} Objeketen zurückschickt, jeweils eines für jedes verbundene Gamepad.</dd>
+</dl>
+
+<h4 id="Window_Ereignisse">Window Ereignisse</h4>
+
+<dl>
+ <dt>{{domxref("Window.ongamepadconnected")}}</dt>
+ <dd>Repräsentiert einen Ereignisabwickler, der ausgeführt wird, wenn ein Gamepad verbunden wird (Wenn das {{event('gamepadconnected')}} Ereignis auslöst).</dd>
+ <dt>{{domxref("Window.ongamepaddisconnected")}}</dt>
+ <dd>Repräsentiert einen  Ereignisabwickler, der ausgeführt wird, wenn ein Gamepad getrennt wird (Wenn das {{event('gamepaddisconnected')}} Ereignis auslöst).</dd>
+</dl>
+
+<h2 id="Einführung_und_Leitfäden">Einführung und Leitfäden</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API">Die Gamepad API verwenden</a></li>
+ <li><a href="/en-US/docs/Games/Techniques/Controls_Gamepad_API">Steuergeräte mithilfe der the Gamepad API implementieren</a></li>
+</ul>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("GamepadExtensions")}}</td>
+   <td>{{Spec2("GamepadExtensions")}}</td>
+   <td>Definiert die {{anch("Experimental Gamepad extensions")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Gamepad", "", "The Gamepad API specification")}}</td>
+   <td>{{Spec2("Gamepad")}}</td>
+   <td>Anfängliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+
+
+<p>{{Compat("api.Gamepad")}}</p>
+
+<h2 id="Siehe_weiters">Siehe weiters</h2>
+
+<ul>
+ <li><a class="external text" href="https://hacks.mozilla.org/2013/12/the-gamepad-api/" rel="nofollow">Die Gamepad API</a> von Ted Mielczarek und Robert Nyman</li>
+ <li><a href="http://luser.github.io/gamepadtest/">Einfache API Demonstrationswebseite</a> (<a href="https://github.com/luser/gamepadtest">Quelle</a>)</li>
+</ul>
diff --git a/files/de/web/api/geolocation/getcurrentposition/index.html b/files/de/web/api/geolocation/getcurrentposition/index.html
new file mode 100644
index 0000000000..52fd968a6b
--- /dev/null
+++ b/files/de/web/api/geolocation/getcurrentposition/index.html
@@ -0,0 +1,88 @@
+---
+title: Geolocation.getCurrentPosition()
+slug: Web/API/Geolocation/getCurrentPosition
+translation_of: Web/API/Geolocation/getCurrentPosition
+---
+<div>{{securecontext_header}}{{ APIRef("Geolocation API") }}</div>
+
+<p>Mit der Methode <strong><code>Geolocation.getCurrentPosition()</code></strong> kann die Position des Gerätes bestimmt werden.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">navigator.geolocation.getCurrentPosition(<var>success</var>[, <var>error</var>[, [<var>options</var>]])</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code><var>success</var></code></dt>
+ <dd>Eine Funktion, die nach erfolgreicher Positionsbestimmung aufgerufen wird. Sie erhält ein Objekt vom Typ {{domxref("GeolocationPosition")}} als Parameter.</dd>
+ <dt><code><var>error</var></code> {{optional_inline}}</dt>
+ <dd>Eine Funktion, die im Fehlerfall aufgerufen wird. Sie erhält ein Objekt vom Typ {{domxref("GeolocationPositionError")}} als Parameter.</dd>
+ <dt><code><var>options</var></code> {{optional_inline}}</dt>
+ <dd>Ein Objekt vom Typ {{domxref("PositionOptions")}}. Es enthält:
+ <ul>
+  <li><code>maximumAge</code>: Die Positionsbestimmung darf höchstens diese Zeit in Millisekunden zurückliegen. Falls 0, muss ein aktueller Wert ermittelt werden, falls <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>, sollte kein aktueller Wert ermittelt werden.<br>
+   Vorgabe: 0.</li>
+  <li><code>timeout</code>: Wartezeit in Millisekunden, bis die Positionsbestimmung abgebrochen und, so gegeben, die Funktion <code>error</code> aufgerufen wird. Bei <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code> keine Begrenzung.<br>
+   Vorgabe: <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>.</li>
+  <li><code>enableHighAccuracy</code>: <code>true</code>, um eine genauere Position zu ermitteln, jedoch möglicherweise zu Lasten von Wartezeit und Energieverbrauch.<br>
+   Vorgabe: <code>false</code>.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: js">var options = {
+  enableHighAccuracy: true,
+  timeout: 5000,
+  maximumAge: 0
+};
+
+function success(pos) {
+  var crd = pos.coords;
+
+  console.log('Your current position is:');
+  console.log(`Latitude : ${crd.latitude}`);
+  console.log(`Longitude: ${crd.longitude}`);
+  console.log(`More or less ${crd.accuracy} meters.`);
+}
+
+function error(err) {
+  console.warn(`ERROR(${err.code}): ${err.message}`);
+}
+
+navigator.geolocation.getCurrentPosition(success, error, options);
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Erste Spezifikation.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("api.Geolocation.getCurrentPosition")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Geolocation_API/Using">Die Benutzung der Geolocation-API</a></li>
+ <li>{{domxref("Navigator.geolocation")}}</li>
+</ul>
diff --git a/files/de/web/api/geolocation/index.html b/files/de/web/api/geolocation/index.html
new file mode 100644
index 0000000000..33c5695d42
--- /dev/null
+++ b/files/de/web/api/geolocation/index.html
@@ -0,0 +1,71 @@
+---
+title: Geolocation
+slug: Web/API/Geolocation
+tags:
+  - API
+  - Advanced
+  - Geolocation API
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - Secure context
+  - TopicStub
+translation_of: Web/API/Geolocation
+---
+<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div>
+
+<p>The <code><strong>Geolocation</strong></code> interface represents an object able to programmatically obtain the position of the device. It gives Web content access to the location of the device. This allows a Web site or app to offer customized results based on the user's location.</p>
+
+<p>An object with this interface is obtained using the {{domxref("navigator.geolocation")}} property implemented by the {{domxref("Navigator")}} object.</p>
+
+<div class="note">
+<p><strong>Note:</strong> For security reasons, when a web page tries to access location information, the user is notified and asked to grant permission. Be aware that each browser has its own policies and methods for requesting this permission.</p>
+</div>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>The <code>Geolocation</code> interface neither implements, nor inherits any property.</em></p>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em><em>The <code>Geolocation</code> interface doesn't inherit any </em>method</em>.</p>
+
+<dl>
+ <dt>{{domxref("Geolocation.getCurrentPosition()")}} {{securecontext_inline}}</dt>
+ <dd>Determines the device's current location and gives back a {{domxref("GeolocationPosition")}} object with the data.</dd>
+ <dt>{{domxref("Geolocation.watchPosition()")}} {{securecontext_inline}}</dt>
+ <dd>Returns a <code>long</code> value representing the newly established callback function to be invoked whenever the device location changes.</dd>
+ <dt>{{domxref("Geolocation.clearWatch()")}} {{securecontext_inline}}</dt>
+ <dd>Removes the particular handler previously installed using <code>watchPosition()</code>.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#geolocation_interface')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Geolocation")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+</ul>
diff --git a/files/de/web/api/globaleventhandlers/index.html b/files/de/web/api/globaleventhandlers/index.html
new file mode 100644
index 0000000000..db5dd7178f
--- /dev/null
+++ b/files/de/web/api/globaleventhandlers/index.html
@@ -0,0 +1,540 @@
+---
+title: GlobalEventHandlers
+slug: Web/API/GlobalEventHandlers
+tags:
+  - API
+  - DOM
+  - HTML-DOM
+  - Mixin
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/GlobalEventHandlers
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<div>Der <strong><code>GlobalEventHandlers </code></strong>Mixin beschreibt die Ereignisbehandler, die mehreren Interfaces gemeinsam sind, wie z.B. {{domxref("HTMLElement")}}, {{domxref("Document")}}, oder {{domxref("Window")}}. Jedes dieser Interfaces kann weitere Ereignisbehandler implementieren.</div>
+
+<p><code>GlobalEventHandlers</code> ist ein Mixin und kein Interface und es kann kein Objekt dieses Typs angelegt werden.</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<p>Die Ereignis-Eigenschaften der Form onXYZ werden auf dem {{domxref("GlobalEventHandlers")}}} definiert und durch {{domxref("HTMLElement")}}}, {{domxref("Document")}}, {{domxref("Window")}} und {{domxref("WorkerGlobalScope")}}} für Webworker implementiert.</p>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt>
+ <dd>Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("abort")}} ausgelöst wird.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt>
+ <dd>Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("blur")}} ausgelöst wird.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt>
+ <dd>Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("focus")}} ausgelöst wird.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt>
+ <dd>Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("focus")}} ausgelöst wird.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncancel")}}</dt>
+ <dd>Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("cancel")}} ausgelöst wird.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncanplay")}}</dt>
+ <dd>Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("canplay")}} ausgelöst wird.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncanplaythrough")}}</dt>
+ <dd>Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("canplaythrough")}} ausgelöst wird.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt>
+ <dd>Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("change")}} ausgelöst wird.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt>
+ <dd>Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("click")}} ausgelöst wird.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt>
+ <dd>Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("close")}} ausgelöst wird.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt>
+ <dd>Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("contextmenu")}} ausgelöst wird.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncuechange")}}</dt>
+ <dd>Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("cuechange")}} ausgelöst wird.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondblclick")}}</dt>
+ <dd>Ist ein {{domxref("EventHandler")}}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("dblclick")}} ausgelöst wird.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondrag")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("drag")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragend")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragend")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragenter")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragenter")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragexit")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragexit")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragleave")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragleave")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragover")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragover")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragstart")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragstart")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondrop")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("drop")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondurationchange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("durationchange")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onemptied")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("emptied")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onended")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("ended")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oninput")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("input")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oninvalid")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("invalid")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keydown")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keypress")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keyup")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onload")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("load")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onloadeddata")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadeddata")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onloadedmetadata")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadedmetadata")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onloadstart")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadstart")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousedown")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseenter")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseenter")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseleave")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseleave")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousemove")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseout")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseover")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseup")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousewheel")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousewheel")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandler.onmozfullscreenchange")}} {{non-standard_inline}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenchange")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandler.onmozfullscreenerror")}} {{non-standard_inline}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenerror")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpause")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pause")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onplay")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("play")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onplaying")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("playing")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerdown")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerdown")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointermove")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointermove")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerup")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerup")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointercancel")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointercancel")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerover")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerover")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerout")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerout")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerenter")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerevent")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerleave")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerleave")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerlockchange")}} {{experimental_inline}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerlockchange")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerlockerror")}} {{experimental_inline}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerlockerror")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onprogress")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("progress")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onratechange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("ratechange")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("reset")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("scroll")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onseeked")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("seeked")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onseeking")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("seeking")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("select")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onshow")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("show")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onsort")}} {{experimental_inline}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("sort")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onstalled")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("stalled")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("submit")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onsuspend")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("suspend")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontimeupdate")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("timeupdate")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onvolumechange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("volumechange")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontouchcancel")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchcancel")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontouchend")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchend")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontouchmove")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchmove")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontouchstart")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchstart")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onwaiting")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("waiting")}} event is raised.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface defines no method.</em></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Selection API",'', 'Extension to GlobalEventHandlers')}}</td>
+   <td>{{Spec2('Selection API')}}</td>
+   <td>Adds <code>onselectionchange.</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Lock', '#extensions-to-the-document-interface', 'Extension of Document')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>Adds <code>onpointerlockchange</code> and <code>onpointerlockerror</code> on {{domxref("Document")}}. It is experimentally implemented on <code>GlobalEventHandlers</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#globaleventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#globaleventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Added <code>onsort</code> since the {{SpecName("HTML5 W3C")}} snapshot.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#globaleventhandlers", "GlobalEventHandlers")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>GlobalEventHandlers</code> (properties where on the target before it).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>oncanplay</code>, <code>oncanplaythrough</code>, <code>ondurationchange</code>, <code>onemptied</code>, <code>onended</code>, <code>onloadeddata</code>, <code>onloadedmetadata</code>, <code>onloadstart</code>, <code>onpause</code>, <code>onplay</code>, <code>onplaying</code>, <code>onprogress</code>, <code>onratechange</code>, <code>onseeked</code>, <code>onseeking</code>, <code>onstalled</code>, <code>ontimeupdate</code>, <code>onvolumechange</code>, <code>onwaiting</code></td>
+   <td>{{CompatGeckoDesktop(1.9.1)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onsuspend</code></td>
+   <td>{{CompatGeckoDesktop(1.9.2)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ondrag</code>, <code>ondragend</code>, <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragover</code>, <code>ondragstart</code>, <code>ondrop</code></td>
+   <td>{{CompatGeckoDesktop(1.9.1)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onmouseenter</code>, <code>onmouseleave</code></td>
+   <td>{{CompatGeckoDesktop(10)}}</td>
+   <td>30.0</td>
+   <td>5.5</td>
+   <td>17</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ondragexit</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>oncancel</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onclose</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>oncuechange</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ondragexit</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onmousewheel</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onsort</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onmozfullscreenchange</code>, <code>onmozfullscreenerror</code> {{non-standard_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>onpointerlockchange</code>, <code>onpointerlockerror</code></td>
+   <td>{{CompatGeckoDesktop(10)}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onpointercancel</code>, <code>onpointerdown</code>, <code>onpointerup</code>, <code>onpointermove</code>, <code>onpointerout</code>, <code>onpointerover</code>, <code>onpointerenter</code>, <code>onpointerleave</code></td>
+   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>10</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onselectionchange</code></td>
+   <td>{{CompatGeckoDesktop(43)}}<sup>[4]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ontouchend</code>, <code>ontouchcancel</code>, <code>ontouchmove</code>, <code>ontouchstart</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ondrag</code>, <code>ondragend</code>, <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragover</code>, <code>ondragstart</code>, <code>ondrop</code></td>
+   <td>{{CompatGeckoMobile(1.9.1)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>oncanplay</code>, <code>oncanplaythrough</code>, <code>ondurationchange</code>, <code>onemptied</code>, <code>onended</code>, <code>onloadeddata</code>, <code>onloadedmetadata</code>, <code>onloadstart</code>, <code>onpause</code>, <code>onplay</code>, <code>onplaying</code>, <code>onprogress</code>, <code>onratechange</code>, <code>onseeked</code>, <code>onseeking</code>, <code>onstalled</code>, <code>ontimeupdate</code>, <code>onvolumechange</code>, <code>onwaiting</code></td>
+   <td>{{CompatGeckoMobile(1.9.1)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onmouseenter</code>, <code>onmouseleave</code></td>
+   <td>{{CompatGeckoMobile(10)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onsuspend</code></td>
+   <td>{{CompatGeckoMobile(1.9.2)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ondragexit</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>oncancel</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onclose</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>oncuechange</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ondragexit</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onmousewheel</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onsort</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onmozfullscreenchange</code>, <code>onmozfullscreenerror</code> {{non-standard_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>onpointerlockchange</code>, <code>onpointerlockerror</code></td>
+   <td>{{CompatGeckoMobile(10)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onpointercancel</code>, <code>onpointerdown</code>, <code>onpointerup</code>, <code>onpointermove</code>, <code>onpointerout</code>, <code>onpointerover</code>, <code>onpointerenter</code>, <code>onpointerleave</code></td>
+   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>10</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>onselectionchange</code></td>
+   <td>{{CompatGeckoMobile(43)}}<sup>[4]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ontouchend</code>, <code>ontouchcancel</code>, <code>ontouchmove</code>, <code>ontouchstart</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] In Gecko this is implemented as <code>onmozpointerlockchange</code>, <code>onmozpointerlockerror</code>.</p>
+
+<p>[2] In Blink this is implemented as <code>onwebkitpointerlockchange</code>, <code>onwebkitpointerlockerror</code>.</p>
+
+<p>[3] This is implemented behind the <code>dom.w3c_pointer_events.enabled</code> preference, defaulting to <code>false</code>.</p>
+
+<p>[4] This is implemented behind the <code>dom.select_events.enabled</code> preference, that default to <code>false</code>, except on Nightly.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Element")}}</li>
+</ul>
diff --git a/files/de/web/api/globaleventhandlers/onclick/index.html b/files/de/web/api/globaleventhandlers/onclick/index.html
new file mode 100644
index 0000000000..7b71eebd3a
--- /dev/null
+++ b/files/de/web/api/globaleventhandlers/onclick/index.html
@@ -0,0 +1,88 @@
+---
+title: Globaler Eventhandler onclick
+slug: Web/API/GlobalEventHandlers/onclick
+tags:
+  - API
+  - HTML DOM
+  - Méthode
+  - Referencen
+translation_of: Web/API/GlobalEventHandlers/onclick
+---
+<div>
+<div>{{ ApiRef("HTML DOM") }}</div>
+</div>
+
+<div> </div>
+
+<p>Die <strong>onclick</strong> Methode gibt den c<code>lick</code>-<code>E</code>venthandler des Elementes zurück.</p>
+
+<div class="note"><strong>Note:</strong> Wenn man das <code>click</code>-<code>E</code>vent zum auslösen einer Aktion benutzt, kann man auch in Erwägung ziehen das man die selbe Aktion auf das <code>keydown</code>-Event legt, das erlaubt den Nutzern ohne Maus oder Touchscreen die Aktion trotzdem auszuführen.</div>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>element</var>.onclick = <var>function</var>;
+</pre>
+
+<p><var><span style="font-style: normal;">Anstelle von </span>function</var> wird der Methodenname eingetragen, der meistens etwas mit der Funktion der Methode zu tun hat. Siehe "<a href="/en-US/docs/JavaScript/Guide/Functions">JavaScript Guide:Functions</a>".</p>
+
+<p>Das Eventobject besteht aus der spezielen Eventhandlermethode die ein {{domxref("MouseEvent")}} ist.</p>
+
+<h2 id="Example" name="Example">Beispiel</h2>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="de"&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8" /&gt;
+&lt;title&gt;onclick Event Beispiel&lt;/title&gt;
+&lt;script&gt;
+function initElement() {
+  var p = document.getElementById("foo");
+  // BEACHTE: showAlert(); oder showAlert(param); wird <u><strong style="color: red;">NICHT</strong></u> funktionieren.
+  // Es muss ein Methodenname und <u><strong style="color: red;">NICHT</strong></u> ein Methodenaufruf sein.
+  p.onclick = showAlert;
+};
+
+function showAlert() {
+  alert("onclick Event erkannt!")
+}
+&lt;/script&gt;
+&lt;style&gt;
+#foo {
+  border: solid blue 2px;
+}
+&lt;/style&gt;
+&lt;/head&gt;
+&lt;body onload="initElement();"&gt;
+&lt;span id="foo"&gt;Mein Eventelement&lt;/span&gt;
+&lt;p&gt;Klicke auf das obenstehende Element&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Oder man benutzt eine anonyme Methode, wie hier:</p>
+
+<pre class="brush:js">p.onclick = function() { alert("onclick Event erkannt!"); };
+</pre>
+
+<h2 id="Notes" name="Notes">Bemerkungen</h2>
+
+<p>Dieses Event wird ausgefürt wenn der Benutzer auf das Element klickt. Dieses Event wird nach dem Mousedown- und dem Mouseupevent ausgefürt.</p>
+
+<p>Nur ein Klickhandler kann zu einem Objekt hinzugefügt werden in dieser Variable gespeichert werden. Man kann auch die {{domxref("EventTarget.addEventListener()")}} Methode benutzen, seit es flexibel ist und teil der DOM Evente Spezifikation.</p>
+
+<h2 id="Specification" name="Specification">Spezifikation</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onclick','onclick')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>---</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/de/web/api/globaleventhandlers/onload/index.html b/files/de/web/api/globaleventhandlers/onload/index.html
new file mode 100644
index 0000000000..87f61085dd
--- /dev/null
+++ b/files/de/web/api/globaleventhandlers/onload/index.html
@@ -0,0 +1,150 @@
+---
+title: GlobalEventHandlers.onload
+slug: Web/API/GlobalEventHandlers/onload
+tags:
+  - API
+  - Event Handler
+  - GlobalEventHandlers
+  - HTML DOM
+  - Property
+  - Reference
+  - onload
+translation_of: Web/API/GlobalEventHandlers/onload
+---
+<div>{{ApiRef()}}</div>
+
+<div>Die <strong><code>onload</code></strong>-Eigenschaft der {{domxref("GlobalEventHandlers")}} ist ein Ereignis-Handler für das <code>load</code>-Ereignis eines {{domxref("Window")}}s, {{domxref("XMLHttpRequest")}}s, {{htmlelement("img")}}-Elements, etc., der aufgerufen wird, wenn die Ressource fertig geladen hat.</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="eval">window.onload = <em>funcRef</em>;
+</pre>
+
+<h3 id="Value">Value</h3>
+
+<p><code>funcRef</code> ist die Handler-Funktion, die aufgerufen wird, wenn das <code>load</code>-Ereignis des Windows eintritt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js">window.onload = function() {
+  init();
+  etwasAnderesTun();
+};
+</pre>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;onload-Test&lt;/title&gt;
+    // ES5
+    &lt;script&gt;
+      function load() {
+        console.log("load-Ereignis festgestellt!");
+      }
+      window.onload = load;
+    &lt;/script&gt;
+    // ES2015
+    &lt;script&gt;
+      const load = () =&gt; {
+        console.log("load-Ereignis festgestellt!");
+      }
+      window.onload = load;
+    &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;Das load-Ereignis tritt ein, wenn das Dokument fertig geladen ist!&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Anmerkungen">Anmerkungen</h2>
+
+<p>Das <code>load</code>-Ereignis tritt am Ende des Dokumentladeprozesses ein. An diesem Punkt befinden sich alle Objekte des Dokuments im DOM und alle Grafiken, Skripte, Links und Sub-Frames sind vollständig geladen.</p>
+
+<p>Es gibt zudem <a href="https://developer.mozilla.org/de/docs/Web/Events">Gecko-spezifische DOM-Ereignisse</a> wie <code>DOMContentLoaded</code> und <code>DOMFrameContentLoaded</code> (welches mit {{domxref("EventTarget.addEventListener()")}} gehandhabt werden kann), die eintreten, nachdem sich der DOM der Seite aufgebaut hat, aber nicht darauf warten, dass andere Ressourcen fertig geladen wurden.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "webappapis.html#handler-onload", "onload")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Anfängliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><code>DOMContentLoaded</code>-Ereignis in <a href="/en-US/docs/Listening_to_events_in_Firefox_extensions#Simple_DOM_events">Listening to events: Simple DOM events</a></li>
+ <li>IIFE <a href="https://en.wikipedia.org/wiki/Immediately-invoked_function_expression" rel="nofollow noreferrer">Immediately-invoked function expression</a></li>
+</ul>
diff --git a/files/de/web/api/globaleventhandlers/onresize/index.html b/files/de/web/api/globaleventhandlers/onresize/index.html
new file mode 100644
index 0000000000..b9866678c3
--- /dev/null
+++ b/files/de/web/api/globaleventhandlers/onresize/index.html
@@ -0,0 +1,77 @@
+---
+title: GlobalEventHandlers.onresize
+slug: Web/API/GlobalEventHandlers/onresize
+tags:
+  - API
+  - DOM
+  - Property
+translation_of: Web/API/GlobalEventHandlers/onresize
+---
+<p>{{ ApiRef() }}</p>
+
+<p>Die <strong>GlobalEventHandlers.onresize</strong> Property enthält einen {{domxref("EventHandler")}}, der ausgelöst wird, sobald ein {{event("resize")}}-Event empfangen wird.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="eval">window.onresize = <em>funcRef</em>;
+</pre>
+
+<h3 id="Parameters" name="Parameters">Parameter</h3>
+
+<ul>
+ <li><code>funcRef</code> ist eine Referenz auf eine Funktion.</li>
+</ul>
+
+<h2 id="Example" name="Example">Beispiel</h2>
+
+<pre>window.onresize = doFunc;
+</pre>
+
+<pre>&lt;html&gt;
+&lt;head&gt;
+
+&lt;title&gt;onresize Test&lt;/title&gt;
+
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;p&gt;Verändere die Größe des Browser Fensters, um den resize-Event auszulösen.&lt;/p&gt;
+
+&lt;p&gt;Window height: &lt;span id="height"&gt;&lt;/span&gt;&lt;/p&gt;
+&lt;p&gt;Window width: &lt;span id="width"&gt;&lt;/span&gt;&lt;/p&gt;
+
+&lt;script type="text/javascript"&gt;
+  var heightOutput = document.querySelector('#height');
+  var widthOutput = document.querySelector('#width');
+
+  function resize() {
+    heightOutput.textContent = window.innerHeight;
+    widthOutput.textContent = window.innerWidth;
+  }
+
+  window.onresize = resize;
+&lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Anmerkung</h2>
+
+<p>Das resize-Event wird ausgelöst nachdem die Größe des Fensters verändert wurde.</p>
+
+<h2 id="Specification" name="Specification">Spezifikation</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onresize','onresize')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/de/web/api/htmlcanvaselement/index.html b/files/de/web/api/htmlcanvaselement/index.html
new file mode 100644
index 0000000000..3083824dc8
--- /dev/null
+++ b/files/de/web/api/htmlcanvaselement/index.html
@@ -0,0 +1,242 @@
+---
+title: HTMLCanvasElement
+slug: Web/API/HTMLCanvasElement
+tags:
+  - API
+  - Canvas
+  - Graphiken
+  - WebGL
+translation_of: Web/API/HTMLCanvasElement
+---
+<div>
+<div>{{APIRef("Canvas API")}}</div>
+</div>
+
+<p>Das <strong><code>HTMLCanvasElement</code></strong> interface bietet Eigenschaften und Methoden zum Manipulieren des Layouts und der Darstellung des <code>&lt;canvas&gt;</code>-Elements. Das <code>HTMLCanvasElement</code> interface erbt außerdem Eigenschaften und Methoden des {{domxref("HTMLElement")}} interface.</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<p><em>Erbt Eigenschaften von seinem Elternelement, </em><em>{{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLCanvasElement.height")}}</dt>
+ <dd>Ein positiver <code>integer</code>, der das {{htmlattrxref("height", "canvas")}} HTML-Attribut des {{HTMLElement("canvas")}} Elements in CSS-Pixeln repräsentiert. Wenn nicht definiert oder wenn es auf einen nicht erlaubten Wert (z.B. einen negativen Wert) gesetzt wird, wird der Standardwert <strong>150</strong> verwendet.</dd>
+ <dt>{{domxref("HTMLCanvasElement.mozOpaque")}} {{non-standard_inline}}</dt>
+ <dd>Ein {{jsxref("Boolean")}}, der das {{htmlattrxref("moz-opaque", "canvas")}} HTML-Attribut des {{HTMLElement("canvas")}} Elements repräsentiert. Es sagt dem canvas, ob auf Transparenz verzichtet werden soll. Falls <code>true</code>, kann das Zeichnen auf dem canvas beschleunigt werden.</dd>
+ <dt>{{domxref("HTMLCanvasElement.width")}}</dt>
+ <dd>Ein positiver <code>integer</code>, der das {{htmlattrxref("width", "canvas")}} HTML-Attribut des {{HTMLElement("canvas")}} Elements in CSS-Pixeln anzeigt. Wenn nicht definiert oder wenn es auf einen nicht erlaubten Wert (z.B. einen negativen Wert) gesetzt wird, wird der Standardwert <strong>300</strong> verwendet.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<p><em>Erbt Eigenschaften von seinem Elternelement, </em><em>{{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLCanvasElement.captureStream()")}} {{experimental_inline}}</dt>
+ <dd>Gibt ein {{domxref("CanvasCaptureMediaStream")}} zurück, dieses ist ein Echtzeit-Video der Oberfläche des canvas.</dd>
+ <dt>{{domxref("HTMLCanvasElement.getContext()")}}</dt>
+ <dd>Gibt einen context des canvas zurück oder <code>null</code>, falls die context-ID nicht unterstützt wird. Ein context ermöglicht es, auf dem canvas zu zeichnen. Der Aufruf dieser Methode mit <code>"2d"</code> gibt ein {{domxref("CanvasRenderingContext2D")}} Objekt zurück, während er mit <code>"experimental-webgl"</code> oder <code>"webgl"</code> ein {{domxref("WebGLRenderingContext")}} Objekt zurückgibt. Dieser context ist nur bei Browsern möglich, die <a href="/en-US/docs/Web/WebGL">WebGL</a> unterstützen.</dd>
+ <dt>{{domxref("HTMLCanvasElement.toDataURL()")}}</dt>
+ <dd>Returns a data-URL containing a representation of the image in the format specified by the <code>type</code> parameter (defaults to <code>png</code>). The returned image is in a resolution of 96dpi.</dd>
+ <dt>{{domxref("HTMLCanvasElement.toBlob()")}}</dt>
+ <dd>Creates a {{domxref("Blob")}} object representing the image contained in the canvas; this file may be cached on the disk or stored in memory at the discretion of the user agent.</dd>
+ <dt>{{domxref("HTMLCanvasElement.transferControlToOffscreen()")}} {{experimental_inline}}</dt>
+ <dd>Transfers control to an {{domxref("OffscreenCanvas")}} object, either on the main thread or on a worker.</dd>
+ <dt>{{domxref("HTMLCanvasElement.mozGetAsFile()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Returns a {{domxref("File")}} object representing the image contained in the canvas; this file is a memory-based file, with the specified <code>name</code>. If <code>type</code> is not specified, the image type is <code>image/png</code>.</dd>
+</dl>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture DOM Elements', '#html-media-element-media-capture-extensions', 'HTMLCanvasElement')}}</td>
+   <td>{{Spec2('Media Capture DOM Elements')}}</td>
+   <td>Adds the method <code>captureStream()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#the-canvas-element", "HTMLCanvasElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>The method <code>getContext()</code> now returns a {{domxref("RenderingContext")}} rather than an opaque <code>object</code>.<br>
+    The methods <code>probablySupportsContext()</code>, <code>setContext()</code> and <code>transferControlToProxy()</code>have been added.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support (<code>2D</code> context)</td>
+   <td>4.0</td>
+   <td>{{CompatGeckoDesktop('1.9.2')}}</td>
+   <td>9.0</td>
+   <td>9.0 [1]</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>toBlob()</code></td>
+   <td>{{CompatNo}} (bug <a href="http://crbug.com/67587">67587</a>)</td>
+   <td>{{CompatGeckoDesktop('19')}} [2]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} (bug <a href="https://bugs.webkit.org/show_bug.cgi?id=71270">71270</a>)</td>
+  </tr>
+  <tr>
+   <td><code>probablySupportsContext()</code>,<br>
+    <code>setContext()</code>,<br>
+    <code>transferControlToProxy()</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mozGetAsFile()</code> {{non-standard_inline}} {{deprecated_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop('2')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>captureStream()</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop('41')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>transferControlToOffscreen()</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(44)}} [3]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support (<code>2D</code> context)</td>
+   <td>2.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.0 [1]</td>
+   <td>3.2</td>
+  </tr>
+  <tr>
+   <td><code>webgl</code> context</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}} as <code>experimental-webgl</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>toBlob()</code></td>
+   <td>{{CompatNo}} (bug <a href="http://crbug.com/67587">67587</a>)</td>
+   <td>{{CompatNo}} (bug <a href="http://crbug.com/67587">67587</a>)</td>
+   <td>{{CompatGeckoMobile('18')}} [2]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} (bug <a href="https://bugs.webkit.org/show_bug.cgi?id=71270">71270</a>)</td>
+  </tr>
+  <tr>
+   <td><code>probablySupportsContext()</code>,<br>
+    <code>setContext()</code>,<br>
+    <code>transferControlToProxy() </code>{{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mozGetAsFile()</code> {{non-standard_inline}} {{deprecated_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile('2')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>captureStream() </code>{{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile('41')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>transferControlToOffscreen()</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(44)}} [3]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Opera Mini 5.0 and later has partial support.</p>
+
+<p>[2] Support for the third parameter, has been added in Gecko 25 only: when used with the <code>"image/jpeg"</code> type, this argument specifies the image quality.</p>
+
+<p>[3] This feature is behind a feature preference setting. In about:config, set <code>gfx.offscreencanvas.enabled</code> to <code>true</code>.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>HTML element implementing this interface: {{HTMLElement("canvas")}}.</li>
+</ul>
diff --git a/files/de/web/api/htmlcanvaselement/todataurl/index.html b/files/de/web/api/htmlcanvaselement/todataurl/index.html
new file mode 100644
index 0000000000..c0a0a900d4
--- /dev/null
+++ b/files/de/web/api/htmlcanvaselement/todataurl/index.html
@@ -0,0 +1,206 @@
+---
+title: HTMLCanvasElement.toDataURL()
+slug: Web/API/HTMLCanvasElement/toDataURL
+tags:
+  - API
+  - Canvas
+  - DataURI erstellen
+  - HTMLCanvasElement
+  - Method
+  - Methode(2)
+  - Referenz
+translation_of: Web/API/HTMLCanvasElement/toDataURL
+---
+<div>
+<div>
+<div>{{APIRef("Canvas API")}}</div>
+</div>
+</div>
+
+<p>Die <strong><code>HTMLCanvasElement.toDataURL()</code></strong>-Methode gibt eine Repräsentation des Bildes als <a href="/en-US/docs/Web/HTTP/data_URIs">data URI</a> zurück. Das gewünschte Format wird mit den angegebenen Parametern definiert (standardmäßig <a href="https://en.wikipedia.org/wiki/Portable_Network_Graphics">PNG</a>). Das zurückgegebene Bild besitzt eine Auflösung von 96 dpi.</p>
+
+<ul>
+ <li>Wenn die Höhe oder die Breite des Canvas<font face="Consolas, Liberation Mono, Courier, monospace"> 0 </font>ist, wird der String <code>"data:,"</code> zurückgegeben.</li>
+ <li>Wenn die Art der Anfrage nicht <code>image/png</code> ist, aber der zurückgegebene Wert mit <code>data:image/png</code> beginnt, dann wird die Anfrage nicht unterstützt.</li>
+ <li>Chrome unterstützt außerdem den Typ <code>image/webp</code>.</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var><em>canvas</em>.toDataURL(<em>type</em>, <em>encoderOptions</em>);</var>
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>type</code> {{optional_inline}}</dt>
+ <dd>Ein Parameter vom Typ {{domxref("DOMString")}} bestimmt das Bild-Format. Der Standard type ist <code>image/png</code>.</dd>
+ <dt><code>encoderOptions</code> {{optional_inline}}</dt>
+ <dd>Ein Parameter vom Typ {{jsxref("Number")}} zwischen <code>0</code> und <code>1</code> gibt die Bildqualität an, wenn der Anfragetyp <code>image/jpeg </code>oder <code>image/webp ist</code>.<br>
+ Wenn das Argument irgend etwas anderes enthält, wird der Standardwert für die Bildqualität verwendet. Der Standardwert liegt bei <code>0.92</code>. Andere Argumente werden ignoriert.</dd>
+</dl>
+
+<h3 id="Rückgabewerte">Rückgabewerte</h3>
+
+<p>Ein Rückgabewert vom Typ {{domxref("DOMString")}} beinhaltet die angefragte <a href="/en-US/docs/Web/HTTP/data_URIs">data URI</a>.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Es ist folgendes {{HTMLElement("canvas")}} Element gegeben:</p>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="5" height="5"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>Mit den folgenden Zeilen erhalten Sie die data-URL des Canvas:</p>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var dataURL = canvas.toDataURL();
+console.log(dataURL);
+// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
+// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"
+</pre>
+
+<h3 id="Die_Bildqualität_für_jpegs_einstellen">Die Bildqualität für jpegs einstellen</h3>
+
+<pre class="brush: js">var fullQuality = canvas.toDataURL("image/jpeg", 1.0);
+// data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z"
+var mediumQuality = canvas.toDataURL("image/jpeg", 0.5);
+var lowQuality = canvas.toDataURL("image/jpeg", 0.1);
+</pre>
+
+<h3 id="Example:_Dynamically_change_images" name="Example:_Dynamically_change_images">Beispiel: Dynamisches Ändern von Bildern</h3>
+
+<p>Sie können diese Technik in Verbindung mit Maus-Events nutzen, um dynamisch Bilder abzuändern (in diesem Beispiel schwarz-weiß und farbig):</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;img class="schwarz-weiss" src="myPicture.png" alt="Beschreibung meines Bildes" /&gt;</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js;highlight:[33]">window.addEventListener("load", removeColors);
+
+function showColorImg() {
+  this.style.display = "none";
+  this.nextSibling.style.display = "inline";
+}
+
+function showGrayImg() {
+  this.previousSibling.style.display = "inline";
+  this.style.display = "none";
+}
+
+function removeColors() {
+  var aImages = document.getElementsByClassName("schwarz-weiss"),
+      nImgsLen = aImages.length,
+      oCanvas = document.createElement("canvas"),
+      oCtx = oCanvas.getContext("2d");
+  for (var nWidth, nHeight, oImgData, oGrayImg, nPixel, aPix, nPixLen, nImgId = 0; nImgId &lt; nImgsLen; nImgId++) {
+    oColorImg = aImages[nImgId];
+    nWidth = oColorImg.offsetWidth;
+    nHeight = oColorImg.offsetHeight;
+    oCanvas.width = nWidth;
+    oCanvas.height = nHeight;
+    oCtx.drawImage(oColorImg, 0, 0);
+    oImgData = oCtx.getImageData(0, 0, nWidth, nHeight);
+    aPix = oImgData.data;
+    nPixLen = aPix.length;
+    for (nPixel = 0; nPixel &lt; nPixLen; nPixel += 4) {
+      aPix[nPixel + 2] = aPix[nPixel + 1] = aPix[nPixel] = (aPix[nPixel] + aPix[nPixel + 1] + aPix[nPixel + 2]) / 3;
+    }
+    oCtx.putImageData(oImgData, 0, 0);
+    oGrayImg = new Image();
+    oGrayImg.src = oCanvas.toDataURL();
+    oGrayImg.onmouseover = showColorImg;
+    oColorImg.onmouseout = showGrayImg;
+    oCtx.clearRect(0, 0, nWidth, nHeight);
+    oColorImg.style.display = "none";
+    oColorImg.parentNode.insertBefore(oGrayImg, oColorImg);
+  }
+}</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentare</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Keine Änderungen seit letztem Schnappschuss, {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Schnappschuss von {{SpecName('HTML WHATWG')}} beinhaltet ursprüngliche Definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatiblität">Browser-Kompatiblität</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatChrome(4) }}</td>
+   <td>{{ CompatGeckoDesktop("1.9.2") }}</td>
+   <td>{{ CompatIE(9) }}</td>
+   <td>{{ CompatOpera(9) }}</td>
+   <td>{{ CompatSafari(4.0) }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatAndroid(3.2) }}</td>
+   <td>{{ CompatAndroid(18) }}</td>
+   <td>{{ CompatGeckoMobile("1.9.2") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatOpera(19) }}</td>
+   <td><span style="font-size: 12px; line-height: 18px;">{{ CompatSafari(3.0) }}</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_Also" name="See_Also">Schauen Sie auch unter</h2>
+
+<ul>
+ <li>Das Interface definiert, {{domxref("HTMLCanvasElement")}}.</li>
+ <li><a href="/en-US/docs/Web/HTTP/data_URIs">Data URIs</a> in der <a href="/en-US/docs/Web/HTTP">HTTP</a> Referenz.</li>
+</ul>
diff --git a/files/de/web/api/htmlcanvaselement/webglcontextcreationerror_event/index.html b/files/de/web/api/htmlcanvaselement/webglcontextcreationerror_event/index.html
new file mode 100644
index 0000000000..244bbcc76e
--- /dev/null
+++ b/files/de/web/api/htmlcanvaselement/webglcontextcreationerror_event/index.html
@@ -0,0 +1,132 @@
+---
+title: webglcontextcreationerror
+slug: Web/API/HTMLCanvasElement/webglcontextcreationerror_event
+tags:
+  - Event
+  - WebGL
+  - WebGLContextEvent
+translation_of: Web/API/HTMLCanvasElement/webglcontextcreationerror_event
+---
+<div>{{APIRef}}</div>
+
+<div>
+<p>Das <code><strong>webglcontextcreationerror</strong></code> Event der <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> wird ausgelöst, wenn der User-Agent nicht in der Lage ist einen {{domxref("WebGLRenderingContext")}} zu erzeugen.</p>
+
+<p>Das Event hat die Eigenschaft {{domxref("WebGLContextEvent.statusMessage")}}, die einen plattformabhängigen String mit weiteren Informationen über den Fehler enthält.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td>Bubbles</td>
+   <td>Ja</td>
+  </tr>
+  <tr>
+   <td>Cancelable</td>
+   <td>Ja</td>
+  </tr>
+  <tr>
+   <td>Zielobjekt</td>
+   <td>{{domxref("HTMLCanvasElement")}}</td>
+  </tr>
+  <tr>
+   <td>Interface</td>
+   <td>{{domxref("WebGLContextEvent")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+
+canvas.addEventListener("webglcontextcreationerror", function(e) {
+  console.log(e.statusMessage || "Unknown error");
+}, false);
+
+var gl = canvas.getContext("webgl");
+// logs statusMessage or "Unknown error" if unable to create WebGL context
+</pre>
+
+<h2 id="Vererbung">Vererbung</h2>
+
+<p>Das <code>webglcontextcreationerror</code> Event implementiert das {{domxref("WebGLContextEvent")}} Interface, welches die Eigenschaften und Methoden von {{domxref("Event")}} erbt.</p>
+
+<p>{{InheritanceDiagram('','','', 'WebGLContextEvent')}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Hinweis</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', '#5.15.4', 'webglcontextcreationerror')}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Grundlegende Definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("9")}}</td>
+   <td>{{CompatGeckoDesktop(49)}}</td>
+   <td>{{CompatIE("11")}}</td>
+   <td>{{CompatOpera("12")}}</td>
+   <td>{{CompatSafari("5.1")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>25</td>
+   <td>{{CompatGeckoMobile(49)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>12</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{domxref("WebGLContextEvent")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isContextLost()")}}</li>
+ <li>{{domxref("WEBGL_lose_context")}}, {{domxref("WEBGL_lose_context.loseContext()")}}, {{domxref("WEBGL_lose_context.restoreContext()")}}</li>
+</ul>
diff --git a/files/de/web/api/htmlcanvaselement/webglcontextlost_event/index.html b/files/de/web/api/htmlcanvaselement/webglcontextlost_event/index.html
new file mode 100644
index 0000000000..786d9e49b9
--- /dev/null
+++ b/files/de/web/api/htmlcanvaselement/webglcontextlost_event/index.html
@@ -0,0 +1,133 @@
+---
+title: webglcontextlost
+slug: Web/API/HTMLCanvasElement/webglcontextlost_event
+tags:
+  - Event
+  - WebGL
+  - WebGLContextEvent
+translation_of: Web/API/HTMLCanvasElement/webglcontextlost_event
+---
+<div>{{APIRef}}</div>
+
+<div>
+<p>Das <code><strong>webglcontextlost</strong></code> Event der <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> wird ausgelöst, wenn der User-Agent feststellt, dass der mit dem {{domxref("WebGLRenderingContext")}}-Objekt verknüpften Drawing Buffer verloren gegangen ist.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td>Bubbles</td>
+   <td>Ja</td>
+  </tr>
+  <tr>
+   <td>Cancelable</td>
+   <td>Ja</td>
+  </tr>
+  <tr>
+   <td>Zielobjekt</td>
+   <td>{{domxref("HTMLCanvasElement")}}</td>
+  </tr>
+  <tr>
+   <td>Interface</td>
+   <td>{{domxref("WebGLContextEvent")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Mit der Hilfe der {{domxref("WEBGL_lose_context")}} Extension kann das <code>webglcontextlost</code> Event simuliert werden:</p>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var gl = canvas.getContext("webgl");
+
+canvas.addEventListener("webglcontextlost", function(e) {
+  console.log(e);
+}, false);
+
+gl.getExtension('WEBGL_lose_context').loseContext();
+
+// "webglcontextlost" event is logged.</pre>
+
+<h2 id="Vererbung">Vererbung</h2>
+
+<p>Das <code>webglcontextlost</code> Event implementiert das {{domxref("WebGLContextEvent")}} Interface, welches die Eigenschaften und Methoden von {{domxref("Event")}} erbt.</p>
+
+<p>{{InheritanceDiagram('','','', 'WebGLContextEvent')}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Hinweis</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', '#5.15.2', 'webglcontextlost')}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Grundlegende Definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("9")}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatIE("11")}}</td>
+   <td>{{CompatOpera("12")}}</td>
+   <td>{{CompatSafari("5.1")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>25</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>12</td>
+   <td>8.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{domxref("WebGLContextEvent")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isContextLost()")}}</li>
+ <li>{{domxref("WEBGL_lose_context")}}, {{domxref("WEBGL_lose_context.loseContext()")}}, {{domxref("WEBGL_lose_context.restoreContext()")}}</li>
+</ul>
diff --git a/files/de/web/api/htmlcanvaselement/webglcontextrestored_event/index.html b/files/de/web/api/htmlcanvaselement/webglcontextrestored_event/index.html
new file mode 100644
index 0000000000..fc616cccdd
--- /dev/null
+++ b/files/de/web/api/htmlcanvaselement/webglcontextrestored_event/index.html
@@ -0,0 +1,135 @@
+---
+title: webglcontextrestored
+slug: Web/API/HTMLCanvasElement/webglcontextrestored_event
+tags:
+  - Event
+  - WebGL
+  - WebGLContextEvent
+translation_of: Web/API/HTMLCanvasElement/webglcontextrestored_event
+---
+<div>{{APIRef}}</div>
+
+<div>
+<p>Das <code><strong>webglcontextrestored</strong></code> Event der <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> wird ausgelöst, wenn der User-Agent den Drawing Buffer das  {{domxref("WebGLRenderingContext")}}-Objekts wiederhergestellt hat.</p>
+
+<p>Wenn der Context wiederhergestellt wurde, sind alle zuvor erzeugten WebGL-Ressourcen wie Texturen und Buffer nicht mehr gültig. Die WebGL-Applikation muss dann neu initalisiert und alle Ressourcen neu erstellt werden.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td>Bubbles</td>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <td>Cancelable</td>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <td>Zielobjekt</td>
+   <td>{{domxref("HTMLCanvasElement")}}</td>
+  </tr>
+  <tr>
+   <td>Interface</td>
+   <td>{{domxref("WebGLContextEvent")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Mit der Hilfe der {{domxref("WEBGL_lose_context")}} Extension kann das <code>webglcontextrestored</code> Event simuliert werden:</p>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var gl = canvas.getContext("webgl");
+
+canvas.addEventListener("webglcontextrestored", function(e) {
+  console.log(e);
+}, false);
+
+gl.getExtension('WEBGL_lose_context').restoreContext();
+
+// "webglcontextrestored" event is logged.</pre>
+
+<h2 id="Vererbung">Vererbung</h2>
+
+<p>Das <code>webglcontextrestored</code> Event implementiert das {{domxref("WebGLContextEvent")}} Interface, welches die Eigenschaften und Methoden von {{domxref("Event")}} erbt.</p>
+
+<p>{{InheritanceDiagram('','','', 'WebGLContextEvent')}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Hinweis</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', '#5.15.3', 'webglcontextrestored')}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Grundlegende Definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("9")}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatIE("11")}}</td>
+   <td>{{CompatOpera("12")}}</td>
+   <td>{{CompatSafari("5.1")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>25</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>12</td>
+   <td>8.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{domxref("WebGLContextEvent")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isContextLost()")}}</li>
+ <li>{{domxref("WEBGL_lose_context")}}, {{domxref("WEBGL_lose_context.loseContext()")}}, {{domxref("WEBGL_lose_context.restoreContext()")}}</li>
+</ul>
diff --git a/files/de/web/api/htmlcollection/index.html b/files/de/web/api/htmlcollection/index.html
new file mode 100644
index 0000000000..b09998b7d4
--- /dev/null
+++ b/files/de/web/api/htmlcollection/index.html
@@ -0,0 +1,70 @@
+---
+title: HTMLCollection
+slug: Web/API/HTMLCollection
+translation_of: Web/API/HTMLCollection
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>Die <strong><code>HTMLCollection</code></strong> repräsentiert eine generische Sammlung (Array-ähnliches Objekt) an Elementen (in Dokumentreihenfolge) und bietet Methoden und Eigenschaften zur Auswahl dieser aus einer Liste an.</p>
+
+<div class="note"><strong>Notiz:</strong> Diese Schnittstelle wird aus historischen Gründen <code>HTMLCollection</code> genannt (vor DOM4 konnten Sammlungen, die diese Schnittstelle implementierten, nur HTML-Elemente als Einträge haben).</div>
+
+<p>Eine <code>HTMLCollection</code> in der HTML DOM ist live; sie wird automatisch aktualisiert, wenn das zugrundeliegende Dokument verändert wird.</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt>{{domxref("HTMLCollection.length")}} {{readonlyInline}}</dt>
+ <dd>Gibt die Anzahl der Elemente in der Auflistung zurück.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<dl>
+ <dt>{{domxref("HTMLCollection.item()")}}</dt>
+ <dd>Gibt den spezifischen Knoten am angegebenen nullbasierten <code>index</code> in die Liste zurück.<br>
+ Gibt <code>null</code> zurück, wenn der <code>index</code> außerhalb des Bereichs ist.</dd>
+ <dt>{{domxref("HTMLCollection.namedItem()")}}</dt>
+ <dd>Gibt den spezifischen Knoten, dessen ID oder alternativ dessen Name auf die Zeichenkette (spezifiziert durch <code>name</code>) passt, zurück. Die Übereinstimmung des Namens wird nur als letzte Möglichkeit, nur in HTML, und nur, wenn das referenzierte Element das <code>name</code> Attribut unterstützt, durchgeführt.<br>
+ Gibt <code>null</code> zurück, wenn kein Code des angegebenen Namens existiert.</dd>
+</dl>
+
+<h2 id="Verwendung_in_JavaScript">Verwendung in JavaScript</h2>
+
+<p><code>HTMLCollection</code> setzt auch seine Member direkt als Eigenschaften von <code>name</code> und <code>index</code>. HTML IDs können Doppelpunkte und Punkte als gültige Zeichen beinhalten, was das Verwenden von Klammern für den Zugriff auf Eigenschaften erfordert. Derzeit erkennt <code>HTMLCollections </code>rein numerische IDs nicht, da sie einen Konflikt mit dem Array-ähnlichen Zugriff verursachen würden, obwohl HTML5 dies erlaubt.</p>
+
+<p>Zum Beispiel, unter der Annahme, dass es ein <code>&lt;form&gt;</code> Element im Dokument und die <code>id</code> <code>"myForm"</code> ist:</p>
+
+<pre class="brush:js">var elem1, elem2;
+
+// document.forms ist eine HTMLCollection
+
+elem1 = document.forms[0];
+elem2 = document.forms.item(0);
+
+alert(elem1 === elem2); // zeigt: "true"
+
+elem1 = document.forms.myForm;
+elem2 = document.forms.namedItem("myForm");
+
+alert(elem1 === elem2); // zeigt: "true"
+
+elem1 = document.forms["bennantes.Element.mit.Punkten"];</pre>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>Verschiedene Browser verhalten sich unterschiedlich, wenn es mehr als ein Element gibt, das auf die Zeichenkette passt, die als ein index (oder <code>namedItem</code>s Argument) verwendet wird. Firefox 8 verhält sich wie in DOM 2 and DOM4 angegeben, und gibt das erste passende Element zurück. WebKit Browser und Internet Explorer geben in diesem Fall eine andere <code>HTMLCollection</code> und Opera eine {{domxref("NodeList")}} aller passenden Elemente zurück.</p>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75708506" title="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75708506">DOM Level 2 HTML, Section 1.4, Miscellaneous Object Definitions</a></li>
+ <li><a href="http://www.w3.org/TR/domcore/#interface-htmlcollection" title="http://www.w3.org/TR/domcore/#interface-htmlcollection">DOM4: HTMLCollection</a></li>
+</ul>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{domxref("NodeList")}}</li>
+ <li>{{domxref("HTMLFormControlsCollection")}}, {{domxref("HTMLOptionsCollection")}}</li>
+</ul>
diff --git a/files/de/web/api/htmlformelement/elements/index.html b/files/de/web/api/htmlformelement/elements/index.html
new file mode 100644
index 0000000000..e5be5603ac
--- /dev/null
+++ b/files/de/web/api/htmlformelement/elements/index.html
@@ -0,0 +1,46 @@
+---
+title: HTMLFormElement.elements
+slug: Web/API/HTMLFormElement/elements
+translation_of: Web/API/HTMLFormElement/elements
+---
+<div>
+<div>APIRef("HTML DOM")</div>
+</div>
+
+<p>Die <code><strong>HTMLFormElement.elements</strong></code> Eigenschaft gibt eine domxref("HTMLFormControlsCollection") ( HTMLVersionInline(4) <code><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75708506">HTMLCollection</a></code>) aller im FORM element enthaltenen Formularsteuerelemente zurück, mit Ausnahme von <a href="/en-US/docs/HTML/Element/Input" title="input"><code>input</code></a> , die ein <code>type</code> attribute haben von <code>image</code>.</p>
+
+<p><span id="result_box" lang="de"><span>Sie können auf ein bestimmtes Element zugreifen, indem Sie entweder einen Index oder den Elementnamen oder die ID verwenden.</span></span></p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate"><em>nodeList</em> = <em>HTMLFormElement</em>.elements
+</pre>
+
+<h2 id="Example" name="Example">Beschreibung</h2>
+
+<pre class="brush:js notranslate">let inputs = document.getElementById("form1").elements;
+let inputByIndex = inputs[2];
+let inputByName = inputs["login"];
+</pre>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>SpecName('HTML WHATWG', '#dom-form-elements', 'HTMLFormElement.elements')</td>
+   <td> Spec2('HTML WHATWG')</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>SpecName("DOM2 HTML", "html.html#ID-76728479", "HTMLFormElement.elements")</td>
+   <td>Spec2("DOM2 HTML")</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/de/web/api/htmlformelement/index.html b/files/de/web/api/htmlformelement/index.html
new file mode 100644
index 0000000000..45fbc2e027
--- /dev/null
+++ b/files/de/web/api/htmlformelement/index.html
@@ -0,0 +1,260 @@
+---
+title: HTMLFormElement
+slug: Web/API/HTMLFormElement
+tags:
+  - API
+  - DOM
+  - HTML
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/HTMLFormElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>The <strong><code>HTMLFormElement</code></strong> interface provides methods to create and modify {{HTMLElement("form")}} elements.</p>
+
+<ul>
+ <li><strong>document.forms</strong> - returns an array of HTMLFormElement objects referencing all forms on the page.</li>
+ <li><strong>document.forms[index] </strong>- returns an HTMLFormElement object referencing the form at the specified index.</li>
+ <li><strong>document.forms['id'] </strong>- returns an HTMLFormElement object referencing the form with the specified id.</li>
+ <li><strong>document.forms['name'] </strong>- returns an HTMLFormElement object referencing the form with the specified name.</li>
+</ul>
+
+<p>{{InheritanceDiagram(600,120)}}</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>This interface also inherits properties from its parent, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLFormElement.elements")}}{{ReadOnlyInline}}</dt>
+ <dd>A {{domxref("HTMLFormControlsCollection")}} holding all form controls belonging to this form element.</dd>
+ <dt>{{domxref("HTMLFormElement.length")}}{{ReadOnlyInline}}</dt>
+ <dd>A <code>long</code> reflecting  the number of controls in the form.</dd>
+ <dt>{{domxref("HTMLFormElement.name")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("name", "form") }} HTML attribute, containing the name of the form.</dd>
+ <dt>{{domxref("HTMLFormElement.method")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("method", "form") }} HTML attribute, indicating the HTTP method used to submit the form. Only specified values can be set.</dd>
+ <dt>{{domxref("HTMLFormElement.target")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("target", "form") }} HTML attribute, indicating where to display the results received from submitting the form.</dd>
+ <dt>{{domxref("HTMLFormElement.action")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("action", "form") }} HTML attribute, containing the URI of a program that processes the information submitted by the form.</dd>
+ <dt>{{domxref("HTMLFormElement.encoding")}} or {{domxref("HTMLFormElement.enctype")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("enctype", "form") }} HTML attribute, indicating the type of content that is used to transmit the form to the server. Only specified values can be set. The two methods are synonyms.</dd>
+ <dt>{{domxref("HTMLFormElement.acceptCharset")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("accept-charset", "form") }} HTML attribute, representing the character encoding that the server accepts.</dd>
+ <dt>{{domxref("HTMLFormElement.autocomplete")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("autocomplete", "form") }} HTML attribute, indicating whether the controls in this form can have their values automatically populated by the browser.</dd>
+ <dt>{{domxref("HTMLFormElement.noValidate")}}</dt>
+ <dd>A {{jsxref("Boolean")}} reflecting the value of the form's  {{ htmlattrxref("novalidate", "form") }} HTML attribute, indicating whether the form should not be validated.</dd>
+</dl>
+
+<p>Named inputs are added to their owner form instance as properties, and can overwrite native properties if they share the same name (eg a form with an input named <code>action</code> will have its <code>action</code> property return that input instead of the form's {{ htmlattrxref("action", "form") }} HTML attribute).</p>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface also inherits methods from its parent, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLFormElement.submit()")}}</dt>
+ <dd>Submits the form to the server.</dd>
+ <dt>{{domxref("HTMLFormElement.reset()")}}</dt>
+ <dd>Resets the form to its initial state.</dd>
+ <dt>{{domxref("HTMLFormElement.checkValidity()")}}</dt>
+ <dd>Returns <code>true</code> if the element's child controls are subject to constraint validation and satisfy those contraints; returns <code>false</code> if some controls do not satisfy their constraints. Fires an event named {{event("invalid")}} at any control that does not satisfy its constraints; such controls are considered invalid if the event is not canceled. It is up to the programmer to decide how to respond to <code>false</code>.</dd>
+ <dt>{{domxref("HTMLFormElement.reportValidity()")}}</dt>
+ <dd>Returns <code>true</code> if the element's child controls satisfy their validation constraints. When <code>false</code> is returned, cancelable {{Event("invalid")}} events are fired for each invalid child and validation problems are reported to the user.</dd>
+ <dt>{{domxref("HTMLFormElement.requestAutocomplete()")}} {{obsolete_inline}}</dt>
+ <dd>Triggers a native browser interface to assist the user in completing the fields which have an <a href="https://html.spec.whatwg.org/#autofill-field-name">autofill field name</a> value that is not <code>off</code> or <code>on</code>. The form will receive an event once the user has finished with the interface, the event will either be {{event("autocomplete")}} when the fields have been filled or {{event("autocompleteerror")}} when there was a problem. <strong>This method has been removed from Chrome and Firefox — see {{bug(1270740)}} for background information on why.</strong></dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>Create a new form element, modify its attributes and submit it:</p>
+
+<pre class="brush: js">var f = document.createElement("form");// Create a form
+document.body.appendChild(f);          // Add it to the document body
+f.action = "/cgi-bin/some.cgi";        // Add action and method attributes
+f.method = "POST"
+f.submit();                            // Call the form's submit method
+</pre>
+
+<p>Extract information from a form element and set some of its attributes:</p>
+
+<pre class="brush: html">&lt;form name="formA" id="formA" action="/cgi-bin/test" method="POST"&gt;
+ &lt;p&gt;Click "Info" for form details; "Set" to change settings.&lt;/p&gt;
+ &lt;p&gt;
+  &lt;input type="button" value="info" onclick="getFormInfo();"&gt;
+  &lt;input type="button" value="set"  onclick="setFormInfo(this.form);"&gt;
+  &lt;input type="reset" value="reset"&gt;&lt;br&gt;
+  &lt;textarea id="tex" style="height:15em; width:20em"&gt;&lt;/textarea&gt;
+ &lt;/p&gt;
+&lt;/form&gt;
+
+&lt;script type="text/javascript"&gt;
+  function getFormInfo(){
+    var info;
+    var f = document.forms["formA"]; //Get a reference to the form via id.
+    info = "elements: " + f.elements     + "\n"
+         + "length: "   + f.length       + "\n"
+         + "name: "     + f.name         + "\n"
+         + "charset: "  + f.acceptCharset+ "\n"
+         + "action: "   + f.action       + "\n"
+         + "enctype: "  + f.enctype      + "\n"
+         + "encoding: " + f.encoding     + "\n"
+         + "method: "   + f.method       + "\n"
+         + "target: "   + f.target;
+    document.forms["formA"].elements['tex'].value = info;
+  }
+  function setFormInfo(f){ //Argument is a reference to the form.
+    f.method = "GET";
+    f.action = "/cgi-bin/evil_executable.cgi";
+    f.name   = "totally_new";
+  }
+&lt;/script&gt;
+</pre>
+
+<p>Submit a form in a <a href="/en-US/docs/Web/API/Window/open">popup window</a>:</p>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
+&lt;title&gt;MDN Example&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+function popupSend (oFormElement) {
+  if (oFormElement.method &amp;&amp; oFormElement.method.toLowerCase() !== "get") {
+    console.error("This script supports the GET method only.");
+    return;
+  }
+  var oField, sFieldType, nFile, sSearch = "";
+  for (var nItem = 0; nItem &lt; oFormElement.elements.length; nItem++) {
+    oField = oFormElement.elements[nItem];
+    if (!oField.hasAttribute("name")) { continue; }
+    sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
+    if (sFieldType === "FILE") {
+      for (nFile = 0; nFile &lt; oField.files.length; sSearch += "&amp;" + escape(oField.name) + "=" + escape(oField.files[nFile++].name));
+    } else if ((sFieldType !== "RADIO" &amp;&amp; sFieldType !== "CHECKBOX") || oField.checked) {
+      sSearch += "&amp;" + escape(oField.name) + "=" + escape(oField.value);
+    }
+  }
+  open(oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&amp;/, "?")), "submit-" + (oFormElement.name || Math.floor(Math.random() * 1e6)), "resizable=yes,scrollbars=yes,status=yes");
+}
+&lt;/script&gt;
+
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;form name="yourForm" action="test.php" method="get" onsubmit="popupSend(this); return false;"&gt;
+  &lt;p&gt;First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
+  Last name: &lt;input type="text" name="lastname" /&gt;&lt;br /&gt;
+  Password: &lt;input type="password" name="pwd" /&gt;&lt;br /&gt;
+  &lt;input type="radio" name="sex" value="male" /&gt; Male &lt;input type="radio" name="sex" value="female" /&gt; Female&lt;/p&gt;
+  &lt;p&gt;&lt;input type="checkbox" name="vehicle" value="Bike" /&gt;I have a bike&lt;br /&gt;
+  &lt;input type="checkbox" name="vehicle" value="Car" /&gt;I have a car&lt;/p&gt;
+  &lt;p&gt;&lt;input type="submit" value="Submit" /&gt;&lt;/p&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h3 id="Submitting_forms_and_uploading_files_using_XMLHttpRequest">Submitting forms and uploading files using <code>XMLHttpRequest</code></h3>
+
+<p>If you want to know how to serialize and submit a form using the {{domxref("XMLHttpRequest")}} API, please read <a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">this paragraph</a>.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "forms.html#the-form-element", "HTMLFormElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>The following method has been added: <code>requestAutocomplete()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "forms.html#the-form-element", "HTMLFormElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>The elements properties returns an {{domxref("HTMLFormControlsCollection")}} instead of a raw {{domxref("HTMLCollection")}}. This is mainly a technical change. The following method has been added: <code>checkValidity()</code>. The following properties have been added: <code>autocomplete</code>, <code>noValidate</code>, and <code>encoding</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-40002357', 'HTMLFormElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-40002357', 'HTMLFormElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] In Firefox 56, the implementation has been updated so that the <code>action</code> property returns the correct form submission URL, as per spec ({{bug(1366361)}}).</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The HTML element implementing this interface: {{ HTMLElement("form") }}.</li>
+</ul>
diff --git a/files/de/web/api/htmlformelement/submit_event/index.html b/files/de/web/api/htmlformelement/submit_event/index.html
new file mode 100644
index 0000000000..722fba4d46
--- /dev/null
+++ b/files/de/web/api/htmlformelement/submit_event/index.html
@@ -0,0 +1,76 @@
+---
+title: submit
+slug: Web/API/HTMLFormElement/submit_event
+tags:
+  - Event
+  - submit
+translation_of: Web/API/HTMLFormElement/submit_event
+---
+<p>Das <code>submit</code> Event tritt ein, wenn ein Formular (<code>&lt;form ...&gt;&lt;/form&gt;</code>) abgeschickt wird.</p>
+
+<p>Es gilt zu beachten, dass das <code>submit</code> Event <strong>nur</strong> auf dem Formularelement ausgelöst wird. Der auslösende <code>&lt;button&gt;</code> oder <code>&lt;input type="submit" ... /&gt;</code> erhalten das Event nicht (Es wird das Formular abgeschickt, nicht der Button).</p>
+
+<h2 id="Allgemein">Allgemein</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><strong>Spezifikation</strong></td>
+   <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-algorithm">HTML5</a></td>
+  </tr>
+  <tr>
+   <td><strong>Interface</strong></td>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Propagiert ("Bubbles")</strong></td>
+   <td>Ja (obwohl eigentlich einfach Event ohne Propagation)</td>
+  </tr>
+  <tr>
+   <td><strong>Cancelable</strong></td>
+   <td>Ja</td>
+  </tr>
+  <tr>
+   <td><strong>Ziel</strong></td>
+   <td>Element</td>
+  </tr>
+  <tr>
+   <td><strong>Standardaktion</strong></td>
+   <td>Abhängig von Implementierung (schickt Inhalt des Formulars zum Server)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/de/web/api/htmlinputelement/index.html b/files/de/web/api/htmlinputelement/index.html
new file mode 100644
index 0000000000..284d3cc770
--- /dev/null
+++ b/files/de/web/api/htmlinputelement/index.html
@@ -0,0 +1,435 @@
+---
+title: HTMLInputElement
+slug: Web/API/HTMLInputElement
+tags:
+  - API
+  - HTML DOM
+  - HTMLInputElement
+  - Input
+  - Interface
+  - NeedsContent
+  - NeedsMarkupWork
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/HTMLInputElement
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>The <strong><code>HTMLInputElement</code></strong> interface provides special properties and methods for manipulating the options, layout, and presentation of {{HtmlElement("input")}} elements.</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Properties">Properties</h2>
+
+<table class="standard-table">
+ <caption>Properties related to the parent form</caption>
+ <thead>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>form </code>{{readonlyInline}}</td>
+   <td><em>{{domxref("HTMLFormElement")}}<code> object</code>:</em> <strong>Returns</strong> a reference to the parent {{HtmlElement("form")}} element.</td>
+  </tr>
+  <tr>
+   <td><code>formAction</code></td>
+   <td><em><code>string</code>: </em><strong>Returns / Sets</strong> the element's {{ htmlattrxref("formaction", "input") }} attribute, containing the URI of a program that processes information submitted by the element. This overrides the {{ htmlattrxref("action", "form") }} attribute of the parent form.</td>
+  </tr>
+  <tr>
+   <td><code>formEncType</code></td>
+   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("formenctype", "input") }} attribute, containing the type of content that is used to submit the form to the server. This overrides the {{ htmlattrxref("enctype", "form") }} attribute of the parent form.</td>
+  </tr>
+  <tr>
+   <td><code>formMethod</code></td>
+   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("formmethod", "input") }} attribute, containing the HTTP method that the browser uses to submit the form. This overrides the {{ htmlattrxref("method", "form") }} attribute of the parent form.</td>
+  </tr>
+  <tr>
+   <td><code>formNoValidate</code></td>
+   <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("formnovalidate", "input") }} attribute, indicating that the form is not to be validated when it is submitted. This overrides the {{ htmlattrxref("novalidate", "form") }} attribute of the parent form.</td>
+  </tr>
+  <tr>
+   <td><code>formTarget</code></td>
+   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("formtarget", "input") }} attribute, containing a name or keyword indicating where to display the response that is received after submitting the form. This overrides the {{ htmlattrxref("target", "form") }} attribute of the parent form.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Properties that apply to any type of input element that is not hidden</caption>
+ <tbody>
+  <tr>
+   <td><code>name</code></td>
+   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("name", "input") }} attribute, containing a name that identifies the element when submitting the form.</td>
+  </tr>
+  <tr>
+   <td><code>type</code></td>
+   <td><code><em>string</em></code>: <strong>Returns / Sets</strong> the element's {{ htmlattrxref("type", "input") }} attribute, indicating the type of control to display. See {{ htmlattrxref("type", "input") }} attribute of {{ HTMLElement("input") }} for possible values.</td>
+  </tr>
+  <tr>
+   <td><code>disabled</code></td>
+   <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("disabled", "input") }} attribute, indicating that the control is not available for interaction. The input values will not be submitted with the form. See also {{ htmlattrxref("readOnly", "input") }}</td>
+  </tr>
+  <tr>
+   <td><code>autofocus</code></td>
+   <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("autofocus", "input") }} attribute, which specifies that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the {{htmlattrxref("autofocus","input")}} attribute. It cannot be applied if the {{htmlattrxref("type","input")}} attribute is set to <code>hidden</code> (that is, you cannot automatically set focus to a hidden control).</td>
+  </tr>
+  <tr>
+   <td><code>required</code></td>
+   <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("required", "input") }} attribute, indicating that the user must fill in a value before submitting a form.</td>
+  </tr>
+  <tr>
+   <td><code>value</code></td>
+   <td><code><em>string</em></code><em>:</em> <strong>Returns / Sets</strong> the current value of the control.
+    <p class="note"><strong>Note:</strong> If the user enters a value different from the value expected, this may return an empty string.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>validity</code> {{readonlyInline}}</td>
+   <td><em>{{domxref("ValidityState")}}<code> object</code>:</em> <strong>Returns</strong> the element's current validity state.</td>
+  </tr>
+  <tr>
+   <td><code>validationMessage</code> {{readonlyInline}}</td>
+   <td><code><em>string</em></code><em>:</em> <strong>Returns</strong> a localized message that describes the validation constraints that the control does not satisfy (if any). This is the empty string if the control is not a candidate for constraint validation ({{htmlattrxref("willValidate","input")}} is false), or it satisfies its constraints. This value can be set by the <code>setCustomValidity</code> method.</td>
+  </tr>
+  <tr>
+   <td><code>willValidate </code>{{readonlyInline}}</td>
+   <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns</strong> whether the element is a candidate for constraint validation. It is false if any conditions bar it from constraint validation, including: its <code>type</code> is <code>hidden</code>, <code>reset</code>, or <code>button</code>; it has a <a href="/en-US/docs/Web/HTML/Element/datalist">datalist</a> ancestor; its <code>disabled</code> property is <code>true</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table" id="Properties_checkbox_radio">
+ <caption>Properties that apply only to elements of type <code>checkbox</code> or <code>radio</code></caption>
+ <tbody>
+  <tr>
+   <td><code>checked</code></td>
+   <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns / Sets</strong> the current state of the element when {{htmlattrxref("type","input")}} is <code>checkbox</code> or <code>radio</code>.</td>
+  </tr>
+  <tr>
+   <td><code>defaultChecked</code></td>
+   <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns / Sets</strong> the default state of a radio button or checkbox as originally specified in HTML that created this object.</td>
+  </tr>
+  <tr>
+   <td><code id="indeterminate">indeterminate</code></td>
+   <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns</strong> whether the checkbox or radio button is in indeterminate state. For checkboxes, the effect is that the appearance of the checkbox is obscured/greyed in some way as to indicate its state is indeterminate (not checked but not unchecked). Does not affect the value of the <code>checked</code> attribute, and clicking the checkbox will set the value to false.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Properties that apply only to elements of type <code>image</code></caption>
+ <tbody>
+  <tr>
+   <td><code>alt</code></td>
+   <td><em><code>string</code>: </em><strong>Returns / Sets</strong> the element's {{ htmlattrxref("alt", "input") }} attribute, containing alternative text to use when {{htmlattrxref("type","input")}} is <code>image.</code></td>
+  </tr>
+  <tr>
+   <td><code>height</code></td>
+   <td><em><code>string</code>: </em><strong>Returns / Sets</strong> the element's {{ htmlattrxref("height", "input") }} attribute, which defines the height of the image displayed for the button, if the value of {{htmlattrxref("type","input")}} is <code>image</code>.</td>
+  </tr>
+  <tr>
+   <td><code>src</code></td>
+   <td><code><em>string</em></code><em>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("src", "input") }} attribute, which specifies a URI for the location of an image to display on the graphical submit button, if the value of {{htmlattrxref("type","input")}} is <code>image</code>; otherwise it is ignored.</td>
+  </tr>
+  <tr>
+   <td><code>width</code></td>
+   <td><code><em>string</em></code><em>:</em> <strong>Returns / Sets</strong> the document's {{ htmlattrxref("width", "input") }} attribute, which defines the width of the image displayed for the button, if the value of {{htmlattrxref("type","input")}} is <code>image</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table" id="Properties_file">
+ <caption>Properties that apply only to elements of type <code>file</code></caption>
+ <tbody>
+  <tr>
+   <td><code>accept</code></td>
+   <td><em><code>string</code>: </em><strong>Returns / Sets</strong> the element's {{ htmlattrxref("accept", "input") }} attribute, containing comma-separated list of file types accepted by the server when {{htmlattrxref("type","input")}} is <code>file</code>.</td>
+  </tr>
+  <tr>
+   <td><code>allowdirs</code> {{non-standard_inline}}</td>
+   <td><em>{{jsxref("Boolean")}}:</em> Part of the non-standard Directory Upload API; <strong>indicates</strong> whether or not to allow directories and files both to be selected in the file list. Implemented only in Firefox and is hidden behind a preference.</td>
+  </tr>
+  <tr>
+   <td><code id="files_prop">files</code></td>
+   <td><strong>Returns/accepts</strong> a {{domxref("FileList")}} object, which contains a list of {{domxref("File")}} objects representing the files selected for upload.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLInputElement.webkitdirectory", "webkitdirectory")}} {{Non-standard_inline}}</td>
+   <td><em>{{jsxref("Boolean")}}:</em><strong> Returns</strong> the {{htmlattrxref("webkitdirectory", "input")}} attribute; if true, the file system picker interface only accepts directories instead of files.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLInputElement.webkitEntries", "webkitEntries")}} {{Non-standard_inline}}</td>
+   <td><em>Array of {{domxref("FileSystemEntry")}} objects:</em> <strong>Describes</strong> the currently selected files or directories.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Properties that apply only to <code>text/number</code>-containing or elements</caption>
+ <tbody>
+  <tr>
+   <td><code>autocomplete</code></td>
+   <td><em><code>string</code>: </em><strong>Returns / Sets</strong> the element's {{htmlattrxref("autocomplete", "input")}} attribute, indicating whether the value of the control can be automatically completed by the browser. Ignored if the value of the {{htmlattrxref("type","input")}} attribute is <code>hidden</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, or a button type (<code>button</code>, <code>submit</code>, <code>reset</code>, <code>image</code>). Possible values are:<br>
+    <code>on</code>: the browser can autocomplete the value using previously stored value<br>
+    <code>off</code>: the user must explicity enter a value</td>
+  </tr>
+  <tr>
+   <td><code>max</code></td>
+   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("max", "input") }} attribute, containing the maximum (numeric or date-time) value for this item, which must not be less than its minimum ({{htmlattrxref("min","input")}} attribute) value.</td>
+  </tr>
+  <tr>
+   <td><code>maxLength</code></td>
+   <td><em><code>long</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("maxlength", "input") }} attribute, containing the <strong>maximum number of characters</strong> (in Unicode code points) that the value can have. (If you set this to a negative number, an exception will be thrown.)</td>
+  </tr>
+  <tr>
+   <td><code>min</code></td>
+   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("min", "input") }} attribute, containing the minimum (numeric or date-time) value for this item, which must not be greater than its maximum ({{htmlattrxref("max","input")}} attribute) value.</td>
+  </tr>
+  <tr>
+   <td><code>minLength</code></td>
+   <td><em><code>long</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("minlength", "input") }} attribute, containing the <strong>minimum number of characters</strong> (in Unicode code points) that the value can have. (If you set this to a negative number, an exception will be thrown.)</td>
+  </tr>
+  <tr>
+   <td><code>pattern</code></td>
+   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("pattern", "input") }} attribute, containing a <strong>regular expression</strong> that the control's value is checked against. Use the {{htmlattrxref("title","input")}} attribute to describe the pattern to help the user. This attribute applies when the value of the {{htmlattrxref("type","input")}} attribute is <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code> or <code>email</code>; otherwise it is ignored.</td>
+  </tr>
+  <tr>
+   <td><code>placeholder</code></td>
+   <td><em><code>string</code>: </em><strong>Returns / Sets </strong>the element's {{ htmlattrxref("placeholder", "input") }} attribute, containing a hint to the user of what can be entered in the control. The placeholder text must not contain carriage returns or line-feeds. This attribute applies when the value of the {{htmlattrxref("type","input")}} attribute is <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code> or <code>email</code>; otherwise it is ignored.</td>
+  </tr>
+  <tr>
+   <td><code>readOnly</code></td>
+   <td><em><code>boolean</code>:</em><strong> Returns / Sets</strong> the element's {{ htmlattrxref("readonly", "input") }} attribute, indicating that the user cannot modify the value of the control.<br>
+    {{HTMLVersionInline(5)}}This is ignored if the value of the {{htmlattrxref("type","input")}} attribute is <code>hidden</code>, <code>range</code>, <code>color</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, or a button type.</td>
+  </tr>
+  <tr>
+   <td><code>size</code></td>
+   <td><em><code>unsigned long</code>:</em> <strong>Returns / Sets </strong>the element's {{ htmlattrxref("size", "input") }} attribute, which contains the <strong>visual size of the control</strong>. This value is in pixels unless the value of {{htmlattrxref("type","input")}} is <code>text</code> or <code>password</code>, in which case, it is an integer number of characters. Applies only when {{htmlattrxref("type","input")}} is set to <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code>, <code>email</code>, or <code>password</code>; otherwise it is ignored.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Properties that apply only to elements with type <code>text/password/search/tel/url/week/month</code></caption>
+ <tbody>
+  <tr>
+   <td><code>selectionStart</code></td>
+   <td><em><code>unsigned long</code>:</em> <strong>Returns / Sets</strong> the beginning index of the selected text. When nothing is selected, this returns the position of the text input cursor (caret) inside of the {{HTMLElement("input")}} element.</td>
+  </tr>
+  <tr>
+   <td><code>selectionEnd</code></td>
+   <td><em><code>unsigned long</code>:</em> <strong>Returns / Sets </strong>the end index of the selected text. When there's no selection, this returns the offset of the character immediately following the current text input cursor position.</td>
+  </tr>
+  <tr>
+   <td><code>selectionDirection</code></td>
+   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the direction in which selection occurred. Possible values are:<br>
+    <code>forward</code> if selection was performed in the start-to-end direction of the current locale<br>
+    <code>backward</code> for the opposite direction<br>
+    <code>none</code> if the direction is unknown</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Properties not yet categorized</caption>
+ <tbody>
+  <tr>
+   <td><code>defaultValue</code></td>
+   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the default value as originally specified in the HTML that created this object.</td>
+  </tr>
+  <tr>
+   <td><code>dirName</code></td>
+   <td><em><code>string</code>:</em> <strong>Returns / Sets </strong>the directionality of the element.</td>
+  </tr>
+  <tr>
+   <td><code>accessKey</code></td>
+   <td><em><code>string</code>: </em><strong>Returns</strong> a string containing a single character that switches input focus to the control when pressed.</td>
+  </tr>
+  <tr>
+   <td><code>list</code> {{readonlyInline}}</td>
+   <td><em>{{domxref("HTMLElement")}}<code> object</code>:</em> <strong>Returns</strong> the element pointed by the {{ htmlattrxref("list", "input") }} attribute. The property may be <code>null</code> if no HTML element found in the same tree.</td>
+  </tr>
+  <tr>
+   <td><code>multiple</code></td>
+   <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("multiple", "input") }} attribute, indicating whether more than one value is possible (e.g., multiple files).</td>
+  </tr>
+  <tr>
+   <td><code>files</code></td>
+   <td><em>{{domxref("FileList")}}<code> array</code>:</em> <strong>Returns</strong> the list of selected files.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLInputElement.labels")}} {{readonlyInline}}</td>
+   <td><em>{{domxref("NodeList")}}<code> array</code>:</em> <strong>Returns</strong> a list of {{ HTMLElement("label") }} elements that are labels for this element.</td>
+  </tr>
+  <tr>
+   <td><code>step</code></td>
+   <td><code><em>string</em></code><em>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("step", "input") }} attribute, which works with<strong> </strong>{{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} to limit the increments at which a numeric or date-time value can be set. It can be the string <code>any</code> or a positive floating point number. If this is not set to <code>any</code>, the control accepts only values at multiples of the step value greater than the minimum.</td>
+  </tr>
+  <tr>
+   <td><code>valueAsDate</code></td>
+   <td><em>{{jsxref("Date")}}<code> object</code>:</em> <strong>Returns / Sets</strong> the value of the element, interpreted as a date, or <code>null</code> if conversion is not possible.</td>
+  </tr>
+  <tr>
+   <td><code>valueAsNumber</code></td>
+   <td><em><code>double</code>:</em> <strong>Returns</strong> the value of the element, interpreted as one of the following, in order:
+    <ul>
+     <li>A time value</li>
+     <li>A number</li>
+     <li><code>NaN</code> if conversion is impossible</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><code>autocapitalize</code> {{experimental_inline}}</td>
+   <td><code><em>string</em></code><em>:</em> <strong>Defines</strong> the capitalization behavior for user input. Valid values are <code>none</code>, <code>off</code>, <code>characters</code>, <code>words</code>, or <code>sentences</code>.</td>
+  </tr>
+  <tr>
+   <td><code>inputmode</code></td>
+   <td>Provides a hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents.</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>{{domxref("HTMLInputElement.align")}} {{obsolete_inline}}</dt>
+ <dd><code><em>string</em></code><em>:</em> <strong>Represents</strong> the alignment of the element. <em>Use CSS instead.</em></dd>
+ <dt>{{domxref("HTMLInputElement.useMap")}} {{ obsolete_inline }}</dt>
+ <dd><code><em>string</em></code><em>:</em> <strong>Represents</strong> a client-side image map.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>{{domxref("HTMLElement.blur()", "blur()")}}</td>
+   <td>Removes focus from the input element; keystrokes will subsequently go nowhere.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.click()", "click()")}}</td>
+   <td>Simulates a click on the input element.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.focus()", "focus()")}}</td>
+   <td>Focuses on the input element; keystrokes will subsequently go to this element.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLInputElement.select()", "select()")}}</td>
+   <td>Selects all the text in the input element, and focuses it so the user can subsequently replace all of its content.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLInputElement.setSelectionRange()", "setSelectionRange()")}}</td>
+   <td>Selects a range of text in the input element (but does not focus it).</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLInputElement.setRangeText()", "setRangeText()")}}</td>
+   <td>Replaces a range of text in the input element with new text.</td>
+  </tr>
+  <tr>
+   <td><code>setCustomValidity()</code></td>
+   <td>Sets a custom validity message for the element. If this message is not the empty string, then the element is suffering from a custom validity error, and does not validate.</td>
+  </tr>
+  <tr>
+   <td><code>checkValidity()</code></td>
+   <td>Returns a {{jsxref("Boolean")}} that is <code>false</code> if the element is a candidate for constraint validation, and it does not satisfy its constraints. In this case, it also fires an {{event("invalid")}} event at the element. It returns <code>true</code> if the element is not a candidate for constraint validation, or if it satisfies its constraints.</td>
+  </tr>
+  <tr>
+   <td><code>reportValidity()</code></td>
+   <td>Runs the <code>checkValidity()</code> method, and if it returns false (for an invalid input or no pattern attribute provided), then it reports to the user that the input is invalid in the same manner as if you submitted a form.</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>{{domxref("HTMLInputElement.stepDown()")}}</dt>
+ <dd>Decrements the {{htmlattrxref("value","input")}} by ({{htmlattrxref("step","input")}} * n), where n defaults to 1 if not specified. Throws an INVALID_STATE_ERR exception:
+ <ul>
+  <li>if the method is not applicable to for the current {{htmlattrxref("type","input")}} value,</li>
+  <li>if the element has no {{htmlattrxref("step","input")}} value,</li>
+  <li>if the {{htmlattrxref("value","input")}} cannot be converted to a number,</li>
+  <li>if the resulting value is above the {{htmlattrxref("max","input")}} or below the {{htmlattrxref("min","input")}}.</li>
+ </ul>
+ </dd>
+ <dt>{{domxref("HTMLInputElement.stepUp()")}}</dt>
+ <dd>Increments the {{htmlattrxref("value","input")}} by ({{htmlattrxref("step","input")}} * n), where n defaults to 1 if not specified. Throws an INVALID_STATE_ERR exception:
+ <ul>
+  <li>if the method is not applicable to for the current {{htmlattrxref("type","input")}} value.,</li>
+  <li>if the element has no {{htmlattrxref("step","input")}} value,</li>
+  <li>if the {{htmlattrxref("value","input")}} cannot be converted to a number,</li>
+  <li>if the resulting value is above the {{htmlattrxref("max","input")}} or below the {{htmlattrxref("min","input")}}.</li>
+ </ul>
+ </dd>
+ <dt>{{domxref("HTMLInputElement.mozSetFileArray()")}} {{non-standard_inline}}</dt>
+ <dd>Sets the files selected on the input to the given array of {{domxref("File")}} objects. This is an alternative to <code>mozSetFileNameArray()</code> which can be used in frame scripts: a chrome script can <a href="/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code">open files as File objects</a> and send them via <a href="/en-US/Firefox/Multiprocess_Firefox/The_message_manager">message manager</a>.</dd>
+ <dt>{{domxref("HTMLInputElement.mozGetFileNameArray()")}} {{non-standard_inline}}</dt>
+ <dd>Returns an array of all the file names from the input.</dd>
+ <dt>{{domxref("HTMLInputElement.mozSetFileNameArray()")}} {{non-standard_inline}}</dt>
+ <dd>Sets the filenames for the files selected on the input. Not for use in <a href="/en-US/Firefox/Multiprocess_Firefox/Limitations_of_frame_scripts">frame scripts</a>, because it accesses the file system.</dd>
+</dl>
+
+<h2 id="Events">Events</h2>
+
+<p>Listen to these events using <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface:</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/HTMLElement/input_event"><code>input</code></a></dt>
+ <dd>Fires when the <code>value</code> of an {{HTMLElement("input")}}, {{HTMLElement("select")}}, or {{HTMLElement("textarea")}} element has been changed. Note that this is actually fired on the {{domxref("HTMLElement")}} interface and also applies to <code><a href="/en-US/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a></code> elements, but we've listed it here because it is most commonly used with form input elements.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/oninput">oninput</a></code> event handler property.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/HTMLElement/invalid_event">invalid</a></code></dt>
+ <dd>Fired when an element does not satisfy its constraints during constraint validation.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/oninvalid">oninvalid</a></code> event handler property.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/HTMLInputElement/search_event">search</a></code></dt>
+ <dd>Fired when a search is initiated on an {{HTMLElement("input")}} of <code>type="search"</code>.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onsearch">onsearch</a></code> event handler property.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#htmlinputelement", "HTMLInputElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "forms.html#the-input-element", "HTMLInputElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Technically, the <code>tabindex</code> and <code>accesskey</code> properties, as well as the <code>blur()</code>, <code>click()</code>, and <code>focus()</code> methods, are now defined on {{domxref("HTMLElement")}}.<br>
+    The following properties are now obsolete: <code>align</code> and <code>useMap</code>.<br>
+    The following properties have been added: <code>autocomplete</code>, <code>autofocus</code>, <code>dirName</code>, <code>files</code>, <code>formAction</code>, <code>formEncType</code>, <code>formMethod</code>, <code>formNoValidate</code>, <code>formTarget</code>, <code>height</code>, <code>indeterminate</code>, <code>labels</code>, <code>list</code>, <code>max</code>, <code>min</code>, <code>multiple</code>, <code>pattern</code>, <code>placeholder</code>, <code>required</code>, <code>selectionDirection</code>, <code>selectionEnd</code>, <code>selectionStart</code>, <code>step</code>, <code>validationMessage</code>, <code>validity</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>, <code>width</code>, and <code>willValidate</code>.<br>
+    The following methods have been added: <code>checkValidity()</code>, <code>setCustomValidity()</code>, <code>setSelectionRange()</code>, <code>stepUp()</code>, and <code>stepDown()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-6043025', 'HTMLInputElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>The <code>size</code> property is now an <code>unsigned long</code>. The <code>type</code> property must be entirely given in lowercase characters.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-6043025', 'HTMLInputElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.HTMLInputElement")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>HTML element implementing this interface: {{ HTMLElement("input") }}</li>
+</ul>
diff --git a/files/de/web/api/htmlinputelement/select/index.html b/files/de/web/api/htmlinputelement/select/index.html
new file mode 100644
index 0000000000..14354e31dc
--- /dev/null
+++ b/files/de/web/api/htmlinputelement/select/index.html
@@ -0,0 +1,84 @@
+---
+title: HTMLInputElement.select()
+slug: Web/API/HTMLInputElement/select
+tags:
+  - Auswählen
+  - HTML
+  - JavaScript
+  - Méthode
+translation_of: Web/API/HTMLInputElement/select
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>Die <strong><code>HTMLInputElement.select()</code></strong> Methode selektiert den gesamten Text innerhalb eines {{HTMLElement("textarea")}} oder innerhalb eines {{HTMLElement("input")}} Elements welches ein Textfeld enthält.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>element</em>.select();</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Klick in diesem Beispiel auf den Button um den gesamten Text innerhalb des <code>&lt;input&gt;</code> Elements zu selektieren.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input type="text" id="text-box" size="20" value="Hallo Welt!"&gt;
+&lt;button onclick="selectText()"&gt;Text auswählen&lt;/button&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">function selectText() {
+  const input = document.getElementById('text-box');
+  input.focus();
+  input.select();
+}</pre>
+
+<h3 id="Ergebnis">Ergebnis</h3>
+
+<p>{{EmbedLiveSample("Beispiel")}}</p>
+
+<h2 id="Anmerkungen">Anmerkungen</h2>
+
+<p>Die Methode <code>element.select()</code> fokussiert den Input nicht zwingend, weshalb es oft zusammen mit {{domxref("HTMLElement.focus()")}} verwendet wird.</p>
+
+<p>In Browsern in denen es nicht unterstützt wird ist es möglich es mit <a href="/en-US/docs/Web/API/HTMLInputElement/setSelectionRange">HTMLInputElement.setSelectionRange()</a> (mit den Parametern <em>0</em> und der <em>Länge des Werts des Inputs</em>) zu ersetzen.</p>
+
+<pre class="brush: html">&lt;input onClick="this.select();" value="Beispieltext" /&gt;
+&lt;!-- gleichbedeutend mit --&gt;
+&lt;input onClick="this.setSelectionRange(0, this.value.length);" value="Beispieltext" /&gt;
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#dom-textarea/input-select', 'select')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+
+
+<p>{{Compat("api.HTMLInputElement.select")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{ HTMLElement("input") }}</li>
+ <li>{{ HTMLElement("textarea") }}</li>
+ <li>{{ domxref("HTMLInputElement") }}</li>
+ <li>{{ domxref("HTMLInputElement.setSelectionRange") }}</li>
+</ul>
diff --git a/files/de/web/api/htmlslotelement/assignednodes/index.html b/files/de/web/api/htmlslotelement/assignednodes/index.html
new file mode 100644
index 0000000000..77ab2aef3d
--- /dev/null
+++ b/files/de/web/api/htmlslotelement/assignednodes/index.html
@@ -0,0 +1,66 @@
+---
+title: HTMLSlotElement.assignedNodes()
+slug: Web/API/HTMLSlotElement/assignedNodes
+translation_of: Web/API/HTMLSlotElement/assignedNodes
+---
+<p>{{APIRef("Shadow DOM API")}}</p>
+
+<p>Die Eigenschaft <strong><code>assignedNodes()</code></strong> der Schnittstelle {{domxref("HTMLSlotElement")}} gibt die Reihenfolge der diesem Slot zugewiesenen Elemente oder alternativ den Fallback-Inhalt des Slots zurück.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var assignedNodes[] = HTMLSlotElement.assignedNodes([options])</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt>options {{optional_inline}}</dt>
+ <dd>Ein Objekt, das Optionen für die zurückzugebenden Knoten festlegt. Die verfügbaren Optionen sind:
+ <ul>
+  <li><code>flatten</code>: Ein {{jsxref('Boolean')}}, das angibt, ob die dem Slot zugewiesenen Elemente zurückgegeben werden sollen (wenn dieser Wert <code>false</code> ist) oder der Fallback-Inhalt des Slots (wenn dieser Wert <code>true</code> ist). Die Vorgabe ist <code>false</code>.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Rückgabewerte">Rückgabewerte</h3>
+
+<p>Ein Array von Knoten.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Das folgende Schnippsel ist unserem <a href="https://github.com/mdn/web-components-examples/tree/master/slotchange">Slotchange-Beispiel</a> entnommen (<a href="https://mdn.github.io/web-components-examples/slotchange/">siehe auch live</a>).</p>
+
+<pre class="brush: js">let slots = this.shadowRoot.querySelectorAll('slot');
+slots[1].addEventListener('slotchange', function(e) {
+  let nodes = slots[1].assignedNodes();
+  console.log('Element in Slot "' + slots[1].name + '" changed to "' + nodes[0].outerHTML + '".');
+});</pre>
+
+<p>Hier nehmen wir Verweise auf alle Slots und fügen dann einen Slotchange Event Listener zum zweiten Slot in der Vorlage hinzu - derjenige, dessen Inhalt im Beispiel geändert wird.</p>
+
+<p>Jedes Mal, wenn sich das in den Slot eingefügte Element ändert, protokollieren wir einen Bericht an die Konsole, aus dem hervorgeht, welcher Slot sich geändert hat und was der neue Knoten im Slot ist.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','scripting.html#dom-slot-assignednodes','assignedNodes')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("api.HTMLSlotElement.assignedNodes")}}</p>
+</div>
diff --git a/files/de/web/api/htmlslotelement/index.html b/files/de/web/api/htmlslotelement/index.html
new file mode 100644
index 0000000000..2644171f01
--- /dev/null
+++ b/files/de/web/api/htmlslotelement/index.html
@@ -0,0 +1,67 @@
+---
+title: HTMLSlotElement
+slug: Web/API/HTMLSlotElement
+tags:
+  - API
+  - HTMLSlotElement
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - shadow dom
+translation_of: Web/API/HTMLSlotElement
+---
+<p>{{APIRef('Web Components')}}</p>
+
+<p>The <strong><code>HTMLSlotElement</code></strong> interface of the <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">Shadow DOM API</a> enables access to the name and assigned nodes of an HTML {{HTMLElement("slot")}} element.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref('HTMLSlotElement.name')}}</dt>
+ <dd>{{domxref("DOMString")}}: Can be used to get and set the slot's name.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref('HTMLSlotElement.assignedNodes()')}}</dt>
+ <dd>Returns the sequence of elements assigned to this slot, or alternatively the slot's fallback content.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>The following snippet is taken from our <a href="https://github.com/mdn/web-components-examples/tree/master/slotchange">slotchange example</a> (<a href="https://mdn.github.io/web-components-examples/slotchange/">see it live also</a>).</p>
+
+<pre class="brush: js">let slots = this.shadowRoot.querySelectorAll('slot');
+slots[1].addEventListener('slotchange', function(e) {
+  let nodes = slots[1].assignedNodes();
+  console.log('Element in Slot "' + slots[1].name + '" changed to "' + nodes[0].outerHTML + '".');
+});</pre>
+
+<p>Here we grab references to all the slots, then add a slotchange event listener to the 2nd slot in the template — which is the one that keeps having its contents changed in the example.</p>
+
+<p>Every time the element inserted in the slot changes, we log a report to the console saying which slot has changed, and what the new node inside the slot is.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','scripting.html#htmlslotelement','HTMLSlotElement')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.HTMLSlotElement")}}</p>
diff --git a/files/de/web/api/htmltableelement/createcaption/index.html b/files/de/web/api/htmltableelement/createcaption/index.html
new file mode 100644
index 0000000000..fb27bd6480
--- /dev/null
+++ b/files/de/web/api/htmltableelement/createcaption/index.html
@@ -0,0 +1,75 @@
+---
+title: HTMLTableElement.createCaption()
+slug: Web/API/HTMLTableElement/createCaption
+tags:
+  - API
+  - DOM
+  - HTML DOM
+  - HTMLTableElement
+  - Method
+  - Reference
+translation_of: Web/API/HTMLTableElement/createCaption
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>Die <code><strong>HTMLTableElement.createCaption()</strong></code> Methode gibt das {{HtmlElement("caption")}} Element zurück, das einer {{HtmlElement("table")}} zugeordnet ist. Wenn in der Tabelle noch kein <code>&lt;caption&gt;</code> Element existiert, wird es durch diese Methode erzeugt und dann zurückgegeben..</p>
+
+<div class="blockIndicator note">
+<p><strong>Anmerkung:</strong> Wenn noch keine Überschrift vorhanden ist, fügt <code>createCaption()</code> sie direkt in die Tabelle ein. Die Überschrift muss nicht eigens hinzugefügt werden, wie man es tun müsste, wenn man das <code>&lt;caption&gt;</code> Element mittels {{domxref("Document.createElement()")}} erzeugt hätte.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate"><em>HTMLTableCaptionElement</em> = <em>table</em>.createCaption();</pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>{{domxref("HTMLTableCaptionElement")}}</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Dieses Beispiel verwendet JavaScript, um eine Tabelle um eine Überschrift zu erweitern.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;table&gt;
+  &lt;tr&gt;&lt;td&gt;Cell 1.1&lt;/td&gt;&lt;td&gt;Cell 1.2&lt;/td&gt;&lt;td&gt;Cell 1.3&lt;/td&gt;&lt;/tr&gt;
+  &lt;tr&gt;&lt;td&gt;Cell 2.1&lt;/td&gt;&lt;td&gt;Cell 2.2&lt;/td&gt;&lt;td&gt;Cell 2.3&lt;/td&gt;&lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js; highlight:[2] notranslate">let table = document.querySelector('table');
+let caption = table.createCaption();
+caption.textContent = 'Diese Überschrift wurde mit JavaScript erzeugt!';</pre>
+
+<h3 id="Ergebnis">Ergebnis</h3>
+
+<p>{{EmbedLiveSample("Beispiel")}}</p>
+
+<h2 id="Specification" name="Specification">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-table-createcaption', 'HTMLTableElement: createCaption')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("api.HTMLTableElement.createCaption")}}</p>
+</div>
diff --git a/files/de/web/api/htmltableelement/index.html b/files/de/web/api/htmltableelement/index.html
new file mode 100644
index 0000000000..696556f62f
--- /dev/null
+++ b/files/de/web/api/htmltableelement/index.html
@@ -0,0 +1,132 @@
+---
+title: HTMLTableElement
+slug: Web/API/HTMLTableElement
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/HTMLTableElement
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>The <strong><code>HTMLTableElement</code></strong> interface provides special properties and methods (beyond the regular {{DOMxRef("HTMLElement")}} object interface it also has available to it by inheritance) for manipulating the layout and presentation of tables in an HTML document.</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Inherits properties from its parent, {{DOMxRef("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{DOMxRef("HTMLTableElement.caption")}}</dt>
+ <dd>Is a {{DOMxRef("HTMLTableCaptionElement")}} representing the first {{HTMLElement("caption")}} that is a child of the element, or <code>null</code> if none is found. When set, if the object doesn't represent a <code>&lt;caption&gt;</code>, a {{DOMxRef("DOMException")}} with the <code>HierarchyRequestError</code> name is thrown. If a correct object is given, it is inserted in the tree as the first child of this element and the first <code>&lt;caption&gt;</code> that is a child of this element is removed from the tree, if any.</dd>
+ <dt>{{DOMxRef("HTMLTableElement.tHead")}}</dt>
+ <dd>Is a {{DOMxRef("HTMLTableSectionElement")}} representing the first {{HTMLElement("thead")}} that is a child of the element, or <code>null</code> if none is found. When set, if the object doesn't represent a <code>&lt;thead&gt;</code>, a {{DOMxRef("DOMException")}} with the <code>HierarchyRequestError</code> name is thrown. If a correct object is given, it is inserted in the tree immediately before the first element that is neither a {{HTMLElement("caption")}}, nor a {{HTMLElement("colgroup")}}, or as the last child if there is no such element, and the first <code>&lt;thead&gt;</code> that is a child of this element is removed from the tree, if any.</dd>
+ <dt>{{DOMxRef("HTMLTableElement.tFoot")}}</dt>
+ <dd>Is a {{DOMxRef("HTMLTableSectionElement")}} representing the first {{HTMLElement("tfoot")}} that is a child of the element, or <code>null</code> if none is found. When set, if the object doesn't represent a <code>&lt;tfoot&gt;</code>, a {{DOMxRef("DOMException")}} with the <code>HierarchyRequestError</code> name is thrown. If a correct object is given, it is inserted in the tree immediately before the first element that is neither a {{HTMLElement("caption")}}, a {{HTMLElement("colgroup")}}, nor a {{HTMLElement("thead")}}, or as the last child if there is no such element, and the first <code>&lt;tfoot&gt;</code> that is a child of this element is removed from the tree, if any.</dd>
+ <dt>{{DOMxRef("HTMLTableElement.rows")}}{{ReadOnlyInline}}</dt>
+ <dd>Returns a live {{DOMxRef("HTMLCollection")}} containing all the rows of the element, that is all {{HTMLElement("tr")}} that are a child of the element, or a child of one of its {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} and {{HTMLElement("tfoot")}} children. The rows members of a <code>&lt;thead&gt;</code> appear first, in tree order, and those members of a <code>&lt;tbody&gt;</code> last, also in tree order. The <code>HTMLCollection</code> is live and is automatically updated when the <code>HTMLTableElement</code> changes.</dd>
+ <dt>{{DOMxRef("HTMLTableElement.tBodies")}}{{ReadOnlyInline}}</dt>
+ <dd>Returns a live {{DOMxRef("HTMLCollection")}} containing all the {{HTMLElement("tbody")}} of the element. The <code>HTMLCollection</code> is live and is automatically updated when the <code>HTMLTableElement</code> changes.</dd>
+</dl>
+
+<h3 id="Obsolete_Properties">Obsolete Properties</h3>
+
+<div class="blockIndicator warning">
+<p><strong>Warning:</strong> The following properties are obsolete.  You should avoid using them.</p>
+</div>
+
+<details>
+<dl>
+ <dt>{{DOMxRef("HTMLTableElement.align")}} {{Obsolete_Inline}}</dt>
+ <dd>Is a {{DOMxRef("DOMString")}} containing an enumerated value reflecting the {{HTMLAttrxRef("align", "table")}} attribute. It indicates the alignment of the element's contents with respect to the surrounding context. The possible values are <code>"left"</code>, <code>"right"</code>, and <code>"center"</code>.</dd>
+ <dt>{{DOMxRef("HTMLTableElement.bgColor")}} {{Obsolete_Inline}}</dt>
+ <dd>Is a {{DOMxRef("DOMString")}} containing the background color of the cells. It reflects the obsolete {{HTMLAttrxRef("bgColor", "table")}} attribute.</dd>
+ <dt>{{DOMxRef("HTMLTableElement.border")}} {{Obsolete_Inline}}</dt>
+ <dd>Is a {{DOMxRef("DOMString")}} containing the width in pixels of the border of the table. It reflects the obsolete {{HTMLAttrxRef("border", "table")}} attribute.</dd>
+ <dt>{{DOMxRef("HTMLTableElement.cellPadding")}} {{Obsolete_Inline}}</dt>
+ <dd>Is a {{DOMxRef("DOMString")}} containing the width in pixels of the horizontal and vertical sapce between cell content and cell borders. It reflects the obsolete {{HTMLAttrxRef("cellpadding", "table")}} attribute.</dd>
+ <dt>{{DOMxRef("HTMLTableElement.cellSpacing")}} {{Obsolete_Inline}}</dt>
+ <dd>Is a {{DOMxRef("DOMString")}} containing the width in pixels of the horizontal and vertical separation between cells. It reflects the obsolete {{HTMLAttrxRef("cellspacing", "table")}} attribute.</dd>
+ <dt>{{DOMxRef("HTMLTableElement.frame")}} {{Obsolete_Inline}}</dt>
+ <dd>Is a {{DOMxRef("DOMString")}} containing the type of the external borders of the table. It reflects the obsolete {{HTMLAttrxRef("frame", "table")}} attribute and can take one of the following values: <code>"void"</code>, <code>"above"</code>, <code>"below"</code>, <code>"hsides"</code>, <code>"vsides"</code>, <code>"lhs"</code>, <code>"rhs"</code>, <code>"box"</code>, or <code>"border"</code>.</dd>
+ <dt>{{DOMxRef("HTMLTableElement.rules")}} {{Obsolete_Inline}}</dt>
+ <dd>Is a {{DOMxRef("DOMString")}} containing the type of the internal borders of the table. It reflects the obsolete {{HTMLAttrxRef("rules", "table")}} attribute and can take one of the following values: <code>"none"</code>, <code>"groups"</code>, <code>"rows"</code>, <code>"cols"</code>, or <code>"all"</code>.</dd>
+ <dt>{{DOMxRef("HTMLTableElement.summary")}} {{Obsolete_Inline}}</dt>
+ <dd>Is a {{DOMxRef("DOMString")}} containing a description of the purpose or the structure of the table. It reflects the obsolete {{HTMLAttrxRef("summary", "table")}} attribute.</dd>
+ <dt>{{DOMxRef("HTMLTableElement.width")}} {{Obsolete_Inline}}</dt>
+ <dd>Is a {{DOMxRef("DOMString")}} containing the length in pixels or in percentage of the desired width fo the entire table. It reflects the obsolete {{HTMLAttrxRef("width", "table")}} attribute.</dd>
+</dl>
+</details>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Inherits methods from its parent, {{DOMxRef("HTMLElement")}}</em>.</p>
+
+<dl>
+ <dt>{{DOMxRef("HTMLTableElement.createTHead()")}}</dt>
+ <dd>Returns an {{DOMxRef("HTMLElement")}} representing the first {{HTMLElement("thead")}} that is a child of the element. If none is found, a new one is created and inserted in the tree immediately before the first element that is neither a {{HTMLElement("caption")}}, nor a {{HTMLElement("colgroup")}}, or as the last child if there is no such element.</dd>
+ <dt>{{DOMxRef("HTMLTableElement.deleteTHead()")}}</dt>
+ <dd>Removes the first {{HTMLElement("thead")}} that is a child of the element.</dd>
+ <dt>{{DOMxRef("HTMLTableElement.createTFoot()")}}</dt>
+ <dd>Returns an {{DOMxRef("HTMLElement")}} representing the first {{HTMLElement("tfoot")}} that is a child of the element. If none is found, a new one is created and inserted in the tree immediately before the first element that is neither a {{HTMLElement("caption")}}, a {{HTMLElement("colgroup")}}, nor a {{HTMLElement("thead")}}, or as the last child if there is no such element.</dd>
+ <dt>{{DOMxRef("HTMLTableElement.deleteTFoot()")}}</dt>
+ <dd>Removes the first {{HTMLElement("tfoot")}} that is a child of the element.</dd>
+ <dt>{{DOMxRef("HTMLTableElement.createCaption()")}}</dt>
+ <dd>Returns an {{DOMxRef("HTMLElement")}} representing the first {{HTMLElement("caption")}} that is a child of the element. If none is found, a new one is created and inserted in the tree as the first child of the {{HTMLElement("table")}} element.</dd>
+ <dt>{{DOMxRef("HTMLTableElement.deleteCaption()")}}</dt>
+ <dd>Removes the first {{HTMLElement("caption")}} that is a child of the element.</dd>
+ <dt>{{DOMxRef("HTMLTableElement.insertRow()")}}</dt>
+ <dd>Returns an {{DOMxRef("HTMLTableRowElement")}} representing a new row of the table. It inserts it in the rows collection immediately before the {{HTMLElement("tr")}} element at the given <code>index</code> position. If necessary a {{HTMLElement("tbody")}} is created. If the <code>index</code> is <code>-1</code>, the new row is appended to the collection. If the <code>index</code> is smaller than <code>-1</code> or greater than the number of rows in the collection, a {{DOMxRef("DOMException")}} with the value <code>IndexSizeError</code> is raised.</dd>
+ <dt>{{DOMxRef("HTMLTableElement.deleteRow()")}}</dt>
+ <dd>Removes the row corresponding to the <code>index</code> given in parameter. If the <code>index</code> value is <code>-1</code> the last row is removed; if it smaller than <code>-1</code> or greater than the amount of rows in the collection, a {{DOMxRef("DOMException")}} with the value <code>IndexSizeError</code> is raised.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#htmltableelement", "HTMLTableElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Added the <code>sortable</code> property and the <code>stopSorting()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "tabular-data.html#the-table-element", "HTMLTableElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Added the <code>createTBody()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-64060425', 'HTMLTableElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Defined when <code>caption</code>, <code>tHead</code>, <code>tFoot</code>, <code>insertRow()</code>, and <code>deleteRow()</code> raise exceptions.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-64060425', 'HTMLTableElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.HTMLTableElement")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The HTML element implementing this interface: {{HTMLElement("table")}}.</li>
+</ul>
diff --git a/files/de/web/api/htmltableelement/insertrow/index.html b/files/de/web/api/htmltableelement/insertrow/index.html
new file mode 100644
index 0000000000..869d185b98
--- /dev/null
+++ b/files/de/web/api/htmltableelement/insertrow/index.html
@@ -0,0 +1,122 @@
+---
+title: HTMLTableElement.insertRow()
+slug: Web/API/HTMLTableElement/insertRow
+tags:
+  - API
+  - HTML DOM
+  - HTMLTableElement
+  - Method
+  - Reference
+translation_of: Web/API/HTMLTableElement/insertRow
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>Die Methode <strong><code>HTMLTableElement.insertRow()</code></strong> fügt einer vorhandenen {{HtmlElement("table")}} eine neue Zeile ({{HtmlElement("tr")}}) hinzu und gibt eine Referenz auf die neue Zeile zurück.</p>
+
+<p>Wenn eine Tabelle mehrere {{HtmlElement("tbody")}} Elemente besitzt, wird die neue Zeile standardmäßig dem letzten <code>&lt;tbody&gt;</code> hinzugefügt. Um sie einem bestimmten <code>&lt;tbody&gt;</code> Element hinzuzufügen, beschaffen Sie sich eine Referenz auf das gewünschte <code>&lt;tbody&gt;</code> Element und rufen Sie <code>insertRow()</code> auf diesem Element auf:</p>
+
+<pre class="brush: js notranslate">let bestimmter_tbody = document.getElementById(tbody_id);
+let zeile = bestimmter_tbody.insertRow(index)</pre>
+
+
+
+<div class="blockIndicator note">
+<p><strong>Anmerkung:</strong> <code>insertRow()</code> fügt die Zeile direkt in die Tabelle ein. Die Zeile muss nicht eigens hinzugefügt werden, wie man es tun müsste, wenn man das <code>&lt;tr&gt;</code> Element mittels <a href="https://wiki.developer.mozilla.org/de/docs/Web/API/Document/createElement"><code>Document.createElement()</code></a> erzeugt hätte.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">var <em>neueZeile</em> = <em>HTMLTableElement</em>.insertRow(<em>index</em>);</pre>
+
+<p>{{domxref("HTMLTableElement")}} ist eine Referenz auf ein HTML {{HtmlElement("table")}} Element.</p>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>index</code> {{optional_inline}}</dt>
+ <dd>Der Zeilenindex der neuen Zeile. Ist der Index <code>-1</code> or gleich der Anzahl der vorhandenen Zeilen, wird die Zeile als letzte Zeile angefügt. Wenn <code>index</code> größer als die Anzahl vorhandener Zeilen ist, führt dies zi einer <code>IndexSizeError</code> Exception. Wird <code>index</code> weggelassen, ist der Standardwert <code>-1</code>.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p><code>neueZeile</code> ist ein {{domxref("HTMLTableRowElement")}}, das die neue Zeile referenziert.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Dieses Beispiel verwendet <code>insertRow(-1)</code>, um an eine Tabelle eine neue Zeile anzufügen.</p>
+
+<p>Wir verwenden daraufhin {{domxref("HTMLTableRowElement.insertCell()")}}, um der neuen Zeile noch eine Zelle hinzufügen. (Um gültiges HTML zu sein, muss ein <code>&lt;tr&gt;</code> mindestens ein <code>&lt;td&gt;</code> Element enthalten.) Schließlich fügen wir der Zelle mittels {{domxref("Document.createTextNode()")}} und {{domxref("Node.appendChild()")}} Text hinzu.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;table id="my-table"&gt;
+  &lt;tr&gt;&lt;td&gt;Row 1&lt;/td&gt;&lt;/tr&gt;
+  &lt;tr&gt;&lt;td&gt;Row 2&lt;/td&gt;&lt;/tr&gt;
+  &lt;tr&gt;&lt;td&gt;Row 3&lt;/td&gt;&lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">function addRow(tableID) {
+  // Beschaffe eine Referenz auf die Tabelle
+  let tableRef = document.getElementById(tableID);
+
+  // Füge am Ende der Tabelle eine neue Zeile an
+  let newRow = tableRef.insertRow(-1);
+
+  // Erstelle in der Zeile eine Zelle am Index 0
+  let newCell = newRow.insertCell(0);
+
+  // Füge der Zelle einen textnode hinzu
+  let newText = document.createTextNode('Neue letzte Zeile');
+  newCell.appendChild(newText);
+}
+
+// Rufe addRow() mit der ID der Tabelle auf
+addRow('my-table');</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Beispiel")}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "tables.html#dom-table-insertrow", "HTMLTableElement.insertRow()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 HTML", "html.html#ID-93995626", "HTMLTableElement.insertRow()")}}</td>
+   <td>{{Spec2("DOM2 HTML")}}</td>
+   <td>Spezifiziert genauer, wo die Zeile eingefügt wird.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM1", "level-one-html.html#ID-39872903", "HTMLTableElement.insertRow()")}}</td>
+   <td>{{Spec2("DOM1")}}</td>
+   <td>Initiale Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.HTMLTableElement.insertRow")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("HTMLTableRowElement.insertCell()")}}</li>
+ <li>Das HTML Element, das Zeilen repräsentiert: {{domxref("HTMLTableRowElement")}}</li>
+</ul>
diff --git a/files/de/web/api/htmlunknownelement/index.html b/files/de/web/api/htmlunknownelement/index.html
new file mode 100644
index 0000000000..d1f6107473
--- /dev/null
+++ b/files/de/web/api/htmlunknownelement/index.html
@@ -0,0 +1,56 @@
+---
+title: HTMLUnknownElement
+slug: Web/API/HTMLUnknownElement
+translation_of: Web/API/HTMLUnknownElement
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>Die Schnittstelle <strong><code>HTMLUnknownElement</code></strong> stellt ein ungültiges HTML-Element dar und leitet sich von der Schnittstelle {{DOMxRef("HTMLElement")}} ab, ohne jedoch zusätzliche Eigenschaften oder Methoden zu implementieren.</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<p><em>Keine spezifische Eigenschaft; erbt Eigenschaften von seinem übergeordneten Element, {{DOMxRef("HTMLElement")}}.</em></p>
+
+<h2 id="Methoden">Methoden</h2>
+
+<p><em>Keine spezifische Methode; erbt Eigenschaften von seinem übergeordneten Element, {{DOMxRef("HTMLElement")}}.</em></p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikationen</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "elements.html#htmlunknownelement", "HTMLUnknownElement")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Keine Änderung von {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "dom.html#htmlunknownelement", "HTMLUnknownElement")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td><span class="tlid-translation translation" lang="de"><span title="">Erstdefinition.</span></span></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="text-wrap tlid-copy-target">
+<h2 class="result-shield-container tlid-copy-target" id="Browser-Kompatibilität"><span class="tlid-translation translation" lang="de"><span title="">Browser-Kompatibilität</span></span></h2>
+</div>
+
+<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und senden Sie uns einen Pull Request.</div>
+
+<p>{{Compat("api.HTMLUnknownElement")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Veraltete oder nicht standardmäßige HTML-Elemente, die diese Schnittstelle implementieren:<br>
+  {{HTMLElement("bgsound")}}, {{HTMLElement("blink")}}, {{HTMLElement("isindex")}}, {{HTMLElement("multicol")}}, {{HTMLElement("nextid")}}, {{HTMLElement("rb")}}, {{HTMLElement("spacer")}}</li>
+ <li>{{DOMxRef("SVGUnknownElement")}}</li>
+</ul>
diff --git a/files/de/web/api/index.html b/files/de/web/api/index.html
new file mode 100644
index 0000000000..3173fac5cf
--- /dev/null
+++ b/files/de/web/api/index.html
@@ -0,0 +1,14 @@
+---
+title: Web API Referenz
+slug: Web/API
+tags:
+  - API
+  - DOM
+  - JavaScript
+  - Reference
+  - Web
+translation_of: Web/API
+---
+<p>Javascript bietet eine große Auswahl an hervorragenden Schnittstellen (APIs). Nachfolgend findet sich eine Liste aller APIs auf die Du zurückgreifen kannst, um deine Webapp oder Webseite zu programmieren.</p>
+
+<div>{{APIListAlpha}}</div>
diff --git a/files/de/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html b/files/de/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html
new file mode 100644
index 0000000000..436886fe21
--- /dev/null
+++ b/files/de/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html
@@ -0,0 +1,131 @@
+---
+title: Browser storage limits and eviction criteria
+slug: Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria
+tags:
+  - Datenbank
+  - Datenlöschung
+  - IndexDB
+  - Speicher
+  - Speicherung
+  - client-seitig
+translation_of: Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria
+---
+<div>{{DefaultAPISidebar("IndexedDB")}}</div>
+
+<p class="summary">Es gibt eine Reihe von Web-Technologien, die Daten auf die eine oder andere Art und Weise client-seitig speichern (bspw. auf der lokalen Festplatte). Der Prozess, durch welchen der Browser bestimmt, wieviel Speicherplatz er der Webdatenspeicherung zur Verfügung stellen soll, und was gelöscht werden soll, wenn dieses Limit erreicht wurde, ist nicht einfach und unterscheidet sich zwischen verschiedenen Browsern. Dieser Artikel versucht zu erklären, wie dies funktioniert.</p>
+
+<div class="note">
+<p><strong>Info</strong>: Die untenstehenden Informationen sollten für die meisten modernen Browser zutreffen. Wo bekannt, werden browserspezifische Eigenheiten benannt. Opera und Chrome sollten sich in allen Fällen gleich verhalten. <a href="http://www.opera.com/mobile/mini">Opera Mini</a> (noch presto-basiert, serverseitiges Rendering) speichert kein Daten lokal auf dem Client.</p>
+</div>
+
+<h2 id="Welche_Technologien_nutzen_Browser_zur_lokalen_Datenspeicherung">Welche Technologien nutzen Browser zur lokalen Datenspeicherung?</h2>
+
+<p>In Firefox werden die folgenden Technologien eingesetzt, um Daten lokal bei Bedarf zu sichern. Wir bezeichnen sie in diesem Zusammenhang als "Quota Clients" :</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a></li>
+ <li><a href="http://asmjs.org/">asm.js</a> caching</li>
+ <li><a href="/en-US/docs/Web/API/Cache">Cache API</a></li>
+ <li>Cookies</li>
+</ul>
+
+<div class="note">
+<p><strong>Info</strong>: In Firefox, <a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage</a> wird bald die gleichen Speichermanagement Tools wie in diesem Dokument beschrieben einsetzen.</p>
+</div>
+
+<div class="note">
+<p><strong>Info</strong>: Im privaten Browsermodus werden die meisten Speichermethoden nicht unterstützt. Local storage Daten und Cookies werden zwar noch immer gespeichert, aber sie sind flüchtig — sie werden gelöscht, wenn das letzte private Browserfenster geschlossen wurde.</p>
+</div>
+
+<p>Die "letzte Zugriffszeit" der Quelle wird aufdatiert wenn irgendeine von ihnen aktiviert oder deaktiviert wird — die Löschung der Quelle löscht die Daten für alle diese "Quota Clients".</p>
+
+<p>In Chrome/Opera kümmert sich die Quota Management API um das Quota Management für den <a href="/en-US/docs/Web/HTML/Using_the_application_cache">AppCache</a>, die <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>, WebSQL und die <a href="/en-US/docs/Web/API/File_System_API">File System API</a>.</p>
+
+<h2 id="Unterschiedliche_Typen_der_Datenspeicherung">Unterschiedliche Typen der Datenspeicherung</h2>
+
+<p>Sogar wenn man die gleiche Speichermethode im gleichen Browser verwendet, muss man unterschiedliche Klassen der Datenspeicherung verstehen. Dieser Abschnitt behandelt die Unterschiede in verschiedenen Browsern.</p>
+
+<p>Speicherung kann auf zwei Arten vorkommen:</p>
+
+<ul>
+ <li>Persistent: Persistente Daten sollen für einen längeren Zeitraum zur Verfügung stehen. Sie werden nur gelöscht, wenn sich der Benutzer aktiv dazu entschließt (zum Beispiel kann man in Firefox und Chrome auswählen, alle Daten oder nur Daten von bestimmten Seiten zu löschen, indem man dies über <em>Einstellungen</em> und <em>Datenschutz &amp; Sicherheit &gt; Websitedaten</em> auswählt).</li>
+ <li>Temporär: Diese Daten müssen nicht über einen längeren Zeitraum gespeichert werden. Sie werden in der Reihenfolge gelöscht, wie sie am wenigsten benutzt wurden ({{anch("LRU policy")}}) sobald {{anch("Storage limits")}} erreicht wurden.</li>
+</ul>
+
+<p>Sobald persistente Daten gespeichert werden sollen, bekommt ein Benutzer in Firefox eine Popup-Warnung, um darauf hinzuweisen, dass die Daten dauerhaft gespeichert werden sollen und fragt gleichzeitig ab, ob er damit einverstanden ist. Temporäre Datenspeicherung löst nicht eine solche Warnung aus.</p>
+
+<p>Datenspeicherung ist standardmäßig temporär. Entwickler können die Nutzung persistenten Speichers durch Aufruf der Methode {{domxref("StorageManager.persist()")}} aus der <a href="/en-US/docs/Web/API/Storage_API">Storage API</a> erreichen.</p>
+
+<h2 id="Wo_werden_die_Daten_gespeichert">Wo werden die Daten gespeichert?</h2>
+
+<p>Jeder Speichertyp nutzt ein eigenes Repository. Hier ist ein konkretes Mapping auf die Verzeichnisse im Profil eines Firefox Benutzers (andere Browser können hiervon leicht abweichen):</p>
+
+<ul>
+ <li><code>&lt;profile&gt;/storage</code> — das Hauptverzeichnis für Speicher, die durch den Quota Manager verwaltet werden (siehe unten)</li>
+ <li><code>&lt;profile&gt;/storage/permanent</code> — Repository für die Speicherung persistenter Daten</li>
+ <li><code>&lt;profile&gt;/storage/temporary</code> — Repository für die Speicherung temporärer Daten</li>
+ <li><code>&lt;profile&gt;/storage/default</code> —  Standard-Repository für die Speicherung von Daten</li>
+</ul>
+
+<div>
+<div class="note">
+<p><strong>Info</strong>: Nach Einführung der <a href="/en-US/docs/Web/API/Storage_API">Storage API</a> kann das "permanent" Verzeichnis als obsolet bestrachtet werden. Das "permanent" Verzeichnis beinhaltet nur noch persistente IndexedDB Datenbasen. Es macht keinen Unterschied, ob der box mode "best-effort" oder "persistent" ist — die Daten werden unter &lt;profile&gt;/storage/default abgelegt.</p>
+</div>
+</div>
+
+<div class="note">
+<p><strong>Info</strong>: In Firefox kann man sein Profilverzeichnis aufrufen, indem man <code>about:support</code> in die URL Adresszeile eingibt und den <em>Ordner öffnen</em> Knopf in der Zeile <em>Profilordner</em> drückt.</p>
+</div>
+
+<div class="note">
+<p><strong>Info</strong>: Wenn man im Profilordner in den Datenspeicherordnern sucht, findet man noch einen vierten Ordner namens <code>persistent</code>. Der <code>persistent</code> Ordner wurde ursprünglich vor einer Weile in <code>permanent</code> umbenannt, um Upgrades und Migrationen zu vereinfachen.</p>
+</div>
+
+<div class="note">
+<p><strong>Info</strong>: Benuter sollten unter dem Verzeichnis <code>&lt;profile&gt;/storage</code> keine eigenen dateien oder Verzeichnisse anlegen. Dies führt dazu, dass die Speicherinitialisierung fehlschlägt; zum Beispiel führt dann {{domxref("IDBFactory.open()", "open()")}} zu einem Fehlerevent.</p>
+</div>
+
+<h2 id="Speichergrenzen">Speichergrenzen</h2>
+
+<p>Der maximale Speicherplatz des Browsers ist dynamisch — er basiert auf der Größe der Festplatte. Das <strong>globale Limit</strong> berechnet sich als 50% des freien Plattenspeichers. In Firefox überwacht ein internes Tool namensQuota Manager wieviel Speicher jede Quelle nutzt und löscht gegebenenfalls Daten.</p>
+
+<p>Wenn die Festplatte 500 GB freien Speicher aufweist, ist die maximale Größe des Speichers 250 GB. Wenn diese Größe überschritten wird, kommt ein Prozess namens <strong>origin eviction</strong> ins Spiel, welcher die kompletten Daten einzelner Quellen löscht, bis diese Größe wieder unterschritten wurde. Es werden nie Teile von Quellen gelöscht, da teilweise Daten einer Quelle zu Inkonsistenzen führen können.</p>
+
+<p>Zudem gibt es eine weitere Begrenzung namens <strong>Gruppenlimit</strong> — dieses ist definiert als 20% des globalen Limits, aber hat ein Minimum von 10 MB und ein Maximum von 2 GB. Jede Quelle ist Teil einer Gruppe (Gruppe von Quellen). Es gibt eine Gruppe für jede eTLD+1 Domain. Zum Beispiel:</p>
+
+<ul>
+ <li><code>mozilla.org</code> — Gruppe 1, Quelle 1</li>
+ <li><code>www.mozilla.org</code> — Gruppe 1, Quelle 2</li>
+ <li><code>joe.blogs.mozilla.org</code> — Gruppe 1, Quelle 3</li>
+ <li><code>firefox.com</code> — Gruppe 2, Quelle 4</li>
+</ul>
+
+<p>Innerhalb dieser Gruppe, <code>mozilla.org</code>, <code>www.mozilla.org</code>, und <code>joe.blogs.mozilla.org</code> können zusammen ein Maximum von 20% des globalen Limits nutzen. <code>firefox.com</code> hat als weitere Gruppe ein separates Maximum von 20%.</p>
+
+<p>Beide Limits haben unterschiedliche Auswirkungen, wenn sie erreicht werden:</p>
+
+<ul>
+ <li>Das Gruppenlimit ist eine harte Grenze: es löst keien Datenlöschung aus.</li>
+ <li>Das globale Limit ist eine weiche Grenze, da eine Möglichkeit besteht, dass durch die ausgelöste Datenlöschung Speicher frei wird und sofort genutzt werden kann.</li>
+</ul>
+
+<div class="note">
+<p><strong>Info</strong>: Das Gruppenlimit kann nie mehr als das globale Limit sein. Bei extrem niedrigen Speicherstand von beispielsweisen 8MB globalen Limit, ist das Gruppenlimit ebenfalls nur 8MB.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Wenn das Gruppenlimit überschritten wird oder eine ausgelöste automatische Datenlöschung nicht genug Speicher freiräumen kann, wirft der Browser einen <code>QuotaExceededError</code>.</p>
+</div>
+
+<h2 id="LRU_Policy">LRU Policy</h2>
+
+<p>Wenn der verfügbare Speicherplatz aufgebnraucht wurde, startet das Quota Management eine Datenlöschung nach der LRU (Least Recently Used) Policy — die Daten der am längsten nicht benutzten Quellen werden zuerst gelöscht, dann die zweitältesten usw., bis der Browser wieder unter das Speicherlimit fällt.</p>
+
+<p>Die letzte Zugriffszeit für jede Quelle wird im temporären Speicher vorgehalten. Sobald das globale Limit für temporären Speicher erreicht wurde,  (mehr dazu später), werden alle derzeit ungenutzten Quellen identifiziert (z.Bsp., ohne offene Tabs oder Apps, die aktuell auf den Datenspeicher zugreifen). Diese werden dann nach der letzten Zugriffszeit sortiert. Die am längsten ungenutzten Daten werden dann zuerst gelöscht, bis genug Speicher frei wird, dass die Operation ausgeführt werden kann, die zur Auslösung der Datenlöschung verantwortlich war.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="http://www.html5rocks.com/en/tutorials/offline/quota-research/">Working with quota on mobile browsers</a>, von<a href="http://blog.agektmr.com" title="Eiji Kitamura"> Eiji Kitamura.</a> Eine detaillierte Analyse client-seitiger Speicherung in mobilen Browsern.</li>
+ <li><a href="https://developers.google.com/web/updates/2011/11/Quota-Management-API-Fast-Facts">Quota Management API: Fast Facts</a>, von<a href="http://blog.agektmr.com" title="Eiji Kitamura"> Eiji Kitamura.</a> Ein Blick auf die Quota Management API in Chrome/Blink (welche auch Opera berücksichtigen sollte).</li>
+</ul>
diff --git a/files/de/web/api/indexeddb_api/grundkonzepte_hinter_indexeddb/index.html b/files/de/web/api/indexeddb_api/grundkonzepte_hinter_indexeddb/index.html
new file mode 100644
index 0000000000..6ae6f33dd7
--- /dev/null
+++ b/files/de/web/api/indexeddb_api/grundkonzepte_hinter_indexeddb/index.html
@@ -0,0 +1,194 @@
+---
+title: Grundkonzepte
+slug: Web/API/IndexedDB_API/Grundkonzepte_hinter_IndexedDB
+translation_of: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB
+---
+<p><strong>IndexedDB</strong> ermöglicht es Ihnen Daten innerhalb des Browsers eines Benutzers permanent abzulegen. Weil es Sie Webanwendungen mit funktionsreichen Abfragemöglichkeiten erstellen lässt, können diese Anwendungen sowohl online als auch offline funktionieren. IndexedDB ist geeignet für Anwendungen, die eine große Menge an Daten speichern (z.B. ein Katalog von DVDs in einer Videothek) und Anwendungen, die keine durchgehende Internetverbindung benötigen um zu funktionieren (z.B. E-Mail-Clients, To-Do-Listen oder Notizen).</p>
+<h2 id="Über_dieses_Dokument">Über dieses Dokument</h2>
+<p>Diese Einführung bespricht wesentliche Konzepte und Fachbegriffe in IndexedDB. Sie liefert Ihnen einen Gesamtüberblick und führt Sie in die Schlüsselkonzepte ein. Um mehr über die Begrifflichkeiten von IndexedDB zu erfahren, lesen Sie den Abschnitt <a href="#definitions">Definitionen</a>.</p>
+<p>Eine Anleitung zur Verwendung der API finden Sie im Artikel <a href="/de/docs/IndexedDB/Using_IndexedDB" title="Using IndexedDB">Using IndexedDB</a>. Eine Referenzdokumentierung der IndexedDB-API finden Sie im Artikel <a href="/de/docs/IndexedDB" title="IndexedDB">IndexedDB</a> und dessen Unterseiten, welche die Objekttypen dokumentiert, die von IndexedDB verwendet werden, ebenso wie die Methoden von synchronen wie asynchronen APIs.</p>
+<h2 id="Überblick_über_IndexedDB">Überblick über IndexedDB</h2>
+<p>Mit IndexedDB lassen sich indizierte Objekte mit „Schlüsseln“ ablegen und abrufen. Alle Änderungen an der Datenbank geschehen innerhalb von Transaktionen. Wie die meisten Webspeicher-Lösungen folgt IndexedDB einer <a class="external" href="http://www.w3.org/Security/wiki/Same_Origin_Policy" title="Same Origin Policy">Same-Origin-Policy</a>. Während also auf Daten, die innerhalb einer Domain gespeichert wurden, zugegriffen werden kann, kann nicht domainübergreifend auf Daten zugegriffen werden.</p>
+<p>Die API umfasst sowohl eine <a href="/en/IndexedDB#Asynchronous_API" title="https://developer.mozilla.org/en/IndexedDB#Asynchronous_API">asynchrone</a> API als auch eine <a href="/de/docs/IndexedDB#Synchronous_API" title="Synchronous API">synchrone</a> API. Die asynchrone API kann für die meisten Fälle verwendet werden, auch für <a href="/de/docs/Web/Guide/Performance/Using_web_workers" title="Using web workers">WebWorkers</a>, während die synchrone API nur für den Gebrauch durch WebWorkers gedacht ist. Momentan wird die synchrone API von keinem der großen Browser unterstützt. Aber selbst wenn synchrone APIs unterstützt wären, würden Sie eher die asynchrone API verwenden, wenn Sie mit IndexedDB arbeiten.</p>
+<p>IndexedDB ist eine Alternative zur WebSQL-Datenbank, welche vom W3C am 18. November 2010 als veraltet erklärt wurde. Während sowohl IndexedDB als auch WebSQL Lösungen zur Speicherung von Daten bieten, bieten sie nicht dieselben Funktionalitäten. WebSQL-Datenbank ist ein relationales Datenbankanfragesystem, IndexedDB hingegen ist ein indiziertes Tabellensystem.</p>
+<h2 id="concepts" name="concepts">Wichtige Konzepte</h2>
+<p>Wenn Sie die Arbeit mit anderen Datenbanksystemen gewohnt sind kann die Arbeit mit IndexedDB am Anfang ungewohnt erscheinen. Behalten Sie deshalb folgende wichtige Konzepte im Hinterkopf:</p>
+<ul>
+ <li>
+  <p><strong>IndexedDB-Datenbanken speichern Schlüssel-Wert-Paare.</strong> Die Werte können komplexe strukturierte Objekte sein, und Schlüssel können Eigenschaften dieser Objekte sein. Für eine schnelle Suche oder eine sortierte Aufzählung können Indizes erstellt werden, die irgendeine Eigenschaft der Objekte nutzen.</p>
+ </li>
+ <li>
+  <p><strong>IndexedDB baut auf einem Transaktions-Datenbankmodell auf.</strong> Alles, was Sie in IndexedDB tun, geschieht immer im Kontext einer <a href="#gloss_transaction">Transaktion</a>. Die IndexedDB-API bietet viele Objekte, die Indizes, Tabellen, Positionsmarken usw. repräsentieren, aber jedes einzelne dieser Objekte ist an eine bestimmte Transaktion gebunden. Deshalb können Sie außerhalb einer Transaktion keine Befehle ausführen oder Positionsmarken öffnen.</p>
+  <p>Transaktionen haben eine wohldefinierte Lebenszeit, deswegen führt der Versuch eine Transaktion zu verwenden, nachdem sie beendet ist, zu Exceptions. Außerdem führen Transaktionen ein Auto-Commit durch und können nicht von Hand committed werden.</p>
+  <p>Dieses Transaktionsmodell ist besonders nützlich im Hinblick auf was passieren könnte, wenn ein Benutzer zwei Instanzen einer Webapp gleichzeitig in verschiedenen Tabs öffnen würde. Ohne Transaktions-Operationen könnten die Änderungen der beiden Instanzen miteinander in Konflikt geraten. Wenn Sie mit Transaktionen in Datenbanken nicht vertraut sind, lesen Sie den <a class="link-https" href="https://de.wikipedia.org/wiki/Transaktion_(Informatik)" title="https://secure.wikimedia.org/wikipedia/en/wiki/Database_transaction">Wikipedia-Artikel über Transaktionen</a>. Eine weitere Beschreibung finden Sie außerdem im Abschnitt Definitionen bei <a href="#gloss_transaction">Transaktion</a>.</p>
+ </li>
+ <li>
+  <p><strong>Die IndexedDB API ist meistens asynchron.</strong> Die API übergibt Daten nicht, indem sie Werte zurückgibt; stattdessen muss eine Callback-Funktion übergeben werden. Daten werden nicht in der Datenbank <em>abgelegt</em> oder aus ihr mittels synchronen Methoden <em>abgerufen</em>. Stattdessen muss eine Datenbankoperation <em>angefordert</em> werden. DOM-Ereignisse informieren darüber, wenn die Operation beendet ist, und aus der Art des Ereignisses lässt sich erkennen, ob die Operation erfolgreich war oder fehlschlug. Das klingt zunächst etwas kompliziert, aber hier wurden einige vernünfte Maßnahmen umgesetzt. Diese Funktionsweise ist außerdem nicht so anders als die, mit der <a href="/de/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a> arbeitet.</p>
+ </li>
+ <li>
+  <p><strong>IndexedDB verwendet Anfragen, überall. </strong>Anfragen sind Objekte, die Erfolgs- oder Fehlschlag-DOM-Ereignisse erhalten, welche zuvor erwähnt wurden. Anfragen können die Eigenschaften <code style="font-size: 14px;">onsuccess</code> und <code style="font-size: 14px;">onerror</code> besitzen. Die Funktionen <code style="font-size: 14px;">addEventListener()</code> und <code style="font-size: 14px;">removeEventListener()</code> können auf ihnen ausgeführt werden. Sie haben außerdem die Eigenschaften <code style="font-size: 14px;">readyState</code>, <code style="font-size: 14px;">result</code>, und <code style="font-size: 14px;">errorCode</code>, die den Status der Anfrage mitteilen. Die Eigenschaft <code style="font-size: 14px;">result</code> ist besonders zauberhaft, da sie viele verschiedene Dinge darstellen kann, abhängig davon, wie die Anfrage erzeugt wurde (z.B. eine Instanz von <code style="font-size: 14px;">IDBCursor</code>, oder der Schlüssel zu einem Wert, den Sie gerade der Datenbank hinzugefügt haben).</p>
+ </li>
+ <li>
+  <p><strong>IndexedDB verwendet DOM-Ereignisse um Sie darüber zu informieren, wenn Ergebnisse verfügbar sind.</strong> DOM-Ereignisse haben immer die Eigenschaft <code style="font-size: 14px;">type</code> (in IndexedDB ist sie in den meisten Fällen auf „<code style="font-size: 14px;">success</code>“ oder „<code style="font-size: 14px;">error</code>“ gesetzt). DOM-Ereignisse haben außerdem eine Eigenschaft <code style="font-size: 14px;">target</code>, die Ihnen verrät in welche Richtung das Ereignis unterwegs ist. In den meisten Fällen ist das <code style="font-size: 14px;">target</code> eines Ereignisses das <code style="font-size: 14px;">IDBRequest</code> Objekt, das als Ergebnis einiger Datenbankoperationen erzeugt wurde. Success events don't bubble up and they can't be canceled. Error events, on the other hand, do bubble, and can be cancelled. Das ist recht wichtig, da Fehlerereignisse jede Transaktion, in der sie auftauchen, zu einem Abort führen, es sei denn diese wird annulliert (cancel).</p>
+ </li>
+ <li>
+  <p><strong>IndexedDB ist objektorientiert.</strong> IndexedDB ist keine relationale Datenbank, die Tabellen mit Sammlungen von Zeilen und Spalten hat. Dieser wichtige und grundlegende Unterschied beeinflusst die Art und Weise, wie Sie Ihre Anwendungen gestalten und bauen.<br>
+   <br>
+   In einem traditionellen relationalen Datenspeicher würden Sie Tabellen haben, in denen Sammlungen an Zeilen von Daten und Spalten von <em>named types</em> von Daten gespeichert wären. IndexedDB auf der anderen Seite erfordert es, dass Sie einen Objektspeicher für einen Datentyp erzeugen und einfach JavaScript-Objekte in diesem Speicher ablegen. Jeder Objektspeicher kann eine Sammlung an Indizes beinhalten, die es einfach machen zwischen ihnen zu suchen und zu iterieren. Wenn Sie nicht mit objektorientiertem Managementsystemen von Datenbanken vertraut sind, lesen Sie den <a class="external" href="https://de.wikipedia.org/wiki/Objektdatenbank" title="Objektdatenbank">Wikipedia-Artikel über Objektdatenbanken</a>.</p>
+ </li>
+ <li>
+  <p><strong>IndexedDB verwendet keine </strong><strong>Structured Query Language (<abbr>SQL</abbr>).</strong> Es verwendet Anfragen, die einen Positionsmarker erzeugen, den Sie verwenden um durch die Ergebnismenge zu iterieren. Wenn Sie nicht mit NoSQL-Systemen vertraut sind, lesen Sie den <a class="external" href="https://de.wikipedia.org/wiki/NoSQL" title="NoSQL">Wikipedia-Artikel zu NoSQL</a>.</p>
+ </li>
+ <li>
+  <p><a name="origin"><strong>IndexedDB hält an einer Same-Origin-Policy fest</strong></a>. Eine Herkunft (origin) besteht aus der Domain, dem Anwendungsschichtenprotokoll und dem Port einer URL des Dokuments, auf dem das Skript ausgeführt wird. Jede Herkunft hat ihre eigene entsprechende Untermenge an Datenbanken. Jede Datenbank hat einen Namen, das sie innerhalb einer Herkunft identifiziert.<br>
+   <br>
+   Die von IndexedDB auferlegte Sicherheitsbegrenzung hindert Anwendungen daran, auf Daten einer anderen Herkunft zuzugreifen. Während eine Anwendung oder eine Seite, die unter <a class="external" href="http://www.example.com/app/" rel="freelink">http://www.example.com/app/</a> liegt, Daten aus <a class="external" href="http://www.example.com/dir/" rel="freelink">http://www.example.com/dir/</a> abrufen kann, weil sie die gleiche Herkunft haben, kann sie nicht Daten aus <a class="external" href="http://www.example.com:8080/dir/" rel="freelink">http://www.example.com:8080/dir/</a> (anderer Port) oder <a class="link-https" href="https://www.example.com/dir/" rel="freelink">https://www.example.com/dir/</a> (anderes Protokoll) abrufen, weil sie verschiedene Herkünfte haben.</p>
+ </li>
+</ul>
+<h2 id="definitions" name="definitions">Definitionen</h2>
+<p>Dieser Abschitt definiert und erklärt Begriffe, die in der IndexedDB-API verwendet werden.</p>
+<h3 id="database" name="database">Datenbank</h3>
+<dl>
+ <dt>
+  <a name="gloss_database">Datenbank</a></dt>
+ <dd>
+  Ein Aufbewahrungsort für Informationen, typischerweise bestehend aus einem oder mehreren <a href="#gloss_object_store" title="#gloss_object_store"><em>Objektspeichern</em></a>. Jede Datenbank muss folgende Angaben enthalten:
+  <ul>
+   <li>Name. Er identifiziert die Datenbank innerhalb einer konkreten Herkunft und verändert sich nicht innerhalb seiner Lebenszeit. Der Name kann aus einem beliebigen String-Wert bestehen (einschließlich dem leeren String).</li>
+   <li>
+    <p>Aktuelle <a href="#gloss_version"><em>Version</em></a>. Wenn eine Datenbank zum ersten Mal erstellt wird, nimmt ihre Version den integer-Wert 1 an, wenn nichts anderes angegeben wird. Jede Datenbank kann zu einem Zeitpunkt nur eine Version haben.</p>
+   </li>
+  </ul>
+ </dd>
+ <dt>
+  <a name="gloss_object_store">Objektspeicher</a></dt>
+ <dd>
+  <p>Das Instrument, mit welchem Daten in einer Datenbank gespeichert werden. Der Objektspeicher hält Eintragungen aus Schlüssel-Wert-Paaren permanent. Eintragungen innerhalb eines Objektspeichers werden entsprechend der <em><a href="#gloss_key">Schlüssel</a></em> in aufsteigender Reihenfolge sortiert.</p>
+  <p>Jeder Objektspeicher muss einen Namen haben, der innerhalb seiner Datenbank einzigartig ist. Der Objektspeicher kann optional einen <em><a href="#gloss_keygenerator">Schlüsselerzeuger</a></em> und einen <em><a href="#gloss_keypath">Schlüsselpfad</a></em> besitzen. Wenn der Objektspeicher einen Schlüsselpfad hat, verwendet er <em><a href="#gloss_inline_key">in-line keys</a></em>; ansonsten <em><a href="#gloss_outofline_key">out-of-line keys</a></em>.</p>
+  <p>Eine Referenzdokumentation zu Objektspeichern finden Sie unter <a href="../../../../en/IndexedDB/IDBObjectStore" rel="internal">IDBObjectStore</a> oder <a href="../../../../en/IndexedDB/IDBObjectStoreSync" rel="internal">IDBObjectStoreSync</a>.</p>
+ </dd>
+ <dt>
+  <a name="gloss_version">Version</a></dt>
+ <dd>
+  Wenn eine Datenbank zum ersten Mal erstellt wird, ist ihre Versionsnummer die integer-Zahl 1. Jede Datenbank hat zu jedem Zeitpunkt genau eine Versionsnummer; eine Datenbank kann nicht in verschiedenen Versionen gleichzeitig existieren. Die Versionsnummer kann nur geändert werden, indem die Datenbank mit einer größeren Versionsnummer geöffnet wird als mit der aktuellen. Das wird die <em>Transaktion</em> <code>versionchange</code> starten und ein <code>upgradeneeded</code> Ereignis auslösen. Die einzige Stelle, an der das Schema der Datenbank geupdatet werden kann, ist innerhalb des Handlers dieses Ereignisses.<br>
+   </dd>
+ <dd>
+  Anmerkung: Diese Definition beschreibt die <a class="external" href="http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html">aktuellsten Spezifikationen</a>, welche nur in Browsern auf dem neuesten Stand implementiert sind. In alten Browsern ist die mittlerweile veraltete und entfernte Methode <a href="/en-US/docs/IndexedDB/IDBDatabase#setVersion()" title="/en-US/docs/IndexedDB/IDBDatabase#setVersion()"><code>IDBDatabase.setVersion()</code></a> implementiert.</dd>
+ <dt>
+  <a name="gloss_database_connection">Datenbankverbindung</a></dt>
+ <dd>
+  Eine Operation, die beim Öffnen einer <em><a href="#gloss_database">Datenbank</a></em> erstellt wird. Eine vorgegebene Datenbank kann mehrere Verbindungen gleichzeitig haben.</dd>
+ <dt>
+  <a name="gloss_transaction">Transaktion</a></dt>
+ <dd>
+  <p>Eine nicht teilbare und dauerhafte Menge an Datenzugriffs- und Datenmodifikationsoperationen auf einer bestimmten Datenbank. Durch Transaktionen können Sie auf die Daten einer Datenbank zugreifen. Tatsächlich muss jeder Lese- oder Schreibvorgang von Daten in einer Transaktion stattfinden.<br>
+   <br>
+   Eine Datenbankverbindung kann mit mehreren aktiven Transaktionen gleichzeitig verknüpft sein, so lange schreibende Transaktionen keine überlappenden <a href="#gloss_scope"><em>scopes</em></a> haben. The scope of transactions, which is defined at creation, determines which object stores the transaction can interact with and remains constant for the lifetime of the transaction. So, for example, if a database connection already has a writing transaction with a scope that just covers the <code>flyingMonkey</code> object store, you can start a second transaction with a scope of the <code>unicornCentaur</code> and <code>unicornPegasus</code> object stores. As for reading transactions, you can have several of them—even overlapping ones.</p>
+  <p>Transactions are expected to be short-lived, so the browser can terminate a transaction that takes too long, in order to free up storage resources that the long-running transaction has locked. You can abort the transaction, which rolls back the changes made to the database in the transaction. And you don't even have to wait for the transaction to start or be active to abort it.</p>
+  <p>The three modes of transactions are: <code>readwrite</code>, <code>readonly</code>, and <code>versionchange</code>. The only way to create and delete object stores and indexes is by using a <code>versionchange</code> transaction. To learn more about transaction types, see the reference article for <a href="/de/docs/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB</a>.</p>
+  <p>Because everything happens within a transaction, it is a very important concept in IndexedDB. To learn more about transactions, especially on how they relate to versioning, see <a href="/en-US/docs/Web/API/IDBTransaction" rel="internal">IDBTransaction</a>, which also has reference documentation. For the documentation on the synchronous API, see <a href="/en-US/docs/Web/API/IDBTransactionSync" rel="internal">IDBTransactionSync</a>.</p>
+ </dd>
+ <dt>
+  <a name="gloss_request">Anfrage</a></dt>
+ <dd>
+  Die Operation, mit der Lese- und Schreibvorgänge auf einer Datenbank ausgeführt werden. Jede Anfrage repräsentiert eine Lese- oder Schreiboperation.</dd>
+ <dt>
+  <a name="gloss_index">Index</a></dt>
+ <dd>
+  <p>Ein Spezialobjektspeicher zum Nachschlagen von Einträgen eines anderen Objektspeichers, bezeichnet als <em>referenzierter Objektspeicher</em>. Der Index ist ein persistenter Schlüssel-Wert-Speicher, wobei der Wert seiner Einträge dem Schlüssel eines Eintrages im referenzierten Objektspeicher entspricht. Die Einträge in einem Index werden automatisch eingepflegt, sobald Einträge im referenzierten Objekt eingefügt, aktualisiert oder entfernt werden. Jeder Eintrag in einem Index kann auf nur einen Eintrag in seinem referenzierten Objektspeicher zeigen, aber mehrere Indizes können auf denselben Objektspeicher verweisen. Wenn der Objektspeicher sich ändert, werden alle Indizes, die auf ihn verweisen, automatisch aktualisiert.</p>
+  <p>Alternativ können Einträge eines Objektspeichers mithilfe eines <a href="#gloss_key">Schlüssels</a> nachgeschlagen werden.</p>
+  <p>Um mehr über die Verwendung von Indizes zu erfahren, lesen Sie <a href="/de/docs/IndexedDB/Using_IndexedDB#Using_an_index" title="en/IndexedDB/Using_IndexedDB#Using_an_index">Using IndexedDB</a>. Die Referenzdokumentation zu Indizes finden Sie unter <a href="/de/docs/Web/API/IDBKeyRange" rel="internal">IDBKeyRange</a>.</p>
+ </dd>
+</dl>
+<h3 id="key" name="key">Schlüssel und Wert</h3>
+<dl>
+ <dt>
+  <a name="gloss_key">Schlüssel</a></dt>
+ <dd>
+  <p>Ein Datenwert über welchen abgelegte Werte aus dem Objektspeicher sortiert und ausgelesen werden können. Der Objektspeicher kann den Schlüssel aus einer dieser drei Quellen erlangen: Einem <em><a href="#gloss_keygenerator">Schlüsselgenerator</a></em>, einem <em><a href="#gloss_keypath">Schlüsselpfad</a></em> und einem explizit angegebem Wert. Der Schlüssel muss aus einem Datentyp bestehen, der eine Nummer hat, die größer ist als die des Schlüssel vor ihm. Jeder Eintrag in einem Objektspeicher muss einen innerhalb des gleichen Objektspeichers einzigartigen Schlüssel haben, deshalb können nicht mehrere Einträge mit demselben Schlüssel in einem vorgegebenem Objektspeicher vorliegen.<br>
+   <br>
+   Ein Schlüssel kann einen der folgenden Typen haben: <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/String" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String">string</a>, <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Date" title="en/JavaScript/Reference/Global Objects/Date">date</a>, float und <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Array" title="en/JavaScript/Reference/Global Objects/Array">array</a>. Bei Arrays kann der Schlüssel zwischen einem leeren Wert und unendlich liegen. Arrays können wiederum Arrays beinhalten. Es gibt keine Vorschrift nur Schlüssel der Typen string oder integer zu verwenden {{ fx_minversion_inline("11") }}.</p>
+  <p>Alternativ können Sie Einträge eines Objektspeichers auch mithilfe eines <em><a href="#gloss_index">Index</a></em> nachschlagen.</p>
+ </dd>
+ <dt>
+  <a name="gloss_keygenerator">Schlüsselgenerator</a></dt>
+ <dd>
+  Ein Mechanismus um neue Schlüssel in einer angeordneten Reihenfolge zu erzeugen. Wenn ein Objektspeicher über keinen Schlüsselgenerator verfügt, muss die Anwendung Schlüssel für zu speichernde Einträge zur Verfügung stellen. Generatoren werden nicht zwischen Speichern geteilt. Dies ist mehr ein Detail von Browserimplementierungen, da in der Webentwicklung nicht wirklich Schlüsselgeneratoren erzeugt oder auf sie zugegriffen wird.</dd>
+ <dt>
+  <a name="gloss_inline_key">in-line key</a></dt>
+ <dd>
+  A key that is stored as part of the stored value. It is found using a <em>key path</em>. An in-line key can be generated using a generator. After the key has been generated, it can then be stored in the value using the key path or it can also be used as a key.</dd>
+ <dt>
+  <a name="gloss_outofline_key">out-of-line key</a></dt>
+ <dd>
+  A key that is stored separately from the value being stored.</dd>
+ <dt>
+  <a name="gloss_keypath">key path</a></dt>
+ <dd>
+  Defines where the browser should extract the key from a value in the object store or index. A valid key path can include one of the following: an empty string, a JavaScript identifier, or multiple JavaScript identifiers separated by periods. It cannot include spaces.</dd>
+ <dt>
+  <a name="gloss_value">value</a></dt>
+ <dd>
+  <p>Each record has a value, which could include anything that can be expressed in JavaScript, including: <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Boolean" rel="internal" title="en/JavaScript/Reference/Global_Objects/Boolean">boolean</a>, <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Number" rel="internal" title="en/JavaScript/Reference/Global_Objects/Number">number</a>, <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/String" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String">string</a>, <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Date" title="en/JavaScript/Reference/Global Objects/Date">date</a>, <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Object" title="en/JavaScript/Reference/Global Objects/Object">object</a>, <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Array" rel="internal" title="en/JavaScript/Reference/Global_Objects/Array">array</a>, <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/RegExp" rel="internal" title="en/JavaScript/Reference/Global_Objects/RegExp">regexp</a>, <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/undefined" title="en/JavaScript/Reference/Global_Objects/undefined">undefined</a>, and null.</p>
+  <p>When an object or array is stored, the properties and values in that object or array can also be anything that is a valid value.</p>
+  <p><a href="/de/docs/Web/API/Blob" title="en/DOM/Blob">Blobs</a> and files can be stored, cf. <a class="external" href="http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html">specification</a> {{ fx_minversion_inline("11") }}.</p>
+ </dd>
+</dl>
+<h3 id="range" name="range">Range and scope</h3>
+<dl>
+ <dt>
+  <a name="gloss_scope">scope</a></dt>
+ <dd>
+  The set of object stores and indexes to which a transaction applies. The scopes of read-only transactions can overlap and execute at the same time. On the other hand, the scopes of writing transactions cannot overlap. You can still start several transactions with the same scope at the same time, but they just queue up and execute one after another.</dd>
+ <dt>
+  <a name="gloss_cursor">cursor</a></dt>
+ <dd>
+  A mechanism for iterating over multiple records with a <em>key range</em>. The cursor has a source that indicates which index or object store it is iterating. It has a position within the range, and moves in a direction that is increasing or decreasing in the order of record keys. For the reference documentation on cursors, see <a href="/de/docs/Web/API/IDBCursor" rel="internal">IDBCursor</a> or <a href="/de/docs/Web/API/IDBCursorSync" rel="internal">IDBCursorSync</a>.</dd>
+ <dt>
+  <a name="gloss_key_range">key range</a></dt>
+ <dd>
+  <p>A continuous interval over some data type used for keys. Records can be retrieved from object stores and indexes using keys or a range of keys. You can limit or filter the range using lower and upper bounds. For example, you can iterate over all values of a key between x and y.</p>
+  <p>For the reference documentation on key range, see <a href="/de/docs/Web/API/IDBKeyRange" rel="internal">IDBKeyRange</a>.</p>
+ </dd>
+</dl>
+<h2 id="limitations" name="limitations">Limitations</h2>
+<p>IndexedDB is designed to cover most cases that need client-side storage. However, it is not designed for a few cases like the following:</p>
+<ul>
+ <li>Internationalized sorting. Not all languages sort strings in the same way, so internationalized sorting is not supported. While the database can't store data in a specific internationalized order, you can sort the data that you've read out of the database yourself.</li>
+ <li>Synchronizing. The API is not designed to take care of synchronizing with a server-side database. You have to write code that synchronizes a client-side indexedDB database with a server-side database.</li>
+ <li>Full text searching. The API<span style="direction: ltr;"> does not have an</span><span style="direction: ltr;"> equivalent of the <code>LIKE</code> operator in SQL. </span></li>
+</ul>
+<p>In addition, be aware that browsers can wipe out the database, such as in the following conditions:</p>
+<ul>
+ <li>The user requests a wipe out.<br>
+  Many browsers have settings that let users wipe all data stored for a given website, including cookies, bookmarks, stored passwords, and IndexedDB data.</li>
+ <li>The browser is in private browsing mode.<br>
+  Some browsers, have "private browsing" (Firefox) or "incognito" (Chrome) modes. At the end of the session, the browser wipes out the database.</li>
+ <li>The disk or quota limit has been reached.</li>
+ <li>The data is corrupt.</li>
+ <li>An incompatible change is made to the feature.</li>
+</ul>
+<p>The exact circumstances and browser capabilities change over time, but the general philosophy of the browser vendors is to make the best effort to keep the data when possible.</p>
+<div class="warning">
+ <p><strong>Warning:</strong> At the moment due to bugs or on purpose it's impossible to open an IndexedDB database from a <a href="/de/docs/Accessibility/An_overview_of_accessible_web_applications_and_widgets" title="/en-US/docs/Accessibility/An_overview_of_accessible_web_applications_and_widgets">Web App</a>. This needs more investigation and then be documented.</p>
+</div>
+<h2 id="next" name="next">Next step</h2>
+<p>OK, so, now with these big concepts under our belts, we can get to more concrete stuff. For a tutorial on how to use the API, see <a href="/de/docs/IndexedDB/Using_IndexedDB" title="en/IndexedDB/IndexedDB primer">Using IndexedDB</a>.</p>
+<h2 id="See_also">See also</h2>
+<p>Specification</p>
+<ul>
+ <li><a href="http://www.w3.org/TR/IndexedDB/" title="http://www.w3.org/TR/IndexedDB/"><span style="direction: ltr;">Indexed Database API Specification</span></a></li>
+</ul>
+<p>Reference</p>
+<ul>
+ <li><a href="/de/docs/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB API Reference</a></li>
+</ul>
+<p>Tutorials</p>
+<ul>
+ <li><a href="/de/docs/IndexedDB/Using_IndexedDB" title="en/IndexedDB/IndexedDB primer">Using IndexedDB</a></li>
+ <li><a class="external" href="http://www.html5rocks.com/tutorials/indexeddb/todo/" title="http://www.html5rocks.com/tutorials/indexeddb/todo/">A simple TODO list using HTML5 IndexedDB</a><span class="external">. </span><span class="external"> {{ Note("This example uses an old version of the spec and does not work on up-to-date browsers - it still uses the removed <code>setVersion()</code> method.") }}</span></li>
+</ul>
+<p>Related article</p>
+<ul>
+ <li><a class="external" href="http://msdn.microsoft.com/de-de/magazine/gg679063%28en-us%29.aspx" title="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">IndexedDB — The Store in Your Browser</a></li>
+</ul>
diff --git a/files/de/web/api/indexeddb_api/index.html b/files/de/web/api/indexeddb_api/index.html
new file mode 100644
index 0000000000..171ca8a4c5
--- /dev/null
+++ b/files/de/web/api/indexeddb_api/index.html
@@ -0,0 +1,252 @@
+---
+title: IndexedDB
+slug: Web/API/IndexedDB_API
+tags:
+  - API
+  - Datenbank
+  - Einstieg
+  - IndexedDB
+  - NeedsTranslation
+  - Referenz
+  - Speicher
+  - TopicStub
+  - speichern
+translation_of: Web/API/IndexedDB_API
+---
+<div>{{DefaultAPISidebar("IndexedDB")}}</div>
+
+<p>IndexedDB ist eine low-level API für die clientseitige Speicherung großer Mengen strukturierter Daten einschließlich Dateien. Sie erlaubt auch Hochleistungssuchen dieser Daten durch die Verwendung von Indizes. Während der <a href="/de/docs/DOM/Storage" title="en-US/docs/DOM/Storage">DOM Speicher</a> nützlich zur Speicherung kleiner Datenmengen ist, ist er für größere Mengen strukturierte Daten wenig hilfreich. IndexedDB stellt hierfür eine Lösung bereit. Dies ist die Einstiegsseite der IndexedDB Referenz von MDN — hier stellen wir Links zur vollständigen API Referenz, Gebrauchsanleitungen, Unterstützungsdetails der Browser und einige Erklärungen des Schlüsselkonzepts zur Verfügung.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<div class="note">
+<p><strong>Anmerkung</strong>: Die IndexedDB API ist leistungsfähig, kann aber für einfache Anwendungen zu kompliziert erscheinen. Wenn Du eine einfachere API bevorzugst, versuche Sammlungen wie <a href="https://localforage.github.io/localForage/">localForage</a> und <a href="http://www.dexie.org/">dexie.js</a>. Diese machen IndexedDB benutzerfreundlicher.</p>
+</div>
+
+<div class="note">
+<p><strong>Anmerkung</strong>: Manche älteren Browser unterstützen IndexedDB nicht aber sie unterstützen <a href="http://caniuse.com/sql-storage"> WebSQL</a>. Eine Möglichkeit dieses Problem zu umgehen ist es, mittels polyfill auf <a href="http://www.w3.org/TR/webdatabase/">WebSQL</a> oder auch auf <a href="/de/docs/Web/Guide/API/DOM/Storage#localStorage">localStorage</a> für nicht unterstützende Browser zurückzugreifen. Das beste erhältiche polyfill ist derzeit <a href="https://localforage.github.io/localForage/">localForage</a>.</p>
+</div>
+
+<h2 id="Schlüsselkonzepte_und_Gebrauch">Schlüsselkonzepte und Gebrauch</h2>
+
+<p>IndexedDB ist ein direktes Datenbank System, wie ein SQL-basiertes RDMS; während allerdings das Letztere Tabellen mit fixen Spalten benutzt, ist IndexedDB eine JavaScript-basierte objekt-orientierte Datenbank. IndexedDB läßt dich Objekte, die mit einem <strong>Schlüssel</strong> indiziert sind, speichern und wiederfinden. Jedes Objekt, das von einem <a href="/de/docs/Web/Guide/API/DOM/The_structured_clone_algorithm">strukturierten Klon Algorithmus</a> unterstützt wird, kann gespeichert werden. Du brauchst zum Beschreiben des Datenbankschemas eine offene Verbindung zu deiner Datenbank, dann kannst du Daten mit einer Reihe von Tranaktionen wiederfinden und aktualisieren.</p>
+
+<ul>
+ <li>Lies mehr über die <a href="/de/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB">Konzepte hinter IndexedDB</a>.</li>
+ <li>Nutze IndexedDB asynchron, indem du die Grundlagen mit unserer <a href="/de/docs/Web/API/IndexedDB_API/Using_IndexedDB">IndexedDB Anleitung</a> erlernst.</li>
+ <li>Finde Entwickler Empfehlungen, um Web Apps offline arbeiten zu lassen auf unserer <a href="/en-US/Apps/Build/Offline">Offline Apps</a> Seite</li>
+</ul>
+
+<div class="note">
+<p><strong>Anmerkung</strong>: wie die meisten Web Speicher Lösungen folgt IndexedDB einem <a class="external" href="http://www.w3.org/Security/wiki/Same_Origin_Policy">gleicher-Ursprung Grundsatz</a>. Deshalb ist es nicht möglich auf Daten anderer Domänen zuzugreifen, während man auf gespeicherte Daten innerhalb einer Domäne zugreift.</p>
+</div>
+
+<h3 id="Synchron_und_asynchron">Synchron und asynchron</h3>
+
+<p>Operationen unter Verwendung von IndexedDB werden asynchron durchgeführt, um Anwendungen nicht zu blockieren. IndexedDB beinhaltete ursprünglich eine asynchrone und eine synchrone API; die synchrone API war nur für den Gebrauch von <a href="/de/docs/Web/Guide/Performance/Using_web_workers">Web Workers</a> gedacht. Die synchrone Version wurde aus der Spezifikation entfernt, weil ihre Notwendigkeit fraglich war, aber sie kann in Zukunft wieder eingeführt werden, wenn es genug Nachfrage von Web Entwicklern gibt.</p>
+
+<h3 id="Speichergrenzen_und_Löschkriterien">Speichergrenzen und Löschkriterien</h3>
+
+<p>Es gibt mehrere Webtechnologien, um Daten auf die eine oder andere Art auf der Client Seite zu speichern (d. h. auf deiner lokalen Festplatte), über IndexedDB wird dabei am häufigsten geredet. Der Prozess mit dem der Browser herausfindet, wieviel Speicherplatz Webdaten zur Verfügung gestellt werden soll und was gelöscht werden soll, wenn die Grenze erreicht ist, ist nicht einfach und unterscheidet sich zwischen den Browsern. <a href="/de/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">Browser Speichergrenzen und Löschkriterien</a> versuchen zu erklären, wie das geschieht - zumindest im Fall von Firefox.</p>
+
+<h2 id="IndexedDB_Schnittstellen">IndexedDB Schnittstellen</h2>
+
+<p>Um Zugang zu einer Datenbank zu erhalten, benutze <a href="/de/docs/Web/API/IDBFactory.open"><code>open()</code></a> von den <a href="/de/docs/Web/API/IDBEnvironment.indexedDB"><code>indexedDB</code></a> Attributen eines <a href="/de/docs/DOM/window">window</a> Objekts. Diese Methode gibt ein {{domxref("IDBRequest")}} Objekt zurück; asynchrone Operationen kommunizieren mit der aufrufenden Anwendung durch feuern von Events von {{domxref("IDBRequest")}} Objekten.</p>
+
+<h3 id="Mit_einer_Datenbank_verbinden">Mit einer Datenbank verbinden</h3>
+
+<dl>
+ <dt>{{domxref("IDBEnvironment")}}</dt>
+ <dd>Stellt den Zugang zur IndexedDB Funktionalität zur Verfügung. Es ist implementiert durch die {{domxref("window")}} und {{domxref("worker")}} Objekte.</dd>
+ <dt>{{domxref("IDBFactory")}}</dt>
+ <dd>Stellt den Zugang zu einer Datenbank bereit. Dies ist die durch das globale Objekt <a href="/en-US/docs/Web/API/IDBEnvironment.indexedDB"><code>indexedDB </code></a>bereitgestellte Schnittstelle und dadurch der Eingangspunkt für die API.</dd>
+ <dt>{{domxref("IDBOpenDBRequest")}}</dt>
+ <dd>Stellt eine Anfrage zum Öffnen einer Datenbank dar.</dd>
+ <dt>{{domxref("IDBDatabase")}}</dt>
+ <dd>Repräsentiert eine Verbindung zu einer Datenbank. Es ist der einzige Weg eine Transaktion in der Datenbank zu erreichen.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("IDBRequest")}}</dt>
+ <dd>Eine allgemeine Schnittstelle, die Datenbankabfragen behandelt und den Zugang zu Ergebnissen bereitstellt.</dd>
+</dl>
+
+<h3 id="Abrufen_und_modifizieren_von_Daten">Abrufen und modifizieren von Daten</h3>
+
+<dl>
+ <dt>{{domxref("IDBTransaction")}}</dt>
+ <dd>Stellt eine Transaktion dar. Du erstellst eine Transaktion zu einer Datenbank, beschreibst den Geltungsbereich (beispielsweise auf welchen Objekt Speicher du zugreifen willst), und bestimmst die Art des Zugriffs (nur lesen oder lesen und schreiben), den du willst.</dd>
+ <dt>{{domxref("IDBObjectStore")}}</dt>
+ <dd>Steht für einen Objektspeicher, der Zugriff auf einen Datensatz in einer IndexedDB Datenbank erlaubt via Primärschlüsselsuche.</dd>
+ <dt>{{domxref("IDBIndex")}}</dt>
+ <dd>Gestattet ebenfalls Zugriff auf eine Teilmenge von Daten in einer IndexedDB Datenbank. Nutzt allerdings einen Index anstelle eines Primärschlüssels um an Einträge zu gelangen. Dies kann schneller sein als die Verwendung von {{domxref("IDBObjectStore")}}.</dd>
+ <dt>{{domxref("IDBCursor")}}</dt>
+ <dd>Iterates over object stores and indexes.</dd>
+ <dt>{{domxref("IDBCursorWithValue")}}</dt>
+ <dd>Iterates over object stores and indexes and returns the cursor's current value.</dd>
+ <dt>{{domxref("IDBKeyRange")}}</dt>
+ <dd>Defines a key range that can be used to retrieve data from a database in a certain range.</dd>
+ <dt>{{domxref("IDBLocaleAwareKeyRange")}} {{Non-standard_inline}}</dt>
+ <dd>Defines a key range that can be used to retrieve data from a database in a certain range, sorted acording to the rules of the locale specified for a certain index (see <a href="/en-US/docs/Web/API/IDBObjectStore/createIndex#Parameters"><code>createIndex()</code>'s optionalParameters</a>.).</dd>
+</dl>
+
+<h3 id="Custom_event_interfaces">Custom event interfaces</h3>
+
+<p>This specification fires events with the following custom interface:</p>
+
+<dl>
+ <dt>{{domxref("IDBVersionChangeEvent")}}</dt>
+ <dd>The <code>IDBVersionChangeEvent</code> interface indicates that the version of the database has changed, as the result of an {{domxref("IDBOpenDBRequest.onupgradeneeded")}} event handler function.</dd>
+</dl>
+
+<h3 id="Obsolete_interfaces">Obsolete interfaces</h3>
+
+<p>An early version of the specification also defined these now removed interfaces. They are still documented in case you need to update previously written code:</p>
+
+<dl>
+ <dt>{{domxref("IDBVersionChangeRequest")}} {{obsolete_inline}}</dt>
+ <dd>Represents a request to change the version of a database. The way to change the version of the database has since changed (by calling {{domxref("IDBFactory.open")}} without also calling {{domxref("IDBDatabase.setVersion")}}), and the interface {{domxref("IDBOpenDBRequest")}} now has the functionality of the removed {{domxref("IDBVersionChangeRequest")}}.</dd>
+ <dt>{{domxref("IDBDatabaseException")}} {{obsolete_inline}}</dt>
+ <dd>Represents exception conditions that can be encountered while performing database operations.</dd>
+ <dt>{{domxref("IDBTransactionSync")}} {{obsolete_inline}}</dt>
+ <dd>Sync version of {{domxref("IDBTransaction")}}.</dd>
+ <dt>{{domxref("IDBObjectStoreSync")}} {{obsolete_inline}}</dt>
+ <dd>Sync version of {{domxref("IDBObjectStore")}}.</dd>
+ <dt>{{domxref("IDBIndexSync")}} {{obsolete_inline}}</dt>
+ <dd>Sync version of {{domxref("IDBIndex")}}.</dd>
+ <dt>{{domxref("IDBFactorySync")}} {{obsolete_inline}}</dt>
+ <dd>Sync version of {{domxref("IDBFactory")}}.</dd>
+ <dt>{{domxref("IDBEnvironmentSync")}} {{obsolete_inline}}</dt>
+ <dd>Sync version of {{domxref("IDBEnvironment")}}.</dd>
+ <dt>{{domxref("IDBDatabaseSync")}} {{obsolete_inline}}</dt>
+ <dd>Sync version of {{domxref("IDBDatabase")}}.</dd>
+ <dt>{{domxref("IDBCursorSync")}} {{obsolete_inline}}</dt>
+ <dd>Sync version of {{domxref("IDBCursor")}}.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<ul>
+ <li><a class="external" href="http://marco-c.github.io/eLibri/">eLibri:</a> A powerful library and eBook reader application, written by Marco Castelluccio, winner of the IndexedDB Mozilla DevDerby.</li>
+ <li><a class="external" href="https://github.com/chrisdavidmills/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>): The reference application for the examples in the reference docs.</li>
+ <li><a class="external" href="http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/">Storing images and files in IndexedDB</a></li>
+</ul>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#idl-def-IDBEnvironment', 'IDBEnvironment')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>
+    <p>23.0 {{property_prefix("webkit")}}<br>
+     24</p>
+   </td>
+   <td>{{CompatGeckoDesktop("10.0")}} {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("37.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>IDBLocaleAwareKeyRange</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("43.0")}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>IDBLocaleAwareKeyRange</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("43.0")}}<sup>[2]</sup></td>
+   <td>2.5<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<ul>
+ <li>[1] {{domxref("IDBCursorWithValue")}} is not available in workers until Gecko 42.0 {{geckoRelease("42.0")}}.</li>
+ <li>[2] This feature is currently hidden behind a flag — to enable it and experiment, go to about:config and enable dom.indexedDB.experimental.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="external" href="https://localforage.github.io/localForage/">localForage</a>: A Polyfill providing a simple name:value syntax for client-side data storage, which uses IndexedDB in the background, but falls back to WebSQL and then localStorage in browsers that don't support IndexedDB.</li>
+ <li><a class="external" href="http://www.dexie.org/">dexie.js</a>: A wrapper for IndexedDB that allows much faster code development via nice, simple syntax.</li>
+</ul>
diff --git a/files/de/web/api/indexeddb_api/indexeddb_verwenden/index.html b/files/de/web/api/indexeddb_api/indexeddb_verwenden/index.html
new file mode 100644
index 0000000000..3d6d61cf3f
--- /dev/null
+++ b/files/de/web/api/indexeddb_api/indexeddb_verwenden/index.html
@@ -0,0 +1,1180 @@
+---
+title: Verwendung von IndexedDB
+slug: Web/API/IndexedDB_API/IndexedDB_verwenden
+translation_of: Web/API/IndexedDB_API/Using_IndexedDB
+---
+<p>Mit IndexedDB lassen sich Daten innerhalb des Browsers eines Benutzers permanent abzulegen. Es können so Webanwendungen mit funktionsreichen Abfragemöglichkeiten in Anwendungen erstellt werden, die sowohl online als auch offline funktionieren können, da keine Netzwerkfunktionalitäten benötigt werden.</p>
+
+<h2 id="Über_dieses_Dokument">Über dieses Dokument</h2>
+
+<p>Dieses Tutorial bespricht die Verwendung der asynchronen API von IndexedDB. Wenn Sie nicht mit IndexedDB vertraut sind, sollten Sie zuerst den Artikel <a href="/de/docs/IndexedDB/Grundkonzepte_hinter_IndexedDB" title="Grundkonzepte">Grundkonzepte</a> lesen.</p>
+
+<p>Eine Referenzdokumentation zur IndexedDB-API finden Sie im Artikel <a href="/de/docs/IndexedDB" title="IndexedDB">IndexedDB</a> und dessen Unterseiten, welche die Typen und Objekten dokumentieren, die von IndexedDB verwendet werden, ebenso wie die Methoden von sowohl synchronen als auch asynchronen APIs.</p>
+
+<h2 id="pattern" name="pattern">Grundschema</h2>
+
+<p>Das von IndexedDB unterstützte Grundschema sieht folgendermaßen aus:</p>
+
+<ol>
+ <li>Öffne eine Datenbank und starte eine Transaktion.</li>
+ <li>Erzeuge einen Objektspeicher.</li>
+ <li>Fordere die Ausführung von Datenbankoperationen an, wie das Hinzufügen und Auslesen von Daten.</li>
+ <li>Warte auf die richtige Art von DOM-Ereignis, das auftritt, wenn die Operation beendet ist.</li>
+ <li>Verarbeite die Ergebnisse? (, welche im Anforderungsobjekt gefunden werden können).</li>
+</ol>
+
+<p>Mit dem Wissen über diese Grundkonzepte können wir uns nun konkreteren Dingen zuwenden.</p>
+
+<h2 id="open" name="open">Erzeugung und Strukturierung des Speichers</h2>
+
+<p>Weil sich die Spezifizierung noch in der Entwicklung befindet, verstecken sich aktuelle Implementierungen von IndexedDB unter Browserpräfixen. Bis sich die Spezifizierung verfestigt, könne Browserhersteller unterschiedliche Implementierungen der Standard-IndexedDB-API haben. Aber sobald Konsens auf dem Standard herrscht, implementieren die Hersteller ihn ohne Markierung durch Präfixe. Tatsächlich ist in manchen Implementierungen der Präfix entfernt: Internet Explorer 10, Firefox 16, Chrome 24. Wenn auf Gecko basierende Browser einen Präfix verwenden, dann verwenden sie den Präfix <code>moz</code>, während auf WebKit basierende Browser den Präfix <code>webkit</code> verwenden.</p>
+
+<h3 id="Verwendung_einer_experimentellen_Version_von_IndexedDB">Verwendung einer experimentellen Version von IndexedDB</h3>
+
+<p>Für den Fall, dass Sie Ihren Code in Browsern verwenden wollen, die noch Präfixe verwenden, können Sie folgenden Code benutzen:</p>
+
+<pre class="brush: js">// In der folgenden Zeile sollten Sie die Präfixe einfügen, die Sie testen wollen.
+window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
+// Verwenden Sie "var indexedDB = ..." NICHT außerhalb einer Funktion.
+// Ferner benötigen Sie evtl. Referenzen zu einigen window.IDB* Objekten:
+window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
+window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
+// (Mozilla hat diese Objekte nie mit Präfixen versehen, also brauchen wir kein window.mozIDB*)</pre>
+
+<p>Beachten Sie, dass Implementierungen, die Präfixe verwenden, fehlerhaft oder unvollständig sein können oder einer alten Version der Spezifizierung folgen können. Deshalb ist es nicht empfohlen, sie im Produktivsystem zu verwenden. In manchen Fällen kann es sinnvoll sein, lieber einen Browser nicht zu unterstützen als zu behaupten, er würde unterstützt, und dann Fehler einzubüßen:</p>
+
+<pre class="brush: js">if (!window.indexedDB) {
+    window.alert("Ihr Browser unterstützt keine stabile Version von IndexedDB. Dieses und jenes Feature wird Ihnen nicht zur Verfügung stehen.");
+}
+</pre>
+
+<h3 id="Öffnen_einer_Datenbank">Öffnen einer Datenbank</h3>
+
+<p>Wir starten den ganzen Prozess folgendermaßen:</p>
+
+<pre class="brush: js">// Öffnen unserer Datenbank
+var request = window.indexedDB.open("MeineTestdatenbank", 3);
+</pre>
+
+<p>Sie sehen, das Öffnen einer Datenbank funktioniert wie jede andere Operation – Sie müssen sie „anfordern“.</p>
+
+<p>Die Anforderung zum Öffnen öffnet nicht sofort die Datenbank und startet auch die Transaktion nicht gleich. Der Aufruf zur <code>open()</code> Funktion gibt ein <a href="/de/docs/Web/API/IDBOpenDBRequest" title="IDBOpenDBRequest"><code>IDBOpenDBRequest</code></a>-Objekt mit Ergebniswert (Erfolg) oder Fehlerwert zurück, die Sie als Ereignis verarbeiten. Die meisten anderen asynchronen Funktionen in IndexedDB machen das gleiche – sie geben ein <a href="/de/docs/Web/API/IDBRequest" title="IDBRequest"><code style="font-size: 14px; color: rgb(51, 51, 51);">IDBRequest</code></a>-Objekt mit Ergebnis oder Fehler zurück. Das Ergebnis für die open-Funktion ist eine Instanz einer <code style="font-size: 14px; color: rgb(51, 51, 51);"><a href="/de/docs/Web/API/IDBDatabase" title="IDBDatabase">IDBDatabase</a>.</code></p>
+
+<p>Der zweite Parameter der open-Methode ist die Version der Datenbank. Die Version der Datenbank bestimmt das Datenbankschema – den Objektspeichern und ihrer Strukturen. Wenn die angeforderte Version nicht existiert (weil die Datenbank neu ist, oder weil die Version aktualisiert wurde), wird das Ereignis <code>onupgradeneeded</code> ausgelöst, und es lässt sich eine neue Version der Datenbank im Handler für dieses Ereignis erzeugen. Mehr dazu später im Abschnitt <a href="#Updating_the_version_of_the_database">Aktualisieren der Version der Datenbank</a>.</p>
+
+<h4 id="Erzeugen_von_Handlern">Erzeugen von Handlern</h4>
+
+<p>Das erste, was Sie mit fast allen Anforderungen machen wollen, die Sie erzeugen, ist das Hinzufügen von Handlern für Erfolge und Fehler:</p>
+
+<pre class="brush: js">request.onerror = function(event) {
+  // Machen Sie etwas mit request.errorCode!
+};
+request.onsuccess = function(event) {
+  // Machen Sie etwas mit request.result!
+};</pre>
+
+<p>Welche der beiden Funktionen, <code>onsuccess()</code> oder <code>onerror()</code>, wird aufgerufen? Wenn alles fehlerfrei ablief, wird ein Erfolgsereignis (d.h. ein DOM-Ereignis, dessen <code>type</code> Eigenschaft auf <code>"success"</code> gesetzt ist) mit <code>request</code> als <code>target</code> ausgelöst. Sobald es ausgelöst wurde, wird die Funktion <code>onsuccess()</code> auf <code>request</code> ausgelöst mit dem Erfolgsereignis als Argument. Wenn nicht alles fehlerfrei ablief, wird ein Fehlerereignis (d.h. ein DOM-Ereignis, dessen <code>type</code> Eigenschaft auf <code>"error"</code> gesetzt ist) auf <code>request</code> ausgelöst. Dies löst die Funktion <code>onerror()</code> aus mit dem Fehlerereignis als Argument.</p>
+
+<p>Die IndexedDB-API ist so entworfen, dass sie die Notwendigkeit zur Fehlerbehandlung minimiert, also werden Sie wahrscheinlich nicht viele Fehlerereignisse sehen (zumindest nicht nachdem Sie sich an die API gewöhnt haben!). Beim Öffnen von Datenbanken jedoch gibt es ein paar typische Zustände, die Fehlerereignisse erzeugen. Das wahrscheinlichste Problem ist, dass der Benutzer festgelegt hat, den Webapps das Erzeugen von Datenbanken nicht zu erlauben. Eines der Hauptentwurfsziele von IndexedDB ist es, das Speichern von großen Datenmengen zur Offline-Verwendung zu erlauben. (Um mehr darüber zu erfahren, wieviel Speicher jedem Browser zur Verfügung steht, lesen Sie <a href="/de/docs/IndexedDB#Storage_limits" title="Storage_limits">Storage limits</a>).</p>
+
+<p>Offensichtlich wollen Browser nicht irgendeinem Werbenetzwerk oder einer böswilligen Website erlauben, Ihren Computer zu verschmutzen, deshalb warnen Browser den Benutzer, wenn eine Webapp zum ersten Mal versucht einen IndexedDB-Speicher zu öffnen. Der Benutzer kann wählen, ob er den Zugriff erlaubt oder verbietet. Außerdem ist IndexedDB komplett deaktiviert im Privaten Modus der Browser (Privater Modus für Firefox und Incognito Modus für Chrome). Der Hauptzweck vom Surfen im Privaten Modus ist es, keine Spuren zu hinterlassen, daher schlägt der Versuch fehl, eine Datenbank in diesem Modus zu öffnen.</p>
+
+<p>Nun nehmen wir an, dass der Benutzer Ihren Anfragen erlaubt hat, eine Datenbank zu erstellen, und Sie haben ein Erfolgsereignis erhalten, um den Erfolgs-Callback auszulösen; was kommt als nächstes? Die Anfrage wurde hier mit einem Aufruf von <code>indexedDB.open()</code> erzeugt, also ist <code>request.result</code> eine Instanz von <code>IDBDatabase</code>, und Sie wollen diese auf jeden Fall für später speichern. Ihr Code könnte etwa so aussehen:</p>
+
+<pre class="brush: js">var db;
+var request = indexedDB.open("MeineTestdatenbank");
+request.onerror = function(event) {
+  alert("Warum haben Sie meiner Webapp nicht erlaubt IndexedDB zu verwenden?!");
+};
+request.onsuccess = function(event) {
+  db = request.result;
+};
+</pre>
+
+<h4 id="Fehlerbehandlung">Fehlerbehandlung</h4>
+
+<p>Wie bereits oben erwähnt, werden Error events bei entsprechenden Fehlern ausgelöst und in der Objekthierarachie weiter nach oben gereicht. Solche Fehlerereignisse  werden zunächst in der entsprechende Anfrage ausgelöst, die den Fehler verursacht hat. Anschließend werden sie zur Transaktion weitergereicht und schließlich zum Datenbankobjekt.  Wenn man nicht für jede Anfrage einen Error-Handler schreiben möchte, kann man der Datenbank einen einzigen Error-Handler hinzufügen:</p>
+
+<pre class="brush: js">db.onerror = function(event) {
+  // Allgemeine Fehlerbehandlung, die für alle Anfragen an die Datenbank gilt.
+  alert("Datenbankfehler: " + event.target.errorCode);
+};
+</pre>
+
+<p>Einer der häufigsten Fehler, die beim Öffnen der Datenbank auftreten, ist  <code>VER_ERR</code>.  Er zeigt an, dass die Versionsnummer der lokal gespeicherten Datenbank  <em>größer </em> als die Versionsnummer ist,  die man zu öffnen versucht. Ein solcher Fehler muss immer durch eine Fehlerbehandlung berücksichtigt werden.</p>
+
+<h3 id="Erstellen_oder_Updaten_der_Datenbank">Erstellen oder Updaten der Datenbank</h3>
+
+<p><a name="Updating_the_version_of_the_database"></a>Wenn eine neue Version der Datenbank erstellt wird, wird das <code style="font-style: normal; line-height: 1.5; color: rgb(51, 51, 51);">onupgradeneeded</code><span style="line-height: 1.5;"> Event ausgelöst. In der Handler-Funktion dieses Events musst du für die Erstellung der Datenbankspeicher, welche für diese Version benötigt wird, sorgen</span>:</p>
+
+<pre class="brush:js;">// Dieses Event ist lediglich in modernen Browsern verfügbar
+request.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  // Erstelle ein ObjectStore für diese Datenbank
+  var objectStore = db.createObjectStore("name", { keyPath: "myKey" });
+};</pre>
+
+<p>The Versionsnummer der Datenbank ist vom Typ <code>unsigned long long</code>, so dass sie eine sehr große Ganzzahl sein kann.</p>
+
+<div class="warning">
+<p>Das Bedeutet auch, dass sie nicht vom Typ float sein darf,  ansonsten wird sie zur nächstkleineren Ganzzahl abgerundet, so dass die Transaktion weder starten kann noch ein  <code>upgradeneeded</code> ausgelöst wird. Beispielsweise sollte man nicht 2.4 als Versionsnummer verwenden:</p>
+
+<pre class="brush: js">var request = indexedDB.open("MeineTestdatenbank", 2.4); // don't do this, as the version will be rounded to 2</pre>
+</div>
+
+<p>Wenn man die Versionsnummer der Datenbank erhöht, wird ein  <code style="font-size: 14px; color: rgb(51, 51, 51);">onupgradeneeded</code><span style="line-height: 21px;"> </span> -Ereignis ausgelöst. In diesem Fall übernimmt die neue Datenbank automatisch die Objectstores von der Vorgängerversion der Datenbank, so dass man diese nicht erneut erzeugen muss. Lediglich neue Objectsores müssen angelegt oder nicht mehr gebrauchte der Vorgängerversion gelöscht werden. Wenn man einen bereits existierenden Objectstore ändern will (beispielsweise den keyPath veränden), ist es allerdings notwendig, den alten Objectstore zu löschen und einen neuen anzulegen. (Beachten Sie, dass dies die im Objectstore gespeicherten Informationen löscht, so dass man sie vorher auslesen und an anderer Stelle sichern sollte, bevor man ein Datenbankupgrade durchführt.)</p>
+
+<p>WebKit unterstützt die aktuelle Version dieser Spezifikation, wie sie in Chrome 23+ ausgeliefert wird, ebenso Opera 17+ und IE10+. Andere und ältere Implementierungen unterstützen nicht die aktuelle Version dieser Spezifikation und stellen damit auch noch nicht die Möglichkeit bereit, auf die Methodensignatur <code>indexedDB.open(name, version).onupgradeneeded</code> zugreifen zu könenn. Um ältere Versionen einer Datenbank auf neuer Versionen zu aktualisieren, siehe <a href="/en/IndexedDB/IDBDatabase#setVersion()_.0A.0ADeprecated" title="https://developer.mozilla.org/en/IndexedDB/IDBDatabase#setVersion()_.0A.0ADeprecated">IDBDatabase reference article</a>.</p>
+
+<h3 id="Strukturierung_der_Datenbank">Strukturierung der Datenbank</h3>
+
+<p>Im Folgenden wird gezeigt, wie man eine die Daten  strukturiert. IndexedDB verwendet Objectstores anstatt Tabellen, wobei eine einzelne Datenbank viele verschiedene Objectsores enthalten kann. Jeglicher Wert im Objectstore ist einem bestimmten Schlüssel (key) zugeordnet. Es werden dabei unterschiedliche Arten von Schlüsseln verarbeitet, abhängig davon, ob der Objectstore  einen <a href="/en/IndexedDB#gloss_key_path" title="https://developer.mozilla.org/en/IndexedDB#gloss_key_path">key path</a> oder einen <a href="/en/IndexedDB#gloss_key_generator" title="en/IndexedDB#gloss key generator">key generator</a> benutzt.</p>
+
+<p>Die folgende Tabelle gibt eine Übersicht über die bereitgestellten Arten von Schlüssseln.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Key Path</th>
+   <th scope="col">Key Generator</th>
+   <th scope="col">Beschreibung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Nein</td>
+   <td>Nein</td>
+   <td>Dieser Objectstore kann Daten beliebigen Typs speichern, inklusive primitiven Typen wie Zahlen und Zeichenketten (Strings). Beim Hinzufügen von Werten muss ein separater Schlüssel angegeben werden.</td>
+  </tr>
+  <tr>
+   <td>Ja</td>
+   <td>Nein</td>
+   <td>Dieser Objectstore kann nur JavaScript-Objekte speichern. Die Objekte müssen ein Attribut haben, dass wie der key path benannt ist.</td>
+  </tr>
+  <tr>
+   <td>Nein</td>
+   <td>Ja</td>
+   <td>Dieser Objectstore kann Daten beliebigen Typs speichern. Beim Hinzufügen von Werten kann ein separater Schlüssel angegeben werden. Fehlt der Schlüssel, so wird er generiert.</td>
+  </tr>
+  <tr>
+   <td>Ja</td>
+   <td>Ja</td>
+   <td>Dieser Objectstore kann nur JavaScript-Objekte speichern. In der Regel wird der Schlüssel automatisch generiert und als gleichnamiges Attribut im Objekt gespeichert. Falls es jedoch bereits ein Attribut mit dem Namen gibt, so wird der Schlüssel nicht generiert, sondern der Wert des Attributes wird verwendet.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>You can also create indices on any object store, provided the object store holds objects, not primitives. An index lets you look up the values stored in an object store using the value of a property of the stored object, rather than the object's key.</p>
+
+<p>Additionally, indexes have the ability to enforce simple constraints on the stored data. By setting the unique flag when creating the index, the index ensures that no two objects are stored with both having the same value for the index's key path. So, for example, if you have an object store which holds a set of people, and you want to ensure that no two people have the same email address, you can use an index with the unique flag set to enforce this.</p>
+
+<p>That may sound confusing, but this simple example should illustrate the concepts:</p>
+
+<pre class="brush: js">// This is what our customer data looks like.
+const customerData = [
+  { ssn: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com" },
+  { ssn: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org" }
+];
+const dbName = "the_name";
+
+var request = indexedDB.open(dbName, 2);
+
+request.onerror = function(event) {
+  // Handle errors.
+};
+request.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  // Create an objectStore to hold information about our customers. We're
+  // going to use "ssn" as our key path because it's guaranteed to be
+  // unique.
+  var objectStore = db.createObjectStore("customers", { keyPath: "ssn" });
+
+  // Create an index to search customers by name. We may have duplicates
+  // so we can't use a unique index.
+  objectStore.createIndex("name", "name", { unique: false });
+
+  // Create an index to search customers by email. We want to ensure that
+  // no two customers have the same email, so use a unique index.
+  objectStore.createIndex("email", "email", { unique: true });
+
+  // Store values in the newly created objectStore.
+  for (var i in customerData) {
+    objectStore.add(customerData[i]);
+  }
+};
+</pre>
+
+<p>As mentioned previously, <code>onupgradeneeded</code> is the only place where you can alter the structure of the database. In it, you can create and delete object stores and build and remove indices.</p>
+
+<div>Object stores are created with a single call to <code>createObjectStore()</code>. The method takes a name of the store, and a parameter object. Even though the parameter object is optional, it is very important, because it lets you define important optional properties and refine the type of object store you want to create. In our case, we've asked for an object store named "customers" and defined a keyPath that is the property that makes an individual object in the store unique. That property in this example is "ssn" since a social security number is guaranteed to be unique. "ssn" must be present on every object that is stored in the objectStore.</div>
+
+<p>We've also asked for an index named "name" that looks at the <code>name</code> property of the stored objects. As with <code>createObjectStore()</code>, <code>createIndex()</code> takes an optional <code>options</code> object that refines the type of index that you want to create. Adding objects that don't have a <code>name</code> property still succeeds, but the object won't appear in the "name" index.</p>
+
+<p>We can now retrieve the stored customer objects using their <code>ssn</code> from the object store directly, or using their name by using the index. To learn how this is done, see the section on <a href="/en/IndexedDB/Using_IndexedDB#Using_an_index" title="Using IndexedDB#Using an index">using an index</a>.</p>
+
+<h2 id="Hinzufügen_und_löschen_von_Daten">Hinzufügen und löschen von Daten</h2>
+
+<p>Before you can do anything with your new database, you need to start a transaction. Transactions come from the database object, and you have to specify which object stores you want the transaction to span. Also, you need to decide if you're going to make changes to the database or if you just need to read from it. Although transactions have three modes (read-only, read/write, and versionchange), you're better off using a read-only transaction when you can, because they can run concurrently</p>
+
+<h3 id="Daten_zur_Datenbank_hinzufügen">Daten zur Datenbank hinzufügen</h3>
+
+<p>If you've just created a database, then you probably want to write to it. Here's what that looks like:</p>
+
+<pre class="brush:js;">var transaction = db.transaction(["customers"], "readwrite");
+// Note: Older experimental implementations use the deprecated constant IDBTransaction.READ_WRITE instead of "readwrite".
+// In case you want to support such an implementation, you can just write:
+// var transaction = db.transaction(["customers"], IDBTransaction.READ_WRITE);</pre>
+
+<p>The <code>transaction()</code> function takes two arguments (though one is optional) and returns a transaction object. The first argument is a list of object stores that the transaction will span. You can pass an empty array if you want the transaction to span all object stores, but don't do it because the spec says an empty array should generate an InvalidAccessError. If you don't specify anything for the second argument, you get a read-only transaction. Since you want to write to it here you need to pass the <code>"readwrite"</code> flag.</p>
+
+<p>Now that you have a transaction you need to understand its lifetime. Transactions are tied very closely to the event loop. If you make a transaction and return to the event loop without using it then the transaction will become inactive. The only way to keep the transaction active is to make a request on it. When the request is finished you'll get a DOM event and, assuming that the request succeeded, you'll have another opportunity to extend the transaction during that callback. If you return to the event loop without extending the transaction then it will become inactive, and so on. As long as there are pending requests the transaction remains active. Transaction lifetimes are really very simple but it might take a little time to get used to. A few more examples will help, too. If you start seeing <code>TRANSACTION_INACTIVE_ERR</code> error codes then you've messed something up.</p>
+
+<p>Transactions can receive DOM events of three different types: <code>error</code>, <code>abort</code>, and <code>complete</code>. We've talked about the way that <code>error</code> events bubble, so a transaction receives error events from any requests that are generated from it. A more subtle point here is that the default behavior of an error is to abort the transaction in which it occurred. Unless you handle the error by calling <code>preventDefault()</code> on the error event, the entire transaction is rolled back. This design forces you to think about and handle errors, but you can always add a catchall error handler to the database if fine grained error handling is too cumbersome. If you don't handle an error event or if you call <code>abort()</code> on the transaction, then the transaction is rolled back and an <code>abort</code> event is fired on the transaction. Otherwise, after all pending requests have completed, you'll get a <code>complete</code> event. If you're doing lots of database operations, then tracking the transaction rather than individual requests can certainly aide your sanity.</p>
+
+<p>Now that you have a transaction, you'll need to get the object store from it. Transactions only let you have an object store that you specified when creating the transaction. Then you can add all the data you need.</p>
+
+<pre class="brush: js">// Do something when all the data is added to the database.
+transaction.oncomplete = function(event) {
+  alert("All done!");
+};
+
+transaction.onerror = function(event) {
+  // Don't forget to handle errors!
+};
+
+var objectStore = transaction.objectStore("customers");
+for (var i in customerData) {
+  var request = objectStore.add(customerData[i]);
+  request.onsuccess = function(event) {
+    // event.target.result == customerData[i].ssn;
+  };
+}</pre>
+
+<p>The <code>result</code> of a request generated from a call to <code>add() </code>is the key of the value that was added. So in this case, it should equal the <code>ssn</code> property of the object that was added, since the object store uses the <code>ssn</code> property for the key path. Note that the <code>add()</code> function requires that no object already be in the database with the same key. If you're trying to modify an existing entry, or you don't care if one exists already, use the <code>put()</code> function.</p>
+
+<h2 id="Daten_aus_der_Datenbank_löschen">Daten aus der Datenbank löschen</h2>
+
+<p>Löschen von Daten ist recht ähnlich:</p>
+
+<pre class="brush: js">var request = db.transaction(["customers"], "readwrite")
+                .objectStore("customers")
+                .delete("444-44-4444");
+request.onsuccess = function(event) {
+  // It's gone!
+};</pre>
+
+<h2 id="Daten_aus_der_Datenbank_auslesen">Daten aus der Datenbank auslesen</h2>
+
+<p>Now that the database has some info in it, you can retrieve it in several ways. First, the simple <code>get()</code>. You need to provide the key to retrieve the value, like so:</p>
+
+<pre class="brush: js">var transaction = db.transaction(["customers"]);
+var objectStore = transaction.objectStore("customers");
+var request = objectStore.get("444-44-4444");
+request.onerror = function(event) {
+  // Handle errors!
+};
+request.onsuccess = function(event) {
+  // Do something with the request.result!
+  alert("Name for SSN 444-44-4444 is " + request.result.name);
+};</pre>
+
+<p>That's a lot of code for a "simple" retrieval. Here's how you can shorten it up a bit, assuming that you handle errors at the database level:</p>
+
+<pre class="brush: js">db.transaction("customers").objectStore("customers").get("444-44-4444").onsuccess = function(event) {
+  alert("Name for SSN 444-44-4444 is " + event.target.result.name);
+};</pre>
+
+<p>See how this works? Since there's only one object store, you can avoid passing a list of object stores you need in your transaction and just pass the name as a string. Also, you're only reading from the database, so you don't need a <code>"readwrite"</code> transaction. Calling <code>transaction()</code> with no mode specified gives you a <code>"readonly"</code> transaction. Another subtlety here is that you don't actually save the request object to a variable. Since the DOM event has the request as its target you can use the event to get to the <code>result</code> property. Easy, right?!</p>
+
+<h2 id="Benutzung_eines_Cursors">Benutzung eines Cursors</h2>
+
+<p>Using <code>get()</code> requires that you know which key you want to retrieve. If you want to step through all the values in your object store, then you can use a cursor. Here's what it looks like:</p>
+
+<pre class="brush: js">var objectStore = db.transaction("customers").objectStore("customers");
+
+objectStore.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    alert("Name for SSN " + cursor.key + " is " + cursor.value.name);
+    cursor.continue();
+  }
+  else {
+    alert("No more entries!");
+  }
+};</pre>
+
+<p>The<code> openCursor()</code> function takes several arguments. First, you can limit the range of items that are retrieved by using a key range object that we'll get to in a minute. Second, you can specify the direction that you want to iterate. In the above example, we're iterating over all objects in ascending order. The success callback for cursors is a little special. The cursor object itself is the <code>result</code> of the request (above we're using the shorthand, so it's <code>event.target.result</code>). Then the actual key and value can be found on the <code>key</code> and <code>value</code> properties of the cursor object. If you want to keep going, then you have to call <code>continue()</code> on the cursor. When you've reached the end of the data (or if there were no entries that matched your <code>openCursor()</code> request) you still get a success callback, but the <code>result</code> property is <code>undefined</code>.</p>
+
+<p>One common pattern with cursors is to retrieve all objects in an object store and add them to an array, like this:</p>
+
+<pre class="brush: js">var customers = [];
+
+objectStore.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    customers.push(cursor.value);
+    cursor.continue();
+  }
+  else {
+    alert("Got all customers: " + customers);
+  }
+};</pre>
+
+<div class="warning"><strong>Warnung:</strong> Die folgende Funktion ist nicht Teil des IndexedDB Standards.</div>
+
+<p>Mozilla has also implemented <code>getAll()</code> to handle this case. It isn't part of the IndexedDB standard, so it may disappear in the future. We've included it because we think it's useful. The following code does precisely the same thing as above:</p>
+
+<pre class="brush: js">objectStore.getAll().onsuccess = function(event) {
+  alert("Got all customers: " + event.target.result);
+};</pre>
+
+<p>There is a performance cost associated with looking at the <code>value</code> property of a cursor, because the object is created lazily. When you use <code>getAll()</code>, Gecko must create all the objects at once. If you're just interested in looking at each of the keys, for instance, it is much more efficient to use a cursor than to use <code>getAll()</code>. If you're trying to get an array of all the objects in an object store, though, use <code>getAll()</code>.</p>
+
+<h3 id="Benutzung_eines_Index">Benutzung eines Index</h3>
+
+<p>Storing customer data using the SSN as a key is logical since the SSN uniquely identifies an individual. (Whether this is a good idea for privacy is a different question, outside the scope of this article.) If you need to look up a customer by name, however, you'll need to iterate over every SSN in the database until you find the right one. Searching in this fashion would be very slow, so instead you can use an index.</p>
+
+<pre class="brush: js">var index = objectStore.index("name");
+index.get("Donna").onsuccess = function(event) {
+  alert("Donna's SSN is " + event.target.result.ssn);
+};</pre>
+
+<p>The "name" cursor isn't unique, so there could be more than one entry with the <code>name</code> set to <code>"Donna"</code>. In that case you always get the one with the lowest key value.</p>
+
+<p>If you need to access all the entries with a given <code>name</code> you can use a cursor. You can open two different types of cursors on indexes. A normal cursor maps the index property to the object in the object store. A key cursor maps the index property to the key used to store the object in the object store. The differences are illustrated here:</p>
+
+<pre class="brush: js">index.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // cursor.key is a name, like "Bill", and cursor.value is the whole object.
+    alert("Name: " + cursor.key + ", SSN: " + cursor.value.ssn + ", email: " + cursor.value.email);
+    cursor.continue();
+  }
+};
+
+index.openKeyCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // cursor.key is a name, like "Bill", and cursor.value is the SSN.
+    // No way to directly get the rest of the stored object.
+    alert("Name: " + cursor.key + ", SSN: " + cursor.value);
+    cursor.continue();
+  }
+};</pre>
+
+<h3 id="Specifying_the_range_and_direction_of_cursors">Specifying the range and direction of cursors</h3>
+
+<p>If you would like to limit the range of values you see in a cursor, you can use a key range object and pass it as the first argument to <code>openCursor()</code> or <code>openKeyCursor()</code>. You can make a key range that only allows a single key, or one the has a lower or upper bound, or one that has both a lower and upper bound. The bound may be "closed" (i.e., the key range includes the given value) or "open" (i.e., the key range does not include the given value). Here's how it works:</p>
+
+<pre class="brush: js">// Only match "Donna"
+var singleKeyRange = IDBKeyRange.only("Donna");
+
+// Match anything past "Bill", including "Bill"
+var lowerBoundKeyRange = IDBKeyRange.lowerBound("Bill");
+
+// Match anything past "Bill", but don't include "Bill"
+var lowerBoundOpenKeyRange = IDBKeyRange.lowerBound("Bill", true);
+
+// Match anything up to, but not including, "Donna"
+var upperBoundOpenKeyRange = IDBKeyRange.upperBound("Donna", true);
+
+//Match anything between "Bill" and "Donna", but not including "Donna"
+var boundKeyRange = IDBKeyRange.bound("Bill", "Donna", false, true);
+
+index.openCursor(boundKeyRange).onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the matches.
+    cursor.continue();
+  }
+};</pre>
+
+<p>Sometimes you may want to iterate in descending order rather than in ascending order (the default direction for all cursors). Switching direction is accomplished by passing <code>prev</code> to the <code>openCursor()</code> function:</p>
+
+<pre class="brush: js">objectStore.openCursor(null, IDBCursor.prev).onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the entries.
+    cursor.continue();
+  }
+};</pre>
+
+<p>Since the "name" index isn't unique, there might be multiple entries where <code>name</code> is the same. Note that such a situation cannot occur with object stores since the key must always be unique. If you wish to filter out duplicates during cursor iteration over indexes, you can pass <code>nextunique</code> (or <code>prevunique</code> if you're going backwards) as the direction parameter. When <code>nextunique</code> or <code>prevunique</code> is used, the entry with the lowest key is always the one returned.</p>
+
+<pre class="brush: js">index.openKeyCursor(null, IDBCursor.nextunique).onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the entries.
+    cursor.continue();
+  }
+};</pre>
+
+<h2 id="Versionsänderung_während_eine_Webapplikation_in_einem_anderen_Tab_geöffnet_ist">Versionsänderung während eine Webapplikation in einem anderen Tab geöffnet ist</h2>
+
+<p>When your web app changes in such a way that a version change is required for your database, you need to consider what happens if the user has the old version of your app open in one tab and then loads the new version of your app in another. When you call <code>open()</code> with a greater version than the actual version of the database, all other open databases must explicitly acknowledge the request before you can start making changes to the database. Here's how it works:</p>
+
+<pre class="brush: js">var openReq = mozIndexedDB.open("MyTestDatabase", 2);
+
+openReq.onblocked = function(event) {
+  // If some other tab is loaded with the database, then it needs to be closed
+  // before we can proceed.
+  alert("Please close all other tabs with this site open!");
+};
+
+openReq.onupgradeneeded = function(event) {
+  // All other databases have been closed. Set everything up.
+  db.createObjectStore(/* ... */);
+  useDatabase(db);
+}
+
+openReq.onsuccess = function(event) {
+  var db = event.target.result;
+  useDatabase(db);
+  return;
+}
+
+function useDatabase(db) {
+  // Make sure to add a handler to be notified if another page requests a version
+  // change. We must close the database. This allows the other page to upgrade the database.
+  // If you don't do this then the upgrade won't happen until the user close the tab.
+  db.onversionchange = function(event) {
+    db.close();
+    alert("A new version of this page is ready. Please reload!");
+  };
+
+  // Do stuff with the database.
+}
+</pre>
+
+<h2 id="Sicherheit">Sicherheit</h2>
+
+<p>IndexedDB uses the same-origin principle, which means that it ties the store to the origin of the site that creates it (typically, this is the site domain or subdomain), so it cannot be accessed by any other origin.</p>
+
+<p>It's important to note that IndexedDB doesn't work for content loaded into a frame from another site (either {{ HTMLElement("frame") }} or {{ HTMLElement("iframe") }}. This is a security measure. Details as to why this matters are forthcoming. See {{ bug(595307) }}.</p>
+
+<h2 id="Warnung_über_die_Schließung_des_Browsers">Warnung über die Schließung des Browsers</h2>
+
+<p>When the browser shuts down (e.g., when the user selects Exit or clicks the Close button), any pending IndexedDB transactions are (silently) aborted -- they will not complete, and they will not trigger the error handler. Since the user can exit the browser at any time, this means that you cannot rely upon any particular transaction to complete or to know that it did not complete. There are several implications of this behavior.</p>
+
+<p>First, you should take care to always leave your database in a consistent state at the end of every transaction. For example, suppose that you are using IndexedDB to store a list of items that you allow the user to edit. You save the list after the edit by clearing the object store and then writing out the new list. If you clear the object store in one transaction and write the new list in another transaction, there is a danger that the browser will close after the clear but before the write, leaving you with an empty database. To avoid this, you should combine the clear and the write into a single transaction.</p>
+
+<p>Second, you should never tie database transactions to unload events. If the unload event is triggered by the browser closing, any transactions created in the unload event handler will never complete. An intuitive approach to maintaining some information across browser sessions is to read it from the database when the browser (or a particular page) is opened, update it as the user interacts with the browser, and then save it to the database when the browser (or page) closes. However, this will not work. The database transactions will be created in the unload event handler, but because they are asynchronous they will be aborted before they can execute.</p>
+
+<p>In fact, there is no way to guarantee that IndexedDB transactions will complete, even with normal browser shutdown. See {{ bug(870645) }}.</p>
+
+<h2 id="Full_IndexedDB_example" name="Full_IndexedDB_example">Vollständiges IndexedDB Beispiel</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
+
+    &lt;h1&gt;IndexedDB Demo: storing blobs, e-publication example&lt;/h1&gt;
+    &lt;div class="note"&gt;
+      &lt;p&gt;
+        Works and tested with:
+      &lt;/p&gt;
+      &lt;div id="compat"&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div id="msg"&gt;
+    &lt;/div&gt;
+
+    &lt;form id="register-form"&gt;
+      &lt;table&gt;
+        &lt;tbody&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="pub-title" class="required"&gt;
+                Title:
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="text" id="pub-title" name="pub-title" /&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="pub-biblioid" class="required"&gt;
+                Bibliographic ID:&lt;br/&gt;
+                &lt;span class="note"&gt;(ISBN, ISSN, etc.)&lt;/span&gt;
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="text" id="pub-biblioid" name="pub-biblioid"/&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="pub-year"&gt;
+                Year:
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="number" id="pub-year" name="pub-year" /&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+        &lt;/tbody&gt;
+        &lt;tbody&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="pub-file"&gt;
+                File image:
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="file" id="pub-file"/&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="pub-file-url"&gt;
+                Online-file image URL:&lt;br/&gt;
+                &lt;span class="note"&gt;(same origin URL)&lt;/span&gt;
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="text" id="pub-file-url" name="pub-file-url"/&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+        &lt;/tbody&gt;
+      &lt;/table&gt;
+
+      &lt;div class="button-pane"&gt;
+        &lt;input type="button" id="add-button" value="Add Publication" /&gt;
+        &lt;input type="reset" id="register-form-reset"/&gt;
+      &lt;/div&gt;
+    &lt;/form&gt;
+
+    &lt;form id="delete-form"&gt;
+      &lt;table&gt;
+        &lt;tbody&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="pub-biblioid-to-delete"&gt;
+                Bibliographic ID:&lt;br/&gt;
+                &lt;span class="note"&gt;(ISBN, ISSN, etc.)&lt;/span&gt;
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="text" id="pub-biblioid-to-delete"
+                     name="pub-biblioid-to-delete" /&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="key-to-delete"&gt;
+                Key:&lt;br/&gt;
+                &lt;span class="note"&gt;(for example 1, 2, 3, etc.)&lt;/span&gt;
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="text" id="key-to-delete"
+                     name="key-to-delete" /&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+        &lt;/tbody&gt;
+      &lt;/table&gt;
+      &lt;div class="button-pane"&gt;
+        &lt;input type="button" id="delete-button" value="Delete Publication" /&gt;
+        &lt;input type="button" id="clear-store-button"
+               value="Clear the whole store" class="destructive" /&gt;
+      &lt;/div&gt;
+    &lt;/form&gt;
+
+    &lt;form id="search-form"&gt;
+      &lt;div class="button-pane"&gt;
+        &lt;input type="button" id="search-list-button"
+               value="List database content" /&gt;
+      &lt;/div&gt;
+    &lt;/form&gt;
+
+    &lt;div&gt;
+      &lt;div id="pub-msg"&gt;
+      &lt;/div&gt;
+      &lt;div id="pub-viewer"&gt;
+      &lt;/div&gt;
+      &lt;ul id="pub-list"&gt;
+      &lt;/ul&gt;
+    &lt;/div&gt;
+</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">body {
+  font-size: 0.8em;
+  font-family: Sans-Serif;
+}
+
+form {
+  background-color: #cccccc;
+  border-radius: 0.3em;
+  display: inline-block;
+  margin-bottom: 0.5em;
+  padding: 1em;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+input {
+  padding: 0.3em;
+  border-color: #cccccc;
+  border-radius: 0.3em;
+}
+
+.required:after {
+  content: "*";
+  color: red;
+}
+
+.button-pane {
+  margin-top: 1em;
+}
+
+#pub-viewer {
+  float: right;
+  width: 48%;
+  height: 20em;
+  border: solid #d092ff 0.1em;
+}
+#pub-viewer iframe {
+  width: 100%;
+  height: 100%;
+}
+
+#pub-list {
+  width: 46%;
+  background-color: #eeeeee;
+  border-radius: 0.3em;
+}
+#pub-list li {
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+  padding-right: 0.5em;
+}
+
+#msg {
+  margin-bottom: 1em;
+}
+
+.action-success {
+  padding: 0.5em;
+  color: #00d21e;
+  background-color: #eeeeee;
+  border-radius: 0.2em;
+}
+
+.action-failure {
+  padding: 0.5em;
+  color: #ff1408;
+  background-color: #eeeeee;
+  border-radius: 0.2em;
+}
+
+.note {
+  font-size: smaller;
+}
+
+.destructive {
+  background-color: orange;
+}
+.destructive:hover {
+  background-color: #ff8000;
+}
+.destructive:active {
+  background-color: red;
+}
+</pre>
+
+<p> </p>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js">(function () {
+  var COMPAT_ENVS = [
+    ['Firefox', "&gt;= 16.0"],
+    ['Google Chrome',
+     "&gt;= 24.0 (you may need to get Google Chrome Canary), NO Blob storage support"]
+  ];
+  var compat = $('#compat');
+  compat.empty();
+  compat.append('&lt;ul id="compat-list"&gt;&lt;/ul&gt;');
+  COMPAT_ENVS.forEach(function(val, idx, array) {
+    $('#compat-list').append('&lt;li&gt;' + val[0] + ': ' + val[1] + '&lt;/li&gt;');
+  });
+
+  const DB_NAME = 'mdn-demo-indexeddb-epublications';
+  const DB_VERSION = 1; // Use a long long for this value (don't use a float)
+  const DB_STORE_NAME = 'publications';
+
+  var db;
+
+  // Used to keep track of which view is displayed to avoid to uselessly reload it
+  var current_view_pub_key;
+
+  function openDb() {
+    console.log("openDb ...");
+    var req = indexedDB.open(DB_NAME, DB_VERSION);
+    req.onsuccess = function (evt) {
+      // Better use "this" than "req" to get the result to avoid problems with
+      // garbage collection.
+      // db = req.result;
+      db = this.result;
+      console.log("openDb DONE");
+    };
+    req.onerror = function (evt) {
+      console.error("openDb:", evt.target.errorCode);
+    };
+
+    req.onupgradeneeded = function (evt) {
+      console.log("openDb.onupgradeneeded");
+      var store = evt.currentTarget.result.createObjectStore(
+        DB_STORE_NAME, { keyPath: 'id', autoIncrement: true });
+
+      store.createIndex('biblioid', 'biblioid', { unique: true });
+      store.createIndex('title', 'title', { unique: false });
+      store.createIndex('year', 'year', { unique: false });
+    };
+  }
+
+  /**
+   * @param {string} store_name
+   * @param {string} mode either "readonly" or "readwrite"
+   */
+  function getObjectStore(store_name, mode) {
+    var tx = db.transaction(store_name, mode);
+    return tx.objectStore(store_name);
+  }
+
+  function clearObjectStore(store_name) {
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req = store.clear();
+    req.onsuccess = function(evt) {
+      displayActionSuccess("Store cleared");
+      displayPubList(store);
+    };
+    req.onerror = function (evt) {
+      console.error("clearObjectStore:", evt.target.errorCode);
+      displayActionFailure(this.error);
+    };
+  }
+
+  function getBlob(key, store, success_callback) {
+    var req = store.get(key);
+    req.onsuccess = function(evt) {
+      var value = evt.target.result;
+      if (value)
+        success_callback(value.blob);
+    };
+  }
+
+  /**
+   * @param {IDBObjectStore=} store
+   */
+  function displayPubList(store) {
+    console.log("displayPubList");
+
+    if (typeof store == 'undefined')
+      store = getObjectStore(DB_STORE_NAME, 'readonly');
+
+    var pub_msg = $('#pub-msg');
+    pub_msg.empty();
+    var pub_list = $('#pub-list');
+    pub_list.empty();
+    // Reseting the iframe so that it doesn't display previous content
+    newViewerFrame();
+
+    var req;
+    req = store.count();
+    // Requests are executed in the order in which they were made against the
+    // transaction, and their results are returned in the same order.
+    // Thus the count text below will be displayed before the actual pub list
+    // (not that it is algorithmically important in this case).
+    req.onsuccess = function(evt) {
+      pub_msg.append('&lt;p&gt;There are &lt;strong&gt;' + evt.target.result +
+                     '&lt;/strong&gt; record(s) in the object store.&lt;/p&gt;');
+    };
+    req.onerror = function(evt) {
+      console.error("add error", this.error);
+      displayActionFailure(this.error);
+    };
+
+    var i = 0;
+    req = store.openCursor();
+    req.onsuccess = function(evt) {
+      var cursor = evt.target.result;
+
+      // If the cursor is pointing at something, ask for the data
+      if (cursor) {
+        console.log("displayPubList cursor:", cursor);
+        req = store.get(cursor.key);
+        req.onsuccess = function (evt) {
+          var value = evt.target.result;
+          var list_item = $('&lt;li&gt;' +
+                            '[' + cursor.key + '] ' +
+                            '(biblioid: ' + value.biblioid + ') ' +
+                            value.title +
+                            '&lt;/li&gt;');
+          if (value.year != null)
+            list_item.append(' - ' + value.year);
+
+          if (value.hasOwnProperty('blob') &amp;&amp;
+              typeof value.blob != 'undefined') {
+            var link = $('&lt;a href="' + cursor.key + '"&gt;File&lt;/a&gt;');
+            link.on('click', function() { return false; });
+            link.on('mouseenter', function(evt) {
+                      setInViewer(evt.target.getAttribute('href')); });
+            list_item.append(' / ');
+            list_item.append(link);
+          } else {
+            list_item.append(" / No attached file");
+          }
+          pub_list.append(list_item);
+        };
+
+        // Move on to the next object in store
+        cursor.continue();
+
+        // This counter serves only to create distinct ids
+        i++;
+      } else {
+        console.log("No more entries");
+      }
+    };
+  }
+
+  function newViewerFrame() {
+    var viewer = $('#pub-viewer');
+    viewer.empty();
+    var iframe = $('&lt;iframe /&gt;');
+    viewer.append(iframe);
+    return iframe;
+  }
+
+  function setInViewer(key) {
+    console.log("setInViewer:", arguments);
+    key = Number(key);
+    if (key == current_view_pub_key)
+      return;
+
+    current_view_pub_key = key;
+
+    var store = getObjectStore(DB_STORE_NAME, 'readonly');
+    getBlob(key, store, function(blob) {
+      console.log("setInViewer blob:", blob);
+      var iframe = newViewerFrame();
+
+      // It is not possible to set a direct link to the
+      // blob to provide a mean to directly download it.
+      if (blob.type == 'text/html') {
+        var reader = new FileReader();
+        reader.onload = (function(evt) {
+          var html = evt.target.result;
+          iframe.load(function() {
+            $(this).contents().find('html').html(html);
+          });
+        });
+        reader.readAsText(blob);
+      } else if (blob.type.indexOf('image/') == 0) {
+        iframe.load(function() {
+          var img_id = 'image-' + key;
+          var img = $('&lt;img id="' + img_id + '"/&gt;');
+          $(this).contents().find('body').html(img);
+          var obj_url = window.URL.createObjectURL(blob);
+          $(this).contents().find('#' + img_id).attr('src', obj_url);
+          window.URL.revokeObjectURL(obj_url);
+        });
+      } else if (blob.type == 'application/pdf') {
+        $('*').css('cursor', 'wait');
+        var obj_url = window.URL.createObjectURL(blob);
+        iframe.load(function() {
+          $('*').css('cursor', 'auto');
+        });
+        iframe.attr('src', obj_url);
+        window.URL.revokeObjectURL(obj_url);
+      } else {
+        iframe.load(function() {
+          $(this).contents().find('body').html("No view available");
+        });
+      }
+
+    });
+  }
+
+  /**
+   * @param {string} biblioid
+   * @param {string} title
+   * @param {number} year
+   * @param {string} url the URL of the image to download and store in the local
+   *   IndexedDB database. The resource behind this URL is subjected to the
+   *   "Same origin policy", thus for this method to work, the URL must come from
+   *   the same origin than the web site/app this code is deployed on.
+   */
+  function addPublicationFromUrl(biblioid, title, year, url) {
+    console.log("addPublicationFromUrl:", arguments);
+
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', url, true);
+    // Setting the wanted responseType to "blob"
+    // http://www.w3.org/TR/XMLHttpRequest2/#the-response-attribute
+    xhr.responseType = 'blob';
+    xhr.onload = function (evt) {
+                           if (xhr.status == 200) {
+                             console.log("Blob retrieved");
+                             var blob = xhr.response;
+                             console.log("Blob:", blob);
+                             addPublication(biblioid, title, year, blob);
+                           } else {
+                             console.error("addPublicationFromUrl error:",
+                                           xhr.responseText, xhr.status);
+                           }
+                         };
+    xhr.send();
+
+    // We can't use jQuery here because as of jQuery 1.8.3 the new "blob"
+    // responseType is not handled.
+    // http://bugs.jquery.com/ticket/11461
+    // http://bugs.jquery.com/ticket/7248
+    // $.ajax({
+    //   url: url,
+    //   type: 'GET',
+    //   xhrFields: { responseType: 'blob' },
+    //   success: function(data, textStatus, jqXHR) {
+    //     console.log("Blob retrieved");
+    //     console.log("Blob:", data);
+    //     // addPublication(biblioid, title, year, data);
+    //   },
+    //   error: function(jqXHR, textStatus, errorThrown) {
+    //     console.error(errorThrown);
+    //     displayActionFailure("Error during blob retrieval");
+    //   }
+    // });
+  }
+
+  /**
+   * @param {string} biblioid
+   * @param {string} title
+   * @param {number} year
+   * @param {Blob=} blob
+   */
+  function addPublication(biblioid, title, year, blob) {
+    console.log("addPublication arguments:", arguments);
+    var obj = { biblioid: biblioid, title: title, year: year };
+    if (typeof blob != 'undefined')
+      obj.blob = blob;
+
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req;
+    try {
+      req = store.add(obj);
+    } catch (e) {
+      if (e.name == 'DataCloneError')
+        displayActionFailure("This engine doesn't know how to clone a Blob, " +
+                             "use Firefox");
+      throw e;
+    }
+    req.onsuccess = function (evt) {
+      console.log("Insertion in DB successful");
+      displayActionSuccess();
+      displayPubList(store);
+    };
+    req.onerror = function() {
+      console.error("addPublication error", this.error);
+      displayActionFailure(this.error);
+    };
+  }
+
+  /**
+   * @param {string} biblioid
+   */
+  function deletePublicationFromBib(biblioid) {
+    console.log("deletePublication:", arguments);
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req = store.index('biblioid');
+    req.get(biblioid).onsuccess = function(evt) {
+      if (typeof evt.target.result == 'undefined') {
+        displayActionFailure("No matching record found");
+        return;
+      }
+      deletePublication(evt.target.result.id, store);
+    };
+    req.onerror = function (evt) {
+      console.error("deletePublicationFromBib:", evt.target.errorCode);
+    };
+  }
+
+  /**
+   * @param {number} key
+   * @param {IDBObjectStore=} store
+   */
+  function deletePublication(key, store) {
+    console.log("deletePublication:", arguments);
+
+    if (typeof store == 'undefined')
+      store = getObjectStore(DB_STORE_NAME, 'readwrite');
+
+    // As per spec http://www.w3.org/TR/IndexedDB/#object-store-deletion-operation
+    // the result of the Object Store Deletion Operation algorithm is
+    // undefined, so it's not possible to know if some records were actually
+    // deleted by looking at the request result.
+    var req = store.get(key);
+    req.onsuccess = function(evt) {
+      var record = evt.target.result;
+      console.log("record:", record);
+      if (typeof record == 'undefined') {
+        displayActionFailure("No matching record found");
+        return;
+      }
+      // Warning: The exact same key used for creation needs to be passed for
+      // the deletion. If the key was a Number for creation, then it needs to
+      // be a Number for deletion.
+      req = store.delete(key);
+      req.onsuccess = function(evt) {
+        console.log("evt:", evt);
+        console.log("evt.target:", evt.target);
+        console.log("evt.target.result:", evt.target.result);
+        console.log("delete successful");
+        displayActionSuccess("Deletion successful");
+        displayPubList(store);
+      };
+      req.onerror = function (evt) {
+        console.error("deletePublication:", evt.target.errorCode);
+      };
+    };
+    req.onerror = function (evt) {
+      console.error("deletePublication:", evt.target.errorCode);
+      };
+  }
+
+  function displayActionSuccess(msg) {
+    msg = typeof msg != 'undefined' ? "Success: " + msg : "Success";
+    $('#msg').html('&lt;span class="action-success"&gt;' + msg + '&lt;/span&gt;');
+  }
+  function displayActionFailure(msg) {
+    msg = typeof msg != 'undefined' ? "Failure: " + msg : "Failure";
+    $('#msg').html('&lt;span class="action-failure"&gt;' + msg + '&lt;/span&gt;');
+  }
+  function resetActionStatus() {
+    console.log("resetActionStatus ...");
+    $('#msg').empty();
+    console.log("resetActionStatus DONE");
+  }
+
+  function addEventListeners() {
+    console.log("addEventListeners");
+
+    $('#register-form-reset').click(function(evt) {
+      resetActionStatus();
+    });
+
+    $('#add-button').click(function(evt) {
+      console.log("add ...");
+      var title = $('#pub-title').val();
+      var biblioid = $('#pub-biblioid').val();
+      if (!title || !biblioid) {
+        displayActionFailure("Required field(s) missing");
+        return;
+      }
+      var year = $('#pub-year').val();
+      if (year != '') {
+        // Better use Number.isInteger if the engine has EcmaScript 6
+        if (isNaN(year))  {
+          displayActionFailure("Invalid year");
+          return;
+        }
+        year = Number(year);
+      } else {
+        year = null;
+      }
+
+      var file_input = $('#pub-file');
+      var selected_file = file_input.get(0).files[0];
+      console.log("selected_file:", selected_file);
+      // Keeping a reference on how to reset the file input in the UI once we
+      // have its value, but instead of doing that we rather use a "reset" type
+      // input in the HTML form.
+      //file_input.val(null);
+      var file_url = $('#pub-file-url').val();
+      if (selected_file) {
+        addPublication(biblioid, title, year, selected_file);
+      } else if (file_url) {
+        addPublicationFromUrl(biblioid, title, year, file_url);
+      } else {
+        addPublication(biblioid, title, year);
+      }
+
+    });
+
+    $('#delete-button').click(function(evt) {
+      console.log("delete ...");
+      var biblioid = $('#pub-biblioid-to-delete').val();
+      var key = $('#key-to-delete').val();
+
+      if (biblioid != '') {
+        deletePublicationFromBib(biblioid);
+      } else if (key != '') {
+        // Better use Number.isInteger if the engine has EcmaScript 6
+        if (key == '' || isNaN(key))  {
+          displayActionFailure("Invalid key");
+          return;
+        }
+        key = Number(key);
+        deletePublication(key);
+      }
+    });
+
+    $('#clear-store-button').click(function(evt) {
+      clearObjectStore();
+    });
+
+    var search_button = $('#search-list-button');
+    search_button.click(function(evt) {
+      displayPubList();
+    });
+
+  }
+
+  openDb();
+  addEventListeners();
+
+})(); // Immediately-Invoked Function Expression (IIFE)
+</pre>
+
+<p>{{ LiveSampleLink('Full_IndexedDB_example', "Test the online live demo") }}</p>
+
+<h2 id="Nächster_Schritt">Nächster Schritt</h2>
+
+<p>If you want to start tinkering with the API, jump in to the <a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">reference documentation</a> and checking out the different methods.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<p>Reference</p>
+
+<ul>
+ <li><a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB API Reference</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/IndexedDB/" title="http://www.w3.org/TR/IndexedDB/">Indexed Database API Specification</a></li>
+ <li><a href="/en-US/docs/IndexedDB/Using_IndexedDB_in_chrome" title="/en-US/docs/IndexedDB/Using_IndexedDB_in_chrome">Using IndexedDB in chrome</a></li>
+</ul>
+
+<p>Tutorials</p>
+
+<ul>
+ <li><a class="external" href="http://www.html5rocks.com/tutorials/indexeddb/todo/" title="http://www.html5rocks.com/tutorials/indexeddb/todo/">A simple TODO list using HTML5 IndexedDB</a><span class="external">. {{Note("This tutorial is based on an old version of the specification and does not work on up-to-date browsers - it still uses the removed <code>setVersion()</code> method.") }}</span></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/indexeddb/uidatabinding/" title="http://www.html5rocks.com/en/tutorials/indexeddb/uidatabinding/">Databinding UI Elements with IndexedDB</a></li>
+</ul>
+
+<p>Related articles</p>
+
+<ul>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx" title="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">IndexedDB — The Store in Your Browser</a></li>
+</ul>
+
+<p>Firefox</p>
+
+<ul>
+ <li>Mozilla <a class="link-https" href="https://mxr.mozilla.org/mozilla-central/find?text=&amp;string=dom%2FindexedDB%2F.*%5C.idl&amp;regexp=1" title="https://mxr.mozilla.org/mozilla-central/find?text=&amp;string=dom/indexedDB/.*\.idl&amp;regexp=1">interface files</a></li>
+</ul>
diff --git a/files/de/web/api/keyboardevent/altkey/index.html b/files/de/web/api/keyboardevent/altkey/index.html
new file mode 100644
index 0000000000..3f16f6d710
--- /dev/null
+++ b/files/de/web/api/keyboardevent/altkey/index.html
@@ -0,0 +1,118 @@
+---
+title: KeyboardEvent.altKey
+slug: Web/API/KeyboardEvent/altKey
+translation_of: Web/API/KeyboardEvent/altKey
+---
+<p id="Summary">{{APIRef("DOM Events")}}</p>
+
+<p>Der Konstruktor <strong><code>KeyboardEvent.altKey</code></strong> hat die Eigenschaft  {{jsxref("Boolean")}} und zeigt an ob <kbd>alt</kbd> Taste (<kbd>Option</kbd> oder <kbd>⌥</kbd> in OS X) gedrückt wurde (<code>true</code>) oder (<code>false</code>) nicht gerdrückt wurde, wenn das Ereignis eintritt.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>altKeyPressed</em> = <em>instanceOfKeyboardEvent</em>.altKey
+</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;altKey example&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function showChar(e){
+  alert(
+    "Key Pressed: " + String.fromCharCode(e.charCode) + "\n"
+    + "charCode: " + e.charCode + "\n"
+    + "ALT key pressed: " + e.altKey + "\n"
+  );
+}
+
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onkeypress="showChar(event);"&gt;
+&lt;p&gt;
+Press any character key,
+with or without holding down the ALT key.&lt;br /&gt;
+You can also use the SHIFT key together with the ALT key.
+&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#widl-KeyboardEvent-altKey','KeyboardEvent.altkey')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li>{{ domxref("KeyboardEvent") }}</li>
+</ul>
diff --git a/files/de/web/api/keyboardevent/getmodifierstate/index.html b/files/de/web/api/keyboardevent/getmodifierstate/index.html
new file mode 100644
index 0000000000..75b1c5e36d
--- /dev/null
+++ b/files/de/web/api/keyboardevent/getmodifierstate/index.html
@@ -0,0 +1,247 @@
+---
+title: KeyboardEvent.getModifierState()
+slug: Web/API/KeyboardEvent/getModifierState
+translation_of: Web/API/KeyboardEvent/getModifierState
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>Die Methode <code><strong>KeyboardEvent.getModifierState()</strong></code> gibt den aktuellen Zustand des angegebenen Modifikators zurück: <code>true</code>, wenn der Modifikator aktiv ist (d.h. die Modifikationstasten gedrückt oder gesperrt ist), ansonsten <code>false</code>.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <code><em>active</em> = <em>event</em>.getModifierState(<em>keyArg</em>);</code></pre>
+
+<h3 id="Rückgabe">Rückgabe </h3>
+
+<p>Einen {{jsxref("Boolean")}}</p>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><em><code>keyArg</code></em></dt>
+ <dd>Ein Modifikatorschlüsselwert. Der Wert muss einer der {{domxref("KeyboardEvent.key")}} Werte sein, die Modifikatorschlüssel darstellen, oder die Zeichenkette "Accel" {{deprecated_inline}}. Dabei wird zwischen Groß- und Kleinschreibung unterschieden.</dd>
+</dl>
+
+<h2 id="Modifikationstasten_im_Internet_Explorer">Modifikationstasten im Internet Explorer</h2>
+
+<p>IE9 verwendet <code>"Scroll"</code> für <code>"ScrollLock"</code> und <code>"Win"</code> für <code>"OS"</code>.</p>
+
+<h2 id="Modifikationstasten_in_Gecko">Modifikationstasten in Gecko</h2>
+
+<table style="width: 100%;">
+ <caption>Wann gibt getModifierState() bei Gecko true zurück?</caption>
+ <thead>
+  <tr>
+   <th scope="row"> </th>
+   <th scope="col">Windows</th>
+   <th scope="col">Linux (GTK)</th>
+   <th scope="col">Mac</th>
+   <th scope="col">Android 2.3</th>
+   <th scope="col">Android 3.0 und später</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row"><code>"Alt"</code></th>
+   <td>Entweder die <kbd>Alt</kbd> oder <kbd>AltGr</kbd> -Taste gedrückt wird</td>
+   <td><kbd>Alt</kbd> -Taste gedrückt wird</td>
+   <td><kbd>⌥ Option</kbd> -Taste gedrückt wird</td>
+   <td colspan="2" rowspan="1"><kbd>Alt</kbd>  oder  <kbd>option</kbd> -Taste gedrückt wird</td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"AltGraph"</code></th>
+   <td>
+    <p>Sowohl die <kbd>Alt</kbd> als auch die <kbd>Strg</kbd>  werden gedrückt, oder die <kbd>AltGr</kbd> Taste wird gedrückt</p>
+   </td>
+   <td><kbd>Level 3 Shift</kbd> Taste (or <kbd>Level 5 Shift</kbd> Taste {{gecko_minversion_inline("20.0")}}) wird gedrückt</td>
+   <td><kbd>⌥ Option</kbd> Taste wird gedrückt</td>
+   <td colspan="2" rowspan="1" style="background-color: rgb(204, 204, 204); text-align: center;"><em>Nicht unterstützt</em></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"CapsLock"</code></th>
+   <td colspan="3" style="text-align: center;">Während die LED für <kbd>⇪ Caps Lock</kbd> leuchtet</td>
+   <td style="text-align: center; background-color: rgb(204, 204, 204);"><em>Nicht unterstützt</em></td>
+   <td>Solange <kbd>⇪ Caps Lock</kbd> gesperrt ist {{gecko_minversion_inline("29.0")}}</td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Control"</code></th>
+   <td>Entweder die <kbd>Strg</kbd>  oder <kbd>AltGr</kbd> -Taste wird gedrückt</td>
+   <td><kbd>Strg</kbd> Taste wird gedrückt</td>
+   <td><kbd>control</kbd> Taste wird gedrückt</td>
+   <td><kbd>menu</kbd> Taste wird gedrückt.</td>
+   <td><kbd>Strg</kbd>, <kbd>control</kbd>  oder <kbd>menu</kbd> Taste wird gedrückt.</td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Fn"</code></th>
+   <td colspan="4" style="background-color: rgb(204, 204, 204); text-align: center;"><em>Nicht unterstützt</em></td>
+   <td>Die <kbd>Function</kbd> wird gedrückt, aber wir sind nicht sicher, welche Taste den Modifikatorstatus aktiv setzt. Die <kbd>Fn</kbd>-Taste auf der Mac-Tastatur bewirkt dies nicht.<br>
+    {{gecko_minversion_inline("29.0")}}</td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"FnLock"</code></th>
+   <td colspan="5" rowspan="1" style="background-color: rgb(204, 204, 204); text-align: center;"><em>Nicht unterstützt</em></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Hyper"</code></th>
+   <td colspan="5" style="background-color: rgb(204, 204, 204); text-align: center;"><em>Nicht unterstützt</em></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Meta"</code></th>
+   <td style="background-color: rgb(204, 204, 204); text-align: center;"><em>Nicht unterstützt</em></td>
+   <td style="text-align: center;"><kbd>Meta</kbd> Taste wird gedrückt {{gecko_minversion_inline("17.0")}}</td>
+   <td><kbd>⌘ Command</kbd> Taste wird gedrückt</td>
+   <td style="text-align: center; background-color: rgb(204, 204, 204);"><em>Nicht unterstützt</em></td>
+   <td><kbd>⊞ Windows Logo</kbd>  or <kbd>command</kbd> Taste gedrückt wird</td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"NumLock"</code></th>
+   <td colspan="2" style="text-align: center;">Während die LED für <kbd>Num Lock</kbd> leuchtet</td>
+   <td>Eine Taste auf dem Nummerblock gedrückt wird</td>
+   <td style="text-align: center; background-color: rgb(204, 204, 204);"><em>Nicht unterstützt</em></td>
+   <td>Solange <kbd>NumLock</kbd> gesperrt ist {{gecko_minversion_inline("29.0")}}</td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"OS"</code></th>
+   <td><kbd>⊞ Windows Logo</kbd> Taste wird gedrückt</td>
+   <td><kbd>Super</kbd> or <kbd>Hyper</kbd> Taste wird gedrückt (normalerweise auf der <kbd>⊞ Windows Logo</kbd> Taste zugeordnet)</td>
+   <td colspan="3" rowspan="1" style="background-color: rgb(204, 204, 204); text-align: center;"><em>Nicht unterstützt</em></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"ScrollLock"</code></th>
+   <td>Während die LED für <kbd>ScrollLock</kbd> leuchtet</td>
+   <td>Während die LED für <kbd>ScrollLock</kbd> leuchtet, aber normalerweise wird dies von der Plattform nicht unterstützt </td>
+   <td colspan="2" style="background-color: rgb(204, 204, 204); text-align: center;"><em>Nicht unterstützt</em></td>
+   <td>Solange <kbd>ScrollLock</kbd> gesperrt {{gecko_minversion_inline("29.0")}}</td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Shift"</code></th>
+   <td colspan="5" rowspan="1" style="text-align: center;"><kbd>⇧ Shift</kbd> Taste wird gedrückt</td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Super"</code></th>
+   <td colspan="5" style="background-color: rgb(204, 204, 204); text-align: center;"><em>Nicht unterstützt</em></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Symbol"</code></th>
+   <td colspan="5" style="background-color: rgb(204, 204, 204); text-align: center;"><em>Nicht unterstützt</em></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"SymbolLock"</code></th>
+   <td colspan="5" style="background-color: rgb(204, 204, 204); text-align: center;"><em>Nicht unterstützt</em></td>
+  </tr>
+ </tbody>
+</table>
+
+<ul>
+ <li>Auf den anderen Plattformen werden <kbd>Alt</kbd>, <kbd>Control</kbd> und <kbd>Shift</kbd> unterstützt werden.</li>
+ <li>Alle Modifikatoren (außer "FnLock", "Hyper", "Super" und "Symbol", die nach der Implementierung von Gecko definiert werden) stehen immer für nicht vertrauenswürdige Ereignisse auf Gecko zur Verfügung. Das hängt nicht von der Plattform ab.</li>
+</ul>
+
+<h2 id="Accel_virtueller_Modifikator"><code>"Accel"</code> virtueller Modifikator</h2>
+
+<div class="note"><strong>Notiz</strong><strong>:</strong> Der virtuelle Modifikator <code>"Accel"</code> ist in den aktuellen Entwürfen der DOM3 Events-Spezifikation praktisch <strong>veraltet</strong>.</div>
+
+<p><code>getModifierState()</code> also accepts a deprecated virtual modifier named <code>"Accel"</code>. <code>event.getModifierState("Accel")</code> returns <code>true</code> when at least one of {{domxref("KeyboardEvent.ctrlKey")}} or {{domxref("KeyboardEvent.metaKey")}} is <code>true</code>.</p>
+
+<p>In old implementations and outdated specifications, it returned <code>true</code> when a modifier which is the typical modifier key for the shortcut key is pressed. For example, on Windows, pressing <kbd>Ctrl</kbd> key may make it return <code>true</code>. However, on Mac, pressing <kbd>⌘ Command</kbd> key may make it return <code>true</code>. Note that which modifier key makes it return true depends on platforms, browsers, and user settings. For example, Firefox users can customize this with a pref, <code>"ui.key.accelKey"</code>.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: js">// Ignorieren, wenn folgender Modifikator aktiv ist.
+if (event.getModifierState("Fn") ||
+    event.getModifierState("Hyper") ||
+    event.getModifierState("OS") ||
+    event.getModifierState("Super") ||
+    event.getModifierState("Win") /* hack for IE */) {
+  return;
+}
+
+// auch ignorieren, wenn zwei oder mehr Modifikatoren außer Shift aktiv sind.
+if (event.getModifierState("Control") +
+    event.getModifierState("Alt") +
+    event.getModifierState("Meta") &gt; 1) {
+  return;
+}
+
+// Tastaturkürzel mit Standardmodifikator
+if (event.getModifierState("Accel")) {
+  switch (event.key.toLowerCase()) {
+    case "c":
+      if (event.getModifierState("Shift")) {
+        // Handle Accel + Shift + C
+        event.preventDefault(); // consume the key event
+      }
+      break;
+    case "k":
+      if (!event.getModifierState("Shift")) {
+        // Handle Accel + K
+        event.preventDefault(); // consume the key event
+      }
+      break;
+  }
+  return;
+}
+
+// Mach etwas anderes für die Pfeiltasten, wenn ScrollLock gesperrt ist.
+if ((event.getModifierState("ScrollLock") ||
+       event.getModifierState("Scroll") /* hack for IE */) &amp;&amp;
+    !event.getModifierState("Control") &amp;&amp;
+    !event.getModifierState("Alt") &amp;&amp;
+    !event.getModifierState("Meta")) {
+  switch (event.key) {
+    case "ArrowDown":
+    case "Down": // Hack für IE und älteren Gecko
+      event.preventDefault(); // Schlüsselereignis verwenden
+      break;
+    case "ArrowLeft":
+    case "Left": // Hack für IE und älteren Gecko
+      // Mach etwas anderes für die Pfeiltasten, wenn ScrollLock gesperrt ist.
+      event.preventDefault(); // Schlüsselereignis verwenden
+      break;
+    case "ArrowRight":
+    case "Right": // Hack für IE und älteren Gecko
+      // Mach etwas anderes für die Pfeiltasten, wenn ScrollLock gesperrt ist.
+      event.preventDefault(); // Schlüsselereignis verwenden
+      break;
+    case "ArrowUp":
+    case "Up": // Hack für IE und älteren Gecko
+      // Mach etwas anderes für die Pfeiltasten, wenn ScrollLock gesperrt ist.
+      event.preventDefault(); // Schlüsselereignis verwenden
+      break;
+  }
+}
+</pre>
+
+<div class="note">
+<p>Obwohl dieses Beispiel <code>.getModifierState()</code> mit <code>"Alt"</code>, <code>"Control"</code>, <code>"Meta"</code> und <code>"Shift"</code> verwendet, ist es vielleicht besser, <code>altKey</code>, <code>ctrlKey</code>, <code>metaKey</code> und <code>shiftKey</code> zu verwenden, da sie kürzer und vielleicht schneller sind.</p>
+</div>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#widl-KeyboardEvent-getModifierState', 'getModifierState()')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Initiale Definition (<a href="https://dvcs.w3.org/hg/dom3events/raw-file/tip/html/DOM3Events-key.html#keys-modifier">Modifier Keys spec</a>)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Du zu den Daten beitragen möchtest, besuche  bitte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und sende uns deinen Pull-Request. </div>
+
+<p>{{Compat("api.KeyboardEvent.getModifierState")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Das {{domxref("KeyboardEvent")}}, zu dem die Methode gehört.</li>
+ <li>{{domxref("MouseEvent.getModifierState")}}</li>
+</ul>
diff --git a/files/de/web/api/keyboardevent/index.html b/files/de/web/api/keyboardevent/index.html
new file mode 100644
index 0000000000..6f76b0b13f
--- /dev/null
+++ b/files/de/web/api/keyboardevent/index.html
@@ -0,0 +1,458 @@
+---
+title: KeyboardEvent
+slug: Web/API/KeyboardEvent
+translation_of: Web/API/KeyboardEvent
+---
+<div>{{APIRef("DOM Events")}}</div>
+
+<p><strong><code>KeyboardEvent</code></strong> Objekte beschreiben eine Benutzerinteraktion mit dem Keyboard. Jedes Event beschreibt eine Taste. Der Eventtyp (<code>keydown</code>, <code>keypress</code>, oder <code>keyup</code>) identifiziert welche Art von Aktivität ausgeführt wurde.</p>
+
+<div class="note"><strong>Anmerkung:</strong> Das <code>KeyboardEvent</code> deutet nur an was mit einer Taste passiert. Wenn Sie Texteingaben behandeln müssen, verwenden sie stattdessen das HTML5 <code><a href="/en-US/docs/DOM/DOM_event_reference/input" rel="custom">input</a></code> Event. Beispiel: Wenn ein Benutzer Text über ein Handschriftsystem - wie auf einem Tablet - eingibt, werden Tastenevents möglicherweise nicht ausgelöst.</div>
+
+<h2 id="Konstruktor">Konstruktor</h2>
+
+<dl>
+ <dt>{{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}</dt>
+ <dd>Erzeugt ein <code>KeyboardEvent</code> Objekt.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<p><em>Diese Schnittstelle erbt auch Methoden seiner Eltern {{domxref("UIEvent")}} und {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("KeyboardEvent.getModifierState()")}}</dt>
+ <dd>Liefert einen {{jsxref("Boolean")}} Wert welcher angibt ob eine Hilfstaste wie <kbd>Alt</kbd>, <kbd>Shift</kbd>, <kbd>Ctrl</kbd>, oder <kbd>Meta</kbd> gedrückt war als das Event erzeugt wurde.</dd>
+ <dt>{{domxref("KeyboardEvent.initKeyEvent()")}}{{deprecated_inline}}</dt>
+ <dd>Initialisiert ein <code>KeyboardEvent</code> Objekt. Dies wurde nur durch Gecko implementiert (andere verwendeten {{domxref("KeyboardEvent.initKeyboardEvent()")}}) und sollte nicht mehr benutzt werden. Der moderne Standardweg ist, den {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}} Konstrutor zu verwenden.</dd>
+ <dt>{{domxref("KeyboardEvent.initKeyboardEvent()")}}{{deprecated_inline}}</dt>
+ <dd>Initialisiert ein <code>KeyboardEvent</code> Objekt. Dies wurde nie von Gecko implementiert (da stattdessen {{domxref("KeyboardEvent.initKeyEvent()")}} verwendet wurde) und sollte nicht mehr benutzt werden. Der moderne Standardweg ist, den {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}} Konstruktor zu verwenden.</dd>
+</dl>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<p><em>Diese Schnittstelle erbt auch Methoden seiner Eltern {{domxref("UIEvent")}} und {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("KeyboardEvent.altKey")}} {{Readonlyinline}}</dt>
+ <dd>Liefert einen {{jsxref("Boolean")}} Wert der <code>true</code> ist falls die <kbd>Alt</kbd> ( <kbd>Option</kbd> oder <kbd>⌥</kbd> unter OS X) Taste aktiv war, als das Tastenevent erzeugt wurde.</dd>
+ <dt>{{domxref("KeyboardEvent.char")}} {{Non-standard_inline}}{{Deprecated_inline}}{{Readonlyinline}}</dt>
+ <dd>Liefert einen {{domxref("DOMString")}} der das Zeichen der Taste repräsentiert. Wenn die Taste einem druckbaren Zeichen entspricht, ist dieser Wert eine nicht-leere Unicode-Zeichenkette die dieses Zeichen enthält. Fall die Taste keine druckbare Darstellung besitzt, ist der Wert eine leere Zeichenkette.
+ <div class="note"><strong>Anmerkung:</strong> Falls die Taste als Makro verwendet wird, das mehrere Zeichen einfügt, ist der Wert dieses Attributs die gesamte Zeichenkette, nicht nur das erste Zeichen.</div>
+
+ <div class="warning"><strong>Warnung:</strong> Dies wurde aus den DOM Level 3 Events entfernt. Es wird nur von IE9+ und Microsoft Edge unterstützt.</div>
+ </dd>
+ <dt>{{domxref("KeyboardEvent.charCode")}} {{Deprecated_inline}}{{Readonlyinline}}</dt>
+ <dd>Liefert einen {{jsxref("Number")}} Wert der die Unicode-Kennziffer der Taste repräsentiert; dieses Attribut wird nur vom <code>keypress</code> Event verwendet. Für Tasten deren <code>char</code> Attribut mehrere Zeichen enthält ist der Wert dieses Attributs der Unicode-Wert des ersten Zeichens . In Firefox 26 liefert dies Codes für druckbare Zeichen.
+ <div class="warning"><strong>Warnung:</strong> Dieses Attribut ist veraltet; Sie sollten stattdessen - wenn vorhanden - {{domxref("KeyboardEvent.key")}} verwenden.</div>
+ </dd>
+ <dt>{{domxref("KeyboardEvent.code")}} {{Readonlyinline}}</dt>
+ <dd>Liefert einen {{domxref("DOMString")}} mit dem Codewert der Taste, welche durch das Event repräsentiert wird.</dd>
+ <dt>{{domxref("KeyboardEvent.ctrlKey")}} {{Readonlyinline}}</dt>
+ <dd>Liefert einen {{jsxref("Boolean")}} Wert der <code>true</code> ist, falls die <kbd>Ctrl</kbd> Taste aktiv war als  das Key-Event erzeugt wurde.</dd>
+ <dt>{{domxref("KeyboardEvent.isComposing")}} {{Readonlyinline}}</dt>
+ <dd>Liefert einen {{jsxref("Boolean")}} Wert der <code>true</code> ist falls das Event nach <code>compositionstart</code> und vor <code>compositionend</code> ausgelöst wird.</dd>
+ <dt>{{domxref("KeyboardEvent.key")}} {{Readonlyinline}}</dt>
+ <dd>Liefert einen {{domxref("DOMString")}} der den Wert der Taste darstellt die durch das Event repräsentiert wird.</dd>
+ <dt>{{domxref("KeyboardEvent.keyCode")}} {{deprecated_inline}}{{Readonlyinline}}</dt>
+ <dd>Liefert einen {{jsxref("Number")}} Wert der einen system- und implementationsabhängigen Zahlencode darstellt, der den unmodifizierten Wert der gedrückten Taste repräsentiert.
+ <div class="warning"><strong>Warnung:</strong> Dieses Attribut ist veraltet; Sie sollten stattdessen - wenn vorhanden - {{domxref("KeyboardEvent.key")}} verwenden.</div>
+ </dd>
+ <dt>{{domxref("KeyboardEvent.keyIdentifier")}} {{Non-standard_inline}}{{deprecated_inline}}{{Readonlyinline}}</dt>
+ <dd>Diese Eigenschaft ist nicht standardisiert und veraltet. Es sollte stattdessen {{domxref("KeyboardEvent.key")}} verwendet werden. Sie war Teil einer alten Version von DOM Level 3 Events.</dd>
+ <dt>{{domxref("KeyboardEvent.keyLocation")}} {{Non-standard_inline}}{{deprecated_inline}}{{Readonlyinline}}</dt>
+ <dd>Dies ist ein nicht-standardisierter Alias für {{domxref("KeyboardEvent.location")}}. Sie war Teil einer alten Version von DOM Level 3 Events.</dd>
+ <dt>{{domxref("KeyboardEvent.locale")}} {{Readonlyinline}}</dt>
+ <dd>Liefert einen {{domxref("DOMString")}} der das Gebietsschema identifiziert für die das Keyboard konfiguriert ist. Diese Zeichenkette kann leer sein, wenn der Browser oder das Gerät das Gebietsschema des Keyboards nicht kennt.
+ <div class="note"><strong>Anmerkung:</strong> Dies beschreibt nicht das Gebietsschema der eingegebenen Daten. Ein Benutzer könnte ein Tastaturlayout nutzen während er Text in einer anderen Sprache eingibt.</div>
+ </dd>
+ <dt>{{domxref("KeyboardEvent.location")}}<a> {{Readonlyinline}}</a></dt>
+ <dd>Liefert einen {{jsxref("Number")}} Wert der die Lage der Taste auf der Tastatur oder einem anderen Eingabegerät repräsentiert.</dd>
+ <dt>{{domxref("KeyboardEvent.metaKey")}} {{Readonlyinline}}</dt>
+ <dd>Liefert einen {{jsxref("Boolean")}} Wert der <code>true</code> ist, falls die <kbd>Meta</kbd> Taste (auf Mac-Tastaturen, die <kbd>⌘ Command</kbd> Taste; auf Windows-Tastaturen, die Windows -Taste (<kbd>⊞</kbd>)) aktiv war, als das Key-Event erzeugt wurde.</dd>
+ <dt>{{domxref("KeyboardEvent.repeat")}} {{Readonlyinline}}</dt>
+ <dd>Liefert einen {{jsxref("Boolean")}} Wert der <code>true</code> ist, falls die Taste gedrückt gehalten wird, so dass sie sich automatisch wiederholt.</dd>
+ <dt>{{domxref("KeyboardEvent.shiftKey")}} {{Readonlyinline}}</dt>
+ <dd>Liefert einen {{jsxref("Boolean")}} Wert der <code>true</code> ist, falls die <kbd>Shift</kbd> Taste aktiv war, als das Key-Event erzeugt wurde.</dd>
+ <dt>{{domxref("KeyboardEvent.which")}} {{deprecated_inline}}{{Readonlyinline}}</dt>
+ <dd>Liefert einen {{jsxref("Number")}} Wert der einen system- und implementationsabhängigen Zahlencode darstellt, der den unmodifizierten Wert der gedrückten Taste repräsentiert; das ist gewöhnlich das Gleiche wie <code>keyCode</code>.
+ <div class="warning"><strong>Warnung:</strong> Dieses Attribut ist veraltet; Sie sollten stattdessen - wenn vorhanden - {{domxref("KeyboardEvent.key")}} verwenden.</div>
+ </dd>
+</dl>
+
+<h2 id="Anmerkungen">Anmerkungen</h2>
+
+<p>Es gibt <code>keydown</code>, <code>keypress</code>, and <code>keyup</code> Events. Für die meisten Tasten versendet Gecko eine Sequenz von Key-Events wie folgt:</p>
+
+<ol>
+ <li>Wenn die Taste gedrückt wird, wird ein <code>keydown</code> Event gesendet.</li>
+ <li>Falls die Taste keine Hilfstaste ist, wird das <code>keypress</code> Event gesendet.</li>
+ <li>Wenn der Nutzer die Taste loslässt, wird das <code>keyup</code> Event gesendet.</li>
+</ol>
+
+<h3 id="Sonderfälle">Sonderfälle</h3>
+
+<p>Einige Taste schalten den Status einer Kontrollleuchte um; dazu gehören Caps Lock, Num Lock, und Scroll Lock. Unter Windows und Linux senden diese Tasten nur <code>keydown</code> and <code>keyup</code> Events.</p>
+
+<div class="note">
+<p>Unter Linux versendet Firefox 12 und eher das <code>keypress</code> Event auch für diese Tasten.</p>
+</div>
+
+<p>Jedoch sorgen die Einschränkungen des Mac OS X Event-Modells dafür, dass  Caps Lock nur das <code>keydown</code> Event versendet. Num Lock wurde auf einigen älteren Laptop-Modellen (Modelle 2007 und älter) unterstützt, aber seitdem hat Mac OS X  Num Lock nicht mehr untertstützt - nicht einmal auf externen Tastaturen. Auf älteren MacBooks mit einer Num Lock Taste, erzeugt diese Taste überhaupt keine KeyEvents. Gecko unterstützt die Scroll Lock Taste, falls eine externe Tastatur, die eine F14 Taste besitzt, angeschlossen ist. In bestimmten älteren Firefox-Versionen erzeugt diese Taste ein <code>keypress</code> Event; dieses inkonsistente Verhalten war {{bug(602812)}}.</p>
+
+<h3 id="Behandlung_von_Auto-repeat">Behandlung von Auto-repeat</h3>
+
+<p>Wenn eine Taste gedrückt und gehalten wird, beginnt sie die automatische Wiederholung (sog. <em>auto-repeat</em>). Das Resultat ist das Versenden einer Reihe von Events ähnlich der folgenden:</p>
+
+<ol>
+ <li><code>keydown</code></li>
+ <li><code>keypress</code></li>
+ <li><code>keydown</code></li>
+ <li><code>keypress</code></li>
+ <li>&lt;&lt;wiederholt sich bis der Nutzer die Taste loslässt&gt;&gt;</li>
+ <li><code>keyup</code></li>
+</ol>
+
+<p>Das sollte laut DOM Level 3 Spezifikation passieren. Allerdings gibt es einige Ausnahmen, wie unten beschrieben.</p>
+
+<h4 id="Auto-repeat_in_einigen_GTK-Umgebungen_wie_Ubuntu_9.4">Auto-repeat in einigen GTK-Umgebungen wie Ubuntu 9.4</h4>
+
+<p>In einigen GTK-basierten Umgebungen versendet auto-repeat automatisch ein natives Key-Up Event während der automatischen Wiederholung und es ist für Gecko deshalb nicht möglich zwischen wiederholten Tastendrücken und einem auto-repeat unterscheiden zu können. Auf diesen Platformen wird eine Auto-Repeat Taste also die folgende Reihe von Events erzeugen:</p>
+
+<ol>
+ <li><code>keydown</code></li>
+ <li><code>keypress</code></li>
+ <li><code>keyup</code></li>
+ <li><code>keydown</code></li>
+ <li><code>keypress</code></li>
+ <li><code>keyup</code></li>
+ <li>&lt;&lt;wiederholt sich bis der Nutzer die Taste loslässt&gt;&gt;</li>
+ <li><code>keyup</code></li>
+</ol>
+
+<p>Innerhalb dieser Umgebungen gibt es leider keine Möglichkeit für Webinhalte den Unterschied zwischen selbst-wiederholenden Tasten und Tasten die wiederholt gedrückt werden herauszufinden.</p>
+
+<h4 id="Behandlung_von_auto-repeat_vor_Gecko_5.0">Behandlung von auto-repeat vor Gecko 5.0</h4>
+
+<p>Vor Gecko 5.0 {{geckoRelease('5.0')}} war platformübergreifendes Tastatur-Handling weniger einheitlich.</p>
+
+<dl>
+ <dt>Windows</dt>
+ <dd>Das Auto-Repeat-Verhalten ist das Gleiche wie in Gecko 4.0 und später.</dd>
+ <dt>Mac</dt>
+ <dd>Nach dem initialen keydown Event werden nur keypress Events gesendet bis das keyup Event auftritt; die dazwischendliegenden keydown Events werden nicht gesendet.</dd>
+ <dt>Linux</dt>
+ <dd>Das Event-Verhalten hängt von der spezifischen Platform ab. Es wird sich entweder so verhalten wie Windows oder Mac, abhängig davon was das native Event-Modell macht.</dd>
+</dl>
+
+<p class="note"><strong>Anmerkung:</strong> manuelles Auslösen eines Events erzeugt <em>nicht</em> die mit dem Event verbundene Standard-Aktion. Zum Beispiel: manuelles Auslösen eines KeyEvent führt nicht dazu, dass der Buchstabe in einem fokussierten Eingabefeld auftaucht. Im Fall von UI-Events ist dies aus Sicherheitsgründen wichtig, da es verhindert, dass Skripte Benutzeraktionen simulieren, die mit dem Browser selbst interagieren.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: js">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;script&gt;
+'use strict';
+
+document.addEventListener('keydown', (event) =&gt; {
+  const keyName = event.key;
+
+  if (keyName === 'Control') {
+    // not alert when only Control key is pressed.
+    return;
+  }
+
+  if (event.ctrlKey) {
+    // Even though event.key is not 'Control' (i.e. 'a' is pressed),
+    // event.ctrlKey may be true if Ctrl key is pressed at the time.
+    alert(`Combination of ctrlKey + ${keyName}`);
+  } else {
+    alert(`Key pressed ${keyName}`);
+  }
+}, false);
+
+document.addEventListener('keyup', (event) =&gt; {
+  const keyName = event.key;
+
+  // As the user release the Ctrl key, the key is no longer active.
+  // So event.ctrlKey is false.
+  if (keyName === 'Control') {
+    alert('Control key was released');
+  }
+}, false);
+
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#interface-keyboardevent', 'KeyboardEvent')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Initiale Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Die <code>KeyboardEvent</code> Schnittstelle lief durch eine Vielzahl von Entwurfsversionen, erst unter DOM Events Level 2, wo sie verworfen wurde als kein Konsens entstand, danach unter DOM Events Level 3. Dies führte zu einer Implementation von nicht standardisierten Initialisationsmethoden, der frühen DOM Events Level 2 Version<code> </code>{{domxref("KeyboardEvent.initKeyEvent()")}} durch Gecko Browser und die frühe DOM Events Level 3 Version, {{domxref("KeyboardEvent.initKeyboardEvent()")}} durch Andere. Beide wurden durch den modernen Einsatz eines Konstruktors ersetzt: {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.</p>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>constructor</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("31.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.char</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>9</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>.charCode</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.isComposing</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("31.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>.keyCode</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.locale</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>.location</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("15.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>.repeat</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("28.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>.which</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.initKeyboardEvent()</code></td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}<sup>[2]</sup></td>
+   <td>{{CompatIE("9.0")}}<sup>[3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>constructor</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("31.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.char</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.charCode</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.isComposing</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("31.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>.keyCode</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.locale</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.location</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("15.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.repeat</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("28.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.which</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.initKeyboardEvent()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Die Argumente von <code>initKeyboardEvent()</code> von WebKit and Blink weichen von der Definition in DOM Level 3 Events ab. Die Methode ist: <code>initKeyboardEvent(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in views::AbstractView viewArg, in DOMString keyIdentifierArg, in number locationArg, in boolean ctrlKeyArg, in boolean altKeyArg, in boolean shiftKeyArg, in boolean metaKeyArg, in boolean altGraphKeyArg)</code></p>
+
+<p>[2] Gecko wird <code>initKeyboardEvent()</code> nicht unterstützen, weil es die Feature-Erkennung von Web-Apllikationen komplett zerstört. Siehe {{Bug(999645)}}.</p>
+
+<p>[3] Das Argument von <code>initKeyboardEvent()</code> von IE weicht von der Definition in DOM Level 3 Events ab. Die Methode ist: <code>initKeyboardEvent(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in views::AbstractView viewArg, in DOMString keyArg, in number locationArg, in DOMString modifierListArg, in boolean repeatArt, in DOMString locationArg)</code>. Siehe <a href="http://msdn.microsoft.com/en-us/library/ie/ff975297%28v=vs.85%29.aspx">document of <code>initKeyboardEvent()</code> in MSDN</a>.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{domxref("KeyboardEvent.code")}}.</li>
+ <li>{{domxref("KeyboardEvent.key")}}.</li>
+ <li>{{domxref("KeyboardEvent.getModifierState")}}</li>
+</ul>
diff --git a/files/de/web/api/keyboardevent/keycode/index.html b/files/de/web/api/keyboardevent/keycode/index.html
new file mode 100644
index 0000000000..98375fe4b9
--- /dev/null
+++ b/files/de/web/api/keyboardevent/keycode/index.html
@@ -0,0 +1,3185 @@
+---
+title: KeyboardEvent.keyCode
+slug: Web/API/KeyboardEvent/keyCode
+translation_of: Web/API/KeyboardEvent/keyCode
+---
+<p>{{APIRef("DOM Events")}}{{deprecated_header()}}</p>
+
+<p>Die schreibgeschütze Eigenschaft <strong><code>KeyboardEvent.keyCode</code>  </strong>stellt den den unveränderten,  System- und Implementationsabhängigen numerischen Bezeichner der gedrückten Taste dar. Normalerweise ist das der zugehörige  ASCII {{RFC(20)}}) oder Windows 1252 Code der Taste. Bei einer unerkannten Taste ist das der Wert <code>0</code>.</p>
+
+<p>Der Wert des <code>keypress</code> Ereignis unterscheided sich von Browser zu Browser. IE und Google Chrome setzen den {{domxref("KeyboardEvent.charCode")}}  Wert. Gecko setzt <code>0</code> wenn die gedrückte Taste ein druckbares Zeichen darstellt, andernfalls ist es der selbe Wert wie beim <code>keydown</code> und <code>keyup</code> Ereignis.</p>
+
+<p>Von der Verwendung dieser Eigenschaft sollte nach Möglichkeit abgesehen werden, da siebereits seit einiger Zeit veraltet ist. Statdessen sollte {domxref("KeyboardEvent.code")}} verwendet werden, so es implementiert ist. Leider gibt es noch immer einige Browser ohne Unterstützung dafür. Google und Safari implementieren {{domxref("KeyboardEvent.keyIdentifier")}}, der bisher in der Entwurfs-Spezifikation enthalten ist,  nicht jedoch in der finalen Version.</p>
+
+<div class="note">
+<p>Entwickler sollten von der Verwendung von <code>keyCode</code> Eigenschaft  für druckbare Zeichen bei <code>keydown</code> und <code>keyup</code> Ereignissen absehen. Wie zuvor beschrieben , ist die <code>keyCode</code> Eigenschaft für druckbare Zeichen nicht zu gebrauchen, vor allem wenn <kbd>Shift</kbd> oder <kbd>Alt</kbd> dabei gedrückt sind. Bei der Implementation von Kürzeln, ist das {{event("keypress")}} Ereignis meist eher angebracht (zumindest bei der Verwendung der Gecko Engine). Näheres siehe <a href="/en-US/docs/Gecko_Keypress_Event" title="en-US/docs/Gecko_Keypress_Event">Gecko Keypress Event</a> .</p>
+</div>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: js">window.addEventListener("keydown", function (event) {
+  if (event.defaultPrevented) {
+    return; // Should do nothing if the default action has been cancelled
+  }
+
+  var handled = false;
+  if (event.key !== undefined) {
+    // Handle the event with KeyboardEvent.key and set handled true.
+  } else if (event.keyIdentifier !== undefined) {
+    // Handle the event with KeyboardEvent.keyIdentifier and set handled true.
+  } else if (event.keyCode !== undefined) {
+    // Handle the event with KeyboardEvent.keyCode and set handled true.
+  }
+
+  if (handled) {
+    // Suppress "double action" if event handled
+    event.preventDefault();
+  }
+}, true);
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#widl-KeyboardEvent-keyCode','KeyboardEvent.keyCode')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Initiale Definition; als veraltet gekennzeichnet</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+
+
+<p>{{Compat("api.KeyboardEvent.keyCode")}}</p>
+
+<h2 id="Werte_von_keyCode">Werte von keyCode</h2>
+
+<h3 id="druckbare_Tasten_in_der_Standard-Position">druckbare Tasten in der Standard-Position</h3>
+
+<p>The value of key events which are caused by pressing or releasing printable keys in standard position is not compatible between browsers.</p>
+
+<p>IE just exposes the native virtual keycode value as <code>KeyboardEvent.keyCode</code>.</p>
+
+<p>Google Chrome, Chromium and Safari must decide the value from the input character. If the inputting character can be inputted with the US keyboard layout, they use the <code>keyCode</code> value on the US keyboard layout.</p>
+
+<p>Starting in Firefox 15 {{geckoRelease("15.0")}}, Gecko gets <code>keyCode</code> values from ASCII characters inputtable by the key — even with shift modifiers or an ASCII capable keyboard layout. See the following rules for details:</p>
+
+<ol>
+ <li>If the system is Windows and the native keycode of the pressed key indicates that the key is a-z or 0-9, use a keycode for it.</li>
+ <li>If the system is Mac and the native keycode of the pressed key indicates that the key is 0-9, use a keycode for it.</li>
+ <li>If the pressed key inputs an ASCII alphabetic or numeric character with no modifier key, use a keycode for it.</li>
+ <li>If the pressed key inputs an ASCII alphabetic or numeric character with a Shift key modifier, use a keycode for it.</li>
+ <li>If the pressed key inputs a different ASCII character with no modifier key, use a keycode for it.</li>
+ <li>If the pressed key inputs a different ASCII character with a Shift key modifier, use a keycode for it.</li>
+ <li>Otherwise, i.e., pressed key inputs a unicode character:
+  <ol>
+   <li>If the keyboard layout is ASCII-capable (i.e., can input ASCII alphabets), use 0 or compute with <a href="#keyCode_of_punctuation_keys_on_some_keyboard_layout">the following additional rules</a>.</li>
+   <li>Otherwise, i.e., the keyboard layout isn't ASCII capable, use the ASCII capable keyboard layout installed on the environment with the highest priority:
+    <ol>
+     <li>If the pressed key on the alternative keyboard layout inputs an ASCII alphabetic or numeric character, use a keycode for it.</li>
+     <li>Otherwise, use 0 or compute with <a href="#keyCode_of_punctuation_keys_on_some_keyboard_layout">the following additional rules</a>.</li>
+    </ol>
+   </li>
+  </ol>
+ </li>
+</ol>
+
+<p id="keyCode_of_punctuation_keys_on_some_keyboard_layout">Starting in Firefox 60 {{geckoRelease("60.0")}}, Gecko sets <code>keyCode</code> values of punctuation keys as far as possible (when points 7.1 or 7.2 in the above list are reached) with the following rules:</p>
+
+<div class="warning">
+<p>The purpose of these new additional rules is for making users whose keyboard layouts map unicode characters to punctuation keys in a US keyboard layout can use web applications which support Firefox only with ASCII-capable keyboard layouts or just with a US keyboard layout. Otherwise, the newly mapped <code>keyCode</code> values may be conflict with other keys. For example, if the active keyboard layout is Russian, the <code>keyCode</code> value of <strong>both</strong> the <code>"Period"</code> key and <code>"Slash"</code> key are <code>190</code> (<code>KeyEvent.DOM_VK_PERIOD</code>). If you need to distinguish those keys but you don't want to support all keyboard layouts in the world by yourself, you should probably use {{domxref("KeyboardEvent.code")}}.</p>
+</div>
+
+<ol>
+ <li>If running macOS or Linux:
+  <ol>
+   <li>If the active keyboard layout is not ASCII-capable and an alternative ASCII-capable keyboard layout is available.
+    <ol>
+     <li>If the alternative ASCII-capable keyboard layout produces an ASCII character via just the unmodified key, use a <code>keyCode</code> for the character.</li>
+     <li>If the alternative ASCII-capable keyboard layout produces an ASCII character with a Shift key modifier, use a <code>keyCode</code> for the shifted character.</li>
+     <li>Otherwise, use a <code>keyCode</code> for an ASCII character produced by the key when the US keyboard layout is active.</li>
+    </ol>
+   </li>
+   <li>Otherwise, use a <code>keyCode</code> for an ASCII character produced by the key when the US keyboard layout is active.</li>
+  </ol>
+ </li>
+ <li>If running on Windows:
+  <ol>
+   <li>Use a <code>keyCode</code> value for an ASCII character produced by a key which is mapped to the same virtual keycode of Windows when the US keyboard layout is active.</li>
+  </ol>
+ </li>
+</ol>
+
+<table class="standard-table">
+ <caption>keyCode values of each browser's keydown event caused by printable keys in standard position</caption>
+ <thead>
+  <tr>
+   <th colspan="1" rowspan="3" scope="row">{{domxref("KeyboardEvent.code")}}</th>
+   <th colspan="3" rowspan="1" scope="col">Internet Explorer 11</th>
+   <th colspan="6" rowspan="1" scope="col">Google Chrome 34</th>
+   <th colspan="3" rowspan="1" scope="col">Chromium 34</th>
+   <th colspan="3" rowspan="1" scope="col">Safari 7</th>
+   <th colspan="9" rowspan="1" scope="col">Gecko 29</th>
+  </tr>
+  <tr>
+   <th colspan="3" rowspan="1" scope="col">Windows</th>
+   <th colspan="3" rowspan="1" scope="col">Windows</th>
+   <th colspan="3" rowspan="1" scope="col">Mac (10.9)</th>
+   <th colspan="3" rowspan="1" scope="col">Linux (Ubuntu 14.04)</th>
+   <th colspan="3" rowspan="1" scope="col">Mac (10.9)</th>
+   <th colspan="3" rowspan="1" scope="col">Windows</th>
+   <th colspan="3" rowspan="1" scope="col">Mac (10.9)</th>
+   <th colspan="3" rowspan="1" scope="col">Linux (Ubuntu 14.04)</th>
+  </tr>
+  <tr>
+   <th scope="col">US</th>
+   <th scope="col">Japanese</th>
+   <th scope="col">Greek</th>
+   <th scope="col">US</th>
+   <th scope="col">Japanese</th>
+   <th scope="col">Greek</th>
+   <th scope="col">US</th>
+   <th scope="col">Japanese</th>
+   <th scope="col">Greek</th>
+   <th scope="col">US</th>
+   <th scope="col">Japanese</th>
+   <th scope="col">Greek</th>
+   <th scope="col">US</th>
+   <th scope="col">Japanese</th>
+   <th scope="col">Greek</th>
+   <th scope="col">US</th>
+   <th scope="col">Japanese</th>
+   <th scope="col">Greek</th>
+   <th scope="col">US</th>
+   <th scope="col">Japanese</th>
+   <th scope="col">Greek</th>
+   <th colspan="1" scope="col">US</th>
+   <th scope="col">Japanese</th>
+   <th scope="col">Greek</th>
+  </tr>
+ </thead>
+ <tfoot>
+  <tr>
+   <th colspan="1" rowspan="3" scope="row">{{domxref("KeyboardEvent.code")}}</th>
+   <th scope="col">US</th>
+   <th scope="col">Japanese</th>
+   <th scope="col">Greek</th>
+   <th scope="col">US</th>
+   <th scope="col">Japanese</th>
+   <th scope="col">Greek</th>
+   <th scope="col">US</th>
+   <th scope="col">Japanese</th>
+   <th scope="col">Greek</th>
+   <th scope="col">US</th>
+   <th scope="col">Japanese</th>
+   <th scope="col">Greek</th>
+   <th scope="col">US</th>
+   <th scope="col">Japanese</th>
+   <th scope="col">Greek</th>
+   <th scope="col">US</th>
+   <th scope="col">Japanese</th>
+   <th scope="col">Greek</th>
+   <th scope="col">US</th>
+   <th scope="col">Japanese</th>
+   <th scope="col">Greek</th>
+   <th colspan="1" scope="col">US</th>
+   <th scope="col">Japanese</th>
+   <th scope="col">Greek</th>
+  </tr>
+  <tr>
+   <th colspan="3" rowspan="1" scope="col">Windows</th>
+   <th colspan="3" rowspan="1" scope="col">Windows</th>
+   <th colspan="3" rowspan="1" scope="col">Mac (10.9)</th>
+   <th colspan="3" rowspan="1" scope="col">Linux (Ubuntu 14.04)</th>
+   <th colspan="3" rowspan="1" scope="col">Mac (10.9)</th>
+   <th colspan="3" rowspan="1" scope="col">Windows</th>
+   <th colspan="3" rowspan="1" scope="col">Mac (10.9)</th>
+   <th colspan="3" rowspan="1" scope="col">Linux (Ubuntu 14.04)</th>
+  </tr>
+  <tr>
+   <th colspan="3" rowspan="1" scope="col">Internet Explorer 11</th>
+   <th colspan="6" rowspan="1" scope="col">Google Chrome 34</th>
+   <th colspan="3" rowspan="1" scope="col">Chromium 34</th>
+   <th colspan="3" rowspan="1" scope="col">Safari 7</th>
+   <th colspan="9" rowspan="1" scope="col">Gecko 29</th>
+  </tr>
+ </tfoot>
+ <tbody>
+  <tr>
+   <th scope="row"><code>"Digit1"</code></th>
+   <td colspan="3" rowspan="1"><code>0x31 (49)</code></td>
+   <td colspan="3" rowspan="1"><code>0x31 (49)</code></td>
+   <td colspan="3" rowspan="1"><code>0x31 (49)</code></td>
+   <td colspan="3" rowspan="1"><code>0x31 (49)</code></td>
+   <td colspan="3" rowspan="1"><code>0x31 (49)</code></td>
+   <td colspan="3" rowspan="1"><code>0x31 (49)</code></td>
+   <td colspan="3" rowspan="1"><code>0x31 (49)</code></td>
+   <td colspan="3" rowspan="1"><code>0x31 (49)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Digit2"</code></th>
+   <td colspan="3" rowspan="1"><code>0x32 (50)</code></td>
+   <td colspan="3" rowspan="1"><code>0x32 (50)</code></td>
+   <td colspan="3" rowspan="1"><code>0x32 (50)</code></td>
+   <td colspan="3" rowspan="1"><code>0x32 (50)</code></td>
+   <td colspan="3" rowspan="1"><code>0x32 (50)</code></td>
+   <td colspan="3" rowspan="1"><code>0x32 (50)</code></td>
+   <td colspan="3" rowspan="1"><code>0x32 (50)</code></td>
+   <td colspan="3" rowspan="1"><code>0x32 (50)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Digit3"</code></th>
+   <td colspan="3" rowspan="1"><code>0x33 (51)</code></td>
+   <td colspan="3" rowspan="1"><code>0x33 (51)</code></td>
+   <td colspan="3" rowspan="1"><code>0x33 (51)</code></td>
+   <td colspan="3" rowspan="1"><code>0x33 (51)</code></td>
+   <td colspan="3" rowspan="1"><code>0x33 (51)</code></td>
+   <td colspan="3" rowspan="1"><code>0x33 (51)</code></td>
+   <td colspan="3" rowspan="1"><code>0x33 (51)</code></td>
+   <td colspan="3" rowspan="1"><code>0x33 (51)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Digit4"</code></th>
+   <td colspan="3" rowspan="1"><code>0x34 (52)</code></td>
+   <td colspan="3" rowspan="1"><code>0x34 (52)</code></td>
+   <td colspan="3" rowspan="1"><code>0x34 (52)</code></td>
+   <td colspan="3" rowspan="1"><code>0x34 (52)</code></td>
+   <td colspan="3" rowspan="1"><code>0x34 (52)</code></td>
+   <td colspan="3" rowspan="1"><code>0x34 (52)</code></td>
+   <td colspan="3" rowspan="1"><code>0x34 (52)</code></td>
+   <td colspan="3" rowspan="1"><code>0x34 (52)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Digit5"</code></th>
+   <td colspan="3" rowspan="1"><code>0x35 (53)</code></td>
+   <td colspan="3" rowspan="1"><code>0x35 (53)</code></td>
+   <td colspan="3" rowspan="1"><code>0x35 (53)</code></td>
+   <td colspan="3" rowspan="1"><code>0x35 (53)</code></td>
+   <td colspan="3" rowspan="1"><code>0x35 (53)</code></td>
+   <td colspan="3" rowspan="1"><code>0x35 (53)</code></td>
+   <td colspan="3" rowspan="1"><code>0x35 (53)</code></td>
+   <td colspan="3" rowspan="1"><code>0x35 (53)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Digit6"</code></th>
+   <td colspan="3" rowspan="1"><code>0x36 (54)</code></td>
+   <td colspan="3" rowspan="1"><code>0x36 (54)</code></td>
+   <td colspan="3" rowspan="1"><code>0x36 (54)</code></td>
+   <td colspan="3" rowspan="1"><code>0x36 (54)</code></td>
+   <td colspan="3" rowspan="1"><code>0x36 (54)</code></td>
+   <td colspan="3" rowspan="1"><code>0x36 (54)</code></td>
+   <td colspan="3" rowspan="1"><code>0x36 (54)</code></td>
+   <td colspan="3" rowspan="1"><code>0x36 (54)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Digit7"</code></th>
+   <td colspan="3" rowspan="1"><code>0x37 (55)</code></td>
+   <td colspan="3" rowspan="1"><code>0x37 (55)</code></td>
+   <td colspan="3" rowspan="1"><code>0x37 (55)</code></td>
+   <td colspan="3" rowspan="1"><code>0x37 (55)</code></td>
+   <td colspan="3" rowspan="1"><code>0x37 (55)</code></td>
+   <td colspan="3" rowspan="1"><code>0x37 (55)</code></td>
+   <td colspan="3" rowspan="1"><code>0x37 (55)</code></td>
+   <td colspan="3" rowspan="1"><code>0x37 (55)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Digit8"</code></th>
+   <td colspan="3" rowspan="1"><code>0x38 (56)</code></td>
+   <td colspan="3" rowspan="1"><code>0x38 (56)</code></td>
+   <td colspan="3" rowspan="1"><code>0x38 (56)</code></td>
+   <td colspan="3" rowspan="1"><code>0x38 (56)</code></td>
+   <td colspan="3" rowspan="1"><code>0x38 (56)</code></td>
+   <td colspan="3" rowspan="1"><code>0x38 (56)</code></td>
+   <td colspan="3" rowspan="1"><code>0x38 (56)</code></td>
+   <td colspan="3" rowspan="1"><code>0x38 (56)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Digit9"</code></th>
+   <td colspan="3" rowspan="1"><code>0x39 (57)</code></td>
+   <td colspan="3" rowspan="1"><code>0x39 (57)</code></td>
+   <td colspan="3" rowspan="1"><code>0x39 (57)</code></td>
+   <td colspan="3" rowspan="1"><code>0x39 (57)</code></td>
+   <td colspan="3" rowspan="1"><code>0x39 (57)</code></td>
+   <td colspan="3" rowspan="1"><code>0x39 (57)</code></td>
+   <td colspan="3" rowspan="1"><code>0x39 (57)</code></td>
+   <td colspan="3" rowspan="1"><code>0x39 (57)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Digit0"</code></th>
+   <td colspan="3" rowspan="1"><code>0x30 (48)</code></td>
+   <td colspan="3" rowspan="1"><code>0x30 (48)</code></td>
+   <td colspan="3" rowspan="1"><code>0x30 (48)</code></td>
+   <td colspan="3" rowspan="1"><code>0x30 (48)</code></td>
+   <td colspan="3" rowspan="1"><code>0x30 (48)</code></td>
+   <td colspan="3" rowspan="1"><code>0x30 (48)</code></td>
+   <td colspan="3" rowspan="1"><code>0x30 (48)</code></td>
+   <td colspan="3" rowspan="1"><code>0x30 (48)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"KeyA"</code></th>
+   <td colspan="3" rowspan="1"><code>0x41 (65)</code></td>
+   <td colspan="3" rowspan="1"><code>0x41 (65)</code></td>
+   <td colspan="3" rowspan="1"><code>0x41 (65)</code></td>
+   <td colspan="3" rowspan="1"><code>0x41 (65)</code></td>
+   <td colspan="3" rowspan="1"><code>0x41 (65)</code></td>
+   <td colspan="3" rowspan="1"><code>0x41 (65)</code></td>
+   <td colspan="3" rowspan="1"><code>0x41 (65)</code></td>
+   <td colspan="3" rowspan="1"><code>0x41 (65)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"KeyB"</code></th>
+   <td colspan="3" rowspan="1"><code>0x42 (66)</code></td>
+   <td colspan="3" rowspan="1"><code>0x42 (66)</code></td>
+   <td colspan="3" rowspan="1"><code>0x42 (66)</code></td>
+   <td colspan="3" rowspan="1"><code>0x42 (66)</code></td>
+   <td colspan="3" rowspan="1"><code>0x42 (66)</code></td>
+   <td colspan="3" rowspan="1"><code>0x42 (66)</code></td>
+   <td colspan="3" rowspan="1"><code>0x42 (66)</code></td>
+   <td colspan="3" rowspan="1"><code>0x42 (66)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"KeyC"</code></th>
+   <td colspan="3" rowspan="1"><code>0x43 (67)</code></td>
+   <td colspan="3" rowspan="1"><code>0x43 (67)</code></td>
+   <td colspan="3" rowspan="1"><code>0x43 (67)</code></td>
+   <td colspan="3" rowspan="1"><code>0x43 (67)</code></td>
+   <td colspan="3" rowspan="1"><code>0x43 (67)</code></td>
+   <td colspan="3" rowspan="1"><code>0x43 (67)</code></td>
+   <td colspan="3" rowspan="1"><code>0x43 (67)</code></td>
+   <td colspan="3" rowspan="1"><code>0x43 (67)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"KeyD"</code></th>
+   <td colspan="3" rowspan="1"><code>0x44 (68)</code></td>
+   <td colspan="3" rowspan="1"><code>0x44 (68)</code></td>
+   <td colspan="3" rowspan="1"><code>0x44 (68)<span style="display: none;"> </span></code></td>
+   <td colspan="3" rowspan="1"><code>0x44 (68)</code></td>
+   <td colspan="3" rowspan="1"><code>0x44 (68)</code></td>
+   <td colspan="3" rowspan="1"><code>0x44 (68)</code></td>
+   <td colspan="3" rowspan="1"><code>0x44 (68)</code></td>
+   <td colspan="3" rowspan="1"><code>0x44 (68)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"KeyE"</code></th>
+   <td colspan="3" rowspan="1"><code>0x45 (69)</code></td>
+   <td colspan="3" rowspan="1"><code>0x45 (69)</code></td>
+   <td colspan="3" rowspan="1"><code>0x45 (69)</code></td>
+   <td colspan="3" rowspan="1"><code>0x45 (69)</code></td>
+   <td colspan="3" rowspan="1"><code>0x45 (69)</code></td>
+   <td colspan="3" rowspan="1"><code>0x45 (69)</code></td>
+   <td colspan="3" rowspan="1"><code>0x45 (69)</code></td>
+   <td colspan="3" rowspan="1"><code>0x45 (69)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"KeyF"</code></th>
+   <td colspan="3" rowspan="1"><code>0x46 (70)</code></td>
+   <td colspan="3" rowspan="1"><code>0x46 (70)</code></td>
+   <td colspan="3" rowspan="1"><code>0x46 (70)</code></td>
+   <td colspan="3" rowspan="1"><code>0x46 (70)</code></td>
+   <td colspan="3" rowspan="1"><code>0x46 (70)</code></td>
+   <td colspan="3" rowspan="1"><code>0x46 (70)</code></td>
+   <td colspan="3" rowspan="1"><code>0x46 (70)</code></td>
+   <td colspan="3" rowspan="1"><code>0x46 (70)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"KeyG"</code></th>
+   <td colspan="3" rowspan="1"><code>0x47 (71)</code></td>
+   <td colspan="3" rowspan="1"><code>0x47 (71)</code></td>
+   <td colspan="3" rowspan="1"><code>0x47 (71)</code></td>
+   <td colspan="3" rowspan="1"><code>0x47 (71)</code></td>
+   <td colspan="3" rowspan="1"><code>0x47 (71)</code></td>
+   <td colspan="3" rowspan="1"><code>0x47 (71)</code></td>
+   <td colspan="3" rowspan="1"><code>0x47 (71)</code></td>
+   <td colspan="3" rowspan="1"><code>0x47 (71)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"KeyH"</code></th>
+   <td colspan="3" rowspan="1"><code>0x48 (72)</code></td>
+   <td colspan="3" rowspan="1"><code>0x48 (72)</code></td>
+   <td colspan="3" rowspan="1"><code>0x48 (72)</code></td>
+   <td colspan="3" rowspan="1"><code>0x48 (72)</code></td>
+   <td colspan="3" rowspan="1"><code>0x48 (72)</code></td>
+   <td colspan="3" rowspan="1"><code>0x48 (72)</code></td>
+   <td colspan="3" rowspan="1"><code>0x48 (72)</code></td>
+   <td colspan="3" rowspan="1"><code>0x48 (72)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"KeyI"</code></th>
+   <td colspan="3" rowspan="1"><code>0x49 (73)</code></td>
+   <td colspan="3" rowspan="1"><code>0x49 (73)</code></td>
+   <td colspan="3" rowspan="1"><code>0x49 (73)</code></td>
+   <td colspan="3" rowspan="1"><code>0x49 (73)</code></td>
+   <td colspan="3" rowspan="1"><code>0x49 (73)</code></td>
+   <td colspan="3" rowspan="1"><code>0x49 (73)</code></td>
+   <td colspan="3" rowspan="1"><code>0x49 (73)</code></td>
+   <td colspan="3" rowspan="1"><code>0x49 (73)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"KeyJ"</code></th>
+   <td colspan="3" rowspan="1"><code>0x4A (74)</code></td>
+   <td colspan="3" rowspan="1"><code>0x4A (74)</code></td>
+   <td colspan="3" rowspan="1"><code>0x4A (74)</code></td>
+   <td colspan="3" rowspan="1"><code>0x4A (74)</code></td>
+   <td colspan="3" rowspan="1"><code>0x4A (74)</code></td>
+   <td colspan="3" rowspan="1"><code>0x4A (74)</code></td>
+   <td colspan="3" rowspan="1"><code>0x4A (74)</code></td>
+   <td colspan="3" rowspan="1"><code>0x4A (74)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"KeyK"</code></th>
+   <td colspan="3" rowspan="1"><code>0x4B (75)</code></td>
+   <td colspan="3" rowspan="1"><code>0x4B (75)</code></td>
+   <td colspan="3" rowspan="1"><code>0x4B (75)</code></td>
+   <td colspan="3" rowspan="1"><code>0x4B (75)</code></td>
+   <td colspan="3" rowspan="1"><code>0x4B (75)</code></td>
+   <td colspan="3" rowspan="1"><code>0x4B (75)</code></td>
+   <td colspan="3" rowspan="1"><code>0x4B (75)</code></td>
+   <td colspan="3" rowspan="1"><code>0x4B (75)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"KeyL"</code></th>
+   <td colspan="3" rowspan="1"><code>0x4C (76)</code></td>
+   <td colspan="3" rowspan="1"><code>0x4C (76)</code></td>
+   <td colspan="3" rowspan="1"><code>0x4C (76)</code></td>
+   <td colspan="3" rowspan="1"><code>0x4C (76)</code></td>
+   <td colspan="3" rowspan="1"><code>0x4C (76)</code></td>
+   <td colspan="3" rowspan="1"><code>0x4C (76)</code></td>
+   <td colspan="3" rowspan="1"><code>0x4C (76)</code></td>
+   <td colspan="3" rowspan="1"><code>0x4C (76)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"KeyM"</code></th>
+   <td colspan="3" rowspan="1"><code>0x4D (77)</code></td>
+   <td colspan="3" rowspan="1"><code>0x4D (77)</code></td>
+   <td colspan="3" rowspan="1"><code>0x4D (77)</code></td>
+   <td colspan="3" rowspan="1"><code>0x4D (77)</code></td>
+   <td colspan="3" rowspan="1"><code>0x4D (77)</code></td>
+   <td colspan="3" rowspan="1"><code>0x4D (77)</code></td>
+   <td colspan="3" rowspan="1"><code>0x4D (77)</code></td>
+   <td colspan="3" rowspan="1"><code>0x4D (77)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"KeyN"</code></th>
+   <td colspan="3" rowspan="1"><code>0x4E (78)</code></td>
+   <td colspan="3" rowspan="1"><code>0x4E (78)</code></td>
+   <td colspan="3" rowspan="1"><code>0x4E (78)</code></td>
+   <td colspan="3" rowspan="1"><code>0x4E (78)</code></td>
+   <td colspan="3" rowspan="1"><code>0x4E (78)</code></td>
+   <td colspan="3" rowspan="1"><code>0x4E (78)</code></td>
+   <td colspan="3" rowspan="1"><code>0x4E (78)</code></td>
+   <td colspan="3" rowspan="1"><code>0x4E (78)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"KeyO"</code></th>
+   <td colspan="3" rowspan="1"><code>0x4F (79)</code></td>
+   <td colspan="3" rowspan="1"><code>0x4F (79)</code></td>
+   <td colspan="3" rowspan="1"><code>0x4F (79)</code></td>
+   <td colspan="3" rowspan="1"><code>0x4F (79)</code></td>
+   <td colspan="3" rowspan="1"><code>0x4F (79)</code></td>
+   <td colspan="3" rowspan="1"><code>0x4F (79)</code></td>
+   <td colspan="3" rowspan="1"><code>0x4F (79)</code></td>
+   <td colspan="3" rowspan="1"><code>0x4F (79)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"KeyP"</code></th>
+   <td colspan="3" rowspan="1"><code>0x50 (80)</code></td>
+   <td colspan="3" rowspan="1"><code>0x50 (80)</code></td>
+   <td colspan="3" rowspan="1"><code>0x50 (80)</code></td>
+   <td colspan="3" rowspan="1"><code>0x50 (80)</code></td>
+   <td colspan="3" rowspan="1"><code>0x50 (80)</code></td>
+   <td colspan="3" rowspan="1"><code>0x50 (80)</code></td>
+   <td colspan="3" rowspan="1"><code>0x50 (80)</code></td>
+   <td colspan="3" rowspan="1"><code>0x50 (80)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"KeyQ"</code></th>
+   <td colspan="3" rowspan="1"><code>0x51 (81)</code></td>
+   <td colspan="3" rowspan="1"><code>0x51 (81)</code></td>
+   <td rowspan="1"><code>0x51 (81)</code></td>
+   <td rowspan="1"><code>0x51 (81)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0xBA (186)</code></td>
+   <td><code>0x51 (81)</code></td>
+   <td><code>0x51 (81)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0xBA (186)</code></td>
+   <td rowspan="1"><code>0x51 (81)</code></td>
+   <td rowspan="1"><code>0x51 (81)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0xBA (186)</code></td>
+   <td colspan="3" rowspan="1"><code>0x51 (81)</code></td>
+   <td><code>0x51 (81)</code></td>
+   <td><code>0x51 (81)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0xBA (186)</code></td>
+   <td colspan="3" rowspan="1"><code>0x51 (81)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"KeyR"</code></th>
+   <td colspan="3" rowspan="1"><code>0x52 (82)</code></td>
+   <td colspan="3" rowspan="1"><code>0x52 (82)</code></td>
+   <td colspan="3" rowspan="1"><code>0x52 (82)</code></td>
+   <td colspan="3" rowspan="1"><code>0x52 (82)</code></td>
+   <td colspan="3" rowspan="1"><code>0x52 (82)</code></td>
+   <td colspan="3" rowspan="1"><code>0x52 (82)</code></td>
+   <td colspan="3" rowspan="1"><code>0x52 (82)</code></td>
+   <td colspan="3" rowspan="1"><code>0x52 (82)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"KeyS"</code></th>
+   <td colspan="3" rowspan="1"><code>0x53 (83)</code></td>
+   <td colspan="3" rowspan="1"><code>0x53 (83)</code></td>
+   <td colspan="3" rowspan="1"><code>0x53 (83)</code></td>
+   <td colspan="3" rowspan="1"><code>0x53 (83)</code></td>
+   <td colspan="3" rowspan="1"><code>0x53 (83)</code></td>
+   <td colspan="3" rowspan="1"><code>0x53 (83)</code></td>
+   <td colspan="3" rowspan="1"><code>0x53 (83)</code></td>
+   <td colspan="3" rowspan="1"><code>0x53 (83)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"KeyT"</code></th>
+   <td colspan="3" rowspan="1"><code>0x54 (84)</code></td>
+   <td colspan="3" rowspan="1"><code>0x54 (84)</code></td>
+   <td colspan="3" rowspan="1"><code>0x54 (84)</code></td>
+   <td colspan="3" rowspan="1"><code>0x54 (84)</code></td>
+   <td colspan="3" rowspan="1"><code>0x54 (84)</code></td>
+   <td colspan="3" rowspan="1"><code>0x54 (84)</code></td>
+   <td colspan="3" rowspan="1"><code>0x54 (84)</code></td>
+   <td colspan="3" rowspan="1"><code>0x54 (84)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"KeyU"</code></th>
+   <td colspan="3" rowspan="1"><code>0x55 (85)</code></td>
+   <td colspan="3" rowspan="1"><code>0x55 (85)</code></td>
+   <td colspan="3" rowspan="1"><code>0x55 (85)</code></td>
+   <td colspan="3" rowspan="1"><code>0x55 (85)</code></td>
+   <td colspan="3" rowspan="1"><code>0x55 (85)</code></td>
+   <td colspan="3" rowspan="1"><code>0x55 (85)</code></td>
+   <td colspan="3" rowspan="1"><code>0x55 (85)</code></td>
+   <td colspan="3" rowspan="1"><code>0x55 (85)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"KeyV"</code></th>
+   <td colspan="3" rowspan="1"><code>0x56 (86)</code></td>
+   <td colspan="3" rowspan="1"><code>0x56 (86)</code></td>
+   <td colspan="3" rowspan="1"><code>0x56 (86)</code></td>
+   <td colspan="3" rowspan="1"><code>0x56 (86)</code></td>
+   <td colspan="3" rowspan="1"><code>0x56 (86)</code></td>
+   <td colspan="3" rowspan="1"><code>0x56 (86)</code></td>
+   <td colspan="3" rowspan="1"><code>0x56 (86)</code></td>
+   <td colspan="3" rowspan="1"><code>0x56 (86)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"KeyW"</code></th>
+   <td colspan="3" rowspan="1"><code>0x57 (87)</code></td>
+   <td colspan="3" rowspan="1"><code>0x57 (87)</code></td>
+   <td colspan="3" rowspan="1"><code>0x57 (87)</code></td>
+   <td colspan="3" rowspan="1"><code>0x57 (87)</code></td>
+   <td colspan="3" rowspan="1"><code>0x57 (87)</code></td>
+   <td colspan="3" rowspan="1"><code>0x57 (87)</code></td>
+   <td colspan="3" rowspan="1"><code>0x57 (87)</code></td>
+   <td colspan="3" rowspan="1"><code>0x57 (87)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"KeyX"</code></th>
+   <td colspan="3" rowspan="1"><code>0x58 (88)</code></td>
+   <td colspan="3" rowspan="1"><code>0x58 (88)</code></td>
+   <td colspan="3" rowspan="1"><code>0x58 (88)</code></td>
+   <td colspan="3" rowspan="1"><code>0x58 (88)</code></td>
+   <td colspan="3" rowspan="1"><code>0x58 (88)</code></td>
+   <td colspan="3" rowspan="1"><code>0x58 (88)</code></td>
+   <td colspan="3" rowspan="1"><code>0x58 (88)</code></td>
+   <td colspan="3" rowspan="1"><code>0x58 (88)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"KeyY"</code></th>
+   <td colspan="3" rowspan="1"><code>0x59 (89)</code></td>
+   <td colspan="3" rowspan="1"><code>0x59 (89)</code></td>
+   <td colspan="3" rowspan="1"><code>0x59 (89)</code></td>
+   <td colspan="3" rowspan="1"><code>0x59 (89)</code></td>
+   <td colspan="3" rowspan="1"><code>0x59 (89)</code></td>
+   <td colspan="3" rowspan="1"><code>0x59 (89)</code></td>
+   <td colspan="3" rowspan="1"><code>0x59 (89)</code></td>
+   <td colspan="3" rowspan="1"><code>0x59 (89)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"KeyZ"</code></th>
+   <td colspan="3" rowspan="1"><code>0x5A (90)</code></td>
+   <td colspan="3" rowspan="1"><code>0x5A (90)</code></td>
+   <td colspan="3" rowspan="1"><code>0x5A (90)</code></td>
+   <td colspan="3" rowspan="1"><code>0x5A (90)</code></td>
+   <td colspan="3" rowspan="1"><code>0x5A (90)</code></td>
+   <td colspan="3" rowspan="1"><code>0x5A (90)</code></td>
+   <td colspan="3" rowspan="1"><code>0x5A (90)</code></td>
+   <td colspan="3" rowspan="1"><code>0x5A (90)</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>keyCode values of each browser's keydown event caused by printable keys in standard position (punctuations in US layout):</caption>
+ <thead>
+  <tr>
+   <th colspan="1" rowspan="3" scope="row">{{domxref("KeyboardEvent.code")}}</th>
+   <th colspan="3" rowspan="1" scope="col">Internet Explorer 11</th>
+   <th colspan="6" rowspan="1" scope="col">Google Chrome 34</th>
+   <th colspan="3" rowspan="1" scope="col">Chromium 34</th>
+   <th colspan="3" rowspan="1" scope="col">Safari 7</th>
+   <th colspan="9" rowspan="1" scope="col">Gecko 29</th>
+  </tr>
+  <tr>
+   <th colspan="3" rowspan="1" scope="col">Windows</th>
+   <th colspan="3" rowspan="1" scope="col">Windows</th>
+   <th colspan="3" rowspan="1" scope="col">Mac (10.9)</th>
+   <th colspan="3" rowspan="1" scope="col">Linux (Ubuntu 14.04)</th>
+   <th colspan="3" rowspan="1" scope="col">Mac (10.9)</th>
+   <th colspan="3" rowspan="1" scope="col">Windows (10.9)</th>
+   <th colspan="3" rowspan="1" scope="col">Mac (10.9)</th>
+   <th colspan="3" rowspan="1" scope="col">Linux (Ubuntu 14.04)</th>
+  </tr>
+  <tr>
+   <th scope="col">US</th>
+   <th scope="col">Japanese</th>
+   <th scope="col">Greek</th>
+   <th scope="col">US</th>
+   <th scope="col">Japanese</th>
+   <th scope="col">Greek</th>
+   <th scope="col">US</th>
+   <th scope="col">Japanese</th>
+   <th scope="col">Greek</th>
+   <th scope="col">US</th>
+   <th scope="col">Japanese</th>
+   <th scope="col">Greek</th>
+   <th scope="col">US</th>
+   <th scope="col">Japanese</th>
+   <th scope="col">Greek</th>
+   <th scope="col">US</th>
+   <th scope="col">Japanese</th>
+   <th scope="col">Greek</th>
+   <th scope="col">US</th>
+   <th scope="col">Japanese</th>
+   <th scope="col">Greek</th>
+   <th colspan="1" scope="col">US</th>
+   <th scope="col">Japanese</th>
+   <th scope="col">Greek</th>
+  </tr>
+ </thead>
+ <tfoot>
+  <tr>
+   <th colspan="1" rowspan="3" scope="row">{{domxref("KeyboardEvent.code")}}</th>
+   <th scope="col">US</th>
+   <th scope="col">Japanese</th>
+   <th scope="col">Greek</th>
+   <th scope="col">US</th>
+   <th scope="col">Japanese</th>
+   <th scope="col">Greek</th>
+   <th scope="col">US</th>
+   <th scope="col">Japanese</th>
+   <th scope="col">Greek</th>
+   <th scope="col">US</th>
+   <th scope="col">Japanese</th>
+   <th scope="col">Greek</th>
+   <th scope="col">US</th>
+   <th scope="col">Japanese</th>
+   <th scope="col">Greek</th>
+   <th scope="col">US</th>
+   <th scope="col">Japanese</th>
+   <th scope="col">Greek</th>
+   <th scope="col">US</th>
+   <th scope="col">Japanese</th>
+   <th scope="col">Greek</th>
+   <th colspan="1" scope="col">US</th>
+   <th scope="col">Japanese</th>
+   <th scope="col">Greek</th>
+  </tr>
+  <tr>
+   <th colspan="3" rowspan="1" scope="col">Windows</th>
+   <th colspan="3" rowspan="1" scope="col">Windows</th>
+   <th colspan="3" rowspan="1" scope="col">Mac (10.9)</th>
+   <th colspan="3" rowspan="1" scope="col">Linux (Ubuntu 14.04)</th>
+   <th colspan="3" rowspan="1" scope="col">Mac (10.9)</th>
+   <th colspan="3" rowspan="1" scope="col">Windows</th>
+   <th colspan="3" rowspan="1" scope="col">Mac (10.9)</th>
+   <th colspan="3" rowspan="1" scope="col">Linux (Ubuntu 14.04)</th>
+  </tr>
+  <tr>
+   <th colspan="3" rowspan="1" scope="col">Internet Explorer 11</th>
+   <th colspan="6" rowspan="1" scope="col">Google Chrome 34</th>
+   <th colspan="3" rowspan="1" scope="col">Chromium 34</th>
+   <th colspan="3" rowspan="1" scope="col">Safari 7</th>
+   <th colspan="9" rowspan="1" scope="col">Gecko 29</th>
+  </tr>
+ </tfoot>
+ <tbody>
+  <tr>
+   <th scope="row"><code>"Comma"</code></th>
+   <td colspan="3" rowspan="2"><code>0xBC (188)</code></td>
+   <td colspan="3" rowspan="2"><code>0xBC (188)</code></td>
+   <td colspan="3" rowspan="2"><code>0xBC (188)</code></td>
+   <td colspan="3" rowspan="2"><code>0xBC (188)</code></td>
+   <td colspan="3" rowspan="2"><code>0xBC (188)</code></td>
+   <td colspan="3" rowspan="2"><code>0xBC (188)</code></td>
+   <td colspan="3" rowspan="2"><code>0xBC (188)</code></td>
+   <td colspan="3" rowspan="2"><code>0xBC (188)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Comma"</code> with <kbd>Shift</kbd></th>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Period"</code></th>
+   <td colspan="3" rowspan="2"><code>0xBE (190)</code></td>
+   <td colspan="3" rowspan="2"><code>0xBE (190)</code></td>
+   <td colspan="3" rowspan="2"><code>0xBE (190)</code></td>
+   <td colspan="3" rowspan="2"><code>0xBE (190)</code></td>
+   <td colspan="3" rowspan="2"><code>0xBE (190)</code></td>
+   <td colspan="3" rowspan="2"><code>0xBE (190)</code></td>
+   <td colspan="3" rowspan="2"><code>0xBE (190)</code></td>
+   <td colspan="3" rowspan="2"><code>0xBE (190)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Period"</code> with <kbd>Shift</kbd></th>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Semicolon"</code></th>
+   <td colspan="1" rowspan="2"><code>0xBA (186)</code></td>
+   <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xBB (187)</code></td>
+   <td colspan="1" rowspan="2"><code>0xBA (186)</code></td>
+   <td colspan="1" rowspan="2"><code>0xBA (186)</code></td>
+   <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xBB (187)</code></td>
+   <td colspan="1" rowspan="2"><code>0xBA (186)</code></td>
+   <td colspan="1" rowspan="2"><code>0xBA (186)</code></td>
+   <td><code>0xBA (186)</code> *1</td>
+   <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xE5 (229) *2</code></td>
+   <td colspan="1" rowspan="2"><code>0xBA (186)</code></td>
+   <td><code>0xBA (186)</code></td>
+   <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xE5 (229) *3</code></td>
+   <td colspan="1" rowspan="2"><code>0xBA (186)</code></td>
+   <td><code>0xBA (186)</code> *1</td>
+   <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xE5 (229) *2</code></td>
+   <td colspan="1" rowspan="2"><code>0x3B (59)</code></td>
+   <td colspan="1" rowspan="2"><code>0x3B (59)</code></td>
+   <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code></td>
+   <td colspan="1" rowspan="2"><code>0x3B (59)</code></td>
+   <td colspan="1" rowspan="2"><code>0x3B (59)</code> *1</td>
+   <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code></td>
+   <td colspan="1" rowspan="2"><code>0x3B (59)</code></td>
+   <td colspan="1" rowspan="2"><code>0x3B (59)</code></td>
+   <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Semicolon"</code> with <kbd>Shift</kbd></th>
+   <td style="background-color: rgb(255, 204, 255);"><code>0xBB (187) </code>*1</td>
+   <td style="background-color: rgb(255, 204, 255);"><code>0xBB (187)</code></td>
+   <td style="background-color: rgb(255, 204, 255);"><code>0xBB (187)</code> *1</td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Quote"</code></th>
+   <td colspan="1" rowspan="2"><code>0xDE (222)</code></td>
+   <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xBA (186)</code></td>
+   <td colspan="1" rowspan="2"><code>0xDE (222)</code></td>
+   <td colspan="1" rowspan="2"><code>0xDE (222)</code></td>
+   <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xBA (186)</code></td>
+   <td colspan="1" rowspan="2"><code>0xDE (222)</code></td>
+   <td colspan="1" rowspan="2"><code>0xDE (222)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0xBA (186) *1</code></td>
+   <td colspan="1" rowspan="2"><code>0xDE (222)</code></td>
+   <td colspan="1" rowspan="2"><code>0xDE (222)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0xBA (186)</code></td>
+   <td colspan="1" rowspan="2"><code>0xDE (222)</code></td>
+   <td colspan="1" rowspan="2"><code>0xDE (222)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0xBA (186)</code>  *1</td>
+   <td colspan="1" rowspan="2"><code>0xDE (222)</code></td>
+   <td colspan="1" rowspan="2"><code>0xDE (222)</code></td>
+   <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0x3A (58)</code></td>
+   <td colspan="1" rowspan="2"><code>0xDE (222)</code></td>
+   <td colspan="1" rowspan="2"><code>0xDE (222)</code></td>
+   <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0x3A (58)</code> *1</td>
+   <td colspan="1" rowspan="2"><code>0xDE (222)</code></td>
+   <td colspan="1" rowspan="2"><code>0xDE (222)</code></td>
+   <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0x3A (58)</code></td>
+   <td colspan="1" rowspan="2"><code>0xDE (222)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Quote"</code> with Shift</th>
+   <td style="background-color: rgb(255, 204, 255);"><code>0xDE (222)</code> *1</td>
+   <td style="background-color: rgb(255, 204, 255);"><code>0x38 (56)</code></td>
+   <td style="background-color: rgb(255, 204, 255);"><code>0xDE (222)</code> *1</td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"BracketLeft"</code></th>
+   <td colspan="1" rowspan="2"><code>0xDB (219)</code></td>
+   <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xC0(192)</code></td>
+   <td colspan="1" rowspan="2"><code>0xDB (219)</code></td>
+   <td colspan="1" rowspan="2"><code>0xDB (219)</code></td>
+   <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xC0(192)</code></td>
+   <td colspan="1" rowspan="2"><code>0xDB (219)</code></td>
+   <td colspan="1" rowspan="2"><code>0xDB (219)</code></td>
+   <td><code>0xDB (219)</code> *1</td>
+   <td colspan="1" rowspan="2"><code>0xDB (219)</code></td>
+   <td colspan="1" rowspan="2"><code>0xDB (219)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x32 (50)</code></td>
+   <td colspan="1" rowspan="2"><code>0xDB (219)</code></td>
+   <td colspan="1" rowspan="2"><code>0xDB (219)</code></td>
+   <td><code>0xDB (219) *1 </code></td>
+   <td colspan="1" rowspan="2"><code>0xDB (219)</code></td>
+   <td colspan="1" rowspan="2"><code>0xDB (219)</code></td>
+   <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0x40 (64)</code></td>
+   <td colspan="1" rowspan="2"><code>0xDB (219)</code></td>
+   <td colspan="1" rowspan="2"><code>0xDB (219)</code></td>
+   <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0x40 (64)</code> *1</td>
+   <td colspan="1" rowspan="2"><code>0xDB (219)</code></td>
+   <td colspan="1" rowspan="2"><code>0xDB (219)</code></td>
+   <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0x40 (64)</code></td>
+   <td colspan="1" rowspan="2"><code>0xDB (219)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"BracketLeft"</code> with <kbd>Shift</kbd></th>
+   <td style="background-color: rgb(255, 204, 255);"><code>0xC0 (192) *1</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0xC0 (192)</code></td>
+   <td style="background-color: rgb(255, 204, 255);"><code>0xC0 (192) *1</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"BracketRight"</code></th>
+   <td colspan="1" rowspan="2"><code>0xDD (221)</code></td>
+   <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDB (219)</code></td>
+   <td colspan="1" rowspan="2"><code>0xDD (221)</code></td>
+   <td colspan="1" rowspan="2"><code>0xDD (221)</code></td>
+   <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDB (219)</code></td>
+   <td colspan="1" rowspan="2"><code>0xDD (221)</code></td>
+   <td colspan="1" rowspan="2"><code>0xDD (221)</code></td>
+   <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDB (219) *1</code></td>
+   <td colspan="1" rowspan="2"><code>0xDD (221)</code></td>
+   <td colspan="1" rowspan="2"><code>0xDD (221)</code></td>
+   <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDB (219)</code></td>
+   <td colspan="1" rowspan="2"><code>0xDD (221)</code></td>
+   <td colspan="1" rowspan="2"><code>0xDD (221)</code></td>
+   <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDB (219) *1</code></td>
+   <td colspan="1" rowspan="2"><code>0xDD (221)</code></td>
+   <td colspan="1" rowspan="2"><code>0xDD (221)</code></td>
+   <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDB (219)</code></td>
+   <td colspan="1" rowspan="2"><code>0xDD (221)</code></td>
+   <td colspan="1" rowspan="2"><code>0xDD (221)</code></td>
+   <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDB (219)</code> *1</td>
+   <td colspan="1" rowspan="2"><code>0xDD (221)</code></td>
+   <td colspan="1" rowspan="2"><code>0xDD (221)</code></td>
+   <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDB (219)</code></td>
+   <td colspan="1" rowspan="2"><code>0xDD (221)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"BracketRight"</code> with <kbd>Shift</kbd></th>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Backquote"</code></th>
+   <td colspan="1" rowspan="2"><code>0xC0 (192)</code></td>
+   <td colspan="1" rowspan="2" style="background-color: rgb(153, 153, 153);"><code>N/A</code></td>
+   <td colspan="1" rowspan="2"><code>0xC0 (192)</code></td>
+   <td colspan="1" rowspan="2"><code>0xC0 (192)</code></td>
+   <td colspan="1" rowspan="2" style="background-color: rgb(153, 153, 153);"><code>N/A</code></td>
+   <td colspan="1" rowspan="2"><code>0xC0 (192)</code></td>
+   <td colspan="3" rowspan="2"><code>0xC0 (192)</code></td>
+   <td colspan="1" rowspan="2"><code>0xC0 (192)</code></td>
+   <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xF4 (244)</code></td>
+   <td colspan="1" rowspan="2"><code>0xC0 (192)</code></td>
+   <td colspan="3" rowspan="2"><code>0xC0 (192)</code></td>
+   <td colspan="1" rowspan="2"><code>0xC0 (192)</code></td>
+   <td colspan="1" rowspan="2" style="background-color: rgb(153, 153, 153);"><code>N/A</code></td>
+   <td colspan="1" rowspan="2"><code>0xC0 (192)</code></td>
+   <td colspan="3" rowspan="2"><code>0xC0 (192)</code></td>
+   <td colspan="1" rowspan="2"><code>0xC0 (192)</code></td>
+   <td colspan="1" rowspan="2"><code>0x00 (0)</code></td>
+   <td colspan="1" rowspan="2"><code>0xC0 (192)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Backquote"</code> with <kbd>Shift</kbd></th>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Backslash"</code></th>
+   <td colspan="1" rowspan="2"><code>0xDC (220)</code></td>
+   <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDD (221)</code></td>
+   <td colspan="1" rowspan="2"><code>0xDC (220)</code></td>
+   <td colspan="1" rowspan="2"><code>0xDC (220)</code></td>
+   <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDD (221)</code></td>
+   <td colspan="1" rowspan="2"><code>0xDC (220)</code></td>
+   <td colspan="3" rowspan="2"><code>0xDC (220)</code></td>
+   <td colspan="1" rowspan="2"><code>0xDC (220)</code></td>
+   <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDD (221)</code></td>
+   <td colspan="1" rowspan="2"><code>0xDC (220)</code></td>
+   <td colspan="3" rowspan="2"><code>0xDC (220)</code></td>
+   <td colspan="1" rowspan="2"><code>0xDC (220)</code></td>
+   <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDD (221)</code></td>
+   <td colspan="1" rowspan="2"><code>0xDC (220)</code></td>
+   <td colspan="3" rowspan="2"><code>0xDC (220)</code></td>
+   <td colspan="1" rowspan="2"><code>0xDC (220)</code></td>
+   <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDD (221)</code></td>
+   <td colspan="1" rowspan="2"><code>0xDC (220)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Backslash"</code> with <kbd>Shift</kbd></th>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Minus"</code></th>
+   <td colspan="3" rowspan="2"><code>0xBD (189)</code></td>
+   <td colspan="3" rowspan="2"><code>0xBD (189)</code></td>
+   <td colspan="1" rowspan="2"><code>0xBD (189)</code></td>
+   <td><code>0xBD (189)</code> *1</td>
+   <td colspan="1" rowspan="2"><code>0xBD (189)</code></td>
+   <td colspan="1" rowspan="2"><code>0xBD (189)</code></td>
+   <td><code>0xBD (189)</code></td>
+   <td colspan="1" rowspan="2"><code>0xBD (189)</code></td>
+   <td rowspan="1"><code>0xBD (189)</code></td>
+   <td rowspan="1"><code>0xBD (189) *1</code></td>
+   <td rowspan="1"><code>0xBD (189)</code></td>
+   <td colspan="3" rowspan="2"><code>0xAD (173)</code></td>
+   <td rowspan="2"><code>0xAD (173)</code></td>
+   <td rowspan="2"><code>0xAD (173) *1</code></td>
+   <td rowspan="2"><code>0xAD (173)</code></td>
+   <td colspan="3" rowspan="2"><code>0xAD (173)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Minus"</code> with <kbd>Shift</kbd></th>
+   <td style="background-color: rgb(255, 204, 255);"><code>0xBB (187)</code> *1</td>
+   <td style="background-color: rgb(255, 204, 255);"><code>0xBB (187)</code></td>
+   <td><code>0xBD (189)</code></td>
+   <td style="background-color: rgb(255, 204, 255);"><code>0xBB (187) *1</code></td>
+   <td><code>0xBD (189)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Equal"</code></th>
+   <td colspan="1" rowspan="2"><code>0xBB (187)</code></td>
+   <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDE (222)</code></td>
+   <td colspan="1" rowspan="2"><code>0xBB (187)</code></td>
+   <td colspan="1" rowspan="2"><code>0xBB (187)</code></td>
+   <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDE (222)</code></td>
+   <td colspan="1" rowspan="2"><code>0xBB (187)</code></td>
+   <td colspan="1" rowspan="2"><code>0xBB (187)</code></td>
+   <td><code>0xBB (187) *1</code></td>
+   <td colspan="1" rowspan="2"><code>0xBB (187)</code></td>
+   <td colspan="1" rowspan="2"><code>0xBB (187)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x36 (54)</code></td>
+   <td colspan="1" rowspan="2"><code>0xBB (187)</code></td>
+   <td rowspan="1"><code>0xBB (187)</code></td>
+   <td rowspan="1"><code>0xBB (187) *1</code></td>
+   <td rowspan="1"><code>0xBB (187)</code></td>
+   <td colspan="1" rowspan="2"><code>0x3D (61)</code></td>
+   <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xA0 (160)</code></td>
+   <td colspan="1" rowspan="2"><code>0x3D (61)</code></td>
+   <td colspan="1" rowspan="2"><code>0x3D (61)</code></td>
+   <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xA0 (160)</code> *1</td>
+   <td colspan="1" rowspan="2"><code>0x3D (61)</code></td>
+   <td rowspan="2"><code>0x3D (61)</code></td>
+   <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xA0 (160)</code></td>
+   <td colspan="1" rowspan="2"><code>0x3D (61)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Equal"</code> with <kbd>Shift</kbd></th>
+   <td style="background-color: rgb(255, 204, 255);"><code>0xC0 (192) *1</code></td>
+   <td style="background-color: rgb(255, 204, 255);"><code>0xC0 (192)</code></td>
+   <td><code>0xBB (187)</code></td>
+   <td style="background-color: rgb(255, 204, 255);"><code>0xC0 (192) *1</code></td>
+   <td><code>0xBB (187)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"IntlRo"</code></th>
+   <td colspan="1" rowspan="2"><code>0xC1 (193)</code></td>
+   <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xE2 (226)</code></td>
+   <td colspan="1" rowspan="2"><code>0xC1 (193)</code></td>
+   <td colspan="1" rowspan="2"><code>0xC1 (193)</code></td>
+   <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xE2 (226)</code></td>
+   <td colspan="1" rowspan="2"><code>0xC1 (193)</code></td>
+   <td colspan="1" rowspan="2"><code>0xBD (189)</code></td>
+   <td colspan="1" rowspan="2"><code>0xBD (189)</code></td>
+   <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code></td>
+   <td colspan="1" rowspan="2">*4</td>
+   <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDC (220)</code><br>
+     </td>
+   <td colspan="1" rowspan="2">*4</td>
+   <td rowspan="2"><code>0xBD (189)</code></td>
+   <td rowspan="2"><code>0xBD (189)</code></td>
+   <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xE5 </code>(229) *5</td>
+   <td colspan="1" rowspan="2"><code>0x00 (0)</code></td>
+   <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDC (220)</code></td>
+   <td colspan="1" rowspan="2"><code>0x00 (0)</code></td>
+   <td colspan="1" rowspan="2"><code>0xA7 (167)</code></td>
+   <td colspan="1" rowspan="2"><code>0xA7 (167)</code></td>
+   <td colspan="1" rowspan="2"><code>0x00 (0)</code></td>
+   <td colspan="1" rowspan="2"><code>0x00 (0)</code></td>
+   <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDC (220)</code></td>
+   <td colspan="1" rowspan="2"><code>0x00 (0)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"IntlRo"</code> with <kbd>Shift</kbd></th>
+  </tr>
+  <tr>
+   <th scope="row"><code>"IntlYen"</code></th>
+   <td colspan="1" rowspan="2"><code>0xFF (255)</code></td>
+   <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDC (220)</code></td>
+   <td colspan="1" rowspan="2"><code>0xFF (255)</code></td>
+   <td colspan="1" rowspan="2"><code>0xFF (255)</code></td>
+   <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDC (220)</code></td>
+   <td colspan="1" rowspan="2"><code>0xFF (255)</code></td>
+   <td><code>0x00 (0)</code></td>
+   <td><code>0x00 (0)</code></td>
+   <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code></td>
+   <td colspan="1" rowspan="2">*4</td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0xDC (220)</code></td>
+   <td colspan="1" rowspan="2">*4</td>
+   <td rowspan="1"><code>0x00 (0)</code></td>
+   <td rowspan="1"><code>0x00 (0)</code></td>
+   <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xE5 </code>(229) *5</td>
+   <td colspan="1" rowspan="2"><code>0x00 (0)</code></td>
+   <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDC </code>(220)</td>
+   <td colspan="1" rowspan="2"><code>0x00 (0)</code></td>
+   <td colspan="1" rowspan="2"><code>0xDC </code>(220)</td>
+   <td colspan="1" rowspan="2"><code>0xDC </code>(220)</td>
+   <td colspan="1" rowspan="2"><code>0x00 (0)</code></td>
+   <td colspan="1" rowspan="2"><code>0x00 (0)</code></td>
+   <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDC (220)</code></td>
+   <td colspan="1" rowspan="2"><code>0x00 (0)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"IntlYen"</code> with <kbd>Shift</kbd></th>
+   <td><code>0xDC (220)</code></td>
+   <td><code>0xDC (220)</code></td>
+   <td style="background-color: rgb(255, 204, 255);"><code>0xBD (189)</code></td>
+   <td><code>0xDC (220)</code></td>
+   <td><code>0xDC (220)</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>*1 The value is input from JIS keyboard. When you use ANSI keyboard, the keyCode value and inputted character are what you select from the US keyboard layout.</p>
+
+<p>*2 The key is a dead key. The value of <code>keyup</code> event is <code>0xBA (186)</code>.</p>
+
+<p>*3 The key is a dead key. The value of <code>keyup</code> event is <code>0x10 (16)</code>.</p>
+
+<p>*4 No key events are fired.</p>
+
+<p>*5 The key isn't available with Greek keyboard layout (does not input any character). The value of <code>keyup</code> event is <code>0x00 (0)</code>.</p>
+
+<h3 id="Non-printable_keys_(function_keys)">Non-printable keys (function keys)</h3>
+
+<table class="standard-table">
+ <caption>keyCode values of each browser's keydown event caused by modifier keys:</caption>
+ <thead>
+  <tr>
+   <th colspan="1" rowspan="2" scope="row">{{domxref("KeyboardEvent.code")}}</th>
+   <th scope="col">Internet Explorer 11</th>
+   <th colspan="2" rowspan="1" scope="col">Google Chrome 34</th>
+   <th scope="col">Chromium 34</th>
+   <th scope="col">Safari 7</th>
+   <th colspan="3" rowspan="1" scope="col">Gecko 29</th>
+  </tr>
+  <tr>
+   <th scope="col">Windows</th>
+   <th scope="col">Windows</th>
+   <th scope="col">Mac (10.9)</th>
+   <th scope="col">Linux (Ubuntu 14.04)</th>
+   <th scope="col">Mac (10.9)</th>
+   <th scope="col">Windows</th>
+   <th scope="col">Mac (10.9)</th>
+   <th scope="col">Linux (Ubuntu 14.04)</th>
+  </tr>
+ </thead>
+ <tfoot>
+  <tr>
+   <th colspan="1" rowspan="2" scope="row">{{domxref("KeyboardEvent.code")}}</th>
+   <th scope="col">Windows</th>
+   <th scope="col">Windows</th>
+   <th scope="col">Mac (10.9)</th>
+   <th scope="col">Linux (Ubuntu 14.04)</th>
+   <th scope="col">Mac (10.9)</th>
+   <th scope="col">Windows</th>
+   <th scope="col">Mac (10.9)</th>
+   <th scope="col">Linux (Ubuntu 14.04)</th>
+  </tr>
+  <tr>
+   <th scope="col">Internet Explorer 11</th>
+   <th colspan="2" rowspan="1" scope="col">Google Chrome 34</th>
+   <th scope="col">Chromium 34</th>
+   <th scope="col">Safari 7</th>
+   <th colspan="3" rowspan="1" scope="col">Gecko 29</th>
+  </tr>
+ </tfoot>
+ <tbody>
+  <tr>
+   <th scope="row"><code>"AltLeft"</code></th>
+   <td><code>0x12 (18)</code></td>
+   <td><code>0x12 (18)</code></td>
+   <td><code>0x12 (18)</code></td>
+   <td><code>0x12 (18)</code></td>
+   <td><code>0x12 (18)</code></td>
+   <td><code>0x12 (18)</code></td>
+   <td><code>0x12 (18)</code></td>
+   <td><code>0x12 (18)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"AltRight"</code></th>
+   <td><code>0x12 (18)</code></td>
+   <td><code>0x12 (18)</code></td>
+   <td><code>0x12 (18)</code></td>
+   <td><code>0x12 (18)</code></td>
+   <td><code>0x12 (18)</code></td>
+   <td><code>0x12 (18)</code></td>
+   <td><code>0x12 (18)</code></td>
+   <td><code>0x12 (18)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"AltRight"</code> when it's <code>"AltGraph"</code> key</th>
+   <td>*1</td>
+   <td>*1</td>
+   <td style="background-color: rgb(153, 153, 153);">N/A</td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0xE1 (225)</code></td>
+   <td style="background-color: rgb(153, 153, 153);">N/A</td>
+   <td>*1</td>
+   <td style="background-color: rgb(153, 153, 153);">N/A</td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0xE1 (225)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"CapsLock"</code></th>
+   <td><code>0x14 (20)</code> *2</td>
+   <td><code>0x14 (20)</code> *2</td>
+   <td><code>0x14 (20)</code></td>
+   <td><code>0x14 (20)</code></td>
+   <td><code>0x14 (20)</code></td>
+   <td><code>0x14 (20)</code> *2</td>
+   <td><code>0x14 (20)</code></td>
+   <td><code>0x14 (20)</code> *3</td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"ControlLeft"</code></th>
+   <td><code>0x11 (17)</code></td>
+   <td><code>0x11 (17)</code></td>
+   <td><code>0x11 (17)</code></td>
+   <td><code>0x11 (17)</code></td>
+   <td><code>0x11 (17)</code></td>
+   <td><code>0x11 (17)</code></td>
+   <td><code>0x11 (17)</code></td>
+   <td><code>0x11 (17)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"ControlRight"</code></th>
+   <td><code>0x11 (17)</code></td>
+   <td><code>0x11 (17)</code></td>
+   <td><code>0x11 (17)</code></td>
+   <td><code>0x11 (17)</code></td>
+   <td><code>0x11 (17)</code></td>
+   <td><code>0x11 (17)</code></td>
+   <td><code>0x11 (17)</code></td>
+   <td><code>0x11 (17)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"OSLeft"</code></th>
+   <td><code>0x5B (91)</code></td>
+   <td><code>0x5B (91)</code></td>
+   <td><code>0x5B (91)</code></td>
+   <td><code>0x5B (91)</code></td>
+   <td><code>0x5B (91)</code></td>
+   <td><code>0x5B (91)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0xE0 (224)</code></td>
+   <td><code>0x5B (91)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"OSRight"</code></th>
+   <td><code>0x5C (92)</code></td>
+   <td><code>0x5C (92)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x5D (93)</code></td>
+   <td><code>0x5C (92)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x5D (93)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x5B (91)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0xE0 (224)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x5B (91)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"ShiftLeft"</code></th>
+   <td><code>0x10 (16)</code></td>
+   <td><code>0x10 (16)</code></td>
+   <td><code>0x10 (16)</code></td>
+   <td><code>0x10 (16)</code></td>
+   <td><code>0x10 (16)</code></td>
+   <td><code>0x10 (16)</code></td>
+   <td><code>0x10 (16)</code></td>
+   <td><code>0x10 (16)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"ShiftRight"</code></th>
+   <td><code>0x10 (16)</code></td>
+   <td><code>0x10 (16)</code></td>
+   <td><code>0x10 (16)</code></td>
+   <td><code>0x10 (16)</code></td>
+   <td><code>0x10 (16)</code></td>
+   <td><code>0x10 (16)</code></td>
+   <td><code>0x10 (16)</code></td>
+   <td><code>0x10 (16)</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>*1 On Windows, <code>"AltGraph"</code> key causes <code>"ControlLeft"</code> key event and <code>"AltRight"</code> key event.</p>
+
+<p>*2 When Japanese keyboard layout is active, <code>"CapsLock"</code> key without <kbd>Shift</kbd> causes <code>0xF0 (240)</code>. The key works as <code>"Alphanumeric"</code> key whose label is "英数".</p>
+
+<p>*3 When Japanese keyboard layout is active, <code>"CapsLock"</code> key without <kbd>Shift</kbd> causes <code>0x00 (0)</code>. The key works as <code>"Alphanumeric"</code> key whose label is <code>"英数"</code>.</p>
+
+<table class="standard-table">
+ <caption>keyCode values of each browser's keydown event caused by non-printable keys:</caption>
+ <thead>
+  <tr>
+   <th colspan="1" rowspan="2" scope="row">{{domxref("KeyboardEvent.code")}}</th>
+   <th scope="col">Internet Explorer 11</th>
+   <th colspan="2" rowspan="1" scope="col">Google Chrome 34</th>
+   <th scope="col">Chromium 34</th>
+   <th scope="col">Safari 7</th>
+   <th colspan="3" rowspan="1" scope="col">Gecko 29</th>
+  </tr>
+  <tr>
+   <th scope="col">Windows</th>
+   <th scope="col">Windows</th>
+   <th scope="col">Mac (10.9)</th>
+   <th scope="col">Linux (Ubuntu 14.04)</th>
+   <th scope="col">Mac (10.9)</th>
+   <th scope="col">Windows</th>
+   <th scope="col">Mac (10.9)</th>
+   <th scope="col">Linux (Ubuntu 14.04)</th>
+  </tr>
+ </thead>
+ <tfoot>
+  <tr>
+   <th colspan="1" rowspan="2" scope="row">{{domxref("KeyboardEvent.code")}}</th>
+   <th scope="col">Windows</th>
+   <th scope="col">Windows</th>
+   <th scope="col">Mac (10.9)</th>
+   <th scope="col">Linux (Ubuntu 14.04)</th>
+   <th scope="col">Mac (10.9)</th>
+   <th scope="col">Windows</th>
+   <th scope="col">Mac (10.9)</th>
+   <th scope="col">Linux (Ubuntu 14.04)</th>
+  </tr>
+  <tr>
+   <th scope="col">Internet Explorer 11</th>
+   <th colspan="2" rowspan="1" scope="col">Google Chrome 34</th>
+   <th scope="col">Chromium 34</th>
+   <th scope="col">Safari 7</th>
+   <th colspan="3" rowspan="1" scope="col">Gecko 29</th>
+  </tr>
+ </tfoot>
+ <tbody>
+  <tr>
+   <th scope="row"><code>"ContextMenu"</code></th>
+   <td><code>0x5D (93)</code></td>
+   <td><code>0x5D (93)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *1</td>
+   <td><code>0x5D (93)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *1</td>
+   <td><code>0x5D (93)</code></td>
+   <td><code>0x5D (93)</code></td>
+   <td><code>0x5D (93)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Enter"</code></th>
+   <td><code>0x0D (13)</code></td>
+   <td><code>0x0D (13)</code></td>
+   <td><code>0x0D (13)</code></td>
+   <td><code>0x0D (13)</code></td>
+   <td><code>0x0D (13)</code></td>
+   <td><code>0x0D (13)</code></td>
+   <td><code>0x0D (13)</code></td>
+   <td><code>0x0D (13)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Space"</code></th>
+   <td><code>0x20 (32)</code></td>
+   <td><code>0x20 (32)</code></td>
+   <td><code>0x20 (32)</code></td>
+   <td><code>0x20 (32)</code></td>
+   <td><code>0x20 (32)</code></td>
+   <td><code>0x20 (32)</code></td>
+   <td><code>0x20 (32)</code></td>
+   <td><code>0x20 (32)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Tab"</code></th>
+   <td><code>0x09 (9)</code></td>
+   <td><code>0x09 (9)</code></td>
+   <td><code>0x09 (9)</code></td>
+   <td><code>0x09 (9)</code></td>
+   <td><code>0x09 (9)</code></td>
+   <td><code>0x09 (9)</code></td>
+   <td><code>0x09 (9)</code></td>
+   <td><code>0x09 (9)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Delete"</code></th>
+   <td><code>0x2E (46)</code></td>
+   <td><code>0x2E (46)</code></td>
+   <td><code>0x2E (46)</code></td>
+   <td><code>0x2E (46)</code></td>
+   <td><code>0x2E (46)</code></td>
+   <td><code>0x2E (46)</code></td>
+   <td><code>0x2E (46)</code></td>
+   <td><code>0x2E (46)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"End"</code></th>
+   <td><code>0x23 (35)</code></td>
+   <td><code>0x23 (35)</code></td>
+   <td><code>0x23 (35)</code></td>
+   <td><code>0x23 (35)</code></td>
+   <td><code>0x23 (35)</code></td>
+   <td><code>0x23 (35)</code></td>
+   <td><code>0x23 (35)</code></td>
+   <td><code>0x23 (35)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Help"</code></th>
+   <td style="background-color: rgb(153, 153, 153);">N/A</td>
+   <td style="background-color: rgb(153, 153, 153);">N/A</td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x2D (45)</code> *2</td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x2F (47)</code> *3</td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x2D (45)</code> *2</td>
+   <td style="background-color: rgb(153, 153, 153);">N/A</td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x2D (45)</code> *2</td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x06 (6)</code> *3</td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Home"</code></th>
+   <td><code>0x24 (36)</code></td>
+   <td><code>0x24 (36)</code></td>
+   <td><code>0x24 (36)</code></td>
+   <td><code>0x24 (36)</code></td>
+   <td><code>0x24 (36)</code></td>
+   <td><code>0x24 (36)</code></td>
+   <td><code>0x24 (36)</code></td>
+   <td><code>0x24 (36)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Insert"</code></th>
+   <td><code>0x2D (45)</code></td>
+   <td><code>0x2D (45)</code></td>
+   <td><code>0x2D (45)</code></td>
+   <td><code>0x2D (45)</code></td>
+   <td><code>0x2D (45)</code></td>
+   <td><code>0x2D (45)</code></td>
+   <td><code>0x2D (45)</code></td>
+   <td><code>0x2D (45)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"PageDown"</code></th>
+   <td><code>0x22 (34)</code></td>
+   <td><code>0x22 (34)</code></td>
+   <td><code>0x22 (34)</code></td>
+   <td><code>0x22 (34)</code></td>
+   <td><code>0x22 (34)</code></td>
+   <td><code>0x22 (34)</code></td>
+   <td><code>0x22 (34)</code></td>
+   <td><code>0x22 (34)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"PageUp"</code></th>
+   <td><code>0x21 (33)</code></td>
+   <td><code>0x21 (33)</code></td>
+   <td><code>0x21 (33)</code></td>
+   <td><code>0x21 (33)</code></td>
+   <td><code>0x21 (33)</code></td>
+   <td><code>0x21 (33)</code></td>
+   <td><code>0x21 (33)</code></td>
+   <td><code>0x21 (33)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"ArrowDown"</code></th>
+   <td><code>0x28 (40)</code></td>
+   <td><code>0x28 (40)</code></td>
+   <td><code>0x28 (40)</code></td>
+   <td><code>0x28 (40)</code></td>
+   <td><code>0x28 (40)</code></td>
+   <td><code>0x28 (40)</code></td>
+   <td><code>0x28 (40)</code></td>
+   <td><code>0x28 (40)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"ArrowLeft"</code></th>
+   <td><code>0x25 (37)</code></td>
+   <td><code>0x25 (37)</code></td>
+   <td><code>0x25 (37)</code></td>
+   <td><code>0x25 (37)</code></td>
+   <td><code>0x25 (37)</code></td>
+   <td><code>0x25 (37)</code></td>
+   <td><code>0x25 (37)</code></td>
+   <td><code>0x25 (37)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"ArrowRight"</code></th>
+   <td><code>0x27 (39)</code></td>
+   <td><code>0x27 (39)</code></td>
+   <td><code>0x27 (39)</code></td>
+   <td><code>0x27 (39)</code></td>
+   <td><code>0x27 (39)</code></td>
+   <td><code>0x27 (39)</code></td>
+   <td><code>0x27 (39)</code></td>
+   <td><code>0x27 (39)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"ArrowUp"</code></th>
+   <td><code>0x26 (38)</code></td>
+   <td><code>0x26 (38)</code></td>
+   <td><code>0x26 (38)</code></td>
+   <td><code>0x26 (38)</code></td>
+   <td><code>0x26 (38)</code></td>
+   <td><code>0x26 (38)</code></td>
+   <td><code>0x26 (38)</code></td>
+   <td><code>0x26 (38)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Escape"</code></th>
+   <td><code>0x1B (27)</code></td>
+   <td><code>0x1B (27)</code></td>
+   <td><code>0x1B (27)</code></td>
+   <td><code>0x1B (27)</code></td>
+   <td><code>0x1B (27)</code></td>
+   <td><code>0x1B (27)</code></td>
+   <td><code>0x1B (27)</code></td>
+   <td><code>0x1B (27)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"PrintScreen"</code></th>
+   <td><code>0x2C (44)</code> *4</td>
+   <td><code>0x2C (44)</code> *4</td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x7C (124)</code>*5</td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x2A (42)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x7C (124)</code>*5</td>
+   <td><code>0x2C (44)</code> *4</td>
+   <td><code>0x2C (44)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x2A (42)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"ScrollLock"</code></th>
+   <td><code>0x91 (145)</code></td>
+   <td><code>0x91 (145)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x7D (125)</code>*5</td>
+   <td><code>0x91 (145)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x7D (125)</code>*5</td>
+   <td><code>0x91 (145)</code></td>
+   <td><code>0x91 (145)</code></td>
+   <td><code>0x91 (145)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Pause"</code></th>
+   <td><code>0x13 (19)</code> *6</td>
+   <td><code>0x13 (19)</code> *6</td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x7E (126)</code>*5</td>
+   <td><code>0x13 (19)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x7E (126)</code>*5</td>
+   <td><code>0x13 (19)</code> *6</td>
+   <td><code>0x13 (19)</code></td>
+   <td><code>0x13 (19)</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>*1 keypress event is fired whose <code>keyCode</code> and <code>charCode</code> are <code>0x10 (16)</code> but text isn't inputted into editor.</p>
+
+<p>*2 On Mac, <code>"Help"</code> key is mapped to <code>"Insert"</code> key of PC keyboard. These <code>keyCode</code> values are the same as the <code>"Insert"</code> key's <code>keyCode</code> value.</p>
+
+<p>*3 Tested on Fedora 20.</p>
+
+<p>*4 Only <code>keyup</code> event is fired.</p>
+
+<p>*5 PC's <code>"PrintScreen"</code>, <code>"ScrollLock"</code> and <code>"Pause"</code> are mapped to Mac's <code>"F13"</code>, <code>"F14"</code> and <code>"F15"</code>. Chrome and Safari map same <code>keyCode</code> values with Mac's keys.</p>
+
+<p>*6 <code>"Pause"</code> key with <kbd>Control</kbd> causes <code>0x03 (3)</code>.</p>
+
+<table class="standard-table">
+ <caption>keyCode values of each browser's keydown event caused by function keys:</caption>
+ <thead>
+  <tr>
+   <th colspan="1" rowspan="2" scope="row">{{domxref("KeyboardEvent.code")}}</th>
+   <th scope="col">Internet Explorer 11</th>
+   <th colspan="2" rowspan="1" scope="col">Google Chrome 34</th>
+   <th scope="col">Chromium 34</th>
+   <th scope="col">Safari 7</th>
+   <th colspan="3" rowspan="1" scope="col">Gecko 29</th>
+  </tr>
+  <tr>
+   <th scope="col">Windows</th>
+   <th scope="col">Windows</th>
+   <th scope="col">Mac (10.9)</th>
+   <th scope="col">Linux (Ubuntu 14.04)</th>
+   <th scope="col">Mac (10.9)</th>
+   <th scope="col">Windows</th>
+   <th scope="col">Mac (10.9)</th>
+   <th scope="col">Linux (Ubuntu 14.04)</th>
+  </tr>
+ </thead>
+ <tfoot>
+  <tr>
+   <th colspan="1" rowspan="2" scope="row">{{domxref("KeyboardEvent.code")}}</th>
+   <th scope="col">Windows</th>
+   <th scope="col">Windows</th>
+   <th scope="col">Mac (10.9)</th>
+   <th scope="col">Linux (Ubuntu 14.04)</th>
+   <th scope="col">Mac (10.9)</th>
+   <th scope="col">Windows</th>
+   <th scope="col">Mac (10.9)</th>
+   <th scope="col">Linux (Ubuntu 14.04)</th>
+  </tr>
+  <tr>
+   <th scope="col">Internet Explorer 11</th>
+   <th colspan="2" rowspan="1" scope="col">Google Chrome 34</th>
+   <th scope="col">Chromium 34</th>
+   <th scope="col">Safari 7</th>
+   <th colspan="3" rowspan="1" scope="col">Gecko 29</th>
+  </tr>
+ </tfoot>
+ <tbody>
+  <tr>
+   <th scope="row"><code>"F1"</code></th>
+   <td><code>0x70 (112)</code></td>
+   <td><code>0x70 (112)</code></td>
+   <td><code>0x70 (112)</code></td>
+   <td><code>0x70 (112)</code></td>
+   <td><code>0x70 (112)</code></td>
+   <td><code>0x70 (112)</code></td>
+   <td><code>0x70 (112)</code></td>
+   <td><code>0x70 (112)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"F2"</code></th>
+   <td><code>0x71 (113)</code></td>
+   <td><code>0x71 (113)</code></td>
+   <td><code>0x71 (113)</code></td>
+   <td><code>0x71 (113)</code></td>
+   <td><code>0x71 (113)</code></td>
+   <td><code>0x71 (113)</code></td>
+   <td><code>0x71 (113)</code></td>
+   <td><code>0x71 (113)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"F3"</code></th>
+   <td><code>0x72 (114)</code></td>
+   <td><code>0x72 (114)</code></td>
+   <td><code>0x72 (114)</code></td>
+   <td><code>0x72 (114)</code></td>
+   <td><code>0x72 (114)</code></td>
+   <td><code>0x72 (114)</code></td>
+   <td><code>0x72 (114)</code></td>
+   <td><code>0x72 (114)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"F4"</code></th>
+   <td><code>0x73 (115)</code></td>
+   <td><code>0x73 (115)</code></td>
+   <td><code>0x73 (115)</code></td>
+   <td><code>0x73 (115)</code></td>
+   <td><code>0x73 (115)</code></td>
+   <td><code>0x73 (115)</code></td>
+   <td><code>0x73 (115)</code></td>
+   <td><code>0x73 (115)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"F5"</code></th>
+   <td><code>0x74 (116)</code></td>
+   <td><code>0x74 (116)</code></td>
+   <td><code>0x74 (116)</code></td>
+   <td><code>0x74 (116)</code></td>
+   <td><code>0x74 (116)</code></td>
+   <td><code>0x74 (116)</code></td>
+   <td><code>0x74 (116)</code></td>
+   <td><code>0x74 (116)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"F6"</code></th>
+   <td><code>0x75 (117)</code></td>
+   <td><code>0x75 (117)</code></td>
+   <td><code>0x75 (117)</code></td>
+   <td><code>0x75 (117)</code></td>
+   <td><code>0x75 (117)</code></td>
+   <td><code>0x75 (117)</code></td>
+   <td><code>0x75 (117)</code></td>
+   <td><code>0x75 (117)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"F7"</code></th>
+   <td><code>0x76 (118)</code></td>
+   <td><code>0x76 (118)</code></td>
+   <td><code>0x76 (118)</code></td>
+   <td><code>0x76 (118)</code></td>
+   <td><code>0x76 (118)</code></td>
+   <td><code>0x76 (118)</code></td>
+   <td><code>0x76 (118)</code></td>
+   <td><code>0x76 (118)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"F8"</code></th>
+   <td><code>0x77 (119)</code></td>
+   <td><code>0x77 (119)</code></td>
+   <td><code>0x77 (119)</code></td>
+   <td><code>0x77 (119)</code></td>
+   <td><code>0x77 (119)</code></td>
+   <td><code>0x77 (119)</code></td>
+   <td><code>0x77 (119)</code></td>
+   <td><code>0x77 (119)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"F9"</code></th>
+   <td><code>0x78 (120)</code></td>
+   <td><code>0x78 (120)</code></td>
+   <td><code>0x78 (120)</code></td>
+   <td><code>0x78 (120)</code></td>
+   <td><code>0x78 (120)</code></td>
+   <td><code>0x78 (120)</code></td>
+   <td><code>0x78 (120)</code></td>
+   <td><code>0x78 (120)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"F10"</code></th>
+   <td><code>0x79 (121)</code></td>
+   <td><code>0x79 (121)</code></td>
+   <td><code>0x79 (121)</code></td>
+   <td><code>0x79 (121)</code></td>
+   <td><code>0x79 (121)</code></td>
+   <td><code>0x79 (121)</code></td>
+   <td><code>0x79 (121)</code></td>
+   <td><code>0x79 (121)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"F11"</code></th>
+   <td><code>0x7A (122)</code></td>
+   <td><code>0x7A (122)</code></td>
+   <td><code>0x7A (122)</code></td>
+   <td><code>0x7A (122)</code></td>
+   <td><code>0x7A (122)</code></td>
+   <td><code>0x7A (122)</code></td>
+   <td><code>0x7A (122)</code></td>
+   <td><code>0x7A (122)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"F12"</code></th>
+   <td><code>0x7B (123)</code></td>
+   <td><code>0x7B (123)</code></td>
+   <td><code>0x7B (123)</code></td>
+   <td><code>0x7B (123)</code></td>
+   <td><code>0x7B (123)</code></td>
+   <td><code>0x7B (123)</code></td>
+   <td><code>0x7B (123)</code></td>
+   <td><code>0x7B (123)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"F13"</code></th>
+   <td><code>0x7C (124)</code></td>
+   <td><code>0x7C (124)</code></td>
+   <td><code>0x7C (124)</code></td>
+   <td><code>0x7C (124)</code> *1</td>
+   <td><code>0x7C (124)</code></td>
+   <td><code>0x7C (124)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x2C (44)</code> *2</td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *3</td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"F14"</code></th>
+   <td><code>0x7D (125)</code></td>
+   <td><code>0x7D (125)</code></td>
+   <td><code>0x7D (125)</code></td>
+   <td><code>0x7D (125)</code> *1</td>
+   <td><code>0x7D (125)</code></td>
+   <td><code>0x7D (125)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x91 (145)</code> *2</td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *3</td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"F15"</code></th>
+   <td><code>0x7E (126)</code></td>
+   <td><code>0x7E (126)</code></td>
+   <td><code>0x7E (126)</code></td>
+   <td><code>0x7E (126)</code> *1</td>
+   <td><code>0x7E (126)</code></td>
+   <td><code>0x7E (126)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x13 (19)</code> *2</td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *3</td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"F16"</code></th>
+   <td><code>0x7F (127)</code></td>
+   <td><code>0x7F (127)</code></td>
+   <td><code>0x7F (127)</code></td>
+   <td><code>0x7F (127)</code> *1</td>
+   <td><code>0x7F (127)</code></td>
+   <td><code>0x7F (127)</code></td>
+   <td><code>0x7F (127)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *3</td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"F17"</code></th>
+   <td><code>0x80 (128)</code></td>
+   <td><code>0x80 (128)</code></td>
+   <td><code>0x80 (128)</code></td>
+   <td><code>0x80 (128)</code> *1</td>
+   <td><code>0x80 (128)</code></td>
+   <td><code>0x80 (128)</code></td>
+   <td><code>0x80 (128)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *3</td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"F18"</code></th>
+   <td><code>0x81 (129)</code></td>
+   <td><code>0x81 (129)</code></td>
+   <td><code>0x81 (129)</code></td>
+   <td><code>0x81 (129)</code> *1</td>
+   <td><code>0x81 (129)</code></td>
+   <td><code>0x81 (129)</code></td>
+   <td><code>0x81 (129)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *3</td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"F19"</code></th>
+   <td><code>0x82 (130)</code></td>
+   <td><code>0x82 (130)</code></td>
+   <td><code>0x82 (130)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>N/A</code> *4</td>
+   <td><code>0x82 (130)</code></td>
+   <td><code>0x82 (130)</code></td>
+   <td><code>0x82 (130)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *3</td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"F20"</code></th>
+   <td><code>0x83 (131)</code></td>
+   <td><code>0x83 (131)</code></td>
+   <td><code>0x83 (131)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>N/A</code> *4</td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0xE5 (229)</code> *5</td>
+   <td><code>0x83 (131)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>N/A</code> *6</td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"F21"</code></th>
+   <td><code>0x84 (132)</code></td>
+   <td><code>0x84 (132)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *7</td>
+   <td style="background-color: rgb(255, 255, 204);"><code>N/A</code> *4</td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *7</td>
+   <td><code>0x84 (132)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>N/A</code> *8</td>
+   <td style="background-color: rgb(255, 255, 204);"><code>N/A</code> *6</td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"F22"</code></th>
+   <td><code>0x85 (133)</code></td>
+   <td><code>0x85 (133)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *7</td>
+   <td style="background-color: rgb(255, 255, 204);"><code>N/A</code> *4</td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *7</td>
+   <td><code>0x85 (133)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>N/A</code> *8</td>
+   <td style="background-color: rgb(255, 255, 204);"><code>N/A</code> *6</td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"F23"</code></th>
+   <td><code>0x86 (134)</code></td>
+   <td><code>0x86 (134)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *7</td>
+   <td style="background-color: rgb(255, 255, 204);"><code>N/A</code> *4</td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *7</td>
+   <td><code>0x86 (134)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>N/A</code> *8</td>
+   <td style="background-color: rgb(255, 255, 204);"><code>N/A</code> *6</td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"F24"</code></th>
+   <td><code>0x87 (135)</code></td>
+   <td><code>0x87 (135)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *7</td>
+   <td style="background-color: rgb(255, 255, 204);"><code>N/A</code> *4</td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *7</td>
+   <td><code>0x87 (135)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>N/A</code> *8</td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *3</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>*1 Tested on Fedora 20.</p>
+
+<p>*2 PC's <code>"PrintScreen"</code>, <code>"ScrollLock"</code> and <code>"Pause"</code> are mapped to <code>Mac's "F13"</code>, <code>"F14"</code> and <code>"F15"</code>. Firefox maps same <code>keyCode</code> values with PC's keys.</p>
+
+<p>*3 Tested on Fedora 20. The keys don't cause <code>GDK_Fxx</code> keysyms. If the keys cause proper keysyms, these values must be same as IE.</p>
+
+<p>*4 Tested on Fedora 20. The keys don't cause DOM key events on Chromium.</p>
+
+<p>*5 <code>keyUp</code> event's keyCode value is <code>0x83 (131)</code>.</p>
+
+<p>*6 Tested on Fedora 20. The keys don't cause DOM key events on Firefox.</p>
+
+<p>*7 Only <code>keydown</code> event is fired.</p>
+
+<p>*8 No DOM key events are fired on Firefox.</p>
+
+<h3 id="Numpad_keys">Numpad keys</h3>
+
+<table class="standard-table">
+ <caption>keyCode values of each browser's keydown event caused by keys in numpad in NumLock state</caption>
+ <thead>
+  <tr>
+   <th colspan="1" rowspan="2" scope="row">{{domxref("KeyboardEvent.code")}}</th>
+   <th scope="col">Internet Explorer 11</th>
+   <th colspan="2" rowspan="1" scope="col">Google Chrome 34</th>
+   <th scope="col">Chromium 34</th>
+   <th scope="col">Safari 7</th>
+   <th colspan="3" rowspan="1" scope="col">Gecko 29</th>
+  </tr>
+  <tr>
+   <th scope="col">Windows</th>
+   <th scope="col">Windows</th>
+   <th scope="col">Mac (10.9)</th>
+   <th scope="col">Linux (Ubuntu 14.04)</th>
+   <th scope="col">Mac (10.9)</th>
+   <th scope="col">Windows</th>
+   <th scope="col">Mac (10.9)</th>
+   <th scope="col">Linux (Ubuntu 14.04)</th>
+  </tr>
+ </thead>
+ <tfoot>
+  <tr>
+   <th colspan="1" rowspan="2" scope="row">{{domxref("KeyboardEvent.code")}}</th>
+   <th scope="col">Windows</th>
+   <th scope="col">Windows</th>
+   <th scope="col">Mac (10.9)</th>
+   <th scope="col">Linux (Ubuntu 14.04)</th>
+   <th scope="col">Mac (10.9)</th>
+   <th scope="col">Windows</th>
+   <th scope="col">Mac (10.9)</th>
+   <th scope="col">Linux (Ubuntu 14.04)</th>
+  </tr>
+  <tr>
+   <th scope="col">Internet Explorer 11</th>
+   <th colspan="2" rowspan="1" scope="col">Google Chrome 34</th>
+   <th scope="col">Chromium 34</th>
+   <th scope="col">Safari 7</th>
+   <th colspan="3" rowspan="1" scope="col">Gecko 29</th>
+  </tr>
+ </tfoot>
+ <tbody>
+  <tr>
+   <th scope="row"><code>"NumLock"</code></th>
+   <td><code>0x90 (144)</code></td>
+   <td><code>0x90 (144)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x0C (12)</code> *1</td>
+   <td><code>0x90 (144)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x0C (12)</code> *1</td>
+   <td><code>0x90 (144)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x0C (12)</code> *1</td>
+   <td><code>0x90 (144)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Numpad0"</code></th>
+   <td><code>0x60 (96)</code></td>
+   <td><code>0x60 (96)</code></td>
+   <td><code>0x60 (96)</code></td>
+   <td><code>0x60 (96)</code></td>
+   <td><code>0x60 (96)</code></td>
+   <td><code>0x60 (96)</code></td>
+   <td><code>0x60 (96)</code></td>
+   <td><code>0x60 (96)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Numpad1"</code></th>
+   <td><code>0x61 (97)</code></td>
+   <td><code>0x61 (97)</code></td>
+   <td><code>0x61 (97)</code></td>
+   <td><code>0x61 (97)</code></td>
+   <td><code>0x61 (97)</code></td>
+   <td><code>0x61 (97)</code></td>
+   <td><code>0x61 (97)</code></td>
+   <td><code>0x61 (97)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Numpad2"</code></th>
+   <td><code>0x62 (98)</code></td>
+   <td><code>0x62 (98)</code></td>
+   <td><code>0x62 (98)</code></td>
+   <td><code>0x62 (98)</code></td>
+   <td><code>0x62 (98)</code></td>
+   <td><code>0x62 (98)</code></td>
+   <td><code>0x62 (98)</code></td>
+   <td><code>0x62 (98)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Numpad3"</code></th>
+   <td><code>0x63 (99)</code></td>
+   <td><code>0x63 (99)</code></td>
+   <td><code>0x63 (99)</code></td>
+   <td><code>0x63 (99)</code></td>
+   <td><code>0x63 (99)</code></td>
+   <td><code>0x63 (99)</code></td>
+   <td><code>0x63 (99)</code></td>
+   <td><code>0x63 (99)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Numpad4"</code></th>
+   <td><code>0x64 (100)</code></td>
+   <td><code>0x64 (100)</code></td>
+   <td><code>0x64 (100)</code></td>
+   <td><code>0x64 (100)</code></td>
+   <td><code>0x64 (100)</code></td>
+   <td><code>0x64 (100)</code></td>
+   <td><code>0x64 (100)</code></td>
+   <td><code>0x64 (100)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Numpad5"</code></th>
+   <td><code>0x65 (101)</code></td>
+   <td><code>0x65 (101)</code></td>
+   <td><code>0x65 (101)</code></td>
+   <td><code>0x65 (101)</code></td>
+   <td><code>0x65 (101)</code></td>
+   <td><code>0x65 (101)</code></td>
+   <td><code>0x65 (101)</code></td>
+   <td><code>0x65 (101)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Numpad6"</code></th>
+   <td><code>0x66 (102)</code></td>
+   <td><code>0x66 (102)</code></td>
+   <td><code>0x66 (102)</code></td>
+   <td><code>0x66 (102)</code></td>
+   <td><code>0x66 (102)</code></td>
+   <td><code>0x66 (102)</code></td>
+   <td><code>0x66 (102)</code></td>
+   <td><code>0x66 (102)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Numpad7"</code></th>
+   <td><code>0x67 (103)</code></td>
+   <td><code>0x67 (103)</code></td>
+   <td><code>0x67 (103)</code></td>
+   <td><code>0x67 (103)</code></td>
+   <td><code>0x67 (103)</code></td>
+   <td><code>0x67 (103)</code></td>
+   <td><code>0x67 (103)</code></td>
+   <td><code>0x67 (103)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Numpad8"</code></th>
+   <td><code>0x68 (104)</code></td>
+   <td><code>0x68 (104)</code></td>
+   <td><code>0x68 (104)</code></td>
+   <td><code>0x68 (104)</code></td>
+   <td><code>0x68 (104)</code></td>
+   <td><code>0x68 (104)</code></td>
+   <td><code>0x68 (104)</code></td>
+   <td><code>0x68 (104)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Numpad9"</code></th>
+   <td><code>0x69 (105)</code></td>
+   <td><code>0x69 (105)</code></td>
+   <td><code>0x69 (105)</code></td>
+   <td><code>0x69 (105)</code></td>
+   <td><code>0x69 (105)</code></td>
+   <td><code>0x69 (105)</code></td>
+   <td><code>0x69 (105)</code></td>
+   <td><code>0x69 (105)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"NumpadAdd"</code></th>
+   <td><code>0x6B (107)</code></td>
+   <td><code>0x6B (107)</code></td>
+   <td><code>0x6B (107)</code></td>
+   <td><code>0x6B (107)</code></td>
+   <td><code>0x6B (107)</code></td>
+   <td><code>0x6B (107)</code></td>
+   <td><code>0x6B (107)</code></td>
+   <td><code>0x6B (107)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"NumpadComma"</code> inputting <code>","</code></th>
+   <td><code>0xC2 (194)</code></td>
+   <td><code>0xC2 (194)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0xBC (188)</code></td>
+   <td style="background-color: rgb(153, 153, 153);"><code>Always inputs </code>"."</td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0xBC (188)</code></td>
+   <td><code>0xC2 (194)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x6C (108)</code></td>
+   <td style="background-color: rgb(153, 153, 153);"><code>Always inputs </code>"."</td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"NumpadComma"</code> inputting <code>"."</code> or empty string</th>
+   <td><code>0xC2 (194)</code></td>
+   <td><code>0xC2 (194)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0xBE (190)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x6E (110)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0xBE (190)</code></td>
+   <td><code>0xC2 (194)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x6C (108)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x6E (110)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"NumpadDecimal"</code> inputting <code>"."</code></th>
+   <td><code>0x6E (110)</code></td>
+   <td><code>0x6E (110)</code></td>
+   <td><code>0x6E (110)</code></td>
+   <td><code>0x6E (110)</code></td>
+   <td><code>0x6E (110)</code></td>
+   <td><code>0x6E (110)</code></td>
+   <td><code>0x6E (110)</code></td>
+   <td><code>0x6E (110)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"NumpadDecimal"</code> inputting <code>","</code></th>
+   <td><code>0x6E (110)</code></td>
+   <td><code>0x6E (110)</code></td>
+   <td><code>0x6E (110)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x6C (108)</code></td>
+   <td><code>0x6E (110)</code></td>
+   <td><code>0x6E (110)</code></td>
+   <td><code>0x6E (110)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x6C (108)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"NumpadDivide"</code></th>
+   <td><code>0x6F (111)</code></td>
+   <td><code>0x6F (111)</code></td>
+   <td><code>0x6F (111)</code></td>
+   <td><code>0x6F (111)</code></td>
+   <td><code>0x6F (111)</code></td>
+   <td><code>0x6F (111)</code></td>
+   <td><code>0x6F (111)</code></td>
+   <td><code>0x6F (111)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"NumpadEnter"</code></th>
+   <td><code>0x0D (13)</code></td>
+   <td><code>0x0D (13)</code></td>
+   <td><code>0x0D (13)</code></td>
+   <td><code>0x0D (13)</code></td>
+   <td><code>0x0D (13)</code></td>
+   <td><code>0x0D (13)</code></td>
+   <td><code>0x0D (13)</code></td>
+   <td><code>0x0D (13)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"NumpadEqual"</code></th>
+   <td><code>0x0C (12)</code></td>
+   <td><code>0x0C (12)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0xBB (187)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0xBB (187)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0xBB (187)</code></td>
+   <td><code>0x0C (12)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x3D (61)</code></td>
+   <td style="background-color: rgb(255, 255, 204);"><code>0x3D (61)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"NumpadMultiply"</code></th>
+   <td><code>0x6A (106)</code></td>
+   <td><code>0x6A (106)</code></td>
+   <td><code>0x6A (106)</code></td>
+   <td><code>0x6A (106)</code></td>
+   <td><code>0x6A (106)</code></td>
+   <td><code>0x6A (106)</code></td>
+   <td><code>0x6A (106)</code></td>
+   <td><code>0x6A (106)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"NumpadSubtract"</code></th>
+   <td><code>0x6D (109)</code></td>
+   <td><code>0x6D (109)</code></td>
+   <td><code>0x6D (109)</code></td>
+   <td><code>0x6D (109)</code></td>
+   <td><code>0x6D (109)</code></td>
+   <td><code>0x6D (109)</code></td>
+   <td><code>0x6D (109)</code></td>
+   <td><code>0x6D (109)</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>*1 <code>"NumLock"</code> key works as <code>"Clear"</code> key on Mac.</p>
+
+<table class="standard-table">
+ <caption>keyCode values of each browser's keydown event caused by keys in numpad without NumLock state</caption>
+ <thead>
+  <tr>
+   <th colspan="1" rowspan="2" scope="row">{{domxref("KeyboardEvent.code")}}</th>
+   <th scope="col">Internet Explorer 11</th>
+   <th colspan="1" rowspan="1" scope="col">Google Chrome 34</th>
+   <th scope="col">Chromium 34</th>
+   <th colspan="2" rowspan="1" scope="col">Gecko 29</th>
+  </tr>
+  <tr>
+   <th scope="col">Windows</th>
+   <th scope="col">Windows</th>
+   <th scope="col">Linux (Ubuntu 14.04)</th>
+   <th scope="col">Windows</th>
+   <th scope="col">Linux (Ubuntu 14.04)</th>
+  </tr>
+ </thead>
+ <tfoot>
+  <tr>
+   <th colspan="1" rowspan="2" scope="row">{{domxref("KeyboardEvent.code")}}</th>
+   <th scope="col">Windows</th>
+   <th scope="col">Windows</th>
+   <th scope="col">Linux (Ubuntu 14.04)</th>
+   <th scope="col">Windows</th>
+   <th scope="col">Linux (Ubuntu 14.04)</th>
+  </tr>
+  <tr>
+   <th scope="col">Internet Explorer 11</th>
+   <th colspan="1" rowspan="1" scope="col">Google Chrome 34</th>
+   <th scope="col">Chromium 34</th>
+   <th colspan="2" rowspan="1" scope="col">Gecko 29</th>
+  </tr>
+ </tfoot>
+ <tbody>
+  <tr>
+   <th scope="row"><code>"Numpad0"</code> (<code>"Insert"</code>)</th>
+   <td><code>0x2D (45)</code></td>
+   <td><code>0x2D (45)</code></td>
+   <td><code>0x2D (45)</code></td>
+   <td><code>0x2D (45)</code></td>
+   <td><code>0x2D (45)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Numpad1"</code> (<code>"End"</code>)</th>
+   <td><code>0x23 (35)</code></td>
+   <td><code>0x23 (35)</code></td>
+   <td><code>0x23 (35)</code></td>
+   <td><code>0x23 (35)</code></td>
+   <td><code>0x23 (35)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Numpad2"</code> (<code>"ArrowDown"</code>)</th>
+   <td><code>0x28 (40)</code></td>
+   <td><code>0x28 (40)</code></td>
+   <td><code>0x28 (40)</code></td>
+   <td><code>0x28 (40)</code></td>
+   <td><code>0x28 (40)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Numpad3"</code> (<code>"PageDown"</code>)</th>
+   <td><code>0x22 (34)</code></td>
+   <td><code>0x22 (34)</code></td>
+   <td><code>0x22 (34)</code></td>
+   <td><code>0x22 (34)</code></td>
+   <td><code>0x22 (34)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Numpad4"</code> (<code>"ArrowLeft"</code>)</th>
+   <td><code>0x25 (37)</code></td>
+   <td><code>0x25 (37)</code></td>
+   <td><code>0x25 (37)</code></td>
+   <td><code>0x25 (37)</code></td>
+   <td><code>0x25 (37)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Numpad5"</code></th>
+   <td><code>0x0C (12)</code></td>
+   <td><code>0x0C (12)</code></td>
+   <td><code>0x0C (12)</code></td>
+   <td><code>0x0C (12)</code></td>
+   <td><code>0x0C (12)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Numpad6"</code> (<code>"ArrowRight"</code>)</th>
+   <td><code>0x27 (39)</code></td>
+   <td><code>0x27 (39)</code></td>
+   <td><code>0x27 (39)</code></td>
+   <td><code>0x27 (39)</code></td>
+   <td><code>0x27 (39)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Numpad7"</code> (<code>"Home"</code>)</th>
+   <td><code>0x24 (36)</code></td>
+   <td><code>0x24 (36)</code></td>
+   <td><code>0x24 (36)</code></td>
+   <td><code>0x24 (36)</code></td>
+   <td><code>0x24 (36)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Numpad8"</code> (<code>"ArrowUp"</code>)</th>
+   <td><code>0x26 (38)</code></td>
+   <td><code>0x26 (38)</code></td>
+   <td><code>0x26 (38)</code></td>
+   <td><code>0x26 (38)</code></td>
+   <td><code>0x26 (38)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"Numpad9"</code> (<code>"PageUp"</code>)</th>
+   <td><code>0x21 (33)</code></td>
+   <td><code>0x21 (33)</code></td>
+   <td><code>0x21 (33)</code></td>
+   <td><code>0x21 (33)</code></td>
+   <td><code>0x21 (33)</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><code>"NumpadDecimal"</code> (<code>"Delete"</code>)</th>
+   <td><code>0x2E (46)</code></td>
+   <td><code>0x2E (46)</code></td>
+   <td><code>0x2E (46)</code></td>
+   <td><code>0x2E (46)</code></td>
+   <td><code>0x2E (46)</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>* Recent Mac doesn't have <code>"NumLock"</code> key and state. Therefore, unlocked state isn't available.</p>
+
+<h2 id="Constants_for_keyCode_value">Constants for keyCode value</h2>
+
+<p>Gecko defines a lot of <code>keyCode</code> values in <code>KeyboardEvent</code> for making the mapping table explicitly. These values are useful for add-on developers of Firefox, but not so useful in public web pages.</p>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <td class="header">Constant</td>
+   <td class="header">Value</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_CANCEL</code></td>
+   <td style="white-space: nowrap;">0x03 (3)</td>
+   <td>Cancel key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_HELP</code></td>
+   <td style="white-space: nowrap;">0x06 (6)</td>
+   <td>Help key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_BACK_SPACE</code></td>
+   <td style="white-space: nowrap;">0x08 (8)</td>
+   <td>Backspace key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_TAB</code></td>
+   <td style="white-space: nowrap;">0x09 (9)</td>
+   <td>Tab key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_CLEAR</code></td>
+   <td style="white-space: nowrap;">0x0C (12)</td>
+   <td>"5" key on Numpad when NumLock is unlocked. Or on Mac, clear key which is positioned at NumLock key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_RETURN</code></td>
+   <td style="white-space: nowrap;">0x0D (13)</td>
+   <td>Return/enter key on the main keyboard.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_ENTER</code></td>
+   <td style="white-space: nowrap;">0x0E (14)</td>
+   <td>Reserved, but not used. <code> </code><code>{{obsolete_inline(30)}} </code>(Dropped, see {{bug(969247)}}.)</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_SHIFT</code></td>
+   <td style="white-space: nowrap;">0x10 (16)</td>
+   <td>Shift key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_CONTROL</code></td>
+   <td style="white-space: nowrap;">0x11 (17)</td>
+   <td>Control key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_ALT</code></td>
+   <td style="white-space: nowrap;">0x12 (18)</td>
+   <td>Alt (Option on Mac) key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_PAUSE</code></td>
+   <td style="white-space: nowrap;">0x13 (19)</td>
+   <td>Pause key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_CAPS_LOCK</code></td>
+   <td style="white-space: nowrap;">0x14 (20)</td>
+   <td>Caps lock.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_KANA</code></td>
+   <td style="white-space: nowrap;">0x15 (21)</td>
+   <td>Linux support for this keycode was added in Gecko 4.0.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_HANGUL</code></td>
+   <td style="white-space: nowrap;">0x15 (21)</td>
+   <td>Linux support for this keycode was added in Gecko 4.0.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_EISU</code></td>
+   <td style="white-space: nowrap;">0x 16 (22)</td>
+   <td>"英数" key on Japanese Mac keyboard. {{gecko_minversion_inline("15.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_JUNJA</code></td>
+   <td style="white-space: nowrap;">0x17 (23)</td>
+   <td>Linux support for this keycode was added in Gecko 4.0.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_FINAL</code></td>
+   <td style="white-space: nowrap;">0x18 (24)</td>
+   <td>Linux support for this keycode was added in Gecko 4.0.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_HANJA</code></td>
+   <td style="white-space: nowrap;">0x19 (25)</td>
+   <td>Linux support for this keycode was added in Gecko 4.0.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_KANJI</code></td>
+   <td style="white-space: nowrap;">0x19 (25)</td>
+   <td>Linux support for this keycode was added in Gecko 4.0.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_ESCAPE</code></td>
+   <td style="white-space: nowrap;">0x1B (27)</td>
+   <td>Escape key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_CONVERT</code></td>
+   <td style="white-space: nowrap;">0x1C (28)</td>
+   <td>Linux support for this keycode was added in Gecko 4.0.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_NONCONVERT</code></td>
+   <td style="white-space: nowrap;">0x1D (29)</td>
+   <td>Linux support for this keycode was added in Gecko 4.0.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_ACCEPT</code></td>
+   <td style="white-space: nowrap;">0x1E (30)</td>
+   <td>Linux support for this keycode was added in Gecko 4.0.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_MODECHANGE</code></td>
+   <td style="white-space: nowrap;">0x1F (31)</td>
+   <td>Linux support for this keycode was added in Gecko 4.0.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_SPACE</code></td>
+   <td style="white-space: nowrap;">0x20 (32)</td>
+   <td>Space bar.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_PAGE_UP</code></td>
+   <td style="white-space: nowrap;">0x21 (33)</td>
+   <td>Page Up key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_PAGE_DOWN</code></td>
+   <td style="white-space: nowrap;">0x22 (34)</td>
+   <td>Page Down key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_END</code></td>
+   <td style="white-space: nowrap;">0x23 (35)</td>
+   <td>End key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_HOME</code></td>
+   <td style="white-space: nowrap;">0x24 (36)</td>
+   <td>Home key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_LEFT</code></td>
+   <td style="white-space: nowrap;">0x25 (37)</td>
+   <td>Left arrow.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_UP</code></td>
+   <td style="white-space: nowrap;">0x26 (38)</td>
+   <td>Up arrow.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_RIGHT</code></td>
+   <td style="white-space: nowrap;">0x27 (39)</td>
+   <td>Right arrow.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_DOWN</code></td>
+   <td style="white-space: nowrap;">0x28 (40)</td>
+   <td>Down arrow.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_SELECT</code></td>
+   <td style="white-space: nowrap;">0x29 (41)</td>
+   <td>Linux support for this keycode was added in Gecko 4.0.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_PRINT</code></td>
+   <td style="white-space: nowrap;">0x2A (42)</td>
+   <td>Linux support for this keycode was added in Gecko 4.0.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_EXECUTE</code></td>
+   <td style="white-space: nowrap;">0x2B (43)</td>
+   <td>Linux support for this keycode was added in Gecko 4.0.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_PRINTSCREEN</code></td>
+   <td style="white-space: nowrap;">0x2C (44)</td>
+   <td>Print Screen key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_INSERT</code></td>
+   <td style="white-space: nowrap;">0x2D (45)</td>
+   <td>Ins(ert) key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_DELETE</code></td>
+   <td style="white-space: nowrap;">0x2E (46)</td>
+   <td>Del(ete) key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_0</code></td>
+   <td style="white-space: nowrap;">0x30 (48)</td>
+   <td>"0" key in standard key location.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_1</code></td>
+   <td style="white-space: nowrap;">0x31 (49)</td>
+   <td>"1" key in standard key location.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_2</code></td>
+   <td style="white-space: nowrap;">0x32 (50)</td>
+   <td>"2" key in standard key location.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_3</code></td>
+   <td style="white-space: nowrap;">0x33 (51)</td>
+   <td>"3" key in standard key location.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_4</code></td>
+   <td style="white-space: nowrap;">0x34 (52)</td>
+   <td>"4" key in standard key location.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_5</code></td>
+   <td style="white-space: nowrap;">0x35 (53)</td>
+   <td>"5" key in standard key location.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_6</code></td>
+   <td style="white-space: nowrap;">0x36 (54)</td>
+   <td>"6" key in standard key location.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_7</code></td>
+   <td style="white-space: nowrap;">0x37 (55)</td>
+   <td>"7" key in standard key location.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_8</code></td>
+   <td style="white-space: nowrap;">0x38 (56)</td>
+   <td>"8" key in standard key location.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_9</code></td>
+   <td style="white-space: nowrap;">0x39 (57)</td>
+   <td>"9" key in standard key location.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_COLON</code></td>
+   <td style="white-space: nowrap;">0x3A (58)</td>
+   <td>Colon (":") key. {{gecko_minversion_inline("15.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_SEMICOLON</code></td>
+   <td style="white-space: nowrap;">0x3B (59)</td>
+   <td>Semicolon (";") key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_LESS_THAN</code></td>
+   <td style="white-space: nowrap;">0x3C (60)</td>
+   <td>Less-than ("&lt;") key. {{gecko_minversion_inline("15.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_EQUALS</code></td>
+   <td style="white-space: nowrap;">0x3D (61)</td>
+   <td>Equals ("=") key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_GREATER_THAN</code></td>
+   <td style="white-space: nowrap;">0x3E (62)</td>
+   <td>Greater-than ("&gt;") key. {{gecko_minversion_inline("15.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_QUESTION_MARK</code></td>
+   <td style="white-space: nowrap;">0x3F (63)</td>
+   <td>Question mark ("?") key. {{gecko_minversion_inline("15.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_AT</code></td>
+   <td style="white-space: nowrap;">0x40 (64)</td>
+   <td>Atmark ("@") key. {{gecko_minversion_inline("15.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_A</code></td>
+   <td style="white-space: nowrap;">0x41 (65)</td>
+   <td>"A" key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_B</code></td>
+   <td style="white-space: nowrap;">0x42 (66)</td>
+   <td>"B" key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_C</code></td>
+   <td style="white-space: nowrap;">0x43 (67)</td>
+   <td>"C" key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_D</code></td>
+   <td style="white-space: nowrap;">0x44 (68)</td>
+   <td>"D" key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_E</code></td>
+   <td style="white-space: nowrap;">0x45 (69)</td>
+   <td>"E" key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_F</code></td>
+   <td style="white-space: nowrap;">0x46 (70)</td>
+   <td>"F" key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_G</code></td>
+   <td style="white-space: nowrap;">0x47 (71)</td>
+   <td>"G" key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_H</code></td>
+   <td style="white-space: nowrap;">0x48 (72)</td>
+   <td>"H" key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_I</code></td>
+   <td style="white-space: nowrap;">0x49 (73)</td>
+   <td>"I" key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_J</code></td>
+   <td style="white-space: nowrap;">0x4A (74)</td>
+   <td>"J" key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_K</code></td>
+   <td style="white-space: nowrap;">0x4B (75)</td>
+   <td>"K" key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_L</code></td>
+   <td style="white-space: nowrap;">0x4C (76)</td>
+   <td>"L" key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_M</code></td>
+   <td style="white-space: nowrap;">0x4D (77)</td>
+   <td>"M" key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_N</code></td>
+   <td style="white-space: nowrap;">0x4E (78)</td>
+   <td>"N" key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_O</code></td>
+   <td style="white-space: nowrap;">0x4F (79)</td>
+   <td>"O" key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_P</code></td>
+   <td style="white-space: nowrap;">0x50 (80)</td>
+   <td>"P" key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_Q</code></td>
+   <td style="white-space: nowrap;">0x51 (81)</td>
+   <td>"Q" key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_R</code></td>
+   <td style="white-space: nowrap;">0x52 (82)</td>
+   <td>"R" key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_S</code></td>
+   <td style="white-space: nowrap;">0x53 (83)</td>
+   <td>"S" key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_T</code></td>
+   <td style="white-space: nowrap;">0x54 (84)</td>
+   <td>"T" key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_U</code></td>
+   <td style="white-space: nowrap;">0x55 (85)</td>
+   <td>"U" key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_V</code></td>
+   <td style="white-space: nowrap;">0x56 (86)</td>
+   <td>"V" key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_W</code></td>
+   <td style="white-space: nowrap;">0x57 (87)</td>
+   <td>"W" key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_X</code></td>
+   <td style="white-space: nowrap;">0x58 (88)</td>
+   <td>"X" key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_Y</code></td>
+   <td style="white-space: nowrap;">0x59 (89)</td>
+   <td>"Y" key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_Z</code></td>
+   <td style="white-space: nowrap;">0x5A (90)</td>
+   <td>"Z" key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_WIN</code></td>
+   <td style="white-space: nowrap;">0x5B (91)</td>
+   <td>Windows logo key on Windows. Or Super or Hyper key on Linux. {{gecko_minversion_inline("15.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_CONTEXT_MENU</code></td>
+   <td style="white-space: nowrap;">0x5D (93)</td>
+   <td>Opening context menu key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_SLEEP</code></td>
+   <td style="white-space: nowrap;">0x5F (95)</td>
+   <td>Linux support for this keycode was added in Gecko 4.0.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_NUMPAD0</code></td>
+   <td style="white-space: nowrap;">0x60 (96)</td>
+   <td>"0" on the numeric keypad.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_NUMPAD1</code></td>
+   <td style="white-space: nowrap;">0x61 (97)</td>
+   <td>"1" on the numeric keypad.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_NUMPAD2</code></td>
+   <td style="white-space: nowrap;">0x62 (98)</td>
+   <td>"2" on the numeric keypad.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_NUMPAD3</code></td>
+   <td style="white-space: nowrap;">0x63 (99)</td>
+   <td>"3" on the numeric keypad.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_NUMPAD4</code></td>
+   <td style="white-space: nowrap;">0x64 (100)</td>
+   <td>"4" on the numeric keypad.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_NUMPAD5</code></td>
+   <td style="white-space: nowrap;">0x65 (101)</td>
+   <td>"5" on the numeric keypad.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_NUMPAD6</code></td>
+   <td style="white-space: nowrap;">0x66 (102)</td>
+   <td>"6" on the numeric keypad.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_NUMPAD7</code></td>
+   <td style="white-space: nowrap;">0x67 (103)</td>
+   <td>"7" on the numeric keypad.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_NUMPAD8</code></td>
+   <td style="white-space: nowrap;">0x68 (104)</td>
+   <td>"8" on the numeric keypad.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_NUMPAD9</code></td>
+   <td style="white-space: nowrap;">0x69 (105)</td>
+   <td>"9" on the numeric keypad.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_MULTIPLY</code></td>
+   <td style="white-space: nowrap;">0x6A (106)</td>
+   <td>"*" on the numeric keypad.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_ADD</code></td>
+   <td style="white-space: nowrap;">0x6B (107)</td>
+   <td>"+" on the numeric keypad.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_SEPARATOR</code></td>
+   <td style="white-space: nowrap;">0x6C (108)</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_SUBTRACT</code></td>
+   <td style="white-space: nowrap;">0x6D (109)</td>
+   <td>"-" on the numeric keypad.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_DECIMAL</code></td>
+   <td style="white-space: nowrap;">0x6E (110)</td>
+   <td>Decimal point on the numeric keypad.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_DIVIDE</code></td>
+   <td style="white-space: nowrap;">0x6F (111)</td>
+   <td>"/" on the numeric keypad.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_F1</code></td>
+   <td style="white-space: nowrap;">0x70 (112)</td>
+   <td>F1 key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_F2</code></td>
+   <td style="white-space: nowrap;">0x71 (113)</td>
+   <td>F2 key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_F3</code></td>
+   <td style="white-space: nowrap;">0x72 (114)</td>
+   <td>F3 key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_F4</code></td>
+   <td style="white-space: nowrap;">0x73 (115)</td>
+   <td>F4 key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_F5</code></td>
+   <td style="white-space: nowrap;">0x74 (116)</td>
+   <td>F5 key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_F6</code></td>
+   <td style="white-space: nowrap;">0x75 (117)</td>
+   <td>F6 key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_F7</code></td>
+   <td style="white-space: nowrap;">0x76 (118)</td>
+   <td>F7 key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_F8</code></td>
+   <td style="white-space: nowrap;">0x77 (119)</td>
+   <td>F8 key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_F9</code></td>
+   <td style="white-space: nowrap;">0x78 (120)</td>
+   <td>F9 key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_F10</code></td>
+   <td style="white-space: nowrap;">0x79 (121)</td>
+   <td>F10 key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_F11</code></td>
+   <td style="white-space: nowrap;">0x7A (122)</td>
+   <td>F11 key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_F12</code></td>
+   <td style="white-space: nowrap;">0x7B (123)</td>
+   <td>F12 key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_F13</code></td>
+   <td style="white-space: nowrap;">0x7C (124)</td>
+   <td>F13 key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_F14</code></td>
+   <td style="white-space: nowrap;">0x7D (125)</td>
+   <td>F14 key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_F15</code></td>
+   <td style="white-space: nowrap;">0x7E (126)</td>
+   <td>F15 key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_F16</code></td>
+   <td style="white-space: nowrap;">0x7F (127)</td>
+   <td>F16 key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_F17</code></td>
+   <td style="white-space: nowrap;">0x80 (128)</td>
+   <td>F17 key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_F18</code></td>
+   <td style="white-space: nowrap;">0x81 (129)</td>
+   <td>F18 key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_F19</code></td>
+   <td style="white-space: nowrap;">0x82 (130)</td>
+   <td>F19 key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_F20</code></td>
+   <td style="white-space: nowrap;">0x83 (131)</td>
+   <td>F20 key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_F21</code></td>
+   <td style="white-space: nowrap;">0x84 (132)</td>
+   <td>F21 key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_F22</code></td>
+   <td style="white-space: nowrap;">0x85 (133)</td>
+   <td>F22 key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_F23</code></td>
+   <td style="white-space: nowrap;">0x86 (134)</td>
+   <td>F23 key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_F24</code></td>
+   <td style="white-space: nowrap;">0x87 (135)</td>
+   <td>F24 key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_NUM_LOCK</code></td>
+   <td style="white-space: nowrap;">0x90 (144)</td>
+   <td>Num Lock key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_SCROLL_LOCK</code></td>
+   <td style="white-space: nowrap;">0x91 (145)</td>
+   <td>Scroll Lock key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_WIN_OEM_FJ_JISHO</code></td>
+   <td style="white-space: nowrap;">0x92 (146)</td>
+   <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for "Dictionary" key on Fujitsu OASYS. {{gecko_minversion_inline("21.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_WIN_OEM_FJ_MASSHOU</code></td>
+   <td style="white-space: nowrap;">0x93 (147)</td>
+   <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for "Unregister word" key on Fujitsu OASYS. {{gecko_minversion_inline("21.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_WIN_OEM_FJ_TOUROKU</code></td>
+   <td style="white-space: nowrap;">0x94 (148)</td>
+   <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for "Register word" key on Fujitsu OASYS. {{gecko_minversion_inline("21.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_WIN_OEM_FJ_LOYA</code></td>
+   <td style="white-space: nowrap;">0x95 (149)</td>
+   <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for "Left OYAYUBI" key on Fujitsu OASYS. {{gecko_minversion_inline("21.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_WIN_OEM_FJ_ROYA</code></td>
+   <td style="white-space: nowrap;">0x96 (150)</td>
+   <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for "Right OYAYUBI" key on Fujitsu OASYS. {{gecko_minversion_inline("21.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_CIRCUMFLEX</code></td>
+   <td style="white-space: nowrap;">0xA0 (160)</td>
+   <td>Circumflex ("^") key. {{gecko_minversion_inline("15.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_EXCLAMATION</code></td>
+   <td style="white-space: nowrap;">0xA1 (161)</td>
+   <td>Exclamation ("!") key. {{gecko_minversion_inline("15.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_DOUBLE_QUOTE</code></td>
+   <td style="white-space: nowrap;">0xA3 (162)</td>
+   <td>Double quote (""") key. {{gecko_minversion_inline("15.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_HASH</code></td>
+   <td style="white-space: nowrap;">0xA3 (163)</td>
+   <td>Hash ("#") key. {{gecko_minversion_inline("15.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_DOLLAR</code></td>
+   <td style="white-space: nowrap;">0xA4 (164)</td>
+   <td>Dollar sign ("$") key. {{gecko_minversion_inline("15.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_PERCENT</code></td>
+   <td style="white-space: nowrap;">0xA5 (165)</td>
+   <td>Percent ("%") key. {{gecko_minversion_inline("15.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_AMPERSAND</code></td>
+   <td style="white-space: nowrap;">0xA6 (166)</td>
+   <td>Ampersand ("&amp;") key. {{gecko_minversion_inline("15.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_UNDERSCORE</code></td>
+   <td style="white-space: nowrap;">0xA7 (167)</td>
+   <td>Underscore ("_") key. {{gecko_minversion_inline("15.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_OPEN_PAREN</code></td>
+   <td style="white-space: nowrap;">0xA8 (168)</td>
+   <td>Open parenthesis ("(") key. {{gecko_minversion_inline("15.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_CLOSE_PAREN</code></td>
+   <td style="white-space: nowrap;">0xA9 (169)</td>
+   <td>Close parenthesis (")") key. {{gecko_minversion_inline("15.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_ASTERISK</code></td>
+   <td style="white-space: nowrap;">0xAA (170)</td>
+   <td>Asterisk ("*") key. {{gecko_minversion_inline("15.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_PLUS</code></td>
+   <td style="white-space: nowrap;">0xAB (171)</td>
+   <td>Plus ("+") key. {{gecko_minversion_inline("15.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_PIPE</code></td>
+   <td style="white-space: nowrap;">0xAC (172)</td>
+   <td>Pipe ("|") key. {{gecko_minversion_inline("15.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_HYPHEN_MINUS</code></td>
+   <td style="white-space: nowrap;">0xAD (173)</td>
+   <td>Hyphen-US/docs/Minus ("-") key. {{gecko_minversion_inline("15.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_OPEN_CURLY_BRACKET</code></td>
+   <td style="white-space: nowrap;">0xAE (174)</td>
+   <td>Open curly bracket ("{") key. {{gecko_minversion_inline("15.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_CLOSE_CURLY_BRACKET</code></td>
+   <td style="white-space: nowrap;">0xAF (175)</td>
+   <td>Close curly bracket ("}") key. {{gecko_minversion_inline("15.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_TILDE</code></td>
+   <td style="white-space: nowrap;">0xB0 (176)</td>
+   <td>Tilde ("~") key. {{gecko_minversion_inline("15.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_VOLUME_MUTE</code></td>
+   <td style="white-space: nowrap;">0xB5 (181)</td>
+   <td>Audio mute key. {{gecko_minversion_inline("21.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_VOLUME_DOWN</code></td>
+   <td style="white-space: nowrap;">0xB6 (182)</td>
+   <td>Audio volume down key {{gecko_minversion_inline("21.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_VOLUME_UP</code></td>
+   <td style="white-space: nowrap;">0xB7 (183)</td>
+   <td>Audio volume up key {{gecko_minversion_inline("21.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_COMMA</code></td>
+   <td style="white-space: nowrap;">0xBC (188)</td>
+   <td>Comma (",") key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_PERIOD</code></td>
+   <td style="white-space: nowrap;">0xBE (190)</td>
+   <td>Period (".") key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_SLASH</code></td>
+   <td style="white-space: nowrap;">0xBF (191)</td>
+   <td>Slash ("/") key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_BACK_QUOTE</code></td>
+   <td style="white-space: nowrap;">0xC0 (192)</td>
+   <td>Back tick ("`") key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_OPEN_BRACKET</code></td>
+   <td style="white-space: nowrap;">0xDB (219)</td>
+   <td>Open square bracket ("[") key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_BACK_SLASH</code></td>
+   <td style="white-space: nowrap;">0xDC (220)</td>
+   <td>Back slash ("\") key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_CLOSE_BRACKET</code></td>
+   <td style="white-space: nowrap;">0xDD (221)</td>
+   <td>Close square bracket ("]") key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_QUOTE</code></td>
+   <td style="white-space: nowrap;">0xDE (222)</td>
+   <td>Quote (''') key.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_META</code></td>
+   <td style="white-space: nowrap;">0xE0 (224)</td>
+   <td>Meta key on Linux, Command key on Mac.</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_ALTGR</code></td>
+   <td style="white-space: nowrap;">0xE1 (225)</td>
+   <td>AltGr key (Level 3 Shift key or Level 5 Shift key) on Linux. {{gecko_minversion_inline("15.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_WIN_ICO_HELP</code></td>
+   <td style="white-space: nowrap;">0xE3 (227)</td>
+   <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This is (was?) used for Olivetti ICO keyboard.{{gecko_minversion_inline("21.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_WIN_ICO_00</code></td>
+   <td style="white-space: nowrap;">0xE4 (228)</td>
+   <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This is (was?) used for Olivetti ICO keyboard.{{gecko_minversion_inline("21.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_WIN_ICO_CLEAR</code></td>
+   <td style="white-space: nowrap;">0xE6 (230)</td>
+   <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This is (was?) used for Olivetti ICO keyboard.{{gecko_minversion_inline("21.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_WIN_OEM_RESET</code></td>
+   <td style="white-space: nowrap;">0xE9 (233)</td>
+   <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_WIN_OEM_JUMP</code></td>
+   <td style="white-space: nowrap;">0xEA (234)</td>
+   <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_WIN_OEM_PA1</code></td>
+   <td style="white-space: nowrap;">0xEB (235)</td>
+   <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_WIN_OEM_PA2</code></td>
+   <td style="white-space: nowrap;">0xEC (236)</td>
+   <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_WIN_OEM_PA3</code></td>
+   <td style="white-space: nowrap;">0xED (237)</td>
+   <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_WIN_OEM_WSCTRL</code></td>
+   <td style="white-space: nowrap;">0xEE (238)</td>
+   <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_WIN_OEM_CUSEL</code></td>
+   <td style="white-space: nowrap;">0xEF (239)</td>
+   <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_WIN_OEM_ATTN</code></td>
+   <td style="white-space: nowrap;">0xF0 (240)</td>
+   <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_WIN_OEM_FINISH</code></td>
+   <td style="white-space: nowrap;">0xF1 (241)</td>
+   <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_WIN_OEM_COPY</code></td>
+   <td style="white-space: nowrap;">0xF2 (242)</td>
+   <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_WIN_OEM_AUTO</code></td>
+   <td style="white-space: nowrap;">0xF3 (243)</td>
+   <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_WIN_OEM_ENLW</code></td>
+   <td style="white-space: nowrap;">0xF4 (244)</td>
+   <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_WIN_OEM_BACKTAB</code></td>
+   <td style="white-space: nowrap;">0xF5 (245)</td>
+   <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_ATTN</code></td>
+   <td style="white-space: nowrap;">0xF6 (246)</td>
+   <td>Attn (Attention) key of IBM midrange computers, e.g., AS/400. {{gecko_minversion_inline("21.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_CRSEL</code></td>
+   <td style="white-space: nowrap;">0xF7 (247)</td>
+   <td>CrSel (Cursor Selection) key of IBM 3270 keyboard layout. {{gecko_minversion_inline("21.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_EXSEL</code></td>
+   <td style="white-space: nowrap;">0xF8 (248)</td>
+   <td>ExSel (Extend Selection) key of IBM 3270 keyboard layout. {{gecko_minversion_inline("21.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_EREOF</code></td>
+   <td style="white-space: nowrap;">0xF9 (249)</td>
+   <td>Erase EOF key of IBM 3270 keyboard layout. {{gecko_minversion_inline("21.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_PLAY</code></td>
+   <td style="white-space: nowrap;">0xFA (250)</td>
+   <td>Play key of IBM 3270 keyboard layout. {{gecko_minversion_inline("21.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_ZOOM</code></td>
+   <td style="white-space: nowrap;">0xFB (251)</td>
+   <td>Zoom key. {{gecko_minversion_inline("21.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_PA1</code></td>
+   <td style="white-space: nowrap;">0xFD (253)</td>
+   <td>PA1 key of IBM 3270 keyboard layout. {{gecko_minversion_inline("21.0")}}</td>
+  </tr>
+  <tr>
+   <td><code>DOM_VK_WIN_OEM_CLEAR</code></td>
+   <td style="white-space: nowrap;">0xFE (254)</td>
+   <td>Clear key, but we're not sure the meaning difference from <code>DOM_VK_CLEAR</code>. {{gecko_minversion_inline("21.0")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="OEM_specific_keys_on_Windows">OEM specific keys on Windows</h3>
+
+<p>On Windows, some values of virtual keycode are defined (reserved) for OEM specific key. They are available for special keys on non-standard keyboard. In other words, some values are used for different meaning by two or more vendors (or hardware).</p>
+
+<p>Starting Gecko 21 (and older than 15), OEM specific key values are available on the keyCode attribute only on Windows. So they are not useful for usual web applications. They are useful only for intranet applications or in similar situations.</p>
+
+<p>See "<a href="http://msdn.microsoft.com/en-us/library/aa452679.aspx" title="http://msdn.microsoft.com/en-us/library/aa452679.aspx">Manufacturer-specific Virtual-Key Codes (Windows CE 5.0)</a>" in MSDN for the detail.</p>
+
+<div id="cke_pastebin" style="position: absolute; top: 1308.5px; width: 1px; height: 1px; overflow: hidden; left: -1000px;"> </div>
diff --git a/files/de/web/api/l10n.language.direction/index.html b/files/de/web/api/l10n.language.direction/index.html
new file mode 100644
index 0000000000..c469794d54
--- /dev/null
+++ b/files/de/web/api/l10n.language.direction/index.html
@@ -0,0 +1,63 @@
+---
+title: L10n.language.direction
+slug: Web/API/L10n.language.direction
+translation_of: Archive/B2G_OS/API/L10n/language/direction
+---
+<div class="syntaxbox">{{ non-standard_header() }}</div>
+
+<div class="syntaxbox"> </div>
+
+<div class="summary">
+<p><span class="seoSummary">The <code>language.direction</code> property returns the direction (<code>ltr</code> or <code>rtl</code>) of the currently active language.</span></p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var languageCode = navigator.mozL10n.language.direction;</pre>
+
+<h2 id="Value">Value</h2>
+
+<p>Returns the direction of the currently active language (<code>ltr</code> or <code>rtl</code>).</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">navigator.mozL10n.ready(function() {
+  console.log('The current language's direction is ' + navigator.mozL10n.language.direction);
+});
+</pre>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<p>Not part of any specification.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("L10n")}}</li>
+ <li>{{domxref("L10n.language.code")}}</li>
+</ul>
+
+<section id="Quick_Links">
+<ol>
+ <li data-default-state="open"><strong><a href="#">Guides</a></strong>
+
+  <ol>
+   <li><a href="/en-US/Apps/Build/Localization">Localization</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><strong><a href="#">Properties</a></strong>
+  <ol>
+   <li>{{ domxref("L10n.language.code") }}</li>
+   <li>{{ domxref("L10n.language.direction") }}</li>
+   <li>{{ domxref("L10n.readyState") }}</li>
+  </ol>
+ </li>
+ <li data-default-state="open"><strong><a href="#">Methods</a></strong>
+  <ol>
+   <li>{{ domxref("L10n.get") }}</li>
+   <li>{{ domxref("L10n.ready") }}</li>
+   <li>{{ domxref("L10n.once") }}</li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/de/web/api/linkstyle/index.html b/files/de/web/api/linkstyle/index.html
new file mode 100644
index 0000000000..1cc73d12ac
--- /dev/null
+++ b/files/de/web/api/linkstyle/index.html
@@ -0,0 +1,56 @@
+---
+title: LinkStyle
+slug: Web/API/LinkStyle
+tags:
+  - API
+  - CSSOM
+  - Referenz
+  - Schnittstelle
+translation_of: Web/API/LinkStyle
+---
+<p>{{APIRef("CSSOM")}}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code><strong>LinkStyle</strong></code> Schnittstelle erlaubt es, das zu einem Knoten <em>zugehöriges CSS Stylesheet</em> anzusprechen.</p>
+
+<p><code>LinkStyle</code> ist eine abstrakte Schnittstelle und es kann kein Objekt dieses Typs erstellt werden; Sie wird von {{domxref("HTMLLinkElement")}} und {{domxref("HTMLStyleElement")}} Objekten implementiert.</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<p><em>Es gibt keine vererbte Eigenschaft.</em></p>
+
+<dl>
+ <dt>{{domxref("LinkStyle.sheet")}} {{readonlyInline}}</dt>
+ <dd>Gibt das {{domxref("StyleSheet")}} Objekt zurück, das zu dem angegebenen Element gehört, oder <code>null</code>, falls keines existiert.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<p><em>Diese Schnittstelle implementiert keine Methoden.</em></p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSSOM', '#the-linkstyle-interface', 'LinkStyle') }}</td>
+   <td>{{ Spec2('CSSOM') }}</td>
+   <td>Keine Änderung bezüglich {{ SpecName('DOM2 Style') }}.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('DOM2 Style', 'stylesheets.html#StyleSheets-LinkStyle', 'LinkStyle') }}</td>
+   <td>{{ Spec2('DOM2 Style') }}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p> </p>
diff --git a/files/de/web/api/messageevent/index.html b/files/de/web/api/messageevent/index.html
new file mode 100644
index 0000000000..5f3bc4c4c8
--- /dev/null
+++ b/files/de/web/api/messageevent/index.html
@@ -0,0 +1,205 @@
+---
+title: MessageEvent
+slug: Web/API/MessageEvent
+tags:
+  - API
+  - Channels
+  - Interface
+  - Nachrichten
+  - Referenz
+  - WebSockets
+  - Window
+  - Workers
+  - messaging
+translation_of: Web/API/MessageEvent
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>Das <code><strong>MessageEvent</strong></code> Interface representiert eine Nachricht die von einem Zielobjekt empfangen wurde.</p>
+
+<p>Es wird verwendet in in:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Server-sent_events">Server-sent events</a> (siehe {{domxref("EventSource.onmessage")}}).</li>
+ <li><a href="/en-US/docs/Web/API/WebSockets_API">Web sockets</a> (siehe <code>onmessage</code> Eigentschaft des <a href="/en-US/docs/Web/API/WebSocket">WebSocket</a> Interface).</li>
+ <li>Cross-document messaging (siehe {{domxref("Window.postMessage()")}} und {{domxref("Window.onmessage")}}).</li>
+ <li><a href="/en-US/docs/Web/API/Channel_Messaging_API">Channel messaging</a> (siehe {{domxref("MessagePort.postMessage()")}} und {{domxref("MessagePort.onmessage")}}).</li>
+ <li>Cross-worker/document messaging (wie in den oberen beiden Einträgen, aber auch in {{domxref("Worker.postMessage()")}}, {{domxref("Worker.onmessage")}}, {{domxref("ServiceWorkerGlobalScope.onmessage")}}, usw.)</li>
+ <li><a href="/en-US/docs/Web/API/Broadcast_Channel_API">Broadcast channels</a> (siehe {{domxref("Broadcastchannel.postMessage()")}}) und {{domxref("BroadcastChannel.onmessage")}}).</li>
+ <li>WebRTC data channels (siehe {{domxref("RTCDataChannel.onmessage")}}).</li>
+</ul>
+
+<p>Welche Aktion durch dieses Event ausgeführt wird, entscheidet die Funktion die als entsprechender Eventhandler für das {{event("message")}} Event definiert wurde. Beispielsweise durch das setzen eines <code>onmessage</code> handlers. </p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("MessageEvent.MessageEvent", "MessageEvent()")}}</dt>
+ <dd>Creates a new <code>MessageEvent</code>.</dd>
+</dl>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<p><em>Dieses Interface erbt auch Eigenschaften seines parents, {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("MessageEvent.data")}} {{readonlyInline}}</dt>
+ <dd>Die Daten die vom message emitter gesendet wurden.</dd>
+ <dt>{{domxref("MessageEvent.origin")}} {{readonlyInline}}</dt>
+ <dd>Ein {{domxref("USVString")}} der den Ursprung (Origin) des message emitters repräsentiert.</dd>
+ <dt>{{domxref("MessageEvent.lastEventId")}} {{readonlyInline}}</dt>
+ <dd>Ein {{domxref("DOMString")}} der die einzigartige ID des Events repräsentiert.</dd>
+ <dt>{{domxref("MessageEvent.source")}} {{readonlyInline}}</dt>
+ <dd>Eine <code>MessageEventSource</code> (welch ein {{domxref("WindowProxy")}}, {{domxref("MessagePort")}}, or {{domxref("ServiceWorker")}} Objekt sein kann) welche den message emitter repräsentiert.</dd>
+ <dt>{{domxref("MessageEvent.ports")}} {{readonlyInline}}</dt>
+ <dd>Ein Array bestehend aus {{domxref("MessagePort")}} Objekten, welche die Ports repräsentieren, welche mit dem channel verbunden sind durch die die Nachricht gesendet wurde (Bespielsweise in channel messaging oder wenn eine Nachricht zu einem shared worker gesendet wird).</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<p><em>Dieses Interface erbt auch Methoden von seinem parent, {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("MessageEvent.initMessageEvent()")}} {{deprecated_inline}}</dt>
+ <dd>Initialisiert ein Message Objekt. <strong>Bitte nicht mehr benutzen</strong> — <strong>benutzen Sie bitte den {{domxref("MessageEvent.MessageEvent", "MessageEvent()")}} constructor stattdessen.</strong></dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>In unserem <a class="external external-icon" href="https://github.com/mdn/simple-shared-worker"> Grundlegenden Shared Worker Beispiel</a> (<a class="external external-icon" href="http://mdn.github.io/simple-shared-worker/">Shared Worker ausführen</a>), haben wir zwei HTML Seiten, von denen jede eine einfache Berechnung ausführt. Die unterschiedlichen Skripte benutzen die gleiche Worker Datei um die Berechnungen auszuführen — sie können beide darauf zugreifen, selbst wenn sich ihre Seiten in verschiedenen Fenstern befinden.</p>
+
+<p>Der folgende Ausschnitt zeigt wie man ein <code>SharedWorker</code> Objekt mit dem {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}} constructor erzeugen kann. Beide Skripte enthalten dies:</p>
+
+<pre class="brush: js">var myWorker = new SharedWorker('worker.js');
+</pre>
+
+<p>Beide Skripte greifen durch ein {{domxref("MessagePort")}} Objekt auf den Worker zu, welcher mit der {{domxref("SharedWorker.port")}} Eigenschaft erstellt wurde. Wenn das onmessage event mittels addEventListener hinzugefügt wird, wird der port automatisch mittels seiner <code>start()</code> Methode gestartet:</p>
+
+<pre class="brush: js">myWorker.port.start();</pre>
+
+<p>Wenn der Port gestartet wurde, senden beide Skripte Nachrichten zu dem Worker und verarbeiten die Nachrichten welche vom Worker empfangen werden mittels  <code>port.postMessage()</code> und <code>port.onmessage</code>:</p>
+
+<pre class="brush: js">first.onchange = function() {
+  myWorker.port.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+
+second.onchange = function() {
+  myWorker.port.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+
+myWorker.port.onmessage = function(e) {
+  result1.textContent = e.data;
+  console.log('Message received from worker');
+}</pre>
+
+<p>In dem Worker benutzen wir den {{domxref("SharedWorkerGlobalScope.onconnect")}} Handler um uns mit dem oben erwähnten Port zu verbinden. Die mit dem Worker verbundenen Ports sind durch die <code>ports</code> Eigenschaft des {{event("connect")}} Events erreichbar — dann benutzen wir die {{domxref("MessagePort")}} <code>start()</code> Methode um den Port zu starten, und den <code>onmessage</code> Handler um die Nachrichten die von den Hauptthreads gesendet wurden zu verarbeiten.</p>
+
+<pre class="brush: js">onconnect = function(e) {
+  var port = e.ports[0];
+
+  port.addEventListener('message', function(e) {
+    var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
+    port.postMessage(workerResult);
+  });
+
+  port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
+}</pre>
+
+<h2 id="Specifikationen">Specifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#messageevent", "MessageEvent")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>9</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatSafari('10.0+')}}</td>
+  </tr>
+  <tr>
+   <td><code>origin</code> als {{domxref("USVString")}} und <code>source</code> als <code>MessageEventSource</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("55.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>3.0+</td>
+  </tr>
+  <tr>
+   <td><code>origin</code> als {{domxref("USVString")}} und <code>source</code> als <code>MessageEventSource</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("55.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{domxref("ExtendableMessageEvent")}} — ist diesem Interface sehr ähnlich, wird aber in Interfaces genutzt die Authoren mehr Flexibilität geben möchten.</li>
+</ul>
diff --git a/files/de/web/api/mouseevent/index.html b/files/de/web/api/mouseevent/index.html
new file mode 100644
index 0000000000..55d458c6a2
--- /dev/null
+++ b/files/de/web/api/mouseevent/index.html
@@ -0,0 +1,323 @@
+---
+title: MouseEvent
+slug: Web/API/MouseEvent
+tags:
+  - API
+  - DOM
+  - DOM Events
+  - Interface
+  - Reference
+translation_of: Web/API/MouseEvent
+---
+<p id="Summary">{{APIRef("DOM Events")}}</p>
+
+<p>Die <strong><code>MouseEvent</code></strong> Schnittstelle stellt Events bereit, die während der Benutzerinteraktion mit einem Zeigegerät (zum Beispiel eine Maus) auftreten. Häufige Events, die diese Schnittstelle nutzen sind {{event("click")}}, {{event("dblclick")}}, {{event("mouseup")}}, {{event("mousedown")}}.</p>
+
+<p><code>MouseEvent</code> wird vererbt von {{domxref("UIEvent")}}, welches wiederum vererbt wird von {{domxref("Event")}}. Obwohl die {{domxref("MouseEvent.initMouseEvent()")}} Methode wegen der Rückwärtskompatibilität bleibt, sollte das Erstellen eines <code>MouseEvent</code> Objekts durch den {{domxref("MouseEvent.MouseEvent", "MouseEvent()")}} Konstruktor erfolgen.</p>
+
+<p>Mehrere spezifischere Events basieren auf MouseEvent, davon {{domxref("WheelEvent")}} und {{domxref("DragEvent")}}.</p>
+
+<h2 id="Konstruktor">Konstruktor</h2>
+
+<dl>
+ <dt>{{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}</dt>
+ <dd>Erstellt ein<code>MouseEvent</code> Objekt.</dd>
+</dl>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<p><em>Diese Schnittstelle erbt Eigenschaften der Elternobjekte {{domxref("UIEvent")}} und {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("MouseEvent.altKey")}} {{readonlyinline}}</dt>
+ <dd>Gibt <code>true</code> zurück wenn die <kbd>alt</kbd> Taste gedrückt war, während das MouseEvent ausgelöst wurde.</dd>
+ <dt>{{domxref("MouseEvent.button")}} {{readonlyinline}}</dt>
+ <dd>Die Nummer des Buttons der gedrückt wurde (wenn anwendbar), während das MouseEvent ausgelöst wurde.</dd>
+ <dt>{{domxref("MouseEvent.buttons")}} {{readonlyinline}} {{gecko_minversion_inline("15.0")}}</dt>
+ <dd>
+ <p>Die Buttons, die losgelassen wurden (sofern vorhanden) während das MouseEvent ausgelöst wurde.</p>
+ </dd>
+ <dt>{{domxref("MouseEvent.clientX")}} {{readonlyinline}}</dt>
+ <dd>Die x-Koordinate des Mauszeigers in lokalen (DOM Inhalt) Koordinaten.</dd>
+ <dt>{{domxref("MouseEvent.clientY")}} {{readonlyinline}}</dt>
+ <dd>Die y-Koordinate des Mauszeigers in lokalen (DOM Inhalt) Koordinaten.</dd>
+ <dt>{{domxref("MouseEvent.ctrlKey")}} {{readonlyinline}}</dt>
+ <dd>Gibt <code>true</code> zurück, wenn die <kbd>control</kbd> Taste gedrückt war, während das MouseEvent ausgelöst wurde.</dd>
+ <dt>{{domxref("MouseEvent.metaKey")}} {{readonlyinline}}</dt>
+ <dd>Gibt <code>true</code> zurück, wenn die <kbd>meta</kbd> Taste gedrückt war, während das MouseEvent ausgelöst wurde.</dd>
+ <dt>{{domxref("MouseEvent.movementX")}} {{readonlyinline}}</dt>
+ <dd>Die x-Koordinate des Mauszeigers relativ zur Position des letzten {{event("mousemove")}} Events.</dd>
+ <dt>{{domxref("MouseEvent.movementY")}} {{readonlyinline}}</dt>
+ <dd>Die y-Koordinate des Mauszeigers relativ zur Position des letzten {{event("mousemove")}} Events.</dd>
+ <dt>{{domxref("MouseEvent.offsetX")}} {{readonlyinline}}{{experimental_inline}}</dt>
+ <dd>Die x-Koordinate des Mauszeigers relativ zur Position zur padding-Kante des Zielknotens.</dd>
+ <dt>{{domxref("MouseEvent.offsetY")}} {{readonlyinline}}{{experimental_inline}}</dt>
+ <dd>Die y-Koordinate des Mauszeigers relativ zur Position zur padding-Kante des Zielknotens.</dd>
+ <dt>{{domxref("MouseEvent.pageX")}} {{readonlyinline}}{{experimental_inline}}</dt>
+ <dd>Die x-Koordinate des Mauszeigers relativ zum gesamten Dokument.</dd>
+ <dt>{{domxref("MouseEvent.pageY")}} {{readonlyinline}}{{experimental_inline}}</dt>
+ <dd>Die y-Koordinate des Mauszeigers relativ zum gesamten Dokument.</dd>
+ <dt>{{domxref("MouseEvent.region")}} {{readonlyinline}}</dt>
+ <dd>Gibt die id des Trefferbereichs wieder, die von dem Event betroffen ist. Wenn kein Trefferbereich betroffen ist, wird <code>null</code> zurückgegeben.</dd>
+ <dt>{{domxref("MouseEvent.relatedTarget")}} {{readonlyinline}}</dt>
+ <dd>
+ <p>Das sekundäre Zielobjekt des Events, sofern verfügbar.</p>
+ </dd>
+ <dt>{{domxref("MouseEvent.screenX")}} {{readonlyinline}}</dt>
+ <dd>Die x-Koordinate des Mauszeigers in globalen (Bildschirm) Koordinaten.</dd>
+ <dt>{{domxref("MouseEvent.screenY")}} {{readonlyinline}}</dt>
+ <dd>Die y-Koordinate des Mauszeigers in globalen (Bildschirm) Koordinaten.</dd>
+ <dt>{{domxref("MouseEvent.shiftKey")}} {{readonlyinline}}</dt>
+ <dd>Gibt <code>true</code> zurück, wenn die <kbd>shift</kbd> Taste gedrückt war, während das MouseEvent ausgelöst wurde.</dd>
+ <dt>{{domxref("MouseEvent.which")}} {{non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>Der Button, der gedrückt war, als das MouseEvent ausgelöst wurde.</dd>
+ <dt>{{domxref("MouseEvent.mozPressure")}} {{non-standard_inline()}} {{readonlyinline}}</dt>
+ <dd>Die Stärke des Drucks, die auf ein Touch- oder Tabletgerät ausgeübt wurde, während das Event ausgelöst wurde. Der Wert bewegt sich zwischen <code>0.0</code> (Minimalste Druckstärke) und <code>1.0</code> (Maximalster Druckstärke)</dd>
+ <dt>{{domxref("MouseEvent.mozInputSource")}} {{non-standard_inline()}} {{readonlyinline}}</dt>
+ <dd>
+ <p>Der Typ des Geräts das den Event generiert hat (eine der <code>MOZ_SOURCE_*</code> Konstanten die weiter unten gelistet werden). Es ermöglicht zum Beispiel die Bestimmung ob ein MouseEvent tatsächlich von einer Maus oder von einem Touchgerät ausgelöst wurde (welches den Grad der Genauigkeit beeinflusst, mit dem man die Koordinaten des Events betrachten kann).</p>
+ </dd>
+ <dt>{{domxref("MouseEvent.webkitForce")}} {{non-standard_inline()}} {{readonlyinline}}</dt>
+ <dd>Die Stärke des Drucks, die beim Klick angewendet wurde.</dd>
+ <dt>{{domxref("MouseEvent.x")}} {{experimental_inline}}{{readonlyinline}}</dt>
+ <dd>Alias auf {{domxref("MouseEvent.clientX")}}.</dd>
+ <dt>{{domxref("MouseEvent.y")}} {{experimental_inline}}{{readonlyinline}}</dt>
+ <dd>Alias auf {{domxref("MouseEvent.clientY")}}</dd>
+</dl>
+
+<h2 id="Konstanten">Konstanten</h2>
+
+<dl>
+ <dt>{{domxref("MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}</dt>
+ <dd>Minimum der Kraft, die für einen normalen Klick notwendig ist.</dd>
+ <dt>{{domxref("MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}</dt>
+ <dd>Minimum der Kraft, die für einen Force-Click notwendig ist.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<p><em>Das Interface erbt auch die Methoden seiner Eltern, {{domxref("UIEvent")}} und {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("MouseEvent.getModifierState()")}}</dt>
+ <dd>Gibt den aktuellen Zustand der angegebenen Modifizierungstaste zurück. Für Detailinformationen siehe {{domxref("KeyboardEvent.getModifierState()")}}.</dd>
+ <dt>{{domxref("MouseEvent.initMouseEvent()")}} {{deprecated_inline}}</dt>
+ <dd>Initialisiert den Wert eines erzeugten <code>MouseEvent</code>. Wenn der Event bereits ausgesendet wurde, wird durch diese Methode nichts passieren.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Dieses Beispiel demonstriert das Simulieren eines Klicks (die programmatische Erzeugung eines Klickereignisses) auf eine Checkbox mittels DOM Methoden. </p>
+
+<pre class="brush: js">function simulateClick() {
+  var evt = new <a href="/en-US/docs/Web/API/MouseEvent">MouseEvent</a>("click", {
+    bubbles: true,
+    cancelable: true,
+    view: window
+  });
+  var cb = document.getElementById("checkbox"); //element to click on
+  var canceled = !cb.<a href="/en-US/docs/Web/API/EventTarget.dispatchEvent" rel="internal" title="en/DOM/element.dispatchEvent">dispatchEvent</a>(evt);
+  if(canceled) {
+    // A handler called preventDefault
+    alert("canceled");
+  } else {
+    // None of the handlers called preventDefault
+    alert("not canceled");
+  }
+}
+document.getElementById("button").addEventListener('click', simulateClick);</pre>
+
+<pre class="brush: html">&lt;p&gt;&lt;label&gt;&lt;input type="checkbox" id="checkbox"&gt; Checked&lt;/label&gt;
+&lt;p&gt;&lt;button id="button"&gt;Click me&lt;/button&gt;</pre>
+
+<p>Auf den Button klicken, um zu sehen wie das Beispiel funktioniert:</p>
+
+<p>{{ EmbedLiveSample('Example', '', '', '') }}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View','#extensions-to-the-mouseevent-interface', 'MouseEvent')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Redefines <code>MouseEvent</code> from long to double. This means that a <code>PointerEvent</code> whose <code>pointerType</code> is mouse will be a double.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "#dom-mouseevent-region", "MouseEvent.region")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>From {{SpecName('DOM3 Events')}}, added the <code>region</code> property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Lock','#extensions-to-the-mouseevent-interface','MouseEvent')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>From {{SpecName('DOM3 Events')}}, added <code>movementX</code> and <code>movementY</code> properties.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#extensions-to-the-mouseevent-interface', 'MouseEvent')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>From {{SpecName('DOM3 Events')}}, added <code>offsetX</code> and <code>offsetY</code>, <code>pageX</code> and <code>pageY</code>, <code>x,</code> and <code>y</code> properties. Redefined screen, page, client and coordinate (x and y) properties as <code>double</code> from <code>long</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#events-mouseevents','MouseEvent')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>From {{SpecName('DOM2 Events')}}, added the <code>MouseEvent()</code> constructor, the <code>getModifierState()</code> method and the <code>buttons</code> property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.movementX","movementX")}}<br>
+    {{domxref("MouseEvent.movementY","movementY")}}</td>
+   <td>{{CompatChrome(37)}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}} {{property_prefix("moz")}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>{{ domxref("MouseEvent.buttons", "buttons") }}</td>
+   <td>{{CompatChrome(43)}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{ domxref("MouseEvent.which", "which") }}</td>
+   <td>{{CompatChrome(1)}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>1.0</td>
+   <td>9.0</td>
+   <td>5.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.getModifierState()", "getModifierState()")}}</td>
+   <td>{{CompatChrome(47)}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatGeckoDesktop(15)}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.mozPressure", "mozPressure")}} and {{domxref("MouseEvent.mozInputSource", "mozInputSource")}} {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatGeckoDesktop(2)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}</td>
+   <td>{{CompatChrome(45)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatGeckoDesktop(11)}}</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.region")}}</td>
+   <td>{{CompatChrome(51)}}<sup>[1]</sup></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatGeckoDesktop(32)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.offsetX")}}, and {{domxref("MouseEvent.offsetY")}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>9</td>
+   <td>{{CompatGeckoDesktop(40)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.screenX")}}, {{domxref("MouseEvent.screenY")}}, {{domxref("MouseEvent.clientX")}}, and {{domxref("MouseEvent.Y")}} are double instead of long.</td>
+   <td>{{CompatChrome(56)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Setzt das Aktivieren von <code>ExperimentalCanvasFeatures</code> voraus.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Das direkte Elternobjekt, {{domxref("UIEvent")}}.</li>
+</ul>
diff --git a/files/de/web/api/mozmobileconnection/index.html b/files/de/web/api/mozmobileconnection/index.html
new file mode 100644
index 0000000000..f4d2882aab
--- /dev/null
+++ b/files/de/web/api/mozmobileconnection/index.html
@@ -0,0 +1,134 @@
+---
+title: MozMobileConnection
+slug: Web/API/MozMobileConnection
+translation_of: Archive/B2G_OS/API/MozMobileConnection
+---
+<p>{{APIRef("Firefox OS")}} {{ non-standard_header() }}</p>
+
+<p>{{ B2GOnlyHeader2('certified') }}</p>
+
+<div class="summary">
+<p><span class="seoSummary">This API is used to get information about the current mobile voice and data connection states of the device. It is accessible through {{domxref("window.navigator.mozMobileConnections","navigator.mozMobileConnections")}}, which returns an array of <code>MozMobileConnection</code> objects.</span></p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: The syntax used to be <code>window.navigator.mozMobileConnection</code>, returning a single <a href="https://developer.mozilla.org/en-US/docs/Web/API/MozMobileConnection" title="This API is used to get information about the current mobile voice and data connection states of the device. It is accessible through navigator.mozMobileConnection."><code>MozMobileConnection</code></a> object, but this was updated in Firefox 1.3 due to the introduction of Multi-SIM support (Dual-SIM-Dual-Standby or DSDS).</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Interface overview</h2>
+
+<pre class="eval">callback EventHandler = any (Event event);
+
+interface MozMobileConnection : EventTarget
+{
+  const long ICC_SERVICE_CLASS_VOICE = (1 &lt;&lt; 0);
+  const long ICC_SERVICE_CLASS_DATA = (1 &lt;&lt; 1);
+  const long ICC_SERVICE_CLASS_FAX = (1 &lt;&lt; 2);
+  const long ICC_SERVICE_CLASS_SMS = (1 &lt;&lt; 3);
+  const long ICC_SERVICE_CLASS_DATA_SYNC = (1 &lt;&lt; 4);
+  const long ICC_SERVICE_CLASS_DATA_ASYNC = (1 &lt;&lt; 5);
+  const long ICC_SERVICE_CLASS_PACKET = (1 &lt;&lt; 6);
+  const long ICC_SERVICE_CLASS_PAD = (1 &lt;&lt; 7);
+  const long ICC_SERVICE_CLASS_MAX = (1 &lt;&lt; 7);
+
+  readonly attribute MozMobileConnectionInfo voice;
+  readonly attribute MozMobileConnectionInfo data;
+  readonly attribute DOMString networkSelectionMode;
+  readonly attribute DOMString iccId;
+
+  DOMRequest getNetworks();
+  DOMRequest selectNetwork(MozMobileNetworkInfo network);
+  DOMRequest selectNetworkAutomatically();
+  DOMRequest sendMMI(DOMString mmi);
+  DOMRequest cancelMMI();
+  DOMRequest setCallForwardingOption(MozMobileCFInfo CFInfo);
+  DOMRequest getCallForwardingOption(unsigned short reason);
+
+  attribute EventHandler onvoicechange;
+  attribute EventHandler ondatachange;
+  attribute EventHandler onussdreceived;
+  attribute EventHandler ondataerror;
+  attribute EventHandler oncfstatechange;
+};
+</pre>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt> </dt>
+ <dt>{{domxref("MozMobileConnection.voice")}} {{readonlyinline}}</dt>
+ <dd>A {{domxref("MozMobileConnectionInfo")}} object that gives access to information about the voice connection.</dd>
+ <dt>{{domxref("MozMobileConnection.data")}} {{readonlyinline}}</dt>
+ <dd>A {{domxref("MozMobileConnectionInfo")}} object that gives access to information about the data connection.</dd>
+ <dt>{{domxref("MozMobileConnection.iccId")}} {{readonlyinline}}</dt>
+ <dd>A string that indicates the Integrated Circuit Card Identifier of the SIM this mobile connection corresponds to.</dd>
+ <dt>{{domxref("MozMobileConnection.networkSelectionMode")}} {{readonlyinline}}</dt>
+ <dd>A string that indicates the selection mode of the voice and data networks.</dd>
+ <dt>{{domxref("MozMobileConnection.oncfstatechange")}}</dt>
+ <dd>A handler for the {{event("cfstatechange")}} event. This event is fired when the call forwarding state changes.</dd>
+ <dt>{{domxref("MozMobileConnection.ondatachange")}}</dt>
+ <dd>A handler for the {{event("datachange")}} event. This event is fired whenever the {{domxref("MozMobileConnection.data","data")}} connection object changes values.</dd>
+ <dt>{{domxref("MozMobileConnection.ondataerror")}}</dt>
+ <dd>A handler for the {{event("dataerror")}} event. This event is fired whenever the {{domxref("MozMobileConnection.data","data")}} connection object receive an error from the <abbr title="Radio Interface Layer">RIL</abbr>.</dd>
+ <dt>{{domxref("MozMobileConnection.onussdreceived")}}</dt>
+ <dd>A handler for the {{event("ussdreceived")}} event. This event is fired whenever a new <abbr title="Unstructured Supplementary Service Data">USSD</abbr> message is received.</dd>
+ <dt>{{domxref("MozMobileConnection.onvoicechange")}}</dt>
+ <dd>A handler for the {{event("voicechange")}} event. This event is fired whenever the {{domxref("MozMobileConnection.voice","voice")}} connection object changes.</dd>
+</dl>
+
+<h3 id="Constants">Constants</h3>
+
+<ul>
+ <li><code>ICC_SERVICE_CLASS_VOICE</code></li>
+ <li><code>ICC_SERVICE_CLASS_DATA</code></li>
+ <li><code>ICC_SERVICE_CLASS_FAX</code></li>
+ <li><code>ICC_SERVICE_CLASS_SMS</code></li>
+ <li><code>ICC_SERVICE_CLASS_DATA_SYNC</code></li>
+ <li><code>ICC_SERVICE_CLASS_DATA_ASYNC</code></li>
+ <li><code>ICC_SERVICE_CLASS_PACKET</code></li>
+ <li><code>ICC_SERVICE_CLASS_PAD</code></li>
+ <li><code>ICC_SERVICE_CLASS_MAX</code></li>
+</ul>
+
+<h2 id="Methods">Methods</h2>
+
+<div class="note">
+<p><strong>Note:</strong> All original methods from the <code>MozMobileConnection</code> interface are fully asynchronous. They all return a {{domxref("DOMRequest")}} which has a <code>onsuccess</code> and <code>onerror</code> event handler to handle the success or failur of the method call.</p>
+</div>
+
+<dl>
+ <dt>{{domxref("MozMobileConnection.cancelMMI()")}}</dt>
+ <dd>Cancel the current <abbr title="Man Machine Interface">MMI</abbr> request if one exists.</dd>
+ <dt>{{domxref("MozMobileConnection.getCallForwardingOption()")}}</dt>
+ <dd>Queries current call forward options.</dd>
+ <dt>{{domxref("MozMobileConnection.getNetworks()")}}</dt>
+ <dd>Search for available networks.</dd>
+ <dt>{{domxref("MozMobileConnection.selectNetwork()")}}</dt>
+ <dd>Manually selects a network, overriding the radio's current selection.</dd>
+ <dt>{{domxref("MozMobileConnection.selectNetworkAutomatically()")}}</dt>
+ <dd>Tell the radio to automatically select a network.</dd>
+ <dt>{{domxref("MozMobileConnection.sendMMI()")}}</dt>
+ <dd>Send a <abbr title="Man Machine Interface">MMI</abbr> message.</dd>
+ <dt>{{domxref("MozMobileConnection.setCallForwardingOption()")}}</dt>
+ <dd>Configures call forward options.</dd>
+</dl>
+
+<p>The <code>MozMobileConnection</code> interface also inherit from the {{domxref("EventTarget")}} interface</p>
+
+<p>{{page("/en-US/docs/DOM/EventTarget","Methods")}}</p>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<p>Not part of any specification</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("window.navigator.mozMobileConnection","navigator.mozMobileConnection")}}</li>
+ <li>{{domxref("MozMobileConnectionInfo")}}</li>
+ <li>{{domxref("MozIccManager")}}</li>
+ <li>{{domxref("MozMobileNetworkInfo")}}</li>
+ <li>{{domxref("MozMobileCFInfo")}}</li>
+ <li>{{domxref("MozMobileCellInfo")}}</li>
+ <li>{{domxref("EventTarget")}}</li>
+</ul>
diff --git a/files/de/web/api/mozmobileconnection/selectnetworkautomatically/index.html b/files/de/web/api/mozmobileconnection/selectnetworkautomatically/index.html
new file mode 100644
index 0000000000..242901b1c2
--- /dev/null
+++ b/files/de/web/api/mozmobileconnection/selectnetworkautomatically/index.html
@@ -0,0 +1,57 @@
+---
+title: MozMobileConnection.selectNetworkAutomatically
+slug: Web/API/MozMobileConnection/selectNetworkAutomatically
+translation_of: Archive/B2G_OS/API/MozMobileConnection/selectNetworkAutomatically
+---
+<p>{{APIRef("Firefox OS")}} {{ non-standard_header() }}</p>
+
+<p>{{ B2GOnlyHeader2('certified') }}</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>The <code>selectNetworkAutomatically</code> method is used to tell the radio to automatically select a network.</p>
+
+<div class="note">
+<p><strong>Note:</strong> If the network is actually changed by this request, the <code>voicechange</code> and <code>datachange</code> events are fired.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre>var request = navigator.mozMobileConnection.selectNetworks();</pre>
+
+<h3 id="Return">Return</h3>
+
+<p>A {{domxref("DOMRequest")}} object to handle the success or failure of the method call.</p>
+
+<p>If the request fails, the request's <code>error</code> is one of:</p>
+
+<ul>
+ <li><code>RadioNotAvailable</code></li>
+ <li><code>RequestNotSupported</code></li>
+ <li><code>IllegalSIMorME</code></li>
+ <li><code>GenericFailure</code></li>
+</ul>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">var switchNetwork = navigator.mozMobileConnection.selectNetworkAutomatically();
+
+switchNetwork.onsuccess = function () {
+  console.log('Successful switch');
+}
+
+switchNetwork.onerror = function () {
+  console.log('Unable to switch: ' + this.error.name);
+}
+</pre>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<p>Not part of any specification.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("MozMobileConnection")}}</li>
+ <li>{{domxref("DOMRequest")}}</li>
+</ul>
diff --git a/files/de/web/api/mutationobserver/index.html b/files/de/web/api/mutationobserver/index.html
new file mode 100644
index 0000000000..c1367cea73
--- /dev/null
+++ b/files/de/web/api/mutationobserver/index.html
@@ -0,0 +1,287 @@
+---
+title: MutationObserver
+slug: Web/API/MutationObserver
+tags:
+  - Beobachter-Muster
+  - DOM-Knoten
+  - Fortgeschrittene
+  - Observer Pattern
+  - Programmierung
+  - Wertänderungen verfolgen
+  - Änderungen überwachen
+translation_of: Web/API/MutationObserver
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Der <code>MutationObserver</code> ermöglicht es, auf Änderungen im <a href="/en-US/docs/DOM">DOM</a>-Element zu reagieren. Er löst die <a href="/en-US/docs/DOM/Mutation_events">Mutation Events</a> aus der DOM3 Events Spezifikation ab.</p>
+
+<h2 id="Constructor" name="Constructor">Konstruktor</h2>
+
+<h3 id="MutationObserver" name="MutationObserver()"><code>MutationObserver()</code></h3>
+
+<p>Konstruktor zum Instanziieren neuer DOM-MutationObservers.</p>
+
+<pre class="eval">MutationObserver(
+  function callback
+);
+</pre>
+
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Die Funktion wird bei jeder Veränderung am DOM-Element ausgelöst. Der Observer (Beobachter) ruft die Callbackfunktion mit zwei Argumenten auf. Das erste ist ein Array aus <a href="#MutationRecord"><code>MutationRecord</code></a>-Objekten. Das zweite ist diese Instanz des <code>MutationObserver</code>.</dd>
+</dl>
+
+<h2 id="Instance_methods" name="Instance_methods">Methoden</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="#observe()">observe</a>( {{domxref("Node")}} target, <a href="#MutationObserverInit">MutationObserverInit</a> options );</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#disconnect()">disconnect</a>();</code></td>
+  </tr>
+  <tr>
+   <td><code>Array <a href="#takeRecords()">takeRecords</a>();</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="observe" name="observe()"><code>observe()</code></h3>
+
+<p>Registriert die Instanz von <code>MutationObserver</code> , um Meldungen über Veränderungen DOM-Elements der angegebenen Node zu erhalten.</p>
+
+<pre class="eval">void observe(
+  {{domxref("Node")}} target,
+  <a href="#MutationObserverInit"><code>MutationObserverInit</code></a> options
+);
+</pre>
+
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>Die {{domxref("Node")}} , zu dem Veränderungen im DOM beobachtet werden sollen.</dd>
+ <dt><code>options</code></dt>
+ <dd>Ein <a href="#MutationObserverInit"><code>MutationObserverInit</code></a>-Objekt, das angibt, welche DOM-Veränderungen gemeldet werden sollen.</dd>
+</dl>
+
+<div class="note">Anmerkung: Einen Observer zu einem Element hinzufügen funktioniert genau wie addEventListener - man kann es auch von mehreren Observern gleichzeitig beobachten lassen. Das heißt, wenn man ein Element doppelt beobachtet, feuert es nicht zweimal und man muss auch nicht zweimal disconnect() aufrufen. Mit anderen Worten: wenn man ein Element beobachtet, macht es keinerlei Unterschied, wenn man es durch dasselbe Objekt nochmal beobachten lässt. Wenn es von einem anderen Objekt beobachtet wird, dann wird natürlich zusätzlich ein weiterer Observer angehängt.</div>
+
+<h3 id="disconnect" name="disconnect()"><code>disconnect()</code></h3>
+
+<p>Sorgt dafür, dass die <code>MutationObserver</code>-Instanz die Überwachung der DOM-Benachrichtigungen beendet. Bis die <a href="#observe()"><code>observe()</code></a> -Methode erneut benutzt wird, wird die Callback-Methode des Observers nicht aufgerufen.</p>
+
+<pre class="eval">void disconnect();
+</pre>
+
+<h3 id="takeRecords" name="takeRecords()"><code>takeRecords()</code></h3>
+
+<p>Leert die Nachrichten-Kette ("record queue") der <code>MutationObserver</code> Instanz gibt den vorher dort vorhandenen Inhalt zurück.</p>
+
+<pre class="eval">Array takeRecords();
+</pre>
+
+<h6 id="Return_value" name="Return_value">Return value</h6>
+
+<p>Gibt ein Array mit <a href="#MutationRecord"><code>MutationRecord</code>s</a> zurück.</p>
+
+<h2 id="MutationObserverInit" name="MutationObserverInit"><code>MutationObserverInit</code></h2>
+
+<p><code>MutationObserverInit</code> ist ein Objekt, das die folgenden Eigenschaften enthalten (und damit festlegen) kann:</p>
+
+<div class="note">Anmerkung: Als Mindestanforderung muss <code>childList</code>, <code>attributes</code>, oder <code>characterData</code> auf <code>true</code> gesetzt werden. Anderenfalls wird ein Fehler "Ungültiger String angegeben" ("An invalid or illegal string was specified") ausgelöst.</div>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Property</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>childList</code></td>
+   <td>Wenn Kindelemente (child nodes) der Ziel-Node (inklusive Textnodes) beobachtet werden sollen, muss <code>childList </code>auf <code style="font-style: normal;">true</code> gesetzt werden.</td>
+  </tr>
+  <tr>
+   <td><code>attributes</code></td>
+   <td>Muss auf <code>true</code> gesetzt werden, wenn Veränderungen an Attributen der Ziel-Node (target node) beobachtet bzw. berichtet werden sollen.</td>
+  </tr>
+  <tr>
+   <td><code>characterData</code></td>
+   <td>
+    <p>Muss <code>true</code> sein, wenn Veränderungen an den Daten der Ziel-Node beobachtet werden sollen.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>subtree</code></td>
+   <td>Auf <code>true</code> setzen, wenn nicht nur Änderungen an der Ziel-Node (target node) beobachtet werden sollen, sondern auch Veränderungen von dessen Kindelementen (child nodes).</td>
+  </tr>
+  <tr>
+   <td><code>attributeOldValue</code></td>
+   <td>Muss auf <code>true</code> gesetzt werden, wenn <code>attributes</code> ebenfalls <code>true</code> ist und der Wert des target-node-Attributs <em>vor</em> der Veränderung ebenfalls gemeldet werden soll.</td>
+  </tr>
+  <tr>
+   <td><code>characterDataOldValue</code></td>
+   <td>
+    <p>Muss auf <code>true</code> gesetzt werden, wenn <code>characterData</code> ebenfalls <code>true</code> ist und der Wert von data <em>vor</em> der Veränderung ebenfalls gemeldet werden soll.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>attributeFilter</code></td>
+   <td>Mit dieser Eigenschaft kann ein Array mit lokalen Attributnamen angegeben werden (ohne Namespace), wenn nicht alle Attribute beobachtet werden sollen.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="MutationRecord" name="MutationRecord"><code>MutationRecord</code></h2>
+
+<p>Als erstes Argument wird an die Callback-Funktion des Observers ein Array aus <code>MutationRecord</code>-Objekten übergeben. Ein <code>MutationRecord</code>-Objekt beinhaltet die folgenden Eigenschaften:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Property</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>type</code></td>
+   <td><code>String</code></td>
+   <td>Gibt <code>attributes</code> zurück, wenn die Veränderung eine Änderung an Attributen der Node gewesen ist, <code>characterData</code> wenn Veränderungen an der <code>CharacterData</code>-Node vorgenommen wurden, und <code>childList</code> wenn es sich um eine Veränderung an den untergeordneten Knoten im Baum handelt.</td>
+  </tr>
+  <tr>
+   <td><code>target</code></td>
+   <td><code>{{domxref("Node")}}</code></td>
+   <td>Gibt die von der Veränderung betroffene Node zurück, abhängig von <code>type</code>. Bei <code>attributes</code> das Element, von dem Attribute geändert wurden. Bei <code>characterData</code> wird die <code>CharacterData</code>-Node zurückgegeben. Bei <code>childList</code> die Node, deren untergeordnete Kindelemente verändert wurden.</td>
+  </tr>
+  <tr>
+   <td><code>addedNodes</code></td>
+   <td><code>{{domxref("NodeList")}}</code></td>
+   <td>Gibt die hinzugefügten Nodes zurück. Wenn keine hinzugefügt wurden, wird eine leere <span style="font-family: 'Courier New','Andale Mono',monospace;">NodeList</span> zurückgegeben.</td>
+  </tr>
+  <tr>
+   <td><code>removedNodes</code></td>
+   <td><code>{{domxref("NodeList")}}</code></td>
+   <td>Gibt die entfernten Nodes zurück. Wenn keine entfernt wurden, wird eine leere <span style="font-family: 'Courier New','Andale Mono',monospace;">NodeList</span> zurückgegeben.</td>
+  </tr>
+  <tr>
+   <td><code>previousSibling</code></td>
+   <td><code>{{domxref("Node")}}</code></td>
+   <td>Gibt den vorhergehenden Sibling der hinzugefügten oder entfernten Node(s) zurück, sonst <code>null</code>.</td>
+  </tr>
+  <tr>
+   <td><code>nextSibling</code></td>
+   <td><code>{{domxref("Node")}}</code></td>
+   <td>Gibt den folgenden Sibling der hinzugefügten oder entfernten Node(s) zurück, sonst <code>null</code>.</td>
+  </tr>
+  <tr>
+   <td><code>attributeName</code></td>
+   <td><code>String</code></td>
+   <td>Gibt den lokalen Namen des geänderten Attributs zurück, sonst <code>null</code>.</td>
+  </tr>
+  <tr>
+   <td><code>attributeNamespace</code></td>
+   <td><code>String</code></td>
+   <td>Gibt den lokalen Namespace des geänderten Attributs zurück, sonst <code>null</code>.</td>
+  </tr>
+  <tr>
+   <td><code>oldValue</code></td>
+   <td><code>String</code></td>
+   <td>Rückgabewert hängt vom <code>type </code>ab. Bei <code>attributes</code> wird der Wert des Attributs vor der Änderung zurückgegeben. Bei <code>characterData</code>, der Wert von Data vor der Änderung. Bei <code>childList</code> wird <code>null</code> zurückgegeben.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Example_usage" name="Example_usage">Nutzungsbeispiel</h2>
+
+<p>Das folgende Beispiel wurde aus <a class="external" href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">diesem Blog-Post</a> übernommen.</p>
+
+<pre class="brush: js">// zu überwachende Zielnode (target) auswählen
+var target = document.querySelector('#some-id');
+
+// eine Instanz des Observers erzeugen
+var observer = new MutationObserver(function(mutations) {
+  mutations.forEach(function(mutation) {
+    console.log(mutation.type);
+  });
+});
+
+// Konfiguration des Observers: alles melden - Änderungen an Daten, Kindelementen und Attributen
+var config = { attributes: true, childList: true, characterData: true };
+
+// eigentliche Observierung starten und Zielnode und Konfiguration übergeben
+observer.observe(target, config);
+
+// später: Observation wieder einstellen
+observer.disconnect();
+</pre>
+
+<h2 id="Additional_reading" name="Additional_reading">Weiterführende Informationen (engl.)</h2>
+
+<ul>
+ <li><a class="external" href="http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers" rel="freelink">A brief overview</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">A more in-depth discussion</a></li>
+ <li><a class="external" href="http://www.youtube.com/watch?v=eRZ4pO0gVWw" rel="freelink">A screencast by Chromium developer Rafael Weinstein</a></li>
+ <li><a class="external" href="http://code.google.com/p/mutation-summary/" rel="freelink">The mutation summary library</a></li>
+ <li><a href="http://dom.spec.whatwg.org/#mutation-observers">The DOM standard</a> which defines the <code>MutationObserver</code> interface</li>
+</ul>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>18 {{ property_prefix("WebKit") }}<br>
+    26</td>
+   <td>{{ CompatGeckoDesktop(14) }}</td>
+   <td>11</td>
+   <td>15</td>
+   <td>6.0 {{ property_prefix("WebKit") }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>18 {{ property_prefix("WebKit") }}<br>
+    26</td>
+   <td>{{ CompatGeckoMobile(14) }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>15</td>
+   <td>
+    <p>6 {{ property_prefix("WebKit")}}</p>
+
+    <p>7</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/de/web/api/navigator/index.html b/files/de/web/api/navigator/index.html
new file mode 100644
index 0000000000..b6efb42b05
--- /dev/null
+++ b/files/de/web/api/navigator/index.html
@@ -0,0 +1,122 @@
+---
+title: Navigator
+slug: Web/API/Navigator
+tags:
+  - API
+  - HTML DOM
+translation_of: Web/API/Navigator
+---
+<p>{{ apiref() }}</p>
+
+<p>The <code><strong>Navigator</strong></code> interface represents the state and the identity of the user agent. It allows scripts to query it and to register themselves to carry on some activities.</p>
+
+<p>A <code>Navigator</code> object can be retrieved using the read-only {{domxref("Window.navigator")}} property.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Doesn't inherit any property, but implements those defined in {{domxref("NavigatorID")}}, {{domxref("NavigatorLanguage")}}, {{domxref("NavigatorOnLine")}}, {{domxref("NavigatorGeolocation")}}, {{domxref("NavigatorPlugins")}}, {{domxref("NavigatorUserMedia")}}, and {{domxref("NetworkInformation")}}.</em></p>
+
+<h3 id="Standard">Standard</h3>
+
+<dl>
+ <dt>{{domxref("NavigatorID.appCodeName")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns the internal "code" name of the current browser. Do not rely on this property to return the correct value.</dd>
+ <dt>{{domxref("NavigatorID.appName")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} with the official name of the browser. Do not rely on this property to return the correct value.</dd>
+ <dt>{{domxref("NavigatorID.appVersion")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns the version of the browser as a {{domxref("DOMString")}}. Do not rely on this property to return the correct value.</dd>
+ <dt>{{domxref("Navigator.battery")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("BatteryManager")}} object you can use to get information about the battery charging status.</dd>
+ <dt>{{domxref("NetworkInformation.connection")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Provides a {{domxref("Connection")}} with information about the network connection of a device.</dd>
+ <dt>{{domxref("NavigatorGeolocation.geolocation")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Geolocation")}} object allowing accessing the location of the device.</dd>
+ <dt>{{domxref("NavigatorPlugins.javaEnabled")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("Boolean")}} flag indicating whether the host browser is Java-enabled or not.</dd>
+ <dt>{{domxref("NavigatorLanguage.language")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} representing the preferred language of the user, usually the language of the browser UI. The <code>null</code> value is returned when this is unknown.</dd>
+ <dt>{{domxref("NavigatorLanguage.languages")}} {{readonlyInline}}</dt>
+ <dd>Returns an array of {{domxref("DOMString")}} representing the languages known to the user, by order of preference.</dd>
+ <dt>{{domxref("NavigatorPlugins.mimeTypes")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns an {{domxref("MimeTypeArray")}} listing the MIME types supported by the browser.</dd>
+ <dt>{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Boolean")}} indicating whether the browser is working online.</dd>
+ <dt>{{domxref("Navigator.oscpu")}}</dt>
+ <dd>Returns a string that represents the current operating system.</dd>
+ <dt>{{domxref("NavigatorID.platform")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a string representing the platform of the browser. Do not rely on this function to return a significant value.</dd>
+ <dt>{{domxref("NavigatorPlugins.plugins")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("PluginArray")}} listing the plugins installed in the browser.</dd>
+ <dt>{{domxref("NavigatorID.product")}} {{readonlyInline}} {{experimental_inline}}</dt>
+ <dd>Always returns <code>'Gecko'</code>, on any browser. This property is kept only for compatibility purpose.</dd>
+ <dt>{{domxref("NavigatorID.userAgent")}} {{readonlyInline}}</dt>
+ <dd>Returns the user agent string for the current browser.</dd>
+ <dt>{{domxref("Navigator.serviceWorker")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("ServiceWorkerContainer")}} object, which provides access to registration, removal, upgrade, and communication with the {{domxref("ServiceWorker")}} objects for the <a href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window">associated document</a>.</dd>
+</dl>
+
+<h3 id="Methods" name="Methods">Non-standard</h3>
+
+<dl>
+ <dt>{{domxref("window.navigator.buildID", "navigator.buildID")}} {{non-standard_inline}}</dt>
+ <dd>Returns the build identifier of the browser (e.g., "2006090803").</dd>
+ <dt>{{domxref("Navigator.cookieEnabled")}} {{non-standard_inline}}</dt>
+ <dd>Returns a boolean indicating whether cookies are enabled in the browser or not.</dd>
+ <dt>{{domxref("navigator.doNotTrack")}} {{non-standard_inline}}</dt>
+ <dd>Reports the value of the user's do-not-track preference. When this value is "yes", your web site or application should not track the user.</dd>
+ <dt>{{domxref("navigator.id")}} {{non-standard_inline}}</dt>
+ <dd>Returns the {{domxref("window.navigator.id", "id")}} object which you can use to add support for <a href="/en-US/docs/BrowserID" title="BrowserID">BrowserID</a> to your web site.</dd>
+ <dt>{{domxref("window.navigator.mozApps", "navigator.mozApps")}} {{non-standard_inline}}</dt>
+ <dd>Returns an {{domxref("window.navigator.mozApps", "Apps")}} object you can use to install, manage, and control <a href="/Open_Web_Apps" title="Open Web apps">Open Web apps</a>.</dd>
+ <dt>{{domxref("Navigator.mozAudioChannelManager", "navigator.mozAudioChannelManager")}} {{non-standard_inline}}</dt>
+ <dd>The <code>navigator.mozAudioChannelManager</code> object provides access to the {{domxref("mozAudioChannelManager")}} interface, which is used to manage your Firefox OS device's audio channels, including setting what channel's volume to affect when the volume buttons are pressed inside a particular app.</dd>
+ <dt>{{domxref("window.navigator.mozNotification","navigator.mozNotification")}} {{deprecated_inline("22")}} {{non-standard_inline}}<br>
+ {{domxref("window.navigator.webkitNotification","navigator.webkitNotification")}}</dt>
+ <dd>Returns a {{domxref("navigator.mozNotification", "notification")}} object you can use to deliver notifications to the user from your web application.</dd>
+ <dt>{{domxref("navigator.mozSocial")}} {{non-standard_inline}}</dt>
+ <dd>The Object, returned by the <code>navigator.mozSocial</code> property, is available within the social media provider's panel to provide functionality it may need.</dd>
+ <dt>{{domxref("window.navigator.productSub", "navigator.productSub")}} {{non-standard_inline}}</dt>
+ <dd>Returns the build number of the current browser (e.g., "20060909").</dd>
+ <dt>{{domxref("window.navigator.securitypolicy", "navigator.securitypolicy")}} {{non-standard_inline}}</dt>
+ <dd>Returns an empty string. In Netscape 4.7x, returns "US &amp; CA domestic policy" or "Export policy".</dd>
+ <dt>{{domxref("window.navigator.standalone", "navigator.standalone")}} {{non-standard_inline}}</dt>
+ <dd>Returns a boolean indicating whether the browser is running in standalone mode. Available on Apple's iOS Safari only.</dd>
+ <dt>{{domxref("window.navigator.vendor", "navigator.vendor")}} {{non-standard_inline}}</dt>
+ <dd>Returns the vendor name of the current browser (e.g., "Netscape6").</dd>
+ <dt>{{domxref("window.navigator.vendorSub", "navigator.vendorSub")}} {{non-standard_inline}}</dt>
+ <dd>Returns the vendor version number (e.g. "6.1").</dd>
+ <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="Mouse Lock API"><code>navigator.webkitPointer</code></a> {{non-standard_inline}}</dt>
+ <dd>Returns a PointerLock object for the <a href="/en-US/docs/API/Pointer_Lock_API" title="Mouse Lock API">Mouse Lock API</a>.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Methods</h2>
+
+<p><em>Doesn't inherit any method, but implements those defined in {{domxref("NavigatorID")}}, {{domxref("NavigatorContentUtils")}}, <em>{{domxref("NavigatorUserMedia")}}, </em>and {{domxref("NavigatorStorageUtils")}}.</em></p>
+
+<h3 id="Standard_2">Standard</h3>
+
+<dl>
+ <dt>{{domxref("NavigatorUserMedia.getUserMedia()")}}</dt>
+ <dd>After having prompted the user for permission, returns the audio or video stream associated to a camera or microphone on the local computer.</dd>
+ <dt>{{domxref("window.navigator.registerContentHandler", "navigator.registerContentHandler")}}</dt>
+ <dd>Allows web sites to register themselves as a possible handler for a given MIME type.</dd>
+ <dt>{{domxref("navigator.registerProtocolHandler", "navigator.registerProtocolHandler")}}</dt>
+ <dd>Allows web sites to register themselves as a possible handler for a given protocol.</dd>
+ <dt>{{domxref("NavigatorID.taintEnabled()")}} {{deprecated_inline("1.7.8")}} {{obsolete_inline("9.0")}} {{experimental_inline}}</dt>
+ <dd>Returns <code>false</code>. JavaScript taint/untaint functions removed in JavaScript 1.2.</dd>
+ <dt>{{domxref("Navigator.vibrate()")}} {{gecko_minversion_inline("11.0")}}</dt>
+ <dd>Causes vibration on devices with support for it. Does nothing if vibration support isn't available.</dd>
+</dl>
+
+<h3 id="Specification" name="Specification">Non standard</h3>
+
+<dl>
+ <dt>{{domxref("window.navigator.mozIsLocallyAvailable", "navigator.mozIsLocallyAvailable")}} {{non-standard_inline}}</dt>
+ <dd>Lets code check to see if the document at a given URI is available without using the network.</dd>
+ <dt>{{domxref("window.navigator.mozPay", "navigator.mozPay")}} {{non-standard_inline}}</dt>
+ <dd>Allows in-app payment.</dd>
+ <dt>{{domxref("window.navigator.preference", "navigator.preference")}} {{obsolete_inline("2.0")}} {{non-standard_inline}}</dt>
+ <dd>Sets a user preference. This method is <a class="external" href="http://www.faqts.com/knowledge_base/view.phtml/aid/1608/fid/125/lang/en">only available to privileged code</a> and is obsolete; you should use the XPCOM <a href="/en-US/docs/Preferences_API" title="Preferences_API">Preferences API</a> instead.</dd>
+ <dt>{{domxref("window.navigator.requestWakeLock", "navigator.requestWakeLock")}} {{non-standard_inline}}</dt>
+ <dd>Request a wake lock for a resource. A wake lock prevents a specific part of a device from being turned off automatically.</dd>
+</dl>
diff --git a/files/de/web/api/navigator/registerprotocolhandler/index.html b/files/de/web/api/navigator/registerprotocolhandler/index.html
new file mode 100644
index 0000000000..2ffd20da9d
--- /dev/null
+++ b/files/de/web/api/navigator/registerprotocolhandler/index.html
@@ -0,0 +1,170 @@
+---
+title: Navigator.registerProtocolHandler()
+slug: Web/API/Navigator/registerProtocolHandler
+translation_of: Web/API/Navigator/registerProtocolHandler
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>In progress. Allows web sites to register themselves as possible handlers for particular protocols.</p>
+
+<p>For security reasons, by default, web sites may only register protocol handlers for themselves — the domain and protocol of the handler must match the current site. However, users may set a preference in Firefox to allow cross website installation, by setting the <code>gecko.handlerService.allowRegisterFromDifferentHost</code> pref to <code>true</code> in about:config.</p>
+
+<p>Extensions can register protocol handlers targeting other sites: see the 'See Also' section for how to use them from XPCOM.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">window.navigator.registerProtocolHandler(<em>protocol</em>, <em>url</em>, <em>title</em>);
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>protocol</code></dt>
+ <dd>The protocol the site wishes to handle, specified as a string. For example, you can register to handle SMS text message links by registering to handle the "sms" scheme.</dd>
+ <dt><code>url</code></dt>
+ <dd>The URL of the handler, as a string. This string should include "%s" as a placeholder which will be replaced with the escaped URL of the document to be handled. This URL might be a true URL, or it could be a phone number, email address, or so forth.
+ <div class="note">The handler's URL must use one of "http" or "https" as its scheme.</div>
+ </dd>
+ <dt><code>title</code></dt>
+ <dd>A user-readable title string for the protocol handler. This will be displayed to the user in interface objects as needed.</dd>
+</dl>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt><code>SecurityError</code></dt>
+ <dd>The user agent blocked registration of the protocol handler. This might happen if an invalid scheme is specified, such as "http", which cannot be registered for obvious security reasons.</dd>
+ <dt><code>SyntaxError</code></dt>
+ <dd>The "%s" string is missing from the specified protocol handler URL.</dd>
+</dl>
+
+<h2 id="Permitted_schemes">Permitted schemes</h2>
+
+<p>For security reasons, <code>registerProtocolHandler()</code> has restrictions on which schemes may be registered. A custom scheme may be registered as long as the scheme's name begins with "web+", is at least five characters long (including the "web+" prefix), and has only lower-case ASCII letters in its name. For example, "web+burger", as shown in the {{anch("Example")}} below.</p>
+
+<p>Otherwise, the scheme must be one of the schemes on the whitelist below:</p>
+
+<div class="threecolumns">
+<ul>
+ <li><code>bitcoin</code></li>
+ <li><code>geo</code></li>
+ <li><code>im</code></li>
+ <li><code>irc</code></li>
+ <li><code>ircs</code></li>
+ <li><code>magnet</code></li>
+ <li><code>mailto</code></li>
+ <li><code>mms</code></li>
+ <li><code>news</code></li>
+ <li><code>nntp</code></li>
+ <li><code>sip</code></li>
+ <li><code>sms</code></li>
+ <li><code>smsto</code></li>
+ <li><code>ssh</code></li>
+ <li><code>tel</code></li>
+ <li><code>urn</code></li>
+ <li><code>webcal</code></li>
+ <li><code>wtai</code></li>
+ <li><code>xmpp</code></li>
+</ul>
+</div>
+
+<h2 id="Example">Example</h2>
+
+<p>If your web application is located at <code>http://www.google.co.uk</code>, you can register a protocol handler for it to handle "web+burger" links like this:</p>
+
+<pre class="brush: js">navigator.registerProtocolHandler("web+burger",
+                                  "https://www.google.co.uk/?uri=%s",
+                                  "Burger handler");
+</pre>
+
+<p>This creates a handler that allows <code>web+burger://</code> links to direct the user to your web application, inserting the burger information specified in the link into the URL. Recall that this script must be run from the same domain (so any page location at <code>google.co.uk</code>) and the second argument passed must be of <code>http</code> or <code>https</code> scheme (in this example it is <code>https</code>) .</p>
+
+<p>The user will be notified that your code has asked to register the protocol handler, so that they can decide whether or not to permit it. See the screenshot below for an example.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9683/protocolregister.png"></p>
+
+<div class="note">
+<p>"<a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIWebContentHandlerRegistrar#Getting_most_recent_window">Register a webmail service as mailto handler</a>" shows how to do this from XPCOM scope.</p>
+</div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-navigator-registerprotocolhandler', 'registerProtocolHandler()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>13<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>11.60</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("3.5")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Protocol whitelist includes <code>mailto</code>, <code>mms</code>, <code>nntp</code>, <code>rtsp</code>, and <code>webcal</code>. Custom protocols must be prefixed with <code>web+</code>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web-based_protocol_handlers">Web-based protocol handlers</a></li>
+ <li><a href="/en-US/docs/Web/API/Navigator/registerContentHandler">Navigator.registerContentHandler()</a></li>
+ <li><a href="http://blog.mozilla.com/webdev/2010/07/26/registerprotocolhandler-enhancing-the-federated-web/">RegisterProtocolHandler Enhancing the Federated Web</a> at Mozilla Webdev</li>
+ <li><a href="https://html.spec.whatwg.org/multipage/system-state.html#custom-handlers">Web Application APIs - Custom scheme and content handlers</a></li>
+ <li><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIWebContentHandlerRegistrar#Getting_most_recent_window">Register a webmail service as mailto handler</a> shows how to do <code>registerProtocolHandler</code> from XPCOM scope.</li>
+ <li><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIWebContentHandlerRegistrar#registerProtocolHandler">XPCOM Interface Reference &gt; nsIWebContentHandlerRegistrar &gt; registerContentHandler</a> - This shows how to use this function XPCOM scope</li>
+</ul>
diff --git a/files/de/web/api/navigator/registerprotocolhandler/webbasierte_protokoll-handler/index.html b/files/de/web/api/navigator/registerprotocolhandler/webbasierte_protokoll-handler/index.html
new file mode 100644
index 0000000000..5f48e63097
--- /dev/null
+++ b/files/de/web/api/navigator/registerprotocolhandler/webbasierte_protokoll-handler/index.html
@@ -0,0 +1,127 @@
+---
+title: Webbasierte Protokoll-Handler
+slug: Web/API/Navigator/registerProtocolHandler/Webbasierte_protokoll-handler
+translation_of: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers
+---
+<div>{{Fx_minversion_header(3)}}</div>
+
+<h2 id="Background" name="Background">Hintergrund</h2>
+
+<p>Man findet im Web häufiger Seiten, die Verweise mit anderen Protokollen als HTTP einsetzen. Ein Beispiel ist das <code>mailto:</code> Protokoll:</p>
+
+<div style="overflow: hidden;">
+<pre class="brush:html">&lt;a href="mailto:webmaster@example.com"&gt;Web Master&lt;/a&gt;</pre>
+</div>
+
+<p>Seitenersteller können <code>mailto:</code> Verweise nutzen, wenn sie einen bequemen Weg anbieten möchten, E-Mails direkt aus ihrer Webseite heraus zu versenden. Wird der Link aktiviert, sollte der Browser das im Betriebssystem eingestelle Standardprogramm für E-Mail starten. Das ist ein Beispiel für einen desktopbasierten Protokoll-Handler.</p>
+
+<p>Webbasierte Protokoll-Handler erlauben webbasierten Anwendungen ebenfall an solchen Prozessen teilzunehmen. Das wird mit der Migration vieler Anwendungen ins Web zunehmend wichtiger. Tatsächlich gibt es bereits viele Webanwendungen, die einen <code>mailto:</code> Verweis verarbeiten könnten.</p>
+
+<h2 id="Registering" name="Registering">Registrierung</h2>
+
+<p>Das Einrichten einer webbasierten Anwendung als Protokoll-Handler ist unkompliziert. Die Webapp nutzt <code><a href="/en-US/docs/Web/API/navigator.registerProtocolHandler" title="DOM/window.navigator.registerProtocolHandler">registerProtocolHandler()</a></code>, um sich selbst beim Browser als potentiellen Handler für ein bestimmtes Protokoll zu registrieren. Ein Beispiel:</p>
+
+<pre class="brush: js">navigator.registerProtocolHandler("burger",
+                                  "http://www.google.co.uk/?uri=%s",
+                                  "Burger handler");</pre>
+
+<p>Die Parameter sind:</p>
+
+<ul>
+ <li>Das Protokoll.</li>
+ <li>Das URL Template, das als Handler genutzt werden soll. Das "%s" wird durch das <code>href</code> Attribut des Verweises ersetzt und ein GET Request mit der resultierenden URL ausgeführt.</li>
+ <li>Der nutzerlesbare Name des Protokoll Handlers.</li>
+</ul>
+
+<p>Führt ein Browser diesen Code aus, wird er über einen Dialog die Erlaubnis des Nutzers einholen, die Webanwendung als Handler für dieses Protokoll zu registrieren. Firefox zeigt eine Nachricht in der Notification Bar:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9683/protocolregister.png" style="display: block; height: 401px; margin: 0px auto; width: 700px;"></p>
+
+<div class="note"><strong>Hinweis: </strong>Das bei der Registrierung angegebene URL Template <strong>muss</strong> mit der die Anfrage stellenden Webseite <strong>übereinstimmen</strong>, oder die Registrierung schlägt fehl. Beispielsweise kann <code class="plain">http://example.com/homepage.html</code> einen Protokoll-Handler für <code class="plain">http://example.com/handle_mailto/%s registrieren, aber nicht für</code> <code class="plain">http://example.<em><strong>org</strong></em>/handle_mailto/%s</code>.</div>
+
+<p>Wird derselbe Handler mehrfach registriert, meldet der Browser das durch ein weiteres Pop-Up, das auf die bereits erfolgte Registrierung hinweist. Daher ist es sinnvoll, die Registrierung mit einem vorangehenden Check abzusichern.</p>
+
+<h3 id="Example" name="Example">Beispiel</h3>
+
+<pre class="brush: js">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+  &lt;title&gt;Web Protocol Handler Sample - Register&lt;/title&gt;
+  &lt;script type="text/javascript"&gt;
+    navigator.registerProtocolHandler("burger",
+                                  "http://www.google.co.uk/?uri=%s",
+                                  "Burger handler");
+  &lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;h1&gt;Web Protocol Handler Sample&lt;/h1&gt;
+  &lt;p&gt;This web page will install a web protocol handler for the &lt;code&gt;fake:&lt;/code&gt; protocol.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Activating" name="Activating">Aktivierung</h2>
+
+<p>Ab jetzt wird der Browser bei jedem Klick auf einen Verweis, der das neu registrierte Protokoll verwendet, die Ausführung auf die registrierte URL umleiten. Firefox wird zuvor standardmäßig die Bestätigung durch den Nutzer einholen.</p>
+
+<h3 id="Example_2" name="Example_2">Beispiel</h3>
+
+<pre class="brush: html">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+  &lt;title&gt;Web Protocol Handler Sample - Test&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;p&gt;Hey have you seen &lt;a href="burger:cheeseburger"&gt;this&lt;/a&gt; before?&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Handling" name="Handling">Handling</h2>
+
+<p>Der nächste Schritt ist das tatsächliche Handling. Der Browser kombiniert die <code>href </code>aus dem aktivierten Link mit dem registrierten URL Template und führt dann damit einen HTTP GET Request aus. Hervorgehend aus den vorangegangenen Beispielen würde der Request auf folgender URL stattfinden:</p>
+
+<pre>http://www.google.co.uk/?uri=burger:cheeseburger
+</pre>
+
+<p>Serverseitiger Code kann dann die query String Parameter extrahieren und die gewünschte Aktion ausführen.</p>
+
+<div class="note"><strong>Hinweis:</strong> Dem serverseitigen Code wird der <strong>gesamte </strong>Inhalt der href übergeben. D.h. der Server muss das Protokoll aus den Daten parsen.</div>
+
+<h3 id="Example_3" name="Example_3">Beispiel</h3>
+
+<pre class="brush: php">&lt;?php
+$value = "";
+if ( isset ( $_GET["value"] ) ) {
+  $value = $_GET["value"];
+}
+?&gt;
+
+&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+    &lt;title&gt;Web Protocol Handler Sample&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;h1&gt;Web Protocol Handler Sample - Handler&lt;/h1&gt;
+  &lt;p&gt;This web page is called when handling a &lt;code&gt;burger:&lt;/code&gt; protocol action. The data sent:&lt;/p&gt;
+  &lt;textarea&gt;
+&lt;?php echo(htmlspecialchars($value, ENT_QUOTES, 'UTF-8')); ?&gt;
+  &lt;/textarea&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="References" name="References">Verweise</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/2011/WD-html5-20110525/timers.html#custom-handlers">http://www.w3.org/TR/2011/WD-html5-20110525/timers.html#custom-handlers</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/window.navigator.registerContentHandler" title="DOM/window.navigator.registerContentHandler">window.navigator.registerContentHandler</a></li>
+ <li><a href="/en-US/docs/XPCOM_Interface_Reference/nsIProtocolHandler" title="nsIProtocolHandler">nsIProtocolHandler</a> (XUL only)</li>
+ <li><a class="external" href="http://blog.mozilla.com/webdev/2010/07/26/registerprotocolhandler-enhancing-the-federated-web/" title="http://blog.mozilla.com/webdev/2010/07/26/registerprotocolhandler-enhancing-the-federated-web/">RegisterProtocolHandler Enhancing the Federated Web</a> at Mozilla Webdev</li>
+</ul>
diff --git a/files/de/web/api/navigator/sendbeacon/index.html b/files/de/web/api/navigator/sendbeacon/index.html
new file mode 100644
index 0000000000..1e8ff5ea2b
--- /dev/null
+++ b/files/de/web/api/navigator/sendbeacon/index.html
@@ -0,0 +1,144 @@
+---
+title: Navigator.sendBeacon()
+slug: Web/API/Navigator/sendBeacon
+translation_of: Web/API/Navigator/sendBeacon
+---
+<div>{{APIRef("HTML DOM")}}{{SeeCompatTable}}</div>
+
+<p>Die <code><strong>navigator.sendBeacon()</strong></code> Methode dient dazu, kleinere Datenmengen asynchron per HTTP vom User Agent zum Server zu senden.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">navigator.sendBeacon(<em>url</em>, <em>data</em>);
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>url</code></dt>
+ <dd>Der <code>url</code> Parameter steht für die ermittelte URL, an die <code>data</code> zu senden ist. </dd>
+</dl>
+
+<dl>
+ <dt><code>data</code></dt>
+ <dd>Der Parameter <code>data</code> enthält zu übermittelnde Daten der Art {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("DOMString")}} oder {{domxref("FormData")}}.</dd>
+</dl>
+
+<h3 id="Rückgabewerte">Rückgabewerte</h3>
+
+<p>Die <strong>sendBeacon()</strong> Methode gibt <code>true</code> zurück, falls der User Agent erfolgreich war, <code>data</code> zum Transfer bereit zu stellen. Andernfalls ist der Rückgabewert <code>false</code>.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Diese Methode erfüllt Bedürfnisse von Analyse- und Diagnostik-Code, der regelmäßig versucht, Daten an den Server zu senden bevor der <em>unload</em> Vorgang einer Seite abgeschlossen ist. Daten schon früher zu senden, könnte eine unvollständige Datensammlung bewirken.<br>
+ Bislang war es für Entwickler schwierig, sicherzustellen, dass Daten während eines <em>unload</em> Vorgangs tatsächlich gesendet wurden.</p>
+
+<p>Üblicherweise ignorieren User Agenten asynchrone XMLHttpRequests in einem <em>unload</em> Anweisungsblock. Dieses Problem wird in Analytik- und Diagnostik-Code oft umgangen, indem in einem <em>unload</em> oder <em>beforeunload</em> Anweisungsblock ein synchroner XMLHttpRequest zum Datenversand genutzt wird.<br>
+ Ein synchroner XMLHttpRequest zwingt den User Agenten den unload Vorgang des Dokuments zu verzögern, sodass jedoch die weitere Navigation langsamer wirkt. Der Eindruck einer schlechten Ladezeit der Folgeseite läst sich dabei nicht verhindern.</p>
+
+<p>Es gibt weitere Techniken, die Datenübermittlung zu ermöglichen. Eine besteht darin, den <em>unload</em> Vorgang zu verzögern, indem man ein <em>image</em> Element erzeugt und dessen <code>src</code> Attribut innerhalb des unload Anweisungsblocks ändert. Da die meisten User Agenten den <em>unload</em> Vorgang verzögern werden bis das Nachladen des Bildes abgeschlossen ist, können so währenddessen noch Daten übermittelt werden.<br>
+ Noch eine andere Technnik verwendet eine einige Sekunden lange wirkungsfreie (<em>noop</em>) Schleife innerhalb des <em>unload</em> Anweisungsblocks, die das <em>unload</em> verzögert und zwischenzeitliche Datenübermittlung zum Server ermöglicht.</p>
+
+<p>Diese alternativen Techniken stellen allerdings nicht nur schlechte Programmiermuster dar. Einige sind schlicht unzuverlässig und erzeugen den Eindruck schlechter Seitenladezeiten.</p>
+
+<p>Das folgende Beispiel zeigt einen fiktiven Analytik-Code, der versucht, Daten an den Server zu schicken mittels synchronem XMLHttpRequest innerhalb des <em>unload</em> Anweisungsblocks. Dies resultiert in einer Verzögerung des <em>unload</em> Vorgangs der Seite.</p>
+
+<pre class="brush: js">window.addEventListener('unload', logData, false);
+
+function logData() {
+    var client = new XMLHttpRequest();
+    client.open("POST", "/log", false); // der dritte Parameter bewirkt synchrones xhr
+    client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
+    client.send(analyticsData);
+}
+</pre>
+
+<p>Durch Verwendung der <strong><code>sendBeacon()</code></strong> Methode werden Daten asynchron an den Server gesendet sobald der User Agent Gelegenheit dazu hat und zwar ohne das <em>unload</em> bzw. das Laden der nächsten Seite zu verzögen.</p>
+
+<p>Das folgende Beispiel zeigt einen fiktiven Analytik-Code, der Daten zum Server sendet mittels <strong><code>sendBeacon()</code></strong>Methode. </p>
+
+<pre class="brush: js">window.addEventListener('unload', logData, false);
+
+function logData() {
+    navigator.sendBeacon("/log", analyticsData);
+}
+</pre>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Beacon', '#sec-sendBeacon-method', 'sendBeacon()')}}</td>
+   <td>{{Spec2('Beacon')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatGeckoDesktop("31")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>26</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{CompatGeckoMobile("31")}}</td>
+   <td>2.5</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{domxref("navigator", "navigator")}}</li>
+</ul>
diff --git a/files/de/web/api/navigator/vibrate/index.html b/files/de/web/api/navigator/vibrate/index.html
new file mode 100644
index 0000000000..55b453cee1
--- /dev/null
+++ b/files/de/web/api/navigator/vibrate/index.html
@@ -0,0 +1,107 @@
+---
+title: Navigator.vibrate()
+slug: Web/API/Navigator/vibrate
+translation_of: Web/API/Navigator/vibrate
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>Die <strong><code>Navigator.vibrate()</code></strong>-Methode erzeugt eine Vibration, wenn entsprechende Hardware vorhanden ist. Wenn das Gerät keine Vibration unterstützt, hat diese Methode keine Auswirkungen. Wenn eine Vibration gestartet werden soll, aber eine andere Vibration noch ausgeführt wird, wird die Alte gestoppt und die Neue gestartet!</p>
+
+<p>Wenn die Methode nicht ausgeführt werden konnte aufgrund eines ungültigen Parameters wird ein <em>false </em>zurückgegeben, ansonsten ein <em>true</em>. Wenn das Modell zu lang ausgeführt wird, wird es abgeschnitten: die maximale Dauer ist je nach Implementierung abhängig!</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>successBool</em> = window.navigator.vibrate(<em><var>pattern</var></em>);
+</pre>
+
+<dl>
+ <dt><em>pattern</em></dt>
+ <dd>Bietet ein Schema von Vibrationen und Vibrationsintervallen. Jeder Wert bezeichnet eine Anzahl an Millisekunden zum vibrieren und pausieren (im Wechsel). <span id="result_box" lang="de"><span>Sie</span> <span>bieten</span> <span>entweder einen einzelnen</span> <span>Wert</span> <span>(um einmal</span> <span>für so viele</span> <span>Millisekunden</span> <span>zu vibrieren</span><span>)</span> <span>oder</span> <span>ein Array von Werten</span><span>, um abwechselnd</span> zu <span>vibrieren</span><span>,</span> pausieren<span>, dann</span> <span>wieder</span> <span>zu vibrieren.</span> </span> Siehe <a href="/en-US/docs/WebAPI/Vibration" title="/en-US/docs/WebAPI/Vibration">Vibration API</a> für weitere Details.</dd>
+</dl>
+
+<p>Wenn man 0 als Wert, einen leeren Array oder einen Array, der nur 0 als Wert(e) enthält, angibt wird die Vibration gestoppt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js">window.navigator.vibrate(200); // vibriert 200ms lang
+window.navigator.vibrate([100,30,100,30,100,200,200,30,200,30,200,200,100,30,100,30,100]); // vibriert 'SOS' im Morsecode
+</pre>
+
+<h2 id="Technische_Daten">Technische Daten</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Technische Daten</th>
+   <th scope="col">Status</th>
+   <th scope="col">Hinweis</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Vibration API')}}</td>
+   <td>{{Spec2('Vibration API')}}</td>
+   <td>Linked to spec is the latest editor's draft; W3C version is a REC.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funktion</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}}</td>
+   <td>{{CompatGeckoDesktop("11.0")}} {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}} (no prefix) [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funktion</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}}</td>
+   <td>{{CompatGeckoMobile("11.0")}} {{property_prefix("moz")}}<br>
+    {{CompatGeckoMobile("16.0")}} (no prefix) [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Wenn die Vibration zulang ist, das heißt der Wert selbst oder das Muster, wurde bis einschließlich Firefox 26 anstatt  <code>false</code>, eine Fehlermeldung zurückgegeben ({{bug("884935")}}). Ab Firefox 32 wird <code>true</code> zurückgegeben, aber das Muster gekürzt ({{bug(1014581)}}).</p>
+
+<h2 id="Weitere_Informationen">Weitere Informationen</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Vibration" title="/en-US/docs/WebAPI/Vibration">Vibration API</a></li>
+</ul>
diff --git a/files/de/web/api/navigatoronline/index.html b/files/de/web/api/navigatoronline/index.html
new file mode 100644
index 0000000000..11f6707c43
--- /dev/null
+++ b/files/de/web/api/navigatoronline/index.html
@@ -0,0 +1,127 @@
+---
+title: NavigatorOnLine
+slug: Web/API/NavigatorOnLine
+tags:
+  - API
+  - HTML-DOM
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/API/NavigatorOnLine
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>The <code><strong>NavigatorOnLine</strong></code> interface contains methods and properties related to the connectivity status of the browser.</p>
+
+<p>There is no object of type <code>NavigatorOnLine</code>, but other interfaces, like {{domxref("Navigator")}} or {{domxref("WorkerNavigator")}}, implement it.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>The <code>NavigatorOnLine</code></em><em> interface doesn't inherit any property.</em></p>
+
+<dl>
+ <dt>{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Boolean")}} indicating whether the browser is working online.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>The </em><em><code>NavigatorOnLine</code></em><em> interface neither implements, nor inherit any method.</em></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#navigatoronline', 'NavigatorOnLine')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from the latest snapshot, {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#navigatoronline', 'NavigatorOnLine')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName('HTML WHATWG')}} with its initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>on {{domxref("WorkerNavigator")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(29)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>on {{domxref("WorkerNavigator")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(29)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{domxref("Navigator")}} interface that implements it.</li>
+</ul>
diff --git a/files/de/web/api/navigatoronline/online/index.html b/files/de/web/api/navigatoronline/online/index.html
new file mode 100644
index 0000000000..2995101bb4
--- /dev/null
+++ b/files/de/web/api/navigatoronline/online/index.html
@@ -0,0 +1,190 @@
+---
+title: NavigatorOnLine.onLine
+slug: Web/API/NavigatorOnLine/onLine
+tags:
+  - API
+  - DOM
+  - Dokumentation
+  - Eigenschaft
+  - Navigation
+  - NavigatorOnLine
+  - Offline
+  - Online
+  - Reference
+  - WebAPI
+translation_of: Web/API/NavigatorOnLine/onLine
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>Diese Eigenschaft gibt einen Wahrheitswert (Bool-Wert) zurück, der Auskunft gibt, ob der Browser eine Internetverbindung aufbauen konnte. Dieser Wert wird immer dann aktualisiert, wenn eine neue Verbindung vom Browser angefordert wurde (durch Script- oder Benutzeraktionen). Es wird "false" zurückgegeben, wenn der letzte Versuch, eine Verbindung aufzubauen, fehlgeschlagen ist.</p>
+
+<p><strong>Einige Browser implementieren diese Funktion verschieden.</strong></p>
+
+<p><span style="line-height: 1.5;">Für <em>Chrome</em> und <em>Safari</em> gilt, dass wenn keine Verbindung zum LAN oder Router aufgebaut wurde, der Browser "offline" ist. Andernfalls ist der Browser "online". Das bedeutet, dass aus dem Online-Status nicht die tatsächliche Verbindung erkennbar ist. Wenn der Rückgabewert "false" ist, dann ist mit Sicherheit keine Verbindung vorhanden. Wenn der Wert aber "true" ist, muss dies keine tatsächliche Verbindung zum Internet bedeuten. Auch kann die Ausführung innerhalb einer <em>Virtuellen Maschine </em>den Wert verfälschen. Für weitere Informationen kann dieser HTML5-Rocks Artikel hilfreich sein (in Englisch): <a href="http://www.html5rocks.com/en/mobile/workingoffthegrid/">Working Off the Grid with HTML5 Offline</a></span></p>
+
+<p><em>Firefox</em> und der<em> Internet Explorer</em> können diesen Wert auch durch die Funktion des "Offline-Modus" verändern. Dann wird auch "false" zurückgegeben, unabhängig vom tatsächlichen Status.</p>
+
+<p>Bis Firefox 41 wurde in allen anderen Fällen "true" zurückgegeben. Seit Version 41 kann der tatsächliche Verbindungsstatus erkannt werden, wenn Firefox auf OS X oder Windows installiert ist.</p>
+
+<p>Es sind auch folgende Ereignisse verfügbar, mit denen unmittelbar auf Änderungen des "OnLine"-Wertes reagiert werden kann.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/document.ononline"><code>window.ononline</code></a></li>
+ <li><a href="/en-US/docs/Web/API/document.onoffline"><code>window.onoffline</code></a></li>
+</ul>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>online</em> = <em>window</em>.navigator.onLine;
+</pre>
+
+<h3 id="Value">Value</h3>
+
+<p><font face="Consolas, Liberation Mono, Courier, monospace">Der Rückgabewert ist vom Typ "boolean", kann also <em>true</em> oder <em>false</em> sein.</font></p>
+
+<h2 id="sect2"> </h2>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Hier das <a href="http://html5-demos.appspot.com/static/navigator.onLine.html">Live-Beispiel</a></p>
+
+<p>Um zu bestimmen, ob der Browser mit dem Internet verbunden ist, müssen Sie den Wert von <code>window.navigator.onLine</code> wie folgt verwenden:</p>
+
+<pre class="brush: js">if (navigator.onLine) {
+  console.log('Verbunden');
+} else {
+  console.log('Getrennt');
+}</pre>
+
+<p>Wenn der Browser <code>onLine</code> nicht kennt, wird <em>false</em> oder <em>undefiniert</em> zurückgegeben.</p>
+
+<p>Um auf dir Veränderung des Status direkt reagieren zu können, verwenden Sie <code><a href="/en-US/docs/DOM/element.addEventListener">addEventListener</a></code> für die Ereignisse <code>window.ononline</code> und <code>window.onoffline;</code> wie in diesem Beispiel:</p>
+
+<pre class="brush: js">window.addEventListener("offline", function(e) { console.log("Nicht Verbunden"); });
+
+window.addEventListener("online", function(e) { console.log("Verbunden"); });
+</pre>
+
+<h2 id="sect3"> </h2>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "browsers.html#navigator.online", "navigator.onLine")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="sect4"> </h2>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funktion</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Einfache Umsetzung</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop(1.9.1)}}<sup>[2]</sup><br>
+    {{CompatGeckoDesktop(2.0)}}<sup>[4]</sup></td>
+   <td>8<sup>[3]</sup></td>
+   <td>{{CompatNo}}<sup>[2]</sup></td>
+   <td>5.0.4</td>
+  </tr>
+  <tr>
+   <td>on {{domxref("WorkerNavigator")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(29)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funktion</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>BlackBerry</th>
+  </tr>
+  <tr>
+   <td>Einfache Umsetzung</td>
+   <td>2.2<sup>[5]</sup></td>
+   <td>{{CompatGeckoMobile(1.9.1)}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>
+    <p>7<br>
+     10</p>
+   </td>
+  </tr>
+  <tr>
+   <td>on {{domxref("WorkerNavigator")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(29)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Vorherige Versionen von Chrome geben true unmittelbar nach den öffnen des Tabs zurück. Erst nach der nächsten Netzwerkaktivität wird der richtige Wert zurückgegeben.  Windows: 11, Mac: 14, Chrome OS: 13, Linux: Liefert immer true zurück. Siehe auch <a href="http://crbug.com/7469">crbug.com/7469</a>.</p>
+
+<p>[2] Seit Firefox 4 und Opera 11.10 wird false unabhängig von der tatsächlichen Verbindung zurückgegeben, wenn der "offline"-Modus des Browsers aktiviert wurde. </p>
+
+<p>[3] Im Internet Explorer 8 werden die "online"- and "offline"-Ereignisse duch document.body ausgelöst; seit dem IE 9 werden diese auch von <code>window</code> ausgelöst.</p>
+
+<p>[4] Seit Firefox 41, auf OS X und Windows, wird der tatsächliche Verbindungstatus zurückgegeben, solange der "offline"-Modus nicht aktivert wurde.</p>
+
+<p>[5] Fehler in der WebView-Komponenten, siehe auch: <a href="http://code.google.com/p/android/issues/detail?id=16760">bug 16760</a>.</p>
+
+<h2 id="sect5"> </h2>
+
+<h2 id="Hinweise">Hinweise</h2>
+
+<p>Für weitere Informationen, siehe auch die  <a href="/en-US/docs/Online_and_offline_events">Online/Offline‎</a>-Ereignisse </p>
+
+<h2 id="sect6"> </h2>
+
+<h2 id="Verweise">Verweise</h2>
+
+<ul>
+ <li><a href="http://www.html5rocks.com/en/mobile/workingoffthegrid.html">HTML5 Rocks: Working Off the Grid With HTML5 Offline</a></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/offline/whats-offline/">HTML5 Rocks: "Offline": What does it mean and why should I care?</a></li>
+ <li><a href="http://hacks.mozilla.org/2010/01/offline-web-applications/">Mozilla Blog: Offline Web Applications</a></li>
+</ul>
diff --git a/files/de/web/api/navigatoronline/online_and_offline_events/index.html b/files/de/web/api/navigatoronline/online_and_offline_events/index.html
new file mode 100644
index 0000000000..4bceb46e36
--- /dev/null
+++ b/files/de/web/api/navigatoronline/online_and_offline_events/index.html
@@ -0,0 +1,120 @@
+---
+title: Online- und Offline-Events
+slug: Web/API/NavigatorOnLine/Online_and_offline_events
+translation_of: Web/API/NavigatorOnLine/Online_and_offline_events
+---
+<p>Einige Browser implementieren <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">Online-/Offline-Events</a> basierend auf der <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WHATWG Web Applications 1.0 specification</a>.</p>
+
+<h2 id="Overview" name="Overview">Übersicht</h2>
+
+<p>Um eine gute offlinefähige Webanwendung erstellen zu können, muss die Anwendung wissen, wann sie offline ist. Zusätzlich muss die Anwendung wissen, wann die Internetverbindung wieder verfügbar ist. Die Voraussetzungen sind also:</p>
+
+<ol>
+ <li>die Anwendung erfährt, wann die Verbindung nach einem Verbindungsabbruch wieder besteht, so dass Änderungen mit dem Server abgeglichen werden können</li>
+ <li>die Anwendung erfährt, wann die Verbindung abbricht, um so Serveranfragen für später in eine Warteschlange einreihen zu können</li>
+</ol>
+
+<p>Dieser Vorgang trägt dazu bei, Online-/Offline Ereignisse zu trivialisieren.</p>
+
+<p>Oft benötigen Webanwendungen außerdem die Möglichkeit, bestimmte Dokumente im Offline-Cache zu halten. Mehr Informationen darüber gibt es unter <a href="/en/Offline_resources_in_Firefox" title="en/Offline_resources_in_Firefox">Offline resources in Firefox</a>.</p>
+
+<h2 id="API" name="API">API</h2>
+
+<h3 id="navigator.onLine" name="navigator.onLine"><code>navigator.onLine</code></h3>
+
+<p><code><a href="/en/DOM/window.navigator.onLine" title="en/DOM/window.navigator.onLine">navigator.onLine</a></code> ist eine Eigenschaft mit boole'schem Wert (<code>true</code> für online, <code>false</code> für offline). Sie aktualisiert sich, sobald der Benutzer in den Offline-Modus wechselt, indem der entsprechende Menü-Eintrag angewählt wird (in Firefox: Datei -&gt; Offline-Modus).</p>
+
+<p>Die Eigenschaft aktualisiert sich außerdem, sobald der Browser nicht mehr in der Lage ist, eine Verbindung herzustellen. Gemäß der Spezifikation:</p>
+
+<blockquote cite="http://www.whatwg.org/specs/web-apps/current-work/#offline">The <code>navigator.onLine</code> attribute must return false if the user agent will not contact the network when the user follows links or when a script requests a remote page (or knows that such an attempt would fail)...</blockquote>
+
+<p>Firefox 2 aktualisiert diese Eigenschaft beim Wechseln in den Offline-Modus und zurück, sowie beim Abbruch/Wiederaufbau der Netzwerkverbindung in Windows und Linux.</p>
+
+<p>Diese Eigenschaft existierte bereits in älteren Versionen von Firefox und Internet Explorer (die Spezifikation selbst basiert auf den vorherigen Implementierungen), sodass man sie schon jetzt einsetzen kann. Die Autoerkennung der Konnektivität wurde in Firefox 2 implementiert.</p>
+
+<h3 id=".22online.22_and_.22offline.22_events" name=".22online.22_and_.22offline.22_events">"<code>online</code>" und "<code>offline</code>" Events</h3>
+
+<p>Mit <a href="/en/Firefox_3_for_developers" title="en/Firefox_3_for_developers">Firefox 3</a> gibt es 2 neue Events: "<a href="/en-US/docs/Web/API/document.ononline"><code>online</code></a>" und "<a href="/en-US/docs/Web/API/document.onoffline"><code>offline</code></a>". Diese werden auf dem <code>&lt;body&gt;</code> jeder Sete ausgelöst, wenn der Browser zwischen Online- und Offline-Modus wechselt. Zusätzlich steigen die Events auf von <code>document.body</code>, zu <code>document</code>, und letztlich zu <code>window</code>. Beide können nicht unterbunden werden (man kann den Benutzer nicht daran hindern, online oder offline zu gehen).</p>
+
+<p>Die Events können auf bekannte Art und Weise registriert werden:</p>
+
+<ul>
+ <li>Verwendung von <code><a href="/en/DOM/element.addEventListener" title="en/DOM/element.addEventListener">addEventListener</a> auf</code> <code>window</code>, <code>document</code> oder <code>document.body</code></li>
+ <li>
+  <p>Zuweisen eines JavaScript <code>Function</code> Objekts auf die Eigenschaften <code>.ononline</code> oder <code>.onoffline</code> von <code>document</code> oder <code>document.body</code> (<strong>Hinweis:</strong> <code>window.ononline</code> oder <code>window.onoffline</code> funktionieren aus Kompatibilitätsgründen nicht.)</p>
+ </li>
+ <li>
+  <p>Angeben der Attribute <code>ononline="..."</code> oder <code>onoffline="..."</code> an dem <code>&lt;body&gt;-T</code>ag im HTML-Code.</p>
+ </li>
+</ul>
+
+<h2 id="Example" name="Example">Beispiel</h2>
+
+<p>Es gibt einen <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">einfachen Test</a>, um zu überprüfen, ob die Events funktionieren:</p>
+
+<p>Hier ist der JavaScript-Teil:</p>
+
+<pre class="brush: js">window.addEventListener('load', function() {
+  var status = document.getElementById("status");
+
+  function updateOnlineStatus(event) {
+    var condition = navigator.onLine ? "online" : "offline";
+
+    status.className = condition;
+    status.innerHTML = condition.toUpperCase();
+
+    log.insertAdjacentHTML("beforeend", "Event: " + event.type + "; Status: " + condition);
+  }
+
+  window.addEventListener('online',  updateOnlineStatus);
+  window.addEventListener('offline', updateOnlineStatus);
+});</pre>
+
+<p>Ein bißchen CSS:</p>
+
+<pre class="brush: css">#status {
+  position : fixed;
+  width: 100%;
+  font : bold 1em sans-serif;
+  color: #FFF:
+  padding : 0.5em
+}
+
+#log {
+  padding: 2.5em 0.5em 0.5em;
+  font: 1em sans-serif;
+}
+
+.online {
+  background: green;
+}
+
+.offline {
+  background: red;
+}
+</pre>
+
+<p>Und das entsprechende HTML:<span class="comment">XXX When mochitests for this are created, point to those instead and update this example -nickolay</span></p>
+
+<pre class="brush: html">&lt;div id="status"&gt;&lt;/div&gt;
+&lt;div id="log"&gt;&lt;/div&gt;
+&lt;p&gt;This is a test&lt;/p&gt;
+</pre>
+
+<p>Hier ist das Live-Ergebnis:</p>
+
+<p>{{ EmbedLiveSample('Example', '100%', '150') }}</p>
+
+<h2 id="References" name="References">Hinweise</h2>
+
+<p>Wenn die API im Browser nicht implementiert ist, gibt es andere Möglichkeiten herauszufinden, ob der Benutzer offline ist: zum Beispiel durch das Reagieren auf <a class="external" href="http://www.html5rocks.com/en/mobile/workingoffthegrid.html#toc-appcache">AppCache error Ereignissen</a> oder auf<a class="external" href="http://www.html5rocks.com/en/mobile/workingoffthegrid.html#toc-xml-http-request"> Antworten von XMLHttpRequest</a>.</p>
+
+<h2 id="References" name="References">Verweise</h2>
+
+<ul>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">'Online/Offline events' section from the WHATWG Web Applications 1.0 Specification</a></li>
+ <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336359">The bug tracking online/offline events implementation in Firefox</a> and a <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336682">follow-up</a></li>
+ <li><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">A simple test case</a></li>
+ <li><a class="external" href="http://ejohn.org/blog/offline-events/">An explanation of Online/Offline events</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2010/01/offline-web-applications/" title="http://hacks.mozilla.org/2010/01/offline-web-applications/">offline web applications</a> at hacks.mozilla.org - showcases an offline app demo and explains how it works.</li>
+</ul>
diff --git a/files/de/web/api/node/appendchild/index.html b/files/de/web/api/node/appendchild/index.html
new file mode 100644
index 0000000000..519f6f9a0d
--- /dev/null
+++ b/files/de/web/api/node/appendchild/index.html
@@ -0,0 +1,144 @@
+---
+title: Node.appendChild()
+slug: Web/API/Node/appendChild
+tags:
+  - API
+  - DOM
+  - Method
+  - Node
+  - Reference
+translation_of: Web/API/Node/appendChild
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Die <code><strong>Node.appendChild()</strong></code> Methode fügt einen Kind-Knoten am Ende der Liste aller Kinder des angegebenen Eltern-Knotens an (to append = anhängen).</p>
+
+<p>Wenn das gegebene Kind eine Referenz zu einem existierenden Knoten im Dokument ist, wird <code>appendChild()</code> es von der aktuellen Position zu der neuen Position bewegen. Es gibt also keine Notwendigkeit den Knoten erst zu entfernen, weil ein Knoten in einem Dokument nicht gleichzeitig an zwei Stellen vorkommen kann. Also, wenn der Knoten bereits einen Eltern-Knoten hat, wird der Knoten zuerst entfernt und dann erneut am Ende der Kind-Knoten-Liste angehängt.</p>
+
+<p>Das {{domxref("Node.cloneNode()")}}  kann genutzt werden um eine Kopie des Knotens zu machen, bevor es an einen neuen Eltern-Knoten angehängt wird. Zu beachten: Kopien die mit <code>cloneNode</code> gemacht wurden, werden nicht automatisch Synchron gehalten.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>aChild</em> = <em>element</em>.appendChild(<em>aChild</em>);</pre>
+
+<h2 id="Example" name="Example">Parameter</h2>
+
+<p><code>aChild</code></p>
+
+<p>Der Knoten, der an den gegebenen Eltern-Knoten angehängt wird (für gewöhnlich ein Element).</p>
+
+<h2 id="Example" name="Example">Rückgabewert</h2>
+
+<p>Der Rückgabewert ist das angehängte Kindelement (<code>aChild</code>), außer wenn aChild ein {{domxref("DocumentFragment")}} ist. In diesem Fall wird ein {{domxref("DocumentFragment")}} zurückgegeben.</p>
+
+<h2 id="Example" name="Example">Anmerkungen</h2>
+
+<p>Eine Verkettung kann anders ablaufen als erwartet, da appendChild() das Kindelement zurück gibt.</p>
+
+<pre class="line-numbers  language-html"><code class="language-html">var aBlock = doc.createElement('block').appendChild(doc.createElement('b'));</code></pre>
+
+<p>Setzt nur <code>aBlock</code> auf <code>&lt;b&gt;&lt;/b&gt;</code>, was möglicherweise nicht das gewünschte ist.</p>
+
+<h2 id="Example" name="Example">Beispiele</h2>
+
+<pre class="brush:js">//  Erstellen Sie ein neues Absatz-Element und fügen Sie es an das Ende des Dokument-Körpers (body)
+var p = document.createElement("p");
+document.body.appendChild(p);</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-node-appendchild', 'Node.appendChild()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>No change from {{SpecName("DOM3 Core")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>No change from {{SpecName("DOM2 Core")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>No change from {{SpecName("DOM1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-184E7107', 'Node.appendChild()')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basis Unterstützung</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basis Unterstützung</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{domxref("Node.removeChild()")}}</li>
+ <li>{{domxref("Node.replaceChild()")}}</li>
+ <li>{{domxref("Node.insertBefore()")}}</li>
+ <li>{{domxref("Node.hasChildNodes()")}}</li>
+ <li>{{domxref("ParentNode.append()")}}</li>
+</ul>
diff --git a/files/de/web/api/node/childnodes/index.html b/files/de/web/api/node/childnodes/index.html
new file mode 100644
index 0000000000..afbddd274e
--- /dev/null
+++ b/files/de/web/api/node/childnodes/index.html
@@ -0,0 +1,70 @@
+---
+title: Node.childNodes
+slug: Web/API/Node/childNodes
+translation_of: Web/API/Node/childNodes
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Summary" name="Summary">Allgemein</h3>
+<p><code>childNodes</code> gibt eine {{ domxref('NodeList') }}, welche alle Kindknoten (<code>childNodes</code>) eines bestimmten HTML-Elements enthält, zurück.</p>
+<h3 id="Syntax" name="Syntax">Syntax</h3>
+<pre class="eval">var <var>nodeList</var> = referenzElement.childNodes;
+</pre>
+<p><var>nodeList</var> ist eine Liste, die alle Kindknoten eines bestimmten Elements der Reihenfolge nach enthält. Falls das Element keine Kindknoten enthält, gibt <code>childNodes</code> eine leere <code>NodeList</code> zurück.<br>
+ <br>
+ Diese Eigenschaft kann nur ausgelesen werden (read-only).</p>
+<h3 id="Beispiel" name="Beispiel">Beispiel</h3>
+<p>Folgendes HTML-Dokument liegt vor:</p>
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;body&gt;
+    &lt;h3&gt;Neue Mitarbeiter eingestellt&lt;/h3&gt;
+    &lt;p&gt;Dank der guten Konjunktur letzten Jahres [...]&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<p>Nun sollen die <code>childNodes</code> von <code>&lt;body&gt;</code> ausgelesen und in einer Liste namens <code><var>nodeList</var></code> gespeichert werden:</p>
+<pre class="brush:javascript">var bd = document.body;
+
+// Zuerst werden wir überprüfen, ob das &lt;body&gt;-Element überhaupt Kindknoten hat.
+if (bd.hasChildNodes()) {
+   // Nun werden wir die Eigenschaft childNodes auslesen
+   var nodeList = bd.childNodes;
+
+   for(var i = 0; i &lt; nodeList.length; i++) {
+     // So wird nodeList durchlaufen und folgender Code wird an jedem Eintrag ausgeführt
+     // In diesem Fall soll der Name ausgegeben werden
+     alert(nodeList[i].nodeName);
+   }
+}
+</pre>
+<p><br>
+ Diese Liste ist ständig aktuell. Jede Änderung am referenz-Element (hier <code>&lt;body&gt;</code>) bewirkt eine aktualisierung der Liste.<br>
+ Wenn Sie also beispielsweise das erste Element in der Liste löschen, rückt automatisch das zweite Element an Stelle des Ersten.<br>
+ Deshalb lassen sich z.B. auf diese Art alle Kindknoten eines Elements löschen:</p>
+<pre class="brush:javascript">while(bd.firstChild) {
+    bd.removeChild(bd.firstChild);
+}
+</pre>
+<h3 id="Notes" name="Notes">Anmerkungen</h3>
+<p>Mit <code>childNodes</code> erhalten Sie eine Liste <strong>aller</strong> Kindknoten, <strong>einschließlich</strong> derer vom Typ {{ domxref("CharacterData") }}. Wenn Sie diese Datenknoten nicht im Index haben wollen, verwenden Sie statt <code>childNodes</code> die Eigenschaft {{ domxref('Element.children') }}.</p>
+<p>Die Einträge in <var><code>nodeList</code></var> sind Objekte, keine Zeichenketten. Für diese Objekte gelten wiederum alle Methoden und Eigenschaften von {{ domxref("Node") }}. Um also Daten aus diesen Objekten auszulesen, müssen deren Eigenschaften ausgelesen werden. Um beispielsweise den Namen eines in <var><code>nodeList</code></var> aufgeführten Elements auszulesen, muss man die eigenschaft <code>nodeName</code> auslesen:</p>
+<pre class="brush:javascript">var name = nodeList[i].nodeName;</pre>
+<p>Das <code>document</code> Objekt hat zwei Kindknoten: Die <code>Doctype</code>-Deklaration und das <code>root</code>-Element, das eine Eigenschaft von {{ domxref("Document") }} ist.<br>
+ Folgendermaßen kann darauf zugegriffen werden:</p>
+<pre class="brush:javascript">var root = document.documentElement;</pre>
+<p>In (X)HTML-Dokumenten stellt das <code>HTML</code>-Element das <code>root</code>-Element dar.</p>
+<h4 id="See_Also" name="See_Also">Siehe auch</h4>
+<ul>
+ <li>{{ domxref("Node") }}</li>
+ <li>{{ domxref("Node.firstChild") }}</li>
+ <li>{{ domxref("Node.nodeName") }}</li>
+ <li>{{ domxref('Element.children') }}</li>
+ <li>{{ domxref("CharacterData") }}</li>
+</ul>
+<h3 id="Specification" name="Specification">Spezifikationen</h3>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-1451460987">W3C DOM 2 Core: childNodes</a> (en)</li>
+ <li><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-1451460987">W3C DOM 3 Core: childNodes</a> (en)</li>
+ <li><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-536297177">W3C DOM 3 NodeList interface</a> (en)</li>
+</ul>
+<p>{{ languages( { "fr": "fr/DOM/element.childNodes", "ja": "ja/DOM/element.childNodes", "pl": "pl/DOM/element.childNodes", "zh-cn": "cn/DOM/element.childNodes", "de": "de/DOM/element.childNodes" } ) }}</p>
diff --git a/files/de/web/api/node/clonenode/index.html b/files/de/web/api/node/clonenode/index.html
new file mode 100644
index 0000000000..d51a489a69
--- /dev/null
+++ b/files/de/web/api/node/clonenode/index.html
@@ -0,0 +1,135 @@
+---
+title: Node.cloneNode
+slug: Web/API/Node/cloneNode
+translation_of: Web/API/Node/cloneNode
+---
+<div>{{APIRef("DOM")}}</div>
+
+<h2 id="Summary" name="Summary">Übersicht</h2>
+
+<p>Gibt ein Duplikat des Knotens, auf dem diese Methode aufgerufen wurde, zurück.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <var>dupNode</var> = <var>node</var>.cloneNode(<var>deep</var>);
+</pre>
+
+<dl>
+ <dt><code>node</code></dt>
+ <dd>Der Knoten, welcher dupliziert werden soll.</dd>
+ <dt><code>dupNode</code></dt>
+ <dd>Der duplizierte Knoten.</dd>
+ <dt><code>deep</code></dt>
+ <dd><code>true</code> wenn die Kindknoten des Knotens ebenfalls dupliziert werden sollen, <code>false</code> wenn nur der Knoten dupliziert werden soll.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Hinweis:</strong> In der DOM4 Spezifikation (implementiert in Gecko 13.0 {{geckoRelease(13)}}), ist das Argument <code>deep</code> optional. Es ist dann laut Spezifikation <strong><code>true</code></strong>.</p>
+
+<p>Leider wurde dies in der letzten Spezifikation geändert, sodass der Standardwert nun <strong><code>false</code></strong> ist. Auch wenn es immer noch optional ist, sollte man das Argument <code>deep</code> aus diesen Kompatibilitätsgründen setzen. Ab Gecko 28.0 {{geckoRelease(28)}} warnt die Konsole den Entwickler, wenn das Argument nicht gesetzt ist.</p>
+</div>
+
+<h2 id="Example" name="Example">Beispiel</h2>
+
+<pre class="brush: js">    var p = document.getElementById("para1");
+    var p_prime = p.cloneNode(true);
+</pre>
+
+<h2 id="Notes" name="Notes">Hinweise</h2>
+
+<p id="not-event-listeners">Der duplizierte Knoten enthält alle Attribute und deren Werte, aber nicht die Eventlistener welche via <a href="/en-US/docs/DOM/element.addEventListener" title="/en-US/docs/DOM/element.addEventListener"><code>addEventListener()</code></a> oder über die jeweilige Elementeigenschaft (z.B. <code>node.onclick = function</code>) gesetzt wurden. Im Fall eines <code>&lt;canvas&gt;</code>-Elements wird das gezeichnete Bild <em>nicht</em> mitkopiert.</p>
+
+<p>Der mit <code>cloneNode()</code> duplizierte Knoten ist noch nicht Teil des Dokuments und hat keinen Elternknoten bis er mithilfe der Methode {{domxref("Node.appendChild()")}} oder einer anderen vergleichbaren Methode in das Dokument eingefügt wird.</p>
+
+<p>Wenn <code>deep</code> auf <code>false</code> gesetzt ist, werden die Kindknoten nicht mitkopiert. Dies schließt ebenfalls alle Textelemente mit ein, da diese in einem oder mehreren Kindknoten enthalten sind.</p>
+
+<div class="warning"><strong>Warnung:</strong> Die Verwendung von <code>cloneNode()</code> kann dazu führen, dass die selbe ID im Dokument mehrmals existiert.</div>
+
+<p>Wenn der Originalknoten eine ID hat, sollte diese im dupliziertem Knoten geändert oder gelöscht werden, um Probleme zu vermeiden. Dies sollte auch für das <code>name</code> Attribut überlegt werden.</p>
+
+<p>Um einen Knoten aus einem anderen Dokument zu kopieren sollte die {{domxref("Document.importNode()")}} verwendet werden.</p>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>deep</code> as an optional parameter</td>
+   <td>
+    <p>Ja</p>
+
+    <p>(Standard: <code>false</code>)</p>
+   </td>
+   <td>{{CompatGeckoDesktop("13.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>
+    <p>Yes</p>
+
+    <p>(default is <code>false</code>)</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome für Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>deep</code> as an optional parameter</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("13.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<ul>
+ <li>{{Spec("http://w3.org/TR/DOM-Level-2-Core/core.html#ID-3A0ED0A4","DOM Level 2 Core: cloneNode","REC")}}</li>
+ <li>{{Spec("http://w3.org/TR/DOM-Level-3-Core/core.html#ID-3A0ED0A4","DOM Level 3 Core: cloneNode","REC")}}</li>
+ <li><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-node-clonenode" title="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-node-clonenode">DOM4: cloneNode</a> (draft)</li>
+</ul>
diff --git a/files/de/web/api/node/firstchild/index.html b/files/de/web/api/node/firstchild/index.html
new file mode 100644
index 0000000000..38703904ec
--- /dev/null
+++ b/files/de/web/api/node/firstchild/index.html
@@ -0,0 +1,62 @@
+---
+title: Node.firstChild
+slug: Web/API/Node/firstChild
+translation_of: Web/API/Node/firstChild
+---
+<p>{{ ApiRef() }}</p>
+
+<h2 id="Allgemein" name="Allgemein">Allgemein</h2>
+
+<p><code>firstChild</code> gibt den ersten Kindknoten (<code>childNode</code>) eines Datenknotens zurück.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="eval">var ersterKindknoten = element.firstChild;
+</pre>
+
+<p>Die Variable <var>ersterKindknoten</var> enthält einen Datenknoten.</p>
+
+<h2 id="Beispiel" name="Beispiel">Beispiel</h2>
+
+<p>Folgendes HTML-Dokument ist gegeben:</p>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;body&gt;
+    &lt;h3&gt;Texte&lt;/h3&gt;
+    &lt;p&gt;Hier steht Text!&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Um auf das erste Kindelement zuzugreifen, kann man folgenden Code verwenden:</p>
+
+<pre class="brush:javascript">var ersterKindknoten = document.body.firstChild;
+</pre>
+
+<p>In diesem Fall ist der erste Kindknoten ein Textknoten, da sich zwischen dem Schlusstag des <code>Paragraphs</code> und dem Start-Tag von <code>&lt;body&gt;</code> ein Zeilenumbruch und vier Leerzeichen befinden.</p>
+
+<h2 id="Anmerkungen" name="Anmerkungen">Anmerkungen</h2>
+
+<ul>
+ <li>Gibt <code>null</code> zurück, wenn der gegebene Datenknoten keine Kindknoten hat.</li>
+ <li><code>firstChild</code> berücksichtigt wie bereits erwähnt auch <code>TextNodes</code>. Daher wird jede Art von Whitespace innerhalb eines Elements als Kindknoten interpretiert. Im obigen Beispiel geschieht das durch die Einrückungen im HTML-Dokument. Falls Sie Textknoten als Rückgabewert ausschließen, und nur HTML-Elemente erhalten wollen, verwenden Sie statt <code>firstChild</code> bitte {{ domxref("Element.firstElementChild") }}.</li>
+</ul>
+
+<h2 id="Spezifikationen" name="Spezifikationen">Spezifikationen</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-firstChild">DOM Level 1 Core: firstChild</a> (en)</li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-169727388">DOM Level 2 Core: firstChild</a> (en)</li>
+</ul>
+
+<h2 id="Siehe_auch">Siehe auch:</h2>
+
+<ul>
+ <li>{{ domxref("Node") }}</li>
+ <li>{{ domxref("Node.lastChild") }}</li>
+ <li>{{ domxref("Node.previousSibling") }}</li>
+ <li>{{ domxref("Node.childNodes") }}</li>
+</ul>
+
+<p>{{ languages( { "fr": "fr/DOM/element.firstChild", "ja": "ja/DOM/element.firstChild", "pl": "pl/DOM/element.firstChild", "zh-cn": "zh-cn/DOM/Node.firstChild" } ) }}</p>
diff --git a/files/de/web/api/node/haschildnodes/index.html b/files/de/web/api/node/haschildnodes/index.html
new file mode 100644
index 0000000000..1ecfb52b48
--- /dev/null
+++ b/files/de/web/api/node/haschildnodes/index.html
@@ -0,0 +1,120 @@
+---
+title: Node.hasChildNodes()
+slug: Web/API/Node/hasChildNodes
+tags:
+  - API DOM Methode Node
+translation_of: Web/API/Node/hasChildNodes
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>Die <code><strong>Node.hasChildNodes()</strong></code> Methode liefert einen <strong>Boolean</strong> Wert der anzeigt ob die aktuelle {{domxref("Node")}} <a href="/en-US/docs/Web/API/Node.childNodes" title="DOM/Node.childNodes">child nodes</a> hat oder nicht.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><em>result</em> = <em>node</em>.hasChildNodes();</code></pre>
+
+<dl>
+ <dt><code>result</code></dt>
+ <dd>enthält den return Wert <code>true</code> oder <code>false</code>.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Beispiele</h2>
+
+<p>Das nächste Beispiel entfernt die erste child node innerhalb dem element mit der id <code>"foo"</code> wenn foo child nodes enthält.</p>
+
+<pre class="brush:js">var foo = document.getElementById("foo");
+if (foo.hasChildNodes()) {
+    // do something with 'foo.childNodes'
+}
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush:js">;(function(prototype) {
+    prototype.hasChildNodes = prototype.hasChildNodes || function() {
+        return !!this.firstChild;
+    }
+})(Node.prototype);
+</pre>
+
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+
+<p>Es gibt unterschiedliche Wege herauszufinden ob die node eine child node enthält.</p>
+
+<ul>
+ <li>node.hasChildNodes()</li>
+ <li>node.firstChild != null (or just node.firstChild)</li>
+ <li>node.childNodes &amp;&amp; node.childNodes.length (or node.childNodes.length &gt; 0)</li>
+</ul>
+
+<h2 id="Specification" name="Specification">Spezifikation</h2>
+
+<ul>
+ <li><a href="https://dom.spec.whatwg.org/#dom-node-haschildnodes">WHATWG: hasChildNodes</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-810594187">hasChildNodes</a></li>
+</ul>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>7.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{domxref("Node.childNodes")}}</li>
+ <li>{{domxref("Node.hasAttributes")}}</li>
+</ul>
diff --git a/files/de/web/api/node/index.html b/files/de/web/api/node/index.html
new file mode 100644
index 0000000000..9f725381a2
--- /dev/null
+++ b/files/de/web/api/node/index.html
@@ -0,0 +1,365 @@
+---
+title: Node
+slug: Web/API/Node
+translation_of: Web/API/Node
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>A <strong><code>Node</code></strong> is an interface from which a number of DOM types inherit, and allows these various types to be treated (or tested) similarly.</p>
+
+<p>The following interfaces all inherit from <code>Node</code> its methods and properties: {{domxref("Document")}}, {{domxref("Element")}}, {{domxref("CharacterData")}} (which {{domxref("Text")}}, {{domxref("Comment")}}, and {{domxref("CDATASection")}} inherit), {{domxref("ProcessingInstruction")}}, {{domxref("DocumentFragment")}}, {{domxref("DocumentType")}}, {{domxref("Notation")}}, {{domxref("Entity")}}, {{domxref("EntityReference")}}</p>
+
+<p>These interfaces may return null in particular cases where the methods and properties are not relevant. They may throw an exception - for example when adding children to a node type for which no children can exist.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Inherits properties from its parents {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p>
+
+<dl>
+ <dt>{{domxref("Node.baseURI")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} representing the base URL. The concept of base URL changes from one language to another; in HTML, it corresponds to the protocol, the domain name and the directory structure, that is all until the last <code>'/'</code>.</dd>
+ <dt>{{domxref("Node.baseURIObject")}} {{Non-standard_inline()}} {{ Fx_minversion_inline("3") }}</dt>
+ <dd>(Not available to web content.) The read-only {{ Interface("nsIURI") }} object representing the base URI for the element.</dd>
+ <dt>{{domxref("Node.childNodes")}} {{readonlyInline}}</dt>
+ <dd>Returns a live {{domxref("NodeList")}} containing all the children of this node. {{domxref("NodeList")}} being live means that if the children of the <code>Node</code> change, the {{domxref("NodeList")}} object is automatically updated.</dd>
+ <dt>{{domxref("Node.firstChild")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Node")}} representing the first direct child node of the node, or <code>null</code> if the node has no child.</dd>
+ <dt>{{domxref("Node.lastChild")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Node")}} representing the last direct child node of the node, or <code>null</code> if the node has no child.</dd>
+ <dt>{{domxref("Node.localName")}} {{obsolete_inline}}{{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} representing the local part of the qualified name of an element. In Firefox 3.5 and earlier, the property upper-cases the local name for HTML elements (but not XHTML elements). In later versions, this does not happen, so the property is in lower case for both HTML and XHTML. {{ gecko_minversion_inline("1.9.2") }}<br>
+ Though recent specifications require <code>localName</code> to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.</dd>
+ <dt>{{domxref("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}}</dt>
+ <dd>The namespace URI of this node, or <code>null</code> if it is no namespace. In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the <code><a class="linkification-ext external" href="http://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> namespace in both HTML and XML trees. {{ gecko_minversion_inline("1.9.2") }}<br>
+ Though recent specifications require <code>namespaceURI</code> to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.</dd>
+ <dt>{{domxref("Node.nextSibling")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Node")}} representing the next node in the tree, or <code>null</code> if there isn't such node.</dd>
+ <dt>{{domxref("Node.nodeName")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} containing the name of the <code>Node</code>. The structure of the name will differ with the name type. E.g. An {{domxref("HTMLElement")}} will contain the name of the corresponding tag, like <code>'audio'</code> for an {{domxref("HTMLAudioElement")}}, a {{domxref("Text")}} node will have the <code>'#text'</code> string, or a {{domxref("Document")}} node will have the <code>'#document'</code> string.</dd>
+ <dt>{{domxref("Node.nodePrincipal")}} {{Non-standard_inline()}}{{ Fx_minversion_inline("3") }}</dt>
+ <dd>A {{ Interface("nsIPrincipal") }} representing the node principal.</dd>
+ <dt>{{domxref("Node.nodeType")}}{{readonlyInline}}</dt>
+ <dd>Returns an <code>unsigned short</code> representing the type of the node. Possible values are:
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th scope="col">Name</th>
+    <th scope="col">Value</th>
+   </tr>
+   <tr>
+    <td><code>ELEMENT_NODE</code></td>
+    <td><code>1</code></td>
+   </tr>
+   <tr>
+    <td><code>ATTRIBUTE_NODE</code> {{deprecated_inline()}}</td>
+    <td><code>2</code></td>
+   </tr>
+   <tr>
+    <td><code>TEXT_NODE</code></td>
+    <td><code>3</code></td>
+   </tr>
+   <tr>
+    <td><code>CDATA_SECTION_NODE</code> {{deprecated_inline()}}</td>
+    <td><code>4</code></td>
+   </tr>
+   <tr>
+    <td><code>ENTITY_REFERENCE_NODE</code> {{deprecated_inline()}}</td>
+    <td><code>5</code></td>
+   </tr>
+   <tr>
+    <td><code>ENTITY_NODE</code> {{deprecated_inline()}}</td>
+    <td><code>6</code></td>
+   </tr>
+   <tr>
+    <td><code>PROCESSING_INSTRUCTION_NODE</code></td>
+    <td><code>7</code></td>
+   </tr>
+   <tr>
+    <td><code>COMMENT_NODE</code></td>
+    <td><code>8</code></td>
+   </tr>
+   <tr>
+    <td><code>DOCUMENT_NODE</code></td>
+    <td><code>9</code></td>
+   </tr>
+   <tr>
+    <td><code>DOCUMENT_TYPE_NODE</code></td>
+    <td><code>10</code></td>
+   </tr>
+   <tr>
+    <td><code>DOCUMENT_FRAGMENT_NODE</code></td>
+    <td><code>11</code></td>
+   </tr>
+   <tr>
+    <td><code>NOTATION_NODE</code> {{deprecated_inline()}}</td>
+    <td><code>12</code></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt>{{domxref("Node.nodeValue")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the value of an object. For most <code>Node</code> type, this returns <code>null</code> and any set operation is ignored. For nodes of type <code>TEXT_NODE</code> ({{domxref("Text")}} objects), <code>COMMENT_NODE</code> ({{domxref("Comment")}} objects), and <code>PROCESSING_INSTRUCTION_NODE</code> ({{domxref("ProcessingInstruction")}} objects), the value corresponds to the text data contained in the object.</dd>
+ <dt>{{domxref("Node.ownerDocument")}} {{readonlyInline}}</dt>
+ <dd>Returns the {{domxref("Document")}} that this node belongs to. If no document is associated with it, returns <code>null</code>.</dd>
+ <dt>{{domxref("Node.parentNode")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Node")}} that is the parent of this node. If there is no such node, like if this node is the top of the tree or if doesn't participate in a tree, this property returns <code>null</code>.</dd>
+ <dt>{{domxref("Node.parentElement")}} {{readonlyInline}}</dt>
+ <dd>Returns an {{domxref("Element")}} that is the parent of this node. If the node has no parent, or if that parent is not an {{domxref("Element")}}, this property returns <code>null</code>.</dd>
+ <dt>{{domxref("Node.prefix")}} {{obsolete_inline}}{{readonlyInline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the namespace prefix of the node, or <code>null</code> if no prefix is specified.<br>
+ Though recent specifications require <code>prefix</code> to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.</dd>
+ <dt>{{domxref("Node.previousSibling")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Node")}} representing the previous node in the tree, or <code>null</code> if there isn't such node.</dd>
+ <dt>{{domxref("Node.textContent")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the textual content of an element and all its descendants.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Inherits methods from its parents {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p>
+
+<dl>
+ <dt>{{domxref("Node.appendChild()")}}</dt>
+ <dd>Insert a {{domxref("Node")}} as the last child node of this element.</dd>
+ <dt>{{domxref("Node.cloneNode()")}}</dt>
+ <dd>Clone a {{domxref("Node")}}, and optionally, all of its contents. By default, it clones the content of the node.</dd>
+ <dt>{{domxref("Node.compareDocumentPosition()")}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("Node.contains()")}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("Node.getFeature()")}} {{obsolete_inline}}</dt>
+ <dd>...</dd>
+ <dt>{{domxref("Node.getUserData()")}} {{obsolete_inline}}</dt>
+ <dd>Allows a user to get some {{domxref("DOMUserData")}} from the node.</dd>
+ <dt>{{domxref("Node.hasAttributes()")}} {{obsolete_inline}}</dt>
+ <dd>Returns a {{domxref("Boolean")}} indicating if the element has any attributes, or not.</dd>
+ <dt>{{domxref("Node.hasChildNodes()")}}</dt>
+ <dd>Returns a {{domxref("Boolean")}} indicating if the element has any child nodes, or not.</dd>
+ <dt>{{domxref("Node.insertBefore()")}}</dt>
+ <dd>Inserts the first {{domxref("Node")}} given in a parameter immediately before the second, child of this element, {{domxref("Node")}}.</dd>
+ <dt>{{domxref("Node.isDefaultNamespace()")}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("Node.isEqualNode()")}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("Node.isSameNode()")}} {{obsolete_inline}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("Node.isSupported()")}} {{obsolete_inline}}</dt>
+ <dd>Returns a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a> flag containing the result of a test whether the DOM implementation implements a specific feature and this feature is supported by the specific node.</dd>
+ <dt>{{domxref("Node.lookupPrefix()")}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("Node.lookupNamespaceURI()")}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("Node.normalize()")}}</dt>
+ <dd>Clean up all the text nodes under this element (merge adjacent, remove empty).</dd>
+ <dt>{{domxref("Node.removeChild()")}}</dt>
+ <dd>Removes a child node from the current element, which must be a child of the current node.</dd>
+ <dt>{{domxref("Node.replaceChild()")}}</dt>
+ <dd>Replaces one child {{domxref("Node")}} of the current one with the second one given in parameter.</dd>
+ <dt>{{domxref("Node.setUserData()")}} {{obsolete_inline}}</dt>
+ <dd>Allows a user to attach, or remove, {{domxref("DOMUserData")}} to the node.</dd>
+ <dd> </dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Browse_all_child_nodes">Browse all child nodes</h3>
+
+<p>The following function recursively cycles all child nodes of a node and executes a callback function upon them (and upon the parent node itself).</p>
+
+<pre class="brush: js">function DOMComb (oParent, oCallback) {
+  if (oParent.hasChildNodes()) {
+    for (var oNode = oParent.firstChild; oNode; oNode = oNode.nextSibling) {
+      DOMComb(oNode, oCallback);
+    }
+  }
+  oCallback.call(oParent);
+}</pre>
+
+<h4 id="Syntax">Syntax</h4>
+
+<pre>DOMComb(parentNode, callbackFunction);</pre>
+
+<h4 id="Description">Description</h4>
+
+<p>Recursively cycle all child nodes of <code>parentNode</code> and <code>parentNode</code> itself and execute the <code>callbackFunction</code> upon them as <a href="/en-US/docs/JavaScript/Reference/Operators/this" title="en-US/docs/JavaScript/Reference/Operators/this"><code>this</code></a> objects.</p>
+
+<h4 id="Parameters">Parameters</h4>
+
+<dl>
+ <dt><code>parentNode</code></dt>
+ <dd>The parent node (<code><strong>Node</strong> <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object" title="en-US/docs/JavaScript/Reference/Global_Objects/Object">Object</a></code>).</dd>
+ <dt><code>callbackFunction</code></dt>
+ <dd>The callback function (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function" title="en-US/docs/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a>).</dd>
+</dl>
+
+<h4 id="Sample_usage">Sample usage</h4>
+
+<p>The following example send to the <code>console.log</code> the text content of the body:</p>
+
+<pre class="brush: js">function printContent () {
+  if (this.nodeValue) { console.log(this.nodeValue); }
+}
+
+onload = function () {
+  DOMComb(document.body, printContent);
+};</pre>
+
+<h3 id="Remove_all_children_nested_within_a_node">Remove all children nested within a node</h3>
+
+<pre class="brush: js">Element.prototype.removeAll = function () {
+  while (this.firstChild) { this.removeChild(this.firstChild); }
+  return this;
+};</pre>
+
+<h4 id="Sample_usage_2">Sample usage</h4>
+
+<pre class="brush: js">/* ... an alternative to document.body.innerHTML = "" ... */
+document.body.removeAll();</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Removed the following properties: <code>attributes</code>, <code>namespaceURI</code>, <code>prefix</code>, and <code>localName</code>.<br>
+    Removed the following methods: <code>isSupported()</code>, <code>hasAttributes()</code>, <code>isSameNode()</code>, <code>getFeature()</code>, <code>setUserData()</code>, and <code>getUserData()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>The methods <code>insertBefore()</code>, <code>replaceChild()</code>, <code>removeChild()</code>, and <code>appendChild()</code> returns one more kind of error (<code>NOT_SUPPORTED_ERR</code>) if called on a {{domxref("Document")}}.<br>
+    The <code>normalize()</code> method has been modified so that {{domxref("Text")}} node can also be normalized if the proper {{domxref("DOMConfiguration")}} flag is set.<br>
+    Added the following methods: <code>compareDocumentPosition()</code>, <code>isSameNode()</code>, <code>lookupPrefix()</code>, <code>isDefaultNamespace()</code>, <code>lookupNamespaceURI()</code>, <code>isEqualNode()</code>, <code>getFeature()</code>, <code>setUserData()</code>, and <code>getUserData().</code><br>
+    Added the following properties: <code>baseURI</code> and <code>textContent</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-1950641247', 'Node')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>The <code>ownerDocument</code> property was slightly modified so that {{domxref("DocumentFragment")}} also returns <code>null</code>.<br>
+    Added the following properties: <code>namespaceURI</code>, <code>prefix</code>, and <code>localName</code>.<br>
+    Added the following methods: <code>normalize()</code>, <code>isSupported()</code> and <code>hasAttributes()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-1950641247', 'Node')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>getFeature()</code>{{obsolete_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("6.0")}}.<br>
+    Removed in {{CompatGeckoDesktop("7.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>getUserData()</code>, <code>setUserData()</code> and <code>hasAttributes()</code> {{deprecated_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.<br>
+    Removed in {{CompatGeckoDesktop("22.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>isSameNode()</code> {{obsolete_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("9.0")}}.<br>
+    Removed in {{CompatGeckoDesktop("10.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>isSupported()</code> {{obsolete_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.<br>
+    Removed in {{CompatGeckoDesktop("22.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>attributes</code></td>
+   <td>{{CompatNo}}</td>
+   <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.<br>
+    Moved to {{domxref("Element")}} in {{CompatGeckoDesktop("22.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>getFeature()</code>{{obsolete_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("6.0")}}.<br>
+    Removed in {{CompatGeckoDesktop("7.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Webkit and Blink incorrectly do not make <code>Node</code> inherit from {{domxref("EventTarget")}}.</p>
diff --git a/files/de/web/api/node/innertext/index.html b/files/de/web/api/node/innertext/index.html
new file mode 100644
index 0000000000..bd1594471a
--- /dev/null
+++ b/files/de/web/api/node/innertext/index.html
@@ -0,0 +1,90 @@
+---
+title: Node.innerText
+slug: Web/API/Node/innerText
+tags:
+  - API DOM Property Reference
+translation_of: Web/API/HTMLElement/innerText
+---
+<div>{{APIRef("DOM")}}</div>
+
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+
+<p><code><strong>Node.innerText</strong></code> ist eine Eigenschaft die die "gerenderten" Text Inhalte einer node und ihrer nachfahren representiert. Als getter nähert es sich dem Text an, den ein User erhalten würde wenn sie/er den Inhalt des Elementes mit dem Kursor highlighten und dann zum Clipboard kopieren würde. Dieses Feature wurde ursprünglich von Internet Explorer eingeführt, und wurde förmlich in den HTML standards von 2016 spezifiziert nachdem es von allen Hauptbrowsern übernommen wurde.</p>
+
+<p>{{domxref("Node.textContent")}} ist eine etwas ähnliche Alternative. Es gibt allerdings wichtige Unterschiede zwischen den beiden.</p>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>
+    <p>Eingeführt, basiert auf dem <a href="https://github.com/rocallahan/innerText-spec">draft of the innerText specification</a>. Siehe <a href="https://github.com/whatwg/html/issues/465">whatwg/html#465</a> und <a href="https://github.com/whatwg/compat/issues/5">whatwg/compat#5</a> für die Historie.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser Kompatibilität</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4</td>
+   <td>{{ CompatGeckoDesktop(45) }}</td>
+   <td>6</td>
+   <td>9.6 (probably earlier)</td>
+   <td>3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.3 (probably earlier)</td>
+   <td>{{ CompatGeckoMobile(45) }}</td>
+   <td>10 (probably earlier)</td>
+   <td>12</td>
+   <td>4.1 (probably earlier)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.outerText")}}</li>
+ <li>{{domxref("Element.innerHTML")}}</li>
+</ul>
diff --git a/files/de/web/api/node/lastchild/index.html b/files/de/web/api/node/lastchild/index.html
new file mode 100644
index 0000000000..9b6f98e59e
--- /dev/null
+++ b/files/de/web/api/node/lastchild/index.html
@@ -0,0 +1,41 @@
+---
+title: Node.lastChild
+slug: Web/API/Node/lastChild
+translation_of: Web/API/Node/lastChild
+---
+<p>{{ ApiRef() }}</p>
+<h2 id="Allgemein" name="Allgemein">Allgemein</h2>
+<p><code>lastChild</code> gibt den letzten Kindknoten (<code>childNode</code>) eines Datenknotens zurück.</p>
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+<pre class="eval">var letzterKindknoten = element.lastChild;
+</pre>
+<p>Die Variable <var>letzterKindknoten</var> enthält einen Datenknoten.</p>
+<h2 id="Beispiel" name="Beispiel">Beispiel</h2>
+<p>Folgendes HTML-Dokument ist gegeben:</p>
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;body&gt;
+    &lt;h3&gt;Texte&lt;/h3&gt;
+    &lt;p&gt;Hier steht Text!&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<p>Um auf das letzte Kindelement zuzugreifen, kann man folgenden Code verwenden:</p>
+<pre class="brush:javascript">var letzterKindknoten = document.body.lastChild;
+</pre>
+<p>In diesem Fall ist der letzte Kindknoten ein Textknoten, da sich zwischen dem Schlusstag des <code>Paragraphs</code> und dem Schlusstag des <code>body</code>-Tags ein Zeilenumbruch und zwei Leerzeichen befinden.</p>
+<h2 id="Anmerkungen" name="Anmerkungen">Anmerkungen</h2>
+<ul>
+ <li>Gibt <code>null</code> zurück, wenn der gegebene Datenknoten keine Kindknoten hat.</li>
+ <li><code>lastChild</code> berücksichtigt wie bereits erwähnt auch <code>TextNodes</code>. Daher wird jede Art von Whitespace innerhalb eines Elements als Kindknoten interpretiert. Im obigen Beispiel geschieht das durch die Einrückungen im HTML-Dokument. Falls Sie Textknoten als Rückgabewert ausschließen, und nur HTML-Elemente erhalten wollen, verwenden Sie statt <code>lastChild</code> bitte {{ domxref("Element.lastElementChild") }}.</li>
+</ul>
+<h2 id="Spezifikation" name="Spezifikation">Spezifikation</h2>
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-61AD09FB">lastChild</a> (en)</p>
+<h2 id="Siehe_auch">Siehe auch:</h2>
+<ul>
+ <li>{{ domxref("Node") }}</li>
+ <li>{{ domxref("Node.firstChild") }}</li>
+ <li>{{ domxref("Node.nextSibling") }}</li>
+ <li>{{ domxref("Node.childNodes") }}</li>
+</ul>
+<p>{{ languages( { "fr": "fr/DOM/element.lastChild", "ja": "ja/DOM/element.lastChild", "pl": "pl/DOM/element.lastChild" , "zh-cn": "zh-cn/DOM/Node.lastChild" } ) }}</p>
diff --git a/files/de/web/api/node/nextsibling/index.html b/files/de/web/api/node/nextsibling/index.html
new file mode 100644
index 0000000000..414e75a8ce
--- /dev/null
+++ b/files/de/web/api/node/nextsibling/index.html
@@ -0,0 +1,60 @@
+---
+title: Node.nextSibling
+slug: Web/API/Node/nextSibling
+translation_of: Web/API/Node/nextSibling
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Allgemein" name="Allgemein">Allgemein</h3>
+<p>Gibt den Datenknoten zurück, der entsprechend der <code>childNodes</code>-Liste des Elternelements direkt auf den gegebenen Datenknoten folgt. Falls der übergebene Knoten bereits der letzte dieser Liste ist, wird <code>null</code> zurückgegeben.</p>
+<h3 id="Syntax" name="Syntax">Syntax</h3>
+<pre class="eval">nextNode = node.nextSibling;
+</pre>
+<h3 id="Beispiel" name="Beispiel">Beispiele</h3>
+<p>Folgendes HTML-Dokument ist gegeben:</p>
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;body&gt;
+    &lt;div&gt;Das ist eine DIV-Box&lt;/div&gt;
+    &lt;p&gt;Hier steht Text!&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<p>Mit folgendem Code kann der Name des Geschwisterelements der DIV-Box ermittelt werden:</p>
+<pre class="brush:javascript">// Diese Variable speichert eine Referenz auf das Erste Element, das &lt;body&gt; enthält, also die DIV-Box
+	var element = document.body.children[0];
+
+	// Nun ermitteln wir das folgende Element
+	var folgeElement = element.nextSibling;
+
+	// Ausgabe des nodeNames
+	alert(folgeElement.nodeName);
+</pre>
+<p><strong>Erläuterung:</strong></p>
+<p>Die Variable <code><var>element</var></code> enthält das erste Kindelement des <code>&lt;body&gt;</code>-Tags, also die <code>DIV</code>-Box.<br>
+ <code><var>folgeElement</var></code> speichert den ersten Geschwisterknoten der DIV-Box. In diesem Fall ist das ein Textknoten der einen Zeilenvorschub und vier Leerzeichen enthält, die sich in dem HTML-Dokument zwischen dem <code>&gt;</code> der DIV-Box und dem <code>&lt;</code> des <code>&lt;p&gt;</code> befinden. Das <code>alert()</code>-Fenster gibt somit <code>#text</code> aus.</p>
+<p>Folgendermaßen können alle nachfolgenden Geschwisterknoten ermittelt werden:</p>
+<pre class="brush:javascript">var element = document.body.children[0];
+var liste = [];
+
+while(element.nextSibling) {
+  var element = liste[liste.push(element.nextSibling)-1];
+}
+</pre>
+<p>Das Skript erzeugt ein Array <code>liste</code> mit folgendem Inhalt:</p>
+<pre class="eval">Array[3]
+  0: Text
+  1: HTMLParagraphElement
+  2: Text
+</pre>
+<h3 id="Anmerkungen">Anmerkungen</h3>
+<p>Am obigen Beispiel lässt sich klar erkennen, dass einige Male ein <code>#text</code>-Knoten im Index auftaucht. Das kommt immer dann vor, wenn sich zwischen den Elementen Whitespace befindet. Da die Eigenschaft <code>nextSibling</code> auch Textknoten berücksichtigt, landet dieser Whitespace letztendlich als Solcher im Index. Falls dies nicht erwünscht ist, sollten Sie statt <code>nextSibling</code> die Eigenschaft {{ domxref("Element.nextElementSibling") }} verwenden</p>
+<h3 id="Specification" name="Specification">Spezifikationen</h3>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-nextSibling">DOM Level 1 Core: nextSibling</a> (en)</li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6AC54C2F">DOM Level 2 Core: nextSibling</a> (en)</li>
+</ul>
+<p>{{ languages( { "fr": "fr/DOM/element.nextSibling", "ja": "ja/DOM/element.nextSibling", "pl": "pl/DOM/element.nextSibling" } ) }}</p>
+<h3 id="Siehe_auch">Siehe auch</h3>
+<ul>
+ <li><a href="/En/DOM/Element.nextElementSibling" title="En/DOM/Element.nextElementSibling">Element.nextElementSibling</a></li>
+</ul>
diff --git a/files/de/web/api/node/nodevalue/index.html b/files/de/web/api/node/nodevalue/index.html
new file mode 100644
index 0000000000..ab9720812e
--- /dev/null
+++ b/files/de/web/api/node/nodevalue/index.html
@@ -0,0 +1,88 @@
+---
+title: Node.nodeValue
+slug: Web/API/Node/nodeValue
+tags:
+  - API DOM Gecko Property
+translation_of: Web/API/Node/nodeValue
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>Die <code><strong>Node.nodeValue</strong></code> Eigenschaft gibt den Wert der aktuellen Node zurück oder setzt ihn.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>value</var> = <var>node</var>.nodeValue;
+</pre>
+
+<p><code>value</code> ist ein string der den Inhalt, falls es ihn gibt, der aktuellen node enthält.</p>
+
+<h2 id="Notes" name="Notes">Notizen</h2>
+
+<p>Für das Dokument selbst, gibt <code>nodeValue</code>  <code>null</code> zurück. Für Text, Kommentar, und CDATA nodes, gibt <code>nodeValue</code> den Inhalt der node zurück. Für attribute nodes, wird der Inhalt des Attributes zurückgegeben.</p>
+
+<p>Die folgende Tabelle zeigt die return Werte der unterschiedlichen Elemente:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th>Attr</th>
+   <th>value of attribute</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>CDATASection</td>
+   <td>Inhalt der CDATA Section</td>
+  </tr>
+  <tr>
+   <td>Comment</td>
+   <td>Inhalt des comments</td>
+  </tr>
+  <tr>
+   <td>Document</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>DocumentFragment</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>DocumentType</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>Element</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>NamedNodeMap</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>EntityReference</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>Notation</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>ProcessingInstruction</td>
+   <td>Gesamter Inhalt, ausgenommen des target</td>
+  </tr>
+  <tr>
+   <td>Text</td>
+   <td>Inhalt der text node</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Wenn <code>nodeValue</code> als <code>null</code> definiert wird, hat das null setzen keine Auswirkung.</p>
+
+<h2 id="Specification" name="Specification">Spezifikation</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D080">DOM Level 2 Core: Node.nodeValue</a></li>
+</ul>
diff --git a/files/de/web/api/node/normalize/index.html b/files/de/web/api/node/normalize/index.html
new file mode 100644
index 0000000000..e49f29e397
--- /dev/null
+++ b/files/de/web/api/node/normalize/index.html
@@ -0,0 +1,49 @@
+---
+title: Node.normalize()
+slug: Web/API/Node/normalize
+tags:
+  - API
+  - DOM
+  - Méthode
+  - Node
+  - Referenz
+translation_of: Web/API/Node/normalize
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>Die <code><strong>Node.normalize()</strong></code> Methode fügt die ausgewählte Node und all Ihre Kindelemente in eine "normalisierte" Form. In einer normalisierten Node sind keine Textnodes leer und es gibt keine parallel existierenden Textnodes.</p>
+
+<h2 id="Syntax" name="Syntax">Schreibweise</h2>
+
+<pre class="syntaxbox"><em>element</em>.normalize();
+</pre>
+
+<h2 id="Example" name="Example">Beispiel</h2>
+
+<pre class="brush:js">var wrapper = document.createElement("div");
+
+wrapper.appendChild( document.createTextNode("Teil 1 ") );
+wrapper.appendChild( document.createTextNode("Teil 2 ") );
+
+// Her wäre: wrapper.childNodes.length === 2
+// wrapper.childNodes[0].textContent === "Teil 1 "
+// wrapper.childNodes[1].textContent === "Teil 2 "
+
+wrapper.normalize();
+
+// Jetzt: wrapper.childNodes.length === 1
+// wrapper.childNodes[0].textContent === "Teil 1 Teil 2 "</pre>
+
+<h2 id="Specification" name="Specification">Spezifikation</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-normalize">DOM Level 2 Core: Node.normalize</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Verwandte Themen</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/Text.splitText" title="DOM/Text.splitText"><code>Text.splitText</code></a></li>
+</ul>
diff --git a/files/de/web/api/node/parentnode/index.html b/files/de/web/api/node/parentnode/index.html
new file mode 100644
index 0000000000..6481d10a86
--- /dev/null
+++ b/files/de/web/api/node/parentnode/index.html
@@ -0,0 +1,79 @@
+---
+title: Node.parentNode
+slug: Web/API/Node/parentNode
+translation_of: Web/API/Node/parentNode
+---
+<p>{{ ApiRef() }}</p>
+<h2 id="Allgemein" name="Allgemein">Allgemein</h2>
+<p>Gibt das Elternelement des gegebenen Datenknotens, entsprechend des DOM-Baums zurück.</p>
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+<pre class="eval">elternelement = node.parentNode
+</pre>
+<p><code><var>elternelement</var></code> enthält das Elternelement des gegebenen Datenknotens.</p>
+<h2 id="Beispiel" name="Beispiel">Beispiel</h2>
+<pre class="brush:javascript">var dokument = document.documentElement.parentNode;
+</pre>
+<h2 id="Anmerkungen" name="Anmerkungen">Anmerkungen</h2>
+<ul>
+ <li>Es kann sich bei dem Elternelement um ein {{ domxref("Element") }}, ein {{ domxref("Document") }} oder ein {{ domxref("DocumentFragment") }} handeln.</li>
+ <li><code>parentNode</code> gibt <code>null</code> zurück bei folgenden Knotentypen: <code>Attr</code>, <code>Document</code>, <code>DocumentFragment</code>, <code>Entity</code>, and <code>Notation</code>.</li>
+ <li>Außerdem wird <code>null</code> zurückgegeben, wenn der Knoten bisher nicht an den DOM-Baum angefügt wurde (weil er womöglich gerade erst erstellt wurde).</li>
+</ul>
+<h2 id="Siehe_auch">Siehe auch</h2>
+<ul>
+ <li>{{ domxref("Node") }}</li>
+ <li>{{ Domxref("Node.firstChild") }}</li>
+ <li>{{ Domxref("Node.lastChild") }}</li>
+ <li>{{ Domxref("Node.childNodes") }}</li>
+ <li>{{ Domxref("Node.nextSibling") }}</li>
+ <li>{{ Domxref("Node.previousSibling") }}</li>
+</ul>
+<h2 id="Browserunterstützung">Browserunterstützung</h2>
+<p>{{ CompatibilityTable() }}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Firefox (Gecko)</th>
+    <th>Chrome</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>{{ CompatGeckoDesktop(1.0) }}</td>
+    <td>0.2</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+    <td>{{ CompatGeckoMobile(1) }}</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="Spezifikation">Spezifikation</h2>
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1060184317">DOM Level 2 Core: Node.parentNode</a> (en)</p>
+<p>{{ languages( { "it": "it/DOM/element.parentNode", "ja": "ja/DOM/element.parentNode", "fr": "fr/DOM/element.parentNode", "pl": "pl/DOM/element.parentNode" , "zh-cn": "zh-cn/DOM/Node.parentNode" } ) }}</p>
diff --git a/files/de/web/api/node/previoussibling/index.html b/files/de/web/api/node/previoussibling/index.html
new file mode 100644
index 0000000000..0a5bd2f518
--- /dev/null
+++ b/files/de/web/api/node/previoussibling/index.html
@@ -0,0 +1,69 @@
+---
+title: Node.previousSibling
+slug: Web/API/Node/previousSibling
+translation_of: Web/API/Node/previousSibling
+---
+<p>{{ ApiRef() }}</p>
+<p>{{ languages( { "fr": "fr/DOM/element.previousSibling", "ja": "ja/DOM/element.previousSibling", "pl": "pl/DOM/element.previousSibling", "zh-cn": "zh-cn/DOM/Node.previousSibling" } ) }}</p>
+<h3 id="Summary" name="Summary">Allgemein</h3>
+<p>Gibt den Datenknoten zurück, der entsprechend der childNodes-Liste des Elternelements dem gegebenen Datenknoten direkt vorangestellt ist. Falls der übergebene Knoten bereits der erste in dieser Liste ist, wird null zurückgegeben.</p>
+<h3 id="Syntax" name="Syntax">Syntax</h3>
+<pre class="eval">vorangestellterKnoten = node.previousSibling;
+</pre>
+<h3 id="Example" name="Example">Beispiele</h3>
+<p>Folgendes HTML-Dokument ist gegeben:</p>
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;body&gt;
+    &lt;div&gt;Das ist eine DIV-Box&lt;/div&gt;
+    &lt;p&gt;Hier steht Text!&lt;/p&gt;
+    &lt;ul&gt;
+      &lt;li&gt;Punkt 1&lt;/li&gt;
+      &lt;li&gt;Punkt 2&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<p>So kann der vorangestellte Datenknoten von <code>&lt;ul&gt;</code> ermittelt werden:</p>
+<pre class="brush:javascript">	// Diese Variable speichert eine Referenz auf das letzte Element, das &lt;body&gt; enthält, also &lt;ul&gt;
+	var element = document.body.children[2];
+
+	// Nun ermitteln wir durch previousSibling den vorangestellten Knoten
+	var vorangestellterKnoten = element.previousSibling;
+
+	// Ausgabe des Knoten-Namens
+	alert(vorangestellterKnoten.nodeName);
+</pre>
+<p><strong>Erläuterung:</strong></p>
+<p>Die Variable <code><var>element</var></code> enthält das letzte Kindelement des -Tags, also <code>&lt;ul&gt;</code>. <code><var>vorangestellterKnoten</var></code> speichert den direkt vorangestellten Geschwisterknoten von <code>&lt;ul&gt;</code>. In diesem Fall ist das ein Textknoten der einen Zeilenvorschub und vier Leerzeichen enthält, die sich in dem HTML-Dokument zwischen dem <code>&gt;</code> von <code>&lt;p&gt;</code> und dem <code>&lt;</code> des <code>&lt;ul&gt;</code> befinden. Das alert()-Fenster gibt somit <code>#text</code> aus.</p>
+<p>So können alle vorangestellten Datenknoten eines Elements ermittelt werden:</p>
+<pre class="brush:javascript">var element = document.body.children[2];
+var liste = [];
+
+while(element.previousSibling) {
+  var element = liste[liste.push(element.previousSibling)-1];
+}
+</pre>
+<p>Das Skript erzeugt ein Array <code><var>liste</var></code> mit folgendem Inhalt:</p>
+<pre class="eval">Array[5]
+  0: Text
+  1: HTMLParagraphElement
+  2: Text
+  3: HTMLDivElement
+  4: Text
+</pre>
+<h3 id="Notes" name="Notes">Anmerkungen</h3>
+<p>Um statt dem vorangestellten Datenknoten den Nächsten zu erhalten, verwenden Sie {{ domxref("Node.nextSibling") }}.<br>
+ Da die Eigenschaft <code>previousSibling</code> Textknoten berücksichtigt, kann es sein, dass Sie statt des vorangestellten Elements einen Textknoten als Rückgabewert erhalten. Oft passiert das durch Whitespace aller Art (z.B. Leerzeichen, Zeilenvorschübe), der sich zwischen den beiden Elementen befindet und von <code>previousSibling</code> als Textknoten interpretiert wird.<br>
+ Falls Textknoten nicht berücksichtigt werden sollen, verwenden Sie stattdessen {{ domxref("Element.previousElementSibling") }}</p>
+<h3 id="Specification" name="Specification">Spezifikationen</h3>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-previousSibling">DOM Level 1 Core: previousSibling</a> (en)</li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-640FB3C8">DOM Level 2 Core: previousSibling</a> (en)</li>
+</ul>
+<h3 id="Siehe_auch">Siehe auch</h3>
+<ul>
+ <li>{{ domxref("Node.nextSibling") }}</li>
+ <li>{{ domxref("Element.previousElementSibling") }}</li>
+ <li>{{ domxref("Node.childNodes") }}</li>
+</ul>
diff --git a/files/de/web/api/node/removechild/index.html b/files/de/web/api/node/removechild/index.html
new file mode 100644
index 0000000000..86a8dfd460
--- /dev/null
+++ b/files/de/web/api/node/removechild/index.html
@@ -0,0 +1,82 @@
+---
+title: Node.removeChild()
+slug: Web/API/Node/removeChild
+tags:
+  - API
+  - DOM
+  - Entfernen
+  - Knoten
+  - Löschen
+  - Methode(2)
+  - Referenz
+translation_of: Web/API/Node/removeChild
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>Die Methode <code><strong>Node.removeChild()</strong></code> entfernt einen Kindknoten aus dem DOM. Gibt den entfernten Knoten zurück.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>var oldChild</em> = <em>element</em>.removeChild(<em>child</em>);
+<strong>ODER</strong>
+<em>element</em>.removeChild(<em>child</em>);
+</pre>
+
+<ul>
+ <li><code>child</code> ist der Kindknoten, der aus dem DOM entfernt werden soll.</li>
+ <li><code>element</code> is der Elternknoten von <code>child</code>.</li>
+ <li><code>oldChild</code> hält eine Referenz auf den entfernten Kindknoten. <code>oldChild</code> === <code>child</code>.</li>
+</ul>
+
+<p>Der entfernte Kindknoten bleibt im Speicher erhalten, ist aber nicht länger Teil des DOM. Mit der ersten Syntax-Form ist es möglich, den entfernten Knoten später im Code wieder zu verwenden, über die <code>oldChild</code> Objektreferenz. In der zweiten Form wird jedoch keine <code style="font-style: normal;">oldChild</code>-Refernenz behalten, also wird (vorausgesetzt dass nirgendwo anders im Code eine Referenz gehalten wird) der Knoten unbenutzbar und nicht erreichbar, und wird nach kurzer Zeit <a href="/en-US/docs/Web/JavaScript/Memory_Management">automatisch aus dem Speicher entfernt</a>. </p>
+
+<p>Wenn <code>child</code> kein Kind des Knotens <code>element</code> ist, wirft die Methode eine Exception. Dies passiert auch wenn <code>child</code> zwar zum Aufruf der Methode ein Kind von <code>element</code> war, aber durch einen beim Entfernen des Knotens aufgerufenen Event Handler bereits aus dem DOM entfernt wurde (z.B. blur).</p>
+
+<p> </p>
+
+<h2 id="Example" name="Example">Beispiele</h2>
+
+<pre>&lt;!-- Beispiel HTML --&gt;
+
+&lt;div id="top" align="center"&gt;
+  &lt;div id="nested"&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush:js">// Ein bestimmtes Element entfernen, wenn der Elternknoten bekannt ist
+var d = document.getElementById("top");
+var d_nested = document.getElementById("nested");
+var throwawayNode = d.removeChild(d_nested);
+</pre>
+
+<pre class="brush:js">// Ein bestimmtes Element entfernen, ohne den Elternknoten zu kennen
+var node = document.getElementById("nested");
+if (node.parentNode) {
+  node.parentNode.removeChild(node);
+}
+</pre>
+
+<pre class="brush:js">// Alle Kindknoten eines Elements entfernen
+var element = document.getElementById("top");
+while (element.firstChild) {
+  element.removeChild(element.firstChild);
+}
+</pre>
+
+<h2 id="Specification" name="Specification">Spezifikation</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeChild">DOM Level 1 Core: removeChild</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1734834066">DOM Level 2 Core: removeChild</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1734834066">DOM Level 3 Core: removeChild</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{domxref("Node.replaceChild")}}</li>
+ <li>{{domxref("Node.parentNode")}}</li>
+ <li>{{domxref("ChildNode.remove")}}</li>
+</ul>
diff --git a/files/de/web/api/node/replacechild/index.html b/files/de/web/api/node/replacechild/index.html
new file mode 100644
index 0000000000..09886ba653
--- /dev/null
+++ b/files/de/web/api/node/replacechild/index.html
@@ -0,0 +1,61 @@
+---
+title: Node.replaceChild
+slug: Web/API/Node/replaceChild
+translation_of: Web/API/Node/replaceChild
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="Summary" name="Summary">Zusammenfassung</h3>
+
+<p><strong>Die <code>Node.replaceChild()</code></strong>-Methode ersetzt den Kind-Knoten (<code>child node)</code> <u>innerhalb</u> des gegebenen Eltern-Knotens (<code>parent node</code>) durch einen anderen.</p>
+
+<h3 id="Syntax" name="Syntax">Syntax</h3>
+
+<pre class="eval"><em>replacedNode</em> = <em>parentNode</em>.replaceChild(<em>newChild</em>, <em>oldChild</em>);
+</pre>
+
+<ul>
+ <li><code>newChild</code> ist der neue, <code>oldChild</code> der zu ersetzende Knoten. Falls er bereits im DOM vorhanden ist, wird er zuerst von dort entfernt.</li>
+ <li><code>oldChild</code> ist der zu ersetzende Knoten.</li>
+ <li><code>replacedNode</code> ist der ersetzte Knoten, also der selbe wie <code>oldChild</code>.</li>
+</ul>
+
+<h3 id="Example" name="Example">Beispiel</h3>
+
+<pre>// &lt;div&gt;
+//  &lt;span id="childSpan"&gt;foo bar&lt;/span&gt;
+// &lt;/div&gt;
+
+// erzeuge einen leeren Element-Knoten
+// ohne ID, Attribute oder Inhalt
+var sp1 = document.createElement("span");
+
+// setze sein id Attribut auf 'newSpan'
+sp1.setAttribute("id", "newSpan");
+
+// Inhalt für das neue Element erzeugen
+var sp1_content = document.createTextNode("new replacement span element.");
+
+// den erzeugten Inhalt an das Element anhängen
+sp1.appendChild(sp1_content);
+
+// Referenz auf den zu ersetzenden Knoten erzeugen
+var sp2 = document.getElementById("childSpan");
+var parentDiv = sp2.parentNode;
+
+// den existierenden Knoten sp2 mit dem neuen Span-Element sp1 ersetzen
+parentDiv.replaceChild(sp1, sp2);
+
+// Ergebnis:
+// &lt;div&gt;
+//   &lt;span id="newSpan"&gt;new replacement span element.&lt;/span&gt;
+// &lt;/div&gt;
+</pre>
+
+<h3 id="Specification" name="Specification">Spezifikation</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-replaceChild">DOM Level 1 Core: replaceChild</a></p>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-785887307">DOM Level 2 Core: replaceChild</a></p>
+
+<p>{{ languages( { "fr": "fr/DOM/element.replaceChild", "ja": "ja/DOM/element.replaceChild", "pl": "pl/DOM/element.replaceChild", "zh-cn": "zh-cn/DOM/Node.replaceChild" } ) }}</p>
diff --git a/files/de/web/api/node/setuserdata/index.html b/files/de/web/api/node/setuserdata/index.html
new file mode 100644
index 0000000000..7c4c714d01
--- /dev/null
+++ b/files/de/web/api/node/setuserdata/index.html
@@ -0,0 +1,121 @@
+---
+title: Node.setUserData()
+slug: Web/API/Node/setUserData
+translation_of: Web/API/Node/setUserData
+---
+<div>{{APIRef("DOM")}}{{obsolete_header}}</div>
+
+<p>Die Methode <code><strong>Node.setUserData()</strong></code>erlaubt es dem Benutzer Daten dem Element hinzuzufügen (oder löschen), ohne dabei die DOM zu modifizieren. Beachte dabei, dass die Daten durch das Nutzen von {{domxref("Node.importNode")}}, {{domxref("Node.cloneNode()")}} und {{domxref("Node.renameNode()")}} nicht mitgegeben werden kann (jedoch kann {{domxref("Node.adoptNode")}} die Information behalten), und bei Vergleichstest mit {{domxref("Node.isEqualNode()")}} werden die Daten nicht berücksichtigt.</p>
+
+<p>This method offers the convenience of associating data with specific nodes without needing to alter the structure of a document and in a standard fashion, but it also means that extra steps may need to be taken if one wishes to serialize the information or include the information upon clone, import, or rename operations.</p>
+
+<div class="note">
+<p>The <code>Node.getUserData</code> and {{domxref("Node.setUserData")}} methods are no longer available from Web content. {{domxref("Element.dataset")}} or <a href="/en-US/docs/JavaScript/Reference/Global_Objects/WeakMap"><code>WeakMap</code></a> can be used instead.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>var prevUserData</var> = <var>someNode</var>.setUserData(<var>userKey</var>, <var>userData</var>, <var>handler</var>);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<ul>
+ <li><code>userKey</code> is used as the key by which one may subsequently obtain the stored data. More than one key can be set for a given node.</li>
+ <li><code>handler</code> is a callback which will be called any time the node is being cloned, imported, renamed, as well as if deleted or adopted; a function can be used or an object implementing the <code>handle</code> method (part of the {{domxref("UserDataHandler")}} interface). The handler will be passed five arguments: an operation type integer (e.g., 1 to indicate a clone operation), the user key, the data on the node, the source node (<code>null</code> if being deleted), the destination node (the newly created node or <code>null</code> if none).If no handler is desired, one must specify <code>null</code>.</li>
+ <li><code>userData</code> is the object to associate to <code>userKey</code> on someNode. If <code>null</code>, any previously registered object and UserDataHandler associated to <code>userKey</code> on this node will be removed.</li>
+</ul>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: js">var d = document.implementation.createDocument('', 'test', null);
+d.documentElement.setUserData('key', 15, {handle:function (o, k, d, s, ds) {console.log(o+'::'+k+'::'+d+'::'+s+'::'+ds)}}); // 2::key::15::[object Element]::[object Element]
+console.log(d.documentElement.getUserData('key')); // 15
+var e = document.importNode(d.documentElement, true); // causes handler to be called
+console.log(e.getUserData('key')); // null since user data is not copied
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikationen</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Removed from the specification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#Node3-setUserData', 'Node.setUserData()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompabilität">Browser Kompabilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}<br>
+    {{CompatNo}} {{CompatGeckoDesktop("22.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}<br>
+    {{CompatNo}} {{CompatGeckoMobile("22.0")}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] The method is still available from within chrome scripts.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{domxref("Node.getUserData()")}}</li>
+ <li>{{domxref("UserDataHandler")}}</li>
+ <li>{{domxref("DOMUserData")}}</li>
+</ul>
diff --git a/files/de/web/api/node/textcontent/index.html b/files/de/web/api/node/textcontent/index.html
new file mode 100644
index 0000000000..c237b6ee70
--- /dev/null
+++ b/files/de/web/api/node/textcontent/index.html
@@ -0,0 +1,69 @@
+---
+title: Node.textContent
+slug: Web/API/Node/textContent
+tags:
+  - API
+  - DOM
+  - Eigenschaft
+  - Kommando API
+  - NeedsSpecTable
+  - Referenz
+translation_of: Web/API/Node/textContent
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Die <code><strong>Node.textContent</strong></code> Eigenschaft repräsentiert den Text-Inhalt einer Node und ihrer untergeordneten Elemente.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>text</em> = element.textContent;
+element.textContent = "Dies ist ein Beispiel-Text";
+</pre>
+
+<h2 id="Notes" name="Notes">Beschreibung</h2>
+
+<ul>
+ <li><code>textContent</code> gibt <code>null</code> zurück, wenn das Element ein D<a href="/en-US/docs/DOM/document" title="DOM/Document">ocument</a>, ein Dokumenten-Typ oder eine Notation ist. Um den gesamten Text und die CDATA Daten für das gesamte Dokument zu bekommen, kann man <code><a href="/en-US/docs/DOM/document.documentElement" title="DOM/document.documentElement">document.documentElement</a>.textContent</code> benutzen.</li>
+ <li>Handelt es sich bei der Node um eine CDATA Sektion, einen Kommentar, eine Prozess-Anweisun oder eine Text-Node, dann gibt <code>textContent</code> den Text in dieser Node zurück (den <a href="/en-US/docs/DOM/Node.nodeValue" title="DOM/Node/NodeValue/Node.nodeValue">nodeValue</a>).</li>
+ <li>Für andere Node-Typen gibt <code>textContent</code> die aneinander gehängten <code>textContent</code> Attribute aller Kind-Nodes zurück, aber ohne Kommentare und Prozess-Anweisungen. Dies ist ein leerer String, wenn die Node keine Kinder hat.</li>
+ <li>Wenn man diese Eigenschaft setzt, werden alle Kinder der Node ersetzt und mit einer einzelnen Text-Node ersetzt, die den neuen Wert beinhaltet.</li>
+</ul>
+
+<h3 id="Unterschiede_zu_innerText">Unterschiede zu <code>innerText</code></h3>
+
+<p>Internet Explorer hat <code>element.innerText</code> eingeführt. Die Absicht ist ähnlich, weist aber die folgenden Unterschiede auf:</p>
+
+<ul>
+ <li>Während <code>textContent</code> den Inhalt aller Element, inklusive {{HTMLElement("script")}} und {{HTMLElement("style")}} Elementen, liefert, macht die IE-spezifische Eigenschaft <code>innerText</code> dies nicht.</li>
+ <li><code>innerText</code> kennt den Stil und gibt keinen Text versteckter Elemente zurück, was <code>textContent</code> hingegen tut.</li>
+ <li>Da <code>innerText</code> den CSS-Stil kennt, verursacht es einen Reflow, während <code>textContent</code> dies nicht tut.</li>
+</ul>
+
+<h3 id="Unterschiede_zu_innerHTML">Unterschiede zu <code>innerHTML</code></h3>
+
+<p><code>innerHTML</code> gibt, wie der Name schon sagt, das HTML zurück. Sehr häufig wird dies benutzt, um den Text aus einem Element abzurufen oder ihn zu ändern. Stattdessen sollte lieber <code>textContent</code> verwendet werden. Da der Text nicht als HTML geparst wird, ist es sehr wahrscheinlich, dass die Performance besser ist. Weiterhin umgeht man so auch einen möglichen XSS-Angriffspunkt.</p>
+
+<h2 id="Example" name="Example">Beispiel</h2>
+
+<pre class="brush: js">// Nehmen wir das folgende HTML Fragment:
+//   &lt;div id="divA"&gt;Hier ist &lt;span&gt;etwas&lt;/span&gt; Text&lt;/div&gt;
+
+// Abrufen des Text-Inhalts:
+var text = document.getElementById("divA").textContent;
+// |text| wird auf "Hier ist etwas Text" gesetzt
+
+// Setzen des Text-Inhalts:
+document.getElementById("divA").textContent = "Hier ist auch Text";
+// Das HTML von divA sieht nun so aus:
+//   &lt;div id="divA"&gt;Hier ist auch Text&lt;/div&gt;
+</pre>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{Compat("api.Node.textContent")}}</p>
+
+<h2 id="Specification" name="Specification">Spezifikation</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#Node3-textContent">textContent</a></li>
+</ul>
diff --git a/files/de/web/api/notification/index.html b/files/de/web/api/notification/index.html
new file mode 100644
index 0000000000..aaf5188c37
--- /dev/null
+++ b/files/de/web/api/notification/index.html
@@ -0,0 +1,265 @@
+---
+title: Notification
+slug: Web/API/notification
+translation_of: Web/API/Notification
+---
+<div>{{APIRef("Web Notifications")}} {{ SeeCompatTable() }}</div>
+
+<div>Das Notification interface wird zum konfigurieren und Anzeigen von desktop notifications verwendet.</div>
+
+<h3 id="Permissions" name="Permissions">Permissions</h3>
+
+<p>Wenn Sie notifications in einer offenen web app verwenden, fügen sie die <span style="font-family: consolas,monaco,andale mono,monospace;">desktop-notification permission zu ihrem <a href="/de/docs/Apps/Manifest">manifest</a> file hinzu. </span>Notifications können für jedes permission level, hosted oder darüber verwendet werden.</p>
+
+<pre class="brush: json"><code><span class="str">"permissions"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
+    </span><span class="str">"desktop-notification"</span><span class="pun">:{}</span><span class="pln">
+</span><span class="pun">}</span></code></pre>
+
+<h2 id="Method_overview" name="Method_overview">Konstruktor</h2>
+
+<pre class="brush: js">var notification = new Notification(title, options);</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>title</code></dt>
+ <dd>Titel der innerhalb der Notification angezeigt werden muss.</dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>Ein Objekt das optionale Konfigurationsparamter enthält. Es kann die folgenden Einträge enthalten:
+ <ul>
+  <li><code>dir</code> : Die Ausrichtung des Textes; Verfügbar sind <code>auto</code>, <code>ltr</code>, oder <code>rtl</code>.</li>
+  <li><code>lang</code>:  Spezifiziere die verwendete Sprache. Dieser String muss ein valides <a href="http://tools.ietf.org/html/bcp47" title="http://tools.ietf.org/html/bcp47">BCP 47 language tag</a> sein.</li>
+  <li><code>body</code>:  Ein String, welcher jeglichen extra Inhalt einer notification beinhaltet.</li>
+  <li><code>tag</code>: Die ID einer gegebene notification, um diese abzurufen, zu löschen, zu ersetzen oder zu löschen. </li>
+  <li><code>icon</code>: Die Url für das verwendete Icon in einer notification.</li>
+  <li><code>data</code>: Ein Benutzerdefiniertes Datenfeld.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<h3 id="Static_properties">Static properties</h3>
+
+<p>Diese Eigenschaften sind nur im Notification-Objekt selbst verfügbar.</p>
+
+<dl>
+ <dt>{{domxref("Notification.permission")}} {{readonlyinline}}</dt>
+ <dd>Eine Zeichenkette, die die aktuell gesetzten Berechtigungen Notifications anzuzeigen darstellt. Mögliche Werte sind: denied (der Nutzer erlaubt keine Benachrichtigungen), granted (der Nutzer akzeptiert, dass Benachrichtigungen angezeigt werden) oder default (die Nutzerwahl ist unbekannt, daher verhält sich der Browser wie bei denied).</dd>
+</dl>
+
+<h3 id="Instance_properties">Instance properties</h3>
+
+<p>Diese Eigenschaften sind nur in Instanzen des Notification-Objekts verfügbar.</p>
+
+<dl>
+ <dt>{{domxref("Notification.title")}} {{readonlyinline}}</dt>
+ <dd>Der Titel der Benachrichtigung der in den Parametern des Konstruktors spezifiziert wurde.</dd>
+ <dt>{{domxref("Notification.dir")}} {{readonlyinline}}</dt>
+ <dd>Textausrichtung der Benachrichtung welche in den Parametern des Konstruktors spezifiziert wurde.</dd>
+ <dt>{{domxref("Notification.lang")}} {{readonlyinline}}</dt>
+ <dd>Sprachcode der Benachrichtung welche in den Parametern des Konstruktors spezifiziert wurde.</dd>
+ <dt>{{domxref("Notification.body")}} {{readonlyinline}}</dt>
+ <dd>Textinhalt der Benachrichtung welche in den Parametern des Konstruktors spezifiziert wurde.</dd>
+ <dt>{{domxref("Notification.tag")}} {{readonlyinline}}</dt>
+ <dd>ID der Benachrichtung (if any) welche in den Parametern des Konstruktors spezifiziert wurde.</dd>
+ <dt>{{domxref("Notification.icon")}} {{readonlyinline}}</dt>
+ <dd>URL des Bildes welches als Icon der Benachrichtgung verwendet wird, wie in den Parametern des Konstruktors spezifiziert wurde</dd>
+ <dt>{{domxref("Notification.data")}} {{readonlyinline}}</dt>
+ <dd>Returns a structured clone of the notification’s data.</dd>
+</dl>
+
+<h4 id="Event_handlers">Event handlers</h4>
+
+<dl>
+ <dt>{{domxref("Notification.onclick")}}</dt>
+ <dd>A handler for the {{event("click")}} event. It is triggered each time the user clicks on the notification.</dd>
+ <dt>{{domxref("Notification.onshow")}}</dt>
+ <dd>A handler for the {{event("show")}} event. It is triggered when the notification is displayed.</dd>
+ <dt>{{domxref("Notification.onerror")}}</dt>
+ <dd>A handler for the {{event("error")}} event. It is triggered each time the notification encounters an error.</dd>
+ <dt>{{domxref("Notification.onclose")}}</dt>
+ <dd>A handler for the {{event("close")}} event. It is triggered when the user closes the notification.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<h3 id="Static_methods">Static methods</h3>
+
+<p>These methods are available only on the <code>Notification</code> object itself.</p>
+
+<dl>
+ <dt>{{domxref("Notification.requestPermission()")}}</dt>
+ <dd>Requests permission from the user to display notifications. This method must be called as the result of a user action (for example, an onclick event), and cannot be used without it.</dd>
+</dl>
+
+<h3 id="Instance_methods">Instance methods</h3>
+
+<p>These properties are available only on an instance of the <code>Notification</code> object or through its <a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain" title="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain"><code>prototype</code></a>. The <code>Notification</code> objects also inherit from the {{domxref("EventTarget")}} interface.</p>
+
+<dl>
+ <dt>{{domxref("Notification.close()")}}</dt>
+ <dd>Programmatically closes a notification.</dd>
+</dl>
+
+<p>{{page("/en-US/docs/Web/API/EventTarget","Methods")}}</p>
+
+<h2 id="Example">Example</h2>
+
+<p>Assume this basic HTML:</p>
+
+<pre class="brush: html">&lt;button onclick="notifyMe()"&gt;Notify me!&lt;/button&gt;</pre>
+
+<p>It's possible to send a notification as follows:</p>
+
+<pre class="brush: js">function notifyMe() {
+  // Let's check if the browser supports notifications
+  if (!("Notification" in window)) {
+    alert("This browser does not support desktop notification");
+  }
+
+  // Let's check whether notification permissions have alredy been granted
+  else if (Notification.permission === "granted") {
+    // If it's okay let's create a notification
+    var notification = new Notification("Hi there!");
+  }
+
+  // Otherwise, we need to ask the user for permission
+  else if (Notification.permission !== 'denied') {
+    Notification.requestPermission(function (permission) {
+      // If the user accepts, let's create a notification
+      if (permission === "granted") {
+        var notification = new Notification("Hi there!");
+      }
+    });
+  }
+
+  // At last, if the user has denied notifications, and you
+  // want to be respectful there is no need to bother them any more.
+}</pre>
+
+<h3 id="See_the_live_result">See the live result</h3>
+
+<p>{{ EmbedLiveSample('Example', '100%', 30) }}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Web Notifications')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5 {{ property_prefix("webkit") }} (see notes)<br>
+    22</td>
+   <td>4.0 {{ property_prefix("moz") }} (see notes)<br>
+    22</td>
+   <td>{{ CompatNo() }}</td>
+   <td>25</td>
+   <td>6 (see notes)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>
+    <p>{{CompatVersionUnknown}}</p>
+   </td>
+   <td>4.0 {{ property_prefix("moz") }} (see notes)<br>
+    22</td>
+   <td>1.0.1 {{ property_prefix("moz") }} (see notes)<br>
+    1.2</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>
+    <p>{{CompatVersionUnknown}}</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Gecko_notes">Gecko notes</h3>
+
+<ul>
+ <li>Prior to Firefox 22 (Firefox OS &lt;1.2), the instantiation of a new notification must be done with the {{ domxref("window.navigator.mozNotification","navigator.mozNotification") }} object through its <code>createNotification</code> method.</li>
+ <li>Prior to Firefox 22 (Firefox OS &lt;1.2), the Notification was displayed when calling the <code>show</code> method and was supporting the <code>click</code> and <code>close</code> events only.</li>
+ <li>Nick Desaulniers has written a <a href="https://github.com/nickdesaulniers/fxos-irc/blob/master/js/notification.js">Notification shim</a> to cover both newer and older implementations.</li>
+ <li>One particular Firefox OS issue is that you can <a href="https://github.com/nickdesaulniers/fxos-irc/blob/0160cf6c3a2b5c9fe33822aaf6bcba3b7e846da9/my.js#L171">pass a path to an icon</a> to use in the notification, but if the app is packaged you cannot use a relative path like <code>/my_icon.png</code>. You also can't use <code>window.location.origin + "/my_icon.png"</code> because <code>window.location.origin</code> is null in packaged apps. The <a href="https://developer.mozilla.org/en-US/Apps/Developing/Manifest#origin">manifest origin field</a> fixes this, but it is only available in Firefox OS 1.1+. A potential solution for supporting Firefox OS &lt;1.1 is to <a href="https://github.com/nickdesaulniers/fxos-irc/blob/0160cf6c3a2b5c9fe33822aaf6bcba3b7e846da9/my.js#L168">pass an absolute URL to an externally hosted version of the icon</a>. This is less than ideal as the notification is displayed immediately with the icon missing, then the icon is fetched, but it works on all versions of Firefox OS.</li>
+</ul>
+
+<h3 id="Chrome_notes">Chrome notes</h3>
+
+<ul>
+ <li>Prior to Chrome 22, the support for notification was following an <a href="http://www.chromium.org/developers/design-documents/desktop-notifications/api-specification" title="http://www.chromium.org/developers/design-documents/desktop-notifications/api-specification">old prefixed version of the specification</a> and was using the {{domxref("window.navigator.webkitNotifications","navigator.webkitNotifications")}} object to instantiate a new notification.</li>
+ <li>Prior to Chrome 32, {{domxref("Notification.permission")}} was not supported.</li>
+</ul>
+
+<h3 id="Android_notes">Android notes</h3>
+
+<ul>
+ <li>The Android browser has been deprecated since Android 4.0. Newer versions use Chrome.</li>
+</ul>
+
+<h3 id="Safari_notes">Safari notes</h3>
+
+<ul>
+ <li>Safari started supporting notification with Safari 6 but only on Mac OSX 10.8+ (Mountain Lion).</li>
+</ul>
+
+<h2 id="Notes">Notes</h2>
+
+<p>{{ref("1")}} Deprecated since Android 4.0.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_Web_Notifications" title="/en-US/docs/WebAPI/Using_Web_Notifications">Using Web Notifications</a></li>
+ <li><a class="external" href="https://github.com/soapdog/firefoxos-sample-app-image-uploader" title="Firefox OS Image Uploader Sample App">Firefox OS Image Uploader Sample App</a></li>
+</ul>
diff --git a/files/de/web/api/notification/permission/index.html b/files/de/web/api/notification/permission/index.html
new file mode 100644
index 0000000000..bd381fe34c
--- /dev/null
+++ b/files/de/web/api/notification/permission/index.html
@@ -0,0 +1,187 @@
+---
+title: Notification.permission
+slug: Web/API/notification/permission
+tags:
+  - API
+  - DOM
+  - Notifications
+  - Property
+  - Reference
+translation_of: Web/API/Notification/permission
+---
+<p>{{APIRef("Web Notifications")}}</p>
+
+<p>Die schreibgeschützte Berechtigungseigenschaft der Schnittstelle {{domxref ("Notificaton")}} gibt die aktuelle Berechtigung an, die der Benutzer für den aktuellen Ursprung zur Anzeige von Web-Benachrichtigungen erteilt hat.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>permission</em> = Notification.permission;</pre>
+
+<h3 id="Return_Value" name="Return_Value">Value</h3>
+
+<p>Ein {{domxref ("DOMString")}} repräsentiert die aktuelle Berechtigung. Der Wert kann sein:</p>
+
+<ul>
+ <li><code>granted</code>: Der Benutzer hat explizit die Berechtigung für den aktuellen Ursprung zur Anzeige von Systembenachrichtigungen erteilt.</li>
+ <li><code>denied</code>: Der Benutzer hat die Berechtigung für den aktuellen Ursprung explizit abgelehnt, um Systembenachrichtigungen anzuzeigen.</li>
+ <li><code>default</code>: Die Benutzerentscheidung ist unbekannt; In diesem Fall wird die Anwendung so tun, als ob die Erlaubnis verweigert wurde.</li>
+</ul>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Das folgende ziemlich ausführliche Snippet könnte verwendet werden, wenn Sie zuerst überprüfen möchten, ob Benachrichtigungen unterstützt werden, und prüfen Sie dann, ob für den aktuellen Ursprung die Erlaubnis für das Senden von Benachrichtigungen gewährt wurde, und fordern Sie dann bei Bedarf eine Genehmigung an, bevor Sie eine Benachrichtigung senden.</p>
+
+<pre class="brush: js">function notifyMe() {
+  // Let's check if the browser supports notifications
+  if (!("Notification" in window)) {
+    console.log("This browser does not support desktop notification");
+  }
+
+  // Let's check whether notification permissions have alredy been granted
+  else if (Notification.permission === "granted") {
+    // If it's okay let's create a notification
+    var notification = new Notification("Hi there!");
+  }
+
+  // Otherwise, we need to ask the user for permission
+  else if (Notification.permission !== 'denied' || Notification.permission === "default") {
+    Notification.requestPermission(function (permission) {
+      // If the user accepts, let's create a notification
+      if (permission === "granted") {
+        var notification = new Notification("Hi there!");
+      }
+    });
+  }
+
+  // At last, if the user has denied notifications, and you
+  // want to be respectful there is no need to bother them any more.
+}</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Web Notifications","#dom-notification-permission","permission")}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Lebensstandard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkombatibilität">Browserkombatibilität</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>5 {{ property_prefix("webkit") }} (see notes)<br>
+    22</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>4.0 {{ property_prefix("moz") }} (see notes)<br>
+    22</td>
+   <td>{{ CompatNo() }}</td>
+   <td>25</td>
+   <td>6 (see notes)</td>
+  </tr>
+  <tr>
+   <td>Vorhanden in den Arbeitskräften</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("41.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>
+    <p>Grundlegende Unterstützung</p>
+   </td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>
+    <p>{{CompatVersionUnknown}}</p>
+   </td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>4.0 {{ property_prefix("moz") }} (see notes)<br>
+    22</td>
+   <td>1.0.1 {{ property_prefix("moz") }} (see notes)<br>
+    1.2</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>
+    <p>{{CompatVersionUnknown}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Vorhanden in den Arbeitskräften</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(41.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Firefox_OS_Notizen">Firefox OS Notizen</h3>
+
+<p id="Page(en-USdocsWebAPINotifications_API_Firefox_OS_notes)"><span style="color: #3b3c40; font-size: 14px; line-height: 1.5;">{{Page("/en-US/docs/Web/API/Notifications_API", "Firefox OS notes")}}</span></p>
+
+<h3 id="Chrome_Notizen">Chrome Notizen</h3>
+
+<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Chrome notes")}}</p>
+
+<h3 id="Safari_Notizen">Safari Notizen</h3>
+
+<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Safari notes")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Verwenden der Benachrichtigungs-API</a></li>
+ <li>{{domxref("Permissions_API","Permissions API")}}</li>
+</ul>
diff --git a/files/de/web/api/page_visibility_api/index.html b/files/de/web/api/page_visibility_api/index.html
new file mode 100644
index 0000000000..c6ad0ac2e4
--- /dev/null
+++ b/files/de/web/api/page_visibility_api/index.html
@@ -0,0 +1,189 @@
+---
+title: Page Visibility API
+slug: Web/API/Page_Visibility_API
+translation_of: Web/API/Page_Visibility_API
+---
+<p id="Summary">{{DefaultAPISidebar("Page Visibility API")}}</p>
+
+<p><span class="seoSummary">Die <strong>Page Visibility API</strong> informiert sobald eine Webseite sichtbar ist und sich im Fokus befindet.</span> Mit dem Konzept des "tabbed browsing" ist es recht wahrscheinlich, dass sich jede Webseite irgendwann im Hintergrund befindet und deshalb nicht aktiv sichtbar für den Benutzer ist. Wenn der Benutzer die Webseite minimiert oder in einen anderen Tab wechselt, sendet die API ein {{event("visibilitychange")}} Event über die geänderte Sichtbarkeit der Seite. Anhand des Events können dann spezifische Aktionen ausgeführt oder ein von der Sichtbarkeit abhängiges Verhalten aktiviert werden. Wenn etwa ein Video in der Webseite abgespielt wird, könnte dieses pausieren solange die Seite für den Benutzer unsichtbar ist und automatisch fortsetzen, sobald er zu ihr zurückkehrt. Der Benutzer verliert somit die Stelle in dem Video nicht und kann dieses einfach weiter anschauen.</p>
+
+<p>Die Status eines {{HTMLElement("iframe")}} sind dieselben wie die des übergeordneten document. Wenn der iframe über CSS Eigenschaften versteckt wird, löst dies nicht die visibility events aus und ändert auch nicht den Status der umliegenden Seite.</p>
+
+<h3 id="Vorteile">Vorteile</h3>
+
+<p>Die API ist besonders hilfreich, um Ressourcen zu sparen und gibt den Entwicklern die Möglichkeit, nicht benötigte Aufgaben einer Webseite oder Web App zu pausieren solange diese nicht sichtbar ist.</p>
+
+<h3 id="Use_cases">Use cases</h3>
+
+<p>Einige Beispiele für die Nutzung sind:</p>
+
+<ul>
+ <li>Eine Webseite beinhaltet ein image carousel, welches nur dann automatisch auf das nächste Bild wechseln soll, wenn der Benutzer die Webseite betrachtet.</li>
+ <li>Eine Dashboard-Applikation pollt nur dann nach Updates, wenn diese auch sichtbar ist und pausiert diesen Vorgang solange sie unsichtbar ist.</li>
+ <li>Eine Seite benötigt die Information, wenn sie per "prerender" geladen, um die Anzahl der page views richtig zu ermitteln.</li>
+ <li>Es können Sounds deaktiviert werden, wenn sich ein Gerät im standby mode befindet (also wenn der Benutzer den Bildschirm seines Smartphones oder Tablets sperrt)</li>
+</ul>
+
+<p>Bisher mussten hierfür Workarounds von den Entwicklern implementiert werden. Dafür wurden Lösungen verwendet etwa auf Basis von onblur/onfocus Event-Handlern auf dem window, worüber sich ermitteln lässt ob die Webseite gerade die aktive ist oder nicht. Allerdings teilt dies nicht mit, ob die Webseite gerade für den Benutzer effektiv sichtbar ist oder nicht. Die Page Visibility API addressiert genau das. (Verglichen mit der onblur/onfocus basierten Lösung ist ein zentraler Unterschied, dass dort die Webseite <em>nicht</em> unsichtbar wurde, wenn ein ganz anderes Fenster aktiv wurde oder der Browser selbst den Fokus verloren hat, weil der Benutzer zu einer anderen Applikation gewechselt ist. Eine Webseite wird hier nur unsichtbar, wenn der Benutzer innerhalb des Browserfensters zu einem anderen Tab wechselt oder das Fenster minimiert.)</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Hier ist ein <a href="http://daniemon.com/tech/webapps/page-visibility/">live Code-Beispiel</a> (eines Videos mit Sound).</p>
+
+<p>Das Beispiel wurde über folgenden Code realisiert:</p>
+
+<pre class="brush: js">// Set the name of the hidden property and the change event for visibility
+var hidden, visibilityChange;
+if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
+  hidden = "hidden";
+  visibilityChange = "visibilitychange";
+} else if (typeof document.msHidden !== "undefined") {
+  hidden = "msHidden";
+  visibilityChange = "msvisibilitychange";
+} else if (typeof document.webkitHidden !== "undefined") {
+  hidden = "webkitHidden";
+  visibilityChange = "webkitvisibilitychange";
+}
+
+var videoElement = document.getElementById("videoElement");
+
+// If the page is hidden, pause the video;
+// if the page is shown, play the video
+function handleVisibilityChange() {
+  if (document[hidden]) {
+    videoElement.pause();
+  } else {
+    videoElement.play();
+  }
+}
+
+// Warn if the browser doesn't support addEventListener or the Page Visibility API
+if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") {
+  console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
+} else {
+  // Handle page visibility change
+  document.addEventListener(visibilityChange, handleVisibilityChange, false);
+
+  // When the video pauses, set the title.
+  // This shows the paused
+  videoElement.addEventListener("pause", function(){
+    document.title = 'Paused';
+  }, false);
+
+  // When the video plays, set the title.
+  videoElement.addEventListener("play", function(){
+    document.title = 'Playing';
+  }, false);
+
+}
+</pre>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<h3 id="document.hidden_Read_only"><code>document.hidden</code> <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></h3>
+
+<p>Liefert <code>true</code> wenn die Webseite als unsichtbar für den Benutzer gewertet wird und <code>false</code> andernfalls.</p>
+
+<h3 id="document.visibilityState_Read_only"><code>document.visibilityState</code> <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></h3>
+
+<p>Ist ein <code>string</code> welcher den aktuellen Sichtbarkeitsstatus angibt. Mögliche Werte sind:</p>
+
+<ul>
+ <li><code>visible</code> : der Seiteninhalt ist mindestens teilweise oder unvollständig sichtbar. In der Praxis bedeutet dies, dass sich die Seite in dem aktiven Tab eines nicht minimierten Fensters befindet.</li>
+ <li><code>hidden</code> : der Seiteninhalt ist nicht für den Benutzer sichtbar. In der Praxis bedeutet dies, die Seite befindet sich in einem nicht aktiven (Hintergrund-)Tab des Browserfensters, das Browserfenster ist minimiert oder die Bildschirmsperre des Betriebssystems ist aktiv.</li>
+ <li><code>prerender</code> : der Seiteninhalt wird gerade über "prerender" verarbeitet und ist noch nicht sichtbar für den Benutzer (es gilt somit als "hidden" für <code>document.hidden</code>). Ein Dokument kann den Initialzustand "prerender" erhalten und später den Status zu einem anderen Wert wechseln. Dieser kann aber nicht von einem anderen Status zu "prerender" wechseln. Achtung: Nicht alle Browser unterstützen diesen Status.</li>
+ <li><code>unloaded</code> : Die Seite wird aus dem Speicher freigegeben / gelöscht. Achtung: Nicht alle Browser unterstützen diesen Status.</li>
+</ul>
+
+<pre class="brush: js">//startSimulation and pauseSimulation defined elsewhere
+function handleVisibilityChange() {
+  if (document.hidden) {
+    pauseSimulation();
+  } else  {
+    startSimulation();
+  }
+}
+
+document.addEventListener("visibilitychange", handleVisibilityChange, false);
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Bemerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Page Visibility API')}}</td>
+   <td>{{Spec2('Page Visibility API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>13 {{property_prefix("webkit")}}<br>
+    33</td>
+   <td>{{CompatGeckoDesktop(18)}} [2]</td>
+   <td>10</td>
+   <td>12.10[1]</td>
+   <td>7</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4 {{property_prefix("webkit")}}</td>
+   <td>{{CompatGeckoMobile(18)}} [2]</td>
+   <td>10</td>
+   <td>12.10[1]</td>
+   <td>7</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Feuert das {{event("visibilitychange")}} Event nicht, wenn das Browserfenster minimiert wird. Ebenso wird <code>hidden</code> nicht auf <code>true </code>gesetzt.</p>
+
+<p>[2] In den Versionen Firefox 10 bis Firefox 51 einschließlich, konnte diese Eigenschaft verwendet werden mit Vendor-Prefix <code>-moz-</code>.</p>
+
+<h2 id="Weitere_Informationen">Weitere Informationen</h2>
+
+<ul>
+ <li>Beschreibung der <a href="http://blogs.msdn.com/b/ie/archive/2011/07/08/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-2.aspx" title="Page Visibility on IEBlog">Page Visibility API</a> im IEBlog.</li>
+ <li>Beschreibung der <a href="http://code.google.com/chrome/whitepapers/pagevisibility.html" title="Page Visibility API by Google">Page Visibility API</a> von Google</li>
+</ul>
diff --git a/files/de/web/api/performance/index.html b/files/de/web/api/performance/index.html
new file mode 100644
index 0000000000..14f80850bb
--- /dev/null
+++ b/files/de/web/api/performance/index.html
@@ -0,0 +1,135 @@
+---
+title: Performance
+slug: Web/API/Performance
+tags:
+  - API
+  - Interface
+  - Navigation Timing
+  - NeedsTranslation
+  - Performance
+  - Reference
+  - TopicStub
+  - Web Performance
+translation_of: Web/API/Performance
+---
+<div>{{APIRef("High Resolution Time")}}</div>
+
+<p>The <strong><code>Performance</code></strong> interface provides access to performance-related information for the current page. It's part of the High Resolution Time API, but is enhanced by the Performance Timeline API, the <a href="/en-US/docs/Web/API/Navigation_timing_API">Navigation Timing API</a>, the <a href="/en-US/docs/Web/API/User_Timing_API">User Timing API</a>, and the <a href="/en-US/docs/Web/API/Resource_Timing_API">Resource Timing API</a>.</p>
+
+<p>An object of this type can be obtained by calling the {{domxref("Window.performance")}} read-only attribute.</p>
+
+<div class="note">
+<p><strong><em>Note</em>: </strong>This interface and its members are available in <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>, except where indicated below. Also note that performance markers and measures are per context. If you create a mark on the main thread (or other worker), you cannot see it in a worker thread, and vice versa.</p>
+</div>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>The <code>Performance</code> interface doesn't inherit any properties.</em></p>
+
+<dl>
+ <dt>{{domxref("Performance.navigation")}} {{readonlyInline}}</dt>
+ <dd>A {{domxref("PerformanceNavigation")}} object that provides useful context about the operations included in the times listed in <code>timing</code>, including whether the page was a load or a refresh, how many redirections occurred, and so forth. Not available in workers.</dd>
+ <dt>{{domxref("Performance.timing")}} {{readonlyInline}}</dt>
+ <dd>A {{domxref("PerformanceTiming")}} object containing latency-related performance information. Not available in workers.</dd>
+ <dt>{{domxref("Performance.memory", "performance.memory")}} {{Non-standard_inline}}</dt>
+ <dd>A <em>non-standard</em> extension added in Chrome, this property provides an object with basic memory usage information. <em>You <strong>should not use</strong> this non-standard API.</em></dd>
+</dl>
+
+<dl>
+ <dt>
+ <h3 id="Event_handlers">Event handlers</h3>
+ </dt>
+ <dt>{{domxref("Performance.onresourcetimingbufferfull")}}</dt>
+ <dd>An {{domxref("EventTarget")}} which is a callback that will be called when the {{event("resourcetimingbufferfull")}} event is fired.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em><em>The <code>Performance</code> interface doesn't inherit any </em>methods</em>.</p>
+
+<dl>
+ <dt>{{domxref("Performance.clearMarks()")}}</dt>
+ <dd>Removes the given <em>mark</em> from the browser's performance entry buffer.</dd>
+ <dt>{{domxref("Performance.clearMeasures()")}}</dt>
+ <dd>Removes the given <em>measure</em> from the browser's performance entry buffer.</dd>
+ <dt>{{domxref("Performance.clearResourceTimings()")}}</dt>
+ <dd>Removes all {{domxref("PerformanceEntry","performance entries")}} with a {{domxref("PerformanceEntry.entryType","entryType")}} of "<code>resource</code>" from the browser's performance data buffer.</dd>
+ <dt>{{domxref("Performance.getEntries()")}}</dt>
+ <dd>Returns a list of {{domxref("PerformanceEntry")}} objects based on the given <em>filter</em>.</dd>
+ <dt>{{domxref("Performance.getEntriesByName()")}}</dt>
+ <dd>Returns a list of {{domxref("PerformanceEntry")}} objects based on the given <em>name</em> and <em>entry type</em>.</dd>
+ <dt>{{domxref("Performance.getEntriesByType()")}}</dt>
+ <dd>Returns a list of {{domxref("PerformanceEntry")}} objects of the given <em>entry type</em>.</dd>
+ <dt>{{domxref("Performance.mark()")}}</dt>
+ <dd>Creates a {{domxref("DOMHighResTimeStamp","timestamp")}} in the browser's <em>performance entry buffer</em> with the given name.</dd>
+ <dt>{{domxref("Performance.measure()")}}</dt>
+ <dd>Creates a named {{domxref("DOMHighResTimeStamp","timestamp")}} in the browser's performance entry buffer between two specified marks (known as the <em>start mark</em> and <em>end mark</em>, respectively).</dd>
+ <dt>{{domxref("Performance.now()")}}</dt>
+ <dd>Returns a {{domxref("DOMHighResTimeStamp")}} representing the amount of milliseconds elapsed since a reference instant.</dd>
+ <dt>{{domxref("Performance.setResourceTimingBufferSize()")}}</dt>
+ <dd>Sets the browser's resource timing buffer size to the specified number of "<code>resource</code>" {{domxref("PerformanceEntry.entryType","type")}} {{domxref("PerformanceEntry","performance entry")}} objects.</dd>
+ <dt>{{domxref("Performance.toJSON()")}}</dt>
+ <dd>Is a jsonizer returning a json object representing the <code>Performance</code> object.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Highres Time Level 2', '#the-performance-interface', 'toJSON()')}}</td>
+   <td>{{Spec2('Highres Time Level 2')}}</td>
+   <td>Defines <code>toJson()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Highres Time', '#the-performance-interface', 'Performance')}}</td>
+   <td>{{Spec2('Highres Time')}}</td>
+   <td>Defines <code>now()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Navigation Timing', '#sec-window.performance-attribute', 'Performance')}}</td>
+   <td>{{Spec2('Navigation Timing')}}</td>
+   <td>Defines <code>timing</code> and <code>navigation</code> properties.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Performance Timeline Level 2', '#extensions-to-the-performance-interface', 'Performance extensions')}}</td>
+   <td>{{Spec2('Performance Timeline Level 2')}}</td>
+   <td>Changes <code>getEntries()</code> interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Performance Timeline', '#sec-window.performance-attribute', 'Performance extensions')}}</td>
+   <td>{{Spec2('Performance Timeline')}}</td>
+   <td>Defines <code>getEntries()</code>, <code>getEntriesByType()</code> and <code>getEntriesByName()</code> methods.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Resource Timing', '#extensions-performance-interface', 'Performance extensions')}}</td>
+   <td>{{Spec2('Resource Timing')}}</td>
+   <td>Defines <code>clearResourceTimings()</code> and <code>setResourceTimingBufferSize()</code> methods and the <code>onresourcetimingbufferfull</code> property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('User Timing Level 2', '#extensions-performance-interface', 'Performance extensions')}}</td>
+   <td>{{Spec2('User Timing Level 2')}}</td>
+   <td>Clarifies <code>mark()</code>, <code>clearMark()</code>, <code>measure()</code> and <code>clearMeasure()</code> methods.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('User Timing', '#extensions-performance-interface', 'Performance extensions')}}</td>
+   <td>{{Spec2('User Timing')}}</td>
+   <td>Defines <code>mark()</code>, <code>clearMark()</code>, <code>measure()</code> and <code>clearMeasure()</code> methods.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("api.Performance")}}</p>
+</div>
+</div>
diff --git a/files/de/web/api/performance/now/index.html b/files/de/web/api/performance/now/index.html
new file mode 100644
index 0000000000..019bafeb55
--- /dev/null
+++ b/files/de/web/api/performance/now/index.html
@@ -0,0 +1,164 @@
+---
+title: performance.now()
+slug: Web/API/Performance/now
+tags:
+  - API
+  - Méthode
+  - Performanz
+  - Referenz
+  - Web Performance API
+translation_of: Web/API/Performance/now
+---
+<div>{{APIRef("High Resolution Timing")}}</div>
+
+<p>Die <code><strong>performance.now()</strong></code> Methode gibt einen {{domxref("DOMHighResTimeStamp")}} zurück, der in Millisekunden gemessen wird und auf fünf Tausendstel einer Millisekunde (5 Mikrosekunden) genau ist.</p>
+
+<p>Der zurückgegebene Wert stellt die Zeit dar, die seit <strong>time origin </strong>(der {{domxref("PerformanceTiming.navigationStart")}} Eigenschaft und damit der Startzeit) vergangen ist. In einem Web Worker ist die Startzeit die Zeit, in der ihr Ausführungskontext (Thread oder Prozess) erstellt wurde. In einem Browserfenster ist es die Zeit, zu der eine Nutzerin zu dem aktuellen Dokument navigierte (oder die Navigation bestätigte, sollte Bestätigung notwendig gewesen sein). Folgende Punkte sind dabei zu beachten:</p>
+
+<ul>
+ <li>In dedizierten web workern, die im {{domxref("Window")}}-Kontext erstellt wurden, wird der Wert kleiner sein, als <code>performance.now()</code> in dem Browserfenster, aus dem der worker hervorging. Ehemals gleich <code>t0</code> dem Hauptkontext wurde dies in der Vergangenheit auf das heutige Verhalten geändert.</li>
+ <li>In geteilten Worker oder Service Workern kann es passieren, dass der Wert im Worker größer ist als der des Hauptkontextes, da das Fenster nach den Workern erschaffen werden kann.</li>
+</ul>
+
+<pre class="syntaxbox"><em>t</em> = performance.now();</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: js">var zeit0 = performance.now();
+machEtwas();
+var zeit1 = performance.now();
+console.log("Der Aufruf von machEtwas dauerte " + (zeit1 - zeit0) + " Millisekunden.");
+</pre>
+
+<p>Anders als andere Zeitmessungsdaten, die in JavaScript verfügbar sind (beispielsweise <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date/now"><code>Date.now</code></a>), sind die Zeitstempel, die von <code>Performance.now()</code> zurückgegeben werden nicht auf eine Auflösung von einer Millisekunde beschränkt. Stattdessen repräsentieren sie Zeit als Fließkommazahl mit einer Präzision von bis zu einer Mikrosekunde.</p>
+
+<p>Ebenso anders als <code>Date.now()</code>, wachsen die Werte, die von <code>Performance.now() </code>zurückgegeben werden immer in einem konstanten Tempo, unabhängig von der Systemuhr (die manuell eingestellt oder durch Software wie NTP ungenau geworden sein kann). Ansonsten wird <code>performance.timing.navigationStart + performance.now()</code> annähernd ähnlich zu <code>Date.now() sein</code>.</p>
+
+<h2 id="Spezifkationen">Spezifkationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Highres Time Level 2', '#dom-performance-now', 'performance.now()')}}</td>
+   <td>{{Spec2('Highres Time Level 2')}}</td>
+   <td>Strengere Definition von Schnittstellen und Typen</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Highres Time', '#dom-performance-now', 'performance.now()')}}</td>
+   <td>{{Spec2('Highres Time')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundsätzliche Unterstützung</td>
+   <td>{{CompatChrome("20.0")}} {{property_prefix("webkit")}}<br>
+    {{CompatChrome("24.0")}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("15.0")}}</td>
+   <td>10.0</td>
+   <td>{{CompatOpera("15.0")}}</td>
+   <td>{{CompatSafari("8.0")}}</td>
+  </tr>
+  <tr>
+   <td>in Web Workern</td>
+   <td>{{CompatChrome("33")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("34.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>now()</code> in einem dedizierten Worker ist nun unabhängig vom <code>now() </code>des Hauptkontextes.</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("45.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Grundsätzliche Unterstützung</td>
+   <td>{{CompatAndroid("4.0")}}</td>
+   <td>{{CompatChrome("25.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("15.0")}}</td>
+   <td>10.0</td>
+   <td>{{CompatNo}}</td>
+   <td>9</td>
+   <td>{{CompatChrome("25.0")}}</td>
+  </tr>
+  <tr>
+   <td>in Web Workern</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("34.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>now()</code> in einem dedizierten Worker ist nun unabhängig vom <code>now() </code>des Hauptkontextes.</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("45.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Windows Versionen von Chrome 20 bis 33 geben <code>performance.now()</code> nur mit einer Millisekundengenauigkeit zurück.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="http://updates.html5rocks.com/2012/08/When-milliseconds-are-not-enough-performance-now">When milliseconds are not enough: performance.now() </a>bei HTML5 Rocks.</li>
+</ul>
diff --git a/files/de/web/api/push_api/index.html b/files/de/web/api/push_api/index.html
new file mode 100644
index 0000000000..84451b1ac4
--- /dev/null
+++ b/files/de/web/api/push_api/index.html
@@ -0,0 +1,180 @@
+---
+title: Push API
+slug: Web/API/Push_API
+translation_of: Web/API/Push_API
+---
+<div>{{SeeCompatTable}}</div>
+
+<p class="summary">Die <strong>Push API</strong> verleiht Web Applikationen die Fähigkeit, Benachrichtigungen zu empfangen, die von einem Server gesendet werden. Das funktioniert auch, wenn die Web Applikation selbst nicht im Vordergrund oder überhaupt aktuell geladen ist. Dies ermöglicht Entwicklern asynchrone Notizen und Updates an Benutzer zu senden, die sich dafür angemeldet haben. Das Ergebnis ist besseres Engagement mit aktuellem Inhalt.</p>
+
+<h2 id="Push_Konzepte_und_Anwendung">Push Konzepte und Anwendung</h2>
+
+<div class="warning">
+<p>When implementing PushManager subscriptions, it is vitally important that you protect against CSRF/XSRF issues in your app. See the following articles for more information:</p>
+
+<ul>
+ <li><a href="https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF)_Prevention_Cheat_Sheet">Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet</a></li>
+ <li><a href="https://blog.codinghorror.com/preventing-csrf-and-xsrf-attacks/">Preventing CSRF and XSRF Attacks</a></li>
+</ul>
+</div>
+
+<p>Wenn eine App Push Nachrichten erhalten soll, muss sie ein <a href="/en-US/docs/Web/API/ServiceWorker_API">service worker</a> sein. Wenn der <em>Service Worker</em> aktiv ist, kann er Push Benachrichtigungen abonnieren wie folgt: {{domxref("PushManager.subscribe()")}}.</p>
+
+<p>Das Resultat {{domxref("PushSubscription")}} enthält sämtliche Information, die die App braucht, um Push Nachrichten zu senden: einen Endpunkt und den Kodierungsschlüssel zum Datenversand.</p>
+
+<p>Der<em> Service Worker</em> startet bei Bedarf, um eintreffende Nachrichten zu verarbeiten, welche an den Event Handler {{domxref("ServiceWorkerGlobalScope.onpush")}} geliefert werden. Dies erlaubt der App auf einlaufende Push Nachrichten zu reagieren, beispielsweise mit der Darstellung einer Notiz (mit dem Befehl {{domxref("ServiceWorkerRegistration.showNotification()")}}.)</p>
+
+<p>Jedes Abonnement ist eindeutig für einen <em>Service Worker</em>. Der Endpunkt des Abonnements ist eine eindeutige <a href="http://www.w3.org/TR/capability-urls/">capability URL</a>: Kenntnis des Endpunkts ist alles was nötig ist, um eine Nachricht an Ihre Applikation zu senden. Die Endpunkt URL ist daher geheim zu halten, da sonst andere Applikationen Nachrichten an Ihre Applikation senden könnten.</p>
+
+<p>Die Aktivierung einen <em>Service Worker</em>s kann eine erhöhte Ressourcennutzung begründen, besonders der Batterie. Die verschiedenen Browser behandeln dies verschieden. Es gibt aktuell keinen Standard dafür. Firefox erlaubt eine begrenzte Anzahlt (quota) Push Nachrichten, die an eine Applikation gesendet werden dürfen, wobei Push Nachrichten, die Notizen generieren, davon ausgenommen sind. Das Limit wird bei jedem Seitenbesuch erneuert. Zum Vergleich verwendet Chrome kein Limit, sondern erfordert, dass jede Push Nachricht mit einer Notiz angezeigt wird.</p>
+
+<div class="note">
+<p><strong>Note</strong>: As of Gecko 44, the allowed quota of push messages per application is not incremented when a new notification fires, when another is still visible, for a period of three seconds. This handles cases where a burst of Push messages is received, and not all generate a visible notification.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Chrome versions earlier than 52 require you to set up a project on <a href="https://developers.google.com/cloud-messaging/">Google Cloud Messaging</a> to send push messages, and use the associated project number and API key when sending push notifications. It also requires an app manifest, with some special parameters to use this service.</p>
+</div>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt>{{domxref("PushEvent")}}</dt>
+ <dd>Represents a push action, sent to the <a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope">global scope</a> of a {{domxref("ServiceWorker")}}. It contains information sent from an application to a {{domxref("PushSubscription")}}.</dd>
+ <dt>{{domxref("PushManager")}}</dt>
+ <dd>Provides a way to receive notifications from third-party servers, as well as request URLs for push notifications. This interface has replaced the functionality offered by the obsolete {{domxref("PushRegistrationManager")}} interface.</dd>
+ <dt>{{domxref("PushMessageData")}}</dt>
+ <dd>Provides access to push data sent by a server, and includes methods to manipulate the received data.</dd>
+ <dt>{{domxref("PushSubscription")}}</dt>
+ <dd>Provides a subcription's URL endpoint, and allows unsubscription from a push service.</dd>
+</dl>
+
+<h2 id="Service_worker_additions">Service worker additions</h2>
+
+<p>The following additions to the <a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a> have been specified in the Push API spec to provide an entry point for using Push messages. They also monitor and respond to push and subscription change events.</p>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}</dt>
+ <dd>Returns a reference to the {{domxref("PushManager")}} interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status. This is the entry point into using Push messaging.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope.onpush")}}</dt>
+ <dd>An event handler fired whenever a {{Event("push")}} event occurs; that is, whenever a server push message is received.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}}</dt>
+ <dd>An event handler fired whenever a {{Event("pushsubscriptionchange")}} event occurs; for example, when a push subscription has been invalidated, or is about to be invalidated (e.g. when a push service sets an expiration time.)</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>Mozilla's <a href="https://serviceworke.rs/">ServiceWorker Cookbook</a> contains many useful Push examples.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Push API")}}</td>
+   <td>{{Spec2("Push API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatGeckoDesktop(44.0)}}<sup>[1][3]</sup></td>
+   <td>{{CompatNo}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("PushEvent.data")}},<br>
+    {{domxref("PushMessageData")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(44.0)}}<sup>[3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(48.0)}}<sup>[4]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("PushEvent.data")}},<br>
+    {{domxref("PushMessageData")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(48.0)}}<sup>[4]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<ul>
+ <li>[1] Currently available only on desktop versions of Firefox; also, push messages are only delivered when Firefox is running.</li>
+ <li>[2] This is currently not implemented. See the <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/pushapi/">Microsoft Edge status information</a>.</li>
+ <li>[3] Push (and <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a>) have been disabled in the <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 and 52 Extended Support Releases</a> (ESR.)</li>
+ <li>[4] Push has been enabled by default on Firefox for Android version 48.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://blog.mozilla.org/services/2016/08/23/sending-vapid-identified-webpush-notifications-via-mozillas-push-service/">Sending VAPID identified WebPush Notifications via Mozilla’s Push Service</a></li>
+ <li><a href="https://developers.google.com/web/fundamentals/engage-and-retain/push-notifications/">Web Push Notifications: Timely, Relevant, and Precise</a>, Joseph Medley</li>
+ <li><a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a></li>
+</ul>
+
+<div>{{DefaultAPISidebar("Push API")}}</div>
diff --git a/files/de/web/api/pushmanager/index.html b/files/de/web/api/pushmanager/index.html
new file mode 100644
index 0000000000..96627b0fb0
--- /dev/null
+++ b/files/de/web/api/pushmanager/index.html
@@ -0,0 +1,161 @@
+---
+title: PushManager
+slug: Web/API/PushManager
+tags:
+  - API
+  - Experimental
+  - Interface
+  - NeedsTranslation
+  - Push
+  - Push API
+  - Reference
+  - Service Workers
+  - TopicStub
+  - WebAPI
+translation_of: Web/API/PushManager
+---
+<p>{{SeeCompatTable}}{{ApiRef("Push API")}}</p>
+
+<p>The <code>PushManager</code> interface of the <a href="/en-US/docs/Web/API/Push_API">Push API</a> provides a way to receive notifications from third-party servers as well as request URLs for push notifications.</p>
+
+<p>This interface is accessed via the {{domxref("ServiceWorkerRegistration.pushManager")}} property.</p>
+
+<div class="note">
+<p><strong>Note</strong>: This interface replaces functionality previously offered by the obsolete {{domxref("PushRegistrationManager")}} interface.</p>
+</div>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>None.</em></p>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("PushManager.getSubscription()")}}</dt>
+ <dd>Retrieves an existing push subscription. It returns a {{jsxref("Promise")}} that resolves to a {{domxref("PushSubscription")}} object containing details of an existing subscription. If no existing subscription exists, this resolves to a <code>null</code> value.</dd>
+ <dt>{{domxref("PushManager.permissionState()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that resolves to the permission state of the current {{domxref("PushManager")}}, which will be one of <code>'granted'</code>, <code>'denied'</code>, or <code>'prompt'</code>.</dd>
+ <dt>{{domxref("PushManager.subscribe()")}}</dt>
+ <dd>Subscribes to a push service. It returns a {{jsxref("Promise")}} that resolves to a {{domxref("PushSubscription")}} object containing details of a push subscription. A new push subscription is created if the current service worker does not have an existing subscription.</dd>
+</dl>
+
+<h3 id="Deprecated_methods">Deprecated methods</h3>
+
+<dl>
+ <dt>{{domxref("PushManager.hasPermission()")}} {{deprecated_inline}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that resolves to the <code>PushPermissionStatus</code> of the requesting webapp, which will be one of <code>granted</code>, <code>denied</code>, or <code>default</code>. Replaced by {{domxref("PushManager.permissionState()")}}.</dd>
+ <dt>{{domxref("PushManager.register()")}} {{deprecated_inline}}</dt>
+ <dd>Subscribes to a push subscription. Replaced by {{domxref("PushManager.subscribe()")}}.</dd>
+ <dt>{{domxref("PushManager.registrations()")}} {{deprecated_inline}}</dt>
+ <dd>Retrieves existing push subscriptions. Replaced by {{domxref("PushManager.getSubscription()")}}.</dd>
+ <dt>{{domxref("PushManager.unregister()")}} {{deprecated_inline}}</dt>
+ <dd>Unregisters and deletes a specified subscription endpoint. In the updated API, a subscription is unregistered by calling the {{domxref("PushSubscription.unsubscribe()")}} method.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">this.onpush = function(event) {
+  console.log(event.data);
+  // From here we can write the data to IndexedDB, send it to any open
+  // windows, display a notification, etc.
+}
+
+navigator.serviceWorker.register('serviceworker.js').then(
+  function(serviceWorkerRegistration) {
+    serviceWorkerRegistration.pushManager.subscribe().then(
+      function(pushSubscription) {
+        console.log(pushSubscription.subscriptionId);
+        console.log(pushSubscription.endpoint);
+        // The push subscription details needed by the application
+        // server are now available, and can be sent to it using,
+        // for example, an XMLHttpRequest.
+      }, function(error) {
+        // During development it often helps to log errors to the
+        // console. In a production environment it might make sense to
+        // also report information about errors back to the
+        // application server.
+        console.log(error);
+      }
+    );
+  });</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Push API','#pushmanager-interface','PushManager')}}</td>
+   <td>{{Spec2('Push API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatGeckoDesktop(44.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Push_API/Using_the_Push_API">Using the Push API</a></li>
+ <li><a href="/en-US/docs/Web/API/Push_API">Push API</a></li>
+ <li><a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a></li>
+</ul>
diff --git a/files/de/web/api/pushmanager/subscribe/index.html b/files/de/web/api/pushmanager/subscribe/index.html
new file mode 100644
index 0000000000..5d82a28916
--- /dev/null
+++ b/files/de/web/api/pushmanager/subscribe/index.html
@@ -0,0 +1,143 @@
+---
+title: PushManager.subscribe()
+slug: Web/API/PushManager/subscribe
+translation_of: Web/API/PushManager/subscribe
+---
+<p>{{SeeCompatTable}}{{ApiRef("Push API")}}</p>
+
+<p>Die Methode <strong><code>subscribe()</code></strong> des {{domxref("PushManager")}} Interfaces meldet die API an einem Push-Service an.</p>
+
+<p>Sie bekommt {{jsxref("Promise")}} als Rückgabewert, welcher sich zu einem {{domxref("PushSubscription")}} Objekt auflösen lässt, und weitere Details der Push-Subscription enthält. Eine neue Push-Subscription wird erstellt falls der aktuelle Service-Worker nicht bereits eine existierende Push-Subscription enthält.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">​PushManager.subscribe(options).then(function(pushSubscription) { ... } );</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>options {{optional_inline}}</code></dt>
+ <dd>Ein Objekt das optionale Konfigurationsparameter enthält. Das Objekt kann die folgenden Eigenschaften (properties) haben:
+ <ul>
+  <li><code>userVisibleOnly</code>: Ein boolscher Wert der anzeigt, dass die zurückgegebene Push-Subscription nur für Nachrichten genutz wird, dessen Effekt den sie (die Push-Subscription) auslöst, auch nur für den Anwender sichtbar sind.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Returnwert">Returnwert</h3>
+
+<p>{{jsxref("Promise")}} welcher ein {{domxref("PushSubscription")}} Objekt auflöst.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: js">this.onpush = function(event) {
+  console.log(event.data);
+  /**********************************************
+  ++ Die Überstzung des Kommentars, folgt noch ++
+  **********************************************/
+  // From here we can write the data to IndexedDB, send it to any open
+  // windows, display a notification, etc.
+}
+
+navigator.serviceWorker.register('serviceworker.js').then(
+  function(serviceWorkerRegistration) {
+    serviceWorkerRegistration.pushManager.subscribe().then(
+      function(pushSubscription) {
+        console.log(pushSubscription.endpoint);
+        /**********************************************
+        ++ Die Überstzung des Kommentars, folgt noch ++
+        **********************************************/
+        // The push subscription details needed by the application
+        // server are now available, and can be sent to it using,
+        // for example, an XMLHttpRequest.
+      }, function(error) {
+        /**********************************************
+        ++ Die Überstzung des Kommentars, folgt noch ++
+        **********************************************/
+        // During development it often helps to log errors to the
+        // console. In a production environment it might make sense to
+        // also report information about errors back to the
+        // application server.
+        console.log(error);
+      }
+    );
+  });</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Push API', '#widl-PushManager-subscribe-Promise-PushSubscription--PushSubscriptionOptions-options', 'subscribe()')}}</td>
+   <td>{{Spec2('Push API')}}</td>
+   <td>Initial-Definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatGeckoDesktop(44.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Weitere_Informationen">Weitere Informationen</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Push_API/Using_the_Push_API">Die Push API verwenden</a></li>
+</ul>
diff --git a/files/de/web/api/range/index.html b/files/de/web/api/range/index.html
new file mode 100644
index 0000000000..2dd5008afc
--- /dev/null
+++ b/files/de/web/api/range/index.html
@@ -0,0 +1,254 @@
+---
+title: Range
+slug: Web/API/Range
+tags:
+  - API
+  - DOM
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/API/Range
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>The <strong><code>Range</code></strong> interface represents a fragment of a document that can contain nodes and parts of text nodes.</p>
+
+<p>A range can be created using the {{ domxref("Document.createRange", "createRange()") }} method of the {{ domxref("Document") }} object. Range objects can also be retrieved by using the {{ domxref("Selection/getRangeAt", "getRangeAt()") }} method of the {{ domxref("Selection") }} object or the {{domxref("Document/caretRangeFromPoint", "caretRangeAtPoint()")}} method of the {{domxref("Document")}} object.</p>
+
+<p>There also is the {{domxref("Range.Range()", "Range()")}} constructor available.</p>
+
+<h2 id="Properties" name="Properties">Properties</h2>
+
+<p><em>There are no inherited properties.</em></p>
+
+<dl>
+ <dt>{{domxref("Range.collapsed")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Boolean")}} indicating whether the range's start and end points are at the same position.</dd>
+ <dt>{{domxref("Range.commonAncestorContainer")}} {{readonlyInline}}</dt>
+ <dd>Returns the deepest {{ domxref("Node") }} that contains the <code>startContainer</code> and <code>endContainer</code> nodes.</dd>
+ <dt>{{domxref("Range.endContainer")}} {{readonlyInline}}</dt>
+ <dd>Returns the {{ domxref("Node") }} within which the <code>Range</code> ends.</dd>
+ <dt>{{domxref("Range.endOffset")}} {{readonlyInline}}</dt>
+ <dd>Returns a number representing where in the <code>endContainer</code> the <code>Range</code> ends.</dd>
+ <dt>{{domxref("Range.startContainer")}} {{readonlyInline}}</dt>
+ <dd>Returns the {{ domxref("Node") }} within which the <code>Range</code> starts.</dd>
+ <dt>{{domxref("Range.startOffset")}} {{readonlyInline}}</dt>
+ <dd>Returns a number representing where in the <code>startContainer</code> the <code>Range</code> starts.</dd>
+</dl>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{ domxref("Range.Range()", "Range()") }} {{experimental_inline}}</dt>
+ <dd>Returns a <code>Range</code> object with the global {{domxref("Document")}} as its start and end.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Methods</h2>
+
+<p><em>There are no inherited methods.</em></p>
+
+<dl>
+ <dt>{{ domxref("Range.setStart()")}}</dt>
+ <dd>Sets the start position of a <code>Range</code>.</dd>
+ <dt>{{ domxref("Range.setEnd()")}}</dt>
+ <dd>Sets the end position of a <code>Range</code>.</dd>
+ <dt>{{ domxref("Range.setStartBefore()")}}</dt>
+ <dd>Sets the start position of a <code>Range</code> relative to another {{ domxref("Node") }}.</dd>
+ <dt>{{ domxref("Range.setStartAfter()")}}</dt>
+ <dd>Sets the start position of a <code>Range</code> relative to another {{ domxref("Node") }}.</dd>
+ <dt>{{ domxref("Range.setEndBefore()")}}</dt>
+ <dd>Sets the end position of a <code>Range</code> relative to another {{ domxref("Node") }}.</dd>
+ <dt>{{ domxref("Range.setEndAfter()")}}</dt>
+ <dd>Sets the end position of a <code>Range</code> relative to another {{ domxref("Node") }}.</dd>
+ <dt>{{ domxref("Range.selectNode()")}}</dt>
+ <dd>Sets the <code>Range</code> to contain the {{ domxref("Node") }} and its contents.</dd>
+ <dt>{{ domxref("Range.selectNodeContents()")}}</dt>
+ <dd>Sets the <code>Range</code> to contain the contents of a {{ domxref("Node") }}.</dd>
+ <dt>{{ domxref("Range.collapse()")}}</dt>
+ <dd>Collapses the <code>Range</code> to one of its boundary points.</dd>
+ <dt>{{ domxref("Range.cloneContents()")}}</dt>
+ <dd>Returns a {{ domxref("DocumentFragment") }} copying the nodes of a <code>Range</code>.</dd>
+ <dt>{{ domxref("Range.deleteContents()")}}</dt>
+ <dd>Removes the contents of a <code>Range</code> from the {{ domxref("Document") }}.</dd>
+ <dt>{{ domxref("Range.extractContents()")}}</dt>
+ <dd>Moves contents of a <code>Range</code> from the document tree into a {{ domxref("DocumentFragment") }}.</dd>
+ <dt>{{ domxref("Range.insertNode()")}}</dt>
+ <dd>Insert a {{ domxref("Node") }} at the start of a <code>Range</code>.</dd>
+ <dt>{{ domxref("Range.surroundContents()")}}</dt>
+ <dd>Moves content of a <code>Range</code> into a new {{ domxref("Node") }}.</dd>
+ <dt>{{ domxref("Range.compareBoundaryPoints()")}}</dt>
+ <dd>Compares the boundary points of the <code>Range</code> with another <code>Range</code>.</dd>
+ <dt>{{ domxref("Range.cloneRange()")}}</dt>
+ <dd>Returns a <code>Range</code> object with boundary points identical to the cloned <code>Range</code>.</dd>
+ <dt>{{ domxref("Range.detach()")}}</dt>
+ <dd>Releases the <code>Range</code> from use to improve performance.</dd>
+ <dt>{{ domxref("Range.toString()")}}</dt>
+ <dd>Returns the text of the <code>Range</code>.</dd>
+ <dt>{{ domxref("Range.compareNode()")}} {{ Obsolete_inline }}{{non-standard_inline}}</dt>
+ <dd>Returns a constant representing whether the {{domxref("Node")}} is before, after, inside, or surrounding the range.</dd>
+ <dt>{{ domxref("Range.comparePoint()")}} {{experimental_inline}}</dt>
+ <dd>Returns -1, 0, or 1 indicating whether the point occurs before, inside, or after the <code>Range</code>.</dd>
+ <dt>{{ domxref("Range.createContextualFragment()")}}{{experimental_inline}}</dt>
+ <dd>Returns a {{ domxref("DocumentFragment") }} created from a given string of code.</dd>
+ <dt>{{ domxref("Range.getBoundingClientRect()") }} {{experimental_inline}}</dt>
+ <dd>Returns a {{ domxref("DOMRect") }} object which bounds the entire contents of the <code>Range</code>; this would be the union of all the rectangles returned by {{ domxref("range.getClientRects()") }}.</dd>
+ <dt>{{ domxref("Range.getClientRects()") }} {{experimental_inline}}</dt>
+ <dd>Returns a list of {{ domxref("DOMRect") }} objects that aggregates the results of {{ domxref("Element.getClientRects()") }} for all the elements in the <code>Range</code>.</dd>
+ <dt>{{ domxref("Range.intersectsNode()")}} {{experimental_inline}}</dt>
+ <dd>Returns a <code>boolean</code> indicating whether the given node intersects the <code>Range</code>.</dd>
+ <dt>{{ domxref("Range.isPointInRange()")}} {{experimental_inline}}</dt>
+ <dd>Returns a <code>boolean</code> indicating whether the given point is in the <code>Range</code>.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-range', 'Range')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Do not use <code>RangeException</code> anymore, use <code>DOMException</code> instead.<br>
+    Made the second parameter of <code>collapse()</code> optional.<br>
+    Added the methods <code>isPointInRange()</code>, <code>comparePoint()</code>, and <code>intersectsNode()</code>.<br>
+    Added the constructor <code>Range()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#extensions-to-the-range-interface', 'Extensions to Range')}}</td>
+   <td>{{Spec2('DOM Parsing')}}</td>
+   <td>Added the method <code>createContextualFragment()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#extensions-to-the-range-interface', 'Extensions to Range')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Added the methods <code>getClientRects()</code> and <code>getBoundingClientRect()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level-2-Range-Interface', 'Range')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}} [1]</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>Range()</code> constructor {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("24.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>compareNode()</code> {{obsolete_inline}}{{non-standard_inline()}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}<br>
+    Removed in {{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>isPointInRange()</code>, and <code>comparePoint()</code>{{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15.0</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>intersectsNode()</code> {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("17.0")}} [2]</td>
+   <td>{{CompatNo}}</td>
+   <td>15.0</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>getClientRects()</code> and <code>getBoundingClientRect()</code>{{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>9</td>
+   <td>15.0</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td><code>createContextualFragment()</code>{{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>11</td>
+   <td>15.0</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}} [1]</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Starting with Gecko 13.0 {{ geckoRelease("13.0") }} the <code>Range</code> object throws a {{ domxref("DOMException") }} as defined in DOM 4, instead of a <code>RangeException</code> defined in prior specifications.</p>
+
+<p>[2] Gecko supported it up to Gecko 1.9, then removed it until Gecko 17 where it was reimplemented, matching the spec.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li>
+</ul>
diff --git a/files/de/web/api/range/range/index.html b/files/de/web/api/range/range/index.html
new file mode 100644
index 0000000000..f4dddfe830
--- /dev/null
+++ b/files/de/web/api/range/range/index.html
@@ -0,0 +1,95 @@
+---
+title: Range()
+slug: Web/API/Range/Range
+translation_of: Web/API/Range/Range
+---
+<p>{{ APIRef("DOM") }}{{seeCompatTable}}</p>
+
+<p>Der <code><strong>Range()</strong></code> Konstrukteur gibt ein neu generiertes Objekt wieder, wessen Start und Ende das globale {{domxref("Document")}} Objekt ist.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>range</em> = new Range()</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js  language-js"><code class="language-js">range <span class="operator token">=</span> new <span class="function token">Range<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+endNode <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName<span class="punctuation token">(</span></span><span class="string token">"p"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">item<span class="punctuation token">(</span></span><span class="number token">3</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+endOffset <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName<span class="punctuation token">(</span></span><span class="string token">"p"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">item<span class="punctuation token">(</span></span><span class="number token">3</span><span class="punctuation token">)</span><span class="punctuation token">.</span>childNodes<span class="punctuation token">.</span>length<span class="punctuation token">;</span>
+range<span class="punctuation token">.</span><span class="function token">setEnd<span class="punctuation token">(</span></span>endNode<span class="punctuation token">,</span>endOffset<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Specification" name="Specification">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-range', 'Range.Range()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basis Unterstützung</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("24.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basis Unterstützung</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("24.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li>
+ <li><a href="/en-US/docs/Web/API/Document/createRange">Document.createRange()</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/de/web/api/readablestream/index.html b/files/de/web/api/readablestream/index.html
new file mode 100644
index 0000000000..43873c162b
--- /dev/null
+++ b/files/de/web/api/readablestream/index.html
@@ -0,0 +1,101 @@
+---
+title: ReadableStream
+slug: Web/API/ReadableStream
+tags:
+  - API
+  - Fetch
+  - Interface
+  - Reference
+  - Streams
+translation_of: Web/API/ReadableStream
+---
+<p>{{APIRef("Streams")}}{{SeeCompatTable}}</p>
+
+<p><span class="seoSummary">Das <code>ReadableStream</code> Interface der <a href="/en-US/docs/Web/API/Streams_API">Streams API</a> repräsentiert einen lesbaren Datenstrom von Bytes.</span></p>
+
+<h2 id="Konstruktor">Konstruktor</h2>
+
+<dl>
+ <dt>{{domxref("ReadableStream.ReadableStream", "ReadableStream()")}}</dt>
+ <dd>Erstellt eine Instanz des <code>ReadableStream</code> Interfaces.</dd>
+</dl>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt>{{domxref("ReadableStream.locked")}} {{readonlyInline}}</dt>
+ <dd>Gibt zurück, ob der Stream bereits für einen Reader gesperrt ist.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<dl>
+ <dt>{{domxref("ReadableStream.cancel()")}}</dt>
+ <dd>Bricht den Stream ab und signalisiert dadurch, dass der Konsument sein Interesse am Stream verloren hat. Das angegebene <code>reason</code> Argument wird an die darunterliegende Quelle weitergegeben, welche dieses benutzen kann. </dd>
+ <dt>{{domxref("ReadableStream.getReader()")}}</dt>
+ <dd>Erstellt einen Reader, dessen Typ durch die <code>mode</code> Option angegeben wird, und sperrt den Stream für den neuen Reader. Während der Stream gesperrt ist kann kein anderer Reader angelegt werden bis dieser freigegeben wurde.</dd>
+ <dt>{{domxref("ReadableStream.getIterator()")}}</dt>
+ <dd>Erstellt einen asyncronen ReadableStream-Iterator und sperrt den Stream für ihn, sodass der Iterator der einzige Leser ist. Während der Stream gesperrt ist kann kein anderer Reader angelegt werden bis dieser freigegeben wurde.</dd>
+ <dt>{{domxref("ReadableStream.pipeThrough()")}}</dt>
+ <dd>Bietet die Möglichkeit den Stream mit transformierenden Streams zu verketten.</dd>
+ <dt>{{domxref("ReadableStream.pipeTo()")}}</dt>
+ <dd>Pipet den aktuellen <code>ReadableStream</code> zu einem gegebenen {{domxref("WritableStream")}} und gibt ein {{domxref("Promise")}} zurück welches erfüllt ist, wenn der Piping-Prozess erfolgreich beendet wurde oder verwirft es, wenn irgendein anderer Fehler auftritt.</dd>
+ <dt>{{domxref("ReadableStream.tee()")}}</dt>
+ <dd>Verzweigt den <code>ReadableStream</code> in zwei neue Stream-Instanzen, auf denen parallel gelesen werden kann.</dd>
+ <dt>{{domxref("ReadableStream[@@asyncIterator]()")}}</dt>
+ <dd>Alias der <code>getIterator</code>-Methode.</dd>
+</dl>
+
+<h2 id="Benutzung">Benutzung</h2>
+
+<p>Im folgenden Beispiel wird eine {{domxref("Response")}} erzeugt, die HTML-Fragmente einer anderen Ressource fetched und an den Browser streamt.</p>
+
+<p>Dadurch wird die Benutzung von {{domxref("ReadableStream")}} in Kombination mit {{domxref("Uint8Array")}} gezeigt.</p>
+
+<pre class="brush: js notranslate">fetch("https://www.example.org/").then((response) =&gt; {
+  const reader = response.body.getReader();
+  const stream = new ReadableStream({
+    start(controller) {
+      // Die folgende Funktion behandelt jeden Daten-Chunk
+      function push() {
+        // "done" ist ein Boolean und "value" ein "Uint8Array"
+        return reader.read().then(({ done, value }) =&gt; {
+          // Gibt es weitere Daten zu laden?
+          if (done) {
+            // Teile dem Browser mit, dass wir fertig mit dem Senden von Daten sind
+            controller.close();
+            return;
+          }
+
+          // Bekomme die Daten und sende diese an den Browser durch den Controller weiter
+          controller.enqueue(value);
+        }).then(push);
+      };
+
+      push();
+    }
+  });
+
+  return new Response(stream, { headers: { "Content-Type": "text/html" } });
+});</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Streams','#rs-class','ReadableStream')}}</td>
+   <td>{{Spec2('Streams')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>{{Compat("api.ReadableStream")}}</div>
diff --git a/files/de/web/api/renderingcontext/index.html b/files/de/web/api/renderingcontext/index.html
new file mode 100644
index 0000000000..d290eb830d
--- /dev/null
+++ b/files/de/web/api/renderingcontext/index.html
@@ -0,0 +1,41 @@
+---
+title: RenderingContext
+slug: Web/API/RenderingContext
+translation_of: Web/API/RenderingContext
+---
+<p>{{APIRef("Canvas API")}}</p>
+
+<p><span class="seoSummary"><strong><code>RenderingContext</code></strong> ist eine WebIDL-<code>typedef</code>, die auf eine beliebige der Schnittstellen verweisen kann, die einen Grafik-Rendering-Kontext innerhalb eines {{HTMLElement("canvas")}} Elements darstellen: {{domxref("CanvasRenderingContext2D")}}, {{domxref("WebGLRenderingContext")}} oder {{domxref("WebGL2RenderingContext")}}.</span></p>
+
+<p>Durch die Verwendung der Kurzform <code>RenderingContext</code> können Methoden und Eigenschaften, die eine beliebige dieser Schnittstellen verwenden können, einfacher spezifiziert und geschrieben werden; da <code>&lt;canvas&gt;</code> mehrere Rendering-Systeme unterstützt, ist es aus Sicht der Spezifikation und der Browser-Implementierung hilfreich, eine Kurzform zu verwenden, die "eine dieser Schnittstellen" bedeutet.</p>
+
+<p>Als solches ist <code>RenderingContext</code> ein Implementierungsdetail und nicht etwas, das Webentwickler direkt verwenden. Es gibt keine <code>RenderingContext</code>-Schnittstelle, und es gibt keine Objekte, die den Typ <code>RenderingContext</code> implementieren.</p>
+
+<p>Die primäre Verwendung dieses Typs ist die Definition der {{domxref("HTMLCanvasElement.getContext()")}} Methode des <code>&lt;canvas&gt;</code>-Elements, die einen <code>RenderingContext</code> (d.h. einen beliebigen der Rendering-Kontext Typen) zurückgibt.</p>
+
+<h2 id="Spezifikationen"><span class="tlid-translation translation" lang="de"><span title="">Spezifikationen</span></span></h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col"><span class="tlid-translation translation" lang="de"><span title="">Spezifikationen</span></span></th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#renderingcontext", "RenderingContext")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Erstdefinition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Die Rendering-Kontext-Schnittstellen:<br>
+  {{domxref("CanvasRenderingContext2D")}}, {{domxref("WebGLRenderingContext")}}, und {{domxref("WebGL2RenderingContext")}}</li>
+ <li><a href="/de/docs/Web/Guide/Graphics">Grafiken im Internet</a></li>
+ <li><a href="/de/docs/Web/API/Canvas_API">Canvas API</a> und {{HTMLElement("canvas")}}</li>
+ <li><a href="/de/docs/Web/API/WebGL_API">WebGL</a></li>
+</ul>
diff --git a/files/de/web/api/response/index.html b/files/de/web/api/response/index.html
new file mode 100644
index 0000000000..ee370f462e
--- /dev/null
+++ b/files/de/web/api/response/index.html
@@ -0,0 +1,120 @@
+---
+title: Response
+slug: Web/API/Response
+translation_of: Web/API/Response
+---
+<div>{{APIRef("Fetch API")}}</div>
+
+<p>Die <strong><code>Response</code></strong> Schnittstelle der <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> stellt die Antwort auf eine Anfrage dar.</p>
+
+<p>Sie können ein neues <code>Response</code>-Objekt mithilfe des Konstruktors {{domxref("Response.Response()")}} erstellen. Es ist jedoch wahrscheinlicher, dass Sie ein Response-Objekt als Rückgabewert einer API Operation erhalten, z. B. durch einen Service Worker {{domxref("Fetchevent.respondWith")}} oder ein simples {{domxref("GlobalFetch.fetch()")}}.</p>
+
+<h2 id="Konstruktor">Konstruktor</h2>
+
+<dl>
+ <dt>{{domxref("Response.Response","Response()")}}</dt>
+ <dd>Erstell ein neues <code>Response</code> Objekt.</dd>
+</dl>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt>{{domxref("Response.headers")}} {{readonlyinline}}</dt>
+ <dd>Enthält das {{domxref("Headers")}} Objekt der Antwort.</dd>
+ <dt>{{domxref("Response.ok")}} {{readonlyinline}}</dt>
+ <dd>Enthält einen boolschen Wert, ob die anfrage Erfolgreich war (Status im Bereich von 200-299) oder nicht.</dd>
+ <dt>{{domxref("Response.redirected")}} {{ReadOnlyInline}}</dt>
+ <dd>Gibt an, ob die Antwort das Ergebnis einer Weiterleitung ist, d. h. die URL-Liste enthält mehrere Einträge.</dd>
+ <dt>{{domxref("Response.status")}} {{readonlyinline}}</dt>
+ <dd>Enthält den Status-Code der Antwort (z. B. <code>200</code> bei Erfolg).</dd>
+ <dt>{{domxref("Response.statusText")}} {{readonlyinline}}</dt>
+ <dd>Enthält die Statusmeldung, die dem Statuscode entspricht (z. B. <code>OK</code> für <code>200</code>).</dd>
+ <dt>{{domxref("Response.type")}} {{readonlyinline}}</dt>
+ <dd>Enthält den Typ der Antwort (z. B. <code>basic</code>, <code>cors</code>).</dd>
+ <dt>{{domxref("Response.url")}} {{readonlyinline}}</dt>
+ <dd>Enthält die URL der Antwort.</dd>
+ <dt>{{domxref("Response.useFinalURL")}}</dt>
+ <dd>Enthält einen booleschen Wert, der angibt, ob dies die endgültige URL der Antwort ist.</dd>
+</dl>
+
+<p><code>Response</code> implementiert {{domxref("Body")}}, daher stehen darüber hinaus auch folgende Eigenschaften zur Verfügung:</p>
+
+<dl>
+ <dt>{{domxref("Body.body")}} {{readonlyInline}}</dt>
+ <dd>Ein einfacher Getter, der verwendet wird, um einen {{domxref("ReadableStream")}} des Body-Inhalts verfügbar zu machen.</dd>
+ <dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt>
+ <dd>Speichert einen {{domxref("Boolean")}}, der angibt, ob der Body bereits in einer Antwort verwendet wurde.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<dl>
+ <dt>{{domxref("Response.clone()")}}</dt>
+ <dd>Klont <code>Response</code> Objekt.</dd>
+ <dt>{{domxref("Response.error()")}}</dt>
+ <dd>Gibt ein neues <code>Response</code> Objekt zurück, das einem Netzwerkfehler zugeordnet ist.</dd>
+ <dt>{{domxref("Response.redirect()")}}</dt>
+ <dd>Erstellt eine neue Antwort mit einer anderen URL.</dd>
+</dl>
+
+<p><code>Response</code> implementiert {{domxref("Body")}}, daher stehen darüber hinaus auch folgende Methoden zur Verfügung:</p>
+
+<dl>
+ <dt>{{domxref("Body.arrayBuffer()")}}</dt>
+ <dd>Nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Gibt ein Promise zurück, welches in einen {{domxref("ArrayBuffer")}} aufgelöst wird.</dd>
+ <dt>{{domxref("Body.blob()")}}</dt>
+ <dd>Nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Gibt ein Promise zurück, welches in einen {{domxref("Blob")}} aufgelöst wird.</dd>
+ <dt>{{domxref("Body.formData()")}}</dt>
+ <dd>Nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Gibt ein Promise zurück, welches in einen {{domxref("FormData")}} Objekt aufgelöst wird.</dd>
+ <dt>{{domxref("Body.json()")}}</dt>
+ <dd>Nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Gibt ein Promise zurück, welches den Inhalt des Body als {{jsxref("JSON")}} einliest.</dd>
+ <dt>{{domxref("Body.text()")}}</dt>
+ <dd>Nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Gibt ein Promise zurück, welches in einen {{domxref("USVString")}} (Text) aufgelöst wird.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>In unserem <a href="https://github.com/mdn/fetch-examples/tree/master/basic-fetch">grundlegenden Beispiel zu Fetch</a> (<a href="https://mdn.github.io/fetch-examples/basic-fetch/">Beispiel live ausführen</a>) verwenden wir einen einfachen Aufruf von <code>fetch()</code>, um ein Bild abzurufen und es in einem {{htmlelement("img")}} Tag anzuzeigen. Der Aufruf von <code>fetch()</code> gibt ein Promise zurück, das zu einem Response Objekt aufgelöst wird, welches mit der Anforderung der Ressource verknüpft ist. Da wir ein Bild anfordern, werden Sie feststellen, dass wir {{domxref("Body.blob")}} ausführen müssen ({{domxref("Response")}} implementiert <code>Body</code>), um der Antwort den richtigen MIME-Type zuzuordnen.</p>
+
+<pre class="brush: js">const image = document.querySelector('.my-image');
+fetch('flowers.jpg').then(function(response) {
+  return response.blob();
+}).then(function(blob) {
+  const objectURL = URL.createObjectURL(blob);
+  image.src = objectURL;
+});</pre>
+
+<p>Sie können auch den {{domxref("Response.Response()")}} Konstruktor verwenden, um Ihr eigenes benutzerdefiniertes <code>Response</code> Objekt zu erstellen:</p>
+
+<pre class="brush: js">const response = new Response();</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#response-class','Response')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("api.Response")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/de/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/de/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/de/web/api/response/response/index.html b/files/de/web/api/response/response/index.html
new file mode 100644
index 0000000000..53f3eff566
--- /dev/null
+++ b/files/de/web/api/response/response/index.html
@@ -0,0 +1,75 @@
+---
+title: Response()
+slug: Web/API/Response/Response
+translation_of: Web/API/Response/Response
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>Der <code><strong>Response()</strong></code> Konstruktor erstellt ein neues {{domxref("Response")}} Objekt.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <var>myResponse</var> = new Response(<var>body</var>, <var>init</var>);</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>body</code> {{optional_inline}}</dt>
+ <dd>Ein Objekt, welches den Body für eine Antwort definiert. Das kann entweder <code>null</code> oder eins der folgenden sein:
+ <ul>
+  <li>{{domxref("Blob")}}</li>
+  <li>{{domxref("BufferSource")}}</li>
+  <li>{{domxref("FormData")}}</li>
+  <li>{{domxref("ReadableStream")}}</li>
+  <li>{{domxref("URLSearchParams")}}</li>
+  <li>{{domxref("USVString")}}</li>
+ </ul>
+ </dd>
+ <dt><code>init</code> {{optional_inline}}</dt>
+ <dd>Ein Objekt mit Optionen, welches benutzerdefinierte Einstellungen enthält, die auf die Antwort angewendet werden sollen. Mögliche Optionen sind:
+ <ul>
+  <li><code>status</code>: Der Statuscode der Antwort, z. B. <code>200</code>.</li>
+  <li><code>statusText</code>: Die Statusnachricht die dem Statuscode zugeordnet ist, z. B. <code>OK</code>.</li>
+  <li><code>headers</code>: Etwaige Header die Sie Ihrer Antwort hinzufügen wollen, die einem {{domxref("Headers")}} Objekt or einem Objekt-Literal von {{domxref("ByteString")}} Schlüsselwertpaaren enthalten sind (siehe <a href="/de/docs/Web/HTTP/Headers">HTTP Header</a> für Referenzen).</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>In unserem <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-request">Beispiel für eine Fetch Antwort</a> (<a href="http://mdn.github.io/fetch-examples/fetch-request/">live ausführen</a>) erstellen wir ein neues <code>Response</code> Objekt mit dem Konstruktor, dem wir einen neuen {{domxref("Blob")}} als Body und ein <code>init</code> Objekt übergeben, welches einen benutzerdefinierten <code>status</code> und <code>statusText</code> enthält:</p>
+
+<pre class="brush: js">var myBlob = new Blob();
+var init = { "status" : 200 , "statusText" : "SuperSmashingGreat!" };
+var myResponse = new Response(myBlob,init);</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-response','Response()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Initiale Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("api.Response.Response")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/de/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/de/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/de/web/api/rtcicecandidate/index.html b/files/de/web/api/rtcicecandidate/index.html
new file mode 100644
index 0000000000..4479c64bb6
--- /dev/null
+++ b/files/de/web/api/rtcicecandidate/index.html
@@ -0,0 +1,121 @@
+---
+title: RTCIceCandidate
+slug: Web/API/RTCIceCandidate
+translation_of: Web/API/RTCIceCandidate
+---
+<p>{{APIRef("WebRTC")}}{{SeeCompatTable}}{{draft}}</p>
+
+<p>Das <strong><code>RTCIceCandidate</code></strong> Interface der <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a> repräsentiert einen Kandidaten für einen Internet Connectivity Establishment (ICE) Server, welcher eine {{domxref("RTCPeerConnection")}} herstellt.</p>
+
+<h2 id="Konstruktoren">Konstruktoren</h2>
+
+<dl>
+ <dt>{{domxref("RTCIceCandidate.RTCIceCandidate()","RTCIceCandidate()")}}</dt>
+ <dd>Erstellt ein <code>RTCIceCandidate</code> Objekt.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("RTCIceCandidate.candidate")}} {{readonlyInline}}</dt>
+ <dd>Ein {{domxref("DOMString")}}, der die Transportadresse für den Kadidaten repräsentiert, welche zur Konnektivitätsprüfung verwendet werden kann. Das Format der Adresse ist ein <code>candidate-attribute</code>, wie in {{RFC(5245)}} definiert. Dieser String ist leer (<code>""</code>), wenn der <code>RTCIceCandidate</code> einen "end of candidates" Indikator repräsentiert.</dd>
+ <dt>{{domxref("RTCIceCandidate.foundation")}} {{readonlyInline}}</dt>
+ <dd>Gibt einen eindeutigen Identifikator zurück, der es dem ICE erlaubt, Kandidaten, die in mehreren {{domxref("RTCIceTransport")}} Objekten vorhanden sind, in Beziehung zu setzen.</dd>
+ <dt>{{domxref("RTCIceCandidate.ip")}} {{readonlyInline}}</dt>
+ <dd>Gibt die IP-Adresse des Kandidaten zurück.</dd>
+ <dt>{{domxref("RTCIceCandidate.port")}} {{readonlyInline}}</dt>
+ <dd>Gibt den Port des Kandidaten zurück.</dd>
+ <dt>{{domxref("RTCIceCandidate.priority")}} {{readonlyInline}}</dt>
+ <dd>Gibt die zugewiesene Priorität des Kandidaten zurück.</dd>
+ <dt>{{domxref("RTCIceCandidate.protocol")}} {{readonlyInline}}</dt>
+ <dd>Gibt das vom Kandidaten verwendete Protokoll zurück, entweder TCP oder UDP.</dd>
+ <dt>{{domxref("RTCIceCandidate.relatedAddress")}} {{readonlyInline}}</dt>
+ <dd>Für einen Kandidaten, welcher von einem anderen abgeleitet ist, wie etwa ein Relay- oder Reflexivkandidat, ist <dfn><code>relatedAddress</code></dfn> die IP-Adresse des Kandidaten, von dem er abgeleitet ist. Für Hostkandidaten ist sie <code>null</code>.</dd>
+ <dt>{{domxref("RTCIceCandidate.relatedPort")}} {{readonlyInline}}</dt>
+ <dd>Für einen Kandidaten, welcher von einem anderen abgeleitet ist, wie etwa ein Relay- oder Reflexivkandidat, ist <dfn><code>relatedPort</code></dfn> der Port des Kandidaten, von dem er abgeleitet ist. Für Hostkandidaten ist er <code>null</code>.</dd>
+ <dt>{{domxref("RTCIceCandidate.sdpMid")}} {{readonlyInline}}</dt>
+ <dd>Enthält, wenn nicht <code>null</code>, den Identifikator der "media stream identification" (wei definiert in <cite><a href="https://tools.ietf.org/html/rfc5888">RFC 5888</a>) für die Medienkomponente, zu der dieser Kandidat zugeordnet ist.</cite></dd>
+ <dt>{{domxref("RTCIceCandidate.sdpMLineIndex")}} {{readonlyInline}}</dt>
+ <dd>Enthält, wenn nicht <code>null</code>, den Index (beginnend bei 0) der Medienbeschreibung (wie definiert in <a href="https://tools.ietf.org/html/rfc4566">RFC 4566</a>) im SDP, dem dieser Kandidat zugeordnet ist.</dd>
+ <dt>{{domxref("RTCIceCandidate.tcpType")}} {{readonlyInline}}</dt>
+ <dd>Wenn <code>protocol</code> den Wert <code>tcp</code> enthält, dann repräsentiert <code>tcpType</code> den Typ des TCP Kandidats. Ansonsten enthält <code>tcpType</code> den Wert <code>null</code>.</dd>
+ <dt>{{domxref("RTCIceCandidate.type")}} {{readonlyInline}}</dt>
+ <dd>Einer aus <code>host</code>, <code>srflx</code>, <code>prflx</code>, oder <code>relay</code>.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebRTC 1.0', '#rtcicecandidate-interface', 'RTCIceCandidate')}}</td>
+   <td>{{Spec2('WebRTC 1.0')}}</td>
+   <td>Initiale definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(22)}}</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/de/web/api/rtcpeerconnection/index.html b/files/de/web/api/rtcpeerconnection/index.html
new file mode 100644
index 0000000000..df67ef624c
--- /dev/null
+++ b/files/de/web/api/rtcpeerconnection/index.html
@@ -0,0 +1,379 @@
+---
+title: RTCPeerConnection
+slug: Web/API/RTCPeerConnection
+translation_of: Web/API/RTCPeerConnection
+---
+<p>{{APIRef}}{{SeeCompatTable}}</p>
+
+<p>The <strong><code>RTCPeerConnection</code></strong> interface represents a WebRTC connection between the local computer and a remote peer. It is used to handle efficient streaming of data between the two peers.</p>
+
+<div class="note">
+<p><strong>Note:</strong> <code>RTCPeerConnection</code> and {{domxref("RTCSessionDescription")}} are currently prefixed in most browsers, and the {{domxref("navigator.getUserMedia()")}} method is prefixed in many versions of some browsers; you should use code like the following to access these:</p>
+
+<pre class="brush: js">var peerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection ||
+                       window.webkitRTCPeerConnection || window.msRTCPeerConnection;
+var sessionDescription = window.RTCSessionDescription || window.mozRTCSessionDescription ||
+                       window.webkitRTCSessionDescription || window.msRTCSessionDescription;
+
+navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia ||
+                       navigator.webkitGetUserMedia || navigator.msGetUserMedia;
+</pre>
+
+<p>Simple code such as this is all it takes to ensure that your project will work on as many versions of as many browsers as possible.</p>
+</div>
+
+<h2 id="Basic_usage">Basic usage</h2>
+
+<p>Basic <code>RTCPeerConnection</code> usage involves negotiating a connection between your local machine and a remote one by generating <a href="http://en.wikipedia.org/wiki/Session_Description_Protocol">Session Description Protocol</a> to exchange between the two. The caller starts the process by sending an offer to the remote machine, which responds by either accepting or rejecting the call.</p>
+
+<p>Both parties (the caller and the called party) need to set up their own <code>RTCPeerConnection</code> instances to represent their end of the peer-to-peer connection:</p>
+
+<pre class="brush: js">var pc = new RTCPeerConnection();
+pc.onaddstream = function(obj) {
+  var vid = document.createElement("video");
+  document.appendChild(vid);
+  vid.srcObject = obj.stream;
+}
+
+// Helper functions
+function endCall() {
+  var videos = document.getElementsByTagName("video");
+  for (var i = 0; i &lt; videos.length; i++) {
+    videos[i].pause();
+  }
+
+  pc.<a href="#close()">close</a>();
+}
+
+function error(err) {
+  endCall();
+}
+</pre>
+
+<h3 id="Initializing_the_call">Initializing the call</h3>
+
+<p>If you are the one initiating the call, you would use {{domxref("navigator.getUserMedia()")}} to get a video stream, then add the stream to the <code>RTCPeerConnection</code>. Once that's been done, call {{domxref("RTCPeerConnection.createOffer()")}} to create an offer, configure the offer, then send it to the server through which the connection is being mediated.</p>
+
+<pre class="brush: js">// Get a list of friends from a server
+// User selects a friend to start a peer connection with
+navigator.getUserMedia({video: true}, function(stream) {
+  // Adding a local stream won't trigger the onaddstream callback,
+  // so call it manually.
+  pc.onaddstream({stream: stream});
+  pc.<a href="#addStream()">addStream</a>(stream);
+
+  pc.<a href="#createOffer()">createOffer</a>(function(offer) {
+    pc.<a href="#setLocalDescription()">setLocalDescription</a>(new <span class="nx">RTCSessionDescription</span>(offer), function() {
+      // send the offer to a server to be forwarded to the friend you're calling.
+    }, error);
+  }, error);
+});
+</pre>
+
+<h3 id="Answering_a_call">Answering a call</h3>
+
+<p>On the opposite end, the friend will receive the offer from the server using whatever protocol is being used to do so. Once the offer arrives, {{domxref("navigator.getUserMedia()")}} is once again used to create the stream, which is added to the <code>RTCPeerConnection</code>. An {{domxref("RTCSessionDescription")}} object is created and set up as the remote description by calling {{domxref("RTCPeerConnection.setRemoteDescription()")}}.</p>
+
+<p>Then an answer is created using {{domxref("RTCPeerConnection.createAnswer()")}} and sent back to the server, which forwards it to the caller.</p>
+
+<pre class="brush: js">var offer = getOfferFromFriend();
+navigator.getUserMedia({video: true}, function(stream) {
+  pc.onaddstream({stream: stream});
+  pc.<a href="#addStream()">addStream</a>(stream);
+
+  pc.setRemoteDescription(new <span class="nx">RTCSessionDescription</span>(offer), function() {
+    pc.<a href="#createAnswer()">createAnswer</a>(function(answer) {
+      pc.<a href="#setLocalDescription()">setLocalDescription</a>(new <span class="nx">RTCSessionDescription</span>(answer), function() {
+        // <span style="font-size: 1rem;">send the answer to a server to be forwarded back to the caller (you)</span>
+      }, error);
+    }, error);
+  }, error);
+});
+</pre>
+
+<h3 id="Handling_the_answer">Handling the answer</h3>
+
+<p>Back on the original machine, the response is received. Once that happens, call {{domxref("RTCPeerConnection.setRemoteDescription()")}} to set the response as the remote end of the connection.</p>
+
+<pre class="brush: js">// pc was set up earlier when we made the original offer
+var offer = getResponseFromFriend();
+pc.<a href="#createAnswer()">setRemoteDescription</a>(new <span class="nx">RTCSessionDescription</span>(offer), function() { }, error);
+</pre>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("RTCPeerConnection.RTCPeerConnection", "RTCPeerConnection()")}}</dt>
+ <dd>Constructor; returns a new <code>RTCPeerConnection</code> object.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>This interface inherits properties from its parent interface, {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("RTCPeerConnection.iceConnectionState")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns an enum of type <code>RTCIceConnectionState</code> that describes the ICE connection state for the connection. When this value changes, a {{event("iceconnectionstatechange")}} event is fired on the object.</dd>
+ <dt>{{domxref("RTCPeerConnection.iceGatheringState")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns an enum of type <code>RTCIceGatheringState</code> that describes the ICE gathering state for the connection.</dd>
+ <dt>{{domxref("RTCPeerConnection.localDescription")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns a {{domxref("RTCSessionDescription")}} describing the session for the local end of the connection. If it has not yet been set, it can be <code>null</code>.</dd>
+ <dt>{{domxref("RTCPeerConnection.peerIdentity")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns a <code>RTCIdentityAssertion</code>, that is a couple of a domain name (<code>idp</code>) and a name (<code>name</code>) representing the identity of the remote peer of this connection, once set and verified. If no peer has yet been set and verified, this property will return <code>null</code>. Once set, via the appropriate method, it can't be changed.</dd>
+ <dt>{{domxref("RTCPeerConnection.remoteDescription")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns a {{domxref("RTCSessionDescription")}} describing the session for the remote end of the connection. If it has not yet been set, it can be <code>null</code>.</dd>
+ <dt>{{domxref("RTCPeerConnection.signalingState")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns an enum of type <code>RTCSignalingState</code> that describes the signaling state of the local connection. This state describes the SDP offer, that defines the configuration of the connections like the description of the locally associated objects of type {{domxref("MediaStream")}}, the codec/RTP/RTCP options, the candidates gathered by the ICE Agent. When this value changes, a {{event("signalingstatechange")}} event is fired on the object.</dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<dl>
+ <dt>{{domxref("RTCPeerConnection.onaddstream")}}</dt>
+ <dd>Is the event handler called when the {{event("addstream")}} event is received. Such an event is sent when a {{domxref("MediaStream")}} is added to this connection by the remote peer. The event is sent immediately after the call {{domxref("RTCPeerConnection.setRemoteDescription()")}} and doesn't wait for the result of the SDP negotiation.</dd>
+ <dt>{{domxref("RTCPeerConnection.ondatachannel")}}</dt>
+ <dd>Is the event handler called when the {{event("datachannel")}} event is received. Such an event is sent when a {{domxref("RTCDataChannel")}} is added to this connection.</dd>
+ <dt>{{domxref("RTCPeerConnection.onicecandidate")}}</dt>
+ <dd>Is the event handler called when the {{event("icecandidate")}} event is received. Such an event is sent when a {{domxref("RTCICECandidate")}} object is added to the script.</dd>
+ <dt>{{domxref("RTCPeerConnection.oniceconnectionstatechange")}}</dt>
+ <dd>Is the event handler called when the {{event("iceconnectionstatechange")}} event is received. Such an event is sent when the value of {{domxref("RTCPeerConnection.iceConnectionState", "iceConnectionState")}} changes.</dd>
+ <dt>{{domxref("RTCPeerConnection.onidentityresult")}}</dt>
+ <dd>Is the event handler called when the {{event("identityresult")}} event is received. Such an event is sent when an identity assertion is generated, via {{domxref("RTCPeerConnection.getIdentityAssertion()", "getIdentityAssertion()")}}, or during the creation of an offer or an answer.</dd>
+ <dt>{{domxref("RTCPeerConnection.onidpassertionerror")}}</dt>
+ <dd>Is the event handler called when the {{event("idpassertionerror")}} event is received. Such an event is sent when the associated identity provider (IdP) encounters an error while generating an identity assertion.</dd>
+ <dt>{{domxref("RTCPeerConnection.onidpvalidationerror")}}</dt>
+ <dd>Is the event handler alled when the {{event("idpvalidationerror")}} event is received. Such an event is sent when the associated identity provider (IdP) encounters an error while validating an identity assertion.</dd>
+ <dt>{{domxref("RTCPeerConnection.onnegotiationneeded")}}</dt>
+ <dd>Is the event handler called when the {{event("negotiationneeded")}} event, sent by the browser to inform that negotiation will be required at some point in the future, is received.</dd>
+ <dt>{{domxref("RTCPeerConnection.onpeeridentity")}}</dt>
+ <dd>Is the event handler called when the {{event("peeridentity")}} event, sent when a peer identity has been set and verified on this connection, is received.</dd>
+ <dt>{{domxref("RTCPeerConnection.onremovestream")}}</dt>
+ <dd>Is the event handler called when the {{event("removestream")}} event, sent when a {{domxref("MediaStream")}} is removed from this connection, is received.</dd>
+ <dt>{{domxref("RTCPeerConnection.onsignalingstatechange")}}</dt>
+ <dd>Is the event handler called when the {{event("signalingstatechange")}} event, sent when the value of {{domxref("RTCPeerConnection.signalingState", "signalingState")}} changes, is received.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("RTCPeerConnection.addIceCandidate()")}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("RTCPeerConnection.addStream()")}}</dt>
+ <dd>Adds a {{domxref("MediaStream")}} as a local source of audio or video. If the negotiation already happened, a new one will be needed for the remote peer to be able to use it.</dd>
+ <dt>{{domxref("RTCPeerConnection.close()")}}</dt>
+ <dd>Abruptly closes a connection.</dd>
+ <dt>{{domxref("RTCPeerConnection.createAnswer()")}}</dt>
+ <dd>Creates an answer to the offer received by the remote peer, in a two-part offer/answer negotiation of a connection. The two first parameters are respectively success and error callbacks, the optional third one represent options for the answer to be created.</dd>
+ <dt>{{domxref("RTCPeerConnection.createDataChannel()")}}</dt>
+ <dd>Creates a new {{domxref("RTCDataChannel")}} associated with this connection. The method takes a dictionary as parameter, with the configuration required for the underlying data channel, like its reliability.</dd>
+ <dt>{{domxref("RTCPeerConnection.createDTMFSender()")}}</dt>
+ <dd>Creates a new {{domxref("RTCDTMFSender")}}, associated to a specific {{domxref("MediaStreamTrack")}}, that will be able to send {{Glossary("DTMF")}} phone signaling over the connection.</dd>
+ <dt>{{domxref("RTCPeerConnection.createOffer()")}}</dt>
+ <dd>Creates a request to find a remote peer with a specific configuration. </dd>
+ <dt>{{domxref("RTCPeerConnection.generateCertificate()")}}</dt>
+ <dd>Creates and stores an X.509 certificate and corresponding private key then returns an {{domxref("RTCCertificate")}}, providing access to it.</dd>
+ <dt>{{domxref("RTCPeerConnection.getConfiguration()")}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("RTCPeerConnection.getIdentityAssertion()")}}</dt>
+ <dd>Initiates the gathering of an identity assertion. This has an effect only if the {{domxref("RTCPeerConnection.signalingState", "signalingState")}} is not <code>"closed"</code>. It is not expected for the application dealing with the <code>RTCPeerConnection</code>: this is automatically done; an explicit call only allows to anticipate the need.</dd>
+ <dt>{{domxref("RTCPeerConnection.getLocalStreams()")}}</dt>
+ <dd>Returns an array of {{domxref("MediaStream")}} associated with the local end of the connection. The array may be empty.</dd>
+ <dt>{{domxref("RTCPeerConnection.getRemoteStreams()")}}</dt>
+ <dd>Returns an array of {{domxref("MediaStream")}} associated with the remote end of the connection. The array may be empty.</dd>
+ <dt>{{domxref("RTCPeerConnection.getStats()")}}</dt>
+ <dd>Creates a new {{domxref("RTCStatsReport")}} that contains and allows access to statistics regarding the connection.</dd>
+ <dt>{{domxref("RTCPeerConnection.getStreamById()")}}</dt>
+ <dd>Returns the {{domxref("MediaStream")}} with the given id that is associated with local or remote end of the connection. If no stream matches, it returns <code>null</code>.</dd>
+ <dt>{{domxref("RTCPeerConnection.removeStream()")}}</dt>
+ <dd>Removes a {{domxref("MediaStream")}} as a local source of audio or video. If the negotiation already happened, a new one will be needed for the remote peer to stop using it.</dd>
+ <dt>{{domxref("RTCPeerConnection.setIdentityProvider()")}}</dt>
+ <dd>Sets the Identity Provider (IdP) to the triplet given in parameter: its name, the protocol used to communicate with it (optional) and an optional username. The IdP will be used only when an assertion will be needed.</dd>
+ <dt>{{domxref("RTCPeerConnection.setLocalDescription()")}}</dt>
+ <dd>Changes the local description associated with the connection. The description defines the properties of the connection like its codec. The connection is affected by this change and must be able to support both old and new descriptions. The method takes three parameters, a {{domxref("RTCSessionDescription")}} object to set, and two callbacks, one called if the change of description succeeds, another called if it failed.</dd>
+ <dt>{{domxref("RTCPeerConnection.setRemoteDescription()")}}</dt>
+ <dd>Changes the remote description associated with the connection. The description defines the properties of the connection like its codec. The connection is affected by this change and must be able to support both old and new descriptions. The method takes three parameters, a {{domxref("RTCSessionDescription")}} object to set, and two callbacks, one called if the change of description succeeds, another called if it failed.</dd>
+ <dt>{{domxref("RTCPeerConnection.updateIce()")}}</dt>
+ <dd> </dd>
+</dl>
+
+<h3 id="Constructor_2">Constructor</h3>
+
+<pre>new RTCPeerConnection({{domxref("RTCConfiguration")}} configuration, optional {{domxref("MediaConstraints")}} constraints);</pre>
+
+<div class="note">
+<p><strong>Note:</strong> While the PeerConnection specification reads like passing an RTCConfiguration object is required, Firefox will supply a default if you don't.</p>
+</div>
+
+<h2 id="Methods_2">Methods</h2>
+
+<h3 id="createOffer">createOffer</h3>
+
+<p><code>void createOffer({{domxref("RTCSessionDescriptionCallback")}} successCallback, {{domxref("RTCPeerConnectionErrorCallback")}} failureCallback, optional {{domxref("MediaConstraints")}} constraints);</code></p>
+
+<p>Create offer generates a blob of description data to facilitate a PeerConnection to the local machine. Use this when you've got a remote Peer connection and you want to set up the local one.</p>
+
+<h4 id="Example">Example</h4>
+
+<pre class="prettyprint">var pc = new PeerConnection();
+pc.addStream(video);
+pc.createOffer(function(desc){
+  pc.setLocalDescription(desc, function() {
+    // send the offer to a server that can negotiate with a remote client
+  });
+}</pre>
+
+<h4 id="Arguments">Arguments</h4>
+
+<dl>
+ <dt>successCallback</dt>
+ <dd>An {{domxref("RTCSessionDescriptionCallback")}} which will be passed a single {{domxref("RTCSessionDescription")}} object</dd>
+ <dt>errorCallback</dt>
+ <dd>An {{domxref("RTCPeerConnectionErrorCallback")}} which will be passed a single {{domxref("DOMError")}} object</dd>
+ <dt>[optional] constraints</dt>
+ <dd>An optional {{domxref("MediaConstraints")}} object.</dd>
+</dl>
+
+<h3 id="createAnswer">createAnswer</h3>
+
+<p><code>void createAnswer({{domxref("RTCSessionDescriptionCallback")}} successCallback, {{domxref("RTCPeerConnectionErrorCallback")}} failureCallback, optional {{domxref("MediaConstraints")}} constraints)")</code></p>
+
+<p>Respond to an offer sent from a remote connection.</p>
+
+<h4 id="Example_2">Example</h4>
+
+<pre class="line">var pc = new PeerConnection();
+pc.setRemoteDescription(new RTCSessionDescription(offer), function() {
+  pc.createAnswer(function(answer) {
+    pc.setLocalDescription(answer, function() {
+      // send the answer to the remote connection
+    })
+  })
+});</pre>
+
+<h4 id="Arguments_2">Arguments</h4>
+
+<dl>
+ <dt>successCallback</dt>
+ <dd>An {{domxref("RTCSessionDescriptionCallback")}} which will be passed a single {{domxref("RTCSessionDescription")}} object</dd>
+ <dt>errorCallback</dt>
+ <dd>An {{domxref("RTCPeerConnectionErrorCallback")}} which will be passed a single {{domxref("DOMError")}} object</dd>
+ <dt>[optional] constraints</dt>
+ <dd>An optional {{domxref("MediaConstraints")}} object.</dd>
+</dl>
+
+<h3 id="updateIce()">updateIce()</h3>
+
+<p>updateIce(optional {{domxref("RTCConfiguration")}} configuration, optional {{domxref("MediaConstraints")}} constraints)</p>
+
+<p>The updateIce method updates the ICE Agent process of gathering local candidates and pinging remote candidates. If there is a mandatory constraint called "IceTransports" it will control how the ICE engine can act. This can be used to limit the use to TURN candidates by a callee to avoid leaking location information prior to the call being accepted. This call may result in a change to the state of the ICE Agent, and may result in a change to media state if it results in connectivity being established.</p>
+
+<h4 id="Example_3">Example</h4>
+
+<pre> </pre>
+
+<h3 id="addIceCandidate()">addIceCandidate()</h3>
+
+<p>addIceCandidate ({{domxref("RTCIceCandidate")}} candidate, {{domxref("Function")}} successCallback, {{domxref("RTCPeerConnectionErrorCallback")}} failureCallback);</p>
+
+<p>The addIceCandidate() method provides a remote candidate to the ICE Agent. In addition to being added to the remote description, connectivity checks will be sent to the new candidates as long as the "IceTransports" constraint is not set to "none". This call will result in a change to the connection state of the ICE Agent, and may result in a change to media state if it results in different connectivity being established.</p>
+
+<h4 id="Example_4">Example</h4>
+
+<pre>  pc.addIceCandidate(new RTCIceCandidate(candidate));
+</pre>
+
+<h3 id="createDataChannel">createDataChannel</h3>
+
+<p><code>{{domxref("RTCDataChannel")}} createDataChannel ({{domxref("DOMString")}} label, optional {{domxref("RTCDataChannelInit")}} dataChannelDict);</code></p>
+
+<p>Creates a data channel for sending non video or audio data across the peer connection</p>
+
+<h4 id="Example_5">Example</h4>
+
+<pre class="brush: js">var pc = new PeerConnection();
+var channel = pc.createDataChannel("Mydata");
+channel.onopen = function(event) {
+  <code>channel.send('sending a message');</code>
+}
+channel.onmessage = function(event) { console.log(event.data); }</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebRTC 1.0')}}</td>
+   <td>{{Spec2('WebRTC 1.0')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://github.com/jesup/nightly-gupshup/blob/master/static/js/chat.js">https://github.com/jesup/nightly-gupshup/blob/master/static/js/chat.js</a></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/webrtc/basics/#toc-simple">http://www.html5rocks.com/en/tutorials/webrtc/basics/#toc-simple</a></li>
+ <li><a href="http://dev.w3.org/2011/webrtc/editor/webrtc.html">http://dev.w3.org/2011/webrtc/editor/webrtc.html</a></li>
+</ul>
diff --git a/files/de/web/api/rtcrtptransceiver/direction/index.html b/files/de/web/api/rtcrtptransceiver/direction/index.html
new file mode 100644
index 0000000000..644e007d52
--- /dev/null
+++ b/files/de/web/api/rtcrtptransceiver/direction/index.html
@@ -0,0 +1,82 @@
+---
+title: RTCRtpTransceiver.direction
+slug: Web/API/RTCRtpTransceiver/direction
+tags:
+  - API
+  - Attribut
+  - RTCRtpTransceiver
+  - RTP
+  - Richtung
+  - Transceiver
+  - Transceiver Richtung
+  - WebRTC
+  - direction
+translation_of: Web/API/RTCRtpTransceiver/direction
+---
+<div>{{APIRef("WebRTC")}}</div>
+
+<p><span class="seoSummary">Das {{domxref("RTCRtpTransceiver")}} <code><strong>direction</strong></code> Attribut gibt als String die bevorzugte Transceiver-Richtung an. Es muss sich hierbei um einen Wert des</span> {{domxref("RTCRtpTransceiverDirection")}} Enum handeln.</p>
+
+<p>Die tatsächliche, aktuelle Richtung des Transceivers kann über das {{domxref("RTCRtpTransceiver.currentDirection", "currentDirection")}} Attribut abgelesen werden.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>direction</em> = <em>RTCRtpTransceiver</em>.direction</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>Ein {{domxref("DOMString")}}, dessen Wert einem Wert des <code>RTCRtpTransceiverDirection</code> Enum / Aufzählungstypen entspricht und die bevorzugte Transceiver-Richtung angibt. {{page("/en-US/docs/Web/API/RTCRtpTransceiverDirection", "Values")}}</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Wird der <code>direction</code> Wert eines Transceivers gesetzt, können folgende Fehler auftreten:</p>
+
+<dl>
+ <dt><code>InvalidStateError</code></dt>
+ <dd>Der Receiver des Transceivers {{domxref("RTCPeerConnection")}} wurde bereits geschlossen und befindet sich nun im <code>closed</code> Zustand oder der {{domxref("RTCRtpReceiver")}} wurde gestoppt und befinet sich im <code>stopped</code> Zustand.</dd>
+</dl>
+
+<h2 id="Hinweise_zur_Nutzung">Hinweise zur Nutzung</h2>
+
+<h3 id="Ändern_der_Übertragungsrichtung">Ändern der Übertragungsrichtung</h3>
+
+<p>Wird der Wert des <code>direction</code> Attributes geändert, wird eine <code>InvalidStateError</code> Ausnahme geworfen, insofern die RTCPeerConnection bereits geschlossen wurde oder aber der jeweils betroffene Receiver oder Sender bereits gestoppt wurde.</p>
+
+<p>Wenn der neu gesetzte Wert für <code>direction</code> sich vom aktuellen Wert unterscheidet, muss die Übertragung mit dem Peer neu verhandelt werden, es wird also ein {{event("negotiationneeded")}} Event auf der {{domxref("RTCPeerConnection")}} ausgelöst.</p>
+
+<h3 id="Transceiver-Richtung_in_SDP">Transceiver-Richtung in SDP</h3>
+
+<p>Der <code>direction</code> Wert wird von {{domxref("RTCPeerConnection.createOffer()")}} bzw. {{domxref("RTCPeerConnection.createAnswer()")}} genutzt, um die entsprechenden SDP-Nachrichten zu generieren. SDP stellt die Richtung über eine Attribut-Zeile (a-line) dar. Wenn die Richtung des Transceivers als <code>"sendrecv"</code> definiert wurde, so enthält die hierzu erzeugte SDP-Nachricht folgende Attribut-Zeile:</p>
+
+<pre>a=sendrecv</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("WebRTC 1.0", "#dom-rtcrtptransceiver-direction", "RTCRtpTransceiver.direction")}}</td>
+   <td>{{Spec2("WebRTC 1.0")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.RTCRtpTransceiver.direction")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("RTCRtpTransceiver.currentDirection")}}</li>
+</ul>
diff --git a/files/de/web/api/rtcrtptransceiver/index.html b/files/de/web/api/rtcrtptransceiver/index.html
new file mode 100644
index 0000000000..0bf844cf0f
--- /dev/null
+++ b/files/de/web/api/rtcrtptransceiver/index.html
@@ -0,0 +1,85 @@
+---
+title: RTCRtpTransceiver
+slug: Web/API/RTCRtpTransceiver
+tags:
+  - API
+  - Interface
+  - Media
+  - MediaStreamTrack
+  - NeedsTranslation
+  - RTCRtpTransceiver
+  - RTP
+  - Reference
+  - SDP
+  - TopicStub
+  - Transceiver
+  - WebRTC
+translation_of: Web/API/RTCRtpTransceiver
+---
+<div>{{APIRef("WebRTC")}}</div>
+
+<p><span class="seoSummary">The WebRTC interface <strong><code>RTCRtpTransceiver</code></strong> describes a permanent pairing of an {{domxref("RTCRtpSender")}} and an {{domxref("RTCRtpReceiver")}}, along with some shared state.</span></p>
+
+<p>Each {{Glossary("SDP")}} media section describes one bidirectional SRTP ("Secure Real Time Protocol") stream (excepting the media section for {{domxref("RTCDataChannel")}}, if present). This pairing of send and receive SRTP streams is significant for some applications, so <code>RTCRtpTransceiver</code> is used to represent this pairing, along with other important state from the media section. Each non-disabled SRTP media section is always represented by exactly one transceiver.</p>
+
+<p>A transceiver is uniquely identified using its {{domxref("RTCRtpTransceiver.mid", "mid")}} property, which is the same as the media ID (<code>mid</code>) of its corresponding m-line. An <code>RTCRtpTransceiver</code> is <strong>associated</strong> with an m-line if its <code>mid</code> is non-null; otherwise it's considered disassociated.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("RTCRtpTransceiver.currentDirection", "currentDirection")}} {{ReadOnlyInline}}</dt>
+ <dd>A string from the enum {{domxref("RTCRtpTransceiverDirection")}} which indicates the transceiver's current directionality, or <code>null</code> if the transceiver is stopped or has never participated in an exchange of offers and answers.</dd>
+ <dt>{{domxref("RTCRtpTransceiver.direction", "direction")}}</dt>
+ <dd>A string from the enum {{domxref("RTCRtpTransceiverDirection")}} which is used to set the transceiver's desired direction.</dd>
+ <dt>{{domxref("RTCRtpTransceiver.mid", "mid")}} {{ReadOnlyInline}}</dt>
+ <dd>The media ID of the m-line associated with this transceiver. This association is established, when possible, whenever either a local or remote description is applied. This field is <code>null</code> if neither a local or remote description has been applied, or if its associated m-line is rejected by either a remote offer or any answer.</dd>
+ <dt>{{domxref("RTCRtpTransceiver.receiver", "receiver")}} {{ReadOnlyInline}}</dt>
+ <dd>The {{domxref("RTCRtpReceiver")}} object that handles receiving and decoding incoming media.</dd>
+ <dt>{{domxref("RTCRtpTransceiver.sender", "sender")}} {{ReadOnlyInline}}</dt>
+ <dd>The {{domxref("RTCRtpSender")}} object responsible for encoding and sending data to the remote peer.</dd>
+ <dt>{{domxref("RTCRtpTransceiver.stopped", "stopped")}}</dt>
+ <dd>Indicates whether or not sending and receiving using the paired <code>RTCRtpSender</code> and <code>RTCRtpReceiver</code> has been permanently disabled, either due to SDP offer/answer, or due to a call to {{domxref("RTCRtpTransceiver.stop", "stop()")}}.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("RTCRtpTransceiver.setCodecPreferences", "setCodecPreferences()")}}</dt>
+ <dd>A list of {{domxref("RTCRtpCodecParameters")}} objects which override the default preferences used by the {{Glossary("user agent")}} for the transceiver's codecs.</dd>
+ <dt>{{domxref("RTCRtpTransceiver.stop", "stop()")}}</dt>
+ <dd>Permanently stops the <code>RTCRtpTransceiver</code>. The associated sender stops sending data, and the associated receiver likewise stops receiving and decoding incoming data.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("WebRTC 1.0", "#rtcrtptransceiver-interface", "RTCRtpTransceiver")}}</td>
+   <td>{{Spec2("WebRTC 1.0")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.RTCRtpTransceiver")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a></li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Intro_to_RTP">Introduction to the Real-time Transport Protocol (RTP)</a></li>
+ <li>{{domxref("RTCPeerConnection.addTrack()")}} and {{domxref("RTCPeerConnection.addTransceiver()")}} both create transceivers</li>
+ <li>{{domxref("RTCRtpReceiver")}} and {{domxref("RTCRtpSender")}}</li>
+</ul>
diff --git a/files/de/web/api/service_worker_api/index.html b/files/de/web/api/service_worker_api/index.html
new file mode 100644
index 0000000000..54e3e1d86e
--- /dev/null
+++ b/files/de/web/api/service_worker_api/index.html
@@ -0,0 +1,280 @@
+---
+title: Service Worker API
+slug: Web/API/Service_Worker_API
+tags:
+  - API
+  - Offline
+  - Referenz
+  - Service-Worker
+  - Worker
+translation_of: Web/API/Service_Worker_API
+---
+<div>
+<p>{{ServiceWorkerSidebar}}</p>
+
+<p>{{ SeeCompatTable() }}</p>
+
+<p class="summary">Service-Worker verhalten sich im Wesentlichen wie Proxy-Server, welche zwischen der Webanwendung bzw. dem Browser und dem Netzwerk (sofern dieses verfügbar ist) sitzen. Sie sollen u. a. das Erstellen wirksamer Offline-Erfahrungen ermöglichen und können Netzwerkanfragen abfangen und passende Maßnahmen abhängig davon ergreifen, ob das Netzwerk verfügbar ist und ob der Server veränderte Ressourcen enthält. Sie erlauben außerdem den Zugriff auf Push-Benachrichtigungen und Background Sync APIs.</p>
+</div>
+
+<h2 id="Konzepte_von_Service-Workern_und_deren_Nutzung">Konzepte von Service-Workern und deren Nutzung</h2>
+
+<p>Ein Service-Worker ist ein ereignisgesteuerter <a href="/de/docs/Web/API/Worker">Worker</a>, der an einem Ursprung und einem Pfad registriert ist. Sie ist eine JavaScript-Datei, die in Abhängigkeit zu einer Webseite steht, Anfragen von Ressourcen abfängt und cached. In manchen Situationen kann es das Verhalten der Webseite beeinflussen. Ein häufiger Anwendungsfall ist die Abfrage, ob ein Netzwerk verfügbar ist, oder nicht.</p>
+
+<p>Ein Service-Worker läuft in einem Worker-Kontext. Es hat keinerlei Zugriff auf das DOM und läuft in einem separaten Thread, also isoliert vom JavaScript, dass die Hauptinteraktionslogik der Website steuert. Es läuft vollständig asynchron und verhindert die Ausführung anderer Scripte nicht. Daraus resultiert, dass APIs wie <a href="/en-US/docs/Web/API/XMLHttpRequest">XHR</a>  oder <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage">LocalStorage</a> nicht in Service-Workern benutzt werden können.</p>
+
+<p>Service-Worker laufen aus Sicherheitsgründen nur über das HTTPS-Protokoll. Veränderte Netzwerkanfragen könnten "Man in the middle"-Angriffe deutlich leichter machen.</p>
+
+<div class="note">
+<p><strong>Hinweis: </strong>Service-Worker haben in Bereichen wie <a href="http://alistapart.com/article/application-cache-is-a-douchebag">AppCache</a> gezeigt, dass sie dort besonders gut genutzt werden können, da sie keine Vermutungen darüber treffen, was Sie machen wollen und brechen ihre Aktionen entsprechend ab. Sie haben deshalb die Kontrolle über alles.</p>
+</div>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Service-Worker basieren auf <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a>. Generell sind sie abhängig von Anfragen und sie werden mit einer erfolgreichen oder einer fehlerhaften Aktion antworten. Die Architektur ist deshalb ideal dafür.</p>
+</div>
+
+<h3 id="Registrierung">Registrierung</h3>
+
+<p>Ein Service-Worker wird über die {{domxref("ServiceWorkerContainer.register()")}}-Methode registriert. Falls sie erfolgreich war, wird Ihr Service-Worker vom Client heruntergeladen und versucht eine Installation/Aktivierung (siehe unten)  für URLs, die innerhalb der Quelle liegen oder die URLs, die Sie vorgeben.</p>
+
+<h3 id="Download_Installation_und_Aktivierung">Download, Installation und Aktivierung</h3>
+
+<p>Ihr Service-Worker muss folgenden Lebenszyklus durchlaufen:</p>
+
+<ol>
+ <li>Download</li>
+ <li>Installation</li>
+ <li>Aktivierung</li>
+</ol>
+
+<p>Der Service-Worker wird sofort mit heruntergeladen, sobald der Nutzer erstmals eine von Service-Workern kontrollierte Seite aufruft.</p>
+
+<p>Danach wird es alle 24 Stunden neu heruntergeladen. Es kann auch in kürzeren Abständen heruntergeladen werden, aber die 24 Stunden können <strong>nicht </strong>überschritten werden. Damit sollen die Ladezeiten kürzer werden.</p>
+
+<p>Eine Installation wird versucht, wenn die heruntergeladene Datei neu ist, also Unterschiede byteweise verglichen mit dem bestehenden Service-Worker aufweist oder es der erste Service-Worker ist, der für diese Seite heruntergeladen wurde.</p>
+
+<p>Wenn ein Service-Worker erstmals verfügbar ist, wird eine Installation versucht. Nach einer erfolgreichen Installation ist es aktiviert.</p>
+
+<p>Wenn bereits ein bestehender Service-Worker installiert wurde, wird die neue Version im Hintergrund installiert, aber noch nicht aktiviert. Zu diesen Zeitpunkt wartet der Worker, bis alle Seiten heruntergeladen wurden, die noch den alten Service-Worker nutzen. Sobald alle Seiten geladen worden sind, wird der neue Service-Worker aktiviert.</p>
+
+<p>Sie können ein Ereignishandler für das {{domxref("InstallEvent")}} erstellen. Standardmäßig wird der Worker für den Einsatz vorbereitet, wenn das Event feuert. Zum Beispiel beim erstellen eines Caches, bei der die Built-In Storage API verwendet wird und Assets hineingeladen werden, damit die App offline verwendet werden kann.</p>
+
+<p>Außerdem existiert ein <code>activate</code>-Event. Wenn es feuert, ist es ein guter Zeitpunkt die alten Caches und andere Daten zu bereinigen, die mit der vorherigen Version ihres Workers zusammenhängen.</p>
+
+<p>Ihr Service-Worker kann mit dem {{domxref("FetchEvent")}} auf Anfragen antworten. Sie können die Antworten auf die Anfragen verändern, wie Sie wollen. Nutzen Sie dazu die {{domxref("FetchEvent.respondWith") }}-Methode.</p>
+
+<div class="blockIndicator note">
+<p><strong>Hinweis:</strong> Weil <code>oninstall</code>/<code>onactivate </code>eine Weile benötigen, um ihre Aktionen abzuschließen, ist es empfehlenswert, eine <code>waitUntil</code>-Methode bereitzustellen, die, wenn <code>oninstall </code>oder<code> onactivate</code> gefeuert werden, ein <code>Promise</code> geliefert wird. Events, die der Funktion dienen, werden dem Service-Worker nicht enthalten und der <code>Promise</code> wird erfolgreich ausgeführt.</p>
+</div>
+
+<p>Für eine komplette Anleitung, die zeigt, wie Sie Ihr erstes Beispiel erstellen, siehe <a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a>.</p>
+
+<h2 id="Weitere_Anwendungsbereiche">Weitere Anwendungsbereiche</h2>
+
+<p>Service-Worker werden auch benutzt für:</p>
+
+<ul>
+ <li>die Synchronisation von Hintergrunddaten</li>
+ <li>um auf Anfragen anderer Quellen zu antworten</li>
+ <li>Um Updates von Daten zu erhalten, die sehr teuer in der Kalkulation sind, wie z. B. Standort-Daten, die dann in einem Datensatz verwendet werden können.</li>
+ <li>Das clientseitige Kompilieren von CoffeeScript aus Entwicklergründen</li>
+ <li>Hooks für Hintergrunddienste</li>
+ <li>Zum Erstellen benutzerdefinierter Templates anhand von URL-Mustern</li>
+ <li>Performancebeschleunigung wie z. B. das Vorladen von Bildern</li>
+</ul>
+
+<p>In Zukunft werden Service-Worker zu weiteren nützlichen Dingen fähig sein, die sie näher an eine native App bringen. Andere Spezifikationen können und werden den Service-Worker-Kontext benutzen. Zum Beispiel:</p>
+
+<ul>
+ <li><a href="https://github.com/slightlyoff/BackgroundSync">Hintergrund-Synchronisation</a>: Ein Service-Worker kann gestartet werden, wenn keine Nutzer auf der Seite sind, um den Cache zu aktualisieren usw.</li>
+ <li><a href="/en-US/docs/Web/API/Push_API">Auf Push-Benachrichtigungen reagieren</a>: Ein Service-Worker kann Benachrichtigungen an Nutzer senden, um mitzuteilen, dass neuer Inhalt verfügbar ist,</li>
+ <li><span class="tlid-translation translation" lang="de"><span title="">Auf eine bestimmte Uhrzeit und ein bestimmtes Datum reagieren</span></span></li>
+ <li>Damit kann geofencing betrieben werden</li>
+</ul>
+
+<h2 id="Schnittstellen">Schnittstellen</h2>
+
+<dl>
+ <dt>{{domxref("Cache") }}</dt>
+ <dd>Repräsentiert einen Speicher für {{domxref("Request")}} / {{domxref("Response")}}-Objeltpaare, die als ein Teil des {{domxref("ServiceWorker")}}-Lifecycles agieren.</dd>
+ <dt>{{domxref("CacheStorage") }}</dt>
+ <dd>Repräsentiert einen Speicher für {{domxref("Cache")}}-Objekte. Es ist das Hauptverzeichnis für {{domxref("ServiceWorker")}}. Es beinhaltet alle benannten Caches basierend auf Strings, auf die der Worker zugreifen kann.</dd>
+ <dt>{{domxref("Client") }}</dt>
+ <dd>Repräsentiert den Gültigkeitsbereich von einem Service-Worker-Client. Ein Service-Worker-Client ist entweder ein Dokument in einem Browser-Kontext oder ein {{domxref("SharedWorker")}}, welches von einem aktiven Worker gesteuert wird.</dd>
+ <dt>{{domxref("Clients") }}</dt>
+ <dd>Repräsentiert einen Container von {{domxref("Client")}}-Objekten; die hauptsächtliche Methode, um die aktiven Service-Worker-Clients anzusteuern.</dd>
+ <dt>{{domxref("ExtendableEvent") }}</dt>
+ <dd>Erweitert die Lebensdauer der <code>install </code>und <code>activate</code>-Events, die vom {{domxref("ServiceWorkerGlobalScope")}} entfernt werden als teil des Service-Worker-Lebenszyklus. Dies versichert, dass einige Events wie z. B. das {{domxref("FetchEvent")}} nicht vom {{domxref("ServiceWorker")}}, solange sie veraltete Cache-Einträge löschen usw.</dd>
+ <dt>{{domxref("ExtendableMessageEvent") }}</dt>
+ <dd>Das Event-Objekt von einem {{event("message_(ServiceWorker)","message")}}-Event, welches von einem Service-Worker gefeuert wird.</dd>
+ <dt>{{domxref("FetchEvent") }}</dt>
+ <dd>Die Parameter, die dem {{domxref("ServiceWorkerGlobalScope.onfetch")}}-Handler übergeben werden. <code>FetchEvent </code>repräsentiert eine Fetch-Aktion, die vom {{domxref("ServiceWorkerGlobalScope")}} eines {{domxref("ServiceWorker")}} entfernt wird. Es beinhaltet Information über die Anfrage und der daraus resultierenden Antwort, und stellt die {{domxref("FetchEvent.respondWith", "FetchEvent.respondWith()")}}-Methode bereit. Es ermöglicht eine willkürliche Antwort, die zurück  zur kontrollierten Seite gesendet wird.</dd>
+ <dt>{{domxref("InstallEvent") }}</dt>
+ <dd>The parameter passed into the {{domxref("ServiceWorkerGlobalScope.oninstall", "oninstall")}} handler, the <code>InstallEvent</code> interface represents an install action that is dispatched on the {{domxref("ServiceWorkerGlobalScope")}} of a {{domxref("ServiceWorker")}}. As a child of {{domxref("ExtendableEvent")}}, it ensures that functional events such as {{domxref("FetchEvent")}} are not dispatched during installation. </dd>
+ <dt>{{domxref("Navigator.serviceWorker") }}</dt>
+ <dd>Returns a {{domxref("ServiceWorkerContainer")}} object, which provides access to registration, removal, upgrade, and communication with the {{domxref("ServiceWorker")}} objects for the <a href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window">associated document</a>.</dd>
+ <dt>{{domxref("NotificationEvent") }}</dt>
+ <dd>The parameter passed into the {{domxref("ServiceWorkerGlobalScope.onnotificationclick", "onnotificationclick")}} handler, the <code>NotificationEvent</code> interface represents a notification click event that is dispatched on the {{domxref("ServiceWorkerGlobalScope")}} of a {{domxref("ServiceWorker")}}.</dd>
+ <dt>{{domxref("ServiceWorker") }}</dt>
+ <dd>Represents a service worker. Multiple browsing contexts (e.g. pages, workers, etc.) can be associated with the same <code>ServiceWorker</code> object.</dd>
+ <dt>{{domxref("ServiceWorkerContainer") }}</dt>
+ <dd>Provides an object representing the service worker as an overall unit in the network ecosystem, including facilities to register, unregister and update service workers, and access the state of service workers and their registrations.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope") }}</dt>
+ <dd>Represents the global execution context of a service worker.</dd>
+ <dt>{{domxref("ServiceWorkerMessageEvent")}}</dt>
+ <dd>Contains information about an event sent to a {{domxref("ServiceWorkerContainer")}} target. </dd>
+ <dt>{{domxref("ServiceWorkerRegistration") }}</dt>
+ <dd>Represents a service worker registration.</dd>
+ <dt>{{domxref("SyncEvent")}} {{non-standard_inline}}</dt>
+ <dd>
+ <p>The SyncEvent interface represents a sync action that is dispatched on the {{domxref("ServiceWorkerGlobalScope")}} of a ServiceWorker. </p>
+ </dd>
+ <dt>{{domxref("SyncManager")}} {{non-standard_inline}}</dt>
+ <dd>Provides an interface for registering and listing sync registrations.</dd>
+ <dt>{{domxref("WindowClient") }}</dt>
+ <dd>Represents the scope of a service worker client that is a document in a browser context, controlled by an active worker. This is a special type of {{domxref("Client")}} object, with some additional methods and properties available.</dd>
+</dl>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<div>{{ CompatibilityTable() }}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>24</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>install/activate events</td>
+   <td>{{ CompatChrome(40.0) }}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>fetch event/request/<br>
+    <code>respondWith()</code></td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>caches/cache</td>
+   <td>
+    <p class="p1">{{CompatChrome(42.0)}}</p>
+   </td>
+   <td>{{ CompatGeckoDesktop("39.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td></td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td> install/activate events</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>fetch event/request/<br>
+    <code>respondWith()</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>caches/cache</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoMobile("39.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: For backwards compatibility, you could choose to use service workers and AppCache on the same web app to do equivalent things (if the AppCache will support doing those things, of course.) What happens in such a case is that browsers that don’t support Service Workers will use AppCache, and those that do will ignore the AppCache and let the service worker take over.</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="https://serviceworke.rs">ServiceWorker Cookbook</a></li>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li><a href="https://github.com/mdn/sw-test">Service workers basic code example</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a></li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
+</ul>
diff --git a/files/de/web/api/service_worker_api/using_service_workers/index.html b/files/de/web/api/service_worker_api/using_service_workers/index.html
new file mode 100644
index 0000000000..f45d69025f
--- /dev/null
+++ b/files/de/web/api/service_worker_api/using_service_workers/index.html
@@ -0,0 +1,507 @@
+---
+title: Service-Worker benutzen
+slug: Web/API/Service_Worker_API/Using_Service_Workers
+tags:
+  - Anleitung
+  - Grundlagen
+translation_of: Web/API/Service_Worker_API/Using_Service_Workers
+---
+<p>{{ServiceWorkerSidebar}}</p>
+
+<p>{{ SeeCompatTable() }}</p>
+
+<div class="summary">
+<p>Dieser Artikel informiert über die ersten Schritte mit Service-Workern, inklusive der Basisarchitektur, der Registrierung eines Service-Workers, der Installation und des Aktivierungsprozesses für einen neuen Service-Worker, Aktualisierung eines Service-Workers, Cache-Kontrolle und benutzerdefinierte Antworten, alles im Kontext von einer simplen App mit Offline-Funktionalität. </p>
+</div>
+
+<h2 id="Die_Voraussetzung_von_Service-Workern">Die Voraussetzung von Service-Workern</h2>
+
+<p>Ein großes Problem, unter dem Web-User seit Jahren leiden, ist der Verlust der Internetverbindung. Selbst die beste Webanwendung liefert eine furchtbare Benutzererfahrung, wenn sie nicht heruntergeladen werden kann. Es gab verschiedene Versuche, Technologien zu erstellen, die dieses Problem lösen (wie unsere <a href="/en-US/Apps/Build/Offline">Offline</a>-Seite zeigt) und einige Themen konnten so angegangen werden. Das größte Problem aber ist, dass es immer noch keinen guten allgemeinen Kontroll-Mechanismus für Asset-Caching und eigene Netzwerkanfragen gibt. <br>
+ <br>
+ Der vorausgegangene Versuch — AppCache — schien eine gute Idee, da er der Entwicklerin erlaubte, Assets zu spezifizieren, die leicht zu cachen sein sollten. Die Technologie traf jedoch Annahmen darüber, was die Entwicklerin zu tun gedachte und schlug an mehreren Stellen fehl, wenn die Webanwendung diesen Annahmen nicht eins zu eins folgte. Mehr Details dazu finden sich in Jake Archibalds "<a href="http://alistapart.com/article/application-cache-is-a-douchebag">Application Cache is a Douchebag</a>".</p>
+
+<div class="note">
+<p><strong>Beachte</strong>:  Wird <a href="/en-US/docs/Web/HTML/Using_the_application_cache">AppCache</a> verwendet, um Offline-Support für eine Seite zur Verfügung zu stellen, wird seit Firefox 44 eine Warnmeldung auf der Console angezeigt, die Entwicklern statt dessen die Verwendung von <a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service-Workern</a> empfiehlt ({{bug("1204581")}}).</p>
+</div>
+
+<p>Service-Worker sollen diese Probleme schließlich beheben. Ihre Syntax ist komplexer als die des AppCaches, der Vorteil ist aber, dass nun JavaScript benutzt werden kann, um die vom AppCache getroffenen Annahmen feinschrittig zu kontrollieren, was das zuvor beschriebene Problem und viele weitere löst. Mit Hilfe eines Service-Workers, kann die Webanwendung leicht aufgesetzt werden, um vorrangig gecachte Assets zu benutzen und so auch im Offline-Fall eine bestimmte Benutzererfahrung zu ermöglichen, bevor weitere Daten aus dem Netzwerk geladen werden (auch bekannt als <a href="http://offlinefirst.org/">Offline First</a>-Ansatz). Native Apps stellen dieses Feature bereits bereit, was der Grund dafür ist, dass native Apps oft Webanwendungen vorgezogen werden.</p>
+
+<h2 id="Einrichtung_zur_Verwendung_von_Service-Workern">Einrichtung zur Verwendung von Service-Workern</h2>
+
+<p>Viele der Eigenschaften von Service-Workern sind inzwischen in neueren Versionen unterstützender Browser standardmäßig eingestellt. Sollte der Beispielcode in einem der installierten Browser jedoch nicht funktionieren, kann die explizite Aktivierung einer Einstellung vonnöten sein:</p>
+
+<ul>
+ <li><strong>Firefox Nightly</strong>: Navigieren Sie zu <code>about:config</code> und setzen Sie <code>dom.serviceWorkers.enabled</code> auf true; Starten Sie den Browser anschließend neu.</li>
+ <li><strong>Chrome Canary</strong>: Navigieren Sie zu <code>chrome://flags</code> und aktivieren Sie <code>experimental-web-platform-features</code>; Starten Sie den Browser anschließend neu (Beachten Sie, dass einige Funktionen jetzt standardmäßig in Chrome aktiviert sind).</li>
+ <li><strong>Opera</strong>: Navigieren Sie zu <code>opera://flags</code> und aktivieren Sie <code>Support for ServiceWorker</code>; Starten Sie den Browser anschließend neu.</li>
+</ul>
+
+<p>Stellen Sie weiterhin sicher, dass Ihr Code über HTTPS gesendet wird — Service-Worker sind aus Sicherheitsgründen auf HTTPS beschränkt. Da GitHub (resp. GitHub Pages) HTTPS unterstüzt, ist es ein guter Ort, um Experimente zu hosten.</p>
+
+<h2 id="Grundarchitektur">Grundarchitektur</h2>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8241/flowchart-production-version.png" style="float: right; height: 600px; margin-left: 20px; width: 300px;"></p>
+
+<p>Ein einfache Implementierung von Service-Workern folgt für gewöhnlich den folgenden Schritten:</p>
+
+<ol>
+ <li>Die URL des Service-Workers wird aufgerufen und via {{domxref("serviceWorkerContainer.register()")}} registriert.</li>
+ <li>War dies erfolgreich, wird der Service-Worker in einem {{domxref("ServiceWorkerGlobalScope")}} ausgeführt; Im Prinzip ist dies eine besondere Art von Worker-Kontext, welcher außerhalb des Threads des Hauptscriptes läuft und keinen Zugriff auf das DOM hat.</li>
+ <li>Der Service-Worker kann nun Events verarbeiten.</li>
+ <li>Die Installation des Workers wird versucht, wenn Seiten, die durch Service-Worker verwaltet werden, wiederholt besucht werden. Ein Install-Event ist immer das erste, welches an einen Service-Worker gesendet wird (Dies kann beispielsweise benutzt werden, um den Prozess zu starten, der die IndexDB befüllt und Seiten-Assets cacht). Das ist der gleiche Ablauf, der bei der Installation einer nativen oder FirefoxOS App stattfindet - alles für die Offline-Nutzung vorbereiten.</li>
+ <li>Sobald der <code>oninstall</code>-Handler abgeschlossen ist, wird der Service-Worker als installiert betrachtet.</li>
+ <li>Der nächste Schritt ist Aktivierung. Sobald der Service-Worker installiert wurde, erhält dieser ein <code>activate</code>-Event. Der Hauptnutzen von <code>onactivate</code> ist das Aufräumen von Ressourcen, die in vorherigen Versionen des Service-Worker-Scripts genutzt wurden.</li>
+ <li>Der Service-Worker kann nun Webseiten verwalten, aber nur wenn diese nach dem erfolgreichen Abschluss von <code>register()</code> aufgerufen wurden. So wird ein Dokument, welches ohne Service-Worker gestartet wurde bis zu einem Neuladen nicht von einem Service-Worker verwaltet werden.</li>
+</ol>
+
+<h3 id="Promises">Promises</h3>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> sind ein sehr guter Mechanismus um asynchrone Operationen, deren Erfolg voneinander abhängt, auszuführen. Diese Technologie ist zentral für die Arbeitsweise von Service-Workern.<br>
+ <br>
+ Promises ermöglichen viele verschiedene Dinge, für unseren Zweck reicht es allerdings aus zu wissen, dass, wenn eine Funktion eine Promise zurück gibt, ein <code>.then()</code> an das Ende des Aufrufs gehangen werden und mit Callbacks für Erfolg, Misserfolg, etc. versehen werden kann. Des Weiteren kann <code>.catch()</code> am Ende benutzt werden, um einen besonderen Callback für den Misserfolg hinzuzufügen.</p>
+
+<p>Vergleichen wir nun die traditionelle synchrone Callback-Struktur mit ihrem asynchronen Promise-Äquivalent.</p>
+
+<h4 id="sync">sync</h4>
+
+<pre class="brush: js">try {
+  var value = myFunction();
+  console.log(value);
+} catch(err) {
+  console.log(err);
+}</pre>
+
+<h4 id="async">async</h4>
+
+<pre class="brush: js">myFunction().then(function(value) {
+  console.log(value);
+  }).catch(function(err) {
+  console.log(err);
+});</pre>
+
+<p>Im ersten Beispiel müssen wir warten, bis die <code>myFunction()</code> ausgeführt wird und <code>value</code> zurückgegeben wird bevor weiterer Code ausgeführt werden kann. Im zweiten Beispiel gibt <code>myFunction()</code> eine Promise für <code>value </code>zurück, danach kann weiterer Code ausgeführt werden. Wenn die Promise aufgelöst wird, wird der Code in <code>then</code> asynchron ausgeführt.<br>
+ <br>
+ Nun zu einem echten Beispiel: Was, wenn wir Bilder dynamisch laden, aber sicher stellen wollen, dass sie erst angezeigt werden, wenn sie vollständig geladen sind? Dies ist etwas, was häufig gemacht werden soll, aber sehr kompliziert werden kann. <code>.onload</code> kann benutzt werden, um ein Bild erst anzuzeigen, wenn es geladen wurde. Was aber geschieht mit Events, die stattfinden, bevor wir auf diese hören können? Man könnte versuchen, dieses Problem mit Hilfe von <code>.complete</code> zu umgehen, was jedoch nicht betriebssicher ist und den Umgang mit mehreren Bildern gleichzeitig nicht abdeckt. Auch ist dieser Ansatz weiterhin synchron und blockiert somit den Haupt-Thread.<br>
+ <br>
+ Wir können jedoch stattdessen eine eigene Promise bauen, die diesen Fall abdeckt. (Siehe unser <a href="https://github.com/mdn/promises-test">Promises-Test-Beispiel</a> für den entsprechenden Quellcode, oder <a href="https://mdn.github.io/promises-test/"> hier </a> für eine Liveanwendung.)</p>
+
+<p>{{note("Eine echte Service-Worker-Implementierung würde Caching und das <code>onfetch</code>-Event statt der überholten XMLHttpRequest API benutzen. Diese Features wurden hier nicht benutzt, um den Fokus auf Promises setzen zu können.")}}</p>
+
+<pre class="brush: js">function imgLoad(url) {
+  return new Promise(function(resolve, reject) {
+    var request = new XMLHttpRequest();
+    request.open('GET', url);
+    request.responseType = 'blob';
+
+    request.onload = function() {
+      if (request.status == 200) {
+        resolve(request.response);
+      } else {
+        reject(Error('Bild wurde nicht geladen; Fehlercode:' + request.statusText));
+      }
+    };
+
+    request.onerror = function() {
+      reject(Error('Ein Netzwerkfehler ist aufgetreten.'));
+    };
+
+    request.send();
+  });
+}</pre>
+
+<p>Wir geben eine neue Promise mit Hilfe des <code>Promise()</code>-Konstruktors zurück, der als Parameter eine Callback-Funktion mit <code>resolve</code>- und <code>reject</code>- Parametern erhält. Innerhalb dieser Funktion müssen wir definieren, was passieren muss, dass die Promise erfolgreich aufgelöst oder zurückgewiesen wird — In diesem Fall also entweder einen <code>200 OK</code> Status zurückgegeben bekommen oder nicht — und dann bei Erfolg <code>resolve</code> und bei Misserfolg <code>reject</code> aufzurufen. Der restliche Inhalt dieser Funktion sind Schritte zum Umgang mit XHR, über die wir uns im Moment keine Gedanken machen müssen.</p>
+
+<p>Wenn wir beim Aufruf der <code>imgLoad()</code>-Funktion angelangt sind, rufen wir diese mit der URL zu dem Bild, welches wir laden möchten, wie erwartet auf, der restliche Code ist jedoch ein bisschen anders:</p>
+
+<pre class="brush: js">var body = document.querySelector('body');
+var myImage = new Image();
+
+imgLoad('myLittleVader.jpg').then(function(response) {
+  var imageURL = window.URL.createObjectURL(response);
+  myImage.src = imageURL;
+  body.appendChild(myImage);
+}, function(Error) {
+  console.log(Error);
+});</pre>
+
+<p>Die <code>then()</code>-Methode wird an das Ende des Funktionsaufrufes gehangen, und enthält zwei Funktionen – die erste wird ausgeführt, wenn die Promise aufgelöst wird, die zweite, wenn sie zurückgewiesen wird. Im Auflösungsfall zeigen wir das Bild innerhalb von <code>myImage</code> an und fügen es an den body an (Das Argument der <code>then()</code>-Funktion ist die request.response innerhalb der resolve-Methode des Promises); im Zurückweisungsfall geben wir einen Fehler in der Konsole aus.</p>
+
+<p>Dies alles geschieht asynchron.</p>
+
+<div class="note">
+<p><strong>Beachte</strong>: Promises können aneinandergekettet werden, zum Beispiel:<br>
+ <code>myPromise().then(success, failure).then(success).catch(failure);</code></p>
+</div>
+
+<div class="note">
+<p><strong>Beachte</strong>: Weitere Informationen zu Promises finden sich in Jake Archibalds Artikel <a href="http://www.html5rocks.com/en/tutorials/es6/promises/">JavaScript Promises: there and back again</a>.</p>
+</div>
+
+<h2 id="Service-Worker_Demo">Service-Worker Demo</h2>
+
+<p>Um die Grundlagen der Registrierung und Installation eines Service-Workers zu demonstrieren, haben wir eine kleine Demo namens <a href="https://github.com/mdn/sw-test">sw-test</a> geschaffen, die eine überschaubare Star-Wars-Lego-Bildergalerie ist. Sie nutzt eine Promise-unterstützte Funktion um Bilddaten von einem JSON-Objekt zu lesen und diese Bilder mit Hilfe von Ajax zu laden, bevor sie untereinander auf der Webseite angezeigt werden. Die Anwendung ist statisch und einfach gehalten. Sie registriert, installiert und aktiviert des Weiteren einen Service-Worker und cacht die erforderlichen Dateien für die Offline-Nutzung, sollten weitere Aspekte dieser Spezifikation bei den aufrufenden Browsern aktiviert sein.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8243/demo-screenshot.png" style="display: block; height: 410px; margin: 0px auto; width: 480px;"><br>
+ <br>
+ <br>
+ Der <a href="https://github.com/mdn/sw-test/">Quellcode</a> ist auf GithHub zu finden, eine Live-Version kann <a href="https://mdn.github.io/sw-test/">hier</a> betrachtet werden. Der Aspekt, den wir hier betrachten wollen, ist die Promise (siehe <a href="https://github.com/mdn/sw-test/blob/gh-pages/app.js#L17-L42">app.js Zeilen 17-42</a>), die eine modifizierte Version dessen ist, was in der <a href="https://github.com/mdn/promises-test">Promises Test Demo</a> zu lesen war. Die Unterschiede sind die folgenden:</p>
+
+<ol>
+ <li>Im Original haben wir nur eine URL zu einem Bild, welches wir laden wollen, hineingereicht. In dieser Version reichen wir ein JSON-Fragment hinein, welches alle Daten für ein einzelnes Bild beinhaltet (in <a href="https://github.com/mdn/sw-test/blob/gh-pages/image-list.js">image-list.js</a> kann ein Blick darauf geworfen werden). Das geschieht, weil wegen der Asynchronität die gesamten Daten für jedes Auflösen der Promise in in diese hineingereicht werden müssen. Würde nur die URL hineingereicht werden und versucht werden, während der <code>for()-</code>Schleife, auf andere Dinge im JSON zuzugreifen, schlüge dies fehl, da die Promise nicht zeitgleich mit dem Abschluss der Iteration auflösen würde, da dies ein synchroner Prozess ist.</li>
+ <li>Wir lösen die Promise des Weiteren mit einem Array auf, da wir den geladenen Bild-Blob, aber auch Bildname, Bildnachweis und Alt-Text später der auflösenden Funktion zur Verfügung stellen wollen. (siehe <a href="https://github.com/mdn/sw-test/blob/gh-pages/app.js#L26-L29">app.js Zeilen 26-29</a>). Promises lösen mit einem einzigen Argument auf, werden also mehrere Werte gebraucht, muss dies über ein Array bzw. Objekt gelöst werden.</li>
+ <li>Um auf die Werte der aufgelösten Promise zuzugreifen, greifen wir auf eben jene Funktion zu. (siehe <a href="https://github.com/mdn/sw-test/blob/gh-pages/app.js#L55-L59">app.js Zeilen 55-59</a>.) Dies mag auf den ersten Blick seltsam erscheinen, ist aber die korrekte Handhabung von Promises.</li>
+</ol>
+
+<h2 id="Service-Worker_auf_die_Bühne_bitte!">Service-Worker auf die Bühne, bitte!</h2>
+
+<p>Auf geht's zu Service-Workern!</p>
+
+<h3 id="Service-Worker_registrieren">Service-Worker registrieren</h3>
+
+<p>Der erste Code-Block in der JavaScript-Datei unserer App — <code>app.js</code> — sieht wie folgt aus. Dies ist unser Startpunkt für die Nutzung von Service-Workern.</p>
+
+<pre class="brush: js">if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('/sw-test/sw.js', { scope: '/sw-test/' }).then(function(reg) {
+    // Registrierung erfolgreich
+    console.log('Registrierung erfolgreich. Scope ist ' + reg.scope);
+  }).catch(function(error) {
+    // Registrierung fehlgeschlagen
+    console.log('Registrierung fehlgeschlagen mit ' + error);
+  });
+};</pre>
+
+<ol>
+ <li>Der äußere Block kümmert sich um die Feature-Erkennung um sicher zu stellen, dass Service-Worker unterstützt werden, bevor einer registriert wird.</li>
+ <li>Als nächstes nutzen wir die {{domxref("ServiceWorkerContainer.register()") }}-Funktion, um den Service Worker für diese Seite zu registrieren. Dieser ist nur eine JavaScript-Datei innerhalb unserer App. (Beachte, dass die URL der Datei relativ zum Ursprung ist, und nicht zur JavaScript-Datei, die sie referenziert.)</li>
+ <li>Der <code>scope</code> Parameter ist optional, und kann benutzt werden, um den Teil der. Applikation einzuschränken, den der Service-Worker kontrollieren soll. In diesem Fall, haben wir '<code>/sw-test/' </code>spezifiziert, was alle Inhalte unter dem App-Ursprungsverzeichnis beinhaltet. Wird der Parameter weggelassen, würde standardmäßig dieses Verzeichnis gewählt werden. Wir haben es hier zu Anschauungszwecken jedoch spezifiziert..</li>
+ <li>Die <code>.then()</code> Promise-Funktion wird genutzt, um den Erfolgsfall an unsere Promise-Struktur zu hängen. Wenn die Promise erfolgreich auflöst, wird der Programmcode innerhalb dieser Funktion ausgeführt.</li>
+ <li>Zuletzt fügen wir die<code>.catch()</code>-Funktion ans Ende an, die ausgeführt wird, sollte die Promise zurückgewiesen werden.</li>
+</ol>
+
+<p>Jetzt ist ein Service-Worker registriert, der in einem Worker-Kontext läuft und daher keinen Zugriff auf das DOM hat. Code im Service-Worker wird außerhalb der normalen Seiten ausgeführt, um deren Laden zu kontrollieren.<br>
+ <br>
+ Ein einzelner Service-Worker kann viele Seiten kontrollieren. Wird eine Seite innerhalb des spezifizierten Codes geladen, wird der Service-Worker für diese eingerichtet und nimmt seine Arbeit auf. Es sollte daher nicht vergessen werden, dass vorsichtig mit globalen Variablen im Service-Worker-Script umgegangen werden muss: Jede Seite im Scope hat den selben Worker, mit dem sie arbeitet.</p>
+
+<div class="note">
+<p><strong>Beachte</strong>: Service-Worker funktionieren wie Proxy-Server, was es unter anderem erlaubt, Netzwerkanfragen und -antworten zu modifizieren und mit Objekten aus dem Cache zu ersetzen.</p>
+</div>
+
+<div class="note">
+<p><strong>Beachte</strong>: Eine gute Sache an Service-Workern ist, dass, wenn Feature-Erkennung wie im obigen Beispiel verwendet wird, Browser, die Service-Worker nicht unterstützen, die App dennoch normal und wie erwartet benutzen können. Wenn weiterhin AppCache und Service-Worker gemeinsam auf einer Seite benutzt werden, werden Browser, die AppCache aber nicht Service-Worker unterstützen, ersteres benutzen. Browser die beides unterstützen, werden AppCache zu Gunsten von Service-Workern ignorieren.</p>
+</div>
+
+<h4 id="Wieso_schlägt_die_Registrierung_meines_Service_Workers_fehl">Wieso schlägt die Registrierung meines Service Workers fehl?</h4>
+
+<p>Dies kann aus folgenden Gründen passieren:</p>
+
+<ol>
+ <li>Die Applikation läuft nicht unter HTTPS</li>
+ <li>Der Pfad zur Service-Worker-Datei ist nicht korrekt beschrieben — er muss relativ zum Ursprung geschrieben sein, nicht relativ zum Wurzelverzeichnis der App. In unserem Beispiel liegt der Worker unter <code>https://mdn.github.io/sw-test/sw.js</code>, wohingegen das Wurzelverzeichnis der App <code>https://mdn.github.io/sw-test/ </code>ist. Der Pfad muss also als <code>/sw-test/sw.js</code>, geschrieben werden, und nicht als <code>/sw.js</code>.</li>
+ <li>Der Service-Worker, auf den verwiesen wird, hat einen anderen Ursprung als die App. Auch das ist nicht gestattet.</li>
+</ol>
+
+<p>Weiterhin zu beachten:</p>
+
+<ul>
+ <li>Der Service-Worker wird nur Netzwerkanfragen von Clients innerhalb seines Scopes abgreifen.</li>
+ <li>Der maximale Scope eines Service-Workers ist der Ort des Workers selbst.</li>
+ <li>Ist der Service-Worker auf einem Client aktiv, der mit dem <code>Service-Worker-Allowed-</code>Header ausgeliefert wird, kann eine Liste von maximalen Scopes für diesen Worker definiert werden.</li>
+ <li>Im Firefox sind Service-Worker-APIs versteckt und können nicht genutzt werden, wenn die Nutzer sich im Inkognito-Modus befinden.</li>
+</ul>
+
+<h3 id="Installation_und_Aktivierung_Füllen_des_Caches">Installation und Aktivierung: Füllen des Caches</h3>
+
+<p>Nachdem der Service-Worker registriert wurde, versucht der Browser den Service-Worker für die entsprechende Seite zu installieren und zu aktivieren.<br>
+ <br>
+ Das Install-Event wird abgesetzt wenn eine Installation erfolgreich abgeschlossen wurde. Dieses Event wird für gewöhnlich dazu genutzt, den Offline-Cache des Browsers mit den Assets zu befüllen, die benötigt werden, damit die App offline laufen kann. Um das zu erreichen, nutzen wir die Storage-API der Service-Worker — {{domxref("cache")}} — ein globales Objekt des Service-Workers, welches uns erlaubt Assets, die durch Netzwerkantworten geliefert wurden, zu speichern. Diese API arbeitet ähnlich wie der Browser interne Cache, ist allerdings Domain spezifisch und besteht, bis Gegenteiliges gesagt wird, was erneut volle Kontrolle erlaubt.</p>
+
+<div class="note">
+<p><strong>Beachte</strong>: Die Cache API ist nicht in jedem Browser unterstützt. (Siehe auch den Abschnitt {{anch("Browserkompabilität")}} für weitere Informationen.) Soll sie jetzt genutzt werden, kann ein Polyfill in Betracht gezogen werden, wie er beispielsweise in <a href="https://github.com/Polymer/topeka/blob/master/sw.js">Googles Topeka Demo</a> enthalten ist, oder die Assets in <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> gespeichert werden.</p>
+</div>
+
+<p>Wir beginnen diesen Abschnitt mit einem Blick auf ein Code-Beispiel — Das ist der <a href="https://github.com/mdn/sw-test/blob/gh-pages/sw.js#L1-L18">erste Block in unserem Service-Worker</a>:</p>
+
+<pre class="brush: js">this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      ]);
+    })
+  );
+});</pre>
+
+<ol>
+ <li>Hier wird dem Service-Worker (mit Hilfe von <code>this</code>) ein <code>install</code>Event-Listener hinzugefügt, und die {{domxref("ExtendableEvent.waitUntil()") }}-Methode dem Event angehängt — das stellt sicher, dass der Service-Worker nicht installiert wird, bis der Code innerhalb von <code>waitUntil()</code> erfolgreich ausgeführt wurde.</li>
+ <li>Innerhalb von <code>waitUntil()</code> benutzen wir die <a href="/en-US/docs/Web/API/CacheStorage/open"><code>caches.open()</code></a>-Methode um einen neuen Cache mit dem Namen <code>v1</code> zu erstellen, welcher die erste Version des Ressourcenspeichers unserer Seite sein wird. Das gibt eine Promise für den erstellten Cache zurück; sobald diese aufgelöst ist, rufen wir eine Funktion auf, die wiederum <code>addAll()</code> auf dem erstellten Cache aufruft und als Parameter einen Array mit zum Ursprung relativen URLs der zu cachenden Ressourcen enthält.</li>
+ <li>Sollte die Promise zurückgewiesen werden, schlägt die Installation fehl und der Worker tut nichts. Das ist in Ordnung und bietet die Möglichkeit, den Code zu korrigieren und es bei der nächsten Registrierung erneut zu versuchen.</li>
+ <li>Nach erfolgreicher Installation wird der Service-Worker aktiviert. Wurde der Service-Worker zum ersten mal installiert und aktiviert ist dies nicht weiter von Bedeutung, aber wichtig, wenn der Service-Worker aktiviert wird. (Siehe den Abschnitt {{anch("Aktualisieren des Service-Workers") }} im späteren Verlauf.)</li>
+</ol>
+
+<div class="note">
+<p><strong>Beachte</strong>: <a href="/en-US/docs/Web/Guide/API/DOM/Storage">localStorage</a> funktioniert ähnlich wie der Service-Worker-Cache, ist aber synchron und daher in Service-Workern nicht gestattet.</p>
+</div>
+
+<div class="note">
+<p><strong>Beachte</strong>: <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> kann, wenn nötig, innerhalb eines Service-Workers benutzt werden.</p>
+</div>
+
+<h3 id="Eigene_Antworten_auf_Netzwerkanfragen">Eigene Antworten auf Netzwerkanfragen</h3>
+
+<p>Da jetzt die Assets der Seite gecacht wurden, kann nun den Service-Workern mitgeteilt werden, was sie mit dem gecachten Inhalt tun sollen. Dies geschieht mit Hilfe des <code>fetch</code>-Events.</p>
+
+<p>Ein <code>fetch</code>-Event wird jedes Mal abgesetzt, wenn eine Ressource, die vom Service-Worker kontrolliert wird (also die Dokumente innerhalb seines Scopes sowie die dort referenzierten Ressourcen), geladen wird.  (Wenn also <code>index.html</code> eine Cross-Origin-Anfrage an ein eingebettetes Bild absetzt, geht auch das durch den Service-Worker.)</p>
+
+<p>Ein <code>fetch</code> Event-Listener kann dem Service-Worker hinzugefügt, und die <code>respondWith()</code>-Methode des Events aufgerufen werden, um die HTTP-Antworten abzufangen und mit unseren eigenen zu ersetzen.</p>
+
+<pre class="brush: js">this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    // Hier eigene Antworten
+  );
+});</pre>
+
+<p>Es kann damit begonnen werden, jedes Mal mit der Ressource zu antworten, deren URL der der Netzwerkanfrage entspricht:</p>
+
+<pre class="brush: js">this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request)
+  );
+});</pre>
+
+<p><code>caches.match(event.request)</code> erlaubt uns, jede Ressource, die vom Netzwerk angefragt wird, mit der entsprechenden Ressource des Caches zu ersetzen, so diese verfügbar ist. Der Abgleich geschieht wie bei normalen HTTP-Anfragen über URLs und Header.</p>
+
+<p>Betrachten wir einige weitere Optionen, die wir haben, wenn wir unsere eigenen Antworten definieren wollen (siehe auch die <a href="/en-US/docs/Web/API/Fetch_API">Fetch-API Dokumentation</a> für weitere Informationen über {{domxref("Request")}}- und {{domxref("Response")}}-Objekte.)</p>
+
+<ol>
+ <li>
+  <p>Der <code>{{domxref("Response.Response","Response()")}}</code>-Konstruktor  erlaubt uns das Erstellen einer benutzerdefinierten Antwort. In diesem Fall geben wir eine einfache Zeichenkette zurück:</p>
+
+  <pre class="brush: js">new Response('Hallo vom freundlichen Service-Worker!');</pre>
+ </li>
+ <li>
+  <p>Das folgende komplexere <code>Response</code>-Beispiel zeigt, dass optional eine Anzahl an Headern in der Antwort gesetzt werden können, die die Standard HTTP-Responce-Header emulieren. Hier wird dem Browser nut der Content-Type unserer künstlichen Antwort mitgeteilt:</p>
+
+  <pre class="brush: js">new Response('&lt;p&gt;Hallo from freundlichen Service-Worker!&lt;/p&gt;', {
+  headers: { 'Content-Type': 'text/html' }
+})</pre>
+ </li>
+ <li>
+  <p>Wenn im Cache kein Treffer gefunden wurde, könnte der Browser angewiesen werden, die standardmäßigen Netzwerkanfrage mit {{domxref("GlobalFetch.fetch","fetch")}} auszuführen, um die Ressource aus dem Netzwerk zu laden, wenn dieses verfügbar ist:</p>
+
+  <pre class="brush: js">fetch(event.request)</pre>
+ </li>
+ <li>
+  <p>Wenn es keinen Treffer gab und auch das Netzwerk nicht verfügbar ist, kann die Anfrage mit einer Ausweichseite beantwortet werden, indem {{domxref("CacheStorage.match","match()")}} folgendermaßen verwendet wird:</p>
+
+  <pre class="brush: js">caches.match('/fallback.html');</pre>
+ </li>
+ <li>
+  <p>Viele Informationen über jeden Request können erhalten werden, indem Parameter des {{domxref("Request")}}-Objekts, welches vom {{domxref("FetchEvent")}} zurückgegeben wird, aufgerufen werden.</p>
+
+  <pre class="brush: js">event.request.url
+event.request.method
+event.request.headers
+event.request.body</pre>
+ </li>
+</ol>
+
+<h2 id="Umgang_mit_fehlgeschlagenen_Cache-Anfragen">Umgang mit fehlgeschlagenen Cache-Anfragen</h2>
+
+<p><code>caches.match(event.request)</code>ist hilfreich, wenn es einen Treffer im Service-Worker-Cache gibt. Was aber, wenn das nicht der Fall ist? Stellten wir keine Möglichkeit zur Behandlung einer scheiternden Cache-Anfrage bereit, würde unsere Promise zurückgewiesen werden und wir würden einem Netzwerkfehler gegenüber stehen, wenn es keinen Treffer im Cache gibt.</p>
+
+<p>Glücklicherweise erlaubt die Promise basierte Struktur des Service-Workers weitere Optionen bereitzustellen. Beispielsweise:</p>
+
+<pre class="brush: js">this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request).catch(function() {
+      return fetch(event.request);
+    })
+  );
+});</pre>
+
+<p>Falls die Promise zurückgewiesen wird, gibt die <code>catch()</code>-Funktion die Standard-Netzwerkanfrage für die Ressource zurück, was es erlaubt, diese vom Server zu laden, sollte eine Netzwerkverbindung bestehen.</p>
+
+<p>Ein weiterer Weg wäre, die Ressource nicht bloß aus dem Netzwerk zu laden, sondern für zukünftige Anfragen im Cache zu speichern, damit diese ebenfalls offline verwendet werden können. Das bedeutet, sollten weitere Bilder zur Star-Wars-Galerie hinzugefügt werden, kann unsere App diese laden und cachen. Es würde folgendermaßen implementiert werden:</p>
+
+<pre class="brush: js">this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request).catch(function() {
+      return fetch(event.request).then(function(response) {
+        return caches.open('v1').then(function(cache) {
+          cache.put(event.request, response.clone());
+          return response;
+        });
+      });
+    })
+  );
+});</pre>
+
+<p>Wir geben an dieser Stelle die Standard-Netzwerkanfrage mit <code>return</code><code> fetch(event.request) </code>zurück, die wiederum eine Promise zurückgibt. Wenn diese Promise aufgelöst wird, reagieren wir mit einer Funktion, die unseren Cache mit <code>caches.open('v1')</code> öffnet, was eine weitere Promise zurückgibt. Wenn diese auflöst, wird <code>cache.put()</code> benutzt, um die Ressource dem Cache hinzuzufügen. Diese wird aus <code>event.request </code>gezogen, die Netzwerkantwort mit <code>response.clone()</code> kopiert und dem Cache hinzugefügt. Die Kopie wird gespeichert und die Original-Netzwerkantwort an den Browser und somit an die Seite, die die Anfrage gestellt hat, zurückgegeben.</p>
+
+<p>Warum das alles? Der Datenstrom von Netzwerkanfrage und -antwort kann nur ein einziges Mal gelesen werden. Damit die Netzwerkantwort an den Browser zurückgegeben werden und trotzdem auch im Cache gespeichert werden kann, muss sie kopiert werden. Dadurch kann das Original an den Browser gereicht und die Kopie im Cache gespeichert werden. Original und Kopie werden somit jeweils nur einmal gelesen.</p>
+
+<p>Zuletzt bleibt noch das Problem, was passieren soll, wenn es weder einen Treffer im Cache noch eine verfügbare Netzwerkverbindung gibt. Zur Zeit schlägt unsere Anfrage an die Ressource fehl. Wenn wir eine Ausweichlösung bereitstellen, werden, egal was passiert, die Nutzer eine Antwort bekommen:</p>
+
+<pre><code>this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request).then(function(resp) {
+      return resp || fetch(event.request).then(function(response) {
+        caches.open('v1').then(function(cache) {
+          cache.put(event.request, response.clone());
+        });
+        return response;
+      });
+    }).catch(function() {
+      return caches.match('/sw-test/gallery/myLittleVader.jpg');
+    })
+  );
+});</code></pre>
+
+<p>Wir haben uns an dieser Stelle für ein Ausweichbild entschieden, da die einzigen Anfragen, die potentiell fehlschlagen, die für neue Bilder in der Galerie sein werden. Um alles andere wurde sich bereits während des <code>install</code>-Events der Installation gekümmert.</p>
+
+<h2 id="Aktualisieren_des_Service-Workers"><font color="#83d0f2">Aktualisieren des Service-Workers</font></h2>
+
+<p>Wurde der Service-Worker bereits installiert, aber eine neue Version bei Neuladen der Seite bereitgestellt werden, wird dieser neue Worker im Hintergrund installiert, jedoch noch nicht aktiviert. Das geschieht erst dann, wenn keine der Seiten, die den alten Worker nutzen, mehr geladen werden. Sobald dies der Fall ist, wird der neue Service-Worker aktiviert.</p>
+
+<p>Damit dies geschehen kann, muss der<code>install</code>-Event-Listener im neuen Service-Worker ungefähr folgendermaßen angepasst werden (Augenmerk auf die neue Versionsnummer):</p>
+
+<pre class="brush: js">this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v2').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+
+             …
+
+              // hier können weitere neue Ressourcen stehen...
+      ]);
+    });
+  );
+});</pre>
+
+<p>Während dies alles geschieht, ist weiterhin die vorherige Version des Service-Workers für die Verwaltung der Anfragen verantwortlich und die neue Version wird im Hintergrund installiert. Der neue Cache hat in diesem Beispiel den Namen <code>v2</code>, so dass der Cache mit dem Namen <code>v1</code> nicht beeinträchtigt wird.</p>
+
+<p>Wenn keine Seiten mehr die aktuelle Version benutzen, wird der neue Worker aktiviert und verwaltet die Netzwerkanfragen.</p>
+
+<h3 id="Löschen_des_alten_Caches">Löschen des alten Caches</h3>
+
+<p>Es steht weiterhin ein <code>activate</code>-Event zur Verfügung. Es wird generell genutzt, um Dinge abzuhandeln, die die alte Version stark beeinträchtigt hätten, würden sie zu deren Laufzeit ausgeführt werden. Dies betrifft zum Beispiel das Löschen der alten Caches. Das Event ist auch nützlich, um Daten zu löschen, die nicht mehr gebraucht werden und so zu verhindern, dass zu viel Speicherplatz verbraucht wird — jeder Browser hat eine feste Obergrenze für die Menge an Cache-Speicherplatz, die ein Service-Worker nutzen kann. Der Browser selbst verwaltet den Speicherplatz an sich selbstständig, aber es kann passieren, dass der Cache-Speicherplatz für eine Seite gelöscht wird, denn wenn der Browser Daten dieser Art löscht, dann entweder alle oder keine Daten der Seite.</p>
+
+<p>Promises, die <code>waitUntil()</code> hineingereicht werden, blockieren weitere Events bis diese abgearbeitet wurden, so dass sicher gestellt werden kann, dass alle Aufräumarbeiten abgeschlossen sind, bevor die erste Netzwerkanfrage an den neuen Cache gestellt wird.</p>
+
+<pre class="brush: js">this.addEventListener('activate', function(event) {
+  var cacheWhitelist = ['v2'];
+
+  event.waitUntil(
+    caches.keys().then(function(keyList) {
+      return Promise.all(keyList.map(function(key) {
+        if (cacheWhitelist.indexOf(key) === -1) {
+          return caches.delete(key);
+        }
+      }));
+    })
+  );
+});</pre>
+
+<h2 id="Entwicklertools">Entwicklertools</h2>
+
+<p>Chrome hat <code>chrome://inspect/#service-workers</code>, wo Aktivität und Speicherplatz der aktuellen Service-Worker eingesehen werden können, und <code>chrome://serviceworker-internals</code>, wo mehr Details zu finden sind und Service-Worker gestartet, beendet und der Fehlersuche unterworfen werden können. Zukünftige Versionen werden zusätzlich Mittel zur Netzwerkdrosselung und einen Offline-Modus bereitsellen, um schlechte oder nicht vorhandene Netzwerkverbindungen zu simulieren.</p>
+
+<p>Auch Firefox hat die Entwicklung nützlicher Werkzeuge in Bezug auf Service-Worker begonnen:</p>
+
+<ul>
+ <li>Unter <a>about:serviceworkers</a> können registrierte Service-Worker eingesehen und aktualisiert oder entfernt werden</li>
+ <li>Für Testzwecke kann die HTTPS-Beschränkung durch Aktivieren der "Service-Worker über HTTP aktivieren (bei geöffneten Entwicklerwerkzeugen)"-Option in den Firefox-Entwicklerwerkzeug-Optionen (Zahnrad-Menü)</li>
+</ul>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstüzung</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoDesktop("33.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstüzung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a></li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
+</ul>
diff --git a/files/de/web/api/serviceworker/index.html b/files/de/web/api/serviceworker/index.html
new file mode 100644
index 0000000000..38d160b96b
--- /dev/null
+++ b/files/de/web/api/serviceworker/index.html
@@ -0,0 +1,103 @@
+---
+title: ServiceWorker
+slug: Web/API/ServiceWorker
+translation_of: Web/API/ServiceWorker
+---
+<div>{{APIRef("Service Workers API")}}</div>
+
+<p>Die <strong> <code>ServiceWorker-Schnittstelle</code> </strong> der <a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker-API</a> stellt einen Verweis auf einen Serviceworker bereit. Mehrere "Glossary"-Glossar-("Browsing-Kontexte", "Browsing-Kontexte") (z. B. .pages, Arbeitskräfte usw.) können demselben Service-Worker zugeordnet werden, jeder durch ein eindeutiges Objekt.<code>ServiceWorker</code></p>
+
+<p>Ein Objekt ist in der Eigenschaft ""ServiceWorkerRegistration.active"" und in der Eigenschaft ""ServiceWorkerContainer.controller"" verfügbar – dies ist ein Service-Worker, der aktiviert wurde und die Seite steuert (der Service-Worker wurde erfolgreich registriert, und die gesteuerte Seite wurde neu geladen).)<code>ServiceWorker</code></p>
+
+<p>Die Schnittstelle wird eine Reihe von Lebenszyklusereignissen – und – und funktionalen Ereignissen einschließlich ausgelöst. Einem Objekt ist ein Objekt zugeordnet, dem der Lebenszyklus von "ServiceWorker.state") zugeordnet ist.<code>ServiceWorker</code><code>install</code><code>activate</code><code>fetch</code><code>ServiceWorker</code></p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>The <code>ServiceWorker</code> interface inherits properties from its parent, {{domxref("Worker")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("ServiceWorker.scriptURL")}} {{readonlyinline}}</dt>
+ <dd>Returns the serialized script URL defined as part of {{domxref("ServiceWorkerRegistration")}}. The URL must be on the same origin as the document that registers the .<code>ServiceWorker</code><code>ServiceWorker</code></dd>
+ <dt>{{domxref("ServiceWorker.state")}} {{readonlyinline}}</dt>
+ <dd>Returns the state of the service worker. It returns one of the following values: , , , or .<code>installing</code><code>installed,</code><code>activating</code><code>activated</code><code>redundant</code></dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<dl>
+ <dt>{{domxref("ServiceWorker.onstatechange")}} {{readonlyinline}}</dt>
+ <dd>An {{domxref("EventListener")}} property called whenever an event of type is fired; it is basically fired anytime the {{domxref("ServiceWorker.state")}} changes.<code>statechange</code></dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>The <code>ServiceWorker</code> interface inherits methods from its parent, {{domxref("Worker")}}, with the exception of {{domxref("Worker.terminate")}} — this should not be accessible from service workers.</em></p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>This code snippet is from the <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/registration-events/index.html">service worker registration-events sample</a> (<a href="https://googlechrome.github.io/samples/service-worker/registration-events/">live demo</a>). The code listens for any change in the {{domxref("ServiceWorker.state")}} and returns its value.</p>
+
+<pre class="brush: js notranslate">if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('service-worker.js', {
+        scope: './'
+    }).then(function (registration) {
+        var serviceWorker;
+        if (registration.installing) {
+            serviceWorker = registration.installing;
+            document.querySelector('#kind').textContent = 'installing';
+        } else if (registration.waiting) {
+            serviceWorker = registration.waiting;
+            document.querySelector('#kind').textContent = 'waiting';
+        } else if (registration.active) {
+            serviceWorker = registration.active;
+            document.querySelector('#kind').textContent = 'active';
+        }
+        if (serviceWorker) {
+            // logState(serviceWorker.state);
+            serviceWorker.addEventListener('statechange', function (e) {
+                // logState(e.target.state);
+            });
+        }
+    }).catch (function (error) {
+        // Something went wrong during registration. The service-worker.js file
+        // might be unavailable or contain a syntax error.
+    });
+} else {
+    // The current browser doesn't support service workers.
+}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#serviceworker', 'ServiceWorker')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.ServiceWorker")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://serviceworke.rs">ServiceWorker Cookbook</a></li>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li><a href="https://github.com/mdn/sw-test">Service worker basic code example</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Using web workers</a></li>
+</ul>
diff --git a/files/de/web/api/serviceworkercontainer/index.html b/files/de/web/api/serviceworkercontainer/index.html
new file mode 100644
index 0000000000..2899d05b7c
--- /dev/null
+++ b/files/de/web/api/serviceworkercontainer/index.html
@@ -0,0 +1,158 @@
+---
+title: ServiceWorkerContainer
+slug: Web/API/ServiceWorkerContainer
+tags:
+  - API
+  - Draft
+  - Interface
+  - NeedsTranslation
+  - Offline
+  - Reference
+  - Service Workers
+  - ServiceWorkerContainer
+  - TopicStub
+  - Workers
+translation_of: Web/API/ServiceWorkerContainer
+---
+<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>
+
+<p>The <code>ServiceWorkerContainer</code> interface of the <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a> provides an object representing the service worker as an overall unit in the network ecosystem, including facilities to register, unregister and update service workers, and access the state of service workers and their registrations.</p>
+
+<p>Most importantly, it exposes the {{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register(scriptURL, scope[, base])")}} method used to register service workers, and the {{domxref("ServiceWorkerContainer.controller")}} property used to determine whether or not the current page is actively controlled.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerContainer.controller")}} {{readonlyinline}}</dt>
+ <dd>Returns a {{domxref("ServiceWorker")}} object if its state is <code>activated</code> (the same object returned by {{domxref("ServiceWorkerRegistration.active")}}). This property returns <code style="font-style: normal;">null</code> if the request is a force refresh (<em>Shift</em> + refresh) or if there is no active worker.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerContainer.ready")}} {{readonlyinline}}</dt>
+ <dd>Defines whether a service worker is ready to control a page or not. It returns a {{jsxref("Promise")}} that will never reject, which resolves to a {{domxref("ServiceWorkerRegistration")}} with an {{domxref("ServiceWorkerRegistration.active")}} worker.</dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerContainer.oncontrollerchange")}}</dt>
+ <dd>An event handler fired whenever a {{Event("controllerchange")}} event occurs — when the document's associated {{domxref("ServiceWorkerRegistration")}} acquires a new {{domxref("ServiceWorkerRegistration.active")}} worker.</dd>
+ <dt>{{domxref("ServiceWorkerContainer.onerror")}}</dt>
+ <dd>An event handler fired whenever an {{Event("error")}} event occurs in the associated service workers.</dd>
+ <dt>{{domxref("ServiceWorkerContainer.onmessage")}}</dt>
+ <dd>An event handler fired whenever a {{Event("message")}} event occurs — when incoming messages are received to the {{domxref("ServiceWorkerContainer")}} object (e.g. via a {{domxref("MessagePort.postMessage()")}} call.)</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register()")}} </dt>
+ <dd>Creates or updates a {{domxref("ServiceWorkerRegistration")}} for the given <code>scriptURL</code>.</dd>
+ <dt>{{domxref("ServiceWorkerContainer.getRegistration()")}}</dt>
+ <dd>Gets a {{domxref("ServiceWorkerRegistration")}} object whose scope URL matches the provided document URL.  If the method can't return a {{domxref("ServiceWorkerRegistration")}}, it returns a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" style="text-decoration: underline;" title="The Promise object is used for deferred and asynchronous computations. A Promise is in one of the three states:"><code>Promise</code></a>. </dd>
+ <dt>{{domxref("ServiceWorkerContainer.getRegistrations()")}}</dt>
+ <dd>Returns all {{domxref("ServiceWorkerRegistration")}}s associated with a <code>ServiceWorkerContainer</code> in an array.  If the method can't return {{domxref("ServiceWorkerRegistration")}}s, it returns a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" style="text-decoration: underline;" title="The Promise object is used for deferred and asynchronous computations. A Promise is in one of the three states:"><code>Promise</code></a>. </dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>This code snippet is from the <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/fallback-response/index.html#L126">service worker fallback-response sample</a> (see <a href="http://googlechrome.github.io/samples/service-worker/fallback-response/">fallback-response live</a>). The code checks to see if the browser supports service workers. Then the code registers the service worker and determines if the page is actively controlled by the service worker. If it isn't, it prompts the user to reload the page so the service worker can take control. The code also reports any registration failures.</p>
+
+<pre class="brush: js">if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('service-worker.js', {scope: './'}).then(function() {
+    if (navigator.serviceWorker.controller) {
+      document.querySelector('#status').textContent = 'The service worker is currently handling network operations.';
+      showRequestButtons();
+    } else {
+      document.querySelector('#status').textContent = 'Please reload this page to allow the service worker to handle network operations.';
+    }
+  }).catch(function(error) {
+    document.querySelector('#status').textContent = error;
+  });
+} else {
+  var aElement = document.createElement('a');
+  aElement.href = 'http://www.chromium.org/blink/serviceworker/service-worker-faq';
+  aElement.textContent = 'unavailable';
+  document.querySelector('#status').appendChild(aElement);
+}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#service-worker-container', 'ServiceWorkerContainer')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li><a class="external external-icon" href="https://github.com/mdn/sw-test">Service workers basic code example</a></li>
+ <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
+</ul>
diff --git a/files/de/web/api/serviceworkercontainer/register/index.html b/files/de/web/api/serviceworkercontainer/register/index.html
new file mode 100644
index 0000000000..e900e8085c
--- /dev/null
+++ b/files/de/web/api/serviceworkercontainer/register/index.html
@@ -0,0 +1,122 @@
+---
+title: ServiceWorkerContainer.register()
+slug: Web/API/ServiceWorkerContainer/register
+translation_of: Web/API/ServiceWorkerContainer/register
+---
+<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>
+
+<p>Die <strong><code>register()</code></strong> Methode der <code><a href="/de/docs/Web/API/ServiceWorkerContainer">ServiceWorkerContainer</a></code> Schnittstelle erstellt oder aktualisiert eine <code><a href="/de/docs/Web/API/ServiceWorkerRegistration">ServiceWorkerRegistration</a></code> für die gegebene <code>scriptURL</code>. </p>
+
+<p>Nach erfolgreicher Registrierung verwendet die Service Worker Registrierung die übergebene <code>scriptURL</code> und ihren Bereich für den Navigationsabgleich. Die Methode gibt ein <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> zurück, welches zu einer <code><a href="/de/docs/Web/API/ServiceWorkerRegistration">ServiceWorkerRegistration</a></code> aufgelöst wird. Die Funktion kann bedingungslos aufgerufen werden - Es muss vorher nicht kontrolliert werden, ob eine aktive Registrierung vorhanden ist.</p>
+
+<p>Es entstehen häufig Verwirrungen über die Bedeutung und Verwendung des <code>scope</code>. Da ein ServiceWorker keinen größeren Bereich abdecken kann als seinen einen Pfad, sollte man den Parameter nur verwenden, wenn man einen kleineren Bereich als den Standardbereich abdecken will.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">ServiceWorkerContainer.register(scriptURL, options).then(function(ServiceWorkerRegistration) {
+  // Do something with ServiceWorkerRegistration.
+});</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>scriptURL</code></dt>
+ <dd>Die Url des Service Workers Scripts.</dd>
+ <dt><code>options</code> <code>{{optional_inline}}</code></dt>
+ <dd>Ein Object, welches verschiedene Registrierungsoptionen beinhaltet. Zur Zeit stehen folgende Optionen zur Verfügung:
+ <ul>
+  <li><code>scope</code>: Ein <code><a href="/de/docs/Web/API/USVString">USVString</a></code>, welcher eine URL darstellt, die zur Festlegung des Bereiches des Service Workers verwendet wird. Dies ist normalerweise eine relative URL. Der Standardwert ist die URL, die man bekommen würde, wenn man './' mit dem Pfad des Service Worker Scripts verwenden würde.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>, welches zu einem <code><a href="/de/docs/Web/API/ServiceWorkerRegistration">ServiceWorkerRegistration</a></code> Objekt aufgelöst wird.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js">if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('service-worker.js', {scope: './'}).then(function(registration) {
+    document.querySelector('#status').textContent = 'succeeded';
+  }).catch(function(error) {
+    document.querySelector('#status').textContent = error;
+  });
+} else {
+  // Der verwendete Browser unterstützt Service Worker nicht.
+  var aElement = document.createElement('a');
+  aElement.href = 'http://www.chromium.org/blink/serviceworker/service-worker-faq';
+  aElement.textContent = 'unavailable';
+  document.querySelector('#status').appendChild(aElement);
+}</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#service-worker-container', 'ServiceWorkerContainer')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatiblität">Browserkompatiblität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/de/web/api/sharedworker/index.html b/files/de/web/api/sharedworker/index.html
new file mode 100644
index 0000000000..52ecc8075b
--- /dev/null
+++ b/files/de/web/api/sharedworker/index.html
@@ -0,0 +1,117 @@
+---
+title: SharedWorker
+slug: Web/API/SharedWorker
+tags:
+  - API
+  - Interface
+  - Reference
+  - SharedWorker
+  - WebWorkers
+  - Workers
+translation_of: Web/API/SharedWorker
+---
+<div>{{APIRef("Web Workers API")}}</div>
+
+<p>Das <code><strong>SharedWorker</strong></code> Interface repräsentiert eine spezielle Art von Worker, auf welchen durch mehrere Kontexte zugegeriffen werden kann. Hier kann es sich um verschiedene Tabs, iFrames oder auch Worker handeln. Diese implementieren ein anderes Interface als dedicated Worker und haben einen anderen Global Scope {{domxref("SharedWorkerGlobalScope")}}.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Wenn auf einen SharedWorker von mehreren Browser Kontexten aus zugegriffen wird müssen all diese denselben Urpsrung haben. (Dasselbe Protocol, Host und Port)</p>
+</div>
+
+<h2 id="Konstruktoren">Konstruktoren</h2>
+
+<dl>
+ <dt>{{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}</dt>
+ <dd>Erstellt einen Shared Web Worker, der ein Script zu einer angegebenen URL ausführt.</dd>
+</dl>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<p><em>Erbt Eigenschaften von dem Parent {{domxref("EventTarget")}} und implementiert Eigenschaften von {{domxref("AbstractWorker")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("AbstractWorker.onerror")}}</dt>
+ <dd>Ist ein{{domxref("EventListener")}} der immer aufgerufen wird wenn ein {{domxref("ErrorEvent")}} vom Typ <code>error</code> durch den Worker läuft.</dd>
+ <dt>{{domxref("SharedWorker.port")}} {{readonlyInline}}</dt>
+ <dd>Returnt ein {{domxref("MessagePort")}} Objekt, welches zum Kommunizieren und Kontrollieren des Shared Workers verwendet wird.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<p><em>Erbt Methoden von dem Parent {{domxref("EventTarget")}} und implementiert Methoden von {{domxref("AbstractWorker")}}.</em></p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>In unserem <a class="external external-icon" href="https://github.com/mdn/simple-shared-worker">Grundlegenden Shared Worker Beispiel</a> (<a class="external external-icon" href="http://mdn.github.io/simple-shared-worker/">Shared Worker ausführen</a>), haben wir zwei HTML Seiten, von denen beide etwas JavaScript verwenden um simple Kalkulationen auszuführen. Die verschiedenen Skripte verwenden dasselbe Worker File um die Kalkulation durchzuführen. Beide können auf dieses zugreifen, auch wenn diese in verschiedenen Fenstern ausgeführt werden.</p>
+
+<p>Das folgende Code Beispiel zeigt das Erstellen eines <code>SharedWorker</code> Objekts unter der Verwendung des {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}} Konstruktors. Beide Skripte enthalten:</p>
+
+<pre class="brush: js">var myWorker = new SharedWorker('worker.js');
+</pre>
+
+<p>Beide Skripte greifen dann auf den Worker durch ein {{domxref("MessagePort")}} Objekt zu, welches mithilfe von {{domxref("SharedWorker.port")}} erstellt wurde. Wenn das onmessage Event mithilfe von addEventListener angehängt wurde, wird der Port automatisch gestartet mittels der <code>start()</code> Methode:</p>
+
+<pre class="brush: js">myWorker.port.start();</pre>
+
+<p>Wenn der Port gestartet ist senden beide Skripte Nachrichten an den Worker und behandeln die empfangenen Nachrichten von <code>port.postMessage()</code> und <code>port.onmessage</code>:</p>
+
+<pre class="brush: js">first.onchange = function() {
+  myWorker.port.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+
+second.onchange = function() {
+  myWorker.port.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+
+myWorker.port.onmessage = function(e) {
+  result1.textContent = e.data;
+  console.log('Message received from worker');
+}</pre>
+
+<p>Innerhalb des Workers verwenden wird den {{domxref("SharedWorkerGlobalScope.onconnect")}} Handler um uns an den oben genannten Port zu verbinden. Die mit dem Worker verbundenen Ports sind durch die Eigenschaft <code>ports im</code> {{event("connect")}} Event zugänglich. Anschließend verwenden wir die {{domxref("MessagePort")}} <code>start()</code> Methode um den Port zu starten und verwenden den <code>onmessage</code> Handler um die Nachrichten aus dem Main Thread zu behandeln.</p>
+
+<pre class="brush: js">onconnect = function(e) {
+  var port = e.ports[0];
+
+  port.addEventListener('message', function(e) {
+    var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
+    port.postMessage(workerResult);
+  });
+
+  port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
+}</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#sharedworker", "SharedWorker")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Keine Änderung von {{SpecName("Web Workers")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+
+
+<p>{{Compat("api.SharedWorker")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{domxref("Worker")}}</li>
+ <li><a class="internal" href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Web Worker verwenden</a></li>
+</ul>
diff --git a/files/de/web/api/speechsynthesis/index.html b/files/de/web/api/speechsynthesis/index.html
new file mode 100644
index 0000000000..b90f40aa6f
--- /dev/null
+++ b/files/de/web/api/speechsynthesis/index.html
@@ -0,0 +1,134 @@
+---
+title: SpeechSynthesis
+slug: Web/API/SpeechSynthesis
+translation_of: Web/API/SpeechSynthesis
+---
+<p>{{APIRef("Web Speech API")}}{{SeeCompatTable}}</p>
+
+<p>Die <strong><code>SpeechSynthesis</code></strong>-Schnittstelle der <a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a> ist die Controller-Schnittstelle für den Sprachdienst. Sie kann genutzt werden um Informationen über die Synthesestimmen, die auf dem Gerät verfügbar sind, zu erhalten. Außerdem um die Sprache zu starten, zu pausieren und andere Befehle auszuführen.</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<p><em><code>SpeechSynthesis</code> erbt ebenfalls Eigenschaften seiner Elternschnittstelle, {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("SpeechSynthesis.paused")}} {{readonlyinline}}</dt>
+ <dd>Ein {{domxref("Boolean")}} der <code>true</code> zurückgibt, wenn das <code>SpeechSynthesis</code>-Objekt sich im pausierten Zustand befindet.</dd>
+ <dt>{{domxref("SpeechSynthesis.pending")}} {{readonlyinline}}</dt>
+ <dd>Ein {{domxref("Boolean")}} der <code>true</code> zurückgibt, wenn die Äußerungen-Warteschlange bisher ungesprochene Äußerungen enthält.</dd>
+ <dt>{{domxref("SpeechSynthesis.speaking")}} {{readonlyinline}}</dt>
+ <dd>Ein {{domxref("Boolean")}} der <code>true</code> zurückgibt, wenn eine Äußerung aktuell gesprochen wird — auch wenn <code>SpeechSynthesis</code> sich aktuell im pausierten Zustand befindet.</dd>
+</dl>
+
+<h3 id="Event-Handler">Event-Handler</h3>
+
+<dl>
+ <dt>{{domxref("SpeechSynthesis.onvoiceschanged")}}</dt>
+ <dd>Wird ausgelöst, wenn sich die Liste von {{domxref("SpeechSynthesisVoice")}}-Objekten, die von der {{domxref("SpeechSynthesis.getVoices()")}}-Methode zurückgegeben würde, geändert hat.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<p><em><code>SpeechSynthesis</code> erbt ebenfalls Methoden von seiner Elternschnittstelle, {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("SpeechSynthesis.cancel()")}}</dt>
+ <dd>Entfernt alle Äußerungen aus der Äußerungen-Warteschlange.</dd>
+ <dt>{{domxref("SpeechSynthesis.getVoices()")}}</dt>
+ <dd>Gibt eine Liste von {{domxref("SpeechSynthesisVoice")}}-Objecten zurück die alle verfügbaren Stimmen auf dem aktuellen Gerät repräsentiert.</dd>
+ <dt>{{domxref("SpeechSynthesis.pause()")}}</dt>
+ <dd>Versetzt das <code>SpeechSynthesis</code>-Objekt in den pausierten Zustand.</dd>
+ <dt>{{domxref("SpeechSynthesis.resume()")}}</dt>
+ <dd>Versetzt das <code>SpeechSynthesis</code>-Object in den nicht-pausierten Zustand: setzt es fort, wenn es bereits pausiert war.</dd>
+ <dt>{{domxref("SpeechSynthesis.speak()")}}</dt>
+ <dd>Fügt eine {{domxref("SpeechSynthesisUtterance", "Äußerung")}} Äußerung zur Äußerungen-Warteschlange hinzu; sie wird gesprochen, wenn alle anderen davor eingereihten Äußerungen fertig gesprochen wurden.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>In our basic <a href="https://github.com/mdn/web-speech-api/tree/master/speak-easy-synthesis">Speech synthesiser demo</a>, we first grab a reference to the SpeechSynthesis controller using <code>window.speechSynthesis</code>. After defining some necessary variables, we retrieve a list of the voices available using {{domxref("SpeechSynthesis.getVoices()")}} and populate a select menu with them so the user can choose what voice they want.</p>
+
+<p>Inside the <code>inputForm.onsubmit</code> handler, we stop the form submitting with <a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a>,  create a new {{domxref("SpeechSynthesisUtterance")}} instance containing the text from the text {{htmlelement("input")}}, set the utterance's voice to the voice selected in the {{htmlelement("select")}} element, and start the utterance speaking via the {{domxref("SpeechSynthesis.speak()")}} method.</p>
+
+<pre class="brush: js">var synth = window.speechSynthesis;
+
+var inputForm = document.querySelector('form');
+var inputTxt = document.querySelector('.txt');
+var voiceSelect = document.querySelector('select');
+
+var pitch = document.querySelector('#pitch');
+var pitchValue = document.querySelector('.pitch-value');
+var rate = document.querySelector('#rate');
+var rateValue = document.querySelector('.rate-value');
+
+var voices = [];
+
+function populateVoiceList() {
+  voices = synth.getVoices();
+
+  for(i = 0; i &lt; voices.length ; i++) {
+    var option = document.createElement('option');
+    option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
+
+    if(voices[i].default) {
+      option.textContent += ' -- DEFAULT';
+    }
+
+    option.setAttribute('data-lang', voices[i].lang);
+    option.setAttribute('data-name', voices[i].name);
+    voiceSelect.appendChild(option);
+  }
+}
+
+populateVoiceList();
+if (speechSynthesis.onvoiceschanged !== undefined) {
+  speechSynthesis.onvoiceschanged = populateVoiceList;
+}
+
+inputForm.onsubmit = function(event) {
+  event.preventDefault();
+
+  var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
+  var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
+  for(i = 0; i &lt; voices.length ; i++) {
+    if(voices[i].name === selectedOption) {
+      utterThis.voice = voices[i];
+    }
+  }
+  utterThis.pitch = pitch.value;
+  utterThis.rate = rate.value;
+  synth.speak(utterThis);
+
+  inputTxt.blur();
+}</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Speech API', '#tts-section', 'SpeechSynthesis')}}</td>
+   <td>{{Spec2('Web Speech API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wurde aus strukturierten Daten erzeugt. Wenn du zu den Daten beitragen möchtest, lies bitte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und sende uns einen Pull-Request.</div>
+
+<p>{{Compat("api.SpeechSynthesis")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a></li>
+</ul>
diff --git a/files/de/web/api/storage/clear/index.html b/files/de/web/api/storage/clear/index.html
new file mode 100644
index 0000000000..5e6c6d5678
--- /dev/null
+++ b/files/de/web/api/storage/clear/index.html
@@ -0,0 +1,61 @@
+---
+title: Storage.clear()
+slug: Web/API/Storage/clear
+tags:
+  - API Methode Storage
+translation_of: Web/API/Storage/clear
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p><font><font>Die Methode </font></font><code>clear()</code> der {{domxref("Storage")}}-Schnittstelle löscht sämtliche Datensätze des Objekts.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js"><em>storage</em>.clear();</pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p><font><font>Die folgende Funktion speichert drei Datensätze und löscht sie abschließend mit </font></font><code>clear()</code>.</p>
+
+<pre class="brush: js">function populateStorage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'miGato.png');
+
+  localStorage.clear();
+}</pre>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Weitere Beispiele sind im <a href="https://mdn.github.io/dom-examples/web-storage/">Web-Storage-Demo</a> zu finden.</p>
+</div>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-clear', 'Storage.clear')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("api.Storage.clear")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></p>
diff --git a/files/de/web/api/storage/getitem/index.html b/files/de/web/api/storage/getitem/index.html
new file mode 100644
index 0000000000..364c3cbc83
--- /dev/null
+++ b/files/de/web/api/storage/getitem/index.html
@@ -0,0 +1,78 @@
+---
+title: Storage.getItem()
+slug: Web/API/Storage/getItem
+tags:
+  - API Methode Storage
+translation_of: Web/API/Storage/getItem
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p>Die Methode <code>getItem()</code> der {{domxref("Storage")}}-Schnittstelle gibt bei Nennung des Schlüssels im Parameter keyName den Wert des zugehörigen Datensatzes zurück.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>aValue</em> = <em>storage</em>.getItem(<em>keyName</em>);
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><em><code>keyName</code></em></dt>
+ <dd>Ein {{domxref("DOMString")}}, der den Namen des Schlüssels, dessen Wert ausgelesen werden soll, enthält.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein {{domxref("DOMString")}}, der den Wert des Schlüssels enthält. Falls der Schlüssel nicht existiert, wird <code>null</code> zurückgegeben.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Die folgende Funktion liest drei Datenwerte aus dem lokalen Speicher und verwendet sie, um einen benutzerdefinierten Style auf einer Seite zu setzen.</p>
+
+<pre class="brush: js">function setStyles() {
+  var currentColor = localStorage.getItem('bgcolor');
+  var currentFont = localStorage.getItem('font');
+  var currentImage = localStorage.getItem('image');
+
+  document.getElementById('bgcolor').value = currentColor;
+  document.getElementById('font').value = currentFont;
+  document.getElementById('image').value = currentImage;
+
+  htmlElem.style.backgroundColor = '#' + currentColor;
+  pElem.style.fontFamily = currentFont;
+  imgElem.setAttribute('src', currentImage);
+}</pre>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Weitere Beispiele sind im <a href="https://mdn.github.io/dom-examples/web-storage/">Web-Storage-Demo</a> zu finden.</p>
+</div>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-getitem', 'Storage.getItem')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("api.Storage.getItem")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de-DE/docs/Web/API/Storage/setItem">Storage.setItem()</a></li>
+ <li><a href="/de-DE/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></li>
+</ul>
diff --git a/files/de/web/api/storage/index.html b/files/de/web/api/storage/index.html
new file mode 100644
index 0000000000..7b5d09b041
--- /dev/null
+++ b/files/de/web/api/storage/index.html
@@ -0,0 +1,161 @@
+---
+title: Storage
+slug: Web/API/Storage
+translation_of: Web/API/Storage
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p>Die <code>Storage</code>-Schnittstelle der Web-Storage-API ermöglicht den Zugriff auf einfache Schlüssel-Wert-Datenbanken des Browsers, in denen Daten mit einer Domain verknüpft gespeichert werden können.</p>
+
+<p>In {{domxref("Window.sessionStorage")}} gespeicherte Daten verfallen mit Ablauf der Sitzung (in der Regel dem Schließen des Browsers), {{domxref("Window.localStorage")}} speichert die Daten hingegen grundsätzlich zeitlich unbegrenzt.</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt>{{domxref("Storage.length")}} {{readonlyInline}}</dt>
+ <dd>Anzahl der in diesem <code>Storage</code>-Objekt gespeicherten Datensätze.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<dl>
+ <dt>{{domxref("Storage.key()")}}</dt>
+ <dd>Gibt unter Angabe einer Zahl n den Schlüssel des n-ten Datensatzes zurück.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Storage.getItem()")}}</dt>
+ <dd>Gibt den zum Schlüssel gehörigen Wert zurück.</dd>
+ <dt>{{domxref("Storage.setItem()")}}</dt>
+ <dd>Speichert den gegebenen Wert im Storage-Objekt unter dem gegebenen Schlüssel. Ist unter diesem Schlüssel bereits ein Datensatz vorhanden, wird sein Wert mit dem gegebenen überschrieben.</dd>
+ <dt>{{domxref("Storage.removeItem()")}}</dt>
+ <dd>Löscht den Datensatz des gegebenen Schlüssels.</dd>
+ <dt>{{domxref("Storage.clear()")}}</dt>
+ <dd>Löscht sämtliche Datensätze des Storage-Objekts.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>In diesem Beispiel wird auf das <code>Storage</code>-Objekt <code>localStorage</code> zugegriffen.</p>
+
+<p>Zuerst wird mit <code>!localStorage.getItem('bgcolor') </code>geprüft, ob das Objekt keinen Datensatz namens <code>bgcolor</code> enthält. Ist der Datensatz <code>bgcolor</code> nicht vorhanden, wird <code>populateStorage()</code> aufgerufen, um Werte aus der Seite auszulesen und mittels {{domxref("Storage.setItem()")}} im <code>Storage</code>-Objekt zu speichern.<br>
+ Anschließend folgt der Aufruf der Funktion <code>setStyles()</code>, die alle Daten mittels {{domxref("Storage.getItem()")}} ausliest und die Darstellung der Seite entsprechend ändert.<br>
+  </p>
+
+<pre class="brush: js">if(!localStorage.getItem('bgcolor')) {
+  populateStorage();
+}
+setStyles();
+
+function populateStorage() {
+  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
+  localStorage.setItem('font', document.getElementById('font').value);
+  localStorage.setItem('image', document.getElementById('image').value);
+}
+
+function setStyles() {
+  var currentColor = localStorage.getItem('bgcolor');
+  var currentFont = localStorage.getItem('font');
+  var currentImage = localStorage.getItem('image');
+
+  document.getElementById('bgcolor').value = currentColor;
+  document.getElementById('font').value = currentFont;
+  document.getElementById('image').value = currentImage;
+
+  htmlElem.style.backgroundColor = '#' + currentColor;
+  pElem.style.fontFamily = currentFont;
+  imgElem.setAttribute('src', currentImage);
+}</pre>
+
+<div class="note">
+<p><strong>Anmerkung</strong>: Dieses Beispiel kann unter <a href="https://github.com/mdn/web-storage-demo">Web Storage Demo</a> ausprobiert werden.</p>
+</div>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Storage', '#the-storage-interface', 'Storage')}}</td>
+   <td>{{Spec2('Web Storage')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>localStorage</td>
+   <td>4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>sessionStorage</td>
+   <td>5</td>
+   <td>{{CompatUnknown}}</td>
+   <td>2</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>3.2[1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Seit iOS 5.1 speichert Safari Mobile in <code>localStorage</code> abgelegte Daten im Cache-Verzeichnis. Dieses wird in unregelmäßigen Abständen vom Betriebssystem teilweise geleert, spätestens jedoch, sobald nur noch wenig Speicherplatz zur Verfügung steht.<br>
+ Desweiteren verhindert der private Modus von Safari Mobile jegliche Nutzung von <code>localStorage</code>.</p>
+
+<p>Die Speicherkapazität von <code>localStorage</code> und <a class="new" href="https://developer.mozilla.org/de/docs/Web/API/SessionStorage" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben; bitte erwäge, mitzuwirken!"><code>sessionStorage</code></a>. unterscheidet sich von Browser zu Browser (siehe diese <a class="external external-icon" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">detailierte Aufstellung der Speicherkapazitäten für verschiedene Browser</a>).</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></p>
diff --git a/files/de/web/api/storage/key/index.html b/files/de/web/api/storage/key/index.html
new file mode 100644
index 0000000000..65e56c9ec0
--- /dev/null
+++ b/files/de/web/api/storage/key/index.html
@@ -0,0 +1,75 @@
+---
+title: Storage.key()
+slug: Web/API/Storage/key
+tags:
+  - API Methode Storage
+translation_of: Web/API/Storage/key
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p>Die Methode <code>key()</code> der {{domxref("Storage")}}-Schnittstelle gibt durch Übergabe des Parameters n den Schlüssel des n-ten Datensatzes zurück.<br>
+ Die Reihenfolge der Schlüssel folgt keiner Vorgabe und hängt alleine vom Browser ab.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>aKeyName</em> = <em>storage</em>.key(<em>index</em>);</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><em>index</em></dt>
+ <dd>Ein Integer, der die Position des gewünschten Schlüssels bestimmt. Die Nummerierung beginnt bei 0.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein {{domxref("DOMString")}} mit dem Namen des Schlüssels.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Die folgende Funktion liest in einer Schleife für jeden Datensatz den Schlüssel und übergibt diesen an die Funktion callback():</p>
+
+<pre class="brush: js">function forEachKey(callback) {
+  for (var i = 0; i &lt; localStorage.length; i++) {
+    callback(localStorage.key(i));
+  }
+}</pre>
+
+<p>Nachfolgend wird in einer Schleife zu jedem Datensatz erst der Schlüssel, dann mit dem Schlüssel der Wert gelesen und dieser in der Konsole ausgegeben.</p>
+
+<pre class="brush: js">for (var i = 0; i &lt; localStorage.length; i++) {
+   var key = localStorage.key(i);
+   var value = localStorage.getItem(key);
+   console.log(value);
+}</pre>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Weitere Beispiele sind in der <a href="https://mdn.github.io/dom-examples/web-storage/">Web-Storage-Demo</a> zu finden.</p>
+</div>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-key', 'Storage.key')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("api.Storage.key")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></p>
diff --git a/files/de/web/api/storage/length/index.html b/files/de/web/api/storage/length/index.html
new file mode 100644
index 0000000000..767ef0c21b
--- /dev/null
+++ b/files/de/web/api/storage/length/index.html
@@ -0,0 +1,63 @@
+---
+title: Storage.length
+slug: Web/API/Storage/length
+tags:
+  - API Eigenschaft Storage
+translation_of: Web/API/Storage/length
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p>Die <code>length</code>-Eigenschaft der {{domxref("Storage")}}-Schnittstelle enthält die Anzahl der im <code>Storage</code>-Objekt gespeicherten Datensätze.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>aLength</em> = <em>Storage</em>.length;</pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein Integer.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Die folgende Funktion fügt drei Datensätze hinzu und liest abschließend die Anzahl der vorhandenen Datensätze:</p>
+
+<pre class="brush: js">function populateStorage() {
+  localStorage.setItem('bgcolor', 'yellow');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'cats.png');
+
+  localStorage.length; // sollte 3 zurückgeben
+}</pre>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Weitere Beispiele sind im <a href="https://mdn.github.io/dom-examples/web-storage/">Web-Storage-Demo</a> zu finden.</p>
+</div>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-length', 'Storage.length')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("api.Storage.length")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></li>
+</ul>
diff --git a/files/de/web/api/storage/removeitem/index.html b/files/de/web/api/storage/removeitem/index.html
new file mode 100644
index 0000000000..6b180f52db
--- /dev/null
+++ b/files/de/web/api/storage/removeitem/index.html
@@ -0,0 +1,68 @@
+---
+title: Storage.removeItem()
+slug: Web/API/Storage/removeItem
+tags:
+  - API Methode Storage Speicher
+translation_of: Web/API/Storage/removeItem
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p>Die Methode <code>removeItem()</code> der {{domxref("Storage")}}-Schnittstelle löscht den im Parameter keyName benannten Datensatz aus dem Speicher. Ist kein Datensatz unter diesem Schlüssel vorhanden, tut diese Funktion nichts.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>storage</em>.removeItem(<em>keyName</em>);</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><em><u>keyName</u></em></dt>
+ <dd>Ein {{domxref("DOMString")}}, der den Schlüssel des zu löschenden Datensatzes enthält.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Keiner.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Die nachfolgende Funktion speichert drei Datensätze und löscht abschließend den Datensatz mit dem Schlüssel <code>image</code>.</p>
+
+<pre class="brush: js">function populateStorage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'myCat.png');
+
+  localStorage.removeItem('image');
+}</pre>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Weitere Beispiele sind im <a href="https://mdn.github.io/dom-examples/web-storage/">Web-Storage-Demo</a> zu finden.</p>
+</div>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-removeitem', 'Storage.removeItem')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("api.Storage.removeItem")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></p>
diff --git a/files/de/web/api/storage/setitem/index.html b/files/de/web/api/storage/setitem/index.html
new file mode 100644
index 0000000000..94145670a9
--- /dev/null
+++ b/files/de/web/api/storage/setitem/index.html
@@ -0,0 +1,146 @@
+---
+title: Storage.setItem()
+slug: Web/API/Storage/setItem
+tags:
+  - API
+  - Méthode
+  - Referenz
+  - Speicher
+  - Webspeicher
+  - localStorage
+  - sessionStorage
+translation_of: Web/API/Storage/setItem
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p>Die Methode <code>setItem()</code> der {{domxref("Storage")}}-Schnittstelle fügt das gegebene Schlüssel-Wert-Paar zum Speicher hinzu oder überschreibt ein bereits unter diesem Schlüssel im Speicher vorhandenes.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>storage</em>.setItem(<em>keyName</em>, <em>keyValue</em>);</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><em>keyName</em></dt>
+ <dd>Ein {{domxref("DOMString")}} mit dem Schlüssel des Datensatzes, der erstellt oder überschrieben werden soll.</dd>
+ <dt><em>keyValue</em></dt>
+ <dd>Ein {{domxref("DOMString")}} mit dem Wert, der in den mit keyName benannten Datensatz geschrieben werden soll.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Keiner.</p>
+
+<h3 id="Fehler">Fehler</h3>
+
+<p><code>setItem()</code> kann bei vollem Speicher eine Exception auslösen. Insbesondere im mobilen Safari (ab iOS 5) wird sie immer ausgelöst, falls der Nutzer sich im privaten Modus befindet, da Safari in diesem Modus das Speicherkontingent auf 0 Bytes setzt. Andere Browser nutzen für den privaten Modus einen separaten Daten-Container.<br>
+ Deshalb sollte immer sichergestellt sein, dass <strong>ein möglicher Fehler eingeplant und entsprechend behandelt wird.</strong></p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Die folgende Funktion erstellt drei Datensätze im <a href="/de/docs/Web/API/Window/localStorage">localStorage</a>-Objekt.</p>
+
+<pre class="syntaxbox">function populateStorage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'myCat.png');
+}</pre>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Weitere Beispiele sind im <a href="https://mdn.github.io/dom-examples/web-storage/">Web-Storage-Demo</a> zu finden.</p>
+</div>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-setitem', 'Storage.setItem')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>localStorage</td>
+   <td>4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>sessionStorage</td>
+   <td>5</td>
+   <td>{{CompatUnknown}}</td>
+   <td>2</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Alle Browser haben verschiedene Kapazitäten für localStorage und sessionStorage. Hier gibt es eine <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">detaillierten Übersicht der Kapazitäten verschiedener Browser</a>.</p>
+
+<div class="note">
+<p><strong>Hinweis: </strong>Seit iOS 5.1, speichert Safari Mobile localStorage-Daten im Cache-Ordner, der gelegentlich durch das Betriebssystem geleert wird, insbesondere falls nur noch wenig freier Speicher zur Verfügung steht.</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de-DE/docs/Web/API/Storage/getItem">Storage.getItem()</a></li>
+ <li><a href="/de-DE/docs/Web/API/Storage/removeItem">Storage.removeItem()</a></li>
+ <li><a href="/de-DE/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></li>
+</ul>
diff --git a/files/de/web/api/transferable/index.html b/files/de/web/api/transferable/index.html
new file mode 100644
index 0000000000..20ed3dfccd
--- /dev/null
+++ b/files/de/web/api/transferable/index.html
@@ -0,0 +1,122 @@
+---
+title: Transferable
+slug: Web/API/Transferable
+tags:
+  - API
+  - Interface
+  - Reference
+  - Web Workers
+  - postMessage
+translation_of: Web/API/Transferable
+---
+<p>{{ ApiRef("HTML DOM") }}</p>
+
+<p>Das <code><strong>Transferable</strong></code> Interface stellt ein Objekt dar, welches zwischen unterschiedlichen Ausführungskontexten, wie zum Beispiel dem main thread und Web Workers, ausgetauscht werden kann.</p>
+
+<p>Es existiert von dem Interface keine Instanz und kein Objekt. Ebenso definiert es keinerlei Eigenschaften und Methoden. Zweck des <code><strong>Transferable</strong></code> Interface ist lediglich die Möglichkeit der Kennzeichnung von Objekten für die spezifische Situation eines Transfers und Austauschs etwa zwischen Anwendung und {{domxref("Worker")}} via {{domxref("Worker.postMessage()")}}.</p>
+
+<p>Die Typen {{jsxref("ArrayBuffer")}}, {{domxref("MessagePort")}} and {{domxref("ImageBitmap")}} implementieren dieses Interface.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Das </em><em><code>Transferable</code></em><em> Interface implementiert und erbt keine spezifischen Eigenschaften.</em></p>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Das </em><em><code>Transferable</code> Interface implementiert und erbt keine spezifischen Methoden.</em></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "infrastructure.html#transferable-objects", "Transferable")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Keine Änderung von {{SpecName("HTML5 W3C")}}, wenngleich das neue {{domxref("CanvasProxy")}} auch <code>Transferable</code> implementiert.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "infrastructure.html#transferable-objects", "Transferable")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10.0 [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>MessagePort</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>10.0 [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>MessagePort</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer 10 only accepts a single {{domxref("Transferable")}} object as parameter, but not an array.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Interfaces implementing it: {{jsxref("ArrayBuffer")}}, {{domxref("MessagePort")}}, {{domxref("ImageBitmap")}}.</li>
+</ul>
diff --git a/files/de/web/api/url/createobjecturl/index.html b/files/de/web/api/url/createobjecturl/index.html
new file mode 100644
index 0000000000..f3668e7f70
--- /dev/null
+++ b/files/de/web/api/url/createobjecturl/index.html
@@ -0,0 +1,139 @@
+---
+title: URL.createObjectURL()
+slug: Web/API/URL/createObjectURL
+tags:
+  - API
+  - Experimentell
+  - Méthode
+  - URL
+  - URL API
+translation_of: Web/API/URL/createObjectURL
+---
+<p>{{ApiRef("URL API")}}{{SeeCompatTable}}</p>
+
+<h2 id="Summary" name="Summary">Zusammenfassung</h2>
+
+<p>Die statische Methode <strong><code>URL.createObjectURL()</code></strong> erzeugt einen {{domxref("DOMString")}}, welcher eine URL enthält, die das übergebene Objekt repräsentiert. Die Gültigkeitsdauer der URL ist von dem Dokumentobjekt {{domxref("document")}} abhängig, in dessen Fenster sie erzeugt wurde. Die neue Objekt-URL repräsentiert das angegebene {{domxref("File")}}- bzw. {{domxref("Blob")}}-Objekt.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>objectURL</em> = URL.createObjectURL(<em>blob</em>);
+</pre>
+
+<h2 id="Parameter">Parameter</h2>
+
+<dl>
+ <dt><em>blob</em></dt>
+</dl>
+
+<dl>
+ <dd>Ist ein {{domxref("File")}}-Objekt oder ein {{domxref("Blob")}}-Objekt, für das eine URL generiert werden soll.</dd>
+</dl>
+
+<ul>
+</ul>
+
+<h2 id="Example" name="Example">Beispiele</h2>
+
+<p>Siehe "<a href="/en-US/docs/Using_files_from_web_applications#Example_Using_object_URLs_to_display_images" title="https://developer.mozilla.org/en/Using_files_from_web_applications#Example:_Using_object_URLs_to_display_images">Using object URLs to display images</a>".</p>
+
+<h2 id="Notes" name="Notes">Anmerkungen</h2>
+
+<p>Immer, wenn <code>createObjectURL()</code> aufgerufen wird, wird eine neue Objekt-URL erzeugt, auch wenn schon eine URL für das gleiche Objekt existiert. Jede dieser URLs muss durch einen Aufruf von {{domxref("URL.revokeObjectURL()")}}  wieder freigegeben werden, sofern sie nicht mehr benötigt wird. Wenn das Dokument geschlossen wird, gibt der Browser die URLs automatisch wieder frei. Für eine optimale Performance and Speichernutzung sollten die URLs freigegeben werden, sofern sichergestellt werden kann, dass sie nicht mehr benötigt werden.</p>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API', '#dfn-createObjectURL', 'URL')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Erste Definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>8 mit vorangestelltem <code>webkitURL</code> für <code>URL</code><br>
+    {{CompatChrome(23)}}</td>
+   <td>{{CompatGeckoDesktop(2)}}</td>
+   <td>{{CompatIE(10)}}</td>
+   <td>{{CompatOpera(15)}}</td>
+   <td>{{CompatSafari(6)}} mit vorangestelltem <code>webkitURL</code> für <code>URL</code><br>
+    {{CompatSafari(7)}}</td>
+  </tr>
+  <tr>
+   <td>In a {{ domxref("Worker", "Web Worker") }}</td>
+   <td>10 mit vorangestelltem <code>webkitURL</code> für <code>URL</code><br>
+    {{CompatChrome(23)}}</td>
+   <td>{{CompatGeckoDesktop(21)}}</td>
+   <td>{{CompatIE(11)}}</td>
+   <td>{{CompatOpera(15)}}</td>
+   <td>{{CompatSafari(6)}} mit vorangestelltem <code>webkitURL</code> für <code>URL</code><br>
+    {{CompatSafari(7)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table" style="height: 57px; width: 922px;">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome for Android</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>18 mit vorangestelltem <code>webkitURL</code> für <code>URL</code></td>
+   <td>4.0 mit vorangestelltem <code>webkitURL</code> für <code>URL</code></td>
+   <td>{{CompatGeckoMobile(14)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(15)}} mit vorangestelltem <code>webkitURL</code> für <code>URL</code></td>
+   <td>6.0 mit vorangestelltem <code>webkitURL</code> für <code>URL</code></td>
+  </tr>
+  <tr>
+   <td>In einem {{ domxref("Worker", "Web Worker") }}</td>
+   <td>18 mit vorangestelltem <code>webkitURL</code> für <code>URL</code></td>
+   <td>{{CompatVersionUnknown}} mit vorangestelltem <code>webkitURL</code> für <code>URL</code></td>
+   <td>{{CompatGeckoMobile(14)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(15)}} mit vorangestelltem <code>webkitURL</code> für <code>URL</code></td>
+   <td>6.0 mit vorangestelltem <code>webkitURL</code> für <code>URL</code></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{domxref("URL.revokeObjectURL()")}}</li>
+ <li><a href="/en-US/docs/Using_files_from_web_applications" title="Using files from web applications">Using files from web applications</a></li>
+</ul>
diff --git a/files/de/web/api/url/index.html b/files/de/web/api/url/index.html
new file mode 100644
index 0000000000..6f1bb53686
--- /dev/null
+++ b/files/de/web/api/url/index.html
@@ -0,0 +1,222 @@
+---
+title: URL
+slug: Web/API/URL
+tags:
+  - API
+  - Experimental
+  - NeedsTranslation
+  - TopicStub
+  - URL API
+translation_of: Web/API/URL
+---
+<div>{{ApiRef("URL API")}} {{SeeCompatTable}}</div>
+
+<p>The <strong><code>URL</code></strong><strong> </strong>interface represent an object providing static methods used for creating object URLs.</p>
+
+<p>When using a user agent where no constructor has been implemented yet, it is possible to access such an object using the {{domxref("Window.URL")}} properties (prefixed with Webkit-based browser as <code>Window.webkitURL</code>).</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Implements properties defined in {{domxref("URLUtils")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("URLUtils.href")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the whole URL.</dd>
+ <dt>{{domxref("URLUtils.protocol")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the protocol scheme of the URL, including the final <code>':'</code>.</dd>
+ <dt>{{domxref("URLUtils.host")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the host, that is the <em>hostname</em>, a <code>':'</code>, and the <em>port</em> of the URL.</dd>
+ <dt>{{domxref("URLUtils.hostname")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the domain of the URL.</dd>
+ <dt>{{domxref("URLUtils.port")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the port number of the URL.</dd>
+ <dt>{{domxref("URLUtils.pathname")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing an initial <code>'/'</code> followed by the path of the URL.</dd>
+ <dt>{{domxref("URLUtils.search")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing a <code>'?'</code> followed by the parameters of the URL.</dd>
+ <dt>{{domxref("URLUtils.hash")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing a <code>'#'</code> followed by the fragment identifier of the URL.</dd>
+ <dt>{{domxref("URLUtils.username")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the username specified before the domain name.</dd>
+ <dt>{{domxref("URLUtils.password")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the password specified before the domain name.</dd>
+ <dt>{{domxref("URLUtils.origin")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} containing the origin of the URL, that is its scheme, its domain and its port.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("URLUtils.searchParams")}}</dt>
+ <dd>Returns a {{domxref("URLSearchParams")}} object allowing to access the GET query arguments contained in the URL.</dd>
+</dl>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("URL.URL", "URL()")}}</dt>
+ <dd>Creates and return a <code>URL</code> object composed from the given parameters.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>The <code>URL</code> interface implements methods defined in {{domxref("URLUtils")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("URLUtils.toString()")}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} containing the whole URL. It is a synonym for {{domxref("URLUtils.href")}}, though it can't be used to modify the value.</dd>
+</dl>
+
+<h2 id="Static_methods">Static methods</h2>
+
+<dl>
+ <dt>{{ domxref("URL.createObjectURL()") }}</dt>
+ <dd>Returns a {{domxref("DOMString")}} containing a unique blob URL, that is a URL with <code>blob:</code> as its scheme, followed by an opaque string uniquely identifying the object in the browser.</dd>
+ <dt>{{ domxref("URL.revokeObjectURL()") }}</dt>
+ <dd>Revokes an object URL previously created using {{ domxref("URL.createObjectURL()") }}.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API', '#creating-revoking', 'URL')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Added the static methods <code>URL.createObjectURL()</code> and <code>URL.revokeObjectURL</code><code>()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('URL', '#api', 'Node')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Initial definition (implements <code>URLUtils</code>).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>8.0 as <code>webkitURL</code><br>
+    35</td>
+   <td>{{CompatGeckoDesktop("2.0")}} (non-standard name) [1]<br>
+    {{CompatGeckoDesktop("19.0")}}</td>
+   <td>10.0</td>
+   <td>15.0 as <code>webkitURL<br>
+    {{CompatVersionUnknown}}</code></td>
+   <td>6.0 as <code>webkitURL</code><br>
+    7.0</td>
+  </tr>
+  <tr>
+   <td><code>URLUtils</code> properties</td>
+   <td>32</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>19</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>username</code>, <code>password</code>, and <code>origin</code></td>
+   <td>32</td>
+   <td>{{CompatGeckoDesktop("26.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>19</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>protocol, host, hostname, port, href</code>, <code>pathname</code>, <code>search</code>, <code>hash</code></td>
+   <td>32</td>
+   <td>{{CompatGeckoDesktop("22.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>19</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>searchParams</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("29.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>19</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}as <code>webkitURL</code></td>
+   <td>{{CompatGeckoMobile("14.0")}}(non-standard name) [1]<br>
+    {{CompatGeckoMobile("19.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>15.0 as <code>webkitURL</code></td>
+   <td>
+    <p>6.0 as <code>webkitURL</code></p>
+
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>URLUtils </code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>username</code>, <code>password</code>, <code>href</code>, and <code>origin</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("26.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] From Gecko 2 (Firefox 4) to Gecko 18 included, Gecko supported this interface with the non-standard <code>nsIDOMMozURLProperty</code> internal type. As the only to access such an object was through {{domxref("window.URL")}}, in practice, this didn't make any difference.</p>
+
+<h2 id="Chrome_Code_-_Scope_Availability">Chrome Code - Scope Availability</h2>
+
+<p>To use from chrome code, JSM and Bootstrap scope, you have to import it like this:</p>
+
+<pre class="brush: js">Cu.importGlobalProperties(['URL']);
+</pre>
+
+<p><code>URL</code> is available in Worker scopes.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Property allowing to get such an object: {{domxref("Window.URL")}}.</li>
+ <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+</ul>
diff --git a/files/de/web/api/url/protocol/index.html b/files/de/web/api/url/protocol/index.html
new file mode 100644
index 0000000000..08d4ad6b6f
--- /dev/null
+++ b/files/de/web/api/url/protocol/index.html
@@ -0,0 +1,61 @@
+---
+title: URL.protocol
+slug: Web/API/URL/protocol
+tags:
+  - API
+  - Property
+  - Protocols
+  - Reference
+  - URL
+translation_of: Web/API/URL/protocol
+---
+<div>{{ApiRef("URL API")}}</div>
+
+<p>Die <code><strong>protocol </strong></code>Eigenschaft der {{domxref("URL")}} Schnittstelle ist ein {{domxref("USVString")}} der das Protokollschema der URL, einschließlich des finalen <code>':' </code>darstellt.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntax"><code>Syntax</code></h2>
+
+<pre class="syntaxbox"><em>string</em> = <em>object</em>.protocol;
+<em>object</em>.protocol = <em>string</em>;
+</pre>
+
+<h3 id="Wert">Wert</h3>
+
+<p>Ein {{domxref("USVString")}}.</p>
+
+<h2 id="Beispiele"><code>Beispiele</code></h2>
+
+<pre class="brush: js">var url = new URL('https://developer.mozilla.org/en-US/docs/Web/API/URL/protocol');
+var result = url.protocol; // Gibt "https:" zurück.
+</pre>
+
+<h2 id="Spezifikationen"><code>Spezifikationen</code></h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('URL', '#dom-url-protocol', 'protocol')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Erste Definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität"><code>Browserkompatibilität</code></h2>
+
+<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wurde automatisch aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen wollen, besuchen Sie <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und senden Sie uns eine pull-request.</div>
+
+<p>{{Compat("api.URL.protocol")}}</p>
+
+<h2 id="Siehe_auch"><code>Siehe auch</code></h2>
+
+<ul>
+ <li>Die {{domxref("URL")}} Schnittstelle zu der es gehört.</li>
+</ul>
diff --git a/files/de/web/api/urlsearchparams/index.html b/files/de/web/api/urlsearchparams/index.html
new file mode 100644
index 0000000000..3c635d180d
--- /dev/null
+++ b/files/de/web/api/urlsearchparams/index.html
@@ -0,0 +1,211 @@
+---
+title: URLSearchParams
+slug: Web/API/URLSearchParams
+tags:
+  - API
+  - Experimentell
+  - Interface
+  - Referenz
+  - URL API
+translation_of: Web/API/URLSearchParams
+---
+<p>{{ApiRef("URL API")}}</p>
+
+<p>Das <strong><code>URLSearchParams</code></strong> Interface definiert Hilfsmethoden um mit dem Query-String einer URL zu arbeiten.</p>
+
+<p>Ein Objekt, welches <code>URLSearchParams</code> implementiert, kann auch direkt in einem {{jsxref("Statements/for...of", "for...of")}} Konstrukt genutzt werden, anstatt {{domxref('URLSearchParams.entries()', 'entries()')}}: <code>for (var p of mySearchParams)</code> ist äquivalent zu <code>for (var p of mySearchParams.entries())</code>.</p>
+
+<h2 id="Konstruktor">Konstruktor</h2>
+
+<dl>
+ <dt>{{domxref("URLSearchParams.URLSearchParams", 'URLSearchParams()')}}</dt>
+ <dd>Konstruktor erzeugt ein <code>URLSearchParams</code> Objekt von einem Query-String.</dd>
+</dl>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<p><em>Dieses Interface erbt keine Eigenschaften.</em></p>
+
+<h2 id="Methoden">Methoden</h2>
+
+<p><em>Dieses Interface erbt keine Methoden.</em></p>
+
+<dl>
+ <dt>{{domxref("URLSearchParams.append()")}}</dt>
+ <dd>Hängt ein Schlüssel/Wert - Paar an den Query-String.</dd>
+ <dt>{{domxref("URLSearchParams.delete()")}}</dt>
+ <dd>Löscht einen Schlüssel und den zugehörigen Wert aus dem Query-String.</dd>
+ <dt>{{domxref("URLSearchParams.entries()")}}</dt>
+ <dd>Gibt einen {{jsxref("Iteration_protocols","Iterator")}} über alle Schlüssel/Wert - Paare im Query-String.</dd>
+ <dt>{{domxref("URLSearchParams.get()")}}</dt>
+ <dd>Gibt den ersten Wert, der im Query-String mit einem Schlüssel assoziiert ist.</dd>
+ <dt>{{domxref("URLSearchParams.getAll()")}}</dt>
+ <dd>Gibt alle Werte, die im Query-String mit einem Schlüssel assoziiert sind.</dd>
+ <dt>{{domxref("URLSearchParams.has()")}}</dt>
+ <dd>Gibt einen {{jsxref("Boolean")}}, der anzeigt ob ein Schlüssel im Query-String vorkommt.</dd>
+ <dt>{{domxref("URLSearchParams.keys()")}}</dt>
+ <dd>Gibt einen {{jsxref("Iteration_protocols", "Iterator")}} über alle Schlüssel im Query-String.</dd>
+ <dt>{{domxref("URLSearchParams.set()")}}</dt>
+ <dd>Setzt den Wert eines Schlüssels. Wenn der Schlüssel mehrfach im Query-String vorkommt, werden die Restlichen gelöscht.</dd>
+ <dt>{{domxref("URLSearchParams.sort()")}}</dt>
+ <dd>Sortiert alle Schlüssel/Wert Paare, nach dem Schlüssel.</dd>
+ <dd>Sorts all key/value pairs, if any, by their keys.</dd>
+ <dt>{{domxref("URLSearchParams.toString()")}}</dt>
+ <dd>Gibt den Query-String, in der passenden Form um in einer URL einzusetzen.</dd>
+ <dt>{{domxref("URLSearchParams.values()")}}</dt>
+ <dd>Gibt einen {{jsxref("Iteration_protocols", "Iterator")}} über alle Werte im Query-String.</dd>
+</dl>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: js">var paramsString = "q=URLUtils.searchParams&amp;topic=api"
+var searchParams = new URLSearchParams(paramsString);
+
+//Iteriert über die Suchparameter
+for (let p of searchParams) {
+  console.log(p);
+}
+
+searchParams.has("topic") === true; // true
+searchParams.get("topic") === "api"; // true
+searchParams.getAll("topic"); // ["api"]
+searchParams.get("foo") === null; // true
+searchParams.append("topic", "webdev");
+searchParams.toString(); // "q=URLUtils.searchParams&amp;topic=api&amp;topic=webdev"
+searchParams.set("topic", "More webdev");
+searchParams.toString(); // "q=URLUtils.searchParams&amp;topic=More+webdev"
+searchParams.delete("topic");
+searchParams.toString(); // "q=URLUtils.searchParams"
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('URL', '#urlsearchparams', "URLSearchParams")}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(49)}}</td>
+   <td>{{CompatGeckoDesktop("29.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>36</td>
+   <td>10.1</td>
+  </tr>
+  <tr>
+   <td><code>entries()</code>, <code>keys()</code>, <code>values()</code>, and support of <code>for...of</code></td>
+   <td>{{CompatChrome(49)}}</td>
+   <td>{{CompatGeckoDesktop("44.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>36</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>USVString</code> for constructor <code>init</code> object</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("53.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Record for constructor <code>init</code> object</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("54.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(49)}}</td>
+   <td>{{CompatChrome(49)}}</td>
+   <td>{{CompatGeckoMobile("29.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>entries()</code>, <code>keys()</code>, <code>values()</code>, and support of <code>for...of</code></td>
+   <td>{{CompatChrome(49)}}</td>
+   <td>{{CompatChrome(49)}}</td>
+   <td>{{CompatGeckoMobile("44.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>USVString</code> for constructor <code>init</code> object</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("53.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Record for constructor <code>init</code> object</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("54.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Verweise">Verweise</h2>
+
+<ul>
+ <li>Andere URL-bezogene Interfaces: {{domxref("URL")}}, {{domxref("URLUtils")}}.</li>
+ <li><a href="https://developers.google.com/web/updates/2016/01/urlsearchparams?hl=en">Google Developers: Easy URL manipulation with URLSearchParams</a></li>
+</ul>
+
+<dl>
+</dl>
diff --git a/files/de/web/api/usvstring/index.html b/files/de/web/api/usvstring/index.html
new file mode 100644
index 0000000000..4021cc4cc8
--- /dev/null
+++ b/files/de/web/api/usvstring/index.html
@@ -0,0 +1,42 @@
+---
+title: USVString
+slug: Web/API/USVString
+tags:
+  - API
+  - DOM
+  - DOM Referenz
+  - Referenz
+  - String
+  - WebIDL
+translation_of: Web/API/USVString
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Ein <strong><code>USVString</code></strong> entspricht der Menge aller möglichen Folgen von Unicode-Skalarwerten. <code>USVString</code> konvertiert zu <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code>, wenn es in JavaScript zurückgegeben wird; Es wird allgemein nur für APIs verwendet, die Text verarbeiten und einen String mit Unicode-Skalarwerten benötigen. <code>USVString</code> ist gleich zu <code><a href="/de/docs/Web/API/DOMString">DOMString</a></code>, mit der Ausnahme, dass USVString ungepaarte Ersatzcodepoints nicht erlaubt. Ungepaarte Ersatzcodepoints in einem USVString werden vom Browser zum Unicode 'Ersatzzeichen' <code>U+FFFD</code> konvertiert.</p>
+
+<h2 id="Specification" name="Specification">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebIDL', '#idl-USVString', 'USVString')}}</td>
+   <td>{{Spec2('WebIDL')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code></li>
+ <li><code><a href="/de/docs/Web/API/DOMString">DOMString</a></code></li>
+ <li><code><a href="/de/docs/Web/API/CSSOMString">CSSOMString</a></code></li>
+ <li><a href="/de/docs/Archive/Add-ons/Code_snippets/StringView"><code>StringView</code> - eine C-like Repräsentation von Strings basierend auf Arrays</a></li>
+ <li><code><a href="/de/docs/Web/API/DOMString/Binary">Binary strings</a></code></li>
+</ul>
diff --git a/files/de/web/api/vollbild_api/index.html b/files/de/web/api/vollbild_api/index.html
new file mode 100644
index 0000000000..1ddce4c572
--- /dev/null
+++ b/files/de/web/api/vollbild_api/index.html
@@ -0,0 +1,305 @@
+---
+title: Vollbild API
+slug: Web/API/Vollbild_API
+tags:
+  - API
+  - DOM
+  - JS
+  - Tutorial
+  - Vollbild API
+translation_of: Web/API/Fullscreen_API
+---
+<p>{{DefaultAPISidebar("Fullscreen API")}}</p>
+
+<p class="summary">Die <strong><code>Vollbild-API</code></strong> bietet einen einfachen Weg, um Webinhalte auf dem gesamten Bildschirm des Nutzers anzuzeigen. Der Browser kann einfach angewiesen werden, Elemente und, falls vorhanden, deren Kinder den gesamten Bildschirm einnehmen zu lassen, wodurch jegliche andere Inhalte vorübergehend ausgeblendet werden.</p>
+
+<div class="note">
+<p>Momentan benutzen nicht alle Browser die Version der API ohne Präfixe. Siehe <a href="#Prefixing">Vendor Präfixe</a> für Unterschiede zwischen Präfixen und Namen. </p>
+
+<p>Für eine universelle Lösung des Problems siehe <a href="https://github.com/rafrex/fscreen">Fscreen</a>.</p>
+</div>
+
+<h2 id="Specification" name="Specification">Aktivieren des Vollbildmodus</h2>
+
+<p>Wenn sie ein Element gefunden haben, welches Sie im Vollbildmodus anzeigen möchten (etwa ein {{ HTMLElement("video") }}), wir der Vollbildmodus einfach durch den Aufruf der {{ domxref("Element.requestFullscreen()") }}-Methode gestartet.</p>
+
+<p>Nehmen wir dieses {{ HTMLElement("video") }}-Element als Beispiel:</p>
+
+<pre class="brush: html">&lt;video controls id="myvideo"&gt;
+  &lt;source src="somevideo.webm"&gt;&lt;/source&gt;
+  &lt;source src="somevideo.mp4"&gt;&lt;/source&gt;
+&lt;/video&gt;
+</pre>
+
+<p>Wir können dieses Video mit folgendem Skript in den Vollbildmodus versetzen:</p>
+
+<pre class="brush: js">var elem = document.getElementById("myvideo");
+if (elem.requestFullscreen) {
+  elem.requestFullscreen();
+}
+</pre>
+
+<h3 id="Anzeige-Schwierigkeiten">Anzeige-Schwierigkeiten</h3>
+
+<p>An dieser Stelle lohnt es sich, einen wichtigen Unterschied zwischen Gecko und WebKit aufzuzeigen: Gecko fügt automatisch CSS-Regeln zum betroffenen Element hinzu, damit es den ganzen Bildschirm einnimmt: "<code>width: 100%; height: 100%</code>". WebKit tut dies allerdings nicht; stattdessen wird das Vollbild-Element in der selben Größe zentriert vor einem schwarzen Hintergrund dargestellt. Um das gleich Vollbild-Verhalten in WebKit zu erhalten, müssen Sie selbst eine "<code>width: 100%; height: 100%;</code>"-CSS-Regel zum entsprechenden Element hinzufügen:</p>
+
+<pre class="brush: css">#myvideo:-webkit-full-screen {
+  width: 100%;
+  height: 100%;
+}
+</pre>
+
+<p>Andererseits, wenn Sie stattdessen versuchen, das WebKit-Verhalten auf Gecko zu erreichen, müssen sie das Element, das präsentiert werden soll, in einem anderen Element platzieren, welches sie stattdessen in den Vollbild-Modus versetzen. Dann können sie CSS-Regeln verwenden, um das innere Element so zu layouten, wie Sie wünschen.</p>
+
+<h3 id="Benachrichtigung">Benachrichtigung</h3>
+
+<p>Wenn der Vollbild-Modus erfolgreich gestartet wird, erhält das <code>document</code>, welches das entsprechende Element enthält ein {{ event("fullscreenchange") }}-Event. Wenn der Vollbild-Modus wieder verlassen wird, erhält das <code>document</code> wiederum ein {{ event("fullscreenchange") }}-Event. Beachten Sie jedoch, dass das {{ event("fullscreenchange") }}-Event selbst keine Informationen darüber bereitstellt, ob das <code>document</code> in oder aus den Vollbild-Modus wechselt. Stattdessen muss überprüft werden, ob das Attribut {{ domxref("document.fullscreenElement", "fullscreenElement") }}, des <code>document</code> nicht <code>null</code> ist. In diesem Fall befindet sich der Browser im Vollbild-Modus.</p>
+
+<h3 id="Wenn_die_Vollbild-Anfrage_scheitert">Wenn die Vollbild-Anfrage scheitert</h3>
+
+<p>Es ist nicht garantiert, dass der Wechsel in den Vollbild-Modus möglich ist. {{ HTMLElement("iframe") }}-Elements etwa haben das {{ HTMLAttrXRef("allowfullscreen", "iframe") }}-Attribut, um ihrem Inhalt zu erlauben, in den Vollbild-Modus zu wechseln. Zusätzlich gibt es bestimmte Arten von Inhalten, wie etwa windowed plug-ins, welche nicht im Vollbild-Modus angezeigt werden können. Wenn versucht wird, ein Element, welches nicht im Vollbild-Modus dargestellt werden kann (oder ein Eltern- bzw. Kind-Knoten eines solchen Elements), wird dies nicht funktionieren. Stattdessen wird das Element, welches den Vollbild-Modus angefragt hat, ein <code>mozfullscreenerror</code>-Event erhalten. Wenn eine Vollbild-Anfrage scheitert, wird Firefox eine Fehlermeldung auf der Web-Konsole ausgeben, welche erklärt, warum die Anfrage fehlgeschlagen ist. In Chrome und neueren Versionen von Opera werden allerdings keine solchen Warnungen produziert.</p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Vollbild-Anfragen müssen aus einem Event-Handler heraus gestellt werden oder die Anfrage wird abgelehnt. </p>
+</div>
+
+<h2 id="Verlassen_des_Vollbildmodus">Verlassen des Vollbildmodus</h2>
+
+<p>Der Nutzer hat immer die Möglichkeit, selbst den Vollbildmodus zu verlassen; siehe {{ anch("Things your users want to know") }}. Der Vollbildmodus kann aber auch programmatisch mithilfe der  {{domxref("Document.exitFullscreen()")}}-Methode beendet werden.</p>
+
+<h2 id="Weitere_Informationen">Weitere Informationen</h2>
+
+<p>Das {{ domxref("document") }} hält weitere Informationen bereit, welche bei der Entwicklung von Vollbild-Web-Apps hilfreich sein können:</p>
+
+<dl>
+ <dt>{{ domxref("document.fullscreenElement", "fullscreenElement") }}</dt>
+ <dd>Das <code>fullscreenElement</code>-Attribut gibt das {{ domxref("element") }} an, welches aktuell im Vollbild-Modus angezeigt wird. Wenn dies nicht <code>null</code> ist, befindet sich das <code>document</code> im Vollbildmodus. Sonst, wenn dieses Attribut <code>null</code> ist, befindet sich das Dokument nicht im Vollbildmodus.</dd>
+ <dt>{{ domxref("document.fullscreenEnabled", "fullscreenEnabled") }}</dt>
+ <dd>Das <code>fullscreenEnabled</code>-Attribut gibt an, ob das <code>document</code> aktuell in einem Zustand ist, in welchem der Vollbild-Modus erlaubt ist.</dd>
+</dl>
+
+<h2 id="Things_your_users_want_to_know" name="Things_your_users_want_to_know">Was die Nutzer wissen wollen</h2>
+
+<p>Sie sollten die Nutzer wissen lassen, dass sie den Vollbildmodus jederzeit mit <kbd>ESC</kbd> (oder <kbd>F11</kbd>) verlassen können.</p>
+
+<p>Zusätzlich beendet das Navigieren zu einer anderen Seite oder das Wechseln von Tabs oder Programmen (etwa mit  <kbd>Alt</kbd>+<kbd>Tab</kbd>) auch den Vollbildmodus.</p>
+
+<h2 id="Specification" name="Specification">Beispiel</h2>
+
+<p>In diesem Beispiel wird ein Video auf einer Webseite dargestellt. Durch drücken von <kbd>Return</kbd> oder <kbd>Enter</kbd> kann der Nutzer den Vollbildmodus des Videos umschalten.</p>
+
+<p><a href="/samples/domref/fullscreen.html">Live-Beispiel ansehen</a></p>
+
+<h3 id="Watching_for_the_Enter_key">Watching for the <kbd>Enter</kbd> key</h3>
+
+<p>When the page is loaded, this code is run to set up an event listener to watch for the <kbd>Enter</kbd> key.</p>
+
+<pre class="brush: js">document.addEventListener("keydown", function(e) {
+  if (e.keyCode == 13) {
+    toggleFullScreen();
+  }
+}, false);
+</pre>
+
+<h3 id="Toggling_fullscreen_mode">Toggling fullscreen mode</h3>
+
+<p>This code is called when the user hits the <kbd>Enter</kbd> key, as seen above.</p>
+
+<pre class="brush: js">function toggleFullScreen() {
+  if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen();
+  } else {
+    if (document.exitFullscreen) {
+      document.exitFullscreen();
+    }
+  }
+}
+</pre>
+
+<p>This starts by looking at the value of the <code>fullscreenElement</code> attribute on the {{ domxref("document") }} (checking it prefixed with both <code>moz</code>,<code> ms</code>, or <code>webkit</code>). If it's <code>null</code>, the document is currently in windowed mode, so we need to switch to fullscreen mode. Switching to fullscreen mode is done by calling {{ domxref("element.requestFullscreen()") }}.</p>
+
+<p>If fullscreen mode is already active (<code>fullscreenElement</code> is non-<code>null</code>), we call {{ domxref("document.exitFullscreen()") }}.</p>
+
+<h2 id="Vendor_Präfixe">Vendor Präfixe</h2>
+
+<p>For the moment not all browsers are implementing the unprefixed version of the API (for vendor agnostic access to the Fullscreen API you can use <a href="https://github.com/rafrex/fscreen">Fscreen</a>). Here is the table summarizing the prefixes and name differences between them:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Standard</th>
+   <th scope="col">Blink (Chrome &amp; Opera)</th>
+   <th scope="col">Gecko (Firefox)</th>
+   <th scope="col">Internet Explorer 11</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>{{domxref("Document.fullscreen")}}</td>
+   <td><code>webkitIsFullScreen</code></td>
+   <td><code>mozFullScreen</code></td>
+   <td><em>-</em></td>
+   <td><code>webkitIsFullScreen</code></td>
+   <td><code>webkitIsFullScreen</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Document.fullscreenEnabled")}}</td>
+   <td><code>webkitFullscreenEnabled</code></td>
+   <td><code>mozFullScreenEnabled</code></td>
+   <td><code>msFullscreenEnabled</code></td>
+   <td><code>webkitFullscreenEnabled</code></td>
+   <td><code>webkitFullscreenEnabled</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Document.fullscreenElement")}}</td>
+   <td><code>webkitFullscreenElement</code></td>
+   <td><code>mozFullScreenElement</code></td>
+   <td><code>msFullscreenElement</code></td>
+   <td><code>webkitFullscreenElement</code></td>
+   <td><code>webkitFullscreenElement</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Document.onfullscreenchange")}}</td>
+   <td><code>onwebkitfullscreenchange</code></td>
+   <td><code>onmozfullscreenchange</code></td>
+   <td><code>MSFullscreenChange</code></td>
+   <td><code>onwebkitfullscreenchange</code></td>
+   <td><code>onwebkitfullscreenchange</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Document.onfullscreenerror")}}</td>
+   <td><code>onwebkitfullscreenerror</code></td>
+   <td><code>onmozfullscreenerror</code></td>
+   <td><code>MSFullscreenError</code></td>
+   <td><code>onwebkitfullscreenerror</code></td>
+   <td><code>onwebkitfullscreenerror</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Document.exitFullscreen()")}}</td>
+   <td><code>webkitExitFullscreen()</code></td>
+   <td><code>mozCancelFullScreen()</code></td>
+   <td><code>msExitFullscreen()</code></td>
+   <td><code>webkitExitFullscreen()</code></td>
+   <td><code>webkitExitFullscreen()</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Element.requestFullscreen()")}}</td>
+   <td><code>webkitRequestFullscreen()</code></td>
+   <td><code>mozRequestFullScreen()</code></td>
+   <td><code>msRequestFullscreen()</code></td>
+   <td><code>webkitRequestFullscreen()</code></td>
+   <td><code>webkitRequestFullscreen()</code></td>
+  </tr>
+ </thead>
+</table>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Fullscreen")}}</td>
+   <td>{{Spec2("Fullscreen")}}</td>
+   <td>Initial version.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompatibilität</h2>
+
+<p>All browsers implement this APIs. Nevertheless some implement it with prefixed names with slightly different spelling; e.g., instead of <code>requestFullscreen()</code>, there is <code>MozRequestFullScreen()</code>.</p>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>15 {{ property_prefix("-webkit") }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("9.0") }} {{ property_prefix("-moz") }}<br>
+    {{CompatGeckoDesktop("47")}} (behind <code>full-screen-api.unprefix.enabled</code>)</td>
+   <td>11 {{ property_prefix("-ms") }}</td>
+   <td>12.10</td>
+   <td>5.0 {{ property_prefix("-webkit") }}</td>
+  </tr>
+  <tr>
+   <td><code>fullscreenEnabled</code></td>
+   <td>20 {{ property_prefix("-webkit") }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("10.0") }} {{ property_prefix("-moz") }}<br>
+    {{CompatGeckoDesktop("47")}} (behind <code>full-screen-api.unprefix.enabled</code>)</td>
+   <td>11 {{ property_prefix("-ms") }}</td>
+   <td>12.10</td>
+   <td>5.1 {{ property_prefix("-webkit") }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>28 {{ property_prefix("-webkit") }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("9.0") }}{{ property_prefix("-moz") }}<br>
+    {{CompatGeckoMobile("47")}} (behind <code>full-screen-api.unprefix.enabled</code>)</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>fullscreenEnabled</code></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>28 {{ property_prefix("-webkit") }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("10.0") }} {{ property_prefix("moz") }}<br>
+    {{CompatGeckoMobile("47")}} (behind <code>full-screen-api.unprefix.enabled</code>)</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{ domxref("Element.requestFullscreen()") }}</li>
+ <li>{{ domxref("Document.exitFullscreen()") }}</li>
+ <li>{{ domxref("Document.fullscreen") }}</li>
+ <li>{{ domxref("Document.fullscreenElement") }}</li>
+ <li>{{ cssxref(":fullscreen") }}, {{cssxref("::backdrop")}}</li>
+ <li>{{ HTMLAttrXRef("allowfullscreen", "iframe") }}</li>
+</ul>
diff --git a/files/de/web/api/web_animations_api/index.html b/files/de/web/api/web_animations_api/index.html
new file mode 100644
index 0000000000..ad88873dfd
--- /dev/null
+++ b/files/de/web/api/web_animations_api/index.html
@@ -0,0 +1,99 @@
+---
+title: Web Animations API
+slug: Web/API/Web_Animations_API
+translation_of: Web/API/Web_Animations_API
+---
+<p>{{DefaultAPISidebar("Web Animations")}}{{ SeeCompatTable() }}</p>
+
+<div class="summary">
+<p>Die Web Animations API ermöglicht die Synchronisierung und zeitliche Abstimmung von Änderungen an der Präsentation einer Webseite, d. H. der Animation von DOM-Elementen. Dabei werden zwei Modelle kombiniert: das Timing-Modell und das Animationsmodell.</p>
+</div>
+
+<h2 id="Konzepte_und_Verwendung">Konzepte und Verwendung</h2>
+
+<p>Die Web-Animations-API bietet Browsern und Entwicklern eine gemeinsame Sprache, um Animationen auf DOM-Elementen zu beschreiben. Weitere Informationen zu den Konzepten der API und ihrer Verwendung finden Sie unter <a href="/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API">Verwenden der Web Animations-API</a>.</p>
+
+<h2 id="Webanimationsschnittstellen">Webanimationsschnittstellen</h2>
+
+<dl>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation")}}</dt>
+ <dd>Bietet Steuerelemente zur Wiedergabe und eine Zeitleiste für einen Animationsknoten. Kann ein mit dem {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} Konstruktor erstelltes Object aufnehmen.</dd>
+ <dt>{{domxref("KeyframeEffect")}}</dt>
+ <dd>Beschreibt eine Menge animierbarer Eigenschaften und Werte, die als Keyframes bezeichnet werden, sowie deren Timing-Optionen.<strong> </strong>Diese können dann mit dem {{domxref("Animation.Animation", "Animation()")}} Konstruktor abgespielt werden. </dd>
+ <dt>{{domxref("AnimationTimeline")}}</dt>
+ <dd>Repräsentiert die Zeitleiste der Animation. Diese Schnittstelle ist zum Definieren von Timeline-Features (geerbt von {{domxref ("DocumentTimeline")}} und zukünftigen Timeline-Objekten) vorhanden, auf die Entwickler nicht selbst zugreifen.</dd>
+ <dt>{{domxref("AnimationEvent")}}</dt>
+ <dd>Eigentlich Teil von CSS-Animationen.</dd>
+ <dt>{{domxref("DocumentTimeline")}}</dt>
+ <dd>Stellt Animationszeitleisten dar, einschließlich der Standarddokumentzeitleiste (auf die über die Eigenschaft {{domxref ("Document.timeline")}} zugegriffen wird).</dd>
+ <dt>{{domxref("EffectTiming")}}</dt>
+ <dd>{{domxref ("Element.animate ()")}}, {{domxref ("KeyframeEffectReadOnly.KeyframeEffectReadOnly ()")}} und {{domxref ("KeyframeEffect.KeyframeEffect ()")}} akzeptieren alle ein optionales Objekt von Timing-Eigenschaften.</dd>
+</dl>
+
+<h2 id="Erweiterungen_zu_anderen_Schnittstellen">Erweiterungen zu anderen Schnittstellen</h2>
+
+<p> </p>
+
+<p>Die Web-Animations-API fügt {{domxref ("document")}} und {{domxref ("element")}} einige neue Funktionen hinzu.</p>
+
+<h3 id="Etweiterungen_der_Document_Schnittstelle">Etweiterungen der <code>Document</code> Schnittstelle</h3>
+
+<dl>
+ <dt>{{domxref("document.timeline")}}</dt>
+ <dd>Das <code>DocumentTimeline</code> Objekt stellt die Standardzeitleiste des Dokuments dar.</dd>
+ <dt>{{domxref("document.getAnimations()")}}</dt>
+ <dd>Gibt ein Array von {{domxref ("Animation")}} - Objekten zurück, die derzeit für Elemente im <code>document</code> wirksam sind.</dd>
+ <dt>
+ <h3 id="Erweiterungen_der_Element_Schnittstelle">Erweiterungen der <code>Element</code> Schnittstelle</h3>
+ </dt>
+ <dt>{{domxref("Element.animate()")}}</dt>
+ <dd>Eine Shortcut-Methode zum Erstellen und Wiedergeben einer Animation für ein Element. Sie gibt die erstellte {{domxref ("Animation")}} Objektinstanz zurück.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Read-Only-Schnittstellen_für_Web-Animationen">Read-Only-Schnittstellen für Web-Animationen</h2>
+
+<p>Die folgenden Schnittstellen sind in der Spezifikation enthalten, z. B. um Features zu definieren, die an mehreren anderen Stellen verwendet werden, oder um als Basis für mehrere Schnittstellen zu dienen, die alle als Werte derselben Eigenschaften verwendet werden können. Du würdest diese nicht direkt in der Entwicklungsarbeit verwenden, aber für Bibliotheksautoren könnte es interessant sein, die Funktionsweise der Technologie zu verstehen, sodass ihre Implementierungen effektiver sein können, oder für Browseringenieure, die eine einfachere Referenz suchen, als die Spezifikation bietet.</p>
+
+<dl>
+ <dt>{{domxref("AnimationEffectTimingReadOnly")}}</dt>
+ <dd>Ein dictionary Objekt mit Timing-Eigenschaften, die von der veränderlichen {{domxref ("AnimationEffectTiming")}} - Schnittstelle geerbt werden, die der {{domxref ("KeyframeEffect")}} zugeordnet ist.</dd>
+ <dt>{{domxref("AnimationEffectReadOnly")}}</dt>
+ <dd>Defines current and future "Animation Effects" like {{domxref("KeyframeEffect")}}, which can be passed to {{domxref("Animation")}} objects for playing, and {{domxref("KeyframeEffectReadOnly")}} which is used by {{domxref("KeyframeEffect")}} (inherited by <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a> and <a href="/en-US/docs/Web/CSS/CSS_Transitions">Transitions</a>). All values of {{domxref("Animation.effect")}} are of types based on <code>AnimationEffectReadOnly</code>.</dd>
+ <dt>{{domxref("KeyframeEffectReadOnly")}}</dt>
+ <dd>Describes sets of animatable properties and values that can be played using the {{domxref("Animation.Animation", "Animation()")}} constructor, and which are inherited by {{domxref("KeyframeEffect")}}. </dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Animations')}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API">Using the Web Animations API</a></li>
+ <li><a href="https://mozdevs.github.io/Animation-examples/">Web Animations demos</a></li>
+ <li><a href="https://github.com/web-animations/web-animations-js">Polyfill</a></li>
+ <li>Firefox's current implementation: <a href="https://birtles.github.io/areweanimatedyet/">AreWeAnimatedYet</a></li>
+ <li>
+  <p><a href="http://codepen.io/danwilson/pen/xGBKVq">Browser support test</a></p>
+ </li>
+</ul>
diff --git a/files/de/web/api/web_storage_api/index.html b/files/de/web/api/web_storage_api/index.html
new file mode 100644
index 0000000000..ae3779f420
--- /dev/null
+++ b/files/de/web/api/web_storage_api/index.html
@@ -0,0 +1,142 @@
+---
+title: Web Storage API
+slug: Web/API/Web_Storage_API
+translation_of: Web/API/Web_Storage_API
+---
+<p>{{DefaultAPISidebar("Web Storage API")}}</p>
+
+<p>Die <strong>Web Storage API</strong> bietet Mechanismen, durch welche Browser in einer weitaus intuitiveren Form Schlüssel-Werte-Paare abspeichern können, als dies bei Cookies der Fall ist.</p>
+
+<h2 id="Web_Storage_Konzepte_und_Verwendung">Web Storage Konzepte und Verwendung</h2>
+
+<p>Die zwei Mechanismen innerhalb des Web Storage sind wie folgt:</p>
+
+<ul>
+ <li><code>sessionStorage</code> stellt für jeden vorhandenen Ausgangspunkt für die Dauer des Seitenbesuchs einen separaten Speicherbereich bereit (solange der Browser geöffnet bleibt inklusive Seitenaktualisierung und -Wiederherstellung).</li>
+ <li><code>localStorage</code> hat die gleiche Funktion, bleibt jedoch trotz Schließens und Neustart des Browsers persistent.</li>
+</ul>
+
+<p>Diese Mechanismen stehen durch die Eigenschaften {{domxref("Window.sessionStorage")}} und {{domxref("Window.localStorage")}} zur Verfügung (um dies näher zu beschreiben: Zur Unterstützung der Browser implementiert das <code>Window</code> Objekt die Objekte <code>WindowLocalStorage</code> und <code>WindowSessionStorage</code>, welche von <code>localStorage</code> und <code>sessionStorage</code> bereitgestellt werden) — durch deren Aufruf wird eine Instanz des {{domxref("Storage")}} Objekts erstellt, durch welches Daten gespeichert, abgerufen und gelöscht werden können. Ein anderes Speicherelement wird für das <code>sessionStorage</code> und <code>localStorage</code> jedes Ausgangspunktes verwendet — beide arbeiten getrennt und werden auch getrennt gesteuert.</p>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Ab Firefox 45 aufwärts wird die Datenspeicherung pro Ausgangspunkt auf 10MB begrenzt, um Speicherprobleme durch übermäßige Verwendung des Web storage zu vermeiden.</p>
+</div>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Zugang zum Web Storage von IFrames Ditter wird verweigert, wenn der Anwender <a href="https://support.mozilla.org/de/kb/disable-third-party-cookies">Cookies Dritter deaktiviert</a> hat (Firefox implementiert dieses Verhalten ab der <a href="/de/docs/Mozilla/Firefox/Releases/43">version 43</a> aufwärts.)</p>
+</div>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Web Storage ist nicht dasselbe wie <a href="/de/docs/Storage" title="Storage">mozStorage</a> (Mozillas XPCOM Schnittstelle zu SQLite) oder die <a href="/de/docs/Session_store_API" title="Session_store_API">Session store API</a> (ein <a href="/de/docs/XPCOM" title="XPCOM">XPCOM</a> Speicherprogramm, welches von Erweiterungen verwendet wird).</p>
+</div>
+
+<h2 id="Web_Storage_Schnittstellen">Web Storage Schnittstellen</h2>
+
+<dl>
+ <dt>{{domxref("Storage")}}</dt>
+ <dd>Erlaubt das Speichern, Abrufen und Löschen von Daten einer spezifischen Domain und des Speichertyps (session oder local).</dd>
+ <dt>{{domxref("Window")}}</dt>
+ <dd>Die Web Storage API erweitert das {{domxref("Window")}} Objekt mit zwei neuen Attributen — {{domxref("Window.sessionStorage")}} und {{domxref("Window.localStorage")}} — welche den Zugang zu den jeweiligen session- und local-Objekten der aktuellen Domain sowie eine {{domxref("Window.onstorage")}} Ereignissteuerung (event handler), welche aktiviert wird, wenn ein Speicherbereich geändert wird (z.B. bei der Speicherung eines neuen Datensatzes).</dd>
+ <dt>{{domxref("StorageEvent")}}</dt>
+ <dd>Das <code title="event-storage">storage</code>-Ereignis wird über das <code>Window</code>-Objekt eines (html-) Dokuments aktiviert, wenn sich ein Speicherbereich ändert.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Um einige der typischen Anwendungsfälle von Web Storage darzulegen, wurde ein einfaches Beispiel erstellt, fantasievoll als <a href="https://github.com/mdn/web-storage-demo">Web Storage Demo</a> benannt. Die Startseite bietet die Möglichkeit, Farbe, Schriftart und ein dekoratives Bild zu verändern. Wenn verschiedene Optionen ausgewählt werden, wird die Seite umgehend aktualisiert. Zudem werden die ausgewählten Optionen im <code>localStorage</code> gespeichert, sodass diese beim Verlassen und erneutem Aufruf der Seite bestehen bleiben. </p>
+
+<p>Zudem besteht eine <a href="https://mdn.github.io/dom-examples/web-storage/event.html">Ereignis-Ausgabeseite</a> — wenn diese Seite in einem weiteren Tab geladen wird, hiernach Änderungen auf der Startseite vorgenommen werden, sind die aktualisierten Speicherinformationen zu sehen, welche durch die Aktivierung des Ereignisses {{event("StorageEvent")}} zustandekommen.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Storage')}}</td>
+   <td>{{Spec2('Web Storage')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>localStorage</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>sessionStorage</td>
+   <td>5</td>
+   <td>2</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Alle Browser haben variiernde Kapazitäten sowohl für das localStorage und auch das sessionStorage. Hier ist ein <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">detailierter Ablauf aller Speicherkapazitäten verschiedener Browser</a> zu finden.</p>
+
+<div class="note">
+<p><strong>Hinweis: </strong>Seit iOS 5.1, speichert Safari Mobile localStorage-Daten in den cache-Ordner, welcher gelegentlichen Speicherbereinigungen durch das OS ausgesetzt ist, welche typischerweise bei knappem Speicher auftreten.</p>
+</div>
+
+<h2 id="Privates_Surfen_Inkognito-Modus">Privates Surfen / Inkognito-Modus</h2>
+
+<p>Die meisten modernen Browser unterstützen die als "Inkognito", "Privates Surfen" o.ä. bezeichnete Datenschutz-Option, welche keine Daten wie Verlauf und Cookies speichert. Aus ersichtlichen Gründen ist dies grundsätzlich inkompatibel mit Web Storage. Nichtsdestotrotz experimentieren Browseranbieter mit verschiedenen Szenarien, um mit dieser Inkompatibilität umzugehen.</p>
+
+<p>Für die meisten Browser hat man sich für eine Strategie entschieden, wobei Speicher-APIs vorhanden und scheinbar voll funktionsfähig sind, mit dem einen großen Unterschied, dass alle gespeicherten Daten gelöscht werden, nachdem der Browser geschlossen wird. Für diese Browser bestehen desweiteren unterschiedliche Interpretationen dazu, was mit den vorhandenen abgespeicherten Daten (aus einer regulären Sitzung) geschehen soll. Sollten sie zum Abruf zur Verfügung stehen, um im Inkognito-Modus gelesen werden zu können? Dann gibt es einige Browser, insbesondere Safari, welche sich dazu entschieden haben, den Speicher zur Verfügung zu stellen, dieser jedoch leer ist und ihm ein Speicheranteil von 0 Byte zugeordnet ist. Dadurch machen sie es praktisch unmöglich, Daten auf den Speicher zu schreiben.</p>
+
+<p>Entwicklern sollten diese unterschiedlichen Implementierungen bewusst sein und sie sollten dies bei der Entwicklung von Webseiten, welche von den Web Storage APIs abhängen, in Betracht ziehen. Für weitere Informationen werfe man einen Blick auf <a href="https://blog.whatwg.org/tag/localstorage">diesen WHATWG Blogpost</a> , das sich insbesondere mit diesem Thema befasst.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<p><a href="/de/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a><br>
+ <a href="https://medium.com/@ramsunvtech/onfocus-html5-storage-apis-b45d92aa424b">HTML5 Storage API By Venkatraman</a></p>
diff --git a/files/de/web/api/web_workers_api/index.html b/files/de/web/api/web_workers_api/index.html
new file mode 100644
index 0000000000..46dccd115d
--- /dev/null
+++ b/files/de/web/api/web_workers_api/index.html
@@ -0,0 +1,226 @@
+---
+title: Web Worker API
+slug: Web/API/Web_Workers_API
+translation_of: Web/API/Web_Workers_API
+---
+<p>{{DefaultAPISidebar("Web Workers API")}}</p>
+
+<p class="summary"><strong>Web Workers </strong>ermöglichen Entwicklern Skripte in einem Hintergrundthread getrennt vom Haupthread auszuführen. Dies hat den Vorteil, dass rechenintensive Operationen in einem gesonderten Thread ausgeführt werden können und somit der Hauptthread, der für gewöhnlich das UI bereitstellt, arbeiten kann ohne verlangsamt oder blockiert zu werden.</p>
+
+<h2 id="Web_Workers_Konzepte_und_Anwendung">Web Workers Konzepte und Anwendung</h2>
+
+<p>Ein Worker ist ein Objekt das mit einem Konstruktor erzeugt wird (beispielsweise {{domxref("Worker.Worker", "Worker()")}}) und eine JavaScript Datei mit Namen ausführt. In dieser Datei ist der Code enthalten der im Worker-Thread ausgeführt wird. Worker arbeiten in einem eigenen globalen Kontext, der vom aktuellen Hauptkontext {{domxref("window")}} verschieden ist. Dieser Kontext ist durch das Objekt  {{domxref("DedicatedWorkerGlobalScope")}}  repräsentiert, falls es sich um einen dedizierten Worker handelt (also einen Worker der nur von einem Skript genutzt wird, was der Standard ist.). Shared Workers benutzen das Objekt {{domxref("SharedWorkerGlobalScope")}}.</p>
+
+<p>Man kann bis auf einige Ausnahmen beliebige Anweisungen ausführen. Beispielsweise kann man das DOM nicht direkt ändern und auch einige Standardmethoden und -attribute von {{domxref("window")}} können nicht genutzt werden. Viele andere Elemente von <code>window</code> können allerdings schon genutzt werden, unter anderem <a href="/en-US/docs/WebSockets">WebSockets</a> und Datenspeicher, wie <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> und die Firefox-OS-only <a href="/en-US/docs/Web/API/Data_Store_API">Data Store API</a>.  Unter <a href="/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Functions and classes available to workers</a> finden Sie mehr Details.</p>
+
+<p>Daten werden zwischen den Workern und dem Hauptthread mithilfe eines Nachrichtensystems verschickt — beide Seiten verschicken ihre Nachrichten mit der <code>postMessage()</code> Methode und antworten mit dem <code>onmessage</code> Event Handler (die empfangene Nachricht ist im <code>data</code> Attribut {{event("Message")}} des Events enthalten). Die Daten werden kopiert und nicht geteilt.</p>
+
+<p>Worker können neue Worker erzeugen, solange diese vom selben Ursprung gehosted werden wie die Ursprungsseite.  Außerdem können Worker <a class="internal" href="/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a> für Netzwerk I/O benutzen mit der Ausnahme, dass  die <code>responseXML</code> und <code>channel</code> Attribute von <code>XMLHttpRequest</code> stets <code>null</code> zurückgeben.</p>
+
+<p>Neben dedizierten Workern gibt es noch andere Typen:</p>
+
+<ul>
+ <li>Shared (geteilte) Worker können von mehreren Skripten, die auch in unterschiedlichen Fenstern, IFrames, etc. laufen genutzt werden, solange sie alle in der selben Domain arbeiten. Sie sind etwas komplizierter als dedizierte Worker — Skripte müssen über einen aktiven Port kommunizieren. Unter {{domxref("SharedWorker")}} finden Sie mehr Details.</li>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker</a> arbeiten als Proxy Server zwischen Webanwendungen, dem Browser und dem Netzwerk. Sie sollen (zusammen mit anderen Technologien)  das Erstellen von effektiven offline-Anwendungen ermöglichen, Netzwerkabfragen abfangen und je nach Verfügbarkeit einer Netzwerkverbindung ensprechend reagieren und den Server über Änderungen informieren. Zudem erlauben sie Push-Benachrichtigungen zu senden und im Hintergrund APIs zu synchronisieren.</li>
+ <li>Chrome Worker ist ein Firefox-only Workertyp für die Add-On Entwicklung mit Zugriff auf  <a href="https://developer.mozilla.org/en/js-ctypes">js-ctypes</a> in Ihrem Worker. Unter  {{domxref("ChromeWorker")}} finden Sie weitere Informationen.</li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API#Audio_Workers">Audio Worker</a> bieten die Möglichkeit Audioverarbeitung mit Skripten in einem Worker auszuführen.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: As per the <a href="https://html.spec.whatwg.org/multipage/workers.html#runtime-script-errors-2">Web workers Spec</a>, worker error events should not bubble (see {{bug(1188141)}}. This has been implemented in Firefox 42.</p>
+</div>
+
+<h2 id="Web_Worker_interfaces">Web Worker interfaces</h2>
+
+<dl>
+ <dt>{{domxref("AbstractWorker")}}</dt>
+ <dd>Abstrakte Attribute und Methoden für alle Worker (z.B. {{domxref("Worker")}} oder {{domxref("SharedWorker")}}).</dd>
+ <dt>{{domxref("Worker")}}</dt>
+ <dd>Repräsentiert einen laufenden Workerthread. Erlaubt das Senden von Nachrichten an den Code im Worker.</dd>
+ <dt>{{domxref("WorkerLocation")}}</dt>
+ <dd>Definiert die absolute Quelle des Skripts das im  <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker" title="The Worker interface of the Web Workers API represents a background task that can be easily created and can send messages back to its creator. Creating a worker is as simple as calling the Worker() constructor and specifying a script to be run in the worker thread."><code>Worker</code></a> ausgeführet wird.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("SharedWorker")}}</dt>
+ <dd>Repräsentiert einen speziellen Worker, auf den von verschiedenen Fenstern, IFrames oder sogar Workern  zugegrifffen werden kann.</dd>
+ <dt>{{domxref("WorkerGlobalScope")}}</dt>
+ <dd>Repräsentiert den generischen Scope jedes Workers (dies entspricht dem {{domxref("Window")}} objekt für normale Webinhalte). Andere Worker haben Scopes die von diesem vererbt werden und spezifische Eigenschaften hinzufügen.</dd>
+ <dt>{{domxref("DedicatedWorkerGlobalScope")}}</dt>
+ <dd>Repräsentiert den von {{domxref("WorkerGlobalScope")}} vererbten Scope eines dedizierten Workers. Fügt besondere Eigenschaften hinzu.</dd>
+ <dt>{{domxref("SharedWorkerGlobalScope")}}</dt>
+ <dd>Repräsentiert den von {{domxref("WorkerGlobalScope")}} vererbten Scope eines  Shared Workers. Fügt besondere Eigenschaften hinzu.</dd>
+ <dt>{{domxref("WorkerNavigator")}}</dt>
+ <dd>Repräsentiert die Identität und den Zustand des User Agents (dem client).</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Sie finden ein paar einfache Beispiele, die die Benutzung veranschaulichen unter diesen Links:</p>
+
+<ul>
+ <li><a href="https://github.com/mdn/simple-web-worker">Basic dedicated worker example</a> (<a href="http://mdn.github.io/simple-web-worker/">run dedicated worker</a>).</li>
+ <li><a href="https://github.com/mdn/simple-shared-worker">Basic shared worker example</a> (<a href="http://mdn.github.io/simple-shared-worker/">run shared worker</a>).</li>
+</ul>
+
+<p>Unter <a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Using web workers</a> finden Sie mehr Informationen wie diese Demos funktionieren.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#workers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.9.1)}}</td>
+   <td>10.0</td>
+   <td>10.6</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>Shared workers</td>
+   <td>4</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(29)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.6</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>Passing data using structured cloning</td>
+   <td>13</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(8)}}</td>
+   <td>10.0</td>
+   <td>11.5</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td>Passing data using  transferable objects</td>
+   <td>17 {{property_prefix("webkit")}}<br>
+    21</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(18)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td>Global {{domxref("window.URL", "URL")}}</td>
+   <td>10<sup>[1]</sup><br>
+    23</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(21)}}</td>
+   <td>11</td>
+   <td>15</td>
+   <td>6<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4</td>
+   <td>4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.9.1)}}</td>
+   <td>1.0.1</td>
+   <td>10.0</td>
+   <td>11.5</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td>Shared workers</td>
+   <td>{{CompatNo}}</td>
+   <td>4</td>
+   <td>{{CompatNo}}</td>
+   <td>29</td>
+   <td>1.4</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Passing data using structured cloning</td>
+   <td>{{CompatNo}}</td>
+   <td>4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>8</td>
+   <td>1.0.1</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Passing data using  transferable objects</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>18</td>
+   <td>1.0.1</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] As <code>webkitURL</code>.</p>
+
+<h2 id="Weiterführend">Weiterführend</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API/basic_usage">Using Web Workers</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker">Worker Interface</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker">SharedWorker interface</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Functions and classes available to workers</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API/Advanced_concepts_and_examples">Advanced concepts and examples</a></li>
+ <li><a href="/en-US/docs/Web/API/ChromeWorker">ChromeWorker</a>: Um worker mit privilegierten/chrome Code zu nutzen</li>
+</ul>
diff --git a/files/de/web/api/webgl_api/index.html b/files/de/web/api/webgl_api/index.html
new file mode 100644
index 0000000000..cd699e7ee1
--- /dev/null
+++ b/files/de/web/api/webgl_api/index.html
@@ -0,0 +1,258 @@
+---
+title: WebGL
+slug: Web/API/WebGL_API
+tags:
+  - WebGL
+  - WebGL2
+translation_of: Web/API/WebGL_API
+---
+<div>{{WebGLSidebar}}</div>
+
+<div class="summary">
+<p>WebGL (Web Graphics Library) ist eine Javascript-API zum Rendern interaktiver 3D und 2D Grafiken mittels eines kompatiblen Web-Browsers ohne Einsatz zusätzlicher Plugins. Mit <a class="external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">WebGL</a> steht eine API zur Verfügung, die an <a class="external" href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES 2.0</a> angelehnt ist und deren Inhalte mittels eines {{HTMLElement("canvas")}} Elements dargestellt werden.</p>
+</div>
+
+<p>WebGL steht ab <a href="/en-US/Firefox" title="Firefox 4 for developers">Firefox</a> 4+, <a href="http://www.google.com/chrome/" title="http://www.google.com/chrome/">Google Chrome</a> 9+, <a href="http://www.opera.com/" title="http://www.opera.com/">Opera</a> 12+, <a href="http://www.apple.com/safari/" title="http://www.apple.com/fr/safari/">Safari </a>5.1+ und <a href="http://windows.microsoft.com/en-us/internet-explorer/browser-ie" title="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> 11+ zur Verfügung. Allerdings muss auch die Hardware des Zielgerätes dieses Feature unterstützen.</p>
+
+<p>WebGL2 steht ab <a href="/en-US/Firefox" title="Firefox 4 for developers">Firefox</a> 51+, <a href="http://www.google.com/chrome/" title="http://www.google.com/chrome/">Google Chrome</a> 56+ und <a href="http://www.opera.com/" title="http://www.opera.com/">Opera</a> 42+ standardmäßig zur Verfügung. WebGL2 wird derzeit nicht von Internet Explorer oder Edge unterstützt.</p>
+
+<p>Das {{HTMLElement("canvas")}} Element kann auch von <a href="/de/docs/Web/API/Canvas_API">Canvas 2D</a> genutzt werden, um 2D Grafiken rendern zu können.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<div class="index">
+<ul>
+ <li>{{domxref("WebGLRenderingContext")}}</li>
+ <li>{{domxref("WebGL2RenderingContext")}} {{experimental_inline}}</li>
+ <li>{{domxref("WebGLActiveInfo")}}</li>
+ <li>{{domxref("WebGLBuffer")}}</li>
+ <li>{{domxref("WebGLContextEvent")}}</li>
+ <li>{{domxref("WebGLFramebuffer")}}</li>
+ <li>{{domxref("WebGLProgram")}}</li>
+ <li>{{domxref("WebGLQuery")}} {{experimental_inline}}</li>
+ <li>{{domxref("WebGLRenderbuffer")}}</li>
+ <li>{{domxref("WebGLSampler")}} {{experimental_inline}}</li>
+ <li>{{domxref("WebGLShader")}}</li>
+ <li>{{domxref("WebGLShaderPrecisionFormat")}}</li>
+ <li>{{domxref("WebGLSync")}} {{experimental_inline}}</li>
+ <li>{{domxref("WebGLTexture")}}</li>
+ <li>{{domxref("WebGLTransformFeedback")}} {{experimental_inline}}</li>
+ <li>{{domxref("WebGLUniformLocation")}}</li>
+ <li>{{domxref("WebGLVertexArrayObject")}} {{experimental_inline}}</li>
+</ul>
+</div>
+
+<h3 id="Extensions">Extensions</h3>
+
+<div class="index">
+<ul>
+ <li>{{domxref("ANGLE_instanced_arrays")}}</li>
+ <li>{{domxref("EXT_blend_minmax")}}</li>
+ <li>{{domxref("EXT_color_buffer_float")}}</li>
+ <li>{{domxref("EXT_color_buffer_half_float")}}</li>
+ <li>{{domxref("EXT_disjoint_timer_query")}}</li>
+ <li>{{domxref("EXT_frag_depth")}}</li>
+ <li>{{domxref("EXT_sRGB")}}</li>
+ <li>{{domxref("EXT_shader_texture_lod")}}</li>
+ <li>{{domxref("EXT_texture_filter_anisotropic")}}</li>
+ <li>{{domxref("OES_element_index_uint")}}</li>
+ <li>{{domxref("OES_standard_derivatives")}}</li>
+ <li>{{domxref("OES_texture_float")}}</li>
+ <li>{{domxref("OES_texture_float_linear")}}</li>
+ <li>{{domxref("OES_texture_half_float")}}</li>
+ <li>{{domxref("OES_texture_half_float_linear")}}</li>
+ <li>{{domxref("OES_vertex_array_object")}}</li>
+ <li>{{domxref("WEBGL_color_buffer_float")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_atc")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_etc")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_etc1")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_pvrtc")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_s3tc")}}</li>
+ <li>{{domxref("WEBGL_debug_renderer_info")}}</li>
+ <li>{{domxref("WEBGL_debug_shaders")}}</li>
+ <li>{{domxref("WEBGL_depth_texture")}}</li>
+ <li>{{domxref("WEBGL_draw_buffers")}}</li>
+ <li>{{domxref("WEBGL_lose_context")}}</li>
+</ul>
+</div>
+
+<h3 id="Events">Events</h3>
+
+<ul>
+ <li><a href="/de/docs/Web/Events/webglcontextlost">webglcontextlost</a></li>
+ <li><a href="/de/docs/Web/Events/webglcontextrestored">webglcontextrestored</a></li>
+ <li><a href="/de/docs/Web/Events/webglcontextcreationerror">webglcontextcreationerror</a></li>
+</ul>
+
+<h3 id="Konstanten_und_Typen">Konstanten und Typen</h3>
+
+<ul>
+ <li><a href="/de/docs/Web/API/WebGL_API/Constants">WebGL Konstanten</a></li>
+ <li><a href="/de/docs/Web/API/WebGL_API/Types">WebGL Typen</a></li>
+</ul>
+
+<h2 id="Themen">Themen</h2>
+
+<p>Die folgenden acht Artikel bauen aufeinander auf.</p>
+
+<dl>
+ <dt><a href="/de/WebGL/Einführung_in_WebGL" title="de/WebGL/Einführung in WebGL">Einführung in WebGL</a></dt>
+ <dd>Wie man einen WebGL-Kontext herstellt.</dd>
+ <dt><a href="/de/WebGL/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext" title="de/WebGL/Hinzufügen von 2D Inhalten in einen WebGL-Kontext">Hinzufügen von 2D Inhalten in einen WebGL-Kontext</a></dt>
+ <dd>Wie eine einfache, flache Form mittels WebGL erstellt wird.</dd>
+ <dt><a href="/de/WebGL/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen" title="en/WebGL/Farben mittels Shader in einen WebGL-Kontext hinzufügen">Farben mittels Shader in einen WebGL-Kontext hinzufügen</a></dt>
+ <dd>Zeigt wie Farben mit Shadern auf die Form gebracht werden können.</dd>
+ <dt><a href="/de/WebGL/Objekte_mit_WebGL_animieren" title="de/WebGL/Objekte mit WebGL animieren">Objekte mit WebGL animieren</a></dt>
+ <dd>Erklärt wie Objekte rotiert und verschiebt werden, um eine einfache Animation zu erstellen.</dd>
+ <dt><a href="/de/WebGL/3D-Objekte_mit_WebGL_erstellen" title="de/WebGL/3D-Objekte_mit_WebGL_erstellen">3D-Objekte mit WebGL erstellen</a></dt>
+ <dd>Erläutert wie dreidimensionale Objekte erstellt und animiert werden (ein Würfel dient als Beispiel).</dd>
+ <dt><a href="/de/WebGL/Texturen_in_WebGL_verwenden" title="de/WebGL/Texturen in WebGL verwenden">Texturen in WebGL verwenden</a></dt>
+ <dd>Demonstriert wie Texturen auf die Oberfläche eines Objektes gezeichnet werden können.</dd>
+ <dt><a href="/de/WebGL/Beleuchtung_in_WebGL" title="de/WebGL/Beleuchtung in WebGL">Beleuchtung in WebGL</a></dt>
+ <dd>Wie Beleuchtungseffekte in unserem WebGL-Kontext simuliert werden.</dd>
+ <dt><a href="/de/WebGL/Animierte_Texturen_in_WebGL" title="de/WebGL/Animierte Texturen in WebGL">Animierte Texturen in WebGL</a></dt>
+ <dd>Animierte Texturen werden mittels einem Ogg-Video auf der Oberfläche eines rotierenden Würfels realisiert.</dd>
+</dl>
+
+<h2 id="Ressourcen">Ressourcen</h2>
+
+<dl>
+ <dt><a class="link-https" href="https://www.khronos.org/registry/webgl/specs/1.0/" title="https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/doc/spec/WebGL-spec.html">WebGL Spezifikation</a></dt>
+ <dd>Der Entwurf der WebGL Spezifikation.</dd>
+ <dt><a class="external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">Khronos WebGL Seite</a></dt>
+ <dd>Die Hauptseite für WebGL der Khronos Group.</dd>
+ <dt><a class="external" href="http://learningwebgl.com/blog/" title="http://learningwebgl.com/blog/">Learning WebGL</a></dt>
+ <dd>Eine Reihe von Tutorials über WebGL (Englisch).</dd>
+ <dt><a class="external" href="http://learningwebgl.com/cookbook/index.php/" title="http://learningwebgl.com/cookbook/index.php/">Das WebGL Kochbuch</a></dt>
+ <dd>Rezepte für das Schreiben von WebGL-Code (Englisch).</dd>
+ <dt><a class="external" href="http://sylvester.jcoglan.com/" title="http://sylvester.jcoglan.com/">Sylvester</a></dt>
+ <dd>Eine Open-Source Bibliothek, die das Verarbeiten von Vektoren und Matrizen erleichtert.</dd>
+ <dt><a class="external" href="http://planet-webgl.org/" title="http://planet-webgl.org/">Planet WebGL</a></dt>
+ <dd>Eine Feed-Sammlung von Leuten, die in der WebGL Community aktiv sind.</dd>
+</dl>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Hinweis</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebGL')}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Grundlegende Definition. Basierend auf OpenGL ES 2.0</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL2')}}</td>
+   <td>{{Spec2('WebGL2')}}</td>
+   <td>Erweiterung von WebGL1. Basierend auf OpenGL ES 3.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0')}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 3.0')}}</td>
+   <td>{{Spec2('OpenGL ES 3.0')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>9</td>
+   <td>11</td>
+   <td>12<sup>[1]</sup></td>
+   <td>5.1<sup>[1]</sup></td>
+  </tr>
+  <tr>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Chrome for Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>4</td>
+   <td>25<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>12<sup>[1]</sup></td>
+   <td>8.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Die Implementierung dieses Features ist experimentell.</p>
+
+<h3 id="Kompatibilitätshinweise">Kompatibilitätshinweise</h3>
+
+<p>Neben dem Browser muss auch die GPU selbst dieses Feature unterstützen. So ist zum Beispiel S3 Texture Compression (S3TC) derzeit nur auf Desktop-Rechnern und Tegra-basierenden Tablets verfügbar. Die meisten Browser stellen den {{domxref("HTMLCanvasElement.getContext", "WebGL-Context")}} durch den <code>webgl</code> Contextnamen zur Verfügung - ältere Browser benötigen hingegen manchmal stattdessen den Contextnamen <code>experimental-webgl</code>.</p>
+
+<p>Das kommende <a href="/de/docs/Web/API/WebGL2RenderingContext">WebGL 2</a> ist vollständig abwärtskompatibel und wird über den Contextnamen <code>experimental-webgl2</code> aufgerufen. Ab Firefox 42.0 ist der Aufruf auch über den Contextnamen <code>webgl2</code> möglich - WebGL2 ist bis einschließlich Firefox 50 ein experimentelles Feature und kann zu Testzwecken über <a href="#WebGL2_enabling">Flag-Settings</a> des <a href="https://support.mozilla.org/de/kb/konfigurationseditor-fur-firefox" title="Der Konfigurationseditor von Firefox (about:config) listet Programmeinstellungen aus den Dateien prefs.js und user.js des Firefox-Profilordners sowie die Standardeinstellungen auf. Viele dieser erweiterten Optionen sind in den normalen Einstellungen nicht verfügbar.">Konfigurationseditors</a> aktiviert werden. WebGL2 ist ab Firefox 51+, Chrome 56+ und Opera 42+ standardmäßig aktiviert - Internet Explorer und Edge bieten derzeit noch keinen Support für WebGL2.</p>
+
+<h3 id="Anmerkungen_zu_Gecko">Anmerkungen zu Gecko</h3>
+
+<h4 id="WebGL_Debugging_und_Testing">WebGL Debugging und Testing</h4>
+
+<p>Ab Gecko 10.0 {{geckoRelease("10.0")}} werden zwei Möglichkeiten geboten, die WebGL-Fähigkeit des Browsers zu Testzwecken zu beeinflussen:</p>
+
+<dl>
+ <dt><code>webgl.min_capability_mode</code></dt>
+ <dd>Ein boolescher Wert, der bei <code>true</code> einen minimalen Kompatibiätsmodus zur Verfügung stellt. Ist dieser Modus aktiviert, wird WebGL ausschließlich mit dem geringsten Features betrieben, die von der WebGL-Spezifikation definiert wurden. Damit lässt sich sicherstellen, dass dein WebGL-Code auf jedem Gerät unabhängig besonderer Fähigkeiten lauffähig ist. Der Standarardwert ist <code>false</code>.</dd>
+ <dt><code>webgl.disable_extensions</code></dt>
+ <dd>Ein boolescher Wert, der bei <code>true</code> alle WebGL Extensions deaktiviert. Der Standarardwert ist <code>false</code>.</dd>
+</dl>
+
+<h4 id="WebGL2_Aktivierung">WebGL2 Aktivierung</h4>
+
+<dl>
+ <dt><code>webgl.enable-prototype-webgl2</code> (ab Firefox 38)</dt>
+ <dt><code>webgl.enable-webgl2</code> (ab Firefox 50)</dt>
+ <dd>Ein boolescher Wert, der bei <code>true</code> den bisher experimentellen WebGL2-Context im Browser aktiviert. Der Standarardwert ist <code>false</code> - ab Firefox 51 ist der Standardwert <code>true</code>.</dd>
+</dl>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/API/Canvas_API">Canvas</a></li>
+ <li><a href="https://developer.mozilla.org/de/docs/Web/API/WebGLRenderingContext/getSupportedExtensions#Browser_compatibility">Kompatibilitäts-Hinweise zu WebGL Extensions</a></li>
+</ul>
diff --git a/files/de/web/api/webgl_api/tutorial/3d-objekte_mit_webgl_erstellen/index.html b/files/de/web/api/webgl_api/tutorial/3d-objekte_mit_webgl_erstellen/index.html
new file mode 100644
index 0000000000..d3a21591fd
--- /dev/null
+++ b/files/de/web/api/webgl_api/tutorial/3d-objekte_mit_webgl_erstellen/index.html
@@ -0,0 +1,126 @@
+---
+title: 3D-Objekte mit WebGL erstellen
+slug: Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen
+tags:
+  - Tutorial
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren", "Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden")}}</p>
+
+<p>Bringen wir unser Quadrat in die dritte Dimension, indem wir fünf oder mehr Flächen hinzufügen und daraus einen Würfel machen. Um das effizient zu machen, wechseln wir vom Zeichnen direkt über die Vertices zur <code>gl.drawArray()</code> Methode, um den Vertex-Array als eine Tabelle zu verwenden und die einzelnen Vertices in dieser Tabelle als Referenz für Positionen jeder Fläche zu definieren, indem wir <code>gl.drawElements()</code> aufrufen.</p>
+
+<p>Bedenken Sie: Jede Fläche benötigt vier Vertices, die diese definieren, aber jeder Vertex wird von drei Flächen verwendet. Wir können eine Menge Daten sparen, indem wir eine Liste aller 24 Vertices erstellen und uns dann auf jeden Vertex durch dessen Index in der Liste beziehen, anstatt den gesamten Koordinatensatz zu verwenden.</p>
+
+<h2 id="Die_Vertex-Positionen_des_Würfels_definieren">Die Vertex-Positionen des Würfels definieren</h2>
+
+<p>Zunächst wollen wir den Positionsspeicher der Vertices erstellen, indem wir den Code in <code>initBuffers()</code> ändern. Das geschieht genau so wie für das Quadrat, allerdings haben wir hier ein paar Datensätze mehr, da wir 24 Vertices (4 pro Seite) haben müssen:</p>
+
+<pre class="brush: js">  var vertices = [
+    // vordere Fläche
+    -1.0, -1.0,  1.0,
+     1.0, -1.0,  1.0,
+     1.0,  1.0,  1.0,
+    -1.0,  1.0,  1.0,
+
+    // hintere Fläche
+    -1.0, -1.0, -1.0,
+    -1.0,  1.0, -1.0,
+     1.0,  1.0, -1.0,
+     1.0, -1.0, -1.0,
+
+    // obere Fläche
+    -1.0,  1.0, -1.0,
+    -1.0,  1.0,  1.0,
+     1.0,  1.0,  1.0,
+     1.0,  1.0, -1.0,
+
+    // untere Fläche
+    -1.0, -1.0, -1.0,
+     1.0, -1.0, -1.0,
+     1.0, -1.0,  1.0,
+    -1.0, -1.0,  1.0,
+
+    // rechte Fläche
+     1.0, -1.0, -1.0,
+     1.0,  1.0, -1.0,
+     1.0,  1.0,  1.0,
+     1.0, -1.0,  1.0,
+
+    // linke Fläche
+    -1.0, -1.0, -1.0,
+    -1.0, -1.0,  1.0,
+    -1.0,  1.0,  1.0,
+    -1.0,  1.0, -1.0
+  ];
+</pre>
+
+<h2 id="Die_Farben_der_Vertices_definieren">Die Farben der Vertices definieren</h2>
+
+<p>Außerdem müssen wir einen Array für die Farben der 24 Vertices erstellen. Dieser Code definiert zunächst die Farben für jede Fläche und verwendet dann eine Schleife, um jeden der Vertices mit einer Farbe zu bestücken.</p>
+
+<pre class="brush: js">  var colors = [
+    [1.0,  1.0,  1.0,  1.0],    // vordere Fläche: weiß
+    [1.0,  0.0,  0.0,  1.0],    // hintere Fläche: rot
+    [0.0,  1.0,  0.0,  1.0],    // obere Fläche: grün
+    [0.0,  0.0,  1.0,  1.0],    // untere Fläche: blau
+    [1.0,  1.0,  0.0,  1.0],    // rechte Fläche: gelb
+    [1.0,  0.0,  1.0,  1.0]     // linke Fläche: violett
+  ];
+
+  var generatedColors = [];
+
+  for (j=0; j&lt;6; j++) {
+    var c = colors[j];
+
+    for (var i=0; i&lt;4; i++) {
+      generatedColors = generatedColors.concat(c);
+    }
+  }
+
+  cubeVerticesColorBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesColorBuffer);
+  gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(generatedColors), gl.STATIC_DRAW);
+</pre>
+
+<h2 id="Das_Element-Array_definieren">Das Element-Array definieren</h2>
+
+<p>Sobald die Vertex-Arrays generiert worden sind, müssen wir das Element-Array erstellen.</p>
+
+<pre class="brush: js">  cubeVerticesIndexBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
+
+  // Dieser Array definiert jede Fläche als zwei Dreiecke über die Indizes
+  // im Vertex-Array, um die Position jedes Dreiecks festzulegen.
+
+  var cubeVertexIndices = [
+    0,  1,  2,      0,  2,  3,    // vorne
+    4,  5,  6,      4,  6,  7,    // hinten
+    8,  9,  10,     8,  10, 11,   // oben
+    12, 13, 14,     12, 14, 15,   // unten
+    16, 17, 18,     16, 18, 19,   // rechts
+    20, 21, 22,     20, 22, 23    // links
+  ]
+
+  // Sende nun das Element-Array zum GL
+
+  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,
+      new WebGLUnsignedShortArray(cubeVertexIndices), gl.STATIC_DRAW);
+</pre>
+
+<p>Das <code>cubeVertexIndices</code> Array definiert jede Fläche als ein paar von Dreiecken, alle Vertices des Dreiecks werden als ein Index im Vertex-Array des Würfels festgelegt. Daher ist der Würfel aus einer Sammlung von 12 Dreiecken beschrieben.</p>
+
+<h2 id="Den_Würfel_zeichnen">Den Würfel zeichnen</h2>
+
+<p>Als nächstes müssen wir etwas Code zur <code>drawScene()</code> Funktion hinzufügen, um über den Indexspeicher des Würfels zu zeichnen. Wir fügen neue <code>bindBuffer()</code> und <code>drawElements()</code> Aufrufe hinzu:</p>
+
+<pre class="brush: js">  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
+  setMatrixUniforms();
+  gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);
+</pre>
+
+<p>Da jede Seite unseres Würfels aus zwei Dreiecken besteht, gibt es 6 Vertices pro Seite, oder 36 Vertices im Würfel, obwohl einige davon doppelt sind. Da unser Index-Array jedoch aus einfachen Integern besteht, stellt dies keinen unkoordinierbaren Betrag an Daten dar, welcher für jeden Frame der Animation durchgegangen werden muss.</p>
+
+<p>Jetzt haben wir einen animierten Würfel, welcher herum springt, rotiert und über sechs unterschiedliche Seiten verfügt. Wenn Ihr Browser WebGL unterstützt, <a href="/samples/webgl/sample5/index.html" title="https://developer.mozilla.org/samples/webgl/sample5/index.html">schauen Sie sich hier die Demo in Aktion an</a>.</p>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren", "Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden")}}</p>
diff --git a/files/de/web/api/webgl_api/tutorial/animierte_texturen_in_webgl/index.html b/files/de/web/api/webgl_api/tutorial/animierte_texturen_in_webgl/index.html
new file mode 100644
index 0000000000..bfeb362b8e
--- /dev/null
+++ b/files/de/web/api/webgl_api/tutorial/animierte_texturen_in_webgl/index.html
@@ -0,0 +1,89 @@
+---
+title: Animierte Texturen in WebGL
+slug: Web/API/WebGL_API/Tutorial/Animierte_Texturen_in_WebGL
+tags:
+  - Tutorial
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL
+---
+<p>{{WebGLSidebar("Tutorial") }} {{Previous("Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL")}}</p>
+
+<p>In dieser Demo bauen wir auf das vorherige Beispiel auf, indem wir die statischen Texturen mit den Frames eines OGG-Video ersetzen. Das ist nicht sehr schwer zu schreiben, sieht aber umso besser aus. Fangen wir an.</p>
+
+<h2 id="Zugang_zum_Video">Zugang zum Video</h2>
+
+<p>Zunächst müssen wir etwas HTML hinzufügen, um das <a href="/de/HTML/Element/video"><code>video</code></a> Element zu erstellen, welches wir verwenden, um die Video-Frames zu erhalten:</p>
+
+<pre class="brush: js">&lt;video id="video" src="Firefox.ogv" autobuffer='true'"&gt;
+  Ihr Browser scheint das HTML5 &lt;code&gt;&amp;lt;video&amp;gt;&lt;/code&gt; Element nicht zu unterstützen.
+&lt;/video&gt;
+</pre>
+
+<p>Das erstellt einfach ein Element, um die Video-Datei "Firefox.ogv" abzuspielen. Wir benutzen CSS, um zu verhindern, dass das Video angezeigt wird:</p>
+
+<pre class="brush: css">video {
+  display: none;
+}
+</pre>
+
+<p>Dann schenken wir dem JavaScript Code wieder unsere Aufmerksamkeit und fügen eine neue Zeile zur <code>start()</code> Funktion hinzu, um einen Bezug zum Video-Element herzustellen:</p>
+
+<pre class="brush: js">videoElement = document.getElementById("video");
+</pre>
+
+<p>Und wir ersetzen den Code, der die Intervall-gesteuerten Aufrufe von <code>drawScene()</code> setzt, mit diesem Code:</p>
+
+<pre class="brush: js">videoElement.addEventListener("canplaythrough", startVideo, true);
+videoElement.addEventListener("ended", videoDone, true);
+</pre>
+
+<p>Die Idee ist hier, dass wir die Animation nicht starten wollen, bevor das Video nicht ausreichend zwischengespeichert wurde, sodass es dann ohne Unterbrechung abgespielt werden kann. Wir fügen also einen Event-Listener hinzu, um auf das <code>video</code> Element zu warten bis es uns mitteilt, dass genug zwischengespeichert wurde und das komplette Video ohne Pause abgespielt werden kann. Wir fügen außerdem einen zweiten Event-Listener hinzu, sodass wir die Animation stoppen können, wenn das Video beendet ist und wir so nicht unnötig den Prozessor belasten.</p>
+
+<p>Die <code>startVideo()</code> Funktion sieht so aus:</p>
+
+<pre class="brush: js">function startVideo() {
+  videoElement.play();
+  videoElement.addEventListener("timeupdate", updateTexture, true);
+  setInterval(drawScene, 15);
+}
+</pre>
+
+<p>Hier wird einfach das Video gestartet und ein Event-Handler bereitgestellt, der aufgerufen wird, wenn ein neuer Frame des Videos verfügbar ist. Dann werden die Intervall-gesteuerten Aufrufe der <code>drawScene()</code> Funktion eingerichtet, um den Würfel zu rendern.</p>
+
+<p>Die <code>videoDone()</code> Funktion ruft einfach {{ domxref("window.clearInterval") }} auf, um die Intervallaufrufe zu beenden, die die Animation aktualisieren.</p>
+
+<h2 id="Die_Video-Frames_als_Textur_verwenden">Die Video-Frames als Textur verwenden</h2>
+
+<p>Die nächste Änderung erhält die <code>initTexture()</code> Funktion, welche viel einfacher wird, weil kein Bild mehr geladen werden muss. Stattdessen muss nun das Textur-Mapping aktiviert werden und ein leeres Textur-Objekt zum späteren Gebrauch erstellt werden:</p>
+
+<pre class="brush: js">function initTextures() {
+  gl.enable(gl.TEXTURE_2D);
+  cubeTexture = gl.createTexture();
+}
+</pre>
+
+<p>So sieht die <code>updateTexture()</code> Funktion aus. Hier wird wirklich Arbeit verrichtet:</p>
+
+<pre class="brush: js">function updateTexture() {
+  gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
+  gl.texImage2D(gl.TEXTURE_2D, 0, videoElement, true);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
+  gl.generateMipmap(gl.TEXTURE_2D);
+  gl.bindTexture(gl.TEXTURE_2D, null);
+}
+</pre>
+
+<p>Sie kennen diesen Code bereits. Es ist fast identisch zur <code>handleTextureLoaded()</code> Routine im vorherigen Beispiel, mit der Ausnahme, dass wir <code>texImage2D()</code> nicht mit einem <code>Image</code> Objekt sondern mit dem <code>video</code> Element aufrufen.</p>
+
+<p><code>updateTexture()</code> wird jedes Mal aufgerufen, wenn sich das <code>timeupdate</code> Event vom <code>video</code> Element meldet. Dieses Event wird gesendet, wenn sich die Zeit des aktuellen Frames ändert, sodass wir wissen, dass wir unsere Textur nur dann aktualisieren müssen, wenn neue Daten verfügbar sind.</p>
+
+<p>Das war alles! Wenn Sie eine Browser mit Unterstützung von WebGL verwenden, können Sie sich <a href="/samples/webgl/sample8/index.html" title="https://developer.mozilla.org/samples/webgl/sample8/index.html">das Beispiel in Aktion ansehen</a>.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/Audio_und_Video_in_Firefox">Audio und Video in Firefox</a></li>
+</ul>
+
+<p>{{Previous("Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL")}}</p>
diff --git a/files/de/web/api/webgl_api/tutorial/beleuchtung_in_webgl/index.html b/files/de/web/api/webgl_api/tutorial/beleuchtung_in_webgl/index.html
new file mode 100644
index 0000000000..bd65b5bb40
--- /dev/null
+++ b/files/de/web/api/webgl_api/tutorial/beleuchtung_in_webgl/index.html
@@ -0,0 +1,172 @@
+---
+title: Beleuchtung in WebGL
+slug: Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL
+tags:
+  - Tutorial
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Lighting_in_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden", "Web/API/WebGL_API/Tutorial/Animierte_Texturen_in_WebGL")}}</p>
+
+<p>Als Erstes sollten wir verstehen, dass WebGL nicht wie OpenGL über eine eigene Unterstützung für die Beleuchtung verfügt. Das müssen wir selbst machen. Glücklicherweise ist es nicht sehr schwer und dieser Artikel versucht Ihnen die Grundlagen dazu näher zu bringen.</p>
+
+<h2 id="Beleuchtung_und_Schattierung_simulieren">Beleuchtung und Schattierung simulieren</h2>
+
+<p>Obwohl wir nicht weiter ins Detail über die Theorie hinter simulierter Beleuchtung in 3D Grafiken gehen wollen, was außerdem weit über diesen Artikel hinaus gehen würde, ist es gut zu wissen wie es ungefähr funktioniert. Anstatt hier nun in aller Tiefe zu diskutieren, sollten Sie einen Blick auf den <a class="external" href="http://de.wikipedia.org/wiki/Phong_Shading">»Phong Shading« Artikel</a> auf Wikipedia werfen, welcher einen guten Überblick über das meist genutzte Beleuchtungsmodell liefert.</p>
+
+<p>Es gibt drei grundlegende Typen zur Beleuchtung:</p>
+
+<p><strong>Umgebungslicht</strong> ist das Licht, das die Szene umgibt. Es weist in keine Richtung und bestrahlt jede Oberfläche in gleicher Weise, egal in welche Richtung es zeigt.</p>
+
+<p><strong>Gerichtetes Licht</strong> ist das Licht, das von einer festgelegten Richtung ausgestrahlt wird. Dieses Licht ist so weit weg, sodass sich jeder Photon parallel zu jedem anderen Photon bewegt. Sonnenlicht ist zum Beispiel gerichtetes (direktionales) Licht.</p>
+
+<p><strong>Punktbeleuchtung</strong> ist das Licht, das von einem Punkt ausgestrahlt wird und von dort radial in alle Richtungen verläuft. So funktionieren zum Beispiel die Glühbirnen im Alltag.</p>
+
+<p>Für unsere Zwecke vereinfachen wir das Beleuchtungsmodell, indem wir nur gerichtetes Licht und Umgebungslicht betrachten. Wir haben hier keine Highlights, die wir mit Punktbeleuchtung oder Glanzlicht in dieser Szene hervorheben wollen. Stattdessen werden wir Umgebungslicht mit einem einzelnen, gerichteten Licht verwenden, welches auf den rotierenden Würfel aus der <a href="/de/WebGL/Texturen_in_WebGL_verwenden">vorherigen Demo</a> zeigt.</p>
+
+<p>Wenn Sie die Konzepte der Punktbeleuchtung und des Glanzlichtes hinter sich gelassen haben, gibt es dennoch zwei kleine Informationen, die Sie benötigen werden, wenn wir unser gerichtetes Licht implementieren:</p>
+
+<ol>
+ <li>Wir müssen die <strong>Oberflächennormale</strong> mit jedem Vertex verbinden. Das ist ein Vektor, der senkrecht zur Oberfläche des Vertex ist.</li>
+ <li>Wir müssen die Richtung in welche das Licht strahlt wissen. Diese wird durch den <strong>Richtungsvektor</strong> angegeben.</li>
+</ol>
+
+<p>Dann aktualisieren wir den Vertex-Shader, um die Farbe jedes Vertices, unter Berücksichtigung des Umgebungslichts und dem Effekt des gerichteten Lichts (sowie dessen Winkel mit dem es auf die Oberfläche trifft), einzustellen. Wir werden sehen, wie genau wir das machen, wenn wir einen Blick auf den Code für den Shader werfen.</p>
+
+<h2 id="Die_Normalen_für_die_Vertices_erstellen">Die Normalen für die Vertices erstellen</h2>
+
+<p>Als Erstes müssen wir einen Array für die Normalen für alle Vertices erstellen, die unseren Würfel umfassen. Da ein Würfel ein sehr einfaches Objekt ist, ist dies auch sehr einfach zu erstellen. Für komplexere Objekte wird das Berechnen der Normalen schon umfassender.</p>
+
+<pre class="brush: js">  cubeVerticesNormalBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesNormalBuffer);
+
+  var vertexNormals = [
+    // vorne
+     0.0,  0.0,  1.0,
+     0.0,  0.0,  1.0,
+     0.0,  0.0,  1.0,
+     0.0,  0.0,  1.0,
+
+    // hinten
+     0.0,  0.0, -1.0,
+     0.0,  0.0, -1.0,
+     0.0,  0.0, -1.0,
+     0.0,  0.0, -1.0,
+
+    // oben
+     0.0,  1.0,  0.0,
+     0.0,  1.0,  0.0,
+     0.0,  1.0,  0.0,
+     0.0,  1.0,  0.0,
+
+    // unten
+     0.0, -1.0,  0.0,
+     0.0, -1.0,  0.0,
+     0.0, -1.0,  0.0,
+     0.0, -1.0,  0.0,
+
+    // rechts
+     1.0,  0.0,  0.0,
+     1.0,  0.0,  0.0,
+     1.0,  0.0,  0.0,
+     1.0,  0.0,  0.0,
+
+    // links
+    -1.0,  0.0,  0.0,
+    -1.0,  0.0,  0.0,
+    -1.0,  0.0,  0.0,
+    -1.0,  0.0,  0.0
+  ];
+
+  gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(vertexNormals), gl.STATIC_DRAW);
+</pre>
+
+<p>Das sollte Ihnen schon bekannt vorkommen: Wir erstellen einen neuen Buffer, verknüpfen den Array damit und senden dann unseren Vertex-Normalen-Array in den Buffer, indem wir <code>bufferData()</code> aufrufen.</p>
+
+<p>Dann fügen wir Code zu <code>drawScene()</code> hinzu, um das Normalen-Array mit einem Shader-Attribut zu verknüpfen, sodass der Shader-Code darauf zugreifen kann:</p>
+
+<pre class="brush: js">  gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesNormalBuffer);
+  gl.vertexAttribPointer(vertexNormalAttribute, 3, gl.FLOAT, false, 0, 0);
+</pre>
+
+<p>Schließlich müssen wir den Code aktualisieren, welcher die Einheitsmatrizen erstellt, um eine <strong>Normalenmatrix</strong> zu generieren und zum Shader auszuliefern. Diese wird verwendet, um die Normalen umzuwandeln, wenn die aktuelle Orientierung des Würfels in Beziehung zur Lichtquelle behandelt wird:</p>
+
+<pre class="brush: js">  var normalMatrix = mvMatrix.inverse();
+  normalMatrix = normalMatrix.transpose();
+  var nUniform = gl.getUniformLocation(shaderProgram, "uNormalMatrix");
+  gl.uniformMatrix4fv(nUniform, false, new WebGLFloatArray(normalMatrix.flatten()));
+</pre>
+
+<h2 id="Die_Shader_aktualisieren">Die Shader aktualisieren</h2>
+
+<p>Jetzt sind alle Daten, die von den Shadern gebraucht werden, verfügbar. Wir müssen nun den Code in den Shadern selbst aktualisieren.</p>
+
+<h3 id="Der_Vertex-Shader">Der Vertex-Shader</h3>
+
+<p>Zunächst aktualisieren wir den Vertex-Shader, sodass dieser einen Schattenwert für jeden Vertex auf Basis des Umgebungslichts sowie des direktionalen Lichts berechnet. Werfen wir einen Blick auf den Code:</p>
+
+<pre class="brush: html">    &lt;script id="shader-vs" type="x-shader/x-vertex"&gt;
+      attribute vec3 aVertexNormal;
+      attribute vec3 aVertexPosition;
+      attribute vec2 aTextureCoord;
+
+      uniform mat4 uNormalMatrix;
+      uniform mat4 uMVMatrix;
+      uniform mat4 uPMatrix;
+
+      varying vec2 vTextureCoord;
+      varying vec3 vLighting;
+
+      void main(void) {
+        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+        vTextureCoord = aTextureCoord;
+
+        // Beleuchtungseffekt anwenden
+
+        vec3 ambientLight = vec3(0.6, 0.6, 0.6);
+        vec3 directionalLightColor = vec3(0.5, 0.5, 0.75);
+        vec3 directionalVector = vec3(0.85, 0.8, 0.75);
+
+        vec4 transformedNormal = uNormalMatrix * vec4(aVertexNormal, 1.0);
+
+        float directional = max(dot(transformedNormal.xyz, directionalVector), 0.0);
+        vLighting = ambientLight + (directionalLightColor * directional);
+      }
+    &lt;/script&gt;
+</pre>
+
+<p>Sobald die Position des Vertex berechnet wurde und wir die Koordinaten des Texels (welcher passend zum Vertex ist) erhalten haben, können wir den Schatten für den Vertex berechnen.</p>
+
+<p>Als Erstes wandeln wir die Normale auf Basis der aktuellen Position und Orientierung des Würfels um, indem wir die Normale des Vertexes mit der Normalenmatrix multiplizieren. Dann können wir den Betrag an direktionalem Licht, welcher auf den Vertex angewendet werden soll, berechnen, indem wir das Skalarprodukt der umgewandelten Normalen und des direktionalen Vektors (Richtung aus der das Licht kommt) bilden. Wenn dieser Wert kleiner als Null ist, setzen wir den Wert auf Null fest, da man nicht weniger als Null Licht haben kann.</p>
+
+<p>Wenn der Betrag des direktionalen Lichts berechnet wurde, können wir den Beleuchtungswert generieren, indem wir das Umgebungslicht nehmen und das Produkt der Farbe des direktionalen Lichts und den Betrag an direktionalem Licht bereitstellen. Als Ergebnis haben wir nun einen RGB-Wert, welcher vom Fragment-Shader verwendet wird, um die Farbe jedes Pixels den wir rendern einzustellen.</p>
+
+<h3 id="Der_Fragment-Shader">Der Fragment-Shader</h3>
+
+<p>Der Fragment-Shader muss nun aktualisiert werden, um den berechneten Beleuchtungswert vom Vertex-Shader zu berücksichtigen:</p>
+
+<pre class="brush: js">    &lt;script id="shader-fs" type="x-shader/x-fragment"&gt;
+      varying vec2 vTextureCoord;
+      varying vec3 vLighting;
+
+      uniform sampler2D uSampler;
+
+      void main(void) {
+        vec4 texelColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
+
+        gl_FragColor = vec4(texelColor.rgb * vLighting, texelColor.a);
+      }
+    &lt;/script&gt;
+</pre>
+
+<p>Hier erhalten wir nun die Farbe des Texels, genau so wie wir es im vorherigen Beispiel getan haben. Bevor wir die Farbe der Fragmente aber festlegen, multiplizieren wir die Texel-Farbe mit dem Beleuchtungswert, um die Texel-Farbe so einzustellen, dass diese den Effekt der Lichtquelle berücksichtigt.</p>
+
+<p>Und das war's! Wenn Sie einen Browser verwenden, der WebGL unterstützt, können Sie <a href="/samples/webgl/sample7/index.html" title="https://developer.mozilla.org/samples/webgl/sample7/index.html">einen Blick auf die Live-Demo werfen</a>.</p>
+
+<h2 id="Übungen_für_den_Leser">Übungen für den Leser</h2>
+
+<p>Dies ist natürlich ein sehr einfaches Beispiel, welches eine Beleuchtung pro Vertex implementiert. Für fortgeschrittene Grafiken, möchten Sie sicher eine Beleuchtung pro Pixel implementieren, aber dies wird Sie in die Richtung leiten.</p>
+
+<p>Sie können nun also versuchen mit der Richtung der Lichtquelle zu experimentieren, die Farbe der Leuchtquelle zu ändern und so weiter.</p>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden", "Web/API/WebGL_API/Tutorial/Animierte_Texturen_in_WebGL")}}</p>
diff --git a/files/de/web/api/webgl_api/tutorial/einführung_in_webgl/index.html b/files/de/web/api/webgl_api/tutorial/einführung_in_webgl/index.html
new file mode 100644
index 0000000000..5906f95761
--- /dev/null
+++ b/files/de/web/api/webgl_api/tutorial/einführung_in_webgl/index.html
@@ -0,0 +1,73 @@
+---
+title: Einführung in WebGL
+slug: Web/API/WebGL_API/Tutorial/Einführung_in_WebGL
+tags:
+  - Tutorial
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{Next("Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext")}}</p>
+
+<p>Mit <a class="external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">WebGL</a> steht eine API zur Verfügung, die auf <a class="external" href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES 2.0</a> basiert, um 3D Rendering im HTML <a href="/de/HTML/Element/canvas" title="de/HTML/canvas"><code>canvas</code></a> Element zu ermöglichen. WebGL Programme bestehen aus Steuercode in JavaScript und Shadercode (GLSL), der auf dem Grafikprozessor (GPU) des Computers ausgeführt wird. WebGL Elemente können mit anderen HTML Elementen kombiniert werden.</p>
+
+<p>Dieser Artikel ist eine Einführung in die Grundlagen von WebGL. Es wird vorausgesetzt, dass einige mathematischen Kenntnisse im 3D-Bereich (Matrizen) vorhanden sind. Dieser Artikel wird daher keine 3D-Grafik-Konzepte vermitteln. Es gibt einen anfängergeeigneten Leitfaden mit Programmieraufgaben in unserem Lernbereich: <a href="https://developer.mozilla.org/en-US/docs/Learn/WebGL">Learn WebGL for 2D and 3D graphics</a>.</p>
+
+<p>DIe hier verwendeten Codebeispiele finden sich auch im <a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial">webgl-examples GitHub repository</a>.</p>
+
+<h2 id="3D_Rendering_vorbereiten">3D Rendering vorbereiten</h2>
+
+<p>Um WebGL benutzen zu können, wird als erstes ein <code>canvas</code> Element benötigt. Der folgende HTML-Code definiert eine <code>canvas</code> Zeichenfläche.</p>
+
+<pre class="brush: html">&lt;body&gt;
+  &lt;canvas id="glCanvas" width="640" height="480"&gt;&lt;/canvas&gt;
+&lt;/body&gt;
+</pre>
+
+<h3 id="Vorbereitung_des_WebGL-Kontexts">Vorbereitung des WebGL-Kontexts</h3>
+
+<p>Die <code>main()</code> Funktion im JavaScript Code wird aufgerufen, nachdem das Dokument geladen wurde. Die Aufgabe der Funktion ist, den WebGL-Kontext festzulegen und mit dem Rendering zu beginnen.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="function token">main</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="keyword token">function</span> <span class="function token">main</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">const</span> canvas <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">"#glCanvas"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="comment token">// Initialisierung des GL Kontexts</span>
+  <span class="keyword token">const</span> gl <span class="operator token">=</span> canvas<span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">"webgl"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// Nur fortfahren, wenn WebGL verfügbar ist und funktioniert</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span>gl<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">"Unable to initialize WebGL. Your browser or machine may not support it."</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">return</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="comment token">// Setze clear color auf schwarz, vollständig sichtbar</span>
+  gl<span class="punctuation token">.</span><span class="function token">clearColor</span><span class="punctuation token">(</span><span class="number token">0.0</span><span class="punctuation token">,</span> <span class="number token">0.0</span><span class="punctuation token">,</span> <span class="number token">0.0</span><span class="punctuation token">,</span> <span class="number token">1.0</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="comment token">// Lösche den color buffer mit definierter clear color</span>
+  gl<span class="punctuation token">.</span><span class="function token">clear</span><span class="punctuation token">(</span>gl<span class="punctuation token">.</span>COLOR_BUFFER_BIT<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>Als erstes verschaffen wir uns eine Referenz zum <code>canvas</code> Element und speichern sie in der <code>canvas</code> Variable.</p>
+
+<p>Sobald wir den Bezug zum canvas haben, versuchen wir einen zugehörigen  <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext">WebGLRenderingContext</a> zu erhalten, indem wir <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext">getContext</a> aufrufen und dabei den String <code>"webgl"</code> mitgeben. Falls der Browser WebGL nicht unterstützt, wird <code>getContext null</code> zurückgeben, woraufhin wir den Nutzer benachrichtigen und das Script verlassen.</p>
+
+<p>Wenn der Kontext erfolgreich initialisiert wurde, ist <code>gl</code> eine Variable für den Kontext. In diesem Fall setzen wir die clear color auf schwarz, und löschen den zugehörigen Kontext (der canvas wird mit der Hintergrundfarbe neu gezeichnet)</p>
+
+<p>An dieser Stelle ist genug Code vorhanden, um den WebGL-Kontext erfolgreich zu initialisieren. Ein großer, leerer, schwarzer Kasten sollte zu sehen sein, der darauf wartet mit weiteren Inhalten gefüttert zu werden.</p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample1/index.html', 670, 510) }}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample1">Vollständigen Code ansehen</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample1/">Demo in neuer Seite öffnen</a></p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<p> </p>
+
+<ul>
+ <li><a href="https://dev.opera.com/articles/introduction-to-webgl-part-1/">An introduction to WebGL</a>: Verfasst von Luz Caballero, veröffentlicht auf dev.opera.com. Der Artikel behandelt, was WebGL ist, erklärt wie es funktioniert (einschließlich Render Warteschlange) und stellt einige WebGL Bibliotheken vor. </li>
+ <li><a href="http://webglfundamentals.org/">WebGL Fundamentals</a>: WebGL Grundlagen </li>
+ <li><a href="http://duriansoftware.com/joe/An-intro-to-modern-OpenGL.-Table-of-Contents.html">An intro to modern OpenGL:</a> Eine Reihe netter Artikel über OpenGL, verfasst von Joe Groff, die eine verständliche Einführung in OpenGL bieten, von der Geschichte bis zum wichtigen Aspekt der Grafik Pipeline. Außerdem enthält es Beispiele, die demonstrieren, wie OpenGL funktioniert. Wer lernen will, was OpenGL eigentlich ist, findet hier einen guten Ausgangspunkt.</li>
+</ul>
+
+<p> </p>
+
+<p>{{Next("Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext")}}</p>
diff --git a/files/de/web/api/webgl_api/tutorial/farben_mittels_shader_in_einen_webgl-kontext_hinzufügen/index.html b/files/de/web/api/webgl_api/tutorial/farben_mittels_shader_in_einen_webgl-kontext_hinzufügen/index.html
new file mode 100644
index 0000000000..94068822d5
--- /dev/null
+++ b/files/de/web/api/webgl_api/tutorial/farben_mittels_shader_in_einen_webgl-kontext_hinzufügen/index.html
@@ -0,0 +1,97 @@
+---
+title: Farben mittels Shader in einen WebGL-Kontext hinzufügen
+slug: >-
+  Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen
+tags:
+  - Tutorial
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext", "Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren")}}</p>
+
+<p>Wir haben ein simples Quadrat <a href="/de/WebGL/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext" title="de/WebGL/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext">im vorherigen Teil</a> erstellt, im nächsten Schritt wollen wir ein bisschen Farbe ins Spiel bringen. Dafür sind Änderungen an den Shadern erforderlich.</p>
+
+<h2 id="Farben_zu_den_Eckpunkten_hinzufügen">Farben zu den Eckpunkten hinzufügen</h2>
+
+<p>In der Computergrafik werden Objekte mit einer Reihe von Punkten erstellt. Jeder Punkt hat eine Position und eine Farbe. Standardmäßig werden alle anderen Pixelfarben (und alle weiteren Attribute, darunter die Position) über eine lineare Interpolation berechnet, die automatisch glatte Verläufe erstellt. Vorher hat unser Vertex-Shader keine festgelegten Farben auf die Punkte (Vertices) angewendet und der Fragment-Shader legte die feste Farbe weiß für jeden Pixel fest, sodass das gesamte Quadrat komplett weiß gezeichnet wurde.</p>
+
+<p>Nun wollen wir in jeder Ecke des Quadrats einen Verlauf in einer unterschiedlichen Farbe rendern: rot, blau, grün und weiß. Als erstes sollten wir daher diese Farben in den vier Eckpunkten einrichten. Um das zu machen, müssen wir zunächst einen Array der Vertex-Farben erstellen und diesen dann in einen WebGL Buffer speichern. Das erreichen wir durch die folgenden Zeilen in unserer <code>initBuffers()</code> Funktion:</p>
+
+<pre class="brush: js">var colors = [
+  1.0,  1.0,  1.0,  1.0,    // weiß
+  1.0,  0.0,  0.0,  1.0,    // rot
+  0.0,  1.0,  0.0,  1.0,    // grün
+  0.0,  0.0,  1.0,  1.0     // blau
+];
+
+squareVerticesColorBuffer = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesColorBuffer);
+gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
+}
+</pre>
+
+<p>Dieser Code definiert zuerst einen JavaScript Array, welcher die vier Farb-Vektoren mit jeweils vier Werten für die jeweilige Farbe enthält. Dann wird ein neuer WebGL Buffer angewiesen diese Farben zu speichern und der Array wird in WebGL Floats konvertiert und im Buffer gespeichert.</p>
+
+<p>Um die Farben schließlich zu verwenden, muss der der Vertex-Shader aktualisiert werden, um die entsprechende Farbe vom Farb-Buffer zu erhalten:</p>
+
+<pre class="brush: html">&lt;script id="shader-vs" type="x-shader/x-vertex"&gt;
+  attribute vec3 aVertexPosition;
+  attribute vec4 aVertexColor;
+
+  uniform mat4 uMVMatrix;
+  uniform mat4 uPMatrix;
+
+  varying vec4 vColor;
+
+  void main(void) {
+    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+    vColor = aVertexColor;
+  }
+&lt;/script&gt;
+</pre>
+
+<p>Der wichtigste Unterschied ist hier, dass wir für jeden Punkt (Vertex) die Farbe entsprechend des Farb-Arrays setzen.</p>
+
+<h2 id="Die_Fragmente_mit_Farben_versehen">Die Fragmente mit Farben versehen</h2>
+
+<p>Als Erinnerung, so sah unser Fragment-Shader vorher aus:</p>
+
+<pre class="brush: html">&lt;script id="shader-fs" type="x-shader/x-fragment"&gt;
+  void main(void) {
+    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+  }
+&lt;/script&gt;
+</pre>
+
+<p>Um nun die interpolierte Farbe für jeden Pixel aufzugreifen, müssen wir dies einfach so ändern, dass wir den Wert der <code>vColor</code> Variable erhalten:</p>
+
+<pre>&lt;script id="shader-fs" type="x-shader/x-fragment"&gt;
+  varying vec4 vColor;
+
+  void main(void) {
+    gl_FragColor = vColor;
+  }
+&lt;/script&gt;
+</pre>
+
+<p>Das ist eine sehr einfache Änderung. Anstatt des festen Wertes vorher, erhält jedes Fragment jetzt einfach die interpolierte Farbe, basierend auf der Position relativ zu den Kontenpunkten (Vertices).</p>
+
+<h2 id="Mit_den_Farben_zeichnen">Mit den Farben zeichnen</h2>
+
+<p>Als nächstes ist es nötig, Code zur <code>initShaders()</code> Routine hinzuzufügen, um das Farbattribut für das Shader-Programm zu initialisieren:</p>
+
+<pre class="brush: js">  vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
+  gl.enableVertexAttribArray(vertexColorAttribute);
+</pre>
+
+<p>Dann wird <code>drawScene()</code> abgeändert, um schließlich die Farben zu verwenden, wenn das Quadrat gezeichnet wird:</p>
+
+<pre class="brush: js">  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesColorBuffer);
+  gl.vertexAttribPointer(vertexColorAttribute, 4, gl.FLOAT, false, 0, 0);
+</pre>
+
+<p>Jetzt sollten Sie <a href="/samples/webgl/sample3/index.html" title="https://developer.mozilla.org/samples/webgl/sample3/index.html">das Beispiel in einem WebGL kompatiblen Browser</a> sehen und Ihre Ausgabe sollte so wie im Bild unten gezeichnet werden (das Quadrat ist innerhalb eines schwarzen Felds zu sehen):</p>
+
+<p><img alt="screenshot.png" class="default internal" src="/@api/deki/files/4081/=screenshot.png"></p>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext", "Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren")}}</p>
diff --git a/files/de/web/api/webgl_api/tutorial/hinzufügen_von_2d_inhalten_in_einen_webgl-kontext/index.html b/files/de/web/api/webgl_api/tutorial/hinzufügen_von_2d_inhalten_in_einen_webgl-kontext/index.html
new file mode 100644
index 0000000000..56c267f394
--- /dev/null
+++ b/files/de/web/api/webgl_api/tutorial/hinzufügen_von_2d_inhalten_in_einen_webgl-kontext/index.html
@@ -0,0 +1,238 @@
+---
+title: Hinzufügen von 2D Inhalten in einen WebGL-Kontext
+slug: Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext
+tags:
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Einführung_in_WebGL", "Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen")}}</p>
+
+<p>Sobald der <a href="/de/WebGL/Einführung_in_WebGL" title="de/WebGL/Einführung in WebGL">WebGL-Kontext</a> erfolgreich erstellt wurde, können wir anfangen darin zu rendern. Am einfachsten beginnen wir mit einem einfachen, zweidimensionalen, untextuierten Objekt. Fangen wir also damit an, ein Stück Code zu schreiben, um ein Quadrat zu zeichnen.</p>
+
+<h3 id="Hinweis_zur_deutschen_Übersetzung_dieses_Abschnitts">Hinweis zur deutschen Übersetzung dieses Abschnitts</h3>
+
+<p>Die deutsche Übersetzung bezieht sich auf ältere Version des Beispielcodes als der englische Originaltext. Der im deutschen Text beschriebene Code hat einige Probleme:</p>
+
+<ul>
+ <li>Er ist unvollständig (die makePerspective() Funktion fehlt).</li>
+ <li>Er verwendet globale Variablen die in der einen Funktion gesetzt, in der anderen wieder gelesen werden. Dies gilt als schlechte Programmierpraxis.</li>
+ <li>Die Shader werden aus dem HTML DOM geladen, anstatt als Strings in JavaScript erzeugt. Diese Design-Entscheidung wird nicht begründet.</li>
+</ul>
+
+<p>Um das Beispiel selber nachzuprogrammieren ist es daher empfehlenswert, <a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context">auf die englische Version des Tutorials</a> zu wechseln. Vielleicht haben Sie ja auch Lust, <a href="/de/docs/Web/API/WebGL_API/Tutorial/Hinzuf%C3%BCgen_von_2D_Inhalten_in_einen_WebGL-Kontext$edit">diese Version ins Deutsche zu übersetzen</a>?</p>
+
+<h2 id="Beleuchtung_der_Szene">Beleuchtung der Szene</h2>
+
+<p>Das Wichtigste, das wir verstehen müssen bevor wir anfangen können, ist, dass wir, uns bereits in einer dreidimensionalen Umgebung befinden, obwohl wir nur ein zweidimensionales Objekt in diesem Beispiel rendern wollen. Das heißt, wir müssen jetzt bereits Shader einsetzen, die unsere einfache Szene beleuchten und solche erstellen, die unser Objekt zeichnen. Diese Shader werden festlegen wie unser Quadrat später beleuchtet sein wird.</p>
+
+<h3 id="Initialisierung_der_Shader">Initialisierung der Shader</h3>
+
+<p>Shader sind durch die <a class="external" href="http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf" title="http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf">OpenGL ES Shading Language (pdf)</a> spezifiziert. Damit es einfacher ist unsere Inhalte zu warten und zu aktualisieren, können wir unseren Code so schreiben, dass die Shader im HTML Dokument gefunden werden, anstatt alles mittels JavaScript zu bauen. Werfen wir einen Blick auf unsere <code>initShaders()</code> Routine, welche diese Aufgabe übernimmt:</p>
+
+<pre class="brush: js">function initShaders() {
+  var fragmentShader = getShader(gl, "shader-fs");
+  var vertexShader = getShader(gl, "shader-vs");
+
+  // Erzeuge Shader
+
+  shaderProgram = gl.createProgram();
+  gl.attachShader(shaderProgram, vertexShader);
+  gl.attachShader(shaderProgram, fragmentShader);
+  gl.linkProgram(shaderProgram);
+
+  // Wenn die das Aufrufen der Shader fehlschlägt,
+  // gib eine Fehlermeldung aus:
+
+  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+    alert("Initialisierung des Shaderprogramms nicht möglich.");
+  }
+
+  gl.useProgram(shaderProgram);
+
+  vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
+  gl.enableVertexAttribArray(vertexPositionAttribute);
+}
+
+</pre>
+
+<p>Es werden zwei Shader in dieser Routine geladen; der Erste, der <code>fragmentShader</code>, wird vom <a href="/de/HTML/Element/Script" title="de/HTML/Element/Script"><code>script</code></a> Element mit der Id "shader-fs" geladen. Der Zweite, der <code>vertexShader</code>, wird vom <a href="/de/HTML/Element/Script" title="de/HTML/Element/Script"><code>script</code></a> Element mit der Id "shader-vs" geladen. Wir werden im nächsten Abschnitt noch näher auf die <code>getShader()</code> Funktion eingehen. Diese Routine holt sich dann die Shader aus dem DOM.</p>
+
+<p>In diesem Teil erstellen wir noch das Shaderprogramm, in dem wir die Funktion <code>createProgram()</code> aufrufen, die beiden Shader anhängen und das Shaderprogramm verlinken. Danach wird der Zustand des <code>LINK_STATUS</code> Parameters überprüft, um sicher zu gehen, dass das Programm erfolgreich verlinkt wurde. Wenn das der Fall ist, aktivieren wir das neue Shaderprogramm.</p>
+
+<h3 id="Shader_aus_dem_DOM_laden">Shader aus dem DOM laden</h3>
+
+<p>Die <code>getShader()</code> Routine ruft ein Shaderprogramm mit dem festgelegtem Namen aus dem DOM auf, gibt das kompilierte Shaderprogramm zurück oder ist leer, wenn nichts geladen oder kompiliert worden konnte.</p>
+
+<pre class="brush: js">function getShader(gl, id) {
+  var shaderScript = document.getElementById(id);
+
+  if (!shaderScript) {
+    return null;
+  }
+
+  var theSource = "";
+  var currentChild = shaderScript.firstChild;
+
+  while(currentChild) {
+    if (currentChild.nodeType == 3) {
+      theSource += currentChild.textContent;
+    }
+
+    currentChild = currentChild.nextSibling;
+  }</pre>
+
+<p>Wenn das Element mit der festgelegten Id gefunden wurde, wird der Text in die Variable <code>theSource</code> gespeichert.</p>
+
+<pre class="brush: js">  var shader;
+
+  if (shaderScript.type == "x-shader/x-fragment") {
+    shader = gl.createShader(gl.FRAGMENT_SHADER);
+  } else if (shaderScript.type == "x-shader/x-vertex") {
+    shader = gl.createShader(gl.VERTEX_SHADER);
+  } else {
+    return null;  // Unbekannter Shadertyp
+  }</pre>
+
+<p>Jetzt wo der Code für die Shader gelesen wurde, können wir uns die MIME Typen der Shader angucken, um festzulegen, ob es ein Vertex-Shader (MIME Typ: "x-shader/x-vertex") oder ein Fragment-Shader (MIME Typ: "x-shader/x-fragment") ist. Danach werden dann die entsprechenden Shadertypen erstellt.</p>
+
+<pre class="brush: js">  gl.shaderSource(shader, theSource);
+
+  // Kompiliere das Shaderprogramm
+
+  gl.compileShader(shader);
+
+  // Überprüfe, ob die Kompilierung erfolgreich war
+
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    alert("Es ist ein Fehler beim Kompilieren der Shader aufgetaucht: " + gl.getShaderInfoLog(shader));
+    return null;
+  }
+
+  return shader;
+}
+</pre>
+
+<p>Schließlich wird der Shader kompiliert. Falls ein Fehler während der Kompilierung auftritt, zeigen wir die Fehlermeldung an und geben null zurück. Andernfalls wird der kompilierte Shader zurückgegeben.</p>
+
+<h3 id="Die_Shader">Die Shader</h3>
+
+<p>Nun müssen wir die eigentlichen Shaderprogramme in unser HTML schreiben. Wie genau diese Shader arbeiten, übersteigt das Ziel dieses Tutorials, wir gehen daher nur auf das Wesentliche ein.</p>
+
+<h4 id="Fragment-Shader">Fragment-Shader</h4>
+
+<p>Jeder Pixel in einem Vieleck wird <strong>Fragment</strong> in der GL-Fachsprache genannt. Die Aufgabe des Fragment-Shaders ist es, die Farbe für jeden Pixel bereitzustellen. In unserem Fall ordnen wir einfach jedem Pixel eine weiße Farbe zu.</p>
+
+<p><code>gl_FragColor</code> ist eine eingebaute GL Variable, die für die Farbe des Fragments verwendet wird.</p>
+
+<pre class="brush: html">&lt;script id="shader-fs" type="x-shader/x-fragment"&gt;
+
+  void main(void) {
+    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+  }
+&lt;/script&gt;
+</pre>
+
+<h4 id="Vertex-Shader">Vertex-Shader</h4>
+
+<p>Der Vertex-Shader definiert die Position und Form von jedem Punkt.</p>
+
+<pre class="brush: html">&lt;script id="shader-vs" type="x-shader/x-vertex"&gt;
+  attribute vec3 aVertexPosition;
+
+  uniform mat4 uMVMatrix;
+  uniform mat4 uPMatrix;
+
+
+  void main(void) {
+    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+  }
+&lt;/script&gt;
+</pre>
+
+<h2 id="Das_Objekt_erstellen">Das Objekt erstellen</h2>
+
+<p>Bevor wir unser Quadrat rendern können, müssen wir einen Puffer erstellen, der unsere Punkte enthält. Das werden wir mittels einer Funktion machen, die wir <code>initBuffers()</code> nennen. Wenn wir zu mehr fortgeschrittenen WebGL-Konzepten kommen, wird diese Routine vergrößert, um mehr - und komplexere - 3D-Objekte zu erstellen.</p>
+
+<pre class="brush: js">var horizAspect = 480.0/640.0;
+
+function initBuffers() {
+  squareVerticesBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
+
+  var vertices = [
+    1.0,  1.0,  0.0,
+    -1.0, 1.0,  0.0,
+    1.0,  -1.0, 0.0,
+    -1.0, -1.0, 0.0
+  ];
+
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
+}
+</pre>
+
+<p>Diese Routine ist, durch die einfache Art der Szene in diesem Beispiel, sehr einfach gehalten. Es geht los mit dem Aufruf der <code>createBuffer()</code> Methode, die einen Puffer erstellt in dem wir die Punkte speichern können. Der Puffer wird, durch Aufrufen der <code>bindBuffer()</code> Methode, mit dem Kontext verbunden.</p>
+
+<p>Wenn das erledigt ist, erstellen wir einen JavaScript Array, der die Koordinaten für jeden Punkt des Quadrats enthält. Dieser wird dann in einen WebGL FloatArray umgewandelt und durch die <code>bufferData()</code> Methode werden die Punkte für das Objekt festgelegt.</p>
+
+<h2 id="Die_Szene_zeichnen">Die Szene zeichnen</h2>
+
+<p>Jetzt sind die Shader aufgebaut und das Objekt ist erstellt. Wir können die Szene rendern lassen. Da wir in dieser Szene nichts animieren, ist unsere <code>drawScene()</code> Funktion sehr einfach. Es werden einige nützliche Routinen verwendet, die wir uns kurz anschauen.</p>
+
+<pre class="brush: js">function drawScene() {
+  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+  perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);
+
+  loadIdentity();
+  mvTranslate([-0.0, 0.0, -6.0]);
+
+  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
+  gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
+  setMatrixUniforms();
+  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+}
+</pre>
+
+<p>Als Erstes wird der Kontext auf unsere Hintergrundfarbe gesetzt und die Kameraperspektive festgelegt. Wir definieren ein Blickfeld von 45°, mit einem Höhen-/Breitenverhältnis von 640 zu 480 (die Größe unseres Canvas). Außerdem legen wir fest, dass wir nur Objekte zwischen 0.1 und 100 Einheiten gerendert haben wollen.</p>
+
+<p>Dann wird die Position des Quadrats, über das Laden der ursprünglichen Position und der Verschiebung um 6 Einheiten von der Kamera weg, ermittelt. Danach, verbinden wir den Puffer des Quadrats mit dem Kontext, konfigurieren es, und zeichnen das Objekt, in dem wir die <code>drawArrays()</code> Methode aufrufen.</p>
+
+<p>Das Ergebnis <a href="/samples/webgl/sample2/index.html" title="https://developer.mozilla.org/samples/webgl/sample2/index.html">kann hier ausprobiert werden</a>, wenn Sie einen Browser verwenden, der WebGL unterstützt.</p>
+
+<h2 id="Matrix_Operationen">Matrix Operationen</h2>
+
+<p>Matrix Operationen sind schon kompliziert genug. Keiner möchte wirklich den ganzen Code selbst schreiben, der benötigt wird um die Berechnungen selber durchzuführen. Glücklicherweise gibt es <a class="external" href="http://sylvester.jcoglan.com/" title="http://sylvester.jcoglan.com/">Sylvester</a>, eine sehr handliche Bibliothek, die bestens mit Vektor und Matrix Operationen in JavaScript umgehen kann.</p>
+
+<p>Die <code>glUtils.js</code> Datei, die in dieser Demo benutzt wird, wird bei einer ganzen Reihe von WebGL-Demos, die Web zu finden sind, verwendet. Keiner scheint sich völlig sicher zu sein, woher diese Bibliothek ursprünglich herkommt, aber es vereinfacht den Gebrauch von Sylvester noch weiter, in dem Methoden hinzugefügt werden, die auch spezielle Matrizentypen ermöglichen und HTML ausgegeben werden kann, um die Matrizen anzeigen zu lassen.</p>
+
+<p>Zusätzlich, definiert diese Demo ein paar hilfreiche Routinen, um an diese Bibliothek für spezielle Aufgaben anzukoppeln. Was genau gemacht wird, ist kein Teil dieses Artikels, aber es gibt einige gute Referenzen zu Matrizen, die online verfügbar sind. Siehe unter <a href="/de/WebGL/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext#Siehe_auch" title="de/WebGL/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext#Siehe_auch">Siehe auch</a>, um ein paar aufzulisten.</p>
+
+<pre class="brush: js">function loadIdentity() {
+  mvMatrix = Matrix.I(4);
+}
+
+function multMatrix(m) {
+  mvMatrix = mvMatrix.x(m);
+}
+
+function mvTranslate(v) {
+  multMatrix(Matrix.Translation($V([v[0], v[1], v[2]])).ensure4x4());
+}
+
+function setMatrixUniforms() {
+  var pUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
+  gl.uniformMatrix4fv(pUniform, false, new Float32Array(perspectiveMatrix.flatten()));
+
+  var mvUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
+  gl.uniformMatrix4fv(mvUniform, false, new Float32Array(mvMatrix.flatten()));
+}
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a class="external" href="http://mathworld.wolfram.com/Matrix.html" title="http://mathworld.wolfram.com/Matrix.html">Matrizen</a> auf Wolfram MathWorld (Englisch).</li>
+ <li><a class="external" href="http://de.wikipedia.org/wiki/Matrix_%28Mathematik%29" title="http://de.wikipedia.org/wiki/Matrix_%28Mathematik%29">Matrix</a> auf Wikipedia.</li>
+</ul>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Einführung_in_WebGL", "Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen")}}</p>
diff --git a/files/de/web/api/webgl_api/tutorial/index.html b/files/de/web/api/webgl_api/tutorial/index.html
new file mode 100644
index 0000000000..34db3f57e6
--- /dev/null
+++ b/files/de/web/api/webgl_api/tutorial/index.html
@@ -0,0 +1,40 @@
+---
+title: WebGL Tutorial
+slug: Web/API/WebGL_API/Tutorial
+tags:
+  - Tutorial
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial
+---
+<div>{{WebGLSidebar}}</div>
+
+<div class="summary">
+<p><a class="external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">WebGL</a> enables web content to use an API based on <a class="external" href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0 to perform 3D rendering in an HTML {{HTMLElement("canvas")}} in browsers that support it without the use of plug-ins. WebGL programs consist of control code written in JavaScript and special effects code(shader code) that is executed on a computer's Graphics Processing Unit (GPU). WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background.</p>
+</div>
+
+<p><span class="seoSummary">This tutorial describes how to use the <code>&lt;canvas&gt;</code> element to draw WebGL graphics, starting with the basics. The examples provided should give you some clear ideas what you can do with WebGL and will provide code snippets that may get you started in building your own content.</span></p>
+
+<h2 id="Before_you_start">Before you start</h2>
+
+<p>Using the <code>&lt;canvas&gt;</code> element is not very difficult, but you do need a basic understanding of <a href="/en-US/docs/Web/HTML" title="HTML">HTML</a> and <a href="/en-US/docs/Web/JavaScript" title="JavaScript">JavaScript</a>. The <code>&lt;canvas&gt;</code> element and WebGL are not supported in some older browsers, but are supported in recent versions of all major browsers. In order to draw graphics on the canvas we use a JavaScript context object, which creates graphics on the fly.</p>
+
+<h2 id="In_diesem_Tutorial">In diesem Tutorial</h2>
+
+<dl>
+ <dt><a href="/de/Web/API/WebGL_API/Tutorial/Einführung_in_WebGL">Einführung in WebGL</a></dt>
+ <dd>Wie man einen WebGL-Kontext herstellt.</dd>
+ <dt><a href="/de/Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext">Hinzufügen von 2D Inhalten in einen WebGL-Kontext</a></dt>
+ <dd>Wie eine einfache, flache Form mittels WebGL erstellt wird.</dd>
+ <dt><a href="/de/Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen">Farben mittels Shader in einen WebGL-Kontext hinzufügen</a></dt>
+ <dd>Zeigt wie Farben mit Shadern auf die Form gebracht werden können.</dd>
+ <dt><a href="/de/Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren">Objekte mit WebGL animieren</a></dt>
+ <dd>Erklärt wie Objekte rotiert und verschiebt werden, um eine einfache Animation zu erstellen.</dd>
+ <dt><a href="/de/Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen">3D-Objekte mit WebGL erstellen</a></dt>
+ <dd>Erläutert wie dreidimensionale Objekte erstellt und animiert werden (ein Würfel dient als Beispiel).</dd>
+ <dt><a href="/de/Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden">Texturen in WebGL verwenden</a></dt>
+ <dd>Demonstriert wie Texturen auf die Oberfläche eines Objektes gezeichnet werden können.</dd>
+ <dt><a href="/de/Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL">Beleuchtung in WebGL</a></dt>
+ <dd>Wie Beleuchtungseffekte in unserem WebGL-Kontext simuliert werden.</dd>
+ <dt><a href="/de/Web/API/WebGL_API/Tutorial/Animierte_Texturen_in_WebGL">Animierte Texturen in WebGL</a></dt>
+ <dd>Animierte Texturen werden mittels einem Ogg-Video auf der Oberfläche eines rotierenden Würfels realisiert.</dd>
+</dl>
diff --git a/files/de/web/api/webgl_api/tutorial/objekte_mit_webgl_animieren/index.html b/files/de/web/api/webgl_api/tutorial/objekte_mit_webgl_animieren/index.html
new file mode 100644
index 0000000000..a9eafed6db
--- /dev/null
+++ b/files/de/web/api/webgl_api/tutorial/objekte_mit_webgl_animieren/index.html
@@ -0,0 +1,118 @@
+---
+title: Objekte mit WebGL animieren
+slug: Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren
+tags:
+  - Tutorial
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen", "Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen") }}</p>
+
+<p>Unser Code vom vorherigen Beispiel ist bereits so konfiguriert, dass die WebGL-Szene alle 15 Millisekunden neu gezeichnet wird. Bis jetzt wird zu jeder Zeit das gleiche Bild immer neu gezeichnet. Das wollen wir nun ändern, sodass sich unser Quadrat auf der Bildfläche bewegt.</p>
+
+<p>In diesem Beispiel rotieren und verschieben wir unser Quadrat in alle drei Dimensionen, sodass es schon in einem 3D Raum existieren kann (obwohl wir bisher nur ein 2D-Objekt erstellt haben).</p>
+
+<h2 id="Das_Quadrat_rotieren_lassen">Das Quadrat rotieren lassen</h2>
+
+<p>Fangen wir damit an, das Quadrat im Raum zu rotieren. Als erstes brauchen wir dazu eine Variable in welche wir die Rotation des Quadrats verfolgen können:</p>
+
+<pre class="brush: js">var squareRotation = 0.0;
+</pre>
+
+<p>Jetzt müssen wir die <code>drawScene()</code> Funktion ändern, um die aktuelle Rotation auf das Quadrat anzuwenden, wenn dies gezeichnet werden soll. Nach der Umrechnung der Startposition für das Quadrat, wenden wir eine Rotation wie diese an:</p>
+
+<pre class="brush: js">mvPushMatrix();
+mvRotate(squareRotation, [1, 0, 1]);
+</pre>
+
+<p>Das speichert die aktuelle Model-View Matrix und rotiert die Matrix mit dem aktuellen Wert von <code>squareRotation</code> um die X und Z Achsen.</p>
+
+<p>Nach dem Zeichen müssen wir die Originalmatrix wiederherstellen:</p>
+
+<pre class="brush: js">mvPopMatrix();
+</pre>
+
+<p>Wir speichern und stellen die Originalmatrix dann wieder her, um zu verhindern, dass die Rotation auf andere Objekte angewendet wird, die wir vielleicht später noch zeichnen wollen.</p>
+
+<p>Um letztendlich etwas zu animieren, brauchen wir noch ein paar Zeilen Code, welcher den Wert von <code>squareRotation</code> über die Zeit verändert. Dafür erstellen wir eine neue Variable, die die Zeit aufzeichnet, welche wir zuletzt animiert haben (wir nennen diese <code>lastSquareUpdateTime</code>), dann fügen wir den folgenden Code an das Ende der <code>drawScene()</code> Funktion:</p>
+
+<pre class="brush: js">var currentTime = (new Date).getTime();
+if (lastSquareUpdateTime) {
+  var delta = currentTime - lastSquareUpdateTime;
+  squareRotation += (30 * delta) / 1000.0;
+}
+lastSquareUpdateTime = currentTime;
+</pre>
+
+<p>Dieser Code benutzt den Betrag der Zeit, die vergangen ist, seitdem wir zum letzten Mal den Wert von <code>squareRotation</code> geändert haben, um festzustellen wie weit das Quadrat rotiert werden soll.</p>
+
+<h2 id="Das_Quadrat_bewegen">Das Quadrat bewegen</h2>
+
+<p>Wir können das Quadrat auch verschieben indem wir eine unterschiedliche Position berechnen lassen, bevor wir es zeichnen. Dieses Beispiel zeigt wie eine grundlegende Animation gemacht werden kann. Allerdings möchten Sie in einer echten Anwendung wohl eher etwas weniger Irrsinniges machen.</p>
+
+<p>Verfolgen wir die Abstände zu jeder Achse für unsere Verschiebung in drei neuen Variablen:</p>
+
+<pre class="brush: js">var squareXOffset = 0.0;
+var squareYOffset = 0.0;
+var squareZOffset = 0.0;
+</pre>
+
+<p>Und den Betrag, welcher unsere Postion auf jeder Achse verändern soll, in diesen Variablen:</p>
+
+<pre class="brush: js">var xIncValue = 0.2;
+var yIncValue = -0.4;
+var zIncValue = 0.3;
+</pre>
+
+<p>Nun können wir einfach diesen Code zum vorherigen Code, der die Rotation aktualisiert, hinzufügen:</p>
+
+<pre class="brush: js">squareXOffset += xIncValue * ((30 * delta) / 1000.0);
+squareYOffset += yIncValue * ((30 * delta) / 1000.0);
+squareZOffset += zIncValue * ((30 * delta) / 1000.0);
+
+if (Math.abs(squareYOffset) &gt; 2.5) {
+  xIncValue = -xIncValue;
+  yIncValue = -yIncValue;
+  zIncValue = -zIncValue;
+}
+</pre>
+
+<p>Das bringt unser Quadrat dazu seine Größe zu verändern, sich willkürlich auf der Fläche zu verschieben, sich vom Betrachter weg und zum Betrachter hin zu bewegen und das alles während das Quadrat auch noch rotiert. Das sieht dann schon eher wie ein Bildschirmschoner aus.</p>
+
+<p>Wenn Ihr Browser WebGL unterstützt, <a href="/samples/webgl/sample4/index.html" title="https://developer.mozilla.org/samples/webgl/sample4/index.html">ist hier das Beispiel in Aktion</a>.</p>
+
+<h2 id="Weitere_Matrixoperationen">Weitere Matrixoperationen</h2>
+
+<p>Dieses Beispiel verwendet einige zusätzliche Matrixoperationen, darunter zwei Routinen, die die Matrizen verschieben, wiederherstellen und in einem Stack aufbewahren und eine Routine, die die Matrix um eine gewissen Anzahl von Grad rotiert:</p>
+
+<pre class="brush: js">var mvMatrixStack = [];
+
+function mvPushMatrix(m) {
+  if (m) {
+    mvMatrixStack.push(m.dup());
+    mvMatrix = m.dup();
+  } else {
+    mvMatrixStack.push(mvMatrix.dup());
+  }
+}
+
+function mvPopMatrix() {
+  if (!mvMatrixStack.length) {
+    throw("Can't pop from an empty matrix stack.");
+  }
+
+  mvMatrix = mvMatrixStack.pop();
+  return mvMatrix;
+}
+
+function mvRotate(angle, v) {
+  var inRadians = angle * Math.PI / 180.0;
+
+  var m = Matrix.Rotation(inRadians, $V([v[0], v[1], v[2]])).ensure4x4();
+  multMatrix(m);
+}
+</pre>
+
+<p>Diese Routinen wurden von einem Beispiel ausgeliehen, welches von Vlad Vukićević geschrieben wurde.</p>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen", "Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen") }}</p>
diff --git a/files/de/web/api/webgl_api/tutorial/texturen_in_webgl_verwenden/index.html b/files/de/web/api/webgl_api/tutorial/texturen_in_webgl_verwenden/index.html
new file mode 100644
index 0000000000..eb59417694
--- /dev/null
+++ b/files/de/web/api/webgl_api/tutorial/texturen_in_webgl_verwenden/index.html
@@ -0,0 +1,159 @@
+---
+title: Texturen in WebGL verwenden
+slug: Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden
+tags:
+  - Tutorial
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen", "Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL")}}</p>
+
+<p>Jetzt wo unser Beispielprogramm über einen rotierenden 3D-Würfel verfügt, wollen wir darauf eine Textur legen, statt der bisher verwendeten, einfachen Farben.</p>
+
+<h2 id="Texturen_laden">Texturen laden</h2>
+
+<p>Als Erstes müssen wir ein paar Zeilen Code hinzufügen, um die Texturen zu laden. In unserem Fall werden wir eine einzige Textur verwenden, die auf alle sechs Seiten des rotierenden Würfels gelegt wird, aber die gleiche Technik kann verwendet werden, um jede beliebig viele Texturen auf ein Objekt zu legen.</p>
+
+<p>Der Code, der die Textur lädt, sieht so aus:</p>
+
+<pre class="brush: js">function initTextures() {
+  gl.enable(gl.TEXTURE_2D);
+  cubeTexture = gl.createTexture();
+  cubeImage = new Image();
+  cubeImage.onload = function() { handleTextureLoaded(cubeImage, cubeTexture); }
+  cubeImage.src = "cubetexture.png";
+}
+
+function handleTextureLoaded(image, texture) {
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.texImage2D(gl.TEXTURE_2D, 0, image, true);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
+  gl.generateMipmap(gl.TEXTURE_2D);
+  gl.bindTexture(gl.TEXTURE_2D, null);
+}
+</pre>
+
+<p>Die Routine <code>initTextures()</code> aktiviert zunächst die Unterstützung von Texturen, dann wird das GL Textur-Objekt <code>cubeTexture</code> durch Aufruf der GL <code>createTexture()</code> Funktion erstellt. Um die Textur von der Bilddatei zu laden, wird dann ein <code>Image</code>-Objekt erstellt und in die Grafikdatei geladen, die wir als unsere Textur verwenden wollen. Die <code>handleTextureLoaded()</code> Callback-Routine wird ausgeführt, wenn das Bild geladen wurde.</p>
+
+<p>Um schließlich die Textur zu erstellen, legen wir fest, dass die neue Textur die aktuelle Textur ist, mit welcher wir arbeiten wollen und verbinden diese mit <code>gl.TEXTURE_2D</code>. Danach wird das geladene Bild mit <code>texImage2D()</code> die Bilddaten in die Textur schreiben.</p>
+
+<p>Die nächsten zwei Zeilen legen Filter für die Textur fest, die steuern, wie das Bild gefiltert wird, wenn es skaliert wird. In diesem Fall verwenden wir lineare Filter, wenn das Bild hoch skaliert wird und <a class="external" href="http://de.wikipedia.org/wiki/Mip_Mapping">Mip-Mapping</a> wenn wir herunter skalieren. Dann wird die Mip-Map generiert, indem <code>generateMipMap()</code> aufgerufen wird. Schließlich teilen wir WebGL mit, dass wir mit der Arbeit an der Textur fertig sind, in dem wir <code>null</code> mit <code>gl.TEXTURE_2D</code> verknüpfen.</p>
+
+<h2 id="Textur_auf_die_Flächen_legen">Textur auf die Flächen legen</h2>
+
+<p>Nun ist die Textur geladen und bereit eingesetzt zu werden. Bevor wir die Textur aber verwenden können, müssen wir die Texturkoordinaten auf die Vertices der Flächen des Würfels legen. Das ersetzt den vorherigen Code in <code>initBuffers()</code>, der die Farben für jede Fläche festgelegt hat.</p>
+
+<pre class="brush: js">  cubeVerticesTextureCoordBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesTextureCoordBuffer);
+
+  var textureCoordinates = [
+    // vorne
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // hinten
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // oben
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // unten
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // rechts
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // links
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0
+  ];
+
+  gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(textureCoordinates),
+                gl.STATIC_DRAW);
+</pre>
+
+<p>Zuerst erstellt dieser Code einen GL-Buffer in welchen wir die Texturkoordinaten für jede Fläche speichern werden, dann verknüpfen wir diesen Buffer als das Array in welchen wir schreiben werden.</p>
+
+<p>Das <code>textureCoordinates</code> Array definiert die Texturkoordinaten entsprechend jedem Vertex von jeder Fläche. Beachten Sie, dass die Texturkoordinaten sich im Bereich von 0.0 bis 1.0 befinden. Beim Texturmapping werden die Dimensionen von Texturen immer auf einen Bereich von 0.0 bis 1.0 normiert, egal welche Größe die Textur wirklich hat.</p>
+
+<p>Sobald wir das Texturmapping-Array erstellt haben, speichern wir das Array in den Buffer, sodass GL die Daten zur Verfügung hat.</p>
+
+<h2 id="Die_Shader_aktualisieren">Die Shader aktualisieren</h2>
+
+<p>Das Shader-Programm - und der Code, der die Shader initialisiert - muss aktualisiert werden, damit die Textur anstatt der Farben verwendet wird.</p>
+
+<p>Werfen wir zunächst einen Blick auf die einfache Änderung, die in <code>initShaders()</code> benötigt wird:</p>
+
+<pre class="brush: js">  textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
+  gl.enableVertexAttribArray(textureCoordAttribute);
+</pre>
+
+<p>Das ersetzt den Code, der die Vertex Farbattribute enthielt, mit dem, der nun die Texturkoordinaten für jeden Vertex enthält.</p>
+
+<h3 id="Der_Vertex-Shader">Der Vertex-Shader</h3>
+
+<p>Als Nächstes müssen wir den Vertex-Shader ersetzen, sodass statt der Farbdaten die Texturkoordinaten abgerufen werden.</p>
+
+<pre class="brush: html">    &lt;script id="shader-vs" type="x-shader/x-vertex"&gt;
+      attribute vec3 aVertexPosition;
+      attribute vec2 aTextureCoord;
+
+      uniform mat4 uMVMatrix;
+      uniform mat4 uPMatrix;
+
+      varying vec2 vTextureCoord;
+
+      void main(void) {
+        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+        vTextureCoord = aTextureCoord;
+      }
+    &lt;/script&gt;
+</pre>
+
+<p>Die wichtigste Änderung ist hier, dass anstatt die Vertex-Farbe abzurufen, die Texturkoordinaten gesetzt werden. Das gibt den Ort der Textur entsprechend zum Vertex an.</p>
+
+<h3 id="Der_Fragment-Shader">Der Fragment-Shader</h3>
+
+<p>Der Fragment-Shader muss in ähnlicher Weise geändert werden:</p>
+
+<pre class="brush: html">    &lt;script id="shader-fs" type="x-shader/x-fragment"&gt;
+      varying vec2 vTextureCoord;
+
+      uniform sampler2D uSampler;
+
+      void main(void) {
+        gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
+      }
+    &lt;/script&gt;
+</pre>
+
+<p>Anstatt einen Farbwert auf die Fragment-Farbe zu legen, wird die Fragment-Farbe berechnet in dem der <strong>texel</strong> (der Pixel innerhalb der Textur) abgerufen wird, der am Besten auf die Fragement-Position laut dem Sampler passt.</p>
+
+<h2 id="Zeichnen_des_textuierten_Würfels">Zeichnen des textuierten Würfels</h2>
+
+<p>Die Änderungen an der <code>drawScene()</code> Funktion sind einfach (mit der Ausnahme, dass ich nun zur besseren Anschaulichkeit die Verschiebungen entfernt habe und der Würfel nur noch rotiert wird).</p>
+
+<p>Der Code, der die Farben auf die Textur legt ist weg und wurde ersetzt:</p>
+
+<pre class="brush: js">  gl.activeTexture(gl.TEXTURE0);
+  gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
+  gl.uniform1i(gl.getUniformLocation(shaderProgram, "uSampler"), 0);
+</pre>
+
+<p>GL ermöglicht 32 Textur-Register; der Erste davon ist <code>gl.TEXTURE0</code>. Wir verknüpfen unsere geladene Textur zu diesem Register, dann wird der Shader-Sampler <code>uSampler</code> gesetzt (im Shader-Program festgelegt), um die Textur zu benutzen.</p>
+
+<p>Jetzt sollte der rotierende Würfel gut anzuschauen zu sein. Wenn Ihr Browser WebGL unterstützt, können Sie <a href="/samples/webgl/sample6/index.html" title="https://developer.mozilla.org/samples/webgl/sample6/index.html">das Live-Beispiel ausprobieren</a>.</p>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen", "Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL")}}</p>
diff --git a/files/de/web/api/webglactiveinfo/index.html b/files/de/web/api/webglactiveinfo/index.html
new file mode 100644
index 0000000000..ed46e4e058
--- /dev/null
+++ b/files/de/web/api/webglactiveinfo/index.html
@@ -0,0 +1,129 @@
+---
+title: WebGLActiveInfo
+slug: Web/API/WebGLActiveInfo
+translation_of: Web/API/WebGLActiveInfo
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>Das <strong>WebGLActiveInfo</strong>-Interface ist Teil der <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> und repräsentiert die Informationen der Rückgabewerte von den {{domxref("WebGLRenderingContext.getActiveAttrib()")}} und {{domxref("WebGLRenderingContext.getActiveUniform()")}} Methoden.</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt>{{domxref("WebGLActiveInfo.name")}}</dt>
+ <dd>Der schreibgeschützte Name von der abgefragten Variable</dd>
+ <dt>{{domxref("WebGLActiveInfo.size")}}</dt>
+ <dd>Die schreibgeschützte Größe der abgefragten Variable</dd>
+ <dt>{{domxref("WebGLActiveInfo.type")}}</dt>
+ <dd>Der schreibgeschützte Typ der abgefragten Variable</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Ein <code>WebGLActiveInfo</code>-Objekt wird von den folgenden Funktionen zurück gegeben:</p>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.getActiveAttrib()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getActiveUniform()")}}</li>
+ <li>{{domxref("WebGL2RenderingContext.getTransformFeedbackVarying()")}}</li>
+</ul>
+
+<pre class="brush: js">WebGLActiveInfo? getActiveAttrib(WebGLProgram? program, GLuint index);
+WebGLActiveInfo? getActiveUniform(WebGLProgram? program, GLuint index);
+WebGLActiveInfo? getTransformFeedbackVarying(WebGLProgram? program, GLuint index)
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.11", "WebGLActiveInfo")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Erstmalige Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("9")}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatIE("11")}}</td>
+   <td>{{CompatOpera("12")}}</td>
+   <td>{{CompatSafari("5.1")}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(44)}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>25</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>12</td>
+   <td>8.1</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(44)}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Dieses Feature ist durch eine Voreinstellung deaktiviert. Zur Aktivierung setzt man in about:config den Wert gfx.offscreencanvas.enabled auf true.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.getActiveAttrib()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getActiveUniform()")}}</li>
+</ul>
diff --git a/files/de/web/api/webglprogram/index.html b/files/de/web/api/webglprogram/index.html
new file mode 100644
index 0000000000..3d115b5947
--- /dev/null
+++ b/files/de/web/api/webglprogram/index.html
@@ -0,0 +1,166 @@
+---
+title: WebGLProgram
+slug: Web/API/WebGLProgram
+tags:
+  - WebGL
+  - WebGLProgram
+translation_of: Web/API/WebGLProgram
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>Das <strong>WebGLProgram</strong> ist ein Teil der <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> und ist eine Kombination aus zwei kompilierten {{domxref("WebGLShader")}}n, bestehend aus einem Vertex-Shader und einem Fragment-Shader (beide in GLSL geschrieben). Diese werden dann zu einem benutzbaren Programm zusammen gelinkt.</p>
+
+<pre class="brush: js">var program = gl.createProgram();
+
+// Bereits existierende Shader hinzufügen
+gl.attachShader(program, vertexShader);
+gl.attachShader(program, fragmentShader);
+
+gl.linkProgram(program);
+
+if ( !gl.getProgramParameter( program, gl.LINK_STATUS) ) {
+  var info = gl.getProgramInfoLog(program);
+  throw "WebGL-Programm konnte nicht kompiliert werden. \n\n" + info;
+}
+</pre>
+
+<p>Für weitere Informationen über das Erstellen von <code>vertexShader</code> und <code>fragmentShader, lese dir </code>{{domxref("WebGLShader")}} durch.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Das_Program_benutzen">Das Program benutzen</h3>
+
+<p>Hier wird zu erst der GPU mit geteilt, dass sie das Programm benutzen soll. Danach werden die benötigten Daten und Konfigurationen vorgenommen und zuletzt wird etwas auf den Bildschirm gezeichnet.</p>
+
+<pre class="brush: js">// Das Programm benutzen
+gl.useProgram(program);
+
+// Bereits existierende Attribute binden
+gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+gl.enableVertexAttribArray(attributeLocation);
+gl.vertexAttribPointer(attributeLocation, 3, gl.FLOAT, false, 0, 0);
+
+// Ein einzelnes Dreieck zeichnen
+gl.drawArrays(gl.TRIANGLES, 0, 3);
+</pre>
+
+<h3 id="Das_Programm_löschen">Das Programm löschen</h3>
+
+<p>Falls es bei dem Linken des Programms zu fehlern kommt oder falls du ein bereits erstelltes Programm einfach nur löschen möchtest, dann kannst du einfach {{domxref("WebGLRenderingContext.deleteProgram()")}} ausführen. Dies löscht den Speicher des gelinkten Programms.</p>
+
+<pre class="brush: js">gl.deleteProgram(program);
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.6", "WebGLProgram")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Erstmalige Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("9")}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatIE("11")}}</td>
+   <td>{{CompatOpera("12")}}</td>
+   <td>{{CompatSafari("5.1")}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(44)}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>25</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>12</td>
+   <td>8.1</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(44)}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] This feature is behind a feature preference setting. In about:config, set <code>gfx.offscreencanvas.enabled</code> to <code>true</code>.</p>
+
+<h2 id="Weiterführendes">Weiterführendes</h2>
+
+<ul>
+ <li>{{domxref("WebGLShader")}}</li>
+ <li>{{domxref("WebGLRenderingContext.attachShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.compileShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.detachShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderSource()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.shaderSource()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.useProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li>
+</ul>
diff --git a/files/de/web/api/webglrenderingcontext/canvas/index.html b/files/de/web/api/webglrenderingcontext/canvas/index.html
new file mode 100644
index 0000000000..4f54fd191e
--- /dev/null
+++ b/files/de/web/api/webglrenderingcontext/canvas/index.html
@@ -0,0 +1,74 @@
+---
+title: WebGLRenderingContext.canvas
+slug: Web/API/WebGLRenderingContext/canvas
+tags:
+  - Schreibgeschützt
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/canvas
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>Die Eigenschaft <code><strong>WebGLRenderingContext.canvas</strong></code> ist eine schreibgeschütze Referenz auf das {{domxref("HTMLCanvasElement")}} oder das {{domxref("OffscreenCanvas")}} Objekt, welches mit dem Context verknüpft ist. Es kann auch den Wert {{jsxref("null")}} annehmen, wenn es keinem {{HTMLElement("canvas")}} Element oder {{domxref("OffscreenCanvas")}} Objekt zugeordnet ist.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var><em>gl</em></var>.canvas;</pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Entweder ein {{domxref("HTMLCanvasElement")}}, ein {{domxref("OffscreenCanvas")}} Objekt oder {{jsxref("null")}}.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Canvas_Element">Canvas Element</h3>
+
+<p>Gegeben ist ein {{HTMLElement("canvas")}} Element:</p>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>Du kannst die Eigenschaft <code>canvas</code> aus dem <code>WebGLRenderingContext</code> auslesen um eine Referenz darauf zu erhalten.</p>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var gl = canvas.getContext('webgl');
+gl.canvas; // HTMLCanvasElement
+</pre>
+
+<h3 id="Offscreen_Canvas">Offscreen Canvas</h3>
+
+<p>Beispiel des experimentellen {{domxref("OffscreenCanvas")}} Objektes.</p>
+
+<pre class="brush: js">var offscreen = new OffscreenCanvas(256, 256);
+var gl = offscreen.getContext('webgl');
+gl.canvas; // OffscreenCanvas</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#DOM-WebGLRenderingContext-canvas", "WebGLRenderingContext.canvas")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Ursprüngliche Definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.canvas")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{domxref("CanvasRenderingContext2D.canvas")}}</li>
+ <li>{{domxref("OffscreenCanvas")}}</li>
+</ul>
diff --git a/files/de/web/api/webglrenderingcontext/getactiveattrib/index.html b/files/de/web/api/webglrenderingcontext/getactiveattrib/index.html
new file mode 100644
index 0000000000..0774b87631
--- /dev/null
+++ b/files/de/web/api/webglrenderingcontext/getactiveattrib/index.html
@@ -0,0 +1,115 @@
+---
+title: WebGLRenderingContext.getActiveAttrib()
+slug: Web/API/WebGLRenderingContext/getActiveAttrib
+translation_of: Web/API/WebGLRenderingContext/getActiveAttrib
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>Die <strong><code>WebGLRenderingContext.getActiveAttrib() </code></strong>Methode der <a href="/de/docs/Web/API/WebGL_API">WebGL API</a> gibt ein {{domxref("WebGLActiveInfo")}} Objekt zurück, welches die Größe, den Typ und den Namen eines Vertex-Attributes an der gegebenen Position in einem {{domxref("WebGLProgram")}} enthält.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">WebGLActiveInfo <var>gl</var>.getActiveAttrib(<var>program</var>,<var>index</var>);
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt>program</dt>
+ <dd>Ein {{domxref("WebGLProgram")}}, welches das Vertex-Attribut enthält</dd>
+ <dt>index</dt>
+ <dd>Ein {{domxref("GLuint")}}, welcher den Index des Vertex-Attributes angibt</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein {{domxref("WebGLActiveInfo")}} Objekt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js">gl.getActiveAttrib(program, i);
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.10", "getActiveAttrib")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Erstmalige Definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glGetActiveAttrib.xml", "glGetActiveAttrib")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Man page der OpenGL API</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("9")}}</td>
+   <td>12</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>11</td>
+   <td>{{CompatOpera("12")}}</td>
+   <td>{{CompatSafari("5.1")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>25</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>12</td>
+   <td>8.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Weiterführendes">Weiterführendes</h2>
+
+<ul>
+ <li>{{domxref("WebGLActiveInfo")}}</li>
+</ul>
diff --git a/files/de/web/api/webglrenderingcontext/getattriblocation/index.html b/files/de/web/api/webglrenderingcontext/getattriblocation/index.html
new file mode 100644
index 0000000000..7088f72b90
--- /dev/null
+++ b/files/de/web/api/webglrenderingcontext/getattriblocation/index.html
@@ -0,0 +1,65 @@
+---
+title: WebGLRenderingContext.getAttribLocation()
+slug: Web/API/WebGLRenderingContext/getAttribLocation
+translation_of: Web/API/WebGLRenderingContext/getAttribLocation
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>Die Methode <strong><code>WebGLRenderingContext.getAttribLocation()</code></strong> aus der <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> gibt die Position einer At­tri­but Variable innerhalb eines gegebenen {{domxref("WebGLProgram")}} zurück.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">GLint <var>gl</var>.getAttribLocation(<var>program</var>, <var>name</var>);
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt>program</dt>
+ <dd>Ein {{domxref("WebGLProgram")}} das die At­tri­but Variable enthält.</dd>
+ <dt>name</dt>
+ <dd>Ein {{domxref("DOMString")}} der den Namen des Attributes angibt, dessen Position gesucht wird.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Wenn gefunden, wird die Position der Variable als {{domxref("GLint")}}, andernfalls -1 zurückgegeben.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js">gl.getAttribLocation(program, 'vColor');
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.10", "getAttribLocation")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Ursprüngliche Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glGetAttribLocation.xml", "glGetAttribLocation")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Hauptseite der OpenGL API.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.getAttribLocation")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.getUniformLocation()")}}</li>
+</ul>
diff --git a/files/de/web/api/webglrenderingcontext/index.html b/files/de/web/api/webglrenderingcontext/index.html
new file mode 100644
index 0000000000..77182a3177
--- /dev/null
+++ b/files/de/web/api/webglrenderingcontext/index.html
@@ -0,0 +1,441 @@
+---
+title: WebGLRenderingContext
+slug: Web/API/WebGLRenderingContext
+tags:
+  - NeedsTranslation
+  - TopicStub
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>The <strong>WebGLRenderingContext</strong> interface provides the OpenGL ES 2.0 rendering context for the drawing surface of an HTML {{HTMLElement("canvas")}} element.</p>
+
+<p>To get an object of this interface, call {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} on a <code>&lt;canvas&gt;</code> element, supplying "webgl" as the argument:</p>
+
+<pre class="brush: js">var canvas = document.getElementById('myCanvas');
+var gl = canvas.getContext('webgl');
+</pre>
+
+<p>Once you have the WebGL rendering context for a canvas, you can render within it.</p>
+
+<p>The <a href="/en-US/docs/Web/API/WebGL_API/Tutorial" title="WebGL tutorial">WebGL tutorial</a> has more information, examples, and resources on how to get started with WebGL.</p>
+
+<h2 id="Constants">Constants</h2>
+
+<p>See the <a href="/en-US/docs/Web/API/WebGL_API/Constants">WebGL constants</a> page.</p>
+
+<h2 id="The_WebGL_context">The WebGL context</h2>
+
+<p>The following properties and methods provide general information and functionality to deal with the WebGL context:</p>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.canvas")}}</dt>
+ <dd>A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element.</dd>
+ <dt>{{domxref("WebGLRenderingContext.commit()")}} {{experimental_inline}}</dt>
+ <dd>
+ <p>Pushes frames back to the original {{domxref("HTMLCanvasElement")}}, if the context is not directly fixed to a specific canvas.</p>
+ </dd>
+ <dt>{{domxref("WebGLRenderingContext.drawingBufferWidth")}}</dt>
+ <dd>The read-only width of the current drawing buffer. Should match the width of the canvas element associated with this context.</dd>
+ <dt>{{domxref("WebGLRenderingContext.drawingBufferHeight")}}</dt>
+ <dd>The read-only height of the current drawing buffer. Should match the height of the canvas element associated with this context.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getContextAttributes()")}}</dt>
+ <dd>Returns a <code>WebGLContextAttributes</code> object that contains the actual context parameters. Might return {{jsxref("null")}}, if the context is lost.</dd>
+ <dt>{{domxref("WebGLRenderingContext.isContextLost()")}}</dt>
+ <dd>Returns <code>true</code> if the context is lost, otherwise returns <code>false</code>.</dd>
+</dl>
+
+<h2 id="Viewing_and_clipping">Viewing and clipping</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.scissor()")}}</dt>
+ <dd>Defines the scissor box.</dd>
+ <dt>{{domxref("WebGLRenderingContext.viewport()")}}</dt>
+ <dd>Sets the viewport.</dd>
+</dl>
+
+<h2 id="State_information">State information</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.activeTexture()")}}</dt>
+ <dd>Selects the active texture unit.</dd>
+ <dt>{{domxref("WebGLRenderingContext.blendColor()")}}</dt>
+ <dd>Sets the source and destination blending factors.</dd>
+ <dt>{{domxref("WebGLRenderingContext.blendEquation()")}}</dt>
+ <dd>Sets both the RGB blend equation and alpha blend equation to a single equation.</dd>
+ <dt>{{domxref("WebGLRenderingContext.blendEquationSeparate()")}}</dt>
+ <dd>Sets the RGB blend equation and alpha blend equation separately.</dd>
+ <dt>{{domxref("WebGLRenderingContext.blendFunc()")}}</dt>
+ <dd>Defines which function is used for blending pixel arithmetic.</dd>
+ <dt>{{domxref("WebGLRenderingContext.blendFuncSeparate()")}}</dt>
+ <dd>Defines which function is used for blending pixel arithmetic for RGB and alpha components separately.</dd>
+ <dt>{{domxref("WebGLRenderingContext.clearColor()")}}</dt>
+ <dd>Specifies the color values used when clearing color buffers.</dd>
+ <dt>{{domxref("WebGLRenderingContext.clearDepth()")}}</dt>
+ <dd>Specifies the depth value used when clearing the depth buffer.</dd>
+ <dt>{{domxref("WebGLRenderingContext.clearStencil()")}}</dt>
+ <dd>Specifies the stencil value used when clearing the stencil buffer.</dd>
+ <dt>{{domxref("WebGLRenderingContext.colorMask()")}}</dt>
+ <dd>Sets which color components to enable or to disable when drawing or rendering to a {{domxref("WebGLFramebuffer")}}.</dd>
+ <dt>{{domxref("WebGLRenderingContext.cullFace()")}}</dt>
+ <dd>Specifies whether or not front- and/or back-facing polygons can be culled.</dd>
+ <dt>{{domxref("WebGLRenderingContext.depthFunc()")}}</dt>
+ <dd>Specifies a function that compares incoming pixel depth to the current depth buffer value.</dd>
+ <dt>{{domxref("WebGLRenderingContext.depthMask()")}}</dt>
+ <dd>Sets whether writing into the depth buffer is enabled or disabled.</dd>
+ <dt>{{domxref("WebGLRenderingContext.depthRange()")}}</dt>
+ <dd>Specifies the depth range mapping from normalized device coordinates to window or viewport coordinates.</dd>
+ <dt>{{domxref("WebGLRenderingContext.disable()")}}</dt>
+ <dd>Disables specific WebGL capabilities for this context.</dd>
+ <dt>{{domxref("WebGLRenderingContext.enable()")}}</dt>
+ <dd>Enables specific WebGL capabilities for this context.</dd>
+ <dt>{{domxref("WebGLRenderingContext.frontFace()")}}</dt>
+ <dd>Specifies whether polygons are front- or back-facing by setting a winding orientation.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getParameter()")}}</dt>
+ <dd>Returns a value for the passed parameter name.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getError()")}}</dt>
+ <dd>Returns error information.</dd>
+ <dt>{{domxref("WebGLRenderingContext.hint()")}}</dt>
+ <dd>Specifies hints for certain behaviors. The interpretation of these hints depend on the implementation.</dd>
+ <dt>{{domxref("WebGLRenderingContext.isEnabled()")}}</dt>
+ <dd>Tests whether a specific WebGL capability is enabled or not for this context.</dd>
+ <dt>{{domxref("WebGLRenderingContext.lineWidth()")}}</dt>
+ <dd>Sets the line width of rasterized lines.</dd>
+ <dt>{{domxref("WebGLRenderingContext.pixelStorei()")}}</dt>
+ <dd>Specifies the pixel storage modes</dd>
+ <dt>{{domxref("WebGLRenderingContext.polygonOffset()")}}</dt>
+ <dd>Specifies the scale factors and units to calculate depth values.</dd>
+ <dt>{{domxref("WebGLRenderingContext.sampleCoverage()")}}</dt>
+ <dd>Specifies multi-sample coverage parameters for anti-aliasing effects.</dd>
+ <dt>{{domxref("WebGLRenderingContext.stencilFunc()")}}</dt>
+ <dd>Sets the both front and back function and reference value for stencil testing.</dd>
+ <dt>{{domxref("WebGLRenderingContext.stencilFuncSeparate()")}}</dt>
+ <dd>Sets the front and/or back function and reference value for stencil testing.</dd>
+ <dt>{{domxref("WebGLRenderingContext.stencilMask()")}}</dt>
+ <dd>Controls enabling and disabling of both the front and back writing of individual bits in the stencil planes.</dd>
+ <dt>{{domxref("WebGLRenderingContext.stencilMaskSeparate()")}}</dt>
+ <dd>Controls enabling and disabling of front and/or back writing of individual bits in the stencil planes.</dd>
+ <dt>{{domxref("WebGLRenderingContext.stencilOp()")}}</dt>
+ <dd>Sets both the front and back-facing stencil test actions.</dd>
+ <dt>{{domxref("WebGLRenderingContext.stencilOpSeparate()")}}</dt>
+ <dd>Sets the front and/or back-facing stencil test actions.</dd>
+</dl>
+
+<h2 id="Buffers">Buffers</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.bindBuffer()")}}</dt>
+ <dd>Binds a <code>WebGLBuffer</code> object to a given target.</dd>
+ <dt>{{domxref("WebGLRenderingContext.bufferData()")}}</dt>
+ <dd>Updates buffer data.</dd>
+ <dt>{{domxref("WebGLRenderingContext.bufferSubData()")}}</dt>
+ <dd>Updates buffer data starting at a passed offset.</dd>
+ <dt>{{domxref("WebGLRenderingContext.createBuffer()")}}</dt>
+ <dd>Creates a <code>WebGLBuffer</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.deleteBuffer()")}}</dt>
+ <dd>Deletes a <code>WebGLBuffer</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getBufferParameter()")}}</dt>
+ <dd>Returns information about the buffer.</dd>
+ <dt>{{domxref("WebGLRenderingContext.isBuffer()")}}</dt>
+ <dd>Returns a Boolean indicating if the passed buffer is valid.</dd>
+</dl>
+
+<h2 id="Framebuffers">Framebuffers</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.bindFramebuffer()")}}</dt>
+ <dd>Binds a <code>WebGLFrameBuffer</code> object to a given target.</dd>
+ <dt>{{domxref("WebGLRenderingContext.checkFramebufferStatus()")}}</dt>
+ <dd>Returns the status of the framebuffer.</dd>
+ <dt>{{domxref("WebGLRenderingContext.createFramebuffer()")}}</dt>
+ <dd>Creates a <code>WebGLFrameBuffer</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.deleteFramebuffer()")}}</dt>
+ <dd>Deletes a <code>WebGLFrameBuffer</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.framebufferRenderbuffer()")}}</dt>
+ <dd>Attaches a <code>WebGLRenderingBuffer</code> object to a <code>WebGLFrameBuffer</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.framebufferTexture2D()")}}</dt>
+ <dd>Attaches a textures image to a <code>WebGLFrameBuffer</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getFramebufferAttachmentParameter()")}}</dt>
+ <dd>Returns information about the framebuffer.</dd>
+ <dt>{{domxref("WebGLRenderingContext.isFramebuffer()")}}</dt>
+ <dd>Returns a Boolean indicating if the passed <code>WebGLFrameBuffer</code> object is valid.</dd>
+ <dt>{{domxref("WebGLRenderingContext.readPixels()")}}</dt>
+ <dd>Reads a block of pixels from the <code>WebGLFrameBuffer</code>.</dd>
+</dl>
+
+<h2 id="Renderbuffers">Renderbuffers</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.bindRenderbuffer()")}}</dt>
+ <dd>Binds a <code>WebGLRenderBuffer</code> object to a given target.</dd>
+ <dt>{{domxref("WebGLRenderingContext.createRenderbuffer()")}}</dt>
+ <dd>Creates a <code>WebGLRenderBuffer</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.deleteRenderbuffer()")}}</dt>
+ <dd>Deletes a <code>WebGLRenderBuffer</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getRenderbufferParameter()")}}</dt>
+ <dd>Returns information about the renderbuffer.</dd>
+ <dt>{{domxref("WebGLRenderingContext.isRenderbuffer()")}}</dt>
+ <dd>Returns a Boolean indicating if the passed <code>WebGLRenderingBuffer</code> is valid.</dd>
+ <dt>{{domxref("WebGLRenderingContext.renderbufferStorage()")}}</dt>
+ <dd>Creates a renderbuffer data store.</dd>
+</dl>
+
+<h2 id="Textures">Textures</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.bindTexture()")}}</dt>
+ <dd>Binds a <code>WebGLTexture</code> object to a given target.</dd>
+ <dt>{{domxref("WebGLRenderingContext.compressedTexImage2D()")}}</dt>
+ <dd>Specifies a 2D texture image in a compressed format.</dd>
+ <dt>{{domxref("WebGLRenderingContext.compressedTexSubImage2D()")}}</dt>
+ <dd>Specifies a 2D texture sub-image in a compressed format.</dd>
+ <dt>{{domxref("WebGLRenderingContext.copyTexImage2D()")}}</dt>
+ <dd>Copies a 2D texture image.</dd>
+ <dt>{{domxref("WebGLRenderingContext.copyTexSubImage2D()")}}</dt>
+ <dd>Copies a 2D texture sub-image.</dd>
+ <dt>{{domxref("WebGLRenderingContext.createTexture()")}}</dt>
+ <dd>Creates a <code>WebGLTexture</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.deleteTexture()")}}</dt>
+ <dd>Deletes a <code>WebGLTexture</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.generateMipmap()")}}</dt>
+ <dd>Generates a set of mipmaps for a <code>WebGLTexture</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getTexParameter()")}}</dt>
+ <dd>Returns information about the texture.</dd>
+ <dt>{{domxref("WebGLRenderingContext.isTexture()")}}</dt>
+ <dd>Returns a Boolean indicating if the passed <code>WebGLTexture</code> is valid.</dd>
+ <dt>{{domxref("WebGLRenderingContext.texImage2D()")}}</dt>
+ <dd>Specifies a 2D texture image.</dd>
+ <dt>{{domxref("WebGLRenderingContext.texSubImage2D()")}}</dt>
+ <dd>Updates a sub-rectangle of the current <code>WebGLTexture</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameterf()")}}</dt>
+ <dd>Sets texture parameters.</dd>
+ <dt>{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameteri()")}}</dt>
+ <dd>Sets texture parameters.</dd>
+</dl>
+
+<h2 id="Programs_and_shaders">Programs and shaders</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.attachShader()")}}</dt>
+ <dd>Attaches a <code>WebGLShader</code> to a <code>WebGLProgram</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.bindAttribLocation()")}}</dt>
+ <dd>Binds a generic vertex index to a named attribute variable.</dd>
+ <dt>{{domxref("WebGLRenderingContext.compileShader()")}}</dt>
+ <dd>Compiles a <code>WebGLShader</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.createProgram()")}}</dt>
+ <dd>Creates a <code>WebGLProgram</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.createShader()")}}</dt>
+ <dd>Creates a <code>WebGLShader</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.deleteProgram()")}}</dt>
+ <dd>Deletes a <code>WebGLProgram</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.deleteShader()")}}</dt>
+ <dd>Deletes a <code>WebGLShader</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.detachShader()")}}</dt>
+ <dd>Detaches a <code>WebGLShader</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</dt>
+ <dd>Returns a list of <code>WebGLShader</code> objects attached to a <code>WebGLProgram</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</dt>
+ <dd>Returns information about the program.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</dt>
+ <dd>Returns the information log for a <code>WebGLProgram</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</dt>
+ <dd>Returns information about the shader.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}</dt>
+ <dd>Returns a <code>WebGLShaderPrecisionFormat</code> object describing the precision for the numeric format of the shader.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</dt>
+ <dd>Returns the information log for a <code>WebGLShader</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getShaderSource()")}}</dt>
+ <dd>Returns the source code of a <code>WebGLShader</code> as a string.</dd>
+ <dt>{{domxref("WebGLRenderingContext.isProgram()")}}</dt>
+ <dd>Returns a Boolean indicating if the passed <code>WebGLProgram</code> is valid.</dd>
+ <dt>{{domxref("WebGLRenderingContext.isShader()")}}</dt>
+ <dd>Returns a Boolean indicating if the passed <code>WebGLShader</code> is valid.</dd>
+ <dt>{{domxref("WebGLRenderingContext.linkProgram()")}}</dt>
+ <dd>Links the passed <code>WebGLProgram</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.shaderSource()")}}</dt>
+ <dd>Sets the source code in a <code>WebGLShader</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.useProgram()")}}</dt>
+ <dd>Uses the specified <code>WebGLProgram</code> as part the current rendering state.</dd>
+ <dt>{{domxref("WebGLRenderingContext.validateProgram()")}}</dt>
+ <dd>Validates a <code>WebGLProgram</code>.</dd>
+</dl>
+
+<h2 id="Uniforms_and_attributes">Uniforms and attributes</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.disableVertexAttribArray()")}}</dt>
+ <dd>Disables a vertex attribute array at a given position.</dd>
+ <dt>{{domxref("WebGLRenderingContext.enableVertexAttribArray()")}}</dt>
+ <dd>Enables a vertex attribute array at a given position.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getActiveAttrib()")}}</dt>
+ <dd>Returns information about an active attribute variable.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getActiveUniform()")}}</dt>
+ <dd>Returns information about an active uniform variable.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getAttribLocation()")}}</dt>
+ <dd>Returns the location of an attribute variable.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getUniform()")}}</dt>
+ <dd>Returns the value of a uniform variable at a given location.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getUniformLocation()")}}</dt>
+ <dd>Returns the location of a uniform variable.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getVertexAttrib()")}}</dt>
+ <dd>Returns information about a vertex attribute at a given position.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getVertexAttribOffset()")}}</dt>
+ <dd>Returns the address of a given vertex attribute.</dd>
+ <dt>{{domxref("WebGLRenderingContext.uniform()", "WebGLRenderingContext.uniform[1234][fi][v]()")}}</dt>
+ <dd>Specifies a value for a uniform variable.</dd>
+ <dt>{{domxref("WebGLRenderingContext.uniformMatrix()", "WebGLRenderingContext.uniformMatrix[234]fv()")}}</dt>
+ <dd>Specifies a matrix value for a uniform variable.</dd>
+ <dt>{{domxref("WebGLRenderingContext.vertexAttrib()", "WebGLRenderingContext.vertexAttrib[1234]f[v]()")}}</dt>
+ <dd>Specifies a value for a generic vertex attribute.</dd>
+ <dt>{{domxref("WebGLRenderingContext.vertexAttribPointer()")}}</dt>
+ <dd>Specifies the data formats and locations of vertex attributes in a vertex attributes array.</dd>
+</dl>
+
+<h2 id="Drawing_buffers">Drawing buffers</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.clear()")}}</dt>
+ <dd>Clears specified buffers to preset values.</dd>
+ <dt>{{domxref("WebGLRenderingContext.drawArrays()")}}</dt>
+ <dd>Renders primitives from array data.</dd>
+ <dt>{{domxref("WebGLRenderingContext.drawElements()")}}</dt>
+ <dd>Renders primitives from element array data.</dd>
+ <dt>{{domxref("WebGLRenderingContext.finish()")}}</dt>
+ <dd>Blocks execution until all previously called commands are finished.</dd>
+ <dt>{{domxref("WebGLRenderingContext.flush()")}}</dt>
+ <dd>Empties different buffer commands, causing all commands to be executed as quickly as possible.</dd>
+</dl>
+
+<h2 id="Working_with_extensions">Working with extensions</h2>
+
+<p>These methods manage WebGL extensions:</p>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.getSupportedExtensions()")}}</dt>
+ <dd>Returns an {{jsxref("Array")}} of {{domxref("DOMString")}} elements with all the supported WebGL extensions.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getExtension()")}}</dt>
+ <dd>Returns an extension object.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="WebGL_context_feature_detection">WebGL context feature detection</h3>
+
+<p>{{page("/en-US/Learn/WebGL/By_example/Detect_WebGL", "summary")}}</p>
+
+<p>{{page("/en-US/Learn/WebGL/By_example/Detect_WebGL", "detect-webgl-source")}}</p>
+
+<p>{{EmbedLiveSample("detect-webgl-source", 660,150 ,"" , "Learn/WebGL/By_example/Detect_WebGL")}}</p>
+
+<h3 id="Effect_of_canvas_size_on_rendering_with_WebGL">Effect of canvas size on rendering with WebGL</h3>
+
+<p>{{page("/en-US/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-intro")}}</p>
+
+<p>{{page("/en-US/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-source")}}</p>
+
+<p>{{EmbedLiveSample("canvas-size-and-webgl-source", 660,180 ,"" , "Learn/WebGL/By_example/Canvas_size_and_WebGL")}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14", "WebGLRenderingContext")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("9")}}</td>
+   <td>20</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatIE("11")}}</td>
+   <td>{{CompatOpera("12")}}</td>
+   <td>{{CompatSafari("5.1")}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(44)}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>25</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>12</td>
+   <td>8.0</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(44)}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] This feature is behind a feature preference setting. In about:config, set <code>gfx.offscreencanvas.enabled</code> to <code>true</code>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("HTMLCanvasElement")}}</li>
+</ul>
diff --git a/files/de/web/api/websocket/binarytype/index.html b/files/de/web/api/websocket/binarytype/index.html
new file mode 100644
index 0000000000..da69c1ec8c
--- /dev/null
+++ b/files/de/web/api/websocket/binarytype/index.html
@@ -0,0 +1,56 @@
+---
+title: WebSocket.binaryType
+slug: Web/API/WebSocket/binaryType
+tags:
+  - API
+  - Eigenschaft
+  - Referenz
+  - Web API
+  - WebSocket
+translation_of: Web/API/WebSocket/binaryType
+---
+<p>{{APIRef("Web Sockets API")}}</p>
+
+<p>Die Eigenschaft <strong><code>WebSocket.binaryType</code></strong> gibt den Typ von Binärdaten zurück, der übertragen wird.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>var binaryType</em> = aWebSocket.binaryType;</pre>
+
+<h2 id="Wert">Wert</h2>
+
+<p>Ein {{DOMXref("DOMString")}}:</p>
+
+<dl>
+ <dt><code>"blob"</code></dt>
+ <dd>Wenn {{domxref("Blob")}} Objekte benutzt werden.</dd>
+ <dt><code>"arraybuffer"</code></dt>
+ <dd>Wenn {{jsxref("ArrayBuffer")}} Objekte benutzt werden.
+
+ </dd>
+</dl>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-websocket-binarytype', 'WebSocket: binaryType')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+
+
+<p>{{Compat("api.WebSocket.binaryType")}}</p>
diff --git a/files/de/web/api/websocket/close/index.html b/files/de/web/api/websocket/close/index.html
new file mode 100644
index 0000000000..9aec5890d0
--- /dev/null
+++ b/files/de/web/api/websocket/close/index.html
@@ -0,0 +1,64 @@
+---
+title: WebSocket.close()
+slug: Web/API/WebSocket/close
+tags:
+  - API
+  - Funktion
+  - Referenz
+  - Web API
+  - WebSocket
+translation_of: Web/API/WebSocket/close
+---
+<p>{{APIRef("Web Sockets API")}}</p>
+
+<p>Die Funktion <strong><code>WebSocket.close()</code></strong> beendet eine {{domxref("WebSocket")}} Verbindung oder den Versuch eines Verbindungsaufbaus. Wenn diese schon geschlossen ist, passiert nichts weiter.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">WebSocket.close();</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>code</code> {{optional_inline}}</dt>
+ <dd>Ein numerisch Wert, der den Status angibt, warum die Verbindung geschlossen wird. Wird kein Wert spezifiziert, . Zur Referenz kann <a href="/en-US/docs/Web/API/CloseEvent#Status_codes">diese Liste mit Codes</a> des {{domxref("CloseEvent")}}s für gültige Werte genommen werden.</dd>
+ <dt><code>reason</code> {{optional_inline}}</dt>
+ <dd>Ein lesbarer Text, welcher erklärt, warum die Verbindung geschlossen wird. Dieser muss UTF-8 kodiert und darf nicht länger als 123 Bytes sein.</dd>
+</dl>
+
+<h3 id="Fehler">Fehler</h3>
+
+<dl>
+ <dt><code>INVALID_ACCESS_ERR</code></dt>
+ <dd>Ein ungültiger <code>code</code> wurde angegeben.</dd>
+ <dt><code>SYNTAX_ERR</code></dt>
+ <dd>Der <code>reason</code> Text ist zu lang oder enthält ungültige Zeichen.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note:</strong> In Gecko unterstützte diese Funktion bis zu Version 8.0 {{geckoRelease("8.0")}} keine Parameter.</p>
+</div>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Spezifikation</th>
+   <th>Status</th>
+   <th>Kommentar</th>
+  </tr>
+  <tr>
+   <td><a class="external external-icon" href="https://html.spec.whatwg.org/multipage/web-sockets.html#dom-websocket-close" hreflang="en" lang="en">HTML Living Standard<br>
+    <small lang="en-US">The definition of 'WebSocket.close()' in that specification.</small></a></td>
+   <td><span class="spec-Living">Living Standard</span></td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+
+
+<p>{{Compat("api.WebSocket.close")}}</p>
diff --git a/files/de/web/api/websocket/extensions/index.html b/files/de/web/api/websocket/extensions/index.html
new file mode 100644
index 0000000000..bbc5d722c4
--- /dev/null
+++ b/files/de/web/api/websocket/extensions/index.html
@@ -0,0 +1,49 @@
+---
+title: WebSocket.extensions
+slug: Web/API/WebSocket/extensions
+tags:
+  - API
+  - Eigenschaft
+  - Referenz
+  - Web API
+  - WebSocket
+translation_of: Web/API/WebSocket/extensions
+---
+<p>{{APIRef("Web Sockets API")}}</p>
+
+<p>Die Eigenschaft <strong><code>WebSocket.extensions</code></strong> gibt die Erweiterungen des Servers zurück. Sie ist nur lesbar.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>var extensions</em> = aWebSocket.extensions;</pre>
+
+<h2 id="Wert">Wert</h2>
+
+<p>Ein {{domxref("DOMString")}}.</p>
+
+<p>Momentan ist dies entweder ein leerer String oder eine Liste an Erweiterungen, welche zwischen dem Server und dem Client ausgehandelt wurden.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-websocket-extensions', 'WebSocket: extensions')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+
+
+<p>{{Compat("api.WebSocket.extensions")}}</p>
diff --git a/files/de/web/api/websocket/index.html b/files/de/web/api/websocket/index.html
new file mode 100644
index 0000000000..641c788179
--- /dev/null
+++ b/files/de/web/api/websocket/index.html
@@ -0,0 +1,314 @@
+---
+title: WebSocket
+slug: Web/API/WebSocket
+tags:
+  - API
+  - WebSocket
+  - WebSockets
+translation_of: Web/API/WebSocket
+---
+<p>{{APIRef("Web Sockets API")}}{{ SeeCompatTable() }}</p>
+
+<p>Das <code>WebSocket</code>-Objekt bietet die API für das Erstellen und Verwalten einer <a href="/en/WebSockets" title="en/WebSockets">WebSocket</a>-Verbindung zu einem Server, ebenso dient es auch dem Senden und dem Empfangen von Daten auf der Verbindung.</p>
+
+<p>Der WebSocket-Konstruktor akzeptiert einen benötigten und einen optionalen Parameter:</p>
+
+<pre>WebSocket WebSocket(
+  in DOMString url,
+  in optional DOMString protocols
+);
+
+WebSocket WebSocket(
+  in DOMString url,
+  in optional DOMString[] protocols
+);
+</pre>
+
+<dl>
+ <dt><code>url</code></dt>
+ <dd>Die URL mit der sich das WebSocket verbinden soll; dies sollte die URL sein, auf welcher der WebSocket Server antworten wird.</dd>
+ <dt><code>protocols</code> {{ optional_inline() }}</dt>
+ <dd>Entweder ein einzelnes Protokol als String oder ein Array aus Protokol-Strings. Diese Strings werden genutzt um Sub-Protokolle zu indizieren, sodass ein einzelner Server mehrere WebSocket Sub-Protokolle implementieren kann (Beispielsweiße kann ein Server abhängig vom <code>protocol</code> verschiedene Interaktionen mit dem Client handeln). Falls du kein Protokoll angibst, wird ein leerer String verwendet.</dd>
+</dl>
+
+<p>Der Konstruktur kann folgende Exceptions werfen:</p>
+
+<dl>
+ <dt><code>SECURITY_ERR</code></dt>
+ <dd>Der Port auf dem man die Verbindung aufbauen will, ist blockiert worden.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Method_overview" name="Method_overview">Methoden Übersicht</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="#close()">close</a>(in optional unsigned long code, in optional DOMString reason);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#send()">send</a>(in DOMString data);</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes" name="Attributes">Attribute</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Attribut</td>
+   <td class="header">Typ</td>
+   <td class="header">Beschreibung</td>
+  </tr>
+  <tr>
+   <td><code>binaryType</code></td>
+   <td>{{ DOMXref("DOMString") }}</td>
+   <td>Ein String indiziert den Typ der Binärdaten, die von der Verbindung übertragen werden. Dies sollte entweder "blob" sein, falls DOM-Objekte {{ domxref("Blob") }} genutzt werden oder "arraybuffer" falls <a href="https://developer.mozilla.org/en/JavaScript_typed_arrays/ArrayBuffer" title="en/JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a>-Objekte genutzt werden.</td>
+  </tr>
+  <tr>
+   <td><code>bufferedAmount</code></td>
+   <td><code><a href="/en/unsigned_long" title="en/unsigned long">unsigned long</a></code></td>
+   <td>Die Anzahl der Bytes der Daten, welche bereits durch Aufrufe von {{ manch("send") }} gebuffert wurden, allerdings noch nicht über das Netzwerk versand wurden. Dieses Feld setzt sich nicht auf Null zurück, wenn die Verbindung beendet wurde; falls du weiterhin {{ manch("send") }} aufrufst, wird dieses Feld weiterhin ansteigen. <strong>Read only.</strong></td>
+  </tr>
+  <tr>
+   <td><code>extensions</code></td>
+   <td>{{ DOMXref("DOMString") }}</td>
+   <td>Die Erweiterungen, die von dem Server gewählt wurden. Aktuell ist dies nur ein leerer String oder eine Liste von Erweiterungen, die von der Verbindung verhandelt wurden.</td>
+  </tr>
+  <tr>
+   <td><code>onclose</code></td>
+   <td>{{ domxref("EventListener") }}</td>
+   <td>Ein Event-Listener welcher aufgerufen wird, wenn der <code>readyState</code> der WebSocket-Verbindung auf <code>CLOSED</code> wechselt. Den Listener erreicht ein <a href="https://developer.mozilla.org/en/WebSockets/WebSockets_reference/CloseEvent" title="en/WebSockets/WebSockets reference/CloseEvent"><code>CloseEvent</code></a> welches "close" heißt.</td>
+  </tr>
+  <tr>
+   <td><code>onerror</code></td>
+   <td>{{ domxref("EventListener") }}</td>
+   <td>Ein Event-Listener welcher bei Fehlern aufgerufen wird. Dies ist ein einfaches Event welches "error" genannt wird.</td>
+  </tr>
+  <tr>
+   <td><code>onmessage</code></td>
+   <td>{{ domxref("EventListener") }}</td>
+   <td>Ein Event-Listener welcher aufgerufen wird, wenn eine Nachricht vom Server empfangen wird. Den Listener erreicht ein <a href="https://developer.mozilla.org/en/WebSockets/WebSockets_reference/MessageEvent" title="en/WebSockets/WebSockets reference/MessageEvent"><code>MessageEvent</code></a> welches "message" heißt.</td>
+  </tr>
+  <tr>
+   <td><code>onopen</code></td>
+   <td>{{ domxref("EventListener") }}</td>
+   <td>Ein Event-Listener welcher aufgerufen wird, wenn der <code>readyState</code> der WebSocket-Verbindung auf <code>OPEN</code> wechselt; dies indiziert, dass die Verbindung bereit ist, dass man Daten versenden und empfangen kann. Dieses Event ist eine einfaches Event, es heißt "open".</td>
+  </tr>
+  <tr>
+   <td><code>protocol</code></td>
+   <td>{{ DOMXref("DOMString") }}</td>
+   <td>Ein String welcher dne Namen des Sub-Protokolls nennt, welches vom Server ausgewählt wurde; dieses Protokoll wird eines sein, welches in den Strings des <code>protocols</code>-Parameter beim Erstellen des WebSocket-Objekt angegeben wurde.</td>
+  </tr>
+  <tr>
+   <td><code>readyState</code></td>
+   <td><code><a href="/en/unsigned_short" title="en/unsigned short">unsigned short</a></code></td>
+   <td>Der aktuelle Status der Verbindung; dies ist einer der {{ anch("Ready state Konstanten") }}. <strong>Read only.</strong></td>
+  </tr>
+  <tr>
+   <td><code>url</code></td>
+   <td>{{ DOMXref("DOMString") }}</td>
+   <td>Die URL welche beim Konstruktor angegeben wurde. Dies ist immer die absolute URL. <strong>Read only.</strong></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Constants" name="Constants">Konstanten</h2>
+
+<h3 id="Ready_state_Konstanten">Ready state Konstanten</h3>
+
+<p>Diese Konstanten werden vom <code>readyState</code> Attribut genutzt, um den Status der WebSocket-Verbindung zu beschreiben.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Konstante</td>
+   <td class="header">Inhalt</td>
+   <td class="header">Beschreibung</td>
+  </tr>
+  <tr>
+   <td><code>CONNECTING</code></td>
+   <td><code>0</code></td>
+   <td>Die Verbindung ist noch nicht hergestellt.</td>
+  </tr>
+  <tr>
+   <td><code>OPEN</code></td>
+   <td><code>1</code></td>
+   <td>Die Verbindung ist hergestellt und bereit darüber zu kommunizieren.</td>
+  </tr>
+  <tr>
+   <td><code>CLOSING</code></td>
+   <td><code>2</code></td>
+   <td>Die Verbindung ist im Prozess des Schließens.</td>
+  </tr>
+  <tr>
+   <td><code>CLOSED</code></td>
+   <td><code>3</code></td>
+   <td>Die Verbindung ist geschlossen oder konnte nicht hergestellt werden.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Methods" name="Methods">Methoden</h2>
+
+<h3 id="close()" name="close()">close()</h3>
+
+<p>Schließt die WebSocket-Verbindung oder den Verbindungsversuch, falls dieser gerade existiert. Falls die Verbindung bereits <code>CLOSED</code> ist, macht diese Methode überhaupt nichts.</p>
+
+<pre class="eval">void close(
+  in optional unsigned short code,
+  in optional DOMString reason
+);
+</pre>
+
+<h6 id="Parameters" name="Parameters">Parameter</h6>
+
+<dl>
+ <dt><code>code</code> {{ optional_inline() }}</dt>
+ <dd>Eine Nummer welche den Status-Code setzt, warum die Verbindung geschlossen wird. Falls dieser Parameter nicht gesetzt wird, wird er auf 1005 (welcher bei einer normalen Verbindung "Keinen Status erhalten" bedeutet) gesetzt.</dd>
+ <dt><code>reason</code> {{ optional_inline() }}</dt>
+ <dd>Ein vom Menschen lesbarer String, welcher erklärt, warum die Verbindung geschlossen wurde. Dieser Text darf nicht länger als 123 Bytes UTF-8-Text sein. Dabei heißt dies nicht unbedingt, dass es auch 123 Zeichen sind.</dd>
+</dl>
+
+<h6 id="Exceptions_thrown">Exceptions thrown</h6>
+
+<dl>
+ <dt><code>INVALID_ACCESS_ERR</code></dt>
+ <dd>Ein ungültiger <code>code</code> wurde gesetzt.</dd>
+ <dt><code>SYNTAX_ERR</code></dt>
+ <dd>Der <code>reason</code>-String ist zu lang oder enthält ungültige Zeichen.</dd>
+</dl>
+
+<h6 id="Notizen">Notizen</h6>
+
+<p>In Gecko vor Version Gecko 8.0 unterstützte diese Methode überhaupt keine Parameter. {{ geckoRelease("8.0") }}.</p>
+
+<h3 id="send()" name="send()">send()</h3>
+
+<p>Überträgt Daten zu dem Server über die WebSocket-Verbindung.</p>
+
+<pre class="eval">void send(
+  in DOMString data
+);
+
+void send(
+  in ArrayBuffer data
+);
+
+void send(
+  in Blob data
+);
+</pre>
+
+<h6 id="Parameters" name="Parameters">Parameter</h6>
+
+<dl>
+ <dt><code>data</code></dt>
+ <dd>Ein String der zum Server geschickt wird.</dd>
+</dl>
+
+<h6 id="Exceptions_thrown_2">Exceptions thrown</h6>
+
+<dl>
+ <dt><code>INVALID_STATE_ERR</code></dt>
+ <dd>Die Verbindung hat aktuell nicht den Status <code>OPEN</code>.</dd>
+ <dt><code>SYNTAX_ERR</code></dt>
+ <dd><code>data</code> enthält ungültige Zeichen.</dd>
+</dl>
+
+<h6 id="Erläuterung">Erläuterung</h6>
+
+<div class="note">
+<p><strong>Notiz:</strong> Geckos Implementierung von der <code>send()</code> Methode unterscheidet sich ein wenig von der Spezifikation in {{Gecko("6.0")}}; Gecko gibt einen <code>boolean</code> zurück, welcher darüber auskunft gibt, ob die Verbindung immer noch hergestellt ist oder nicht (und, durch Erweiterung, dass die Daten erfolgreich gesammelt oder übertragen wurden); dies wurde in {{Gecko("8.0")}} korrigiert.</p>
+
+<p>In {{Gecko("11.0")}} ist die Unterstützung für  <code><a href="/en/JavaScript_typed_arrays/ArrayBuffer" title="en/JavaScript typed arrays/ArrayBuffer">ArrayBuffer</a></code> implementiert aber nicht die für {{ domxref("Blob") }} Datentypen.</p>
+</div>
+
+<h2 id="See_also" name="See_also">Weiterführendes</h2>
+
+<ul>
+ <li><a href="/en/WebSockets/Writing_WebSocket_client_applications" title="en/WebSockets/Writing WebSocket client applications">Writing WebSocket client applications</a></li>
+ <li><a class="external" href="http://dev.w3.org/html5/websockets/" title="http://dev.w3.org/html5/websockets/">HTML5: WebSockets</a></li>
+</ul>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Sub-protocol support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("6.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("7.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Sub-protocol support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("7.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Gecko_Notizen">Gecko Notizen</h3>
+
+<p>In Gecko 6.0 ist der Konstruktur mit einem Prefix ausgestattet; du must <code>MozWebSocket()</code> benutzen:</p>
+
+<pre>var mySocket = new MozWebSocket("<span class="plain">http://www.example.com/socketserver</span>");
+</pre>
+
+<p>Das <code>extensions</code>-Attribut wurde bis Gecko 8.0 nicht unterstützt.</p>
+
+<div class="note"><strong>Notiz:</strong> Vor {{Gecko("11.0")}} ausgehende Nachrichten welche mit der {{ manch("send") }} Methode versendet wurden, waren auf 16 MB begrenzt. Jetzt können sie bis zu 2 GB wachsen.</div>
+
+<p>{{ languages ( {"zh-tw": "zh_tw/WebSockets/WebSockets_reference/WebSocket"} ) }}</p>
diff --git a/files/de/web/api/websocket/onclose/index.html b/files/de/web/api/websocket/onclose/index.html
new file mode 100644
index 0000000000..9e112fb499
--- /dev/null
+++ b/files/de/web/api/websocket/onclose/index.html
@@ -0,0 +1,45 @@
+---
+title: WebSocket.onclose
+slug: Web/API/WebSocket/onclose
+tags:
+  - API
+  - Eigenschaft
+  - Referenz
+  - Web API
+  - WebSocket
+translation_of: Web/API/WebSocket/onclose
+---
+<p>{{APIRef("Web Sockets API")}}</p>
+
+<p>Die Eigenschaft <code><strong>WebSocket.onclose</strong></code> ist ein {{domxref("EventHandler")}}, der aufgerufen wird, wenn die Eigenschaft {{domxref("WebSocket.readyState","WebSocket.readyState")}} zu {{domxref("WebSocket.readyState","CLOSED")}} geändert bzw. die Verbindung geschlossen wird.</p>
+
+<p>Als Parameter übergeben wird ein {{domxref("CloseEvent")}}.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>aWebSocket</em>.onclose = function(event) {
+  console.log("WebSocket is closed now.");
+};</pre>
+
+<h2 id="Wert">Wert</h2>
+
+<p>Ein {{domxref("EventListener")}}.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#handler-websocket-onclose', 'WebSocket: onclose')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/de/web/api/websocket/protocol/index.html b/files/de/web/api/websocket/protocol/index.html
new file mode 100644
index 0000000000..ca76edd3a2
--- /dev/null
+++ b/files/de/web/api/websocket/protocol/index.html
@@ -0,0 +1,51 @@
+---
+title: WebSocket.protocol
+slug: Web/API/WebSocket/protocol
+tags:
+  - API
+  - Eigenschaft
+  - Referenz
+  - Web API
+  - WebSocket
+translation_of: Web/API/WebSocket/protocol
+---
+<p>{{APIRef("Web Sockets API")}}</p>
+
+<p>Die Eigenschaft <strong><code>WebSocket.protocol</code></strong> gibt den Namen des Unterprotokolls zurück, welches der Server ausgewählt hat. Sie ist nur lesbar.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var protocol = <em>aWebSocket</em>.protocol;</pre>
+
+<h2 id="Wert">Wert</h2>
+
+<p>A <a href="/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a>.</p>
+
+<p>Entweder ist der String leer, oder enthält den Namen eines der Protokolle, welche im {{domxref("WebSocket")}} Konstruktor mit dem Parameter <code>protocols</code> übergeben wurden.</p>
+
+<p><a href="/de/docs/Web/API/WebSocket/WebSocket#Parameters">Siehe hier.</a></p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-websocket-protocol', 'WebSocket: protocol')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+
+
+<p>{{Compat("api.WebSocket.protocol")}}</p>
diff --git a/files/de/web/api/websocket/readystate/index.html b/files/de/web/api/websocket/readystate/index.html
new file mode 100644
index 0000000000..9abc994d65
--- /dev/null
+++ b/files/de/web/api/websocket/readystate/index.html
@@ -0,0 +1,77 @@
+---
+title: WebSocket.readyState
+slug: Web/API/WebSocket/readyState
+tags:
+  - API
+  - Eigenschaft
+  - Referenz
+  - Web API
+  - WebSocket
+translation_of: Web/API/WebSocket/readyState
+---
+<p>{{APIRef("Web Sockets API")}}</p>
+
+<p>Die Eigenschaft <strong><code>WebSocket.readyState</code></strong> gibt den momentanen Status einer {{domxref("WebSocket")}} Verbindung zurück. Sie ist nur lesbar.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var readyState = <em>aWebSocket</em>.readyState;</pre>
+
+<h2 id="Werte">Werte</h2>
+
+<p>Einer der folgenden Werte kann vorhanden sein:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Wert</td>
+   <td class="header">Status</td>
+   <td class="header">Beschreibung</td>
+  </tr>
+  <tr>
+   <td><code>0</code></td>
+   <td><code>CONNECTING</code></td>
+   <td>Der Socket wurde erstellt, jedoch besteht noch keine Verbindung.</td>
+  </tr>
+  <tr>
+   <td><code>1</code></td>
+   <td><code>OPEN</code></td>
+   <td>Eine Verbindung wurde hergestellt und kann zur Kommunikation genutzt werden.</td>
+  </tr>
+  <tr>
+   <td><code>2</code></td>
+   <td><code>CLOSING</code></td>
+   <td>Die Verbindung wird beendet.</td>
+  </tr>
+  <tr>
+   <td><code>3</code></td>
+   <td><code>CLOSED</code></td>
+   <td>Die Verbindung wurde geschlossen oder konnte nicht geöffnet werden.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-websocket-readystate', 'WebSocket: readyState')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+
+
+<p>{{Compat("api.WebSocket.readyState")}}</p>
diff --git a/files/de/web/api/websocket/url/index.html b/files/de/web/api/websocket/url/index.html
new file mode 100644
index 0000000000..56e0852dea
--- /dev/null
+++ b/files/de/web/api/websocket/url/index.html
@@ -0,0 +1,47 @@
+---
+title: WebSocket.url
+slug: Web/API/WebSocket/url
+tags:
+  - API
+  - Eigenschaft
+  - Referenz
+  - Web API
+  - WebSocket
+translation_of: Web/API/WebSocket/url
+---
+<p>{{APIRef("Web Sockets API")}}</p>
+
+<p>Die Eigenschaft <strong><code>WebSocket.url</code></strong> gibt die absolute URL eines {{domxref("WebSocket")}} zurück, wie sie im Konstruktor angegeben wurde. Sie ist nur lesbar.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>var url</em> = aWebSocket.url;</pre>
+
+<h2 id="Wert">Wert</h2>
+
+<p>Ein <a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a>.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-websocket-url', 'WebSocket: url')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+
+
+<p>{{Compat("api.WebSocket.url")}}</p>
diff --git a/files/de/web/api/webxr_device_api/index.html b/files/de/web/api/webxr_device_api/index.html
new file mode 100644
index 0000000000..69e10d7d3b
--- /dev/null
+++ b/files/de/web/api/webxr_device_api/index.html
@@ -0,0 +1,298 @@
+---
+title: WebXR-Geräte-API
+slug: Web/API/WebXR_Device_API
+translation_of: Web/API/WebXR_Device_API
+---
+<p>{{APIRef("WebXR Device API")}}{{Draft}}</p>
+
+<p><span class="seoSummary"><strong>WebXR</strong> ist eine Gruppe von Standards, die zusammen verwendet werden, um das Rendern von 3D-Szenen auf Hardware zu unterstützen, die für die Darstellung virtueller Welten<strong>(Virtuelle Realität</strong>oder <strong>VR )</strong>entwickelt wurde, oder um der realen Welt grafische Bilder hinzuzufügen (<strong>Augmented Reality</strong>oder <strong>AR</strong>).</span> Die <strong>WebXR-Geräte-API</strong> implementiert den Kern des WebXR-Feature-Sets, verwaltet die Auswahl von Ausgabegeräten, rendert die 3D-Szene mit der entsprechenden Bildrate auf das ausgewählte Gerät und verwaltet Bewegungsvektoren, die mit Eingabecontrollern erstellt wurden.</p>
+
+<p>WebXR-kompatible Geräte umfassen vollständig immersive 3D-Headsets mit Bewegungs- und Orientierungsverfolgung, Brillen, die Grafiken über der realen Szene überlagern, die durch die Rahmen gehen, und Handheld-Handys, die die Realität erweitern, indem sie die Welt mit einer Kamera erfassen und diese Szene mit computergenerierten Bildern ergänzen.</p>
+
+<p>Um dies zu erreichen, bietet die WebXR-Geräte-API die folgenden Schlüsselfunktionen:</p>
+
+<ul>
+ <li>Finden Sie kompatible VR- oder AR-Ausgangsgeräte</li>
+ <li>Rendern einer 3D-Szene auf dem Gerät mit einer entsprechenden Bildrate</li>
+ <li>(Optional) spiegeln Sie den Ausgang auf ein 2D-Display</li>
+ <li>Erstellen von Vektoren, die die Bewegungen von Eingabesteuerelementen darstellen</li>
+</ul>
+
+<p>Auf der grundlegendsten Ebene wird eine Szene in 3D dargestellt, indem die Perspektive berechnet wird, die auf die Szene angewendet werden soll, um sie aus der Sicht jedes benutzerischen Augen zu rendern, wobei der typische Abstand zwischen den Augen berücksichtigt wird, und dann die Szene zweimal, einmal für jedes Auge, gerendert wird. Die resultierenden Bilder (oder Bilder, wenn die Szene zweimal auf einem einzigen Frame gerendert wird, die Hälfte pro Auge) werden dann dem Benutzer angezeigt.</p>
+
+<p>Da <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> zum Rendern der 3D-Welt in die WebXR-Sitzung verwendet wird, sollten Sie zunächst mit der allgemeinen Verwendung von WebGL und mit den Grundlagen der 3D-Grafik im Allgemeinen vertraut sein. Sie verwenden höchstwahrscheinlich nicht direkt die WebGL-API, sondern eines der Frameworks oder Bibliotheken, die auf WebGL erstellt werden, um die Verwendung zu erleichtern. Zu den beliebtesten von ihnen ist <a href="https://threejs.org/">three.js</a>.</p>
+
+<p>Ein besonderer Vorteil der Verwendung einer Bibliothek anstelle der direkten Verwendung der WebGL-API besteht darin, dass Bibliotheken dazu neigen, virtuelle Kamerafunktionen zu implementieren. OpenGL (und damit WebGL durch Erweiterung) bietet nicht direkt eine Kameraansicht, mit einer Bibliothek, die eine in Ihrem Namen simuliert kann Ihre Arbeit viel, viel einfacher machen, vor allem beim Erstellen von Code, die freie Bewegung durch Ihre virtuelle Welt ermöglicht.</p>
+
+<h2 id="Wichtige_Gesundheits-_und_Sicherheitshinweise">Wichtige Gesundheits- und Sicherheitshinweise</h2>
+
+<p>Da der gesamte Akt der Schaffung einer virtuellen 3D-Welt im Wesentlichen ein Trick ist, der unser Verständnis davon nutzt, wie Augen Licht sammeln und wie das Gehirn die gesammelten Daten interpretiert, ist es wichtig zu bedenken, dass Software-Designer und Entwickler als solche die Verantwortung haben, noch vorsichtiger als üblich zu sein, um sicherzustellen, dass die Ergebnisse korrekt sind.</p>
+
+<p>Defekte, Fehlstellungen oder Verzerrungen können die Augen und das Gehirn verwirren, was zu allem von schmerzenden Augen oder Kopfschmerzen bis hin zu schwindelerregendem Schwindel, Schwindel oder potenziell schwerer Übelkeit führt. Es ist auch wichtig, wachsam zu sein für alles, was Sie anzeigen können, die das Potenzial haben können, Anfälle auszulösen, angesichts der allumfassenden Natur der VR-Brille; Der Benutzer ist möglicherweise nicht in der Lage, schnell von den Bildern wegzuschauen, die Sie präsentieren, wenn es Zuflucht verursacht.</p>
+
+<p>Wenn Sie Inhalte haben, die für Benutzer von Gefahr sein können, sollten Sie eine Warnmeldung bereitstellen. Besser sicher sein als entschuldigung!</p>
+
+<h2 id="WebXR_Device_API-Konzepte_und_-Nutzung">WebXR Device API-Konzepte und -Nutzung</h2>
+
+<h3 id="WebXR_AR_and_VR">WebXR: AR and VR</h3>
+
+<figure style="background: #eee; padding: 0.5em; border: 1px solid #aaa; border-radius: 1em; max-width: 20em; margin-bottom: 1em; margin-right: 2em; float: left;">
+<figcaption>Example WebXR hardware setup</figcaption>
+<img alt='Sketch of a person in a chair with wearing goggles labelled "Head mounted display (HMD)" facing a monitor with a webcam labeled "Position sensor"' src="https://mdn.mozillademos.org/files/11035/hw-setup.png"></figure>
+
+<p>While the older <a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a> was designed solely to support Virtual Reality (VR), WebXR provides support for both VR and Augmented Reality (AR) on the web. Support for AR functionality is added by the WebXR Augmented Reality Module.</p>
+
+<p>A typical XR device can have either 3 or 6 degrees of freedom and might or might not have an external positional sensor.</p>
+
+<p>The equipment may also include an accelerometer, barometer, or other sensors which are used to sense when the user moves through space, rotates their head, or the like.</p>
+
+<h3 id="WebXR_application_lifecycle">WebXR application lifecycle</h3>
+
+<p>Most applications using WebXR will follow a similar overall design pattern:</p>
+
+<ol>
+ <li>Check to see if the user's device and browser are both capable of presenting the XR experience you want to provide.
+  <ol>
+   <li>Make sure the WebXR API is available; if {{domxref("navigator.xr")}} is undefined, you can assume the user's browser and/or device doesn't support WebXR. If it's not supported, disable any user interface used to activate XR features and abort any attempts to enter XR mode.</li>
+   <li>Call {{DOMxRef("XR.isSessionSupported","navigator.xr.isSessionSupported()")}}, specifying the WebXR experience mode you want to provide: , , or , in order to determine whether or not the type of session you wish to provide is available.<code>inline</code><code>immersive-vr</code><code>immersive-ar</code></li>
+   <li>If the session type you want to use is available, provide the appropriate interface to the user to allow them to activate it.</li>
+  </ol>
+ </li>
+ <li>When the user requests the activation of WebXR functionality by engaging with the user interface enabled above, request an {{DOMxRef("XRSession")}} using the desired mode. This is done by calling {{DOMxRef("XR.requestSession","navigator.xr.requestSession()")}}, again specifying the string indicating the mode you want to enable: , , or .<code>inline</code><code>immersive-vr</code><code>immersive-ar</code></li>
+ <li>If the promise returned by  resolves, use the new {{domxref("XRSession")}} to run the frame loop for the entire duration of the WebXR experience.<code>requestSession()</code>
+  <ol>
+   <li>Call the {{domxref("XRSession")}} method {{DOMxRef("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} to schedule the first frame render for the XR device.</li>
+   <li>Each  callback should use the information provided about the objects located in the 3D world to render the frame using WebGL.<code>requestAnimationFrame()</code></li>
+   <li>Keep calling {{DOMxRef("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} from within the callback to schedule each successive frame to be rendered.</li>
+  </ol>
+ </li>
+ <li>When the time comes, end the XR session; otherwise, continue the loop until the user chooses to exit XR mode.
+  <ol>
+   <li>To end the XR session yourself, call {{DOMxRef("XRSession.end", "XRSession.end()")}}.</li>
+   <li>Include a handler for the {{domxref("XRSession")}} event {{domxref("XRSession.end_event", "end")}} event to be informed when the session is ending, regardless of whether your code, the user, or the browser initiated the termination of the session.</li>
+  </ol>
+ </li>
+</ol>
+
+<h3 id="Permissions_and_security">Permissions and security</h3>
+
+<p>The WebXR Device API is subject to a number of permission and security controls. While not onerous, they are worth being aware of. These mostly revolve around the fully-immersive  session mode, but there are things to be aware of when setting up an AR session, as well.<code>immersive-vr</code></p>
+
+<h4 id="Immersive_presentation_of_VR">Immersive presentation of VR</h4>
+
+<p>First, any requests to activate the  mode are rejected if the domain issuing the request does not have permission to enable an immersive session. This permission comes from the  <a href="/en-US/docs/Web/HTTP/Feature_Policy">feature policy</a>.<code>immersive-vr</code><code>xr-spatial-tracking</code></p>
+
+<p>Once that check is passed, the request to enter mode is allowed if all of the following are true:<code>immersive-vr</code></p>
+
+<ul>
+ <li>The  call was issued by code executing within the handler for a user event, or the from the startup code for a user-launched <a href="/en-US/docs/Web/Progressive_web_apps">web application</a>.<code>requestSession()</code></li>
+ <li>The document is considered trustworthy, in that it is responsible and is both currently active and has focus.</li>
+ <li>The user's intent to enter immersive VR mode is well understood; see {{anch("User intent")}} below for details.</li>
+</ul>
+
+<p>If all of that is true, the promise returned by  is resolved, and the new {{domxref("XRSession")}} object is passed into the fulfillment handler. Otherwise, an appropriate exception is thrown, such as  if the document doesn't have permission to enter immersive mode.<code>requestSession()</code><code>SecurityError</code></p>
+
+<h4 id="Inline_presentation">Inline presentation</h4>
+
+<p>When you request an {{domxref("XRSession")}} with the mode set to , and any features are required or requested, the browser will only allow the session to be created if the call to {{domxref("XR.requestSession", "requestSession()")}} was made by code which is executing expressly due to <strong>user intent</strong>.<code>inline</code></p>
+
+<p>Specifically:</p>
+
+<ul>
+ <li>If the  call isn't coming from within the handler executed in response to a user event, and is not being issued while launching a web application, the request is denied and  is delivered to the promise's fulfillment handler.<code>requestSession()</code><code>false</code></li>
+ <li>If the document making the request isn't the one which is responsible for the script, the request is denied.</li>
+ <li>If the document making the request isn't trustworthy, the request is denied and  is returned through the promise's fulfillment routine. A trustworthy document is one which is both responsible and active, and which currently has focus.<code>false</code></li>
+ <li>If the user's intent to open an inline XR presentation is not well understood, the request is denied. Understanding of the {{anch("User intent", "user's intent")}} may be either implicit or explicit.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Additional requirements may be put into effect due to the specific features requested by the options object when calling .<code>requestSession()</code></p>
+</div>
+
+<h4 id="User_intent">User intent</h4>
+
+<p><strong>User intent</strong> is the concept of whether or not an action being performed by code is being performed because of something the user intends to do or not. There are two kinds of user intent: <strong>implicit</strong> and <strong>explicit</strong>.</p>
+
+<p><strong>Explicit user intent</strong> (explicit user consent) is granted when the user has specifically and expressly been asked for permission to perform an action.</p>
+
+<p><strong>Implicit user intent</strong> (implicit user consent) is assumed if either of the following scenarios is the case:</p>
+
+<ul>
+ <li>The user has interacted with the document in some way which has in turn caused your request to occur. For example, if you have an "Enter XR mode" button, and the user clicks it, calling  from the button's {{domxref("Element.click_event", "click")}} event handler will permitted.<code>requestSession()</code></li>
+ <li>If your code is executing during the launch of a web application, the runtime may consider the act of launching your web application to qualify as user intent.</li>
+</ul>
+
+<h3 id="WebXR_availability">WebXR availability</h3>
+
+<p>As a new and still in development API, WebXR support is limited to specific devices and browsers; and even on those, it may not be enabled by default. There may be options available to allow you to experiment with WebXR even if you don't have a compatible system, however.</p>
+
+<h4 id="WebXR_polyfill">WebXR polyfill</h4>
+
+<p>The team designing the WebXR specification has published a <a href="https://github.com/immersive-web/webxr-polyfill">WebXR polyfill</a> which you can use to simulate WebXR on browsers which don't have support for the WebXR APIs. If the browser supports the older <a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a>, that is used. Otherwise, the polyfill falls back to an implementation which uses Google's Cardboard VR API.</p>
+
+<p>The polyfill is maintained alongside the specification, and is kept up to date with the specification. Additionally, it is updated to maintain compatibility with browsers as their support for WebXR and other technologies related to it and to the implementation of the polyfill change over time.</p>
+
+<p>Be sure to read the readme carefully; the polyfill comes in several versions depending on what degree of compatibility with newer JavaScript features your target browsers include.</p>
+
+<h4 id="WebXR_API_Emulator_extension">WebXR API Emulator extension</h4>
+
+<p>The <a href="https://mixedreality.mozilla.org/">Mozilla WebXR team</a> has created a <a href="https://blog.mozvr.com/webxr-emulator-extension/">WebXR API Emulator</a> browser extension, compatible with both Firefox and Chrome, which emulates the WebXR API, simulating a variety of compatible devices such as the HTC Vive, the Oculus Go and Oculus Quest, Samsung Gear, and Google Cardboard. With the extension in place, you can open up a developer tools panel that lets you control the position and orientation of the headset and any hand controllers, as well as button presses on the controllers.</p>
+
+<h5 id="Emulator_usage">Emulator usage</h5>
+
+<p>While somewhat awkward compared to using an actual headset, this makes it possible to experiment with and developer WebXR code on a desktop computer, where WebXR isn't normally available. It also lets you perform some basic testing before taking your code to a real device. Be aware, however, that the emulator does not yet completely emulate all of the WebXR API, so you may run into problems you're not expecting. Again, carefully read the readme file and make sure you're aware of the limitations before you begin.</p>
+
+<div class="blockIndicator note">
+<p><strong>Important:</strong> You should <em>always</em> test your code on actual AR and/or VR hardware before releasing or shipping a product! Emulated, simulated, or polyfilled environments are <em>not</em> an adequate substitute for actual testing on physical devices.</p>
+</div>
+
+<h5 id="Getting_the_extension">Getting the extension</h5>
+
+<p>Download the WebXR API Emulator for your supported browser below:</p>
+
+<ul>
+ <li><a href="https://chrome.google.com/webstore/detail/webxr-api-emulator/mjddjgeghkdijejnciaefnkjmkafnnje">Google Chrome</a></li>
+ <li><a href="https://addons.mozilla.org/en-US/firefox/addon/webxr-api-emulator/">Mozilla Firefox</a></li>
+</ul>
+
+<p>The <a href="https://github.com/MozillaReality/WebXR-emulator-extension">source code for the extension</a> is also available on GitHub.</p>
+
+<h5 id="Emulator_issues_and_notes">Emulator issues and notes</h5>
+
+<p>While this isn't the place for a full article about the extension, there are some specific things worth mentioning.</p>
+
+<p>Version 0.4.0 of the extension was announced on March 26, 2020. It introduced support for augmented reality (AR) through the <a href="https://www.w3.org/TR/webxr-ar-module-1/">WebXR AR Module</a>, which has is approaching a stable state. Documentation for AR is forthcoming shortly here on MDN.</p>
+
+<p>Other improvements include updating the emulator to rename the  interface to {{domxref("XRSystem")}}, introduce support for squeeze (grip) input sources, and add support for the {{domxref("XRInputSource")}} property {{domxref("XRInputSource.profiles", "profiles")}}.<code>XR</code></p>
+
+<h2 id="Accessing_the_WebXR_API">Accessing the WebXR API</h2>
+
+<p>To gain access to the WebXR API within the context of a given window, use the {{domxref("navigator.xr")}} property.</p>
+
+<dl>
+ <dt>{{domxref("navigator.xr")}} {{ReadOnlyInline}}</dt>
+ <dd>This property, added to the {{domxref("Navigator")}} interface, returns the {{domxref("XR")}} object through which the WebXR API is exposed. If this property is missing or , WebXR is not available.<code>null</code></dd>
+</dl>
+
+<h2 id="WebXR_interfaces">WebXR interfaces</h2>
+
+<dl>
+ <dt>{{DOMxRef("XR")}}</dt>
+ <dd>The {{domxref("Navigator.xr", "navigator.xr")}} property returns the window's instance of {{domxref("XR")}}, which is the mechanism by which your code accesses the WebXR API. Using the  interface, you can create {{domxref("XRSession")}}s to represent actual AR and/or VR sessions.<code>XR</code></dd>
+ <dt>{{DOMxRef("XRFrame")}}</dt>
+ <dd>While presenting an XR session, the state of all tracked objects which make up the session are represented by an . To get an , call the session's {{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} method, providing a callback which will be called with the  once available. Events which communicate tracking states will also use  to contain that information.<code>XRFrame</code><code>XRFrame</code><code>XRFrame</code><code>XRFrame</code></dd>
+ <dt>{{DOMxRef("XRRenderState")}}</dt>
+ <dd>Provides a set of configurable properties which change how the imagery output by an  is composited.<code>XRSession</code></dd>
+ <dt>{{DOMxRef("XRSession")}}</dt>
+ <dd>Provides the interface for interacting with XR hardware. Once an  is obtained from {{domxref("XR.requestSession()")}}, the session can be used to check the position and orientation of the viewer, query the device for environment information, and present the virtual or augmented world to the user.<code>XRSession</code></dd>
+ <dt>{{DOMxRef("XRSpace")}}</dt>
+ <dd><code>XRSpace</code> is an opaque base class on which all virtual coordinate system interfaces are based. Positions in WebXR are always expressed in relation to a particular  at the time at which a particular {{domxref("XFrame")}} takes place. The space's coordinate system has its origin at the a given physical position.<code>XRSpace</code></dd>
+ <dt>{{DOMxRef("XRReferenceSpace")}}</dt>
+ <dd>A subclass of {{domxref("XRSpace")}} which is used to identify a spatial relationship in relation to the user's physical environment. The  coordinate system is expected to remain unchanged through the lifespan of the {{domxref("XRSession")}}.The world has no boundaries and extends infinitely in every direction.<code>XRReferenceSpace</code></dd>
+ <dt>{{DOMxRef("XRBoundedReferenceSpace")}}</dt>
+ <dd><code>XRBoundedReferenceSpace</code> extends the {{domxref("XRReferenceSpace")}} coordinate system to further include support for a finite world with set boundaries. Unlike , the origin must be located on the floor (that is, <em>y</em> = 0 at the floor). The x and z components of the origin are typically presumed to be located at or near the center of the room or surface.<code>XRReferenceSpace</code></dd>
+ <dt>{{DOMxRef("XRView")}}</dt>
+ <dd>Represents a single view into the XR scene for a particular frame. Each  corresponds to the video display surface used to present the scene to the user. For example, a given XR device might have two views: one for the left eye and one for the right. Each view has an offset used to shift the position of the view relative to the camera, in order to allow for creating stereographic effects.<code>XRView</code></dd>
+ <dt>{{DOMxRef("XRViewport")}}</dt>
+ <dd>Describes a viewport. A viewport is a rectangular portion of a graphic surface.</dd>
+ <dt>{{DOMxRef("XRRigidTransform")}}</dt>
+ <dd>A transform defined using a position and orientation in the virtual space's coordinate system as described by the {{domxref("XRSpace")}}.</dd>
+ <dt>{{DOMxRef("XRPose")}}</dt>
+ <dd>Describes a position and orientation in space relative to an {{domxref("XRSpace")}}.</dd>
+ <dt>{{DOMxRef("XRViewerPose")}}</dt>
+ <dd>Based on {{domxref("XRPose")}},  specifies the state of a viewer of the WebXR scene as indicated by the XR device. Included is an array of {{domxref("XRView")}} objects, each representing one perspective on the scene. For example, it takes two views to create the stereoscopic view as perceived by human vision—one for the left eye and a second for the right eye. One view is offset to the left slightly from the viewer's position, and the other view is offset to the right by the same distance. The view list can also be used to represent the perspectives of each of the spectators of a scene, in a multi-user environment.<code>XRViewerPose</code></dd>
+ <dt>{{DOMxRef("XRInputSource")}}</dt>
+ <dd>Represents any input device the user can use to perform targeted actions within the same virtual space as the viewer. Input sources may include devices such as hand controllers, optical tracking systems, and other devices which are explicitly associated with the XR device. Other input devices such as keyboards, mice, and gamepads are not presented as  instances.<code>XRInputSource</code></dd>
+ <dt>{{DOMxRef("XRWebGLLayer")}}</dt>
+ <dd>A layer which serves as a <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> frame buffer into which a scene's view is rendered. Using WebGL to render the scene gains substantial performance benefits due to graphics acceleration.</dd>
+</dl>
+
+<h3 id="Event_interfaces">Event interfaces</h3>
+
+<p>The following interfaces are used to represent the events used by the WebXR API.</p>
+
+<dl>
+ <dt>{{domxref("XRInputSourceEvent")}}</dt>
+ <dd>Sent when the state of an {{domxref("XRInputSource")}} changes. This can happen, for example, when the position and/or orientation of the device changes, or when buttons are pressed or released.</dd>
+ <dt>{{domxref("XRInputSourcesChangeEvent")}}</dt>
+ <dd>Sent to indicate that the set of available input sources has changed for the {{domxref("XRSession")}}.</dd>
+ <dt>{{domxref("XRReferenceSpaceEvent")}}</dt>
+ <dd>Sent when the state of an {{domxref("XRReferenceSpace")}} changes.</dd>
+ <dt>{{domxref("XRSessionEvent")}}</dt>
+ <dd>Sent to indicate that the state of an {{domxref("XRSession")}} has changed. For example, if the position and/or orient</dd>
+</dl>
+
+<h2 id="Extensions_to_the_WebGL_API">Extensions to the WebGL API</h2>
+
+<p>The WebGL API is extended by the WebXR specification to augment the WebGL context to allow it to be used to render views for display by a WebXR device.</p>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContextBase.makeXRCompatibile()")}}</dt>
+ <dd>Configures the WebGL context to be compatible with WebXR. If the context was not initially created with the {{domxref("WebGLContextAttributes.xrCompatible", "xrCompatible")}} property set to , you must call  prior to attempting to use the WebGL context for WebXR rendering. Returns a {{jsxref("promise")}} which resolves once the context has been prepared, or is rejected if the context cannot be configured for use by WebXR.<code>true</code><code>makeXRCompatible()</code></dd>
+</dl>
+
+<h2 id="Guides_and_tutorials">Guides and tutorials</h2>
+
+<p>The following guides and tutorials are a great resource to learn how to comprehend WebXR and the underlying 3D and VR/AR graphics concepts.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Fundamentals">Fundamentals of WebXR</a></dt>
+ <dd>Before diving into the details of how to create content using WebXR, it may be helpful to read this overview of the technology, which includes introductions to terminology that may be unfamiliar to you, or which may be used in a new way.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Matrix_math_for_the_web">Matrix math for the web</a></dt>
+ <dd>A guide covering how matrices can be used on the web, including both for CSS transforms and for WebGL purposes, as well as to handle the positioning and orientation of objects in WebXR contexts.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Startup_and_shutdown">Setting up and shutting down a WebXR session</a></dt>
+ <dd>Before actually presenting a scene using an XR device such as a headset or goggles, you need to create a WebXR session bound to a rendering layer that draws the scene for presentation in each of the XR device's displays so that the 3D effect can be presented to the user. This guide covers how to create and stop WebXR sessions.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Permissions_and_security">Permissions and security for WebXR</a></dt>
+ <dd>The WebXR Device API has several areas of security to contend with, from establishing feature-policy to ensuring the user intends to use the mixed reality presentation before activating it.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Geometry">Geometry and reference spaces in WebXR</a></dt>
+ <dd>In this guide, the required concepts of 3D geometry are briefly reviewed, and the fundamentals of how that geometry is represented in WebXR are detailed. Learn how reference spaces are used to position objects—and the viewer—and the differences among the available types of reference space, as well as their use cases.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Spatial_tracking">Spatial tracking in WebXR</a></dt>
+ <dd>This guide describes how objects—including the user's body and its parts—are located in space, and how their movement and orientation relative to one another is monitored and managed over time. This article explains the relationship between spaces, poses, viewers, and views.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Rendering">Rendering and the WebXR frame loop</a></dt>
+ <dd>Starting with how you schedule frames to be rendered, this guide then continues to cover how to determine the placement of objects in the view and how to then render them into the WebGL buffer used for each of the two eyes' views of the scene.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Cameras">Viewpoints and viewers: Simulating cameras in WebXR </a></dt>
+ <dd>WebGL (and therefore WebXR) doesn't really have a concept of a camera, which is the traditional concept used to represent a viewpoint in 3D graphics. In this article, we see how to simulate a camera and how to create the illusion of moving a viewer through a world in which the viewer doesn't really move.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Movement_and_motion">Movement, orientation, and motion: A WebXR example</a></dt>
+ <dd>In this example and tutorial, we use information learned throughout the WebXR documentation to create a scene containing a rotating cube which the user can move around using both VR headset and keyboard and mouse.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Bounded_reference_spaces">Using bounded reference spaces</a></dt>
+ <dd>In this article, we examine how to use a  reference space to define the boundaries of where the viewer can safely move about without leaving the area tracked by their XR hardware or colliding with a physical obstacle. On devices which support it,  can be a useful tool in your repertoire.<code>bounded-floor</code><code>bounded-floor</code></dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Performance">WebXR performance guide</a></dt>
+ <dd>Recommendations and tips to help you optimize the performance of your WebXR application.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Inputs">Inputs and input sources</a></dt>
+ <dd>A guide to input sources and how to efficiently manage the input devices being used to control the WebXR session, and how to receive and process user inputs from those devices.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Input_profiles">Using WebXR input profiles</a></dt>
+ <dd>A guide to interpreting the {{Glossary("JSON")}} data provided by the <a href="https://github.com/immersive-web/webxr-input-profiles/tree/master/packages/registry">WebXR Input Profiles Registry</a>, which can be used to determine what options and controls are available on the user's available input devices.</dd>
+ <dt><a href="/en-US/docs/Web/WebXR_Device_API/Gamepads">Supporting advanced controllers and gamepads in WebXR applications</a></dt>
+ <dd>WebXR uses the {{domxref("Gamepad")}} object to describe the controls available on complex input devices (such as hand controllers with multiple buttons and/or axes) and gamepad-like devices. In this guide, learn how to make use of these devices' controls.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("WebXR")}}</td>
+   <td>{{Spec2("WebXR")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.Navigator.xr")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/Graphics">Graphics on the web</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></li>
+ <li><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a>: Accelerated 2D and 3D graphics on the web</li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a>: 2D drawing for the web</li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a></li>
+</ul>
diff --git a/files/de/web/api/window/alert/index.html b/files/de/web/api/window/alert/index.html
new file mode 100644
index 0000000000..841600419d
--- /dev/null
+++ b/files/de/web/api/window/alert/index.html
@@ -0,0 +1,72 @@
+---
+title: Window.alert
+slug: Web/API/Window/alert
+tags:
+  - API
+  - DOM
+  - Method
+  - Reference
+  - Window
+translation_of: Web/API/Window/alert
+---
+<p>{{ APIRef }}</p>
+
+<p>Die <strong><code>Window.alert()</code></strong> Methode zeigt einen Alert-Dialog mit optional spezifiziertem Inhalt und einem OK-Button an.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">window.alert(<em>nachricht</em>);</pre>
+
+<ul>
+ <li><code>nachricht</code> ist ein optionaler Text-String, der im Dialog angezeigt werden soll, oder alternativ ein Objekt, das in einen Text-String umgewandelt und angezeigt wird.</li>
+</ul>
+
+<h2 id="Example" name="Example">Beispiel</h2>
+
+<pre class="brush: js">window.alert("Hello world!");
+</pre>
+
+<p>erzeugt:</p>
+
+<p><img alt="Image:AlertHelloWorld.png" src="/files/130/AlertHelloWorld.png"></p>
+
+<h2 id="Notes" name="Notes">Mehr JS:</h2>
+
+<pre class="line-numbers  language-html"><code class="language-html">alert()</code></pre>
+
+<h2 id="Notes" name="Notes">Anmerkungen</h2>
+
+<p>Der Alert-Dialog sollte für Nachrichten benutzt werden, die keine Reaktion des Nutzers benötigen, außer seiner/ihrer Bestätigung.</p>
+
+<p>Dialog-Boxen sind modale Fenster - der Rest der Oberfläche wird erst geladen, sobald die Box geschlossen wird. Deswegen sollten Funktionen, die Dialog-Boxen (oder modale Fenster) erzeugen, nicht zu oft benutzt werden.</p>
+
+<p><a href="https://developer.mozilla.org/en-US/Chrome" title="Chrome">Mozilla Chrome</a>-Nutzer (z. B. Firefox-Erweiterungen) sollten stattdessen Methoden des {{interface("nsIPromptService")}} verwenden.</p>
+
+<p>Ab Chrome {{CompatChrome(46.0)}} wird diese Methode innerhalb eines {{htmlelement("iframe")}} geblockt, solange sein Sandbox-Attribut nicht den Wert <code>allow-modal</code> enthält.</p>
+
+<p>{{gecko_minversion_inline("23.0")}} Das Argument ist nun optional, wie von der Spezifikation gefordert.</p>
+
+<h2 id="Specification" name="Specification">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 Web application', '#dom-alert', 'alert()')}}</td>
+   <td>{{Spec2('HTML5 Web application')}}</td>
+   <td>Anfängliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{domxref("window.confirm","confirm")}}</li>
+ <li>{{domxref("window.prompt","prompt")}}</li>
+ <li>Für <a href="/en-US/docs/Chrome" title="/en-US/docs/Chrome">Mozilla Chrome</a>: {{ifmethod("nsIPromptService","alert")}} und {{ifmethod("nsIPromptService","alertCheck")}}</li>
+</ul>
diff --git a/files/de/web/api/window/applicationcache/index.html b/files/de/web/api/window/applicationcache/index.html
new file mode 100644
index 0000000000..c8d47fc6ee
--- /dev/null
+++ b/files/de/web/api/window/applicationcache/index.html
@@ -0,0 +1,33 @@
+---
+title: Window.applicationCache
+slug: Web/API/Window/applicationCache
+translation_of: Web/API/Window/applicationCache
+---
+<p>{{APIRef}}</p>
+
+<h2 id="Summary" name="Summary">Zusammenfassung</h2>
+
+<p>Liefert eine Referenz auf das ApplicationCache Objekt für das aktuelle Fenster.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>cache</var> = window.applicationCache
+</pre>
+
+<h3 id="Parameters" name="Parameters">Parameter</h3>
+
+<ul>
+ <li><code>cache</code> ist eine Objektreferenz auf eine {{domxref("OfflineResourceList")}}.</li>
+</ul>
+
+<h2 id="Specification" name="Specification">Spezification</h2>
+
+<ul>
+ <li>{{spec("http://www.w3.org/TR/2008/WD-html5-20080122/#appcache","HTML 5","WD")}}</li>
+</ul>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/HTML/Using_the_application_cache">Using Application Cache</a></li>
+</ul>
diff --git a/files/de/web/api/window/cancelanimationframe/index.html b/files/de/web/api/window/cancelanimationframe/index.html
new file mode 100644
index 0000000000..7d38ab5be4
--- /dev/null
+++ b/files/de/web/api/window/cancelanimationframe/index.html
@@ -0,0 +1,72 @@
+---
+title: Window.cancelAnimationFrame()
+slug: Web/API/Window/cancelAnimationFrame
+tags:
+  - API
+  - Animation
+  - DOM
+  - Experimentell
+  - Méthode
+translation_of: Web/API/Window/cancelAnimationFrame
+---
+<div>{{APIRef}}{{SeeCompatTable}}</div>
+
+<h2 id="Summary" name="Summary">Zusammenfassung</h2>
+
+<p>Stopt eine vorher durch {{domxref("window.requestAnimationFrame()")}} geplante Animation.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">window.cancelAnimationFrame(<em>requestID</em>);
+</pre>
+
+<h3 id="Parameters" name="Parameters">Parameter</h3>
+
+<dl>
+ <dt><code>requestID</code></dt>
+ <dd>Der ID Wert der beim Aufruf von {{domxref("window.requestAnimationFrame()")}} vorher zurückgegeben wurde.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Beispiel</h2>
+
+<pre class="brush: js">var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
+                            window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
+
+var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;
+
+var start = window.mozAnimationStartTime;  // Nur unterstützt in FF. Andere Browsers können zB Date.now() benutzen.
+
+var myReq;
+
+function step(timestamp) {
+  var progress = timestamp - start;
+  d.style.left = Math.min(progress/10, 200) + "px";
+  if (progress &lt; 2000) {
+    myReq = requestAnimationFrame(step);
+  }
+}
+myReq = requestAnimationFrame(step);
+
+window.cancelAnimationFrame(myReq);
+</pre>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Window.cancelAnimationFrame")}}</p>
+
+<h2 id="Specification" name="Specification">Spezifikation</h2>
+
+<ul>
+ <li>{{spec("http://www.w3.org/TR/animation-timing/#cancelAnimationFrame", "Timing control for script-based animations: cancelAnimationFrame", "WD")}}</li>
+</ul>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{domxref("window.mozAnimationStartTime")}}</li>
+ <li>{{domxref("window.requestAnimationFrame()")}}</li>
+</ul>
diff --git a/files/de/web/api/window/close/index.html b/files/de/web/api/window/close/index.html
new file mode 100644
index 0000000000..84c1630838
--- /dev/null
+++ b/files/de/web/api/window/close/index.html
@@ -0,0 +1,78 @@
+---
+title: Window.close()
+slug: Web/API/Window/close
+tags:
+  - API
+  - DOM
+  - Gecko
+  - Method
+  - Reference
+  - Window
+translation_of: Web/API/Window/close
+---
+<div>{{APIRef}}</div>
+
+<p>Die <code><strong>Window.close()</strong></code> Methode schließt das aktuelle Fenster oder das Fenster von dem sie aufgerufen wurde.</p>
+
+<p>Diese Methode kann nur von Fenstern aufgerufen werden, die ein Skript mit der {{domxref("Window.open()")}} Methode verwenden. Wenn das Fenster nicht durch ein Skript geöffnet wurde, erscheint ein so oder ähnlich lautender Fehler in der Konsole <code><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-string">Skripte können keine Fenster schließen, die nicht von ihnen geöffnet wurden.</span></span></span></span></code></p>
+
+<p>Zu beachten ist auch, dass <code>close()</code> keinen Effekt auf {{domxref("Window")}} Objekte hat, die per <code><a href="/en-US/docs/Web/API/HTMLIFrameElement/contentWindow">HTMLIFrame​Element​.content​Window</a></code> zurückgegeben werden.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">window.close();</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Schließt_ein_Fenster_geöffnet_durch_window.open">Schließt ein Fenster, geöffnet durch <code>window.open()</code></h3>
+
+<p>Dieses Beispiel zeigt eine Funktion die ein Fenster öffnet eine zweite Funktion die es schließt. Das demonstriert wie <code>Window.close()</code> verwendet wird um ein Fenster zu schließen, das per {{domxref("window.open()")}} geöffnet wurde.</p>
+
+<pre class="brush: js">//Global var to store a reference to the opened window
+var openedWindow;
+
+function openWindow() {
+  openedWindow = window.open('moreinfo.htm');
+}
+
+function closeOpenedWindow() {
+  openedWindow.close();
+}
+</pre>
+
+<h3 id="Das_aktuelle_Fenster_schließen">Das aktuelle Fenster schließen</h3>
+
+<p>Wenn Sie in der Vergangenheit die <code>close()</code> Methode des window Objekts direkt aufgerufen haben, anstatt <code>close()</code> für eine <code>window</code> Instanz aufzurufen, hat der Browser das vorderste Fenster geschlossen, unabhängig davon, ob Ihr Skript dieses Fenster erstellt hat oder nicht. Dies ist nicht länger der Fall; Aus Sicherheitsgründen dürfen Skripte keine Fenster mehr schließen, die sie nicht geöffnet haben. (Firefox 46.0.1: Skripte können keine Fenster schließen, die sie nicht geöffnet hatten)</p>
+
+<pre class="brush: js">function closeCurrentWindow() {
+  window.close();
+}
+</pre>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-window-close', 'window.close()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#dom-window-close", "Window.close()")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("api.Window.close")}}</p>
diff --git a/files/de/web/api/window/confirm/index.html b/files/de/web/api/window/confirm/index.html
new file mode 100644
index 0000000000..23df4db917
--- /dev/null
+++ b/files/de/web/api/window/confirm/index.html
@@ -0,0 +1,73 @@
+---
+title: Window.confirm()
+slug: Web/API/Window/confirm
+tags:
+  - API
+  - DOM
+  - Method
+  - NeedsBrowserCompatibility
+  - NeedsCompatTable
+  - NeedsMobileBrowserCompatibility
+  - Reference
+  - Window
+  - confirm
+translation_of: Web/API/Window/confirm
+---
+<div>{{ApiRef("Window")}}</div>
+
+<p>Die <code><strong>Window.confirm()</strong></code> Funktion zeigt ein modales Dialogfenster mit einem optionalen Text und zwei Buttons an, OK und Abbrechen.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>eingabe</em> = window.confirm(<em>nachricht</em>);</pre>
+
+<ul>
+ <li><code>nachricht</code> ist der optionale Text, der im Dialogfenster angezeigt wird.</li>
+ <li><code>eingabe</code> ist ein <em>boolean</em>-Wert, der angibt, welche Schaltfläche gedrückt wurde (<code>true</code> heißt OK).</li>
+</ul>
+
+<h2 id="Example" name="Example">Beispiel</h2>
+
+<pre class="brush: js">if (window.confirm("Willst du die Seite wirklich verlassen?")) {
+    window.open("exit.html", "Auf Wiedersehen!");
+}
+</pre>
+
+<p>Erzeugt (<em>englisch</em>):</p>
+
+<p><img alt="firefox confirm" src="https://mdn.mozillademos.org/files/7163/firefoxcomfirmdialog_zpsf00ec381.png" style="height: 119px; width: 354px;"><br>
+  </p>
+
+<h2 id="Notes" name="Notes">Anmerkungen</h2>
+
+<p><span class="comment">The following text is shared between this article, DOM:window.prompt and DOM:window.alert</span> Dialogfenster sind <em>modal </em>- sie verhindern, dass der Anwender auf den Rest der Seite zugreifen kann, bis das Dialogfenster geschlossen wurde. Aus diesen Grund sollte man Funktionen, die Dialogfenster anzeigen, nicht zu oft verwenden. Und unabhängig davon gibt es gute Gründe dafür, <a href="http://alistapart.com/article/neveruseawarning">Dialogfenster zum Bestätigen einer Aktion zu vermeiden</a>.</p>
+
+<p><a href="/en-US/Chrome" title="Chrome">Mozilla Chrome</a>-Nutzer (z.B. Firefox-Erweiterungen) sollten stattdessen {{interface("nsIPromptService")}} verwenden.</p>
+
+<p>Seit Chrome {{CompatChrome(46.0)}} wird diese Funktion innerhalb eines {{htmlelement("iframe")}}s blockiert, es sei denn, dessen sandbox-Attribut hat den Wert <code>allow-modal</code>.</p>
+
+<p>{{gecko_minversion_inline("23.0")}} Der Parameter ist optional und wird laut Spezifikation nicht benötigit.</p>
+
+<h2 id="Specification" name="Specification">Spezifikation</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'timers-and-user-prompts.html#dom-confirm', 'confirm()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{domxref("window.alert","alert")}}</li>
+ <li>{{domxref("window.prompt","prompt")}}</li>
+</ul>
diff --git a/files/de/web/api/window/console/index.html b/files/de/web/api/window/console/index.html
new file mode 100644
index 0000000000..2fa7d75001
--- /dev/null
+++ b/files/de/web/api/window/console/index.html
@@ -0,0 +1,56 @@
+---
+title: Window.console
+slug: Web/API/Window/console
+tags:
+  - API
+  - Eigenschaft
+  - Referenz
+  - Schreibgeschützt
+  - Window
+  - console
+translation_of: Web/API/Window/console
+---
+<p>{{ APIRef }}</p>
+
+<p>Die <strong><code>Window.console</code></strong> Eigenschaft gibt eine Referenz des {{domxref("Console")}} Objects zurück, welches Methoden für das Loggen von Informationen in der Browser Konsole bietet. Diese Methoden sollten nur für das Debugging genutzt werden und nicht für das Darstellen von Informationen an Endnutzer.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>var consoleObj</em> = <em>window</em>.console;
+</pre>
+
+<h2 id="Example" name="Example">Beispiele</h2>
+
+<h3 id="Zur_Konsole_loggen">Zur Konsole loggen</h3>
+
+<p>Das erste Beispiel loggt text zur Konsole.</p>
+
+<pre class="brush: js">console.log("Während dem Laden ist ein Fehler aufgetreten.");
+</pre>
+
+<p>Das nächste Beispiel loggt ein Objekt in der Konsole. Die Felder des Objekts können dabei ausgeklappt werden:</p>
+
+<pre class="brush: js">console.dir(einObjekt);</pre>
+
+<p>Schau dir {{SectionOnPage("/de-DE/docs/Web/API/Console", "Nutzung")}} für weitere Beispiele an.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Console API')}}</td>
+   <td>{{Spec2('Console API')}}</td>
+   <td>Anfängliche Definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p>Aktuell gibt es viele Unterschiede in der Implementation zwischen den verschiedenen Browsern. Dennoch wird aktuell daran gearbeitet, die Implementationen zusammen zu bringen und konsistenter zu machen.</p>
+</div>
diff --git a/files/de/web/api/window/dump/index.html b/files/de/web/api/window/dump/index.html
new file mode 100644
index 0000000000..4126c3a4db
--- /dev/null
+++ b/files/de/web/api/window/dump/index.html
@@ -0,0 +1,42 @@
+---
+title: Window.dump()
+slug: Web/API/Window/dump
+tags:
+  - DOM
+translation_of: Web/API/Window/dump
+---
+<div>{{ApiRef}}</div>
+
+<h2 id="Summary" name="Summary">Übersicht</h2>
+
+<p>Schreibt eine Nachricht auf die (systemeigene) Konsole.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">window.dump(<em>message</em>);
+
+dump(<em>message</em>);
+</pre>
+
+<ul>
+ <li><code>message</code> ist die zu protokollierende Nachricht.</li>
+</ul>
+
+<h2 id="Notes" name="Notes">Bemerkungen</h2>
+
+<p><code>dump</code> wird normalerweise verwendet um JavaScript zu debuggen. Privilegierter Code kann auch <code><a href="/en-US/docs/Components.utils.reportError" title="Components.utils.reportError">Components.utils.reportError</a></code> und <code><a href="/en-US/docs/XPCOM_Interface_Reference/nsIConsoleService" title="nsIConsoleService">nsIConsoleService</a></code> verwenden, um Nachrichten in die <a href="/en-US/docs/Error_Console" title="Error_Console">Fehler-Konsole</a> zu schreiben.</p>
+
+<p>In <a href="/en-US/docs/Gecko" title="Gecko">Gecko</a> ist <code>dump</code> standardmäßig deaktiviert – beim Aufruf passiert also nichts und es wird auch kein Fehler erzeugt. Um die <code>dump</code> Ausgabe zu sehen, muss die Einstellung <code>browser.dom.window.dump.enabled</code> auf <code>true</code> gesetzt werden. Diese Einstellung kann in <a href="http://kb.mozillazine.org/About:config">about:config</a> oder in der <a href="http://kb.mozillazine.org/User.js_file">user.js Datei</a> vorgenommen werden. Anmerkung: Diese Einstellung ist in <code>about:config</code> normalerweise nicht enthalten, sie muss erst erzeugt werden (Rechtsklick in den Fensterbereich -&gt; Neu -&gt; Boolean).</p>
+
+<p>In Windows benötigt man eine Konsole, um überhaupt etwas zu sehen. Wenn noch keine vorhanden ist, kann durch einen Neustart der Anwendung mit dem Parameter  <code>-console</code> eine Konsole erzeugt werden. Auf anderen Betriebssystemen ist es ausreichend die Anwendung aus einem Terminal aufzurufen.</p>
+
+<p>Um die Konsolenausgabe in eine Datei umzuleiten, muss Firefox <em>ohne</em> den Parameter <code>-console</code> gestartet und folgende Syntax zum Umleiten von stderr und stdout in eine Datei verwendet werden, zB.:</p>
+
+<pre>firefox &gt; console.txt 2&gt;&amp;1
+</pre>
+
+<p><code>dump</code> steht auch in JavaScript geschriebenen XPCOM Komponenten zur verfügbar, obwohl <code><a href="/en-US/docs/DOM/window" title="DOM/window">window</a></code> nicht das globale Objekt in Komponenten ist. Allerdings wird diese Verwendung von <code>dump</code> nicht durch die oben genannte Einstellung beeinflusst -- die Ausgabe findet immer statt. Deshalb ist es anzuraten, diese Einstellung selbst zu prüfen oder eine eigene Debug-Einstellung zu erzeugen. Damit sichergestellt ist, dass nicht unnötig viele Debug-Daten in die Konsole des Benutzers geschrieben werden, wenn dieser überhaupt nicht an diesen interessiert ist. Achtung, die Ausgabe von <code>dump</code> von XPCOM Komponenten wird zu <code>stderr</code> geleitet, während ein Aufruf von <code>dump </code>an andere Stelle auf <code>stdout</code> ausgibt.</p>
+
+<h2 id="Specification" name="Specification">Spezifikation</h2>
+
+<p>{{DOM0}}</p>
diff --git a/files/de/web/api/window/history/index.html b/files/de/web/api/window/history/index.html
new file mode 100644
index 0000000000..05a369435f
--- /dev/null
+++ b/files/de/web/api/window/history/index.html
@@ -0,0 +1,56 @@
+---
+title: Window.history
+slug: Web/API/Window/history
+tags:
+  - API
+  - HTML DOM
+  - History API
+  - Window
+translation_of: Web/API/Window/history
+---
+<p>{{ APIRef }}</p>
+
+<p>Die nur lesend zugreifbare Eigenschaft <code><strong>Window</strong>.<strong>history</strong></code> gibt eine Referenz auf das {{domxref("History")}} Objekt zurück, welches eine Schnittstelle zur Manipulation der Browser Sitzungs-Historie bereitstellt (Seiten, die im aktuellen Tab oder dem aktuellen Frame besucht wurden).</p>
+
+<p>Unter <a href="/en/DOM/Manipulating_the_browser_history" title="en/DOM/Manipulating the browser history">Manipulating the browser history</a> finden sie weitere Details und Beispiele. Der Artikel geht besonders auf die Sicherheits-Features der Methoden <code>pushState()</code> und <code>replaceState()</code> ein, die Sie vor Benutzung der Funktionen kennen sollten.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>var historyObj</em> = <em>window</em>.history;
+</pre>
+
+<h2 id="Example" name="Example">Beispiel</h2>
+
+<pre class="brush: js">history.back();     // entspricht dem Klicken des "Zurück"-Kopfes
+history.go(-1);     // entspricht history.back();
+</pre>
+
+<h2 id="Anmerkungen">Anmerkungen</h2>
+
+<p>Für Seiten auf der obersten Ebene kann in der Sitzungs-Historie eine Liste von Seiten über das <code>History</code> Objekt angesehen werden, zugreifbar über die Drop-Downs im Browser neben den Vor- und Zurück-Schaltflächen.</p>
+
+<p>Aus Sicherheitsgründen erlaubt das <code>History</code> Objekt keinen Zugriff für nicht-privilegierten Code auf die URLs anderer Seiten in der Sitzungs-Historie, erlaubt aber die Navigation durch die Historie.</p>
+
+<p>Die Sitzungs-Historie kann nicht gelöscht oder das Vor-und Zurück-Navigieren verhindert werden. Die nächstbeste Lösung ist die <code><a href="/en/DOM/window.location#replace" title="en/DOM/window.location#replace">location.replace()</a></code> Methode, die den aktuellen Eintrag in der Sitzungs-Historie durch die übergebene URL ersetzt.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'browsers.html#the-history-interface', 'The History interface')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#the-history-interface', 'The History interface')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/de/web/api/window/index.html b/files/de/web/api/window/index.html
new file mode 100644
index 0000000000..26f27d9af0
--- /dev/null
+++ b/files/de/web/api/window/index.html
@@ -0,0 +1,384 @@
+---
+title: Window
+slug: Web/API/Window
+tags:
+  - DOM
+  - Gecko
+translation_of: Web/API/Window
+---
+<p>{{APIRef}}</p>
+
+<p><span class="seoSummary">Das <code>window</code> Objekt repräsentiert ein Fenster (Window), das ein DOM Dokument enthält. Das <code>document</code> Attribut zeigt auf das <a href="/en-US/docs/DOM/document">DOM document</a>, das im Fenster geladen ist.</span> Für ein gegebenes Dokument kann man über das {{Domxref("document.defaultView")}} Attribut das Fenster abrufen.</p>
+
+<p>Dieser Abschnitt bietet eine kurze Referenz für alle Methoden, Attribute und Events, die über das <code>window</code> Objekt zur Verfügung stehen. Das <code>window</code> Objekt implementiert die <code>Window</code> Schnitstelle, die wiederrum von der <code><a href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-AbstractView">AbstractView</a></code> Schnittstelle erbt. Einige zusätzliche globale Funktionen, <em>Namespace</em> Objekte, Schnittstellen und Konstruktoren, die nicht typischerweise mit dem <code>Window</code> in Verbindung gebracht werden, aber durch dieses verfügbar sind, werden in der <a href="/en-US/docs/JavaScript/Reference">JavaScript Reference</a> und <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Reference</a> aufgelistet.</p>
+
+<p>In einem "getabten" Browser wie Firefox enthält jeder Tab sein eigenes Window-Objekt (und im Falle von Extensions ist das Browser-Fenster selbst ein eigenständiges Fenster – siehe auch "<a href="/en-US/docs/Working_with_windows_in_chrome_code#Content_windows">Working with windows in chrome code</a>". Das heisst also, dass das Window-Objekt nicht zwischen Tabs desselben Fensters geteilt wird. Einige Methoden, zum Beispiel {{Domxref("window.resizeTo")}} und {{Domxref("window.resizeBy")}} beziehen sich auf das "ganze" Fenster, und nicht auf den Tab, dem das Window-Objekt gehört. Grundsätzlich lässt sich sagen, das alles, was man nicht sinnvollerweise einem Tab zuordnen kann, sich stattdessen auf das Window bezieht.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>This interface inherits properties from the {{domxref("EventTarget")}} interface and implements properties from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}.</em></p>
+
+<p>Note that properties which are objects (e.g.,. for overriding the prototype of built-in elements) are listed in a separate section below.</p>
+
+<dl>
+ <dt>{{domxref("Window.applicationCache")}} {{readOnlyInline}} {{gecko_minversion_inline("1.9")}}</dt>
+ <dd>An {{domxref("OfflineResourceList")}} object providing access to the offline resources for the window.</dd>
+ <dt>{{domxref("Window.closed")}} {{Non-standard_inline}}{{readOnlyInline}}</dt>
+ <dd>This property indicates whether the current window is closed or not.</dd>
+ <dt><code><a href="/en-US/docs/Components_object">Window.Components</a></code> {{Non-standard_inline}}</dt>
+ <dd>The entry point to many <a href="/en-US/docs/XPCOM">XPCOM</a> features. Some properties, e.g. <a href="/en-US/docs/Components.classes">classes</a>, are only available to sufficiently privileged code. <strong>Web code should not use this property.</strong></dd>
+ <dt>{{domxref("console","Window.console")}} {{Non-standard_inline}} {{ReadOnlyInline}}</dt>
+ <dd>Returns a reference to the console object providing access to the browser's debugging console.</dd>
+ <dt>{{domxref("Window.content")}} and Window._content {{Non-standard_inline}} {{obsolete_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Returns a reference to the content element in the current window. The obsolete variant with underscore is no longer available from Web content.</dd>
+ <dt>{{domxref("Window.controllers")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Returns the XUL controller objects for the current chrome window.</dd>
+ <dt>{{domxref("Window.crypto")}} {{readOnlyInline}}</dt>
+ <dd>Returns the browser crypto object.</dd>
+ <dt>{{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}}</dt>
+ <dd>Gets/sets the status bar text for the given window.</dd>
+ <dt>{{domxref("Window.devicePixelRatio")}} {{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Returns the ratio between physical pixels and device independent pixels in the current display.</dd>
+ <dt>{{domxref("Window.dialogArguments")}} {{Fx_minversion_inline(3)}} {{ReadOnlyInline}}</dt>
+ <dd>Gets the arguments passed to the window (if it's a dialog box) at the time {{domxref("window.showModalDialog()")}} was called. This is an {{Interface("nsIArray")}}.</dd>
+ <dt>{{domxref("Window.directories")}} {{obsolete_inline}}</dt>
+ <dd>Synonym of {{domxref("window.personalbar")}}</dd>
+ <dt>{{domxref("Window.document")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns a reference to the document that the window contains.</dd>
+ <dt>{{domxref("Window.frameElement")}} {{readOnlyInline}}</dt>
+ <dd>Returns the element in which the window is embedded, or null if the window is not embedded.</dd>
+ <dt>{{domxref("Window.frames")}} {{readOnlyInline}}</dt>
+ <dd>Returns an array of the subframes in the current window.</dd>
+ <dt>{{domxref("Window.fullScreen")}} {{gecko_minversion_inline("1.9")}}</dt>
+ <dd>This property indicates whether the window is displayed in full screen or not.</dd>
+ <dt><code>{{domxref("window.globalStorage")}} </code>{{gecko_minversion_inline("1.8.1")}} {{Non-standard_inline}} {{Obsolete_inline("gecko13")}}</dt>
+ <dd>Unsupported since Gecko 13 (Firefox 13). Use {{domxref("Window.localStorage")}} instead.<br>
+ Was: Multiple storage objects that are used for storing data across multiple pages.</dd>
+ <dt>{{domxref("Window.history")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns a reference to the history object.</dd>
+ <dt>{{domxref("Window.innerHeight")}}</dt>
+ <dd>Gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar.</dd>
+ <dt>{{domxref("window.innerWidth")}}</dt>
+ <dd>Gets the width of the content area of the browser window including, if rendered, the vertical scrollbar.</dd>
+ <dt>{{domxref("Window.length")}} {{readOnlyInline}}</dt>
+ <dd>Returns the number of frames in the window. See also {{domxref("window.frames")}}.</dd>
+ <dt>{{domxref("Window.location")}} {{ReadOnlyInline}}</dt>
+ <dd>Gets/sets the location, or current URL, of the window object.</dd>
+ <dt>{{domxref("Window.locationbar")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns the locationbar object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.localStorage")}} {{readOnlyInline}}{{gecko_minversion_inline("1.9.1")}}</dt>
+ <dd>Returns a reference to the local storage object used to store data that may only be accessed by the origin that created it.</dd>
+ <dt>{{domxref("Window.menubar")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns the menubar object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.messageManager")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Returns the <a href="/en-US/docs/The_message_manager">message manager</a> object for this window.</dd>
+ <dt>{{domxref("Window.mozAnimationStartTime")}} {{ReadOnlyInline}}{{gecko_minversion_inline("2.0")}}</dt>
+ <dd>The time in milliseconds since epoch at which the current animation cycle began.</dd>
+ <dt>{{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}}{{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>Returns the horizontal (X) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See <code>mozScreenPixelsPerCSSPixel</code> in {{interface("nsIDOMWindowUtils")}} for a conversion factor to adapt to screen pixels if needed.</dd>
+ <dt>{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>Returns the vertical (Y) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See <code>mozScreenPixelsPerCSSPixel</code> for a conversion factor to adapt to screen pixels if needed.</dd>
+ <dt>{{domxref("Window.mozPaintCount")}} {{non-standard_inline}}{{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Returns the number of times the current document has been rendered to the screen in this window. This can be used to compute rendering performance.</dd>
+ <dt>{{domxref("Window.name")}}</dt>
+ <dd>Gets/sets the name of the window.</dd>
+ <dt>{{domxref("Window.navigator")}} {{readOnlyInline}}</dt>
+ <dd>Returns a reference to the navigator object.</dd>
+ <dt>{{domxref("Window.opener")}}</dt>
+ <dd>Returns a reference to the window that opened this current window.</dd>
+ <dt>{{domxref("Window.outerHeight")}} {{readOnlyInline}}</dt>
+ <dd>Gets the height of the outside of the browser window.</dd>
+ <dt>{{domxref("Window.outerWidth")}} {{readOnlyInline}}</dt>
+ <dd>Gets the width of the outside of the browser window.</dd>
+ <dt>{{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}</dt>
+ <dd>An alias for {{domxref("window.scrollX")}}.</dd>
+ <dt>{{domxref("Window.scrollY","Window.pageYOffset")}}{{readOnlyInline}}</dt>
+ <dd>An alias for {{domxref("window.scrollY")}}</dd>
+ <dt>{{domxref("Window.sessionStorage")}} {{readOnlyInline}}</dt>
+ <dd>Returns a reference to the session storage object used to store data that may only be accessed by the origin that created it.</dd>
+ <dt>{{domxref("SpeechSynthesisGetter.speechSynthesis")}} {{readOnlyInline}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("Window.parent")}} {{readOnlyInline}}</dt>
+ <dd>Returns a reference to the parent of the current window or subframe.</dd>
+ <dt>{{domxref("Window.performance")}} {{readOnlyInline}}</dt>
+ <dd>Provides a hosting area for <a href="/en-US/docs/Navigation_timing">performance related</a> attributes.</dd>
+ <dt>{{domxref("Window.personalbar")}} {{readOnlyInline}}</dt>
+ <dd>Returns the personalbar object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.pkcs11")}} {{obsolete_inline(29)}}</dt>
+ <dd>Formerly provided access to install and remove PKCS11 modules.</dd>
+ <dt>{{domxref("Window.returnValue")}} {{Fx_minversion_inline(3)}}</dt>
+ <dd>The return value to be returned to the function that called {{domxref("window.showModalDialog()")}} to display the window as a modal dialog.</dd>
+ <dt>{{domxref("Window.screen")}} {{readOnlyInline}}</dt>
+ <dd>Returns a reference to the screen object associated with the window.</dd>
+ <dt>{{domxref("Window.screenX")}} {{readOnlyInline}}</dt>
+ <dd>Returns the horizontal distance of the left border of the user's browser from the left side of the screen.</dd>
+ <dt>{{domxref("Window.screenY")}} {{readOnlyInline}}</dt>
+ <dd>Returns the vertical distance of the top border of the user's browser from the top side of the screen.</dd>
+ <dt>{{domxref("Window.scrollbars")}} {{readOnlyInline}}</dt>
+ <dd>Returns the scrollbars object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.scrollMaxX")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>The maximum offset that the window can be scrolled to horizontally, that is the document width minus the viewport width.</dd>
+ <dt>{{domxref("Window.scrollMaxY")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>The maximum offset that the window can be scrolled to vertically (i.e., the document height minus the viewport height).</dd>
+ <dt>{{domxref("Window.scrollX")}} {{readOnlyInline}}</dt>
+ <dd>Returns the number of pixels that the document has already been scrolled horizontally.</dd>
+ <dt>{{domxref("Window.scrollY")}} {{readOnlyInline}}</dt>
+ <dd>Returns the number of pixels that the document has already been scrolled vertically.</dd>
+ <dt>{{domxref("Window.self")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns an object reference to the window object itself.</dd>
+ <dt>{{domxref("Window.sessionStorage")}} {{Fx_minversion_inline("2.0")}}</dt>
+ <dd>Returns a storage object for storing data within a single page session.</dd>
+ <dt>{{domxref("Window.sidebar")}} {{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Returns a reference to the window object of the sidebar.</dd>
+ <dt>{{domxref("Window.status")}}</dt>
+ <dd>Gets/sets the text in the statusbar at the bottom of the browser.</dd>
+ <dt>{{domxref("Window.statusbar")}} {{readOnlyInline}}</dt>
+ <dd>Returns the statusbar object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.toolbar")}} {{readOnlyInline}}</dt>
+ <dd>Returns the toolbar object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.top")}} {{readOnlyInline}}</dt>
+ <dd>Returns a reference to the topmost window in the window hierarchy. This property is read only.</dd>
+ <dt>{{domxref("Window.window")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns a reference to the current window.</dd>
+ <dt><code>window[0]</code>,<code> window[1]</code>, etc.</dt>
+ <dd>Returns a reference to the <code>window</code> object in the frames. See {{domxref("Window.frames")}} for more details.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface inherits methods from the {{domxref("EventTarget")}} interface and implements methods from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("EventTarget.addEventListener()")}}</dt>
+ <dd>Register an event handler to a specific event type on the window.</dd>
+ <dt>{{domxref("Window.alert()")}}</dt>
+ <dd>Displays an alert dialog.</dd>
+ <dt>{{domxref("WindowBase64.atob()")}}</dt>
+ <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd>
+ <dt>{{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Moves back one in the window history.</dd>
+ <dt>{{domxref("Window.blur()")}}</dt>
+ <dd>Sets focus away from the window.</dd>
+ <dt>{{domxref("WindowBase64.btoa()")}}</dt>
+ <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd>
+ <dt>{{domxref("Window.captureEvents()")}} {{Deprecated_inline}}</dt>
+ <dd>Registers the window to capture all events of the specified type.</dd>
+ <dt>{{domxref("Window.clearImmediate()")}}</dt>
+ <dd>Cancels the repeated execution set using <code>setImmediate</code>.</dd>
+ <dt>{{domxref("WindowTimers.clearInterval()")}}</dt>
+ <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.</dd>
+ <dt>{{domxref("WindowTimers.clearTimeout()")}}</dt>
+ <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}.</dd>
+ <dt>{{domxref("Window.close()")}}</dt>
+ <dd>Closes the current window.</dd>
+ <dt>{{domxref("Window.confirm()")}}</dt>
+ <dd>Displays a dialog with a message that the user needs to respond to.</dd>
+ <dt>{{domxref("Window.disableExternalCapture()")}} {{obsolete_inline(24)}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.dispatchEvent()")}}</dt>
+ <dd>Used to trigger an event.</dd>
+ <dt>{{domxref("Window.dump()")}}</dt>
+ <dd>Writes a message to the console.</dd>
+ <dt>{{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.find()")}}</dt>
+ <dd>Searches for a given string in a window.</dd>
+ <dt>{{domxref("Window.focus()")}}</dt>
+ <dd>Sets focus on the current window.</dd>
+ <dt>{{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Moves the window one document forward in the history.</dd>
+ <dt>{{domxref("Window.getAttention()")}}</dt>
+ <dd>Flashes the application icon.</dd>
+ <dt>{{domxref("Window.getAttentionWithCycleCount()")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.getComputedStyle()")}}</dt>
+ <dd>Gets computed style for the specified element. Computed style indicates the computed values of all CSS properties of the element.</dd>
+ <dt>{{domxref("Window.getDefaulComputedStyle()")}}</dt>
+ <dd>Gets default computed style for the specified element, ignoring author stylesheets.</dd>
+ <dt>{{domxref("Window.getSelection()")}}</dt>
+ <dd>Returns the selection object representing the selected item(s).</dd>
+ <dt>{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Returns the browser to the home page.</dd>
+ <dt>{{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}}</dt>
+ <dd>Returns a {{domxref("MediaQueryList")}} object representing the specified media query string.</dd>
+ <dt>{{domxref("Window.maximize()")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.minimize()")}} (top-level XUL windows only)</dt>
+ <dd>Minimizes the window.</dd>
+ <dt>{{domxref("Window.moveBy()")}}</dt>
+ <dd>Moves the current window by a specified amount.</dd>
+ <dt>{{domxref("Window.moveTo()")}}</dt>
+ <dd>Moves the window to the specified coordinates.</dd>
+ <dt>{{domxref("Window.mozRequestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Tells the browser that an animation is in progress, requesting that the browser schedule a repaint of the window for the next animation frame. This will cause a <code>MozBeforePaint</code> event to fire before that repaint occurs.</dd>
+ <dt>{{domxref("Window.open()")}}</dt>
+ <dd>Opens a new window.</dd>
+ <dt>{{domxref("Window.openDialog()")}}</dt>
+ <dd>Opens a new dialog window.</dd>
+ <dt>{{domxref("Window.postMessage()")}} {{Fx_minversion_inline(3)}}</dt>
+ <dd>Provides a secure means for one window to send a string of data to another window, which need not be within the same domain as the first.</dd>
+ <dt>{{domxref("Window.print()")}}</dt>
+ <dd>Opens the Print Dialog to print the current document.</dd>
+ <dt>{{domxref("Window.prompt()")}}</dt>
+ <dd>Returns the text entered by the user in a prompt dialog.</dd>
+ <dt>{{domxref("Window.releaseEvents()")}} {{Deprecated_inline}}</dt>
+ <dd>Releases the window from trapping events of a specific type.</dd>
+ <dt>{{domxref("element.removeEventListener","Window.removeEventListener()")}}</dt>
+ <dd>Removes an event listener from the window.</dd>
+ <dt>{{domxref("Window.resizeBy()")}}</dt>
+ <dd>Resizes the current window by a certain amount.</dd>
+ <dt>{{domxref("Window.resizeTo()")}}</dt>
+ <dd>Dynamically resizes window.</dd>
+ <dt>{{domxref("Window.restore()")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.routeEvent()")}} {{obsolete_inline(24)}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.scroll()")}}</dt>
+ <dd>Scrolls the window to a particular place in the document.</dd>
+ <dt>{{domxref("Window.scrollBy()")}}</dt>
+ <dd>Scrolls the document in the window by the given amount.</dd>
+ <dt>{{domxref("Window.scrollByLines()")}}</dt>
+ <dd>Scrolls the document by the given number of lines.</dd>
+ <dt>{{domxref("Window.scrollByPages()")}}</dt>
+ <dd>Scrolls the current document by the specified number of pages.</dd>
+ <dt>{{domxref("Window.scrollTo()")}}</dt>
+ <dd>Scrolls to a particular set of coordinates in the document.</dd>
+ <dt>{{domxref("Window.setCursor()")}}</dt>
+ <dd>Changes the cursor for the current window</dd>
+ <dt>{{domxref("Window.setImmediate()")}}</dt>
+ <dd>Executes a function after the browser has finished other heavy tasks</dd>
+ <dt>{{domxref("WindowTimers.setInterval()")}}</dt>
+ <dd>Schedules the execution of a function each X milliseconds.</dd>
+ <dt>{{domxref("Window.setResizable")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("WindowTimers.setTimeout()")}}</dt>
+ <dd>Sets a delay for executing a function.</dd>
+ <dt>{{domxref("Window.showModalDialog()")}} {{Fx_minversion_inline(3)}}</dt>
+ <dd>Displays a modal dialog.</dd>
+ <dt>{{domxref("Window.sizeToContent()")}}</dt>
+ <dd>Sizes the window according to its content.</dd>
+ <dt>{{domxref("Window.stop()")}}</dt>
+ <dd>This method stops window loading.</dd>
+ <dt>{{domxref("Window.updateCommands()")}}</dt>
+ <dd>Updates the state of commands of the current chrome window (UI).</dd>
+</dl>
+
+<h2 id="Event_handlers">Event handlers</h2>
+
+<p>These are properties of the window object that can be set to establish event handlers for the various things that can happen in the window that might be of interest.</p>
+
+<p><em>This interface inherits event handlers from the {{domxref("EventTarget")}} interface and implements event handlers from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}.</em></p>
+
+<div class="note">
+<p><strong>Note:</strong> Starting in {{Gecko("9.0")}}, you can now use the syntax <code>if ("onabort" in window)</code> to determine whether or not a given event handler property exists. This is because event handler interfaces have been updated to be proper web IDL interfaces. See <a href="/en-US/docs/DOM/DOM_event_handlers">DOM event handlers</a> for details.</p>
+</div>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt>
+ <dd>An event handler property for abort events on the window.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt>
+ <dd>An event handler property for before-unload events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt>
+ <dd>An event handler property for blur events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt>
+ <dd>An event handler property for change events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt>
+ <dd>An event handler property for click events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt>
+ <dd>An event handler property for handling the window close event.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt>
+ <dd>An event handler property for right-click events on the window.</dd>
+ <dt>{{domxref("Window.ondevicelight")}}</dt>
+ <dd>An event handler property for any ambient light levels changes</dd>
+ <dt>{{domxref("Window.ondevicemotion")}} {{gecko_minversion_inline("6.0")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}}</dt>
+ <dd>An event handler property for any device orientation changes</dd>
+ <dt>{{domxref("Window.ondeviceproximity")}}</dt>
+ <dd>An event handler property for device proximity event</dd>
+ <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt>
+ <dd>An event handler property for {{event("error")}} events raised on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt>
+ <dd>An event handler property for {{event("focus")}} events on the window.</dd>
+ <dt>{{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>An event handler property for hash change events on the window; called when the part of the URL after the hash mark ("#") changes.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt>
+ <dd>An event handler property for {{event("keydown")}} events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt>
+ <dd>An event handler property for {{event("keypress")}} events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt>
+ <dd>An event handler property for {{event("keyup")}} events on the window.</dd>
+ <dt>{{domxref("WindowEventHandlers.onlanguagechange")}}</dt>
+ <dd>An event handler property for {{event("languagechange")}} events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onload")}}</dt>
+ <dd>An event handler property for window loading.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt>
+ <dd>An event handler property for mousedown events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt>
+ <dd>An event handler property for mousemove events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt>
+ <dd>An event handler property for mouseout events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt>
+ <dd>An event handler property for mouseover events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt>
+ <dd>An event handler property for mouseup events on the window.</dd>
+ <dt>{{domxref("Window.onmozbeforepaint")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>An event handler property for the <code>MozBeforePaint</code> event, which is sent before repainting the window if the event has been requested by a call to the {{domxref("Window.mozRequestAnimationFrame()")}} method.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt>
+ <dd>An event handler property for pageshow events on the window.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt>
+ <dd>An event handler property for pagehide events on the window.</dd>
+ <dt>{{domxref("Window.onpaint")}}</dt>
+ <dd>An event handler property for paint events on the window.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpopstate")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>An event handler property for popstate events, which are fired when navigating to a session history entry representing a state object.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt>
+ <dd>An event handler property for reset events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onresize")}}</dt>
+ <dd>An event handler property for window resizing.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt>
+ <dd>An event handler property for window scrolling.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt>
+ <dd>An event handler property for window selection.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt>
+ <dd>An event handler property for submits on window forms.</dd>
+ <dt>{{domxref("Window.onunload")}}</dt>
+ <dd>An event handler property for unload events on the window.</dd>
+ <dt>{{domxref("Window.onuserproximity")}}</dt>
+ <dd>An event handler property for user proximity events</dd>
+</dl>
+
+<h2 id="Constructors">Constructors</h2>
+
+<p>See also the <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Interfaces</a>.</p>
+
+<dl>
+ <dt>{{domxref("Window.DOMParser")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.GeckoActiveXObject")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Image")}}</dt>
+ <dd>Used for creating an {{domxref("HTMLImageElement")}}.</dd>
+ <dt>{{domxref("Option")}}</dt>
+ <dd>Used for creating an {{domxref("HTMLOptionElement")}}</dd>
+ <dt>{{domxref("Window.QueryInterface")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.XMLSerializer")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Worker")}}</dt>
+ <dd>Used for creating a <a href="/en-US/docs/DOM/Using_web_workers">Web worker</a></dd>
+ <dt>{{domxref("Window.XPCNativeWrapper")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.XPCSafeJSObjectWrapper")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+</dl>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<p>See <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Reference</a></p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Working_with_windows_in_chrome_code">Working with windows in chrome code</a></li>
+</ul>
diff --git a/files/de/web/api/window/length/index.html b/files/de/web/api/window/length/index.html
new file mode 100644
index 0000000000..202c83237d
--- /dev/null
+++ b/files/de/web/api/window/length/index.html
@@ -0,0 +1,51 @@
+---
+title: Window.length
+slug: Web/API/Window/length
+translation_of: Web/API/Window/length
+---
+<div>{{ ApiRef() }}</div>
+
+<p>Liefert die Anzahl an Frames ({{HTMLElement("frame")}} oder {{HTMLElement("iframe")}} elements) im aktuellen Fenster.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>framesCount</em> = window.length;
+</pre>
+
+<ul>
+ <li><code>framesCount</code> ist die Anzahl an Frames.</li>
+</ul>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush:js">if (window.length) {
+  // this is a document with subframes
+}</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','browsers.html#dom-length','Window.length')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-length', 'Window.length')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("api.Window.length")}}</p>
diff --git a/files/de/web/api/window/localstorage/index.html b/files/de/web/api/window/localstorage/index.html
new file mode 100644
index 0000000000..5395a7985f
--- /dev/null
+++ b/files/de/web/api/window/localstorage/index.html
@@ -0,0 +1,81 @@
+---
+title: Window.localStorage
+slug: Web/API/Window/localStorage
+tags:
+  - API
+  - Storage
+  - Web Storage
+  - Web Storage API
+  - Window
+  - localStorage
+translation_of: Web/API/Window/localStorage
+---
+<p>{{APIRef()}}</p>
+
+<p>Die <code>localStorage</code>-Eigenschaft erlaubt den Zugriff auf ein lokales {{domxref("Storage")}}-Objekt. <code>localStorage</code> ist mit einer Ausnahme identisch zu <code><a href="/en-US/docs/Web/API/Window.sessionStorage">sessionStorage</a></code>: Im Unterschied zu letzterem besitzen in <code>localStorage</code> gespeicherte Daten kein Verfallsdatum, während sie im <code>sessionStorage</code> mit Ablauf der <code>session</code>, in der Regel beim Schließen des Browsers, gelöscht werden.</p>
+
+<p><code>localStorage</code> und <code>sessionStorage</code> sind nicht nur von der Domain, sondern auch vom Protokoll abhängig, über das die Seite aufgerufen wurde. In http://example.com/ gespeicherte Daten stehen daher unter https://example.com <em>nicht</em> zur Verfügung.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">myStorage = localStorage;</pre>
+
+<h3 id="Wert">Wert</h3>
+
+<p>Ein {{domxref("Storage")}}-Objekt.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Der folgende Ausschnitt greift auf das lokale {{domxref("Storage")}}-Objekt der aktuellen Domain zu und fügt ihm mit {{domxref("Storage.setItem()")}} einen Eintrag hinzu.</p>
+
+<pre class="brush: js">localStorage.setItem('myCat', 'Tom');</pre>
+
+<p>Die Syntax für das Auslesen eines Eintrages aus dem localStore lautet:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> cat <span class="operator token">=</span> localStorage<span class="punctuation token">.</span><span class="function token">getItem</span><span class="punctuation token">(</span><span class="string token">'myCat'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Die Syntax um einen Eintrag zu entfernen lautet:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">localStorage<span class="punctuation token">.</span><span class="function token">removeItem</span><span class="punctuation token">(</span><span class="string token">'myCat'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Die Syntax um alle Einträge zu löschen lautet:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">localStorage<span class="punctuation token">.</span><span class="function token">clear</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Ausführliche Beispiele sind im Artikel <a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a> nachzulesen.</p>
+</div>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Storage', '#dom-localstorage', 'localStorage')}}</td>
+   <td>{{Spec2('Web Storage')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Window.localStorage")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></li>
+ <li>{{domxref("LocalStorage")}}</li>
+ <li>{{domxref("SessionStorage")}}</li>
+ <li>{{domxref("Window.sessionStorage")}}</li>
+</ul>
diff --git a/files/de/web/api/window/name/index.html b/files/de/web/api/window/name/index.html
new file mode 100644
index 0000000000..f6d3ec5b97
--- /dev/null
+++ b/files/de/web/api/window/name/index.html
@@ -0,0 +1,57 @@
+---
+title: Window.name
+slug: Web/API/Window/name
+tags:
+  - API
+translation_of: Web/API/Window/name
+---
+<div>{{APIRef}}</div>
+
+<p class="summary"><span class="seoSummary">Holt oder setzt den Namen des Fensters.</span></p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>string</var> = window.name;
+window.name = <var>string</var>;
+</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush:js">window.name = "lab_view";
+</pre>
+
+<h2 id="Hinweise">Hinweise</h2>
+
+<p>Der Name von Fenstern wird hauptsächlich als Ziel von Hyperlinks und Formularen verwendet. Fenster benötigen grundsätzlich keinen Namen.</p>
+
+<p><code>window.name</code> wurde auch in Frameworks verwendet um Domain-übergreifend zu kommunizieren (z.B. mit <a href="http://www.thomasfrank.se/sessionvars.html">SessionVars</a> oder Dojo's <a href="https://www.sitepen.com/blog/2008/07/22/windowname-transport/">dojox.io.windowName</a>) als sicherere Alternative JSONP. Moderne Webanwendungen sollten sich jedoch nicht auf <code>window.name</code> verlassen, sondern die <a href="/en-US/docs/Web/API/Window/postMessage">postMessage API</a> verwenden.</p>
+
+<p><code>window.name</code> konvertiert alle Werte zu ihre String-Repräsentation durch die Verwendung ihrer <code>toString</code> Methode.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'browsers.html#dom-name', 'Window.name')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-name', 'Window.name')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("api.Window.name")}}</p>
diff --git a/files/de/web/api/window/navigator/index.html b/files/de/web/api/window/navigator/index.html
new file mode 100644
index 0000000000..5e9289f088
--- /dev/null
+++ b/files/de/web/api/window/navigator/index.html
@@ -0,0 +1,98 @@
+---
+title: Window.navigator
+slug: Web/API/Window/navigator
+tags:
+  - API
+  - HTML DOM
+  - Property
+  - Read-only
+  - Reference
+  - Window
+translation_of: Web/API/Window/navigator
+---
+<div>{{APIRef}}</div>
+
+<p>Die Schreibgeschützte<code> Window.navigator</code> Eigenschaft liefert eine Referenz des {{domxref("Navigator")}} Objekts, das Informationen über die Anwendung die das Skript ausführt liefern kann.</p>
+
+<h2 id="Example" name="Example">Syntax</h2>
+
+<pre class="syntaxbox"><em>navigatorObject<code> = window.navigator</code></em></pre>
+
+<h2 id="Specification" name="Specification">Beispiele</h2>
+
+<h3 id="Beispiel_1_Browsererkennung_und_Ausgabe_eines_Texts.">Beispiel #1: Browsererkennung und Ausgabe eines Texts.</h3>
+
+<pre><code>var sBrowser, sUsrAg = navigator.userAgent;
+
+// The order matters here, and this may report false positives for unlisted browsers.
+
+if (sUsrAg.indexOf("Firefox") &gt; -1) {
+  sBrowser = "Mozilla Firefox";
+  // "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0"
+} else if (sUsrAg.indexOf("Opera") &gt; -1 || sUsrAg.indexOf("OPR") &gt; -1) {
+  sBrowser = "Opera";
+  //"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 OPR/57.0.3098.106"
+} else if (sUsrAg.indexOf("Trident") &gt; -1) {
+  sBrowser = "Microsoft Internet Explorer";
+  // "Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; Zoom 3.6.0; wbx 1.0.0; rv:11.0) like Gecko"
+} else if (sUsrAg.indexOf("Edge") &gt; -1) {
+  sBrowser = "Microsoft Edge";
+  // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299"
+} else if (sUsrAg.indexOf("Chrome") &gt; -1) {
+  sBrowser = "Google Chrome or Chromium";
+  // "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/66.0.3359.181 Chrome/66.0.3359.181 Safari/537.36"
+} else if (sUsrAg.indexOf("Safari") &gt; -1) {
+  sBrowser = "Apple Safari";
+  // "Mozilla/5.0 (iPhone; CPU iPhone OS 11_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.0 Mobile/15E148 Safari/604.1 980x1306"
+} else {
+  sBrowser = "unknown";
+}
+
+alert("Sie verwenden: " + sBrowser);</code></pre>
+
+<h3 id="Beispiel_2_Browsererkennung_und_Rückgabe_eines_Index.">Beispiel #2: Browsererkennung und Rückgabe eines Index.</h3>
+
+<pre><code>function getBrowserId () {
+  var aKeys = ["MSIE", "Firefox", "Safari", "Chrome", "Opera"],
+      sUsrAg = navigator.userAgent,
+      nIdx = aKeys.length - 1;
+
+  for (nIdx; nIdx &gt; -1 &amp;&amp; sUsrAg.indexOf(aKeys[nIdx]) === -1; nIdx--);
+
+  return nIdx;
+}
+
+console.log(getBrowserId());</code></pre>
+
+<h2 id="Specification" name="Specification">Spezifikation</h2>
+
+
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-navigator', 'Window: navigator')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td><br>
+     </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also"><br>
+ Browserkompatibilität</h2>
+
+
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Window.navigator")}}</p>
diff --git a/files/de/web/api/window/ondevicemotion/index.html b/files/de/web/api/window/ondevicemotion/index.html
new file mode 100644
index 0000000000..0e39638929
--- /dev/null
+++ b/files/de/web/api/window/ondevicemotion/index.html
@@ -0,0 +1,56 @@
+---
+title: Window.ondevicemotion
+slug: Web/API/Window/ondevicemotion
+tags:
+  - API
+  - Ausrichtung
+  - Beschleunigungssensor
+  - Bewegung
+  - Eigenschaft
+  - Firefox OS
+  - Geräteausrichtung
+translation_of: Web/API/Window/ondevicemotion
+---
+<p>{{ ApiRef() }}</p>
+
+<h2 id="Summary" name="Summary">Zusammenfassung</h2>
+
+<p>Ein Eventhandler für das {{ event("devicemotion")}} Event, welches an das Fenster gesendet wird.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre>window.ondevicemotion = funcRef;
+</pre>
+
+<p>Die Funktion <code>funcRef</code> ist eine Referenz für eine Funktion. Diese Funktion erhält ein {{ domxref("DeviceMotionEvent") }} Objekt, welches die aufgetretene Bewegung beschreibt.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Device Orientation')}}</td>
+   <td>{{Spec2('Device Orientation')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{ page("/en-US/docs/Web/API/DeviceMotionEvent","Browser_compatibility") }}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{ event("devicemotion") }}</li>
+ <li>{{ domxref("DeviceMotionEvent") }}</li>
+ <li><a href="/en-US/docs/Web/API/Detecting_device_orientation" title="Detecting device orientation">Detecting device orientation</a></li>
+</ul>
diff --git a/files/de/web/api/window/opendialog/index.html b/files/de/web/api/window/opendialog/index.html
new file mode 100644
index 0000000000..2dbd0587c5
--- /dev/null
+++ b/files/de/web/api/window/opendialog/index.html
@@ -0,0 +1,90 @@
+---
+title: Window.openDialog()
+slug: Web/API/Window/openDialog
+translation_of: Web/API/Window/openDialog
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="Summary" name="Summary">Zusammenfassung</h3>
+
+<p><code>window.openDialog</code> ist eine Erweiterung von <a href="/en/DOM/window.open" title="en/DOM/window.open">window.open</a>. Es ist fast das gleiche, ausser das optional nach <code>windowFeatures</code> zusätzliche Parameter angegeben werden können, und <code>windowFeatures</code> selber wird ein bisschen anders behandelt.</p>
+
+<p>Die optionalen Parameter, wenn vorhanden, werden zu einem JavaScript Array gebündelt und zum neu geöffneten Fenster hinzugefügt als eine Eigenschaft namens <a href="/en/DOM/window.arguments" title="en/DOM/window.arguments">window.arguments</a>. Sie können jederzeit im JavaScript des Fensters verwendet werden, auch während der ausführung eines <code>load</code> handler. Diese Parameter können dafür benutzt werden, um in beide Richtungen Daten mit dem Dialogfenster auszutauschen.</p>
+
+<p>Beachten sie, das nach dem Aufruf von <code>openDialog()</code> sofort weitergefahren wird. Wenn Sie wollen, dass der Aufruf blockiert bis der Benutzer den Dialog schliesst, geben sie <code>modal</code> als <code>windowFeatures</code> Parameter an. Beachten sie, dass der Benutzer das opener window nicht bedienen kann, bis er den Dialog schliesst.</p>
+
+<h3 id="Syntax" name="Syntax">Syntax</h3>
+
+<pre class="eval notranslate"><em>newWindow</em> = openDialog(<em>url</em>, <em>name</em>, <em>features</em>, <em>arg1</em>, <em>arg2</em>, ...)
+</pre>
+
+<dl>
+ <dt>newWindow </dt>
+ <dd>Das geöffnete Fenster</dd>
+ <dt>url </dt>
+ <dd>Die URL, die im neu geöffneten Fenster geladen wird.</dd>
+ <dt>name </dt>
+ <dd>Der Name des Fensters (optional). Siehe <a href="/en/DOM/window.open" title="en/DOM/window.open">window.open</a> für detailierte Informationen.</dd>
+ <dt>features </dt>
+ <dd>Siehe <a href="/en/DOM/window.open" title="en/DOM/window.open">window.open</a>.</dd>
+ <dt>arg1, arg2, ... </dt>
+ <dd>Die Argumente, die dem neuen Fenster gegeben werden (optional).</dd>
+</dl>
+
+<h3 id="Example" name="Example">Beispiel</h3>
+
+<pre class="eval notranslate">var win = openDialog("<span class="nowiki">http://example.tld/zzz.xul</span>", "dlg", "", "pizza", 6.98);
+</pre>
+
+<h3 id="Notes" name="Notes">Zu beachten</h3>
+
+<h4 id="New_Features" name="New_Features">Neue Features</h4>
+
+<p><code>all</code> - Aktiviert (oder deaktiviert <code>("all=no")</code>) anfangs alles chrome (ausser die behaviour flags <code>chrome</code>, <code>dialog</code> und <code>modal</code>). Diese können überschrieben werden (z.B. <code>"menubar=no,all"</code> schaltet alles chrome ein ausser die Menüleiste.) Dieses Feature wird explizirt ignoriert von <a href="/en/DOM/window.open" title="en/DOM/window.open">window.open</a>. <code>Für window.openDialog</code> ist es nützlich wegen unterschiedlichem Standardverhalten.</p>
+
+<h4 id="Default_behaviour" name="Default_behaviour">Standardverhalten</h4>
+
+<p>Die window Features <code>chrome</code> und <code>dialog</code>  sind immer eingeschaltet, ausser sie werden explizit ausgeschaltet ("<code>chrome=no</code>"). <code>openDialog</code> behandelt einen nicht vorhandenen features Parameter gleich wie <a href="/en/DOM/window.open" title="en/DOM/window.open">window.open</a>, (ein leerer String schaltet alle Features aus) ausser <code>chrome</code> und <code>dialog</code>, welche standartmässig eingeschaltet sind. Wenn der <code>features</code> Parameter ein leerer String ist, oder nur behaviour features (<code>chrome</code>, <code>dependent</code>, <code>dialog</code> und <code>modal</code>) enthält, werden die chrome features nach der "OS' choice" ausgewählt. Das heisst, der window creation code erhält keine spezifischen Anweisungen, kann dafür das chrome auswählen, das am besten zu einem Dialog auf diesem operating system passt.</p>
+
+<h4 id="Passing_extra_parameters_to_the_dialog" name="Passing_extra_parameters_to_the_dialog">Zusätzliche Parameter zum Dialog hinzufügen</h4>
+
+<p>Um dem Fenster zusätzliche Parameter hinzuzufügen, können Sie diese einfach nach dem <code>windowFeatures</code> parameter einfügen:</p>
+
+<pre class="eval notranslate">openDialog("<span class="nowiki">http://example.tld/zzz.xul</span>", "dlg", "", "pizza", 6.98);
+</pre>
+
+<p>Die zusätzlichen Parameter werden dann in eine Eigenschaft gepackt namens <code>arguments</code> mit dem Typ <a href="/en/Core_JavaScript_1.5_Reference/Global_Objects/Array" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Array">Array</a>, und diese Eigenschaft wird dem neu erzeugten Fenster hinzugefügt.</p>
+
+<p>Benützen Sie dieses Schema, um im Code des Dialogs auf diese zusätzlichen Parameter zuzugreifen:</p>
+
+<pre class="eval notranslate">var food  = window.arguments[0];
+var price = window.arguments[1];
+</pre>
+
+<p>Beachten Sie, dass Sie überall im Code des Dialogs auf diese Eigenschaft zugreiffen können. (<a href="/en/Code_snippets/Dialogs_and_Prompts#Passing_arguments_and_displaying_a_dialog" title="en/Code_snippets/Dialogs_and_Prompts#Passing_arguments_and_displaying_a_dialog">Anderes Beispiel</a>).</p>
+
+<h4 id="Returning_values_from_the_dialog" name="Returning_values_from_the_dialog">Werte vom Dialog zurückerhalten</h4>
+
+<p>Weil <code>window.close()</code> alle Eigenschaften des Dialogfensters löscht (d.h. die Variablen vom JavaScript des Dialogs), ist es nicht möglich, mit globalen Variablen (oder anderen Konstrukten) nach dem Schliessen Werte zurückzugeben.</p>
+
+<p>Um Werte zum Aufrufer zurückzugeben, müssen Sie ein Objekt mit den zusätzlichen Parametern übergeben. Sie können im Code des Dialogs auf dieses Objekt zugreiffen und Eigenschaften setzen, welche die Werte enthalten, die Sie zurückgeben wollen oder die Sie auch nach <code>window.close() </code>behalten wollen.</p>
+
+<pre class="eval notranslate">var retVals = { address: null, delivery: null };
+openDialog("<span class="nowiki">http://example.tld/zzz.xul</span>", "dlg", "modal", "pizza", 6.98, retVals);
+</pre>
+
+<p>Wenn Sie im Dialog die Eigenschaften von <code>retVals</code> im Code des Dialogs setzen wie unten beschrieben, können Sie über <code>retVals</code> auf sie zugreiffen nach dem der Aufruf von <code>openDialog()</code> zurückkommt.</p>
+
+<p>Im JavaScript des Dialogs können Sie wie folgt auf die Eigenschaften zugreiffen:</p>
+
+<pre class="eval notranslate">var retVals = window.arguments[2];
+retVals.address  = enteredAddress;
+retVals.delivery = "immediate";
+</pre>
+
+<p>Siehe auch hier. (<a href="/en/Code_snippets/Dialogs_and_Prompts#Passing_arguments_and_displaying_a_dialog" title="en/Code_snippets/Dialogs_and_Prompts#Passing_arguments_and_displaying_a_dialog">anderes Beispiel</a>).<br>
+ Siehe auch window.importDialog (mobile).</p>
+
+<h3 id="Specification" name="Specification">Spezifikation</h3>
+
+<p>{{ DOM0() }}</p>
diff --git a/files/de/web/api/window/opener/index.html b/files/de/web/api/window/opener/index.html
new file mode 100644
index 0000000000..32301159ce
--- /dev/null
+++ b/files/de/web/api/window/opener/index.html
@@ -0,0 +1,28 @@
+---
+title: Window.opener
+slug: Web/API/Window/opener
+translation_of: Web/API/Window/opener
+---
+<div>{{APIRef}}</div>
+
+<h2 id="Summary" name="Summary">Zusammenfassung</h2>
+
+<p>Gibt einen Hinweis auf das Fenster, welches das aktuelle Fenster öffnete.</p>
+
+<h2 id="Syntax" name="Syntax">Schreibweise</h2>
+
+<pre class="syntaxbox"><var>objRef</var> = window.opener;
+</pre>
+
+<h2 id="Example" name="Example">Beispiel</h2>
+
+<pre class="brush:js">if (window.opener != indexWin) {
+  referToTop(window.opener);
+}
+</pre>
+
+<h2 id="Notes" name="Notes">Bemerkungen</h2>
+
+<p>Öffnet man ein Fenster aus einem anderen Fenster heraus (mittels {{domxref("Window.open")}} oder target='_blank'), wird im neuen Fenster ein Bezug auf das ursprüngliche Fenster mit <strong>window.opener</strong> aufrecht erhalten. Wurde das aktuelle Fenster nicht aus einem anderen Fenster geöffnet, wird <span style="line-height: 1.5;">NULL ausgegeben. </span></p>
+
+<p><span style="line-height: 1.5;">Der Browser in </span> <span style="line-height: 1.5;">Windows Smartphones unterstützt </span><span style="line-height: 1.5;">window.opener nicht (getestet mit Microsoft Edge 25.10586.36.0). Auch im Internet Explorer gibt es keine Unterstützung, wenn die Aktivität von einer anderen Sicherheitszone ausgeht. </span></p>
diff --git a/files/de/web/api/window/performance/index.html b/files/de/web/api/window/performance/index.html
new file mode 100644
index 0000000000..7805b7b019
--- /dev/null
+++ b/files/de/web/api/window/performance/index.html
@@ -0,0 +1,96 @@
+---
+title: Window.performance
+slug: Web/API/Window/performance
+tags:
+  - Performanz
+  - Timing
+translation_of: Web/API/Window/performance
+---
+<div>{{APIRef("High Resolution Time")}}</div>
+
+<p>Die Eigenschaft <strong><code>performance </code></strong>der {{domxref("Window")}} Schnittstelle  gibt ein {{domxref("Performance")}} Objekt zurück, welches benutzt werden kann, um Performanz-Informationen über das aktuelle Dokument zu sammeln. Sie dient als Bereitstellungspunkt für die Performance Timeline API, die High Resolution Time API, die <a href="/en-US/docs/Web/API/Navigation_timing_API">Navigation Timing API</a>, die <a href="/en-US/docs/Web/API/User_Timing_API">User Timing API</a>, und die <a href="/en-US/docs/Web/API/Resource_Timing_API">Resource Timing API</a>.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>performanceData</em> = window.performance;</pre>
+
+<h3 id="Wert">Wert</h3>
+
+<p>Ein {{domxref("Performance")}}-Objekt bietet Zugriff auf Performanz- und Timing-Informationen, die von den APIs, welche es offen legt, bereit gestellt werden.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Highres Time', '#the-performance-interface', 'window.performance')}}</td>
+   <td>{{Spec2('Highres Time')}}</td>
+   <td>Definiert die <code>now()</code> Methode.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompabilität">Browserkompabilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Grundsätzliche Unterstützung</td>
+   <td>6.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("7.0")}}</td>
+   <td>9.0</td>
+   <td>15.0</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Grundsätzliche Unterstützung</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("7.0")}}</td>
+   <td>9.0</td>
+   <td>15.0</td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/de/web/api/window/print/index.html b/files/de/web/api/window/print/index.html
new file mode 100644
index 0000000000..3043194293
--- /dev/null
+++ b/files/de/web/api/window/print/index.html
@@ -0,0 +1,50 @@
+---
+title: Window.print()
+slug: Web/API/Window/print
+translation_of: Web/API/Window/print
+---
+<p>{{ ApiRef() }}</p>
+
+<p>Öffnet den Dialog zum Drucken des aktuellen Dokuments.</p>
+
+<p>In den meisten Browsern wird die Methode nicht ausgeführt, sofern bereits ein Druck-Dialog geöffnet ist.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="eval">window.print()
+</pre>
+
+<h2 id="Specification" name="Specification">Anmerkungen</h2>
+
+<p>Seit Chrome Version {{CompatChrome(46.0)}} wird diese Methode innerhalb eines {{htmlelement("iframe")}} Elements blockiert, solange kein sandbox Attribut mit dem Wert <code>allow-modal</code> gesetzt ist.</p>
+
+<h2 id="Specification" name="Specification">Spezifikation</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentare</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 Web application', '#dom-print', 'print()')}}</td>
+   <td>{{Spec2('HTML5 Web application')}}</td>
+   <td>Erste Definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{Compat("api.Window.print")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en/Printing" title="en/Printing">Printing</a></li>
+ <li>{{ domxref("window.onbeforeprint") }}</li>
+ <li>{{ domxref("window.onafterprint") }}</li>
+</ul>
+
+<p>{{ languages( { "ja": "ja/DOM/window.print", "it": "it/DOM/window.print" , "zh-cn": "zh-cn/DOM/window.print" } ) }}</p>
diff --git a/files/de/web/api/window/prompt/index.html b/files/de/web/api/window/prompt/index.html
new file mode 100644
index 0000000000..5fe0290c4e
--- /dev/null
+++ b/files/de/web/api/window/prompt/index.html
@@ -0,0 +1,79 @@
+---
+title: Window.prompt()
+slug: Web/API/Window/prompt
+translation_of: Web/API/Window/prompt
+---
+<div>{{ApiRef("Window")}}</div>
+
+<p><code>Window.prompt()</code> zeigt ein Dialogfenster mit einem Text-Eingabefeld an, mit einer optionalen Nachricht an den Benutzer.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>eingabe</em> = window.prompt(<em>nachricht</em>, <em>default</em>);
+</pre>
+
+<ul>
+ <li><code>eingabe</code> ist ein String, der den vom Benutzer eingegeben Text enthält, oder null.</li>
+ <li><code>nachricht</code> ist der String, der dem Benutzer angezeigt wird. <span id="result_box" lang="de"><span>Dieser Parameter ist optional</span> <span>und</span> <span>kann weggelassen werden, wenn</span> <span>es im</span> <span>Fenster nichts anzuzeigen</span> <span>gibt</span><span>.</span></span></li>
+ <li><code>default</code> ist ein String mit dem voreingestellten Wert im Eingabefeld. <span id="result_box" lang="de"><span>Es</span> <span>ist ein optionaler Parameter</span><span>.</span></span> <span id="result_box" lang="de"><span>Beachte, dass</span> <span>in</span> <span>Internet</span> <span>Explorer 7</span> <span>und 8 der String</span> <span>"</span></span>undefined<span lang="de"><span>"</span> <span>im Eingabefeld steht, wenn der Parameter weggelassen wird.</span></span></li>
+</ul>
+
+<h2 id="Example" name="Example">Beispiel</h2>
+
+<pre class="brush: js">var sign = prompt("What's your sign?");
+
+if (sign.toLowerCase() == "scorpio") {
+  alert("Wow! I'm a Scorpio too!");
+}
+
+// <span id="result_box" lang="de"><span>es gibt viele</span> <span>Möglichkeiten</span></span>, um die prompt-Funktion zu nutzen
+var sign = window.prompt(); //  <span class="short_text" id="result_box" lang="de"><span>Öffnet das</span> <span>leere</span> <span>Eingabefenster </span></span>
+var sign = prompt();       //  <span class="short_text" id="result_box" lang="de"><span> Öffnet das</span> <span>leere</span> <span>Eingabefenster</span></span>
+var sign = window.prompt('Are you feeling lucky'); // <span class="short_text" id="result_box" lang="de"><span>Öffnet das</span> <span>Eingabefenster</span></span> mit dem Text "Are you feeling lucky"
+var sign = window.prompt('Are you feeling lucky', 'sure'); // <span class="short_text" id="result_box" lang="de"><span>Öffnet das</span> <span>Eingabefenster</span></span> mit dem Text "Are you feeling lucky" und dem Standardwert "sure"</pre>
+
+<p>Wenn der Benutzer den OK-Button drückt, wird der Text im Eingabefeld zurückgegeben. Falls das Feld leer ist, wenn der Benutzer den OK-Button drückt, wird ein leerer String zurückgegeben. Wird der Abbrechen-Button gedrückt, gibt die Funktion <code>null</code> zurück.</p>
+
+<p><span id="result_box" lang="de"><span>Die obige</span> <span>Eingabeaufforderung wird</span> <span>wie folgt angezeigt</span></span> (in Chrome auf OS X):</p>
+
+<p><a href="https://mdn.mozillademos.org/files/11303/prompt.png"><img alt="prompt() dialog in Chrome on OS X" src="https://mdn.mozillademos.org/files/11303/prompt.png" style="height: 298px; width: 535px;"></a></p>
+
+<h2 id="Notes" name="Notes">Anmerkungen</h2>
+
+<p>Ein prompt-Dialogfenster einen einzeiligen Text, einen Abbrechen-Button und einen OK-Button und gibt den (möglicherweise leeren) Text zurück, der ins Textfeld eingegeben wurde.</p>
+
+<p><span class="comment">The following text is shared between this article, DOM:window.confirm and DOM:window.alert</span> Dialogfenster sind <em>modal </em>- sie verhindern, dass der Anwender auf den Rest der Seite zugreifen kann, bis das Dialogfenster geschlossen wurde. Aus diesen Grund sollte man Funktionen, die Dialogfenster anzeigen, nicht zu oft verwenden.</p>
+
+<p>Beachte, dass ein String zurückgegeben wird. Das heißt, die Eingabe muss manchmal gecasted werden. Beispiel: Falls eine Zahl eingegeben werden soll, sollte der String zu einer Zahl gecasted werden. <code>var aNumber = Number(window.prompt("Gib eine Zahl ein", ""));</code></p>
+
+<p><a href="/en-US/Chrome" title="Chrome">Mozilla Chrome</a>-Nutzer (z.B. Firefox-Erweiterungen) sollten stattdessen {{interface("nsIPromptService")}} verwenden.</p>
+
+<p>Seit Chrome {{CompatChrome(46.0)}} wird diese Funktion innerhalb eines {{htmlelement("iframe")}}s blockiert, es sei denn, dessen sandbox-Attribut hat den Wert <code>allow-modal</code>.</p>
+
+<p>In Safari wird auch dann ein leerer String zurückgegeben, wenn <em>Abbrechen</em> gedrückt wurde. Es macht also keinen Unterschied, ob OK oder Abbrechen gedrückt wird, wenn das Eingabefeld leer ist.</p>
+
+<p>Diese Funktion hat keinen Effekt in der Modern UI/Metro-Version von Internet Explorer für Windows 8. Es zeigt kein Dialogfenster an und gibt immer <code>undefined</code> zurück. Es ist unklar, ob dieses Verhalten Absicht oder ein Bug ist. Desktopversionen von Internet Explorer implementieren die Funktion aber.</p>
+
+<h2 id="Specification" name="Specification">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikationen</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 Web application', '#dom-prompt', 'prompt()')}}</td>
+   <td>{{Spec2('HTML5 Web application')}}</td>
+   <td><span class="short_text" id="result_box" lang="de"><span>Anfängliche</span> <span>Definition</span><span>.</span></span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{domxref("window.alert", "alert")}}</li>
+ <li>{{domxref("window.confirm", "confirm")}}</li>
+</ul>
diff --git a/files/de/web/api/window/screenx/index.html b/files/de/web/api/window/screenx/index.html
new file mode 100644
index 0000000000..61221ffd18
--- /dev/null
+++ b/files/de/web/api/window/screenx/index.html
@@ -0,0 +1,98 @@
+---
+title: Window.screenX
+slug: Web/API/Window/screenX
+translation_of: Web/API/Window/screenX
+---
+<div>{{APIRef}}</div>
+
+<div>Die schreibgeschützte Eigenschaft <code><strong>Window.screenX </strong></code>liefert den Abstand in CSS-Pixeln zwischen dem linken Bildschirmrand und dem linken Rand des Browsers.</div>
+
+<div> </div>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>lLoc</em> = window.screenX
+</pre>
+
+<ul>
+ <li><em><code>lLoc</code></em> enthält den Abstand in CSS-Pixeln vom linken Bildschirmrand.</li>
+</ul>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table" style="height: 49px; width: 1000px;">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSSOM View', '#dom-window-screenx', 'Window.screenX') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }} [1]</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }} [1]</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Vor Firefox 28 nutzte Gecko "device pixel" anstatt CSS-Pixel; anders gesagt nahm es für den Wert von <code>screenPixelsPerCSSPixel </code>für jedes Gerät "1" an.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{domxref("Window.screenY")}}</li>
+</ul>
diff --git a/files/de/web/api/window/scroll/index.html b/files/de/web/api/window/scroll/index.html
new file mode 100644
index 0000000000..95f7da74fc
--- /dev/null
+++ b/files/de/web/api/window/scroll/index.html
@@ -0,0 +1,56 @@
+---
+title: Window.scroll()
+slug: Web/API/Window/scroll
+translation_of: Web/API/Window/scroll
+---
+<div>{{APIRef}}</div>
+
+<h2 id="Summary" name="Summary">Zusammenfassung</h2>
+
+<p><span id="result_box" lang="de"><span class="hps">Scrollt das Fenster</span> <span class="hps">zu einer bestimmten</span> <span class="hps">Stelle im Dokument</span><span>.</span></span></p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">window.scroll(<em>x-koord</em>,<em>y-koord</em>)
+</pre>
+
+<h3 id="Parameters" name="Parameters">Parameters</h3>
+
+<ul>
+ <li><code>x-koord</code> <span id="result_box" lang="de"><span class="hps">ist</span> <span class="hps">das Pixel</span> <span class="hps">auf der horizontalen Achse</span> <span class="hps">des Dokuments</span><span>, das Sie </span><span class="hps">in der oberen</span> <span class="hps">linken Ecke angezeigt haben wollen.</span></span></li>
+ <li><code>y-koord</code> <span id="result_box" lang="de"><span class="hps">ist</span> <span class="hps">das Pixel</span> <span class="hps">auf der vertikalen Achse</span> <span class="hps">des Dokuments</span><span>, das Sie </span><span class="hps">in der oberen</span> <span class="hps">linken Ecke angezeigt haben wollen.</span></span></li>
+</ul>
+
+<h2 id="Example" name="Example">Beispiel</h2>
+
+<pre class="brush:html;htmlScript:true;">&lt;!-- <span id="result_box" lang="de"><span class="hps">lege</span> <span class="hps">den 100.</span> <span class="hps">vertikalen</span> <span class="hps">Pixel an der</span> <span class="hps">oberen Fensterrand</span></span> --&gt;
+
+&lt;button onClick="scroll(0, 100);"<span class="short_text" id="result_box" lang="de"><span class="alt-edited">&gt;Klicken, um 100 Pixel nach unten zu scrollen</span></span>&lt;/button&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Notizen</h2>
+
+<p><a href="/en-US/docs/DOM/window.scrollTo">window.scrollTo</a> ist praktisch dasselbe wie diese Methode. Zum wiederholten Blättern um einen bestimmten Abstand, wird <a href="/en-US/docs/Window.scrollBy">window.scrollBy</a> benutzt. Siehe auch <a href="/en-US/docs/Window.scrollByLines">window.scrollByLines</a>, <a href="/en-US/docs/Window.scrollByPages">window.scrollByPages</a>.</p>
+
+<h2 id="Specification" name="Specification">Spezifikation</h2>
+
+<article class="approved text-content">
+<div class="boxed translate-rendered">
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSSOM View', '#dom-window-scrollto', 'window.scrollTo()') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td>Erste Definition.</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</article>
diff --git a/files/de/web/api/window/scrollto/index.html b/files/de/web/api/window/scrollto/index.html
new file mode 100644
index 0000000000..c33f70df89
--- /dev/null
+++ b/files/de/web/api/window/scrollto/index.html
@@ -0,0 +1,75 @@
+---
+title: Window.scrollTo()
+slug: Web/API/Window/scrollTo
+tags:
+  - API
+  - Méthode
+  - Referenz
+translation_of: Web/API/Window/scrollTo
+---
+<div>{{ APIRef }}</div>
+
+<p><strong><code>Window.scrollTo()</code></strong> scrollt zu einer spezifischen Koordinate im Dokument.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">window.scrollTo(<em>x-Koordinate</em>, <em>y-Koordinate</em>)
+window.scrollTo(<em>options</em>)
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<ul>
+ <li><code>x-Koordinate</code> ist der Pixel auf der horizontalen Achse des Dokuments, wo der obere linke Punkt sein soll.</li>
+ <li><code>y-koordinate</code> ist der Pixel auf der vertikalen Achse des Dokuments, wo der obere linke Punkt sein soll.</li>
+</ul>
+
+<p>- or -</p>
+
+<ul>
+ <li><code>options</code> ist ein {{domxref("ScrollToOptions")}} Dictionary.</li>
+</ul>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush:js">window.scrollTo(0, 1000);
+</pre>
+
+<p>Mit Benutzung von <code>options</code>:</p>
+
+<pre class="brush: js">window.scrollTo({
+  top: 100,
+  left: 100,
+  behavior: 'smooth'
+});</pre>
+
+<h2 id="Anmerkungen">Anmerkungen</h2>
+
+<p>{{domxref("Window.scroll()")}} ist im Endeffekt die gleiche Methode. Schau dir {{domxref("Window.scrollBy()")}}, {{domxref("Window.scrollByLines()")}}, und {{domxref("Window.scrollByPages()")}} für relatives scrollen an.</p>
+
+<p>Um Elemente zu scrollen, schau dir {{domxref("Element.scrollTop")}} und {{domxref("Element.scrollLeft")}} an.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSSOM View', '#dom-window-scroll', 'window.scroll()') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td>Anfängliche Definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+
+
+<p>{{Compat("api.Window.scrollTo")}}</p>
diff --git a/files/de/web/api/window/sessionstorage/index.html b/files/de/web/api/window/sessionstorage/index.html
new file mode 100644
index 0000000000..b5adca4a81
--- /dev/null
+++ b/files/de/web/api/window/sessionstorage/index.html
@@ -0,0 +1,90 @@
+---
+title: Window.sessionStorage
+slug: Web/API/Window/sessionStorage
+tags:
+  - API
+  - Property
+  - Storage
+translation_of: Web/API/Window/sessionStorage
+---
+<p>{{APIRef()}}</p>
+
+<p>Die <code>sessionStorage</code>-Eigenschaft erlaubt den Zugriff auf ein nur während der aktuellen Sitzung verfügbares <a class="new" href="https://developer.mozilla.org/de/docs/Web/API/Storage" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben; bitte erwäge, mitzuwirken!"><code>Storage</code></a>-Objekt. <code>sessionStorage</code> ist mit einer Ausnahme identisch zu {{domxref("Window.localStorage")}}: In <code>localStorage</code> gespeicherte Daten besitzen kein Verfallsdatum, während sie im <code>sessionStorage</code> mit Ablauf der Sitzung gelöscht werden. Eine Sitzung endet erst mit dem Schließen des Browsers, sie übersteht das Neuladen und Wiederherstellen einer Webseite. <strong>Das Öffnen einer Webseite in einem neuen Tab oder Browserfenster erzeugt jedoch eine neue Sitzung;</strong> ein Unterschied zur Funktionsweise von Session-Cookies<strong>.</strong></p>
+
+<p><code>localStorage</code> und <code>sessionStorage</code> sind nicht nur von der Domain, sondern auch vom Protokoll abhängig, über das die Seite aufgerufen wurde. In http://example.com/ gespeicherte Daten stehen daher unter https://example.com <em>nicht</em> zur Verfügung.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">// Daten im sessionStorage speichern
+sessionStorage.setItem('key', 'value');
+
+// Gespeicherte Daten aus dem sessionStorage abfragen
+var data = sessionStorage.getItem('key');
+
+<code class="language-js"><span class="comment token">// Gespeicherte Daten aus dem sessionStorage</span> entfernen
+sessionStorage<span class="punctuation token">.</span><span class="function token">removeItem</span><span class="punctuation token">(</span><span class="string token">'key'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// Alle gespeicherten Daten aus dem sessionStorage entfernen</span>
+sessionStorage<span class="punctuation token">.</span><span class="function token">clear</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code> </pre>
+
+<h3 id="Wert">Wert</h3>
+
+<p>Ein {{domxref("Storage")}}-Objekt.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Im folgenden Beispiel wird auf das <code>sessionStorage</code>-Objekt der aktuellen Domain zugegriffen und mit {{domxref("Storage.setItem()")}} Daten hinzugefügt:</p>
+
+<pre class="brush: js">sessionStorage.setItem('myCat', 'Tom');</pre>
+
+<p>Das folgende Beispiel speichert automatisch den Inhalt eines Textfeldes. Bei einem versehentlichen Neuladen der Seite wird der Inhalt wiederhergestellt, sodass keine Eingaben verloren gehen.</p>
+
+<pre class="brush: js">// Das Textfeld holen, das überwacht werden soll
+var field = document.getElementById("field");
+
+// Prüfen, ob ein gespeicherter Wert vorliegt
+// (das ist nur dann der Fall, wenn die Seite versehentlich aktualisiert wurde)
+if (sessionStorage.getItem("autosave")) {
+  // Den Inhalt des Testfeldes aus dem sessionStorage wiederherstellen
+  field.value = sessionStorage.getItem("autosave");
+}
+
+// Änderungen des Inhalts des Textfeldes überwachen
+field.addEventListener("change", function() {
+  // Speichern des Inhalts des Textfeldes im sessionStorage
+  sessionStorage.setItem("autosave", field.value);
+});</pre>
+
+<div class="note">
+<p><strong>Anmerkung</strong>: Ein vollständiges Beispiel kann unter <a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a> nachgelesen werden.</p>
+</div>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Bemerkung</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Storage', '#the-sessionstorage-attribute', 'sessionStorage')}}</td>
+   <td>{{Spec2('Web Storage')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("api.Window.sessionStorage")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></li>
+ <li>{{domxref("Window.localStorage")}}</li>
+</ul>
diff --git a/files/de/web/api/window/stop/index.html b/files/de/web/api/window/stop/index.html
new file mode 100644
index 0000000000..8968e89177
--- /dev/null
+++ b/files/de/web/api/window/stop/index.html
@@ -0,0 +1,38 @@
+---
+title: Window.stop()
+slug: Web/API/Window/stop
+tags:
+  - API
+  - DOM
+  - DOM_0
+  - Method
+  - stopwindowloading
+translation_of: Web/API/Window/stop
+---
+<div>{{APIRef}}</div>
+
+<h2 id="Summary" name="Summary">Zusammenfassung</h2>
+
+<p>Diese Methode stoppt das Laden des Fensters.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">window.stop()
+</pre>
+
+<h2 id="Example" name="Example">Beispiel</h2>
+
+<pre class="brush:js">window.stop();
+</pre>
+
+<h2 id="Notes" name="Notes">Notizen</h2>
+
+<p>Die stop() Methode ist genau equivalent zum Klicken des Stop-Buttons im Browser. Aufgrund der Reihenfolge in der Scripte geladen werden, kann die stop() Methode nicht das Dokument, in dem es enthalten ist, vom Laden stoppen, aber es stoppt das Laden von großen Bildern, neuen Fenstern, und anderen Objekten, die verzögert geladen werden.</p>
+
+<h2 id="Specification" name="Specification">Spezifikation</h2>
+
+<p>DOM Level 0. Kein Teil der Spezifikation.</p>
+
+<h2 id="Compatibility">Compatibility</h2>
+
+<p>Die stop() Methode wird nicht vom Internet Explorer unterstützt.</p>
diff --git a/files/de/web/api/windowbase64/btoa/index.html b/files/de/web/api/windowbase64/btoa/index.html
new file mode 100644
index 0000000000..9d980c340a
--- /dev/null
+++ b/files/de/web/api/windowbase64/btoa/index.html
@@ -0,0 +1,145 @@
+---
+title: WindowBase64.btoa()
+slug: Web/API/WindowBase64/btoa
+tags:
+  - API
+  - Méthode
+  - Referenz
+translation_of: Web/API/WindowOrWorkerGlobalScope/btoa
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>Erzeugt eine Base-64-kodierten ASCII-Zeichenkette aus einer "Zeichenkette" von Binärdaten.</p>
+
+<p>Hinweis: diese Funktion ist nicht für Raw-<a href="http://www.unicode.org/standard/WhatIsUnicode.html">Unicode</a>-Zeichenketten geeignet (siehe Abschnitt "Unicode-Zeichenketten" unten).</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var encodedData = window.btoa(<em>stringToEncode</em>);</pre>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush:js">var encodedData = window.btoa("Hello, world"); // Zeichenkette kodieren
+var decodedData = window.atob(encodedData); // Zeichenkette dekodieren
+</pre>
+
+<h2 id="Hinweise">Hinweise</h2>
+
+<p>Diese Methode kann verwendet werden, um Daten zu kodieren, übertragen, und mittels<code> {{domxref("WindowBase64.atob","window.atob()")}}</code> wieder zu dekodieren, welche andernfalls Übertragungsprobleme bereiten würden. Beispielsweise ist es möglich, die Steuerzeichen mit den ASCII-Werten 0 bis 31 zu kodieren.</p>
+
+<p><code>btoa()</code> steht auch in JavaScript implementierten XPCOM-Komponenten zur Verfügung, auch wenn <a href="/en-US/docs/DOM/window" title="DOM/window"><code>window</code></a> in solchen Komponenten nicht das globale Objekt ist.</p>
+
+<h2 id="Unicode-Zeichenketten">Unicode-Zeichenketten</h2>
+
+<p>In den meisten Browsern verursacht ein Aufruf von <code>window.btoa()</code> mit einer Unicode-Zeichenkette eine "Character Out Of Range"-Exception ("Zeichen außerhalb des zulässigen Wertebereichs").</p>
+
+<p>Das kann mithilfe eines solchen Code-Schemas vermieden werden (beigesteuert von <a class="external" href="http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html" title="http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html">Johan Sundström</a>):</p>
+
+<pre class="brush:js">function utf8_to_b64(str) {
+    return window.btoa(unescape(encodeURIComponent(str)));
+}
+
+function b64_to_utf8(str) {
+    return decodeURIComponent(escape(window.atob(str)));
+}
+
+// Usage:
+utf8_to_b64('✓ à la mode'); // JTI1dTI3MTMlMjUyMCUyNUUwJTI1MjBsYSUyNTIwbW9kZQ==
+b64_to_utf8('JTI1dTI3MTMlMjUyMCUyNUUwJTI1MjBsYSUyNTIwbW9kZQ=='); // "✓ à la mode"
+
+utf8_to_b64('I \u2661 Unicode!'); // SSUyNTIwJTI1dTI2NjElMjUyMFVuaWNvZGUlMjUyMQ==
+b64_to_utf8('SSUyNTIwJTI1dTI2NjElMjUyMFVuaWNvZGUlMjUyMQ=='); // "I ♡ Unicode!"
+
+</pre>
+
+<p>Eine günstigere, zuverlässigere und effizientere Lösung ist, <a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a> zunächst in eine UTF-8-kodierte Zeichenkette zu konvertieren, die sich für <a href="/en-US/docs/Web/JavaScript/Typed_arrays" title="/en-US/docs/Web/JavaScript/Typed_arrays">typed arrays</a> eignet. Eine Anleitung bietet <strong><a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#Solution_.232_.E2.80.93_rewriting_atob()_and_btoa()_using_TypedArrays_and_UTF-8" title="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#Solution_.232_.E2.80.93_rewriting_atob()_and_btoa()_using_TypedArrays_and_UTF-8">dieser Abschnitt</a></strong>.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-btoa", "WindowBase64.btoa()")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1)}}[1]</td>
+   <td>10</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <code>btoa()</code> is also available to XPCOM components implemented in JavaScript, even though <code><a href="/en-US/docs/DOM/window">window</a></code> is not the global object in components.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li>
+ <li><a href="/en-US/docs/data_URIs"><code>data</code> URIs</a></li>
+ <li>{{domxref("WindowBase64.atob","window.atob()")}}</li>
+ <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+</ul>
diff --git a/files/de/web/api/windowbase64/index.html b/files/de/web/api/windowbase64/index.html
new file mode 100644
index 0000000000..40051820b4
--- /dev/null
+++ b/files/de/web/api/windowbase64/index.html
@@ -0,0 +1,120 @@
+---
+title: WindowBase64
+slug: Web/API/WindowBase64
+tags:
+  - API
+  - HTML-DOM
+  - Helper
+  - NeedsTranslation
+  - TopicStub
+  - WindowBase64
+translation_of: Web/API/WindowOrWorkerGlobalScope
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>The <code><strong>WindowBase64</strong></code> helper contains utility methods to convert data to and from base64, a binary-to-text encoding scheme. For example it is used in <a href="/en-US/docs/data_URIs">data URIs</a>.</p>
+
+<p>There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}}  for workers, implements it.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>This helper neither defines nor inherits any properties.</em></p>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This helper does not inherit any methods.</em></p>
+
+<dl>
+ <dt>{{domxref("WindowBase64.atob()")}}</dt>
+ <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd>
+ <dt>{{domxref("WindowBase64.btoa()")}}</dt>
+ <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#windowbase64', 'WindowBase64')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#windowbase64', 'WindowBase64')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#windowbase64", "WindowBase64")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop(1)}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoMobile(1)}}</td>
+   <td rowspan="1">{{CompatVersionUnknown}}</td>
+   <td rowspan="1">{{CompatVersionUnknown}}</td>
+   <td rowspan="1">{{CompatVersionUnknown}}</td>
+   <td rowspan="1">{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1]  <code>atob()</code> is also available to XPCOM components implemented in JavaScript, even though {{domxref("Window")}} is not the global object in components.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li>
+ <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li>
+</ul>
diff --git a/files/de/web/api/windoweventhandlers/index.html b/files/de/web/api/windoweventhandlers/index.html
new file mode 100644
index 0000000000..cdd4a8258b
--- /dev/null
+++ b/files/de/web/api/windoweventhandlers/index.html
@@ -0,0 +1,189 @@
+---
+title: WindowEventHandlers
+slug: Web/API/WindowEventHandlers
+tags:
+  - API
+  - HTML-DOM
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/WindowEventHandlers
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><strong><code>WindowEventHandlers</code></strong> describes the event handlers common to several interfaces like {{domxref("Window")}}, or {{domxref("HTMLBodyElement")}} and  {{domxref("HTMLFrameSetElement")}}. Each of these interfaces can implement more event handlers.</p>
+
+<p><code>WindowEventHandlers</code> is a not an interface and no object of this type can be created.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>The events properties, of the form <code>onXYZ</code>, are defined on the {{domxref("WindowEventHandlers")}}, and implemented by {{domxref("Window")}}, and {{domxref("WorkerGlobalScope")}} for Web Workers.</em></p>
+
+<dl>
+ <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("afterprint")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("beforeprint")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("beforeunload")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onhashchange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("hashchange")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onlanguagechange")}} {{experimental_inline}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("languagechange")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onmessage")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("message")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("offline")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.ononline")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("online")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pagehide")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pageshow")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpopstate")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("popstate")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onresize")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("resize")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("storage")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onunload")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("unload")}} event is raised.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface defines no method.</em></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Added <code>onlanguage</code> since the {{SpecName("HTML 5")}} snapshot.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowEventHandlers</code> (properties where on the target before it).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onhashchange</code></td>
+   <td>{{CompatGeckoDesktop(1.9.2)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onlanguage</code>{{experimental_inline}}</td>
+   <td>{{CompatGeckoDesktop(32)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onstorage</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onhashchange</code></td>
+   <td>{{CompatGeckoMobile(1.9.2)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onlanguage</code>{{experimental_inline}}</td>
+   <td>{{CompatGeckoMobile(32)}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onstorage</code></td>
+   <td>{{CompatNo}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Window")}} and {{domxref("WorkerGlobalScope")}}</li>
+</ul>
diff --git a/files/de/web/api/windoweventhandlers/onafterprint/index.html b/files/de/web/api/windoweventhandlers/onafterprint/index.html
new file mode 100644
index 0000000000..088f6c91aa
--- /dev/null
+++ b/files/de/web/api/windoweventhandlers/onafterprint/index.html
@@ -0,0 +1,93 @@
+---
+title: WindowEventHandlers.onafterprint
+slug: Web/API/WindowEventHandlers/onafterprint
+translation_of: Web/API/WindowEventHandlers/onafterprint
+---
+<div>{{ApiRef}}</div>
+
+<div>Die Eigenschaft WindowEventHandlers.onafterprint definiert und gibt den {{event("onafterprint")}} {{domxref("EventHandler")}} für das aktuelle Window aus.</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>window</em>.onafterprint = <em>event handling code</em>
+</pre>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Manche Browser (inklusive Firefox 6 und neuer, Internet Explorer) senden <code>beforeprint </code>und <code>afterprint</code> Events um zu bestimmen, ob ein Druckvorgang stattgefunden hat. Diese Funktion kann genutzt werden um das User-Interface während des Druckvorgangs anzupassen (z.B das Ausblenden von User-Interface Elementen während des Druckvorgangs).</p>
+
+<p>Das <code>afterprint E</code>vent wird ausgelöst nachdem der Nutzer gedruckt hat oder den den Druck abgebrochen hat.</p>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<p>Nicht Teil einer Spezifikation.</p>
+
+<h2 id="Browserkompatbilität">Browserkompatbilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>6.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{domxref("window.print")}}</li>
+ <li>{{domxref("window.onbeforeprint")}}</li>
+ <li><a href="/en-US/docs/">Drucken</a></li>
+ <li>In Webkitbrowsern kann eine equivalentes Ergebnis mit <code>matchMedia('print')</code> erreicht werden.</li>
+ <li>
+  <pre><code>var mediaQueryList = window.matchMedia('print');
+mediaQueryList.addListener(function(mql) {
+<span class="Apple-tab-span" style="white-space: pre;">	</span>if (!mql.matches) {
+<span class="Apple-tab-span" style="white-space: pre;">		</span>console.log('onafterprint');
+<span class="Apple-tab-span" style="white-space: pre;">	</span>};
+});</code>
+</pre>
+ </li>
+</ul>
+
+<div class="grammarly-disable-indicator"> </div>
diff --git a/files/de/web/api/windoweventhandlers/onhashchange/index.html b/files/de/web/api/windoweventhandlers/onhashchange/index.html
new file mode 100644
index 0000000000..3bb0fb12a9
--- /dev/null
+++ b/files/de/web/api/windoweventhandlers/onhashchange/index.html
@@ -0,0 +1,162 @@
+---
+title: WindowEventHandlers.onhashchange
+slug: Web/API/WindowEventHandlers/onhashchange
+tags:
+  - Eigenschaft
+  - Event
+  - HTML-DOM
+  - Referenz
+  - WindowEventHandlers
+translation_of: Web/API/WindowEventHandlers/onhashchange
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+
+<p>Das <strong>hashchange</strong> Event wird ausgelöst wenn sich der window.hash verändert (siehe {{domxref("Window.location", "location.hash")}}).</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">window.onhashchange = funcRef;
+</pre>
+
+<p><strong>oder</strong></p>
+
+<pre class="syntaxbox">&lt;body onhashchange="funcRef();"&gt;
+</pre>
+
+<p><strong>oder</strong></p>
+
+<pre class="syntaxbox">window.addEventListener("hashchange", funcRef, false);
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>funcRef</code></dt>
+ <dd>Ein Verweis auf eine Funktion.</dd>
+</dl>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush:js">if ("onhashchange" in window) {
+    alert("Der Browser unterstützt das hashchange-Event!");
+}
+
+function locationHashChanged() {
+    if (location.hash === "#irgendeinCoolesFeature") {
+        featureFunction();
+    }
+}
+
+window.onhashchange = locationHashChanged;
+</pre>
+
+<h2 id="Das_hashchange_Event">Das hashchange Event</h2>
+
+<p>Das ausgelöste <code>hashchange</code> Event hat folgende Eigenschaften:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Eigenschaft</td>
+   <td class="header">Typ</td>
+   <td class="header">Beschreibung</td>
+  </tr>
+  <tr>
+   <td><code>newURL</code> {{gecko_minversion_inline("6.0")}}</td>
+   <td><code>DOMString</code></td>
+   <td>Die neue URL zu der das Fenster nun navigiert.</td>
+  </tr>
+  <tr>
+   <td><code>oldURL</code> {{gecko_minversion_inline("6.0")}}</td>
+   <td><code>DOMString</code></td>
+   <td>Die vorherige URL, von der aus das Fenster navigierte.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser-Kompatiblität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5.0</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>
+    <p>8.0</p>
+
+    <p><code style="font-size: 14px;">oldURL</code>/<code style="font-size: 14px;">newURL</code> Eigenschaften werden nicht unterstützt.</p>
+   </td>
+   <td>10.6</td>
+   <td>5.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.2</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}</td>
+   <td>9.0</td>
+   <td>11.0</td>
+   <td>5.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating the browser history">Browserverlauf manipulieren</a>, <a href="/en-US/docs/DOM/window.history" title="DOM/window.history">history.pushState() und history.replaceState()</a>-Methoden, <a href="/en-US/docs/DOM/window.onpopstate" title="DOM/window.onpopstate">popstate</a>-Event.</li>
+</ul>
diff --git a/files/de/web/api/windoweventhandlers/onpopstate/index.html b/files/de/web/api/windoweventhandlers/onpopstate/index.html
new file mode 100644
index 0000000000..5154919751
--- /dev/null
+++ b/files/de/web/api/windoweventhandlers/onpopstate/index.html
@@ -0,0 +1,57 @@
+---
+title: WindowEventHandlers.onpopstate
+slug: Web/API/WindowEventHandlers/onpopstate
+translation_of: Web/API/WindowEventHandlers/onpopstate
+---
+<div>{{APIRef}} {{gecko_minversion_header("2")}}</div>
+
+<h2 id="Summary" name="Summary">Zusammenfassung</h2>
+
+<p>Hier geht es um die Ereignisbehandlungsroutine, üblicherweise <em>event handler </em>genannt, für das <code>popstate</code> Ereignis (<em>event</em>) des <code>window</code> Objekts.</p>
+
+<p>Ein <code>popstate</code> Ereignis wird an <code>window</code> übermittelt, wann immer der aktive <code>history</code> Eintrag zwischen zwei Einträgen für dasselbe Dokument wechselt. Falls der zu aktivierende history Eintrag erzeugt wurde durch den Aufruf von <code>history.pushState()</code> oder beeinflusst wurde durch Aufruf von <code>history.replaceState(), </code>dann enthält die <code>state</code> Eigenschaft des <code>popstate</code> Ereignisses eine Kopie des <code>state</code> Objekts des <code>history</code> Eintrags.<code> </code></p>
+
+<p>Es gilt zu beachten, dass der bloße Aufruf von <code>history.pushState()</code> oder <code>history.replaceState()</code> kein <code>popstate</code> Ereignis auslöst. Das <code>popstate</code> Ereignis wird allein durch Anklicken des Zurück-Buttons (oder den Aufruf von <code>history.back()</code> per Javascript) ausgelöst. Auch wird das Ereignis nur ausgelöst, wenn sich der Anwender zwischen zwei <code>history </code>Einträgen für dasselbe Dokument bewegt.</p>
+
+<p>Browser behandeln den <code>popstate</code> Zustand nach initialem Laden einer Seite (<code>onload</code>) auf verschiedene Weise. Chrome (vor Version 34) und Safari senden immer ein <code>popstate</code> Ereignis, Firefox hingegen nicht.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">window.onpopstate = <var>funcRef</var>;
+</pre>
+
+<ul>
+ <li><var>funcRef</var> ist eine <em>event</em> <em>handler</em> Funktion, bzw. Ereignisbehandlungsroutine.</li>
+</ul>
+
+<h2 id="The_popstate_event" name="The_popstate_event">Das popstate Ereignis</h2>
+
+<p>Zum Beispiel würde eine Seite mit der URL <code><var>http://example.com/example.html</var></code> beim Durchlaufen dieses Codes die folgenden Meldungen in der Konsole ausgeben:</p>
+
+<pre class="brush:js">window.onpopstate = function(event) {
+  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
+};
+
+history.pushState({page: 1}, "title 1", "?page=1");
+history.pushState({page: 2}, "title 2", "?page=2");
+history.replaceState({page: 3}, "title 3", "?page=3");
+history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
+history.back(); // alerts "location: http://example.com/example.html, state: null
+history.go(2);  // alerts "location: http://example.com/example.html?page=3, state: {"page":3}
+</pre>
+
+<p>Obwohl mit dem ursprünglichen <code>history</code> Eintrag (für die URL <code><var>http://example.com/example.html</var></code>) kein <code>state</code> Objekt verknüpft ist, wird dennoch ein <code>popstate</code> Ereignis ausgelöst, sobald dieser Eintrag durch den zweiten Aufruf von <code>history.back()</code> aktiv wird.</p>
+
+<h2 id="Specification" name="Specification">Spezifikation</h2>
+
+<ul>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#handler-window-onpopstate">HTML5 popstate event</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Weiterführende Informationen</h2>
+
+<ul>
+ <li>{{domxref("window.history")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history">Manipulating the browser history</a></li>
+ <li><a href="/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history/Example">Ajax navigation example</a></li>
+</ul>
diff --git a/files/de/web/api/windowtimers/index.html b/files/de/web/api/windowtimers/index.html
new file mode 100644
index 0000000000..396aca3d4d
--- /dev/null
+++ b/files/de/web/api/windowtimers/index.html
@@ -0,0 +1,124 @@
+---
+title: WindowTimers
+slug: Web/API/WindowTimers
+tags:
+  - API
+  - HTML-DOM
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - Workers
+translation_of: Web/API/WindowOrWorkerGlobalScope
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><code><strong>WindowTimers</strong></code> contains utility methods to set and clear timers.</p>
+
+<p>There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}}  for workers, implements it.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>This interface do not define any property, nor inherit any.</em></p>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface do not inherit any method.</em></p>
+
+<dl>
+ <dt>{{domxref("WindowTimers.clearInterval()")}}</dt>
+ <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.</dd>
+ <dt>{{domxref("WindowTimers.clearTimeout()")}}</dt>
+ <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}.</dd>
+ <dt>{{domxref("WindowTimers.setInterval()")}}</dt>
+ <dd>Schedules the execution of a function each X milliseconds.</dd>
+ <dt>{{domxref("WindowTimers.setTimeout()")}}</dt>
+ <dd>Sets a delay for executing a function.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#windowtimers', 'WindowTimers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#windowtimers', 'WindowTimers')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#windowtimers", "WindowTimers")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop(1)}}</td>
+   <td>1.0</td>
+   <td>4.0</td>
+   <td>4.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoMobile(1)}}</td>
+   <td rowspan="1">{{CompatVersionUnknown}}</td>
+   <td rowspan="1">{{CompatVersionUnknown}}</td>
+   <td rowspan="1">{{CompatVersionUnknown}}</td>
+   <td rowspan="1">{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li>
+</ul>
diff --git a/files/de/web/api/windowtimers/settimeout/index.html b/files/de/web/api/windowtimers/settimeout/index.html
new file mode 100644
index 0000000000..9f13870d78
--- /dev/null
+++ b/files/de/web/api/windowtimers/settimeout/index.html
@@ -0,0 +1,329 @@
+---
+title: WindowTimers.setTimeout()
+slug: Web/API/WindowTimers/setTimeout
+translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>Die Funktion <strong><code>setTimeout()</code></strong> der {{domxref("WindowOrWorkerGlobalScope")}}-Schnittstelle ruft nach der gegebenen Zeitspanne eine Funktion oder direkt angebenen Code auf.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>var timeoutID</em> = window.setTimeout(funktion, zeitspanne, [<em>parameter1</em>, <em>parameter2</em>, ...]);
+<em>var timeoutID</em> = window.setTimeout(<em>code</em>, zeitspanne);
+</pre>
+
+<p> </p>
+
+<h3 id="Parameter">Parameter</h3>
+
+<p> </p>
+
+<dl>
+ <dt><code>funktion</code></dt>
+ <dd>Die {{jsxref("function", "Funktion")}}, die nach <code>zeitspanne</code> Millisekunden ausgeführt werden soll.</dd>
+ <dt><code>code</code></dt>
+ <dd><code>code</code> in der alternativen Syntax ist eine Zeichenkette, die Code enthält, der nach <code>zeitspanne</code> Millisekunden ausgeführt werden soll.  <code>code</code> sollte aus den gleichen Gründen, die auch <a href="/en-US/docs/JavaScript/Reference/Global_Objects/eval#Don%27t_use_eval!" title="en-US/docs/Core JavaScript 1.5 Reference/Global Functions/Eval#Don't use eval!">eval()</a> zum Sicherheitsrisiko machen, <strong>nicht verwendet</strong> werden.</dd>
+ <dt><code>zeitspanne</code> {{optional_inline}}</dt>
+ <dd><code>zeitspanne</code> ist die Wartezeit in Millisekunden (ein Tausendstel einer Sekunde), nach der <code>funktion</code> bzw. <code>code</code> ausgeführt werden soll. Dieser Wert ist ein Mindestwert, die tatsächlich abgelaufene Zeit kann länger sein, siehe {{anch("Gründe für längere als gegebene Wartezeiten")}} weiter unten.</dd>
+ <dt><code>parameter1, ..., parameterN</code> {{optional_inline}}</dt>
+ <dd>Diese Parameter werden an die <code>funktion</code><em> </em>oder den <code>code</code> übergeben.</dd>
+</dl>
+
+<div class="note"><strong>Anmerkung:</strong> Der Internet Explorer unterstützt bis einschließlich Version 9 die Übergabe von zusätzlichen Parametern nicht.</div>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p><code>setTimeout()</code> gibt eine ID zurück, die den eingerichteten Zeitgeber identifiziert; um die Wartezeit abzubrechen, kann sie an {{domxref("WindowOrWorkerGlobalScope.clearTimeout","clearTimeout()")}}  übergeben werden.</p>
+
+<p>Jede ID wird von <code>setTimeout()</code> und <code>setInterval()</code> nur einmalig je Objekt (window oder Worker) verwendet.</p>
+
+<h2 id="Examples" name="Examples">Beispiel</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Beispiel<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>delayedAlert();<span class="punctuation token">"</span></span><span class="punctuation token">&gt;Zeige nach zwei Sekunden einen Alarm.</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>clearAlert();<span class="punctuation token">"</span></span><span class="punctuation token">&gt;Alarm</span></span> vorzeitig abbrechen.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> timeoutID<span class="punctuation token">;</span>
+
+<span class="keyword token">function</span> <span class="function token">delayedAlert</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  timeoutID <span class="operator token">=</span> window<span class="punctuation token">.</span><span class="function token">setTimeout</span><span class="punctuation token">(</span>slowAlert<span class="punctuation token">,</span> <span class="number token">2000</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">function</span> <span class="function token">slowAlert</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">'Das hat gedauert!'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">function</span> <span class="function token">clearAlert</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  window<span class="punctuation token">.</span><span class="function token">clearTimeout</span><span class="punctuation token">(</span>timeoutID<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="Ergebnis">Ergebnis</h3>
+
+<p>{{EmbedLiveSample('Example')}}</p>
+
+<p>Siehe auch <a href="/en-US/docs/DOM/window.clearTimeout#Example" title="en-US/docs/DOM/window.clearTimeout#Example"><code>clearTimeout()</code></a></p>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Der nachfolgende Polyfill-Code ermöglicht es, der aufzurufenden Funktion auch im Internet Explorer Parameter zu übergeben:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">/*\
+|*|
+|*|  Polyfill which enables the passage of arbitrary arguments to the
+|*|  callback functions of JavaScript timers (HTML5 standard syntax).
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
+|*|
+|*|  Syntax:
+|*|  var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]);
+|*|  var timeoutID = window.setTimeout(code, delay);
+|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
+|*|  var intervalID = window.setInterval(code, delay);
+|*|
+\*/</span>
+
+<span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="function token">setTimeout</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>arg1<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span>arg1 <span class="operator token">===</span> <span class="string token">'test'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="comment token">// feature test is passed, no need for polyfill</span>
+      <span class="keyword token">return</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+    <span class="keyword token">var</span> __nativeST__ <span class="operator token">=</span> window<span class="punctuation token">.</span>setTimeout<span class="punctuation token">;</span>
+    window<span class="punctuation token">.</span>setTimeout <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>vCallback<span class="punctuation token">,</span> nDelay <span class="comment token">/*, argumentToPass1, argumentToPass2, etc. */</span> <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="keyword token">var</span> aArgs <span class="operator token">=</span> Array<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>slice<span class="punctuation token">.</span><span class="function token">call</span><span class="punctuation token">(</span>arguments<span class="punctuation token">,</span> <span class="number token">2</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">return</span> <span class="function token">__nativeST__</span><span class="punctuation token">(</span>vCallback <span class="keyword token">instanceof</span> <span class="class-name token">Function</span> <span class="operator token">?</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        vCallback<span class="punctuation token">.</span><span class="function token">apply</span><span class="punctuation token">(</span><span class="keyword token">null</span><span class="punctuation token">,</span> aArgs<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span> <span class="punctuation token">:</span> vCallback<span class="punctuation token">,</span> nDelay<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="string token">'test'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="keyword token">var</span> interval <span class="operator token">=</span> <span class="function token">setInterval</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>arg1<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="function token">clearInterval</span><span class="punctuation token">(</span>interval<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span>arg1 <span class="operator token">===</span> <span class="string token">'test'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="comment token">// feature test is passed, no need for polyfill</span>
+      <span class="keyword token">return</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+    <span class="keyword token">var</span> __nativeSI__ <span class="operator token">=</span> window<span class="punctuation token">.</span>setInterval<span class="punctuation token">;</span>
+    window<span class="punctuation token">.</span>setInterval <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>vCallback<span class="punctuation token">,</span> nDelay <span class="comment token">/*, argumentToPass1, argumentToPass2, etc. */</span> <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="keyword token">var</span> aArgs <span class="operator token">=</span> Array<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>slice<span class="punctuation token">.</span><span class="function token">call</span><span class="punctuation token">(</span>arguments<span class="punctuation token">,</span> <span class="number token">2</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">return</span> <span class="function token">__nativeSI__</span><span class="punctuation token">(</span>vCallback <span class="keyword token">instanceof</span> <span class="class-name token">Function</span> <span class="operator token">?</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        vCallback<span class="punctuation token">.</span><span class="function token">apply</span><span class="punctuation token">(</span><span class="keyword token">null</span><span class="punctuation token">,</span> aArgs<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span> <span class="punctuation token">:</span> vCallback<span class="punctuation token">,</span> nDelay<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="string token">'test'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">)</span></code></pre>
+
+<p>Eine andere Möglichkeit ist, die Funktion innerhalb einer anonymen Funktion aufzurufen:</p>
+
+<pre class="brush: js">setTimeout(function() {
+    funktion("eins", "zwei", "drei");
+}, 1000);
+</pre>
+
+<p>Ebenfalls kann die Funktion <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind"><code>bind()</code></a> genutzt werden:</p>
+
+<p> </p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="function token">setTimeout</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>arg1, arg2, arg3<span class="punctuation token">)</span><span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">.</span><span class="function token">bind</span><span class="punctuation token">(</span>undefined<span class="punctuation token">,</span> "eins", "zwei", "drei"<span class="punctuation token">)</span><span class="punctuation token">,</span> <span class="number token">1000</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p> </p>
+
+<h2 id="Das_this-Problem">Das "<code>this</code>"-Problem</h2>
+
+<p>In der an <code>setTimeout()</code> übergebenen Funktion wird <code>this</code> bei Aufruf einen falschen Wert enthalten. Dieses Problem wird detailliert in der <a href="/en-US/docs/JavaScript/Reference/Operators/this#Method_binding" title="en-US/docs/Core_JavaScript_1.5_Reference/Operators/Special_Operators/this_Operator#Method_binding">JavaScript-Referenz</a> beschrieben.</p>
+
+<h3 id="Erklärung">Erklärung</h3>
+
+<p>Von <code>setTimeout()</code> ausgeführter Code wird in einem anderen Kontext ausgeführt, als in dem <code>setTimeout()</code> aufgerufen wurde. <code>this</code> wird deshalb in der aufgerufenen Funktion <code>window</code> oder <code>global</code> entsprechen, nicht dem <code>this</code> des Bereichs, in dem  <code>setTimeout()</code> aufgerufen wurde. Beispiel:</p>
+
+<pre class="brush: js">myArray = ["null", "eins", "drei"];
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length &gt; 0 ? this[sProperty] : this);
+};
+
+myArray.myMethod(); // Ausgabe: "null,eins,zwei"
+myArray.myMethod(1); // Ausgabe: "eins"
+setTimeout(myArray.myMethod, 1000); // Ausgabe: "[object Window]" nach 1 Sekunde
+setTimeout(myArray.myMethod, 1500, "1"); // Ausgabe: "undefined" nach 1,5 Sekunden
+// Versuchen wir, 'this' zu übergeben
+setTimeout.call(myArray, myArray.myMethod, 2000); // Fehler: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // Der gleiche Fehler</pre>
+
+<p>Es gibt hier keine Möglichkeit, <code>this</code> an die aufzurufende Funktion durchzureichen.</p>
+
+<h3 id="Eine_Lösungsmöglichkeit">Eine Lösungsmöglichkeit</h3>
+
+<p>Eine Möglichkeit, das Problem zu umgehen, ist es, die beiden eingebauten Funktionen <code>setTimeout()</code> und <code>setInterval()</code> durch zwei eigene zu ersetzen, die sich <a href="en-US/docs/JavaScript/Reference/Global_Objects/Function/call" title="en-US/docs/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call</code></a> bedienen:</p>
+
+<pre class="brush: js">// Enable the passage of the 'this' object through the JavaScript timers
+
+var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
+
+window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeST__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+
+window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeSI__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};</pre>
+
+<div class="note"><strong>Hinweis:</strong> Diese beiden Ersatzfunktionen ermöglichen es auch, im Internet Explorer Parameter an die aufzurufende Funktion zu übergeben, wie es HTML5 vorsieht. Sie können daher auch als {{anch("Polyfill")}} benutzt werden.</div>
+
+<h2 id="Anmerkungen">Anmerkungen</h2>
+
+<p>Eine Wartezeit kann mit <code><a href="/en-US/docs/DOM/window.clearTimeout" title="en-US/docs/DOM/window.clearTimeout">window.clearTimeout()</a></code> abgebrochen werden.</p>
+
+<p>Soll eine Funktion wiederholt alle n Millisekunden aufgerufen werden, ist <code><a href="/en-US/docs/DOM/window.setInterval" title="en-US/docs/DOM/window.setInterval">window.setInterval()</a></code> die bessere Wahl.</p>
+
+<h3 id="Passing_string_literals">Passing string literals</h3>
+
+<p>Passing a string instead of a function to <code>setTimeout()</code> suffers from the same hazards as using <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/eval#Don.27t_use_eval.21" title="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/eval">eval</a>. </code></p>
+
+<pre class="brush: js">// Correct
+window.setTimeout(function() {
+    alert("Hello World!");
+}, 500);
+
+// Incorrect
+window.setTimeout("alert(\"Hello World!\");", 500);
+
+</pre>
+
+<p>String literals are evaluated in the global context, so local symbols in the context where <code>setTimeout()</code> was called will not be available when the string is evaluated as code.</p>
+
+<h3 id="Gründe_für_längere_als_gegebene_Wartezeiten">Gründe für längere als gegebene Wartezeiten</h3>
+
+<p>Aus verschiedenen Gründen kann die tatsächliche Zeit bis zum Aufruf der Funktion länger sein als mit setTimeout() angegeben wurde. Dieser Abschnitt beschreibt die beiden häufigsten.</p>
+
+<h4 id="Wartezeiten_betragen_4ms_oder_mehr">Wartezeiten betragen 4ms oder mehr</h4>
+
+<p>Um das System nicht zu überlasten, begrenzen moderne Browser die Häufigkeit der von setTimeout() und setInterval() ausgelösten Ereignisse ab einer bestimmten Aufruftiefe oder -häufigkeit. Beispiel:</p>
+
+<pre class="brush: js line-numbers  language-js" id="ct-0"><code class="language-js"><span class="keyword token">function</span> <span class="function token">cb</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="function token">f</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="function token">setTimeout</span><span class="punctuation token">(</span>cb<span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="punctuation token">}</span>
+<span class="function token">setTimeout</span><span class="punctuation token">(</span>cb<span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="function token">setInterval</span><span class="punctuation token">(</span>f<span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Chrome und Firefox drosseln nach dem fünften Aufruf, Safari nach dem sechsten, Edge bereits nach dem dritten.</p>
+
+<p>Eine Wartezeit von 0 ms kann mit {{domxref("window.postMessage()")}} erreicht werden, wie <a class="external external-icon" href="http://dbaron.org/log/20100309-faster-timeouts">hier beschrieben</a>.</p>
+
+<p> </p>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Die Mindestwartezeit, <code>DOM_MIN_TIMEOUT_VALUE</code>, beträgt 4 ms (Firefox-Einstellung <code>dom.min_timeout_value</code>), die Verschachtelungstiefe <code>DOM_CLAMP_TIMEOUT_NESTING_LEVEL</code> beträgt 5.</p>
+</div>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Der Wert 4 ms wurde mit <a class="external external-icon" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#timers">HTML5 festgelegt</a> und wird von allen Browsern umgesetzt, die nach 2010 erschienen sind. Vor {{geckoRelease("5.0")}} war der Mindestwert 10 ms.</p>
+</div>
+
+<p> </p>
+
+<p> </p>
+
+<h4 id="Wartezeiten_in_inaktiven_Tabs_größer_als_1s">Wartezeiten in inaktiven Tabs  größer als 1s</h4>
+
+<p>Um die Last noch weiter zu verringern, beträgt die Mindestwartezeit in sich im Hintergrund befindlichen Tabs grundsätzlich mindestens 1 s.</p>
+
+<p>Firefox setzt diese Beschränkung seit Version 5 um (siehe {{bug(633421)}}). Der Wert von 1000 ms kann in der Einstellungen <span class="comment-copy"><code>dom.min_background_timeout_value</code> geändert werden.</span><br>
+ Chrome setzt diese Beschränkung seit Version 11 um (<a class="external external-icon" href="http://crbug.com/66078">crbug.com/66078</a>).</p>
+
+<p>Bei Firefox für Android beträgt seit Version 14 die Mindestwartezeit in sich im Hintergrund befindlichen Tabs 15 Minuten (siehe {{bug(736602)}}). Jegliche Aktivität in diesen Tabs kann auch vollständig angehalten werden.</p>
+
+<div class="note">
+<p>Seit Version 50 gelten in Firefox keine Beschränkungen mehr, falls sich die Web Audio API {{domxref("AudioContext")}} im Wiedergabemodus befindet. Seit Firefox 51 gilt dies bereits für jegliche Dokumente mit einem {{domxref("AudioContext")}}, unabhängig von dessen Status.<br>
+ Apps, die Musik Note für Note abspielen, konnten wegen der Beschränkungen den Takt nicht halten, sobald sie in den Hintergrund gelegt wurden.</p>
+</div>
+
+<h4 id="Lastbedingte_Verzögerungen">Lastbedingte Verzögerungen</h4>
+
+<p>Zusätzlich zum aktiven Drosseln kann es zu verlängerten Wartezeiten kommen, falls das Dokument, der Browser oder das Betriebssystem anderweitig beschäftigt sind. Ein wichtiger Punkt in diesem Zusammenhang ist, dass die aufzurufende Funktion nicht ausgeführt werden kann, solange der Thread, der <code>setTimeout()</code> aufgerufen hat, noch aktiv ist:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> bla<span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'bla wurde aufgerufen'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+<span class="function token">setTimeout</span><span class="punctuation token">(</span>bla<span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'hinter setTimeout'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Ergebnis:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">hinter setTimeout
+bla wurde aufgerufen</code></pre>
+
+<p>Obwohl <code>setTimeout</code> die sofortige Ausführung angewiesen wurde, wird der Aufruf von bla() in einer Warteschlange bis zur nächsten Gelegenheit zurückgestellt. Erst wenn der aktuell laufende Code ausgeführt wurde, werden die in der Warteschlange gesammelten Aufrufe abgearbeitet. In der Folge ist der Programmablauf nicht, wie eventuell erwartet.</p>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Eigenschaft</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basis</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop("1") }}</td>
+   <td>4.0</td>
+   <td>4.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Eigenschaft</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic</td>
+   <td>1.0</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoMobile("1") }}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification">Spezifikation</h2>
+
+<p>Gehört zu DOM-Level 0, wie spezifiziert in <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#timers" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#timers">HTML5</a>.</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{domxref("window.setInterval")}}</li>
+ <li>{{domxref("window.requestAnimationFrame")}}</li>
+</ul>
diff --git a/files/de/web/api/worker/index.html b/files/de/web/api/worker/index.html
new file mode 100644
index 0000000000..258fc77862
--- /dev/null
+++ b/files/de/web/api/worker/index.html
@@ -0,0 +1,191 @@
+---
+title: Worker
+slug: Web/API/Worker
+translation_of: Web/API/Worker
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>Das <strong><code>Worker</code></strong> Interface der <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers API</a> beschreibt eine im Hintergrund ausgeführte Programmlogik, die leicht erstellt werden kann und Nachrichten mit dem Ersteller austauschen. Einen Worker erzeugen erfolgt einfach über den Aufruf des <code>Worker()</code> Konstruktors unter Angabe eines Scripts, welches in dem Worker Thread ausgeführt werden soll.</p>
+
+<p>Worker selbst können zudem weitere (sog. "verschachtelte") Worker erzeugen, solange diese in demselben <a href="/en-US/docs/Web/Security/Same-origin_policy">origin</a> wie die übergeordnete Seite liegen (Achtung: verschachtelte Worker sind <a href="https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/5R3B4RN4GHU">aktuell nicht in Blink implementiert</a>).  Zusätzlich können Worker das <a class="internal" href="/en/DOM/XMLHttpRequest" title="En/XMLHttpRequest"><code>XMLHttpRequest</code></a> nutzen, um auf Netzwerk I/O zuzugreifen, unter der Voraussetzung, dass die Attribute <code>responseXML</code> und <code>channel</code> des <code>XMLHttpRequest</code> immer den Wert <code>null </code>zurück liefern.</p>
+
+<p><a href="/En/DOM/Worker/Functions_available_to_workers" title="En/DOM/Worker/Functions available to workers">Nicht alle Interfaces und Funktionen sind verfügbar</a> für das mit dem <code>Worker</code> assoziierte Script.</p>
+
+<p>Zur Verwendung eines <code>Worker</code>s mit Zugriff auf <a href="/en/js-ctypes" title="en/js-ctypes">js-ctypes</a> in Browser-Erweiterungen (Extension) für den Firefox bitte das {{ domxref("ChromeWorker") }} Objekt nutzen.</p>
+
+<h2 id="Constructors">Constructors</h2>
+
+<dl>
+ <dt>{{domxref("Worker.Worker", "Worker()")}}</dt>
+ <dd>Erzeugt einen neuen Web Worker, der das über seine URL referenzierte Script ausführt. Worker können auch über <a href="/en-US/docs/Web/API/Blob">Blobs</a> erzeugt werden.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Erbt die Eigenschaften seines parents, {{domxref("EventTarget")}}, und implementiert die Eigenschaften von {{domxref("AbstractWorker")}}.</em></p>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<dl>
+ <dt>{{domxref("AbstractWorker.onerror")}}</dt>
+ <dd>Ein {{ domxref("EventListener") }}, welcher jedesmal dann aufgerufen wird, wenn ein {{domxref("ErrorEvent")}} des Typs <code>error</code> den Worker erreicht. Dies ist geerbt von {{domxref("AbstractWorker")}}.</dd>
+ <dt>{{domxref("Worker.onmessage")}}</dt>
+ <dd>Ein {{ domxref("EventListener") }}, welcher jedesmal dann aufgerufen wird, wenn ein {{domxref("MessageEvent")}} des Typs <code>message</code> den Worker erreicht — d.h. der Worker erhält eine Nachricht von seinem übergeordneten document via {{domxref("DedicatedWorkerGlobalScope.postMessage")}}. Diese Nachricht wird innerhalb des Events in der {{domxref("MessageEvent.data", "data")}} Eigenschaft gespeichert.</dd>
+ <dt>{{domxref("Worker.onmessageerror")}}</dt>
+ <dd>Der {{domxref("EventHandler")}}, dessen Code aufgerufen werden soll, wenn es zu einem {{event("messageerror")}} Event kommt.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Erbt die Methoden seines parents, {{domxref("EventTarget")}}, und implementiert die Methoden von {{domxref("AbstractWorker")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("Worker.postMessage()")}}</dt>
+ <dd>Sendet eine Nachricht an den Worker. Diese kann dabei aus einem <code>beliebigen</code> JavaScript Objekt bestehen.</dd>
+ <dt>{{domxref("Worker.terminate()")}}</dt>
+ <dd>Beendet den Worker unmittelbar. Hierüber besteht dabei nicht die Möglichkeit, dem Worker die Gelegenheit für ein geordnetes Beenden von laufenden Operationen zu geben. Vielmehr wird der Worker sofort beendet. ServiceWorker Instanzen unterstützen diese Methode nicht.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<p>Das nachfolgende Beispiel zeigt wie ein {{domxref("Worker")}} mittels des {{domxref("Worker.Worker", "Worker()")}} Konstruktors erzeugt und verwendet wird:</p>
+
+<pre class="brush: js">var myWorker = new Worker('worker.js');
+var first = document.querySelector('#number1');
+var second = document.querySelector('#number2');
+
+first.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}</pre>
+
+<p>Ein vollständiges Beispiel findet sich hier: <a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Basic dedicated worker example</a> (<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">run dedicated worker</a>).</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#worker", "Worker")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>Die Unterstützung der einzelnen Worker ist abhängig vom Typ und variiert. Wie ein Worker konkret unterstützt wird, kann der Seite zu dem Worker Typ entnommen werden.</p>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3.5</td>
+   <td>10.0</td>
+   <td>10.6</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>Constructor <code>name</code> option</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(55)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onmessageerror</code></td>
+   <td>60</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(57)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3.5</td>
+   <td>10.0</td>
+   <td>11.5</td>
+   <td>5.1</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Constructor <code>name</code> option</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(55)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onmessageerror</code></td>
+   <td>60</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(57)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Cross-origin_worker_error_behaviour">Cross-origin worker error behaviour</h3>
+
+<p>In früheren Browserversionen kam es zu einem <code>SecurityError</code> bei dem Versuch ein Script für einen cross-origin worker zu laden. In neueren Browsern wird, aufgrund einer Änderung der Spezifikation, stattdessen ein {{event("error")}} Event erzeugt. Mehr über den Umgang mit solchen Fehlern ist hier zu finden: <a href="https://www.fxsitecompat.com/en-CA/docs/2016/loading-cross-origin-worker-now-fires-error-event-instead-of-throwing-worker-in-sandboxed-iframe-no-longer-allowed/">Loading cross-origin worker now fires error event instead of throwing; worker in sandboxed iframe no longer allowed</a>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="internal" href="/En/Using_web_workers" title="en/Using DOM workers">Using web workers</a></li>
+ <li><a href="/En/DOM/Worker/Functions_available_to_workers" title="https://developer.mozilla.org/En/DOM/Worker/Functions_available_to_workers">Functions available to workers</a></li>
+ <li>Andere Workers Typen {{ domxref("SharedWorker") }} und <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker</a>.</li>
+ <li>Nicht Standard, die Gecko-spezifischen Workers {{ domxref("ChromeWorker") }}, für Browser-Erweiterungen.</li>
+</ul>
diff --git a/files/de/web/api/xmlhttprequest/index.html b/files/de/web/api/xmlhttprequest/index.html
new file mode 100644
index 0000000000..913acfb17a
--- /dev/null
+++ b/files/de/web/api/xmlhttprequest/index.html
@@ -0,0 +1,710 @@
+---
+title: XMLHttpRequest
+slug: Web/API/XMLHttpRequest
+translation_of: Web/API/XMLHttpRequest
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p><code>XMLHttpRequest</code> ist ein <a href="/JavaScript" title="JavaScript">JavaScript</a> Objekt, das von Microsoft entwickelt und von Mozilla, Apple, und Google übernommen wurde. Es wird derzeit <a href="http://www.w3.org/TR/XMLHttpRequest/" title="http://www.w3.org/TR/XMLHttpRequest/">im W3C standardisiert</a>. Es bietet einen einfachen Weg, Daten von einem URL zu erhalten. Trotz seines Namens kann man mit <code>XMLHttpRequest</code> jede Art von Daten laden, nicht nur XML, und es unterstützt auch andere Protokolle als <a href="/en-US/docs/HTTP" title="HTTP">HTTP</a> (inklusive <code>file</code> und <code>ftp</code>).</p>
+
+<p>Eine Instanz von <code>XMLHttpRequest</code> erzeugt man ganz einfach so:</p>
+
+<pre>var myRequest = new XMLHttpRequest();
+</pre>
+
+<p>Für Näheres zur Verwendung von <code>XMLHttpRequest</code>, siehe <a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a>.</p>
+
+<h2 id="Übersicht_Methoden">Übersicht: Methoden</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code><a href="#XMLHttpRequest()" title="DOM/XMLHttpRequest#XMLHttpRequest()">XMLHttpRequest</a>(JSObject objParameters);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#abort()" title="DOM/XMLHttpRequest#abort()">abort</a>();</code></td>
+  </tr>
+  <tr>
+   <td><code>DOMString <a href="#getAllResponseHeaders()" title="DOM/XMLHttpRequest#getAllResponseHeaders()">getAllResponseHeaders</a>();</code></td>
+  </tr>
+  <tr>
+   <td><code>DOMString? <a href="#getResponseHeader()" title="DOM/XMLHttpRequest#getResponseHeader()">getResponseHeader</a>(DOMString header);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#open()" title="DOM/XMLHttpRequest#open()">open</a>(DOMString method, DOMString url, optional boolean async, optional DOMString? user, optional DOMString? password);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#overrideMimeType()" title="DOM/XMLHttpRequest#overrideMimeType()">overrideMimeType</a>(DOMString mime);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#send()" title="DOM/XMLHttpRequest#send()">send</a>();</code><br>
+    <code>void <a href="#send()" title="DOM/XMLHttpRequest#send()">send</a>(ArrayBuffer data);</code><br>
+    <code>void <a href="#send()" title="DOM/XMLHttpRequest#send()">send</a>(Blob data);</code><br>
+    <code>void <a href="#send()" title="DOM/XMLHttpRequest#send()">send</a>(Document data);</code><br>
+    <code>void <a href="#send()" title="DOM/XMLHttpRequest#send()">send</a>(DOMString? data);</code><br>
+    <code>void <a href="#send()" title="DOM/XMLHttpRequest#send()">send</a>(FormData data);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#setRequestHeader()" title="DOM/XMLHttpRequest#setRequestHeader()">setRequestHeader</a>(DOMString header, DOMString value);</code></td>
+  </tr>
+  <tr>
+   <th>Nicht-Standard Methoden</th>
+  </tr>
+  <tr>
+   <td><code>[noscript] void <a href="#init()" title="DOM/XMLHttpRequest#init()">init</a>(in nsIPrincipal principal, in nsIScriptContext scriptContext, in nsPIDOMWindow ownerWindow);</code></td>
+  </tr>
+  <tr>
+   <td><code>[noscript] void <a href="#openRequest()" title="DOM/XMLHttpRequest#openRequest()">openRequest</a>(in AUTF8String method, in AUTF8String url, in boolean async, in AString user, in AString password); </code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#sendAsBinary()" title="DOM/XMLHttpRequest#sendAsBinary()">sendAsBinary</a>(in DOMString body);</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Attribut</th>
+   <th>Typ</th>
+   <th>Beschreibung</th>
+  </tr>
+  <tr id="onreadystatechange">
+   <td>
+    <p><code>onreadystatechange</code></p>
+   </td>
+   <td><code>Function?</code></td>
+   <td>
+    <p>Ein JavaScript function Objekt, das bei jedem Wechsel des <code>readyState</code> Attributs aufgerufen wird. Das Callback wird aus dem Thread der Benutzerschnittstelle aufgerufen.</p>
+
+    <div class="warning"><strong>Warnung:</strong> Dies <em>sollte</em> nicht mit synchronen Anfragen und <em>darf</em> nicht aus nativem Code heraus verwendet werden.</div>
+   </td>
+  </tr>
+  <tr id="readyState">
+   <td><code>readyState</code></td>
+   <td><code>unsigned short</code></td>
+   <td>
+    <p>Der Status der Anfrage:</p>
+
+    <table class="standard-table">
+     <tbody>
+      <tr>
+       <td class="header">Wert</td>
+       <td class="header">Status</td>
+       <td class="header">Beschreibung</td>
+      </tr>
+      <tr>
+       <td><code>0</code></td>
+       <td><code>UNSENT</code></td>
+       <td><code>open()</code>wurde noch nicht aufgerufen.</td>
+      </tr>
+      <tr>
+       <td><code>1</code></td>
+       <td><code>OPENED</code></td>
+       <td><code>send()</code>wurde noch nicht aufgerufen.</td>
+      </tr>
+      <tr>
+       <td><code>2</code></td>
+       <td><code>HEADERS_RECEIVED</code></td>
+       <td><code>send()</code> wurde aufgerufen, und Headers sowie Status sind verfügbar.</td>
+      </tr>
+      <tr>
+       <td><code>3</code></td>
+       <td><code>LOADING</code></td>
+       <td>Download ist im Gange; <code>responseText</code> enthält bereits unvollständige Daten.</td>
+      </tr>
+      <tr>
+       <td><code>4</code></td>
+       <td><code>DONE</code></td>
+       <td>Der Vorgang ist abgeschlossen.</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr id="response">
+   <td><code>response</code></td>
+   <td>variiert</td>
+   <td>
+    <p>Der Entitätskörper der Antwort (response entity body) gemäss <code><a href="#responseType">responseType</a></code>, als ein <a href="/en-US/docs/JavaScript_typed_arrays/ArrayBuffer" title="JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a>, <a href="/en-US/docs/DOM/Blob" title="DOM/Blob"><code>Blob</code></a>, {{domxref("Document")}}, JavaScript Objekt (für "json"), oder string. Dies ist <code>null</code> falls die Anfrage nicht abgeschlossen ist oder erfolglos war.</p>
+   </td>
+  </tr>
+  <tr id="responseText">
+   <td><code>responseText</code> {{ReadOnlyInline}}</td>
+   <td><code>DOMString</code></td>
+   <td>Die Antwort auf die Anfrage als Text, oder <code>null</code> falls die Anfrage nicht abgeschlossen ist oder erfolglos war.</td>
+  </tr>
+  <tr id="responseType">
+   <td><code>responseType</code></td>
+   <td><code>XMLHttpRequestResponseType</code></td>
+   <td>
+    <p>Kann gesetzt werden, um den Datentyp der Antwort zu ändern.</p>
+
+    <table class="standard-table" style="width: auto;">
+     <tbody>
+      <tr>
+       <td class="header">Wert</td>
+       <td class="header">Datentyp der <code>response</code> Eigenschaft</td>
+      </tr>
+      <tr>
+       <td><code>""</code> (leerer String)</td>
+       <td>String (Das ist der Default)</td>
+      </tr>
+      <tr>
+       <td><code>"arraybuffer"</code></td>
+       <td><a href="/en-US/docs/JavaScript_typed_arrays/ArrayBuffer" title="JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a></td>
+      </tr>
+      <tr>
+       <td><code>"blob"</code></td>
+       <td>{{domxref("Blob")}}</td>
+      </tr>
+      <tr>
+       <td><code>"document"</code></td>
+       <td>{{domxref("Document")}}</td>
+      </tr>
+      <tr>
+       <td><code>"json"</code></td>
+       <td>JavaScript Objekt, geparsed aus einem JSON String, der vom Server zurückgegeben wird.</td>
+      </tr>
+      <tr>
+       <td><code>"text"</code></td>
+       <td>String</td>
+      </tr>
+      <tr>
+       <td><code>"moz-blob"</code></td>
+       <td>Wird von Firefox verwendet, um den Bezug partieller {{domxref("Blob")}} Daten von <code>progress</code> Events zu erlauben. Dadurch kann ein <code>progress</code> Event Handler bereits mit der Verarbeitung von Daten beginnen, während ihr Empfang noch läuft.</td>
+      </tr>
+      <tr>
+       <td><code>"moz-chunked-text"</code></td>
+       <td>
+        <p>Ähnlich wie <code>"text"</code>, aber streamt die Daten. Das bedeutet, dass der Wert in <code>response</code> nur während des <code>"progress"</code> Event verfügbar ist und jeweils nur die Daten enthält, die seit dem letzten <code>"progress"</code> Event eingetroffen sind.</p>
+
+        <p>Wenn auf <code>response</code> während eines <code>"progress"</code> Events zugegriffen wird, enthält es einen String mit den Daten. Andernfalls gibt es <code>null</code> zurück.</p>
+
+        <p>Dieser Modus funktioniert derzeit nur in Firefox.</p>
+       </td>
+      </tr>
+      <tr>
+       <td><code>"moz-chunked-arraybuffer"</code></td>
+       <td>
+        <p>Ähnlich wie <code>"arraybuffer"</code>, aber streamt die Daten. Das bedeutet, dass der Wert in <code>response</code> nur während des <code>"progress"</code> Event verfügbar ist und jeweils nur die Daten enthält, die seit dem letzten <code>"progress"</code> Event eingetroffen sind.</p>
+
+        <p>Wenn auf <code>response</code> während eines <code>"progress"</code> Events zugegriffen wird, enthält es einen <code>ArrayBuffer</code> mit den Daten. Andernfalls gibt es <code>null</code> zurück.</p>
+
+        <p>Dieser Modus funktioniert derzeit nur in Firefox.</p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+
+    <div class="note"><strong>Anmerkung:</strong> Ab Gecko 11.0  sowie WebKit build 528 kann man in diesen Browsern das <code>responseType</code> Attribut nicht mehr für synchrone Anfragen benutzen. Der Versuch löst einen <code>NS_ERROR_DOM_INVALID_ACCESS_ERR</code> Fehler aus. Diese Änderung wurde dem W3C zur Standardisierung vorgeschlagen.</div>
+   </td>
+  </tr>
+  <tr id="responseXML">
+   <td><code>responseXML</code> {{ReadOnlyInline}}</td>
+   <td><code>Document?</code></td>
+   <td>
+    <p>Die Antwort auf die Anfrage als DOM <code><a href="/en-US/docs/DOM/document" title="DOM/Document">Document</a></code> Objekt, oder <code>null</code> falls die Anfrage erfolglos war, noch nicht gesendet wurde, oder nicht als XML oder HTML geparst werden kann. Die Antwort wird geparst, als wäre sie ein <code>text/xml</code> Stream. Wenn der <code>responseType</code> auf <code>"document"</code> gesetzt wurde und die Anfrage asynchron gemacht wurde, wird die Antwort geparst, als wäre sie ein <code>text/html</code> Stream.</p>
+
+    <div class="note"><strong>Anmerkung:</strong> Falls der Server nicht den <code>text/xml</code> Inhaltstyp-Header auf die Antwort anwendet, kann man<code> overrideMimeType()</code> verwenden, um <code>XMLHttpRequest</code> zu zwingen, sie dennoch als XML zu parsen.</div>
+   </td>
+  </tr>
+  <tr id="status">
+   <td><code>status</code> {{ReadOnlyInline}}</td>
+   <td><code>unsigned short</code></td>
+   <td>Der Status der Antwort auf die Anfrage. Das ist der HTTP Ergebnis-Code (<code>status</code> ist z.B. 200 für eine erfolgreiche Anfrage).</td>
+  </tr>
+  <tr id="statusText">
+   <td><code>statusText</code> {{ReadOnlyInline}}</td>
+   <td><code>DOMString</code></td>
+   <td>Der Antwort-String, der vom HTTP Server zurückgesendet wurde. Im Gegensatz zu <code>status</code> beinhaltet dies den ganzen Text der Antwortnachricht (z.B. "<code>200 OK</code>").</td>
+  </tr>
+  <tr id="timeout">
+   <td><code>timeout</code></td>
+   <td><code>unsigned long</code></td>
+   <td>
+    <p>Die Anzahl Millisekunden, die eine Anfrage dauern darf, bevor sie automatisch abgebrochen wird. Ein Wert von 0 (das ist die Voreinstellung) bedeutet, dass es kein timeout gibt.</p>
+
+    <div class="note"><strong>Anmerkung:</strong> Für synchrone Anfragen mit einem besitzenden Fenster darf man kein timeout verwenden.</div>
+   </td>
+  </tr>
+  <tr id="upload">
+   <td><code>upload</code></td>
+   <td><code>XMLHttpRequestUpload</code></td>
+   <td>Das Hochladen kann mitverfolgt werden, indem man einen Event Listener zu <code>upload</code> hinzufügt.</td>
+  </tr>
+  <tr id="withCredentials">
+   <td><code>withCredentials</code></td>
+   <td><code>boolean</code></td>
+   <td>
+    <p>Zeigt an, ob Site-übergreifende <code>Access-Control</code> Anfragen mit Credentials wie Cookies oder Autorisierungs-Headers durchgeführt werden sollen oder nicht. Die Voreinstellung ist <code>false</code>.</p>
+
+    <div class="note"><strong>Anmerkung:</strong> Anfragen an die ursprüngliche Site sind davon niemals betroffen.</div>
+
+    <div class="note"><strong>Anmerkung:</strong> Ab Gecko 11.0 kann man das <code>withCredentials</code> Attribut nicht mehr für synchrone Anfragen verwenden. Der Versuch löst einen <code>NS_ERROR_DOM_INVALID_ACCESS_ERR</code> Fehler aus.</div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Nicht-Standard_Eigenschaften">Nicht-Standard Eigenschaften</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Attribut</th>
+   <th>Typ</th>
+   <th>Description</th>
+  </tr>
+  <tr id="channel">
+   <td><code>channel</code> {{ReadOnlyInline}}</td>
+   <td>{{Interface("nsIChannel")}}</td>
+   <td>Der Kanal, der vom Objekt zur Durchführung der Anfrage verwendet wurde. Das ist <code>null</code> falls der Kanal noch nicht erzeugt worden ist. Im Falle von mehrteiligen Anfragen ist das der anfängliche Kanal, nicht derjenige der anderen Teile der mehrteiligen Anfrage.<br>
+    <strong>Zugriff nur mit erhöhten Rechten.</strong></td>
+  </tr>
+  <tr id="mozAnon">
+   <td><code>mozAnon</code> {{ReadOnlyInline}}</td>
+   <td><code>boolean</code></td>
+   <td>
+    <p>Falls <code>true</code> wird die Anfrage ohne Cookie und Authentisierungs-Headers gesendet.</p>
+   </td>
+  </tr>
+  <tr id="mozSystem">
+   <td><code>mozSystem</code> {{ReadOnlyInline}}</td>
+   <td><code>boolean</code></td>
+   <td>
+    <p>Falls <code>true</code> wird die Regel, die nur Anfragen zum gleichen Ursprung erlaubt, für diese Anfrage nicht durchgesetzt.</p>
+   </td>
+  </tr>
+  <tr id="mozBackgroundRequest">
+   <td><code>mozBackgroundRequest</code></td>
+   <td><code>boolean</code></td>
+   <td>
+    <p>Zeigt an, ob das Objekt eine Service-Anfrage im Hintergrund darstellt. Falls <code>true</code> wird keine Lastgruppe mit der Anfrage verknüpft, und die Anzeige von Sicherheits-Dialogen wird verhindert. <strong>Zugriff nur mit erhöhten Rechten.</strong></p>
+
+    <p>In Fällen, wo normalerweise ein Sicherheits-Dialog angezeigt würde (wie Autorisierungs- oder Zertifikatsfehler-Benachrichtigungen), schlägt die Anfrage stattdessen einfach fehl.</p>
+
+    <div class="note"><strong>Anmerkung: </strong>Diese Eigenschaft muss vor dem Aufrufen von <code>open()</code> gesetzt werden..</div>
+   </td>
+  </tr>
+  <tr id="mozResponseArrayBuffer">
+   <td><code>mozResponseArrayBuffer</code>  {{obsolete_inline("6")}} {{ReadOnlyInline}}</td>
+   <td><a href="/en-US/docs/JavaScript_typed_arrays/ArrayBuffer" title="JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a></td>
+   <td>Die Antwort auf die Anfrage, als typisiertes JavaScript Array. Dies ist <code>NULL</code> falls die Anfrage erfolglos war oder noch nicht gesendet wurde.</td>
+  </tr>
+  <tr id="multipart">
+   <td><code>multipart</code> {{obsolete_inline("22")}}</td>
+   <td><code>boolean</code></td>
+   <td>
+    <p><strong>Dieses nur in Gecko verfügbare Feature wurde in Firefox/Gecko 22 entfernt.</strong> Bitte verwende stattdessen <a href="/en-US/docs/Server-sent_events" title="Server-sent_events">Server-Sent Events</a>, <a href="/en-US/docs/WebSockets" title="WebSockets">Web Sockets</a> oder <code>responseText</code> aus <code>progress </code>Events.</p>
+
+    <p>Zeigt an, ob als Antwort ein Stream von möglicherweise mehreren XML Dokumenten erwartet wird. Wird dies auf <code>true</code> gesetzt, muss der Inhaltstyp des ersten Teils der Antwort <code>multipart/x-mixed-replace</code> sein, sonst tritt ein Fehler auf. Alle Anfragen müssen asynchron sein.</p>
+
+    <p>Dies ermöglicht die Unterstützung von Server Push; für jedes XML Dokument, das in die Antwort auf diese Anfrage geschrieben wird, wird ein neues XML DOM Dokument erzeugt, und zwischen den Dokumenten wird der <code>onload</code> Handler aufgerufen.</p>
+
+    <div class="note"><strong>Anmerkung:</strong> Wenn dies gesetzt ist, werden <code>onload</code> und andere Event Handler nicht zurückgesetzt, nachdem das erste XML Dokument geladen ist, und der <code>onload</code> Handler wird nach Erhalt jedes Teils der Antwort aufgerufen.</div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Konstruktor">Konstruktor</h2>
+
+<h3 id="XMLHttpRequest()" name="XMLHttpRequest()">XMLHttpRequest()</h3>
+
+<p>Der Konstruktor initiiert ein <code>XMLHttpRequest</code> Objekt. Er muss vor allen anderen Methoden aufgerufen werden.</p>
+
+<p>Gecko/Firefox 16 fügt einen nicht-standard Parameter zum Konstruktor hinzu, der den anonymen Modus einschalten kann (siehe <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=692677" title="692677 – Relax same-origin XHR restrictions for privileged applications">Bug 692677</a>). Das <code>mozAnon</code> flag auf <code>true</code> zu setzen, hat einen ähnlichen Effekt wie der <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#dom-anonxmlhttprequest" title="see AnonXMLHttpRequest in the XMLHttpRequest specification"><code>AnonXMLHttpRequest()</code></a> Konstruktor, der in der XMLHttpRequest Spezifikation beschrieben ist, aber noch in keinem Browser implementiert wurde (Stand September 2012).</p>
+
+<pre>XMLHttpRequest (
+  JSObject objParameters
+);</pre>
+
+<h5 id="Parameter_(nicht-standard)">Parameter (nicht-standard)</h5>
+
+<dl>
+ <dt><code>objParameters</code></dt>
+ <dd>Es gibt zwei Flags, die gesetzt werden können:
+ <dl>
+  <dt><code>mozAnon</code></dt>
+  <dd>Boolean: Wenn dieses Flag auf <code>true</code> gesetzt ist, wird der Browser weder den Ursprung der Anfrage noch <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#user-credentials" title="Defintion of “User credentials” in the XMLHttpRequest specification.">Anmeldedaten</a> übermitteln, wenn er Daten anfordert. Das heisst vor allem auch, dass keine Cookies gesendet werden, sofern sie nicht ausdrücklich mit setRequestHeader hinzugefügt wurden.</dd>
+  <dt><code>mozSystem</code></dt>
+  <dd>Boolean: Dieses Flag auf <code>true</code> zu setzen, ermöglicht das Herstellen von Cross-Site Verbindungen, ohne dass der Server dem mittels CORS zustimmen muss. <em>Erfodert das Setzen von <code>mozAnon: true</code>. D.h. das kann nicht mit dem Senden von Cookies oder anderen Anmeldeinformationen kombiniert werden. Dies <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=692677#c68" title="Bug 692677 comment 68">funktioniert nur in privilegierten (reviewed) Apps</a>; es klappt nicht auf beliebigen Webseiten, die in Firefox geladen werden.</em></dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<h3 id="abort()" name="abort()">abort()</h3>
+
+<p>Bricht die Anfrage ab, falls sie bereits gesendet wurde.</p>
+
+<h3 id="getAllResponseHeaders()" name="getAllResponseHeaders()">getAllResponseHeaders()</h3>
+
+<pre>DOMString getAllResponseHeaders();</pre>
+
+<p>Liefert alle Antwort-Header als String, oder <code>null</code> falls keine Antwort empfangen wurde.<strong> </strong></p>
+
+<p><strong>Anmerkung:</strong> Für mehrteilige Anfragen gibt dies die Header des <em>aktuellen </em>Teils der Anfrage zurück, nicht die des ursprünglichen Kanals.</p>
+
+<h3 id="getResponseHeader()" name="getResponseHeader()">getResponseHeader()</h3>
+
+<pre>DOMString? getResponseHeader(DOMString <var>header</var>);</pre>
+
+<p>Liefert den String mit dem Text des angegebenen Headers, oder <code>null</code> falls die Antwort noch nicht empfangen wurde oder der Header in der Antwort nicht existiert.</p>
+
+<h3 id="open()" name="open()">open()</h3>
+
+<p>Initialisiert eine Anfrage. Diese Methode ist nur zur Verwendung in JavaScript Code; um eine Anfrage aus nativem Code zu initialisieren, ist stattdessen<code> </code><a href="/en-US/docs/nsIXMLHttpRequest#openRequest()" title="XMLHttpRequest#openRequest()"><code>openRequest()</code></a> zu benutzen.</p>
+
+<div class="note"><strong>Anmerkung:</strong> Der Aufruf dieser Methode für eine bereits aktive Anfrage (eine, für die <code>open()</code>oder <code>openRequest() </code>schon ausgeführt wurde) ist gleichwertig mit  dem Aufruf von <code>abort()</code>.</div>
+
+<pre>void open(
+   DOMString <var>method</var>,
+   DOMString <var>url</var>,
+   optional boolean <var>async</var>,
+   optional DOMString <var>user</var>,
+   optional DOMString <var>password</var>
+);
+</pre>
+
+<h6 id="Parameter">Parameter</h6>
+
+<dl>
+ <dt><code>method</code></dt>
+ <dd>Die zu benutzende HTTP Methode,  wie "GET", "POST", "PUT", "DELETE", etc. Wird für nicht-HTTP(S) URLs ignoriert.</dd>
+ <dt><code>url</code></dt>
+ <dd>Der URL, an den die Anfrage geschickt werden soll.</dd>
+ <dt><code>async</code></dt>
+ <dd>Ein optionaler boole'scher Parameter mit Defaultwert <code>true</code>, der angibt, ob die Operation asynchron ausgeführt werden soll. Wenn dieser Wert <code>false</code> ist, kehrt die <code>send()</code>Methode nicht zurück, bis die Antwort vollständig empfangen worden ist. Ist er <code>true</code>, kehrt sie sofort zurück, und die Benachrichtigung über die vollendete Transaktion erfolgt mittels Events. Dies <em>muss</em> <code>true</code> sein falls das <code>multipart</code> Attribut <code>true</code> ist, sonst wird ein Fehler ausgelöst.</dd>
+ <dt><code>user</code></dt>
+ <dd>Der optionale Benutzername zum Zweck der Authentisierung; ohne Angabe ist dies ein leerer String.</dd>
+ <dt><code>password</code></dt>
+ <dd>Das optionale Passwort zum Zweck der Authentisierung; ohne Angabe ist dies ein leerer String.</dd>
+</dl>
+
+<h3 id="overrideMimeType()" name="overrideMimeType()">overrideMimeType()</h3>
+
+<p>Übergeht den vom Server zurückgegebenen MIME Typ. Dies kann beispielsweise benutzt werden, um zu erzwingen, dass ein Stream als text/xml behandelt und geparst wird, selbst wenn ihn der Server nicht als das meldet. Diese Methode muss vor <code>send()</code> aufgerufen werden.</p>
+
+<pre>void overrideMimeType(DOMString <var>mimetype</var>);</pre>
+
+<h3 id="send()" name="send()">send()</h3>
+
+<p>Sendet die Anfrage. Falls die Anfage asynchron ist (was der Default ist), kehrt diese Methode zurück, sobald die Anfrage gesendet ist. Ist die Anfrage synchron, kehrt diese Methode nicht zurück, bis die Antwort angekommen (oder ein Timeout aufgetreten) ist.</p>
+
+<div class="note"><strong>Anmerkung:</strong> Jegliche zu setzende Event Handler / Listener müssen vor dem Aufruf von <code>send()</code> gesetzt werden.</div>
+
+<pre>void send();
+void send(ArrayBuffer <var>data</var>);
+void send(Blob <var>data</var>);
+void send(Document <var>data</var>);
+void send(DOMString? <var>data</var>);
+void send(FormData <var>data</var>);</pre>
+
+<h6 id="Anmerkungen">Anmerkungen</h6>
+
+<p>Falls <em>data</em> ein <code>Document</code> ist, so wird dieses vor dem Senden serialisiert. Beim Senden eines <code>Document</code> senden Firefox Versionen vor Version 3 die Anfrage immer encodiert als UTF-8; <a href="/en-US/docs/Firefox_3" rel="internal" title="Firefox_3">Firefox 3</a> sendet das <code>Document</code> richtigerweise mit dem angegebenen <code>body.xmlEncoding</code>, oder UTF-8 falls keines angegeben wurde.</p>
+
+<p>Falls es ein <code>nsIInputStream</code> ist, muss er kompatibel sein mit der <code>setUploadStream()</code>Methode des <code>nsIUploadChannel</code>. In diesem Fall wird die Länge des Inhalts in einem Content-Length Header zur Anfrage hinzugefügt, dessen Wert mit der <code>available()</code>Methode des <code>nsIInputStream</code> ermittelt wird. Jegliche Header, die am Anfang des Streams enthalten sind, werden als Teil des Nachrichtenkörpers behandelt. Der MIME Typ des Streams sollte vor dem Aufruf von <code>send()</code> angegeben werden, indem der Content-Type Header mit der  <a href="/en-US/docs/nsIXMLHttpRequest#setRequestHeader()" title="XMLHttpRequest#setRequestHeader()"><code>setRequestHeader()</code></a> Methode gesetzt wird.</p>
+
+<p>Der beste Weg, um binäre Inhalte zu senden (wie beim Hochladen einer Datei), ist die Verwendung von <a href="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer" title="JavaScript/Typed_arrays/ArrayBuffer">ArrayBuffern</a> oder <a href="/en-US/docs/DOM/Blob" title="DOM/Blob">Blobs</a> in Verbindung mit der <code>send()</code> Methode. Wenn jedoch <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="JavaScript/Reference/Global_Objects/JSON/stringify">stringifizierbare</a> Rohdaten gesendet werden sollen, ist die <a href="#sendAsBinary()" title="DOM/XMLHttpRequest#sendAsBinary()"><code>sendAsBinary()</code></a> Methode zu verwenden.</p>
+
+<h3 id="setRequestHeader()" name="setRequestHeader()">setRequestHeader()</h3>
+
+<p>Setzt den Wert eines HTTP Anfrage-Headers. Aufrufe von <code>setRequestHeader()</code> müssen nach <a href="#open"><code>open()</code></a>, aber vor <code>send()</code> erfolgen.</p>
+
+<pre>void setRequestHeader(
+   DOMString <var>header</var>,
+   DOMString <var>value</var>
+);
+</pre>
+
+<h6 id="Parameter_2">Parameter</h6>
+
+<dl>
+ <dt><code>header</code></dt>
+ <dd>Der Name des zu setzenden Headers.</dd>
+ <dt><code>value</code></dt>
+ <dd>Der Wert des zu setzenden Headers.</dd>
+</dl>
+
+<h3 id="Nicht-Standard_Methoden">Nicht-Standard Methoden</h3>
+
+<h4 id="init()">init()</h4>
+
+<p>Initialisiert das Objekt für die Verwendung aus C++ Code.</p>
+
+<div class="warning"><strong>Warnung:</strong> Diese Methode darf <em>nicht</em> aus JavaScript heraus aufgerufen werden.</div>
+
+<pre>[noscript] void init(
+   in nsIPrincipal principal,
+   in nsIScriptContext scriptContext,
+   in nsPIDOMWindow ownerWindow
+);
+</pre>
+
+<h5 id="Parameter_3">Parameter</h5>
+
+<dl>
+ <dt><code>principal</code></dt>
+ <dd>Das Prinzipal, das für die Anfrage benutzt werden soll; darf nicht <code>null</code> sein.</dd>
+ <dt><code>scriptContext</code></dt>
+ <dd>Der Skript-Kontext, der für die Anfrage benutzt werden soll; darf nicht <code>null</code> sein.</dd>
+ <dt><code>ownerWindow</code></dt>
+ <dd>Das Fenster, das zu der Anfrage gehört; darf <code>null</code> sein.</dd>
+</dl>
+
+<h4 id="openRequest()">openRequest()</h4>
+
+<p>Initialisiert eine Anfrage. Diese Methode ist zur Verwendung in nativem Code; um eine Anfrage in JavaScript Code zu initialisieren, ist stattdessen <a href="/en-US/docs/nsIXMLHttpRequest#open()" title="XMLHttpRequest#open()"><code>open()</code></a> zu verwenden. Siehe Dokumentation für <code>open()</code>.</p>
+
+<h3 id="sendAsBinary()">sendAsBinary()</h3>
+
+<p>Eine Variante der <code>send()</code> Methode, die binäre Daten schickt.</p>
+
+<pre>void sendAsBinary(
+   in DOMString body
+);
+</pre>
+
+<p>Diese Methode, zusammen mit der <a href="/en-US/docs/DOM/FileReader#readAsBinaryString()" title="DOM/FileReader#readAsBinaryString()"><code>readAsBinaryString</code></a> Methode der <a href="/en-US/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a> API, ermöglichen <a href="https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files" title="DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">das Lesen und den <strong>Upload</strong> jeglicher Dateitypen</a> und das <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="JavaScript/Reference/Global_Objects/JSON/stringify">Stringifizieren</a> der Rohdaten.</p>
+
+<h5 id="Parameter_4">Parameter</h5>
+
+<dl>
+ <dt><code>body</code></dt>
+ <dd>Der Körper der Anfrage als DOMstring. Diese Daten werden durch Beschneiden (Entfernen des höherwertigen Bytes jedes Zeichens) in Einzel-Byte-Zeichen umgewandelt.</dd>
+</dl>
+
+<h5 id="sendAsBinary()_polyfill"><code>sendAsBinary()</code> polyfill</h5>
+
+<p>Da <code>sendAsBinary()</code> ein experimentelles Feature ist, kommt hier <strong>ein Polyfill</strong> für Browser, die <code>sendAsBinary()</code> <em>nicht </em>unterstützen, dafür aber <a href="/en-US/docs/JavaScript/Typed_arrays" title="JavaScript/Typed_arrays">typisierte Arrays</a>.</p>
+
+<pre class="brush: js">/*\
+|*|
+|*|  :: XMLHttpRequest.prototype.sendAsBinary() Polyfill ::
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()
+|*|
+\*/
+
+if (!XMLHttpRequest.prototype.sendAsBinary) {
+  XMLHttpRequest.prototype.sendAsBinary = function (sData) {
+    var nBytes = sData.length, ui8Data = new Uint8Array(nBytes);
+    for (var nIdx = 0; nIdx &lt; nBytes; nIdx++) {
+      ui8Data[nIdx] = sData.charCodeAt(nIdx) &amp; 0xff;
+    }
+    /* sende als ArrayBufferView...: */
+    this.send(ui8Data);
+    /* ...oder als ArrayBuffer (altmodisch)...: this.send(ui8Data.buffer); */
+  };
+}</pre>
+
+<div class="note"><strong>Anmerkung:</strong> Dieses Polyfill kann mit zwei Datentypen als Argument für <code>send()</code> gebaut werden: einem <a href="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer" title="JavaScript/Typed_arrays/ArrayBuffer"><code>ArrayBuffer</code></a> (<code>ui8Data.buffer</code> – kommentierter Code) oder einer <a href="/en-US/docs/JavaScript/Typed_arrays/ArrayBufferView" title="JavaScript/Typed_arrays/ArrayBufferView"><code>ArrayBufferView</code></a> (<code>ui8Data</code>, das ist ein <a href="/en-US/docs/JavaScript/Typed_arrays/Uint8Array" title="JavaScript/Typed_arrays/Uint8Array">typisiertes Array von 8-bit Ganzzahlen ohne Vorzeichen</a> – unkommentierter Code). Wenn man jedoch in Google Chrome versucht, einen <code>ArrayBuffer</code> zu senden, erscheint die folgende Warnmeldung: <code>ArrayBuffer is deprecated in XMLHttpRequest.send(). Use ArrayBufferView instead.</code></div>
+
+<h2 id="Anmerkungen_2">Anmerkungen</h2>
+
+<ul>
+ <li class="note">Standardmässig begrenzt Firefox 3 die Anzahl gleichzeitiger <code>XMLHttpRequest</code> Verbindungen pro Server auf 6 (frühere Versionen begrenzen dies auf 2 pro Server). Manche interaktiven Websites können eine <code>XMLHttpRequest</code> Verbindung offen halten, so dass das Öffnen mehrerer Sitzungen auf solchen Sites dazu führen kann, dass der Browser auf eine Art und Weise hängen bleibt, dass das Fenster nicht mehr neu gezeichnet wird und Steuerelemente nicht mehr reagieren. Dieser Wert lässt sich ändern durch Editieren der Voreinstellung <code>network.http.max-persistent-connections-per-server</code> in <code><a class="linkification-ext" href="/about:config" title="Linkification: about:config">about:config</a></code>.</li>
+ <li class="note">Ab Gecko 7 werden Header, die durch {{manch("setRequestHeader")}} gesetzt wurden, mit der Anfrage mitgeschickt, wenn einer Umleitung gefolgt wird. Zuvor wurden diese Header nicht gesendet.</li>
+ <li class="note"><code>XMLHttpRequest</code> ist in Gecko implementiert mittels der {{interface("nsIXMLHttpRequest")}}, {{interface("nsIXMLHttpRequestEventTarget")}}, und {{interface("nsIJSXMLHttpRequest")}} Schnittstellen.</li>
+</ul>
+
+<h4 class="note" id="Events">Events</h4>
+
+<p><code>onreadystatechange</code> als eine Eigenschaft der <code>XMLHttpRequest</code> Instanz wird von allen Browsern unterstützt.</p>
+
+<p>Seither wurden einige zusätzliche Event Handler in verschiedenen Browsern implementiert (<code>onload</code>, <code>onerror</code>, <code>onprogress</code>, etc.). Diese werden in Firefox unterstützt. Für Genaueres, siehe {{interface("nsIXMLHttpRequestEventTarget")}} und <a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a>.</p>
+
+<p>Neuere Browser, inklusive Firefox, unterstützen das 'Horchen' nach <code>XMLHttpRequest </code>Ereignissen mittels der Standard <code><a href="/en-US/docs/DOM/element.addEventListener" title="element.addEventListener">addEventListener</a></code> APIs zusätzlich zum Setzen von <code>on*</code> Eigenschaften auf eine Handler Funktion.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Grundsätzliche Unterstützung (XHR1)</td>
+   <td>1</td>
+   <td>1.0</td>
+   <td>5 (via ActiveXObject)<br>
+    7 (XMLHttpRequest)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1.2</td>
+  </tr>
+  <tr>
+   <td><code>send(ArrayBuffer)</code></td>
+   <td>9</td>
+   <td>9</td>
+   <td>{{compatUnknown}}</td>
+   <td>11.60</td>
+   <td>{{compatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>send(Blob)</code></td>
+   <td>7</td>
+   <td>3.6</td>
+   <td>{{compatUnknown}}</td>
+   <td>12</td>
+   <td>{{compatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>send(FormData)</code></td>
+   <td>6</td>
+   <td>4</td>
+   <td>{{compatUnknown}}</td>
+   <td>12</td>
+   <td>{{compatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>sendAsBinary(DOMString)</code></td>
+   <td>{{compatNo}} – benutze <a href="#sendAsBinary%28%29_polyfill" title="sendAsBinary() polyfill">polyfill</a></td>
+   <td>1.9</td>
+   <td>{{compatUnknown}}</td>
+   <td>{{compatUnknown}}</td>
+   <td>{{compatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>response</code></td>
+   <td>10</td>
+   <td>6</td>
+   <td>10</td>
+   <td>11.60</td>
+   <td>{{compatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>responseType</code> = 'arraybuffer'</td>
+   <td>10</td>
+   <td>6</td>
+   <td>10</td>
+   <td>11.60</td>
+   <td>{{compatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>responseType</code> = 'blob'</td>
+   <td>19</td>
+   <td>6</td>
+   <td>10</td>
+   <td>12</td>
+   <td>{{compatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>responseType</code> = 'document'</td>
+   <td>18</td>
+   <td>11</td>
+   <td>10</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>responseType</code> = 'json'</td>
+   <td>{{CompatNo}}</td>
+   <td>10</td>
+   <td>{{CompatNo}}</td>
+   <td>12</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Progress Events</td>
+   <td>7</td>
+   <td>3.5</td>
+   <td>10</td>
+   <td>12</td>
+   <td>{{compatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>withCredentials</code></td>
+   <td>3</td>
+   <td>3.5</td>
+   <td>10</td>
+   <td>12</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td><code>timeout</code></td>
+   <td>{{CompatNo}}</td>
+   <td>12.0</td>
+   <td>8</td>
+   <td>{{compatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>responseType</code> = 'moz-blob'</td>
+   <td>{{CompatNo}}</td>
+   <td>12.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome für Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundsätzliche Unterstützung</td>
+   <td>{{CompatUnknown}}</td>
+   <td>0.16</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Gecko_Anmerkungen">Gecko Anmerkungen</h3>
+
+<p>Gecko 11.0 {{geckoRelease("11.0")}} entfernte die Unterstützung für die Verwendung der <code>responseType</code> und <code>withCredentials</code> Attribute bei der Durchführung synchroner Anfragen. Der Versuch löst einen <code>NS_ERROR_DOM_INVALID_ACCESS_ERR</code> Fehler aus. Diese Änderung wurde dem W3C zur Standardisierung vorgeschlagen.</p>
+
+<p>Gecko 12.0 {{geckoRelease("12.0")}} und spätere unterstützen die Verwendung von <code>XMLHttpRequest</code> zum Lesen von <a href="/en-US/docs/data_URIs" title="data_URIs"><code>data:</code> URLs</a>.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>MDN Artikel über XMLHttpRequest:
+  <ul>
+   <li><a href="/en-US/docs/AJAX/Getting_Started" title="AJAX/Getting_Started">AJAX - Getting Started</a></li>
+   <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+   <li><a href="/en-US/docs/HTML_in_XMLHttpRequest" title="HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a></li>
+   <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="XMLHttpRequest/FormData"><code>FormData</code></a></li>
+  </ul>
+ </li>
+ <li>XMLHttpRequest Referencen von W3C und Browserherstellern:
+  <ul>
+   <li><a href="http://www.w3.org/TR/XMLHttpRequest1/">W3C: XMLHttpRequest</a> (base features)</li>
+   <li><a href="http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html" title="http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html">W3C: XMLHttpRequest</a> (latest editor's draft with extensions to the base functionality, formerly XMLHttpRequest Level 2)</li>
+   <li><a href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/html/xmobjxmlhttprequest.asp">Microsoft documentation</a></li>
+   <li><a href="http://developer.apple.com/internet/webcontent/xmlhttpreq.html">Apple developers' reference</a></li>
+  </ul>
+ </li>
+ <li><a href="http://jibbering.com/2002/4/httprequest.html">"Using the XMLHttpRequest Object" (jibbering.com)</a></li>
+ <li><a href="http://www.peej.co.uk/articles/rich-user-experience.html">XMLHttpRequest - REST and the Rich User Experience</a></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/file/xhr2/">HTML5 Rocks - New Tricks in XMLHttpRequest2</a></li>
+</ul>
diff --git a/files/de/web/api/xmlhttprequest/using_xmlhttprequest/index.html b/files/de/web/api/xmlhttprequest/using_xmlhttprequest/index.html
new file mode 100644
index 0000000000..f15901a388
--- /dev/null
+++ b/files/de/web/api/xmlhttprequest/using_xmlhttprequest/index.html
@@ -0,0 +1,789 @@
+---
+title: Using XMLHttpRequest
+slug: Web/API/XMLHttpRequest/Using_XMLHttpRequest
+translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest
+---
+<div><font><font>{{APIRef ("XMLHttpRequest")}}</font></font></div>
+
+<p><span class="seoSummary"><font><font>In diesem Handbuch wird erläutert, wie Sie mit {{domxref ("XMLHttpRequest")}} </font></font><a href="/en-US/docs/Web/HTTP"><font><font>HTTP-</font></font></a><font><font> Anforderungen </font><font>ausgeben </font><font>, um Daten zwischen der Website und einem Server auszutauschen</font></font></span><font><font> . </font><font>Beispiele für häufig vorkommende und unklarere Anwendungsfälle </font></font><code>XMLHttpRequest</code><font><font>sind enthalten.</font></font></p>
+
+<p><font><font>Um eine HTTP-Anfrage zu senden, erstellen Sie ein </font></font><code>XMLHttpRequest</code><font><font>Objekt, öffnen Sie eine URL und senden Sie die Anfrage. </font><font>Nach Abschluss der Transaktion enthält das Objekt nützliche Informationen wie den Antworttext und den </font></font><a href="/en-US/docs/Web/HTTP/Status"><font><font>HTTP-Status</font></font></a><font><font> des Ergebnisses.</font></font></p>
+
+<pre class="brush: js notranslate">function reqListener () {
+  console.log(this.responseText);
+}
+
+var oReq = new XMLHttpRequest();
+oReq.addEventListener("load", reqListener);
+oReq.open("GET", "http://www.example.org/example.txt");
+oReq.send();</pre>
+
+<h2 id="Arten_von_Anfragen"><font><font>Arten von Anfragen</font></font></h2>
+
+<div class="blockIndicator note">
+<p><font><font>Eine Anforderung über </font></font><code>XMLHttpRequest</code><font><font>kann die Daten auf zwei Arten asynchron oder synchron abrufen. </font><font>Die Art der Anforderung wird durch das optionale </font></font><code>async</code><font><font>Argument (das dritte Argument) bestimmt, das für die Methode {{domxref ("XMLHttpRequest.open ()")}} festgelegt wird. </font><font>Wenn dieses Argument angegeben ist </font></font><code>true</code><font><font>oder nicht, </font></font><code>XMLHttpRequest</code><font><font>wird das asynchron verarbeitet, andernfalls wird der Prozess synchron behandelt. </font><font>Eine ausführliche Diskussion und Demonstration dieser beiden Arten von Anforderungen finden Sie auf der Seite für </font></font><a href="/en-US/docs/DOM/XMLHttpRequest/Synchronous_and_Asynchronous_Requests"><font><font>synchrone und asynchrone Anforderungen</font></font></a><font><font> . </font><font>Verwenden Sie keine synchronen Anforderungen außerhalb von Web Workers.</font></font></p>
+</div>
+
+<div class="note"><strong><font><font>Hinweis:</font></font></strong><font><font> Ab Gecko 30.0 {{geckoRelease ("30.0")}} sind synchrone Anforderungen im Hauptthread aufgrund der negativen Auswirkungen auf die Benutzererfahrung veraltet.</font></font></div>
+
+<div class="note"><strong><font><font>Hinweis:</font></font></strong><font><font> Die Konstruktorfunktion </font></font><code>XMLHttpRequest</code><font><font>ist nicht nur auf XML-Dokumente beschränkt. </font><font>Es beginnt mit </font></font><strong><font><font>"XML",</font></font></strong><font><font> da das Hauptformat, das ursprünglich für den asynchronen Datenaustausch verwendet wurde, bei der Erstellung XML war</font></font></div>
+
+<h2 id="Umgang_mit_Antworten"><font><font>Umgang mit Antworten</font></font></h2>
+
+<p><font><font>Es gibt verschiedene Arten von </font></font><a href="https://xhr.spec.whatwg.org/"><font><font>Antwortattributen,</font></font></a><font><font> die durch die Living Standard-Spezifikation für den Konstruktor {{domxref ("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest ()")}} definiert sind. </font><font>Diese teilen dem Kunden die </font></font><code>XMLHttpRequest</code><font><font>wichtigen Informationen über den Status der Antwort mit. </font><font>In den folgenden Abschnitten werden einige Fälle beschrieben, in denen der Umgang mit Nicht-Text-Antworttypen möglicherweise manipuliert und analysiert wird.</font></font></p>
+
+<h3 id="Analysieren_und_Bearbeiten_der_responseXML-Eigenschaft"><font><font>Analysieren und Bearbeiten der responseXML-Eigenschaft</font></font></h3>
+
+<p>If you use <code>XMLHttpRequest</code> to get the content of a remote XML document, the {{domxref("XMLHttpRequest.responseXML", "responseXML")}} property will be a DOM object containing a parsed XML document. This could prove difficult to manipulate and analyze. There are four primary ways of analyzing this XML document:</p>
+
+<ol>
+ <li>Using <a href="/en-US/docs/Web/XPath">XPath</a> to address (or point to) parts of it.</li>
+ <li>Manually <a href="/en-US/docs/Web/Guide/Parsing_and_serializing_XML">Parsing and serializing XML</a> to strings or objects.</li>
+ <li>Using {{domxref("XMLSerializer")}} to serialize <strong>DOM trees to strings or to files</strong>.</li>
+ <li>{{jsxref("RegExp")}} can be used if you always know the content of the XML document beforehand. You might want to remove line breaks, if you use <code>RegExp</code> to scan with regard to line breaks. However, this method is a "last resort" since if the XML code changes slightly, the method will likely fail.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note:</strong> <code>XMLHttpRequest</code> can now interpret HTML for you using the {{domxref("XMLHttpRequest.responseXML", "responseXML")}} property. Read the article about <a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a> to learn how to do this.</p>
+</div>
+
+<h3 id="Processing_a_responseText_property_containing_an_HTML_document">Processing a responseText property containing an HTML document</h3>
+
+<p>If you use <code>XMLHttpRequest</code> to get the content of a remote HTML webpage, the {{domxref("XMLHttpRequest.responseText", "responseText")}} property is a string containing the raw HTML. This could prove difficult to manipulate and analyze. There are three primary ways to analyze and parse this raw HTML string:</p>
+
+<ol>
+ <li>Use the <code>XMLHttpRequest.responseXML</code> property as covered in the article <a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a>.</li>
+ <li>Inject the content into the body of a <a href="/en-US/docs/Web/API/DocumentFragment">document fragment</a> via <code>fragment.body.innerHTML</code> and traverse the DOM of the fragment.</li>
+ <li>{{jsxref("RegExp")}} can be used if you always know the content of the HTML <code>responseText</code> beforehand. You might want to remove line breaks, if you use RegExp to scan with regard to linebreaks. However, this method is a "last resort" since if the HTML code changes slightly, the method will likely fail.</li>
+</ol>
+
+<h2 id="Handling_binary_data">Handling binary data</h2>
+
+<p>Although {{domxref("XMLHttpRequest")}} is most commonly used to send and receive textual data, it can be used to send and receive binary content. There are several well tested methods for coercing the response of an <code>XMLHttpRequest</code> into sending binary data. These involve utilizing the {{domxref("XMLHttpRequest.overrideMimeType", "overrideMimeType()")}} method on the <code>XMLHttpRequest</code> object and is a workable solution.</p>
+
+<pre class="brush:js notranslate">var oReq = new XMLHttpRequest();
+oReq.open("GET", url);
+// retrieve data unprocessed as a binary string
+oReq.overrideMimeType("text/plain; charset=x-user-defined");
+/* ... */
+</pre>
+
+<p>However, more modern techniques are available, since the {{domxref("XMLHttpRequest.responseType", "responseType")}} attribute now supports a number of additional content types, which makes sending and receiving binary data much easier.</p>
+
+<p>For example, consider this snippet, which uses the <code>responseType</code> of "<code>arraybuffer</code>" to fetch the remote content into a {{jsxref("ArrayBuffer")}} object, which stores the raw binary data.</p>
+
+<pre class="brush:js notranslate">var oReq = new XMLHttpRequest();
+
+oReq.onload = function(e) {
+  var arraybuffer = oReq.response; // not responseText
+  /* ... */
+}
+oReq.open("GET", url);
+oReq.responseType = "arraybuffer";
+oReq.send();</pre>
+
+<p>For more examples check out the <a href="/en-US/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data">Sending and Receiving Binary Data</a> page</p>
+
+<h2 id="Monitoring_progress">Monitoring progress</h2>
+
+<p><code>XMLHttpRequest</code> provides the ability to listen to various events that can occur while the request is being processed. This includes periodic progress notifications, error notifications, and so forth.</p>
+
+<p>Support for DOM {{event("progress")}} event monitoring of <code>XMLHttpRequest</code> transfers follows the <a href="https://xhr.spec.whatwg.org/#interface-progressevent">specification for progress events</a>: these events implement the {{domxref("ProgressEvent")}} interface. The actual events you can monitor to determine the state of an ongoing transfer are:</p>
+
+<dl>
+ <dt>{{event("progress")}}</dt>
+ <dd>The amount of data that has been retrieved has changed.</dd>
+ <dt>{{event("load")}}</dt>
+ <dd>The transfer is complete; all data is now in the <code>response</code></dd>
+</dl>
+
+<pre class="brush:js notranslate">var oReq = new XMLHttpRequest();
+
+oReq.addEventListener("progress", updateProgress);
+oReq.addEventListener("load", transferComplete);
+oReq.addEventListener("error", transferFailed);
+oReq.addEventListener("abort", transferCanceled);
+
+oReq.open();
+
+// ...
+
+// progress on transfers from the server to the client (downloads)
+function updateProgress (oEvent) {
+  if (oEvent.lengthComputable) {
+    var percentComplete = oEvent.loaded / oEvent.total * 100;
+    // ...
+  } else {
+    // Unable to compute progress information since the total size is unknown
+  }
+}
+
+function transferComplete(evt) {
+  console.log("The transfer is complete.");
+}
+
+function transferFailed(evt) {
+  console.log("An error occurred while transferring the file.");
+}
+
+function transferCanceled(evt) {
+  console.log("The transfer has been canceled by the user.");
+}</pre>
+
+<p>Lines 3-6 add event listeners for the various events that are sent while performing a data transfer using <code>XMLHttpRequest</code>.</p>
+
+<div class="note"><strong>Note:</strong> You need to add the event listeners before calling <code>open()</code> on the request. Otherwise the <code>progress</code> events will not fire.</div>
+
+<p>The progress event handler, specified by the <code>updateProgress()</code> function in this example, receives the total number of bytes to transfer as well as the number of bytes transferred so far in the event's <code>total</code> and <code>loaded</code> fields. However, if the <code>lengthComputable</code> field is false, the total length is not known and will be zero.</p>
+
+<p>Progress events exist for both download and upload transfers. The download events are fired on the <code>XMLHttpRequest</code> object itself, as shown in the above sample. The upload events are fired on the <code>XMLHttpRequest.upload</code> object, as shown below:</p>
+
+<pre class="brush:js notranslate">var oReq = new XMLHttpRequest();
+
+oReq.upload.addEventListener("progress", updateProgress);
+oReq.upload.addEventListener("load", transferComplete);
+oReq.upload.addEventListener("error", transferFailed);
+oReq.upload.addEventListener("abort", transferCanceled);
+
+oReq.open();
+</pre>
+
+<div class="note"><strong>Note:</strong> Progress events are not available for the <code>file:</code> protocol.</div>
+
+<div class="note">
+<p><strong>Note:</strong> Starting in {{Gecko("9.0")}}, progress events can now be relied upon to come in for every chunk of data received, including the last chunk in cases in which the last packet is received and the connection closed before the progress event is fired. In this case, the progress event is automatically fired when the load event occurs for that packet. This lets you now reliably monitor progress by only watching the "progress" event.</p>
+</div>
+
+<div class="note">
+<p><strong>Note:</strong> As of {{Gecko("12.0")}}, if your progress event is called with a <code>responseType</code> of "moz-blob", the value of response is a {{domxref("Blob")}} containing the data received so far.</p>
+</div>
+
+<p>One can also detect all three load-ending conditions (<code>abort</code>, <code>load</code>, or <code>error</code>) using the <code>loadend</code> event:</p>
+
+<pre class="brush:js notranslate">req.addEventListener("loadend", loadEnd);
+
+function loadEnd(e) {
+  console.log("The transfer finished (although we don't know if it succeeded or not).");
+}
+</pre>
+
+<p>Note there is no way to be certain, from the information received by the <code>loadend</code> event, as to which condition caused the operation to terminate; however, you can use this to handle tasks that need to be performed in all end-of-transfer scenarios.</p>
+
+<h2 id="Submitting_forms_and_uploading_files">Submitting forms and uploading files</h2>
+
+<p>Instances of <code>XMLHttpRequest</code> can be used to submit forms in two ways:</p>
+
+<ul>
+ <li>using only AJAX</li>
+ <li>using the {{domxref("XMLHttpRequest.FormData", "FormData")}} API</li>
+</ul>
+
+<p>Using the <code>FormData</code> API is the simplest and fastest, but has the disadvantage that data collected can not be <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">stringified</a>.<br>
+ Using only AJAX is more complex, but typically more flexible and powerful.</p>
+
+<h3 id="Using_nothing_but_XMLHttpRequest">Using nothing but <code>XMLHttpRequest</code></h3>
+
+<p>Submitting forms without the <code>FormData</code> API does not require other APIs for most use cases. The only case where you need an additional API is <strong>if you want to upload one or more files</strong>, where you use the {{domxref("FileReader")}} API.</p>
+
+<h4 id="A_brief_introduction_to_the_submit_methods">A brief introduction to the submit methods</h4>
+
+<p>An html {{ HTMLElement("form") }} can be sent in four ways:</p>
+
+<ul>
+ <li>using the <code>POST</code> method and setting the <code>enctype</code> attribute to <code>application/x-www-form-urlencoded</code> (default);</li>
+ <li>using the <code>POST</code> method and setting the <code>enctype</code> attribute to <code>text/plain</code>;</li>
+ <li>using the <code>POST</code> method and setting the <code>enctype</code> attribute to <code>multipart/form-data</code>;</li>
+ <li>using the <code>GET</code> method (in this case the <code>enctype</code> attribute will be ignored).</li>
+</ul>
+
+<p>Now, consider the submission of a form containing only two fields, named <code>foo</code> and <code>baz</code>. If you are using the <code>POST</code> method the server will receive a string similar to one of the following three examples, depending on the encoding type you are using:</p>
+
+<ul>
+ <li>
+  <p>Method: <code>POST</code>; Encoding type: <code>application/x-www-form-urlencoded</code> (default):</p>
+
+  <pre class="brush:plain notranslate">Content-Type: application/x-www-form-urlencoded
+
+foo=bar&amp;baz=The+first+line.%0D%0AThe+second+line.%0D%0A</pre>
+ </li>
+ <li>
+  <p>Method: <code>POST</code>; Encoding type: <code>text/plain</code>:</p>
+
+  <pre class="brush:plain notranslate">Content-Type: text/plain
+
+foo=bar
+baz=The first line.
+The second line.</pre>
+ </li>
+ <li>
+  <p>Method: <code>POST</code>; Encoding type: <code><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#multipartform-data">multipart/form-data</a></code>:</p>
+
+  <pre class="brush:plain notranslate">Content-Type: multipart/form-data; boundary=---------------------------314911788813839
+
+-----------------------------314911788813839
+Content-Disposition: form-data; name="foo"
+
+bar
+-----------------------------314911788813839
+Content-Disposition: form-data; name="baz"
+
+The first line.
+The second line.
+
+-----------------------------314911788813839--</pre>
+ </li>
+</ul>
+
+<p>However, if you are using the <code>GET</code> method, a string like the following will be simply added to the URL:</p>
+
+<pre class="brush:plain notranslate">?foo=bar&amp;baz=The%20first%20line.%0AThe%20second%20line.</pre>
+
+<h4 id="A_little_vanilla_framework">A little vanilla framework</h4>
+
+<p>All these effects are done automatically by the web browser whenever you submit a {{HTMLElement("form")}}. If you want to perform the same effects using JavaScript you have to instruct the interpreter about <em>everything</em>. Therefore, how to send forms in <em>pure</em> AJAX is too complex to be explained here in detail. For this reason, here we place <strong>a complete (yet didactic) framework</strong>, able to use all four ways to <em>submit</em>, and to <strong>upload files</strong>:</p>
+
+<div style="height: 400px; margin-bottom: 12px; overflow: auto;">
+<pre class="brush: html notranslate">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
+&lt;title&gt;Sending forms with pure AJAX &amp;ndash; MDN&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+
+"use strict";
+
+/*\
+|*|
+|*|  :: XMLHttpRequest.prototype.sendAsBinary() Polyfill ::
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()
+\*/
+
+if (!XMLHttpRequest.prototype.sendAsBinary) {
+  XMLHttpRequest.prototype.sendAsBinary = function(sData) {
+    var nBytes = sData.length, ui8Data = new Uint8Array(nBytes);
+    for (var nIdx = 0; nIdx &lt; nBytes; nIdx++) {
+      ui8Data[nIdx] = sData.charCodeAt(nIdx) &amp; 0xff;
+    }
+    /* send as ArrayBufferView...: */
+    this.send(ui8Data);
+    /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */
+  };
+}
+
+/*\
+|*|
+|*|  :: AJAX Form Submit Framework ::
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest
+|*|
+|*|  This framework is released under the GNU Public License, version 3 or later.
+|*|  https://www.gnu.org/licenses/gpl-3.0-standalone.html
+|*|
+|*|  Syntax:
+|*|
+|*|   AJAXSubmit(HTMLFormElement);
+\*/
+
+var AJAXSubmit = (function () {
+
+  function ajaxSuccess () {
+    /* console.log("AJAXSubmit - Success!"); */
+    console.log(this.responseText);
+    /* you can get the serialized data through the "submittedData" custom property: */
+    /* console.log(JSON.stringify(this.submittedData)); */
+  }
+
+  function submitData (oData) {
+    /* the AJAX request... */
+    var oAjaxReq = new XMLHttpRequest();
+    oAjaxReq.submittedData = oData;
+    oAjaxReq.onload = ajaxSuccess;
+    if (oData.technique === 0) {
+      /* method is GET */
+      oAjaxReq.open("get", oData.receiver.replace(/(?:\?.*)?$/,
+          oData.segments.length &gt; 0 ? "?" + oData.segments.join("&amp;") : ""), true);
+      oAjaxReq.send(null);
+    } else {
+      /* method is POST */
+      oAjaxReq.open("post", oData.receiver, true);
+      if (oData.technique === 3) {
+        /* enctype is multipart/form-data */
+        var sBoundary = "---------------------------" + Date.now().toString(16);
+        oAjaxReq.setRequestHeader("Content-Type", "multipart\/form-data; boundary=" + sBoundary);
+        oAjaxReq.sendAsBinary("--" + sBoundary + "\r\n" +
+            oData.segments.join("--" + sBoundary + "\r\n") + "--" + sBoundary + "--\r\n");
+      } else {
+        /* enctype is application/x-www-form-urlencoded or text/plain */
+        oAjaxReq.setRequestHeader("Content-Type", oData.contentType);
+        oAjaxReq.send(oData.segments.join(oData.technique === 2 ? "\r\n" : "&amp;"));
+      }
+    }
+  }
+
+  function processStatus (oData) {
+    if (oData.status &gt; 0) { return; }
+    /* the form is now totally serialized! do something before sending it to the server... */
+    /* doSomething(oData); */
+    /* console.log("AJAXSubmit - The form is now serialized. Submitting..."); */
+    submitData (oData);
+  }
+
+  function pushSegment (oFREvt) {
+    this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n";
+    this.owner.status--;
+    processStatus(this.owner);
+  }
+
+  function plainEscape (sText) {
+    /* How should I treat a text/plain form encoding?
+       What characters are not allowed? this is what I suppose...: */
+    /* "4\3\7 - Einstein said E=mc2" ----&gt; "4\\3\\7\ -\ Einstein\ said\ E\=mc2" */
+    return sText.replace(/[\s\=\\]/g, "\\$&amp;");
+  }
+
+  function SubmitRequest (oTarget) {
+    var nFile, sFieldType, oField, oSegmReq, oFile, bIsPost = oTarget.method.toLowerCase() === "post";
+    /* console.log("AJAXSubmit - Serializing form..."); */
+    this.contentType = bIsPost &amp;&amp; oTarget.enctype ? oTarget.enctype : "application\/x-www-form-urlencoded";
+    this.technique = bIsPost ?
+        this.contentType === "multipart\/form-data" ? 3 : this.contentType === "text\/plain" ? 2 : 1 : 0;
+    this.receiver = oTarget.action;
+    this.status = 0;
+    this.segments = [];
+    var fFilter = this.technique === 2 ? plainEscape : escape;
+    for (var nItem = 0; nItem &lt; oTarget.elements.length; nItem++) {
+      oField = oTarget.elements[nItem];
+      if (!oField.hasAttribute("name")) { continue; }
+      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
+      if (sFieldType === "FILE" &amp;&amp; oField.files.length &gt; 0) {
+        if (this.technique === 3) {
+          /* enctype is multipart/form-data */
+          for (nFile = 0; nFile &lt; oField.files.length; nFile++) {
+            oFile = oField.files[nFile];
+            oSegmReq = new FileReader();
+            /* (custom properties:) */
+            oSegmReq.segmentIdx = this.segments.length;
+            oSegmReq.owner = this;
+            /* (end of custom properties) */
+            oSegmReq.onload = pushSegment;
+            this.segments.push("Content-Disposition: form-data; name=\"" +
+                oField.name + "\"; filename=\"" + oFile.name +
+                "\"\r\nContent-Type: " + oFile.type + "\r\n\r\n");
+            this.status++;
+            oSegmReq.readAsBinaryString(oFile);
+          }
+        } else {
+          /* enctype is application/x-www-form-urlencoded or text/plain or
+             method is GET: files will not be sent! */
+          for (nFile = 0; nFile &lt; oField.files.length;
+              this.segments.push(fFilter(oField.name) + "=" + fFilter(oField.files[nFile++].name)));
+        }
+      } else if ((sFieldType !== "RADIO" &amp;&amp; sFieldType !== "CHECKBOX") || oField.checked) {
+        /* NOTE: this will submit _all_ submit buttons. Detecting the correct one is non-trivial. */
+        /* field type is not FILE or is FILE but is empty */
+        this.segments.push(
+          this.technique === 3 ? /* enctype is multipart/form-data */
+            "Content-Disposition: form-data; name=\"" + oField.name + "\"\r\n\r\n" + oField.value + "\r\n"
+          : /* enctype is application/x-www-form-urlencoded or text/plain or method is GET */
+            fFilter(oField.name) + "=" + fFilter(oField.value)
+        );
+      }
+    }
+    processStatus(this);
+  }
+
+  return function (oFormElement) {
+    if (!oFormElement.action) { return; }
+    new SubmitRequest(oFormElement);
+  };
+
+})();
+
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+&lt;h1&gt;Sending forms with pure AJAX&lt;/h1&gt;
+
+&lt;h2&gt;Using the GET method&lt;/h2&gt;
+
+&lt;form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Registration example&lt;/legend&gt;
+    &lt;p&gt;
+      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
+      Last name: &lt;input type="text" name="lastname" /&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;h2&gt;Using the POST method&lt;/h2&gt;
+&lt;h3&gt;Enctype: application/x-www-form-urlencoded (default)&lt;/h3&gt;
+
+&lt;form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Registration example&lt;/legend&gt;
+    &lt;p&gt;
+      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
+      Last name: &lt;input type="text" name="lastname" /&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;h3&gt;Enctype: text/plain&lt;/h3&gt;
+
+&lt;form action="register.php" method="post" enctype="text/plain"
+    onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Registration example&lt;/legend&gt;
+    &lt;p&gt;
+      Your name: &lt;input type="text" name="user" /&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      Your message:&lt;br /&gt;
+      &lt;textarea name="message" cols="40" rows="8"&gt;&lt;/textarea&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;h3&gt;Enctype: multipart/form-data&lt;/h3&gt;
+
+&lt;form action="register.php" method="post" enctype="multipart/form-data"
+    onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Upload example&lt;/legend&gt;
+    &lt;p&gt;
+      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
+      Last name: &lt;input type="text" name="lastname" /&gt;&lt;br /&gt;
+      Sex:
+      &lt;input id="sex_male" type="radio" name="sex" value="male" /&gt;
+      &lt;label for="sex_male"&gt;Male&lt;/label&gt;
+      &lt;input id="sex_female" type="radio" name="sex" value="female" /&gt;
+      &lt;label for="sex_female"&gt;Female&lt;/label&gt;&lt;br /&gt;
+      Password: &lt;input type="password" name="secret" /&gt;&lt;br /&gt;
+      What do you prefer:
+      &lt;select name="image_type"&gt;
+        &lt;option&gt;Books&lt;/option&gt;
+        &lt;option&gt;Cinema&lt;/option&gt;
+        &lt;option&gt;TV&lt;/option&gt;
+      &lt;/select&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      Post your photos:
+      &lt;input type="file" multiple name="photos[]"&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /&gt;
+      &lt;label for="vehicle_bike"&gt;I have a bike&lt;/label&gt;&lt;br /&gt;
+      &lt;input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /&gt;
+      &lt;label for="vehicle_car"&gt;I have a car&lt;/label&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      Describe yourself:&lt;br /&gt;
+      &lt;textarea name="description" cols="50" rows="8"&gt;&lt;/textarea&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>To test this, create a page named <strong>register.php</strong> (which is the <code>action</code> attribute of these sample forms), and put the following <em>minimalistic</em> content:</p>
+
+<pre class="brush: php notranslate">&lt;?php
+/* register.php */
+
+header("Content-type: text/plain");
+
+/*
+NOTE: You should never use `print_r()` in production scripts, or
+otherwise output client-submitted data without sanitizing it first.
+Failing to sanitize can lead to cross-site scripting vulnerabilities.
+*/
+
+echo ":: data received via GET ::\n\n";
+print_r($_GET);
+
+echo "\n\n:: Data received via POST ::\n\n";
+print_r($_POST);
+
+echo "\n\n:: Data received as \"raw\" (text/plain encoding) ::\n\n";
+if (isset($HTTP_RAW_POST_DATA)) { echo $HTTP_RAW_POST_DATA; }
+
+echo "\n\n:: Files received ::\n\n";
+print_r($_FILES);
+
+</pre>
+
+<p>The syntax to activate this script is simply:</p>
+
+<pre class="syntaxbox notranslate">AJAXSubmit(myForm);</pre>
+
+<div class="note"><strong>Note:</strong> This framework uses the {{domxref("FileReader")}} API to transmit file uploads. This is a recent API and is not implemented in IE9 or below. For this reason, the AJAX-only upload is considered <strong>an experimental technique</strong>. If you do not need to upload binary files, this framework works fine in most browsers.</div>
+
+<div class="note"><strong>Note:</strong> The best way to send binary content is via {{jsxref("ArrayBuffer", "ArrayBuffers")}} or {{domxref("Blob", "Blobs")}} in conjuncton with the {{domxref("XMLHttpRequest.send()", "send()")}} method and possibly the {{domxref("FileReader.readAsArrayBuffer()", "readAsArrayBuffer()")}} method of the <code>FileReader</code> API. But, since the aim of this script is to work with a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">stringifiable</a> raw data, we used the {{domxref("XMLHttpRequest.sendAsBinary()", "sendAsBinary()")}} method in conjunction with the {{domxref("FileReader.readAsBinaryString()", "readAsBinaryString()")}} method of the <code>FileReader</code> API. As such, the above script makes sense only when you are dealing with small files. If you do not intend to upload binary content, consider instead using the <code>FormData</code> API.</div>
+
+<div class="note"><strong>Note:</strong> The non-standard <code>sendAsBinary</code> method is considered deprecated as of Gecko 31 {{geckoRelease(31)}} and will be removed soon. The standard <code>send(Blob data)</code> method can be used instead.</div>
+
+<h3 id="Using_FormData_objects">Using FormData objects</h3>
+
+<p>The {{domxref("XMLHttpRequest.FormData", "FormData")}} constructor lets you compile a set of key/value pairs to send using <code>XMLHttpRequest</code>. Its primary use is in sending form data, but can also be used independently from a form in order to transmit user keyed data. The transmitted data is in the same format the form's <code>submit()</code> method uses to send data, if the form's encoding type were set to "multipart/form-data". FormData objects can be utilized in a number of ways with an <code>XMLHttpRequest</code>. For examples, and explanations of how one can utilize FormData with XMLHttpRequests, see the <a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects">Using FormData Objects</a> page. For didactic purposes here is <strong>a <em>translation</em> of <a href="#A_little_vanilla_framework">the previous example</a> transformed to use the <code>FormData</code> API</strong>. Note the brevity of the code:</p>
+
+<div style="height: 400px; margin-bottom: 12px; overflow: auto;">
+<pre class="brush: html notranslate">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta http-equiv="Content-Type" charset="UTF-8" /&gt;
+&lt;title&gt;Sending forms with FormData &amp;ndash; MDN&lt;/title&gt;
+&lt;script&gt;
+"use strict";
+
+function ajaxSuccess () {
+  console.log(this.responseText);
+}
+
+function AJAXSubmit (oFormElement) {
+  if (!oFormElement.action) { return; }
+  var oReq = new XMLHttpRequest();
+  oReq.onload = ajaxSuccess;
+  if (oFormElement.method.toLowerCase() === "post") {
+    oReq.open("post", oFormElement.action);
+    oReq.send(new FormData(oFormElement));
+  } else {
+    var oField, sFieldType, nFile, sSearch = "";
+    for (var nItem = 0; nItem &lt; oFormElement.elements.length; nItem++) {
+      oField = oFormElement.elements[nItem];
+      if (!oField.hasAttribute("name")) { continue; }
+      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ?
+          oField.getAttribute("type").toUpperCase() : "TEXT";
+      if (sFieldType === "FILE") {
+        for (nFile = 0; nFile &lt; oField.files.length;
+            sSearch += "&amp;" + escape(oField.name) + "=" + escape(oField.files[nFile++].name));
+      } else if ((sFieldType !== "RADIO" &amp;&amp; sFieldType !== "CHECKBOX") || oField.checked) {
+        sSearch += "&amp;" + escape(oField.name) + "=" + escape(oField.value);
+      }
+    }
+    oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&amp;/, "?")), true);
+    oReq.send(null);
+  }
+}
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+&lt;h1&gt;Sending forms with FormData&lt;/h1&gt;
+
+&lt;h2&gt;Using the GET method&lt;/h2&gt;
+
+&lt;form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Registration example&lt;/legend&gt;
+    &lt;p&gt;
+      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
+      Last name: &lt;input type="text" name="lastname" /&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;h2&gt;Using the POST method&lt;/h2&gt;
+&lt;h3&gt;Enctype: application/x-www-form-urlencoded (default)&lt;/h3&gt;
+
+&lt;form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Registration example&lt;/legend&gt;
+    &lt;p&gt;
+      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
+      Last name: &lt;input type="text" name="lastname" /&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;h3&gt;Enctype: text/plain&lt;/h3&gt;
+
+&lt;p&gt;The text/plain encoding is not supported by the FormData API.&lt;/p&gt;
+
+&lt;h3&gt;Enctype: multipart/form-data&lt;/h3&gt;
+
+&lt;form action="register.php" method="post" enctype="multipart/form-data"
+    onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Upload example&lt;/legend&gt;
+    &lt;p&gt;
+      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
+      Last name: &lt;input type="text" name="lastname" /&gt;&lt;br /&gt;
+      Sex:
+      &lt;input id="sex_male" type="radio" name="sex" value="male" /&gt;
+      &lt;label for="sex_male"&gt;Male&lt;/label&gt;
+      &lt;input id="sex_female" type="radio" name="sex" value="female" /&gt;
+      &lt;label for="sex_female"&gt;Female&lt;/label&gt;&lt;br /&gt;
+      Password: &lt;input type="password" name="secret" /&gt;&lt;br /&gt;
+      What do you prefer:
+      &lt;select name="image_type"&gt;
+        &lt;option&gt;Books&lt;/option&gt;
+        &lt;option&gt;Cinema&lt;/option&gt;
+        &lt;option&gt;TV&lt;/option&gt;
+      &lt;/select&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      Post your photos:
+      &lt;input type="file" multiple name="photos[]"&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /&gt;
+      &lt;label for="vehicle_bike"&gt;I have a bike&lt;/label&gt;&lt;br /&gt;
+      &lt;input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /&gt;
+      &lt;label for="vehicle_car"&gt;I have a car&lt;/label&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      Describe yourself:&lt;br /&gt;
+      &lt;textarea name="description" cols="50" rows="8"&gt;&lt;/textarea&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<div class="note"><strong>Note:</strong> As we said,<strong> {{domxref("FormData")}} objects are not <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">stringifiable</a> objects</strong>. If you want to stringify a submitted data, use <a href="#A_little_vanilla_framework">the previous <em>pure</em>-AJAX example</a>. Note also that, although in this example there are some <code>file</code> {{ HTMLElement("input") }} fields, <strong>when you submit a form through the <code>FormData</code> API you do not need to use the {{domxref("FileReader")}} API also</strong>: files are automatically loaded and uploaded.</div>
+
+<h2 id="Get_last_modified_date">Get last modified date</h2>
+
+<pre class="brush: js notranslate">function getHeaderTime () {
+  console.log(this.getResponseHeader("Last-Modified"));  /* A valid GMTString date or null */
+}
+
+var oReq = new XMLHttpRequest();
+oReq.open("HEAD" /* use HEAD if you only need the headers! */, "yourpage.html");
+oReq.onload = getHeaderTime;
+oReq.send();</pre>
+
+<h3 id="Do_something_when_last_modified_date_changes">Do something when last modified date changes</h3>
+
+<p>Let's create two functions:</p>
+
+<pre class="brush: js notranslate">function getHeaderTime () {
+  var nLastVisit = parseFloat(window.localStorage.getItem('lm_' + this.filepath));
+  var nLastModif = Date.parse(this.getResponseHeader("Last-Modified"));
+
+  if (isNaN(nLastVisit) || nLastModif &gt; nLastVisit) {
+    window.localStorage.setItem('lm_' + this.filepath, Date.now());
+    isFinite(nLastVisit) &amp;&amp; this.callback(nLastModif, nLastVisit);
+  }
+}
+
+function ifHasChanged(sURL, fCallback) {
+  var oReq = new XMLHttpRequest();
+  oReq.open("HEAD" /* use HEAD - we only need the headers! */, sURL);
+  oReq.callback = fCallback;
+  oReq.filepath = sURL;
+  oReq.onload = getHeaderTime;
+  oReq.send();
+}</pre>
+
+<p>And to test:</p>
+
+<pre class="brush: js notranslate">/* Let's test the file "yourpage.html"... */
+
+ifHasChanged("yourpage.html", function (nModif, nVisit) {
+  console.log("The page '" + this.filepath + "' has been changed on " + (new Date(nModif)).toLocaleString() + "!");
+});</pre>
+
+<p>If you want to know <strong><em>if</em> <em>the current page</em> has changed</strong>, please read the article about {{domxref("document.lastModified")}}.</p>
+
+<h2 id="Cross-site_XMLHttpRequest">Cross-site XMLHttpRequest</h2>
+
+<p>Modern browsers support cross-site requests by implementing the <a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing</a> (CORS) standard. As long as the server is configured to allow requests from your web application's origin, <code>XMLHttpRequest</code> will work. Otherwise, an <code>INVALID_ACCESS_ERR</code> exception is thrown.</p>
+
+<h2 id="Bypassing_the_cache">Bypassing the cache</h2>
+
+<p>A cross-browser compatible approach to bypassing the cache is appending a timestamp to the URL, being sure to include a "?" or "&amp;" as appropriate. For example:</p>
+
+<pre class="brush:plain notranslate">http://foo.com/bar.html -&gt; http://foo.com/bar.html?12345
+http://foo.com/bar.html?foobar=baz -&gt; http://foo.com/bar.html?foobar=baz&amp;12345
+</pre>
+
+<p>As the local cache is indexed by URL, this causes every request to be unique, thereby bypassing the cache.</p>
+
+<p>You can automatically adjust URLs using the following code:</p>
+
+<pre class="brush:js notranslate">var oReq = new XMLHttpRequest();
+
+oReq.open("GET", url + ((/\?/).test(url) ? "&amp;" : "?") + (new Date()).getTime());
+oReq.send(null);</pre>
+
+<h2 id="Security">Security</h2>
+
+<p>{{fx_minversion_note(3, "Versions of Firefox prior to Firefox 3 allowed you to set the preference <code>capability.policy.&lt;policyname&gt;.XMLHttpRequest.open&lt;/policyname&gt;</code> to <code>allAccess</code> to give specific sites cross-site access. This is no longer supported.")}}</p>
+
+<p>{{fx_minversion_note(5, "Versions of Firefox prior to Firefox 5 could use <code>netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\");</code> to request cross-site access. This is no longer supported, even though it produces no warning and permission dialog is still presented.")}}</p>
+
+<p>The recommended way to enable cross-site scripting is to use the <code>Access-Control-Allow-Origin</code> HTTP header in the response to the XMLHttpRequest.</p>
+
+<h3 id="XMLHttpRequests_being_stopped">XMLHttpRequests being stopped</h3>
+
+<p>If you conclude with an XMLHttpRequest receiving <code>status=0</code> and <code>statusText=null</code>, this means the request was not allowed to be performed. It was <code><a href="https://xhr.spec.whatwg.org/#dom-xmlhttprequest-unsent">UNSENT</a></code>. A likely cause for this is when the <a href="https://www.w3.org/TR/2010/CR-XMLHttpRequest-20100803/#xmlhttprequest-origin"><code>XMLHttpRequest</code> origin</a> (at the creation of the XMLHttpRequest) has changed when the XMLHttpRequest is subsequently <code>open()</code>. This case can happen, for example, when one has an XMLHttpRequest that gets fired on an onunload event for a window, the expected XMLHttpRequest is created when the window to be closed is still there, and finally sending the request (in otherwords, <code>open()</code>) when this window has lost its focus and another window gains focus. The most effective way to avoid this problem is to set a listener on the new window's {{event("activate")}} event which is set once the terminated window has its {{event("unload")}} event triggered.</p>
+
+<h2 id="Workers">Workers</h2>
+
+<p>Setting <code>overrideMimeType</code> does not work from a {{domxref("Worker")}}. See {{bug(678057)}} for more details. Other browsers may handle this differently.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Live standard, latest version</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden"><font><font>Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. </font><font>Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte </font></font><a href="https://github.com/mdn/browser-compat-data"><font><font>https://github.com/mdn/browser-compat-data</font></font></a><font><font> und senden Sie uns eine Pull-Anfrage.</font></font></p>
+
+<p><font><font>{{Compat ("api.XMLHttpRequest")}}</font></font></p>
+
+<h2 id="Siehe_auch"><font><font>Siehe auch</font></font></h2>
+
+<ol>
+ <li><a href="/en-US/docs/AJAX/Getting_Started"><font><font>MDN AJAX Einführung</font></font></a></li>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest"><font><font>HTML in XMLHttpRequest</font></font></a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS"><font><font>HTTP-Zugriffskontrolle</font></font></a></li>
+ <li><a href="/en-US/docs/How_to_check_the_security_state_of_an_XMLHTTPRequest_over_SSL"><font><font>So überprüfen Sie den Sicherheitsstatus einer XMLHTTPRequest über SSL</font></font></a></li>
+ <li><a href="http://www.peej.co.uk/articles/rich-user-experience.html"><font><font>XMLHttpRequest - REST und die Rich User Experience</font></font></a></li>
+ <li><a href="https://msdn.microsoft.com/library/ms535874"><font><font>Microsoft-Dokumentation</font></font></a></li>
+ <li><a href="http://jibbering.com/2002/4/httprequest.html"><font><font>"Verwenden des XMLHttpRequest-Objekts" (jibbering.com)</font></font></a></li>
+ <li><a href="https://xhr.spec.whatwg.org/"><font><font>Das </font></font><code>XMLHttpRequest</code><font><font>Objekt: WHATWG-Spezifikation</font></font></a></li>
+</ol>
diff --git a/files/de/web/barrierefreiheit/an_overview_of_accessible_web_applications_and_widgets/index.html b/files/de/web/barrierefreiheit/an_overview_of_accessible_web_applications_and_widgets/index.html
new file mode 100644
index 0000000000..3aa0530a35
--- /dev/null
+++ b/files/de/web/barrierefreiheit/an_overview_of_accessible_web_applications_and_widgets/index.html
@@ -0,0 +1,232 @@
+---
+title: Übersicht zu barrierefreien Web-Applikationen und Komponenten
+slug: Web/Barrierefreiheit/An_overview_of_accessible_web_applications_and_widgets
+tags:
+  - ARIA
+  - Accessibility
+  - Guide
+  - Handbuch
+  - Komponente
+  - Web apps
+translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets
+---
+<p>Das Web entwickelt sich weiter: Statische seitenbasierte Websites werden zunehmend durch dynamische, desktopartige Web-Applikationen ersetzt, die mit JavaScript und AJAX arbeiten. Designer erstellen allein durch die Kombination von JavaScript, HTML und CSS beeindruckende neue Benutzeroberflächen und Steuerungsmechanismen. Dieser Wandel hat das Potential, durch responsives Design die Benutzerfreundlichkeit enorm zu verbessern, doch besteht für viele Benutzer die Gefahr wegen Zugänglichkeitsbarrieren ausgeschlossen zu werden. JavaScript hat keinen sehr guten Ruf, was die Barrierefreiheit anbelangt, da JavaScript-Techniken oft Probleme in Kombination mit Unterstützungstechnologie wie z.B. Screenreadern verursachen. Es gibt jedoch andere Möglichkeiten, dynamische Oberflächen zu erstellen, damit diese auch für Menschen mit Behinderungen ohne Einschränkungen benutzbar sind.</p>
+
+<h2 id="Das_Problem">Das Problem</h2>
+
+<p>Die meisten JavaScript-Toolkits stellen eine Bibliothek für clientseitige Komponenten bereit, welche den Benutzeroberflächen von bekannten Desktopumgebungen nachempfunden sind. Slider, Menüleisten, Dateisystem-Bäume usw. lassen sich mit einer Kombination von JavaScript, CSS und HTML erstellen. In der HTML4-Spezifikation werden keine Tags festgelegt, welche diese Komponenten semantisch beschreiben und Entwickler greifen daher üblicherweise auf Tags wie &lt;div&gt; und &lt;span&gt; zurück. Die so entwickelten Oberflächen sehen Desktop-Applikation sehr ähnlich, enthalten jedoch in der Regel nicht genügend semantische Informationen, um die korrekte Funktion unterstützender Technologie zu gewährleisten. So können dynamische Inhalte einer Webseite von Benutzern, die z.B. eine Website (aus welchen Gründen auch immer) nicht sehen können, nicht vollständlig erfasst werden. Börsenticker, Updates von Twitter-Feeds, Fortschrittsanzeigen und ähnliche Komponenten manipulieren das DOM auf eine Weise, die von Unterstützungstechnologie nicht erkannt werden kann. An dieser Stelle kommt <a href="/en/ARIA" title="ARIA">ARIA</a> zum Einsatz.</p>
+
+<p><em>Beispiel 1: Markup für eine Tabs-Komponente mit ARIA-Labeln. Im Markup sind keine Informationen enthalten, welche die Form und Funktion der Komponente beschreiben.</em></p>
+
+<pre class="brush: html"><code>&lt;!-- Dies ist eine Komponente für Tabs. Wie könnten Sie das wissen, würden sie nur das Markup betrachten? --&gt;
+&lt;ol&gt;
+  &lt;li id="ch1Tab"&gt;
+    &lt;a href="#ch1Panel"&gt;Chapter 1&lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li id="ch2Tab"&gt;
+    &lt;a href="#ch2Panel"&gt;Chapter 2&lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li id="quizTab"&gt;
+    &lt;a href="#quizPanel"&gt;Quiz&lt;/a&gt;
+  &lt;/li&gt;
+&lt;/ol&gt;
+
+&lt;div&gt;
+  &lt;div id="ch1Panel"&gt;Chapter 1 content goes here&lt;/div&gt;
+  &lt;div id="ch2Panel"&gt;Chapter 2 content goes here&lt;/div&gt;
+  &lt;div id="quizPanel"&gt;Quiz content goes here&lt;/div&gt;
+&lt;/div&gt;</code></pre>
+
+<p><em>Beispiel 2: Die Tabs-Komponente könnte z.B. wie folgt aussehen. Bei der visuellen Betrachtung lässt sich dies erkennen, es gibt jedoch keine maschinenlesbare Beschreibungen für Unterstützungstechnologie.</em><br>
+ <img alt="Screenshot of the tabs widget" class="default internal" src="/@api/deki/files/4926/=Tabs_Widget.png"></p>
+
+<h2 id="ARIA">ARIA</h2>
+
+<p><a class="external" href="http://www.w3.org/WAI/intro/aria.php" title="http://www.w3.org/WAI/intro/aria.php">WAI-ARIA</a>, die Spezifikation für <strong>Accessible Rich Internet Applications</strong> der <a class="external" href="http://www.w3.org/WAI/" title="http://www.w3.org/WAI/">Web Accessibility Initiative</a> des W3C beschreibt, wie fehlende semantischen Informationen hinzugefügt werden können, die für das Erfassen der Inhalte bei der Benutzung von Unterstützungstechnologie, wie z.B. Screen Readern, benötigt werden. ARIA ermöglicht Entwicklern, ihre Komponenten genauer zu beschreiben, indem dem Markup spezielle Attribute hinzugefügt werden. ARIA wurde entwickelt, um die Lücke zwischen Standard-HTML-Tags und desktopartigen Komponenten von dynamischen Web-Applikationen zu schließen und legt Rollen- und Zustansbeschreibungen für verbreitete UI-Komponenten fest.</p>
+
+<p>Die ARIA-Spezifikation beschreibt drei verschiedene Arten von Attributen: Rollen, Zustände und Eigenschaften. Rollen werden Komponenten zugewiesen, die bei HTML4 nicht vorhanden sind, wie z.B. Slider, Menüleisten, Tabs und Dialoge. Eigenschaften beschreiben Charakteristiken dieser Komponenten, wie z.B. ob sie per Drag &amp; Drop ziehbar sind, ein benötigtes Element besitzen oder ein Popup mit ihnen verbunden ist. Zustände beschreiben den aktuellen Interaktionsstatus eines Elements - so wird der Unterstützungstechnologie mitgeteilt, ob das Element gerade beschäftigt, deaktiviert, selektiert oder versteckt ist.</p>
+
+<p>ARIA-Attribute sind dafür geschaffen, automatisch vom Browser interpretiert und für die nativen Barrierefreiheit-APIs des jeweiligen Betriebssystems übersetzt zu werden. Wenn ARIA vorhanden ist, kann die Unterstützungstechnologie JavaScript-Komponenten erkennen und mit diesen interagieren, auf dieselbe Weise wie bei Desktop-Software. Hierdurch kann eine konsistentere Benutzerführung ermöglicht werden, als noch bei älteren Generationen von Web-Applkationen, da Benutzer von Unterstützungstechnologie auch bei webbasierten Applikationen auf ihre Kenntnisse über Desktop-Software zurückgreifen können.</p>
+
+<p><em>Beispiel 3: Markup für die Tabs-Komponente mit hinzugefügten ARIA-Attributen.</em></p>
+
+<pre class="brush: html"><code>&lt;!-- Durch die zugeteilte Rolle sind die Tabs erkennbar! --&gt;</code>
+<code>&lt;!-- role-Attribute wurden der Liste und den einzelnen Elementen hinzugefügt. --&gt;</code>
+<code>&lt;ol role="tablist"&gt;</code>
+<code>  &lt;li id="ch1Tab" <span style="color: #ff0000;">role="tab"</span>&gt;
+    &lt;a href="#ch1Panel"&gt;Chapter 1&lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li id="ch2Tab" <span style="color: #ff0000;">role="tab"</span>&gt;
+    &lt;a href="#ch2Panel"&gt;Chapter 2&lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li id="quizTab" <span style="color: #ff0000;">role="tab"</span>&gt;
+    &lt;a href="#quizPanel"&gt;Quiz&lt;/a&gt;
+  &lt;/li&gt;
+&lt;/ol&gt;
+
+&lt;div&gt;
+  &lt;!-- Beachten Sie die Attribute 'role' und 'aria-labelledby', welche die Tab-Panels beschreiben. --&gt;
+  &lt;div id="ch1Panel" <span style="color: #ff0000;">role=”tabpanel” aria-labelledby="ch1Tab"</span>&gt;Chapter 1 content goes here&lt;/div&gt;
+  &lt;div id="ch2Panel" <span style="color: #ff0000;">role=”tabpanel” aria-labelledby="ch2Tab"</span>&gt;Chapter 2 content goes here&lt;/div&gt;
+  &lt;div id="quizPanel" <span style="color: #ff0000;">role=”tabpanel” aria-labelledby="quizTab"</span>&gt;Quiz content goes here&lt;/div&gt;
+&lt;/div&gt;</code>
+</pre>
+
+<p>ARIA wird von allen aktuellen Versionen der bekannten Browser unterstützt, einschließlich Firefox, Safari, Opera, Chrome und Internet Explorer. Viele Unterstützungstechnologien, wie z.B. die Open-Source-Screenreader NVDA und Orca, unterstützen ARIA ebenfalls. Auch JavaScript-Biblitheken wie jQuery UI, YUI, Google Closure und Dojo Dijit setzen ARIA-Markup ein.</p>
+
+<h3 id="Darstellungänderungen">Darstellungänderungen</h3>
+
+<p>Dynamische Änderungen der Darstellung sind zum Beispiel die Veränderung der Elementeigenschaften mit CSS (wie z.B. ein roter Rand um ein Feld, das fehlerhafte Daten enthält oder eine Farbänderung bei einer aktivierten Checkbox) oder das Anzeigen und Verstecken von Inhalten.</p>
+
+<h4 id="Zustandsänderungen">Zustandsänderungen</h4>
+
+<p>ARIA stellt Attribute zur Deklaration des aktuellen Zustands von Komponenten bereit. Die Beispiele in dieser Einführung werden die folgenden Attribute verwendet (es gibt allerdings noch einige mehr):</p>
+
+<ul>
+ <li><code><strong>aria-checked</strong></code>: Zeigt den Zustand einer Checkbox (Auswahlkästchen) oder eines Radiobuttons (Optionsfeld) an.</li>
+ <li><code><strong>aria-disabled</strong></code>: Zeigt an, dass ein Element zwar sichtbar, jedoch nicht editierbar ist oder anderweitig betätigt werden kann.</li>
+ <li><code><strong>aria-grabbed</strong></code>: Zeigt an, ob sich ein Objekt bei einer Drag &amp; Drop-Interaktion im "grabbed"-Zustand befindet.</li>
+</ul>
+
+<p>(Eine komplette Liste aller Zustände finden Sie in der <a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties" title="http://www.w3.org/TR/wai-aria/states_and_properties">Liste zu ARIA-Zuständen und Eigenschaften</a>)</p>
+
+<p>Entwickler sollten ARIA-Zustände einsetzen, um den Zustand von Komponenten zu deklarieren und mit CSS-Attribut-Selektoren die visuelle Darstellung je nach Zustand entsprechend verändern (anstatt per Skript den Klassennamen des Elements zu ändern).</p>
+
+<p>Die Website der Open Ajax Alliance stellt<a class="external" href="http://www.oaa-accessibility.org/example/25/" title="http://www.oaa-accessibility.org/example/25/"> Beispiel zu CSS-Attributseletoren in Verbindung mit ARIA</a> bereit. Das Beispiel zeigt die Oberfläche eines WYSIWYG-Editors mit einem dynamischen Menü-System. Elemente, die gerade selektiert sind, unterscheiden sich visuell von anderen Elementen. Relevant sind hier besonders die unten beschriebenen Teile.</p>
+
+<p>Bei diesem Beispiel wird für des Menüs der HTML-Code aus Beispiel 1a verwendet. In Zeile 7 und 13 wird die Eigenschaft aria-checked eingesetzt, um den Zustand der Selektion anzuzeigen.</p>
+
+<p><em>Beispiel 1a. HTML für ein selektierbares Menü (übernommen von <a class="external" href="http://www.oaa-accessibility.org/example/25/" rel="freelink">http://www.oaa-accessibility.org/example/25/</a>).</em></p>
+
+<pre class="deki-transform">&lt;ul id="fontMenu" class="menu" role="menu" aria-hidden="true"&gt;
+  &lt;li id="sans-serif"
+      class="menu-item"
+      role="menuitemradio"
+      tabindex="-1"
+      aria-controls="st1"
+      aria-checked="true"&gt;Sans-serif&lt;/li&gt;
+  &lt;li id="serif"
+      class="menu-item"
+      role="menuitemradio"
+      tabindex="-1"
+      aria-controls="st1"
+      aria-checked="false"&gt;Serif&lt;/li&gt;
+  ...
+</pre>
+
+<p>Für die Änderung der visuellen Darstellung des selektierten Elements wird der CSS-Code aus Beispiel 1b verwendet. Beachten Sie, dass keine Klassennamen benutzt werden, einzig der Zustand des aria-checked-Attribute in Zeile 1 entscheidet also über die Darstellung des Elements.</p>
+
+<p><em><em>Beispiel 1b. Attribute-basierte Selektoren zum Anzeigen des Zustands (übernommen von<a class="external" href="http://www.oaa-accessibility.org/example/25/" rel="freelink"> http://www.oaa-accessibility.org/example/25/</a>).</em></em></p>
+
+<pre class="deki-transform">li[aria-checked="true"] {
+  font-weight: bold;
+  background-image: url('images/dot.png');
+  background-repeat: no-repeat;
+  background-position: 5px 10px;
+}
+</pre>
+
+<p>Zur Aktualisierung der Eigenschaft aria-checked wird der JavaScript-Code aus Beispiel 1c verwendet. Auch das Skript ändert nur den Wert der Attribute (Zeile 3 und 8) und es wird kein Klassenname hinzugefügt oder entfernt.</p>
+
+<p><em><em>Beispiel 1c. JavaScript zur Aktualisierung des Attributs aria-checked (übernommen von<a class="external" href="http://www.oaa-accessibility.org/example/25/" rel="freelink"> http://www.oaa-accessibility.org/example/25/</a>)</em></em><em><em><em>.</em></em></em></p>
+
+<pre class="deki-transform">var processMenuChoice = function(item) {
+  // 'check' the selected item
+  item.setAttribute('aria-checked', 'true');
+  // 'un-check' the other menu items
+  var sib = item.parentNode.firstChild;
+  for (; sib; sib = sib.nextSibling ) {
+    if ( sib.nodeType === 1 &amp;&amp; sib !== item ) {
+      sib.setAttribute('aria-checked', 'false');
+    }
+  }
+};
+</pre>
+
+<h4 id="Änderung_der_Sichtbarkeit">Änderung der Sichtbarkeit</h4>
+
+<p>Bei Änderungen der Sichtbarkeit von Elementen (verstecken oder sichtbar machen von Elementen) sollten Entwickler nur den Wert der Eigenschaft <strong>aria-hidden</strong> verändern. Dabei sollte die oben beschreibene Technik angewendet und CSS (<code>display:none</code>) eingesetzt werden, um das Element zu verstecken.</p>
+
+<p>Auf der Website der Open Ajax Alliance findet man hierzu <a class="external" href="http://www.oaa-accessibility.org/example/39/" title="http://www.oaa-accessibility.org/example/39/">ein Beispiel mit einem Tooltip </a>bei dem das Attribut <strong>aria-hidden</strong> eingesetzt wird, um die Sichtbarkeit des Tooltips zu verändern. Das Beispiel zeigt ein einfaches Formular, bei dem Anweisungen zu den einzelnen Feldern eingeblendet werden. Auf die wichtigsten Details wird im Folgenden genauer eingegangen.</p>
+
+<p>Beispiel 2a zeigt den HTML-Code für einen Tooltip. In Zeile 9 wird der Zustand von <strong>aria-hidden</strong> auf <code>true</code> gesetzt.</p>
+
+<p><em>Beispiel 2a. HTML für ein Tooltip (übernommen von<a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink"> http://www.oaa-accessibility.org/example/39/</a>).</em></p>
+
+<pre class="deki-transform">&lt;div class="text"&gt;
+    &lt;label id="tp1-label" for="first"&gt;First Name:&lt;/label&gt;
+    &lt;input type="text" id="first" name="first" size="20"
+           aria-labelledby="tp1-label"
+           aria-describedby="tp1"
+           aria-required="false" /&gt;
+    &lt;div id="tp1" class="tooltip"
+         role="tooltip"
+         aria-hidden="true"&gt;Your first name is a optional&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Das Beispiel 2b unten zeigt den CSS-Code für das Markup. Wie schon beim ersten Beispiel wird auch hier kein Klassenname benutzt, sondern nur der Wert der Attribute <strong>aria-hidden</strong> geändert.</p>
+
+<p><em><em>Beispiel 2b. Attributbasierte Selektoren zur Anzeige des Zustands (übernommen von<br>
+ <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>).</em></em></p>
+
+<pre class="deki-transform">div.tooltip[aria-hidden="true"] {
+  display: none;
+}
+</pre>
+
+<p>Beispiel 2c zeigt den JavaScript-Code zur Aktulisierung der Eigenschaft <strong>aria-hidden</strong>. Wieder wird per Skript nur die Attribute <strong>aria-hidden</strong> in Zeile 2 verändert und kein Klassenname hinzugefügt oder entfernt.</p>
+
+<p><em><em>Beispiel 2c. JavaScript zur Aktualisierung des Attributs aria-checked (übernommen von <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>)</em></em><em><em><em>.</em></em></em></p>
+
+<pre class="deki-transform">var showTip = function(el) {
+  el.setAttribute('aria-hidden', 'false');
+}</pre>
+
+<h3 id="Role_changes">Role changes</h3>
+
+<div class="note">
+<pre>In Bearbeitung</pre>
+</div>
+
+<p>Mit ARIA können Entwicklern solchen Elementen, bei denen wichtige semantische Informationen fehlen, eine Rolle zuweisen. Wenn z.B. eine ungeordnete Liste für die Erstellung eines Menüs benutzt wird, sollte dem <code>ul</code>-Elemente die Rolle <code>menubar</code> zugeteilt werden und jedem untergeordneten <code>li</code>-Listenelement die Rolle <code>menuitem</code>.</p>
+
+<p>Die <strong>Rolle</strong> eines Elements sollte nicht verändert werden. Stattdessen sollte das bestehende Element entfernt und ein neues Element mit neuer <strong>Rolle</strong> hinzugefügt werden.</p>
+
+<p>Wenn man z.B. eine Texteditor-Komponente mit einem Ansichtsmodus und einem Editiermodus erstellen möchte, dann kommt ein Entwickler vielleicht auf die Idee für das Textfeld ein schreibgeschütztes input-Element einzusetzen, diesem für den Ansichtsmodus die Rolle <code>button</code> zuzuweisen und beim Wechsel in den Editiermodus die Rolle und den Schreibschutz zu entfernen (da <code>input</code>-Elemente eigene Rollen zugewiesen werden können).</p>
+
+<p>Diese Vorgehensweise ist keine gute Idee. Stattdessen sollte für den Ansichtsmodus ein anderes Element, wie z.B. ein <code>div</code>- oder <code>span</code>-Element mit der Rolle <code>button</code> verwendet werden und für den Editiermodus ein <code>input</code>-Textelement.</p>
+
+<h3 id="Asynchrone_Inhaltsänderungen">Asynchrone Inhaltsänderungen</h3>
+
+<div class="note">In Bearbeitung. Siehe auch <a href="/en/ARIA/Live_Regions" title="Live Regions">Live Regions</a></div>
+
+<h2 id="Tastaturnavigation">Tastaturnavigation</h2>
+
+<p>Von Entwicklern wird oft wenig darauf geachtet, ob Oberflächenkomponenten auch mit der Tastatur bedienbar sind. Damit die Kompnenten für möglichst viele Benutzer zugänglich sind, sollte für alle Funktionen der Komponenten einer Web-Applikation überprüft werden, ob sie auch ausschließlich mit Tastatur und ohne Maus bedient werden können. Für die praktische Umsetzung sollten die üblichen Konventionen für Desktop-Komponenten befolgt werden, also die Benutzung von Tab-, Enter-, Leertaste und Pfeiltasten ermöglicht werden.</p>
+
+<p>Traditionell ist die Tastaturnavigation im Web auf die Tab-Taste begrenzt. Der Nutzer drückt Tab um jeden Link, Button oder Formular auf der Seite nacheinander zu fukussieren, Shift-Tab um zum letzten Element zu springen. Das ist eine eindimensionale Form der Navigation—vor und zurück, ein Element pro Schritt. Auf sehr umfangreichen Seiten muss ein Nutzer der Tastaturnavigation oft dutzende Male die Tab-Taste drücken, um zu dem gewünschten Bereich zu kommen. Die Implementierung von Navigationskonventionen von Desktop-Programmen im Web hat das Potential die Navigation für viele Nutzer zu beschleunigen.</p>
+
+<p>Hier eine Zusammenfassung wie Tastaturnavigation in einer ARIA-unterstützten Web-Applikation funktionieren sollte:</p>
+
+<ul>
+ <li>Die Tab-Taste fokussiert eine Komponente als ganzes. Beispielsweise sollte das navigieren zu einer Menüleiste dessen erstes Element fokussieren</li>
+ <li>Die Pfeiltasten sollten die Navigation innerhalb der Komponente ermöglichen. Zum Beispiel indem man mit dem linken und rechten Pfeil den Fokus auf den vorherigen und nächsten Menüpunkt verschiebt</li>
+ <li>Wenn die Komponente nicht innerhalb eines Formulars liegt, sollten die Enter- und Leertaste das Kontrollelement auswählen oder aktivieren</li>
+ <li>Innerhalb eines Formulars sollte die Leertaste das Element auswählen oder aktivieren, während die Enter-Taste die Standardfunktion des Formulars aufruft</li>
+ <li>Ahme im Zweifelsfall die Desktop Standardfunktionalität dieses Elements nach</li>
+</ul>
+
+<p>In dem Beispiel der Tab-Komponente oben sollte der Nutzer also in der Lage sein mit den Tab- und Shift-Tab Tasten in und aus dem Komponenten-Container (&lt;ol&gt; in unserem Beispiel) zu navigieren. Sobald der Fokus innerhalb des Containers liegt, sollten die Pfeiltasten dem Nutzer erlauben zwischen den einzelnen Tabs (die &lt;li&gt; Elemente) zu navigieren. Ab hier variieren die Konventionen je nach Plattform. Unter Windows wird der nächste Tab automatisch aktivieren, wenn der Nutzer die Pfeiltasten drückt. Unter macOS, kann der Nutzer entweder die Enter- oder die Leertaste drücken, um den nächsten Tab zu aktivieren. Ein umfangreiches Tutorial zur Erstellung von <a href="/en/Accessibility/Keyboard-navigable_JavaScript_widgets">Tastaturnavigation in JavaScript Komponenten</a> beschreibt wie man diese Funktionsweise mit JavaScript implementieren kann.</p>
+
+<p>Für mehr Details zu Koventionen bei desktopartiger Tastaturnavigation gibt es einen umfangreichen <a class="external" href="http://dev.aol.com/dhtml_style_guide" title="http://dev.aol.com/dhtml_style_guide">DHTML style guide</a>. Dieser stellt einen Überblick darüber bereit, wie Tastaturnavigation in jeder von ARIA unterstützten Komponente funktionieren sollte. Die W3C bietet ebenfalls ein hilfreiches <a class="external" href="http://www.w3.org/WAI/PF/aria-practices/Overview.html" title="http://www.w3.org/WAI/PF/aria-practices/Overview.html">ARIA Best Practices</a> Dokument, das Konventionen für Tastaturnavigation und Shortcuts für eine Vielzahl von Komponenten beinhaltet.</p>
+
+<h2 id="Weiterführende_Links">Weiterführende Links</h2>
+
+<ul>
+ <li><a href="/en/ARIA" title="ARIA">ARIA</a></li>
+ <li><a href="/en/Accessibility/Web_applications_and_ARIA_FAQ" title="Web applications and ARIA FAQ">Web applications and ARIA FAQ</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/wai-aria/" title="http://www.w3.org/TR/wai-aria/">WAI-ARIA Specification</a></li>
+ <li><a class="external" href="http://www.w3.org/WAI/PF/aria-practices/Overview.html" title="http://www.w3.org/WAI/PF/aria-practices/Overview.html">WAI-ARIA Best Practices</a></li>
+ <li><a class="external" href="http://dev.aol.com/dhtml_style_guide" title="http://dev.aol.com/dhtml_style_guide">DHTML Style Guide</a></li>
+</ul>
diff --git a/files/de/web/barrierefreiheit/aria/aria_live_regionen/index.html b/files/de/web/barrierefreiheit/aria/aria_live_regionen/index.html
new file mode 100644
index 0000000000..4e1f22e0b5
--- /dev/null
+++ b/files/de/web/barrierefreiheit/aria/aria_live_regionen/index.html
@@ -0,0 +1,89 @@
+---
+title: ARIA Live-Regionen
+slug: Web/Barrierefreiheit/ARIA/ARIA_Live_Regionen
+translation_of: Web/Accessibility/ARIA/ARIA_Live_Regions
+---
+<h2 id="Einführung">Einführung</h2>
+<p>In der Vergangenheit konnten Änderungen bei Webseiten nur so von einem Screenreader kommuniziert werden, dass der komplette Inhalt vorgelesen oder nur sehr wenig bis gar nichts über die Inhaltsänderungen berichtet wurde. Dies führte dazu, dass einige oder sogar alle Informationen unzugänglich waren. Bisher waren Screenreader nicht in der Lage, diese Situation zu verbessern, weil es keine standardisierte Methode gab, um Screenreader per Markup über Veränderungen zu informieren. ARIA-Live-Regionen sollen diese Lücke schließen. Über Live-Regionen erhalten Screenreader Anweisungen, wonach entschieden werden kann, ob und wann Benutzer unterbrochen werden sollen, um sie über Veränderungen des Inhalts in Kenntnis zu setzen.</p>
+<h2 id="Einfache_Live-Regionen">Einfache Live-Regionen</h2>
+<p> </p>
+<p>Dynamische Inhalte, die ohne das Neuladen einer Webseite nachgeladen werden, sind im Allgemeinen entweder eine Region oder eine Komponente. Einfache Inhaltsänderungen, die nicht interaktiv sind, sollten als Live-Regionen gekennzeichnet werden. In der folgenden Liste werden die unterschiedlichen Eigenschaften für ARIA-Live-Regionen mit einer Beschreibung aufgeführt.</p>
+<ol>
+ <li><strong>aria-live:</strong> Mit aria-live=POLITENESS_SETTING wird die Priorität für die Behandlung von Aktualisierungen von Live-Regionen festgelegt - die möglichen Werte für diese Einstellung sind: off/polite/assertive, wobei "off" der Default-Wert ist. Diese Eigenschaft ist mit Abstand die Wichtigste.</li>
+ <li>
+  <p class="comment"><strong>aria-controls</strong>: Mit aria-controls=[IDLIST] wird ein Steuerungselement mit der Region verknüpft, die es kontrollieren soll. Regionen werden ähnlich wie div-Elemente anhand einer ID identifiziert. Wenn mehrere Regionen mit einer Steuerung verknüpft werden sollen, können diese einfach getrennt durch ein Leerzeichen angegeben werden, z.B. aria-controls="myRegionID1 myRegionsID2".</p>
+  <div class="warning">
+   Not known if the aria-controls aspect of live regions is implemented in current ATs, or which. Needs research.</div>
+ </li>
+</ol>
+<p>In der Regel wird ausschließlich aria-live="polite" verwendet. Alle Regionen, die mit Informationen aktualisiert werden, die zwar wichtig sind, jedoch nicht so dringend, dass der Benutzer sofort unterbrochen und darüber informiert werden sollte, sollten dieses Attribut erhalten. Der Screenreader setzt den Benutzer dann über die Änderungen in Kenntnis, sobald er nicht mehr beschäftigt ist.</p>
+<p>Regionen, die unrelevant sind oder z.B. wegen ständiger Aktualisierungen störend wirken könnten, sollten mit aria-live="off" stillgeschaltet werden.</p>
+<h3 id="Einfaches_Einsatzszenario_Eine_Combobox_aktualisiert_nützliche_On-Screen-Informationen">Einfaches Einsatzszenario: Eine Combobox aktualisiert nützliche On-Screen-Informationen</h3>
+<p>Angenommen eine Website, die Informationen über Vogelarten bereitstellt, bietet ein Dropdown-Menü zur Auswahl einer der Vogelarten an und bei der Auswahl werden in einer Region Informationen über diese Vogelart angezeigt.</p>
+<p><code>&lt;select size="1" id="bird-selector" aria-controls="bird-info"&gt;&lt;option&gt; .... &lt;/select&gt;</code></p>
+<p><code>&lt;div role="region" id="bird-info" aria-live="polite"&gt;</code></p>
+<p>Sobald der Benutzer eine Vogelart selektiert, wird die Information vorgelesen. Da für die Region "polite" eingestellt ist, wartet der Screenreader, bis der Benutzer nicht mehr beschäftigt ist. Folglich wird bei der Bewegung nach unten in der Liste nicht jede Vogelart vorgelesen, sondern nur die ausgewählte.</p>
+<h2 id="Bevorzugung_von_spezialisierten_Live-Region-Rollen">Bevorzugung von spezialisierten Live-Region-Rollen</h2>
+<p>Für die folgenden bekannten vordefinierten Situationen sollte bevorzugt eine entsprechende "Live-Region-Rolle" eingesetzt werden:</p>
+<table style="width: 100%;">
+ <thead>
+  <tr>
+   <th scope="col">Rolle</th>
+   <th scope="col">Beschreibung</th>
+   <th scope="col">Hinweise zur Kompatibilität</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>log</td>
+   <td>Chat, Fehler, Spiel oder andere Logs</td>
+   <td>Zur Maximierung der Kompatiblität sollte ein redundantes aria-live="polite" hinzugefügt werden, wenn diese Rolle verwendet wird.</td>
+  </tr>
+  <tr>
+   <td>status</td>
+   <td>Eine Statusleiste oder Bildschirmbereich, der einen aktualisierbaren Status anzeigt. Screenreader-Benutzer können mit einem speziellen Befehl den aktuellen Status abfragen.</td>
+   <td>Zur Maximierung der Kompatiblität sollte ein redundantes aria-live="polite" hinzugefügt werden, wenn diese Rolle verwendet wird.</td>
+  </tr>
+  <tr>
+   <td>alert</td>
+   <td>Eine Fehler- oder Warnungmeldung, die auf dem Bildschirm eingeblendet wird. Alarmmeldungen sind  insbesondere bei der clentseitige Validierungsmeldungen für Benutzer wichtig. (TBD: link to ARIA form tutorial with aria info)</td>
+   <td>Zur Maximierung der Kompatiblität sollte ein redundantes aria-live="assertive" hinzugefügt werden, wenn diese Rolle verwendet wird.  (TBD: check to see if this is necessary or causes double speaking issues.)</td>
+  </tr>
+  <tr>
+   <td>progressbar</td>
+   <td>Eine Kombination aus einer Komponente und einer Live-Region.  Verwenden Sie diese Rolle mit aria-valuemin, aria-valuenow und aria-valuemax. (TBD: add more info here).</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>marquee</td>
+   <td>Für scrollenden Text, wie z.B. ein Börsenticker.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>timer</td>
+   <td>Jede Art von Zeitschaltung oder Uhr, wie z.B. ein Countdown-Timer oder eine Stoppuhr.</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Fortgeschrittene_Live-Regionen">Fortgeschrittene Live-Regionen</h2>
+<p>(TBD: what is supported where?)</p>
+<ol>
+ <li><strong>aria-atomic:</strong> Das Attribut aria-atomic=BOOLEAN wird eingesetzt, um festzulegen, ob der Screenreader die Live-Regionen als Ganzes präsentieren soll, auch wenn sich nur ein Teil dieser Region ändert. Die möglichen Werte sind false oder true, wobei false der Default-Wert ist.</li>
+ <li><strong>aria-relevant:</strong> Mit aria-relevant=[LIST_OF_CHANGES] wird bestimmt, welche Art von Veränderungen relevant für eine Live-Region sind - die möglichen Werte sind additions/removals/text/all. Der Default-Wert ist "additions text".</li>
+ <li><strong>aria-labelledby</strong>: Mit aria-labelledby=[IDLIST] wird eine Region mit seinen Labels verknüpft. Die Technik ist dieselbe wie bei aria-controls, nur dass hier Labels statt Steuerungselemente mit der Region verknüpft werden. Mehrere Bezeichner können durch Leerzeichen getrennt angegeben werden.</li>
+ <li><strong>aria-describedby:</strong> Das Attribut aria-describedby=[IDLIST] wird verwendet, um eine Region mit einer Beschreibung zu verknüpfen. Auch hier ist die Technik dieselbe, wie bei aria-controls, nur dass eine Beschreibung statt einer Steuerung verknüpft wird. Mehrere Bezeichner für Beschreibungen können durch Leerzeichen getrennt angegeben werden.</li>
+</ol>
+<h3 id="Fortgeschrittenes_Einsatzszenario_Roster"><span class="mw-headline" id="Use_Case:_Roster">Fortgeschrittenes Einsatzszenario: Roster</span></h3>
+<p>Auf einer Chat-Webseite soll eine Liste von Benutzern angezeigt werden, die zum aktuellen Zeitpunkt eingeloggt sind. Der Status der Benutzer soll dabei dynamisch (ohne Aktualisierung der Webseite) auf dem neusten Stand gehalten werden.</p>
+<pre>&lt;ul id="roster" aria-live="polite" aria-relevant="additions removals"&gt;
+	&lt;!-- Hier wird JavaScript zum Hinzufügen und Entfernen von Benutzern eingesetzt --&gt;
+&lt;/ul&gt;
+</pre>
+<p>Zusammenfassende Beschreibung von ARIA-Live-Eigenschaften:</p>
+<ul>
+ <li>aria-live="polite" legt fest, dass der Screenreader warten soll, bis der Benutzer nicht mehr beschäftigt ist, bevor die Aktualisierungen ausgegeben werden. Dieser Wert wird am häufigsten verwendet, da das Setzen des Werts "assertive" dafür sorgt, dass der Benutzer während er noch aktiv ist unterbrochen wird, was für den Benutzer störend sein kann.</li>
+ <li>Die Eigeschaft aria-atomic wurde nicht gesetzt (Default-Wert: "false"), sodass nur hinzugekommene und den Chat verlassende Benutzer genannt werden und nicht die gesamte Liste vorgelesen wird.</li>
+ <li>Mit aria-relevant="additions removals" wird sichergestellt, dass sowohl die hinzugekommenen als auch die den Chat verlassenden Benutzer genannt werden.</li>
+</ul>
+<p>TBD: Realistic use case for aria-atomic="true"</p>
diff --git a/files/de/web/barrierefreiheit/aria/aria_techniken/index.html b/files/de/web/barrierefreiheit/aria/aria_techniken/index.html
new file mode 100644
index 0000000000..85059df7a2
--- /dev/null
+++ b/files/de/web/barrierefreiheit/aria/aria_techniken/index.html
@@ -0,0 +1,168 @@
+---
+title: ARIA Techniken
+slug: Web/Barrierefreiheit/ARIA/ARIA_Techniken
+tags:
+  - ARIA
+  - Accessibility
+translation_of: Web/Accessibility/ARIA/ARIA_Techniques
+---
+<p> </p>
+
+<h2 id="Rollen"> Rollen</h2>
+
+<p> </p>
+
+<h3 id="Widget_Rollen"><a href="/en/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_switch_role">Widget Rollen</a></h3>
+
+<div class="index">
+<ul>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role" title="die Button Rolle benutzen">Button</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_checkbox_role" title="die Checkbox Rolle benutzen">Checkbox</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role" title="die Dialog Rolle benutzen">Dialog</a></li>
+ <li>Gridcell</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role" title="die Link Rolle benutzen">Link</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_log_role" title="die Log Rolle benutzen">Log</a></li>
+ <li>Marquee</li>
+ <li>Menuitem</li>
+ <li>Menuitemcheckbox</li>
+ <li>Menuitemradio</li>
+ <li>Option</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role" title="die Progressbar Rolle benutzen">Progressbar</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role" title="die Radio Rolle benutzen">Radio</a></li>
+ <li>Scrollbar</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role" title="die Slider Rolle benutzen">Slider</a></li>
+ <li>Spinbutton</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role" title="die Status Rolle benutzen">status</a></li>
+ <li>Tab</li>
+ <li>Tabpanel</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_textbox_role" title="die Textbox Rolle benutzen">textbox</a></li>
+ <li>Timer</li>
+ <li>Tooltip</li>
+ <li>Treeitem</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_switch_role" title="die Switch Rolle benutzen">switch</a></li>
+</ul>
+</div>
+
+<h3 id="Zusammengesetzte_Rollen">Zusammengesetzte Rollen</h3>
+
+<p>Diese Techniken beschreiben jede zusammengesetzte Rolle, sowie deren benötigte und optinale Kind-Rollen.</p>
+
+
+<div class="index">
+<ul>
+ <li>Combobox</li>
+ <li>Grid (einschließlich row, gridcell, rowheader, und columnheader Rollen)</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="die Listbox Rolle benutzen">Listbox</a> (einschließlich option Rolle)</li>
+ <li>Menu</li>
+ <li>Menubar</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role" title="die Radio Rolle benutzen">Radiogroup (siehe auch radio Rolle)</a></li>
+ <li>Tablist (einschließlich tab und  tabpanel Rollen)</li>
+ <li>Tree</li>
+ <li>Treegrid</li>
+</ul>
+</div>
+
+<h3 id="Dokumentstruktur_Rollen"><a href="https://www.w3.org/TR/wai-aria/roles#document_structure_roles">Dokumentstruktur Rollen</a></h3>
+
+<div class="index">
+<ul>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_article_role" title="die Article Rolle benutzen">Article</a></li>
+ <li>Definition</li>
+ <li>Directory</li>
+ <li>Document</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role" title="die Group Rolle benutzen">Group</a></li>
+ <li>Heading</li>
+ <li>Img</li>
+ <li>List</li>
+ <li>Listitem</li>
+ <li>Math</li>
+ <li>Note</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role" title="die Presentation Rolle benutzen">Presentation</a></li>
+ <li>Region</li>
+ <li>Separator</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_toolbar_role" title="die Toolbar Rolle benutzen">Toolbar</a></li>
+</ul>
+</div>
+
+<h3 id="Grenzrollen"><a href="https://www.w3.org/TR/wai-aria/roles#landmark_roles">Grenzrollen</a></h3>
+
+<div class="index">
+<ul>
+ <li>Application</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_banner_role" title="die Banner Rolle benutzen">Banner</a></li>
+ <li>Complementary</li>
+ <li>Contentinfo</li>
+ <li>Form</li>
+ <li>Main</li>
+ <li>Navigation</li>
+ <li>Search</li>
+</ul>
+</div>
+
+<h2 id="Zustände_und_Eigenschaften">Zustände und Eigenschaften</h2>
+
+<p> </p>
+
+<h3 id="Widget_Eigenschaften">Widget Eigenschaften</h3>
+
+<div class="index">
+<ul>
+ <li>aria-autocomplete</li>
+ <li>aria-checked</li>
+ <li>aria-current</li>
+ <li>aria-disabled</li>
+ <li>aria-expanded</li>
+ <li>aria-haspopup</li>
+ <li>aria-hidden</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute" title="das aria-invalid Attribut benutzen">aria-invalid</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute" title="das aria-label Attribut benutzen">aria-label</a></li>
+ <li>aria-level</li>
+ <li>aria-multiline</li>
+ <li>aria-multiselectable</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute" title="das aria-orientation Attribut benutzen">aria-orientation</a></li>
+ <li>aria-pressed</li>
+ <li>aria-readonly</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute" title="das aria-required Attribut benutzen">aria-required</a></li>
+ <li>aria-selected</li>
+ <li>aria-sort</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute" title="das aria-valuemax Attribut benutzen">aria-valuemax</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute" title="das aria-valuemin Attribut benutzen">aria-valuemin</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute" title="das aria-valuenow Attribut benutzen">aria-valuenow</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute" title="das aria-valuetext Attribut benutzen">aria-valuetext</a></li>
+</ul>
+</div>
+
+<h3 id="Live_Region_Attribute">Live Region Attribute</h3>
+
+<div class="index">
+<ul>
+ <li>aria-live</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute" title="das aria-live Attribut benutzen">aria-relevant</a></li>
+ <li>aria-atomic</li>
+ <li>aria-busy</li>
+</ul>
+</div>
+
+<h3 id="Drag_drop_Attribute">Drag &amp; drop Attribute</h3>
+
+<div class="index">
+<ul>
+ <li>aria-dropeffect</li>
+ <li>aria-dragged</li>
+</ul>
+</div>
+
+<h3 id="Beziehungs_Attribute">Beziehungs Attribute</h3>
+
+<div class="index">
+<ul>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute" title="das aria-activedescendant Attribut benutzen">aria-activedescendant</a></li>
+ <li>aria-controls</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute" title="das aria-describedby Attribut benutzen">aria-describedby</a></li>
+ <li>aria-flowto</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="das aria-labelledby Attribut benutzen">aria-labelledby</a></li>
+ <li>aria-owns</li>
+ <li>aria-posinset</li>
+ <li>aria-setsize</li>
+</ul>
+</div>
diff --git a/files/de/web/barrierefreiheit/aria/index.html b/files/de/web/barrierefreiheit/aria/index.html
new file mode 100644
index 0000000000..c282ef8f95
--- /dev/null
+++ b/files/de/web/barrierefreiheit/aria/index.html
@@ -0,0 +1,137 @@
+---
+title: ARIA
+slug: Web/Barrierefreiheit/ARIA
+translation_of: Web/Accessibility/ARIA
+---
+<p>Accessible Rich Internet Applications <strong>(ARIA)</strong> ermöglichen Webentwicklern Webinhalte und Web-Applikationen (insbesondere solche mit Ajax und JavaScript) besser zugänglich für Menschen mit Behinderungen und anderen Einschränkungen zu machen. Zum Beispiel lassen sich mit ARIA Navigations-Landmarken, JavaScript-Widgets, Formular-Hinweise und Fehlermeldungen hinzufügen und Live-Content-Aktualisierungen barrierefrei gestalten.</p>
+
+<p>ARIA ist ein Satz von speziellen Attributen, die beliebigem Markup-Content hinzugefügt werden können, wurde jedoch vorwiegend für HTML entwickelt. Das Attribut <code>role</code> definiert, um welche Art von Element es sich bei einem Objekt handelt (z. B. article, alert, oder slider). Andere ARIA-Attribute erweitern den Inhalt einer Website um nützliche Hilfsfunktionen, wie z. B. Formularbeschreibungen und Anzeigen für den aktuellen Wert bei Fortschrittsanzeigen.</p>
+
+<p>ARIA ist bei den meisten Browsern und Screen-Readern implementiert. Die Implementierungen weichen jedoch teilweise voneinander ab. Bei älterer Technologie ist die Unterstützung oft nicht vollständig (oder gar nicht vorhanden), daher sollte am besten "sicheres" ARIA eingesetzt werden, das bei schlechter Unterstützung keine Probleme verursacht, oder der Benutzer aufgefordert werden, neuere Technologie zu benutzen.</p>
+
+<p>Bitte helfen Sie uns, ARIA zu verbessern! Falls sie nicht genügend Zeit haben, fügen sie ihre Vorschläge einfach auf der <a href="/Talk:en/ARIA" title="https://developer.mozilla.org/Talk:en/ARIA">Diskussionsseite</a> hinzu.</p>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h3 id="Documentation" name="Documentation">Einführung in ARIA</h3>
+
+    <dl>
+     <dt><a href="/de/docs/Barrierefreiheit/An_overview_of_accessible_web_applications_and_widgets" title="An overview of accessible web applications and widgets">Einführung in ARIA</a></dt>
+     <dd>Eine schnelle Einführung, die beschreibt, wie dynamische Inhalte mit ARIA barrierefrei gestaltet werden können. Lesen Sie auch die klassische <a class="external" href="http://dev.opera.com/articles/view/introduction-to-wai-aria/" title="http://dev.opera.com/articles/view/introduction-to-wai-aria/">Einführung von Gez Lemon</a> von 2008.</dd>
+     <dt><a href="/en-US/docs/Accessibility/ARIA/Web_applications_and_ARIA_FAQ" title="https://developer.mozilla.org/en-US/docs/Accessibility/Web_applications_and_ARIA_FAQ">Web-Applikationen und ARIA-FAQ</a></dt>
+     <dd>Antworten für die häufigsten Fragen rund um WAI-ARIA und warum es nötig ist, Web-Applikationen barrierefrei zu gestalten.</dd>
+     <dt><a class="external" href="http://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/" title="http://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/">Videos von Screen-Readern mit ARIA</a></dt>
+     <dd>Schauen sie sich vereinfachte Beispiele und Praxisbeispiele zu ARIA an. Auch "davor und danach"-Beispiele sind hier zu finden.</dd>
+     <dt><a class="external" href="http://dvcs.w3.org/hg/aria-unofficial/raw-file/tip/index.html">Benutzung von ARIA mit HTML</a></dt>
+     <dd>Hier finden Sie praxisorientierte Empfehlungen für Entwickler. Zum Beispiel welche Attribute mit welchen HTML-Elementen eingesetzt werden sollten.</dd>
+    </dl>
+
+    <h3 id="Einfache_Verbesserungen_mit_ARIA">Einfache Verbesserungen mit ARIA</h3>
+
+    <dl>
+     <dt><a class="external" href="http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/" rel="external" title="http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/">Enhancing Page Navigation with ARIA Landmarks</a></dt>
+     <dd>Eine Einführung zur Verbesserung der Seitennavigation für Benutzer von Screen Readern mit ARIA-Landmarken. <a class="external" href="http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/" rel="external" title="http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/">Lesen Sie auch den Artikel zur Impelemtierung von ARIA-Landmarken</a> und schauen Sie sich bereits existierende Websites mit ARIA-Landmarken an (letze Aktualisierung: Juli 2011).</dd>
+     <dt><a href="/en-US/docs/ARIA/forms" rel="internal" title="/en-US/docs/ARIA/forms">Verbesserung der Zugänglichkeit von Formularen</a></dt>
+     <dd>ARIA ist nicht nur für dynamische Inhalte! Lernen Sie, wie die Zugänglichkeit von HTML-Formularen mit Hilfe von ARIA-Attributen verbessert werden kann.</dd>
+     <dt><a href="/en-US/docs/Accessibility/ARIA/ARIA_Live_Regions" title="Live Regions">Live-Regions (work-in-progress)</a></dt>
+     <dd>Live-Regionen liefern Screen Readern Hinweise über den Umgang mit Inhaltsänderungen bei Webseiten.</dd>
+     <dt><a class="external" href="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm" rel="external" title="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm">Using ARIA Live Regions to Announce Content Changes</a></dt>
+     <dd>Eine kurze Übersicht über Live-Regionen von den Machern  der Screen-Reader Software JAWS. Live Regions werden auch von NVDA in Firefox und VoiceOver bei Safari unterstüzt (ab OS X Lion und iOS 5).</dd>
+    </dl>
+
+    <h3 id="ARIA_für_JavaScript-Widgets">ARIA für JavaScript-Widgets</h3>
+
+    <dl>
+     <dt><a class="external external-icon" href="/de/docs/Web/Barrierefreiheit/Tastaturgesteuerte_JavaScript_Komponenten" title="en-US/docs/Accessibility/Keyboard-navigable_JavaScript_widgets">Tastaturgesteuerte JavaScript-Komponenten</a></dt>
+     <dd>Der erste Schritt bei der Erstellung eines berrierefreien JavaScript-Widget ist, es mit der Tastatur navigierbar zu machen. Deiser Artikel zeigt die Arbeitsschritte auf, die hierfür nötig sind. Der <a class="external" href="http://www.yuiblog.com/blog/2009/02/23/managing-focus/" title="http://www.yuiblog.com/blog/2009/02/23/managing-focus/">Artikel von Yahoo! zum Focus Management</a> liefert ebenfalls eine gute Beschreibung.</dd>
+     <dt><a class="external" href="http://access.aol.com/dhtml-style-guide-working-group/" title="http://dev.aol.com/dhtml_style_guide">Style-Guide für die Tastaturnavigation</a></dt>
+     <dd>Es stellt eine Herausforderung bei ARIA dar, Entwickler zur konsistenten Implementierung zu bringen, was für die Benutzer natürlich am besten wäre. Dieser Style-Guide beschreibt die Tastaturfunktionen bei bekannten Widgets.</dd>
+    </dl>
+
+    <h3 id="Weitere_Informationen_zu_ARIA">Weitere Informationen zu ARIA</h3>
+
+    <dl>
+     <dt><a href="/en-US/docs/Accessibility/ARIA/widgets/overview" title="en-US/docs/aria/widgets/overview">Widget-Techniken, Tutorials und Beispiele</a></dt>
+     <dd>Benötigen sie einen Slider, ein Menü oder eine andere Art von Widget? Hier finden Sie weiterführende Informationen.</dd>
+     <dt><a class="external" href="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/" title="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/">ARIA-erweiterte JavaScript UI-Libraries</a></dt>
+     <dd>Falls Sie ein neues Projekt starten, setzen Sie eine UI-Widget-Llibrary mit ARIA-Unterstützung ein!  Achtung: Der Artikel ist von 2009 - der Inhalt sollte auf eine MDN-Seite kopiert werden, damit er aktualisiert werden kann.</dd>
+     <dt><a class="external" href="http://dl.dropbox.com/u/573324/CSUN2012/index.html" title="http://dl.dropbox.com/u/573324/CSUN2012/index.html">Barrierefreiheit von HTML5 und Rich Internet Applications - CSUN 2012 Workshop Materialen</a></dt>
+     <dd>Beinhaltet auch Präsentationen und Beispiele.</dd>
+    </dl>
+   </td>
+   <td>
+    <h3 id="Community" name="Community">Mailing-Liste</h3>
+
+    <dl>
+     <dt><a class="link-https" href="https://groups.google.com/forum/#!forum/free-aria" title="https://groups.google.com/forum/#!forum/free-aria">Free ARIA Google Group</a></dt>
+     <dd>Hier können Fragen zu ARIA gestellt und Vorschläge gemacht werden, um diese ARIA-Dokumentation zu verbessern.</dd>
+    </dl>
+
+    <h3 id="Community" name="Community">Blogs</h3>
+
+    <p>ARIA-Information von Blogs sind meist schnell veraltet. Dennoch gibt es einige hilfreiche Informationen von anderen Entwicklern, die mit ARIA arbeiten.</p>
+
+    <p><a class="external" href="http://www.paciellogroup.com/blog/category/wai-aria/" title="http://www.paciellogroup.com/blog/category/wai-aria/">Paciello Group</a></p>
+
+    <p><a class="external" href="http://www.accessibleculture.org/tag/wai-aria/" title="http://www.accessibleculture.org/tag/wai-aria/">Accessible Culture</a></p>
+
+    <p><a class="external" href="http://yaccessibilityblog.com/library/category/code/aria" title="http://yaccessibilityblog.com/library/category/code/aria">Yahoo! Accessibility</a></p>
+
+    <h3 id="Fehler_melden">Fehler melden</h3>
+
+    <p><a href="/en/Accessibility/ARIA/How_to_file_ARIA-related_bugs" title="https://developer.mozilla.org/en/ARIA/How_to_file_ARIA-related_bugs">Schreiben Sie ARIA-Fehlerberichte zu Browsern, Screen-Readern und JavaScript-Libraries</a>.</p>
+
+    <h3 id="Beispiele">Beispiele</h3>
+
+    <dl>
+     <dt><a class="external" href="/en-US/docs/Accessibility/ARIA/ARIA_Test_Cases" title="en-US/docs/ARIA/examples">Verzeichnis für ARIA-Beispiele</a></dt>
+     <dd>Einige Beispieldateien mit Grundstruktur von denen man lernen kann.</dd>
+     <dt><span class="external">Beispiele für zugängliche JS-Widget-Libraries</span></dt>
+     <dd><a class="external" href="http://dojotoolkit.org/widgets" title="http://dojotoolkit.org/widgets">Dojo</a>, <a class="external" href="http://hanshillen.github.com/jqtest/" title="http://hanshillen.github.com/jqtest/">jQuery</a>, <a class="external" href="http://wiki.fluidproject.org/display/fluid/Components" title="http://wiki.fluidproject.org/display/fluid/Components">Fluid</a>, <a class="external" href="http://yuilibrary.com/gallery/" title="http://yuilibrary.com/gallery/">YUI</a></dd>
+    </dl>
+
+    <dl>
+     <dt><a class="external" href="http://mail.yahoo.com" title="http://mail.yahoo.com">Yahoo! Mail</a></dt>
+     <dd>Yahoo! hat bei Yahoo! Mail sehr gute Arbeit geleistet. Einer Web-App, die beinahe wie eine native App aussieht und sehr gut funktioniert, wie ein <a class="external" href="http://www.marcozehe.de/2011/09/21/review-the-all-new-yahoo-mail-web-application/" title="http://www.marcozehe.de/2011/09/21/review-the-all-new-yahoo-mail-web-application/">Review über Yahoo! Mail</a> des Screen-Reader-Benutzers Marco Zehe zeigt. Sein Kommentar: "Keep up the good work!".</dd>
+    </dl>
+
+    <dl>
+     <dt><a class="external" href="http://search.yahoo.com" title="http://search.yahoo.com">Yahoo! Search</a></dt>
+     <dd>Yahoo! hat hier ebenfalls sehr gute Arbeit geleistet, die Möglichkeiten mit ARIA voll ausgeschöpft und die <a class="external" href="http://ycorpblog.com/2011/03/23/searchdirect/" title="http://ycorpblog.com/2011/03/23/searchdirect/">Technik ausführlich dokumentiert</a>. Bei Yahoo! Search kommt eine Kombination von ARIA-Landmarken, Live-Regionen und Widgets zum Einsatz.</dd>
+    </dl>
+
+    <h3 id="Bemühungen_zur_Standardisierung">Bemühungen zur Standardisierung</h3>
+
+    <dl>
+     <dt><a class="external" href="http://www.w3.org/WAI/intro/aria.php" title="http://www.w3.org/WAI/intro/aria.php">Übersicht zu den WAI-ARIA Aktivitäten des W3C</a></dt>
+     <dd>Übersicht zu den Bemühungen für die Standardisierung von AI-ARIA der Web Accessibility Initiative (WAI).</dd>
+     <dt><a class="external" href="http://www.w3.org/TR/wai-aria/" title="http://www.w3.org/TR/wai-aria/">WAI-ARIA Spezifikation</a></dt>
+     <dd>Die Spezifikation des W3C ist als Referenz sehr nützlich. In diesem Stadium unbedingt Kompatibilitätstest durchgeführt werden, da die Implematierungen noch immer voneinader abweichen.</dd>
+     <dt><a class="external" href="http://www.w3.org/WAI/PF/aria-practices/" title="http://www.w3.org/WAI/PF/aria-practices/">WAI-ARIA Authoring Practices</a></dt>
+     <dd>Wie bei der WAI-ARIA-Spezifikation des W3C stellen die offiziellen best-practices ein Ideal für die Zukunft dar - den Zeitpunkt, an dem davon ausgegangen werden kann, dass die ARIA-Überstützung bei allen Browsern und Screen-Readern konsistent implemetiert ist. Die W3C-Dokumente erlauben die tiefgehende Einsicht in die Struktur von ARIA.<br>
+     <br>
+     Für jetzt gilt, dass Webentwickler, die ARIA implementieren, die Kompatibiliät maximieren sollten und hierfür auf die Dokumentation von Best-Practices und Beispielen zurückgreifen.</dd>
+     <dt><a class="external" href="http://www.openajax.org/member/wiki/Accessibility" title="http://www.openajax.org/member/wiki/Accessibility">Open AJAX Accessibility Task Force</a></dt>
+     <dd>Die Open AJAX Effort Centers zu Themen wie Entwicklerwerkzeugen, Beispieldateien und automatisierte Tests für ARIA.</dd>
+     <dt><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="ARIA Techniques">In der Entwicklung: WCAG 2.0 ARIA Techniken</a></dt>
+     <dd>Die Community benötigt einen kompletten Satz von WCAG-Techniken für WAI-ARIA + HTML, damit Organisationen davon ausgehen können, dass ihre ARIA-erweiterten Inhalte WCAG-konform sind. Das ist vor allem dann wichtig, wenn Regulierungen und Vorschriften auf WCAG basieren.</dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <td colspan="2">
+    <h3 id="Related_Topics" name="Related_Topics">Verwandte Themen</h3>
+
+    <dl>
+     <dd><a href="/en-US/docs/Accessibility" title="en-US/docs/Accessibility">Accessibility</a>, <a href="/en-US/docs/AJAX" title="en-US/docs/AJAX">AJAX</a>, <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a></dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/de/web/barrierefreiheit/index.html b/files/de/web/barrierefreiheit/index.html
new file mode 100644
index 0000000000..417c160fd0
--- /dev/null
+++ b/files/de/web/barrierefreiheit/index.html
@@ -0,0 +1,78 @@
+---
+title: Barrierefreiheit
+slug: Web/Barrierefreiheit
+tags:
+  - Accessibility
+  - Barrierefreiheit
+translation_of: Web/Accessibility
+---
+<p><span class="seoSummary"><strong>Accessibility</strong> (often abbreviated to <strong>A11y</strong>—as in "a" then 11 characters then "y") in Web development means enabling as many people as possible to use Web sites, even when those people's abilities are limited in some way. </span></p>
+
+<p>For many people, technology makes things easier. For people with disabilities, technology makes things possible. Accessibility means developing content to be as accessible as possible no matter an individual's physical and cognitive abilities and no matter how they access the web.</p>
+
+<p>"<strong>The Web is fundamentally designed to work for all people</strong>, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability."</p>
+
+<div class="cleared topicpage-table">
+<div class="section">
+<h2 class="Key_accessibility_tutorials" id="Key_accessibility_tutorials" name="Key_accessibility_tutorials">Key tutorials</h2>
+
+<p>The MDN <a href="/en-US/docs/Learn/Accessibility">Accessibility Learning Area</a> contains modern, up-to-date tutorials covering accessibility essentials:</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></dt>
+ <dd>This article starts off the module with a good look at what accessibility actually is — this includes what groups of people we need to consider and why, what tools different people use to interact with the Web, and how we can make accessibility part of our web development workflow.</dd>
+ <dt><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></dt>
+ <dd>A great deal of web content can be made accessible just by making sure the correct HTML elements are used for the correct purpose at all times. This article looks in detail at how HTML can be used to ensure maximum accessibility.</dd>
+ <dt><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></dt>
+ <dd>CSS and JavaScript, when used properly, also have the potential to allow for accessible web experiences ... or they can significantly harm accessibility if misused. This article outlines some CSS and JavaScript best practices that should be considered to ensure even complex content is as accessible as possible.</dd>
+ <dt><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></dt>
+ <dd>Following on from the previous article, sometimes making complex UI controls that involve unsemantic HTML and dynamic JavaScript-updated content can be difficult. WAI-ARIA is a technology that can help with such problems by adding in further semantics that browsers and assistive technologies can recognize and use to let users know what is going on. Here we'll show how to use it at a basic level to improve accessibility.</dd>
+ <dt><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></dt>
+ <dd>Another category of content that can create accessibility problems is multimedia — video, audio, and image content need to be given proper textual alternatives so they can be understood by assistive technologies and their users. This article shows how.</dd>
+ <dt><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></dt>
+ <dd>With web access on mobile devices being so popular, and popular platforms such as iOS and Android having fully-fledged accessibility tools, it is important to consider the accessibility of your web content on these platforms. This article looks at mobile-specific accessibility considerations.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Other_documentation" id="Other_documentation" name="Other_documentation">Other documentation</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG">Understanding the Web Content Accessibility Guidelines</a></dt>
+ <dd>
+ <p>This set of articles provides quick explanations to help you understand the steps that need to be taken to conform to the recommendations outlined in the W3C Web Content Accessibility Guidelines 2.0 (WCAG 2.0 or just WCAG, for the purposes of this writing).</p>
+ </dd>
+ <dt><a href="/en/Accessibility/Keyboard-navigable_JavaScript_widgets" title="en/Accessibility/Keyboard-navigable JavaScript widgets">Keyboard-navigable JavaScript widgets</a></dt>
+ <dd>Until now, web developers who want to make their styled &lt;div&gt; and &lt;span&gt; based widgets have lacked the proper techniques. <strong>Keyboard accessibility</strong> is part of the minimum accessibility requirements which a developer should be aware of.</dd>
+ <dt><a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a></dt>
+ <dd>A collection of articles to learn how to use ARIA to make your HTML documents more accessible.</dd>
+ <dt><a href="/en-US/docs/Accessibility/AT_Development" title="AT Development">Assistive technology (AT) development</a></dt>
+ <dd>A collection of articles intended for AT developers</dd>
+ <dt><a href="/en-US/docs/Web/Accessibility/Mobile_accessibility_checklist">Mobile accessibility checklist</a></dt>
+ <dd>This document provides a concise checklist of accessibility requirements for mobile app developers.</dd>
+ <dt><a href="/en-US/docs/Web/Accessibility/Cognitive_accessibility">Cognitive accessibility</a></dt>
+ <dd>When creating web content, be aware of how you can ensure that it is accessible to people cognitive impairments.</dd>
+ <dt><a href="/en-US/docs/Web/Accessibility/Seizure_disorders">Accessibility for seizure disorders</a></dt>
+ <dd>Some types of visual web content can induce seizures in people with certain brain disorders. Understand the types of content that can be problematic, and find tools and strategies to help you avoid them.</dd>
+ <dt></dt>
+</dl>
+
+<p><span class="alllinks"><a href="/en-US/docs/tag/Accessibility" title="/en-US/docs/tag/Accessibility">View all articles about Accessibility...</a></span></p>
+</div>
+
+
+</div>
+
+<p><a href="http://www.w3.org/standards/webdesign/accessibility" title="http://www.w3.org/standards/webdesign/accessibility">W3C - Accessibility</a></p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://lists.mozilla.org/listinfo/accessibility">Mozilla mailing list about accessibility</a></li>
+ <li><a href="http://www.w3.org/WAI/IG/">WAI Interest Group</a></li>
+ <li><a href="https://mozillians.org/en-US/group/1-accessibility">Mozillians group about accessibility</a></li>
+ <li><a href="/en-US/docs/Web/Guide" title="REDIRECT Web">Developer guides</a></li>
+ <li><a href="/en-US/docs/Mozilla/Accessibility" title="Accessibility is the idea that software (among other things) should be designed to be usable and, as much as possible, convenient to use for people with disabilities. Mozilla strives to make its software accessible; the documents below cover the ways in which we do so.">Accessibility and Mozilla</a></li>
+</ul>
+
+<section id="Quick_Links"></section>
diff --git a/files/de/web/barrierefreiheit/tastaturgesteuerte_javascript_komponenten/index.html b/files/de/web/barrierefreiheit/tastaturgesteuerte_javascript_komponenten/index.html
new file mode 100644
index 0000000000..2dedfc7aab
--- /dev/null
+++ b/files/de/web/barrierefreiheit/tastaturgesteuerte_javascript_komponenten/index.html
@@ -0,0 +1,145 @@
+---
+title: Tastaturgesteuerte JavaScript-Komponenten
+slug: Web/Barrierefreiheit/Tastaturgesteuerte_JavaScript_Komponenten
+translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets
+---
+<p>Tastaturgesteuerte JavaScript-Komponenten</p>
+<h3 id="Übersicht">Übersicht</h3>
+<p>Bei der Erstellung von Desktopkomponenten für Web-Applikationen, wie z.B. Menüs, Baumansichten, Richtext-Felder und Tab-Panels kommt in der Regel JavaScript zum Einsatz. Die Komponenten bestehen üblicherweise aus {{ HTMLElement("div") }}- und {{ HTMLElement("span") }}-Elementen, die von Haus aus nicht die gleiche Funktionalität wie echte Desktopkomponenten besitzen. Dieses Dokument beschreibt Techniken, die eingesetzt werden können, um JavaScript-Komponenten über die Tastatur zugänglich zu machen.</p>
+<h3 id="Benutzung_von_tabindex"><span style="color: rgb(0, 0, 0);"><span class="toctext">Benutzung von tabindex</span></span></h3>
+<p>Das tabindex-Attribut wurde zu Beginn als Teil von HTML 4 eingeführt, um Entwicklern zu ermöglichen, die Reihenfolge für die Fokussierung von Elementen festzulegen, die vom Benutzer mit der Tastatur angesteuert werden. Das genaue Verhalten von tabindex wurde später etwas abgeändert. Diese Änderungen sind in der HTML 5-Spezifikation beschrieben. Alle bekannten Browser implementieren fortan das neue Design.</p>
+<p>Die folgende Tabelle beschreibt das Verhalten von <code>tabindex</code> in modernen Browsern:</p>
+<table class="fullwidth-table" style="width: 75% !important;">
+ <tbody>
+  <tr>
+   <th><code>tabindex</code>-Attribut</th>
+   <th>Fokussierbar mit der Maus oder JavaScript über <code>element.focus()</code></th>
+   <th>Tab-navigierbar</th>
+  </tr>
+  <tr>
+   <td>Nicht vorhanden</td>
+   <td>Folgt der Festlegung für das Element für die Plattform ("Ja" bei Formularsteuerungen, Links, etc.).</td>
+   <td>Folgt der Festlegung für das Element für die Plattform.</td>
+  </tr>
+  <tr>
+   <td>Negativ (z.B. <code>tabindex="-1"</code>)</td>
+   <td>Ja</td>
+   <td>Nein; Entwickler muss auf Tasteneingaben reagieren und das Element über <code><a class="external text" href="../../../../En/DOM/Element.focus" rel="nofollow" title="https://developer.mozilla.org/En/DOM/Element.focus">focus()</a></code> fokussieren.</td>
+  </tr>
+  <tr>
+   <td>Null (z.B. <code>tabindex="0"</code>)</td>
+   <td>Ja</td>
+   <td>In der Tab-Ordnung relativ zur Position des Elements im Dokument.</td>
+  </tr>
+  <tr>
+   <td>Positiv (z.B. <code>tabindex="33"</code>)</td>
+   <td>Ja</td>
+   <td>Wert von <code>tabindex</code> bestimmt die Position des Elements in der Tab-Ordnung: Im Allgemeinen werden Elemente vor solchen positioniert, bei denen <code>tabindex="0"</code> gesetzt ist oder die von Natur aus per Tab steuerbar sind; Elemente mit kleinere Werten werden vor solchen mit größeren Werten positioniert (ein Element mit <code>tabindex="7"</code> wird z.B. vor <code>tabindex="11" </code>positioniert)</td>
+  </tr>
+ </tbody>
+</table>
+<h4 id="Einfache_Steuerungen"><span style="color: rgb(0, 0, 0);"><span class="toctext">Einfache Steuerungen</span></span></h4>
+<p>Damit z.B. eine einfache Tab-Komponente über die Tastatur bedient werden kann, wird dem entsprechenden {{ HTMLElement("div") }}- oder {{ HTMLElement("span") }}-Element das tabindex-Attribut hinzugefügt. Beim folgenden Beispiel wird diese Technik für eine Checkbox angewendet, die auf einem span-Element basiert.</p>
+<p><em>Beispiel 1: Eine einfache Checkbox-Komponente mit einem Bild, welche um das tabindex="0" erweitert wurde und so auch über die Tastatur gesteuert werden kann.</em></p>
+<pre class="brush: html"><code>&lt;!-- Ohne die tabindex-Attribute könnten die &lt;span&gt;-Elemente nicht mit der Tastatur fokussiert werden --&gt;
+&lt;div&gt;
+    &lt;span role="checkbox" aria-checked="true" tabindex="0"&gt;
+        &lt;img src="checked.gif" role="presentation" alt="" /&gt;
+        Include decorative fruit basket
+    &lt;/span&gt;
+&lt;/div&gt;
+&lt;div&gt;
+    &lt;span role="checkbox" aria-checked="true" tabindex="0"&gt;
+        &lt;img src="checked.gif" role="presentation" alt="" /&gt;
+        Include singing telegram
+    &lt;/span&gt;
+&lt;/div&gt;
+&lt;div&gt;
+    &lt;span role="checkbox" aria-checked="false" tabindex="0"&gt;
+        &lt;img src="unchecked.gif" role="presentation" alt="" /&gt;
+        Require payment before delivery
+    &lt;/span&gt;
+&lt;/div&gt;</code>
+</pre>
+<h4 id="Gruppieren_von_Steuerungselementen"><span style="color: rgb(0, 0, 0);"><span class="toctext">Gruppieren von Steuerungselementen</span></span></h4>
+<p>Für die Gruppierung von Komponenten, wie z.B. Menüs, Tableisten, Grids oder Baumansichten, sollte das Elternelement in die Tab-Ordnung aufgenommen werden (<code>tabindex="0"</code>). Außerdem sollte jede(s) untergeordnete Auswahl/Tab/Zelle/Reihe aus der Tabordnung entfernt werden (<code>tabindex="-1"</code>). Die untergeordneten Elemente sollten vom Benutzer über die Pfeiltasten angesteuert werden können (Eine ausführliche Beschreibung der Tastaturunterstützung, die im Allgemeinen für bestimmte Komponenten erwartet wird, finden Sie im <a class="external text" href="http://access.aol.com/dhtml-style-guide-working-group/" rel="nofollow" title="http://access.aol.com/dhtml-style-guide-working-group/">DHTML Style Guide</a>).</p>
+<p>Beim nächsten Beispiel wird diese Technik bei einer Menüsteuerung eingesetzt. Sobald der Fokus der Tastatur das &lt;ul&gt;-Element erreicht, muss der JavaScript-Entwickler den Fokus programmatisch steuern und auf das Drücken der Pfeiltasten reagieren. Techniken für die Steuerung des Fokus innerhalb von Komponenten, sind im Abschnitt "Steuerung des Fokus innerhalb von Gruppen" weiter unten beschrieben.</p>
+<p><em>Beispiel 2: Eine Menüsteuerung bei der mit tabindex die Tastaturnavigation gesteuert wird</em>.</p>
+<pre class="brush: html"><code>&lt;ul id="mb1" tabindex="0"&gt;
+  &lt;li id="mb1_menu1" tabindex="-1"&gt; Font
+    &lt;ul id="fontMenu" title="Font" tabindex="-1"&gt;
+      &lt;li id="sans-serif" tabindex="-1"&gt;Sans-serif&lt;/li&gt;
+      &lt;li id="serif" tabindex="-1"&gt;Serif&lt;/li&gt;
+      &lt;li id="monospace" tabindex="-1"&gt;Monospace&lt;/li&gt;
+      &lt;li id="fantasy" tabindex="-1"&gt;Fantasy&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+  &lt;li id="mb1_menu2" tabindex="-1"&gt; Style
+    &lt;ul id="styleMenu" title="Style" tabindex="-1"&gt;
+      &lt;li id="italic" tabindex="-1"&gt;Italics&lt;/li&gt;
+      &lt;li id="bold" tabindex="-1"&gt;Bold&lt;/li&gt;
+      &lt;li id="underline" tabindex="-1"&gt;Underlined&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+  &lt;li id="mb1_menu3" tabindex="-1"&gt; Justification
+    &lt;ul id="justificationMenu" title="Justication" tabindex="-1"&gt;
+      &lt;li id="left" tabindex="-1"&gt;Left&lt;/li&gt;
+      &lt;li id="center" tabindex="-1"&gt;Centered&lt;/li&gt;
+      &lt;li id="right" tabindex="-1"&gt;Right&lt;/li&gt;
+      &lt;li id="justify" tabindex="-1"&gt;Justify&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+<h4 id="Deaktivierte_Steuerungen"><span class="toctext">Deaktivierte Steuerungen</span></h4>
+<p>Wenn Sie ein Steuerelement deaktivieren, sollte dieses aus der Tab-Ordnung entfernt werden, indem <code>tabindex="-1"</code> gesetzt wird. Elemente, die Teil einer Komponentengruppe (wie z.B. Menüpunkte in einem Menü) sind, sollten über die Tastatur ansprechbar bleiben.</p>
+<h3 id="Steuerung_des_Fokus_innerhalb_von_Gruppen"><span style="color: rgb(0, 0, 0);"><span class="toctext">Steuerung des Fokus innerhalb von Gruppen</span></span></h3>
+<p>Wenn ein Benutzer den Fokus per Tab von einem Element wegbewegt, sollte der Fokus zu dem Element, das zuvor fokussiert war - z.B. einer Baumkomponente oder Gridzelle - zurückkehren. Es existieren zwei verschiedene Techniken, um dies zu bewirken:</p>
+<ol>
+ <li>Verschiebung von <code>tabindex</code>: Programmatische Bewegung des Fokus</li>
+ <li><code>aria-activedescendent</code>: Verwaltung eines "virtuellen" Fokus</li>
+</ol>
+<h4 id="Technik_1_Verschiebung_von_tabindex">Technik 1: Verschiebung von tabindex</h4>
+<p>Setzt man tabindex für das fokussierte Element auf "0", wird das ausgewählte Element innerhalb der Gruppe erneut fokussiert, wenn der Benutzer den Fokus per Tab fortbewegt und dann zu diesem Element zurückkehrt. Beachten Sie, dass bei der Aktualisierung von tabindex auf 0 für des zuvor selektierte Element <code>tabindex="-1"</code> gesetzt werden muss. Diese Technik wird auch verwendet, wenn auf Tastendrücke reagiert und der Fokus programmatisch weiterbewegt wird. Der tabindex wird dann entspechend aktualisiert, um das aktuell fokussierte Element anzuzeigen. Dies lässt sich wie folgt umsetzen:</p>
+<p>Jeweils ein keydown-Hander wird mit einem Element der Gruppe verknüpft. Wenn der Benutzer eine Pfeiltaste drückt, um ein anderes Element anzusteuern, passiert Folgendes:</p>
+<ol>
+ <li>Das neue Element wird codegesteuert fokussiert.</li>
+ <li>Der <code>tabindex</code> des fokussierten Elements wird auf "0" gesetzt.</li>
+ <li>Der <code>tabindex</code> des zuvor fokussierte Elements wird auf "-1" gesetzt.</li>
+</ol>
+<p>Hier finden Sie ein Beispiel für eine <a class="external text external-icon" href="http://www.oaa-accessibility.org/example/40/" rel="nofollow" title="http://www.oaa-accessibility.org/example/40/">WAI-ARIA Baumansicht</a> bei der diese Technik eingesetzt wird.</p>
+<h5 id="Tipps">Tipps</h5>
+<h6 id="Mit_element.focus()_den_Fokus_setzen">Mit element.focus() den Fokus setzen</h6>
+<p>Benutzen Sie nicht die Funktionen <code>createEvent()</code>, <code>initEvent()</code> und <code>dispatchEvent()</code> um ein Element zu fokussieren. DOM-Focus-Events arbeiten nur informell: Sie werden vom System erzeugt, wenn ein Element fokussiert wird, aber nicht verwendet, um den Fokus zu setzen. Greifen Sie stattdessen auf <code>element.focus()</code> zurück.</p>
+<h6 id="Mit_onfocus_den_Fokus_überprüfen">Mit onfocus den Fokus überprüfen</h6>
+<p>Gehen Sie nicht davon aus, dass Fokusänderungen allein über die Tastatur oder Maus initiiert werden: Assistierende Technologien, wie z.B. Screenreader, sind in der Lage den Fokus für jedes fokussierbare Element zu setzen. Benutzen Sie daher <code>onfocus</code> und <code>onblur</code> um Fokusänderungen zu verfolgen.</p>
+<p><code>onfocus</code> und <code>onblur</code> können nun mit jedem beliebigen Element verwendet werden. Es existiert jedoch kein Standard-DOM-Interface, um den aktuellen Fokus im Dokument abzufragen. Wenn man den Fokus verfolgen möchte, muss der aktuelle Zustand in einer JavaScript-Variablen hinterlegt werden.</p>
+<h4 id="Technik_2_aria-activedescendant">Technik 2: aria-activedescendant</h4>
+<p>Bei dieser Technik wird ein einzelner Event-Handler mit der Container-Komponente verknüpft und <code>aria-activedescendant</code> dazu benutzt, um einen "virtuellen" Fokus zu verwalten. (<a class="external text" href="../../../../An_Overview_of_Accessible_Web_Applications_and_Widgets" rel="nofollow" title="https://developer.mozilla.org/An_Overview_of_Accessible_Web_Applications_and_Widgets">Mehr Informationen über ARIA finden Sie indieser Übersicht</a>).</p>
+<p>The <code>aria-activedescendant</code> property identifies the ID of the descendent element that currently has the virtual focus. The event handler on the container must respond to key and mouse events by updating the value of <code>aria-activedescendant</code> and ensuring that the current item is styled appropriately (for example, with a border or background color). See the source code of this <a class="external text" href="http://www.oaa-accessibility.org/example/28/" rel="nofollow" title="http://www.oaa-accessibility.org/example/28/">ARIA radiogroup example</a> for a direct illustration of how this works.</p>
+<p>Die Eigenschaft <code>aria-activedescendent</code> enthält die ID des untergeordneten Elements, das aktuell fokussiert ist. Der Event-Handler des Containers muss auf Tastatur- und Mauseingaben reagieren, den Wert von <code>aria-activedescendent</code> aktualisieren und sicherstellen, dass die Darstellung des Elements entsprechend angepasst wird (z.B. Rahmen oder Hintergrundfarbe). Ein konkretes Beispiel für diese Technik liefert der Quellcode des <a class="external text" href="http://www.oaa-accessibility.org/example/28/" rel="nofollow" title="http://www.oaa-accessibility.org/example/28/">ARIA-Radiogruppen-Beispiels</a>.</p>
+<h5 id="Tipps_2">Tipps</h5>
+<h6 id="scrollIntoView">scrollIntoView</h6>
+<p>Note that the use of this pattern requires the author to ensure that the current <em>focused</em> widget is scrolled into view. You should be able to use the {{ domxref("element.scrollIntoView()") }} function, but we recommend confirming this works for you in your target browsers using the <a class="external text" href="http://www.quirksmode.org/dom/tests/scrollintoview.html" rel="nofollow" title="http://www.quirksmode.org/dom/tests/scrollintoview.html">quirksmode test</a>.Bei der Benutzung dieses Musters muss der Entwickler sicherstellen, dass das aktuell <em>fokussierte</em> Element in Sichtweite gescrollt wird. Für diesen Zweck kann die Funktion <code>element.scrollIntoView()</code> eingesetzt werden. Überprüfen Sie jedoch unbedingt mit dem <a class="external text external-icon" href="http://www.quirksmode.org/dom/tests/scrollintoview.html" rel="nofollow" title="http://www.quirksmode.org/dom/tests/scrollintoview.html">Quirksmode-Test</a>, ob dies für ihre Browser, die unterstützt werden sollen, fehlerfrei funktioniert.</p>
+<h6 id="Probleme">Probleme</h6>
+<ul>
+ <li><a class="external text" href="http://www.quirksmode.org/dom/w3c_cssom.html" rel="nofollow" title="http://www.quirksmode.org/dom/w3c_cssom.html">quirksmode meldet Pobleme bei Opera und Konqueror</a></li>
+ <li><a class="external text" href="https://bugzilla.mozilla.org/show_bug.cgi?id=450405" rel="nofollow" title="https://bugzilla.mozilla.org/show_bug.cgi?id=450405">Bug ab Firefox 3.0.1</a></li>
+</ul>
+<h3 id="Allgemeine_Richtlinien">Allgemeine Richtlinien</h3>
+<h4 id="Benutzung_von_onkeydown_um_auf_Tastendrücke_zu_reagieren_(nicht_onkeypress)">Benutzung von onkeydown, um auf Tastendrücke zu reagieren (nicht onkeypress)</h4>
+<p>Der Internet Explorer führt <code>keypress</code>-Events für nicht-alpahnumerische Zeichen nicht aus. Benutzen Sie stattdessen das <code>onkeydown</code>-Event.</p>
+<h4 id="Tastatur-_und_Mausbedienung_sollte_konsistent_sein">Tastatur- und Mausbedienung sollte konsistent sein</h4>
+<p>Um sicherzustellen, dass Benutzereingaben unabhängig vom Eingabegerät konstistent sind, sollten Tastatur- und Maus-Eventhandler denselben Code verwenden. Zum Beispiel sollte der Code, womit der <code>tabindex</code> oder das Aussehen festgelegt wird, wenn die Pfeiltasten benutzt werden, auch für die Mausklick-Handler verwendet werden, damit dieselben Änderungen stattfinden.</p>
+<h4 id="Aktivierung_von_Elementen_per_Tastatur">Aktivierung von Elementen per Tastatur</h4>
+<p>Damit die Tastatur für die Aktivierung von Elementen benutzt werden kann, sollte alle Handler, die mit der Mausevents verknüpft sind, auch mit Tastaturevents verknüpft werden. Soll z.B. mit der Enter-Taste ein Element aktiviert werden können, welches über einen Maushandler <code>onclick="doSomething()"</code> mit der Maus verknüpft ist, dann sollte die Funktion <code>doSomething()</code> auch über ein <code>keydown</code>-Event mit der Tastatur verknüpft werden: <code>onkeydown="return event.keyCode != 13 || doSomething();"</code>.</p>
+<h4 id="Verwenden_Sie_nicht_focus_für_das_Styling_(falls_Kompatibilität_mit_IE_7_und_ältereren_Browsern_notwendig)">Verwenden Sie nicht :focus für das Styling (falls Kompatibilität mit IE 7 und ältereren Browsern notwendig)</h4>
+<p>Der Internet Explorer 7 und ältere Versionen unterstützen den Pseudoselektor <code>:focus</code> nicht. Aus diesem Grund sollte er für die Gestaltung von fokussierten Elementen nicht verwendet werden. Stattdessen kann die Darstellung über einen <code>onfucus</code>-Eventhander verändert werden, z.B. indem ein CSS-Style Name dem <code>class</code>-Attribut hinzugefügt wird.</p>
+<h4 id="Kontinuierliches_Anzeigen_des_Fokus_für_Elemente_mit_tabindex-1_die_programmatisch_fokussiert_werden"><span style="color: rgb(0, 0, 0);"><span class="toctext">Kontinuierliches Anzeigen des Fokus für Elemente mit tabindex="-1", die programmatisch fokussiert werden</span></span></h4>
+<p>Der Internet Explorer zeigt die Fokusumrandung für Elemente nicht automatisch an. Die Hervorhebung des fokussierten Elementes muss daher per JavaScript, entweder durch die Änderung der Hintergrundfarbe (z.B. <code>this.style.backgroundColor = "gray"</code>) oder Anzeige eines gepunkteten Rahmen (z.B. <code>this.style.border = "1px dotted invert"</code>) erfolgen. Entscheiden Sie sich für die zweite Vorgehensweise, sollten die Elementen von Anfang an einen unsichtbaren 1px-Rahmen besitzen, damit sie nicht größer werden, wenn der Rahmen angezeigt wird (Rahmen nehmen Platz in Anspruch und beim IE sind CSS-Outlines nicht implementiert).</p>
+<h4 id="Verwendete_Tastendrücke_sollten_keine_Browserfunktionen_auslösen">Verwendete Tastendrücke sollten keine Browserfunktionen auslösen</h4>
+<p>Wenn eine Komponente auf Tastendrücke reagiert, sollte verhindert werden, dass der Browser diese Tastendrücke verarbeitet (z.B. Scrollen mit den Pfeiltasten), indem bei Event-Handlern ein Return-Code angegeben wird. Der Rückgabewert <code>false</code> verhindert, dass das Event an den Browser weitergereicht wird.</p>
+<p>Hierzu ein Beispiel:</p>
+<pre><code>&lt;span tabindex="-1" onkeydown="return handleKeyDown();"&gt;</code></pre>
+<p>Gibt die Funktion <code>handleKeyDown()</code> den Wert <code>false</code> zurück, wird das Event übernommen und der Browser so davon abgehalten auf den Tastendruck zu reagieren.</p>
+<h4 id="Abweichendes_Verhalten_bei_wiederholten_Tastendrücken">Abweichendes Verhalten bei wiederholten Tastendrücken</h4>
+<p>Je nach Betriebssystem kann es leider vorkommen, dass bei wiederholten Tastendrücken <code>onkeydown</code>-Events wiederholt ausgeführt werden oder auch nicht.</p>
diff --git a/files/de/web/barrierefreiheit/webentwicklung/index.html b/files/de/web/barrierefreiheit/webentwicklung/index.html
new file mode 100644
index 0000000000..7c0f69c735
--- /dev/null
+++ b/files/de/web/barrierefreiheit/webentwicklung/index.html
@@ -0,0 +1,58 @@
+---
+title: Webentwicklung
+slug: Web/Barrierefreiheit/Webentwicklung
+translation_of: Web/Accessibility
+---
+<p> </p>
+
+<table class="mainpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 id="Barrierefreiheit_im_Web">Barrierefreiheit im Web</h2>
+
+    <dl>
+     <dt><a href="/de/docs/Barrierefreiheit/ARIA">ARIA für Entwickler</a></dt>
+    </dl>
+
+    <dl>
+     <dd style="">ARIA ermöglicht Barrierefreiheit für dynamischen HTML-Content, wie z.B. Live-Content und JavaScript-Widgets.</dd>
+    </dl>
+
+    <dl>
+     <dt><a href="/en/Accessibility/Keyboard-navigable_JavaScript_widgets" title="en/Accessibility/Keyboard-navigable JavaScript widgets">Tastaturgesteuerte JavaScript-Widgets</a></dt>
+     <dd>Viele Webentwickler, die ihre &lt;div&gt;- und &lt;span&gt;-basierten Widgets über die Tastatur zugänglich machen wollen,  suchen dafür die passende Technik. Tastaturgesteuerte Zugänglichkeit gehört zu den Techniken, mit denen jeder Webentwickler vertraut sein sollte.</dd>
+    </dl>
+
+    <h2 id="XUL-Barrierefreiheit">XUL-Barrierefreiheit</h2>
+
+    <dl>
+     <dt> </dt>
+     <dt><a href="/en/Building_accessible_custom_components_in_XUL" title="en/Building_accessible_custom_components_in_XUL">Erstellung von benutzerdefinierten Komponenten mit XUL</a></dt>
+     <dd>Wie man DHTML-Techniken für Barrierefreiheit einsetzt, um XUL-Komponenten barrierefrei zu machen.</dd>
+    </dl>
+
+    <dl>
+     <dt><a href="/en/XUL_accessibility_guidelines" title="en/XUL_accessibility_guidelines">Richtlinien für die Erstellung von barrierefreiem XUL</a></dt>
+     <dd>Wenn diese Richtlinen bei der Erstellung von XUL-Komponenten befolgt werden, sind die mit XUL erstellten Benutzeroberflächen barrierefrei. Programmierer, Reviewer, Designer und QS-Tester sollten mit diesen Richtlinien vertraut sein.</dd>
+    </dl>
+
+    <dl>
+    </dl>
+
+    <dl>
+    </dl>
+   </td>
+   <td>
+    <h2 id="Externe_Informationen">Externe Informationen</h2>
+
+    <dl>
+     <dt><a class="external" href="http://www-306.ibm.com/able/guidelines/web/accessweb.html">Accessible Web Page Authoring</a></dt>
+     <dd>Eine übersichtliche Checkliste für barrierefreie Webentwicklung von IBM.</dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/de/web/css/-moz-binding/index.html b/files/de/web/css/-moz-binding/index.html
new file mode 100644
index 0000000000..c59286c421
--- /dev/null
+++ b/files/de/web/css/-moz-binding/index.html
@@ -0,0 +1,65 @@
+---
+title: '-moz-binding'
+slug: Web/CSS/-moz-binding
+tags:
+  - CSS
+  - CSS Referenz
+  - NeedsBrowserCompatibility
+  - NeedsMobileBrowserCompatibility
+  - NeedsUpdate
+  - Non-standard
+  - XBL
+translation_of: Archive/Web/CSS/-moz-binding
+---
+<div>{{Non-standard_header}}{{CSSRef}}{{Deprecated_Header(57)}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>-moz-binding</code> CSS Eigenschaft wird bei Mozilla basierten Anwendungen dazu verwendet, <a href="/de/docs/XBL">XBL</a> Bindings an ein DOM Element anzufügen.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* &lt;uri&gt; Wert */
+-moz-binding: url(http://www.example.org/xbl/htmlBindings.xml#checkbox);
+
+/* Globale Werte */
+-moz-binding: inherited;
+-moz-binding: initial;
+-moz-binding: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt>&lt;uri&gt;</dt>
+ <dd>Die URI für ein XBL Binding (inclusive dem Fragmentidentifizier).</dd>
+ <dt><code>none</code></dt>
+ <dd>Kein XBL Binding wird auf das Element angewandt.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: css">.beispieleins {
+  -moz-binding: url(http://www.example.org/xbl/htmlBindings.xml#radiobutton);
+}</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Nicht Teil einer Spezifikation.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.-moz-binding")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/XBL/XBL_1.0_Referenz/Anfügen_und_Lösen_von_Bindings">XBL Referenz: Anfügen und Lösen von Bindings</a></li>
+ <li><a href="/de/docs/Mozilla/Tech/XUL/Tutorial/Einführung_in_XBL">XUL Tutorial: Einführung in XBL</a></li>
+</ul>
diff --git a/files/de/web/css/-moz-border-bottom-colors/index.html b/files/de/web/css/-moz-border-bottom-colors/index.html
new file mode 100644
index 0000000000..04c5583e52
--- /dev/null
+++ b/files/de/web/css/-moz-border-bottom-colors/index.html
@@ -0,0 +1,134 @@
+---
+title: '-moz-border-bottom-colors'
+slug: Web/CSS/-moz-border-bottom-colors
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Referenz
+  - Non-standard
+translation_of: Archive/Web/CSS/-moz-border-bottom-colors
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>In Mozilla Anwendungen wie Firefox setzt die <code>-moz-border-bottom-colors</code> CSS Eigenschaft eine Liste von Farben für den unteren Rahmen.</p>
+
+<p>Wenn ein Element einen Rand hat, der größer ist als ein einzelner CSS-Pixel, verwendet jede Zeile von Pixeln die nächste Farbe, die in dieser Eigenschaft angegeben wurde, von außen nach innen. Dies beseitigt die Notwendigkeit von verschachtelten Boxen. Falls der Rand breiter ist als die Anzahl der definierten Farben, wird der verbleibende Teil des Randes in der innersten Farbe gezeichnet.</p>
+
+<p>{{cssinfo}}</p>
+
+<p>Sie wird nicht angewendet</p>
+
+<ol>
+ <li>wenn {{cssxref("border-style")}} <code>dashed</code> oder <code>dotted</code> ist.</li>
+ <li>auf Tabellen mit <code>border-collapse: collapse</code>.</li>
+</ol>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Einzelner &lt;color&gt; Wert */
+-moz-border-bottom-colors: #f0f0f0;
+
+/* Mehrere &lt;color&gt; Werte */
+-moz-border-bottom-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* Globale Werte */
+-moz-border-bottom-colors: inherit;
+-moz-border-bottom-colors: initial;
+-moz-border-bottom-colors: unset;
+</pre>
+
+<p>Akzeptiert eine durch Leerzeichen getrennte Liste von Farbwerten.</p>
+
+<dl>
+ <dt>&lt;color&gt;</dt>
+ <dd>Definiert die Farbe einer Linie von Pixeln des unteren Randes. <code>transparent</code> ist gültig. Siehe {{cssxref("&lt;color&gt;")}} Werte für mögliche Einheiten.</dd>
+ <dt>none</dt>
+ <dd>Es werden keine Farben gezeichnet oder {{cssxref("border-color")}} verwendet, falls angegeben.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush:html">&lt;div id="example"&gt;Beispiel&lt;/div&gt;
+</pre>
+
+<pre class="brush:css">#example {
+  padding: 20px;
+  background-color: gray;
+  border: 10px solid black;
+  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+}
+</pre>
+
+<p>{{EmbedLiveSample("Beispiel", 120, 90)}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Diese Eigenschaft ist nicht Teil irgendeiner Spezifikation.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref("border-color")}}</li>
+ <li>{{Cssxref("-moz-border-right-colors")}}</li>
+ <li>{{Cssxref("-moz-border-top-colors")}}</li>
+ <li>{{Cssxref("-moz-border-left-colors")}}</li>
+</ul>
diff --git a/files/de/web/css/-moz-border-left-colors/index.html b/files/de/web/css/-moz-border-left-colors/index.html
new file mode 100644
index 0000000000..a9d2006c1d
--- /dev/null
+++ b/files/de/web/css/-moz-border-left-colors/index.html
@@ -0,0 +1,136 @@
+---
+title: '-moz-border-left-colors'
+slug: Web/CSS/-moz-border-left-colors
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Referenz
+  - Non-standard
+translation_of: Archive/Web/CSS/-moz-border-left-colors
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>In Mozilla-Anwendungen wie Firefox, setzt die {{cssxref("-moz-border-left-colors")}} CSS Eigenschaft eine Liste von Farben für den linken Rand.</p>
+
+<p>Wenn ein Element einen Rand hat, der größer ist als ein einzelner CSS-Pixel, verwendet jede Zeile von Pixeln die nächste Farbe, die in dieser Eigenschaft angegeben wurde, von außen nach innen. Dies beseitigt die Notwendigkeit von verschachtelten Boxen. Falls der Rand breiter ist als die Anzahl der definierten Farben, wird der verbleibende Teil des Randes in der innersten Farbe gezeichnet.</p>
+
+<p>{{cssinfo}}</p>
+
+<p>Sie wird nicht angewendet</p>
+
+<ol>
+ <li>wenn {{cssxref("border-style")}} <code>dashed</code> oder <code>dotted</code> ist.</li>
+ <li>auf Tabellen mit <code>border-collapse: collapse</code>.</li>
+</ol>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Einzelner &lt;color&gt; Wert */
+-moz-border-left-colors: #f0f0f0;
+
+/* Mehrere &lt;color&gt; Werte */
+-moz-border-left-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* Globale Werte */
+-moz-border-left-colors: inherit;
+-moz-border-left-colors: initial;
+-moz-border-left-colors: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<p>Akzeptiert eine durch Leerzeichen getrennte Liste von Farbwerten.</p>
+
+<dl>
+ <dt>&lt;color&gt;</dt>
+ <dd>Definiert die Farbe einer Linie von Pixeln des linken Randes. <code>transparent</code> ist gültig. Siehe {{cssxref("&lt;color&gt;")}} Werte für mögliche Einheiten.</dd>
+ <dt>none</dt>
+ <dd>Es werden keine Farben gezeichnet oder {{cssxref("border-color")}} verwendet, falls angegeben.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush:html">&lt;div id="example"&gt;Beispiel&lt;/div&gt;
+</pre>
+
+<pre class="brush:css">#example {
+  padding: 20px;
+  background-color: gray;
+  border: 10px solid black;
+  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+}
+</pre>
+
+<p>{{EmbedLiveSample("Beispiel", 120, 90)}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Diese Eigenschaft ist nicht Teil irgendeiner Spezifikation.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref("border-color")}}</li>
+ <li>{{Cssxref("-moz-border-right-colors")}}</li>
+ <li>{{Cssxref("-moz-border-bottom-colors")}}</li>
+ <li>{{Cssxref("-moz-border-top-colors")}}</li>
+</ul>
diff --git a/files/de/web/css/-moz-border-right-colors/index.html b/files/de/web/css/-moz-border-right-colors/index.html
new file mode 100644
index 0000000000..787c70a6fa
--- /dev/null
+++ b/files/de/web/css/-moz-border-right-colors/index.html
@@ -0,0 +1,88 @@
+---
+title: '-moz-border-right-colors'
+slug: Web/CSS/-moz-border-right-colors
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Referenz
+  - Non-standard
+translation_of: Archive/Web/CSS/-moz-border-right-colors
+---
+<div>{{Non-standard_header}}{{CSSRef}}{{Obsolete_Header(59)}}</div>
+
+<p>In Mozilla-Anwendungen wie Firefox, setzt die {{cssxref("-moz-border-top-colors")}} CSS Eigenschaft eine Liste von Farben für den rechten Rand.</p>
+
+<p>Wenn ein Element einen Rand hat, der größer ist als ein einzelner CSS-Pixel, verwendet jede Zeile von Pixeln die nächste Farbe, die in dieser Eigenschaft angegeben wurde, von außen nach innen. Dies beseitigt die Notwendigkeit von verschachtelten Boxen. Falls der Rand breiter ist als die Anzahl der definierten Farben, wird der verbleibende Teil des Randes in der innersten Farbe gezeichnet.</p>
+
+<p>{{cssinfo}}</p>
+
+<p>Sie wird nicht angewendet</p>
+
+<ol>
+ <li>wenn {{cssxref("border-style")}} <code>dashed</code> oder <code>dotted</code> ist.</li>
+ <li>auf Tabellen mit <code>border-collapse: collapse</code>.</li>
+</ol>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Einzelner &lt;color&gt; Wert */
+-moz-border-right-colors: #f0f0f0;
+
+/* Mehrere &lt;color&gt; Werte */
+-moz-border-right-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* Globale Werte */
+-moz-border-right-colors: inherit;
+-moz-border-right-colors: initial;
+-moz-border-right-colors: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<p>Akzeptiert eine durch Leerzeichen getrennte Liste von Farbwerten.</p>
+
+<dl>
+ <dt>&lt;color&gt;</dt>
+ <dd>Definiert die Farbe einer Linie von Pixeln des rechten Randes. <code>transparent</code> ist gültig. Siehe {{cssxref("&lt;color&gt;")}} Werte für mögliche Einheiten.</dd>
+ <dt>none</dt>
+ <dd>Es werden keine Farben gezeichnet oder {{cssxref("border-color")}} verwendet, falls angegeben.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush:html">&lt;div id="example"&gt;Beispiel&lt;/div&gt;
+</pre>
+
+<pre class="brush:css">#example {
+  padding: 20px;
+  background-color: gray;
+  border: 10px solid black;
+  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+}
+</pre>
+
+<p>{{EmbedLiveSample("Beispiel", 120, 90)}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Diese Eigenschaft ist nicht Teil irgendeiner Spezifikation.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.-moz-border-right-colors")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref("border-color")}}</li>
+ <li>{{Cssxref("-moz-border-top-colors")}}</li>
+ <li>{{Cssxref("-moz-border-bottom-colors")}}</li>
+ <li>{{Cssxref("-moz-border-left-colors")}}</li>
+</ul>
diff --git a/files/de/web/css/-moz-border-top-colors/index.html b/files/de/web/css/-moz-border-top-colors/index.html
new file mode 100644
index 0000000000..79f324ceb0
--- /dev/null
+++ b/files/de/web/css/-moz-border-top-colors/index.html
@@ -0,0 +1,136 @@
+---
+title: '-moz-border-top-colors'
+slug: Web/CSS/-moz-border-top-colors
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Referenz
+  - Non-standard
+translation_of: Archive/Web/CSS/-moz-border-top-colors
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>In Mozilla-Anwendungen wie Firefox, setzt die {{cssxref("-moz-border-top-colors")}} CSS Eigenschaft eine Liste von Farben für den oberen Rand.</p>
+
+<p>Wenn ein Element einen Rand hat, der größer ist als ein einzelner CSS-Pixel, verwendet jede Zeile von Pixeln die nächste Farbe, die in dieser Eigenschaft angegeben wurde, von außen nach innen. Dies beseitigt die Notwendigkeit von verschachtelten Boxen. Falls der Rand breiter ist als die Anzahl der definierten Farben, wird der verbleibende Teil des Randes in der innersten Farbe gezeichnet.</p>
+
+<p>{{cssinfo}}</p>
+
+<p>Sie wird nicht angewendet</p>
+
+<ol>
+ <li>wenn {{cssxref("border-style")}} <code>dashed</code> oder <code>dotted</code> ist.</li>
+ <li>auf Tabellen mit <code>border-collapse: collapse</code>.</li>
+</ol>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Einzelner &lt;color&gt; Wert */
+-moz-border-top-colors: #f0f0f0;
+
+/* Mehrere &lt;color&gt; Werte */
+-moz-border-top-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* Globale Werte */
+-moz-border-top-colors: inherit;
+-moz-border-top-colors: initial;
+-moz-border-top-colors: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<p>Akzeptiert eine durch Leerzeichen getrennte Liste von Farbwerten.</p>
+
+<dl>
+ <dt>&lt;color&gt;</dt>
+ <dd>Definiert die Farbe einer Linie von Pixeln des oberen Randes. <code>transparent</code> ist gültig. Siehe {{cssxref("&lt;color&gt;")}} Werte für mögliche Einheiten.</dd>
+ <dt>none</dt>
+ <dd>Es werden keine Farben gezeichnet oder {{cssxref("border-color")}} verwendet, falls angegeben.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush:html">&lt;div id="example"&gt;Beispiel&lt;/div&gt;
+</pre>
+
+<pre class="brush:css">#example {
+  padding: 20px;
+  background-color: gray;
+  border: 10px solid black;
+  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+}
+</pre>
+
+<p>{{EmbedLiveSample("Beispiel", 120, 90)}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Diese Eigenschaft ist nicht Teil irgendeiner Spezifikation.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref("border-color")}}</li>
+ <li>{{Cssxref("-moz-border-right-colors")}}</li>
+ <li>{{Cssxref("-moz-border-bottom-colors")}}</li>
+ <li>{{Cssxref("-moz-border-left-colors")}}</li>
+</ul>
diff --git a/files/de/web/css/-moz-box-flex/index.html b/files/de/web/css/-moz-box-flex/index.html
new file mode 100644
index 0000000000..8c54ffa75a
--- /dev/null
+++ b/files/de/web/css/-moz-box-flex/index.html
@@ -0,0 +1,103 @@
+---
+title: '-moz-box-flex'
+slug: Web/CSS/-moz-box-flex
+tags:
+  - CSS
+  - CSS Referenz
+  - NeedsBrowserCompatibility
+  - NeedsMobileBrowserCompatibility
+  - Non-standard
+translation_of: Web/CSS/box-flex
+---
+<div>{{CSSRef}}{{warning("Dies ist eine Eigenschaft zur Steuerung von Teilen des XUL Boxmodells. Sie stimmt weder mit den alten CSS Flexible Box Layout Module Entwürfen für <code>box-flex</code> (welche auf dieser Eigenschaft beruhen), noch dem Verhalten von <code>-webkit-box-flex</code> (welche auf diesen Entwürfen beruht) überein.")}}</div>
+
+<p>Siehe <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Flexbox</a> für mehr Informationen, was anstelle dieser Eigenschaft verwendet werden sollte.</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>-moz-box-flex</code> und <code>-webkit-box-flex</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaften geben an, wie eine <code>-moz-box</code> oder <code>-webkit-box</code> wächst, um die Box zu füllen, die sie beinhaltet, in Richtung des Layouts der beinhaltenden Box. Siehe <a href="/de/docs/Web/Guide/CSS/Flexible_boxes">Flexbox</a> für mehr Informationen über die Eigenschaften von Flexbox-Elementen.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* &lt;number&gt; Werte */
+-moz-box-flex: 0;
+-moz-box-flex: 3;
+-webkit-box-flex: 0;
+-webkit-box-flex: 3;
+
+/* Globale Werte */
+-moz-box-flex: inherit;
+-moz-box-flex: initial;
+-moz-box-flex: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt>0</dt>
+ <dd>Die Box wächst nicht.</dd>
+ <dt>&gt; 0</dt>
+ <dd>Die Box wächst soweit, dass sie den verfügbaren Raum ausfüllt.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;-moz-box-flex example&lt;/title&gt;
+    &lt;style&gt;
+      div.example {
+        display: -moz-box;
+        display: -webkit-box;
+        border: 1px solid black;
+        width: 100%;
+      }
+      div.example &gt; p:nth-child(1) {
+        -moz-box-flex: 1;       /* Mozilla */
+        -webkit-box-flex: 1;    /* WebKit */
+        border: 1px solid black;
+      }
+      div.example &gt; p:nth-child(2) {
+        -moz-box-flex: 0;       /* Mozilla */
+        -webkit-box-flex: 0;    /* WebKit */
+        border: 1px solid black;
+      }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;div class="example"&gt;
+      &lt;p&gt;Ich wachse, um den zusätzlichen Raum auszufüllen.&lt;/p&gt;
+      &lt;p&gt;Ich wachse nicht.&lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Hinweise">Hinweise</h2>
+
+<p>Die beinhaltende Box teilt den zur Verfügung stehenden zusätzlichen Abstand proportional zum Flexwert jedes Inhaltselements auf.</p>
+
+<p>Inhaltselemente, die null als Flexwert haben, vergrößern sich nicht.</p>
+
+<p>Falls nur ein Inhaltselement einen Flexwert hat, der nicht null ist, vergrößert es sich, um den verfügbaren Raum auszufüllen.</p>
+
+<p>Inhaltselemente, die den gleichen Flexwert haben, vergrößern sich um den gleichen absoluten Betrag.</p>
+
+<p>Falls der Flexwert über das <code>flex</code> Elementattribut gesetzt wird, wird der Stil ignoriert.</p>
+
+<p>Um XUL Elemente innerhalb einer Box gleich groß zu machen, muss das <code>equalsize</code> Attribut der beinhaltenden Box auf den Wert <code>always</code> gesetzt werden. Dieses Attribut hat keine entsprechende CSS Eigenschaft.</p>
+
+<p>Ein Trick, um alle Inhaltselemente in einer beinhaltenden Box gleich groß zu machen, ist, allen eine feste Größe (z. B. <code>height: 0;</code>) und denselben box-flex Wert größer als null zu geben (z. B. <code>-moz-box-flex: 1</code>).</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Diese Eigenschaft ist eine nicht standardisierte Erweiterung. Es gab einen <a class="external" href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">alten Entwurf der CSS3 Flexbox Spezifikation</a>, der eine <code>box-flex</code> Eigenschaft definiert hat, aber dieser Entwurf ist mittlerweile überholt.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{Compat("css.properties.box-flex")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<p>{{cssxref("-moz-box-orient")}}, {{cssxref("-moz-box-pack")}}, {{cssxref("-moz-box-direction")}}, {{cssxref("flex")}}</p>
diff --git a/files/de/web/css/-moz-box-ordinal-group/index.html b/files/de/web/css/-moz-box-ordinal-group/index.html
new file mode 100644
index 0000000000..f4465ba8ca
--- /dev/null
+++ b/files/de/web/css/-moz-box-ordinal-group/index.html
@@ -0,0 +1,66 @@
+---
+title: '-moz-box-ordinal-group'
+slug: Web/CSS/-moz-box-ordinal-group
+tags:
+  - CSS
+  - CSS Referenz
+  - 'CSS:Mozilla Erweiterungen'
+  - Flexible Box
+  - Non-standard
+translation_of: Web/CSS/box-ordinal-group
+---
+<p>{{CSSRef}}<br>
+ {{warning("Dies ist eine Eigenschaft des ursprünglichen CSS Flexible Box Entwurfs und wurde in neueren Entwürfen ersetzt.")}}</p>
+
+<p>Siehe <a href="/de/docs/Web/Guide/CSS/Flexible_boxes" title="/en/CSS/Flexible_boxes">Flexbox</a> für mehr Informationen, was statt dieser Eigenschaft verwendet werden sollte.</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Kennzeichnet die Aufzählungsgruppe, zu der das Element gehört. Elemente mit einer geringeren Aufzählungsgruppe werden vor denen mit höherer Aufzählungsgruppe angezeigt.</p>
+
+<h2 id="Werte">Werte</h2>
+
+<p>Werte müssen Ganzzahlen größer als null sein. Der Standardwert für diese Eigenschaft ist 1.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: html">&lt;style type="text/css"&gt;
+  #Flexbox {
+    display: -ms-box;
+    display: -moz-box;
+    display: -webkit-box;
+  }
+
+  #text1 {
+    background: red;
+    -ms-box-ordinal-group: 4;
+    -moz-box-ordinal-group: 4;
+    -webkit-box-ordinal-group: 4;
+  }
+
+  #text2 {
+    background: green;
+    -ms-box-ordinal-group: 3;
+    -moz-box-ordinal-group: 3;
+    -webkit-box-ordinal-group: 3;
+  }
+
+  #text3 {
+    background: blue;
+    -ms-box-ordinal-group: 2;
+    -moz-box-ordinal-group: 2;
+    -webkit-box-ordinal-group: 2;
+  }
+
+  #text4 {
+    background: orange;
+  }
+&lt;/style&gt;
+
+&lt;div id="Flexbox"&gt;
+  &lt;div id="text1"&gt;text 1&lt;/div&gt;
+  &lt;div id="text2"&gt;text 2&lt;/div&gt;
+  &lt;div id="text3"&gt;text 3&lt;/div&gt;
+  &lt;div id="text4"&gt;text 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
diff --git a/files/de/web/css/-moz-box-pack/index.html b/files/de/web/css/-moz-box-pack/index.html
new file mode 100644
index 0000000000..517c6fce72
--- /dev/null
+++ b/files/de/web/css/-moz-box-pack/index.html
@@ -0,0 +1,136 @@
+---
+title: '-moz-box-pack'
+slug: Web/CSS/-moz-box-pack
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Referenz
+  - Layout
+  - Non-standard
+translation_of: Web/CSS/box-pack
+---
+<div>{{CSSRef}}{{warning("Dies ist eine Eigenschaft des ursprünglichen CSS Flexible Box Layout Moduls, welches durch einen neuen Standard ersetzt wurde.")}}</div>
+
+<p>Siehe <a href="/de/docs/Web/Guide/CSS/Flexible_boxes">Flexbox</a> für mehr Informationen.</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>-moz-box-pack</code> und <code>-webkit-box-pack</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaften bestimmen, wie ein <code>-moz-box</code> oder <code>-webkit-box</code> seine Inhalte in Richtung seines Layouts packt.  Die Wirkung dieser Eigenschaft ist nur sichtbar, falls es zusätzlichen Leerraum innerhalb der Box gibt. Siehe <a href="/de/docs/Web/Guide/CSS/Flexible_boxes">Flexbox</a> für mehr Informationen bezüglich den Eigenschaften von Flexbox-Elementen.</p>
+
+<p>Die Richtung des Layouts hängt von der Ausrichtung des Elements ab: horizontal oder vertikal.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Schlüsselwortwerte */
+-moz-box-pack: start;
+-moz-box-pack: center;
+-moz-box-pack: end;
+-moz-box-pack: justify;
+
+/* Globale Werte */
+-moz-box-pack: inherit;
+-moz-box-pack: initial;
+-moz-box-pack: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>start</code></dt>
+ <dd>Die Box packt Inhalte am Anfang und lässt eventuellen zusätzlichen Leerraum am Ende.</dd>
+ <dt><code>center</code></dt>
+ <dd>Die Box packt Inhalte in der Mitte und teilt eventuellen zusätzlichen Leerraum zwischen Start und Ende auf.</dd>
+ <dt><code>end</code></dt>
+ <dd>Die Box packt Inhalte am Ende und lässt eventuellen zusätzlichen Leerraum am Start.</dd>
+ <dt><code>justify</code></dt>
+ <dd>Der Leerraum wird gleichmäßig zwischen jedem Kind aufgeteilt, wobei kein zusätzlicher Leerraum vor dem ersten Kind oder nach dem letzten Kind platziert wird. Falls es nur ein Kind gibt, wird der Wert so behandelt, als ob er <code>start</code> wäre.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: css">div.example {
+  border-style: solid;
+
+  display: -moz-box; /* Mozilla */
+  display: -webkit-box; /* WebKit */
+
+  /* Make this box taller than the children,
+     so there is room for the box-pack */
+  height: 300px;
+  /* Make this box wide enough to show the contents
+     are centered horizontally */
+  width: 300px;
+
+  /* Children should be oriented vertically */
+  -moz-box-orient: vertical; /* Mozilla */
+  -webkit-box-orient: vertical; /* WebKit */
+
+  /* Align children to the horizontal center of this box */
+  -moz-box-align: center; /* Mozilla */
+  -webkit-box-align: center; /* WebKit */
+
+  /* Pack children to the bottom of this box */
+  -moz-box-pack: end;             /* Mozilla */
+  -webkit-box-pack: end;          /* WebKit */
+}
+
+div.example p {
+  /* Make children narrower than their parent,
+     so there is room for the box-align */
+  width: 200px;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="example"&gt;
+  &lt;p&gt;I will be second from the bottom of div.example, centered horizontally.&lt;/p&gt;
+  &lt;p&gt;I will be on the bottom of div.example, centered horizontally.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Beispiele', 310, 310)}}</p>
+
+<h2 id="Hinweise">Hinweise</h2>
+
+<p>Der Rand der Box, die als <em>Start</em> zum Packen bestimmt wird, hängt von der Ausrichtung der Box und deren Richtung ab:</p>
+
+<table class="standard-table" style="text-align: center;">
+ <tbody>
+  <tr>
+   <th> </th>
+   <th><strong>Normal</strong></th>
+   <th><strong>Umgekehrt</strong></th>
+  </tr>
+  <tr>
+   <th style="text-align: right;"><strong>Horizontal</strong></th>
+   <td>links</td>
+   <td>rechts</td>
+  </tr>
+  <tr>
+   <th style="text-align: right;"><strong>Vertikal</strong></th>
+   <td>oben</td>
+   <td>unten</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Der dem Start gegenüberliegende Rand wird als das <em>Ende</em> bestimmt.</p>
+
+<p>Falls das Packen durch das <code>pack</code> Elementattribut gesetzt wird, wird die Stileigenschaft ignoriert.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Diese Eigenschaft ist nicht standardisiert, jedoch erschien eine ähnliche Eigenschaft in einem <a class="external" href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">frühen Entwurf von CSS3 Flexbox</a>, die durch neuere Versionen der Spezifikation überholt wurde.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.box-pack")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<p>{{cssxref("box-orient")}}, {{cssxref("box-direction")}}, {{cssxref("box-align")}}</p>
diff --git a/files/de/web/css/-moz-cell/index.html b/files/de/web/css/-moz-cell/index.html
new file mode 100644
index 0000000000..7e4ded305c
--- /dev/null
+++ b/files/de/web/css/-moz-cell/index.html
@@ -0,0 +1,11 @@
+---
+title: '-moz-cell'
+slug: Web/CSS/-moz-cell
+tags:
+  - CSS
+  - Non-standard
+translation_of: Web/CSS/cursor
+---
+<div>{{CSSRef}}{{obsolete_header}}</div>
+
+<p><em>Diesen Wert nicht verwenden!</em> Stattdessen sollte der <code>cursor</code> Wert {{cssxref("cursor#cell","cell")}} verwendet werden.</p>
diff --git a/files/de/web/css/-moz-float-edge/index.html b/files/de/web/css/-moz-float-edge/index.html
new file mode 100644
index 0000000000..1049fa0df2
--- /dev/null
+++ b/files/de/web/css/-moz-float-edge/index.html
@@ -0,0 +1,67 @@
+---
+title: '-moz-float-edge'
+slug: Web/CSS/-moz-float-edge
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - 'CSS:Mozilla Erweiterungen'
+  - Layout
+  - NeedsCompatTable
+  - NeedsLiveSample
+  - Non-standard
+translation_of: Web/CSS/-moz-float-edge
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die nicht standardisierte <strong><code>-moz-float-edge</code></strong> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft gibt an, ob die Höhen- und Breiteneigenschaften des Elements die Dicke des Außenabstands, des Rands oder des Innenabstands beinhalten.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Schlüsselwortwerte */
+-moz-float-edge: border-box;
+-moz-float-edge: content-box;
+-moz-float-edge: margin-box;
+-moz-float-edge: padding-box;
+
+/* Globale Werte */
+-moz-float-edge: inherit;
+-moz-float-edge: initial;
+-moz-float-edge: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>border-box</code></dt>
+ <dd>Die Höhen- und Breiteneigenschaften beinhalten den Inhalt, Innenabstand und Rand, aber nicht den Außenabstand.</dd>
+ <dt><code>content-box</code></dt>
+ <dd>Die Höhen- und Breiteneigenschaften beinhalten den Inhalt, aber weder Innenabstand, Rand, noch Außenabstand.</dd>
+ <dt><code>margin-box</code></dt>
+ <dd>Die Höhen- und Breiteneigenschaften beinhalten den Inhalt, Innenabstand, Rand und Außenabstand.</dd>
+ <dt><code>padding-box</code></dt>
+ <dd>Die Höhen- und Breiteneigenschaften beinhalten den Inhalt und Innenabstand, aber nicht den Rand oder Außenabstand.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush:css">hr {
+  display: block;
+  height: 2px;
+  border: 1px inset;
+  margin: 0.5em auto 0.5em auto;
+  color: gray;
+  -moz-float-edge: margin-box;
+  box-sizing: border-box;
+}</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<p>{{bug(432891)}}</p>
diff --git a/files/de/web/css/-moz-force-broken-image-icon/index.html b/files/de/web/css/-moz-force-broken-image-icon/index.html
new file mode 100644
index 0000000000..b4b56a17d8
--- /dev/null
+++ b/files/de/web/css/-moz-force-broken-image-icon/index.html
@@ -0,0 +1,57 @@
+---
+title: '-moz-force-broken-image-icon'
+slug: Web/CSS/-moz-force-broken-image-icon
+tags:
+  - CSS
+  - CSS Referenz
+  - NeedsContent
+  - Non-standard
+translation_of: Web/CSS/-moz-force-broken-image-icon
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p><code>-moz-force-broken-image-icon</code> ist eine erweiterte CSS Eigenschaft. Der Wert <code>1</code> erzwingt ein Symbol für nicht ladbare Bilder auch wenn das Bild ein {{HTMLElement("img", "<code>alt</code>", "#attr-alt")}} Attribut hat. Wenn der Wert <code>0</code> verwendet wird, wird sich das Bild wie gewohnt verhalten und nur das <code>alt</code> Attribut anzeigen.</p>
+
+<div class="note"><strong>Hinweis:</strong> Sogar wenn der Wert auf <code>1</code> gesetzt wird, wird das <code>alt</code> Attribut immer noch angezeigt. Mehr Informationen sind weiter unten verfügbar.</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>Ein Wert von <code>1</code> bedeutet, dass ein Symbol für nicht ladbare Bilder angezeigt wird, auch wenn das Bild ein {{HTMLElement("img", "<code>alt</code>", "#attr-alt")}} Attribut hat. Ein Wert von <code>0</code> zeigt nur das <code>alt</code> Attribut an.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush:css;">img {
+  -moz-force-broken-image-icon: 1;
+  height:100px;
+  width:100px;
+}</pre>
+
+<pre class="brush:html;">&lt;img src='/broken/image/link.png' alt='Broken image link'&gt;</pre>
+
+<p>{{EmbedLiveSample('Beispiele','125','125','/files/4619/broken%20image%20link.png')}}</p>
+
+<div class="note"><strong>Hinweis:</strong> Sofern das Bild keine definierte Höhe und Breite hat, wird das Symbol für nicht ladbare Bilder nicht angezeigt, aber das <code>alt</code> Attribut wird ebenfalls versteckt, wenn <code>-moz-force-broken-image-icon</code> auf <code>1</code> gesetzt wird.</div>
+
+<h2 id="Hinweise">Hinweise</h2>
+
+<ul>
+ <li>Diese Eigenschaft funktioniert nur in gecko-basierten Browsern.</li>
+ <li>Die Verwendung dieser Eigenschaft wird nicht empfohlen. Stattdessen sollte ein passendes <code>alt</code> Attribut verwendet werden.</li>
+</ul>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{Bug(58646)}}</li>
+</ul>
diff --git a/files/de/web/css/-moz-image-rect/index.html b/files/de/web/css/-moz-image-rect/index.html
new file mode 100644
index 0000000000..685d7a855b
--- /dev/null
+++ b/files/de/web/css/-moz-image-rect/index.html
@@ -0,0 +1,146 @@
+---
+title: '-moz-image-rect'
+slug: Web/CSS/-moz-image-rect
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Referenz
+  - NeedsCompatTable
+  - NeedsUpdate
+  - Non-standard
+translation_of: Web/CSS/-moz-image-rect
+---
+<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("2.0")}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Dieser Wert für <a href="/de/docs/Web/CSS">CSS</a> {{cssxref("background-image")}} ermöglicht es, einen Bereich eines größeren Bildes als Hintergrund zu verwenden. Dies erlaubt es beispielsweise, verschiedene Teile eines größeren Bildes als Hintergründe in verschiedenen Teilen des Inhalts zu verwenden.</p>
+
+<p>Dies funktioniert ähnlich der {{cssxref("-moz-image-region")}} Eigenschaft, welche zusammen mit der {{cssxref("list-style-image")}} verwendet wird, um Teile eines Bildes als Aufzählungszeichen in einer Liste zu verwenden. Diese Eigenschaft wird jedoch für CSS Hintergründe verwendet.</p>
+
+<p>Die Syntax für ein Rechteck ist ähnlich der der <a href="/de/docs/Web/CSS/shape#Syntax"><code>rect()</code></a> Funktion, die einen {{cssxref("&lt;shape&gt;")}} CSS Typ generiert. Alle vier Werte sind relativ zur linken oberen Ecke des Bildes.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">-moz-image-rect({{cssxref("&lt;uri&gt;")}}, <em>top</em>, <em>right</em>, <em>bottom</em>, <em>left</em>);</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;uri&gt;")}}</dt>
+ <dd>Der URI des Bildes, von dem das Teilbild verwendet werden soll.</dd>
+ <dt><code>top</code></dt>
+ <dd>Der obere Rand, definiert als {{cssxref("&lt;length&gt;")}} des Teilbilds innerhalb des angegebenen Bildes.</dd>
+ <dt><code>right</code></dt>
+ <dd>Der rechte Rand, definiert als {{cssxref("&lt;length&gt;")}} des Teilbilds innerhalb des angegebenen Bildes.</dd>
+ <dt><code>bottom</code></dt>
+ <dd>Der untere Rand, definiert als {{cssxref("&lt;length&gt;")}} des Teilbilds innerhalb des angegebenen Bildes.</dd>
+ <dt><code>left</code></dt>
+ <dd>Der linke Rand, definiert als {{cssxref("&lt;length&gt;")}} des Teilbilds innerhalb des angegebenen Bildes.</dd>
+</dl>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Dieses Beispiel lädt ein Bild und verwendet es in vier Segmenten, um das Firefox Logo in vier {{HTMLElement("div")}} Blöcken darzustellen. Wenn auf deren Container geklickt wird, werden die vier Segmente rotiert, indem die {{cssxref("background-image")}} Eigenschaftswerte zwischen den vier {{HTMLElement("div")}} Blöcken getauscht werden.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<p>Das CSS definiert einen Containerstil, dann die Stile für die vier Boxen, die das gesamte Bild ausmachen.</p>
+
+<p>Der Container sieht folgendermaßen aus:</p>
+
+<pre class="brush: css">#container {
+  width: 267px;
+  height: 272px;
+  top: 100px;
+  left: 100px;
+  position: absolute;
+  font-size: 16px;
+  text-shadow: white 0px 0px 6px;
+  text-align: center;
+}</pre>
+
+<p>Dann werden die vier Boxen definiert, die die Segmente des Bildes beschreiben. Hier wird eines nach dem anderen dargestellt.</p>
+
+<pre class="brush: css">#box1 {
+  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 50%, 50%, 0%);
+  width: 133px;
+  height: 136px;
+  position: absolute;
+}
+</pre>
+
+<p>Dies ist die linke obere Ecke des Bildes. Sie beschreibt ein Rechteck, das das linke obere Viertel des Bildes der Datei <code>firefox.jpg</code> beinhaltet.</p>
+
+<pre class="brush: css">#box2 {
+  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 100%, 50%, 50%);
+  width: 133px;
+  height: 136px;
+  position: absolute;
+}
+</pre>
+
+<p>Dies beschreibt die rechte obere Ecke des Bildes.</p>
+
+<p>Die anderen Ecken folgen einem ähnlichen Schema:</p>
+
+<pre class="brush: css">#box3 {
+  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 50%, 100%, 0%);
+  width: 133px;
+  height: 136px;
+  position: absolute;
+}
+
+#box4 {
+  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 100%, 100%, 50%);
+  width: 133px;
+  height: 136px;
+  position: absolute;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<p>Das HTML ist recht einfach:</p>
+
+<pre class="brush: html">&lt;div id="container" onclick="rotate()"&gt;
+  &lt;div id="box1" style="left:0px;top:0px;"&gt;Top left&lt;/div&gt;
+  &lt;div id="box2" style="left:133px;top:0px;"&gt;Top right&lt;/div&gt;
+  &lt;div id="box3" style="left:0px;top:136px;"&gt;Bottom left&lt;/div&gt;
+  &lt;div id="box4" style="left:133px;top:136px;"&gt;Bottom right&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Dies platziert die vier Segmente des Bildes in einem 2x2 Raster. Diese vier Segmente sind alle innerhalb eines größeren {{HTMLElement("div")}} Blocks, dessen primärer Zweck das Erhalten von Klickereignissen und deren Senden an den JavaScript Code ist.</p>
+
+<h3 id="Der_JavaScript_Code">Der JavaScript Code</h3>
+
+<p>Dieser Code verarbeitet das Klickereignis, wenn auf den Container geklickt wird.</p>
+
+<pre class="brush:js">function rotate() {
+  var prevStyle = window.getComputedStyle(document.getElementById("box4"), null).getPropertyValue("background-image");
+
+  // Now that we've saved the last one, start rotating
+
+  for (var i=1; i&lt;=4; i++) {
+    var curId = "box" + i;
+
+    // Shift the background images
+
+    var curStyle = window.getComputedStyle(document.getElementById(curId), null).getPropertyValue("background-image");
+    document.getElementById(curId).style.backgroundImage = prevStyle;
+    prevStyle = curStyle;
+  }
+}</pre>
+
+<p>Dies verwendet {{domxref("window.getComputedStyle()")}}, um den Stil jedes Elements auszulesen und dem nächsten Element zuzuweisen. Beachte, dass es zuvor eine Kopie des letzten Boxstils speichert, da dieser durch den Stil des dritten Elements überschrieben wird. Durch das simple Kopieren der Werte der {{cssxref("background-image")}} Eigenschaft von einem zum nächsten Element durch jeden Mausklick, wird dieser erwünschte Effekt erreicht.</p>
+
+<h3 id="Wie_es_aussieht">Wie es aussieht</h3>
+
+<p>{{EmbedLiveSample("Beispiel","400","400")}}</p>
+
+<h2 id="Bugs">Bugs</h2>
+
+<ul>
+ <li>{{WebkitBug(32177)}}</li>
+</ul>
diff --git a/files/de/web/css/-moz-image-region/index.html b/files/de/web/css/-moz-image-region/index.html
new file mode 100644
index 0000000000..3a49ad49b0
--- /dev/null
+++ b/files/de/web/css/-moz-image-region/index.html
@@ -0,0 +1,84 @@
+---
+title: '-moz-image-region'
+slug: Web/CSS/-moz-image-region
+tags:
+  - CSS
+  - Non-standard
+  - Referenz
+translation_of: Web/CSS/-moz-image-region
+---
+<p>{{Non-standard_header}}{{ CSSRef() }}</p>
+
+<div><em>Für ein System, das mit beliebigen Hintergründen funktioniert, siehe {{Cssxref("-moz-image-rect")}}.</em></div>
+
+<div> </div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>-moz-image-region</code> Eigenschaft ist für XUL-Elemente und Pseudo-Elemente, welche ein Bild von der <a href="/de/CSS/list-style-image" title="de/CSS/list-style-image"><code>list-style-image</code></a> Eigenschaft benutzen, gedacht. Die Eigenschaft gibt einen Bereich des Bildes an, welcher anstelle des ganzen Bildes dargestellt wird. Das erlaubt Elementen verschiedene Stücke des gleichen Bildes zu benutzen, um die Leistung zu steigern.<br>
+ Die Syntax ist derjenigen der clip-Property ähnlich. Alle vier Werte sind relativ von der oberen linken Ecke des Bildes.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt>auto</dt>
+ <dd>Standardwert. Es wird nichts ausgeschnitten.</dd>
+ <dt>rect()</dt>
+ <dd>Es wird ein Bereich ausgeschnitten, der über die vier Längenangaben definert wird.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre>#example-button {
+  /* Zeige nur einen 4x4 großen Ausschnitt von der oberen, linken Ecke des Bildes */
+  list-style-image: url("chrome://example/skin/example.png");
+  -moz-image-region: rect(0px, 4px, 4px, 0px);
+}
+#example-button:hover {
+  /* Zeige einen anderen 4x4 großen Ausschnitt vom Bild, wenn sich die Maus über dem Button befindet */
+  -moz-image-region: rect(0px, 8px, 4px, 4px);
+}
+
+</pre>
+
+<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Browser</th>
+   <th>ab Version</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td>1.0 (1.0)</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>Safari (WebKit)</td>
+   <td>---</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/CSS/clip" title="de/CSS/clip"><code>clip</code></a></li>
+</ul>
diff --git a/files/de/web/css/-moz-orient/index.html b/files/de/web/css/-moz-orient/index.html
new file mode 100644
index 0000000000..8f650e4ab5
--- /dev/null
+++ b/files/de/web/css/-moz-orient/index.html
@@ -0,0 +1,73 @@
+---
+title: '-moz-orient'
+slug: Web/CSS/-moz-orient
+tags:
+  - CSS
+  - CSS Referenz
+  - Non-standard
+translation_of: Web/CSS/-moz-orient
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Die <code>-moz-orient</code> CSS Eigenschaft bestimmt die Orientierung des Elements, auf das sie angewendet wird.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>inline</code></dt>
+ <dd>Das Element wird in der gleichen Richtung wie die Textachse dargestellt: horizontal für horizontale Schreibmodi, vertikal für vertikale Schreibmodi.</dd>
+ <dt><code>block</code></dt>
+ <dd>Das Element wird in der gleichen Richtung wie die Textachse dargestellt: horizontal für horizontale Schreibmodi, vertikal für vertikale Schreibmodi.</dd>
+ <dt><code>horizontal</code></dt>
+ <dd>Das Element wird horizontal dargestellt.</dd>
+ <dt><code>vertical</code></dt>
+ <dd>Das Element wird vertikal dargestellt.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  The following progress meter
+  is horizontal (the default):
+&lt;/p&gt;
+&lt;progress max="100" value="75"&gt;&lt;/progress&gt;
+
+&lt;p&gt;
+ The following progress meter
+ is vertical:
+&lt;/p&gt;
+&lt;progress class="vert" max="100" value="75"&gt;&lt;/progress&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.vert {
+  -moz-orient: vertical;
+  width: 16px;
+  height: 150px;
+}</pre>
+
+<h3 id="Beispiele_2">Beispiele</h3>
+
+<p>{{EmbedLiveSample("Beispiele","200","360")}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Obwohl für das W3C mit anfänglichem positivem Feedback <a href="https://lists.w3.org/Archives/Public/www-style/2014Jun/0396.html">eingereicht</a>, ist diese Eigenschaft noch nicht Teil einer Spezifikation; aktuell ist sie daher eine Mozilla spezifische Erweiterung (d. h. <code>-moz-orient</code>).</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.-moz-orient")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref("box-orient")}}</li>
+</ul>
diff --git a/files/de/web/css/-moz-outline-radius-bottomleft/index.html b/files/de/web/css/-moz-outline-radius-bottomleft/index.html
new file mode 100644
index 0000000000..33caabb749
--- /dev/null
+++ b/files/de/web/css/-moz-outline-radius-bottomleft/index.html
@@ -0,0 +1,22 @@
+---
+title: '-moz-outline-radius-bottomleft'
+slug: Web/CSS/-moz-outline-radius-bottomleft
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Referenz
+  - NeedsCompatTable
+  - NeedsContent
+  - NeedsExample
+  - Non-standard
+translation_of: Web/CSS/-moz-outline-radius-bottomleft
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>-moz-outline-radius-bottomleft</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft setzt in Mozilla Anwendungen die Rundung der linken unteren Ecke des Umrisses.</p>
+
+<p>{{cssinfo}}</p>
+
+<p>Siehe die {{cssxref("-moz-outline-radius")}} Eigenschaft für mehr Informationen.</p>
diff --git a/files/de/web/css/-moz-outline-radius-bottomright/index.html b/files/de/web/css/-moz-outline-radius-bottomright/index.html
new file mode 100644
index 0000000000..6603060bd4
--- /dev/null
+++ b/files/de/web/css/-moz-outline-radius-bottomright/index.html
@@ -0,0 +1,22 @@
+---
+title: '-moz-outline-radius-bottomright'
+slug: Web/CSS/-moz-outline-radius-bottomright
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Referenz
+  - NeedsCompatTable
+  - NeedsContent
+  - NeedsExample
+  - Non-standard
+translation_of: Web/CSS/-moz-outline-radius-bottomright
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>-moz-outline-radius-bottomright</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft setzt in Mozilla Anwendungen die Rundung der rechten unteren Ecke des Umrisses.</p>
+
+<p>{{cssinfo}}</p>
+
+<p>Siehe die {{cssxref("-moz-outline-radius")}} Eigenschaft für mehr Informationen.</p>
diff --git a/files/de/web/css/-moz-outline-radius-topleft/index.html b/files/de/web/css/-moz-outline-radius-topleft/index.html
new file mode 100644
index 0000000000..1129445f62
--- /dev/null
+++ b/files/de/web/css/-moz-outline-radius-topleft/index.html
@@ -0,0 +1,22 @@
+---
+title: '-moz-outline-radius-topleft'
+slug: Web/CSS/-moz-outline-radius-topleft
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Referenz
+  - NeedsCompatTable
+  - NeedsContent
+  - NeedsExample
+  - Non-standard
+translation_of: Web/CSS/-moz-outline-radius-topleft
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>-moz-outline-radius-topleft</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft setzt in Mozilla Anwendungen die Rundung der linken oberen Ecke des Umrisses.</p>
+
+<p>{{cssinfo}}</p>
+
+<p>Siehe die {{cssxref("-moz-outline-radius")}} Eigenschaft für mehr Informationen.</p>
diff --git a/files/de/web/css/-moz-outline-radius-topright/index.html b/files/de/web/css/-moz-outline-radius-topright/index.html
new file mode 100644
index 0000000000..4abd5bea36
--- /dev/null
+++ b/files/de/web/css/-moz-outline-radius-topright/index.html
@@ -0,0 +1,22 @@
+---
+title: '-moz-outline-radius-topright'
+slug: Web/CSS/-moz-outline-radius-topright
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Referenz
+  - NeedsCompatTable
+  - NeedsContent
+  - NeedsExample
+  - Non-standard
+translation_of: Web/CSS/-moz-outline-radius-topright
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>-moz-outline-radius-topright</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft setzt in Mozilla Anwendungen die Rundung der rechten oberen Ecke des Umrisses.</p>
+
+<p>{{cssinfo}}</p>
+
+<p>Siehe die {{cssxref("-moz-outline-radius")}} Eigenschaft für mehr Informationen.</p>
diff --git a/files/de/web/css/-moz-outline-radius/index.html b/files/de/web/css/-moz-outline-radius/index.html
new file mode 100644
index 0000000000..45213c6b0b
--- /dev/null
+++ b/files/de/web/css/-moz-outline-radius/index.html
@@ -0,0 +1,141 @@
+---
+title: '-moz-outline-radius'
+slug: Web/CSS/-moz-outline-radius
+tags:
+  - CSS
+  - CSS Referenz
+  - NeedsLiveSample
+  - Non-standard
+translation_of: Web/CSS/-moz-outline-radius
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>In Mozilla Anwendungen wie Firefox kann die <code>-moz-outline-radius</code> CSS Eigenschaft dazu verwendet werden, um Umrissen runde Ecken zu verleihen. Ein {{cssxref("outline", "Umriss")}} ist eine Linie, die um Elemente gezeichnet wird, außerhalb des Randes, um das Element hervorzuheben.</p>
+
+<p><code>-moz-outline-radius</code> ist eine praktische Kurzschreibweise, um die vier Eigenschaften {{cssxref("-moz-outline-radius-topleft")}}, {{cssxref("-moz-outline-radius-topright")}}, {{cssxref("-moz-outline-radius-bottomright")}} und {{cssxref("-moz-outline-radius-bottomleft")}} zu setzen.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Ein Wert */
+-moz-outline-radius: 25px;
+
+/* Zwei Werte */
+-moz-outline-radius: 25px 1em;
+
+/* Drei Werte */
+-moz-outline-radius: 25px 1em 12%;
+
+/* Vier Werte */
+-moz-outline-radius: 25px 1em 12% 4mm;
+
+/* Globale Werte */
+-moz-outline-radius: inherit;
+-moz-outline-radius: initial;
+-moz-outline-radius: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<div class="note">Elliptische Umrisse und <code>&lt;percentage&gt;</code> Werte folgen der in {{cssxref("border-radius")}} beschriebenen Syntax.</div>
+
+<p>Ein, zwei, drei oder vier <code>&lt;outline-radius&gt;</code> Werte, die jeweils einem dieser Werte entsprechen:</p>
+
+<dl>
+ <dt>&lt;length&gt;</dt>
+ <dd>Siehe {{cssxref("&lt;length&gt;")}} für mögliche Werte.</dd>
+ <dt>&lt;percentage&gt;</dt>
+ <dd>Eine {{cssxref("&lt;percentage&gt;")}}; siehe {{cssxref("border-radius")}} für Details.</dd>
+</dl>
+
+<ul>
+ <li>Falls ein einzelner Wert gesetzt ist, wird er auf alle 4 Ecken angewendet.</li>
+ <li>Falls zwei Werte gesetzt sind, bezieht sich der erste auf die linke obere und die rechte untere Ecke und der zweite auf die rechte obere und die linke untere Ecke.</li>
+ <li>Falls drei Werte gesetzt sind, bezieht sich der erste auf die linke obere Ecke, der zweite auf die rechte obere und die linke untere Ecke und der dritte auf die rechte untere Ecke.</li>
+ <li>Falls vier Werte gesetzt sind, bezieht sich der erste auf die linke obere Ecke, der zweite auf die rechte obere Ecke, der dritte auf die rechte untere Ecke und der vierte auf die linke untere Ecke.</li>
+</ul>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush:css">outline: dotted red;
+
+-moz-outline-radius: 12% 1em 25px;
+/* ist gleichbedeutend mit: */
+-moz-outline-radius-topleft: 12%;
+-moz-outline-radius-topright: 1em;
+-moz-outline-radius-bottomright: 35px;
+-moz-outline-radius-bottomleft: 1em;</pre>
+
+<h2 id="Hinweise">Hinweise</h2>
+
+<ul>
+ <li><code>dotted</code> oder <code>dashed</code> abgerundete Ecken werden durchgehend dargestellt, {{bug("382721")}}.</li>
+ <li>Zukünftige Versionen von Gecko/Firefox entfernen möglicherweise diese Eigenschaft vollständig. Siehe {{bug("593717")}}.</li>
+</ul>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Diese Eigenschaft ist in keinem CSS Standard definiert.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.8")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("1.8")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/de/web/css/-moz-stack-sizing/index.html b/files/de/web/css/-moz-stack-sizing/index.html
new file mode 100644
index 0000000000..40e35d798f
--- /dev/null
+++ b/files/de/web/css/-moz-stack-sizing/index.html
@@ -0,0 +1,59 @@
+---
+title: '-moz-stack-sizing'
+slug: Web/CSS/-moz-stack-sizing
+tags:
+  - CSS
+  - CSS Referenz
+  - NeedsCompatTable
+  - NeedsLiveSample
+  - Non-standard
+  - XUL
+translation_of: Archive/Web/CSS/-moz-stack-sizing
+---
+<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.1")}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p><code>-moz-stack-sizing</code> ist eine erweiterte CSS Eigenschaft. Normalerweise ändert ein {{XULElem("stack")}} seine Größe, sodass alle seine Kindelemente komplett sichtbar sind. Zum Beispiel führt das Verschieben eines Kindelements ganz nach rechts innerhalb eines Stacks dazu, dass der Stack verbreitert wird, sodass das Kindelement sichtbar bleibt.</p>
+
+<p>Falls es erwünscht ist, den Stack an der automatischen Größenänderung zur Unterbringung aller Kinder zu hindern, kann <code>-moz-stack-sizing</code> beim Kindelement auf <code>ignore</code> gesetzt werden. Die Eigenschaft wird nicht für den Stack selbst, sondern auf dessen Kindelemente gesetzt. Dies erlaubt es, bestimmte Kindelemente zu ignorieren, die anderen aber nicht.</p>
+
+<p class="note"><strong>Hinweis:</strong> In früheren Gecko Versionen war es möglich, das Problem zu umgehen, indem sehr große negative untere und rechte Außenabstände für das Stackelement angegeben wurden und gleichgroße positive untere und rechte Außenabstände für die Kindelemente, die nicht ignoriert werden sollten. (Das Problem betraf nicht Kindelemente, die über oder links vom Stack verschoben wurden.)</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Schlüsselwortwerte */
+-moz-stack-sizing: stretch-to-fit;
+-moz-stack-sizing: ignore;
+
+/* Globale Werte */
+-moz-stack-sizing: inherit;
+-moz-stack-sizing: initial;
+-moz-stack-sizing: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt>stretch-to-fit</dt>
+ <dd>Das Kindelement beeinflusst die Größe des Stacks.</dd>
+ <dt>ignore</dt>
+ <dd>Der Stack wird das Kind bei der Berechnung seiner Größe nicht berücksichtigen.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush:css">.mainsheet {
+  -moz-stack-sizing: ignore;
+}
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<p>{{bug("346189")}}</p>
diff --git a/files/de/web/css/-moz-text-blink/index.html b/files/de/web/css/-moz-text-blink/index.html
new file mode 100644
index 0000000000..40ee555a03
--- /dev/null
+++ b/files/de/web/css/-moz-text-blink/index.html
@@ -0,0 +1,47 @@
+---
+title: '-moz-text-blink'
+slug: Web/CSS/-moz-text-blink
+tags:
+  - CSS
+  - CSS Referenz
+  - 'CSS:Mozilla Extensions'
+translation_of: Archive/Web/CSS/-moz-text-blink
+---
+<div>{{CSSRef}}{{non-standard_header}}{{deprecated_header}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die nicht standardisierte <code>-moz-text-blink</code> Mozilla <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft definiert den Blinkmodus.</p>
+
+<div class="note">
+<p>Firefox, der der einzige große Browser ist, der diese Eigenschaft unterstützt, hat die Unterstützung in Firefox 26 aufgegeben. Diese Eigenschaft wird nun in keinem Browser mehr unterstützt.</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt>none</dt>
+ <dd>Produziert kein Blinken.</dd>
+ <dt>blink</dt>
+ <dd>Text blinkt. Beachte, dass Text nicht blinken zu lassen eine Technik ist, um  <a href="http://www.w3.org/TR/UAAG/guidelines.html#tech-on-off-blinking-text" rel="external nofollow" title="http://www.w3.org/TR/UAAG/guidelines.html#tech-on-off-blinking-text">Checkpoint 3.3 der WAI-UAAG</a> zu erfüllen.</dd>
+</dl>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush:css">.example {
+  -moz-text-blink: blink;
+}</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Diese Eigenschaft wurde in einem <a href="http://www.w3.org/TR/2003/CR-css3-text-20030514/#text-blink">alten Entwurf der CSS 3 Text Spezifikation</a> definiert. Neuere Versionen haben die Definition entfernt.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.-moz-text-blink")}}
diff --git a/files/de/web/css/-moz-user-focus/index.html b/files/de/web/css/-moz-user-focus/index.html
new file mode 100644
index 0000000000..2c3e77a9da
--- /dev/null
+++ b/files/de/web/css/-moz-user-focus/index.html
@@ -0,0 +1,117 @@
+---
+title: '-moz-user-focus'
+slug: Web/CSS/-moz-user-focus
+tags:
+  - CSS
+  - CSS Referenz
+  - 'CSS:Mozilla Erweiterungen'
+  - NeedsBrowserCompatibility
+  - NeedsContent
+  - NeedsExample
+  - NeedsMobileBrowserCompatibility
+translation_of: Web/CSS/-moz-user-focus
+---
+<div>{{Non-standard_header}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>-moz-user-focus</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft wird dazu benutzt, anzugeben, ob das Element den Fokus haben kann.</p>
+
+<p>Durch Setzen ihres Wertes auf <code>ignore</code> kann die Fokussierung des Elements deaktiviert werden, was bedeutet, dass der Benutzer das Element nicht aktivieren kann. Das Element wird in der Tabsequenz ausgelassen.</p>
+
+<p>{{cssinfo}}</p>
+
+<div class="note"><strong>Hinweis:</strong> Diese Eigenschaft funktioniert nicht bei XUL {{XULElem("textbox")}} Elementen, weil die <code>textbox</code> selbst nie fokussiert werden kann. Stattdessen erzeugt XBL ein anonymes HTML {{HTMLElement("input")}} Element innerhalb der <code>textbox</code> und dieses Element ist dasjenige, das den Fokus erhält. Die <code>textbox</code> kann auch daran gehindert werden, den Tastaturfokus zu erhalten, indem sein Tabindex auf <code>-1</code> gesetzt wird und daran, den Mausfokus zu erhalten, indem die Standardaktion des <code>mousedown</code> Ereignisses verhindert wird.</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Schlüsselwortwerte */
+-moz-user-focus: normal;
+-moz-user-focus: ignore;
+
+/* Globale Werte */
+-moz-user-focus: inherit;
+-moz-user-focus: initial;
+-moz-user-focus: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>ignore</code></dt>
+ <dd>Das Element akzeptiert den Tastaturfokus nicht und wird in der Tabreihenfolge ausgelassen.</dd>
+ <dt><code>normal</code></dt>
+ <dd>Das Element kann den Tastaturfokus akzeptieren.</dd>
+ <dt><code>select-after</code></dt>
+ <dd>?</dd>
+ <dt><code>select-before</code></dt>
+ <dd>?</dd>
+ <dt><code>select-menu</code></dt>
+ <dd>?</dd>
+ <dt><code>select-same</code></dt>
+ <dd>?</dd>
+ <dt><code>select-all</code></dt>
+ <dd>?</dd>
+ <dt><code>none</code></dt>
+ <dd>?</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Diese Eigenschaft ist nicht Teil einer Spezifikation. Eine ähnliche Eigenschaft <code>user-focus</code> wurde in <a class="external" href="http://www.w3.org/TR/2000/WD-css3-userint-20000216">frühen Entwürfen eines Vorläufers der CSS3 UI Spezifikation</a> vorgeschlagen, jedoch von der Arbeitsgruppe abgelehnt.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Chrome für Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/de/web/css/-moz-user-input/index.html b/files/de/web/css/-moz-user-input/index.html
new file mode 100644
index 0000000000..a9237a1778
--- /dev/null
+++ b/files/de/web/css/-moz-user-input/index.html
@@ -0,0 +1,64 @@
+---
+title: '-moz-user-input'
+slug: Web/CSS/-moz-user-input
+tags:
+  - CSS
+  - CSS Referenz
+  - Non-standard
+translation_of: Web/CSS/-moz-user-input
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>In Mozilla Anwendungen bestimmt die <code>-moz-user-input</code> CSS Eigenschaft, ob ein Element Benutzereingaben zulässt. Eine ähnliche Eigenschaft <code>user-focus</code> wurde in <a class="external" href="http://www.w3.org/TR/2000/WD-css3-userint-20000216">frühen Entwürfen eines Vorläufers der CSS3 UI Spezifikation</a> definiert, wurde jedoch von der Arbeitsgruppe verworfen.</p>
+
+<p>{{cssinfo}}</p>
+
+<p><code>-moz-user-input</code> war einer der Vorschläge, der zu der vorgeschlagenen CSS 3 {{cssxref("user-input")}} Eigenschaft führten, welche noch nicht Candidate Recommendation (benötigt Implementierungen) erreicht hat.</p>
+
+<p>Für Elemente, die normalerweise Benutzereingaben ermöglichen wie beispielsweise {{HTMLElement("textarea")}}, ist der Initialwert von <code>-moz-user-input</code> <code>enabled</code>.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Schlüsselwortwerte */
+-moz-user-input: none;
+-moz-user-input: enabled;
+-moz-user-input: disabled;
+
+/* Globale Werte */
+-moz-user-input: inherit;
+-moz-user-input: initial;
+-moz-user-input: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt>none</dt>
+ <dd>Das Element reagiert nicht auf Benutzereingaben und wird nicht {{Cssxref(":active")}}.</dd>
+ <dt>enabled</dt>
+ <dd>Das Element akzeptiert Benutzereingaben. Für Texteingabefelder ist dies das Standardverhalten.</dd>
+ <dt>disabled</dt>
+ <dd>Das Element akzeptiert keine Benutzereingaben. Dies ist jedoch insofern nicht dasselbe wie das Setzen von {{XULAttr("disabled")}} auf <code>true</code>, als dass das Element normal dargestellt wird.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush:css">input.example {
+  /* Der Benutzer kann den Text markieren, ihn jedoch nicht ändern. */
+  -moz-user-input: disabled;
+}
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref("-moz-user-focus")}}</li>
+ <li>{{cssxref("-moz-user-modify")}}</li>
+ <li>{{cssxref("-moz-user-select")}}</li>
+</ul>
diff --git a/files/de/web/css/-moz-user-modify/index.html b/files/de/web/css/-moz-user-modify/index.html
new file mode 100644
index 0000000000..d1ec135fa0
--- /dev/null
+++ b/files/de/web/css/-moz-user-modify/index.html
@@ -0,0 +1,133 @@
+---
+title: '-moz-user-modify'
+slug: Web/CSS/-moz-user-modify
+tags:
+  - CSS
+  - CSS Referenz
+  - NeedsMobileBrowserCompatibility
+  - Non-standard
+translation_of: Web/CSS/user-modify
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>-moz-user-modify</code> Eigenschaft bestimmt, ob der Inhalt eines Elementes vom Benutzer bearbeitet werden kann oder nicht. Diese Eigenschaft ist ähnlich zum {{htmlattrxref("contenteditable")}} Attribut. Eine ähnliche Eigenschaft <code>user-focus</code> wurde in <a class="external" href="http://www.w3.org/TR/2000/WD-css3-userint-20000216">frühen Entwürfen eines Vorläufers der CSS3 UI Spezifikation</a> vorgeschlagen, jedoch von der Arbeitsgruppe verworfen.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Schlüsselwortwerte */
+-moz-user-modify: read-only;
+-moz-user-modify: read-write;
+-moz-user-modify: write-only;
+
+/* Globale Werte */
+-moz-user-modify: inherit;
+-moz-user-modify: initial;
+-moz-user-modify: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt>read-only</dt>
+ <dd>Standardwert. Inhalte sind nur lesbar.</dd>
+ <dt>read-write</dt>
+ <dd>Der Benutzer kann Inhalte lesen und schreiben.</dd>
+ <dt>write-only</dt>
+ <dd>Der Benutzer kann Inhalte bearbeiten, jedoch nicht lesen.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">.readwrite {
+  -moz-user-modify: read-write;
+  -webkit-user-modify: read-write;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;div class="readwrite"&gt;Der Benutzer kann diesen Text ändern.&lt;/div&gt;
+</pre>
+
+<h3 id="Ergebnis">Ergebnis</h3>
+
+<p>{{EmbedLiveSample("Beispiel", 300, 30)}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p><code>user-modify</code> in <a class="external" href="http://www.w3.org/TR/2000/WD-css3-userint-20000216#user-modify" lang="en">einem frühen Entwurf der CSS 3 User Interface Spezifikation</a> (Working Draft vom Februar 2000, jetzt überholt durch <em>CSS 3 Basic User Interface</em>).</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}} {{property_prefix("-moz")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>3.0 {{property_prefix("-webkit")}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Auch unterstützt: <code>-webkit-user-modify: read-write-plaintext-only</code> (Richtext geht verloren).<br>
+ Diese Eigenschaft wird in Safari 2.0 <code>-khtml-user-modify</code> genannt.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref("-moz-user-focus")}}</li>
+ <li>{{cssxref("-moz-user-input")}}</li>
+ <li>{{cssxref("-moz-user-select")}}</li>
+</ul>
diff --git a/files/de/web/css/-moz-user-select/index.html b/files/de/web/css/-moz-user-select/index.html
new file mode 100644
index 0000000000..aefa619439
--- /dev/null
+++ b/files/de/web/css/-moz-user-select/index.html
@@ -0,0 +1,55 @@
+---
+title: '-moz-user-select'
+slug: Web/CSS/-moz-user-select
+tags:
+  - CSS
+  - CSS Referenz
+  - 'CSS:Mozilla Erweiterungen'
+translation_of: Web/CSS/user-select
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>In Mozilla Anwendungen steuert die <code>-moz-user-select</code> Eigenschaft, ob und wie ein Text ausgewählt werden kann.</p>
+
+<ul>
+ <li>Standardwert: <code>text</code></li>
+ <li>Anwendbar auf: alle Elemente</li>
+ <li>Vererbbar: Ja</li>
+ <li>Prozentwerte: Nein</li>
+ <li>Medium: visuell</li>
+ <li>berechneter Wert: wie festgelegt</li>
+</ul>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="eval">-moz-user-select: text | all | none| -moz-none | inherit
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt>text</dt>
+ <dd>Der Text kann vom Benutzer ausgewählt werden.</dd>
+ <dt>all</dt>
+ <dd>Bei einem einfachem Klick auf das Element wird der gesamte Text ausgewählt. Bei einem Doppelklick auf das Element wird der höchste Vorfahr ausgewählt.</dd>
+ <dt>none</dt>
+ <dd>Der Text eines Elements und dessen Kindelemente können nicht ausgewählt werden. Wird jedoch eine <a href="/de/DOM/Selection">Auswahl über das DOM</a> getätigt, sind diese Elemente darin enthalten.</dd>
+ <dt>-moz-none</dt>
+ <dd>Der Text eines Elements und dessen Kindelemente können nicht ausgewählt werden. Die Auswahl kann bei Kindelementen aktiviert werden, wenn dort <code>-moz-user-select: text</code> festgelegt wird.</dd>
+ <dt>inherit</dt>
+ <dd>Der Wert des Elternelements wird geerbt.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre>/* Schaltet Textauswahl ab */
+-moz-user-select: none
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/CSS/::selection"><code>::selection</code></a></li>
+</ul>
diff --git a/files/de/web/css/-moz-window-shadow/index.html b/files/de/web/css/-moz-window-shadow/index.html
new file mode 100644
index 0000000000..9571b99e0d
--- /dev/null
+++ b/files/de/web/css/-moz-window-shadow/index.html
@@ -0,0 +1,53 @@
+---
+title: '-moz-window-shadow'
+slug: Web/CSS/-moz-window-shadow
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - NeedsCompatTable
+  - Non-standard
+  - Referenz
+  - XUL
+translation_of: Archive/Web/CSS/-moz-window-shadow
+---
+<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.1")}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>-moz-window-shadow</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft bestimmt, ob ein Fenster einen Schatten wirft oder nicht. Sie funktioniert nur unter Mac OS X.</p>
+
+<div class="note">
+<p>Diese Eigenschaft ist nicht standardisiert und kann ab Firefox 44 nicht mehr in Webseiten verwendet werden.</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<p>Firefox 3 hat die Unterstützung für transparente Fenster unter Mac OS X hinzugefügt. Jedoch waren für diese Fenster Schatten deaktiviert und es gab keine Möglichkeit, diese zu aktivieren.</p>
+
+<p>In Firefox 3.5 wurde der Standardwert geändert; alle Fenster haben nun einen Schatten. Es wurde die <code>-moz-window-shadow</code> CSS Eigenschaft eingeführt, um umgewollte Schatten ausschalten zu können.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt>default</dt>
+ <dd>Das Fenster wirft einen Schatten mit dem Standard Fensterschattenstil.</dd>
+ <dt>menu {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Das Fenster hat einen Schatten, der für Menüs passend ist.</dd>
+ <dt>tooltip {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Das Fenster hat einen Schatten, der für Tooltips passend ist.</dd>
+ <dt>sheet {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Das Fenster hat einen Schatten, der für Sheetfenster passend ist.</dd>
+ <dt>none</dt>
+ <dd>Das Fenster hat keinen Schatten.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush:css">.KUI-panel {
+  -moz-window-shadow: none;
+}
+</pre>
diff --git a/files/de/web/css/-webkit-box-reflect/index.html b/files/de/web/css/-webkit-box-reflect/index.html
new file mode 100644
index 0000000000..08b974fd4e
--- /dev/null
+++ b/files/de/web/css/-webkit-box-reflect/index.html
@@ -0,0 +1,116 @@
+---
+title: '-webkit-box-reflect'
+slug: Web/CSS/-webkit-box-reflect
+tags:
+  - CSS
+  - Eigenschaft
+  - Non-standard
+  - Referenz
+translation_of: Web/CSS/-webkit-box-reflect
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>-webkit-box-reflect</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft reflektiert den Inhalt eines Elements in einer bestimmten Richtung.</p>
+
+<div class="warning"><strong>Hinweis:</strong> Dieses Feature ist <strong>nicht dazu gedacht, auf Webseiten verwendet zu werden</strong>. Um Reflektionen im Web zu erreichen, ist der Standardweg die Benutzung der CSS {{cssxref("element", "element()")}} Funktion.</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Richtungswerte */
+-webkit-box-reflect: above;
+-webkit-box-reflect: below;
+-webkit-box-reflect: left;
+-webkit-box-reflect: right;
+
+/* Versatzwert */
+-webkit-box-reflect: below 10px;
+
+/* Maskenwert */
+-webkit-box-reflect: below 0 linear-gradient(transparent, white);
+
+/* Globale Werte */
+-webkit-box-reflect: inherit;
+-webkit-box-reflect: initial;
+-webkit-box-reflect: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>above</code><em>, </em><code>below</code><em>, </em><code>right</code><em>, </em><code>left</code></dt>
+ <dd>Sind Schlüsselwörter, die angeben, in welche Richtung die Reflektion stattfinden soll.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Gibt die Größe der Reflektion an.</dd>
+ <dt><code>&lt;image&gt;</code></dt>
+ <dd>Beschreibt die Maske, die auf die Reflektion angewendet werden soll.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Diese Eigenschaft ist nicht standardisiert und wird nicht Teil von CSS sein. Der Standardweg, um eine Reflektion in CSS zu erzeugen, ist die Verwendung der CSS Funktion {{cssxref("element", "element()")}}.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome("4.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("15.0")}}</td>
+   <td>{{CompatSafari("4.0")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatAndroid("2.1")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>22.0 {{CompatVersionUnknown}}</td>
+   <td>3.2 {{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Die Apple <a class="external" href="http://developer.apple.com/library/safari/documentation/appleapplications/reference/safaricssref/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW16" title="http://developer.apple.com/library/safari/documentation/appleapplications/reference/safaricssref/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW16">Documentation</a></li>
+ <li>Die Webkit <a href="https://www.webkit.org/blog/182/css-reflections/">Spezifikation</a></li>
+ <li>Lea Verous Artikel bezüglich Reflektion unter Vernwendung von <a class="external" href="http://lea.verou.me/2011/06/css-reflections-for-firefox-with-moz-element-and-svg-masks/" title="http://lea.verou.me/2011/06/css-reflections-for-firefox-with-moz-element-and-svg-masks/">standardisierten CSS Features</a>.</li>
+</ul>
diff --git a/files/de/web/css/-webkit-mask-origin/index.html b/files/de/web/css/-webkit-mask-origin/index.html
new file mode 100644
index 0000000000..21f3b18534
--- /dev/null
+++ b/files/de/web/css/-webkit-mask-origin/index.html
@@ -0,0 +1,100 @@
+---
+title: '-webkit-mask-origin'
+slug: Web/CSS/-webkit-mask-origin
+tags:
+  - CSS
+  - Referenz
+translation_of: Web/CSS/mask-origin
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Die <code>-webkit-mask-origin</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft bestimmt den Ursprungspunkt des Maskenbildes. Der Wert der {{cssxref("-webkit-mask-position")}} Eigenschaft wird relativ zum Wert dieser Eigenschaft interpretiert. Diese Eigenschaft wird nicht angewendet, wenn <code>-webkit-mask-attachment</code> <code>fixed</code> ist.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Werte">Werte</h2>
+
+<dl>
+ <dt>padding</dt>
+ <dd>Standardwert. Die Position des Maskenbildes ist relativ zum Innenabstand. (Für einzelne Boxen ist <code>"0 0</code>" die linke obere Ecke des Randes des Innenabstands, "<code>100% 100%</code>" ist die untere rechte Ecke.)</dd>
+ <dt>border</dt>
+ <dd>Die Position des Maskenbildes ist relativ zum Rand.</dd>
+ <dt>content</dt>
+ <dd>Das Maskenbild ist relativ zum Inhalt.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: css">.example {
+  border: 10px double;
+  padding: 10px;
+  -webkit-mask-image: url('mask.png');
+
+  /* Das Maskenbild ist innerhalb des Innenabstands. */
+  -webkit-mask-origin: content;
+}
+</pre>
+
+<pre class="brush: css">div {
+  -webkit-mask-image: url('mask1.png'), url('mask2.png');
+  -webkit-mask-origin: padding, content;
+}
+</pre>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>1.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>4.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>2.1</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<p>{{cssxref("-webkit-mask")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-attachment")}}, {{cssxref("-webkit-mask-image")}},{{cssxref("-webkit-mask-composite")}}, {{cssxref("-webkit-mask-repeat")}}, {{cssxref("-webkit-mask-clip")}}</p>
diff --git a/files/de/web/css/-webkit-mask-position-x/index.html b/files/de/web/css/-webkit-mask-position-x/index.html
new file mode 100644
index 0000000000..04586fef38
--- /dev/null
+++ b/files/de/web/css/-webkit-mask-position-x/index.html
@@ -0,0 +1,124 @@
+---
+title: '-webkit-mask-position-x'
+slug: Web/CSS/-webkit-mask-position-x
+translation_of: Web/CSS/-webkit-mask-position-x
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p> </p>
+
+<p>Die CSS-Eigenschaft <code>-webkit-mask-position-x</code> legt die anfängliche horizontale Position eines Maskenbilds (Bild mit einer Maske) fest.</p>
+
+<pre class="brush: css no-line-numbers">/* Keyword values */
+-webkit-mask-position-x: left;
+-webkit-mask-position-x: center;
+-webkit-mask-position-x: right;
+
+/* &lt;percentage&gt; values */
+-webkit-mask-position-x: 100%;
+-webkit-mask-position-x: -50%;
+
+/* &lt;length&gt; values */
+-webkit-mask-position-x: 50px;
+-webkit-mask-position-x: -1cm;
+
+/* Multiple values values */
+-webkit-mask-position-x: 50px, 25%, -3em;
+
+/* Global values */
+-webkit-mask-position-x: inherit;
+-webkit-mask-position-x: initial;
+-webkit-mask-position-x: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Eine Länge, die die Position der linken Kante des Bildes relativ zur linken Füllkante der Box angibt. Die Prozentsätze werden anhand der horizontalen Abmessung des Box-Padding-Bereichs berechnet. Das heißt, ein Wert von <code>0%</code> bedeutet, dass die linke Kante des Bildes mit der linken Füllkante der Box ausgerichtet ist und ein Wert von <code>100%</code> bedeutet, dass die rechte Kante des Bildes mit der rechten Füllkante der Box ausgerichtet ist.</dd>
+ <dt><code><strong>left</strong></code></dt>
+ <dd>Gleichwertig mit <code>0%</code>.</dd>
+ <dt><code><strong>center</strong></code></dt>
+ <dd>Gleichwertig mit <code>50%</code>.</dd>
+ <dt><code><strong>right</strong></code></dt>
+ <dd>Gleichwertig mit <code>100%</code>.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush:css">.exampleOne {
+  -webkit-mask-image: url(mask.png);
+  -webkit-mask-position-x: right;
+}
+
+.exampleTwo {
+  -webkit-mask-image: url(mask.png);
+  -webkit-mask-position-x: 25%;
+}
+</pre>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<p>Kein Teil einer Spezifikation.</p>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>4.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Sehenswert">Sehenswert</h2>
+
+<p>{{cssxref("-webkit-mask-position")}}, {{cssxref("-webkit-mask-position-y")}}, {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-attachment")}}</p>
diff --git a/files/de/web/css/-webkit-mask-position-y/index.html b/files/de/web/css/-webkit-mask-position-y/index.html
new file mode 100644
index 0000000000..d0c972990c
--- /dev/null
+++ b/files/de/web/css/-webkit-mask-position-y/index.html
@@ -0,0 +1,122 @@
+---
+title: '-webkit-mask-position-y'
+slug: Web/CSS/-webkit-mask-position-y
+translation_of: Web/CSS/-webkit-mask-position-y
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Die CSS-Eigenschaft <code>-webkit-mask-position-y</code> legt die anfängliche vertikale Position eines Maskenbilds (Bild mit einer Maske) fest.</p>
+
+<pre class="brush: css no-line-numbers">/* Keyword values */
+-webkit-mask-position-y: top;
+-webkit-mask-position-y: center;
+-webkit-mask-position-y: bottom;
+
+/* &lt;percentage&gt; values */
+-webkit-mask-position-y: 100%;
+-webkit-mask-position-y: -50%;
+
+/* &lt;length&gt; values */
+-webkit-mask-position-y: 50px;
+-webkit-mask-position-y: -1cm;
+
+/* Multiple values values */
+-webkit-mask-position-y: 50px, 25%, -3em;
+
+/* Global values */
+-webkit-mask-position-y: inherit;
+-webkit-mask-position-y: initial;
+-webkit-mask-position-y: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Eine Länge, die die Position der oberen Seite des Bildes relativ zur oberen Kante der Box angibt. Die Prozentsätze werden anhand der vertikalen Abmessung des Box-Padding-Bereichs berechnet. Ein Wert von <code>0%</code> bedeutet, dass der obere Rand des Bilds mit der oberen Füllkante der Box ausgerichtet ist und ein Wert von <code>100%</code> bedeutet, dass die untere Kante des Bildes mit der unteren Füllkante der Box ausgerichtet ist.</dd>
+ <dt><code><strong>top</strong></code></dt>
+ <dd>Gleichwertig zu <code>0%</code>.</dd>
+ <dt><code><strong>bottom</strong></code></dt>
+ <dd>Gleichwertig zu  <code>100%</code>.</dd>
+ <dt><code><strong>center</strong></code></dt>
+ <dd>Gleichwertig zu <code>50%</code>.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush:css">.exampleOne {
+  -webkit-mask-image: url(mask.png);
+  -webkit-mask-position-y: bottom;
+}
+
+.exampleTwo {
+  -webkit-mask-image: url(mask.png);
+  -webkit-mask-position-y: 25%;
+}
+</pre>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<p>Kein Teil einer Spezifikation.</p>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>4.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Sehenswert">Sehenswert</h2>
+
+<p>{{cssxref("-webkit-mask-position")}}, {{cssxref("-webkit-mask-position-x")}}, {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-attachment")}}</p>
diff --git a/files/de/web/css/-webkit-mask-repeat-x/index.html b/files/de/web/css/-webkit-mask-repeat-x/index.html
new file mode 100644
index 0000000000..15ab8b1f66
--- /dev/null
+++ b/files/de/web/css/-webkit-mask-repeat-x/index.html
@@ -0,0 +1,128 @@
+---
+title: '-webkit-mask-repeat-x'
+slug: Web/CSS/-webkit-mask-repeat-x
+translation_of: Web/CSS/-webkit-mask-repeat-x
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p> </p>
+
+<p>Die Eigenschaft <code>-webkit-mask-repeat-x</code> gibt an, ob und wie ein Maskenbild horizontal wiederholt wird.</p>
+
+<pre class="brush:css no-line-numbers">/* Keyword values */
+-webkit-mask-repeat-x: repeat;
+-webkit-mask-repeat-x: no-repeat;
+-webkit-mask-repeat-x: space;
+-webkit-mask-repeat-x: round;
+
+/* Multiple values */
+-webkit-mask-repeat-x: repeat, no-repeat, space;
+
+/* Global values */
+-webkit-mask-repeat-x: inherit;
+-webkit-mask-repeat-x: initial;
+-webkit-mask-repeat-x: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt>repeat</dt>
+ <dd>Das Maskenbild wird sowohl horizontal als auch vertikal wiederholt.</dd>
+ <dt>no-repeat</dt>
+ <dd>Das Maskenbild wird nicht wiederholt, nur eine Kopie des Maskenbildes wird gezeichnet. Der Rest des Inhalts des maskierten Elements wird nicht angezeigt.</dd>
+ <dt>space</dt>
+ <dd>Das Bild wird so oft wie möglich wiederholt, ohne zu beschneiden. Das erste und das letzte Bild sind an jeder Seite des Elements angeheftet und Leerräume sind gleichmäßig zwischen den Bildern verteilt. Die Eigenschaft {{cssxref ("mask-position")}} wird ignoriert, es sei denn, nur ein Bild kann ohne Übersteuerung angezeigt werden. Der einzige Fall, in dem Clipping mit Leerzeichen auftritt, ist, wenn nicht genügend Platz vorhanden ist, um ein Bild anzuzeigen.</dd>
+ <dt>round</dt>
+ <dd>Wenn der erlaubte Platz vergrößert wird, werden sich die wiederholten Bilder dehnen (ohne Lücken zu hinterlassen), bis Platz für einen weiteren Platz vorhanden ist. Wenn das nächste Bild hinzugefügt wird, werden alle aktuellen komprimiert, um Platz zu schaffen. Beispiel: Ein Bild mit einer ursprünglichen Breite von 260 Pixeln, das dreimal wiederholt wird, könnte sich dehnen, bis jede Wiederholung 300 Pixel breit ist, und dann wird ein weiteres Bild hinzugefügt. Sie werden dann auf 225px komprimieren.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: css">.exampleone {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat-x: repeat;
+}
+
+.exampletwo {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat-x: no-repeat;
+}
+</pre>
+
+<h3 id="Support_für_mehrere_Bildmasken">Support für mehrere Bildmasken</h3>
+
+<p>Sie können für jedes Maskenbild, getrennt durch Kommas, einen anderen <code>&lt;repeat-style&gt; </code>angeben:</p>
+
+<pre class="brush: css">.examplethree {
+  -webkit-mask-image: url('mask1.png'), url('mask2.png');
+  -webkit-mask-repeat-x: repeat, space;
+}
+</pre>
+
+<p>Jedes Bild wird mit dem entsprechenden Wiederholungsstil verglichen, vom ersten bis zum letzten.</p>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Während die Eigenschaft selbst erkannt wird, akzeptiert sie keine Werte.</p>
+
+<h2 id="Sehenswert">Sehenswert</h2>
+
+<p>{{cssxref("-webkit-mask-repeat")}}, {{cssxref("-webkit-mask-repeat-y")}}</p>
diff --git a/files/de/web/css/-webkit-mask-repeat-y/index.html b/files/de/web/css/-webkit-mask-repeat-y/index.html
new file mode 100644
index 0000000000..e969fc9482
--- /dev/null
+++ b/files/de/web/css/-webkit-mask-repeat-y/index.html
@@ -0,0 +1,126 @@
+---
+title: '-webkit-mask-repeat-y'
+slug: Web/CSS/-webkit-mask-repeat-y
+translation_of: Web/CSS/-webkit-mask-repeat-y
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Die Eigenschaft <code>-webkit-mask-repeat-y</code> gibt an, ob und wie ein Maskenbild vertikal wiederholt wird.</p>
+
+<pre class="brush:css no-line-numbers">/* Keyword values */
+-webkit-mask-repeat-y: repeat;
+-webkit-mask-repeat-y: no-repeat;
+-webkit-mask-repeat-y: space;
+-webkit-mask-repeat-y: round;
+
+/* Multiple values */
+-webkit-mask-repeat-y: repeat, no-repeat, space;
+
+/* Global values */
+-webkit-mask-repeat-y: inherit;
+-webkit-mask-repeat-y: initial;
+-webkit-mask-repeat-y: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Syntax">Syntax</h3>
+
+<h2 id="Werte">Werte</h2>
+
+<dl>
+ <dt>repeat</dt>
+ <dd>Das Maskenbild wird vertikal wiederholt.</dd>
+ <dt>no-repeat</dt>
+ <dd>Das Maskenbild wird nicht vertikal wiederholt, nur eine Kopie des Maskenbildes wird in vertikaler Richtung gezeichnet. Der vertikale Rest des Inhalts des maskierten Elements wird nicht angezeigt.</dd>
+ <dt>space</dt>
+ <dd>Das Bild wird so oft wie möglich wiederholt, ohne zu beschneiden. Das erste und das letzte Bild werden am oberen und unteren Rand des Elements fixiert, und Leerräume werden gleichmäßig zwischen den Bildern verteilt. Die Eigenschaft {{cssxref ("mask-position")}} wird ignoriert, es sei denn, nur ein Bild kann ohne Übersteuerung angezeigt werden. Der einzige Fall, in dem Clipping mit Leerzeichen auftritt, ist, wenn nicht genügend Platz vorhanden ist, um ein Bild anzuzeigen.</dd>
+ <dt>round</dt>
+ <dd>Wenn der erlaubte vertikale Raum größer wird, dehnen sich die wiederholten Bilder (ohne Lücken), bis Platz für einen weiteren Platz ist. Wenn das nächste Bild hinzugefügt wird, werden alle aktuellen komprimiert, um Platz zu schaffen. Beispiel: Ein Bild mit einer ursprünglichen Höhe von 260 Pixeln, das dreimal wiederholt wird, kann sich dehnen, bis jede Wiederholung 300 Pixel hoch ist, und dann wird ein weiteres Bild hinzugefügt. Sie werden dann auf eine Höhe von 225px komprimieren.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: css">.exampleone {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat-y: repeat;
+}
+
+.exampletwo {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat-y: no-repeat;
+}
+</pre>
+
+<h3 id="Support_für_mehrere_Bildmasken">Support für mehrere Bildmasken</h3>
+
+<p>Sie können für jedes Maskenbild, getrennt durch Kommas, einen anderen <code>&lt;repeat-style&gt;</code> angeben:</p>
+
+<pre class="brush: css">.examplethree {
+  -webkit-mask-image: url('mask1.png'), url('mask2.png');
+  -webkit-mask-repeat-y: repeat, space;
+}
+</pre>
+
+<p>Jedes Bild wird mit dem entsprechenden Wiederholungsstil verglichen, vom ersten bis zum letzten.</p>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Während die Eigenschaft selbst erkannt wird, akzeptiert sie keine Werte.</p>
+
+<h2 id="Sehenswert">Sehenswert</h2>
+
+<p>{{cssxref("-webkit-mask-repeat")}}, {{cssxref("-webkit-mask-repeat-x")}}</p>
diff --git a/files/de/web/css/-webkit-mask-repeat/index.html b/files/de/web/css/-webkit-mask-repeat/index.html
new file mode 100644
index 0000000000..cef03cef91
--- /dev/null
+++ b/files/de/web/css/-webkit-mask-repeat/index.html
@@ -0,0 +1,127 @@
+---
+title: '-webkit-mask-repeat'
+slug: Web/CSS/-webkit-mask-repeat
+tags:
+  - CSS
+translation_of: Web/CSS/mask-repeat
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>-webkit-mask-repeat</code> Eigenschaft gibt an, ob und wie ein Maskenbild wiederholt (gekachelt) wird.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css">/* Einzelne Schlüsselwortwerte */
+-webkit-mask-repeat: repeat;
+-webkit-mask-repeat: repeat-x;
+-webkit-mask-repeat: repeat-y;
+-webkit-mask-repeat: no-repeat;
+
+/* Mehrer Schlüsselwortwerte */
+-webkit-mask-repeat: repeat, repeat-x, no-repeat;
+
+/* Globale Werte */
+-webkit-mask-repeat: inherit;
+-webkit-mask-repeat: initial;
+-webkit-mask-repeat: unset;
+</pre>
+
+<h2 id="Werte">Werte</h2>
+
+<dl>
+ <dt>repeat</dt>
+ <dd>Das Maskenbild wird horizontal und vertikal wiederholt.</dd>
+ <dt>repeat-x</dt>
+ <dd>Das Maskenbild wird nur horizontal wiederholt.</dd>
+ <dt>repeat-y</dt>
+ <dd>Das Maskenbild wird nur vertikal wiederholt.</dd>
+ <dt>no-repeat</dt>
+ <dd>Das Maskenbild wird nicht wiederholt; nur eine Kopie des Maskenbildes wird gezeichnet. Der Rest des Inhalts des maskierten Elements wird nicht dargestellt.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: css">.exampleone {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat: repeat-x;
+}
+
+.exampletwo {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat: no-repeat;
+}
+</pre>
+
+<h3 id="Unterstützung_mehrerer_Maskenbilder">Unterstützung mehrerer Maskenbilder</h3>
+
+<p>Für jedes Maskenbild kann ein unterschiedlicher <code>&lt;repeat-style&gt;</code> Wert angegeben werden, der durch Kommas getrennt wird:</p>
+
+<pre class="brush: css">.examplethree {
+  -webkit-mask-image: url('mask1.png'), url('mask2.png');
+  -webkit-mask-repeat: repeat-x, repeat-y;
+}
+</pre>
+
+<p>Jedes Bild wird dem zugehörigen Wiederholungsstil zugeordnet, vom zuerst bis zum zuletzt angegebenen.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>1.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>4.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>2.1</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<p>{{cssxref("-webkit-mask")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-clip")}}, {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-attachment")}}, {{cssxref("-webkit-mask-image")}}, {{cssxref("-webkit-mask-composite")}}</p>
diff --git a/files/de/web/css/-webkit-overflow-scrolling/index.html b/files/de/web/css/-webkit-overflow-scrolling/index.html
new file mode 100644
index 0000000000..e563f1bc33
--- /dev/null
+++ b/files/de/web/css/-webkit-overflow-scrolling/index.html
@@ -0,0 +1,95 @@
+---
+title: '-webkit-overflow-scrolling'
+slug: Web/CSS/-webkit-overflow-scrolling
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Referenz
+  - NeedsBrowserCompatibility
+  - NeedsLiveSample
+  - NeedsMobileBrowserCompatibility
+  - Non-standard
+translation_of: Web/CSS/-webkit-overflow-scrolling
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>-webkit-overflow-scrolling</code> CSS Eigenschaft bestimmt, ob Touchgeräte impulsbasiertes Scrolling für ein Element verwenden oder nicht.</p>
+
+<h2 id="Werte">Werte</h2>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>"Reguläres" Scrolling wird verwendet, wobei der Inhalt sofort aufhört zu scrollen, wenn der Finger vom Touchscreen entfernt wird.</dd>
+ <dt><code>touch</code></dt>
+ <dd>Impulsbasiertes Scrolling wird verwendet, wobei der Inhalt für einen Moment weiterscrollt nachdem die Scrollgeste beendet und der Finger vom Touchscreen entfernt wurde. Die Geschwindigkeit und Dauer des Weiterscrollens ist proportional zur Stärke der Scrollgeste. Erzeugt auch einen neuen Stackingkontext.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: css">-webkit-overflow-scrolling: touch; /* lets it scroll lazy */
+
+-webkit-overflow-scrolling: auto; /* stop scrolling immediately */
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Nicht Teil einer Spezifikation.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>5.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="http://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/">CSS-Tricks Artikel mit Demo</a></li>
+ <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-overflow-scrolling"><code>-webkit-overflow-scrolling</code> Eintrag in Safari CSS-Referenz</a></li>
+</ul>
diff --git a/files/de/web/css/-webkit-print-color-adjust/index.html b/files/de/web/css/-webkit-print-color-adjust/index.html
new file mode 100644
index 0000000000..37712aa627
--- /dev/null
+++ b/files/de/web/css/-webkit-print-color-adjust/index.html
@@ -0,0 +1,97 @@
+---
+title: '-webkit-print-color-adjust'
+slug: Web/CSS/-webkit-print-color-adjust
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - Layout
+  - NeedsExample
+  - Non-standard
+  - Web
+translation_of: Web/CSS/-webkit-print-color-adjust
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Die <code>-webkit-print-color-adjust</code> Eigenschaft ist eine nicht standardisierte CSS Erweiterung, die dazu verwendet werden kann, um das Drucken von Hintergrundfarben und -bildern in Browsern zu erzwingen, die auf der WebKit Engine basieren.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">-webkit-print-color-adjust: economy | exact
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>economy</code></dt>
+ <dd>Normales Verhalten. Hintergrundfarben und -bilder werden nur gedruckt, falls der Benutzer dies explizit in den Druckeinstellungen seines Browsers erlaubt.</dd>
+ <dt><code>exact</code></dt>
+ <dd>Hintergrundfarben und -bilder des Elements, auf den die Regel zutrifft, werden immer gedruckt. Die Druckeinstellungen des Benutzers werden überschrieben.</dd>
+</dl>
+
+<h2 id="Vererbung">Vererbung</h2>
+
+<p>Diese Eigenschaft wird <a href="/de/docs/Web/Guide/CSS/Getting_started/Kaskadierung_und_vererbung">vererbt</a>.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6.0<sup>[2]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Chrome druckt keine Hintergründe des {{HTMLElement("body")}} Elements. Falls diese Eigenschaft für das <code>&lt;body&gt;</code> Element auf <code>exact</code> gesetzt ist, wird sie nur auf dessen Unterknoten angewendet.</p>
+
+<p>Wenn Hintergrundbilder zugeschnitten sind (zum Beispiel wenn Sprites als Hintergrundbilder verwendet werden), werden sie wegen<a href="http://code.google.com/p/chromium/issues/detail?id=131054"> Chromium Bug 131054</a> verzerrt dargestellt, wenn sie im Chrome Browser mit <code>-webkit-print-color-adjust: exact</code> gedruckt werden. Einfarbige Hintergründe und Hintergrundbilder, die nicht zugeschnitten sind (d. h. sie haben eine kleinere Breite und Höhe als das Element, auf das sie angewendet werden), werden korrekt gedruckt.</p>
+
+<p>[2] Safari druckt keine Hintergründe des {{HTMLElement("body")}} Elements. Falls diese Eigenschaft für das <code>&lt;body&gt;</code> Element auf <code>exact</code> gesetzt ist, wird sie nur auf dessen Unterknoten angewendet.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>WebKit <a href="https://bugs.webkit.org/show_bug.cgi?id=64583">Bug 64583</a>: "WIP: Add CSS property to control printing of backgrounds for individual elements"</li>
+ <li>CSSWG Wiki: "<a href="http://wiki.csswg.org/ideas/print-backgrounds">print-backgrounds</a>" - Ein Vorschlag diese Eigenschaft zu standardisieren</li>
+ <li>CSS Color Module Level 4:  die <code><a href="https://drafts.csswg.org/css-color-4/#color-adjust">color-adjust</a></code> Eigenschaft - ein neuerer Vorschlag, diese Eigenschaft zu standardisieren</li>
+</ul>
diff --git a/files/de/web/css/-webkit-tap-highlight-color/index.html b/files/de/web/css/-webkit-tap-highlight-color/index.html
new file mode 100644
index 0000000000..f74eca6d7e
--- /dev/null
+++ b/files/de/web/css/-webkit-tap-highlight-color/index.html
@@ -0,0 +1,33 @@
+---
+title: '-webkit-tap-highlight-color'
+slug: Web/CSS/-webkit-tap-highlight-color
+translation_of: Web/CSS/-webkit-tap-highlight-color
+---
+<div>{{ CSSRef() }}</div>
+
+<p>{{ Non-standard_header() }}</p>
+
+<p><strong><code>-webkit-tap-highlight-color</code></strong> ist eine nicht standardmäßige CSS-Eigenschaft, mit der die Farbe der Hervorhebung festgelegt wird, die während des Tippens über einen Link angezeigt wird. Die Markierung zeigt dem Benutzer an, dass sein Antippen erfolgreich erkannt wird, und zeigt an, auf welches Element er tippt.</p>
+
+<pre class="brush: css no-line-numbers">-webkit-tap-highlight-color: red;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<h3 id="Values">Values</h3>
+
+<p>A {{Cssxref("color value")}}.</p>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Kein Teil einer Spezifikation. Apple hat <a href="https://developer.apple.com/library/mac/documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html#//apple_ref/doc/uid/TP40006510-SW5">eine Beschreibung im Safari Web Content Guide</a>.</p>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<p>Diese Eigenschaft wird von WebKit / Safari, Blink / Chrome und <a href="https://msdn.microsoft.com/en-us//library/dn806275(v=vs.85).aspx">einigen Versionen von Internet Explorer und Microsoft Edge</a> unterstützt.</p>
diff --git a/files/de/web/css/-webkit-text-fill-color/index.html b/files/de/web/css/-webkit-text-fill-color/index.html
new file mode 100644
index 0000000000..e3a7cc06e6
--- /dev/null
+++ b/files/de/web/css/-webkit-text-fill-color/index.html
@@ -0,0 +1,83 @@
+---
+title: '-webkit-text-fill-color'
+slug: Web/CSS/-webkit-text-fill-color
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - NeedsBrowserCompatibility
+  - NeedsExample
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+translation_of: Web/CSS/-webkit-text-fill-color
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <strong><code>-webkit-text-fill-color</code></strong> CSS Eigenschaft bestimmt die Füll<a href="/de/docs/Web/CSS/color_value">farbe</a> von Textzeichen. Falls diese Eigenschaft nicht gesetzt ist, wird der Wert der {{cssxref("color")}} Eigenschaft verwendet.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Nicht Teil irgendeiner Spezifikation.</p>
+
+<p>Apple hat <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-fill-color">eine Beschreibung in der Safari CSS Referenz</a>.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="https://www.webkit.org/blog/85/introducing-text-stroke/">Surfin' Safari Blog Post, der dieses Feature ankündigt</a></li>
+ <li><a href="https://css-tricks.com/adding-stroke-to-web-text/">CSS-Tricks Artikel, der dieses Feature erklärt</a></li>
+ <li>{{cssxref("-webkit-text-stroke-color")}}</li>
+ <li>{{cssxref("-webkit-text-stroke-width")}}</li>
+ <li>{{cssxref("-webkit-text-stroke")}}</li>
+</ul>
diff --git a/files/de/web/css/-webkit-text-stroke-color/index.html b/files/de/web/css/-webkit-text-stroke-color/index.html
new file mode 100644
index 0000000000..1a220a1710
--- /dev/null
+++ b/files/de/web/css/-webkit-text-stroke-color/index.html
@@ -0,0 +1,108 @@
+---
+title: '-webkit-text-stroke-color'
+slug: Web/CSS/-webkit-text-stroke-color
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Referenz
+  - NeedsBrowserCompatibility
+  - NeedsExample
+  - NeedsMobileBrowserCompatibility
+  - Non-standard
+translation_of: Web/CSS/-webkit-text-stroke-color
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <strong><code>-webkit-text-stroke-color</code></strong> CSS Eigenschaft definiert die Umrandungs<a href="/de/docs/Web/CSS/color_value">farbe</a> von Textzeichen. Falls diese Eigenschaft nicht gesetzt ist, wird der Wert der {{cssxref("color")}} Eigenschaft verwendet.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* &lt;color&gt; Werte */
+-webkit-text-stroke-color: red;
+-webkit-text-stroke-color: #e08ab4;
+-webkit-text-stroke-color: rgb(200, 100, 0);
+
+/* Globale Werte */
+-webkit-text-stroke-color: inherit;
+-webkit-text-stroke-color: initial;
+-webkit-text-stroke-color: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>Die Farbe der Umrandung.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Nicht Teil einer Spezifikation.</p>
+
+<p>Apple hat eine <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-stroke-color">Beschreibung von <code>-webkit-text-stroke-color</code> in der Safari CSS Referenz</a>.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="https://www.webkit.org/blog/85/introducing-text-stroke/">Surfin' Safari Blogeintrag, der dieses Feature ankündigt</a></li>
+ <li><a href="https://css-tricks.com/adding-stroke-to-web-text/">CSS-Tricks Artikel, der dieses Feature erklärt</a></li>
+ <li>{{cssxref("-webkit-text-fill-color")}}</li>
+ <li>{{cssxref("-webkit-text-stroke-width")}}</li>
+ <li>{{cssxref("-webkit-text-stroke")}}</li>
+</ul>
diff --git a/files/de/web/css/-webkit-text-stroke-width/index.html b/files/de/web/css/-webkit-text-stroke-width/index.html
new file mode 100644
index 0000000000..e06b5b1337
--- /dev/null
+++ b/files/de/web/css/-webkit-text-stroke-width/index.html
@@ -0,0 +1,85 @@
+---
+title: '-webkit-text-stroke-width'
+slug: Web/CSS/-webkit-text-stroke-width
+tags:
+  - CSS
+  - Experimentell
+  - NeedsBrowserCompatibility
+  - NeedsContent
+  - NeedsExample
+  - Non-standard
+translation_of: Web/CSS/-webkit-text-stroke-width
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <strong><code>-webkit-text-stroke-width</code></strong> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft definiert die Strichbreite des Texts.</p>
+
+<p>Der Standardwert dieser Eigenschaft ist null.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Nicht Teil einer Spezifikation.</p>
+
+<p>Apple hat eine <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-stroke-width">Beschreibung in der Safari CSS Referenz</a>.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="https://www.webkit.org/blog/85/introducing-text-stroke/">Surfin' Safari Blogeintrag, der dieses Feature ankündigt</a></li>
+ <li><a href="https://css-tricks.com/adding-stroke-to-web-text/">CSS-Tricks Artikel, der dieses Feature beschreibt</a></li>
+ <li>{{cssxref("-webkit-text-stroke-color")}}</li>
+ <li>{{cssxref("-webkit-text-stroke")}}</li>
+ <li>{{cssxref("-webkit-text-fill-color")}}</li>
+</ul>
diff --git a/files/de/web/css/-webkit-text-stroke/index.html b/files/de/web/css/-webkit-text-stroke/index.html
new file mode 100644
index 0000000000..056b62d357
--- /dev/null
+++ b/files/de/web/css/-webkit-text-stroke/index.html
@@ -0,0 +1,126 @@
+---
+title: '-webkit-text-stroke'
+slug: Web/CSS/-webkit-text-stroke
+tags:
+  - CSS
+  - Eigenschaft
+  - Non-standard
+  - Referenz
+translation_of: Web/CSS/-webkit-text-stroke
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <strong><code>-webkit-text-stroke</code></strong> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft gibt die <a href="/de/docs/Web/CSS/length">Breite</a> und <a href="/de/docs/Web/CSS/color_value">Farbe</a> der Umrandung von Textzeichen an. Sie ist eine Kurzschreibweise für die Langschreibungseigenschaften {{cssxref("-webkit-text-stroke-width")}} und {{cssxref("-webkit-text-stroke-color")}}.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css notranslate">/* Breiten- und Farbwerte */
+-webkit-text-stroke: 4px navy;
+
+/* Globale Werte */
+-webkit-text-stroke: inherit;
+-webkit-text-stroke: initial;
+-webkit-text-stroke: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Die Breite der Umrandung.</dd>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>Die Farbe der Umrandung.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p id="example"&gt;Die Umrandung dieses Texts ist rot.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">#example {
+  font-size: 50px;
+  margin: 0;
+  -webkit-text-stroke: 2px red;
+}</pre>
+
+<p>{{EmbedLiveSample("Beispiel", 650, 60)}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Nicht Teil einer Spezifikation.</p>
+
+<p>Apple hat eine <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_text_stroke">Beschreibung in der Safari CSS Referenz</a>.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>4</td>
+   <td>{{CompatGeckoDesktop("48.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>15</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>4</td>
+   <td>{{CompatGeckoMobile("48.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>36</td>
+   <td>4.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Ab Gecko 48 hinter der Einstellung <code>layout.css.prefixes.webkit</code> implementiert, dort noch standarmäßig <code>false</code>;<br>
+ ab Gecko 49 {{geckoRelease("49.0")}} standardmäßig <code>true</code>.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="https://www.webkit.org/blog/85/introducing-text-stroke/">Surfin' Safari Blogeintrag, der dieses Feature ankündigt</a></li>
+ <li><a href="https://css-tricks.com/adding-stroke-to-web-text/">CSS-Tricks Artikel, der dieses Feature erklärt</a></li>
+ <li>{{cssxref("-webkit-text-stroke-width")}}</li>
+ <li>{{cssxref("-webkit-text-stroke-color")}}</li>
+ <li>{{cssxref("-webkit-text-fill-color")}}</li>
+</ul>
diff --git a/files/de/web/css/-webkit-touch-callout/index.html b/files/de/web/css/-webkit-touch-callout/index.html
new file mode 100644
index 0000000000..af79615358
--- /dev/null
+++ b/files/de/web/css/-webkit-touch-callout/index.html
@@ -0,0 +1,108 @@
+---
+title: '-webkit-touch-callout'
+slug: Web/CSS/-webkit-touch-callout
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - Layout
+  - NeedsBrowserCompatibility
+  - NeedsLiveSample
+  - Referenz
+translation_of: Web/CSS/-webkit-touch-callout
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>-webkit-touch-callout</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft steuert die Anzeige der Standard-Textbox, die angezeigt wird, wenn das Touchziel berührt und gehalten wird.</p>
+
+<p>Wenn das Ziel in iPhone OS berührt und gehalten wird, zeigt Safari eine Textbox-Information über den Link an. Diese Eigenschaft erlaubt es, dieses Verhalten zu deaktivieren.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Schlüsselwortwerte */
+-webkit-touch-callout: default;
+-webkit-touch-callout: none;
+
+/* Globale Werte */
+-webkit-touch-callout: initial;
+-webkit-touch-callout: inherit;
+-webkit-touch-callout: unset;</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>default</code></dt>
+ <dd>Die Standard-Textbox wird angezeigt.</dd>
+ <dt><code>none</code></dt>
+ <dd>Die Textbox ist deaktiviert.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: css">.example {
+  -webkit-touch-callout: none;
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Nicht Teil einer Spezifikation.</p>
+
+<p>Apple hat eine <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_touch_callout">Beschreibung in der Safari CSS Referenz</a>.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Die <code>-webkit-touch-callout</code> Eigenschaft wurde <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_touch_callout">in iOS 2.0 implementiert</a> und später zu WebKit hinzugefügt ({{webkitbug(121507)}}).</p>
diff --git a/files/de/web/css/@charset/index.html b/files/de/web/css/@charset/index.html
new file mode 100644
index 0000000000..289dc8117b
--- /dev/null
+++ b/files/de/web/css/@charset/index.html
@@ -0,0 +1,79 @@
+---
+title: '@charset'
+slug: Web/CSS/@charset
+tags:
+  - CSS
+  - CSS At-Regel
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/@charset
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>@charset</code> <a href="/de/docs/Web/CSS" title="CSS">CSS</a> <a href="/de/docs/Web/CSS/At-Regel" title="At-rule">At-Regel</a> gibt die Zeichenkodierung an, die in dem Stylesheet verwendet wird. Sie muss das erste Element im Stylesheet sein und ihr darf kein Zeichen vorangestellt werden; da sie kein <a href="/de/docs/Web/CSS/Syntax#verschachtelte_Ausdrücke" title="en/CSS/Syntax#nested_statements">verschachtelter Ausdruck</a> ist, kann sie nicht innerhalb <a href="/de/docs/Web/CSS/At-Regel#bedingte_Gruppen_Regel" title="en/CSS/At-rule#Conditional_Group_Rules">bedingten Gruppen At-Regeln</a> verwendet werden. Falls mehrere <code>@charset</code> At-Regeln definiert sind, wird nur die erste verwendet. Und sie kann auch nicht innerhalb eines <code>style</code> Attributs eines HTML Elements oder innerhalb des {{ HTMLElement("style") }} Elements verwendet werden, in dem die Zeichenkodierung der HTML Seite ausschlaggebend ist.</p>
+
+<p>Diese At-Regel ist nützlich, wenn nicht-ASCII Zeichen in manchen CSS Eigenschaften wie {{ cssxref("content") }} verwendet werden.</p>
+
+<p>Da es mehrere Möglichkeiten gibt, die Zeichenkodierung eines Stylesheets anzugeben, versucht der Browser die folgenden Methoden in der angegebenen Reihenfolge (und stoppt, sobald eine ein Ergebnis zurückliefert):</p>
+
+<ol>
+ <li>Der Wert des <a href="http://de.wikipedia.org/wiki/Byte_Order_Mark" title="http://en.wikipedia.org/wiki/Byte_order_mark">Unicode Bytereihenfolge</a> Zeichens, das am Anfang der Datei gesetzt ist.</li>
+ <li>Der Wert, der durch das <code>charset</code> Attribut des <code>Content-Type:</code> HTTP-Headers angegeben wurde oder das Äquivalent hierzu im Protokoll, das verwendet wird, um das Stylesheet zu übertragen.</li>
+ <li>Die <code>@charset</code> CSS At-Regel.</li>
+ <li>Benutze die Zeichenkodierung, die durch das referenzierte Dokument angegeben wird: Das <code>charset</code> Attribut des {{ HTMLElement("link") }} Elements. Diese Methode ist veraltet in HTML5 und darf nicht verwendet werden.</li>
+ <li>Nimm an, dass das Dokument UTF-8 kodiert ist.</li>
+</ol>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">@charset "UTF-8";
+@charset 'iso-8859-15';
+</pre>
+
+<dl>
+ <dt style="margin: 0 40px;"><em>charset</em></dt>
+ <dd style="margin: 0 40px;">Ist ein {{cssxref("&lt;string&gt;")}}, der die zu verwendende Zeichenkodierung angibt. Dies muss der Name einer websicheren Zeichenkodierung sein, wie sie in der <a href="http://www.iana.org/assignments/character-sets">IANA Registrierung</a> definiert wird. Falls mehrere Namen mit einer Kodierung assoziiert werden, wird nur der verwendet, der mit <em>preferred</em> gekennzeichnet ist.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Gültige Bespiele:</p>
+
+<pre class="brush: css">@charset "UTF-8";       /* Setzt die Kodierung des Stylesheets auf Unicode UTF-8 */
+@charset 'iso-8859-15'; /* Setzt die Kodierung des Stylesheets auf Latin-9 (Westeuropäische Sprachen, mit Eurozeichen) */
+</pre>
+
+<p>Ungültige Beispiele:</p>
+
+<pre class="brush: css"> @charset "UTF-8";      /* Ungültig, da ein Zeichen (Leerzeichen) vor der At-Regel steht */
+@charset UTF-8;         /* Ungültig, da kein ' oder " angegeben wurde, die Zeichenkodierung ist kein CSS {{cssxref("&lt;string&gt;")}} */</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'syndata.html#x57', '@charset')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompatibilität</h2>
+
+{{Compat("css.at-rules.charset")}}
diff --git a/files/de/web/css/@document/index.html b/files/de/web/css/@document/index.html
new file mode 100644
index 0000000000..f9d47540fb
--- /dev/null
+++ b/files/de/web/css/@document/index.html
@@ -0,0 +1,71 @@
+---
+title: '@document'
+slug: Web/CSS/@document
+tags:
+  - At-Regel
+  - CSS
+  - Referenz
+translation_of: Web/CSS/@document
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <strong><code>@document</code></strong> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/At-Regel">at-rule</a> beschränkt die Stilregeln, die sie beinhaltet, basierend auf dem URL des Dokuments. Sie wurde hauptsächlich für Benutzerstylesheets entworfen. Eine <code>@document</code> Regel kann eine oder mehrere Matchingfunktionen definieren. Falls eine der Funktionen auf einen URL passt, wird die Regel auf diesen URL angewandt.</p>
+
+<p>Der Hauptanwendungsfall ist für benutzerdefinierte Stylesheets, jedoch kann diese Regel auch für autordefinierte Stylesheets verwendet werden.</p>
+
+<p>Die verfügbaren Funktionen sind:</p>
+
+<ul>
+ <li><code>url()</code>, welche einen exakten URL matcht.</li>
+ <li><code>url-prefix()</code>, welche matcht, falls der Dokument-URL mit dem angegebenen Wert beginnt.</li>
+ <li><code>domain()</code>, welche matcht, falls der Dokument-URL zur angegebenen Domain (oder einer Subdomain davon) gehört.</li>
+ <li><code>regexp()</code>, welche matcht, falls der Dokument-URL auf den angegebenen <a href="/de/docs/Web/JavaScript/Guide/Regular_Expressions">regulären Ausdruck</a> passt. Der Ausdruck muss den gesamten URL matchen.</li>
+</ul>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>Die angegebenen Werte für die <code>url()</code>, <code>url-prefix()</code> und <code>domain()</code> Funktionen können optional durch einfache oder doppelte Anführungszeichen umschlossen werden. Die angegebenen WErte für die <code>regexp()</code> Funktion <strong>müssen</strong> durch Anführungenzeichen umschlossen sein.</p>
+
+<p>Für die <code>regexp()</code> Funktion escapte Werte müssen zusätzlich vom CSS escapt werden. Zum Beispiel matcht ein <code>.</code> (Punkt) ein beliebiges Zeichen in regulären Ausdrücken. Um einen Punkt zu matchen, muss er zunächst anhand der Regeln für reguläre Ausdrücke escapt werden (also <code>\.</code>) und anschließend durch die CSS Regeln (also <code>\\.</code>).</p>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: css">@document url(http://www.w3.org/),
+               url-prefix(http://www.w3.org/Style/),
+               domain(mozilla.org),
+               regexp("https:.*")
+{
+  /* CSS Regeln hier werden angewandt auf:
+     - Die Seite "http://www.w3.org/".
+     - Jede Seite, deren URL mit "http://www.w3.org/Style/" beginnt
+     - Jede Seite, deren URLs Host "mozilla.org" ist oder mit ".mozilla.org" endet
+     - Jede Seite, deren URL mit "https:" beginnt */
+
+  /* macht die oben erwähnten Seiten wirklich hässlich */
+  body {
+    color: purple;
+    background: yellow;
+  }
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p><a href="http://www.w3.org/TR/2012/WD-css3-conditional-20120911/#at-document">Ursprünglich</a> in {{SpecName('CSS3 Conditional', '', '')}}, wurde <code>@document</code> nach Level 4 <a href="http://www.w3.org/TR/2012/WD-css3-conditional-20121213/#changes">verschoben</a>.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.at-rules.document")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a class="external" href="http://lists.w3.org/Archives/Public/www-style/2004Aug/0135">Per-site user style sheet rules</a> on the www-style mailing list.</li>
+ <li>The file <code><a class="external" href="http://www.mozilla.org/support/firefox/edit#content">userContent.css</a></code> is a user stylesheet on Gecko-based browsers.</li>
+</ul>
diff --git a/files/de/web/css/@import/index.html b/files/de/web/css/@import/index.html
new file mode 100644
index 0000000000..acff38aebc
--- /dev/null
+++ b/files/de/web/css/@import/index.html
@@ -0,0 +1,79 @@
+---
+title: '@import'
+slug: Web/CSS/@import
+tags:
+  - '@-Regel'
+  - CSS
+  - Referenz
+translation_of: Web/CSS/@import
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <strong><code>@import</code></strong> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/At-rule">@-Regel</a> wird verwendet, um Stilregeln anderer Stylesheets zu importieren. Diese Regeln müssen allen anderen Typen von Regeln vorangehen außer {{cssxref("@charset")}} Regeln; da sie kein <a href="/de/docs/Web/CSS/Syntax#verschachtelte_Statements">verschachteltes Statement</a> ist, kann <code>@import</code> nicht innerhalb <a href="/de/docs/Web/CSS/At-rule#Bedingte_Gruppenregeln">bedingter Gruppen-@-Regeln</a> verwendet werden.</p>
+
+<p>Damit User Agents verhindern können, Ressourcen für nicht unterstützte Medientypen zu holen, können Autoren medienabhängige <code>@import</code> Regeln definieren. Diese bedingten Importe definieren kommaseparierte <a href="/de/docs/Web/CSS/Media_Queries/Media_Queries_verwenden">Media Queries</a> nach dem URI. Falls keine Media Query angegeben wurde, ist der Import unbedingt. Die Angabe von <code>all</code> für das Medium hat denselben Effekt.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="eval">@import <em>url</em>;
+@import <em>url</em> <em>list-of-media-queries</em>;
+</pre>
+
+<p>wobei:</p>
+
+<dl>
+ <dt style="margin: 0 40px;"><em>url</em></dt>
+ <dd style="margin: 0 40px;">Ist ein {{cssxref("&lt;string&gt;")}} oder ein {{cssxref("&lt;uri&gt;")}}, der die Adresse der zu importierenden Ressource repräsentiert. Der URL kann absolut oder relativ sein. Beachte, dass der URL nicht unbedingt eine Datei referenzieren muss; er kann auch nur den Packagenamen und -teil angeben und die passende Datei wird automatisch ausgewählt (z. B. <strong>chrome://communicator/skin/</strong>). <a href="/de/docs/XUL_Tutorial/Die_Chrome_URL">Siehe hier</a> für mehr Informationen.</dd>
+ <dt style="margin: 0 40px;"><em>list-of-media-queries</em></dt>
+ <dd style="margin: 0 40px;">Ist eine kommaseparierte Liste von <a href="/de/docs/Web/CSS/Media_Queries/Media_Queries_verwenden">Media Queries</a>, die die Anwendung der in dem verlinkten URL definierten CSS Regeln bedingt. Falls der Browser keine dieser Media Queries unterstützt, lädt er die verlinkte Ressource nicht.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush:css">@import url("fineprint.css") print;
+@import url("bluish.css") projection, tv;
+@import 'custom.css';
+@import url("chrome://communicator/skin/");
+@import "common.css" screen, projection;
+@import url('landscape.css') screen and (orientation:landscape);
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#media0', '@import')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Erweitert die Syntax zur Unterstützung beliebiger Media Queries und nicht nur einfache <a href="/de/docs/Web/CSS/@media#Medientypen">Medientypen</a>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'cascade.html#at-import', '@import')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Fügt Unterstützung für {{cssxref("&lt;string&gt;")}} hinzu, um den URL eines Stylesheets anzugeben,<br>
+    und Voraussetzung dafür, die <code>@import</code> Regel am Anfang des CSS Dokuments anzugeben.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#the-cascade', '@import')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.at-rules.import")}}
diff --git a/files/de/web/css/@keyframes/index.html b/files/de/web/css/@keyframes/index.html
new file mode 100644
index 0000000000..31acaf56b5
--- /dev/null
+++ b/files/de/web/css/@keyframes/index.html
@@ -0,0 +1,114 @@
+---
+title: '@keyframes'
+slug: Web/CSS/@keyframes
+translation_of: Web/CSS/@keyframes
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+
+<p>Durch die CSS-at-Regel <code>@keyframes</code> kann der Autor die einzelnen Schritte einer CSS-Animationssequenz festlegen, indem er Keyframes (oder Wegpunkte) setzt, die während der Sequenz an bestimmten Punkten erreicht werden. Das ermöglicht eine spezifischere Kontrolle über die Zwischenschritte einer Animationssequenz gegenüber dem Ergebnis einem dem Browser überlassenen, automatisch berechneten Ablauf.</p>
+
+<p>Die at-Regel <code>@keyframes</code> kann mit dem CSS-Objekt {{domxref("CSSKeyframesRule")}} erlangt werden.</p>
+
+<p>Um Keyframes zu benutzen, erstellt man eine <code>@keyframes</code>-Regel mit einem Namen, der dann durch die {{ cssxref("animation-name") }}-Eigenschaft genutzt wird, um einer Animation einen Keyframe zuzuweisen. Jede <code>@keyframes</code>-Regel beinhaltet eine Style-Liste aus Keyframe-Selektoren, von denen jeder eine Prozentzahl enthält, die angibt, zu welchem relativen Zeitpunkt während der Animation der Keyframe auftritt, sowie einen Block mit den jeweiligen Style-Informationen für diesen Keyframe.</p>
+
+<p>Die Reihenfolge der Keyframes ist egal, denn sie werden in der Reihenfolge ihrer Prozentzahl verwendet.</p>
+
+<h3 id="Gültige_Keyframe-Liste">Gültige Keyframe-Liste</h3>
+
+<p>Damit ein Keyframe gültig ist, muss er Regeln enthalten, die zumindest die Zeiten <code>0%</code> (oder <code>from</code>) und <code>100%</code> (oder <code>to</code>) enthalten (d.h. der Start- und Endstatus der Animation). Wenn beide Zeiten nicht angegeben sind, ist die Keyframe-Deklaration ungültig; sie wird vom Parser ignoriert und kann nicht als Animation verwendet werden.</p>
+
+<p>Wenn Eigenschaften beschrieben werden, die nicht in den Keyframe-Regeln animiert werden können, werden sie ignoriert. Unterstützte Eingeschaften in dem Block werden weiterhin animiert.</p>
+
+<h3 id="Doppelte_Deklarationen">Doppelte Deklarationen</h3>
+
+<p>Wenn mehrere Keyframe-Sets mit einem Namen existieren, gilt der letzte definierte. <code>@keyframes</code>-Regeln sind nicht kaskadierend, Animationen nehmen also niemals Keyframes von mehr als einer definierten Regel.</p>
+
+<p>Wenn ein Zeitpunkt in der Animation doppelt deklariert ist, gilt der letzte Keyframe dieses Zeitpunkts in der <code>@keyframes</code>-Regel. Mehrere Regeln derselben Zeit sind nicht kaskadierend.</p>
+
+<h3 id="Wenn_Eigenschaften_aus_manchen_Keyframes_ausgelassen_werden">Wenn Eigenschaften aus manchen Keyframes ausgelassen werden</h3>
+
+<p>Jede Eigenschaft, die nicht in jedem Keyframe spezifiert wird, ist interpoliert (mit der Ausnahme von denen, die nicht interpoliert werden können und daher aus der gesamten Animation weggelassen werden). Zum Beispiel:</p>
+
+<pre class="brush: css">@keyframes identifier {
+  0% { top: 0; left: 0; }
+  30% { top: 50px; }
+  68%, 72% { left: 50px; }
+  100% { top: 100px; left: 100%; }
+}
+</pre>
+
+<p>Hier wird die {{ cssxref("top") }}-Eigenschaft mit Benutzen der <code>0%</code>-, <code>30%-</code>, und <code>100%</code>-Keyframes animiert, und {{ cssxref("left") }} animiert anhand der <code>0%</code>-, <code>68%</code>-, and <code>100%</code>-Keyframes.</p>
+
+<p>Nur Eigenschaften, die in sowohl im <code>0%</code>-, als auch im <code>100%</code>-Keyframe spezifiziert sind, werden animiert; jede Eigenschaft, die nicht in diesen beiden Keyframes enthalten ist, wird ihren Startwert für die Dauer der Animation behalten.</p>
+
+<h3 id="Wenn_ein_Keyframe_mehrmals_definiert_wird">Wenn ein Keyframe mehrmals definiert wird</h3>
+
+<p>Wenn ein Keyframe mehrmals definiert wird, aber nicht alle Eigenschaften in jedem Keyframe enthalten sind, werden ausschließlich die Werte des letzten Keyframes beachtet, zum Beispiel:</p>
+
+<pre class="brush: css">@keyframes identifier {
+  0% { top: 0; }
+  50% { top: 30px; left: 20px; }
+  50% { top: 10px; }
+  100% { top: 0; }
+}
+</pre>
+
+<p>In diesem Beispiel ist der genutzte Wert des <code>50%</code>-Keyframe <code>top: 10px</code> und alle anderen Werte des ersten Keyframes werden ignoriert.</p>
+
+<p>{{ non-standard_inline }} {{ fx_minversion_inline("14") }}  Kaskadierende Keyframes werden in Firefox ab Version 14 unterstützt. Im oberen Beispiel wird beim <code>50%</code>-Keyframe der Wert <code>left: 20px</code> beachtet. Dies ist noch nicht in der Spezifikation definiert, wird allerdings gerade diskutiert.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">@keyframes &lt;bezeichner&gt; {
+  [ [ from | to | &lt;Prozentzahl&gt; ] [, from | to | &lt;Prozentzahl&gt; ]* block ]*
+}
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>&lt;Bezeichner&gt;</code></dt>
+ <dd>Ein Name, der die Keyframe-Liste eindeutig identifiziert. Er muss den CSS-Syntax-Richtlinien für Bezeichner entsprechen.</dd>
+ <dt><code>from</code></dt>
+ <dd>Der Startwert <code>0%</code>.</dd>
+ <dt><code>to</code></dt>
+ <dd>Der Endwert <code>100%</code>.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Eine Prozentzahl, die den Zeitpunkt in der Animationssequenz angibt, an dem der spezifizierte Keyframe gelten soll.</dd>
+</dl>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Siehe <a href="/en/CSS/CSS_animations" title="en/CSS/CSS_animations">CSS-Animationen</a> für Beispiele.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Animations', '#keyframes', '@keyframes') }}</td>
+   <td>{{ Spec2('CSS3 Animations') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser-Kompatibilität</h2>
+
+{{Compat("css.at-rules.keyframes")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Tutorials/Using_CSS_animations" title="Tutorial about CSS animations">CSS-Animationen benutzen</a></li>
+ <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li>
+</ul>
diff --git a/files/de/web/css/@media/any-pointer/index.html b/files/de/web/css/@media/any-pointer/index.html
new file mode 100644
index 0000000000..d919a97c58
--- /dev/null
+++ b/files/de/web/css/@media/any-pointer/index.html
@@ -0,0 +1,67 @@
+---
+title: any-pointer
+slug: Web/CSS/@media/any-pointer
+tags:
+  - CSS
+  - NeedsBrowserCompatibility
+  - NeedsExample
+  - Referenz
+translation_of: Web/CSS/@media/any-pointer
+---
+{{cssref}}
+
+<p><strong><code>any-pointer</code></strong> ist ein CSS Media Feature, das dazu verwendet werden kann, um zu prüfen, ob irgendein verfügbarer Eingabemechanismus ein Zeigegerät ist, und falls ja, wie genau es ist.</p>
+
+<h2 id="Aufgezählte_Werte">Aufgezählte Werte</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th>Wert</th>
+   <th>Bedeutung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>none</code></td>
+   <td>Das Gerät verfügt nicht über ein Zeigegerät.</td>
+  </tr>
+  <tr>
+   <td><code>coarse</code></td>
+   <td>Mindestens ein Eingabemechanismus des Geräts verfügt über ein Zeigegerät von begrenzter Genauigkeit.</td>
+  </tr>
+  <tr>
+   <td><code>fine</code></td>
+   <td>Mindestens ein Eingabemechanismus des Geräts verfügt über ein Zeigegerät von präziser Genauigkeit.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#descdef-media-any-pointer', 'any-pointer')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.at-rules.media.any-pointer")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/CSS/@media/pointer">das <code>pointer</code> Media Feature</a></li>
+</ul>
diff --git a/files/de/web/css/@media/index.html b/files/de/web/css/@media/index.html
new file mode 100644
index 0000000000..814ff628ed
--- /dev/null
+++ b/files/de/web/css/@media/index.html
@@ -0,0 +1,260 @@
+---
+title: '@media'
+slug: Web/CSS/@media
+tags:
+  - At-rule
+  - CSS
+  - Layout
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - Web
+translation_of: Web/CSS/@media
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>The <code>@media</code> <a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/At-rule" title="en/CSS/At-rule">at-rule</a> associates a set of nested statements, in a CSS block that is delimited by curly braces, with a condition defined by a <a href="/en/CSS/Media_queries" title="CSS media queries">media query</a>. The <code>@media</code> at-rule may be used not only at the top level of a CSS, but also inside any <a href="/en/CSS/At-rule#Conditional_Group_Rules" title="en/CSS/At-rule#Conditional_Group_Rules">CSS conditional-group at-rule</a>.</p>
+
+<p>The <code>@media</code> at-rule can be accessed via the CSS object model interface {{domxref("CSSMediaRule")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<p>A <code>&lt;media-query&gt;</code> is composed of a media type and/or a number of media features.</p>
+
+<h2 id="Media_types" name="Media_types">Media types</h2>
+
+<div class="note"><strong>Note:</strong> Firefox currently only implements the <code>print</code> and <code>screen</code> media types.  The <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/4650" title="https://addons.mozilla.org/en-US/firefox/addon/4650">FullerScreen</a> extension enables support for the <code>projection</code> media type.</div>
+
+<dl>
+ <dt>all</dt>
+ <dd>Suitable for all devices.</dd>
+ <dt>print</dt>
+ <dd>Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on <a href="/en/CSS/Paged_Media" title="https://developer.mozilla.org/en/CSS/Paged_Media">paged media</a>, and the <a href="/en/CSS/Getting_Started/Media" title="https://developer.mozilla.org/en/CSS/Getting_Started/Media">media section of the Getting Started tutorial</a> for information about formatting issues that are specific to paged media.</dd>
+ <dt>screen</dt>
+ <dd>Intended primarily for color computer screens.</dd>
+ <dt>speech</dt>
+ <dd>Intended for speech synthesizers. Note: CSS2 had a similar media type called 'aural' for this purpose. See the appendix on aural style sheets for details.</dd>
+</dl>
+
+<div class="note"><strong>Note:</strong> CSS2.1 and Media Queries 3 defined several additional media types (<code>tty</code>, <code>tv</code>, <code>projection</code>, <code>handheld</code>, <code>braille</code>, <code>embossed</code>, <code>aural</code>), but they were deprecated in <a href="http://dev.w3.org/csswg/mediaqueries/#media-types">Media Queries 4</a> and shouldn't be used.</div>
+
+<h2 id="Media_features" name="Media_features">Media Features</h2>
+
+<p><a href="http://dev.w3.org/csswg/mediaqueries/#mq-features">Definition</a>. This section needs to be expanded to explain media conditions in more depth.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th>Name</th>
+   <th>Summary</th>
+   <th>Notes</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/width"><code>width</code></a></td>
+   <td>Viewport width</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/height"><code>height</code></a></td>
+   <td>Viewport height</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/aspect-ratio"><code>aspect-ratio</code></a></td>
+   <td>Width-to-height aspect ratio of the viewport</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/orientation"><code>orientation</code></a></td>
+   <td>Orientation of the viewport</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/resolution"><code>resolution</code></a></td>
+   <td>Pixel density of the output device</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/scan"><code>scan</code></a></td>
+   <td>Scanning process of the output device</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/grid"><code>grid</code></a></td>
+   <td>Is the device a grid or bitmap?</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/update-frequency"><code>update-frequency</code></a></td>
+   <td>How quickly (if at all) can the output device modify the appearance of the content</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/overflow-block"><code>overflow-block</code></a></td>
+   <td>How does the output device handle content that overflows the viewport along the block axis?</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/overflow-inline"><code>overflow-inline</code></a></td>
+   <td>Can content that overflows the viewport along the inline axis be scrolled?</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/color"><code>color</code></a></td>
+   <td>Number of bits per color component of the output device, or zero if the device isn't color.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/color-index"><code>color-index</code></a></td>
+   <td>Number of entries in the output device's color lookup table, or zero if the device does not use such a table.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/monochrome"><code>monochrome</code></a></td>
+   <td>Bits per pixel in the output device's monochrome frame buffer, or 0 if the device is not monochrome.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/inverted-colors"><code>inverted-colors</code></a></td>
+   <td>Is the user agent or underlying OS inverting colors?</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/pointer"><code>pointer</code></a></td>
+   <td>Is the primary input mechanism a pointing device, and if so, how accurate is it?</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/hover"><code>hover</code></a></td>
+   <td>Does the primary input mechanism allow the user to hover over elements?</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/any-pointer"><code>any-pointer</code></a></td>
+   <td>Is any available input mechanism a pointing device, and if so, how accurate is it?</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/any-hover"><code>any-hover</code></a></td>
+   <td>Does any available input mechanism allow the user to hover over elements?</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/light-level"><code>light-level</code></a></td>
+   <td>Current ambient light level</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/scripting"><code>scripting</code></a></td>
+   <td>Is scripting (e.g. JavaScript) available?</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/device-width"><code>device-width</code></a> {{obsolete_inline}}</td>
+   <td>Width of the rendering surface of the output device</td>
+   <td>Deprecated in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/device-height"><code>device-height</code></a> {{obsolete_inline}}</td>
+   <td>Height of the rendering surface of the output device</td>
+   <td>Deprecated in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/device-aspect-ratio"><code>device-aspect-ratio</code></a> {{obsolete_inline}}</td>
+   <td>Width-to-height aspect ratio of the output device</td>
+   <td>Deprecated in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/-webkit-device-pixel-ratio"><code>-webkit-device-pixel-ratio</code></a> {{non-standard_inline}}</td>
+   <td>Number of physical device pixels per CSS pixel</td>
+   <td>Nonstandard; WebKit/Blink-specific. If possible, use the <a href="/en-US/docs/Web/CSS/@media/resolution"><code>resolution</code></a> media feature instead.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/-webkit-transform-3d"><code>-webkit-transform-3d</code></a> {{non-standard_inline}}</td>
+   <td>Are CSS 3D {{cssxref("transform")}}s supported?</td>
+   <td>Nonstandard; WebKit/Blink-specific</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/-webkit-transform-2d"><code>-webkit-transform-2d</code></a> {{non-standard_inline}}</td>
+   <td>Are CSS 2D {{cssxref("transform")}}s supported?</td>
+   <td>Nonstandard; WebKit-specific</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/-webkit-transition"><code>-webkit-transition</code></a> {{non-standard_inline}}</td>
+   <td>Are CSS {{cssxref("transition")}}s supported?</td>
+   <td>Nonstandard; WebKit-specific</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/-webkit-animation"><code>-webkit-animation</code></a> {{non-standard_inline}}</td>
+   <td>Are CSS {{cssxref("animation")}}s supported?</td>
+   <td>Nonstandard; WebKit-specific</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">Examples</h2>
+
+<pre class="brush: css">@media print {
+  body { font-size: 10pt }
+}
+@media screen {
+  body { font-size: 13px }
+}
+@media screen, print {
+  body { line-height: 1.2 }
+}
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Conditional', '#at-media', '@media')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td>Defines the basic syntax of the <code>@media</code> rule.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#media', '@media')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>
+    <p>Added <code>scripting</code>, <code>pointer</code>, <code>hover</code>, <code>light-level</code>, <code>update-frequency</code>, <code>overflow-block</code>, and <code>overflow-inline</code> media features.<br>
+     Deprecated all media types except for <code>screen</code>, <code>print</code>, <code>speech</code>, and <code>all</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#media0', '@media')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+{{Compat("css.at-rules.media")}}
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="internal" href="/en/CSS/Media_queries" title="En/CSS/Media queries">Media queries</a></li>
+ <li>The CSSOM {{ domxref("CSSMediaRule") }} associated with this at-rule.</li>
+</ul>
diff --git a/files/de/web/css/@media/pointer/index.html b/files/de/web/css/@media/pointer/index.html
new file mode 100644
index 0000000000..4c1ff0fc8b
--- /dev/null
+++ b/files/de/web/css/@media/pointer/index.html
@@ -0,0 +1,91 @@
+---
+title: pointer
+slug: Web/CSS/@media/pointer
+translation_of: Web/CSS/@media/pointer
+---
+<div>{{cssref}}</div>
+
+<p>Das <a href="/en-US/docs/CSS">CSS</a> {{cssxref("@media")}} media Merkmal <strong><code>pointer</code></strong> wird verwendet um Styles abhängig vom primären Eingabemechanismus des Geräts anzuwenden. Es gibt aufschluss darüber ob der primäre Eingabemechanismus ein Zeigegerät ist, und wenn ja, wie präzise es ist.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>Die Einstellungsmöglichkeiten für das Merkmal <code>pointer</code>  sind in der folgenden Liste aufge</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Das Gerät verfügt nur über Tastatur</dd>
+ <dt><code>coarse</code></dt>
+ <dd>Das Gerät verfügt über ein Eingabegerät mit limitierter Präzision (z.B. Touch)</dd>
+ <dt><code>fine</code></dt>
+ <dd>Das Gerät verfügt über einen sehr präzises Eingabegerät (z.B. Maus, Touchpad, Stift)</dd>
+</dl>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input id="test" type="checkbox" /&gt;
+&lt;label for="test"&gt;Look at me!&lt;/label&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input[type="checkbox"]:checked {
+  background: gray;
+}
+
+@media (pointer: fine) {
+  input[type="checkbox"] {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    width: 15px;
+    height: 15px;
+    border: 1px solid blue;
+  }
+}
+
+@media (pointer: coarse) {
+  input[type="checkbox"] {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    width: 30px;
+    height: 30px;
+    border: 2px solid red;
+  }
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#pointer', 'pointer')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+
+
+<p>{{Compat("css.at-rules.media.pointer")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/@media/any-pointer">the <code>any-pointer</code> media feature</a></li>
+</ul>
diff --git a/files/de/web/css/@media/prefers-reduced-motion/index.html b/files/de/web/css/@media/prefers-reduced-motion/index.html
new file mode 100644
index 0000000000..84c9382a27
--- /dev/null
+++ b/files/de/web/css/@media/prefers-reduced-motion/index.html
@@ -0,0 +1,23 @@
+---
+title: prefers-reduced-motion
+slug: Web/CSS/@media/prefers-reduced-motion
+translation_of: Web/CSS/@media/prefers-reduced-motion
+---
+<p>Das <strong><code>prefers-reduced-motion</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">media feature</a> wird genutzt um zu erkennen ob der Nutzer angefragt hat, dass das System die Menge an nicht notwendiger Bewegung minimiert.</p>
+
+<h2 id="User_preferences">User preferences</h2>
+
+<ul>
+ <li>Unter Windows 10: Einstellungen &gt; Erleichterte Bedienung &gt; Anzeige &gt; Animationen in Windows anzeigen</li>
+ <li>In Firefox <code>about:config</code>: Füge eine Binär-Präferenz ("Number") namens <code>ui.prefersReducedMotion</code> hinzu und setze deren Wert auf <code>1</code>. Änderung an dieser Präferenz werden sofort übernommen.</li>
+</ul>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+
+
+<p>{{Compat("css.at-rules.media.prefers-reduced-motion")}}</p>
+
+<h2 id="sect1"></h2>
+
+<div>{{QuickLinksWithSubpages("/en-US/docs/Web/CSS/@media/")}}</div>
diff --git a/files/de/web/css/@media/width/index.html b/files/de/web/css/@media/width/index.html
new file mode 100644
index 0000000000..7f25285f3e
--- /dev/null
+++ b/files/de/web/css/@media/width/index.html
@@ -0,0 +1,53 @@
+---
+title: width
+slug: Web/CSS/@media/width
+tags:
+  - CSS
+  - Referenz
+translation_of: Web/CSS/@media/width
+---
+<p>{{cssref}}</p>
+
+<p><strong><code>width</code></strong> ist eine <a href="/de/docs/Web/CSS">CSS</a> Medien-Eigenschaft, die verwendet werden kann um Stile basierend auf der Breite der Anzeige (Viewport) zuzuordnen. Die Breite muss als {{cssxref("&lt;length&gt;")}} Wert definiert werden.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p><strong><code>width</code></strong> ist ein Breichswert, d.h. <strong><code>min-width</code></strong> und <strong>max-width</strong> sind ebenfalls verfügbar.</p>
+
+<pre class="brush: css">/* Exakte Breite */
+@media (width: 300px) {}
+
+/* Viewport Minimale Breite */
+@media (min-width: 50em) {}
+
+/* Viewport Maximale Breite */
+@media (max-width: 1000px) {}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#media', '@media')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Keine Änderung.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#width', 'width')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2>
+
+{{Compat("css.at-rules.media.width")}}
diff --git a/files/de/web/css/@page/bleed/index.html b/files/de/web/css/@page/bleed/index.html
new file mode 100644
index 0000000000..709025d671
--- /dev/null
+++ b/files/de/web/css/@page/bleed/index.html
@@ -0,0 +1,77 @@
+---
+title: bleed
+slug: Web/CSS/@page/bleed
+tags:
+  - CSS
+  - CSS Referenz
+  - NeedsBrowserCompatibility
+  - NeedsLiveSample
+  - NeedsMobileBrowserCompatibility
+translation_of: Web/CSS/@page/bleed
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Der <code>bleed</code> <a href="/de/docs/Web/CSS/At-Regel">At-Regel</a> Deskriptor gibt den Überhang über den Beschnitt des Seitenbereichs an. Diese Eigenschaft hat nur einen Effekt, falls Schnittmarken über die {{cssxref("marks")}} Eigenschaft aktiviert werden.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Schlüsselwortwerte */
+bleed: auto;
+
+/* &lt;length&gt; Werte */
+bleed: 8pt;
+bleed: 1cm;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Erhält den Wert <code>6pt</code>, falls der Wert von {{cssxref("marks")}} <code>crop</code> ist. Ansonsten ist der Wert <code>0</code>.</dd>
+ <dt><code>{{cssxref("&lt;length&gt;")}}</code></dt>
+ <dd>Gibt an, wie weit, in jeder Richtung, der Beschnitt den Seitenbereich überragt. Werte können negativ sein, allerdings gibt es implementierungsspezifische Beschränkungen.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: css">@page {
+  bleed: 1cm;
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Paged Media", "#bleed", "bleed")}}</td>
+   <td>{{Spec2("CSS3 Paged Media")}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{Compat("css.at-rules.page.bleed")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{Cssxref("marks")}}</li>
+</ul>
diff --git a/files/de/web/css/@page/index.html b/files/de/web/css/@page/index.html
new file mode 100644
index 0000000000..ed45c12a03
--- /dev/null
+++ b/files/de/web/css/@page/index.html
@@ -0,0 +1,90 @@
+---
+title: '@page'
+slug: Web/CSS/@page
+tags:
+  - At-Regel
+  - CSS
+  - Layout
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+  - Web
+translation_of: Web/CSS/@page
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>@page</code> CSS At-Regel wird verwendet, um einige CSS Eigenschaften zu ändern, wenn ein Dokument gedruckt wird. Es können nicht alle CSS Eigenschaften mit <code>@page</code> geändert werden. Es können nur Seitenränder, Absatzkontrolle — oben (widow); unten (orphans) — und Seitenumbrüche des Dokuments verändert werden. Versuche, andere CSS Eigenschaften zu ändern, werden ignoriert.</p>
+
+<p>Die <code>@page</code> At-Regel kann über die CSS Objektmodellschnittstelle {{domxref("CSSPageRule")}} angesprochen werden.</p>
+
+<div class="note"><strong>Hinweis:</strong> Das W3C diskutiert, wie die viewportbezogenen {{cssxref("&lt;length&gt;")}} Einheiten, <code>vh</code>, <code>vw</code>, <code>vmin</code>, und <code>vmax</code> gehandhabt werden sollen. Bis dahin sollten diese nicht in einer <code>@page</code> At-Regel verwendet werden.</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<h3 id="Deskriptoren">Deskriptoren</h3>
+
+<dl>
+ <dt>{{cssxref("@page/size", "size")}}</dt>
+ <dd>Bestimmt die Zielgröße und -ausrichtung des den Seitenbereich beinhaltenden Blocks. Im allgemeinen Fall, in dem ein Seitenbereich auf einer Seitenpostille dargestellt wird, gibt sie auch die Größe der Zielseitenpostille an.</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@page/marks", "marks")}}</dt>
+ <dd>Fügt dem Dokument Schneide- und/oder Registrierungsmarker hinzu.</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@page/bleed", "bleed")}}</dt>
+ <dd>Gibt den Überhang über den Seitenbereich an, bei dem die Darstellung der Seite abgeschnitten wird.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Bitte lies die verschiedenen <a href="/de/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">Pseudoklassen</a> von <code>@page</code> für Beispiele.</p>
+
+<ul>
+ <li>{{Cssxref(":blank")}}</li>
+ <li>{{Cssxref(":first")}}</li>
+ <li>{{Cssxref(":left")}}</li>
+ <li>{{Cssxref(":right")}}</li>
+ <li>{{Cssxref(":recto")}} {{experimental_inline}}</li>
+ <li>{{Cssxref(":verso")}} {{experimental_inline}}</li>
+</ul>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Logical Properties', '#logical-page', ':recto und :verso')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td>Fügt die <code>:recto</code> und <code>:verso</code> Seitenselektoren hinzu.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Paged Media', '#at-page-rule', '@page')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</td>
+   <td>Keine Änderung bzgl. {{SpecName('CSS2.1')}}, es können jedoch mehr CSS At-Regeln innerhalb <code>@page</code> verwendet werden.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'page.html#page-selectors', '@page')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{Compat("css.at-rules.page")}}</p>
diff --git a/files/de/web/css/@page/marks/index.html b/files/de/web/css/@page/marks/index.html
new file mode 100644
index 0000000000..f30efcffd3
--- /dev/null
+++ b/files/de/web/css/@page/marks/index.html
@@ -0,0 +1,84 @@
+---
+title: marks
+slug: Web/CSS/@page/marks
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - Layout
+  - NeedsBrowserCompatibility
+  - NeedsExample
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+  - Web
+translation_of: Web/CSS/@page/marks
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>marks</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft fügt Schneide- und/oder Registermarken zur Darstellung eines Dokuments hinzu. <em>Schneidemarken</em> zeigen an, wo die Seite abgeschnitten werden soll. <em>Registermarken</em> verden zur Ausrichtung von Blättern benutzt.</p>
+
+<p>Schneidemarken und Registermarken werden außerhalb des Seitenrechtecks gedruckt. Um Platz für Schneide- und Registermarken zu haben, müssen die finalen Seiten etwas größer sein als das Seitenrechteck.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css  language-css"><code class="language-css"><span class="comment token">/* Schlüsselwortwerte */</span>
+<span class="property token">marks</span><span class="punctuation token">:</span> none<span class="punctuation token">;</span>
+<span class="property token">marks</span><span class="punctuation token">:</span> crop<span class="punctuation token">;</span>
+<span class="property token">marks</span><span class="punctuation token">:</span> cross<span class="punctuation token">;</span>
+<span class="property token">marks</span><span class="punctuation token">:</span> crop cross<span class="punctuation token">;</span></code></pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>crop</code></dt>
+ <dd>Es werden Schneidemarken angezeigt.</dd>
+ <dt><code>cross</code></dt>
+ <dd>Es werden Registermarken angezeigt.</dd>
+ <dt><code>none</code></dt>
+ <dd>Es werden keine Marken angezeigt.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush:css">@page {
+  marks: crop cross;
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Paged Media', '#marks', 'marks')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Diese CSS Eigenschaft wurde ursprünglich in CSS Level 2 vorgeschlagen, wurde jedoch in CSS Level 2 (Revision 1) verworfen.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.at-rules.page.marks")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{Cssxref("@page/bleed", "bleed")}}</li>
+</ul>
diff --git a/files/de/web/css/@viewport/index.html b/files/de/web/css/@viewport/index.html
new file mode 100644
index 0000000000..2cdcd37691
--- /dev/null
+++ b/files/de/web/css/@viewport/index.html
@@ -0,0 +1,96 @@
+---
+title: '@viewport'
+slug: Web/CSS/@viewport
+translation_of: Web/CSS/@viewport
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+
+<p>Die <code>@viewport</code> <a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/At-rule" title="en/CSS/At-rule">at-Regel</a> enthält eine Menge aus geschachtelten Deskriptoren in einem CSS-Block, der durch geschweifte Klammern begrenzt wird. Diese Deskriptoren steuern die Viewport-Einstellungen, insbesondere auf mobilen Geräten.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>(Dieser MDN Artikel ist derzeit nur ein Abriss, ihm fehlt die vollständige Beschreibung der Syntax.)</p>
+
+<pre class="syntaxbox" style="font-size: 14px;">@viewport {
+  /* viewport-Deskriptor: viewport-Wert; */
+}</pre>
+
+<p> </p>
+
+<p>Ein <em>Zoomfaktor</em> von <code>1.0</code> oder <code>100%</code> beschreibt kein Zooming. Größere Werte vergrößern, kleinere Werte verkleinern.</p>
+
+<h3 id="Deskriptoren">Deskriptoren</h3>
+
+<p>Browser sollen unbekannte Deskriptoren ignorieren.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/min-width"><code>min-width</code></a></dt>
+ <dd>Verwendet für die Festlegung der Breite des Viewports, wenn das Dokument zum ersten Mal gezeigt wird.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/max-width"><code>max-width</code></a></dt>
+ <dd>Verwendet für die Festlegung der Breite des Viewports, wenn das Dokument zum ersten Mal gezeigt wird.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/width"><code>width</code></a></dt>
+ <dd>Eine Kurznotation für die Festlegung von sowohl <code>min-width</code> als auch <code>max-width</code></dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/min-height"><code>min-height</code></a></dt>
+ <dd>Verwendet für die Festlegung der Höhe des Viewports, wenn das Dokument zum ersten Mal gezeigt wird.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/max-height"><code>max-height</code></a></dt>
+ <dd>Verwendet für die Festlegung der Höhe des Viewports, wenn das Dokument zum ersten Mal gezeigt wird.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/height"><code>height</code></a></dt>
+ <dd>Eine Kurznotation für die Festlegung von sowohl <code>min-height</code> als auch <code>max-height</code></dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/zoom"><code>zoom</code></a></dt>
+ <dd>Legt den initialen Zoomfaktor fest.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/min-zoom"><code>min-zoom</code></a></dt>
+ <dd>Legt den minimalen Zoomfaktor fest.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/max-zoom"><code>max-zoom</code></a></dt>
+ <dd>Legt den maximalen Zoomfaktor fest.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/user-zoom"><code>user-zoom</code></a></dt>
+ <dd>Steuert, ob der Anwender den Zoomfaktor ändern darf.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/orientation"><code>orientation</code></a></dt>
+ <dd>Steuert die Orientierung des Dokuments (Hoch- oder Querformat).</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="eval" style="font-size: 14px;">@viewport {
+  min-width: 640px;
+  max-width: 800px;
+}
+@viewport {
+  zoom: 0.75;
+  min-zoom: 0.5;
+  max-zoom: 0.9;
+}
+@viewport {
+  orientation: landscape;
+}</pre>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Device', '#the-atviewport-rule', '@viewport')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{Compat("css.at-rules.viewport")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{HTMLElement("meta")}}, specifically <code>&lt;meta name="viewport"&gt;</code></li>
+ <li><a href="/en-US/docs/Mobile/Viewport_meta_tag">Using the viewport meta tag to control layout on mobile browsers</a></li>
+</ul>
diff --git a/files/de/web/css/_colon_-moz-broken/index.html b/files/de/web/css/_colon_-moz-broken/index.html
new file mode 100644
index 0000000000..bf59121e5e
--- /dev/null
+++ b/files/de/web/css/_colon_-moz-broken/index.html
@@ -0,0 +1,25 @@
+---
+title: ':-moz-broken'
+slug: 'Web/CSS/:-moz-broken'
+tags:
+  - CSS
+  - CSS Referenz
+  - NeedsCompatTable
+  - NeedsExample
+  - Non-standard
+translation_of: 'Web/CSS/:-moz-broken'
+---
+<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>:-moz-broken</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> matcht Elemente, die fehlende Bildlinks repräsentieren.</p>
+
+<p>Dieser Selektor ist dazu gedacht, hauptsächlich von Themeentwicklern verwendet zu werden.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{bug("11011")}}</li>
+ <li>{{cssxref("-moz-alt-content")}}</li>
+</ul>
diff --git a/files/de/web/css/_colon_-moz-drag-over/index.html b/files/de/web/css/_colon_-moz-drag-over/index.html
new file mode 100644
index 0000000000..af4b680211
--- /dev/null
+++ b/files/de/web/css/_colon_-moz-drag-over/index.html
@@ -0,0 +1,42 @@
+---
+title: ':-moz-drag-over'
+slug: 'Web/CSS/:-moz-drag-over'
+tags:
+  - CSS
+  - CSS Referenz
+  - NeedsCompatTable
+  - Non-standard
+translation_of: 'Web/CSS/:-moz-drag-over'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>:-moz-drag-over</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> wird dazu verwendet, um ein Element zu stylen, wenn das drag-over Ereignis für es ausgelöst wird.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>element</var>:-moz-drag-over { <em>Stileigenschaften</em> }
+</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">td:-moz-drag-over {
+  color: red;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;table border="1"&gt;
+  &lt;tr&gt;
+    &lt;td width="100px" height="100px"&gt;Hierüber ziehen&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+</pre>
+
+<h3 id="Ergebnis">Ergebnis</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
diff --git a/files/de/web/css/_colon_-moz-first-node/index.html b/files/de/web/css/_colon_-moz-first-node/index.html
new file mode 100644
index 0000000000..97002e8509
--- /dev/null
+++ b/files/de/web/css/_colon_-moz-first-node/index.html
@@ -0,0 +1,48 @@
+---
+title: ':-moz-first-node'
+slug: 'Web/CSS/:-moz-first-node'
+tags:
+  - CSS
+  - CSS Referenz
+  - NeedsCompatTable
+  - Non-standard
+translation_of: 'Web/CSS/:-moz-first-node'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>:-moz-first-node</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> repräsentiert ein beliebiges Element, dass der erste Kindknoten eines anderen Elements ist. Es unterscheidet sich von {{cssxref(":last-child")}}, da es keine letzten Kindelemente mit darauffolgendem (nicht aus Leerzeichen bestehenden) Text matcht.</p>
+
+<p class="note">Any white space at the start of an element is ignored for the determination of <code>:-moz-first-node</code>.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>span</var>:-moz-first-node { <em>Stileigenschaften</em> }
+</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">span:-moz-first-node {
+  background-color: lime;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;div&gt;
+  &lt;span&gt;:-moz-first-node&lt;/span&gt;
+  &lt;span&gt;:-moz-last-node&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Example", "220", "20")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref(":-moz-last-node")}}</li>
+ <li>{{cssxref(":first-child")}}</li>
+</ul>
diff --git a/files/de/web/css/_colon_-moz-focusring/index.html b/files/de/web/css/_colon_-moz-focusring/index.html
new file mode 100644
index 0000000000..ab07f48bdc
--- /dev/null
+++ b/files/de/web/css/_colon_-moz-focusring/index.html
@@ -0,0 +1,91 @@
+---
+title: ':-moz-focusring'
+slug: 'Web/CSS/:-moz-focusring'
+tags:
+  - CSS
+  - CSS Referenz
+  - NeedsBrowserCompatibility
+  - NeedsLiveSample
+  - Non-standard
+translation_of: 'Web/CSS/:-moz-focusring'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>:-moz-focusring</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> ist ähnlich der {{cssxref(":focus")}} Pseudoklasse, jedoch matcht sie ein Element nur, wenn das Element aktuell fokussiert ist <strong>und</strong> der User Agent das Zeichen von Fokusringen aktiviert hat. Falls <code>:-moz-focusring</code> matcht, dann matcht auch <code>:focus</code>, aber das Umgekehrte ist nicht immer wahr - es hängt davon ab, ob der User Agent das Zeichnen von Fokusringen aktiviert hat. Ob der User Agent das Zeichen von Fokusringen aktiviert hat, kann von Dingen wie der Einstellung des Betriebssystems abhängen, das der Benutzer verwendet, sodass das Verhalten dieser Pseudoklasse von Plattform zu Plattform abhängig von den Best Practices (Standardeinstellungen) bezüglich Fokusierung der Plattform oder Benutzereinstellungen.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">:-moz-focusring</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Um die Anzeige eines fokussierten Elements zu definieren, kann dieser Pseudoklassenselektor folgendermaßen verwendet werden:</p>
+
+<pre class="brush: css">mybutton:-moz-focusring {
+  outline: 2px dotted;
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Dieses Feature ist bisher noch in keiner Spezifikation definiert, jedoch wurde es <a href="https://lists.w3.org/Archives/Public/www-style/2015Sep/0226.html">in der Working Group diskutiert</a> und es wurde <a href="https://lists.w3.org/Archives/Public/www-style/2015Oct/0012.html">beschlossen, es zu Selectors 4 oder 5 hinzuzufügen</a>.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(2)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Chrome für Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{bug("418521")}}</li>
+</ul>
diff --git a/files/de/web/css/_colon_-moz-full-screen-ancestor/index.html b/files/de/web/css/_colon_-moz-full-screen-ancestor/index.html
new file mode 100644
index 0000000000..c14ed802c6
--- /dev/null
+++ b/files/de/web/css/_colon_-moz-full-screen-ancestor/index.html
@@ -0,0 +1,82 @@
+---
+title: ':-moz-full-screen-ancestor'
+slug: 'Web/CSS/:-moz-full-screen-ancestor'
+tags:
+  - CSS
+  - CSS Referenz
+  - NeedsCompatTable
+  - NeedsExample
+  - Non-standard
+  - Pseudoklasse
+translation_of: 'Archive/Web/CSS/:-moz-full-screen-ancestor'
+---
+<div>{{CSSRef}}{{non-standard_header}}</div>
+
+<p>Die <code>:-moz-full-screen-ancestor</code> CSS <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> passt auf alle Vorfahren des Vollbild-Elements außer beinhaltende Frames in Elterndokumenten, welche das Vollbild-Element in ihren eigenen Dokumenten sind. Jedoch passt diese Pseudoklasse auf die Vorfahren dieser Elemente.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Benötigt Beispiele.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("10.0")}}{{property_prefix("-moz")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("10.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Vollbild-API">Verwendung des Vollbildmodus</a></li>
+ <li>{{domxref("element.mozRequestFullScreen()")}}</li>
+ <li>{{domxref("document.mozCancelFullScreen()")}}</li>
+ <li>{{domxref("document.mozFullScreen")}}</li>
+ <li>{{domxref("document.mozFullScreenElement")}}</li>
+ <li>{{domxref("document.mozFullScreenEnabled")}}</li>
+ <li>{{HTMLAttrXRef("mozallowfullscreen", "iframe")}}</li>
+ <li>{{cssxref(":-moz-full-screen")}}</li>
+</ul>
diff --git a/files/de/web/css/_colon_-moz-handler-blocked/index.html b/files/de/web/css/_colon_-moz-handler-blocked/index.html
new file mode 100644
index 0000000000..df544a0487
--- /dev/null
+++ b/files/de/web/css/_colon_-moz-handler-blocked/index.html
@@ -0,0 +1,23 @@
+---
+title: ':-moz-handler-blocked'
+slug: 'Web/CSS/:-moz-handler-blocked'
+tags:
+  - CSS
+  - CSS Referenz
+  - Non-standard
+translation_of: 'Web/CSS/:-moz-handler-blocked'
+---
+<p>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.1")}}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p><code>:-moz-handler-blocked</code> matcht Elemente, die nicht angezeigt werden können, weil deren Handler blockiert wurden.</p>
+
+<p>Dies ist hauptsächlich für Themeentwickler nützlich.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref(":-moz-handler-crashed")}}</li>
+ <li>{{cssxref(":-moz-handler-disabled")}}</li>
+</ul>
diff --git a/files/de/web/css/_colon_-moz-handler-crashed/index.html b/files/de/web/css/_colon_-moz-handler-crashed/index.html
new file mode 100644
index 0000000000..25f59a32c2
--- /dev/null
+++ b/files/de/web/css/_colon_-moz-handler-crashed/index.html
@@ -0,0 +1,23 @@
+---
+title: ':-moz-handler-crashed'
+slug: 'Web/CSS/:-moz-handler-crashed'
+tags:
+  - CSS
+  - CSS Referenz
+  - Non-standard
+translation_of: 'Web/CSS/:-moz-handler-crashed'
+---
+<p>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("2.0")}}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p><code>:-moz-handler-crashed</code> matcht Elemente, die nicht angezeigt werden können, weil das Plugin, das für deren Darstellung verantwortlich ist, abgestürzt ist.</p>
+
+<p>Dies ist hauptsächlich für Themeentwickler nützlich.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref(":-moz-handler-blocked")}}</li>
+ <li>{{cssxref(":-moz-handler-disabled")}}</li>
+</ul>
diff --git a/files/de/web/css/_colon_-moz-handler-disabled/index.html b/files/de/web/css/_colon_-moz-handler-disabled/index.html
new file mode 100644
index 0000000000..4a47e9f9d6
--- /dev/null
+++ b/files/de/web/css/_colon_-moz-handler-disabled/index.html
@@ -0,0 +1,23 @@
+---
+title: ':-moz-handler-disabled'
+slug: 'Web/CSS/:-moz-handler-disabled'
+tags:
+  - CSS
+  - CSS Referenz
+  - Non-standard
+translation_of: 'Web/CSS/:-moz-handler-disabled'
+---
+<p>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.1")}}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p><code>:-moz-handler-disabled</code> matcht Elemente, die nicht angezeigt werden können, weil deren Handler durch den Benutzer deaktiviert wurden.</p>
+
+<p>Dies ist hauptsächlich für Themeentwickler nützlich.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref(":-moz-handler-blocked")}}</li>
+ <li>{{cssxref(":-moz-handler-crashed")}}</li>
+</ul>
diff --git a/files/de/web/css/_colon_-moz-last-node/index.html b/files/de/web/css/_colon_-moz-last-node/index.html
new file mode 100644
index 0000000000..29f8c0b486
--- /dev/null
+++ b/files/de/web/css/_colon_-moz-last-node/index.html
@@ -0,0 +1,48 @@
+---
+title: ':-moz-last-node'
+slug: 'Web/CSS/:-moz-last-node'
+tags:
+  - CSS
+  - CSS Referenz
+  - NeedsCompatTable
+  - Non-standard
+translation_of: 'Web/CSS/:-moz-last-node'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>:-moz-last-node</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">Pseudoklasse</a> matcht ein Element, das der letzte Kindknoten eines anderen Elements ist. Es unterscheidet sich von {{cssxref(":last-child")}}, da es keine letzten Kindelemente mit darauffolgendem (nicht aus Leerzeichen bestehenden) Text matcht.</p>
+
+<p class="note">Leerzeichen am Ende eines Elements werden zur Bestimmung von <code>:-moz-last-node</code> ignoriert.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>span</var>:-moz-last-node { <em>Stileigenschaften</em> }
+</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">span:-moz-last-node {
+  background-color: lime;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;div&gt;
+  &lt;span&gt;:-moz-first-node&lt;/span&gt;
+  &lt;span&gt;:-moz-last-node&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Beispiel", "220", "20")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref(":-moz-first-node")}}</li>
+ <li>{{cssxref(":last-child")}}</li>
+</ul>
diff --git a/files/de/web/css/_colon_-moz-list-bullet/index.html b/files/de/web/css/_colon_-moz-list-bullet/index.html
new file mode 100644
index 0000000000..f3ffef8cda
--- /dev/null
+++ b/files/de/web/css/_colon_-moz-list-bullet/index.html
@@ -0,0 +1,47 @@
+---
+title: '::-moz-list-bullet'
+slug: 'Web/CSS/:-moz-list-bullet'
+tags:
+  - CSS
+  - CSS Referenz
+  - NeedsCompatTable
+  - NeedsLiveSample
+  - Non-standard
+translation_of: 'Web/CSS/:-moz-list-bullet'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Das nicht standardisierte <code>::-moz-list-bullet</code> Mozilla <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelement</a> wird dazu benutzt, um den Aufzählungspunkt eines Listenelements zu stylen.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">li::-moz-list-bullet { <em>style properties</em> }</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">.list li::-moz-list-bullet {
+  font-size: 36px;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;ul&gt;
+  &lt;li&gt;Number 1&lt;/li&gt;
+  &lt;li&gt;Number 2&lt;/li&gt;
+  &lt;li&gt;Number 3&lt;/li&gt;
+&lt;/ul&gt;
+&lt;ul class="list"&gt;
+  &lt;li&gt;Number 1&lt;/li&gt;
+  &lt;li&gt;Number 2&lt;/li&gt;
+  &lt;li&gt;Number 3&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h3 id="Ergebnis">Ergebnis</h3>
+
+<p><img alt="Image:liug3.jpg" class="internal" src="/@api/deki/files/745/=Liug3.jpg"></p>
diff --git a/files/de/web/css/_colon_-moz-list-number/index.html b/files/de/web/css/_colon_-moz-list-number/index.html
new file mode 100644
index 0000000000..92de0853ac
--- /dev/null
+++ b/files/de/web/css/_colon_-moz-list-number/index.html
@@ -0,0 +1,45 @@
+---
+title: '::-moz-list-number'
+slug: 'Web/CSS/:-moz-list-number'
+tags:
+  - CSS
+  - CSS Referenz
+  - NeedsCompatTable
+  - Non-standard
+  - Pseudoelement
+translation_of: 'Web/CSS/:-moz-list-number'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Das <code>::-moz-list-number</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelement</a> erlaubt es, das Aussehen von Zahlen in Listeneinträgen ({{HTMLElement("li")}}), die in geordneten Listen ({{HTMLElement("ol")}}) auftreten, anzupassen.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">li::-moz-list-number { <em>style properties</em> }
+</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">li::-moz-list-number {
+  font-style: italic;
+  font-weight: bold;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;ol&gt;
+  &lt;li&gt;First item&lt;/li&gt;
+  &lt;li&gt;Second item&lt;/li&gt;
+  &lt;li&gt;Third item&lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<h3 id="Ergebnis">Ergebnis</h3>
+
+<p><img alt="moz-list-number.png" class="default internal" src="/@api/deki/files/4668/=moz-list-number.png"><br>
+ {{EmbedLiveSample("Beispiel")}}</p>
diff --git a/files/de/web/css/_colon_-moz-loading/index.html b/files/de/web/css/_colon_-moz-loading/index.html
new file mode 100644
index 0000000000..01a8a5cb9a
--- /dev/null
+++ b/files/de/web/css/_colon_-moz-loading/index.html
@@ -0,0 +1,17 @@
+---
+title: ':-moz-loading'
+slug: 'Web/CSS/:-moz-loading'
+tags:
+  - CSS
+  - CSS Referenz
+  - NeedsCompatTable
+  - NeedsContent
+  - NeedsExample
+  - Non-standard
+translation_of: 'Web/CSS/:-moz-loading'
+---
+<div>{{CSSRef}}{{Non-standard_header}}{{gecko_minversion_header("1.9")}}</div>
+
+<p>Die <code>:-moz-loading</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> matcht Elemente, die nicht angezeigt werden können, weil sie noch nicht geladen wurden, wie beispielsweise Bilder, die noch nicht angefangen haben, anzukommen. Beachte, dass Bilder, die <em>dabei sind</em>, geladen zu werden, <em>nicht</em> von der Pseudoklasse gematcht werden.</p>
+
+<p>Dies ist hauptsächlich für Themeentwickler nützlich.</p>
diff --git a/files/de/web/css/_colon_-moz-locale-dir(ltr)/index.html b/files/de/web/css/_colon_-moz-locale-dir(ltr)/index.html
new file mode 100644
index 0000000000..74d080b016
--- /dev/null
+++ b/files/de/web/css/_colon_-moz-locale-dir(ltr)/index.html
@@ -0,0 +1,28 @@
+---
+title: ':-moz-locale-dir(ltr)'
+slug: 'Web/CSS/:-moz-locale-dir(ltr)'
+tags:
+  - CSS
+  - CSS Referenz
+  - Localisierung
+  - NeedsCompatTable
+  - NeedsExample
+  - Non-standard
+  - Pseudoklasse
+translation_of: 'Web/CSS/:-moz-locale-dir(ltr)'
+---
+<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.2")}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>:-moz-locale-dir(ltr)</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/pseudo-classes">Pseudoklasse</a> matcht ein Element, falls die Benutzerschnittstelle von links nach rechts angezeigt wird. Dies wird durch das Setzen der Einstellung <code>intl.uidirection.<em>locale</em></code> (wobei <code><em>locale</em></code> die aktuelle Sprachumgebung ist) auf "ltr" bestimmt.</p>
+
+<p>Dies erlaubt Erweiterungen (und Themes) die einfache Anpassung ihrer Benutzerschnittstelle an die Bedürfnisse der Sprachumgebung des Benutzers. Dies kann sich von Fenster zu Fenster und sogar von Tab zu Tab unterscheiden. Dies ermöglicht es Erweiterungen, selbst dann zu funktionieren, wenn sie die standardmäßige Sprachumgebung des Benutzers nicht unterstützen, da sie sowohl links-nach-rechts als auch rechts-nach-links Layouts unterstützen können, ohne sich um die Besonderheiten der Sprachumgebung zu sorgen.</p>
+
+<p>Dieser Selektor funktioniert nicht korrekt unter HTML; er matcht immer, unabhängig davon, ob das UI links-nach-rechts oder rechts-nach-links ist.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{Cssxref(":-moz-locale-dir(rtl)")}}</li>
+</ul>
diff --git a/files/de/web/css/_colon_-moz-locale-dir(rtl)/index.html b/files/de/web/css/_colon_-moz-locale-dir(rtl)/index.html
new file mode 100644
index 0000000000..ac2045c986
--- /dev/null
+++ b/files/de/web/css/_colon_-moz-locale-dir(rtl)/index.html
@@ -0,0 +1,30 @@
+---
+title: ':-moz-locale-dir(rtl)'
+slug: 'Web/CSS/:-moz-locale-dir(rtl)'
+tags:
+  - CSS
+  - CSS Referenz
+  - Lokalisierung
+  - NeedsCompatTable
+  - NeedsExample
+  - Non-standard
+  - Pseudoklasse
+  - Rechts-nach-links
+translation_of: 'Web/CSS/:-moz-locale-dir(rtl)'
+---
+<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.2")}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>:-moz-locale-dir(rtl)</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/pseudo-classes">Pseudoklasse</a> matcht ein Element, falls die Benutzerschnittstelle von rechts nach links angezeigt wird. Dies wird durch das Setzen der Einstellung <code>intl.uidirection.<em>locale</em></code> (wobei <code><em>locale</em></code> die aktuelle Sprachumgebung ist) auf "rtl" bestimmt.</p>
+
+<p>Dies erlaubt Erweiterungen (und Themes) die einfache Anpassung ihrer Benutzerschnittstelle an die Bedürfnisse der Sprachumgebung des Benutzers. Dies kann sich von Fenster zu Fenster und sogar von Tab zu Tab unterscheiden. Dies ermöglicht es Erweiterungen, selbst dann zu funktionieren, wenn sie die standardmäßige Sprachumgebung des Benutzers nicht unterstützen, da sie sowohl links-nach-rechts als auch rechts-nach-links Layouts unterstützen können, ohne sich um die Besonderheiten der Sprachumgebung zu sorgen.</p>
+
+<p>Dieser Selektor funktioniert nicht korrekt unter HTML; er matcht nie, unabhängig davon, ob das UI links-nach-rechts oder rechts-nach-links ist.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref(":-moz-locale-dir(rtl)")}}</li>
+ <li><a href="/de/docs/Making_Sure_Your_Theme_Works_with_RTL_Locales">Sicherstellen, dass die Benutzerschnittstelle mit RTL-Sprachumgebungen zusammenarbeitet</a></li>
+</ul>
diff --git a/files/de/web/css/_colon_-moz-lwtheme-brighttext/index.html b/files/de/web/css/_colon_-moz-lwtheme-brighttext/index.html
new file mode 100644
index 0000000000..1b9aca10dd
--- /dev/null
+++ b/files/de/web/css/_colon_-moz-lwtheme-brighttext/index.html
@@ -0,0 +1,22 @@
+---
+title: ':-moz-lwtheme-brighttext'
+slug: 'Web/CSS/:-moz-lwtheme-brighttext'
+tags:
+  - CSS
+  - CSS Referenz
+  - Non-standard
+translation_of: 'Mozilla/Gecko/Chrome/CSS/:-moz-lwtheme-brighttext'
+---
+<div>{{CSSRef}}{{non-standard_header}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>:-moz-lwtheme-brighttext</code> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> matcht in Chrome-Dokumenten, wenn {{cssxref(":-moz-lwtheme")}} <code>true</code> ist und ein Lightweight Theme mit heller Farbe ausgewählt ist.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref(":-moz-lwtheme")}}</li>
+ <li>{{cssxref(":-moz-lwtheme-darktext")}}</li>
+ <li><a href="/de/Add-ons/Themes/Lightweight_Themes">Lightweight Themes</a></li>
+</ul>
diff --git a/files/de/web/css/_colon_-moz-lwtheme-darktext/index.html b/files/de/web/css/_colon_-moz-lwtheme-darktext/index.html
new file mode 100644
index 0000000000..d62e9ca240
--- /dev/null
+++ b/files/de/web/css/_colon_-moz-lwtheme-darktext/index.html
@@ -0,0 +1,23 @@
+---
+title: ':-moz-lwtheme-darktext'
+slug: 'Web/CSS/:-moz-lwtheme-darktext'
+tags:
+  - CSS
+  - CSS Referenz
+  - Non-standard
+  - Themes
+translation_of: 'Mozilla/Gecko/Chrome/CSS/:-moz-lwtheme-darktext'
+---
+<div>{{CSSRef}}{{non-standard_header}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>:-moz-lwtheme-darktext</code> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> matcht in Chrome-Dokumenten, wenn {{cssxref(":-moz-lwtheme")}} <code>true</code> ist und ein Lightweight Theme mit dunkler Farbe ausgewählt ist.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref(":-moz-lwtheme")}}</li>
+ <li>{{cssxref(":-moz-lwtheme-brighttext")}}</li>
+ <li><a href="/de/Add-ons/Themes/Lightweight_Themes">Lightweight Themes</a></li>
+</ul>
diff --git a/files/de/web/css/_colon_-moz-lwtheme/index.html b/files/de/web/css/_colon_-moz-lwtheme/index.html
new file mode 100644
index 0000000000..6b0c439fa7
--- /dev/null
+++ b/files/de/web/css/_colon_-moz-lwtheme/index.html
@@ -0,0 +1,26 @@
+---
+title: ':-moz-lwtheme'
+slug: 'Web/CSS/:-moz-lwtheme'
+tags:
+  - CSS
+  - CSS Referenz
+  - Lightweight themes
+  - NeedsCompatTable
+  - NeedsExample
+  - Non-standard
+  - Themes
+translation_of: 'Mozilla/Gecko/Chrome/CSS/:-moz-lwtheme'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>:-moz-lwtheme</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> matcht in Chromedokumenten, wenn das {{xulattr("lightweightthemes")}} Attribut des Wurzelelements <code>true</code> ist und ein Theme ausgewählt wurde.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref(":-moz-lwtheme-darktext")}}</li>
+ <li>{{cssxref(":-moz-lwtheme-brighttext")}}</li>
+ <li><a href="/de/Add-ons/Themes/Lightweight_Themes">Lightweight Themes</a></li>
+</ul>
diff --git a/files/de/web/css/_colon_-moz-only-whitespace/index.html b/files/de/web/css/_colon_-moz-only-whitespace/index.html
new file mode 100644
index 0000000000..ef533f52d7
--- /dev/null
+++ b/files/de/web/css/_colon_-moz-only-whitespace/index.html
@@ -0,0 +1,36 @@
+---
+title: ':-moz-only-whitespace'
+slug: 'Web/CSS/:-moz-only-whitespace'
+tags:
+  - CSS
+  - CSS Referenz
+  - NeedsCompatTable
+  - Non-standard
+  - Pseudoklasse
+translation_of: 'Web/CSS/:-moz-only-whitespace'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>:-moz-only-whitespace</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> matcht ein Element, dass keine Kindelemente hat oder leere Textknoten oder Textknoten, die nur Leerzeichen enthalten. Nur falls es Elementknoten oder Textknoten mit einem oder mehreren Zeichen innerhalb des Elements gibt, matcht das Element diese Pseudoklasse nicht mehr.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>span</var>:-moz-only-whitespace { <em>Stileigenschaften</em> }
+</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">span:-moz-only-whitespace::before {
+  background-color: lime;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;span&gt; &lt;/span&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Beispiel", "50", "20")}}</p>
diff --git a/files/de/web/css/_colon_-moz-placeholder/index.html b/files/de/web/css/_colon_-moz-placeholder/index.html
new file mode 100644
index 0000000000..2055009cf2
--- /dev/null
+++ b/files/de/web/css/_colon_-moz-placeholder/index.html
@@ -0,0 +1,120 @@
+---
+title: ':-moz-placeholder'
+slug: 'Web/CSS/:-moz-placeholder'
+tags:
+  - CSS
+  - CSS Pseudoklasse
+  - CSS Referenz
+  - Non-standard
+  - Platzhalter
+  - Selektoren
+translation_of: 'Web/CSS/:placeholder-shown'
+---
+<div class="note"><strong>Hinweis:</strong> Die :-moz-placeholder Pseudoklasse ist in Firefox 19 als veraltet markiert zugunsten des {{cssxref('::-moz-placeholder')}} Pseudoelements.</div>
+
+<div class="note"><strong>Hinweis:</strong>Die CSSWG hat beschlossen, <code>:placeholder-shown</code> einzuführen. Diese Funktionalität wird in Gecko irgendwann in der Zukunft wieder eingeführt, ohne Präfix und unter dem neuen Namen. {{bug("1069012")}}</div>
+
+<div>{{deprecated_header}}{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>:-moz-placeholder</code> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> repräsentiert ein Formularelement, das <a href="/de/docs/Web/Guide/HTML/Formulare_in_HTML#Das_placeholder_Attribut">Platzhaltertext</a> anzeigt. Dies erlaubt Webentwicklern und Themedesignern die Darstellung von Platzhaltertext anzupassen, welche standardmäßig einer hellgrauen Farbe entspricht. Dies ist in manchen Fällen unvorteilhaft, beispielsweise wenn der Hintergrundfarbe von Formularfeldern eine ähnliche Farbe zugewiesen wird. Hier kann die Pseudoklasse verwendet werden, um die Textfarbe des Platzhalters zu ändern.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Dieses Beispiel weist dem Platzhaltertext eine grüne Farbe zu.</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;Placeholder demo&lt;/title&gt;
+  &lt;style type="text/css"&gt;
+    input:-moz-placeholder {
+      color: green;
+    }
+  &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;input id="test" placeholder="Placeholder text!"&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Ergibt:</p>
+
+<p>{{EmbedLiveSample('Beispiel', '100%', 30)}}</p>
+
+<h2 id="Überlauf">Überlauf</h2>
+
+<p>Oft werden Suchfelder oder andere Formularelemente auf mobilen Geräten verkürzt dargestellt. Leider passt u. U. der Platzhaltertext eines {{HTMLElement("input")}} Elements in die Länge des Elements, was einen abgeschnittenen Text zur Folge hat. Um diese Darstellung zu verhindern, kann die CSS Eigenschaft <code>text-overflow: ellipsis!</code> verwendet werden, um den Text mit einer Ellipse abzuschließen.</p>
+
+<pre class="brush: css">input[placeholder] { text-overflow: ellipsis; }
+::-moz-placeholder { text-overflow: ellipsis; } /* firefox 19+ */
+input:-moz-placeholder { text-overflow: ellipsis; }
+</pre>
+
+<p>David Walsh hat dies in seinem Blog Eintrag <a class="external" href="http://davidwalsh.name/placeholder-overflow">"Placeholders and Overflow"</a> beschrieben.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Nicht Teil einer Spezifikation.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Implementiert in {{bug("457801")}}.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/Guide/HTML/Formulare_in_HTML">Formulare in HTML5</a></li>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{HTMLElement("textarea")}}</li>
+</ul>
diff --git a/files/de/web/css/_colon_-moz-submit-invalid/index.html b/files/de/web/css/_colon_-moz-submit-invalid/index.html
new file mode 100644
index 0000000000..af433fef51
--- /dev/null
+++ b/files/de/web/css/_colon_-moz-submit-invalid/index.html
@@ -0,0 +1,28 @@
+---
+title: ':-moz-submit-invalid'
+slug: 'Web/CSS/:-moz-submit-invalid'
+tags:
+  - CSS
+  - CSS Pseudoklasse
+  - CSS Referenz
+  - Non-standard
+translation_of: 'Web/CSS/:-moz-submit-invalid'
+---
+<p>{{Non-standard_header}}{{CSSRef}}</p>
+
+<p>Die <code>:-moz-submit-invalid</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">Pseudoklasse</a> repräsentiert jeden Submitbutton auf Formularen, deren Inhalte anhand ihrer <a href="/en-US/docs/Web/Guide/HTML/Forms_in_HTML#Constraint_Validation">Validierungsbeschränkungen</a> nicht gültig sind.</p>
+
+<p>Standardmäßig wird kein Stil zugewiesen. Dieser Stil kann dazu verwendet werden, um das Aussehen des Submitbuttons anzupassen, wenn es ungültige Formularfelder gibt.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.selectors.-moz-submit-invalid")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref(":valid")}}</li>
+ <li>{{cssxref(":invalid")}}</li>
+ <li>{{cssxref(":required")}}</li>
+ <li>{{cssxref(":optional")}}</li>
+</ul>
diff --git a/files/de/web/css/_colon_-moz-suppressed/index.html b/files/de/web/css/_colon_-moz-suppressed/index.html
new file mode 100644
index 0000000000..a14ef0e383
--- /dev/null
+++ b/files/de/web/css/_colon_-moz-suppressed/index.html
@@ -0,0 +1,17 @@
+---
+title: ':-moz-suppressed'
+slug: 'Web/CSS/:-moz-suppressed'
+tags:
+  - CSS
+  - CSS Referenz
+  - NeedsCompatTable
+  - NeedsContent
+  - NeedsExample
+  - Non-standard
+translation_of: 'Web/CSS/:-moz-suppressed'
+---
+<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}}</div>
+
+<p>Die <code>:-moz-suppressed</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> matcht Elemente, die Bilder repräsentieren, die nicht geladen werden konnten, da das Laden von Bildern von dieser Seite blockiert wurde.</p>
+
+<p>Dieser Selektor ist dazu gedacht, hauptsächlich von Themeentwicklern verwendet zu werden.</p>
diff --git a/files/de/web/css/_colon_-moz-system-metric(images-in-menus)/index.html b/files/de/web/css/_colon_-moz-system-metric(images-in-menus)/index.html
new file mode 100644
index 0000000000..d9882303fd
--- /dev/null
+++ b/files/de/web/css/_colon_-moz-system-metric(images-in-menus)/index.html
@@ -0,0 +1,19 @@
+---
+title: ':-moz-system-metric(images-in-menus)'
+slug: 'Web/CSS/:-moz-system-metric(images-in-menus)'
+tags:
+  - CSS
+  - CSS Referenz
+  - NeedsCompatTable
+  - NeedsContent
+  - NeedsExample
+  - Non-standard
+translation_of: 'Archive/Web/CSS/:-moz-system-metric/images-in-menus'
+---
+<div>{{CSSRef}}{{Non-standard_header}}{{Fx_minversion_header(3)}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>:-moz-system-metric(images-in-menus)</code> CSS <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> matcht ein Element, falls die Benutzerschnittstelle des Computers Bilder in Menüs unterstützt.</p>
+
+<p>Dieser Selektor ist hauptsächlich für die Benutzung durch Themeentwickler gedacht.</p>
diff --git a/files/de/web/css/_colon_-moz-system-metric(mac-graphite-theme)/index.html b/files/de/web/css/_colon_-moz-system-metric(mac-graphite-theme)/index.html
new file mode 100644
index 0000000000..8cd7bc0e9b
--- /dev/null
+++ b/files/de/web/css/_colon_-moz-system-metric(mac-graphite-theme)/index.html
@@ -0,0 +1,25 @@
+---
+title: ':-moz-system-metric(mac-graphite-theme)'
+slug: 'Web/CSS/:-moz-system-metric(mac-graphite-theme)'
+tags:
+  - CSS
+  - CSS Referenz
+  - NeedsCompatTable
+  - Non-standard
+translation_of: 'Archive/Web/CSS/:-moz-system-metric/mac-graphite-theme'
+---
+<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.1")}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p><code>:-moz-system-metric(mac-graphite-theme)</code> matcht ein Element, falls der Benutzer die "Graphite" Darstellung in der "Darstellung" Einstellungsseite der Mac OS X Systemeinstellungen gewählt hat.</p>
+
+<p>Dieser Selektor ist hauptsächlich dazu gedacht, von Themeentwicklern verwendet zu werden.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=332586">Demo</a></p>
+
+<h2 id="Bugzilla">Bugzilla</h2>
+
+<p>{{bug("448767")}}</p>
diff --git a/files/de/web/css/_colon_-moz-system-metric(scrollbar-end-backward)/index.html b/files/de/web/css/_colon_-moz-system-metric(scrollbar-end-backward)/index.html
new file mode 100644
index 0000000000..689598432f
--- /dev/null
+++ b/files/de/web/css/_colon_-moz-system-metric(scrollbar-end-backward)/index.html
@@ -0,0 +1,73 @@
+---
+title: ':-moz-system-metric(scrollbar-end-backward)'
+slug: 'Web/CSS/:-moz-system-metric(scrollbar-end-backward)'
+tags:
+  - CSS
+  - CSS Pseudoklasse
+  - CSS Referenz
+  - NeedsContent
+  - NeedsExample
+  - Non-standard
+translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-end-backward'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>:-moz-system-metric(scrollbar-end-backward)</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> matcht ein Element, falls die Benutzerschnittstelle des Computers einen Zurück-Button am Ende von Scrollleisten beinhaltet.</p>
+
+<p>Dieser Selektor ist hauptsächlich für die Verwendung durch Themeentwickler gedacht.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Nicht Teil einer Spezifikation.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/de/web/css/_colon_-moz-system-metric(scrollbar-end-forward)/index.html b/files/de/web/css/_colon_-moz-system-metric(scrollbar-end-forward)/index.html
new file mode 100644
index 0000000000..a7c84cd200
--- /dev/null
+++ b/files/de/web/css/_colon_-moz-system-metric(scrollbar-end-forward)/index.html
@@ -0,0 +1,73 @@
+---
+title: ':-moz-system-metric(scrollbar-end-forward)'
+slug: 'Web/CSS/:-moz-system-metric(scrollbar-end-forward)'
+tags:
+  - CSS
+  - CSS Pseudoklasse
+  - CSS Referenz
+  - NeedsContent
+  - NeedsExample
+  - Non-standard
+translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-end-forward'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>:-moz-system-metric(scrollbar-end-forward)</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> matcht ein Element, falls die Benutzerschnittstelle des Computers einen Vorwärts-Button am Ende von Scrollleisten beinhaltet.</p>
+
+<p>Dieser Selektor ist hauptsächlich für die Verwendung durch Themeentwickler gedacht.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Nicht Teil einer Spezifikation.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/de/web/css/_colon_-moz-system-metric(scrollbar-start-backward)/index.html b/files/de/web/css/_colon_-moz-system-metric(scrollbar-start-backward)/index.html
new file mode 100644
index 0000000000..0781e4b37a
--- /dev/null
+++ b/files/de/web/css/_colon_-moz-system-metric(scrollbar-start-backward)/index.html
@@ -0,0 +1,73 @@
+---
+title: ':-moz-system-metric(scrollbar-start-backward)'
+slug: 'Web/CSS/:-moz-system-metric(scrollbar-start-backward)'
+tags:
+  - CSS
+  - CSS Pseudoklasse
+  - CSS Referenz
+  - NeedsContent
+  - NeedsExample
+  - Non-standard
+translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-start-backward'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>:-moz-system-metric(scrollbar-start-backward)</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> matcht ein Element, falls die Benutzerschnittstelle des Computers einen Zurück-Button am Anfang von Scrollleisten beinhaltet.</p>
+
+<p>Dieser Selektor ist hauptsächlich für die Verwendung durch Themeentwickler gedacht.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Nicht Teil einer Spezifikation.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/de/web/css/_colon_-moz-system-metric(scrollbar-start-forward)/index.html b/files/de/web/css/_colon_-moz-system-metric(scrollbar-start-forward)/index.html
new file mode 100644
index 0000000000..01a8b77a02
--- /dev/null
+++ b/files/de/web/css/_colon_-moz-system-metric(scrollbar-start-forward)/index.html
@@ -0,0 +1,73 @@
+---
+title: ':-moz-system-metric(scrollbar-start-forward)'
+slug: 'Web/CSS/:-moz-system-metric(scrollbar-start-forward)'
+tags:
+  - CSS
+  - CSS Pseudoklasse
+  - CSS Referenz
+  - NeedsContent
+  - NeedsExample
+  - Non-standard
+translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-start-forward'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>:-moz-system-metric(scrollbar-start-forward)</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> matcht ein Element, falls die Benutzerschnittstelle des Computers einen Vorwärts-Button am Anfang von Scrollleisten beinhaltet.</p>
+
+<p>Dieser Selektor ist hauptsächlich für die Verwendung durch Themeentwickler gedacht.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Nicht Teil einer Spezifikation.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/de/web/css/_colon_-moz-system-metric(scrollbar-thumb-proportional)/index.html b/files/de/web/css/_colon_-moz-system-metric(scrollbar-thumb-proportional)/index.html
new file mode 100644
index 0000000000..cfdd764992
--- /dev/null
+++ b/files/de/web/css/_colon_-moz-system-metric(scrollbar-thumb-proportional)/index.html
@@ -0,0 +1,73 @@
+---
+title: ':-moz-system-metric(scrollbar-thumb-proportional)'
+slug: 'Web/CSS/:-moz-system-metric(scrollbar-thumb-proportional)'
+tags:
+  - CSS
+  - CSS Pseudoklasse
+  - CSS Referenz
+  - NeedsContent
+  - NeedsExample
+  - Non-standard
+translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-thumb-proportional'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>:-moz-system-metric(scrollbar-thumb-proportional)</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> matcht ein Element, falls die Benutzerschnittstelle des Computers proportionale Scrollleistenbalken verwendet; d. h. der bewegliche Balken der Scrollleiste verändert seine Größe, um die relative Größe der sichtbaren Bereichs des Dokuments zu kennzeichnen.</p>
+
+<p>Dieser Selektor ist hauptsächlich für die Verwendung durch Themeentwickler gedacht.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Nicht Teil einer Spezifikation.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/de/web/css/_colon_-moz-system-metric(touch-enabled)/index.html b/files/de/web/css/_colon_-moz-system-metric(touch-enabled)/index.html
new file mode 100644
index 0000000000..c59bc203d3
--- /dev/null
+++ b/files/de/web/css/_colon_-moz-system-metric(touch-enabled)/index.html
@@ -0,0 +1,73 @@
+---
+title: ':-moz-system-metric(touch-enabled)'
+slug: 'Web/CSS/:-moz-system-metric(touch-enabled)'
+tags:
+  - CSS
+  - CSS Pseudoklasse
+  - CSS Referenz
+  - NeedsContent
+  - NeedsExample
+  - Non-standard
+translation_of: 'Archive/Web/CSS/:-moz-system-metric/touch-enabled'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>:-moz-system-metric(touch-enabled)</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> matcht ein Element, falls das Gerät, auf welchem der Inhalt angezeigt wird, eine unterstützte Touchscreen Schnittstelle bietet.</p>
+
+<div class="note"><strong>Hinweis:</strong> Diese Pseudoklasse ist nicht für die Benutzung in Webinhalten gedacht. Stattdessen sollte die <a href="/de/docs/Web/CSS/Media_Queries/Verwendung_von_Media_Queries#-moz-touch-enabled"><code>-moz-touch-enabled</code></a> Media Query verwendet werden.</div>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Nicht Teil einer Spezifikation.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/de/web/css/_colon_-moz-system-metric(windows-default-theme)/index.html b/files/de/web/css/_colon_-moz-system-metric(windows-default-theme)/index.html
new file mode 100644
index 0000000000..2242bb293c
--- /dev/null
+++ b/files/de/web/css/_colon_-moz-system-metric(windows-default-theme)/index.html
@@ -0,0 +1,65 @@
+---
+title: ':-moz-system-metric(windows-default-theme)'
+slug: 'Web/CSS/:-moz-system-metric(windows-default-theme)'
+tags:
+  - CSS
+  - CSS Pseudoklasse
+  - CSS Referenz
+  - NeedsMobileBrowserCompatibility
+  - Non-standard
+translation_of: 'Archive/Web/CSS/:-moz-system-metric/windows-default-theme'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>:-moz-system-metric(windows-default-theme)</code> CSS <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> matcht ein Element, falls der Benutzer aktuell eines der folgenden Themes in Windows verwendet: Luna, Royale, Zune oder Aero (d. h. Vista Basic, Vista Standard oder Aero Glass). Dies schließt sowohl Windows Classic Themes als auch Drittanbieterthemes aus.</p>
+
+<p>Dieser Selektor ist hauptsächlich für die Verwendung durch Themeentwickler gedacht.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="HTML_Inhalt">HTML Inhalt</h3>
+
+<pre class="brush: html">&lt;p id="defaultThemes"&gt;
+  This paragraph should have a green background with Luna/Royale/Zune/Aero
+  Windows themes and red with other themes.
+&lt;/p&gt;
+
+&lt;p id="nonDefaultThemes"&gt;
+  This paragraph should have a green background with Windows Classic or
+  third-party themes and red with other themes.
+&lt;/p&gt;
+
+&lt;p id="notSupported"&gt;Theme detection is not supported.&lt;/p&gt;</pre>
+
+<h3 id="CSS_Inhalt">CSS Inhalt</h3>
+
+<pre class="brush: css">#defaultThemes,
+#nonDefaultThemes {
+  background-color: #FFA0A0;
+}
+
+#defaultThemes:-moz-system-metric(windows-default-theme) {
+  background-color: #A0FFA0;
+}
+
+#nonDefaultThemes:not(-moz-system-metric(windows-default-theme)) {
+  background-color: #A0FFA0;
+}
+
+#notSupported:-moz-system-metric(windows-default-theme),
+#notSupported:not(:-moz-system-metric(windows-default-theme)) {
+  display: none;
+}
+</pre>
+
+<p>{{EmbedLiveSample("Beispiel", "100%", 170)}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Nicht Teil einer Spezifikation.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.selectors.-moz-system-metric.windows-default-theme")}}
diff --git a/files/de/web/css/_colon_-moz-tree-cell-text(hover)/index.html b/files/de/web/css/_colon_-moz-tree-cell-text(hover)/index.html
new file mode 100644
index 0000000000..a1cf6af05c
--- /dev/null
+++ b/files/de/web/css/_colon_-moz-tree-cell-text(hover)/index.html
@@ -0,0 +1,20 @@
+---
+title: ':-moz-tree-cell-text(hover)'
+slug: 'Web/CSS/:-moz-tree-cell-text(hover)'
+tags:
+  - CSS
+  - CSS Referenz
+  - NeedsCompatTable
+  - NeedsContent
+  - NeedsExample
+  - Non-standard
+  - Selektor
+translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-cell-text(hover)'
+---
+<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header(1.9)}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>:-moz-tree-cell-text(hover)</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> matcht ein Element, falls sich der Mauszeiger über dem Text innerhalb einer Baumzelle befindet.</p>
+
+<p>Dieser Selektor ist hauptsächlich für die Benutzung durch Themeentwickler gedacht.</p>
diff --git a/files/de/web/css/_colon_-moz-tree-cell-text/index.html b/files/de/web/css/_colon_-moz-tree-cell-text/index.html
new file mode 100644
index 0000000000..1507e1f8c4
--- /dev/null
+++ b/files/de/web/css/_colon_-moz-tree-cell-text/index.html
@@ -0,0 +1,30 @@
+---
+title: ':-moz-tree-cell-text'
+slug: 'Web/CSS/:-moz-tree-cell-text'
+tags:
+  - CSS
+  - CSS Referenz
+  - NeedsCompatTable
+  - NeedsContent
+  - NeedsExample
+  - Non-standard
+translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-cell-text'
+---
+<p>{{Non-standard_header}}{{CSSRef}}</p>
+
+<p>Aktiviert durch das <code>properties</code> Attribut.</p>
+
+<h2 id="Zugehörige_Elemente">Zugehörige Elemente</h2>
+
+<ul>
+ <li>{{XULElem("treecell")}}</li>
+</ul>
+
+<h2 id="Stileigenschaften">Stileigenschaften</h2>
+
+<ul>
+ <li>{{cssxref("font")}}</li>
+ <li>{{cssxref("visibility")}}</li>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("text-decoration")}}</li>
+</ul>
diff --git a/files/de/web/css/_colon_-moz-tree-cell/index.html b/files/de/web/css/_colon_-moz-tree-cell/index.html
new file mode 100644
index 0000000000..f2250e3e4f
--- /dev/null
+++ b/files/de/web/css/_colon_-moz-tree-cell/index.html
@@ -0,0 +1,38 @@
+---
+title: ':-moz-tree-cell'
+slug: 'Web/CSS/:-moz-tree-cell'
+tags:
+  - CSS
+  - CSS Referenz
+  - NeedsCompatTable
+  - NeedsContent
+  - NeedsExample
+  - Non-standard
+translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-cell'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Aktiviert durch das <code>properties</code> Attribut.</p>
+
+<h2 id="Zugehörige_Elemente">Zugehörige Elemente</h2>
+
+<ul>
+ <li>{{XULElem("treecell")}}</li>
+</ul>
+
+<h2 id="Stileigenschaften">Stileigenschaften</h2>
+
+<ul>
+ <li>{{cssxref("background")}}</li>
+ <li>{{cssxref("border")}}</li>
+ <li>{{cssxref("margin")}}</li>
+ <li>{{cssxref("outline")}}</li>
+ <li>{{cssxref("padding")}}</li>
+ <li>{{cssxref("visibility")}}</li>
+</ul>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Mozilla/Tech/XUL/Tutorial/Styling_eines_Baums">Styling eines Baums</a></li>
+</ul>
diff --git a/files/de/web/css/_colon_-moz-tree-column/index.html b/files/de/web/css/_colon_-moz-tree-column/index.html
new file mode 100644
index 0000000000..927b64e482
--- /dev/null
+++ b/files/de/web/css/_colon_-moz-tree-column/index.html
@@ -0,0 +1,29 @@
+---
+title: ':-moz-tree-column'
+slug: 'Web/CSS/:-moz-tree-column'
+tags:
+  - CSS
+  - CSS Referenz
+  - NeedsCompatTable
+  - NeedsContent
+  - NeedsExample
+  - Non-standard
+translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-column'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Aktiviert durch das <code>properties</code> Attribut.</p>
+
+<h2 id="Zugehörige_Elemente">Zugehörige Elemente</h2>
+
+<ul>
+ <li>{{XULElem("treecol")}}</li>
+</ul>
+
+<h2 id="Stileigenschaften">Stileigenschaften</h2>
+
+<ul>
+ <li>{{cssxref("margin")}}</li>
+ <li>{{cssxref("visibility")}}</li>
+ <li>{{cssxref("text style")}}</li>
+</ul>
diff --git a/files/de/web/css/_colon_-moz-tree-drop-feedback/index.html b/files/de/web/css/_colon_-moz-tree-drop-feedback/index.html
new file mode 100644
index 0000000000..607b4dfe1b
--- /dev/null
+++ b/files/de/web/css/_colon_-moz-tree-drop-feedback/index.html
@@ -0,0 +1,29 @@
+---
+title: ':-moz-tree-drop-feedback'
+slug: 'Web/CSS/:-moz-tree-drop-feedback'
+tags:
+  - CSS
+  - CSS Referenz
+  - NeedsCompatTable
+  - NeedsContent
+  - NeedsExample
+  - Non-standard
+  - Pseudo-class
+translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-drop-feedback'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>Aktiviert durch das <code>properties</code> Attribut.</p>
+
+<h2 id="Zugehörige_Elemente">Zugehörige Elemente</h2>
+
+<ul>
+ <li>{{XULElem("treerow")}}</li>
+</ul>
+
+<h2 id="Stileigenschaften">Stileigenschaften</h2>
+
+<ul>
+ <li>{{cssxref("margin")}}</li>
+ <li>{{cssxref("visibility")}}</li>
+</ul>
diff --git a/files/de/web/css/_colon_-moz-tree-image/index.html b/files/de/web/css/_colon_-moz-tree-image/index.html
new file mode 100644
index 0000000000..780d66e4bf
--- /dev/null
+++ b/files/de/web/css/_colon_-moz-tree-image/index.html
@@ -0,0 +1,34 @@
+---
+title: ':-moz-tree-image'
+slug: 'Web/CSS/:-moz-tree-image'
+tags:
+  - CSS
+  - CSS Referenz
+  - NeedsCompatTable
+  - NeedsContent
+  - NeedsLiveSample
+  - Non-standard
+translation_of: 'Mozilla/Gecko/Chrome/CSS/:-moz-tree-image'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Aktiviert durch das <code>properties</code> Attribut.</p>
+
+<h2 id="Zugehörige_Elemente">Zugehörige Elemente</h2>
+
+<ul>
+ <li>{{XULElem("treeitem")}}</li>
+ <li>{{XULElem("treecell")}}</li>
+</ul>
+
+<h2 id="Stileigenschaften">Stileigenschaften</h2>
+
+<ul>
+ <li>{{cssxref("margin")}}</li>
+ <li>{{cssxref("list-style")}}</li>
+ <li>{{cssxref("position")}}</li>
+</ul>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p><a class="external" href="http://forums.mozillazine.org/viewtopic.php?t=610762&amp;sid=2aa24bf393171dd0c9bd9343b3d355c3">Bookmark icons in the Places window - Mozillazine Forum</a></p>
diff --git a/files/de/web/css/_colon_-moz-tree-indentation/index.html b/files/de/web/css/_colon_-moz-tree-indentation/index.html
new file mode 100644
index 0000000000..c53db78b8f
--- /dev/null
+++ b/files/de/web/css/_colon_-moz-tree-indentation/index.html
@@ -0,0 +1,27 @@
+---
+title: ':-moz-tree-indentation'
+slug: 'Web/CSS/:-moz-tree-indentation'
+tags:
+  - CSS
+  - CSS Referenz
+  - NeedsCompatTable
+  - NeedsContent
+  - NeedsExample
+  - Non-standard
+translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-indentation'
+---
+<p>{{CSSRef}}{{Non-standard_header}}</p>
+
+<p>Aktiviert durch das <code>properties</code> Attribut.</p>
+
+<h2 id="Zugehörige_Elemente">Zugehörige Elemente</h2>
+
+<ul>
+ <li>{{XULElem("treeitem")}}</li>
+</ul>
+
+<h2 id="Stileigenschaften">Stileigenschaften</h2>
+
+<ul>
+ <li>{{cssxref("position")}}</li>
+</ul>
diff --git a/files/de/web/css/_colon_-moz-tree-line/index.html b/files/de/web/css/_colon_-moz-tree-line/index.html
new file mode 100644
index 0000000000..b6badf8db2
--- /dev/null
+++ b/files/de/web/css/_colon_-moz-tree-line/index.html
@@ -0,0 +1,25 @@
+---
+title: ':-moz-tree-line'
+slug: 'Web/CSS/:-moz-tree-line'
+tags:
+  - CSS
+  - CSS Referenz
+  - Non-standard
+translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-line'
+---
+<p>{{Non-standard_header}}{{CSSRef}}</p>
+
+<p>Aktiviert durch das <code>properties</code> Attribut.</p>
+
+<h2 id="Zugehörige_Elemente">Zugehörige Elemente</h2>
+
+<ul>
+ <li>{{XULElem("treeitem")}}</li>
+</ul>
+
+<h2 id="Stileigenschaften">Stileigenschaften</h2>
+
+<ul>
+ <li>{{cssxref("border")}}</li>
+ <li>{{cssxref("visibility")}}</li>
+</ul>
diff --git a/files/de/web/css/_colon_-moz-tree-progressmeter/index.html b/files/de/web/css/_colon_-moz-tree-progressmeter/index.html
new file mode 100644
index 0000000000..1642c8f373
--- /dev/null
+++ b/files/de/web/css/_colon_-moz-tree-progressmeter/index.html
@@ -0,0 +1,28 @@
+---
+title: ':-moz-tree-progressmeter'
+slug: 'Web/CSS/:-moz-tree-progressmeter'
+tags:
+  - CSS
+  - CSS Referenz
+  - NeedsCompatTable
+  - NeedsContent
+  - NeedsExample
+  - Non-standard
+translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-progressmeter'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>Aktiviert, wenn das <code>type</code> Attribut auf <code>progressmeter</code> gesetzt ist.</p>
+
+<h2 id="Zugehörige_Elemente">Zugehörige Elemente</h2>
+
+<ul>
+ <li>{{XULElem("treecell")}}</li>
+</ul>
+
+<h2 id="Stileigenschaften">Stileigenschaften</h2>
+
+<ul>
+ <li>{{cssxref("margin")}}</li>
+ <li>{{cssxref("color")}}</li>
+</ul>
diff --git a/files/de/web/css/_colon_-moz-tree-row(hover)/index.html b/files/de/web/css/_colon_-moz-tree-row(hover)/index.html
new file mode 100644
index 0000000000..07400474ba
--- /dev/null
+++ b/files/de/web/css/_colon_-moz-tree-row(hover)/index.html
@@ -0,0 +1,20 @@
+---
+title: ':-moz-tree-row(hover)'
+slug: 'Web/CSS/:-moz-tree-row(hover)'
+tags:
+  - CSS
+  - CSS Pseudoklasse
+  - CSS Referenz
+  - NeedsCompatTable
+  - NeedsContent
+  - NeedsExample
+  - Non-standard
+translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-row(hover)'
+---
+<div>{{Non-standard_header}}{{CSSRef}}{{Fx_minversion_header(3)}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>:-moz-tree-row(hover)</code> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> matcht ein Element, falls der Mauszeiger sich über einer Baumzeile befindet.</p>
+
+<p>Dieser Selektor ist hauptsächlich für die Verwendung durch Themeentwickler gedacht.</p>
diff --git a/files/de/web/css/_colon_-moz-tree-row/index.html b/files/de/web/css/_colon_-moz-tree-row/index.html
new file mode 100644
index 0000000000..72c4ae0940
--- /dev/null
+++ b/files/de/web/css/_colon_-moz-tree-row/index.html
@@ -0,0 +1,48 @@
+---
+title: ':-moz-tree-row'
+slug: 'Web/CSS/:-moz-tree-row'
+tags:
+  - CSS
+  - CSS Referenz
+  - Non-standard
+translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-row'
+---
+<p>{{CSSRef}}{{Non-standard_header}}</p>
+
+<p>Das <code>::-moz-tree-row</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelement</a> wird benutzt, um Zeilen auszuwählen und Stile auf Baumzeilen anzuwenden.</p>
+
+<h2 id="Zugehörige_Elemente">Zugehörige Elemente</h2>
+
+<ul>
+ <li>{{XULElem("treerow")}}</li>
+</ul>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">treechildren::-moz-tree-row { <em>Stileigenschaften </em>}
+</pre>
+
+<h2 id="Stileigenschaften">Stileigenschaften</h2>
+
+<ul>
+ <li>{{cssxref("background")}}</li>
+ <li>{{cssxref("border")}}</li>
+ <li>{{cssxref("margin")}}</li>
+ <li>{{cssxref("outline")}}</li>
+ <li>{{cssxref("padding")}}</li>
+ <li>{{cssxref("display")}}</li>
+ <li>{{cssxref("-moz-appearance")}}</li>
+</ul>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush:css">treechildren::-moz-tree-row( foo bar )
+{
+    margin: 2%;
+}
+</pre>
+
+<p>...wo...</p>
+
+<pre class="brush:html">  &lt;treerow properties="foo"&gt;...&lt;/treerow&gt;
+</pre>
diff --git a/files/de/web/css/_colon_-moz-tree-separator/index.html b/files/de/web/css/_colon_-moz-tree-separator/index.html
new file mode 100644
index 0000000000..d204747549
--- /dev/null
+++ b/files/de/web/css/_colon_-moz-tree-separator/index.html
@@ -0,0 +1,29 @@
+---
+title: ':-moz-tree-separator'
+slug: 'Web/CSS/:-moz-tree-separator'
+tags:
+  - CSS
+  - CSS Referenz
+  - NeedsCompatTable
+  - NeedsContent
+  - NeedsExample
+  - Non-standard
+translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-separator'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>Aktiviert durch das <code>properties</code> Attribut.</p>
+
+<h2 id="Zugehörige_Elemente">Zugehörige Elemente</h2>
+
+<ul>
+ <li>{{XULElem("treeseparator")}}</li>
+</ul>
+
+<h2 id="Stileigenschaften">Stileigenschaften</h2>
+
+<ul>
+ <li>{{cssxref("border")}}</li>
+ <li>{{cssxref("display")}}</li>
+ <li>{{cssxref("-moz-appearance")}}</li>
+</ul>
diff --git a/files/de/web/css/_colon_-moz-tree-twisty/index.html b/files/de/web/css/_colon_-moz-tree-twisty/index.html
new file mode 100644
index 0000000000..3af5a302d0
--- /dev/null
+++ b/files/de/web/css/_colon_-moz-tree-twisty/index.html
@@ -0,0 +1,30 @@
+---
+title: ':-moz-tree-twisty'
+slug: 'Web/CSS/:-moz-tree-twisty'
+tags:
+  - CSS
+  - CSS Referenz
+  - Non-standard
+translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-twisty'
+---
+<p>{{CSSRef}}{{Non-standard_header}}</p>
+
+<p>Aktiviert durch das <code>properties</code> Attribut.</p>
+
+<h2 id="Zugehörige_Elemente">Zugehörige Elemente</h2>
+
+<ul>
+ <li>{{XULElem("treecell")}}</li>
+</ul>
+
+<h2 id="Styleeigenschaften">Styleeigenschaften</h2>
+
+<ul>
+ <li>{{cssxref("border")}}</li>
+ <li>{{cssxref("margin")}}</li>
+ <li>{{cssxref("padding")}}</li>
+ <li>{{cssxref("display")}}</li>
+ <li>{{cssxref("list-style")}}</li>
+ <li>{{cssxref("position")}}</li>
+ <li>{{cssxref("-moz-appearance")}}</li>
+</ul>
diff --git a/files/de/web/css/_colon_-moz-ui-invalid/index.html b/files/de/web/css/_colon_-moz-ui-invalid/index.html
new file mode 100644
index 0000000000..cc133a4d28
--- /dev/null
+++ b/files/de/web/css/_colon_-moz-ui-invalid/index.html
@@ -0,0 +1,94 @@
+---
+title: ':-moz-ui-invalid'
+slug: 'Web/CSS/:-moz-ui-invalid'
+tags:
+  - CSS
+  - CSS Referenz
+  - NeedsExample
+  - NeedsMobileBrowserCompatibility
+  - Non-standard
+  - Pseudoklasse
+translation_of: 'Web/CSS/:user-invalid'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>:-moz-ui-invalid</code> CSS <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> repräsentiert jedes validierte Formularelement, dessen Wert nicht auf dessen <a href="/de/docs/Web/Guide/HTML/Formulare_in_HTML#Beschränkungsvalidierung">Validierungsbeschränkungen</a> basiert, unter bestimmten Umständen. Diese Pseudoklasse wird anhand der folgenden Regeln angewendet:</p>
+
+<ul>
+ <li>Falls das Steuerungselement nicht den Fokus hat und der Wert ungültig ist, wende diese Pseudoklasse an.</li>
+ <li>Falls das Steuerungselement den Fokus hat und der Wert gültig war (einschließlich leer) als es den Fokus erhielt, wende die Pseudoklasse nicht an.</li>
+ <li>Falls das Steuerungselement den Fokus hat und der Wert ungültig war als es den Fokus erhielt, werte ihn bei jedem Tastendruck erneut aus.</li>
+ <li>Falls das Steuerungselement ein Pflichtfeld ist, werden die vorherigen Regeln nur angewandt, falls der Benutzer den Wert geändert hat oder versucht, das Formular abzuschicken.</li>
+</ul>
+
+<p>Das Ergebnis ist, dass wenn das Steuerungselement gültig war als der Benutzer angefangen hat, mit ihm zu interagieren, das Gültigkeitsstyling nur geändert wird, falls der Benutzer den Fokus auf ein anderes Steuerungselement setzt. Falls der Benutzer jedoch versucht, einen zuvor markierten Wert zu korrigieren, zeigt das Steuerungselement sofort an, wenn der Wert gültig wird. Auf Pflichtfelder wird die Pseudoklasse nur angewendet, falls der Benutzer diese ändert oder versucht, einen unveränderten gültigen Wert abzuschicken.</p>
+
+<p>Standardmäßig wendet Gecko einen Stil an, der ein rotes "Leuchten" (unter Vernwendung der {{cssxref("box-shadow")}} Eigenschaft) um Felder erzeugt, die diese Pseudoklasse zugewiesen haben. Siehe die {{cssxref(":invalid")}} Pseudoklasse für ein Beispiel, das zeigt, wie der Standardstil überschrieben werden kann.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Nicht Teil einer Spezifikation.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(2)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Chrome für Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref(":valid")}}</li>
+ <li>{{cssxref(":invalid")}}</li>
+ <li>{{cssxref(":required")}}</li>
+ <li>{{cssxref(":optional")}}</li>
+ <li>{{cssxref(":-moz-ui-valid")}}</li>
+</ul>
diff --git a/files/de/web/css/_colon_-moz-ui-valid/index.html b/files/de/web/css/_colon_-moz-ui-valid/index.html
new file mode 100644
index 0000000000..163ffacd79
--- /dev/null
+++ b/files/de/web/css/_colon_-moz-ui-valid/index.html
@@ -0,0 +1,94 @@
+---
+title: ':-moz-ui-valid'
+slug: 'Web/CSS/:-moz-ui-valid'
+tags:
+  - CSS
+  - CSS Pseudoklasse
+  - CSS Referenz
+  - NeedsExample
+  - NeedsMobileBrowserCompatibility
+  - Non-standard
+translation_of: 'Web/CSS/:-moz-ui-valid'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>:-moz-ui-valid</code> CSS <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> repräsentiert jedes validierte Formularelement, dessen Wert korrekt validiert basierend auf dessen <a href="/de/docs/Web/Guide/HTML/Formulare_in_HTML#Beschränkungsvalidierung">Validierungsbeschränkungen</a>.</p>
+
+<p>Diese Pseudoklasse wird anhand der folgenden Regeln angewendet:</p>
+
+<ul>
+ <li>Falls das Steuerungselement nicht den Fokus hat und der Wert gültig ist, wende diese Pseudoklasse an.</li>
+ <li>Falls das Steuerungselement den Fokus hat und der Wert gültig war (einschließlich leer) als es den Fokus erhielt, wende die Pseudoklasse an.</li>
+ <li>Falls das Steuerungselement den Fokus hat und der Wert ungültig war als es den Fokus erhielt, werte ihn bei jedem Tastendruck erneut aus.</li>
+ <li>Falls das Steuerungselement ein Pflichtfeld ist, werden die vorherigen Regeln nur angewandt, falls der Benutzer den Wert geändert hat oder versucht, das Formular abzuschicken.</li>
+</ul>
+
+<p>Das Ergebnis ist, dass wenn das Steuerungselement gültig war als der Benutzer angefangen hat, mit ihm zu interagieren, das Gültigkeitsstyling nur geändert wird, falls der Benutzer den Fokus auf ein anderes Steuerungselement setzt. Falls der Benutzer jedoch versucht, einen zuvor markierten Wert zu korrigieren, zeigt das Steuerungselement sofort an, wenn der Wert gültig wird. Pflichtfelder werden nur als ungültig markiert, falls der Benutzer diese ändert oder versucht, einen unveränderten ungültigen Wert abzuschicken.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Nicht Teil einer Spezifikation.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(2)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Chrome für Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref(":valid")}}</li>
+ <li>{{cssxref(":invalid")}}</li>
+ <li>{{cssxref(":required")}}</li>
+ <li>{{cssxref(":optional")}}</li>
+ <li>{{cssxref(":-moz-ui-valid")}}</li>
+</ul>
diff --git a/files/de/web/css/_colon_-moz-user-disabled/index.html b/files/de/web/css/_colon_-moz-user-disabled/index.html
new file mode 100644
index 0000000000..50ea47366c
--- /dev/null
+++ b/files/de/web/css/_colon_-moz-user-disabled/index.html
@@ -0,0 +1,19 @@
+---
+title: ':-moz-user-disabled'
+slug: 'Web/CSS/:-moz-user-disabled'
+tags:
+  - CSS
+  - CSS Referenz
+  - NeedsCompatTable
+  - NeedsContent
+  - NeedsExample
+  - Non-standard
+translation_of: 'Web/CSS/:-moz-user-disabled'
+---
+<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>:-moz-user-disabled</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> matcht Elemente, die Bilder repräsentieren, die nicht geladen wurden, weil Bilder durch die Benutzereinstellungen komplett deaktiviert wurden.</p>
+
+<p>Dieser Selektor ist hauptsächlich für die Verwendung durch Themeentwickler gedacht.</p>
diff --git a/files/de/web/css/_colon_-moz-window-inactive/index.html b/files/de/web/css/_colon_-moz-window-inactive/index.html
new file mode 100644
index 0000000000..88a73ced90
--- /dev/null
+++ b/files/de/web/css/_colon_-moz-window-inactive/index.html
@@ -0,0 +1,51 @@
+---
+title: ':-moz-window-inactive'
+slug: 'Web/CSS/:-moz-window-inactive'
+tags:
+  - CSS
+  - CSS Referenz
+  - 'CSS:Mozilla Erweiterungen'
+  - NeedsBrowserCompatibility
+  - NeedsLiveSample
+  - NeedsMobileBrowserCompatibility
+  - Non-standard
+translation_of: 'Web/CSS/:-moz-window-inactive'
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>:-moz-window-inactive</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> matcht jedes Element während es sich in einem inaktivem Fenster befindet.</p>
+
+<div class="note"><strong>Hinweis:</strong> Vor der Einführung dieser Pseudoklasse konnten andere Stile für Hintergrundfenster durch das Setzen eines Attributs (<code>active="true"</code>) für das Toplevel XUL Chromefenster erreicht werden. Dieses Attribut wird nicht mehr verwendet.</div>
+
+<p><code>:-moz-window-inactive</code> funktioniert auch in Inhalten von HTML Dokumenten.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Dieses Beispiel verändert die Darstellung des Hintergrunds einer Box in Abhängigkeit davon, ob das Fenster aktiv ist oder nicht.</p>
+
+<pre class="brush: html">&lt;style type="text/css"&gt;
+#mybox {
+  background: linear-gradient(to bottom, blue, cyan);
+}
+
+#mybox:-moz-window-inactive {
+  background: cyan;
+}
+&lt;/style&gt;
+
+&lt;div id="mybox" style="width:200px; height:200px;"&gt;
+  &lt;p&gt;Dies ist eine Box!&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Dieses Beispiel kann <a href="/samples/cssref/moz-window-inactive.html">als Livebeispiel betrachtet</a> werden.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Nicht Teil einer Spezifikation.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.selectors.-moz-window-inactive")}}
diff --git a/files/de/web/css/_colon_-webkit-autofill/index.html b/files/de/web/css/_colon_-webkit-autofill/index.html
new file mode 100644
index 0000000000..2030c723b3
--- /dev/null
+++ b/files/de/web/css/_colon_-webkit-autofill/index.html
@@ -0,0 +1,80 @@
+---
+title: ':-webkit-autofill'
+slug: 'Web/CSS/:-webkit-autofill'
+tags:
+  - CSS
+  - NeedsExample
+  - Non-standard
+  - Pseudoklasse
+  - Referenz
+translation_of: 'Web/CSS/:-webkit-autofill'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>:-webkit-autofill</code> CSS <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> matcht, wenn der Wert eines {{HTMLElement("input")}} Elements durch den Browser vorausgefüllt wird.</p>
+
+<p class="note"><strong>Hinweis:</strong> Die User Agent Stylesheets einiger Browser verwenden <code>!important</code> in ihren <code>:-webkit-autofill</code> Stildeklarationen, was sie durch Webseiten nicht überschreibbar macht, ohne dass auf JavaScript Hacks zurückgegriffen werden muss.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Nicht Teil einer Spezifikation.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="https://code.google.com/p/chromium/issues/detail?id=46543">Chromium Issue 46543: Auto-filled input text box yellow background highlight cannot be turned off!</a></li>
+ <li><a href="https://bugs.webkit.org/show_bug.cgi?id=66032">WebKit Bug 66032: Allow site authors to override autofilled fields' colors.</a></li>
+ <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=740979">Mozilla Bug 740979: implement <code>:-moz-autofill</code> pseudo-class on input elements with an autofilled value</a></li>
+</ul>
diff --git a/files/de/web/css/_colon_active/index.html b/files/de/web/css/_colon_active/index.html
new file mode 100644
index 0000000000..73bb8044dd
--- /dev/null
+++ b/files/de/web/css/_colon_active/index.html
@@ -0,0 +1,84 @@
+---
+title: ':active'
+slug: 'Web/CSS/:active'
+tags:
+  - CSS
+  - CSS Pseudoklasse
+  - Layout
+  - Referenz
+  - Web
+translation_of: 'Web/CSS/:active'
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">Pseudoklasse</a> <code>:active</code> entspricht jedem Element, das vom Benutzer aktiviert wurde. Beim Mauszeiger ist das die Zeitspanne, wo die Taste gedrückt gehalten wird. Deshalb wird sie meistens bei den Elementen {{HTMLElement("a")}} und {{HTMLElement("button")}} Eingesetzt, kann aber auch für jedes andere Element genutzt werden.</p>
+
+<p>Die Stile können von weiteren Pseudoklassen überschrieben werden: {{cssxref(":link")}}, {{cssxref(":hover")}} und {{cssxref(":visited")}}. Deshalb ist es wichtig, die <em>LVHA-Reihenfolge</em> einzuhalten: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p>
+
+<div class="note"><strong>Hinweis:</strong> Auf Systemen mit Mäusen mit mehreren Knöpfen, definiert CSS 3, dass die <code>:active</code> Pseudoklasse nur dem Hauptknopf zugewiesen wird; bei Mäusen für Rechtshänder ist dies typischerweise der linkeste Knopf.</div>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html; highlight:[3]">&lt;body&gt;
+    &lt;h1&gt;:active CSS selector example&lt;/h1&gt;
+    &lt;p&gt;The following link will turn lime during the time you click it and release the click: &lt;a href="#"&gt;Mozilla Developer Network&lt;/a&gt;.&lt;/p&gt;
+&lt;/body&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight:[5]">body { background-color: #ffffc9 }
+a:link { color: blue } /* unbesuchte Links */
+a:visited { color: purple } /* besuchte Links*/
+a:hover { font-weight: bold } /* Benutzer fährt mit der Maus darüber */
+a:active { color: lime } /* aktive Links */
+</pre>
+
+<div>{{EmbedLiveSample('Beispiel', 600, 140)}}</div>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Standard Wert definiert</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.selectors.active")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Weitere Link-Pseudoklassen: {{cssxref(":link")}}, {{cssxref(":visited")}} und {{cssxref(":hover")}}.</li>
+</ul>
diff --git a/files/de/web/css/_colon_default/index.html b/files/de/web/css/_colon_default/index.html
new file mode 100644
index 0000000000..5055b1a2b8
--- /dev/null
+++ b/files/de/web/css/_colon_default/index.html
@@ -0,0 +1,83 @@
+---
+title: ':default'
+slug: 'Web/CSS/:default'
+tags:
+  - CSS
+  - CSS Pseudoklasse
+  - Layout
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+  - Web
+translation_of: 'Web/CSS/:default'
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>:default</code> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> repräsentiert ein Benutzerschnittstellenelement, das das Standardelement innerhalb einer Gruppe ähnlicher Elemente darstellt.</p>
+
+<p>Zum Beispiel kann mithilfe dieser Pseudoklasse die Standardschaltfläche in einer Gruppe von Schaltflächen ausgewählt werden.</p>
+
+<p>Benutzerschnittstellenelemente, die Mehrfachauswahlen erlauben, können mehrere Standardwerte haben, um anfangs mit mehreren selektierten Einträgen angezeigt zu werden. In diesem Fall werden alle Standardwerte über die <code>:default</code> Pseudoklasse angesprochen.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">:default { <em>Stileigenschaften</em> }
+</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: css">:default
+{
+  background-color: lime;
+}
+</pre>
+
+<p>...auf folgendes HTML angewendet...</p>
+
+<pre class="brush: html"> &lt;form method="get"&gt;
+   &lt;p&gt;&lt;input type="submit" id="submit1"&gt;&lt;/p&gt;
+   &lt;p&gt;&lt;input type="submit" id="submit2"&gt;&lt;/p&gt;
+   &lt;p&gt;&lt;input type="reset"&gt;&lt;/p&gt;
+ &lt;/form&gt;
+</pre>
+
+<p>Dieses Beispiel färbt die Hintergrundfarbe für die Absendeschaltfläche des Formulars in <code>lime</code> ein.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifization</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#selector-default', ':default')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Keine Änderung.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-default', ':default')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Definiert die Semantik in Bezug auf HTML und Defines the semantic regarding HTML and Beschränkungsvalidierung.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#default-pseudo', ':default')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Keine Änderung.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 UI', '#pseudo-default', ':default')}}</td>
+   <td>{{Spec2('CSS3 UI')}}</td>
+   <td>Definiert die Pseudoklasse, aber nicht die dazugehörige Semantik.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.selectors.default")}}
diff --git a/files/de/web/css/_colon_dir/index.html b/files/de/web/css/_colon_dir/index.html
new file mode 100644
index 0000000000..160ff8063b
--- /dev/null
+++ b/files/de/web/css/_colon_dir/index.html
@@ -0,0 +1,69 @@
+---
+title: ':dir()'
+slug: 'Web/CSS/:dir'
+tags:
+  - CSS
+  - CSS Pseudoklasse
+  - Experimentell
+  - Referenz
+translation_of: 'Web/CSS/:dir'
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>:dir</code> CSS <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> matcht Elemente basierend auf der Direktionalität des in ihnen beinhalteten Texts. In HTML wird die Richtung durch das {{htmlattrxref("dir", "html")}} Attribut bestimmt. Für andere Dokumenttypen können andere Methoden zur Bestimmung der Sprache existieren.</p>
+
+<p>Beachte, dass die Verwendung der Pseudoklasse <code>:dir()</code> nicht gleichbedeutend mit den <code>[dir=…]</code> Attributselektoren ist. Letztere matchen einen Wert von {{htmlattrxref("dir", "html")}} und matchen nicht, falls kein Attribut gesetzt ist, auch wenn in diesem Fall das Elemente den Wert seines Elternelements erbt; ebenso matchen <code>[dir=rtl]</code> oder <code>[dir=ltr]</code> auch nicht den <code>auto</code> Wert, der für das <code>dir</code> Attribut verwendet werden kann. Im Gegensatz dazu matcht <code>:dir()</code> den vom User Agent berechneten, den geerbten oder den <code>auto</code> Wert.</p>
+
+<p>Auch berücksichtigt <code>:dir()</code> nur den <em>semantischen</em> Wert der Ausrichtung, der innerhalb des Dokuments definiert wird, normalerweise in HTML. Er berücksichtigt nicht die <em>Styling</em>-Ausrichtung, die durch CSS Eigenschaften wie {{cssxref("direction")}}, welche rein stilistisch sind, gesetzt wird.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css;">/* element:dir(directionality) { Stileigenschaften }
+   wobei die Richtungn ltr oder rtl ist */
+
+div:dir(ltr) { /* Stileigenschaften */ }
+span:dir(rtl) { /* Stileigenschaften */ }
+</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush:html;">&lt;div dir="rtl"&gt;
+  &lt;span&gt;test1&lt;/span&gt;
+  &lt;div dir="ltr"&gt;test2
+    &lt;div dir="auto"&gt;עִבְרִית&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>In diesem Beispiel matcht <code>:dir(rtl)</code> den obersten div, span, welcher <code>test1</code> beinhaltet und den div mit den hebräischen Zeichen. <code>:dir(ltr)</code> matcht den div, der <code>test2</code> beinhaltet.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#the-dir-pseudo', ':dir()')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.selectors.dir")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Sprachbezogene Pseudoklassen: {{cssxref(":lang")}}, {{cssxref(":dir")}}</li>
+</ul>
diff --git a/files/de/web/css/_colon_disabled/index.html b/files/de/web/css/_colon_disabled/index.html
new file mode 100644
index 0000000000..cd11062408
--- /dev/null
+++ b/files/de/web/css/_colon_disabled/index.html
@@ -0,0 +1,139 @@
+---
+title: ':disabled'
+slug: 'Web/CSS/:disabled'
+tags:
+  - CSS
+  - CSS Pseudoklasse
+  - Layout
+  - Referenz
+  - Web
+translation_of: 'Web/CSS/:disabled'
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>:disabled</code> CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> steht für alle deaktivierten Elemente. Ein Element gilt als deaktiviert, wenn es nicht aktiviert (d.h. ausgewählt, angeklickt oder mit Text gefüllt) oder fokussiert werden kann. Das Element verfügt außerdem über einen Status, in dem es aktiviert oder fokussiert werden kann.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Beispielselektoren">Beispielselektoren</h3>
+
+<dl>
+ <dt>input:disabled</dt>
+ <dd>Wählt alle deaktivierten Eingabefelder aus.</dd>
+ <dt>select.country:disabled</dt>
+ <dd>Wählt ein deaktiviertes Zielelement mit der Klasse country aus.</dd>
+</dl>
+
+<h3 id="Anwendungsbeispiel">Anwendungsbeispiel</h3>
+
+<p>Das folgende CSS:</p>
+
+<pre class="brush: css">input[type="text"]:disabled {
+  background: #ccc;
+}
+</pre>
+
+<p>Angewendet auf das folgende HTML5 Beispiel:</p>
+
+<pre class="brush: html">&lt;form action="#"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Shipping address&lt;/legend&gt;
+    &lt;input type="text" placeholder="Name"&gt;
+    &lt;input type="text" placeholder="Address"&gt;
+    &lt;input type="text" placeholder="Zip Code"&gt;
+  &lt;/fieldset&gt;
+  &lt;fieldset id="billing"&gt;
+    &lt;legend&gt;Billing address&lt;/legend&gt;
+    &lt;label for="billing_is_shipping"&gt;Same as shipping address:&lt;/label&gt;
+    &lt;input type="checkbox" onchange="javascript:toggleBilling()" checked&gt;
+    &lt;br /&gt;
+    &lt;input type="text" placeholder="Name" disabled&gt;
+    &lt;input type="text" placeholder="Address" disabled&gt;
+    &lt;input type="text" placeholder="Zip Code" disabled&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+</pre>
+
+<pre class="brush: html">&lt;form action="#"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Empfängeradresse&lt;/legend&gt;
+    &lt;input type="text" placeholder="Name"&gt;
+    &lt;input type="text" placeholder="Adresse"&gt;
+    &lt;input type="text" placeholder="PLZ"&gt;
+  &lt;/fieldset&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Rechnungsadresse&lt;/legend&gt;
+    &lt;label for="billing_is_shipping"&gt;Rechnungsadresse entspricht der Empfängeradresse:&lt;/label&gt;
+    &lt;input type="checkbox" onchange="javascript:toggleBilling()" checked&gt;
+    &lt;br /&gt;
+    &lt;input type="text" placeholder="Name" disabled&gt;
+    &lt;input type="text" placeholder="Address" disabled&gt;
+    &lt;input type="text" placeholder="Zip Code" disabled&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+</pre>
+
+<p>Mit ein wenig JavaScript:</p>
+
+<pre class="brush:js">function toggleBilling() {
+  var billingItems = document.querySelectorAll('#billing input[type="text"]');
+  for (var i = 0; i &lt; billingItems.length; i++) {
+    billingItems[i].disabled = !billingItems[i].disabled;
+  }
+}
+</pre>
+
+<p>Führt zu einem ergrautem Hintergrund aller Texteingabefelder im {{HTMLElement("fieldset")}} der Rechnungsadresse.</p>
+
+<p>{{EmbedLiveSample('Anwendungsbeispiel', '300px', '250px', '', 'Web/CSS/:disabled')}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#selector-disabled', ':disabled')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-disabled', ':disabled')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Beschreibt die Semantik von HTML und Formularen.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#enableddisabled', ':disabled')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 UI', '#pseudo-classes', ':disabled')}}</td>
+   <td>{{Spec2('CSS3 UI')}}</td>
+   <td>Verweis auf Selektors Level 3</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#enableddisabled', ':disabled')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Beschreibt die Pseudoklasse,aber nicht die dazugehörige Semantik.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+{{Compat("css.selectors.disabled")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{Cssxref(":enabled")}}</li>
+</ul>
diff --git a/files/de/web/css/_colon_empty/index.html b/files/de/web/css/_colon_empty/index.html
new file mode 100644
index 0000000000..ed47ba891a
--- /dev/null
+++ b/files/de/web/css/_colon_empty/index.html
@@ -0,0 +1,66 @@
+---
+title: ':empty'
+slug: 'Web/CSS/:empty'
+tags:
+  - CSS
+  - CSS Pseudoklasse
+  - Layout
+  - Referenz
+  - Web
+translation_of: 'Web/CSS/:empty'
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Der pseudo-Klassen Selektor <code>:empty</code> wählt Elemente aus, die über kein Kindelement verfügen. Ein Inhalt in Form von einem Text wird dabei ebenfalls als ein Kind des Elementes angesehen, Kommentare und sonstige Verarbeitungsanweisungen jedoch nicht.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">&lt;element&gt;:empty { /* Deklarationsblock */ }
+</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush:css">span:empty::before  {
+  background-color: lime;
+}
+</pre>
+
+<p>Die ersten beiden <code>span</code> Elemente sind leer, sodass der <code>:empty</code> Selektor angewendet wird. Auf die letzten drei trifft das jedoch nicht zu.</p>
+
+<pre class="brush:css">&lt;span&gt;&lt;/span&gt;
+&lt;span&gt;&lt;!-- Dieses Element wird grün dargestellt --&gt;&lt;/span&gt;
+
+&lt;span&gt; &lt;/span&gt;
+&lt;span&gt;Lorem ipsum&lt;/span&gt;
+&lt;span&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/span&gt;
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#empty-pseudo', ':empty')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#empty-pseudo', ':empty')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.selectors.empty")}}
diff --git a/files/de/web/css/_colon_enabled/index.html b/files/de/web/css/_colon_enabled/index.html
new file mode 100644
index 0000000000..1d4f3888d5
--- /dev/null
+++ b/files/de/web/css/_colon_enabled/index.html
@@ -0,0 +1,96 @@
+---
+title: ':enabled'
+slug: 'Web/CSS/:enabled'
+tags:
+  - CSS
+  - CSS Pseudoklasse
+  - Layout
+  - Referenz
+  - Web
+translation_of: 'Web/CSS/:enabled'
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>:enabled</code> CSS <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> repräsentiert alle aktivierten Elemente. Ein Element ist aktiviert, falls es aktiviert werden kann (z. B. markierte, angeklickte Elemente oder solche, die Texteingaben akzeptieren) oder die fokussiert werden können. Das Element hat auch einen deaktivierten Zustand, in welchem es nicht aktiviert werden oder fokussiert werden kann.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Der folgende Code macht die Textfarbe grün, wenn das Element aktiviert ist, und grau, wenn es deaktiviert ist. Dies erlaubt es, dem Benutzer Feedback darüber zu geben, ob mit den Elementen interagiert werden kann oder nicht.</p>
+
+<div id="Aktivierte_deaktivierte_Inputs_Beispiel">
+<p>Das folgende HTML...</p>
+
+<pre class="brush:html">&lt;form action="url_of_form"&gt;
+  &lt;label for="FirstField"&gt;First field (enabled):&lt;/label&gt; &lt;input type="text" id="FirstField" value="Lorem"&gt;&lt;br /&gt;
+  &lt;label for="SecondField"&gt;Second field (disabled):&lt;/label&gt; &lt;input type="text" id="SecondField" value="Ipsum" disabled="disabled"&gt;&lt;br /&gt;
+  &lt;input type="button" value="Submit" /&gt;
+&lt;/form&gt;  </pre>
+
+<p>...in Verwendung mit diesem CSS...</p>
+
+<pre class="brush:css; highlight:[1,4]">input:enabled {
+  color: #22AA22;
+}
+
+input:disabled {
+  color: #D9D9D9;
+}
+</pre>
+
+<p>...ergibt:</p>
+
+<div>{{EmbedLiveSample("Aktivierte_deaktivierte_Inputs_Beispiel", 550, 95)}}</div>
+
+<div>Beachte, dass die Farbe des Buttontexts auch grün ist, da der Button ebenfalls aktiviert ist.</div>
+</div>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#selector-enabled', ':enabled')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-enabled', ':enabled')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Definiert die Semantik in Bezug auf HTML und Formulare.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#enableddisabled', ':enabled')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#pseudo-classes', ':enabled')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Verknüpfung zu Selectors Level 3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#enableddisabled', ':enabled')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Definiert die Pseudoklasse, aber nicht die zugehörige Semantik.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.selectors.enabled")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref(":disabled")}}</li>
+</ul>
diff --git a/files/de/web/css/_colon_first-child/index.html b/files/de/web/css/_colon_first-child/index.html
new file mode 100644
index 0000000000..150c836d17
--- /dev/null
+++ b/files/de/web/css/_colon_first-child/index.html
@@ -0,0 +1,103 @@
+---
+title: ':first-child'
+slug: 'Web/CSS/:first-child'
+tags:
+  - CSS
+  - CSS Pseudoklasse
+  - Layout
+  - Referenz
+  - Web
+translation_of: 'Web/CSS/:first-child'
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>:first-child</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> repräsentiert jedes Element, das das erste Kindelement seines Elternelements ist.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">element:first-child { <em>Stileigenschaften</em> }
+</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Beispiel_1">Beispiel 1</h3>
+
+<h4 id="HTML_Inhalt">HTML Inhalt</h4>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;span&gt;Dieser Text ist grün!&lt;/span&gt;
+  &lt;span&gt;Dieser Text nicht. :(&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_Inhalt">CSS Inhalt</h4>
+
+<pre class="brush: css">span:first-child {
+    background-color: lime;
+}
+</pre>
+
+<p>... sieht folgendermaßen aus:</p>
+
+<p><span>{{EmbedLiveSample('Beispiel_1',300,50)}}</span></p>
+
+<h3 id="Beispiel_2_-_Verwendung_von_UL">Beispiel 2 - Verwendung von UL</h3>
+
+<h4 id="HTML_Inhalt_2">HTML Inhalt</h4>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;Eintrag 1&lt;/li&gt;
+  &lt;li&gt;Eintrag 2&lt;/li&gt;
+  &lt;li&gt;Eintrag 3&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="CSS_Inhalt_2">CSS Inhalt</h4>
+
+<pre class="brush: css">li{
+  color:red;
+}
+li:first-child{
+  color:green;
+}</pre>
+
+<p>... sieht folgendermaßen aus:</p>
+
+<p><span>{{EmbedLiveSample('Beispiel_2_-_Verwendung_von_UL',300,100)}}</span></p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#first-child-pseudo', ':first-child')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#first-child-pseudo', ':first-child')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.selectors.first-child")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref(":last-child")}}</li>
+ <li>{{cssxref(":nth-child")}}</li>
+ <li>{{cssxref(":last-of-type")}}</li>
+</ul>
diff --git a/files/de/web/css/_colon_first-of-type/index.html b/files/de/web/css/_colon_first-of-type/index.html
new file mode 100644
index 0000000000..f99d9991c7
--- /dev/null
+++ b/files/de/web/css/_colon_first-of-type/index.html
@@ -0,0 +1,76 @@
+---
+title: ':first-of-type'
+slug: 'Web/CSS/:first-of-type'
+tags:
+  - CSS
+  - CSS Pseudoklasse
+  - Layout
+  - Referenz
+  - Web
+translation_of: 'Web/CSS/:first-of-type'
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>:first-of-type</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> repräsentiert den ersten Geschwisterknoten eines Typs in der Liste der Kindknoten des Elternelements.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">element:first-of-type { <em>Stileigenschaften</em> }
+</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Dieses Beispiel zeigt, wie der universelle Selektor angenommen wird, falls kein einfacher Selektor angegeben wird.</p>
+
+<pre class="brush: css">div :first-of-type {
+  background-color: lime;
+}</pre>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;span&gt;Dieser Text kommt zuerst!&lt;/span&gt;
+  &lt;span&gt;Dieser Text nicht. :(&lt;/span&gt;
+  &lt;span&gt;Was ist mit diesem &lt;em&gt;verschachtelten Element&lt;/em&gt;?&lt;/span&gt;
+  &lt;strike&gt;Dies ist ein weiterer Typ.&lt;/strike&gt;
+  &lt;span&gt;Dieser leider nicht...&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<p id="...will_result_in.3A">...ergibt:</p>
+
+<div>{{EmbedLiveSample('Beispiel','100%', '120')}}</div>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#first-of-type-pseudo', ':first-of-type')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#first-of-type-pseudo', ':first-of-type')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.selectors.first-of-type")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{Cssxref(":nth-of-type")}}, {{Cssxref(":last-of-type")}}</li>
+</ul>
diff --git a/files/de/web/css/_colon_first/index.html b/files/de/web/css/_colon_first/index.html
new file mode 100644
index 0000000000..2af8daa43a
--- /dev/null
+++ b/files/de/web/css/_colon_first/index.html
@@ -0,0 +1,65 @@
+---
+title: ':first'
+slug: 'Web/CSS/:first'
+tags:
+  - CSS
+  - CSS Pseudoklasse
+  - Layout
+  - NeedsLiveSample
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+  - Web
+translation_of: 'Web/CSS/:first'
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>:first</code> {{cssxref("@page")}} <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> beschreibt das Styling der ersten Seite, wenn ein Dokument gedruckt wird.</p>
+
+<div class="note"><strong>Hinwweis:</strong> Nicht alle CSS Eigenschaften sind veränderbar. Es können nur Ränder, <a href="https://de.wikipedia.org/wiki/Hurenkind_und_Schusterjunge#Schusterjunge">Schusterjungen</a>, <a href="https://de.wikipedia.org/wiki/Hurenkind_und_Schusterjunge#Hurenkind">Hurenkinder</a> und Seitenumbrüche innerhalb des Dokuments geändert werden. Alle anderen CSS Eigenschaften werden ignoriert.</div>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: css">@page :first {
+  margin: 2in 3in;
+}
+</pre>
+
+<div class="note"><strong>Hinwweis:</strong> Nur die absoluten Längeneinheiten können verwendet werden, wenn ein Rand definiert wird. Bitte schaue dir die Seite über <a href="/de/docs/Web/CSS/length#Absolute_L.C3.A4ngenangaben">Längen</a> für mehr Informationen an.</div>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Paged Media', '#left-right-first', ':first')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'page.html#page-selectors', ':first')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.selectors.first")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{Cssxref("@page")}}</li>
+ <li>{{Cssxref(":left")}}</li>
+ <li>{{Cssxref(":right")}}</li>
+</ul>
diff --git a/files/de/web/css/_colon_focus/index.html b/files/de/web/css/_colon_focus/index.html
new file mode 100644
index 0000000000..6d0fb0aac5
--- /dev/null
+++ b/files/de/web/css/_colon_focus/index.html
@@ -0,0 +1,79 @@
+---
+title: ':focus'
+slug: 'Web/CSS/:focus'
+tags:
+  - CSS
+  - CSS Pseudoklasse
+  - Layout
+  - Referenz
+  - Selektoren
+  - Web
+translation_of: 'Web/CSS/:focus'
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <a href="/de/docs/Web/CSS">CSS </a><a href="/de/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">Pseudoklasse</a> <code>:focus</code> steht für Elemente, welche mit einem Eingabegerät, wie z. B. der Tastatur, fokusiert wurden.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>element</var>:focus { ... }</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: css">.first-name:focus {
+  color: red;
+}
+
+.last-name:focus {
+  color: lime;
+}</pre>
+
+<pre class="brush: html">&lt;input class="first-name" value="Dieser Text wird rot, wenn das Textfeld den Fokus erhält"&gt;
+&lt;input class="last-name" value="Dieser Text wird grün, wenn das Textfeld den Fokus erhält"&gt;</pre>
+
+<p>{{EmbedLiveSample('Beispiele', '100%', 40)}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#focus-pseudo', ':focus')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':focus')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':focus')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{Compat("css.selectors.focus")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<p> </p>
+
+<ul>
+ <li>{{cssxref(":focus-within")}}</li>
+</ul>
+
+<p> </p>
diff --git a/files/de/web/css/_colon_fullscreen/index.html b/files/de/web/css/_colon_fullscreen/index.html
new file mode 100644
index 0000000000..8d10c1176d
--- /dev/null
+++ b/files/de/web/css/_colon_fullscreen/index.html
@@ -0,0 +1,81 @@
+---
+title: ':fullscreen'
+slug: 'Web/CSS/:fullscreen'
+tags:
+  - CSS
+  - CSS Mozilla Erweiterungen
+  - CSS Pseudoklasse
+  - Experimentell
+  - Layout
+  - NeedsLiveSample
+  - Referenz
+  - Vollbild
+  - Web
+translation_of: 'Web/CSS/:fullscreen'
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> <code>:fullscreen </code>betrifft jedes Element, welches sich im <a href="/de/docs/Web/Guide/API/DOM/Verwendung_des_Vollbildmodus">Vollbildmodus</a> befindet. Sie selektiert nicht nur das Toplevelelement, sondern den ganzen Stapel an Elementen.</p>
+
+<div class="note">Das W3C empfiehlt das zusammengeschriebene <code>:fullscreen</code>, d. h. ohne Bindestrich, jedoch haben sowohl Gecko als auch Webkit eine Präfixversion mit Bindestrich implementiert : <code>:-webkit-full-screen</code> und <code>:-moz-full-screen</code>. Microsoft Edge und Internet Explorer verwenden die Syntaxen <code>:fullscreen</code> und <code>:-ms-fullscreen</code>.</div>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: css">*:fullscreen {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  margin: 0;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}</pre>
+
+<pre class="brush: css">h1:fullscreen {
+  border: 1px solid #f00;
+}</pre>
+
+<pre class="brush: css">p:fullscreen {
+  font-size: 200%;
+}</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Fullscreen', '#:fullscreen-pseudo-class', ':fullscreen')}}</td>
+   <td>{{Spec2('Fullscreen')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.selectors.fullscreen")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/Guide/API/DOM/Verwendung_des_Vollbildmodus">Vollbildmodus</a></li>
+ <li>{{domxref("element.mozRequestFullScreen()")}}</li>
+ <li>{{domxref("document.mozCancelFullScreen()")}}</li>
+ <li>{{domxref("document.mozFullScreen")}}</li>
+ <li>{{domxref("document.mozFullScreenElement")}}</li>
+ <li>{{domxref("document.mozFullScreenEnabled")}}</li>
+ <li>{{HTMLAttrXRef("allowfullscreen", "iframe")}}</li>
+ <li>{{cssxref(":-moz-full-screen-ancestor")}}</li>
+</ul>
diff --git a/files/de/web/css/_colon_hover/index.html b/files/de/web/css/_colon_hover/index.html
new file mode 100644
index 0000000000..a26cfdbed9
--- /dev/null
+++ b/files/de/web/css/_colon_hover/index.html
@@ -0,0 +1,122 @@
+---
+title: ':hover'
+slug: 'Web/CSS/:hover'
+tags:
+  - CSS
+  - CSS Pseudoklasse
+  - Layout
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+  - Web
+translation_of: 'Web/CSS/:hover'
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>:hover</code> CSS <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> wird verwendet, wenn der Nutzer einen Link auswählt, auch ohne ihn zu aktivieren. Dieser Stil kann von weiteren Link-abhängigen Pseudoklassen überschrieben werden: {{ cssxref(":link") }}, {{ cssxref(":visited") }} und {{ cssxref(":active") }}. Um nur entsprechende Links auszuwählen, ist es wichtig die <code>:hover</code> Regel nach den <code>:link</code> und <code>:visited</code> Regeln, aber vor der <code>:active</code> Regel zu erwähnen, wie beschrieben in der <em>LVHA-Reihenfolge</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p>
+
+<p>Die <code>:hover</code> Pseudoklasse kann auf alle <a href="/de/docs/Web/CSS/Pseudo-elements" title="Pseudo-classes">Pseudoelemente</a> angewendet werden. {{experimental_inline}}</p>
+
+<p>Webbrowser (User-Agents) wie Firefox, Internet Explorer, Safari, Opera oder Chrome, wenden den zugehörigen Stil an, wenn der Cursor (Mauszeiger) über ein Element fährt.</p>
+
+<div class="note"><strong>Hinweis</strong>: Auf Touchscreens ist <code>:hover</code> problematisch oder unmöglich. Abhängig vom Browser, tritt die <code>:hover</code> Pseudoklasse niemals, nur für einen kurzen Moment nach dem Berühren in Kraft oder bleibt aktiviert, auch wenn der Nutzer das Element nicht mehr berührt, bis er ein anderes Element berührt. Weil Touchscreen-Geräte oft gleich sind, ist es wichtig für Webentwickler, keinen Inhalt zu haben, der nur über die <code>:hover</code> Pseudoklasse aufrufbar ist, da es für Nutzer von solchen Geräten schwierig oder unmöglich ist, diesen Inhalt aufzurufen.</div>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: css">:link:hover { outline: dotted red; }
+
+.foo:hover { background: gold; }
+</pre>
+
+<h3 id="Dropdown_Menü">Dropdown Menü</h3>
+
+<p>Mit der <code>:hover</code> Pseudoklasse kann man komplexe Algorithmen in CSS erstellen. Dies ist eine verbreitete Methode, die genutzt wird, um beispielsweise Dropdown Menüs nur mit CSS (ohne <a href="/de/docs/Web/JavaScript" title="en/JavaScript">JavaScript</a>) zu erstellen. Die Idee dieser Methode ist das Erstellen einer Regel, wie die Folgende:</p>
+
+<pre class="brush: css">div.menu-bar ul ul {
+  display: none;
+}
+
+div.menu-bar li:hover &gt; ul {
+  display: block;
+}
+</pre>
+
+<p>Sie kann auf folgende HTML Struktur angewendet werden:</p>
+
+<pre class="brush: html">&lt;div class="menu-bar"&gt;
+  &lt;ul&gt;
+    &lt;li&gt;
+      &lt;a href="example.html"&gt;Menü&lt;/a&gt;
+      &lt;ul&gt;
+        &lt;li&gt;
+          &lt;a href="example.html"&gt;Link&lt;/a&gt;
+        &lt;/li&gt;
+        &lt;li&gt;
+          &lt;a class="menu-nav" href="example.html"&gt;Untermenü&lt;/a&gt;
+          &lt;ul&gt;
+            &lt;li&gt;
+              &lt;a class="menu-nav" href="example.html"&gt;Untermenü&lt;/a&gt;
+              &lt;ul&gt;
+                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
+              &lt;/ul&gt;
+            &lt;/li&gt;
+            &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
+          &lt;/ul&gt;
+        &lt;/li&gt;
+      &lt;/ul&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Sieh dir unser <a class="internal" href="/@api/deki/files/6238/=css_dropdown_menu.html" title="css_dropdown_menu.html">CSS-basiertes Dropdown Menü Beispiel</a> für eine mögliche Lösung an.</p>
+
+<h3 id="Galerie_mit_Vollbild-Bildern_und_Vorschauen">Galerie mit Vollbild-Bildern und Vorschauen</h3>
+
+<p>Man kann die <code>:hover</code> Pseudoklasse nutzen, um eine Bildergalerie mit Vollbild-Bildern, welche nur angezeigt werden, wenn der Nutzer mit der Maus über die Vorschau fährt, zu erstellen. Sieh dir dafür <a class="internal" href="/@api/deki/files/6247/=css-gallery.zip" title="css-gallery.zip">diese Demo </a>an.</p>
+
+<div class="note"><strong>Hinweis:</strong> Für einen analogen Effekt, der jedoch auf der {{ cssxref(":checked") }} Pseudoklasse basiert (angewendet auf Auswahlfelder), sieh dir <a class="internal" href="/@api/deki/files/6268/=css-checked-gallery.zip" title="css-checked-gallery.zip">diese Demo </a>an, übernommen von der {{ cssxref(":checked") }} Seite.</div>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#hover', ':hover') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>Kann auf jedes Pseudoelement angewendet werden.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td>Keine wesentlichen Veränderungen</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.selectors.hover")}}
+
+<p>Siehe auch:</p>
+
+<ul>
+ <li><a href="https://code.google.com/p/chromium/issues/detail?id=370155">Chromium bug #370155: Don't make <code>:hover</code> sticky on tap on sites that set a mobile viewport</a></li>
+ <li><a href="https://code.google.com/p/chromium/issues/detail?id=306581">Chromium bug #306581: Immediately show hover and active states on touch when page isn't scrollable.</a></li>
+</ul>
diff --git a/files/de/web/css/_colon_in-range/index.html b/files/de/web/css/_colon_in-range/index.html
new file mode 100644
index 0000000000..0cdd2fb178
--- /dev/null
+++ b/files/de/web/css/_colon_in-range/index.html
@@ -0,0 +1,117 @@
+---
+title: ':in-range'
+slug: 'Web/CSS/:in-range'
+tags:
+  - CSS
+  - CSS Pseudoklasse
+  - Layout
+  - Referenz
+  - Web
+translation_of: 'Web/CSS/:in-range'
+---
+<div>{{CSSRef}}</div>
+
+<p>Die <strong><code>:in-range</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">Pseudoklasse</a> entspricht einem {{htmlelement("input")}} Element, dessen aktueller Wert innerhalb eines bestimmten Bereichs liegt. Dieser Bereich wird durch die {{htmlattrxref("min", "input")}} und {{htmlattrxref("max","input")}} Attribute festgelegt.</p>
+
+<pre class="brush: css no-line-numbers">/* Wählt jedes &lt;input&gt; Element aus, aber nur wenn es eine
+   Begrenzung festlegt, und sein Wert innerhalb dieser
+   Begrenzung liegt */
+input:in-range {
+  background-color: rgba(0, 255, 0, 0.25);
+}</pre>
+
+<p>Diese Pseudoklasse ist nützlich um den Nutzer visuell darauf hinzuweisen, dass der aktuelle Wert des Feldes innerhalb der erlaubten Begrenzungen liegt.</p>
+
+<div class="note"><strong>Note: </strong>Diese Pseudoklasse gilt nur für Elemente, die eine Begrenzung haben. Wenn es eine solche Begrenzung nicht gibt, kann der Wert des Elements weder "in-range" (innerhalb der Begrenzung) noch "out-of-range" (außerhalb der Begrenzung) sein.</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">Beispiel</h2>
+
+<div id="example">
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;form action="" id="form1"&gt;
+  &lt;ul&gt;Werte zwischen 1 und 10 sind gültig.
+    &lt;li&gt;
+      &lt;input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12"&gt;
+      &lt;label for="value1"&gt;Der Wert ist &lt;/label&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css;">li {
+  list-style: none;
+  margin-bottom: 1em;
+}
+
+input {
+  border: 1px solid black;
+}
+
+input:in-range {
+  background-color: rgba(0, 255, 0, 0.25);
+}
+
+input:out-of-range {
+  background-color: rgba(255, 0, 0, 0.25);
+  border: 2px solid red;
+}
+
+input:in-range + label::after {
+  content: 'okay.';
+}
+
+input:out-of-range + label::after {
+  content: 'außerhalb der Begrenzung!';
+}</pre>
+
+<h3 id="Result">Result</h3>
+</div>
+
+<div>{{EmbedLiveSample('Example', 600, 140)}}</div>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-in-range', ':in-range')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Definiert wann <code>:in-range</code> HTML-Elementen entspricht.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#in-range-pseudo', ':in-range')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Standard Wert definiert.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+<div>
+<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wurde aus strukturierten Daten generiert. Wenn du dazu beitragen möchtes gehe auf <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und sende uns einen Pull Request.</div>
+
+<p>{{Compat("css.selectors.in-range")}}</p>
+</div>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{cssxref(":out-of-range")}}</li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></li>
+</ul>
diff --git a/files/de/web/css/_colon_indeterminate/index.html b/files/de/web/css/_colon_indeterminate/index.html
new file mode 100644
index 0000000000..8f229baed2
--- /dev/null
+++ b/files/de/web/css/_colon_indeterminate/index.html
@@ -0,0 +1,74 @@
+---
+title: ':indeterminate'
+slug: 'Web/CSS/:indeterminate'
+tags:
+  - CSS
+  - CSS Pseudoklasse
+  - Layout
+  - Referenz
+  - Selektoren
+  - Web
+translation_of: 'Web/CSS/:indeterminate'
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>:indeterminate</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> repräsentiert alle <code>&lt;input type="checkbox"&gt;</code> Elements, deren <code>indeterminate</code> <a href="/de/docs/Web/API">DOM</a> Eigenschaft durch JavaScript auf <code>true</code> gesetzt wurde. Darüber hinaus wird sie in manchen Browsern dazu verwendet, {{HTMLElement("progress")}} Elemente in einem Zwischenstatus zu finden.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: css">input, span {
+  background: red;
+}
+
+:indeterminate, :indeterminate + span {
+  background: limegreen;
+}
+</pre>
+
+<pre class="brush: html">&lt;input type="checkbox"&gt; &lt;span&gt;Der Inhalt dieses Absatzes hat eine grüne Hintergrundfarbe.&lt;/span&gt;
+</pre>
+
+<pre class="brush: js">document.getElementsByTagName("input")[0].indeterminate = true;
+</pre>
+
+<p>{{EmbedLiveSample('Beispiel', '100%', 50)}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#selector-indeterminate', ':indeterminate')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-indeterminate', ':indeterminate')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Definiert die Semantik bezüglich HTML und Begrenzungsvalidierung.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#indeterminate', ':indeterminate')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 UI', '#indeterminate', ':indeterminate')}}</td>
+   <td>{{Spec2('CSS3 UI')}}</td>
+   <td>Definiert die Pseudoklasse, aber nicht die dazugehörige Semantik.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.selectors.indeterminate")}}
diff --git a/files/de/web/css/_colon_invalid/index.html b/files/de/web/css/_colon_invalid/index.html
new file mode 100644
index 0000000000..4dc3873fd3
--- /dev/null
+++ b/files/de/web/css/_colon_invalid/index.html
@@ -0,0 +1,134 @@
+---
+title: ':invalid'
+slug: 'Web/CSS/:invalid'
+tags:
+  - CSS
+  - CSS Pseudoelement
+  - Layout
+  - Referenz
+  - Web
+translation_of: 'Web/CSS/:invalid'
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <a href="/de/CSS/Pseudo-classes" title="Pseudoklassen">Pseudoklasse</a> <code>:invalid </code>entspricht jedem {{ HTMLElement("input") }}- oder {{ HTMLElement("form") }}-Element, dessen Inhalt nicht gemäß der Eigenschaften des Eingabeelements <a href="/en/HTML/HTML5/Constraint_validation" title="en/HTML/HTML5/Constraint_validation">validiert</a> werden kann. Dadurch kann die Darstellung ungültiger Felder auf einfache Weise angepasst werden, damit Benutzer*innen fehlerhafte Eingaben gut identifizieren und korrigieren können.</p>
+
+<p>Standardmäßig wendet Gecko keinen Stil auf die Pseudoklasse <code>:invalid</code> an. Jedoch wendet es einen Stil (ein rotes "Leuchten" mithilfe der Eigenschaft {{ Cssxref("box-shadow") }}) auf die Pseudoklasse {{ Cssxref(":-moz-ui-invalid") }} an, der einen Teil der Fälle für <code>:invalid</code> betrifft.</p>
+
+<p>Das Leuchten kann mit dem folgenden CSS ausgeschaltet werden. Es kann auch komplett überschrieben werden, um das Aussehen von ungültigen Feldern anzupassen.</p>
+
+<pre class="brush: css">:invalid {
+  box-shadow: none;
+}
+
+:-moz-submit-invalid {
+  box-shadow: none;
+}
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+</pre>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Anmerkungen">Anmerkungen</h2>
+
+<h4 id="Radio_Buttons">Radio Buttons</h4>
+
+<p>Wenn in einer Gruppe von Radio Buttons (d.i., wenn alle den gleichen Wert für ihr <code>name</code>-Attribut besitzen) kein Radio Button ausgewählt ist und mindestens einer die Eigenschaft <code>required</code> hat, wird die Pseudoklasse <code>:invalid</code> auf alle Radio Buttons der Gruppe angewendet.</p>
+
+<h2 id="Example2" name="Example2">Beispiel</h2>
+
+<p>Dieses Beispiel zeigt ein einfaches Formular, dessen gültige Elemente grün und dessen ungültige Elemente rot gefärbt werden.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label for="url_input"&gt;Geben Sie eine URL ein:&lt;/label&gt;
+  &lt;input type="url" id="url_input" /&gt;
+  &lt;br /&gt;
+  &lt;br /&gt;
+  &lt;label for="email_input"&gt;Geben Sie eine E-Mail-Adresse ein:&lt;/label&gt;
+  &lt;input type="email" id="email_input" required/&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input:invalid {
+  background-color: #ffdddd;
+}
+
+form:invalid {
+  border: 5px solid #ffdddd;
+}
+
+input:valid {
+  background-color: #ddffdd;
+}
+
+form:valid {
+  border: 5px solid #ddffdd;
+}
+
+input:required {
+  border-color: #800000;
+  border-width: 3px;
+}
+
+input:required:invalid {
+  border-color: #C00000;
+}</pre>
+
+<p>{{ EmbedLiveSample('Example2',600,150) }}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('HTML WHATWG', '#selector-invalid', ':invalid') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>Keine Änderung.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C', '#selector-invalid', ':invalid') }}</td>
+   <td>{{ Spec2('HTML5 W3C') }}</td>
+   <td>Definiert Semantik bezogen auf HTML und Überprüfung der Einschränkungen.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#validity-pseudos', ':invalid') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>Keine Änderung.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Basic UI', '#pseudo-validity', ':invalid') }}</td>
+   <td>{{ Spec2('CSS3 Basic UI') }}</td>
+   <td>Definiert die Pseudoklasse, aber nicht die dazugehörige Semantik.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<p>{{Compat("css.selectors.invalid")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{ cssxref(":valid") }}</li>
+ <li>{{ cssxref(":-moz-submit-invalid") }}</li>
+ <li>{{ cssxref(":required") }}</li>
+ <li>{{ cssxref(":optional") }}</li>
+</ul>
diff --git a/files/de/web/css/_colon_lang/index.html b/files/de/web/css/_colon_lang/index.html
new file mode 100644
index 0000000000..4bf15acd0f
--- /dev/null
+++ b/files/de/web/css/_colon_lang/index.html
@@ -0,0 +1,85 @@
+---
+title: ':lang'
+slug: 'Web/CSS/:lang'
+tags:
+  - CSS
+  - CSS Pseudoklasse
+  - Layout
+  - Referenz
+  - Web
+translation_of: 'Web/CSS/:lang'
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>:lang</code> CSS <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> matcht Elemente anhand der Sprache, in der das Element ist. In HTML wird die Sprache durch eine Kombination aus <code>lang</code> Attribut, dem {{HTMLElement("meta")}} Element und möglicherweise durch Informationen durch das Protokoll (wie z. B. HTTP Header). Für andere Dokumenttypen können andere Dokumentmethoden zur Bestimmung der Sprache existieren.</p>
+
+<p>Akzeptierte <code>language-code</code> Strings werden in der <a href="/de/docs/Web/HTML">HTML</a> 4.0 Specification definiert.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>element</var>:lang(language-code) { <em>Stileigenschaften</em> }
+</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>In diesem Beispiel wird der <code>lang</code> Selektor dazu verwendet, um mit Hilfe von <a href="/de/docs/Web/CSS/Kindselektoren">Kindselektoren</a> das Elternelement eines {{HTMLElement("q")}} Elements zu matchen. Es ist nicht dazu gedacht, den einzigen oder sogar den korrekten (was vom Dokumenttyp abhängt) Weg aufzuzeigen, um dies umzusetzen. Beachte, Unicodewerte werden verwendet, um spezielle Anführungszeichen anzugeben.</p>
+
+<pre class="brush: css">:lang(en) &gt; q { quotes: '\201C' '\201D' '\2018' '\2019'; }
+:lang(fr) &gt; q { quotes: '« ' ' »'; }
+:lang(de) &gt; q { quotes: '»' '«' '\2039' '\203A'; }
+</pre>
+
+<p>... wo ...</p>
+
+<pre class="brush: html">  &lt;div lang="fr"&gt;&lt;q&gt;Dieses französische Anführungszeichen hat ein &lt;q&gt;verschachteltes&lt;/q&gt; Zitat.&lt;/q&gt;&lt;/div&gt;
+  &lt;div lang="de"&gt;&lt;q&gt;Dieses deutsche Anführungszeichen hat ein &lt;q&gt;verschachteltes&lt;/q&gt; Zitat.&lt;/q&gt;&lt;/div&gt;
+  &lt;div lang="en"&gt;&lt;q&gt;Dieses englische Anführungszeichen hat ein &lt;q&gt;verschachteltes&lt;/q&gt; Zitat.&lt;/q&gt;&lt;/div&gt;
+</pre>
+
+<p>... wird dargestellt als ...</p>
+
+<p>{{EmbedLiveSample('Beispiel', '100%', 100)}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#lang-pseudo', ':lang()')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#lang-pseudo', ':lang()')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Keine wesentliche Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#lang', ':lang()')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.selectors.lang")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Sprachbezogene Pseudoklassen: {{cssxref(":lang")}}, {{cssxref(":dir")}}</li>
+ <li><a href="/de/docs/Web/API/HTMLElement/lang">Spracheigenschaft</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/REC-html40/struct/dirlang.html#h-8.1.1">W3C HTML 4: Sprachcodes</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59132807">W3C DOM Level 2 HTML: lang</a></li>
+</ul>
diff --git a/files/de/web/css/_colon_last-child/index.html b/files/de/web/css/_colon_last-child/index.html
new file mode 100644
index 0000000000..368ad9a58a
--- /dev/null
+++ b/files/de/web/css/_colon_last-child/index.html
@@ -0,0 +1,74 @@
+---
+title: ':last-child'
+slug: 'Web/CSS/:last-child'
+tags:
+  - CSS
+  - CSS Pseudoklasse
+  - Layout
+  - Referenz
+  - Web
+translation_of: 'Web/CSS/:last-child'
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>:last-child</code> CSS <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> repräsentiert jedes Element, das das letzte Kindelement seines Elternelements ist.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">element:last-child { <em>Stileigenschaften</em> }</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="HTML_Inhalt">HTML Inhalt</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;Dieser Punkt ist nicht grün.&lt;/li&gt;
+  &lt;li&gt;Auch nicht dieser.&lt;/li&gt;
+  &lt;li&gt;Dieser Punkt ist es! :)&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="CSS_Inhalt">CSS Inhalt</h3>
+
+<pre class="brush: css">li:last-child {
+  background-color: lime;
+}</pre>
+
+<p>{{EmbedLiveSample('Beispiel', '100%', 100)}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#last-child', ':last-child')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#last-child', ':last-child')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Ursprüngliche Definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.selectors.last-child")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref(":first-child")}}</li>
+ <li>{{cssxref(":nth-child")}}</li>
+ <li>{{cssxref(":last-of-type")}}</li>
+</ul>
diff --git a/files/de/web/css/_colon_last-of-type/index.html b/files/de/web/css/_colon_last-of-type/index.html
new file mode 100644
index 0000000000..267747715f
--- /dev/null
+++ b/files/de/web/css/_colon_last-of-type/index.html
@@ -0,0 +1,86 @@
+---
+title: ':last-of-type'
+slug: 'Web/CSS/:last-of-type'
+tags:
+  - CSS
+  - CSS Pseudoklasse
+  - Layout
+  - Referenz
+  - Web
+translation_of: 'Web/CSS/:last-of-type'
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>:last-of-type</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> repräsentiert den letzten Geschwisterknoten eines Typs in der Liste von Kindknoten des Elternelements.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>element</var>:last-of-type { <em>Stileigenschaften</em> }
+</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Um das letzte {{HTMLElement("em")}} Element innerhalb eines {{HTMLElement("p")}} Elements auszuwählen, kann folgender Code verwendet werden:</p>
+
+<pre class="brush: css">p em:last-of-type {
+  color: lime;
+}
+</pre>
+
+<pre class="brush: html">&lt;p&gt;
+  &lt;em&gt;Ich bin nicht grün. :(&lt;/em&gt;
+  &lt;strong&gt;Ich bin nicht grün. :(&lt;/strong&gt;
+  &lt;em&gt;Ich bin grün! :D&lt;/em&gt;
+  &lt;strong&gt;Ich bin auch nicht grün. :(&lt;/strong&gt;
+&lt;/p&gt;
+
+&lt;p&gt;
+  &lt;em&gt;Ich bin nicht grün. :(&lt;/em&gt;
+  &lt;span&gt;&lt;em&gt;Ich bin grün!&lt;/em&gt;&lt;/span&gt;
+  &lt;strong&gt;Ich bin nicht grün. :(&lt;/strong&gt;
+  &lt;em&gt;Ich bin grün! :D&lt;/em&gt;
+  &lt;span&gt;&lt;em&gt;Ich bin auch grün!&lt;/em&gt; &lt;strike&gt; Ich bin nicht grün. &lt;/strike&gt;&lt;/span&gt;
+  &lt;strong&gt;Ich bin auch nicht grün. :(&lt;/strong&gt;
+&lt;/p&gt;</pre>
+
+<p id="...will_result_in.3A">...entspricht:</p>
+
+<div>{{EmbedLiveSample('Beispiel','100%', '120')}}</div>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#last-of-type-pseudo', ':last-of-type')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#last-of-type-pseudo', ':last-of-type')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.selectors.last-of-type")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{Cssxref(":nth-last-of-type")}}</li>
+ <li>{{Cssxref(":first-of-type")}}</li>
+ <li>{{Cssxref(":nth-of-type")}}</li>
+</ul>
diff --git a/files/de/web/css/_colon_link/index.html b/files/de/web/css/_colon_link/index.html
new file mode 100644
index 0000000000..0ac0cb3d3d
--- /dev/null
+++ b/files/de/web/css/_colon_link/index.html
@@ -0,0 +1,70 @@
+---
+title: ':link'
+slug: 'Web/CSS/:link'
+tags:
+  - CSS
+  - CSS Pseudoklasse
+  - Layout
+  - Referenz
+  - Web
+translation_of: 'Web/CSS/:link'
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>:link</code> <a href="/de/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">Pseudoklasse</a> erlaubt es, Links innerhalb von Elementen auszuwählen. Dies wählt jeden Link aus, der bisher noch nicht besucht wurde, auch die, die bereits durch andere Selektoren anderer linkbezogener Pseudoklassen wie {{cssxref(":hover")}}, {{cssxref(":active")}} oder {{cssxref(":visited")}} gestylt wurden. Um nur die unbesuchten Links anzusprechen, ist es deshalb wichtig, die <em>LVHA-Reihenfolge </em>einzuhalten: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>. Die {{cssxref(":focus")}} Pseudoklasse wird normalerweise direkt neben <code>:hover</code> platziert, je nach gewünschtem Effekt davor oder danach.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre>a:link {
+  color: slategray;
+}
+
+.external:link {
+  background-color: lightblue;
+}</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#link', ':link') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#link', ':link') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Berenzung auf {{HTMLElement("a")}} aufgehoben</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#anchor-pseudo-classes', ':link') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.selectors.link")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref(":visited")}}, {{cssxref(":hover")}}, {{cssxref(":active")}}</li>
+</ul>
diff --git a/files/de/web/css/_colon_not/index.html b/files/de/web/css/_colon_not/index.html
new file mode 100644
index 0000000000..cddf772707
--- /dev/null
+++ b/files/de/web/css/_colon_not/index.html
@@ -0,0 +1,76 @@
+---
+title: ':not()'
+slug: 'Web/CSS/:not'
+tags:
+  - CSS
+  - CSS Pseudoklasse
+  - Layout
+  - Referenz
+  - Selektoren
+  - Web
+translation_of: 'Web/CSS/:not'
+---
+<div>{{ CSSRef() }}</div>
+
+<h2 id="Summary" name="Summary">Übersicht</h2>
+
+<p>Die <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">Pseudoklasse</a> <code>:not(X)</code> ist eine Negation zu einem Selektor <var>X</var> als Argument und wird als Funktion angegeben. Sie passt auf Elemente, die nicht durch das Argument repräsentiert werden. X darf keinen weiteren Negationsselektor beinhalten.</p>
+
+<p>Die <a href="/de/docs/Web/CSS/Spezifit%C3%A4t">Spezifität</a> der <code>:not</code> Pseudoklasse entspricht der Spezifität seines Arguments. Die <code>:not</code> Pseudoklasse hat im Gegensatz zu anderen Pseudoklassen keinen Einfluss auf die Spezifität.</p>
+
+<div class="note"><strong>Hinweise:</strong>
+
+<ul>
+ <li>Mit der Negation können auch irrationale Selektoren erstellt werden, z. B.  <code>:not(*)</code>, welche alle Elemente auswählen würde, die keine Elemente sind.</li>
+ <li>Es ist möglich, andere Regeln zu überschreiben. <code>A:not(B)</code> hat den selben Effekt wie <code>A</code>, aber eine höhere Spezifität.</li>
+ <li><code>:not(bla){}</code> passt auf alle Elemente, die nicht <code>bla</code> sind <strong>einschließlich <code>html</code> und <code>body</code></strong>.</li>
+</ul>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">:not(selector) { <em>Stileigenschaften</em> }</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: css">p:not(.classy) { color: red; }
+:not(p) { color: green; }</pre>
+
+<p>auf folgendes HTML angewandt:</p>
+
+<pre class="brush: html">&lt;p&gt;Irgendein Text.&lt;/p&gt;
+&lt;p class="classy"&gt;Irgendein anderer Text.&lt;/p&gt;
+&lt;span&gt;Noch mehr Text&lt;span&gt;
+</pre>
+
+<p>ergibt:</p>
+
+<p>{{EmbedLiveSample('Beispiele', '100%', '150')}}</p>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#negation', ':not()')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Argument erweitert, um komplexe Selektoren zu ermöglichen.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#negation', ':not()')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompatibilität</h2>
+
+{{Compat("css.selectors.not")}}
diff --git a/files/de/web/css/_colon_nth-child/index.html b/files/de/web/css/_colon_nth-child/index.html
new file mode 100644
index 0000000000..17dc2c3387
--- /dev/null
+++ b/files/de/web/css/_colon_nth-child/index.html
@@ -0,0 +1,163 @@
+---
+title: ':nth-child'
+slug: 'Web/CSS/:nth-child'
+tags:
+  - CSS
+  - CSS Pseudoklasse
+  - Layout
+  - Referenz
+  - Web
+translation_of: 'Web/CSS/:nth-child'
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>:nth-child(an+b)</code> <a href="/en-US/docs/CSS" title="CSS">CSS</a> <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">Pseudo-Klasse</a> passt auf ein Element, das im Dokumentbaum <code><em>a</em>n+<em>b</em>-1</code> Geschwisterknoten vor sich hat, wobei <strong>n</strong> einen gegebenen positiven Wert oder den Wert 0 hat. Zudem muss das Element einen Elternknoten haben. Einfacher ausgedrückt: Beginnend bei einem Startindex b trifft der Selector auf jedes n-te folgende Element zu.</p>
+
+<p>Einige Beispiele:</p>
+
+<ul>
+ <li><code>1n+0</code>, oder einfach <code>n</code>, trifft auf jedes Kindelement zu.</li>
+ <li><code>2n+0</code>, oder einfach 2n, würde auf die Kindelemente 2, 4, 6, 8, etc. zutreffen. Hier kann auch einfach das Schlüsselwort <code>even</code> verwendet werden.</li>
+ <li><code>2n+1</code> würde auf die Elemente 1, 3, 5, 7, etc. zutreffen. Hier gibt es auch eine Kurzform: Das Schlüsselwort <code>odd</code>.</li>
+ <li><code>3n+4</code> würde auf die folgenden Elemente zutreffen: 4, 7, 10, 13, etc.</li>
+</ul>
+
+<p>Die Werte <code><em>a</em></code> und <code><em>b</em></code> müssen beide Integer sein, und der Index des ersten Kindelements eines Knotens ist 1. In anderen Worten, diese Klasse trifft auf alle Kindelemente zu, deren Index Teil der Menge { an + b; n = 0, 1, 2, ... } ist.</p>
+
+<p>Ein beliebter Anwendungsfall ist das Auswählen jeder zweiten Reihe in einer Tabelle.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">element:nth-child(<em>a</em>n + <em>b</em>) { <em>style properties</em> }
+</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Beispielselektoren">Beispielselektoren</h3>
+
+<dl>
+ <dt><code>tr:nth-child(2n+1)</code></dt>
+ <dd>Wählt die ungeraden Reihen einer HTML-Tabelle aus.</dd>
+ <dt><code>tr:nth-child(odd)</code></dt>
+ <dd>Wählt die ungeraden Reihen einer HTML-Tabelle aus.</dd>
+ <dt><code>tr:nth-child(2n)</code></dt>
+ <dd>Wählt die geraden Reihen einer HTML-Tabelle aus.</dd>
+ <dt><code>tr:nth-child(even)</code></dt>
+ <dd>Wählt die geraden Reihen einer HTML-Tabelle aus.</dd>
+ <dt><code>span:nth-child(0n+1)</code></dt>
+ <dd>Selektiert ein span Element, welches das erste Kind seines Elternknotens ist. Dies entspricht dem {{Cssxref(':first-child')}} Selector.</dd>
+ <dt><code>span:nth-child(1)</code></dt>
+ <dd>Entspricht dem vorherigen Beispiel.</dd>
+ <dt><code>span:nth-child(-n+3)</code></dt>
+ <dd>Erzielt einen Treffer, wenn das Element vom Typ span ist und zudem eines der ersten drei Kinder seines Elternknotens ist.</dd>
+</dl>
+
+<h3 id="Gesamtbeispiel">Gesamtbeispiel</h3>
+
+<p id="The_following_HTML...">Im folgenden ein HTML-Beispiel:</p>
+
+<pre class="brush:html">&lt;p&gt;&lt;code&gt;span:nth-child(2n+1)&lt;/code&gt;, &lt;em&gt;ohne&lt;/em&gt; ein &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt;
+ unter den Kindelementen. Element 1, 3, 5, und 7 sind ausgewählt, wie erwartet.&lt;/p&gt;
+
+&lt;div class="first"&gt;
+      &lt;span&gt;Dieses span ist ausgewählt&lt;/span&gt;
+      &lt;span&gt;Dieses span is nicht. :(&lt;/span&gt;
+      &lt;span&gt;Wie sieht's mit diesem aus?&lt;/span&gt;
+      &lt;span&gt;Und dieses?&lt;/span&gt;
+      &lt;span&gt;Noch ein Beispiel&lt;/span&gt;
+      &lt;span&gt;Und noch eins&lt;/span&gt;
+      &lt;span&gt;Zu guter Letzt&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;p&gt;&lt;code&gt;span:nth-child(2n+1)&lt;/code&gt;, &lt;em&gt;mit&lt;/em&gt; einem &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt;
+ unter den Kindelementen. Element 1, 5, und 7 sind ausgewählt. 3 wird beim Zählen berücksichtigt
+ weil es ein Kind ist, aber es ist nicht ausgewählt, weil es kein
+&lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt; ist.&lt;/p&gt;
+
+&lt;div class="second"&gt;
+      &lt;span&gt;Dieses span ist ausgewählt!&lt;/span&gt;
+      &lt;span&gt;Dieses span nicht. :(&lt;/span&gt;
+      &lt;em&gt;Dieses ist ein em.&lt;/em&gt;
+      &lt;span&gt;Wie sieht's mit diesem aus?&lt;/span&gt;
+      &lt;span&gt;Und dieses?&lt;/span&gt;
+      &lt;span&gt;Noch ein Beispiel&lt;/span&gt;
+      &lt;span&gt;Und noch eins&lt;/span&gt;
+      &lt;span&gt;Zu guter Letzt&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;p&gt;&lt;code&gt;span:nth-of-type(2n+1)&lt;/code&gt;, &lt;em&gt;mit&lt;/em&gt; einem &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt;
+ unter den Kindern. Element 1, 4, 6, und 8 sind ausgewählt. 3 ist
+ nicht bei der Zählung berücksichtigt oder ausgewählt, weil es ein &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt; ist,
+und kein &lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt;, und &lt;code&gt;nth-of-type&lt;/code&gt; selektiert nur
+ Kinder dieses Typs. Das &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt; wird übersprungen und ignoriert.
+&lt;/p&gt;
+
+&lt;div class="third"&gt;
+      &lt;span&gt;Dieses span ist ausgewählt!&lt;/span&gt;
+      &lt;span&gt;Dieses span nicht. :(&lt;/span&gt;
+      &lt;em&gt;Dieses ist ein em.&lt;/em&gt;
+      &lt;span&gt;Wie sieht's mit diesem aus?&lt;/span&gt;
+      &lt;span&gt;Und dieses?&lt;/span&gt;
+      &lt;span&gt;Noch ein Beispiel&lt;/span&gt;
+      &lt;span&gt;Und noch eins&lt;/span&gt;
+      &lt;span&gt;Zu guter Letzt&lt;/span&gt;
+&lt;/div&gt;</pre>
+
+<p id="...using_this_CSS...">...dieses CSS wird verwendet...</p>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+span, div em {
+  padding: 10px;
+  border: 1px solid green;
+  display: inline-block;
+  margin-bottom: 3px;
+}
+
+.first span:nth-child(2n+1),
+.second span:nth-child(2n+1),
+.third span:nth-of-type(2n+1) {
+  background-color: lime;
+}</pre>
+
+<p id="...will_result_in.3A">...und erzeugt folgendes Resultat:</p>
+
+<div>{{EmbedLiveSample('Gesamtbeispiel','100%', '550')}}</div>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{Compat("css.selectors.nth-child")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref(":nth-of-type")}}</li>
+</ul>
diff --git a/files/de/web/css/_colon_only-child/index.html b/files/de/web/css/_colon_only-child/index.html
new file mode 100644
index 0000000000..ac7ffcc7c0
--- /dev/null
+++ b/files/de/web/css/_colon_only-child/index.html
@@ -0,0 +1,113 @@
+---
+title: ':only-child'
+slug: 'Web/CSS/:only-child'
+tags:
+  - CSS
+  - CSS Pseudo-Klasse
+  - Layout
+  - Referenz
+  - Selektoren
+  - Web
+translation_of: 'Web/CSS/:only-child'
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <span style="line-height: 1.5;">CSS </span><a href="/en-US/docs/CSS/Pseudo-classes" style="line-height: 1.5;" title="Pseudo-classes">Pseudo-Klasse</a><span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">:only-child</code><span style="line-height: 1.5;"> </span><span style="line-height: 1.5;"> repräsentiert ein Element, welches das einzige Kindeelement innerhalb seines Elternelementes ist. Das ist das gleiche wie </span><code style="font-style: normal; line-height: 1.5;">:first-child:last-child</code><span style="line-height: 1.5;"> oder </span><code style="font-style: normal; line-height: 1.5;">:nth-child(1):nth-last-child(1)</code><span style="line-height: 1.5;">, nur mit einer geringeren Spezifizität.</span></p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">parent child:only-child {
+  property: value;
+}
+</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einfaches_Beispiel">Einfaches Beispiel</h3>
+
+<pre class="brush: css">span:only-child {
+  color: red;
+}
+</pre>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;span&gt;Dieser span ist das einzige Kind seines Elternteils&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;span&gt;<span style="font-size: 1rem;">Dieser span ist eines von zwei Kindern seines Elternteils</span><span style="font-size: 1rem;">&lt;/span&gt;</span>
+  &lt;span&gt;<span style="font-size: 1rem;">Dieser span ist eines von zwei Kindern seines Elternteils</span><span style="font-size: 1rem;">&lt;/span&gt;</span>
+&lt;/div&gt;
+</pre>
+
+<h4 id="Ergebnis">Ergebnis</h4>
+
+<p>{{EmbedLiveSample('Basic_example', '100%', 100)}}</p>
+
+<h3 id="Ein_Beispiel_für_Listen">Ein Beispiel für Listen</h3>
+
+<pre class="brush: css">li li {
+  list-style-type: disc;
+}
+li:only-child {
+  color: #6699ff;
+  font-style: italic;
+  list-style-type: square;
+}</pre>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;Erstens
+    &lt;ul&gt;
+      &lt;li&gt;Einziges Kind
+    &lt;/ul&gt;
+  &lt;/li&gt;
+  &lt;li&gt;Zweitens
+    &lt;ul&gt;
+      &lt;li&gt;Diese Liste hat zwei Elemente
+      &lt;li&gt;<span style="font-size: 1rem;">Diese Liste hat zwei Elemente</span>
+    &lt;/ul&gt;
+  &lt;/li&gt;
+  &lt;li&gt;Drittens
+    &lt;ul&gt;
+      &lt;li&gt;<span style="font-size: 1rem;">Diese Liste hat drei Elemente</span>
+      &lt;li&gt;<span style="font-size: 1rem;">Diese Liste hat drei Elemente</span>
+      &lt;li&gt;<span style="font-size: 1rem;">Diese Liste hat drei Elemente</span>
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;ol&gt;
+</pre>
+
+<h4 id="Ergebnis_2">Ergebnis</h4>
+
+<p>{{EmbedLiveSample('A_list_example', '100%', 150)}}</p>
+
+<hr>
+<h2 id="Spezifizierungen">Spezifizierungen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifizierung</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#only-child-pseudo', ':only-child')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Keine Änderung.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#only-child-pseudo', ':only-child')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Ausgangs-Definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+{{Compat("css.selectors.only-child")}}
diff --git a/files/de/web/css/_colon_optional/index.html b/files/de/web/css/_colon_optional/index.html
new file mode 100644
index 0000000000..ccf6fe9770
--- /dev/null
+++ b/files/de/web/css/_colon_optional/index.html
@@ -0,0 +1,69 @@
+---
+title: ':optional'
+slug: 'Web/CSS/:optional'
+tags:
+  - CSS
+  - CSS Pseudoklasse
+  - Layout
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+  - Web
+translation_of: 'Web/CSS/:optional'
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>:optional</code> CSS <a href="/de/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">Pseudoklasse</a> repräsentiert alle {{HTMLElement("input")}} Elemente, die kein {{htmlattrxref("required","input")}} Attribut enthalten.</p>
+
+<p>Für Pflichtfelder kann man die {{cssxref(":required")}} Pseudoklasse verwenden.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Siehe {{cssxref(":invalid")}}.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#selector-optional', ':optional')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-optional', ':optional')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Definiert die Semantik bezüglich HTML und Beschränkungsvalidierung.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#opt-pseudos', ':optional')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 UI', '#pseudo-required-value', ':optional')}}</td>
+   <td>{{Spec2('CSS3 UI')}}</td>
+   <td>Definiert die Pseudoklasse, aber nicht die zugehörige Semantik.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.selectors.optional")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref(":required")}}</li>
+ <li>{{cssxref(":invalid")}}</li>
+ <li>{{cssxref(":valid")}}</li>
+</ul>
diff --git a/files/de/web/css/_colon_out-of-range/index.html b/files/de/web/css/_colon_out-of-range/index.html
new file mode 100644
index 0000000000..c9b1c64957
--- /dev/null
+++ b/files/de/web/css/_colon_out-of-range/index.html
@@ -0,0 +1,94 @@
+---
+title: ':out-of-range'
+slug: 'Web/CSS/:out-of-range'
+tags:
+  - CSS
+  - CSS Pseudoklasse
+  - Layout
+  - Referenz
+  - Web
+translation_of: 'Web/CSS/:out-of-range'
+---
+<div>{{CSSRef}}</div>
+
+<div> </div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>:out-of-range</code> CSS <a href="/de/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">Pseudoklasse</a> passt, wenn das value Attribut eines Elements außerhalb der angegebenen Begrenzungen für dieses Element ist. Sie erlaubt der Seite, darauf zu reagieren, dass der aktuell definierte Wert eines Elements außerhalb der Bereichsgrenzen ist. Ein Wert kann außerhalb eines Bereichs sein, wenn er entweder kleiner oder größer als die gesetzten Minimal- und Maximalwerte ist.</p>
+
+<div class="note"><strong>Hinweis:</strong> Diese Pseudoklasse trifft nur auf Elemente zu, die Bereichsbegrenzungen haben. Falls keine solchen Begrenzungen existieren, kann der Wert des Elements weder innerhalb noch außerhalb der Grenzen liegen.</div>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<div id="Beispielcode">
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html; highlight:[3]">&lt;form action="" id="form1"&gt;
+    &lt;ul&gt;Werte zwischen 1 und 10 sind gültig.
+        &lt;li&gt;
+            &lt;input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12"&gt;
+            &lt;label for="value1"&gt;Der Wert ist &lt;/label&gt;
+        &lt;/li&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight:[5]">li {
+    list-style: none;
+    margin-bottom: 1em;
+}
+input {
+    border: 1px solid black;
+}
+input:in-range {
+    background-color: rgba(0, 255, 0, 0.25);
+}
+input:out-of-range {
+    background-color: rgba(255, 0, 0, 0.25);
+    border: 2px solid red;
+}
+input:in-range + label::after {
+    content:' OK';
+}
+input:out-of-range + label::after {
+    content:'out of range!';
+}</pre>
+</div>
+
+<div>{{EmbedLiveSample('Beispielcode',600,140)}}</div>
+
+<h2 id="Spezifikation"><span>Spezifikation</span></h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#in-range-pseudo', ':in-range')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#pseudo-range', ':in-range')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Ursprüngliche Spezifikation</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.selectors.out-of-range")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Link bezogene Pseudoklassen: {{cssxref(":link")}}, {{cssxref(":visited")}}, and {{cssxref(":hover")}}.</li>
+ <li><a href="/de/docs/Web/Guide/HTML/Forms/Datenformular_Validierungsguide">Datenformular Validierungsguide</a></li>
+</ul>
diff --git a/files/de/web/css/_colon_required/index.html b/files/de/web/css/_colon_required/index.html
new file mode 100644
index 0000000000..769f925180
--- /dev/null
+++ b/files/de/web/css/_colon_required/index.html
@@ -0,0 +1,67 @@
+---
+title: ':required'
+slug: 'Web/CSS/:required'
+tags:
+  - CSS
+  - CSS Pseudoklasse
+  - Layout
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+  - Web
+translation_of: 'Web/CSS/:required'
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>:required</code> CSS <a href="/de/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">Pseudoklasse</a> repräsentiert jedes {{HTMLElement("input")}} Element, welches das Attribut {{htmlattrxref("required", "input")}} beinhaltet. So kann das Aussehen von Pflichtfeldern einfach angepasst werden.</p>
+
+<p>Die {{cssxref(":optional")}} Pseudoklasse hingegen kann für die Darstellung von Nicht-Pflichtfeldern verwendet werden.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Siehe {{cssxref(":invalid")}}.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#selector-required', ':required')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-required', ':required')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Definiert die Semantik bezüglich HTML und Beschränkungsvalidierung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#opt-pseudos', ':required')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#pseudo-required-value', ':required')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Definiert die Pseudoklasse, aber nicht die zugehörige Semantik</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.selectors.required")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref(":optional")}}, {{cssxref(":invalid")}}, {{cssxref(":valid")}}</li>
+</ul>
diff --git a/files/de/web/css/_colon_root/index.html b/files/de/web/css/_colon_root/index.html
new file mode 100644
index 0000000000..4328605e04
--- /dev/null
+++ b/files/de/web/css/_colon_root/index.html
@@ -0,0 +1,48 @@
+---
+title: ':root'
+slug: 'Web/CSS/:root'
+tags:
+  - CSS
+  - CSS Pseudoklasse
+  - Layout
+  - NeedsExample
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+  - Web
+translation_of: 'Web/CSS/:root'
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Mit dem <kbd>:root</kbd>-Selektor kannst Du das oberste "Elternelement" im DOM oder die Dokumentstruktur als Ziel festlegen. Es ist in der Spezifikation der CSS Selectors Level 3 als „strukturelle Pseudoklasse“ definiert, was bedeutet, dass Inhalt basierend auf seiner Beziehung zu übergeordneten und gleichgeordneten Inhalten gestaltet wird.</p>
+
+<p>In der überwiegenden Mehrheit der Fälle, auf die Du wahrscheinlich stößt, gilt Folgendes: <kbd>:root</kbd> bezieht sich auf das <kbd>&lt;html&gt;</kbd> -Element einer Webseite. In einem HTML-Dokument ist das HTML-Element immer das übergeordnete Element der höchsten Ebene, sodass das Verhalten von <kbd>:root</kbd> vorhersehbar ist. Da CSS jedoch eine Stilsprache ist, die mit anderen Dokumentformaten wie SVG und XML verwendet werden kann, kann die <kbd>:root</kbd>-Pseudoklasse in diesen Fällen auf andere Elemente verweisen. Unabhängig von der Auszeichnungssprache wählt <kbd>:root</kbd> immer das oberste Element des Dokuments in der Dokumentstruktur aus.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#root-pseudo', ':root')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#root-pseudo', ':root')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{Compat("css.selectors.root")}}</p>
diff --git a/files/de/web/css/_colon_visited/index.html b/files/de/web/css/_colon_visited/index.html
new file mode 100644
index 0000000000..9816196c8a
--- /dev/null
+++ b/files/de/web/css/_colon_visited/index.html
@@ -0,0 +1,76 @@
+---
+title: ':visited'
+slug: 'Web/CSS/:visited'
+tags:
+  - CSS
+  - CSS Pseudoklasse
+  - CSS3
+  - Layout
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+  - Web
+translation_of: 'Web/CSS/:visited'
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>:visited</code> <a href="/en/CSS/Pseudo-classes" title="Pseudo-classes">Pseudoklasse</a> betrifft nur bereits besuchte Links. Die Stile können von weiteren Pseudoklassen überschrieben werden: {{ cssxref(":link") }}, {{ cssxref(":hover") }}, und {{ cssxref(":active") }}. Um nur besuchte Links auszuwählen, ist es deshalb wichtig, die <em>LVHA-Reihenfolge</em> einzuhalten: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p>
+
+<div class="note style-wrap">
+<p><strong>Hinweis: </strong>Aus Datenschutzgründen ist der Einsatzbereich dieser Pseudoklasse auf die folgenden Eigenschaften begränzt: {{ cssxref("color") }}, {{ cssxref("background-color") }}, {{ cssxref("border-color") }}, {{ cssxref("border-bottom-color") }}, {{ cssxref("border-left-color") }}, {{ cssxref("border-right-color") }}, {{ cssxref("border-top-color") }}, {{ cssxref("outline-color") }}, {{ cssxref("column-rule-color") }}, <code>fill</code> und <code>stroke</code>. Beachte, dass auch der Alphakanal ignoriert wird: die Alphakomponente der nicht besuchten Regel wird stattdessen verwendet (außer, wenn die Deckkraft 0 ist. In diesem Fall wird die gesamte Farbe ignoriert und die Farbe der nicht besuchten Regel verwendet).</p>
+
+<p>Da sich die Farbe ändern kann, liefert <code>getComputedStyle</code> immer den Wert von unbesuchten Links zurück.</p>
+
+<p>Für mehr informationen zu den Schutzmasnahmen siehe <a href="/en-US/docs/CSS/Privacy_and_the_:visited_selector" title="/en-US/docs/CSS/Privacy_and_the_:visited_selector">Privacy and the :visited selector</a>.</p>
+</div>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: css">a:visited { color: #4b2f89; }
+a:visited { background-color: white } </pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#link', ':visited') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#link', ':visited') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':visited') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Berenzung auf {{ HTMLElement("a") }} aufgehoben. Beschränkt aus Datenschutzgründen das Browserverhalten.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#anchor-pseudo-classes', ':visited') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Standard Wert definiert</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompatibilität</h2>
+
+{{Compat("css.selectors.visited")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Privacy_and_the_:visited_selector" title="/en-US/docs/CSS/Privacy_and_the_:visited_selector">Privatsphäre und der :visited Selektor</a></li>
+ <li>Weitere Link-Pseudoklassen: {{cssxref(":link")}}, {{cssxref(":active")}} und {{cssxref(":hover")}}.</li>
+</ul>
diff --git a/files/de/web/css/_doublecolon_-moz-page-sequence/index.html b/files/de/web/css/_doublecolon_-moz-page-sequence/index.html
new file mode 100644
index 0000000000..a99a56e7fc
--- /dev/null
+++ b/files/de/web/css/_doublecolon_-moz-page-sequence/index.html
@@ -0,0 +1,83 @@
+---
+title: '::-moz-page-sequence'
+slug: 'Web/CSS/::-moz-page-sequence'
+tags:
+  - CSS
+  - CSS Referenz
+  - NeedsBrowserCompatibility
+  - NeedsExample
+  - NeedsMobileBrowserCompatibility
+  - Non-standard
+  - Pseudoelement
+translation_of: 'Web/CSS/::-moz-page-sequence'
+---
+<div>{{CSSRef}}{{non-standard_header}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Das <code>::-moz-page-sequence</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelement</a> repräsentiert den Hintergrund der Druckvorschau.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Benötigt Beispiele.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Nicht Teil einer Spezifikation.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref("::-moz-page")}}</li>
+ <li>{{cssxref("::-moz-scrolled-page-sequence")}}</li>
+</ul>
diff --git a/files/de/web/css/_doublecolon_-moz-page/index.html b/files/de/web/css/_doublecolon_-moz-page/index.html
new file mode 100644
index 0000000000..e491443ea9
--- /dev/null
+++ b/files/de/web/css/_doublecolon_-moz-page/index.html
@@ -0,0 +1,28 @@
+---
+title: '::-moz-page'
+slug: 'Web/CSS/::-moz-page'
+tags:
+  - CSS
+  - CSS Referenz
+  - NeedsCompatTable
+  - NeedsContent
+  - NeedsExample
+  - Non-standard
+translation_of: 'Web/CSS/::-moz-page'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Das <code>::-moz-page</code> CSS <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelement</a> gilt für eine einzelne Seite im Druck oder der Druckvorschau.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Nicht Teil einer Spezifikation.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref("::-moz-page-sequence")}}</li>
+ <li>{{cssxref("::-moz-scrolled-page-sequence")}}</li>
+</ul>
diff --git a/files/de/web/css/_doublecolon_-moz-placeholder/index.html b/files/de/web/css/_doublecolon_-moz-placeholder/index.html
new file mode 100644
index 0000000000..07de5dafea
--- /dev/null
+++ b/files/de/web/css/_doublecolon_-moz-placeholder/index.html
@@ -0,0 +1,107 @@
+---
+title: '::-moz-placeholder'
+slug: 'Web/CSS/::-moz-placeholder'
+tags:
+  - CSS
+  - CSS Pseudo-class
+  - CSS Reference
+  - Non-standard
+translation_of: 'Web/CSS/::placeholder'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<div class="note"><strong>Hinweis:</strong> Das Pseudoelement <code>::-moz-placeholder</code> wurde eingeführt, um die Pseudoklasse {{cssxref(":-moz-placeholder")}}, die in Firefox 19 als veraltet eingestuft wurde, zu ersetzen.</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Das <code>::-moz-placeholder</code> <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelement</a> repräsentiert Formularelemente, die <a href="/de/docs/Web/HTML/Formulare_in_HTML#Das_placeholder_Attribut">Platzhaltertexte</a> anzeigen. Damit können Webentwickler und Theme Designer die Darstellung von Platzhaltertexten anpassen.</p>
+
+<p>Standardmäßig wird <code>{{cssxref("opacity")}}: 0.54</code> verwendet. Sollten Sie die Hintergrundfarbe der Formularelemente angepasst haben (beispielsweise in einen ähnlichen Farbton), so kann es sein, dass der Platzhaltertext nicht gut sichtbar ist. In diesem Fall können Sie mit <code>::-moz-placeholder</code> die Textdarstellung des Platzhaltertextes ändern.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Das folgende Beispiel färbt den Platzhaltertext grün.</p>
+
+<h3 id="HTML_Inhalt">HTML Inhalt</h3>
+
+<pre class="brush:html">&lt;input id="test" placeholder="Platzhaltertext!"&gt;
+</pre>
+
+<h3 id="CSS_Inhalt">CSS Inhalt</h3>
+
+<pre class="brush:html">input::-moz-placeholder {
+  color: green;
+}
+</pre>
+
+<p>Das Ergebnis sieht folgendermaßen aus:</p>
+
+<p>{{EmbedLiveSample('Beispiel')}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Nicht Teil einer Spezifikation.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("19.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("19.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Firefox verwendet standardmäßig <code>{{cssxref("opacity")}}: 0.54</code> für Platzhaltertexte. Siehe {{Bug("556145")}}. Die meisten anderen Browser verwenden momentan andere Standards für ihre Platzhalter Pseudoelemente oder Pseudoklassen.</p>
+
+<p>Gecko hat dies zuvor als {{cssxref(":-moz-placeholder")}} Pseudoklasse implementiert. Siehe {{Bug("737786")}}.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/HTML/Formulare_in_HTML">Formulare in HTML</a></li>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{HTMLElement("textarea")}}</li>
+</ul>
diff --git a/files/de/web/css/_doublecolon_-moz-progress-bar/index.html b/files/de/web/css/_doublecolon_-moz-progress-bar/index.html
new file mode 100644
index 0000000000..858c79c319
--- /dev/null
+++ b/files/de/web/css/_doublecolon_-moz-progress-bar/index.html
@@ -0,0 +1,36 @@
+---
+title: '::-moz-progress-bar'
+slug: 'Web/CSS/::-moz-progress-bar'
+tags:
+  - CSS
+  - CSS Referenz
+  - NeedsCompatTable
+  - NeedsLiveSample
+  - Non-standard
+translation_of: 'Web/CSS/::-moz-progress-bar'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Das <code>::-moz-progress-bar</code> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelement</a> betrifft den Bereich eines HTML {{HTMLElement("progress")}} Elements, der den erreichten Fortschritt darstellt. Dies erlaubt es beispielsweise, die Farbe von Fortschrittsbalken ändern.</p>
+
+<p>Die Möglichkeiten, den Stil des Balkens anzupassen, sind recht groß. Dies kann besonders für unbestimmte Balken nützlich sein (über die {{cssxref(":indeterminate")}} <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a>), bei denen es möglich ist, die Darstellung grundlegend zu ändern; es können z. B. die Breite und die Positionierung des Balkens verändert werden. (Was die gesamten Ausmaße des Elements und seine Position meint, nicht nur den gefüllten Teil des Elements, wie im Screenshot unten verdeutlicht.)</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Dieses Beispiel gestaltet den Fortschrittszähler des Fortschrittbalkens mit der ID <code>redbar</code> in rot.</p>
+
+<pre class="brush: css">#redbar::-moz-progress-bar {
+  background-color: red;
+}</pre>
+
+<p>Ein Balken, der diesen Stil verwendet, könnte so aussehen:</p>
+
+<p><img alt="Benutzerdefiniert gestalteter Fortschrittsbalken" class="default internal" src="/@api/deki/files/5387/=redbar.png"></p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{HTMLElement("progress")}}</li>
+</ul>
diff --git a/files/de/web/css/_doublecolon_-moz-scrolled-page-sequence/index.html b/files/de/web/css/_doublecolon_-moz-scrolled-page-sequence/index.html
new file mode 100644
index 0000000000..7f1fe71354
--- /dev/null
+++ b/files/de/web/css/_doublecolon_-moz-scrolled-page-sequence/index.html
@@ -0,0 +1,81 @@
+---
+title: '::-moz-scrolled-page-sequence'
+slug: 'Web/CSS/::-moz-scrolled-page-sequence'
+tags:
+  - CSS
+  - CSS Referenz
+  - NeedsBrowserCompatibility
+  - NeedsContent
+  - NeedsExample
+  - NeedsMobileBrowserCompatibility
+  - Non-standard
+translation_of: 'Web/CSS/::-moz-scrolled-page-sequence'
+---
+<div>{{CSSRef}}{{non-standard_header}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Das <code>::-moz-scrolled-page-sequence</code> CSS <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelement</a> repräsentiert den Hintergrund der Druckvorschau.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Nicht Teil einer Spezifikation.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Chrome für Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref("::-moz-page")}}</li>
+ <li>{{cssxref("::-moz-page-sequence")}}</li>
+</ul>
diff --git a/files/de/web/css/_doublecolon_-ms-browse/index.html b/files/de/web/css/_doublecolon_-ms-browse/index.html
new file mode 100644
index 0000000000..06b3002488
--- /dev/null
+++ b/files/de/web/css/_doublecolon_-ms-browse/index.html
@@ -0,0 +1,79 @@
+---
+title: '::-ms-browse'
+slug: 'Web/CSS/::-ms-browse'
+tags:
+  - CSS
+  - NeedsBrowserCompatibility
+  - NeedsContent
+  - NeedsExample
+  - NeedsMobileBrowserCompatibility
+  - Non-standard
+  - Pseudoelement
+  - Referenz
+translation_of: 'Archive/Web/CSS/::-ms-browse'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Das <code>::-ms-browse</code> CSS <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelement</a> repräsentiert die Schaltfläche eines {{HTMLElement("input")}} Elements mit <code>type="file"</code>, die die Dateiauswahl öffnet.</p>
+
+<p>Diese Schaltfläche und dieses Pseudoelement sind nicht standardisiert und spezifisch für Internet Explorer 10+, daher das Herstellerpräfix.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Nicht Teil einer Spezifikation.</p>
+
+<p>Microsoft hat eine <a href="https://msdn.microsoft.com/en-us/library/windows/apps/Hh779844.aspx">Beschreibung von <code>::-ms-browse</code> auf MSDN</a>.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/de/web/css/_doublecolon_-ms-check/index.html b/files/de/web/css/_doublecolon_-ms-check/index.html
new file mode 100644
index 0000000000..3f5c0e1b87
--- /dev/null
+++ b/files/de/web/css/_doublecolon_-ms-check/index.html
@@ -0,0 +1,23 @@
+---
+title: '::-ms-check'
+slug: 'Web/CSS/::-ms-check'
+tags:
+  - CSS
+  - NeedsCompatTable
+  - NeedsExample
+  - Non-standard
+  - Pseudoelement
+  - Referenz
+translation_of: 'Archive/Web/CSS/::-ms-check'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Das <strong><code>::-ms-check</code></strong> CSS <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelement</a> repräsentiert den Haken eines {{HTMLElement("input")}} mit <code>type="checkbox"</code> oder <code>type="radio"</code>.</p>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<p>Nicht Teil einer Spezifikation.</p>
+
+<p>Microsoft hat eine <a href="https://msdn.microsoft.com/en-us/library/windows/apps/hh465739.aspx">Beschreibung auf MSDN</a>.</p>
diff --git a/files/de/web/css/_doublecolon_-ms-fill-lower/index.html b/files/de/web/css/_doublecolon_-ms-fill-lower/index.html
new file mode 100644
index 0000000000..80bc10efe4
--- /dev/null
+++ b/files/de/web/css/_doublecolon_-ms-fill-lower/index.html
@@ -0,0 +1,90 @@
+---
+title: '::-ms-fill-lower'
+slug: 'Web/CSS/::-ms-fill-lower'
+tags:
+  - CSS
+  - CSS Pseudoelement
+  - NeedsBrowserCompatibility
+  - NeedsExample
+  - NeedsMobileBrowserCompatibility
+  - Non-standard
+  - Pseudoelement
+  - Referenz
+translation_of: 'Archive/Web/CSS/::-ms-fill-lower'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Das <strong><code>::-ms-fill-lower</code></strong> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelement</a> repräsentiert den Teil des "Tracks" (die Spur, in der der sich der Indikator, alias Thumb, bewegt) eines {{HTMLElement("input")}} Elements mit <code>type="range"</code>, welcher den Werten entspricht, die kleiner sind als der aktuell vom Thumb markierte.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Nicht Teil einer Spezifikation.</p>
+
+<p>Microsoft hat eine <a href="https://msdn.microsoft.com/en-us/library/windows/apps/hh465745.aspx">Beschreibung auf MSDN</a>.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Die Pseudoelemente, die von IE/Edge verwendet werden, um andere Teile des Forschrittelements zu stylen:
+  <ul>
+   <li>{{cssxref("::-ms-fill-upper")}}</li>
+   <li>{{cssxref("::-ms-track")}}</li>
+   <li>{{cssxref("::-ms-thumb")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("::-moz-range-progress")}}</li>
+ <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks: Styling Cross-Browser Compatible Range Inputs with CSS</a></li>
+ <li><a href="http://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html">QuirksMode: Styling and scripting sliders</a></li>
+</ul>
diff --git a/files/de/web/css/_doublecolon_-ms-fill-upper/index.html b/files/de/web/css/_doublecolon_-ms-fill-upper/index.html
new file mode 100644
index 0000000000..c897657ac2
--- /dev/null
+++ b/files/de/web/css/_doublecolon_-ms-fill-upper/index.html
@@ -0,0 +1,90 @@
+---
+title: '::-ms-fill-upper'
+slug: 'Web/CSS/::-ms-fill-upper'
+tags:
+  - CSS
+  - CSS Pseudoelement
+  - NeedsBrowserCompatibility
+  - NeedsExample
+  - NeedsMobileBrowserCompatibility
+  - Non-standard
+  - Pseudoelement
+  - Referenz
+translation_of: 'Archive/Web/CSS/::-ms-fill-upper'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Das <strong><code>::-ms-fill-upper</code></strong> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelement</a> repräsentiert den Teil des "Tracks" (die Spur, in der der sich der Indikator, alias Thumb, bewegt) eines {{HTMLElement("input")}} Elements mit <code>type="range"</code>, welcher den Werten entspricht, die größer sind als der aktuell vom Thumb markierte.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Nicht Teil einer Spezifikation.</p>
+
+<p>Microsoft hat eine <a href="https://msdn.microsoft.com/en-us/library/windows/apps/hh465748.aspx">Beschreibung auf MSDN</a>.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Die Pseudoelemente, die von IE/Edge verwendet werden, um andere Teile des Forschrittelements zu stylen:
+  <ul>
+   <li>{{cssxref("::-ms-fill-lower")}}</li>
+   <li>{{cssxref("::-ms-track")}}</li>
+   <li>{{cssxref("::-ms-thumb")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("::-moz-range-progress")}}</li>
+ <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks: Styling Cross-Browser Compatible Range Inputs with CSS</a></li>
+ <li><a href="http://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html">QuirksMode: Styling and scripting sliders</a></li>
+</ul>
diff --git a/files/de/web/css/_doublecolon_-ms-fill/index.html b/files/de/web/css/_doublecolon_-ms-fill/index.html
new file mode 100644
index 0000000000..972cd7a224
--- /dev/null
+++ b/files/de/web/css/_doublecolon_-ms-fill/index.html
@@ -0,0 +1,71 @@
+---
+title: '::-ms-fill'
+slug: 'Web/CSS/::-ms-fill'
+tags:
+  - CSS
+  - NeedsExample
+  - Pseudoelement
+  - Referenz
+translation_of: 'Archive/Web/CSS/::-ms-fill'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Das <strong><code>::-ms-fill</code></strong> CSS <a href="/de/docs/Web/CSS/Pseudo-elements" title="en/CSS/Pseudo-elements">Pseudoelement</a> repräsentiert die gefüllte Portion eines {{HTMLElement("progress")}} Elements. Das Pseudoelement ist nicht standardisiert und wird nur von Internet Explorer 10+ unterstützt, daher das Herstellerpräfix.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Nicht Teil einer Spezifikation.</p>
+
+<p>Microsoft hat eine <a href="https://msdn.microsoft.com/en-us/library/windows/apps/hh465757.aspx">Beschreibung auf MSDN</a>.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/de/web/css/_doublecolon_-ms-reveal/index.html b/files/de/web/css/_doublecolon_-ms-reveal/index.html
new file mode 100644
index 0000000000..c3da23ecb9
--- /dev/null
+++ b/files/de/web/css/_doublecolon_-ms-reveal/index.html
@@ -0,0 +1,24 @@
+---
+title: '::-ms-reveal'
+slug: 'Web/CSS/::-ms-reveal'
+tags:
+  - CSS
+  - NeedsCompatTable
+  - NeedsContent
+  - NeedsExample
+  - Non-standard
+  - Pseudoelement
+  - Referenz
+translation_of: 'Archive/Web/CSS/::-ms-reveal'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Das <strong><code>::-ms-reveal</code></strong> CSS <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelement</a> wird verwendet, um Stile auf den "Passwort Anzeigebutton" anzuwenden, welcher im Internet Explorer 10+ standardmäßig am Rand eines {{HTMLElement("input")}} Elements mit <code>type="password"</code> angezeigt wird. Der Passwort Anzeigebutton zeigt den Wert des Passwortfeldes im Klartext an (anstatt der normalen versteckt-wegen-Datenschutz nur-Sternchen Anzeige). Dieser Button und das Pseudoelement sind nicht standardisiert und spezifisch für Internet Explorer 10+, daher das Herstellerpräfix.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Nicht Teil einer Spezifikation.</p>
+
+<p>Microsoft hat eine <a href="https://msdn.microsoft.com/en-us/library/windows/apps/hh465773.aspx">Beschreibung auf MSDN</a>.</p>
diff --git a/files/de/web/css/_doublecolon_-ms-thumb/index.html b/files/de/web/css/_doublecolon_-ms-thumb/index.html
new file mode 100644
index 0000000000..e8736b011d
--- /dev/null
+++ b/files/de/web/css/_doublecolon_-ms-thumb/index.html
@@ -0,0 +1,24 @@
+---
+title: '::-ms-thumb'
+slug: 'Web/CSS/::-ms-thumb'
+tags:
+  - CSS
+  - Pseudoelement
+  - Referenz
+translation_of: 'Archive/Web/CSS/::-ms-thumb'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h3 id="Übersicht">Übersicht</h3>
+
+<p>Das <strong><code>::-ms-thumb</code></strong> CSS <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelement</a> repräsentiert den Schieber, den der Benutzer innerhalb der Spur eines {{HTMLElement("input")}}s mit <code>type="range"</code> bewegen kann, um seinen numerischen Wert zu ändern.</p>
+
+<h3 id="Spezifikationen">Spezifikationen</h3>
+
+<p>Dies ist nicht Teil einer Spezifikation, jedoch hat Microsoft eine <a href="https://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh465780.aspx">Beschreibung auf MSDN</a>.</p>
+
+<h3 id="Siehe_auch">Siehe auch</h3>
+
+<ul>
+ <li>{{cssxref("::-ms-track")}}</li>
+</ul>
diff --git a/files/de/web/css/_doublecolon_after/index.html b/files/de/web/css/_doublecolon_after/index.html
new file mode 100644
index 0000000000..6eca5cbd0c
--- /dev/null
+++ b/files/de/web/css/_doublecolon_after/index.html
@@ -0,0 +1,158 @@
+---
+title: '::after (:after)'
+slug: 'Web/CSS/::after'
+tags:
+  - CSS
+  - CSS Pseudoelement
+  - Layout
+  - Referenz
+  - Web
+translation_of: 'Web/CSS/::after'
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Das <code>::after</code> CSS <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelement</a> matcht ein virtuelles letztes Kindelement des markierten Elements. Es wird typischerweise dazu verwendet, um kosmetischen Inhalt unter Verwendung der {{cssxref("content")}} CSS Eigenschaft zu einem Element hinzuzufügen. Dieses Element ist standardmäßig inline.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">/* CSS2 Syntax */
+element:after  { <em>Stileigenschaften</em> }
+
+/* CSS3 Syntax */
+element::after { <em>Stileigenschaften</em> }</pre>
+
+<p>Die <code>::after</code> Notation (mit zwei Doppelpunkten) wurde in CSS 3 eingeführt, um eine Unterscheidung zwischen <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklassen</a> und <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelementen</a> einzuführen. Browser unterstützen auch die <code>:after</code> Notation, wie sie in CSS 2 eingeführt wurde.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einfache_Verwendung">Einfache Verwendung</h3>
+
+<p>Lass uns zwei Klassen erstellen: eine für langweilige Absätze und eine für aufregende. Wir können anschließend jeden Absatz markieren, indem wir ein Pseudoelement an dessen Ende setzen.</p>
+
+<pre class="brush: html">&lt;p class="boring-text"&gt;Hier ist etwas alter, langweiliger Text.&lt;/p&gt;
+&lt;p&gt;Hier ist etwas mittelmäßiger Text, weder langweilig noch aufregend.&lt;/p&gt;
+&lt;p class="exciting-text"&gt;An MDN mitzuwirken ist einfach und macht Spaß.
+Klicke einfach auf den 'BEARBEITEN' Button und füge neue Livebeispiele hinzu oder verbessere bestehende Beispiele.&lt;/p&gt;</pre>
+
+<pre class="brush: css">.exciting-text::after {
+  content: "&lt;- *Das* ist interessant!";
+  color: green;
+}
+
+.boring-text::after {
+   content: "&lt;- LANGWEILIG!";
+   color: red;
+}</pre>
+
+<h4 id="Ausgabe">Ausgabe</h4>
+
+<p>{{EmbedLiveSample('Einfache_Verwendung', 500, 150)}}</p>
+
+<h3 id="Dekoratives_Beispiel">Dekoratives Beispiel</h3>
+
+<p>Wir können Text oder Bilder innerhalb der {{cssxref("content")}} Eigenschaft fast beliebig stylen.</p>
+
+<pre class="brush: html">&lt;span class="ribbon"&gt;Beachte, wo die orange Box ist.&lt;/span&gt;</pre>
+
+<pre class="brush: css">.ribbon {
+  background-color: #5BC8F7;
+}
+
+.ribbon::after {
+  content: "Sieh dir diese orange Box an.";
+  background-color: #FFBA10;
+  border-color: black;
+  border-style: dotted;
+}</pre>
+
+<h4 id="Ausgabe_2">Ausgabe</h4>
+
+<p>{{EmbedLiveSample('Dekoratives_Beispiel', 450, 20)}}</p>
+
+<h3 id="Tooltips">Tooltips</h3>
+
+<p>Das folgende Beispiel zeigt die Verwendung des <code>::after</code> <a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudoelements</a> in Verbindung mit dem <a href="/en-US/docs/Web/CSS/attr"><code>attr()</code></a> CSS Ausdruck und einem <a href="/en-US/docs/Web/HTML/Global_attributes#attr-dataset">benutzerdefinierten Datenattribut</a> <code>data-descr</code>, um einen rein CSS-basierten, Wörterbuch ähnlichen <em>Tooltip</em> zu erstellen. Sieh dir die Livevorschau unten an oder das <a href="https://developer.mozilla.org/files/4591/css-only_tooltips.html">Beispiel auf einer separaten Seite</a>.</p>
+
+<pre class="brush: html">&lt;p&gt;Hier ist ein Livebeispiel des oberen Codes.&lt;br /&gt;
+  Wir haben ein &lt;span data-descr="Sammlung von Wörtern und Interpunktion"&gt;text&lt;/span&gt; mit ein paar
+  &lt;span data-descr="kleine Popups, welche auch wieder verschwinden"&gt;Tooltips&lt;/span&gt;.&lt;br /&gt;
+  Sei nicht schüchtern, beweg die Maus darüber, ums dir &lt;span data-descr="nicht wörtlich nehmen"&gt;anzusehen&lt;/span&gt;.
+&lt;/p&gt;
+</pre>
+
+<pre class="brush: css">span[data-descr] {
+  position: relative;
+  text-decoration: underline;
+  color: #00F;
+  cursor: help;
+}
+
+span[data-descr]:hover::after {
+  content: attr(data-descr);
+  position: absolute;
+  left: 0;
+  top: 24px;
+  min-width: 200px;
+  border: 1px #aaaaaa solid;
+  border-radius: 10px;
+  background-color: #ffffcc;
+  padding: 12px;
+  color: #000000;
+  font-size: 14px;
+  z-index: 1;
+}</pre>
+
+<h4 id="Ausgabe_3">Ausgabe</h4>
+
+<p>{{EmbedLiveSample('Tooltips', 450, 120)}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-after', '::after')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Keine wesentlichen Änderungen zur vorherigen Spezifikation.</td>
+  </tr>
+  <tr>
+   <td>{{Specname("CSS3 Transitions", "#animatable-properties", "Übergängen bei Pseudoelement Eigenschaften")}}</td>
+   <td>{{Spec2("CSS3 Transitions")}}</td>
+   <td>Erlaubt Übergänge bei Eigenschaften, die für Pseudoelemente definiert sind.</td>
+  </tr>
+  <tr>
+   <td>{{Specname("CSS3 Animations", "", "Animationen bei Pseudoelement Eigenschaften")}}</td>
+   <td>{{Spec2("CSS3 Animations")}}</td>
+   <td>Erlaubt Animationen bei Eigenschaften, die für Pseudoelemente definiert sind.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#gen-content', '::after')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Führt die Zwei-Doppelpunkte-Syntax ein.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html#before-after-content', '::after')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ursprüngliche Definition, unter Verwendung der Ein-Doppelpunkt-Syntax</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.selectors.after")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{Cssxref("::before")}}, {{cssxref("content")}}</li>
+</ul>
diff --git a/files/de/web/css/_doublecolon_backdrop/index.html b/files/de/web/css/_doublecolon_backdrop/index.html
new file mode 100644
index 0000000000..d0edc3021e
--- /dev/null
+++ b/files/de/web/css/_doublecolon_backdrop/index.html
@@ -0,0 +1,49 @@
+---
+title: '::backdrop'
+slug: 'Web/CSS/::backdrop'
+tags:
+  - CSS
+  - Layout
+  - NeedsContent
+  - Pseudoelement
+  - Referenz
+  - Vollbild
+  - Web
+translation_of: 'Web/CSS/::backdrop'
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>Jedes Element im Stack des <a href="https://fullscreen.spec.whatwg.org/#top-layer">Toplayer</a>s hat ein <dfn><code>::backdrop</code></dfn> {{cssxref("pseudo-elements", "pseudo-element")}}. Dieses Pseudoelement ist eine Box, die direkt unterhalb des Elements gerendert wird (und oberhalb des Elements unterhalb des Elements im Stack, falls es eines gibt), innerhalb desselben Toplayers.</p>
+
+<p class="note">Das <code>::backdrop</code> Pseudoelement kann dazu verwendet werden, um einen Hintergrund zu erstellen, der das dahinterliegende Dokument für ein Element im Stack des Toplayers versteckt, z. B. für das Element, das im Vollbild dargestellt wird, wie in dieser Spezifikation beschrieben.</p>
+
+<p>Es erbt von keinem Element und vererbt auch nicht. Es gelten keine Einschränkungen bezüglich der Eigenschaften, die auf dieses Pseudoelement angewendet werden können.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Fullscreen', '#::backdrop-pseudo-element', '::backdrop')}}</td>
+   <td>{{Spec2('Fullscreen')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.selectors.backdrop")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{HTMLElement("dialog")}}</li>
+</ul>
diff --git a/files/de/web/css/_doublecolon_before/index.html b/files/de/web/css/_doublecolon_before/index.html
new file mode 100644
index 0000000000..080ef608bb
--- /dev/null
+++ b/files/de/web/css/_doublecolon_before/index.html
@@ -0,0 +1,230 @@
+---
+title: '::before (:before)'
+slug: 'Web/CSS/::before'
+tags:
+  - CSS
+  - CSS Pseudoelement
+  - Layout
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+  - Web
+translation_of: 'Web/CSS/::before'
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p><span class="seoSummary"><code>::before</code> erzeugt ein <a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudoelement</a>, dass das erste Kind des gematchten Elements ist. Es wird oft dazu verwendet, um kosmetische Inhalte unter Verwendung der {{cssxref("content")}} Eigenschaft zu einem Element hinzuzufügen. Dieses Element ist standardmäßig inline.</span></p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">/* CSS3 Syntax */
+element::before { <em>Stileigenschaften</em> }
+
+/* CSS2 veraltete Syntax (nur benötigt, um IE8 zu unterstützen) */
+element:before  { <em>Stileigenschaften</em> }
+
+/* Fügt Inhalte vor jedem &lt;p&gt; Element ein */
+p::before { content: "Hallo Welt!"; }</pre>
+
+<p>Die <code>::before</code> Notation (mit zwei Doppelpunkten) wurde in CSS 3 eingeführt, um eine Unterscheidung zwischen <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklassen</a> und <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelementen</a> einzuführen. Browser unterstützen auch die <code>:before</code> Notation, wie sie in CSS 2 eingeführt wurde.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Hinzufügen_von_Anführungszeichen">Hinzufügen von Anführungszeichen</h3>
+
+<p>Ein einfaches Beispiel für die Verwendung von <code>::before</code> Pseudoelementen ist das Hinzufügen von Anführungszeichen. Hier werden <code>::before</code> und <code>::after</code> verwendet, um Anführungszeichen einzufügen.</p>
+
+<h4 id="HTML_Inhalt">HTML Inhalt</h4>
+
+<pre class="brush:html notranslate">&lt;q&gt;Ein paar Anführungszeichen&lt;/q&gt;, sagte er, &lt;q&gt;sind besser als keine&lt;/q&gt;.</pre>
+
+<h4 id="CSS_Inhalt">CSS Inhalt</h4>
+
+<pre class="brush:css notranslate">q::before {
+  content: "«";
+  color: blue;
+}
+q::after {
+  content: "»";
+  color: red;
+}</pre>
+
+<h4 id="Ausgabe">Ausgabe</h4>
+
+<p>{{EmbedLiveSample('Hinzufügen_von_Anführungszeichen', '500', '50')}}</p>
+
+<h3 id="Dekoratives_Beispiel">Dekoratives Beispiel</h3>
+
+<p>Wir können Text oder Bilder innerhalb der {{cssxref("content")}} Eigenschaft fast beliebig stylen.</p>
+
+<h4 id="HTML_Inhalt_2">HTML Inhalt</h4>
+
+<pre class="brush: html notranslate">&lt;span class="ribbon"&gt;Beachte, wo die orange Box ist.&lt;/span&gt;</pre>
+
+<h4 id="CSS_content">CSS content</h4>
+
+<pre class="brush: css notranslate">.ribbon {
+  background-color: #5BC8F7;
+}
+
+.ribbon::before {
+  content: "Sieh dir diese orange Box an.";
+  background-color: #FFBA10;
+  border-color: black;
+  border-style: dotted;
+}</pre>
+
+<h4 id="Ausgabe_2">Ausgabe</h4>
+
+<p>{{EmbedLiveSample('Dekoratives_Beispiel', 450, 60)}}</p>
+
+<h3 id="Todo-Liste">Todo-Liste</h3>
+
+<p>In diesem Beispiel erstellen wir eine einfache Todo-Liste mit Hilfe von Pseudoelementen. Diese Methode kann oft dazu verwendet werden, kleine Änderungen an der Benutzerschnittstelle hinzuzufügen und die User Experience zu verbessern.</p>
+
+<h4 id="HTML_Inhalt_3">HTML Inhalt</h4>
+
+<pre class="brush: html notranslate">&lt;ul&gt;
+  &lt;li&gt;Milch kaufen&lt;/li&gt;
+  &lt;li&gt;Mit Hund Gassi gehen&lt;/li&gt;
+  &lt;li&gt;Trainieren&lt;/li&gt;
+  &lt;li&gt;Code schreiben&lt;/li&gt;
+  &lt;li&gt;Musik spielen&lt;/li&gt;
+  &lt;li&gt;Entspannen&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h4 id="CSS_Inhalt_2">CSS Inhalt</h4>
+
+<pre class="brush: css notranslate">li {
+  list-style-type: none;
+  position: relative;
+  margin: 2px;
+  padding: 0.5em 0.5em 0.5em 2em;
+  background: lightgrey;
+  font-family: sans-serif;
+}
+
+li.done {
+  background: #CCFF99;
+}
+
+li.done::before {
+  content: '';
+  position: absolute;
+  border-color: #009933;
+  border-style: solid;
+  border-width: 0 0.3em 0.25em 0;
+  height: 1em;
+  top: 1.3em;
+  left: 0.6em;
+  margin-top: -1em;
+  transform: rotate(45deg);
+  width: 0.5em;
+}</pre>
+
+<h4 id="JavaScript_Inhalt">JavaScript Inhalt</h4>
+
+<pre class="brush: js notranslate">var list = document.querySelector('ul');
+list.addEventListener('click', function(ev) {
+  if( ev.target.tagName === 'LI') {
+     ev.target.classList.toggle('done');
+  }
+}, false);
+</pre>
+
+<p>Das obige Beispiel ist ein Livebeispiel. Beachte, dass keine Symbole verwendet werden und dass der Haken in Wirklichkeit das <code>::before</code> ist, dass durch CSS dargestellt wird.</p>
+
+<h4 id="Ausgabe_3">Ausgabe</h4>
+
+<p>{{EmbedLiveSample('Todo-Liste', 400, 300)}}</p>
+
+<h2 id="Hinweise">Hinweise</h2>
+
+<p>Obwohl die Fehlerbehebungen in Firefox 3.5 bzgl. Positionierung es nicht erlauben, Inhalte als ein separates, vorheriges Geschwisterelement zu erstellen (wie die <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#before-after-content">CSS Spezifikation</a> sagt "The :before and :after pseudo-elements elements interact with other boxes [...] as if they were real elements inserted just inside their associated element.", etwa: "Die :before- und :after-Pseudo-Elemente interagieren mit anderen Boxen [...] so als wären sie reale Elemente, die in dem dazugehörigen Element eingefügt wären), können Sie dennoch eingesetzt werden um leichte Verbesserungen in tabellenlosen Layouts (z.B. um ein Element zu zentrieren) zu erhalten. Solange der zu zentrierende Inhalt ein Kindelement ist, können eine vorhergehende und nachfolgende Spalte eingefügt werden ohne eigene Elemente dafür zu verwenden (d.h., es ist eventuell semantisch korrekter, wie unten in dem Beispiel, ein zusätzliches span-Element anstelle jeweils eines leeres div-Elements davor und danach einzufügen). (Und denke immer daran, einem gefloateten Element eine Breite zu geben, andernfalls wird es nicht floaten!)</p>
+
+<h4 id="HTML_Inhalt_4">HTML Inhalt</h4>
+
+<pre class="brush: html notranslate">&lt;div class="example"&gt;
+&lt;span id="floatme"&gt;"Davor umflossen" sollte links vom Viewport erstellt werden
+und Umfluss in dieser Zeile nicht erlauben, sie unterhalb zu umfließen. Genauso sollte
+"Danach umflossen" rechts vom Viewport erscheinen und dieser Zeile nicht erlauben, es unterhalb zu umfließen.&lt;/span&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_Inhalt_3">CSS Inhalt</h4>
+
+<pre class="brush: css notranslate">#floatme {
+  float: left; width: 50%;
+}
+
+/* Um eine leere Spalte zu erhalten, einfach den hexadezimalen Wert für einen nicht umbrechenden Leerraum angeben: \a0 als Attributwert für content (verwende \0000a0 wenn weitere Zeichen folgen) */
+.example::before {
+  content: "Davor umflossen";
+  float: left;
+  width: 25%
+}
+.example::after {
+  content: "Danach umflossen";
+  float: right;
+  width:25%
+}
+
+/* For styling */
+.example::before, .example::after, .first {
+  background: yellow;
+  color: red;
+}</pre>
+
+<h4 id="Ausgabe_4">Ausgabe</h4>
+
+<p>{{EmbedLiveSample("Hinweise")}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-before', '::before')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Keine wesentlichen Änderungen zur vorherigen Spezifikation.</td>
+  </tr>
+  <tr>
+   <td>{{Specname("CSS3 Transitions", "#animatable-properties", "Übergänge bei Pseudoelement Eigenschaften")}}</td>
+   <td>{{Spec2("CSS3 Transitions")}}</td>
+   <td>Erlaubt Übergänge bei Eigenschaften, die für Pseudoelemente definiert sind.</td>
+  </tr>
+  <tr>
+   <td>{{Specname("CSS3 Animations", "", "Animationen bei Pseudoelement Eigenschaften")}}</td>
+   <td>{{Spec2("CSS3 Animations")}}</td>
+   <td>Erlaubt Animationen bei Eigenschaften, die für Pseudoelemente definiert sind.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#gen-content', '::before')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Führt die Zwei-Doppelpunkte-Syntax ein.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html#before-after-content', '::before')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ursprüngliche Definition, unter Verwendung der Ein-Doppelpunkt-Syntax</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibililtät">Browser Kompatibililtät</h2>
+
+<p>{{Compat("css.selectors.before")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{Cssxref("::after")}}, {{cssxref("content")}}</li>
+</ul>
diff --git a/files/de/web/css/_doublecolon_placeholder/index.html b/files/de/web/css/_doublecolon_placeholder/index.html
new file mode 100644
index 0000000000..d63f9b7cc7
--- /dev/null
+++ b/files/de/web/css/_doublecolon_placeholder/index.html
@@ -0,0 +1,150 @@
+---
+title: '::placeholder'
+slug: 'Web/CSS/::placeholder'
+tags:
+  - CSS
+  - Referenz
+translation_of: 'Web/CSS/::placeholder'
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>Das <strong><code>::placeholder</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-Element</a> stellt den <a href="/en-US/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute">Platzhaltertext</a> eines <a href="/en-US/docs/Learn/HTML/Forms">Formular-</a>Elements dar.</p>
+
+<pre class="brush: css no-line-numbers">::placeholder {
+  color: blue;
+  font-size: 1.5em;
+}</pre>
+
+<p>Only the subset of CSS properties that apply to the {{cssxref("::first-line")}} pseudo-element can be used in a rule using <code>::placeholder</code> in its selector.</p>
+
+<div class="note">
+<p><strong>Note:</strong> In Firefox, the appearance of placeholder text is a translucent gray color by default.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Red_text">Red text</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush:html line-numbers language-html">&lt;input placeholder="Type something here!"&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">input::placeholder {
+  color: red;
+  font-size: 1.2em;
+  font-style: italic;
+}</pre>
+
+<h4 id="Ergebnis">Ergebnis</h4>
+
+<p>{{EmbedLiveSample("Red_text", 200, 60)}}</p>
+
+<h3 id="Green_text">Green text</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush:html line-numbers language-html">&lt;input placeholder="Type something here..."&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">input::placeholder {
+  color: green;
+}
+</pre>
+
+<h4 id="Ergebnis_2">Ergebnis</h4>
+
+<p>{{EmbedLiveSample("Green_text", 200, 60)}}</p>
+
+<h2 id="Accessibility_concerns">Accessibility concerns</h2>
+
+<h3 id="Color_contrast">Color contrast</h3>
+
+<h4 id="Contrast_Ratio">Contrast Ratio</h4>
+
+<p>Placeholder text typically has a lighter color treatment to indicate that it is a suggestion for what kind of input will be valid, and is not actual input of any kind.</p>
+
+<p>It is important to ensure that the contrast ratio between the color of the placeholder text and the background of the input is high enough that people experiencing low vision conditions will be able to read it while also making sure there is enough of a difference between the placeholder text and input text color that users do not mistake the placeholder for inputed data.</p>
+
+<p>Color contrast ratio is determined by comparing the luminosity of the placeholder text and the input background color values. In order to meet current <a href="https://www.w3.org/WAI/intro/wcag">Web Content Accessibility Guidelines (WCAG)</a>, a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and bold or larger, or 24px or larger.</p>
+
+<ul>
+ <li><a href="https://webaim.org/resources/contrastchecker/" rel="noopener">WebAIM: Color Contrast Checker</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h4 id="Usability">Usability</h4>
+
+<p>Placeholder text with sufficient color contrast may be interpreted as entered input. Placeholder text will also disappear when a person enters content into an {{htmlelement("input")}} element. Both of these circumstances can interfere with successful form completion, especially for people with cognitive concerns.</p>
+
+<p>An alternate approach to providing placeholder information is to include it outside of the input in close visual proximity, then use <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby</a></code> to programmatically associate the {{HTMLElement("input")}} with its hint.</p>
+
+<p>With this implementation, the hint content is available even if information is entered into the input field, and the input appears free of preexisting input when the page is loaded. Most screen reading technology will use <code>aria-describedby</code> to read the hint after the input's label text is announced, and the person using the screen reader can mute it if they find the extra information unnecessary.</p>
+
+<pre class="brush:html line-numbers language-html">&lt;label for="user-email"&gt;Your email address&lt;/label&gt;
+&lt;span id="user-email-hint" class="input-hint"&gt;Example: jane@sample.com&lt;/span&gt;
+&lt;input id="user-email" aria-describedby="user-email-hint" name="email" type="email"&gt;
+</pre>
+
+<ul>
+ <li><a href="https://www.nngroup.com/articles/form-design-placeholders/">Placeholders in Form Fields Are Harmful — Nielsen Norman Group</a></li>
+</ul>
+
+<h3 id="Windows_High_Contrast_Mode">Windows High Contrast Mode</h3>
+
+<p>Placeholder text will appear with the same styling as user-entered text content when rendered in <a href="/en-US/docs/Web/CSS/-ms-high-contrast">Windows High Contrast Mode</a>. This will make it difficult for some people to determine which content has been entered, and which content is placeholder text.</p>
+
+<ul>
+ <li><a href="http://www.gwhitworth.com/blog/2017/04/how-to-use-ms-high-contrast">Greg Whitworth — How to use -ms-high-contrast</a></li>
+</ul>
+
+<h3 id="Labels">Labels</h3>
+
+<p>Placeholders are not a replacement for the {{htmlelement("label")}} element. Without a label that has been programmatically associated with an input using a combination of the {{htmlattrxref("for", "label")}} and {{htmlattrxref("id")}} attributes, assistive technology such as screen readers cannot parse {{htmlelement("input")}} elements.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/forms/Basic_form_hints">MDN Basic form hints</a></li>
+ <li><a href="https://www.nngroup.com/articles/form-design-placeholders/">Placeholders in Form Fields Are Harmful — Nielsen Norman Group</a></li>
+</ul>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Pseudo-Elements', '#placeholder-pseudo', '::placeholder')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.placeholder")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>The {{cssxref(":placeholder-shown")}} pseudo-class styles an element that <em>has</em> an active placeholder.</li>
+ <li>Related HTML elements: {{HTMLElement("input")}}, {{HTMLElement("textarea")}}</li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms">HTML forms</a></li>
+</ul>
diff --git a/files/de/web/css/_doublecolon_selection/index.html b/files/de/web/css/_doublecolon_selection/index.html
new file mode 100644
index 0000000000..d8d1197db3
--- /dev/null
+++ b/files/de/web/css/_doublecolon_selection/index.html
@@ -0,0 +1,86 @@
+---
+title: '::selection'
+slug: 'Web/CSS/::selection'
+tags:
+  - CSS
+  - CSS Pseudoelement
+  - Layout
+  - Referenz
+  - Web
+translation_of: 'Web/CSS/::selection'
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Das <code>::selection</code> <a href="/de/docs/Web/CSS">CSS</a> Pseudoelement weist dem durch den Benutzer ausgewählten Bereich (z. B. mit der Maus oder einem anderen Zeigegerät) eines Dokuments Regeln zu.</p>
+
+<p>Nur ein kleiner Teil der CSS Eigenschaften kann innerhalb einer Regel benutzt werden, die <code>::selection</code> in ihrem Selektor verwendet: {{cssxref("color")}}, {{cssxref("background")}}, {{cssxref("background-color")}} und {{cssxref("text-shadow")}}. Zu beachten ist insbesondere, dass {{cssxref("background-image")}} ignoriert wird, sowie alle anderen Eigenschaften.</p>
+
+<div class="note">
+<p>{{cssxref("text-shadow")}} in <code>::selection</code> wird von Chrome, Safari und Firefox 17+ unterstützt.</p>
+</div>
+
+<p class="note">Obwohl dieses Pseudoelement in Entwürfen von CSS Selektoren Level 3 war, wurde es während der Candidate Recommendation Phase entfernt, da sein Verhalten nicht genau definiert erschien, besonders in Beziehung zu verschachtelten Elementen, und Interoperabilität war nicht gegeben <a class="external" href="http://lists.w3.org/Archives/Public/www-style/2008Oct/0268.html">(auf Grundlage einer Diskussion in der W3C Style Mailingliste)</a>.<br>
+ <br>
+ Das <code>::selection</code> Pseudoelement wurde in <a href="http://dev.w3.org/csswg/css-pseudo-4/">Pseudo-Elements Level 4</a> wieder hinzugefügt.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Gecko ist die einzige Engine, die einen Präfix benötigt. Dadurch, dass die CSS Parsingregeln verlangen, dass die gesamte Regel verworfen wird, falls ein ungültiges Pseudoelement gefunden wird, müssen zwei separate Regeln geschrieben werden: <code>::-moz-selection, ::selection {...}</code>. Die Regel würde von nicht-Gecko Browsern verworfen werden, da <code>::-moz-selection</code> für sie ungültig ist.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;Dies ist etwas Text für dich, um CSS' ::selection Pseudoklasse zu testen.&lt;/div&gt;
+&lt;p&gt;Versuche auch, etwas Text in diesem &amp;lt;p&amp;gt;&lt;/p&gt; zu markieren</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">/* Zeichnet jeden markierten Text gelb auf rotem Hintergrund */
+::-moz-selection {
+  color: gold; background: red;
+}
+
+::selection {
+  color: gold; background: red;
+}
+
+/* Zeichnet markierten Text innerhalb von Absätzen weiß auf schwarz */
+p::-moz-selection {
+  color: white;
+  background: black;
+}
+
+p::selection {
+  color: white;
+  background: black;
+}</pre>
+
+<h4 id="Output">Output</h4>
+
+<p>{{EmbedLiveSample('Beispiel')}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-selection', '::selection')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Das <code>::selection</code> CSS Pseudoelement wurde für <em>CSS Selectors Level 3</em> entworfen, aber entfernt bevor die Spezifikation Empfehlungsstatus erreicht hat. Es wurde als Teil des <em>Pseudo-Elements Level 4</em> Entwurfs wieder hinzugefügt.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{Compat("css.selectors.selection")}}</p>
diff --git a/files/de/web/css/alias/index.html b/files/de/web/css/alias/index.html
new file mode 100644
index 0000000000..992dcda304
--- /dev/null
+++ b/files/de/web/css/alias/index.html
@@ -0,0 +1,10 @@
+---
+title: alias
+slug: Web/CSS/Alias
+tags:
+  - CSS
+translation_of: Web/CSS/cursor
+---
+<p>Der <code>alias</code> {{cssxref("cursor")}} Wert wird verwendet, um einen Alias oder ein Kürzel zu etwas, das erstellt wird, zu kennzeichnen. Der Aliaszeiger wird als ein Pfeil mit einem kleinen kurvigen Pfeil daneben dargestellt.</p>
+
+<p>In Windows könnte der <code>alias</code> Zeiger so aussehen: <img alt="Image:Cursor-moz_alias.png" class="internal" src="/@api/deki/files/160/=Cursor-moz_alias.png" style="border: medium dotted;"></p>
diff --git a/files/de/web/css/align-content/index.html b/files/de/web/css/align-content/index.html
new file mode 100644
index 0000000000..d899a26cfd
--- /dev/null
+++ b/files/de/web/css/align-content/index.html
@@ -0,0 +1,212 @@
+---
+title: align-content
+slug: Web/CSS/align-content
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Flexible Boxes
+  - Layout
+  - Referenz
+translation_of: Web/CSS/align-content
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>align-content</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft richtet Flexcontainer Zeilen innerhalb des Flexcontainers aus, falls zusätzlicher Leerraum auf der Querachse zur Verfügung steht.</p>
+
+<p>Diese Eigenschaft hat keine Auswirkung auf einzeilige Flexboxen.</p>
+
+<div>{{cssinfo}}</div>
+
+<p>Siehe die <a href="/de/docs/Web/Guide/CSS/Flexible_boxes" title="/en/CSS/Using_CSS_flexible_boxes">Verwendung von flexiblen Boxen</a> für mehr Informationen.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css">/* Packe Zeilen an den Start der Querachse */
+align-content: flex-start;
+
+/* Packe Zeilen an das Ende der Querachse */
+align-content: flex-end;
+
+/* Packe Zeilen um die Mitte der Querachse */
+align-content: center;
+
+/* Verteile Zeilen entlang der Querachse, Start und Ende */
+align-content: space-between;
+
+/* Verteile Zeilen gleichmäßig entlang der Querachse */
+align-content: space-around;
+
+/* Strecke Zeilen, um die gesamte Querachse auszufüllen */
+align-content: stretch;
+
+/* Globale Werte */
+align-content: inherit;
+align-content: initial;
+align-content: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>flex-start</code></dt>
+ <dd>Zeilen werden an den Start der Querachse gepackt. Der Querachsenstartrand der ersten Zeile und des Flexcontainers grenzen aneinander. Jede folgende Zeile grenzt die vorherige.</dd>
+ <dt><code>flex-end</code></dt>
+ <dd>Zeilen werden an das Ende der Querachse gepackt. Der Querachsenstartrand der letzten Zeile und des Flexcontainers grenzen aneinander. Jede vorhergehende Zeile grenzt die nächste.</dd>
+ <dt><code>center</code></dt>
+ <dd>Zeilen werden in die Mitte der Querachse gepackt. Die Zeilen grenzen aneinander und werden mittig innerhalb des des Flexcontainers ausgerichtet. Leerräume zwischen dem Querachsenstartrand des Flexcontainers und der ersten Zeile und zwischen dem Querachsenendrand des Flexcontainers und der letzten Zeile sind gleich.</dd>
+ <dt><code>space-between</code></dt>
+ <dd>Zeilen werden gleichmäßig innerhalb des Flexcontainers verteilt. Die Abstände werden so verteilt, dass sie zwischen zwei angrenzenden Elementen gleich sind. Querachsenstartrand und -endrand des Flexcontainers grenzen an den Rand der ersten bzw. letzten Zeile.</dd>
+ <dt><code>space-around</code></dt>
+ <dd>Zeilen werden gleichmäßig innerhalb des Flexcontainers verteilt, sodass die Leerräume zwischen zwei angrenzenden Zeilen gleich sind. Der Leerraum vor der ersten und nach der letzten Zeile entspricht der Hälfte des Leerraums zwischen zwei angrenzenden Zeilen.</dd>
+ <dt><code>stretch</code></dt>
+ <dd>Zeilen dehnen sich aus, um den verbleibenden Leerraum auszunutzen. Der Freiraum wird gleichmäßig auf alle Zeilen aufgeteilt.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p><strong>HTML:</strong></p>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+  &lt;p&gt;align-content: flex-start&lt;/p&gt;
+  &lt;div id="flex-start"&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;p&gt;align-content: center&lt;/p&gt;
+  &lt;div id="center"&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;p&gt;align-content: flex-end&lt;/p&gt;
+  &lt;div id="flex-end"&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;p&gt;align-content: space-between&lt;/p&gt;
+  &lt;div id="space-between"&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;p&gt;align-content: space-around&lt;/p&gt;
+  &lt;div id="space-around"&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;p&gt;align-content: stretch&lt;/p&gt;
+  &lt;div id="stretch"&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p><strong>CSS:</strong></p>
+
+<pre class="brush: css">#container &gt; div {
+  display: flex;
+  flex-flow: row wrap;
+  width: 140px;
+  height: 140px;
+  background: linear-gradient(-45deg, #78ff8c, #b4ffc8);
+}
+
+#container &gt; div &gt; div {
+  margin: 2px;
+  width: 30px;
+  min-height: 30px;
+  background: linear-gradient(-45deg, #788cff, #b4c8ff);
+}
+
+#flex-start {
+  align-content: flex-start;
+}
+
+#center {
+  align-content: center;
+}
+
+#flex-end {
+  align-content: flex-end;
+}
+
+#space-between {
+  align-content: space-between;
+}
+
+#space-around {
+  align-content: space-around;
+}
+
+#stretch {
+  align-content: stretch;
+}</pre>
+
+<p>Ergibt:</p>
+
+<p>{{ EmbedLiveSample('Beispiele', 600, 550) }}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#align-content', 'align-content')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<h3 id="Support_im_Flex-Layout">Support im Flex-Layout</h3>
+
+<p>{{Compat("css.properties.align-content.flex_context")}}</p>
+
+<h3 id="Support_im_Grid-Layout">Support im Grid-Layout</h3>
+
+<p>{{Compat("css.properties.align-content.grid_context")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/Guide/CSS/Flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Verwenden von CSS Flexible Boxes</a></li>
+</ul>
+
+<div>{{CSSRef}}</div>
diff --git a/files/de/web/css/align-items/index.html b/files/de/web/css/align-items/index.html
new file mode 100644
index 0000000000..169081934b
--- /dev/null
+++ b/files/de/web/css/align-items/index.html
@@ -0,0 +1,107 @@
+---
+title: align-items
+slug: Web/CSS/align-items
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Flexible Boxes
+  - Layout
+  - NeedsExample
+  - Referenz
+  - Web
+translation_of: Web/CSS/align-items
+---
+<p>{{ CSSRef("CSS Flexible Boxes") }}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>align-items</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft richtet Flexelemente der aktuellen Flexlinie genauso wie {{cssxref("justify-content")}} aus, jedoch in senkrechter Richtung.</p>
+
+<p>{{cssinfo}}</p>
+
+<p>Siehe die <a class="new" href="https://developer.mozilla.org/de/docs/Web/Guide/CSS/Flexible_boxes">Verwendung von CSS Flexible Boxes</a> für weitere Eigenschaften und Informationen.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Am Kreuzungsstart ausrichten */
+align-items: flex-start;
+
+/* Am Kreuzungsende ausrichten */
+align-items: flex-end;
+
+/* Elemente um die Kreuzungsachse zentrieren */
+align-items: center;
+
+/* Basislinien der Elemente ausrichten */
+align-items: baseline;
+
+/* Elemente dehnen, um sie einzupassen */
+align-items: stretch;
+
+/* Globale Werte */
+align-items: inherit;
+align-items: initial;
+align-items: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>flex-start</code></dt>
+ <dd>Der Rand der Querachse des Flexelements grenzt an den Startrand der Querachse der Zeile.</dd>
+ <dt><code>flex-end</code></dt>
+ <dd>Der Rand der Querachse des Flexelements grenzt an den Endrand der Querachse der Zeile.</dd>
+ <dt><code>center</code></dt>
+ <dd>Die Außenabstandsbox des Flexelements wird innerhalb der Zeile auf der Querachse zentriert. Falls die vertikale Größe des Elements größer ist als der Flexcontainer, überragt es die Ränder gleichmäßig in beiden Richtungen.</dd>
+ <dt><code>baseline</code></dt>
+ <dd>Alle Flexelemente werden an deren Grundlinien ausgerichtet. Das Element mit dem größten Abstand zwischen seinem Startrand der Querachse und der Grundlinie grenzt an den Startrand der Zeile.</dd>
+ <dt><code>stretch</code></dt>
+ <dd>Flexelemente werden gedehnt, sodass die horizontale Größe der Außenabstandsbox des Elements mit der Zeile übereinstimmt, wobei Breiten- und Höhenbegrenzungen berücksichtigt werden.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>{{ TODO() }}</p>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Flexbox', '#align-items', 'align-items') }}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<h3 id="Support_im_Flex-Layout">Support im Flex-Layout</h3>
+
+<p>{{Compat("css.properties.align-items.flex_context")}}</p>
+
+<h3 id="Support_im_Grid-Layout">Support im Grid-Layout</h3>
+
+<p>{{Compat("css.properties.align-items.grid_context")}}</p>
+
+<p>[1] Firefox unterstützt bis Version 28 nur einzeiliges Flexbox Layout. Um Flexbox Unterstützung für Firefox 18 und 19 zu aktivieren, muss die Einstellung <code>layout.css.flexbox.enabled</code> in <code>about:config</code> auf <code>true</code> gesetzt werden.</p>
+
+<p>[2] In Internet Explorer 10-11 (aber nicht 12+), falls Spaltenflexelemente <code>align-items: center;</code> gesetzt haben und ihr Inhalt zu groß ist, überfließen sie die Grenzen ihres Containers. Siehe <a href="https://github.com/philipwalton/flexbugs#2-column-flex-items-set-to-align-itemscenter-overflow-their-container">Flexbug #2</a> für mehr Informationen.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a class="new" href="https://developer.mozilla.org/de/docs/Web/Guide/CSS/Flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Verwendung von CSS Flexible Boxes</a></li>
+</ul>
diff --git a/files/de/web/css/align-self/index.html b/files/de/web/css/align-self/index.html
new file mode 100644
index 0000000000..6f20312ee8
--- /dev/null
+++ b/files/de/web/css/align-self/index.html
@@ -0,0 +1,95 @@
+---
+title: align-self
+slug: Web/CSS/align-self
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Flexible Boxes
+  - Layout
+  - NeedsExample
+  - Referenz
+translation_of: Web/CSS/align-self
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>align-self</code> <a href="/de/docs/Web/CSS" title="CSS">CSS</a> Eigenschaft richtet Flexelemente der aktuellen Flexzeile aus und überschreibt dabei den Wert von {{cssxref("align-items")}}. Falls der Querachsenabstand irgendeines Flexelements auf <code>auto</code> gesetzt ist, wird <code>align-self</code> ignoriert.</p>
+
+<p>{{cssinfo}}</p>
+
+<p>Siehe die <a class="new" href="/de/docs/Web/Guide/CSS/Flexible_boxes">Verwendung von CSS Flexible Boxes</a> für weitere Eigenschaften und Informationen.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Schlüsselwort Werte */
+align-self: auto
+align-self: flex-start
+align-self: flex-end
+align-self: center
+align-self: baseline
+align-self: stretch
+
+/* Globale Werte */
+align-self: inherit;
+align-self: initial;
+align-self: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Verwendet den {{cssxref("align-items") }} Wert des Elternelements oder <code>stretch</code>, falls das Element kein Elternelement besitzt.</dd>
+ <dt><code>flex-start</code></dt>
+ <dd>Der Rand der Querachse des Flexelements grenzt an den Startrand der Querachse der Zeile.</dd>
+ <dt><code>flex-end</code></dt>
+ <dd>Der Rand der Querachse des Flexelements grenzt an den Endrand der Querachse der Zeile.</dd>
+ <dt><code>center</code></dt>
+ <dd>Die Außenabstandsbox des Flexelements wird innerhalb der Zeile auf der Querachse zentriert. Falls die vertikale Größe des Elements größer ist als der Flexcontainer, überragt es die Ränder gleichmäßig in beiden Richtungen.</dd>
+ <dt><code>baseline</code></dt>
+ <dd>Alle Flexelemente werden an deren Grundlinien ausgerichtet. Das Element mit dem größten Abstand zwischen seinem Startrand der Querachse und der Grundlinie grenzt an den Startrand der Zeile.</dd>
+ <dt><code>stretch</code></dt>
+ <dd>Flexelemente werden gedehnt, sodass die horizontale Größe der Außenabstandsbox des Elements mit der Zeile ist übereinstimmt, wobei Breiten- und Höhenbegrenzungen berücksichtigt werden.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Box Alignment', '#align-self-property', 'align-self') }}</td>
+   <td>{{ Spec2('CSS3 Box Alignment') }}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<h3 id="Support_im_Flex-Layout">Support im Flex-Layout</h3>
+
+<p>{{Compat("css.properties.align-self.flex_context")}}</p>
+
+<h3 id="Support_im_Grid-Layout">Support im Grid-Layout</h3>
+
+<p>{{Compat("css.properties.align-self.grid_context")}}</p>
+
+<p>[1] Firefox unterstützt bis Version 28 nur einzeiliges Flexbox Layout. Um Flexbox Unterstützung für Firefox 18 und 19 zu aktivieren, muss die Einstellung <code>layout.css.flexbox.enabled</code> in <code>about:config</code> auf <code>true</code> gesetzt werden.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a class="new" href="/de/docs/Web/Guide/CSS/Flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Verwendung von CSS Flexible Boxes</a></li>
+</ul>
diff --git a/files/de/web/css/all/index.html b/files/de/web/css/all/index.html
new file mode 100644
index 0000000000..5e2b7191e8
--- /dev/null
+++ b/files/de/web/css/all/index.html
@@ -0,0 +1,140 @@
+---
+title: all
+slug: Web/CSS/all
+tags:
+  - CSS
+  - CSS Cascade
+  - CSS Eigenschaft
+  - Layout
+  - Referenz
+translation_of: Web/CSS/all
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>all</code> <a href="/de/docs/Web/CSS" title="CSS">CSS</a> Kurzform Eigenschaft setzt alle Eigenschaften mit Ausnahme von {{cssxref("unicode-bidi")}} und {{cssxref("direction")}} auf ihren ursprünglichen oder vererbten Wert zurück.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">all: initial;
+all: inherit;
+all: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>initial</code></dt>
+ <dd>Dieses Schlüsselwort gibt an, dass alle dem Element oder dem Elternelement zugewiesenen Eigenschaften auf deren ursprünglichen Wert geändert werden sollen. {{cssxref("unicode-bidi")}} und {{cssxref("direction")}} Werte sind davon nicht betroffen.</dd>
+ <dt><code>inherit</code></dt>
+ <dd>Dieses Schlüsselwort gibt an, dass alle dem Element oder dem Elternelement zugewiesenen Eigenschaften auf den Wert des Elternelements geändert werden sollen. {{cssxref("unicode-bidi")}} und {{cssxref("direction")}} Werte sind davon nicht betroffen.</dd>
+ <dt><code>unset</code></dt>
+ <dd>Dieses Schlüsselwort gibt an, dass alle dem Element oder dem Elternelement zugewiesenen Eigenschaften auf den Wert des Elternelements geändert werden sollen, falls sie vererbbar sind, ansonsten auf ihren ursprünglichen Wert. {{cssxref("unicode-bidi")}} und {{cssxref("direction")}} Werte sind davon nicht betroffen.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p id="HTML"><strong>HTML</strong></p>
+
+<pre class="brush: html">&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
+
+<p id="CSS"><strong>CSS</strong></p>
+
+<pre class="brush: css">html {
+  font-size: small;
+  background-color: #F0F0F0;
+  color: blue;
+}
+
+blockquote {
+  background-color: skyblue;
+  color: red;
+}
+</pre>
+
+<p>Ergibt:</p>
+
+<div id="Beispiel0" style="display: inline-block; width: 225px; vertical-align: top;">
+<h4 id="Keine_all_Eigenschaft">Keine <code>all</code> Eigenschaft</h4>
+
+<pre class="brush: html" style="display: none;">&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
+
+<pre class="brush: css" style="display: none;">html { font-size: small; background-color: <span class="st">#F0F0F0</span>; color:blue; }
+blockquote { background-color: skyblue;  color: red; }</pre>
+{{EmbedLiveSample("Beispiel0", "200", "125")}}
+
+<p>Das {{HTMLElement("blockquote")}} Element verwendet die Standarddarstellung des Browsers zusammen mit einer angepassten Hintergrund- und Textfarbe. Es verhält sich auch wie ein <em>Blockelement</em>: Der Text, der ihm folgt, wird unter ihm angezeigt.</p>
+</div>
+
+<div id="Beispiel1" style="display: inline-block; width: 225px; vertical-align: top;">
+<h4 id="allunset"><code>all:unset</code></h4>
+
+<pre class="brush: html" style="display: none;">&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
+
+<pre class="brush: css" style="display: none;">html { font-size: small; background-color: <span class="st">#F0F0F0</span>; color:blue; }
+blockquote { background-color: skyblue;  color: red; }
+blockquote { all: unset; }</pre>
+{{EmbedLiveSample("Beispiel1", "200", "125")}}
+
+<p>Das {{HTMLElement("blockquote")}} Element verwendet nicht die Standarddarstellung des Browsers: Es ist jetzt ein <em>Inlineelement</em> (ursprünglicher Wert), seine {{cssxref("background-color")}} Eigenschaft ist <code>transparent</code> (ursprünglicher Wert), aber seine {{cssxref("font-size")}} Eigenschaft ist immer noch <code>small</code> (vererbter Wert) und seine {{cssxref("color")}} Eigenschaft ist <code>blue</code> (vererbter Wert).</p>
+</div>
+
+<div id="Beispiel2" style="display: inline-block; width: 225px; vertical-align: top;">
+<h4 id="allinitial"><code>all:initial</code></h4>
+
+<pre class="brush: html" style="display: none;">&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
+
+<pre class="brush: css" style="display: none;">html { font-size: small; background-color: <span class="st">#F0F0F0</span>; color:blue; }
+blockquote { background-color: skyblue;  color: red; }
+blockquote { all: initial; }</pre>
+{{EmbedLiveSample("Beispiel2", "200", "125")}}
+
+<p>Das {{HTMLElement("blockquote")}} Element verwendet nicht die Standarddarstellung des Browsers: Es ist jetzt ein <em>Inlineelement</em> (ursprünglicher Wert), seine {{cssxref("background-color")}} Eigenschaft ist <code>transparent</code> (ursprünglicher Wert), seine {{cssxref("font-size")}} Eigenschaft ist <code>normal</code> (ursprünglicher Wert) und seine {{cssxref("color")}} Eigenschaft ist <code>black</code> (ursprünglicher Wert).</p>
+</div>
+
+<div id="Beispiel3" style="display: inline-block; width: 225px; vertical-align: top;">
+<h4 id="allinherit"><code>all:inherit</code></h4>
+
+<pre class="brush: html" style="display: none;">&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
+
+<pre class="brush: css" style="display: none;">html { font-size: small; background-color: <span class="st">#F0F0F0</span>; color:blue; }
+blockquote { background-color: skyblue; color: red; }
+blockquote { all: inherit; }</pre>
+{{EmbedLiveSample("Beispiel3", "200", "125")}}
+
+<p>Das {{HTMLElement("blockquote")}} Element verwendet nicht die Standarddarstellung des Browsers: Es ist jetzt ein <em>Blockelement</em> (vererbter Wert seines beinhaltenden {{HTMLElement("div")}}), seine {{cssxref("background-color")}} Eigenschaft ist <code>transparent</code> (vererbter Wert), seine {{cssxref("font-size")}} Eigenschaft ist <code>small</code> (vererbter Wert) und seine {{cssxref("color")}} Eigenschaft ist <code>blue</code> (vererbter Wert).</p>
+</div>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Cascade', '#all-shorthand', 'all') }}</td>
+   <td>{{ Spec2('CSS3 Cascade') }}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{Compat("css.properties.all")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<p>Die CSS-weiten Eigenschaften {{cssxref("initial")}}, {{cssxref("inherit")}} und {{cssxref("unset")}}.</p>
diff --git a/files/de/web/css/alternative_style_sheets/index.html b/files/de/web/css/alternative_style_sheets/index.html
new file mode 100644
index 0000000000..c03fa0ba1e
--- /dev/null
+++ b/files/de/web/css/alternative_style_sheets/index.html
@@ -0,0 +1,47 @@
+---
+title: Alternative Style Sheets
+slug: Web/CSS/Alternative_style_sheets
+tags:
+  - CSS
+  - NeedsCompatTable
+translation_of: Web/CSS/Alternative_style_sheets
+---
+<p>Firefox unterstützt <em>alternative Stylesheets</em>. Seiten, die alternative Stylesheets anbieten, erlauben es dem Benutzer, über das Untermenü <em>Ansicht</em> &gt; <em>Webseiten-Stil</em> den Stil auszuwählen, in dem die Seite angezeigt werden soll. Dies ermöglicht es Benutzern, basierend auf deren Bedürfnissen oder Vorlieben mehrere Versionen einer Seite zu sehen.</p>
+
+<p>Eine Webseite kann das {{HTMLElement("link")}} verwenden, um alternative Stylesheets zu einem Dokument hinzuzufügen.</p>
+
+<p>Zum Beispiel:</p>
+
+<pre class="eval"> &lt;link href="default.css" rel="stylesheet" type="text/css" title="Standardstil"&gt;
+ &lt;link href="fancy.css" rel="alternate stylesheet" type="text/css" title="Modisch"&gt;
+ &lt;link href="basic.css" rel="alternate stylesheet" type="text/css" title="Schlicht"&gt;
+</pre>
+
+<p>Mittels dieser drei Stylesheets werden die Stile "Standardstil", "Modisch" und "Schlicht" im Webseiten-Stil Untermenü aufgelistet. Wenn der Benutzer einen Stil auswählt, wird die Darstellung der Seite sofort anhand des Stylesheets neu aufgebaut.</p>
+
+<p>Wenn Stylesheets über ein <code>title</code> Attribut im {{HTMLElement("link")}} oder {{HTMLElement("style")}} Element referenziert werden, wird der Titel dem Benutzer als Auswahlmöglichkeit angeboten. Stylesheets, die mit demselben Titel eingebunden werden, sind Teil der gleichen Auswahl. Stylesheets, die ohne ein <code>title</code> Attribut eingebunden werden, werden immer angewandt.</p>
+
+<p><code>rel="stylesheet"</code> kann dazu verwendet werden, zum Standardstil zu verlinken, und <code>rel="alternate stylesheet"</code>, um alternative Stylesheets zu verlinken. Dies teilt Firefox mit, welcher Stylesheet Titel standardmäßig ausgewählt werden soll und weist diese Standardauswahl in Browsern zu, die alternative Stylesheets nicht unterstützen.</p>
+
+<h2 id="Livebeispiel">Livebeispiel</h2>
+
+<p><a href="/samples/cssref/altstyles/index.html">Hier klicken</a>, um ein funktionierendes Beispiel auszuprobieren.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML4.01", "present/styles.html#h-14.3", "Alternative style sheets")}}</td>
+   <td>{{Spec2("HTML4.01")}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/de/web/css/angle-percentage/index.html b/files/de/web/css/angle-percentage/index.html
new file mode 100644
index 0000000000..6c6f726144
--- /dev/null
+++ b/files/de/web/css/angle-percentage/index.html
@@ -0,0 +1,50 @@
+---
+title: <angle-percentage>
+slug: Web/CSS/angle-percentage
+tags:
+  - CSS
+  - CSS Datentyp
+  - Einheiten
+  - Werte
+  - angle-percentage
+translation_of: Web/CSS/angle-percentage
+---
+<div>{{CSSRef}}</div>
+
+<p>Der <strong><code>&lt;angle-percentage&gt;</code></strong> <a href="/de/docs/Web/CSS">CSS</a>-<a href="/de/docs/Web/CSS/CSS_Types">Datentyp</a> stellt einen Wert dar, der entweder {{Cssxref("angle")}} oder ein {{Cssxref("percentage")}} sein kann.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>Für <code>&lt;angle-percentage&gt;</code>-Werte sind alle Werte syntaktisch gültig, die auch bei {{Cssxref("angle")}} oder {{Cssxref("percentage")}} syntaktisch gültig sind.</p>
+
+<h2 id="Verwendung_mit_calc">Verwendung mit calc()</h2>
+
+<p>Wenn <code>&lt;angle-percentage&gt;</code> ein zulässiger Typ ist, dann wird aus einem Prozentwert ein einfacher {{Cssxref("angle")}} errechnet. Daher kann <code>&lt;angle-percentage&gt;</code> in einem {{Cssxref("calc()")}}-Ausdruck verwendet werden.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Values', '#mixed-percentages', '&lt;angle-percentage&gt;')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#mixed-percentages', '&lt;angle-percentage&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Definiert <code>&lt;angle-percentage&gt;</code>. <code>calc()</code> hinzugefügt.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<p>{{Compat("css.types.angle-percentage")}}</p>
diff --git a/files/de/web/css/angle/index.html b/files/de/web/css/angle/index.html
new file mode 100644
index 0000000000..4003605ed4
--- /dev/null
+++ b/files/de/web/css/angle/index.html
@@ -0,0 +1,86 @@
+---
+title: <angle>
+slug: Web/CSS/angle
+tags:
+  - CSS
+  - CSS Data Type
+  - Layout
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+  - Web
+translation_of: Web/CSS/angle
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Der <a href="/de/CSS" title="CSS">CSS</a> Datentyp <code>&lt;angle&gt;</code> steht für einen Winkel. Dieser kann positiv (rechts, im Uhrzeigersinn) oder negativ (links, gegen den Uhrzeigersinn) sein. Ein Winkel besteht immer aus einer {{cssxref("&lt;number&gt;")}}, gefolgt von einer Einheit (<code>deg</code>, <code>grad</code>, <code>rad</code> or <code>turn</code>). Wie auch bei anderen Werten mit Einheiten darf dazwischen kein Leerschlag sein.</p>
+
+<p>Für statische Elemente können mehrere Schreibweisen zum selben Ergebnis führen (bspw. <code>90deg</code> und <code>-270deg</code> oder <code>1turn</code> und <code>4turn</code>), bei dynamischen Eigenschaften wie zum Beispiel {{ cssxref("transition") }} kann die Schreibweise jedoch eine Auswirkung auf die Animation haben.</p>
+
+<p>Die folgenden Einheiten können verwendet werden:</p>
+
+<dl>
+ <dt><code><a id="deg">deg</a></code></dt>
+ <dd>definiert einen Winkel in <a class="external" href="https://de.wikipedia.org/wiki/Grad_(Winkel)" title="http://en.wikipedia.org/wiki/Degree_%28angle%29">Grad</a>. Ein voller Kreis hat <code>360deg</code>.</dd>
+ <dt><code><a id="grad">grad</a></code></dt>
+ <dd>definiert einen Winkel in <a class="external" href="https://de.wikipedia.org/wiki/Gon" title="http://en.wikipedia.org/wiki/Gradian">Gon</a>. Ein voller Kreis hat <code>400grad</code>.
+ <div class="warning"><strong>Achtung:</strong> Nicht zu verwechseln mit <a href="/de/docs/Web/CSS/angle#deg">Grad (siehe <code>deg</code>)</a>.</div>
+ </dd>
+ <dt><code><a id="rad">rad</a></code></dt>
+ <dd>definiert einen Winkel in <a class="external" href="https://de.wikipedia.org/wiki/Radiant_%28Einheit%29" title="http://en.wikipedia.org/wiki/Radian">Radiant</a>en.  Ein voller Kreis hat 2π Radianten, das entspricht etwa <code>6.2832rad</code>. <code>1rad</code> entspricht 180/π Grad.</dd>
+ <dt><code><a id="turn">turn</a></code></dt>
+ <dd>definiert einen Winkel in der Anzahl Umdrehungen. Ein voller Kreis besteht aus <code>1turn</code>.</dd>
+</dl>
+
+<p>Alle Einheiten können auch den Wert <code>0</code> (oder <code>0deg</code>, <code>0grad</code>, <code>0rad</code>, <code>0turn</code>) annehmen, welcher unabhängig der Einheit immer dasselbe Ergebnis erzielt.</p>
+
+<h2 id="Specifications" name="Specifications">Beispiele</h2>
+
+<table style="width: 100%;">
+ <tbody>
+  <tr>
+   <td><img alt="Angle90.png" class="default internal" src="/@api/deki/files/5704/=Angle90.png"></td>
+   <td>
+    <p>Ein rechter Winkel (nach rechts, im Uhrzeigersinn): <code>90deg = 100grad = 0.25turn</code> <code style="white-space: nowrap;">≈</code><code> 1.5708rad</code></p>
+   </td>
+  </tr>
+  <tr>
+   <td><img alt="Angle180.png" class="default internal" src="/@api/deki/files/5706/=Angle180.png"></td>
+   <td>Ein flacher Winkel: <code>180deg = 200grad = 0.5turn</code><code> </code><code style="white-space: nowrap;">≈</code><code> 3.1416rad</code></td>
+  </tr>
+  <tr>
+   <td><img alt="AngleMinus90.png" class="default internal" src="/@api/deki/files/5707/=AngleMinus90.png"></td>
+   <td>Ein rechter Winkel (nach links, gegen den Uhrzeigersinn): <code>-90deg = -100grad = -0.25turn</code> <code style="white-space: nowrap;">≈</code><code> -1.5708rad</code></td>
+  </tr>
+  <tr>
+   <td><img alt="Angle0.png" class="default internal" src="/@api/deki/files/5708/=Angle0.png"></td>
+   <td>
+    <p>Ein Nullwinkel: <code>0 = 0deg = 0grad = 0turn</code><code> </code><code style="white-space: nowrap;">=</code><code> 0rad</code></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Specifications" name="Specifications">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Values', '#angles', '&lt;angle&gt;') }}</td>
+   <td>{{ Spec2('CSS3 Values') }}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{Compat("css.types.angle")}}</p>
diff --git a/files/de/web/css/angrenzende_geschwisterselektoren/index.html b/files/de/web/css/angrenzende_geschwisterselektoren/index.html
new file mode 100644
index 0000000000..b5ff92dda2
--- /dev/null
+++ b/files/de/web/css/angrenzende_geschwisterselektoren/index.html
@@ -0,0 +1,88 @@
+---
+title: Angrenzende Geschwisterselektoren
+slug: Web/CSS/Angrenzende_Geschwisterselektoren
+tags:
+  - CSS
+  - CSS Referenz
+  - NeedsMobileBrowserCompatibility
+  - Selectors
+  - Selektoren
+translation_of: Web/CSS/Adjacent_sibling_combinator
+---
+<p>{{CSSRef("Selectors")}}</p>
+
+<p>Dies wird Nachbar- oder Nächstes-Geschwister-Element-Selektor genannt. Er selektiert nur das angegebene Element, das dem zuvor angegebenen Element direkt folgt.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>vorheriges_Element</var> + <var>Zielelement</var> { <em>Stileigenschaften</em> }
+</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: css">li:first-of-type + li {
+  color: red;
+}
+</pre>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;One&lt;/li&gt;
+  &lt;li&gt;Two&lt;/li&gt;
+  &lt;li&gt;Three&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<p>{{EmbedLiveSample('Beispiel', 200, 100)}}</p>
+
+<p>Ein weiterer Anwendungsfall ist das Stylen von "Beschriftungs-spans" der darauffolgenden {{HTMLElement("img")}} Elemente:</p>
+
+<pre class="brush: css">img + span.caption {
+  font-style: italic;
+}
+</pre>
+
+<p>matcht die folgenden {{HTMLElement("span")}} Elemente:</p>
+
+<pre class="brush: html">&lt;img src="photo1.jpg"&gt;&lt;span class="caption"&gt;The first photo&lt;/span&gt;
+&lt;img src="photo2.jpg"&gt;&lt;span class="caption"&gt;The second photo&lt;/span&gt;
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#adjacent-sibling-combinators', 'next-sibling combinator')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#adjacent-selectors', 'Adjacent sibling selectors')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.selectors.adjacent_sibling")}}
+
+<p>[1] Internet Explorer 7 aktualisiert den Style nicht korrekt, wenn ein Element dynamisch vor einem Element platziert wurde, das auf den Selektor gepasst hat. Wenn in Internet Explorer 8 ein Element durch Klick auf einen Link dynamisch eingefügt wird, wird der <code>:first-child</code>-Stil nicht angewandt bis der Link den Fokus verliert.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/CSS/Allgemeine_Geschwisterselektoren">Allgemeine Geschwisterselektoren</a></li>
+</ul>
diff --git a/files/de/web/css/animation-delay/index.html b/files/de/web/css/animation-delay/index.html
new file mode 100644
index 0000000000..d6dd7702b9
--- /dev/null
+++ b/files/de/web/css/animation-delay/index.html
@@ -0,0 +1,78 @@
+---
+title: animation-delay
+slug: Web/CSS/animation-delay
+tags:
+  - CSS
+  - CSS Animationen
+  - CSS Eigenschaft
+  - Experimentell
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/animation-delay
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>animation-delay</code> <a href="/en-US/docs/CSS" title="CSS">CSS</a> Eigenschaft gibt an, wann eine Animation starten soll. Dies lässt die Animationssequenz einige Zeit später starten nachdem sie einem Element zugewiesen wurde.</p>
+
+<p>Ein Wert von <code>0s</code>, welcher der Standardwert für die Eigenschaft ist, gibt an, dass die Animation starten soll sobald sie zugewiesen wird. Andernfalls legt der Wert eine Verzögerung von dem Moment fest, an dem die Animation dem Element zugewiesen wird; die Animation startet um diesen Wert verzögert nachdem sie zugewiesen wurde.</p>
+
+<p>Falls ein negativer Wert für die Animationsverzögerung zugewiesen wird,  wird die Animation sofort ausgeführt. Jedoch wird sie so dargestellt, als ob sie vor dem Animationszyklus begonnen hat. Zum Beispiel, wenn Sie <code>-1s</code> als die Animationsverzögerungszeit angeben, wird die Animation sofort starten, allerdings 1 Sekunde innerhalb der Animationssequenz.</p>
+
+<p>Falls Sie einen negativen Wert für die Animationsverzögerung angeben, der Startwert jedoch implizit ist, wird der Moment, an dem die Animation dem Element zugewiesen wird, als Startwert verwendet.</p>
+
+<p>Es ist oft einfacher, die Kurzform Eigenschaft {{cssxref("animation")}} zu verwenden, um alle Animationseigenschaften auf einmal zu setzen.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="twopartsyntaxbox">{{csssyntax}}
+</pre>
+
+<pre>animation-delay: 3s
+animation-delay: 2s, 4ms
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>&lt;time&gt;</code></dt>
+ <dd>Der Zeitversatz von dem Zeitpunkt, an dem die Animation dem Element zugewiesen wird, nach dem die Animation starten soll. Dieser kann entweder in Sekunden angegeben werden (mittels <code>s</code> als Einheit) oder in Millisekunden (mittels <code>ms</code> als Einheit). Falls keine Einheit angegeben wird, ist der Ausdruck ungültig.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Siehe <a href="/de/docs/Web/Guide/CSS/CSS_Animationen_nutzen" title="CSS/CSS_animations">CSS Animationen</a> für Beispiele.</p>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Animations', '#animation-delay', 'animation-delay')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser-Kompatibilität</h2>
+
+{{Compat("css.properties.animation-delay")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/Guide/CSS/CSS_Animationen_nutzen" title="Tutorial about CSS animations">CSS Animationen nutzen</a></li>
+ <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
+</ul>
diff --git a/files/de/web/css/animation-direction/index.html b/files/de/web/css/animation-direction/index.html
new file mode 100644
index 0000000000..0f62a3b74f
--- /dev/null
+++ b/files/de/web/css/animation-direction/index.html
@@ -0,0 +1,91 @@
+---
+title: animation-direction
+slug: Web/CSS/animation-direction
+tags:
+  - CSS
+  - CSS Animationen
+  - CSS Eigenschaft
+  - Experimentell
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/animation-direction
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>animation-direction</code> CSS Eigenschaft gibt an, ob die Animation rückwärts oder in Wechelzyklen abgespielt werden soll.</p>
+
+<p>Es ist oft einfacher, die Kurzschreibweise {{cssxref("animation")}} zu verwenden, um alle Animationseigenschaften auf einmal zu setzen.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Einzelne Animation */
+animation-direction: normal;
+animation-direction: reverse;
+animation-direction: alternate;
+animation-direction: alternate-reverse;
+
+/* Mehrere Animationen */
+animation-direction: normal, reverse;
+animation-direction: alternate, reverse, normal;
+
+/* Globale Werte */
+animation-direction: inherit;
+animation-direction: initial;
+animation-direction: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Die Animation wird in jedem Durchlauf vorwärts abgespielt. In anderen Worten, jedesmal, wenn der nächste Zyklus der Animation beginnt, wird die Animation auf den Anfangszustand zurückgesetzt und beginnt erneut. Dies ist die Standardeinstellung der Animationsrichtung.</dd>
+ <dt><code>alternate</code></dt>
+ <dd>Die Animation ändert in jedem Durchlauf die Richtung. Wenn die Animation umgekehrt abgespielt wird, werden die Animationsschritte rückwärts ausgeführt. Des weiteren werden Timingfunktionen ebenfalls umgekehrt; zum Beispiel wird eine <code>ease-in</code> Animation durch eine <code>ease-out</code> Animation ersetzt, wenn sie rückwärts abgespielt wird. Die Zählung zur Bestimmung, ob es sich um eine gerade oder ungerade Iteration handelt, beginnt bei eins.</dd>
+ <dt><code>reverse</code></dt>
+ <dd>Die Animation wird in jedem Durchlauf rückwärts abgespielt. Jedes Mal, wenn der nächste Zyklus der Animation beginnt, wird die Animation auf den Endzustand zurückgesetzt und beginnt erneut.</dd>
+ <dt><code>alternate-reverse</code></dt>
+ <dd>Die Animation wird beim ersten Durchlauf rückwärts abgespielt, beim nächsten vorwärts und fährt danach abwechselnd fort. Die Zählung zur Bestimmung, ob es sich um eine gerade oder ungerade Iteration handelt, beginnt bei eins.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Siehe <a href="/de/docs/Web/Guide/CSS/CSS_Animationen_nutzen" title="CSS/CSS_animations">CSS Animationen</a> für Beispiele.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Animations', '#animation-direction', 'animation-direction')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>For the two new values, see the <a href="http://lists.w3.org/Archives/Public/www-style/2011May/0090.html">W3C discussion</a>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{Compat("css.properties.animation-direction")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/Guide/CSS/CSS_Animationen_nutzen" title="Tutorial about CSS animations">CSS Animationen nutzen</a></li>
+ <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
+</ul>
diff --git a/files/de/web/css/animation-duration/index.html b/files/de/web/css/animation-duration/index.html
new file mode 100644
index 0000000000..e602ec194d
--- /dev/null
+++ b/files/de/web/css/animation-duration/index.html
@@ -0,0 +1,79 @@
+---
+title: animation-duration
+slug: Web/CSS/animation-duration
+tags:
+  - CSS
+  - CSS Animationen
+  - CSS Eigenschaft
+  - Experimentell
+  - Layout
+  - Referenz
+translation_of: Web/CSS/animation-duration
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>animation-duration</code> CSS Eigenschaft bestimmt die Ablaufdauer einer Animation.</p>
+
+<p>Der Standartwert ist <code>0s</code>, somit wird keine Animation ausgeführt.</p>
+
+<p>Anstelle von <code>animation-duration</code> kann auch die Kurzschreibweise {{ cssxref("animation") }} verwendet werden.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css">animation-duration: 6s;
+animation-duration: 120ms;
+animation-duration: 1s, 15s;
+animation-duration: 10s, 30s, 230ms;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>&lt;time&gt;</code></dt>
+ <dd>Die Ablaufdauer der Animation wird in Sekunden (<code>s</code>) oder Millisekunden (<code>ms</code>) angegeben. Ohne Angabe einer Masseinheit ist der Wert ungültig. Negative Werte sind nicht zulässig.</dd>
+</dl>
+
+<div class="note"><strong>Hinweis:</strong> Einige ältere Implementierungen mit Präfix interpretieren negative Werte als <code>0s</code>.</div>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Siehe <a href="/en/CSS/CSS_animations" title="en/CSS/CSS_animations">CSS animations</a></p>
+
+<h2 id="Specifications" name="Specifications">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Animations', '#animation-duration', 'animation-duration') }}</td>
+   <td>{{ Spec2('CSS3 Animations') }}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{Compat("css.properties.animation-duration")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/Guide/CSS/CSS_Animationen_nutzen" title="Tutorial about CSS animations">CSS Animationen nutzen</a></li>
+ <li>{{domxref("AnimationEvent")}}</li>
+</ul>
diff --git a/files/de/web/css/animation-fill-mode/index.html b/files/de/web/css/animation-fill-mode/index.html
new file mode 100644
index 0000000000..adfb23a43a
--- /dev/null
+++ b/files/de/web/css/animation-fill-mode/index.html
@@ -0,0 +1,145 @@
+---
+title: animation-fill-mode
+slug: Web/CSS/animation-fill-mode
+tags:
+  - CSS
+  - CSS Animationen
+  - CSS Eigenschaft
+  - Experimentell
+  - Referenz
+translation_of: Web/CSS/animation-fill-mode
+---
+<div>{{ CSSRef() }}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p><code>animation-fill-mode</code> definiert den Zustand einer Animation vor und nach deren Ablauf.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="twopartsyntaxbox">{{csssyntax}}
+</pre>
+
+<pre>animation-fill-mode: none
+animation-fill-mode: forwards
+animation-fill-mode: backwards
+animation-fill-mode: both
+
+<strong>The # indicates that several values may be given, separated by commas.
+Each applies to the animation defined in the same order in </strong>animation-name<code>.</code>
+animation-fill-mode: none, backwards
+animation-fill-mode: both, forwards, none
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Das Element nimmt keine Werte der Animation an.</dd>
+ <dt><code>forwards</code></dt>
+ <dd>Das Element nimmt nach Ablauf die Werte des letzten Animationsschrittes an, unter der Berücksichtigung von {{ cssxref("animation-direction") }} und {{ cssxref("animation-iteration-count") }}:
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col"><code>animation-direction</code></th>
+    <th scope="col"><code>animation-iteration-count</code></th>
+    <th scope="col">Letzte keyframe Regel</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>normal</code></td>
+    <td>gerade oder ungerade</td>
+    <td><code>100%</code> oder <code>to</code></td>
+   </tr>
+   <tr>
+    <td><code>reverse</code></td>
+    <td>gerade oder ungerade</td>
+    <td><code>0%</code> oder <code>from</code></td>
+   </tr>
+   <tr>
+    <td><code>alternate</code></td>
+    <td>gerade</td>
+    <td><code>0%</code> oder <code>from</code></td>
+   </tr>
+   <tr>
+    <td><code>alternate</code></td>
+    <td>ungerade</td>
+    <td><code>100%</code> oder <code>to</code></td>
+   </tr>
+   <tr>
+    <td><code>alternate-reverse</code></td>
+    <td>gerade</td>
+    <td><code>100%</code> oder <code>to</code></td>
+   </tr>
+   <tr>
+    <td><code>alternate-reverse</code></td>
+    <td>ungerade</td>
+    <td><code>0%</code> oder <code>from</code></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code>backwards</code></dt>
+ <dd>Das Element nimmt die Werte des ersten Animationsschrittes an und behält diesen auch während der {{ cssxref("animation-delay") }} Zeit. {{ cssxref("animation-direction") }} wird wie folgt gehandhabt:
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col"><code>animation-direction</code></th>
+    <th scope="col">Erste keyframe Regel</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>normal</code> oder <code>alternate</code></td>
+    <td><code>0%</code> oder <code>from</code></td>
+   </tr>
+   <tr>
+    <td><code>reverse</code> oder <code>alternate-reverse</code></td>
+    <td><code>100%</code> oder <code>to</code></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code>both</code></dt>
+ <dd>Vereint die Werte <span id="cke_bm_70S" style="display: none;"> </span><code>backwards</code><span id="cke_bm_70E" style="display: none;"> </span> und <code>forwards</code>.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: css">h1 {
+  animation-fill-mode: forwards;
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Animations', '#animation-fill-mode', 'animation-fill-mode') }}</td>
+   <td>{{ Spec2('CSS3 Animations') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser Kompatibilität</h2>
+
+<p>{{Compat("css.properties.animation-fill-mode")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Tutorials/Using_CSS_animations" title="Tutorial about CSS animations">Using CSS animations</a></li>
+ <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li>
+</ul>
diff --git a/files/de/web/css/animation-iteration-count/index.html b/files/de/web/css/animation-iteration-count/index.html
new file mode 100644
index 0000000000..a1e7d3c3e9
--- /dev/null
+++ b/files/de/web/css/animation-iteration-count/index.html
@@ -0,0 +1,75 @@
+---
+title: animation-iteration-count
+slug: Web/CSS/animation-iteration-count
+tags:
+  - CSS
+  - CSS Animationen
+  - CSS Eigenschaft
+  - Experimentell
+  - Referenz
+translation_of: Web/CSS/animation-iteration-count
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft <code>animation-iteration-count</code>  legt die Anzahl Wiederholungen der Animation fest.</p>
+
+<p>Meistens wird die Kurzform {{ cssxref("animation") }} genutzt, um alle Eigenschaften der Animation auf einen Blick zu haben.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="twopartsyntaxbox">{{csssyntax}}
+</pre>
+
+<pre>animation-iteration-count: infinite
+animation-iteration-count: 3
+animation-iteration-count: 2.3
+
+animation-iteration-count: 2, 0, infinite
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>infinite</code></dt>
+ <dd>Die Animation wird unbegrenzt wiederholt.</dd>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>Die Anzahl Wiederholungen der Animation. Standartmässig ist dieser Wet <code>1</code>. Negative Werte sind nicht zulässig. Es können auch Dezimalzahlen genutzt werden um nur einen Teil der Animation abzuspielen (z. B. <code>0.5</code> spielt die nur die Halbe Animation ab).</dd>
+</dl>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Siehe <a href="/en-US/docs/CSS/Using_CSS_animations">CSS Animationen</a>.</p>
+
+<h2 id="Specifications" name="Specifications">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Animations', '#animation-iteration-count', 'animation-iteration-count') }}</td>
+   <td>{{ Spec2('CSS3 Animations') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser Kompatibilität</h2>
+
+<p>{{Compat("css.properties.animation-iteration-count")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Tutorials/Using_CSS_animations" title="Tutorial about CSS animations">Using CSS animations</a></li>
+ <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li>
+</ul>
diff --git a/files/de/web/css/animation-name/index.html b/files/de/web/css/animation-name/index.html
new file mode 100644
index 0000000000..5b755b8b35
--- /dev/null
+++ b/files/de/web/css/animation-name/index.html
@@ -0,0 +1,86 @@
+---
+title: animation-name
+slug: Web/CSS/animation-name
+tags:
+  - CSS
+  - CSS Animationen
+  - CSS Eigenschaft
+  - Experimentell
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/animation-name
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>animation-name</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft definiert eine Liste von Animationen, welche dem Element zugeortnet werden sollen. Jeder name steht für eine {{cssxref("@keyframes")}} Regel, welche den Ablauf der Animation definiert.</p>
+
+<p>Meistens wird die Kurzform {{cssxref("animation")}} genutzt, um alle Eigenschaften der Animation auf einen Blick zu haben.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">animation-name: none;
+animation-name: test_05;
+animation-name: -specific;
+animation-name: sliding-vertically;
+
+animation-name: test1;
+animation-name: test1, animation4;
+animation-name: none, -moz-specific, sliding;
+
+/* Globale Werte */
+animation-name: initial;
+animation-name: inherit;
+animation-name: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Keine Animation soll abgespielt werden. Dieser Wert ermöglicht das deaktivieren einer Animation, ohne die dazugehörigen Eigenschaften und Regeln zu ändern.</dd>
+ <dt><code>IDENT</code></dt>
+ <dd>Eine beliebige Zeichenkette aus den Buchstaben <code>a</code> bis <code>z</code>, Zahlen <code>0</code> bis <code>9</code>, Bodenstriche (<code>_</code>), und oder Bindestriche (<code>-</code>). Das erste Zeichen muss ein Buchstabe oder einer der beiden zugelassenen Striche sein. Es dürfen nicht zwei hintereinandeflogende Striche am Anfang stehen.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Siehe <a href="/de/docs/Web/Guide/CSS/CSS_Animationen_nutzen" title="CSS/CSS_animations">CSS Animationen</a> für Beispiele.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Animations', '#animation-name', 'animation-name')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{Compat("css.properties.animation-name")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/Guide/CSS/CSS_Animationen_nutzen" title="Tutorial about CSS animations">CSS Animationen nutzen</a></li>
+ <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
+</ul>
diff --git a/files/de/web/css/animation-play-state/index.html b/files/de/web/css/animation-play-state/index.html
new file mode 100644
index 0000000000..7520037251
--- /dev/null
+++ b/files/de/web/css/animation-play-state/index.html
@@ -0,0 +1,84 @@
+---
+title: animation-play-state
+slug: Web/CSS/animation-play-state
+tags:
+  - CSS
+  - CSS Animationen
+  - CSS Eigenschaft
+  - Experimentell
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/animation-play-state
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>animation-play-state</code> <a href="/de/docs/Web/CSS" title="CSS">CSS</a> Eigenschaft bestimmt, ob eine Animation abläuft oder pausiert ist. Der Wert dieser Eigenschaft kann abgefragt werden, um festzustellen, ob die Animation gerade abläuft oder nicht; darüber hinaus kann der Wert auch gesetzt werden, um die das Abspielen der Animation anzuhalten und fortzusetzen.</p>
+
+<p>Wenn eine pausierte Animation fortgesetzt wird, wird sie dort gestartet, wo sie angehalten wurde, nicht vom Anfang der Animationssequenz.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css notranslate">/* Einzelne Animation */
+animation-play-state: running;
+animation-play-state: paused;
+
+/* Mehrere Animationen */
+animation-play-state: paused, running, running;
+
+/* Globale Werte */
+animation-play-state: inherit;
+animation-play-state: initial;
+animation-play-state: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>running</code></dt>
+ <dd>Die Animation läuft aktuell ab.</dd>
+ <dt><code>paused</code></dt>
+ <dd>Die Animation ist aktuell pausiert.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Siehe <a href="/de/docs/Web/Guide/CSS/CSS_Animationen_nutzen" title="CSS/CSS_animations">CSS Animationen</a> für Beispiele.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Animations', '#animation-play-state', 'animation-play-state')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{Compat("css.properties.animation-play-state")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/Guide/CSS/CSS_Animationen_nutzen" title="Tutorial about CSS animations">CSS Animationen nutzen</a></li>
+ <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
+</ul>
diff --git a/files/de/web/css/animation-timing-function/index.html b/files/de/web/css/animation-timing-function/index.html
new file mode 100644
index 0000000000..8f73828d74
--- /dev/null
+++ b/files/de/web/css/animation-timing-function/index.html
@@ -0,0 +1,93 @@
+---
+title: animation-timing-function
+slug: Web/CSS/animation-timing-function
+tags:
+  - CSS
+  - CSS Animationen
+  - CSS Eigenschaft
+  - Layout
+  - Referenz
+translation_of: Web/CSS/animation-timing-function
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>animation-timing-function</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft gibt an, wie eine CSS Animation über die Dauer eines Zyklus verlaufen soll. Die möglichen Werte sind eine oder mehrere {{cssxref("&lt;timing-function&gt;")}}.</p>
+
+<p>Für Schlüsselbildanimationen wird die Timingfunktion zwischen den <a href="/de/docs/Web/CSS/@keyframes">Schlüsselbildern</a> angewandt, anstatt über die gesamte Animation. Mit anderen Worten, die Timingfunktion wird auf den Start des Schlüsselbildes und an dessen Ende angewandt.</p>
+
+<p>Eine Animationstimingfunktion, die innerhalb eines Schlüsselbildblocks definiert wurde, wird auf dieses Schlüsselbild angewandt. Falls keine Timingfunktion für das Schlüsselbild angegeben wurde, wird die Timingfunktion verwendet, die für die gesamte Animation definiert wurde.</p>
+
+<p>Es ist oftmals einfacher, die Kurzform Eigenschaft {{cssxref("animation")}} zu verwenden, um alle Animationseigenschaften auf einmal zu setzen.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css notranslate">/* Schlüsselwortwerte */
+animation-timing-function: ease;
+animation-timing-function: ease-in;
+animation-timing-function: ease-out;
+animation-timing-function: ease-in-out;
+animation-timing-function: linear;
+animation-timing-function: step-start;
+animation-timing-function: step-end;
+
+/* Funktionswerte */
+animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
+animation-timing-function: steps(4, end);
+
+/* Mehrere Animationen */
+animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
+
+/* Globale Werte */
+animation-timing-function: inherited;
+animation-timing-function: initial;
+animation-timing-function: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>&lt;timingfunction&gt;</code></dt>
+ <dd>Jeder {{cssxref("&lt;timing-function&gt;")}} Wert repräsentiert die Timingfunktion, die mit der dazugehörigen zu animierenden Eigenschaft verknüpft wird, die in {{ cssxref("animation-property") }} definiert wird.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Siehe <a href="/de/docs/Web/Guide/CSS/CSS_Animationen_nutzen" title="CSS/CSS_animations">CSS Animationen</a> für Beispiele</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Animations', '#animation-timing-function', 'animation-timing-function')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{Compat("css.properties.animation-timing-function")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/Guide/CSS/CSS_Animationen_nutzen" title="Tutorial about CSS animations">CSS Animationen nutzen</a></li>
+ <li>{{ domxref("AnimationEvent") }}</li>
+</ul>
diff --git a/files/de/web/css/animation/index.html b/files/de/web/css/animation/index.html
new file mode 100644
index 0000000000..77ff733e13
--- /dev/null
+++ b/files/de/web/css/animation/index.html
@@ -0,0 +1,125 @@
+---
+title: animation
+slug: Web/CSS/animation
+tags:
+  - CSS
+  - CSS Animationen
+  - CSS Eigenschaft
+  - Experimentell
+  - Referenz
+translation_of: Web/CSS/animation
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft <code>animation</code> fasst die folgenden Werte zusammen: {{cssxref("animation-name")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-timing-function")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-iteration-count")}} und {{cssxref("animation-direction")}}.</p>
+
+<p>Eine <a href="/de/docs/Web/CSS/CSS_animierbare_Eigenschaften" title="CSS/CSS_transitions#Properties_that_can_be_animated">Beschreibung der animierbaren CSS Eigenschaften</a> ist verfügbar; es sollte auch angemerkt werden, dass diese Beschreibung auch für <a href="/de/docs/Web/Guide/CSS/Verwendung_von_CSS_Übergängen">CSS Übergänge</a> gilt.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* @keyframes Dauer | Timingfunktion | Verzögerung |
+   Anzahl der Iterationen | Richtung | Füllmodus | Abspielstatus | Name */
+  animation: 3s ease-in 1s 2 reverse both paused slidein;
+
+/* @keyframes Dauer | Timingfunktion | Verzögerung | Name */
+  animation: 3s linear 1s slidein;
+
+/* @keyframes Dauer | Name */
+  animation: 3s slidein;
+</pre>
+
+<p>Die Reihenfolge innerhalb jeder Animationsdefinition ist wichtig: Der erste Wert in der Einheit {{cssxref("&lt;time&gt;")}} wird als {{cssxref("animation-duration")}} interpretiert, der zweite als {{cssxref("animation-delay")}}.</p>
+
+<p>Beachte, dass die Reihenfolge auch innerhalb jeder Animationsdefinition wichtig ist, um {{cssxref("animation-name")}} Werte von anderen Schlüsselwörtern zu unterscheiden. Beim Parsen müssen Werte von Schlüsselwörtern, die für Eigenschaften außer {{cssxref("animation-name")}} gültig sind und nicht zuvor in der Kurzschreibweiseeigenschaft gefunden wurden, für diese Eigenschaften anstatt für {{cssxref("animation-name")}} verwendet werden. Zudem müssen bei der Serialisierung die Standardwerte anderer Eigenschaften zumindest in den Fällen ausgegeben werden, in denen es nötig ist, einen {{cssxref("animation-name")}}, der ein gültiger Wert einer anderen Eigenschaft sein könnte, zu unterscheiden, und können in zusätzlichen Fällen ausgegeben werden.</p>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Siehe <a href="/de/docs/Web/Guide/CSS/CSS_Animationen_nutzen" title="CSS/CSS_animations">CSS Animationen</a>.</p>
+
+<h3 id="Zylonenauge">Zylonenauge</h3>
+
+<p>Unter Berücksichtigung aller browserspezifischen Präfixe ist hier eine Zylonenauge-Animation, die lineare Farbverläufe und Animationen verwendet, die in allen Browsern funktioniert:</p>
+
+<pre class="brush: html">&lt;div class="view_port"&gt;
+  &lt;div class="polling_message"&gt;
+    Warte auf Nachrichten
+  &lt;/div&gt;
+  &lt;div class="cylon_eye"&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.polling_message {
+  color: white;
+  float: left;
+  margin-right: 2%;
+}
+
+.view_port {
+  background-color: black;
+  height: 25px;
+  width: 100%;
+  overflow: hidden;
+}
+
+.cylon_eye {
+  background-color: red;
+  background-image: -webkit-linear-gradient(    left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
+  background-image:    -moz-linear-gradient(    left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
+  background-image:      -o-linear-gradient(    left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
+  background-image:         linear-gradient(to right, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
+  color: white;
+  height: 100%;
+  width: 20%;
+
+  -webkit-animation: move_eye 4s linear 0s infinite alternate;
+     -moz-animation: move_eye 4s linear 0s infinite alternate;
+       -o-animation: move_eye 4s linear 0s infinite alternate;
+          animation: move_eye 4s linear 0s infinite alternate;
+}
+
+@-webkit-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
+   @-moz-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
+     @-o-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
+        @keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
+</pre>
+
+<p>{{EmbedLiveSample('Zylonenauge')}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Animations', '#animation', 'animation')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität"><nobr>Browser Kompatibilität</nobr></h2>
+
+{{Compat("css.properties.animation")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/Guide/CSS/CSS_Animationen_nutzen" title="Tutorial about CSS animations">CSS Animationen nutzen</a></li>
+ <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
+</ul>
diff --git a/files/de/web/css/appearance/index.html b/files/de/web/css/appearance/index.html
new file mode 100644
index 0000000000..12a67f3f60
--- /dev/null
+++ b/files/de/web/css/appearance/index.html
@@ -0,0 +1,1532 @@
+---
+title: '-moz-appearance (-webkit-appearance)'
+slug: Web/CSS/appearance
+tags:
+  - CSS
+  - CSS Referenz
+  - nicht Standard
+translation_of: Web/CSS/appearance
+---
+<div>{{non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die CSS-Eigenschaft <code>-moz-appearance</code> wird von Gecko (Firefox) dazu verwendet, um ein Element mit dem nativen Stil der Plattform anzuzeigen, wie er im Betriebssystem eingestellt ist.</p>
+
+<p>Diese Eigenschaft wird häufig in <a href="/de/docs/Mozilla/Tech/XUL" title="en/XUL">XUL</a>-Stylesheets verwendet, um individuelle Eingabefelder passend zur Plattform zu gestalten. Auch die <a href="/de/docs/XBL" title="en/XBL">XBL</a>-Implementierungen der in Mozilla enthaltenen Bedienelemente verwenden diese Eigenschaft.</p>
+
+<div class="note">
+<p>Verwende diese Eigenschaft <em>nicht</em> für Websites: Sie entspricht nicht den Webstandards und ihre Auswirkungen unterscheiden sich von einem Browser zum anderen. Sogar der Wert <code>none</code> hat in den verschiedenen Browsern kein einheitliches Verhalten für alle Formularelemente, und teilweise wird sie überhaupt nicht unterstützt.</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css">/* Partielle Liste verfügbarer Werte in Gecko */
+-moz-appearance: none;
+-moz-appearance: button;
+-moz-appearance: checkbox;
+-moz-appearance: scrollbarbutton-up;
+
+/* Partielle Liste verfügbarer Werte in WebKit/Blink */
+-webkit-appearance: none;
+-webkit-appearance: button;
+-webkit-appearance: checkbox;
+-webkit-appearance: scrollbarbutton-up;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<p><code>&lt;appearance&gt;</code> ist eines der folgenden Schlüsselwörter:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Wert</th>
+   <th>Demo</th>
+   <th>Beschreibung</th>
+  </tr>
+  <tr>
+   <td><code>none</code></td>
+   <td>
+    <div id="sampleNone" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: none; -webkit-appearance: none; color: black;}</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;
+</pre>
+    </div>
+    {{EmbedLiveSample("sampleNone",100,50,"","", "nobutton")}}</td>
+   <td>Keine besondere Formatierung wird angewandt. Dies ist der Standardwert. Beachten Sie aber {{ bug(649849) }} und {{ bug(605985) }}.</td>
+  </tr>
+  <tr>
+   <td><code>button</code></td>
+   <td>
+    <div id="sampleButton" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: button; -webkit-appearance: button; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButton",100,50,"","", "nobutton")}}</td>
+   <td>Das Element wird wie eine Schaltfläche gezeichnet.</td>
+  </tr>
+  <tr>
+   <td><code>button-arrow-down</code></td>
+   <td>
+    <div id="sampleButtonArrowDown" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: button-arrow-down; -webkit-appearance: button-arrow-down; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButtonArrowDown",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>button-arrow-next</code></td>
+   <td>
+    <div id="sampleButtonArrowNext" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: button-arrow-next; -webkit-appearance: button-arrow-next; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButtonArrowNext",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>button-arrow-previous</code></td>
+   <td>
+    <div id="sampleButtonArrowPrevious" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: button-arrow-previous; -webkit-appearance: button-arrow-previous; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButtonArrowPrevious",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>button-arrow-up</code></td>
+   <td>
+    <div id="sampleButtonArrowUp" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: button-arrow-up; -webkit-appearance: button-arrow-up; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButtonArrowUp",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>button-bevel</code></td>
+   <td>
+    <div id="sampleButtonBevel" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: button-bevel; -webkit-appearance: button-bevel; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButtonBevel",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>button-focus</code></td>
+   <td>
+    <div id="sampleButtonFocus" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: button-focus; -webkit-appearance: button-focus; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButtonFocus",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>caret</code></td>
+   <td>
+    <div id="sampleCaret" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: caret; -webkit-appearance: caret; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleCaret",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>checkbox</code></td>
+   <td>
+    <div id="sampleCheckbox" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: checkbox; -webkit-appearance: checkbox; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleCheckbox",100,50,"","", "nobutton")}}</td>
+   <td>Das Element wird wie der innere Teil einer Checkbox gezeichnet.</td>
+  </tr>
+  <tr>
+   <td><code>checkbox-container</code></td>
+   <td>
+    <div id="sampleCheckboxContainer" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: checkbox-container; -webkit-appearance: checkbox-container; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleCheckboxContainer",100,50,"","", "nobutton")}}</td>
+   <td>Das Element wird wie ein Container für eine Checkbox gezeichnet, was einen vorilluminierenden Hintergrundeffekt unter bestimmten Plattformen beinhaltet. Normalerweise beinhaltet er ein Label und eine Checkbox.</td>
+  </tr>
+  <tr>
+   <td><code>checkbox-label</code></td>
+   <td>
+    <div id="sampleCheckboxLabel" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: checkbox-label; -webkit-appearance: checkbox-label; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleCheckboxLabel",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>checkmenuitem</code></td>
+   <td>
+    <div id="sampleCheckmenuitem" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: checkmenuitem; -webkit-appearance: checkmenuitem; height: 20px; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleCheckmenuitem",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>dualbutton</code></td>
+   <td>
+    <div id="sampleDualButton" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: dualbutton; -webkit-appearance: dualbutton; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleDualButton",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>groupbox</code></td>
+   <td>
+    <div id="sampleGroupbox" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: groupbox; -webkit-appearance: groupbox; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleGroupbox",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>listbox</code></td>
+   <td>
+    <div id="sampleListBox" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: listbox; -webkit-appearance: listbox; height:20px; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleListBox",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>listitem</code></td>
+   <td>
+    <div id="sampleListItem" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: listitem; -webkit-appearance: listitem; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleListItem",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>menuarrow</code></td>
+   <td>
+    <div id="sampleMenuArrow" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: menuarrow; -webkit-appearance: menuarrow; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuArrow",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>menubar</code></td>
+   <td>
+    <div id="sampleMenubar" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: menubar; -webkit-appearance: menubar; color: balck; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenubar",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>menucheckbox</code></td>
+   <td>
+    <div id="sampleMenuCheckbox" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: menucheckbox; -webkit-appearance: menucheckbox; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuCheckbox",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>menuimage</code></td>
+   <td>
+    <div id="sampleMenuImage" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: menuimage; -webkit-appearance: menuimage; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuImage",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>menuitem</code></td>
+   <td>
+    <div id="sampleMenuItem" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: menuitem; -webkit-appearance: menuitem; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuItem",100,50,"","", "nobutton")}}</td>
+   <td>Das Element wird wie ein Menüeintrag dargestellt, wobei der Eintrag hervorgehoben wird, wenn sich der Mauscursor darüber befindet.</td>
+  </tr>
+  <tr>
+   <td><code>menuitemtext</code></td>
+   <td>
+    <div id="sampleMenuItemText" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: menuitemtext; -webkit-appearance: menuitemtext; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuItemText",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>menulist</code></td>
+   <td>
+    <div id="sampleMenuList" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: menulist; -webkit-appearance: menulist; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuList",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>menulist-button</code></td>
+   <td>
+    <div id="sampleMenuListButton" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: menulist-button; -webkit-appearance: menulist-button; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuListButton",100,50,"","", "nobutton")}}</td>
+   <td>Das Element wird wie eine Schaltfläche dargestellt, die eine Menüliste darstellt, die geöffnet werden kann.</td>
+  </tr>
+  <tr>
+   <td><code>menulist-text</code></td>
+   <td>
+    <div id="sampleMenuListText" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: menulist-text; -webkit-appearance: menulist-text; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuListText",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>menulist-textfield</code></td>
+   <td>
+    <div id="sampleMenuListTextfield" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: menulist-textfield; -webkit-appearance: menulist-textfield; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuListTextfield",100,50,"","", "nobutton")}}</td>
+   <td>Dieses Element wird wie ein Texteingabefeld einer Menüliste dargestellt. (Nicht für die Windows Plattform implementiert.)</td>
+  </tr>
+  <tr>
+   <td><code>menupopup</code></td>
+   <td>
+    <div id="sampleMenuPopup" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: menupopup; -webkit-appearance: menupopup; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuPopup",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>menuradio</code></td>
+   <td>
+    <div id="sampleMenuRadio" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: menuradio; -webkit-appearance: menuradio; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuRadio",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>menuseparator</code></td>
+   <td>
+    <div id="sampleMenuSeparator" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: menuseparator; -webkit-appearance: menuseparator; color: transparent; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuSeparator",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>meterbar</code></td>
+   <td>
+    <div id="sampleMeterbar" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: meterbar; -webkit-appearance: meterbar; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMeterbar",100,50,"","", "nobutton")}}</td>
+   <td>Neu in Firefox 16</td>
+  </tr>
+  <tr>
+   <td><code>meterchunk</code></td>
+   <td>
+    <div id="sampleMeterchunk" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: meterchunk; -webkit-appearance: meterchunk; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMeterchunk",100,50,"","", "nobutton")}}</td>
+   <td>Neu in Firefox 16</td>
+  </tr>
+  <tr>
+   <td><code>progressbar</code></td>
+   <td>
+    <div id="sampleProgressBar" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: progressbar; -webkit-appearance: progressbar; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleProgressBar",100,50,"","", "nobutton")}}</td>
+   <td>Das Element wird wie ein Fortschrittsbalken dargestellt.</td>
+  </tr>
+  <tr>
+   <td><code>progressbar-vertical</code></td>
+   <td>
+    <div id="sampleProgressBarVertical" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: progressbar-vertical; -webkit-appearance: preogressbar-vertical; color: transparent; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleProgressBarVertical",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>progresschunk</code></td>
+   <td>
+    <div id="sampleProgressChunk" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: progresschunk; -webkit-appearance: progresschunk; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleProgressChunk",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>progresschunk-vertical</code></td>
+   <td>
+    <div id="sampleProgressChunkVertical" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: progresschunk-vertical; -webkit-appearance: progresschunk-vertical; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleProgressChunkVertical",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>radio</code></td>
+   <td>
+    <div id="sampleRadio" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: radio; -webkit-appearance: radio; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleRadio",100,50,"","", "nobutton")}}</td>
+   <td>Das Element wird wie der innere Teil eines Radiobuttons gezeichnet.</td>
+  </tr>
+  <tr>
+   <td><code>radio-container</code></td>
+   <td>
+    <div id="sampleRadioContainer" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: radio-container; -webkit-appearance: radio-container; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleRadioContainer",100,50,"","", "nobutton")}}</td>
+   <td>Das Element wird wie ein Container für einen Radiobutton gezeichnet, was einen vorilluminierenden Hintergrundeffekt unter bestimmten Plattformen beinhaltet. Normalerweise beinhaltet er ein Label und einen Radiobutton.</td>
+  </tr>
+  <tr>
+   <td><code>radio-label</code></td>
+   <td>
+    <div id="sampleRadioLabel" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: radio-label; -webkit-appearance: radio-label; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleRadioLabel",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>radiomenuitem</code></td>
+   <td>
+    <div id="sampleRadioMenuItem" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: radiomenuitem; -webkit-appearance: radiomenuitem; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleRadioMenuItem",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>resizer</code></td>
+   <td>
+    <div id="sampleResizer" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: resizer; -webkit-appearance: resizer; color: transparent; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleResizer",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>resizerpanel</code></td>
+   <td>
+    <div id="sampleResizerPanel" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: resizerpanel; -webkit-appearance: resizerpanel; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleResizerPanel",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scale-horizontal</code></td>
+   <td>
+    <div id="sampleScaleHorizontal" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: scale-horizontal; -webkit-appearance: scale-horizontal; color: transparent; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScaleHorizontal",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scalethumbend</code></td>
+   <td>
+    <div id="sampleThumbEnd" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: scalethumbend; -webkit-appearance: scalethumbend; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleThumbEnd",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scalethumb-horizontal</code></td>
+   <td>
+    <div id="sampleScaleThumbHorizontal" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: scalethumb-horizontal; -webkit-appearance: scalethumb-horizontal; color: transparent; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScaleThumbHorizontal",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scalethumbstart</code></td>
+   <td>
+    <div id="sampleScaleThumbStart" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: scalethumbstart; -webkit-appearance: scalethumbstart; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScaleThumbStart",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scalethumbtick</code></td>
+   <td>
+    <div id="sampleScaleThumbTick" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: scalethumbtick; -webkit-appearance: scalethumbtick; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScaleThumbTick",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scalethumb-vertical</code></td>
+   <td>
+    <div id="sampleScaleThumbVertical" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: scalethumb-vertical; -webkit-appearance: scalethumb-vertical; color: black; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScaleThumbVertical",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scale-vertical</code></td>
+   <td>
+    <div id="sampleScaleVertical" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: scale-vertical; -webkit-appearance: scale-vertical; color: transparent; }</pre>
+
+    <pre class="brush:html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScaleVertical",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scrollbarbutton-down</code></td>
+   <td>
+    <div id="sampleScrollbarButtonDown" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: scrollbarbutton-down; -webkit-appearance: scrollbarbutton-down; color: black; }</pre>
+
+    <pre class="bruh: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarButtonDown",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scrollbarbutton-left</code></td>
+   <td>
+    <div id="sampleScrollbarButtonLeft" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: scrollbarbutton-left; -webkit-appearance: scrollbarbutton-left; color: black; }</pre>
+
+    <pre class="bruh: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarButtonLeft",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scrollbarbutton-right</code></td>
+   <td>
+    <div id="sampleScrollbarButtonRight" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: scrollbarbutton-right; -webkit-appearance: scrollbarbutton-right; color: black; }</pre>
+
+    <pre class="bruh: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarButtonRight",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scrollbarbutton-up</code></td>
+   <td>
+    <div id="sampleScrollbarButtonUp" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: scrollbarbutton-up; -webkit-appearance: scrollbarbutton-up; color: black; }</pre>
+
+    <pre class="bruh: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarButtonUp",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scrollbarthumb-horizontal</code></td>
+   <td>
+    <div id="sampleScrollbarThumbHorizontal" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: scrollbarthumb-horizontal; -webkit-appearance: scrollbarthumb-horizontal; color: black; }</pre>
+
+    <pre class="bruh: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarThumbHorizontal",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scrollbarthumb-vertical</code></td>
+   <td>
+    <div id="sampleScrollbarThumbVertical" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: scrollbarthumb-vertical; -webkit-appearance: scrollbarthumb-vertical; color: black; }</pre>
+
+    <pre class="bruh: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarThumbVertical",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scrollbartrack-horizontal</code></td>
+   <td>
+    <div id="sampleScrollbarTrackHorizontal" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: scrollbartrack-horizontal; -webkit-appearance: scrollbartrack-horizontal; color: black; }</pre>
+
+    <pre class="bruh: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarTrackHorizontal",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scrollbartrack-vertical</code></td>
+   <td>
+    <div id="sampleScrollbarTrackVertical" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: scrollbartrack-vertical; -webkit-appearance: scrollbarbartrack-vertical; color: black; }</pre>
+
+    <pre class="bruh: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarTrackVertical",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>searchfield</code></td>
+   <td>
+    <div id="sampleSearchField" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: searchfield; -webkit-appearance: searchfield; color: black; }</pre>
+
+    <pre class="bruh: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSearchField",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>separator</code></td>
+   <td>
+    <div id="sampleSeparator" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: separator; -webkit-appearance: separator; color: transparent; }</pre>
+
+    <pre class="bruh: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSeparator",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>sheet</code></td>
+   <td>
+    <div id="sampleSheet" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: sheet; -webkit-appearance: sheet; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSheet",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>spinner</code></td>
+   <td>
+    <div id="sampleSpinner" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: spinner; -webkit-appearance: spinner; color: transparent; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSpinner",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>spinner-downbutton</code></td>
+   <td>
+    <div id="sampleSpinnerDownbutton" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: spinner-downbutton; -webkit-appearance: spinner-downbutton; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSpinnerDownbutton",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>spinner-textfield</code></td>
+   <td>
+    <div id="sampleSpinnerTextfield" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: spinner-textfield; -webkit-appearance: spinner-textfield; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSpinnerTextfield",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>spinner-upbutton</code></td>
+   <td>
+    <div id="sampleSpinnerUpbutton" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: spinner-upbutton; -webkit-appearance: spinner-upbutton; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSpinnerUpbutton",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>splitter</code></td>
+   <td>
+    <div id="sampleSplitter" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: splitter; -webkit-appearance: splitter; color: transparent; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSplitter",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>statusbar</code></td>
+   <td>
+    <div id="sampleStatusBar" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: statusbar; -webkit-appearance: statusbar; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleStatusBar",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>statusbarpanel</code></td>
+   <td>
+    <div id="sampleStatusBarPanel" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: statusbarpanel; -webkit-appearance: statusbarpanel; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleStatusBarPanel",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>tab</code></td>
+   <td>
+    <div id="sampleTab" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: tab; -webkit-appearance: tab; height: 20px; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTab",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>tabpanel</code></td>
+   <td>
+    <div id="sampleTabPanel" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: tabpanel; -webkit-appearance: tabpanel; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTabPanel",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>tabpanels</code></td>
+   <td>
+    <div id="sampleTabPanels" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: tabpanels; -webkit-appearance: tabpanels; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTabPanels",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>tab-scroll-arrow-back</code></td>
+   <td>
+    <div id="sampleTabScrollArrowBack" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: tab-scroll-arrow-back; -webkit-appearance: tab-scroll-arrow-back; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTabScrollArrowBack",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>tab-scroll-arrow-forward</code></td>
+   <td>
+    <div id="sampleTabScrollArrowForward" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: tab-scroll-arrow-forward; -webkit-appearance: tab-scroll-arrow-forward; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTabScrollArrowForward",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>textfield</code></td>
+   <td>
+    <div id="sampleTextField" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: textfield; -webkit-appearance: textfield; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTextField",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>textfield-multiline</code></td>
+   <td>
+    <div id="sampleTextfieldMultiline" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: textfield-multiline; -webkit-appearance: textfield-multiline; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTextfieldMultiline",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>toolbar</code></td>
+   <td>
+    <div id="sampleToolbar" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: toolbar; -webkit-appearance: toolbar; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleToolbar",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>toolbarbutton</code></td>
+   <td>
+    <div id="sampleToolbarButton" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: toolbarbutton; -webkit-appearance: toolbarbutton; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleToolbarButton",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>toolbarbutton-dropdown</code></td>
+   <td>
+    <div id="sampleToolbarButtonDropdown" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: toolbarbutton-dropdown; -webkit-appearance: toolbarbutton-dropdown; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleToolbarButtonDropdown",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>toolbargripper</code></td>
+   <td>
+    <div id="sampleToolbarGripper" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: toolbargripper; -webkit-appearance: toolbargripper; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleToolbarGripper",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>toolbox</code></td>
+   <td>
+    <div id="sampleToolbox" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: toolbox; -webkit-appearance: toolbox; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleToolbox",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>tooltip</code></td>
+   <td>
+    <div id="sampleTooltip" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: tooltip; -webkit-appearance: tooltip; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTooltip",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>treeheader</code></td>
+   <td>
+    <div id="sampleTreeHeader" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: treeheader; -webkit-appearance: treeheader; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeHeader",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>treeheadercell</code></td>
+   <td>
+    <div id="sampleTreeHeaderCell" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: treeheadercell; -webkit-appearance: treeheadercell; height:20px; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeHeaderCell",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>treeheadersortarrow</code></td>
+   <td>
+    <div id="sampleTreeHeaderSortArrow" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: treeheadersortarrow; -webkit-appearance: treeheadersortarrow; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeHeaderSortArrow",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>treeitem</code></td>
+   <td>
+    <div id="sampleTreeItem" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: treeitem; -webkit-appearance: treeitem; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeItem",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>treeline</code></td>
+   <td>
+    <div id="sampleTreeLine" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: treeline; -webkit-appearance: treeline; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeLine",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>treetwisty</code></td>
+   <td>
+    <div id="sampleTreeTwisty" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: treetwisty; -webkit-appearance: treetwisty; color: transparent; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeTwisty",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>treetwistyopen</code></td>
+   <td>
+    <div id="sampleTreeTwistyOpen" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: treetwistyopen; -webkit-appearance: treetwistyopen; color: transparent; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeTwistyOpen",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>treeview</code></td>
+   <td>
+    <div id="sampleTreeView" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: treeview; -webkit-appearance: treeview; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeView",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>-moz-mac-unified-toolbar</code></td>
+   <td>
+    <div id="sampleMacUnifiedToolbar" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: -moz-mac-unified-toolbar; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMacUnifiedToolbar",100,50,"","", "nobutton")}}</td>
+   <td><strong>Nur Mac OS X</strong>. Dies ermöglicht die Darstellung von Toolbar und Titelleiste unter Verwendung des einheitlichen Toolbarstils, wie er in  Anwendungen unter Mac OS X 10.4 und neuer zu sehen ist.</td>
+  </tr>
+  <tr>
+   <td>{{ gecko_minversion_inline("2.0") }} <code>-moz-win-borderless-glass</code></td>
+   <td>
+    <div id="sampleWinBorderlessGlass" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: -moz-win-borderless-glass; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinBorderlessGlass",100,50,"","", "nobutton")}}</td>
+   <td><strong>Nur Windows Vista und neuer</strong>. Dieser Stil wendet den Aero Glass Effekt - aber ohne einen Rahmen - auf das Element an.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-win-browsertabbar-toolbox</code></td>
+   <td>
+    <div id="sampleWinBrowsertabbarToolbox" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: -moz-win-browsertabbar-toolbox; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinBrowsertabbarToolbox",100,50,"","", "nobutton")}}</td>
+   <td><strong>Nur Windows Vista und neuer</strong>. Dieser Toolboxstil ist dazu gedacht, um für die Tableiste in einem Browser verwendet zu werden.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-win-communicationstext</code></td>
+   <td>
+    <div id="sampleWinCommunicationstext" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: -moz-win-communicationstext; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinCommunicationstext",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>-moz-win-communications-toolbox</code></td>
+   <td>
+    <div id="sampleWinCommunicationsToolbox" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: -moz-win-communications-toolbox; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinCommunicationsToolbox",100,50,"","", "nobutton")}}</td>
+   <td><strong>Nur Windows Vista und neuer</strong>. Dieser Toolboxstil ist dazu gedacht, in Kommunikations- und Produktivitätsanwendungen verwendet zu werden. Die entsprechende Vordergrundfarbe ist <code>-moz-win-communicationstext</code>.</td>
+  </tr>
+  <tr>
+   <td>{{gecko_minversion_inline("6.0")}} <code>-moz-win-exclude-glass</code></td>
+   <td>
+    <div id="sampleWinExcludeGlass" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: -moz-win-exclude-glass; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinExcludeGlass",100,50,"","", "nobutton")}}</td>
+   <td><strong>Nur Windows Vista und neuer</strong>. Dieser Stil wird dazu verwendet, um den Aero Glass Effekt für das Element auszuschließen.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-win-glass</code></td>
+   <td>
+    <div id="sampleWinGlass" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: -moz-win-glass; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinGlass",100,50,"","", "nobutton")}}</td>
+   <td><strong>Nur Windows Vista und neuer</strong>. Dieser Stil wendet den Aero Glass Effekt auf das Element an.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-win-mediatext</code></td>
+   <td>
+    <div id="sampleWinMediaText" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: -moz-win-mediatext; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinMediaText",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>-moz-win-media-toolbox</code></td>
+   <td>
+    <div id="sampleWinMediaToolbox" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: -moz-win-media-toolbox; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinMediaToolbox",100,50,"","", "nobutton")}}</td>
+   <td><strong>Nur Windows Vista und neuer</strong>. Dieser Toolboxstil ist dazu gedacht, um in Anwendungen verwendet zu werden, die Medienobjekte verwalten. Die Entsprechende Vordergrundfarbe ist <code>-moz-win-mediatext</code>.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-button-box</code></td>
+   <td>
+    <div id="sampleWindowButtonBox" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: -moz-window-button-box; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowButtonBox",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-button-box-maximized</code></td>
+   <td>
+    <div id="sampleWindowButtonBoxMaximized" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: -moz-window-button-box-maximized; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowButtonBoxMaximized",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-button-close</code></td>
+   <td>
+    <div id="sampleWindowButtonClose" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: -moz-window-button-close; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowButtonClose",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-button-maximize</code></td>
+   <td>
+    <div id="sampleWindowButtonMaximize" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: -moz-window-button-maximize; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowButtonMaximize",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-button-minimize</code></td>
+   <td>
+    <div id="sampleWindowButtonMinimize" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: -moz-window-button-minimize; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowButtonMinimize",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-button-restore</code></td>
+   <td>
+    <div id="sampleWindowButtonRestore" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: -moz-window-button-restore; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowButtonRestore",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-frame-bottom</code></td>
+   <td>
+    <div id="sampleWindowFrameBottom" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: -moz-window-frame-bottom; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowFrameBottom",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-frame-left</code></td>
+   <td>
+    <div id="sampleWindowFrameLeft" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: -moz-window-frame-left; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowFrameLeft",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-frame-right</code></td>
+   <td>
+    <div id="sampleWindowFrameRight" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: -moz-window-frame-right; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowFrameRight",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-titlebar</code></td>
+   <td>
+    <div id="sampleWindowTitlebar" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: -moz-window-titlebar; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowTitlebar",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-titlebar-maximized</code></td>
+   <td>
+    <div id="sampleWindowTitlebarMaximized" style="display: none;">
+    <pre class="brush:css">
+ div {-moz-appearance: -moz-window-titlebar-maximized; color: black; }</pre>
+
+    <pre class="brush: html">
+          &lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowTitlebarMaximized",100,50,"","", "nobutton")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Formale_Syntax">Formale Syntax</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush:css">.exampleone {
+	-moz-appearance: toolbarbutton;
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>{The <code>appearance</code> property is currently not present in any newer CSS specification.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>3.0{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>11.0{{property_prefix("-webkit")}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Nicht vollständig unterstützt.</p>
+
+<p>[2] Nur die Werte <code>none</code>, <code>button</code>, und <code>textfield</code> werden unterstützt. Siehe die <a href="https://msdn.microsoft.com/en-us/library/ie/dn793580%28v=vs.85%29.aspx">Dokumentation auf MSDN</a>.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/2004/CR-css3-ui-20040511/#appearance">Definition von <code>appearance</code> in CSS 3 Basic User Interface</a> (Candidate Recommendation vom 2004-05-11), veraltet (Die <code>appearance</code> Eigenschaft wurde in neueren Versionen dieser Spezifikation verworfen.)</li>
+ <li><a class="external" href="https://wiki.csswg.org/spec/css4-ui#dropped-css3-features">Verworfene CSS3 Features der UI Spezifikation</a></li>
+</ul>
diff --git a/files/de/web/css/at-rule/index.html b/files/de/web/css/at-rule/index.html
new file mode 100644
index 0000000000..f32e9daee6
--- /dev/null
+++ b/files/de/web/css/at-rule/index.html
@@ -0,0 +1,61 @@
+---
+title: '@-Regel'
+slug: Web/CSS/At-rule
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/At-rule
+---
+<div>{{cssref}}</div>
+
+<p><span class="seoSummary">Eine <strong>@-Regel</strong> ist ein <a href="/de/docs/Web/CSS/Syntax#CSS_Statements">CSS Statement</a>, das mit einem At-Zeichen beginnt, '<code>@</code>' (<code>U+0040 COMMERCIAL AT</code>), gefolgt von einem Bezeichner und das beim ersten Semikolon, '<code>;</code>' (<code>U+003B SEMICOLON</code>), außerhalb eines <a href="/de/docs/Web/CSS/Syntax#CSS_Deklarationsblöcke">CSS Blocks</a> endet oder am Ende des ersten Blocks.</span></p>
+
+<p>Es gibt verschiedene @-Regeln, bestimmt durch deren Bezeichner, jede mit einer unterschiedlichen Syntax:</p>
+
+<ul>
+ <li>{{cssxref("@charset")}} — Definiert den Zeichensatz, der vom Stylesheet verwendet wird.</li>
+ <li>{{cssxref("@import")}} — Teilt der CSS Engine mit, ein externes Stylesheet einzubinden.</li>
+ <li>{{cssxref("@namespace")}} — Teilt der CSS Engine mit, dass sie alle Inhalte mit einem XML Namespace als Präfix betrachten soll.</li>
+ <li><strong><em>Verschachtelte @-Regeln</em></strong> — Eine Untermenge an verschachtelten Statements, welche als Statement eines Stylesheets als auch innerhalb von bedingten Gruppenregeln verwendet werden können:
+  <ul>
+   <li>{{cssxref("@media")}} — Eine bedingte Gruppenregel, die ihren Inhalt anwendet, falls das Gerät die Kriterien der Bedingung erfüllt, die durch eine <em>Media Query</em> definiert wird.</li>
+   <li>{{cssxref("@supports")}} {{experimental_inline}} — Eine bedingte Gruppenregel, die ihren Inhalt anwendet, falls der Browser die Kriterien der angegebenen Bedingung erfüllt.</li>
+   <li>{{cssxref("@document")}} {{experimental_inline}} — Eine bedingte Gruppenregel, die ihren Inhalt anwendet, falls das Dokument, auf das das Stylesheet angewendet wird, die Kriterien der angegebenen Bedingung erfüllt. <em>(verschoben nach Level 4 der CSS Spezifikation)</em></li>
+   <li>{{cssxref("@page")}} — Beschreibt den Aspekt von Layoutänderungen, welche angewendet werden, wenn das Dokument gedruckt wird.</li>
+   <li>{{cssxref("@font-face")}} — Beschreibt den Aspekt einer externen Schrift, die heruntergeladen werden soll.</li>
+   <li>{{cssxref("@keyframes")}} {{experimental_inline}} — Beschreibt den Aspekt von Zwischenschritten in einer CSS Animationssequenz.</li>
+   <li>{{cssxref("@viewport")}} {{experimental_inline}} — Beschreibt die Aspekte des Viewports auf Geräten mit kleinem Bildschirm. <em>(aktuell im Arbeitsentwurfsstadium)</em></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Bedingte_Gruppenregeln">Bedingte Gruppenregeln</h2>
+
+<p>Ähnlich wie die Werte von Eigenschaften hat jede @-Regel eine andere Syntax. Trotzdem können einige von ihnen zu einer speziellen Kategorie zusammengefasst werden, <strong>bedingte Gruppenregeln</strong> genannt. Diese Statements teilen sich eine gemeinsame Syntax und jedes von ihnen kann <em>verschachtelte Statements</em> — entweder <em>Regelsets</em> oder <em>verschachtelte @-Regeln</em> — beinhalten. Darüber hinaus vermitteln sie alle die gleiche semantische Bedeutung — sie alle verbindet eine Art Bedingung, welche immer entweder <strong>true</strong> oder <strong>false</strong> ergibt. Falls die Bedingung <strong>true</strong> ergibt, werden alle Statements innerhalb der Gruppe angewandt.</p>
+
+<p>Bedingte Gruppenregeln werden in <a href="https://drafts.csswg.org/css-conditional-3/">CSS Conditionals Level 3</a> definiert und sind:</p>
+
+<ul>
+ <li>{{cssxref("@media")}},</li>
+ <li>{{cssxref("@supports")}},</li>
+ <li>{{cssxref("@document")}}. <em>(verschoben nach Level 4 der Spezifikation) </em></li>
+</ul>
+
+<p>Da jede bedingte Gruppe auch verschachtelte Statements beinhalten kann, kann es eine undefinierte Anzahl von Verschachtelungen geben.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Conditional')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/de/web/css/attr()/index.html b/files/de/web/css/attr()/index.html
new file mode 100644
index 0000000000..8da73fd80c
--- /dev/null
+++ b/files/de/web/css/attr()/index.html
@@ -0,0 +1,189 @@
+---
+title: attr
+slug: Web/CSS/attr()
+tags:
+  - CSS
+  - CSS Funktion
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/attr()
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>attr()</code> <a href="/de/docs/Web/CSS">CSS</a> Funktion wird verwendet, um einen Wert eines Attributs des ausgewählten Elements abzurufen und innerhalb des Stylesheets zu verwenden. Sie kann auch für <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelemente</a> verwendet werden. In diesem Fall wird der Wert des Attributs seines ursprünglichen Elements zurückgegeben.</p>
+
+<p>Die <code>attr()</code> Funktion kann innerhalb jeder CSS Eigenschaft verwendet werden. {{ experimental_inline() }}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate"><a href="/de/docs/Web/CSS/Wertdefinitionssyntax" title="CSS/Value_definition_syntax">Formale Syntax</a>: attr( attribute-name &lt;type-or-unit&gt;? [, &lt;fallback&gt; ]? )
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>attribute-name</code></dt>
+ <dd>Entspricht dem Namen des Attributs des HTML Elements, das durch CSS referenziert wird.</dd>
+ <dt><code>&lt;type-</code>or-unit&gt;</dt>
+ <dd>Ist ein Schlüsselwort, das den Typ oder die Einheit des Attributwerts angibt, da in HTML einige Attribute implizite Einheiten haben. Falls die Verwendung von <code>&lt;type-or-unit&gt;</code> als Wert für das angegebene Attribut ungültig ist, ist der <code>attr()</code> Ausdruck ebenfalls ungültig. Falls nicht angegeben, wird standardmäßig <code>string</code> verwendet. Nachfolgend ist eine Liste aller Werte aufgeführt:
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">Schlüsselwort</th>
+    <th scope="col">Assoziierter Typ</th>
+    <th scope="col">Anmerkung</th>
+    <th scope="col">Standardwert</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>string</code></td>
+    <td>{{cssxref("&lt;string&gt;")}}</td>
+    <td>Der Attributwert wird als CSS {{cssxref("&lt;string&gt;")}} Wert behandelt. Er wird nicht erneut geparst, insbesondere werden die Zeichen wie angegeben verwendet, anstatt dass CSS Escapes zu anderen Zeichen umgewandelt werden.</td>
+    <td>An empty string</td>
+   </tr>
+   <tr>
+    <td><code>color</code> {{ experimental_inline() }}</td>
+    <td>{{cssxref("&lt;color&gt;")}}</td>
+    <td>Der Attributwert wird als Hash (3- oder 6-Werthash) oder als Schlüsselwort interpretiert. Er muss ein gültiger CSS {{cssxref("&lt;string&gt;")}} Wert sein.<br>
+     Voran- und nachgestellte Leerzeichen werden abgeschnitten.</td>
+    <td><code>currentColor</code></td>
+   </tr>
+   <tr>
+    <td><code>url</code> {{ experimental_inline() }}</td>
+    <td>{{ cssxref("&lt;uri&gt;") }}</td>
+    <td>Der Attributwert wird als ein String interpretiert, wie er in einer <code>url()</code> Funktion verwendet wird. Relative URLs werden relativ zum ursprünglichen Dokument interpretiert, nicht relativ zum Stylesheet.<br>
+     Voran- und nachgestellte Leerzeichen werden abgeschnitten.</td>
+    <td>Die URL <code>about:invalid</code>, die auf ein nicht existierendes Dokument mit einer allgemeinen Fehlermeldung verweist.</td>
+   </tr>
+   <tr>
+    <td><code>integer</code> {{ experimental_inline() }}</td>
+    <td>{{cssxref("&lt;integer&gt;")}}</td>
+    <td>Der Attributwert wird als CSS {{cssxref("&lt;integer&gt;")}} Wert interpretiert. Falls er nicht gültig ist, d. h. keine Ganzzahl oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.<br>
+     Voran- und nachgestellte Leerzeichen werden abgeschnitten.</td>
+    <td><code>0</code> oder, falls <code>0</code> kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.</td>
+   </tr>
+   <tr>
+    <td><code>number</code> {{ experimental_inline() }}</td>
+    <td>{{cssxref("&lt;number&gt;")}}</td>
+    <td>Der Attributwert wird als CSS {{cssxref("&lt;number&gt;")}} Wertinterpretiert. Falls er nicht gültig ist, d. h. keine Zahl oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.<br>
+     Voran- und nachgestellte Leerzeichen werden abgeschnitten.</td>
+    <td><code>0</code> oder, falls <code>0</code> kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.</td>
+   </tr>
+   <tr>
+    <td><code>length</code> {{ experimental_inline() }}</td>
+    <td>{{cssxref("&lt;length&gt;")}}</td>
+    <td>Der Attributwert wird als CSS {{cssxref("&lt;length&gt;")}} Wert interpretiert, der die Einheit beinhaltet (z. B. <code>12.5em</code>). Falls er ungültig ist, d. h. keine Länge oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.<br>
+     Falls die angegebene Einheit eine relative Länge ist, wandelt <code>attr()</code>sie in eine absolute Länge um.<br>
+     Voran- und nachgestellte Leerzeichen werden abgeschnitten.</td>
+    <td><code>0</code> oder, falls <code>0</code> kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.</td>
+   </tr>
+   <tr>
+    <td><code>em</code>, <code>ex</code>, <code>px</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code>, <code>mm</code>, <code>cm</code>, <code>in</code>, <code>pt</code>, oder <code>pc</code> {{ experimental_inline() }}</td>
+    <td>{{cssxref("&lt;length&gt;")}}</td>
+    <td>Der Attributwert wird als CSS {{cssxref("&lt;number&gt;")}} Wert ohne Einheit interpretiert (z. B. <code>12.5</code>) und in einen {{cssxref("&lt;length&gt;")}} Wert mit der angegebenen Einheit umgewandelt. Falls er nicht gültig ist, d. h. keine Zahl oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.<br>
+     Falls die angegebene Einheit eine relative Länge ist, wandelt <code>attr()</code>sie in eine absolute Länge um.<br>
+     Voran- und nachgestellte Leerzeichen werden abgeschnitten.</td>
+    <td><code>0</code> oder, falls <code>0</code> kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.</td>
+   </tr>
+   <tr>
+    <td><code>angle</code> {{ experimental_inline() }}</td>
+    <td>{{ cssxref("&lt;angle&gt;") }}</td>
+    <td>Der Attributwert wird als CSS {{ cssxref("&lt;angle&gt;") }} Wert interpretiert, der die Einheit beinhaltet (z. B. <code>30.5deg</code>). Falls er ungültig ist, d. h. kein Winkel oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.<br>
+     Voran- und nachgestellte Leerzeichen werden abgeschnitten.</td>
+    <td><code>0deg</code> oder, falls <code>0deg</code> kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.</td>
+   </tr>
+   <tr>
+    <td><code>deg</code>, <code>grad</code>, <code>rad</code> {{ experimental_inline() }}</td>
+    <td>{{ cssxref("&lt;angle&gt;") }}</td>
+    <td>Der Attributwert wird als CSS {{cssxref("&lt;number&gt;")}} Wert ohne Einheit interpretiert (z. B. <code>12.5</code>) und in einen {{ cssxref("&lt;angle&gt;") }} Wert mit der angegebenen Einheit umgewandelt. Falls er nicht gültig ist, d. h. keine Zahl oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.<br>
+     Voran- und nachgestellte Leerzeichen werden abgeschnitten.</td>
+    <td><code>0deg</code> oder, falls <code>0deg</code> kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.</td>
+   </tr>
+   <tr>
+    <td><code>time</code> {{ experimental_inline() }}</td>
+    <td>{{cssxref("&lt;time&gt;")}}</td>
+    <td>Der Attributwert wird als CSS {{cssxref("&lt;time&gt;")}} Wert interpretiert, der die Einheit beinhaltet (z. B. <code>30.5ms</code>). Falls er ungültig ist, d. h. keine Zeit oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.<br>
+     Voran- und nachgestellte Leerzeichen werden abgeschnitten.</td>
+    <td><code>0s</code> oder, falls <code>0s</code> kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.</td>
+   </tr>
+   <tr>
+    <td><code>s</code>, <code>ms</code> {{ experimental_inline() }}</td>
+    <td>{{cssxref("&lt;time&gt;")}}</td>
+    <td>Der Attributwert wird als CSS {{cssxref("&lt;number&gt;")}} Wert ohne Einheit interpretiert (z. B. <code>12.5</code>) und in einen {{cssxref("&lt;time&gt;")}} Wert mit der angegebenen Einheit umgewandelt. Falls er nicht gültig ist, d. h. keine Zeit oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.<br>
+     Voran- und nachgestellte Leerzeichen werden abgeschnitten.</td>
+    <td><code>0s</code> oder, falls <code>0s</code> kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.</td>
+   </tr>
+   <tr>
+    <td><code>frequency</code> {{ experimental_inline() }}</td>
+    <td>{{cssxref("&lt;frequency&gt;")}}</td>
+    <td>Der Attributwert wird als CSS {{cssxref("&lt;frequency&gt;")}} Wert interpretiert, der die Einheit beinhaltet (z. B. <code>30.5kHz</code>). Falls er ungültig ist, d. h. keine Frequenz oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.<br>
+     Voran- und nachgestellte Leerzeichen werden abgeschnitten.</td>
+    <td><code>0Hz</code> oder, falls <code>0Hz</code> kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.</td>
+   </tr>
+   <tr>
+    <td><code>Hz</code>, <code>kHz</code> {{ experimental_inline() }}</td>
+    <td>{{cssxref("&lt;frequency&gt;")}}</td>
+    <td>Der Attributwert wird als CSS {{cssxref("&lt;number&gt;")}} Wert ohne Einheit interpretiert (z. B. <code>12.5</code>) und in einen {{cssxref("&lt;frequency&gt;")}} Wert mit der angegebenen Einheit umgewandelt. Falls er nicht gültig ist, d. h. keine Frequenz oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.<br>
+     Voran- und nachgestellte Leerzeichen werden abgeschnitten.</td>
+    <td><code>0Hz</code> oder, falls <code>0Hz</code> kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.</td>
+   </tr>
+   <tr>
+    <td><code>%</code> {{ experimental_inline() }}</td>
+    <td>{{cssxref("&lt;percentage&gt;")}}</td>
+    <td>Der Attributwert wird als CSS {{cssxref("&lt;number&gt;")}} Wert ohne Einheit interpretiert (z. B. <code>12.5</code>) und in einen {{cssxref("&lt;percentage&gt;")}} Wert umgewandelt. Falls er nicht gültig ist, d. h. keine Zahl oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.<br>
+     Falls der Wert als Länge verwendet wird, wandelt <code>attr()</code>ihn in eine absolute Länge um.<br>
+     Voran- und nachgestellte Leerzeichen werden abgeschnitten.</td>
+    <td><code>0%</code> oder, falls <code>0%</code> kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code>&lt;fallback&gt;</code></dt>
+ <dd>Der Wert, der verwendet wird, falls das zugehörige Attribut fehlt oder einen ungültigen Wert beinhaltet. Der Fallbackwert muss gültig sein, auch wenn er nicht verwendet wird, und darf keinen weiteren <code>attr()</code> Ausdruck beinhalten. Falls <code>attr()</code> nicht der einzige Wert einer Eigenschaft ist, muss dessen <code>&lt;fallback&gt;</code> Wert von dem Typ sein, der durch <code>&lt;type-or-unit&gt;</code> definiert wird. Falls nicht angegeben, wird CSS den Standardwert verwenden, der für jeden <code>&lt;type-or-unit&gt;</code> Wert angegeben ist.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: css notranslate">p:before {
+  content:attr(data-foo) " ";
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;p data-foo="Hallo"&gt;Welt&lt;/p&gt;
+</pre>
+
+<h3 id="Ergebnis">Ergebnis</h3>
+
+<p>{{ EmbedLiveSample("Beispiele", '100%', '60') }}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Values', '#attr', 'attr()') }}</td>
+   <td>{{ Spec2('CSS3 Values') }}</td>
+   <td>Fügt zwei optionale Parameter hinzu; kann in allen Eigenschaften verwendet werden; kann andere Werte als {{cssxref("&lt;string&gt;")}} zurückliefern. Diese Änderungen sind als experimentell {{ experimental_inline() }} markiert und können jederzeit während der CR Phase verworfen werden, falls die Browserunterstützung nicht groß genug ist.</td>
+  </tr>
+  <tr style="vertical-align: top;">
+   <td style="vertical-align: top;">{{ SpecName('CSS2.1', 'generate.html#x18', 'attr()') }}</td>
+   <td style="vertical-align: top;">{{ Spec2('CSS2.1') }}</td>
+   <td style="vertical-align: top;">Beschränkt auf die {{ cssxref("content") }} Eigenschaft; gibt immer {{cssxref("&lt;string&gt;")}} zurück.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.types.attr")}}
diff --git a/files/de/web/css/attributselektoren/index.html b/files/de/web/css/attributselektoren/index.html
new file mode 100644
index 0000000000..a4b6449af3
--- /dev/null
+++ b/files/de/web/css/attributselektoren/index.html
@@ -0,0 +1,122 @@
+---
+title: Attributselektoren
+slug: Web/CSS/Attributselektoren
+tags:
+  - Anfänger
+  - CSS
+  - Reference
+  - Selectors
+translation_of: Web/CSS/Attribute_selectors
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p><span class="seoSummary">Attributselektoren wählen Elemente anhand des Vorhandenseins oder Wertes eines Attributs aus.</span></p>
+
+<dl>
+ <dt><code>[<em>attr</em>]</code></dt>
+ <dd>Repräsentiert ein Element mit einem Attribut attr.</dd>
+ <dt><code>[<em>attr</em>=<em>wert</em>]</code></dt>
+ <dd>Repräsentiert ein Element mit einem Attribut attr, welches exakt den Wert „wert“ enthält.</dd>
+ <dt><code>[<em>attr</em>~=<em>wert</em>]</code></dt>
+ <dd>Repräsentiert ein Element mit einem Attribut attr, welches eine Liste mit durch Leerraum getrennten Wörtern enthält, von denen eines exakt dem Wert „wert“ entspricht.</dd>
+ <dt><code>[<em>attr</em>|=<em>wert</em>]</code></dt>
+ <dd>Repräsentiert ein Element mit einem Attribut attr. Es kann exakt den Wert „wert“ enthalten oder mit einem Wert „wert“ beginnen, dem ein „-“ (U+002D) folgt. Es kann benutzt werden, um anhand von Sprachsubcodes Elemente auszuwählen.</dd>
+ <dt><code>[<em>attr</em>^=<em>wert</em>]</code></dt>
+ <dd>Repräsentiert ein Element mit einem Attribut attr, dessen Wert mit „wert“ beginnt.</dd>
+ <dt><code>[<em>attr</em>$=<em>wert</em>]</code></dt>
+ <dd>Repräsentiert ein Element mit einem Attribut attr, dessen Wert mit „wert“ endet.</dd>
+ <dt><code>[<em>attr</em>*=<em>wert</em>]</code></dt>
+ <dd>Repräsentiert ein Element mit einem Attribut attr, dessen Wert mindestens einmal „wert“ enthält.</dd>
+ <dt><code>[<em>attr operator wert i</em>]</code></dt>
+ <dd>Wenn ein i vor der schließenden Klammer eingefügt wird, wird ein Vergleich ohne Berücksichtigung der Groß-/Kleinschreibung (für Zeichen innerhalb des ASCII Bereichs) durchgeführt.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: css">/* Alle span-Elemente mit dem „lang“-Attribut sind fett */
+span[lang] {font-weight:bold;}
+
+/* Alle span-Elemente in Portugiesisch sind grün */
+span[lang="pt"] {color:green;}
+
+/* Alle span-Elemente in amerikanischem Englisch sind blau  */
+span[lang~="en-us"] {color: blue;}
+
+/* Alle span-Elemente sowohl in vereinfachtem (zh-CN) als auch traditionellem (zh-TW) Chinesisch sind rot */
+span[lang|="zh"] {color: red;}
+
+/* Alle internen Links haben einen goldenen Hintergrund */
+a[href^="#"] {background-color:gold}
+
+/* Alle Links zu mit „.cn“ endenden URLs sind rot */
+a[href$=".cn"] {color: red;}
+
+/* Alle Links zu URLs, die „beispiel“ enthalten, haben einen grauen Hintergrund */
+a[href*="beispiel"] {background-color: #CCCCCC;}
+
+/* Alle email Eingabefelder haben einen blauen Rahmen */
+/* Das matcht jede Großschreibung von "email", z. B. "email", "EMAIL", "eMaIL", etc. */
+input[type="email" i] {border-color: blue;}
+</pre>
+
+<pre class="brush: html">&lt;div class="hallo-beispiel"&gt;
+    &lt;a href="http://example.com"&gt;English:&lt;/a&gt;
+    &lt;span lang="en-us en-gb en-au en-nz"&gt;Hallo Welt!&lt;/span&gt;
+&lt;/div&gt;
+&lt;div class="hallo-beispiel"&gt;
+    &lt;a href="#portugiesisch"&gt;Portugiesisch:&lt;/a&gt;
+    &lt;span lang="pt"&gt;Olá Mundo!&lt;/span&gt;
+&lt;/div&gt;
+&lt;div class="hallo-beispiel"&gt;
+    &lt;a href="http://example.cn"&gt;Chinesisch (Vereinfacht):&lt;/a&gt;
+    &lt;span lang="zh-CN"&gt;世界您好！&lt;/span&gt;
+&lt;/div&gt;
+&lt;div class="hallo-beispiel"&gt;
+    &lt;a href="http://example.cn"&gt;Chinesisch (Traditionell):&lt;/a&gt;
+    &lt;span lang="zh-TW"&gt;世界您好！&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Beispiele', 250, 100)}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Hat den Modifizierer für ASCII schreibungsunabhängige Attributwertselektierung hinzugefügt.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.selectors.attribute")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="https://dev.l-c-n.com/CSS3-selectors/browser-support.php" rel="noreferrer">CSS Selektoren: Grundlegende Browserunterstützung</a></li>
+ <li><a href="https://kimblim.dk/css-tests/selectors/" rel="noreferrer">CSS Selektoren und Pseudoselektoren Browserkompatibilität</a></li>
+</ul>
diff --git a/files/de/web/css/aural/index.html b/files/de/web/css/aural/index.html
new file mode 100644
index 0000000000..37d115443e
--- /dev/null
+++ b/files/de/web/css/aural/index.html
@@ -0,0 +1,17 @@
+---
+title: aural
+slug: Web/CSS/Aural
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/@media/aural
+---
+<div>{{CSSRef}}{{obsolete_header("6.0")}}</div>
+
+<p>Eine <a href="/de/docs/Web/CSS/@media#Mediengruppen">Mediengruppe</a> definiert durch die <a href="/de/docs/Web/CSS">CSS</a> Standards.</p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Diese Mediengruppe wurde in Gecko nie vollständig implementiert und wurde in {{Gecko("6.0")}} entfernt.</p>
+</div>
+
+<p> </p>
diff --git a/files/de/web/css/auto/index.html b/files/de/web/css/auto/index.html
new file mode 100644
index 0000000000..1827bb39d6
--- /dev/null
+++ b/files/de/web/css/auto/index.html
@@ -0,0 +1,26 @@
+---
+title: auto
+slug: Web/CSS/auto
+translation_of: Web/CSS/width
+---
+<div>
+ {{CSSRef}}</div>
+<h2 id="Summary" name="Summary">Übersicht</h2>
+<p><code>auto</code> ist ein Wert, der vom jeweiligen user agent definiert wird. Das Ergebnies variert von Eigenschaft zu Eigenschaft.</p>
+<h2 id="Used_in" name="Used_in">Verwendet in</h2>
+<ul>
+ <li>{{ Cssxref("overflow") }}</li>
+ <li>{{ Cssxref("overflow-x") }}</li>
+ <li>{{ Cssxref("overflow-y") }}</li>
+ <li>{{ Cssxref("cursor") }}</li>
+ <li>{{ Cssxref("width") }}</li>
+ <li>{{ Cssxref("height") }}</li>
+ <li>{{ Cssxref("marker-offset") }}</li>
+ <li>{{ Cssxref("margin") }}</li>
+ <li>margin-* (left|bottom|top|right|start|end)</li>
+ <li>{{ Cssxref("bottom") }}</li>
+ <li>{{ Cssxref("left") }}</li>
+ <li>{{ Cssxref("table-layout") }}</li>
+ <li>{{ Cssxref("z-index") }}</li>
+ <li>{{ Cssxref("column-width") }}</li>
+</ul>
diff --git a/files/de/web/css/backdrop-filter/index.html b/files/de/web/css/backdrop-filter/index.html
new file mode 100644
index 0000000000..910ecc40f8
--- /dev/null
+++ b/files/de/web/css/backdrop-filter/index.html
@@ -0,0 +1,97 @@
+---
+title: backdrop-filter
+slug: Web/CSS/backdrop-filter
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - Grafik
+  - Layout
+  - NeedsContent
+  - NeedsLiveSample
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+  - SVG
+  - SVG Filter
+  - Web
+translation_of: Web/CSS/backdrop-filter
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>backdrop-filter</code> CSS Eigenschaft beschreibt den Bereich hinter einem Element für Effekte wie Unschärfe oder Farbverschiebung, welcher anschließend durch das Element gesehen werden kann, indem die Transparenz/Deckkraft des Elements angepasst wird.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css">/* Schlüsselwortwert */
+backdrop-filter: none;
+
+/* URL zu SVG-Filter */
+backdrop-filter: url(commonfilters.svg#filter);
+
+/* Filterfunktionen */
+backdrop-filter: blur(2px);
+backdrop-filter: brightness(60%);
+backdrop-filter: contrast(40%);
+backdrop-filter: drop-shadow(4px 4px 10px blue);
+backdrop-filter: grayscale(30%);
+backdrop-filter: hue-rotate(120deg);
+backdrop-filter: invert(70%);
+backdrop-filter: opacity(20%);
+backdrop-filter: sepia(90%);
+backdrop-filter: saturate(80%);
+
+/* Mehrere Filterfunktionen */
+backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
+
+/* Globale Werte */
+backdrop-filter: inherit;
+backdrop-filter: initial;
+backdrop-filter: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<p>TODO</p>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: css">backdrop-filter: blur(10px);
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Filters 2.0', '#BackdropFilterProperty', 'backdrop-filter')}}</td>
+   <td>{{Spec2('Filters 2.0')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.backdrop-filter")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref("filter")}}</li>
+ <li><a href="http://www.domneill.com/blog/posts/2015/07/28/my-favourite-new-features-in-webkit-and-safari/">Blog Post von Dom Neill mit Beispielen</a></li>
+ <li><a href="http://product.voxmedia.com/til/2015/2/17/8053347/css-ios-transparency-with-webkit-backdrop-filter">Erstellen von iOS-ähnlichen Transparenzeffekten in CSS mit backdrop-filter</a></li>
+</ul>
diff --git a/files/de/web/css/backface-visibility/index.html b/files/de/web/css/backface-visibility/index.html
new file mode 100644
index 0000000000..f69c76b4d3
--- /dev/null
+++ b/files/de/web/css/backface-visibility/index.html
@@ -0,0 +1,208 @@
+---
+title: backface-visibility
+slug: Web/CSS/backface-visibility
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - Experimentell
+  - Referenz
+translation_of: Web/CSS/backface-visibility
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>backface-visibility</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft bestimmt, ob die Rückfläche eines Elements sichtbar ist, wenn diese dem Benutzer zugewandt ist. Die Rückfläche eines Elements ist immer ein transparenter Hintergrund, der, wenn sichtbar, ein Spiegelbild der Vorderfläche zeigt.</p>
+
+<p>Es gibt Fälle, in denen es nicht gewollt ist, die Vorderfläche eines Elements durch die Rückfläche sehen zu können, wie beispielsweise bei einem Kartenumdreheffekt, bei dem zwei Elemente Seite an Seite gelegt werden.</p>
+
+<p>Diese Eigenschaft hat keine Auswirkung auf 2D-Transformationen, da es bei diesen keine Perspektive gibt.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="brush:css">backface-visibility: visible;
+backface-visibility: hidden;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<p>Diese Eigenschaft kann zwei verschiedene (exclusive) Werte annehmen:</p>
+
+<ul>
+ <li><code>visible</code> bedeutet, dass die Rückfläche sichtbar ist, sodass sie die Vorderfläche gespiegelt darstellt;</li>
+ <li><code>hidden</code> bedeutet, dass die Rückfläche nicht sichtbar ist und damit die Vorderfläche versteckt wird.</li>
+</ul>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Würfel_mit_transparenten_Flächen">Würfel mit transparenten Flächen</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;th&gt;&lt;code&gt;backface-visibility: visible;&lt;/code&gt;&lt;/th&gt;
+      &lt;th&gt;&lt;code&gt;backface-visibility: hidden;&lt;/code&gt;&lt;/th&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;
+        &lt;div class="container"&gt;
+          &lt;div class="cube showbf"&gt;
+            &lt;div class="face front"&gt;1&lt;/div&gt;
+            &lt;div class="face back"&gt;2&lt;/div&gt;
+            &lt;div class="face right"&gt;3&lt;/div&gt;
+            &lt;div class="face left"&gt;4&lt;/div&gt;
+            &lt;div class="face top"&gt;5&lt;/div&gt;
+            &lt;div class="face bottom"&gt;6&lt;/div&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+        &lt;p&gt;Alle Flächen sind transparent und die drei Rückflächen sind durch die Vorderflächen sichtbar.&lt;/p&gt;
+      &lt;/td&gt;
+      &lt;td&gt;
+        &lt;div class="container"&gt;
+          &lt;div class="cube hidebf"&gt;
+            &lt;div class="face front"&gt;1&lt;/div&gt;
+            &lt;div class="face back"&gt;2&lt;/div&gt;
+            &lt;div class="face right"&gt;3&lt;/div&gt;
+            &lt;div class="face left"&gt;4&lt;/div&gt;
+            &lt;div class="face top"&gt;5&lt;/div&gt;
+            &lt;div class="face bottom"&gt;6&lt;/div&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+        &lt;p&gt;Obwohl die Flächen halbtransparent sind, sind die drei Rückflächen nun nicht sichtbar.&lt;/p&gt;
+      &lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">/* Klassen, die die drei Rückflächen des "Würfels" entweder zeigen oder verstecken */
+.hidebf div {
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+}
+
+.showbf div {
+  backface-visibility: visible;
+  -webkit-backface-visibility: visible;
+}
+
+/* Definiert den Container-DIV, den Würfel-DIV und allgemeine Fläche */
+.container {
+  width: 150px;
+  height: 150px;
+  margin: 75px 0 0 75px;
+  border: none;
+}
+
+.cube {
+  width: 100%;
+  height: 100%;
+  perspective: 550px;
+  perspective-origin: 150% 150%;
+  transform-style: preserve-3d;
+  -webkit-perspective: 300px;
+  -webkit-perspective-origin: 150% 150%;
+  -webkit-transform-style: preserve-3d;
+}
+
+.face {
+  display: block;
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  border: none;
+  line-height: 100px;
+  font-family: sans-serif;
+  font-size: 60px;
+  color: white;
+  text-align: center;
+}
+
+/* Definiert jede Fläche basierend auf deren Position */
+.front {
+  background: rgba(0, 0, 0, 0.3);
+  transform: translateZ(50px);
+  -webkit-transform: translateZ(50px);
+}
+
+.back {
+  background: rgba(0, 255, 0, 1);
+  color: black;
+  transform: rotateY(180deg) translateZ(50px);
+  -webkit-transform: rotateY(180deg) translateZ(50px);
+}
+
+.right {
+  background: rgba(196, 0, 0, 0.7);
+  transform: rotateY(90deg) translateZ(50px);
+  -webkit-transform: rotateY(90deg) translateZ(50px);
+}
+
+.left {
+  background: rgba(0, 0, 196, 0.7);
+  transform: rotateY(-90deg) translateZ(50px);
+  -webkit-transform: rotateY(-90deg) translateZ(50px);
+}
+
+.top {
+  background: rgba(196, 196, 0, 0.7);
+  transform: rotateX(90deg) translateZ(50px);
+  -webkit-transform: rotateX(90deg) translateZ(50px)
+}
+
+.bottom {
+  background: rgba(196, 0, 196, 0.7);
+  transform: rotateX(-90deg) translateZ(50px);
+  -webkit-transform: rotateX(-90deg) translateZ(50px);
+}
+
+/* Verschönert die Tabelle ein wenig */
+th, p, td {
+  background-color: #EEEEEE;
+  margin: 0px;
+  padding: 6px;
+  font-family: sans-serif;
+  text-align: left;
+}</pre>
+
+<h4 id="Ergebnis">Ergebnis</h4>
+
+<p>{{ EmbedLiveSample('Beispiele', 620, 460) }}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transforms', '#backface-visibility-property', 'backface-visibility')}}</td>
+   <td>{{Spec2('CSS3 Transforms')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.backface-visibility")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/Guide/CSS/CSS_Transformationen_verwenden" title="/en-US/docs/CSS/Using_CSS_transforms">CSS Transformationen verwenden</a></li>
+</ul>
diff --git a/files/de/web/css/background-attachment/index.html b/files/de/web/css/background-attachment/index.html
new file mode 100644
index 0000000000..fe0d426df2
--- /dev/null
+++ b/files/de/web/css/background-attachment/index.html
@@ -0,0 +1,158 @@
+---
+title: background-attachment
+slug: Web/CSS/background-attachment
+tags:
+  - CSS
+  - CSS Background
+  - CSS Eigenschaft
+  - CSS Hintergrund
+  - CSS Referenz
+  - Referenz
+translation_of: Web/CSS/background-attachment
+---
+<div>{{CSSRef}}</div>
+
+<p>Die <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> Eigenschaft <strong><code>background-attachment</code></strong>legt fest, ob die Position eines Hintergrundbildes innerhalb des {{glossary("viewport")}} fixiert ist, oder ob es mit seinem enthaltenden Block scrollt.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-attachment.html")}}</div>
+
+<div class="hidden">Die Quelle für dieses interaktive Beispiel ist in einem GitHub-Repository gespeichert. Wenn Sie zum Projekt der interaktiven Beispiele beitragen möchten, klonen Sie bitte <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und senden Sie uns eine Pull-Anfrage.</div>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* Keyword values */
+background-attachment: scroll;
+background-attachment: fixed;
+background-attachment: local;
+
+/* Global values */
+background-attachment: inherit;
+background-attachment: initial;
+background-attachment: unset;
+</pre>
+
+<p>Die Eigenschaft <code>background-attachment</code> wird als einer der Schlüsselwortwerte aus der folgenden Liste angegeben.</p>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>fixed</code></dt>
+ <dd>Der Hintergrund ist relativ zum Ansichtsfenster fixiert. Selbst wenn ein Element über einen Bildlaufmechanismus verfügt, bewegt sich der Hintergrund nicht mit dem Element. (Dies ist nicht kompatibel mit {{cssxref("background-clip", "background-clip: text", "#text")}}.)</dd>
+ <dt><code>local</code></dt>
+ <dd>Der Hintergrund ist relativ zum Inhalt des Elements fixiert. Wenn das Element über einen Bildlaufmechanismus verfügt, wird der Hintergrund mit dem Inhalt des Elements gescrollt, und der Hintergrundmalbereich und der Hintergrundpositionierungsbereich sind relativ zum scrollbaren Bereich des Elements und nicht zum Rand, der sie umrahmt.</dd>
+ <dt><code>scroll</code></dt>
+ <dd>Der Hintergrund ist relativ zum Element selbst fixiert und scrollt nicht mit seinem Inhalt. (Er ist effektiv an den Rand des Elements gebunden).</dd>
+ <dt>{{cssxref("&lt;initial&gt;")}}</dt>
+ <dd>Setzt den Standardwert für diese Eigenschaft</dd>
+ <dt>{{cssxref("&lt;inherit&gt;")}}</dt>
+ <dd>Diese Eigenschaft erbt den Wert von seinem Elternelement.</dd>
+</dl>
+
+<h2 id="Formale_Definition">Formale Definition</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formale_Syntax">Formale Syntax</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Simple_example" name="Simple_example">Einfaches Beispiel</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush:css; highlight:[3]; notranslate">p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
+  background-attachment: fixed;
+}</pre>
+
+<h4 id="Ergebnis">Ergebnis</h4>
+
+<p>{{EmbedLiveSample("Simple_example")}}</p>
+
+<h3 id="Multiple_background_images" name="Multiple_background_images">Mehrere Hintergründe</h3>
+
+<p>Diese Eigenschaft unterstützt mehrere Hintergrundbilder. Sie können für jeden Hintergrund ein anderes <code>&lt;attachment&gt;</code> , durch Kommata getrennt, angeben. Jedes Bild, vom ersten bis zum letzten, wird dem entsprechenden <code>&lt;attachment&gt;</code> Typ zugeordnet.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+
+  Suddenly she came upon a little three-legged table, all made of solid
+  glass; there was nothing on it except a tiny golden key, and Alice's
+  first thought was that it might belong to one of the doors of the hall;
+  but, alas! either the locks were too large, or the key was too small,
+  but at any rate it would not open any of them. However, on the second
+  time round, she came upon a low curtain she had not noticed before, and
+  behind it was a little door about fifteen inches high: she tried the
+  little golden key in the lock, and to her great delight it fitted!
+&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush:css; highlight:[3]; notranslate">p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"),
+      url("https://mdn.mozillademos.org/files/12059/startransparent.gif");
+  background-attachment: fixed, scroll;
+  background-repeat: no-repeat, repeat-y;
+}</pre>
+
+<h4 id="Ergebnis_2">Ergebnis</h4>
+
+<p>{{EmbedLiveSample("Multiple_background_images")}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-background-attachment', 'background-attachment')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Das Kurzformat-Eigenschaft wurde erweitert, um mehrere Hintergründe und den <code>local</code> Wert zu unterstützen.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-attachment', 'background-attachment')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Keine wesentliche Änderung.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background-attachment', 'background-attachment')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Keine wesentliche Änderung.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte https://github.com/mdn/browser-compat-data und senden Sie uns eine Pull-Anfrage.</div>
+
+<p>{{Compat("css.properties.background-attachment")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/CSS/background" title="de/CSS/background"><code>background</code></a>, <a href="/de/CSS/background-clip" title="de/CSS/background-clip"><code>background-clip</code></a>, <a href="/de/CSS/background-color" title="de/CSS/background-color"><code>background-color</code></a>, <a href="/de/CSS/background-image" title="de/CSS/background-image"><code>background-image</code></a>, <a href="/de/CSS/background-origin" title="de/CSS/background-origin"><code>background-origin</code></a>, <a href="/de/CSS/background-position" title="de/CSS/background-position"><code>background-position</code></a>, <a href="/de/CSS/background-repeat" title="de/CSS/background-repeat"><code>background-repeat</code></a>, <a href="/de/CSS/background-size" title="de/CSS/background-size"><code>background-size</code></a></li>
+ <li><a href="/de/CSS/-moz-background-inline-policy" title="de/CSS/-moz-background-inline-policy"><code>-moz-background-inline-policy</code></a></li>
+</ul>
diff --git a/files/de/web/css/background-blend-mode/index.html b/files/de/web/css/background-blend-mode/index.html
new file mode 100644
index 0000000000..2423929b79
--- /dev/null
+++ b/files/de/web/css/background-blend-mode/index.html
@@ -0,0 +1,129 @@
+---
+title: background-blend-mode
+slug: Web/CSS/background-blend-mode
+tags:
+  - CSS
+  - CSS Compositing
+  - CSS Eigenschaft
+  - Referenz
+translation_of: Web/CSS/background-blend-mode
+---
+<div>{{CSSRef}}</div>
+
+<p>Die <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft <code>background-blend-mode</code> beschreibt, wie sich die Hintergrundbilder eines Elementes, sowie dessen Hintergrundfarbe, miteinander vemischen</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-blend-mode.html")}}</div>
+
+<p class="hidden">Die Quelle für dieses interaktive Beispiel ist in einem GitHub-Repository gespeichert. Wenn Sie zum Projekt der interaktiven Beispiele beitragen möchten, klonen Sie bitte <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und senden Sie uns eine Pull-Anfrage.</p>
+
+<p>Die Blending-Verfahren sollten in der selben Reihenfolge wie die Bilder der <code>background-image</code> Eigenschaft definiert werden. Wenn die Anzahl der Blending-Verfahren nicht mit der Anzahl der Hintergrundbilder übereinstimmt, werden sie wiederholt oder abgeschnitten, bis jedem Hintergrundbild ein Blending-Verfahren zugeordnet werden kann.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css notranslate">/* Ein Wert */
+background-blend-mode: normal;
+
+/* Zwei Werte, einer pro Hintergrund */
+background-blend-mode: darken, luminosity;
+
+/* Globale Werte */
+background-blend-mode: initial;
+background-blend-mode: inherit;
+background-blend-mode: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;blend-mode&gt;")}}</dt>
+ <dd>Ein {{cssxref("&lt;blend-mode&gt;")}} welcher das Verfahren zur Vermischung von Hintergrundbildern und -farbe beschreibt. Es können mehrere Werte mit Kommas getrennt angegeben werden.</dd>
+</dl>
+
+<h2 id="Formale_Definition">Formale Definition</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formale_Syntax">Formale Syntax</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einfaches_Beispiel">Einfaches Beispiel</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: css notranslate">.item {
+    width: 300px;
+    height: 300px;
+    background: url('image1.png'),url('image2.png');
+    background-blend-mode: screen;
+}</pre>
+
+<h3 id="Examples" name="Examples">Probieren Sie verschiedene Mischmodi aus</h3>
+
+<pre class="brush: html hidden notranslate">&lt;div id="div"&gt;&lt;/div&gt;
+&lt;select id="select"&gt;
+    &lt;option&gt;normal&lt;/option&gt;
+    &lt;option&gt;multiply&lt;/option&gt;
+    &lt;option selected&gt;screen&lt;/option&gt;
+    &lt;option&gt;overlay&lt;/option&gt;
+    &lt;option&gt;darken&lt;/option&gt;
+    &lt;option&gt;lighten&lt;/option&gt;
+    &lt;option&gt;color-dodge&lt;/option&gt;
+    &lt;option&gt;color-burn&lt;/option&gt;
+    &lt;option&gt;hard-light&lt;/option&gt;
+    &lt;option&gt;soft-light&lt;/option&gt;
+    &lt;option&gt;difference&lt;/option&gt;
+    &lt;option&gt;exclusion&lt;/option&gt;
+    &lt;option&gt;hue&lt;/option&gt;
+    &lt;option&gt;saturation&lt;/option&gt;
+    &lt;option&gt;color&lt;/option&gt;
+    &lt;option&gt;luminosity&lt;/option&gt;
+&lt;/select&gt;</pre>
+
+<pre class="brush: css hidden notranslate">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: screen;
+}</pre>
+
+<pre class="brush: js hidden notranslate">document.getElementById("select").onchange = function(event) {
+    document.getElementById("div").style.backgroundBlendMode = document.getElementById("select").selectedOptions[0].innerHTML;
+}
+console.log(document.getElementById('div'));</pre>
+
+<h4 id="Ergebnis">Ergebnis</h4>
+
+<p>{{ EmbedLiveSample('Examples', "330", "330") }}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Compositing', '#background-blend-mode', 'background-blend-mode')}}</td>
+   <td>{{Spec2('Compositing')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{Compat("css.properties.background-blend-mode")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref("&lt;blend-mode&gt;")}}</li>
+ <li>{{cssxref("mix-blend-mode")}}</li>
+</ul>
diff --git a/files/de/web/css/background-clip/index.html b/files/de/web/css/background-clip/index.html
new file mode 100644
index 0000000000..c627b66ce2
--- /dev/null
+++ b/files/de/web/css/background-clip/index.html
@@ -0,0 +1,110 @@
+---
+title: background-clip
+slug: Web/CSS/background-clip
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/background-clip
+---
+<p>{{ CSSRef() }}</p>
+<h2 id="Übersicht">Übersicht</h2>
+<p>Die <code>background-clip</code> Eigenschaft legt fest, ob ein Hintergrundbild oder eine Hintergrundfarbe auch unterhalb des <a href="/de/CSS/border" title="de/CSS/border">Elementrahmens</a> erweitert werden soll. Es können mehrere Werte (durch Kommata getrennt) definiert werden, um unterschiedliche Einstellungen für mehrere Hintergrundbilder festzulegen.<br>
+ Die Eigenschaft <code>-moz-background-clip</code> wird bis einschließlich Gecko 1.9.2 (Firefox 3.6) unterstützt.</p>
+<div class="note">
+ <strong>Hinweis</strong>: Um ältere und neuere Versionen von Gecko (Firefox) zu unterstützen, sollten Sie beide Eigenschaften (mit und ohne <code>-moz-</code>) im Stylesheet notieren. Siehe <a href="#Beispiele">Beispiele</a>.</div>
+<p>Wenn kein <code>background-image</code> vorhanden ist, hat diese Eigenschaft nur einen sichtbaren Effekt, wenn der Rahmen über transparente oder teilweise transparente Bereiche verfügt (siehe <a href="/de/CSS/border-style" title="de/CSS/border-style">border-style</a>). Andernfalls sind nur die Effekte des Rahmens selbst zu sehen.</p>
+<ul>
+ <li>Standardwert: <code>border-box</code></li>
+ <li>Anwendbar auf: alle Elemente</li>
+ <li>Vererbbar: Nein</li>
+ <li>Prozentwerte: Nein</li>
+ <li>Medium: visuell</li>
+ <li>berechneter Wert: wie festgelegt</li>
+</ul>
+<h2 id="Syntax">Syntax</h2>
+<pre class="eval">background-clip:  [ border-box | padding-box | content-box][, [ border-box | padding-box | content-box]]*
+
+-moz-background-clip:  [border | padding][, [border | padding]]*  /* Gecko 1.2-1.9.2 (Firefox 1.0-3.6) */
+</pre>
+<h2 id="Werte">Werte</h2>
+<dl>
+ <dt>
+  border-box {{ gecko_minversion_inline("2.0") }} bzw. border <small>(Firefox 1.0-3.6)</small></dt>
+ <dd>
+  Standardwert.Der Hintergrund erstreckt sich bis zur äußeren Ecke des Rahmens (aber unterhalb des Rahmens auf der Z-Achse).</dd>
+ <dt>
+  padding-box {{ gecko_minversion_inline("2.0") }} bzw. padding <small>(Firefox 1.0-3.6)</small></dt>
+ <dd>
+  Es wird kein Hintergrund unterhalb des Rahmens gezeichnet (der Hintergrund erstreckt sich bis zur äußeren Ecke des Innenabstands (padding).</dd>
+ <dt>
+  content-box {{ gecko_minversion_inline("2.0") }}</dt>
+ <dd>
+  Der Hintergrund wird innerhalb des Inhalts (content box) gezeichnet.</dd>
+</dl>
+<h2 id="Beispiele">Beispiele</h2>
+<pre style="overflow: visible; border: 1em navy; border-style: dotted double; background: tomato; background-clip: padding-box;">pre {
+   border: 1em navy;
+   border-style: dotted double;
+   background: tomato;
+   /* Der rote Hintergrund wird nicht unter den Rahmen wandern */
+   -moz-background-clip: padding;         /* Firefox 1.0-3.6 */
+   -webkit-background-clip: padding-box;  /* Safari, Chrome */
+           background-clip: padding-box;  /* Firefox 4.0+, Opera */
+}
+</pre>
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Browser</th>
+   <th>ab Version</th>
+   <th>Unterstützung von</th>
+  </tr>
+  <tr>
+   <td>Chrome</td>
+   <td>1.0</td>
+   <td><code>background-clip:  padding-box | border-box | content-box</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2">Firefox (Gecko)</td>
+   <td>1.0-3.6 (1.2-1.9.2)</td>
+   <td><code>-moz-background-clip: padding | border</code></td>
+  </tr>
+  <tr>
+   <td>4.0 (2.0)</td>
+   <td><code>background-clip:  padding-box | border-box | content-box</code></td>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>9.0</td>
+   <td><code>background-clip:  padding-box | border-box | content-box</code></td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>10.5</td>
+   <td><code>background-clip:  padding-box | border-box</code></td>
+  </tr>
+  <tr>
+   <td>Safari (WebKit)</td>
+   <td>3.0 (522)</td>
+   <td><code>-webkit-background-clip:  padding | border | content</code><br>
+    <code>-webkit-background-clip:  padding-box | border-box | content-box</code></td>
+  </tr>
+ </tbody>
+</table>
+<ul>
+ <li>[*]: Der IE 7 (keine anderen IE-Versionen) verhält sich wie <code>background-clip:padding</code> wenn <code>overflow: hidden | auto | scroll</code> festgelegt wurde.</li>
+ <li>Konqueror 3.5.4 unterstützt <code>-khtml-background-clip</code>.</li>
+</ul>
+<h2 id="Spezifikation">Spezifikation</h2>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-background/#the-background-clip" lang="en">CSS 3 Backgrounds and Borders #background-clip</a></li>
+ <li><a class="external" href="http://dev.w3.org/csswg/css3-background/#the-background-clip" lang="en">CSS 3 Editor's Draft </a> (enthält <code>content-box</code>)</li>
+</ul>
+<h2 id="Siehe_auch">Siehe auch</h2>
+<ul>
+ <li><a href="/de/CSS/background" title="de/CSS/background"><code>background</code></a>, <a href="/de/CSS/background-attachment" title="de/CSS/background-attachment"><code>background-attachment</code></a>, <a href="/de/CSS/background-color" title="de/CSS/background-color"><code>background-color</code></a>, <a href="/de/CSS/background-image" title="de/CSS/background-image"><code>background-image</code></a>, <a href="/de/CSS/background-origin" title="de/CSS/background-origin"><code>background-origin</code></a>, <a href="/de/CSS/background-position" title="de/CSS/background-position"><code>background-position</code></a>, <a href="/de/CSS/background-repeat" title="de/CSS/background-repeat"><code>background-repeat</code></a>, <a href="/de/CSS/background-size" title="de/CSS/background-size"><code>background-size</code></a></li>
+ <li><a href="/de/CSS/-moz-background-inline-policy" title="de/CSS/-moz-background-inline-policy"><code>-moz-background-inline-policy</code></a></li>
+ <li><a href="/de/CSS/clip" title="de/CSS/clip"><code>clip</code></a></li>
+</ul>
+<p>{{ languages( { "en": "en/CSS/background-clip", "fr": "fr/CSS/-moz-background-clip", "ja": "ja/CSS/-moz-background-clip", "pl": "pl/CSS/-moz-background-clip" } ) }}</p>
diff --git a/files/de/web/css/background-color/index.html b/files/de/web/css/background-color/index.html
new file mode 100644
index 0000000000..6db5caa387
--- /dev/null
+++ b/files/de/web/css/background-color/index.html
@@ -0,0 +1,133 @@
+---
+title: background-color
+slug: Web/CSS/background-color
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Hintergrund
+  - Grafik
+  - Layout
+  - Referenz
+translation_of: Web/CSS/background-color
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <strong><code>background-color</code></strong> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft setzt die Hintergrundfarbe eines Elements, entweder durch einen Farbwert oder das Schlüsselwort <code>transparent</code>.</p>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css notranslate">/* Schlüsselwortwerte */
+background-color: red;
+
+/* Hexadezimalwert */
+background-color: #bbff00;
+
+/* RGB-Wert */
+background-color: rgb(255, 255, 128);
+
+/* HSLA-Wert */
+background-color: hsla(50, 33%, 25%, 0.75);
+
+/* Spezielle Schlüsselwortwerte */
+background-color: currentColor;
+background-color: transparent;
+
+/* Globale Werte */
+background-color: inherit;
+background-color: initial;
+background-color: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>Ist ein CSS {{cssxref("&lt;color&gt;")}} Wert, der die einheitliche Farbe des Hintergrunds beschreibt. Sogar wenn ein oder mehrere {{cssxref("background-image")}} definiert sind, kann diese Farbe die Darstellung durch Transparenzen in den Bildern beeinflussen. In CSS ist <code>transparent</code> eine Farbe.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div class="exampleone"&gt;
+ Lorem ipsum dolor sit amet, consectetuer
+&lt;/div&gt;
+
+&lt;div class="exampletwo"&gt;
+  Lorem ipsum dolor sit amet, consectetuer
+&lt;/div&gt;
+
+&lt;div class="examplethree"&gt;
+  Lorem ipsum dolor sit amet, consectetuer
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight:[2,7,12,17]; notranslate">.exampleone {
+  background-color: teal;
+  color: white;
+}
+
+.exampletwo {
+  background-color: rgb(153,102,153);
+  color: rgb(255,255,204);
+}
+
+.examplethree {
+  background-color: #777799;
+  color: #FFFFFF;
+}
+</pre>
+
+<h3 id="Ergebnis">Ergebnis</h3>
+
+<p>{{EmbedLiveSample("Beispiele","200","150")}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#background-color', 'background-color')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Obwohl das Schlüsselwort <code>transparent</code> technisch entfernt wurde, ändert dies nichts, da es als echter {{cssxref("&lt;color&gt;")}} integriert wurde.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background-color', 'background-color')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{Compat("css.properties.background-color")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>
+  <p><a href="/de/docs/Web/Guide/CSS/mehrere_Hintergründe_verwenden">Mehrere Hintergründe</a></p>
+ </li>
+</ul>
diff --git a/files/de/web/css/background-image/index.html b/files/de/web/css/background-image/index.html
new file mode 100644
index 0000000000..2c49b17489
--- /dev/null
+++ b/files/de/web/css/background-image/index.html
@@ -0,0 +1,155 @@
+---
+title: background-image
+slug: Web/CSS/background-image
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/background-image
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>background-image</code>-Eigenschaft legt ein oder mehrere Hintergrundbilder für ein Element fest. Die einzelnen Bilder werden übereinander gestapelt, wobei die erste Schicht so dargestellt wird, dass sie dem Benutzer am nächsten erscheint. Hintergrundbilder werden immer über Hintergrundfarben gelegt.</p>
+
+<p>Um bei ausgeschalteten Grafiken oder Fehlern beim Laden des Bildes einen ausreichenden Kontrast zu gewährleisten, ist es deshalb sinnvoll, immer eine Hintergrundfarbe mittels <a href="/de/CSS/background-color" title="de/CSS/background-color"><code>background-color</code></a> anzugeben. Die Kurzform <a href="/de/CSS/background" title="de/CSS/background"><code>background</code></a> bietet sich an, um beides zu notieren.</p>
+
+<div class="note">Ab Gecko 1.9.2 (Firefox 3.6) können mehrere Hintergrundbilder, durch Kommata getrennt, definiert werden.<br>
+Das zuerst definierte Hintergrundbild ist dabei das Oberste.</div>
+
+<ul>
+ <li>Standardwert: <code>none</code></li>
+ <li>Anwendbar auf: Alle Elemente</li>
+ <li>Vererbbar: Nein</li>
+ <li>Prozentwerte: Nein</li>
+ <li>Medium: visuell</li>
+ <li>berechneter Wert: absolute URI oder <code>none</code></li>
+</ul>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="eval">background-image:  &lt;Hintergrundbild&gt;[, &lt;Hintergrundbild&gt;]*
+
+<strong>&lt;Hintergrundbild&gt;</strong>:
+none | url | inherit | -moz-linear-gradient() | -moz-radial-gradient()
+
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt>none</dt>
+ <dd>Standardwert. Es wird kein Hintergrundbild verwendet.</dd>
+ <dt>url</dt>
+ <dd>Der Pfad des Bildes, das als Hintergrund angezeigt werden soll.</dd>
+ <dt>inherit</dt>
+ <dd>Der Wert des Elternelements wird geerbt.</dd>
+</dl>
+
+<h4 id="Mozilla_Erweiterungen">Mozilla Erweiterungen:</h4>
+
+<dl>
+ <dt><a href="/de/CSS/-moz-linear-gradient" title="de/CSS/-moz-linear-gradient"><code>-moz-linear-gradient()</code></a> {{ gecko_minversion_inline("1.9.2") }}</dt>
+ <dd>Linearer Verlauf</dd>
+ <dt><a href="/de/CSS/-moz-radial-gradient" title="de/CSS/-moz-radial-gradient"><code>-moz-radial-gradient()</code></a> {{ gecko_minversion_inline("1.9.2") }}</dt>
+ <dd>Radialer Verlauf</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Es ist zu beachten, dass das Bild des Sterns teilweise transparent ist und das Katzenbild überlagert. </p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+    &lt;p class="catsandstars"&gt;
+        This paragraph is full of cats&lt;br /&gt;and stars.
+    &lt;/p&gt;
+    &lt;p&gt;This paragraph is not.&lt;/p&gt;
+    &lt;p class="catsandstars"&gt;
+        Here are more cats for you.&lt;br /&gt;Look at them!
+    &lt;/p&gt;
+    &lt;p&gt;And no more.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">pre, p {
+    font-size: 1.5em;
+    color: #FE7F88;
+    background-color: transparent;
+}
+
+div {
+  background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
+}
+
+p {
+  background-image: none;
+}
+
+.catsandstars {
+  background-image:  url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
+                     url("https://mdn.mozillademos.org/files/7693/catfront.png");
+  background-color: transparent;
+}
+</pre>
+
+<h3 id="Ergebnis">Ergebnis</h3>
+
+<p>{{EmbedLiveSample('Beispiele')}}</p>
+
+<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Browser</th>
+   <th>ab Version</th>
+   <th>mehrere Hintergrundbilder</th>
+   <th>Verläufe</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>4.0</td>
+   <td>---</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td>1.0 (1.0)</td>
+   <td>3.6 (1.9.2)</td>
+   <td>3.6 (1.9.2) [-moz-]</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>3.5</td>
+   <td>10.5</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>Safari (WebKit)</td>
+   <td>1.0 (85)</td>
+   <td>1.3 (312)</td>
+   <td>4.0 (528) [<a class="external" href="http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariCSSRef/Articles/Functions.html#//apple_ref/doc/uid/TP40007955-SW25">-webkit-</a>]</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-background/#background-image" lang="en">CSS 3 Background and Borders #background-image</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-image" lang="en">CSS 2.1 Colors and Backgrounds #background-image</a></li>
+ <li><a class="external" href="http://dev.w3.org/csswg/css3-images/#gradients-" lang="en">CSS 3 Images #gradients</a> (Editor's Draft)</li>
+</ul>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/CSS/background" title="de/CSS/background"><code>background</code></a>, <a href="/de/CSS/background-attachment" title="de/CSS/background-attachment"><code>background-attachment</code></a>, <a href="/de/CSS/background-clip" title="de/CSS/background-clip"><code>background-clip</code></a>, <a href="/de/CSS/background-color" title="de/CSS/background-color"><code>background-color</code></a>, <a href="/de/CSS/background-origin" title="de/CSS/background-origin"><code>background-origin</code></a>, <a href="/de/CSS/background-position" title="de/CSS/background-position"><code>background-position</code></a>, <a href="/de/CSS/background-repeat" title="de/CSS/background-repeat"><code>background-repeat</code></a>, <a href="/de/CSS/background-size" title="de/CSS/background-size"><code>background-size</code></a></li>
+ <li><a href="/de/CSS/-moz-background-inline-policy" title="de/CSS/-moz-background-inline-policy"><code>-moz-background-inline-policy</code></a></li>
+ <li><a href="/de/CSS/-moz-linear-gradient" title="de/CSS/-moz-linear-gradient"><code>-moz-linear-gradient</code></a>, <a href="/de/CSS/-moz-radial-gradient" title="de/CSS/-moz-radial-gradient"><code>-moz-radial-gradient</code></a>, <a href="/de/CSS/-moz-repeating-linear-gradient" title="de/CSS/-moz-repeating-linear-gradient"><code>-moz-repeating-linear-gradient</code></a>, <a href="/de/CSS/-moz-repeating-radial-gradient" title="de/CSS/-moz-repeating-radial-gradient"><code>-moz-repeating-radial-gradient</code></a></li>
+</ul>
+
+<p>{{ languages( {"en": "en/CSS/background-image", "fr": "fr/CSS/background-image", "pl": "pl/CSS/background-image", "es": "es/CSS/background-image" } ) }}</p>
diff --git a/files/de/web/css/background-origin/index.html b/files/de/web/css/background-origin/index.html
new file mode 100644
index 0000000000..694b12b3e4
--- /dev/null
+++ b/files/de/web/css/background-origin/index.html
@@ -0,0 +1,60 @@
+---
+title: background-origin
+slug: Web/CSS/background-origin
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/background-origin
+---
+<p>{{ CSSRef() }}</p>
+<h3 id="Übersicht">Übersicht</h3>
+<p>Die <code>background-origin</code> Eigenschaft legt den Bereich des Hintergrundbildes fest (bzw. den Ausgangspunkt eines <a href="/de/CSS/background-image" title="de/CSS/background-image"><code>background-image</code></a>). <code>background-origin</code> hat keinen Effekt, wenn <a href="/de/CSS/background-attachment" title="de/CSS/background-attachment"><code>background-attachment</code></a> auf <code>fixed</code> gesetzt wurde. Es können mehrere Werte (durch Kommata getrennt) definiert werden, um unterschiedliche Einstellungen für mehrere Hintergrundbilder festzulegen.</p>
+<p>Die Eigenschaft <code>-moz-background-origin</code> wird bis einschließlich Gecko 1.9.2 (Firefox 3.6) unterstützt.</p>
+<p> </p>
+<div class="note"><strong>Hinweis</strong>: Um ältere und neuere Versionen von Gecko (Firefox) zu unterstützen, sollten Sie beide Eigenschaften (mit und ohne <code>-moz-</code>) im Stylesheet notieren. Siehe <a href="/de/CSS/background-origin#Beispiele" title="de/CSS/background-origin#Beispiele">Beispiele</a>.</div>
+<p>Der Wert dieser Eigenschaft wird durch die Kurzformeigenschaft <a href="/de/CSS/background" title="de/CSS/background"><code>background</code></a> auf den Standardwert (<code>padding-box</code>) zurückgesetzt.</p>
+<ul> <li>Standardwert: <code>padding-box</code></li> <li>Anwendbar auf: alle Elemente</li> <li>Vererbbar: Nein</li> <li>Prozentwerte: Nein</li> <li>Medium: visuell</li> <li>berechneter Wert: wie festgelegt</li>
+</ul>
+<h3 id="Syntax">Syntax</h3>
+<pre class="eval">/* seit Gecko 2.0 (Firefox 4.0) */
+background-origin: [padding-box | border-box | content-box][, [border-box | padding-box | content-box]]*
+
+/* ältere Versionen (mehrere Hintergründe seit Gecko 1.9.2 / Firefox 3.6) */
+-moz-background-origin: [padding | border | content][, [border | padding | content]]*
+</pre>
+<h3 id="Werte">Werte</h3>
+<dl> <dt>padding-box {{ gecko_minversion_inline("2.0") }} bzw. padding <small>(Firefox 1.0-3.6)</small></dt> <dd>Standardwert. Die Hintergrundposition ist relativ zum <code>padding</code>. (Für einzelne Boxen ist "<code>0 0</code>" die obere linke Ecke der <em>padding edge</em> und "<code>100% 100%</code>" ist die untere rechte Ecke.)</dd> <dt>border-box {{ gecko_minversion_inline("2.0") }} bzw. border <small>(Firefox 1.0-3.6)</small></dt> <dd>Die Hintergrundposition ist relativ zum Rahmen (<code>border</code>), sodass sich das Hintergrundbild hinter dem Rahmen befinden kann.</dd> <dt>content-box {{ gecko_minversion_inline("2.0") }} bzw. content <small>(Firefox 1.0-3.6)</small></dt> <dd>Die Hintergrundposition ist relativ zum Inhalt.</dd>
+</dl>
+<h3 id="Beispiele">Beispiele</h3>
+<h4 id="Hintergrundbild_im_padding-Bereich">Hintergrundbild im padding-Bereich</h4>
+<pre> .example {
+   border: 10px double;
+   padding: 10px;
+   background: url('image.jpg');
+   background-position: center left;
+   -moz-background-origin: content;          /* Firefox 1.0-3.6 */
+   -webkit-background-origin: content-box;   /* Safari, Chrome */
+           background-origin: content-box;   /* Firefox 4.0+ */
+}
+</pre>
+<h4 id="Mehrere_Hintergrundbilder_gecko_minversion_inline(1.9.2)">Mehrere Hintergrundbilder {{ gecko_minversion_inline("1.9.2") }}</h4>
+<pre>div {
+  background-image: url('mainback.png'), url('logo.jpg');
+  background-position: 0px 0px, top right;
+  -moz-background-origin: padding, content;
+  -webkit-background-origin: padding-box, content-box;
+          background-origin: padding-box, content-box;
+}
+</pre>
+<h3 id="Browser_Kompatibilität">Browser Kompatibilität</h3>
+<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>ab Version</th> <th>Unterstützung von</th> </tr> <tr> <td>Internet Explorer</td> <td>---</td> <td>--- [*]</td> </tr> <tr> <td rowspan="2">Firefox (Gecko)</td> <td>1.0-3.6 (1.2-1.9.2)</td> <td><code>-moz-background-origin: padding | border | content</code></td> </tr> <tr> <td>4.0 (1.9.3)</td> <td><code>background-origin: padding-box | border-box | content-box</code></td> </tr> <tr> <td>Opera</td> <td>10.5</td> <td><code>background-origin: padding-box | border-box | content-box</code></td> </tr> <tr> <td>Safari (WebKit)</td> <td>3.0 (522)</td> <td><code>-webkit-background-origin: padding | border | content </code><br> <code>-webkit-background-origin: padding-box | border-box | content-box</code></td> </tr> </tbody>
+</table>
+<ul> <li>[*]: Der Standardwert ist bis einschließlich IE7 <code>border-box</code>.</li> <li>Der IE8 kennt <code>padding-box</code> als Standard.</li> <li>Konqueror 3.5.4 unterstützt <code>-khtml-background-origin</code>.</li>
+</ul>
+<h3 id="Spezifikation">Spezifikation</h3>
+<ul> <li><a class="external" href="http://www.w3.org/TR/css3-background/#background-origin" lang="en">CSS 3 Backgrounds and Borders #background-origin</a> <br> (Standardisiert sind <code>padding-box</code>, <code>border-box</code>, und <code>content-box</code>)</li>
+</ul>
+<h3 id="Siehe_auch">Siehe auch</h3>
+<ul> <li><a href="/de/CSS/background" title="de/CSS/background"><code>background</code></a>, <a href="/de/CSS/background-attachment" title="de/CSS/background-attachment"><code>background-attachment</code></a>, <a href="/de/CSS/background-color" title="de/CSS/background-color"><code>background-color</code></a>, <a href="/de/CSS/background-clip" title="de/CSS/background-clip"><code>background-clip</code></a>, <a href="/de/CSS/background-image" title="de/CSS/background-image"><code>background-image</code></a>, <a href="/de/CSS/background-position" title="de/CSS/background-position"><code>background-position</code></a>, <a href="/de/CSS/background-repeat" title="de/CSS/background-repeat"><code>background-repeat</code></a>, <a href="/de/CSS/background-size" title="de/CSS/background-size"><code>background-size</code></a></li> <li><a href="/de/CSS/-moz-background-inline-policy" title="de/CSS/-moz-background-inline-policy"><code>-moz-background-inline-policy</code></a></li>
+</ul>
+<p>{{ languages( { "en": "en/CSS/background-origin", "fr": "fr/CSS/-moz-background-origin", "ja": "ja/CSS/-moz-background-origin", "pl": "pl/CSS/-moz-background-origin" } ) }}</p>
diff --git a/files/de/web/css/background-position/index.html b/files/de/web/css/background-position/index.html
new file mode 100644
index 0000000000..03c3c64c4e
--- /dev/null
+++ b/files/de/web/css/background-position/index.html
@@ -0,0 +1,86 @@
+---
+title: background-position
+slug: Web/CSS/background-position
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/background-position
+---
+<p>{{ CSSRef() }}</p>
+<h3 id="Übersicht">Übersicht:</h3>
+<p>Die <code>background-position</code> Eigenschaft bestimmt die Position des Hintergrundbildes</p>
+<div class="note">Ab Gecko 1.9.2 (Firefox 3.6) können mehrere Hintergrundpositionen, durch Kommata getrennt, definiert werden.<br>
+Vorherige Versionen unterstützen nur einen Wert.</div>
+<ul> <li>Standardwert: <code>0% 0%</code></li> <li>Anwendbar auf: Alle Elemente</li> <li>Vererbbar: Nein</li> <li>Prozentwerte: Beziehen sich auf den Positionierungsbereich (z.B. Größe eines <code>&lt;div&gt;</code>) minus der Bildgröße</li> <li>Medium: visuell</li> <li>berechneter Wert: für &lt;Länge&gt; der absolute Wert; sonst eine Prozentzahl</li>
+</ul>
+<h3 id="Syntax">Syntax</h3>
+<pre class="eval">background-position:  &lt;Hintergrundposition&gt;[, &lt;Hintergrundposition&gt;]*
+
+<strong>&lt;Hintergrundposition&gt;</strong>:
+  [ [ &lt;Prozentzahl&gt; | &lt;Länge&gt; | left | center | right ] ]
+  [ [ &lt;Prozentzahl&gt; | &lt;Länge&gt; | top | center | bottom ] ]?
+|
+  [ center | [ left | right ] [ &lt;Prozentzahl&gt; | &lt;Länge&gt; ]? ] || [ center | [ top | bottom ] [ &lt;Prozentzahl&gt; | &lt;Länge&gt; ]? ] ]
+|
+  inherit
+</pre>
+<h3 id="Werte">Werte</h3>
+<p>Möglich sind ein oder zwei Werte. Negative <a href="/de/CSS/Einheiten#Prozent" title="de/CSS/Einheiten#Prozent">&lt;Prozentzahlen&gt;</a> und <a href="/de/CSS/Einheiten#L.c3.a4ngen" title="de/CSS/Einheiten#L.c3.a4ngen">&lt;Längen&gt;</a> sind erlaubt. <br>
+Wenn nur ein Wert angegeben wird, ist der zweite automatisch <code>center</code>.<br>
+Der erste Wert gibt die horizontale, der zweite die vertikale Position an (Es sei denn, mindestens ein Wert ist ein Schlüsselwort).</p>
+<dl> <dt>&lt;Prozentwert&gt;</dt> <dd>Mit einem Wert von <code>0% 0%</code> (gleichbedeutend zu <code>0 0</code>) wird das Bild an der oberen linken Ecke ausgerichtet. <br> Mit einem Wert von <code>100% 100%</code> wird das Bild an der unteren rechten Ecke ausgerichtet. <br> Mit einem Wert von <code>50% 50%</code> wird das Bild horizontal und vertikal zentriert. <br> Die absoluten Werte werden aus der Größe des Postionierungsbereichs minus der Bildgröße berechnet (Siehe <a href="#Berechnung_der_Prozentwerte">Berechnung der Prozentwerte</a>).</dd> <dt>&lt;Länge&gt;</dt> <dd>Verschiebung vom Ursprung (obere linke Ecke)</dd> <dt>left</dt> <dd>Gleichbedeutend für <code>0%</code> für die horizontale Postion</dd> <dt>center</dt> <dd>Gleichbedeutend für <code>50%</code> für die horizontale Position, wenn diese nicht festgelegt ist, sonst gleichbedeutend für <code>50%</code> für die vertikale Postion.</dd> <dt>right</dt> <dd>Gleichbedeutend für <code>100%</code> für die horizontale Postion</dd> <dt>top</dt> <dd>Gleichbedeutend für <code>0%</code> für die vertikale Postion</dd> <dt>bottom</dt> <dd>Gleichbedeutend für <code>100%</code> für die vertikale Postion</dd> <dt>inherit</dt> <dd>Der Wert des Elternelements wird geerbt.</dd>
+</dl>
+<h3 id="Beispiele">Beispiele</h3>
+<h4 id="Berechnung_der_Prozentwerte">Berechnung der Prozentwerte</h4>
+<pre>.beispielNull {
+  width: 320px;                   /* 50% der Bereichsbreite = 160px  */
+  height: 320px;                  /* 50% Bereichshöhe = 160px  */
+
+  background-image: url(32x32.jpg)/* 50% der Bildbreite/Bildhöhe = 16px  */
+
+  background-position: 50% 50%;   /* 160px-16px = 144px */
+                                  /* 50% 50% entspricht also: 144px 144px /*
+}
+</pre>
+<h4 id="Positionen_für_einzelne_Hintergrundbilder">Positionen für einzelne Hintergrundbilder</h4>
+<pre>.beispielEins {
+  background-image: url("logo.png");
+  background-position: top;
+}
+
+.beispielZwei {
+  background-image: url("logo.png");
+  background-position: 25% 75%;
+}
+
+.beispielDrei {
+  background: url("logo.png") 2cm bottom;
+}
+
+.beispielVier {
+  background-image: url("logo.png");
+  background-position: center 10%;
+}
+
+.beispielFuenf {
+  background: url("logo.png") 3em 50%;
+}
+
+</pre>
+<h4 id="Positionen_für_mehrere_Hintergrundbilder_gecko_minversion_inline(1.9.2)">Positionen für mehrere Hintergrundbilder {{ gecko_minversion_inline("1.9.2") }}</h4>
+<pre>.beispielSechs {
+  background-image: url("img1.png"), url("img2.png");
+  background-position: 0px 0px, center;
+}
+
+</pre>
+<h3 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h3>
+<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>ab Version</th> <th>mehrere Hintergrundbilder</th> </tr> <tr> <td>Internet Explorer</td> <td>4.0</td> <td>---</td> </tr> <tr> <td>Firefox (Gecko)</td> <td>1.0 (1.0)</td> <td>3.6 (1.9.2)</td> </tr> <tr> <td>Opera</td> <td>3.5</td> <td>10.5</td> </tr> <tr> <td>Safari (WebKit)</td> <td>1.0 (85)</td> <td>1.3 (312)</td> </tr> </tbody>
+</table>
+<h3 id="Spezifikation">Spezifikation</h3>
+<ul> <li><a class="external" href="http://www.w3.org/TR/css3-background/#background-position" lang="en">CSS 3 Background and Borders #background-position</a></li> <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-position" lang="en">CSS 2.1 Colors and Backgrounds #background-position</a></li>
+</ul>
+<h3 id="Siehe_auch">Siehe auch</h3>
+<ul> <li><a href="/de/CSS/background" title="de/CSS/background"><code>background</code></a>, <a href="/de/CSS/background-attachment" title="de/CSS/background-attachment"><code>background-attachment</code></a>, <a href="/de/CSS/background-clip" title="de/CSS/background-clip"><code>background-clip</code></a>, <a href="/de/CSS/background-color" title="de/CSS/background-color"><code>background-color</code></a>, <a href="/de/CSS/background-image" title="de/CSS/background-image"><code>background-image</code></a>, <a href="/de/CSS/background-origin" title="de/CSS/background-origin"><code>background-origin</code></a>, <a href="/de/CSS/background-repeat" title="de/CSS/background-repeat"><code>background-repeat</code></a>, <a href="/de/CSS/background-size" title="de/CSS/background-size"><code>background-size</code></a></li> <li><a href="/de/CSS/-moz-background-inline-policy" title="de/CSS/-moz-background-inline-policy"><code>-moz-background-inline-policy</code></a></li>
+</ul>
+<p>{{ languages( { "en": "en/CSS/background-position", "fr": "fr/CSS/background-position", "pl": "pl/CSS/background-position", "es": "es/CSS/background-position" } ) }}</p>
diff --git a/files/de/web/css/background-repeat/index.html b/files/de/web/css/background-repeat/index.html
new file mode 100644
index 0000000000..7dd8a25693
--- /dev/null
+++ b/files/de/web/css/background-repeat/index.html
@@ -0,0 +1,166 @@
+---
+title: background-repeat
+slug: Web/CSS/background-repeat
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/background-repeat
+---
+<p>{{ CSSRef() }}</p>
+
+<h3 id="Übersicht">Übersicht:</h3>
+
+<p>Die <code>background-repeat</code> Eigenschaft bestimmt, ob und wie Hintergrundbilder wiederholt werden.</p>
+
+<div class="note">Ab Gecko 1.9.2 (Firefox 3.6) können mehrere Hintergrundwiederholungen, durch Kommata getrennt, definiert werden.<br>
+Vorherige Versionen unterstützen nur einen Wert.</div>
+
+<ul>
+ <li>Standardwert: <code>repeat</code></li>
+ <li>Anwendbar auf: Alle Elemente</li>
+ <li>Vererbbar: Nein</li>
+ <li>Prozentwerte: Nein</li>
+ <li>Medium: visuell</li>
+ <li>berechneter Wert: wie festgelegt</li>
+</ul>
+
+<h3 id="Syntax">Syntax</h3>
+
+<pre class="eval">background-repeat:  &lt;Hintergrundwiederholung&gt;[, &lt;Hintergrundwiederholung&gt;]*
+
+<strong>&lt;Hintergrundwiederholung&gt;</strong>:
+repeat | repeat-x | repeat-y | no-repeat | round | space | inherit
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt>repeat</dt>
+ <dd>Das Hintergrundbild wird horizontal und vertikal wiederholt.</dd>
+ <dt>repeat-x</dt>
+ <dd>Das Hintergrundbild wird nur horizontal wiederholt.</dd>
+ <dt>repeat-y</dt>
+ <dd>Das Hintergrundbild wird nur vertikal wiederholt.</dd>
+ <dt>no-repeat</dt>
+ <dd>Das Hintergrundbild wird nicht wiederholt. Nur ein Exemplar wird angezeigt.</dd>
+ <dt>round</dt>
+ <dd>{{ unimplemented_inline() }} Das Hintergrundbild wird so oft wiederholt, wie es in das Element hinein passt. Dabei kann das Hintergrundbild in seiner Größe angepasst werden, um auf die volle Breite bzw. Höhe des Elements ausgestreckt zu werden.</dd>
+ <dt>space</dt>
+ <dd>{{ unimplemented_inline() }} Das Hintergrundbild wird so oft wiederholt, wie es in das Element hinein passt. Allerdings wird die Bildgröße nicht angepasst, sondern soviel Platz zwischen den Hintergrundbildern gelassen, sodass sich der Hintergrund auf das gesamte Element verteilt.</dd>
+ <dt>inherit</dt>
+ <dd>Der Wert des Elternelements wird geerbt.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ol&gt;
+    &lt;li&gt;no-repeat
+        &lt;div class="one"&gt;&amp;nbsp;&lt;/div&gt;
+    &lt;/li&gt;
+    &lt;li&gt;repeat
+        &lt;div class="two"&gt;&amp;nbsp;&lt;/div&gt;
+    &lt;/li&gt;
+    &lt;li&gt;repeat-x
+        &lt;div class="three"&gt;&amp;nbsp;&lt;/div&gt;
+    &lt;/li&gt;
+    &lt;li&gt;repeat-y
+        &lt;div class="four"&gt;&amp;nbsp;&lt;/div&gt;
+    &lt;/li&gt;
+    &lt;li&gt;repeat-x, repeat-y (multiple images)
+        &lt;div class="five"&gt;&amp;nbsp;&lt;/div&gt;
+    &lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* Shared for all DIVS in example */
+li {margin-bottom: 12px;}
+div {
+    background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif);
+    width: 144px;
+    height: 84px;
+}
+
+/* background repeat CSS */
+.one {
+    background-repeat: no-repeat;
+}
+.two {
+    background-repeat: repeat;
+}
+.three {
+    background-repeat: repeat-x;
+}
+.four {
+    background-repeat: repeat-y;
+}
+
+/* Multiple images */
+.five {
+    background-image:  url(https://mdn.mozillademos.org/files/12005/starsolid.gif),
+                       url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png);
+    background-repeat: repeat-x,
+                       repeat-y;
+    height: 144px;
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>In this example, each list item is matched with a different value of <code>background-repeat</code>.</p>
+
+<p>{{EmbedLiveSample('Beispiele', 240, 360)}}</p>
+
+<h3 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Browser</th>
+   <th>ab Version</th>
+   <th>mehrere Hintergrundbilder</th>
+   <th><code>round</code> und <code>space</code> Werte</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>4.0</td>
+   <td>---</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td>1.0 (1.0)</td>
+   <td>3.6 (1.9.2)</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>3.5</td>
+   <td>10.5</td>
+   <td>10.5</td>
+  </tr>
+  <tr>
+   <td>Safari (WebKit)</td>
+   <td>1.0 (85)</td>
+   <td>1.3 (312)</td>
+   <td>---</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Spezifikation">Spezifikation</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-background/#background-repeat" lang="en">CSS 3 Background and Borders #background-repeat</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-repeat" lang="en">CSS 2.1 Colors and Backgrounds #background-repeat</a></li>
+</ul>
+
+<h3 id="Siehe_auch">Siehe auch</h3>
+
+<ul>
+ <li><a href="/de/CSS/background" title="de/CSS/background"><code>background</code></a>, <a href="/de/CSS/background-attachment" title="de/CSS/background-attachment"><code>background-attachment</code></a>, <a href="/de/CSS/background-clip" title="de/CSS/background-clip"><code>background-clip</code></a>, <a href="/de/CSS/background-color" title="de/CSS/background-color"><code>background-color</code></a>, <a href="/de/CSS/background-image" title="de/CSS/background-image"><code>background-image</code></a>, <a href="/de/CSS/background-origin" title="de/CSS/background-origin"><code>background-origin</code></a>, <a href="/de/CSS/background-position" title="de/CSS/background-position"><code>background-position</code></a>, <a href="/de/CSS/background-size" title="de/CSS/background-size"><code>background-size</code></a></li>
+ <li><a href="/de/CSS/-moz-background-inline-policy" title="de/CSS/-moz-background-inline-policy"><code>-moz-background-inline-policy</code></a></li>
+</ul>
+
+<p>{{ languages( { "en": "en/CSS/background-repeat", "es": "es/CSS/background-repeat", "fr": "fr/CSS/background-repeat", "pl": "pl/CSS/background-repeat" } ) }}</p>
diff --git a/files/de/web/css/background-size/index.html b/files/de/web/css/background-size/index.html
new file mode 100644
index 0000000000..de6629ef6b
--- /dev/null
+++ b/files/de/web/css/background-size/index.html
@@ -0,0 +1,151 @@
+---
+title: background-size
+slug: Web/CSS/background-size
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Hintergrund
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+translation_of: Web/CSS/background-size
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code style="font-size: 14px; line-height: inherit;">background-size</code><span style="line-height: inherit;"> </span><a href="/en-US/docs/CSS" style="line-height: inherit;" title="CSS">CSS</a> Eigenschaft definiert die Abmessungen eines Hintergrundbildes. Die Abmessungen des Bildes können komplett festgelegt werden oder nur teilweise, um das eigentliche Seitenverhältnis zu erhalten.</p>
+
+<div class="note"><strong>Hinweis:</strong> Folgt auf <code>background-size</code> die {{cssxref("background")}} Kurzform und es wird in ihr kein Wert für diese Eigenschaft angegeben, wird der Wert auf den Standardwert zurückgesetzt.</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Schlüsselwort Syntax */
+background-size: cover;
+background-size: contain;
+
+/* Ein-Wert Syntax: Der Wert definiert die Bildbreite,
+   die Höhe wird auf 'auto' gesetzt */
+background-size: 50%;
+background-size: 3em;
+background-size: 12px;
+background-size: auto;
+
+/* Zwei-Wert Syntax: Der erste Wert definiert die Bildbreite,
+   der Zweite die Höhe */
+background-size: 50% auto;
+background-size: 3em 25%;
+background-size: auto 6px;
+background-size: auto auto;
+
+/* Werte für mehrere Hintergründe, die durch background-image definiert wurden,
+   können kommagetrennt aufgelistet werden */
+background-size: auto, auto     /* Nicht zu verwechseln mit background-size: auto auto */
+background-size: 50%, 25%, 25%;
+background-size: 6px, auto, contain;
+
+/* Globale Werte */
+background-size: inherit;
+background-size: initial;
+background-size: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Ein <code>{{cssxref("&lt;length&gt;")}}</code> Wert, der das Hintergrundbild auf die angegebene Länge in der entsprechenden Maßeinheit skaliert. Negative Werte sind nicht erlaubt.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Ein {{cssxref("&lt;percentage&gt;")}} Wert,  der das Hintergrundbild auf den angegebenen Prozentwert des Hintergrund-Positionierungsbereich skaliert (angegeben durch {{cssxref("background-origin")}}). Standardmäßig umfasst der Positionierungsbereich den Inhalt des Elements und dessen Innenabstand (Padding), kann aber auch so abgeändert werden, dass er nur den Inhalt umfasst oder Inhalt, Innenabstand und Rahmen. Ist die {{cssxref("background-attachment","attachment")}} Eigenschaft auf <code>fixed</code> gesetzt, entspricht der Positionierungsbereich dem Browser-Fenster abzüglich des von eventuellen Scroll-Leisten genutzten Bereichs. Negative Prozentwerte sind nicht erlaubt.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Das <code>auto</code> Schlüsselwort skaliert das Hintergrundbild so in die entsprechende Richtung, dass das ursprüngliche Seitenverhältnis beibehalten wird.</dd>
+ <dt><code>cover</code></dt>
+ <dd>Das <code>cover</code> Schlüsselwort behält das Seitenverhältnis des Hintergrundbildes bei und skaliert es so, dass es so klein wie möglich ist, aber den Hintergrund-Positionierungsbereichs vollständig abdeckt.</dd>
+ <dt><code>contain</code></dt>
+ <dd>Das contain Schlüsselwort behält das Seitenverhältnis des Hintergrundbildes bei und skaliert es so, dass es so groß wie möglich ist, aber vollständig im Hintergrund-Positionierungsbereichs enthalten ist.</dd>
+</dl>
+
+<p>Die Interpretation möglicher Werte hängt von den Maßen (Breite und Höhe) und der Proportion (Verhältnis von Breite zu Höhe) des Bildes ab. Eine Rastergrafik hat immer eigene Maße und eine eigene Proportion. Eine Vektorgrafik kann beide eigenen Maße haben (und somit auch eine eigene Proportion). Sie kann aber auch nur ein oder kein eigenes Maß haben. In beiden Fällen kann sie (muss aber nicht) eine eigen Proportion haben. Farbverläufe werden als Grafiken ohne eigene Maße und eigener Proportion behandelt.</p>
+
+<div class="note"><strong>Hinweis:</strong> Dieses Verhalten hat sich in Gecko 8.0 {{geckoRelease("8.0")}} geändert. Vorher wurden Farbverläufe als Grafiken ohne eigene Maße, aber mit einer eigenen Proportion behandelt. Die Proportion entsprach dabei derjenigen des Positionierungsbereich des Hintergrunds.</div>
+
+<p>Hintergrundbilder, die mittels {{cssxref("-moz-element")}} generiert wurden, werden momentan als Bilder mit den Maßen des Elements behandelt. Außer es handelt sich um ein SVG-Element, dann werden die Maße des Hintergrund-Positionierungsbereich mit der eigenen Proportion verwendet.</p>
+
+<div class="note"><strong>Hinweis:</strong> Die entspricht nicht dem spezifizierten Verhalten, wonach die Maße und die Proportion stets denjenigen Werten des Elements entsprechen müssen.</div>
+
+<p>Die gerenderte Größe des Hintergrundbildes wird folgendermaßen berechnet:</p>
+
+<dl>
+ <dt>Falls beide Werte von <code>background-size</code> angegeben werden und nicht <code>auto</code> sind:</dt>
+ <dd>Das Hintergrundbild wird mit den angegebenen Werten gerendert.</dd>
+ <dt>Falls die Schlüsselwörter <code>contain</code> oder <code>cover</code> gesetzt werden:</dt>
+ <dd>Das Bild behält seine eigene Proportion bei, wobei die Maße so berechnet werden, dass das Bild im Hintergrund-Positionierungsbereich enthalten ist beziehungsweise ihn abdeckt. Besitzt das Bild keine eigene Proportion, wird es auf die Größe des Hintergrund-Positionierungsbereichs gerendert.</dd>
+ <dt>Falls <code>background-size </code><code>auto</code> oder <code>auto auto</code> ist:</dt>
+ <dd>Besitzt das Bild beide Maße, wird es in dieser Größe gerendert. Hat es keine eigenen Maße und keine eigene Proportion, wird es in der Größe des Hintergrund-Positionierungsbereich gerendert. Hat es keine Maße, aber eine Proportion, wird es so gerendert als ob <code>contain</code> angegeben wurde. Hat es ein Maß angegeben und besitzt eine Proportion, wird es entsprechend dieser Angaben gerendert. Hat es ein Maß und keine Proportion, wird es mit diesem eigenen Maß und dem entsprechenden Maß des Hintergrund-Positionierungsbereichs gerendert.</dd>
+ <dt>Falls <code>background-size</code> ein <code>auto</code> und ein nicht-<code>auto</code> Wert besitzt:</dt>
+ <dd>Hat das Bild eine eigene Proportion, wird das nicht spezifizierte Maß aus dem angegebenen Maß und der Proportion berechnet. Hat das Bild keine eigene Proportion, wird das angebene Maß und das entsprechende eigene Maß des Bilds verwendet, falls vorhanden. Existiert kein eigenes Maß, wird dasjenige des Hintergrund-Positionierungsbereichs verwendet. </dd>
+</dl>
+
+<p>Es ist zu beachten, dass Vektorgrafiken ohne Maße oder Proportion noch nicht vollständig in allen Browsern implementiert sind. Aus diesem Grund sollte man nicht zu sehr auf das oben beschriebene Verhalten vertrauen. Tests in unterschiedlichen Browsern (insbesondere Firefox 7 oder älter und Firefox 8 oder neuer) sind nötig, um festzustellen, ob die verschiedenen Darstellungen akzeptabel sind.</p>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p><a href="http://whereswalden.com/files/mozilla/background-size/page-cover.html">Diese Demonstration von <code>background-size: cover</code></a> und <a href="http://whereswalden.com/files/mozilla/background-size/page-contain.html">diese Demonstration von <code>background-size: contain</code></a> sollten in einem neuen Fenster geöffnet werden, damit man das Verhalten von <code>cover</code> und <code>contain</code> bei ändernder Größe des Hintergrund-Positionierungsbereichs beobachten kann. <a href="http://whereswalden.com/files/mozilla/background-size/more-examples.html">Diese Demos</a> zeigen das Zusammenspiel von <code>background-size</code> mit anderen <code>background-*</code> Attributen.</p>
+
+<h2 id="Hinweise">Hinweise</h2>
+
+<p>Wird ein Farbverlauf als HIntergrund und zusätzliche eine <code>background-size</code> angegeben, ist es empfehlenswert, die Hintergrund-Größe nicht mit einem einzelnen <code>auto</code> Wert oder nur mit einer Breite zu definieren (zum Beispiel <code>background-size: 50%</code>). Das Rendern solcher Farbverläufe hat sich mit Firefox 8 geändert und führt generell zu einer inkonsistenten Darstellung in Browsern, die die beiden Spezifikationen <a href="http://www.w3.org/TR/css3-background/#the-background-size" title="http://www.w3.org/TR/css3-background/#the-background-size">the CSS3 <code>background-size</code> specification</a> und <a href="http://dev.w3.org/csswg/css3-images/#gradients" title="http://dev.w3.org/csswg/css3-images/#gradients">the CSS3 Image Values gradient specification</a> nicht vollständig implementieren.</p>
+
+<pre class="brush: css">.bar {
+       width: 50px; height: 100px;
+       background-image: gradient(...);
+
+       /* NICHT EMPFOHLEN */
+       background-size: 25px;
+       background-size: 50%;
+       background-size: auto 50px;
+       background-size: auto 50%;
+
+       /* OKAY */
+       background-size: 25px 50px;
+       background-size: 50% 50%;
+}
+</pre>
+
+<p>Insbesondere ist es nicht empfohlen, ein Pixel-Wert und ein <code>auto</code> Wert zusammen mit einem Farbverlauf zu verwenden, da die Darstellung in Firefox-Versionen vor 8 oder in anderen Browsern, die nicht das Firefox 8 Rendering verwenden nicht nachzuvollziehen ist, wenn die genaue Größe des Elements nicht bekannt ist.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-background-size', 'background-size')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.background-size")}}
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/CSS/CSS_Referenz" title="CSS Reference">CSS Referenz</a></li>
+ <li><a href="/de/docs/Web/Guide/CSS/Using_multiple_backgrounds" title="CSS/Multiple backgrounds">Mehrere Hintergründe</a></li>
+ <li><a href="/de/docs/Web/Guide/CSS/Scaling_background_images" title="CSS/Scaling_background_images">HIntergrundbilder skalieren</a></li>
+</ul>
diff --git a/files/de/web/css/background/index.html b/files/de/web/css/background/index.html
new file mode 100644
index 0000000000..d4e50112d0
--- /dev/null
+++ b/files/de/web/css/background/index.html
@@ -0,0 +1,182 @@
+---
+title: background
+slug: Web/CSS/background
+tags:
+  - CSS
+  - CSS Background
+  - CSS Eigenschaft
+  - CSS Hintergrund
+  - Referenz
+translation_of: Web/CSS/background
+---
+<div>
+<p>{{CSSRef("CSS Background")}}</p>
+
+<p><span class="seoSummary">Die <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Kurzformat_Eigenschaft">Kurzformat</a>-Eigenschaft <strong><code>background</code></strong>setzt alle Hintergrundstileigenschaften auf einmal, wie Farbe, Bild, Ursprung und Größe oder Wiederholungsmethode.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/css/background.html")}}</div>
+
+<div class="hidden">Die Quelle für dieses interaktive Beispiel ist in einem GitHub-Repository gespeichert. Wenn Sie zum Projekt der interaktiven Beispiele beitragen möchten, klonen Sie bitte <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und senden Sie uns eine Pull-Anfrage.</div>
+
+<h2 id="Eigenschaftsbestandteile">Eigenschaftsbestandteile</h2>
+
+<p>Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:</p>
+
+<ul>
+ <li>{{cssxref("background-attachment")}}</li>
+ <li>{{cssxref("background-clip")}}</li>
+ <li>{{cssxref("background-color")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+ <li>{{cssxref("background-origin")}}</li>
+ <li>{{cssxref("background-position")}}</li>
+ <li>{{cssxref("background-repeat")}}</li>
+ <li>{{cssxref("background-size")}}</li>
+</ul>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css notranslate">/* Verwendung von &lt;background-color&gt; */
+background: green;
+
+/* Verwendung von &lt;bg-image&gt; und &lt;repeat-style&gt; */
+background: url("test.jpg") repeat-y;
+
+/* Verwendung von &lt;box&gt; und &lt;background-color&gt; */
+background: border-box red;
+
+/* Ein einzelnes Bild, zentriert und skaliert */
+background: no-repeat center/80% url("../img/image.png");
+</pre>
+
+<p>Die Eigenschaft <code>background</code> wird als eine oder mehrere Hintergrundebenen, durch Kommata getrennt, angegeben.</p>
+
+<p>Die Syntax der einzelnen Schichten ist wie folgt:</p>
+
+<ul>
+ <li> Jede Schicht kann null oder ein Vorkommen eines der folgenden Werte enthalten:
+  <ul>
+   <li><code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/background$edit#&lt;attachment>">&lt;attachment&gt;</a></code></li>
+   <li><code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/background$edit#&lt;bg-image>">&lt;bg-image&gt;</a></code></li>
+   <li><code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/background$edit#&lt;position>">&lt;position&gt;</a></code></li>
+   <li><code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/background$edit#&lt;bg-size>">&lt;bg-size&gt;</a></code></li>
+   <li><code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/background$edit#&lt;repeat-style>">&lt;repeat-style&gt;</a></code></li>
+  </ul>
+ </li>
+ <li>Der Wert <code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/background$edit#&lt;bg-size>">&lt;bg-size&gt;</a></code>  darf nur unmittelbar nach <code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/background$edit#&lt;position>">&lt;position&gt;</a></code>, getrennt durch das Zeichen '/', wie folgt eingefügt werden: "<code>center/80%</code>".</li>
+ <li>Der Wert <code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/background$edit#&lt;box>">&lt;box&gt;</a></code> kann Null, eins oder zwei Mal eingeschlossen werden. Wenn er einmal eingeschlossen wird, setzt er sowohl {{cssxref("background-origin")}} als auch {{cssxref("background-clip")}}. Bei zweimaligem Einschließen setzt das erste Vorkommen {{cssxref("background-origin")}} und das zweite Vorkommen {{cssxref("background-clip")}}.</li>
+ <li>Der Wert <code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/background$edit#&lt;background-color>">&lt;background-color&gt;</a></code> darf nur in der zuletzt angegebenen Ebene enthalten sein.</li>
+</ul>
+
+<div class="note"><strong>Hinweis:</strong> Die {{cssxref("background-color")}} kann nur für den letzten Hintergrund definiert werden, da es nur eine Hintergrundfarbe für das gesamte Element gibt.</div>
+
+<h3 id="Werte">Werte</h3>
+
+<p>Einer oder mehrere der folgenden Werte, in beliebiger Reihenfolge:</p>
+
+<dl>
+ <dt><code>&lt;attachment&gt;</code></dt>
+ <dd>Siehe {{cssxref("background-attachment")}}</dd>
+ <dt><code>&lt;box&gt;</code></dt>
+ <dd>Siehe {{cssxref("background-clip")}} and {{cssxref("background-origin")}}</dd>
+ <dt><code>&lt;background-color&gt;</code></dt>
+ <dd>Siehe {{cssxref("background-color")}}</dd>
+ <dt><code>&lt;bg-image&gt;</code></dt>
+ <dd>See {{Cssxref("background-image")}}</dd>
+ <dt><code>&lt;position&gt;</code></dt>
+ <dd>Siehe {{cssxref("background-position")}}</dd>
+ <dt><code>&lt;repeat-style&gt;</code></dt>
+ <dd>Siehe {{cssxref("background-repeat")}}</dd>
+ <dt><code>&lt;bg-size&gt;</code></dt>
+ <dd>Siehe {{cssxref("background-size")}}.</dd>
+</dl>
+
+<h2 id="Bedenken_zur_Zugänglichkeit">Bedenken zur Zugänglichkeit</h2>
+
+<p>Browser bieten keine speziellen Informationen über Hintergrundbilder zu unterstützenden Technologien. Dies ist vor allem für Bildschirmleseprogramme wichtig, da ein Bildschirmleseprogramm seine Anwesenheit nicht ankündigt und seinen Benutzern daher nichts vermittelt. Wenn das Bild Informationen enthält, die für das Verständnis des Gesamtzwecks der Seite entscheidend sind, ist es besser, diese im Dokument semantisch zu beschreiben.</p>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Formale_Definition">Formale Definition</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formale_Syntax">Formale Syntax</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Setting_backgrounds_with_color_keywords_and_images" name="Setting_backgrounds_with_color_keywords_and_images">Hintergründe mit farbigen Schlüsselwörtern und Bildern setzen</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p class="topbanner"&gt;
+  Starry sky&lt;br/&gt;
+  Twinkle twinkle&lt;br/&gt;
+  Starry sky
+&lt;/p&gt;
+&lt;p class="warning"&gt;Here is a paragraph&lt;p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush:css' highlight:[2,6]; notranslate">.warning {
+  background: pink;
+}
+
+.topbanner {
+  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed;
+}
+</pre>
+
+<h4 id="Ergebnis">Ergebnis</h4>
+
+<p>{{EmbedLiveSample("Setting_backgrounds_with_color_keywords_and_images")}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-background', 'background')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Die Kurzformat-Eigenschaft wurde erweitert, sodass sie mehrere Hintergründe und die neuen Eigenschaften {{cssxref("background-size")}}, {{cssxref("background-origin")}} und {{cssxref("background-clip")}} unterstützt.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background', 'background')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Keine wesentlichen Änderungen</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background', 'background')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<div>
+<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und senden Sie uns eine Pull-Anfrage.</div>
+
+<p>{{Compat("css.properties.background")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref("-moz-background-inline-policy")}}</li>
+ <li><a href="/de/docs/Farbverläufe_in_CSS">Verwendung von CSS Farbverläufen</a></li>
+ <li><a href="/de/docs/Web/Guide/CSS/mehrere_Hintergründe_verwenden">Mehrere Hintergründe in CSS verwenden</a></li>
+</ul>
diff --git a/files/de/web/css/basic-shape/index.html b/files/de/web/css/basic-shape/index.html
new file mode 100644
index 0000000000..9c53920461
--- /dev/null
+++ b/files/de/web/css/basic-shape/index.html
@@ -0,0 +1,176 @@
+---
+title: <basic-shape>
+slug: Web/CSS/basic-shape
+tags:
+  - CSS
+  - CSS Datentyp
+  - CSS Formen
+  - Referenz
+translation_of: Web/CSS/basic-shape
+---
+<p>{{CSSRef}}</p>
+
+<p>Der <code>&lt;basic-shape&gt;</code> <a href="/de/docs/Web/CSS">CSS</a> Datentyp stellt eine geometrische Grundform dar. Er kann in den {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} und {{cssxref("offset-path")}} CSS-Eigenschaften verwendet werden.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>Die unten aufgelisteten Funktionen definieren <code>&lt;basic-shape&gt;</code> -Werte.</p>
+
+<p>Wenn eine Form erstellt wird, definiert sich der Referenzrahmen durch jede CSS-Eigenschaft, die <code>&lt;basic-shape&gt;</code> -Werte benutzt. Der Koordinatenursprung für die Form liegt in der oberen linken Ecke des Referenzrahmens, wobei die x-Achse nach rechts und die y-Achse nach unten verläuft. Dieses Koordinatensystem ist in vielen Computergrafiksystemen üblich.</p>
+
+<h3 id="Form-Funktionen">Form-Funktionen</h3>
+
+<p>Die folgenden Formen werden unterstützt. Alle <code>&lt;basic-shape&gt;</code> Werte verwenden die funktionale Schreibweise und werden mithilfe der <a href="/de/docs/Web/CSS/Wertdefinitionssyntax">Wertdefinitionssyntax</a> definiert.</p>
+
+<dl>
+ <dt><code>inset()</code></dt>
+ <dd>
+ <pre class="syntaxbox"><code>inset( &lt;shape-arg&gt;{1,4} [round &lt;border-radius&gt;]? )</code></pre>
+
+ <p>Definiert ein nach innen versetztes Rechteck.</p>
+
+ <p>Wenn alle vier ersten Argumente vorhanden sind, stellen sie den Versatz des Rechtecks oben, links, rechts und unten dar. Der Versatz bezieht sich auf den Referenzrahmen. Wie auch bei der {{cssxref("margin")}}-Eigenschaft können weniger als vier Werte als Kurzform angegeben werden.</p>
+
+ <p>Die optionalen {{cssxref("&lt;border-radius&gt;")}}-Argumente definieren abgerundete Ecken für das Rechteck. Auch hier ist die <code>&lt;border-radius&gt;</code>-Kurzform-Syntax zulässig.</p>
+ </dd>
+ <dt><code>circle(</code>)</dt>
+ <dd>
+ <pre class="syntaxbox"><code><code><code>circle( [&lt;shape-radius&gt;]? [at &lt;position&gt;]? )</code></code></code></pre>
+
+ <p>Definiert einen Kreis.</p>
+
+ <p>Das <code>&lt;shape-radius&gt;</code>-Argument stellt den Radius r des Kreises dar, negative Werte sind verboten. Ein Prozentwert bezieht sich auf <code>sqrt(a^2+b^2)/sqrt(2)</code>, wobei a und b Höhe und Breite des Referenzrahmens darstellen. Dieser Referenzwert ist die Länge einer Seite eines Quadrats, das dieselbe Fläche wie der Referenzrahmen hat.</p>
+
+ <p>Das {{cssxref("&lt;position&gt;")}}-Argument definiert den Mittelpunkt des Kreises. Standardmäßig wird der Kreis in der Mitte des Referenzrahmens platziert.</p>
+ </dd>
+ <dt><code>ellipse()</code></dt>
+ <dd>
+ <pre class="syntaxbox"><code><code><code>ellipse( [&lt;shape-radius&gt;{2}]? [at &lt;position&gt;]? )</code></code></code></pre>
+
+ <p>Definiert eine Ellipse, deren Hauptachse und Nebenachse entlang der x- oder y-Achsen verlaufen.</p>
+
+ <p>Das <code>&lt;shape-radius&gt;</code> Argument repräsentiert den Radius entlang der x- bzw. y-Achse. Negative Werte sind ungültig. Prozentwerte werden im Verhältnis zur Breite (für die x-Achse) und Höhe (für die y-Achse) des Referenzrahmens bestimmt.</p>
+
+ <p>Das {{cssxref("&lt;position&gt;")}}-Argument definiert den Mittelpunkt der Ellipse. Standardmäßig wird die Ellipse in der Mitte des Referenzrahmens platziert.</p>
+ </dd>
+</dl>
+
+<dl>
+ <dt><code>polygon()</code></dt>
+ <dd>
+ <pre><code>polygon( [&lt;fill-rule&gt;,]? [&lt;shape-arg&gt; &lt;shape-arg&gt;]# )</code></pre>
+
+ <p>Definiert ein Vieleck (Polygon).</p>
+
+ <p><code>&lt;fill-rule&gt;</code> definiert die <a href="https://developer.mozilla.org/de/docs/Web/SVG/Attribute/fill-rule">Füllregel</a>, die zur Bestimmung der Innenfläche des Polygons verwendet werden soll. Mögliche Werte sind <code>nonzero</code> und <code>evenodd</code>. Der Standardwert ist <code>nonzero</code>.</p>
+
+ <p>Jedes Argumentpaar der Liste stellt die x- und y-Koordinate einer Ecke des Vielecks dar.</p>
+ </dd>
+ <dt><code>path()</code></dt>
+ <dd>
+ <pre><code>path( [&lt;fill-rule&gt;,]? &lt;string&gt;)</code></pre>
+
+ <p>Definiert einen <a href="https://developer.mozilla.org/de/docs/Web/SVG/Attribute/d">SVG-Pfad</a>, also eine Kombination aus Kurven, Strecken und Punkten.</p>
+
+ <p><code>&lt;fill-rule&gt;</code> definiert die <a href="https://developer.mozilla.org/de/docs/Web/SVG/Attribute/fill-rule">Füllregel</a>, die zur Bestimmung der Innenfläche des Polygons verwendet werden soll. Mögliche Werte sind <code>nonzero</code> und <code>evenodd</code>. Der Standardwert ist <code>nonzero</code>.</p>
+
+ <p><code>&lt;string&gt;</code> entspricht dem <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">d</span></font>-Attribut des SVG-Pfades und ist der SVG-Pfad-Text in Anführungszeichen.</p>
+ </dd>
+</dl>
+
+<p>Die Argumente, die oben nicht definiert sind, werden folgendermaßen definiert:</p>
+
+<pre class="syntaxbox"><code>&lt;shape-arg&gt; = &lt;length&gt; | &lt;percentage&gt;
+&lt;shape-radius&gt; = &lt;length&gt; | &lt;percentage&gt; | closest-side | farthest-side</code></pre>
+
+<p><code>closest-side</code> verwendet den Abstand des Mittelpunkts der Form zur nächsten Seite des Referenzrahmens. Für Kreise ist dies die nächste Seite in beliebiger Richtung. Für Ellipsen ist dies die nächste Seite in Radiusrichtung.</p>
+
+<p><code>farthest-side</code> verwendet die Länge vom Mittelpunkt der Form zur entferntesten Seite der Referenzrahmens. Für Kreise ist dies die entfernteste Seite in beliebiger Richtung. Für Ellipsen ist dies die entfernteste Seite in Radiusrichtung.</p>
+
+<h2 id="Berechnete_Werte_von_Grundformen">Berechnete Werte von Grundformen</h2>
+
+<p>Die Werte in einer <code>&lt;basic-shape&gt;</code> Funktion werden wie angegeben berechnet, mit folgenden Ausnahmen:</p>
+
+<ul>
+ <li>Anstelle von ausgelassenen Werten werden Standardwerte verwendet.</li>
+ <li>Ein {{cssxref("&lt;position&gt;")}}-Wert in <code>circle()</code> oder  <code>ellipse()</code> wird als ein Versatzpaar (horizontal, dann vertikal) vom Ursprung berechnet, wobei jeder Versatz als Kombination einer absoluten Länge und einem Prozentwert angegeben wird.</li>
+ <li>Ein <a href="/de/docs/Web/CSS/border-radius"><code>&lt;border-radius&gt;</code></a> Wert in <code>inset()</code> wird als eine erweiterte Liste aller acht {{cssxref("&lt;length&gt;")}}-Werte oder Prozentwerte berechnet.</li>
+</ul>
+
+<h2 id="Interpolation_von_Grundformen">Interpolation von Grundformen</h2>
+
+<div>Zur Interpolation zwischen zwei Grundformen werden die folgenden Regeln angewandt. In den Formfunktionen werden alle Werte als Liste interpoliert. Die Listenwerte werden, soweit möglich, als {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;percentage&gt;")}} oder {{cssxref("calc")}}-Ausdruck interpoliert. Falls die Listenwerte nicht diesen Typen entsprechen, jedoch identisch sind (wie beispielsweise Zahlen ungleich null an der gleichen Position innerhalb beider Listen), werden diese Werte interpoliert.</div>
+
+<div></div>
+
+<ul>
+ <li>Beide Formen müssen den gleichen Referenzrahmen verwenden.</li>
+ <li>Falls beide Formen vom gleichen Typ sind, d. h. vom Typ <code>ellipse()</code> oder <code>circle()</code>, und keiner der Radien die Schlüsselwörter <code>closest-side</code> oder <code>farthest-side</code> verwendt, wird zwischen jedem Wert der Formfunktionen interpoliert.</li>
+ <li>Falls beide Formen vom Typ <code>inset()</code> sind, wird zwischen jedem Wert der Formfunktionen interpoliert.</li>
+ <li>Falls beide Formen vom Typ <code>polygon()</code> sind, beide Vielecke die gleiche Anzahl an Eckpunkten haben und die gleiche <a href="/de/docs/Web/SVG/Attribute/fill-rule"><code>&lt;fill-rule&gt;</code></a> verwenden, wird zwischen jedem Wert der Formfunktionen interpoliert.</li>
+ <li>In allen anderen Fällen findet keine Interpolation statt.</li>
+</ul>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Animiertes_Polygon">Animiertes Polygon</h3>
+
+<p>In diesem Beispiel nutzten wir eine <a href="/de/docs/Web/CSS/@keyframes">@keyframes</a> Regel, um den Pfad zwischen zwei Vielecken zu animieren. (In diesem Beispiel müssen beide Vielecke dieselbe Anzahl Kanten haben.)</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">div {
+  width: 300px;
+  height: 300px;
+  background: repeating-linear-gradient(red, orange 50px);
+  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
+  animation: 4s poly infinite alternate ease-in-out;
+  margin: 10px auto;
+}
+
+@keyframes poly {
+  from {
+    clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
+  }
+
+  to {
+    clip-path: polygon(50% 30%, 100% 0%, 70% 50%, 100% 100%, 50% 70%, 0% 100%, 30% 50%, 0% 0%);
+  }
+}</pre>
+
+<h4 id="Ergebnis">Ergebnis</h4>
+
+<p>{{EmbedLiveSample('Animated_polygon','340', '340')}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS Shapes', '#basic-shape-functions', '&lt;basic-shape&gt;') }}</td>
+   <td>{{ Spec2('CSS Shapes') }}</td>
+   <td>Ursprüngliche Definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{Compat("css.types.basic-shape")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref("shape-outside")}}</li>
+</ul>
diff --git a/files/de/web/css/berechneter_wert/index.html b/files/de/web/css/berechneter_wert/index.html
new file mode 100644
index 0000000000..d98a8be023
--- /dev/null
+++ b/files/de/web/css/berechneter_wert/index.html
@@ -0,0 +1,32 @@
+---
+title: Berechneter Wert
+slug: Web/CSS/berechneter_Wert
+tags:
+  - CSS
+  - Guide
+  - Web
+translation_of: Web/CSS/computed_value
+---
+<div>
+ {{cssref}}</div>
+<h2 id="Übersicht">Übersicht</h2>
+<p>Der <strong>berechnete Wert</strong> einer CSS Eigenschaft wird aus dem angegebenen Wert berechnet durch:</p>
+<ul>
+ <li>Verarbeitung der speziellen Werte {{ cssxref("inherit") }} und {{ cssxref("initial") }} und</li>
+ <li>durch die Berechnung, die benötigt wird, um den Wert zu erreichen, der in der Zeile "Berechneter Wert" in der Übersicht der Eigenschaft beschrieben wird.</li>
+</ul>
+<p>Die Berechnung, die benötigt wird, um den "berechneten Wert" für die Eigenschaft zu erreichen, beinhaltet typischerweise die Konvertierung relativer Werte (wie die in <code>em</code> Einheiten oder Prozentangaben) zu absoluten Werten.</p>
+<p>Wenn zum Beispiel ein Element einen Wert <code>font-size:16px</code> und <code>padding-top:2em</code> definiert hat, dann ist der berechnete Wert von <code>padding-top</code> gleich <code>32px</code> (zweimal die Schriftgröße).</p>
+<p>Für einige Eigenschaften jedoch (jene, für die Prozentangaben relativ zu etwas sind, das Layout zur Bestimmung benötigt, wie <code>width</code>, <code>margin-right</code>, <code>text-indent</code> und <code>top</code>), werden definierte Prozentwerte zu berechneten Prozentwerten. Des weiteren werden in <code>line-height</code> definierte einheitenlose Zahlen zu berechneten Werten, wie angegeben. Diese relativen Werte, die im berechneten Wert gleich bleiben, werden absolut sobald der <a href="/de/docs/Web/CSS/benutzter_Wert">benutzte Wert</a> ermittelt wird.</p>
+<p>Der Hauptnutzen des <em>berechneten Wertes</em> (außer als ein Schritt zwischen dem <a href="/de/docs/Web/CSS/angegebener_Wert" title="en/CSS/specified_value">angegebenen Wert</a> und dem <a href="/de/docs/Web/CSS/benutzter_Wert" title="en/CSS/used_value">benutzten Wert</a>) ist <a class="internal" href="/de/docs/Web/CSS/Vererbung" title="en/CSS/inheritance">Vererbung</a> inklusive dem {{ cssxref("inherit") }} Schlüsselwort.</p>
+<h2 id="Hinweis">Hinweis</h2>
+<p>Die {{domxref("Window.getComputedStyle", "getComputedStyle()")}} DOM API gibt den <a href="/de/docs/Web/CSS/aufgelöster_Wert">aufgelösten Wert</a> zurück, welcher abhängig von der Eigenschaft entweder der berechnete Wert oder der <a href="/de/docs/Web/CSS/benutzter_Wert">benutzte Wert</a> ist.</p>
+<h2 id="Spezifikation">Spezifikation</h2>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/cascade.html#computed-value%20" title="http://www.w3.org/TR/CSS21/cascade.html#computed-value ">CSS 2.1 Assigning property values #computed-value </a></li>
+</ul>
+<h2 id="Siehe_auch">Siehe auch</h2>
+<ul>
+ <li><a href="/de/docs/Web/CSS/CSS_Referenz" title="CSS Reference">CSS Referenz</a></li>
+ <li>{{ CSS_key_concepts() }}</li>
+</ul>
diff --git a/files/de/web/css/border-bottom-color/index.html b/files/de/web/css/border-bottom-color/index.html
new file mode 100644
index 0000000000..86561e834a
--- /dev/null
+++ b/files/de/web/css/border-bottom-color/index.html
@@ -0,0 +1,99 @@
+---
+title: border-bottom-color
+slug: Web/CSS/border-bottom-color
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Rahmen
+  - Referenz
+translation_of: Web/CSS/border-bottom-color
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>border-bottom-color</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft legt die Farbe des unteren Rahmens eines Elements fest. Beachte, dass in vielen Fällen die Kurzschreibweisen {{cssxref("border-color")}} oder {{cssxref("border-bottom")}} geeigneter und daher zu bevorzugen sind.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css">border-bottom-color: yellow;
+border-bottom-color: #F5F6F7;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>Ist ein {{cssxref("&lt;color&gt;")}} CSS Wert, der die Farbe des unteren Rahmens beschreibt.</dd>
+ <dt><code>inherit</code></dt>
+ <dd>Ist ein Schlüsselwort, das die Farbe des unteren Rahmens des Elternelements kennzeichnet (welche sich vom Standardwert von <code>border-bottom-color</code> unterscheiden kann).</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Ein_einfacher_div_mit_einem_Rahmen">Ein einfacher div mit einem Rahmen</h3>
+
+<h4 id="HTML_Inhalt">HTML Inhalt</h4>
+
+<pre class="brush: html">&lt;div class="mybox"&gt;
+    &lt;p&gt;Dies ist eine Box mit einem Rahmen außenrum.
+       Beachte welche Seite der Box
+       &lt;span class="redtext"&gt;rot&lt;/span&gt; ist.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_Inhalt">CSS Inhalt</h4>
+
+<pre class="brush: css">.mybox {
+    border: solid 0.3em gold;
+    border-bottom-color: red;
+    width: auto;
+}
+.redtext {
+    color: red;
+}</pre>
+
+<h4 id="Ergebnis">Ergebnis</h4>
+
+<p>{{EmbedLiveSample("Ein_einfacher_div_mit_einem_Rahmen")}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Backgrounds", "#border-bottom-color", "border-bottom-color")}}</td>
+   <td>{{Spec2("CSS3 Backgrounds")}}</td>
+   <td>Keine nennenswerten Änderungen, jedoch wurde das Schlüsselwort <code>transparent</code> entfernt, das nun in {{cssxref("&lt;color&gt;")}} beinhaltet ist, welcher erweitert wurde.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "box.html#border-color-properties", "border-bottom-color")}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Erstmalige Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.border-bottom-color")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Die rahmenbezogenen CSS Kurzschreibweise Eigenschaften {{Cssxref("border")}}, {{Cssxref("border-bottom")}} und {{Cssxref("border-color")}}.</li>
+ <li>Die farbbezogenen CSS Eigenschaften, die sich auf die anderen Ränder beziehen: {{Cssxref("border-right-color")}}, {{Cssxref("border-top-color")}} und {{Cssxref("border-left-color")}}.</li>
+ <li>Die anderen rahmenbezogenen CSS Eigenschaften, die sich auf denselben Rand beziehen: {{cssxref("border-bottom-style")}} und {{cssxref("border-bottom-width")}}.</li>
+</ul>
diff --git a/files/de/web/css/border-bottom-left-radius/index.html b/files/de/web/css/border-bottom-left-radius/index.html
new file mode 100644
index 0000000000..ad1aea03ac
--- /dev/null
+++ b/files/de/web/css/border-bottom-left-radius/index.html
@@ -0,0 +1,51 @@
+---
+title: border-bottom-left-radius
+slug: Web/CSS/border-bottom-left-radius
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/border-bottom-left-radius
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die CSS Eigenschaft <code>border-bottom-left-radius</code> legt die Abrundung der unteren, linken Ecke eines Elements fest. Vor Gecko 2.0 (Firefox) war diese Eigenschaft unter dem Namen <code>-moz-border-radius-bottomleft</code> bekannt.</p>
+
+<p>Weitere Informationen sind unter <a href="/de/CSS/border-top-left-radius" title="de/CSS/border-top-left-radius"><code>border-top-left-radius</code></a> verfügbar.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="twopartsyntaxbox"><a href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax" title="/en-US/docs/CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("border-bottom-left-radius")}}</pre>
+
+<pre>border-bottom-left-radius: <em>radius</em>               /* the corner is a circle    */  E.g. border-bottom-left-radius: 3px
+border-bottom-left-radius: <em>horizontal</em> <em>vertical</em>  /* the corner is an ellipsis */  E.g. border-bottom-left-radius: 0.5em 1em
+
+border-bottom-left-radius: inherit</pre>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#border-bottom-left-radius', 'border-bottom-left-radius')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{Compat("css.properties.border-bottom-left-radius")}}</p>
diff --git a/files/de/web/css/border-bottom-right-radius/index.html b/files/de/web/css/border-bottom-right-radius/index.html
new file mode 100644
index 0000000000..786a7a21a7
--- /dev/null
+++ b/files/de/web/css/border-bottom-right-radius/index.html
@@ -0,0 +1,56 @@
+---
+title: border-bottom-right-radius
+slug: Web/CSS/border-bottom-right-radius
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Referenz
+  - CSS Ränder
+  - Layout
+  - NeedsContent
+translation_of: Web/CSS/border-bottom-right-radius
+---
+<p>{{CSSRef}}</p>
+
+<p>Die CSS Eigenschaft <code>border-bottom-right-radius</code> legt die Abrundung der unteren rechten Ecke eines Elements fest. Vor Gecko 2.0 (Firefox 4) war diese Eigenschaft unter dem Namen <code>-moz-border-radius-bottomright</code> bekannt.</p>
+
+<p>Weitere Informationen sind unter <a href="/de/CSS/border-top-left-radius" title="de/CSS/border-top-left-radius"><code>border-top-left-radius</code></a> verfügbar.</p>
+
+<p>{{cssinfo("border-bottom-right-radius")}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">border-bottom-right-radius: <em>radius</em>               /* the corner is a circle    */  E.g. border-bottom-right-radius: 3px
+border-bottom-right-radius: <em>horizontal</em> <em>vertical</em>  /* the corner is an ellipsis */  E.g. border-bottom-right-radius: 0.5em 1em
+
+border-bottom-right-radius: inherit
+</pre>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#border-bottom-right-radius', 'border-bottom-right-radius')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{Compat("css.properties.border-bottom-right-radius")}}</p>
diff --git a/files/de/web/css/border-bottom-style/index.html b/files/de/web/css/border-bottom-style/index.html
new file mode 100644
index 0000000000..bfd0ec4249
--- /dev/null
+++ b/files/de/web/css/border-bottom-style/index.html
@@ -0,0 +1,99 @@
+---
+title: border-bottom-style
+slug: Web/CSS/border-bottom-style
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/border-bottom-style
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>border-bottom-style</code> Eigenschaft legt die Rahmenart des unteren Rahmens fest.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="eval">border-bottom-style: {{csssyntax("border-bottom-style")}}
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt>none</dt>
+ <dd>Standardwert. Es wird kein unterer Rahmen gezeichnet und die Breite wird auf '0' zurückgesetzt.</dd>
+ <dt>hidden</dt>
+ <dd>Genau wie bei <code>none</code> wird kein Rahmen angezeigt. Das Verhalten unterscheidet sich jedoch beim "Collapsing Border Model" innerhalb von Tabellen.<br>
+ Wenn <a href="/de/CSS/border-collapse" title="de/CSS/border-collapse"><code>border-collapse: collapse</code></a> gesetzt wurde, wird auch an den angrenzenden Nachbarzellen kein Rahmen dargestellt.</dd>
+ <dt>dotted</dt>
+ <dd>Punktierte Linie.</dd>
+ <dt>dashed</dt>
+ <dd>Gestrichelte Linie.</dd>
+ <dt>solid</dt>
+ <dd>Durchgehende Linie.</dd>
+ <dt>double</dt>
+ <dd>Zwei durchgehende Linien mit Zwischenraum. Die zwei Linien und der Zwischenraum sind jeweils ein Drittel der <a href="/De/CSS/Border-bottom-width" title="De/CSS/Border-bottom-width"><code>border-bottom-width</code></a> Angabe groß.</dd>
+ <dt>groove</dt>
+ <dd>Der Rahmen wirkt eingekerbt (3D-Effekt).</dd>
+ <dt>ridge</dt>
+ <dd>Der Rahmen wirkt wie eine Kante (3D-Effekt).</dd>
+ <dt>inset</dt>
+ <dd>Durch den Rahmen wirkt das ganze Element eingetieft (3D-Effekt).</dd>
+ <dt>outset</dt>
+ <dd>Durch den Rahmen wirkt das ganze Element herausgehoben (3D-Effekt).</dd>
+ <dt>inherit</dt>
+ <dd>Der Wert des Elternelements wird geerbt.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre>.beispielEins {
+  border-bottom-style: dashed;      /* gestrichelt */
+}
+
+.beispielZwei {
+  border-bottom-style: groove;      /* Einkerbung */
+}
+
+.beispielDrei {
+ border-bottom-style: hidden;       /* Collapsing Border Model */
+ border-collapse: collapse;
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Backgrounds', '#border-bottom-style', 'border-bottom-style') }}</td>
+   <td>{{ Spec2('CSS3 Backgrounds') }}</td>
+   <td>keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'box.html#border-style-properties', 'border-bottom-style') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Standardwert definiert</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.border-bottom-style")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{ Cssxref("border-bottom") }}, {{ Cssxref("border-bottom-color") }}, and {{ Cssxref("border-bottom-width") }}</li>
+ <li>{{ Cssxref("border-left-style") }}, {{ Cssxref("border-right-style") }}, {{ Cssxref("border-top-style") }}, and {{ Cssxref("border-style") }}</li>
+</ul>
diff --git a/files/de/web/css/border-bottom-width/index.html b/files/de/web/css/border-bottom-width/index.html
new file mode 100644
index 0000000000..6f67816001
--- /dev/null
+++ b/files/de/web/css/border-bottom-width/index.html
@@ -0,0 +1,82 @@
+---
+title: border-bottom-width
+slug: Web/CSS/Border-bottom-width
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/border-bottom-width
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>border-bottom-width</code> Eigenschaft legt die Breite des unteren Rahmens fest.</p>
+
+<p>{{cssinfo("border-bottom-width")}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="eval">border-bottom-width: {{csssyntax("border-bottom-width")}}
+
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt>&lt;Länge&gt;</dt>
+ <dd>Eine <a href="/de/CSS/Einheiten#L.c3.a4ngen" title="de/CSS/Einheiten#L.c3.a4ngen">Längenangabe</a> die, die Rahmenstärke explizit angibt. Es sind keine negativen Werte erlaubt.</dd>
+ <dt>thin</dt>
+ <dd>Eine dünne Rahmenlinie (1px).</dd>
+ <dt>medium</dt>
+ <dd>Standardwert. Eine mitteldicke Rahmenlinie (3px).</dd>
+ <dt>thick</dt>
+ <dd>Eine dicke Rahmenlinie (5px).</dd>
+ <dt>inherit</dt>
+ <dd>Der Wert des Elternelements wird geerbt.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre>.beispielEins {
+  border-bottom-width: 10px;
+}
+
+.beispielZwei {
+  border-bottom-width: thin;
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Backgrounds', '#the-border-width', 'border-bottom-width') }}</td>
+   <td>{{ Spec2('CSS3 Backgrounds') }}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'box.html#border-width-properties', 'border-bottom-width') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Standardwert definiert</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.border-bottom-width")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{Cssxref("border")}}, {{Cssxref("border-bottom")}}, {{Cssxref("border-bottom-style")}} und {{Cssxref("border-bottom-color")}}</li>
+ <li>{{Cssxref("border-left-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-top-width")}} und {{Cssxref("border-width")}}</li>
+</ul>
diff --git a/files/de/web/css/border-bottom/index.html b/files/de/web/css/border-bottom/index.html
new file mode 100644
index 0000000000..8d93a330f4
--- /dev/null
+++ b/files/de/web/css/border-bottom/index.html
@@ -0,0 +1,89 @@
+---
+title: border-bottom
+slug: Web/CSS/border-bottom
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Rahmen
+  - Referenz
+translation_of: Web/CSS/border-bottom
+---
+<p>{{ CSSRef("CSS Borders") }}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>border-bottom</code> Eigenschaft legt den unteren Rahmen eines Elementes fest und ist eine Kurzform für<br>
+ <a href="/de/CSS/border-bottom-color" title="de/CSS/border-bottom-color"><code>border-bottom-color</code></a>, <a href="/de/CSS/border-bottom-style" title="de/CSS/border-bottom-style"><code>border-bottom-style</code></a> und <a href="/De/CSS/Border-bottom-width" title="De/CSS/Border-bottom-width"><code>border-bottom-width</code></a>. Die Werte der drei Eigenschaften können in beliebiger Reihenfolge angegeben werden.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt>&lt;Rahmenbreite&gt;</dt>
+ <dd>Optional. Wenn nichts festgelegt ist, wird <code>medium</code> verwendet. Siehe: <a href="/De/CSS/Border-bottom-width" title="De/CSS/Border-bottom-width"><code>border-bottom-width</code></a>.</dd>
+ <dt>&lt;Rahmenstil&gt;</dt>
+ <dd>Erforderlich. Wenn nichts festgelegt ist, wird <code>none</code> verwendet. Siehe: <a href="/de/CSS/border-bottom-style" title="de/CSS/border-bottom-style"><code>border-bottom-style</code></a>.</dd>
+ <dt>&lt;Rahmenfarbe&gt;</dt>
+ <dd>Optional. Wenn nichts festgelegt ist, wird der Wert der <code>color</code> Eigenschaft des Elements genommen. Siehe: <a href="/de/CSS/border-bottom-color" title="de/CSS/border-bottom-color"><code>border-bottom-color</code></a>.</dd>
+ <dt>inherit</dt>
+ <dd>Der Wert des Elternelements wird geerbt.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre>.beispielEins {
+  border-bottom: 1px solid #000;
+}
+
+.beispielZwei {
+  border-bottom-style: dotted;
+  border-bottom: thick green;
+
+  /* Bedeutet das gleiche wie: */
+
+  border-bottom-style: dotted;
+  border-bottom: none thick green;
+
+  /* border-bottom-style wird nach Angabe von border-bottom ignoriert.
+  Es wird kein unterer Rahmen gezeichnet. */
+}
+</pre>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Backgrounds', '#border-bottom', 'border-bottom') }}</td>
+   <td>{{ Spec2('CSS3 Backgrounds') }}</td>
+   <td>No direct changes, though the modification of values for the {{ cssxref("border-bottom-color") }} do apply to it.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'box.html#propdef-border-bottom', 'border-bottom') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>No significant changes</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#border-bottom', 'border-bottom') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.border-bottom")}}
diff --git a/files/de/web/css/border-collapse/index.html b/files/de/web/css/border-collapse/index.html
new file mode 100644
index 0000000000..52a2fcb4f1
--- /dev/null
+++ b/files/de/web/css/border-collapse/index.html
@@ -0,0 +1,155 @@
+---
+title: border-collapse
+slug: Web/CSS/border-collapse
+tags:
+  - CSS
+  - CSS Border
+  - CSS Rahmen
+  - CSS Referenz
+  - CSS Table
+  - Referenz
+translation_of: Web/CSS/border-collapse
+---
+<p>{{CSSRef}}</p>
+
+<p>Die <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft <code>border-collapse</code> bestimmt, ob die Zellen innerhalb einer Tabelle mite einem gemeinsamen oder getrennten Rahmen dargestellt werden.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-collapse.html")}}</div>
+
+<p class="hidden">Die Quelle für dieses interaktive Beispiel ist in einem GitHub-Repository gespeichert. Wenn Sie zum Projekt der interaktiven Beispiele beitragen möchten, klonen Sie bitte <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und senden Sie uns eine Pull-Anfrage.</p>
+
+<div class="note"><strong>Hinweis:</strong> Wenn der Wert auf collapsed gesetzt ist, so verhält sich der Wert <code>inset</code> für {{cssxref("border-style")}} wie der Wert <code>groove</code> und der Wert <code>outset</code> wie <code>ridge</code>.</div>
+
+<div class="note"><strong>Hinweis:</strong> When cells are separated, the distance between cells is defined by the {{cssxref("border-spacing")}} property.</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* Keyword values */
+border-collapse: collapse;
+border-collapse: separate;
+
+/* Global values */
+border-collapse: inherit;
+border-collapse: initial;
+border-collapse: unset;
+</pre>
+
+<p>Die Eigenschaft <code>border-collapse</code> wird als ein einziges Schlüsselwort angegeben, das aus der folgenden Liste ausgewählt werden kann.</p>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>separate</code></dt>
+ <dd>Standardwert. Jede Zelle besitzt ihre eigenen Rahmen, deren Abstand mit <a href="/de/CSS/border-spacing" title="de/CSS/border-spacing"><code>border-spacing</code></a> angegeben wird.</dd>
+ <dt><code>collapse</code></dt>
+ <dd>Benachbarte Zellen haben einen gemeinsame Rahmen.</dd>
+ <dt>inherit</dt>
+ <dd>Der Wert des Elternelements wird geerbt.</dd>
+</dl>
+
+<h2 id="Formal_definition">Formal definition</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax">Formal syntax</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+
+
+<h3 id="A_colorful_table_of_browser_engines">A colorful table of browser engines</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;table class="separate"&gt;
+  &lt;caption&gt;&lt;code&gt;border-collapse: separate&lt;/code&gt;&lt;/caption&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;&lt;th&gt;Browser&lt;/th&gt; &lt;th&gt;Layout Engine&lt;/th&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td class="fx"&gt;Firefox&lt;/td&gt; &lt;td class="gk"&gt;Gecko&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td class="ed"&gt;Edge&lt;/td&gt; &lt;td class="tr"&gt;EdgeHTML&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td class="sa"&gt;Safari&lt;/td&gt; &lt;td class="wk"&gt;Webkit&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td class="ch"&gt;Chrome&lt;/td&gt; &lt;td class="bk"&gt;Blink&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td class="op"&gt;Opera&lt;/td&gt; &lt;td class="bk"&gt;Blink&lt;/td&gt;&lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+&lt;table class="collapse"&gt;
+  &lt;caption&gt;&lt;code&gt;border-collapse: collapse&lt;/code&gt;&lt;/caption&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;&lt;th&gt;Browser&lt;/th&gt; &lt;th&gt;Layout Engine&lt;/th&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td class="fx"&gt;Firefox&lt;/td&gt; &lt;td class="gk"&gt;Gecko&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td class="ed"&gt;Edge&lt;/td&gt; &lt;td class="tr"&gt;EdgeHTML&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td class="sa"&gt;Safari&lt;/td&gt; &lt;td class="wk"&gt;Webkit&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td class="ch"&gt;Chrome&lt;/td&gt; &lt;td class="bk"&gt;Blink&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td class="op"&gt;Opera&lt;/td&gt; &lt;td class="bk"&gt;Blink&lt;/td&gt;&lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.collapse {
+  border-collapse: collapse;
+}
+
+.separate {
+  border-collapse: separate;
+}
+
+table {
+  display: inline-table;
+  margin: 1em;
+  border: dashed 5px;
+}
+
+table th,
+table td {
+  border: solid 3px;
+}
+
+.fx { border-color: orange blue; }
+.gk { border-color: black red; }
+.ed { border-color: blue gold; }
+.tr { border-color: aqua; }
+.sa { border-color: silver blue; }
+.wk { border-color: gold blue; }
+.ch { border-color: red yellow green blue; }
+.bk { border-color: navy blue teal aqua; }
+.op { border-color: red; }</pre>
+
+<h4 id="Ergebnis">Ergebnis</h4>
+
+<p>{{ EmbedLiveSample('A_colorful_table_of_browser_engines', 400, 300) }}</p>
+
+
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'tables.html#borders', 'border-collapse') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2>
+
+<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und senden Sie uns eine Pull-Anfrage.</div>
+
+<p>{{Compat("css.properties.border-collapse")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref("border-spacing")}}, {{cssxref("border-style")}}, {{cssxref("caption-side")}}, {{cssxref("empty-cells")}}, {{cssxref("table-layout")}}</li>
+</ul>
diff --git a/files/de/web/css/border-color/index.html b/files/de/web/css/border-color/index.html
new file mode 100644
index 0000000000..bfac86d3ca
--- /dev/null
+++ b/files/de/web/css/border-color/index.html
@@ -0,0 +1,107 @@
+---
+title: border-color
+slug: Web/CSS/border-color
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/border-color
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>border-color</code> Eigenschaft legt die Farbe des oberen, rechten, unteren und linken Rahmens fest.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="eval">border-color:  {{csssyntax("border-color")}}
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt>&lt;Farbe&gt;</dt>
+ <dd><a href="/de/CSS/Farben" rel="internal">Farbangabe</a> [ Hexadezimalwert, Farbname, Systemfarbe, rgb(), rgba(), hsl() oder hlsa() ]</dd>
+ <dt>transparent</dt>
+ <dd>Der Rahmen hat keine Farbe. Es wird die Farbe des dahinter liegenden Elementes angezeigt.</dd>
+ <dt>inherit</dt>
+ <dd>Der Wert des Elternelements wird geerbt.</dd>
+ <dt>Ein Wert</dt>
+ <dd>Gilt für alle vier Seiten: <a href="/de/CSS/border-top-color" rel="internal">border-top-color</a>, <a href="/de/CSS/border-right-color" rel="internal">border-right-color</a>, <a href="/de/CSS/border-bottom-color" rel="internal">border-bottom-color</a> und <a href="/de/CSS/border-left-color" rel="internal">border-left-color</a>.</dd>
+ <dt>Zwei Werte</dt>
+ <dd>Der erste Wert gilt für <a href="/de/CSS/border-top-color" rel="internal">border-top-color</a> und <a href="/de/CSS/border-bottom-color" rel="internal">border-bottom-color</a>, der zweite Wert für <a href="/de/CSS/border-right-color" rel="internal">border-right-color</a> und <a href="/de/CSS/border-left-color" rel="internal">border-left-color</a>.</dd>
+ <dt>Drei Werte</dt>
+ <dd>Der erste Wert gilt für <a href="/de/CSS/border-top-color" rel="internal">border-top-color</a>, der zweite Wert für <a href="/de/CSS/border-right-color" rel="internal">border-right-color</a> und <a href="/de/CSS/border-left-color" rel="internal">border-left-color</a> und der dritte Wert für <a href="/de/CSS/border-bottom-color" rel="internal">border-bottom-color</a>.</dd>
+ <dt>Vier Werte</dt>
+ <dd>Der erste Wert gilt für <a href="/de/CSS/border-top-color" rel="internal">border-top-color</a>, der zweite Wert für <a href="/de/CSS/border-right-color" rel="internal">border-right-color</a>, der dritte Wert für <a href="/de/CSS/border-bottom-color" rel="internal">border-bottom-color</a> und der vierte Wert für <a href="/de/CSS/border-left-color" rel="internal">border-left-color</a>.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre style="border: solid; border-color: blue;">.beispielEins {
+  border: solid;
+  border-color: blue;
+}
+</pre>
+
+<pre style="border: solid; border-color: blue #f00;">.beispielZwei {
+  border: solid;
+  border-color: blue #f00;
+}
+</pre>
+
+<pre style="border: solid; border-color: blue #f00 rgb(0,150,0);">.beispielDrei {
+  border: solid;
+  border-color: blue #f00 rgb(0,150,0);
+}
+</pre>
+
+<pre style="border: solid; border-color: blue #f00 rgb(0,150,0) transparent;">.beispielVier {
+  border: solid;
+  border-color: blue #f00 rgb(0,150,0) transparent;
+}
+</pre>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Backgrounds', '#border-color', 'border-color') }}</td>
+   <td>{{ Spec2('CSS3 Backgrounds') }}</td>
+   <td>The <code>transparent</code> keyword has been removed as it is now a part of the {{cssxref("&lt;color&gt;")}} data type.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'box.html#border-color-properties', 'border-color') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>The property is now a shorthand property</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#border-color', 'border-color') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.border-color")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{CSSxRef("border")}}</li>
+ <li>{{CSSxRef("border-top-color")}}, {{CSSxRef("border-right-color")}}, {{CSSxRef("border-bottom-color")}}, {{CSSxRef("border-left-color")}}</li>
+ <li>{{CSSxRef("&lt;color&gt;")}}&lt;/color&gt;</li>
+ <li>{{CSSxRef("color")}}, {{CSSxRef("background-color")}}, {{CSSxRef("outline-color")}}, {{CSSxRef("text-decoration-color")}}, {{CSSxRef("text-emphasis-color")}}, {{CSSxRef("text-shadow")}}, {{CSSxRef("caret-color")}}, and {{CSSxRef("column-rule-color")}}</li>
+</ul>
diff --git a/files/de/web/css/border-image-outset/index.html b/files/de/web/css/border-image-outset/index.html
new file mode 100644
index 0000000000..7cd1f0410c
--- /dev/null
+++ b/files/de/web/css/border-image-outset/index.html
@@ -0,0 +1,77 @@
+---
+title: border-image-outset
+slug: Web/CSS/border-image-outset
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Rahmen
+  - Grafik
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/border-image-outset
+---
+<div>{{CSSRef("CSS Borders")}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>border-image-outset</code> CSS Eigenschaft beschreibt, um welchem Wert der Randbildbereich über die Borderbox hinausragt.</p>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="twopartsyntaxbox">{{csssyntax}}
+</pre>
+
+<pre>border-image-outset: <em>Seiten</em> <em>                 /* Ein-Wert Syntax   */</em>  z. B. border-image-outset: 30%;
+border-image-outset: <em>vertikal</em> <em>horizontal</em> <em>    /* Zwei-Werte Syntax   */ </em> z. B. border-image-outset: 10% 30%;
+border-image-outset: <em>oben</em> <em>horizontal</em> <em>unten</em><em>   /* Drei-Werte Syntax */ </em> z. B. border-image-outset: 30px 30% 45px;
+border-image-outset: <em>oben</em> rechts unten links<em> /* Vier-Werte syntax  */ </em> z. B. border-image-outset: 7px 12px 14px 5px;
+
+border-image-repeat: inherit
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><em>Seiten</em></dt>
+ <dd>Ist ein {{cssxref("&lt;length&gt;")}} oder ein {{cssxref("&lt;percentage&gt;")}} Wert, der den Betrag angibt, um welchen der Randbildbereich die Borderbox in allen vier Richtungen überragt.</dd>
+ <dt><em>horizontal</em></dt>
+ <dd>Ist ein {{cssxref("&lt;length&gt;")}} oder ein {{cssxref("&lt;percentage&gt;")}} Wert, der den Betrag angibt, um welchen der Randbildbereich die Borderbox in beiden horizontalen Richtungen überragt.</dd>
+ <dt><em>vertikal</em></dt>
+ <dd>Ist ein {{cssxref("&lt;length&gt;")}} oder ein {{cssxref("&lt;percentage&gt;")}} Wert, der den Betrag angibt, um welchen der Randbildbereich die Borderbox in beiden vertikalen Richtungen überragt.</dd>
+ <dt><em>oben</em></dt>
+ <dd>Ist ein {{cssxref("&lt;length&gt;")}} oder ein {{cssxref("&lt;percentage&gt;")}} Wert, der den Betrag angibt, um welchen der Randbildbereich über den oberen Rand der Borderbox hinausragt.</dd>
+ <dt><em>unten</em></dt>
+ <dd>Ist ein {{cssxref("&lt;length&gt;")}} oder ein {{cssxref("&lt;percentage&gt;")}} Wert, der den Betrag angibt, um welchen der Randbildbereich über den unteren Rand der Borderbox hinausragt.</dd>
+ <dt><em>rechts</em></dt>
+ <dd>Ist ein {{cssxref("&lt;length&gt;")}} oder ein {{cssxref("&lt;percentage&gt;")}} Wert, der den Betrag angibt, um welchen der Randbildbereich über den rechten Rand der Borderbox hinausragt.</dd>
+ <dt><em>links</em></dt>
+ <dd>Ist ein {{cssxref("&lt;length&gt;")}} oder ein {{cssxref("&lt;percentage&gt;")}} Wert, der den Betrag angibt, um welchen der Randbildbereich über den linken Rand der Borderbox hinausragt.</dd>
+ <dt><code>inherit</code></dt>
+ <dd>Ist ein Schlüsselwort, das angibt, dass alle vier Werte vom berechneten Wert des Elternelements geerbt werden.</dd>
+</dl>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#border-image-outset', 'border-image-outset')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.border-image-outset")}}
diff --git a/files/de/web/css/border-image-repeat/index.html b/files/de/web/css/border-image-repeat/index.html
new file mode 100644
index 0000000000..b721074674
--- /dev/null
+++ b/files/de/web/css/border-image-repeat/index.html
@@ -0,0 +1,83 @@
+---
+title: border-image-repeat
+slug: Web/CSS/border-image-repeat
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Ränder
+  - Grafik
+  - Layout
+  - Referenz
+translation_of: Web/CSS/border-image-repeat
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>border-image-repeat</code> CSS Eigenschaft definiert, wie der mittlere Teil eines Randbildes gehandhabt wird, sodass es in die Ausmaße des Randes passt. Sie hat eine Einwert-Syntax, welche das Verhalten aller Seiten beschreibt, und eine Zweiwert-Syntax, welche unterschiedliche Werte für das horizontale und vertikale Verhalten setzt.</p>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* border-image-repeat: <em>Typ</em> */
+border-image-repeat: stretch;
+
+/* border-image-repeat: <em>horizontal</em> <em>vertikal</em> */
+border-image-repeat: round stretch;
+
+/* Globale Werte */
+border-image-repeat: inherit;
+border-image-repeat: initial;
+border-image-repeat: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><em>type</em></dt>
+ <dd>Eins der Schlüsselwörter <code>stretch</code>, <code>repeat</code>, <code>round</code> oder <code>space</code>, die angeben, wie das Bild wiederholt wird. Dies wird nur in der Einwert-Syntax verwendet.</dd>
+ <dt><em>horizontal</em></dt>
+ <dd>Eins der Schlüsselwörter <code>stretch</code>, <code>repeat</code>, <code>round</code> oder <code>space</code>, die angeben, wie das Bild horizontal wiederholt wird. Dies wird nur in der Zweiwert-Syntax verwendet.</dd>
+ <dt><em>vertical</em></dt>
+ <dd>Eins der Schlüsselwörter <code>stretch</code>, <code>repeat</code>, <code>round</code> oder <code>space</code>, die angeben, wie das Bild vertikal wiederholt wird. Dies wird nur in der Zweiwert-Syntax verwendet.</dd>
+ <dt><code>stretch</code></dt>
+ <dd>Schlüsselwort, das angibt, dass das Bild gedehnt werden soll, um den Leerraum zwischen beiden Rändern zu füllen.</dd>
+ <dt><code>repeat</code></dt>
+ <dd>Schlüsselwort, das angibt, dass das Bild wiederholt werden soll, um den Leerraum zwischen beiden Rändern zu füllen.</dd>
+ <dt><code>round</code></dt>
+ <dd>Schlüsselwort, das angibt, dass das Bild wiederholt werden soll bis es den Leerraum zwischen beiden Rändern füllt. Falls das Bild nach einer ganzzahligen Wiederholung nicht den gesamten Leerraum ausfüllt, wird es skaliert, damit es passt.</dd>
+ <dt><code>inherit</code></dt>
+ <dd>Schlüsselwort, das angibt, dass die Werte vom berechneten Wert des Elternelements geerbt werden sollen.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Siehe {{cssxref("border-image")}} für Beispiele, welche Auswirkungen Wiederholungswerte haben.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#border-image-repeat', 'border-image-repeat')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.border-image-repeat")}}
diff --git a/files/de/web/css/border-image-slice/index.html b/files/de/web/css/border-image-slice/index.html
new file mode 100644
index 0000000000..c52c885c16
--- /dev/null
+++ b/files/de/web/css/border-image-slice/index.html
@@ -0,0 +1,102 @@
+---
+title: border-image-slice
+slug: Web/CSS/border-image-slice
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Ränder
+  - Grafik
+  - Layout
+  - NeedsExample
+  - Referenz
+translation_of: Web/CSS/border-image-slice
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>border-image-slice</code> CSS Eigenschaft teilt das Bild, welches von {{cssxref("border-image-source")}} spezifiziert wird, in neun Regionen ein: Die vier Ecken, die vier Kanten und die Mitte. Diese werden von 4 Werten festgelegt.</p>
+
+<p><a href="/files/3814/border-image-slice.png" style="float: left;"><img alt="The nine slices defined by the CSS border-image shorthand or border-image-slice longhand properties" src="/files/3814/border-image-slice.png" style="height: 132px; margin: 1px; padding: 1em; width: 250px;"></a>Vier Werte kontrollieren die Position der Schneidelinien, die das Bild einteilen. Werden nicht alle Werte definiert, werden sie von den anderen angegebenen, mit der üblichen 4-Werte CSS Syntax, abgeleitet.</p>
+
+<p>Die Mitte des Bildes wird nicht im Rand verwendet, kann allerdings als Hintergrundbild benutzt werden, wenn das Schlüsselwort <code>fill</code> gesetzt wurde. Dies kann an jeder Position der CSS-Eigenschaft geschehen (vor, hinter oder zwischen anderen Werten).</p>
+
+<p>Die Eigenschaften {{cssxref("border-image-repeat")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-outset")}} definieren die weitere Verwendung des Bildes.</p>
+
+<p>Die Kurzschreibweise {{cssxref("border-image")}} kann diese Eigenschaft zu ihrem Standardwert zurücksetzen.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* border-image-slice: <em>slice</em> */
+border-image-slice: 30%;
+
+/* border-image-slice: <em>horizontal</em> <em>vertikal</em> */
+border-image-slice: 10% 30%;
+
+/* border-image-slice: <em>oben</em> <em>vertikal</em> <em>unten</em> */
+border-image-slice: 30 30% 45;
+
+/* border-image-slice: <em>oben</em> <em>rechts</em> <em>unten</em> <em>links</em> */
+border-image-slice: 7 12 14 5;
+
+/* border-image-slice: … fill */
+/* Der fill Wert kann zwischen beliebigen Werten platziert werden */
+border-image-slice: 10% fill 7 12;
+
+/* Globale Werte */
+border-image-slice: inherit;
+border-image-slice: initial;
+border-image-slice: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code><em>slice</em></code></dt>
+ <dd>ist eine {{cssxref("&lt;number&gt;")}} oder eine {{cssxref("&lt;percentage&gt;")}}, welche den Abstand der vier Schneidelinien vom Rand festlegt. {{cssxref("&lt;length&gt;")}} Werte sind nicht erlaubt. Die {{cssxref("&lt;number&gt;")}} wird bei Rastergrafiken als <em>Pixel</em>, bei Vektorgrafiken als <em>Koordinaten</em> angesehen. Des Weiteren sind {{cssxref("&lt;percentage&gt;")}} Werte relativ zu der Höhe, beziehungsweise der Breite des Bildes. Negative Werte sind nicht erlaubt und größere Werte als die Bildgröße werden zu <code>100%</code> konvertiert.</dd>
+ <dt><em>horizontal</em></dt>
+ <dd>ist eine {{cssxref("&lt;number&gt;")}} oder eine {{cssxref("&lt;percentage&gt;")}}, welche den Abstand der zwei horizontalen Schneidelinien, die von oben und unten, vom Rand festlegt. {{cssxref("&lt;length&gt;")}} Werte sind nicht erlaubt. Die {{cssxref("&lt;number&gt;")}} wird bei Rastergrafiken als <em>Pixel</em>, bei Vektorgrafiken als <em>Koordinaten</em> angesehen. Des Weiteren sind {{cssxref("&lt;percentage&gt;")}} Werte relativ zu der Höhe, beziehungsweise der Breite des Bildes. Negative Werte sind nicht erlaubt und größere Werte als die Bildgröße werden zu <code>100%</code> konvertiert.</dd>
+ <dt><em>vertical</em></dt>
+ <dd>ist eine {{cssxref("&lt;number&gt;")}} oder eine {{cssxref("&lt;percentage&gt;")}}, welche den Abstand der zwei vertikalen Schneidelinien, die von rechts und links, vom Rand festlegt. {{cssxref("&lt;length&gt;")}} Werte sind nicht erlaubt. Die {{cssxref("&lt;number&gt;")}} wird bei Rastergrafiken als <em>Pixel</em>, bei Vektorgrafiken als <em>Koordinaten</em> angesehen. Des Weiteren sind {{cssxref("&lt;percentage&gt;")}} Werte relativ zu der Höhe, beziehungsweise der Breite des Bildes. Negative Werte sind nicht erlaubt und größere Werte als die Bildgröße werden zu <code>100%</code> konvertiert.</dd>
+ <dt><em>top</em></dt>
+ <dd>ist eine {{cssxref("&lt;number&gt;")}} oder eine {{cssxref("&lt;percentage&gt;")}}, welche den Abstand der oberen Schneidelinie vom Rand festlegt. {{cssxref("&lt;length&gt;")}} Werte sind nicht erlaubt. Die {{cssxref("&lt;number&gt;")}} wird bei Rastergrafiken als <em>Pixel</em>, bei Vektorgrafiken als <em>Koordinaten</em> angesehen. Des Weiteren sind {{cssxref("&lt;percentage&gt;")}} Werte relativ zu der Höhe, beziehungsweise der Breite des Bildes. Negative Werte sind nicht erlaubt und größere Werte als die Bildgröße werden zu <code>100%</code> konvertiert.</dd>
+ <dt><em>bottom</em></dt>
+ <dd>ist eine {{cssxref("&lt;number&gt;")}} oder eine {{cssxref("&lt;percentage&gt;")}}, welche den Abstand der unteren Schneidelinie vom Rand festlegt. {{cssxref("&lt;length&gt;")}} Werte sind nicht erlaubt. Die {{cssxref("&lt;number&gt;")}} wird bei Rastergrafiken als <em>Pixel</em>, bei Vektorgrafiken als <em>Koordinaten</em> angesehen. Des Weiteren sind {{cssxref("&lt;percentage&gt;")}} Werte relativ zu der Höhe, beziehungsweise der Breite des Bildes. Negative Werte sind nicht erlaubt und größere Werte als die Bildgröße werden zu <code>100%</code> konvertiert.</dd>
+ <dt><em>right</em></dt>
+ <dd>ist eine {{cssxref("&lt;number&gt;")}} oder eine {{cssxref("&lt;percentage&gt;")}}, welche den Abstand der rechten Schneidelinie vom Rand festlegt. {{cssxref("&lt;length&gt;")}} Werte sind nicht erlaubt. Die {{cssxref("&lt;number&gt;")}} wird bei Rastergrafiken als <em>Pixel</em>, bei Vektorgrafiken als <em>Koordinaten</em> angesehen. Des Weiteren sind {{cssxref("&lt;percentage&gt;")}} Werte relativ zu der Höhe, beziehungsweise der Breite des Bildes. Negative Werte sind nicht erlaubt und größere Werte als die Bildgröße werden zu <code>100%</code> konvertiert.</dd>
+ <dt><em>left</em></dt>
+ <dd>ist eine {{cssxref("&lt;number&gt;")}} oder eine {{cssxref("&lt;percentage&gt;")}}, welche den Abstand der linken Schneidelinie vom Rand festlegt. {{cssxref("&lt;length&gt;")}} Werte sind nicht erlaubt. Die {{cssxref("&lt;number&gt;")}} wird bei Rastergrafiken als <em>Pixel</em>, bei Vektorgrafiken als <em>Koordinaten</em> angesehen. Des Weiteren sind {{cssxref("&lt;percentage&gt;")}} Werte relativ zu der Höhe, beziehungsweise der Breite des Bildes. Negative Werte sind nicht erlaubt und größere Werte als die Bildgröße werden zu <code>100%</code> konvertiert.</dd>
+ <dt><code>fill</code></dt>
+ <dd>ist ein Schlüsselwort, das die mittlere Region des Bildes über dem Hintergrundbild abbildet. Seine Größe wird dabei jeweils an die der oberen und linken Bildregionen angepasst.</dd>
+ <dt><code>inherit</code></dt>
+ <dd>ist ein Schlüsselwort, welches bewirkt, dass alle vier Werte von den berechneten Werten des Elternelements übernommen (vererbt) werden.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#border-image-slice', 'border-image-slice')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.border-image-slice")}}
diff --git a/files/de/web/css/border-image-source/index.html b/files/de/web/css/border-image-source/index.html
new file mode 100644
index 0000000000..1ec0a50134
--- /dev/null
+++ b/files/de/web/css/border-image-source/index.html
@@ -0,0 +1,67 @@
+---
+title: border-image-source
+slug: Web/CSS/border-image-source
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Ränder
+  - Referenz
+translation_of: Web/CSS/border-image-source
+---
+<div>{{CSSRef("CSS Borders")}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>border-image-source</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft definiert den {{cssxref("&lt;image&gt;")}} Wert, der anstatt dem Stil des Randes verwendet wird. Falls diese Eigenschaft auf <code>none</code> gesetzt wird, wird der Stil verwendet, der durch {{cssxref("border-style")}} definiert wird.</p>
+
+<div class="note"><strong>Hinweis:</strong> Obwohl jeder {{cssxref("&lt;image&gt;")}} Wert innerhalb dieser CSS Eigenschaft verwendet werden kann, ist die Browserunterstützung bisher noch begrenzt und einige Browser unterstützen nur Bilder, die über die <code>url()</code> Funktion angegeben werden.</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Kein Randbild, stattdessen wird der angegebene border-style verwendet */
+border-image-source: none;
+
+/* image.jpg wird als Bild verwendet */
+border-image-source: url(image.jpg);
+
+/* Farbverlauf wird als Bild verwendet */
+border-image-source: linear-gradient(to top, red, yellow);
+
+/* Globale Werte */
+border-image-source: inherit;
+border-image-source: initial;
+border-image-source: unset;
+</pre>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Siehe {{cssxref("border-image")}} für Beispiele, welchen Einfluss die verschiedenen Werte haben.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#border-image-source', 'border-image-source')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.border-image-source")}}
diff --git a/files/de/web/css/border-image-width/index.html b/files/de/web/css/border-image-width/index.html
new file mode 100644
index 0000000000..e367bc1406
--- /dev/null
+++ b/files/de/web/css/border-image-width/index.html
@@ -0,0 +1,119 @@
+---
+title: border-image-width
+slug: Web/CSS/border-image-width
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Ränder
+  - Grafik
+  - Layout
+  - Referenz
+translation_of: Web/CSS/border-image-width
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die CSS Eigenschaft <code>border-image-width</code> definiert die Breite des Randbilds. Wenn sie definiert wird, wird die Eigenschaft {{cssxref("border-width")}} durch ihren Wert überschrieben.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* border-image-width: <em>all</em> */
+border-image-width: 3;
+
+/* border-image-width: <em>vertical horizontal</em> */
+border-image-width: 2em 3em;
+
+/* border-image-width: <em>top horizontal bottom</em> */
+border-image-width: 5% 15% 10%;
+
+/* border-image-width: <em>top</em> <em>right</em> <em>bottom</em> <em>left</em> */
+border-image-width: 5% 2em 10% auto;
+
+/* Globale Werte */
+border-image-width: inherit;
+border-image-width: initial;
+border-image-width: unset;
+</pre>
+
+<p>wobei:</p>
+
+<dl>
+ <dt><em>width</em></dt>
+ <dd>Ist ein Wert, der die Breite des Bildes angibt, das als Rand für alle vier Ränder verwendet wird. Er wird ausschließlich in der Einwert-Syntax verwendet.</dd>
+ <dt><em>vertical</em></dt>
+ <dd>Ist ein Wert, der die Breite des Bildes angibt, das für alle vertikalen Ränder, d. h. den oberen und unteren Rand, verwendet wird. Er wird ausschließlich in der Zweiwert-Syntax verwendet.</dd>
+ <dt><em>horizontal</em></dt>
+ <dd>Ist ein Wert, der die Breite des Bildes angibt, das für alle horizontalen Ränder, d. h. den rechten und linken Rand, verwendet wird. Er wird ausschließlich in der Zweiwert-Syntax verwendet.</dd>
+ <dt><em>top</em></dt>
+ <dd>Ist ein Wert, der die Breite des Bildes angibt, das für den oberen Rand verwendet wird. Er wird ausschließlich für die Dreiwert- und Vierwert-Syntax verwendet.</dd>
+ <dt><em>bottom</em></dt>
+ <dd>Ist ein Wert, der die Breite des Bildes angibt, das für den unteren Rand verwendet wird. Er wird ausschließlich für die Dreiwert- und Vierwert-Syntax verwendet.</dd>
+ <dt><em>right</em></dt>
+ <dd>Ist ein Wert, der die Breite des Bildes angibt, das für den rechten Rand verwendet wird. Er wird ausschließlich für die Dreiwert- und Vierwert-Syntax verwendet.</dd>
+ <dt><em>left</em></dt>
+ <dd>Ist ein Wert, der die Breite des Bildes angibt, das für den linken Rand verwendet wird. Er wird ausschließlich für die Dreiwert- und Vierwert-Syntax verwendet.</dd>
+ <dt><code>inherit</code></dt>
+ <dd>Ist ein Schlüsselwort, welches bewirkt, dass alle vier Werte von den berechneten Werten des Elternelements geerbt werden.</dd>
+</dl>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Repräsentiert die Länge des Teilbilds. Sie kann eine absolute oder relative Länge sein. Dieser Wert darf nicht negativ sein.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Repräsentiert den Prozentwert des Teilbilds relativ zur Höhe oder Breite des Randbildbereichs. Dieser Wert darf nicht negativ sein.</dd>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>Repräsentiert ein Vielfaches des berechneten Wertes der {{cssxref("border-width")}} Eigenschaft des Elements dar, die als Teilbildgröße verwendet wird. Dieser Wert darf nicht negativ sein.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Gibt an, dass die Breite oder Höhe des Bildes die tatsächliche Größe dieser Dimension sein muss.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="HTML-Inhalt">HTML-Inhalt</h3>
+
+<pre class="brush: html">&lt;p&gt;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 kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.&lt;/p&gt;
+</pre>
+
+<h3 id="CSS-Inhalt">CSS-Inhalt</h3>
+
+<pre class="brush: css">p{
+   border-image-source: url("https://mdn.mozillademos.org/files/10470/border.png");
+   border-image-slice:30;
+   border-image-width:20px;
+   border-image-repeat: round;
+   padding:40px
+}</pre>
+
+<p>{{ EmbedLiveSample('Beispiele', '480', '320') }}</p>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#border-image-width', 'border-image-width')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Ursprüngliche Spezifikation</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.border-image-width")}}
diff --git a/files/de/web/css/border-image/index.html b/files/de/web/css/border-image/index.html
new file mode 100644
index 0000000000..d489fa343d
--- /dev/null
+++ b/files/de/web/css/border-image/index.html
@@ -0,0 +1,101 @@
+---
+title: border-image
+slug: Web/CSS/border-image
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Ränder
+  - Grafik
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/border-image
+---
+<div>{{CSSRef("CSS Borders")}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>border-image</code> CSS Eigenschaft ermöglicht das Zeichnen eines Bildes an den Rändern eines Elements. Dies vereinfacht das Zeichnen von komplex wirkenden Widgets deutlich und macht den Gebrauch von neun Kästen um das Element für einige Fälle überflüssig.<br>
+ <br>
+ <code>border-image</code> wird anstatt der Randstile benutzt, die durch die {{cssxref("border-style")}} Eigenschaft definiert werden. Es ist wichtig anzumerken, dass, wenn der berechnete Wert von {{cssxref("border-image-source")}}, welcher entweder durch <code>border-image-source</code> oder die Kurzschreibweise <code>border-image</code> gesetzt werden kann, <code>none</code> ist, oder falls das Bild nicht angezeigt werden kann, die Randstile verwendet werden.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<p>Siehe die entsprechenden Eigenschaften der verschiedenen Werte.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Bild_wiederholt_(repeat)">Bild wiederholt (repeat)</h3>
+
+<p>Das Bild wird aufgeteilt und einfach gekachelt, um den Randbereich zu füllen.</p>
+
+<pre class="brush:css">.beispiel {
+  border: 30px solid transparent;
+  -moz-border-image:url("/files/4127/border.png") 30 30 repeat; /* Old firefox */
+  -webkit-border-image:url("/files/4127/border.png") 30 30 repeat; /* Safari */
+  -o-border-image:url("/files/4127/border.png") 30 30 repeat; /* Opera */
+  border-image:url("/files/4127/border.png") 30 30 repeat;
+}
+</pre>
+
+<p>Ergibt:<br>
+ <img alt="Beispiel für border-image: repeat" src="https://mdn.mozillademos.org/files/8199/borderRepeat.png" style="height: 120px; width: 350px;"></p>
+
+<h3 id="Bild_wiederholt_(round)">Bild wiederholt (round)</h3>
+
+<p>Die Option <code>round</code> ist eine Variante der <code>repeat</code> Option, die die Kacheln so verteilt, dass die Enden sauber verbunden sind.</p>
+
+<pre class="brush: css">.beispiel {
+  border: 30px solid transparent;
+  -moz-border-image:url("/files/4127/border.png") 30 30 round; /* Old firefox */
+  -webkit-border-image:url("/files/4127/border.png") 30 30 round; /* Safari */
+  -o-border-image:url("/files/4127/border.png") 30 30 round; /* Opera */
+  border-image:url("/files/4127/border.png") 30 30 round;
+}</pre>
+
+<p>Ergibt:<br>
+ <img alt="Beispiel für border-image: round" src="https://mdn.mozillademos.org/files/8201/borderRound.png" style="height: 180px; width: 350px;"></p>
+
+<h3 id="Bild_gestreckt">Bild gestreckt</h3>
+
+<p>Die <code>stretch</code> Option streckt die Bilder, um den Randbereich zu füllen.</p>
+
+<pre class="brush:css">.beispiel {
+  border: 30px solid transparent;
+  -moz-border-image:url("/files/4127/border.png") 30 30 stretch; /* Old firefox */
+  -webkit-border-image:url("/files/4127/border.png") 30 30 stretch; /* Safari */
+  -o-border-image:url("/files/4127/border.png") 30 30 stretch; /* Opera */
+  border-image:url("/files/4127/border.png") 30 30 stretch;
+}</pre>
+
+<p>Ergibt:<br>
+ <img alt="Beispiel für border-image: stretch" src="https://mdn.mozillademos.org/files/8203/borderStretch.png" style="height: 120px; width: 350px;"></p>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#border-image', 'border-image')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.border-image")}}
diff --git a/files/de/web/css/border-left-color/index.html b/files/de/web/css/border-left-color/index.html
new file mode 100644
index 0000000000..270f7b1cd6
--- /dev/null
+++ b/files/de/web/css/border-left-color/index.html
@@ -0,0 +1,36 @@
+---
+title: border-left-color
+slug: Web/CSS/border-left-color
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/border-left-color
+---
+<p>{{ CSSRef() }}</p>
+<h3 id="Übersicht">Übersicht:</h3>
+<p>Die <code>border-left-color</code> Eigenschaft legt die Farbe des linken Rahmens fest. Da der Standardwert für die Rahmenart <code>none</code> ist, muss eine Angabe der <a href="/de/CSS/border-left-style" title="de/CSS/border-left-style"><code>border-left-style</code></a> Eigenschaft erfolgen, damit ein linker Rahmen sichtbar werden kann. Es ist daher sinnvoll mit der Kurzform <a href="/de/CSS/border-left" title="de/CSS/border-left"><code>border-left</code></a> gleich die Farbe und die Art des linken Rahmens festzulegen.</p>
+<ul> <li>Standardwert: Wert der <a href="/de/CSS/color" title="de/CSS/color"><code>color</code></a> Eigenschaft</li> <li>Anwendbar auf: Alle Elemente</li> <li>Vererbbar: Nein</li> <li>Prozentwerte: Nein</li> <li>Medium: visuell</li> <li>berechneter Wert: wie festgelegt</li>
+</ul>
+<h3 id="Syntax">Syntax</h3>
+<pre class="eval">border-left-color:  &lt;Farbe&gt; | transparent | inherit
+</pre>
+<h3 id="Werte">Werte</h3>
+<dl> <dt>&lt;Farbe&gt;</dt> <dd><a href="/de/CSS/Farben" title="de/CSS/Farben">Farbangabe</a> [ Hexadezimalwert, Farbname, Systemfarbe, rgb(), rgba(), hsl() oder hlsa() ]</dd> <dt>transparent</dt> <dd>Das Element hat keine Farbe. Es wird die Farbe des dahinter liegenden Elementes angezeigt.</dd> <dt>inherit</dt> <dd>Der Wert des Elternelements wird geerbt.</dd>
+</dl>
+<h3 id="Beispiele">Beispiele</h3>
+<pre style="border-left-style: solid;">pre {
+  border-left-style: solid;
+  border-left-color: red;
+
+}
+</pre>
+<h3 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h3>
+<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>ab Version</th> </tr> <tr> <td>Internet Explorer</td> <td>4.0</td> </tr> <tr> <td>Firefox (Gecko)</td> <td>1.0 (1.0)</td> </tr> <tr> <td>Opera</td> <td>3.5</td> </tr> <tr> <td>Safari (WebKit)</td> <td>1.0 (85)</td> </tr> </tbody>
+</table>
+<h3 id="Spezifikation">Spezifikation</h3>
+<ul> <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-left-color" lang="en">CSS 3 Background and Borders #border-left-color</a></li> <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-left-color" lang="en">CSS 2.1 Box #border-left-color</a></li>
+</ul>
+<h3 id="Siehe_auch">Siehe auch</h3>
+<ul> <li><a href="/de/CSS/border-left" title="de/CSS/border-left"><code>border-left</code></a>, <a href="/de/CSS/border-left-style" title="de/CSS/border-left-style"><code>border-left-style</code></a>, <a href="/De/CSS/Border-left-width" title="De/CSS/Border-left-width"><code>border-left-width</code></a></li> <li><a href="/de/CSS/border-bottom" title="de/CSS/border-bottom"><code>border-bottom</code></a>, <a href="/de/CSS/border-right" title="de/CSS/border-right"><code>border-right</code></a>, <a href="/de/CSS/border-top" title="de/CSS/border-top"><code>border-top</code></a></li> <li><a href="/de/CSS/-moz-border-left-colors" title="de/CSS/-moz-border-left-colors"><code>-moz-border-left-colors</code></a></li>
+</ul>
+<p>{{ languages( { "en": "en/CSS/border-left-color", "fr": "fr/CSS/border-left-color", "ja": "ja/CSS/border-left-color", "pl": "pl/CSS/border-left-color" } ) }}</p>
diff --git a/files/de/web/css/border-left-style/index.html b/files/de/web/css/border-left-style/index.html
new file mode 100644
index 0000000000..30b17926a9
--- /dev/null
+++ b/files/de/web/css/border-left-style/index.html
@@ -0,0 +1,120 @@
+---
+title: border-left-style
+slug: Web/CSS/border-left-style
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/border-left-style
+---
+<p>{{ CSSRef() }}</p>
+<h2 id="Übersicht">Übersicht</h2>
+<p>Die <code>border-left-style</code> Eigenschaft legt die Rahmenart des linken Rahmens fest.</p>
+<ul>
+ <li>Standardwert: <code>none</code></li>
+ <li>Anwendbar auf: Alle Elemente</li>
+ <li>Vererbbar: Nein</li>
+ <li>Prozentwerte: Nein</li>
+ <li>Medium: visuell</li>
+ <li>berechneter Wert: wie festgelegt</li>
+</ul>
+<h2 id="Syntax">Syntax</h2>
+<pre class="eval">border-left-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
+</pre>
+<h2 id="Werte">Werte</h2>
+<dl>
+ <dt>
+  none</dt>
+ <dd>
+  Standardwert. Es wird kein linker Rahmen gezeichnet und die Breite wird auf '0' zurückgesetzt.</dd>
+ <dt>
+  hidden</dt>
+ <dd>
+  Genau wie bei <code>none</code> wird kein Rahmen angezeigt. Das Verhalten unterscheidet sich jedoch beim "Collapsing Border Model" innerhalb von Tabellen.<br>
+  Wenn <a href="/de/CSS/border-collapse" title="de/CSS/border-collapse"><code>border-collapse: collapse</code></a> gesetzt wurde, wird auch an den angrenzenden Nachbarzellen kein Rahmen dargestellt.</dd>
+ <dt>
+  dotted</dt>
+ <dd>
+  Punktierte Linie.</dd>
+ <dt>
+  dashed</dt>
+ <dd>
+  Gestrichelte Linie.</dd>
+ <dt>
+  solid</dt>
+ <dd>
+  Durchgehende Linie.</dd>
+ <dt>
+  double</dt>
+ <dd>
+  Zwei durchgehende Linien mit Zwischenraum. Die zwei Linien und der Zwischenraum sind jeweils ein Drittel der <a href="/De/CSS/Border-left-width" title="De/CSS/Border-left-width"><code>border-left-width</code></a> Angabe groß.</dd>
+ <dt>
+  groove</dt>
+ <dd>
+  Der Rahmen wirkt eingekerbt (3D-Effekt).</dd>
+ <dt>
+  ridge</dt>
+ <dd>
+  Der Rahmen wirkt wie eine Kante (3D-Effekt).</dd>
+ <dt>
+  inset</dt>
+ <dd>
+  Durch den Rahmen wirkt das ganze Element eingetieft (3D-Effekt).</dd>
+ <dt>
+  outset</dt>
+ <dd>
+  Durch den Rahmen wirkt das ganze Element herausgehoben (3D-Effekt).</dd>
+ <dt>
+  inherit</dt>
+ <dd>
+  Der Wert des Elternelements wird geerbt.</dd>
+</dl>
+<h2 id="Beispiele">Beispiele</h2>
+<pre>.beispielEins {
+  border-left-style: dashed;      /* gestrichelt */
+}
+
+.beispielZwei {
+  border-left-style: groove;      /* Einkerbung */
+}
+
+.beispielDrei {
+ border-left-style: hidden;       /* Collapsing Border Model */
+ border-collapse: collapse;
+}
+</pre>
+<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Browser</th>
+   <th>ab Version</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td>1.0 (1.0)</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>3.5</td>
+  </tr>
+  <tr>
+   <td>Safari (WebKit)</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Spezifikation">Spezifikation</h2>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-left-style" lang="en">CSS 3 Background and Borders #border-left-style</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-left-style" lang="en">CSS 2.1 Box #border-left-style</a></li>
+</ul>
+<h2 id="Siehe_auch">Siehe auch</h2>
+<ul>
+ <li><a href="/de/CSS/border-left" title="de/CSS/border-left"><code>border-left</code></a>, <a href="/de/CSS/border-left-color" title="de/CSS/border-left-color"><code>border-left-color</code></a>, <a href="/De/CSS/Border-left-width" title="De/CSS/Border-left-width"><code>border-left-width</code></a></li>
+ <li><a href="/de/CSS/border-style" title="de/CSS/border-style"><code>border-style</code></a>, <a href="/de/CSS/border-bottom-style" title="de/CSS/border-bottom-style"><code>border-bottom-style</code></a>, <a href="/de/CSS/border-right-style" title="de/CSS/border-right-style"><code>border-right-style</code></a>, <a href="/de/CSS/border-top-style" title="de/CSS/border-top-style"><code>border-top-style</code></a></li>
+</ul>
+<p>{{ languages( { "en": "en/CSS/border-left-style", "fr": "fr/CSS/border-left-style", "ja": "ja/CSS/border-left-style", "pl": "pl/CSS/border-left-style" } ) }}</p>
diff --git a/files/de/web/css/border-left-width/index.html b/files/de/web/css/border-left-width/index.html
new file mode 100644
index 0000000000..05734d57da
--- /dev/null
+++ b/files/de/web/css/border-left-width/index.html
@@ -0,0 +1,38 @@
+---
+title: border-left-width
+slug: Web/CSS/Border-left-width
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/border-left-width
+---
+<p>{{ CSSRef() }}</p>
+<h3 id="Übersicht">Übersicht</h3>
+<p>Die <code>border-left-width</code> Eigenschaft legt die Breite des linken Rahmens fest.</p>
+<ul> <li>Standardwert: <code>medium</code></li> <li>Anwendbar auf: Alle Elemente</li> <li>Vererbbar: Nein</li> <li>Prozentwerte: Nein</li> <li>Medium: visuell</li> <li>berechneter Wert: absolute Länge; <code>0</code> wenn <code>none</code> oder <code>hidden</code> festgelegt wurde</li>
+</ul>
+<h3 id="Syntax">Syntax</h3>
+<pre class="eval">border-left-width: &lt;Länge&gt; | thin | medium | thick | inherit
+</pre>
+<h3 id="Werte">Werte</h3>
+<dl> <dt>&lt;Länge&gt;</dt> <dd>Eine <a href="/de/CSS/Einheiten#L.c3.a4ngen" title="de/CSS/Einheiten#L.c3.a4ngen">Längenangabe</a> die, die Rahmenstärke explizit angibt. Es sind keine negativen Werte erlaubt.</dd> <dt>thin</dt> <dd>Eine dünne Rahmenlinie (1px).</dd> <dt>medium</dt> <dd>Standardwert. Eine mitteldicke Rahmenlinie (3px).</dd> <dt>thick</dt> <dd>Eine dicke Rahmenlinie (5px).</dd> <dt>inherit</dt> <dd>Der Wert des Elternelements wird geerbt.</dd>
+</dl>
+<h3 id="Beispiele">Beispiele</h3>
+<pre>.beispielEins {
+  border-left-width: 10px;
+}
+
+.beispielZwei {
+  border-left-width: thin;
+}
+</pre>
+<h3 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h3>
+<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>ab Version</th> </tr> <tr> <td>Internet Explorer</td> <td>4.0</td> </tr> <tr> <td>Firefox (Gecko)</td> <td>1.0 (1.0)</td> </tr> <tr> <td>Opera</td> <td>3.5</td> </tr> <tr> <td>Safari (WebKit)</td> <td>1.0 (85)</td> </tr> </tbody>
+</table>
+<h3 id="Spezifikation">Spezifikation</h3>
+<ul> <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-left-width" lang="en">CSS 3 Background and Borders #border-left-width</a></li> <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-left-width" lang="en">CSS 2.1 Box #border-left-width</a></li>
+</ul>
+<h3 id="Siehe_auch">Siehe auch</h3>
+<ul> <li><a href="/de/CSS/border-left" title="de/CSS/border-left"><code>border-left</code></a>, <a href="/de/CSS/border-left-color" title="de/CSS/border-left-color"><code>border-left-color</code></a>, <a href="/de/CSS/border-left-style" title="de/CSS/border-left-style"><code>border-left-style</code></a></li> <li><a href="/de/CSS/border-width" title="de/CSS/border-width"><code>border-width</code></a>, <a href="/De/CSS/Border-bottom-width" title="De/CSS/Border-bottom-width"><code>border-bottom-width</code></a>, <a href="/De/CSS/Border-right-width" title="De/CSS/Border-right-width"><code>border-right-width</code></a>, <a href="/De/CSS/Border-top-width" title="De/CSS/Border-top-width"><code>border-top-width</code></a></li>
+</ul>
+<p>{{ languages( { "en": "en/CSS/border-left-width", "fr": "fr/CSS/border-left-width", "ja": "ja/CSS/border-left-width", "pl": "pl/CSS/border-left-width" } ) }}</p>
diff --git a/files/de/web/css/border-left/index.html b/files/de/web/css/border-left/index.html
new file mode 100644
index 0000000000..f4fb458b27
--- /dev/null
+++ b/files/de/web/css/border-left/index.html
@@ -0,0 +1,48 @@
+---
+title: border-left
+slug: Web/CSS/border-left
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/border-left
+---
+<p>{{ CSSRef() }}</p>
+<h3 id="Übersicht">Übersicht:</h3>
+<p>Die <code>border-left</code> Eigenschaft legt den linken Rahmen eines Elementes fest und ist eine Kurzform für <br>
+<a href="/de/CSS/border-left-color" title="de/CSS/border-left-color"><code>border-left-color</code></a>, <a href="/de/CSS/border-left-style" title="de/CSS/border-left-style"><code>border-left-style</code></a> und <a href="/De/CSS/Border-left-width" title="De/CSS/Border-left-width"><code>border-left-width</code></a>. Die Werte der drei Eigenschaften können in beliebiger Reihenfolge angegeben werden.</p>
+<ul> <li>Standardwert: siehe einzelne Eigenschaften</li> <li>Anwendbar auf: Alle Elemente</li> <li>Vererbbar: Nein</li> <li>Prozentwerte: Nein</li> <li>Medium: visuell</li> <li>berechneter Wert: siehe einzelne Eigenschaften</li>
+</ul>
+<h3 id="Syntax">Syntax</h3>
+<pre class="eval">border-left: [ &lt;Rahmenbreite&gt; || &lt;Rahmenstil&gt; || &lt;Rahmenfarbe&gt; ] | inherit
+</pre>
+<h3 id="Werte">Werte</h3>
+<dl> <dt>&lt;Rahmenbreite&gt;</dt> <dd>Optional. Wenn nichts festgelegt ist, wird <code>medium</code> verwendet. Siehe: <a href="/De/CSS/Border-left-width" title="De/CSS/Border-left-width"><code>border-left-width</code></a>.</dd> <dt>&lt;Rahmenstil&gt;</dt> <dd>Erforderlich. Wenn nichts festgelegt ist, wird <code>none</code> verwendet. Siehe: <a href="/de/CSS/border-left-style" title="de/CSS/border-left-style"><code>border-left-style</code></a>.</dd> <dt>&lt;Rahmenfarbe&gt;</dt> <dd>Optional. Wenn nichts festgelegt ist, wird der Wert der <code>color</code> Eigenschaft des Elements genommen. Siehe: <a href="/de/CSS/border-left-color" title="de/CSS/border-left-color"><code>border-left-color</code></a>.</dd> <dt>inherit</dt> <dd>Der Wert des Elternelements wird geerbt.</dd>
+</dl>
+<h3 id="Beispiele">Beispiele</h3>
+<pre>.beispielEins {
+  border-left: 1px solid #000;
+}
+
+.beispielZwei {
+  border-left-style: dotted;
+  border-left: thick green;
+
+  /* Bedeutet das gleiche wie: */
+
+  border-left-style: dotted;
+  border-left: none thick green;
+
+  /* border-left-style wird nach Angabe von border-left ignoriert.
+  Es wird kein linker Rahmen gezeichnet. */
+}
+</pre>
+<h3 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h3>
+<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>ab Version</th> </tr> <tr> <td>Internet Explorer</td> <td>4.0</td> </tr> <tr> <td>Firefox (Gecko)</td> <td>1.0 (1.0)</td> </tr> <tr> <td>Opera</td> <td>3.5</td> </tr> <tr> <td>Safari (WebKit)</td> <td>1.0 (85)</td> </tr> </tbody>
+</table>
+<h3 id="Spezifikation">Spezifikation</h3>
+<ul> <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-left" lang="en">CSS 3 Background and Borders #border-left</a></li> <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-left" lang="en">CSS 2.1 Box #border-left</a></li>
+</ul>
+<h3 id="Siehe_auch">Siehe auch</h3>
+<ul> <li><a href="/de/CSS/border-left-color" title="de/CSS/border-left-color"><code>border-left-color</code></a>, <a href="/de/CSS/border-left-style" title="de/CSS/border-left-style"><code>border-left-style</code></a>, <a href="/De/CSS/Border-left-width" title="De/CSS/Border-left-width"><code>border-left-width</code></a></li> <li><a href="/de/CSS/border-bottom" title="de/CSS/border-bottom"><code>border-bottom</code></a>, <a href="/de/CSS/border-top" title="de/CSS/border-top"><code>border-top</code></a>, <a href="/de/CSS/border-right" title="de/CSS/border-right"><code>border-right</code></a></li> <li><a href="/de/CSS/-moz-border-left-colors" title="de/CSS/-moz-border-left-colors"><code>-moz-border-left-colors</code></a></li> <li><a href="/de/CSS/-moz-border-image" title="de/CSS/-moz-border-image"><code>-moz-border-image</code></a>, <a href="/de/CSS/border-radius" title="de/CSS/-moz-border-radius"><code>-moz-border-radius</code></a></li>
+</ul>
+<p>{{ languages( { "en": "en/CSS/border-left", "es": "es/CSS/border-left", "fr": "fr/CSS/border-left", "ja": "ja/CSS/border-left", "pl": "pl/CSS/border-left" } ) }}</p>
diff --git a/files/de/web/css/border-radius/index.html b/files/de/web/css/border-radius/index.html
new file mode 100644
index 0000000000..a4674ee265
--- /dev/null
+++ b/files/de/web/css/border-radius/index.html
@@ -0,0 +1,141 @@
+---
+title: border-radius
+slug: Web/CSS/border-radius
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/border-radius
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die Eigenschaft <code>border-radius</code> kann verwendet werden, um <a href="/de/CSS/border" title="de/CSS/border">Rahmen</a> mit abgerundeten Ecken zu versehen. Der Radius wird auch auf <a href="/de/CSS/background" title="de/CSS/background">Hintergründe</a> und <a href="/de/CSS/box-shadow" title="De/CSS/-moz-box-shadow">Schatteneffekte</a> angewendet, selbst wenn das Element über keinen Rahmen verfügt.</p>
+
+<p><code>border-radius</code> ist die Kurzform für die für Eigenschaften {{ Cssxref("border-top-left-radius") }}, {{ Cssxref("border-top-right-radius") }}, {{ Cssxref("border-bottom-right-radius") }} und {{ Cssxref("border-bottom-left-radius") }}.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="eval">border-radius: {{csssyntax("border-radius")}}
+
+bzw.
+
+border-radius: [ &lt;Länge&gt; | &lt;Prozentzahl&gt; ]{1,4}
+               [ / [ &lt;Länge&gt; | &lt;Prozentzahl&gt; ]{1,4} ]?
+</pre>
+
+<h2 id="Werte">Werte</h2>
+
+<p>Es werden bis zu vier Angaben akzeptiert und nach einem Slash ("<code>/</code>") können vier weitere Angaben folgen.</p>
+
+<dl>
+ <dt>&lt;Länge&gt;</dt>
+ <dd>Siehe {{cssxref("&lt;length&gt;")}} für mögliche Einheiten.</dd>
+ <dt>&lt;Prozentzahl&gt;</dt>
+ <dd>Ab Gecko 2.0 (Firefox 4.0):<br>
+ Prozentuale Angaben für den horizontalen Radius beziehen sich auf die Breite der Box. Die Prozentzahl für den vertikalen Radius ist allerdings relativ zur Höhe der Box.<br>
+ In vorherigen Gecko- &amp; Firefox-Versionen:<br>
+ {{ non-standard_inline() }} Eine prozentuale Angabe, die sich auf die Breite der Box bezieht. Die Prozentzahl ist auch dann relativ zur Breite, wenn ein Radius für die Höhe festgelegt wird.</dd>
+ <dt>Ein Wert</dt>
+ <dd>Gilt für alle vier Ecken.</dd>
+ <dt>Zwei Werte</dt>
+ <dd>Der erste Wert bestimmt die Ecken oben links und unten rechts, der zweite Wert legt die Ecken oben rechts und unten links fest.</dd>
+ <dt>Drei Werte</dt>
+ <dd>Der erste Wert bestimmt die Ecke oben links, der zweite Wert legt die Ecke für oben rechts und unten links zusammen fest und der dritte Wert bestimmt die Ecke unten rechts.</dd>
+ <dt>Vier Werte</dt>
+ <dd>Für jede Seite können die Abstände einzeln festgelegt werden. In der Reihenfolge: oben links, oben rechts, unten rechts, unten links.</dd>
+ <dt>Slash ("/") Schreibweise</dt>
+ <dd>Wenn weitere Werte nach einem Slash ("/") folgen, werden die Werte vor dem Slash verwendet, um den horizontalen Radius festzulegen, während die Werte nach dem Slash für vertikalen Radius benutzt werden. Wird der Slash weggelassen, werden die festgelegten Werte für horizontale und vertikale Radien verwendet.</dd>
+</dl>
+
+<p>Beispiel zur Slash-Notation:</p>
+
+<pre class="brush: css">-moz-border-radius: 1em/5em;
+     border-radius: 1em/5em;
+
+/* ist gleichbedeutend zu: */
+
+-moz-border-radius-topleft:      1em 5em;
+-moz-border-radius-topright:     1em 5em;
+-moz-border-radius-bottomright:  1em 5em;
+-moz-border-radius-bottomleft:   1em 5em;
+     border-top-left-radius:     1em 5em;
+     border-top-right-radius:    1em 5em;
+     border-bottom-right-radius: 1em 5em;
+     border-bottom-left-radius:  1em 5em;
+</pre>
+
+<pre class="brush: css">-moz-border-radius: 4px 3px 6px / 2px 4px;
+     border-radius: 4px 3px 6px / 2px 4px;
+
+/* ist gleichbedeutend zu: */
+
+-moz-border-radius-topleft:      4px 2px;
+-moz-border-radius-topright:     3px 4px;
+-moz-border-radius-bottomright:  6px 2px;
+-moz-border-radius-bottomleft:   3px 4px;
+     border-top-left-radius:     4px 2px;
+     border-top-right-radius:    3px 4px;
+     border-bottom-right-radius: 6px 2px;
+     border-bottom-left-radius:  3px 4px;
+</pre>
+
+<div class="note"><strong>Hinweis: </strong>Elliptische Rahmen (Slash mit erweitertem border-radius Syntax) werden von Versionen vor Gecko 1.9.1 (Firefox 3.5) nicht unterstützt.</div>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre style="float: left; margin: 10px; border: solid 10px; border-radius: 0 50px 50px 0;">border: solid 10px;
+
+  /* Der Rahmen ergibt ein 'D' */
+  -moz-border-radius: 0 50px 50px 0;
+       border-radius: 0 50px 50px 0;
+</pre>
+
+<pre style="float: left; margin: 10px; border: groove 1em red; -webkit-border-radius: 2em; border-radius: 2em;">    border: groove 1em red;
+
+           -moz-border-radius: 2em;
+        -webkit-border-radius: 2em;
+                border-radius: 2em;
+</pre>
+
+<pre class="eval" style="float: left; margin: 10px; background: gold; border: ridge gold; -webkit-border-radius: 13em 3em; border-radius: 13em/3em;">     <span style="font-family: arial,helvetica,sans-serif;">{{ fx_minversion_inline(3.5) }}</span>
+           background: gold;
+           border: ridge gold;
+
+             -moz-border-radius: 13em/3em;
+          -webkit-border-radius: 13em 3em;
+                  border-radius: 13em/3em;
+</pre>
+
+<pre style="float: left; border: none; margin: 10px; background: gold; border-radius: 40px 10px;">    background: gold;
+
+       -moz-border-radius: 40px 10px;
+            border-radius: 40px 10px;
+</pre>
+
+<pre style="float: left; border: none; margin: 10px; background: black; color: gray; border-radius: 50%;">background: black;
+color: gray;
+border-radius: 50%;
+</pre>
+
+<p style=""> </p>
+
+<h2 id="Hinweise">Hinweise</h2>
+
+<ul>
+ <li>Gepunktete und gestrichelte Rahmenecken werden als durchgehende Linie gerendert. Siehe {{ bug("382721") }}.</li>
+ <li><code>border-radius</code> wird nicht auf Tabellen angewendet, wenn <a href="/de/CSS/border-collapse" title="de/CSS/border-collapse"><code>border-collapse</code></a> auf <code>collapse</code> gesetzt ist.</li>
+ <li>Safari/WebKit behandelt mehrere mehrere Werte anders (siehe unten).</li>
+</ul>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.border-radius")}}
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-background/#the-border-radius" lang="en">CSS 3 Backgrounds and Borders #border-radius</a></li>
+</ul>
diff --git a/files/de/web/css/border-right-color/index.html b/files/de/web/css/border-right-color/index.html
new file mode 100644
index 0000000000..b70d0ade28
--- /dev/null
+++ b/files/de/web/css/border-right-color/index.html
@@ -0,0 +1,36 @@
+---
+title: border-right-color
+slug: Web/CSS/border-right-color
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/border-right-color
+---
+<p>{{ CSSRef() }}</p>
+<h3 id="Übersicht">Übersicht:</h3>
+<p>Die <code>border-right-color</code> Eigenschaft legt die Farbe des rechten Rahmens fest. Da der Standardwert für die Rahmenart <code>none</code> ist, muss eine Angabe der <a href="/de/CSS/border-right-style" title="de/CSS/border-right-style"><code>border-right-style</code></a> Eigenschaft erfolgen, damit ein rechter Rahmen sichtbar werden kann. Es ist daher sinnvoll mit der Kurzform <a href="/de/CSS/border-right" title="de/CSS/border-right"><code>border-right</code></a> gleich die Farbe und die Art des rechten Rahmens festzulegen.</p>
+<ul> <li>Standardwert: Wert der <a href="/de/CSS/color" title="de/CSS/color"><code>color</code></a> Eigenschaft</li> <li>Anwendbar auf: Alle Elemente</li> <li>Vererbbar: Nein</li> <li>Prozentwerte: Nein</li> <li>Medium: visuell</li> <li>berechneter Wert: wie festgelegt</li>
+</ul>
+<h3 id="Syntax">Syntax</h3>
+<pre class="eval">border-right-color:  &lt;Farbe&gt; | transparent | inherit
+</pre>
+<h3 id="Werte">Werte</h3>
+<dl> <dt>&lt;Farbe&gt;</dt> <dd><a href="/de/CSS/Farben" title="de/CSS/Farben">Farbangabe</a> [ Hexadezimalwert, Farbname, Systemfarbe, rgb(), rgba(), hsl() oder hlsa() ]</dd> <dt>transparent</dt> <dd>Das Element hat keine Farbe. Es wird die Farbe des dahinter liegenden Elementes angezeigt.</dd> <dt>inherit</dt> <dd>Der Wert des Elternelements wird geerbt.</dd>
+</dl>
+<h3 id="Beispiele">Beispiele</h3>
+<pre style="border-right-style: solid;">pre {
+  border-right-style: solid;
+  border-right-color: red;
+
+}
+</pre>
+<h3 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h3>
+<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>ab Version</th> </tr> <tr> <td>Internet Explorer</td> <td>4.0</td> </tr> <tr> <td>Firefox (Gecko)</td> <td>1.0 (1.0)</td> </tr> <tr> <td>Opera</td> <td>3.5</td> </tr> <tr> <td>Safari (WebKit)</td> <td>1.0 (85)</td> </tr> </tbody>
+</table>
+<h3 id="Spezifikation">Spezifikation</h3>
+<ul> <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-right-color" lang="en">CSS 3 Background and Borders #border-right-color</a></li> <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-right-color" lang="en">CSS 2.1 Box #border-right-color</a></li>
+</ul>
+<h3 id="Siehe_auch">Siehe auch</h3>
+<ul> <li><a href="/de/CSS/border-right" title="de/CSS/border-right"><code>border-right</code></a>, <a href="/de/CSS/border-right-style" title="de/CSS/border-right-style"><code>border-right-style</code></a>, <a href="/De/CSS/Border-right-width" title="De/CSS/Border-right-width"><code>border-right-width</code></a></li> <li><a href="/de/CSS/border-bottom" title="de/CSS/border-bottom"><code>border-bottom</code></a>, <a href="/de/CSS/border-left" title="de/CSS/border-left"><code>border-left</code></a>, <a href="/de/CSS/border-top" title="de/CSS/border-top"><code>border-top</code></a></li> <li><a href="/de/CSS/-moz-border-right-colors" title="de/CSS/-moz-border-right-colors"><code>-moz-border-right-colors</code></a></li>
+</ul>
+<p>{{ languages( { "en": "en/CSS/border-right-color", "fr": "fr/CSS/border-right-color", "ja": "ja/CSS/border-right-color", "pl": "pl/CSS/border-right-color" } ) }}</p>
diff --git a/files/de/web/css/border-right-style/index.html b/files/de/web/css/border-right-style/index.html
new file mode 100644
index 0000000000..eee81bd976
--- /dev/null
+++ b/files/de/web/css/border-right-style/index.html
@@ -0,0 +1,120 @@
+---
+title: border-right-style
+slug: Web/CSS/border-right-style
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/border-right-style
+---
+<p>{{ CSSRef() }}</p>
+<h2 id="Übersicht">Übersicht</h2>
+<p>Die <code>border-right-style</code> Eigenschaft legt die Rahmenart des rechten Rahmens fest.</p>
+<ul>
+ <li>Standardwert: <code>none</code></li>
+ <li>Anwendbar auf: Alle Elemente</li>
+ <li>Vererbbar: Nein</li>
+ <li>Prozentwerte: Nein</li>
+ <li>Medium: visuell</li>
+ <li>berechneter Wert: wie festgelegt</li>
+</ul>
+<h2 id="Syntax">Syntax</h2>
+<pre class="eval">border-right-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
+</pre>
+<h2 id="Werte">Werte</h2>
+<dl>
+ <dt>
+  none</dt>
+ <dd>
+  Standardwert. Es wird kein rechter Rahmen gezeichnet und die Breite wird auf '0' zurückgesetzt.</dd>
+ <dt>
+  hidden</dt>
+ <dd>
+  Genau wie bei <code>none</code> wird kein Rahmen angezeigt. Das Verhalten unterscheidet sich jedoch beim "Collapsing Border Model" innerhalb von Tabellen.<br>
+  Wenn <a href="/de/CSS/border-collapse" title="de/CSS/border-collapse"><code>border-collapse: collapse</code></a> gesetzt wurde, wird auch an den angrenzenden Nachbarzellen kein Rahmen dargestellt.</dd>
+ <dt>
+  dotted</dt>
+ <dd>
+  Punktierte Linie.</dd>
+ <dt>
+  dashed</dt>
+ <dd>
+  Gestrichelte Linie.</dd>
+ <dt>
+  solid</dt>
+ <dd>
+  Durchgehende Linie.</dd>
+ <dt>
+  double</dt>
+ <dd>
+  Zwei durchgehende Linien mit Zwischenraum. Die zwei Linien und der Zwischenraum sind jeweils ein Drittel der <a href="/De/CSS/Border-right-width" title="De/CSS/Border-right-width"><code>border-right-width</code></a> Angabe groß.</dd>
+ <dt>
+  groove</dt>
+ <dd>
+  Der Rahmen wirkt eingekerbt (3D-Effekt).</dd>
+ <dt>
+  ridge</dt>
+ <dd>
+  Der Rahmen wirkt wie eine Kante (3D-Effekt).</dd>
+ <dt>
+  inset</dt>
+ <dd>
+  Durch den Rahmen wirkt das ganze Element eingetieft (3D-Effekt).</dd>
+ <dt>
+  outset</dt>
+ <dd>
+  Durch den Rahmen wirkt das ganze Element herausgehoben (3D-Effekt).</dd>
+ <dt>
+  inherit</dt>
+ <dd>
+  Der Wert des Elternelements wird geerbt.</dd>
+</dl>
+<h2 id="Beispiele">Beispiele</h2>
+<pre>.beispielEins {
+  border-right-style: dashed;      /* gestrichelt */
+}
+
+.beispielZwei {
+  border-right-style: groove;      /* Einkerbung */
+}
+
+.beispielDrei {
+ border-right-style: hidden;       /* Collapsing Border Model */
+ border-collapse: collapse;
+}
+</pre>
+<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Browser</th>
+   <th>ab Version</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td>1.0 (1.0)</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>3.5</td>
+  </tr>
+  <tr>
+   <td>Safari (WebKit)</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Spezifikation">Spezifikation</h2>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-right-style" lang="en">CSS 3 Background and Borders #border-right-style</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-right-style" lang="en">CSS 2.1 Box #border-right-style</a></li>
+</ul>
+<h2 id="Siehe_auch">Siehe auch</h2>
+<ul>
+ <li><a href="/de/CSS/border-right" title="de/CSS/border-right"><code>border-right</code></a>, <a href="/de/CSS/border-right-color" title="de/CSS/border-right-color"><code>border-right-color</code></a>, <a href="/De/CSS/Border-right-width" title="De/CSS/Border-right-width"><code>border-right-width</code></a></li>
+ <li><a href="/de/CSS/border-style" title="de/CSS/border-style"><code>border-style</code></a>, <a href="/de/CSS/border-bottom-style" title="de/CSS/border-bottom-style"><code>border-bottom-style</code></a>, <a href="/de/CSS/border-left-style" title="de/CSS/border-left-style"><code>border-left-style</code></a>, <a href="/de/CSS/border-top-style" title="de/CSS/border-top-style"><code>border-top-style</code></a></li>
+</ul>
+<p>{{ languages( { "en": "en/CSS/border-right-style", "fr": "fr/CSS/border-right-style", "ja": "ja/CSS/border-right-style", "pl": "pl/CSS/border-right-style" } ) }}</p>
diff --git a/files/de/web/css/border-right-width/index.html b/files/de/web/css/border-right-width/index.html
new file mode 100644
index 0000000000..c3aa02724f
--- /dev/null
+++ b/files/de/web/css/border-right-width/index.html
@@ -0,0 +1,90 @@
+---
+title: border-right-width
+slug: Web/CSS/Border-right-width
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/border-right-width
+---
+<p>{{ CSSRef() }}</p>
+<h2 id="Übersicht">Übersicht</h2>
+<p>Die <code>border-right-width</code> Eigenschaft legt die Breite des rechten Rahmens fest.</p>
+<ul>
+ <li>Standardwert: <code>medium</code></li>
+ <li>Anwendbar auf: Alle Elemente</li>
+ <li>Vererbbar: Nein</li>
+ <li>Prozentwerte: Nein</li>
+ <li>Medium: visuell</li>
+ <li>berechneter Werte: absolute Länge; <code>0</code> wenn <code>none</code> oder <code>hidden</code> festgelegt wurde</li>
+</ul>
+<h2 id="Syntax">Syntax</h2>
+<pre class="eval">border-right-width: &lt;Länge&gt; | thin | medium | thick | inherit
+</pre>
+<h2 id="Werte">Werte</h2>
+<dl>
+ <dt>
+  &lt;Länge&gt;</dt>
+ <dd>
+  Eine <a href="/de/CSS/Einheiten#L.c3.a4ngen" title="de/CSS/Einheiten#L.c3.a4ngen">Längenangabe</a> die, die Rahmenstärke explizit angibt. Es sind keine negativen Werte erlaubt.</dd>
+ <dt>
+  thin</dt>
+ <dd>
+  Eine dünne Rahmenlinie (1px).</dd>
+ <dt>
+  medium</dt>
+ <dd>
+  Standardwert. Eine mitteldicke Rahmenlinie (3px).</dd>
+ <dt>
+  thick</dt>
+ <dd>
+  Eine dicke Rahmenlinie (5px).</dd>
+ <dt>
+  inherit</dt>
+ <dd>
+  Der Wert des Elternelements wird geerbt.</dd>
+</dl>
+<h2 id="Beispiele">Beispiele</h2>
+<pre>.beispielEins {
+  border-right-width: 10px;
+}
+
+.beispielZwei {
+  border-right-width: thin;
+}
+</pre>
+<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Browser</th>
+   <th>ab Version</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td>1.0 (1.0)</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>3.5</td>
+  </tr>
+  <tr>
+   <td>Safari (WebKit)</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Spezifikation">Spezifikation</h2>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-right-width" lang="en">CSS 3 Background and Borders #border-right-width</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-right-width" lang="en">CSS 2.1 Box #border-right-width</a></li>
+</ul>
+<h2 id="Siehe_auch">Siehe auch</h2>
+<ul>
+ <li><a href="/de/CSS/border-right" title="de/CSS/border-right"><code>border-right</code></a>, <a href="/de/CSS/border-right-color" title="de/CSS/border-right-color"><code>border-right-color</code></a>, <a href="/de/CSS/border-right-style" title="de/CSS/border-right-style"><code>border-right-style</code></a></li>
+ <li><a href="/de/CSS/border-width" title="de/CSS/border-width"><code>border-width</code></a>, <a href="/De/CSS/Border-bottom-width" title="De/CSS/Border-bottom-width"><code>border-bottom-width</code></a>, <a href="/De/CSS/Border-left-width" title="De/CSS/Border-left-width"><code>border-left-width</code></a>, <a href="/De/CSS/Border-top-width" title="De/CSS/Border-top-width"><code>border-top-width</code></a></li>
+</ul>
+<p>{{ languages( { "en": "en/CSS/border-right-width", "fr": "fr/CSS/border-right-width", "ja": "ja/CSS/border-right-width", "pl": "pl/CSS/border-right-width" } ) }}</p>
diff --git a/files/de/web/css/border-right/index.html b/files/de/web/css/border-right/index.html
new file mode 100644
index 0000000000..664b3ded4d
--- /dev/null
+++ b/files/de/web/css/border-right/index.html
@@ -0,0 +1,48 @@
+---
+title: border-right
+slug: Web/CSS/border-right
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/border-right
+---
+<p>{{ CSSRef() }}</p>
+<h3 id="Übersicht">Übersicht:</h3>
+<p>Die <code>border-right</code> Eigenschaft legt den rechten Rahmen eines Elementes fest und ist eine Kurzform für <br>
+<a href="/de/CSS/border-right-color" title="de/CSS/border-right-color"><code>border-right-color</code></a>, <a href="/de/CSS/border-right-style" title="de/CSS/border-right-style"><code>border-right-style</code></a> und <a href="/De/CSS/Border-right-width" title="De/CSS/Border-right-width"><code>border-right-width</code></a>. Die Werte der drei Eigenschaften können in beliebiger Reihenfolge angegeben werden.</p>
+<ul> <li>Standardwert: siehe einzelne Eigenschaften</li> <li>Anwendbar auf: Alle Elemente</li> <li>Vererbbar: Nein</li> <li>Prozentwerte: Nein</li> <li>Medium: visuell</li> <li>berechneter Wert: siehe einzelne Eigenschaften</li>
+</ul>
+<h3 id="Syntax">Syntax</h3>
+<pre class="eval">border-right: [ &lt;Rahmenbreite&gt; || &lt;Rahmenstil&gt; || &lt;Rahmenfarbe&gt; ] | inherit
+</pre>
+<h3 id="Werte">Werte</h3>
+<dl> <dt>&lt;Rahmenbreite&gt;</dt> <dd>Optional. Wenn nichts festgelegt ist, wird <code>medium</code> verwendet. Siehe: <a href="/De/CSS/Border-right-width" title="De/CSS/Border-right-width"><code>border-right-width</code></a>.</dd> <dt>&lt;Rahmenstil&gt;</dt> <dd>Erforderlich. Wenn nichts festgelegt ist, wird <code>none</code> verwendet. Siehe: <a href="/de/CSS/border-right-style" title="de/CSS/border-right-style"><code>border-right-style</code></a>.</dd> <dt>&lt;Rahmenfarbe&gt;</dt> <dd>Optional. Wenn nichts festgelegt ist, wird der Wert der <code>color</code> Eigenschaft des Elements genommen. Siehe: <a href="/de/CSS/border-right-color" title="de/CSS/border-right-color"><code>border-right-color</code></a>.</dd> <dt>inherit</dt> <dd>Der Wert des Elternelements wird geerbt.</dd>
+</dl>
+<h3 id="Beispiele">Beispiele</h3>
+<pre>.beispielEins {
+  border-right: 1px solid #000;
+}
+
+.beispielZwei {
+  border-right-style: dotted;
+  border-right: thick green;
+
+  /* Bedeutet das gleiche wie: */
+
+  border-right-style: dotted;
+  border-right: none thick green;
+
+  /* border-right-style wird nach Angabe von border-right ignoriert.
+  Es wird kein rechter Rahmen gezeichnet. */
+}
+</pre>
+<h3 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h3>
+<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>ab Version</th> </tr> <tr> <td>Internet Explorer</td> <td>4.0</td> </tr> <tr> <td>Firefox (Gecko)</td> <td>1.0 (1.0)</td> </tr> <tr> <td>Opera</td> <td>3.5</td> </tr> <tr> <td>Safari (WebKit)</td> <td>1.0 (85)</td> </tr> </tbody>
+</table>
+<h3 id="Spezifikation">Spezifikation</h3>
+<ul> <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-right" lang="en">CSS 3 Background and Borders #border-right</a></li> <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-right" lang="en">CSS 2.1 Box #border-right</a></li>
+</ul>
+<h3 id="Siehe_auch">Siehe auch</h3>
+<ul> <li><a href="/de/CSS/border-right-color" title="de/CSS/border-right-color"><code>border-right-color</code></a>, <a href="/de/CSS/border-right-style" title="de/CSS/border-right-style"><code>border-right-style</code></a>, <a href="/De/CSS/Border-right-width" title="De/CSS/Border-right-width"><code>border-right-width</code></a></li> <li><a href="/de/CSS/border-bottom" title="de/CSS/border-bottom"><code>border-bottom</code></a>, <a href="/de/CSS/border-top" title="de/CSS/border-top"><code>border-top</code></a>, <a href="/de/CSS/border-left" title="de/CSS/border-left"><code>border-left</code></a></li> <li><a href="/de/CSS/-moz-border-right-colors" title="de/CSS/-moz-border-right-colors"><code>-moz-border-right-colors</code></a></li> <li><a href="/de/CSS/-moz-border-image" title="de/CSS/-moz-border-image"><code>-moz-border-image</code></a>, <a href="/de/CSS/border-radius" title="de/CSS/-moz-border-radius"><code>-moz-border-radius</code></a></li>
+</ul>
+<p>{{ languages( { "en": "en/CSS/border-right", "fr": "fr/CSS/border-right", "ja": "ja/CSS/border-right", "pl": "pl/CSS/border-right" } ) }}</p>
diff --git a/files/de/web/css/border-spacing/index.html b/files/de/web/css/border-spacing/index.html
new file mode 100644
index 0000000000..e20300171a
--- /dev/null
+++ b/files/de/web/css/border-spacing/index.html
@@ -0,0 +1,143 @@
+---
+title: border-spacing
+slug: Web/CSS/border-spacing
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Referenz
+  - CSS Tabellen
+  - Referenz
+translation_of: Web/CSS/border-spacing
+---
+<div>{{CSSRef}}</div>
+
+<p>Die <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft <strong><code>border-spacing</code></strong> legt die Abstände zwischen Tabellenzellen fest.<br>
+ Die Eigenschaft hat nur dann Auswirkungen, wenn <a href="/de/CSS/border-collapse" title="de/CSS/border-collapse"><code>border-collapse: separate</code></a> definiert ist.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-spacing.html")}}</div>
+
+
+
+<p>Der Wert für <code>border-spacing </code>wird auch entlang der Außenkante der Tabelle verwendet, wobei der Abstand zwischen dem Rand der Tabelle und den Zellen in der ersten/letzten Spalte oder Zeile die Summe des relevanten Randabstands (horizontalen oder vertikalen) <code>border-spacing</code> und des relevanten (oben, rechts, unten oder links) {{cssxref("padding")}} in der Tabelle ist.</p>
+
+<p>value is also used along the outside edge of the table, where the distance between the table's border and the cells in the first/last column or row is the sum of the relevant (horizontal or vertical) <code>border-spacing</code> and the relevant (top, right, bottom, or left) {{cssxref("padding")}} on the table.</p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Die <code>border-spacing</code> Eigenschaft entspricht demveraltetem <code>&lt;table&gt;</code> Attribut  <code>cellspacing</code>, mit der Ausnahme, dass es einen optionalen zweiten Wert hat, mit dem unterschiedliche horizontale und vertikale Abstände eingestellt werden können.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* &lt;length&gt; */
+border-spacing: 2px;
+
+/* horizontal &lt;length&gt; | vertical &lt;length&gt; */
+border-spacing: 1cm 2em;
+
+/* Global values */
+border-spacing: inherit;
+border-spacing: initial;
+</pre>
+
+<p>Die Eigenschaft <code>border-spacing</code> kann entweder als ein oder zwei Werte angegeben werden.</p>
+
+<ul>
+ <li>Wenn <strong>ein</strong> <code>&lt;length&gt;</code> Wert angegeben wird, definiert er sowohl die horizontalen als auch die vertikalen Abstände zwischen den Zellen.</li>
+ <li>Wenn <strong>zwei</strong> <code>&lt;length&gt;</code> Werte angegeben werden, definiert der erste Wert den horizontalen Abstand zwischen Zellen (d.h. den Abstand zwischen Zellen in benachbarten Spalten) und der zweite Wert den vertikalen Abstand zwischen Zellen (d.h. den Abstand zwischen Zellen in benachbarten Zeilen).</li>
+</ul>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Die Größe des Abstands als fester Wert.</dd>
+ <dt>{{cssxref("&lt;initial&gt;")}}</dt>
+ <dd>Setzt den Standardwert für diese Eigenschaft</dd>
+ <dt>{{cssxref("&lt;inherit&gt;")}}</dt>
+ <dd>Diese Eigenschaft erbt den Wert von seinem Elternelement.</dd>
+</dl>
+
+<h2 id="Formale_Definition">Formale Definition</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formale_Syntax">Formale Syntax</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Spacing_and_padding_table_cells" name="Spacing_and_padding_table_cells">Abstände und Padding von Tabellenzellen</h3>
+
+<div class="translate-buttons">
+<p>In diesem Beispiel wird ein Abstand von <code>.5em</code> vertikal und <code>1em</code> horizontal zwischen den Zellen einer Tabelle angewendet. Beachten Sie, wie die <code>padding</code> Werte der Tabelle entlang ihrer Außenkanten zu ihren Randabstandswerten <code>border-spacing</code> addiert werden.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td&gt;1&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;3&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;4&lt;/td&gt;&lt;td&gt;5&lt;/td&gt;&lt;td&gt;6&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;7&lt;/td&gt;&lt;td&gt;8&lt;/td&gt;&lt;td&gt;9&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">table {
+  border-spacing: 1em .5em;
+  padding: 0 2em 1em 0;
+  border: 1px solid orange;
+}
+
+td {
+  width: 1.5em;
+  height: 1.5em;
+  background: #d2d2d2;
+  text-align: center;
+  vertical-align: middle;
+}
+</pre>
+
+<h4 id="Ergebnis">Ergebnis</h4>
+
+<p>{{ EmbedLiveSample('Spacing_and_padding_table_cells', 400, 200) }}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'tables.html#separated-borders', 'border-spacing') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+
+
+<p>{{Compat("css.properties.border-spacing")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/CSS/border-collapse" title="de/CSS/border-collapse"><code>border-collapse</code></a>, <a href="/de/CSS/caption-side" title="de/CSS/caption-side"><code>caption-side</code></a>, <a href="/de/CSS/empty-cells" title="de/CSS/empty-cells"><code>empty-cells</code></a>, <a href="/de/CSS/table-layout" title="de/CSS/table-layout"><code>table-layout</code></a></li>
+</ul>
+
+<p>{{ languages( { "en": "en/CSS/border-spacing", "fr": "fr/CSS/border-spacing", "pl": "pl/CSS/border-spacing", "es": "es/CSS/border-spacing" } ) }}</p>
diff --git a/files/de/web/css/border-style/index.html b/files/de/web/css/border-style/index.html
new file mode 100644
index 0000000000..32aa331b10
--- /dev/null
+++ b/files/de/web/css/border-style/index.html
@@ -0,0 +1,219 @@
+---
+title: border-style
+slug: Web/CSS/border-style
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/border-style
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <strong><code>border-style</code></strong> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft ist eine Kurzschreibweise zum Setzen des Linienstils für alle vier Seiten des Elementrands.</p>
+
+<div class="note"><strong>Hinweis:</strong> Der Standardwert von <code>border-style</code> ist <code>none</code>. Das bedeutet, falls die {{cssxref("border-width")}} und die {{cssxref("border-color")}} geändert werden, wird der Rand nicht angezeigt, solange diese Eigenschaft nicht auf etwas anderes als <code>none</code> oder <code>hidden</code> gesetzt wird.</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css notranslate">/* Auf alle vier Seiten anwenden */
+border-style: dashed;
+
+/* horizontal | vertikal */
+border-style: dotted solid;
+
+/* open | horizontal | vertikal */
+border-style: hidden double dashed;
+
+/* open | rechts | unten | links */
+border-style: none solid dotted dashed;
+
+/* Global values */
+border-style: inherit;
+border-style: initial;
+border-style: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>&lt;br-style&gt;</code></dt>
+ <dd>Ist ein Schlüsselwort, das den Stil des unteren Rahmens beschreibt. Es kann die folgenden Werte annehmen:
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td style="vertical-align: middle;"><code>none</code></td>
+    <td style="vertical-align: middle;">
+     <div style="border-width: 3px; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">Wie beim <code>hidden</code> Schlüsselwort wird kein Rahmen angezeigt. In diesem Fall sind die berechneten Werte von {{cssxref("border-width")}} <code>0</code>, außer ein Hintergrundbild ist gesetzt, auch wenn die Eigenschaft anders gesetzt wurde. Im Fall von Zusammenfallen von Tabellenzellen und Rahmen hat der <code>none</code> Wert die niedrigste Priorität: Das bedeutet, dass falls irgendein anderer, gegensätzlicher Rahmen gesetzt ist, wird er angezeigt.</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>hidden</code></td>
+    <td style="vertical-align: middle;">
+     <div style="border-width: 3px; border-style: hidden; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">Wie beim <code>none</code> Schlüsselwort wird kein Rahmen angezeigt. In diesem Fall sind die berechneten Werte von {{cssxref("border-width")}} <code>0</code>, außer ein Hintergrundbild ist gesetzt, auch wenn die Eigenschaft anders gesetzt wurde. Im Fall von Zusammenfallen von Tabellenzellen und Rahmen hat der <code>hidden</code> Wert die höchste Priorität: Das bedeutet, dass falls irgendein anderer, gegensätzlicher Rahmen gesetzt ist, wird er nicht angezeigt.</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>dotted</code></td>
+    <td style="vertical-align: middle;">
+     <div style="border-width: 3px; border-style: dotted; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">Zeigt eine Reihe von runden Punkten an. Die Abstände der Punkte werden nicht durch die Spezifikation bestimmt und sind implementationsspezifisch. Der Radius der Punkte ist die halbe {{cssxref("border-width")}}.</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>dashed</code></td>
+    <td style="vertical-align: middle;">
+     <div style="border-width: 3px; border-style: dashed; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">Zeigt eine Reihe von kurzen Strichen mit quadratischen Enden oder Liniensegmenten an. Die exakte Größe und Länger der Segmente werden nicht durch die Spezifikation bestimmt und sind implementationsspezifisch.</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>solid</code></td>
+    <td style="vertical-align: middle;">
+     <div style="border-width: 3px; border-style: solid; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">Zeigt eine einfache, gerade, ausgefüllte Linie an.</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>double</code></td>
+    <td style="vertical-align: middle;">
+     <div style="border-width: 3px; border-style: double; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">Zeigt zwei gerade Linien an, die zum Pixelwert hinzugefügt werden, der durch {{cssxref("border-width")}} definiert wird.</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>groove</code></td>
+    <td style="vertical-align: middle;">
+     <div style="border-width: 3px; border-style: groove; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">Zeigt einen Rahmen an, der zu einem eingeritzten Effekt führt. Er ist das Gegenteil von <code>ridge</code>.</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>ridge</code></td>
+    <td style="vertical-align: middle;">
+     <div style="border-width: 3px; border-style: ridge; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">Zeigt einen Rahmen mit einem 3D-Effekt an, so als ob es aus der Seite herauskommt. Er ist das Gegenteil von <code>groove</code>.</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>inset</code></td>
+    <td style="vertical-align: middle;">
+     <div style="border-width: 3px; border-style: inset; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">Zeigt einen Rahmen an, der die Box so darstellt, als wäre sie eingelassen. Es ist das Gegenteil von <code>outset</code>. Auf eine Tabellenzelle mit {{cssxref("border-collapse")}} auf collapsed gesetzt angewendet, verhält sich dieser Wert wie groove.</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>outset</code></td>
+    <td style="vertical-align: middle;">
+     <div style="border-width: 3px; border-style: outset; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">
+     <p>Zeigt einen Rahmen an, der die Box in 3D wie geprägt darstellt. Es ist das Gegenteil von <code>inset</code>. Auf eine Tabellenzelle mit {{cssxref("border-collapse")}} auf <code>collapsed</code> gesetzt angewendet, verhält sich dieser Wert wie <code>ridge</code>.</p>
+    </td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Tabelle_mit_allen_Eigenschaftswerten">Tabelle mit allen Eigenschaftswerten</h3>
+
+<p>Hier ist ein Beispiel aller Eigenschaftswerte.</p>
+
+<h4 id="HTML_Inhalt">HTML Inhalt</h4>
+
+<pre class="brush: html notranslate">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td class="b1"&gt;none&lt;/td&gt;
+    &lt;td class="b2"&gt;hidden&lt;/td&gt;
+    &lt;td class="b3"&gt;dotted&lt;/td&gt;
+    &lt;td class="b4"&gt;dashed&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td class="b5"&gt;solid&lt;/td&gt;
+    &lt;td class="b6"&gt;double&lt;/td&gt;
+    &lt;td class="b7"&gt;groove&lt;/td&gt;
+    &lt;td class="b8"&gt;ridge&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td class="b9"&gt;inset&lt;/td&gt;
+    &lt;td class="b10"&gt;outset&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="CSS_Inhalt">CSS Inhalt</h4>
+
+<pre class="brush: css notranslate">/* Definiert das Aussehen der Tabelle */
+table {
+  border-width: 3px;
+  background-color: #52E396;
+}
+
+tr, td {
+  padding: 2px;
+}
+
+/* border-style Beispielklassen */
+.b1 { border-style: none; }
+.b2 { border-style: hidden; }
+.b3 { border-style: dotted; }
+.b4 { border-style: dashed; }
+.b5 { border-style: solid; }
+.b6 { border-style: double; }
+.b7 { border-style: groove; }
+.b8 { border-style: ridge; }
+.b9 { border-style: inset; }
+.b10  { border-style: outset; }</pre>
+
+<h4 id="Ausgabe">Ausgabe</h4>
+
+<p>{{EmbedLiveSample('Tabelle_mit_allen_Eigenschaftswerten', 300, 200)}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#border-style', 'border-style')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-style', 'border-style')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>2-, 3- und 4-Wert-Syntaxen hinzugefügt</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border-style', 'border-style')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{Compat("css.properties.border-style")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Die Rahmen-bezogenen Kurzschreibweise CSS Eigenschaften: {{cssxref("border")}}, {{cssxref("border-width")}}, {{cssxref("border-color")}}, {{cssxref("border-radius")}}</li>
+</ul>
diff --git a/files/de/web/css/border-top-color/index.html b/files/de/web/css/border-top-color/index.html
new file mode 100644
index 0000000000..3bf2e95cb2
--- /dev/null
+++ b/files/de/web/css/border-top-color/index.html
@@ -0,0 +1,81 @@
+---
+title: border-top-color
+slug: Web/CSS/border-top-color
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/border-top-color
+---
+<p>{{ CSSRef() }}</p>
+<h2 id="Übersicht">Übersicht</h2>
+<p>Die <code>border-top-color</code> Eigenschaft legt die Farbe des oberen Rahmens fest. Da der Standardwert für die Rahmenart <code>none</code> ist, muss eine Angabe der <a href="/de/CSS/border-top-style" title="de/CSS/border-top-style"><code>border-top-style</code></a> Eigenschaft erfolgen, damit ein oberer Rahmen sichtbar werden kann. Es ist daher sinnvoll mit der Kurzform <a href="/de/CSS/border-top" title="de/CSS/border-top"><code>border-top</code></a> gleich die Farbe und die Art des oberen Rahmens festzulegen.</p>
+<ul>
+ <li>Standardwert: Wert der <a href="/de/CSS/color" title="de/CSS/color"><code>color</code></a> Eigenschaft</li>
+ <li>Anwendbar auf: Alle Elemente</li>
+ <li>Vererbbar: Nein</li>
+ <li>Prozentwerte: Nein</li>
+ <li>Medium: visuell</li>
+ <li>berechneter Wert: die berechnete Farbe</li>
+</ul>
+<h2 id="Syntax">Syntax</h2>
+<pre class="eval">border-top-color:  &lt;Farbe&gt; | transparent | inherit
+</pre>
+<h2 id="Werte">Werte</h2>
+<dl>
+ <dt>
+  &lt;Farbe&gt;</dt>
+ <dd>
+  <a href="/de/CSS/Farben" title="de/CSS/Farben">Farbangabe</a> [ Hexadezimalwert, Farbname, Systemfarbe, rgb(), rgba(), hsl() oder hlsa() ]</dd>
+ <dt>
+  transparent</dt>
+ <dd>
+  Das Element hat keine Farbe. Es wird die Farbe des dahinter liegenden Elementes angezeigt.</dd>
+ <dt>
+  inherit</dt>
+ <dd>
+  Der Wert des Elternelements wird geerbt.</dd>
+</dl>
+<h2 id="Beispiele">Beispiele</h2>
+<pre style="border-top-style: solid;">pre {
+  border-top-style: solid;
+  border-top-color: red;
+
+}
+</pre>
+<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Browser</th>
+   <th>ab Version</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td>1.0 (1.0)</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>3.5</td>
+  </tr>
+  <tr>
+   <td>Safari (WebKit)</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Spezifikation">Spezifikation</h2>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-top-color" lang="en">CSS 3 Background and Borders #border-top-color</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-top-color" lang="en">CSS 2.1 Box #border-top-color</a></li>
+</ul>
+<h2 id="Siehe_auch">Siehe auch</h2>
+<ul>
+ <li><a href="/de/CSS/border-top" title="de/CSS/border-top"><code>border-top</code></a>, <a href="/de/CSS/border-top-style" title="de/CSS/border-top-style"><code>border-top-style</code></a>, <a href="/De/CSS/Border-top-width" title="De/CSS/Border-top-width"><code>border-top-width</code></a></li>
+ <li><a href="/de/CSS/border-bottom" title="de/CSS/border-bottom"><code>border-bottom</code></a>, <a href="/de/CSS/border-left" title="de/CSS/border-left"><code>border-left</code></a>, <a href="/de/CSS/border-right" title="de/CSS/border-right"><code>border-right</code></a></li>
+ <li><a href="/de/CSS/-moz-border-top-colors" title="de/CSS/-moz-border-top-colors"><code>-moz-border-top-colors</code></a></li>
+</ul>
+<p>{{ languages( { "en": "en/CSS/border-top-color", "fr": "fr/CSS/border-top-color", "ja": "ja/CSS/border-top-color", "pl": "pl/CSS/border-top-color" } ) }}</p>
diff --git a/files/de/web/css/border-top-left-radius/index.html b/files/de/web/css/border-top-left-radius/index.html
new file mode 100644
index 0000000000..9c3408d8a5
--- /dev/null
+++ b/files/de/web/css/border-top-left-radius/index.html
@@ -0,0 +1,91 @@
+---
+title: border-top-left-radius
+slug: Web/CSS/border-top-left-radius
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/border-top-left-radius
+---
+<p>{{ CSSRef }}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>border-top-left-radius</code> Eigenschaft die Abrundung der oberen, linken Ecke eines Elements fest.</p>
+
+<p>Vor Gecko 2.0 (Firefox 4.0) war diese Eigenschaft als <code>-moz-border-radius-topleft</code> bekannt. Diese Eigenschaft wird weiterhin übergangsweise unterstützt.</p>
+
+<p>Weitere Informationen sind unter <a href="/de/CSS/border-radius" title="de/CSS/border-radius"><code>border-radius</code></a> verfügbar.</p>
+
+<p>{{cssinfo("border-top-left-radius")}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="eval"><a href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax" title="/en-US/docs/CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("border-top-left-radius")}}
+-moz-border-radius-topleft: [ &lt;Länge&gt; | &lt;Prozentzahl&gt; ] [ &lt;Länge&gt; | &lt;Prozentzahl&gt; ]?
+     border-top-left-radius:[ &lt;Länge&gt; | &lt;Prozentzahl&gt; ] [ &lt;Länge&gt; | &lt;Prozentzahl&gt; ]?
+</pre>
+
+<h2 id="Werte">Werte</h2>
+
+<p>Seit Gecko 1.9.1 (Firefox 3.5) wird ein zweiter, optionaler Wert unterstützt, welcher Längenwerte für elliptische Ecken akzeptiert. Es gibt zwei Werte, die die Form der Ecke beschreiben: Der erste Wert ist der horizontale, der zweite Wert der vertikale Radius. Wird nur ein Wert angegeben, gilt dieser für beide Richtungen (horizontal und vertikal).</p>
+
+<dl>
+ <dt>&lt;Länge&gt;</dt>
+ <dd>Siehe <a href="/de/CSS/Einheiten#L.c3.a4ngen" title="de/CSS/Einheiten#L.c3.a4ngen">Längen</a> für mögliche Einheiten.</dd>
+ <dt>&lt;Prozentzahl&gt;</dt>
+ <dd>In Gecko 2.0 (Firefox 4.0):<br>
+ Prozentuale Angaben für den horizontalen Radius beziehen sich auf die Breite der Box. Die Prozentzahl für den vertikalen Radius ist allerdings relativ zur Höhe der Box.<br>
+ In vorherigen Gecko- &amp; Firefox-Versionen:<br>
+ {{ non-standard_inline() }} Eine prozentuale Angabe, die sich auf die Breite der Box bezieht. Die Prozentzahl ist selbst dann relativ zur Breite, wenn ein Radius für die Höhe festgelegt wird.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre>div { -moz-border-radius-topleft:  20px;  /* Firefox bis Version 3.6 */
+   -webkit-border-top-left-radius: 20px;  /* Safari, Chrome (vor WebKit Version 533) */
+           border-top-left-radius: 20px;  /* Firefox 4; Browser mit CSS3 Unterstützung */
+}
+</pre>
+
+<pre>/* Elliptische Ecke (unterstützt seit Firefox 3.5 [Gecko 1.9.1]) */
+
+div { -moz-border-radius-topleft:   20px;       /* Runde Ecke, Fallback für Firefox 1-3.0 */
+      -moz-border-radius-topleft:   20px 10px;  /* elliptischer Rahmen für Firefox 3.5-3.6 */
+    -webkit-border-top-left-radius: 20px 10px;  /* Safari, Chrome (vor WebKit Version 532.5) */
+            border-top-left-radius: 20px 10px;  /* Firefox 4; Browser mit CSS3 Unterstützung */
+}
+</pre>
+
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#border-top-left-radius', 'border-top-left-radius')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{Compat("css.properties.border-top-left-radius")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/CSS/border-radius" title="de/CSS/border-radius"><code>border-radius</code></a></li>
+</ul>
+
+<p>{{ languages( { "en": "en/CSS/border-top-left-radius", "fr": "fr/CSS/border-top-left-radius", "ja": "ja/CSS/border-top-left-radius", "pl": "pl/CSS/-moz-border-radius-topleft" } ) }}</p>
diff --git a/files/de/web/css/border-top-right-radius/index.html b/files/de/web/css/border-top-right-radius/index.html
new file mode 100644
index 0000000000..dd04ae2d87
--- /dev/null
+++ b/files/de/web/css/border-top-right-radius/index.html
@@ -0,0 +1,47 @@
+---
+title: border-top-right-radius
+slug: Web/CSS/border-top-right-radius
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/border-top-right-radius
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die CSS Eingenschaft <code>border-top-right-radius</code> legt die Abrundung der oberen rechten Ecke eines Elements fest. Vor Gecko 2.0 (Firefox 4) war diese Eigenschaft unter dem Namen <code>-moz-border-radius-topright</code> bekannt.</p>
+
+<p>Weitere Informationen sind unter <a href="/de/CSS/border-top-left-radius" title="de/CSS/border-top-left-radius"><code>border-top-left-radius</code></a> verfügbar.</p>
+
+<p>{{cssinfo("border-top-right-radius")}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="twopartsyntaxbox language-html"><a href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax" title="/en-US/docs/CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("border-top-right-radius")}} </pre>
+
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#border-top-right-radius', 'border-top-right-radius')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{Compat("css.properties.border-top-right-radius")}}</p>
diff --git a/files/de/web/css/border-top-style/index.html b/files/de/web/css/border-top-style/index.html
new file mode 100644
index 0000000000..10fbe13a5b
--- /dev/null
+++ b/files/de/web/css/border-top-style/index.html
@@ -0,0 +1,120 @@
+---
+title: border-top-style
+slug: Web/CSS/border-top-style
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/border-top-style
+---
+<p>{{ CSSRef() }}</p>
+<h2 id="Übersicht">Übersicht</h2>
+<p>Die <code>border-top-style</code> Eigenschaft legt die Rahmenart des oberen Rahmens fest.</p>
+<ul>
+ <li>Standardwert: <code>none</code></li>
+ <li>Anwendbar auf: Alle Elemente</li>
+ <li>Vererbbar: Nein</li>
+ <li>Prozentwerte: Nein</li>
+ <li>Medium: visuell</li>
+ <li>berechneter Wert: wie festgelegt</li>
+</ul>
+<h2 id="Syntax">Syntax</h2>
+<pre class="eval">border-top-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
+</pre>
+<h2 id="Werte">Werte</h2>
+<dl>
+ <dt>
+  none</dt>
+ <dd>
+  Standardwert. Es wird kein oberer Rahmen gezeichnet und die Breite wird auf '0' zurückgesetzt.</dd>
+ <dt>
+  hidden</dt>
+ <dd>
+  Genau wie bei <code>none</code> wird kein Rahmen angezeigt. Das Verhalten unterscheidet sich jedoch beim "Collapsing Border Model" innerhalb von Tabellen.<br>
+  Wenn <a href="/de/CSS/border-collapse" title="de/CSS/border-collapse"><code>border-collapse: collapse</code></a> gesetzt wurde, wird auch an den angrenzenden Nachbarzellen kein Rahmen dargestellt.</dd>
+ <dt>
+  dotted</dt>
+ <dd>
+  Punktierte Linie.</dd>
+ <dt>
+  dashed</dt>
+ <dd>
+  Gestrichelte Linie.</dd>
+ <dt>
+  solid</dt>
+ <dd>
+  Durchgehende Linie.</dd>
+ <dt>
+  double</dt>
+ <dd>
+  Zwei durchgehende Linien mit Zwischenraum. Die zwei Linien und der Zwischenraum sind jeweils ein Drittel der <a href="/De/CSS/Border-top-width" title="De/CSS/Border-top-width"><code>border-top-width</code></a> Angabe groß.</dd>
+ <dt>
+  groove</dt>
+ <dd>
+  Der Rahmen wirkt eingekerbt (3D-Effekt).</dd>
+ <dt>
+  ridge</dt>
+ <dd>
+  Der Rahmen wirkt wie eine Kante (3D-Effekt).</dd>
+ <dt>
+  inset</dt>
+ <dd>
+  Durch den Rahmen wirkt das ganze Element eingetieft (3D-Effekt).</dd>
+ <dt>
+  outset</dt>
+ <dd>
+  Durch den Rahmen wirkt das ganze Element herausgehoben (3D-Effekt).</dd>
+ <dt>
+  inherit</dt>
+ <dd>
+  Der Wert des Elternelements wird geerbt.</dd>
+</dl>
+<h2 id="Beispiele">Beispiele</h2>
+<pre>.beispielEins {
+  border-top-style: dashed;      /* gestrichelt */
+}
+
+.beispielZwei {
+  border-top-style: groove;      /* Einkerbung */
+}
+
+.beispielDrei {
+ border-top-style: hidden;       /* Collapsing Border Model */
+ border-collapse: collapse;
+}
+</pre>
+<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Browser</th>
+   <th>ab Version</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td>1.0 (1.0)</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>3.5</td>
+  </tr>
+  <tr>
+   <td>Safari (WebKit)</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Spezifikation">Spezifikation</h2>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-top-style" lang="en">CSS 3 Background and Borders #border-top-style</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-top-style" lang="en">CSS 2.1 Box #border-top-style</a></li>
+</ul>
+<h2 id="Siehe_auch">Siehe auch</h2>
+<ul>
+ <li><a href="/de/CSS/border-top" title="de/CSS/border-top"><code>border-top</code></a>, <a href="/de/CSS/border-top-color" title="de/CSS/border-top-color"><code>border-top-color</code></a>, <a href="/De/CSS/Border-top-width" title="De/CSS/Border-top-width"><code>border-top-width</code></a></li>
+ <li><a href="/de/CSS/border-style" title="de/CSS/border-style"><code>border-style</code></a>, <a href="/de/CSS/border-bottom-style" title="de/CSS/border-bottom-style"><code>border-bottom-style</code></a>, <a href="/de/CSS/border-left-style" title="de/CSS/border-left-style"><code>border-left-style</code></a>, <a href="/de/CSS/border-right-style" title="de/CSS/border-right-style"><code>border-right-style</code></a></li>
+</ul>
+<p>{{ languages( { "en": "en/CSS/border-top-style", "fr": "fr/CSS/border-top-style", "ja": "ja/CSS/border-top-style", "pl": "pl/CSS/border-top-style" } ) }}</p>
diff --git a/files/de/web/css/border-top-width/index.html b/files/de/web/css/border-top-width/index.html
new file mode 100644
index 0000000000..b740149b3c
--- /dev/null
+++ b/files/de/web/css/border-top-width/index.html
@@ -0,0 +1,90 @@
+---
+title: border-top-width
+slug: Web/CSS/Border-top-width
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/border-top-width
+---
+<p>{{ CSSRef() }}</p>
+<h2 id="Übersicht">Übersicht</h2>
+<p>Die <code>border-top-width</code> Eigenschaft legt die Breite des oberen Rahmens fest.</p>
+<ul>
+ <li>Standardwert: <code>medium</code></li>
+ <li>Anwendbar auf: Alle Elemente</li>
+ <li>Vererbbar: Nein</li>
+ <li>Prozentwerte: Nein</li>
+ <li>Medium: visuell</li>
+ <li>berechneter Wert: absolute Länge; <code>0</code> wenn <code>none</code> oder <code>hidden</code> festgelegt wurde</li>
+</ul>
+<h2 id="Syntax">Syntax</h2>
+<pre class="eval">border-top-width: &lt;Länge&gt; | thin | medium | thick | inherit
+</pre>
+<h2 id="Werte">Werte</h2>
+<dl>
+ <dt>
+  &lt;Länge&gt;</dt>
+ <dd>
+  Eine <a href="/de/CSS/Einheiten#L.c3.a4ngen" title="de/CSS/Einheiten#L.c3.a4ngen">Längenangabe</a> die, die Rahmenstärke explizit angibt. Es sind keine negativen Werte erlaubt.</dd>
+ <dt>
+  thin</dt>
+ <dd>
+  Eine dünne Rahmenlinie (1px).</dd>
+ <dt>
+  medium</dt>
+ <dd>
+  Standardwert. Eine mitteldicke Rahmenlinie (3px).</dd>
+ <dt>
+  thick</dt>
+ <dd>
+  Eine dicke Rahmenlinie (5px).</dd>
+ <dt>
+  inherit</dt>
+ <dd>
+  Der Wert des Elternelements wird geerbt.</dd>
+</dl>
+<h2 id="Beispiele">Beispiele</h2>
+<pre>.beispielEins {
+  border-top-width: 10px;
+}
+
+.beispielZwei {
+  border-top-width: thin;
+}
+</pre>
+<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Browser</th>
+   <th>ab Version</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td>1.0 (1.0)</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>3.5</td>
+  </tr>
+  <tr>
+   <td>Safari (WebKit)</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Spezifikation">Spezifikation</h2>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-top-width" lang="en">CSS 3 Background and Borders #border-top-width</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-top-width" lang="en">CSS 2.1 Box #border-top-width</a></li>
+</ul>
+<h2 id="Siehe_auch">Siehe auch</h2>
+<ul>
+ <li><a href="/de/CSS/border-top" title="de/CSS/border-top"><code>border-top</code></a>, <a href="/de/CSS/border-top-color" title="de/CSS/border-top-color"><code>border-top-color</code></a>, <a href="/de/CSS/border-top-style" title="de/CSS/border-top-style"><code>border-top-style</code></a></li>
+ <li><a href="/de/CSS/border-width" title="de/CSS/border-width"><code>border-width</code></a>, <a href="/De/CSS/Border-bottom-width" title="De/CSS/Border-bottom-width"><code>border-bottom-width</code></a>, <a href="/De/CSS/Border-left-width" title="De/CSS/Border-left-width"><code>border-left-width</code></a>, <a href="/De/CSS/Border-right-width" title="De/CSS/Border-right-width"><code>border-right-width</code></a></li>
+</ul>
+<p>{{ languages( { "en": "en/CSS/border-top-width", "fr": "fr/CSS/border-top-width", "ja": "ja/CSS/border-top-width", "pl": "pl/CSS/border-top-width" } ) }}</p>
diff --git a/files/de/web/css/border-top/index.html b/files/de/web/css/border-top/index.html
new file mode 100644
index 0000000000..4724a57ad7
--- /dev/null
+++ b/files/de/web/css/border-top/index.html
@@ -0,0 +1,98 @@
+---
+title: border-top
+slug: Web/CSS/border-top
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/border-top
+---
+<p>{{ CSSRef() }}</p>
+<h2 id="Übersicht">Übersicht:</h2>
+<p>Die <code>border-top</code> Eigenschaft legt den oberen Rahmen eines Elementes fest und ist eine Kurzform für<br>
+ <a href="/de/CSS/border-top-color" title="de/CSS/border-top-color"><code>border-top-color</code></a>, <a href="/de/CSS/border-top-style" title="de/CSS/border-top-style"><code>border-top-style</code></a> und <a href="/De/CSS/Border-top-width" title="De/CSS/Border-top-width"><code>border-top-width</code></a>. Die Werte der drei Eigenschaften können in beliebiger Reihenfolge angegeben werden.</p>
+<ul>
+ <li>Standardwert: siehe einzelne Eigenschaften</li>
+ <li>Anwendbar auf: Alle Elemente</li>
+ <li>Vererbbar: Nein</li>
+ <li>Prozentwerte: Nein</li>
+ <li>Medium: visuell</li>
+ <li>berechneter Wert: siehe einzelne Eigenschaften</li>
+</ul>
+<h2 id="Syntax">Syntax</h2>
+<pre class="eval">border-top: [ &lt;Rahmenbreite&gt; || &lt;Rahmenstil&gt; || &lt;Rahmenfarbe&gt; ] | inherit
+</pre>
+<h2 id="Werte">Werte</h2>
+<dl>
+ <dt>
+  &lt;Rahmenbreite&gt;</dt>
+ <dd>
+  Optional. Wenn nichts festgelegt ist, wird <code>medium</code> verwendet. Siehe: <a href="/De/CSS/Border-top-width" title="De/CSS/Border-top-width"><code>border-top-width</code></a>.</dd>
+ <dt>
+  &lt;Rahmenstil&gt;</dt>
+ <dd>
+  Erforderlich. Wenn nichts festgelegt ist, wird <code>none</code> verwendet. Siehe: <a href="/de/CSS/border-top-style" title="de/CSS/border-top-style"><code>border-top-style</code></a>.</dd>
+ <dt>
+  &lt;Rahmenfarbe&gt;</dt>
+ <dd>
+  Optional. Wenn nichts festgelegt ist, wird der Wert der <code>color</code> Eigenschaft des Elements genommen. Siehe: <a href="/de/CSS/border-top-color" title="de/CSS/border-top-color"><code>border-top-color</code></a>.</dd>
+ <dt>
+  inherit</dt>
+ <dd>
+  Der Wert des Elternelements wird geerbt.</dd>
+</dl>
+<h2 id="Beispiele">Beispiele</h2>
+<pre>.beispielEins {
+  border-top: 1px solid #000;
+}
+
+.beispielZwei {
+  border-top-style: dotted;
+  border-top: thick green;
+
+  /* Bedeutet das gleiche wie: */
+
+  border-top-style: dotted;
+  border-top: none thick green;
+
+  /* border-top-style wird nach Angabe von border-top ignoriert.
+  Es wird kein oberer Rahmen gezeichnet. */
+}
+</pre>
+<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Browser</th>
+   <th>ab Version</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td>1.0 (1.0)</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>3.5</td>
+  </tr>
+  <tr>
+   <td>Safari (WebKit)</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Spezifikation">Spezifikation</h2>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-top" lang="en">CSS 3 Background and Borders #border-top</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-top" lang="en">CSS 2.1 Box #border-top</a></li>
+</ul>
+<h2 id="Siehe_auch">Siehe auch</h2>
+<ul>
+ <li><a href="/de/CSS/border-top-color" title="de/CSS/border-top-color"><code>border-top-color</code></a>, <a href="/de/CSS/border-top-style" title="de/CSS/border-top-style"><code>border-top-style</code></a>, <a href="/De/CSS/Border-top-width" title="De/CSS/Border-top-width"><code>border-top-width</code></a></li>
+ <li><a href="/de/CSS/border-bottom" title="de/CSS/border-bottom"><code>border-bottom</code></a>, <a href="/de/CSS/border-left" title="de/CSS/border-left"><code>border-left</code></a>, <a href="/de/CSS/border-right" title="de/CSS/border-right"><code>border-right</code></a></li>
+ <li><a href="/de/CSS/-moz-border-top-colors" title="de/CSS/-moz-border-top-colors"><code>-moz-border-top-colors</code></a></li>
+ <li><a href="/de/CSS/-moz-border-image" title="de/CSS/-moz-border-image"><code>-moz-border-image</code></a>, <a href="/de/CSS/border-radius" title="de/CSS/-moz-border-radius"><code>-moz-border-radius</code></a></li>
+</ul>
+<p>{{ languages( { "en": "en/CSS/border-top", "fr": "fr/CSS/border-top", "ja": "ja/CSS/border-top", "pl": "pl/CSS/border-top" } ) }}</p>
diff --git a/files/de/web/css/border-width/index.html b/files/de/web/css/border-width/index.html
new file mode 100644
index 0000000000..fe0e129bfa
--- /dev/null
+++ b/files/de/web/css/border-width/index.html
@@ -0,0 +1,118 @@
+---
+title: border-width
+slug: Web/CSS/border-width
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/border-width
+---
+<p>{{ CSSRef() }}</p>
+<h2 id="Übersicht">Übersicht</h2>
+<p>Die <code>border-width</code> Eigenschaft legt die Breite des oberen, rechten, unteren und linken Rahmens fest.</p>
+<ul>
+ <li>Standardwert: <code>medium</code></li>
+ <li>Anwendbar auf: Alle Elemente</li>
+ <li>Vererbbar: Nein</li>
+ <li>Prozentwerte: Nein</li>
+ <li>Medium: visuell</li>
+ <li>berechneter Wert: absolute Länge; <code>0</code> wenn <code>none</code> oder <code>hidden</code> festgelegt wurde</li>
+</ul>
+<h2 id="Syntax">Syntax</h2>
+<pre class="eval">border-width:  [&lt;Länge&gt; | thin | medium | thick] {1,4} | inherit
+</pre>
+<h2 id="Werte">Werte</h2>
+<dl>
+ <dt>
+  &lt;Länge&gt;</dt>
+ <dd>
+  Eine <a href="/de/CSS/Einheiten#L.c3.a4ngen" title="de/CSS/Einheiten#L.c3.a4ngen">Längenangabe</a> die, die Rahmenstärke explizit angibt. Es sind keine negativen Werte erlaubt.</dd>
+ <dt>
+  thin</dt>
+ <dd>
+  Eine dünne Rahmenlinie (1px; IE 4-7: 2px).</dd>
+ <dt>
+  medium</dt>
+ <dd>
+  Standardwert. Eine mitteldicke Rahmenlinie (3px; IE 4-7: 4px).</dd>
+ <dt>
+  thick</dt>
+ <dd>
+  Eine dicke Rahmenlinie (5px; IE 4-7: 6px).</dd>
+ <dt>
+  inherit</dt>
+ <dd>
+  Der Wert des Elternelements wird geerbt.</dd>
+ <dt>
+  Ein Wert</dt>
+ <dd>
+  Gilt für alle vier Seiten: <a href="/de/CSS/border-top-width" rel="internal">border-top-width</a>, <a href="/de/CSS/border-right-width" rel="internal">border-right-width</a>, <a href="/de/CSS/border-bottom-width" rel="internal">border-bottom-width</a> und <a href="/de/CSS/border-left-width" rel="internal">border-left-width</a>.</dd>
+ <dt>
+  Zwei Werte</dt>
+ <dd>
+  Der erste Wert gilt für <a href="/de/CSS/border-top-width" rel="internal">border-top-width</a> und <a href="/de/CSS/border-bottom-width" rel="internal">border-bottom-width</a>, der zweite Wert für <a href="/de/CSS/border-right-width" rel="internal">border-right-width</a> und <a href="/de/CSS/border-left-width" rel="internal">border-left-width</a>.</dd>
+ <dt>
+  Drei Werte</dt>
+ <dd>
+  Der erste Wert gilt für <a href="/de/CSS/border-top-width" rel="internal">border-top-width</a>, der zweite Wert für <a href="/de/CSS/border-right-width" rel="internal">border-right-width</a> und <a href="/de/CSS/border-left-width" rel="internal">border-left-width</a> und der dritte Wert für <a href="/de/CSS/border-bottom-width" rel="internal">border-bottom-width</a>.</dd>
+ <dt>
+  Vier Werte</dt>
+ <dd>
+  Der erste Wert gilt für <a href="/de/CSS/border-top-width" rel="internal">border-top-width</a>, der zweite Wert für <a href="/de/CSS/border-right-width" rel="internal">border-right-width</a>, der dritte Wert für <a href="/de/CSS/border-bottom-width" rel="internal">border-bottom-width</a> und der vierte Wert für <a href="/de/CSS/border-left-width" rel="internal">border-left-width</a>.</dd>
+</dl>
+<h2 id="Beispiele">Beispiele</h2>
+<pre style="border: solid #ccc; border-width: 3px;">.beispielEins {
+  border: solid #ccc;
+  border-width: 3px;
+}
+</pre>
+<pre style="border: solid #ccc; border-width: thin thick;">.beispielZwei {
+  border: solid #ccc;
+  border-width: thin thick;
+}
+</pre>
+<pre style="border: solid #ccc; border-width: thin thick 10px;">.beispielDrei {
+  border: solid #ccc;
+  border-width: thin thick 10px;
+}
+</pre>
+<pre style="border: solid #ccc; border-width: thin thick 10px 2em;">.beispielVier {
+  border: solid #ccc;
+  border-width: thin thick 10px 2em;
+}
+</pre>
+<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Browser</th>
+   <th>ab Version</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td>1.0 (1.0)</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>3.5</td>
+  </tr>
+  <tr>
+   <td>Safari (WebKit)</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Spezifikation">Spezifikation</h2>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-width" lang="en">CSS 3 Background and Borders #border-width</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-width" lang="en">CSS 2.1 Box #border-width</a></li>
+</ul>
+<h2 id="Siehe_auch">Siehe auch</h2>
+<ul>
+ <li><a href="/de/CSS/border" title="de/CSS/border"><code>border</code></a></li>
+ <li><a href="/De/CSS/Border-bottom-width" title="De/CSS/Border-bottom-width"><code>border-bottom-width</code></a>, <a href="/De/CSS/Border-left-width" title="De/CSS/Border-left-width"><code>border-left-width</code></a>, <a href="/De/CSS/Border-right-width" title="De/CSS/Border-right-width"><code>border-right-width</code></a>, <a href="/De/CSS/Border-top-width" title="De/CSS/Border-top-width"><code>border-top-width</code></a></li>
+</ul>
+<p>{{ languages( { "en": "en/CSS/border-width", "fr": "fr/CSS/border-width", "ja": "ja/CSS/border-width", "pl": "pl/CSS/border-width", "es": "es/CSS/border-width" } ) }}</p>
diff --git a/files/de/web/css/border/index.html b/files/de/web/css/border/index.html
new file mode 100644
index 0000000000..ffcf4c2631
--- /dev/null
+++ b/files/de/web/css/border/index.html
@@ -0,0 +1,99 @@
+---
+title: border
+slug: Web/CSS/border
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Rahmen
+  - Layout
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+  - Web
+translation_of: Web/CSS/border
+---
+<div>{{CSSRef("CSS Borders")}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>border</code> Eigenschaft legt den kompletten Rahmen eines Elementes fest und ist eine Kurzform für<br>
+ <a href="/de/CSS/border-color" title="de/CSS/border-color"><code>border-color</code></a>, <a href="/de/CSS/border-style" title="de/CSS/border-style"><code>border-style</code></a> und <a href="/de/CSS/border-width" title="de/CSS/border-width"><code>border-width</code></a>. Die Werte der drei Eigenschaften können in beliebiger Reihenfolge angegeben werden.<br>
+ Unterschiedliche Einstellungen für den oberen, unteren, linken und rechten Rahmen können nur unter den Kurzformen<br>
+ <a href="/de/CSS/border-bottom" title="de/CSS/border-bottom"><code>border-bottom</code></a>, <a href="/de/CSS/border-top" title="de/CSS/border-top"><code>border-top</code></a>, <a href="/de/CSS/border-left" title="de/CSS/border-left"><code>border-left</code></a> und <a href="/de/CSS/border-right" title="de/CSS/border-right"><code>border-right</code></a> festgelegt werden.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="eval">border: <code>1px;</code>
+border: 2px dotted;
+border: medium dashed green;</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt>&lt;Rahmenbreite&gt;</dt>
+ <dd>Optional. Wenn nichts festgelegt ist, wird <code>medium</code> verwendet. Siehe: <a href="/de/CSS/border-width" title="de/CSS/border-width"><code>border-width</code></a>.</dd>
+ <dt>&lt;Rahmenstil&gt;</dt>
+ <dd>Erforderlich. Wenn nichts festgelegt ist, wird <code>none</code> verwendet. Siehe: <a href="/de/CSS/border-style" title="de/CSS/border-style"><code>border-style</code></a>.</dd>
+ <dt>&lt;Rahmenfarbe&gt;</dt>
+ <dd>Optional. Wenn nichts festgelegt ist, wird der Wert der <code>color</code> Eigenschaft des Elements genommen. Siehe: <a href="/de/CSS/border-color" title="de/CSS/border-color"><code>border-color</code></a>.</dd>
+ <dt>inherit</dt>
+ <dd>Der Wert des Elternelements wird geerbt.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p><a class="external" href="/samples/cssref/border.html" rel="external nofollow">Live Beispiel</a></p>
+
+<pre>  border: dashed;           /* gestrichelter Rahmen mit mittlerer Breite und gleicher Farbe wie der Text */
+  border: dotted 1.5em;     /* gestrichelt, 1.5em breit, gleiche Farbe wie der Text */
+  border: solid red;        /* durchgezogener, roter Rahmen mit mittelgroßer Breite */
+  border: solid blue 10px;  /* durchgezogene Linie, blaue Farbe, 10px Breite */
+</pre>
+
+<h2 id="Specifications" name="Specifications">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Argument</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-border-shorthands', 'border')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Technically removes the support for <code>transparent</code> as it is now a valid {{cssxref("&lt;color&gt;")}}; this has no practical influence.<br>
+    Though it cannot be set to another value using the shorthand, <code>border</code> does now reset {{cssxref("border-image")}} to its initial value (<code>none</code>).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-shorthand-properties', 'border')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Accepts the <code>inherit</code> keyword. Also accepts <code>transparent</code> as a valid color.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border', 'border')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.border")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/CSS/border-color" title="de/CSS/border-color"><code>border-color</code></a>, <a href="/de/CSS/border-style" title="de/CSS/border-style"><code>border-style</code></a>, <a href="/de/CSS/border-width" title="de/CSS/border-width"><code>border-width</code></a></li>
+ <li><a href="/de/CSS/border-bottom" title="de/CSS/border-bottom"><code>border-bottom</code></a>, <a href="/de/CSS/border-top" title="de/CSS/border-top"><code>border-top</code></a>, <a href="/de/CSS/border-left" title="de/CSS/border-left"><code>border-left</code></a>, <a href="/de/CSS/border-right" title="de/CSS/border-right"><code>border-right</code></a></li>
+ <li><a href="/de/CSS/-moz-border-bottom-colors" title="de/CSS/-moz-border-bottom-colors"><code>-moz-border-bottom-colors</code></a>, <a href="/de/CSS/-moz-border-top-colors" title="de/CSS/-moz-border-top-colors"><code>-moz-border-top-colors</code></a>, <a href="/de/CSS/-moz-border-left-colors" title="de/CSS/-moz-border-left-colors"><code>-moz-border-left-colors</code></a>, <a href="/de/CSS/-moz-border-right-colors" title="de/CSS/-moz-border-right-colors"><code>-moz-border-right-colors</code></a>,</li>
+ <li><a href="/de/CSS/-moz-border-image" title="de/CSS/-moz-border-image"><code>-moz-border-image</code></a>, <a href="/de/CSS/border-radius" title="de/CSS/-moz-border-radius"><code>-moz-border-radius</code></a></li>
+</ul>
diff --git a/files/de/web/css/bottom/index.html b/files/de/web/css/bottom/index.html
new file mode 100644
index 0000000000..5f9ed69a02
--- /dev/null
+++ b/files/de/web/css/bottom/index.html
@@ -0,0 +1,74 @@
+---
+title: bottom
+slug: Web/CSS/Bottom
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/bottom
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>bottom</code> Eigenschaft macht eine Angabe zur Position von Elementen und wird daher zusammen mit der <a href="/de/CSS/position" title="de/CSS/position"><code>position</code></a> Eigenschaft notiert, wenn für die Positionsart der Wert <code>absolute</code>, <code>fixed</code> oder <code>relative</code> definiert wurde.</p>
+
+<p>Bei absolut positionierten Elementen (<code>position: absolute</code> oder <code>position: fixed</code>) wird der Abstand zwischen der unteren, äußeren Kante (<em>margin edge</em>) des Elements und der unteren Kante des umschließenden Blocks definiert.</p>
+
+<p>Bei relativ positionierten Elementen (<code>position: relative</code>) wird das Element aus seiner normalen Position im Elementfluss verschoben. Dabei gilt: Wenn die <a href="/De/CSS/Top" title="De/CSS/Top"><code>top</code></a> Eigenschaft definiert wurde, überschreibt diese den Wert der <code>bottom</code> Eigenschaft. Wenn <a href="/De/CSS/Top" title="De/CSS/Top"><code>top</code></a> den Wert <code>auto</code> besitzt, ist der berechnete Wert für <code>bottom</code> gleich dem Wert der <a href="/De/CSS/Top" title="De/CSS/Top"><code>top</code></a> Eigenschaft mit umgedrehtem Vorzeichen.<br>
+ Wenn beide Eigenschaften nicht den Wert <code>auto</code> besitzen, wird <code>bottom</code> ignoriert und auf <code>auto</code> gesetzt.</p>
+
+<ul>
+ <li>Standardwert: <code>auto</code></li>
+ <li>Anwendbar auf: <a href="/de/CSS/position" title="de/CSS/position">positionierte Elemente</a></li>
+ <li>Vererbbar: Nein</li>
+ <li>Prozentwerte: Beziehen sich auf die Höhe des umschließenden Blocks</li>
+ <li>Medium: visuell</li>
+ <li>berechneter Wert: absolute Länge, Prozentwert oder <code>auto</code></li>
+</ul>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="eval">bottom: &lt;Länge&gt; | &lt;Prozentzahl&gt; | auto | inherit
+</pre>
+
+<h2 id="Werte">Werte</h2>
+
+<dl>
+ <dt>&lt;Länge&gt;</dt>
+ <dd>Eine <a href="/de/CSS/Einheiten#L.c3.a4ngen">Längenangabe</a>, die positive und negative Werte sowie Null erlaubt.</dd>
+ <dt>&lt;Prozentzahl&gt;</dt>
+ <dd>Eine <a href="/de/CSS/Einheiten#Prozent">prozentuale Angabe</a>, die sich auf den umschließenden Block bezieht. Die Prozentangabe kann nur berücksichtigt werden, wenn die Höhe des umschließenden Blocks festgelegt wurde, andernfalls wird die definierte Prozentzahl wie <code>auto</code> behandelt.</dd>
+ <dt>auto</dt>
+ <dd>Standardwert. Die vertikale Position des Elementes wird nicht weiter beeinflusst, es sei denn durch <a href="/De/CSS/Top" title="De/CSS/Top"><code>top</code></a>, <a href="/de/CSS/margin" title="de/CSS/margin"><code>margin</code></a>, <a href="/de/CSS/padding" title="de/CSS/padding"><code>padding</code></a> oder durch die <a href="/de/CSS/height" title="de/CSS/height">Höhe</a>.</dd>
+ <dt>inherit</dt>
+ <dd>Der Wert des Elternelements wird geerbt.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre>element {
+    position: absolute;
+    bottom: 20px;
+    height: 200px;
+    border: 1px solid #000;
+}
+</pre>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.bottom")}}
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom" lang="en">CSS 2.1 Visual formatting model #bottom</a></li>
+</ul>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/CSS/position" title="de/CSS/position"><code>position</code></a></li>
+ <li><a href="/De/CSS/Top" title="De/CSS/Top"><code>top</code></a>, <a href="/De/CSS/Left" title="De/CSS/Left"><code>left</code></a>, <a href="/De/CSS/Right" title="De/CSS/Right"><code>right</code></a></li>
+</ul>
+
+<p>{{ languages( { "en": "en/CSS/bottom", "fr": "fr/CSS/bottom", "pl": "pl/CSS/bottom", "es": "es/CSS/bottom" } ) }}</p>
diff --git a/files/de/web/css/box-decoration-break/index.html b/files/de/web/css/box-decoration-break/index.html
new file mode 100644
index 0000000000..d1f0261fc2
--- /dev/null
+++ b/files/de/web/css/box-decoration-break/index.html
@@ -0,0 +1,136 @@
+---
+title: box-decoration-break
+slug: Web/CSS/box-decoration-break
+tags:
+  - CSS
+  - CSS Fragmentation
+  - CSS Property
+  - Experimental
+  - Reference
+translation_of: Web/CSS/box-decoration-break
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>The <strong><code>box-decoration-break</code></strong> CSS property specifies how the {{ Cssxref("background") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, {{ Cssxref("border-image") }}, {{ Cssxref("box-shadow") }}, {{ Cssxref("margin") }} and {{ Cssxref("clip") }} of an element is applied when the box for the element is fragmented.  Fragmentation occurs when an inline box wraps onto multiple lines, or when a block spans more than one column inside a column layout container, or spans a page break when printed.  Each piece of the rendering for the element is called a fragment.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">box-decoration-break: slice;
+box-decoration-break: clone;
+
+box-decoration-break: initial;
+box-decoration-break: inherit;
+box-decoration-break: unset;
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>slice</code></dt>
+ <dd>The element is rendered as if its box were not fragmented, and then the rendering for this hypothetical box is sliced into pieces for each line/column/page. Note that the hypothetical box can be different for each fragment since it uses its own height if the break occurs in the inline direction, and its own width if the break occurs in the block direction. See the CSS specification for details.</dd>
+ <dt><code>clone</code></dt>
+ <dd>Each box fragment is rendered independently with the specified border, padding and margin wrapping each fragment. The {{ Cssxref("border-radius") }}, {{ Cssxref("border-image") }} and {{ Cssxref("box-shadow") }}, are applied to each fragment independently. The background is drawn independently in each fragment which means that a background image with {{ Cssxref("background-repeat") }}: <code>no-repeat</code> may be repeated multiple times.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Inline_box_fragments">Inline box fragments</h3>
+
+<p>An inline element that contains line-breaks styled with:</p>
+
+<pre class="brush:css">.example {
+  background: linear-gradient(to bottom right, yellow, green);
+  box-shadow:
+    8px 8px 10px 0px deeppink,
+    -5px -5px 5px 0px blue,
+    5px 5px 15px 0px yellow;
+  padding: 0em 1em;
+  border-radius: 16px;
+  border-style: solid;
+  margin-left: 10px;
+  font: 24px sans-serif;
+  line-height: 2;
+}
+
+...
+&lt;span class="example"&gt;The&lt;br&gt;quick&lt;br&gt;orange fox&lt;/span&gt;</pre>
+
+<p>Results in:</p>
+
+<p><img alt="A screenshot of the rendering of an inline element styled with box-decoration-break:slice and styles given in the example." src="https://mdn.mozillademos.org/files/8167/box-decoration-break-inline-slice.png" style="height: 177px; width: 191px;"></p>
+
+<p>Adding <code>box-decoration-break:clone</code> to the above styles:</p>
+
+<pre class="brush:css">  -webkit-box-decoration-break: clone;
+  -o-box-decoration-break: clone;
+  box-decoration-break: clone;
+</pre>
+
+<p>Results in:</p>
+
+<p><img alt="A screenshot of the rendering of an inline element styled with box-decoration-break:clone and styles given in the example" src="https://mdn.mozillademos.org/files/8169/box-decoration-break-inline-clone.png" style="height: 180px; width: 231px;"></p>
+
+<p>You can <a href="https://mdn.mozillademos.org/files/8179/box-decoration-break-inline.html">try the two inline examples above</a> in your browser.</p>
+
+<p>Here's an example of an inline element using a large <code>border-radius</code> value. The second <code>"iM"</code> has a line-break between the <code>"i"</code> and the <code>"M"</code>. For comparison, the first <code>"iM"</code> is without line-breaks. Note that if you stack the rendering of the two fragments horizontally next to each other it will result in the non-fragmented rendering.</p>
+
+<p><img alt="A screenshot of the rendering of the second inline element example." src="https://mdn.mozillademos.org/files/8189/box-decoration-break-slice-inline-2.png" style="height: 184px; width: 108px;"></p>
+
+<p><a href="https://mdn.mozillademos.org/files/8191/box-decoration-break-inline-extreme.html">Try the above example</a> in your browser.</p>
+
+<h3 id="Block_box_fragments">Block box fragments</h3>
+
+<p>A block element with similar styles as above, first without any fragmentation:</p>
+
+<p><img alt="A screenshot of the rendering of the block element used in the examples without any fragmentation." src="https://mdn.mozillademos.org/files/8181/box-decoration-break-block.png" style="height: 149px; width: 333px;"></p>
+
+<p>Fragmenting the above block into three columns results in:</p>
+
+<p><img alt="A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:slice." src="https://mdn.mozillademos.org/files/8183/box-decoration-break-block-slice.png" style="height: 55px; max-width: none; width: 1025px;"></p>
+
+<p>Note that stacking these pieces vertically will result in the non-fragmented rendering.</p>
+
+<p>Now the same example styled with <code>box-decoration-break:clone</code></p>
+
+<p><img alt="A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:clone." src="https://mdn.mozillademos.org/files/8185/box-decoration-break-block-clone.png" style="height: 61px; max-width: none; width: 1023px;"></p>
+
+<p>Note here that each fragment has an identical replicated border, box-shadow and background.</p>
+
+<p>You can <a href="https://mdn.mozillademos.org/files/8187/box-decoration-break-block.html">try the block examples above</a> in your browser.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Fragmentation', '#break-decoration', 'box-decoration-break') }}</td>
+   <td>{{ Spec2('CSS3 Fragmentation') }}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+{{Compat("css.properties.box-decoration-break")}}
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a></li>
+</ul>
diff --git a/files/de/web/css/box-shadow/index.html b/files/de/web/css/box-shadow/index.html
new file mode 100644
index 0000000000..637e204327
--- /dev/null
+++ b/files/de/web/css/box-shadow/index.html
@@ -0,0 +1,107 @@
+---
+title: box-shadow
+slug: Web/CSS/box-shadow
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Hintergrund
+  - Referenz
+translation_of: Web/CSS/box-shadow
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p><span class="seoSummary">Die <a href="/de/docs/Web/CSS">CSS</a>-Eigenschaft <code>box-shadow </code>beschreibt einen oder mehrere Schatteneffekte als eine kommaseparierte Liste.</span> Sie erlaubt es, den Rahmen fast jedes Elements einen Schatten werfen zu lassen. Falls ein {{cssxref("border-radius")}} für das Element mit einem Schlagschatten angegeben ist, übernimmt der Schatten diese abgerundeten Ecken. Die z-Anordnung mehrerer Schlagschatten ist die gleiche wie bei mehreren <a href="/en-US/docs/Web/CSS/text-shadow">Textschatten</a> (der zuerst angegebene Schatten ist der oberste).</p>
+
+<p><a href="/de/docs/Web/CSS/CSS_Boxmodell/Box-shadow_Generator">Box-shadow-Generator</a> ist ein interaktives Werkzeug, das es erlaubt, einen Schlagschatten zu generieren.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css">/* offset-x | offset-y | color */
+box-shadow: 60px -16px teal;
+
+/* offset-x | offset-y | blur-radius | color */
+box-shadow: 10px 5px 5px black;
+
+/* offset-x | offset-y | blur-radius | spread-radius | color */
+box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
+
+/* inset | offset-x | offset-y | color */
+box-shadow: inset 5em 1em gold;
+
+/* Beliebige Anzahl an Schatten, durch Kommas getrennt */
+box-shadow: 3px 3px red, -1em 0 0.4em olive;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>inset</code></dt>
+ <dd>Falls nicht angegeben (Standardwert), wird angenommen, dass der Schatten ein Schlagschatten ist (als ob die Box über dem Inhalt schweben würde).<br>
+ Die Angabe des Schlüsselworts <code>inset </code>ändert den Schatten so, dass er innerhalb des Rahmens angezeigt wird (als ob der Inhalt innerhalb der Box nach innen gedrückt wäre). Innere Schatten werden innerhalb des Randes (sogar transparenten) gezeichnet, über dem Hintergrund aber unterhalb des Inhalts.</dd>
+ <dt><code>&lt;offset-x&gt;</code> <code>&lt;offset-y&gt;</code></dt>
+ <dd>Diese zwei {{cssxref("&lt;length&gt;")}}-Werte setzen den Schattenabstand. <code>&lt;offset-x&gt;</code> beschreibt die horizontale Distanz. Negative Werte platzieren den Schatten links des Elements. <code>&lt;offset-y&gt;</code> beschreibt die vertikale Distanz. Negative Werte platzieren den Schatten oberhalb des Elements. Siehe {{cssxref("&lt;length&gt;")}} für mögliche Einheiten.<br>
+ Falls beide Werte <code>0</code> sind, wird der Schatten hinter dem Element platziert (und können einen Unschärfeeffekt erzeugen, falls <code>&lt;blur-radius&gt;</code> und/oder <code>&lt;spread-radius&gt;</code> gesetzt sind).</dd>
+ <dt><code>&lt;blur-radius&gt;</code></dt>
+ <dd>Dies ist ein dritter {{cssxref("&lt;length&gt;")}}-Wert. Je größer dieser Wert ist, desto größer ist die Unschärfe, sodass der Schatten größer und schwächer wird. Negative Werte sind nicht erlaubt. Falls nicht angegeben, ist der Wert <code>0</code> (der Rand des Schattens wird scharf dargestellt).</dd>
+ <dt><code>&lt;spread-radius&gt;</code></dt>
+ <dd>Dies ist ein vierter {{cssxref("&lt;length&gt;")}}-Wert. Positive Werte erweitern den Schatten und machen ihn größer, negative Werte verkleinern den Schatten. Falls nicht angegeben, ist der Wert <code>0</code> (der Schatten hat die gleiche Größe wie das Element).</dd>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>Siehe {{cssxref("&lt;color&gt;")}}-Werte für mögliche Schlüsselwörter und Notationen.<br>
+ Falls nicht angegeben, hängt die Farbe vom Browser ab – sie ist normalerweise der Wert der {{cssxref("color")}}-Eigenschaft, aber Safari zeichnet in diesem Fall aktuell einen transparenten Schatten.</dd>
+</dl>
+
+<h3 id="Interpolation">Interpolation</h3>
+
+<p>Jeder Schatten innerhalb der Liste (<code>none</code> wird als eine leere Liste interpretiert) wird über die Farbkomponente (als Farbe) interpoliert und x-, y-, Unschärfe- und (falls zutreffend) Ausbreitungskomponenten (als Länge). Für jeden Schatten gilt, falls beide angegebenen Schatten <code>inset</code> sind oder nicht, muss der interpolierte Schatten diesbezüglich mit den angegebenen Schatten übereinstimmen. Falls ein Schatten eines beliebigen Paares von angegebenen Schatten <code>inset</code> ist und der andere nicht, ist die gesamte Schattenliste nicht interpolierbar. Falls die Listen von Schatten verschiedene Längen haben, wird die kürzere Liste mit Schatten aufgefüllt, deren Farbe <code>transparent</code> ist, alle Längen <code>0</code> und dessen <code>inset</code> (oder nicht) mit dem der längeren Liste übereinstimmt.</p>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Live-Beispiele">Live-Beispiele</h2>
+
+<ul>
+ <li><a href="http://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html">box-shadow-Test</a></li>
+ <li><a href="http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/">box-shadow-Tutorial und -Beispiele</a></li>
+</ul>
+
+<pre style="-moz-box-shadow: 60px -16px teal; -webkit-box-shadow: 60px -16px teal; box-shadow: 60px -16px teal; float: left; margin: 1em;">box-shadow: 60px -16px teal;</pre>
+
+<pre style="-moz-box-shadow: 10px 5px 5px black; -webkit-box-shadow: 10px 5px 5px black; box-shadow: 10px 5px 5px black; float: left; margin: 1em;">box-shadow: 10px 5px 5px black;</pre>
+
+<pre style="-moz-box-shadow: 3px 3px red, -1em 0pt 0.4em olive; -webkit-box-shadow: 3px 3px red, -1em 0 0.4em olive; box-shadow: 3px 3px red, -1em 0 0.4em olive; float: left; margin: 1em;">box-shadow: 3px 3px red, -1em 0 0.4em olive;</pre>
+
+<pre style="-moz-box-shadow: 5em 1em gold inset; -webkit-box-shadow: inset 5em 1em gold; box-shadow: inset 5em 1em gold; float: left; margin: 1em;">box-shadow: inset 5em 1em gold;</pre>
+
+<pre style="-moz-box-shadow: 0 0 1em gold; -webkit-box-shadow: 0 0 1em gold; box-shadow: 0 0 1em gold; float: left; margin: 1em;">box-shadow: 0 0 1em gold;</pre>
+
+<pre style="-moz-box-shadow: 0 0 1em gold inset; -webkit-box-shadow: inset 0 0 1em gold; box-shadow: inset 0 0 1em gold; float: left; margin: 1em;">box-shadow: inset 0 0 1em gold;</pre>
+
+<pre style="-moz-box-shadow: 0 0 1em gold inset, 0 0 1em red; -webkit-box-shadow: inset 0 0 1em gold, 0 0 1em red; box-shadow: inset 0 0 1em gold, 0 0 1em red; float: left; margin: 1em;">box-shadow: inset 0 0 1em gold, 0 0 1em red;</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#box-shadow', 'box-shadow')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+{{Compat("css.properties.box-shadow")}}
diff --git a/files/de/web/css/box-sizing/index.html b/files/de/web/css/box-sizing/index.html
new file mode 100644
index 0000000000..7c07a9c554
--- /dev/null
+++ b/files/de/web/css/box-sizing/index.html
@@ -0,0 +1,137 @@
+---
+title: box-sizing
+slug: Web/CSS/box-sizing
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - Experimentell
+  - Referenz
+translation_of: Web/CSS/box-sizing
+---
+<div>
+<p>{{CSSRef}}</p>
+
+<p><span class="seoSummary">Die <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> Eigenschaft <strong><code>box-sizing</code></strong> </span>legt fest, wie die Gesamtbreite und -höhe eines Elements berechnet wird.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/box-sizing.html")}}</div>
+
+<div class="hidden">Die Quelle für dieses interaktive Beispiel ist in einem GitHub-Repository gespeichert. Wenn Sie zum Projekt der interaktiven Beispiele beitragen möchten, klonen Sie bitte <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und senden Sie uns eine Pull-Anfrage.</div>
+
+<p>Im <a href="/de/docs/Web/CSS/CSS_Boxmodell/Einführung_in_das_CSS_Boxmodell">CSS box model</a> wird die Breite <code>width</code> und die Höhe <code>height</code>, die Sie einem Element zuweisen, standardmäßig nur auf die Inhaltsbox des Elements angewendet. Wenn das Element über einen Rahmen <code>border</code> oder Innenabstände <code>padding</code> verfügt, wird diese zu der Breite <code>width</code> und Höhe <code>height</code> hinzugefügt, um die Größe der Box zu erreichen, die auf dem Bildschirm angezeigt wird. Das bedeutet, dass Sie bei der Einstellung von Breite <code>width</code> und Höhe <code>height</code> den Wert anpassen müssen, um einen eventuell hinzugefügten Rahmen oder Auffüllen zu berücksichtigen. Wenn Sie z.B. vier Boxen mit einer Breite <code>width: 25%;</code> haben, wenn eine davon einen linken oder rechten Rand oder einen linken oder rechten Rand hat, passen sie standardmäßig nicht auf eine Zeile innerhalb der Beschränkungen des Elterncontainers.</p>
+
+<p>Die <code>box-sizing</code> Eigenschaft kann verwendet werden, um dieses Verhalten anzupassen:</p>
+
+<ul>
+ <li><code>content-box</code> gibt Ihnen das standardmäßige CSS-Box-Größenverhalten. Wenn Sie die Breite eines Elements auf 100 Pixel setzen, dann wird die Inhaltsbox des Elements 100 Pixel breit sein, und die Breite von Rahmen oder Auffüllungen wird zur endgültigen gerenderten Breite hinzugefügt, wodurch das Element breiter als 100px wird.</li>
+ <li><code>border-box</code>
+  <p>weist den Browser an, bei den Werten, die Sie für die Breite und Höhe eines Elements angeben, alle Ränder und Auffüllungen zu berücksichtigen. Wenn Sie die Breite eines Elements auf 100 Pixel festlegen, werden diese 100 Pixel alle von Ihnen hinzugefügten Ränder oder Füllungen enthalten, und das Inhaltsfeld wird verkleinert, um diese zusätzliche Breite zu absorbieren. Dadurch wird die Größenanpassung von Elementen normalerweise viel einfacher.</p>
+ </li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Hinweis:</strong> Es ist oft nützlich, bei Layoutelementen die <code>box-sizing</code> auf <code>border-box</code> zu setzen. Dies erleichtert den Umgang mit der Größe von Elementen erheblich und eliminiert im Allgemeinen eine Reihe von Fallstricken, auf die Sie beim Layouten Ihres Inhalts stoßen können.  Bei der Verwendung von <code>position: relative</code> oder <code>position: absolute</code> und der Nutzung von <code>box-sizing: content-box</code> können die Positionswerte relativ zum Inhalt und unabhängig von Änderungen der Rahmen- und Füllungsgrößen eingestellt werden, was manchmal wünschenswert ist.</p>
+</div>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<p>Das <code>box-sizing</code> Eigenschaft wird als ein einzelnes Schlüsselwort angegeben, das aus der untenstehenden Liste von Werten ausgewählt wird.</p>
+
+<pre class="brush:css notranslate">/* Schlüsselwortwerte */
+box-sizing: content-box;
+box-sizing: border-box;
+
+/* Globale Werte */
+box-sizing: inherit;
+box-sizing: initial;
+box-sizing: unset;
+</pre>
+
+<h3 id="Values" name="Values">Werte</h3>
+
+<dl>
+ <dt><code>content-box</code></dt>
+ <dd>Dies ist der Standard-Stil, der vom CSS Standard definiert wurde. Die Werte {{Cssxref("width")}} und {{Cssxref("height")}} berechnen sich nur aus dem Inhalt des Elementes und enthalten weder <code>border</code>, <code>margin</code> oder <code>padding</code>.</dd>
+ <dt><code>border-box</code></dt>
+ <dd>Die Werte {{Cssxref("width")}} und {{Cssxref("height")}} enthalten <code>padding</code> und <code>border</code>, aber nicht <code>margin</code>. Das ist das <a href="/de/docs/Web/CSS/Boxmodell" title="CSS/Box_model">Boxmodell</a>, das der Internet Explorer im Quirks mode verwendet.</dd>
+</dl>
+
+<h2 id="Formale_Definition">Formale Definition</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax">Formal syntax</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Box_sizes_with_content-box_and_border-box" name="Box_sizes_with_content-box_and_border-box">Box sizes mit content-box und border-box</h3>
+
+<p>Dieses Beispiel zeigt, wie unterschiedliche <code>box-sizing</code> Werte die gerenderte Größe von zwei ansonsten identischen Elementen verändern.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="content-box"&gt;Content box&lt;/div&gt;
+&lt;br&gt;
+&lt;div class="border-box"&gt;Border box&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  width: 160px;
+  height: 80px;
+  padding: 20px;
+  border: 8px solid red;
+  background: yellow;
+}
+
+.content-box {
+  box-sizing: content-box;
+  /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
+     Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
+     Content box width: 160px
+     Content box height: 80px */
+}
+
+.border-box {
+  box-sizing: border-box;
+  /* Total width: 160px
+     Total height: 80px
+     Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
+     Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
+}
+</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample('Box_sizes_with_content-box_and_border-box', 'auto', 300)}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#box-sizing', 'box-sizing')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompabilität">Browser Kompabilität</h2>
+
+<p>{{Compat("css.properties.box-sizing")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/CSS/Boxmodell" title="CSS/Box model">CSS Boxmodell</a></li>
+</ul>
diff --git a/files/de/web/css/break-after/index.html b/files/de/web/css/break-after/index.html
new file mode 100644
index 0000000000..6bbcdb52d2
--- /dev/null
+++ b/files/de/web/css/break-after/index.html
@@ -0,0 +1,114 @@
+---
+title: break-after
+slug: Web/CSS/break-after
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Fragmentierung
+  - NeedsExample
+  - Referenz
+translation_of: Web/CSS/break-after
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>break-after</code> <a href="/en-US/docs/CSS">CSS</a> Eigenschaft gibt an, wie die Seite, die Spalte oder der Abschnitt nach der generierten Box umbricht. Wenn es keine generierte Box gibt, wird die Eigenschaft ignoriert.</p>
+
+<p>Jeder mögliche Brechpunkt, das sind alle Begrenzungen des Elements, ist unter dem Einfluss von drei Eigenschaften: dem <code>break-after</code> Wert des vorhergehenden Elements, dem {{cssxref("break-before")}} des nächsten Elements und dem {{cssxref("break-inside")}} Wert von dem beinhaltenden Elements.</p>
+
+<p>Um zu ermitteln ob ein Umbruch erfolgen muss, werden folgende Regeln angwendet:</p>
+
+<ol>
+ <li>Wenn einer der drei Betroffenen Werte ein <em>forced break value</em> ist (das sind <code>always</code>, <code>left</code>, <code>right</code>, <code>page</code>, <code>column</code> oder <code>region</code>), hat er Vorrang. Wenn mehrere der betroffenen Werte solch ein Umbruch sind, wird der Wert des Elements, welches als letztes im Flow auftritt, verwendet (der {{cssxref("break-before")}} hat Vorrang gegenüber dem <code>break-after</code> Wert, welches wiederum Vorrang gegebüber dem {{cssxref("break-inside")}} Wert hat).</li>
+ <li>Wenn einer der drei betroffenen Werte ein <em>avoid break value</em> ist (das sind <code>avoid</code>, <code>avoid-page</code>, <code>avoid-region</code> oder <code>avoid-column</code>), wird kein Umbruch gemacht.</li>
+</ol>
+
+<p>Wenn einmal ein gezwungener Umbruch gemacht worden ist, werden bei Bedarf weiche Umbrüche hinzugefügt. Aber nicht auf Elementbegrenzungen, welche zu einem entsprechenden avoid Wert führen.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">break-after: auto;
+break-after: always;
+break-after: left;
+break-after: right;
+break-after: recto;
+break-after: verso;
+break-after: page;
+break-after: column;
+break-after: region;
+break-after: avoid;
+break-after: avoid-page;
+break-after: avoid-column;
+break-after: avoid-region;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Initialwert. Erlaubt (bedeutet kein Verbot oder Zwang) das Einfügen jeden Umbruchs (entweder Seite, Spalte oder Abschnitt) nach der hauptsächlichen Box.</dd>
+ <dt><code>always</code></dt>
+ <dd>Erzwingt immer Umbrüche nach der hauptsächlichen Box. Das ist ein Synonym für <code>page</code>, welches beibehalten wurde, um Übergänge von {{cssxref("page-break-after")}} zu ermöglichen, welche eine Teilmenge dieser Eigenschaft sind.</dd>
+ <dt><code>avoid</code></dt>
+ <dd>Verhindert das Einfügen jeglicher Umbrüche für page, column oder region nach der hauptsächlichen Box.</dd>
+ <dt><code>left</code></dt>
+ <dd>Erzwingt immer einen oder zwei Seitenumbrüche direkt nach der hauptsächlichen Box, damit die nächste Seite als linke Seite formatiert wird.</dd>
+ <dt><code>right</code></dt>
+ <dd>Erzwingt immer einen oder zwei Seitenumbrüche direkt nach der hauptsächlichen Box, damit die nächste Seite als rechte Seite formatiert wird.</dd>
+ <dt><code>page</code></dt>
+ <dd>Erzwingt immer einen Seitenumbruch direkt nach der hauptsächlichen Box.</dd>
+ <dt><code>column</code></dt>
+ <dd>Erzwingt immer einen Spaltenumbruch direkt nach der hauptsächlichen Box.</dd>
+ <dt><code>region </code>{{experimental_inline}}</dt>
+ <dd>Erzwing immer einen Abschnittsumbruch direkt nach der hauptsächlichen Box.</dd>
+ <dt><code>recto</code> {{experimental_inline}}</dt>
+ <dd>Erzwingt einen oder zwei Seitenumbrüche direkt nach der hauptsächlichen Box, damit die nächste Seite als eine recto Seite (eine rechte Seite in einer links-nach-rechts Ausdehnung oder eine linke Seite in einer rechts-nach-links Ausdehnung) formatiert wird.</dd>
+ <dt><code>verso </code>{{experimental_inline}}</dt>
+ <dd>Erzwingt einen oder zwei Seitenumbrüche direkt nach der hauptsächlichen Box, damit die nächste Seite als eine verso Seite (eine linke Seite in einer links-nach-rechts Ausdehnung oder eine rechte Seite in einer rechts-nach-links Ausdehnung) formatiert wird.</dd>
+ <dt><code>avoid-page</code></dt>
+ <dd>Verhindert jeden Seitenumbruch direkt nach der hauptsächlichen Box.</dd>
+ <dt><code>avoid-column</code></dt>
+ <dd>Verhindert jeden Spaltenumbruch direkt nach der hauptsächlichen Box.</dd>
+ <dt><code>avoid-region </code>{{experimental_inline}}</dt>
+ <dd>Verhindert jeden Anschnittsumbruch direkt nach der hauptsächlichen Box.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Bemerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fragmentation', '#break-after', 'break-after')}}</td>
+   <td>{{Spec2('CSS3 Fragmentation')}}</td>
+   <td>Fügt die Schlüsselwörter <code>recto</code> und <code>verso</code> hinzu. Ändert dne Medientyp dieser Eigenschaft von <code>paged</code> zu {{xref_cssvisual}}. Präzisiert den Algorithmus für verschiedene Arten von Umbrüchen.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Regions', '#region-flow-break', 'break-after')}}</td>
+   <td>{{Spec2('CSS3 Regions')}}</td>
+   <td>Erweitert die Eigenschaft, um Abschnittsumbrüche handhaben zu können. Für die Schlüsselwörter <code>avoid-region</code> und <code>region</code> hinzu.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#break-after', 'break-after')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Initiale Spezifikation. Erweitert die CSS 2.1 {{cssxref("page-break-after")}} Eigenschaft, um Seiten- und Spaltenumbrüche handhaben zu können.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Webbrowserkompatibilität</h2>
+
+{{Compat("css.properties.break-after")}}
diff --git a/files/de/web/css/break-inside/index.html b/files/de/web/css/break-inside/index.html
new file mode 100644
index 0000000000..8090a69267
--- /dev/null
+++ b/files/de/web/css/break-inside/index.html
@@ -0,0 +1,127 @@
+---
+title: break-inside
+slug: Web/CSS/break-inside
+translation_of: Web/CSS/break-inside
+---
+<div>{{CSSRef}}</div>
+
+<p>Die <a href="/en-US/docs/Web/CSS">CSS</a>-Eigenschaft <strong><code>break-inside</code></strong> gibt an, wie Seiten, Spalten oder Abschnitte innerhalb einer generierten Box umbrechen. Wenn es keine generierte Box gibt, wird die Eigenschaft ignoriert.</p>
+
+<pre class="brush:css no-line-numbers">/* Spezifische Werte */
+break-inside: auto;
+break-inside: avoid;
+break-inside: avoid-page;
+break-inside: avoid-column;
+break-inside: avoid-region;
+
+/* Globale Werte */
+break-inside: inherit;
+break-inside: initial;
+break-inside: unset;
+</pre>
+
+<p>Alle Begrenzungen eines Elements sind ein möglicher Brechpunkt. Dieser wird von drei Eigenschaften beeinflusst:</p>
+
+<ul>
+ <li>Dem Wert für {{cssxref("break-after")}} des vorherigen Elements.</li>
+ <li>Dem Wert für {{cssxref("break-before")}} des nachfolgenden Elements.</li>
+ <li>Dem Wert für <code>break-inside</code> des Elternelements.</li>
+</ul>
+
+<p>Um zu ermitteln, ob ein Umbruch erfolgen muss, werden folgende Regeln angewendet:</p>
+
+<ol>
+ <li>Besitzt eine der drei Eigenschaften einen <em>forced break value</em> (<code>always</code>, <code>left</code>, <code>right</code>, <code>page</code>, <code>column</code>, oder <code>region</code>), so hat sie Vorrang. Wenn mehrere Eigenschaften einen <em>forced break value</em> besitzen, gewinnt das Element, welches als letztes im Flow auftritt. Das heißt: <code>break-before</code> überwiegt <code>break-after</code>, welches wiederum <code>break-inside</code> überwiegt.</li>
+ <li>Besitzt eine der drei Eigenschaften einen <em>avoid break value</em> (<code>avoid</code>, <code>avoid-page</code>, <code>avoid-region</code>, or <code>avoid-column</code>), so erfolgt kein Umbruch.</li>
+</ol>
+
+<p>Nachdem erzwungene Umbrüche gemacht wurden, werden bei Bedarf weiche Umbrüche hinzugefügt. Davon ausgenommen sind Elementbegrenzungen, für die der Wert <code>avoid</code> gilt.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<p>Die <code>break-inside</code>-Eigenschaft wird durch einen der folgenden Werte spezifiziert.</p>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Initialwert. Erlaubt jede Art von Umbruch (Seiten-, Spalten- oder Abschnittsumbruch) innerhalb der Box, erzwingt ihn aber nicht.</dd>
+ <dt><code>avoid</code></dt>
+ <dd>Vermeidet jede Art von Umbruch (Seiten-, Spalten- oder Abschnittsumbruch) innerhalb der Box.</dd>
+ <dt><code>avoid-page</code></dt>
+ <dd>Vermeidet Seitenumbrüche innerhalb der Box.</dd>
+ <dt><code>avoid-column</code></dt>
+ <dd>Vermeidet Spaltenumbrüche innerhalb der Box.</dd>
+ <dt><code>avoid-region</code> {{experimental_inline}}</dt>
+ <dd>Vermeidet Regionsumbrüche innerhalb der Box.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Page-break-Aliasse">Page-break-Aliasse</h2>
+
+<p>Aus Gründen der Kompatibilität soll die veraltete Eigenschaft {{cssxref("page-break-inside")}} von Browsern als ein Alias für <code>break-inside</code> behandelt werden. So wird sichergestellt, dass Projekte mit <code>page-break-inside</code> sich weiterhin wie konzipiert verhalten. Für folgende Werte sollen die aufgeführten Aliasse gelten:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">page-break-inside</th>
+   <th scope="col">break-inside</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>auto</code></td>
+   <td><code>auto</code></td>
+  </tr>
+  <tr>
+   <td><code>avoid</code></td>
+   <td><code>avoid</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Bemerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fragmentation', '#break-within', 'break-inside')}}</td>
+   <td>{{Spec2('CSS3 Fragmentation')}}</td>
+   <td>Keine Änderungen.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Regions', '#region-flow-break', 'break-inside')}}</td>
+   <td>{{Spec2('CSS3 Regions')}}</td>
+   <td>Erweitert die Eigenschaft um Regionsumbrüche.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#break-before-break-after-break-inside', 'break-inside')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Initiale Spezifikation.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser-Kompatibilität</h2>
+
+
+
+<p>{{Compat("css.properties.break-inside", 4)}}</p>
+
+<h3 id="Anmerkungen_zur_Kompatibilität">Anmerkungen zur Kompatibilität</h3>
+
+<p>Vor Firefox 65 kann die veraltete {{cssxref("page-break-inside")}}-Eigenschaft zur Vermeidung von Spalten- und Seitenumbrüchen genutzt werden. Verwenden Sie für Rückwärtskompatibilität beide Eigenschaften.</p>
+
+<p>Für ältere WebKit-basierte Browser können Sie die Präfix-Eigenschaft <code>-webkit-column-break-inside</code> verwenden, um Spaltenumbrüche zu steuern.</p>
diff --git a/files/de/web/css/calc()/index.html b/files/de/web/css/calc()/index.html
new file mode 100644
index 0000000000..357b7d1036
--- /dev/null
+++ b/files/de/web/css/calc()/index.html
@@ -0,0 +1,106 @@
+---
+title: calc
+slug: Web/CSS/calc()
+tags:
+  - CSS
+  - CSS Funktion
+  - Referenz
+translation_of: Web/CSS/calc()
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Mit der CSS-Funktion calc() lassen sich Werte für CSS-Eigenschaften berechnen.</p>
+
+<p>calc() kann überall verwendet werden, wo {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;frequency&gt;")}}, {{cssxref("&lt;angle&gt;")}}, {{cssxref("&lt;time&gt;")}}, {{cssxref("&lt;number&gt;")}} und {{cssxref("&lt;integer&gt;")}} eingesetzt werden dürfen.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<pre class="syntaxbox notranslate">/* Eigenschaft: calc(<em>Ausdruck</em>) */
+width: calc(100% - 80px);</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt>Ausdruck</dt>
+ <dd>Ein mathematischer Ausdruck, dessen Ergebnis als Wert verwendet wird.</dd>
+</dl>
+
+<h3 id="Ausdrücke">Ausdrücke</h3>
+
+<p>Der Ausdruck kann eine beliebige Kombination der folgenden Operatoren sein:</p>
+
+<dl>
+ <dt><strong>+</strong></dt>
+ <dd>Addition.</dd>
+ <dt><strong>-</strong></dt>
+ <dd>Subtraktion.</dd>
+ <dt><strong>*</strong></dt>
+ <dd>Multiplikation (muss mindestens eine {{cssxref("&lt;number&gt;")}} enthalten).</dd>
+ <dt><strong>/</strong></dt>
+ <dd>Division (Divisor muss eine {{cssxref("&lt;number&gt;")}} sein).</dd>
+</dl>
+
+<p>Bei den Operanden darf es sich um jeden Wert vom Typ {{cssxref("&lt;length&gt;")}} handeln, insbesondere können auch verschiedene Einheiten miteinander verrechnet werden.<br>
+ Das Setzen von Klammern ist ebenfalls möglich.</p>
+
+<p><code>calc()</code>-Funktionen können ineinander verschachtelt werden.</p>
+
+<div class="note"><strong>Hinweis:</strong> Die Operatoren + und - erfordern zwingend ein Leerzeichen zwischen dem Operator und den Werten. Zum Beispiel würde <code>calc(50% -8px)</code> als Prozentwert, gefolgt von einer negativen Pixel-Länge interpretiert. Eine korrekte Subtraktion ergibt sich nur mit einem Leerzeichen zwischen - und 8px: <code>calc(50% - 8px)</code><br>
+Bei einer Multiplikation oder Division spielen Leerzeichen keine Rolle, sind aber der Lesbarkeit wegen empfohlen.</div>
+
+<div class="note">Berechnungen für die Breite oder Höhe von Tabellenspalten und -spaltengruppen sowie Tabellenzeilen und -zeilengruppen, sowie Tabellenzellen <em>können</em> vom Browser als Wert <code>auto</code> behandelt werden. Dies gilt für Tabellen mit dem Typ auto oder fixed.</div>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Relative_Größe_eines_Objekts_mit_einer_absoluten_Positionierung">Relative Größe eines Objekts mit einer absoluten Positionierung</h3>
+
+<p>Mit <code>calc()</code> ist es kein Problem mehr, die Maße eines Objekts in Abhängigkeit anderer Maße festzulegen.</p>
+
+<p>In diesem Beispiel wurde ein Banner erstellt, das die gesamte verfügbare Breite einnehmen, dabei jedoch auf beiden Seiten einen Abstand einnehmen soll, der exakt 40 Pixeln beträgt.</p>
+
+<p>Links ist die Position mit <code>left: 40px</code> definiert. Mit <code>calc(100% - 80px)</code> werden von der Gesamtbreite 80 Pixel abgezogen (2 * 40 Pixel), so verbleibt am rechten Rand ein Abstand von ebenfalls exakt 40 Pixeln.</p>
+
+<pre class="brush: css notranslate">.banner {
+  position: absolute;
+  left: 40px;
+  width: 90%;               /* fallback for browsers without support for calc() */
+  width: calc(100% - 80px);
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="banner"&gt;This is a banner!&lt;/div&gt;</pre>
+
+<p>{{ EmbedLiveSample('Relative_Gr%C3%B6sse_eines_Objekts_mit_einer_absoluten_Positionierung', '100%', '60') }}</p>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{Compat("css.types.calc")}}</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li><a href="https://hacks.mozilla.org/2010/06/css3-calc/" title="Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog"><u><font color="#0066cc">Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog</font></u></a></li>
+</ul>
diff --git a/files/de/web/css/caption-side/index.html b/files/de/web/css/caption-side/index.html
new file mode 100644
index 0000000000..042981c576
--- /dev/null
+++ b/files/de/web/css/caption-side/index.html
@@ -0,0 +1,153 @@
+---
+title: caption-side
+slug: Web/CSS/caption-side
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Tabellen
+  - Layout
+  - Referenz
+translation_of: Web/CSS/caption-side
+---
+<div>{{CSSRef}}</div>
+
+<p>Die <a href="/de/docs/Web/CSS" title="CSS">CSS</a> Eigenschaft <strong><code>caption-side</code></strong> positioniert den Inhalt einer {{HTMLElement("caption") }} einer Tabelle auf der angegebenen Seite.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/caption-side.html")}}</div>
+
+<p class="hidden">Die Quelle für dieses interaktive Beispiel ist in einem GitHub-Repository gespeichert. Wenn Sie zum Projekt der interaktiven Beispiele beitragen möchten, klonen Sie bitte <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und senden Sie uns eine Pull-Anfrage.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* Directional values */
+caption-side: top;
+caption-side: bottom;
+
+/* Warning: non-standard values */
+caption-side: left;
+caption-side: right;
+caption-side: top-outside;
+caption-side: bottom-outside;
+
+/* Global values */
+caption-side: inherit;
+caption-side: initial;
+caption-side: unset;
+</pre>
+
+<p>Die Eigenschaft <code>caption-side</code> property wird als einer der unten aufgeführten Schlüsselwortwerte angegeben.</p>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>top</code></dt>
+ <dd>Die Überschriftenbox soll oberhalb der Tabelle positioniert werden.</dd>
+ <dt><code>bottom</code></dt>
+ <dd>Die Überschriftenbox soll unterhalb der Tabelle positioniert werden.</dd>
+ <dt><code>left</code> {{ non-standard_inline() }}</dt>
+ <dd>Die Überschriftenbox soll links von der Tabelle positioniert werden.</dd>
+ <dd>
+ <div class="note"><strong>Hinweis:</strong> Dieser Wert wurde für CSS 2 vorgeschlagen, aber aus der endgültigen CSS 2.1-Spezifikation entfernt. Er ist nicht standardisiert.</div>
+ </dd>
+ <dt><code>right</code> {{ non-standard_inline() }}</dt>
+ <dd>Die Überschriftenbox soll rechts von der Tabelle positioniert werden.</dd>
+ <dd>
+ <div class="note"><strong>Hinweis:</strong> Dieser Wert wurde für CSS 2 vorgeschlagen, aber aus der endgültigen CSS 2.1-Spezifikation entfernt. Er ist nicht standardisiert.</div>
+ </dd>
+ <dt><code>top-outside</code> {{non-standard_inline}}</dt>
+ <dd>Das Überschriftenbox sollte oberhalb der Tabelle positioniert werden, während die Breite und das horizontale Ausrichtungsverhalten nicht an das horizontale Layout der Tabelle gebunden sind.</dd>
+ <dd>
+ <div class="note">Die CSS 2.1-Spezifikation stellt fest, dass die CSS 2-Spezifikation ein anderes Verhalten für den <code>top</code> Wert beschrieben hat, der in einer zukünftigen Spezifikation durch diesen Wert wieder eingeführt wird.</div>
+ </dd>
+ <dt><code>bottom-outside</code> {{non-standard_inline}}</dt>
+ <dd>Das Überschriftenbox sollte unterhalb der Tabelle positioniert werden, während die Breite und das horizontale Ausrichtungsverhalten nicht an das horizontale Layout der Tabelle gebunden sind.</dd>
+ <dd>
+ <div class="note">Die CSS 2.1-Spezifikation stellt fest, dass die CSS 2-Spezifikation ein anderes Verhalten für den <code>bottom</code> Wert beschrieben hat, der in einer zukünftigen Spezifikation durch diesen Wert wieder eingeführt wird</div>
+ </dd>
+</dl>
+
+<h2 id="Formale_Definition">Formale Definition</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formale_Syntax">Formale Syntax</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Setting_captions_above_and_below" name="Setting_captions_above_and_below">Setzen von Beschriftungen oben und unten</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;table class="top"&gt;
+  &lt;caption&gt;Caption ABOVE the table&lt;/caption&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Some data&lt;/td&gt;
+    &lt;td&gt;Some more data&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+
+&lt;br&gt;
+
+&lt;table class="bottom"&gt;
+  &lt;caption&gt;Caption BELOW the table&lt;/caption&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Some data&lt;/td&gt;
+    &lt;td&gt;Some more data&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.top caption {
+  caption-side: top;
+}
+
+.bottom caption {
+  caption-side: bottom;
+}
+
+table {
+  border: 1px solid red;
+}
+
+td {
+  border: 1px solid blue;
+}
+</pre>
+
+<h4 id="Ergebnis">Ergebnis</h4>
+
+<p>{{EmbedLiveSample('Setting_captions_above_and_below', 'auto', 160)}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS Logical Properties', '#caption-side', 'caption-side') }}</td>
+   <td>{{ Spec2('CSS Logical Properties') }}</td>
+   <td>Definiert die oberen <code>top</code> und unteren <code>bottom</code> Werte relativ zum Schreibmodus <code>writing-mode</code> Wert.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'tables.html#caption-position', 'caption-side') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und senden Sie uns eine Pull-Anfrage.</div>
+
+<p>{{Compat("css.properties.caption-side")}}</p>
diff --git a/files/de/web/css/clear/index.html b/files/de/web/css/clear/index.html
new file mode 100644
index 0000000000..9d2be4ab3c
--- /dev/null
+++ b/files/de/web/css/clear/index.html
@@ -0,0 +1,250 @@
+---
+title: clear
+slug: Web/CSS/clear
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Positionierung
+  - Layout
+  - Referenz
+translation_of: Web/CSS/clear
+---
+<div>{{CSSRef}}</div>
+
+<p>Die <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft <strong><code>clear</code></strong> legt fest, ob ein Element unter einem fließenden (<a href="/de/docs/Web/CSS/float">float</a>) Element verschoben werden muss, die ihm vorausgehen. Die <code>clear</code> Eigenschaft gilt für fließende und nicht fließenden Elemente.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/clear.html")}}</div>
+
+<p class="hidden">Die Quelle für dieses interaktive Beispiel ist in einem GitHub-Repository gespeichert. Wenn Sie zum Projekt der interaktiven Beispiele beitragen möchten, klonen Sie bitte <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und senden Sie uns eine Pull-Anfrage.</p>
+
+<p>Wenn sie auf nicht fließende Blöcke angewendet wird, verschiebt sie den Rahmen (<a href="/de/docs/Web/CSS/CSS_Boxmodell/Einführung_in_das_CSS_Boxmodell">border edge</a>) des Elements nach unten, bis sie unter den Rand (<a href="/de/docs/Web/CSS/CSS_Boxmodell/Einführung_in_das_CSS_Boxmodell" title="CSS/box_model">margin edge</a>) aller relevanten fließende Elemente liegt. Der obere Rand (<a href="/en-US/docs/Web/CSS/margin" title="CSS/box_model">margin</a>) des nicht fließenden Blocks kollabiert.</p>
+
+<p>Vertikale Ränder (<code>margins</code>) zwischen zwei fließenden Elementen hingegen kollabieren nicht. Wenn sie auf fließenden Elemente angewendet werden, wird der Rand des unteren Elements unter den Rand aller relevanten fließenden Elementen verschoben. Dies wirkt sich auf die Position späterer fließenden Elementen aus, da spätere fließende Elemente nicht höher positioniert werden können als frühere.</p>
+
+<p>Die relevanen fließenden Elemente, deren Fließeigenschaft beendet werden soll, sind die früheren fließenden Elemente mit der selben <a href="/de/docs/Web/Guide/CSS/Block_formatting_context">Blockformatierungskontexts</a> .</p>
+
+<div class="note">
+<p><strong>Hinweis: </strong>Wenn ein Element nur fließenden (<a href="/de/docs/Web/CSS/float">float</a>) Elemente enthält, kollabiert seine Höhe zu null. Wenn Sie möchten, dass es immer in der Lage ist, seine Größe zu ändern, so dass es in seinem Inneren schwebende Elemente enthält, müssen Sie das <code>float</code> für seine Kinder selbst beenden. Dies wird <strong>clearfix</strong> genannt, und eine Weg, besteht darin, ein <code>clear</code> zu einem ersetzten {{cssxref("::after")}} <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelement</a> hinzuzufügen.</p>
+
+<pre class="language-html notranslate">#container:after {
+  content: "";
+  display: block;
+  clear: both;
+}
+</pre>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="twopartsyntaxbox notranslate"></pre>
+
+<pre class="brush: css no-line-numbers notranslate">/* Keyword values */
+clear: none;
+clear: left;
+clear: right;
+clear: both;
+clear: inline-start;
+clear: inline-end;
+
+/* Global values */
+clear: inherit;
+clear: initial;
+clear: unset;
+</pre>
+
+<h3 id="Values" name="Values">Werte</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Der Umfluss von vorherigen Elementen wird nicht beendet.</dd>
+ <dt><code>left</code></dt>
+ <dd>Der Umfluss von vorherigen Elementen wird auf der linken Seite beendet.</dd>
+ <dt><code>right</code></dt>
+ <dd>Der Umfluss von vorherigen Elementen wird auf der rechten Seite beendet.</dd>
+ <dt><code>both</code></dt>
+ <dd>Der Umfluss von vorherigen Elementen wird auf beiden Seiten beendet.</dd>
+ <dt><code>inline-start</code></dt>
+ <dd>Beendet die Fließeigenschaft des Elementes, das nach unten an den Startrand eines seines enthaltenden Blocks verschoben wird. Wenn die Textrichtung <code>ltr</code> (von links nach rechts) ist, dann wird es linksseitig sein. Falls die Textrichtung <code>rtl</code> (von rechts nach links) ist, dann wird es rechtsseitig sein.</dd>
+ <dt><code>inline-end</code></dt>
+ <dd>Beendet die Fließeigenschaft des Elementes, das nach unten an den Endrand eines seines enthaltenden Blocks verschoben wird. Wenn die Textrichtung <code>ltr</code> (von links nach rechts) ist, dann wird es linksseitig sein. Falls die Textrichtung <code>rtl</code> (von rechts nach links) ist, dann wird es rechtsseitig sein.</dd>
+ <dt><code>inherit</code></dt>
+ <dd>Der Wert des Elternelements wird geerbt.</dd>
+</dl>
+
+<h2 id="Formale_Definition">Formale Definition</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formale_Syntax">Formale Syntax</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="clear-left" name="clear-left">clear: left</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;p class="black"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
+  &lt;p class="red"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/p&gt;
+  &lt;p class="left"&gt;This paragraph clears left.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.wrapper{
+  border:1px solid black;
+  padding:10px;
+}
+.left {
+  border: 1px solid black;
+  clear: left;
+}
+.black {
+  float: left;
+  margin: 0;
+  background-color: black;
+  color: #fff;
+  width: 20%;
+}
+.red {
+  float: left;
+  margin: 0;
+  background-color: pink;
+  width:20%;
+}
+p {
+  width: 50%;
+}
+</pre>
+
+<h4 id="Ergebnis">Ergebnis</h4>
+
+<p>{{ EmbedLiveSample('clear-left','100%','250') }}</p>
+
+<h3 id="clear-right" name="clear-right">clear: right</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;p class="black"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
+  &lt;p class="red"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/p&gt;
+  &lt;p class="right"&gt;This paragraph clears right.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">.wrapper{
+  border:1px solid black;
+  padding:10px;
+}
+.right {
+  border: 1px solid black;
+  clear: right;
+}
+.black {
+  float: right;
+  margin: 0;
+  background-color: black;
+  color: #fff;
+  width:20%;
+}
+.red {
+  float: right;
+  margin: 0;
+  background-color: pink;
+  width:20%;
+}
+p {
+  width: 50%;
+}</pre>
+
+<h4 id="Ergebnis_2">Ergebnis</h4>
+
+<p>{{ EmbedLiveSample('clear-right','100%','250') }}</p>
+
+<h3 id="clear-both" name="clear-both">clear: both</h3>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;p class="black"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.&lt;/p&gt;
+  &lt;p class="red"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
+  &lt;p class="both"&gt;This paragraph clears both.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css notranslate">.wrapper{
+  border:1px solid black;
+  padding:10px;
+}
+.both {
+  border: 1px solid black;
+  clear: both;
+}
+.black {
+  float: left;
+  margin: 0;
+  background-color: black;
+  color: #fff;
+  width:20%;
+}
+.red {
+  float: right;
+  margin: 0;
+  background-color: pink;
+  width:20%;
+}
+p {
+  width: 45%;
+}</pre>
+
+<h4 id="Ergebnis_3">Ergebnis</h4>
+
+<p>{{ EmbedLiveSample('clear-both','100%','300') }}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td>Die Werte <code>inline-start</code> und <code>inline-end</code> hinzugefügt.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#flow-control', 'clear')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Keine signifikanten Änderungen, jedoch werden Details geklärt.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#clear', 'clear')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und senden Sie uns eine Pull-Anfrage.</div>
+
+<p>{{Compat("css.properties.clear")}}</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/CSS/Boxmodell" title="CSS/box_model">Boxmodell</a></li>
+</ul>
diff --git a/files/de/web/css/clip-path/index.html b/files/de/web/css/clip-path/index.html
new file mode 100644
index 0000000000..63df0e6248
--- /dev/null
+++ b/files/de/web/css/clip-path/index.html
@@ -0,0 +1,128 @@
+---
+title: clip-path
+slug: Web/CSS/clip-path
+tags:
+  - CSS
+  - Experimentell
+  - Layout
+  - NeedsBrowserCompatibility
+  - Referenz
+  - Web
+translation_of: Web/CSS/clip-path
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <strong>clip-path</strong> CSS Eigenschaft verhindert, dass ein Teil eines Elements angezeigt wird, indem es einen Schnittbereich definiert, der angezeigt werden soll, d. h. nur ein bestimmter Bereich des Elements wird angezeigt.</p>
+
+<p>Der Schnittbereich ist ein Pfad, der als URL, die eine Inline- oder externe SVG-Grafik oder eine Formfunktion wie <a href="/de/docs/Web/SVG/Element/circle">circle()</a> definiert wird. Die <code>clip-path</code> Eigenschaft ersetzt die nun als veraltet geltende <a href="/de/docs/Web/CSS/clip">clip</a> Eigenschaft.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Schlüsselwortwerte */
+clip-path: none;
+clip-path: fill-box;
+clip-path: stroke-box;
+clip-path: view-box;
+
+/* Bildwerte */
+clip-path: url(resources.svg#c1);
+clip-path: linear-gradient(blue, transparent);
+
+/* Geometriewerte */
+clip-path: inset(100px 50px);
+clip-path: circle(50px at 0 100px);
+clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+
+/* Globale Werte */
+clip-path: inherit;
+clip-path: initial;
+clip-path: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>&lt;clip-source&gt;</code></dt>
+ <dd>Repräsentiert eine URL, die ein Schnittpfad Element referenziert.</dd>
+ <dt><code>&lt;basic-shape&gt;</code></dt>
+ <dd>Eine Grundform Funktion, wie sie in der <a href="/en-US/docs/Web/CSS/basic-shape">CSS Shapes Specifikation</a> definiert wird. Eine Grundform macht Gebrauch von der angegebenen Referenzbox, um die Grundform zu skalieren und positionieren. Falls keine Referenzbox angegeben wurde, wird <code>border-box</code> als Referenzbox verwendet.</dd>
+ <dt><code>&lt;geometry-box&gt;</code></dt>
+ <dd>
+ <p>Falls in Kombination mit <code>&lt;basic-shape&gt;</code> angegeben, gibt dieser Wert die Referenzbox für die Grundform an. Falls alleine angegeben, werden die Ränder der angegebenen Box inklusive etwaiger Randformen (z. B. definiert durch {{cssxref("border-radius")}}) als Schnittpfad verwendet.</p>
+ </dd>
+ <dt><code>fill-box</code></dt>
+ <dd>
+ <p>Verwendet den Objektrahmen als Referenzbox.</p>
+ </dd>
+ <dt><code>stroke-box</code></dt>
+ <dd>
+ <p>Verwendet die Strichrahmenbox als Referenzbox.</p>
+ </dd>
+ <dt><code>view-box</code></dt>
+ <dd>
+ <p>Verwendet den nähesten SVG-Viewport als Referenzbox. Falls ein {{SVGAttr("viewBox")}} Attribut für das den SVG-Viewport erstellende Element angegeben wurde, wird die Referenzbox am Ursprung des Koordinatensystems positioniert, das durch das <code>viewBox</code> Attribut erzeugt wird und die Ausmaße der Referenzbox werden auf die Breite und Höhe des <code>viewBox</code> Attributs gesetzt.</p>
+ </dd>
+ <dt><code>none</code></dt>
+ <dd>Es wird kein Schnittpfad erzeugt.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush:css">/* Inline-SVG  */
+.target {
+  clip-path: url(#c1);
+}
+
+/* externes SVG */
+.anothertarget {
+  clip-path: url(resources.svg#c1);
+}
+
+/* Kreis */
+.circleClass {
+  clip-path: circle(15px at 20px 20px);
+}</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks", "#the-clip-path", 'clip-path')}}</td>
+   <td>{{Spec2('CSS Masks')}}</td>
+   <td>Erweitert die Anwendung auf HTML Elemente</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'masking.html#ClipPathProperty', 'clip-path')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Ursprüngliche Definition (gilt nur für SVG Elemente)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.clip-path")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref("clip-rule")}}, {{cssxref("mask")}}, {{cssxref("filter")}}</li>
+ <li><a href="/de/docs/SVG_Elemente_auf_HTML_Inhalt_anwenden">SVG Elemente auf HTML Inhalt anwenden</a></li>
+ <li>{{SVGAttr("clip-path")}} SVG Attribut</li>
+</ul>
diff --git a/files/de/web/css/clip/index.html b/files/de/web/css/clip/index.html
new file mode 100644
index 0000000000..a23c3ec708
--- /dev/null
+++ b/files/de/web/css/clip/index.html
@@ -0,0 +1,131 @@
+---
+title: clip
+slug: Web/CSS/clip
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+  - Veraltet
+translation_of: Web/CSS/clip
+---
+<div>{{CSSRef}}{{deprecated_header}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>clip</code> CSS Eigenschaft definiert, welcher Teil eines Elements sichtbar ist. Sie gilt nur für Elemente mit {{cssxref("position","position:absolute")}}.</p>
+
+<div class="warning">
+<p><strong>Warnung:</strong> Diese Eigenschaft ist veraltet. Es sollte stattdessen {{cssxref("clip-path")}} verwendet werden.</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Schlüsselwortwert */
+clip: auto;
+
+/* &lt;shape&gt; Werte */
+clip: rect(1px 10em 3rem 2ch);
+clip: rect(1px, 10em, 3rem, 2ch);
+
+/* Globale Werte */
+clip: inherit;
+clip: initial;
+clip: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>&lt;shape&gt;</code></dt>
+ <dd>Ein rechteckiger {{cssxref("&lt;shape&gt;")}} Wert der Form <code>rect(&lt;top&gt;, &lt;right&gt;, &lt;bottom&gt;, &lt;left&gt;)</code> oder <code> rect(&lt;top&gt; &lt;right&gt; &lt;bottom&gt; &lt;left&gt;)</code> wobei <code>&lt;top&gt;</code> und <code>&lt;bottom&gt;</code> Versätze von der <em>Innenseite des oberen Randes</em> der Box angeben und <code>&lt;right&gt;</code> und <code>&lt;left&gt;</code> Versätze von der <em>Innenseite des linken Randes</em> der Box — d. h. die Ausmaße der Innenabstandsbox.</dd>
+ <dd><code>&lt;top&gt;</code>, <code>&lt;right&gt;</code>, <code>&lt;bottom&gt;</code> und <code>&lt;left&gt;</code> können entweder einen {{cssxref("&lt;length&gt;")}} Wert haben oder <code>auto</code>. Falls der Wert irgendeiner Seite <code>auto</code> ist, wird das Element an der <em>Innenseite des Randes</em> dieser Seite abgeschnitten.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Das Element wird nicht abgeschnitten (Standardwert). Zu beachten ist, dass sich dies von <code>rect(auto, auto, auto, auto)</code> unterscheidet, welches das Element an den Innenseiten der Ränder des Elements abschneidet.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush:css">.dotted-border {
+   border: dotted;
+   position: relative;
+   width: 536px;
+   height: 350px;
+}
+
+#top-left, #middle, #bottom-right {
+   position: absolute;
+   top: 0px;
+}
+
+#top-left {
+   left: 360px;
+   clip: rect(0px, 175px, 113px, 0px);
+}
+
+
+#middle {
+   left: 280px;
+   clip: rect(119px, 255px, 229px, 80px);
+   /* Standardsyntax, nicht unterstützt von Internet Explorer 4-7 */
+}
+
+#bottom-right {
+   left: 200px;
+   clip: rect(235px 335px 345px 160px);
+   /* Nicht-standardisierte Syntax, jedoch von allen gängigen Browsern unterstützt */
+}</pre>
+
+<pre class="brush:html">&lt;p class="dotted-border"&gt;
+   &lt;img src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Originalgrafik" /&gt;
+   &lt;img id="top-left" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Grafik, die oben links abgeschnitten ist"&gt;
+   &lt;img id="middle" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Grafik, die zur Mitte hin abgeschnitten ist"&gt;
+   &lt;img id="bottom-right" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Grafik, die unten rechts abgeschnitten ist"&gt;
+&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample('Beispiele', '689px', '410px')}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Masks', '#clip-property', 'clip')}}</td>
+   <td>{{Spec2('CSS Masks')}}</td>
+   <td>Markiert die <code>clip</code> Eigenschaft als veraltet, schlägt {{cssxref("clip-path")}} als Ersatz vor.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'clip')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Definiert <code>clip</code> als animierbar.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visufx.html#clipping', 'clip')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.clip")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Verwandte CSS Eigenschaften: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{Cssxref("overflow")}}, {{Cssxref("display")}}, {{Cssxref("position")}}</li>
+</ul>
diff --git a/files/de/web/css/color/index.html b/files/de/web/css/color/index.html
new file mode 100644
index 0000000000..1465dd3a1f
--- /dev/null
+++ b/files/de/web/css/color/index.html
@@ -0,0 +1,121 @@
+---
+title: color
+slug: Web/CSS/color
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/color
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft <strong><code>color</code></strong> setzt die Vordergrund<a href="/de/docs/Web/CSS/Farben">farbe</a> des Textinhalts eines Elements und seiner <a href="/de/docs/Web/CSS/text-decoration">Dekorationen</a>. Sie hat keinen Einfluss auf andere Charakteristiken des Elements; sie sollte eigentlich <code>text-color</code> genannt werden, jedoch wurde sie aus historischen Gründen und ihrem Auftreten in CSS Level 1 so genannt.</p>
+
+<p>Beachte, dass der Farbwert eine gleichmäßige Farbe sein muss, welche seit CSS3 einen Transparenzwert beinhalten kann. Sie kann kein {{cssxref("&lt;gradient&gt;")}} sein, welcher in CSS ein {{cssxref("&lt;image&gt;")}} ist.</p>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css">/* Eine CSS Level 1 Farbe */
+color: red;
+
+/* Die einzige in CSS Level 2 (Revision 1) hinzugefügte Farbe */
+color: <code>orange;</code>
+
+/* CSS Level 3 Farbe, manchmal SVG- oder X11-Farbe genannt */
+color: <code>antiquewhite;</code>
+
+/* Die Farbe lindgrün in der 3-Zeichen-Notation */
+color: #0f0;
+
+/* Die Farbe lindgrün in der 6-Zeichen-Notation */
+color: #00ff00;
+
+/* Eine Farbe, die die verfügbaren funktionalen Notationen verwendet */
+color: rgba(34, 12, 64, 0.3);
+
+/* Verwende die Farbe des direkten Vorfahren des Elements */
+color: currentcolor;
+
+/* Globale Werte */
+color: inherit;
+color: initial;
+color: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>Ist ein {{cssxref("&lt;color&gt;")}} Wert, der die Farbe von Textelementen innerhalb des Elements bestimmt.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Die folgenden Zeilen sind Beispiele, wie der Text des Elements rot eingefärbt werden kann:</p>
+
+<pre class="brush: css">element { color: red; }
+element { color: #f00; }
+element { color: #ff0000; }
+element { color: rgb(255, 0, 0); }
+element { color: rgb(100%, 0%, 0%); }
+element { color: hsl(0, 100%, 50%); }
+
+/* 50% translucent */
+element { color: rgba(255, 0, 0, 0.5); }
+element { color: hsla(0, 100%, 50%, 0.5); }
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'color')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Definiert <code>color</code> als animierbar.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Colors', '#color', 'color')}}</td>
+   <td>{{Spec2('CSS3 Colors')}}</td>
+   <td>Markiert Systemfarben als veraltet; fügt SVG-Farben hinzu; fügt die funktionalen Notationen <code>rgba()</code>, <code>hsl()</code>, <code>hsla()</code> hinzu.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#colors', 'color')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Fügt die Farbe <code>orange</code> und die Systemfarben hinzu.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#color', 'color')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.color")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Der {{cssxref("&lt;color&gt;")}} Datentyp</li>
+ <li>Weitere Farbeigenschaften: {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}} und {{cssxref("color-adjust")}}</li>
+</ul>
diff --git a/files/de/web/css/column-count/index.html b/files/de/web/css/column-count/index.html
new file mode 100644
index 0000000000..0e7117c49b
--- /dev/null
+++ b/files/de/web/css/column-count/index.html
@@ -0,0 +1,106 @@
+---
+title: column-count
+slug: Web/CSS/column-count
+translation_of: Web/CSS/column-count
+---
+<div>{{CSSRef("CSS Multi-columns")}}</div>
+
+<h2 id="Summary" name="Summary">Übersicht</h2>
+
+<p>Die <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft <code>column-count</code> bestimmt die Spaltenanzahl innerhalb eines Elements.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("column-count")}}
+</pre>
+
+<pre>column-count: 3
+column-count: auto</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Besagt, dass die Anzahl Spalten von anderen Werten Abhängig ist, wie z. B. {{cssxref("column-width")}}.</dd>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>Ein positiver {{cssxref("&lt;integer&gt;")}}, welcher die Anzahl der Spalten genau festlegt. Falls der Wert von {{cssxref("column-width")}} nicht auto ist, stellt dieser Wert die maximale Anzahl an Spalten dar.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Beispiel</h2>
+
+<pre class="brush: css">.content-box {
+  border: 10px solid #000000;
+  column-count:3;
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Spezifikations</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#column-count', 'column-count')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix('-webkit')}}</td>
+   <td>1.5 (1.8){{property_prefix('-moz')}}</td>
+   <td>10</td>
+   <td>11.1</td>
+   <td>3.0 (522){{property_prefix('-webkit')}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/de/web/css/column-fill/index.html b/files/de/web/css/column-fill/index.html
new file mode 100644
index 0000000000..3750096c9f
--- /dev/null
+++ b/files/de/web/css/column-fill/index.html
@@ -0,0 +1,74 @@
+---
+title: column-fill
+slug: Web/CSS/column-fill
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Mehrspalten
+  - NeedsBrowserCompatibility
+  - Referenz
+translation_of: Web/CSS/column-fill
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft <code>column-fill</code> bestimmt die Aufteilung von Inhalten auf Spalten. Inhalte können entweder gleichmäßig verteilt werden, damit alle Spalten dieselbe Höhe haben, oder sie nehmen den Raum ein, den der Inhalt benötigt, sofern <code>auto</code> verwendet wird.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Schlüsselwortwerte */
+column-fill: auto;
+column-fill: balance;
+
+/* Globale Werte */
+column-fill: inherit;
+column-fill: initial;
+column-fill: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Die Spalten werden fortlaufend gefüllt.</dd>
+ <dt><code>balance</code></dt>
+ <dd>Der Inhalt wird gleichmäßig aufgeteilt.</dd>
+</dl>
+
+<h3 id="csssyntax">{{csssyntax}}</h3>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush:css">.content-box {
+  column-count: 4;
+  column-rule: 1px solid black;
+  column-fill: balance;
+  height: 200px;
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#column-fill', 'column-fill')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.column-fill")}}
diff --git a/files/de/web/css/column-gap/index.html b/files/de/web/css/column-gap/index.html
new file mode 100644
index 0000000000..9e41194a52
--- /dev/null
+++ b/files/de/web/css/column-gap/index.html
@@ -0,0 +1,94 @@
+---
+title: column-gap
+slug: Web/CSS/column-gap
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Mehrspalten
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+translation_of: Web/CSS/column-gap
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die CSS Eigenschaft <code>column-gap</code> bestimmt die Größe der Lücke zwischen den Spalten für Elemente, die als mehrspaltige Elemente dargestellt werden.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Schlüsselwortwert */
+column-gap: normal;
+
+/* &lt;length&gt; Werte */
+column-gap: 3px;
+column-gap: 2.5em;
+
+/* Globale Werte */
+column-gap: inherit;
+column-gap: initial;
+column-gap: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Übernimmt den vom Browser vordefinierten Wert. Laut Spezifikation sollte dieser Wert <code>1em</code> entsprechen.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Ein {{cssxref("&lt;length&gt;")}} Wert, welcher den Abstand der Lücke festlegt. Der Wert darf nicht negativ sein, <code>0</code> ist jedoch zulässig.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush:css; highlight:[4]">.content-box {
+  border: 10px solid #000000;
+  column-count: 3;
+  column-gap: 20px;
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#column-gap', 'column-gap')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<h3 id="Support_im_Flex_Layout">Support im Flex Layout</h3>
+
+<p>{{Compat("css.properties.column-gap.flex_context")}}</p>
+
+<h3 id="Support_im_Grid_Layout">Support im Grid Layout</h3>
+
+<p>{{Compat("css.properties.column-gap.grid_context")}}</p>
+
+<h3 id="Support_im_Multi-column_Layout">Support im Multi-column Layout</h3>
+
+<p>{{Compat("css.properties.column-gap.multicol_context")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/CSS/CSS_Referenz">CSS Referenz</a></li>
+</ul>
diff --git a/files/de/web/css/column-rule-color/index.html b/files/de/web/css/column-rule-color/index.html
new file mode 100644
index 0000000000..750321ff5e
--- /dev/null
+++ b/files/de/web/css/column-rule-color/index.html
@@ -0,0 +1,67 @@
+---
+title: column-rule-color
+slug: Web/CSS/column-rule-color
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Mehrspaltiges Layout
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/column-rule-color
+---
+<div>{{CSSRef("CSS Multi-columns")}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>column-rule-color</code> CSS Eigenschaft definiert die Farbe der Linie, die zwischen den Spalten in mehrspaltigen Layouts gezeichnet wird.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="twopartsyntaxbox"><a href="/de/docs/Web/CSS/Wertdefinitionssyntax" title="CSS/Value_definition_syntax">Formale Syntax</a>: {{csssyntax("column-rule-color")}}
+</pre>
+
+<pre>column-rule-color: red
+column-rule-color: rgb(192, 56, 78)
+column-rule-color: transparent
+column-rule-color: hsla(0, 100%, 50%, 0.6)
+
+column-rule-color: inherit
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt>&lt;color&gt;</dt>
+ <dd>Ist ein {{cssxref("&lt;color&gt;")}} Wert, der die Farbe der Linie angibt, die die Spalten trennt.</dd>
+</dl>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush:css">#header { column-rule-color: blue; }
+</pre>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#crc', 'column-rule-color')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.column-rule-color")}}
diff --git a/files/de/web/css/column-rule-style/index.html b/files/de/web/css/column-rule-style/index.html
new file mode 100644
index 0000000000..612ec4008b
--- /dev/null
+++ b/files/de/web/css/column-rule-style/index.html
@@ -0,0 +1,72 @@
+---
+title: column-rule-style
+slug: Web/CSS/column-rule-style
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Mehrspaltiges Layout
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/column-rule-style
+---
+<p>{{ CSSRef("CSS Multi-columns") }}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>column-rule-style</code> CSS Eigenschaft definiert den Stil der Linie, die zwischen den Spalten in mehrspaltigen Layouts gezeichnet wird.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="twopartsyntaxbox"><a href="/de/docs/Web/CSS/Wertdefinitionssyntax" title="CSS/Value_definition_syntax">Formale Syntax</a>: {{csssyntax("column-rule-style")}}
+</pre>
+
+<pre>column-rule-style: none
+column-rule-style: hidden
+column-rule-style: dotted
+column-rule-style: dashed
+column-rule-style: solid
+column-rule-style: double
+column-rule-style: groove
+column-rule-style: ridge
+column-rule-style: inset
+column-rule-style: outset
+
+column-rule-style: inherit
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt>&lt;br-style&gt; </dt>
+ <dd>Ist ein Schlüsselwort, das durch {{ cssxref("border-style") }} definiert wird und der den Stil der Linie angibt, die die Spalten trennt. Die Gestaltung muss wie im zusammenfallenden Border Model interpretiert werden.</dd>
+</dl>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: css">#header {-moz-column-rule-style: inset;}</pre>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Multicol', '#crs', 'column-rule-style') }}</td>
+   <td>{{ Spec2('CSS3 Multicol') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.column-rule-style")}}
diff --git a/files/de/web/css/column-rule-width/index.html b/files/de/web/css/column-rule-width/index.html
new file mode 100644
index 0000000000..b087970e95
--- /dev/null
+++ b/files/de/web/css/column-rule-width/index.html
@@ -0,0 +1,78 @@
+---
+title: column-rule-width
+slug: Web/CSS/column-rule-width
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Mehrspaltiges Layout
+  - Layout
+  - NeedsLiveSample
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+translation_of: Web/CSS/column-rule-width
+---
+<p>{{ CSSRef}}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>column-rule-width</code> CSS Eigenschaft definiert die Breite der Linie, die zwischen den Spalten in mehrspaltigen Layouts gezeichnet wird.</p>
+
+<p>{{cssinfo('column-rule-width')}}</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Schlüsselwortwerte */
+column-rule-width: thin;
+column-rule-width: medium;
+column-rule-width: thick;
+
+/* Längenwerte */
+column-rule-width: 1px;
+column-rule-width: 2.5em;
+
+/* Globale Werte */
+column-rule-width: inherit;
+column-rule-width: initial;
+column-rule-width: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt>&lt;'border-width'&gt; </dt>
+ <dd>Ist ein {{cssxref("border-width")}} Wert oder eines der Schlüsselwörter <code>thin</code>, <code>medium</code> oder <code>thick</code>, und beschreibt die Breite der Linie, die zwei Spalten trennt.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax('column-rule-width')}}</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: css">#header {
+  column-rule-width: thick;
+}
+</pre>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Multicol', '#crw', 'column-rule-width') }}</td>
+   <td>{{ Spec2('CSS3 Multicol') }}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{Compat("css.properties.column-rule-width")}}</p>
diff --git a/files/de/web/css/column-rule/index.html b/files/de/web/css/column-rule/index.html
new file mode 100644
index 0000000000..5df71109ef
--- /dev/null
+++ b/files/de/web/css/column-rule/index.html
@@ -0,0 +1,74 @@
+---
+title: column-rule
+slug: Web/CSS/column-rule
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Mehrspaltenlayout
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/column-rule
+---
+<div>{{CSSRef("CSS Multi-columns")}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>In mehrspaltigen Layouts beschreibt die <code>column-rule</code> CSS Eigenschaft eine gerade Linie, welche zwischen jeder Spalte dargestellt wird. Sie ist eine komfortable Kurzform, um das separate Setzen der einzelnen <code>column-rule-*</code> Eigenschaften zu vermeiden: {{Cssxref("column-rule-width")}}, {{Cssxref("column-rule-style")}} und {{Cssxref("column-rule-color")}}.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><a href="/de/docs/Web/CSS/Wertdefinitionssyntax" title="CSS/Value_definition_syntax">Formale Syntax</a>: {{csssyntax("column-rule")}}
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<p>Akzeptiert einen, zwei oder drei Werte in beliebiger Reihenfolge:</p>
+
+<dl>
+ <dt><code>&lt;column-rule-width&gt;</code></dt>
+ <dd>Ist eine {{cssxref("&lt;length&gt;")}} oder eins der drei Schlüsselwörter <code>thin</code>, <code>medium</code> oder <code>thick</code>. Siehe {{cssxref("border-width")}} für Details.</dd>
+ <dt><code>&lt;column-rule-style&gt;</code></dt>
+ <dd>Siehe {{cssxref("border-style")}} für mögliche Werte und Details.</dd>
+ <dt><code>&lt;column-rule-color&gt;</code></dt>
+ <dd>Ist ein {{cssxref("&lt;color&gt;")}} Wert.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre>p.foo { column-rule: dotted; }          /* entspricht "medium dotted currentColor" */
+p.bar { column-rule: solid blue; }      /* entspricht "medium solid blue" */
+p.baz { column-rule: solid 8px; }       /* entspricht "8px solid currentColor" */
+p.abc { column-rule: thick inset blue; }
+</pre>
+
+<h3 id="Live_Beispiel">Live Beispiel</h3>
+
+<div style="padding: 0.3em; background: gold; border: groove 2px gold; -moz-column-rule: inset 2px gold; -moz-column-width: 17em; -webkit-columns: 17em; -webkit-column-rule: inset 2px gold; columns: 17em; column-rule: inset 2px gold;">
+<p>padding:0.3em; background:gold; border:groove 2px gold; <strong>column-rule: inset 2px gold;</strong> <strong>column-width:17em;</strong></p>
+</div>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#column-rule', 'column-rule')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.column-rule")}}
diff --git a/files/de/web/css/column-span/index.html b/files/de/web/css/column-span/index.html
new file mode 100644
index 0000000000..c441af6d43
--- /dev/null
+++ b/files/de/web/css/column-span/index.html
@@ -0,0 +1,67 @@
+---
+title: column-span
+slug: Web/CSS/column-span
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Mehrspalten
+  - Referenz
+translation_of: Web/CSS/column-span
+---
+<div>{{CSSRef("CSS Multi-columns")}}</div>
+
+<h2 id="Summary" name="Summary">Übersicht</h2>
+
+<p>Die <a href="/en-US/docs/CSS" title="/en-US/docs/CSS">CSS</a> Eigenschaft <code>column-span</code> bestimmt die Laufweite eines Elements inerhalb eines Mehrspaltigen Containers.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="twopartsyntaxbox">{{csssyntax}}
+</pre>
+
+<pre>column-span: none
+column-span: all
+
+column-span: inherit
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Das Element fliesst nicht über mehrere Spalten hinweg.</dd>
+ <dt><code>all</code></dt>
+ <dd>Das Element fliesst über sämtliche Spalten hinweg. Der Inhalt davor wird automatisch zwischen den Spalten ausgeglichen.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<pre class="brush:css">h1, h2 {
+  column-span: all;
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Multicol', '#column-span0', 'column-width') }}</td>
+   <td>{{ Spec2('CSS3 Multicol') }}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.column-span")}}
diff --git a/files/de/web/css/column-width/index.html b/files/de/web/css/column-width/index.html
new file mode 100644
index 0000000000..2ba1dc5e11
--- /dev/null
+++ b/files/de/web/css/column-width/index.html
@@ -0,0 +1,99 @@
+---
+title: column-width
+slug: Web/CSS/column-width
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Mehrspalten
+  - Referenz
+translation_of: Web/CSS/column-width
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <strong><code>column-width</code></strong> CSS Eigenschaft schlägt eine optimale Spaltenbreite vor. Dies ist kein absoluter Wert, sondern lediglich ein Hinweis an den Browser, welcher die Breite der Spalte anhand des vorgeschlagenen Wertes anpasst, was skalierbare Designs ermöglicht, die sich verschiedenen Bildschirmgrößen anpassen. Besonders wenn die {{cssxref("column-count")}} CSS Eigenschaft angegeben ist, welche Vorrang hat, wenn es darum geht, eine exakte Spaltenbreite zu setzen, müssen alle Längenwerte angegeben werden. In horizontalem Text sind dies {{cssxref('width')}}, {{cssxref('column-width')}}, {{cssxref('column-gap')}} und {{cssxref('column-rule-width')}}.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Schlüsselwortwert */
+column-width: auto;
+
+/* Verschiedene &lt;length&gt; Werte */
+column-width: 6px;
+column-width: 25em;
+column-width: 0.3vw;
+
+/* Globale Werte */
+column-width: inherit;
+column-width: initial;
+column-width: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Ist ein {{cssxref("&lt;length&gt;")}} Wert, der einen Hinweis auf die optimale Breite der Spalte gibt. Die tatsächliche Spaltenbreite kann größer (um den verfügbaren Platz auszufüllen) oder schmaler (nur, falls der verfügbare Platz kleiner als die angegebene Spaltenbreite ist) sein. Die Länge muss positiv sein, ansonsten ist sie ungültig.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Ist ein Schlüsselwort, das angibt, dass die Breite der Spalte durch andere CSS Eigenschaften wie {{cssxref("column-count")}} bestimmt werden soll.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="HTML_Inhalt">HTML Inhalt</h3>
+
+<pre class="brush: html">&lt;div class="content-box"&gt;
+Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+&lt;/div&gt;</pre>
+
+<h3 id="CSS_Inhalt">CSS Inhalt</h3>
+
+<pre class="brush: css">.content-box {
+  border: 10px solid #0ff;
+
+  /* Chrome, Safari, Opera Präfix */
+  -webkit-column-width: 100px;
+
+  /* Mozilla Firefox Präfix */
+  -moz-column-width: 100px;
+
+  column-width: 100px;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Beispiele', '300px', '200px')}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Writing Modes', '#multicol-intrinsic', 'column-width')}}</td>
+   <td>{{Spec2('CSS3 Writing Modes')}}</td>
+   <td>Fügt innere Größen über die Schlüsselwörter <code>min-content</code>, <code>max-content</code>, <code>fill-available</code> und <code>fit-content</code> hinzu.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#cw', 'column-width')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{Compat("css.properties.column-width")}}</p>
diff --git a/files/de/web/css/columns/index.html b/files/de/web/css/columns/index.html
new file mode 100644
index 0000000000..5a243ed703
--- /dev/null
+++ b/files/de/web/css/columns/index.html
@@ -0,0 +1,113 @@
+---
+title: columns
+slug: Web/CSS/columns
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Mehrspalten Layout
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/columns
+---
+<div>{{CSSRef}}</div>
+
+<p>Die <a href="/de/docs/Web/CSS" title="CSS">CSS</a> Eigenschaft <strong><code>columns</code></strong> ist eine Kurzform Eigenschaft, die es erlaubt, sowohl die {{ cssxref('column-width') }} als auch die {{ cssxref("column-count") }} Eigenschaft auf einmal zu setzen.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/columns.html")}}</div>
+
+<p class="hidden">Die Quelle für dieses interaktive Beispiel ist in einem GitHub-Repository gespeichert. Wenn Sie zum Projekt der interaktiven Beispiele beitragen möchten, klonen Sie bitte <a href="/de/docs/">https://github.com/mdn/interactive-examples</a> und senden Sie uns eine Pull-Anfrage.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* Column width */
+columns: 18em;
+
+/* Column count */
+columns: auto;
+columns: 2;
+
+/* Both column width and count */
+columns: 2 auto;
+columns: auto 12em;
+columns: auto auto;
+
+/* Global values */
+columns: inherit;
+columns: initial;
+columns: unset;</pre>
+
+<p>Die Eigenschaft <code>columns</code> kann mit einem oder mit zwei von den unten aufgelisteten Werten in beliebiger Reihenfolge spezifiziert.</p>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>&lt;column-width&gt;</code></dt>
+ <dd>The ideal column width, defined as a {{cssxref("&lt;length&gt;")}} or the keyword <code>auto</code>. The actual width may be wider or narrower to fit the available space. See {{cssxref("column-width")}}.</dd>
+ <dt><code>&lt;column-count&gt;</code></dt>
+ <dd>The ideal number of columns into which the element's content should be flowed, defined as an {{cssxref("&lt;integer&gt;")}} or the keyword <code>auto</code>. If neither this value nor the column's width are <code>auto</code>, it merely indicates the maximum allowable number of columns. See {{cssxref("column-count")}}.</dd>
+</dl>
+
+<h2 id="Formale_Definition">Formale Definition</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formale_Syntax">Formale Syntax</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="Setting_three_equal_columns" name="Setting_three_equal_columns">Sets drei gleiche Spalten</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p class="content-box"&gt;
+  This is a bunch of text split into three columns
+  using the CSS `columns` property. The text
+  is equally distributed over the columns.
+&lt;/p&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; notranslate">.content-box {
+  columns: 3 auto;
+}</pre>
+
+<h4 id="Ergebnis">Ergebnis</h4>
+
+<p>{{EmbedLiveSample('Setting_three_equal_columns', 'auto', 120)}}</p>
+
+<h2 id="Specifications" name="Specifications">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Multicol', '#columns', 'columns') }}</td>
+   <td>{{ Spec2('CSS3 Multicol') }}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und senden Sie uns eine Pull-Anfrage.</div>
+
+<p>{{Compat("css.properties.columns")}}</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref("widows")}}</li>
+ <li>{{cssxref("orphans")}}</li>
+ <li><a href="https://developer.mozilla.org/de/docs/Web/CSS/Paged_Media">Seitennummerierte Medien</a></li>
+</ul>
diff --git a/files/de/web/css/content/index.html b/files/de/web/css/content/index.html
new file mode 100644
index 0000000000..686e098723
--- /dev/null
+++ b/files/de/web/css/content/index.html
@@ -0,0 +1,238 @@
+---
+title: content
+slug: Web/CSS/content
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - Referenz
+translation_of: Web/CSS/content
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+
+<p>Die <code>content</code> CSS Eigenschaft wird mit {{ cssxref("::before") }} und {{ cssxref("::after") }} Pseudo-elementen genutzt um Inhalte in einen Element zu generieren. Die Inhalte die in <code>content</code> eingefügt werden sind Anonym, sie werden nur gerendert und sind nicht im DOM vorhanden. Siehe:<em> <a href="/en-US/docs/CSS/Replaced_element" title="CSS/Replaced_element">replaced elements</a>.</em></p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("content")}}
+</pre>
+
+<pre>content: normal                                /* Keywords die nicht mit anderen Werten kombiniert werden können */
+content: none
+
+content: 'prefix'                              /* &lt;string&gt; Wert, nicht-lateinische Zeichen müssen codiert werden z.B. \00A0 for &amp;nbsp; */
+content: url(http://www.example.com/test.html) /* &lt;uri&gt; <span style="font-size: 1rem;">Wert</span><span style="font-size: 1rem;"> */</span>
+content: chapter_counter                       /* &lt;counter&gt; <span style="font-size: 1rem;">Werte</span><span style="font-size: 1rem;"> */</span>
+content: attr(value string)                    /* attr() Wert verbunden mit dem HTML Attribut Wert */
+content: open-quote                            /* Sprach- und positionsabhängige Keywords */
+content: close-quote
+content: no-open-quote
+content: no-close-quote
+
+content: open-quote chapter_counter            /* Außer für normal und none, können mehrere Werte gleichzeitig verwendet werden */
+
+content: inherit
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Das Pseudo-Element wird nicht erzeugt.</dd>
+ <dt><code>normal</code></dt>
+ <dd>Berechnet auf <code>none</code> für <code>:before</code> und <code>:after</code> Pseudo-elemente.</dd>
+ <dt>&lt;string&gt;</dt>
+ <dd>Text Inhalt.</dd>
+ <dt>&lt;uri&gt;<code> url()</code></dt>
+ <dd>Der Wert ist ein URI, die eine externe Ressource bezeichnet (beispielsweise ein Bild). Wenn die Ressource oder das Bild nicht angezeigt werden kann, wird es entweder ignoriert oder ein Platzhalter wird angezeigt.</dd>
+ <dt>&lt;counter&gt;</dt>
+ <dd>Die Zähler (Counters) können mit zwei verschiedenen Funktionen angegeben werden: 'counter()' oder 'counters()'. Ersteres hat zwei Formen: 'counter(name) "oder" counter(name, style). Der erzeugte Text ist der Wert des counter innersten, im Scope dieses Pseudoelements; es wird in der angegebenen Art ('dezimal' als Standard) formatiert. Die letztere Funktion hat auch zwei Formen: "counter(name, string) 'oder' counters(name, string, style) '. Der erzeugte Text ist der Wert aller Zähler mit dem angegebenen Namen im Scope dieses Pseudoelements, von außen nach innen, durch den angegebenen String getrennt. Die counter werden in der angegebenen Art ('dezimal' als Standard) wiedergegeben. Siehe den Abschnitt über automatische Counter und Nummerierung für weitere Informationen. Der Name darf nicht "none", "inherit" oder "initial" sein. Ein solcher Name bewirkt, dass die Deklaration ignoriert wird.</dd>
+ <dt><code>attr(X)</code></dt>
+ <dd>Gibt den Wert des Elementen Attributes X als String zurück. Gibt es kein Attribut X wird ein leerer String zurückgegeben. Die Groß- und Kleinschreibung von Attributnamen hängt von der Dokumentsprache ab.</dd>
+ <dt><code>open-quote</code> | <code>close-quote</code></dt>
+ <dd>Diese Werte werden durch die entsprechende Zeichenfolge aus der {{ cssxref("quotes") }} Eigenschaft ersetzt. </dd>
+ <dt><code>no-open-quote</code> | <code>no-close-quote</code></dt>
+ <dd>Stellt keine Inhalte, sondern erhöht (verringert) die Ebene der Schachtelung für Zitate.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Code_sample_-_headings_and_quotes" name="Code_sample_-_headings_and_quotes">Code Beispiele - Überschriften und Zitate</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;h1&gt;5&lt;/h1&gt;
+&lt;p&gt; We shall start this with a quote from Sir Tim Berners-Lee,
+    &lt;q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet"&gt;
+        I was lucky enough to invent the Web at the time when the Internet already existed - and had for a decade and a half.&lt;/q&gt;  We must understand that there is nothing fundamentally wrong with building on the contributions of others.
+&lt;/p&gt;
+
+&lt;h1&gt;6&lt;/h1&gt;
+&lt;p&gt; Here we shall quote the Mozilla Manifesto,
+    &lt;q cite="http://www.mozilla.org/en-US/about/manifesto/"&gt;
+        Individuals must have the ability to shape the Internet and their own experiences on the Internet.&lt;/q&gt; And so, we can infer that contributing to the open web, can protect our own individual experiences on it.
+&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">q {
+    color: #00008B;
+    font-style: italic;
+}
+
+q::before   { content: open-quote }
+q::after    { content: close-quote }
+
+h1::before  { content: "Chapter "; }</pre>
+
+<h4 id="Ausgabe">Ausgabe</h4>
+
+<p>{{ EmbedLiveSample('Code_sample_-_headings_and_quotes', 460, 100) }}</p>
+
+<h3 id="Code_sample_-_content_with_multiple_values" name="Code_sample_-_content_with_multiple_values">Code sample - content with multiple values adding an icon before a link</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;a href="http://www.mozilla.org/en-US/"&gt;Home Page&lt;/a&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">a::before{
+    content: url(http://www.mozilla.org/favicon.ico) " MOZILLA: ";
+    font:    x-small Arial,freeSans,sans-serif;
+    color:   gray;
+}</pre>
+
+<h4 id="Ausgabe_2">Ausgabe</h4>
+
+<p>{{ EmbedLiveSample('Code_sample_-_content_with_multiple_values', 200, 60) }}</p>
+
+<h3 id="Code_sample_-_adding_an_icon_after_text" name="Code_sample_-_adding_an_icon_after_text">Code sample - adding an icon after text in a custom list</h3>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;ul class="brightIdea"&gt;
+    &lt;li&gt;This is my first idea&lt;/li&gt;
+    &lt;li&gt;and another good idea&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">/* first import the icon from a suitable site */
+@import url(http://weloveiconfonts.com/api/?family=entypo);
+
+.brightIdea li::after{
+    content: '\1f4a1';
+    font-family: 'entypo', sans-serif;
+}</pre>
+
+<h4 id="Ausgabe_3">Ausgabe</h4>
+
+<p>{{ EmbedLiveSample('Code_sample_-_adding_an_icon_after_text', 300, 100) }}</p>
+
+<h3 id="Code_sample_-_class_based_example" name="Code_sample_-_class_based_example">Code sample - class based example</h3>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html">&lt;h2&gt;Paperback best sellers&lt;/h2&gt;
+&lt;ol&gt;
+    &lt;li&gt;Political thriller&lt;/li&gt;
+    &lt;li class="newEntry"&gt;Halloween Stories&lt;/li&gt;
+    &lt;li&gt;My Biography&lt;/li&gt;
+    &lt;li class="newEntry"&gt;Vampire Romance&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h4 id="CSS_4">CSS</h4>
+
+<pre class="brush: css">/* use a class rather that an element selector to give more flexibility.
+Simple string example, but don't forget add a leading space in the text string
+for spacing purposes  */
+
+.newEntry::after {
+    content: " New!";
+    color: red;
+}</pre>
+
+<h4 id="Ausgabe_4">Ausgabe</h4>
+
+<p>{{ EmbedLiveSample('Code_sample_-_class_based_example', 300, 200) }}</p>
+
+<h3 id="Code_sample_-_rich_link_styling" name="Code_sample_-_rich_link_styling">Code sample - rich link styling</h3>
+
+<h4 id="HTML_5">HTML</h4>
+
+<pre class="brush: html">&lt;ul&gt;
+    &lt;li&gt;&lt;a id="moz" href="http://www.mozilla.org/"&gt;
+        Mozilla Home Page&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a id="mdn" href="https://developer.mozilla.org/"&gt;
+        Mozilla Developer Network&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a id="w3c" href="http://www.w3c.org/"&gt;
+        World Wide Web Consortium&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="CSS_5">CSS</h4>
+
+<pre class="brush: css">a {
+    text-decoration: none;
+    border-bottom: 3px dotted navy;
+}
+
+a::after {
+    content: " (" attr(id) ")";
+}
+
+#moz::before {
+    content:url(https://mozorg.cdn.mozilla.net/media/img/favicon.ico) ;
+}
+
+#mdn::before {
+    content:url(https://mdn.mozillademos.org/files/7691/mdn-favicon16.png) ;
+}
+
+#w3c::before {
+    content:url(http://w3c.org/2008/site/images/favicon.ico) ;
+}
+
+li {
+    margin: 1em;
+}
+
+</pre>
+
+<h4 id="Ausgabe_5">Ausgabe</h4>
+
+<p>{{ EmbedLiveSample('Code_sample_-_rich_link_styling', 340, 200) }}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'generate.html#content', 'content') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
+
+<p>{{Compat("css.properties.content")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{ Cssxref("::after") }}, {{ Cssxref("::before") }}, {{ Cssxref("quotes") }}</li>
+</ul>
diff --git a/files/de/web/css/counter-increment/index.html b/files/de/web/css/counter-increment/index.html
new file mode 100644
index 0000000000..07c649e290
--- /dev/null
+++ b/files/de/web/css/counter-increment/index.html
@@ -0,0 +1,99 @@
+---
+title: counter-increment
+slug: Web/CSS/counter-increment
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Liste
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+translation_of: Web/CSS/counter-increment
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <strong><code>counter-increment</code></strong> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft wird verwendet, um den Wert von <a href="/de/docs/Web/CSS/CSS_Lists_and_Counters/CSS_Zähler_verwenden">CSS Zählern</a> um einen bestimmten Wert zu erhöhen. Der Wert des Zählers kann durch die {{cssxref("counter-reset")}} CSS Eigenschaft zurückgesetzt werden.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Erhöht 'counter-name' um 1 */
+counter-increment: counter-name;
+
+/* Verringert 'counter-name' um 1 */
+counter-increment: counter-name -1;
+
+/* Erhöht 'counter1' um 1 und verringert 'counter2' um 4 */
+counter-increment: counter1 counter2 -4;
+
+/* Belässt die Zähler unverändert: wird verwendet, um weniger spezifische Werte zu verstecken */
+counter-increment: none;
+
+/* Globale Werte */
+counter-increment: inherit;
+counter-increment: initial;
+counter-increment: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt>{{cssxref("custom-ident", "&lt;custom-ident&gt;")}}</dt>
+ <dd>Der Name des Zählers, der erhöht bzw. verringert werden soll. Dieser Bezeichner besteht aus einer Kombination von den schreibungsunabhängigen Buchstaben <code>a</code> bis <code>z</code>, den Zahlen <code>0</code> bis <code>9</code>, Unterstrichen (<code>_</code>), und/oder Bindestrichen (<code>-</code>). Das erste Zeichen, das kein Bindestrich ist, muss ein Buchstabe sein (d. h. am Anfang darf keine Zahl stehen, auch nicht, wenn davor ein Bindestrich steht). Zudem sind zwei Bindestriche am Anfang des Bezeichners verboten. Er darf weder <code>none</code>, <code>unset</code>, <code>initial</code> oder <code>inherit</code> unabhängig von Groß- und Kleinschreibung sein.</dd>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>Der Wert, der dem Zähler hinzugefügt wird. Falls nicht angegeben, wird <code>1</code> verwendet.</dd>
+ <dt><code>none</code></dt>
+ <dd>Keiner der Zähler wird verändert. Dieser Wert wird als Standardwert verwendet oder um eine Erhöhung bzw. Verringerung in spezifischeren Regeln zurückzusetzen.</dd>
+</dl>
+
+<p>Es können beliebig viele Zähler erhöht bzw. verringert werden, jeder durch ein Leerzeichen getrennt.</p>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: css">h1 {
+  counter-increment: chapter section 2 page;
+  /* Erhöht den Wert der 'chapter' und 'page' Zähler um 1
+     und den 'section' Zähler um 2. */
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Lists", "#counter-increment", "counter-increment")}}</td>
+   <td>{{Spec2("CSS3 Lists")}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "generate.html#propdef-counter-increment", "counter-increment")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.counter-increment")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/CSS/CSS_Lists_and_Counters/CSS_Zähler_verwenden">CSS Zähler verwenden</a></li>
+ <li>{{cssxref("counter-reset")}}</li>
+</ul>
diff --git a/files/de/web/css/counter-reset/index.html b/files/de/web/css/counter-reset/index.html
new file mode 100644
index 0000000000..3b35441a61
--- /dev/null
+++ b/files/de/web/css/counter-reset/index.html
@@ -0,0 +1,100 @@
+---
+title: counter-reset
+slug: Web/CSS/counter-reset
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Liste
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+translation_of: Web/CSS/counter-reset
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>counter-reset</code> <a href="/de/docs/Web/CSS" title="CSS">CSS</a> Eigenschaft wird verwendet, um <a href="/de/docs/Web/CSS/CSS_Lists_and_Counters/CSS_Zähler_verwenden" title="CSS_Counters">CSS Zähler</a> auf einen bestimmten Wert zurückzusetzen.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Setzt 'counter-name' auf 0 */
+counter-reset: counter-name;
+
+/* Setzt 'counter-name' auf -1 */
+counter-reset: counter-name -1;
+
+/* Setzt 'counter1' auf 1 und 'counter2' auf 4 */
+counter-reset: counter1 1 counter2 4;
+
+/* Bricht alle Rücksetzungen ab, die in weniger spezifischen Regeln gesetzt würden */
+counter-reset: none;
+
+/* Globale Werte */
+counter-reset: inherit;
+counter-reset: initial;
+counter-reset: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt>{{cssxref("custom-ident", "&lt;custom-ident&gt;")}}</dt>
+ <dd>Der Name des Zählers, der zurückgesetzt werden soll. Dieser Bezeichner besteht aus einer Kombination von den schreibungsunabhängigen Buchstaben <code>a</code> bis <code>z</code>, den Zahlen <code>0</code> bis <code>9</code>, Unterstrichen (<code>_</code>), und/oder Bindestrichen (<code>-</code>). Das erste Zeichen, das kein Bindestrich ist, muss ein Buchstabe sein (d. h. am Anfang darf keine Zahl stehen, auch nicht, wenn davor ein Bindestrich steht). Zudem sind zwei Bindestriche am Anfang des Bezeichners verboten. Er darf weder <code>none</code>, <code>unset</code>, <code>initial</code> oder <code>inherit</code> unabhängig von Groß- und Kleinschreibung sein.</dd>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>Der Wert, auf den der Zähler bei jedem Vorkommen des Elements zurückgesetzt werden soll. Falls nicht angegeben, wird <code>0</code> verwendet.</dd>
+ <dt><code>none</code></dt>
+ <dd>Ist ein Schlüsselwort, das angibt, dass keiner der Zähler zurückgesetzt wird. Es kann dazu verwendet werden, um <code>counter-reset</code> Werte zu verstecken, die in weniger spezifischen Regeln definiert wurden.</dd>
+</dl>
+
+<p>Es können beliebig viele Zähler zurückgesetzt werden, jeder durch ein Leerzeichen getrennt.</p>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush:css">h1 {
+  counter-reset: chapter section 1 page;
+  /* Setzt den 'chapter' und 'page' Zähler auf 0
+     und den 'section' Zähler auf 1. */
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Lists', '#counter-reset', 'counter-reset')}}</td>
+   <td>{{Spec2('CSS3 Lists')}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html#propdef-counter-reset', 'counter-reset')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.counter-reset")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a class="new" href="/de/docs/Web/CSS/CSS_Lists_and_Counters/CSS_Zähler_verwenden" title="CSS Counters">CSS Zähler</a></li>
+ <li>{{Cssxref("counter-increment")}}</li>
+ <li>{{cssxref("@counter-style")}}</li>
+</ul>
diff --git a/files/de/web/css/css_animations/css_animationen_nutzen/index.html b/files/de/web/css/css_animations/css_animationen_nutzen/index.html
new file mode 100644
index 0000000000..ea0dc4e7de
--- /dev/null
+++ b/files/de/web/css/css_animations/css_animationen_nutzen/index.html
@@ -0,0 +1,365 @@
+---
+title: CSS Animationen nutzen
+slug: Web/CSS/CSS_Animations/CSS_Animationen_nutzen
+translation_of: Web/CSS/CSS_Animations/Using_CSS_animations
+---
+<p>{{SeeCompatTable}}{{CSSRef}}</p>
+
+<p><span class="seoSummary"><strong>CSS Animationen</strong> ermöglichen animierte Übergänge von einem CSS Style-Konfiguration zur nächsten. Die Animationen bestehen aus zwei Komponenten: Einem Style, der die Animation beschreibt, sowie einer Menge von Keyframes, die Start, Ende und mögliche Zwischenpositionen der Animation festlegt.</span></p>
+
+<p>Es gibt drei zentrale Vorteile von CSS-Animationen gegenüber traditionellen skriptgetriebenen Animationstechniken:</p>
+
+<ol>
+ <li>Sie sind einfach zu nutzen für simple Animationen; man kann sie ohne Javascript-Kenntnisse erstellen. </li>
+ <li>Die Animationen laufen performant, sogar unter mäßiger Systemauslastung. Im Gegensatz dazu fallen selbst simple Javascript-Animationen durch schlechte Performance auf. Die Engine kann einzelne Frames überspringen und kennt weitere Techniken, um die Ausführung so sauber wie möglich zu gestalten. </li>
+ <li>Da der Browser die Animation kontrolliert, kann er selbstständig die Performance optimieren, zum Beispiel durch das Drosseln der Freqenz von Animationen in aktuell nicht sichtbaren Browser-Tabs.</li>
+</ol>
+
+<h2 id="Konfigurieren_der_Animation">Konfigurieren der Animation</h2>
+
+<p>Um eine CSS-Animation zu erstellen, fügt man dem zu animierenden Element die {{ cssxref("animation") }}-Eigenschaft oder seine Sub-Eigenschaften zu. So lassen sich Timing und Dauer der Animation sowie weitere Details des Animationsablaufes bestimmen. Man legt damit <strong>nicht </strong>die eigentliche Darstellung der Animation fest, die mittels {{ cssxref("@keyframes") }} definiert wird. Siehe {{ anch("Definieren der Animationssequenz mittels Keyframes") }} weiter unten.</p>
+
+<p>Die Sub-Eigenschaften der {{ cssxref("animation") }}-Eigenschaft sind:</p>
+
+<dl>
+ <dt>{{ cssxref("animation-name") }}</dt>
+ <dd>Spezifiziert den Namen der {{ cssxref("@keyframes") }}-at-Regel, welche die einzelnen Keyframes beschreibt.</dd>
+ <dt>{{ cssxref("animation-duration") }}</dt>
+ <dd>Legt die Dauer der Animation für einen kompletten Durchgang fest.</dd>
+ <dt>{{ cssxref("animation-timing-function") }}</dt>
+ <dd>Konfiguriert das Timing der Animation. Konkret werden die Übergänge zwischen den einzelnen Keyframes mittels Beschleunigungskurven festgelegt.</dd>
+ <dt>{{ cssxref("animation-delay") }}</dt>
+ <dd>Setzt den Abstand zwischen dem Zeitpunkt, an dem die Animation vollständig geladen ist und dem Start der Animationssequenz.</dd>
+ <dt>{{ cssxref("animation-iteration-count") }}</dt>
+ <dd>Konfiguriert wie oft die Animation wiederholt wird; mittels <code>infinite</code> wird die Animation unendlich wiederholt.</dd>
+ <dt>{{ cssxref("animation-direction") }}</dt>
+ <dd>Legt fest, ob die Animation nach jedem Durchgang die Abspielrichtung wechselt oder zum Startpunkt zurückspringt und sich wiederholt. </dd>
+ <dt>{{ cssxref("animation-fill-mode") }}</dt>
+ <dd>Legt fest, welche Styles vor und nach dem Ausführen der Animation auf das animierte Element angewendet werden.</dd>
+ <dt>{{ cssxref("animation-play-state") }}</dt>
+ <dd>Ermöglicht das Pausieren und Wiederaufnehmen einer Animationssequenz.</dd>
+ <dt>
+ <h2 id="Definieren_der_Animationssequenz_mittels_Keyframes">Definieren der Animationssequenz mittels Keyframes</h2>
+ </dt>
+</dl>
+
+<p>Nachdem Sie den zeitlichen Ablauf der Animation festgelegt haben, müssen Sie die Erscheinung der Animation festlegen. Sie erreichen dies, indem Sie zwei oder mehr Keyframes mit Hilfe der {{ cssxref("@keyframes") }} at-Regel erstellen. Jeder Keyframe beschreibt den Darstellungszustand des animierten Elements zum gegebenen Zeitpunkt der Animationssequenz.</p>
+
+<p>Da der zeitliche Ablauf der Animation im CSS-Style, welcher die Animation konfiguriert, festgelegt ist, verwenden Keyframes {{ cssxref("percentage") }} um den Zeitpunkt festzulegen, wann die Animationssequenz beginnen soll. 0% steht für den ersten Moment der Animationssequenz, wohingegen 100%  den letzten Zustand der Animation beschreibt. Weil diese beiden Keyframes so wichtg sind gibt es zwei Wörter für sie: <code>from</code> und <code>to</code>. Sie sind beide optional. Falls <code>from/0%</code> oder <code>to/100%</code> nicht definiert sind , startet oder stoppt der Browser die Animation gemäß der berechneten Werte aller Attribute.</p>
+
+<p>Sie können optional zusätzliche Keyframes einfügen, die jeweils Zwischenschritte auf dem Weg vom Start- zum Endpunkt der Animation beschreiben.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<div class="note"><strong>Hinweis:</strong> Einige ältere Browser (vor 2017) benötigen unter Umständen Präfixe; die Live-Beispiele, welche durch einen Klick im Browser betrachtet werden können, beinhalten die <code>-webkit</code> Präfix-Syntax.</div>
+
+<h3 id="Einen_Text_übers_Fenster_gleiten_lassen.">Einen Text übers Fenster gleiten lassen.</h3>
+
+<p>Dieses einfache Beispiel an einem {{ HTMLElement("p") }}-Element lässt einen Text von rechts über das Browserfenster gleiten.</p>
+
+<p>Beachte, dass solche Animationen dafür sorgen können, dass die Seite breiter als das Browser-Fenster wird. Um dieses Problem zu umgehen, wird das zu animierende Element in einen Container gepackt. Der Container erhält anschließend die {{cssxref("overflow")}}<code>:hidden</code> Eigenschaft.</p>
+
+<pre class="brush: css">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<p>In diesem Beispiel, bestimmt der Style für das {{ HTMLElement("p") }}-Element, dass durch den Einsatz von {{ cssxref("animation-duration") }} die Animation von Anfang bis Ende in drei Sekunden ausgeführt werden soll. Der Name der {{ cssxref("@keyframes") }} at-Regel, welche die Keyframes der Animation beschreibt, lautet "slidein".</p>
+
+<p>Falls Sie weitere angepasste Styles auf das {{ HTMLElement("p") }}-Element anwenden wollen, die keine CSS-Animationen unterstützen, würden diese hier ebenfalls eingefügt werden. In diesem Falle wollen wir aber außer der Animation keine weiteren Styles festlegen.</p>
+
+<p>Die Keyframes werden anhand der {{ cssxref("@keyframes") }} at-Regel festgelegt. In diesem Beispiel haben wir nur zwei Keyframes. Der erste tritt bei 0% (aufgrund des Aliases <code>from</code>) ein. Hier bestimmen wir einen linken Außenabstand des Elements von 100% (das heißt, am rechten äußeren Rand des umschließenden Elements). Darüberhinaus wird die Breite des Elements auf 300% gesetzt (oder drei Mal der Breite des umgebenden Elements). Dadurch wird der Header im ersten Frame der Animation außerhalb des rechten Randes des Browser-Fensters gezeichnet.</p>
+
+<p>Der zweite (und letzte) Keyframe tritt bei 100% ein (aufgrund des Aliases <code>to</code>). Der linke Außenabstand wird auf 0% gesetzt und die Breite des Elements auf 100% aktualisiert. Dadurch beendet der Header seine Animation mit einer Ausrichtung am linken Rand des Inhaltsbereichs.</p>
+
+<pre class="brush: html">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Hinweis</strong>: Laden Sie die Seite neu, um die Animation zu sehen. Oder klicken Sie auf den CodePen-Knopf, um die Animation innerhalb der CodePen-Umgebung zu betrachten.</p>
+</div>
+
+<p>{{EmbedLiveSample("Making_text_slide_across_the_browser_window","100%","250")}}</p>
+
+<h3 id="Hinzufügen_eines_weiteren_Keyframes">Hinzufügen eines weiteren Keyframes</h3>
+
+<p>Lassen Sie uns eine weitere Keyframe zur Animation des vorigen Beispiels hinzufügen. Sagen wir, wir wollen zunächst für eine Weile die Schriftgröße des Headers erhöhen, während er sich von rechts nach links bewegt. Am Ende soll sie wieder auf ihre ursprüngliche Größe schrumpfen. Das ist so einfach wie das Hinzufügen dieser Keyframe:</p>
+
+<pre class="brush: css">75% {
+  font-size: 300%;
+  margin-left: 25%;
+  width: 150%;
+}
+</pre>
+
+<p>Der vollständige Code sieht nun so aus:</p>
+
+<pre class="brush: css">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  75% {
+    font-size: 300%;
+    margin-left: 25%;
+    width: 150%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}</pre>
+
+<pre class="brush: html">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;</pre>
+
+<p>Dies teilt dem Browser mit, dass nach 75% der Animationssequenz der linke Außenabstand des Headers bei 25% und die Breite bei 150% liegen sollte.</p>
+
+<div class="blockIndicator note">
+<p><strong>Hinweis</strong>: Laden Sie die Seite neu, um die Animation zu sehen. Oder klicken Sie auf den CodePen-Knopf, um die Animation innerhalb der CodePen-Umgebung zu betrachten.</p>
+</div>
+
+<p>{{EmbedLiveSample("Adding_another_keyframe","100%","250")}}</p>
+
+<h3 id="Lass_es_sich_wiederholen">Lass es sich wiederholen</h3>
+
+<p>Damit die Animation sich wiederholt, nutzen Sie die {{ cssxref("animation-iteration-count") }}-Eigenschaft, um festzulegen, wie oft sich die Animation wiederholen soll. In diesem Beispiel setzen wir sie auf <code>infinite</code>, damit sich die Animation unendlich oft wiederholt:</p>
+
+<pre class="brush: css">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+</pre>
+
+<p>Nach Hinzufügen zum bisherigen Code:</p>
+
+<pre class="brush: css">@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}</pre>
+
+<pre class="brush: html">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample("Making_it_repeat","100%","250")}}</p>
+
+<h3 id="Lassen_Sie_es_sich_vor-_und_zurück_bewegen">Lassen Sie es sich vor- und zurück bewegen</h3>
+
+<p>Die vorige Anpassung sorgte dafür, dass sich die Animation wiederholte. Aber es ist sehr eigenartig, dass die Animation jedes Mal zum Anfang zurückspringt, wenn sie sich wiederholt. Was wir wirklich wollen ist ein Vor- und Zurückbewegen über den Bildschirm. Dazu muss die {{ cssxref("animation-direction") }}-Eigenschaft auf <code>alternate</code> gesetzt werden:</p>
+
+<pre class="brush: css">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+</pre>
+
+<p>Damit sieht der übrige Code folgendermaßen aus:</p>
+
+<pre class="brush: css">@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}</pre>
+
+<pre class="brush: html">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample("Making_it_move_back_and_forth","100%","250")}}</p>
+
+<h3 id="Benutzen_der_Animation_Kurzversion">Benutzen der Animation Kurzversion</h3>
+
+<p>Die {{cssxref("animation")}}-Kurzversion ist hilfreich, um Platz zu sparen. Zum Beispiel haben wir diese Regel während dieses Artikels genutzt:</p>
+
+<pre class="brush: css">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+</pre>
+
+<p>Sie könnte durch Folgendes ersetzt werden:</p>
+
+<pre class="brush: css">p {
+  animation: 3s infinite alternate slidein;
+}
+</pre>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Sie können weitere Beispiele auf der Referenzseite von {{cssxref("animation")}} finden.</p>
+</div>
+
+<h3 id="Setzen_mehrere_Animationseigenschaftswerte">Setzen mehrere Animationseigenschaftswerte</h3>
+
+<p>Die Langversion der CSS-Animation akzeptiert mehrere durch Komma getrennte Werte — eine Eigenschaft, die genutzt werden kann, um mehrere Animationen in einer einzigen Regel anzuwenden. Daneben lassen sich für die verschiedenen Animationen die Dauer, Anzahl der Wiederholungen usw. einzeln festlegen. Sehen Sie sich die folgenden kurzen Beispiele an, die die verschiedenen Kombinationen erklären:</p>
+
+<p>In diesem ersten Beispiel wurden drei Animations-Namen gesetzt, aber nur eine Dauer und Anzahl der Wiederholungen gesetzt. In diesem Falle erhalten alle drei Animationen die gleiche Dauer und Anzahl der Wiederholungen:</p>
+
+<pre class="brush: css">animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 3s;
+animation-iteration-count: 1;</pre>
+
+<p>In diesem zweiten Beispiel wurden drei Werte für drei Eigenschaften gesetzt. In diesem Falle entsprechen die Werte an der selben Position jeder Eigenschaft der jeweiligen Animation. So hat die <code>fadeInOut</code> Animation beispielsweise eine Dauer von 2.5s und wiederholt sich zwei Mal usw.</p>
+
+<pre class="brush: css">animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s, 1s;
+animation-iteration-count: 2, 1, 5;</pre>
+
+<p>In diesem dritten Beispiel wurden drei Animationen festgelegt, aber nur zwei Dauern und Anzahl der Wiederholungen. In Fällen wie diesen, in denen es nicht genug Werte gibt, um jeder Animation ihren eigenen Wert zuzuweisen, wiederholt sich der Wertze-Zyklus von Anfang bis Ende. Beispielsweise erhält fadeInOut eine Dauer von 2.5s und moveLeft300px eine von 5s. Damit sind wir am Ende der verfügbaren Werte für die Dauer angelangt, also fangen wir von vorne an — bounce bekommt daher eine dauer von 2.5s zugewiesen. Die Anzahl der Wiederholungen (und alle weiteren Eigenschaften, die Sie so festlegen), werden auf die selbe Weise zugewiesen.</p>
+
+<pre class="brush: css">animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s;
+animation-iteration-count: 2, 1;</pre>
+
+<h3 id="Benutzen_von_Animations-Ereignissen">Benutzen von Animations-Ereignissen</h3>
+
+<p>Sie können zusätzliche Kontrolle über Animationen — sowie mehr nützliche Informationen — erhalten, indem sie Animations-Ereignisse nutzen. Diese Ereignisse werden durch das {{domxref("AnimationEvent")}}-Objekt repräsentiert. Es kann genutzt werden, um den Start, das Ende oder den Beginn einer Wiederholung zu erkennen. Jedes Ereignis beinhaltet die Zeit, an der es auftrat sowie den Namen der Animation, welche es getriggert hat.</p>
+
+<p>Wir passen das Beispiel mit dem gleitenden Text an, um einige Informationen über jedes Animations-Ereignis bei Eintritt auszugeben, um zu sehen, wie sie funktionieren.</p>
+
+<h4 id="Hinzufügen_des_CSS">Hinzufügen des CSS</h4>
+
+<p>Wir beginnen mit dem Schreiben des CSS für die Animation. Diese Animation wird drei Sekunden dauern, “slidein” genannt werden, sich drei Mal wiederholen, und dabei jedes Mal die Richtung ändern. In den {{cssxref("@keyframes")}} wird die Breite under linke Außenabstand manipuliert, um das Element über den Bildschirm gleiten zu lassen.</p>
+
+<pre class="brush: css">.slidein {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: 3;
+  animation-direction: alternate;
+}
+
+@keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+    margin-left:0%;
+    width:100%;
+  }
+}</pre>
+
+<h4 id="Hinzufügen_der_Animations-Ereignis-Listener">Hinzufügen der Animations-Ereignis-Listener</h4>
+
+<p>Wir verwenden JavaScript-Code, um auf alle drei möglichen Animationsereignisse zu aluschen. Der folgende Code konfiguriert unsere Event Listener. Wir rufen ihn auf, wenn das Dokument das erste Mal geladen wurde, um die Dinge einzurichten.</p>
+
+<pre class="brush: js">var element = document.getElementById("watchme");
+element.addEventListener("animationstart", listener, false);
+element.addEventListener("animationend", listener, false);
+element.addEventListener("animationiteration", listener, false);
+
+element.className = "slidein";
+</pre>
+
+<p>Dies ist ziemlich üblicher Code; Sie können mehr über die Details der Funktionsweise in der Dokumentation zu {{domxref("eventTarget.addEventListener()")}} erfahren. Als letztes setzt dieser Code die <code>class</code> des Elements, welches wir animieren wollen, auf “slidein”, um die Animation damit zu starten.</p>
+
+<p>Warum? Weil das <code>animationstart</code> Ereignis mit dem Beginn der Animation gestartet wird. In unserem Falle vor Ausführung des Codes. Daher starten wir die Animation selber durch das Setzen von class auf dem Element zu dem Werte, welches die Animation steuert.</p>
+
+<h4 id="Empfangen_von_Ereignissen">Empfangen von Ereignissen</h4>
+
+<p>Die Ereignisse werden an die untenstehende <code>listener()</code> Funktion durchgereicht.</p>
+
+<pre class="brush: js">function listener(event) {
+  var l = document.createElement("li");
+  switch(event.type) {
+    case "animationstart":
+      l.innerHTML = "Started: elapsed time is " + event.elapsedTime;
+      break;
+    case "animationend":
+      l.innerHTML = "Ended: elapsed time is " + event.elapsedTime;
+      break;
+    case "animationiteration":
+      l.innerHTML = "New loop started at time " + event.elapsedTime;
+      break;
+  }
+  document.getElementById("output").appendChild(l);
+}
+</pre>
+
+<p>Auch dieser Code ist sehr einfach. Es schaut auf den {{domxref("event.type")}}, um zu bestimmen, welche Art von Animation eingetreten ist. Danach fügt es die entsprechende Notiz zur {{HTMLElement("ul")}} (ungeordneten Liste) hinzu, welche wir benutzen, um die Ereignisse mitzuschneiden.</p>
+
+<p>Schlussendlich sieht die Ausgabe in etwa folgendermaßen aus:</p>
+
+<ul>
+ <li>Started: elapsed time is 0</li>
+ <li>New loop started at time 3.01200008392334</li>
+ <li>New loop started at time 6.00600004196167</li>
+ <li>Ended: elapsed time is 9.234000205993652</li>
+</ul>
+
+<p>Beachten Sie, dass die Zeiten ziemlich nah, aber nicht exakt denen entsprechen, die wir in der Animation konfiguriert haben. Beachten Sie außerdem, dass bei der letzten Animation, das <code>animationiteration</code> Ereignis nicht gesetzt wurde. Stattdessen wurde ein <code>animationend</code> Ereignis gesendet.</p>
+
+<h4 id="Das_HTML">Das HTML</h4>
+
+<p>Der Vollständigkeit halber ist hier das HTML, welches den Seiteninhalt darstellt und die Liste beinhaltet, welche vom Skript mit Informationen über empfangene Ereignisse gefüllt wird:</p>
+
+<pre class="brush: html">&lt;h1 id="watchme"&gt;Watch me move&lt;/h1&gt;
+&lt;p&gt;
+  This example shows how to use CSS animations to make &lt;code&gt;H1&lt;/code&gt;
+  elements move across the page.
+&lt;/p&gt;
+&lt;p&gt;
+  In addition, we output some text each time an animation event fires,
+  so you can see them in action.
+&lt;/p&gt;
+&lt;ul id="output"&gt;
+&lt;/ul&gt;
+</pre>
+
+<p>Hier gibt es eine Live-Ausgabe:</p>
+
+<div class="blockIndicator note">
+<p><strong>Hinweis</strong>: Laden Sie die Seite neu, um die Animation zu sehen. Oder klicken Sie auf den CodePen-Knopf, um die Animation innerhalb der CodePen-Umgebung zu betrachten.</p>
+</div>
+
+<p>{{EmbedLiveSample('Using_animation_events', '600', '300')}}</p>
+
+<h2 id="Zum_Weiterlesen">Zum Weiterlesen</h2>
+
+<ul>
+ <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/CSS/CSS_animations/Detecting_CSS_animation_support" title="en/CSS/CSS animations/Detecting CSS animation support">Detecting CSS animation support</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">Using CSS transitions</a></li>
+</ul>
diff --git a/files/de/web/css/css_animations/index.html b/files/de/web/css/css_animations/index.html
new file mode 100644
index 0000000000..35df3692b4
--- /dev/null
+++ b/files/de/web/css/css_animations/index.html
@@ -0,0 +1,79 @@
+---
+title: CSS Animations
+slug: Web/CSS/CSS_Animations
+tags:
+  - CSS
+  - CSS Animations
+  - Experimental
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Animations
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<p><strong>CSS Animations</strong> is a module of CSS that defines how to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, their number of repetitions, and how they repeat.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="CSS_Properties">CSS Properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("animation")}}</li>
+ <li>{{cssxref("animation")}}</li>
+ <li>{{cssxref("animation-delay")}}</li>
+ <li>{{cssxref("animation-direction")}}</li>
+ <li>{{cssxref("animation-duration")}}</li>
+ <li>{{cssxref("animation-fill-mode")}}</li>
+ <li>{{cssxref("animation-iteration-count")}}</li>
+ <li>{{cssxref("animation-name")}}</li>
+ <li>{{cssxref("animation-play-state")}}</li>
+ <li>{{cssxref("animation-timing-function")}}</li>
+</ul>
+</div>
+
+<h3 id="CSS_At-rules">CSS At-rules</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@keyframes")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Animations/Detecting_CSS_animation_support">Detecting CSS animation support</a></dt>
+ <dd>Describes a technique for detecting if the browser supports CSS animations.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Using CSS animations</a></dt>
+ <dd>Step-by-step tutorial about how to create animations using CSS, this article describes each relevant CSS property and at-rule and explains how they interact.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Animations') }}</td>
+   <td>{{ Spec2('CSS3 Animations') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+{{Compat("css.properties.animation")}}
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Related to CSS Animations, <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS Transitions</a> can trigger animations on user actions.</li>
+</ul>
diff --git a/files/de/web/css/css_background_and_borders/border-image_generator/index.html b/files/de/web/css/css_background_and_borders/border-image_generator/index.html
new file mode 100644
index 0000000000..ff2740480a
--- /dev/null
+++ b/files/de/web/css/css_background_and_borders/border-image_generator/index.html
@@ -0,0 +1,2626 @@
+---
+title: Border-image Generator
+slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator
+tags:
+  - CSS
+  - Werkzeuge
+translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator
+---
+<p>Dieses Werkzeug kann dazu verwendet werden, CSS3 {{cssxref("border-image")}} Werte zu erzeugen.</p>
+
+<div style="display: none;">
+<h2 id="Border_Image_Generator" name="Border_Image_Generator">Border Image Generator</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">    &lt;div id="container"&gt;
+
+        &lt;div id="gallery"&gt;
+            &lt;div id="image-gallery"&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png" data-stateID="border1"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png" data-stateID="border2"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png" data-stateID="border3"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png" data-stateID="border4"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png" data-stateID="border5"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg" data-stateID="border6"/&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="load-actions" class="group section"&gt;
+            &lt;div id="toggle-gallery" data-action="hide"&gt; &lt;/div&gt;
+            &lt;div id="load-image" class="button"&gt; Upload image &lt;/div&gt;
+            &lt;input id="remote-url" type="text" placeholder="Load an image from URL"/&gt;
+            &lt;div id="load-remote" class="button"&gt; &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="general-controls" class="group section"&gt;
+            &lt;div class="name"&gt; Control Box &lt;/div&gt;
+            &lt;div class="separator"&gt;&lt;/div&gt;
+            &lt;div class="property"&gt;
+                &lt;div class="name"&gt;scale&lt;/div&gt;
+                &lt;div class="ui-input-slider" data-topic="scale"
+                    data-unit="%" data-max="300" data-sensivity="10"&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class="separator"&gt;&lt;/div&gt;
+            &lt;div class="property"&gt;
+                &lt;div class="name"&gt;draggable&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='drag-subject'&gt;&lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class="property right"&gt;
+                &lt;div class="name"&gt;section height&lt;/div&gt;
+                &lt;div class="ui-input-slider" data-topic="preview-area-height"
+                    data-min="400" data-max="1000"&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="preview_section" class="group section"&gt;
+            &lt;div id="subject"&gt;
+                &lt;div class="guideline" data-axis="Y" data-topic="slice-top"&gt;&lt;/div&gt;
+                &lt;div class="guideline" data-axis="X" data-topic="slice-right"&gt;&lt;/div&gt;
+                &lt;div class="guideline" data-axis="Y" data-topic="slice-bottom"&gt;&lt;/div&gt;
+                &lt;div class="guideline" data-axis="X" data-topic="slice-left"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div id="preview"&gt; &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;!-- controls --&gt;
+        &lt;div id="controls" class="group section"&gt;
+
+            &lt;!-- border-image-slice --&gt;
+            &lt;div id="border-slice-control" class="category"&gt;
+                &lt;div class="title"&gt; border-image-slice &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="name"&gt;fill&lt;/div&gt;
+                    &lt;div class="ui-checkbox" data-topic='slice-fill'&gt;&lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;!-- border-image-width --&gt;
+            &lt;div id="border-width-control" class="category"&gt;
+                &lt;div class="title"&gt; border-image-width &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;!-- border-image-outset --&gt;
+            &lt;div id="border-outset-control" class="category"&gt;
+                &lt;div class="title"&gt; border-image-outset &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;!-- other-settings --&gt;
+            &lt;div id="aditional-properties" class="category"&gt;
+                &lt;div class="title"&gt; aditional-properties &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="name"&gt; repeat-x &lt;/div&gt;
+                    &lt;div class="ui-dropdown border-repeat" data-topic="image-repeat-X" data-selected="2"&gt;
+                        &lt;div data-value="0"&gt;repeat&lt;/div&gt;
+                        &lt;div data-value="0"&gt;stretch&lt;/div&gt;
+                        &lt;div data-value="0"&gt;round&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="name"&gt; repeat-y &lt;/div&gt;
+                    &lt;div class="ui-dropdown border-repeat" data-topic="image-repeat-Y" data-selected="2"&gt;
+                        &lt;div data-value="1"&gt;repeat&lt;/div&gt;
+                        &lt;div data-value="1"&gt;stretch&lt;/div&gt;
+                        &lt;div data-value="1"&gt;round&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="ui-input-slider" data-topic="font-size" data-info="em size"
+                        data-unit="px" data-value="12" data-sensivity="3"&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+
+                &lt;div class="property"&gt;
+                    &lt;div class="ui-input-slider" data-topic="preview-width" data-info="width"
+                         data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"&gt;&lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="ui-input-slider" data-topic="preview-height" data-info="height"
+                        data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+
+            &lt;div id="output" class="category"&gt;
+                &lt;div class="title"&gt; CSS Code &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-slice: &lt;/span&gt;
+                    &lt;span id="out-border-slice" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-width: &lt;/span&gt;
+                    &lt;span id="out-border-width" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-outset: &lt;/span&gt;
+                    &lt;span id="out-border-outset" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-repeat: &lt;/span&gt;
+                    &lt;span id="out-border-repeat" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-source: &lt;/span&gt;
+                    &lt;span id="out-border-source" class="value"&gt;  &lt;/span&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+        &lt;/div&gt;
+    &lt;/div&gt;</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider &gt; input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI DropDown
+ */
+
+/* Dropdown */
+
+.ui-dropdown {
+	height: 2em;
+	width: 120px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 12px;
+
+	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
+	background-position: right center;
+	background-repeat: no-repeat;
+	background-color: #359740;
+
+	position: relative;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-dropdown:hover {
+	cursor: pointer;
+	background-color: #208B20;
+}
+
+/* Dropdown Select Button */
+
+.ui-dropdown-select {
+	height: inherit;
+	padding: 0 0.75em;
+	color: #FFF;
+	line-height: 2em;
+}
+
+/* Dropdown List */
+
+.ui-dropdown-list {
+	width: 100%;
+	height: 150px;
+	max-height: 150px;
+	margin: 0;
+	padding: 0 0.3em;
+
+	border: 3px solid #3490D2;
+	border-color: #208B20;
+	background: #666;
+	background-color: #EEF1F5;
+	color: #000;
+
+	position: absolute;
+	top: 2em;
+	left: 0;
+	z-index: 100;
+
+	overflow: hidden;
+	transition: all 0.3s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list:hover {
+	overflow: auto;
+}
+
+.ui-dropdown-list[data-hidden='true'] {
+	height: 0 !important;
+	opacity: 0;
+	visibility: hidden;
+}
+
+.ui-dropdown[data-position='left'] .ui-dropdown-list {
+	left: -100%;
+	top: 0;
+}
+
+.ui-dropdown[data-position='right'] .ui-dropdown-list {
+	left: 100%;
+	top: 0;
+}
+
+.ui-dropdown-list &gt; div {
+	width: 100%;
+	height: 1.6em;
+	margin: 0.3em 0;
+	padding: 0.3em;
+	line-height: 1em;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list &gt; div:hover {
+	background: #3490D2;
+	color:#FFF;
+	border-radius: 2px;
+	cursor: pointer;
+}
+
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI Button
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox &gt; input {
+ 	display: none;
+}
+
+.ui-checkbox &gt; label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 2px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox &gt; label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox &gt; input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * BORDER IMAGE GENERATOR TOOL
+ */
+
+body {
+	width: 100%;
+	margin: 0 auto;
+	padding: 0 0 20px 0;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
+	border: 1px solid #EEE;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+body[data-move='X'] {
+	cursor: w-resize !important;
+}
+
+body[data-move='Y'] {
+	cursor: s-resize !important;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+[data-draggable='true']:hover {
+	cursor: move;
+}
+
+[data-draggable='true']:hover &gt; * {
+	cursor: default;
+}
+
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/*
+ * Border Image Picker
+ */
+
+#gallery {
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#image-gallery {
+	width: 600px;
+	height: 100px;
+	margin: 0 auto;
+	transition: margin 0.4s;
+}
+
+#image-gallery .image {
+	height: 80px;
+	float: left;
+	margin: 10px;
+	opacity: 0.5;
+	background-color: #FFF;
+	box-shadow: 0px 0px 3px 1px #BABABA;
+}
+
+#image-gallery .image[selected="true"] {
+	box-shadow: 0px 0px 3px 1px #3BBA52;
+	opacity: 1;
+}
+
+#image-gallery .image:hover {
+	cursor: pointer;
+	box-shadow: 0px 0px 3px 1px #30ACE5;
+	opacity: 1;
+}
+
+#image-gallery[data-collapsed='true'] {
+	margin-top: -100px;
+}
+
+/* Load Menu */
+
+#load-actions {
+	margin: 10px 0;
+}
+
+#toggle-gallery {
+	width: 30px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+	background-repeat: no-repeat;
+	background-position: top 4px center;
+	background-color: #888888 !important;
+
+	border-radius: 2px;
+	float: left;
+}
+
+#toggle-gallery:hover {
+	cursor: pointer;
+}
+
+#toggle-gallery[data-action='show'] {
+	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
+	background-color: #888888 !important;
+}
+
+#toggle-gallery[data-action='hide'] {
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+}
+
+.button {
+	width: 100px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+	text-align: center;
+	font-size: 12px;
+	line-height: 25px;
+	background-color: #379B4A;
+	border-radius: 2px;
+	float: left;
+}
+
+.button:hover {
+	cursor: pointer;
+	background-color: #3380C4;
+}
+
+#load-image {
+	float: left;
+}
+
+#load-remote {
+	width: 30px;
+	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
+	background-repeat: no-repeat;
+	background-position: center center;
+}
+
+#remote-url {
+	width: 200px;
+	height: 23px;
+	margin: 10px;
+	padding: 0 5px;
+	border: 1px solid #379B4A;
+	border-radius: 2px;
+	float: left;
+
+	transition: width 0.5s;
+}
+
+#remote-url:focus {
+	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
+	border-color: rgba(55, 155, 74, 0.5);
+	width: 450px;
+}
+
+/*
+ * Visible Area
+ */
+
+#preview_section {
+	position: relative;
+	min-height: 400px;
+}
+
+/* Image Control */
+
+#subject {
+	width: 300px;
+	height: 300px;
+	background-repeat: no-repeat;
+	background-size: 100%;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+
+	position: absolute;
+	z-index: 10;
+	top: 15%;
+	left: 10%;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition-property: width, height;
+	transition-duration: 0.1s;
+}
+
+#subject .guideline {
+	background-color: rgba(255, 255, 255, 0.7);
+	border: 1px solid rgba(0, 0, 0, 0.3);
+	position: absolute;
+}
+
+#subject .guideline:hover {
+	background-color: #F00;
+}
+
+#subject .guideline[data-active] {
+	background-color: #F00;
+	z-index: 10;
+}
+
+#subject .guideline[data-axis='X'] {
+	width: 1px;
+	height: 100%;
+	top: -1px;
+}
+
+#subject .guideline[data-axis='Y'] {
+	width: 100%;
+	height: 1px;
+	left: -1px;
+}
+
+#subject .guideline[data-axis='X']:hover {
+	cursor: w-resize;
+}
+
+#subject .guideline[data-axis='Y']:hover {
+	cursor: s-resize;
+}
+
+
+#subject .relative {
+	position: relative;
+	font-size: 12px;
+}
+
+#subject .tooltip, #subject .tooltip2 {
+	width: 40px;
+	height: 20px;
+	line-height: 20px;
+	font-size: 12px;
+	text-align: center;
+
+	position: absolute;
+	opacity: 0.5;
+	transition: opacity 0.25s;
+}
+
+#subject .tooltip {
+	background: #EEE;
+	border-radius: 2px;
+	border: 1px solid #CCC;
+}
+
+#subject .tooltip2{
+	color: #555;
+}
+
+#subject [data-active] &gt; * {
+	opacity: 1;
+}
+
+#subject .tooltip[data-info='top'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip[data-info='right'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+#subject .tooltip[data-info='bottom'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip[data-info='left'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='top'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip2[data-info='right'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='bottom'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip2[data-info='left'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+/* Preview */
+
+#preview {
+	width: 30%;
+	height: 50%;
+	background-color: #FFF;
+	text-align: center;
+	overflow: hidden;
+	position: absolute;
+	z-index: 10;
+
+	left: 60%;
+	top: 15%;
+
+	border-radius: 2px;
+	border-image-width: 20px;
+	border-image-repeat: round;
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#preview .resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+#preview .resize-handle:hover {
+	cursor: nw-resize;
+}
+
+
+/*
+ * General controls MENU
+ */
+
+#general-controls {
+	padding: 10px 30px;
+	background-color: #FFF;
+	opacity: 0.95;
+	color: #888;
+	/*border-radius: 2px;*/
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#general-controls .property {
+	width: 130px;
+	float: left;
+}
+
+#general-controls .name {
+	height: 20px;
+	margin: 0 10px 0 0;
+	line-height: 100%;
+	text-align: right;
+	float: left;
+}
+
+#general-controls .right {
+	width: 200px;
+	float: right;
+}
+
+#general-controls .ui-checkbox label {
+	height: 10px;
+}
+
+#general-controls .separator {
+	height: 40px;
+	width: 1px;
+	margin: -10px 15px;
+	background-color: #EEE;
+	float: left;
+}
+
+/*
+ * Controls
+ */
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+#controls .category {
+	height: 190px;
+	min-width: 260px;
+	margin: 10px;
+	padding: 10px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	float: left;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+@media (min-width: 880px) {
+	#controls .category {
+		width: 30%;
+		margin-left: 1.66%;
+		margin-right: 1.66%;
+	}
+}
+
+@media (max-width: 879px) {
+	#controls .category {
+		width: 37%;
+		margin-left: 6.5%;
+		margin-right: 6.5%;
+	}
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#controls .category:hover .title {
+	color: #777;
+}
+
+#controls .category &gt; .group {
+	border: 1px solid #CCC;
+	border-radius: 2px;
+}
+
+
+/* property */
+
+#controls .property {
+	width: 250px;
+	height: 20px;
+	margin: 5px auto;
+}
+
+#controls .property .ui-input-slider {
+	margin: 0;
+	float: left;
+}
+
+#controls .property .ui-input-slider-info {
+	width: 60px;
+}
+
+#controls .property .ui-input-slider-left {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .ui-input-slider-right {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .name {
+	width: 60px;
+	height: 20px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	line-height: 100%;
+	float: left;
+}
+
+#controls .property .config {
+	width: 20px;
+	height: 20px;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
+	opacity: 0.5;
+}
+
+#controls .property .config:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-right {
+    opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-left {
+    opacity: 1;
+}
+
+#controls .property .ui-dropdown {
+	margin: 0 10px;
+	float: left;
+}
+
+
+#controls .property .ui-checkbox {
+	margin: 0 0 0 16px;
+	float: left;
+}
+
+#controls .property .ui-checkbox label {
+	height: 0.85em;
+	width: 10px;
+}
+
+/* dropdowns */
+#controls .ui-dropdown {
+	width: 50px;
+	height: 1.7em;
+	border-radius: 2px;
+}
+
+#controls .ui-dropdown-select {
+	line-height: 1.6em;
+}
+
+#controls .ui-dropdown-list {
+	top: 20px;
+}
+
+#controls .ui-dropdown-list {
+	border-width: 1px;
+	text-align: center;
+}
+
+#controls .ui-dropdown-list:hover {
+	overflow: hidden;
+}
+
+#controls .border-repeat {
+	margin: 0 0 0 16px !important;
+	width: 80px;
+}
+
+#controls .border-repeat .ui-dropdown-list {
+	height: 6.2em;
+	border-width: 1px;
+	text-align: center;
+}
+
+/* border-image-slice */
+
+
+#border-slice-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+/* border-image-width */
+
+#border-width-control .ui-dropdown-list {
+	height: 6.2em;
+}
+
+/* border-image-outset */
+
+#border-outset-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+#aditional-properties .property {
+	width: 200px;
+}
+
+#aditional-properties .ui-input-slider &gt; input {
+	width: 80px !important;
+}
+
+/* unit settings panel */
+
+#unit-settings {
+	padding: 10px;
+	position: absolute;
+
+	background: #FFF;
+
+	font-size: 12px;
+	border-radius: 3px;
+	border: 1px solid #CCC;
+	text-align: center;
+	color: #555;
+
+	position: absolute;
+	z-index: 1000;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+}
+
+#unit-settings .title {
+	width: 100%;
+	margin: -5px auto 0;
+
+	color: #666;
+	font-size: 14px;
+	font-weight: bold;
+	line-height: 25px;
+	border-bottom: 1px solid #E5E5E5;
+}
+
+#unit-settings .ui-input-slider {
+	margin: 10px 0 0 0;
+}
+
+#unit-settings .ui-input-slider-info {
+	width: 50px;
+	line-height: 1.5em;
+}
+
+#unit-settings input {
+	font-size: 12px;
+	width: 40px !important;
+}
+
+#unit-settings .close {
+	width: 16px;
+	height: 16px;
+	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
+	background-size: 75%;
+
+	position: absolute;
+	top: 4px;
+	right: 4px;
+	opacity: 0.5;
+}
+
+#unit-settings .close:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#unit-settings[data-active='true'] {
+	opacity: 1;
+}
+
+#unit-settings[data-active='false'] {
+	opacity: 0;
+	top: -100px !important;
+}
+
+/*
+ * CSS Output Code
+ */
+
+#output {
+	padding: 10px;
+	border: 2px dashed #888 !important;
+	box-shadow: none !important;
+	border-radius: 3px;
+	overflow: hidden;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+}
+
+
+@media (min-width: 880px) {
+	#output {
+		width: 63.33% !important;
+	}
+}
+
+@media (max-width: 879px) {
+	#output {
+		width: 87% !important;
+	}
+}
+
+
+#output .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#output .css-property {
+	width: 100%;
+	margin: 0;
+	color: #555;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+#output .css-property .name {
+	width: 30%;
+	font-weight: bold;
+	text-align: right;
+	float: left;
+}
+
+#output .css-property .value {
+	width: 65%;
+	padding: 0 2.5%;
+	word-break: break-all;
+	float: left;
+}
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js">'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision &gt;= 0 ? precision : 0;
+		this.step = step &lt; 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity &gt; 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value &gt; slider.max) value = slider.max;
+		if (value &lt; slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value &gt; 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+/**
+ * UI-DropDown Select
+ */
+
+var DropDownManager = (function DropdownManager() {
+
+	var subscribers = {};
+	var dropdowns = [];
+	var active = null;
+
+	var visbility = ["hidden", "visible"];
+
+
+	var DropDown = function DropDown(node) {
+		var topic = node.getAttribute('data-topic');
+		var label = node.getAttribute('data-label');
+		var selected = node.getAttribute('data-selected') | 0;
+
+		var select = document.createElement('div');
+		var list = document.createElement('div');
+		var uval = 0;
+		var option = null;
+		var option_value = null;
+
+		list.className = 'ui-dropdown-list';
+		select.className = 'ui-dropdown-select';
+
+		while (node.firstElementChild !== null) {
+			option = node.firstElementChild;
+			option_value = option.getAttribute('data-value');
+
+			if (option_value === null)
+				option.setAttribute('data-value', uval);
+
+			list.appendChild(node.firstElementChild);
+			uval++;
+		}
+
+		node.appendChild(select);
+		node.appendChild(list);
+
+		select.onclick = this.toggle.bind(this);
+		list.onclick = this.updateValue.bind(this);
+		document.addEventListener('click', clickOut);
+
+		this.state = 0;
+		this.time = 0;
+		this.dropmenu = list;
+		this.select = select;
+		this.toggle(false);
+		this.value = {};
+		this.topic = topic;
+
+		if (label)
+			select.textContent = label;
+		else
+			this.setNodeValue(list.children[selected]);
+
+		dropdowns[topic] = this;
+
+	};
+
+	DropDown.prototype.toggle = function toggle(state) {
+		if (typeof(state) === 'boolean')
+			this.state = state === false ? 0 : 1;
+		else
+			this.state = 1 ^ this.state;
+
+		if (active !== this) {
+			if (active)
+				active.toggle(false);
+			active = this;
+		}
+
+		if (this.state === 0)
+			this.dropmenu.setAttribute('data-hidden', 'true');
+		else
+			this.dropmenu.removeAttribute('data-hidden');
+
+	};
+
+	var clickOut = function clickOut(e) {
+		if (active.state === 0 ||
+			e.target === active.dropmenu ||
+			e.target === active.select)
+			return;
+
+		active.toggle(false);
+	};
+
+	DropDown.prototype.updateValue = function updateValue(e) {
+
+		if (Date.now() - this.time &lt; 500)
+			return;
+
+		if (e.target.className !== "ui-dropdown-list") {
+			this.setNodeValue(e.target);
+			this.toggle(false);
+		}
+
+		this.time = Date.now();
+	};
+
+	DropDown.prototype.setNodeValue = function setNodeValue(node) {
+		this.value['name'] = node.textContent;
+		this.value['value'] = node.getAttribute('data-value');
+
+		this.select.textContent = node.textContent;
+		this.select.setAttribute('data-value', this.value['value']);
+
+		notify.call(this);
+	};
+
+	var createDropDown = function createDropDown(topic, options) {
+
+		var dropdown = document.createElement('div');
+		dropdown.setAttribute('data-topic', topic);
+		dropdown.className = 'ui-dropdown';
+
+		for (var i in options) {
+			var x = document.createElement('div');
+			x.setAttribute('data-value', i);
+			x.textContent = options[i];
+			dropdown.appendChild(x);
+		}
+
+		new DropDown(dropdown);
+
+		return dropdown;
+	};
+
+	var setValue = function setValue(topic, index) {
+		if (dropdowns[topic] === undefined ||
+			index &gt;= dropdowns[topic].dropmenu.children.length)
+			return;
+
+		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		var index = subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	};
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-dropdown');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new DropDown(elem[i]);
+
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		createDropDown : createDropDown
+	};
+
+})();
+
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	};
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	};
+
+	var setValue = function setValue(topic, value) {
+		var obj = buttons[topic];
+		if (obj === undefined)
+			return;
+
+		obj.checkbox.checked = value;
+		notify.call(obj);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new CheckBox(elem[i]);
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	};
+
+})();
+
+window.addEventListener("load", function() {
+	BorderImage.init();
+});
+
+var BorderImage = (function BorderImage() {
+
+	var getElemById = document.getElementById.bind(document);
+
+	var subject;
+	var preview;
+	var guidelines = [];
+	var positions = ['top', 'right', 'bottom', 'left'];
+
+	var makeDraggable = function makeDraggable(elem) {
+
+		var offsetTop;
+		var offsetLeft;
+
+		elem.setAttribute('data-draggable', 'true');
+
+		var dragStart = function dragStart(e) {
+			if (e.target.getAttribute('data-draggable') !== 'true' ||
+				e.target !== elem || e.button !== 0)
+				return;
+
+			offsetLeft = e.clientX - elem.offsetLeft;
+			offsetTop = e.clientY - elem.offsetTop;
+
+			document.addEventListener('mousemove', mouseDrag);
+			document.addEventListener('mouseup', dragEnd);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			document.removeEventListener('mouseup', dragEnd);
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+
+			elem.style.left = e.clientX - offsetLeft + 'px';
+			elem.style.top = e.clientY - offsetTop + 'px';
+		};
+
+		elem.addEventListener('mousedown', dragStart, false);
+	};
+
+	var PreviewControl = function PreviewControl() {
+
+		var dragging = false;
+		var valueX = null;
+		var valueY = null;
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			valueX = e.clientX - preview.clientWidth;
+			valueY = e.clientY - preview.clientHeight;
+			dragging = true;
+
+			document.addEventListener('mousemove', mouseDrag);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0 || dragging === false)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			dragging = false;
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+			InputSliderManager.setValue('preview-width', e.clientX - valueX);
+			InputSliderManager.setValue('preview-height', e.clientY - valueY);
+		};
+
+		var init = function init() {
+
+			makeDraggable(preview);
+			makeDraggable(subject);
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			handle.addEventListener('mousedown', dragStart);
+			document.addEventListener('mouseup', dragEnd);
+
+			preview.appendChild(handle);
+
+		};
+
+		return {
+			init: init
+		};
+
+	}();
+
+	var ImageReader = (function ImageReader() {
+
+		var fReader = new FileReader();
+		var browse = document.createElement('input');
+
+		var loadImage = function loadImage(e) {
+			if (browse.files.length === 0)
+				return;
+
+			var file = browse.files[0];
+
+			if (file.type.slice(0, 5) !== 'image')
+				return;
+
+			fReader.readAsDataURL(file);
+
+			return false;
+		};
+
+		fReader.onload = function(e) {
+			ImageControl.loadRemoteImage(e.target.result);
+		};
+
+		var load = function load() {
+			browse.click();
+		};
+
+		browse.setAttribute('type', 'file');
+		browse.style.display = 'none';
+		browse.onchange = loadImage;
+
+		return {
+			load: load
+		};
+
+	})();
+
+	var ImageControl = (function ImageControl() {
+
+		var scale = 0.5;
+		var imgSource = new Image();
+		var imgState = null;
+		var selected = null;
+
+
+		var topics = ['slice', 'width', 'outset'];
+		var properties = {};
+		properties['border1'] = {
+			fill			: false,
+
+			slice_values	: [27, 27, 27, 27],
+			width_values	: [20, 20, 20, 20],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [1, 1],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border2'] = {
+			fill			: false,
+
+			slice_values	: [33, 33, 33, 33],
+			width_values	: [1.5, 1.5, 1.5, 1.5],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [1, 1, 1, 1],
+			width_units		: [2, 2, 2, 2],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border3'] = {
+			fill			: true,
+
+			slice_values	: [15, 15, 15, 15],
+			width_values	: [10, 10, 10, 10],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border4'] = {
+			fill			: false,
+
+			slice_values	: [13, 13, 13, 13],
+			width_values	: [13, 13, 13, 13],
+			outset_values	: [13, 13, 13, 13],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border5'] = {
+			fill			: false,
+
+			slice_values	: [0, 12, 0, 12],
+			width_values	: [0, 12, 0, 12],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400,
+		};
+
+		properties['border6'] = {
+			fill			: false,
+
+			slice_values	: [42, 42, 42, 42],
+			width_values	: [42, 42, 42, 42],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [350, 350],
+			preview_area	: 500,
+		};
+
+
+		var loadLocalImage = function loadLocalImage(source) {
+			var location = "images/" + source;
+			imgSource.src = location;
+		};
+
+		var loadRemoteImage = function loadRemoteImage(source) {
+			imgSource.src = source;
+			if (selected)
+				selected.removeAttribute('selected');
+			Tool.setOutputCSS('source', 'url("' + source + '")');
+		};
+
+		var pickImage = function pickImage(e) {
+			if (e.target.className === 'image') {
+				selected = e.target;
+				selected.setAttribute('selected', 'true');
+				loadRemoteImage(e.target.src);
+				imgState = e.target.getAttribute('data-stateID');
+			}
+		};
+
+		var loadImageState = function loadImageState(stateID) {
+			if (properties[stateID] === undefined)
+				return;
+
+			var prop = properties[stateID];
+			var topic;
+			var unit_array;
+			var value_array;
+
+			for (var i in topics) {
+				for (var j=0; j&lt;4; j++) {
+					topic = topics[i] + '-' + positions[j];
+					unit_array = topics[i] + '_units';
+					value_array = topics[i] + '_values';
+					InputSliderManager.setValue(topic, prop[value_array][j]);
+					DropDownManager.setValue(topic, prop[unit_array][j]);
+				}
+			}
+
+			ButtonManager.setValue('slice-fill', prop['fill']);
+			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
+			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
+			InputSliderManager.setValue('preview-width', prop['size'][0]);
+			InputSliderManager.setValue('preview-height', prop['size'][1]);
+			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
+		};
+
+		var update = function update() {
+			scale =  Math.min(300, (30000 / this.width) | 0);
+			setScale(scale);
+			InputSliderManager.setValue('scale', scale, false);
+
+			subject.style.backgroundImage = 'url("' + this.src + '")';
+			preview.style.borderImageSource = 'url("' + this.src + '")';
+
+			guidelines['slice-top'].setMax(this.height);
+			guidelines['slice-right'].setMax(this.width);
+			guidelines['slice-bottom'].setMax(this.height);
+			guidelines['slice-left'].setMax(this.width);
+
+			if (imgState)
+				loadImageState(imgState);
+		};
+
+		var setScale = function setScale(value) {
+			scale = value;
+			var w = imgSource.width * scale / 100 | 0;
+			var h = imgSource.height * scale / 100 | 0;
+			subject.style.width = w + 'px';
+			subject.style.height = h + 'px';
+
+			for (var i = 0; i &lt; positions.length; i++)
+				guidelines['slice-' + positions[i]].updateGuidelinePos();
+		};
+
+		var getScale = function getScale() {
+			return scale/100;
+		};
+
+		var toggleGallery = function toggleGallery() {
+			var gallery = getElemById('image-gallery');
+			var button  = getElemById('toggle-gallery');
+			var state = 1;
+			button.addEventListener('click', function() {
+				state = 1 ^ state;
+				if (state === 0) {
+					gallery.setAttribute('data-collapsed', 'true');
+					button.setAttribute('data-action', 'show');
+				}
+				else {
+					gallery.removeAttribute('data-collapsed');
+					button.setAttribute('data-action', 'hide');
+				}
+			});
+		};
+
+		var init = function init() {
+			var gallery = getElemById('image-gallery');
+			var browse = getElemById('load-image');
+			var remote = getElemById('remote-url');
+			var load_remote = getElemById('load-remote');
+
+			remote.addEventListener('change', function(){
+				loadRemoteImage(this.value);
+			});
+
+			load_remote.addEventListener('click', function(){
+				loadRemoteImage(remote.value);
+			});
+
+			browse.addEventListener('click', ImageReader.load);
+			gallery.addEventListener('click', pickImage);
+			imgSource.addEventListener('load', update);
+
+			InputSliderManager.subscribe('scale', setScale);
+			InputSliderManager.setValue('scale', scale);
+			imgState = 'border1';
+			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
+			toggleGallery();
+		};
+
+		return {
+			init: init,
+			getScale : getScale,
+			loadRemoteImage: loadRemoteImage
+		};
+
+	})();
+
+	var GuideLine = function GuideLine(node) {
+		var topic = node.getAttribute('data-topic');
+		var axis = node.getAttribute('data-axis');
+
+		this.node = node;
+		this.topic = topic;
+		this.axis = axis;
+		this.info = topic.split('-')[1];
+
+		this.position = 0;
+		this.value = 0;
+		this.unit = 0;
+		this.max = 0;
+		this.pos = positions.indexOf(this.info);
+
+		guidelines[topic] = this;
+
+		var relative_container = document.createElement('div');
+		var tooltip = document.createElement('div');
+		var tooltip2 = document.createElement('div');
+
+		tooltip.className = 'tooltip';
+		tooltip.setAttribute('data-info', this.info);
+
+		tooltip2.className = 'tooltip2';
+		tooltip2.textContent = this.info;
+		tooltip2.setAttribute('data-info', this.info);
+
+		this.tooltip = tooltip;
+
+		relative_container.appendChild(tooltip);
+		relative_container.appendChild(tooltip2);
+		node.appendChild(relative_container);
+
+		var startX = 0;
+		var startY = 0;
+		var start = 0;
+
+		var startDrag = function startDrag(e) {
+			startX = e.clientX;
+			startY = e.clientY;
+			start = guidelines[topic].position;
+			document.body.setAttribute('data-move', axis);
+			relative_container.setAttribute('data-active', '');
+			node.setAttribute('data-active', '');
+
+			document.addEventListener('mousemove', updateGuideline);
+			document.addEventListener('mouseup', endDrag);
+		};
+
+		var endDrag = function endDrag() {
+			document.body.removeAttribute('data-move');
+			relative_container.removeAttribute('data-active');
+			node.removeAttribute('data-active');
+
+			document.removeEventListener('mousemove', updateGuideline);
+		};
+
+		var updateGuideline = function updateGuideline(e) {
+			var value;
+			if (topic === 'slice-top')
+				value = e.clientY - startY + start;
+
+			if (topic === 'slice-right')
+				value = startX - e.clientX + start;
+
+			if (topic === 'slice-bottom')
+				value = startY - e.clientY + start;
+
+			if (topic === 'slice-left')
+				value = e.clientX - startX + start;
+
+			if (this.unit === 0)
+				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
+			else {
+				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
+			}
+
+		}.bind(this);
+
+		node.addEventListener("mousedown", startDrag);
+
+		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
+		InputSliderManager.setValue(topic, this.position);
+	};
+
+
+	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
+		if (this.unit === 0)
+			this.position = this.value * ImageControl.getScale() | 0;
+		else
+			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
+
+		this.node.style[this.info] = this.position + 'px';
+	};
+
+	GuideLine.prototype.setPosition = function setPosition(value) {
+		this.value = value;
+		this.tooltip.textContent = value;
+		this.updateGuidelinePos();
+		Tool.setBorderSlice(this.pos, value);
+	};
+
+	GuideLine.prototype.setMax = function setMax(max) {
+		this.max = max;
+		this.updateLimit();
+	};
+
+	GuideLine.prototype.updateLimit = function updateLimit() {
+		if (this.unit === 1)
+			InputSliderManager.setMax(this.topic, 100);
+		else
+			InputSliderManager.setMax(this.topic, this.max);
+	};
+
+	GuideLine.prototype.setUnit = function setUnit(type) {
+		if (type === '%')	this.unit = 1;
+		if (type === '')	this.unit = 0;
+		this.updateLimit();
+	};
+
+	/*
+	 * Unit panel
+	 */
+	var UnitPanel = (function UnitPanel () {
+
+		var panel;
+		var title;
+		var precision;
+		var step;
+		var unit_topic = null; // settings are made for this topic
+		var step_option = [1, 0.1, 0.01];
+
+		var updatePrecision = function updatePrecision(value) {
+			InputSliderManager.setPrecision('unit-step', value);
+			InputSliderManager.setStep('unit-step', step_option[value]);
+			InputSliderManager.setMin('unit-step', step_option[value]);
+
+			if (unit_topic)
+				InputSliderManager.setPrecision(unit_topic, value);
+		};
+
+		var updateUnitSettings = function updateUnitSettings(value) {
+			if (unit_topic)
+				InputSliderManager.setStep(unit_topic, value);
+		};
+
+		var show = function show(e) {
+			var topic = e.target.getAttribute('data-topic');
+			var precision = InputSliderManager.getPrecision(topic);
+			var step = InputSliderManager.getStep(topic);
+
+			unit_topic = topic;
+			title.textContent = topic;
+
+			panel.setAttribute('data-active', 'true');
+			panel.style.top = e.target.offsetTop - 40 + 'px';
+			panel.style.left = e.target.offsetLeft + 30 + 'px';
+
+			InputSliderManager.setValue('unit-precision', precision);
+			InputSliderManager.setValue('unit-step', step);
+		};
+
+		var init = function init() {
+			panel = document.createElement('div');
+			title = document.createElement('div');
+			var close = document.createElement('div');
+
+			step = InputSliderManager.createSlider('unit-step', 'step');
+			precision = InputSliderManager.createSlider('unit-precision', 'precision');
+
+			InputSliderManager.setStep('unit-precision', 1);
+			InputSliderManager.setMax('unit-precision', 2);
+			InputSliderManager.setValue('unit-precision', 2);
+			InputSliderManager.setSensivity('unit-precision', 20);
+
+			InputSliderManager.setValue('unit-step', 1);
+			InputSliderManager.setStep('unit-step', 0.01);
+			InputSliderManager.setPrecision('unit-step', 2);
+
+			InputSliderManager.subscribe('unit-precision', updatePrecision);
+			InputSliderManager.subscribe('unit-step', updateUnitSettings);
+
+			close.addEventListener('click', function () {
+				panel.setAttribute('data-active', 'false');
+			});
+
+			title.textContent = 'Properties';
+			title.className = 'title';
+			close.className = 'close';
+			panel.id = 'unit-settings';
+			panel.setAttribute('data-active', 'false');
+			panel.appendChild(title);
+			panel.appendChild(precision);
+			panel.appendChild(step);
+			panel.appendChild(close);
+			document.body.appendChild(panel);
+		};
+
+		return {
+			init : init,
+			show : show
+		};
+
+	})();
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview_area;
+		var dropdown_unit_options = [
+			{ '' : '--', '%' : '%'},
+			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
+			{ 'px' : 'px', 'em' : 'em'},
+		];
+
+		var border_slice = [];
+		var border_width = [];
+		var border_outset = [];
+
+		var border_slice_values = [];
+		var border_width_values = [];
+		var border_outset_values = [];
+
+		var border_slice_units = ['', '', '', ''];
+		var border_width_units = ['px', 'px', 'px', 'px'];
+		var border_outset_units = ['px', 'px', 'px', 'px'];
+
+		var border_fill = false;
+		var border_repeat = ['round', 'round'];
+		var CSS_code = {
+			'source' : null,
+			'slice' : null,
+			'width' : null,
+			'outset' : null,
+			'repeat' : null
+		};
+
+		var setBorderSlice = function setBorderSlice(positionID, value) {
+			border_slice[positionID] = value + border_slice_units[positionID];
+			updateBorderSlice();
+		};
+
+		var updateBorderSlice = function updateBorderSlice() {
+			var value = border_slice.join(' ');
+			if (border_fill === true)
+				value += ' fill';
+
+			preview.style.borderImageSlice = value;
+			setOutputCSS('slice', value);
+		};
+
+		var setBorderFill = function setBorderFill(value) {
+			border_fill = value;
+			var bimgslice = border_slice.join(' ');;
+			if (value === true)
+				bimgslice += ' fill';
+
+			preview.style.borderImageSlice = bimgslice;
+		};
+
+		var updateBorderWidth = function updateBorderWidth() {
+			var value = border_width.join(' ');
+			preview.style.borderImageWidth = value;
+			setOutputCSS('width', value);
+		};
+
+		var updateBorderOutset = function updateBorderOutset() {
+			var value = border_outset.join(' ');
+			preview.style.borderImageOutset = border_outset.join(' ');
+			setOutputCSS('outset', value);
+		};
+
+		var setBorderRepeat = function setBorderRepeat(obj) {
+			border_repeat[obj.value] = obj.name;
+			var value = border_repeat.join(' ');
+			preview.style.borderImageRepeat = value;
+			setOutputCSS('repeat', value);
+		};
+
+		var setOutputCSS = function setOutputCSS(topic, value) {
+			CSS_code[topic].textContent = value + ';';
+		};
+
+		var setPreviewFontSize = function setPreviewFontSize(value) {
+			preview.style.fontSize = value + 'px';
+		};
+
+		var setPreviewWidth = function setPreviewWidth(value) {
+			preview.style.width = value + 'px';
+		};
+
+		var setPreviewHeight = function setPreviewHeight(value) {
+			preview.style.height = value + 'px';
+		};
+
+		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
+			preview_area.style.height = value + 'px';
+		};
+
+		var updateDragOption = function updateDragOption(value) {
+			if (value === true)
+				subject.setAttribute('data-draggable', 'true');
+			else
+				subject.removeAttribute('data-draggable');
+		};
+
+		var createProperty = function createProperty(topic, labelID, optionsID) {
+
+			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
+			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
+
+			InputSliderManager.setSensivity(topic, 3);
+			InputSliderManager.setPrecision(topic, 1);
+
+			var property = document.createElement('div');
+			var config = document.createElement('div');
+
+			property.className = 'property';
+			config.className = 'config';
+			config.setAttribute('data-topic', topic);
+			config.addEventListener('click', UnitPanel.show);
+
+			property.appendChild(slider);
+			property.appendChild(dropdown);
+			property.appendChild(config);
+
+			return property;
+		};
+
+		var initBorderSliceControls = function initBorderSliceControls() {
+			var container = getElemById('border-slice-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_slice_values[id] = value;
+					border_slice[id] = value + border_slice_units[id];
+					updateBorderSlice();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					guidelines[topic].setUnit(obj.value);
+					border_slice_units[id] = obj.value;
+					border_slice[id] = border_slice_values[id] + obj.value;
+					updateBorderSlice();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'slice-' + positions[i];
+				var property = createProperty(topic, i, 0);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+
+			container.appendChild(container.children[1]);
+
+		};
+
+		var initBorderWidthControls = function initBorderWidthControls() {
+			var container = getElemById('border-width-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_width_values[id] = value;
+					border_width[id] = value + border_width_units[id];
+					updateBorderWidth();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					if (obj.value === '%')
+						InputSliderManager.setMax(topic, 100);
+					else
+						InputSliderManager.setMax(topic, 1000);
+
+					border_width_units[id] = obj.value;
+					border_width[id] = border_width_values[id] + obj.value;
+					updateBorderWidth();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'width-' + positions[i];
+				var property = createProperty(topic, i, 1);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var initBorderOutsetControls = function initBorderOutsetControls() {
+
+			var container = getElemById('border-outset-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_outset_values[id] = value;
+					border_outset[id] = value + border_outset_units[id];
+					updateBorderOutset();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					border_outset_units[id] = obj.value;
+					border_outset[id] = border_outset_values[id] + obj.value;
+					updateBorderOutset();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'outset-' + positions[i];
+				var property = createProperty(topic, i, 2);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var init = function init() {
+
+			var gallery =
+			subject = getElemById('subject');
+			preview = getElemById("preview");
+			preview_area = getElemById("preview_section");
+
+
+			CSS_code['source'] = getElemById("out-border-source");
+			CSS_code['slice'] = getElemById("out-border-slice");
+			CSS_code['width'] = getElemById("out-border-width");
+			CSS_code['outset'] = getElemById("out-border-outset");
+			CSS_code['repeat'] = getElemById("out-border-repeat");
+
+			initBorderSliceControls();
+			initBorderWidthControls();
+			initBorderOutsetControls();
+
+			var elem = document.querySelectorAll('.guideline');
+			var size = elem.length;
+			for (var i = 0; i &lt; size; i++)
+				new GuideLine(elem[i]);
+
+			PreviewControl.init();
+
+			ButtonManager.subscribe('slice-fill',setBorderFill);
+			ButtonManager.subscribe('drag-subject', updateDragOption);
+			ButtonManager.setValue('drag-subject', false);
+
+			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
+			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
+
+			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
+			InputSliderManager.subscribe('preview-width', setPreviewWidth);
+			InputSliderManager.subscribe('preview-height', setPreviewHeight);
+			InputSliderManager.subscribe('font-size', setPreviewFontSize);
+			InputSliderManager.setValue('preview-width', 300);
+			InputSliderManager.setValue('preview-height', 200);
+		};
+
+		return {
+			init: init,
+			setOutputCSS: setOutputCSS,
+			setBorderSlice: setBorderSlice
+		};
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		InputSliderManager.init();
+		DropDownManager.init();
+		ButtonManager.init();
+		UnitPanel.init();
+		Tool.init();
+		ImageControl.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('Border_Image_Generator', '100%', '1270px')}}</p>
diff --git a/files/de/web/css/css_background_and_borders/border-radius_generator/index.html b/files/de/web/css/css_background_and_borders/border-radius_generator/index.html
new file mode 100644
index 0000000000..0193a207e7
--- /dev/null
+++ b/files/de/web/css/css_background_and_borders/border-radius_generator/index.html
@@ -0,0 +1,1600 @@
+---
+title: Border-radius Generator
+slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
+tags:
+  - CSS
+  - Werkzeuge
+translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
+---
+<p>Dieses Werkzeug kann dazu verwendet werden, CSS3 {{cssxref("border-radius")}} Effekte zu erzeugen.</p>
+
+<div style="display: none;">
+<h2 id="border-radius-generator" name="border-radius-generator">border-radius</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+    &lt;div class="group section"&gt;
+        &lt;div id="preview" class="col span_12"&gt;
+            &lt;div id="subject"&gt;
+                &lt;div id="top-left" class="radius-container"
+                    data-X="left" data-Y="top"&gt;
+                &lt;/div&gt;
+                &lt;div id="top-right" class="radius-container"
+                    data-X="right" data-Y="top"&gt;
+                &lt;/div&gt;
+                &lt;div id="bottom-right" class="radius-container"
+                    data-X="right" data-Y="bottom"&gt;
+                &lt;/div&gt;
+                &lt;div id="bottom-left" class="radius-container"
+                    data-X="left" data-Y="bottom"&gt;
+                &lt;/div&gt;
+
+                &lt;div id="radius-ui-sliders"&gt;
+                    &lt;div id="tlr" class="ui-input-slider" data-topic="top-left"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="tlw" class="ui-input-slider" data-topic="top-left-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="tlh" class="ui-input-slider" data-topic="top-left-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trr" class="ui-input-slider" data-topic="top-right"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trw" class="ui-input-slider" data-topic="top-right-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trh" class="ui-input-slider" data-topic="top-right-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brr" class="ui-input-slider" data-topic="bottom-right"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blr" class="ui-input-slider" data-topic="bottom-left"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div id="controls" class="group section"&gt;
+
+        &lt;div class="group section"&gt;
+            &lt;div id="dimensions"&gt;
+                &lt;div class="ui-input-slider" data-topic="width" data-info="width"
+                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"&gt;&lt;/div&gt;
+
+                &lt;div class="ui-input-slider" data-topic="height" data-info="height"
+                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="output"&gt;&lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div class="group section"&gt;
+            &lt;div id="radius-lock"&gt;
+                &lt;div class="info"&gt; rounded corner &lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='top-left'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='top-right'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='bottom-right'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='bottom-left'&gt;&lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="unit-selection"&gt;
+                &lt;div class="info"&gt; select border units &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">/*  GRID OF TEN
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider-container {
+	height: 20px;
+	margin: 10px 0;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider-container * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider &gt; input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox &gt; input {
+ 	display: none;
+}
+
+.ui-checkbox &gt; label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 3px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox &gt; label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox &gt; input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/******************************************************************************/
+/******************************************************************************/
+/*
+ * Preview Area
+ */
+
+#preview {
+	height: 500px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+	overflow: hidden;
+	position: relative;
+}
+
+#preview .content {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+#preview input {
+	color: #333;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+}
+
+#subject {
+	width: 400px;
+	height: 150px;
+	margin: 0 auto;
+	border: 3px solid #C60;
+	background: #FFF;
+	position: relative;
+}
+
+.radius {
+	width: 50%;
+	height: 50%;
+	border: 1px solid #CCC;
+	display: none;
+	position: absolute;
+	z-index: 1;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.handle {
+	width: 16px;
+	height: 16px;
+	position: absolute;
+	z-index: 2;
+}
+
+.handle-top-left {
+	top: -12px;
+	left: -12px;
+	cursor: se-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top left no-repeat;
+}
+
+.handle-top-right {
+	top: -12px;
+	right: -12px;
+	cursor: sw-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top right no-repeat;
+}
+
+.handle-bottom-right {
+	bottom: -12px;
+	right: -12px;
+	cursor: nw-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom right no-repeat;
+}
+
+.handle-bottom-left {
+	bottom: -12px;
+	left: -12px;
+	cursor: ne-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom left no-repeat;
+}
+
+
+.radius-container {
+	position: absolute;
+	display : block;
+	z-index: 1;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/* TOP LEFT */
+#top-left {
+	top: 0;
+	left: 0;
+}
+
+#top-left .radius {
+	border-top-left-radius: 100%;
+	top: 0;
+	left: 0;
+}
+
+/* TOP RIGHT */
+#top-right {
+	top: 0;
+	right: 0;
+}
+
+#top-right .radius {
+	border-top-right-radius: 100%;
+	top: 0;
+	right: 0;
+}
+
+/* BOTTOM RIGHT */
+#bottom-right {
+	bottom: 0;
+	right: 0;
+}
+
+#bottom-right .radius {
+	border-bottom-right-radius: 100%;
+	bottom: 0;
+	right: 0;
+}
+
+/* BOTTOM lEFT */
+#bottom-left {
+	bottom: 0;
+	left: 0;
+}
+
+#bottom-left .radius {
+	border-bottom-left-radius: 100%;
+	bottom: 0;
+}
+
+/* INPUT SLIDERS */
+
+#preview .ui-input-slider {
+	margin: 10px;
+	position: absolute;
+	z-index: 10;
+}
+
+#radius-ui-sliders {
+	width: 100%;
+	height: 100%;
+	min-height: 75px;
+	min-width: 150px;
+	padding: 20px 50px;
+	top: -20px;
+	left: -50px;
+	position: relative;
+}
+
+#tlr {
+	top: -30px;
+	left: -50px;
+	display: none;
+}
+
+#tlw {
+	top: -30px;
+	left: 30px;
+}
+
+#tlh {
+	top: 20px;
+	left: -50px;
+}
+
+#trr {
+	top: -30px;
+	right: -50px;
+	display: none;
+}
+
+#trw {
+	top: -30px;
+	right: 30px;
+}
+
+#trh {
+	top: 20px;
+	right: -50px;
+}
+
+#brr {
+	bottom: -30px;
+	right: -50px;
+	display: none;
+}
+
+#brw {
+	bottom: -30px;
+	right: 30px;
+}
+
+#brh {
+	bottom: 20px;
+	right: -50px;
+}
+
+#blr {
+	bottom: -30px;
+	left: -50px;
+	display: none;
+}
+
+#blw {
+	bottom: -30px;
+	left: 30px;
+}
+
+#blh {
+	bottom: 20px;
+	left: -50px;
+}
+
+#preview .ui-input-slider-left, #preview .ui-input-slider-right {
+	visibility: hidden;
+}
+
+#preview .ui-input-slider-container:hover .ui-input-slider-left {
+	visibility: visible;
+}
+
+#preview .ui-input-slider-container:hover .ui-input-slider-right {
+	visibility: visible;
+}
+
+/*
+ *
+ */
+
+#unit-selection {
+	width: 200px;
+	height: 75px;
+	margin: 30px 30px 0 0;
+	padding: 30px;
+	border: 3px solid #555;
+	border-radius: 10px;
+	position: relative;
+	float: right;
+}
+
+#unit-selection .info {
+	height: 20%;
+	width: 100%;
+	line-height: 20%;
+	font-size: 20px;
+	text-align: center;
+	position: relative;
+	top: 40%;
+}
+
+#unit-selection .dropdown {
+	width: 50px;
+	height: 20px;
+	margin: 10px;
+	padding: 0;
+	border-radius: 3px;
+	position: absolute;
+	overflow: hidden;
+}
+
+#unit-selection select {
+	width: 50px;
+	height: 20px;
+	marign: 0;
+	padding: 0 0 0 10px;
+	background: #555;
+	border: 1px solid #555;
+	border: none;
+	color: #FFF;
+	float: left;
+}
+
+#unit-selection select option {
+	background: #FFF;
+	color: #333;
+}
+
+#unit-selection select:hover {
+	cursor: pointer;
+}
+
+#unit-selection .dropdown:before {
+	content: "";
+	width: 18px;
+	height: 20px;
+	display: block;
+	background-color: #555;
+	background-image: url("https://mdn.mozillademos.org/files/5675/dropdown.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	top: 0px;
+	right: 0px;
+	position: absolute;
+	z-index: 1;
+	pointer-events: none;
+}
+
+#unit-selection .unit-top-left {
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#unit-selection .unit-top-left-w {
+	top: -22px;
+	left: 30px;
+}
+
+#unit-selection .unit-top-left-h {
+	top: 20px;
+	left: -37px;
+}
+
+#unit-selection .unit-top-right {
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+#unit-selection .unit-top-right-w {
+	top: -22px;
+	right: 30px;
+}
+
+#unit-selection .unit-top-right-h {
+	top: 20px;
+	right: -37px;
+}
+
+#unit-selection .unit-bottom-right {
+	bottom: 0;
+	right: 0;
+	display: none;
+}
+
+#unit-selection .unit-bottom-right-w {
+	bottom: -22px;
+	right: 30px;
+}
+
+#unit-selection .unit-bottom-right-h {
+	bottom: 20px;
+	right: -37px;
+}
+
+#unit-selection .unit-bottom-left {
+	bottom: 0;
+	left: 0;
+	display: none;
+}
+
+#unit-selection .unit-bottom-left-w {
+	bottom: -22px;
+	left: 30px;
+}
+
+#unit-selection .unit-bottom-left-h {
+	bottom: 20px;
+	left: -37px;
+}
+
+/******************************************************************************/
+/******************************************************************************/
+
+
+#radius-lock {
+	width: 200px;
+	height: 75px;
+	margin: 30px 0 0 30px;
+	padding: 30px;
+	border: 3px solid #555;
+	border-radius: 10px;
+	position: relative;
+	float: left;
+}
+
+#radius-lock .ui-checkbox {
+	color: #FFF;
+	position: absolute;
+}
+
+#radius-lock .ui-checkbox &gt; label {
+	height: 20px;
+	width: 34px;
+	padding: 0;
+}
+
+#radius-lock .info {
+	height: 20%;
+	width: 100%;
+	line-height: 20%;
+	font-size: 20px;
+	text-align: center;
+	position: relative;
+	top: 40%;
+}
+
+#radius-lock [data-topic="top-left"] {
+	top: 10px;
+	left: 10px;
+}
+
+#radius-lock [data-topic="top-right"] {
+	top: 10px;
+	right: 10px;
+}
+
+#radius-lock [data-topic="bottom-right"] {
+	bottom: 10px;
+	right: 10px;
+}
+
+#radius-lock [data-topic="bottom-left"] {
+	bottom: 10px;
+	left: 10px;
+}
+
+/**
+ * Controls
+ */
+
+#dimensions {
+	width: 200px;
+	color: #444;
+	float:left;
+}
+
+#dimensions input {
+	background: #555;
+	color: #FFF;
+	border: none;
+	border-radius: 3px;
+}
+
+#output {
+	width: 500px;
+	padding: 10px 0;
+	margin: 10px 0;
+	color: #555;
+	text-align: center;
+	border: 1px dashed #999;
+	border-radius: 3px;
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+
+	float: right;
+}
+
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js"><code class="language-js">'use strict';
+
+
+/**
+ * UI-InputSliderManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseInt(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		subscribe(obj.topic, function(value) {
+			input.value = value + obj.unit;
+		});
+
+		return input;
+	}
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		document.addEventListener("mouseup", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		});
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		}
+
+		return slider;
+	}
+
+	var InputSlider = function(node) {
+		var min		= node.getAttribute('data-min') | 0;
+		var max		= node.getAttribute('data-max') | 0;
+		var step	= node.getAttribute('data-step') | 0;
+		var value	= node.getAttribute('data-value') | 0;
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+
+		this.min = min;
+		this.max = max &gt; 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit;
+		this.sensivity = sensivity &gt; 0 ? sensivity : 5;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+		node.className = 'ui-input-slider ui-input-slider-container';
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	}
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		if (value &gt; slider.max) value = slider.max;
+		if (value &lt; slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		if (send_notify !== undefined &amp;&amp; send_notify === false) {
+			slider.input.value = value + slider.unit;
+			return;
+		}
+
+		notify.call(slider);
+	}
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	}
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	}
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	}
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new InputSlider(elem[i]);
+	}
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		getNode : getNode,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	}
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	}
+
+	var setValue = function setValue(topic, value) {
+		try {
+			buttons[topic].checkbox.checked = value;
+		}
+		catch(error) {
+			console.log(error);
+		}
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new CheckBox(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+
+window.addEventListener("load", function() {
+	BorderRadius.init();
+});
+
+var BorderRadius = (function BorderRadius() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	/**
+	 * Shadow dragging
+	 */
+	var PreviewMouseTracking = (function Drag() {
+		var active = false;
+		var lastX = 0;
+		var lastY = 0;
+		var subscribers = [];
+
+		var init = function init(id) {
+			var elem = getElemById(id);
+			elem.addEventListener('mousedown', dragStart, false);
+			document.addEventListener('mouseup', dragEnd, false);
+		}
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			active = true;
+			lastX = e.clientX;
+			lastY = e.clientY;
+			document.addEventListener('mousemove', mouseDrag, false);
+		}
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			if (active === true) {
+				active = false;
+				document.removeEventListener('mousemove', mouseDrag, false);
+			}
+		}
+
+		var mouseDrag = function mouseDrag(e) {
+			notify(e.clientX - lastX, e.clientY - lastY);
+			lastX = e.clientX;
+			lastY = e.clientY;
+		}
+
+		var subscribe = function subscribe(callback) {
+			subscribers.push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			var index = subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(deltaX, deltaY) {
+			for (var i in subscribers)
+				subscribers[i](deltaX, deltaY);
+		}
+
+		return {
+			init : init,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	var subject;
+	var units = ['px', '%'];
+	var output = null;
+
+	var UnitSelector = function UnitSelector(topic) {
+
+		this.container = document.createElement("div");
+		this.select = document.createElement("select");
+		for (var i in units) {
+			var option = document.createElement("option");
+			option.value = i;
+			option.textContent = units[i];
+			this.select.appendChild(option);
+		}
+
+		this.container.className = 'dropdown ' + 'unit-' + topic;
+		this.container.appendChild(this.select);
+	}
+
+	UnitSelector.prototype.setValue = function setValue(value) {
+		this.salect.value = value;
+	}
+
+
+	var RadiusContainer = function RadiusContainer(node) {
+		var radius = document.createElement('div');
+		var handle = document.createElement('div');
+		var x = node.getAttribute('data-x');
+		var y = node.getAttribute('data-y');
+		var active = false;
+
+		this.id = node.id;
+		this.node = node;
+		this.radius = radius;
+		this.handle = handle;
+		this.width = 100;
+		this.height = 50;
+		this.size = 0;
+		this.rounded = false;
+
+		this.unitX = 0;
+		this.unitY = 0;
+		this.unitR = 0;
+
+		this.maxW = 100;
+		this.maxH = 100;
+		this.maxR = 100;
+
+		this.topic = y + '-' + x;
+
+		var sliderW = InputSliderManager.getNode(this.topic + '-w');
+		var sliderH = InputSliderManager.getNode(this.topic + '-h');
+		var sliderR = InputSliderManager.getNode(this.topic);
+
+		this.setUnitX(this.unitX);
+		this.setUnitY(this.unitY);
+		this.setUnitR(this.unitR);
+
+		this.updateWidth();
+		this.updateHeight();
+		this.updateRadius();
+
+		if (x === 'left')	this.resizeX =  1;
+		if (x === 'right')	this.resizeX = -1;
+		if (y === 'top')	this.resizeY =  1;
+		if (y === 'bottom')	this.resizeY = -1;
+
+		radius.className = 'radius';
+
+		var unit_selector = document.getElementById("unit-selection");
+		var unitW = new UnitSelector(this.topic + '-w');
+		var unitH = new UnitSelector(this.topic + '-h');
+		var unitR = new UnitSelector(this.topic);
+
+		unit_selector.appendChild(unitW.container);
+		unit_selector.appendChild(unitH.container);
+		unit_selector.appendChild(unitR.container);
+		node.appendChild(radius);
+		subject.appendChild(handle);
+
+		unitW.select.addEventListener('change', function(e) {
+			this.setUnitX(e.target.value | 0);
+		}.bind(this));
+
+		unitH.select.addEventListener('change', function(e) {
+			this.setUnitY(e.target.value | 0);
+		}.bind(this));
+
+		unitR.select.addEventListener('change', function(e) {
+			this.setUnitR(e.target.value | 0);
+		}.bind(this));
+
+		if (x === 'left' &amp;&amp; y == 'top') handle.className = 'handle handle-top-left'
+		if (x === 'right' &amp;&amp; y == 'top') handle.className = 'handle handle-top-right';
+		if (x === 'right' &amp;&amp; y == 'bottom') handle.className = 'handle handle-bottom-right';
+		if (x === 'left' &amp;&amp; y == 'bottom') 	handle.className = 'handle handle-bottom-left';
+
+		handle.addEventListener("mousedown", function(e) {
+			active = true;
+			this.radius.style.display = 'block';
+			PreviewMouseTracking.subscribe(this.updateContainer.bind(this));
+		}.bind(this));
+
+		document.addEventListener("mouseup", function(e) {
+			this.radius.style.display = 'none';
+			if (active === true)
+				PreviewMouseTracking.unsubscribe(this.updateContainer.bind(this));
+		}.bind(this));
+
+		InputSliderManager.subscribe(this.topic + '-w', this.setWidth.bind(this));
+		InputSliderManager.subscribe(this.topic + '-h', this.setHeight.bind(this));
+		InputSliderManager.subscribe(this.topic, this.setRadius.bind(this));
+
+		ButtonManager.subscribe(this.topic, function(value) {
+			this.rounded = value;
+			if (value === true) {
+				unitW.container.style.display = 'none';
+				unitH.container.style.display = 'none';
+				unitR.container.style.display = 'block';
+				sliderW.style.display = 'none';
+				sliderH.style.display = 'none';
+				sliderR.style.display = 'block';
+				this.setUnitR(this.unitR);
+				this.updateRadius();
+			}
+
+			if (value === false) {
+				unitW.container.style.display = 'block';
+				unitH.container.style.display = 'block';
+				unitR.container.style.display = 'none';
+				sliderW.style.display = 'block';
+				sliderH.style.display = 'block';
+				sliderR.style.display = 'none';
+				this.setUnitX(this.unitX);
+				this.setUnitY(this.unitY);
+				this.updateWidth();
+				this.updateHeight();
+			}
+
+			this.updateBorderRadius();
+
+		}.bind(this));
+
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.updateWidth = function updateWidth() {
+		this.node.style.width = this.width + units[this.unitX];
+		var value = Math.round(this.width / 2);
+		InputSliderManager.setValue(this.topic + '-w', value, false);
+	}
+
+	RadiusContainer.prototype.updateHeight = function updateHeight() {
+		this.node.style.height = this.height + units[this.unitY];
+		var value = Math.round(this.height / 2);
+		InputSliderManager.setValue(this.topic + '-h', value, false);
+	}
+
+	RadiusContainer.prototype.updateRadius = function updateRadius() {
+		var value = Math.round(this.size / 2);
+		this.node.style.width = this.size + units[this.unitR];
+		this.node.style.height = this.size + units[this.unitR];
+		InputSliderManager.setValue(this.topic, value, false);
+	}
+
+	RadiusContainer.prototype.setWidth = function setWidth(value) {
+		this.radius.style.display = 'block';
+		this.width = 2 * value;
+		this.node.style.width = this.width + units[this.unitX];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setHeight = function setHeight(value) {
+		this.radius.style.display = 'block';
+		this.height = 2 * value;
+		this.node.style.height = this.height + units[this.unitY];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setRadius = function setRadius(value) {
+		this.radius.style.display = 'block';
+		this.size = 2 * value;
+		this.node.style.width = this.size + units[this.unitR];
+		this.node.style.height = this.size + units[this.unitR];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setUnitX = function setUnitX(value) {
+		this.unitX = value;
+		if (this.unitX === 0) this.maxW = 2 * subject.clientWidth;
+		if (this.unitX === 1) this.maxW = 200;
+		InputSliderManager.setUnit(this.topic + '-w', units[this.unitX]);
+		InputSliderManager.setMax(this.topic + '-w', this.maxW / 2);
+	}
+
+	RadiusContainer.prototype.setUnitY = function setUnitY(value) {
+		this.unitY = value;
+		if (this.unitY === 0) this.maxH = 2 * subject.clientHeight;
+		if (this.unitY === 1) this.maxH = 200;
+		InputSliderManager.setUnit(this.topic + '-h', units[this.unitY]);
+		InputSliderManager.setMax(this.topic + '-h', this.maxH / 2);
+	}
+
+	RadiusContainer.prototype.setUnitR = function setUnitR(value) {
+		this.unitR = value;
+
+		if (this.unitR === 0)
+			this.maxR = 2 * Math.min(subject.clientHeight , subject.clientWidth);
+
+		if (this.unitR === 1)
+			this.maxR = 200;
+
+		InputSliderManager.setUnit(this.topic, units[this.unitR]);
+		InputSliderManager.setMax(this.topic, this.maxR / 2);
+	}
+
+	RadiusContainer.prototype.updateUnits = function updateUnits(unit) {
+		if (this.rounded) {
+			this.setUnitR(this.unitR);
+			return;
+		}
+
+		if (unit === 0)
+			this.setUnitX(this.unitX);
+
+		if (unit === 1)
+			this.setUnitY(this.unitY);
+	}
+
+	RadiusContainer.prototype.composeBorderRadius = function composeBorderRadius () {
+
+		if (this.rounded === true) {
+			var unit = units[this.unitR];
+			var value = Math.round(this.size / 2);
+			return value + unit;
+		}
+
+		var unitX = units[this.unitX];
+		var unitY = units[this.unitY];
+		var valueX = Math.round(this.width / 2);
+		var valueY = Math.round(this.height / 2);
+
+		if (valueX === valueY &amp;&amp; this.unitX === this.unitY)
+			return valueX + unitX;
+
+		return valueX + unitX + ' ' + valueY + unitY;
+	}
+
+	RadiusContainer.prototype.updateBorderRadius = function updateBorderRadius () {
+		var radius = this.composeBorderRadius();
+		var corner = 0;
+
+		if (this.topic === 'top-left') {
+			subject.style.borderTopLeftRadius = radius;
+			corner = 0;
+		}
+
+		if (this.topic === 'top-right') {
+			subject.style.borderTopRightRadius = radius;
+			corner = 1;
+		}
+
+		if (this.topic === 'bottom-right') {
+			subject.style.borderBottomRightRadius = radius;
+			corner = 2;
+		}
+
+		if (this.topic === 'bottom-left') {
+			subject.style.borderBottomLeftRadius = radius;
+			corner = 3;
+		}
+
+		Tool.updateOutput(corner, radius);
+	}
+
+	RadiusContainer.prototype.updateContainer = function updateContainer(deltaX, deltaY) {
+
+		if (this.rounded === true) {
+			this.size += this.resizeX * deltaX + this.resizeY * deltaY;
+			if (this.size &lt; 0)	this.size = 0;
+			if (this.size &gt; this.maxR)	this.size = this.maxR;
+			this.updateRadius();
+			this.updateBorderRadius();
+			return;
+		}
+
+		if (deltaX) {
+			this.width += this.resizeX * deltaX;
+			if (this.width &lt; 0)	this.width = 0;
+			if (this.width &gt; this.maxW)	this.width = this.maxW;
+			this.updateWidth();
+		}
+
+		if (deltaY) {
+			this.height += this.resizeY * deltaY;
+			if (this.height &lt; 0) this.height = 0;
+			if (this.height &gt; this.maxH)	this.height = this.maxH;
+			this.updateHeight();
+		}
+
+		if (deltaX || deltaY)
+			this.updateBorderRadius();
+	}
+
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview;
+		var preview_ui;
+		var radius_containers = [];
+		var border_width = 3;
+		var borders1 = [null, null, null, null];
+		var borders2 = [0, 0, 0, 0];
+
+		var updateUIWidth = function updateUIWidth(value) {
+			var pwidth = subject.parentElement.clientWidth;
+			var left = (pwidth - value) / 2;
+			subject.style.width = value + "px";
+
+			for (var i = 0; i &lt; 4; i++)
+				radius_containers[i].updateUnits(0);
+		}
+
+		var updateUIHeight = function updateUIHeight(value) {
+			var pheight = subject.parentElement.clientHeight;
+			var top = (pheight - value) / 2;
+			subject.style.height = value + "px";
+			subject.style.top = top - border_width + "px";
+
+			for (var i = 0; i &lt; 4; i++)
+				radius_containers[i].updateUnits(1);
+		}
+
+		var updatePreviewUIWidth = function updatePreviewUIWidth() {
+			var p = subject.parentElement.clientWidth;
+			var v = preview_ui.clientWidth;
+			console.log(p, v, (p - v ) / 2);
+			preview_ui.style.left = (p - v) / 2 + "px" ;
+		}
+
+		var updatePreviewUIHeight = function updatePreviewUIHeight() {
+			var p = subject.parentElement.clientHeight;
+			var v = preview_ui.clientHeight;
+			console.log(p, v, (p - v ) / 2);
+			preview_ui.style.top = (p - v) / 2 + "px" ;
+		}
+
+		var updateOutput = function updateOutput(corner, radius) {
+			var values = radius.split(" ");
+
+			borders1[corner] = values[0];
+			borders2[corner] = values[0];
+
+			if (values.length === 2)
+				borders2[corner] = values[1];
+
+			var border_1_value = borders1.join(" ");
+			var border_2_value = borders2.join(" ");
+			var border_radius = 'border-radius: ' + border_1_value;
+
+			if (border_2_value !== border_1_value)
+				border_radius += ' / ' + border_2_value;
+
+			border_radius += ';';
+			output.textContent = border_radius;
+		}
+
+		var init = function init() {
+			preview = getElemById("preview");
+			subject = getElemById("subject");
+			output = getElemById("output");
+			preview_ui = getElemById("radius-ui-sliders");
+
+			var elem = document.querySelectorAll('.radius-container');
+			var size = elem.length;
+			for (var i = 0; i &lt; size; i++)
+				radius_containers[i] = new RadiusContainer(elem[i]);
+
+			InputSliderManager.subscribe("width", updateUIWidth);
+			InputSliderManager.subscribe("height", updateUIHeight);
+
+			InputSliderManager.setValue("width", subject.clientWidth);
+			InputSliderManager.setValue("height", subject.clientHeight);
+		}
+
+		return {
+			init : init,
+			updateOutput : updateOutput
+		}
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		ButtonManager.init();
+		InputSliderManager.init();
+		PreviewMouseTracking.init("preview");
+		Tool.init();
+	}
+
+	return {
+		init : init
+	}
+
+})();
+
+
+</code></pre>
+</div>
+
+<p>{{EmbedLiveSample('border-radius-generator', '100%', '800px')}}</p>
diff --git a/files/de/web/css/css_background_and_borders/index.html b/files/de/web/css/css_background_and_borders/index.html
new file mode 100644
index 0000000000..87b26bd607
--- /dev/null
+++ b/files/de/web/css/css_background_and_borders/index.html
@@ -0,0 +1,154 @@
+---
+title: CSS Background and Borders
+slug: Web/CSS/CSS_Background_and_Borders
+tags:
+  - CSS
+  - CSS Backgrounds and Borders
+  - CSS Reference
+  - NeedsTranslation
+  - Overview
+  - TopicStub
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders
+---
+<p>{{CSSRef}}</p>
+
+<p><strong>CSS Background and Borders</strong> is a module of CSS that defines how background and borders of elements are described. Borders can be lines or images, boxes can have one or multiple backgrounds, have rounded corners, and shadows.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="CSS_Properties">CSS Properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("background")}}</li>
+ <li>{{cssxref("background-attachment")}}</li>
+ <li>{{cssxref("background-clip")}}</li>
+ <li>{{cssxref("background-color")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+ <li>{{cssxref("background-origin")}}</li>
+ <li>{{cssxref("background-position")}}</li>
+ <li>{{cssxref("background-repeat")}}</li>
+ <li>{{cssxref("background-size")}}</li>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>{{cssxref("border")}}</li>
+ <li>{{cssxref("border-bottom")}}</li>
+ <li>{{cssxref("border-bottom-color")}}</li>
+ <li>{{cssxref("border-bottom-left-radius")}}</li>
+ <li>{{cssxref("border-bottom-right-radius")}}</li>
+ <li>{{cssxref("border-bottom-style")}}</li>
+ <li>{{cssxref("border-bottom-width")}}</li>
+ <li>{{cssxref("border-collapse")}}</li>
+ <li>{{cssxref("border-color")}}</li>
+ <li>{{cssxref("border-image")}}</li>
+ <li>{{cssxref("border-image-outset")}}</li>
+ <li>{{cssxref("border-image-repeat")}}</li>
+ <li>{{cssxref("border-image-slice")}}</li>
+ <li>{{cssxref("border-image-source")}}</li>
+ <li>{{cssxref("border-image-width")}}</li>
+ <li>{{cssxref("border-left")}}</li>
+ <li>{{cssxref("border-left-color")}}</li>
+ <li>{{cssxref("border-left-style")}}</li>
+ <li>{{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("border-radius")}}</li>
+ <li>{{cssxref("border-right")}}</li>
+ <li>{{cssxref("border-right-color")}}</li>
+ <li>{{cssxref("border-right-style")}}</li>
+ <li>{{cssxref("border-right-width")}}</li>
+ <li>{{cssxref("border-style")}}</li>
+ <li>{{cssxref("border-top")}}</li>
+ <li>{{cssxref("border-top-color")}}</li>
+ <li>{{cssxref("border-top-left-radius")}}</li>
+ <li>{{cssxref("border-top-right-radius")}}</li>
+ <li>{{cssxref("border-top-style")}}</li>
+ <li>{{cssxref("border-top-width")}}</li>
+ <li>{{cssxref("border-width")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">Using CSS multiple backgrounds</a></dt>
+ <dd>Explains how to set backgrounds on elements and how they will interact with it.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Scaling_background_images">Scaling background images</a></dt>
+ <dd>Describes how to change the appearance of the background images, by stretching them or repeating them, to cover the whole background of the element, or not.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Backgrounds') }}</td>
+   <td>{{ Spec2('CSS3 Backgrounds') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable()}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>4.0</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/de/web/css/css_background_and_borders/mehrere_hintergründe_in_css_verwenden/index.html b/files/de/web/css/css_background_and_borders/mehrere_hintergründe_in_css_verwenden/index.html
new file mode 100644
index 0000000000..4c0b1e58ec
--- /dev/null
+++ b/files/de/web/css/css_background_and_borders/mehrere_hintergründe_in_css_verwenden/index.html
@@ -0,0 +1,69 @@
+---
+title: Mehrere Hintergründe in CSS verwenden
+slug: Web/CSS/CSS_Background_and_Borders/Mehrere_Hintergründe_in_CSS_verwenden
+tags:
+  - Beispiel
+  - CSS
+  - CSS Hintergrund
+  - Guide
+  - Intermediate
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
+---
+<p>{{CSSRef}}</p>
+
+<p><span class="seoSummary">Mit <a href="/de/docs/Web/CSS/CSS3">CSS3</a> können einem Element mehrere Hintergründe zugewiesen werden. Diese werden aufeinander gestapelt wobei der erste Hintergrund zuoberst ist und der letzte zuunterst. Nur dem untersten Hintergrund kann eine Hintergrundfarbe zugewiesen werden.</span></p>
+
+<p>Mehrere Hintergründe festzulegen ist einfach:</p>
+
+<pre class="brush: css">.myclass {
+  background: background1, background 2, ..., background;
+}
+</pre>
+
+<p>Du kannst dies mit beiden Varianten, der verkürzten {{cssxref("background")}} Eigenschaft und dem Einzel-Eigenschafts-Selektor davon ausser {{cssxref("background-color")}}. Die folgenden Hintergrund Eigenschaften können als Liste festgelegt werden, eine pro Hintergrund: {{cssxref("background")}}, {{cssxref("background-attachment")}}, {{cssxref("background-clip")}},<code> </code>{{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>In diesem Beispiel werden drei Hintergründe übereinandergelegt: das Firefox Logo, ein <a href="/de/docs/Web/CSS/linear-gradient">linearer Farbverlauf</a> und ein Bild mit Blasen:</p>
+
+<pre class="brush: css">.multi_bg_example {
+  background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png),
+                    url(https://mdn.mozillademos.org/files/11307/bubbles.png),
+                    linear-gradient(to right, rgba(30, 75, 115, 1),  rgba(255, 255, 255, 0));
+
+  background-repeat: no-repeat,
+                     no-repeat,
+                     no-repeat;
+
+  background-position: bottom right,
+                       left,
+                       right;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="multi_bg_example"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css">.multi_bg_example {
+  width:100%;
+  height:400px;
+  background: url(https://mdn.mozillademos.org/files/11305/firefox.png),
+            url(https://mdn.mozillademos.org/files/11307/bubbles.png),
+  -moz-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)),
+  -webkit-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)),
+  -ms-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)),
+  linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
+}</pre>
+</div>
+
+<h2 id="Ergebnis">Ergebnis</h2>
+
+<p>{{EmbedLiveSample('Beispiel', '100%', '400')}}</p>
+
+<p>Wie oben zu erkennen ist, liegt das Firefox Logo (als erstes aufgelistet) zuoberst, gefolgt vom Hintergrund mit Blasen, welcher wiederum auf dem Farbverlauf liegt. Jede nachfolgende Untereigenschaft ({{cssxref("background-repeat")}} und {{cssxref("background-position")}}) gilt für den entsprechenden Hintergrund. Demzufolge gilt der erste aufgelistete Wert für {{cssxref("background-repeat")}} für den ersten (vordersten) Hintergrund und so weiter.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Farbverläufe_in_CSS">Verwendung von CSS Farbverläufen</a></li>
+</ul>
diff --git a/files/de/web/css/css_basic_user_interface/index.html b/files/de/web/css/css_basic_user_interface/index.html
new file mode 100644
index 0000000000..6b0f5e652e
--- /dev/null
+++ b/files/de/web/css/css_basic_user_interface/index.html
@@ -0,0 +1,76 @@
+---
+title: CSS Basic User Interface
+slug: Web/CSS/CSS_Basic_User_Interface
+tags:
+  - CSS
+  - CSS Basic User Interface
+  - Overview
+  - Reference
+  - Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Basic_User_Interface
+---
+<p>{{CSSRef}}</p>
+
+<p><strong>CSS Basic User Interface</strong> ist ein CSS Modul, das es erlaubt, die Darstellung und Funktionalität von Benutzerschnittstellenfeatures zu definieren.</p>
+
+<h2 id="Referenz">Referenz</h2>
+
+<h3 id="Einstellungen">Einstellungen</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("appearance")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("box-sizing")}}</li>
+ <li>{{CSSxRef("cursor")}}</li>
+ <li>{{CSSxRef("ime-mode")}} {{Deprecated_Inline}}</li>
+ <li>{{CSSxRef("nav-down")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("nav-left")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("nav-right")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("nav-up")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("outline")}}</li>
+ <li>{{CSSxRef("outline-width")}}</li>
+ <li>{{CSSxRef("outline-style")}}</li>
+ <li>{{CSSxRef("outline-color")}}</li>
+ <li>{{CSSxRef("outline-offset")}}</li>
+ <li>{{CSSxRef("resize")}}</li>
+ <li>{{CSSxRef("text-overflow")}}</li>
+ <li>{{CSSxRef("user-select")}} {{Experimental_Inline}}</li>
+</ul>
+</div>
+
+<h2 id="Anleitungen">Anleitungen</h2>
+
+<dl>
+ <dt><a href="/de/docs/Web/CSS/CSS_User_Interface/Verwendung_von_URL_Werten_für_die_cursor_Eigenschaft">Verwendung von URL Werten für die <code>cursor</code> Eigenschaft</a></dt>
+ <dd>Erklärt und zeigt, wie ein URL für die {{cssxref('cursor')}} Eigenschaft angegeben werden kann, um benutzerdefinierte Mauszeiger zu erstellen.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Basic UI")}}</td>
+   <td>{{Spec2("CSS4 Basic UI")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Basic UI")}}</td>
+   <td>{{Spec2("CSS3 Basic UI")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "ui.html")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Ursprüngliche Definition.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/de/web/css/css_boxmodell/box-shadow_generator/index.html b/files/de/web/css/css_boxmodell/box-shadow_generator/index.html
new file mode 100644
index 0000000000..b087898d03
--- /dev/null
+++ b/files/de/web/css/css_boxmodell/box-shadow_generator/index.html
@@ -0,0 +1,2884 @@
+---
+title: Box-shadow Generator
+slug: Web/CSS/CSS_Boxmodell/Box-shadow_generator
+tags:
+  - CSS3
+  - Werkzeuge
+  - box-shadow
+translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
+---
+<p>Dieses Werkzeug erlaubt es, CSS {{cssxref("box-shadow")}} Effekte zu erstellen, um Schlagschatteneffekte zu CSS Objekten hinzuzufügen.</p>
+
+<div style="display: none;">
+<h2 id="box-shadow_generator" name="box-shadow_generator">box-shadow generator</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+    &lt;div class="group section"&gt;
+        &lt;div id="layer_manager"&gt;
+            &lt;div class="group section"&gt;
+                &lt;div class="button" data-type="add"&gt; &lt;/div&gt;
+                &lt;div class="button" data-type="move-up"&gt; &lt;/div&gt;
+                &lt;div class="button" data-type="move-down"&gt; &lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div id="stack_container"&gt;&lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="preview_zone"&gt;
+            &lt;div id="layer_menu" class="col span_12"&gt;
+                &lt;div class="button" id="element" data-type="subject" data-title="element"&gt; element &lt;/div&gt;
+                &lt;div class="button" id="before" data-type="subject" data-title=":before"&gt;
+                    :before
+                    &lt;span class="delete" data-type="disable"&gt;&lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="button" id="after" data-type="subject" data-title=":after"&gt;
+                    :after
+                    &lt;span class="delete" data-type="disable"&gt;&lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='before' data-label=":before"&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='after' data-label=":after"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="preview"&gt;
+                &lt;div id="obj-element"&gt;
+                    &lt;div class="content"&gt; &lt;/div&gt;
+                    &lt;div id="obj-before"&gt; &lt;/div&gt;
+                    &lt;div id="obj-after"&gt; &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div id="controls" class="group section"&gt;
+        &lt;div class="wrap-left"&gt;
+            &lt;div class="colorpicker category"&gt;
+                &lt;div class="title"&gt; &lt;/div&gt;
+                &lt;div id="colorpicker" class="group"&gt;
+                    &lt;div id="gradient" class="gradient"&gt;
+                        &lt;div id="gradient_picker"&gt; &lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div id="hue" data-topic="hue" class="hue"&gt;
+                        &lt;div id="hue_selector"&gt; &lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="info"&gt;
+                        &lt;div class="input" data-topic="hue" data-title='H:' data-action="HSV"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="saturation" data-title='S:' data-action="HSV"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="value" data-title='V:' data-action="HSV"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="alpha"&gt;
+                        &lt;div id="alpha" data-topic="alpha"&gt;
+                            &lt;div id="alpha_selector"&gt; &lt;/div&gt;
+                        &lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="info"&gt;
+                        &lt;div class="input" data-topic="r" data-title='R:' data-action="RGB"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="g" data-title='G:' data-action="RGB"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="b" data-title='B:' data-action="RGB"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="preview block"&gt;
+                        &lt;div id="output_color"&gt; &lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="block info"&gt;
+                        &lt;div class="input" data-topic="a" data-title='alpha:' data-action="alpha"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="hexa" data-title='' data-action="hexa"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div class="wrap-right"&gt;
+
+            &lt;div id="shadow_properties" class="category"&gt;
+                &lt;div class="title"&gt; Shadow properties &lt;/div&gt;
+                &lt;div class="group"&gt;
+                    &lt;div class="group property"&gt;
+                        &lt;div class="ui-slider-name"&gt; inset &lt;/div&gt;
+                        &lt;div class="ui-checkbox" data-topic='inset'&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Position x &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="posX" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="posX"
+                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="posX" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="posX" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Position y &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="posY" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="posY"
+                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="posY" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="posY" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Blur &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="blur" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="blur"
+                            data-min="0" data-max="200" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="blur" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="blur" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Spread &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="spread" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="spread"
+                            data-min="-100"    data-max="100" data-step="1" data-value="50"&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="spread" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="spread" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="element_properties" class="category"&gt;
+                &lt;div class="title"&gt; Class element properties &lt;/div&gt;
+                &lt;div class="group"&gt;
+                    &lt;div class="group property"&gt;
+                        &lt;div class="ui-slider-name"&gt; border &lt;/div&gt;
+                        &lt;div class="ui-checkbox" data-topic='border-state' data-state="true"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div id="z-index" class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; z-index &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="z-index" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="z-index"
+                            data-min="-10" data-max="10" data-step="1"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="z-index" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="z-index"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; top &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="top" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="top"
+                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="top" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="top" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; left &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="left" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="left"
+                            data-min="-300" data-max="700" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="left" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="left" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div id="transform_rotate" class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Rotate &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="rotate" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="rotate"
+                            data-min="-360" data-max="360" data-step="1" data-value="0"&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="rotate" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="rotate" data-unit="deg"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Width &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="width" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="width"
+                            data-min="0" data-max="1000" data-step="1" data-value="200"&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="width" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="width"  data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Height &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="height" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="height"
+                            data-min="0" data-max="400" data-step="1" data-value="200"&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="height" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="height" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="output" class="category"&gt;
+                &lt;div id="menu" class="menu"&gt;&lt;/div&gt;
+                &lt;div class="title"&gt;    CSS Code &lt;/div&gt;
+                &lt;div class="group" style="border-top-left-radius: 0;"&gt;
+                    &lt;div class="output" data-topic="element" data-name="element"
+                        data-prop="width height background-color position=[relative] box-shadow"&gt;
+                    &lt;/div&gt;
+                    &lt;div class="output" data-topic="before" data-name="element:before"
+                        data-prop="content=[&amp;quot;&amp;quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"&gt;
+                    &lt;/div&gt;
+                    &lt;div class="output" data-topic="after" data-name="element:after"
+                        data-prop="content=[&amp;quot;&amp;quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+/*
+ * UI Slider
+ */
+
+.slidergroup {
+	height: 20px;
+	margin: 10px 0;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.slidergroup * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Slider */
+
+.ui-slider {
+	height: 10px;
+	width: 200px;
+	margin: 4px 10px;
+	display: block;
+	border: 1px solid #999;
+	border-radius: 3px;
+	background: #EEE;
+}
+
+.ui-slider:hover {
+	cursor: pointer;
+}
+
+.ui-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-slider-pointer {
+	width: 13px;
+	height: 13px;
+	background-color: #EEE;
+	border: 1px solid #2C9FC9;
+	border-radius: 3px;
+	position: relative;
+	top: -3px;
+	left: 0%;
+}
+
+.ui-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 3px;
+	color: #FFF;
+	font-weight: bold;
+	text-align: center;
+}
+
+.ui-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+.ui-slider-input &gt; input {
+	margin: 0 10px;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/*
+ * UI Button
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox &gt; input {
+ 	display: none;
+}
+
+.ui-checkbox &gt; label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 3px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox &gt; label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox &gt; input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*
+ * BOX SHADOW GENERATOR TOOL
+ */
+
+body {
+	max-width: 1000px;
+	height: 800px;
+	margin: 20px auto 0;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+}
+
+#container {
+	width: 100%;
+	padding: 2px;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/* container with shadows stacks */
+#stack_container {
+	height: 400px;
+	overflow: hidden;
+	position: relative;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#stack_container .container {
+	height: 100%;
+	width: 100%;
+	position: absolute;
+	left: 100%;
+	transition-property: left;
+	transition-duration: 0.5s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+#stack_container .title {
+	text-align: center;
+	font-weight: bold;
+	line-height: 2em;
+	border-bottom: 1px solid #43A6E1;
+	color: #666;
+}
+
+
+/*
+ * Stack of Layers for shadow
+ */
+
+#layer_manager {
+	width: 17%;
+	background-color: #FEFEFE;
+	margin: 0 1% 0 0;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	float: left;
+}
+
+
+#layer_manager .button {
+	width: 30%;
+	height: 25px;
+	margin:0 0 10px;
+	color: #333;
+	background-color: #EEE;
+	text-align: center;
+	font-size: 0.75em;
+	line-height: 1.5em;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+
+	display: block;
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	float: left;
+}
+
+#layer_manager .button:hover {
+	background-color: #3380C4;
+	border: 1px solid #3380C4;
+	cursor: pointer;
+}
+
+#layer_manager [data-type='add'] {
+	background-image: url("https://mdn.mozillademos.org/files/5685/add-black.png");
+}
+
+#layer_manager [data-type='add']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5687/add-white.png");
+}
+
+#layer_manager [data-type='move-up'] {
+	background-image: url("https://mdn.mozillademos.org/files/5697/up-black.png");
+	margin-left: 5%;
+	margin-right: 5%;
+}
+
+#layer_manager [data-type='move-up']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5709/up-white.png");
+}
+
+#layer_manager [data-type='move-down'] {
+	background-image: url("https://mdn.mozillademos.org/files/5693/down-black.png");
+}
+
+#layer_manager [data-type='move-down']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5695/down-white.png");
+}
+
+/* shadows classes */
+
+#layer_manager .node {
+	width: 100%;
+	margin: 5px 0;
+	padding: 5px;
+	text-align: center;
+	background-color: #EEE;
+	border: 1px solid #DDD;
+	font-size: 0.75em;
+	line-height: 1.5em;
+	color: #333;
+	border-radius: 3px;
+
+	position: relative;
+	display: block;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_manager .node:hover {
+	color: #FFF;
+	background-color: #3380C4;
+	cursor: pointer;
+}
+
+/* active element styling */
+
+#layer_manager [data-active='layer'] {
+	color: #FFF;
+	border: none;
+	background-color: #379B4A;
+}
+
+#layer_manager [data-active='subject'] {
+	color: #FFF;
+	background-color: #467FC9;
+}
+
+/* delete button */
+
+#layer_manager .delete {
+	width: 1.5em;
+	height: 100%;
+	float: right;
+	border-radius: 3px;
+	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	position: absolute;
+	top: 0;
+	right: 10px;
+	display: none;
+}
+
+#layer_manager .delete:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
+}
+
+#layer_manager .node:hover .delete {
+	display: block;
+}
+
+
+#layer_manager .stack {
+	padding: 0 5px;
+	max-height: 90%;
+	overflow: auto;
+	overflow-x: hidden;
+}
+
+
+/*
+ * Layer Menu
+ */
+
+#layer_menu {
+	margin: 0 0 10px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_menu .button {
+	width: 100px;
+	margin: 0 5px 0 0;
+	padding: 2.5px;
+	color: #333;
+	background-color: #EEE;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+	font-size: 0.75em;
+	line-height: 1.5em;
+
+	position: relative;
+	display: block;
+	float: left;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_menu .button:hover {
+	color: #FFF;
+	background-color: #3380C4;
+	border: 1px solid #3380C4;
+	cursor: pointer;
+}
+
+#layer_menu .delete {
+	width: 1.5em;
+	height: 100%;
+	float: right;
+	border-radius: 3px;
+	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	position: absolute;
+	top: 0;
+	right: 5px;
+	display: none;
+}
+
+#layer_menu .delete:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
+}
+
+#layer_menu .button:hover .delete {
+	display: block;
+}
+
+
+/*
+ * active element styling
+ */
+
+#layer_menu [data-active='subject'] {
+	color: #FFF;
+	background-color: #379B4A;
+	border: 1px solid #379B4A;
+}
+
+
+/* Checkbox */
+
+#layer_menu .ui-checkbox &gt; label {
+	height: 15px;
+	line-height: 17px;
+	font-weight: normal;
+	width: 46px;
+	margin: 0 5px 0 0;
+}
+
+#layer_menu .ui-checkbox &gt; input:checked + label {
+	display: none;
+}
+
+
+/******************************************************************************/
+/******************************************************************************/
+/*
+ * Preview Area
+ */
+
+#preview_zone {
+	width: 82%;
+	float: left;
+
+}
+
+
+#preview {
+	width: 100%;
+	height: 400px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	cursor: move;
+	float: left;
+}
+
+#preview .content {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+#obj-element {
+	width: 300px;
+	height: 100px;
+	border: 1px solid #CCC;
+	background: #FFF;
+	position: relative;
+}
+
+
+#obj-before {
+	height: 100%;
+	width: 100%;
+	background: #999;
+	border: 1px solid #CCC;
+	text-align: left;
+	display : block;
+	position: absolute;
+	z-index: -1;
+}
+
+#obj-after {
+	height: 100%;
+	width: 100%;
+	background: #DDD;
+	border: 1px solid #CCC;
+	text-align: right;
+	display : block;
+	position: absolute;
+	z-index: -1;
+}
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/**
+ * Controls
+ */
+
+.wrap-left {
+	float: left;
+	overflow: hidden;
+}
+
+.wrap-right {
+	float: right;
+	overflow: hidden;
+}
+
+.wrap-left &gt; * {
+	float: left;
+}
+
+.wrap-right &gt; * {
+	float: right;
+}
+
+@media (min-width: 960px) {
+
+	.wrap-left {
+		width: 45%;
+	}
+
+	.wrap-right {
+		width: 55%;
+	}
+}
+
+
+@media (max-width: 959px) {
+
+	.wrap-left {
+		width: 30%;
+	}
+
+	.wrap-right {
+		width: 70%;
+	}
+}
+
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+
+#controls .category {
+	width: 500px;
+	margin: 0 auto 20px;
+	padding: 0;
+
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 1.5em;
+	line-height: 1.5em;
+	color: #AAA;
+	text-align: right;
+}
+
+#controls .category &gt; .group {
+	border: 1px solid #CCC;
+	border-radius: 3px;
+}
+
+
+/**
+ * 	Color Picker
+ */
+
+@media (min-width: 960px) {
+	#controls .colorpicker {
+		width: 420px;
+	}
+}
+
+@media (max-width: 959px) {
+	#controls .colorpicker {
+		width: 210px;
+	}
+}
+
+#colorpicker {
+	width: 100%;
+	margin: 0 auto;
+}
+
+#colorpicker .gradient {
+	width: 200px;
+	height: 200px;
+	margin: 5px;
+	background: url("https://mdn.mozillademos.org/files/5707/picker_mask_200.png");
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background-color: #F00;
+	float: left;
+}
+
+#colorpicker .hue {
+	width: 200px;
+	height: 30px;
+	margin: 5px;
+	background: url("https://mdn.mozillademos.org/files/5701/hue.png");
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	float: left;
+}
+
+#colorpicker .alpha {
+	width: 200px;
+	height: 30px;
+	margin: 5px;
+	border: 1px solid #CCC;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#colorpicker #alpha {
+	width: 100%;
+	height: 100%;
+	background: url("https://mdn.mozillademos.org/files/5703/alpha_mask.png");
+	background: -moz-linear-gradient(left, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 1) 100%);
+}
+
+#colorpicker #gradient_picker {
+	width: 0.5em;
+	height: 0.5em;
+	border-radius: 0.4em;
+	border: 2px solid #CCC;
+	position: relative;
+	top: 20%;
+	left: 20%;
+}
+
+#colorpicker #hue_selector,
+#colorpicker #alpha_selector {
+	width: 3px;
+	height: 100%;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+	left: 0%;
+}
+
+/* input HSV and RGB */
+#colorpicker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+#colorpicker .info * {
+	float: left;
+}
+
+#colorpicker .info input {
+	margin: 0;
+	text-align: center;
+	width: 30px;
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+#colorpicker .info span {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	line-height: 20px;
+	display: block;
+}
+
+/* Preview color */
+#colorpicker .block {
+	width: 95px;
+	height: 54px;
+	float: left;
+	position: relative;
+}
+
+#colorpicker .preview {
+	margin: 5px;
+	border: 1px solid #CCC;
+	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#colorpicker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+#colorpicker .preview &gt; * {
+	width: 50%;
+	height: 100%;
+}
+
+#colorpicker #output_color {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	z-index: 2;
+}
+
+#colorpicker .block .input {
+	float: right;
+}
+
+#colorpicker [data-topic="a"] &gt; span {
+	width: 50px;
+}
+
+#colorpicker [data-topic="hexa"] {
+	float: right;
+	margin: 10px 0 0 0;
+}
+
+#colorpicker [data-topic="hexa"] &gt; span {
+	display: none;
+}
+
+#colorpicker [data-topic="hexa"] &gt; input {
+	width: 85px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/*
+ * UI Components
+ */
+
+/* Property */
+
+.property {
+	height: 20px;
+	margin: 10px 0;
+}
+
+.property * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Slider */
+
+#controls .ui-slider-name {
+	margin: 0 10px 0 0;
+}
+
+/*
+ * Output code styling
+ */
+
+#output {
+	position: relative;
+}
+
+#output .menu {
+	max-width: 70%;
+	height: 20px;
+	position: absolute;
+	top: 2px;
+}
+
+#output .button {
+	width: 90px;
+	height: 22px;
+	margin: 0 5px 0 0;
+	text-align: center;
+	line-height: 20px;
+	font-size: 14px;
+	color: #FFF;
+	background-color: #999;
+	border-top-left-radius: 3px;
+	border-top-right-radius: 3px;
+	bottom: -5px;
+	float:left;
+}
+
+#output .button:hover {
+	color: #FFF;
+	background-color: #666;
+	cursor: pointer;
+}
+
+#output .menu [data-active="true"] {
+	color: #777;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+	border-bottom: none;
+}
+
+#output .menu [data-topic="before"] {
+	left: 100px;
+}
+
+#output .menu [data-topic="after"] {
+	left: 200px;
+}
+
+#output .output {
+	width: 480px;
+	margin: 10px;
+	padding: 10px;
+	overflow: hidden;
+	color: #555;
+	font-size: 14px;
+	border: 1px dashed #CCC;
+	border-radius: 3px;
+	display: none;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+#output .css-property {
+	width: 100%;
+	float: left;
+	white-space: pre;
+}
+
+#output .name {
+	width: 35%;
+	float: left;
+}
+
+#output .value {
+	width: 65%;
+	float: left;
+}
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js"><code class="language-js">
+
+'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var SliderManager = (function SliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var Slider = function(node) {
+		var min = node.getAttribute('data-min') | 0;
+		var max = node.getAttribute('data-max') | 0;
+		var step = node.getAttribute('data-step') | 0;
+		var value = node.getAttribute('data-value') | 0;
+		var snap = node.getAttribute('data-snap');
+		var topic = node.getAttribute('data-topic');
+
+		this.min = min;
+		this.max = max &gt; 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.value = value &lt;= max &amp;&amp; value &gt;= min ? value : (min + max) / 2 | 0;
+		this.snap = snap === "true" ? true : false;
+		this.topic = topic;
+		this.node = node;
+
+		var pointer = document.createElement('div');
+		pointer.className = 'ui-slider-pointer';
+		node.appendChild(pointer);
+		this.pointer = pointer;
+
+		setMouseTracking(node, updateSlider.bind(this));
+
+		sliders[topic] = this;
+		setValue(topic, this.value);
+	}
+
+	var setButtonComponent = function setButtonComponent(node) {
+		var type = node.getAttribute('data-type');
+		var topic = node.getAttribute('data-topic');
+		if (type === "sub") {
+			node.textContent = '-';
+			node.addEventListener("click", function() {
+				decrement(topic);
+			});
+		}
+		if (type === "add") {
+			node.textContent = '+';
+			node.addEventListener("click", function() {
+				increment(topic);
+			});
+		}
+	}
+
+	var setInputComponent = function setInputComponent(node) {
+		var topic		= node.getAttribute('data-topic');
+		var unit_type	= node.getAttribute('data-unit');
+
+		var input = document.createElement('input');
+		var unit = document.createElement('span');
+		unit.textContent = unit_type;
+
+		input.setAttribute('type', 'text');
+		node.appendChild(input);
+		node.appendChild(unit);
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			setValue(topic, e.target.value | 0);
+		});
+
+		subscribe(topic, function(value) {
+			node.children[0].value = value;
+		});
+	}
+
+	var increment = function increment(topic) {
+		var slider = sliders[topic];
+		if (slider === null || slider === undefined)
+			return;
+
+		if (slider.value + slider.step &lt;= slider.max) {
+			slider.value += slider.step;
+			setValue(slider.topic, slider.value)
+			notify.call(slider);
+		}
+	};
+
+	var decrement = function decrement(topic) {
+		var slider = sliders[topic];
+		if (slider === null || slider === undefined)
+			return;
+
+		if (slider.value - slider.step &gt;= slider.min) {
+			slider.value -= slider.step;
+			setValue(topic, slider.value)
+			notify.call(slider);
+		}
+	}
+
+	// this = Slider object
+	var updateSlider = function updateSlider(e) {
+		var node = this.node;
+		var pos = e.pageX - node.offsetLeft;
+		var width = node.clientWidth;
+		var delta = this.max - this.min;
+		var offset = this.pointer.clientWidth + 4; // border width * 2
+
+		if (pos &lt; 0) pos = 0;
+		if (pos &gt; width) pos = width;
+
+		var value = pos * delta / width | 0;
+		var precision = value % this.step;
+		value = value - precision + this.min;
+		if (precision &gt; this.step / 2)
+			value = value + this.step;
+
+		if (this.snap)
+			pos =  (value - this.min) * width / delta;
+
+		this.pointer.style.left = pos - offset/2 + "px";
+		this.value = value;
+		node.setAttribute('data-value', value);
+		notify.call(this);
+	}
+
+	var setValue = function setValue(topic, value) {
+		var slider = sliders[topic];
+
+		if (value &gt; slider.max || value &lt; slider.min)
+			return;
+
+		var delta = slider.max - slider.min;
+		var width = slider.node.clientWidth;
+		var offset = slider.pointer.clientWidth;
+		var pos =  (value - slider.min) * width / delta;
+		slider.value = value;
+		slider.pointer.style.left = pos - offset / 2 + "px";
+		slider.node.setAttribute('data-value', value);
+		notify.call(slider);
+	}
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener("mousedown", function(e) {
+			callback(e);
+			document.addEventListener("mousemove", callback);
+		});
+
+		document.addEventListener("mouseup", function(e) {
+			document.removeEventListener("mousemove", callback);
+		});
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	}
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-slider-btn-set');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			setButtonComponent(elem[i]);
+
+		elem = document.querySelectorAll('.ui-slider-input');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			setInputComponent(elem[i]);
+
+		elem = document.querySelectorAll('.ui-slider');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new Slider(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	}
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	}
+
+	var setValue = function setValue(topic, value) {
+		try {
+			buttons[topic].checkbox.checked = value;
+			notify.call(buttons[topic]);
+		}
+		catch(error) {
+			console.log(error, topic, value);
+		}
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new CheckBox(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+
+window.addEventListener("load", function(){
+	BoxShadow.init();
+});
+
+var BoxShadow = (function BoxShadow() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	/**
+	 * RGBA Color class
+	 */
+
+	function Color() {
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log("Typeof instance not Color");
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+	}
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (red != undefined)
+			this.r = red | 0;
+		if (green != undefined)
+			this.g = green | 0;
+		if (blue != undefined)
+			this.b = blue | 0;
+		if (alpha != undefined)
+			this.a = alpha | 0;
+	}
+
+	/**
+	 * HSV/HSB (hue, saturation, value / brightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 */
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.updateRGB();
+	}
+
+	Color.prototype.updateRGB = function updateRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision;
+		X = (X + m) * precision;
+		m = m * precision;
+
+		if (H &gt;= 0 &amp;&amp; H &lt; 1) {	this.setRGBA(C, X, m);	return; }
+		if (H &gt;= 1 &amp;&amp; H &lt; 2) {	this.setRGBA(X, C, m);	return; }
+		if (H &gt;= 2 &amp;&amp; H &lt; 3) {	this.setRGBA(m, C, X);	return; }
+		if (H &gt;= 3 &amp;&amp; H &lt; 4) {	this.setRGBA(m, X, C);	return; }
+		if (H &gt;= 4 &amp;&amp; H &lt; 5) {	this.setRGBA(X, m, C);	return; }
+		if (H &gt;= 5 &amp;&amp; H &lt; 6) {	this.setRGBA(C, m, X);	return; }
+	}
+
+	Color.prototype.updateHSV = function updateHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue &lt; 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	}
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value)
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,"$1$1$2$2$3$3");
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+	}
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r &lt; 16) r = '0' + r;
+		if (this.g &lt; 16) g = '0' + g;
+		if (this.b &lt; 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	}
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = "(" + this.r + ", " + this.g + ", " + this.b;
+		var a = '';
+		var v = '';
+		if (this.a !== 1) {
+			a = 'a';
+			v = ', ' + this.a;
+		}
+
+		var value = "rgb" + a + rgb + v + ")";
+		return value;
+	}
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	}
+
+	/**
+	 * Shadow Object
+	 */
+	function Shadow() {
+		this.inset  = false;
+		this.posX   = 5;
+		this.posY   = -5;
+		this.blur   = 5;
+		this.spread = 0;
+		this.color  = new Color();
+
+		var hue			= (Math.random() * 360) | 0;
+		var saturation	= (Math.random() * 75) | 0;
+		var value 		= (Math.random() * 50 + 50) | 0;
+		this.color.setHSV(hue, saturation, value, 1);
+	}
+
+	Shadow.prototype.computeCSS = function computeCSS() {
+		var value = "";
+		if (this.inset === true)
+			value += "inset ";
+		value += this.posX + "px ";
+		value += this.posY + "px ";
+		value += this.blur + "px ";
+		value += this.spread + "px ";
+		value += this.color.getColor();
+
+		return value;
+	}
+
+	Shadow.prototype.toggleInset = function toggleInset(value) {
+		if (value !== undefined || typeof value === "boolean")
+			this.inset = value;
+		else
+			this.inset = this.inset === true ? false : true;
+	}
+
+	Shadow.prototype.copy = function copy(obj) {
+		if(obj instanceof Shadow !== true) {
+			console.log("Typeof instance not Shadow");
+			return;
+		}
+
+		this.inset  = obj.inset;
+		this.posX   = obj.posX;
+		this.posY   = obj.posY;
+		this.blur   = obj.blur;
+		this.spread = obj.spread;
+		this.color.copy(obj.color);
+	}
+
+	/**
+	 * Color Picker
+	 */
+	var ColoPicker = (function ColoPicker() {
+
+		var colorpicker;
+		var hue_area;
+		var gradient_area;
+		var alpha_area;
+		var gradient_picker;
+		var hue_selector;
+		var alpha_selector;
+		var pick_object;
+		var info_rgb;
+		var info_hsv;
+		var info_hexa;
+		var output_color;
+		var color = new Color();
+		var subscribers = [];
+
+		var updateColor = function updateColor(e) {
+			var x = e.pageX - gradient_area.offsetLeft;
+			var y = e.pageY - gradient_area.offsetTop;
+
+			// width and height should be the same
+			var size = gradient_area.clientWidth;
+
+			if (x &gt; size)
+				x = size;
+			if (y &gt; size)
+				y = size;
+
+			if (x &lt; 0) x = 0;
+			if (y &lt; 0) y = 0;
+
+			var value = 100 - (y * 100 / size) | 0;
+			var saturation = x * 100 / size | 0;
+
+			color.setHSV(color.hue, saturation, value);
+			// should update just
+			// color pointer location
+			updateUI();
+			notify("color", color);
+		}
+
+		var updateHue = function updateHue(e) {
+			var x = e.pageX - hue_area.offsetLeft;
+			var width = hue_area.clientWidth;
+
+			if (x &lt; 0) x = 0;
+			if (x &gt; width) x = width;
+
+			var hue = ((360 * x) / width) | 0;
+			if (hue === 360) hue = 359;
+
+			color.setHSV(hue, color.saturation, color.value);
+
+			// should update just
+			// hue pointer location
+			// picker area background
+			// alpha area background
+			updateUI();
+			notify("color", color);
+		}
+
+		var updateAlpha = function updateAlpha(e) {
+			var x = e.pageX - alpha_area.offsetLeft;
+			var width = alpha_area.clientWidth;
+
+			if (x &lt; 0) x = 0;
+			if (x &gt; width) x = width;
+
+			color.a = (x / width).toFixed(2);
+
+			// should update just
+			// alpha pointer location
+			updateUI();
+			notify("color", color);
+		}
+
+		var setHueGfx = function setHueGfx(hue) {
+			var sat = color.saturation;
+			var val = color.value;
+			var alpha = color.a;
+
+			color.setHSV(hue, 100, 100);
+			gradient_area.style.backgroundColor = color.getHexa();
+
+			color.a = 0;
+			var start = color.getRGBA();
+			color.a = 1;
+			var end = color.getRGBA();
+			color.a = alpha;
+
+			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
+			alpha_area.style.background = gradient;
+		}
+
+		var updateUI = function updateUI() {
+			var x, y;		// coordinates
+			var size;		// size of the area
+			var offset;		// pointer graphic selector offset
+
+			// Set color pointer location
+			size = gradient_area.clientWidth;
+			offset = gradient_picker.clientWidth / 2 + 2;
+
+			x = (color.saturation * size / 100) | 0;
+			y = size - (color.value * size / 100) | 0;
+
+			gradient_picker.style.left = x - offset + "px";
+			gradient_picker.style.top = y - offset + "px";
+
+			// Set hue pointer location
+			size = hue_area.clientWidth;
+			offset = hue_selector.clientWidth/2;
+			x = (color.hue * size / 360 ) | 0;
+			hue_selector.style.left = x - offset + "px";
+
+			// Set alpha pointer location
+			size = alpha_area.clientWidth;
+			offset = alpha_selector.clientWidth/2;
+			x = (color.a * size) | 0;
+			alpha_selector.style.left = x - offset + "px";
+
+			// Set picker area background
+			var nc = new Color();
+			nc.copy(color);
+			if (nc.hue === 360) nc.hue = 0;
+			nc.setHSV(nc.hue, 100, 100);
+			gradient_area.style.backgroundColor = nc.getHexa();
+
+			// Set alpha area background
+			nc.copy(color);
+			nc.a = 0;
+			var start = nc.getRGBA();
+			nc.a = 1;
+			var end = nc.getRGBA();
+			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
+			alpha_area.style.background = gradient;
+
+			// Update color info
+			notify("color", color);
+			notify("hue", color.hue);
+			notify("saturation", color.saturation);
+			notify("value", color.value);
+			notify("r", color.r);
+			notify("g", color.g);
+			notify("b", color.b);
+			notify("a", color.a);
+			notify("hexa", color.getHexa());
+			output_color.style.backgroundColor = color.getRGBA();
+		}
+
+		var setInputComponent = function setInputComponent(node) {
+			var topic = node.getAttribute('data-topic');
+			var title = node.getAttribute('data-title');
+			var action = node.getAttribute('data-action');
+			title = title === null ? '' : title;
+
+			var input = document.createElement('input');
+			var info = document.createElement('span');
+			info.textContent = title;
+
+			input.setAttribute('type', 'text');
+			input.setAttribute('data-action', 'set-' + action + '-' + topic);
+			node.appendChild(info);
+			node.appendChild(input);
+
+			input.addEventListener('click', function(e) {
+				this.select();
+			});
+
+			input.addEventListener('change', function(e) {
+				if (action === 'HSV')
+					inputChangeHSV(topic);
+				if (action === 'RGB')
+					inputChangeRGB(topic);
+				if (action === 'alpha')
+					inputChangeAlpha(topic);
+				if (action === 'hexa')
+					inputChangeHexa(topic);
+			});
+
+			subscribe(topic, function(value) {
+				node.children[1].value = value;
+			});
+		}
+
+		var inputChangeHSV = function actionHSV(topic) {
+			var selector = "[data-action='set-HSV-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseInt(node.value);
+
+			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+				value &gt;= 0 &amp;&amp; value &lt; 360)
+				color[topic] = value;
+
+			color.updateRGB();
+			updateUI();
+		}
+
+		var inputChangeRGB = function inputChangeRGB(topic) {
+			var selector = "[data-action='set-RGB-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseInt(node.value);
+
+			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+				value &gt;= 0 &amp;&amp; value &lt;= 255)
+				color[topic] = value;
+
+			color.updateHSV();
+			updateUI();
+		}
+
+		var inputChangeAlpha = function inputChangeAlpha(topic) {
+			var selector = "[data-action='set-alpha-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseFloat(node.value);
+
+			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+				value &gt;= 0 &amp;&amp; value &lt;= 1)
+				color.a = value.toFixed(2);
+
+			updateUI();
+		}
+
+		var inputChangeHexa = function inputChangeHexa(topic) {
+			var selector = "[data-action='set-hexa-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = node.value;
+			color.setHexa(value);
+			color.updateHSV();
+			updateUI();
+		}
+
+		var setMouseTracking = function setMouseTracking(elem, callback) {
+
+			elem.addEventListener("mousedown", function(e) {
+				callback(e);
+				document.addEventListener("mousemove", callback);
+			});
+
+			document.addEventListener("mouseup", function(e) {
+				document.removeEventListener("mousemove", callback);
+			});
+		}
+
+		/*
+		 * Observer
+		 */
+		var setColor = function setColor(obj) {
+			if(obj instanceof Color !== true) {
+				console.log("Typeof instance not Color");
+				return;
+			}
+			color.copy(obj);
+			updateUI();
+		}
+
+		var subscribe = function subscribe(topic, callback) {
+			if (subscribers[topic] === undefined)
+				subscribers[topic] = [];
+
+			subscribers[topic].push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(topic, value) {
+			for (var i in subscribers[topic])
+				subscribers[topic][i](value);
+		}
+
+		var init = function init() {
+			colorpicker		= getElemById("colorpicker");
+			hue_area		= getElemById("hue");
+			gradient_area	= getElemById("gradient");
+			alpha_area		= getElemById("alpha");
+			gradient_picker	= getElemById("gradient_picker");
+			hue_selector	= getElemById("hue_selector");
+			alpha_selector	= getElemById("alpha_selector");
+			output_color	= getElemById("output_color");
+
+			var elem = document.querySelectorAll('#colorpicker .input');
+			var size = elem.length;
+			for (var i = 0; i &lt; size; i++)
+				setInputComponent(elem[i]);
+
+			setMouseTracking(gradient_area, updateColor);
+			setMouseTracking(hue_area, updateHue);
+			setMouseTracking(alpha_area, updateAlpha);
+
+		}
+
+		return {
+			init : init,
+			setColor : setColor,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	/**
+	 * Shadow dragging
+	 */
+	var PreviewMouseTracking = (function Drag() {
+		var active = false;
+		var lastX = 0;
+		var lastY = 0;
+		var subscribers = [];
+
+		var init = function init(id) {
+			var elem = getElemById(id);
+			elem.addEventListener('mousedown', dragStart, false);
+			document.addEventListener('mouseup', dragEnd, false);
+		}
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			active = true;
+			lastX = e.clientX;
+			lastY = e.clientY;
+			document.addEventListener('mousemove', mouseDrag, false);
+		}
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			if (active === true) {
+				active = false;
+				document.removeEventListener('mousemove', mouseDrag, false);
+			}
+		}
+
+		var mouseDrag = function mouseDrag(e) {
+			notify(e.clientX - lastX, e.clientY - lastY);
+			lastX = e.clientX;
+			lastY = e.clientY;
+		}
+
+		var subscribe = function subscribe(callback) {
+			subscribers.push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			var index = subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(deltaX, deltaY) {
+			for (var i in subscribers)
+				subscribers[i](deltaX, deltaY);
+		}
+
+		return {
+			init : init,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	/*
+	 * Element Class
+	 */
+	var CssClass = function CssClass(id) {
+		this.left = 0;
+		this.top = 0;
+		this.rotate = 0;
+		this.width = 300;
+		this.height = 100;
+		this.display = true;
+		this.border = true;
+		this.zIndex = -1;
+		this.bgcolor = new Color();
+		this.id = id;
+		this.node = getElemById('obj-' + id);
+		this.object = getElemById(id);
+		this.shadowID = null;
+		this.shadows = []
+		this.render = [];
+		this.init();
+	}
+
+	CssClass.prototype.init = function init() {
+		this.left = ((this.node.parentNode.clientWidth - this.node.clientWidth) / 2) | 0;
+		this.top = ((this.node.parentNode.clientHeight - this.node.clientHeight) / 2) | 0;
+
+		this.setTop(this.top);
+		this.setLeft(this.left);
+		this.setHeight(this.height);
+		this.setWidth(this.width);
+		this.bgcolor.setHSV(0, 0, 100);
+		this.updateBgColor(this.bgcolor);
+	}
+
+	CssClass.prototype.updatePos = function updatePos(deltaX, deltaY) {
+		this.left += deltaX;
+		this.top += deltaY;
+		this.node.style.top = this.top + "px";
+		this.node.style.left = this.left + "px";
+		SliderManager.setValue("left", this.left);
+		SliderManager.setValue("top", this.top);
+	}
+
+	CssClass.prototype.setLeft = function setLeft(value) {
+		this.left = value;
+		this.node.style.left = this.left + "px";
+		OutputManager.updateProperty(this.id, 'left', this.left + 'px');
+	}
+
+	CssClass.prototype.setTop = function setTop(value) {
+		this.top = value;
+		this.node.style.top = this.top + 'px';
+		OutputManager.updateProperty(this.id, 'top', this.top + 'px');
+	}
+
+	CssClass.prototype.setWidth = function setWidth(value) {
+		this.width = value;
+		this.node.style.width = this.width + 'px';
+		OutputManager.updateProperty(this.id, 'width', this.width + 'px');
+	}
+
+	CssClass.prototype.setHeight = function setHeight(value) {
+		this.height = value;
+		this.node.style.height = this.height + 'px';
+		OutputManager.updateProperty(this.id, 'height', this.height + 'px');
+	}
+
+	// Browser support
+	CssClass.prototype.setRotate = function setRotate(value) {
+		var cssvalue = 'rotate(' + value +'deg)';
+
+		this.node.style.transform = cssvalue;
+		this.node.style.webkitTransform = cssvalue;
+		this.node.style.msTransform = cssvalue;
+
+		if (value !== 0) {
+			if (this.rotate === 0) {
+				OutputManager.toggleProperty(this.id, 'transform', true);
+				OutputManager.toggleProperty(this.id, '-webkit-transform', true);
+				OutputManager.toggleProperty(this.id, '-ms-transform', true);
+			}
+		}
+		else {
+			OutputManager.toggleProperty(this.id, 'transform', false);
+			OutputManager.toggleProperty(this.id, '-webkit-transform', false);
+			OutputManager.toggleProperty(this.id, '-ms-transform', false);
+		}
+
+		OutputManager.updateProperty(this.id, 'transform', cssvalue);
+		OutputManager.updateProperty(this.id, '-webkit-transform', cssvalue);
+		OutputManager.updateProperty(this.id, '-ms-transform', cssvalue);
+		this.rotate = value;
+	}
+
+	CssClass.prototype.setzIndex = function setzIndex(value) {
+		this.node.style.zIndex = value;
+		OutputManager.updateProperty(this.id, 'z-index', value);
+		this.zIndex = value;
+	}
+
+	CssClass.prototype.toggleDisplay = function toggleDisplay(value) {
+		if (typeof value !== "boolean" || this.display === value)
+			return;
+
+		this.display = value;
+		var display = this.display === true ? "block" : "none";
+		this.node.style.display = display;
+		this.object.style.display = display;
+	}
+
+	CssClass.prototype.toggleBorder = function toggleBorder(value) {
+		if (typeof value !== "boolean" || this.border === value)
+			return;
+
+		this.border = value;
+		var border = this.border === true ? "1px solid #CCC" : "none";
+		this.node.style.border = border;
+	}
+
+	CssClass.prototype.updateBgColor = function updateBgColor(color) {
+		this.bgcolor.copy(color);
+		this.node.style.backgroundColor = color.getColor();
+		OutputManager.updateProperty(this.id, 'background-color', color.getColor());
+	}
+
+	CssClass.prototype.updateShadows = function updateShadows() {
+		if (this.render.length === 0)
+			OutputManager.toggleProperty(this.id, 'box-shadow', false);
+		if (this.render.length === 1)
+			OutputManager.toggleProperty(this.id, 'box-shadow', true);
+
+		this.node.style.boxShadow = this.render.join(", ");
+		OutputManager.updateProperty(this.id, 'box-shadow', this.render.join(", \n"));
+
+	}
+
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+
+		var preview;
+		var classes = [];
+		var active = null;
+		var animate = false;
+
+		/*
+		 * Toll actions
+		 */
+		var addCssClass = function addCssClass(id) {
+			classes[id] = new CssClass(id);
+		}
+
+		var setActiveClass = function setActiveClass(id) {
+			active = classes[id];
+			active.shadowID = null;
+			ColoPicker.setColor(classes[id].bgcolor);
+			SliderManager.setValue("top", active.top);
+			SliderManager.setValue("left", active.left);
+			SliderManager.setValue("rotate", active.rotate);
+			SliderManager.setValue("z-index", active.zIndex);
+			SliderManager.setValue("width", active.width);
+			SliderManager.setValue("height", active.height);
+			ButtonManager.setValue("border-state", active.border);
+			active.updateShadows();
+		}
+
+		var disableClass = function disableClass(topic) {
+			classes[topic].toggleDisplay(false);
+			ButtonManager.setValue(topic, false);
+		}
+
+		var addShadow = function addShadow(position) {
+			if (animate === true)
+				return -1;
+
+			active.shadows.splice(position, 0, new Shadow());
+			active.render.splice(position, 0, null);
+		}
+
+		var swapShadow = function swapShadow(id1, id2) {
+			var x = active.shadows[id1];
+			active.shadows[id1] = active.shadows[id2];
+			active.shadows[id2] = x;
+			updateShadowCSS(id1);
+			updateShadowCSS(id2);
+		}
+
+		var deleteShadow = function deleteShadow(position) {
+			active.shadows.splice(position, 1);
+			active.render.splice(position, 1);
+			active.updateShadows();
+		}
+
+		var setActiveShadow = function setActiveShadow(id, glow) {
+			active.shadowID = id;
+			ColoPicker.setColor(active.shadows[id].color);
+			ButtonManager.setValue("inset", active.shadows[id].inset);
+			SliderManager.setValue("blur", active.shadows[id].blur);
+			SliderManager.setValue("spread", active.shadows[id].spread);
+			SliderManager.setValue("posX", active.shadows[id].posX);
+			SliderManager.setValue("posY", active.shadows[id].posY);
+			if (glow === true)
+				addGlowEffect(id);
+		}
+
+		var addGlowEffect = function addGlowEffect(id) {
+			if (animate === true)
+				return;
+
+			animate = true;
+			var store = new Shadow();
+			var shadow = active.shadows[id];
+
+			store.copy(shadow);
+			shadow.color.setRGBA(40, 125, 200, 1);
+			shadow.blur = 10;
+			shadow.spread = 10;
+
+			active.node.style.transition = "box-shadow 0.2s";
+			updateShadowCSS(id);
+
+			setTimeout(function() {
+				shadow.copy(store);
+				updateShadowCSS(id);
+				setTimeout(function() {
+					active.node.style.removeProperty("transition");
+					animate = false;
+				}, 100);
+			}, 200);
+		}
+
+		var updateActivePos = function updateActivePos(deltaX, deltaY) {
+			if (active.shadowID === null)
+				active.updatePos(deltaX, deltaY);
+			else
+				updateShadowPos(deltaX, deltaY);
+		}
+
+		/*
+		 * Shadow properties
+		 */
+		var updateShadowCSS = function updateShadowCSS(id) {
+			active.render[id] = active.shadows[id].computeCSS();
+			active.updateShadows();
+		}
+
+		var toggleShadowInset = function toggleShadowInset(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].toggleInset(value);
+			updateShadowCSS(active.shadowID);
+		}
+
+		var updateShadowPos = function updateShadowPos(deltaX, deltaY) {
+			var shadow = active.shadows[active.shadowID];
+			shadow.posX += deltaX;
+			shadow.posY += deltaY;
+			SliderManager.setValue("posX", shadow.posX);
+			SliderManager.setValue("posY", shadow.posY);
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowPosX = function setShadowPosX(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].posX = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowPosY = function setShadowPosY(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].posY = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowBlur = function setShadowBlur(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].blur = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowSpread = function setShadowSpread(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].spread = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var updateShadowColor = function updateShadowColor(color) {
+			active.shadows[active.shadowID].color.copy(color);
+			updateShadowCSS(active.shadowID);
+		}
+
+		/*
+		 * Element Properties
+		 */
+		var updateColor = function updateColor(color) {
+			if (active.shadowID === null)
+				active.updateBgColor(color);
+			else
+				updateShadowColor(color);
+		}
+
+		var init = function init() {
+			preview = getElemById("preview");
+
+			ColoPicker.subscribe("color", updateColor);
+			PreviewMouseTracking.subscribe(updateActivePos);
+
+			// Affects shadows
+			ButtonManager.subscribe("inset", toggleShadowInset);
+			SliderManager.subscribe("posX", setShadowPosX);
+			SliderManager.subscribe("posY", setShadowPosY);
+			SliderManager.subscribe("blur", setShadowBlur);
+			SliderManager.subscribe("spread", setShadowSpread);
+
+			// Affects element
+			SliderManager.subscribe("top", function(value){
+				active.setTop(value);
+			});
+			SliderManager.subscribe("left", function(value){
+				active.setLeft(value);
+			});
+			SliderManager.subscribe("rotate", function(value) {
+				if (active == classes["element"])
+					return;
+				active.setRotate(value);
+			});
+
+			SliderManager.subscribe("z-index", function(value) {
+				if (active == classes["element"])
+					return;
+				active.setzIndex(value);
+			});
+
+			SliderManager.subscribe("width", function(value) {
+				active.setWidth(value)
+			});
+
+			SliderManager.subscribe("height", function(value) {
+				active.setHeight(value)
+			});
+
+			// Actions
+			classes['before'].top = -30;
+			classes['before'].left = -30;
+			classes['after'].top = 30;
+			classes['after'].left = 30;
+			classes['before'].toggleDisplay(false);
+			classes['after'].toggleDisplay(false);
+			ButtonManager.setValue('before', false);
+			ButtonManager.setValue('after', false);
+
+			ButtonManager.subscribe("before", classes['before'].toggleDisplay.bind(classes['before']));
+			ButtonManager.subscribe("after", classes['after'].toggleDisplay.bind(classes['after']));
+
+			ButtonManager.subscribe("border-state", function(value) {
+				active.toggleBorder(value);
+			});
+
+		}
+
+		return {
+			init 			: init,
+			addShadow		: addShadow,
+			swapShadow		: swapShadow,
+			addCssClass		: addCssClass,
+			disableClass	: disableClass,
+			deleteShadow	: deleteShadow,
+			setActiveClass	: setActiveClass,
+			setActiveShadow : setActiveShadow
+		}
+
+	})();
+
+	/**
+	 * Layer Manager
+	 */
+	var LayerManager = (function LayerManager() {
+		var stacks = [];
+		var active = {
+			node : null,
+			stack : null
+		}
+		var elements = {};
+
+		var mouseEvents = function mouseEvents(e) {
+			var node = e.target;
+			var type = node.getAttribute('data-type');
+
+			if (type === 'subject')
+				setActiveStack(stacks[node.id]);
+
+			if (type === 'disable') {
+				Tool.disableClass(node.parentNode.id);
+				setActiveStack(stacks['element']);
+			}
+
+			if (type === 'add')
+				active.stack.addLayer();
+
+			if (type === 'layer')
+				active.stack.setActiveLayer(node);
+
+			if (type === 'delete')
+				active.stack.deleteLayer(node.parentNode);
+
+			if (type === 'move-up')
+				active.stack.moveLayer(1);
+
+			if (type === 'move-down')
+				active.stack.moveLayer(-1);
+		}
+
+		var setActiveStack = function setActiveStack(stackObj) {
+			active.stack.hide();
+			active.stack = stackObj;
+			active.stack.show();
+		}
+
+		/*
+		 * Stack object
+		 */
+		var Stack = function Stack(subject) {
+			var S = document.createElement('div');
+			var title = document.createElement('div');
+			var stack = document.createElement('div');
+
+			S.className = 'container';
+			stack.className = 'stack';
+			title.className = 'title';
+			title.textContent = subject.getAttribute('data-title');
+			S.appendChild(title);
+			S.appendChild(stack);
+
+			this.id = subject.id;
+			this.container = S;
+			this.stack = stack;
+			this.subject = subject;
+			this.order = [];
+			this.uid = 0;
+			this.count = 0;
+			this.layer = null;
+			this.layerID = 0;
+		}
+
+		Stack.prototype.addLayer = function addLayer() {
+			if (Tool.addShadow(this.layerID) == -1)
+				return;
+
+			var uid = this.getUID();
+			var layer = this.createLayer(uid);
+
+			if (this.layer === null &amp;&amp; this.stack.children.length &gt;= 1)
+				this.layer = this.stack.children[0];
+
+			this.stack.insertBefore(layer, this.layer);
+			this.order.splice(this.layerID, 0, uid);
+			this.count++;
+			this.setActiveLayer(layer);
+		}
+
+		Stack.prototype.createLayer = function createLayer(uid) {
+			var layer = document.createElement('div');
+			var del = document.createElement('span');
+
+			layer.className = 'node';
+			layer.setAttribute('data-shid', uid);
+			layer.setAttribute('data-type', 'layer');
+			layer.textContent = 'shadow ' + uid;
+
+			del.className = 'delete';
+			del.setAttribute('data-type', 'delete');
+
+			layer.appendChild(del);
+			return layer;
+		}
+
+		Stack.prototype.getUID = function getUID() {
+			return this.uid++;
+		}
+
+		// SOLVE IE BUG
+		Stack.prototype.moveLayer = function moveLayer(direction) {
+			if (this.count &lt;= 1 || this.layer === null)
+				return;
+			if (direction === -1 &amp;&amp; this.layerID === (this.count - 1) )
+				return;
+			if (direction === 1 &amp;&amp; this.layerID === 0 )
+				return;
+
+			if (direction === -1) {
+				var before = null;
+				Tool.swapShadow(this.layerID, this.layerID + 1);
+				this.swapOrder(this.layerID, this.layerID + 1);
+				this.layerID += 1;
+
+				if (this.layerID + 1 !== this.count)
+					before = this.stack.children[this.layerID + 1];
+
+				this.stack.insertBefore(this.layer, before);
+				Tool.setActiveShadow(this.layerID, false);
+			}
+
+			if (direction === 1) {
+				Tool.swapShadow(this.layerID, this.layerID - 1);
+				this.swapOrder(this.layerID, this.layerID - 1);
+				this.layerID -= 1;
+				this.stack.insertBefore(this.layer, this.stack.children[this.layerID]);
+				Tool.setActiveShadow(this.layerID, false);
+			}
+		}
+
+		Stack.prototype.swapOrder = function swapOrder(pos1, pos2) {
+			var x = this.order[pos1];
+			this.order[pos1] = this.order[pos2];
+			this.order[pos2] = x;
+		}
+
+		Stack.prototype.deleteLayer = function deleteLayer(node) {
+			var shadowID =  node.getAttribute('data-shid') | 0;
+			var index = this.order.indexOf(shadowID);
+			this.stack.removeChild(this.stack.children[index]);
+			this.order.splice(index, 1);
+			this.count--;
+
+			Tool.deleteShadow(index);
+
+			if (index &gt; this.layerID)
+				return;
+
+			if (index == this.layerID) {
+				if (this.count &gt;= 1) {
+					this.layerID = 0;
+					this.setActiveLayer(this.stack.children[0], true);
+				}
+				else {
+					this.layer = null;
+					this.show();
+				}
+			}
+
+			if (index &lt; this.layerID) {
+				this.layerID--;
+				Tool.setActiveShadow(this.layerID, true);
+			}
+
+		}
+
+		Stack.prototype.setActiveLayer = function setActiveLayer(node) {
+			elements.shadow_properties.style.display = 'block';
+			elements.element_properties.style.display = 'none';
+
+			if (this.layer)
+				this.layer.removeAttribute('data-active');
+
+			this.layer = node;
+			this.layer.setAttribute('data-active', 'layer');
+
+			var shadowID =  node.getAttribute('data-shid') | 0;
+			this.layerID = this.order.indexOf(shadowID);
+			Tool.setActiveShadow(this.layerID, true);
+		}
+
+		Stack.prototype.unsetActiveLayer = function unsetActiveLayer() {
+			if (this.layer)
+				this.layer.removeAttribute('data-active');
+
+			this.layer = null;
+			this.layerID = 0;
+		}
+
+		Stack.prototype.hide = function hide() {
+			this.unsetActiveLayer();
+			this.subject.removeAttribute('data-active');
+			var style = this.container.style;
+			style.left = '100%';
+			style.zIndex = '0';
+		}
+
+		Stack.prototype.show = function show() {
+			elements.shadow_properties.style.display = 'none';
+			elements.element_properties.style.display = 'block';
+
+			if (this.id === 'element') {
+				elements.zIndex.style.display = 'none';
+				elements.transform_rotate.style.display = 'none';
+			}
+			else {
+				elements.zIndex.style.display = 'block';
+				elements.transform_rotate.style.display = 'block';
+			}
+
+			this.subject.setAttribute('data-active', 'subject');
+			var style = this.container.style;
+			style.left = '0';
+			style.zIndex = '10';
+			Tool.setActiveClass(this.id);
+		}
+
+		function init() {
+
+			var elem, size;
+			var layerManager = getElemById("layer_manager");
+			var layerMenu = getElemById("layer_menu");
+			var container = getElemById("stack_container");
+
+			elements.shadow_properties = getElemById('shadow_properties');
+			elements.element_properties = getElemById('element_properties');
+			elements.transform_rotate = getElemById('transform_rotate');
+			elements.zIndex = getElemById('z-index');
+
+			elem = document.querySelectorAll('#layer_menu [data-type="subject"]');
+			size = elem.length;
+
+			for (var i = 0; i &lt; size; i++) {
+				var S = new Stack(elem[i]);
+				stacks[elem[i].id] = S;
+				container.appendChild(S.container);
+				Tool.addCssClass(elem[i].id);
+			}
+
+			active.stack = stacks['element'];
+			stacks['element'].show();
+
+			layerManager.addEventListener("click", mouseEvents);
+			layerMenu.addEventListener("click", mouseEvents);
+
+			ButtonManager.subscribe("before", function(value) {
+				if (value === false &amp;&amp; active.stack === stacks['before'])
+					setActiveStack(stacks['element'])
+				if (value === true &amp;&amp; active.stack !== stacks['before'])
+					setActiveStack(stacks['before'])
+			});
+
+			ButtonManager.subscribe("after", function(value) {
+				if (value === false &amp;&amp; active.stack === stacks['after'])
+					setActiveStack(stacks['element'])
+				if (value === true &amp;&amp; active.stack !== stacks['after'])
+					setActiveStack(stacks['after'])
+			});
+		}
+
+		return {
+			init : init
+		}
+	})();
+
+	/*
+	 * OutputManager
+	 */
+	var OutputManager = (function OutputManager() {
+		var classes = [];
+		var buttons = [];
+		var active = null;
+		var menu = null;
+		var button_offset = 0;
+
+		var crateOutputNode = function(topic, property) {
+
+			var prop = document.createElement('div');
+			var name = document.createElement('span');
+			var value = document.createElement('span');
+
+			var pmatch = property.match(/(^([a-z0-9\-]*)=\[([a-z0-9\-\"]*)\])|^([a-z0-9\-]*)/i);
+
+			name.textContent = '\t' + pmatch[4];
+
+			if (pmatch[3] !== undefined) {
+				name.textContent = '\t' + pmatch[2];
+				value.textContent = pmatch[3] + ';';
+			}
+
+			name.textContent += ': ';
+			prop.className = 'css-property';
+			name.className = 'name';
+			value.className = 'value';
+			prop.appendChild(name);
+			prop.appendChild(value);
+
+			classes[topic].node.appendChild(prop);
+			classes[topic].line[property] = prop;
+			classes[topic].prop[property] = value;
+		}
+
+		var OutputClass = function OutputClass(node) {
+			var topic = node.getAttribute('data-topic');
+			var prop = node.getAttribute('data-prop');
+			var name = node.getAttribute('data-name');
+			var properties = prop.split(' ');
+
+			classes[topic] = {};
+			classes[topic].node = node;
+			classes[topic].prop = [];
+			classes[topic].line = [];
+			classes[topic].button = new Button(topic);
+
+			var open_decl = document.createElement('div');
+			var end_decl = document.createElement('div');
+
+			open_decl.textContent = name + ' {';
+			end_decl.textContent = '}';
+			node.appendChild(open_decl);
+
+			for (var i in properties)
+				crateOutputNode(topic, properties[i]);
+
+			node.appendChild(end_decl);
+		}
+
+		var Button = function Button(topic) {
+			var button = document.createElement('div');
+
+			button.className = 'button';
+			button.textContent = topic;
+			button.style.left = button_offset + 'px';
+			button_offset += 100;
+
+			button.addEventListener("click", function() {
+				toggleDisplay(topic);
+			})
+
+			menu.appendChild(button);
+			return button;
+		}
+
+		var toggleDisplay = function toggleDisplay(topic) {
+			active.button.removeAttribute('data-active');
+			active.node.style.display = 'none';
+			active = classes[topic];
+			active.node.style.display = 'block';
+			active.button.setAttribute('data-active', 'true');
+		}
+
+		var toggleButton = function toggleButton(topic, value) {
+			var display = (value === true) ? 'block' : 'none';
+			classes[topic].button.style.display = display;
+
+			if (value === true)
+				toggleDisplay(topic);
+			else
+				toggleDisplay('element');
+		}
+
+		var updateProperty = function updateProperty(topic, property, data) {
+			try {
+				classes[topic].prop[property].textContent = data + ';';
+			}
+			catch(error) {
+				// console.log("ERROR undefined : ", topic, property, data);
+			}
+		}
+
+		var toggleProperty = function toggleProperty(topic, property, value) {
+			var display = (value === true) ? 'block' : 'none';
+			try {
+				classes[topic].line[property].style.display = display;
+			}
+			catch(error) {
+				// console.log("ERROR undefined : ",classes, topic, property, value);
+			}
+		}
+
+		var init = function init() {
+
+			menu = getElemById('menu');
+
+			var elem = document.querySelectorAll('#output .output');
+			var size = elem.length;
+			for (var i = 0; i &lt; size; i++)
+				OutputClass(elem[i]);
+
+			active = classes['element'];
+			toggleDisplay('element');
+
+			ButtonManager.subscribe("before", function(value) {
+				toggleButton('before', value);
+			});
+
+			ButtonManager.subscribe("after", function(value) {
+				toggleButton('after', value);
+			});
+		}
+
+		return {
+			init : init,
+			updateProperty : updateProperty,
+			toggleProperty : toggleProperty
+		}
+
+	})();
+
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		ButtonManager.init();
+		OutputManager.init();
+		ColoPicker.init();
+		SliderManager.init();
+		LayerManager.init();
+		PreviewMouseTracking.init("preview");
+		Tool.init();
+	}
+
+	return {
+		init : init
+	}
+
+})();
+
+
+</code></pre>
+</div>
+
+<div>{{ EmbedLiveSample('box-shadow_generator', '100%', '1100px', '') }}</div>
+
+<p><strong>Related Tool: </strong><a href="https://cssgenerator.org/box-shadow-css-generator.html">Box Shadow CSS Generator</a></p>
diff --git a/files/de/web/css/css_boxmodell/einführung_in_das_css_boxmodell/index.html b/files/de/web/css/css_boxmodell/einführung_in_das_css_boxmodell/index.html
new file mode 100644
index 0000000000..1bf796b36b
--- /dev/null
+++ b/files/de/web/css/css_boxmodell/einführung_in_das_css_boxmodell/index.html
@@ -0,0 +1,52 @@
+---
+title: Boxmodell
+slug: Web/CSS/CSS_Boxmodell/Einführung_in_das_CSS_Boxmodell
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Eine Box hat in CSS vier Bereiche: <strong>margin edge</strong> (weiß außen), <strong>border edge</strong> (grau), <strong>padding edge</strong> (grün), und <strong>content edge</strong> (weiß mitte). Das Folgende Diagramm zeigt die unterschiedlichen Höhen und Breiten anhand der Eigenschaften, die Veränderungen an einer CSS Box zulassen:</p>
+
+<p><img alt="Thanks to Hannes Kraft." src="https://mdn.mozillademos.org/files/11243/%3DCSS_Boxmodell_changed.png" style="height: 501px; width: 687px;"></p>
+
+<p> </p>
+
+<h2 id="Details" name="Details">Details</h2>
+
+<ul>
+ <li>Die komplette Breite eines Elements berechnet sich wie folgt:
+  <dl>
+   <dd><code>margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right</code></dd>
+  </dl>
+ </li>
+ <li>Die komplette Höhe eines Elements berechnet sich wie folgt:
+  <dl>
+   <dd><code>margin-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + margin-bottom</code></dd>
+  </dl>
+ </li>
+ <li>Der MS Internet Explorer verwendet die <a href="/de/CSS/width" title="de/CSS/width">width</a>- und die <a href="/de/CSS/height" title="de/CSS/height">height</a>-Eigenschaft als Innenabstand des Rahmens, nicht des padding-Bereiches.
+  <dl>
+   <dd><code>width = padding-left + width + padding-right</code></dd>
+   <dd><code>height = padding-top + height + padding-bottom</code></dd>
+  </dl>
+ </li>
+</ul>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#box-dimensions">CSS 2.1 #Box model</a></li>
+</ul>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/CSS/width" title="de/CSS/width">width</a>, <a href="/de/CSS/height" title="de/CSS/height">height</a></li>
+ <li><a href="/de/CSS/padding" title="de/CSS/padding">padding</a>, <a href="/de/CSS/border" title="de/CSS/border">border</a>, <a href="/de/CSS/margin" title="de/CSS/margin">margin</a></li>
+ <li><a href="/De/CSS/position" title="De/CSS/position">position</a>, <a href="/De/CSS/Left" title="De/CSS/Left">left</a>, <a href="/De/CSS/Top" title="De/CSS/Top">top</a>, <a href="/De/CSS/Right" title="De/CSS/Right">right</a>, <a href="/De/CSS/Bottom" title="De/CSS/Bottom">bottom</a></li>
+</ul>
diff --git a/files/de/web/css/css_boxmodell/index.html b/files/de/web/css/css_boxmodell/index.html
new file mode 100644
index 0000000000..37440c9523
--- /dev/null
+++ b/files/de/web/css/css_boxmodell/index.html
@@ -0,0 +1,165 @@
+---
+title: CSS Boxmodell
+slug: Web/CSS/CSS_Boxmodell
+tags:
+  - CSS
+  - CSS Boxmodell
+  - CSS Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Box_Model
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Box Model</strong> ist ein CSS Modul, das die rechteckigen Boxen einschließlich deren Innen- und Außenabständen definiert, die für Elemente generiert werden und gemäß des visuellen Formatierungsmodells dargestellt werden.</p>
+
+<h2 id="Referenz">Referenz</h2>
+
+<h3 id="Eigenschaften">Eigenschaften</h3>
+
+<h4 id="Den_Inhaltsfluss_innerhalb_einer_Box_beeinflussende_Eigenschaften">Den Inhaltsfluss innerhalb einer Box beeinflussende Eigenschaften</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("box-decoration-break")}}</li>
+ <li>{{cssxref("box-sizing")}}</li>
+ <li>{{cssxref("overflow")}}</li>
+ <li>{{cssxref("overflow-x")}}</li>
+ <li>{{cssxref("overflow-y")}}</li>
+</ul>
+</div>
+
+<h4 id="Die_Größe_einer_Box_beeinflussende_Eigenschaften">Die Größe einer Box beeinflussende Eigenschaften</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("height")}}</li>
+ <li>{{cssxref("width")}}</li>
+ <li>{{cssxref("max-height")}}</li>
+ <li>{{cssxref("max-width")}}</li>
+ <li>{{cssxref("min-height")}}</li>
+ <li>{{cssxref("min-width")}}</li>
+</ul>
+</div>
+
+<h4 id="Außenabstände_einer_Box_beeinflussende_Eigenschaften">Außenabstände einer Box beeinflussende Eigenschaften</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("margin")}}</li>
+ <li>{{cssxref("margin-bottom")}}</li>
+ <li>{{cssxref("margin-left")}}</li>
+ <li>{{cssxref("margin-right")}}</li>
+ <li>{{cssxref("margin-top")}}</li>
+</ul>
+</div>
+
+<h4 id="Innenabstände_einer_Box_beeinflussende_Eigenschaften">Innenabstände einer Box beeinflussende Eigenschaften</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("padding")}}</li>
+ <li>{{cssxref("padding-bottom")}}</li>
+ <li>{{cssxref("padding-left")}}</li>
+ <li>{{cssxref("padding-right")}}</li>
+ <li>{{cssxref("padding-top")}}</li>
+</ul>
+</div>
+
+<h4 id="Andere_Eigenschaften">Andere Eigenschaften</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>{{cssxref("visibility")}}</li>
+</ul>
+</div>
+
+<h2 id="Anleitungen_und_Werkzeuge">Anleitungen und Werkzeuge</h2>
+
+<dl>
+ <dt><a href="/de/docs/Web/CSS/CSS_Boxmodell/Einführung_in_das_CSS_Boxmodell">Einführung in das CSS Boxmodell</a></dt>
+ <dd>Erklärt eines der grundlegenden Konzepte von CSS, das Boxmodell: Beschreibt die Bedeutung von Außen- und Innenabständen als auch der verschiedenen Bereiche einer Box.</dd>
+ <dt><a href="/de/docs/Web/CSS/CSS_Boxmodell/Zusammenfallen_von_Außenabständen_meistern">Zusammenfallen von Außenabständen meistern</a></dt>
+ <dd>In mehreren Fällen werden zwei anliegende Außenabstände zu einem zusammengelegt. Dieser Artikel beschreibt, wann dies passiert und wie es gesteuert werden kann.</dd>
+ <dt><a href="/de/docs/Web/CSS/CSS_Boxmodell/Box-shadow_generator">Box-shadow Generator</a></dt>
+ <dd>Ein interaktives Werkzeug, das es erlaubt, Schatten visuell zu erstellen und die benötigte Syntax für die {{cssxref("box-shadow")}} Eigenschaft zu generieren.</dd>
+</dl>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Box")}}</td>
+   <td>{{Spec2("CSS3 Box")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "box.html")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>3.0</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/de/web/css/css_boxmodell/zusammenfallen_von_außenabständen_meistern/index.html b/files/de/web/css/css_boxmodell/zusammenfallen_von_außenabständen_meistern/index.html
new file mode 100644
index 0000000000..edf1fa050c
--- /dev/null
+++ b/files/de/web/css/css_boxmodell/zusammenfallen_von_außenabständen_meistern/index.html
@@ -0,0 +1,60 @@
+---
+title: Zusammenfallen von Außenabständen meistern
+slug: Web/CSS/CSS_Boxmodell/Zusammenfallen_von_Außenabständen_meistern
+tags:
+  - CSS
+  - CSS Boxmodell
+  - Referenz
+translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/de/docs/Web/CSS/margin-top">Obere</a> und <a href="/de/docs/Web/CSS/margin-bottom">untere</a> Außenabstände von Blöcken werden manchmal zu einem einzelnen Außenabstand zusammengefasst (kollabiert), dessen Größe der größte der Außenabstände ist, die in ihm zusammengefasst werden, ein Verhalten bekannt als <strong>Außenabstandszusammenfassung</strong> (engl. margin collapsing).</p>
+
+<p>Außenabstandszusammenfassung tritt in drei grundlegenden Fällen auf:</p>
+
+<dl>
+ <dt>Angrenzende Geschwisterelemente</dt>
+ <dd>Die Außenabstände von angrenzenden Geschwisterelementen werden zusammengefasst (außer, wenn des nachfolgende Geschwisterelement nach Seitenumflüssen <a href="/en-US/docs/Web/CSS/clear">freigestellt</a> ist). Zum Beispiel:
+ <pre class="brush: html"> &lt;p&gt;Der untere Außenabstand dieses Absatzes fällt ...&lt;/p&gt;
+ &lt;p&gt;...mit dem oberen Außenabstand dieses Absatzes zusammen.&lt;/p&gt;
+</pre>
+ </dd>
+ <dt>Eltern- und erstes/letztes Kindelement</dt>
+ <dd>Falls es keinen Rahmen, Innenabstand, Inlineinhalt oder <em><a href="/en-US/docs/Web/CSS/clear">Freilegung</a></em> gibt, um den {{cssxref("margin-top")}} eines Blocks vom {{cssxref("margin-top")}} seines ersten Kindblocks zu trennen, oder keinen Rahmen, Innenabstand Inlineinhalt, {{cssxref("height")}}, {{cssxref("min-height")}} oder {{cssxref("max-height")}} gibt, um den {{cssxref("margin-bottom")}} des Blocks vom {{cssxref("margin-bottom")}} seines letzten Kindelements zu trennen, dann fallen diese Außenabstände zusammen. Der zusammengefallene Außenabstand verläuft dabei außerhalb des Elternelements.</dd>
+ <dt>Leere Blöcke</dt>
+ <dd>Falls es keinen Rahmen, Innenabstand, Inlineinhalt, {{cssxref("height")}} oder {{cssxref("min-height")}} gibt, um den {{cssxref("margin-top")}} des Blocks vom {{cssxref("margin-bottom")}} zu trennen, fallen sein oberer und unterer Außenabstand zusammen.</dd>
+</dl>
+
+<p>Kompliziertere Außenabstandszusammenfassung (von mehr als zwei Außenabständen) tritt auf, wenn diese Fälle kombiniert werden.</p>
+
+<p>Diese Regeln gelten sogar für Außenabstände, die null sind, sodass ein Außenabstand eines ersten/letzten Kinds sich (gemäß den oben genannten Regeln) am Ende außerhalb seines Elternelements befindet, unabhängig davon, ob der Außenabstand des Elternelements null ist oder nicht.</p>
+
+<p>Falls negative Außenabstände involviert sind, ist die Größe des zusammengefassten Außenabstands die Summe des größten positiven Abstands und dem kleinsten (meist negativen) negativen Abstands.</p>
+
+<p>Außenabstände von <a href="/en-US/docs/Web/CSS/float">umfließenden</a> und <a href="/en-US/docs/Web/CSS/position">absolut positionierten</a> Elementen werden niemals zusammengefasst.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/CSS/CSS_Referenz">CSS Referenz</a></li>
+</ul>
diff --git a/files/de/web/css/css_charsets/index.html b/files/de/web/css/css_charsets/index.html
new file mode 100644
index 0000000000..1b12d996a6
--- /dev/null
+++ b/files/de/web/css/css_charsets/index.html
@@ -0,0 +1,50 @@
+---
+title: CSS Charsets
+slug: Web/CSS/CSS_Charsets
+tags:
+  - CSS
+  - CSS Zeichensätze
+  - Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Charsets
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Charsets</strong> ist ein CSS Modul, das es erlaubt, den Zeichensatz zu bestimmen, der im Stylesheet verwendet wird.</p>
+
+<h2 id="Referenz">Referenz</h2>
+
+<h3 id="-Regeln">@-Regeln</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@charset")}}</li>
+</ul>
+</div>
+
+<h2 id="Anleitungen">Anleitungen</h2>
+
+<p><em>Keine.</em></p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'syndata.html#x57', '@charset')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.at-rules.charset")}}
diff --git a/files/de/web/css/css_colors/farbauswahl_werkzeug/index.html b/files/de/web/css/css_colors/farbauswahl_werkzeug/index.html
new file mode 100644
index 0000000000..3f822f9f73
--- /dev/null
+++ b/files/de/web/css/css_colors/farbauswahl_werkzeug/index.html
@@ -0,0 +1,3225 @@
+---
+title: Farbauswahl-Werkzeug
+slug: Web/CSS/CSS_Colors/farbauswahl_werkzeug
+tags:
+  - CSS
+  - Farbauswahl
+  - Farbe
+  - Hilfsmittel
+  - Pipette
+  - Werkzeug
+translation_of: Web/CSS/CSS_Colors/Color_picker_tool
+---
+<div style="display: none;">
+<h2 id="ColorPicker_Tool" name="ColorPicker_Tool">ColorPicker tool</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">    &lt;div id="container"&gt;
+        &lt;div id="palette" class="block"&gt;
+            &lt;div id="color-palette"&gt;&lt;/div&gt;
+            &lt;div id="color-info"&gt;
+                &lt;div class="title"&gt; CSS Color &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="picker" class="block"&gt;
+            &lt;div class="ui-color-picker" data-topic="picker" data-mode="HSL"&gt;&lt;/div&gt;
+            &lt;div id="picker-samples" sample-id="master"&gt;&lt;/div&gt;
+            &lt;div id="controls"&gt;
+                &lt;div id="delete"&gt;
+                    &lt;div id="trash-can"&gt;&lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div id="void-sample" class="icon"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="canvas" data-tutorial="drop"&gt;
+            &lt;div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index"
+                data-max="20" data-sensivity="10"&gt;&lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+
+</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">/*
+ * COLOR PICKER TOOL
+ */
+
+.ui-color-picker {
+	width: 420px;
+	margin: 0;
+	border: 1px solid #DDD;
+	background-color: #FFF;
+	display: table;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-color-picker .picking-area {
+	width: 198px;
+	height: 198px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: relative;
+	float: left;
+	display: table;
+}
+
+.ui-color-picker .picking-area:hover {
+	cursor: default;
+}
+
+/* HSV format - Hue-Saturation-Value(Brightness) */
+.ui-color-picker .picking-area {
+	background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center;
+
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+
+	background-color: #F00;
+}
+
+/* HSL format - Hue-Saturation-Lightness */
+.ui-color-picker[data-mode='HSL'] .picking-area {
+	background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background-color: #F00;
+}
+
+.ui-color-picker .picker {
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+	border: 1px solid #FFF;
+	position: absolute;
+	top: 45%;
+	left: 45%;
+}
+
+.ui-color-picker .picker:before {
+	width: 8px;
+	height: 8px;
+	content: "";
+	position: absolute;
+	border: 1px solid #999;
+	border-radius: 50%;
+}
+
+.ui-color-picker .hue,
+.ui-color-picker .alpha {
+	width: 198px;
+	height: 28px;
+	margin: 5px;
+	border: 1px solid #FFF;
+	float: left;
+}
+
+.ui-color-picker .hue {
+	background: url("https://mdn.mozillademos.org/files/5701/hue.png") center;
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+}
+
+.ui-color-picker .alpha {
+	border: 1px solid #CCC;
+	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+}
+
+.ui-color-picker .alpha-mask {
+	width: 100%;
+	height: 100%;
+	background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png");
+}
+
+.ui-color-picker .slider-picker {
+	width: 2px;
+	height: 100%;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+}
+
+/* input HSV and RGB */
+
+.ui-color-picker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+.ui-color-picker .info * {
+	float: left;
+}
+
+.ui-color-picker .input {
+	width: 64px;
+	margin: 5px 2px;
+	float: left;
+}
+
+.ui-color-picker .input .name {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+.ui-color-picker .input input {
+	width: 30px;
+	height: 18px;
+	margin: 0;
+	padding: 0;
+	border: 1px solid #DDD;
+	text-align: center;
+	float: right;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+.ui-color-picker .input[data-topic="lightness"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] {
+	display: block;
+}
+
+.ui-color-picker .input[data-topic="alpha"] {
+	margin-top: 10px;
+	width: 93px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] &gt; .name {
+	width: 60px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] &gt; input {
+	float: right;
+}
+
+.ui-color-picker .input[data-topic="hexa"] {
+	width: auto;
+	float: right;
+	margin: 6px 8px 0 0;
+}
+
+.ui-color-picker .input[data-topic="hexa"] &gt; .name {
+	display: none;
+}
+
+.ui-color-picker .input[data-topic="hexa"] &gt; input {
+	width: 90px;
+	height: 24px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/* Preview color */
+.ui-color-picker .preview {
+	width: 95px;
+	height: 53px;
+	margin: 5px;
+	margin-top: 10px;
+	border: 1px solid #DDD;
+	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+	float: left;
+	position: relative;
+}
+
+.ui-color-picker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	top: 0;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .preview-color {
+	width: 100%;
+	height: 100%;
+	background-color: rgba(255, 0, 0, 0.5);
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .switch_mode {
+	width: 10px;
+	height: 20px;
+	position: relative;
+	border-radius: 5px 0 0 5px;
+	border: 1px solid #DDD;
+	background-color: #EEE;
+	left: -12px;
+	top: -1px;
+	z-index: 1;
+	transition: all 0.5s;
+}
+
+.ui-color-picker .switch_mode:hover {
+	background-color: #CCC;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider &gt; input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * COLOR PICKER TOOL
+ */
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	box-shadow: 0 0 5px 0 #999;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+}
+
+/**
+ * Resize Handle
+ */
+.resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+[data-resize='both']:hover {
+	cursor: nw-resize !important;
+}
+
+[data-resize='width']:hover {
+	cursor: w-resize !important;
+}
+
+[data-resize='height']:hover {
+	cursor: n-resize !important;
+}
+
+[data-hidden='true'] {
+	display: none;
+}
+
+[data-collapsed='true'] {
+	height: 0 !important;
+}
+
+.block {
+	display: table;
+}
+
+
+/**
+ * 	Container
+ */
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	display: table;
+}
+
+/**
+ * 	Picker Zone
+ */
+
+#picker {
+	padding: 10px;
+	width: 980px;
+}
+
+.ui-color-picker {
+	padding: 3px 5px;
+	float: left;
+	border-color: #FFF;
+}
+
+.ui-color-picker .switch_mode {
+	display: none;
+}
+
+.ui-color-picker .preview-color:hover {
+	cursor: move;
+}
+
+/**
+ * Picker Container
+ */
+
+#picker-samples {
+	width: 375px;
+	height: 114px;
+	max-height: 218px;
+	margin: 0 10px 0 30px;
+	overflow: hidden;
+	position: relative;
+	float: left;
+
+	transition: all 0.2s;
+}
+
+#picker-samples .sample {
+	width: 40px;
+	height: 40px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: absolute;
+	float: left;
+	transition: all 0.2s;
+}
+
+#picker-samples .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#picker-samples .sample[data-active='true'] {
+	border-color: #999;
+}
+
+#picker-samples .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#picker-samples #add-icon {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	box-shadow: inset 0px 0px 2px 0px #DDD;
+}
+
+#picker-samples #add-icon:hover {
+	cursor: pointer;
+	border-color: #DDD;
+	box-shadow: inset 0px 0px 5px 0px #CCC;
+}
+
+#picker-samples #add-icon:before,
+#picker-samples #add-icon:after {
+	content: "";
+	position: absolute;
+	background-color: #EEE;
+	box-shadow: 0 0 1px 0 #EEE;
+}
+
+#picker-samples #add-icon:before {
+	width: 70%;
+	height: 16%;
+	top: 42%;
+	left: 15%;
+}
+
+#picker-samples #add-icon:after {
+	width: 16%;
+	height: 70%;
+	top: 15%;
+	left: 42%;
+}
+
+#picker-samples #add-icon:hover:before,
+#picker-samples #add-icon:hover:after {
+	background-color: #DDD;
+	box-shadow: 0 0 1px 0 #DDD;
+}
+
+/**
+ * 	Controls
+ */
+
+#controls {
+	width: 110px;
+	padding: 10px;
+	float: right;
+}
+
+#controls #picker-switch {
+	text-align: center;
+	float: left;
+}
+
+#controls .icon {
+	width: 48px;
+	height: 48px;
+	margin: 10px 0;
+	background-repeat: no-repeat;
+	background-position: center;
+	border: 1px solid #DDD;
+	display: table;
+	float: left;
+}
+
+#controls .icon:hover {
+	cursor: pointer;
+}
+
+#controls .picker-icon {
+	background-image: url('https://mdn.mozillademos.org/files/6081/picker.png');
+}
+
+#controls #void-sample {
+	margin-right: 10px;
+	background-image: url('https://mdn.mozillademos.org/files/6087/void.png');
+	background-position: center left;
+}
+
+#controls #void-sample[data-active='true'] {
+	border-color: #CCC;
+	background-position: center right;
+}
+
+#controls .switch {
+	width: 106px;
+	padding: 1px;
+	border: 1px solid #CCC;
+	font-size: 14px;
+	text-align: center;
+	line-height: 24px;
+	overflow: hidden;
+	float: left;
+}
+
+#controls .switch:hover {
+	cursor: pointer;
+}
+
+#controls .switch &gt; * {
+	width: 50%;
+	padding: 2px 0;
+	background-color: #EEE;
+	float: left;
+}
+
+#controls .switch [data-active='true'] {
+	color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-color: #777;
+}
+
+/**
+ * 	Trash Can
+ */
+
+#delete {
+	width: 100%;
+	height: 94px;
+	background-color: #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+
+	text-align: center;
+	color: #777;
+
+	position: relative;
+	float: right;
+}
+
+#delete #trash-can {
+	width: 80%;
+	height: 80%;
+	border: 2px dashed #FFF;
+	border-radius: 5px;
+	background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center;
+
+	position: absolute;
+	top: 10%;
+	left: 10%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	transition: all 0.2s;
+}
+
+#delete[drag-state='enter'] {
+	background-color: #999;
+}
+
+/**
+ * 	Color Theme
+ */
+
+#color-theme {
+	margin: 0 8px 0 0;
+	border: 1px solid #EEE;
+	display: inline-block;
+	float: right;
+}
+
+#color-theme .box {
+	width: 80px;
+	height: 92px;
+	float: left;
+}
+
+/**
+ * Color info box
+ */
+#color-info {
+	width: 360px;
+	float: left;
+}
+
+#color-info .title {
+	width: 100%;
+	padding: 15px;
+	font-size: 18px;
+	text-align: center;
+	background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png');
+	background-repeat:no-repeat;
+	background-position: center left 30%;
+}
+
+#color-info .copy-container {
+	position: absolute;
+	top: -100%;
+}
+
+#color-info .property {
+	min-width: 280px;
+	height: 30px;
+	margin: 10px 0;
+	text-align: center;
+	line-height: 30px;
+}
+
+#color-info .property &gt; * {
+	float: left;
+}
+
+#color-info .property .type {
+	width: 60px;
+	height: 100%;
+	padding: 0 16px 0 0;
+	text-align: right;
+}
+
+#color-info .property .value {
+	width: 200px;
+	height: 100%;
+	padding: 0 10px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 16px;
+	color: #777;
+	text-align: center;
+	background-color: #FFF;
+	border: none;
+}
+
+#color-info .property .value:hover {
+	color: #37994A;
+}
+
+#color-info .property .value:hover + .copy {
+	background-position: center right;
+}
+
+#color-info .property .copy {
+	width: 24px;
+	height: 100%;
+	padding: 0 5px;
+	background-color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6073/copy.png');
+	background-repeat: no-repeat;
+	background-position: center left;
+	border-left: 1px solid #EEE;
+	text-align: right;
+	float: left;
+}
+
+#color-info .property .copy:hover {
+	background-position: center right;
+}
+
+
+/**
+ * 	Color Palette
+ */
+
+#palette {
+	width: 1000px;
+	padding: 10px 0;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	background-color: #EEE;
+	color: #777;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#color-palette {
+	width: 640px;
+	font-family: Arial, Helvetica, sans-serif;
+	color: #777;
+	float: left;
+}
+
+#color-palette .container {
+	width: 100%;
+	height: 50px;
+	line-height: 50px;
+	overflow: hidden;
+	float: left;
+	transition: all 0.5s;
+}
+
+#color-palette .container &gt; * {
+	float: left;
+}
+
+#color-palette .title {
+	width: 100px;
+	padding: 0 10px;
+	text-align: right;
+	line-height: inherit;
+}
+
+#color-palette .palette {
+	width: 456px;
+	height: 38px;
+	margin: 3px;
+	padding: 3px;
+	display: table;
+	background-color: #FFF;
+}
+
+#color-palette .palette .sample {
+	width: 30px;
+	height: 30px;
+	margin: 3px;
+	position: relative;
+	border: 1px solid #DDD;
+	float: left;
+	transition: all 0.2s;
+}
+
+#color-palette .palette .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#color-palette .controls {
+}
+
+#color-palette .controls &gt; * {
+	float: left;
+}
+
+#color-palette .controls &gt; *:hover {
+	cursor: pointer;
+}
+
+#color-palette .controls .lock {
+	width: 24px;
+	height: 24px;
+	margin: 10px;
+	padding: 3px;
+	background-image: url('https://mdn.mozillademos.org/files/6077/lock.png');
+	background-repeat: no-repeat;
+	background-position: bottom right;
+}
+
+#color-palette .controls .lock:hover {
+	/*background-image: url('images/unlocked-hover.png');*/
+	background-position: bottom left;
+}
+
+#color-palette .controls .lock[locked-state='true'] {
+	/*background-image: url('images/locked.png');*/
+	background-position: top left ;
+}
+
+#color-palette .controls .lock[locked-state='true']:hover {
+	/*background-image: url('images/lock-hover.png');*/
+	background-position: top right;
+}
+
+/**
+ * Canvas
+ */
+
+#canvas {
+	width: 100%;
+	height: 300px;
+	min-height: 250px;
+	border-top: 1px solid #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	position: relative;
+	float: left;
+}
+
+#canvas[data-tutorial='drop'] {
+	text-align: center;
+	font-size: 30px;
+	color: #777;
+}
+
+#canvas[data-tutorial='drop']:before {
+	content: "Drop colors here to compare";
+	width: 40%;
+	padding: 30px 9% 70px 11%;
+
+	background-image: url('https://mdn.mozillademos.org/files/6075/drop.png');
+	background-repeat: no-repeat;
+	background-position: left 35px top 60%;
+
+	text-align: right;
+
+	border: 3px dashed rgb(221, 221, 221);
+	border-radius: 15px;
+
+	position: absolute;
+	top: 50px;
+	left: 20%;
+}
+
+#canvas[data-tutorial='drop']:after {
+	content: "adjust, change or modify";
+	width: 40%;
+	font-size: 24px;
+	position: absolute;
+	top: 130px;
+	left: 32%;
+	z-index: 2;
+}
+
+#canvas [data-tutorial='dblclick'] {
+	background-color: #999 !important;
+}
+
+#canvas [data-tutorial='dblclick']:before {
+	content: "double click to activate";
+	width: 80px;
+	color: #FFF;
+	position: absolute;
+	top: 10%;
+	left: 20%;
+	z-index: 2;
+}
+
+#canvas .sample {
+	width: 100px;
+	height: 100px;
+	min-width: 20px;
+	min-height: 20px;
+	position: absolute;
+	border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+#canvas .sample:hover {
+	cursor: move;
+}
+
+#canvas .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#canvas .sample:hover &gt; * {
+	cursor: pointer;
+	display: block !important;
+}
+
+#canvas .sample .resize-handle {
+	display: none;
+}
+
+#canvas .sample .pick {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#canvas .sample .delete {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+
+/**
+ * Canvas controls
+ */
+
+#canvas .toggle-bg {
+	width: 16px;
+	height: 16px;
+	margin: 5px;
+	background: url("images/canvas-controls.png") center left no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+
+#canvas .toggle-bg:hover {
+	cursor: pointer;
+}
+
+#canvas[data-bg='true'] {
+	background: none;
+}
+
+#canvas[data-bg='true'] .toggle-bg {
+	background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat;
+}
+
+#zindex {
+	height: 20px;
+	margin: 5px;
+	font-size: 16px;
+	position: absolute;
+	opacity: 0;
+	top: -10000px;
+	left: 0;
+	color: #777;
+	float: left;
+	transition: opacity 1s;
+}
+
+#zindex input {
+	border: 1px solid #DDD;
+	font-size: 16px;
+	color: #777;
+}
+
+#zindex .ui-input-slider-info {
+	width: 60px;
+}
+
+#zindex[data-active='true'] {
+	top: 0;
+	opacity: 1;
+}
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js">'use strict';
+
+var UIColorPicker = (function UIColorPicker() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	var subscribers = [];
+	var pickers = [];
+
+	/**
+	 * RGBA Color class
+	 *
+	 * HSV/HSB and HSL (hue, saturation, value / brightness, lightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 * @param lightness		0-100
+	 */
+
+	function Color(color) {
+
+		if(color instanceof Color === true) {
+			this.copy(color);
+			return;
+		}
+
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+		this.lightness = 0;
+		this.format = 'HSV';
+	}
+
+	function RGBColor(r, g, b) {
+		var color = new Color();
+		color.setRGBA(r, g, b, 1);
+		return color;
+	}
+
+	function RGBAColor(r, g, b, a) {
+		var color = new Color();
+		color.setRGBA(r, g, b, a);
+		return color;
+	}
+
+	function HSVColor(h, s, v) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		return color;
+	}
+
+	function HSVAColor(h, s, v, a) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		color.a = a;
+		return color;
+	}
+
+	function HSLColor(h, s, l) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		return color;
+	}
+
+	function HSLAColor(h, s, l, a) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		color.a = a;
+		return color;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+		this.format = '' + obj.format;
+		this.lightness = obj.lightness;
+	};
+
+	Color.prototype.setFormat = function setFormat(format) {
+		if (format === 'HSV')
+			this.format = 'HSV';
+		if (format === 'HSL')
+			this.format = 'HSL';
+	};
+
+	/*========== Methods to set Color Properties ==========*/
+
+	Color.prototype.isValidRGBValue = function isValidRGBValue(value) {
+		return (typeof(value) === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+			value &gt;= 0 &amp;&amp; value &lt;= 255);
+	};
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (this.isValidRGBValue(red) === false ||
+			this.isValidRGBValue(green) === false ||
+			this.isValidRGBValue(blue) === false)
+			return;
+
+			this.r = red | 0;
+			this.g = green | 0;
+			this.b = blue | 0;
+
+		if (this.isValidRGBValue(alpha) === true)
+			this.a = alpha | 0;
+	};
+
+	Color.prototype.setByName = function setByName(name, value) {
+		if (name === 'r' || name === 'g' || name === 'b') {
+			if(this.isValidRGBValue(value) === false)
+				return;
+
+			this[name] = value;
+			this.updateHSX();
+		}
+	};
+
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setHSL = function setHSL(hue, saturation, lightness) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.lightness = lightness;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHue = function setHue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value &lt; 0 || value &gt; 359)
+			return;
+		this.hue = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setSaturation = function setSaturation(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value &lt; 0 || value &gt; 100)
+			return;
+		this.saturation = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setValue = function setValue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value &lt; 0 || value &gt; 100)
+			return;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setLightness = function setLightness(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value &lt; 0 || value &gt; 100)
+			return;
+		this.lightness = value;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value);
+
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3');
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+		this.RGBtoHSV();
+	};
+
+	/*========== Conversion Methods ==========*/
+
+	Color.prototype.convertToHSL = function convertToHSL() {
+		if (this.format === 'HSL')
+			return;
+
+		this.setFormat('HSL');
+		this.RGBtoHSL();
+	};
+
+	Color.prototype.convertToHSV = function convertToHSV() {
+		if (this.format === 'HSV')
+			return;
+
+		this.setFormat('HSV');
+		this.RGBtoHSV();
+	};
+
+	/*========== Update Methods ==========*/
+
+	Color.prototype.updateRGB = function updateRGB() {
+		if (this.format === 'HSV') {
+			this.HSVtoRGB();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.HSLtoRGB();
+			return;
+		}
+	};
+
+	Color.prototype.updateHSX = function updateHSX() {
+		if (this.format === 'HSV') {
+			this.RGBtoHSV();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.RGBtoHSL();
+			return;
+		}
+	};
+
+	Color.prototype.HSVtoRGB = function HSVtoRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H &gt;= 0 &amp;&amp; H &lt; 1) {	this.setRGBA(C, X, m);	return; }
+		if (H &gt;= 1 &amp;&amp; H &lt; 2) {	this.setRGBA(X, C, m);	return; }
+		if (H &gt;= 2 &amp;&amp; H &lt; 3) {	this.setRGBA(m, C, X);	return; }
+		if (H &gt;= 3 &amp;&amp; H &lt; 4) {	this.setRGBA(m, X, C);	return; }
+		if (H &gt;= 4 &amp;&amp; H &lt; 5) {	this.setRGBA(X, m, C);	return; }
+		if (H &gt;= 5 &amp;&amp; H &lt; 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.HSLtoRGB = function HSLtoRGB() {
+		var sat = this.saturation / 100;
+		var light = this.lightness / 100;
+		var C = sat * (1 - Math.abs(2 * light - 1));
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = light - C/2;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H &gt;= 0 &amp;&amp; H &lt; 1) {	this.setRGBA(C, X, m);	return; }
+		if (H &gt;= 1 &amp;&amp; H &lt; 2) {	this.setRGBA(X, C, m);	return; }
+		if (H &gt;= 2 &amp;&amp; H &lt; 3) {	this.setRGBA(m, C, X);	return; }
+		if (H &gt;= 3 &amp;&amp; H &lt; 4) {	this.setRGBA(m, X, C);	return; }
+		if (H &gt;= 4 &amp;&amp; H &lt; 5) {	this.setRGBA(X, m, C);	return; }
+		if (H &gt;= 5 &amp;&amp; H &lt; 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.RGBtoHSV = function RGBtoHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue &lt; 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	};
+
+	Color.prototype.RGBtoHSL = function RGBtoHSL() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+		var lightness = (cmax + cmin) / 2;
+		var X = (1 - Math.abs(2 * lightness - 1));
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / X;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue &lt; 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.lightness = (lightness * 100) | 0;
+	};
+
+	/*========== Get Methods ==========*/
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r &lt; 16) r = '0' + r;
+		if (this.g &lt; 16) g = '0' + g;
+		if (this.b &lt; 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	};
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b;
+		var a = '';
+		var v = '';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'rgb' + a + rgb + v + ')';
+		return value;
+	};
+
+	Color.prototype.getHSLA = function getHSLA() {
+		if (this.format === 'HSV') {
+			var color = new Color(this);
+			color.setFormat('HSL');
+			color.updateHSX();
+			return color.getHSLA();
+		}
+
+		var a = '';
+		var v = '';
+		var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'hsl' + a + hsl + v + ')';
+		return value;
+	};
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	};
+
+	/*=======================================================================*/
+	/*=======================================================================*/
+
+	/*========== Capture Mouse Movement ==========*/
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener('mousedown', function(e) {
+			callback(e);
+			document.addEventListener('mousemove', callback);
+		});
+
+		document.addEventListener('mouseup', function(e) {
+			document.removeEventListener('mousemove', callback);
+		});
+	};
+
+	/*====================*/
+	// Color Picker Class
+	/*====================*/
+
+	function ColorPicker(node) {
+		this.color = new Color();
+		this.node = node;
+		this.subscribers = [];
+
+		var type = this.node.getAttribute('data-mode');
+		var topic = this.node.getAttribute('data-topic');
+
+		this.topic = topic;
+		this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV';
+		this.color.setFormat(this.picker_mode);
+
+		this.createPickingArea();
+		this.createHueArea();
+
+		this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this));
+		this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this));
+		this.newInputComponent('V', 'value', this.inputChangeValue.bind(this));
+		this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this));
+
+		this.createAlphaArea();
+
+		this.newInputComponent('R', 'red', this.inputChangeRed.bind(this));
+		this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this));
+		this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this));
+
+		this.createPreviewBox();
+		this.createChangeModeButton();
+
+		this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this));
+		this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this));
+
+		this.setColor(this.color);
+		pickers[topic] = this;
+	}
+
+	/*************************************************************************/
+	//				Function for generating the color-picker
+	/*************************************************************************/
+
+	ColorPicker.prototype.createPickingArea = function createPickingArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'picking-area';
+		picker.className = 'picker';
+
+		this.picking_area = area;
+		this.color_picker = picker;
+		setMouseTracking(area, this.updateColor.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createHueArea = function createHueArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'hue';
+		picker.className ='slider-picker';
+
+		this.hue_area = area;
+		this.hue_picker = picker;
+		setMouseTracking(area, this.updateHueSlider.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createAlphaArea = function createAlphaArea() {
+		var area = document.createElement('div');
+		var mask = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'alpha';
+		mask.className = 'alpha-mask';
+		picker.className = 'slider-picker';
+
+		this.alpha_area = area;
+		this.alpha_mask = mask;
+		this.alpha_picker = picker;
+		setMouseTracking(area, this.updateAlphaSlider.bind(this));
+
+		area.appendChild(mask);
+		mask.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) {
+		var preview_box = document.createElement('div');
+		var preview_color = document.createElement('div');
+
+		preview_box.className = 'preview';
+		preview_color.className = 'preview-color';
+
+		this.preview_color = preview_color;
+
+		preview_box.appendChild(preview_color);
+		this.node.appendChild(preview_box);
+	};
+
+	ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) {
+		var wrapper = document.createElement('div');
+		var input = document.createElement('input');
+		var info = document.createElement('span');
+
+		wrapper.className = 'input';
+		wrapper.setAttribute('data-topic', topic);
+		info.textContent = title;
+		info.className = 'name';
+		input.setAttribute('type', 'text');
+
+		wrapper.appendChild(info);
+		wrapper.appendChild(input);
+		this.node.appendChild(wrapper);
+
+		input.addEventListener('change', onChangeFunc);
+		input.addEventListener('click', function() {
+			this.select();
+		});
+
+		this.subscribe(topic, function(value) {
+			input.value = value;
+		});
+	};
+
+	ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() {
+
+		var button = document.createElement('div');
+		button.className = 'switch_mode';
+		button.addEventListener('click', function() {
+			if (this.picker_mode === 'HSV')
+				this.setPickerMode('HSL');
+			else
+				this.setPickerMode('HSV');
+
+		}.bind(this));
+
+		this.node.appendChild(button);
+	};
+
+	/*************************************************************************/
+	//					Updates properties of UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updateColor = function updateColor(e) {
+		var x = e.pageX - this.picking_area.offsetLeft;
+		var y = e.pageY - this.picking_area.offsetTop;
+		var picker_offset = 5;
+
+		// width and height should be the same
+		var size = this.picking_area.clientWidth;
+
+		if (x &gt; size) x = size;
+		if (y &gt; size) y = size;
+		if (x &lt; 0) x = 0;
+		if (y &lt; 0) y = 0;
+
+		var value = 100 - (y * 100 / size) | 0;
+		var saturation = x * 100 / size | 0;
+
+		if (this.picker_mode === 'HSV')
+			this.color.setHSV(this.color.hue, saturation, value);
+		if (this.picker_mode === 'HSL')
+			this.color.setHSL(this.color.hue, saturation, value);
+
+		this.color_picker.style.left = x - picker_offset + 'px';
+		this.color_picker.style.top = y - picker_offset + 'px';
+
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('value', value);
+		this.notify('lightness', value);
+		this.notify('saturation', saturation);
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) {
+		var x = e.pageX - this.hue_area.offsetLeft;
+		var width = this.hue_area.clientWidth;
+
+		if (x &lt; 0) x = 0;
+		if (x &gt; width) x = width;
+
+		// TODO 360 =&gt; 359
+		var hue = ((359 * x) / width) | 0;
+		// if (hue === 360) hue = 359;
+
+		this.updateSliderPosition(this.hue_picker, x);
+		this.setHue(hue);
+	};
+
+	ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) {
+		var x = e.pageX - this.alpha_area.offsetLeft;
+		var width = this.alpha_area.clientWidth;
+
+		if (x &lt; 0) x = 0;
+		if (x &gt; width) x = width;
+
+		this.color.a = (x / width).toFixed(2);
+
+		this.updateSliderPosition(this.alpha_picker, x);
+		this.updatePreviewColor();
+
+		this.notify('alpha', this.color.a);
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setHue = function setHue(value) {
+		this.color.setHue(value);
+
+		this.updatePickerBackground();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+		this.notify('hue', this.color.hue);
+
+		notify(this.topic, this.color);
+	};
+
+	// Updates when one of Saturation/Value/Lightness changes
+	ColorPicker.prototype.updateSLV = function updateSLV() {
+		this.updatePickerPosition();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	/*************************************************************************/
+	//				Update positions of various UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() {
+		var size = this.picking_area.clientWidth;
+		var value = 0;
+		var offset = 5;
+
+		if (this.picker_mode === 'HSV')
+			value = this.color.value;
+		if (this.picker_mode === 'HSL')
+			value = this.color.lightness;
+
+		var x = (this.color.saturation * size / 100) | 0;
+		var y = size - (value * size / 100) | 0;
+
+		this.color_picker.style.left = x - offset + 'px';
+		this.color_picker.style.top = y - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) {
+		elem.style.left = Math.max(pos - 3, -2) + 'px';
+	};
+
+	ColorPicker.prototype.updateHuePicker = function updateHuePicker() {
+		var size = this.hue_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.hue * size / 360 ) | 0;
+		this.hue_picker.style.left = pos - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() {
+		var size = this.alpha_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.a * size) | 0;
+		this.alpha_picker.style.left = pos - offset + 'px';
+	};
+
+	/*************************************************************************/
+	//						Update background colors
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() {
+		var nc = new Color(this.color);
+		nc.setHSV(nc.hue, 100, 100);
+		this.picking_area.style.backgroundColor = nc.getHexa();
+	};
+
+	ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() {
+		this.alpha_mask.style.backgroundColor = this.color.getHexa();
+	};
+
+	ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() {
+		this.preview_color.style.backgroundColor = this.color.getColor();
+	};
+
+	/*************************************************************************/
+	//						Update input elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) {
+		var value = parseInt(e.target.value);
+		this.setHue(value);
+		this.updateHuePicker();
+	};
+
+	ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) {
+		var value = parseInt(e.target.value);
+		this.color.setSaturation(value);
+		e.target.value = this.color.saturation;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setValue(value);
+		e.target.value = this.color.value;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) {
+		var value = parseInt(e.target.value);
+		this.color.setLightness(value);
+		e.target.value = this.color.lightness;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('r', value);
+		e.target.value = this.color.r;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('g', value);
+		e.target.value = this.color.g;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('b', value);
+		e.target.value = this.color.b;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) {
+		var value = parseFloat(e.target.value);
+
+		if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+			value &gt;= 0 &amp;&amp; value &lt;= 1)
+			this.color.a = value.toFixed(2);
+
+		e.target.value = this.color.a;
+		this.updateAlphaPicker();
+	};
+
+	ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) {
+		var value = e.target.value;
+		this.color.setHexa(value);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//							Internal Pub/Sub
+	/*************************************************************************/
+
+	ColorPicker.prototype.subscribe = function subscribe(topic, callback) {
+		this.subscribers[topic] = callback;
+	};
+
+	ColorPicker.prototype.notify = function notify(topic, value) {
+		if (this.subscribers[topic])
+			this.subscribers[topic](value);
+	};
+
+	/*************************************************************************/
+	//							Set Picker Properties
+	/*************************************************************************/
+
+	ColorPicker.prototype.setColor = function setColor(color) {
+		if(color instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		if (color.format !== this.picker_mode) {
+			color.setFormat(this.picker_mode);
+			color.updateHSX();
+		}
+
+		this.color.copy(color);
+		this.updateHuePicker();
+		this.updatePickerPosition();
+		this.updatePickerBackground();
+		this.updateAlphaPicker();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+
+		this.notify('hue', this.color.hue);
+		this.notify('saturation', this.color.saturation);
+		this.notify('value', this.color.value);
+		this.notify('lightness', this.color.lightness);
+
+		this.notify('alpha', this.color.a);
+		this.notify('hexa', this.color.getHexa());
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setPickerMode = function setPickerMode(mode) {
+		if (mode !== 'HSV' &amp;&amp; mode !== 'HSL')
+			return;
+
+		this.picker_mode = mode;
+		this.node.setAttribute('data-mode', this.picker_mode);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//								UNUSED
+	/*************************************************************************/
+
+	var setPickerMode = function setPickerMode(topic, mode) {
+		if (pickers[topic])
+			pickers[topic].setPickerMode(mode);
+	};
+
+	var setColor = function setColor(topic, color) {
+		if (pickers[topic])
+			pickers[topic].setColor(color);
+	};
+
+	var getColor = function getColor(topic) {
+		if (pickers[topic])
+			return new Color(pickers[topic].color);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(callback) {
+		subscribers.indexOf(callback);
+		subscribers.splice(index, 1);
+	};
+
+	var notify = function notify(topic, value) {
+		if (subscribers[topic] === undefined || subscribers[topic].length === 0)
+			return;
+
+		var color = new Color(value);
+		for (var i in subscribers[topic])
+			subscribers[topic][i](color);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-color-picker');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new ColorPicker(elem[i]);
+	};
+
+	return {
+		init : init,
+		Color : Color,
+		RGBColor : RGBColor,
+		RGBAColor : RGBAColor,
+		HSVColor : HSVColor,
+		HSVAColor : HSVAColor,
+		HSLColor : HSLColor,
+		HSLAColor : HSLAColor,
+		setColor : setColor,
+		getColor : getColor,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPickerMode : setPickerMode
+	};
+
+})();
+
+
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision &gt;= 0 ? precision : 0;
+		this.step = step &lt; 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity &gt; 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value &gt; slider.max) value = slider.max;
+		if (value &lt; slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value &gt; 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+'use strict';
+
+window.addEventListener("load", function() {
+	ColorPickerTool.init();
+});
+
+var ColorPickerTool = (function ColorPickerTool() {
+
+	/*========== Get DOM Element By ID ==========*/
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	function allowDropEvent(e) {
+		e.preventDefault();
+	}
+
+	/*========== Make an element resizable relative to it's parent ==========*/
+
+	var UIComponent = (function UIComponent() {
+
+		function makeResizable(elem, axis) {
+			var valueX = 0;
+			var valueY = 0;
+			var action = 0;
+
+			var resizeStart = function resizeStart(e) {
+				e.stopPropagation();
+				e.preventDefault();
+				if (e.button !== 0)
+					return;
+
+				valueX = e.clientX - elem.clientWidth;
+				valueY = e.clientY - elem.clientHeight;
+
+				document.body.setAttribute('data-resize', axis);
+				document.addEventListener('mousemove', mouseMove);
+				document.addEventListener('mouseup', resizeEnd);
+			};
+
+			var mouseMove = function mouseMove(e) {
+				if (action &gt;= 0)
+					elem.style.width = e.clientX - valueX + 'px';
+				if (action &lt;= 0)
+					elem.style.height = e.clientY - valueY + 'px';
+			};
+
+			var resizeEnd = function resizeEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.body.removeAttribute('data-resize', axis);
+				document.removeEventListener('mousemove', mouseMove);
+				document.removeEventListener('mouseup', resizeEnd);
+			};
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			if (axis === 'width') action = 1;
+			else if (axis === 'height') action = -1;
+			else axis = 'both';
+
+			handle.className = 'resize-handle';
+			handle.setAttribute('data-resize', axis);
+			handle.addEventListener('mousedown', resizeStart);
+			elem.appendChild(handle);
+		};
+
+		/*========== Make an element draggable relative to it's parent ==========*/
+
+		var makeDraggable = function makeDraggable(elem, endFunction) {
+
+			var offsetTop;
+			var offsetLeft;
+
+			elem.setAttribute('data-draggable', 'true');
+
+			var dragStart = function dragStart(e) {
+				e.preventDefault();
+				e.stopPropagation();
+
+				if (e.target.getAttribute('data-draggable') !== 'true' ||
+					e.target !== elem || e.button !== 0)
+					return;
+
+				offsetLeft = e.clientX - elem.offsetLeft;
+				offsetTop = e.clientY - elem.offsetTop;
+
+				document.addEventListener('mousemove', mouseDrag);
+				document.addEventListener('mouseup', dragEnd);
+			};
+
+			var dragEnd = function dragEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.removeEventListener('mousemove', mouseDrag);
+				document.removeEventListener('mouseup', dragEnd);
+			};
+
+			var mouseDrag = function mouseDrag(e) {
+				elem.style.left = e.clientX - offsetLeft + 'px';
+				elem.style.top = e.clientY - offsetTop + 'px';
+			};
+
+			elem.addEventListener('mousedown', dragStart, false);
+		};
+
+		return {
+			makeResizable : makeResizable,
+			makeDraggable : makeDraggable
+		};
+
+	})();
+
+	/*========== Color Class ==========*/
+
+	var Color = UIColorPicker.Color;
+	var HSLColor = UIColorPicker.HSLColor;
+
+	/**
+	 * ColorPalette
+	 */
+	var ColorPalette = (function ColorPalette() {
+
+		var samples = [];
+		var color_palette;
+		var complementary;
+
+		var hideNode = function(node) {
+			node.setAttribute('data-hidden', 'true');
+		};
+
+		var ColorSample = function ColorSample(id) {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = new Color();
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('click', this.pickColor.bind(this));
+
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateHue = function updateHue(color, degree, steps) {
+			this.color.copy(color);
+			var hue = (steps * degree + this.color.hue) % 360;
+			if (hue &lt; 0) hue += 360;
+			this.color.setHue(hue);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) {
+			var saturation = color.saturation + value * steps;
+			if (saturation &lt;= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setSaturation(saturation);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) {
+			var lightness = color.lightness + value * steps;
+			if (lightness &lt;= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setLightness(lightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) {
+			var brightness = color.value + value * steps;
+			if (brightness &lt;= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setValue(brightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) {
+			var alpha = parseFloat(color.a) + value * steps;
+			if (alpha &lt;= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.a = parseFloat(alpha.toFixed(2));
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.pickColor = function pickColor() {
+			UIColorPicker.setColor('picker', this.color);
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'palette-samples');
+		};
+
+		var Palette = function Palette(text, size) {
+			this.samples = [];
+			this.locked = false;
+
+			var palette = document.createElement('div');
+			var title = document.createElement('div');
+			var controls = document.createElement('div');
+			var container = document.createElement('div');
+			var lock = document.createElement('div');
+
+			container.className = 'container';
+			title.className = 'title';
+			palette.className = 'palette';
+			controls.className = 'controls';
+			lock.className = 'lock';
+			title.textContent = text;
+
+			controls.appendChild(lock);
+			container.appendChild(title);
+			container.appendChild(controls);
+			container.appendChild(palette);
+
+			lock.addEventListener('click', function () {
+				this.locked = !this.locked;
+				lock.setAttribute('locked-state', this.locked);
+			}.bind(this));
+
+			for(var i = 0; i &lt; size; i++) {
+				var sample = new ColorSample();
+				this.samples.push(sample);
+				palette.appendChild(sample.node);
+			}
+
+			this.container = container;
+			this.title = title;
+		};
+
+		var createHuePalette = function createHuePalette() {
+			var palette = new Palette('Hue', 12);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i &lt; 12; i++) {
+					palette.samples[i].updateHue(color, 30, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var createSaturationPalette = function createSaturationPalette() {
+			var palette = new Palette('Saturation', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i &lt; 11; i++) {
+					palette.samples[i].updateSaturation(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		/* Brightness or Lightness - depends on the picker mode */
+		var createVLPalette = function createSaturationPalette() {
+			var palette = new Palette('Lightness', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				if(color.format === 'HSL') {
+					palette.title.textContent = 'Lightness';
+					for(var i = 0; i &lt; 11; i++)
+						palette.samples[i].updateLightness(color, -10, i);
+				}
+				else {
+					palette.title.textContent = 'Value';
+					for(var i = 0; i &lt; 11; i++)
+						palette.samples[i].updateBrightness(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var isBlankPalette = function isBlankPalette(container, value) {
+			if (value === 0) {
+				container.setAttribute('data-collapsed', 'true');
+				return true;
+			}
+
+			container.removeAttribute('data-collapsed');
+			return false;
+		};
+
+		var createAlphaPalette = function createAlphaPalette() {
+			var palette = new Palette('Alpha', 10);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i &lt; 10; i++) {
+					palette.samples[i].updateAlpha(color, -0.1, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined &amp;&amp; samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var init = function init() {
+			color_palette = getElemById('color-palette');
+
+			createHuePalette();
+			createSaturationPalette();
+			createVLPalette();
+			createAlphaPalette();
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor
+		};
+
+	})();
+
+	/**
+	 * ColorInfo
+	 */
+	var ColorInfo = (function ColorInfo() {
+
+		var info_box;
+		var select;
+		var RGBA;
+		var HEXA;
+		var HSLA;
+
+		var updateInfo = function updateInfo(color) {
+			if (color.a | 0 === 1) {
+				RGBA.info.textContent = 'RGB';
+				HSLA.info.textContent = 'HSL';
+			}
+			else {
+				RGBA.info.textContent = 'RGBA';
+				HSLA.info.textContent = 'HSLA';
+			}
+
+			RGBA.value.value = color.getRGBA();
+			HSLA.value.value = color.getHSLA();
+			HEXA.value.value = color.getHexa();
+		};
+
+		var InfoProperty = function InfoProperty(info) {
+
+			var node = document.createElement('div');
+			var title = document.createElement('div');
+			var value = document.createElement('input');
+			var copy = document.createElement('div');
+
+			node.className = 'property';
+			title.className = 'type';
+			value.className = 'value';
+			copy.className = 'copy';
+
+			title.textContent = info;
+			value.setAttribute('type', 'text');
+
+			copy.addEventListener('click', function() {
+				value.select();
+			});
+
+			node.appendChild(title);
+			node.appendChild(value);
+			node.appendChild(copy);
+
+			this.node = node;
+			this.value = value;
+			this.info = title;
+
+			info_box.appendChild(node);
+		};
+
+		var init = function init() {
+
+			info_box = getElemById('color-info');
+
+			RGBA = new InfoProperty('RGBA');
+			HSLA = new InfoProperty('HSLA');
+			HEXA = new InfoProperty('HEXA');
+
+			UIColorPicker.subscribe('picker', updateInfo);
+
+		};
+
+		return {
+			init: init
+		};
+
+	})();
+
+	/**
+	 * ColorPicker Samples
+	 */
+	var ColorPickerSamples = (function ColorPickerSamples() {
+
+		var samples = [];
+		var nr_samples = 0;
+		var active = null;
+		var container = null;
+		var	samples_per_line = 10;
+		var trash_can = null;
+		var base_color = new HSLColor(0, 50, 100);
+		var add_btn;
+		var add_btn_pos;
+
+		var ColorSample = function ColorSample() {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.index = nr_samples++;
+			this.node = node;
+			this.color = new Color(base_color);
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('dragover' , allowDropEvent);
+			node.addEventListener('drop'     , this.dragDrop.bind(this));
+
+			this.updatePosition(this.index);
+			this.updateBgColor();
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updatePosition = function updatePosition(index) {
+			this.index = index;
+			this.posY = 5 + ((index / samples_per_line) | 0) * 52;
+			this.posX = 5 + ((index % samples_per_line) | 0) * 52;
+			this.node.style.top  = this.posY + 'px';
+			this.node.style.left = this.posX + 'px';
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.activate = function activate() {
+			UIColorPicker.setColor('picker', this.color);
+			this.node.setAttribute('data-active', 'true');
+		};
+
+		ColorSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'picker-samples');
+		};
+
+		ColorSample.prototype.dragDrop = function dragDrop(e) {
+			e.stopPropagation();
+			this.color = Tool.getSampleColorFrom(e);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.deleteSample = function deleteSample() {
+			container.removeChild(this.node);
+			samples[this.uid] = null;
+			nr_samples--;
+		};
+
+		var updateUI = function updateUI() {
+			updateContainerProp();
+
+			var index = 0;
+			var nr = samples.length;
+			for (var i=0; i &lt; nr; i++)
+				if (samples[i] !== null) {
+					samples[i].updatePosition(index);
+					index++;
+				}
+
+			AddSampleButton.updatePosition(index);
+		};
+
+		var deleteSample = function deleteSample(e) {
+			trash_can.parentElement.setAttribute('drag-state', 'none');
+
+			var location = e.dataTransfer.getData('location');
+			if (location !== 'picker-samples')
+				return;
+
+			var sampleID = e.dataTransfer.getData('sampleID');
+			samples[sampleID].deleteSample();
+			console.log(samples);
+
+			updateUI();
+		};
+
+		var createDropSample = function createDropSample() {
+			var sample = document.createElement('div');
+			sample.id = 'drop-effect-sample';
+			sample.className = 'sample';
+			container.appendChild(sample);
+		};
+
+		var setActivateSample = function setActivateSample(e) {
+			if (e.target.className !== 'sample')
+				return;
+
+			unsetActiveSample(active);
+			Tool.unsetVoidSample();
+			CanvasSamples.unsetActiveSample();
+			active = samples[e.target.getAttribute('sample-id')];
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined &amp;&amp; samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var updateContainerProp = function updateContainerProp() {
+			samples_per_line = ((container.clientWidth - 5) / 52) | 0;
+			var height = 52 * (1 + (nr_samples / samples_per_line) | 0);
+			container.style.height = height + 10 + 'px';
+		};
+
+		var AddSampleButton = (function AddSampleButton() {
+			var node;
+			var _index = 0;
+			var _posX;
+			var _posY;
+
+			var updatePosition = function updatePosition(index) {
+				_index = index;
+				_posY = 5 + ((index / samples_per_line) | 0) * 52;
+				_posX = 5 + ((index % samples_per_line) | 0) * 52;
+
+				node.style.top  = _posY + 'px';
+				node.style.left = _posX + 'px';
+			};
+
+			var addButtonClick = function addButtonClick() {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+				updatePosition(_index + 1);
+				updateUI();
+			};
+
+			var init = function init() {
+				node = document.createElement('div');
+				var icon = document.createElement('div');
+
+				node.className = 'sample';
+				icon.id = 'add-icon';
+				node.appendChild(icon);
+				node.addEventListener('click', addButtonClick);
+
+				updatePosition(0);
+				container.appendChild(node);
+			};
+
+			return {
+				init : init,
+				updatePosition : updatePosition
+			};
+		})();
+
+		var init = function init() {
+			container = getElemById('picker-samples');
+			trash_can = getElemById('trash-can');
+
+			AddSampleButton.init();
+
+			for (var i=0; i&lt;16; i++) {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+			}
+
+			AddSampleButton.updatePosition(samples.length);
+			updateUI();
+
+			active = samples[0];
+			active.activate();
+
+			container.addEventListener('click', setActivateSample);
+
+			trash_can.addEventListener('dragover', allowDropEvent);
+			trash_can.addEventListener('dragenter', function() {
+				this.parentElement.setAttribute('drag-state', 'enter');
+			});
+			trash_can.addEventListener('dragleave', function(e) {
+				this.parentElement.setAttribute('drag-state', 'none');
+			});
+			trash_can.addEventListener('drop', deleteSample);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)
+					active.updateColor(color);
+			});
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	/**
+	 * Canvas Samples
+	 */
+	var CanvasSamples = (function CanvasSamples() {
+
+		var active = null;
+		var canvas = null;
+		var samples = [];
+		var zindex = null;
+		var tutorial = true;
+
+		var CanvasSample = function CanvasSample(color, posX, posY) {
+
+			var node = document.createElement('div');
+			var pick = document.createElement('div');
+			var delete_btn = document.createElement('div');
+			node.className = 'sample';
+			pick.className = 'pick';
+			delete_btn.className = 'delete';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = color;
+			this.updateBgColor();
+			this.zIndex = 1;
+
+			node.style.top = posY - 50 + 'px';
+			node.style.left = posX - 50 + 'px';
+			node.setAttribute('sample-id', this.uid);
+
+			node.appendChild(pick);
+			node.appendChild(delete_btn);
+
+			var activate = function activate() {
+				setActiveSample(this);
+			}.bind(this);
+
+			node.addEventListener('dblclick', activate);
+			pick.addEventListener('click', activate);
+			delete_btn.addEventListener('click', this.deleteSample.bind(this));
+
+			UIComponent.makeDraggable(node);
+			UIComponent.makeResizable(node);
+
+			samples.push(this);
+			canvas.appendChild(node);
+			return this;
+		};
+
+		CanvasSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		CanvasSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		CanvasSample.prototype.updateZIndex = function updateZIndex(value) {
+			this.zIndex = value;
+			this.node.style.zIndex = value;
+		};
+
+		CanvasSample.prototype.activate = function activate() {
+			this.node.setAttribute('data-active', 'true');
+			zindex.setAttribute('data-active', 'true');
+
+			UIColorPicker.setColor('picker', this.color);
+			InputSliderManager.setValue('z-index', this.zIndex);
+		};
+
+		CanvasSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+			zindex.removeAttribute('data-active');
+		};
+
+		CanvasSample.prototype.deleteSample = function deleteSample() {
+			if (active === this)
+				unsetActiveSample();
+			canvas.removeChild(this.node);
+			samples[this.uid] = null;
+		};
+
+		CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) {
+			this.node.style.top = posY - this.startY + 'px';
+			this.node.style.left = posX - this.startX + 'px';
+		};
+
+		var canvasDropEvent = function canvasDropEvent(e) {
+			var color = Tool.getSampleColorFrom(e);
+
+			if (color) {
+				var offsetX = e.pageX - canvas.offsetLeft;
+				var offsetY = e.pageY - canvas.offsetTop;
+				var sample = new CanvasSample(color, offsetX, offsetY);
+				if (tutorial) {
+					tutorial = false;
+					canvas.removeAttribute('data-tutorial');
+					var info = new CanvasSample(new Color(), 100, 100);
+					info.node.setAttribute('data-tutorial', 'dblclick');
+				}
+			}
+
+		};
+
+		var setActiveSample = function setActiveSample(sample) {
+			ColorPickerSamples.unsetActiveSample();
+			Tool.unsetVoidSample();
+			unsetActiveSample();
+			active = sample;
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var createToggleBgButton = function createToggleBgButton() {
+			var button = document.createElement('div');
+			var state = false;
+			button.className = 'toggle-bg';
+			canvas.appendChild(button);
+
+			button.addEventListener('click', function() {
+				console.log(state);
+				state = !state;
+				canvas.setAttribute('data-bg', state);
+			});
+		};
+
+		var init = function init() {
+			canvas = getElemById('canvas');
+			zindex = getElemById('zindex');
+
+			canvas.addEventListener('dragover', allowDropEvent);
+			canvas.addEventListener('drop', canvasDropEvent);
+
+			createToggleBgButton();
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)	active.updateColor(color);
+			});
+
+			InputSliderManager.subscribe('z-index', function (value) {
+				if (active)	active.updateZIndex(value);
+			});
+
+			UIComponent.makeResizable(canvas, 'height');
+		};
+
+		return {
+			init : init,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	var StateButton = function StateButton(node, state) {
+		this.state = false;
+		this.callback = null;
+
+		node.addEventListener('click', function() {
+			this.state = !this.state;
+			if (typeof this.callback === "function")
+				this.callback(this.state);
+		}.bind(this));
+	};
+
+	StateButton.prototype.set = function set() {
+		this.state = true;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.unset = function unset() {
+		this.state = false;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.subscribe = function subscribe(func) {
+		this.callback = func;
+	};
+
+
+	/**
+	 * Tool
+	 */
+	var Tool = (function Tool() {
+
+		var samples = [];
+		var controls = null;
+		var void_sw;
+
+		var createPickerModeSwitch = function createPickerModeSwitch() {
+			var parent = getElemById('controls');
+			var icon = document.createElement('div');
+			var button = document.createElement('div');
+			var hsv = document.createElement('div');
+			var hsl = document.createElement('div');
+			var active = null;
+
+			icon.className = 'icon picker-icon';
+			button.className = 'switch';
+			button.appendChild(hsv);
+			button.appendChild(hsl);
+
+			hsv.textContent = 'HSV';
+			hsl.textContent = 'HSL';
+
+			active = hsl;
+			active.setAttribute('data-active', 'true');
+
+			function switchPickingModeTo(elem) {
+				active.removeAttribute('data-active');
+				active = elem;
+				active.setAttribute('data-active', 'true');
+				UIColorPicker.setPickerMode('picker', active.textContent);
+			};
+
+			var picker_sw = new StateButton(icon);
+			picker_sw.subscribe(function() {
+				if (active === hsv)
+					switchPickingModeTo(hsl);
+				else
+					switchPickingModeTo(hsv);
+			});
+
+			hsv.addEventListener('click', function() {
+				switchPickingModeTo(hsv);
+			});
+			hsl.addEventListener('click', function() {
+				switchPickingModeTo(hsl);
+			});
+
+			parent.appendChild(icon);
+			parent.appendChild(button);
+		};
+
+		var setPickerDragAndDrop = function setPickerDragAndDrop() {
+			var preview = document.querySelector('#picker .preview-color');
+			var picking_area = document.querySelector('#picker .picking-area');
+
+			preview.setAttribute('draggable', 'true');
+			preview.addEventListener('drop', drop);
+			preview.addEventListener('dragstart', dragStart);
+			preview.addEventListener('dragover', allowDropEvent);
+
+			picking_area.addEventListener('drop', drop);
+			picking_area.addEventListener('dragover', allowDropEvent);
+
+			function drop(e) {
+				var color = getSampleColorFrom(e);
+				UIColorPicker.setColor('picker', color);
+			};
+
+			function dragStart(e) {
+				e.dataTransfer.setData('sampleID', 'picker');
+				e.dataTransfer.setData('location', 'picker');
+			};
+		};
+
+		var getSampleColorFrom = function getSampleColorFrom(e) {
+			var sampleID = e.dataTransfer.getData('sampleID');
+			var location = e.dataTransfer.getData('location');
+
+			if (location === 'picker')
+				return UIColorPicker.getColor(sampleID);
+			if (location === 'picker-samples')
+				return ColorPickerSamples.getSampleColor(sampleID);
+			if (location === 'palette-samples')
+				return ColorPalette.getSampleColor(sampleID);
+		};
+
+		var setVoidSwitch = function setVoidSwitch() {
+			var void_sample = getElemById('void-sample');
+			void_sw = new StateButton(void_sample);
+			void_sw.subscribe( function (state) {
+				void_sample.setAttribute('data-active', state);
+				if (state === true) {
+					ColorPickerSamples.unsetActiveSample();
+					CanvasSamples.unsetActiveSample();
+				}
+			});
+		};
+
+		var unsetVoidSample = function unsetVoidSample() {
+			void_sw.unset();
+		};
+
+		var init = function init() {
+			controls = getElemById('controls');
+
+			var color = new Color();
+			color.setHSL(0, 51, 51);
+			UIColorPicker.setColor('picker', color);
+
+			setPickerDragAndDrop();
+			createPickerModeSwitch();
+			setVoidSwitch();
+		};
+
+		return {
+			init : init,
+			unsetVoidSample : unsetVoidSample,
+			getSampleColorFrom : getSampleColorFrom
+		};
+
+	})();
+
+	var init = function init() {
+		UIColorPicker.init();
+		InputSliderManager.init();
+		ColorInfo.init();
+		ColorPalette.init();
+		ColorPickerSamples.init();
+		CanvasSamples.init();
+		Tool.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+</pre>
+</div>
+
+
+<p>{{CSSRef}}</p>
+
+<p><span style="line-height: 1.5;">Dieses Werkzeug vereinfacht es, beliebige Farben zu kreieren, um sie dann für das Internet zu verwenden. Außerdem erlaubt es, Farben in verschiedene von CSS unterstützte Formate zu konvertieren. Dazu zählen: HEXA-Farben, RGB (Rot/Grün/Blau) und HSL (Farbton/Sättigung/relative Helligkeit). Bei Verwendung der Farbformate RGB (rgba) und HSL (hsla) wird es auch unterstützt, den Alphakanal einzustellen.</span></p>
+
+<p><span style="line-height: 1.5;">Jede Farbe wird in allen drei im Internet üblichen CSS-Formaten ausgedrückt. Weiters wird für die ausgewählte Farbe jeweils eine Palette für HSL (Farbton/Sättigung/relative Helligkeit), HSV (Farbton/Sättigung/Hellwert) und den Alphakanal angezeigt. Das Spektrum des Farbauswahl-Werkzeuges kann man zwischen dem HSL- und HSV-Farbraum umschalten.</span></p>
+
+<p><span style="line-height: 1.5;">{{ EmbedLiveSample('ColorPicker_Tool', '100%', '900') }}</span></p>
+
+<p> </p>
diff --git a/files/de/web/css/css_colors/index.html b/files/de/web/css/css_colors/index.html
new file mode 100644
index 0000000000..b9ef3a636f
--- /dev/null
+++ b/files/de/web/css/css_colors/index.html
@@ -0,0 +1,117 @@
+---
+title: CSS Farben
+slug: Web/CSS/CSS_Colors
+tags:
+  - CSS
+  - CSS Farben
+  - Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Color
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Colors</strong> ist ein CSS Modul, das um Farben, Farbtypen und Transparenz geht.</p>
+
+<h2 id="Referenz">Referenz</h2>
+
+<h3 id="Eigenschaften">Eigenschaften</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("opacity")}}</li>
+</ul>
+</div>
+
+<h3 id="CSS_Datentypen">CSS Datentypen</h3>
+
+<p>{{cssxref("&lt;color&gt;")}}</p>
+
+<h2 id="Anleitungen">Anleitungen</h2>
+
+<p><em>Keine.</em></p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Colors')}}</td>
+   <td>{{Spec2('CSS3 Colors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>3.0</td>
+   <td>3.5</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>In CSS sind Farbverläufe keine Farben, sondern <a href="/de/docs/Web/CSS/CSS_Images">Bilder</a>.</li>
+</ul>
diff --git a/files/de/web/css/css_columns/index.html b/files/de/web/css/css_columns/index.html
new file mode 100644
index 0000000000..f637773da4
--- /dev/null
+++ b/files/de/web/css/css_columns/index.html
@@ -0,0 +1,60 @@
+---
+title: CSS Columns
+slug: Web/CSS/CSS_Columns
+tags:
+  - CSS
+  - CSS Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Columns
+---
+<div>{{CSSRef("CSS3 Multicol")}}</div>
+
+<p><strong>CSS Spalten</strong> ist ein CSS Modul, das ein Mehrspaltenlayout definiert, das es erlaubt, auszudrücken, wie Inhalte zwischen Spalten aufgeteilt werden und wie Lücken und Linien dazwischen gehandhabt werden.</p>
+
+<h2 id="Referenz">Referenz</h2>
+
+<h3 id="CSS_Eigenschaften">CSS Eigenschaften</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("break-after")}}</li>
+ <li>{{cssxref("break-before")}}</li>
+ <li>{{cssxref("break-inside")}}</li>
+ <li>{{cssxref("column-count")}}</li>
+ <li>{{cssxref("column-fill")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("column-rule")}}</li>
+ <li>{{cssxref("column-rule-color")}}</li>
+ <li>{{cssxref("column-rule-style")}}</li>
+ <li>{{cssxref("column-rule-width")}}</li>
+ <li>{{cssxref("column-span")}}</li>
+ <li>{{cssxref("column-width")}}</li>
+ <li>{{cssxref("columns")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/de/docs/CSS3_Columns">Verwendung von mehrspaltigen Layouts</a></dt>
+ <dd>Schritt für Schritt Tutorial darüber, wie Layouts mit mehreren Spalten erstellt werden.</dd>
+</dl>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/de/web/css/css_compositing_and_blending/index.html b/files/de/web/css/css_compositing_and_blending/index.html
new file mode 100644
index 0000000000..61e43b48e5
--- /dev/null
+++ b/files/de/web/css/css_compositing_and_blending/index.html
@@ -0,0 +1,98 @@
+---
+title: CSS Compositing and Blending
+slug: Web/CSS/CSS_Compositing_and_Blending
+tags:
+  - CSS
+  - CSS Compositing and Blending
+  - CSS Referenz
+  - Übersicht
+translation_of: Web/CSS/Compositing_and_Blending
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Compositing and Blending</strong> ist ein CSS Modul, das definiert, wie Formen verschiedener Elemente zu einem einzelnen Bild kombiniert werden.</p>
+
+<h2 id="Referenz">Referenz</h2>
+
+<h3 id="Eigenschaften">Eigenschaften</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("background-blend-mode")}}</li>
+ <li>{{cssxref("mix-blend-mode")}}</li>
+ <li>{{cssxref("isolation")}}</li>
+</ul>
+</div>
+
+<h2 id="Anleitungen">Anleitungen</h2>
+
+<p><em>Keine.</em></p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Compositing")}}</td>
+   <td>{{Spec2("Compositing")}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatChrome("41.0")}}</td>
+   <td>{{CompatGeckoDesktop("36.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatChrome("41.0")}}</td>
+   <td>{{CompatGeckoMobile("36.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/de/web/css/css_conditional_rules/index.html b/files/de/web/css/css_conditional_rules/index.html
new file mode 100644
index 0000000000..a0c6192fc1
--- /dev/null
+++ b/files/de/web/css/css_conditional_rules/index.html
@@ -0,0 +1,100 @@
+---
+title: CSS Conditional Rules
+slug: Web/CSS/CSS_Conditional_Rules
+tags:
+  - CSS
+  - CSS Conditional Rules
+  - CSS Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Conditional_Rules
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Conditional Rules</strong> ist ein CSS Modul, das es erlaubt, eine Reihe von Regeln zu definieren, die nur basierend auf den Fähigkeiten des Prozessors oder des Dokuments angewendet werden, auf das das Stylesheet angewendet wird.</p>
+
+<h2 id="Referenz">Referenz</h2>
+
+<h3 id="-Regeln">@-Regeln</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@document")}}</li>
+ <li>{{cssxref("@media")}}</li>
+ <li>{{cssxref("@supports")}}</li>
+</ul>
+</div>
+
+<h2 id="Anleitungen">Anleitungen</h2>
+
+<p><em>Keine.</em></p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Conditional')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/de/web/css/css_device_adaptation/index.html b/files/de/web/css/css_device_adaptation/index.html
new file mode 100644
index 0000000000..13b3bba03c
--- /dev/null
+++ b/files/de/web/css/css_device_adaptation/index.html
@@ -0,0 +1,104 @@
+---
+title: CSS Device Adaptation
+slug: Web/CSS/CSS_Device_Adaptation
+tags:
+  - CSS
+  - CSS Device Adaption
+  - Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Device_Adaptation
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Device Adapation</strong> ist ein CSS Modul, das es erlaubt, die Größe, den Zoomfaktor und die Ausrichtung des Viewports zu definieren.</p>
+
+<h2 id="Referenz">Referenz</h2>
+
+<h3 id="-Regeln">@-Regeln</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@viewport")}}</li>
+</ul>
+</div>
+
+<h2 id="Anleitungen">Anleitungen</h2>
+
+<p><em>Keine.</em></p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Device")}}</td>
+   <td>{{Spec2("CSS3 Device")}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>29<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>10 {{property_prefix("-ms")}}</td>
+   <td>11.10<br>
+    {{CompatNo}}15<br>
+    16<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>4.4</td>
+   <td>29.0</td>
+   <td>{{CompatNo}}</td>
+   <td>10{{property_prefix("-ms")}}</td>
+   <td>11.10<br>
+    {{CompatNo}}15<br>
+    16<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Hinter einem Flag.</p>
diff --git a/files/de/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html b/files/de/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html
new file mode 100644
index 0000000000..1401a93f7f
--- /dev/null
+++ b/files/de/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html
@@ -0,0 +1,210 @@
+---
+title: Aligning Items in a Flex Container
+slug: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
+tags:
+  - Flex-Container
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary" style=""><font><font>Einer der Gründe, warum Flexbox das Interesse von Webentwicklern schnell geweckt hat, ist, dass es zum ersten Mal die richtigen Ausrichtungsfunktionen für das Web bereitgestellt hat.<span> </span></font><font>Es ermöglichte die richtige vertikale Ausrichtung, so dass wir endlich eine Box leicht zentrieren können.<span> </span></font><font>In diesem Handbuch werden wir uns eingehend mit der Funktionsweise der Ausrichtungs- und Ausrichtungseigenschaften in Flexbox befassen.</font></font></p>
+
+<p style=""><font><font>Um unsere Box zu zentrieren, verwenden wir die<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace;'>align-items</code><font><font>Eigenschaft, um unser Element auf der Querachse auszurichten, in diesem Fall der vertikal verlaufenden Blockachse.<span> </span></font><font>Wir verwenden<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace;'>justify-content</code><font><font>, um das Element auf der Hauptachse auszurichten, in diesem Fall der horizontal verlaufenden Inline-Achse.</font></font></p>
+
+<p><img alt="A containing element with another box centered inside it." src="https://mdn.mozillademos.org/files/15627/align1.png" style="display: block; height: 357px; margin: 0px auto; width: 616px;"></p>
+
+<p><font>Sie können sich den Code dieses Beispiels unten ansehen.<span> </span></font><font>Ändern Sie die Größe des Containers oder des verschachtelten Elements, und das verschachtelte Element bleibt immer zentriert.</font></p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}</p>
+
+<h2 id="Eigenschaften_die_die_Ausrichtung_steuern" style=""><font><font>Eigenschaften, die die Ausrichtung steuern</font></font></h2>
+
+<p><span style="">Die Eigenschaften, die wir in diesem Handbuch betrachten werden, sind wie folgt.</span></p>
+
+<ul>
+ <li>{{cssxref("justify-content")}} — <span style="">steuert die Ausrichtung aller Elemente auf der Hauptachse.</span></li>
+ <li>{{cssxref("align-items")}} — <span style="">steuert die Ausrichtung aller Elemente auf der Querachse.</span></li>
+ <li>{{cssxref("align-self")}} — <span style="">steuert die Ausrichtung eines einzelnen Flex-Elements auf der Querachse.</span></li>
+ <li>{{cssxref("align-content")}} — <font>in der Spezifikation als „Packing Flex Lines“ beschrieben;<span> </span></font><font>Steuert den Abstand zwischen den Flexlinien auf der Querachse.</font></li>
+</ul>
+
+<p><span style="">Wir werden auch herausfinden, wie automatische Ränder für die Ausrichtung in der Flexbox verwendet werden können.</span></p>
+
+<div class="note">
+<p><strong style=""><font><font>Hinweis</font></font></strong><font><font><span> </span>: Die Ausrichtungseigenschaften in Flexbox wurden in eine eigene Spezifikation eingefügt -<span> </span></font></font><a class="external" href="https://www.w3.org/TR/css-align-3/" rel="noopener" style=""><font><font>CSS Box Alignment Level 3</font></font></a><font><font><span> </span>.<span> </span></font><font>Es wird erwartet, dass diese Spezifikation letztendlich die in Flexbox Level One definierten Eigenschaften ersetzt.</font></font></p>
+</div>
+
+<h2 id="Die_Querachse" style=""><font><font>Die Querachse</font></font></h2>
+
+<p style=""><font><font>Die<span> </span></font><font>Eigenschaften<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace;'>align-items</code><font><font>und<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace;'>align-self</code><font><font>steuern die Ausrichtung unserer Flex-Elemente auf der Querachse in den Spalten if<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace;'>flex-direction</code><font><font>is<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace;'>row</code><font><font>und entlang der Zeile if<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace;'>flex-direction</code><font><font>is<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace;'>column</code><font><font>.</font></font></p>
+
+<p style=""><font><font>Wir verwenden die Achsenausrichtung im einfachsten Flex-Beispiel.<span> </span></font><font>Wenn wir<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace;'>display: flex</code><font><font>einem Container<span> </span></font><font>hinzufügen<span> </span></font><font>, werden alle untergeordneten Elemente zu flexiblen Elementen, die in einer Reihe angeordnet sind.<span> </span></font><font>Sie werden alle so groß wie der höchste Gegenstand, da dieser Gegenstand die Höhe der Gegenstände auf der Querachse definiert.<span> </span></font><font>Wenn für Ihren Flex-Container eine Höhe festgelegt ist, werden die Elemente auf diese Höhe gedehnt, unabhängig davon, wie viel Inhalt sich im Element befindet.</font></font></p>
+
+<p><img alt="Three items, one with additional text causing it to be taller than the others." src="https://mdn.mozillademos.org/files/15628/align2.png" style="display: block; height: 131px; margin: 0px auto; width: 509px;"></p>
+
+<p><img alt="Three items stretched to 200 pixels tall" src="https://mdn.mozillademos.org/files/15629/align3.png" style="display: block; height: 207px; margin: 0px auto; width: 637px;"></p>
+
+<p>The reason the items become the same height is that the initial value of <code>align-items</code>, the property that controls alignment on the cross axis, is set to <code>stretch</code>.</p>
+
+<p>We can use other values to control how the items align:</p>
+
+<ul>
+ <li><code>align-items: flex-start</code></li>
+ <li><code>align-items: flex-end</code></li>
+ <li><code>align-items: center</code></li>
+ <li><code>align-items: stretch</code></li>
+ <li><code>align-items: baseline</code></li>
+</ul>
+
+<p>In the live example below, the value of <code>align-items</code> is <code>stretch</code>. Try the other values and see how all of the items align against each other in the flex container.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-items.html", '100%', 520)}} </p>
+
+<h3 id="Aligning_one_item_with_align-self">Aligning one item with <code>align-self</code></h3>
+
+<p>The <code>align-items</code> property sets the <code>align-self</code> property on all of the flex items as a group. This means you can explicitly declare the <code>align-self</code> property to target a single item. The <code>align-self</code> property accepts all of the same values as <code>align-items</code> plus a value of <code>auto</code>, which will reset the value to that which is defined on the flex container.</p>
+
+<p>In this next live example, the flex container has <code>align-items: flex-start</code>, which means the items are all aligned to the start of the cross axis. I have targeted the first item using a <code>first-child</code> selector and set that item to <code>align-self: stretch</code>; another item has been selected using its class of <code>selected</code> and given <code>align-self: center</code>. You can change the value of <code>align-items</code> or change the values of <code>align-self</code> on the individual items to see how this works.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self.html", '100%', 650)}}</p>
+
+<h3 id="Changing_the_main_axis">Changing the main axis</h3>
+
+<p>So far we have looked at the behaviour when our <code>flex-direction</code> is <code>row</code>, and while working in a language written top to bottom. This means that the main axis runs along the row horizontally, and our cross axis alignment moves the items up and down.</p>
+
+<p><img alt="Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the vertical axis." src="https://mdn.mozillademos.org/files/15630/align4.png" style="display: block; height: 204px; margin: 0px auto; width: 671px;"></p>
+
+<p>If we change our <code>flex-direction</code> to column, <code>align-items</code> and <code>align-self</code> will align the items to the left and right.</p>
+
+<p><img alt="Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the horizontal axis." src="https://mdn.mozillademos.org/files/15631/align5.png" style="display: block; height: 239px; margin: 0px auto; width: 687px;"></p>
+
+<p>You can try this out in the example below, which has a flex container with <code>flex-direction: column</code> yet otherwise is exactly the same as the previous example.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self-column.html", '100%', 730)}} </p>
+
+<h2 id="Aligning_content_on_the_cross_axis_—_the_align-content_property">Aligning content on the cross axis — the align-content property</h2>
+
+<p>So far we have been aligning the items, or an individual item inside the area defined by the flex-container. If you have a wrapped multiple-line flex container then you might also want to use the <code>align-content</code> property to control the distribution of space between the rows. In the specification this is described as <a href="https://drafts.csswg.org/css-flexbox/#align-content-property">packing flex lines</a>.</p>
+
+<p>For <code>align-content</code> to work you need more height in your flex container than is required to display the items. It then works on all the items as a set, and dictates what happens with that free space, and the alignment of the entire set of items within it.</p>
+
+<p>The <code>align-content</code> property takes the following values:</p>
+
+<ul>
+ <li><code>align-content: flex-start</code></li>
+ <li><code>align-content: flex-end</code></li>
+ <li><code>align-content: center</code></li>
+ <li><code>align-content: space-between</code></li>
+ <li><code>align-content: space-around</code></li>
+ <li><code>align-content: stretch</code></li>
+ <li><code>align-content: space-evenly</code> (not defined in the Flexbox specification)</li>
+</ul>
+
+<p>In the live example below, the flex container has a height of 400 pixels, which is more than needed to display our items. The value of <code>align-content</code> is <code>space-between</code>, which means that the available space is shared out <em>between</em> the flex lines, which are placed flush with the start and end of the container on the cross axis.</p>
+
+<p>Try out the other values to see how the <code>align-content</code> property works.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content.html", '100%', 850)}} </p>
+
+<p>Once again we can switch our <code>flex-direction</code> to <code>column</code> in order to see how this property behaves when we are working by column. As before, we need enough space in the cross axis to have some free space after displaying all of the items.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}} </p>
+
+<div class="note">
+<p><strong>Note</strong>: the value <code>space-evenly</code> is not defined in the flexbox specification and is a later addition to the Box Alignment specification. Browser support for this value is not as good as that of the values defined in the flexbox spec.</p>
+</div>
+
+<p>See the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content">documentation for <code>justify-content</code> on MDN</a> for more details on all of these values and browser support.</p>
+
+<h2 id="Aligning_content_on_the_main_axis">Aligning content on the main axis</h2>
+
+<p>Now that we have seen how alignment works on the cross axis, we can take a look at the main axis. Here we only have one property available to us — <code>justify-content</code>. This is because we are only dealing with items as a group on the main axis. With <code>justify-content</code> we control what happens with available space, should there be more space than is needed to display the items.</p>
+
+<p>In our initial example with <code>display: flex</code> on the container, the items display as a row and all line up at the start of the container. This is due to the initial value of <code>justify-content</code> being <code>flex-start</code>. Any available space is placed at the end of the items.</p>
+
+<p><img alt="Three items, each 100 pixels wide in a 500 pixel container. The available space is at the end of the items." src="https://mdn.mozillademos.org/files/15632/align6.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p>
+
+<p>The <code>justify-content</code> property accepts the same values as <code>align-content</code>.</p>
+
+<ul>
+ <li><code>justify-content: flex-start</code></li>
+ <li><code>justify-content: flex-end</code></li>
+ <li><code>justify-content: center</code></li>
+ <li><code>justify-content: space-between</code></li>
+ <li><code>justify-content: space-around</code></li>
+ <li><code>justify-content: space-evenly</code> (not defined in the Flexbox specification)</li>
+</ul>
+
+<p>In the example below, the value of <code>justify-content</code> is <code>space-between</code>. The available space after displaying the items is distributed between the items. The left and right item line up flush with the start and end.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content.html", '100%', 480)}} </p>
+
+<p>If the main axis is in the block direction because <code>flex-direction</code> is set to <code>column</code>, then <code>justify-content</code> will distribute space between items in that dimension as long as there is space in the flex container to distribute.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-column.html", '100%', 880)}} </p>
+
+<h3 id="Alignment_and_Writing_Modes">Alignment and Writing Modes</h3>
+
+<p>Remember that with all of these alignment methods, the values of <code>flex-start</code> and <code>flex-end</code> are writing mode-aware. If the value of <code>justify-content</code> is <code>start</code> and the writing mode is left-to-right as in English, the items will line up starting at the left side of the container.</p>
+
+<p><img alt="Three items lined up on the left" src="https://mdn.mozillademos.org/files/15638/Basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p>However if the writing mode is right-to-left as in Arabic, the items will line up starting at the right side of the container.</p>
+
+<p><img alt="Three items lined up from the right" src="https://mdn.mozillademos.org/files/15639/Basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p>
+
+<p>The live example below has the <code>direction</code> property set to <code>rtl</code> to force a right-to-left flow for our items. You can remove this, or change the values of <code>justify-content</code> to see how flexbox behaves when the start of the inline direction is on the right.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-writing-mode.html", '100%', 440)}} </p>
+
+<h2 id="Alignment_and_flex-direction">Alignment and flex-direction</h2>
+
+<p>The start line will also change if you change the <code>flex-direction</code> property — for example using <code>row-reverse</code> instead of <code>row</code>.</p>
+
+<p>In this next example I have items laid out with <code>flex-direction: row-reverse</code> and <code>justify-content: flex-end</code>. In a left to right language the items all line up on the left. Try changing <code>flex-direction: row-reverse</code> to <code>flex-direction: row</code>. You will see that the items now move to the right hand side.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-reverse.html", '100%', 440)}} </p>
+
+<p>While this may all seem a little confusing, the rule to remember is that unless you do something to change it, flex items lay themselves out in the direction that words are laid out in the language of your document along the inline, row axis. <code>flex-start</code> will be where the start of a sentence of text would begin.</p>
+
+<p><img alt="Diagram showing start on the left and end on the right." src="https://mdn.mozillademos.org/files/15634/align8.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p>You can switch them to display in the block direction for the language of your document by selecting <code>flex-direction: column</code>. Then <code>flex-start</code> will then be where the top of your first paragraph of text would start.</p>
+
+<p><img alt="Diagram showing start at the top and end at the bottom." src="https://mdn.mozillademos.org/files/15636/align10.png" style="display: block; height: 273px; margin: 0px auto; width: 709px;"></p>
+
+<p>If you change flex-direction to one of the reverse values, then they will lay themselves out from the end axis and in the reverse order to the way words are written in the language of your document. <code>flex-start</code> will then change to the end of that axis — so to the location where your lines would wrap if working in rows, or at the end of your last paragraph of text in the block direction.</p>
+
+<p><img alt="Diagram showing start on the right and end on the left." src="https://mdn.mozillademos.org/files/15635/align9.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p><img alt="Diagram showing end at the top and start at the bottom" src="https://mdn.mozillademos.org/files/15637/align11.png" style="display: block; height: 273px; margin: 0px auto; width: 709px;"></p>
+
+<h2 id="Using_auto_margins_for_main_axis_alignment">Using auto margins for main axis alignment</h2>
+
+<p>We don’t have a <code>justify-items</code> or <code>justify-self</code> property available to us on the main axis as our items are treated as a group on that axis. However it is possible to do some individual alignment in order to separate an item or a group of items from others by using auto margins along with flexbox.</p>
+
+<p>A common pattern is a navigation bar where some key items are aligned to the right, with the main group on the left. You might think that this should be a use case for a <code>justify-self</code> property, however consider the image below. I have three items on one side and two on the other. If I were able to use <code>justify-self</code> on item <em>d</em>, it would also change the alignment of item <em>e</em> that follows, which may or may not be my intention.</p>
+
+<p><img alt="Five items, in two groups. Three on the left and two on the right." src="https://mdn.mozillademos.org/files/15633/align7.png" style="display: block; height: 84px; margin: 0px auto; width: 645px;"></p>
+
+<p>Instead we can target item 4 and separate it from the first three items by giving it a <code>margin-left</code> value of <code>auto</code>. Auto margins will take up all of the space that they can in their axis — it is how centering a block with margin auto left and right works. Each side tries to take as much space as it can, and so the block is pushed into the middle.</p>
+
+<p>In this live example, I have flex items arranged simply into a row with the basic flex values, and the class <code>push</code> has <code>margin-left: auto</code>. You can try removing this, or adding the class to another item to see how it works.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/auto-margins.html", '100%', 470)}} </p>
+
+<h2 id="Future_alignment_features_for_Flexbox">Future alignment features for Flexbox</h2>
+
+<p>At the beginning of this article I explained that the alignment properties currently contained in the Level 1 flexbox specification are also included in Box Alignment Level 3, which may well extend these properties and values in the future. We have already seen one place where this has happened, with the introduction of the <code>space-evenly</code> value for <code>align-content</code> and <code>justify-content</code> properties.</p>
+
+<p>The Box Alignment module also includes other methods of creating space between items, such as the <code>column-gap</code> and <code>row-gap</code> feature as seen in <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a>. The inclusion of these properties in Box Alignment means that in future we should be able to use <code>column-gap</code> and <code>row-gap</code> in flex layouts too, and in Firefox 63 you will find the first browser implementation of the gap properties in flex layout.</p>
+
+<p>My suggestion when exploring flexbox alignment in depth is to do so alongside looking at alignment in Grid Layout. Both specifications use the alignment properties as detailed in the Box Alignment specification. You can see how these properties behave when working with a grid in the MDN article <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box Alignment in Grid Layout</a>, and I have also compared how alignment works in these specifications in my <a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Box Alignment Cheatsheet</a>.</p>
+
+<h2 id="See_Also">See Also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">Box Alignment in Flexbox</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout">Box Alignment in Grid Layout</a></li>
+</ul>
diff --git a/files/de/web/css/css_flexible_box_layout/flex_elemente_sortieren/index.html b/files/de/web/css/css_flexible_box_layout/flex_elemente_sortieren/index.html
new file mode 100644
index 0000000000..86354499d2
--- /dev/null
+++ b/files/de/web/css/css_flexible_box_layout/flex_elemente_sortieren/index.html
@@ -0,0 +1,138 @@
+---
+title: Flex Elemente Sortieren
+slug: Web/CSS/CSS_Flexible_Box_Layout/Flex_Elemente_Sortieren
+tags:
+  - Barrierefreiheit
+  - CSS
+  - Flex
+  - Reihenfolge
+  - Richtung
+  - flexbox
+  - umgekehrt
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items
+---
+<p>{{CSSRef}}</p>
+
+<p>Neue Layout-Methoden wie z.B Flexbox und Grid geben die Möglichkeit, die Reihenfolge dessen Inhaltes zu verändern. Dieser Artikel handelt von den verschiedenen Möglichkeiten wie man die visuelle Reihenfolge des Inhalts, mithilfe von Flexbox, ändern kann. Dazu werden wir uns das Thema aus der perspektive der Barrierefreiheit betrachten.</p>
+
+<h2 id="Die_Anzeige_der_Elemente_umkehren">Die Anzeige der Elemente umkehren</h2>
+
+<p>Die {{cssxref("flex-direction")}} Eigenschaft kann einer der 4 folgenden Werte bekommen:</p>
+
+<ul>
+ <li><code>row // Reihe</code></li>
+ <li><code>column // Spalte</code></li>
+ <li><code>row-reverse // Reihe-umgekehrt</code></li>
+ <li><code>column-reverse // Spalte-umgekehrt</code></li>
+</ul>
+
+<p>Bei den ersten 2 Werten, bleibt die Reihenfolge wie sie auch im Quelltext angegeben ist und zeigt diese nacheinander von der Startlinie an an. Die Elemente werden dabei entweder in einer Reihe (<code>row</code>), oder in einer Spalte (<code>column</code>) angezeigt.<br>
+ <img alt="The items are displayed in a row starting on the left." src="https://mdn.mozillademos.org/files/15649/Basics1.png" style="display: flex; height: 152px; margin: 0px auto; width: 522px;"></p>
+
+<p><img alt="The items are displayed as a column starting from the top " src="https://mdn.mozillademos.org/files/15650/align10.png" style="display: flex; height: 273px; margin: 0px auto; width: 709px;"></p>
+
+<p>Die letzten beiden Werte, kehren die Reihenfolge der Elemente um, indem Sie die Start und End-Linien wechseln</p>
+
+<p><img alt="The items are displayed in reverse order starting on the right-hand line." src="https://mdn.mozillademos.org/files/15651/align9.png" style="display: flex; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p><img alt="The items are displayed in a column in reverse order starting at the bottom line." src="https://mdn.mozillademos.org/files/15652/align11.png" style="display: flex; height: 273px; margin: 0px auto; width: 709px;"></p>
+
+<p>Denk dran das der Start der Linie mit den Schreibmodis verbunden ist. Das Reihenbeispiel oben demonstriert wie <code>row</code> und <code>row-reverse</code> in einer links-zu-rechts Sprache wie z.B. Deutsch funktioniert. Wenn du aber in einer rechts-zu-links Sprache wie z.B. Arabisch arbeitest dann würde <code>row</code> rechts starten und <code>row-reverse</code> links.</p>
+
+<p><img alt="Flex containers with Arabic letters showing how row starts from the right hand side and row-reverse from the left." src="https://mdn.mozillademos.org/files/15647/order-rtl.png" style="display: flex; height: 302px; margin: 0px auto; width: 528px;"></p>
+
+<p>Das kann zwar nach einer schönen Möglichkeit aussehen, Elemente in einer umgekehrten Reihenfolge anzuzeigen, es sollte einem jedoch bewusst sein, das elemente nur <em>visuell</em> in einer umgekehrten Reihenfolge angezeigt werden. Die Spezifikation sagt diesbezüglich folgendes:</p>
+
+<blockquote>
+<p>“Hinweis: Die Umsortierungs-möglichkeiten betreffen absichtlich nur die visuelle Ansicht und lassen dabei Sprech- und Navigationsbasierte Reihenfolgen außen vor. Das ermöglicht Autoren die Möglichkeit die visuelle Ansicht zu ändern, während sie die Quellen-Reihenfolge in intakt hält für nicht-CSS UAs und für lineare Modelle, wie z.B. Sprachmodelle und Sequentielle Navigationen” - <a href="https://www.w3.org/TR/css-flexbox-1/#flow-order">Reigenfolge und Orientation</a></p>
+</blockquote>
+
+<p>Wenn die Elemente Hyperlinks sind, oder irgendwelche anderen Elemente zu denen der User hintabben kann, dann wäre die tab-reihenfolge die selbe, wie sie im Dokumenten-Quellcode vorkommt und nicht wie sie visuell angezeigt wird.</p>
+
+<p>Wenn man einen <code>reverse</code> Wert benuzt, oder in irgendeiner Weise die Reihenfolge der Elemente beeinflusst, dann musst du schauen, ob man nicht doch die logische Reihenfolge im Quelltext ändert. Die Spezifikitation fährt fort mit einer Warnung, das man umsortierung nicht nutzen soll um Probleme im Quellcode zu fixen.</p>
+
+<blockquote>
+<p>“Autoren sollten die Reihenfolgen- oder Umgekehrtwerte der flex-flow/flex-direction Eigenschaften nicht als Ersatz für die tatsächliche Änderung des Dokumentes nutzen, da das die Barrierefreiheit des Dokumentes einschränkt.”</p>
+</blockquote>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Firefox hatte ein paar Jahre lang einen Bug, bei dem es versucht hatte der visuellen Reihenfolge und nicht der Quelltext-Reihenfolge zu folgen, daruch verhielt es sich anders als andere Browser. Dieser Bug ist mittlerweile gefixt. Man sollte immer Quelltext-Reihenfolge als die logische Reihenfolge für das Dokument benutzen, da alle aktuellen User Agents diesem Schema folgen.</p>
+</div>
+
+<p>In dem Live-Beispiel unten habe ich einen focus-style hinzugefügt, damit man, wenn man mit tab von link zu link wechselt, sieht welcher link markiert wird. Wenn man die Reihenfolge mit <code>flex-direction</code> wechselst, dann sieht man wie die tab Reihenfolge immernoch der Reihenfolge der Elemente im Quelltext folgen.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/order/order.html", '100%', 500)}}</p>
+
+<p>Auf die gleiche Weise, wie das ändern des Wertes <code>flex-direction</code> nicht die Reihenfolge ändert, in denen zu Elementen navigiert werden, ändert es auch nicht die Reihenfolge in denen die Elemente gemalt werden. Es ist nur eine visuelle umkehrung der Elemente.</p>
+
+<h2 id="Die_order_Eigenschaft">Die order Eigenschaft</h2>
+
+<p>Zusätzlich zum umkehren der Reihenfolge, in welcher flex-elemente visuell dargestellt werden, kann man die Elemente individuell ansprechen und die visuelle Reihenfolge mit der {{cssxref("order")}} Eigenschaft.</p>
+
+<p>Die <code>order</code> Eigenschaft legt die Elemente in Ordnungsgruppen. Das heißt, das den Elementen eine Zahl zugewiesen werden, welche die dazugehörige Gruppe repräsentieren. Danach werden die Elemente, in die Reihenfolge gebracht, wie die Zahlen es vorgeben, der kleinste Wert zuerst. Wenn mehr als ein Element, den selben Wert besitzen, dann werden die Elemente innerhalb ihrer Gruppe so ausgelegt, wie sie im Quelltext vorkommen.</p>
+
+<p>Beispiel: Ich habe 5 flex-items und weise <code>order</code> Eigenschaften folgendermaßen zu:</p>
+
+<ul>
+ <li>Quellelement 1: <code>order: 2</code></li>
+ <li>Quellelement 2: <code>order: 3</code></li>
+ <li>Quellelement 3: <code>order: 1</code></li>
+ <li>Quellelement 4: <code>order: 3</code></li>
+ <li>Quellelement 5: <code>order: 1</code></li>
+</ul>
+
+<p>Diese Elemente werden dann wie folgt dargestellt:</p>
+
+<ul>
+ <li>Quellelement 3: <code>order: 1</code></li>
+ <li>Quellelement 5: <code>order: 1</code></li>
+ <li>Quellelement 1: <code>order: 2</code></li>
+ <li>Quellelement 2: <code>order: 3</code></li>
+ <li>Quellelement 4: <code>order: 3</code></li>
+</ul>
+
+<p><img alt="Items have a number showing their source order which has been rearranged." src="https://mdn.mozillademos.org/files/15653/order-property.png" style="display: flex; height: 100px; margin: 0px auto; width: 634px;"></p>
+
+<p>Um zu sehen, wie das die Reihenfolge beeinflusst, kann man im Live-Beispiel unten die Werte für <code>order</code> ändern. Man kann auch <code>flex-direction</code> zu <code>row-reverse</code> wechseln und sehen was passiert — die Start Linie ist getauscht, damit startet das sortieren von der anderen Seite.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/order/flex-direction.html", '100%', 440)}}</p>
+
+<p>Flex-items haben einen natürlichen <code>order</code> Wert von <code>0</code>, deshalb werden alle Elemente mit einem Zahlen-Wert größer als 0 nach Elementen angezeigt, welche noch keinen Expliziten <code>order</code> Wert erhalten haben.</p>
+
+<p>Man kann auch negative Zahlenwerte verwenden, das ist ziemlich hilfreich. Wenn man ein Element als erstes anzeigen lassen will, aber die Reihenfolge aller anderen Elemente so lassen will wie sie sind, dann kann man diesem Element eine Reihenfolge von <code>-1</code> geben. Da das kleiner als 0 ist, wird dieses Element als erstes angezeigt.</p>
+
+<p>Im Live-Code Beispiel unten habe Ich Elemente mithilfe einer Flexbox ausgelegt. Wenn man ändert welches Element die Klasse <code>active</code> besitzt, dann kann man ändern, welches Element als erstes angezeigt werden soll, mit allen anderen Elementen darunter.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/order/negative-order.html", '100%', 520)}}</p>
+
+<p>Die Elemente werden anhand der, wie es in der Spezifikation beschrieben ist, <em>order-modified- document order</em> angezeigt. Der Wert der order-Eigenschaft wird berücksichtigt, bevor die Elemente angezeigt werden</p>
+
+<p>Order ändert auch die Malreihenfolge der Elemente; Elemente mit einem geringerem <code>order</code> Wert, werden vor den Elementen mit einem höherem <code>order</code> Wert gemalt.</p>
+
+<h2 id="Die_order_Eigenschaft_und_Barrierefreiheit">Die order Eigenschaft und Barrierefreiheit</h2>
+
+<p>Wenn man die <code>order</code> Eigenschaft nutzt, dann hat man exakt die gleichen Implikationen, wenn es ums Thema Barrierefreiheit geht, wie beim ändern der <code>flex-direction</code>. Die Eigenschaft <code>order</code> ändert die Reihenfolge, in der Elemente gemalt werden und die Reihenfolge in der diese Elemente visuell auftauchen. Es ändert nichts an der sequentiellen Navigationsreihenfolge der Elemente. Deshalb könnte es passieren, dass wenn ein Benutzer auf einer Website durch die Zeilen tabbt, das dieser in einem ziemlich verwirrendem Weg durch das Layout springt.</p>
+
+<p>Wenn man in irgendeinem Live-Beispiel auf dieser Seite hin und her tabbt, dann kann man sehen, wie <code>order</code> das potential hat, eine seltsame Erfahrung für alle Benutzer zu schaffen, die nicht ein Zeiger-Gerät verwenden. Um mehr über dieses Thema zu erfahren, empfehle Ich folgende Ressourcen:</p>
+
+<ul>
+ <li><a href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/">Flexbox and the keyboard navigation disconnect</a></li>
+ <li><a href="http://adrianroselli.com/2015/10/html-source-order-vs-css-display-order.html">HTML Source Order vs CSS Display Order</a></li>
+ <li><a href="https://alastairc.uk/2017/06/the-responsive-order-conflict/">The Responsive Order Conflict for Keyboard Focus</a></li>
+</ul>
+
+<h2 id="Anwendungsbeispiele_für_order">Anwendungsbeispiele für order</h2>
+
+<p>Manchmal gibt es Anwendungsorte, an denen es hilfreich ist, das die logische und visuelle Reihenfolge der Elemente voneinander getrennt sind. Vorsichtig eingesetzt ermöglicht die <code>order</code> Eigenschaft hilfreiche Lösungen für verbreitete Problemmuster.</p>
+
+<p>Man hat z.B. ein Design einer Karte, welche Neuigkeiten anzeigt. Die Überschrift der Neuigkeiten ist das Schlüsselelement und wäre das Element, zu dem der Benutzer springen würde wenn er durch die verschiedenen Überschriften tabben würde. Die Karte hat dazu auch noch ein Datum; das fertige Design sieht dann ungefähr so aus:</p>
+
+<p><img alt="A design component with a date, then heading and then content." src="https://mdn.mozillademos.org/files/15648/order-card.png" style="height: 400px; width: 618px;"></p>
+
+<p>Visually the date appears above the heading, im Quelltext. Jedoch, wenn die Karte von einem Programm vorgelesen wird, wäre es mir lieber, wenn der Titel als erstes vorgelesen wird und danach das Veröffentlichungsdatum. Das geht ganz einfach wenn man die <code>order</code> Eigenschaft nutzt.</p>
+
+<p>Die Karte wird unser flex-container sein, mit <code>flex-direction</code> auf column. Dann gebe ich dem Datum die <code>order:</code><code>-1</code>. Das setzt es über die Überschrift.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/order/usecase-order.html", '100%', 730)}}</p>
+
+<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Diese kleinen Veränderungen sind die Art der Fälle in denen die </span></font>order</code> Eigenschaft Sinn macht. Behalte die logische Abfolge als Lese und Tab Reihenfolge des Dokumentes und pflege das in einer Art und Weise, das es Barrierefrei strukturiert bleibt. Danach nutze <code>order</code> lediglich zur Design-Optimierung. Wenn man das tut, sollte man darauf achten, das man die Reihenfolge von Elementen, durch die der Benutzer durchtabbt, nicht durcheinander bringt. Du wirst schnell bemerken, ob deine Entwicklungs-Entscheidungen es für den Benutzer schwierig machen.</p>
diff --git a/files/de/web/css/css_flexible_box_layout/grundlegende_konzepte_der_flexbox/index.html b/files/de/web/css/css_flexible_box_layout/grundlegende_konzepte_der_flexbox/index.html
new file mode 100644
index 0000000000..81b1db9c4b
--- /dev/null
+++ b/files/de/web/css/css_flexible_box_layout/grundlegende_konzepte_der_flexbox/index.html
@@ -0,0 +1,230 @@
+---
+title: Grundlegende Konzepte der Flexbox
+slug: Web/CSS/CSS_Flexible_Box_Layout/Grundlegende_Konzepte_der_Flexbox
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
+---
+<div> </div>
+
+<div>{{CSSRef}}</div>
+
+<p class="summary">Das Flexible Box Modul, üblicherweise als Flexbox bezeichnet, wurde als ein eindimensionales Layoutmodell und als eine Methode entwickelt, die eine Platzverteilung zwischen Elementen in einer Schnittstelle und leistungsstarke Ausrichtungsmöglichkeiten bietet. Dieser Artikel gibt einen Überblick über die Hauptmerkmale von Flexbox, die wir im Folgenden näher erläutern werden.</p>
+
+<p>Wenn wir Flexbox als eindimensional bezeichnen, beschreiben wir die Tatsache, dass Flexbox sich mit dem Layout in einer Dimension zu einem Zeitpunkt beschäftigt - entweder als eine Zeile oder als eine Spalte. Dies kann mit dem zweidimensionalen Modell von <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a>, das Spalten und Zeilen zusammen steuert, kontrastiert werden.</p>
+
+<h2 id="Die_zwei_Achsen_der_Flexbox">Die zwei Achsen der Flexbox</h2>
+
+<p>Bei der Arbeit mit Flexbox muss man in zwei Achsen denken - der Hauptachse und der Querachse. Die Hauptachse wird durch die Eigenschaft {{cssxref("flex-direction")}} definiert, und die Querachse verläuft senkrecht dazu. Alles, was wir mit flexbox machen, bezieht sich auf diese Achsen, so dass es sich lohnt zu verstehen, wie sie von Anfang an funktionieren.</p>
+
+<h3 id="Die_Hauptachse">Die Hauptachse</h3>
+
+<p>Die Hauptachse wird durch <code>flex-direction</code> definiert, die vier mögliche Werte hat:</p>
+
+<ul>
+ <li><code>row</code></li>
+ <li><code>row-reverse</code></li>
+ <li><code>column</code></li>
+ <li><code>column-reverse</code></li>
+</ul>
+
+<p>Wenn Sie <code>row</code> oder <code>row-reverse</code> wählen, läuft Ihre Hauptachse entlang der Zeile in <strong>Zeilenrichtung</strong>.</p>
+
+<p><img alt="If flex-direction is set to row the main axis runs along the row in the inline direction." src="https://mdn.mozillademos.org/files/15614/Basics1.png" style="display: block; height: 152px; margin: 0px auto; width: 522px;"></p>
+
+<p>Wählen Sie <code>column</code> oder <code>column-reverse</code> und Ihre Hauptachse läuft von oben nach unten - in <strong>Blockrichtung</strong>.</p>
+
+<p><img alt="If flex-direction is set to column the main axis runs in the block direction." src="https://mdn.mozillademos.org/files/15615/Basics2.png" style="display: block; height: 227px; margin: 0px auto; width: 709px;"></p>
+
+<h3 id="Die_Querachse">Die Querachse</h3>
+
+<p>Die Querachse (cross axis) verläuft senkrecht zur Hauptachse, d.h. wenn Ihre <code>flex-direction</code> (Hauptachse) auf <code>row</code> oder <code>row-reverse</code> eingestellt ist, läuft die Querachse die Spalten hinunter.</p>
+
+<p><img alt="If flex-direction is set to row then the cross axis runs in the block direction." src="https://mdn.mozillademos.org/files/15616/Basics3.png" style="display: block; height: 125px; margin: 0px auto; width: 666px;"></p>
+
+<p>Wenn Ihre Hauptachse <code>column</code> oder <code>column-reverse</code> ist, dann verläuft die Querachse entlang der Zeilen.</p>
+
+<p><img alt="If flex-direction is set to column then the cross axis runs in the inline direction." src="https://mdn.mozillademos.org/files/15617/Basics4.png" style="display: block; height: 244px; margin: 0px auto; width: 523px;"></p>
+
+<p>Es ist wichtig zu verstehen, welche Achse die richtige ist, wenn wir uns mit der Ausrichtung und Justierung von Flex-Elementen befassen; Flexbox bietet Eigenschaften, die den Inhalt entlang der einen oder anderen Achse ausrichtet und justiert.</p>
+
+<h2 id="Start-_und_Endzeilen">Start- und Endzeilen</h2>
+
+<p>Ein weiterer wichtiger Bereich des Verständnisses ist, wie Flexbox keine Annahmen über den Schreibmodus des Dokuments macht. In der Vergangenheit wurde CSS stark in Richtung horizontale und links-nach-rechts-Schreibweise ausgerichtet. Moderne Layoutmethoden umfassen den Bereich der Schreibmodi und so gehen wir nicht mehr davon aus, dass eine Textzeile oben links in einem Dokument beginnt und nach rechts verläuft, wobei neue Zeilen untereinander erscheinen.</p>
+
+<p>Sie können mehr über die Beziehung zwischen Flexbox und der Writing Modes Spezifikation in einem späteren Artikel lesen, aber die folgende Beschreibung soll helfen zu erklären, warum wir nicht über links und rechts und oben und unten sprechen, wenn wir die Richtung beschreiben, in die unsere Flex Elemente fließen.</p>
+
+<p>Wenn die <code>flex-direction</code> <code>row</code> ist und ich in Englisch arbeite, dann ist die Anfangskante der Hauptachse links, die Endkante rechts.</p>
+
+<p><img alt="Working in English the start edge is on the left." src="https://mdn.mozillademos.org/files/15618/Basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p>Wenn ich auf Arabisch arbeiten würde, dann wäre die Anfangskante meiner Hauptachse rechts und die Endkante links.</p>
+
+<p><img alt="The start edge in a RTL language is on the right." src="https://mdn.mozillademos.org/files/15619/Basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p>
+
+<p>In beiden Fällen befindet sich die Anfangskante der Querachse oben am Flexcontainer und die Endkante unten, da beide Sprachen einen horizontalen Schreibmodus haben.</p>
+
+<p>Nach einer Weile wird das Nachdenken über Anfang und Ende statt links und rechts natürlich werden, und Ihnen nützlich sein, wenn Sie mit anderen Layout-Methoden arbeiten, wie CSS-Grid-Layout, die den gleichen Mustern folgen.</p>
+
+<h2 id="Der_Flex_Container">Der Flex Container</h2>
+
+<p>Ein mit Flexbox angelegter Bereich eines Dokuments wird als <strong>Flex Container</strong> bezeichnet. Um einen Flex Container zu erstellen, setzen wir den Wert der Eigenschaft {{cssxref("display")}} des Bereichscontainers auf <code>flex</code> oder <code>inline-flex</code>. Sobald wir dies tun, werden die direkten Kinder dieses Containers zu flexiblen Elementen. Wie bei allen Eigenschaften in CSS sind einige Initialwerte definiert, so dass sich beim Erstellen eines Flex Containers alle enthaltenen Flex Items wie folgt verhalten.</p>
+
+<ul>
+ <li>Elemente werden in einer Zeile angezeigt (die Standardeinstellung der Eigenschaft <code>flex-direction</code> ist <code>row</code>).</li>
+ <li>Die Positionen beginnen an der Startkante der Hauptachse.</li>
+ <li>Die Elemente dehnen sich nicht auf der Hauptdimension aus, sondern können schrumpfen.</li>
+ <li>Die {{cssxref("flex-basis")}} Eigenschaft wird auf <code>auto </code>gesetzt.</li>
+ <li>Die{{cssxref("flex-wrap")}} Eigenschaft wird auf <code>nowrap </code>gesetzt.</li>
+</ul>
+
+<p>Dies hat zur Folge, dass Ihre Elemente in einer Reihe angeordnet werden, wobei die Größe des Inhalts als Größe in der Hauptachse verwendet wird. Wenn es mehr Elemente gibt, als in den Container passen, werden sie nicht eingepackt, sondern überlaufen. Wenn einige Elemente größer als andere sind, dehnen sich alle Elemente entlang der Querachse aus, um ihre volle Größe zu erreichen.</p>
+
+<p>Wie das aussieht, sehen Sie im folgenden Live-Beispiel. Versuchen Sie, die Elemente zu bearbeiten oder zusätzliche Elemente hinzuzufügen, um das anfängliche Verhalten von Flexbox zu testen.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}} </p>
+
+<h3 id="Wechsel_der_flex-direction">Wechsel der flex-direction</h3>
+
+<p>Das Hinzufügen der Eigenschaft {{cssxref("flex-direction")}} zum Flex Container erlaubt es uns, die Richtung zu ändern, in der unsere Flex Elemente angezeigt werden. Einstellung der <code>flex-direction</code>: <code>row-reverse</code> behält die Anzeige entlang der Zeile bei, jedoch werden die Start- und Endlinien umgeschaltet.</p>
+
+<p>Wenn wir die <code>flex-direction</code> in eine Spalte (<code>column)</code>ändern, schaltet die Hauptachse um und unsere Elemente werden nun in einer Spalte angezeigt. Setzen Sie <code>column-reverse</code> und die Start- und Endzeilen werden wieder umgeschaltet.</p>
+
+<p>Das folgende Live-Beispiel hat die <code>flex-direction</code> auf <code>row-reverse</code> eingestellt. Versuchen Sie die anderen Werte - <code>row</code>, <code>column</code> and <code>column-reverse</code> - um zu sehen, was mit dem Inhalt passiert.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}</p>
+
+<h2 id="Multi-line_flex_containers_with_flex-wrap">Multi-line flex containers with flex-wrap</h2>
+
+<p>While flexbox is a one dimensional model, it is possible to cause our flex items to wrap onto multiple lines. In doing so, you should consider each line as a new flex container. Any space distribution will happen across that line, without reference to the lines either side.</p>
+
+<p>To cause wrapping behaviour add the property {{cssxref("flex-wrap")}} with a value of <code>wrap</code>. Now, should your items be too large to all display in one line, they will wrap onto another line. The live sample below contains items that have been given a width, the total width of the items being too wide for the flex container. As <code>flex-wrap</code> is set to <code>wrap</code>, the items wrap. Set it to <code>nowrap</code>, which is also the initial value, and they will instead shrink to fit the container because they are using initial flexbox values that allows items to shrink. Using <code>nowrap</code> would cause an overflow if the items were not able to shrink, or could not shrink small enough to fit.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}</p>
+
+<p>Find out more about wrapping flex items in the guide <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Mastering Wrapping of Flex Items</a>.</p>
+
+<h2 id="The_flex-flow_shorthand">The flex-flow shorthand</h2>
+
+<p>You can combine the two properties <code>flex-direction</code> and <code>flex-wrap</code> into the {{cssxref("flex-flow")}} shorthand. The first value specified is <code>flex-direction</code> and the second value is <code>flex-wrap</code>.</p>
+
+<p>In the live example below try changing the first value to one of the allowable values for <code>flex-direction</code> - <code>row</code>, <code>row-reverse</code>, <code>column</code> or <code>column-reverse</code>, and also change the second to <code>wrap</code> and <code>nowrap</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}</p>
+
+<h2 id="Properties_applied_to_flex_items">Properties applied to flex items</h2>
+
+<p>To have more control over flex items we can target them directly. We do this by way of three properties:</p>
+
+<ul>
+ <li>{{cssxref("flex-grow")}}</li>
+ <li>{{cssxref("flex-shrink")}}</li>
+ <li>{{cssxref("flex-basis")}}</li>
+</ul>
+
+<p>We will take a brief look at these properties in this overview, and you can gain a fuller understanding in the guide <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of Flex Items on the Main Axis</a>.</p>
+
+<p>Before we can make sense of these properties we need to consider the concept of <strong>available space</strong>. What we are doing when we change the value of these flex properties is to change the way that available space is distributed amongst our items. This concept of available space is also important when we come to look at aligning items.</p>
+
+<p>If we have three 100 pixel-wide items in a container which is 500 pixels wide, then the space we need to lay out our items is 300 pixels. This leaves 200 pixels of available space. If we don’t change the initial values then flexbox will put that space after the last item.</p>
+
+<p><img alt="This flex container has available space after laying out the items." src="https://mdn.mozillademos.org/files/15620/Basics7.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p>
+
+<p>If we instead would like the items to grow and fill the space, then we need to have a method of distributing the leftover space between the items. This is what the <code>flex</code> properties that we apply to the items themselves, will do.</p>
+
+<h3 id="The_flex-basis_property">The <code>flex-basis</code> property</h3>
+
+<p>The <code>flex-basis</code> is what defines the size of that item in terms of the space it leaves as available space. The initial value of this property is <code>auto</code> — in this case the browser looks to see if the items have a size. In the example above, all of the items have a width of 100 pixels and so this is used as the <code>flex-basis</code>.</p>
+
+<p>If the items don’t have a size then the content's size is used as the flex-basis. This is why when we just declare <code>display: flex</code> on the parent to create flex items, the items all move into a row and take only as much space as they need to display their contents.</p>
+
+<h3 id="The_flex-grow_property">The <code>flex-grow</code> property</h3>
+
+<p>With the <code>flex-grow</code> property set to a positive integer, flex items can grow along the main axis from their <code>flex-basis</code>. This will cause the item to stretch and take up any available space on that axis, or a proportion of the available space if other items are allowed to grow too.</p>
+
+<p>If we gave all of our items in the example above a <code>flex-grow</code> value of 1 then the available space in the flex container would be equally shared between our items and they would stretch to fill the container on the main axis.</p>
+
+<p>The flex-grow property can be used to distribute space in proportion. If we give our first item a <code>flex-grow</code> value of 2 and the other items a value of 1, 2 parts will be given to the first item (100px out of 200px in the case of the example above), 1 part each the other two (50px each out of the 200px total).</p>
+
+<h3 id="The_flex-shrink_property">The <code>flex-shrink</code> property</h3>
+
+<p>Where the <code>flex-grow</code> property deals with adding space in the main axis, the <code>flex-shrink</code> property controls how it is taken away. If we do not have enough space in the container to lay out our items and <code>flex-shrink</code> is set to a positive integer the item can become smaller than the <code>flex-basis</code>. As with <code>flex-grow</code> different values can be assigned in order to cause one item to shrink faster than others — an item with a higher value set for <code>flex-shrink</code> will shrink faster than its siblings that have lower values.</p>
+
+<p>The minimum size of the item will be taken into account while working out the actual amount of shrinkage that will happen, which means that flex-shrink has the potential to appear less consistent than flex-grow in behavior. We’ll therefore take a more detailed look at how this algorithm works in the article Controlling Ratios of items along the main axis.</p>
+
+<div class="note">
+<p>Note that these values for <code>flex-grow</code> and <code>flex-shrink</code> are proportions. Typically if we had all of our items set to flex: <code>1 1 200px</code> and then wanted one item to grow at twice the rate, we would set that item to flex: <code>2 1 200px</code>. However you could use flex: <code>10 1 200px</code> and flex: <code>20 1 200px</code> if you wanted.</p>
+</div>
+
+<h3 id="Shorthand_values_for_the_flex_properties">Shorthand values for the flex properties</h3>
+
+<p>You will very rarely see the <code>flex-grow</code>, <code>flex-shrink</code>, and <code>flex-basis</code> properties used individually; instead they are combined into the {{cssxref("flex")}} shorthand. The <code>flex</code> shorthand allows you to set the three values in this order — <code>flex-grow</code>, <code>flex-shrink</code>, <code>flex-basis</code>.</p>
+
+<p>The live example below allows you to test out the different values of the flex shorthand; remember that the first value is <code>flex-grow</code>. Giving this a positive value means the item can grow. The second is <code>flex-shrink</code> — with a positive value the items can shrink, but only if their total values overflow the main axis. The final value is <code>flex-basis</code>; this is the value the items are using as their base value to grow and shrink from.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 510)}}</p>
+
+<p>There are also some predefined shorthand values which cover most of the use cases. You will often see these used in tutorials, and in many cases these are all you will need to use. The predefined values are as follows:</p>
+
+<ul>
+ <li><code>flex: initial</code></li>
+ <li><code>flex: auto</code></li>
+ <li><code>flex: none</code></li>
+ <li><code>flex: &lt;positive-number&gt;</code></li>
+</ul>
+
+<p>Setting <code>flex: initial</code> resets the item to the initial values of Flexbox. This is the same as <code>flex: 0 1 auto</code>. In this case the value of <code>flex-grow</code> is 0, so items will not grow larger than their <code>flex-basis</code> size. The value of <code>flex-shrink</code> is 1, so items can shrink if they need to rather than overflowing. The value of <code>flex-basis</code> is <code>auto</code>. Items will either use any size set on the item in the main dimension, or they will get their size from the content size.</p>
+
+<p>Using <code>flex: auto</code> is the same as using <code>flex: 1 1 auto</code>; everything is as with <code>flex:initial</code> but in this case the items can grow and fill the container as well as shrink if required.</p>
+
+<p>Using <code>flex: none</code> will create fully inflexible flex items. It is as if you wrote <code>flex: 0 0 auto</code>. The items cannot grow or shrink but will be laid out using flexbox with a <code>flex-basis</code> of <code>auto</code>.</p>
+
+<p>The shorthand you often see in tutorials is <code>flex: 1</code> or <code>flex: 2</code> and so on. This is as if you used <code>flex: 1 1 0</code>. The items can grow and shrink from a <code>flex-basis</code> of 0.</p>
+
+<p>Try these shorthand values in the live example below.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}</p>
+
+<h2 id="Alignment_justification_and_distribution_of_free_space_between_items">Alignment, justification and distribution of free space between items</h2>
+
+<p>A key feature of flexbox is the ability to align and justify items on the main- and cross-axes, and to distribute space between flex items.</p>
+
+<h3 id="align-items"><code>align-items</code></h3>
+
+<p>The {{cssxref("align-items")}} property will align the items on the cross axis.</p>
+
+<p>The initial value for this property is <code>stretch</code> and this is why flex items stretch to the height of the tallest one by default. They are in fact stretching to fill the flex container — the tallest item is defining the height of that.</p>
+
+<p>You could instead set <code>align-items</code> to <code>flex-start</code> in order to make the items line up at the start of the flex container, <code>flex-end</code> to align them to the end, or <code>center</code> to align them in the centre. Try this in the live example — I have given the flex container a height in order that you can see how the items can be moved around inside the container. See what happens if you set the value of align-items to:</p>
+
+<ul>
+ <li><code>stretch</code></li>
+ <li><code>flex-start</code></li>
+ <li><code>flex-end</code></li>
+ <li><code>center</code></li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}</p>
+
+<h3 id="justify-content"><code>justify-content</code></h3>
+
+<p>The {{cssxref("justify-content")}} property is used to align the items on the main axis, the direction in which <code>flex-direction</code> has set the flow. The initial value is <code>flex-start</code> which will line the items up at the start edge of the container, but you could also set the value to <code>flex-end</code> to line them up at the end, or <code>center</code> to line them up in the centre.</p>
+
+<p>You can also use the value <code>space-between</code> to take all the spare space after the items have been laid out, and share it out evenly between the items so there will be an equal amount of space between each item. To cause an equal amount of space on the right and left of each item use the value <code>space-around</code>. With <code>space-around</code>, items have a half-size space on either end. Or, to cause items to have equal space around them use the value <code>space-evenly</code>. With <code>space-evenly</code>, items have a full-size space on either end.</p>
+
+<p>Try the following values of <code>justify-content</code> in the live example:</p>
+
+<ul>
+ <li><code>flex-start</code></li>
+ <li><code>flex-end</code></li>
+ <li><code>center</code></li>
+ <li><code>space-around</code></li>
+ <li><code>space-between</code></li>
+ <li><code>space-evenly</code></li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}</p>
+
+<p>In the article <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning Items in a Flex Container</a> we will explore these properties in more depth, in order to have a better understanding of how they work. These simple examples however will be useful in the majority of use cases.</p>
+
+<h2 id="Next_steps">Next steps</h2>
+
+<p>After reading this article you should have an understanding of the basic features of Flexbox. In the next article we will look at <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">how this specification relates to other parts of CSS</a>.</p>
diff --git a/files/de/web/css/css_flexible_box_layout/index.html b/files/de/web/css/css_flexible_box_layout/index.html
new file mode 100644
index 0000000000..50a0d76329
--- /dev/null
+++ b/files/de/web/css/css_flexible_box_layout/index.html
@@ -0,0 +1,111 @@
+---
+title: CSS Flexible Box Layout
+slug: Web/CSS/CSS_Flexible_Box_Layout
+translation_of: Web/CSS/CSS_Flexible_Box_Layout
+---
+<p>{{CSSRef}}</p>
+
+<p><strong>CSS Flexible</strong> is a module of CSS that defines a multi-column layout, allowing to express how content should flows between columns, and how gaps and rules are handled.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="CSS_Properties">CSS Properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("flex")}}</li>
+ <li>{{cssxref("flex-basis")}}</li>
+ <li>{{cssxref("flex-direction")}}</li>
+ <li>{{cssxref("flex-flow")}}</li>
+ <li>{{cssxref("flex-grow")}}</li>
+ <li>{{cssxref("flex-shrink")}}</li>
+ <li>{{cssxref("flex-wrap")}}</li>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("order")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></dt>
+ <dd>Step-by-step tutorial about how to build layouts using this feature.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Using flexbox to lay out Web applications</a></dt>
+ <dd>Tutorial explaining how to use flexbox in the specific context of Web applications.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Flexbox') }}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable()}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop("20.0")}}</td>
+   <td>21.0{{property_prefix("-webkit")}}<br>
+    29.0</td>
+   <td>10.0{{property_prefix("-ms")}}<br>
+    11.0</td>
+   <td>12.10</td>
+   <td>6.1{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>4.4</td>
+   <td>11</td>
+   <td>12.10</td>
+   <td><span style="font-size: 12px; line-height: 18px;">7.1{{property_prefix("-webkit")}}</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/de/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html b/files/de/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html
new file mode 100644
index 0000000000..8a66487777
--- /dev/null
+++ b/files/de/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html
@@ -0,0 +1,397 @@
+---
+title: Using CSS flexible boxes
+slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
+---
+<div>{{CSSRef}}</div>
+
+<p>Die CSS3 Flexible Box, auch flexbox genannt, ist ein Layoutmodus, um Elemente einer Seite so anzuordnen, dass sie sich vorhersagbar verhalten, wenn sich das Layout verschiedenen Bildschirmgrößen und Ausgabegeräten anpasst. Für viele Anwendungsfälle stellt das Flexible-Box-Modell eine Verbesserung gegenüber dem Block-Modell dar, da es keine Floats nutzt. Außerdem fallen die Margins eines Containers nicht mit den Margins seines Inhalts zusammen.</p>
+
+<p>Viele Designer empfinden die Verwendung des Flexbox-Modells als einfacher. Kindelemente einer Flexbox können in jede Richtung ausgelegt werden sowie eine flexible Größe besitzen, um sich so an den Anzeigeplatz anzupassen. Die Positionierung von Kindelementen ist dadurch wesentlich leichter und komplexe Layouts sind nicht nur einfacher, sondern auch mit schönerem Code zu erlangen, was auf die unabhängige Platzierung der Elemente im Quellcode zurückzuführen ist. Diese Unabhängigkeit beeinflusst bewusst nur die visuelle Darstellung und lässt somit die Sprachordnung und Navigation, die auf dem Quellcode basiert, unberührt.</p>
+
+<div class="note"><strong>Hinweis:</strong> Obwohl sich die <a href="http://www.w3.org/TR/css3-flexbox/">Spezifikation des CSS Flexible Boxes Layouts</a> im Aufruf zum letzen Arbeitsentwurf befindet (siehe aktuellen <a href="http://dev.w3.org/csswg/css-flexbox/">Editor-Entwurf</a>), haben noch nicht alle Browser alle Eigenschaften der Flexbox implementiert. Es sei hiermit darauf verwiesen, dass es noch keine ausreichend übergreifende Unterstützung gibt. Einen Überblick über den Stand der jeweiligen Eigenschaften bietet die <a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes#Browser_compatibility">Kompatibilitätsliste.</a></div>
+
+<h2 id="Flexible-Box-Konzept">Flexible-Box-Konzept</h2>
+
+<p>Ein entscheidender Aspekt des Flex-Layouts ist die Möglichkeit, die Breite und/oder Höhe der einzelnen Elemente, entsprechend des zur Verfügung stehenden Platzes, auf jedem Gerät anpassen zu können. Ein Flex-Container dehnt seine Elemente entweder aus, um den verfügbaren freien Platz zu füllen, oder verkleinert sie, um einen Overflow zu vermeiden.</p>
+
+<p>Der Flexbox-Layout-Algorithmus funktioniert richtungsunabhängig, anders als beim Block-Layout, das vertikal ausgerichtet ist, oder beim Inline-Layout, das horizontal ausgerichtet ist. Obwohl das Block-Layout gut auf Seiten anwendbar ist, mangelt es ihm an individuellen Richtlinien, um Applikationskomponenten zu unterstützen, die die Ausrichtung ändern, sich in ihrer Größe anpassen, je nach Benutzerprogrammen ausdehnen oder verkleinern, von der Horizontalen in die Vertikale rotieren müssen und so weiter. Das Flexbox-Layout lässt sich am besten auf Anwendungskomponenten und auf kleinere Layouts anwenden, während das (neu aufkommende) Grid-Layout für großflächigere Layouts bestimmt ist. Beide sind Bestandteil größerer Bemühungen der CSS-Arbeitsgruppe, um eine größere Interoperabilität zwischen Webanwendungen mit den unterschiedlichsten Benutzerprogrammen, den vielfältigen Schreibmethoden und anderen Anforderungen, die an die Flexibilität gestellt werden, zu ermöglichen.</p>
+
+<h2 id="Flexible-Box-Wortschatz">Flexible-Box-Wortschatz</h2>
+
+<p>Während sich die Diskussion der Flexible Boxes von Bezeichnungen wie Horizontal-/Inline-Achse und Vertikal-/Block-Achse befreit, bedarf es dennoch einer neuen Terminologie, um das Modell adäquat zu beschreiben. Folgendes Diagramm soll als Referenz, zur Erörterung des Wortschatzes, dienen. Es zeigt einen Flex Container, dessen Eigenschaft <code>flex-direction</code> den Wert <code>row</code> hat. Das bedeutet, dass die <code>flex items</code> (im weiteren Verlauf als Flex-Elemente benannt) einander auf der Horizontalen, der Hauptachse, folgen – gemäß der gängigen Schreibmethode, die der Schreibrichtung folgt – in diesem Fall von links nach rechts.</p>
+
+<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png"></p>
+
+<dl>
+ <dt>Flex container (Flex-Container)</dt>
+ <dd>Das Elternelement, in dem die Flex-Elemente (entsprechen den <code style="font-style: normal;">flex items</code> im Diagramm) liegen. Ein Flex-Container wird durch den Wert <code style="font-style: normal;">flex</code> oder <code style="font-style: normal;">inline-flex</code> der Eigenschaft {{Cssxref("display")}} bestimmt.</dd>
+</dl>
+
+<dl>
+ <dt>Flex item (Flex-Elemente)</dt>
+ <dd>
+ <p>Jedes Kindelement eines Flex-Containers wird zu einem Flex-Element. Text, der sich unmittelbar in einem Flex-Container befindet, wird von einem anonymen Flex-Element umspannt.</p>
+ </dd>
+ <dt>Achsen</dt>
+ <dd>
+ <p>Jedes Flexible-Box-Layout folgt zwei Achsen. Die Hauptachse ist die Achse, auf der die Flex-Elemente aufeinander folgen. Die Querachse ist die Achse, die senkrecht zur Hauptachse steht.</p>
+
+ <ul>
+  <li>Die <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction" title="Die flex-direction Definition">flex-direction</a>-Eigenschaft bestimmt die Hauptachse.</li>
+  <li>Die <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content">justify-content</a>-Eigenschaft bestimmt, wie Flex-Elemente auf der Hauptachse der aktuellen Zeile ausgelegt werden.</li>
+  <li>Die <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-items">align-items</a>-Eigenschaft bestimmt die standardmäßige Ausrichtung der Flex-Elemente auf der Querachse der aktuellen Zeile.</li>
+  <li>Die <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-self">align-self</a>-Eigenschaft bestimmt die Ausrichtung einzelner Flex-Elemente auf der Querachse und überschreibt den standardmäßig durch <code>align-items</code> definierten Wert.</li>
+ </ul>
+ </dd>
+ <dt>Richtungen</dt>
+ <dd>
+ <p>Die Seiten <strong>main</strong> <strong>start/main end</strong> und <strong>cross start/cross end</strong> des Flex-Containers beschreiben den Anfang und den Endpunkt der Fließrichtung von Flex-Elementen. Sie folgen der Haupt- und Querachse des Flex-Containers in der durch <code>writing-mode</code> festgelegten Richtung (von links nach rechts, von rechts nach links usw.)</p>
+
+ <ul>
+  <li>Die <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/order">order</a>-Eigenschaft weist Elementen Ordinalzahlen zu und legt fest, welche Elemente zuerst erscheinen.</li>
+  <li>Die <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow">flex-flow</a>-Eigenschaft fasst die <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction" title="Die flex-direction Definition">flex-direction</a>- und <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap">flex-wrap</a>-Eigenschaften zusammen, um die Flex-Elemente anzulegen.</li>
+ </ul>
+ </dd>
+ <dt>Lines</dt>
+ <dd>
+ <p>Die Flex-Elemente können auf eine oder mehrere Linien ausgelegt werden, gemäß der <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap">flex-wrap</a>-Eigenschaft, welche die Richtung der Querachse und die Richtung der Linien steuert, in welche diese aufgereiht werden.</p>
+ </dd>
+ <dt>Dimensions</dt>
+ <dd>
+ <p>Die richtungsunabhängigen Entsprechungen von Höhe und Breite der Flex-Elemente sind <strong>main size</strong> und <strong>cross size</strong>, die entsprechend der Haupt- bzw. Querachse des Flex-Containers folgen.</p>
+
+ <ul>
+  <li>Der Standardwert der <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/min-height">min-height</a>- und <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/min-width">min-width</a>-Eigenschaften ist 0.</li>
+  <li>Die <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex">flex</a>-Eigenschaft fasst die <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow">flex-grow</a>-, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink">flex-shrink</a>- und <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis">flex-basis</a>-Eigenschaften zusammen, um die Flexibilität der Flex-Elemente zu gewährleisten.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Flexible-Box-Auszeichnung">Flexible-Box-Auszeichnung</h2>
+
+<p>Um per CSS Elemente auszuzeichnen, die dieses Layout benutzen, setzt man die <a href="https://developer.mozilla.org/de/docs/Web/CSS/display">display</a>-Eigenschaft wie folgt:</p>
+
+<pre class="brush: css">display: flex</pre>
+
+<p>oder</p>
+
+<pre class="brush: css">display: inline-flex</pre>
+
+<p>Macht man es so, definiert man das Element als Flex-Container und seine Kindelemente als Flex-Elemente. Der <code>flex</code>-Wert macht den Flex-Container zu einem Block-level-Element. Der <code>flex-inline</code>- Wert macht den Flex-Container zu einem kleinen Inline-level-Element.</p>
+
+<div class="note"><strong>Hinweis:</strong> Werden anbieterspzifische Präfixe für ältere Browser verwendet, fügt man den Präfix dem display-Wert hinzu und nicht der Eigenschaft. Zum Beispiel: <code>display: -webkit-flex</code>.</div>
+
+<h2 id="Überlegungen_zu_Flex-Elementen">Überlegungen zu Flex-Elementen</h2>
+
+<p>Text, der sich unmittelbar in einem Flex-Container befindet, wird automatisch von einem anonymen Flex-Element umschlossen. Ein anonymes Flex-Element, das nur aus Leerraum besteht, wird nicht gerendert, ganz so, als ob es durch <code>display: none</code> ausgezeichnet ist.</p>
+
+<p>Absolut positionierte Kindelemente eines Flex-Containers werden so angeordnet, dass sich ihre statische Position auf die Hauptecke der ersten Inhaltsbox ihres Flex-Containers bezieht.</p>
+
+<p>Wegen eines bekannten Problems wird ein Flex-Element mit der Deklaration <code>visibility: collapse</code> gegenwärtig so behandelt, als ob es die Deklaration <code>display: none</code> besäße, und nicht, wie mit der Deklation <code>visibility: hidden</code>. Vorgeschlagener Workaround, bis zur Lösung dieses Problems, ist, die Deklaration <code>visibility: hidden</code> für Flex-Elemente zu benutzen, sodass sie sich so verhalten, als ob sie mit <code>visibility: collapse</code> ausgezeichnet wären. Für mehr Informationen siehe <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=783470">Bug 783470</a>.</p>
+
+<p>Die Margins benachbarter Flex-Elemente fallen nicht zusammen. Die Benutzung von Auto-Margins absorbiert überflüssigen Platz in der Vertikalen und der Horizontalen und kann zur Ausrichtung oder Trennung von benachbarten Flex-Elementen genutzt werden. Siehe <a href="http://dev.w3.org/csswg/css3-flexbox/#auto-margins">Align with ‘auto’ margins</a> in der W3C Flexible-Box-Layout-Model-Spezifikation für eine detailliertere Beschreibung.</p>
+
+<p><s>Um eine vernünftige, minimal Größe für ‘flex Elemente’ zu gewährleisten, benutzt man <code>min-width: auto</code> und/oder <code>min-height: auto</code>. Bei ‘flex Elementen’ berechnet der <code>auto</code> Wert die mindest Breite/Höhe seiner Elemente so, dass nicht mehr Platz zu Verfügung steht, als es durch die Breite/Höhe seines Inhaltes erforderlich ist. Dadurch ist sichergestellt, dass die Elemente groß genug gerendert werden um ihren Inhalt anzeigen zu können. Siehe <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/min-width">min-width</a> und <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/min-height">min-height</a> für eine detailliertere Beschreibung.</s></p>
+
+<p>Die Ausrichtungseigenschaften der Flexbox gewährleisten eine “echte” Zentrierung, entgegen anderer Zentrierungsmethoden in CSS. Dies bedeutet, dass Flex-Elemente auch dann zentriert bleiben, wenn sie ihren Container überfließen. Dies kann manchmal jedoch problematisch sein. Überfließt der Inhalt die obere Kante der Seite oder die linke Seite (in LTR-Sprachen wie dem Englischen; Bei RTL-Sprachen wie dem Arabischen tritt dieses Problem auf der rechten Seite auf), so kann man in diesem Bereich nicht mehr Scrollen auch wenn sich darin Inhalte befinden! In einer künftigen Version werden die Ausrichtungseigenschaften so erweitert, dass es auch hier eine “sichere” Möglichkeit geben wird. Sollte dies ein Problem darstellen, kann man momentan stattdessen auf Margins zurückgreifen, um eine Zentrierung zu gewährleisten, da sich diese “sicher” verhalten und bei einem Überfließen nicht mehr zentrieren. Anstelle der <code>align</code>-Deklaration kann man einfach Auto-Margins auf die zu zentrierenden Elemente anwenden. Anstelle der <code>justify</code>-Eigenschaft kann man Auto-Margins auf die äußeren Enden des ersten und letzten Flex-Elements innerhalb eines Flex-Containers setzen. Die Auto-Margins werden entsprechend des geschätzten, freien Platzes die Flex-Elemente entweder zentrieren, sollte genug Platz vorhanden sein, und zur normalen Ausrichtung wechseln, wenn kein Platz da ist. Will man jedoch <code>justify-content</code> durch eine <code>margin</code>-basierte Zentrierung in einer multi-line-Flexbox ersetzen, hat man wahrscheinlich kein Glück dabei, da man die Margins auf dem ersten und letzten Flex-Element auf jeder Zeile setzen müsste. Sofern man nicht schon im Voraus bestimmten kann, welches Element auf welcher Zeile landet, kann man <code>margin</code>-basierte Zentrierung auf der Hauptachse nicht zuverlässig benutzen, um die <code>justify-content</code>-Deklaration zu ersetzen.</p>
+
+<p>Man sollte sich daran erinnern, dass, auch wenn die Reihenfolge in der Darstellung von Elementen unabhängig von der Notierung im Quellcode ist, sich diese nur in der visuellen Darstellung auswirkt und sich die Sprachreihenfolge und Navigationsanordnung nach der Anordnung im Quelltext richtet. Sprach- und Navigationssequenzen werden sogar von der <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/order">order</a>-Eigenschaft unberührt gelassen. Dementsprechend müssen Entwickler dafür Sorge tragen, Elemente in der richtigen Reihenfolge anzuordnen, um die Zugänglichkeit nicht zu gefährden.</p>
+
+<h2 id="Flexible-Box-Eigenschaften">Flexible-Box-Eigenschaften</h2>
+
+<h3 id="Eigenschaften_die_Flexible_Boxes_nicht_beeinflussen">Eigenschaften, die Flexible Boxes nicht beeinflussen</h3>
+
+<p>Da Flexible Boxes einen anderen Darstellungsalgorithmus verwenden, ergibt die Verwendung einiger Eigenschaften bei Flex-Containern keinen Sinn:</p>
+
+<ul>
+ <li>Eigenschaften <code>column-*</code> der <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_multi-column_layouts">multiple column Modules</a> haben keinen Einfluss auf Flex-Elemente.</li>
+ <li>{{cssxref("float")}} und {{cssxref("clear")}} haben keinen Einfluss auf Flex -Elemente. Die Benutzung von <code>float</code> sorgt dafür, dass die <code>display</code>-Eigenschaft den errechneten Wert <code>block</code> zugewiesen bekommt.</li>
+ <li>{{cssxref("vertical-align")}} hat keinen Einfluss auf die Ausrichtung von Flex-Elementen.</li>
+</ul>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Basis-Flex-Beispiel">Basis-Flex-Beispiel</h3>
+
+<p>Dieses Grundbeispiel zeigt, wie man ein Element "flexibel" macht und wie sich gleichrangige Elemente in einem flexiblen Zustand verhalten.</p>
+
+<pre class="brush: html">​&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+  &lt;head&gt;
+    &lt;style&gt;
+
+   .flex
+   {
+      /* basic styling */
+      width: 350px;
+      height: 200px;
+      border: 1px solid #555;
+      font: 14px Arial;
+
+      /* flexbox setup */
+      display: -webkit-flex;
+      -webkit-flex-direction: row;
+
+      display: flex;
+      flex-direction: row;
+   }
+
+   .flex &gt; div
+   {
+      -webkit-flex: 1 1 auto;
+      flex: 1 1 auto;
+
+      width: 30px; /* To make the transition work nicely.  (Transitions to/from
+                      "width:auto" are buggy in Gecko and Webkit, at least.
+                      See http://bugzil.la/731886 for more info.) */
+
+      -webkit-transition: width 0.7s ease-out;
+      transition: width 0.7s ease-out;
+   }
+
+   /* colors */
+   .flex &gt; div:nth-child(1){ background : #009246; }
+   .flex &gt; div:nth-child(2){ background : #F1F2F1; }
+   .flex &gt; div:nth-child(3){ background : #CE2B37; }
+
+   .flex &gt; div:hover
+   {
+        width: 200px;
+   }
+
+   &lt;/style&gt;
+
+ &lt;/head&gt;
+ &lt;body&gt;
+  &lt;p&gt;Flexbox nuovo&lt;/p&gt;
+  &lt;div class="flex"&gt;
+    &lt;div&gt;uno&lt;/div&gt;
+    &lt;div&gt;due&lt;/div&gt;
+    &lt;div&gt;tre&lt;/div&gt;
+  &lt;/div&gt;
+ &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h3 id="Holy-Grail-Layout-Beispiel">Holy-Grail-Layout-Beispiel</h3>
+
+<p>Dieses Beispiel demonstriert, wie Flexbox die Möglichkeit bietet, Layouts entsprechend verschiedener Auflösungen dynamisch anzupassen. Folgendes Diagramm stellt die Transformation bildlich dar.</p>
+
+<p><img alt="HolyGrailLayout.png" class="default internal" src="/files/3760/HolyGrailLayout.png"></p>
+
+<p>Hier wird das Beispiel dargestellt, dass sich eine Seite, die für einen Browser ausgelegt ist, sich an ein Smartphone-Fenster anpassen muss. Es müssen sich nicht nur die Größenverhältnisse der Elemente anpassen, sondern auch die Anordnung, in der die Elemente präsentiert werden. Das wird durch die Benutzung von Flexbox sehr vereinfacht.</p>
+
+<pre class="brush: html">​&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+  &lt;head&gt;
+    &lt;style&gt;
+
+  body {
+   font: 24px Helvetica;
+   background: #999999;
+  }
+
+  #main {
+   min-height: 800px;
+   margin: 0px;
+   padding: 0px;
+   display: -webkit-flex;
+   display:         flex;
+   -webkit-flex-flow: row;
+           flex-flow: row;
+   }
+
+  #main &gt; article {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #cccc33;
+   border-radius: 7pt;
+   background: #dddd88;
+   -webkit-flex: 3 1 60%;
+           flex: 3 1 60%;
+   -webkit-order: 2;
+           order: 2;
+   }
+
+  #main &gt; nav {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #8888bb;
+   border-radius: 7pt;
+   background: #ccccff;
+   -webkit-flex: 1 6 20%;
+           flex: 1 6 20%;
+   -webkit-order: 1;
+           order: 1;
+   }
+
+  #main &gt; aside {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #8888bb;
+   border-radius: 7pt;
+   background: #ccccff;
+   -webkit-flex: 1 6 20%;
+           flex: 1 6 20%;
+   -webkit-order: 3;
+           order: 3;
+   }
+
+  header, footer {
+   display: block;
+   margin: 4px;
+   padding: 5px;
+   min-height: 100px;
+   border: 1px solid #eebb55;
+   border-radius: 7pt;
+   background: #ffeebb;
+   }
+
+  /* Too narrow to support three columns */
+  @media all and (max-width: 640px) {
+
+   #main, #page {
+    -webkit-flex-flow: column;
+            flex-direction: column;
+   }
+
+   #main &gt; article, #main &gt; nav, #main &gt; aside {
+    /* Return them to document order */
+    -webkit-order: 0;
+            order: 0;
+   }
+
+   #main &gt; nav, #main &gt; aside, header, footer {
+    min-height: 50px;
+    max-height: 50px;
+   }
+  }
+
+ &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+ &lt;header&gt;header&lt;/header&gt;
+ &lt;div id='main'&gt;
+    &lt;article&gt;article&lt;/article&gt;
+    &lt;nav&gt;nav&lt;/nav&gt;
+    &lt;aside&gt;aside&lt;/aside&gt;
+ &lt;/div&gt;
+ &lt;footer&gt;footer&lt;/footer&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Playground_(Spielwiese)">Playground (Spielwiese)</h2>
+
+<p>Es gibt verschiedene, online verfügbare Spielwiesen im Internet zum Experimentieren:</p>
+
+<ul>
+ <li><a href="http://demo.agektmr.com/flexbox/">Flexbox Playground</a></li>
+ <li><a href="http://the-echoplex.net/flexyboxes">Flexy Boxes</a></li>
+</ul>
+
+<h2 id="Things_to_keep_in_mind">Things to keep in mind</h2>
+
+<p>The algorithm describing how flex items are laid out can be pretty tricky at times. Here are a few things to consider to avoid bad surprises when designing using flexible boxes.</p>
+
+<p>Flexible boxes are laid out in conformance of the <a href="https://developer.mozilla.org/en-US/docs/CSS/writing-mode">writing mode</a>, which means that <strong>main start</strong> and <strong>main end</strong> are laid out according to the position of <strong>start</strong> and <strong>end</strong>.</p>
+
+<p><strong>cross start</strong> and <strong>cross end</strong> rely on the definition of the <strong>start</strong> or <strong>before</strong> position that depends on the value of <a href="/en-US/docs/Web/CSS/direction"><code>direction</code></a>.</p>
+
+<p>Page breaks are possible in flexible boxes layout as long as <code>break-</code> property allows it. CSS3 <code>break-after</code>, <code>break-before</code>, and <code>break-inside</code> as well as CSS 2.1 <code>page-break-before</code>, <code>page-break-after</code>, and <code>page-break-inside</code> properties are accepted on a flex container, flex items, and inside flex items.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support (single-line flexbox)</td>
+   <td>{{CompatGeckoDesktop("18.0")}}{{property_prefix("-moz")}}<sup>[2]</sup><br>
+    {{CompatGeckoDesktop("22.0")}}</td>
+   <td>21.0{{property_prefix("-webkit")}}<br>
+    29.0</td>
+   <td>11<sup>[3]</sup></td>
+   <td>12.10{{property_prefix("-webkit")}}<sup>[5]</sup></td>
+   <td>6.1{{property_prefix("-webkit")}}<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td>Multi-line flexbox</td>
+   <td>{{CompatGeckoDesktop("28.0")}}</td>
+   <td>21.0{{property_prefix("-webkit")}}<br>
+    29.0</td>
+   <td>11<sup>[3]</sup></td>
+   <td>12.10<sup>[5]</sup><br>
+    15 {{property_prefix("-webkit")}}</td>
+   <td>6.1{{property_prefix("-webkit")}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support (single-line flexbox)</td>
+   <td>{{CompatGeckoMobile("18.0")}}{{property_prefix("-moz")}}<sup>[2]</sup><br>
+    {{CompatGeckoMobile("22.0")}}</td>
+   <td>
+    <p>1.0{{property_prefix("-moz")}}<sup>[2]</sup><br>
+     1.1</p>
+   </td>
+   <td>2.1{{property_prefix("-webkit")}}<sup>[4]</sup><br>
+    4.4</td>
+   <td>11</td>
+   <td>12.10<sup>[5]</sup><br>
+    15{{property_prefix("-webkit")}}</td>
+   <td>7{{property_prefix("-webkit")}}<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td>Multi-line flexbox</td>
+   <td>{{CompatGeckoMobile("28.0")}}</td>
+   <td>1.3</td>
+   <td>2.1{{property_prefix("-webkit")}}<sup>[4]</sup><br>
+    4.4</td>
+   <td>11</td>
+   <td>12.10<sup>[5]</sup><br>
+    15{{property_prefix("-webkit")}}</td>
+   <td>7{{property_prefix("-webkit")}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Safari up to 6.0 ( 6.1 for iOS ) supported an old incompatible draft version of the specification. Safari 6.1( 7 for iOS ) has been updated to support the final version.</p>
+
+<p>[2] Up to Firefox 22, to activate flexbox support, the user has to change the <code>about:config</code> preference <code>layout.css.flexbox.enabled</code> to <code>true</code>. From Firefox 22 to Firefox 27, the preference is <code>true</code> by default, but the preference has been removed in Firefox 28.</p>
+
+<p>[3] Internet Explorer 10 supports an old incompatible draft version of the specification; Internet Explorer 11 <a href="http://msdn.microsoft.com/en-us/library/ie/dn265027%28v=vs.85%29.aspx">has been updated</a> to support the final version.</p>
+
+<p>[4] Android browser up to 4.3 supported an old incompatible draft version of the specification. Android 4.4 has been updated to support the final version.</p>
+
+<p>[5] While in the initial implementation in Opera 12.10 flexbox was not prefixed, it got prefixed in versions 15 to 16 of Opera and 15 to 19 of Opera Mobile with {{property_prefix("-webkit")}}. The prefix was removed again in Opera 17 and Opera Mobile 24.</p>
+
+<h3 id="See_also">See also</h3>
+
+<ul>
+ <li><a href="https://github.com/philipwalton/flexbugs">The Flexbugs project</a> for information on bugs in browsers' implementations of flexbox.</li>
+</ul>
diff --git a/files/de/web/css/css_fonts/index.html b/files/de/web/css/css_fonts/index.html
new file mode 100644
index 0000000000..2d5b16fa9f
--- /dev/null
+++ b/files/de/web/css/css_fonts/index.html
@@ -0,0 +1,145 @@
+---
+title: CSS Fonts
+slug: Web/CSS/CSS_Fonts
+tags:
+  - CSS
+  - CSS Fonts
+  - Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Fonts
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Fonts</strong> ist ein CSS Modul, das schriftbezogene Eigenschaften definiert und wie Schriftressourcen geladen werden. Es erlaubt, den Stil einer Schrift, wie deren Schriftart, -größe und -dicke zu bestimmen als auch die Variante der verwendeten Glyphe für eine Schriftart, die mehrere Glyphen für ein Schriftzeichen bereitstellt. Es erlaubt außerdem, die Höhe einer Zeile zu definieren.</p>
+
+<h2 id="Referenz">Referenz</h2>
+
+<h3 id="Eigenschaften">Eigenschaften</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("font")}}</li>
+ <li>{{cssxref("font-family")}}</li>
+ <li>{{cssxref("font-feature-settings")}}</li>
+ <li>{{cssxref("font-kerning")}}</li>
+ <li>{{cssxref("font-language-override")}}</li>
+ <li>{{cssxref("font-size")}}</li>
+ <li>{{cssxref("font-size-adjust")}}</li>
+ <li>{{cssxref("font-stretch")}}</li>
+ <li>{{cssxref("font-style")}}</li>
+ <li>{{cssxref("font-synthesis")}}</li>
+ <li>{{cssxref("font-variant")}}</li>
+ <li>{{cssxref("font-variant-alternates")}}</li>
+ <li>{{cssxref("font-variant-caps")}}</li>
+ <li>{{cssxref("font-variant-east-asian")}}</li>
+ <li>{{cssxref("font-variant-ligatures")}}</li>
+ <li>{{cssxref("font-variant-numeric")}}</li>
+ <li>{{cssxref("font-variant-position")}}</li>
+ <li>{{cssxref("font-weight")}}</li>
+ <li>{{cssxref("line-height")}}</li>
+</ul>
+</div>
+
+<h3 id="-Regeln">@-Regeln</h3>
+
+<dl>
+ <dt>{{cssxref("@font-face")}}</dt>
+ <dd>
+ <div class="index">
+ <ul>
+  <li>{{cssxref("@font-face/font-family", "font-family")}}</li>
+  <li>{{cssxref("@font-face/font-feature-settings", "font-feature-settings")}}</li>
+  <li>{{cssxref("@font-face/font-style", "font-style")}}</li>
+  <li>{{cssxref("@font-face/font-variant", "font-variant")}}</li>
+  <li>{{cssxref("@font-face/font-weight", "font-weight")}}</li>
+  <li>{{cssxref("@font-face/font-stretch", "font-stretch")}}</li>
+  <li>{{cssxref("@font-face/src", "src")}}</li>
+  <li>{{cssxref("@font-face/unicode-range", "unicode-range")}}</li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{cssxref("@font-feature-values")}}</dt>
+</dl>
+
+<h2 id="Anleitungen">Anleitungen</h2>
+
+<p><em>Keine.</em></p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'fonts.html#font-shorthand', '')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#font', '')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>1.0</td>
+   <td>1.0 (1.0)</td>
+   <td>3.0</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/de/web/css/css_generated_content/index.html b/files/de/web/css/css_generated_content/index.html
new file mode 100644
index 0000000000..8541394b39
--- /dev/null
+++ b/files/de/web/css/css_generated_content/index.html
@@ -0,0 +1,61 @@
+---
+title: CSS Generated Content
+slug: Web/CSS/CSS_Generated_Content
+tags:
+  - CSS
+  - CSS Generated Content
+  - CSS Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Generated_Content
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Generated Content</strong> ist ein CSS Modul, das definiert, wie Inhalte zu einem Element hinzugefügt werden.</p>
+
+<h2 id="Referenz">Referenz</h2>
+
+<h3 id="Eigenschaften">Eigenschaften</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("content")}}</li>
+ <li>{{cssxref("quotes")}}</li>
+</ul>
+</div>
+
+<h2 id="Anleitungen">Anleitungen</h2>
+
+<p><em>Keine.</em></p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS2.1')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<h3 id="content"><code>content</code></h3>
+
+<p> </p>
+
+<p>{{Compat("css.properties.content")}}</p>
+
+<h3 id="quotes"><code>quotes</code></h3>
+
+<p>{{Compat("css.properties.quotes")}}</p>
+
+<p> </p>
diff --git a/files/de/web/css/css_grid_layout/index.html b/files/de/web/css/css_grid_layout/index.html
new file mode 100644
index 0000000000..d5e810da8e
--- /dev/null
+++ b/files/de/web/css/css_grid_layout/index.html
@@ -0,0 +1,252 @@
+---
+title: CSS Grid Layout
+slug: Web/CSS/CSS_Grid_Layout
+tags:
+  - CSS
+  - Grid Layout
+  - Grids
+  - Layout
+  - NeedsTranslation
+  - Raster
+  - Referenz
+  - Überblick
+translation_of: Web/CSS/CSS_Grid_Layout
+---
+<p><strong>CSS Grid Layout</strong> zeichnet sich dadurch aus, dass eine Seite in Hauptbereiche unterteilt wird oder die Beziehung zwischen Teilen eines Steuerelements, das aus HTML-Grundelementen besteht, in Bezug auf Größe, Position und Layer definiert wird.</p>
+
+<p>Grid Layout ermöglicht es, Elemente in Spalten und Reihen auszurichten, ähnlich wie in Tabellen. Jedoch gibt es viel mehr Gestaltungsmöglichkeiten und diese sind einfacher umzusetzen mit CSS Grid als es mit Tabellen der Fall war. Beispielsweise kann das Kindelement eines Grid-Container-Elements so positioniert werden, dass es andere überlappt und überlagert, ähnlich wie bei mit CSS positionierten Elementen.</p>
+
+<h2 id="Basic_Example" name="Basic_Example">Einfaches Beispiel</h2>
+
+<p>Das folgende Beispiel zeigt ein dreispaltiges Raster mit neuen Zeilen, die mit mindestens 100 Pixeln und einem Maximum von auto erstellt wurden. Die Elemente wurden mithilfe von zeilenbasierten Platzierungen im Raster positioniert.</p>
+
+<div id="example">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+  max-width: 940px;
+  margin: 0 auto;
+}
+
+.wrapper &gt; div {
+  border: 2px solid rgb(233,171,88);
+  border-radius: 5px;
+  background-color: rgba(233,171,88,.5);
+  padding: 1em;
+  color: #d9480f;
+}</pre>
+</div>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="one"&gt;One&lt;/div&gt;
+  &lt;div class="two"&gt;Two&lt;/div&gt;
+  &lt;div class="three"&gt;Three&lt;/div&gt;
+  &lt;div class="four"&gt;Four&lt;/div&gt;
+  &lt;div class="five"&gt;Five&lt;/div&gt;
+  &lt;div class="six"&gt;Six&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: minmax(100px, auto);
+}
+.one {
+  grid-column: 1 / 3;
+  grid-row: 1;
+}
+.two {
+  grid-column: 2 / 4;
+  grid-row: 1 / 3;
+}
+.three {
+  grid-column: 1;
+  grid-row: 2 / 5;
+}
+.four {
+  grid-column: 3;
+  grid-row: 3;
+}
+.five {
+  grid-column: 2;
+  grid-row: 4;
+}
+.six {
+  grid-column: 3;
+  grid-row: 4;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('example', '500', '440') }}</p>
+</div>
+
+<h2 id="Referenz">Referenz</h2>
+
+<h3 id="CSS_Eigenschaften">CSS Eigenschaften</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("grid-template-columns")}}</li>
+ <li>{{cssxref("grid-template-rows")}}</li>
+ <li>{{cssxref("grid-template-areas")}}</li>
+ <li>{{cssxref("grid-template")}}</li>
+ <li>{{cssxref("grid-auto-columns")}}</li>
+ <li>{{cssxref("grid-auto-rows")}}</li>
+ <li>{{cssxref("grid-auto-flow")}}</li>
+ <li>{{cssxref("grid")}}</li>
+ <li>{{cssxref("grid-row-start")}}</li>
+ <li>{{cssxref("grid-column-start")}}</li>
+ <li>{{cssxref("grid-row-end")}}</li>
+ <li>{{cssxref("grid-column-end")}}</li>
+ <li>{{cssxref("grid-row")}}</li>
+ <li>{{cssxref("grid-column")}}</li>
+ <li>{{cssxref("grid-area")}}</li>
+ <li>{{cssxref("grid-row-gap")}}</li>
+ <li>{{cssxref("grid-column-gap")}}</li>
+ <li>{{cssxref("grid-gap")}}</li>
+</ul>
+</div>
+
+<h3 id="CSS_Funktionen">CSS Funktionen</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("repeat", "repeat()")}}</li>
+ <li>{{cssxref("minmax", "minmax()")}}</li>
+ <li>{{cssxref("fit-content", "fit-content()")}}</li>
+</ul>
+</div>
+
+<h3 id="CSS_Datentypen">CSS Datentypen</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("&lt;flex&gt;")}}</li>
+</ul>
+</div>
+
+<h3 id="Glossar_Einträge">Glossar Einträge</h3>
+
+<div class="index">
+<ul>
+ <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li>
+ <li><a href="/en-US/docs/Glossary/Grid_Lines">Grid Lines</a></li>
+ <li><a href="/en-US/docs/Glossary/Grid_Tracks">Grid Tracks</a></li>
+ <li><a href="/en-US/docs/Glossary/Grid_Cell">Grid Cell</a></li>
+ <li><a href="/en-US/docs/Glossary/Grid_Areas">Grid Area</a></li>
+ <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+ <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li>
+ <li><a href="/en-US/docs/Glossary/Grid_Rows">Grid row</a></li>
+ <li><a href="/en-US/docs/Glossary/Grid_Column">Grid column</a></li>
+</ul>
+</div>
+
+<h2 id="Anleitungen">Anleitungen</h2>
+
+<div class="index">
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basic concepts of Grid Layout</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship of Grid Layout to other layout methods</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Layout using line-based placement</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in CSS Grid Layout</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in CSS Grid Layout</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS Grid, Logical Values and Writing Modes</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and accessibility</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid and progressive enhancement</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realising_common_layouts_using_CSS_Grid_">Realising common layouts using CSS Grid</a></li>
+</ul>
+</div>
+
+<h2 id="Externe_Quellen">Externe Quellen</h2>
+
+<ul>
+ <li><a href="http://labs.jensimmons.com/">Beispiele von Jen Simmons</a></li>
+ <li><a href="http://gridbyexample.com/">Grid by Example - eine Sammlung von Anwendungsbeispielen und Video-Tutorials</a></li>
+ <li><a href="https://tympanus.net/codrops/css_reference/grid/">Codrops Grid Referenz</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox DevTools CSS Grid Inspector</a></li>
+ <li><a href="https://mozilladevelopers.github.io/playground/">CSS Grid Playground</a></li>
+</ul>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Bemerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Grid') }}</td>
+   <td>{{ Spec2('CSS3 Grid') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/de/web/css/css_images/implementing_image_sprites_in_css/index.html b/files/de/web/css/css_images/implementing_image_sprites_in_css/index.html
new file mode 100644
index 0000000000..5551a4a59e
--- /dev/null
+++ b/files/de/web/css/css_images/implementing_image_sprites_in_css/index.html
@@ -0,0 +1,50 @@
+---
+title: Implementing image sprites in CSS
+slug: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS
+tags:
+  - Anleitung
+  - CSS
+  - CSS Bilder
+  - Fortgeschrittene
+  - Grafik
+  - NeedsContent
+  - Sprites
+  - Web
+translation_of: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS
+---
+<div>{{APIRef}}</div>
+
+<p>Image Sprites werden in zahlreichen Webanwendungen verwendet, wo mehrere Bilder verwendet werden. Statt jedes Bild als eine eigene Bilddatei einzubinden, ist es wesentlich speicher- und bandbreitenfreundlicher, sie als ein einzelnes Bild zu schicken, um die Anzahl an HTTP Anfragen zu verringern.</p>
+
+<h2 id="Implementierung">Implementierung</h2>
+
+<p>Angenommen, jedem Element mit der Klasse <code>toolbtn</code> wird ein Bild zugewiesen:</p>
+
+<pre class="brush:css">.toolbtn {
+  background: url(myfile.png);
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+}</pre>
+
+<p>Eine Hintergrundposition kann entweder über zwei x- und y-Werte nach der {{cssxref("url()")}} dem Hintergrund hinzugefügt werden oder als {{cssxref("background-position")}}. Als Beispiel:</p>
+
+<pre class="brush:css">#btn1 {
+  background-position: -20px 0px;
+}
+
+#btn2 {
+  background-position: -40px 0px;
+}</pre>
+
+<p>Dies verschiebt das Element mit der ID 'btn1' um 20 Pixel nach links und das Element mit der ID 'btn2' um 40 Pixel nach links (unter Annahme, dass diesen die Klasse <code>toolbtn</code> zugewiesen wurde und durch die obere CSS Regel beeinflusst werden).</p>
+
+<p>Ebenso können Hover-Status erstellt werden mit:</p>
+
+<pre class="brush:css">#btn:hover {
+  background-position: <var>&lt;nach rechts verschobene Pixel&gt;</var>px <var>&lt;nach unten verschobene Pixel&gt;</var>px;
+}</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<p><a href="http://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/">Voll funktionsfähige Demo bei CSS Tricks</a></p>
diff --git a/files/de/web/css/css_images/index.html b/files/de/web/css/css_images/index.html
new file mode 100644
index 0000000000..b34532bf2c
--- /dev/null
+++ b/files/de/web/css/css_images/index.html
@@ -0,0 +1,145 @@
+---
+title: CSS Bilder
+slug: Web/CSS/CSS_Images
+tags:
+  - CSS
+  - CSS Bilder
+  - CSS Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Images
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Images</strong> ist ein CSS Modul, das definiert, welche Typen von Bildern verwendet werden können (der {{cssxref("&lt;image&gt;")}} Typ, der URLs, Farbverläufe und andere Arten von Bildern beinhaltet), wie diese in der Größe geändert werden und wie sie und andere ersetzte Inhalte mit den verschiedenen Layoutmodellen interagieren.</p>
+
+<h2 id="Referenz">Referenz</h2>
+
+<h3 id="Eigenschaften">Eigenschaften</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("image-orientation")}}</li>
+ <li>{{cssxref("image-rendering")}}</li>
+ <li>{{cssxref("object-fit")}}</li>
+ <li>{{cssxref("object-position")}}</li>
+</ul>
+</div>
+
+<h3 id="Funktionen">Funktionen</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("linear-gradient", "linear-gradient()")}}</li>
+ <li>{{cssxref("radial-gradient", "radial-gradient()")}}</li>
+ <li>{{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}</li>
+ <li>{{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}</li>
+ <li>{{cssxref("element", "element()")}}</li>
+</ul>
+</div>
+
+<h3 id="Datentypen">Datentypen</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("&lt;image&gt;")}}</li>
+ <li>{{cssxref("&lt;uri&gt;")}}</li>
+</ul>
+</div>
+
+<h2 id="Anleitungen">Anleitungen</h2>
+
+<dl>
+ <dt><a href="/de/docs/Farbverläufe_in_CSS">CSS Farbverläufe verwenden</a></dt>
+ <dd>Beschreibt einen bestimmten Typ von CSS Bildern, Farbverläufe, und wie diese erstellt und verwendet werden.</dd>
+ <dt><a href="/de/docs/Web/CSS/CSS_Images/Implementierung_von_Bildsprites_in_CSS">Implementierung von Bildsprites in CSS</a></dt>
+ <dd>Beschreibt die geläufige Methode, mehrere Bilder in einem einzigen Dokument zu gruppieren, um Downloadanfragen zu sparen und die Verfügbarkeit einer Seite zu beschleunigen.</dd>
+</dl>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Images')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Images')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#urls', '&lt;url&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{Specname('CSS2.1', 'syndata.html#uri', '&lt;uri&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#url', '&lt;url&gt;')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/de/web/css/css_lists_and_counters/css_zähler_verwenden/index.html b/files/de/web/css/css_lists_and_counters/css_zähler_verwenden/index.html
new file mode 100644
index 0000000000..252f90b530
--- /dev/null
+++ b/files/de/web/css/css_lists_and_counters/css_zähler_verwenden/index.html
@@ -0,0 +1,126 @@
+---
+title: CSS Zähler verwenden
+slug: Web/CSS/CSS_Lists_and_Counters/CSS_Zähler_verwenden
+tags:
+  - Anleitung
+  - CSS
+  - CSS Listen
+  - CSS Wert
+  - Fortgeschrittene
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">CSS Zähler sind im Grunde von CSS verwaltete Variablen, deren Werte mittels CSS Regeln inkrementiert werden können, um nachzuvollziehen, wie oft sie verwendet wurden. Dies ermöglicht es, die Darstellung von Inhalten anhand der Positionierung innerhalb des Dokuments anzupassen.</span> CSS Zähler sind eine Implementierung von <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Automatic counters and numbering</a> in CSS 2.1.</p>
+
+<p>Der Wert eines Zählers wird durch die Verwendung von {{cssxref("counter-reset")}} geändert. {{cssxref("counter-increment")}} kann auf einer Seite durch verwenden der <code>counter()</code> oder <code>counters()</code> Funktion der {{cssxref("content")}} Eigenschaft dargestellt werden.</p>
+
+<h2 id="Zähler_verwenden">Zähler verwenden</h2>
+
+<p>Um einen CSS Zähler zu verwenden, muss er zunächst auf einen Wert zurückgesetzt werden (standardmäßig 0). Um den Wert eines Zählers zu einem Element hinzuzufügen, kann die <code>counter()</code> Funktion verwendet werden. Das folgende CSS fügt am Anfang jedes h3 Elements "Abschnitt &lt;der Wert des Zählers&gt;:" ein.</p>
+
+<pre class="brush: css">body {
+  counter-reset: section;                      /* Setzt den Abschnittszähler auf 0 */
+}
+
+h3::before {
+  counter-increment: section;                  /* Erhöht den Abschnittszähler */
+  content: "Abschnitt " counter(section) ": "; /* Zeigt den Zähler an */
+}
+</pre>
+
+<p>Beispiel:</p>
+
+<pre class="brush: html">&lt;h3&gt;Einführung&lt;/h3&gt;
+&lt;h3&gt;Inhalt&lt;/h3&gt;
+&lt;h3&gt;Zusammenfassung&lt;/h3&gt;</pre>
+
+<p>{{EmbedLiveSample("Zähler_verwenden", 280, 150)}}</p>
+
+<h2 id="Zähler_verschachteln">Zähler verschachteln</h2>
+
+<p>Ein CSS Zähler ist besonders nützlich, um kontinuierte Listen zu erstellen, da in Kindelementen automatisch eine neue Instanz eines CSS Zählers erzeugt wird. Wird die <code>counters()</code> Funktion verwendet, kann ein String zwischen verschiedenen Leveln von verschachtelten Zählern eingefügt werden. Beispielsweise dieses CSS:</p>
+
+<pre class="brush: css">ol {
+  counter-reset: section;                /* Erstellt mit jedem ol Element
+                                            eine neue Instanz des
+                                            Abschnittszählers. */
+  list-style-type: none;
+}
+
+li::before {
+  counter-increment: section;            /* Inkrementiert nur diese Instanz
+                                            des Abschnittszählers. */
+  content: counters(section,".") " ";    /* Fügt den Wert aller Instanzen
+                                            des Abschnittszählers durch "."
+                                            getrennt hinzu. */
+                                         /* Falls &lt; IE8 unterstützt werden soll,
+                                            sollte sichergestellt werden, dass
+                                            kein Leerzeichen nach dem ',' steht. */
+}
+</pre>
+
+<p>Kombiniert mit dem folgenden HTML:</p>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;Eintrag&lt;/li&gt;          &lt;!-- 1     --&gt;
+  &lt;li&gt;Eintrag               &lt;!-- 2     --&gt;
+    &lt;ol&gt;
+      &lt;li&gt;Eintrag&lt;/li&gt;      &lt;!-- 2.1   --&gt;
+      &lt;li&gt;Eintrag&lt;/li&gt;      &lt;!-- 2.2   --&gt;
+      &lt;li&gt;Eintrag           &lt;!-- 2.3   --&gt;
+        &lt;ol&gt;
+          &lt;li&gt;Eintrag&lt;/li&gt;  &lt;!-- 2.3.1 --&gt;
+          &lt;li&gt;Eintrag&lt;/li&gt;  &lt;!-- 2.3.2 --&gt;
+        &lt;/ol&gt;
+        &lt;ol&gt;
+          &lt;li&gt;Eintrag&lt;/li&gt;  &lt;!-- 2.3.1 --&gt;
+          &lt;li&gt;Eintrag&lt;/li&gt;  &lt;!-- 2.3.2 --&gt;
+          &lt;li&gt;Eintrag&lt;/li&gt;  &lt;!-- 2.3.3 --&gt;
+        &lt;/ol&gt;
+      &lt;/li&gt;
+      &lt;li&gt;Eintrag&lt;/li&gt;      &lt;!-- 2.4   --&gt;
+    &lt;/ol&gt;
+  &lt;/li&gt;
+  &lt;li&gt;Eintrag&lt;/li&gt;          &lt;!-- 3     --&gt;
+  &lt;li&gt;Eintrag&lt;/li&gt;          &lt;!-- 4     --&gt;
+&lt;/ol&gt;
+&lt;ol&gt;
+  &lt;li&gt;Eintrag&lt;/li&gt;          &lt;!-- 1     --&gt;
+  &lt;li&gt;Eintrag&lt;/li&gt;          &lt;!-- 2     --&gt;
+&lt;/ol&gt;</pre>
+
+<p>Erzeugt dieses Ergebnis:</p>
+
+<p>{{EmbedLiveSample("Zähler_verschachteln", 250, 350)}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS2.1", "generate.html#generate.html#counters", "counter-reset")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref("counter-reset")}}</li>
+ <li>{{cssxref("counter-increment")}}</li>
+</ul>
+
+<p><em>Es gibt ein zusätzliches Beispiel unter <a class="external" href="http://www.mezzoblue.com/archives/2006/11/01/counter_intu/" rel="freelink">http://www.mezzoblue.com/archives/20.../counter_intu/</a>. Dieser Blogeintrag wurde am 01.11.2006 veröffentlicht, sollte jedoch noch zutreffen.</em></p>
diff --git a/files/de/web/css/css_lists_and_counters/index.html b/files/de/web/css/css_lists_and_counters/index.html
new file mode 100644
index 0000000000..e616ac7735
--- /dev/null
+++ b/files/de/web/css/css_lists_and_counters/index.html
@@ -0,0 +1,132 @@
+---
+title: CSS Lists and Counters
+slug: Web/CSS/CSS_Lists_and_Counters
+tags:
+  - CSS
+  - CSS Listen und Zähler
+  - CSS Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Lists_and_Counters
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Lists and Counters</strong> ist ein CSS Modul, das definiert, wie Listen dargestellt werden, wie Aufzählungspunkte gestylt werden können und wie Autoren neue Zähler erstellen können.</p>
+
+<h2 id="Referenz">Referenz</h2>
+
+<h3 id="Eigenschaften">Eigenschaften</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("list-style-image")}}</li>
+ <li>{{cssxref("list-style-type")}}</li>
+ <li>{{cssxref("list-style-position")}}</li>
+ <li>{{cssxref("list-style")}}</li>
+ <li>{{cssxref("counter-reset")}}</li>
+ <li>{{cssxref("counter-increment")}}</li>
+</ul>
+</div>
+
+<h3 id="-Regeln">@-Regeln</h3>
+
+<dl>
+ <dt>{{cssxref("@counter-style")}}</dt>
+ <dd>
+ <div class="index">
+ <ul>
+  <li>{{cssxref("@counter-style/system","system")}}</li>
+  <li>{{cssxref("@counter-style/additive-symbols", "additive-symbols")}}</li>
+  <li>{{cssxref("@counter-style/negative", "negative")}}</li>
+  <li>{{cssxref("@counter-style/prefix", "prefix")}}</li>
+  <li>{{cssxref("@counter-style/suffix", "suffix")}}</li>
+  <li>{{cssxref("@counter-style/range", "range")}}</li>
+  <li>{{cssxref("@counter-style/pad", "pad")}}</li>
+  <li>{{cssxref("@counter-style/speak-as", "speak-as")}}</li>
+  <li>{{cssxref("@counter-style/fallback", "fallback")}}</li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="Anleitungen">Anleitungen</h2>
+
+<dl>
+ <dt><a href="/de/docs/Web/CSS/CSS_Lists_and_Counters/Konsistente_Listeneinrückung">Konsistente Listeneinrückung</a></dt>
+ <dd>Erklärt, wie eine konsistente Einrückung zwischen verschiedenen Browsern erreicht werden kann.</dd>
+ <dt><a href="/de/docs/Web/CSS/CSS_Lists_and_Counters/CSS_Zähler_verwenden">CSS Zähler verwenden</a></dt>
+ <dd>Beschreibt, wie Zähler verwendet werden, um Aufzählungen außerhalb der traditionellen Listenelemente verwenden zu können oder um komplexe Zählungen durchzuführen.</dd>
+</dl>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Lists')}}</td>
+   <td>{{Spec2('CSS3 Lists')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/de/web/css/css_lists_and_counters/konsistente_listeneinrückung/index.html b/files/de/web/css/css_lists_and_counters/konsistente_listeneinrückung/index.html
new file mode 100644
index 0000000000..b2309f5e82
--- /dev/null
+++ b/files/de/web/css/css_lists_and_counters/konsistente_listeneinrückung/index.html
@@ -0,0 +1,104 @@
+---
+title: Konsistente Listeneinrückung
+slug: Web/CSS/CSS_Lists_and_Counters/Konsistente_Listeneinrückung
+tags:
+  - Anleitung
+  - CSS
+  - Intermediate
+  - NeedsUpdate
+translation_of: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">Eine der häufigsten Stiländerungen, die auf Listen angewendet werden, ist eine Änderung der Einrückungsweite — d. h. wie weit die Listeneinträge nach rechts verschoben sind.</span> Dies führt oft zu Frustration, da das, was in einem Browser funktioniert, in einem anderen oft nicht denselben Effekt hat. Wenn zum Beispiel angegeben wird, dass Listen keinen linken Außenabstand haben, verschieben sie sich im Internet Explorer, bleiben jedoch hartnäckig am selben Platz in Gecko-basierten Browsern. <span class="seoSummary">Dieser Artikel hilft, die Probleme zu verstehen, die auftreten können, und wie man diese verhindert.</span></p>
+
+<p>Um zu verstehen, warum dies der Fall ist, und noch wichtiger, wie das Problem generell vermieden werden kann, ist es notwendig, die Details der Listenerstellung zu untersuchen.</p>
+
+<h2 id="Eine_Liste_erstellen">Eine Liste erstellen</h2>
+
+<p>Zunächst betrachten wir einen einzelnen Listeneintrag. Dieser Listeneintrag hat kein Aufzählungszeichen (auch bekannt als "Bullet") und ist noch nicht Teil einer Liste. Er hängt allein in der Leere, schlicht und einfach, wie in Abbildung 1 gezeigt.</p>
+
+<p><img alt="Abbildung 1" class="internal" src="/@api/deki/files/619/=Consistent-list-indentation-figure1.gif"></p>
+
+<p>Der gepunktete rote Rahmen repräsentiert die äußeren Ränder des Inhaltsbereichs des Listeneintrags. Erinnere dich, dass der Listeneintrag zu diesem Zeitpunkt weder einen Innenabstand noch Ränder besitzt. Falls wir zwei oder mehr Listeneinträge hinzufügen, erhalten wir als Ergebnis etwas wie in Abbildung 2.</p>
+
+<p><img alt="Abbildung 2" class="internal" src="/@api/deki/files/620/=Consistent-list-indentation-figure2.gif"></p>
+
+<p>Jetzt umschließen wir diese durch ein Elternelement; in diesem Fall, umschließen wir sie durch eine ungeordnete Liste (d. h. <code>&lt;ul&gt;</code>). Laut dem CSS Boxmodell müssen die Boxen von Listeneinträgen innerhalb des Inhaltsbereichs des Elternelements dargestellt werden. Da das Elternelement aktuell weder Innen- noch Außenabstände hat, erhalten wir als Ergebnis das in Abbildung 3 Gezeigte.</p>
+
+<p><img alt="Abbildung 3" class="internal" src="/@api/deki/files/621/=Consistent-list-indentation-figure3.gif"></p>
+
+<p>Hier zeigt uns der gepunktete blaue Rahmen die Ränder des Inhaltsbereichs des <code>&lt;ul&gt;</code> Elements. Da wir keinen Innenabstand für das <code>&lt;ul&gt;</code> Element haben, umschließt sein Inhalt die drei Listeneinträge passend.</p>
+
+<p>Nun fügen wir Listenaufzählungszeichen hinzu. Da es sich hierbei um eine ungeordnete Liste handelt, fügen wir gewöhnliche gefüllte Kreis-"Bullets" hinzu, wie in Abbildung 4 dargestellt.</p>
+
+<p><img alt="Abbildung 4" class="internal" src="/@api/deki/files/622/=Consistent-list-indentation-figure4.gif"></p>
+
+<p>Visuell sind die Aufzählungszeichen <em>außerhalb</em> des Inhaltsbereichs des <code>&lt;ul&gt;</code>, jedoch spielt dies hier keine Rolle. Der Hauptpunkt ist, dass die Aufzählungszeichen außerhalb der "Hauptbox" des <code>&lt;li&gt;</code> Elements platziert sind, nicht des <code>&lt;ul&gt;</code>. Sie sind sozusagen Anhängsel der Listeneinträge, die außerhalb des Inhaltsbereichs des <code>&lt;li&gt;</code> liegen, jedoch trotzdem am <code>&lt;li&gt;</code> hängen.</p>
+
+<p>Dies ist der Grund, warum in allen Browsern außer dem Internet Explorer für Windows die Aufzählungszeichen außerhalb der Rahmen eines <code>&lt;li&gt;</code> Elements liegen, vorausgesetzt, der Wert von <code>list-style-position</code> ist <code>outside</code>. Falls er zu <code>inside</code> geändert wird, werden die Aufzählungszeichen innerhalb des Inhalts des <code>&lt;li&gt;</code>s gezogen, obwohl sie eine Inlinebox sind, die am Anfang des <code>&lt;li&gt;</code> platziert ist.</p>
+
+<h2 id="Doppelt_einrücken">Doppelt einrücken</h2>
+
+<p>Wie wird all dies nun im Dokument dargestellt? Im Moment haben wir eine Situation analog zu diesen Stilen:</p>
+
+<pre class="brush:css">ul, li {margin-left: 0; padding-left: 0;}</pre>
+
+<p>Falls diese Liste so wie sie ist in ein Dokument eingebunden würde, gäbe es keine sichtbare Einrückung und die Aufzählungszeichen liefen Gefahr, am linken Rand des Browserfensters herauszufallen.</p>
+
+<p>Um dies zu vermeiden und eine Einrückung zu erhalten, gibt es nur drei Möglichkeiten für Browserhersteller.</p>
+
+<ol>
+ <li>Gib jedem <code>&lt;li&gt;</code> Element einen linken Außenabstand.</li>
+ <li>Gib dem <code>&lt;ul&gt;</code> Element einen linken Außenabstand.</li>
+ <li>Gib dem <code>&lt;ul&gt;</code> Element einen linken Innenabstand.</li>
+</ol>
+
+<p>Wie sich herausstellt, hat niemand auf die erste Option zurückgegriffen. Die zweite Option wurde von Internet Explorer für Windows und Macintosh und Opera gewählt. Die dritte wird von Gecko und allen darauf basierenden Browsern verwendet.</p>
+
+<p>Lass uns die beiden Herangehensweisen genauer betrachten. Im Internet Explorer und Opera werden die Listen durch das Setzen eines linken Außenabstands von 40 Pixeln für das <code>&lt;ul&gt;</code> Element gesetzt. Falls wir dem <code>&lt;ul&gt;</code> Element eine Hintergrundfarbe zuweisen und die Rahmen der Listeneinträge und <code>&lt;ul&gt;</code> unverändert lassen, erhalten wir das Ergebnis, das in Abbildung 5 gezeigt wird.</p>
+
+<p><img alt="Abbildung 5" class="internal" src="/@api/deki/files/623/=Consistent-list-indentation-figure5.gif"></p>
+
+<p>Im Gegensatz dazu setzt Gecko einen linken <em>Innenabstand</em> von 40 Pixeln für das <code>&lt;ul&gt;</code> Element. Werden die exakt gleichen Stile benutzt, die zur Erzeugung von Abbildung 5 verwendet wurden, erhalten wir beim Laden des Beispiels in Gecko-basierten Browsern Abbildung 6.</p>
+
+<p><img alt="Abbildung 6" class="internal" src="/@api/deki/files/624/=Consistent-list-indentation-figure6.gif"></p>
+
+<p>Wie wir sehen können, bleiben die Aufzählungszeichen an den <code>&lt;li&gt;</code> Elementen hängen, unabhängig davon, wo sie sind. Der Unterschied liegt ausschließlich in der Darstellung des <code>&lt;ul&gt;</code>. Wir können den Unterschied nur sehen, wenn wir versuchen, einen Hintergrund oder einen Rahmen für das <code>&lt;ul&gt;</code> Element zu setzen.</p>
+
+<h2 id="Konsistenz_finden">Konsistenz finden</h2>
+
+<p>Zusammenfassend kann man sagen: Falls eine konsistente Darstellung von Listen zwischen Gecko, Internet Explorer und Opera gewünscht ist, müssen <strong>beide</strong> linken Abstände des <code>&lt;ul&gt;</code> Elements gesetzt werden, Innen- und Außenabstand. Wir können <code>&lt;li&gt;</code> für diesen Zweck komplett ignorieren. Zur Erstellung der Standardanzeige in Netscape 6.x schreibt man folgendes:</p>
+
+<pre class="brush:css">ul {margin-left: 0; padding-left: 40px;}</pre>
+
+<p>Falls lieber das Internet Explorer/Opera Modell gewünscht ist, dann:</p>
+
+<pre class="brush:css">ul {margin-left: 40px; padding-left: 0;}</pre>
+
+<p>Natürlich können die eigenen bevorzugten Werte angegeben werden. Wenn gewünscht, können beide auf <code>1.25em</code> gesetzt werden -- es gibt keinen Grund, bei pixelbasierter Einrückung zu bleiben. Falls Listen zurückgesetzt werden sollen, sodass sie keine Einrückung haben, müssen sowohl Innen- als auch Außenabstand auf null gesetzt werden:</p>
+
+<pre class="brush:css">ul {margin-left: 0; padding-left: 0;}</pre>
+
+<p>Beachte hierbei jedoch, dass dadurch die Bullets außerhalb der Liste und deren Elternelement hängen. Falls das Elternelement das <code>body</code> Element ist, sind die Bullets höchstwahrscheinlich außerhalb des Browserfensters, und sind daher nicht sichtbar.</p>
+
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+
+<p>Am Ende sehen wir, dass keiner der in diesem Artikel genannten Browser Listen richtig oder falsch darstellt. Sie verwenden verschiedene Standardstile und dadurch entstehen die Probleme. Wenn sichergestellt wird, dass sowohl linker Innen- als auch Außenabstand gesetzt sind, kann wesentlich größere browserübergreifende Konsistenz bei der Einrückung von Listen erzielt werden.</p>
+
+<h2 id="Empfehlungen">Empfehlungen</h2>
+
+<ul>
+ <li>Wenn die Einrückung von Listen geändert werden soll, stelle sicher, dass Innen- und Außenabstand gesetzt sind.</li>
+</ul>
+
+<div class="originaldocinfo">
+<h2 id="Originaldokumentinformation">Originaldokumentinformation</h2>
+
+<ul>
+ <li>Autor(en): Eric A. Meyer, Netscape Communications</li>
+ <li>Zuletzt aktualisiert: Published 30 Aug 2002</li>
+ <li>Copyright Information: Copyright © 2001-2003 Netscape. Alle Rechte vorbehalten.</li>
+ <li>Hinweis: Dieser nachgedruckte Artikel war ursprünglich Teil der DevEdge Seite.</li>
+</ul>
+</div>
diff --git a/files/de/web/css/css_logical_properties/index.html b/files/de/web/css/css_logical_properties/index.html
new file mode 100644
index 0000000000..108ab187ac
--- /dev/null
+++ b/files/de/web/css/css_logical_properties/index.html
@@ -0,0 +1,129 @@
+---
+title: CSS Logical Properties
+slug: Web/CSS/CSS_Logical_Properties
+tags:
+  - CSS
+  - CSS Logische Eigenschaften
+  - Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Logical_Properties
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Logical Properties</strong> ist ein CSS Modul, das logische Eigenschaften definiert, die auf physische Eigenschaften gemappt werden, um das Layout zu kontrollieren.</p>
+
+<h2 id="Referenz">Referenz</h2>
+
+<h3 id="Eigenschaften">Eigenschaften</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("block-size")}}</li>
+ <li>{{cssxref("border-block-end")}}</li>
+ <li>{{cssxref("border-block-end-color")}}</li>
+ <li>{{cssxref("border-block-end-style")}}</li>
+ <li>{{cssxref("border-block-end-width")}}</li>
+ <li>{{cssxref("border-block-start")}}</li>
+ <li>{{cssxref("border-block-start-color")}}</li>
+ <li>{{cssxref("border-block-start-style")}}</li>
+ <li>{{cssxref("border-block-start-width")}}</li>
+ <li>{{cssxref("border-inline-end")}}</li>
+ <li>{{cssxref("border-inline-end-color")}}</li>
+ <li>{{cssxref("border-inline-end-style")}}</li>
+ <li>{{cssxref("border-inline-end-width")}}</li>
+ <li>{{cssxref("border-inline-start")}}</li>
+ <li>{{cssxref("border-inline-start-color")}}</li>
+ <li>{{cssxref("border-inline-start-style")}}</li>
+ <li>{{cssxref("border-inline-start-width")}}</li>
+ <li>{{cssxref("inline-size")}}</li>
+ <li>{{cssxref("margin-block-end")}}</li>
+ <li>{{cssxref("margin-block-start")}}</li>
+ <li>{{cssxref("margin-inline-end")}}</li>
+ <li>{{cssxref("margin-inline-start")}}</li>
+ <li>{{cssxref("max-block-size")}}</li>
+ <li>{{cssxref("max-inline-size")}}</li>
+ <li>{{cssxref("min-block-size")}}</li>
+ <li>{{cssxref("min-inline-size")}}</li>
+ <li>{{cssxref("offset-block-end")}}</li>
+ <li>{{cssxref("offset-block-start")}}</li>
+ <li>{{cssxref("offset-inline-end")}}</li>
+ <li>{{cssxref("offset-inline-start")}}</li>
+ <li>{{cssxref("padding-block-end")}}</li>
+ <li>{{cssxref("padding-block-start")}}</li>
+ <li>{{cssxref("padding-inline-end")}}</li>
+ <li>{{cssxref("padding-inline-start")}}</li>
+</ul>
+</div>
+
+<h2 id="Anleitungen">Anleitungen</h2>
+
+<p><em>Keine.</em></p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Logical Properties')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td>Ursprüngliche Defintion</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("41.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("41.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/de/web/css/css_masken/index.html b/files/de/web/css/css_masken/index.html
new file mode 100644
index 0000000000..74001bd680
--- /dev/null
+++ b/files/de/web/css/css_masken/index.html
@@ -0,0 +1,55 @@
+---
+title: CSS Masken
+slug: Web/CSS/CSS_Masken
+tags:
+  - CSS
+  - CSS Masken
+  - CSS Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Masking
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Masken</strong> ist ein CSS Modul, das Mittel wie Maskierung und Clipping zum teilweisen oder kompletten Verstecken von Teilen visueller Elemente definiert.</p>
+
+<h2 id="Referenz">Referenz</h2>
+
+<h3 id="Eigenschaften">Eigenschaften</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("mask")}}</li>
+</ul>
+</div>
+
+<h2 id="Anleitungen">Anleitungen</h2>
+
+<p><em>Keine.</em></p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.mask")}}
diff --git a/files/de/web/css/css_namensräume/index.html b/files/de/web/css/css_namensräume/index.html
new file mode 100644
index 0000000000..e9d0879cb2
--- /dev/null
+++ b/files/de/web/css/css_namensräume/index.html
@@ -0,0 +1,51 @@
+---
+title: CSS Namensräume
+slug: Web/CSS/CSS_Namensräume
+tags:
+  - CSS
+  - CSS Namensräume
+  - Referenz
+  - Web
+  - Übersicht
+translation_of: Web/CSS/CSS_Namespaces
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Namensräume</strong> ist ein CSS Modul, das es Authoren erlaubt, <a href="/en-US/docs/Namespaces">XML Namensräume</a> in CSS anzugeben.</p>
+
+<h2 id="Referenz">Referenz</h2>
+
+<h3 id="-Regeln">@-Regeln</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@namespace")}}</li>
+</ul>
+</div>
+
+<h2 id="Anleitungen">Anleitungen</h2>
+
+<p><em>Keine.</em></p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Namespaces")}}</td>
+   <td>{{Spec2("CSS3 Namespaces")}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.at-rules.namespace")}}
diff --git a/files/de/web/css/css_positioning/index.html b/files/de/web/css/css_positioning/index.html
new file mode 100644
index 0000000000..0a9020dd54
--- /dev/null
+++ b/files/de/web/css/css_positioning/index.html
@@ -0,0 +1,64 @@
+---
+title: CSS Positioned Layout
+slug: Web/CSS/CSS_Positioning
+tags:
+  - CSS
+  - CSS Positioning
+  - Guide
+  - NeedsTranslation
+  - Overview
+  - Reference
+  - TopicStub
+translation_of: Web/CSS/CSS_Positioning
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Positioned Layout</strong> is a module of CSS that defines how to position elements on the page.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="CSS_properties">CSS properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("bottom")}}</li>
+ <li>{{cssxref("clear")}}</li>
+ <li>{{cssxref("float")}}</li>
+ <li>{{cssxref("left")}}</li>
+ <li>{{cssxref("position")}}</li>
+ <li>{{cssxref("right")}}</li>
+ <li>{{cssxref("top")}}</li>
+ <li>{{cssxref("z-index")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index">Understanding CSS z-index</a></dt>
+ <dd>Presents the notion of stacking context and explains how z-ordering works, with several examples.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Positioning') }}</td>
+   <td>{{ Spec2('CSS3 Positioning') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'visuren.html') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/de/web/css/css_positioning/understanding_z_index/adding_z-index/index.html b/files/de/web/css/css_positioning/understanding_z_index/adding_z-index/index.html
new file mode 100644
index 0000000000..ff78bd192a
--- /dev/null
+++ b/files/de/web/css/css_positioning/understanding_z_index/adding_z-index/index.html
@@ -0,0 +1,161 @@
+---
+title: Using z-index
+slug: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index
+tags:
+  - CSS
+  - Referenz
+  - z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index
+---
+<div>{{cssref}}</div>
+
+<p>The first part of this article, <a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">Stacking without the z-index property</a>, explains how stacking is arranged by default. If you want to create a custom stacking order, you can use the {{cssxref("z-index")}} property on a <a href="/en-US/docs/Web/CSS/position#Types_of_positioning">positioned</a> element.</p>
+
+<p>The <code>z-index</code> property can be specified with an integer value (positive, zero, or negative), which represents the position of the element along the z-axis. If you are not familiar with the z-axis, imagine the page as a stack of layers, each one having a number. Layers are rendered in numerical order, with larger numbers above smaller numbers.</p>
+
+<ul>
+ <li>bottom layer <em>(farthest from the observer)</em></li>
+ <li>...</li>
+ <li>Layer -3</li>
+ <li>Layer -2</li>
+ <li>Layer -1</li>
+ <li>Layer 0 <em>(default rendering layer)</em></li>
+ <li>Layer 1</li>
+ <li>Layer 2</li>
+ <li>Layer 3</li>
+ <li>...</li>
+ <li>top layer <em>(closest to the observer)</em></li>
+</ul>
+
+<div class="note">
+<p><strong>Notes:</strong></p>
+
+<ul>
+ <li>When no <code>z-index</code> property is specified, elements are rendered on the default rendering layer 0 (zero).</li>
+ <li>If several elements share the same <code>z-index</code> value (i.e., they are placed on the same layer), stacking rules explained in the section <a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">Stacking without the z-index property</a> apply.</li>
+</ul>
+</div>
+
+<p>In the following example, the layers' stacking order is rearranged using <code>z-index</code>. The <code>z-index</code> of element #5 has no effect since it is not a positioned element.</p>
+
+<p>{{EmbedLiveSample("Source_code_for_the_example", 600, 400)}}</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div id="abs1"&gt;
+  &lt;b&gt;DIV #1&lt;/b&gt;
+  &lt;br /&gt;position: absolute;
+  &lt;br /&gt;z-index: 5;
+&lt;/div&gt;
+
+&lt;div id="rel1"&gt;
+  &lt;b&gt;DIV #2&lt;/b&gt;
+  &lt;br /&gt;position: relative;
+  &lt;br /&gt;z-index: 3;
+&lt;/div&gt;
+
+&lt;div id="rel2"&gt;
+  &lt;b&gt;DIV #3&lt;/b&gt;
+  &lt;br /&gt;position: relative;
+  &lt;br /&gt;z-index: 2;
+&lt;/div&gt;
+
+&lt;div id="abs2"&gt;
+  &lt;b&gt;DIV #4&lt;/b&gt;
+  &lt;br /&gt;position: absolute;
+  &lt;br /&gt;z-index: 1;
+&lt;/div&gt;
+
+&lt;div id="sta1"&gt;
+  &lt;b&gt;DIV #5&lt;/b&gt;
+  &lt;br /&gt;no positioning
+  &lt;br /&gt;z-index: 8;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">div {
+  padding: 10px;
+  opacity: 0.7;
+  text-align: center;
+}
+
+b {
+  font-family: sans-serif;
+}
+
+#abs1 {
+  z-index: 5;
+  position: absolute;
+  width: 150px;
+  height: 350px;
+  top: 10px;
+  left: 10px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+}
+
+#rel1 {
+  z-index: 3;
+  height: 100px;
+  position: relative;
+  top: 30px;
+  border: 1px dashed #696;
+  background-color: #cfc;
+  margin: 0px 50px 0px 50px;
+}
+
+#rel2 {
+  z-index: 2;
+  height: 100px;
+  position: relative;
+  top: 15px;
+  left: 20px;
+  border: 1px dashed #696;
+  background-color: #cfc;
+  margin: 0px 50px 0px 50px;
+}
+
+#abs2 {
+  z-index: 1;
+  position: absolute;
+  width: 150px;
+  height: 350px;
+  top: 10px;
+  right: 10px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+}
+
+#sta1 {
+  z-index: 8;
+  height: 70px;
+  border: 1px dashed #996;
+  background-color: #ffc;
+  margin: 0px 50px 0px 50px;
+}
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">Stacking without the z-index property</a>: The stacking rules that apply when <code>z-index</code> is not used.</li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float">Stacking with floated blocks</a>: How floating elements are handled with stacking.</li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">The stacking context</a>: Notes on the stacking context.</li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">Stacking context example 1</a>: 2-level HTML hierarchy, z-index on the last level</li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2">Stacking context example 2</a>: 2-level HTML hierarchy, z-index on all levels</li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3">Stacking context example 3</a>: 3-level HTML hierarchy, z-index on the second level</li>
+</ul>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2>
+
+<ul>
+ <li>Author(s): Paolo Lombardi</li>
+ <li>This article is the English translation of an article I wrote in Italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under the <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a>.</li>
+ <li>Last Updated Date: November 3, 2014</li>
+</ul>
+</div>
diff --git a/files/de/web/css/css_positioning/understanding_z_index/index.html b/files/de/web/css/css_positioning/understanding_z_index/index.html
new file mode 100644
index 0000000000..7f44be02c9
--- /dev/null
+++ b/files/de/web/css/css_positioning/understanding_z_index/index.html
@@ -0,0 +1,51 @@
+---
+title: Understanding CSS z-index
+slug: Web/CSS/CSS_Positioning/Understanding_z_index
+tags:
+  - Advanced
+  - CSS
+  - Guide
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - Understanding_CSS_z-index
+  - z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index
+---
+<div>{{cssref}}</div>
+
+<p>In the most basic cases, <a href="/en-US/docs/Web/HTML">HTML</a> pages can be considered two-dimensional, because text, images, and other elements are arranged on the page without overlapping. In this case, there is a single rendering flow, and all elements are aware of the space taken by others. <span class="seoSummary">The {{cssxref("z-index")}} attribute lets you adjust the order of the layering of objects when rendering content.</span></p>
+
+<blockquote>
+<p><em>In CSS 2.1, each box has a position in three dimensions. In addition to their horizontal and vertical positions, boxes lie along a "z-axis" and are formatted one on top of the other. Z-axis positions are particularly relevant when boxes overlap visually.</em></p>
+</blockquote>
+
+<p>(from <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#z-index">CSS 2.1 Section 9.9.1 - Layered presentation</a>)</p>
+
+<p>This means that CSS style rules allow you to position boxes on layers in addition to the normal rendering layer (layer 0). The Z position of each layer is expressed as an integer representing the stacking order for rendering. Greater numbers mean closer to the observer. Z position can be controlled with the CSS <code>z-index</code> property.</p>
+
+<p>Using <code>z-index</code> appears extremely easy: a single property, assigned a single integer number, with an easy-to-understand behaviour. However, when <code>z-index</code> is applied to complex hierarchies of HTML elements, its behaviour can be hard to understand or predict. This is due to complex stacking rules. In fact a dedicated section has been reserved in the CSS specification <a class="external" href="http://www.w3.org/TR/CSS21/zindex.html">CSS-2.1 Appendix E</a> to explain these rules better.</p>
+
+<p>This article will try to explain those rules, with some simplification and several examples.</p>
+
+<ol>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">Stacking without the z-index property</a>: The stacking rules that apply when <code>z-index</code> is not used.</li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float">Stacking with floated blocks</a>: How floating elements are handled with stacking.</li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">Using z-index</a>: How to use <code>z-index</code> to change default stacking.</li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">The stacking context</a>: Notes on the stacking context.</li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">Stacking context example 1</a>: 2-level HTML hierarchy, <code>z-index</code> on the last level</li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2">Stacking context example 2</a>: 2-level HTML hierarchy, <code>z-index</code> on all levels</li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3">Stacking context example 3</a>: 3-level HTML hierarchy, <code>z-index</code> on the second level</li>
+</ol>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2>
+
+<ul>
+ <li>Author(s): Paolo Lombardi</li>
+ <li>This article is the English translation of an article I wrote in Italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under the <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a>.</li>
+ <li>Last Updated Date: July 9, 2005</li>
+</ul>
+
+<p><small><em>Author's note: Thanks to Wladimir Palant and Rod Whiteley for the review.</em></small></p>
+</div>
diff --git a/files/de/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html b/files/de/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html
new file mode 100644
index 0000000000..d814b294cf
--- /dev/null
+++ b/files/de/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html
@@ -0,0 +1,243 @@
+---
+title: The stacking context
+slug: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+tags:
+  - CSS
+  - CSS Positionierung
+  - Position
+  - Referenz
+  - z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+---
+<div>{{cssref}}</div>
+
+<p>Der <strong>Stapelungszusammenhang</strong> ist eine dreidimensionale Konzeptualisierung von HTML-Elementen entlang einer imaginären z-Achse relativ zum Benutzer, von dem angenommen wird, dass er dem Ansichtsfenster oder der Webseite zugewandt ist. HTML-Elemente füllen diesen Raum in Prioritätsreihenfolge auf der Grundlage von Elementattributen aus.</p>
+
+<h2 id="Der_Stapelungszusammenhang">Der Stapelungszusammenhang</h2>
+
+<p>Im vorherigen Teil dieses Artikels, die Verwendung von <a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">z-index</a>, wird die Darstellungsreihenfolge bestimmter Elemente durch ihren <code>z-index</code> Wert beeinflusst. Dies ist darauf zurückzuführen, dass diese Elemente spezielle Eigenschaften haben, die dazu führen, dass sie einen Stapelungszusammenhang bilden.</p>
+
+<p>Ein Stapelungszusammenhang wird an beliebiger Stelle im Dokument durch ein beliebiges Element in den folgenden Szenarien gebildet:</p>
+
+<ul>
+ <li>Root Element des Dokumentes (<code>&lt;html&gt;</code>).</li>
+ <li>Ein Element mit einem {{cssxref("position")}} Wert <code>absolute</code> oder <code>relative</code> und einem {{cssxref("z-index")}} Wert anders als <code>auto</code>.</li>
+ <li>Ein Element mit einem {{cssxref("position")}} Wert <code>fixed</code> oder <code>sticky</code> (<code>sticky</code> für alle mobilen Browser, aber nicht für ältere Desktops).</li>
+ <li>Ein Element das als Kind eines Flex-Container ({{cssxref("flexbox")}}), mit einem {{cssxref("z-index")}} Wert anders als <code>auto</code>.</li>
+ <li>Ein Element das als Kind eines Grid-Container ({{cssxref("grid")}}), mit einem {{cssxref("z-index")}} Wert anders als <code>auto</code>.</li>
+ <li>Ein Element mit einem {{cssxref("opacity")}} Wert unter <code>1</code> (siehe auch <a href="http://www.w3.org/TR/css3-color/#transparency" title="http://www.w3.org/TR/css3-color/#transparency">die Spezifikation für opacity</a>).</li>
+ <li>Ein Element mit einem {{cssxref("mix-blend-mode")}} Wert anders als <code>normal</code>.</li>
+ <li>Element with any of the following properties with Wert anders als <code>none</code>:
+  <ul>
+   <li>{{cssxref("transform")}}</li>
+   <li>{{cssxref("filter")}}</li>
+   <li>{{cssxref("perspective")}}</li>
+   <li>{{cssxref("clip-path")}}</li>
+   <li>{{cssxref("mask")}} / {{cssxref("mask-image")}} / {{cssxref("mask-border")}}</li>
+  </ul>
+ </li>
+ <li>Ein Element mit einem {{cssxref("isolation")}} Wert <code>isolate</code>.</li>
+ <li>Ein Element mit einem {{cssxref("-webkit-overflow-scrolling")}} Wert <code>touch</code>.</li>
+ <li>Ein Element mit einem {{cssxref("will-change")}} Wert, der irgendeine Eigenschaft angibt, die einen Stapelkontext auf einem nicht initialen Wert erzeugen würde (siehe auch <a href="http://dev.opera.com/articles/css-will-change-property/">this post</a>).</li>
+ <li>Ein Element mit einem {{cssxref("contain")}} Wert <code>layout</code> oder <code>paint</code> oder einen zusammengesetzten Wert, der einen von beiden enthält (d.h. <code>contain: strict</code>, <code>contain: content</code>).</li>
+</ul>
+
+<p>Innerhalb eines Stapelungszusammenhang werden die untergeordneten Elemente nach den gleichen Regeln gestapelt, die zuvor erläutert wurden. Wichtig ist, dass die <code>z-index </code>Werte der untergeordneten Stapelungszusammenhänge nur in diesem übergeordneten Kontext eine Bedeutung haben. Stapelungszusammenhänge werden im übergeordneten Stapelungszusammenhang atomar als eine einzige Einheit behandelt.</p>
+
+<p>Zusammengefasst:</p>
+
+<ul>
+ <li>Stapelungszusammenhänge können in anderen Stapelungszusammenhängen enthalten sein und zusammen eine Hierarchie von Stapelungszusammenhängen bilden.</li>
+ <li>Jeder Stapelungszusammenhang ist völlig unabhängig von seinen Geschwistern: Bei der Verarbeitung des Stapels werden nur nachkommende Elemente berücksichtigt.</li>
+ <li>Jeder Stapelungszusammenhang ist in sich geschlossen: Nachdem der Inhalt des Elements gestapelt wurde, wird das gesamte Element in der Stapelreihenfolge des übergeordneten Stapelungszusammenhanges betrachtet.</li>
+</ul>
+
+<div class="note"><strong>Hinweis:</strong> Die Hierarchie der Stapelungszusammenhänge ist eine Teilmenge der Hierarchie der HTML-Elemente, da nur bestimmte Elemente Stapelungszusammenhänge erzeugen. Man kann sagen, dass Elemente, die keinen eigenen Stapelungszusammenhang bilden, vom übergeordneten Stapelungszusammenhang <em>assimiliert</em> werden.</div>
+
+<h2 id="Das_Beispiel">Das Beispiel</h2>
+
+<p><img alt="Example of stacking rules modified using z-index" src="/@api/deki/files/913/=Understanding_zindex_04.png"></p>
+
+<p>In diesem Beispiel erzeugt jedes positionierte Element aufgrund seiner Positionierung und seiner <code>z-index</code> -Werte einen eigenen Stapelungszusammenhang. Die Hierarchie der Stapelungszusammenhang ist wie folgt organisiert:</p>
+
+<ul>
+ <li>Root
+  <ul>
+   <li>DIV #1</li>
+   <li>DIV #2</li>
+   <li>DIV #3
+    <ul>
+     <li>DIV #4</li>
+     <li>DIV #5</li>
+     <li>DIV #6</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<p>Es ist wichtig zu beachten, dass DIV #4, DIV #5 und DIV #6 Kinder von DIV #3 sind, so dass das Stapeln dieser Elemente innerhalb von DIV #3 vollständig aufgelöst wird. Sobald das Stapeln und Rendern innerhalb von DIV #3 abgeschlossen ist, wird das gesamte DIV #3-Element für das Stapeln im Wurzelelement in Bezug auf das DIV seines Geschwisters übergeben.</p>
+
+<div class="note">
+<p><strong>Notes:</strong></p>
+
+<ul>
+ <li>DIV #4 wird unter DIV #1 gerendert, weil der z-Index (5) von DIV #1 innerhalb des Stapelungszusammenhanges des Wurzelelementes gültig ist, während der z-Index (6) von DIV #4 innerhalb des Stapelungszusammenhanges von DIV #3 gültig ist. DIV #4 ist also unter DIV #1, weil DIV #4 zu DIV #3 gehört, das einen niedrigeren z-Indexwert hat.</li>
+ <li>Aus dem gleichen Grund wird DIV #2 (z-Index 2) unter DIV#5 (z-Index 1) gerendert, weil DIV #5 zu DIV #3 gehört, das einen höheren z-Index-Wert hat.</li>
+ <li>Der z-Index von DIV #3 ist 4, aber dieser Wert ist unabhängig vom z-Index von DIV #4, DIV #5 und DIV #6, da er zu einem anderen Stapelungszusammenhang gehört.</li>
+ <li>
+  <p>Eine einfache Möglichkeit, die Rendering-Reihenfolge von gestapelten Elementen entlang der Z-Achse herauszufinden, besteht darin, sie sich als eine Art "Versionsnummer" vorzustellen, wobei untergeordnete Elemente Minor-Versionsnummern unter den Major-Versionsnummern ihrer übergeordneten Elemente sind. Auf diese Weise können wir leicht erkennen, wie ein Element mit einem z-Index von 1 (DIV #5) über einem Element mit einem z-Index von 2 (DIV #2) gestapelt wird, und wie ein Element mit einem z-Index von 6 (DIV #4) unter einem Element mit einem z-Index von 5 (DIV #1) gestapelt wird. In unserem Beispiel (sortiert nach der endgültigen Rendering-Reihenfolge):</p>
+
+  <ul>
+   <li>Root
+    <ul>
+     <li>DIV #2 - z-index is 2</li>
+     <li>DIV #3 - z-index is 4
+      <ul>
+       <li>DIV #5 - z-index ist 1, gestapelt unter einem Element mit einem z-Index von 4, was eine Rendering-Reihenfolge von 4,1 ergibt</li>
+       <li>DIV #6 - z-index ist 3, gestapelt unter einem Element mit einem z-Index von 4, was eine Rendering-Reihenfolge von 4,3 ergibt</li>
+       <li>DIV #4 - z-index ist 6, gestapelt unter einem Element mit einem z-Index von 4, was zu einer Rendering-Reihenfolge von 4,6 führt</li>
+      </ul>
+     </li>
+     <li>DIV #1 - z-index is 5</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+</div>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div id="div1"&gt;
+  &lt;h1&gt;Division Element #1&lt;/h1&gt;
+  &lt;code&gt;position: relative;&lt;br/&gt;
+  z-index: 5;&lt;/code&gt;
+&lt;/div&gt;
+
+&lt;div id="div2"&gt;
+  &lt;h1&gt;Division Element #2&lt;/h1&gt;
+  &lt;code&gt;position: relative;&lt;br/&gt;
+  z-index: 2;&lt;/code&gt;
+&lt;/div&gt;
+
+&lt;div id="div3"&gt;
+  &lt;div id="div4"&gt;
+    &lt;h1&gt;Division Element #4&lt;/h1&gt;
+    &lt;code&gt;position: relative;&lt;br/&gt;
+    z-index: 6;&lt;/code&gt;
+  &lt;/div&gt;
+
+  &lt;h1&gt;Division Element #3&lt;/h1&gt;
+  &lt;code&gt;position: absolute;&lt;br/&gt;
+  z-index: 4;&lt;/code&gt;
+
+  &lt;div id="div5"&gt;
+    &lt;h1&gt;Division Element #5&lt;/h1&gt;
+    &lt;code&gt;position: relative;&lt;br/&gt;
+    z-index: 1;&lt;/code&gt;
+  &lt;/div&gt;
+
+  &lt;div id="div6"&gt;
+    &lt;h1&gt;Division Element #6&lt;/h1&gt;
+    &lt;code&gt;position: absolute;&lt;br/&gt;
+    z-index: 3;&lt;/code&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Division_Element_.231" name="Division_Element_.231">CSS</h3>
+
+<pre class="brush: css notranslate">* {
+  margin: 0;
+}
+html {
+  padding: 20px;
+  font: 12px/20px Arial, sans-serif;
+}
+div {
+  opacity: 0.7;
+  position: relative;
+}
+h1 {
+  font: inherit;
+  font-weight: bold;
+}
+#div1,
+#div2 {
+  border: 1px dashed #696;
+  padding: 10px;
+  background-color: #cfc;
+}
+#div1 {
+  z-index: 5;
+  margin-bottom: 190px;
+}
+#div2 {
+  z-index: 2;
+}
+#div3 {
+  z-index: 4;
+  opacity: 1;
+  position: absolute;
+  top: 40px;
+  left: 180px;
+  width: 330px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+  padding: 40px 20px 20px;
+}
+#div4,
+#div5 {
+  border: 1px dashed #996;
+  background-color: #ffc;
+}
+#div4 {
+  z-index: 6;
+  margin-bottom: 15px;
+  padding: 25px 10px 5px;
+}
+#div5 {
+  z-index: 1;
+  margin-top: 15px;
+  padding: 5px 10px;
+}
+#div6 {
+  z-index: 3;
+  position: absolute;
+  top: 20px;
+  left: 180px;
+  width: 150px;
+  height: 125px;
+  border: 1px dashed #009;
+  padding-top: 125px;
+  background-color: #ddf;
+  text-align: center;
+}</pre>
+
+<h4 id="Ergebnis">Ergebnis</h4>
+
+<p>{{ EmbedLiveSample('Example', '100%', '396') }}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">Stacking without the z-index property</a>: The stacking rules that apply when <code>z-index</code> is not used.</li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float">Stacking with floated blocks</a>: How floating elements are handled with stacking.</li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">Using z-index</a>: How to use <code>z-index</code> to change default stacking.</li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">Stacking context example 1</a>: 2-level HTML hierarchy, <code>z-index</code> on the last level</li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2">Stacking context example 2</a>: 2-level HTML hierarchy, <code>z-index</code> on all levels</li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3">Stacking context example 3</a>: 3-level HTML hierarchy, <code>z-index</code> on the second level</li>
+</ul>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2>
+
+<ul>
+ <li>Author(s): Paolo Lombardi</li>
+ <li>This article is the English translation of an article I wrote in Italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under the <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a>.</li>
+ <li>Last Updated Date: July 9, 2005</li>
+</ul>
+</div>
diff --git a/files/de/web/css/css_referenz/index.html b/files/de/web/css/css_referenz/index.html
new file mode 100644
index 0000000000..89a0c83e25
--- /dev/null
+++ b/files/de/web/css/css_referenz/index.html
@@ -0,0 +1,211 @@
+---
+title: CSS Referenz
+slug: Web/CSS/CSS_Referenz
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/Reference
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Verwende diese <strong>CSS-Referenz</strong> für einen <a href="#Index">alphabetischen Index</a> aller Standard-<a href="/de/docs/Web/CSS">CSS</a>-Eigenschaften, <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklassen</a>, <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelemente</a>, <a href="/de/docs/Web/CSS/CSS_Typen">Datentypen</a> und <a href="/de/docs/Web/CSS/At-rule">@-Regeln</a>. Du kannst eine Liste aller <a href="#Selektoren">Selektoren</a> und eine Liste aller <a href="#Konzepte">Konzepte</a> ansehen. Dies beinhaltet auch eine kurze Referenz zu <a href="#DOM-CSS_CSSOM">DOM-CSS / CSSOM</a>.</p>
+
+<h2 id="Grundlegende_Syntax_von_Regeln">Grundlegende Syntax von Regeln</h2>
+
+<h3 id="Syntax_von_Stilregeln">Syntax von Stilregeln</h3>
+
+<pre class="syntaxbox"><strong><var>selektorliste</var> {
+  <var>eigenschaft</var>: <var>wert</var>;</strong>
+  <var>[weitere eigenschaft:wert; Paare]</var>
+<strong>}</strong>
+
+... wobei <var>selektorliste</var>: <var>selektor[:pseudo-klasse] [::pseudo-element] [, weitere selektorlisten]</var>
+
+Siehe Listen aller <a href="#Selectors"><em>Selektoren</em></a>, <a href="#pcls"><em>Pseudo-Klassen</em></a> und <a href="#pelm"><em>Pseudo-Elemente</em></a> weiter unten.
+</pre>
+
+<h4 id="Beispiele_für_Stilregeln"><em>Beispiele für Stilregeln</em></h4>
+
+<pre class="brush: css"><em>
+strong {
+  color: red;
+}
+
+div.menu-bar li:hover &gt; ul {
+  display: block;
+}
+</em></pre>
+
+<p><em>Für eine Einführung in die Syntax von CSS-Selektoren auf Anfängerstufe, siehe <a href="/de/docs/Learn/CSS/Introduction_to_CSS/Selectors">diese Anleitung</a>. Beachte, dass jeder <a href="/de/docs/Web/CSS/Syntax">CSS-Syntax</a>-Fehler in einer Regeldefinition die gesamte Regel ungültig macht. Ungültige Regeln werden vom Browser ignoriert. Beachte dass CSS-Regeldefinitionen vollständig (ASCII) <a href="https://www.w3.org/TR/css-syntax-3/#intro">text-basiert</a> sind, wohingegegen DOM-CSS / CSSOM (das Regel-Verwaltungssystem) <a href="https://www.w3.org/TR/cssom/#introduction">objekt-basiert</a> ist.</em></p>
+
+<h3 id="Syntax_von_-Regeln"><em>Syntax von @-Regeln</em></h3>
+
+<p><em>Da die Struktur von @-Regeln stark variiert, schaue bitte bei <a href="/de/docs/Web/CSS/At-rule">@-Regel</a> nach, um die Syntax der gewünschten Regel herauszufinden.</em></p>
+
+<h2 id="Index"><em>Index</em></h2>
+
+<div class="note">
+<p><em><strong>Hinweis:</strong> Die Bezeichnungen der Eigenschaften enthalten <strong>nicht</strong> die <a href="/de/docs/Web/CSS/CSS_Properties_Reference">JavaScript-Namen</a>, wenn sie sich von den CSS-Standardbezeichnern unterscheiden.</em></p>
+</div>
+
+<div><em>{{CSS_Ref}}</em></div>
+
+<h2 id="Selektoren"><em>Selektoren</em></h2>
+
+<h3 id="Einfache_Selektoren"><a href="/de/docs/Web/CSS/CSS_Selectors#Grundlegende_Selektoren">Einfache Selektoren</a></h3>
+
+<ul>
+ <li><em><a href="/de/docs/Web/CSS/Type_selectors">Typselektor</a> <code>Elementname</code></em></li>
+ <li><em><a href="/de/docs/Web/CSS/Klassenselektoren">Klassenselektor</a> <code>.klassenname</code></em></li>
+ <li><em><a href="/de/docs/Web/CSS/ID-Selektoren">ID-Selektor</a> <code>#idname</code></em></li>
+ <li><em><a href="/de/docs/Web/CSS/Universal_selectors">Universalselektor</a> <code>*</code></em></li>
+ <li><em><a href="/de/docs/Web/CSS/Attributselektoren">Attributselektoren</a> <code>[attribute="value"]</code> etc.</em></li>
+</ul>
+
+<h3 id="Kombinatoren"><a href="/de/docs/Web/CSS/CSS_Selectors#Kombinatoren">Kombinatoren</a></h3>
+
+<ul>
+ <li><em><a href="/de/CSS/Nachfahrkombinator">Nachfahrkombinator</a> <code>A B</code></em></li>
+ <li><em><a href="/de/CSS/Kindkombinator">Kindkombinator</a> <code>A &gt; B</code></em></li>
+ <li><em><a href="/de/CSS/direkter_Nachbarkombinator">direkter Nachbarkombinator</a> <code>A + B</code></em></li>
+ <li><em><a href="/de/CSS/indirekter_Nachbarkombinator">indirekter Nachbarkombinator</a> <code> A ~ B</code></em></li>
+ <li><em><a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklassen</a></em></li>
+ <li><em><a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelemente</a></em></li>
+</ul>
+
+<h3 id="Pseudoklassen"><a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklassen</a></h3>
+
+<div class="index">
+<ul>
+ <li id="pcls">{{ Cssxref(":active") }}</li>
+ <li>{{cssxref(':any')}}</li>
+ <li>{{cssxref(':any-link')}}</li>
+ <li>{{ Cssxref(":checked") }}</li>
+ <li>{{ Cssxref(":default") }}</li>
+ <li>{{ Cssxref(":defined") }}</li>
+ <li>{{ Cssxref(":dir", ":dir()")}}</li>
+ <li>{{ Cssxref(":disabled") }}</li>
+ <li>{{ Cssxref(":empty") }}</li>
+ <li>{{ Cssxref(":enabled") }}</li>
+ <li>{{ Cssxref(":first") }}</li>
+ <li>{{ Cssxref(":first-child") }}</li>
+ <li>{{ Cssxref(":first-of-type") }}</li>
+ <li>{{ Cssxref(":fullscreen") }}</li>
+ <li>{{ Cssxref(":focus") }}</li>
+ <li>{{ Cssxref(":focus-visible") }}</li>
+ <li>{{ Cssxref(":host") }}</li>
+ <li>{{ Cssxref(":host()") }}</li>
+ <li>{{ Cssxref(":host-context()") }}</li>
+ <li>{{ Cssxref(":hover") }}</li>
+ <li>{{ Cssxref(":indeterminate") }}</li>
+ <li>{{ Cssxref(":in-range") }}</li>
+ <li>{{ Cssxref(":invalid") }}</li>
+ <li>{{ Cssxref(":lang", ":lang()") }}</li>
+ <li>{{ Cssxref(":last-child") }}</li>
+ <li>{{ Cssxref(":last-of-type") }}</li>
+ <li>{{ Cssxref(":left") }}</li>
+ <li>{{ Cssxref(":link") }}</li>
+ <li>{{ Cssxref(":not", ":not()") }}</li>
+ <li>{{ Cssxref(":nth-child", ":nth-child()") }}</li>
+ <li>{{ Cssxref(":nth-last-child", ":nth-last-child()") }}</li>
+ <li>{{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}</li>
+ <li>{{ Cssxref(":nth-of-type", ":nth-of-type()") }}</li>
+ <li>{{ Cssxref(":only-child") }}</li>
+ <li>{{ Cssxref(":only-of-type") }}</li>
+ <li>{{ Cssxref(":optional") }}</li>
+ <li>{{ Cssxref(":out-of-range") }}</li>
+ <li>{{ Cssxref(":read-only") }}</li>
+ <li>{{ Cssxref(":read-write") }}</li>
+ <li>{{ Cssxref(":required") }}</li>
+ <li>{{ Cssxref(":right") }}</li>
+ <li>{{ Cssxref(":root") }}</li>
+ <li>{{ Cssxref(":scope") }}</li>
+ <li>{{ Cssxref(":target") }}</li>
+ <li>{{ Cssxref(":valid") }}</li>
+ <li>{{ Cssxref(":visited") }}</li>
+</ul>
+</div>
+
+<h3 id="Pseudoelemente"><a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelemente</a></h3>
+
+<div class="index">
+<ul>
+ <li id="pelm">{{ Cssxref("::after") }}</li>
+ <li>{{ Cssxref("::backdrop") }}</li>
+ <li>{{ Cssxref("::before") }}</li>
+ <li>{{ Cssxref("::cue") }}</li>
+ <li>{{ Cssxref("::first-letter") }}</li>
+ <li>{{ Cssxref("::first-line") }}</li>
+ <li>{{ Cssxref("::grammar-error") }} {{experimental_inline}}</li>
+ <li>{{ Cssxref("::marker") }} {{experimental_inline}}</li>
+ <li>{{ Cssxref("::placeholder") }} {{experimental_inline}}</li>
+ <li>{{ Cssxref("::selection") }}</li>
+ <li>{{ Cssxref("::spelling-error") }} {{experimental_inline}}</li>
+</ul>
+</div>
+
+<div class="note">
+<p><strong>Siehe auch:</strong> Eine vollständige <a href="https://www.w3.org/TR/selectors/#selectors">Liste der Selektoren</a> in der Selectors Level 3 Spezifikation.</p>
+</div>
+
+<h2 id="Konzepte">Konzepte</h2>
+
+<h3 id="Syntax_Semantik">Syntax &amp; Semantik</h3>
+
+<ul>
+ <li><a href="/de/docs/Web/CSS/Syntax">CSS-Syntax</a></li>
+ <li><a href="/de/docs/Web/CSS/At-rule">@-Regeln</a></li>
+ <li><a href="/de/docs/Web/CSS/Cascade">Kaskaden</a></li>
+ <li><a href="/de/CSS/Kommentare">Kommentare</a></li>
+ <li><a href="/de/docs/Glossary/Descriptor_(CSS)">Deskriptor</a></li>
+ <li><a href="/de/docs/Web/CSS/inheritance">Vererbung</a></li>
+ <li><a href="/de/docs/Web/CSS/Shorthand_properties">Shorthand-Eigenschaften</a></li>
+ <li><a href="/de/CSS/Spezifität">Spezifität</a></li>
+ <li><a href="/de/docs/Web/CSS/Value_definition_syntax">Wert-Definition-Syntax</a></li>
+</ul>
+
+<h3 id="Werte">Werte</h3>
+
+<ul>
+ <li><a href="/de/docs/Web/CSS/actual_value">tatsächlicher Wert</a></li>
+ <li><a href="/de/docs/Web/CSS/computed_value">berechneter Wert</a></li>
+ <li><a href="/de/docs/Web/CSS/initial_value">initialer Wert</a></li>
+ <li><a href="/de/docs/Web/CSS/resolved_value">aufgelöster Wert</a></li>
+ <li><a href="/de/docs/Web/CSS/specified_value">angegebener Wert</a></li>
+ <li><a href="/de/docs/Web/CSS/used_value">verwendeter Wert</a></li>
+</ul>
+
+<h3 id="Layout">Layout</h3>
+
+<ul>
+ <li><a href="/de/docs/Web/Guide/CSS/Block_formatting_context">Block-Formatierung-Kontext</a></li>
+ <li><a href="/de/CSS/Boxmodell">Boxmodell</a></li>
+ <li><a href="/de/docs/Web/CSS/All_About_The_Containing_Block">Beinhaltender Block</a></li>
+ <li><a href="/de/docs/Web/CSS/Layout_mode">Layout-Modus</a></li>
+ <li><a href="/de/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Margin-Collapsing</a></li>
+ <li><a href="/de/docs/Web/CSS/Replaced_element">Ersetzte Elemente</a></li>
+ <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">Stapel-Kontext</a></li>
+ <li><a href="/de/docs/Web/Guide/CSS/Visual_formatting_model">Visuelles Formatierungsmodel</a></li>
+</ul>
+
+<h2 id="DOM-CSS_CSSOM">DOM-CSS / CSSOM</h2>
+
+<h3 id="Wichtigste_Objekttypen">Wichtigste Objekttypen</h3>
+
+<ul>
+ <li>document.<a href="/de/docs/Web/API/Document/styleSheets">styleSheets</a></li>
+ <li>styleSheets[i].<a href="/de/docs/Web/API/CSSRuleList">cssRules</a></li>
+ <li>cssRules[i].<a href="/de/docs/Web/API/CSSRule/cssText">cssText</a> (selector &amp; style)</li>
+ <li>cssRules[i].<a href="/de/docs/Web/API/CSSStyleRule/selectorText">selectorText</a></li>
+ <li>elem.<a href="/de/docs/Web/API/HTMLElement/style">style</a></li>
+ <li>elem.style.<a href="/de/docs/Web/API/CSSStyleDeclaration/cssText">cssText</a> (just style)</li>
+ <li>elem.<a href="/de/docs/Web/API/Element/className">className</a></li>
+ <li>elem.<a href="/de/docs/Web/API/Element/classList">classList</a></li>
+</ul>
+
+<h3 id="Wichtige_Methoden">Wichtige Methoden</h3>
+
+<ul>
+ <li>{{domxref("CSSStyleSheet.insertRule")}}</li>
+ <li>{{domxref("CSSStyleSheet.deleteRule")}}</li>
+</ul>
diff --git a/files/de/web/css/css_ruby/index.html b/files/de/web/css/css_ruby/index.html
new file mode 100644
index 0000000000..f2aaf73a9f
--- /dev/null
+++ b/files/de/web/css/css_ruby/index.html
@@ -0,0 +1,97 @@
+---
+title: CSS Ruby
+slug: Web/CSS/CSS_Ruby
+tags:
+  - CSS
+  - CSS Ruby
+  - Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Ruby
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Ruby</strong> ist ein CSS Modul, das das Darstellungsmodell und die Formatierungssteuerung zur Anzeige von Ruby Anmerkungen bietet, eine Form von zwischenzeiligen Anmerkungen, kurze Texte entlang des Basistexts.</p>
+
+<h2 id="Referenz">Referenz</h2>
+
+<h3 id="CSS_Eigenschaften">CSS Eigenschaften</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("ruby-align")}}</li>
+ <li>{{cssxref("ruby-position")}}</li>
+</ul>
+</div>
+
+<h2 id="Anleitungen">Anleitungen</h2>
+
+<p><em>Keine.</em></p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Ruby')}}</td>
+   <td>{{Spec2('CSS3 Ruby')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(38)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(38)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/de/web/css/css_selectors/index.html b/files/de/web/css/css_selectors/index.html
new file mode 100644
index 0000000000..1b0966e479
--- /dev/null
+++ b/files/de/web/css/css_selectors/index.html
@@ -0,0 +1,153 @@
+---
+title: CSS Selectors
+slug: Web/CSS/CSS_Selectors
+tags:
+  - CSS
+  - CSS Selektoren
+  - Referenz
+  - Selectors
+  - Selektoren
+  - Übersicht
+translation_of: Web/CSS/CSS_Selectors
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>Selektoren</strong> definieren, auf welche Elemente eine Reihe von CSS Regeln angewendet wird.</p>
+
+<h2 id="Grundlegende_Selektoren">Grundlegende Selektoren</h2>
+
+<dl>
+ <dt><a href="/de/docs/Web/CSS/Type_selectors">Typselektoren</a></dt>
+ <dd>Dieser grundlegende Selektor wählt alle Elemente aus, die den angegebenen <em>Namen</em> matchen.<br>
+ <strong>Syntax:</strong> <code><var>eltname</var></code><br>
+ <strong>Beispiel:</strong> <code>input</code> matcht jedes {{HTMLElement('input')}} Element.</dd>
+ <dt><a href="/de/docs/Web/CSS/Class_selectors">Klassenselektoren</a></dt>
+ <dd>Dieser grundlegende Selektor wählt Elemente anhand ihres <code>class</code> Attributs aus.<br>
+ <strong>Syntax:</strong> <code>.<var>classname</var></code><br>
+ <strong>Beispiel:</strong> <code>.index</code> matcht jedes Element, das die Klasse <code>index</code> besitzt (wahrscheinlich definiert durch ein <code>class="index"</code> Attribut oder ähnliches).</dd>
+ <dt><a href="/de/docs/Web/CSS/ID_selectors">ID-Selektoren</a></dt>
+ <dd>Dieser grundlegende Selektor wählt Knoten anhand des Wertes ihres <code>id</code> Attributs aus. Es sollte nur ein Element mit der angegebenen ID in einem Dokument geben.<br>
+ <strong>Syntax:</strong> <code>#<var>idname</var></code><br>
+ <strong>Beispiel:</strong> <code>#toc</code> matcht das Element, das die ID <code>toc</code> hat (wahrscheinlich definiert durch ein <code>id="toc"</code> Attribut oder ähnliches).</dd>
+ <dt><a href="/de/docs/Web/CSS/Universal_selectors">Universalselektoren</a></dt>
+ <dd>Dieser grundlegende Selektor wählt alle Knoten aus. Er existiert auch in einer Ein-Namensraum- und einer Alle-Namensräume-Variante.<br>
+ <strong>Syntax:</strong> <code>* <var>ns</var>|* *|*</code><br>
+ <strong>Beispiel:</strong> <code>*</code> matcht alle Elemente des Dokuments.</dd>
+ <dt><a href="/de/docs/Web/CSS/Attributselektoren">Attributselektoren</a></dt>
+ <dd>Dieser grundlegende Selektor wählt Knoten anhand des Wertes eines ihrer Attribute aus.<br>
+ <strong>Syntax:</strong> <code>[<var>attr</var>] [<var>attr</var>=<var>value</var>] [<var>attr</var>~=<var>value</var>] [<var>attr</var>|=<var>value</var>] [<var>attr</var>^=<var>value</var>] [<var>attr</var>$=<var>value</var>] [<var>attr</var>*=<var>value</var>]</code><br>
+ <strong>Beispiel:</strong> <code>[autoplay]</code> matcht alle Elemente, deren <code>autoplay</code> Attribut (auf einen beliebigen Wert) gesetzt ist.</dd>
+</dl>
+
+<h2 id="Kombinatoren">Kombinatoren</h2>
+
+<dl>
+ <dt><a href="/de/docs/Web/CSS/Adjacent_sibling_selectors">Angrenzende Geschwisterselektoren</a></dt>
+ <dd>Der <code>'+'</code>-Kombinator wählt Knoten aus, die direkt dem davor angegebenen Element folgen.<br>
+ <strong>Syntax:</strong> <code><var>A</var> + <var>B</var></code><br>
+ <strong>Beispiel:</strong> <code>h2 + p</code> matcht jedes {{HTMLElement('p')}}, das direkt einem {{HTMLElement('h2')}} folgt.</dd>
+ <dt><a href="/de/docs/Web/CSS/General_sibling_selectors" style="">Allgemeine Geschwisterselektoren</a></dt>
+ <dd>Der <code>'~'</code>-Kombinator wählt Knoten aus, die dem davor angegeben Element (nicht zwingend direkt) folgen, falls sie sich dasselbe Elternelement teilen.<br>
+ <strong>Syntax:</strong> <code><var>A</var> ~ <var>B</var></code><br>
+ <strong>Beispiel:</strong> <code>p ~ span</code> matcht alle {{HTMLElement('span')}} Elemente, die einem {{HTMLElement('p')}} Element innerhalb desselben Elements folgen.</dd>
+ <dt><a href="/de/docs/Web/CSS/Child_selectors">Kindselektoren</a></dt>
+ <dd>Der <code>'&gt;'</code>-Kombinator wählt Knoten aus, die direkte Kinder des davor angegebenen Elements sind.<br>
+ <strong>Syntax:</strong> <code><var>A</var> &gt; <var>B</var></code><br>
+ <strong>Beispiel:</strong> <code>ul &gt; li</code> matcht alle {{HTMLElement('li')}} Elemente, die innerhalb eines {{HTMLElement('ul')}} Element sind.</dd>
+ <dt><a href="/de/docs/Web/CSS/Descendant_selectors">Nachfahrenselektoren</a></dt>
+ <dd>Der <code>' '</code>-Kombinator wählt Knoten aus, die (nicht zwangsweise direkte) Kinder des davor angegebenen Elements sind.<br>
+ <strong>Syntax:</strong> <code><var>A</var> <var>B</var></code><br>
+ <strong>Beispiel:</strong> <code>div span</code> matcht jedes {{HTMLElement('span')}} Element, das innerhalb eines {{HTMLElement('div')}} Elements ist.</dd>
+</dl>
+
+<h2 id="Pseudoelemente">Pseudoelemente</h2>
+
+<p><a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelemente</a> sind Abstraktionen des Baums, die Elemente außerhalb von dem, was HTML macht, repräsentieren. Zum Beispiel hat HTML kein Element, das den ersten Buchstaben oder die erste Zeile eines Absatzes beschreibt, oder die Markierung in einer Liste. Pseudoelemente repräsentieren diese Elemente und erlauben es, ihnen CSS Regeln zuzuweisen: dadurch können diese Elemente unabhängig gestylt werden.</p>
+
+<h2 id="Pseudoklassen">Pseudoklassen</h2>
+
+<p><a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklassen</a> erlauben es, Elemente anhand von Informationen auszuwählen, die nicht im Dokumentbaum hinterlegt sind, wie ein Status, oder die schwer zu extrahieren sind. Z. B. ob ein Link zuvor bereits besucht wurde oder nicht.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>1</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>3.0</td>
+   <td>3.5</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>1.5</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/de/web/css/css_shapes/index.html b/files/de/web/css/css_shapes/index.html
new file mode 100644
index 0000000000..fce870138d
--- /dev/null
+++ b/files/de/web/css/css_shapes/index.html
@@ -0,0 +1,98 @@
+---
+title: CSS Shapes
+slug: Web/CSS/CSS_Shapes
+tags:
+  - CSS
+  - CSS Formen
+  - CSS Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Shapes
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Shapes</strong> ist ein CSS Modul, das geometrische Formen definiert, die in CSS Werten verwendet werden können.</p>
+
+<h2 id="Referenz">Referenz</h2>
+
+<h3 id="Eigenschaften">Eigenschaften</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("shape-outside")}}</li>
+ <li>{{cssxref("shape-margin")}}</li>
+ <li>{{cssxref("shape-image-threshold")}}</li>
+</ul>
+</div>
+
+<h2 id="Anleitungen">Anleitungen</h2>
+
+<p><em>Keine.</em></p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Shapes")}}</td>
+   <td>{{Spec2("CSS Shapes")}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>37</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>8.0 {{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8.0 {{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/de/web/css/css_table/index.html b/files/de/web/css/css_table/index.html
new file mode 100644
index 0000000000..8447a21246
--- /dev/null
+++ b/files/de/web/css/css_table/index.html
@@ -0,0 +1,101 @@
+---
+title: CSS Table
+slug: Web/CSS/CSS_Table
+tags:
+  - CSS
+  - CSS Referenz
+  - CSS Table
+  - Übersicht
+translation_of: Web/CSS/CSS_Table
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Table</strong> ist ein CSS Modul, das definiert, wie Tabellendaten dargestellt werden.</p>
+
+<h2 id="Referenz">Referenz</h2>
+
+<h3 id="Eigenschaften">Eigenschaften</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("border-collapse")}}</li>
+ <li>{{cssxref("border-spacing")}}</li>
+ <li>{{cssxref("caption-side")}}</li>
+ <li>{{cssxref("empty-cells")}}</li>
+ <li>{{cssxref("table-layout")}}</li>
+ <li>{{cssxref("vertical-align")}}</li>
+</ul>
+</div>
+
+<h2 id="Anleitungen">Anleitungen</h2>
+
+<p><em>Keine.</em></p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS2.1", "tables.html")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>4.0</td>
+   <td>4.0</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/de/web/css/css_text/index.html b/files/de/web/css/css_text/index.html
new file mode 100644
index 0000000000..cb9b073d14
--- /dev/null
+++ b/files/de/web/css/css_text/index.html
@@ -0,0 +1,123 @@
+---
+title: CSS Text
+slug: Web/CSS/CSS_Text
+tags:
+  - CSS
+  - CSS Text
+  - Übersicht
+translation_of: Web/CSS/CSS_Text
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Text</strong> ist ein CSS Modul, das definiert, wie Textmanipulationen durchgeführt werden, wie Zeilenumbrüche, Blocksatz und Ausrichtung, Leerraumverhalten und Texttransformationen.</p>
+
+<h2 id="Referenz">Referenz</h2>
+
+<h3 id="Eigenschaften">Eigenschaften</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("hyphens")}}</li>
+ <li>{{cssxref("letter-spacing")}}</li>
+ <li>{{cssxref("line-break")}}</li>
+ <li>{{cssxref("overflow-wrap")}}</li>
+ <li>{{cssxref("tab-size")}}</li>
+ <li>{{cssxref("text-align")}}</li>
+ <li>{{cssxref("text-align-last")}}</li>
+ <li>{{cssxref("text-indent")}}</li>
+ <li>{{cssxref("text-size-adjust")}}</li>
+ <li>{{cssxref("text-transform")}}</li>
+ <li>{{cssxref("white-space")}}</li>
+ <li>{{cssxref("word-break")}}</li>
+ <li>{{cssxref("word-spacing")}}</li>
+ <li>{{cssxref("word-wrap")}}</li>
+</ul>
+</div>
+
+<h2 id="Anleitungen">Anleitungen</h2>
+
+<p><em>Keine.</em></p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Logical Properties')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td>Updates some properties to be independent of the directionality of the text.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Text')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>3</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/de/web/css/css_textdekoration/index.html b/files/de/web/css/css_textdekoration/index.html
new file mode 100644
index 0000000000..389d7f6a5e
--- /dev/null
+++ b/files/de/web/css/css_textdekoration/index.html
@@ -0,0 +1,65 @@
+---
+title: CSS Textdekoration
+slug: Web/CSS/CSS_Textdekoration
+tags:
+  - CSS
+  - CSS Referenz
+  - CSS Textdekoration
+  - Übersicht
+translation_of: Web/CSS/CSS_Text_Decoration
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Text Decoration</strong> ist ein CSS Modul, das Features in Bezug auf Textdekoration definiert, wie zum Beispiel Unterstreichungen, Textschatten und Betonungsmarker.</p>
+
+<h2 id="CSS_Eigenschaften">CSS Eigenschaften</h2>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("letter-spacing")}}</li>
+ <li>{{cssxref("text-align")}}</li>
+ <li>{{cssxref("text-decoration")}}</li>
+ <li>{{cssxref("text-decoration-color")}}</li>
+ <li>{{cssxref("text-decoration-line")}}</li>
+ <li>{{cssxref("text-decoration-style")}}</li>
+ <li>{{cssxref("text-indent")}}</li>
+ <li>{{cssxref("text-rendering")}}</li>
+ <li>{{cssxref("text-shadow")}}</li>
+ <li>{{cssxref("text-transform")}}</li>
+ <li>{{cssxref("white-space")}}</li>
+ <li>{{cssxref("word-spacing")}}</li>
+</ul>
+</div>
+
+<h2 id="Anleitungen">Anleitungen</h2>
+
+<p><em>Keine.</em></p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text Decoration')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/de/web/css/css_transforms/css_transformationen_verwenden/index.html b/files/de/web/css/css_transforms/css_transformationen_verwenden/index.html
new file mode 100644
index 0000000000..83a9ada0d2
--- /dev/null
+++ b/files/de/web/css/css_transforms/css_transformationen_verwenden/index.html
@@ -0,0 +1,248 @@
+---
+title: CSS Transformationen verwenden
+slug: Web/CSS/CSS_Transforms/CSS_Transformationen_verwenden
+tags:
+  - CSS
+  - CSS Transformationen
+  - CSS3
+  - Fortgeschritten
+  - Guide
+translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms
+---
+<div>{{CSSRef}}</div>
+
+<p>Durch Modifizierung des Koordinatenraums ändern <strong>CSS Transformationen</strong> den Umriss und die Position des betreffenden Inhalts ohne den normalen Dokumentfluss zu unterbrechen. Diese Anleitung bietet eine Einführung in die Verwendung von Transformationen.</p>
+
+<p>CSS Transformationen sind als eine Reihe von CSS Eigenschaften implementiert, die es erlauben, affine lineare Transformationen auf HTML Elemente anzuwenden. Diese Transformationen beinhalten Drehung, Verzerrung, Skalierung und Verschiebung sowohl im ebenen als auch im 3D Raum.</p>
+
+<h2 id="CSS_Transformationseigenschaften">CSS Transformationseigenschaften</h2>
+
+<p>Zwei Haupteigenschaften werden dazu verwendet, CSS Transformationen zu definieren: {{cssxref("transform")}} und {{cssxref("transform-origin")}}.</p>
+
+<dl>
+ <dt>{{cssxref("transform-origin")}}</dt>
+ <dd>Bestimmt die Position des Ursprungs. Standardmäßig ist dieser in der Mitte des Elements und kann verschoben werden. Er wird von mehreren Transformationen verwendet wie Drehung, Skalierung oder Verzerrung, die einen bestimmten Punkt als Parameter benötigen.</dd>
+ <dt>{{cssxref("transform")}}</dt>
+ <dd>Bestimmt die Transformationen, die auf das Element angewendet werden. Sie ist eine leerzeichenseparierte Liste von Transformationen, welche eine nach der anderen angewendet werden, wie durch die Zusammensetzungsoperation verlangt.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Drehung">Drehung</h3>
+
+<p>Dieses Beispiel erstellt einen iframe, der Googles Homepage beinhaltet, die um 90 Grad um die linke untere Ecke gedreht wurde.</p>
+
+<p><a class="button liveSample" href="/@api/deki/files/2921/=rotated-google-sample.html" title="/@api/deki/files/2921/=rotated-google-sample.html">Livebeispiel ansehen</a> <a class="button liveSample" href="/@api/deki/files/2920/=google-rotated.png" title="/@api/deki/files/2920/=google-rotated.png">Screenshot des Beispiels ansehen</a></p>
+
+<pre class="brush: html">&lt;div style="transform: rotate(90deg); transform-origin: bottom left;"&gt;
+  &lt;iframe src="http://www.google.com/" width="500" height="600"&gt;&lt;/iframe&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Verzerrung_und_Verschiebung">Verzerrung und Verschiebung</h3>
+
+<p>Dieses Beispiel erstellt einen iframe, der Googles Homepage beinhaltet, verzerrt um 10 Grad und verschoben um 150 Pixel auf der x-Achse.</p>
+
+<p><a class="button liveSample" href="/@api/deki/files/2922/=skewed-google-sample.html" title="http://developer.mozilla.org/editor/fckeditor/core/editor/@api/deki/files/2922/=skewed-google-sample.html">Livebeispiel ansehen</a>  <a class="button liveSample" href="/@api/deki/files/2923/=skewed-google.png" title="/@api/deki/files/2923/=skewed-google.png">Screenshot des Beispiels ansehen</a></p>
+
+<pre class="brush: html">&lt;div style="transform: skewx(10deg) translatex(150px);
+            transform-origin: bottom left;"&gt;
+  &lt;iframe src="http://www.google.com/" width="600" height="500"&gt;&lt;/iframe&gt;
+&lt;/div&gt;
+</pre>
+
+<h2 id="3D-spezifische_CSS_Eigenschaften">3D-spezifische CSS Eigenschaften</h2>
+
+<p>Die Anwendung von CSS Transformationen im dreidimensionalen Raum ist ein wenig komplexer. Zunächst muss der 3D Raum konfiguriert werden, indem ihm eine Perspektive gegeben wird. Anschließend muss konfiguriert werden, wie die 2D Elemente sich in diesem Raum verhalten.</p>
+
+<h3 id="Eine_Perspektive_einrichten">Eine Perspektive einrichten</h3>
+
+<p>Das erste Element ist das Setzen der <em>Perspektive</em>. Die Perspektive ist, was den dreidimensionalen Eindruck vermittelt. Je weiter weg Elemente vom Betrachter sind, desto kleiner sind sie.</p>
+
+<p>Wie schnell sie kleiner werden, wird durch die {{cssxref("perspective")}} Eigenschaft bestimmt. Je kleiner deren Wert ist, desto tiefer ist die Perspektive.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th><code>perspective:0;</code></th>
+   <th><code>perspective:250px;</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <div class="container" style="width: 200px; height: 200px; margin: 75px 0 0 75px; border: none;">
+    <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 0; -webkit-perspective: 0; perspective: 0; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -moz-perspective-origin: 150% 150%; -webkit-perspective-origin: 150% 150%; perspective-origin: 150% 150%;">
+    <div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;">   </div>
+
+    <div class="front">1</div>
+
+    <div class="back">2</div>
+
+    <div class="right">3</div>
+
+    <div class="left">4</div>
+
+    <div class="top">5</div>
+
+    <div class="bottom">6</div>
+    </div>
+    </div>
+   </td>
+   <td>
+    <div class="container" style="width: 200px; height: 200px; margin: 75px 0 0 75px; border: none;">
+    <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 250px; -webkit-perspective: 250px; perspective: 250px; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -moz-perspective-origin: 150% 150%; -webkit-perspective-origin: 150% 150%; perspective-origin: 150% 150%;">
+    <div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;">   </div>
+
+    <div class="front">1</div>
+
+    <div class="back">2</div>
+
+    <div class="right">3</div>
+
+    <div class="left">4</div>
+
+    <div class="top">5</div>
+
+    <div class="bottom">6</div>
+    </div>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th><code>perspective:300px;</code></th>
+   <th><code>perspective:350px;</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <div class="container" style="width: 200px; height: 200px; margin: 75px 0 0 75px; border: none;">
+    <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 300px; -moz-transform-style: preserve-3d; -moz-perspective-origin: 150% 150%; -webkit-perspective: 300px; -webkit-transform-style: preserve-3d; -webkit-perspective-origin: 150% 150%; perspective: 300px; transform-style: preserve-3d; perspective-origin: 150% 150%;">
+    <div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;">   </div>
+
+    <div class="front">1</div>
+
+    <div class="back">2</div>
+
+    <div class="right">3</div>
+
+    <div class="left">4</div>
+
+    <div class="top">5</div>
+
+    <div class="bottom">6</div>
+    </div>
+    </div>
+   </td>
+   <td>
+    <div class="container" style="width: 200px; height: 200px; margin: 75px 0 0 75px; border: none;">
+    <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 350px; -moz-transform-style: preserve-3d; -moz-perspective-origin: 150% 150%; -webkit-perspective: 350px; -webkit-transform-style: preserve-3d; -webkit-perspective-origin: 150% 150%; perspective: 350px; transform-style: preserve-3d; perspective-origin: 150% 150%;">
+    <div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;">   </div>
+
+    <div class="front">1</div>
+
+    <div class="back">2</div>
+
+    <div class="right">3</div>
+
+    <div class="left">4</div>
+
+    <div class="top">5</div>
+
+    <div class="bottom">6</div>
+    </div>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Das zweite Element ist die Konfiguration der Position des Betrachters mittels der {{cssxref("perspective-origin")}} Eigenschaft. Standardmäßig ist die Perspektive auf den Betrachter zentriert, was nicht immer passend ist.</p>
+
+<div>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th><code>perspective-origin:150px 150px;</code></th>
+   <th><code>perspective-origin:50% 50%;</code></th>
+   <th><code>perspective-origin:-50px -50px;</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <div class="container" style="width: 100px; height: 100px; margin: 25px; border: none;">
+    <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 300px; -moz-transform-style: preserve-3d; -moz-perspective-origin: 150% 150%; -webkit-perspective: 300px; -webkit-transform-style: preserve-3d; -webkit-perspective-origin: 150% 150%; perspective: 300px; transform-style: preserve-3d; perspective-origin: 150% 150%;">
+    <div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;">   </div>
+
+    <div class="front">1</div>
+
+    <div class="back">2</div>
+
+    <div class="right">3</div>
+
+    <div class="left">4</div>
+
+    <div class="top">5</div>
+
+    <div class="bottom">6</div>
+    </div>
+    </div>
+   </td>
+   <td>
+    <div class="container" style="width: 100px; height: 100px; margin: 25px; border: none;">
+    <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 300px; -moz-transform-style: preserve-3d; -moz-perspective-origin: 50% 50%; -webkit-perspective: 300px; -webkit-transform-style: preserve-3d; -webkit-perspective-origin: 50% 50%; perspective: 300px; transform-style: preserve-3d; perspective-origin: 50% 50%;">
+    <div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;">   </div>
+
+    <div class="front">1</div>
+
+    <div class="back">2</div>
+
+    <div class="right">3</div>
+
+    <div class="left">4</div>
+
+    <div class="top">5</div>
+
+    <div class="bottom">6</div>
+    </div>
+    </div>
+   </td>
+   <td>
+    <div class="container" style="width: 100px; height: 100px; margin: 25px; border: none;">
+    <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 300px; -moz-transform-style: preserve-3d; -moz-perspective-origin: -50% -50%; -webkit-perspective: 300px; -webkit-transform-style: preserve-3d; -webkit-perspective-origin: -50% -50%; perspective: 300px; transform-style: preserve-3d; perspective-origin: -50% -50%;">
+    <div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;">   </div>
+
+    <div class="front">1</div>
+
+    <div class="back">2</div>
+
+    <div class="right">3</div>
+
+    <div class="left">4</div>
+
+    <div class="top">5</div>
+
+    <div class="bottom">6</div>
+    </div>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Sobald dies getan ist, kann mit der Arbeit am Element im dreidimensionalen Raum begonnen werden.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/Guide/Events/Gerätausrichtung_mit_3D_Transformationen_verwenden">Gerätausrichtung mit 3D Transformationen verwenden</a></li>
+ <li><a href="http://desandro.github.com/3dtransforms/">Einführung in CSS 3D Transformationen</a> (Blogeintrag von David DeSandro in Englisch)</li>
+</ul>
diff --git a/files/de/web/css/css_transforms/index.html b/files/de/web/css/css_transforms/index.html
new file mode 100644
index 0000000000..142b07aed1
--- /dev/null
+++ b/files/de/web/css/css_transforms/index.html
@@ -0,0 +1,152 @@
+---
+title: CSS Transforms
+slug: Web/CSS/CSS_Transforms
+tags:
+  - CSS
+  - CSS Reference
+  - Experimental
+  - NeedsTranslation
+  - Overview
+  - TopicStub
+translation_of: Web/CSS/CSS_Transforms
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<p><strong>CSS Transforms</strong> is a module of CSS that defines how elements styled with CSS can be transformed in two-dimensional or three-dimensional space.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="CSS_Properties">CSS Properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("backface-visibility")}}</li>
+ <li>{{cssxref("perspective")}}</li>
+ <li>{{cssxref("perspective-origin")}}</li>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("transform-box")}}</li>
+ <li>{{cssxref("transform-origin")}}</li>
+ <li>{{cssxref("transform-style")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">Using CSS transforms</a></dt>
+ <dd>Step-by-step tutorial about how to transform elements styled with CSS.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Transforms') }}</td>
+   <td>{{ Spec2('CSS3 Transforms') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>
+    <p>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br>
+     36</p>
+   </td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop("16.0")}}<sup>[2]</sup></td>
+   <td>9.0{{property_prefix("-ms")}}<sup>[3]</sup><br>
+    10.0</td>
+   <td>10.5{{property_prefix("-o")}}<br>
+    12.10<br>
+    15.0{{property_prefix("-webkit")}}<br>
+    23</td>
+   <td>3.1{{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td>3D Support</td>
+   <td>12.0{{property_prefix("-webkit")}}<br>
+    36</td>
+   <td>10.0{{property_prefix("-moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10.0</td>
+   <td>15.0{{property_prefix("-webkit")}}<br>
+    23</td>
+   <td>4.0{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatAndroid(2.1)}}{{property_prefix("-webkit")}}<sup>[4]</sup></td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<br>
+    11.0{{property_prefix("-webkit")}}<sup>[5]</sup></td>
+   <td>11.5{{property_prefix("-webkit")}}</td>
+   <td>3.2 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td>3D Support</td>
+   <td>{{CompatAndroid(3.0)}}{{property_prefix("-webkit")}}</td>
+   <td>{{CompatVersionUnknown}}{{ property_prefix("-webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>22{{property_prefix("-webkit")}}</td>
+   <td>3.2 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Gecko 14.0 removed the experimental support for <code>skew()</code>, but it was reintroduced in Gecko 15.0 for compatibility reasons. As it is non-standard and will likely be removed in the future, do not use it.</p>
+
+<p>[2] Before Firefox 16, the translation values of <code>matrix()</code> and <code>matrix3d()</code> could be {{cssxref("&lt;length&gt;")}}, in addition to the standard {{cssxref("&lt;number&gt;")}}.</p>
+
+<p>[3] Internet Explorer 5.5 or later supports a proprietary <a href="http://msdn.microsoft.com/en-us/library/ms533014%28VS.85,loband%29.aspx">Matrix Filter</a> which can be used to achieve a similar effect.</p>
+
+<p>Internet Explorer 9.0 or earlier has no support for 3D transforms, mixing 3D and 2D transform functions. such as <code>-ms-transform:rotate(10deg) translateZ(0);</code> will prevent the entire property from being applied.</p>
+
+<p>[4] Android 2.3 has a bug where input forms will "jump" when typing, if any container element has a <code>-webkit-transform</code>.</p>
+
+<p>[5] Internet Explorer 11.0 supports the {{property_prefix("-webkit")}} <a href="https://msdn.microsoft.com/library/jj127312#code-snippet-1">prefixed variant as an alias for the default one</a>.</p>
+
+<p> </p>
diff --git a/files/de/web/css/css_transitions/index.html b/files/de/web/css/css_transitions/index.html
new file mode 100644
index 0000000000..b9bc67d16f
--- /dev/null
+++ b/files/de/web/css/css_transitions/index.html
@@ -0,0 +1,116 @@
+---
+title: CSS Übergänge
+slug: Web/CSS/CSS_Transitions
+tags:
+  - CSS
+  - CSS Übergänge
+  - Experimentell
+  - Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Transitions
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><strong>CSS Transitions</strong> ist ein CSS Modul, das definiert, wie weiche Übergänge zwischen Werten von CSS Eigenschaften erstellt werden. Es erlaubt es nicht nur, diese zu erstellen, sondern definiert auch deren Entwicklung unter Verwendung von Timingfunktionen.</p>
+
+<h2 id="Referenz">Referenz</h2>
+
+<h3 id="Eigenschaften">Eigenschaften</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("transition")}}</li>
+ <li>{{cssxref("transition-delay")}}</li>
+ <li>{{cssxref("transition-duration")}}</li>
+ <li>{{cssxref("transition-property")}}</li>
+ <li>{{cssxref("transition-timing-function")}}</li>
+</ul>
+</div>
+
+<h2 id="Anleitungen">Anleitungen</h2>
+
+<dl>
+ <dt><a href="/de/docs/Web/Guide/CSS/CSS_Übergänge_verwenden">CSS Übergänge verwenden</a></dt>
+ <dd>Schritt-für-Schritt-Tutorial darüber, wie weiche Übergänge mithilfe von CSS erstellt werden. Dieser Artikel beschreibt jede relevante CSS Eigenschaft und erklärt, wie diese interagieren.</dd>
+</dl>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>1.0 {{property_prefix("-webkit")}}<br>
+    26.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}} {{property_prefix("-moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10.0</td>
+   <td>11.6 {{property_prefix("-o")}}<br>
+    12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td>
+   <td>3.0 {{property_prefix("-webkit")}}<br>
+    6.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>2.1 {{property_prefix("-webkit")}}</td>
+   <td>{{CompatGeckoMobile("2.0")}} {{property_prefix("-moz")}}<br>
+    {{CompatGeckoMobile("16.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.0 {{property_prefix("-o")}}<br>
+    12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td>
+   <td>3.2 {{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Ähnlich zu CSS Übergängen kann <a href="/de/docs/Web/CSS/CSS_Animationen">CSS Animationen</a> Animationen unabhängig von Wertänderungen auslösen.</li>
+</ul>
diff --git a/files/de/web/css/css_typen/index.html b/files/de/web/css/css_typen/index.html
new file mode 100644
index 0000000000..bb08a42cd4
--- /dev/null
+++ b/files/de/web/css/css_typen/index.html
@@ -0,0 +1,59 @@
+---
+title: CSS-Basis-Datentypen
+slug: Web/CSS/CSS_Typen
+translation_of: Web/CSS/CSS_Types
+---
+<div>{{CssRef}}</div>
+
+<p><strong>CSS-Basis-Datentypen</strong> definieren typische Werte (einschließlich Schlüsselwörtern und Einheiten), die von CSS-Eigenschaften und Funktionen akzeptiert werden. Sie sind eine besondere Art eines <a href="https://www.w3.org/TR/css3-values/#component-types">Komponenten-Wertetyp</a>.</p>
+
+<p>Im formellen Syntax werden Datentypen mit einem Schlüsselwort gekennzeichnet, das zwischen den Zeichen "&lt;" und "&gt;" steht.</p>
+
+<h2 id="Referenz">Referenz</h2>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("&lt;angle&gt;")}}</li>
+ <li>{{cssxref("&lt;basic-shape&gt;")}}</li>
+ <li>{{cssxref("&lt;blend-mode&gt;")}}</li>
+ <li>{{cssxref("&lt;color&gt;")}}</li>
+ <li>{{cssxref("&lt;custom-ident&gt;")}}</li>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+ <li>{{cssxref("&lt;flex&gt;")}}</li>
+ <li>{{cssxref("&lt;frequency&gt;")}}</li>
+ <li>{{cssxref("&lt;gradient&gt;")}}</li>
+ <li>{{cssxref("&lt;image&gt;")}}</li>
+ <li>{{cssxref("&lt;integer&gt;")}}</li>
+ <li>{{cssxref("&lt;length&gt;")}}</li>
+ <li>{{cssxref("&lt;number&gt;")}}</li>
+ <li>{{cssxref("&lt;percentage&gt;")}}</li>
+ <li>{{cssxref("&lt;position&gt;")}}</li>
+ <li>{{cssxref("&lt;ratio&gt;")}}</li>
+ <li>{{cssxref("&lt;resolution&gt;")}}</li>
+ <li>{{cssxref("&lt;shape-box&gt;")}}</li>
+ <li>{{cssxref("&lt;single-transition-timing-function&gt;")}}</li>
+ <li>{{cssxref("&lt;string&gt;")}}</li>
+ <li>{{cssxref("&lt;time&gt;")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+ <li>{{cssxref("&lt;url&gt;")}}</li>
+</ul>
+</div>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Values') }}</td>
+   <td>{{ Spec2('CSS3 Values') }}</td>
+   <td>Erste Definition.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/de/web/css/css_user_interface/index.html b/files/de/web/css/css_user_interface/index.html
new file mode 100644
index 0000000000..586426c255
--- /dev/null
+++ b/files/de/web/css/css_user_interface/index.html
@@ -0,0 +1,116 @@
+---
+title: CSS User Interface
+slug: Web/CSS/CSS_User_Interface
+tags:
+  - CSS
+  - CSS Basic User Interface
+  - Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Basic_User_Interface
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS User Interface</strong> ist ein CSS Modul, das es erlaubt, die Darstellung und Funktionalität von Benutzerschnittstellenfeatures zu definieren.</p>
+
+<h2 id="Referenz">Referenz</h2>
+
+<h3 id="Einstellungen">Einstellungen</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("box-sizing")}}</li>
+ <li>{{cssxref("cursor")}}</li>
+ <li>{{cssxref("outline")}}</li>
+ <li>{{cssxref("outline-width")}}</li>
+ <li>{{cssxref("outline-style")}}</li>
+ <li>{{cssxref("outline-color")}}</li>
+ <li>{{cssxref("outline-offset")}}</li>
+ <li>{{cssxref("resize")}}</li>
+ <li>{{cssxref("text-overflow")}}</li>
+ <li>{{cssxref("nav-down")}}</li>
+ <li>{{cssxref("nav-left")}}</li>
+ <li>{{cssxref("nav-right")}}</li>
+ <li>{{cssxref("nav-up")}}</li>
+</ul>
+</div>
+
+<h2 id="Anleitungen">Anleitungen</h2>
+
+<dl>
+ <dt><a href="/de/docs/Web/CSS/CSS_User_Interface/Verwendung_von_URL_Werten_für_die_cursor_Eigenschaft">Verwendung von URL Werten für die <code>cursor</code> Eigenschaft</a></dt>
+ <dd>Erklärt und zeigt, wie ein URL für die {{cssxref('cursor')}} Eigenschaft angegeben werden kann, um benutzerdefinierte Mauszeiger zu erstellen.</dd>
+</dl>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'ui.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>1.0</td>
+   <td>1.5 (1.8)</td>
+   <td>8.0</td>
+   <td>7.0</td>
+   <td>1.2 (125)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile(1.8)}}</td>
+   <td>8.0</td>
+   <td>6.0</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/de/web/css/css_writing_modes/index.html b/files/de/web/css/css_writing_modes/index.html
new file mode 100644
index 0000000000..f6815b68b7
--- /dev/null
+++ b/files/de/web/css/css_writing_modes/index.html
@@ -0,0 +1,109 @@
+---
+title: CSS Writing Modes
+slug: Web/CSS/CSS_Writing_Modes
+tags:
+  - CSS
+  - CSS Referenz
+  - CSS Writing Modes
+  - Übersicht
+translation_of: Web/CSS/CSS_Writing_Modes
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Writing Modes</strong> ist ein CSS Modul, das verschiedene internationale Schreibmodi definiert, wie links-nach-rechts (z. B. verwendet von der lateinischen und indischen Schrift), rechts-nach-links (z. B. verwendet von der hebräischen und arabischen Schrift), bidirektional (wenn links-nach-rechts und rechts-nach-links Schriften vermischt werden) und vertikal (z. B. verwendet in einigen asiatischen Schriften).</p>
+
+<h2 id="CSS_Eigenschaften">CSS Eigenschaften</h2>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("direction")}}</li>
+ <li>{{cssxref("glyph-orientation-horizontal")}}</li>
+ <li>{{cssxref("text-combine-upright")}}</li>
+ <li>{{cssxref("text-orientation")}}</li>
+ <li>{{cssxref("unicode-bidi")}}</li>
+ <li>{{cssxref("writing-mode")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<p><em>Keine.</em></p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Writing Modes')}}</td>
+   <td>{{Spec2('CSS3 Writing Modes')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>3</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/de/web/css/cssom_view/index.html b/files/de/web/css/cssom_view/index.html
new file mode 100644
index 0000000000..77ba31c695
--- /dev/null
+++ b/files/de/web/css/cssom_view/index.html
@@ -0,0 +1,99 @@
+---
+title: CSSOM View
+slug: Web/CSS/CSSOM_View
+tags:
+  - CSS
+  - CSSOM View
+  - Experimentell
+  - Referenz
+  - Übersicht
+translation_of: Web/CSS/CSSOM_View
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<p><strong>CSSOM View</strong> ist ein Modul, das es erlaubt, die visuelle Darstellung eines Dokuments zu verändern, insbesondere sein Scrollverhalten.</p>
+
+<h2 id="Referenz">Referenz</h2>
+
+<h3 id="Eigenschaften">Eigenschaften</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("scroll-behavior")}}</li>
+</ul>
+</div>
+
+<h2 id="Anleitungen">Anleitungen</h2>
+
+<p><em>Keine.</em></p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/de/web/css/cursor/index.html b/files/de/web/css/cursor/index.html
new file mode 100644
index 0000000000..f069a478b8
--- /dev/null
+++ b/files/de/web/css/cursor/index.html
@@ -0,0 +1,300 @@
+---
+title: cursor
+slug: Web/CSS/cursor
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - Cursor
+  - NeedsBrowserCompatibility
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+translation_of: Web/CSS/cursor
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>cursor</code> CSS Eigenschaft legt den Cursor fest, der angezeigt wird, wenn sich der Mauszeiger über einem Element befindet.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css notranslate">/* Schlüsselwortwerte */
+cursor: pointer;
+cursor: auto;
+
+/* Verwendung von URL und Koordinaten */
+cursor:  url(cursor1.png) 4 12, auto;
+cursor:  url(cursor2.png) 2 2, pointer;
+
+/* Globale Werte */
+cursor: inherit;
+cursor: initial;
+cursor: unset;
+</pre>
+
+<h2 id="Werte">Werte</h2>
+
+<dl>
+ <dt>&lt;uri&gt;</dt>
+ <dd>Eine durch Kommata getrennte Liste, die auf benutzerdefinierte Bilder verweist, die als Cursor angezeigt werden sollen. Mehr als eine Angabe macht Sinn, um eine Ausweichlösung (Fallback) bei nicht unterstützten Bildformaten in anderen Browsern bereitzustellen. Am Ende der Liste <strong>muss</strong> ein Fallback stehen, welches einen Cursor ohne URL angibt, um einen Mauszeiger anzeigen zu können, wenn kein benutzerdefiniertes Bild geladen werden kann. Siehe auch: <a href="/de/Verwendung_von_URL_Werten_für_die_cursor_Eigenschaft" title="de/Verwendung_von_URL_Werten_für_die_cursor_Eigenschaft">Verwendung von URL Werten für die cursor Eigenschaft</a> für weitere Details.</dd>
+ <dt>&lt;x&gt; &lt;y&gt; {{ experimental_inline() }}</dt>
+ <dd>Optionale Angabe von X- und Y-Koordinaten (vom Internet Explorer nicht unterstützt). Angegeben werden zwei Zahlen ohne Einheit.</dd>
+ <dt>Schlüsselwortwerte</dt>
+ <dd><strong style="color: red; font-size: big;">Bewege die Maus über einen Wert zum Testen:</strong></dd>
+ <dd>
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th>Kategorie</th>
+    <th>CSS Wert<br>
+     <span style="font-size: x-small;">Mouseover zum Testen</span></th>
+    <th></th>
+    <th>Beschreibung</th>
+   </tr>
+   <tr style="cursor: auto;">
+    <td rowspan="3">Allgemein</td>
+    <td><code>auto</code></td>
+    <td></td>
+    <td>Der Browser bestimmt aufgrund des aktuellen Kontextes, welcher Cursor angezeigt wird.<br>
+     Wenn der Mauszeiger sich zum Beispiel über dem Text befindet, wird der <code>text</code> Cursor angezeigt.</td>
+   </tr>
+   <tr style="cursor: default;">
+    <td><code>default</code></td>
+    <td><img alt="default.gif" class="default internal" src="/@api/deki/files/3438/=default.gif"></td>
+    <td>Standard Cursor. Üblicherweise durch ein Pfeil dargestellt.</td>
+   </tr>
+   <tr style="cursor: none;">
+    <td><code>none</code></td>
+    <td></td>
+    <td>Es wird kein Cursor wird angezeigt.</td>
+   </tr>
+   <tr style="cursor: context-menu;">
+    <td rowspan="5" style="cursor: auto;">Links &amp; Status</td>
+    <td><code>context-menu</code></td>
+    <td><img alt="context-menu.png" class="default internal" src="/@api/deki/files/3461/=context-menu.png"></td>
+    <td>Ein Kontextmenü wird unter dem Cursor angezeigt.<br>
+     Unter Windows nicht verfügbar. {{ Bug("258960") }}</td>
+   </tr>
+   <tr style="cursor: help;">
+    <td><code>help</code></td>
+    <td><img alt="help.gif" class="default internal" src="/@api/deki/files/3442/=help.gif"></td>
+    <td>Zeigt an, dass Hilfe verfügbar ist.</td>
+   </tr>
+   <tr style="cursor: pointer;">
+    <td><code>pointer</code></td>
+    <td><img alt="pointer.gif" class="default internal" src="/@api/deki/files/3449/=pointer.gif"></td>
+    <td>Wird zum Beispiel angezeigt, wenn der Mauszeiger sich über Links befindet. Üblicherweise durch eine Hand dargestellt.</td>
+   </tr>
+   <tr style="cursor: progress;">
+    <td><code>progress</code></td>
+    <td><img alt="progress.gif" class="default internal" src="/@api/deki/files/3450/=progress.gif"></td>
+    <td>Zeigt an, dass das Programm im Hintergrund arbeitet und der Benutzer kann, anders als bei <code>wait</code>, weiterhin mit der Oberfläche arbeiten.</td>
+   </tr>
+   <tr style="cursor: wait;">
+    <td><code>wait</code></td>
+    <td><img alt="wait.gif" class="default internal" src="/@api/deki/files/3457/=wait.gif"></td>
+    <td>Zeigt an, dass das Programm arbeitet. Manchmal auch durch eine Sanduhr oder eine Uhr dargestellt.</td>
+   </tr>
+   <tr style="cursor: cell;">
+    <td rowspan="4" style="cursor: auto;">Auswahl</td>
+    <td><code>cell</code></td>
+    <td><img alt="cell.gif" class="default internal" src="/@api/deki/files/3434/=cell.gif"></td>
+    <td>Zeigt an, dass Zellen ausgewählt werden können.</td>
+   </tr>
+   <tr style="cursor: crosshair;">
+    <td><code>crosshair</code></td>
+    <td><img alt="crosshair.gif" class="default internal" src="/@api/deki/files/3437/=crosshair.gif"></td>
+    <td>Ein Kreuz, das oft zur Auswahl eines Bereiches in Bildern verwendet wird.</td>
+   </tr>
+   <tr style="cursor: text;">
+    <td><code>text</code></td>
+    <td><img alt="text.gif" class="default internal" src="https://developer.mozilla.org/files/3809/text.gif"></td>
+    <td>Zeigt an, dass der Text ausgewählt werden kann.</td>
+   </tr>
+   <tr style="cursor: vertical-text;">
+    <td><code>vertical-text</code></td>
+    <td><img alt="vertical-text.gif" class="default internal" src="/@api/deki/files/3456/=vertical-text.gif"></td>
+    <td>Zeigt an, dass vertikaler Text ausgewählt werden kann.</td>
+   </tr>
+   <tr style="cursor: alias;">
+    <td rowspan="5" style="cursor: auto;">Drag and Drop</td>
+    <td><code>alias</code></td>
+    <td><img alt="alias.gif" class="default internal" src="/@api/deki/files/3432/=alias.gif"></td>
+    <td>Zeigt an, dass ein Tastenkürzel vorhanden ist.</td>
+   </tr>
+   <tr style="cursor: copy;">
+    <td><code>copy</code></td>
+    <td><img alt="copy.gif" class="default internal" src="/@api/deki/files/3436/=copy.gif"></td>
+    <td>Zeigt an, dass etwas kopiert werden kann.</td>
+   </tr>
+   <tr style="cursor: move;">
+    <td><code>move</code></td>
+    <td><img alt="move.gif" class="default internal" src="/@api/deki/files/3443/=move.gif"></td>
+    <td>Zeigt an, dass das Objekt bewegt werden kann.</td>
+   </tr>
+   <tr style="cursor: no-drop;">
+    <td><code>no-drop</code></td>
+    <td><img alt="no-drop.gif" class="internal lwrap" src="/@api/deki/files/3445/=no-drop.gif" style="float: left;"></td>
+    <td>Zeigt an, dass an der aktuellen Stelle nichts hinein gezogen werden darf.<br>
+     {{bug("275173")}} unter Windows ist <code>no-drop</code> gleich wie <code>not-allowed</code>.</td>
+   </tr>
+   <tr style="cursor: not-allowed;">
+    <td><code>not-allowed</code></td>
+    <td><img alt="not-allowed.gif" class="default internal" src="/@api/deki/files/3446/=not-allowed.gif"></td>
+    <td>Zeigt an, dass hier etwas nicht erlaubt ist.</td>
+   </tr>
+   <tr style="cursor: all-scroll;">
+    <td rowspan="15" style="cursor: auto;">Skalierung &amp; Scrollen</td>
+    <td><code>all-scroll</code></td>
+    <td><img alt="all-scroll.gif" class="default internal" src="/@api/deki/files/3433/=all-scroll.gif"></td>
+    <td>Zeigt an, dass etwas in alle Richtungen gescrollt werden kann.<br>
+     {{ bug("275174") }} unter Windows ist <code>all-scroll</code> gleich wie <code>move</code>.</td>
+   </tr>
+   <tr style="cursor: col-resize;">
+    <td><code>col-resize</code></td>
+    <td><img alt="col-resize.gif" class="default internal" src="/@api/deki/files/3435/=col-resize.gif"></td>
+    <td>Zeigt an, dass das Element bzw. die Spalte horizontal skaliert werden kann. Meistens als Pfeile dargestellt, die nach rechts und links zeigen und in der Mitte einen Trennbalken haben.</td>
+   </tr>
+   <tr style="cursor: row-resize;">
+    <td><code>row-resize</code></td>
+    <td><img alt="row-resize.gif" class="default internal" src="/@api/deki/files/3451/=row-resize.gif"></td>
+    <td>Zeigt an, dass das Element bzw. die Zeile vertikal skaliert werden kann. Meistens als Pfeile dargestellt, die nach unten und oben zeigen und in der Mitte einen Trennbalken haben.</td>
+   </tr>
+   <tr style="cursor: n-resize;">
+    <td><code>n-resize</code></td>
+    <td><img alt="n-resize.gif" class="default internal" src="https://developer.mozilla.org/files/4083/n-resize.gif"></td>
+    <td rowspan="8">Zeigt an, dass von einer Ecke aus skaliert werden kann. Der <code>se-resize</code> Cursor wird zum Beispiel benutzt, wenn, von der unteren rechten Ecke aus, etwas bewegt/skaliert werden soll.</td>
+   </tr>
+   <tr style="cursor: e-resize;">
+    <td><code>e-resize</code></td>
+    <td><img alt="e-resize.gif" class="default internal" src="https://developer.mozilla.org/files/4085/e-resize.gif"></td>
+   </tr>
+   <tr style="cursor: s-resize;">
+    <td><code>s-resize</code></td>
+    <td><img alt="s-resize.gif" class="default internal" src="https://developer.mozilla.org/files/4087/s-resize.gif"></td>
+   </tr>
+   <tr style="cursor: w-resize;">
+    <td><code>w-resize</code></td>
+    <td><img alt="w-resize.gif" class="default internal" src="https://developer.mozilla.org/files/4089/w-resize.gif"></td>
+   </tr>
+   <tr style="cursor: ne-resize;">
+    <td><code>ne-resize</code></td>
+    <td><img alt="ne-resize.gif" class="default internal" src="https://developer.mozilla.org/files/4091/ne-resize.gif"></td>
+   </tr>
+   <tr style="cursor: nw-resize;">
+    <td><code>nw-resize</code></td>
+    <td><img alt="nw-resize.gif" class="default internal" src="https://developer.mozilla.org/files/4093/nw-resize.gif"></td>
+   </tr>
+   <tr style="cursor: se-resize;">
+    <td><code>se-resize</code></td>
+    <td><img alt="se-resize.gif" class="default internal" src="https://developer.mozilla.org/files/4097/se-resize.gif"></td>
+   </tr>
+   <tr style="cursor: sw-resize;">
+    <td><code>sw-resize</code></td>
+    <td><img alt="sw-resize.gif" class="default internal" src="https://developer.mozilla.org/files/4095/sw-resize.gif"></td>
+   </tr>
+   <tr style="cursor: ew-resize;">
+    <td><code>ew-resize</code></td>
+    <td><img alt="ew-resize.gif" class="default internal" src="https://developer.mozilla.org/files/3806/3-resize.gif"></td>
+    <td rowspan="4">Zeigt an, dass in zwei Richtungen (bidirektional) skaliert werden kann.</td>
+   </tr>
+   <tr style="cursor: ns-resize;">
+    <td><code>ns-resize</code></td>
+    <td><img alt="ns-resize.gif" class="default internal" src="https://developer.mozilla.org/files/3808/6-resize.gif"></td>
+   </tr>
+   <tr style="cursor: nesw-resize;">
+    <td><code>nesw-resize</code></td>
+    <td><img alt="nesw-resize.gif" class="default internal" src="https://developer.mozilla.org/files/3805/1-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: nwse-resize;">
+    <td><code>nwse-resize</code></td>
+    <td><img alt="nwse-resize.gif" class="default internal" src="https://developer.mozilla.org/files/3807/4-resize.gif"></td>
+   </tr>
+   <tr style="cursor: zoom-in;">
+    <td rowspan="2">Zoom</td>
+    <td><code>zoom-in</code></td>
+    <td><img alt="zoom-in.gif" class="default" src="/@api/deki/files/3459/=zoom-in.gif"></td>
+    <td rowspan="2" style="cursor: auto;">
+     <p>Indicates that something can be zoomed (magnified) in or out.</p>
+    </td>
+   </tr>
+   <tr style="cursor: zoom-out;">
+    <td><code>zoom-out</code></td>
+    <td><img alt="zoom-out.gif" class="default" src="/@api/deki/files/3460/=zoom-out.gif"></td>
+   </tr>
+   <tr id="grab" style="cursor: grab;">
+    <td rowspan="2">Greifen</td>
+    <td><code>grab</code></td>
+    <td><img alt="grab.gif" class="default" src="/@api/deki/files/3440/=grab.gif"></td>
+    <td rowspan="2" style="cursor: auto;">
+     <p>Indicates that something can be grabbed (dragged to be moved).</p>
+    </td>
+   </tr>
+   <tr style="cursor: grabbing;">
+    <td><code>grabbing</code></td>
+    <td><img alt="grabbing.gif" class="default" src="/@api/deki/files/3441/=grabbing.gif"></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}
+</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="notranslate">.foo {
+  cursor: crosshair;
+}
+
+/* Benutze move wenn cell nicht unterstützt wird. */
+.bar {
+  cursor: move;
+  cursor: cell;
+}
+
+/* Standardwert als Fallback für url() muss angegeben werden (funktioniert nicht ohne) */
+.baz {
+  cursor: url(hyper.cur), auto;
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#cursor', 'cursor')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Mehrere Schlüsselwörter und die Positionierungssyntax für <code>url()</code> hinzugefügt.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'ui.html#cursor-props', 'cursor')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{Compat("css.properties.cursor")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_URL_values_for_the_cursor_property" title="Using URL values for the cursor property">Using URL values for the cursor property (en)</a></li>
+ <li>{{cssxref("pointer-events")}}</li>
+</ul>
diff --git a/files/de/web/css/custom-ident/index.html b/files/de/web/css/custom-ident/index.html
new file mode 100644
index 0000000000..babda0dccf
--- /dev/null
+++ b/files/de/web/css/custom-ident/index.html
@@ -0,0 +1,120 @@
+---
+title: <custom-ident>
+slug: Web/CSS/custom-ident
+tags:
+  - CSS
+  - CSS Datentyp
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/custom-ident
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Der <code>&lt;custom-ident&gt;</code> <a href="/de/docs/Web/CSS">CSS</a> Datentyp beschreibt eine beliebige benutzerdefinierte Zeichenkette, die als Bezeichner verwendet wird. Er ist schreibungsabhängig und in jedem Kontext sind mehrere Werte ausgeschlossen, um Falschinterpretationen zu vermeiden.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>Seine Syntax ist ähnlich der des CSS Bezeichners mit Ausnahme, dass Groß- und Kleinschreibung berücksichtigt wird: ein <code>&lt;custom-ident&gt;</code> ist eine Sequenz von Zeichen, wobei Zeichen folgendes sein können:</p>
+
+<ul>
+ <li>ein beliebiges alphanumerisches Zeichen (<code>'A'</code> bis <code>'Z'</code> oder <code>'a'</code> bis <code>'z'</code>),</li>
+ <li>eine beliebige dezimale Ziffer (<code>'0'</code> bis <code>'9'</code>),</li>
+ <li>ein Bindestrich (<code>'-'</code>)</li>
+ <li>ein Unterstrich (<code>'_'</code>),</li>
+ <li>ein escaptes Zeichen (mit einem Backslash, <code>'\'</code>),</li>
+ <li>oder ein <a class="external" href="http://de.wikipedia.org/wiki/Unicode">Unicode</a> Zeichen (im Format eines Backslashs gefolgt von einer bis sechs hexadezimalen Ziffern, seinem Unicode Codepoint).</li>
+</ul>
+
+<p>Das erste Zeichen darf weder eine dezimale Ziffer, noch ein Bindestrich (<code>'-'</code>) sein, gefolgt von einer dezimalen Ziffer oder einem weiteren Bindestrich. Ein <code>&lt;custom-ident&gt;</code> darf nicht zwischen einfachen oder doppelten Anführungszeichen stehen, da er sonst identisch zu einem {{cssxref("&lt;string&gt;")}} wäre.</p>
+
+<p>Beachte, dass <code>id1</code>, <code>Id1</code>, <code>iD1</code> und <code>ID1</code> alle verschiedene Bezeichner sind, da sie sich in <a class="external" href="https://de.wikipedia.org/wiki/Case_sensitivity">Groß-/Kleinschreibung</a> unterscheiden. Im Gegensatz dazu sind <code>toto\?</code> und <code>toto\3F</code> dieselben Bezeichner, da es verschiedene Arten gibt, ein Zeichen zu escapen.</p>
+
+<h2 id="Liste_ausgeschlossener_Werte">Liste ausgeschlossener Werte</h2>
+
+<p>Um Mehrdeutigkeiten zu verhindern, definiert jede Eigenschaft, die <code>&lt;custom-ident&gt;</code> verwendet, eine spezielle Liste an verbotenen Werten:</p>
+
+<dl>
+ <dt>{{cssxref("animation-name")}}</dt>
+ <dd>Verbietet die globalen CSS Werte <code>unset</code>, <code>initial</code> und <code>inherit</code> und den Wert <code>none</code>.</dd>
+ <dt>{{cssxref("counter-reset")}}</dt>
+ <dt>{{cssxref("counter-increment")}}</dt>
+ <dd>Verbietet die globalen CSS Werte <code>unset</code>, <code>initial</code> und <code>inherit</code> und den Wert <code>none</code>.</dd>
+ <dt>{{cssxref("@counter-style")}}</dt>
+ <dt>{{cssxref("list-style-type")}}</dt>
+ <dd>Verbietet die globalen CSS Werte <code>unset</code>, <code>initial</code> und <code>inherit</code>, als auch die Werte <code>none</code>, <code>inline</code> und <code>outside</code>. Auch einige vordefinierte Werte werden von verschiedenen Browsern implementiert: <code>disc</code>, <code>circle</code>, <code>square</code>, <code>decimal</code>, <code>cjk-decimal</code>, <code>decimal-leading-zero</code>, <code>lower-roman</code>, <code>upper-roman</code>, <code>lower-greek</code>, <code>lower-alpha</code>, <code>lower-latin</code>, <code>upper-alpha</code>, <code>upper-latin</code>, <code>arabic-indic</code>, <code>armenian</code>, <code>bengali</code>, <code>cambodian</code>, <code>cjk-earthly-branch</code>, <code>cjk-heavenly-stem</code>, <code>cjk-ideographic</code>, <code>devanagari</code>, <code>ethiopic-numeric</code>, <code>georgian</code>, <code>gujarati</code>, <code>gurmukhi</code>, <code>hebrew</code>, <code>hiragana</code>, <code>hiragana-iroha</code>, <code>japanese-formal</code>, <code>japanese-informal</code>, <code>kannada</code>, <code>katakana</code>, <code>katakana-iroha</code>, <code>khmer</code>, <code>korean-hangul-formal</code>, <code>korean-hanja-formal</code>, <code>korean-hanja-informal</code>, <code>lao</code>, <code>lower-armenian</code>, <code>malayalam</code>, <code>mongolian</code>, <code>myanmar</code>, <code>oriya</code>, <code>persian</code>, <code>simp-chinese-formal</code>, <code>simp-chinese-informal</code>, <code>tamil</code>, <code>telugu</code>, <code>thai</code>, <code>tibetan</code>, <code>trad-chinese-formal</code>, <code>trad-chinese-informal</code>, <code>upper-armenian</code>, <code>disclosure-open</code> und <code>disclosure-close</code>.</dd>
+ <dt>{{cssxref("will-change")}}</dt>
+ <dd>Verbietet die globalen CSS Werte <code>unset</code>, <code>initial</code> und <code>inherit</code>, als auch die Werte <code>will-change</code>, <code>auto</code>, <code>scroll-position</code> und <code>contents</code>.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Dies sind gültige Bezeichner:</p>
+
+<pre class="eval">nono79            Eine Mischung aus alphanumerischen Zeichen und Zahlen
+ground-level      Eine Mischung aus alphanumerischen Zeichen und einem Bindestrich
+-test             Ein Bindestrich gefolgt von alphanumerischen Zeichen
+_internal         Ein Unterstrich gefolgt von alphanumerischen Zeichen
+\22 toto          Ein Unicode-Zeichen gefolgt von einer Sequenz von alphanumerischen Zeichen
+bili\.bob         Der Punkt ist korrekt escapt
+</pre>
+
+<p>Dies sind ungültige Bezeichner:</p>
+
+<pre class="eval">34rem             Darf nicht mit einer Dezimalziffer anfangen
+-12rad            Darf nicht mit einem Bindestrich gefolgt von einer Dezimalziffer anfangen
+bili.bob          Nur alphanumerische Zeichen, _ und - müssen nicht escapt werden
+--toto            Darf nicht mit zwei Bindestrichen anfangen
+'bilibob'         Kein &lt;user-ident&gt;, sondern ein {{cssxref("&lt;string&gt;")}}
+"bilibob"         Kein &lt;user-ident&gt;, sondern ein {{cssxref("&lt;string&gt;")}}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Will Change', '#valdef-will-change-custom-ident', '<code>&lt;custom-ident&gt;</code> für <code>will-change</code>')}}</td>
+   <td>{{Spec2('CSS Will Change')}}</td>
+   <td>Definiert, welche Werte für {{cssxref("will-change")}} ausgeschlossen sind.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Counter Styles', '#typedef-counter-style-name', '<code>&lt;custom-ident&gt;</code> für <code>list-style-type</code>')}}</td>
+   <td>{{Spec2('CSS3 Counter Styles')}}</td>
+   <td>Verwendet <code>&lt;custom-ident&gt;</code> anstatt einer begrenzten Liste von Schlüsselwörtern und definiert, welche Werte für {{cssxref("list-style-type")}} und {{cssxref("@counter-style")}} ausgeschlossen sind.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Lists', '#counter-properties', '<code>&lt;custom-ident&gt;</code> für <code>counter-*</code>')}}</td>
+   <td>{{Spec2('CSS3 Lists')}}</td>
+   <td>Benennt <code>&lt;identifier&gt;</code> zu <code>&lt;custom-ident&gt;</code> um. Fügt seine Verwendung zur neuen <code>counter-set</code> Eigenschaft hinzu.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Animations', '#typedef-single-animation-name', '<code>&lt;custom-ident&gt;</code> für <code>animation-name</code>')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Definiert, welche Werte für {{cssxref("animation-name")}} ausgeschlossen sind.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#identifier-value', '<code>&lt;custom-ident&gt;</code>')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Benennt <code>&lt;identifier&gt;</code> in <code>&lt;custom-ident&gt;</code> um. Macht ihn zu einem Pseudotyp und verlangt die verschiedenen Verwendungen, um die ausgeschlossenen Werte zu präzisieren.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'syndata.html#value-def-identifier', '<code>&lt;identifier&gt;</code>')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p><em>Da dieser Typ kein realer Typ ist, sondern ein Bequemlichkeitstyp, der dazu verwendet wird, um die Beschreibung von erlaubten Werten zu vereinfachen, gibt es keine Browser Kompatibilitätsinformationen im engeren Sinne.</em></p>
diff --git a/files/de/web/css/direction/index.html b/files/de/web/css/direction/index.html
new file mode 100644
index 0000000000..50c1af5f09
--- /dev/null
+++ b/files/de/web/css/direction/index.html
@@ -0,0 +1,90 @@
+---
+title: direction
+slug: Web/CSS/direction
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - Referenz
+translation_of: Web/CSS/direction
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Summary" name="Summary">Zusammenfassung</h2>
+
+<p><span class="seoSummary">Legt die CSS Eigenschaft <code><strong>direction</strong></code> fest damit sie mit der Richtung des Textes übereinstimmt: <code>rtl</code> dür Sprachen welche von rechts nach links geschrieben werden (wie Hebräisch oder Arabisch) und <code>ltr</code> für Sprachen von links nach rechts. Normalerweise ist es jedoch ein Teil des Dokuments (z.B. mit dem dir Attribut in HTML) statt durch den direkten Gebrauch in CSS.</span></p>
+
+<p>Der Wert legt die grundsätzliche Richtung des Textes von block-level Elementen und die Richtung von Einbindungen, welche von der {{Cssxref("unicode-bidi")}} Eigenschaft erzeugt wird, fest. Auch legt es die grunsätzliche Ausreichtung des Textes, block-level Elemente und die Richtung in welcher Zellen in einer Tabellenzeile angeordnet werden.</p>
+
+<p>Anders als das <code>dir</code> Attribut in HTML, wird die <code>direction</code> Eigenschaft nicht von Tabellenspalten an die Tabellenzellen vererbt, da CSS Vererbung dem Dokumenten Baum folgt, in welchem Tabellenzellen in Zeilen sind und nicht in Spalten.</p>
+
+<p>Die <code>direction</code> und {{cssxref("unicode-bidi")}} Eigenschaft sind die einzigen zwei Eigenschaften welche nicht von der {{cssxref("all")}} Kurzform Eigenschaft beinflusst werden.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="brush:css">direction: ltr;
+direction: rtl;
+
+/* Globale Werte*/
+direction: inherit;
+direction: initial;
+direction: unset;
+</pre>
+
+<h3 id="Values" name="Values">Werte</h3>
+
+<dl>
+ <dt><code>ltr</code></dt>
+ <dd>Der Ausgangswert von <code>direction</code> (wenn nicht anders festgelegt). Text und andere Elemente gehen von links nach rechts.</dd>
+ <dt><code>rtl</code></dt>
+ <dd>Text und andere Elemente gehen von rechts nach links.</dd>
+</dl>
+
+<p>Damit die <code>direction</code> Eigenschaft Auswirkungen auf inline-level elemente hat, muss der {{Cssxref("unicode-bidi")}} Eigenschaftswert <code>embed</code> oder <code>override</code> sein.</p>
+
+<h3 id="Formaler_Syntax">Formaler Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<pre class="brush: css">blockquote {
+  direction: rtl;
+}
+</pre>
+
+<h2 id="Specification" name="Specification">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Writing Modes', '#direction', 'direction')}}</td>
+   <td>{{Spec2('CSS3 Writing Modes')}}</td>
+   <td>Keine Änderung.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#direction', 'direction')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Erste Definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.direction")}}
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{Cssxref("unicode-bidi")}}</li>
+ <li>{{Cssxref("writing-mode")}}</li>
+</ul>
diff --git a/files/de/web/css/display/index.html b/files/de/web/css/display/index.html
new file mode 100644
index 0000000000..54b21e29b5
--- /dev/null
+++ b/files/de/web/css/display/index.html
@@ -0,0 +1,259 @@
+---
+title: display
+slug: Web/CSS/display
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Positionierung
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+translation_of: Web/CSS/display
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>display</code> Eigenschaft legt den Typ einer Rendering-Box eines Elements fest. Für HTML sind die standardmäßigen <code>display</code> Werte in der HTML-Spezifikation beschrieben und in den User- bzw. Browser-Stylesheets angegeben. Für XML-Dokumente ist der voreingestellte Wert <code>inline</code>.</p>
+
+<p>Zusätzlich zu den vielen verschiedenen Anzeigearten erlaubt der Wert <code>none</code> es, ein Element gänzlich auszublenden; wenn none verwendet wird, werden auch alle Unterelemente ausgeblendet. Das Dokument wird so dargestellt, als ob das Element nicht im Dokumentenbaum existieren würde.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Schlüsselwortwerte */
+display: none;
+display: inline;
+display: block;
+display: contents;
+display: list-item;
+display: inline-block;
+display: inline-table;
+display: table;
+display: table-cell;
+display: table-column;
+display: table-column-group;
+display: table-footer-group;
+display: table-header-group;
+display: table-row;
+display: table-row-group;
+display: flex;
+display: inline-flex;
+display: grid;
+display: inline-grid;
+display: ruby;
+display: ruby-base;
+display: ruby-text;
+display: ruby-base-container;
+display: ruby-text-container;
+display: run-in;
+
+/* Globale Werte */
+display: inherit;
+display: initial;
+display: unset;
+</pre>
+
+<h2 id="Werte">Werte</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <td class="header" colspan="1">Modul</td>
+   <td class="header">Wert</td>
+   <td class="header">Beschreibung</td>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="4">Basic values (CSS 1)</td>
+   <td><code>none</code></td>
+   <td>
+    <p>Schaltet die Anzeige eines Elementes aus (das Element hat keinen Effekt mehr auf das Layout des Dokumentes). Alle Kindelemente werden ebenfalls nicht mehr angezeigt. Das Dokument wird so gerendert als wenn das Element nicht im Dokumentenbaum existieren würde.</p>
+
+    <p>Um die Box trotzdem rendern zu lassen, aber den Inhalt unsichtbar zu machen, kann die {{cssxref("visibility")}} Eigenschaft verwendet werden.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>inline</code></td>
+   <td>Es werden eine oder mehrere inline Elementboxen generiert.</td>
+  </tr>
+  <tr>
+   <td><code>block</code></td>
+   <td>Es wird eine Blockbox generiert.</td>
+  </tr>
+  <tr>
+   <td><code>list-item</code></td>
+   <td>Es wird eine <code>block</code> Box für den Inhalt und eine separate <code>inline</code> Box für die List-Items generiert.</td>
+  </tr>
+  <tr>
+   <td>Extended values (CSS 2.1)</td>
+   <td><code>inline-block</code></td>
+   <td>Es wird eine <code>block</code> Box generiert, welche den umliegenden Inhalt umfließen lässt, als wenn es eine einzelne <code>inline</code> Box wäre.</td>
+  </tr>
+  <tr>
+   <td colspan="1" rowspan="10">Table model values (CSS 2.1)</td>
+   <td><code>inline-table</code></td>
+   <td>Verhält sich wie das {{HTMLElement("table")}} HTML Element, aber es wird ein <code>inline</code> Element generiert.</td>
+  </tr>
+  <tr>
+   <td><code>table</code></td>
+   <td>Verhält sich wie das {{HTMLElement("table")}} HTML Element. Es wird eine Blockbox generiert.</td>
+  </tr>
+  <tr>
+   <td><code>table-caption</code></td>
+   <td>Verhält sich wie das {{HTMLElement("caption")}} HTML Element</td>
+  </tr>
+  <tr>
+   <td><code>table-cell</code></td>
+   <td>Verhält sich wie das {{HTMLElement("td")}} HTML Element</td>
+  </tr>
+  <tr>
+   <td><code>table-column</code></td>
+   <td>Verhält sich wie das {{HTMLElement("col")}} HTML Element</td>
+  </tr>
+  <tr>
+   <td><code>table-column-group</code></td>
+   <td>Verhält sich wie das {{HTMLElement("colgroup")}} HTML Element</td>
+  </tr>
+  <tr>
+   <td><code>table-footer-group</code></td>
+   <td>Verhält sich wie das {{HTMLElement("tfoot")}} HTML Element</td>
+  </tr>
+  <tr>
+   <td><code>table-header-group</code></td>
+   <td>Verhält sich wie das {{HTMLElement("thead")}} HTML Element</td>
+  </tr>
+  <tr>
+   <td><code>table-row</code></td>
+   <td>Verhält sich wie das {{HTMLElement("tr")}} HTML Element</td>
+  </tr>
+  <tr>
+   <td><code>table-row-group</code></td>
+   <td>Verhält sich wie das {{HTMLElement("tbody")}} HTML Element</td>
+  </tr>
+  <tr>
+   <td colspan="1" rowspan="2">Flexbox model values (<a href="/de/docs/CSS/CSS3" title="CSS3">CSS3</a>)</td>
+   <td><code>flex</code></td>
+   <td>Es wird ein Flexbox Container als <code>block </code>Element erzeugt.</td>
+  </tr>
+  <tr>
+   <td><code>inline-flex</code></td>
+   <td>Es wird ein Flexbox Container als <code>inline </code>Element erzeugt.</td>
+  </tr>
+  <tr>
+   <td colspan="1" rowspan="2">Grid box model values (<a href="/de/docs/CSS/CSS3" title="CSS3">CSS3</a>) {{experimental_inline}}</td>
+   <td><code>grid</code></td>
+   <td>Es wird ein Grid Container als <code>block </code>Element erzeugt.
+   </td>
+  </tr>
+  <tr>
+   <td><code>inline-grid</code></td>
+   <td>Es wird ein Grid Container als <code>inline</code> Element erzeugt.</td>
+  </tr>
+  <tr>
+   <td colspan="1" rowspan="5">Ruby Formatierungsmodell Werte (<a href="/de/docs/Web/CSS/CSS3" title="CSS3">CSS3</a>){{experimental_inline}}</td>
+   <td><code>ruby</code></td>
+   <td>Das Element verhält sich wie ein Inlineelement und stellt seinen Inhalt anhand des Ruby Formatierungsmodells dar. Es verhält sich wie die entsprechenden {{HTMLElement("ruby")}} HTML Elemente.</td>
+  </tr>
+  <tr>
+   <td><code>ruby-base</code></td>
+   <td>Diese Elemente verhalten sich wie {{HTMLElement("rb")}} Elemente.</td>
+  </tr>
+  <tr>
+   <td><code>ruby-text</code></td>
+   <td>Diese Elemente verhalten sich wie {{HTMLElement("rt")}} Elemente.</td>
+  </tr>
+  <tr>
+   <td><code>ruby-base-container</code></td>
+   <td>Diese Elemente verhalten sich wie {{HTMLElement("rbc")}} Elemente, die als anonyme Boxen generiert wurden.</td>
+  </tr>
+  <tr>
+   <td><code>ruby-text-container</code></td>
+   <td>Diese Elemente verhalten sich wie {{HTMLElement("rtc")}} Elemente.</td>
+  </tr>
+  <tr>
+   <td colspan="1" rowspan="2">Experimental values {{experimental_inline}}</td>
+   <td><code>run-in</code></td>
+   <td>
+    <ul>
+     <li>Wenn eine <code>run-in</code> Box eine <code>block</code> Box enthält, genau wie <code>block</code>.</li>
+     <li>Wenn einer <code>block</code> Box eine <code>run-in</code> Box folgt, wird die <code>run-in</code> Box die erste <code>inline</code> Box der <code>block</code> Box.</li>
+     <li>Wenn eine <code>inline</code> Box folgt, wird aus der <code>run-in</code> Box eine <code>block</code> Box.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><code>contents</code></td>
+   <td>Diese Elemente erzeugen selbst keine spezielle Box. Sie werden durch ihre Pseudobox und deren Kindboxen ersetzt.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p><a class="external" href="/samples/cssref/display.html" rel="external nofollow" title="https://developer.mozilla.org/samples/cssref/display.html">Live Beispiel</a></p>
+
+<pre>p.secret  { display: none; }
+&lt;p class="secret"&gt;invisible text&lt;/p&gt;
+</pre>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Display', '#display', 'display')}}</td>
+   <td>{{Spec2('CSS3 Display')}}</td>
+   <td><code>run-in</code> und <code>contents</code> Werte hinzugefügt</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Ruby', '#display', 'display')}}</td>
+   <td>{{Spec2('CSS3 Ruby')}}</td>
+   <td><code>ruby</code>, <code>ruby-base</code>, <code>ruby-text</code>, <code>ruby-base-container</code> und <code>ruby-text-container</code> Eigenschaften hinzugefügt</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Grid', '#grid-declaration0', 'display')}}</td>
+   <td>{{Spec2('CSS3 Grid')}}</td>
+   <td>Grid Box-Modell hinzugefügt</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#flex-containers', 'display')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Flexbox-Modell hinzugefügt</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#display-prop', 'display')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Table-Model und <code>inline-block</code> hinzugefügt</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#display', 'display')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td><code>none</code>, <code>block</code>, <code>inline</code> und <code>list-item</code> hinzugefügt</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{Compat("css.properties.display", 10)}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref("visibility")}}, {{cssxref("float")}}, {{cssxref("position")}}</li>
+ <li>{{cssxref("flex")}}</li>
+</ul>
diff --git a/files/de/web/css/empty-cells/index.html b/files/de/web/css/empty-cells/index.html
new file mode 100644
index 0000000000..97bdbe839f
--- /dev/null
+++ b/files/de/web/css/empty-cells/index.html
@@ -0,0 +1,76 @@
+---
+title: empty-cells
+slug: Web/CSS/empty-cells
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Tabellen
+  - Layout
+  - NeedsLiveSample
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+  - Web
+translation_of: Web/CSS/empty-cells
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>empty-cells</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft legt fest, ob Hintergründe und Rahmen leerer Tabellenzellen angezeigt werden sollen.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Schlüsselwortwerte */
+empty-cells: show;
+empty-cells: hide;
+
+/* Globale Werte */
+empty-cells: inherit;
+empty-cells: initial;
+empty-cells: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>show</code></dt>
+ <dd>Ist ein Schlüsselwort, das angibt, dass Ränder und Hintergründe wie in normalen Zellen dargestellt werden sollen.</dd>
+ <dt><code>hide</code></dt>
+ <dd>Ist ein Schlüsselwort, das angibt, dass keine Ränder oder Hintergründe dargestellt werden sollen.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: css">.contentbox td {
+  empty-cells: show;
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'tables.html#empty-cells', 'empty-cells')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.empty-cells")}}
diff --git a/files/de/web/css/ersetztes_element/index.html b/files/de/web/css/ersetztes_element/index.html
new file mode 100644
index 0000000000..c75a4aec95
--- /dev/null
+++ b/files/de/web/css/ersetztes_element/index.html
@@ -0,0 +1,23 @@
+---
+title: Ersetztes Element
+slug: Web/CSS/ersetztes_Element
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/Replaced_element
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>In CSS ist ein <strong>ersetztes Element</strong> ein Element, dessen Darstellung außerhalb des Anwendungsbereichs von CSS liegt. Dies sind eine Art externe Objekte, deren Repräsentation unabhängig von CSS ist. Typische ersetzte Elemente sind {{HTMLElement("img")}}, {{HTMLElement("object")}}, {{HTMLElement("video")}} oder Formularelemente wie {{HTMLElement("textarea")}} und {{HTMLElement("input")}}. Manche Elemente wie {{HTMLElement("audio")}} oder {{HTMLElement("canvas")}} sind nur in bestimmten Fällen ersetzte Elemente. Objekte, die via CSS {{cssxref("content")}} Eigenschaften eingefügt werden, sind <em>anonyme ersetzte Elemente</em>.</p>
+
+<p>CSS behandelt ersetzte Elemente in manchen Fällen besonders, wie z. B. bei der Berechnung von Außenabständen und einigen <code>auto</code> Werten.</p>
+
+<p>Beachte, dass manche ersetzte Elemente, jedoch nicht alle, innere Maße oder eine definierte Grundlinie haben, welche von einigen CSS Eigenschaften wie {{cssxref("vertical-align")}} verwendet wird.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{CSS_key_concepts}}</li>
+</ul>
diff --git a/files/de/web/css/farben/index.html b/files/de/web/css/farben/index.html
new file mode 100644
index 0000000000..9e0baf0720
--- /dev/null
+++ b/files/de/web/css/farben/index.html
@@ -0,0 +1,1285 @@
+---
+title: <color>
+slug: Web/CSS/Farben
+tags:
+  - CSS
+  - CSS Datentyp
+  - Layout
+  - NeedsLiveSample
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+  - Web
+translation_of: Web/CSS/color_value
+---
+<div>{{CSSRef}}</div>
+
+<p>Der <a href="/de/docs/Web/CSS">CSS</a> Datentyp beschreibt eine Farbe im <a class="external" href="http://de.wikipedia.org/wiki/SRGB">sRGB Farbraum</a>. Eine Farbe kann auf eine dieser Arten beschrieben werden:</p>
+
+<ul>
+ <li>durch Benutzung eines <em>Schlüsselworts</em></li>
+ <li>durch Benutzung des <a class="external" href="https://de.wikipedia.org/wiki/RGB-Farbraum">kubischen RGB Koordinatensystems</a> (durch #-hexadezimal oder die funktionalen Schreibweisen <code>rgb()</code> und <code>rgba()</code>)</li>
+ <li>durch Benutzung des <a class="external" href="https://de.wikipedia.org/wiki/HSV-Farbraum">zylindrischen HSL Koordinatensystems</a> (durch die funktionalen Schreibweisen <code>hsl()</code> und <code>hsla()</code>)</li>
+</ul>
+
+<p>Beachte, dass die Liste an akzeptierten Farbwerten durch weiterentwickelte Spezifikationen erweitert wurde bis hin zu den neuesten CSS3 Farben.</p>
+
+<p>In Verbindung mit einer Farbe im sRGB Raum besteht ein <code>&lt;color&gt;</code>-Wert auch aus einer <a class="external" href="https://de.wikipedia.org/wiki/Alpha_Blending">Alphakanal</a>-Koordinate, einem <em>Transparenzwert</em>, der angibt, wie die Farbe mit der Hintergrundfarbe <a class="external" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#SimpleAlphaBlending">vermischt</a> wird</p>
+
+<p>Obwohl CSS Farbwerte genau definiert sind, können sie auf verschiedenen Ausgabegeräten unterschiedlich dargestellt werden. Die meisten davon sind nicht kalibriert und manche Browser unterstützen nicht das <a class="external" href="https://de.wikipedia.org/wiki/ICC-Profil">Farbprofil</a> des Ausgabegeräts. Ohne diese kann die Farbdarstellung stark variieren.</p>
+
+<div class="note"><strong>Hinweis:</strong> Die <a class="external" href="http://www.w3.org/TR/WCAG/#visual-audio-contrast">WCAG 2.0</a> Empfehlung des W3C rät Webauthoren ausdrücklich dazu, <em>Farben</em> nicht als einziges Mittel zur Vermittlung einer bestimmten Information, Aktion oder einem Ergebnis zu verwenden. Manche Benutzer haben Probleme, Farben zu unterscheiden, was das Verständnis der übermittelten Information verhindert. Natürlich verhindert das nicht die Benutzung von Farbe, nur deren Benutzung als einziges Mittel eine Information zu beschreiben.</div>
+
+<h2 id="Interpolation">Interpolation</h2>
+
+<p>Werte des <code>&lt;color&gt;</code> CSS Datentyps können für Animationen und zur Erstellung von {{cssxref("gradient", "&lt;gradient&gt;")}} Werten interpoliert werden. In diesem Fall werden ihre Rot-, Grün- und Blau-Komponenten als eine reale Fließkommazahl interpoliert. Beachte, dass die Interpolation von Farben innerhalb des <a class="external" href="http://www.gimp.org/docs/plug-in/appendix-alpha.html">alpha-vormultiplizierten sRGBA-Farbraums</a> stattfindet, um unerwartete Grautöne zu verhindern. In Animationen wird die Geschwindigkeit der Interlolation durch die zur Animation gehörenden <a href="/de/docs/Web/CSS/timing-function">Timing-Funktion</a> bestimmt.</p>
+
+<h2 id="Werte">Werte</h2>
+
+<p>Es gibt mehrere Arten, wie ein <code>&lt;color&gt;</code> Wert beschrieben werden kann.</p>
+
+<h3 id="Farbschlüsselwörter">Farbschlüsselwörter</h3>
+
+<p>Farbschlüsselwörter sind schreibungsunabhängige Bezeichner, welche eine bestimmte Farbe repräsentieren, z. B. <code>red</code>, <code>blue</code>, <code>brown</code>, <code>lightseagreen</code>. Der Name beschreibt die Farbe, er ist jedoch meist erfunden. Die Liste an akzeptierten Werten variiert sehr zwischen den Spezifikationen:</p>
+
+<ul>
+ <li>CSS Level 1 akzeptierte nur 16 Grundfarben, bekannt als <em>VGA-Farben</em>, weil sie aus der Menge an darstellbaren Farben von <a class="external" href="http://de.wikipedia.org/wiki/VGA">VGA</a>-Grafikkarten stammen.</li>
+ <li>CSS Level 2 fügte das <code>orange</code>-Schlüsselwort hinzu.</li>
+ <li>Von Anfang an haben Browser weitere Farben akzeptiert, meist die X11 genannte Farbliste, da einige frühere Browser X11-basierte Anwendungen waren, allerdings mit einigen Unterschieden. SVG 1.0 war der erste Standard, der diese Schlüsselwörter formal definiert hat; CSS Colors Level 3 hat diese Schlüsselwörter ebenfalls formal definiert. Sie werden oft als <em>erweiterte Farbschlüsselwörter</em>, <em>X11 Farben</em> oder <em>SVG Farben</em> bezeichnet.</li>
+</ul>
+
+<p>Es gibt ein paar Dinge bei der Verwendung von Farbschlüsselwörtern zu beachten:</p>
+
+<ul>
+ <li>Außer den 16 Grundfarben, die HTML gemein hat, können keine anderen Farben in HTML verwendet werden. HTML konvertiert diese unbekannten Werte mit einem bestimmten Algorithmus, was zu komplett unterschiedlichen Farben führt. Diese Schlüsselwörter sollten ausschließlich in SVG &amp; CSS verwendet werden.</li>
+ <li>Unknown keywords make the CSS property invalid. Invalid properties being ignored, the color will have no effect. This is a different behavior than the one of HTML.</li>
+ <li>Keine als Schlüsselwort definierten Farben haben in CSS eine Transparenz. Sie sind klare, undurchsichtige Farben.</li>
+ <li>Verschiedene Schlüsselwörter kennzeichnen die gleiche Farbe:
+  <ul>
+   <li><code>darkgray</code> / <code>darkgrey</code></li>
+   <li><code>darkslategray</code> / <code>darkslategrey</code></li>
+   <li><code>dimgray</code> / <code>dimgrey</code></li>
+   <li><code>lightgray</code> / <code>lightgrey</code></li>
+   <li><code>lightslategray</code> / <code>lightslategrey</code></li>
+   <li><code>gray</code> / <code>grey</code></li>
+   <li><code>slategray</code> / <code>slategrey</code></li>
+  </ul>
+ </li>
+ <li>Obwohl die Namen der Schlüsselwörter von den gewöhnlichen X11-Farbnamen stammen, können die Farben von den entsprechenden Systemfarben im X11-System abweichen, da sie auf die spezielle Hardware der Hersteller zugeschnitten sind.</li>
+</ul>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Farbe</th>
+   <th scope="col">Schlüsselwort</th>
+   <th scope="col">RGB Hexwerte</th>
+   <th scope="col">Vorschau</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr style="position: relative;">
+   <td rowspan="16">{{SpecName("CSS1")}}</td>
+   <td style="background: #000;"> </td>
+   <td style="text-align: center;"><code>black</code></td>
+   <td><code>#000000</code></td>
+   <td style="background: black;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #C0C0C0;"> </td>
+   <td style="text-align: center;"><code>silver</code></td>
+   <td><code>#c0c0c0</code></td>
+   <td style="background: silver;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #808080;"> </td>
+   <td style="text-align: center;"><code>gray</code></td>
+   <td><code>#808080</code></td>
+   <td style="background: gray;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #FFF;"> </td>
+   <td style="text-align: center;"><code>white</code></td>
+   <td><code>#ffffff</code></td>
+   <td style="background: white;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #800000;"> </td>
+   <td style="text-align: center;"><code>maroon</code></td>
+   <td><code>#800000</code></td>
+   <td style="background: maroon;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #F00;"> </td>
+   <td style="text-align: center;"><code>red</code></td>
+   <td><code>#ff0000</code></td>
+   <td style="background: red;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #800080;"> </td>
+   <td style="text-align: center;"><code>purple</code></td>
+   <td><code>#800080</code></td>
+   <td style="background: purple;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #F0F;"> </td>
+   <td style="text-align: center;"><code>fuchsia</code></td>
+   <td><code>#ff00ff</code></td>
+   <td style="background: fuchsia;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #008000;"> </td>
+   <td style="text-align: center;"><code>green</code></td>
+   <td><code>#008000</code></td>
+   <td style="background: green;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #0F0;"> </td>
+   <td style="text-align: center;"><code>lime</code></td>
+   <td><code>#00ff00</code></td>
+   <td style="background: lime;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #808000;"> </td>
+   <td style="text-align: center;"><code>olive</code></td>
+   <td><code>#808000</code></td>
+   <td style="background: olive;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #FF0;"> </td>
+   <td style="text-align: center;"><code>yellow</code></td>
+   <td><code>#ffff00</code></td>
+   <td style="background: yellow;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #000080;"> </td>
+   <td style="text-align: center;"><code>navy</code></td>
+   <td><code>#000080</code></td>
+   <td style="background: navy;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #00F;"> </td>
+   <td style="text-align: center;"><code>blue</code></td>
+   <td><code>#0000ff</code></td>
+   <td style="background: blue;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #008080;"> </td>
+   <td style="text-align: center;"><code>teal</code></td>
+   <td><code>#008080</code></td>
+   <td style="background: teal;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #0FF;"> </td>
+   <td style="text-align: center;"><code>aqua</code></td>
+   <td><code>#00ffff</code></td>
+   <td style="background: aqua;"> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1")}}</td>
+   <td style="background: #FFA500;"> </td>
+   <td style="text-align: center;"><code>orange</code></td>
+   <td><code>#ffa500</code></td>
+   <td style="background: orange;"> </td>
+  </tr>
+  <tr>
+   <td rowspan="128">{{SpecName("CSS3 Colors")}}</td>
+   <td style="background: #f0f8ff;"> </td>
+   <td style="text-align: center;"><code>aliceblue</code></td>
+   <td><code>#f0f8ff</code></td>
+   <td style="background: aliceblue;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #faebd7;"> </td>
+   <td style="text-align: center;"><code>antiquewhite</code></td>
+   <td><code>#faebd7</code></td>
+   <td style="background: antiquewhite;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #7fffd4;"> </td>
+   <td style="text-align: center;"><code>aquamarine</code></td>
+   <td><code>#7fffd4</code></td>
+   <td style="background: aquamarine;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #f0ffff;"> </td>
+   <td style="text-align: center;"><code>azure</code></td>
+   <td><code>#f0ffff</code></td>
+   <td style="background: azure;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #f5f5dc;"> </td>
+   <td style="text-align: center;"><code>beige</code></td>
+   <td><code>#f5f5dc</code></td>
+   <td style="background: beige;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #ffe4c4;"> </td>
+   <td style="text-align: center;"><code>bisque</code></td>
+   <td><code>#ffe4c4</code></td>
+   <td style="background: bisque;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #ffebcd;"> </td>
+   <td style="text-align: center;"><code>blanchedalmond</code></td>
+   <td><code>#ffe4c4</code></td>
+   <td style="background: blanchedalmond;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #8a2be2;"> </td>
+   <td style="text-align: center;"><code>blueviolet</code></td>
+   <td><code>#8a2be2</code></td>
+   <td style="background: blueviolet;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #a52a2a;"> </td>
+   <td style="text-align: center;"><code>brown</code></td>
+   <td><code>#a52a2a</code></td>
+   <td style="background: brown;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #deb887;"> </td>
+   <td style="text-align: center;"><code>burlywood</code></td>
+   <td><code>#deb887</code></td>
+   <td style="background: burlywood;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #5f9ea0;"> </td>
+   <td style="text-align: center;"><code>cadetblue</code></td>
+   <td><code>#5f9ea0</code></td>
+   <td style="background: cadetblue;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #7fff00;"> </td>
+   <td style="text-align: center;"><code>chartreuse</code></td>
+   <td><code>#7fff00</code></td>
+   <td style="background: chartreuse;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #d2691e;"> </td>
+   <td style="text-align: center;"><code>chocolate</code></td>
+   <td><code>#d2691e</code></td>
+   <td style="background: chocolate;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #ff7f50;"> </td>
+   <td style="text-align: center;"><code>coral</code></td>
+   <td><code>#ff7f50</code></td>
+   <td style="background: coral;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #6495ed;"> </td>
+   <td style="text-align: center;"><code>cornflowerblue</code></td>
+   <td><code>#6495ed</code></td>
+   <td style="background: cornflowerblue;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #fff8dc;"> </td>
+   <td style="text-align: center;"><code>cornsilk</code></td>
+   <td><code>#fff8dc</code></td>
+   <td style="background: cornsilk;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #dc143c;"> </td>
+   <td style="text-align: center;"><code>crimson</code></td>
+   <td><code>#dc143c</code></td>
+   <td style="background: crimson;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #00008b;"> </td>
+   <td style="text-align: center;"><code>darkblue</code></td>
+   <td><code>#00008b</code></td>
+   <td style="background: darkblue;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #008b8b;"> </td>
+   <td style="text-align: center;"><code>darkcyan</code></td>
+   <td><code>#008b8b</code></td>
+   <td style="background: darkcyan;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #b8860b;"> </td>
+   <td style="text-align: center;"><code>darkgoldenrod</code></td>
+   <td><code>#b8860b</code></td>
+   <td style="background: darkgoldenrod;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #a9a9a9;"> </td>
+   <td style="text-align: center;"><code>darkgray</code></td>
+   <td><code>#a9a9a9</code></td>
+   <td style="background: darkgray;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #006400;"> </td>
+   <td style="text-align: center;"><code>darkgreen</code></td>
+   <td><code>#006400</code></td>
+   <td style="background: darkgreen;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #a9a9a9;"> </td>
+   <td style="text-align: center;"><code>darkgrey</code></td>
+   <td><code>#a9a9a9</code></td>
+   <td style="background: darkgrey;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #bdb76b;"> </td>
+   <td style="text-align: center;"><code>darkkhaki</code></td>
+   <td><code>#bdb76b</code></td>
+   <td style="background: darkkhaki;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #8b008b;"> </td>
+   <td style="text-align: center;"><code>darkmagenta</code></td>
+   <td><code>#8b008b</code></td>
+   <td style="background: darkmagenta;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #556b2f;"> </td>
+   <td style="text-align: center;"><code>darkolivegreen</code></td>
+   <td><code>#556b2f</code></td>
+   <td style="background: darkolivegreen;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #ff8c00;"> </td>
+   <td style="text-align: center;"><code>darkorange</code></td>
+   <td><code>#ff8c00</code></td>
+   <td style="background: darkorange;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #9932cc;"> </td>
+   <td style="text-align: center;"><code>darkorchid</code></td>
+   <td><code>#9932cc</code></td>
+   <td style="background: darkorchid;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #8b0000;"> </td>
+   <td style="text-align: center;"><code>darkred</code></td>
+   <td><code>#8b0000</code></td>
+   <td style="background: darkred;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #e9967a;"> </td>
+   <td style="text-align: center;"><code>darksalmon</code></td>
+   <td><code>#e9967a</code></td>
+   <td style="background: darksalmon;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #8fbc8f;"> </td>
+   <td style="text-align: center;"><code>darkseagreen</code></td>
+   <td><code>#8fbc8f</code></td>
+   <td style="background: darkseagreen;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #483d8b;"> </td>
+   <td style="text-align: center;"><code>darkslateblue</code></td>
+   <td><code>#483d8b</code></td>
+   <td style="background: darkslateblue;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #2f4f4f;"> </td>
+   <td style="text-align: center;"><code>darkslategray</code></td>
+   <td><code>#2f4f4f</code></td>
+   <td style="background: darkslategray;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #2f4f4f;"> </td>
+   <td style="text-align: center;"><code>darkslategrey</code></td>
+   <td><code>#2f4f4f</code></td>
+   <td style="background: darkslategrey;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #00ced1;"> </td>
+   <td style="text-align: center;"><code>darkturquoise</code></td>
+   <td><code>#00ced1</code></td>
+   <td style="background: darkturquoise;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #9400d3;"> </td>
+   <td style="text-align: center;"><code>darkviolet</code></td>
+   <td><code>#9400d3</code></td>
+   <td style="background: darkviolet;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #ff1493;"> </td>
+   <td style="text-align: center;"><code>deeppink</code></td>
+   <td><code>#ff1493</code></td>
+   <td style="background: deeppink;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #00bfff;"> </td>
+   <td style="text-align: center;"><code>deepskyblue</code></td>
+   <td><code>#00bfff</code></td>
+   <td style="background: deepskyblue;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #696969;"> </td>
+   <td style="text-align: center;"><code>dimgray</code></td>
+   <td><code>#696969</code></td>
+   <td style="background: dimgray;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #696969;"> </td>
+   <td style="text-align: center;"><code>dimgrey</code></td>
+   <td><code>#696969</code></td>
+   <td style="background: dimgrey;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #1e90ff;"> </td>
+   <td style="text-align: center;"><code>dodgerblue</code></td>
+   <td><code>#1e90ff</code></td>
+   <td style="background: dodgerblue;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #b22222;"> </td>
+   <td style="text-align: center;"><code>firebrick</code></td>
+   <td><code>#b22222</code></td>
+   <td style="background: firebrick;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #fffaf0;"> </td>
+   <td style="text-align: center;"><code>floralwhite</code></td>
+   <td><code>#fffaf0</code></td>
+   <td style="background: floralwhite;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #228b22;"> </td>
+   <td style="text-align: center;"><code>forestgreen</code></td>
+   <td><code>#228b22</code></td>
+   <td style="background: forestgreen;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #dcdcdc;"> </td>
+   <td style="text-align: center;"><code>gainsboro</code></td>
+   <td><code>#dcdcdc</code></td>
+   <td style="background: gainsboro;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #f8f8ff;"> </td>
+   <td style="text-align: center;"><code>ghostwhite</code></td>
+   <td><code>#f8f8ff</code></td>
+   <td style="background: ghostwhite;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #ffd700;"> </td>
+   <td style="text-align: center;"><code>gold</code></td>
+   <td><code>#ffd700</code></td>
+   <td style="background: gold;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #daa520;"> </td>
+   <td style="text-align: center;"><code>goldenrod</code></td>
+   <td><code>#daa520</code></td>
+   <td style="background: goldenrod;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #adff2f;"> </td>
+   <td style="text-align: center;"><code>greenyellow</code></td>
+   <td><code>#adff2f</code></td>
+   <td style="background: greenyellow ;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #808080;"> </td>
+   <td style="text-align: center;"><code>grey</code></td>
+   <td><code>#808080</code></td>
+   <td style="background: grey;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #f0fff0;"> </td>
+   <td style="text-align: center;"><code>honeydew</code></td>
+   <td><code>#f0fff0</code></td>
+   <td style="background: honeydew;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #ff69b4;"> </td>
+   <td style="text-align: center;"><code>hotpink</code></td>
+   <td><code>#ff69b4</code></td>
+   <td style="background: hotpink;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #cd5c5c;"> </td>
+   <td style="text-align: center;"><code>indianred</code></td>
+   <td><code>#cd5c5c</code></td>
+   <td style="background: indianred;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #4b0082;"> </td>
+   <td style="text-align: center;"><code>indigo</code></td>
+   <td><code>#4b0082</code></td>
+   <td style="background: indigo;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #fffff0;"> </td>
+   <td style="text-align: center;"><code>ivory</code></td>
+   <td><code>#fffff0</code></td>
+   <td style="background: ivory;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #f0e68c;"> </td>
+   <td style="text-align: center;"><code>khaki</code></td>
+   <td><code>#f0e68c</code></td>
+   <td style="background: khaki;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #e6e6fa;"> </td>
+   <td style="text-align: center;"><code>lavender</code></td>
+   <td><code>#e6e6fa</code></td>
+   <td style="background: lavender;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #fff0f5;"> </td>
+   <td style="text-align: center;"><code>lavenderblush</code></td>
+   <td><code>#fff0f5</code></td>
+   <td style="background: lavenderblush ;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #7cfc00;"> </td>
+   <td style="text-align: center;"><code>lawngreen</code></td>
+   <td><code>#7cfc00</code></td>
+   <td style="background: lawngreen;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #fffacd;"> </td>
+   <td style="text-align: center;"><code>lemonchiffon</code></td>
+   <td><code>#fffacd</code></td>
+   <td style="background: lemonchiffon;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #add8e6;"> </td>
+   <td style="text-align: center;"><code>lightblue</code></td>
+   <td><code>#add8e6</code></td>
+   <td style="background: lightblue;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #f08080;"> </td>
+   <td style="text-align: center;"><code>lightcoral</code></td>
+   <td><code>#f08080</code></td>
+   <td style="background: lightcoral;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #e0ffff;"> </td>
+   <td style="text-align: center;"><code>lightcyan</code></td>
+   <td><code>#e0ffff</code></td>
+   <td style="background: lightcyan;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #fafad2;"> </td>
+   <td style="text-align: center;"><code>lightgoldenrodyellow</code></td>
+   <td><code>#fafad2</code></td>
+   <td style="background: lightgoldenrodyellow ;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #d3d3d3;"> </td>
+   <td style="text-align: center;"><code>lightgray</code></td>
+   <td><code>#d3d3d3</code></td>
+   <td style="background: lightgray;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #90ee90;"> </td>
+   <td style="text-align: center;"><code>lightgreen</code></td>
+   <td><code>#90ee90</code></td>
+   <td style="background: lightgreen;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #d3d3d3;"> </td>
+   <td style="text-align: center;"><code>lightgrey</code></td>
+   <td><code>#d3d3d3</code></td>
+   <td style="background: lightgrey;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #ffb6c1;"> </td>
+   <td style="text-align: center;"><code>lightpink</code></td>
+   <td><code>#ffb6c1</code></td>
+   <td style="background: lightpink;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #ffa07a;"> </td>
+   <td style="text-align: center;"><code>lightsalmon</code></td>
+   <td><code>#ffa07a</code></td>
+   <td style="background: lightsalmon;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #20b2aa;"> </td>
+   <td style="text-align: center;"><code>lightseagreen</code></td>
+   <td><code>#20b2aa</code></td>
+   <td style="background: lightseagreen;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #87cefa;"> </td>
+   <td style="text-align: center;"><code>lightskyblue</code></td>
+   <td><code>#87cefa</code></td>
+   <td style="background: lightskyblue;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #778899;"> </td>
+   <td style="text-align: center;"><code>lightslategray</code></td>
+   <td><code>#778899</code></td>
+   <td style="background: lightslategray;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #778899;"> </td>
+   <td style="text-align: center;"><code>lightslategrey</code></td>
+   <td><code>#778899</code></td>
+   <td style="background: lightslategrey;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #b0c4de;"> </td>
+   <td style="text-align: center;"><code>lightsteelblue</code></td>
+   <td><code>#b0c4de</code></td>
+   <td style="background: lightsteelblue;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #ffffe0;"> </td>
+   <td style="text-align: center;"><code>lightyellow</code></td>
+   <td><code>#ffffe0</code></td>
+   <td style="background: lightyellow;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #32cd32;"> </td>
+   <td style="text-align: center;"><code>limegreen</code></td>
+   <td><code>#32cd32</code></td>
+   <td style="background: limegreen;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #faf0e6;"> </td>
+   <td style="text-align: center;"><code>linen</code></td>
+   <td><code>#faf0e6</code></td>
+   <td style="background: linen;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #66cdaa;"> </td>
+   <td style="text-align: center;"><code>mediumaquamarine</code></td>
+   <td><code>#66cdaa</code></td>
+   <td style="background: mediumaquamarine;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #0000cd;"> </td>
+   <td style="text-align: center;"><code>mediumblue</code></td>
+   <td><code>#0000cd</code></td>
+   <td style="background: mediumblue;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #ba55d3;"> </td>
+   <td style="text-align: center;"><code>mediumorchid</code></td>
+   <td><code>#ba55d3</code></td>
+   <td style="background: mediumorchid;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #9370db;"> </td>
+   <td style="text-align: center;"><code>mediumpurple</code></td>
+   <td><code>#9370db</code></td>
+   <td style="background: mediumpurple;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #3cb371;"> </td>
+   <td style="text-align: center;"><code>mediumseagreen</code></td>
+   <td><code>#3cb371</code></td>
+   <td style="background: mediumseagreen;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #7b68ee;"> </td>
+   <td style="text-align: center;"><code>mediumslateblue</code></td>
+   <td><code>#7b68ee</code></td>
+   <td style="background: mediumslateblue;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #00fa9a;"> </td>
+   <td style="text-align: center;"><code>mediumspringgreen</code></td>
+   <td><code>#00fa9a</code></td>
+   <td style="background: mediumspringgreen;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #48d1cc;"> </td>
+   <td style="text-align: center;"><code>mediumturquoise</code></td>
+   <td><code>#48d1cc</code></td>
+   <td style="background: mediumturquoise;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #c71585;"> </td>
+   <td style="text-align: center;"><code>mediumvioletred</code></td>
+   <td><code>#c71585</code></td>
+   <td style="background: mediumvioletred;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #191970;"> </td>
+   <td style="text-align: center;"><code>midnightblue</code></td>
+   <td><code>#191970</code></td>
+   <td style="background: midnightblue;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #f5fffa;"> </td>
+   <td style="text-align: center;"><code>mintcream</code></td>
+   <td><code>#f5fffa</code></td>
+   <td style="background: mintcream;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #ffe4e1;"> </td>
+   <td style="text-align: center;"><code>mistyrose</code></td>
+   <td><code>#ffe4e1</code></td>
+   <td style="background: mistyrose;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #ffe4b5;"> </td>
+   <td style="text-align: center;"><code>moccasin</code></td>
+   <td><code>#ffe4b5</code></td>
+   <td style="background: moccasin;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #ffdead;"> </td>
+   <td style="text-align: center;"><code>navajowhite</code></td>
+   <td><code>#ffdead</code></td>
+   <td style="background: navajowhite;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #fdf5e6;"> </td>
+   <td style="text-align: center;"><code>oldlace</code></td>
+   <td><code>#fdf5e6</code></td>
+   <td style="background: oldlace;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #6b8e23;"> </td>
+   <td style="text-align: center;"><code>olivedrab</code></td>
+   <td><code>#6b8e23</code></td>
+   <td style="background: olivedrab;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #ff4500;"> </td>
+   <td style="text-align: center;"><code>orangered</code></td>
+   <td><code>#ff4500</code></td>
+   <td style="background: orangered;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #da70d6;"> </td>
+   <td style="text-align: center;"><code>orchid</code></td>
+   <td><code>#da70d6</code></td>
+   <td style="background: orchid;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #eee8aa;"> </td>
+   <td style="text-align: center;"><code>palegoldenrod</code></td>
+   <td><code>#eee8aa</code></td>
+   <td style="background: palegoldenrod;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #98fb98;"> </td>
+   <td style="text-align: center;"><code>palegreen</code></td>
+   <td><code>#98fb98</code></td>
+   <td style="background: palegreen;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #afeeee;"> </td>
+   <td style="text-align: center;"><code>paleturquoise</code></td>
+   <td><code>#afeeee</code></td>
+   <td style="background: paleturquoise;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #db7093;"> </td>
+   <td style="text-align: center;"><code>palevioletred</code></td>
+   <td><code>#db7093</code></td>
+   <td style="background: palevioletred;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #ffefd5;"> </td>
+   <td style="text-align: center;"><code>papayawhip</code></td>
+   <td><code>#ffefd5</code></td>
+   <td style="background: papayawhip;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #ffdab9;"> </td>
+   <td style="text-align: center;"><code>peachpuff</code></td>
+   <td><code>#ffdab9</code></td>
+   <td style="background: peachpuff;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #cd853f;"> </td>
+   <td style="text-align: center;"><code>peru</code></td>
+   <td><code>#cd853f</code></td>
+   <td style="background: peru;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #ffc0cb;"> </td>
+   <td style="text-align: center;"><code>pink</code></td>
+   <td><code>#ffc0cb</code></td>
+   <td style="background: pink;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #dda0dd;"> </td>
+   <td style="text-align: center;"><code>plum</code></td>
+   <td><code>#dda0dd</code></td>
+   <td style="background: plum;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #b0e0e6;"> </td>
+   <td style="text-align: center;"><code>powderblue</code></td>
+   <td><code>#b0e0e6</code></td>
+   <td style="background: powderblue;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #bc8f8f;"> </td>
+   <td style="text-align: center;"><code>rosybrown</code></td>
+   <td><code>#bc8f8f</code></td>
+   <td style="background: rosybrown;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #4169e1;"> </td>
+   <td style="text-align: center;"><code>royalblue</code></td>
+   <td><code>#4169e1</code></td>
+   <td style="background: royalblue;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #8b4513;"> </td>
+   <td style="text-align: center;"><code>saddlebrown</code></td>
+   <td><code>#8b4513</code></td>
+   <td style="background: saddlebrown;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #fa8072;"> </td>
+   <td style="text-align: center;"><code>salmon</code></td>
+   <td><code>#fa8072</code></td>
+   <td style="background: salmon;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #f4a460;"> </td>
+   <td style="text-align: center;"><code>sandybrown</code></td>
+   <td><code>#f4a460</code></td>
+   <td style="background: sandybrown;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #2e8b57;"> </td>
+   <td style="text-align: center;"><code>seagreen</code></td>
+   <td><code>#2e8b57</code></td>
+   <td style="background: seagreen;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #fff5ee;"> </td>
+   <td style="text-align: center;"><code>seashell</code></td>
+   <td><code>#fff5ee</code></td>
+   <td style="background: seashell;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #a0522d;"> </td>
+   <td style="text-align: center;"><code>sienna</code></td>
+   <td><code>#a0522d</code></td>
+   <td style="background: sienna;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #87ceeb;"> </td>
+   <td style="text-align: center;"><code>skyblue</code></td>
+   <td><code>#87ceeb</code></td>
+   <td style="background: skyblue;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #6a5acd;"> </td>
+   <td style="text-align: center;"><code>slateblue</code></td>
+   <td><code>#6a5acd</code></td>
+   <td style="background: slateblue;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #708090;"> </td>
+   <td style="text-align: center;"><code>slategray</code></td>
+   <td><code>#708090</code></td>
+   <td style="background: slategray;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #708090;"> </td>
+   <td style="text-align: center;"><code>slategrey</code></td>
+   <td><code>#708090</code></td>
+   <td style="background: slategrey;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #fffafa;"> </td>
+   <td style="text-align: center;"><code>snow</code></td>
+   <td><code>#fffafa</code></td>
+   <td style="background: snow;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #00ff7f;"> </td>
+   <td style="text-align: center;"><code>springgreen</code></td>
+   <td><code>#00ff7f</code></td>
+   <td style="background: springgreen;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #4682b4;"> </td>
+   <td style="text-align: center;"><code>steelblue</code></td>
+   <td><code>#4682b4</code></td>
+   <td style="background: steelblue;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #d2b48c;"> </td>
+   <td style="text-align: center;"><code>tan</code></td>
+   <td><code>#d2b48c</code></td>
+   <td style="background: tan;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #d8bfd8;"> </td>
+   <td style="text-align: center;"><code>thistle</code></td>
+   <td><code>#d8bfd8</code></td>
+   <td style="background: thistle;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #ff6347;"> </td>
+   <td style="text-align: center;"><code>tomato</code></td>
+   <td><code>#ff6347</code></td>
+   <td style="background: tomato;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #40e0d0;"> </td>
+   <td style="text-align: center;"><code>turquoise</code></td>
+   <td><code>#40e0d0</code></td>
+   <td style="background: turquoise;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #ee82ee;"> </td>
+   <td style="text-align: center;"><code>violet</code></td>
+   <td><code>#ee82ee</code></td>
+   <td style="background: violet;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #f5deb3;"> </td>
+   <td style="text-align: center;"><code>wheat</code></td>
+   <td><code>#f5deb3</code></td>
+   <td style="background: wheat;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #f5f5f5;"> </td>
+   <td style="text-align: center;"><code>whitesmoke</code></td>
+   <td><code>#f5f5f5</code></td>
+   <td style="background: whitesmoke;"> </td>
+  </tr>
+  <tr>
+   <td style="background: #9acd32;"> </td>
+   <td style="text-align: center;"><code>yellowgreen</code></td>
+   <td><code>#9acd32</code></td>
+   <td style="background: yellowgreen;"> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS4 Colors")}}</td>
+   <td style="background: #639;"> </td>
+   <td style="text-align: center;"><code>rebeccapurple</code></td>
+   <td><code>#663399</code></td>
+   <td style="background: rebeccapurple;"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Die Farbe <code>rebeccapurple</code> entspricht der Farbe <code>#639</code>. Mehr Informationen darüber, warum sie eingeführt wurde, kann in diesem Codepen Blog Post von Trezy nachgelesen werden: "<a href="http://codepen.io/trezy/blog/honoring-a-great-man">Honoring a Great Man</a>."</p>
+
+<h3 id="transparent_Schlüsselwort"><code>transparent</code> Schlüsselwort</h3>
+
+<p>Das <code>transparent</code>-Schlüsselwort beschreibt eine vollkommen transparente Farber, d. h. die dargestellte Farbe ist die Hintergrundfarbe. Technisch ist sie schwarz mit einem Alphakanal mit Minimalwert und ist ein Kürzel für <code>rgba(0,0,0,0)</code>.</p>
+
+<div class="note"><strong>Historischer Hinweis</strong><br>
+Das Schlüsselwort <code>transparent</code> war keine echte Farbe in CSS Level 2 (Revision 1). Es war ein spezifisches Schlüsselwort, das bei zwei CSS-Eigenschaften anstelle eines regulären <code>&lt;color&gt;</code>-Wertes verwendet werden konnte: {{cssxref("background")}} und {{cssxref("border")}}. Es war eigentlich hinzugefügt, um geerbte Festfarben zu überschreiben.<br>
+<br>
+Mit der Unterstützung der Deckkraft durch den <a class="external" href="https://de.wikipedia.org/wiki/Alpha_Blending">Alphakanal</a>, wurde <code>transparent</code> in CSS Colors Level 3 neudefiniert als eine echte Farbe, die überall dort verwendet werden kann, wo ein <code>&lt;color&gt;</code>-Wert benötigt wird, wie der {{cssxref("color")}} Eigenschaft.</div>
+
+<h3 id="currentColor_Schlüsselwort"><code>currentColor</code> Schlüsselwort</h3>
+
+<p>Das <code>currentColor</code>-Schlüsselwort beschreibt den berechneten Wert der {{cssxref("color")}} Eigenschaft des Elements. Es erlaubt, die Farbeigenschaften, die von Eigenschaften oder Kindelementeigenschaften zu vererben, die sie normalerweise nicht vererben.</p>
+
+<p>Es kann auch für Eigenschaften verwendet werden, die den berechneten Wert der {{cssxref("color")}} Eigenschaft des Elements erben und entspricht dem <code>inherit</code> Schlüsselwort bei diesen Elementen, falls es welche gibt.</p>
+
+<h4 id="Live-Beispiel">Live-Beispiel</h4>
+
+<p>Die Farbe der Zeile (ein farbgefülltes {{HTMLElement("div")}}) passt sich der Farbe der {{cssxref("color")}} Eigenschaft an, die von seinem Elternelement geerbt wird.</p>
+
+<div style="width: 50%;">
+<h5 id="Live-Beispiel_1">Live-Beispiel 1</h5>
+
+<pre class="brush: html">&lt;div style="color:darkred;"&gt;
+ Die Farbe dieses Texts ist dieselbe wie die der Zeile:
+ &lt;div style="background:currentcolor; height:1px;"&gt;&lt;/div&gt;
+ Mehr Text.
+&lt;/div&gt;</pre>
+
+<p>{{EmbedLiveSample("Live-Beispiel_1")}}</p>
+
+<h5 id="Live-Beispiel_2">Live-Beispiel 2</h5>
+
+<pre class="brush: html">&lt;div style="color:blue; border-bottom: 1px dashed currentcolor;"&gt;
+ Die Farbe dieses Texts ist dieselbe wie die der Zeile:
+ &lt;div style="background:currentcolor; height:1px;"&gt;&lt;/div&gt;
+ Mehr Text.
+&lt;/div&gt;</pre>
+
+<p>{{EmbedLiveSample("Live-Beispiel_2")}}</p>
+</div>
+
+<h3 id="rgb()"><a id="rgb" name="rgb"><code>rgb()</code></a></h3>
+
+<p>Farben können durch das Rot-Grün-Blau-Modell (RGB-Modell) auf zwei Weisen definiert werden:</p>
+
+<dl>
+ <dt>Hexadezimale Notation <code>#RRGGBB</code> und <code>#RGB</code></dt>
+ <dd>
+ <ul style="margin-bottom: 0;">
+  <li>"<code>#</code>", gefolgt von sechs hexadezimalen Zeichen (0-9, A-F).</li>
+  <li>"<code>#</code>", gefolgt von drei hexadezimalen Zeichen (0-9, A-F).</li>
+ </ul>
+ Die Drei-Ziffern-RGB-Notation (<code>#RGB</code>) und die Sechs-Ziffern-Form (<code>#RRGGBB</code>) sind gleich.<br>
+ Zum Beispiel repräsentieren <code>#f03</code> und <code>#ff0033</code> dieselbe Farbe.</dd>
+ <dt>Funktionelle Notation <code>rgb(R,G,B)</code></dt>
+ <dd>"<code>rgb</code>", gefolgt von drei {{cssxref("&lt;integer&gt;")}} oder drei {{cssxref("&lt;percentage&gt;")}} Werten.<br>
+ Die Ganzzahl 255 entspricht 100% und F oder FF in der hexadezimalen Schreibweise.</dd>
+</dl>
+
+<pre class="eval">/* Diese Beispiele definieren alle dieselbe RGB-Farbe: */
+
+ #f03
+ #F03
+ #ff0033
+ #FF0033
+ rgb(255,0,51)
+ rgb(255, 0, 51)
+ <s>rgb(255, 0, 51.2)</s> /* FEHLER! Keine Bruchzahlen verwenden, nur Ganzzahlen. */
+ rgb(100%,0%,20%)
+ rgb(100%, 0%, 20%)
+ <s>rgb(100%, 0, 20%)</s> /* FEHLER! Ganzzahl- und Prozentschreibweise dürfen nicht gemischt werden. */
+</pre>
+
+<h3 id="hsl()"><a id="hsl" name="hsl"><code>hsl()</code></a></h3>
+
+<p>Farben können auch durch das Hue-Saturation-Lightness-Modell (HSL-Modell) unter Verwendung der funktionellen Notation <code>hsl()</code> definiert werden. Der Vorteil von HSL gegenüber RGB ist, dass es wesentlich intuitiver ist: man kann die Zahlen, die man haben will, erraten und dann anpassen. Es ist auch einfacher, Sets passender Farben zu erstellen (indem der Farbwert unverändert bleibt und die Helligkeit/Dunkelheit und Sättigung verändert werden).</p>
+
+<p>Der <strong>Farbwert</strong> wird als ein Winkel des Farbkreises angegeben (d. h. der Regenbogen als Kreis dargestellt). Der Winkel wird als einheitenlose {{cssxref("&lt;number&gt;")}} angegeben. Per definition <strong>red=0=360</strong> und die anderen Farben sind so auf den Kreis verteilt, sodass <strong>green=120</strong>, <strong>blue=240</strong>, etc. Als Winkel bricht er implizit um, sodass 120=240 und 480=120.</p>
+
+<p>Sättigung und Helligkeit werden als Prozentwert angegeben.<br>
+ <code>100%</code> entspricht voller <strong>Sättigung</strong> und <code>0%</code> ist ein Grauton.<br>
+ <code>100%</code> <strong>Helligkeit</strong> ist weiß, <code>0%</code> Helligkeit ist schwarz und <code>50%</code> Helligkeit ist "normal".</p>
+
+<pre class="brush: css" style="text-shadow: rgba(255,255,255,0.4) -1px -1px;">hsl(0,  100%,50%)   <span style="background-color: hsl(0,100%,50%);"> /* rot */       </span>
+hsl(30, 100%,50%)   <span style="background: hsl(30,100%,50%);">                 </span>
+hsl(60, 100%,50%)   <span style="background: hsl(60,100%,50%);">                 </span>
+hsl(90, 100%,50%)   <span style="background: hsl(90,100%,50%);">                 </span>
+hsl(120,100%,50%)   <span style="background: hsl(120,100%,50%);"> /* grün */      </span>
+hsl(150,100%,50%)   <span style="background: hsl(150,100%,50%);">                 </span>
+hsl(180,100%,50%)   <span style="background: hsl(180,100%,50%);">                 </span>
+hsl(210,100%,50%)   <span style="background: hsl(210,100%,50%);">                 </span>
+hsl(240,100%,50%)   <span style="background: hsl(240,100%,50%);"> /* blau */      </span>
+hsl(270,100%,50%)   <span style="background: hsl(270,100%,50%);">                 </span>
+hsl(300,100%,50%)   <span style="background: hsl(300,100%,50%);">                 </span>
+hsl(330,100%,50%)   <span style="background: hsl(330,100%,50%);">                 </span>
+hsl(360,100%,50%)   <span style="background: hsl(360,100%,50%);"> /* rot */       </span>
+
+hsl(120,100%,25%)   <span style="background: hsl(120,100%,25%);"> /* dunkelgrün */</span>
+hsl(120,100%,50%)   <span style="background: hsl(120,100%,50%);"> /* grün*/       </span>
+hsl(120,100%,75%)   <span style="background: hsl(120,100%,75%);"> /* hellgrün */  </span>
+
+hsl(120,100%,50%)   <span style="background: hsl(120,100%,50%);"> /* grün */      </span>
+hsl(120, 67%,50%)   <span style="background: hsl(120,67%,50%);">                 </span>
+hsl(120, 33%,50%)   <span style="background: hsl(120,33%,50%);">                 </span>
+hsl(120,  0%,50%)   <span style="background: hsl(120,0%,50%);">                 </span>
+
+hsl(120, 60%,70%)   <span style="background: hsl(120,60%,70%);"> /* pastelgrün */</span>
+</pre>
+
+<h3 id="rgba()"><a id="rgba" name="rgba"><code>rgba()</code></a></h3>
+
+<p>Farben können durch das Rot-Grün-Blau-Model (RGB-Modell) unter Verwendungn der funktionellen Notation <code>rgba()</code> verwendet werden. RGBa erweitert das RGB-Farbmodell um einen Alphakanal, der die Deckkraft einer Farbe angibt.<br>
+ <strong>a</strong> bedeutet Deckkraft: 0=transparent; 1=undurchsichtig;</p>
+
+<pre class="brush: css">rgba(255, 0, 0, 0.1)   <span style="background: rgba(255,0,0,0.1);"> /* 10% undurchsichtiges Rot */      </span>
+rgba(255, 0, 0, 0.4)   <span style="background: rgba(255,0,0,0.4);"> /* 40% undurchsichtiges Rot */      </span>
+rgba(255, 0, 0, 0.7)   <span style="background: rgba(255,0,0,0.7);"> /* 70% undurchsichtiges Rot */      </span>
+rgba(255, 0, 0, 1)     <span style="background: rgba(255,0,0,1);"> /* komplett undurchsichtiges Rot */ </span>
+</pre>
+
+<h3 id="hsla()"><a id="hsla" name="hsla"><code>hsla()</code></a></h3>
+
+<p>Farben können auch durch das Hue-Saturation-Lightness-Alpha-Modell (HSLa-Modell) unter Verwendung der funktionellen Notation <code>hsla()</code> definiert werden. HSLa erweitert das HSL-Farbmodell um einen Alphakanal, der die Deckkraft einer Farbe angibt.<br>
+ <strong>a</strong> bedeutet Deckkraft: 0=transparent; 1=undurchsichtig;</p>
+
+<pre class="brush: css" style="text-shadow: rgba(255, 255, 255, 0.4) -1px -1px;">hsla(240, 100%, 50%, 0.05)   <span style="background: hsla(240,100%,50%,0.05);"> /* 5% undurchsichtiges Blau */   </span>
+hsla(240,100%,50%, 0.4)      <span style="background: hsla(240,100%,50%,0.4);"> /* 40% undurchsichtiges Blau */  </span>
+hsla(240,100%,50%, 0.7)      <span style="background: hsla(240,100%,50%,0.7);"> /* 70% undurchsichtiges Blau */  </span>
+hsla(240,100%,50%,   1)      <span style="background: hsla(240,100%,50%,1);"> /* full undurchsichtiges Blau */ </span>
+</pre>
+
+<h3 id="Systemfarben">Systemfarben</h3>
+
+<p>Nicht alle Systemfarben werden von allen Systemen unterstützt. {{deprecated_inline}} für die Benutzung in öffentlichen Webseiten.</p>
+
+<dl style="font: small Tahoma,'Liberation Sans','Nimbus Sans L',sans-serif; border: 1px solid powderblue; padding: 0.5em 0pt 0.5em 0.5em; -moz-column-rule: 1px solid powderblue; -moz-column-width: 15em; background: #eee; -webkit-columns: 15em; -webkit-column-rule: 1px solid powderblue; columns: 17em; column-rule: 1px solid powderblue;">
+ <dt>ActiveBorder</dt>
+ <dd>Rahmenfarbe eines aktiven Fensters.</dd>
+ <dt>ActiveCaption</dt>
+ <dd>Titelfarbe eines aktiven Fensters. Sollte mit der Vordergrundfarbe <code>CaptionText</code> verwendet werden.</dd>
+ <dt>AppWorkspace</dt>
+ <dd>Hintergrundfarbe einer Mehrfachdokumentschnittstelle (MDI).</dd>
+ <dt>Background</dt>
+ <dd>Desktophintergrund.</dd>
+ <dt>ButtonFace</dt>
+ <dd>Schaltflächenfarbe für 3D-Elemente, die durch eine Ebene umgebender Rahmen dreidimensional erscheinen. Sollte mit der Vordergrundfarbe <code>ButtonText</code> verwendet werden.</dd>
+ <dt>ButtonHighlight</dt>
+ <dd>Farbe des dem Licht zugewandten Rahmens eines 3D-Elements, das durch diesen Rahmen dreidimensional erscheint.</dd>
+ <dt>ButtonShadow</dt>
+ <dd>Farbe des dem Licht abgewandten Rahmens eines 3D-Elements, das durch diesen Rahmen dreidimensional erscheint.</dd>
+ <dt>ButtonText</dt>
+ <dd>Text auf Schaltflächen. Sollte mit der Hintergrundfarbe <code>ButtonFace</code> oder <code>ThreeDFace</code> verwendet werden.</dd>
+ <dt>CaptionText</dt>
+ <dd>Farbe des Titeltexts in Fenstern. Sollte mit der Hintergrundfarbe <code>ActiveCaption</code> verwendet werden.</dd>
+ <dt>GrayText</dt>
+ <dd>Farbe für ausgegrauten (deaktivierten) Text.</dd>
+ <dt>Highlight</dt>
+ <dd>Farbe für ausgewählte Elemente in einem Steuerelement. Sollte mit der Vordergrundfarbe <code>HighlightText</code> verwendet werden.</dd>
+ <dt>HighlightText</dt>
+ <dd>Farbe des Texts ausgewählter Elemente in einem Steuerelement. Sollte mit der Hintergrundfarbe <code>Highlight</code> verwendet werden.</dd>
+ <dt>InactiveBorder</dt>
+ <dd>Rahmenfarbe eines inaktiven Fensters.</dd>
+ <dt>InactiveCaption</dt>
+ <dd>Titelfarbe eines inaktiven Fensters. Sollte mit der Vordergrundfarbe <code>InactiveCaptionText</code> verwendet werden.</dd>
+ <dt>InactiveCaptionText</dt>
+ <dd>Farbe des Titeltexts in inaktiven Fenstern. Sollte mit der Hintergrundfarbe <code>InactiveCaption</code> verwendet werden.</dd>
+ <dt>InfoBackground</dt>
+ <dd>Hintergrundfarbe für Tooltips. Sollte mit der Vordergrundfarbe <code>InfoText</code> verwendet werden.</dd>
+ <dt>InfoText</dt>
+ <dd>Textfarbe für Tooltips. Sollte mit der Hintergrundfarbe <code>InfoBackground</code> verwendet werden.</dd>
+ <dt>Menu</dt>
+ <dd>Hintergrundfarbe von Menüs. Sollte mit der Vordergrundfarbe <code>MenuText</code> oder <code>-moz-MenuBarText</code> verwendet werden.</dd>
+ <dt>MenuText</dt>
+ <dd>Textfarbe von Menüs. Sollte mit der Hintergrundfarbe <code>Menu</code> verwendet werden.</dd>
+ <dt>Scrollbar</dt>
+ <dd>Hintergrundfarbe von Scrollleisten.</dd>
+ <dt>ThreeDDarkShadow</dt>
+ <dd>Farbe des dunkleren (normalerweise äußeren) der dem Licht abgewandten zweier Rahmen für 3D-Elemente, die durch zwei Ebenen umgebender konzentrischer Rahmen dreidimensional erscheinen.</dd>
+ <dt>ThreeDFace</dt>
+ <dd>Schaltflächenfarbe für 3D-Elemente, die durch zwei Ebenen umgebender konzentrischer Rahmen dreidimensional erscheinen. Sollte mit der Vordergrundfarbe <code>ButtonText</code> verwendet werden.</dd>
+ <dt>ThreeDHighlight</dt>
+ <dd>Farbe des helleren (normalerweise äußeren) der dem Licht zugewandten zweier Rahmen für 3D-Elemente, die durch zwei Ebenen umgebender konzentrischer Rahmen dreidimensional erscheinen.</dd>
+ <dt>ThreeDLightShadow</dt>
+ <dd>Farbe des dunkleren (normalerweise inneren) der dem Licht zugewandten zweier Rahmen für 3D-Elemente, die durch zwei Ebenen umgebender konzentrischer Rahmen dreidimensional erscheinen.</dd>
+ <dt>ThreeDShadow</dt>
+ <dd>Farbe des helleren (normalerweise inneren) der dem Licht abgewandten zweier Rahmen für 3D-Elemente, die durch zwei Ebenen umgebender konzentrischer Rahmen dreidimensional erscheinen.</dd>
+ <dt>Window</dt>
+ <dd>Fensterhintergrundfarbe. Sollte mit der Vordergrundfarbe <code>WindowText</code> verwendet werden.</dd>
+ <dt>WindowFrame</dt>
+ <dd>Fensterrahmenfarbe.</dd>
+ <dt>WindowText</dt>
+ <dd>Textfarbe in Fenstern. Sollte mit der Hintergrundfarbe <code>Window</code> verwendet werden.</dd>
+</dl>
+
+<h3 id="Mozilla_Systemfarben_Erweiterungen">Mozilla Systemfarben Erweiterungen</h3>
+
+<dl style="font: small Tahoma,'Liberation Sans','Nimbus Sans L',sans-serif; border: 1px solid powderblue; padding: 0.5em 0 0.5em 0.5em; -moz-column-rule: 1px solid powderblue; -moz-column-width: 17em; background: #eee; -webkit-columns: 17em; -webkit-column-rule: 1px solid powderblue; columns: 17em; column-rule: 1px solid powderblue;">
+ <dt>-moz-ButtonDefault</dt>
+ <dd>Rahmenfarbe, die um Schaltflächen angezeigt wird, die die Standardaktion für Dialoge darstellen.</dd>
+ <dt>-moz-ButtonHoverFace</dt>
+ <dd>Hintergrundfarbe einer Schaltfläche, über der der Mauszeiger steht (was <code>ThreeDFace</code> oder <code>ButtonFace</code> wäre, wenn der Mauszeiger nicht darübersteht). Sollte mit der Vordergrundfarbe <code>-moz-ButtonHoverText</code> verwendet werden.</dd>
+ <dt>-moz-ButtonHoverText</dt>
+ <dd>Textfarbe einer Schaltfläche, über der der Mauszeiger steht (was <code>ButtonText</code> wäre, wenn der Mauszeiger nicht darübersteht). Sollte mit der Hintergrundfarbe <code>-moz-ButtonHoverFace</code> verwendet werden.</dd>
+ <dt>-moz-CellHighlight</dt>
+ <dd>Hintergrundfarbe für markierte Elemente in einem Baum. Sollte mit der Vordergrundfarbe <code>-moz-CellHighlightText</code> verwendet werden. Siehe auch <code>-moz-html-CellHighlight</code>.</dd>
+ <dt>-moz-CellHighlightText</dt>
+ <dd>Textfarbe für markierte Elemente in einem Baum. Sollte mit der Hintergrundfarbe <code>-moz-CellHighlight</code> verwendet werden. Siehe auch <code>-moz-html-CellHighlightText</code>.</dd>
+ <dt>-moz-Combobox</dt>
+ <dd>{{Gecko_minversion_inline("1.9.2")}} Hintergrundfarbe für Combo-Boxen. Sollte mit der Vordergrundfarbe <code>-moz-ComboboxText</code> verwendet werden. In Gecko Versionen vor 1.9.2 sollte stattdessen <code>-moz-Field</code> verwendet werden.</dd>
+ <dt>-moz-ComboboxText</dt>
+ <dd>{{Gecko_minversion_inline("1.9.2")}} Textfarbe für Combo-Boxen. Sollte mit der Hintergrundfarbe <code>-moz-Combobox</code> verwendet werden. In Gecko Versionen vor 1.9.2 sollte stattdessen <code>-moz-FieldText</code> verwendet werden.</dd>
+ <dt>-moz-Dialog</dt>
+ <dd>Hintergrundfarbe für Dialoge. Sollte mit der Vordergrundfarbe <code>-moz-DialogText</code> verwendet werden.</dd>
+ <dt>-moz-DialogText</dt>
+ <dd>Textfarbe für Dialoge. Sollte mit der Hintergrundfarbe <code>-moz-Dialog</code> verwendet werden.</dd>
+ <dt>-moz-dragtargetzone</dt>
+ <dt>-moz-EvenTreeRow</dt>
+ <dd>{{gecko_minversion_inline("1.9")}} Hintergrundfarbe für geradzahlige Zeilen in einem Baum. Sollte mit der Vordergrundfarbe <code>-moz-FieldText</code> verwendet werden. In Gecko Versionen vor 1.9 sollte stattdessen <code>-moz-Field</code> verwendet werden. Siehe auch <code>-moz-OddTreeRow</code>.</dd>
+ <dt>-moz-Field</dt>
+ <dd>Hintergrundfarbe für Texteingabefelder. Sollte mit der Vordergrundfarbe <code>-moz-FieldText</code> verwendet werden.</dd>
+ <dt>-moz-FieldText</dt>
+ <dd>Textfarbe für Texteingabefelder. Sollte mit der Hintergrundfarbe <code>-moz-Field</code>, <code>-moz-EvenTreeRow</code> oder <code>-moz-OddTreeRow</code> verwendet werden.</dd>
+ <dt>-moz-html-CellHighlight</dt>
+ <dd>{{gecko_minversion_inline("1.9")}} Hintergrundfarbe für markierte Elemente in HTML {{HTMLElement("select")}}s. Sollte mit der Vordergrundfarbe <code>-moz-html-CellHighlightText</code> verwendet werden. In Gecko Versionen vor 1.9 sollte stattdessen <code>-moz-CellHighlight</code> verwendet werden.</dd>
+ <dt>-moz-html-CellHighlightText</dt>
+ <dd>{{gecko_minversion_inline("1.9")}} Vordergrundfarbe für markierte Elemente in HTML {{HTMLElement("select")}}s. Sollte mit der Hintergrundfarbe <code>-moz-html-CellHighlight</code> verwendet werden. In Gecko Versionen vor 1.9 sollte stattdessen <code>-moz-CellHighlightText</code> verwendet werden.</dd>
+ <dt>-moz-mac-accentdarkestshadow</dt>
+ <dt>-moz-mac-accentdarkshadow</dt>
+ <dt>-moz-mac-accentface</dt>
+ <dt>-moz-mac-accentlightesthighlight</dt>
+ <dt>-moz-mac-accentlightshadow</dt>
+ <dt>-moz-mac-accentregularhighlight</dt>
+ <dt>-moz-mac-accentregularshadow</dt>
+ <dt>-moz-mac-chrome-active</dt>
+ <dd>{{Gecko_minversion_inline("1.9.1")}}</dd>
+ <dt>-moz-mac-chrome-inactive</dt>
+ <dd>{{Gecko_minversion_inline("1.9.1")}}</dd>
+ <dt>-moz-mac-focusring</dt>
+ <dt>-moz-mac-menuselect</dt>
+ <dt>-moz-mac-menushadow</dt>
+ <dt>-moz-mac-menutextselect</dt>
+ <dt>-moz-MenuHover</dt>
+ <dd>Hintergrundfarbe für Menüeinträge, über denen der Mauszeiger steht. Oft ähnlich zu <code>Highlight</code>. Sollte mit der Vordergrundfarbe <code>-moz-MenuHoverText</code> oder <code>-moz-MenuBarHoverText</code> verwendet werden.</dd>
+ <dt>-moz-MenuHoverText</dt>
+ <dd>Textfarbe für Menüeinträge, über denen der Mauszeiger steht. Oft ähnlich zu <code>HighlightText</code>. Sollte mit der Hintergrundfarbe <code>-moz-MenuHover</code> verwendet werden.</dd>
+ <dt>-moz-MenuBarText</dt>
+ <dd>{{Gecko_minversion_inline("1.9.2")}} Vordergrundfarbe für Text in Menüleisten. Oft ähnlich zu <code>MenuText</code>. Sollte auf einem <code>Menu</code> Hintergrund verwendet werden.</dd>
+ <dt>-moz-MenuBarHoverText</dt>
+ <dd>{{Gecko_minversion_inline("1.9.2")}} Vordergrundfarbe für Text in Menüleisten, über dem der Mauszeiger steht. Oft ähnlich zu <code>-moz-MenuHoverText</code>. Sollte auf einem <code>-moz-MenuHover</code> Hintergrund verwendet werden.</dd>
+ <dt>-moz-nativehyperlinktext</dt>
+ <dd>{{Gecko_minversion_inline("1.9.1")}} Standardplattformfarbe für Hyperlinks.</dd>
+ <dt>-moz-OddTreeRow</dt>
+ <dd>{{gecko_minversion_inline("1.9")}} Hintergrundfarbe für ungeradzahlige Zeilen in einem Baum. Sollte mit der Vordergrundfarbe <code>-moz-FieldText</code> verwendet werden. In Gecko Versionen vor 1.9 sollte stattdessen <code>-moz-Field</code> verwendet werden. Siehe auch <code>-moz-EvenTreeRow</code>.</dd>
+ <dt>-moz-win-communicationstext</dt>
+ <dd>{{gecko_minversion_inline("1.9")}} Sollte für Text in Objekten mit <code>{{cssxref("-moz-appearance")}}: -moz-win-communications-toolbox;</code> verwendet werden.</dd>
+ <dt>-moz-win-mediatext</dt>
+ <dd>{{gecko_minversion_inline("1.9")}} Sollte für Text in Objekten mit <code>{{cssxref("-moz-appearance")}}: -moz-win-media-toolbox;</code> verwendet werden.</dd>
+</dl>
+
+<h3 id="Mozilla_Farbpräferenz_Erweiterungen">Mozilla Farbpräferenz Erweiterungen</h3>
+
+<dl style="font: small Tahoma,'Liberation Sans','Nimbus Sans L',sans-serif; border: 1px solid powderblue; padding: 0.5em 0 0.5em 0.5em; background: #eee;">
+ <dt>-moz-activehyperlinktext</dt>
+ <dd>Benutzerpräferenz für die Textfarbe aktiver Links. Sollte mit dem Standarddokumenthintergrund verwendet werden.</dd>
+ <dt> </dt>
+ <dt>-moz-default-background-color</dt>
+ <dd>{{Gecko_minversion_inline("5.0")}} Benutzerpräferenz für die Dokumenthintergrundfarbe.</dd>
+ <dt> </dt>
+ <dt>-moz-default-color</dt>
+ <dd>{{Gecko_minversion_inline("5.0")}} Benutzerpräferenz für die Textfarbe.</dd>
+ <dt>-moz-hyperlinktext</dt>
+ <dd>Benutzerpräferenz für die Textfarbe nicht besuchter Links. Sollte mit dem Standarddokumenthintergrund verwendet werden.</dd>
+ <dt>-moz-visitedhyperlinktext</dt>
+ <dd>Benutzerpräferenz für die Textfarbe besuchter Links. Sollte mit dem Standarddokumenthintergrund verwendet werden.</dd>
+</dl>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Colors', '#colorunits', '')}}</td>
+   <td>{{Spec2('CSS4 Colors')}}</td>
+   <td><code>rebeccapurple</code> hinzugefügt.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Colors', '#colorunits', '')}}</td>
+   <td>{{Spec2('CSS3 Colors')}}</td>
+   <td>Systemfarben als veraltet markiert; SVG-Farben hinzugefügt; functionale Notationen <code>rgba()</code>, <code>hsl()</code> und <code>hsla()</code> hinzugefügt.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'syndata.html#value-def-color', '')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td><code>orange</code> als Farbe und Systemfarben hinzugefügt.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#color-units', '')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{Compat("css.properties.color")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Die {{cssxref("opacity")}} Eigenschaft, die es erlaubt, die Transparenz einer Farbe auf Elementebene zu definieren.</li>
+ <li>Die {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-shadow")}} und {{cssxref("box-shadow")}} Eigenschaften.</li>
+</ul>
diff --git a/files/de/web/css/filter/index.html b/files/de/web/css/filter/index.html
new file mode 100644
index 0000000000..04901d5c3a
--- /dev/null
+++ b/files/de/web/css/filter/index.html
@@ -0,0 +1,1064 @@
+---
+title: filter
+slug: Web/CSS/filter
+tags:
+  - Benötigt Browserunterstützung
+  - CSS
+  - CSS Eigenschaft
+  - CSS Funktion
+  - Grafik
+  - Layout
+  - Referenz
+  - SVG
+  - SVG Filter
+  - Web
+translation_of: Web/CSS/filter
+---
+<p>{{ CSSRef() }}</p>
+
+<p>{{ SeeCompatTable() }}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>filter</code> CSS Eigenschaft erlaubt es, Effekte wie Unschärfe oder Farbverschiebungen auf Elemente anzuwenden, bevor sie angezeigt werden. Filter werden normalerweise dazu benutzt, die Darstellung eines Bildes, eines Hintergrunds oder eines Rahmens anzupassen.</p>
+
+<p>Im CSS Standard inbegriffen sind mehrere Funktionen, die vordefinierte Effekte ermöglichen. Es können auch Filter verwendet werden, die über SVG mit Hilfe des <a href="/de/docs/Web/SVG/Element/filter" title="/en/SVG/Element/filter">SVG Filter Elements</a> angegeben wurden.</p>
+
+<div class="note"><strong>Hinweis:</strong> Ältere Versionen (4.0 bis einschließlich 9.0) des Internet Explorers unterstützten eine nicht standardisierte <a class="external" href="http://msdn.microsoft.com/en-us/library/ms532853(v=vs.85).aspx" title="http://msdn.microsoft.com/en-us/library/ms532853(v=vs.85).aspx">"filter"</a> Eigenschaft, die mittlerweile missbilligt wird.</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>Angabe einer Funktion:</p>
+
+<pre>filter: &lt;filter-function&gt; [&lt;filter-function&gt;]* | none
+</pre>
+
+<p>Für eine Referenz zu einem SVG {{ SVGElement("filter") }} Element:</p>
+
+<pre class="eval">filter: url(svg-url#element-id)
+</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Beispiele zur Benutzung der vordefinierten Funktionen. Siehe die jeweilige Funktion für ein spezifisches Beispiel.</p>
+
+<pre class="brush: css">.mydiv { filter: grayscale(50%) }
+
+/* Graut alle Bilder um 50% aus und macht sie um 10px unscharf */
+img {
+  filter: grayscale(0.5) blur(10px);
+}</pre>
+
+<p>Beispiele zur Benutzung der URL Funktion mit einer SVG Ressource.</p>
+
+<pre class="brush: css">.target { filter: url(#c1); }
+
+.mydiv { filter: url(commonfilters.xml#large-blur) }
+</pre>
+
+<h2 id="Funktionen">Funktionen</h2>
+
+<p>Um die <code>filter</code> Eigenschaft zu verwenden, muss ein Wert für die folgenden Funktionen angegeben werden. Falls der Wert ungültig ist, gibt die Funktion <code>none</code> zurück. Falls nicht anders angegeben, akzeptieren Funktionen, die eine Wertangabe mit Prozentzeichen (wie z. B. <code>34%</code>) akzeptieren, auch einen dezimalen Wert (wie z. B. <code>0.34</code>).</p>
+
+<h3 id="url(url)"><code>url(url)</code></h3>
+
+<p>Die <code>url()</code> Funktion erlaubt die Angabe einer XML Datei, die einen SVG Filter definiert, und kann auch einen Anker zu einem bestimmten Element beinhalten.</p>
+
+<pre class="brush: css">filter: url(resources.svg#c1)
+</pre>
+
+<h3 id="blur(radius)"><code>blur(radius)</code></h3>
+
+<p>Wendet eine Gaußsche Unschärfe auf das Ursprungsbild an. Der Radiuswert gibt die Standardabweichung der Gaußschen Funktion an, oder wie viele Pixel auf dem Bildschirm mit einander vermischt werden. Ein höherer Wert erzeugt daher eine stärkere Unschärfe. Falls kein Parameter angegeben wird, wird 0 verwendet. Der Parameter wird dabei als {{cssxref("&lt;length&gt;")}} angegeben, akzeptiert jedoch keine Prozentwerte.</p>
+
+<pre class="brush: css">filter: blur(5px)
+</pre>
+
+<div id="blur_example" style="display: none;">
+<pre class="brush: html">  &lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example (may need to reload)&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form.jpg" id="img1" class="internal default" src="/files/3710/Test_Form_2.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form.jpg" id="img2" class="internal default" src="/files/3710/Test_Form_2.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg id="img3" viewbox="0 0 233 176"&gt;
+  &lt;filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%" &gt;
+    &lt;feGaussianBlur in="SourceGraphic" stdDeviation="5" /&gt;
+  &lt;/filter&gt;
+  &lt;image xlink:href="/files/3710/Test_Form_2.jpeg" filter="url(#svgBlur)" x="5%" y="5%" width="212px" height="161px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3711/Test_Form_2_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter:blur(5px);
+  -webkit-filter:blur(5px);
+  -o-filter:blur(5px);
+  -ms-filter:blur(5px);
+  filter:blur(5px); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  height: 100%;
+  width: 85%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;svg height="0" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%"&gt;
+    &lt;feGaussianBlur in="SourceGraphic" stdDeviation="5"/&gt;
+  &lt;/filter&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('blur_example','100%','236px','')}}</p>
+
+<h3 id="brightness(amount)"><code>brightness(amount)</code></h3>
+
+<p>Wendet eine lineare Multiplikation auf das Ursprungsbild an, sodass es dunkler oder heller erscheint. Ein Wert von <code>0%</code> erzeugt ein Bild, das komplett schwarz ist. Ein Wert von <code>100%</code> lässt das Bild unverändert. Andere Werte sind lineare Multiplikationen dieses Effekts. Werte über <code>100%</code> sind erlaubt und erzeugen hellere Ergebnisse. Falls der <code>amount</code> Parameter fehlt, wird ein Wert von <code>100%</code> verwendet.</p>
+
+<pre class="brush: css">filter: brightness(0.5)</pre>
+
+<pre class="brush: html">&lt;svg height="0" xmlns="http://www.w3.org/2000/svg"&gt;
+ &lt;filter id="brightness"&gt;
+    &lt;feComponentTransfer&gt;
+        &lt;feFuncR type="linear" slope="[amount]"/&gt;
+        &lt;feFuncG type="linear" slope="[amount]"/&gt;
+        &lt;feFuncB type="linear" slope="[amount]"/&gt;
+    &lt;/feComponentTransfer&gt;
+  &lt;/filter&gt;
+&lt;/svg&gt;</pre>
+
+<div id="brightness_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example (may need to reload)&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form.jpg" id="img1" class="internal default" src="/files/3708/Test_Form.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form.jpg" id="img2" class="internal default" src="/files/3708/Test_Form.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 286 217"&gt;
+ &lt;filter id="brightness"&gt;
+    &lt;feComponentTransfer&gt;
+        &lt;feFuncR type="linear" slope="2"/&gt;
+        &lt;feFuncG type="linear" slope="2"/&gt;
+        &lt;feFuncB type="linear" slope="2"/&gt;
+    &lt;/feComponentTransfer&gt;
+  &lt;/filter&gt;
+  &lt;image xlink:href="/files/3708/Test_Form.jpg" filter="url(#brightness)" width="286px" height="217px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3709/Test_Form_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter:brightness(2);
+  -webkit-filter:brightness(2);
+  -o-filter:brightness(2);
+  -ms-filter:brightness(2);
+  filter:brightness(2); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  height:100%;
+  width: 85%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('brightness_example','100%','231px','')}}</p>
+
+<h3 id="contrast(amount)"><code>contrast(amount)</code></h3>
+
+<p>Passt den Kontrast des Ursprungsbildes an. Ein Wert von 0% erzeugt ein Bild, dass komplett schwarz ist. Ein Wert von <code>100%</code> lässt das Bild unverändert. Werte über <code>100%</code> sind erlaubt und erzeugen Ergebnisse mit weniger Kontrast. Falls der <code>amount</code> Parameter fehlt, wird ein Wert von <code>100%</code> verwendet.</p>
+
+<pre class="brush: css">filter: contrast(200%)
+</pre>
+
+<pre class="brush: html">&lt;svg height="0" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;filter id="contrast"&gt;
+    &lt;feComponentTransfer&gt;
+      &lt;feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/&gt;
+      &lt;feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/&gt;
+      &lt;feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/&gt;
+    &lt;/feComponentTransfer&gt;
+  &lt;/filter&gt;
+&lt;/svg&gt;
+</pre>
+
+<div id="contrast_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example (may need to reload)&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_3.jpeg" id="img1" class="internal default" src="/files/3712/Test_Form_3.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_3.jpg" id="img2" class="internal default" src="/files/3712/Test_Form_3.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 240 151"&gt;
+ &lt;filter id="contrast"&gt;
+    &lt;feComponentTransfer&gt;
+      &lt;feFuncR type="linear" slope="2" intercept="-0.5"/&gt;
+      &lt;feFuncG type="linear" slope="2" intercept="-0.5"/&gt;
+      &lt;feFuncB type="linear" slope="2" intercept="-0.5"/&gt;
+    &lt;/feComponentTransfer&gt;
+  &lt;/filter&gt;
+  &lt;image xlink:href="/files/3712/Test_Form_3.jpeg" filter="url(#contrast)" width="240px" height="151px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3713/Test_Form_3_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter:contrast(200%);
+  -webkit-filter:contrast(200%);
+  -o-filter:contrast(200%);
+  -ms-filter:contrast(200%);
+  filter:contrast(200%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('contrast_example','100%','203px','')}}</p>
+
+<h3 id="drop-shadow(&lt;shadow>)"><code>drop-shadow(&lt;shadow&gt;)</code></h3>
+
+<p>Fügt dem Ursprungsbild einen Schlagschatteneffekt hinzu. Ein Schlagschatten ist dabei eigentlich eine unscharfe, versetzte Version der Alphamaske eines Bildes, die in einer bestimmten Farbe dargestellt wird und unterhalb des Bildes angezeigt wird. Die Funktion akzeptiert einen Parameter des Typs <code>&lt;shadow&gt;</code> (definiert in CSS3 Backgrounds), mit der Ausnahme, dass das Schlüsselwort <code>inset</code> nicht erlaubt ist. Diese Funktion ähnelt der verbreiteteren <code><a href="/de/docs/Web/CSS/box-shadow" title="/en/CSS/box-shadow">box-shadow</a></code> Eigenschaft; der Unterschied besteht darin, dass manche Browser für Filter Hardwarebeschleunigung für eine höhere Geschwindigkeit unterstützen. Die Parameter des <code>&lt;shadow&gt;</code> Wertes lauten wie folgt:</p>
+
+<dl>
+ <dt><code>&lt;offset-x&gt;</code> <code>&lt;offset-y&gt;</code> <small>(benötigt)</small></dt>
+ <dd>Dies sind die zwei {{cssxref("&lt;length&gt;")}} Werte, die den Schattenversatz angeben. <code>&lt;offset-x&gt;</code> gibt die horizontale Distanz an. Negative Werte positionieren den Schatten links von dem Element. <code>&lt;offset-y&gt;</code> gibt die vertikale Distanz an. Negative Werte positionieren den Schatten oberhalb des Elements. Siehe {{cssxref("&lt;length&gt;")}} für mögliche Einheiten.<br>
+ Falls beide Werte <code>0</code> sind, wird der Schatten hinter dem Element platziert (und erzeugt möglicherweise einen Unschärfeeffekt, falls <code>&lt;blur-radius&gt;</code> und/oder <code>&lt;spread-radius&gt;</code> gesetzt sind).</dd>
+ <dt><code>&lt;blur-radius&gt;</code> <small>(optional)</small></dt>
+ <dd>Dies ist ein dritter {{cssxref("&lt;length&gt;")}} Wert. Je größer dieser Wert ist, desto größer ist die Unschärfe, d. h. der Schatten wird größer und unschärfer. Negative Werte sind nicht erlaubt. Falls nicht angegeben, wird <code>0</code> verwendet (der Schattenrand wird scharf dargestellt).</dd>
+ <dt><code>&lt;spread-radius&gt;</code> <small>(optional)</small></dt>
+ <dd>Dies ist ein vierter {{cssxref("&lt;length&gt;")}} Wert. Positive Werte erweitern den Schatten und lassen ihn größer erscheinen, negative Werte verkleinern den Schatten. Falls nicht angegeben, wird <code>0</code> verwendet (der Schatten hat die gleiche Größe wie das Element). <br>
+ <em>Hinweis:</em> WebKit und evtl. andere Browser unterstützen diesen vierten Wert nicht. Er wird nicht dargestellt, falls er angegeben wird.</dd>
+ <dt><code>&lt;color&gt;</code> <small>(optional)</small></dt>
+ <dd>Siehe {{cssxref("&lt;color&gt;")}} für mögliche Schlüsselwörter und Angaben.<br>
+ Falls nicht angegeben, bestimmt der Browser die Farbe. In Gecko (Firefox), Presto (Opera bis Version 12) und Trident (Internet Explorer) wird der Wert der {{ cssxref("color") }} Eigenschaft verwendet. WebKit (Opera ab Version 15, Chrome) verwendet einen transparenten Schatten und ist daher nutzlos, falls <code>&lt;color&gt;</code> nicht angegeben wird.</dd>
+</dl>
+
+<pre class="brush: css">filter: drop-shadow(16px 16px 10px black)</pre>
+
+<pre class="brush: html">&lt;svg height="0" xmlns="http://www.w3.org/2000/svg"&gt;
+ &lt;filter id="drop-shadow"&gt;
+    &lt;feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/&gt;
+    &lt;feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/&gt;
+    &lt;feFlood flood-color="[color]"/&gt;
+    &lt;feComposite in2="offsetblur" operator="in"/&gt;
+    &lt;feMerge&gt;
+      &lt;feMergeNode/&gt;
+      &lt;feMergeNode in="SourceGraphic"/&gt;
+    &lt;/feMerge&gt;
+  &lt;/filter&gt;
+&lt;/svg&gt;
+</pre>
+
+<div id="shadow_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example (may need to reload)&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4.jpeg" id="img1" class="internal default" src="/files/3714/Test_Form_4.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4.jpg" id="img2" class="internal default" src="/files/3714/Test_Form_4.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 239 187"&gt;
+ &lt;filter id="drop-shadow"&gt;
+    &lt;feGaussianBlur in="SourceAlpha" stdDeviation="5"/&gt;
+    &lt;feOffset dx="16" dy="16"/&gt;
+    &lt;feMerge&gt;
+      &lt;feMergeNode/&gt;
+      &lt;feMergeNode in="SourceGraphic"/&gt;
+    &lt;/feMerge&gt;
+ &lt;/filter&gt;
+ &lt;image xlink:href="/files/3714/Test_Form_4.jpeg" filter="url(#drop-shadow)" width="213px" height="161px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4_s.jpg" id="img4" class="internal default" src="/files/3715/Test_Form_4_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: drop-shadow(16px 16px 10px black);
+  -webkit-filter: drop-shadow(16px 16px 10px black);
+  -o-filter: drop-shadow(16px 16px 10px black);
+  -ms-filter: drop-shadow(16px 16px 10px black);
+  filter: drop-shadow(16px 16px 10px black);
+}
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('shadow_example','100%','238px','')}}</p>
+
+<h3 id="grayscale(amount)"><code>grayscale(amount)</code></h3>
+
+<p>Konvertiert das Ursprungsbild in Graustufen. Der Wert von <code>amount</code> bestimmt den Anteil der Konvertierung. Ein Wert von <code>100%</code> erzeugt ein komplett graues Ergebnis. Ein Wert von <code>0%</code> lässt das Bild unverändert. Werte zwischen <code>0%</code> und <code>100%</code> sind lineare Multiplikationen dieses Effekts. Falls der <code>amount</code> Parameter nicht angegeben wird, wird <code>100%</code> verwendet.</p>
+
+<pre class="brush: css">filter: grayscale(100%)</pre>
+
+<div id="grayscale_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example (may need to reload)&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_5.jpeg" id="img1" class="internal default" src="/files/3716/Test_Form_5.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_5.jpg" id="img2" class="internal default" src="/files/3716/Test_Form_5.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 184"&gt;
+ &lt;filter id="grayscale"&gt;
+    &lt;feColorMatrix type="matrix"
+               values="0.2126 0.7152 0.0722 0 0
+                       0.2126 0.7152 0.0722 0 0
+                       0.2126 0.7152 0.0722 0 0
+                       0 0 0 1 0"/&gt;
+  &lt;/filter&gt;
+  &lt;image xlink:href="/files/3716/Test_Form_5.jpeg" filter="url(#grayscale)" width="276px" height="184px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_5_s.jpg" id="img4" class="internal default" src="/files/3717/Test_Form_5_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter:grayscale(100%);
+  -webkit-filter:grayscale(100%);
+  -o-filter:grayscale(100%);
+  -ms-filter:grayscale(100%);
+  filter:grayscale(100%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('grayscale_example','100%','209px','')}}</p>
+
+<h3 id="hue-rotate(angle)"><code>hue-rotate(angle)</code></h3>
+
+<p>Wendet eine Farbtonrotation auf das Ursprungsbild an. Der Wert von <code>angle</code> gibt die Gradzahl um den Farbkreis an, um den die Ursprungsfarben verschoben werden. Ein Wert von <code>0deg</code> lässt das Bild unverändert. Falls der <code>angle</code> Parameter fehlt, wird <code>0deg</code> verwendet. Der Maximalwert ist <code>360deg</code>.</p>
+
+<pre class="brush: css">filter: hue-rotate(90deg)</pre>
+
+<div id="huerotate_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example (may need to reload)&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_6.jpeg" id="img1" class="internal default" src="/files/3718/Test_Form_6.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_6.jpg" id="img2" class="internal default" src="/files/3718/Test_Form_6.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 266 190"&gt;
+ &lt;filter id="hue-rotate"&gt;
+    &lt;feColorMatrix type="hueRotate"
+               values="90"/&gt;
+  &lt;/filter&gt;
+  &lt;image xlink:href="/files/3718/Test_Form_6.jpeg" filter="url(#hue-rotate)" width="266px" height="190px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_6_s.jpg" id="img4" class="internal default" src="/files/3719/Test_Form_6_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter:hue-rotate(90deg);
+  -webkit-filter:hue-rotate(90deg);
+  -o-filter:hue-rotate(90deg);
+  -ms-filter:hue-rotate(90deg);
+  filter:hue-rotate(90deg); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('huerotate_example','100%','221px','')}}</p>
+
+<h3 id="invert(amount)"><code>invert(amount)</code></h3>
+
+<p>Invertiert die Ursprungsfarben des Ursprungsbildes. Der Wert von <code>amount</code> gibt den Anteil der Konvertierung an. Ein Wert von <code>100%</code> erzeugt ein komplett invertiertes Ergebnis. Ein Wert von <code>0%</code> lässt das Bild unverändert. Werte zwischen <code>0%</code> und <code>100%</code> sind lineare Multiplikationen dieses Effekts. Falls der <code>amount</code> Parameter nicht angegeben wird, wird <code>100%</code> verwendet.</p>
+
+<pre class="brush: css">filter: invert(100%)</pre>
+
+<div id="invert_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example (may need to reload)&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_7.jpeg" id="img1" class="internal default" src="/files/3720/Test_Form_7.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_7.jpg" id="img2" class="internal default" src="/files/3720/Test_Form_7.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 183 276"&gt;
+ &lt;filter id="invert"&gt;
+    &lt;feComponentTransfer&gt;
+        &lt;feFuncR type="table" tableValues="1 0"/&gt;
+        &lt;feFuncG type="table" tableValues="1 0"/&gt;
+        &lt;feFuncB type="table" tableValues="1 0"/&gt;
+    &lt;/feComponentTransfer&gt;
+ &lt;/filter&gt;
+ &lt;image xlink:href="/files/3720/Test_Form_7.jpeg" filter="url(#invert)" width="183px" height="276px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_7_s.jpg" id="img4" class="internal default" src="/files/3721/Test_Form_7_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: invert(100%);
+  -webkit-filter: invert(100%);
+  -o-filter: invert(100%);
+  -ms-filter: invert(100%);
+  filter: invert(100%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('invert_example','100%','407px','')}}</p>
+
+<h3 id="opacity(amount)"><code>opacity(amount)</code></h3>
+
+<p>Fügt den Farben des Ursprungsbildes eine Transparenz hinzu. Der Wert von <code>amount</code> gibt den Anteil der Konvertierung an. Ein Wert von <code>0%</code> erzeugt ein komplett transparentes Ergebnis. Ein Wert von <code>100%</code> lässt das Bild unverändert. Werte zwischen <code>0%</code> und <code>100%</code> sind lineare Multiplikationen dieses Effekts. Dies ist equivalent zur Multiplikation der Ursprungsfarben mit amount. Falls der <code>amount</code> Parameter nicht angegeben wird, wird <code>100%</code> verwendet. Diese Funktion ist ähnlich zu der verbreiteteren <a href="/de/docs/Web/CSS/opacity" title="/en/CSS/opacity">opacity</a> Eigenschaft; der Unterschied besteht darin, dass manche Browser für Filter Hardwarebeschleunigung für eine höhere Geschwindigkeit unterstützen.</p>
+
+<pre class="brush: css">filter: opacity(50%)</pre>
+
+<div id="opacity_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example (may need to reload)&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_14.jpeg" id="img1" class="internal default" src="/files/3725/Test_Form_14.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_14.jpg" id="img2" class="internal default" src="/files/3725/Test_Form_14.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 183"&gt;
+ &lt;filter id="opacity"&gt;
+    &lt;feComponentTransfer&gt;
+        &lt;feFuncA type="table" tableValues="0 0.5"&gt;
+    &lt;/feComponentTransfer&gt;
+ &lt;/filter&gt;
+ &lt;image xlink:href="/files/3725/Test_Form_14.jpeg" filter="url(#opacity)" width="276px" height="183px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_14_s.jpg" id="img4" class="internal default" src="/files/3726/Test_Form_14_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: opacity(50%);
+  -webkit-filter: opacity(50%);
+  -o-filter: opacity(50%);
+  -ms-filter: opacity(50%);
+  filter: opacity(50%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('opacity_example','100%','210px','')}}</p>
+
+<h3 id="saturate(amount)"><code>saturate(amount)</code></h3>
+
+<p>Sättigt das Ursprungsbild. Der Wert von <code>amount</code> gibt den Anteil der Konvertierung an. Ein Wert von <code>0%</code> erzeugt ein komplett ungesättigtes Ergebnis. Ein Wert von <code>100%</code> lässt das Bild unverändert. Andere Werte sind lineare Multiplikationen dieses Effekts. Werte für <code>amount</code> über 100% sind erlaubt und erzeugen übersättigte Ergebnisse. Falls der <code>amount</code> Parameter nicht angegeben wird, wird <code>100%</code> verwendet.</p>
+
+<pre class="brush: css">filter: saturate(200%)</pre>
+
+<div id="saturate_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example (may need to reload)&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_9.jpeg" id="img1" class="internal default" src="/files/3722/Test_Form_9.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_9.jpg" id="img2" class="internal default" src="/files/3722/Test_Form_9.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 201 239"&gt;
+ &lt;filter id="saturate"&gt;
+    &lt;feColorMatrix type="saturate"
+               values="2"/&gt;
+ &lt;/filter&gt;
+ &lt;image xlink:href="/files/3722/Test_Form_9.jpeg" filter="url(#saturate)" width="201px" height="239px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_9_s.jpg" id="img4" class="internal default" src="/files/3724/Test_Form_9_s.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: saturate(200%);
+  -webkit-filter: saturate(200%);
+  -o-filter: saturate(200%);
+  -ms-filter: saturate(200%);
+  filter: saturate(200%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('saturate_example','100%','332px','')}}</p>
+
+<h3 id="sepia(amount)"><code>sepia(amount)</code></h3>
+
+<p>Konvertiert das Ursprungsbild in Sepiafarben. Der Wert von <code>amount</code> bestimmt den Anteil der Konvertierung. Ein Wert von <code>100%</code> erzeugt ein komplett sepiafarbenes Ergebnis. Ein Wert von <code>0%</code> lässt das Bild unverändert. Werte zwischen <code>0%</code> und <code>100%</code> sind lineare Multiplikationen dieses Effekts. Falls der <code>amount</code> Parameter nicht angegeben wird, wird <code>100%</code> verwendet.</p>
+
+<pre class="brush: css">filter: sepia(100%)</pre>
+
+<div id="sepia_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example (may need to reload)&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_12.jpeg" id="img1" class="internal default" src="/files/3727/Test_Form_12.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_12.jpg" id="img2" class="internal default" src="/files/3727/Test_Form_12.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 259 194"&gt;
+ &lt;filter id="sepia"&gt;
+    &lt;feColorMatrix type="matrix"
+               values="0.393 0.769 0.189 0 0
+                       0.349 0.686 0.168 0 0
+                       0.272 0.534 0.131 0 0
+                       0 0 0 1 0"/&gt;
+ &lt;/filter&gt;
+ &lt;image xlink:href="/files/3727/Test_Form_12.jpeg" filter="url(#sepia)" width="259px" height="194px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_12_s.jpg" id="img4" class="internal default" src="/files/3728/Test_Form_12_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: sepia(100%);
+  -webkit-filter: sepia(100%);
+  -o-filter: sepia(100%);
+  -ms-filter: sepia(100%);
+  filter: sepia(100%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('sepia_example','100%','229px','')}}</p>
+
+<h2 id="Kombinierte_Funktionen">Kombinierte Funktionen</h2>
+
+<p>Eine beliebige Anzahl an Funktionen kann kombiniert werden, um die Ausgabe zu verändert. Das folgende Beispiel verstärkt den Kontrast und die Helligkeit des Bildes.</p>
+
+<pre class="brush: css">filter: contrast(175%) brightness(3%)</pre>
+
+<div id="combination_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example (may need to reload)&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_8.jpeg" id="img1" class="internal default" src="/files/3729/Test_Form_8.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_8.jpg" id="img2" class="internal default" src="/files/3729/Test_Form_8.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_8_s.jpg" id="img4" class="internal default" src="/files/3730/Test_Form_8_s.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: contrast(175%) brightness(103%);
+  -webkit-filter: contrast(175%) brightness(103%);
+  -o-filter: contrast(175%) brightness(103%);
+  -ms-filter: contrast(175%) brightness(103%);
+  filter: contrast(175%) brightness(103%);
+}
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('combination_example','100%','209px','')}}</p>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('Filters 1.0', '#FilterProperty', 'filter') }}</td>
+   <td>{{ Spec2('Filters 1.0') }}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilit.C3.A4t" name="Browser_Kompatibilit.C3.A4t">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.filter")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a class="internal" href="/de/docs/SVG_Filtereffekte_auf_HTML_Inhalte_anwenden" title="En/Applying SVG effects to HTML content">Applying SVG effects to HTML content</a></li>
+ <li>Die {{ Cssxref("mask") }} Eigenschaft</li>
+ <li><a class="internal" href="/de/docs/Web/SVG" title="En/SVG">SVG</a></li>
+ <li><a class="external" href="https://www.html5rocks.com/en/tutorials/filters/understanding-css/" title="http://www.html5rocks.com/en/tutorials/filters/understanding-css/">Understanding CSS filters</a>, HTML5Rocks! Artikel</li>
+ <li><a class="external" href="https://techstream.org/Web-Design/CSS3-Image-Filters" title="CSS filters">CSS 3 filters</a> Tech Stream Artikel</li>
+ <li><a class="external" href="https://davidwalsh.name/css-filters" title="CSS filters">CSS filters</a> von David Walsh</li>
+</ul>
diff --git a/files/de/web/css/flex-flow/index.html b/files/de/web/css/flex-flow/index.html
new file mode 100644
index 0000000000..7eca4d3ecb
--- /dev/null
+++ b/files/de/web/css/flex-flow/index.html
@@ -0,0 +1,64 @@
+---
+title: flex-flow
+slug: Web/CSS/flex-flow
+tags:
+  - CSS
+  - CSS Eigenschaften
+  - CSS Flexible Boxen
+  - Referenz
+translation_of: Web/CSS/flex-flow
+---
+<div>{{ CSSRef("CSS Flexible Boxes") }}</div>
+
+<h2 id="Summary">Summary</h2>
+
+<p>Die Kurzschreibweise <code>flex-flow</code> fasst die Eigenschaften <code>{{cssxref("flex-direction")}}</code> und <code>{{cssxref("flex-wrap")}}</code> zusammen.</p>
+
+<p>{{cssinfo}}</p>
+
+<p>Siehe <a href="/en-US/docs/CSS/Using_CSS_flexible_boxes" title="/en-US/docs/CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a> für mehr Information.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<p>Siehe <a href="/en-US/docs/CSS/flex-direction" title="en-US/docs/CSS/flex-direction"><code>flex-direction</code></a> und <a href="/en-US/docs/CSS/flex-wrap" title="flex-wrap"><code>flex-wrap</code></a>.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush:css;highlight:3">element {
+  /* Main-axis is the block direction with reversed main-start and main-end. Flex items are laid out in multiple lines */
+  flex-flow: column-reverse wrap;
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a class="external" href="http://dev.w3.org/csswg/css3-flexbox/#flex-flow" title="http://dev.w3.org/csswg/css3-flexbox/#flex-flow">CSS Flexible Box Layout Module</a></td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.flex-flow")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_flexible_boxes" title="/en-US/docs/CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></li>
+</ul>
diff --git a/files/de/web/css/flex-grow/index.html b/files/de/web/css/flex-grow/index.html
new file mode 100644
index 0000000000..0a40c317de
--- /dev/null
+++ b/files/de/web/css/flex-grow/index.html
@@ -0,0 +1,82 @@
+---
+title: flex-grow
+slug: Web/CSS/flex-grow
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Flexible Boxes
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/flex-grow
+---
+<p>{{ CSSRef("CSS Flexible Boxes") }}</p>
+
+<p>Die  <code>flex-grow</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft gibt den Wachstumsfaktor eines flexiblen Elements in dem zur Verfügung stehenden Raum eines Flex Containers an. Wenn alle Schwesternelemente den gleichen flex-grow Wert haben, teilen sich diese Elemente den gleichen Platzanteil im Container auf. Andernfalls entscheidet der Platzanteil durch das Verhältnis, das sich aus den verschiedenen flex-grow Werten ergibt.</p>
+
+<p>Verwendet wird flex-grow zusammen mit den anderen flex Eigenschaften {{cssxref("flex-shrink")}} und {{cssxref("flex-basis")}}. Im Regelfall wird durch die {{cssxref("flex")}} Kurzschrift sichergestellt, dass alle Werte gesetzt werden.</p>
+
+<p>{{cssinfo}}</p>
+
+<p>Siehe die <a class="new" href="https://developer.mozilla.org/de/docs/Web/Guide/CSS/Flexible_boxes">Verwendung von CSS Flexible Boxes</a> für weitere Eigenschaften und Informationen.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/flex-grow.html")}}</div>
+
+
+
+<p> </p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="twopartsyntaxbox">{{csssyntax}}
+</pre>
+
+<pre>flex-grow: 3
+
+flex-grow: inherit
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>Siehe {{cssxref("&lt;number&gt;")}}. Negative Werte sind ungültig.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush:css;highlight:[2]">element {
+  flex-grow: 3;
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a class="external" href="http://dev.w3.org/csswg/css3-flexbox/#flex-grow" title="http://dev.w3.org/csswg/css3-flexbox/#flex-grow">CSS Flexible Box Layout Module</a></td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{Compat("css.properties.flex-grow")}}</p>
+
+<p>[1] Firefox unterstützt bis Version 28 nur einzeiliges Flexbox Layout. Um Flexbox Unterstützung für Firefox 18 und 19 zu aktivieren, muss die Einstellung <code>layout.css.flexbox.enabled</code> in <code>about:config</code> auf <code>true</code> gesetzt werden.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a class="new" href="https://developer.mozilla.org/de/docs/Web/Guide/CSS/Flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Verwendung von CSS Flexible Boxes</a></li>
+</ul>
diff --git a/files/de/web/css/flex-shrink/index.html b/files/de/web/css/flex-shrink/index.html
new file mode 100644
index 0000000000..7e741ec2d6
--- /dev/null
+++ b/files/de/web/css/flex-shrink/index.html
@@ -0,0 +1,75 @@
+---
+title: flex-shrink
+slug: Web/CSS/flex-shrink
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Flexible Boxes
+  - Layout
+  - Referenz
+translation_of: Web/CSS/flex-shrink
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>flex-shrink</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft gibt den Schrumpffaktor eines Flexelements an.</p>
+
+<p>{{cssinfo}}</p>
+
+<p>Siehe die <a class="new" href="https://developer.mozilla.org/de/docs/Web/Guide/CSS/Flexible_boxes">Verwendung von CSS Flexible Boxes</a> für weitere Eigenschaften und Informationen.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="twopartsyntaxbox"><a href="https://developer.mozilla.org/de/docs/Web/CSS/Wertdefinitionssyntax" title="CSS/Value_definition_syntax">Formale Syntax</a>: {{csssyntax("flex-shrink")}}
+</pre>
+
+<pre>flex-shrink: 2
+
+flex-shrink: inherit
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>&lt;number</code>&gt;</dt>
+ <dd>Siehe {{cssxref("&lt;number&gt;")}}. Negative Werte sind ungültig.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush:css; highlight:[2]">element {
+  flex-shrink: 3;
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spezifikation</th>
+   <th>Status</th>
+   <th>Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Flexbox', '#flex-shrink', 'flex-shrink') }}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{Compat("css.properties.flex-shrink")}}</p>
+
+<p>[1] Firefox unterstützt bis Version 28 nur einzeiliges Flexbox Layout. Um Flexbox Unterstützung für Firefox 18 und 19 zu aktivieren, muss die Einstellung <code>layout.css.flexbox.enabled</code> in <code>about:config</code> auf <code>true</code> gesetzt werden.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a class="new" href="https://developer.mozilla.org/de/docs/Web/Guide/CSS/Flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Verwendung von CSS Flexible Boxes</a></li>
+</ul>
diff --git a/files/de/web/css/flex-wrap/index.html b/files/de/web/css/flex-wrap/index.html
new file mode 100644
index 0000000000..bb2e777f0d
--- /dev/null
+++ b/files/de/web/css/flex-wrap/index.html
@@ -0,0 +1,81 @@
+---
+title: flex-wrap
+slug: Web/CSS/flex-wrap
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Flexible Boxes
+  - Layout
+  - Referenz
+translation_of: Web/CSS/flex-wrap
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>flex-wrap</code> <a href="/de/docs/Web/CSS" title="CSS">CSS</a> Eigenschaft legt fest, ob die Elemente in einem Flexbox-Container auf einer Linie liegen, oder bei bedarf auf mehrere Zeilen verteilt werden können.</p>
+
+<p>{{cssinfo}}</p>
+
+<p>Siehe die <a href="/de/docs/Web/Guide/CSS/CSS_flexible_Boxen_verwenden" title="/en/CSS/Using_CSS_flexible_boxes">CSS flexible Boxen verwenden</a> für mehr Informationen.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="twopartsyntaxbox"><a href="/de/docs/Web/CSS/Wertdefinitionssyntax" title="/en-US/docs/CSS/Value_definition_syntax">Formale Syntax</a>: {{csssyntax("flex-wrap")}}
+</pre>
+
+<pre>flex-wrap: nowrap
+flex-wrap: wrap
+flex-wrap: wrap-reverse
+
+flex-wrap: inherit
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<p>Die folgenden Werte können verwendet werden:</p>
+
+<dl>
+ <dt><code>nowrap</code></dt>
+ <dd>Die flexiblen Elemente liegen alle in derselben Reihe, auch wenn dazu der Platz fehlt.</dd>
+ <dt><code>wrap</code></dt>
+ <dd>Die flexiblen Elemente können sich wenn nötig innerhalb des Containers in mehrere Zeilen aufteilen (nach unten).</dd>
+ <dt><code>wrap-reverse</code></dt>
+ <dd>Die flexiblen Elemente können sich wenn nötig innerhalb des Containers in mehrere Zeilen aufteilen (nach oben).</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush:css;highlight:[2]">element {
+  flex-wrap: nowrap;
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spezifikation</th>
+   <th>Status</th>
+   <th>Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Flexbox', '#flex-wrap', 'flex-wrap') }}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{Compat("css.properties.flex-wrap")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/Guide/CSS/CSS_flexible_Boxen_verwenden" title="/en/CSS/Using_CSS_flexible_boxes">CSS flexible Boxen verwenden</a></li>
+</ul>
diff --git a/files/de/web/css/float/index.html b/files/de/web/css/float/index.html
new file mode 100644
index 0000000000..2711d0d936
--- /dev/null
+++ b/files/de/web/css/float/index.html
@@ -0,0 +1,109 @@
+---
+title: float
+slug: Web/CSS/float
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/float
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>float</code> Eigenschaft bestimmt, ob ein Element aus dem normalen Fluss herausgelöst werden soll und nachfolgende Inhalte auf der linken oder rechten Seite des gefloateten Elements platziert werden sollen.</p>
+
+<ul>
+ <li>Standardwert: <code>none</code></li>
+ <li>Anwendbar auf: alle Elemente</li>
+ <li>Vererbbar: Nein</li>
+ <li>Prozentwerte: Nein</li>
+ <li>Medium: visuell</li>
+ <li>berechneter Wert: wie festgelegt</li>
+</ul>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="eval">float:  left | right | none | inherit
+</pre>
+
+<h2 id="Werte">Werte</h2>
+
+<dl>
+ <dt>none</dt>
+ <dd>Standardwert. Das Element wird nicht umflossen.</dd>
+ <dt>left</dt>
+ <dd>Das Element wird nach links gerückt und die Inhalte des umliegenden Elements (containing block) werden rechts vom Element angeordnet.</dd>
+ <dt>right</dt>
+ <dd>Das Element wird nach rechts gerückt und die Inhalte des umliegenden Elements (containing block) werden links vom Element angeordnet.</dd>
+ <dt>inherit</dt>
+ <dd>Der Wert des Elternelements wird geerbt.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p><a href="http://developer.mozilla.org/samples/cssref/float.html" rel="external nofollow">Live Beispiel</a></p>
+
+<pre class="brush: html">&lt;style type="text/css"&gt;
+  div { border: solid red;  max-width: 70ex; }
+  h4  { float: left;  margin: 0; }
+&lt;/style&gt;
+
+&lt;div&gt;
+  &lt;h4&gt;HELLO!&lt;/h4&gt;
+  This is some text. This is some text. This is some text.
+  This is some text. This is some text. This is some text.
+  This is some text. This is some text. This is some text.
+  This is some text. This is some text. This is some text.
+&lt;/div&gt;
+</pre>
+
+<div style="border: solid red; max-width: 70ex;">
+<h4 id="HELLO!" style="float: left; margin: 0;">HELLO!</h4>
+This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</div>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td>Adds the values <code>inline-start</code> and <code>inline-end</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Box', '#float', 'float')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>Lots of new values, not all clearly defined yet. Any differences in behavior, unrelated to new features, are expected to be unintentional; please report.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#float-position', 'float')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#float', 'float')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2>
+
+{{Compat("css.properties.float")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/CSS/clear"><code>clear</code></a></li>
+ <li><a href="/de/CSS/Boxmodell">Boxmodell</a></li>
+</ul>
+
+<p>{{ languages( {"en": "en/CSS/float", "fr": "en/CSS/float", "es": "es/CSS/float", "pl": "pl/CSS/float"} ) }}</p>
diff --git a/files/de/web/css/font-family/index.html b/files/de/web/css/font-family/index.html
new file mode 100644
index 0000000000..ccd539914f
--- /dev/null
+++ b/files/de/web/css/font-family/index.html
@@ -0,0 +1,185 @@
+---
+title: font-family
+slug: Web/CSS/font-family
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Schriftarten
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/font-family
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>font-family</code> CSS Eigenschaft erlaubt es, eine priorisierte Liste von Schriftfamiliennamen und/oder generische Familiennamen für ein ausgewähltes Element anzugeben. Im Gegensatz zu den meisten anderen CSS Eigenschaften werden die Werte durch Komma getrennt, um zu kennzeichnen, dass sie Alternativen darstellen. Der Browser wählt die erste Schrift, die auf dem Computer installiert ist oder mittels der Informationen, die über eine {{cssxref("@font-face")}} At-Regel gegeben sind, heruntergeladen werden kann.</p>
+
+<p>Webautoren sollten einer Schriftfamilienliste immer mindestens eine generische Familie hinzufügen, da es keine Garantie dafür gibt, dass eine bestimmte Schriftart auf dem Computer installiert ist oder über die {{cssxref("@font-face")}} At-Regel heruntergeladen werden kann. Die generische Schriftart erlaubt es dem Browser, falls nötig, eine akzeptable Ersatzschriftart auszuwählen.</p>
+
+<p>Es ist oft vorteilhaft, die Kurzform Eigenschaft {{cssxref("font")}} zu verwenden, um <code>font-size</code> und andere Schrift bezogene Eigenschaften auf einmal zu setzen.</p>
+
+<div class="note"><strong>Hinweis:</strong> Die <code>font-family</code> Eigenschaft definiert eine Liste von Schriftarten, von der höchsten zur niedrigsten Priorität. Die Auswahl der Schriftart stoppt <strong>nicht</strong> einfach bei der ersten Schriftart in der Liste, die auf dem System des Benutzers installiert ist. Vielmehr findet die Auswahl der Schriftart <strong>pro Zeichen</strong> statt, so dass, falls eine verfügbare Schriftart ein bestimmtes Schriftzeichen nicht definiert, in den übrigen Schriftarten nach diesem Zeichen gesucht wird. Dies funktioniert jedoch nicht im Internet Explorer 6 oder früheren Versionen.<br>
+<br>
+Falls eine Schrift nur in bestimmten <a href="/de/docs/Web/CSS/font-style" title="CSS/font-style">Stilen</a>, <a href="/de/docs/Web/CSS/font-variant" title="CSS/font-variant">Varianten</a> oder <a href="/de/docs/Web/CSS/font-size" title="CSS/font-size">Größen</a> verfügbar ist, können diese Eigenschaften auch beeinflussen, welche Schriftart ausgewählt wird.</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="twopartsyntaxbox"><a href="/de/docs/Web/CSS/Wertdefinitionssyntax" title="CSS/Value_definition_syntax">Formale Syntax</a>: {{csssyntax("font-family")}}
+</pre>
+
+<pre>font-family: Gill Sans Extrabold, sans-serif
+font-family: "Goudy Bookletter 1911", sans-serif
+
+font-family: serif
+font-family: sans-serif
+font-family: monospace
+font-family: cursive
+font-family: fantasy
+
+font-family: inherit
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<table class="standard-table" style="height: 523px; width: 1145px;">
+ <tbody>
+  <tr>
+   <td><code>&lt;family-name&gt;</code></td>
+   <td>Der Name der Schriftfamilie. Zum Beispiel "Times" und "Helvetica" sind Schriftfamilien. Schriftfamiliennamen, die Leerzeichen enthalten, sollten von Anführungszeichen eingeschlossen werden.</td>
+  </tr>
+  <tr>
+   <td><code>&lt;generic-name&gt;</code></td>
+   <td>
+    <p>Generische Schriftfamilien dienen als Fallback-Mechanismus, ein Mittel, um etwas von der Absicht des Stylesheet Autors zu erhalten für den Fall, wenn keine der angegebenen Schriftarten verfügbar sind. Generische Familiennamen sind Schlüsselwörter und dürfen nicht in Anführungszeichen eingeschlossen werden. Eine generische Schriftfamilie sollte die letzte Alternative in einer Liste von Schriftfamiliennamen sein.</p>
+
+    <dl>
+     <dt><code>serif</code></dt>
+     <dd style='font-family: Palatino,"Palatino Linotype",Palladio,"URW Palladio",serif;'>Schriftzeichen haben abschließende Striche, ausgeweitete oder zugespitzte Enden oder serifenbetonte Enden.<br>
+     Z. B.  Palatino, "Palatino Linotype", Palladio, "URW Palladio", serif</dd>
+     <dt><code>sans-serif</code></dt>
+     <dd style='font-family: "Trebuchet MS","Liberation Sans","Nimbus Sans L",sans-serif;'>Schriftzeichen haben gerade Strichenden.<br>
+     Z. B. 'Trebuchet MS', 'Liberation Sans', 'Nimbus Sans L', sans-serif</dd>
+     <dt><code>monospace</code></dt>
+     <dd style='font-family: "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace;'>Alle Schriftzeichen haben die gleiche Breite.<br>
+     Z. B. "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace</dd>
+     <dt><code>cursive</code></dt>
+     <dd>Schriftzeichen in kursiven Schriftarten haben üblicherweise verbindende Striche oder andere kursive Charakteristiken, die über die von kursiven Schriftzügen hinausgehen. Die Schriftzeichen sind teilweise oder ganz verbunden und das Ergebnis ähnelt eher einer Handschrift als gedruckten Lettern.</dd>
+     <dt><code>fantasy</code></dt>
+     <dd>Fantasie Schriftarten sind überwiegend dekorative Schriftarten, die verspielte Darstellungen von Schriftzeichen beinhalten.</dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Gültige_Schriftfamiliennamen">Gültige Schriftfamiliennamen</h3>
+
+<p>Schriftfamiliennamen müssen entweder in Anführungszeichen eingeschlossene Strings sein oder nicht angeführte als eine Aneinanderreihung von einem oder mehreren Bezeichnern. Das heißt dass in nicht angeführten Schriftfamiliennamen Interpunktionszeichen und Ziffern am Anfang jedes Zeichens Maskiert (escaped) werden müssen.</p>
+
+<p>Beispielsweise sind die folgenden Angaben gültig:</p>
+
+<pre>font-family: Gill Sans Extrabold, sans-serif;
+font-family: "Goudy Bookletter 1911", sans-serif;</pre>
+
+<p>Die folgenden Angaben sind <strong>ungültig</strong>:</p>
+
+<pre>font-family: Goudy Bookletter 1911, sans-serif;
+font-family: Red/Black, sans-serif;
+font-family: "Lucida" Grande, sans-serif;
+font-family: Ahem!, sans-serif;
+font-family: test@foo, sans-serif;
+font-family: #POUND, sans-serif;
+font-family: Hawaii 5-0, sans-serif;</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Beispiel_1">Beispiel 1</h3>
+
+<pre>body     { font-family: "Gill Sans Extrabold", Helvetica, sans-serif }
+
+.receipt { font-family: Courier, "Lucida Console", monospace }
+</pre>
+
+<h3 id="Beispiel_2">Beispiel 2</h3>
+
+<pre class="brush: css">.exampleserif {
+    font-family: Times, "Times New Roman", Georgia, serif;
+}
+
+.examplesansserif {
+    font-family: Verdana, Arial, Helvetica, sans-serif;
+}
+
+.examplemonospace {
+    font-family: "Lucida Console", Courier, monospace;
+}
+
+.examplecursive {
+    font-family: cursive;
+}
+
+.examplefantasy {
+    font-family: fantasy;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="exampleserif"&gt;
+Dies ist ein Beispiel für eine Serifenschrift.
+&lt;/div&gt;
+
+&lt;div class="examplesansserif"&gt;
+Dies ist ein Beispiel für eine serifenlose Schrift.
+&lt;/div&gt;
+
+&lt;div class="examplemonospace"&gt;
+Dies ist ein Beispiel für eine nicht-proportionale Schrift.
+&lt;/div&gt;
+
+&lt;div class="examplecursive"&gt;
+Dies ist ein Beispiel für eine kursive Schrift.
+&lt;/div&gt;
+
+&lt;div class="examplefantasy"&gt;
+Dies ist ein Beispiel für eine Fantasieschrift.
+&lt;/div&gt;</pre>
+
+<h4 id="Live_Beispiel">Live Beispiel</h4>
+
+<p>{{ EmbedLiveSample('Beispiel_2','600','120') }}</p>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-family-prop', 'font-family')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Keine wesentlichen Änderungen</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-family', 'font-family')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Keine wesentlichen Änderungen</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#font-family', 'font-familiy')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.font-family")}}
diff --git a/files/de/web/css/font-feature-settings/index.html b/files/de/web/css/font-feature-settings/index.html
new file mode 100644
index 0000000000..f04a5497a6
--- /dev/null
+++ b/files/de/web/css/font-feature-settings/index.html
@@ -0,0 +1,108 @@
+---
+title: font-feature-settings
+slug: Web/CSS/font-feature-settings
+tags:
+  - CSS
+  - CSS Fonts
+  - CSS Property
+  - Layout
+  - Reference
+  - Référence(2)
+translation_of: Web/CSS/font-feature-settings
+---
+<div>{{CSSRef}} {{SeeCompatTable}}</div>
+
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+
+<p>Die Eigenschaft <code>font-feature-settings</code> ermöglicht die Kontrolle von erweiterten typografischen Eigenschaften in OpenType-Schriftarten.</p>
+
+<div class="note"><strong>Anmerkung:</strong> Wenn möglich sollte die Eigenschaft {{cssxref("font-variant")}} genutzt werden. Diese Eigenschaft wurde speziell für Fälle entwickelt, in denen es nicht möglich ist, eine OpenType-Eigenschaft zu aktivieren oder zu nutzen.<br>
+<br>
+Diese Eigenschaft sollte insbesondere nicht genutzt werden, um Kapitälchen zu aktivieren.</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formale Syntax</a>: {{csssyntax("font-feature-settings")}}
+</pre>
+
+<pre>font-feature-settings: normal
+font-feature-settings: "smcp"
+font-feature-settings: "smcp" on
+font-feature-settings: "swsh" 2
+font-feature-settings: "smcp", "swsh" 2
+
+font-feature-settings: inherit
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Der Text wird mit Standardeinstellungen gesetzt.</dd>
+ <dt><code>&lt;feature-tag-value&gt;</code></dt>
+ <dd>Beim Rendern von Text wird die Liste der Tag-Wert-Paare an die Text-Layout-Engine übergeben um Eigenschaften zu aktivieren oder zu deaktivieren. Der Tag ist immer ein {{cssxref("&lt;string&gt;")}} aus 4 ASCII-Zeichen. Wenn eine andere Anzahl an Zeichen übergeben wird oder der Tag Zeichen außerhalb des Coderaumes von U+20 bis U+7E enthält, ist die komplette Eigenschaft ungültig.<br>
+ Der Wert ist eine positive Ganzzahl, wobei die Schlüsselwörter <code>on</code> und <font face="Courier New, Andale Mono, monospace"><span style="line-height: normal;">off</span></font> entsprechend für <code>1</code> und <code>0</code> stehen.  Wenn kein Wert übergeben wird, wird standardmäßig von <code>1</code> ausgegangen. Für nicht-boolsche OpenType-Eigenschaften (z.B. <a href="http://www.microsoft.com/typography/otspec/features_pt.htm#salt">Alternative Stile</a>) selektiert der Wert ein bestimmtes Zeichen, während er für boolsche Eigenschaften einen Schalter darstellt.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush:css">/* Kapitälchen aktivieren */
+.smallcaps { font-feature-settings: "smcp" on; }
+
+/* Groß- und Kleinbuchstaben zu Kapitälchen konvertieren (Zeichensetzung eingeschlossen) */
+.allsmallcaps { font-feature-settings: "c2sc", "smcp"; }
+
+/* Historische Formen aktivieren */
+.hist { font-feature-settings: "hist"; }
+
+/* Verbreitete Ligaturen deaktivieren (standardmäßig eingeschaltet) */
+.noligs { font-feature-settings: "liga" 0; }
+
+/* Nichtproportionale Ziffern (monospace) aktivieren */
+td.tabular { font-feature-settings: "tnum"; }
+
+/* Automatische Brüche aktivieren */
+.fractions { font-feature-settings: "frac"; }
+
+/* Das zweite geschwungene Zeichen nutzen */
+.swash { font-feature-settings: "swsh" 2; }
+
+/* Alternativen Zeichensatz Nr.7 nutzen */
+.fancystyle {
+  font-family: Gabriola; /* Verfügbar ab Windows 7 und Mac OS */
+  font-feature-settings: "ss07";
+}
+</pre>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#propdef-font-feature-settings', 'font-feature-settings')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+{{Compat("css.properties.font-feature-settings")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="https://www.fontfont.com/staticcontent/downloads/FF_OT_User_Guide.pdf" title="http://www.fontfont.com/opentype/FF_OT_UserGuide_v2.pdf">FontFont OpenType User Guide (pdf)</a></li>
+ <li><a href="http://www.microsoft.com/typography/otspec/featurelist.htm" title="http://www.microsoft.com/typography/otspec/featurelist.htm">OpenType Feature Tags</a> list</li>
+ <li><a href="http://blogs.msdn.com/b/ie/archive/2012/01/09/css-corner-using-the-whole-font.aspx" title="http://blogs.msdn.com/b/ie/archive/2012/01/09/css-corner-using-the-whole-font.aspx">Using the whole font</a> (The -moz syntax is the old one. On Gecko, use the -ms syntax but with -moz).</li>
+</ul>
diff --git a/files/de/web/css/font-size/index.html b/files/de/web/css/font-size/index.html
new file mode 100644
index 0000000000..7a5592169c
--- /dev/null
+++ b/files/de/web/css/font-size/index.html
@@ -0,0 +1,327 @@
+---
+title: font-size
+slug: Web/CSS/font-size
+tags:
+  - CSS
+  - CSS Font
+  - CSS-Eigenschaft
+  - CSS-Schrift
+  - Reference
+translation_of: Web/CSS/font-size
+---
+<div>{{CSSRef}}</div>
+
+<p>Die <strong><code>font-size</code></strong>-<a href="/de/docs/Web/CSS">CSS</a>-Eigenschaft spezifiziert die Schriftgöße. Eine Änderung der Schriftgröße kann die Größe anderer Partien beeinflussen, da sie dazu benutzt wird, den Wert der <code>em</code>- und <code>ex</code>-{{cssxref("&lt;length&gt;")}}-Einheiten zu berechnen.</p>
+
+<pre class="brush:css no-line-numbers">/* &lt;absolute-size&gt;-Werte */
+font-size: xx-small;
+font-size: x-small;
+font-size: small;
+font-size: medium;
+font-size: large;
+font-size: x-large;
+font-size: xx-large;
+
+/* &lt;relative-size&gt;-Werte */
+font-size: smaller;
+font-size: larger;
+
+/* &lt;length&gt;-Werte */
+font-size: 12px;
+font-size: 0.8em;
+
+/* &lt;percentage&gt;-Werte */
+font-size: 80%;
+
+/* Globale Werte */
+font-size: inherit;
+font-size: initial;
+font-size: unset;
+</pre>
+
+<div class="hidden" id="font-size">
+<pre class="brush: html">&lt;div id="container"&gt;
+  &lt;p id="xx-small"&gt;xx-small&lt;/p&gt;
+  &lt;p id="x-small"&gt;x-small&lt;/p&gt;
+  &lt;p id="small"&gt;small&lt;/p&gt;
+  &lt;p id="medium"&gt;medium&lt;/p&gt;
+  &lt;p id="large"&gt;large&lt;/p&gt;
+  &lt;p id="x-large"&gt;x-large&lt;/p&gt;
+  &lt;p id="xx-large"&gt;xx-large&lt;/p&gt;
+  &lt;p id="twelve-px"&gt;12px&lt;/p&gt;
+  &lt;div id="parent-twelve-px"&gt;
+    12px
+    &lt;p id="smaller"&gt;smaller&lt;/p&gt;
+    &lt;p id="larger"&gt;larger&lt;/p&gt;
+    &lt;p id="zero-dot-eight-em"&gt;0.8em&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;div id="parent-twenty-four-px"&gt;
+    24px
+    &lt;p id="smaller"&gt;smaller&lt;/p&gt;
+    &lt;p id="larger"&gt;larger&lt;/p&gt;
+    &lt;p id="zero-dot-eight-em"&gt;0.8em&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">#container {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+div &gt; p {
+  border: 1px solid black;
+  display: flex;
+  align-items: center;
+  margin: 8px;
+  padding: 8px;
+}
+
+#parent-twelve-px,
+#parent-twenty-four-px {
+  display: flex;
+  border: 1px solid black;
+  padding: 8px;
+  margin: 8px;
+}
+
+#parent-twelve-px {
+  font-size: 12px;
+}
+
+#parent-twenty-four-px {
+  font-size: 24px;
+}
+
+#xx-small {
+  font-size: xx-small;
+}
+
+#x-small {
+  font-size: x-small;
+}
+
+#small {
+  font-size: small;
+}
+
+#medium {
+  font-size: medium;
+}
+
+#large {
+  font-size: large;
+}
+
+#x-large {
+  font-size: x-large;
+}
+
+#xx-large {
+  font-size: xx-large;
+}
+
+#smaller {
+  font-size: smaller;
+}
+
+#larger {
+  font-size: larger;
+}
+
+#twelve-px {
+  font-size: 12px;
+}
+
+#zero-dot-eight-em {
+  font-size: 0.8em;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample("font-size", 1200, 180, "", "", "example-outcome-frame")}}</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>Die <code>font-size</code>-Eigenschaft kann auf zwei Weisen spezifiziert werden:</p>
+
+<ul>
+ <li>durch ein einzelnes Schlüsselwort, das entweder eine <a href="#absolute-size">absolute</a> oder <a href="#relative-size">relative</a> Größe darstellt</li>
+ <li>durch einen <code><a href="#&lt;length-percentage>">&lt;length-percentage&gt;</a></code>-Wert</li>
+</ul>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><a id="absolute-size"><code>xx-small, x-small, small, medium, large, x-large, xx-large</code></a></dt>
+ <dd>Ein Satz von Schlüsselwörtern absoluter Größe, basierend auf der vom Benutzer festgelegten Schriftgröße (welche <code>medium </code>entspricht). Ähnlich der HTML-Tags <code>&lt;font size="1"&gt;</code> bis <code>&lt;font size="7"&gt;</code>, bei denen die benutzerdefinierte Größe <code>&lt;font size="3"&gt;</code> entspricht.</dd>
+ <dt><a id="relative-size"><code>larger, smaller</code></a></dt>
+ <dd>Größer oder kleiner als die Schriftgröße des Elternelements; grob das Verhältnis, das benutzt wird, um die obigen absoluten Schlüsselwörter zu unterscheiden.</dd>
+ <dt><a id="&lt;length-percentage>"><code>&lt;length-percentage&gt;</code></a></dt>
+ <dd>
+ <p>Ein positiver {{cssxref("&lt;length&gt;")}}- oder {{cssxref("&lt;percentage&gt;")}}-Wert. Werden die Einheiten der <code>&lt;length&gt;</code>-Werte durch <code>em</code> oder <code>ex</code> spezifiziert, ist die Größe relativ definiert zur Schriftgröße des Elternelements des gefragten Elements. Zum Beispiel entspricht 0.5em der Hälfte der Schriftgröße des aktuellen Elternelements. Werden die Einheiten in <code>rem</code> spezifiziert, ist die Größe relativ definiert zur Schriftgröße des {{HTMLElement("html")}}-(Wurzel-)Elements.</p>
+
+ <p>&lt;percentage&gt;-Werte beziehen sich auf die Schriftgröße des Elternelements.</p>
+ </dd>
+</dl>
+
+<p>Am Besten werden Werte benutzt, die relativ zur benutzerdefinierten Schriftgröße stehen. Absolute Werte in Form von Längen mit Einheiten, außer <code>em</code> oder <code>ex</code>, sollten vermieden werden. Müssen trotzdem solche absoluten Werte benutzt werden, ist <code>px</code> anderen Einheiten vorzuziehen, weil seine Bedeutung nicht abhängig davon, was das Betriebssystem (meist fälschlicherweise) für die Bildschirmauflösung hält, variiert.</p>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Mögliche_Ansätze">Mögliche Ansätze</h2>
+
+<p>Es gibt einige verschiedene Arten, die Schriftgröße zu spezifizieren, in Form von Schlüsselwörtern oder numerischen Werten für Pixel oder ems. Je nachdem, was die Ansprüche einer Webseite sind, kann die richtige Methode gewählt werden.</p>
+
+<h3 id="Schlüsselwörter">Schlüsselwörter</h3>
+
+<p>Schlüsselwörter sind eine gute Möglichkeit die Größe von Schriften im Web festzulegen. Indem ein Schlüsselwort für die Schriftgröße des body-Elements festgelegt wird, ist es möglich überall auf der restlichen Webseite relative Schriftgrößen zu benutzen, was einen befähigt, auf einfache Weise die Schrift auf der ganzen Seite entsprechend zu vergrößern oder zu verkleinern.</p>
+
+<h3 id="Pixel">Pixel</h3>
+
+<p>Das Festlegen der Schriftgröße in Pixel-Werten (<code>px</code>) ist eine gute Wahl, wenn Pixel-Genauigkeit gefordert ist. Ein px-Wert ist statisch und stellt eine Möglichkeit dar, die unabhängig von Betriebssystem und Browser ist und dem Browser unveränderlich mitteilt, die Buchstaben in genau der spezifizierten Höhe an Pixeln darzustellen. Das Ergebnis kann sich je nach Browser leicht unterscheiden, da diese eventuell verschiedene Algorithmen verwenden, um den selben Effekt zu erzielen.</p>
+
+<p>Verschiedene Schriftgrößeneinstellungen können auch kombiniert werden. Zum Beispiel, wenn ein Elternelement <code>16px</code> festlegt und sein Kindelement <code>larger</code> spezifiziert, dann wird das Kindelement größer dargestellt als das Elternelement auf der Seite.</p>
+
+<div class="note"><strong>Anmerkung:</strong> Die Schriftgröße in Pixeln festzulegen, ist <em><a href="https://de.wikipedia.org/wiki/Barrierefreies_Internet">nicht barrierefrei</a></em>, weil der Benutzer infolge dessen die Schriftgröße nicht über den Browser ändern kann. Zum Beispiel möchten Benutzer mit Sehschwäche die Schriftgröße vielleicht viel größer einstellen als vom Web-Designer ausgewählt. Die Benutzung von Pixeln für Schriftgrößen sollte vermieden werden, wenn ein allumfassendes Design gefordert ist.</div>
+
+<h3 id="Ems">Ems</h3>
+
+<p>Eine weitere Möglichkeit, die Schriftgröße festzulegen, ist die Verwendung von <code>em</code>-Werten. Die Größe eines <code>em</code>-Wertes ist dynamisch. Beim Spezifizieren der <code>font-size</code>-Eigenschaft entspricht ein <code>em</code> der für das gefragte Elternelement festgelegten Schriftgröße. Wird die Schriftgröße nirgendwo anders auf der Seite festgelegt, dann gilt die vom Browser definierte Größe, die oft 16px entspricht. Demnach gilt im Normalfall 1em = 16px, also 2em = 32px. Wenn dem body-Element eine Schriftgröße von 20px zugewiesen wird, dann gilt 1em = 20px und 2em = 40px. Es ist zu beachten, dass der Wert 2 notwendigerweise ein Multiplikator der aktuellen em-Größe ist.</p>
+
+<p>Um das em-Äquivalent für einen beliebigen benötigten Pixel-Wert zu berechnen, kann die folgende Formel benutzt werden:</p>
+
+<pre class="brush: plain">em = gewünschter Pixel-Wert des Elements / Elternelementschriftgröße in Pixeln</pre>
+
+<p>Angenommen die Schriftgröße des Body der Seite entspricht 16px. Wenn die gewünschte Schriftgröße 12px ist, dann sollten 0.75em spezifiziert werden (da 12/16 = 0,75). Es verhält sich ähnlich, wenn eine Schriftgröße von 10px gewollt ist; dann sollte 0.625em spezifiziert werden (10/16 = 0,625) und für 22px sollten es 1.375em (22/16) sein.</p>
+
+<p>Em ist eine sehr nützliche CSS-Einheit, da es seine Länge automatisch relativ zur vom Leser gewählten Schrift anpasst.</p>
+
+<p>Ein wichtiger Hinweis: em-Werte können zu bisweilen auch extremen Steigerungen führen wie das folgende HTML und CSS zeigen:</p>
+
+<pre class="brush: css">html {
+  font-size: 62.5%; /* font-size 1em = 10px bei normaler Browser-Einstellung */
+}
+span {
+  font-size: 1.6em;
+}</pre>
+
+<pre class="brush: html">&lt;div&gt;
+&lt;span&gt;Outer &lt;span&gt;inner&lt;/span&gt; outer&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Das Ergebnis ist:</p>
+
+<p>{{EmbedLiveSample("Ems", 400, 40)}}</p>
+
+<p>Angenommen, dass <code>font-size</code> vom Browser als 16px festgelegt wird, dann würden die Wörter "outer" mit 16px dargestellt, das Wort "inner" aber mit 25.6px. Das liegt daran, dass die Schriftgröße des inneren Spans 1.6em entspricht, was relativ zum Elternelement gilt, welches wiederum relativ zu dessen Elternelement steht. Dieses Verhalten wird auch <strong>compounding</strong> (Steigerung/Aufzinsung) genannt.</p>
+
+<h3 id="Rems">Rems</h3>
+
+<p><code>Rem</code>-Werte wurden eingeführt, um das compunding-Problem zu umgehen. <code>Rem</code>-Werte sind relativ zum <code>html</code>-Wurzelelement, nicht zum Elternelement. Mit anderen Worten ermöglicht es, eine Schriftgröße in einer relativen Weise zu spezifizieren ohne durch das Elternelement beeinflusst zu werden und so das Compunding zu verhindern.</p>
+
+<p>Das folgende CSS ist nahezu identisch mit dem vorherigen Beispiel. Die einzige Ausnahme ist, dass die Einheit nun <code>rem</code> ist.</p>
+
+<pre class="brush: css">html {
+  font-size: 62.5%; /* font-size 1em = 10px bei normaler Browser-Einstellung */
+}
+span {
+  font-size: 1.6rem;
+}
+</pre>
+
+<p>Anschließend wird dieses CSS auf das selbe HTML angewandt, das wie folgt aussieht:</p>
+
+<pre class="brush: html">&lt;span&gt;Outer &lt;span&gt;inner&lt;/span&gt; outer&lt;/span&gt;</pre>
+
+<p>{{EmbedLiveSample("Rems", 400, 40)}}</p>
+
+<p>Bei diesem Beispiel erscheinen die Worte "outer inner outer" alle mit 16px (angenommen, dass die Schriftgröße des Browsers beim Standardwert von 16px verblieben ist).</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Beispiel_1">Beispiel 1</h3>
+
+<pre class="brush: css">/* Paragrafentext auf sehr groß setzen */
+p { font-size: xx-large }
+
+/* h1-(level 1 heading)-Text auf 2,5 mal die Größe
+ * des umliegenden Textes setzen */
+h1 { font-size: 250% }
+
+/* setzt in span-Tags eingeschlossenen Text auf 16px */
+span { font-size: 16px; }
+</pre>
+
+<h3 id="Beispiel_2">Beispiel 2</h3>
+
+<pre class="brush: css">.small {
+	font-size: xx-small;
+}
+.larger {
+	font-size: larger;
+}
+.point {
+	font-size: 24pt;
+}
+.percent {
+	font-size: 200%;
+}
+</pre>
+
+<pre class="brush: html">&lt;h1 class="small"&gt;small-H1&lt;/h1&gt;
+&lt;h1 class="larger"&gt;larger-H1&lt;/h1&gt;
+&lt;h1 class="point"&gt;24pt-H1&lt;/h1&gt;
+&lt;h1 class="percent"&gt;200%-H1&lt;/h1&gt;</pre>
+
+<h4 id="Live-Test">Live-Test</h4>
+
+<p>{{EmbedLiveSample('Beispiel_2','600','200')}}</p>
+
+<h2 id="Bemerkungen">Bemerkungen</h2>
+
+<p><code>Em</code>- und <code>ex</code>-Einheiten in der {{Cssxref("font-size")}}-Eigenschaft verhalten sich relativ zur Schriftgröße des Elternelements (im Gegensatz zu allen anderen Einheiten, die relativ zur Schriftgröße des Elements sind). Das bedeutet, dass <code>em</code>-Einheiten und Prozentangaben das selbe als Wert für {{Cssxref("font-size")}} bewirken.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-size-prop', 'font-size')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Keine Veränderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'font-size')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Definiert <code>font-size</code> als animierbar.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-size', 'font-size')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Keine Veränderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#font-size', 'font-size')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+{{Compat("css.properties.font-size")}}
diff --git a/files/de/web/css/font-style/index.html b/files/de/web/css/font-style/index.html
new file mode 100644
index 0000000000..02430dd746
--- /dev/null
+++ b/files/de/web/css/font-style/index.html
@@ -0,0 +1,225 @@
+---
+title: font-style
+slug: Web/CSS/font-style
+translation_of: Web/CSS/font-style
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">Die CSS-Eigenschaft<strong> <code>font-style</code></strong> legt fest, ob Text mit einem kursiven Schnitt der gewählten Schriftfamilie ({{cssxref("font-family")}}) dargestellt werden soll.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/css/font-style.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css no-line-numbers">font-style: normal;
+font-style: italic;
+font-style: oblique;
+font-style: oblique 10deg;
+
+/* Global values */
+font-style: inherit;
+font-style: initial;
+font-style: unset;
+</pre>
+
+<p><code>font-style</code> akzeptiert ein einzelnes der nachfolgenden Schlüsselwörter, welchem im Falle von <code>oblique</code> ein Winkel folgen darf.</p>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Wählt einen Schriftschnitt mit nicht-kursiven Buchstaben.</dd>
+ <dt><code>italic</code></dt>
+ <dd>Wählt einen kursiven Schriftschnitt der Eigenschaft italic (siehe unten). Steht keiner zur Verfügung, wird stattdessen der Wert <code>oblique</code> angewendet. Ist auch dies nicht möglich, wird die Schrägstellung von 14° durch den Browser erzeugt.</dd>
+ <dt><code>oblique</code></dt>
+ <dd>Wählt einen kursiven Schriftschnitt der Eigenschaft oblique (siehe unten). Steht keiner zur Verfügung, wird stattdessen der Wert <code>italic</code> angewendet. Ist auch dies nicht möglich, wird eine Schrägstellung von 14° durch den Browser erzeugt.</dd>
+ <dt><code>oblique</code> <code><a href="/en-US/docs/Web/CSS/angle">&lt;angle&gt;</a></code></dt>
+ <dd>Wählt einen kursiven Schriftschnitt der Eigenschaft oblique (siehe unten), dessen Buchstaben genau oder annähernd im Winkel <code>&lt;angle&gt;</code> schräggestellt sind. Üblicherweise werden bei der Suche nach passenden Schriftschnitten für Winkel ab 14° eher größere Werte gewählt, bis 13° eher kleinere (Details siehe <a href="https://drafts.csswg.org/css-fonts-4/#font-matching-algorithm">font matching section</a>).</dd>
+ <dd>Steht kein passender Schriftschnitt zur Verfügung, wird die Schrägstellung durch den Computer aus einem normalen Schriftschnitt erzeugt.</dd>
+ <dd>Der gültige Winkelbereich erstreckt sich von <code>-90deg</code> bis <code>90deg</code> (einschließlich). Positive Werte bewirken eine Schrägstellung in Richtung Zeilenende, negative in Richtung Zeilenanfang.</dd>
+</dl>
+
+<h4 id="italic_gegenüber_oblique">italic gegenüber oblique</h4>
+
+<p>Die Werte <code>italic</code> und <code>oblique</code> scheinen auf den ersten Blick bei der Darstellung oftmals zu identischen Ergebnissen zu führen.</p>
+
+<p>Während <code>italic</code> jedoch Schriftschnitte bezeichnet, die bereits kursiv entworfen wurden, umfasst <code>oblique</code> Schriftschnitte, die lediglich durch automatisierte Schrägstellung normaler Buchstaben derselben Familie erzeugt wurden („kursiviert“).<br>
+ <code>italic</code> ist in der Regel die bessere Wahl, da die Form der Buchstaben und die Abstände der Buchstaben untereinander vom Schriftgestalter manuell festgelegt werden, was zu einer harmonischeren Textdarstellung führt.</p>
+
+<p>Da beide Varianten sehr ähnlich sind, wird die jeweils andere verwendet, steht die gewählte Variante nicht zur Verfügung. Dieses Verhalten kann mit {{cssxref("font-synthesis")}} geändert werden.</p>
+
+<h3 id="Variable_Schriftarten">Variable Schriftarten</h3>
+
+<p>Variable Schriftarten erlauben eine präzise Steuerung der Darstellung von kursivierten Schriftschnitten mit Hilfe des Werts <code>&lt;angle&gt;</code> im Anschluss an <code>oblique</code>.</p>
+
+<p>Bei variablen Schriftarten nach TrueType- oder OpenType-Spezifikation wird die Schrägstellung bei <code>oblique</code> über die Eigenschaft <code>"slnt"</code>  realisiert, sowie <code>italic</code> mit einem Wert von 1 für die Eigenschaft  <code>"ital"</code>(siehe {{cssxref("font-variation-settings")}}).</p>
+
+<p>Das nachstehende Beispiel benötigt einen Browser, der die Syntax nach CSS Fonts Level 4 versteht, d.h. die Angabe eines Winkels bei <code>font-style: oblique</code>.</p>
+
+<div style="border: 10px solid #f5f9fa; padding: 1rem;">{{EmbedLiveSample("variable-font-example", 1200, 180, "", "", "example-outcome-frame")}}</div>
+
+<h4 id="HTML">HTML</h4>
+
+<div id="variable-font-example">
+<pre class="brush: html">&lt;header&gt;
+    &lt;input type="range" id="slant" name="slant" min="-90" max="90" /&gt;
+    &lt;label for="slant"&gt;Slant&lt;/label&gt;
+&lt;/header&gt;
+&lt;div class="container"&gt;
+    &lt;p class="sample"&gt;...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">/*
+AmstelvarAlpha-VF is created by <span class="col-11 mr-2 text-gray-dark">David Berlow</span> (https://github.com/TypeNetwork/Amstelvar)
+and is used here under the terms of its license:
+https://github.com/TypeNetwork/Amstelvar/blob/master/OFL.txt
+*/
+
+@font-face {
+  src: url('https://mdn.mozillademos.org/files/16044/AmstelvarAlpha-VF.ttf');
+  font-family:'AmstelvarAlpha';
+  font-style: normal;
+}
+
+label {
+  font: 1rem monospace;
+}
+
+.container {
+  max-height: 150px;
+  overflow: scroll;
+}
+
+.sample {
+  font: 2rem 'AmstelvarAlpha', sans-serif;
+}
+
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">html, body {
+  max-height: 100vh;
+  max-width: 100vw;
+  overflow: hidden;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+}
+
+header {
+  margin-bottom: 1.5rem;
+}
+
+.container {
+  flex-grow: 1;
+}
+
+.container &gt; p {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+</pre>
+</div>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">let slantLabel = document.querySelector('label[for="slant"]');
+let slantInput = document.querySelector('#slant');
+let sampleText = document.querySelector('.sample');
+
+function update() {
+  let slant = `oblique ${slantInput.value}deg`;
+  slantLabel.textContent = `font-style: ${slant};`;
+  sampleText.style.fontStyle = slant;
+}
+
+slantInput.addEventListener('input', update);
+
+update();
+</pre>
+</div>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<div class="hidden">
+<pre class="brush: html">&lt;p class="normal"&gt;Text im Schnitt normal.&lt;/p&gt;
+&lt;p class="italic"&gt;Text im Schnitt italic.&lt;/p&gt;
+&lt;p class="oblique"&gt;Text im Schnitt oblique.&lt;/p&gt;
+</pre>
+</div>
+
+<pre class="brush: css">.normal {
+  font-style: normal;
+}
+
+.italic {
+  font-style: italic;
+}
+
+.oblique {
+  font-style: oblique;
+}</pre>
+
+<p>{{ EmbedLiveSample('Font_styles') }}</p>
+
+<h2 id="Barrierefreiheit">Barrierefreiheit</h2>
+
+<p>Längere Abschnitte in kursiver Schrift können für Menschen mit einer Lesestörung (<a class="mw-redirect" href="https://de.wikipedia.org/wiki/Legasthenie" title="Legasthenie">Legasthenie</a> oder <a href="https://de.wikipedia.org/wiki/Dyslexie" title="Dyslexie">Dyslexie</a>) schwer bis gar nicht zu erfassen sein. Kursive Schrift sollte deshalb nur als Hervorhebung einzelner Stellen verwendet werden.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/WCAG21/#visual-presentation">W3C Understanding WCAG 2.1</a></li>
+</ul>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Fonts', '#font-style-prop', 'font-style')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td>Fügt die Möglichkeit einer Winkelangabe für <code>oblique</code> hinzu.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-style-prop', 'font-style')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-style', 'font-style')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#font-style', 'font-style')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Erste Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("css.properties.font-style")}}</p>
diff --git a/files/de/web/css/font-variant/index.html b/files/de/web/css/font-variant/index.html
new file mode 100644
index 0000000000..19f2f0268d
--- /dev/null
+++ b/files/de/web/css/font-variant/index.html
@@ -0,0 +1,116 @@
+---
+title: font-variant
+slug: Web/CSS/font-variant
+tags:
+  - CSS
+  - CSS Eigenschaften
+  - CSS Schriften
+  - NeedsLiveSample
+  - Referenz
+translation_of: Web/CSS/font-variant
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die CSS-Eigenschaft <code>font-variant</code> erlaubt die Darstellung der Schrift in Kapitälchen, Kleinbuchstaben in der Form von Großbuchstaben.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("font-variant")}}</pre>
+
+<pre>font-variant: normal;
+font-variant: small-caps;
+font-variant: common-ligatures small-caps;
+
+font-variant: inherit;
+font-variant: initial;
+font-variant: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Normale Schrift.</dd>
+ <dt><code>small-caps</code>, <code>all-small-caps</code>, <code>petite-caps</code>, <code>all-petite-caps</code>, <code>unicase</code>, <code>titling-caps</code></dt>
+ <dd>Stellt die Schrift in verschiedenen Arten von Kapitälchen dar, entsprechend {{cssxref("font-variant-caps")}}.<br>
+ Falls dies von der Schriftart nicht unterstützt wird, stellt Gecko den Effekt nach, indem die Kleinbuchstaben durch verkleinerte Grossbuchstaben ersetzt werden.</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p>Der Wert <code>small-caps</code> hat in einigen Sprachen weitergehende Auswirkungen:</p>
+
+<ul>
+ <li>In Turksprachen (wie Türkisch (tr), Aserbaidschanisch (az), Krimtatarisch (crh), Tatarisch (tt) und Baschkirisch (ba)), gibt es zwei verschiedene Buchstaben <code>i</code>, einen mit und einen ohne Punkt, und somit auch zwei verschiedene Buchstabenpaare: <code>i</code>/<code>İ</code> und <code>ı</code>/<code>I</code>.</li>
+ <li>Im Deutschen (de) wird das <code>ß</code> zu <code>SS</code>.</li>
+ <li>Im Griechischen (el) verlieren Vokale ihren Akzent, wenn sie großgeschrieben sind (<code>ά</code>/<code>Α</code>), eine Ausnahme ist Eta (<code>ή</code>/<code>Ή</code>). Auch Diphthongen mit einem Akzent im ersten Vokal verliern diesen, dafür erhält der zweite Vokal einen (<code>άι</code>/<code>ΑΪ</code>).</li>
+</ul>
+
+<p>Die Sprache wird in HTML mit dem Attribut  <code>lang</code> und in XML mit <code>xml:lang</code> definiert.</p>
+
+<p>Diese spezifischen Anpassungen werden nicht von allen Browsern unterstützt, siehe <a href="/de/docs/CSS/text-transform#Browser_compatibility" title="https://developer.mozilla.org/en-US/docs/CSS/text-transform#Browser_compatibility">Browserkompatibilität</a>.</p>
+</div>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="normal"&gt;Firefox rocks!&lt;/p&gt;
+&lt;p class="small"&gt;Firefox rocks!&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p.normal {
+  font-variant: normal;
+}
+p.small {
+  font-variant: small-caps;
+}
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/font-variant') }}</p>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#propdef-font-variant', 'font-variant')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Sammeleigenschaft für <code>font-variant-*</code> (in diesem Artikel noch nicht beschrieben).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-variant', 'font-variant')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#font-variant', 'font-variant')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2>
+
+<p>{{Compat("css.properties.font-variant")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref("text-transform")}}</li>
+</ul>
diff --git a/files/de/web/css/font-weight/index.html b/files/de/web/css/font-weight/index.html
new file mode 100644
index 0000000000..bff759e976
--- /dev/null
+++ b/files/de/web/css/font-weight/index.html
@@ -0,0 +1,276 @@
+---
+title: font-weight
+slug: Web/CSS/font-weight
+translation_of: Web/CSS/font-weight
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Summary" name="Summary">Übersicht</h2>
+
+<p>Die <a href="/en-US/docs/CSS" title="CSS">CSS</a>-Eigenschaft {{Cssxref("font-weight")}} definiert die Stärke der Schrift. Einige Schriftarten sind jedoch nicht in allen Werten verfügbar und unterstützen nur die Werte <code>normal</code> und <code>bold</code>.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("font-weight")}}</pre>
+
+<pre><code>font-weight: normal
+font-weight: bold
+
+font-weight: lighter
+font-weight: bolder
+
+font-weight: 100
+font-weight: 200
+font-weight: 300
+font-weight: 400
+font-weight: 500
+font-weight: 600
+font-weight: 700
+font-weight: 800
+font-weight: 900
+
+font-weight: inherit</code></pre>
+
+<h3 id="Values" name="Values">Werte</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Normale Stärke, entspricht <code>400</code>.</dd>
+ <dt><code>bold</code></dt>
+ <dd>Fette Schrift, entspricht <code>700</code>.</dd>
+ <dt><code>lighter</code></dt>
+ <dd>Eine Stufe dünner als das Elternelement (siehe <a href="#relative_angaben">Die Bedeutung relativer Angaben</a> unten).</dd>
+ <dt><code>bolder</code></dt>
+ <dd>Eine Stufe fetter als das Elternelement (siehe <a href="#relative_angaben">Die Bedeutung relativer Angaben</a> unten).</dd>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>Eine Zahl ({{cssxref("&lt;number&gt;")}}) zwischen 1 und 1000 (einschließlich). Größere Werte stehen für eine fettere oder gleich fette Darstellung als kleinere Werte.</dd>
+</dl>
+
+<p>Frühere Spezifikationen erlaubten für <code>font-weight</code> nur die Schlüsselworte sowie die Werte 100 bis 1000 in Hunderterschritten. Nicht-variable Schriftarten können nur mit diesen Werten arbeiten, feinere Abstimmungen werden jedoch mit den festgelegten Werte angenähert.</p>
+
+<p>Die Spezifikation CSS Fonts Level 4 nimmt variable Schriftarten im Format TrueType und OpenType auf. Mit diesen sind grundsätzlich beliebig feine Abstimmungen möglich.</p>
+
+<h3 id="Näherungsverfahren">Näherungsverfahren</h3>
+
+<p>Ist die gewählte Stärke nicht verfügbar, bestimmen die nachfolgenden Schritte die Darstellung:</p>
+
+<ul>
+ <li>Liegt die gewünschte Stärke zwischen 400 und 500 (einschließlich):
+  <ol>
+   <li>Verwende die erste Stärke, die größer als die gewünschte, aber kleiner als 500 ist.</li>
+   <li>Ist keine verfügbar, verwende die erste Stärke die kleiner als die gewünschte ist.</li>
+   <li>Ist keine verfügbar, verwende die erste Stärke größer als 500.</li>
+  </ol>
+ </li>
+ <li>Liegt die gewünschte Stärke unter 400, verwende die erste Stärke kleiner als die gewünschte. Ist keine verfügbar, verwende die erste Stärke größer als die gewünschte.</li>
+ <li>Liegt die gewünschte Stärke über 500, verwende die erste Stärke größer als die gewünschte. Ist keine verfügbar, verwende die erste Stärke kleiner als die gewünschte.</li>
+</ul>
+
+<h3 id="Die_Bedeutung_relativer_Angaben"><a name="relative_angaben">Die Bedeutung relativer Angaben</a></h3>
+
+<p>Bei der Angabe von <code>lighter</code> und <code>bolder</code> bestimmt die nachfolgende Tabelle die tatsächliche Schriftstärke. Zu beachten ist, dass hierbei nur vier Abstufungen verfügbar sind, fein (100), normal (400), fett (700) und schwarz (900).</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Gegeben</th>
+   <th><code>bolder</code></th>
+   <th><code>lighter</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th>100</th>
+   <td>400</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>200</th>
+   <td>400</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>300</th>
+   <td>400</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>400</th>
+   <td>700</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>500</th>
+   <td>700</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>600</th>
+   <td>900</td>
+   <td>400</td>
+  </tr>
+  <tr>
+   <th>700</th>
+   <td>900</td>
+   <td>400</td>
+  </tr>
+  <tr>
+   <th>800</th>
+   <td>900</td>
+   <td>700</td>
+  </tr>
+  <tr>
+   <th>900</th>
+   <td>900</td>
+   <td>700</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Zuordnung_von_Namen_und_Werten">Zuordnung von Namen und Werten</h3>
+
+<p>Die Werte 100 bis 900 entsprechen ungefähr den nachfolgenden Bezeichnungen (siehe <a href="https://docs.microsoft.com/en-us/typography/opentype/spec/os2#usweightclass">OpenType-Spezifikation</a> und <a href="https://de.wikipedia.org/wiki/Schriftschnitt#Variation_der_Schriftst%C3%A4rke">Wikipedia-Artikel zur Schriftstärke</a>):</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Wert</th>
+   <th scope="col">Deutsch</th>
+   <th scope="col">Englisch</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>100</td>
+   <td>fein</td>
+   <td>Thin (Hairline)</td>
+  </tr>
+  <tr>
+   <td>200</td>
+   <td>extraleicht</td>
+   <td>Extra Light (Ultra Light)</td>
+  </tr>
+  <tr>
+   <td>300</td>
+   <td>leicht</td>
+   <td>Light</td>
+  </tr>
+  <tr>
+   <td>400</td>
+   <td>normal</td>
+   <td>Normal (Regular)</td>
+  </tr>
+  <tr>
+   <td>500</td>
+   <td>medium</td>
+   <td>Medium</td>
+  </tr>
+  <tr>
+   <td>600</td>
+   <td>halbfett</td>
+   <td>Semi Bold (Demi Bold)</td>
+  </tr>
+  <tr>
+   <td>700</td>
+   <td>fett</td>
+   <td>Bold</td>
+  </tr>
+  <tr>
+   <td>800</td>
+   <td>extrafett</td>
+   <td>Extra Bold (Ultra Bold)</td>
+  </tr>
+  <tr>
+   <td>900</td>
+   <td>schwarz</td>
+   <td>Black (Heavy)</td>
+  </tr>
+  <tr>
+   <td>950</td>
+   <td>extraschwarz</td>
+   <td>Extra Black (Ultra Black)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Variable_Schriftarten">Variable Schriftarten</h3>
+
+<p>Die meisten Schriftarten stellen nur einige festgelegte Breiten zur Verfügung. Variable Schriftarten unterstützen hingegen eine Vielzahl von Breiten in mehr oder weniger feiner Abstufung.</p>
+
+<p>Bei variablen Schriftarten vom Typ TrueType und OpenType korrespondiert deren Eigenschaft "wght" mit der CSS-Eigenschaft <code>font-weight</code> und wird von Browsern – sofern unterstützt –  entsprechend eingesetzt.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: html">&lt;p&gt;
+  Alice fing an sich zu langweilen; sie saß schon
+  lange bei ihrer Schwester am Ufer und hatte nichts
+  zu tun. Das Buch, das ihre Schwester las, gefiel
+  ihr nicht, denn es waren weder Bilder noch Gespräche
+  darin. »Und was nützen Bücher,« dachte Alice,
+  »ohne Bilder und Gespräche?«
+&lt;/p&gt;
+
+&lt;div&gt;Ich bin breiter.&lt;br/&gt;
+  &lt;span&gt;Ich bin schmaler.&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush:css">/* Absatz soll breiter sein. */
+p {
+  font-weight: bold;
+}
+
+/* Der Text im div soll zwei Schritte breiter
+   als normal sein, aber nicht so breit wie
+   ein normales breit (bold). */
+div {
+ font-weight: 600;
+}
+
+/* Der Text im span soll einen Schritt schmaler
+   sein als jener seines Elternelements. */
+span {
+  font-weight: lighter;
+}</pre>
+
+<p>{{EmbedLiveSample("Beispiele","400","300")}}</p>
+
+<h2 id="Notes" name="Notes">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'font-weight')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>font-weight</code> ist animierbar</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#font-weight', 'font-weight')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2>
+
+<p>{{Compat("css.properties.font-weight")}}</p>
diff --git a/files/de/web/css/font/index.html b/files/de/web/css/font/index.html
new file mode 100644
index 0000000000..6e0fecf56b
--- /dev/null
+++ b/files/de/web/css/font/index.html
@@ -0,0 +1,176 @@
+---
+title: font
+slug: Web/CSS/font
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/font
+---
+<p>{{CSSRef}}</p>
+
+<p>Die <code>font</code> Eigenschaft hat zwei unterschiedliche Verwendungszwecke:</p>
+
+<ol>
+ <li>Die <code>font</code> Eigenschaft kann als Kurzform für die Eigenschaften <a href="/de/docs/Web/CSS/font-style"><code>font-style</code></a>, <a href="/de/docs/Web/CSS/font-variant"><code>font-variant</code></a>, <a href="/de/docs/Web/CSS/font-weight"><code>font-weight</code></a>, <a href="/de/docs/Web/CSS/font-size"><code>font-size</code></a>, <a href="/de/docs/Web/CSS/line-height"><code>line-height</code></a> und <a href="/de/docs/Web/CSS/font-family"><code>font-family</code></a> dienen und setzt dabei, wie bei jeder Kurzform, die einzelnen Eigenschaften auf ihre Standardwerte zurück, wenn nichts weiter angegeben wird, oder</li>
+ <li>die jeweilige Schrift eines Elementes kann auf eine Systemschriftart festlegt werden. Diese Systemschriftarten können jedoch nur über die <code>font</code> Eigenschaft gesetzt werden und nicht etwa über die <a href="/de/CSS/font-family"><code>font-family</code></a> Eigenschaft, sodass <code>font</code> nicht nur als eine Kurznotation von verschiedenen Schrift-Eigenschaften anzusehen ist.</li>
+</ol>
+
+<p>Außerdem ist zu beachten, dass <code>font</code> keine weiteren Eigenschaften wie etwa <a href="/de/docs/Web/CSS/font-stretch"><code>font-stretch</code></a> oder <a href="/de/docs/Web/CSS/font-size-adjust"><code>font-size-adjust</code></a> mit einschließt und <a href="/de/docs/Web/CSS/font-size-adjust"><code>font-size-adjust</code></a> dennoch auf den Standardwert (<code>normal</code>) zurückgesetzt wird, wenn die <code>font</code> Eigenschaft notiert wird.<br>
+ Das Festlegen von <a href="/de/docs/Web/CSS/font-size"><code>font-size</code></a> sowie <a href="/de/docs/Web/CSS/font-family"><code>font-family</code></a> ist verpflichtend, sonst wird die Anweisung komplett ignoriert.</p>
+
+<ul>
+ <li>Standardwert: siehe einzelne Eigenschaften</li>
+ <li>Anwendbar auf: alle Elemente</li>
+ <li>Vererbbar: Ja</li>
+ <li>Prozentwerte: erlaubt für <code>font-size</code> und <code>line-height</code></li>
+ <li>Medium: visuell</li>
+ <li>berechneter Wert: siehe einzelne Eigenschaften</li>
+</ul>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="eval">[
+  [ &lt;<a href="/de/docs/Web/CSS/font-style">font-style</a>&gt; || &lt;<a href="/de/docs/Web/CSS/font-variant">font-variant</a>&gt; || &lt;<a href="/de/docs/Web/CSS/font-weight">font-weight</a>&gt; ]?
+  &lt;<a href="/de/docs/Web/CSS/font-size">font-size</a>&gt;
+  [ / &lt;<a href="/de/docs/Web/CSS/line-height">line-height</a>&gt; ]?
+  &lt;<a href="/de/docs/Web/CSS/font-family">font-family</a>&gt;
+]
+| caption | icon | menu | message-box | small-caption | status-bar
+| -moz-window | -moz-desktop | -moz-workspace | -moz-document | -moz-info
+| -moz-dialog | -moz-button | -moz-pull-down-menu | -moz-list | -moz-field
+| inherit</pre>
+
+<h2 id="Werte">Werte</h2>
+
+<p>Wird <code>font</code> als Kurzform verwendet, siehe einzelne Eigenschaften für die unterschiedlichen Werteangaben.</p>
+
+<h3 id="Werte_für_System-Fonts">Werte für System-Fonts</h3>
+
+<dl>
+ <dt>caption</dt>
+ <dd>Schrift, die für Beschriftungen von Kontrollelementen (Buttons, Drop-Downs, etc.) verwendet wird.</dd>
+ <dt>icon</dt>
+ <dd>Schrift, die zur Beschriftung von Icons verwendet wird.</dd>
+ <dt>menu</dt>
+ <dd>Schrift die in Menüs benutzt wird.</dd>
+ <dt>message-box</dt>
+ <dd>Schrift die in Dialogboxen verwendet wird.</dd>
+ <dt>small-caption</dt>
+ <dd>Schrift die für kleine Kontrollelemente benutzt wird.</dd>
+ <dt>status-bar</dt>
+ <dd>Schrit die in Statusleisten benutzt wird.</dd>
+</dl>
+
+<h3 id="Mozilla_Erweiterungen_für_System-Fonts">Mozilla Erweiterungen für System-Fonts</h3>
+
+<dl>
+ <dt>-moz-window</dt>
+ <dd>Schrift, die für den Inhalt in einem Fenster verwendet wird.</dd>
+ <dt>-moz-desktop</dt>
+ <dd>Schrift, die auf dem Desktop benutzt wird.</dd>
+ <dt>-moz-workspace</dt>
+ <dd>Schrift, die für ein Arbeitsplatz-Fenster verwendet wird.</dd>
+ <dt>-moz-document</dt>
+ <dd>Schrift, die für den Inhalt eines Dokumentes benutzt wird.</dd>
+ <dt>-moz-dialog</dt>
+ <dd>Schrift die in Dialogboxen verwendet wird (wie <code>message-box</code>).</dd>
+ <dt>-moz-button</dt>
+ <dd>Schrift, die für Beschriftungen von Kontrollelementen (Buttons, Drop-Downs, etc.) verwendet wird (wie <code>caption</code>).</dd>
+ <dt>-moz-pull-down-menu</dt>
+ <dd>Schrift, die für Aufklapp-Menüs benutzt wird.</dd>
+ <dt>-moz-list</dt>
+ <dd>Schrift, die in Listenmenüs verwendet wird.</dd>
+ <dt>-moz-field</dt>
+ <dd>Schrift, die in Textfeldern (z.B. <code>input</code>) verwendet wird.</dd>
+ <dt>-moz-info</dt>
+ <dd>?</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p><a class="external" href="/samples/cssref/font.html" rel="external nofollow" title="https://developer.mozilla.org/samples/cssref/font.html">Link zum Live Beispiel</a></p>
+
+<p id="Beispiel_1">Beispiel 1</p>
+
+<pre>/* Setze die Schriftgröße auf 12px und die Zeilenhöhe auf 14px, sowie die Schriftart auf sans-serif */
+p { font: 12px/14px sans-serif }
+</pre>
+
+<p id="Beispiel_2">Beispiel 2</p>
+
+<pre>/* Setze die Schriftgröße auf 80% des Elternelements und setze die Schriftart auf sans-serif */
+p { font: 80% sans-serif }
+
+/* Hat den gleichen Effekt wie: */
+p {
+  font-family: sans-serif;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: 600;
+  font-size: 80%;
+  line-height: normal;
+}
+</pre>
+
+<p id="Beispiel_3">Beispiel 3</p>
+
+<pre>/* Setze die Schriftstärke auf fett, die Textneigung auf kursiv, die Schriftgröße auf groß,
+und die Schriftart auf serif. */
+p { font: bold italic large serif }
+</pre>
+
+<p id="Beispiel_4">Beispiel 4</p>
+
+<pre>/* Benutze die gleiche Schriftart wie die Statusleiste des Fensters. */
+p { font: status-bar }
+</pre>
+
+<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th rowspan="2">Browser</th>
+   <th colspan="2">ab Version</th>
+  </tr>
+  <tr>
+   <th>Kurznotation</th>
+   <th>Systemschriften</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>3.0-4.0</td>
+   <td>4.0-5.5</td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td>1.0 (1.0)</td>
+   <td>1.0 (1.0)</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>3.5</td>
+   <td>6.0</td>
+  </tr>
+  <tr>
+   <td>Safari (WebKit)</td>
+   <td>1.0 (85)</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-ui/#system0" lang="en">CSS 3 UI #System fonts</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/fonts.html#font-shorthand" lang="en" title="http://www.w3.org/TR/CSS21/fonts.html#font-shorthand">CSS 2.1 Fonts #font</a></li>
+</ul>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/CSS/font-style"><code>font-style</code></a>, <a href="/de/docs/Web/CSS/font-variant"><code>font-variant</code></a>, <a href="/de/docs/Web/CSS/font-weight"><code>font-weight</code></a>, <a href="/de/docs/Web/CSS/font-size"><code>font-size</code></a>, <a href="/de/docs/Web/CSS/line-height"><code>line-height</code></a>, <a href="/de/docs/Web/CSS/font-family"><code>font-family</code></a></li>
+ <li><a href="/de/docs/Web/CSS/font-size-adjust"><code>font-size-adjust</code></a>, <a href="/de/docs/Web/CSS/font-stetch"><code>font-stetch</code></a></li>
+ <li><a href="/de/docs/Web/CSS/@font-face"><code>@font-face</code></a></li>
+</ul>
diff --git a/files/de/web/css/frequency/index.html b/files/de/web/css/frequency/index.html
new file mode 100644
index 0000000000..799e3fc5e3
--- /dev/null
+++ b/files/de/web/css/frequency/index.html
@@ -0,0 +1,111 @@
+---
+title: <frequency>
+slug: Web/CSS/frequency
+translation_of: Web/CSS/frequency
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Der <a href="/de/docs/Web/CSS" title="CSS">CSS</a> Datentyp <code>&lt;frequency&gt;</code> steht für eine Frequenz, wie sie bspw. bei Audio Inhalten gebraucht wird. Der Wert setzt sich susammen aus einer <span class="lang lang-en">{{cssxref("&lt;number&gt;")}}</span>, gefolgt von einer Einheit. Dazwischen darf kein Leerzeichen sein.</p>
+
+<p>Die folgenden Einheiten können gewählt werden:</p>
+
+<dl>
+ <dt><code><a id="Hz">Hz</a></code></dt>
+ <dd>Für eine Frequenz in Hertz.</dd>
+ <dt><code><a id="kHz">kHz</a></code></dt>
+ <dd>Für eine Frequenz in Kilohertz.</dd>
+</dl>
+
+<p>Alle Einheiten können auch den Wert <code>0</code> (<code>0kHz</code> oder <code>0Hz</code><code>) </code>annehmen, welcher unabhängig der Einheit immer dasselbe Ergebnis erzielt. Ein Wert ohne angabe einer Einheit (<code>0</code>)  ist nicht zulässig.</p>
+
+<h2 class="editable" id="Beispiele"><span>Beispiele</span></h2>
+
+<p>Gültige Werte:</p>
+
+<pre>12Hz        Positive integer.
+-456kHz     Negative integer.
+4.3Hz       Non-integer.
+14KhZ       The unit is case-insensitive, though non-SI capitalization is not recommended.
++0Hz        Zero, with a leading + and the unit.
+-0kHz       Zero, with a leading - and the unit (Though strange, this is an allowed value).
+</pre>
+
+<p>Ungültige Werte:</p>
+
+<pre>12.0        This is a <a href="/en-US/docs/Web/CSS/number" title="en/CSS/number">&lt;number&gt;</a>, not an &lt;frequency&gt;, it must have a unit.
+7 Hz        No space is allowed between the <a href="/en-US/docs/Web/CSS/number" title="en/CSS/number">&lt;number&gt;</a> and the unit.
+0           Zero values can be written without a unit only if there are <a href="/en-US/docs/Web/CSS/length" title="en/CSS/length">&lt;length&gt;</a> values, not &lt;frequency&gt;.
+</pre>
+
+<h2 id="Specifications" name="Specifications">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr style="background-color: rgb(255, 204, 255);">
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Values', '#frequency', '&lt;frequency&gt;') }}</td>
+   <td>{{ Spec2('CSS3 Values') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}} [*]</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[*] Einige Versionen von Opera unterstützten den Datentyp teilweise in einer veralteten Spezifikation.</p>
diff --git a/files/de/web/css/gradient/index.html b/files/de/web/css/gradient/index.html
new file mode 100644
index 0000000000..dcec7d40b2
--- /dev/null
+++ b/files/de/web/css/gradient/index.html
@@ -0,0 +1,91 @@
+---
+title: <gradient>
+slug: Web/CSS/gradient
+tags:
+  - CSS
+  - CSS Datentyp
+  - Grafik
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/gradient
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Der <code>&lt;gradient&gt;</code> <a href="/de/docs/CSS">CSS</a> Datentyp beschreibt ein {{cssxref("&lt;image&gt;")}}, das aus einem progressiven Verlauf zwischen zwei oder mehreren Farben besteht. Ein CSS Farbverlauf ist kein {{cssxref("&lt;color&gt;")}} Wert, aber ein Bild <a href="/de/docs/Web/CSS/image#keine_inneren_Maße">ohne innere Maße</a>; das bedeutet, es hat weder eine natürliche oder bevorzugte Größe, noch ein bevorzugtes Seitenverhältnis. Seine konkrete Größe passt sich dem Element an, dem es zugewiesen wurde.</p>
+
+<p>Es gibt drei Arten von Farbverläufen:</p>
+
+<ul>
+ <li id="linear-gradient"><em>Lineare Farbverläufe</em>, erzeugt durch die {{cssxref("linear-gradient()")}} Funktion, wo die Farbe weich entlang einer imaginären Linie verläuft.
+
+  <pre class="brush: html" style="display: none;">Ein durch einen Farbverlauf erzeugter Regenbogen
+</pre>
+
+  <pre class="brush: css">body {
+background: -moz-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
+background: -webkit-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
+background: -ms-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
+background: -o-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
+background: linear-gradient(to right,red,orange,yellow, green, blue,indigo,violet);
+}</pre>
+
+  <p>{{EmbedLiveSample('linear-gradient', 600, 20)}}</p>
+ </li>
+ <li id="radial-gradient"><em>Radiale Farbverläufe</em>, erzeugt durch die {{cssxref("radial-gradient()")}} Funktion. Je weiter sich ein Punkt vom Ursprung entfernt befindet, desto weiter entfernt ist er von der Originalfarbe.
+  <pre class="brush: html" style="display: none;">Radialer Farbverlauf
+  </pre>
+
+  <pre class="brush: css">body {
+background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255)) repeat scroll 0% 0% transparent;
+background: radial-gradient(red, yellow, rgb(30, 144, 255));
+}
+</pre>
+
+  <p>{{EmbedLiveSample('radial-gradient', 600, 20)}}</p>
+ </li>
+ <li id="repeating-gradient"><em>Wiederholende Farbverläufe</em>, welche lineare oder radiale Farbverläufe fester Größe sind, die sich solange wiederholen bis die gesamte Box gefüllt ist.
+  <pre class="brush: html" style="display: none;">Wiederholender Farbverlauf
+</pre>
+
+  <pre class="brush: css">body {
+background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);
+background: repeating-linear-gradient(to top left, red, red 5px, white 5px, white 10px);
+}  </pre>
+
+  <p>{{EmbedLiveSample('repeating-gradient', 600, 20)}}</p>
+ </li>
+</ul>
+
+<p>Wie in allen Fällen, in denen zwischen Farben interpoliert wird, werden Farbverläufe im alpha-vormultiplizierten Farbraum berechnet. Dies verhindert unerwartete Grauschattierungen, wenn sowohl Farbe als auch Deckkraft variieren.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spezifikation</th>
+   <th>Status</th>
+   <th>Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#gradients', '&lt;gradient&gt;')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>Jeder Farbverlaufstyp hat eine unterschiedliche Kompatibilitätsmatrix. Bitte daher die individuellen Artikel lesen.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Farbverläufe_in_CSS">Farbverläufe in CSS</a>, {{cssxref("linear-gradient()")}}, {{cssxref("radial-gradient()")}}, {{cssxref("repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient()")}}</li>
+</ul>
diff --git a/files/de/web/css/grid-gap/index.html b/files/de/web/css/grid-gap/index.html
new file mode 100644
index 0000000000..8e2956013f
--- /dev/null
+++ b/files/de/web/css/grid-gap/index.html
@@ -0,0 +1,177 @@
+---
+title: grid-gap
+slug: Web/CSS/grid-gap
+translation_of: Web/CSS/gap
+---
+<p><strong><code>grid-gap</code></strong>  ist die <a href="/en-US/docs/Web/CSS/Shorthand_properties">shorthand</a> CSS Eigenschaft für  {{cssxref("grid-row-gap")}} und {{cssxref("grid-column-gap")}} , welche die Spalten (gutter) zwischen Rasterreihen und Rasterspalten festlegt.</p>
+
+<pre class="brush: css no-line-numbers">/* Ein &lt;Länge&gt; Wert */
+grid-gap: 20px;
+grid-gap: 1em;
+grid-gap: 3vmin;
+grid-gap: 0.5cm;
+
+/* Ein &lt;Prozent&gt; Wert */
+grid-gap: 16%;
+grid-gap: 100%;
+
+/* Zwei &lt;Länge&gt; Werte */
+grid-gap: 20px 10px;
+grid-gap: 1em 0.5em;
+grid-gap: 3vmin 2vmax;
+grid-gap: 0.5cm 2mm;
+
+/* Ein or zwei &lt;Prozent&gt; Werte */
+grid-gap: 16% 100%;
+grid-gap: 21px 82%;
+
+/* Globale Werte */
+grid-gap: inherit;
+grid-gap: initial;
+grid-gap: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>Dieser Eigenschaft wird ein Wert für <code>&lt;'grid-row-gap'&gt;</code> zugeordnet, gefolgt von einem optionalen Wert für <code>&lt;'grid-column-gap'&gt;</code>. Falls <code>&lt;'grid-column-gap'&gt;</code> ausgelassen wird, wird diesem der gleiche Wert zugeordnet wie <code>&lt;'grid-row-gap'&gt;</code>.</p>
+
+<p><code>&lt;'grid-row-gap'&gt;</code> und <code>&lt;'grid-column-gap'&gt;</code> werden jeweils angegeben als <code>&lt;Länge&gt;</code> or als <code>&lt;Prozent&gt;</code>.</p>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>&lt;Länge&gt;</code></dt>
+ <dd>Gibt die Breite der Spalte an, welche die Grid-Linien trennt.</dd>
+ <dt><code>&lt;Prozent&gt;</code></dt>
+ <dd>Ist die prozentuale Breite der Lücke zwischen zwei Rasterlinien im Verhältnis zu der Gesamtgröße des Elements.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="HTML_Inhalt">HTML Inhalt</h3>
+
+<pre class="brush: html">&lt;div id="grid"&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS_Inhalt">CSS Inhalt</h3>
+
+<pre class="brush: css; highlight[5]">#grid {
+  display: grid;
+  height: 200px;
+  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
+  grid-gap: 20px 5px;
+}
+
+#grid &gt; div {
+  background-color: lime;
+}
+</pre>
+
+<p>{{EmbedLiveSample("Example", "100%", "200px")}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-gap", "grid-gap")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Erste Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p> </p>
+
+
+
+<p>{{Compat("css.properties.grid-gap")}}</p>
+
+<p> </p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Related CSS properties: {{cssxref("grid-row-gap")}}, {{cssxref("grid-column-gap")}}</li>
+ <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Gutters">Basic concepts of grid layout - Gutters</a></em></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/de/web/css/grid-template-areas/index.html b/files/de/web/css/grid-template-areas/index.html
new file mode 100644
index 0000000000..57ceda4481
--- /dev/null
+++ b/files/de/web/css/grid-template-areas/index.html
@@ -0,0 +1,194 @@
+---
+title: grid-template-areas
+slug: Web/CSS/grid-template-areas
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Grid
+  - CSS Property
+  - Reference
+  - Referenz
+translation_of: Web/CSS/grid-template-areas
+---
+<p>Die <strong><code>grid-template-areas</code></strong> CSS Eigenschaft spezifiziert benannte {{glossary("grid areas")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-template-areas.html")}}</div>
+
+<p class="hidden">Der Code für dieses interaktive Beispiel befindet sich in einem GitHub repository. Wenn du zum interaktiven Beispielprojekt beitragen möchtest klone bitte <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und sende uns einen pull request.</p>
+
+<p>Diese areas sind nicht mit einem bestimmten grid item assoziiert, sondern können von den grid-placement Eigenschaften {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, und ihren Kurzformen  {{cssxref("grid-row")}}, {{cssxref("grid-column")}}, und {{cssxref("grid-area")}} referenziert werden.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css no-line-numbers">/* Keyword value */
+grid-template-areas: none;
+
+/* &lt;string&gt; values */
+grid-template-areas: "a b";
+grid-template-areas: "a b b"
+                     "a c d";
+
+/* Global values */
+grid-template-areas: inherit;
+grid-template-areas: initial;
+grid-template-areas: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Der grid container definiert keine benannten grid areas.</dd>
+ <dt><code>{{cssxref("&lt;string&gt;")}}+</code></dt>
+ <dd>Für jeden seperaten String wird eine Reihe, und für jede Zelle in dem String wird eine Spalte erstellt. Mehrere benannte Zelltokens innerhalb und zwischen den Reihen sind eine einzelne benannte grid area welche die entsprechenden grid Zellen überspannt. Wenn diese Zellen kein Quader formen ist de Deklaration ungültig.</dd>
+</dl>
+
+<h3 id="Formaler_Syntax">Formaler Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<p><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 40px;"><strong>Beispiel</strong></span></font></p>
+
+<p>
+ </p><h3 id="HTML">HTML</h3>
+<p></p>
+
+<pre class="brush: html">&lt;section id="page"&gt;
+  &lt;header&gt;Header&lt;/header&gt;
+  &lt;nav&gt;Navigation&lt;/nav&gt;
+  &lt;main&gt;Main area&lt;/main&gt;
+  &lt;footer&gt;Footer&lt;/footer&gt;
+&lt;/section&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css; highlight[5-7]">#page {
+  display: grid;
+  width: 100%;
+  height: 250px;
+  grid-template-areas: "head head"
+                       "nav  main"
+                       "nav  foot";
+  grid-template-rows: 50px 1fr 30px;
+  grid-template-columns: 150px 1fr;
+}
+
+#page &gt; header {
+  grid-area: head;
+  background-color: #8ca0ff;
+}
+
+#page &gt; nav {
+  grid-area: nav;
+  background-color: #ffa08c;
+}
+
+#page &gt; main {
+  grid-area: main;
+  background-color: #ffff64;
+}
+
+#page &gt; footer {
+  grid-area: foot;
+  background-color: #8cffa0;
+}
+</pre>
+
+<h3 id="Ergebnis">Ergebnis</h3>
+
+<p><em>{{EmbedLiveSample("Example", "100%", "250px")}}</em></p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-template-areas", "grid-template-areas")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_kompatibilität">Browser kompatibilität</h2>
+
+<p> </p>
+
+<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird von struktorierten Daten generiert. Wenn du zu diesen Daten beitragen möchtest, schau unter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und sende uns einen pull request.</div>
+
+<p>{{Compat("css.properties.grid-template-areas")}}</p>
+
+<p> </p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Verwandte CSS Eigenschaften: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template")}}</li>
+ <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></em></li>
+ <li>Video Tutorial: <em><a href="http://gridbyexample.com/video/grid-template-areas/">Grid Template Areas</a></em></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/de/web/css/grid/index.html b/files/de/web/css/grid/index.html
new file mode 100644
index 0000000000..2dc160fe34
--- /dev/null
+++ b/files/de/web/css/grid/index.html
@@ -0,0 +1,184 @@
+---
+title: grid
+slug: Web/CSS/grid
+tags:
+  - CSS
+  - CSS-Eigenschaft
+  - CSS-Raster
+  - Referenz
+translation_of: Web/CSS/grid
+---
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+
+<p>Die <strong><code>grid-</code></strong>CSS-Eigenschaft ist eine <a href="/en-US/docs/Web/CSS/Shorthand_properties">Kurzschrift-Eigenschaft</a>, die alle der expliziten Gittereigenschaften ({{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}} und {{cssxref("grid-template-areas")}}) setzt, alle impliziten Gittereigenschaften ({{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}} und {{cssxref("grid-auto-flow")}}) sowie die Zwischenabstandseigenschaften ({{cssxref("grid-column-gap")}} und {{cssxref("grid-row-gap")}}) in einer einfachen Deklaration.</p>
+
+<p class="note"><strong>Hinweis: </strong>Sie können nur die expliziten <em>oder</em> die impliziten Rastereigenschaften in einer einfachen <code>grid</code>-Deklaration spezifizieren. Die Subeigenschaften, die Sie nicht spezifizieren, werden auf ihre Initialwerte gesetzt, wie für Kurzschrift üblich. Außerdem werden die Zwischenabstandseigenschaften durch diese Kurzschrift ebenfalls zurückgesetzt, obwohl diese nicht einmal gesetzt werden können.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css">/* Werte für &lt;'grid-template'&gt; */
+grid: none;
+grid: "a" 100px "b" 1fr;
+grid: [linename1] "a" 100px [linename2];
+grid: "a" 200px "b" min-content;
+grid: "a" minmax(100px, max-content) "b" 20%;
+grid: 100px / 200px;
+grid: minmax(400px, min-content) / repeat(auto-fill, 50px);
+
+/* Werte für &lt;'grid-template-rows'&gt; /
+   [ auto-flow &amp;&amp; dense? ] &lt;'grid-auto-columns'&gt;? */
+grid: 200px / auto-flow;
+grid: 30% / auto-flow dense;
+grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
+grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;
+
+/* Werte für [ auto-flow &amp;&amp; dense? ] &lt;'grid-auto-rows'&gt;? /
+   &lt;'grid-template-columns'&gt; */
+grid: auto-flow / 200px;
+grid: auto-flow dense / 30%;
+grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
+grid: auto-flow dense 40% / [line1] minmax(20em, max-content);
+
+/* Globale Werte */
+grid: inherit;
+grid: initial;
+grid: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>&lt;'grid-template'&gt;</code></dt>
+ <dd>Defines the {{cssxref("grid-template")}} including {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}} and {{cssxref("grid-template-areas")}}.</dd>
+ <dt><code>&lt;'grid-template-rows'&gt; / [ auto-flow &amp;&amp; dense? ] &lt;'grid-auto-columns'&gt;?</code></dt>
+ <dd>Sets up an auto-flow by setting the row tracks explicitly via the {{cssxref("grid-template-rows")}} property (and the {{cssxref("grid-template-columns")}} property to <code>none</code>) and specifying how to auto-repeat the column tracks via {{cssxref("grid-auto-columns")}} (and setting {{cssxref("grid-auto-rows")}} to <code>auto</code>). {{cssxref("grid-auto-flow")}} is also set to <code>column</code> accordingly, with <code>dense</code> if it’s specified.
+ <p>All other <code>grid</code> sub-properties are reset to their initial values.</p>
+ </dd>
+ <dt><code>[ auto-flow &amp;&amp; dense? ] &lt;'grid-auto-rows'&gt;? / &lt;'grid-template-columns'&gt;</code></dt>
+ <dd>Sets up an auto-flow by setting the column tracks explicitly via the {{cssxref("grid-template-columns")}} property (and the {{cssxref("grid-template-rows")}} property to <code>none</code>) and specifying how to auto-repeat the row tracks via {{cssxref("grid-auto-rows")}} (and setting {{cssxref("grid-auto-columns")}} to <code>auto</code>). {{cssxref("grid-auto-flow")}} is also set to <code>row</code> accordingly, with <code>dense</code> if it’s specified.
+ <p>All other <code>grid</code> sub-properties are reset to their initial values.</p>
+ </dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="HTML-Inhalt">HTML-Inhalt</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS-Inhalt">CSS-Inhalt</h3>
+
+<pre class="brush: css">#container {
+  display: grid;
+  grid: repeat(2, 60px) / auto-flow 80px;
+}
+
+#container &gt; div {
+  background-color: #8ca0ff;
+  width: 50px;
+  height: 50px;
+}</pre>
+
+<h3 id="Ergebnis">Ergebnis</h3>
+
+<p>{{EmbedLiveSample("Example", "100%", 150)}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid", "grid")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+{{Compat("css.properties.grid")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Verwandte CSS-Eigenschaften: {{cssxref("grid-template")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}}</li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><strong><a href="/en-US/docs/Web/CSS/Reference">CSS-Referenz</a></strong></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS-Gitterlayout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Eigenschaften</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-colunms</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossar</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Gitterlinien</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Gittertracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Gitterzelle</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Gitterbereiche</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Zwischenabstände</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Gitterzeile</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Gitterspalte</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/de/web/css/height/index.html b/files/de/web/css/height/index.html
new file mode 100644
index 0000000000..8360676aa8
--- /dev/null
+++ b/files/de/web/css/height/index.html
@@ -0,0 +1,157 @@
+---
+title: height
+slug: Web/CSS/height
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - Referenz
+translation_of: Web/CSS/height
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <strong><code>height</code></strong> CSS Eigenschaft bestimmt die Höhe des Inhaltsbereichs eines Elements. Der <a href="/de/docs/Web/CSS/Boxmodell#Inhalt">Inhaltsbereich</a> ist <em>innerhalb</em> des Innenabstands, der Rahmen und des Außenabstands des Elements.</p>
+
+<p>Die Eigenschaften {{cssxref("min-height")}} und {{cssxref("max-height")}} überschreiben <code>height</code>.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Schlüsselwortwert */
+height: auto;
+
+/* &lt;length&gt; Werte */
+height: 120px;
+height: 10em;
+
+/* &lt;percentage&gt; Wert */
+height: 75%;
+
+/* Globale Werte */
+height: inherit;
+height: initial;
+height: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Siehe {{cssxref("&lt;length&gt;")}} für mögliche Einheiten.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Definiert als eine {{cssxref("&lt;percentage&gt;")}} der Höhe des beinhaltenden Blocks.</dd>
+ <dt><code>border-box </code>{{experimental_inline}}</dt>
+ <dd>Falls angegeben, wird die vorhergehende {{cssxref("&lt;length&gt;")}} oder {{cssxref("&lt;percentage&gt;")}} auf die Rahmenbox des Elements angewendet.</dd>
+ <dt><code>content-box</code> {{experimental_inline}}</dt>
+ <dd>Falls angegeben, wird die vorhergehende {{cssxref("&lt;length&gt;")}} oder {{cssxref("&lt;percentage&gt;")}} auf die Inhaltsbox des Elements angewendet.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Der Browser berechnet und wählt die Höhe für das angegebene Element aus.</dd>
+ <dt><code>max-content</code> {{experimental_inline}}</dt>
+ <dd>Die innere bevorzugte Höhe.</dd>
+ <dt><code>min-content</code> {{experimental_inline}}</dt>
+ <dd>Die innere Minimalhöhe.</dd>
+ <dt><code>available</code> {{experimental_inline}}</dt>
+ <dd>Die Höhe des beinhaltenden Blocks minus vertikaler Außenabstand, Rahmen und Innenabstand.</dd>
+ <dt><code>fit-content</code> {{experimental_inline}}</dt>
+ <dd>Die größere der:
+ <ul>
+  <li>inneren Minimalhöhe</li>
+  <li>kleineren der inneren bevorzugten und der verfügbaren Höhe</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="red"&gt;
+  &lt;span&gt;Ich bin 50 Pixel hoch.&lt;/span&gt;
+&lt;/div&gt;
+&lt;div id="green"&gt;
+  &lt;span&gt;Ich bin 25 Pixel hoch.&lt;/span&gt;
+&lt;/div&gt;
+&lt;div id="parent"&gt;
+  &lt;div id="child"&gt;
+    &lt;span&gt;Ich bin halb so groß wie mein Elternelement.&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  width: 250px;
+  margin-bottom: 5px;
+  border: 3px solid #999999;
+}
+
+#red {
+  height: 50px;
+}
+
+#green {
+  height: 25px;
+}
+
+#parent {
+  height: 100px;
+}
+
+#child {
+  height: 50%;
+  width: 75%;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Beispiel')}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Box', '#the-width-and-height-properties', 'height')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>Fügt die Schlüsselwörter <code>max-content</code>, <code>min-content</code>, <code>available</code>, <code>fit-content</code>, <code>border-box</code> und <code>content-box</code> hinzu.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'height')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Definiert <code>height</code> als animierbar.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Fügt Unterstützung für {{cssxref("&lt;length&gt;")}} Werte hinzu und präzisiert, für welche Elemente die Eigenschaft gilt.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#height', 'height')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.height")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/CSS/Boxmodell">Boxmodell</a>, {{cssxref("width")}}, {{cssxref("box-sizing")}}, {{cssxref("min-height")}}, {{cssxref("max-height")}}</li>
+</ul>
diff --git a/files/de/web/css/hyphens/index.html b/files/de/web/css/hyphens/index.html
new file mode 100644
index 0000000000..564d3246e1
--- /dev/null
+++ b/files/de/web/css/hyphens/index.html
@@ -0,0 +1,119 @@
+---
+title: hyphens
+slug: Web/CSS/hyphens
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - Experimentell
+  - Referenz
+translation_of: Web/CSS/hyphens
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Summary" name="Summary">Übersicht</h2>
+
+<p>Die <code>hyphens </code>Eigenschaft regelt die automatische Silbentrennung. Dazu ist das HTML Attribut <code>lang</code>, bzw. <font face="Courier New">xml:lang </font>unter XML<font face="Courier New">,</font> zwingend notwendig.</p>
+
+<div class="note"><strong>Hinweis:</strong> Wie die Silbentrennung umgesetzt wird kann von Browser zu Browser, bzw. von Sprache zu Sprache, variieren.</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="twopartsyntaxbox notranslate">{{csssyntax}}
+</pre>
+
+<pre class="notranslate">hyphens: none
+hyphens: manual
+hyphens: auto
+
+hyphens: inherit
+</pre>
+
+<h3 id="Values" name="Values">Werte</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Keine Silbentrennung: Wörter werden nicht getrennt und automatische Zeilenumbrüche sind nur bei Leerzeichen möglich.</dd>
+ <dt><code>manual</code></dt>
+ <dd>Manuelle Silbentrennung: Wörter werden nur dann getrennt, wenn dies definiert wurde (siehe {{anch("Umbrüche manuell definieren")}}).</dd>
+ <dt><code>auto</code></dt>
+ <dd>Automatische Silbentrennung: Der Browser trennt die Wörter automatisch. Manuell definierte Umbrüche werden dabei vorgezogen (siehe {{anch("Umbrüche manuell definieren")}}).</dd>
+</dl>
+
+<h2 id="Umbrüche_manuell_definieren">Umbrüche manuell definieren</h2>
+
+<p>Es gibt zwei Möglichkeiten, um Wörter manuell zu trennen. Dafür werden die beiden folgenden Unicode-Zeichen verwendet:</p>
+
+<dl>
+ <dt>U+2010 (Bindestrich)</dt>
+ <dd>Dieser Bindestrich ist <u>immer</u> sichtbar, auch wenn das Wort gar nicht getrennt werden muss.</dd>
+ <dt>U+00AD (SHY)</dt>
+ <dd>Dieses Zeichen ist unsichtbar und kennzeichnet nur eine mögliche Trennstelle. Sobald eine Trennung notwendig wird, wird ein Bindestrich sichtbar. In HTML lässt sich das Zeichen mit <code>&amp;shy;</code> einfügen.</dd>
+</dl>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>This CSS snippet creates three classes, one for each possible configuration of the <code>hyphens</code> property.</p>
+
+<pre class="brush: html notranslate">&lt;ul&gt;
+  &lt;li&gt;&lt;code&gt;none&lt;/code&gt;: no hyphen; overflow if needed
+    &lt;p lang="en" class="none"&gt;An extreme&amp;shy;ly long English word&lt;/p&gt;
+  &lt;/li&gt;
+  &lt;li&gt;&lt;code&gt;manual&lt;/code&gt;: hyphen only at &amp;amp;hyphen; or &amp;amp;shy; (if needed)
+    &lt;p lang="en" class="manual"&gt;An extreme&amp;shy;ly long English word&lt;/p&gt;
+  &lt;/li&gt;
+  &lt;li&gt;&lt;code&gt;auto&lt;/code&gt;: hyphen where the algo is deciding (if needed)
+    &lt;p lang="en" class="auto"&gt;An extreme&amp;shy;ly long English word&lt;/p&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<pre class="brush: css notranslate">p {
+  width: 55px;
+  border: 1px solid black;
+ }
+p.none {
+  -moz-hyphens: none;
+  hyphens: none;
+}
+p.manual {
+  -moz-hyphens: manual;
+  hyphens: manual;
+}
+p.auto {
+  -moz-hyphens: auto;
+  hyphens: auto;
+}
+</pre>
+
+<p>{{EmbedLiveSample("Beispiel", "100%", "470'")}}</p>
+
+<h2 id="Spezifikations">Spezifikations</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#hyphens', 'hyphens')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompatibilität</h2>
+
+<p>{{Compat("css.properties.hyphens")}}</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{Cssxref("content")}}</li>
+</ul>
diff --git a/files/de/web/css/id-selektoren/index.html b/files/de/web/css/id-selektoren/index.html
new file mode 100644
index 0000000000..921e391d80
--- /dev/null
+++ b/files/de/web/css/id-selektoren/index.html
@@ -0,0 +1,72 @@
+---
+title: ID-Selektoren
+slug: Web/CSS/ID-Selektoren
+tags:
+  - CSS
+  - CSS Referenz
+  - Einsteiger
+  - Selektoren
+translation_of: Web/CSS/ID_selectors
+---
+<div>{{CSSRef("Selectors")}}</div>
+
+<p>In einem HTML Dokument matchen CSS ID-Selektoren ein Element basierend auf den Inhalten des {{htmlattrxref("id")}} Attributs des Elements, welches exakt dem Wert des angegebenen Selektors entsprechen muss.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">#id_value { <em>Stileigenschaften</em> }</pre>
+
+<p>Beachte, dass dies äquivalent zu folgendem {{cssxref("Attributselektoren", "Attributselektor")}} ist:</p>
+
+<pre class="syntaxbox">[id=id_value] { <em>Stileigenschaften</em> }</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: css">span#identified {
+  background-color: DodgerBlue;
+}
+</pre>
+
+<pre class="brush: html">&lt;span id="identified"&gt;Hier ist ein Span mit Text.&lt;/span&gt;
+&lt;span&gt;Hier ist ein weiterer.&lt;/span&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Beispiel", 200, 50)}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#id-selectors", "ID selectors")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Selectors", "#id-selectors", "ID selectors")}}</td>
+   <td>{{Spec2("CSS3 Selectors")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "selector.html#id-selectors", "ID selectors")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1", "#id-as-selector", "ID selectors")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.selectors.id")}}
diff --git a/files/de/web/css/image-orientation/index.html b/files/de/web/css/image-orientation/index.html
new file mode 100644
index 0000000000..5ef67d6ea1
--- /dev/null
+++ b/files/de/web/css/image-orientation/index.html
@@ -0,0 +1,98 @@
+---
+title: image-orientation
+slug: Web/CSS/image-orientation
+tags:
+  - CSS
+  - CSS Bild
+  - CSS Eigenschaft
+  - Referenz
+translation_of: Web/CSS/image-orientation
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Mit der <a href="/en-US/docs/CSS">CSS</a> Eigenschaft <code>image-orientation</code> kann die Ausrichtung eines Bildes geändert werden.</p>
+
+<div class="note style-wrap">
+<p><strong>Hinweis:</strong></p>
+
+<ul>
+ <li><span id="result_box" lang="de"><span class="hps">Diese Eigenschaft</span> <span class="hps">ist nicht dazu gedacht</span> Bilder beliebig zu drehen<span class="hps"> sondern eine</span><span class="hps"> fehlerhaften</span> <span class="hps">Ausrichtung</span> <span class="hps">zu korrigieren.</span> <span class="hps">Deshalb wird</span><span class="hps"> zur nächsten</span> <span class="hps">Vierteldrehung</span> <span class="hps">gerundet.</span></span></li>
+ <li><span id="result_box" lang="de"><span class="hps">Ebenso</span> <span class="hps">ist diese Eigenschaft</span> <span class="alt-edited hps">nicht dazu vorgesehen</span><span class="alt-edited"> das Layout</span> <span class="hps">zu verändern,</span> d<span class="alt-edited hps">a sich</span> </span><code>image-orientation</code><span lang="de"> <span class="hps">nur auf</span> <span class="hps">Bilder auswirkt.</span></span></li>
+</ul>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">image-orientation: 0deg;
+image-orientation: 6.4deg;     /* Wird zu 0deg gerundet */
+image-orientation: -90deg;     /* Wie 270deg, der normalisiert berechnete Wert */
+image-orientation: from-image; /* EXIF Daten des Bildes verwenden */
+image-orientation: 90deg flip; /* Um 90deg rotieren und horizontal spiegeln */
+image-orientation: flip;       /* Horizontales Spiegeln ohne Drehung */
+
+/* Globale Werte */
+image-orientation: inherit;
+image-orientation: initial;
+image-orientation: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>from-image</code></dt>
+ <dd><span id="result_box" lang="de"><span class="hps">Das Bild wird entsprechend der enthaltenen EXIF-Informationen gedreht.</span></span></dd>
+ <dt><code>&lt;angle&gt;</code></dt>
+ <dd>Die {{cssxref("&lt;angle&gt;")}} der anzuwendenden Rotation. Wird zu den nächsten <code>90deg</code> (<code>0.25turn</code>) gerundet.</dd>
+ <dt><code>flip</code></dt>
+ <dd>Das Bild wird horizontal gespiegelt, nachdem die Drehung des {{cssxref("&lt;angle&gt;")}} Wertes angewendet wird. Wenn keine {{cssxref("&lt;angle&gt;")}} gegeben ist, wird <code>0deg</code> benutzt.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: html">&lt;img src="arrow.png" <span class="highATT">alt=</span><span class="highVAL">"Pfeil" </span>style="image-orientation: 180deg;"&gt;</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Images', '#image-orientation', 'image-orientation')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td>Die Schlüsselwörter <code>from-image</code> und <code>flip</code> wurden hinzugefügt.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#image-orientation', 'image-orientation')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("css.properties.image-orientation")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Andere bildbezogene CSS-Eigenschaften {{cssxref("object-fit")}}, {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.</li>
+</ul>
diff --git a/files/de/web/css/image-rendering/index.html b/files/de/web/css/image-rendering/index.html
new file mode 100644
index 0000000000..3abab150d4
--- /dev/null
+++ b/files/de/web/css/image-rendering/index.html
@@ -0,0 +1,114 @@
+---
+title: image-rendering
+slug: Web/CSS/image-rendering
+tags:
+  - CSS
+  - CSS Bild
+  - CSS Eigenschaft
+  - Experimentell
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+  - SVG
+translation_of: Web/CSS/image-rendering
+---
+<div>
+<div>{{CSSRef}}</div>
+
+<div>{{SeeCompatTable}}</div>
+
+<h2 id="Zusammenfassung" style="line-height: 30px; font-size: 2.14285714285714rem;">Zusammenfassung</h2>
+
+<p>Das <code>image-rendering</code> <a href="/de-DE/docs/CSS" title="CSS">CSS</a> Property schlägt dem user agent vor, wie er eingebundene Bilder darstellen sollte. Dieses Property gilt für alle Bilder welche einem <a href="/de-DE/docs/Web/HTML">HTML</a> untergeordnet sind, betrifft allerdings nur skalierte Bilder.  Wenn ein Bild zum Beispiel 100x1000px groß ist, es aber mit einer Größe von 200x200px eingebunden wird, so Rechnet der Browser nach dem durch das Property festgelegten Algorythmus um.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" style="line-height: 30px; font-size: 2.14285714285714rem;">Syntax</h2>
+
+<pre class="twopartsyntaxbox" style="font-size: 14px;">{{csssyntax}}</pre>
+
+<pre style="font-size: 14px;">image-rendering: auto
+image-rendering: crisp-edges
+image-rendering: pixelated
+
+image-rendering: inherit
+</pre>
+
+<h3 id="Values" style="line-height: 24px; font-size: 1.71428571428571rem;">Values</h3>
+
+<dl>
+ <dt><code><strong>auto</strong></code></dt>
+ <dd>Default value, the image should be scaled with an algorithm that maximizes the appearance of the image. In particular, scaling algorithms that "smooth" colors are acceptable, such as bilinear interpolation. This is intended for images such as photos. Since version 1.9 (Firefox 3.0), Gecko uses<em> bilinear </em>resampling (high quality).</dd>
+</dl>
+
+<dl>
+</dl>
+
+<dl>
+ <dt><code><strong>crisp-edges</strong></code></dt>
+ <dd>The image must be scaled with an algorithm that preserves contrast and edges in the image, and which does not smooth colors or introduce blur to the image in the process. This is intended for images such as pixel art.</dd>
+ <dt><code><strong>pixelated</strong></code></dt>
+ <dd>When scaling the image up, the "nearest neighbor" or similar algorithm must be used, so that the image appears to be composed of large pixels. When scaling down, this is the same as 'auto'.</dd>
+</dl>
+
+<div class="note">The values <code>optimizeQuality</code> and <code>optimizeSpeed</code> present in early draft (and coming from its SVG counterpart) are defined as synonyms for the <code>auto</code> value.</div>
+
+<h2 id="Examples" style="line-height: 30px; font-size: 2.14285714285714rem;">Examples</h2>
+
+<pre class="brush:css;" style="font-size: 14px;">/* applies to GIF and PNG images; avoids blurry edges */
+
+img[src$=".gif"], img[src$=".png"] {
+                   image-rendering: -moz-crisp-edges;         /* Firefox */
+                   image-rendering:   -o-crisp-edges;         /* Opera */
+                   image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
+                   image-rendering: crisp-edges;
+                   -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
+                 }
+
+</pre>
+
+<pre class="brush:css;" style="font-size: 14px;">div {
+        background: url(chessboard.gif) no-repeat 50% 50%;
+        image-rendering: -moz-crisp-edges;         /* Firefox */
+        image-rendering:   -o-crisp-edges;         /* Opera */
+        image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
+        image-rendering: crisp-edges;
+        -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
+}</pre>
+
+<h3 id="Live_Examples" style="line-height: 24px; font-size: 1.71428571428571rem;">Live Examples</h3>
+
+<h4 id="image-rendering_auto" style="line-height: 18px; font-size: 1.28571428571429rem;">image-rendering: auto;</h4>
+
+<p style="image-rendering: auto;">78% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 39px; width: 39px;"> 100% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 50px; width: 50px;"> 138% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 69px; width: 69px;"> downsized <img alt="hut.jpg" src="/@api/deki/files/3613/=hut.jpg" style="height: 89px; width: 89px;"> upsized <img alt="blumen.jpg" src="/@api/deki/files/3611/=blumen.jpg" style="height: 89px; width: 77px;"></p>
+
+<h4 id="image-rendering_pixelated_(-ms-interpolation-mode_nearest-neighbor)" style="line-height: 18px; font-size: 1.28571428571429rem;">image-rendering: pixelated; (-ms-interpolation-mode: nearest-neighbor)</h4>
+
+<p>78% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 39px; width: 39px;"> 100% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 50px; width: 50px;"> 138% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 69px; width: 69px;"> downsized <img alt="hut.jpg" src="/@api/deki/files/3613/=hut.jpg" style="height: 89px; width: 89px;"> upsized <img alt="blumen.jpg" src="/@api/deki/files/3611/=blumen.jpg" style="height: 89px; width: 77px;"></p>
+
+<h4 id="image-rendering_crisp-edges_(-webkit-optimize-contrast)" style="line-height: 18px; font-size: 1.28571428571429rem;">image-rendering: crisp-edges; (-webkit-optimize-contrast)</h4>
+
+<p style="image-rendering: -webkit-optimize-contrast;">78% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 39px; width: 39px;"> 100% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 50px; width: 50px;"> 138% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 69px; width: 69px;"> downsized <img alt="hut.jpg" src="/@api/deki/files/3613/=hut.jpg" style="height: 89px; width: 89px;"> upsized <img alt="blumen.jpg" src="/@api/deki/files/3611/=blumen.jpg" style="height: 89px; width: 77px;"></p>
+
+<h2 id="Specifications" style="line-height: 30px; font-size: 2.14285714285714rem;">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#the-image-rendering', 'image-rendering')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Though initially close from the SVG <code>image-rendering</code> property, the values are quite different now.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility" style="line-height: 30px; font-size: 2.14285714285714rem;">Browser compatibility</h2>
+{{Compat("css.properties.image-rendering")}}</div>
diff --git a/files/de/web/css/image/index.html b/files/de/web/css/image/index.html
new file mode 100644
index 0000000000..d84257fc23
--- /dev/null
+++ b/files/de/web/css/image/index.html
@@ -0,0 +1,129 @@
+---
+title: <image>
+slug: Web/CSS/image
+tags:
+  - CSS
+  - CSS Bilder
+  - CSS Datentyp
+  - Grafik
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/image
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Der <code>&lt;image&gt;</code> <a href="/de/docs/Web/CSS">CSS</a> Datentyp repräsentiert ein 2D Bild. Es gibt zwei Arten von Bildern in CSS: einfache statische Bilder, die meist über einen URL referenziert werden, und dynamisch generierte Bilder wie Farbverläufe oder Abbildungen von Teilen der HTML Struktur.</p>
+
+<p>CSS kann verschiedene Arten von Bildern verarbeiten:</p>
+
+<ul>
+ <li>Bilder mit <em>inneren Maßen</em>, d. h. einer natürlichen Größe, wie bei einem JPEG Bild, das feste Maße hat.</li>
+ <li>Bilder mit <em>mehreren inneren Maßen</em>, die in mehreren Versionen innerhalb der Datei existieren, wie bei einigen ICO Formaten. In diesem Fall entspricht das innere Maß dem flächenmäßig größten Bild mit dem Seitenverhältnis, das dem der beinhaltenden Box am nächsten kommt.</li>
+ <li>Bilder ohne innerem Maß, die jedoch ein <em>inneres Seitenverhältnis</em> zwischen ihrer Breite und Höhe haben, wie beispielsweise einige Vektorbilder im SVG Format.</li>
+ <li>Bilder ohne <em><a>innere Maße noch innerem Seitenverhältnis</a></em>, wie beispielsweise CSS Farbverläufen.</li>
+</ul>
+
+<p>CSS bestimmt die <em>konkrete Objektgröße</em> anhand dieser <em>inneren Maße</em>, der <em>angegebenen Größe </em>definiert durch CSS Eigenschaften wie {{cssxref("width")}}, {{cssxref("height")}} oder {{cssxref("background-size")}} und der <em>Standard Objektgröße</em>, die durch die Art der Eigenschaft definiert wird, in der das Bild verwendet wird:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Objektart</th>
+   <th>Standard Objektgröße</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{cssxref("background-image")}}</td>
+   <td>Die Größe des Hintergrund Positionierungsbereichs des Elements</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("list-style-image")}}</td>
+   <td>Die Größe eines Zeichens in <code>1em</code></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-image")}}</td>
+   <td>Die Größe des Randbildbereichs des Elements</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("cursor")}}</td>
+   <td>Eine durch den Browser definierte Größe, die der normalen Größe eines Mauszeigers auf dem benutzten System entspricht</td>
+  </tr>
+  <tr>
+   <td>Ersetzter Inhalt wie die Kombination der CSS Eigenschaft {{cssxref("content")}} mit den CSS Pseudoelementen {{cssxref("::after")}} und {{cssxref("::before")}}</td>
+   <td>Ein <code>300px</code><code> × 150px</code> Rechteck</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Die konkrete Objektgröße wird mit Hilfe des folgenden Algorithmus berechnet:</p>
+
+<ul>
+ <li>Falls die angegebene Größe sowohl Breite als auch Höhe definiert, werden diese Werte als die konkrete Objektgröße verwendet.</li>
+ <li>Falls die angegebene Größe einen der beiden Werte für Breite und Höhe definiert, wird der fehlende Wert durch das innere Seitenverhältnis bestimmt, sofern vorhanden, die inneren Maße, falls der angegebene Wert passt, oder es wird die Standard Objektgröße für den fehlenden Wert verwendet.</li>
+ <li>Falls die angegebene Größe weder Breite noch Höhe definiert, wird die konkrete Objektgröße so berechnet, dass sie dem inneren Seitenverhältnis der Bilder entspricht, jedoch die Standard Objektgröße in keinem Maß übersteigt. Falls das Bild kein inneres Seitenverhältnis hat, wird das innere Seitenverhältnis des Objekts verwendet, dem es zugewiesen ist; falls das Objekt keines hat, wird die fehlende Breite oder Höhe von der Standard Objektgröße herangezogen.</li>
+</ul>
+
+<p>Bilder können von diversen CSS Eigenschaften verwendet werden, wie {{cssxref("background-image")}}, {{cssxref("border-image")}}, {{cssxref("content")}}, {{cssxref("list-style-image")}} oder {{cssxref("cursor")}}.</p>
+
+<div class="note"><strong>Hinweis:</strong> Nicht alle Browser unterstützen alle Arten von Bildern in allen Eigenschaften. Der Unterpunkt <a href="#Browser_Kompatibilität">Browser Kompatibilität</a> enhält hierzu eine detaillierte Liste.</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>Ein <code>&lt;image&gt;</code> CSS Datentyp kann die folgenden Bilder repräsentieren:</p>
+
+<ul>
+ <li>Ein Bild, dass durch einen {{cssxref("&lt;uri&gt;")}} CSS Datentyp und die <code>url()</code> Funktion angegeben wird</li>
+ <li>Einen CSS {{cssxref("&lt;gradient&gt;")}};</li>
+ <li>Einen Teil einer Seite, der durch die {{cssxref("element", "element()")}} Funktion definiert wird.</li>
+</ul>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Dies sind gültige Bildwerte:</p>
+
+<pre>url(test.jpg)                          Die url() Funktion, sofern test.jpg ein Bild ist
+linear-gradient(to bottom, blue, red)  Ein &lt;gradient&gt;
+element(#colonne3)                     Ein Teil einer Seite, der durch die element() Funktion referenziert wird,,
+                                       sofern 'colonne3' eine existierende CSS ID auf der Seite darstellt.
+</pre>
+
+<p>Dies sind ungültige Bildwerte:</p>
+
+<pre>cervin.jpg                             Eine Bilddatei muss durch die url() Funktion angegeben werden.
+url(report.pdf)                        Die Datei, die über die url() Funktion angesprochen wird, muss ein Bild sein.
+element(#fakeid)                       Falls 'fakeid' keine in der Seite existierende CSS ID darstellt.
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#image-notation', 'image()')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Vor <a href="/en-US/docs/Web/CSS/CSS3">CSS3</a> gab es keinen explizit definierten <code>&lt;image&gt;</code> Datentyp. Bilder konnten nur durch die <code>url()</code> Funktion definiert werden.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.types.image")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Farbverläufe_in_CSS">Farbverläufe in CSS</a>, {{cssxref("&lt;gradient&gt;")}}, {{cssxref("linear-gradient","linear-gradient()")}}, {{cssxref("radial-gradient","radial-gradient()")}}, {{cssxref("repeating-linear-gradient","repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient","repeating-radial-gradient()")}};</li>
+ <li>{{cssxref("element","element()")}};</li>
+</ul>
diff --git a/files/de/web/css/index.html b/files/de/web/css/index.html
new file mode 100644
index 0000000000..356ca6e639
--- /dev/null
+++ b/files/de/web/css/index.html
@@ -0,0 +1,100 @@
+---
+title: CSS
+slug: Web/CSS
+tags:
+  - CSS
+  - Design
+  - Landing
+  - Layout
+  - Referenz
+translation_of: Web/CSS
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong>Cascading Style Sheets</strong>, meistens als <strong>CSS</strong> abgekürzt, ist eine Beschreibungssprache, die das Erscheinungsbild einer in {{Glossary("HTML")}} oder {{Glossary("XML")}} formatierten Datei (inklusive verschiedener XML-Sprachen wie <a href="/de/docs/SVG" rel="internal">SVG</a> oder <a class="new " href="/de/docs/XHTML" rel="internal">XHTML</a>) festlegt. CSS beschreibt, wie ein strukturiertes Element am Bildschirm, auf Papier, in Sprache oder anderen Medien dargestellt wird.</span></p>
+
+<p><strong>CSS</strong> ist eine der Kernsprachen des <em>Open Web</em> und basiert auf standardisierten <a class="external" href="http://w3.org/Style/CSS/#specs">W3C-Spezifikationen</a>. Vorher wurden die verschieden Tiele der CSS-Spezifikation synchron entwickelt, was die Versionierung der letzten Empfehlung ermöglichte. Du hast vielleicht von CSS1, CSS2.1 und CSS3 gehört. CSS4 wurde jedoch nie eine offizielle Version.</p>
+
+<p>Seit CSS3 wuchs der Umfang der Spezifikation beträchtlich und der Fortschritt an den verschiedenen CSS-Modulen begann, so sehr abzuweichen, dass es effizienter wurde, <a href="https://www.w3.org/Style/CSS/current-work">Empfehlungen getrennt pro Modul zu entwickeln und zu veröffentlichen</a>.</p>
+
+<section id="sect1">
+<ul class="card-grid">
+ <li><span>CSS-Einführung</span>
+
+  <p>Eine <a href="/de/docs/CSS/Getting_Started">Schritt-für-Schritt-Einführung</a> für Anfänger, welche die grundlegenden Informationen enthält.</p>
+ </li>
+ <li><span>CSS-Tutorial</span>Unser <a href="/de/docs/Learn/CSS">CSS-Lernbereich</a> enthält eine Vielzahl von Tutorials, die alle Grundlagen behandeln und dich vom Anfänger- zum Profiniveau bringen.</li>
+ <li><span>CSS-Referenz</span>
+  <p>Eine <a href="/de/docs/CSS_Referenz" title="CSS Referenz">vollständige Übersicht</a> für erfahrene Webentwickler, die alle Eigenschaften und Konzepte von CSS beschreibt.</p>
+ </li>
+</ul>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Tutorials">Tutorials</h2>
+
+<p>Unser <a href="/de/docs/Learn/CSS">CSS-Lernbereich</a> bietet mehrere Module, die dir CSS von Grund auf beibringen — kein Vorwissen wird benötigt.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/First_steps">Erste Schritte mit CSS</a></dt>
+ <dd>CSS (für englisch „Cascading Style Sheets“) wird zur Gestaltung und zum Layout von Webseiten verwendet — zum Beispiel, um Schriftart, Farbe, Größe und Abstand des Inhalts zu verändern, ihn in mehrere Spalten aufzuteilen oder Animationen und andere dekorative Merkmale hinzuzufügen. Dieses Modul stellt einen sanften Anfang auf deinem Weg zur Beherrschung von CSS bereit, mit den Grundlagen, wie es funktioniert, wie die Syntax aussieht, und wie du anfangen kannst, es zu nutzen, um Gestaltung zu HTML hinzuzufügen.</dd>
+ <dt><a href="/de/docs/Learn/CSS/Building_blocks">CSS-Bausteine</a></dt>
+ <dd>Dieses Modul macht weiter, wo <a href="/en-US/docs/Learn/CSS/First_steps">„Erste Schritte mit CSS“</a> aufgehört hat — jetzt, wo du mit der Sprache und ihrer Syntax vertraut geworden bist und etwas grundlegende Erfahrung gesammelt hast, ist es Zeit, ein bisschen tiefer einzutauchen. Dieses Modul beschäftigt sich mit der Kaskade und Vererbung, allen verfügbaren Selektorarten, Einheiten, Festlegung von Größen, Gestaltung des Hintergrunds und der Kanten, Debugging, und vielem mehr.</dd>
+ <dd>Das Ziel ist hier, dir eine Werkzeugsammlung zum Schreiben kompetenten CSS-Codes bereitzustellen und dir zu helfen, die grundlegende Theorie zu verstehen, bevor es mit spezifischeren Themen wie <a href="/en-US/docs/Learn/CSS/Styling_text">Textgestaltung</a> und <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS-Layout</a> weitergeht.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text">Textgestaltung</a></dt>
+ <dd>Nach der Behandlung der Grundlagen der Sprache CSS ist das nächste Thema, auf das du dich konzentrierst, Text zu gestalten — eines der gewöhnlichsten Dinge, die du mit CSS tun wirst. Hier sehen wir uns die Grundlagen der Textgestaltung an, zum Beispiel das Verändern der Schriftart, Schriftdicke, Kursivschrift, Zeilen- und Buchstabenabstand, Schlagschatten und andere Textmerkmale. Wir runden das Modul ab, indem wir uns das Anwenden eigener Schriften auf die Seite und die Gestaltung von Listen und Links anschauen.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS-Layout</a></dt>
+ <dd>An dieser Stelle haben wir uns bereits die CSS-Grundlagen, Textgestaltung und, wie Boxen, in denen sich dein Inhalt befindet, gestaltet und manipuliert werden können, angeschaut. Jetzt ist es an der Zeit, sich anzusehen, wie Boxen in Bezug auf den Ansichtsbereich und einander am richtigen Ort platziert werden. Wir haben die notwendigen Voraussetzungen behandelt, weshalb wir jetzt tief ins CSS-Layout eintauchen können, indem wir uns verschiedene Bildschirmeinstellungen, moderne Layoutwerkzeuge wie Flexbox, CSS-Grids und Positionierung und ein paar der alten Methoden, über die du vielleicht noch etwas wissen möchtest, anschauen.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Howto">CSS nutzen, um übliche Probleme zu lösen</a></dt>
+ <dd>Dieses Modul beinhaltet Links zu Inhaltsabschnitten, die erklären, wie CSS genutzt werden kann, um sehr gewöhnliche Probleme beim Erstellen einer Webseite zu lösen.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 id="Referenzen">Referenzen</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/CSS/CSS_Referenz">CSS-Referenz</a>: Diese ausführliche Referenz für erfahrene Webentwickler beschreibt jede CSS-Eigenschaft und jedes CSS-Konzept.</li>
+ <li>CSS-Schlüsselkonzepte:
+  <ul>
+   <li>Die <a href="/en-US/docs/Web/CSS/Syntax">Syntax und Form der Sprache</a></li>
+   <li><a href="/de/docs/Web/CSS/Spezifität">Spezifität</a>, <a href="/de/docs/Web/CSS/Vererbung">Vererbung</a> und <a href="/en-US/docs/Web/CSS/Cascade">die Kaskade</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Values_and_Units">CSS-Einheiten und -Werte</a></li>
+   <li><a href="/de/docs/Web/CSS/CSS_Boxmodell/Einführung_in_das_CSS_Boxmodell">Boxmodell</a> und <a href="/de/docs/Web/CSS/CSS_Boxmodell/Zusammenfallen_von_Außenabständen_meistern">Zusammenfallen von Außenabständen</a></li>
+   <li>Der <a href="/en-US/docs/Web/CSS/Containing_block">beinhaltende Block</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">Stapel-</a> und <a href="/en-US/docs/Web/Guide/CSS/Block_formatting_context">Blockformatierungskontexte</a></li>
+   <li><a href="/de/docs/Web/CSS/Initialwert">Initial-</a>, <a href="/de/docs/Web/CSS/berechneter_Wert">berechnete</a>, <a href="/en-US/docs/Web/CSS/used_value">genutzte</a> und <a href="/de/docs/Web/CSS/tatsächlicher_Wert">tatsächliche</a> Werte</li>
+   <li><a href="/en-US/docs/Web/CSS/Shorthand_properties">CSS-Shorthand-Eigenschaften</a></li>
+   <li><a href="/de/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS-Flexible-Box-Layout</a></li>
+   <li><a href="/de/docs/Web/CSS/CSS_Grid_Layout">CSS-Grid-Layout</a></li>
+   <li><a href="/de/docs/Web/CSS/Media_Queries">Media-Queries</a></li>
+   <li><a href="/de/docs/Web/CSS/animation">Animation</a></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Kochbuch">Kochbuch</h2>
+
+<p>Das <a href="/en-US/docs/Web/CSS/Layout_cookbook">CSS-Layout-Cookbook</a> versucht, Rezepte für übliche Layoutmuster zusammenzubringen, Dinge, die du in deiner Seite implementieren müssen könntest. Zusätzlich zur Bereitstellung von Code, den du als Anfangspunkt in deinen Projekten nutzen kannst, heben diese Rezepte die verschieden Möglichkeiten, wie Layoutspezifikationen genutzt werden können, und die Entscheidungen, die du als Entwickler treffen kannst, hervor.</p>
+
+<h2 class="Tools" id="Tools" name="Tools">Werkzeuge für die CSS-Entwicklung</h2>
+
+<ul>
+ <li>Der <a class="external" href="http://jigsaw.w3.org/css-validator/">W3C-CSS-Validierungsservice</a> überprüft, ob ein angegebenes CSS gültig ist. Der Service unter <a href="//www.OnlineWebCheck.com/">OnlineWebCheck.com</a> macht das gleiche. Dies sind unschätzbare Debuggingtools.</li>
+ <li>Die „<a href="/de/docs/Tools">Firefox Developer Tools</a>“ erlauben das Live-Ansehen und Bearbeiten des CSS einer Seite über den <a href="/de/docs/Tools/Seiten_Inspektor">Inspektor</a> und den <a href="/de/docs/Tools/Style_Editor">Style-Editor</a>.</li>
+ <li>Die <a class="link-https" href="https://addons.mozilla.org/de/firefox/addon/web-developer/">Web-Developer-Erweiterung</a> für Firefox erlaubt es ebenfalls, CSS auf beobachteten Seiten live anzusehen.</li>
+ <li>Die Web-Community hat verschiedene andere <a href="/de/docs/Web/CSS/Tools">CSS-Tools</a> für deine Nutzung erstellt.</li>
+</ul>
+</div>
+</div>
+</section>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/de/docs/Web/Demos_of_open_web_technologies#CSS">CSS-Demos</a>: Bekomme einen kreativen Boost, indem du Beispiele der neuesten CSS-Technologien in Aktion erkundest.</li>
+ <li>Websprachen, auf die CSS häufig angewendet wird: <a href="/de/docs/HTML">HTML</a>, <a href="/de/docs/SVG">SVG</a>, <a href="/de/docs/XHTML">XHTML</a> und <a href="/de/docs/XML">XML</a>.</li>
+ <li>Mozilla-Technologien, die ausgiebig Gebrauch von CSS machen: <a href="/de/Firefox">Firefox</a>, und <a href="/de/docs/Mozilla/Thunderbird">Thunderbird</a>-<a href="/de/docs/Erweiterungen">Erweiterungen</a> und <a href="/de/Add-ons/Themes">-Themes</a>.</li>
+ <li><a href="//lists.mozilla.org/listinfo/dev-tech-layout">Mozilla-Mailing-Liste</a></li>
+ <li><a href="//stackoverflow.com/questions/tagged/css">Stack-Overflow-Fragen über CSS</a></li>
+</ul>
diff --git a/files/de/web/css/index/index.html b/files/de/web/css/index/index.html
new file mode 100644
index 0000000000..2c59185221
--- /dev/null
+++ b/files/de/web/css/index/index.html
@@ -0,0 +1,8 @@
+---
+title: CSS Dokumentationsverzeichnis
+slug: Web/CSS/Index
+tags:
+  - CSS
+translation_of: Web/CSS/Index
+---
+<p>{{Index("/de/docs/Web/CSS")}}</p>
diff --git a/files/de/web/css/inherit/index.html b/files/de/web/css/inherit/index.html
new file mode 100644
index 0000000000..c91cd0c021
--- /dev/null
+++ b/files/de/web/css/inherit/index.html
@@ -0,0 +1,75 @@
+---
+title: inherit
+slug: Web/CSS/inherit
+tags:
+  - CSS
+  - CSS Kaskadierung
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/inherit
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Der <code>inherit</code> CSS Wert lässt das Element, für das es angegeben wurde, den <a href="/de/docs/Web/CSS/berechneter_Wert">berechneten Wert</a> der Eigenschaft seines Elternelements annehmen. Er ist für jede CSS Eigenschaft erlaubt.</p>
+
+<p>Für <a href="/de/docs/Web/CSS/Vererbung" title="en/CSS/inheritance">vererbte Eigenschaften</a> bestärkt es das Standardverhalten und wird nur dafür benötigt, eine andere Regel zu überschreiben. Für <a href="/de/docs/Web/CSS/Vererbung" title="en/CSS/inheritance">nicht vererbte Eigenschaften</a> gibt er ein Verhalten an, das normalerweise wenig Sinn macht. Stattdessen sollte {{cssxref("initial")}} verwendet werden oder {{cssxref("unset")}} auf die {{cssxref("all")}} Eigenschaft angewandt werden.</p>
+
+<p>{{ Note("Vererbung wird immer vom Elternelement im Dokumentbaum durchgeführt, auch wenn das Elternelement nicht der beinhaltende Block ist.") }}</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre> /* Mache Überschriften zweiter Ebene grün */
+ h2 { color: green; }
+
+ /* ...aber lasse jene in der Seitenleiste unberührt,
+    sodass diese die Farbe ihres Elternelements verwenden */
+ #sidebar h2 { color: inherit; }
+</pre>
+
+<p>In diesem Beispiel verwenden die <code>h2</code> Elemente innerhalb der Seitenleiste andere Farben. Zum Beispiel, falls eines davon der Kindknoten eines divs wäre, der auf folgende Regel passt</p>
+
+<pre class="eval"> div#current { color: blue; }
+</pre>
+
+<p>wäre es blau.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spezifikation</th>
+   <th>Status</th>
+   <th>Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Values', "#common-keywords", "inherit") }}</td>
+   <td>{{ Spec2('CSS3 Values') }}</td>
+   <td>Keine signifikante Änderung bezüglich {{ SpecName('CSS2.1') }}.</td>
+  </tr>
+  <tr style="vertical-align: top;">
+   <td style="vertical-align: top;">{{ SpecName('CSS2.1', "cascade.html#value-def-inherit", "inherit") }}</td>
+   <td style="vertical-align: top;">{{ Spec2('CSS2.1') }}</td>
+   <td style="vertical-align: top;">Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.types.global_keywords.inherit")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/CSS/Vererbung">Vererbung</a></li>
+ <li>Die {{cssxref("all")}} CSS Eigenschaft</li>
+ <li>
+  <p>Die CSS-weiten Eigenschaftswerte {{cssxref("initial")}}, {{cssxref("inherit")}} und {{cssxref("unset")}}.</p>
+ </li>
+</ul>
diff --git a/files/de/web/css/initial/index.html b/files/de/web/css/initial/index.html
new file mode 100644
index 0000000000..f4779b525e
--- /dev/null
+++ b/files/de/web/css/initial/index.html
@@ -0,0 +1,100 @@
+---
+title: initial
+slug: Web/CSS/initial
+translation_of: Web/CSS/initial
+---
+<div>
+ {{CSSRef}}</div>
+<h2 id="Übersicht">Übersicht</h2>
+<p>Der Wert <code>initial</code> repräsentiert einen vom Browser vorgegebenen Standardwert. Der Wert ist in jeder CSS Eigenschaft verfügbar, hat aber verschiedene Auswirkungen.</p>
+<p>Siehe <a href="/en-US/docs/Web/CSS/initial_value">Standardwert</a>.</p>
+<h2 id="Beispiel">Beispiel</h2>
+<pre class="brush: css"> /* give headers a green border */
+ h2 { border: medium solid green }
+
+ /* but make those in the sidebar use the value of the "color" property */
+ #sidebar h2 { border-color: initial; }
+</pre>
+<pre class="brush: css"> &lt;p style="color:red"&gt;
+    this text is red
+       &lt;em style="color:initial"&gt;
+          this text is in the initial color (e.g. black)
+       &lt;/em&gt;
+    this is red again
+ &lt;/p&gt; </pre>
+<h2 id="Spezifikation">Spezifikation</h2>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="http://www.w3.org/TR/css3-values/#keywords">CSS Values and Units Level 3</a></td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Wert hinzugefügt</td>
+  </tr>
+  <tr>
+   <td><a href="http://www.w3.org/TR/css3-cascade/#initial0">CSS Cascade And Inheritance Level 3</a></td>
+   <td>{{Spec2('CSS3 Cascade')}}</td>
+   <td>Definiert den Wert</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Browser_compatibility" name="Browser_compatibility"><nobr>Browser Kompatibilität</nobr></h2>
+<div>
+ {{CompatibilityTable}}</div>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari (WebKit)</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>1.0</td>
+    <td>{{CompatGeckoDesktop("3.5")}}{{property_prefix("-moz")}}[*]<br>
+     {{CompatGeckoDesktop("19.0")}}</td>
+    <td>{{CompatNo}}</td>
+    <td>15.0</td>
+    <td>1.2(125)</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Phone</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>1.0</td>
+    <td>{{CompatGeckoMobile("3.0")}}{{property_prefix("-moz")}}[*]<br>
+     {{CompatGeckoMobile("169.0")}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<p>[*] Seit Firefox 1.0 wurden die Werte für <code>-moz-initial</code> festgelegt, bis mit der Definition von {{cssxref("quotes")}} ab Firefox 3.5 (Gecko 1.9.1) der Wert implementiert werden konnte. Die Werte für {{cssxref("-moz-border-top-colors","-moz-border-*-colors")}} wurden erst in in Firefox 3.6 (Gecko 1.9.2) hinzugefügt. Der Wert mit Präfix (<code>-moz-initial</code>) wurde in Firefox 19 durch <code>initial</code> erstetzt und wird seit Firefox 24 nichtmehr unterstützt.</p>
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/initial_value">initial value</a>, {{cssxref("inherit")}}</li>
+</ul>
diff --git a/files/de/web/css/initialwert/index.html b/files/de/web/css/initialwert/index.html
new file mode 100644
index 0000000000..7d5e7e18dd
--- /dev/null
+++ b/files/de/web/css/initialwert/index.html
@@ -0,0 +1,20 @@
+---
+title: Initialwert
+slug: Web/CSS/Initialwert
+tags:
+  - CSS
+  - Guide
+  - Web
+translation_of: Web/CSS/initial_value
+---
+<h2 id="Übersicht">Übersicht</h2>
+<p>Der <strong>Initialwert</strong>, der in der Übersicht der Definition <a href="/de/docs/Web/CSS/CSS_Referenz" title="en/CSS_Reference">jeder CSS Eigenschaft</a> steht, hat eine unterschiedliche Bedeutung für <a href="/de/docs/Web/CSS/Vererbung" title="en/CSS/inheritance">vererbte und nicht vererbte Eigenschaften</a>.</p>
+<p>Für <a href="/de/docs/Web/CSS/Vererbung#Vererbte_Eigenschaften" title="en/CSS/inheritance#Inherited_properties">vererbte Eigenschaften</a> wird der Initialwert <strong>ausschließlich</strong> für das Wurzelelement verwendet, falls kein Wert für das Element definiert ist.</p>
+<p>Für <a href="/de/docs/Web/CSS/Vererbung#Nicht_vererbte_Eigenschaften" title="en/CSS/inheritance#Non-inherited_properties">nicht vererbte Eigenschaften</a> wird der Initialwert für jedes Element verwendet, falls kein Wert für das Element definiert ist.</p>
+<p>Ein <code><a href="/de/docs/Web/CSS/initial" title="en/CSS/initial">initial</a></code> Schlüsselwort wurde in CSS3 hinzugefügt, um es Autoren zu erlauben, diesen ursprünglichen Wert explizit anzugeben.</p>
+<h2 id="Siehe_auch">Siehe auch</h2>
+<ul>
+ <li><a href="/de/docs/Web/CSS/CSS_Referenz" title="CSS Reference">CSS Referenz</a></li>
+ <li>{{ CSS_key_concepts() }}</li>
+ <li><code><a href="/de/docs/Web/CSS/initial" title="en/CSS/initial">initial</a></code></li>
+</ul>
diff --git a/files/de/web/css/integer/index.html b/files/de/web/css/integer/index.html
new file mode 100644
index 0000000000..c4d214a033
--- /dev/null
+++ b/files/de/web/css/integer/index.html
@@ -0,0 +1,89 @@
+---
+title: <integer>
+slug: Web/CSS/integer
+tags:
+  - CSS
+  - CSS Datentyp
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/integer
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Summary" name="Summary">Übersicht</h2>
+
+<p>Der <a href="/de/docs/CSS" title="CSS">CSS</a> Wert <code>&lt;integer&gt;</code> ist eine Ganzzahl zwischen 0 und 9. data type denotes an integer number, positive or negative. Davor kann ein + oder - stehen. Steht nichts davor ist der Interger positiv.</p>
+
+<p>Integer kommen bspw. in {{cssxref("z-index")}}, {{cssxref("line-height")}}, {{cssxref("counter-increment")}} oder {{Cssxref("column-count")}} vor.</p>
+
+<p>Ein <code>&lt;integer&gt;</code> entspricht auch dem Wert {{cssxref("&lt;number&gt;")}}.</p>
+
+<div class="note">Es gibt keine offizielle Begrenzung des Wertes. Opera unterstützt nur Werte bis 2<sup>15</sup>-1, der Internet Explorer bis 2<sup>20</sup>-1. Während der Entwicklung von CSS3 wurde dies ausführlich diskutiert. Der letzte Stand, April 2012, war [-2<sup>27</sup>-1; 2<sup>27</sup>-1] <a href="http://lists.w3.org/Archives/Public/www-style/2012Apr/0633.html" title="http://lists.w3.org/Archives/Public/www-style/2012Apr/0633.html">#</a>, aber auch 2<sup>24</sup>-1 und 2<sup>30</sup>-1 wurden vorgeschlagen <a href="http://lists.w3.org/Archives/Public/www-style/2012Apr/0530.html" title="http://lists.w3.org/Archives/Public/www-style/2012Apr/0530.html">#</a> <a href="http://lists.w3.org/Archives/Public/www-style/2012Apr/0530.html" title="http://lists.w3.org/Archives/Public/www-style/2012Apr/0530.html">#</a>. Im letzten Entwurf der Spezifikation wurde kein Limit festgelegt.</div>
+
+<h2 id="Interpolation">Interpolation</h2>
+
+<p>Werte des <code>&lt;integer&gt;</code> CSS Datentyps können interpoliert werden, um Animationen zu ermöglichen. In diesem Fall werden sie als ganzzahlige Einzelschritte interpoliert. Die Berechnung erfolgt, als ob sie reale Fließkommazahlen wären und der Einzelwert wird durch die <a href="https://de.wikipedia.org/wiki/Abrundungsfunktion_und_Aufrundungsfunktion#Abrundungsfunktion_oder_Gau.C3.9Fklammer">Abrundungsfunktion</a> ermittelt. Die Geschwindigkeit der Interpolation wird durch die mit der Animation verbundenen {{cssxref("timing-function", "Timingfunktion")}} bestimmt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Gültige Integer:</p>
+
+<pre>12          Positiver Integer (ohne führendes +)
++123        Positiver integer (mit führendem +)
+-456        Negativer integer
+0           Null
++0          Null mit führendem +
+-0          Null mit führendem - (obwohl seltsam, ist dies ein erlaubter Wert)
+</pre>
+
+<p>Ungültige Integer:</p>
+
+<pre>12.0        Dist ist eine {{cssxref("&lt;number&gt;")}}, kein &lt;integer&gt;, obwohl sie eine Ganzzahl darstellt
+12.         Der Punkt sollte nicht Teil eines &lt;integer&gt; sein
++---12      Nur ein führendes +/- ist erlaubt
+ten         Buchstaben sind nicht erlaubt
+_5          Sonderzeichen sind nicht erlaubt
+\35         Escapte Unicodezeichen sind nicht erlaubt, auch wenn diese einer Ganzzahl entsprechen (hier: 5)
+\4E94       Nicht-arabische Numerale sind nicht erlaubt, auch nicht escapt (hier: die japanische 5, 五)
+3e4         Wissenschaftliche Notation ist nicht gültig für &lt;integer&gt;
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spezifikation</th>
+   <th>Status</th>
+   <th>Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#integers', '&lt;integer&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>keine wesentliche Änderung gegenüber CSS Level 2 (Revision 1)</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'syndata.html#numbers', '&lt;integer&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Explizit definiert</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '', '&lt;integer&gt;')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Implizit definiert</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompatibilität</h2>
+
+<p>{{Compat("css.types.integer")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref("&lt;number&gt;")}}</li>
+</ul>
diff --git a/files/de/web/css/justify-content/index.html b/files/de/web/css/justify-content/index.html
new file mode 100644
index 0000000000..3d991145af
--- /dev/null
+++ b/files/de/web/css/justify-content/index.html
@@ -0,0 +1,187 @@
+---
+title: justify-content
+slug: Web/CSS/justify-content
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Flexible Boxes
+  - CSS3
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/justify-content
+---
+<div>{{CSSRef("CSS Flexible Boxes")}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>justify-content</code> <a href="/de/docs/Web/CSS" title="CSS">CSS</a> Eigenschaft definiert, wie ein Browser verfügbaren Platz zwischen und um Elemente verteilt, wenn Flexelemente an der Hauptachse der aktuellen Zeile ausgerichtet werden sollen. Die Ausrichtung wird berechnet, nachdem die Längen und automatischen Abstände angewendet wurden, was bedeutet, dass falls es mindestens ein flexibles Element gibt mit {{cssxref("flex-grow")}} ungleich <code>0</code>, hat diese Eigenschaft keine Auswirkung, da es keinen verfügbaren Platz gibt.</p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Es sollte nicht angenommen werden, dass diese Eigenschaft ausschließlich auf Flexcontainer angewandt wird. Daher sollte sie nicht einfach durch Setzen eines anderen {{cssxref("display")}} Wertes versteckt werden. Die CSSWG arbeitet daran, <a href="http://dev.w3.org/csswg/css3-align/#justify-content" title="http://dev.w3.org/csswg/css3-align/#justify-content">deren Verwendung auf alle Blockelemente auszuweiten</a>. Diese Entwurfsspezifikation ist bisher noch in einer frühen Entwicklungsphase und bisher noch nicht implementiert.</p>
+</div>
+
+<div>{{cssinfo}}</div>
+
+<p>Siehe die <a href="/de/docs/Web/Guide/CSS/Flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Verwendung von CSS Flexible Boxes</a> für weitere Eigenschaften und Informationen.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Packe Flexelemente an den Start */
+justify-content: flex-start;
+
+/* Packe Flexelemente an das Ende */
+justify-content: flex-end;
+
+/* Packe Flexelemente um die Mitte */
+justify-content: center;
+
+/* Verteile die Elemente gleichmäßig
+Das erste Element an den Start, das letzte an das Ende */
+justify-content: space-between;
+
+/* Verteile die Elemente gleichmäßig
+Elemente haben gleiche Abstände um sie herum */
+justify-content: space-around;
+
+/* Globale Werte */
+justify-content: inherit;
+justify-content: initial;
+justify-content: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>flex-start</code></dt>
+ <dd>Die Flexelemente werden an den <strong>Hauptstartpunkt</strong> gepackt. Die Außenabstände des ersten Flexelements grenzen an den Startrand der Zeile und jedes weitere Flexelement an das folgende.</dd>
+ <dt><code>flex-end</code></dt>
+ <dd>Die Flexelemente werden an den <strong>Hauptendpunkt</strong> gepackt. Außenabstände des letzten Flexelements grenzen an den Endrand der Zeile und jedes weitere Flexelement an das folgende.</dd>
+ <dt><code>center</code></dt>
+ <dd>Die Flexelemente werden in die Mitte der Zeile gepackt. Die Flexelemente grenzen aneinander und werden in der Mitte der Zeile ausgerichtet. Die Leerräume zwischen dem Hauptstartrand und dem ersten Element und zwischen dem Hauptendrand und dem letzten Element sind gleich.</dd>
+ <dt><code>space-between</code></dt>
+ <dd>Flexelemente werden gleichmäßig innerhalb der Zeile verteilt. Die Abstände werden so verteilt, dass sie zwischen zwei angrenzenden Elementen gleich sind. Hauptstartrand und -endrand einer Zeile grenzen an den Rand des ersten bzw. letzten Flexelements.</dd>
+ <dt><code>space-around</code></dt>
+ <dd>Flexelemente werden gleichmäßig innerhalb der Zeile verteilt, sodass die Leerräume zwischen zwei angrenzenden Elementen gleich sind. Der Leerraum vor dem ersten und nach dem letzten Element entspricht der Hälfte des Leerraums zwischen zwei angrenzenden Elementen.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p><strong>HTML:</strong></p>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+  &lt;p&gt;justify-content: flex-start&lt;/p&gt;
+  &lt;div id="flex-start"&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+  &lt;/div&gt;
+
+  &lt;p&gt;justify-content: flex-end&lt;/p&gt;
+  &lt;div id="flex-end"&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+  &lt;/div&gt;
+
+  &lt;p&gt;justify-content: center&lt;/p&gt;
+  &lt;div id="center"&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+  &lt;/div&gt;
+
+  &lt;p&gt;justify-content: space-between&lt;/p&gt;
+  &lt;div id="space-between"&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+  &lt;/div&gt;
+
+  &lt;p&gt;justify-content: space-around&lt;/p&gt;
+  &lt;div id="space-around"&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p><strong>CSS:</strong></p>
+
+<pre class="brush: css">#container &gt; div {
+  display: flex;
+  font-family: Courier New, Lucida Console, monospace;
+}
+
+#container &gt; div &gt; div {
+  width: 50px;
+  height: 50px;
+  background: linear-gradient(-45deg, #788cff, #b4c8ff);
+}
+
+#flex-start {
+  justify-content: flex-start;
+}
+
+#center {
+  justify-content: center;
+}
+
+#flex-end {
+  justify-content: flex-end;
+}
+
+#space-between {
+  justify-content: space-between;
+}
+
+#space-around {
+  justify-content: space-around;
+}
+</pre>
+
+<p>Ergibt:</p>
+
+<p>{{ EmbedLiveSample('Beispiele', 600, 550) }}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spezifikation</th>
+   <th>Status</th>
+   <th>Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#justify-content', 'justify-content')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<h3 id="Support_im_Flex-Layout">Support im Flex-Layout</h3>
+
+<p>{{Compat("css.properties.justify-content.flex_context")}}</p>
+
+<h3 id="Support_im_Grid-Layout">Support im Grid-Layout</h3>
+
+<p>{{Compat("css.properties.justify-content.grid_context")}}</p>
+
+<p>[1] Firefox unterstützt nur einzeiliges Flexbox Layout bis Version 28. Um Flexbox Unterstützung für Firefox 18 und 19 zu aktivieren, muss die Einstellung <code>layout.css.flexbox.enabled</code> in <code>about:config</code> auf <code>true</code> gesetzt werden.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/Guide/CSS/Flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Verwendung von CSS Flexible Boxes</a></li>
+</ul>
diff --git a/files/de/web/css/kindselektoren/index.html b/files/de/web/css/kindselektoren/index.html
new file mode 100644
index 0000000000..2e351964ed
--- /dev/null
+++ b/files/de/web/css/kindselektoren/index.html
@@ -0,0 +1,90 @@
+---
+title: Kindselektoren
+slug: Web/CSS/Kindselektoren
+tags:
+  - CSS
+  - CSS Referenz
+  - Einsteiger
+  - NeedsMobileBrowserCompatibility
+  - Selektoren
+translation_of: Web/CSS/Child_combinator
+---
+<div>{{CSSRef("Selectors")}}</div>
+
+<div>Der <strong>Kindkombinator</strong> (<code>&gt;</code>) wird zwischen zwei CSS-Selektoren platziert. Er wählt nur die Elemente aus, die vom zweiten Selektor gewählt werden, die Kinder vom ersten gewählten Element sind.</div>
+
+<div> </div>
+
+<div>
+<pre class="brush: css no-line-numbers language-css"><code class="language-css"><span class="comment token">/* Listenpunkte, die Kinder der "my-things" Liste sind */</span>
+<span class="selector token">ul<span class="class token">.my-things</span> &gt; li </span><span class="punctuation token">{</span>
+  <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">2</span>em<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>Elemente, die vom zweiten Selektor gewählt werden, müssen<strong> </strong>direkte Kinder des ersten gewählten Elements sein. Dies ist strenger, als der <a href="/de/docs/Web/CSS/Nachfahrenselektor">Nachfahrenselektor</a>, der alle Elemente auswählt, die vom zweiten Selektor gewählt werden, für die ein Vorfahrenelement existieren, unabhängig der Anzahl der "Sprünge" aufwärts des DOM.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">selector1 &gt; selector2 { <em>Stileigenschaften</em> }
+</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">span {
+  background-color: white;
+}
+
+div &gt; span {
+  background-color: DodgerBlue;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;span&gt;Span 1. Innerhalb des Divs.
+    &lt;span&gt;Span 2. Innerhalb des Spans, der sich im Div befindet.&lt;/span&gt;
+  &lt;/span&gt;
+&lt;/div&gt;
+&lt;span&gt;Span 3. In keinem Div.&lt;/span&gt;
+</pre>
+
+<h3 id="Ergebnis">Ergebnis</h3>
+
+<p>{{EmbedLiveSample("Beispiel", 200, 100)}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#child-combinators', 'child combinator')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#child-combinators', 'child combinators')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#child-selectors', 'child selectors')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.selectors.child")}}
diff --git a/files/de/web/css/klassenselektoren/index.html b/files/de/web/css/klassenselektoren/index.html
new file mode 100644
index 0000000000..eafd714a05
--- /dev/null
+++ b/files/de/web/css/klassenselektoren/index.html
@@ -0,0 +1,76 @@
+---
+title: Klassenselektoren
+slug: Web/CSS/Klassenselektoren
+tags:
+  - CSS
+  - CSS Referenz
+  - Einsteiger
+  - Selektoren
+translation_of: Web/CSS/Class_selectors
+---
+<div>{{CSSRef("Selectors")}}</div>
+
+<p>In einem HTML Dokument matchen CSS Klassenselektoren ein Element basierend auf den Inhalten des {{htmlattrxref("class")}} Attributs des Elements. Das class Attribut ist definiert als eine durch Leerzeichen getrennte Liste von Einträgen, wobei einer dieser Einträge exakt auf den Klassennamen des angegebenen Selektors passen muss.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">.classname { <em>style properties</em> }</pre>
+
+<p>Beachte, dass dies äquivalent zu folgendem {{cssxref("Attributselektoren", "Attributselektor")}} ist:</p>
+
+<pre class="syntaxbox">[class~=classname] { <em>style properties</em> }</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">span.classy {
+  background-color: DodgerBlue;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;span class="classy"&gt;Hier ist ein Span mit Text.&lt;/span&gt;
+&lt;span&gt;Hier ist ein weiterer.&lt;/span&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Beispiel', 200, 50)}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#class-html', 'class selectors')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Keine Änderungen</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#class-as-selector', 'child selectors')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.selectors.class")}}
diff --git a/files/de/web/css/kurzformat_eigenschaft/index.html b/files/de/web/css/kurzformat_eigenschaft/index.html
new file mode 100644
index 0000000000..1923d5efd5
--- /dev/null
+++ b/files/de/web/css/kurzformat_eigenschaft/index.html
@@ -0,0 +1,158 @@
+---
+title: Kurzformat Eigenschaft
+slug: Web/CSS/Kurzformat_Eigenschaft
+translation_of: Web/CSS/Shorthand_properties
+---
+<div>{{cssref}}</div>
+
+<p class="summary"><strong><dfn>Shorthand properties</dfn></strong> are CSS properties that let you set the values of multiple other CSS properties simultaneously. Using a shorthand property, you can write more concise (and often more readable) style sheets, saving time and energy.</p>
+
+<p>The CSS specification defines shorthand properties to group the definition of common properties acting on the same theme. For instance, the CSS {{cssxref("background")}} property is a shorthand property that's able to define the values of {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-repeat")}}, and {{cssxref("background-position")}}. Similarly, the most common font-related properties can be defined using the shorthand {{cssxref("font")}}, and the different margins around a box can be defined using the {{cssxref("margin")}} shorthand.</p>
+
+<h2 id="Tricky_edge_cases" name="Tricky_edge_cases">Tricky edge cases</h2>
+
+<p>Even if they are very convenient to use, there are a few edge cases to keep in mind when using them:</p>
+
+<ol>
+ <li>A value which is not specified is set to its initial value. That sounds anecdotal, but it really means that it <strong>overrides</strong> previously set values. Therefore:
+
+  <pre class="brush:css notranslate">background-color: red;
+background: url(images/bg.gif) no-repeat left top;
+</pre>
+  will not set the color of the background to <code>red</code> but to {{cssxref("background-color")}}'s default, <code>transparent</code>, as the second rule has precedence.</li>
+ <li>Only the individual properties values can inherit. As missing values are replaced by their initial value, it is impossible to allow inheritance of individual properties by omitting them. The keyword <code>inherit</code> can be applied to a property, but only as a whole, not as a keyword for one value or another. That means that the only way to make some specific value to be inherited is to use the longhand property with the keyword <code>inherit</code>.</li>
+ <li>Shorthand properties try not to force a specific order for the values of the properties they replace. This works well when these properties use values of different types, as the order has no importance, but this does not work as easily when several properties can have identical values. Handling of these cases are grouped in several categories:
+  <ol>
+   <li>Shorthands handling properties related to edges of a box, like {{cssxref("border-style")}}, {{cssxref("margin")}} or {{cssxref("padding")}}, always use a consistent 1-to-4-value syntax representing those edges:
+    <table>
+     <tbody>
+      <tr>
+       <td style="width: 79px;"><img alt="border1.png" src="/files/3646/border1.png"></td>
+       <td><em>The 1-value syntax</em>: <code>border-width: 1em</code> — The unique value represents all edges</td>
+      </tr>
+      <tr>
+       <td><img alt="border2.png" src="/files/3647/border2.png"></td>
+       <td><em>The 2-value syntax</em>: <code>border-width: 1em 2em</code> — The first value represents the vertical, that is top and bottom, edges, the second the horizontal ones, that is the left and right ones.</td>
+      </tr>
+      <tr>
+       <td><img alt="border3.png" src="/files/3648/border3.png"></td>
+       <td><em>The 3-value syntax</em>: <code>border-width: 1em 2em 3em</code> — The first value represents the top edge, the second, the horizontal, that is left and right, ones, and the third value the bottom edge</td>
+      </tr>
+      <tr>
+       <td><img alt="border4.png" src="/files/3649/border4.png"></td>
+       <td>
+        <p><em>The 4-value syntax</em>: <code>border-width: 1em 2em 3em 4em</code> — The four values represent the top, right, bottom and left edges respectively, always in that order, that is clock-wise starting at the top (The initial letter of Top-Right-Bottom-Left matches the order of the consonant of the word <em>trouble</em>: TRBL) (You can also remember it as the order that the hands would rotate on a clock: <code>1em</code> starts in the 12 o'clock position, then <code>2em</code> in the 3 o'clock position, then <code>3em</code> in the 6 o'clock position, and <code>4em</code> in the 9 o'clock position).</p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </li>
+   <li>Similarly, shorthands handling properties related to corners of a box, like {{cssxref("border-radius")}}, always use a consistent 1-to-4-value syntax representing those corners:
+    <table>
+     <tbody>
+      <tr>
+       <td style="width: 69px;"><img alt="corner1.png" src="/files/3650/corner1.png"></td>
+       <td><em>The 1-value syntax</em>: <code>border-radius: 1em</code> — The unique value represents all corners</td>
+      </tr>
+      <tr>
+       <td><img alt="corner2.png" src="/files/3651/corner2.png"></td>
+       <td><em>The 2-value syntax</em>: <code>border-radius: 1em 2em</code> — The first value represents the top left and bottom right corner, the second the top right and bottom left ones.</td>
+      </tr>
+      <tr>
+       <td><img alt="corner3.png" src="/files/3652/corner3.png"></td>
+       <td><em>The 3-value syntax</em>: <code>border-radius: 1em 2em 3em</code> — The first value represents the top left corner, the second the top right and bottom left ones, and the third value the bottom right corner</td>
+      </tr>
+      <tr>
+       <td><img alt="corner4.png" src="/files/3653/corner4.png"></td>
+       <td>
+        <p><em>The 4-value syntax</em>: <code>border-radius: 1em 2em 3em 4em</code> — The four values represent the top left, top right, bottom right and bottom left corners respectively, always in that order, that is clock-wise starting at the top left.</p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </li>
+  </ol>
+ </li>
+</ol>
+
+<h2 id="Background_Properties" name="Background_Properties">Background properties</h2>
+
+<p>A background with the following properties ...</p>
+
+<pre class="brush:css notranslate">background-color: #000;
+background-image: url(images/bg.gif);
+background-repeat: no-repeat;
+background-position: left top;</pre>
+
+<p>... can be shortened to just one declaration:</p>
+
+<pre class="brush:css notranslate">background: #000 url(images/bg.gif) no-repeat left top;</pre>
+
+<p>(The shorthand form is actually the equivalent of the longhand properties above plus <code>background-attachment: scroll</code> and, in CSS3, some additional properties.)</p>
+
+<p>See {{cssxref("background")}} for more detailed information, including CSS3 properties.</p>
+
+<h2 id="Font_Properties" name="Font_Properties">Font properties</h2>
+
+<p>The following declarations ...</p>
+
+<pre class="brush:css notranslate">font-style: italic;
+font-weight: bold;
+font-size: .8em;
+line-height: 1.2;
+font-family: Arial, sans-serif;</pre>
+
+<p>... can be shortened to the following:</p>
+
+<pre class="brush:css notranslate">font: italic bold .8em/1.2 Arial, sans-serif;</pre>
+
+<p>This shorthand declaration is actually equivalent to the longhand declarations above plus <code>font-variant: normal</code> and <code>font-size-adjust: none</code> (CSS2.0 / CSS3), <code>font-stretch: normal</code> (CSS3).</p>
+
+<h2 id="Border_Properties" name="Border_Properties">Border properties</h2>
+
+<p>With borders, the width, color, and style can be simplified into one declaration. For example, the following CSS ...</p>
+
+<pre class="brush:css notranslate">border-width: 1px;
+border-style: solid;
+border-color: #000;</pre>
+
+<p>... can be simplified as:</p>
+
+<pre class="brush:css notranslate">border: 1px solid #000;</pre>
+
+<h2 id="Margin_and_Padding_Properties" name="Margin_and_Padding_Properties">Margin and padding properties</h2>
+
+<p>Shorthand versions of margin and padding values work similarly; the margin property allows for shorthand values to be specified using one, two, three, or four values. The following CSS declarations ...</p>
+
+<pre class="brush:css notranslate">margin-top: 10px;
+margin-right: 5px;
+margin-bottom: 10px;
+margin-left: 5px;</pre>
+
+<p>... are the same as the following declaration using the four value shorthand. Note that the values are in clockwise order, beginning at the top: top, right, bottom, then left (TRBL, the consonants in "trouble").</p>
+
+<pre class="brush:css notranslate">margin: 10px 5px 10px 5px;</pre>
+
+<p>Margin shorthand rules for one, two, three and four value declarations are:</p>
+
+<ul>
+ <li>When <strong>one</strong> value is specified, it applies the same margin to <strong>all four sides</strong>.</li>
+ <li>When <strong>two</strong> values are specified, the first margin applies to the <strong>top and bottom</strong>, the second to the <strong>left and right</strong>.</li>
+ <li>When <strong>three</strong> values are specified, the first margin applies to the <strong>top</strong>, the second to the <strong>left and right</strong>, the third to the <strong>bottom</strong>.</li>
+ <li>When <strong>four</strong> values are specified, the margins apply to the <strong>top</strong>, <strong>right</strong>, <strong>bottom</strong>, and <strong>left</strong> in that order (clockwise).</li>
+</ul>
+
+<h2 id="The_universal_shorthand_property" name="The_universal_shorthand_property">The universal shorthand property</h2>
+
+<p>CSS provides a universal shorthand property, {{cssxref("all")}}, which applies its value to every property in the document. Its purpose is to change the properties' inheritance model to one of:</p>
+
+<p>{{page("/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance", "Controlling_inheritance")}}</p>
+
+<p>See <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">Cascade and inheritance</a> or <a href="/en-US/docs/Web/CSS/Cascade">Introducing the CSS Cascade</a> for more information about how inheritance works in CSS.</p>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li>{{css_key_concepts}}</li>
+ <li>Shorthand properties: {{cssxref("animation")}}, {{cssxref("background")}}, {{cssxref("border")}}, {{cssxref("border-bottom")}}, {{cssxref("border-color")}}, {{cssxref("border-left")}}, {{cssxref("border-radius")}}, {{cssxref("border-right")}}, {{cssxref("border-style")}}, {{cssxref("border-top")}}, {{cssxref("border-width")}}, {{cssxref("column-rule")}}, {{cssxref("columns")}}, {{cssxref("flex")}}, {{cssxref("flex-flow")}}, {{cssxref("font")}}, {{cssxref("grid")}}, {{cssxref("grid-area")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row")}}, {{cssxref("grid-template")}}, {{cssxref("list-style")}}, {{cssxref("margin")}}, {{cssxref("offset")}}, {{cssxref("outline")}}, {{cssxref("overflow")}}, {{cssxref("padding")}}, {{cssxref("place-content")}}, {{cssxref("place-items")}}, {{cssxref("place-self")}}, {{cssxref("text-decoration")}}, {{cssxref("transition")}}</li>
+</ul>
diff --git a/files/de/web/css/layout_mode/index.html b/files/de/web/css/layout_mode/index.html
new file mode 100644
index 0000000000..f3ed2f4b75
--- /dev/null
+++ b/files/de/web/css/layout_mode/index.html
@@ -0,0 +1,27 @@
+---
+title: Layout mode
+slug: Web/CSS/Layout_mode
+tags:
+  - CSS
+translation_of: Web/CSS/Layout_mode
+---
+<p>Ein <a href="/de/docs/Web/CSS">CSS</a> <strong>Layoutmodus</strong>, manchmal als <em>Layout</em> abgekürzt, ist ein Algorithmus, der die Position und die Größe von Boxen bestimmt, basierend auf der Weise, wie diese mit ihren Geschwisterknoten und übergeordneten Knoten interagieren. Es gibt mehrere davon:</p>
+
+<ul>
+ <li>Das <em>Blocklayout</em>, designt, um Dokumente darzustellen. Das Blocklayout beinhaltet dokumentenspezifische Features, wie die Möglichkeit, Elemente <a href="/en-US/docs/Web/CSS/float"><em>umzubrechen</em></a> oder sie in <a href="/de/docs/CSS3_Columns"><em>mehreren Spalten</em></a> darzustellen.</li>
+ <li>Das <em>Inlinelayout</em>, designt, um Text darzustellen.</li>
+ <li>Das <em>Tabellenlayout</em>, designt, um Tabellen darzustellen.</li>
+ <li>Das <em>positionierte Layout</em>, designt, um Elemente ohne viel Interaktion mit anderen Elementen zu positionieren.</li>
+ <li>Das <a href="/de/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes"><em>Flexboxlayout</em></a>, designt, um komplexe Seiten darzustellen, die problemlos in der Größe geändert werden können. {{experimental_inline}}</li>
+ <li>Das <em>Rasterlayout</em>, designt, um Elemente relativ zu einem festen Raster darzustellen. {{experimental_inline}}</li>
+</ul>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Nicht alle <a href="/de/docs/Web/CSS/Referenz">CSS Eigenschaften</a> gelten für alle <em>Layoutmodi</em>. Die meisten von ihnen gelten für einen oder zwei davon und haben keinen Effekt, falls sie für ein Element gesetzt werden, das in einem anderen Layoutmodus dargestellt wird.</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{CSS_key_concepts}}</li>
+</ul>
diff --git a/files/de/web/css/left/index.html b/files/de/web/css/left/index.html
new file mode 100644
index 0000000000..d1e281e4a3
--- /dev/null
+++ b/files/de/web/css/left/index.html
@@ -0,0 +1,190 @@
+---
+title: left
+slug: Web/CSS/Left
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Positionierung
+  - Referenz
+translation_of: Web/CSS/left
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die CSS Eigenschaft <code>left</code> definiert einen Teil der Position von positionierten Elementen.</p>
+
+<p>Bei absolut positionierten Elementen (jene mit {{cssxref("position")}}<code>: absolute</code> oder <code>position: fixed</code>) wird der Abstand zwischen der linken, äußeren Rand des Elements und dem linken Rand des umschließenden Blocks definiert.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* &lt;length&gt; Werte */
+left: 3px;
+left: 2.4em;
+
+/* &lt;percentage&gt; Werte bezogen auf die Breite des beinhaltenden Blocks */
+left: 10%;
+
+/* Schlüsselwortwerte */
+left: auto;
+
+/* Globale Werte */
+left: inherit;
+left: initial;
+left: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Ist eine negative, null oder positive {{cssxref("&lt;length&gt;")}}, die folgendem entspricht:
+ <ul>
+  <li>für <em>absolute positionierte Elemente</em>, die Distanz zum linken Rand des beinhaltenden Blocks</li>
+  <li>für <em>relativ positionierte Elemente</em>, der Versatz, um den das Element von seiner Position im normalen Fluss nach links verschoben ist, falls es nicht positioniert wäre.</li>
+ </ul>
+ </dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Ein {{cssxref("&lt;percentage&gt;")}} Wert der Breite des beinhaltenden Blocks, wie in der <a href="#Übersicht">Übersicht</a> beschrieben.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Ist ein Schlüsselwort, das folgendem entspricht:
+ <ul>
+  <li>für absolut positionierte Elemente, die Position des Elements basierend auf der {{cssxref("right")}} Eigenschaft und <code>width: auto</code> wird als Breite basierend auf dem Inhalt behandelt.</li>
+  <li>für relativ positionierte Elemente, der linke Versatz des Elements von der Originalposition basierend auf der {{cssxref("right")}} Eigenschaft oder falls <code>right</code> ebenfalls <code>auto</code> ist, wird wird es nicht verschoben.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#wrap {
+  width: 700px;
+  margin: 0 auto;
+  background: #5C5C5C;
+}
+
+pre {
+  white-space: pre;
+  white-space: pre-wrap;
+  white-space: pre-line;
+  word-wrap: break-word;
+}
+
+#example_1 {
+  width: 200px;
+  height: 200px;
+  position: absolute;
+  left: 20px;
+  top: 20px;
+  background-color: #D8F5FF;
+}
+
+#example_2 {
+  width: 200px;
+  height: 200px;
+  position: relative;
+  top: 0;
+  right: 0;
+  background-color: #C1FFDB;
+
+}
+#example_3 {
+  width: 600px;
+  height: 400px;
+  position: relative;
+  top: 20px;
+  left: 20px;
+  background-color: #FFD7C2;
+}
+
+#example_4 {
+  width: 200px;
+  height: 200px;
+  position: absolute;
+  bottom: 10px;
+  right: 20px;
+  background-color: #FFC7E4;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="wrap"&gt;
+  &lt;div id="example_1"&gt;
+    &lt;pre&gt;
+      position: absolute;
+      left: 20px;
+      top: 20px;
+    &lt;/pre&gt;
+    &lt;p&gt;Das einzige Element, das dieser Div beinhaltet, ist das Hauptfenster. Daher positioniert er sich in Bezug dazu.&lt;/p&gt;
+  &lt;/div&gt;
+
+  &lt;div id="example_2"&gt;
+    &lt;pre&gt;
+      position: relative;
+      top: 0;
+      right: 0;
+    &lt;/pre&gt;
+    &lt;p&gt;Relative Position in Bezug auf seine Geschwisterelemente.&lt;/p&gt;
+  &lt;/div&gt;
+
+  &lt;div id="example_3"&gt;
+    &lt;pre&gt;
+      float: right;
+      position: relative;
+      top: 20px;
+      left: 20px;
+    &lt;/pre&gt;
+    &lt;p&gt;Relativ zu seinem Geschwister-Div darüber, jedoch aus dem Inhaltsfluss entfernt.&lt;/p&gt;
+
+    &lt;div id="example_4"&gt;
+      &lt;pre&gt;
+        position: absolute;
+        top: 10px;
+        left: 20px;
+      &lt;/pre&gt;
+      &lt;p&gt;Absolute Position innerhalb des Elternelements mit relativer Position.&lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Live_Beispiel">Live Beispiel</h3>
+
+<p>{{EmbedLiveSample('Beispiele', 1200, 650)}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'left')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Definiert <code>left</code> als animierbar.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#propdef-left', 'left')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.left")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref("position")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}</li>
+</ul>
diff --git a/files/de/web/css/length/index.html b/files/de/web/css/length/index.html
new file mode 100644
index 0000000000..6309f0f045
--- /dev/null
+++ b/files/de/web/css/length/index.html
@@ -0,0 +1,178 @@
+---
+title: <length>
+slug: Web/CSS/length
+tags:
+  - CSS
+  - CSS Datentyp
+  - Layout
+  - Länge
+  - Referenz
+  - Web
+  - length
+translation_of: Web/CSS/length
+---
+<div>{{ CSSRef() }}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Der Platzhalter <code>&lt;length&gt;</code> steht für eine Längenangabe. Diese besteht immer aus aus einer Zahl ({{cssxref("&lt;number&gt;")}}) und einer Maßeinheit (<code>px</code>, <code>em</code>, <code>pc</code>, <code>in</code>, <code>mm</code>, …); zwischen diesen Elementen darf sich kein Leerzeichen befinden.</p>
+
+<p>Der Wertebereich ist abhängig von der jeweiligen CSS-Eigenschaft, teils sind nur positive Werte sinnvoll und zulässig.<br>
+ Oftmals wird auch eine prozentuale Angabe ({{cssxref("&lt;percentage&gt;")}}) akzeptiert, diese gehört jedoch strenggenommen nicht zu den &lt;length&gt;-Werten und wird deshalb an anderer Stelle besprochen.</p>
+
+<p><code>&lt;length&gt;</code> wird von vielen Eigenschaften benutzt, zum Beispiel {{ Cssxref("width") }}, {{ Cssxref("margin") }},  {{ Cssxref("padding") }}, {{ Cssxref("font-size") }}, {{ Cssxref("border-width") }} und {{ Cssxref("text-shadow") }}.</p>
+
+<h2 id="Interpolation">Interpolation</h2>
+
+<p><code>&lt;length&gt;</code>-Werte können für Animationen interpoliert werden. Für die Berechnung werden sie als reelle Fließkommazahlen behandelt, dabei wird immer der berechnete Wert interpoliert. Die Geschwindigkeit bzw. die Zwischenschritte hängen von der der Animation zugeordneten <a href="/en/CSS/timing-function" title="timing-function">Zeitfunktion</a> ab.</p>
+
+<h2 id="Einheiten">Einheiten</h2>
+
+<h3 id="Relative_Längenmaße">Relative Längenmaße</h3>
+
+<h4 id="Relativ_zur_Schriftgröße">Relativ zur Schriftgröße</h4>
+
+<p>Die nachfolgenden Einheiten beziehen sich immer auf eine Eigenschaft der Schriftart des Elements, für das sie genutzt werden (Ausnahme: <code>rem</code> und <code>rlh</code>, diese beziehen sich auf das Wurzelelement, meist das {{HTMLElement("html")}}-Element).</p>
+
+<dl>
+ <dt id="em"><code>em</code></dt>
+ <dd><code>1em</code> entspricht der aus {{Cssxref("font-size")}} berechneten Schriftgröße. Wird em zusammen mit {{Cssxref("font-size")}} selbst benutzt, entspricht <code>1em</code> der Schriftgröße des Elternelements.<br>
+ em ist, zusammen mit Prozentwerten, das gebräuchlichste Maß, um den Fluss der Seitenelemente unabhängig von der vom Benutzer gewählten Schriftgröße einheitlich zu gewährleisten.</dd>
+ <dt id="rem"><code>rem</code></dt>
+ <dd>Wie <code>em</code>, bezieht sich jedoch immer auf die berechnete Schriftgröße des Wurzelelements. {{ gecko_minversion_inline("1.9.2") }}</dd>
+ <dt id="ex"><code>ex</code></dt>
+ <dd><code>1ex</code> enspricht üblicherweise der Höhe des kleinen x; oftmals ist 1ex ≈ 0,5em<code>.</code></dd>
+ <dt id="ch"><code>ch</code></dt>
+ <dd><code>1ch</code> enspricht der Breite der Ziffer '0' (Null, Unicode U+0030) {{gecko_minversion_inline("1.9.1") }}</dd>
+ <dt id="ch"><code>cap</code> {{experimental_inline}}</dt>
+ <dd>Nominale Höhe der Großbuchstaben.</dd>
+ <dt><code>lh</code> {{experimental_inline}}</dt>
+ <dd>Die aus {{Cssxref("line-height")}} berechnete Zeilenhöhe.</dd>
+ <dt><code>rlh</code> {{experimental_inline}}</dt>
+ <dd>Wie lh, bezieht sich jedoch immer auf die berechnete Zeilenhöhe des Wurzelelements.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">ic</span></font> {{experimental_inline}}</dt>
+ <dd>Größe des "水"-Zeichens (CJK "Wasser"-Ideograph U+6C34) in der aktuellen Schriftart.</dd>
+</dl>
+
+<h4 id="Relativ_zum_Viewport">Relativ zum Viewport</h4>
+
+<p>Diese Werte werden vom sichtbaren Teil des Dokuments abgeleitet, dem Anzeigebereich (Englisch: Viewport). Sie sind also abhängig von der Fenster- bzw. Bildschirmgröße.</p>
+
+<p>Innerhalb einer {{cssxref("@page")}}-Regel sind Viewport-Werte nicht zulässig.</p>
+
+<dl>
+ <dt id="vh"><code>vh</code></dt>
+ <dd><code>1vh</code> entspricht 1% der Anzeigenhöhe (vh = viewport height).</dd>
+ <dt id="vw"><code>vw</code></dt>
+ <dd><code>1vw</code> entspricht 1% Anzeigenbreite (vh = viewport width).</dd>
+ <dt><code>vi</code> {{experimental_inline}}</dt>
+ <dd>Entspricht 1% der Länge der <a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/CSS_Logical_Properties">Inlineachse</a> des umgebenden Blocks. Die Inlineachse ist die Richtung, in der Text geschrieben wird, also horizontal für deutschen Text.</dd>
+ <dt><code>vi</code> {{experimental_inline}}</dt>
+ <dd>Entspricht 1% der Länge der <a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/CSS_Logical_Properties">Blockachse</a> des umgebenden Blocks. Die Blockachse verläuft im Winkel von 90° zur Inlineachse, also vertikal für deutschen Text.</dd>
+ <dt id="vmin"><code>vmin</code></dt>
+ <dd>Der kleinere der Werte <code>vh</code> und <code>vw</code>.</dd>
+ <dt id="vmax"><code>vmax</code></dt>
+ <dd>Der größere der Werte <code>vh</code> und <code>vw</code>.</dd>
+</dl>
+
+<h3 id="Absolute_Längenmaße">Absolute Längenmaße</h3>
+
+<p>Absolute Längenmaße stehen für ein physikalisches Maß, sofern die physischen Eigenheiten des Ausgabemediums bekannt sind. Eine der Einheiten wird als Referenz festgelegt, alle anderen werden relativ zu ihr definiert. Die Festlegung hängt vom Ausgabegerät ab, genauer: von dessen Auflösung.</p>
+
+<p>Bei Geräten mit niedriger Auflösung (namentlich herkömmliche Flachbildschirme) ist die Bezugsgröße das sogenannte Referenzpixel. Die Größe des Referenzpixels ist definiert als die wahrgenommene Größe eines Pixels auf einem Bildschirm mit der Auflösung 96dpi in etwa einer Armlänge Abstand. In der Praxis wird jedoch meist das tatsächliche Bildschirmpixel des gerade angeschlossenen Bildschirms als Referenzpixel definiert.<br>
+ Ein Referenzpixel entspricht <code>1px</code>, alle anderen Einheiten sind bei niedrig auflösenden Geräten von px abgeleitet.  <code>1in</code> ist in Abhängigkeit von px als <code>96px</code> festgelegt, was wiederum <code>72pt</code> entspricht.</p>
+
+<p>Aufgrund dieser eher ungenauen Definition können in <code>mm</code>, <code>cm</code> oder <code>in</code> gegebene Längen von jenen abweichen, die tatsächlich als solche gemessen werden würden – in anderen Worten: <code>1cm</code> auf dem Bildschirm ist üblicherweise nur ungefähr gleich einem Zentimeter auf dem Zollstock.</p>
+
+<p>Bei Geräten mit hoher Auflösung hingegen entsprechen die Einheiten <code>mm</code>, <code>cm</code> und <code>in</code> ihren tatsächlichen Maßen, mithin den Einheiten Millimeter, Zentimeter und Zoll (Englisch: Inch). Von ihnen abhängig ist die Einheit <code>px</code>, sie ist definiert als 1/96 eines Zolls.</p>
+
+<div class="blockIndicator note">
+<p><strong>Hinweis:</strong> Viele Benutzer erhöhen die Standardschriftgröße ihres Browsers zur besseren Lesbarkeit. Absolute Schriftgrößen können Probleme mit der Barrierefreiheit verursachen, weil sie nicht von den Benutzereinstellungen der Schriftgröße abhängen. Es wird deshalb empfohlen, relative Schriftgrößen wie <code>em</code> und <code>rem</code> zu benutzen, selbst für allgemeine Schriftgrößendefinitionen auf <code>p</code>- oder <code>body</code>-Ebene.</p>
+</div>
+
+<dl>
+ <dt id="px"><code>px</code></dt>
+ <dd>Pixel, abhängig vom Anzeigegerät. Auf herkömmlichen Bildschirmen entspricht <code>1px</code> in der Regel einem physischen Pixel des Bildschirms.<br>
+ Bei hochauflösenden Geräten wird die Anzahl physischer Pixel so bemessen, dass 1 Zoll ungefähr 96px entspricht, also für <code>px</code> eine theoretische Auflösung von 96dpi beibehalten wird.</dd>
+ <dt id="cm"><code>cm</code></dt>
+ <dd>Zentimeter</dd>
+ <dt id="mm"><code>mm</code></dt>
+ <dd>Millimeter</dd>
+ <dt id="in"><code>in</code></dt>
+ <dd>Zoll (Englisch: Inch). 1 Zoll = 2,54cm</dd>
+ <dt id="pc"><code>pc</code></dt>
+ <dd>Picas. 1pc = 12pt = 1/6in</dd>
+ <dt id="pt"><code>pt</code></dt>
+ <dd>Punkt, ein Wert aus dem Druckgewerbe. 1pt = 1/72in. pt wird häufig für Schriftgrößen auch in anderen Anwendungen verwendet.</dd>
+ <dt id="mozmm"><code>mozmm</code> {{ non-standard_inline() }}</dt>
+ <dd>Experimentelle Maßeinheit, die unter Berücksichtigung der Auflösung des Anzeigegeräts <em>immer</em> exakten Millimetern entspricht.</dd>
+</dl>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div style="width: 10em;"&gt;10em&lt;/div&gt;
+&lt;div style="width: 10ex;"&gt;10ex&lt;/div&gt;
+&lt;div style="width: 10ch;"&gt;10ch&lt;/div&gt;
+&lt;div style="width: 10vh;"&gt;10vh&lt;/div&gt;
+&lt;div style="width: 10vw;"&gt;10vw&lt;/div&gt;
+&lt;div style="width: 10vmin;"&gt;10vmin&lt;/div&gt;
+&lt;div style="width: 10vmax;"&gt;10vmax&lt;/div&gt;
+&lt;div style="width: 100px;"&gt;100px&lt;/div&gt;
+&lt;div style="width: 10cm;"&gt;10cm&lt;/div&gt;
+&lt;div style="width: 10mm;"&gt;10mm&lt;/div&gt;
+&lt;div style="width: 10in;"&gt;10in&lt;/div&gt;
+&lt;div style="width: 10pc;"&gt;10pc&lt;/div&gt;
+&lt;div style="width: 50pt;"&gt;50pt&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+    background-color: green;
+    margin: 6px;
+}
+</pre>
+
+<h3 id="Ergebnis">Ergebnis</h3>
+
+<p>{{ EmbedLiveSample('Beispiel', '', '', '', 'Web/CSS/length') }}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spezifikation</th>
+   <th>Status</th>
+   <th>Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Values', '#lengths', '')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td><code>vi</code>, <code>vb</code>, <code>ic</code>, <code>lh</code>, und <code>rlh</code> hinzugefügt.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Values', '#lengths', '&lt;length&gt;') }}</td>
+   <td>{{ Spec2('CSS3 Values') }}</td>
+   <td><code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code> hinzugefügt</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'syndata.html#length-units', '&lt;length&gt;') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td><code>pt</code>, <code>pc</code>, <code>px</code> definiert</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#length-units', '&lt;length&gt;') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2>
+
+<p>{{Compat("css.types.length")}}</p>
diff --git a/files/de/web/css/letter-spacing/index.html b/files/de/web/css/letter-spacing/index.html
new file mode 100644
index 0000000000..ffd4a58d94
--- /dev/null
+++ b/files/de/web/css/letter-spacing/index.html
@@ -0,0 +1,117 @@
+---
+title: letter-spacing
+slug: Web/CSS/letter-spacing
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+  - SVG
+translation_of: Web/CSS/letter-spacing
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <strong><code>letter-spacing</code></strong> CSS Eigenschaft gibt das Abstandsverhalten zwischen Textzeichen an.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* &lt;length&gt; Werte */
+letter-spacing: 0.3em;
+letter-spacing: 3px;
+letter-spacing: .3px;
+
+/* Schlüsselwortwerte */
+letter-spacing: normal;
+
+/* Globale Werte */
+letter-spacing: inherit;
+letter-spacing: initial;
+letter-spacing: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Die Abstände sind die normalen Abstände für die aktuelle Schriftart. Im Gegensatz zu einem Wert von 0, erlaubt es dieser Wert dem User Agent, den Leerraum zwischen Zeichen zu ändern, um Text im Block anzuordnen.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Beschreibt Leerraum zwischen den Zeichen <strong><em>zusätzlich</em></strong> zum Standardleerraum zwischen Zeichen. Werte können negativ sein, aber es kann implementationsspezifische Beschränkungen geben. User Agents können den Leerraum zwischen den Zeichen nicht weiter verringern oder vergrößern, um den Text im Block anzuordnen.<br>
+ Siehe {{cssxref("length")}} Werte für mögliche Einheiten.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="HTML_Inhalt">HTML Inhalt</h3>
+
+<pre class="brush: html">&lt;p class="first-example"&gt; letter spacing &lt;/p&gt;
+&lt;p class="second-example"&gt; letter spacing &lt;/p&gt;
+&lt;p class="third-example"&gt; letter spacing &lt;/p&gt;
+&lt;p class="fourth-example"&gt; letter spacing &lt;/p&gt;
+</pre>
+
+<h3 id="CSS_Inhalt">CSS Inhalt</h3>
+
+<pre class="brush: css">.first-example { letter-spacing: 0.4em; }
+.second-example { letter-spacing: 1em; }
+.third-example { letter-spacing: -0.05em; }
+.fourth-example { letter-spacing: 6px; }
+</pre>
+
+<p>{{ EmbedLiveSample('Beispiele', 440, 185) }}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#letter-spacing-property', 'letter-spacing')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'letter-spacing')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Definiert <code>letter-spacing</code> als animierbar.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#propdef-letter-spacing', 'letter-spacing')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'text.html#LetterSpacingProperty', 'letter-spacing')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Ursprüngliche SVG Definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#letter-spacing', 'letter-spacing')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.letter-spacing")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref("font-kerning")}}</li>
+</ul>
diff --git a/files/de/web/css/line-break/index.html b/files/de/web/css/line-break/index.html
new file mode 100644
index 0000000000..7338a176c7
--- /dev/null
+++ b/files/de/web/css/line-break/index.html
@@ -0,0 +1,72 @@
+---
+title: line-break
+slug: Web/CSS/line-break
+tags:
+  - CSS
+  - CSS Text
+  - NeedsExample
+  - Property
+  - Referenz
+translation_of: Web/CSS/line-break
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <strong><code>line-break</code></strong> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft wird dazu verwendet, wie (oder ob) Zeilen umgebrochen werden sollen.</p>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Schlüsselwortwerte */
+line-break: auto;
+line-break: loose;
+line-break: normal;
+line-break: strict;
+
+/* Globale Werte */
+line-break: inherit;
+line-break: initial;
+line-break: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Text wird nach der Standardregel zum Umbrechen von Zeilen umgebrochen.</dd>
+ <dt><code>loose</code></dt>
+ <dd>Text wird umgebrochen, sodass die Zeile kürzer ist, wie bei einer Zeitung.</dd>
+ <dt><code>normal</code></dt>
+ <dd>Text wird nach der allgemeinen Regel zum Umbrechen von Zeilen umgebrochen.</dd>
+ <dt><code>strict</code></dt>
+ <dd>Text wird nach der strikten Regel zum Umbrechen von Zeilen umgebrochen.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#line-break-property', 'line-break')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.line-break")}}
diff --git a/files/de/web/css/linear-gradient()/index.html b/files/de/web/css/linear-gradient()/index.html
new file mode 100644
index 0000000000..127a082f2a
--- /dev/null
+++ b/files/de/web/css/linear-gradient()/index.html
@@ -0,0 +1,332 @@
+---
+title: linear-gradient()
+slug: Web/CSS/linear-gradient()
+translation_of: Web/CSS/linear-gradient()
+---
+<p>{{ CSSRef() }}</p>
+
+<p>Die CSS <code>linear-gradient()</code> Funktion erstellt ein {{cssxref("&lt;image&gt;")}} welches aus einem konstanten Farbverlauf besteht. Das Ergebnis dieser Funktion ist ein Objekt des CSS {{cssxref("&lt;gradient&gt;")}} Daten-Typs. Wie jeder andere Farbverlauf, ist der CSS Farbverlauf keine CSS {{cssxref("&lt;color&gt;")}} sondern ein Bild mit <a href="/en/CSS/image#no_intrinsic" title="en/CSS/image#no_intrinsic">keinen spezifischen Dimensionen</a>; Also hat er weder eine natürliche oder bevorzugte Größe, noch ein Größenverhältnis. Seine genaue Größe wird durch die Größe seines zugehörigen Elements bedingt.</p>
+
+<p>Ein konstanter Farbverlauf wird durch eine Achse, die <em>gradient line</em>, definiert wobei jeder Punkt auf dieser Linie eine andere Farbe hat. Senkrecht zur <em>gradient line</em> stehende Linien haben jeweils eine Farbe, die des jeweiligen Schnittpunks mit der <em>gradient line</em>.</p>
+
+<p> </p>
+
+<p><img alt="linear-gradient.png" src="/files/3537/linear-gradient.png" style="float: left; height: 383px; width: 309px;">Die <em>gradient line</em> wird definiert durch einen Winkel und dem Mittelpunkt des Quadrates auf dem das gradienten Bild abgebildet wird. Der Farbverlauf wird durch verschiedene Punkte definiert, dem Startpunkt, dem Endpunkt und den optional dazwischen liegenden Farbunterbrechungspunkten.</p>
+
+<p>Der Startpunkt ist der Punkt auf der <em>gradient line</em>, auf dem auch die Farbe anfängt. Er liegt genau auf dem Schnittpunkt der <em>gradient line</em> und einer Linie die senkrecht zu der Ecke des Bildes verläuft das im gleichen Quadranten liegt.  </p>
+
+<p>So ist auch der Endpunkt ein Punkt, an dem einer der beiden ausgesuchten Farben ganz erreicht wird. Er liegt auch genauso auf dem Schnittpunkt zwischen der <em>gradient line </em>und der aus der Ecke im gleichen Quadranten senkrecht verlaufenden Linie , einfacher ist er aber als Punktsymmetrische Spiegelung zum Startpunkt zu sehen, wobei der Spiegelpunkt dabei auf der Mitte des Bildes liegt.  </p>
+
+<p>Diese ungefähre und komplexe Definition des Start- und Endpunkts führt uns zu einer interessanten Eigenschaft, die manchmal <em>magic corners</em> genannt wird: die benachbarten Ecken der Start- und Endpunkte haben die gleiche Farbe, wie die jeweiligen Start- und Endpunkte.</p>
+
+<p>Mehr als nur die Farben des Start- und Endpunkts können festgesetzt werden.  Durch das definieren einiger Farbunterbrechungen, kann der Web-Entwickler einen mehr individuellen Übergang zwischen den Start- und den Endpunktfarben erreichen , oder einen mehrfarbigen Farbverlauf erstellen.</p>
+
+<p>Der Syntax eines konstanten Farberlaufes erlaubt zwar keine Wiederholung von Farbverläufen, aber durch das Setzen von Farbunterbrechungen kann ein ähnlicher Effekt erzielt werden. Für wiederholende Farbverläufe ist die {{ Cssxref("repeating-linear-gradient") }} CSS Eigenschaft geeignet.</p>
+
+<p>Wenn die Position einer Farbunterbrechung bedingungslos definiert wird, wird er genau auf halben Weg zwischen dem vorhergehenden und dem nachfolgenden Punkt gesetzt.  Außerdem kann die Position genau bestimmt werden, indem ein {{cssxref("&lt;length&gt;")}} oder ein {{cssxref("&lt;percentage&gt;")}} CSS Datentyp benutzt wird.</p>
+
+<div class="note">Farbverläufe sind als CSS <code>&lt;image&gt;</code> Datentypen definiert; sie können nur dann benutzt werden, wenn auch ein <code>&lt;image&gt;</code> Datentyp benötigt ist. Aus diesem Grund,<code> </code>wird ein <code>linear-gradient</code> nicht bei einer {{ Cssxref("background-color") }} und anderen Eigenschaften, die eine {{cssxref("&lt;color&gt;")}} benötigen,  funktionieren.</div>
+
+<h2 id="Syntax" style="">Syntax</h2>
+
+<pre class="twopartsyntaxbox notranslate">linear-gradient(
+  [ <a href="/en-US/CSS/angle" title="angle">&lt;angle&gt;</a> | to &lt;side-or-corner&gt; ,]? &lt;color-stop&gt; [, &lt;color-stop&gt;]+ )
+  \---------------------------------/ \----------------------------/
+    Definition of the gradient line        List of color stops
+
+where <code>&lt;side-or-corner&gt; = [left | right] || [top | bottom]</code>
+  and <code>&lt;color-stop&gt;     = &lt;color&gt; [ &lt;percentage&gt; | &lt;length&gt; ]?</code>
+</pre>
+
+<pre class="notranslate">linear-gradient( 45deg, blue, red );           /* A gradient on 45deg axis starting blue and finishing red */
+linear-gradient( to left top, blue, red);      /* A gradient going from the bottom right to the top left starting blue and
+                                                  finishing red */
+
+linear-gradient( 0deg, blue, green 40%, red ); /* A gradient going from the bottom to top, starting blue, being green after 40%
+                                                  and finishing red */
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>&lt;side-or-corner&gt;</code></dt>
+ <dd>Represents the position of the starting-point of the gradient line. It consists of two keywords: the first one indicates the horizontal side, <code>left</code> or <code>right</code>, and the second one the vertical side, <code>top</code> or <code>bottom</code>. The order is not relevant and each of the keyword is optional.<br>
+ The values <code>to top</code>, <code>to bottom</code>, <code>to left</code> and <code>to right</code> are translated into the angles <code>0deg</code>, <code>180deg</code>, <code>270deg</code>, <code>90deg</code> respectively. The others are translated into an <span style="background-color: #000044; color: #ffffff;">angle</span> that let the starting-point to be in the same quadrant than the described corner and so that the line defined by the starting-point and the corner is perpendicular to the gradient line. That way, the color described by the <code>&lt;color-stop&gt;</code> will exactly apply to the corner point. This is sometimes called the "<em>magic corner</em>" property. The end-point of the gradient line is the symmetrical point of the starting-point on the other direction of the center box.</dd>
+ <dt><code>&lt;angle&gt;</code></dt>
+ <dd>An angle of direction for the gradient. See {{ cssxref("&lt;angle&gt;") }}.</dd>
+ <dt><code>&lt;color-stop&gt;</code></dt>
+ <dd>This value is comprised of a {{cssxref("&lt;color&gt;")}} value, followed by an optional stop position (either a percentage or a {{cssxref("&lt;length&gt;")}} along the gradient axis).<br>
+ Rendering of color-stops in CSS gradients follows the same rules as color-stops in SVG gradients.</dd>
+</dl>
+
+<h3 id="History_of_the_syntax">History of the syntax</h3>
+
+<p>The syntax of <code>linear-gradient</code> has evolved since the <a class="external" href="http://www.webkit.org/blog/175/introducing-css-gradients/" title="http://www.webkit.org/blog/175/introducing-css-gradients/">first Apple proposal</a> implemented in 2008:</p>
+
+<pre class="notranslate"><code>-webkit-gradient(&lt;type&gt;, &lt;point&gt; [, &lt;radius&gt;]?, &lt;point&gt; [, &lt;radius&gt;]? [, &lt;stop&gt;]*)</code>
+</pre>
+
+<p>In the original syntax, the same function was used to create both linear and radial gradients.  However, the parameters needed in each case were different, resulting in a syntax that varied with the value of the first parameter.  The situation became more complicated if  other types of gradients, like conical gradients, were added, requiring the use of functions and non-standard or inconsistent css value specifications.  No draft was proposed to the W3C.</p>
+
+<p>An alternative syntax was proposed and implemented by Mozilla in 2009.  In this syntax, two CSS functions would be required; one for linear gradients, and the other for radial gradients. However, this syntax never shipped in a released product.  A third syntax was proposed.  This third syntax simplified the syntax for linear gradients to:</p>
+
+<pre class="notranslate">-moz-linear-gradient(<code>[ [ [top | bottom] || [left | right] ],]? &lt;color-stop&gt;[, &lt;color-stop&gt;]+);</code>
+</pre>
+
+<p>The new syntax did not require the <code>to()</code>, <code>from()</code>and <code>color-stop()</code> functions, so they were dropped. The order of the <code>top</code>/<code>bottom</code> and <code>left</code>/<code>right</code> keywords was also recognized as unimportant, so Mozilla removed the constraint of having <code>top</code>/<code>bottom</code> defined first. </p>
+
+<p>But the new syntax had still had one drawback: it allowed only vertical and horizontal gradients.  Finally, the syntax below was proposed to the W3C.  Following two more changes to solve the limitation on the direction of gradients, it was added to the CSS Images Values and Content Replacement Level 3 draft in 2011.</p>
+
+<ul>
+ <li>The support of an {{ cssxref("&lt;angle&gt;") }} as an origin, allowing gradients of any direction.</li>
+ <li>The definition of the magic corner algorithm which eases the work of Web developers by allowing an easy definition of the exact color at the corners.</li>
+</ul>
+
+<p>The color interpolation is also defined as happening in the pre-multiplied color space, in order to prevent non esthetic grey to appear when using color with different opacity. This syntax was implemented, prefixed, by both Webkit, without dropping the original one, and Trident (IE 10):</p>
+
+<pre class="notranslate">linear-gradient(<code> [ </code>[ {{cssxref("&lt;angle&gt;")}} | <code>[top | bottom] || [left | right] ],]? &lt;color-stop&gt;[, &lt;color-stop&gt;]+);</code>
+</pre>
+
+<p>Unfortunately, the addition of the {{ cssxref("&lt;angle&gt;") }} values to the syntax introduced an incoherence: the angle indicates a destination, but the keywords indicate a starting point.<a class="external" href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0377.html" title="http://lists.w3.org/Archives/Public/www-style/2011Jun/0377.html"># </a>This was fixed by a new syntax where the keyword are directions too, and preceded by the <code>to</code> keyword.</p>
+
+<pre class="notranslate">linear-gradient(<code>[ [ </code>[ {{cssxref("&lt;angle&gt;")}} | to <code>[top | bottom] || [left | right] ],]? &lt;color-stop&gt;[, &lt;color-stop&gt;]+);</code>
+</pre>
+
+<p>This should be the final syntax.</p>
+
+<p>A last semantic curiosity still exists between the prefixed variants and the unprefixed proposal. Following the initial Apple proposal, the prefixed variants of the syntax all uses the an {{ cssxref("&lt;angle&gt;") }} defined like polar angles, that is with <code>0deg</code> representing the East. To be coherent with the rest of CSS, the specification defines an angle with <code>0deg</code> representing the North. To prevent sites using prefixed version of the property to get suddenly broken, even when adapting to the otherwise forward-compatible final syntax, they keep the original angle definition (<code>0deg</code> = East<code>)</code>. They will switch to the correct spec when unprefixing the property. Also, as they aren't incompatible, Gecko supports, prefixed, both the syntax with the <code>to</code> keyword and without. Here again, the syntax without the keyword will be dropped when unprefixing.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Gradient_at_a_45_degree_angle">Gradient at a 45 degree angle</h3>
+
+<p>Positions can be specified along the gradient axis with a color for each of them, called "color-stops", and the areas between every color-stop smoothly transition between each other. Any one color in the gradient forms a straight line that is perpendicular to the gradient axis. In the below image, the gradient's axis starts from the top-left corner of the div, and is directed at a 45 degree angle. Two color-stops are specified, red and blue.</p>
+
+<pre class="brush: html notranslate">&lt;div style="width: 200px; height: 200px;"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">div {
+  background: linear-gradient(135deg, red, blue);
+}</pre>
+
+<h4 id="Result">Result:</h4>
+
+<p>{{ EmbedLiveSample("Gradient_at_a_45_degree_angle") }}</p>
+
+<h3 id="Gradient_that_starts_at_60_of_the_gradient_line">Gradient that starts at 60% of the gradient line</h3>
+
+<p>Sometimes we don't want a gradient that starts at the beginning of the line, but later. To reach this, add a color stop with same color where you want the gradient to start.</p>
+
+<pre class="brush: html notranslate">&lt;div style="width: 200px; height: 200px;"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">div {
+  background: linear-gradient(135deg, red, red 60%, blue);
+}</pre>
+
+<h4 id="Result_2">Result:</h4>
+
+<p>{{ EmbedLiveSample("Gradient_that_starts_at_60_of_the_gradient_line") }}</p>
+
+<h3 id="Gradient_with_multiple_color_stops">Gradient with multiple color stops</h3>
+
+<p>If the first color-stop does not have a <code>&lt;length&gt;</code> or <code>&lt;percentage&gt;</code>, it defaults to 0%. If the last color-stop does not have a <code>&lt;length&gt;</code> or <code>&lt;percentage&gt;</code>, it defaults to 100%. If a color-stop doesn't have a specified position and it isn't the first or last stop, then it is assigned the position that is half way between the previous stop and next stop.</p>
+
+<p>Color-stops must be specified in order. After assigning default values to the first and last stops if necessary, if a color-stop has a specified position that is less than the specified position of any color-stop before it in the list, its position is changed to be equal to the largest specified position of any color-stop before it.</p>
+
+<pre class="brush: html notranslate">&lt;div&gt;A rainbow made from a gradient&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">div {
+  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+}
+</pre>
+
+<h4 id="Result_3">Result:</h4>
+
+<p>{{ EmbedLiveSample("Gradient_with_multiple_color_stops") }}</p>
+
+<h3 id="Repeating_a_linear_gradient">Repeating a linear gradient</h3>
+
+<p>The <code>linear-gradient</code> does not allow repeating gradients. By default, the gradient will stretch to fill the element it is defined on. For this functionality, see {{ Cssxref("repeating-linear-gradient") }}.</p>
+
+<h3 id="Using_transparency">Using transparency</h3>
+
+<pre class="brush: html notranslate">&lt;div&gt;Linear with transparency&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">div {
+  background: linear-gradient(to bottom right, red, rgba(255,0,0,0));
+}</pre>
+
+<h4 id="Result_4">Result:</h4>
+
+<p>{{ EmbedLiveSample("Using_transparency") }}</p>
+
+<p>Gradient backgrounds are not affected by {{ Cssxref("background-size") }} if all points and lengths are specified using fixed units (as opposed to percentages or keywords, which are relative to the value of <code>background-size</code>).</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>If you set the {{ cssxref("background-image") }} property of the {{ HTMLElement("body") }} tag to a <code>linear-gradient</code>, the gradient <a class="external" href="https://web.archive.org/web/20120829151425/http://richard.milewski.org:80/archives/1014" title="http://richard.milewski.org/archives/1014">won't fill the browser screen unless </a>you also set the {{ cssxref("min-height") }} property of the document root (e.g. the {{ HTMLElement("html") }} tag) to 100%.</p>
+
+<h2 id="Specifications" name="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Images', '#linear-gradients', 'linear-gradient()') }}</td>
+   <td>{{ Spec2('CSS3 Images') }}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera (Presto)</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support (on {{ cssxref("background") }} and {{ cssxref("background-image") }})</td>
+   <td>{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }}<sup><a href="#bc3">[3]</a></sup><br>
+    {{ CompatGeckoDesktop("16") }}<sup><a href="#bc5">[5]</a></sup></td>
+   <td>10.0 (534.16){{ property_prefix("-webkit") }} <sup><a href="#bc2">[2]</a></sup><sup><a href="#bc3">[3]</a></sup></td>
+   <td>10.0 <sup><a href="#bc1">[1]</a></sup></td>
+   <td>11.10{{ property_prefix("-o") }} <sup><a href="#bc3">[3]</a></sup></td>
+   <td>5.1{{ property_prefix("-webkit") }}<sup><a href="#bc2">[2]</a></sup><sup><a href="#bc3">[3]</a></sup></td>
+  </tr>
+  <tr>
+   <td>On {{cssxref("border-radius")}}</td>
+   <td>{{CompatGeckoDesktop("29")}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>On any other property that accept {{cssxref("&lt;image&gt;")}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://www.webkit.org/blog/175/introducing-css-gradients/">Legacy webkit syntax</a>{{ non-standard_inline() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>3{{ property_prefix("-webkit") }} <sup><a href="#bc2">[2]</a></sup></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>4.0{{ property_prefix("-webkit") }}<sup><a href="#bc2">[2]</a></sup></td>
+  </tr>
+  <tr>
+   <td>Legacy <em>from </em>syntax (without <code>to</code>){{ non-standard_inline() }}</td>
+   <td>{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} <sup><a href="#bc4">[4]</a></sup></td>
+   <td>10.0 (534.16){{ property_prefix("-webkit") }} <sup><a href="#bc2">[2]</a></sup></td>
+   <td>10</td>
+   <td>11.10{{ property_prefix("-o") }}<sup><a href="#bc4">[4]</a></sup></td>
+   <td>5.1{{ property_prefix("-webkit") }}<sup><a href="#bc2%3E">[2]</a></sup></td>
+  </tr>
+  <tr>
+   <td>Standard syntax (using the <code>to</code> keyword)</td>
+   <td>{{CompatGeckoDesktop("16")}}</td>
+   <td>26.0 (537.27)</td>
+   <td>10</td>
+   <td>12.10</td>
+   <td>6.1</td>
+  </tr>
+  <tr>
+   <td>Interpolation hints (a percent without a color)</td>
+   <td>{{CompatGeckoDesktop("36")}}</td>
+   <td>40</td>
+   <td> </td>
+   <td>27</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera (Presto)</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatGeckoMobile("1.9.2") }}{{ property_prefix("-moz") }}<sup><a href="#bc3">[3]</a></sup><br>
+    {{ CompatGeckoMobile("16") }}<sup><a href="#bc5">[5]</a></sup></td>
+   <td>
+    <p>16{{property_prefix("-webkit")}}<br>
+     26</p>
+   </td>
+   <td>10</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p><sup><a name="bc1">[1]</a></sup> Internet Explorer 5.5 through 9.0 supports proprietary <a class="external" href="http://msdn.microsoft.com/en-us/library/ms532997(VS.85,loband).aspx"><code>filter: progid:DXImageTransform.Microsoft.Gradient()</code> filter</a>.</p>
+
+<p><sup><a name="bc2">[2]</a></sup> WebKit since 528 supports the legacy <a class="external" href="http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradients.html"><code>-webkit-gradient(linear,…)</code> function</a>. As of WebKit 534.16, it also supports the standard gradient syntax. Unlike in Gecko, in legacy WebKit you cannot specify both a position and angle in <code>-webkit-linear-gradient()</code>. You can achieve the same effect by offsetting the color stops.</p>
+
+<p><sup><a name="bc3">[3]</a></sup> Gecko, Opera &amp; Webkit considers {{ cssxref("&lt;angle&gt;") }} to start to the right, instead of the top. I.e. it considered an angle of <code>0deg</code> as a direction indicator pointing to the right. This is different from the latest specification where an angle of <code>0deg</code> as a direction indicator points to the top.</p>
+
+<p><sup><a name="bc4">[4]</a></sup> Firefox 3.6 and Opera 11.10 implemented, prefixed, an early syntax where the starting corner or side was indicated without the <code>to</code> keyword, and effectively considered as a <em>from</em> position. The <code>to</code> syntax has been added in Firefox 10 and Opera 11.60 , at first without removing the deprecated syntax and translation between the two is trivial:</p>
+
+<pre class="notranslate">linear-gradient(to top left, blue, red);</pre>
+
+<p>is almost the same as:</p>
+
+<pre class="notranslate">-moz-linear-gradient(bottom right, blue, red);</pre>
+
+<p>The legacy syntax, without <code>to</code>, is planned to go away when the prefix is removed.</p>
+
+<p><sup><a name="bc5">[5]</a></sup>Before Firefox 36, Gecko didn't apply gradient on the pre-multiplied color space, leading to shade of grey unexpectedly appearing when used with transparency.</p>
+
+<h3 id="Cross-browser_gradients">Cross-browser gradients</h3>
+
+<p>Considering all prefixes above, here is a gradient from pink to green, top to bottom.</p>
+
+<pre class="brush: css notranslate">.grad {
+  background-color: #F07575; /* fallback color if gradients are not supported */
+  background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
+  background-image:    -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Firefox (3.6 to 15) */
+  background-image:      -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Opera (11.1 to 12.0) */
+  background-image:         linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* Standard syntax; must be last */
+}
+</pre>
+
+<p>The -moz- prefixed rules are used for compatibility with older versions (Fx 3.6 to Fx 15). The -webkit-prefix is the only one that still needs to be included for Android 4.3-, iOS up to 6.1, and Safari 6. When using a prefix, do not use 'to'.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en/CSS/Using_CSS_gradients" title="en/Using gradients">Using CSS gradients</a>, {{ cssxref("radial-gradient", "radial-gradient()") }}, {{ cssxref("repeating-linear-gradient", "repeating-linear-gradient()") }}, {{ cssxref("repeating-radial-gradient", "repeating-radial-gradient()") }};</li>
+ <li>Some properties where it can be used: {{ cssxref("background-image") }}, {{ cssxref("background") }};</li>
+ <li><a class="external" href="http://lea.verou.me/css3patterns/" title="http://leaverou.me/css3patterns/">CSS Gradients Patterns Gallery, by Lea Verou</a><span class="external">;</span></li>
+ <li><a class="external" href="http://standardista.com/cssgradients" title="http://standardista.com/cssgradients">CSS3 Gradients Library, by Estelle Weyl</a>.</li>
+</ul>
+
+<p> </p>
diff --git a/files/de/web/css/list-style-image/index.html b/files/de/web/css/list-style-image/index.html
new file mode 100644
index 0000000000..dba30b4191
--- /dev/null
+++ b/files/de/web/css/list-style-image/index.html
@@ -0,0 +1,102 @@
+---
+title: list-style-image
+slug: Web/CSS/list-style-image
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Liste
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/list-style-image
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>list-style-image</code> CSS Eigenschaft gibt das Bild an, das als Aufzählungszeichen verwendet wird.</p>
+
+<p>Es ist oft einfacher, die Kurzform Eigenschaft {{ cssxref("list-style") }} zu verwenden.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Schlüsselwortwerte */
+list-style-image: none;
+
+/* &lt;url&gt; Werte */
+list-style-image: url('starsolid.gif');
+
+/* Globale Werte */
+list-style-image: inherit;
+list-style-image: initial;
+list-style-image: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>&lt;uri&gt;</code></dt>
+ <dd>Adresse des Bildes, das als Aufzählungszeichen verwendet werden soll.</dd>
+ <dt><code>none</code></dt>
+ <dd>Gibt an, dass kein Bild als Aufzählungszeichen verwendet werden soll. Falls dieser Wert gesetzt ist, wird das in {{ Cssxref("list-style-type") }} definierte Aufzählungszeichen verwendet.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+    &lt;li&gt;Item 1&lt;/li&gt;
+    &lt;li&gt;Item 2&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">ul {
+  list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif")
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample('Beispiele')}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Lists', '#list-style-image', 'list-style-image') }}</td>
+   <td>{{ Spec2('CSS3 Lists') }}</td>
+   <td>Erweitert die Unterstützung auf beliebige {{cssxref("&lt;image&gt;")}} Datentypen.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'generate.html#propdef-list-style-image', 'list-style-image') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.list-style-image")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{ Cssxref("list-style") }}, {{ Cssxref("list-style-type") }}, {{ Cssxref("list-style-position") }}</li>
+</ul>
diff --git a/files/de/web/css/list-style-position/index.html b/files/de/web/css/list-style-position/index.html
new file mode 100644
index 0000000000..6645dafb85
--- /dev/null
+++ b/files/de/web/css/list-style-position/index.html
@@ -0,0 +1,116 @@
+---
+title: list-style-position
+slug: Web/CSS/list-style-position
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/list-style-position
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>list-style-position</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft gibt die Position der Aufzählungszeichenbox innerhalb der Hauptblockbox an.</p>
+
+<p>Es ist oft einfacher, die Kurzform Eigenschaft {{cssxref("list-style")}} zu verwenden.</p>
+
+<p>{{cssinfo("list-style-position")}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="twopartsyntaxbox"><a href="/de/docs/Web/CSS/Wertdefinitionssyntax" title="CSS/Value_definition_syntax">Formale Syntax</a>: {{csssyntax("list-style-position")}}</pre>
+
+<pre>list-style-position: inside
+list-style-position: outside
+
+list-style-position: inherit
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>outside</code></dt>
+ <dd>Die Aufzählungszeichenbox liegt außerhalb der Hauptblockbox.</dd>
+ <dt><code>inside</code></dt>
+ <dd>Die Aufzählungszeichenbox ist die erste Inlinebox der Hauptblockbox, nach der der Inhalt des Elements steht.</dd>
+</dl>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul class="one"&gt; List 1
+  &lt;li&gt;List Item 1-1&lt;/li&gt;
+  &lt;li&gt;List Item 1-2&lt;/li&gt;
+  &lt;li&gt;List Item 1-3&lt;/li&gt;
+  &lt;li&gt;List Item 1-4&lt;/li&gt;
+&lt;/ul&gt;
+&lt;ul class="two"&gt; List 2
+  &lt;li&gt;List Item 2-1&lt;/li&gt;
+  &lt;li&gt;List Item 2-2&lt;/li&gt;
+  &lt;li&gt;List Item 2-3&lt;/li&gt;
+  &lt;li&gt;List Item 2-4&lt;/li&gt;
+&lt;/ul&gt;
+&lt;ul class="three"&gt; List 3
+  &lt;li&gt;List Item 3-1&lt;/li&gt;
+  &lt;li&gt;List Item 3-2&lt;/li&gt;
+  &lt;li&gt;List Item 3-3&lt;/li&gt;
+  &lt;li&gt;List Item 3-4&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css;">.one {
+  list-style:square inside;
+}
+
+.two {
+  list-style-position: outside;
+  list-style-type: circle;
+}
+
+.three {
+  list-style-image: url("https://mdn.mozillademos.org/files/11979/starsolid.gif");
+  list-style-position: inherit;
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Beispiel","200","420")}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Lists', '#list-style-position', 'list-style-position')}}</td>
+   <td>{{Spec2('CSS3 Lists')}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html#propdef-list-style-position', 'list-style-position')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.list-style-position")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{Cssxref("list-style")}}, {{Cssxref("list-style-type")}}, {{Cssxref("list-style-image")}}</li>
+</ul>
diff --git a/files/de/web/css/list-style-type/index.html b/files/de/web/css/list-style-type/index.html
new file mode 100644
index 0000000000..d2831799ac
--- /dev/null
+++ b/files/de/web/css/list-style-type/index.html
@@ -0,0 +1,562 @@
+---
+title: list-style-type
+slug: Web/CSS/list-style-type
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Liste
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+translation_of: Web/CSS/list-style-type
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die CSS-Eigenschaft <code>list-style-type</code> bestimmt, wie die Einträge einer Liste ausgezeichnet werden. Übliche Arten sind etwa Punkte oder eine Nummerierung vor jedem Eintrag:</p>
+
+<ul>
+ <li>Erster Eintrag</li>
+ <li>Zweiter Eintrag</li>
+</ul>
+
+<ol>
+ <li>Numerierte Einträge</li>
+ <li>Numerierte Einträge</li>
+</ol>
+
+<p>Meist wird diese Eigenschaft mit dem {{HTMLElement("li")}}-Element in Verbindung gebracht. Tatsächlich kann es sich jedoch um jedes beliebige Element handeln, dessen {{cssxref("display")}}-Eigenschaft <code>list-item</code> ist.</p>
+
+<div class="note">
+<p><strong>Hinweis:</strong>  <code>list-style-type</code> ist eine Eigenschaft von Listenelementen, nicht von Listen. Da sie vererbt wird, kann sie jedoch statt beim Listenelement selbst auch bei seinem Elternelement gesetzt werden (in der Regel {{HTMLElement("ol")}} or {{HTMLElement("ul")}}).</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Es wird kein Aufzählungszeichen angezeigt.</dd>
+ <dt>{{cssxref("&lt;string&gt;")}}</dt>
+ <dd>Der gebene, in Anführungszeichen gesetzte Text wird vor jedem Listeneintrag angezeigt. Beispiel: <code>list-style-type: '-'</code></dd>
+ <dt>{{cssxref("symbols()")}}</dt>
+ <dd>Statt über {{cssxref("@counter-style")}} eine Aufzählungsweise zu definieren, kann dies mit der Funktion symbols() auch direkt in der Eigenschaft <code>list-style-type</code> geschehen.<br>
+ Da diese Aufzählungsweise im Gegensatz zu per @counter-style definierten keinen Namen hat, wird sie auch als "anonym" bezeichnet.</dd>
+ <dt>{{cssxref("custom-ident", "&lt;custom-ident&gt;")}}</dt>
+ <dd>Ein Bezeichner, der dem Wert einer {{cssxref("@counter-style")}}-Regel entspricht oder einem der folgenden Stile:</dd>
+</dl>
+
+<dl style="background: rgb(238, 238, 238); padding: 0.5em 0px 0.5em 0.5em; border: 1px solid powderblue; font-size: 90%; -moz-column-width: 20em; -webkit-columns: 20em; -moz-column-rule: 1px solid powderblue; -webkit-column-rule: 1px solid powderblue;">
+ <dt><code>disc</code></dt>
+ <dd>
+ <ul style="list-style-type: disc;">
+  <li>Ein gefüllter Kreis (Standardwert)</li>
+ </ul>
+ </dd>
+ <dt><code>circle</code></dt>
+ <dd>
+ <ul style="list-style-type: circle;">
+  <li>Ein leerer Kreis</li>
+ </ul>
+ </dd>
+ <dt><code>square</code></dt>
+ <dd>
+ <ul style="list-style-type: square;">
+  <li>Ein gefülltes Quadrat</li>
+ </ul>
+ </dd>
+ <dt><code>decimal</code></dt>
+ <dd>
+ <ul style="list-style-type: decimal;">
+  <li>Dezimalzahlen</li>
+  <li>Beginnend bei 1</li>
+ </ul>
+ </dd>
+ <dt><code>cjk-decimal</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul>
+  <li>Han-Dezimalzahlen</li>
+  <li>z. B. 一, 二, 三, ..., 九八, 九九, 一〇〇</li>
+ </ul>
+ </dd>
+ <dt><code>decimal-leading-zero</code></dt>
+ <dd>
+ <ul style="list-style-type: decimal-leading-zero;">
+  <li>Dezimalzahlen</li>
+  <li>Aufgefüllt mit vorangestellten Nullen</li>
+  <li>z. B. 01, 02, 03, … 98, 99</li>
+ </ul>
+ </dd>
+ <dt><code>lower-roman</code></dt>
+ <dd>
+ <ul style="list-style-type: lower-roman;">
+  <li>Kleingeschriebene römische Zahlen</li>
+  <li>E.g. i, ii, iii, iv, v…</li>
+ </ul>
+ </dd>
+ <dt><code>upper-roman</code></dt>
+ <dd>
+ <ul style="list-style-type: upper-roman;">
+  <li>Großgeschriebene römische Zahlen</li>
+  <li>E.g. I, II, III, IV, V…</li>
+ </ul>
+ </dd>
+ <dt><code>lower-greek</code></dt>
+ <dd>
+ <ul style="list-style-type: lower-greek;">
+  <li>Kleingeschriebene griechische Zahlworte</li>
+  <li>Alpha, Beta, Gamma…</li>
+  <li>z. B. α, β, γ…</li>
+ </ul>
+ </dd>
+ <dt><code>lower-alpha</code></dt>
+ <dt><code>lower-latin</code></dt>
+ <dd>
+ <ul style="list-style-type: lower-alpha;">
+  <li>Kleingeschriebene lateinische Buchstaben</li>
+  <li>z. B. a, b, c, … z</li>
+  <li><code>lower-latin</code> wird nicht von IE7 und früher unterstützt</li>
+  <li>Siehe den Unterpunkt {{anch("Browser-Kompatibilität")}}.</li>
+ </ul>
+ </dd>
+ <dt><code>upper-alpha</code></dt>
+ <dt><code>upper-latin</code></dt>
+ <dd>
+ <ul style="list-style-type: upper-alpha;">
+  <li>Großgeschriebene lateinische Buchstaben</li>
+  <li>z. B. A, B, C, … Z</li>
+  <li><code>upper-latin</code> wird nicht von IE7 und früher unterstützt</li>
+ </ul>
+ </dd>
+ <dt><code>arabic-indic</code></dt>
+ <dt><code>-moz-arabic-indic</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-arabic-indic; list-style-type: arabic-indic;">
+  <li>Beispiel</li>
+ </ul>
+ </dd>
+ <dt><code>armenian</code></dt>
+ <dd>
+ <ul style="list-style-type: armenian;">
+  <li>Traditionelle armenische Nummerierung</li>
+  <li>z. B. ayb/ayp, ben/pen, gim/keem…</li>
+ </ul>
+ </dd>
+ <dt><code>bengali</code></dt>
+ <dt><code>-moz-bengali</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-bengali; list-style-type: bengali;">
+  <li>Beispiel</li>
+ </ul>
+ </dd>
+ <dt><code>cambodian</code> {{experimental_inline}}*</dt>
+ <dd>
+ <ul style="list-style-type: cambodian;">
+  <li>Beispiel</li>
+  <li>Ist ein Synonym für Khmer</li>
+ </ul>
+ </dd>
+ <dt><code>cjk-earthly-branch</code></dt>
+ <dt><code>-moz-cjk-earthly-branch</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-cjk-earthly-branch; list-style-type: cjk-earthly-branch;">
+  <li>Beispiel</li>
+ </ul>
+ </dd>
+ <dt><code>cjk-heavenly-stem</code></dt>
+ <dt><code>-moz-cjk-heavenly-stem</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-cjk-heavenly-stem; list-style-type: cjk-heavenly-stem;">
+  <li>Beispiel</li>
+ </ul>
+ </dd>
+ <dt><code>cjk-ideographic</code>{{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: cjk-ideographic;">
+  <li>Identisch zu <code>trad-chinese-informal</code></li>
+  <li>Z. B. 一萬一千一百一十一</li>
+ </ul>
+ </dd>
+ <dt><code>devanagari</code></dt>
+ <dt><code>-moz-devanagari</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-devanagari; list-style-type: devanagari;">
+  <li>Beispiel</li>
+ </ul>
+ </dd>
+ <dt><code>ethiopic-numeric</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: ethiopic-numeric;">
+  <li>Beispiel</li>
+ </ul>
+ </dd>
+ <dt><code>georgian</code></dt>
+ <dd>
+ <ul style="list-style-type: georgian;">
+  <li>Traditionelle georgische Nummerierung</li>
+  <li>z. B. an, ban, gan, … he, tan, in…</li>
+ </ul>
+ </dd>
+ <dt><code>gujarati</code></dt>
+ <dt><code>-moz-gujarati</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-gujarati; list-style-type: gujarati;">
+  <li>Beispiel</li>
+ </ul>
+ </dd>
+ <dt><code>gurmukhi</code></dt>
+ <dt><code>-moz-gurmukhi</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-gurmukhi; list-style-type: gurmukhi;">
+  <li>Beispiel</li>
+ </ul>
+ </dd>
+ <dt><code>hebrew</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul>
+  <li>Traditionelle hebräische Nummerierung</li>
+ </ul>
+ </dd>
+ <dt><code>hiragana</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul>
+  <li>a, i, u, e, o, ka, ki, …</li>
+  <li>(Japanisch)</li>
+ </ul>
+ </dd>
+ <dt><code>hiragana-iroha</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul>
+  <li>i, ro, ha, ni, ho, he, to, …</li>
+  <li>{{interwiki('wikipedia', 'Iroha')}} ist die alte japanische Silbenreihenfolge.</li>
+ </ul>
+ </dd>
+ <dt><code>japanese-formal</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul>
+  <li>Formelle japanische Nummerierung, wie sie in juristischen oder Wirtschaftsdokumenten verwendet wird.</li>
+  <li>z. B. 壱萬壱阡壱百壱拾壱</li>
+  <li>Änderungen an der Gestaltung der Kanji-Schriftzeichen, die zu Verwechslungen mit anderen führen könnten, werden unterdrückt.</li>
+ </ul>
+ </dd>
+ <dt><code>japanese-informal</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul>
+  <li>Formlose japanische Nummerierung</li>
+ </ul>
+ </dd>
+ <dt><code>kannada</code></dt>
+ <dt><code>-moz-kannada</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-kannada; list-style-type: kannada;">
+  <li>Beispiel</li>
+ </ul>
+ </dd>
+ <dt><code>katakana</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul>
+  <li>A, I, U, E, O, KA, KI, …</li>
+  <li>(Japanisch)</li>
+ </ul>
+ </dd>
+ <dt><code>katakana-iroha</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul>
+  <li>I, RO, HA, NI, HO, HE, TO, …</li>
+  <li>{{interwiki('wikipedia', 'Iroha')}} ist die alte japanische Silbenreihenfolge.</li>
+ </ul>
+ </dd>
+ <dt><code>khmer</code></dt>
+ <dt><code>-moz-khmer</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-khmer; list-style-type: khmer;">
+  <li>Beispiel</li>
+ </ul>
+ </dd>
+ <dt><code>korean-hangul-formal</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul>
+  <li>Koreanische Hangul-Nummerierung</li>
+  <li>z. B. 일만 일천일백일십일</li>
+ </ul>
+ </dd>
+ <dt><code>korean-hanja-formal</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul>
+  <li>Formelle koreanische Han-Nummerierung</li>
+  <li>z. B. 壹萬 壹仟壹百壹拾壹</li>
+ </ul>
+ </dd>
+ <dt><code>korean-hanja-informal</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul>
+  <li>Koreanische Hanja-Nummerierung</li>
+  <li>z. B. 萬 一千百十一</li>
+ </ul>
+ </dd>
+ <dt><code>lao</code></dt>
+ <dt><code>-moz-lao</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-lao; list-style-type: lao;">
+  <li>Beispiel</li>
+ </ul>
+ </dd>
+ <dt><code>lower-armenian</code> {{experimental_inline}}*</dt>
+ <dd>
+ <ul style="list-style-type: lower-armenian;">
+  <li>Beispiel</li>
+ </ul>
+ </dd>
+ <dt><code>malayalam</code></dt>
+ <dt><code>-moz-malayalam</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-malayalam; list-style-type: malayalam;">
+  <li>Beispiel</li>
+ </ul>
+ </dd>
+ <dt><code>mongolian</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: mongolian;">
+  <li>Beispiel</li>
+ </ul>
+ </dd>
+ <dt><code>myanmar</code></dt>
+ <dt><code>-moz-myanmar</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-myanmar; list-style-type: myanmar;">
+  <li>Beispiel</li>
+ </ul>
+ </dd>
+ <dt><code>oriya</code></dt>
+ <dt><code>-moz-oriya</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-oriya; list-style-type: oriya;">
+  <li>Beispiel</li>
+ </ul>
+ </dd>
+ <dt><code>persian</code> {{experimental_inline}}</dt>
+ <dt><code>-moz-persian</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-persian; list-style-type: persian;">
+  <li>Beispiel</li>
+ </ul>
+ </dd>
+ <dt><code>simp-chinese-formal</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul>
+  <li>Formelle Nummerierung in vereinfachtem Chinesisch</li>
+  <li>z. B. 壹万壹仟壹佰壹拾壹</li>
+ </ul>
+ </dd>
+ <dt><code>simp-chinese-informal</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul>
+  <li>Formlose Nummerierung in vereinfachtem Chinesisch</li>
+  <li>z. B. 一万一千一百一十一</li>
+ </ul>
+ </dd>
+ <dt><code>tamil</code> {{experimental_inline}}</dt>
+ <dt><code>-moz-tamil</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-tamil; list-style-type: tamil;">
+  <li>Beispiel</li>
+ </ul>
+ </dd>
+ <dt><code>telugu</code></dt>
+ <dt><code>-moz-telugu</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-telugu; list-style-type: telugu;">
+  <li>Beispiel</li>
+ </ul>
+ </dd>
+ <dt><code>thai</code></dt>
+ <dt><code>-moz-thai</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-thai; list-style-type: thai;">
+  <li>Beispiel</li>
+ </ul>
+ </dd>
+ <dt><code>tibetan</code> {{experimental_inline}}*</dt>
+ <dd>
+ <ul style="list-style-type: tibetan;">
+  <li>Beispiel</li>
+ </ul>
+ </dd>
+ <dt><code>trad-chinese-formal</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul>
+  <li>Formelle Nummerierung in traditionellem Chinesisch</li>
+  <li>z. B. 壹萬壹仟壹佰壹拾壹</li>
+ </ul>
+ </dd>
+ <dt><code>trad-chinese-informal</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul>
+  <li>Formlose Nummerierung in traditionellem Chinesisch</li>
+  <li>z. B. 一萬一千一百一十一</li>
+ </ul>
+ </dd>
+ <dt><code>upper-armenian</code> {{experimental_inline}}*</dt>
+ <dd>
+ <ul style="list-style-type: upper-armenian;">
+  <li>Beispiel</li>
+ </ul>
+ </dd>
+ <dt><code>disclosure-open</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: disclosure-open;">
+  <li>Zeigt an, dass der zugehörige Seitenbereich (etwa {{HTMLElement("details")}}) sichtbar ist.</li>
+ </ul>
+ </dd>
+ <dt><code>disclosure-closed</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: disclosure-closed;">
+  <li>Zeigt an, dass der zugehörige Seitenbereich (etwa {{HTMLElement("details")}}) versteckt ist.</li>
+ </ul>
+ </dd>
+ <dd>
+ <ul>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Nicht_standardisierte_Erweiterungen">Nicht standardisierte Erweiterungen</h3>
+
+<p>Zusätzliche Werte, die von Gecko (Firefox), Blink (Chrome und Opera) und WebKit (Safari) unterstützt werden, um Listenarten in anderen Sprachen anzubieten. Die Kompatibilitätstabelle weiter unten gibt nähere Auskunft zu den einzelnen Browsern.</p>
+
+<dl style="background: rgb(238, 238, 238); padding: 0.5em 0px 0.5em 0.5em; border: 1px solid powderblue; font-size: 90%; -moz-column-width: 16em; -webkit-columns: 16em; -moz-column-rule: 1px solid powderblue; -webkit-column-rule: 1px solid powderblue;">
+ <dt>-moz-ethiopic-halehame</dt>
+ <dd>
+ <ul>
+  <li>Beispiel</li>
+ </ul>
+ </dd>
+ <dt>-moz-ethiopic-halehame-am</dt>
+ <dd>
+ <ul>
+  <li>Beispiel</li>
+ </ul>
+ </dd>
+ <dt>ethiopic-halehame-ti-er</dt>
+ <dt>-moz-ethiopic-halehame-ti-er</dt>
+ <dd>
+ <ul>
+  <li>Beispiel</li>
+ </ul>
+ </dd>
+ <dt>ethiopic-halehame-ti-et</dt>
+ <dt>-moz-ethiopic-halehame-ti-et</dt>
+ <dd>
+ <ul>
+  <li>Beispiel</li>
+ </ul>
+ </dd>
+ <dt>hangul</dt>
+ <dt>-moz-hangul</dt>
+ <dd>
+ <ul>
+  <li>Beispiel</li>
+  <li>Beispiel</li>
+  <li>Beispiel</li>
+ </ul>
+ </dd>
+ <dt>hangul-consonant</dt>
+ <dt>-moz-hangul-consonant</dt>
+ <dd>
+ <ul>
+  <li>Beispiel</li>
+  <li>Beispiel</li>
+  <li>Beispiel</li>
+ </ul>
+ </dd>
+ <dt>urdu</dt>
+ <dt>-moz-urdu</dt>
+ <dd>
+ <ul>
+  <li>Beispiel</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">ol.normal {
+  list-style-type: upper-alpha;
+}
+
+/* Es kann auch die Kurzschreibweise "list-style" verwendet werden: */
+ol.shortcut {
+  list-style: upper-alpha;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ol class="normal"&gt;Liste 1
+  &lt;li&gt;Hallo&lt;/li&gt;
+  &lt;li&gt;Welt&lt;/li&gt;
+  &lt;li&gt;Was gibt's?&lt;/li&gt;
+&lt;/ol&gt;
+
+&lt;ol class="shortcut"&gt;Liste 2
+  &lt;li&gt;Schaut&lt;/li&gt;
+  &lt;li&gt;Gleich&lt;/li&gt;
+  &lt;li&gt;aus&lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<h3 id="Ergebnis">Ergebnis</h3>
+
+<p>{{EmbedLiveSample("Beispiele", "200", "300")}}</p>
+
+<h2 id="Hinweise">Hinweise</h2>
+
+<ul>
+ <li>Manche Listenarten setzen für die korrekte Darstellung voraus, dass eine passende Schriftart installiert ist.</li>
+ <li><code>cjk-ideographic</code> ist identisch zu <code>trad-chinese-informal</code>; es existiert lediglich aus Gründen der Rückwärtskompatibilität.</li>
+</ul>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Lists', '#list-style-type', 'list-style-type')}}</td>
+   <td>{{Spec2('CSS3 Lists')}}</td>
+   <td>Definiert CSS2.1-Zähler neu.<br>
+    Erweitert die Syntax um Unterstützung für <code>@counter-style-</code>Regeln.<br>
+    Definiert unter Verwendung von <code>@counter-style</code> die üblichen Stiltypen: <code>hebrew</code>, <code>cjk-ideographic</code>, <code>hiragana</code>, <code>hiragana-iroha</code>, <code>katakana</code>, <code>katakana-iroha</code>, <code>japanese-formal</code>, <code>japanese-informal</code>, <code>simp-chinese-formal</code>, <code>trad-chinese-formal</code>, <code>simp-chinese-formal</code>, <code>trad-chinese-formal</code>,<code>korean-hangul-formal</code>, <code>korean-hanja-informal</code>, <code>korean-hanja-formal</code>, <code>cjk-decimal</code>, <code>ethiopic-numeric</code>, <code>disclosure-open</code> und <code>disclosure-closed</code>.<br>
+    Erweitert <code>&lt;counter-style&gt;</code> um die Funktion <code>symbols()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html#propdef-list-style-type', 'list-style-type')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{Compat("css.properties.list-style-type")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}</li>
+</ul>
diff --git a/files/de/web/css/list-style/index.html b/files/de/web/css/list-style/index.html
new file mode 100644
index 0000000000..17e4e515f9
--- /dev/null
+++ b/files/de/web/css/list-style/index.html
@@ -0,0 +1,104 @@
+---
+title: list-style
+slug: Web/CSS/list-style
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/list-style
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>list-style</code> Eigenschaft ist eine Kurzform für {{cssxref("list-style-type")}}, {{cssxref("list-style-image")}}  und {{cssxref("list-style-position")}}.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="eval">list-style: [ list-style-type || list-style-position || list-style-image ] | inherit
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt>list-style-type</dt>
+ <dd>Siehe  {{cssxref("list-style-type")}}</dd>
+ <dt>list-style-image</dt>
+ <dd>Siehe  {{cssxref("list-style-image")}}</dd>
+ <dt>list-style-position</dt>
+ <dd>Siehe  {{cssxref("list-style-position")}}</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">List 1
+&lt;ul class="one"&gt;
+  &lt;li&gt;List Item1&lt;/li&gt;
+  &lt;li&gt;List Item2&lt;/li&gt;
+  &lt;li&gt;List Item3&lt;/li&gt;
+&lt;/ul&gt;
+List 2
+&lt;ul class="two"&gt;
+  &lt;li&gt;List Item A&lt;/li&gt;
+  &lt;li&gt;List Item B&lt;/li&gt;
+  &lt;li&gt;List Item C&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.one {
+  list-style: circle;
+}
+
+.two {
+  list-style: square inside;
+}</pre>
+
+<h3 id="Ergebnis">Ergebnis</h3>
+
+<p>{{EmbedLiveSample('Beispiele')}}</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Browser</th>
+   <th>ab Version</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td>1.0 (1.0)</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>3.5</td>
+  </tr>
+  <tr>
+   <td>Safari (WebKit)</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/CSS21/generate.html#propdef-list-style">CSS 2.1 Generated content #list-style</a></li>
+</ul>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref("list-style-type")}}, {{cssxref("list-style-image")}}, {{cssxref("list-style-position")}}</li>
+</ul>
+
+<div class="noinclude">{{ languages({ "en": "en/CSS/list-style", "es": "es/CSS/list-style", "fr": "fr/CSS/list-style", "ja": "ja/CSS/list-style", "pl": "pl/CSS/list-style", "pt": "pt/CSS/list-style"}) }}</div>
diff --git a/files/de/web/css/margin-bottom/index.html b/files/de/web/css/margin-bottom/index.html
new file mode 100644
index 0000000000..522efd3f45
--- /dev/null
+++ b/files/de/web/css/margin-bottom/index.html
@@ -0,0 +1,87 @@
+---
+title: margin-bottom
+slug: Web/CSS/margin-bottom
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/margin-bottom
+---
+<p>{{ CSSRef() }}</p>
+<h2 id="Übersicht">Übersicht</h2>
+<p>Die <code>margin-bottom</code> Eigenschaft legt den unteren Außenabstand eines Elements fest. Negative Werte sind erlaubt.</p>
+<ul>
+ <li>Standardwert: <code>0</code></li>
+ <li>Anwendbar auf: alle Elemente, in Tabellen nur auf Elemente mit <a href="/de/CSS/display" title="de/CSS/display">display</a> <code>table</code>, <code>table-caption</code> und <code>inline-table</code></li>
+ <li>Vererbbar: Nein</li>
+ <li>Prozentwerte: beziehen sich immer auf die <a href="/de/CSS/width" title="de/CSS/width">Breite</a> des umschließenden Blocks.</li>
+ <li>Medium: visuell</li>
+ <li>berechneter Wert: eine Prozentzahl wie festgelegt oder die absolute Länge.</li>
+</ul>
+<h2 id="Syntax">Syntax</h2>
+<pre class="eval">margin-bottom: &lt;Längenangabe&gt; | &lt;Prozentzahl&gt; | auto | inherit
+</pre>
+<h3 id="Werte">Werte</h3>
+<dl>
+ <dt>
+  &lt;Längenangabe&gt;</dt>
+ <dd>
+  Legt eine bestimmte <a href="/de/CSS/Einheiten#L.c3.a4ngen" title="de/CSS/Einheiten#L.c3.a4ngen">Länge</a> fest. Negative Werte sind erlaubt.</dd>
+ <dt>
+  &lt;Prozentzahl&gt;</dt>
+ <dd>
+  Ein <a href="/de/CSS/Einheiten#Prozent" title="de/CSS/Einheiten#Prozent">prozentualer</a> Wert, der sich auf die Breite des umschließenden Blocks (<em>containing block</em>) bezieht. Negative Werte sind erlaubt.</dd>
+ <dt>
+  auto</dt>
+ <dd>
+  <code>auto</code> wird von einem passendem Wert ersetzt, wobei die horizontalen bzw. vertikalen Dimensionen berücksichtigt werden.</dd>
+ <dt>
+  inherit</dt>
+ <dd>
+  Der Wert des Elternelements wird geerbt.</dd>
+</dl>
+<h2 id="Beispiele">Beispiele</h2>
+<pre>.content { margin-bottom: 5%; }
+.sidebox { margin-bottom: 10px; }
+.logo    { margin-bottom: -5px; }
+</pre>
+<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Browser</th>
+   <th>ab Version</th>
+   <th><code>auto</code> Wert</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>3.0</td>
+   <td>6.0 (strict mode)</td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td>1.0 (1.0)</td>
+   <td>1.0 (1.0)</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>3.5</td>
+   <td>3.5</td>
+  </tr>
+  <tr>
+   <td>Safari (WebKit)</td>
+   <td>1.0 (85)</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Spezifikation">Spezifikation</h2>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#margin-properties" lang="en">CSS 2.1 Visual formatting #margin</a></li>
+</ul>
+<h2 id="Siehe_auch">Siehe auch</h2>
+<ul>
+ <li><a href="/de/CSS/margin" title="de/CSS/margin"><code>margin</code></a>, <a href="/de/CSS/margin-right" title="de/CSS/margin-right"><code>margin-right</code></a>, <a href="/de/CSS/margin-top" title="de/CSS/margin-top"><code>margin-top</code></a>, <a href="/de/CSS/margin-left" title="de/CSS/margin-left"><code>margin-left</code></a></li>
+ <li><a href="/de/CSS/-moz-margin-start" title="de/CSS/-moz-margin-start"><code>-moz-margin-start</code></a>, <a href="/de/CSS/-moz-margin-end" title="de/CSS/-moz-margin-end"><code>-moz-margin-end</code></a></li>
+ <li><a href="/de/CSS/padding" title="de/CSS/padding"><code>padding</code></a></li>
+</ul>
+<p>{{ languages( { "en": "en/CSS/margin-bottom", "ja": "ja/CSS/margin-bottom" } ) }}</p>
diff --git a/files/de/web/css/margin-left/index.html b/files/de/web/css/margin-left/index.html
new file mode 100644
index 0000000000..e540e1f456
--- /dev/null
+++ b/files/de/web/css/margin-left/index.html
@@ -0,0 +1,87 @@
+---
+title: margin-left
+slug: Web/CSS/margin-left
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/margin-left
+---
+<p>{{ CSSRef() }}</p>
+<h2 id="Übersicht">Übersicht</h2>
+<p>Die <code>margin-left</code> Eigenschaft legt den linken Außenabstand eines Elements fest. Negative Werte sind erlaubt.</p>
+<ul>
+ <li>Standardwert: <code>0</code></li>
+ <li>Anwendbar auf: alle Elemente, in Tabellen nur auf Elemente mit <a href="/de/CSS/display" title="de/CSS/display">display</a> <code>table</code>, <code>table-caption</code> und <code>inline-table</code></li>
+ <li>Vererbbar: Nein</li>
+ <li>Prozentwerte: beziehen sich immer auf die <a href="/de/CSS/width" title="de/CSS/width">Breite</a> des umschließenden Blocks.</li>
+ <li>Medium: visuell</li>
+ <li>berechneter Wert: eine Prozentzahl wie festgelegt oder die absolute Länge.</li>
+</ul>
+<h2 id="Syntax">Syntax</h2>
+<pre class="eval">margin-left: &lt;Längenangabe&gt; | &lt;Prozentzahl&gt; | auto | inherit
+</pre>
+<h3 id="Werte">Werte</h3>
+<dl>
+ <dt>
+  &lt;Längenangabe&gt;</dt>
+ <dd>
+  Legt eine bestimmte <a href="/de/CSS/Einheiten#L.c3.a4ngen" title="de/CSS/Einheiten#L.c3.a4ngen">Länge</a> fest. Negative Werte sind erlaubt.</dd>
+ <dt>
+  &lt;Prozentzahl&gt;</dt>
+ <dd>
+  Ein <a href="/de/CSS/Einheiten#Prozent" title="de/CSS/Einheiten#Prozent">prozentualer</a> Wert, der sich auf die Breite des umschließenden Blocks (<em>containing block</em>) bezieht. Negative Werte sind erlaubt.</dd>
+ <dt>
+  auto</dt>
+ <dd>
+  <code>auto</code> wird von einem passendem Wert ersetzt, wobei die horizontalen bzw. vertikalen Dimensionen berücksichtigt werden.</dd>
+ <dt>
+  inherit</dt>
+ <dd>
+  Der Wert des Elternelements wird geerbt.</dd>
+</dl>
+<h2 id="Beispiele">Beispiele</h2>
+<pre>.content { margin-left: 5%; }
+.sidebox { margin-left: 10px; }
+.logo    { margin-left: -5px; }
+</pre>
+<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Browser</th>
+   <th>ab Version</th>
+   <th><code>auto</code> Wert</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>3.0</td>
+   <td>6.0 (strict mode)</td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td>1.0 (1.0)</td>
+   <td>1.0 (1.0)</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>3.5</td>
+   <td>3.5</td>
+  </tr>
+  <tr>
+   <td>Safari (WebKit)</td>
+   <td>1.0 (85)</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Spezifikation">Spezifikation</h2>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#margin-properties" lang="en">CSS 2.1 Visual formatting #margin</a></li>
+</ul>
+<h2 id="Siehe_auch">Siehe auch</h2>
+<ul>
+ <li><a href="/de/CSS/margin" title="de/CSS/margin"><code>margin</code></a>, <a href="/de/CSS/margin-right" title="de/CSS/margin-right"><code>margin-right</code></a>, <a href="/de/CSS/margin-bottom" title="de/CSS/margin-bottom"><code>margin-bottom</code></a>, <a href="/de/CSS/margin-top" title="de/CSS/margin-top"><code>margin-top</code></a></li>
+ <li><a href="/de/CSS/-moz-margin-start" title="de/CSS/-moz-margin-start"><code>-moz-margin-start</code></a>, <a href="/de/CSS/-moz-margin-end" title="de/CSS/-moz-margin-end"><code>-moz-margin-end</code></a></li>
+ <li><a href="/de/CSS/padding" title="de/CSS/padding"><code>padding</code></a></li>
+</ul>
+<p>{{ languages( { "en": "en/CSS/margin-left", "ja": "ja/CSS/margin-left" } ) }}</p>
diff --git a/files/de/web/css/margin-right/index.html b/files/de/web/css/margin-right/index.html
new file mode 100644
index 0000000000..e651d4a53d
--- /dev/null
+++ b/files/de/web/css/margin-right/index.html
@@ -0,0 +1,87 @@
+---
+title: margin-right
+slug: Web/CSS/margin-right
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/margin-right
+---
+<p>{{ CSSRef() }}</p>
+<h2 id="Übersicht">Übersicht</h2>
+<p>Die <code>margin-right</code> Eigenschaft legt den rechten Außenabstand eines Elements fest. Negative Werte sind erlaubt.</p>
+<ul>
+ <li>Standardwert: <code>0</code></li>
+ <li>Anwendbar auf: alle Elemente, in Tabellen nur auf Elemente mit <a href="/de/CSS/display" title="de/CSS/display">display</a> <code>table</code>, <code>table-caption</code> und <code>inline-table</code></li>
+ <li>Vererbbar: Nein</li>
+ <li>Prozentwerte: beziehen sich immer auf die <a href="/de/CSS/width" title="de/CSS/width">Breite</a> des umschließenden Blocks.</li>
+ <li>Medium: visuell</li>
+ <li>berechneter Wert: eine Prozentzahl wie festgelegt oder die absolute Länge.</li>
+</ul>
+<h2 id="Syntax">Syntax</h2>
+<pre class="eval">margin-right: &lt;Längenangabe&gt; | &lt;Prozentzahl&gt; | auto | inherit
+</pre>
+<h3 id="Werte">Werte</h3>
+<dl>
+ <dt>
+  &lt;Längenangabe&gt;</dt>
+ <dd>
+  Legt eine bestimmte <a href="/de/CSS/Einheiten#L.c3.a4ngen" title="de/CSS/Einheiten#L.c3.a4ngen">Länge</a> fest. Negative Werte sind erlaubt.</dd>
+ <dt>
+  &lt;Prozentzahl&gt;</dt>
+ <dd>
+  Ein <a href="/de/CSS/Einheiten#Prozent" title="de/CSS/Einheiten#Prozent">prozentualer</a> Wert, der sich auf die Breite des umschließenden Blocks (<em>containing block</em>) bezieht. Negative Werte sind erlaubt.</dd>
+ <dt>
+  auto</dt>
+ <dd>
+  <code>auto</code> wird von einem passendem Wert ersetzt, wobei die horizontalen bzw. vertikalen Dimensionen berücksichtigt werden.</dd>
+ <dt>
+  inherit</dt>
+ <dd>
+  Der Wert des Elternelements wird geerbt.</dd>
+</dl>
+<h2 id="Beispiele">Beispiele</h2>
+<pre>.content { margin-right: 5%; }
+.sidebox { margin-right: 10px; }
+.logo    { margin-right: -5px; }
+</pre>
+<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Browser</th>
+   <th>ab Version</th>
+   <th><code>auto</code> Wert</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>3.0</td>
+   <td>6.0 (strict mode)</td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td>1.0 (1.0)</td>
+   <td>1.0 (1.0)</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>3.5</td>
+   <td>3.5</td>
+  </tr>
+  <tr>
+   <td>Safari (WebKit)</td>
+   <td>1.0 (85)</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Spezifikation">Spezifikation</h2>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#margin-properties" lang="en">CSS 2.1 Visual formatting #margin</a></li>
+</ul>
+<h2 id="Siehe_auch">Siehe auch</h2>
+<ul>
+ <li><a href="/de/CSS/margin" title="de/CSS/margin"><code>margin</code></a>, <a href="/de/CSS/margin-top" title="de/CSS/margin-top"><code>margin-top</code></a>, <a href="/de/CSS/margin-bottom" title="de/CSS/margin-bottom"><code>margin-bottom</code></a>, <a href="/de/CSS/margin-left" title="de/CSS/margin-left"><code>margin-left</code></a></li>
+ <li><a href="/de/CSS/-moz-margin-start" title="de/CSS/-moz-margin-start"><code>-moz-margin-start</code></a>, <a href="/de/CSS/-moz-margin-end" title="de/CSS/-moz-margin-end"><code>-moz-margin-end</code></a></li>
+ <li><a href="/de/CSS/padding" title="de/CSS/padding"><code>padding</code></a></li>
+</ul>
+<p>{{ languages( { "en": "en/CSS/margin-right", "ja": "ja/CSS/margin-right" } ) }}</p>
diff --git a/files/de/web/css/margin-top/index.html b/files/de/web/css/margin-top/index.html
new file mode 100644
index 0000000000..daa9b03ad8
--- /dev/null
+++ b/files/de/web/css/margin-top/index.html
@@ -0,0 +1,87 @@
+---
+title: margin-top
+slug: Web/CSS/margin-top
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/margin-top
+---
+<p>{{ CSSRef() }}</p>
+<h2 id="Übersicht">Übersicht</h2>
+<p>Die <code>margin-top</code> Eigenschaft legt den oberen Außenabstand eines Elements fest. Negative Werte sind erlaubt.</p>
+<ul>
+ <li>Standardwert: <code>0</code></li>
+ <li>Anwendbar auf: alle Elemente, in Tabellen nur auf Elemente mit <a href="/de/CSS/display" title="de/CSS/display">display</a> <code>table</code>, <code>table-caption</code> und <code>inline-table</code></li>
+ <li>Vererbbar: Nein</li>
+ <li>Prozentwerte: beziehen sich immer auf die <a href="/de/CSS/width" title="de/CSS/width">Breite</a> des umschließenden Blocks.</li>
+ <li>Medium: visuell</li>
+ <li>berechneter Wert: eine Prozentzahl wie festgelegt oder die absolute Länge.</li>
+</ul>
+<h2 id="Syntax">Syntax</h2>
+<pre class="eval">margin-top: &lt;Längenangabe&gt; | &lt;Prozentzahl&gt; | auto | inherit
+</pre>
+<h3 id="Werte">Werte</h3>
+<dl>
+ <dt>
+  &lt;Längenangabe&gt;</dt>
+ <dd>
+  Legt eine bestimmte <a href="/de/CSS/Einheiten#L.c3.a4ngen" title="de/CSS/Einheiten#L.c3.a4ngen">Länge</a> fest. Negative Werte sind erlaubt.</dd>
+ <dt>
+  &lt;Prozentzahl&gt;</dt>
+ <dd>
+  Ein <a href="/de/CSS/Einheiten#Prozent" title="de/CSS/Einheiten#Prozent">prozentualer</a> Wert, der sich auf die Breite des umschließenden Blocks (<em>containing block</em>) bezieht. Negative Werte sind erlaubt.</dd>
+ <dt>
+  auto</dt>
+ <dd>
+  <code>auto</code> wird von einem passendem Wert ersetzt, wobei die horizontalen bzw. vertikalen Dimensionen berücksichtigt werden.</dd>
+ <dt>
+  inherit</dt>
+ <dd>
+  Der Wert des Elternelements wird geerbt.</dd>
+</dl>
+<h2 id="Beispiele">Beispiele</h2>
+<pre>.content { margin-top: 5%; }
+.sidebox { margin-top: 10px; }
+.logo    { margin-top: -5px; }
+</pre>
+<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Browser</th>
+   <th>ab Version</th>
+   <th><code>auto</code> Wert</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>3.0</td>
+   <td>6.0 (strict mode)</td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td>1.0 (1.0)</td>
+   <td>1.0 (1.0)</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>3.5</td>
+   <td>3.5</td>
+  </tr>
+  <tr>
+   <td>Safari (WebKit)</td>
+   <td>1.0 (85)</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Spezifikation">Spezifikation</h2>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#margin-properties" lang="en">CSS 2.1 Visual formatting #margin</a></li>
+</ul>
+<h2 id="Siehe_auch">Siehe auch</h2>
+<ul>
+ <li><a href="/de/CSS/margin" title="de/CSS/margin"><code>margin</code></a>, <a href="/de/CSS/margin-right" title="de/CSS/margin-right"><code>margin-right</code></a>, <a href="/de/CSS/margin-bottom" title="de/CSS/margin-bottom"><code>margin-bottom</code></a>, <a href="/de/CSS/margin-left" title="de/CSS/margin-left"><code>margin-left</code></a></li>
+ <li><a href="/de/CSS/-moz-margin-start" title="de/CSS/-moz-margin-start"><code>-moz-margin-start</code></a>, <a href="/de/CSS/-moz-margin-end" title="de/CSS/-moz-margin-end"><code>-moz-margin-end</code></a></li>
+ <li><a href="/de/CSS/padding" title="de/CSS/padding"><code>padding</code></a></li>
+</ul>
+<p>{{ languages( { "en": "en/CSS/margin-top", "ja": "ja/CSS/margin-top" } ) }}</p>
diff --git a/files/de/web/css/margin/index.html b/files/de/web/css/margin/index.html
new file mode 100644
index 0000000000..dac915749a
--- /dev/null
+++ b/files/de/web/css/margin/index.html
@@ -0,0 +1,121 @@
+---
+title: margin
+slug: Web/CSS/margin
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/margin
+---
+<p>{{ CSSRef() }}</p>
+<h2 id="Übersicht">Übersicht</h2>
+<p>Die <code>margin</code> Eigenschaft ist eine Kurzform für die Außenabstände aller vier Seiten eines Elements.</p>
+<ul>
+ <li>Standardwert: <code>0</code></li>
+ <li>Anwendbar auf: alle Elemente, in Tabellen nur auf Elemente mit <a href="/de/CSS/display" title="de/CSS/display">display</a> <code>table</code>, <code>table-caption</code> und <code>inline-table</code></li>
+ <li>Vererbbar: Nein</li>
+ <li>Prozentwerte: beziehen sich immer auf die <a href="/de/CSS/width" title="de/CSS/width">Breite</a> des umschließenden Blocks.</li>
+ <li>Medium: visuell</li>
+ <li>berechneter Wert: siehe einzelne Eigenschaften</li>
+</ul>
+<h2 id="Syntax">Syntax</h2>
+<pre class="eval">margin: &lt;Längenwert&gt;{1,4} | &lt;Prozentzahl&gt;{1,4} | inherit | auto
+</pre>
+<h3 id="Werte">Werte</h3>
+<p>Es werden bis zu vier der folgenden Werte akzeptiert:</p>
+<dl>
+ <dt>
+  &lt;Längenangabe&gt;</dt>
+ <dd>
+  Legt eine bestimmte <a href="/de/CSS/Einheiten#L.c3.a4ngen" title="de/CSS/Einheiten#L.c3.a4ngen">Länge</a> fest. Negative Werte sind erlaubt.</dd>
+ <dt>
+  &lt;Prozentzahl&gt;</dt>
+ <dd>
+  Ein <a href="/de/CSS/Einheiten#Prozent" title="de/CSS/Einheiten#Prozent">prozentualer</a> Wert, der sich auf die Breite des umschließenden Blocks (<em>containing block</em>) bezieht. Negative Werte sind erlaubt.</dd>
+ <dt>
+  auto</dt>
+ <dd>
+  <code>auto</code> wird von einem passendem Wert ersetzt, wobei die horizontalen bzw. vertikalen Dimensionen berücksichtigt werden.<br>
+  Bei <code>div { width:50%; margin:0 auto; }</code> wird das div Element horizontal zentriert.</dd>
+ <dt>
+  inherit</dt>
+ <dd>
+  Der Wert des Elternelements wird geerbt.</dd>
+ <dt>
+  Ein Wert</dt>
+ <dd>
+  Gilt für alle vier Seiten.</dd>
+ <dt>
+  Zwei Werte</dt>
+ <dd>
+  Der erste Wert bestimmt die <a href="/de/CSS/margin-top" title="de/CSS/margin-top">oberen</a> und <a href="/de/CSS/margin-bottom" title="de/CSS/margin-bottom">unteren</a> Abstände, der zweite Wert legt die Abstände <a href="/de/CSS/margin-right" title="de/CSS/margin-right">rechts</a> und <a href="/de/CSS/margin-left" title="de/CSS/margin-left">links</a> fest.</dd>
+ <dt>
+  Drei Werte</dt>
+ <dd>
+  Der erste Wert bestimmt den <a href="/de/CSS/margin-top" title="de/CSS/margin-top">oberen</a> Abstand, der zweite Wert legt die Abstände für <a href="/de/CSS/margin-right" title="de/CSS/margin-right">rechts</a> und <a href="/de/CSS/margin-left" title="de/CSS/margin-left">links</a> zusammen fest und der dritte Wert bestimmt den <a href="/de/CSS/margin-bottom" title="de/CSS/margin-bottom">unteren</a> Abstand.</dd>
+ <dt>
+  Vier Werte</dt>
+ <dd>
+  Für jede Seite können die Abstände einzeln festgelegt werden. In der Reihenfolge: <a href="/de/CSS/margin-top" title="de/CSS/margin-top">oben</a>, <a href="/de/CSS/margin-right" title="de/CSS/margin-right">rechts</a>, <a href="/de/CSS/margin-bottom" title="de/CSS/margin-bottom">unten</a>, <a href="/de/CSS/margin-left" title="de/CSS/margin-left">links</a>.</dd>
+</dl>
+<h2 id="Beispiele">Beispiele</h2>
+<pre>margin: 5%;                /* 5% Abstand auf allen Seiten */
+
+margin: 10px;              /* 10px Abstand auf allen Seiten */
+
+margin: 1.6em 20px;        /* 1.6em Abstand für oben und unten, 20px Abstand für rechts und links */
+
+margin: 10px 3% 1em;       /* oben 10px, links und rechts 3%, unten 1em */
+
+margin: 10px 3px 30px 5px; /* oben 10px, rechts 3px, unten 30px, links 5px */
+
+margin: 1em auto;          /* 1em Abstand oben und unten; die Box wird horizontal zentriert */
+
+margin: auto;              /* Die Box wird horizontal zentriert, kein Abstand (0) oben und unten */
+</pre>
+<pre style="margin: auto; background: gold; width: 66%;">margin:     auto;
+background: gold;
+width:      66%;</pre>
+<pre style="margin: -1em 0 100px -40px; background: plum; width: 20em;">margin:     -1em 0 100px -40px;
+background: plum;
+width:      20em</pre>
+<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Browser</th>
+   <th>ab Version</th>
+   <th><code>auto</code> Wert</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>3.0</td>
+   <td>6.0 (strict mode)</td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td>1.0 (1.0)</td>
+   <td>1.0 (1.0)</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>3.5</td>
+   <td>3.5</td>
+  </tr>
+  <tr>
+   <td>Safari (WebKit)</td>
+   <td>1.0 (85)</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Spezifikation">Spezifikation</h2>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#margin-properties" lang="en">CSS 2.1 Visual formatting #margin</a></li>
+</ul>
+<h2 id="Siehe_auch">Siehe auch</h2>
+<ul>
+ <li><a href="/de/CSS/margin-top" title="de/CSS/margin-top"><code>margin-top</code></a>, <a href="/de/CSS/margin-right" title="de/CSS/margin-right"><code>margin-right</code></a>, <a href="/de/CSS/margin-bottom" title="de/CSS/margin-bottom"><code>margin-bottom</code></a>, <a href="/de/CSS/margin-left" title="de/CSS/margin-left"><code>margin-left</code></a></li>
+ <li><a href="/de/CSS/-moz-margin-start" title="de/CSS/-moz-margin-start"><code>-moz-margin-start</code></a>, <a href="/de/CSS/-moz-margin-end" title="de/CSS/-moz-margin-end"><code>-moz-margin-end</code></a></li>
+ <li><a href="/de/CSS/padding" title="de/CSS/padding"><code>padding</code></a></li>
+</ul>
+<p>{{ languages( { "en": "en/CSS/margin", "ja": "ja/CSS/margin" } ) }}</p>
diff --git a/files/de/web/css/mask/index.html b/files/de/web/css/mask/index.html
new file mode 100644
index 0000000000..900127ae1b
--- /dev/null
+++ b/files/de/web/css/mask/index.html
@@ -0,0 +1,96 @@
+---
+title: mask
+slug: Web/CSS/mask
+tags:
+  - CSS
+  - Layout
+  - NeedsBrowserCompatibility
+  - Referenz
+  - SVG
+  - Web
+translation_of: Web/CSS/mask
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p><span class="seoSummary">The <code>mask</code> property in CSS allows users to alter the visibility of an item by either partially or fully hiding the item. This is accomplished by either masking or clipping the image at specific points.</span></p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Schlüsselwortwerte */
+mask: none;
+
+/* Bildwerte */
+mask: url(mask.png);                       /* Pixelbild, das als Maske verwendet wird */
+mask: url(masks.svg#star);                 /* Element mit SVG-Grafik, die als Maske verwendet wird */
+
+/* Kombinierte Werte */
+mask: url(masks.svg#star) luminance;       /* Element mit SVG-Grafik, die als Helligkeitsmaske verwendet wird */
+mask: url(masks.svg#star) 40px 20px;       /* Element mit SVG-Grafik, die als Maske verwendet wird, die 40px vom oberen Rand und 20px vom linken Rand positioniert ist */
+mask: url(masks.svg#star) 0 0/50px 50px;   /* Element mit SVG-Grafik, die als Maske mit einer Breite und Höhe von 50px verwendet wird */
+mask: url(masks.svg#star) repeat-x;        /* Element mit SVG-Grafik, die als horizontal wiederholte Maske verwendet wird */
+mask: url(masks.svg#star) stroke-box;      /* Element mit SVG-Grafik, die als Maske verwendet wird, die sich bis zur Box erstreckt, die von der Kontur eingeschlossen wird */
+mask: url(masks.svg#star) exclude;         /* Element mit SVG-Grafik, die als Maske verwendet wird und deren nicht überlappende Teile mit dem Hintergrund kombiniert werden */
+
+/* Globale Werte */
+mask: inherit;
+mask: initial;
+mask: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<p>Falls der Wert ein URL Wert ist, wird das Element als SVG-Maske verwendet, dass durch die URI referenziert wird.</p>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: css">.target {
+  mask: url(#c1);
+}
+
+.anothertarget {
+  mask: url(resources.svg#c1);
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks", "#the-mask", 'mask')}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>Erweitert die Benutzung auf HTML Elemente.<br>
+    Erweitert die Syntax, indem sie als eine Kurzschreibweise für die neuen <code>mask-*</code> Eigenschaften in dieser Spezifikation definiert wird.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.mask")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{Cssxref("clip-path")}}, {{Cssxref("filter")}}</li>
+ <li><a href="/de/docs/SVG_Effekte_auf_HTML_Inhalte_anwenden">SVG Effekte auf HTML Inhalte anwenden</a></li>
+ <li><a href="/de/docs/Web/SVG">SVG</a></li>
+</ul>
diff --git a/files/de/web/css/max-height/index.html b/files/de/web/css/max-height/index.html
new file mode 100644
index 0000000000..51205487ba
--- /dev/null
+++ b/files/de/web/css/max-height/index.html
@@ -0,0 +1,111 @@
+---
+title: max-height
+slug: Web/CSS/max-height
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - Layout
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+  - Web
+translation_of: Web/CSS/max-height
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>max-height</code> Eigenschaft wird verwendet, um die maximale Höhe eines Elements festzulegen. Das verhindert, dass der benutzte Wert der {{ Cssxref("height") }} Eigenschaft größer wird als der festgelegte Wert von <code>max-height</code>.</p>
+
+<p>{{ Cssxref("max-height") }} überschreibt {{cssxref("height")}}, aber {{ Cssxref("min-height") }} überschreibt {{ Cssxref("max-height") }}.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* &lt;length&gt; Wert */
+max-height: 3.5em;
+
+/* &lt;percentage&gt; Wert */
+max-height: 75%;
+
+/* Schlüsselwortwerte */
+max-height: none;
+max-height: max-content;
+max-height: min-content;
+max-height: fit-content;
+max-height: fill-available;
+
+/* Globale Werte */
+max-height: inherit;
+max-height: initial;
+max-height: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Eine feste Maximalhöhe. Siehe {{cssxref("&lt;length&gt;")}} für mögliche Einheiten.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Der {{cssxref("&lt;percentage&gt;")}} Wert wird unter Berücksichtigung der Höhe des beinhaltenden Blocks berechnet. Falls die Höhe des beinhaltenden Blocks nicht explizit angegeben wurde, wird der prozentuale Wert als <code>none</code> behandelt.</dd>
+ <dt><code>none</code></dt>
+ <dd>Das Element verfügt über keine maximale Höhe.</dd>
+ <dt><code>max-content</code> {{experimental_inline()}}</dt>
+ <dd>Die innere bevorzugte Höhe.</dd>
+ <dt><code>min-content</code> {{experimental_inline()}}</dt>
+ <dd>Die innere Minimalhöhe.</dd>
+ <dt><code>fill-available</code> {{experimental_inline()}}</dt>
+ <dd>Die Höhe des beinhaltenden Blocks minus dem horizontalen Außenabstand, Rand und Innenabstand. Einige Browser implementieren hierfür das veraltete Schlüsselwort <code>available</code>.</dd>
+ <dt><code>fit-content</code> {{experimental_inline()}}</dt>
+ <dd>Hat die gleiche Bedeutung wie <code>max-content.</code></dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: css">table { max-height: 75%; }
+
+form { max-height: none; }
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'max-height')}}</td>
+   <td>{{Spec2('CSS3 Sizing')}}</td>
+   <td>Fügt die Schlüsselwörter <code>max-content</code>, <code>min-content</code>, <code>fit-content</code> und <code>fill-available</code> hinzu.<br>
+    <em>Die Entwürfe zu CSS3 Box und CSS3 Writing Modes definierten zuvor beide diese Schlüsselwörter. Diese Entwürfe werden durch diese Spezifikation ersetzt.</em></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'max-height')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Definiert <code>max-height</code> als animierbar.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visudet.html#min-max-heights', 'max-height')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.max-height")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/CSS/Boxmodell" title="en/CSS/box_model">Das Boxmodell</a></li>
+ <li>{{cssxref("max-width")}}, {{cssxref("box-sizing")}}, {{cssxref("height")}}, {{cssxref("min-height")}}</li>
+</ul>
diff --git a/files/de/web/css/max-width/index.html b/files/de/web/css/max-width/index.html
new file mode 100644
index 0000000000..e8c6d3c08d
--- /dev/null
+++ b/files/de/web/css/max-width/index.html
@@ -0,0 +1,139 @@
+---
+title: max-width
+slug: Web/CSS/max-width
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/max-width
+---
+<p>{{ CSSRef() }}</p>
+<h2 id="Übersicht">Übersicht</h2>
+<p>Die <code>max-width</code> Eigenschaft wird verwendet, um die maximale Breite eines Elements festzulegen. Das verhindert, dass der benutzte Wert der <a href="/de/CSS/width" title="de/CSS/width"><code>width</code></a> Eigenschaft nicht größer wird als der festgelegte Wert von <code>max-width</code>.</p>
+<p>Hinweis: <code>max-width</code> überschreibt <a href="/de/CSS/width" title="de/CSS/width"><code>width</code></a>, allerdings überschreibt <a href="/de/CSS/min-width" title="de/CSS/min-width"><code>min-width</code></a> auch <code>max-width</code>.</p>
+<ul>
+ <li>Standardwert: <code>none</code></li>
+ <li>Anwendbar auf: Blockelemente und ersetzte Elemente, für &lt;table&gt; siehe <a href="/de/CSS/max-width#Browser_Kompatibilit.c3.a4t" title="de/CSS/max-width#Browser_Kompatibilit.c3.a4t">Browser Kompatibilität</a></li>
+ <li>Vererbbar: Nein</li>
+ <li>Prozentwerte: beziehen sich auf die Breite des umschließenden Blocks</li>
+ <li>Medium: visuell</li>
+ <li>berechneter Wert: die Prozentzahl wie festgelegt, die absolute Länge oder <code>none</code></li>
+</ul>
+<h2 id="Syntax">Syntax</h2>
+<pre class="eval">max-width:  &lt;Längenangabe&gt; | &lt;Prozentzahl&gt; | none | -moz-max-content | -moz-min-content | -moz-fit-content | -moz-available | inherit
+</pre>
+<h3 id="Werte">Werte</h3>
+<dl>
+ <dt>
+  &lt;Längenangabe&gt;</dt>
+ <dd>
+  Siehe <a href="/de/CSS/Einheiten#L.c3.a4ngen" title="MDC">Länge</a> für mögliche Einheiten.</dd>
+ <dt>
+  Prozentzahl</dt>
+ <dd>
+  Eine <a href="/de/CSS/Einheiten#Prozent" title="MDC">prozentuale</a> Angabe, die sich auf die Breite des umschließenden Blocks bezieht.</dd>
+ <dt>
+  none</dt>
+ <dd>
+  Das Element verfügt über keine maximale Breite.</dd>
+ <dt>
+  inherit</dt>
+ <dd>
+  Der Wert des Elternelements wird geerbt.</dd>
+</dl>
+<h4 id="Mozilla_Erweiterungen">Mozilla Erweiterungen</h4>
+<dl>
+ <dt>
+  -moz-max-content</dt>
+ <dd>
+  {{ gecko_minversion_inline("1.9") }} Bevorzugte intrinsische Breite.</dd>
+ <dt>
+  -moz-min-content</dt>
+ <dd>
+  {{ gecko_minversion_inline("1.9") }} Minimale intrinsische Breite.</dd>
+ <dt>
+  -moz-available</dt>
+ <dd>
+  {{ gecko_minversion_inline("1.9") }} Die Breite des umschließenden Blocks minus horizontalen margin, padding und border Werten.</dd>
+ <dt>
+  -moz-fit-content</dt>
+ <dd>
+  {{ gecko_minversion_inline("1.9") }} Gleichbedeutend zu <code>-moz-max-content.</code></dd>
+</dl>
+<h2 id="Beispiele">Beispiele</h2>
+<pre>body  { max-width: 40em; }
+table { max-width: 75%; }
+form  { max-width: none; }
+</pre>
+<p id="Beispiel_1_.7B.7B_gecko_minversion_inline(.221.9.22)_.7D.7D">Beispiel 1 {{ gecko_minversion_inline("1.9") }}</p>
+<pre>p { background: gold }
+</pre>
+<p style="background: gold;">The Mozilla community produces a lot of great software.</p>
+<p id="Beispiel_2_.7B.7B_gecko_minversion_inline(.221.9.22)_.7D.7D">Beispiel 2 {{ gecko_minversion_inline("1.9") }}</p>
+<pre>p { background: lightgreen;
+    max-width:  intrinsic;         /* Safari/WebKit */
+    max-width:  -moz-max-content;  /* Firefox/Gecko */
+  }
+</pre>
+<p style="background: lightgreen; max-width: -moz-max-content;">The Mozilla community produces a lot of great software.</p>
+<p id="Beispiel_3_.7B.7B_gecko_minversion_inline(.221.9.22)_.7D.7D">Beispiel 3 {{ gecko_minversion_inline("1.9") }}</p>
+<pre>p { background: lightblue;  max-width: -moz-min-content; }
+</pre>
+<p style="background: lightblue; max-width: -moz-min-content;">The Mozilla community produces a lot of great software.</p>
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Browser</th>
+   <th>ab Version</th>
+   <th>auf <code>&lt;table&gt;</code> anwendbar</th>
+   <th colspan="2">intrinsische Breite</th>
+   <th colspan="2">minimale intrinsische Breite</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td><strong>7.0</strong></td>
+   <td>nein</td>
+   <td>---</td>
+   <td>---</td>
+   <td>---</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td><strong>1.0</strong> (1.0)</td>
+   <td>ja</td>
+   <td>3.0 (1.9)</td>
+   <td><code>-moz-max-content</code></td>
+   <td>3.0 (1.9)</td>
+   <td><code>-moz-min-content</code></td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td><strong>4.0</strong></td>
+   <td>ja</td>
+   <td>---</td>
+   <td>---</td>
+   <td>---</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>Safari (WebKit)</td>
+   <td><strong>2.0.2</strong> (416), vorher fehlerhaft</td>
+   <td>nein</td>
+   <td>2.0 (412) ?</td>
+   <td><code>intrinsic</code></td>
+   <td>---</td>
+   <td>---</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Spezifikation">Spezifikation</h2>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths" lang="en">CSS 2.1 Visual formatting #max-width</a></li>
+</ul>
+<h2 id="Siehe_auch">Siehe auch</h2>
+<ul>
+ <li><a href="/de/CSS/width" title="de/CSS/width"><code>width</code></a>, <a href="/de/CSS/min-width" title="de/CSS/min-width"><code>min-width</code></a></li>
+ <li><a href="/de/CSS/height" title="de/CSS/height"><code>height</code></a>, <a href="/de/CSS/min-height" title="de/CSS/min-height"><code>min-height</code></a>, <a href="/de/CSS/max-height" title="de/CSS/max-height"><code>max-height</code></a></li>
+</ul>
+<p>{{ languages( { "en": "en/CSS/max-width", "es": "es/CSS/max-width", "fr": "fr/CSS/max-width" } ) }}</p>
diff --git a/files/de/web/css/media_queries/index.html b/files/de/web/css/media_queries/index.html
new file mode 100644
index 0000000000..c6da1617ab
--- /dev/null
+++ b/files/de/web/css/media_queries/index.html
@@ -0,0 +1,76 @@
+---
+title: Media queries
+slug: Web/CSS/Media_Queries
+tags:
+  - CSS
+  - Media Queries
+  - NeedsTranslation
+  - Overview
+  - Reference
+  - TopicStub
+translation_of: Web/CSS/Media_Queries
+---
+<p>{{CSSRef}}</p>
+
+<p><strong>Media Queries</strong> is a module of CSS that defines expressions allowing to tailor presentations to a specific range of output devices without changing the content itself.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="At-rules">At-rules</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@import")}}</li>
+ <li>{{cssxref("@media")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">Using media queries</a></dt>
+ <dd>Presents what media queries are doing and explains the possible expressions.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries">Testing media queries</a></dt>
+ <dd>Explains how to test a media query programmatically, from JavaScript.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Conditional')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>
+    <p><br>
+      </p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'media.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+{{Compat("css.at-rules.media")}}
diff --git a/files/de/web/css/media_queries/using_media_queries/index.html b/files/de/web/css/media_queries/using_media_queries/index.html
new file mode 100644
index 0000000000..f4d15a6c53
--- /dev/null
+++ b/files/de/web/css/media_queries/using_media_queries/index.html
@@ -0,0 +1,644 @@
+---
+title: Using media queries
+slug: Web/CSS/Media_Queries/Using_media_queries
+tags:
+  - NeedsTranslation
+translation_of: Web/CSS/Media_Queries/Using_media_queries
+---
+<p><span class="seoSummary">A <strong>media query</strong> consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Media queries, added in <a href="/en-US/docs/CSS/CSS3" title="/en-US/docs/CSS/CSS3">CSS3</a>, let the presentation of content be tailored to a specific range of output devices without having to change the content itself.</span></p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>Media queries consist of a <a class="internal" href="/en-US/docs/CSS/@media" title="/en-US/docs/CSS/@media">media type</a> and can, as of the CSS3 specification, contain one or more expressions, expressed as media features, which resolve to either true or false.  The result of the query is true if the media type specified in the media query matches the type of device the document is being displayed on <strong>and</strong> all expressions in the media query are true.</p>
+
+<pre class="brush: html">&lt;!-- CSS media query on a link element --&gt;
+&lt;link rel="stylesheet" media="(max-width: 800px)" href="example.css" /&gt;
+
+&lt;!-- CSS media query within a stylesheet --&gt;
+&lt;style&gt;
+@media (max-width: 600px) {
+  .facet_sidebar {
+    display: none;
+  }
+}
+&lt;/style&gt;</pre>
+
+<p>When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules. Style sheets with media queries attached to their <code>&lt;link&gt;</code> tags <a href="http://scottjehl.github.com/CSS-Download-Tests/" title="http://scottjehl.github.com/CSS-Download-Tests/">will still download</a> even if their media queries would return false (they will not apply, however).</p>
+
+<p>Unless you use the <code>not</code> or <code>only</code> operators, the media type is optional and the <code>all</code><span style="line-height: 1.572;"> </span><span style="line-height: 1.572;">type will be implied</span><span style="font-family: courier new,andale mono,monospace; line-height: normal;">.</span></p>
+
+<h3 id="Logical_operators">Logical operators</h3>
+
+<p>You can compose complex media queries using logical operators, including <code>not</code>, <code>and</code>, and <code>only</code>. The <code>and</code> operator is used for combining multiple <a href="#Media_features" title="#Media_features">media features</a> together into a single media query, requiring each chained feature to return true in order for the query to be true. The <code>not</code> operator is used to negate an entire media query. The <code>only</code> operator is used to apply a style only if the entire query matches, useful for preventing older browsers from applying selected styles. If you use the <code>not</code> or <code>only</code> operators, you <em>must</em> specify an explicit media type.</p>
+
+<p>You can also combine multiple media queries in a comma-separated list; if any of the media queries in the list is true, the entire media statement returns true. This is equivalent to an <code>or</code> operator.</p>
+
+<h4 id="and">and</h4>
+
+<p>The <code>and</code> keyword is used for combining multiple media features together, as well as combining media features with media types. A basic media query, a single media feature with the implied <code>all</code> media type, could look like this:</p>
+
+<pre class="brush: css">@media (min-width: 700px) { ... }</pre>
+
+<p>If, however, you wanted this to apply only if the display is in landscape, you could use an <code>and</code> operator to chain the media features together.</p>
+
+<pre class="brush: css">@media (min-width: 700px) and (orientation: landscape) { ... }</pre>
+
+<p>Now the above media query will only return true if the viewport is 700px wide or wider and the display is in landscape. If, however, you only wanted this to apply if the display in question was of the media type TV, you could chain these features with a media type using an <code>and</code> operator.</p>
+
+<pre class="brush: css">@media tv and (min-width: 700px) and (orientation: landscape) { ...  }</pre>
+
+<p>Now, the above media query will only apply if the media type is TV, the viewport is 700px wide or wider, and the display is in landscape.</p>
+
+<h4 id="comma-separated_lists">comma-separated lists</h4>
+
+<p>Comma-separated lists behave like the logical operator <code>or</code> when used in media queries. When using a comma-separated list of media queries, if any of the media queries returns true, the styles or style sheets get applied. Each media query in a comma-separated list is treated as an individual query, and any operator applied to one media query does not affect the others. This means the comma-separated media queries can target different media features, types, and states.</p>
+
+<p>For instance, if you wanted to apply a set of styles if the viewing device either had a minimum width of 700px or was a handheld in landscape, you could write the following:</p>
+
+<pre class="brush: css">@media (min-width: 700px), handheld and (orientation: landscape) { ... }</pre>
+
+<p>Above, if I were on a <code>screen</code> device with a viewport width of 800px, the media statement would return true because the first part, interpreted as <code>@media all and (min-width: 700px)</code> would apply to my device and therefore return true, despite the fact that my <code>screen</code> device would fail the <code>handheld</code> media type check in the second media query. Likewise, if I were on a <code>handheld</code> device held in landscape with a viewport width of 500px, while the first media query would fail due to the viewport width, the second media query would succeed and thus the media statement would return true.</p>
+
+<h4 id="not">not</h4>
+
+<p>The <code>not</code> keyword applies to the whole media query and returns true if the media query would otherwise return false (such as <code>monochrome</code> on a color display or a screen width of 600px with a <code>min-width: 700px</code> feature query). A <code>not</code> will only negate the media query it is applied to and not to every media query if present in a comma-separated list of media queries. The <code>not</code> keyword cannot be used to negate an individual feature query, only an entire media query. <span style="line-height: 1.572;">For example, the </span><code style="font-size: 14px;">not</code><span style="line-height: 1.572;"> is evaluated last in the following query:</span></p>
+
+<pre class="brush: css" style="font-size: 14px;">@media not all and (monochrome) { ... }
+</pre>
+
+<p>This means that the query is evaluated like this:</p>
+
+<pre class="brush: css" style="font-size: 14px;">@media not (all and (monochrome)) { ... }
+</pre>
+
+<p>... rather than like this:</p>
+
+<pre class="brush: css" style="font-size: 14px;">@media (not all) and (monochrome) { ... }</pre>
+
+<p>As another example, look at the following media query:</p>
+
+<pre class="brush: css" style="font-size: 14px;">@media not screen and (color), print and (color)
+</pre>
+
+<p>It is evaluated like this:</p>
+
+<pre class="brush: css" style="font-size: 14px;">@media (not (screen and (color))), print and (color)</pre>
+
+<h4 id="only">only</h4>
+
+<p><span style="line-height: 21px;">The </span><code style="font-size: 14px;">only</code><span style="line-height: 21px;"> keyword prevents older browsers that do not support media queries with media features from applying the given styles:</span></p>
+
+<pre class="brush: html">&lt;link rel="stylesheet" media="only screen and (color)" href="example.css" /&gt;
+</pre>
+
+<h3 id="Pseudo-BNF_(for_those_of_you_that_like_that_kind_of_thing)">Pseudo-BNF (for those of you that like that kind of thing)</h3>
+
+<pre>media_query_list: &lt;media_query&gt; [, &lt;media_query&gt; ]*
+media_query: [[only | not]? &lt;media_type&gt; [ and &lt;expression&gt; ]*]
+  | &lt;expression&gt; [ and &lt;expression&gt; ]*
+expression: ( &lt;media_feature&gt; [: &lt;value&gt;]? )
+media_type: all | aural | braille | handheld | print |
+  projection | screen | tty | tv | embossed
+media_feature: width | min-width | max-width
+  | height | min-height | max-height
+  | device-width | min-device-width | max-device-width
+  | device-height | min-device-height | max-device-height
+  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
+  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
+  | color | min-color | max-color
+  | color-index | min-color-index | max-color-index
+  | monochrome | min-monochrome | max-monochrome
+  | resolution | min-resolution | max-resolution
+  | scan | grid</pre>
+
+<p>Media queries are case insensitive.  Media queries involving unknown media types are always false.</p>
+
+<div class="note"><strong>Note:</strong> Parentheses are required around expressions; failing to use them is an error.</div>
+
+<h2 id="Media_features">Media features</h2>
+
+<p>Most media features can be prefixed with "min-" or "max-" to express "greater or equal to" or "less than or equal to" constraints.  This avoids using the "&lt;" and "&gt;" symbols, which would conflict with HTML and XML.  If you use a media feature without specifying a value, the expression resolves to true if the feature's value is non-zero.</p>
+
+<div class="note"><strong>Note:</strong> If a media feature doesn't apply to the device on which the browser is running, expressions involving that media feature are always false.  For example, querying the aspect ratio of an aural device always results in false.</div>
+
+<h3 id="color">color</h3>
+
+<p><strong>Value:</strong> {{cssxref("&lt;color&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br>
+ <strong>Accepts min/max prefixes:</strong> yes</p>
+
+<p>Indicates the number of bits per color component of the output device.  If the device is not a color device, this value is zero.</p>
+
+<div class="note"><strong>Note:</strong> If the color components have different numbers of bits per color component, the smallest number is used.  For example, if a display uses 5 bits for blue and red and 6 bits for green, then the device is considered to use 5 bits per color component.  If the device uses indexed colors, the minimum number of bits per color component in the color table is used.</div>
+
+<h4 id="Examples">Examples</h4>
+
+<p>To apply a style sheet to all color devices:</p>
+
+<pre class="brush: css">@media all and (color) { ... }
+</pre>
+
+<p>To apply a style sheet to devices with at least 4 bits per color component:</p>
+
+<pre class="brush: css">@media all and (min-color: 4) { ... }
+</pre>
+
+<h3 id="color-index">color-index</h3>
+
+<p><strong>Value:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br>
+ <strong>Accepts min/max prefixes:</strong> yes</p>
+
+<p>Indicates the number of entries in the color look-up table for the output device.</p>
+
+<h4 id="Examples_2">Examples</h4>
+
+<p>To indicate that a style sheet should apply to all devices using indexed color, you can do:</p>
+
+<pre class="brush: css">@media all and (color-index) { ... }
+</pre>
+
+<p>To apply a style sheet to indexed color devices with at least 256 colors:</p>
+
+<pre class="brush: html">&lt;link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" /&gt;
+</pre>
+
+<h3 id="aspect-ratio">aspect-ratio</h3>
+
+<p><strong>Value:</strong> {{cssxref("&lt;ratio&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}<br>
+ <strong>Accepts min/max prefixes:</strong> yes</p>
+
+<p>Describes the aspect ratio of the targeted display area of the output device.  This value consists of two positive integers separated by a slash ("/") character.  This represents the ratio of horizontal pixels (first term) to vertical pixels (second term).</p>
+
+<h4 id="Example">Example</h4>
+
+<p>The following selects a special style sheet to use for when the display area is at least as wide as it is high.</p>
+
+<pre class="brush: css">@media screen and (min-aspect-ratio: 1/1) { ... }</pre>
+
+<p>This selects the style when the aspect ratio is either 1:1 or greater. In other words, these styles will only be applied when the viewing area is square or landscape.</p>
+
+<h3 id="device-aspect-ratio">device-aspect-ratio</h3>
+
+<p><strong>Value:</strong> {{cssxref("&lt;ratio&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}<br>
+ <strong>Accepts min/max prefixes:</strong> yes</p>
+
+<p>Describes the aspect ratio of the output device.  This value consists of two positive integers separated by a slash ("/") character.  This represents the ratio of horizontal pixels (first term) to vertical pixels (second term).</p>
+
+<h4 id="Example_2">Example</h4>
+
+<p>The following selects a special style sheet to use for widescreen displays.</p>
+
+<pre class="brush: css">@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }</pre>
+
+<p>This selects the style when the aspect ratio is either 16:9 or 16:10.</p>
+
+<h3 id="device-height">device-height</h3>
+
+<p><strong>Value:</strong> {{cssxref("&lt;length&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}<br>
+ <strong>Accepts min/max prefixes:</strong> yes</p>
+
+<p>Describes the height of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).</p>
+
+<h4 id="Example_3">Example</h4>
+
+<p>To apply a style sheet to a document when displayed on a screen that is less than 800 pixels long, you can use this:</p>
+
+<pre class="brush: html">&lt;link rel="stylesheet" media="screen and (max-device-height: 799px)" /&gt;
+</pre>
+
+<h3 id="device-width">device-width</h3>
+
+<p><strong>Value:</strong> {{cssxref("&lt;length&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}<br>
+ <strong>Accepts min/max prefixes:</strong> yes</p>
+
+<p>Describes the width of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).</p>
+
+<h4 id="Example_4">Example</h4>
+
+<p>To apply a style sheet to a document when displayed on a screen that is less than 800 pixels wide, you can use this:</p>
+
+<pre class="brush: html" style="font-size: 14px;">&lt;link rel="stylesheet" media="screen and (max-device-width: 799px)" /&gt;</pre>
+
+<h3 id="grid">grid</h3>
+
+<p><strong>Value:</strong> <code>&lt;mq-boolean&gt;</code> which is an {{cssxref("&lt;integer&gt;")}} that can only have the <code>0</code> and <code>1</code> value.<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> all<br>
+ <strong>Accepts min/max prefixes:</strong> no</p>
+
+<p>Determines whether the output device is a grid device or a bitmap device.  If the device is grid-based (such as a TTY terminal or a phone display with only one font), the value is 1.  Otherwise it is zero.</p>
+
+<h4 id="Example_5">Example</h4>
+
+<p>To apply a style to handheld devices with a 15-character or narrower display:</p>
+
+<pre class="brush: css">@media handheld and (grid) and (max-width: 15em) { ... }
+</pre>
+
+<div class="note"><strong>Note:</strong> The "em" unit has a special meaning for grid devices; since the exact width of an "em" can't be determined, 1em is assumed to be the width of one grid cell horizontally, and the height of one cell vertically.</div>
+
+<h3 id="height">height</h3>
+
+<p><strong>Value:</strong> {{cssxref("&lt;length&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}<br>
+ <strong>Accepts min/max prefixes:</strong> yes</p>
+
+<p>The <code>height</code> media feature describes the height of the output device's rendering surface (such as the height of the viewport or of the page box on a printer).</p>
+
+<div class="note"><strong>Note:</strong> As the user resizes the window, Firefox switches style sheets as appropriate based on media queries using the <code>width</code> and <code>height</code> media features.</div>
+
+<h3 id="monochrome">monochrome</h3>
+
+<p><strong>Value:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br>
+ <strong>Accepts min/max prefixes:</strong> yes</p>
+
+<p>Indicates the number of bits per pixel on a monochrome (greyscale) device.  If the device isn't monochrome, the device's value is 0.</p>
+
+<h4 id="Examples_3">Examples</h4>
+
+<p>To apply a style sheet to all monochrome devices:</p>
+
+<pre class="brush: css">@media all and (monochrome) { ... }
+</pre>
+
+<p>To apply a style sheet to monochrome devices with at least 8 bits per pixel:</p>
+
+<pre class="brush: css">@media all and (min-monochrome: 8) { ... }
+</pre>
+
+<h3 id="orientation">orientation</h3>
+
+<p><strong>Value:</strong> <code>landscape</code> | <code>portrait</code><br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br>
+ <strong>Accepts min/max prefixes:</strong> no</p>
+
+<p>Indicates whether the viewport is in landscape (the display is wider than it is tall) or portrait (the display is taller than it is wide) mode.</p>
+
+<h4 id="Example_6">Example</h4>
+
+<p>To apply a style sheet only in portrait orientation:</p>
+
+<pre class="brush: css">@media all and (orientation: portrait) { ... }</pre>
+
+<div class="note"><strong>Note:</strong> This value does not correspond to actual device orientation. Opening the soft keyboard on most devices in portrait orientation will cause the viewport to become wider than it is tall, thereby causing the browser to use landscape styles instead of portrait.</div>
+
+<h3 id="resolution">resolution</h3>
+
+<p><strong>Value:</strong> {{cssxref("&lt;resolution&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Bitmap", "bitmap")}}<br>
+ <strong>Accepts min/max prefixes:</strong> yes</p>
+
+<p>Indicates the resolution (pixel density) of the output device.  The resolution may be specified in either dots per inch (dpi) or dots per centimeter (dpcm).</p>
+
+<h4 id="Example_7">Example</h4>
+
+<p>To apply a style sheet to devices with at least 300 dots per inch of resolution:</p>
+
+<pre class="brush: css">@media print and (min-resolution: 300dpi) { ... }
+</pre>
+
+<p>To replace the old <span style="font-family: courier new,andale mono,monospace; line-height: normal;">(min-device-pixel-ratio: 2) </span>syntax:</p>
+
+<pre class="brush: css">@media screen and (min-resolution: 2dppx) { ... }</pre>
+
+<h3 id="scan">scan</h3>
+
+<p><strong>Value:</strong> <code>progressive</code> | <code>interlace</code><br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/TV")}}<br>
+ <strong>Accepts min/max prefixes:</strong> no</p>
+
+<p>Describes the scanning process of television output devices.</p>
+
+<h4 id="Example_8">Example</h4>
+
+<p>To apply a style sheet only to progressive scanning televisions:</p>
+
+<pre class="brush: css">@media tv and (scan: progressive) { ... }
+</pre>
+
+<h3 id="width">width</h3>
+
+<p><strong>Value:</strong> {{cssxref("&lt;length&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}<br>
+ <strong>Accepts min/max prefixes:</strong> yes</p>
+
+<p>The <code>width</code> media feature describes the width of the rendering surface of the output device (such as the width of the document window, or the width of the page box on a printer).</p>
+
+<div class="note"><strong>Note:</strong> As the user resizes the window, Firefox switches style sheets as appropriate based on media queries using the <code>width</code> and <code>height</code> media features.</div>
+
+<h4 id="Examples_4">Examples</h4>
+
+<p>If you want to specify a style sheet for handheld devices, or screen devices with a width greater than 20em, you can use this query:</p>
+
+<pre class="brush: css">@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
+</pre>
+
+<p>This media query specifies a style sheet that applies to printed media wider than 8.5 inches:</p>
+
+<pre class="brush: html">&lt;link rel="stylesheet" media="print and (min-width: 8.5in)"
+    href="http://foo.com/mystyle.css" /&gt;
+</pre>
+
+<p>This query specifies a style sheet that is usable when the viewport is between 500 and 800 pixels wide:</p>
+
+<pre class="brush: css">@media screen and (min-width: 500px) and (max-width: 800px) { ... }
+</pre>
+
+<h2 id="Mozilla-specific_media_features">Mozilla-specific media features</h2>
+
+<p>Mozilla offers several Gecko-specific media features. Some of these may be proposed as official media features.</p>
+
+<p>{{ h3_gecko_minversion("-moz-images-in-menus", "1.9.2") }}</p>
+
+<p><strong>Value:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br>
+ <strong>Accepts min/max prefixes:</strong> no</p>
+
+<p>If the device allows images to appear in menus, this is 1; otherwise, the value is 0. This corresponds to the {{ cssxref(":-moz-system-metric(images-in-menus)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<p>{{ h3_gecko_minversion("-moz-mac-graphite-theme", "1.9.2") }}</p>
+
+<p><strong>Value:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br>
+ <strong>Accepts min/max prefixes:</strong> no</p>
+
+<p>If the user has configured their device to use the "Graphite" appearance on Mac OS X, this is 1. If the user is using the standard blue appearance, or is not on Mac OS X, this is 0.</p>
+
+<p>This corresponds to the {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<p>{{ h3_gecko_minversion("-moz-maemo-classic", "1.9.2") }}</p>
+
+<p><strong>Value:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br>
+ <strong>Accepts min/max prefixes:</strong> no</p>
+
+<p>If the user is using Maemo with the original theme, this is 1; if it's using the newer Fremantle theme, this is 0.</p>
+
+<p>This corresponds to the {{ cssxref(":-moz-system-metric(maemo-classic)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<p>{{ h3_gecko_minversion("-moz-device-pixel-ratio", "2.0") }} {{ deprecated_inline("gecko&amp;16") }}</p>
+
+<p><strong>Value:</strong> {{cssxref("&lt;number&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br>
+ <strong>Accepts min/max prefixes:</strong> yes</p>
+
+<p>Gives the number of device pixels per CSS pixel.</p>
+
+<div class="geckoVersionNote">
+<p><strong>Do not use this feature. </strong></p>
+
+<p>Use the <code>resolution</code> feature with the <code>dppx</code> unit instead.<br>
+ <br>
+ <code>-moz-device-pixel-ratio</code> may be used for compatibility with Firefox older than 16 and <code>-webkit-device-pixel-ratio</code> with WebKit-based browsers that do not support <code>dppx</code>.</p>
+
+<p>Example:</p>
+
+<pre>@media (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */
+       (min--moz-device-pixel-ratio: 2),    /* Older Firefox browsers (prior to Firefox 16) */
+       (min-resolution: 2dppx),             /* The standard way */
+       (min-resolution: 192dpi)             /* dppx fallback */ </pre>
+
+<p>See this <a href="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/" title="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/">CSSWG article</a> for compatibility good practices regarding <code>resolution</code> and <code>dppx</code>.</p>
+</div>
+
+<div class="note"><strong>Note</strong>: This media feature is also implemented by Webkit and by <a href="https://msdn.microsoft.com/en-us/library/ie/dn760733(v=vs.85).aspx">IE 11 for Windows Phone 8.1</a> as <span style="font-family: courier new;">-webkit-device-pixel-ratio</span>. The min and max prefixes as implemented by Gecko are named <span style="font-family: courier new;">min--moz-device-pixel-ratio</span> and <span style="font-family: courier new;">max--moz-device-pixel-ratio</span>; but the same prefixes as implemented by Webkit are named <span style="font-family: courier new;">-webkit-min-device-pixel-ratio</span> and <span style="font-family: courier new;">-webkit-max-device-pixel-ratio</span>.</div>
+
+<p>{{ h3_gecko_minversion("-moz-os-version", "25.0") }}</p>
+
+<p><strong>Value:</strong> <code>windows-xp</code> | <code>windows-vista</code> | <code>windows-win7</code> | <code>windows-win8 | windows-win10</code><br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br>
+ <strong>Accepts min/max prefixes:</strong> no</p>
+
+<p>Indicates which operating system version is currently being used. Currently only implemented on Windows. Possible values are:</p>
+
+<ul>
+ <li><code>windows-xp</code></li>
+ <li><code>windows-vista</code></li>
+ <li><code>windows-win7</code></li>
+ <li><code>windows-win8</code></li>
+ <li><code>windows-win10</code></li>
+</ul>
+
+<p>This is provided for application skins and other chrome code to be able to adapt to work well with the current operating system version.</p>
+
+<p>{{ h3_gecko_minversion("-moz-scrollbar-end-backward", "1.9.2") }}</p>
+
+<p><strong>Value:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br>
+ <strong>Accepts min/max prefixes:</strong> no</p>
+
+<p>If the device's user interface displays a backward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.</p>
+
+<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<p>{{ h3_gecko_minversion("-moz-scrollbar-end-forward", "1.9.2") }}</p>
+
+<p><strong>Value:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br>
+ <strong>Accepts min/max prefixes:</strong> no</p>
+
+<p>If the device's user interface displays a forward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.</p>
+
+<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<p>{{ h3_gecko_minversion("-moz-scrollbar-start-backward", "1.9.2") }}</p>
+
+<p><strong>Value:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br>
+ <strong>Accepts min/max prefixes:</strong> no</p>
+
+<p>If the device's user interface displays a backward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.</p>
+
+<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<p>{{ h3_gecko_minversion("-moz-scrollbar-start-forward", "1.9.2") }}</p>
+
+<p><strong>Value:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br>
+ <strong>Accepts min/max prefixes:</strong> no</p>
+
+<p>If the device's user interface displays a forward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.</p>
+
+<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<p>{{ h3_gecko_minversion("-moz-scrollbar-thumb-proportional", "1.9.2") }}</p>
+
+<p><strong>Value:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br>
+ <strong>Accepts min/max prefixes:</strong> no</p>
+
+<p>If the device's user interface displays the thumb of scrollbars proportionally (that is, sized based on the percentage of the document that is visible), this is 1. Otherwise it's 0.</p>
+
+<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<p>{{ h3_gecko_minversion("-moz-touch-enabled", "1.9.2") }}</p>
+
+<p><strong>Value:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br>
+ <strong>Accepts min/max prefixes:</strong> no</p>
+
+<p>If the device supports touch events (for a touch screen), this is 1. Otherwise it's 0.</p>
+
+<p>This corresponds to the {{ cssxref(":-moz-system-metric(touch-enabled)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<h4 id="Example_9">Example</h4>
+
+<p>You might use this to render your buttons slightly larger, for example, if the user is on a touch-screen device, to make them more finger-friendly.</p>
+
+<p>{{ h3_gecko_minversion("-moz-windows-classic", "1.9.2") }}</p>
+
+<p><strong>Value:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br>
+ <strong>Accepts min/max prefixes:</strong> no</p>
+
+<p>If the user is using Windows unthemed (in classic mode instead of using uxtheme), this is 1; otherwise it's 0.</p>
+
+<p>This corresponds to the {{ cssxref(":-moz-system-metric(windows-classic)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<p>{{ h3_gecko_minversion("-moz-windows-compositor", "1.9.2") }}</p>
+
+<p><strong>Value:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br>
+ <strong>Accepts min/max prefixes:</strong> no</p>
+
+<p>If the user is using Windows with the DWM compositor, this is 1; otherwise it's 0.</p>
+
+<p>This corresponds to the {{ cssxref(":-moz-system-metric(windows-compositor)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<p>{{ h3_gecko_minversion("-moz-windows-default-theme", "1.9.2") }}</p>
+
+<p><strong>Value:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br>
+ <strong>Accepts min/max prefixes:</strong> no</p>
+
+<p>If the user is currently using one of the default Windows themes (Luna, Royale, Zune, or Aero (including Vista Basic, Vista Advanced, and Aero Glass), this is 1. Otherwise it's 0.</p>
+
+<p>This corresponds to the {{ cssxref(":-moz-system-metric(windows-default-theme)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<p>{{ h3_gecko_minversion("-moz-windows-glass", "21.0") }}</p>
+
+<p><strong>Value:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br>
+ <strong>Accepts min/max prefixes:</strong> no</p>
+
+<p>If the user is using Windows Glass theme, this is 1; otherwise it's 0. Note that this only exists for Windows 7 and earlier.</p>
+
+<p>{{ h3_gecko_minversion("-moz-windows-theme", "2.0") }}</p>
+
+<p><strong>Value:</strong> <code>aero</code> | <code>luna-blue</code> | <code>luna-olive</code> | <code>luna-silver</code> | <code>royale</code> | <code>generic</code> | <code>zune</code><br>
+ <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br>
+ <strong>Accepts min/max prefixes:</strong> no</p>
+
+<p>Indicates which Windows theme is currently being used. Only available on Windows. Possible values are:</p>
+
+<ul>
+ <li><code>aero</code></li>
+ <li><code>luna-blue</code></li>
+ <li><code>luna-olive</code></li>
+ <li><code>luna-silver</code></li>
+ <li><code>royale</code></li>
+ <li><code>generic</code></li>
+ <li><code>zune</code></li>
+</ul>
+
+<p>This is provided for application skins and other chrome code to be able to adapt to work well with the current Windows theme.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatChrome("21") }}</td>
+   <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
+   <td>{{ CompatIE("9.0") }}</td>
+   <td>{{ CompatOpera("9") }}</td>
+   <td>{{ CompatSafari("4") }}</td>
+  </tr>
+  <tr>
+   <td>grid</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }} [1]</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>resolution</td>
+   <td>{{ CompatChrome("29") }}</td>
+   <td>{{ CompatGeckoDesktop("1.9.1") }} [2]<br>
+    {{ CompatGeckoDesktop("8.0") }} [3]</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>scan</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }} [4]</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <code>grid</code> media type is not supported</p>
+
+<p>[2] Supports {{cssxref("&lt;integer&gt;")}} values;</p>
+
+<p>[3] Supports {{cssxref("&lt;number&gt;")}} values, as per the spec.</p>
+
+<p>[4] <code>tv</code> media type is not supported</p>
+
+<p> </p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-mediaqueries/" title="http://www.w3.org/TR/css3-mediaqueries/">CSS 3 media query specification</a></li>
+ <li><a class="internal" href="/en-US/docs/CSS/@media" title="En/CSS/@media">Media types</a></li>
+ <li><a href="/en-US/docs/CSS/Using_media_queries_from_code" title="en/CSS/Using media queries from code">Using media queries from code</a></li>
+ <li><a href="http://i-skool.co.uk/mobile-development/web-design-for-mobiles-and-tablets-viewport-sizes/">List of mobile and tablet viewport sizes with pixel ratios and physical sizes</a></li>
+ <li><a href="http://davidwalsh.name/animate-media-queries">CSS Animations Between Media Queries</a> by David Walsh</li>
+</ul>
diff --git a/files/de/web/css/min-height/index.html b/files/de/web/css/min-height/index.html
new file mode 100644
index 0000000000..2214fc01a9
--- /dev/null
+++ b/files/de/web/css/min-height/index.html
@@ -0,0 +1,77 @@
+---
+title: min-height
+slug: Web/CSS/min-height
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/min-height
+---
+<p>{{ CSSRef() }}</p>
+<h2 id="Übersicht">Übersicht</h2>
+<p>Die <code>min-height</code> Eigenschaft wird verwendet, um die minimale Höhe eines Elements festzulegen. Das verhindert, dass der benutzte Wert der <a href="/de/CSS/height" title="de/CSS/height"><code>height</code></a> Eigenschaft nicht kleiner wird als der festgelegte Wert von <code>min-height</code>.</p>
+<p>Hinweis: <code>min-height</code> überschreibt sowohl <a href="/de/CSS/height" title="de/CSS/height"><code>height</code></a>, als auch <a href="/de/CSS/max-height" title="de/CSS/max-height"><code>max-height</code></a>.</p>
+<ul>
+ <li>Standardwert: <code>0</code></li>
+ <li>Anwendbar auf: Blockelemente und ersetzte Elemente</li>
+ <li>Vererbbar: Nein</li>
+ <li>Prozentwerte: beziehen sich auf die Höhe des umschließenden Blocks</li>
+ <li>Medium: visuell</li>
+ <li>berechneter Wert: die Prozentzahl wie festgelegt oder die absolute Länge</li>
+</ul>
+<h2 id="Syntax">Syntax</h2>
+<pre class="eval">min-height:  &lt;Längenangabe&gt; | &lt;Prozentzahl&gt; | inherit
+</pre>
+<h3 id="Werte">Werte</h3>
+<dl>
+ <dt>
+  &lt;Längenangabe&gt;</dt>
+ <dd>
+  Siehe <a href="/de/CSS/Einheiten#L.c3.a4ngen" title="de/CSS/Einheiten#L.c3.a4ngen">Länge</a> für mögliche Einheiten.</dd>
+ <dt>
+  Prozentzahl</dt>
+ <dd>
+  Eine <a href="/de/CSS/Einheiten#Prozent" title="de/CSS/Einheiten#Prozent">prozentuale</a> Angabe, die sich auf die Höhe des umschließenden Blocks bezieht.</dd>
+ <dt>
+  inherit</dt>
+ <dd>
+  Der Wert des Elternelements wird geerbt.</dd>
+</dl>
+<h2 id="Beispiele">Beispiele</h2>
+<pre>table { min-height: 75%; }
+form  { min-height: 0; }
+</pre>
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Browser</th>
+   <th>ab Version</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td><strong>7.0</strong></td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td><strong>1.0</strong> (1.0)</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td><strong>4.0</strong></td>
+  </tr>
+  <tr>
+   <td>Safari (WebKit)</td>
+   <td><strong>2.0.2</strong> (416), vorher fehlerhaft</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Spezifikation">Spezifikation</h2>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-heights" lang="en">CSS 2.1 Visual formatting #min-height</a></li>
+</ul>
+<h2 id="Siehe_auch">Siehe auch</h2>
+<ul>
+ <li><a href="/de/CSS/height" title="de/CSS/height"><code>height</code></a>, <a href="/de/CSS/max-height" title="de/CSS/max-height"><code>max-height</code></a></li>
+ <li><a href="/de/CSS/width" title="de/CSS/width"><code>width</code></a>, <a href="/de/CSS/max-width" title="de/CSS/max-width"><code>max-width</code></a>, <a href="/de/CSS/min-width" title="de/CSS/min-width"><code>min-width</code></a></li>
+</ul>
+<p>{{ languages( { "en": "en/CSS/min-height", "es": "es/CSS/min-height", "fr": "fr/CSS/min-height" } ) }}</p>
diff --git a/files/de/web/css/min-width/index.html b/files/de/web/css/min-width/index.html
new file mode 100644
index 0000000000..085949c9d6
--- /dev/null
+++ b/files/de/web/css/min-width/index.html
@@ -0,0 +1,101 @@
+---
+title: min-width
+slug: Web/CSS/min-width
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/min-width
+---
+<p>{{ CSSRef() }}</p>
+<h2 id="Übersicht">Übersicht</h2>
+<p>Die <code>min-width</code> Eigenschaft wird verwendet, um die minimale Breite eines Elements festzulegen. Das verhindert, dass der benutzte Wert der <a href="/de/CSS/width" title="de/CSS/width"><code>width</code></a> Eigenschaft nicht kleiner wird als der festgelegte Wert von <code>min-width</code>.</p>
+<p>Hinweis: <code>min-width</code> überschreibt sowohl <a href="/de/CSS/width" title="de/CSS/width"><code>width</code></a>, als auch <a href="/de/CSS/max-width" title="de/CSS/max-width"><code>max-width</code></a>.</p>
+<ul>
+ <li>Standardwert: <code>0</code></li>
+ <li>Anwendbar auf: Blockelemente und ersetzte Elemente, für &lt;table&gt; siehe <a href="/de/CSS/min-width#Browser_Kompatibilit.c3.a4t" title="de/CSS/min-width#Browser_Kompatibilit.c3.a4t">Browser Kompatibilität</a></li>
+ <li>Vererbbar: Nein</li>
+ <li>Prozentwerte: beziehen sich auf die Breite des umschließenden Blocks</li>
+ <li>Medium: visuell</li>
+ <li>berechneter Wert: die Prozentzahl wie festgelegt oder die absolute Länge</li>
+</ul>
+<h2 id="Syntax">Syntax</h2>
+<pre class="eval">min-width:  &lt;Längenangabe&gt; | &lt;Prozentzahl&gt; | -moz-max-content | -moz-min-content | -moz-fit-content | -moz-available | inherit
+</pre>
+<h3 id="Werte">Werte</h3>
+<dl>
+ <dt>
+  &lt;Längenangabe&gt;</dt>
+ <dd>
+  Siehe <a href="/de/CSS/Einheiten#L.c3.a4ngen" title="de/CSS/Einheiten#L.c3.a4ngen">Länge</a> für mögliche Einheiten.</dd>
+ <dt>
+  Prozentzahl</dt>
+ <dd>
+  Eine <a href="/de/CSS/Einheiten#Prozent" title="de/CSS/Einheiten#Prozent">prozentuale</a> Angabe, die sich auf die Breite des umschließenden Blocks bezieht.</dd>
+ <dt>
+  inherit</dt>
+ <dd>
+  Der Wert des Elternelements wird geerbt.</dd>
+</dl>
+<h4 id="Mozilla_Erweiterungen">Mozilla Erweiterungen</h4>
+<dl>
+ <dt>
+  -moz-max-content</dt>
+ <dd>
+  {{ gecko_minversion_inline("1.9") }} Bevorzugte intrinsische Breite.</dd>
+ <dt>
+  -moz-min-content</dt>
+ <dd>
+  {{ gecko_minversion_inline("1.9") }} Minimale intrinsische Breite.</dd>
+ <dt>
+  -moz-available</dt>
+ <dd>
+  {{ gecko_minversion_inline("1.9") }} Die Breite des umschließenden Blocks minus horizontalen margin, padding und border Werten.</dd>
+ <dt>
+  -moz-fit-content</dt>
+ <dd>
+  {{ gecko_minversion_inline("1.9") }} Gleichbedeutend zu <code>-moz-max-content.</code></dd>
+</dl>
+<h2 id="Beispiele">Beispiele</h2>
+<pre>table { min-width: 75%; }
+form  { min-width: 0; }
+</pre>
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Browser</th>
+   <th>ab Version</th>
+   <th>auf <code>&lt;table&gt;</code> anwendbar</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td><strong>7.0</strong></td>
+   <td>nein</td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td><strong>1.0</strong> (1.0)</td>
+   <td>ja</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td><strong>4.0</strong></td>
+   <td>ja</td>
+  </tr>
+  <tr>
+   <td>Safari (WebKit)</td>
+   <td><strong>2.0.2</strong> (416), vorher fehlerhaft</td>
+   <td>nein</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Spezifikation">Spezifikation</h2>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths" lang="en">CSS 2.1 Visual formatting #min-width</a></li>
+</ul>
+<h2 id="Siehe_auch">Siehe auch</h2>
+<ul>
+ <li><a href="/de/CSS/width" title="de/CSS/width"><code>width</code></a>, <a href="/de/CSS/max-width" title="de/CSS/max-width"><code>max-width</code></a></li>
+ <li><a href="/de/CSS/height" title="de/CSS/height"><code>height</code></a>, <a href="/de/CSS/min-height" title="de/CSS/min-height"><code>min-height</code></a>, <a href="/de/CSS/max-height" title="de/CSS/max-height"><code>max-height</code></a></li>
+</ul>
+<p>{{ languages( { "en": "en/CSS/min-width", "es": "es/CSS/min-width", "fr": "fr/CSS/min-width", "ja": "ja/CSS/min-width" } ) }}</p>
diff --git a/files/de/web/css/mix-blend-mode/index.html b/files/de/web/css/mix-blend-mode/index.html
new file mode 100644
index 0000000000..59efbddadd
--- /dev/null
+++ b/files/de/web/css/mix-blend-mode/index.html
@@ -0,0 +1,97 @@
+---
+title: mix-blend-mode
+slug: Web/CSS/mix-blend-mode
+tags:
+  - CSS
+  - CSS Compositing
+  - CSS Eigenschaft
+translation_of: Web/CSS/mix-blend-mode
+---
+<p>{{CSSRef()}}</p>
+
+<h2 id="Summary" name="Summary">Übersicht</h2>
+
+<p>Die <code>mix-blend-mode</code> CSS Eigenschaft beschreibt, wie sich der Inhalt des Elements mit dem Inhalt des Elements unter ihm und dem Element-Hintergrund vermischen soll.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Keyword values */
+mix-blend-mode: normal;
+mix-blend-mode: multiply;
+mix-blend-mode: screen;
+mix-blend-mode: overlay;
+mix-blend-mode: darken;
+mix-blend-mode: lighten;
+mix-blend-mode: color-dodge;
+mix-blend-mode: color-burn;
+mix-blend-mode: hard-light;
+mix-blend-mode: soft-light;
+mix-blend-mode: difference;
+mix-blend-mode: exclusion;
+mix-blend-mode: hue;
+mix-blend-mode: saturation;
+mix-blend-mode: color;
+mix-blend-mode: luminosity;
+
+/* Global values */
+mix-blend-mode: initial;
+mix-blend-mode: inherit;
+mix-blend-mode: unset;
+</pre>
+
+<h3 id="Values" name="Values">Werte</h3>
+
+<dl>
+ <dt><code>&lt;blend-mode&gt;</code></dt>
+ <dd>Ein {{cssxref("&lt;blend-mode&gt;")}} der den zu verwendenden Mischmodus festlegt. Mehrere Werte können per Komma getrennt angegeben werden.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<pre class="brush: html">&lt;svg&gt;
+  &lt;circle cx="40" cy="40" r="40" fill="red"/&gt;
+  &lt;circle cx="80" cy="40" r="40" fill="lightgreen"/&gt;
+  &lt;circle cx="60" cy="80" r="40" fill="blue"/&gt;
+&lt;/svg&gt;</pre>
+
+<pre class="brush:css">circle { mix-blend-mode: screen; }</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Examples", "100%", "180")}}</p>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('Compositing', '#mix-blend-mode', 'mix-blend-mode') }}</td>
+   <td>{{ Spec2('Compositing') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Unterstützung</h2>
+
+{{Compat("css.properties.mix-blend-mode")}}
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref("&lt;blend-mode&gt;")}}</li>
+ <li>{{cssxref("background-blend-mode")}}</li>
+</ul>
diff --git a/files/de/web/css/motion_path/index.html b/files/de/web/css/motion_path/index.html
new file mode 100644
index 0000000000..5c09de0a90
--- /dev/null
+++ b/files/de/web/css/motion_path/index.html
@@ -0,0 +1,104 @@
+---
+title: Bewegungspfad
+slug: Web/CSS/Motion_Path
+tags:
+  - Bewegungspfad
+  - CSS
+  - Experimentell
+  - Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Motion_Path
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><strong>Motion Path</strong> ist ein CSS Modul, das es Autoren erlaubt, beliebige grafische Objekte entlang eines benutzerdefinierten Pfads zu animieren.</p>
+
+<h2 id="Referenz">Referenz</h2>
+
+<h3 id="Eigenschaften">Eigenschaften</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("motion")}}</li>
+ <li>{{cssxref("motion-path")}}</li>
+ <li>{{cssxref("motion-offset")}}</li>
+ <li>{{cssxref("motion-rotation")}}</li>
+</ul>
+</div>
+
+<h2 id="Anleitungen">Anleitungen</h2>
+
+<p><em>Keine.</em></p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Spezifikation</th>
+   <th>Status</th>
+   <th>Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Motion Path Level 1')}}</td>
+   <td>{{Spec2('Motion Path Level 1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome für Android</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/de/web/css/mozilla_extensions/index.html b/files/de/web/css/mozilla_extensions/index.html
new file mode 100644
index 0000000000..d91ad7bb00
--- /dev/null
+++ b/files/de/web/css/mozilla_extensions/index.html
@@ -0,0 +1,661 @@
+---
+title: Mozilla CSS Erweiterungen
+slug: Web/CSS/Mozilla_Extensions
+tags:
+  - CSS
+  - CSS Referenz
+  - 'CSS:Mozilla Erweiterungen'
+translation_of: Web/CSS/Mozilla_Extensions
+---
+<div>{{CSSRef}}</div>
+
+<p>Mozilla unterstützt eine Reihe von Erweiterungen zu <a href="/de/docs/Web/CSS">CSS</a>, die durch das Präfix <code>-moz-</code> gekennzeichnet sind.</p>
+
+<p>Manche dieser Eigenschaften wurden zu Entwürfen zu CSS Spezifikationen für die Aufnahme in der finalen Empfehlung hinzugefügt, sind jedoch immer noch experimentell. Die entgültige Standardeigenschaft kann sich von der Implementierung mit Präfix unterscheiden. Einige dieser nicht standardisierten Eigenschaften beziehen sich nur auf XUL Elemente.</p>
+
+<p>Wenn sie standardisiert und die Unterstützung für die Variante ohne Präfix hinzugefügt wurde, werden die Eigenschaften mit Präfix entfernt.</p>
+
+<h2 id="Eigenschaften_mit_Mozilla-Präfix_die_standardisiert_werden">Eigenschaften mit Mozilla-Präfix, die standardisiert werden</h2>
+
+<div class="index">
+<h3 id="A_–_C">A – C</h3>
+
+<ul>
+ <li>{{Cssxref("clip-path")}} (bezieht sich auf mehr als SVG)</li>
+ <li>{{Cssxref("-moz-column-count")}}</li>
+ <li>{{Cssxref("-moz-column-fill")}}</li>
+ <li>{{Cssxref("-moz-column-gap")}}</li>
+ <li>{{Cssxref("-moz-column-width")}}</li>
+ <li>{{Cssxref("-moz-column-rule")}}</li>
+ <li>{{Cssxref("-moz-column-rule-width")}}</li>
+ <li>{{Cssxref("-moz-column-rule-style")}}</li>
+ <li>{{Cssxref("-moz-column-rule-color")}}</li>
+</ul>
+
+<h3 id="F">F</h3>
+
+<ul>
+ <li>{{Cssxref("filter")}} (bezieht sich auf mehr als SVG)</li>
+</ul>
+
+<h3 id="G_–_H">G – H</h3>
+
+<ul>
+ <li>{{Cssxref("-moz-hyphens")}}</li>
+</ul>
+
+<h3 id="I_–_M">I – M</h3>
+
+<ul>
+ <li>{{Cssxref("mask")}} (bezieht sich auf mehr als SVG)</li>
+</ul>
+
+<h3 id="N_–_P">N – P</h3>
+
+<ul>
+ <li>{{Cssxref("pointer-events")}} (bezieht sich auf mehr als SVG)</li>
+</ul>
+
+<h3 id="Q_–_Z">Q – Z</h3>
+
+<ul>
+ <li>{{cssxref("-moz-tab-size")}}</li>
+ <li>{{cssxref("-moz-text-align-last")}}</li>
+ <li>{{cssxref("-moz-text-size-adjust")}}</li>
+</ul>
+</div>
+
+<h2 id="Proprietäre_Eigenschaften_mit_Mozilla-Präfix_(nicht_auf_Webseiten_verwenden)">Proprietäre Eigenschaften mit Mozilla-Präfix (nicht auf Webseiten verwenden)</h2>
+
+<div class="index">
+<h3 id="A">A</h3>
+
+<ul>
+ <li>{{Cssxref("-moz-appearance")}}</li>
+</ul>
+
+<h3 id="B">B</h3>
+
+<ul>
+ <li>{{Cssxref("-moz-binding")}}</li>
+ <li>{{Cssxref("-moz-border-bottom-colors")}}</li>
+ <li>{{Cssxref("-moz-border-left-colors")}}</li>
+ <li>{{Cssxref("-moz-border-right-colors")}}</li>
+ <li>{{Cssxref("-moz-border-top-colors")}}</li>
+ <li>{{Cssxref("-moz-box-align")}}</li>
+ <li>{{Cssxref("-moz-box-direction")}}</li>
+ <li>{{Cssxref("-moz-box-flex")}}</li>
+ <li>{{Cssxref("-moz-box-ordinal-group")}}</li>
+ <li>{{Cssxref("-moz-box-orient")}}</li>
+ <li>{{Cssxref("-moz-box-pack")}}</li>
+</ul>
+
+<h3 id="C_–_F">C – F</h3>
+
+<ul>
+ <li>{{Cssxref("-moz-float-edge")}}</li>
+ <li>{{Cssxref("-moz-force-broken-image-icon")}}</li>
+</ul>
+
+<h3 id="G_H_I">G H I</h3>
+
+<ul>
+ <li>{{Cssxref("-moz-image-region")}}</li>
+</ul>
+
+<h3 id="J_–_O">J – O</h3>
+
+<ul>
+ <li>{{cssxref("-moz-orient")}}</li>
+ <li>{{cssxref("-moz-osx-font-smoothing")}}</li>
+ <li>{{Cssxref("-moz-outline-radius")}}</li>
+ <li>{{Cssxref("-moz-outline-radius-bottomleft")}}</li>
+ <li>{{Cssxref("-moz-outline-radius-bottomright")}}</li>
+ <li>{{Cssxref("-moz-outline-radius-topleft")}}</li>
+ <li>{{Cssxref("-moz-outline-radius-topright")}}</li>
+</ul>
+
+<h3 id="P_–_S">P – S</h3>
+
+<ul>
+ <li>{{Cssxref("-moz-stack-sizing")}}</li>
+</ul>
+
+<h3 id="T_U">T U</h3>
+
+<ul>
+ <li>{{Cssxref("-moz-user-focus")}}</li>
+ <li>{{Cssxref("-moz-user-input")}}</li>
+ <li>{{Cssxref("-moz-user-modify")}}</li>
+ <li>{{Cssxref("-moz-user-select")}}</li>
+</ul>
+
+<h3 id="V_–_Z">V – Z</h3>
+
+<ul>
+ <li>{{cssxref("-moz-window-dragging")}}</li>
+ <li>{{Cssxref("-moz-window-shadow")}}</li>
+</ul>
+</div>
+
+<h2 id="Zuvor_mit_Präfix_versehene_Eigenschaften_jetzt_standardisiert">Zuvor mit Präfix versehene Eigenschaften, jetzt standardisiert</h2>
+
+<div class="index">
+<ul>
+ <li>{{Cssxref("animation", "-moz-animation")}} [Version mit Präfix immer noch akzeptiert]</li>
+ <li>{{Cssxref("animation-delay", "-moz-animation-delay")}} [Version mit Präfix immer noch akzeptiert]</li>
+ <li>{{Cssxref("animation-direction", "-moz-animation-direction")}} [Version mit Präfix immer noch akzeptiert]</li>
+ <li>{{Cssxref("animation-duration", "-moz-animation-duration")}} [Version mit Präfix immer noch akzeptiert]</li>
+ <li>{{Cssxref("animation-fill-mode", "-moz-animation-fill-mode")}} [Version mit Präfix immer noch akzeptiert]</li>
+ <li>{{Cssxref("animation-iteration-count", "-moz-animation-iteration-count")}} [Version mit Präfix immer noch akzeptiert]</li>
+ <li>{{Cssxref("animation-name", "-moz-animation-name")}} [Version mit Präfix immer noch akzeptiert]</li>
+ <li>{{Cssxref("animation-play-state", "-moz-animation-play-state")}} [Version mit Präfix immer noch akzeptiert]</li>
+ <li>{{Cssxref("animation-timing-function","-moz-animation-timing-function")}} [Version mit Präfix immer noch akzeptiert]</li>
+ <li>{{Cssxref("backface-visibility", "-moz-backface-visibility")}} [Version mit Präfix immer noch akzeptiert]</li>
+ <li>{{Cssxref("background-clip", "-moz-background-clip")}}</li>
+ <li>{{Cssxref("background-origin", "-moz-background-origin")}}</li>
+ <li>{{Cssxref("-moz-background-inline-policy")}} [Überholt durch die Standardversion {{cssxref("box-decoration-break")}}]</li>
+ <li>{{Cssxref("background-size", "-moz-background-size")}}</li>
+ <li>{{Cssxref("-moz-border-end")}} [Überholt durch die Standardversion {{cssxref("border-inline-end")}}]</li>
+ <li>{{Cssxref("-moz-border-end-color")}} [Überholt durch die Standardversion {{cssxref("border-inline-end-color")}}]</li>
+ <li>{{Cssxref("-moz-border-end-style")}} [Überholt durch die Standardversion {{cssxref("border-inline-end-style")}}]</li>
+ <li>{{Cssxref("-moz-border-end-width")}} [Überholt durch die Standardversion {{cssxref("border-inline-end-width")}}]</li>
+ <li>{{Cssxref("border-image","-moz-border-image")}}</li>
+ <li>{{Cssxref("-moz-border-start")}} [Überholt durch die Standardversion {{cssxref("border-inline-start")}}]</li>
+ <li>{{Cssxref("-moz-border-start-color")}} [Überholt durch die Standardversion {{cssxref("border-inline-start-color")}}]</li>
+ <li>{{Cssxref("-moz-border-start-style")}} [Überholt durch die Standardversion {{cssxref("border-inline-start-style")}}]</li>
+ <li>{{Cssxref("-moz-border-start-width")}} [Überholt durch die Standardversion {{cssxref("border-inline-start-width")}}]</li>
+ <li>{{cssxref("box-sizing", "-moz-box-sizing")}} [Version mit Präfix immer noch akzeptiert]</li>
+ <li>{{Cssxref("-moz-font-feature-settings")}} [Version mit Präfix immer noch akzeptiert]</li>
+ <li>{{cssxref("-moz-font-language-override")}} [Version mit Präfix immer noch akzeptiert]</li>
+ <li>{{Cssxref("-moz-margin-end")}} [Überholt durch die Standardversion {{cssxref("margin-inline-end")}}]</li>
+ <li>{{Cssxref("-moz-margin-start")}} [Überholt durch die Standardversion {{cssxref("margin-inline-start")}}]</li>
+ <li>{{Cssxref("opacity","-moz-opacity")}}</li>
+ <li>{{Cssxref("outline","-moz-outline")}}</li>
+ <li>{{Cssxref("outline-color","-moz-outline-color")}}</li>
+ <li>{{Cssxref("outline-offset","-moz-outline-offset")}}</li>
+ <li>{{Cssxref("outline-style","-moz-outline-style")}}</li>
+ <li>{{Cssxref("outline-width","-moz-outline-width")}}</li>
+ <li>{{Cssxref("-moz-padding-end")}} [Überholt durch die Standardversion {{cssxref("padding-inline-end")}}]</li>
+ <li>{{Cssxref("-moz-padding-start")}} [Überholt durch die Standardversion {{cssxref("padding-inline-start")}}]</li>
+ <li>{{Cssxref("perspective", "-moz-perspective")}} [Version mit Präfix immer noch akzeptiert]</li>
+ <li>{{Cssxref("perspective-origin","-moz-perspective-origin")}} [Version mit Präfix immer noch akzeptiert]</li>
+ <li>{{Cssxref("text-decoration-color","-moz-text-decoration-color")}}</li>
+ <li>{{Cssxref("text-decoration-line","-moz-text-decoration-line")}}</li>
+ <li>{{Cssxref("text-decoration-style","-moz-text-decoration-style")}}</li>
+ <li>{{Cssxref("transform", "-moz-transform")}} [Version mit Präfix immer noch akzeptiert]</li>
+ <li>{{Cssxref("transform-origin", "-moz-transform-origin")}} [Version mit Präfix immer noch akzeptiert]</li>
+ <li>{{Cssxref("transform-style", "-moz-transform-style")}} [Version mit Präfix immer noch akzeptiert]</li>
+ <li>{{cssxref("transition", "-moz-transition")}} [Version mit Präfix immer noch akzeptiert]</li>
+ <li>{{cssxref("transition-delay", "-moz-transition-delay")}} [Version mit Präfix immer noch akzeptiert]</li>
+ <li>{{cssxref("transition-duration", "-moz-transition-duration")}} [Version mit Präfix immer noch akzeptiert]</li>
+ <li>{{cssxref("transition-property", "-moz-transition-property")}} [Version mit Präfix immer noch akzeptiert]</li>
+ <li>{{cssxref("transition-timing-function", "-moz-transition-timing-function")}} [Version mit Präfix immer noch akzeptiert]</li>
+</ul>
+</div>
+
+<h2 id="Werte">Werte</h2>
+
+<h3 id="Für_alle_Eigenschaften">Für alle Eigenschaften</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("initial","-moz-initial")}}</li>
+</ul>
+</div>
+
+<h3 id="Cssxref(-moz-appearance)">{{Cssxref("-moz-appearance")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>button</code></li>
+ <li><code>button-arrow-down</code></li>
+ <li><code>button-arrow-next</code></li>
+ <li><code>button-arrow-previous</code></li>
+ <li><code>button-arrow-up</code></li>
+ <li><code>button-bevel</code></li>
+ <li><code>checkbox</code></li>
+ <li><code>checkbox-container</code></li>
+ <li><code>checkbox-label</code></li>
+ <li><code>checkmenuitem</code></li>
+ <li><code>dialog</code></li>
+ <li><code>groupbox</code></li>
+ <li><code>listbox</code></li>
+ <li><code>menuarrow</code></li>
+ <li><code>menucheckbox</code></li>
+ <li><code>menuimage</code></li>
+ <li><code>menuitem</code></li>
+ <li><code>menuitemtext</code></li>
+ <li><code>menulist</code></li>
+ <li><code>menulist-button</code></li>
+ <li><code>menulist-text</code></li>
+ <li><code>menulist-textfield</code></li>
+ <li><code>menupopup</code></li>
+ <li><code>menuradio</code></li>
+ <li><code>menuseparator</code></li>
+ <li><code>-moz-mac-unified-toolbar</code> {{Fx_minversion_inline(3.5)}}</li>
+ <li><code>-moz-win-borderless-glass</code></li>
+ <li><code>-moz-win-browsertabbar-toolbox</code> {{Fx_minversion_inline(3)}}</li>
+ <li><code>-moz-win-communications-toolbox</code> {{Fx_minversion_inline(3)}}</li>
+ <li><code>-moz-win-glass</code></li>
+ <li><code>-moz-win-media-toolbox</code> {{Fx_minversion_inline(3)}}</li>
+ <li><code>-moz-window-button-box</code></li>
+ <li><code>-moz-window-button-box-maximized</code></li>
+ <li><code>-moz-window-button-close</code></li>
+ <li><code>-moz-window-button-maximize</code></li>
+ <li><code>-moz-window-button-minimize</code></li>
+ <li><code>-moz-window-button-restore</code></li>
+ <li><code>-moz-window-titlebar</code></li>
+ <li><code>-moz-window-titlebar-maximized</code></li>
+ <li><code>progressbar</code></li>
+ <li><code>progresschunk</code></li>
+ <li><code>radio</code></li>
+ <li><code>radio-container</code></li>
+ <li><code>radio-label</code></li>
+ <li><code>radiomenuitem</code></li>
+ <li><code>resizer</code></li>
+ <li><code>resizerpanel</code></li>
+ <li><code>scale-horizontal</code></li>
+ <li><code>scalethumb-horizontal</code></li>
+ <li><code>scalethumb-vertical</code></li>
+ <li><code>scale-vertical</code></li>
+ <li><code>scrollbarbutton-down</code></li>
+ <li><code>scrollbarbutton-left</code></li>
+ <li><code>scrollbarbutton-right</code></li>
+ <li><code>scrollbarbutton-up</code></li>
+ <li><code>scrollbar-small</code></li>
+ <li><code>scrollbarthumb-horizontal</code></li>
+ <li><code>scrollbarthumb-vertical</code></li>
+ <li><code>scrollbartrack-horizontal</code></li>
+ <li><code>scrollbartrack-vertical</code></li>
+ <li><code>separator</code></li>
+ <li><code>spinner</code></li>
+ <li><code>spinner-downbutton</code></li>
+ <li><code>spinner-textfield</code></li>
+ <li><code>spinner-upbutton</code></li>
+ <li><code>statusbar</code></li>
+ <li><code>statusbarpanel</code></li>
+ <li><code>tab</code></li>
+ <li><code>tabpanels</code></li>
+ <li><code>tab-scroll-arrow-back</code></li>
+ <li><code>tab-scroll-arrow-forward</code></li>
+ <li><code>textfield</code></li>
+ <li><code>textfield-multiline</code></li>
+ <li><code>toolbar</code></li>
+ <li><code>toolbarbutton-dropdown</code></li>
+ <li><code>toolbox</code></li>
+ <li><code>tooltip</code></li>
+ <li><code>treeheadercell</code></li>
+ <li><code>treeheadersortarrow</code></li>
+ <li><code>treeitem</code></li>
+ <li><code>treetwisty</code></li>
+ <li><code>treetwistyopen</code></li>
+ <li><code>treeview</code></li>
+ <li><code>window</code></li>
+</ul>
+</div>
+
+<h3 id="cssxref(background-image)">{{cssxref("background-image")}}</h3>
+
+<div class="index">
+<ul>
+ <li>Farbverläufe {{Gecko_minversion_inline("1.9.2")}}
+  <ul>
+   <li>{{cssxref("-moz-linear-gradient")}}</li>
+   <li>{{cssxref("-moz-radial-gradient")}}</li>
+  </ul>
+ </li>
+ <li>Elemente {{gecko_minversion_inline("2.0")}}
+  <ul>
+   <li>{{cssxref("-moz-element")}}</li>
+  </ul>
+ </li>
+ <li>Teilbilder
+  <ul>
+   <li>{{cssxref("-moz-image-rect")}} {{gecko_minversion_inline("2.0")}}</li>
+  </ul>
+ </li>
+</ul>
+</div>
+
+<h3 id="Cssxref(border-color)">{{Cssxref("border-color")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-use-text-color</code> {{Deprecated_inline}} Use {{Cssxref("currentColor")}}</li>
+</ul>
+</div>
+
+<h3 id="Cssxref(border-style)_und_Cssxref(outline-style)">{{Cssxref("border-style")}} und {{Cssxref("outline-style")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-bg-inset | -moz-bg-outset | -moz-bg-solid </code> {{obsolete_inline}} entfernt in Gecko 1.9 {{geckoRelease("1.9")}}</li>
+</ul>
+</div>
+
+<h3 id="cssxref(&lt;color>)_Schlüsselwörter">{{cssxref("&lt;color&gt;")}} Schlüsselwörter</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-activehyperlinktext</code></li>
+ <li><code>-moz-hyperlinktext</code></li>
+ <li><code>-moz-visitedhyperlinktext</code></li>
+ <li><code>-moz-buttondefault</code></li>
+ <li><code>-moz-buttonhoverface</code></li>
+ <li><code>-moz-buttonhovertext</code></li>
+ <li><code>-moz-default-background-color</code> {{Gecko_minversion_inline("5.0")}}</li>
+ <li><code>-moz-default-color</code> {{Gecko_minversion_inline("5.0")}}</li>
+ <li><code>-moz-cellhighlight</code></li>
+ <li><code>-moz-cellhighlighttext</code></li>
+ <li><code>-moz-field</code></li>
+ <li><code>-moz-fieldtext</code></li>
+ <li><code>-moz-dialog</code></li>
+ <li><code>-moz-dialogtext</code></li>
+ <li><code>-moz-dragtargetzone</code></li>
+ <li><code>-moz-mac-accentdarkestshadow</code></li>
+ <li><code>-moz-mac-accentdarkshadow</code></li>
+ <li><code>-moz-mac-accentface</code></li>
+ <li><code>-moz-mac-accentlightesthighlight</code></li>
+ <li><code>-moz-mac-accentlightshadow</code></li>
+ <li><code>-moz-mac-accentregularhighlight</code></li>
+ <li><code>-moz-mac-accentregularshadow</code></li>
+ <li><code>-moz-mac-chrome-active</code> {{Gecko_minversion_inline("1.9.1")}}</li>
+ <li><code>-moz-mac-chrome-inactive</code> {{Gecko_minversion_inline("1.9.1")}}</li>
+ <li><code>-moz-mac-focusring</code></li>
+ <li><code>-moz-mac-menuselect</code></li>
+ <li><code>-moz-mac-menushadow</code></li>
+ <li><code>-moz-mac-menutextselect</code></li>
+ <li><code>-moz-menuhover</code></li>
+ <li><code>-moz-menuhovertext</code></li>
+ <li><code>-moz-win-communicationstext</code> {{Fx_minversion_inline(3)}}</li>
+ <li><code>-moz-win-mediatext</code> {{gecko_minversion_inline(1.9)}}</li>
+ <li><code>-moz-nativehyperlinktext</code> {{Gecko_minversion_inline("1.9.1")}}</li>
+</ul>
+</div>
+
+<h3 id="Cssxref(display)">{{Cssxref("display")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-box</code></li>
+ <li><code>-moz-inline-block</code> {{obsolete_inline}}</li>
+ <li><code>-moz-inline-box</code></li>
+ <li><code>-moz-inline-grid</code></li>
+ <li><code>-moz-inline-stack</code></li>
+ <li><code>-moz-inline-table</code> {{obsolete_inline}}</li>
+ <li><code>-moz-grid</code></li>
+ <li><code>-moz-grid-group</code></li>
+ <li><code>-moz-grid-line</code></li>
+ <li><code>-moz-groupbox</code></li>
+ <li><code>-moz-deck</code></li>
+ <li><code>-moz-popup</code></li>
+ <li><code>-moz-stack</code></li>
+ <li><code>-moz-marker</code></li>
+</ul>
+</div>
+
+<h3 id="cssxref(empty-cells)">{{cssxref("empty-cells")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-show-background</code> (Standardwert in {{Glossary("Quirksmode")}})</li>
+</ul>
+</div>
+
+<h3 id="Cssxref(font)">{{Cssxref("font")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-button</code></li>
+ <li><code>-moz-info</code></li>
+ <li><code>-moz-desktop</code></li>
+ <li><code>-moz-dialog</code> (auch eine Farbe)</li>
+ <li><code>-moz-document</code></li>
+ <li><code>-moz-workspace</code></li>
+ <li><code>-moz-window</code></li>
+ <li><code>-moz-list</code></li>
+ <li><code>-moz-pull-down-menu</code></li>
+ <li><code>-moz-field</code> (auch eine Farbe)</li>
+</ul>
+</div>
+
+<h3 id="Cssxref(font-family)">{{Cssxref("font-family")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-fixed</code></li>
+</ul>
+</div>
+
+<h3 id="Cssxref(image-rendering)">{{Cssxref("image-rendering")}}</h3>
+
+<div class="index">
+<ul>
+ <li>{{Cssxref("image-rendering","-moz-crisp-edges")}} {{Gecko_minversion_inline("1.9.2")}}</li>
+</ul>
+</div>
+
+<h3 id="cssxref(&lt;length>)_Werte">{{cssxref("&lt;length&gt;")}} Werte</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("-moz-calc")}} {{gecko_minversion_inline("2.0")}}</li>
+</ul>
+</div>
+
+<h3 id="Cssxref(list-style-type)">{{Cssxref("list-style-type")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-arabic-indic</code></li>
+ <li><code>-moz-bengali</code></li>
+ <li><code>-moz-cjk-earthly-branch</code></li>
+ <li><code>-moz-cjk-heavenly-stem</code></li>
+ <li><code>-moz-devanagari</code></li>
+ <li><code>-moz-ethiopic-halehame</code></li>
+ <li><code>-moz-ethiopic-halehame-am</code></li>
+ <li><code>-moz-ethiopic-halehame-ti-er</code></li>
+ <li><code>-moz-ethiopic-halehame-ti-et</code></li>
+ <li><code>-moz-ethiopic-numeric</code></li>
+ <li><code>-moz-gujarati</code></li>
+ <li><code>-moz-gurmukhi</code></li>
+ <li><code>-moz-hangul</code></li>
+ <li><code>-moz-hangul-consonant</code></li>
+ <li><code>-moz-japanese-formal</code></li>
+ <li><code>-moz-japanese-informal</code></li>
+ <li><code>-moz-kannada</code></li>
+ <li><code>-moz-khmer</code></li>
+ <li><code>-moz-lao</code></li>
+ <li><code>-moz-malayalam</code></li>
+ <li><code>-moz-myanmar</code></li>
+ <li><code>-moz-oriya</code></li>
+ <li><code>-moz-persian</code></li>
+ <li><code>-moz-simp-chinese-formal</code></li>
+ <li><code>-moz-simp-chinese-informal</code></li>
+ <li><code>-moz-tamil</code></li>
+ <li><code>-moz-telugu</code></li>
+ <li><code>-moz-thai</code></li>
+ <li><code>-moz-trad-chinese-formal</code></li>
+ <li><code>-moz-trad-chinese-informal</code></li>
+ <li><code>-moz-urdu</code></li>
+</ul>
+</div>
+
+<h3 id="Cssxref(overflow)">{{Cssxref("overflow")}}</h3>
+
+<div class="index">
+<ul>
+ <li>{{Cssxref("-moz-scrollbars-none")}} {{obsolete_inline}}</li>
+ <li>{{Cssxref("-moz-scrollbars-horizontal")}} {{Deprecated_inline}}</li>
+ <li>{{Cssxref("-moz-scrollbars-vertical")}} {{Deprecated_inline}}</li>
+ <li>{{Cssxref("-moz-hidden-unscrollable")}}</li>
+</ul>
+</div>
+
+<h3 id="Cssxref(text-align)">{{Cssxref("text-align")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-center</code></li>
+ <li><code>-moz-left</code></li>
+ <li><code>-moz-right</code></li>
+</ul>
+</div>
+
+<h3 id="Cssxref(text-decoration)">{{Cssxref("text-decoration")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-anchor-decoration</code></li>
+</ul>
+</div>
+
+<h3 id="Cssxref(-moz-user-select)">{{Cssxref("-moz-user-select")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-all</code></li>
+ <li><code>-moz-none</code></li>
+</ul>
+</div>
+
+<h3 id="Cssxref(width)_Cssxref(min-width)_und_Cssxref(max-width)">{{Cssxref("width")}}, {{Cssxref("min-width")}} und {{Cssxref("max-width")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-min-content</code> {{Fx_minversion_inline(3)}}</li>
+ <li><code>-moz-fit-content</code> {{Fx_minversion_inline(3)}}</li>
+ <li><code>-moz-max-content</code> {{Fx_minversion_inline(3)}}</li>
+ <li><code>-moz-available</code> {{Fx_minversion_inline(3)}}</li>
+</ul>
+</div>
+
+<h2 id="Pseudoelemente_und_Pseudoklassen">Pseudoelemente und Pseudoklassen</h2>
+
+<div class="index">
+<ul>
+ <li>{{Cssxref("::-moz-anonymous-block")}} <span class="comment">eg@:- bug 331432</span></li>
+ <li>{{Cssxref("::-moz-anonymous-positioned-block")}}</li>
+ <li>{{cssxref(":-moz-any")}} {{gecko_minversion_inline("2.0")}}</li>
+ <li>{{Cssxref(":-moz-any-link")}} (matcht <code>:link</code> und <code>:visited</code>)</li>
+ <li>{{Cssxref(":-moz-bound-element")}}</li>
+ <li>{{Cssxref(":-moz-broken")}} {{gecko_minversion_inline("1.9")}}</li>
+ <li>{{Cssxref("::-moz-canvas")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li>
+ <li>{{Cssxref("::-moz-cell-content")}} <span class="comment">eg@:- bug 331432</span></li>
+ <li>{{Cssxref(":-moz-drag-over")}}</li>
+ <li>{{Cssxref(":-moz-first-node")}}</li>
+ <li>{{cssxref("::-moz-focus-inner")}}</li>
+ <li>{{cssxref("::-moz-focus-outer")}}</li>
+ <li>{{cssxref(":-moz-focusring")}} {{gecko_minversion_inline("2.0")}}</li>
+ <li>{{cssxref(":-moz-full-screen")}} {{gecko_minversion_inline("9.0")}}</li>
+ <li>{{cssxref(":-moz-full-screen-ancestor")}} {{gecko_minversion_inline("10.0")}}</li>
+ <li>{{cssxref(":-moz-handler-blocked")}} {{gecko_minversion_inline("1.9.1")}}</li>
+ <li>{{cssxref(":-moz-handler-crashed")}} {{gecko_minversion_inline("2.0")}}</li>
+ <li>{{cssxref(":-moz-handler-disabled")}} {{gecko_minversion_inline("1.9.1")}}</li>
+ <li>{{Cssxref("::-moz-inline-table")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li>
+ <li>{{Cssxref(":-moz-last-node")}}</li>
+ <li>{{Cssxref(":-moz-list-bullet")}}</li>
+ <li>{{cssxref(":-moz-list-number")}}</li>
+ <li>{{cssxref(":-moz-loading")}} {{gecko_minversion_inline("1.9")}}</li>
+ <li>{{Cssxref(":-moz-locale-dir(ltr)")}} {{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{Cssxref(":-moz-locale-dir(rtl)")}} {{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{Cssxref(":-moz-lwtheme")}} {{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{Cssxref(":-moz-lwtheme-brighttext")}} {{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{Cssxref(":-moz-lwtheme-darktext")}} {{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{Cssxref(":-moz-native-anonymous")}} {{gecko_minversion_inline("36")}}</li>
+ <li>{{Cssxref(":-moz-only-whitespace")}}</li>
+ <li>{{Cssxref("::-moz-page")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li>
+ <li>{{Cssxref("::-moz-page-sequence")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li>
+ <li>{{Cssxref("::-moz-pagebreak")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li>
+ <li>{{Cssxref("::-moz-pagecontent")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li>
+ <li>{{Cssxref(":-moz-placeholder")}} {{gecko_minversion_inline("1.9")}}</li>
+ <li>{{cssxref("::-moz-placeholder")}} {{gecko_minversion_inline("19")}}</li>
+ <li>{{Cssxref("::-moz-progress-bar")}}</li>
+ <li>{{Cssxref("::-moz-range-thumb")}}</li>
+ <li>{{Cssxref("::-moz-range-track")}}</li>
+ <li>{{Cssxref(":-moz-read-only")}}</li>
+ <li>{{Cssxref(":-moz-read-write")}}</li>
+ <li>{{cssxref("::selection","::-moz-selection")}}</li>
+ <li>{{Cssxref("::-moz-scrolled-canvas")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li>
+ <li>{{Cssxref("::-moz-scrolled-content")}} <span class="comment">eg@:- bug 331432</span></li>
+ <li>{{Cssxref("::-moz-scrolled-page-sequence")}} <span class="comment">eg@:- bug 331432</span></li>
+ <li>{{cssxref(":-moz-suppressed")}} {{gecko_minversion_inline("1.9")}}</li>
+ <li>{{cssxref(":-moz-submit-invalid")}} {{gecko_minversion_inline("2.0")}}</li>
+ <li>{{Cssxref("::-moz-svg-foreign-content")}} <span class="comment">example at <a rel="freelink">resource://gre/res/svg.css</a> , *|*::-moz-svg-foreign-content {display: block !important;position: static !important;}</span></li>
+ <li>{{Cssxref(":-moz-system-metric(images-in-menus)")}} {{gecko_minversion_inline("1.9")}}</li>
+ <li>{{Cssxref(":-moz-system-metric(mac-graphite-theme)")}} {{gecko_minversion_inline("1.9.1")}}</li>
+ <li>{{Cssxref(":-moz-system-metric(scrollbar-end-backward)")}} {{gecko_minversion_inline("1.9")}}</li>
+ <li>{{Cssxref(":-moz-system-metric(scrollbar-end-forward)")}} {{gecko_minversion_inline("1.9")}}</li>
+ <li>{{Cssxref(":-moz-system-metric(scrollbar-start-backward)")}} {{gecko_minversion_inline("1.9")}}</li>
+ <li>{{Cssxref(":-moz-system-metric(scrollbar-start-forward)")}} {{Fx_minversion_inline(3)}}</li>
+ <li>{{Cssxref(":-moz-system-metric(scrollbar-thumb-proportional)")}} {{gecko_minversion_inline("1.9")}}</li>
+ <li>{{Cssxref(":-moz-system-metric(touch-enabled)")}} {{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{Cssxref(":-moz-system-metric(windows-default-theme)")}} {{Fx_minversion_inline(3)}}</li>
+ <li>{{Cssxref("::-moz-table")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li>
+ <li>{{Cssxref("::-moz-table-cell")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li>
+ <li>{{Cssxref("::-moz-table-column")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li>
+ <li>{{Cssxref("::-moz-table-column-group")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li>
+ <li>{{Cssxref("::-moz-table-outer")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li>
+ <li>{{Cssxref("::-moz-table-row")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li>
+ <li>{{Cssxref("::-moz-table-row-group")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li>
+ <li>{{Cssxref(":-moz-tree-checkbox")}}</li>
+ <li>{{Cssxref(":-moz-tree-cell")}}</li>
+ <li>{{Cssxref(":-moz-tree-cell-text")}}</li>
+ <li>{{Cssxref(":-moz-tree-cell-text(hover)")}} {{gecko_minversion_inline("1.9")}}</li>
+ <li>{{Cssxref(":-moz-tree-column")}}</li>
+ <li>{{Cssxref(":-moz-tree-drop-feedback")}}</li>
+ <li>{{Cssxref(":-moz-tree-image")}}</li>
+ <li>{{Cssxref(":-moz-tree-indentation")}}</li>
+ <li>{{Cssxref(":-moz-tree-line")}}</li>
+ <li>{{Cssxref(":-moz-tree-progressmeter")}}</li>
+ <li>{{Cssxref(":-moz-tree-row")}}</li>
+ <li>{{Cssxref(":-moz-tree-row(hover)")}} {{gecko_minversion_inline("1.9")}}</li>
+ <li>{{Cssxref(":-moz-tree-separator")}}</li>
+ <li>{{Cssxref(":-moz-tree-twisty")}}</li>
+ <li>{{Cssxref(":-moz-ui-invalid")}}{{gecko_minversion_inline("2.0")}}</li>
+ <li>{{Cssxref(":-moz-ui-valid")}}{{gecko_minversion_inline("2.0")}}</li>
+ <li>{{cssxref(":-moz-user-disabled")}} {{gecko_minversion_inline("1.9")}}</li>
+ <li>{{Cssxref("::-moz-viewport")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li>
+ <li>{{Cssxref("::-moz-viewport-scroll")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li>
+ <li>{{cssxref(":-moz-window-inactive")}} {{gecko_minversion_inline("2.0")}}</li>
+ <li>{{Cssxref("::-moz-xul-anonymous-block")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li>
+</ul>
+</div>
+
+<h2 id="At-Regeln">At-Regeln</h2>
+
+<div class="index">
+<ul>
+ <li>{{Cssxref("@-moz-document")}}</li>
+</ul>
+</div>
+
+<h2 id="Media_Queries">Media Queries</h2>
+
+<div class="index">
+<ul>
+ <li>{{Cssxref("Media_queries", "-moz-images-in-menus", "#-moz-images-in-menus")}} {{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{Cssxref("Media_queries", "-moz-mac-graphite-theme", "#-moz-mac-graphite-theme")}} {{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{Cssxref("Media_queries", "-moz-maemo-classic", "#-moz-maemo-classic")}} {{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{Cssxref("Media_queries", "-moz-device-pixel-ratio", "#-moz-device-pixel-ratio")}} {{gecko_minversion_inline("2.0")}}</li>
+ <li>{{Cssxref("Media_queries", "-moz-scrollbar-end-backward", "#-moz-scrollbar-end-backward")}} {{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{Cssxref("Media_queries", "-moz-scrollbar-end-forward", "#-moz-scrollbar-end-forward")}} {{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{Cssxref("Media_queries", "-moz-scrollbar-start-backward", "#-moz-scrollbar-start-backward")}} {{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{Cssxref("Media_queries", "-moz-scrollbar-start-forward", "#-moz-scrollbar-start-forward")}} {{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{Cssxref("Media_queries", "-moz-scrollbar-thumb-proportional", "#-moz-scrollbar-thumb-proportional")}} {{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{Cssxref("Media_queries", "-moz-touch-enabled", "#-moz-touch-enabled")}} {{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{Cssxref("Media_queries", "-moz-windows-classic", "#-moz-windows-classic")}} {{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{Cssxref("Media_queries", "-moz-windows-compositor", "#-moz-windows-compositor")}} {{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{Cssxref("Media_queries", "-moz-windows-default-theme", "#-moz-windows-default-theme")}} {{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{Cssxref("Media_queries", "-moz-windows-theme", "#-moz-windows-theme")}} {{gecko_minversion_inline("2.0")}}</li>
+</ul>
+</div>
+
+<h2 id="Andere">Andere</h2>
+
+<div class="index">
+<ul>
+ <li>{{Cssxref("-moz-alt-content")}} {{Bug("11011")}}</li>
+</ul>
+</div>
diff --git a/files/de/web/css/none/index.html b/files/de/web/css/none/index.html
new file mode 100644
index 0000000000..3f5680c26f
--- /dev/null
+++ b/files/de/web/css/none/index.html
@@ -0,0 +1,25 @@
+---
+title: none
+slug: Web/CSS/none
+translation_of: Web/CSS/float
+---
+<div>
+ {{ CSSRef() }}</div>
+<h2 id="Summary" name="Summary">Übersicht</h2>
+<p><code>none</code> ist ein oft gebrauchter Wert, welcher in einem Grossteil der Eigenschaften verwendet werden kann. Meistens ist er der Standartwert einer Eigenschaft. Ein vergleichbarer Wert ist {{ Cssxref("normal") }}.</p>
+<h2 id="Used_in" name="Used_in">Verwendet in</h2>
+<ul>
+ <li>{{ Cssxref("background-image") }}</li>
+ <li>{{ Cssxref("border-style") }}</li>
+ <li>{{ Cssxref("clear") }}</li>
+ <li>{{ Cssxref("content") }}</li>
+ <li>{{ Cssxref("counter-increment") }}</li>
+ <li>{{ Cssxref("counter-reset") }}</li>
+ <li>{{ Cssxref("display") }}</li>
+ <li>{{ Cssxref("float") }}</li>
+ <li>{{ Cssxref("list-style-type") }}</li>
+ <li>{{ Cssxref("max-height") }} / {{ Cssxref("max-width") }}</li>
+ <li>{{ Cssxref("quotes") }}</li>
+ <li>{{ Cssxref("text-decoration") }}</li>
+ <li>{{ Cssxref("text-transform") }}</li>
+</ul>
diff --git a/files/de/web/css/normal/index.html b/files/de/web/css/normal/index.html
new file mode 100644
index 0000000000..c70bf8921f
--- /dev/null
+++ b/files/de/web/css/normal/index.html
@@ -0,0 +1,27 @@
+---
+title: normal
+slug: Web/CSS/normal
+translation_of: Web/CSS/font-variant
+---
+<div>{{ CSSRef() }}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p><code>normal</code> ist ein oft gebrauchter Wert. Meistens ist es der Standartwert der entsprechenden Eigenschaften. It is comparable to the value {{ Cssxref("none") }}, used in a similar manner for other properties.</p>
+
+<h2 id="Verwendet_in">Verwendet in</h2>
+
+<ul>
+ <li>{{ Cssxref("content") }}</li>
+ <li>{{ Cssxref("font-style") }}</li>
+ <li>{{ Cssxref("font-variant") }}</li>
+ <li>{{ Cssxref("font-weight") }}</li>
+ <li>{{ Cssxref("letter-spacing") }}</li>
+ <li>{{ Cssxref("line-height") }}</li>
+ <li>{{ Cssxref("speak") }}</li>
+ <li>{{ Cssxref("unicode-bidi") }}</li>
+ <li>{{ Cssxref("white-space") }}</li>
+ <li>{{ Cssxref("word-spacing") }}</li>
+</ul>
+
+<div>{{ languages({ "ja": "ja/CSS/normal" }) }}</div>
diff --git a/files/de/web/css/number/index.html b/files/de/web/css/number/index.html
new file mode 100644
index 0000000000..8da756e1ff
--- /dev/null
+++ b/files/de/web/css/number/index.html
@@ -0,0 +1,80 @@
+---
+title: <number>
+slug: Web/CSS/number
+tags:
+  - CSS
+  - CSS Datentyp
+  - Layout
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+  - Web
+translation_of: Web/CSS/number
+---
+<div>{{CSSRef}}</div>
+
+<p>Der <code>&lt;number&gt;</code> <a href="/de/docs/Web/CSS">CSS</a> Datentyp repräsentiert eine Zahl, entweder Ganzzahl oder Bruchzahl. Ihre Syntax erweitert die des {{cssxref("&lt;integer&gt;")}} Datentyps. Um einen Bruchwert darzustellen, wird der Bruchteil — ein '.' gefolgt von einer oder mehreren Ziffern — einem beliebigen {{cssxref("&lt;integer&gt;")}} Datentyp angehängt. Wie für {{cssxref("&lt;integer&gt;")}} Datentypen wird auch für <code>&lt;number&gt;</code> Werte keine Einheit angegeben, welche keine CSS Größe ist.</p>
+
+<h2 id="Interpolation">Interpolation</h2>
+
+<p>Werte des <code>&lt;number&gt;</code> CSS Datentyps können interpoliert werden, um Animationen zu ermöglichen. In diesem Fall werden sie als reale Fließkommazahlen interpoliert. Die Geschwindigkeit der Interpolation wird durch die der Animation zugehörigen {{cssxref("timing-function", "Timingfunktion")}} bestimmt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Dies sind gültige Zahlenwerte:</p>
+
+<pre class="eval">12          Reiner &lt;integer&gt; ist ebenfalls eine &lt;number&gt;
+4.01        Positive &lt;number&gt;, die keine Ganzzahl ist
+-456.8      Negative &lt;number&gt;, die keine Ganzzahl ist
+0.0         Null
++0.0        Null mit führendem +
+-0.0        Null mit führendem - (obwohl seltsam, ist dies ein erlaubter Wert)
+.60         Ziffern vor dem Punkt sind optional
+10e3        Wissenschaftliche Notation ist erlaubt
+-3.4e-2     Komplexester Fall wissenschaftlicher Notation
+</pre>
+
+<p>Dies sind ungültige Zahlenwerte:</p>
+
+<pre class="eval">12.         Dem Punkt sollte eine Zahl folgen
++-12.2      Nur ein führendes +/- ist erlaubt
+12.1.1      Nur ein Punkt ist erlaubt
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#numbers', '&lt;number&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Keine wesentliche Änderung in Bezug auf CSS Level 2 (Revision 1)</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'syndata.html#numbers', '&lt;number&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Explizit definiert</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '', '&lt;number&gt;')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Implizit definiert</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{Compat("css.types.number")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{CSSxRef("&lt;integer&gt;")}}</li>
+</ul>
diff --git a/files/de/web/css/object-fit/index.html b/files/de/web/css/object-fit/index.html
new file mode 100644
index 0000000000..7fbbc5267e
--- /dev/null
+++ b/files/de/web/css/object-fit/index.html
@@ -0,0 +1,148 @@
+---
+title: object-fit
+slug: Web/CSS/object-fit
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Image
+  - Grafik
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/object-fit
+---
+<div>{{ CSSRef }}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>object-fit</code> CSS Eigenschaft gibt an, wie die Inhalte eines ersetzten Elements an die Box angepasst werden, die durch dessen verwendeter Höhe und Breite erzeugt wird.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="twopartsyntaxbox">{{csssyntax}}</pre>
+
+<pre><code>object-fit: fill</code>
+<code>object-fit: contain</code>
+<code>object-fit: cover</code>
+<code>object-fit: none</code>
+<code>object-fit: scale-down</code>
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>fill</code></dt>
+ <dd>Der ersetzte Inhalt wird in der Größe angepasst, sodass er die Inhaltsbox des Elements ausfüllt: die konkrete Objektgröße entspricht der verwendeten Breite und Höhe des Elements.</dd>
+ <dt><code>contain</code></dt>
+ <dd>Der ersetzte Inhalt wird in der Größe angepasst, sodass das Seitenverhältnis beibehalten wird während es an die Inhaltsbox des Elements angepasst wird: die konkrete Objektgröße wird als eine Inhaltsbeschränkung auf die verwendete Breite und Höhe des Elements bestimmt.</dd>
+ <dt><code>cover</code></dt>
+ <dd>Der ersetzte Inhalt wird in der Größe angepasst, sodass das Seitenverhältnis beibehalten wird während die gesamte Inhaltsbox des Elements ausgefüllt wird: die konkrete Objektgröße wird als eine Abdeckbeschränkung auf die verwendete Breite und Höhe des Elements bestimmt.</dd>
+ <dt><code>none</code></dt>
+ <dd>Der ersetzte Inhalt wird nicht in der Größe angepasst, um in die Inhaltsbox des Elements zu passen: die konkrete Objektgröße wird durch den Standardalgorithmus zur Größenanpassung und eine Standardobjektgröße gleich der verwendeten Breite und Höhe des ersetzten Elements bestimmt.</dd>
+ <dt><code>scale-down</code></dt>
+ <dd>Der Inhalt wird in der Größe geändert als ob none oder contain angegeben wäre, je nachdem welches in einer kleineren konkreten Objektgröße resultieren würde.</dd>
+</dl>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="HTML_Inhalt">HTML Inhalt</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;h2&gt;object-fit: fill&lt;/h2&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill"/&gt;
+
+  &lt;h2&gt;object-fit: contain&lt;/h2&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain"/&gt;
+
+  &lt;h2&gt;object-fit: cover&lt;/h2&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover"/&gt;
+
+  &lt;h2&gt;object-fit: none&lt;/h2&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none"/&gt;
+
+  &lt;h2&gt;object-fit: scale-down&lt;/h2&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down"/&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS_Inhalt">CSS Inhalt</h3>
+
+<pre class="brush: css">h2 {
+  font-family: Courier New, monospace;
+  font-size: 1em;
+  margin: 1em 0 0.3em;
+}
+
+div {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  height: 450px;
+}
+
+img {
+  width: 150px;
+  height: 100px;
+  border: 1px solid #000;
+}
+
+.fill {
+  object-fit: fill;
+}
+
+.contain {
+  object-fit: contain;
+}
+
+.cover {
+  object-fit: cover;
+}
+
+.none {
+  object-fit: none;
+}
+
+.scale-down {
+  object-fit: scale-down;
+}
+</pre>
+
+<h3 id="Ausgabe">Ausgabe</h3>
+
+<p>{{ EmbedLiveSample('Beispiel', 500, 450) }}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Images', '#the-object-fit', 'object-fit')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td>Die Schlüsselwörter <code>from-image</code> und <code>flip</code> wurden hinzugefügt.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Ursprüngliche Spezifikation</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{Compat("css.properties.object-fit")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Andere Bild bezogene CSS Eigenschaften: {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.</li>
+</ul>
diff --git a/files/de/web/css/object-position/index.html b/files/de/web/css/object-position/index.html
new file mode 100644
index 0000000000..e3b2dd4f80
--- /dev/null
+++ b/files/de/web/css/object-position/index.html
@@ -0,0 +1,147 @@
+---
+title: object-position
+slug: Web/CSS/object-position
+translation_of: Web/CSS/object-position
+---
+<div>{{CSSRef}}</div>
+
+<p>Die Eigenschaft <strong><code>object-position </code></strong>bestimmt  die Ausrichtung des Elements in seiner Box.</p>
+
+<pre class="brush:css no-line-numbers">/* &lt;position&gt; Werte */
+object-position: 100px 50px;
+
+/* Globale Werte */
+object-position: inherit;
+object-position: initial;
+object-position: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<h3 id="Values" name="Values">Values</h3>
+
+<dl>
+ <dt><code>&lt;position&gt;</code></dt>
+ <dd>Is a {{ cssxref("&lt;position&gt;") }}, that is one to four values representing a 2D position regarding the edges of the element's box. Relative or absolute offsets can be given. Note that the position can be set outside of the element's box.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<h3 id="HTML_content">HTML content</h3>
+
+<pre class="brush: html">&lt;img id="object-position-1" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/&gt;
+&lt;img id="object-position-2" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/&gt;
+</pre>
+
+<h3 id="CSS_content">CSS content</h3>
+
+<pre class="brush: css">img {
+   width: 300px;
+   height: 250px;
+   border: 1px solid black;
+   background-color: silver;
+   margin-right: 1em;
+   object-fit: none;
+}
+
+#object-position-1 {
+  object-position: 10px;
+}
+
+#object-position-2 {
+  object-position: 100% 10%;
+}
+</pre>
+
+<h3 id="Output">Output</h3>
+
+<p>{{ EmbedLiveSample('Example', '100%','300px') }}</p>
+
+<h2 id="Specifications" name="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Images', '#the-object-position', 'object-position')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td>The <code>from-image</code> and <code>flip</code> keywords have been added.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#the-object-position', 'object-position')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>31.0</td>
+   <td>{{ CompatGeckoDesktop("36") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>11.60{{ property_prefix("-o") }}<br>
+    19.0</td>
+   <td>10.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4.4</td>
+   <td>{{ CompatGeckoDesktop("36") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>11.5{{ property_prefix("-o") }}<br>
+    24</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+<br>
+[1] WebKit Nightly fixed in bug <a href="https://bugs.webkit.org/show_bug.cgi?id=122811">122811</a>.</div>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li>Other image-related CSS properties: {{cssxref("object-fit")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.</li>
+</ul>
diff --git a/files/de/web/css/opacity/index.html b/files/de/web/css/opacity/index.html
new file mode 100644
index 0000000000..6781cbfee6
--- /dev/null
+++ b/files/de/web/css/opacity/index.html
@@ -0,0 +1,158 @@
+---
+title: opacity
+slug: Web/CSS/opacity
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - Referenz
+translation_of: Web/CSS/opacity
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <strong><code>opacity</code></strong> CSS Eigenschaft gibt die Transparenz eines Elements an, d. h. den Grad, zu welchem der Hintergrund des Elements überlagert wird.</p>
+
+<p>Der Wert wird dem gesamten Element zugewiesen einschließlich dessen Inhalten, auch wenn der Wert nicht durch Kindelemente geerbt wird. Dadurch haben ein Element und seine Kindelemente alle dieselbe Deckkraft relativ zum Hintergrund des Elements, auch wenn das Element und seine Kindelemente untereinander unterschiedliche Werte für die Deckkraft haben.</p>
+
+<p>Wird für diese Eigenschaft ein Wert anders als <code>1</code> festgelegt, bewirkt dies, dass das Element in einen neuen <a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">Stapelkontext</a> versetzt wird.</p>
+
+<p>Falls <a href="http://stackoverflow.com/questions/13508877/resetting-the-opacity-of-a-child-elements-maple-browser-samsung-tv-app">ein Kindelement nicht den Wert für die Deckkraft haben soll</a>, kann stattdessen die {{cssxref("background")}} Eigenschaft verwendet werden. Zum Beispiel:</p>
+
+<pre class="brush:css">background: rgba(0, 0, 0, 0.4);</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Komplett undurchsichtig */
+opacity: 1;
+opacity: 1.0;
+
+/* Durchscheinend */
+opacity: 0.6;
+
+/* Komplett transparent */
+opacity: 0.0;
+opacity: 0;
+
+/* Globale Werte */
+opacity: inherit;
+opacity: initial;
+opacity: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>Ist eine {{cssxref("&lt;number&gt;")}} im Bereich von <code>0.0</code> bis <code>1.0</code>, beide einschließlich, die die Deckkraft des Alphakanals repräsentiert. Jeder Wert außerhalb des Intervalls, obwohl gültig, wird abgeschnitten auf die nächstliegende Grenze innerhalb des Bereichs.
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th>Wert</th>
+    <th>Bedeutung</th>
+   </tr>
+   <tr>
+    <td><code>0</code></td>
+    <td>Das Element ist vollkommen transparent (d. h. unsichtbar).</td>
+   </tr>
+   <tr>
+    <td>Irgendeine {{cssxref("&lt;number&gt;")}} genau zwischen <code>0</code> und <code>1</code></td>
+    <td>Das Element ist durchsichtig (d. h. der Hintergrund scheint durch).</td>
+   </tr>
+   <tr>
+    <td><code>1</code></td>
+    <td>Das Element ist vollkommen opak (blickdicht).</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einfaches_Beispiel">Einfaches Beispiel</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+}
+
+.light {
+  opacity: 0.2; /* Der Text kann kaum über dem Hintergrund gelesen werden */
+}
+
+.medium {
+  opacity: 0.5; /* Der Text ist besser über dem Hintergrund lesbar */
+}
+
+.heavy {
+  opacity: 0.9; /* Der Text ist sehr deutlich über dem Hintergrund lesbar */
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="light"&gt;Dies kann kaum gesehen werden.&lt;/div&gt;
+&lt;div class="medium"&gt;Dies ist einfacher zu sehen.&lt;/div&gt;
+&lt;div class="heavy"&gt;Dies ist sehr deutlich sichtbar.&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Einfaches_Beispiel', '640', '64')}}</p>
+
+<h3 id="Andere_Deckkraft_mit_hover">Andere Deckkraft mit <code>:hover</code></h3>
+
+<pre class="brush: css">img.opacity {
+  opacity: 1;
+  filter: alpha(opacity=100); /* IE8 and lower */
+  zoom: 1; /* Triggers "hasLayout" in IE 7 and lower */
+}
+
+img.opacity:hover {
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+  zoom: 1;
+}</pre>
+
+<pre class="brush: html">&lt;img src="//developer.mozilla.org/media/img/mdn-logo.png"
+     alt="MDN logo" width="128" height="146"
+     class="opacity"&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Andere_Deckkraft_mit_hover', '150', '175')}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'opacity')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Definiert <code>opacity</code> als animierbar.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Colors', '#propdef-opacity', 'opacity')}}</td>
+   <td>{{Spec2('CSS3 Colors')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.opacity")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="https://msdn.microsoft.com/en-us/library/ms532910%28VS.85%29.aspx">MSDN Microsofts <code>filter:alpha(opacity=xx)</code></a></li>
+</ul>
diff --git a/files/de/web/css/order/index.html b/files/de/web/css/order/index.html
new file mode 100644
index 0000000000..7b3a099ded
--- /dev/null
+++ b/files/de/web/css/order/index.html
@@ -0,0 +1,104 @@
+---
+title: order
+slug: Web/CSS/order
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Flexible Boxes
+  - Layout
+  - NeedsLiveSample
+  - Referenz
+  - Web
+translation_of: Web/CSS/order
+---
+<div>{{ CSSRef("CSS Flexible Boxes") }}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>order</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft gibt die Reihenfolge an, in der Flexelemente innerhalb ihres Flexcontainers dargestellt werden. Elemente werden in aufsteigender Reihenfolge des <code>order</code> Werts dargestellt. Elemente mit dem gleichen <code>order</code> Wert werden in der Reihenfolge dargestellt, in der sie im Quelltext auftauchen.</p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> <code>order</code> beeinflusst nur die visuelle Reihenfolge von Elementen und nicht deren logische oder Tab-Reihenfolge. <code>order</code> darf nicht bei nicht visuellen Medien wie Sprache verwendet werden.</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<p>Siehe die <a class="new" href="https://developer.mozilla.org/de/docs/Web/Guide/CSS/Flexible_boxes" title="/en/CSS/Using_CSS_flexible_boxes">Verwendung von flexiblen Boxen</a> für mehr Informationen.</p>
+
+<p>{{ Note("<code>order</code> ist nur dazu gedacht, die visuelle Reihenfolge festzulegen, nicht die logische Reihenfolge der Elemente. Die Eigenschaft darf nicht auf nicht-visuelle Medien wie beispielsweise Sprache angewendet werden.") }}</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Nummerische Werte inklusive negativer Zahlen */
+order: 5;
+order: -5;
+
+/* Globale Werte */
+order: inherit;
+order: initial;
+order: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>&lt;integer&gt;</code></dt>
+ <dd>Repräsentiert die ordinale Position des Flexelements.</dd>
+</dl>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele" name="Beispiele">Beispiele</h2>
+
+<p>Einfache HTML-Struktur:</p>
+
+<pre class="brush:html;">&lt;!DOCTYPE html&gt;
+&lt;header&gt;…&lt;/header&gt;
+&lt;div id='main'&gt;
+   &lt;article&gt;…&lt;/article&gt;
+   &lt;nav&gt;…&lt;/nav&gt;
+   &lt;aside&gt;…&lt;/aside&gt;
+&lt;/div&gt;
+&lt;footer&gt;…&lt;/footer&gt;</pre>
+
+<p>Der folgende CSS Code erzeugt ein klassisches Layout mit zwei Seitenleisten, die einen Inhaltsbereich umschließen. Das Flexible Box Layout Modul erzeugt automatisch Blöcke gleicher vertikaler Größe und verwendet gesamten zur Verfügung stehenden horizontalen Platz.</p>
+
+<pre class="brush:css;">#main { display: flex; }
+#main &gt; article { flex:1;         order: 2; }
+#main &gt; nav     { width: 200px;   order: 1; }
+#main &gt; aside   { width: 200px;   order: 3; }</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Flexbox', '#order-property', 'order') }}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.order")}}
+
+<p>[1] Firefox unterstützt bis Version 28 nur einzeiliges Flexbox Layout. Um Flexbox Unterstützung für Firefox 18 und 19 zu aktivieren, muss die Einstellung <code>layout.css.flexbox.enabled</code> in <code>about:config</code> auf <code>true</code> gesetzt werden.</p>
+
+<p>Firefox verändert aktuell fälschlicherweise die Tab-Reihenfolge der Elemente. Siehe {{bug("812687")}}.</p>
+
+<p>[2] Im Internet Explorer 10 wird ein flexibler Container durch <code>display:-ms-flexbox</code> angegeben, nicht durch <code>display:flex</code>.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a class="new" href="https://developer.mozilla.org/de/docs/Web/Guide/CSS/Flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Verwenden von CSS Flexible Boxes</a></li>
+</ul>
diff --git a/files/de/web/css/orphans/index.html b/files/de/web/css/orphans/index.html
new file mode 100644
index 0000000000..0e1c984025
--- /dev/null
+++ b/files/de/web/css/orphans/index.html
@@ -0,0 +1,121 @@
+---
+title: orphans
+slug: Web/CSS/orphans
+tags:
+  - CSS
+  - CSS3
+  - Layout
+  - Referenz
+  - mehrspaltige Layouts
+translation_of: Web/CSS/orphans
+---
+<div>{{CSSRef}}</div>
+
+<p>Die <a href="/de/docs/CSS">CSS</a>-Eigenschaft <strong><code>orphans</code></strong> legt die Mindestanzahl von Zeilen in einem Blockcontainer fest, die unten auf einer <a href="/de/docs/Web/CSS/Paged_Media">Seite</a>, eines Bereichs oder einer <a href="/de/docs/Web/CSS/CSS_Columns">Spalte</a> angezeigt werden müssen.</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;integer&gt; values */
+orphans: 2;
+orphans: 3;
+
+/* Global values */
+orphans: inherit;
+orphans: initial;
+orphans: unset;
+</pre>
+
+<div class="note">
+<p><strong>Hinweis:</strong> In der Typografie ist ein <em>Schusterjunge</em> die erste Zeile eines Absatzes, die allein am unteren Rand einer Seite angezeigt wird (der Absatz wird auf einer nachfolgenden Seite fortgesetzt).</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<h3 id="Values" name="Values">Werte</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>Die Mindestanzahl von Zeilen, die vor einem Fragmentierungsbruch am unteren Rand eines Fragments verbleiben können. Der Wert muss positiv sein.</dd>
+</dl>
+
+<h2 id="Formale_Definition">Formale Definition</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formale_Syntax">Formale Syntax</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="Festlegung_einer_Mindestgröße_für_Waisenkinder_von_drei_Zeilen">Festlegung einer Mindestgröße für Waisenkinder von drei Zeilen</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<div id="Setting_a_minimum_orphan_size_of_three_lines">
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;p&gt;This is the first paragraph containing some text.&lt;/p&gt;
+  &lt;p&gt;This is the second paragraph containing some more text than the first one. It is used to demonstrate how orphans work.&lt;/p&gt;
+  &lt;p&gt;This is the third paragraph. It has a little bit more text than the first one.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; highlight[5] notranslate">div {
+  background-color: #8cffa0;
+  height: 150px;
+  columns: 3;
+  orphans: 3;
+}
+
+p {
+  background-color: #8ca0ff;
+}
+
+p:first-child {
+  margin-top: 0;
+}
+</pre>
+</div>
+
+<h4 id="Ergebnis">Ergebnis</h4>
+
+<p>{{EmbedLiveSample("Setting_a_minimum_orphan_size_of_three_lines", 380, 150)}}</p>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fragmentation', '#widows-orphans', 'orphans')}}</td>
+   <td>{{Spec2('CSS3 Fragmentation')}}</td>
+   <td>Erweitert <code>orphans</code>, die auf alle Fragmenttypen angewendet werden können, einschließlich Seiten, Regionen oder Spalten.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'page.html#break-inside', 'orphans')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("css.properties.orphans")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref("widows")}}</li>
+ <li><a href="https://developer.mozilla.org/de/docs/Web/CSS/Paged_Media">Seitennummerierte Medien</a></li>
+</ul>
diff --git a/files/de/web/css/outline-color/index.html b/files/de/web/css/outline-color/index.html
new file mode 100644
index 0000000000..c802720159
--- /dev/null
+++ b/files/de/web/css/outline-color/index.html
@@ -0,0 +1,154 @@
+---
+title: outline-color
+slug: Web/CSS/outline-color
+translation_of: Web/CSS/outline-color
+---
+<div><span style="line-height: 1.5;">{{CSSRef}}</span></div>
+
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+
+<p>Die <strong><code>outline-color</code></strong> CSS-Eigenschaft bestimmt die Farbe der Outline (den Umriss) eines Elements. Eine Outline ist eine Linie, die außerhalb des Rahmens (border) um Elemente gezeigt wird, damit das Element hervorsticht.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Keyword values */
+outline-color: invert;
+outline-color: red;
+
+/* Global values */
+outline-color: inherit;
+outline-color: initial;
+outline-color: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>See {{cssxref("&lt;color&gt;")}} for the various color keywords and notations.</dd>
+ <dt><code>invert</code></dt>
+ <dd>To ensure the outline is visible, performs a color inversion of the background. This makes the focus border more salient, regardless of the color in the background. Note that browsers are not required to support it. If not, they just consider the statement as invalid</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html;">&lt;p class="example"&gt;My outline is blue, da ba dee.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight:[3]">.example {
+  /* first need to set "outline" */
+  outline: 2px solid;
+  /* make the outline blue */
+  outline-color: #0000FF;
+}</pre>
+
+<h3 id="Live">Live:</h3>
+
+<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/outline-color') }}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#outline-color', 'outline-color')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'outline-color')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Defines <code>outline-color</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline-color', 'outline-color')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.8")}} [1]</td>
+   <td>8.0</td>
+   <td>7.0</td>
+   <td>1.2 (125)</td>
+  </tr>
+  <tr>
+   <td><code>invert</code> value</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} [2]</td>
+   <td>8.0</td>
+   <td>{{CompatNo}} [3]</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] In versions previous to Gecko 1.8: <code>-moz-outline-color</code>.</p>
+
+<p>[2] Support had been dropped in version 3.0 (1.9).</p>
+
+<p>[3] Supported in Opera 7 but support was dropped in  Opera 15 with the adoption of Chromium/Blink engine.</p>
diff --git a/files/de/web/css/outline/index.html b/files/de/web/css/outline/index.html
new file mode 100644
index 0000000000..48b3666cce
--- /dev/null
+++ b/files/de/web/css/outline/index.html
@@ -0,0 +1,162 @@
+---
+title: outline
+slug: Web/CSS/outline
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Outline
+  - Layout
+  - Referenz
+  - 'recipe:css-shorthand-property'
+translation_of: Web/CSS/outline
+---
+<div>{{CSSRef}}</div>
+
+<p>Das <strong><code>outline</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Shorthand_properties">Eigenschaftskürzel</a> setzt alle outline Eigenschaften in einer einzigen Deklaration.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/outline.html")}}</div>
+
+<div class="hidden">Die Quelle für dieses interaktive Beispiel ist in einem GitHub-Repository gespeichert. Wenn Sie zum Projekt der interaktiven Beispiele beitragen möchten, klonen Sie bitte <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und senden Sie uns eine Pull-Anfrage.</div>
+
+<h2 id="Bestandteileigenschaften"><strong class="b5">Bestandteileigenschaften</strong></h2>
+
+<p>Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/outline-color"><code>outline-color</code></a></li>
+ <li><a href="/en-US/docs/Web/CSS/outline-style"><code>outline-style</code></a></li>
+ <li><a href="/en-US/docs/Web/CSS/outline-width"><code>outline-width</code></a></li>
+</ul>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* style */
+outline: solid;
+
+/* color | style */
+outline: #f66 dashed;
+
+/* style | width */
+outline: inset thick;
+
+/* color | style | width */
+outline: green solid 3px;
+
+/* Global values */
+outline: inherit;
+outline: initial;
+outline: unset;
+</pre>
+
+<p>Die <code>outline</code> Eigenschaft kann mit einem, zwei oder drei der unten aufgeführten Werte angegeben werden. Die Reihenfolge der Werte spielt dabei keine Rolle.</p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Der Umriss ist für viele Elemente unsichtbar, wenn sein Stil nicht definiert ist. Dies liegt daran, dass der Stil standardmäßig auf keinen Stil eingestellt ist: <code>none</code>. Eine bemerkenswerte Ausnahme bilden <code>input</code> Elemente, die von den Browsern als Standard-Stil vorgegeben werden.</p>
+</div>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>&lt;'outline-color'&gt;</code></dt>
+ <dd>Legt die Farbe des Umrisses fest. Standardeinstellung ist die <code>currentcolor</code> (aktuelle Farbe), wenn sie nicht vorhanden ist. Siehe {{cssxref("outline-color")}}.</dd>
+ <dt><code>&lt;'outline-style'&gt;</code></dt>
+ <dd>Legt den Stil des Umrisses fest. Standardeinstellung ist <code>none</code>, wenn nicht vorhanden. Siehe {{cssxref("outline-style")}}.</dd>
+ <dt><code>&lt;'outline-width'&gt;</code></dt>
+ <dd>Legt die Dicke der Umrisslinie fest. Standardeinstellung ist <code>medium</code>, wenn nicht vorhanden. Siehe {{cssxref("outline-width")}}.</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p><a href="/de/docs/Web/CSS/border">Borders</a> und <code>outline</code> sind sehr ähnlich. Allerdings unterscheiden sich die Umrisse von den Grenzen in den folgenden Punkten:</p>
+
+<ul>
+ <li>Outlines nehmen nie Raum ein, da sie außerhalb des Inhalts eines Elements gezeichnet werden.</li>
+ <li>
+  <p>Gemäß der Spezifikation müssen Umrisse nicht rechteckig sein, obwohl sie es normalerweise sind.</p>
+ </li>
+</ul>
+
+<p>Wie bei allen Kurzform-Eigenschaften werden alle ausgelassenen Unterwerte auf ihren <a href="/de/docs/Web/CSS/Initialwert">Initialwert</a> gesetzt.</p>
+
+<h2 id="Bedenken_zu_Zugänglichkeit">Bedenken zu Zugänglichkeit</h2>
+
+<p>Wenn Sie <code>outline</code> den Wert von <code>0</code> oder <code>none</code> zuweisen, wird der Standard-Fokussierungsstil des Browsers entfernt. Wenn ein Element mit ihm interagiert werden kann, muss es einen sichtbaren Fokusindikator haben. Sorgen Sie für eine offensichtliche Fokusgestaltung, wenn der Standardfokusstil entfernt wird.</p>
+
+<ul>
+ <li><a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">How to Design Useful and Usable Focus Indicators</a></li>
+ <li>
+  <p><abbr>WCAG</abbr> 2.1: <a href="https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html">Understanding Success Criterion 2.4.7: Focus Visible</a></p>
+ </li>
+</ul>
+
+<h2 id="Formale_Definition">Formale Definition</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formale_Syntax">Formale Syntax</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Beschreibung_2">Beschreibung</h2>
+
+<h3 id="Verwendung_von_Umrissen_zum_Setzen_eines_Fokusstils">Verwendung von Umrissen zum Setzen eines Fokusstils</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<div id="Using_outline_to_set_a_focus_style">
+<pre class="brush: html notranslate">&lt;a href="#"&gt;This link has a special focus style.&lt;/a&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">a {
+  border: 1px solid;
+  border-radius: 3px;
+  display: inline-block;
+  margin: 10px;
+  padding: 5px;
+}
+
+a:focus {
+  outline: 4px dotted #e73;
+  outline-offset: 4px;
+  background: #ffa;
+}
+</pre>
+</div>
+
+<h4 id="Ergebnis">Ergebnis</h4>
+
+<p>{{EmbedLiveSample("Using_outline_to_set_a_focus_style", "100%", 60)}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#outline', 'outline')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Keine Änderung.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline', 'outline')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Anfangsdefinition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<div>
+<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und senden Sie uns eine Pull-Anfrage.</div>
+
+<p>{{Compat("css.properties.outline")}}</p>
+</div>
diff --git a/files/de/web/css/overflow-clip-box/index.html b/files/de/web/css/overflow-clip-box/index.html
new file mode 100644
index 0000000000..bc8b4bb4ff
--- /dev/null
+++ b/files/de/web/css/overflow-clip-box/index.html
@@ -0,0 +1,97 @@
+---
+title: overflow-clip-box
+slug: Web/CSS/overflow-clip-box
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Referenz
+  - Referenz
+  - Web
+translation_of: Mozilla/Gecko/Chrome/CSS/overflow-clip-box
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>overflow-clip-box</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft bestimmt, bezogen auf welche Box die Zuschnitt erfolgt, wenn ein Überlauf stattfindet.</p>
+
+<div class="note">
+<p>In Gecko wird standardmäßig <code>padding-box</code> überall verwendet, aber <code>&lt;input type="text"&gt;</code> und ähnliche Elemente verwenden den Wert <code>content-box</code>. Vor Firefox 29 war das Verhalten fest kodiert; seitdem benutzt Firefox diese Eigenschaft, die auch an anderen Stellen verwendet werden kann. Beachte, dass diese Eigenschaft nur in {{Glossary("User Agent")}} Stylesheets und dem Chrome Kontext standardmäßig aktiviert ist.</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Schlüsselwortwerte */
+overflow-clip-box: padding-box;
+overflow-clip-box: content-box;
+
+/* Globale Werte */
+overflow-clip-box: inherited;
+overflow-clip-box: initial;
+overflow-clip-box: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>padding-box</code></dt>
+ <dd>Diese Schlüsselwort gibt an, dass der Zuschnitt relativ zur <a href="/de/docs/Web/CSS/Boxmodell">Paddingbox</a> erfolgt.</dd>
+ <dt><code>content-box</code></dt>
+ <dd>Diese Schlüsselwort gibt an, dass der Zuschnitt relativ zur <a href="/de/docs/Web/CSS/Boxmodell">Contentbox</a> erfolgt.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="padding-box">padding-box</h3>
+
+<pre class="brush: html">&lt;div class="things"&gt;
+  &lt;input value="ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ" class="scroll padding-box"&gt;
+  &lt;div class="scroll padding-box"&gt;&lt;span&gt;ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ&lt;/span&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.scroll {
+  overflow: auto;
+  padding: 0 30px;
+  width: 6em;
+  border: 1px solid black;
+  background: lime content-box;
+}</pre>
+
+<pre class="brush: css">.padding-box {
+  overflow-clip-box: padding-box;
+}
+</pre>
+
+<pre class="brush: js">function scrollSomeElements() {
+  var elms = document.querySelectorAll('.scroll');
+  for (i=0; i &lt; elms.length; ++i) {
+    elms[i].scrollLeft=80;
+  }
+}
+var elt = document.queryElementsByTagName('body')[0];
+
+elt.addEventListener("load", scrollSomeElements, false);
+</pre>
+
+<p>{{EmbedLiveSample('padding-box')}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Diese Eigenschaft wurde der W3C CSSWG vorgeschlagen; sie ist noch nicht standardisiert, aber, falls sie akzeptiert wird, sollte sie in {{SpecName("CSS3 Overflow")}} erscheinen.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.overflow-clip-box")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Ähnliche CSS Eigenschaften: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow")}}, {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}</li>
+</ul>
diff --git a/files/de/web/css/overflow/index.html b/files/de/web/css/overflow/index.html
new file mode 100644
index 0000000000..eec5ccd2bc
--- /dev/null
+++ b/files/de/web/css/overflow/index.html
@@ -0,0 +1,130 @@
+---
+title: overflow
+slug: Web/CSS/overflow
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/overflow
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>overflow</code> Eigenschaft legt fest, ob Inhalte aus einem Element hinausragen dürfen oder, ob Scrollbalken beim Überlauf zum Einsatz kommen.</p>
+
+<ul>
+ <li>Standardwert: visible</li>
+ <li>Anwendbar auf: block, inline und table-cell Elemente</li>
+ <li>Vererbbar: Nein</li>
+ <li>Prozentwerte: Nein</li>
+ <li>Medium: visuell</li>
+ <li>berechneter Wert: wie festgelegt</li>
+</ul>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="eval">overflow: visible | hidden | scroll | auto | inherit
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt>visible</dt>
+ <dd>Standardwert. Der Inhalt wird nicht abgeschnitten und kann aus dem Element hinausragen.</dd>
+ <dt>hidden</dt>
+ <dd>Der Inhalt wird abgeschnitten und es werden keine Scrollbalken angezeigt.</dd>
+ <dt>scroll</dt>
+ <dd>Es werden immer Scrollbalken angezeigt, auch wenn der Inhalt nicht überläuft.</dd>
+ <dt>auto</dt>
+ <dd>Hängt vom Browser ab. Firefox stellt Scrollbalken zur Verfügung, wenn der Inhalt überläuft.</dd>
+ <dt>inherit</dt>
+ <dd>Der Wert des Elternelements wird geerbt.</dd>
+</dl>
+
+<h4 id="Mozilla_Erweiterungen">Mozilla Erweiterungen</h4>
+
+<dl>
+ <dt>-moz-scrollbars-none</dt>
+ <dd>{{ obsolete_inline() }}  stattdessen overflow:hidden</dd>
+ <dt>-moz-scrollbars-horizontal</dt>
+ <dd>{{ Deprecated_inline() }} Verwendung von <a href="/de/docs/Web/CSS/overflow-x" title="de/CSS/overflow-x"><code>overflow-x</code></a> und <a href="/de/docs/Web/CSS/overflow-y" title="de/CSS/overflow-y"><code>overflow-y</code></a> wird bevorzugt.</dd>
+ <dt>-moz-scrollbars-vertical</dt>
+ <dd>{{ Deprecated_inline() }} Verwendung von <a href="/de/docs/Web/CSS/overflow-x" title="de/CSS/overflow-x"><code>overflow-x</code></a> und <a href="/de/docs/Web/CSS/overflow-y" title="de/CSS/overflow-y"><code>overflow-y</code></a> wird bevorzugt.</dd>
+ <dt>-moz-hidden-unscrollable</dt>
+ <dd>Deaktiviert das Scrollen für das Wurzelelement (&lt;html&gt;, &lt;body&gt;) und ist nur für interne Zwecke gedacht (z.B. Themes).</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre>p {
+     width: 12em;
+     height: 6em;
+     border: dotted;
+     overflow: auto;   /* Scrollbalken erscheinen nur wenn nötig */
+}
+
+</pre>
+
+<p style="overflow: hidden; width: 12em; height: 6em; border: dotted;"><code>overflow: hidden</code><br>
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+
+<p style="overflow: scroll; width: 12em; height: 6em; border: dotted;"><code>overflow: scroll</code><br>
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+
+<p style="overflow: auto; width: 12em; height: 6em; border: dotted;"><code>overflow: auto</code><br>
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+
+<p style="overflow: auto; width: 12em; height: 6em; border: dotted;"><code>overflow: auto</code><br>
+ wenig Text</p>
+
+<p style="overflow: visible; width: 12em; height: 6em; border: dotted;"><code>overflow: visible</code><br>
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+
+<h2 id="Hinweise">Hinweise</h2>
+
+<p>Bis einschließlich Gecko 1.9.2 (Firefox 3.6), war die <code>overflow</code> Eigenschaft fälschlicherweise auch für Tabellengruppen verfügbar (<code>&lt;thead&gt;</code> , <code>&lt;tbody&gt;</code> , <code>&lt;tfoot&gt;</code>). Dieses Verhalten wurde in späteren Versionen korrigiert.</p>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Overflow', '#propdef-overflow', 'overflow')}}</td>
+   <td>{{Spec2('CSS3 Overflow')}}</td>
+   <td>
+    <p>Changed syntax to allow one or two keywords instead of only one</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Box', '#propdef-overflow', 'overflow')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visufx.html#overflow', 'overflow')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2>
+
+<p>{{Compat("css.properties.overflow")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Ähnliche CSS Eigenschaften: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{Cssxref("clip")}}
+</li></ul>
+
+<p>{{ languages( { "en": "en/CSS/overflow" } ) }}</p>
diff --git a/files/de/web/css/overscroll-behavior-y/index.html b/files/de/web/css/overscroll-behavior-y/index.html
new file mode 100644
index 0000000000..996350ccac
--- /dev/null
+++ b/files/de/web/css/overscroll-behavior-y/index.html
@@ -0,0 +1,85 @@
+---
+title: overscroll-behavior-y
+slug: Web/CSS/overscroll-behavior-y
+translation_of: Web/CSS/overscroll-behavior-y
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">Die <strong><code>overscroll-behavior-y</code></strong> CSS Eigenschaft ändert das Browserverhalten, wenn die vertikale Grenze des Scrollbereichs erreicht wurde.</span></p>
+
+<div class="note">
+<p><strong>Eine vollständige Erklärung gibt es auch unter</strong> {{cssxref("overscroll-behavior")}} .</p>
+</div>
+
+<pre class="brush:css no-line-numbers">/* Keyword values */
+overscroll-behavior: auto; /* default */
+overscroll-behavior: contain;
+overscroll-behavior: none;
+
+/* Global values */
+overflow: inherit;
+overflow: initial;
+overflow: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>Die <code>overscroll-behavior-y</code> Eigenschaft kann mit einem der untenstehenden Schlüsselworte definiert werden:</p>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Das standardmäßige Scrollüberlaufverhalten wird eingestellt.</dd>
+ <dt><code>contain</code></dt>
+ <dd>Es wird das standardmäßige Scrollüberlaufverhalten im aktuellen Element eingestellt, die Scrollverkettung, d.h. das gelichzeitige Scrollen von darunterliegenden Elementen wird verhindert.</dd>
+ <dt><code>none</code></dt>
+ <dd>Es gibt keine Scrollverkettung zu benachbarten Scrollzonen und das Standard-Scrollverhalten wird verhindert.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale  Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: css">.messages {
+  height: 220px;
+  overflow: auto;
+  overscroll-behavior-y: contain;
+} </pre>
+
+<p>Eine vollständige Erklärung gibt es auch unter {{cssxref("overscroll-behavior")}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Overscroll Behavior', '#propdef-overscroll-behavior-y','overscroll-behavior-y')}}</td>
+   <td>{{Spec2('Overscroll Behavior')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("css.properties.overscroll-behavior-y")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="https://developers.google.com/web/updates/2017/11/overscroll-behavior#demo">Scroll-Aktionen überwachen: "Pull-to-Refresh" und Überlaufeffekte individualisieren</a></li>
+</ul>
diff --git a/files/de/web/css/overscroll-behavior/index.html b/files/de/web/css/overscroll-behavior/index.html
new file mode 100644
index 0000000000..f2a7e10165
--- /dev/null
+++ b/files/de/web/css/overscroll-behavior/index.html
@@ -0,0 +1,104 @@
+---
+title: overscroll-behavior
+slug: Web/CSS/overscroll-behavior
+translation_of: Web/CSS/overscroll-behavior
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">The <strong><code>overscroll-behavior</code></strong> CSS property sets what a browser does when reaching the boundary of a scrolling area. It's a shorthand for {{cssxref("overscroll-behavior-x")}} and {{cssxref("overscroll-behavior-y")}}.</span></p>
+
+<pre class="brush:css no-line-numbers">/* Keyword values */
+overscroll-behavior: auto; /* default */
+overscroll-behavior: contain;
+overscroll-behavior: none;
+
+/* Two values */
+overscroll-behavior: auto contain;
+
+/* Global values */
+overflow: inherit;
+overflow: initial;
+overflow: unset;
+</pre>
+
+<p>By default, mobile browsers tend to provide a "bounce" effect or even a page refresh when the top or bottom of a page (or other scroll area) is reached. You may also have noticed that when you have a dialog box with scrolling content on top of a page of scrolling content, once the dialog box's scroll boundary is reached, the underlying page will then start to scroll — this is called <strong>scroll chaining</strong>.</p>
+
+<p>In some cases these behaviors are not desirable. you can use <code>overscroll-behavior</code> to get rid of unwanted scroll chaining and the browser's Facebook/Twitter app-inspired "pull to refresh"-type behavior.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>The <code>overscroll-behavior</code> property is specified as one or two keywords chosen from the list of values below.</p>
+
+<p>Two keywords specifies the <code>overscroll-behavior</code> value on the <code>x</code> and <code>y</code> axes respectively. If only one value is specified, both x and y are assumed to have the same value.</p>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>The default scroll overflow behavior occurs as normal.</dd>
+ <dt><code>contain</code></dt>
+ <dd>Default scroll overflow behavior is observed inside the element this value is set on (e.g. "bounce" effects or refreshes), but no scroll chaining occurs to neighbouring scrolling areas, e.g. underlying elements will not scroll.</dd>
+ <dt><code>none</code></dt>
+ <dd>No scroll chaining occurs to neighbouring scrolling areas, and default scroll overflow behavior is prevented.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<p>In our <a href="https://mdn.github.io/css-examples/overscroll-behavior/">overscroll-behavior example</a> (see the <a href="https://github.com/mdn/css-examples/tree/master/overscroll-behavior">source code</a> also), we present a full-page list of fake contacts, and a dialog box containing a chat window. </p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15778/example.png" style="border-style: solid; border-width: 1px; display: block; height: 622px; margin: 0px auto; width: 350px;"></p>
+
+<p>Both of these areas scroll; normally if you scrolled the chat window until you hit a scroll boundary, the underlying contacts window would start to scroll too, which is not desirable. This can be stopped using <code>overscroll-behavior-y</code> (<code>overscroll-behavior</code> would also work) on the chat window, like this:</p>
+
+<pre class="brush: css">.messages {
+  height: 220px;
+  overflow: auto;
+  overscroll-behavior-y: contain;
+} </pre>
+
+<p>We also wanted to get rid of the standard overscroll effects when the contacts are scrolled to the top or bottom (e.g. Chrome on Android refreshes the page when you scroll past the top boundary). This can be prevented by setting <code>overscroll-behavior: none</code> on the {{htmlelement("body")}} element:</p>
+
+<pre class="brush: css">body {
+  margin: 0;
+  overscroll-behavior: none;
+}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<p>Until the CSSWG publishes their own draft, the specification can only be found in its <a href="https://wicg.github.io/overscroll-behavior/">WICG Github Repository</a>.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Overscroll Behavior', '#propdef-overscroll-behavior', 'overscroll-behavior')}}</td>
+   <td>{{Spec2('CSS Overscroll Behavior')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.overscroll-behavior")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a dir="ltr" href="https://developers.google.com/web/updates/2017/11/overscroll-behavior#demo" id="PPElite" lang="de" name="Patrick Malinowski">Take control of your scroll: customizing pull-to-refresh and overflow effects</a></li>
+ <li>{{cssxref("-ms-scroll-chaining")}}</li>
+</ul>
diff --git a/files/de/web/css/padding-bottom/index.html b/files/de/web/css/padding-bottom/index.html
new file mode 100644
index 0000000000..dc288c4904
--- /dev/null
+++ b/files/de/web/css/padding-bottom/index.html
@@ -0,0 +1,76 @@
+---
+title: padding-bottom
+slug: Web/CSS/padding-bottom
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/padding-bottom
+---
+<p>{{ CSSRef() }}</p>
+<h2 id="Übersicht">Übersicht</h2>
+<p>Die <code>padding-bottom</code> Eigenschaft legt den unteren Innenabstand eines Elementes fest. Der Innenabstand ist der Bereich zwischen dem Inhalt und dem <a href="/de/CSS/border" title="de/CSS/border">Rahmen</a> (auch: <em>padding area</em>).</p>
+<ul>
+ <li>Standardwert: <code>0</code></li>
+ <li>Anwendbar auf: alle Elemente außer <code>table-*-group</code>, <code>table-row</code> und <code>table-column</code></li>
+ <li>Vererbbar: Nein</li>
+ <li>Prozentwerte: beziehen sich auf die <a href="/de/CSS/width" title="de/CSS/width">Breite</a> des umschließenden Blocks.</li>
+ <li>Medium: visuell</li>
+ <li>berechneter Wert: eine Prozentzahl wie festgelegt oder die absolute Länge.</li>
+</ul>
+<h2 id="Syntax">Syntax</h2>
+<pre class="eval">padding-bottom: &lt;Längenangabe&gt; | &lt;Prozentzahl&gt; | inherit</pre>
+<h3 id="Werte">Werte</h3>
+<dl>
+ <dt>
+  &lt;Längenangabe&gt;</dt>
+ <dd>
+  Legt eine bestimmte <a href="/de/CSS/Einheiten#L.c3.a4ngen" title="de/CSS/Einheiten#L.c3.a4ngen">Länge</a> fest. Negative Werte sind <strong>nicht</strong> erlaubt.</dd>
+ <dt>
+  &lt;Prozentzahl&gt;</dt>
+ <dd>
+  Ein <a href="/de/CSS/Einheiten#Prozent" title="de/CSS/Einheiten#Prozent">prozentualer</a> Wert, der sich auf die Breite des umschließenden Blocks (containing block) bezieht. Negative Werte <strong>nicht</strong> sind erlaubt.</dd>
+ <dt>
+  inherit</dt>
+ <dd>
+  Der Wert des Elternelements wird geerbt.</dd>
+</dl>
+<h2 id="Beispiele">Beispiele</h2>
+<pre>.content { padding-bottom: 5%; }
+.sidebox { padding-bottom: 10px; }
+</pre>
+<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Browser</th>
+   <th>ab Version</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td>1.0 (1.0)</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>3.5</td>
+  </tr>
+  <tr>
+   <td>Safari (WebKit)</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Spezifikation">Spezifikation</h2>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#padding-properties" lang="en">CSS 2.1 Box #padding</a></li>
+</ul>
+<h2 id="Siehe_auch">Siehe auch</h2>
+<ul>
+ <li><a href="/de/CSS/padding" title="de/CSS/padding"><code>padding</code></a>, <a href="/de/CSS/padding-right" title="de/CSS/padding-right"><code>padding-right</code></a>, <a href="/de/CSS/padding-top" title="de/CSS/padding-top"><code>padding-top</code></a>, <a href="/de/CSS/padding-left" title="de/CSS/padding-left"><code>padding-left</code></a></li>
+ <li><a href="/de/CSS/-moz-padding-start" title="de/CSS/-moz-padding-start"><code>-moz-padding-start</code></a>, <a href="/de/CSS/-moz-padding-end" title="de/CSS/-moz-paddding-end"><code>-moz-padding-end</code></a></li>
+ <li><a href="/de/CSS/margin" title="de/CSS/margin"><code>margin</code></a></li>
+</ul>
+<p>{{ languages( { "en": "en/CSS/padding-bottom", "ja": "ja/CSS/padding-bottom" } ) }}</p>
diff --git a/files/de/web/css/padding-left/index.html b/files/de/web/css/padding-left/index.html
new file mode 100644
index 0000000000..601e6a5037
--- /dev/null
+++ b/files/de/web/css/padding-left/index.html
@@ -0,0 +1,86 @@
+---
+title: padding-left
+slug: Web/CSS/padding-left
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/padding-left
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>padding-left</code> Eigenschaft legt den linken Innenabstand eines Elementes fest. Der Innenabstand ist der Bereich zwischen dem Inhalt und dem <a href="/de/CSS/border" title="de/CSS/border">Rahmen</a> (auch: <em>padding area</em>).</p>
+
+<ul>
+ <li>Standardwert: <code>0</code></li>
+ <li>Anwendbar auf: alle Elemente außer <code>table-*-group</code>, <code>table-row</code> und <code>table-column</code></li>
+ <li>Vererbbar: nein</li>
+ <li>Prozentwerte: beziehen sich auf die <a href="/de/CSS/width" title="de/CSS/width">Breite</a> des umschließenden Blocks.</li>
+ <li>Medium: visuell</li>
+ <li>berechneter Wert: eine Prozentzahl wie festgelegt oder die absolute Länge.</li>
+</ul>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="eval">padding-left: &lt;Längenangabe&gt; | &lt;Prozentzahl&gt; | inherit</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt>&lt;Längenangabe&gt;</dt>
+ <dd>Legt eine bestimmte <a href="/de/CSS/Einheiten#L.c3.a4ngen" title="de/CSS/Einheiten#L.c3.a4ngen">Länge</a> fest. Negative Werte sind <strong>nicht</strong> erlaubt.</dd>
+ <dt>&lt;Prozentzahl&gt;</dt>
+ <dd>Ein <a href="/de/CSS/Einheiten#Prozent" title="de/CSS/Einheiten#Prozent">prozentualer</a> Wert, der sich auf die Breite des umschließenden Blocks (containing block) bezieht. Negative Werte <strong>nicht</strong> sind erlaubt.</dd>
+ <dt>inherit</dt>
+ <dd>Der Wert des Elternelements wird geerbt.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre>.content { padding-left: 5%; }
+.sidebox { padding-left: 10px; }
+</pre>
+
+<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Browser</th>
+   <th>ab Version</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td>1.0 (1.0)</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>3.5</td>
+  </tr>
+  <tr>
+   <td>Safari (WebKit)</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#padding-properties" lang="en">CSS 2.1 Box #padding</a></li>
+</ul>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/CSS/padding" title="de/CSS/padding"><code>padding</code></a>, <a href="/de/CSS/padding-right" title="de/CSS/padding-right"><code>padding-right</code></a>, <a href="/de/CSS/padding-bottom" title="de/CSS/padding-bottom"><code>padding-bottom</code></a>, <a href="/de/CSS/padding-top" title="de/CSS/padding-top"><code>padding-top</code></a></li>
+ <li><a href="/de/CSS/-moz-padding-start" title="de/CSS/-moz-padding-start"><code>-moz-padding-start</code></a>, <a href="/de/CSS/-moz-padding-end" title="de/CSS/-moz-paddding-end"><code>-moz-padding-end</code></a></li>
+ <li><a href="/de/CSS/margin" title="de/CSS/margin"><code>margin</code></a></li>
+</ul>
+
+<p>{{ languages( { "en": "en/CSS/padding-left", "ja": "ja/CSS/padding-left" } ) }}</p>
diff --git a/files/de/web/css/padding-right/index.html b/files/de/web/css/padding-right/index.html
new file mode 100644
index 0000000000..a41d823d52
--- /dev/null
+++ b/files/de/web/css/padding-right/index.html
@@ -0,0 +1,76 @@
+---
+title: padding-right
+slug: Web/CSS/padding-right
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/padding-right
+---
+<p>{{ CSSRef() }}</p>
+<h2 id="Übersicht">Übersicht</h2>
+<p>Die <code>padding-right</code> Eigenschaft legt den rechten Innenabstand eines Elementes fest. Der Innenabstand ist der Bereich zwischen dem Inhalt und dem <a href="/de/CSS/border" title="de/CSS/border">Rahmen</a> (auch: <em>padding area</em>).</p>
+<ul>
+ <li>Standardwert: <code>0</code></li>
+ <li>Anwendbar auf: alle Elemente außer <code>table-*-group</code>, <code>table-row</code> und <code>table-column</code></li>
+ <li>Vererbbar: Nein</li>
+ <li>Prozentwerte: beziehen sich auf die <a href="/de/CSS/width" title="de/CSS/width">Breite</a> des umschließenden Blocks.</li>
+ <li>Medium: visuell</li>
+ <li>berechneter Wert: eine Prozentzahl wie festgelegt oder die absolute Länge.</li>
+</ul>
+<h2 id="Syntax">Syntax</h2>
+<pre class="eval">padding-right: &lt;Längenangabe&gt; | &lt;Prozentzahl&gt; | inherit</pre>
+<h3 id="Werte">Werte</h3>
+<dl>
+ <dt>
+  &lt;Längenangabe&gt;</dt>
+ <dd>
+  Legt eine bestimmte <a href="/de/CSS/Einheiten#L.c3.a4ngen" title="de/CSS/Einheiten#L.c3.a4ngen">Länge</a> fest. Negative Werte sind <strong>nicht</strong> erlaubt.</dd>
+ <dt>
+  &lt;Prozentzahl&gt;</dt>
+ <dd>
+  Ein <a href="/de/CSS/Einheiten#Prozent" title="de/CSS/Einheiten#Prozent">prozentualer</a> Wert, der sich auf die Breite des umschließenden Blocks (containing block) bezieht. Negative Werte <strong>nicht</strong> sind erlaubt.</dd>
+ <dt>
+  inherit</dt>
+ <dd>
+  Der Wert des Elternelements wird geerbt.</dd>
+</dl>
+<h2 id="Beispiele">Beispiele</h2>
+<pre>.content { padding-right: 5%; }
+.sidebox { padding-right: 10px; }
+</pre>
+<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Browser</th>
+   <th>ab Version</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td>1.0 (1.0)</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>3.5</td>
+  </tr>
+  <tr>
+   <td>Safari (WebKit)</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Spezifikation">Spezifikation</h2>
+<ul>
+ <li>{{ spec("http://www.w3.org/TR/CSS21/box.html#padding-properties","CSS 2.1 Box: padding", "CR") }}</li>
+</ul>
+<h2 id="Siehe_auch">Siehe auch</h2>
+<ul>
+ <li><a href="/de/CSS/padding" title="de/CSS/padding"><code>padding</code></a>, <a href="/de/CSS/padding-top" title="de/CSS/padding-top"><code>padding-top</code></a>, <a href="/de/CSS/padding-bottom" title="de/CSS/padding-bottom"><code>padding-bottom</code></a>, <a href="/de/CSS/padding-left" title="de/CSS/padding-left"><code>padding-left</code></a></li>
+ <li><a href="/de/CSS/-moz-padding-start" title="de/CSS/-moz-padding-start"><code>-moz-padding-start</code></a>, <a href="/de/CSS/-moz-padding-end" title="de/CSS/-moz-paddding-end"><code>-moz-padding-end</code></a></li>
+ <li><a href="/de/CSS/margin" title="de/CSS/margin"><code>margin</code></a></li>
+</ul>
+<p>{{ languages( { "en": "en/CSS/padding-right", "ja": "ja/CSS/padding-right" } ) }}</p>
diff --git a/files/de/web/css/padding-top/index.html b/files/de/web/css/padding-top/index.html
new file mode 100644
index 0000000000..319bde784a
--- /dev/null
+++ b/files/de/web/css/padding-top/index.html
@@ -0,0 +1,76 @@
+---
+title: padding-top
+slug: Web/CSS/padding-top
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/padding-top
+---
+<p>{{ CSSRef() }}</p>
+<h2 id="Übersicht">Übersicht</h2>
+<p>Die <code>padding-top</code> Eigenschaft legt den oberen Innenabstand eines Elementes fest. Der Innenabstand ist der Bereich zwischen dem Inhalt und dem <a href="/de/CSS/border" title="de/CSS/border">Rahmen</a> (auch: <em>padding area</em>).</p>
+<ul>
+ <li>Standardwert: <code>0</code></li>
+ <li>Anwendbar auf: alle Elemente außer <code>table-*-group</code>, <code>table-row</code> und <code>table-column</code></li>
+ <li>Vererbbar: Nein</li>
+ <li>Prozentwerte: beziehen sich auf die <a href="/de/CSS/width" title="de/CSS/width">Breite</a> des umschließenden Blocks.</li>
+ <li>Medium: visuell</li>
+ <li>berechneter Wert: eine Prozentzahl wie festgelegt oder die absolute Länge.</li>
+</ul>
+<h2 id="Syntax">Syntax</h2>
+<pre class="eval">padding-top: &lt;Längenangabe&gt; | &lt;Prozentzahl&gt;  | inherit</pre>
+<h3 id="Werte">Werte</h3>
+<dl>
+ <dt>
+  &lt;Längenangabe&gt;</dt>
+ <dd>
+  Legt eine bestimmte <a href="/de/CSS/Einheiten#L.c3.a4ngen" title="de/CSS/Einheiten#L.c3.a4ngen">Länge</a> fest. Negative Werte sind <strong>nicht</strong> erlaubt.</dd>
+ <dt>
+  &lt;Prozentzahl&gt;</dt>
+ <dd>
+  Ein <a href="/de/CSS/Einheiten#Prozent" title="de/CSS/Einheiten#Prozent">prozentualer</a> Wert, der sich auf die Breite des umschließenden Blocks (containing block) bezieht. Negative Werte <strong>nicht</strong> sind erlaubt.</dd>
+ <dt>
+  inherit</dt>
+ <dd>
+  Der Wert des Elternelements wird geerbt.</dd>
+</dl>
+<h2 id="Beispiele">Beispiele</h2>
+<pre>.content { padding-top: 5%; }
+.sidebox { padding-top: 10px; }
+</pre>
+<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Browser</th>
+   <th>ab Version</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td>1.0 (1.0)</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>3.5</td>
+  </tr>
+  <tr>
+   <td>Safari (WebKit)</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Spezifikation">Spezifikation</h2>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#padding-properties" lang="en">CSS 2.1 Box #padding</a></li>
+</ul>
+<h2 id="Siehe_auch">Siehe auch</h2>
+<ul>
+ <li><a href="/de/CSS/padding" title="de/CSS/padding"><code>padding</code></a>, <a href="/de/CSS/padding-right" title="de/CSS/padding-right"><code>padding-right</code></a>, <a href="/de/CSS/padding-bottom" title="de/CSS/padding-bottom"><code>padding-bottom</code></a>, <a href="/de/CSS/padding-left" title="de/CSS/padding-left"><code>padding-left</code></a></li>
+ <li><a href="/de/CSS/-moz-padding-start" title="de/CSS/-moz-padding-start"><code>-moz-padding-start</code></a>, <a href="/de/CSS/-moz-padding-end" title="de/CSS/-moz-paddding-end"><code>-moz-padding-end</code></a></li>
+ <li><a href="/de/CSS/margin" title="de/CSS/margin"><code>margin</code></a></li>
+</ul>
+<p>{{ languages( { "en": "en/CSS/padding-top", "ja": "ja/CSS/padding-top" } ) }}</p>
diff --git a/files/de/web/css/padding/index.html b/files/de/web/css/padding/index.html
new file mode 100644
index 0000000000..96406d0299
--- /dev/null
+++ b/files/de/web/css/padding/index.html
@@ -0,0 +1,125 @@
+---
+title: padding
+slug: Web/CSS/padding
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Innenabstand
+  - CSS Referenz
+  - Layout
+  - Web
+translation_of: Web/CSS/padding
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>padding</code> Eigenschaft ist eine Kurzform für die Innenabstände aller vier Seiten eines Elementes. Der Innenabstand ist der Bereich zwischen dem Inhalt und dem <a href="/de/CSS/border" title="de/CSS/border">Rahmen</a> (auch: <em>padding area</em>).</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="eval">padding:   [ &lt;Längenangabe&gt; | &lt;Prozentzahl&gt; ] {1,4} | inherit</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<p>Es werden bis zu vier der folgenden Werte akzeptiert:</p>
+
+<dl>
+ <dt>&lt;Längenangabe&gt;</dt>
+ <dd>Legt eine bestimmte <a href="/de/CSS/Einheiten#L.c3.a4ngen" title="de/CSS/Einheiten#L.c3.a4ngen">Länge</a> fest. Negative Werte sind <strong>nicht</strong> erlaubt.</dd>
+ <dt>&lt;Prozentzahl&gt;</dt>
+ <dd>Ein <a href="/de/CSS/Einheiten#Prozent" title="de/CSS/Einheiten#Prozent">prozentualer</a> Wert, der sich auf die Breite des umschließenden Blocks (containing block) bezieht. Negative Werte <strong>nicht</strong> sind erlaubt.</dd>
+ <dt>inherit</dt>
+ <dd>Der Wert des Elternelements wird geerbt.</dd>
+ <dt>Ein Wert</dt>
+ <dd>Gilt für alle vier Seiten.</dd>
+ <dt>Zwei Werte</dt>
+ <dd>Der erste Wert bestimmt die <a href="/de/CSS/padding-top" title="de/CSS/padding-top">oberen</a> und <a href="/de/CSS/padding-bottom" title="de/CSS/padding-bottom">unteren</a> Abstände, der zweite Wert legt die Abstände <a href="/de/CSS/padding-right" title="de/CSS/padding-right">rechts</a> und <a href="/de/CSS/padding-left" title="de/CSS/padding-left">links</a> fest.</dd>
+ <dt>Drei Werte</dt>
+ <dd>Der erste Wert bestimmt den <a href="/de/CSS/padding-top" title="de/CSS/padding-top">oberen</a> Abstand, der zweite Wert legt die Abstände für <a href="/de/CSS/padding-right" title="de/CSS/padding-right">rechts</a> und <a href="/de/CSS/padding-left" title="de/CSS/padding-left">links</a> zusammen fest und der dritte Wert bestimmt den <a href="/de/CSS/padding-bottom" title="de/CSS/padding-bottom">unteren</a> Abstand.</dd>
+ <dt>Vier Werte</dt>
+ <dd>Für jede Seite können die Abstände einzeln festgelegt werden. In der Reihenfolge: <a href="/de/CSS/padding-top" title="de/CSS/padding-top">oben</a>, <a href="/de/CSS/padding-right" title="de/CSS/padding-right">rechts</a>, <a href="/de/CSS/padding-bottom" title="de/CSS/padding-bottom">unten</a>, <a href="/de/CSS/padding-left" title="de/CSS/padding-left">links</a>.</dd>
+</dl>
+
+<h3 id="Beispiele">Beispiele</h3>
+
+<pre>padding: 5%;                /* 5% Abstand auf allen Seiten */
+
+padding: 10px;              /* 10px Abstand auf allen Seiten */
+
+padding: 10px 20px;         /* oben und unten 10px */
+                            /* links und rechts 20px */
+
+padding: 10px 3% 20px;      /* oben 10px */
+                            /* links und rechts 3% */
+                            /* unten 20px */
+
+padding: 1em 3px 30px 5px;  /* oben 1em */
+                            /* rechts 3px */
+                            /* unten 30px */
+                            /* links 5px */
+</pre>
+
+<p style="border: outset; padding: 5% 1em;">border:outset; padding:5% 1em;</p>
+
+<h2 id="Livebeispiel" name="Livebeispiel">Livebeispiel</h2>
+
+<h3 id="HTML_Inhalt">HTML Inhalt</h3>
+
+<pre class="brush: html  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h4</span><span class="punctuation token">&gt;</span></span>Hallo Welt!<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h4</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h3</span><span class="punctuation token">&gt;</span></span>Der Innenabstand ist in dieser Zeile anders.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h3</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h3 id="CSS_Inhalt">CSS Inhalt</h3>
+
+<pre class="brush: css  language-css"><code class="language-css"><span class="selector token">h4 </span><span class="punctuation token">{</span>
+<span class="property token">  background-color</span><span class="punctuation token">:</span> green<span class="punctuation token">;</span>
+<span class="property token">  padding</span><span class="punctuation token">:</span> 50px 20px 20px 50px<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">h3</span><span class="punctuation token">{</span>
+<span class="property token">  background-color</span><span class="punctuation token">:</span> blue<span class="punctuation token">;</span>
+<span class="property token">  padding</span><span class="punctuation token">:</span> 400px 50px 50px 400px<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>{{ EmbedLiveSample('Livebeispiel') }}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Box', '#the-padding', 'padding') }}</td>
+   <td>{{ Spec2('CSS3 Box') }}</td>
+   <td>keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'box.html#propdef-padding', 'padding-top') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{ Specname('CSS1', '#padding', 'padding') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browserkompatiblität</h2>
+
+{{Compat("css.properties.padding")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a class="internal" href="/de/docs/Web/CSS/Boxmodell" title="en/CSS/box model">CSS Boxmodell</a></li>
+</ul>
diff --git a/files/de/web/css/page-break-after/index.html b/files/de/web/css/page-break-after/index.html
new file mode 100644
index 0000000000..ef08a19da6
--- /dev/null
+++ b/files/de/web/css/page-break-after/index.html
@@ -0,0 +1,90 @@
+---
+title: page-break-after
+slug: Web/CSS/page-break-after
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/page-break-after
+---
+<p>{{ CSSRef() }}</p>
+<h2 id="Übersicht">Übersicht</h2>
+<p>Die <code>page-break-after</code> Eigenschaft dient zur Regulierung von Seitenumbrüchen nach dem aktuellen Element.</p>
+<ul>
+ <li>Standardwert: <code>auto</code></li>
+ <li>Anwendbar auf: Blockelemente</li>
+ <li>Vererbbar: Nein</li>
+ <li>Prozentwerte: Nein</li>
+ <li>Medium: visuell, Seiten</li>
+ <li>berechneter Wert: wie festgelegt</li>
+</ul>
+<h2 id="Syntax">Syntax</h2>
+<pre class="eval">page-break-after: auto | always | avoid | left | right | inherit
+</pre>
+<h3 id="Werte">Werte</h3>
+<dl>
+ <dt>
+  auto</dt>
+ <dd>
+  Standardwert. Automatischer Seitenumbruch.</dd>
+ <dt>
+  always</dt>
+ <dd>
+  Es wird immer ein Seitenumbruch nach einem Element eingefügt.</dd>
+ <dt>
+  avoid {{ Unimplemented_inline() }}</dt>
+ <dd>
+  Ein Seitenumbruch nach einem Element wird vermieden.</dd>
+ <dt>
+  left {{ Unimplemented_inline() }}</dt>
+ <dd>
+  Es wird ein Seitenumbruch eingefügt, sodass das folgende Element auf der nächsten linken Seite platziert wird.</dd>
+ <dt>
+  right {{ Unimplemented_inline() }}</dt>
+ <dd>
+  Es wird ein Seitenumbruch eingefügt, sodass das folgende Element auf der nächsten rechten Seite platziert wird.</dd>
+ <dt>
+  inherit {{ Unimplemented_inline() }}</dt>
+ <dd>
+  Der Wert des Elternelements wird geerbt.</dd>
+</dl>
+<h2 id="Beispiele">Beispiele</h2>
+<pre>/* Überschriften auf eine neue Seite platzieren */
+h1,h2, h3 { page-break-after:always; }
+</pre>
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Browser</th>
+   <th>ab Version</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td>1.0 (1.0) [*]</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>7.0</td>
+  </tr>
+  <tr>
+   <td>Safari (WebKit)</td>
+   <td>1.2 (125)</td>
+  </tr>
+ </tbody>
+</table>
+<p>[*] Gecko unterstützt nur <code>page-break-after:always</code>. Siehe {{ bug(132035) }}</p>
+<h2 id="Spezifikation">Spezifikation</h2>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-page/#page-break-after" lang="en">CSS 3 Paged Media #page-break-after</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/CSS2/page.html#propdef-page-break-after" lang="en">CSS 2.1 Paged Media #page-break-after</a></li>
+</ul>
+<h2 id="Siehe_auch">Siehe auch</h2>
+<ul>
+ <li><a href="/de/CSS/page-break-before"><code>page-break-before</code></a>, <a href="/de/CSS/page-break-inside" title="de/CSS/page-break-inside"><code>page-break-inside</code></a></li>
+ <li><a href="/de/CSS/orphans" title="de/CSS/orphans"><code>orphans</code></a>, <a href="/de/CSS/widows" title="de/CSS/widows"><code>widows</code></a></li>
+</ul>
+<p>{{ languages( {"en": "en/CSS/page-break-after" } ) }}</p>
diff --git a/files/de/web/css/page-break-before/index.html b/files/de/web/css/page-break-before/index.html
new file mode 100644
index 0000000000..7dfffaf948
--- /dev/null
+++ b/files/de/web/css/page-break-before/index.html
@@ -0,0 +1,90 @@
+---
+title: page-break-before
+slug: Web/CSS/page-break-before
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/page-break-before
+---
+<p>{{ CSSRef() }}</p>
+<h2 id="Übersicht">Übersicht</h2>
+<p>Die <code>page-break-before</code> Eigenschaft dient zur Regulierung von Seitenumbrüchen vor dem aktuellen Element.</p>
+<ul>
+ <li>Standardwert: <code>auto</code></li>
+ <li>Anwendbar auf: Blockelemente</li>
+ <li>Vererbbar: Nein</li>
+ <li>Prozentwerte: Nein</li>
+ <li>Medium: visuell, Seiten</li>
+ <li>berechneter Wert: wie festgelegt</li>
+</ul>
+<h2 id="Syntax">Syntax</h2>
+<pre class="eval">page-break-before: auto | always | avoid | left | right | inherit
+</pre>
+<h3 id="Werte">Werte</h3>
+<dl>
+ <dt>
+  auto</dt>
+ <dd>
+  Standardwert. Automatischer Seitenumbruch.</dd>
+ <dt>
+  always</dt>
+ <dd>
+  Es wird immer ein Seitenumbruch vor einem Element eingefügt.</dd>
+ <dt>
+  avoid {{ Unimplemented_inline() }}</dt>
+ <dd>
+  Ein Seitenumbruch vor einem Element wird vermieden.</dd>
+ <dt>
+  left {{ Unimplemented_inline() }}</dt>
+ <dd>
+  Es wird ein Seitenumbruch eingefügt, sodass das folgende Element auf der nächsten linken Seite platziert wird.</dd>
+ <dt>
+  right {{ Unimplemented_inline() }}</dt>
+ <dd>
+  Es wird ein Seitenumbruch eingefügt, sodass das folgende Element auf der nächsten rechten Seite platziert wird.</dd>
+ <dt>
+  inherit {{ Unimplemented_inline() }}</dt>
+ <dd>
+  Der Wert des Elternelements wird geerbt.</dd>
+</dl>
+<h2 id="Beispiele">Beispiele</h2>
+<pre>/* Vermeide Seitenumbruch vor dem div-Element */
+div.note { page-break-before: avoid;  }
+</pre>
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Browser</th>
+   <th>ab Version</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td>1.0 (1.0) [*]</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>7.0</td>
+  </tr>
+  <tr>
+   <td>Safari (WebKit)</td>
+   <td>1.2 (125)</td>
+  </tr>
+ </tbody>
+</table>
+<p>[*] Gecko unterstützt nur <code>page-break-before:always</code>. Siehe {{ bug(132035) }}</p>
+<h2 id="Spezifikation">Spezifikation</h2>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-page/#page-break-before" lang="en">CSS 3 Paged Media #page-break-before</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/CSS2/page.html#propdef-page-break-before" lang="en">CSS 2.1 Paged Media #page-break-before</a></li>
+</ul>
+<h2 id="Siehe_auch">Siehe auch</h2>
+<ul>
+ <li><a href="/de/CSS/page-break-after"><code>page-break-after</code></a>, <a href="/de/CSS/page-break-inside"><code>page-break-inside</code></a></li>
+ <li><a href="/de/CSS/orphans" title="de/CSS/orphans"><code>orphans</code></a>, <a href="/de/CSS/widows" title="de/CSS/widows"><code>widows</code></a></li>
+</ul>
+<p>{{ languages( {"en": "en/CSS/page-break-before" } ) }}</p>
diff --git a/files/de/web/css/page-break-inside/index.html b/files/de/web/css/page-break-inside/index.html
new file mode 100644
index 0000000000..6136f98b9e
--- /dev/null
+++ b/files/de/web/css/page-break-inside/index.html
@@ -0,0 +1,87 @@
+---
+title: page-break-inside
+slug: Web/CSS/page-break-inside
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/page-break-inside
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>page-break-inside</code> Eigenschaft dient zur Regulierung von Seitenumbrüchen innerhalb des aktuellen Elements.</p>
+
+<ul>
+ <li>Standardwert: <code>auto</code></li>
+ <li>Anwendbar auf: Blockelemente</li>
+ <li>Vererbbar: Nein</li>
+ <li>Prozentwerte: Nein</li>
+ <li>Medium: visuell, Seiten</li>
+ <li>berechneter Wert: wie festgelegt</li>
+</ul>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="eval">page-break-inside: auto | avoid | inherit
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt>auto</dt>
+ <dd>Standardwert. Automatischer Seitenumbruch.</dd>
+ <dt>avoid</dt>
+ <dd>Ein Seitenumbruch innerhalb eines Elements wird vermieden.</dd>
+ <dt>inherit</dt>
+ <dd>Der Wert des Elternelements wird geerbt.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre>/* Vermeide Seitenumbruch innerhalb des Absatzes */
+p { page-break-inside: avoid;  }
+</pre>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Browser</th>
+   <th>ab Version</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>8.0</td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>7.0</td>
+  </tr>
+  <tr>
+   <td>Safari (WebKit)</td>
+   <td>1.3 (312)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-page/#page-break-inside" lang="en">CSS 3 Paged Media #page-break-inside</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/CSS2/page.html#propdef-page-break-inside" lang="en">CSS 2.1 Paged Media #page-break-inside</a></li>
+</ul>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/CSS/page-break-after" title="de/CSS/page-break-after"><code>page-break-after</code></a>, <a href="/de/docs/Web/CSS/page-break-before" title="de/CSS/page-break-before"><code>page-break-before</code></a></li>
+ <li><a href="/de/docs/Web/CSS/orphans" title="de/CSS/orphans"><code>orphans</code></a>, <a href="/de/docs/Web/CSS/widows" title="de/CSS/widows"><code>widows</code></a></li>
+</ul>
+
+<p>{{ languages( {"en": "en/CSS/page-break-inside" } ) }}</p>
diff --git a/files/de/web/css/paged_media/index.html b/files/de/web/css/paged_media/index.html
new file mode 100644
index 0000000000..1a9fafe9cf
--- /dev/null
+++ b/files/de/web/css/paged_media/index.html
@@ -0,0 +1,21 @@
+---
+title: Seitennummerierte Medien
+slug: Web/CSS/Paged_Media
+tags:
+  - CSS
+  - CSS3
+  - Seitenumbrüche
+translation_of: Web/CSS/Paged_Media
+---
+<div>{{cssref}}</div>
+
+<p><strong>Seitennummerierte Medieneigenschaften</strong> steuern die Darstellung von Inhalten für den Druck oder andere Medien, die den Inhalt in separate Seiten aufteilen. Sie erlauben es, Seitenumbrüche zu setzen, den Druckbereich festzulegen, linke und rechte Seiten unterschiedlich zu gestalten und Umbrüche innerhalb von Elementen zu steuern. Allgemein unterstützte Eigenschaften beinhalten</p>
+
+<ul>
+ <li>{{cssxref("page-break-before")}}</li>
+ <li>{{cssxref("page-break-after")}}</li>
+ <li>{{cssxref("page-break-inside")}}</li>
+ <li>{{cssxref("orphans")}}</li>
+ <li>{{cssxref("widows")}}</li>
+ <li>{{cssxref("@page")}}</li>
+</ul>
diff --git a/files/de/web/css/percentage/index.html b/files/de/web/css/percentage/index.html
new file mode 100644
index 0000000000..36cc54c434
--- /dev/null
+++ b/files/de/web/css/percentage/index.html
@@ -0,0 +1,84 @@
+---
+title: <percentage>
+slug: Web/CSS/percentage
+tags:
+  - CSS
+  - CSS Datentypen
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/percentage
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Der <code>&lt;percentage&gt;</code> <a href="/de/docs/Web/CSS" title="CSS">CSS</a> Datentyp repräsentiert einen Prozentwert. Viele <a href="/de/docs/Web/CSS/CSS_Referenz" title="en/CSS_Reference">CSS Eigenschaften</a> akzeptieren Prozentwerte, oft um Größen bezüglich Elternobjekten zu definieren. Prozentwerte werden durch einen {{cssxref("&lt;number&gt;")}} Wert unmittelbar gefolgt von einem Prozentzeichen <code>%</code> angegeben. Wie bei allen Einheiten in CSS wird kein Leerzeichen zwischen der Zahl und dem '%' geschrieben.</p>
+
+<p>Viele Längeneigenschaften verwenden Prozentwerte, wie {{ Cssxref("width") }}, {{ Cssxref("margin") }} und {{ Cssxref("padding") }}. Prozentwerte können auch in {{ Cssxref("font-size") }} vorkommen, wo die Größe des Texts direkt von der Textgröße des Elternelements abhängt.</p>
+
+<div class="note"><strong>Hinweis:</strong> Nur berechnete Werte werden vererbt. D. h. auch wenn ein Prozentwert für eine Elterneigenschaft verwendet wird, wird für die vererbte Eigenschaft ein realer Wert, wie beispielsweise eine Breite in Pixeln für einen {{cssxref("&lt;length&gt;")}} Wert, verwendet, nicht der Prozentwert.</div>
+
+<h2 id="Interpolation">Interpolation</h2>
+
+<p>Werte des <code>&lt;percentage&gt;</code> CSS Datentyps können interpoliert werden, um Animationen zu erlauben. In diesem Fall werden sie als reale Fließkommazahlen interpoliert. Die Geschwindigkeit der Interpolation wird durch die <a href="/de/docs/Web/CSS/timing-function">Timingfunktion</a> bestimmt, die mit der Animation verbunden ist.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<div id="Beispiel_1">
+<pre class="brush: html">&lt;div style="background-color:#0000FF;"&gt;
+  &lt;div style="width:50%;margin-left:20%;background-color:#00FF00;"&gt;Breite: 50%, linker Außenabstand: 20%&lt;/div&gt;
+  &lt;div style="width:30%;margin-left:60%;background-color:#FF0000;"&gt;Breite: 30%, linker Außenabstand: 60%&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>Ergibt:</p>
+
+<p>{{ EmbedLiveSample('Beispiel_1','600','70') }}</p>
+
+<div id="Beispiel_2">
+<pre class="brush: html">&lt;div style="font-size:18px;"&gt;
+  Text in Normalgröße (18px)
+  &lt;span style="font-size:50%;"&gt;50%&lt;/span&gt;
+  &lt;span style="font-size:200%;"&gt;200%&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>Ergibt:</p>
+
+<p>{{ EmbedLiveSample('Beispiel_2','600','50') }}</p>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Values', '#percentages', '&lt;percentage&gt;') }}</td>
+   <td>{{ Spec2('CSS3 Values') }}</td>
+   <td>Keine signifikante Änderung zu CSS Level 2 (Revision 1)</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'syndata.html#percentage-units', '&lt;percentage&gt;') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Keine Änderung zu CSS Level 1</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#percentage-units', '&lt;percentage&gt;') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.types.percentage")}}
diff --git a/files/de/web/css/pointer-events/index.html b/files/de/web/css/pointer-events/index.html
new file mode 100644
index 0000000000..29916ac619
--- /dev/null
+++ b/files/de/web/css/pointer-events/index.html
@@ -0,0 +1,184 @@
+---
+title: pointer-events
+slug: Web/CSS/pointer-events
+translation_of: Web/CSS/pointer-events
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+
+<p>Die CSS-Eigenschaft<strong> <code>pointer-events</code></strong> erlaubt es dem Autor zu steuern, unter welchen Umständen (wenn überhaupt) ein spezifisches grafisches Element <a href="/en-US/docs/Web/API/event.target">target</a> eines Mouse-Events wird. Wenn die Eigenschaft nicht gesetzt ist, werden die Eigenschaften von <code>visiblePainted</code> auf den SVG Inhalt angewandt.</p>
+
+<p>Der Wert <code>none</code> ist nicht nur Indikator, dass das Element kein Ziel für Mouse-Events ist, sondern weist den Mouse-Event zusätzlich an, "durch" das Element zu gehen und stattdessen auf was auch immer auch "darunterliegend" ist, zu zielen.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css">/* Keyword values */
+pointer-events: auto;
+pointer-events: none;
+pointer-events: visiblePainted;
+pointer-events: visibleFill;
+pointer-events: visibleStroke;
+pointer-events: visible;
+pointer-events: painted;
+pointer-events: fill;
+pointer-events: stroke;
+pointer-events: all;
+
+/* Global values */
+pointer-events: inherit;
+pointer-events: initial;
+pointer-events: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Das Element verhält sich als ob die <code>pointer-events <font face="Open Sans, Arial, sans-serif">Eigenschaft nicht spezifiziert wurde. Im SVG-Inhalt hat dieser Wert und der Wert </font>visiblePainted</code> <code><font face="Open Sans, Arial, sans-serif">den selben Effekt.</font></code></dd>
+ <dt><code>none</code></dt>
+ <dd>Das Element ist nie das Ziel von Mouse-Events;  trotzdem werden abstämmige Elemente angezielt, sofern Ihre <code>pointer-events </code>einen abweichenden Wert haben. In diesem Fall lösen Mouse-Events während Ihrem Weg zu/von den Nachkömmlingen während der Event-Capture/<a href="/en-US/docs/Web/API/event.bubbles">bubble</a>-Phasen gegebenenfalls die Event-Listener des übergeordneten Elements aus.</dd>
+ <dt><code>visiblePainted</code></dt>
+ <dd>Nur SVG. Das Element kann nur Ziel eines Mouse-Events werden, wenn die <code>visibility</code> Eigenschaft auf <code>visible</code> gesetzt ist, sich der Mauszeiger im Inneren (z. B. 'fill') befindet und die <code>fill-</code>Eigenschaft einen anderen Wert als <code>none</code> hat oder wenn sich der Mauszeiger über einem Umgrenzung (z. B. 'stroke') des Elements befindet und die <code>stroke-</code>Eigenschaft einen anderen Wert als <code>none </code>hat.</dd>
+ <dt><code>visibleFill</code></dt>
+ <dd>Nur SVG. Das Element kann nur Ziel eines Mouse-Events werden, wenn die <code>visibility</code> Eigenschaft auf <code>visible</code> gesetzt ist und sich der Mauszeiger im Inneren (z. B. 'fill') befindet. Der Wert der <code>fill-</code>Eigenschaft beinflusst die Event-Verarbeitung nicht.</dd>
+ <dt><code>visibleStroke</code></dt>
+ <dd>Nur SVG. Das Element kann nur Ziel eines Mouse-Events werden, wenn die <code>visibility</code> Eigenschaft auf <code>visible</code> gesetzt ist und sich der Mauszeiger über einem Umgrenzung (z. B. 'stroke') des Elements befindet. Der Wert der <code>stroke-</code>Eigenschaft beinflusst die Event-Verarbeitung nicht.</dd>
+ <dt><code>visible</code></dt>
+ <dd>Nur SVG. Das Element kann nur Ziel eines Mouse-Events werden, wenn die <code>visibility</code> Eigenschaft auf <code>visible</code> gesetzt ist und sich der Mauszeiger entweder im Inneren (z. B. 'fill') oder über einem Umgrenzung (z. B. 'stroke') des Elements befindet. Die Werte der <code>stroke- </code>und <code>fill-</code>Eigenschaft beinflussen die Event-Verarbeitung nicht.</dd>
+ <dt><code>painted</code></dt>
+ <dd>Nur SVG. Das Element kann nur Ziel eines Mouse-Events werden, wenn sich der Mauszeiger im Inneren (z. B. 'fill') des Elements befindet, und die <code>fill-</code>Eigenschaft einen anderen Wert als <code>none</code> hat, oder sich der Mauszeiger über einem Umgrenzung (z. B. 'stroke')  des Elements befindet, und die <code>stroke-</code>Eigenschaft einen anderen Wert als <code>none </code>hat.  Die Werte der <code>stroke- </code>und <code>fill-</code>Eigenschaft beinflussen die Event-Verarbeitung nicht.</dd>
+ <dt><code>fill</code></dt>
+ <dd>Nur SVG. Das Element kann nur Ziel eines Mouse-Events werden, wenn sich der Mauszeiger im Inneren (z. B. 'fill') des Elements befindet. Die Werte der <code>stroke- </code>und <code>fill-</code>Eigenschaft beinflussen die Event-Verarbeitung nicht.</dd>
+ <dt><code>stroke</code></dt>
+ <dd>Nur SVG. Das Element kann nur Ziel eines Mouse-Events werden, wenn sich der Mauszeiger über einem Umgrenzung (z. B. 'stroke') des Elements befinden. Die Werte der <code>stroke- </code>und <code>fill-</code>Eigenschaft beinflussen die Event-Verarbeitung nicht.</dd>
+ <dt><code>all</code></dt>
+ <dd>Nur SVG. Das Element kann nur Ziel eines Mouse-Events werden, wenn sich der Mauszeiger entweder im Inneren (z. B. 'fill') oder über einem Umgrenzung (z. B. 'stroke') des Elements befinden. Die Werte der <code>stroke- </code>und <code>fill-</code>Eigenschaft beinflussen die Event-Verarbeitung nicht.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Beispiel_1">Beispiel 1</h3>
+
+<pre class="brush:css">/* Beispiel 1: Unterbinden die Reaktion von `img` auf alle Mouse-Events wie z. B. dragging, hovering, clicking */
+img {
+  pointer-events: none;
+}</pre>
+
+<h3 id="Example_2" name="Example_2">Beispiel 2</h3>
+
+<p>Unterbinden eine Reaktion des Link-Tags mit der Eigenschaft href=http://example.com.</p>
+
+<pre class="brush:html">&lt;ul&gt;
+  &lt;li&gt;&lt;a href="https://developer.mozilla.org"&gt;MDN&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="http://example.com"&gt;example.com&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<pre class="brush:css">a[href="http://example.com"] {
+  pointer-events: none;
+}</pre>
+
+<div>{{EmbedLiveSample('Example_2', "500", "100")}}</div>
+
+<h2 id="Anmerkungen">Anmerkungen</h2>
+
+<p>Es gilt zu beachten: Durch <code>pointer-events</code> zu verhindern, dass ein Element Ziel eines Mouse-Events wird, bedeutet nicht, dass Mouse-Event-Listeners auf diesem Element nicht ausgelößt <em>werden</em> oder <em>werden können</em>. Wenn bei einem der Kinder des Elements <code>pointer-events</code> explizit gesetzt wurde, um <em>zu erlauben</em>, dass dieses Ziel eines Mouse-Events wird, werden alle auf das Kind gerichteten Events entlang der Elternkette durch das Elternelement wandern und wohlmöglich Events des Elternelements auslösen. Natürlich wird jede Mausinteraktion auf einem Punkt des Bildschirms, welcher vom Eltern- aber nicht vom Kindelement bedeckt ist, weder vom Kind noch vom Elternelement eingefangen (sie wird durch das Elternelement <em>hindurchgehen und </em>auf das zielen, was immer "darunterliegend" ist).</p>
+
+<p>Wir würden gerne feingranularere Kontrolle (als lediglich <code>auto</code> und <code>none</code>) über die Teile eines Elements welche Mouse-Events "einfangen" und wann, im HTML bereitstellen. Um uns bei der Entscheidung zu helfen, welche <code>pointer-events</code> für HTML weiter ausgebaut werden sollten, oder wenn Sie irgend welche speziellen Wünsche haben, was Ihnen diese Eigenschaft ermöglichen sollte, dann fügen Sie diese bitte dem Use cases Abschnitt dieser <a class="link-https" href="https://wiki.mozilla.org/SVG:pointer-events">Wiki Seite</a> hinzu (Machen Sie sich über die Ordentlichkeit keine Sorgen).</p>
+
+<p>Diese Eigenschaft kann auch benutzt werden um bessere Bildraten beim Scrollen zu erzielen. Tatsächlich, während des Scrollens fährt die Maus über einige Elemente auf denen der <a href="/en-US/docs/Web/CSS/:hover">hover</a>-Effekt angewendet wird. Diese Effekte hingegen bleiben meist unbemerkt und resultieren trotzdem meist in hakeligen Scrollen.  <code>pointer-events: none</code> auf den <code>body</code> anzuwenden deaktiviert Mouse-Events inkl. <code>hover</code> und wirkt sich positiv auf die Flüssigkeit des Scrollens. </p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikationen</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'interact.html#PointerEventsProperty', 'pointer-events')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Seine Erweiterung für HTML-Elemente, trotz Präsenz in frühen Entwürfen von CSS Basic User Interface Module Level 3, wurde auf sein <a class="external" href="http://wiki.csswg.org/spec/css4-ui#pointer-events">level 4</a> erhoben.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser-Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>SVG support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.8")}}</td>
+   <td>11.0</td>
+   <td>9.0 (2.0)</td>
+   <td>3.0 (522)</td>
+  </tr>
+  <tr>
+   <td>HTML/XML content</td>
+   <td>2.0</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}} [1]</td>
+   <td>11.0</td>
+   <td>15.0</td>
+   <td>4.0 (530)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Vor Firefox 41, standardmäßig deaktiviert. Seit Firefox 41, standardmäßig auf Desktop aktiviert, allerdings nur in Nightly builds.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Das SVG-Attribut {{SVGAttr("pointer-events")}}</li>
+ <li><a class="external" href="http://webkit.org/specs/PointerEventsProperty.html">WebKit Specs PointerEventsProperty</a> erweitert für den Gebrauch im (X)HTML Inhalt</li>
+ <li><a href="http://www.thecssninja.com/javascript/pointer-events-60fps">60fps scrolling using pointer-events: none</a></li>
+</ul>
diff --git a/files/de/web/css/position/index.html b/files/de/web/css/position/index.html
new file mode 100644
index 0000000000..7acf3f3009
--- /dev/null
+++ b/files/de/web/css/position/index.html
@@ -0,0 +1,104 @@
+---
+title: position
+slug: Web/CSS/position
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Positionierung
+  - Referenz
+translation_of: Web/CSS/position
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>position</code> Eigenschaft legt die Positionsart eines Elements fest. Für die Positionierung selbst werden die Eigenschaften <a href="/De/CSS/Top" title="de/CSS/top"><code>top</code></a>, <a href="/De/CSS/Right" title="de/CSS/right"><code>right</code></a>, <a href="/De/CSS/Bottom" title="de/CSS/bottom"><code>bottom</code></a> oder <a href="/De/CSS/Left" title="de/CSS/left"><code>left</code></a> verwendet.</p>
+
+<p>Ein <em>positioniertes Element</em> ist ein Element für das <code>absolute</code>, <code>fixed</code> oder <code>relative</code> als <code>position</code> definiert wurde.<br>
+ Ein <em>absolut positioniertes Element</em> ist ein Element für das <code>absolute</code> oder <code>fixed</code> als <code>position</code> definiert wurde.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt>static</dt>
+ <dd>Standardwert. Das Element ist im normalen Fluss. Die Eigenschaften <code>top</code>, <code>right</code>, <code>bottom</code> oder <code>left</code> haben keine Auswirkungen.</dd>
+ <dt>relative</dt>
+ <dd>Das Element wird vom normalen Fluss aus verschoben und hat keinen Einfluss auf andere Elemente, da an der ursprünglichen Position Platz gelassen wird. Bei <code> table-*-group</code>,<code> table-row</code>,<code> table-column</code>,<code> table-cell</code>, und<code> table-caption </code>Elementen ist kein Effekt definiert.</dd>
+ <dt>absolute</dt>
+ <dd>Das Element wird aus dem normalen Fluss gelöst und unabhängig verschoben. Dabei können andere Elemente verdeckt werden. Diese verhalten sich so, als ob das Element nicht vorhanden wäre und lassen keinen Platz für das Element.</dd>
+ <dt>sticky {{Experimental_inline}}</dt>
+ <dd>Eine Mischung zwischen <code>fixed</code> und <code>relative</code>: Das Element wird vom normalen Fluss aus verschoben und hat keinen Einfluss auf andere Elemente, solange es sich innerhalb des Viewports befindet. Sobald es sich ausserhalb befindet, wird das Element aus dem normalen Fluss gelöst und bleibt so beim Scrollen an seiner fest definierten Position.</dd>
+ <dt>fixed</dt>
+ <dd>Die Verschiebung orientiert sich am Viewport. Das Element wird aus dem normalen Fluss gelöst und bleibt auch beim Scrollen an seiner fest definierten Position. Beim Drucken wird das Element auf <em>jeder Seite</em> an der positionierten Stelle angezeigt.</dd>
+ <dt>inherit</dt>
+ <dd>Der Wert des Elternelements wird geerbt.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Das folgende Beispiel verdeutlicht den Unterschied zwischen <code>position: absolute</code> und <code>position: fixed</code>. Während das absolut positionierte Element beim Scrollen mitwandert, bleibt das mit <code>fixed</code> positionierte Element fest an seiner Position.</p>
+
+<pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+   "http://www.w3.org/TR/html4/strict.dtd"&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta http-equiv="content-type" content="text/html; charset=utf-8"&gt;
+&lt;title&gt;Position absolute und fixed&lt;/title&gt;
+&lt;style type="text/css"&gt;
+p {font-size:30px; line-height:3em;}
+div.pos {width:49%; text-align:center; border:2px solid #00f;}
+div#abs {position:absolute; bottom:0; left:0;}
+div#fix {position:fixed; bottom:0; right:0;}
+&lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;p&gt;This&lt;br&gt;is&lt;br&gt;some&lt;br&gt;tall,&lt;br&gt;tall,
+    &lt;br&gt;tall,&lt;br&gt;tall,&lt;br&gt;tall&lt;br&gt;content.&lt;/p&gt;
+  &lt;div id="fix" class="pos"&gt;&lt;p&gt;Fixed&lt;/p&gt;&lt;/div&gt;
+  &lt;div id="abs" class="pos"&gt;&lt;p&gt;Absolute&lt;/p&gt;&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Specifications" name="Specifications">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#propdef-position', 'position')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Positioning')}}</td>
+   <td>{{Spec2('CSS3 Positioning')}}</td>
+   <td><code>sticky</code> hinzugefügt</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompatibilität</h2>
+
+<p>{{Compat("css.properties.position")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/De/CSS/Top" title="de/CSS/top"><code>top</code></a>, <a href="/De/CSS/Left" title="de/CSS/left"><code>left</code></a>, <a href="/De/CSS/Bottom" title="de/CSS/bottom"><code>bottom</code></a>, <a href="/De/CSS/Right" title="de/CSS/right"><code>right</code></a></li>
+</ul>
+
+<p>{{ languages( { "en": "en/CSS/position", "fr": "fr/CSS/position", "es": "es/CSS/position" } ) }}</p>
diff --git a/files/de/web/css/position_value/index.html b/files/de/web/css/position_value/index.html
new file mode 100644
index 0000000000..6ed01c98ab
--- /dev/null
+++ b/files/de/web/css/position_value/index.html
@@ -0,0 +1,86 @@
+---
+title: <position>
+slug: Web/CSS/position_value
+tags:
+  - CSS
+  - CSS Datentyp
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/position_value
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Der <code>&lt;position&gt;</code> <a href="/de/docs/Web/CSS">CSS</a> Datentyp beschreibt eine Koordinate im 2D-Raum, die dazu verwendet wird, die Position relativ zu einer Box zu setzen.</p>
+
+<p><img alt="" src="/files/3797/position_type.png" style="float: left; height: 208px; width: 306px;">Eine bestimmte Position kann durch zwei Schlüsselwörter mit bestimmten Versätzen angegeben werden. Ein Schlüsselwort repräsentiert einen Rand der Elementbox oder die Mittellinie zwischen zwei Rändern: <code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code> oder <code>center</code> (was entweder die Mitte zwischen dem linken und rechten Rand repräsentiert oder die Mitte zwischen dem oberen und unteren Rand, abhängig vom Kontext).</p>
+
+<p>{{experimental_inline}}Ein Versatz kann entweder ein relativer Wert sein, ausgedrückt durch einen {{cssxref("&lt;percentage&gt;")}} Wert, oder ein absoluter {{cssxref("&lt;length&gt;")}} Wert. Positive Werte werden nach rechts oder unten versetzt, je nachdem, was zutrifft. Negative Werte werden in die anderen Richtungen versetzt.</p>
+
+<p>Die endgültige Position, die durch den <code>&lt;position&gt;</code> Wert beschrieben wird, muss nicht innerhalb der Elementbox liegen.</p>
+
+<p>Falls ein Versatz ohne zugehöriges Schlüsselwort angegeben wurde, wird für es <code>center</code> angenommen.</p>
+
+<h2 id="Interpolation" style="">Interpolation</h2>
+
+<p>Die Werte für die Abzisse und die Ordinate werden unabhängig voneinander interpoliert. Da die Geschwindigkeit für beide durch dieselbe {{cssxref("&lt;timing-function&gt;")}} definiert wird, folgt der Punkt einer Linie.</p>
+
+<h2 id="Werte">Werte</h2>
+
+<pre class="brush:css">/* 1-Wert-Syntax */
+<var>Schlüsselwort</var>                  /* Der zugehörige Rand, die andere Richtung verweist auf center, die Mitte des Randes. */
+<var>&lt;length&gt;</var> oder <var>&lt;percentage&gt;</var> /* Die Position auf der x-Achse, 50% für die y-Achse. */
+
+/* 2-Werte-Syntax */
+<var>Schlüsselwort</var> <var>Schlüsselwort</var>          /* Ein Schlüsselwort für jede Richtung, die Reihenfolge ist unwichtig. */
+<var>Schlüsselwort</var> <var>Wert</var>            /* Der Wert ist der Versatz für den Rand, der durch das Schlüsselwort definiert wird. */
+</pre>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">[ [ left | center | right | top | bottom | <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ] |
+                  [ left | center | right | <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ] [ top | center | bottom | <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ] |
+                  [ center | [ left | right ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ] &amp;&amp;
+                  [ center | [ top | bottom ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ]
+                ]
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#position', '&lt;position&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Listed die Links zu beiden Definitionen auf mit der Voraussetzung, dass diese koherent sind: falls {{SpecName('CSS3 Backgrounds')}} unterstützt wird, muss deren Definition von <code>&lt;position&gt;</code> ebenfalls verwendet werden.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#position', '&lt;position&gt;')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Definiert <code>&lt;position&gt;</code> explizit und erweitert es um die Unterstützung von Versätzen von einem beliebigen Rand.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-position', '&lt;position&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Erlaubt die Kombination von einem Schlüsselwort mit einem {{cssxref("&lt;length&gt;")}} oder einem {{cssxref("&lt;percentage&gt;")}} Wert.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background-position', '&lt;position&gt;')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Definiert <code>&lt;position&gt;</code> anonym als Wert von {{cssxref("background-position")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.types.position")}}
diff --git a/files/de/web/css/property_template/index.html b/files/de/web/css/property_template/index.html
new file mode 100644
index 0000000000..57b2483609
--- /dev/null
+++ b/files/de/web/css/property_template/index.html
@@ -0,0 +1,165 @@
+---
+title: Eigenschaft Vorlage
+slug: Web/CSS/Property_Template
+tags:
+  - CSS
+  - CSS Referenz
+  - MDN Meta
+translation_of: MDN/Contribute/Howto/Document_a_CSS_property/Property_template
+---
+<div>{{MDNSidebar}}</div><div>{{ CSSRef() }}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Eine Beschreibung der Eigenschaft, welche erklärt was diese Eigenschaft bewirkt.</p>
+
+<div class="note">(Falls vorhanden) Wichtige Informationen zu dieser Eigenschaft</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Schlüsselwortwerte */
+property: value1;
+property: value2;
+
+/* &lt;length&gt; Werte */
+property: 12.8em;
+
+/* Globale Werte */
+property: inherit; <em>&lt;-- To remember those are a possible values</em>
+property: initial;
+property: unset;
+</pre>
+
+<p><strong>&lt;Wert&gt;</strong>: wert | wert2 | wert3 | wert2</p>
+
+<h2 id="Werte">Werte</h2>
+
+<dl>
+ <dt>wert1 {{ gecko_minversion_inline("9.9") }}</dt>
+ <dd>Erläuterung.</dd>
+ <dt>wert2</dt>
+ <dd>....</dd>
+</dl>
+
+<h3 id="(Falls_vorhanden)_Mozilla_Erweiterungen">(Falls vorhanden) Mozilla Erweiterungen</h3>
+
+<dl>
+ <dt>-moz-*</dt>
+ <dd>Erklärung</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Beispiel_1">Beispiel 1</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush:css">ElementName {
+  Eigenschaft: Wert;
+  dazu: "Beispiel";
+  Traum: 10000000mm;
+  Liebe: "Gefahr";
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;ElementName&gt;foo bar&lt;/ElementName&gt;</pre>
+
+<h4 id="Ergebnis">Ergebnis</h4>
+
+<p>{{EmbedLiveSample("Beispiel_1")}}</p>
+
+<h3 id="Beispiel_2_gecko_minversion_inline(9.9)">Beispiel 2 {{ gecko_minversion_inline("9.9") }}</h3>
+
+<pre class="brush:css">ElementName {
+  eigenschaft: wert;
+  /* ... */
+}</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p><em>Benutze ausschließlich die Standardtabelle. Füge andere Spezifikationen am Ende an. Benutze das Makro \{{SpecName()}} für den Name und \{{Spec2()}} für den Status. Auf diese Weise wird der Tabelleninhalt automatisch angepasst, sobald sich der Status einer Spezifikation ändert.</em></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Animations", "#fake-link", "fake-value")}}</td>
+   <td>{{Spec2("CSS3 Animations")}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "#fake-link", "fake value")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable()}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>100</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>100</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><code>Links zu verwandten Eigenschaften</code></li>
+</ul>
diff --git a/files/de/web/css/pseudo-classes/index.html b/files/de/web/css/pseudo-classes/index.html
new file mode 100644
index 0000000000..ecbf7e24dc
--- /dev/null
+++ b/files/de/web/css/pseudo-classes/index.html
@@ -0,0 +1,122 @@
+---
+title: Pseudo-Klassen
+slug: Web/CSS/Pseudo-classes
+translation_of: Web/CSS/Pseudo-classes
+---
+<div>{{CSSRef}}</div>
+
+<p>Eine <strong><em><dfn>Pseudoklasse</dfn></em></strong> in CSS ist ein Schlüsselbegriff, welcher hinter einen Selektor gestellt wird, um einen besonderen Zustand abzufragen. So steht beispielsweise {{ Cssxref(":hover") }} für Elemente, die gerade mit dem Mauszeiger berührt werden.</p>
+
+<p>Mit Pseudoklassen und Pseudoelementen lässt sich eine Seite nicht nur in Bezug auf die Struktur des Inhalts gestalten, sondern auch im Bezug auf andere Faktoren wie zum Beispiel den Browserverlauf  ({{ cssxref(":visited") }}), eingegebene Formulardaten ({{ cssxref(":checked") }}) oder die Position des Mauszeigers ({{ cssxref(":hover") }}).</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">selector:pseudo-class {
+  property: value;
+}
+</pre>
+
+<h2 id="Übersicht_der_standardisierten_Pseudoklassen">Übersicht der standardisierten Pseudoklassen</h2>
+
+<div class="index">
+<ul>
+ <li>{{ Cssxref(":active") }}</li>
+ <li>{{ Cssxref(":checked") }}</li>
+ <li>{{ Cssxref(":default") }}</li>
+ <li>{{ Cssxref(":dir", ":dir()")}}</li>
+ <li>{{ Cssxref(":disabled") }}</li>
+ <li>{{ Cssxref(":empty") }}</li>
+ <li>{{ Cssxref(":enabled") }}</li>
+ <li>{{ Cssxref(":first") }}</li>
+ <li>{{ Cssxref(":first-child") }}</li>
+ <li>{{ Cssxref(":first-of-type") }}</li>
+ <li>{{ Cssxref(":fullscreen") }}</li>
+ <li>{{ Cssxref(":focus") }}</li>
+ <li>{{ Cssxref(":hover") }}</li>
+ <li>{{ Cssxref(":indeterminate") }}</li>
+ <li>{{ Cssxref(":in-range") }}</li>
+ <li>{{ Cssxref(":invalid") }}</li>
+ <li>{{ Cssxref(":lang", ":lang()") }}</li>
+ <li>{{ Cssxref(":last-child") }}</li>
+ <li>{{ Cssxref(":last-of-type") }}</li>
+ <li>{{ Cssxref(":left") }}</li>
+ <li>{{ Cssxref(":link") }}</li>
+ <li>{{ Cssxref(":not", ":not()") }}</li>
+ <li>{{ Cssxref(":nth-child", ":nth-child()") }}</li>
+ <li>{{ Cssxref(":nth-last-child", ":nth-last-child()") }}</li>
+ <li>{{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}</li>
+ <li>{{ Cssxref(":nth-of-type", ":nth-of-type()") }}</li>
+ <li>{{ Cssxref(":only-child") }}</li>
+ <li>{{ Cssxref(":only-of-type") }}</li>
+ <li>{{ Cssxref(":optional") }}</li>
+ <li>{{ Cssxref(":out-of-range") }}</li>
+ <li>{{ Cssxref(":read-only") }}</li>
+ <li>{{ Cssxref(":read-write") }}</li>
+ <li>{{ Cssxref(":required") }}</li>
+ <li>{{ Cssxref(":right") }}</li>
+ <li>{{ Cssxref(":root") }}</li>
+ <li>{{ Cssxref(":scope") }}</li>
+ <li>{{ Cssxref(":target") }}</li>
+ <li>{{ Cssxref(":valid") }}</li>
+ <li>{{ Cssxref(":visited") }}</li>
+</ul>
+</div>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('Fullscreen') }}</td>
+   <td>{{ Spec2('Fullscreen') }}</td>
+   <td><code>:fullscreen</code> hinzugefügt</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML WHATWG') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>Keine Änderungen seit {{ SpecName('HTML5 W3C') }}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td><code>:any-link</code>, <code>:local-link</code>, <code>:scope</code>, <code>:active-drop-target</code>, <code>:valid-drop-target</code>, <code>:invalid-drop-target</code>, <code>:current</code>, <code>:past</code>, <code>:future</code>, <code>:placeholder-shown</code>, <code>:user-error</code>, <code>:blank</code>, <code>:nth-match()</code>, <code>:nth-last-match()</code>, <code>:nth-column()</code>, <code>:nth-last-column()</code>und <code>:matches()</code> hinzugefügt.<br>
+    Keine Änderungen der bisherigen Pseudoklassen aus {{SpecName('CSS3 Selectors')}} und {{SpecName('HTML5 W3C')}}.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C') }}</td>
+   <td>{{ Spec2('HTML5 W3C') }}</td>
+   <td><code>:link</code>, <code>:visited</code>, <code>:active</code>, <code>:enabled</code>, <code>:disabled</code>, <code>:checked</code> und <code>:indeterminate</code> geändert<br>
+    <code>:default</code>, <code>:valid</code>, <code>:invalid</code>, <code>:in-range</code>, <code>:out-of-range</code>, <code>:required</code>, <code>:optional</code>, <code>:read-only</code>, <code>:read-write</code> und <code>:dir()</code> hinzugefügt</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Basic UI') }}</td>
+   <td>{{ Spec2('CSS3 Basic UI') }}</td>
+   <td><code>:default</code>, <code>:valid</code>, <code>:invalid</code>, <code>:in-range</code>, <code>:out-of-range</code>, <code>:required</code>, <code>:optional</code>, <code>:read-only</code> und <code>:read-write</code> hinzugefügt</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td><code>:target</code>, <code>:root</code>, <code>:nth-child()</code>, <code>:nth-last-of-child()</code>, <code>:nth-of-type()</code>, <code>:nth-last-of-type()</code>, <code>:last-child</code>, <code>:first-of-type</code>, <code>:last-of-type</code>, <code>:only-child</code>, <code>:only-of-type</code>, <code>:empty</code> und <code>:not() </code><br>
+    Defined the syntax of <code>:enabled</code>, <code>:disabled</code>, <code>:checked</code> und <code>:indeterminate</code>, hinzugefügt.<br>
+    Keine Änderungen der bisherigen Pseudoklassen aus {{SpecName('CSS2.1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td><code>:lang()</code>, <code>:first-child</code>, <code>:hover</code> und <code>:focus</code> hinzugefügt.<br>
+    Keine Änderungen der bisherigen Pseudoklassen aus {{SpecName('CSS1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td><code>:link</code>, <code>:visited</code> und <code>:active</code> hinzugefügt</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/de/web/css/pseudo-elements/index.html b/files/de/web/css/pseudo-elements/index.html
new file mode 100644
index 0000000000..399548ad95
--- /dev/null
+++ b/files/de/web/css/pseudo-elements/index.html
@@ -0,0 +1,78 @@
+---
+title: Pseudoelemente
+slug: Web/CSS/Pseudo-elements
+translation_of: Web/CSS/Pseudo-elements
+---
+<div>{{ CSSRef() }}</div>
+
+<h2 id="Summary">Summary</h2>
+
+<p>Wie auch {{ Cssxref("pseudo-classes") }} können  Pseudoelemente einem Selektor hinzugefügt werden, aber statt einzelen Zustände ermöglichen Sie das gestalten eines einzelnen Teils von einem Element. Das Pseudoelement {{ Cssxref("::first-line") }} richtet sich bspw. nur an die erste Zeile eines Elements.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">selector::pseudo-element {
+  property: value;
+}</pre>
+
+<h2 id="Pseudoelemente">Pseudoelemente</h2>
+
+<ul>
+ <li>{{ Cssxref("::after") }}</li>
+ <li>{{ Cssxref("::before") }}</li>
+ <li>{{ Cssxref("::first-letter") }}</li>
+ <li>{{ Cssxref("::first-line") }}</li>
+ <li>{{ Cssxref("::selection") }}</li>
+</ul>
+
+<h2 id="Hinweis">Hinweis</h2>
+
+<p>Pseudoelemente sind sowohl mit zwei Doppelpunkten (::), als auch mit nur einem (:) anzutreffen. In der CSS3 Spezifikation wurde darin der Unterschied zwischen Pseudoelement und Pseudoklasse festgelegt. Die meisten Browser unterstützten aber beide Varianten.</p>
+
+<div class="note"><strong>Hinweis:</strong> <code>::selection</code> muss zwingend mit zwei Doppelpunkten (::) geschrieben werden.</div>
+
+<p class="note">Es ist immer nur ein Pseudoelement pro Selektor möglich.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Browser</th>
+   <th>Lowest Version</th>
+   <th>Support of</th>
+  </tr>
+  <tr>
+   <td rowspan="2">Internet Explorer</td>
+   <td>8.0</td>
+   <td><code>:pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td>9.0</td>
+   <td><code>:pseudo-element ::pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2">Firefox (Gecko)</td>
+   <td>1.0 (1.0)</td>
+   <td><code>:pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td>1.0 (1.5)</td>
+   <td><code>:pseudo-element ::pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2">Opera</td>
+   <td>4.0</td>
+   <td><code>:pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td>7.0</td>
+   <td><code>:pseudo-element ::pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td>Safari (WebKit)</td>
+   <td>1.0 (85)</td>
+   <td><code>:pseudo-element ::pseudo-element</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/de/web/css/quotes/index.html b/files/de/web/css/quotes/index.html
new file mode 100644
index 0000000000..884ed4cf44
--- /dev/null
+++ b/files/de/web/css/quotes/index.html
@@ -0,0 +1,86 @@
+---
+title: quotes
+slug: Web/CSS/quotes
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/quotes
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>quotes</code> <a href="/de/docs/Web/CSS" title="CSS">CSS</a> Eigenschaft gibt an, wie User Agents Anführungszeichen darstellen sollen.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Schlüsselwortwert */
+quotes: none;
+
+/* &lt;string&gt; Werte */
+quotes: "«" "»"         /* Setzt <em>open-quote</em> und <em>close-quote</em> auf französische Anführungszeichen */
+quotes: "«" "»" "‹" "›" /* Setzt zwei Ebenen von Anführungszeichen */
+
+/* Globale Werte */
+quotes: inherit;
+quotes: initial;
+quotes: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Die <code>open-quote</code> und <code>close-quote</code> Werte der {{cssxref("content")}} Eigenschaft erzeugen keine Anführungszeichen.</dd>
+ <dt><code>[&lt;string&gt; &lt;string&gt;]+</code></dt>
+ <dd>Ein oder mehrere Paare von {{cssxref("&lt;string&gt;")}} Werten für <code>open-quote</code> und <code>close-quote</code>. Das erste Paar stellt die äußere Ebene des Zitats dar, das zweite Paar das erste Unterebene, das nächste die dritte Ebene usw.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush:css">q { quotes: '"' '"' "'" "'" }
+q:before { content: open-quote }
+q:after  { content: close-quote }
+</pre>
+
+<h2 id="Hinweise">Hinweise</h2>
+
+<p>Seit Firefox 3.5 kann der ursprüngliche Wert der <code>quotes</code> Eigenschaft über <code>-moz-<a class="internal" href="/de/docs/CSS/initial" title="en-US/docs/CSS/initial">initial</a></code> gelesen werden. Dies war in früheren Versionen von Firefox nicht möglich.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html#quotes', 'quotes')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.quotes")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref("content")}}</li>
+</ul>
diff --git a/files/de/web/css/ratio/index.html b/files/de/web/css/ratio/index.html
new file mode 100644
index 0000000000..e4052bb133
--- /dev/null
+++ b/files/de/web/css/ratio/index.html
@@ -0,0 +1,79 @@
+---
+title: <ratio>
+slug: Web/CSS/ratio
+tags:
+  - CSS
+  - CSS Datentypen
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/ratio
+---
+<div>{{CSSRef}}</div>
+
+<p>Der <code>&lt;ratio&gt;</code> <a href="/de/docs/Web/CSS">CSS</a> Datentyp, der zur Beschreibung von Seitenverhältnissen in <a class="internal" href="/de/docs/Web/Guide/CSS/Media_queries">Media Queries</a> verwendet wird, bezeichnet das Verhältnis zwischen zwei einheitenlosen Werten. Es ist ein strikt positiver {{cssxref("&lt;integer&gt;")}} Wert gefolgt von einem Slash ('/', Unicode <code>U+002F SOLIDUS</code>) und einem zweiten strikt positivem {{cssxref("&lt;integer&gt;")}}. Vor und nach dem Schrägstrich können Leerzeichen stehen.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"> </th>
+   <th scope="col">Verhältnis</th>
+   <th scope="col">Verwendung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><img alt="Ratio4_3.png" class="default internal" src="/@api/deki/files/5714/=Ratio4_3.png"></td>
+   <td><code>4/3</code></td>
+   <td>Traditionelles TV-Format im 20sten Jahrhundert.</td>
+  </tr>
+  <tr>
+   <td><img alt="Ratio16_9.png" src="/@api/deki/files/5711/=Ratio16_9.png"></td>
+   <td><code>16/9</code></td>
+   <td>Modernes Breitbild-TV-Format.</td>
+  </tr>
+  <tr>
+   <td><img alt="Ratio1_1.85.png" src="/@api/deki/files/5712/=Ratio1_1.85.png"></td>
+   <td><code>185/100</code> = <code>91/50</code><br>
+    <em>(Nicht-Ganzzahl-Dividenden und -Divisoren sind nicht erlaubt.)</em></td>
+   <td>Die häufigsten Filmformate seit den 1960ern.</td>
+  </tr>
+  <tr>
+   <td><img alt="Ratio1_2.39.png" src="/@api/deki/files/5713/=Ratio1_2.39.png"></td>
+   <td><code>239/100</code><br>
+    <em>(Nicht-Ganzzahl-Dividenden und -Divisoren sind nicht erlaubt.)</em></td>
+   <td>Das anamorphe Breitbild-Filmformat.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#values', '&lt;ratio&gt;')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.types.ratio")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a class="internal" href="/de/docs/Web/Guide/CSS/Media_queries">CSS Media Queries</a></li>
+</ul>
diff --git a/files/de/web/css/resize/index.html b/files/de/web/css/resize/index.html
new file mode 100644
index 0000000000..82162a06bf
--- /dev/null
+++ b/files/de/web/css/resize/index.html
@@ -0,0 +1,196 @@
+---
+title: resize
+slug: Web/CSS/resize
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - Referenz
+translation_of: Web/CSS/resize
+---
+<div>{{CSSRef}}</div>
+
+<div></div>
+
+<div>
+<p>Die <a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS">CSS</a> Eigenschaft <strong><code>resize</code></strong> CSS legt fest, ob ein Element größenveränderbar ist, und wenn ja, in welche Richtungen.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/resize.html")}}</div>
+
+<p class="hidden">Die Quelle für dieses interaktive Beispiel ist in einem GitHub-Repository gespeichert. Wenn Sie zum Projekt der interaktiven Beispiele beitragen möchten, klonen Sie bitte <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und senden Sie uns eine Pull-Anfrage.</p>
+
+<p><code>resize</code> gilt nicht für die folgenden Elemente:</p>
+
+<ul>
+ <li>Inline Elemente</li>
+ <li>Blockelemente, für die die Eigenschaft {{cssxref("overflow")}} auf <code>visible</code> gesetzt ist</li>
+</ul>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css notranslate">/* Schlüsselwortwerte */
+resize: none;
+resize: both;
+resize: horizontal;
+resize: vertical;
+resize: block;
+resize: inline;
+
+/* Globale Werte */
+resize: inherit;
+resize: initial;
+resize: unset;
+</pre>
+
+<p>Die Eigenschaft <code>resize</code> wird als ein einzelner Schlüsselwortwert aus der folgenden Liste angegeben.</p>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Das Element bietet keine vom Benutzer steuerbare Möglichkeit zur Größenänderung des Elements.</dd>
+ <dt><code>both</code></dt>
+ <dd>Das Element zeigt eine Möglichkeit an, die es dem Benutzer erlaubt, sowohl die horizontale als auch die vertikale Größe des Elements zu ändern.</dd>
+ <dt><code>horizontal</code></dt>
+ <dd>Das Element zeigt eine Möglichkeit an, die es dem Benutzer erlaubt, die horizontale Größe des Elements zu ändern.</dd>
+ <dt><code>vertical</code></dt>
+ <dd>Das Element zeigt eine Möglichkeit an, die es dem Benutzer erlaubt, die vertikale Größe des Elements zu ändern.</dd>
+ <dt><code>block</code> {{experimental_inline}}</dt>
+ <dd>Abhängig von den Werten für {{cssxref("writing-mode")}} und {{cssxref("direction")}}, zeigt das Element eine Möglichkeit an, die es dem Benutzer erlaubt, die horizontale oder vertikale Größe des Elements in Blockrichtung zu ändern.</dd>
+ <dt><code>inline</code> {{experimental_inline}}</dt>
+ <dd>Abhängig von den Werten für {{cssxref("writing-mode")}} und {{cssxref("direction")}}, zeigt das Element eine Möglichkeit an, die es dem Benutzer erlaubt, die horizontale oder vertikale Größe des Elements in Inlinerichtung zu ändern.</dd>
+</dl>
+
+<div class="note"><strong>Hinweis:</strong> <code>resize</code> wird nicht auf Blöcke angewendet, für die die {{cssxref("overflow")}} Eigenschaft auf <code>visible</code> gesetzt ist.</div>
+
+<h2 id="Formale_Definition">Formale Definition</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formale_Syntax">Formale Syntax</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Deaktivierung_der_Größenänderungsmöglichkeit_von_textareas">Deaktivierung der Größenänderungsmöglichkeit von textareas</h3>
+
+<p>In vielen Browsern sind {{HTMLElement("textarea")}} Elemente standardmäßig in der Größe veränderbar. Sie können dieses Verhalten mit der <code>resize</code> Eigenschaft überschreiben.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;textarea&gt;Type some text here.&lt;/textarea&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">textarea {
+  resize: none; /* Disables resizability */
+}  </pre>
+
+<div id="Disabling_resizability_of_textareas">
+<pre class="brush: html notranslate" style="display: none;">&lt;textarea&gt;Type some text here.&lt;/textarea&gt;</pre>
+
+<pre class="brush: css notranslate" style="display: none;">textarea {
+  resize: none; /* Disables resizability */
+}  </pre>
+</div>
+
+<h4 id="Ergebnis">Ergebnis</h4>
+
+<p>{{EmbedLiveSample("Disabling_resizability_of_textareas","200","100")}}</p>
+
+<h3 id="Verwendung_von_resize_bei_beliebigen_Elementen">Verwendung von resize bei beliebigen Elementen</h3>
+
+<p>Sie können die Eigenschaft <code>resize</code> verwenden, um die Größe eines beliebigen Elements zu ändern. Im folgenden Beispiel enthält ein größenveränderbares {{HTMLElement("div")}} einen größenveränderbaren Absatz ({{HTMLElement("p")}} Element).</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="resizable"&gt;
+  &lt;p class="resizable"&gt;
+    This paragraph is resizable in all directions, because
+    the CSS `resize` property is set to `both` on this element.
+  &lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">.resizable {
+  resize: both;
+  overflow: scroll;
+  border: 1px solid black;
+}
+
+div {
+  height: 300px;
+  width: 300px;
+}
+
+p {
+  height: 200px;
+  width: 200px;
+}  </pre>
+
+
+<div id="Using_resize_with_arbitrary_elements">
+<pre class="brush: html notranslate">&lt;div class="resizable"&gt;
+  &lt;p class="resizable"&gt;
+    This paragraph is resizable in all directions, because
+    the CSS `resize` property is set to `both` on this element.
+  &lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">.resizable {
+  resize: both;
+  overflow: scroll;
+  border: 1px solid black;
+}
+
+div {
+  height: 300px;
+  width: 300px;
+}
+
+p {
+  height: 200px;
+  width: 200px;
+}  </pre>
+
+</div>
+
+<h4 id="Ergebnis_2">Ergebnis</h4>
+
+<p>{{EmbedLiveSample("Using_resize_with_arbitrary_elements","450","450")}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Logical Properties', '#resize', 'resize')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td>Fügt die Werte <code>block</code> und <code>inline</code> hinzu.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#resize', 'resize')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{Compat("css.properties.resize")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{HTMLElement("textarea")}}</li>
+</ul>
diff --git a/files/de/web/css/resolution/index.html b/files/de/web/css/resolution/index.html
new file mode 100644
index 0000000000..d1f3c3512e
--- /dev/null
+++ b/files/de/web/css/resolution/index.html
@@ -0,0 +1,145 @@
+---
+title: <resolution>
+slug: Web/CSS/resolution
+translation_of: Web/CSS/resolution
+---
+<div>{{CSSRef}}</div>
+
+<h2 id=".C3.9Cbersicht" name=".C3.9Cbersicht">Übersicht</h2>
+
+<p>Der <code>&lt;resolution&gt;</code> <a href="/de/docs/Web/CSS">CSS</a> Datentyp, der in <a href="/de/docs/Web/Guide/CSS/Media_Queries">Media Queries</a> verwendet wird, kennzeichnet die Pixeldichte eines Ausgabemediums, seine Auflösung. Er ist eine {{cssxref("&lt;number&gt;")}}, der direkt eine Auflösungseinheit (<code>dpi</code>, <code>dpcm</code>, ...) folgt. Wie bei allen CSS Einheiten gibt es kein Leerzeichen zwischen der Einheit und der Zahl.</p>
+
+<p>Auf Bildschirmen ist die Länge relativ zu CSS Zoll, Zentimetern oder Pixeln, nicht zu physikalischen Werten.</p>
+
+<p>Auch wenn alle Einheiten die gleiche Auflösung für den Wert <code>0</code> darstellen, darf die Einheit in diesem Fall nicht weggelassen werden, da sie keine {{cssxref("&lt;length&gt;")}} ist: <code>0</code> ist ungültig und repräsentiert weder <code>0dpi</code>, <code>0dpcm</code>, noch <code>0dppx</code>.</p>
+
+<h2 id="Einheiten" name="Einheiten">Einheiten</h2>
+
+<dl>
+ <dt><code><a name="dpi">dpi</a></code></dt>
+ <dd>Diese Einheit repräsentiert die Anzahl an Punkten pro Zoll. Ein Bildschirm hat typischerweise 72 oder 96dpi; ein gedrucktes Dokument erreicht normalerweise weit höhrere dpi Zahlen. Da 1 Zoll 2.54cm entspricht, <code>1dpi ≈ 0.39dpcm</code>.</dd>
+ <dt><code><a name="dpcm">dpcm</a></code></dt>
+ <dd>Diese Einheit repräsentiert die Anzahl an Punkten pro Zentimeter. Da 1 Zoll 2.54cm entspricht, <code>1dpcm ≈ 2.54dpi</code>.</dd>
+ <dt><code><a name="dppx">dppx</a></code></dt>
+ <dd>Diese Einheit repräsentiert die Anzahl an Punkten pro <code>px</code> Einheit. Wegen dem festen 1:96 Verhältnis von CSS <code class="css">in</code> zu CSS <code class="css">px</code>, ist <code class="css">1dppx</code> äquivalent zu <code class="css">96dpi</code>, dies enspricht der Standardauflösung von Bildern, die in CSS dargestellt werden, wie in {{cssxref("image-resolution")}} definiert.</dd>
+</dl>
+
+<h2 id="Beispiele" name="Beispiele">Beispiele</h2>
+
+<p>Hier sind einige korrekte Verwendungen von <code>&lt;resolution&gt;</code> Werten:</p>
+
+<pre>96dpi                                              Korrekte Verwendung: ein {{cssxref("&lt;number&gt;")}} Wert (hier ein {{cssxref("&lt;integer&gt;")}}) gefolgt von einer Einheit.
+@media print and (min-resolution: 300dpi) { ... }  Korrekte Verwendung im Kontext einer <a href="/de/docs/Web/Guide/CSS/Media_Queries">Media Query</a>.
+</pre>
+
+<p>Hier sind einige inkorrekte Verwendungen:</p>
+
+<pre>72 dpi                                             Falsch: Keine Leerzeichen erlaubt zwischen {{cssxref("&lt;number&gt;")}} und der Einheit.
+ten dpi                                            Falsch: Nur Ziffern dürfen verwendet werden.
+0                                                  Falsch: Die Einheit kann nur für 0 Werte weggelassen werden, die einen {{cssxref("&lt;length&gt;")}} Wert darstellen.
+</pre>
+
+<h2 id="Spezifization" name="Spezifization">Spezifization</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#resolution', '&lt;resolution&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Faktorisierung des Typs in einer allgemeineren Spezifikation. Keine Änderung.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#resolution-units', '&lt;resolution&gt;')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td><code>dppx</code> Einheit hinzugefügt</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#resolution', '&lt;resolution&gt;')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilit.C3.A4t" name="Browser_Kompatibilit.C3.A4t">Browser Kompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>29</td>
+   <td>3.5 (1.9.1) [**]</td>
+   <td>9</td>
+   <td>9.5</td>
+   <td>{{CompatNo}} [*]</td>
+  </tr>
+  <tr>
+   <td><code>dppx</code></td>
+   <td>29</td>
+   <td>{{CompatGeckoDesktop("16.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>12.10</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}} [*]</td>
+   <td>yes</td>
+   <td>?</td>
+   <td>yes</td>
+   <td>{{CompatNo}} [*]</td>
+  </tr>
+  <tr>
+   <td><code>dppx</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("16.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>12.10</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[*] Die Webkit Engine unterstützt die CSS Auflösungsabfrage, wie sie in der Spezifikation definiert wird, nicht. Die Benutzung der nicht standardisierten <code>device-pixel-ratio</code> Abfrage wird für Safari Browser benötigt, siehe <a href="https://bugs.webkit.org/show_bug.cgi?id=16832">Bug 16832</a>.</p>
+
+<p>[**] Vor Firefox 8 (Gecko 8.0) hat die Eigenschaft fälschlicherweise nur CSS {{cssxref("&lt;integer&gt;")}} Größenangaben erlaubt, gefolgt von der Einheit. Ab dieser Version werden alle gültigen CSS Größenangaben unterstützt ({{cssxref("&lt;number&gt;")}} direkt gefolgt von der Einheit).</p>
+
+<h2 id="Siehe_auch" name="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/Guide/CSS/Media_Queries">CSS Media Queries</a></li>
+</ul>
diff --git a/files/de/web/css/right/index.html b/files/de/web/css/right/index.html
new file mode 100644
index 0000000000..0eee367917
--- /dev/null
+++ b/files/de/web/css/right/index.html
@@ -0,0 +1,97 @@
+---
+title: right
+slug: Web/CSS/Right
+tags:
+  - CSS
+  - CSS Positionierung
+  - Layout
+  - NeedsLiveSample
+  - Referenz
+  - Web
+translation_of: Web/CSS/right
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>right</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft gibt einen Teil der Position eines positionierten Elements an.</p>
+
+<p>Bei absolut positionierten Elementen (<code>{{Cssxref("position")}}: absolute</code> oder <code>position: fixed</code>) gibt sie den Abstand zwischen der rechten, äußeren Kante des Elements und der rechten Kante des umschließenden Blocks an.</p>
+
+<p>Bei relativ positionierten Elementen (<code>position: relative</code>) wird das Element aus seiner normalen Position im Elementfluss verschoben. Dabei gilt: Wenn die {{Cssxref("left")}} Eigenschaft definiert wurde, überschreibt diese den Wert der {{Cssxref("right")}} Eigenschaft. Wenn <code>left</code> den Wert <code>auto</code> besitzt, ist der berechnete Wert für <code>right</code> gleich dem Wert von <code>left</code> mit umgedrehtem Vorzeichen.<br>
+ Wenn beide Eigenschaften einen anderen Wert als <code>auto</code> besitzen, wird <code>right</code> ignoriert und auf <code>auto</code> gesetzt.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt>&lt;Länge&gt;</dt>
+ <dd>Eine <a href="/de/CSS/Einheiten#L.c3.a4ngen">Längenangabe</a>, die positive und negative Werte sowie Null erlaubt.</dd>
+ <dt>&lt;Prozentzahl&gt;</dt>
+ <dd>Eine <a href="/de/CSS/Einheiten#Prozent">prozentuale Angabe</a>, die sich auf den umschließenden Block bezieht. Die Prozentangabe kann nur berücksichtigt werden, wenn die Breite des umschließenden Blocks festgelegt wurde, andernfalls wird die definierte Prozentzahl wie <code>auto</code> behandelt.</dd>
+ <dt>auto</dt>
+ <dd>Standardwert. Die horizontale Position des Elementes wird nicht weiter beeinflusst, es sei denn durch <a href="/De/CSS/Left" title="De/CSS/Left"><code>left</code></a>, <a href="/de/CSS/margin" title="de/CSS/margin"><code>margin</code></a>, <a href="/de/CSS/padding" title="de/CSS/padding"><code>padding</code></a> oder durch die <a href="/de/CSS/width" title="de/CSS/width">Breite</a>.</dd>
+ <dt>inherit</dt>
+ <dd>Der Wert des Elternelements wird geerbt.</dd>
+</dl>
+
+<h3 id="Formelle_Syntax">Formelle Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: css; highlight:[16]">#left {
+  width: 100px;
+  height: 100px;
+  background-color: #FFC7E4;
+  position: relative;
+  top: 20px;
+  left: 20px;
+}
+
+#right {
+  width: 100px;
+  height: 100px;
+  background-color: #FFD7C2;
+  position: absolute;
+  bottom: 10px;
+  right: 20px;
+}</pre>
+
+<pre class="brush: html">&lt;div id="left"&gt;links&lt;/div&gt;
+&lt;div id="right"&gt;rechts&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Beispiele', 500, 220) }}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'right')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Definiert <code>right</code> als animierbar.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#propdef-right', 'right')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.right")}}
diff --git a/files/de/web/css/row-gap/index.html b/files/de/web/css/row-gap/index.html
new file mode 100644
index 0000000000..c6754e69ad
--- /dev/null
+++ b/files/de/web/css/row-gap/index.html
@@ -0,0 +1,163 @@
+---
+title: row-gap (grid-row-gap)
+slug: Web/CSS/row-gap
+tags:
+  - CSS
+  - CSS Flexible Boxes
+  - CSS Grid
+  - CSS-Eigenschaften
+  - Referenz
+  - row-gab
+translation_of: Web/CSS/row-gap
+---
+<div>{{CSSRef}}</div>
+
+<p>Die <a href="/en-US/docs/Web/CSS">CSS</a>-Eigenschaft <strong><code>row-gap</code></strong> legt die Größe der Zwischenräume ({{glossary("gutters","gutter")}}) zwischen den Grid-Reihen eines Elements fest.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/row-gap.html")}}</div>
+
+<p class="hidden">Die Quelle für dieses interaktive Beispiel ist in einem GitHub-Repository gespeichert. Wenn Sie zum Projekt Interaktive Beispiele beitragen möchten, klonen Sie bitte <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und senden Sie uns einen Pull-Request.</p>
+
+<div class="note">
+<p>CSS Grid Layout definierte zunächst die Eigenschaft {{CSSxRef('grid-row-gap')}}}. Diese vorangestellte Eigenschaft wird durch <code>row-gap</code> ersetzt. Um jedoch Browser zu unterstützen, die <code>grid-row-gap</code> und nicht <code>row-gap</code> für grid implementiert haben, müssen Sie die Eigenschaft mit Präfix verwenden, wie im obigen interaktiven Beispiel.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* &lt;length&gt; Längen-Werte */
+row-gap: 20px;
+row-gap: 1em;
+row-gap: 3vmin;
+row-gap: 0.5cm;
+
+/* &lt;percentage&gt; Prozent-Werte*/
+row-gap: 10%;
+
+/* Globale Werte */
+row-gap: inherit;
+row-gap: initial;
+row-gap: unset;
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Ist die Breite des Abstands (<code>gutter</code>) zwischen den Reihen. {{CSSxRef("&lt;percentage&gt;")}} Werte sind relativ zur Dimension des Elements.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Flex_layout">Flex layout</h3>
+
+<p>{{SeeCompatTable}}</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html; notranslate">&lt;div id="flexbox"&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; highlight[5] notranslate">#flexbox {
+  display: flex;
+  flex-wrap: wrap;
+  width: 300px;
+  row-gap: 20px;
+}
+
+#flexbox &gt; div {
+  border: 1px solid green;
+  background-color: lime;
+  flex: 1 1 auto;
+  width: 100px;
+  height: 50px;
+}
+</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample('Flex_layout', "auto", "120px")}}</p>
+
+<h3 id="Grid_layout">Grid layout</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html; notranslate">&lt;div id="grid"&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css; highlight[6] notranslate">#grid {
+  display: grid;
+  height: 200px;
+  grid-template-columns: 200px;
+  grid-template-rows: repeat(3, 1fr);
+  row-gap: 20px;
+}
+
+#grid &gt; div {
+  border: 1px solid green;
+  background-color: lime;
+}
+</pre>
+
+
+
+<h4 id="Result_2">Result</h4>
+
+<p>{{EmbedLiveSample('Grid_layout', 'auto', 120)}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Bemerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Box Alignment", "#propdef-row-gap", "row-gap")}}</td>
+   <td>{{Spec2("CSS3 Box Alignment")}}</td>
+   <td>Erstdefinition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und senden Sie uns einen Pull-Request.</div>
+
+<h3 id="Support_in_Flex_layout">Support in Flex layout</h3>
+
+<p>{{Compat("css.properties.row-gap.flex_context")}}</p>
+
+<h3 id="Support_in_Grid_layout">Support in Grid layout</h3>
+
+<p>{{Compat("css.properties.row-gap.grid_context")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Verwandte CSS-Eigenschaften: {{CSSxRef("column-gap")}}, {{CSSxRef("gap")}}</li>
+ <li>Grid Layout Anleitung: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Gutters">Basic concepts of grid layout - Gutters</a></em></li>
+</ul>
diff --git a/files/de/web/css/ruby-align/index.html b/files/de/web/css/ruby-align/index.html
new file mode 100644
index 0000000000..f38d8257bb
--- /dev/null
+++ b/files/de/web/css/ruby-align/index.html
@@ -0,0 +1,153 @@
+---
+title: ruby-align
+slug: Web/CSS/ruby-align
+tags:
+  - CSS
+  - CSS Referenz
+  - CSS Ruby
+  - Eigenschaft
+  - Referenz
+translation_of: Web/CSS/ruby-align
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code><strong>ruby-align</strong></code> CSS Eigenschaft definiert die Verteilung der verschiedenen {{Glossary("Ruby")}}elemente über die Basis.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Schlüsselwortwerte */
+ruby-align: start;
+ruby-align: center;
+ruby-align: space-between;
+ruby-align: space-around;
+
+/* Globale Werte */
+ruby-align: inherit;
+ruby-align: initial;
+ruby-align: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>start</code></dt>
+ <dd>Ist ein Schlüsselwort, dass angibt, dass die Anmerkung am dem Start des Basistexts ausgerichtet wird.</dd>
+ <dt><code>center</code></dt>
+ <dd>Ist ein Schlüsselwort, dass angibt, dass die Anmerkung mittig am Basistext ausgerichtet wird.</dd>
+ <dt><code>space-between</code></dt>
+ <dd>Ist ein Schlüsselwort, das angibt, dass der zusätzliche Abstand zwischen die Elemente der Anmerkung verteilt wird.</dd>
+ <dt><code>space-around</code></dt>
+ <dd>Ist ein Schlüsselwort, das angibt, dass der zusätzliche Abstand zwischen und um die Elemente der Anmerkung verteilt wird.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Dieses HTML wird mit jedem Wert von <code>ruby-align</code> unterschiedlich dargestellt:</p>
+
+<pre class="brush: html">&lt;ruby&gt;
+  &lt;rb&gt;Dies ist ein langer Text als Beispiel&lt;/rb&gt;
+  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;kurzes Ruby&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
+&lt;/ruby&gt;
+</pre>
+
+<h3 id="Ruby_am_Start_des_Basistexts_ausgerichtet">Ruby am Start des Basistexts ausgerichtet</h3>
+
+<pre class="brush: html" style="display: none;">&lt;ruby&gt;
+  &lt;rb&gt;Dies ist ein langer Text als Beispiel&lt;/rb&gt;
+  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;kurzes Ruby&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
+&lt;/ruby&gt;
+</pre>
+
+<pre class="brush: css">ruby {
+    ruby-align:start;
+}</pre>
+
+<p>Dies ergibt folgende Ausgabe:</p>
+
+<p>{{EmbedLiveSample("Ruby_am_Start_des_Basistexts_ausgerichtet", 240, 40)}}</p>
+
+<h3 id="Ruby_mittig_am_Basistext_ausgerichtet">Ruby mittig am Basistext ausgerichtet</h3>
+
+<pre class="brush: html" style="display: none;">&lt;ruby&gt;
+  &lt;rb&gt;Dies ist ein langer Text als Beispiel&lt;/rb&gt;
+  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;kurzes Ruby&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
+&lt;/ruby&gt;
+</pre>
+
+<pre class="brush: css">ruby {
+    ruby-align:center;
+}</pre>
+
+<p>Dies ergibt folgende Ausgabe:</p>
+
+<p>{{EmbedLiveSample("Ruby_mittig_am_Basistext_ausgerichtet", 240, 40)}}</p>
+
+<h3 id="Zusätzlicher_Abstand_verteilt_zwischen_Rubyelementen">Zusätzlicher Abstand verteilt zwischen Rubyelementen</h3>
+
+<pre class="brush: html" style="display: none;">&lt;ruby&gt;
+  &lt;rb&gt;Dies ist ein langer Text als Beispiel&lt;/rb&gt;
+  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;kurzes Ruby&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
+&lt;/ruby&gt;
+</pre>
+
+<pre class="brush: css">ruby {
+    ruby-align:space-between;
+}</pre>
+
+<p>Dies ergibt folgende Ausgabe:</p>
+
+<p>{{EmbedLiveSample("Zusätzlicher_Abstand_verteilt_zwischen_Rubyelementen", 240, 40)}}</p>
+
+<h3 id="Zusätzlicher_Abstand_verteilt_zwischen_und_um_Rubyelemente">Zusätzlicher Abstand verteilt zwischen und um Rubyelemente</h3>
+
+<pre class="brush: html" style="display: none;">&lt;ruby&gt;
+  &lt;rb&gt;Dies ist ein langer Text als Beispiel&lt;/rb&gt;
+  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;kurzes Ruby&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
+&lt;/ruby&gt;
+</pre>
+
+<pre class="brush: css">ruby {
+    ruby-align:space-around;
+}</pre>
+
+<p>Dies ergibt folgende Ausgabe:</p>
+
+<p>{{EmbedLiveSample("Zusätzlicher_Abstand_verteilt_zwischen_und_um_Rubyelemente", 240, 40)}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Ruby', '#ruby-align-property', 'ruby-align')}}</td>
+   <td>{{Spec2('CSS3 Ruby')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.ruby-align")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>HTML Ruby Elemente: {{HTMLElement("ruby")}}, {{HTMLElement("rt")}}, {{HTMLElement("rp")}} und {{HTMLElement("rtc")}}.</li>
+ <li>CSS Ruby Eigenschaften: {{cssxref("ruby-position")}}, {{cssxref("ruby-merge")}}.</li>
+</ul>
diff --git a/files/de/web/css/scroll-behavior/index.html b/files/de/web/css/scroll-behavior/index.html
new file mode 100644
index 0000000000..9505393d2a
--- /dev/null
+++ b/files/de/web/css/scroll-behavior/index.html
@@ -0,0 +1,143 @@
+---
+title: scroll-behavior
+slug: Web/CSS/scroll-behavior
+translation_of: Web/CSS/scroll-behavior
+---
+<div>{{ CSSRef }}<br>
+Die <strong><code>scroll-behavior</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a>-Eigenschaft spezifiziert das Scroll-Verhalten einer Scroll-Box, wenn ein Scroll-Event durch eine Navigation oder durch CSSOM APIs ausgelöst wird.</div>
+
+<div>{{cssinfo}}</div>
+
+<div></div>
+
+<div>
+<div>
+<div>{{EmbedInteractiveExample("pages/css/scroll-behavior.html")}}</div>
+
+<p class="hidden">Der Quellcode für dieses interaktive Beispiel liegt in einem GitHub-Repository. Falls du zu dem interactive examples Projekt beitragen möchtest, klone bitte <a class="tgwf_grey" href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und schick uns einen Pull Request.</p>
+</div>
+</div>
+
+<div>Beachte, dass andere Scroll-Verhalten, wie etwa solche durch den Nutzer ausgelöste, nicht durch diese Eigenschaft beeinflusst werden. Wenn diese Eigenschaft für das Wurzel-Element spezifiziert wird, beeinflusst es stattdessen den Viewport. Wird diese Eigenschaft für das <code>body</code>-Element spezifiziert, wird es <em>nicht</em> an den Viewport weitergegeben.</div>
+
+<div></div>
+
+<div>User Agents dürfen diese Eigenschaft ignorieren.</div>
+
+<hr>
+<div>
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+</div>
+
+<pre class="brush:css no-line-numbers">/* Keyword values */
+scroll-behavior: auto;
+scroll-behavior: smooth;
+
+/* Global values */
+scroll-behavior: inherit;
+scroll-behavior: initial;
+scroll-behavior: unset;
+</pre>
+
+<p>Sämltiche anderen Arten des Scrollens, beispielsweise durch den User, sind von dieser Eigenschaft nicht betroffen.<br>
+ Wenn diese Eigenschaft auf ein Root-Element angewendet, betrifft sie stattdessen den gesamten Viewport.<br>
+ Wird die Eigenschaft dem <code>body</code> zugeordnet, wrikt sie sich hingegen <em>nicht</em> auf den Viewport aus.<br>
+ <br>
+ Ein User Agent kann diese Eigenschaft auch ignorieren.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<p>Die Eigenschaft <code>scroll-behavior</code> kann dabei folgende Werte annehmen:</p>
+
+<h3 class="brush:css" id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Die scrolling Box scrollt sofort.</dd>
+ <dt><code>smooth</code></dt>
+ <dd>Die scrolling Box scrollt mit einem flüssigen/smoothen Verhalten.<br>
+ Der User Agent definiert dabei sowohl die Geschwindigkeit als auch die dafür benötigte Dauer. Der User Agent sollte dabei nach Möglichkeit den Platform-Konventionen folgen.</dd>
+</dl>
+
+<h3 id="Formelle_Syntax">Formelle Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">Beispiel</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;nav&gt;
+  &lt;a href="#page-1"&gt;1&lt;/a&gt;
+  &lt;a href="#page-2"&gt;2&lt;/a&gt;
+  &lt;a href="#page-3"&gt;3&lt;/a&gt;
+&lt;/nav&gt;
+&lt;scroll-container&gt;
+  &lt;scroll-page id="page-1"&gt;1&lt;/scroll-page&gt;
+  &lt;scroll-page id="page-2"&gt;2&lt;/scroll-page&gt;
+  &lt;scroll-page id="page-3"&gt;3&lt;/scroll-page&gt;
+&lt;/scroll-container&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">a {
+  display: inline-block;
+  width: 50px;
+  text-decoration: none;
+}
+nav, scroll-container {
+  display: block;
+  margin: 0 auto;
+  text-align: center;
+}
+nav {
+  width: 339px;
+  padding: 5px;
+  border: 1px solid black;
+}
+scroll-container {
+  display: block;
+  width: 350px;
+  height: 200px;
+  overflow-y: scroll;
+  scroll-behavior: smooth;
+}
+scroll-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-size: 5em;
+}
+</pre>
+
+<h3 id="Ergebnis">Ergebnis</h3>
+
+<p>{{ EmbedLiveSample("Example", "100%", 250) }}</p>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View', "#propdef-scroll-behavior", 'scroll-behavior')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Initial specification</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("css.properties.scroll-behavior")}}</p>
diff --git a/files/de/web/css/shape/index.html b/files/de/web/css/shape/index.html
new file mode 100644
index 0000000000..b186d495aa
--- /dev/null
+++ b/files/de/web/css/shape/index.html
@@ -0,0 +1,93 @@
+---
+title: <shape>
+slug: Web/CSS/shape
+tags:
+  - CSS
+  - CSS Datentyp
+  - Layout
+  - Reference
+  - Référence(2)
+  - Web
+translation_of: Web/CSS/shape
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id=".C3.9Cbersicht" name=".C3.9Cbersicht">Übersicht</h2>
+
+<p>Der <code>&lt;shape&gt;</code> <a href="/de/docs/Web/CSS" title="CSS">CSS</a> Datentyp beschreibt die genaue Form eines Bereichs. Dieser Bereich wird benutzt, um zu definieren, auf welchen Teil eines Elements Eigenschaften wie {{ Cssxref("clip") }} angewendet werden.</p>
+
+<p>In der aktuellen Spezifikation kann ein <code>&lt;shape&gt;</code>, obwohl er entworfen wurde, um beliebige Formen zu beschreiben, ausschließlich einen rechteckigen Bereich repräsentieren, der durch die Funktion <code>rect()</code> definiert wird.</p>
+
+<h2 id="Die_rect_Funktion" name="Die_rect_Funktion">Die <code>rect()</code> Funktion</h2>
+
+<p>Die <code>rect()</code> Funktion erstellt einen Bereich in Form eines Rechtecks.</p>
+
+<h3 id="Syntax">Syntax</h3>
+
+<pre class="eval">rect(<em>top</em>, <em>right</em>, <em>bottom</em>, <em>left</em>)
+</pre>
+
+<h4 id="Werte">Werte</h4>
+
+<p><img alt="rect.png" class="internal rwrap" src="/@api/deki/files/5730/=rect.png" style="float: right;"></p>
+
+<dl>
+ <dt><em>top</em></dt>
+ <dd>Ist eine {{cssxref("&lt;length&gt;")}}, die den Versatz der Oberkante des Rechtecks relativ zur Oberkante der Element Box beschreibt.</dd>
+</dl>
+
+<dl>
+ <dt><em>right</em></dt>
+ <dd>Ist eine {{cssxref("&lt;length&gt;")}}, die den Versatz der rechten Kante des Rechtecks relativ zur linken Kante der Element Box beschreibt.</dd>
+</dl>
+
+<dl>
+ <dt><em>bottom</em></dt>
+ <dd>Ist eine {{cssxref("&lt;length&gt;")}}, die den Versatz der Unterkante des Rechtecks relativ zur Oberkante der Element Box beschreibt.</dd>
+</dl>
+
+<dl>
+ <dt><em>left</em></dt>
+ <dd>Ist eine {{cssxref("&lt;length&gt;")}}, die den Versatz der linken Kante des Rechtecks relativ zur linken Kante der Element Box beschreibt.</dd>
+</dl>
+
+<h3 id="Interpolation">Interpolation</h3>
+
+<p>Werte des <code>&lt;shape&gt;</code> Datentyps, welche Rechtecke darstellen, können interpoliert werden, um Animationen zu erlauben. In diesem Fall werden sie über ihre <code>top</code>, <code>right</code>, <code>bottom</code> und <code>left</code> Komponenten interpoliert, wovon jede als reale Fließkommazahl behandelt wird. Die Geschwindigkeit der Interpolation wird bestimmt durch die <a href="/de/docs/Web/CSS/Timing_Funktion" title="timing-function">Timing Funktion</a> associated with the animation.</p>
+
+<h3 id="Beispiel" name="Beispiel">Beispiel</h3>
+
+<pre class="eval"> img.clip04 {
+   clip: rect(10px, 20px, 20px, 10px);
+ }
+</pre>
+
+<h2 id="Spezifikation" name="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'visufx.html#value-def-shape', '&lt;shape&gt;') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Definiert durch die {{ cssxref("clip") }} Eigenschaft</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilit.C3.A4t" name="Browser_Kompatibilit.C3.A4t">Browser Kompatibilität</h2>
+
+{{Compat("css.types.shape")}}
+
+<h2 id="Siehe_auch" name="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Verwandte CSS Eigenschaften: {{ Cssxref("clip") }}</li>
+ <li>Die <a href="/de/docs/Web/CSS/-moz-image-rect" title="en/CSS/-moz-image-rect">-moz-image-rect()</a> Funktion mit ähnlichen Koordinaten wie <code>rect()</code>.</li>
+</ul>
diff --git a/files/de/web/css/spezifität/index.html b/files/de/web/css/spezifität/index.html
new file mode 100644
index 0000000000..e8a0e22302
--- /dev/null
+++ b/files/de/web/css/spezifität/index.html
@@ -0,0 +1,197 @@
+---
+title: Spezifität
+slug: Web/CSS/Spezifität
+tags:
+  - Beispiel
+  - CSS
+  - Guide
+  - Web
+translation_of: Web/CSS/Specificity
+---
+<div>{{cssref}}</div>
+
+<h2 id="Das_Konzept">Das Konzept</h2>
+
+<p>Spezifität ist das Mittel, mit dem ein Browser bestimmt, welche Eigenschaftswerte die relevantesten für ein Element sind und zugewiesen werden. Spezifität basiert ausschließlich auf den Matchingregeln, welche durch die verschiedenen <a href="/de/docs/Web/CSS/CSS_Referenz#Selektoren">Selektoren</a> gebildet werden.</p>
+
+<h2 id="Berechnung">Berechnung</h2>
+
+<p>Die Spezifität wird durch die Verkettung der Anzahl jedes Selektortyps berechnet. Sie entspricht <strong>keiner</strong> Gewichtung, die dem passenden Ausdruck zugewiesen wird.</p>
+
+<p>Im Falle einer Spezifitätsgleichheit wird die letzte im CSS gefundene Deklaration auf das Element angewandt.</p>
+
+<p>{{ Note("Die Nähe von Elementen in einem Dokumentenbaum zueinander hat keine Auswirkung auf die Spezifität.") }}</p>
+
+<h3 id="Reihenfolge_der_Spezifität">Reihenfolge der Spezifität</h3>
+
+<p>Die folgende Selektorenliste ist nach aufsteigender Spezifität sortiert:</p>
+
+<ul>
+ <li>Universelle Selektoren</li>
+ <li>Typselektoren</li>
+ <li>Klassenselektoren</li>
+ <li>Attributselektoren</li>
+ <li>Pseudoklassen</li>
+ <li>ID-Selektoren</li>
+ <li>Inlinestile</li>
+</ul>
+
+<h3 id="Die_!important_Ausnahme">Die <code>!important</code> Ausnahme</h3>
+
+<p>Wenn eine <code>!important</code> Regel auf eine Stildeklaration angewendet wird, überschreibt diese Deklaration alle anderen Deklarationen des CSS, unabhängig davon, wo sie in der Deklarationsliste steht. Jedoch hat <code>!important</code> nichts mit Spezifität zu tun. Es wird davon <strong>abgeraten</strong>, <code>!important </code>zu verwenden, da es das Debuggen erschwert, weil die normale <em>Kaskadierung</em> der Stylesheets dadurch unterbrochen wird.</p>
+
+<p><strong>Einige allgemeine Regeln:</strong></p>
+
+<ul>
+ <li><strong>Niemals</strong> <code>!important</code> in CSS verwenden, das auf der gesamten Seite Verwendung findet.</li>
+ <li><code>!important</code> <strong>nur</strong> in Seiten spezifischem CSS verwenden, das seitenweites oder fremdes CSS (wie beispielsweise von ExtJS oder YUI) überschreibt.</li>
+ <li><strong>Niemals</strong> !important verwenden, wenn ein Plugin/Mashup geschrieben wird.</li>
+ <li><strong>Immer</strong> nach einem Weg suchen, Spezifität zu verwenden, bevor <code>!important</code> in Erwägung gezogen wird.</li>
+</ul>
+
+<p><strong>Anstatt <code>!important</code> zu verwenden kann folgendes getan werden:</strong></p>
+
+<ol>
+ <li>Besseren Gebrauch der CSS Kaskadierungseigenschaften machen.</li>
+ <li>
+  <p>Spezifischere Regeln verwenden. Eines oder mehrere Elemente vor dem Element anzugeben, das selektiert werden soll, ist spezifischer und erhält eine höhere Priorität:</p>
+
+  <pre class="lang-html prettyprint prettyprinted"><code><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"test"</span><span class="tag">&gt;</span><span class="pln">
+  </span><span class="tag">&lt;span&gt;</span><span class="pln">Text</span><span class="tag">&lt;/span&gt;</span><span class="pln">
+</span><span class="tag">&lt;/div&gt;</span></code></pre>
+
+  <pre class="lang-css prettyprint prettyprinted"><code><span class="pln">div</span><span class="pun">#</span><span class="pln">test span </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">color</span><span class="pun">:</span><span class="pln"> green; </span><span class="pun">}</span><span class="pln">
+span </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">color</span><span class="pun">:</span><span class="pln"> red; </span><span class="pun">}</span><span class="pln">
+div span </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">color</span><span class="pun">:</span><span class="pln"> blue; </span><span class="pun">}</span></code></pre>
+ </li>
+</ol>
+
+<p>Unabhängig von der Reihenfolge, in der der Text steht, wird der Text grün dargestellt, da die Regel spezifischer ist. (Des weiteren überschreibt die Regel für blau die Regel für rot unabhängig von deren Reihenfolge.)</p>
+
+<p><strong>!Important sollte in folgenden Fällen verwendet werden:</strong></p>
+
+<p>A) Erstes Szenario</p>
+
+<ol>
+ <li>Eine globale CSS Datei wird verwendet, die die visuellen Aspekte der Seite global setzt.</li>
+ <li>Es werden Inline Styles in Elementen verwendet, wovon grundsätzlich abgeraten wird.</li>
+</ol>
+
+<p>In diesem Fall sollten bestimmte Stile in der globalen CSS Datei als !important deklariert werden, was Inline Styles überschreibt.</p>
+
+<p>B) Weiteres Szenario</p>
+
+<pre class="default prettyprint prettyprinted"><code><span class="com">#someElement p {</span><span class="pln">
+  color</span><span class="pun">:</span><span class="pln"> blue</span><span class="pun">;</span><span class="pln">
+</span><span class="pun">}</span><span class="pln">
+
+p</span><span class="pun">.</span><span class="pln">awesome </span><span class="pun">{</span><span class="pln">
+  color</span><span class="pun">:</span><span class="pln"> red</span><span class="pun">;</span><span class="pln">
+</span><span class="pun">}</span></code></pre>
+
+<p>Ohne <code>!important</code> hat die erste Regel eine höhere Spezifität und hat damit Vorrang vor der zweiten Regel. Somit werden alle <code>awesome</code> Absätze blau dargestellt.</p>
+
+<p><strong>Wie <code>!important</code> überschrieben werden kann</strong></p>
+
+<p>Eine Eigenschaft, die mit !important gekennzeichnet ist, kann durch eine weitere !important Eigenschaft überschrieben werden. Hierbei muss jedoch die zweite Eigenschaft entweder eine höhere Spezifität besitzen (indem im Selektor ein zusätzlicher Tag, eine ID oder Klasse angegeben wird) oder eine CSS Regel mit dem gleichen Selektor muss weiter unten als die existierende platziert werden.</p>
+
+<p>Einige Beispiele mit höherer Spezifität:</p>
+
+<pre class="default prettyprint prettyprinted"><code><span class="pln">table td    </span><span class="pun">{</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">50px</span><span class="pln"> </span><span class="pun">!</span><span class="pln">important</span><span class="pun">;}</span><span class="pln">
+</span><span class="pun">.</span><span class="pln">myTable td </span><span class="pun">{</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">50px</span><span class="pln"> </span><span class="pun">!</span><span class="pln">important</span><span class="pun">;}</span><span class="pln">
+</span><span class="com">#myTable td {height: 50px !important;}</span></code></pre>
+
+<p>Beispiel für gleichen Selektor nach dem existierenden:</p>
+
+<pre class="default prettyprint prettyprinted"><code><span class="pln">td </span><span class="pun">{</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">50px</span><span class="pln"> </span><span class="pun">!</span><span class="pln">important</span><span class="pun">;}</span></code></pre>
+
+<h3 id="Die_not_Ausnahme">Die <code>:not</code> Ausnahme</h3>
+
+<p>Die Negations-Pseudoklasse <code>:not</code> wird nicht als Pseudoklasse in der Spezifitätsberechnung berücksichtigt. Jedoch werden Selektoren innerhalb der Negations-Pseudoklasse als normale Selektoren behandelt.</p>
+
+<div id="Beispiel_not">
+<p>Beispiel CSS:</p>
+
+<pre class="brush: css">div.outer p {
+  color:orange;
+}
+div:not(.outer) p {
+  color: lime;
+}
+</pre>
+
+<p>Angewendet auf folgendes HTML:</p>
+
+<pre class="brush: html">&lt;div class="outer"&gt;
+  &lt;p&gt;Dies ist im äußeren div.&lt;/p&gt;
+  &lt;div class="inner"&gt;
+    &lt;p&gt;Dieser Text ist innerhalb des inneren divs.&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>Ergibt:</p>
+
+<p>{{ EmbedLiveSample('Beispiel_not','600','100') }}</p>
+
+<h3 id="Formbasierte_Spezifität">Formbasierte Spezifität</h3>
+
+<p>Spezifität basiert auf der Form eines Selektors. Im folgenden Fall zählt der Selektor als ein Attribut im Algorithmus zur Bestimmung der Spezifität, obwohl er eine ID selektiert.</p>
+
+<p>CSS:</p>
+
+<div id="Beispiel_formbasierte_Spezifitaet">
+<pre class="brush: css">* #foo {
+  color: green;
+}
+*[id="foo"] {
+  color: purple;
+}
+</pre>
+
+<p>Angewendet auf folgendes HTML:</p>
+
+<pre class="brush: html">&lt;p id="foo"&gt;I am a sample text.&lt;/p&gt;
+</pre>
+</div>
+
+<p>Ergibt:</p>
+
+<p>{{ EmbedLiveSample('Beispiel_formbasierte_Spezifitaet','600','100') }}</p>
+
+<p>Da das gleiche Element selektiert wird, der ID-Selektor jedoch eine höhere Spezifität aufweist.</p>
+
+<h3 id="Nichtbeachtung_der_Position_innerhalb_des_Baumes">Nichtbeachtung der Position innerhalb des Baumes</h3>
+
+<div id="Beispiel_Nichtbeachtung_Baumposition">
+<p>CSS:</p>
+
+<pre class="brush: css">body h1 {
+  color: green;
+}
+html h1 {
+  color: purple;
+}
+</pre>
+
+<p>Angewendet auf folgendes HTML:</p>
+
+<pre class="brush: html">&lt;html&gt;
+  &lt;body&gt;
+    &lt;h1&gt;Here is a title!&lt;/h1&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<p>Ergibt:</p>
+
+<p>{{ EmbedLiveSample('Beispiel_Nichtbeachtung_Baumposition','600','100') }}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>CSS3 Selektoren Spezifität - <a class="external" href="http://www.w3.org/TR/selectors/#specificity" rel="freelink">http://www.w3.org/TR/selectors/#specificity</a></li>
+ <li>{{ CSS_key_concepts() }}</li>
+</ul>
diff --git a/files/de/web/css/string/index.html b/files/de/web/css/string/index.html
new file mode 100644
index 0000000000..9918c42d77
--- /dev/null
+++ b/files/de/web/css/string/index.html
@@ -0,0 +1,70 @@
+---
+title: <string>
+slug: Web/CSS/string
+tags:
+  - CSS
+  - CSS Datentypen
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/string
+---
+<div>{{CSSRef}}</div>
+
+<p>Der <code>&lt;string&gt;</code> <a href="/de/docs/Web/CSS">CSS</a> Datentyp repräsentiert eine Zeichenfolge. Er setzt sich aus <a class="external" href="http://de.wikipedia.org/wiki/Unicode">Unicode</a> Zeichen umschlossen von doppelten (") oder einfachen (') Anführungszeichen zusammen. Ein in doppelte Anführungszeichen eingeschlossener String darf keine doppelten Anführungszeichen enthalten, außer sie sind durch einen Backslash (\) escapt. Das gleiche Prinzip gilt für in einfache Anführungszeichen eingeschlossene Strings. Sie dürfen keine einfachen Anführungszeichen enthalten, außer sie sind durch einen Backslash (\) escapt. Das Backslash Zeichen muss escapt sein, um Teil des Strings zu sein.</p>
+
+<p>Zeilenumbrüche werden nicht akzeptiert, sofern sie nicht durch ein Zeilenvorschubzeichen wie \A oder \00000a escapt sind. Jedoch können Strings sich über mehrere Zeilen erstrecken. In diesem Fall muss das Zeilenumbruchszeichen durch einen Backslash (\) als letztes Zeichen der Zeile escapt werden.</p>
+
+<p>Zeichen können durch ihren <a class="external" href="https://de.wikipedia.org/wiki/Unicode#Codepunkte_und_Zeichen">Unicode Codepunkt</a> in Hexadezimalschreibweise beschrieben werden, wenn sie durch einen Backslash (\) escapt werden. \27 stellt dabei das einfache Anführungszeichen (') dar.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: css">/* Einfaches Escapen von Anführungszeichen */
+"String mit doppelten Anführungszeichen"
+"String mit \" escapten doppelten Anführungszeichen"
+'String mit einfachen Anführungszeichen'
+"String mit \' escapten einfachen Anführungszeichen"
+
+/* Zeilenumbruch in einem String */
+"String mit \AZeilenumbruch"
+
+/* String, der sich über zwei Zeilen erstreckt (diese zwei Strings sind exakt gleich) */
+"Ein äußerst langer \
+String"
+"Ein äußerst langer String"
+</pre>
+
+<div class="note"><strong>Hinweis:</strong> Strings in doppelten Anführungszeichen können auch mit Hilfe von \22 escapt werden und Strings mit einfachen Anführungszeichen mit Hilfe von \27.</div>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#strings', '&lt;string&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Keine signifikante Änderung in Bezug auf CSS Level 2 (Revision 1)</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'syndata.html#strings', '&lt;string&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Explizit definiert; erlaubt 6-stellige escapte Unicodezeichen</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '', '&lt;string&gt;')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Implizit definiert; erlaubt 4-stellige escapte Unicodezeichen</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.types.string")}}
diff --git a/files/de/web/css/tab-size/index.html b/files/de/web/css/tab-size/index.html
new file mode 100644
index 0000000000..b324828746
--- /dev/null
+++ b/files/de/web/css/tab-size/index.html
@@ -0,0 +1,94 @@
+---
+title: tab-size
+slug: Web/CSS/tab-size
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - Experimentell
+  - Referenz
+translation_of: Web/CSS/tab-size
+---
+<p>{{ CSSRef() }}</p>
+
+<p>{{ SeeCompatTable() }}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>tab-size</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft wird verwendet, um die Breite eines Tabulatorzeichens (<code>U+0009</code>) anzupassen.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* &lt;integer&gt; Werte */
+tab-size: 4;
+tab-size: 0;
+
+/* &lt;length&gt; Werte */
+tab-size: 10px;
+tab-size: 2em;
+
+/* Globale Werte */
+tab-size: inherit;
+tab-size: initial;
+tab-size: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>Die Anzahl der Leerzeichen in einem Tabulator. Darf nicht negativ sein.</dd>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Die Breite eines Tabulators. Darf nicht negativ sein.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: css">pre {
+  tab-size: 4; /* Setzt die Tabgröße auf 4 Leerzeichen */
+}
+</pre>
+
+<pre class="brush: css">pre {
+  tab-size: 0; /* Entfernt die Einrückung */
+}
+</pre>
+
+<pre class="brush: css">pre {
+  tab-size: 99; /* Verwende keine Tabs! */
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#tab-size', 'tab-size')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{Compat("css.properties.tab-size")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a class="external" href="http://lists.w3.org/Archives/Public/www-style/2008Dec/0009.html"><cite>Controlling size of a tab character (U+0009)</cite></a>, ein E-Mail von Anne van Kesteren an das CSSWG.</li>
+</ul>
diff --git a/files/de/web/css/table-layout/index.html b/files/de/web/css/table-layout/index.html
new file mode 100644
index 0000000000..1a7136e994
--- /dev/null
+++ b/files/de/web/css/table-layout/index.html
@@ -0,0 +1,117 @@
+---
+title: table-layout
+slug: Web/CSS/table-layout
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Tabelle
+  - Referenz
+  - 'recipe:css-property'
+translation_of: Web/CSS/table-layout
+---
+<div>{{CSSRef}}</div>
+
+<p>Die CSS Eigenschaft <strong><code>table-layout</code></strong> legt den Algorithmus fest, der für das Layout von {{htmlelement("table")}} Zellen, Zeilen und Spalten verwendet wird.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/table-layout.html")}}</div>
+
+<p class="hidden">Die Quelle für dieses interaktive Beispiel ist in einem GitHub-Repository gespeichert. Wenn Sie zum Projekt der interaktiven Beispiele beitragen möchten, klonen Sie bitte <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und senden Sie uns eine Pull-Anfrage.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* Keyword values */
+table-layout: auto;
+table-layout: fixed;
+
+/* Global values */
+table-layout: inherit;
+table-layout: initial;
+table-layout: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt>{{Cssxref("auto")}}</dt>
+ <dd>Standardwert. Die meisten Browser haben einen automatischen Tabellenlayout-Algorithmus. Die Breiten der Tabelle und ihrer Zellen werden an den Inhalt angepasst.</dd>
+ <dt><code>fixed</code></dt>
+ <dd>Die Tabellen- und Spaltenbreiten werden durch die Breiten der Tabellen- und Spaltenelemente oder durch die Breite der ersten Zellenzeile festgelegt. Zellen in nachfolgenden Zeilen haben keinen Einfluss auf die Spaltenbreiten.</dd>
+ <dd>Bei der "festen" oder "fixierten" <code>fixed</code> Layoutmethode kann die gesamte Tabelle gerendert werden, sobald die erste Tabellenzeile heruntergeladen und analysiert wurde. Dies kann die Renderingzeit bei der "automatischen" <code>auto</code> Layoutmethode beschleunigen, aber der Inhalt nachfolgender Zellen passt möglicherweise nicht in die bereitgestellten Spaltenbreiten. Zellen verwenden die Eigenschaft {{Cssxref("overflow")}}, um zu bestimmen, ob überlaufende Inhalte abgeschnitten werden sollen. Dies erfolgt aber nur, wenn die Breite der Tabelle bekannt ist; andernfalls werden die Zellen nicht überlaufen.</dd>
+</dl>
+
+<h2 id="Formale_Definition">Formale Definition</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formale_Syntax">Formale Syntax</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Tabellen_fester_Breite_mit_Text-Überlauf">Tabellen fester Breite mit Text-Überlauf</h3>
+
+<p>In diesem Beispiel wird ein festes <code>fixed</code> Tabellenlayout in Kombination mit der Eigenschaft {{cssxref("width")}} verwendet, um die Breite der Tabelle einzuschränken. Die Eigenschaft {{cssxref("text-overflow")}} wird verwendet, um eine Ellipse auf Wörter anzuwenden, die zu lang sind, um in die Tabelle zu passen.<br>
+ Wenn das Tabellenlayout automatisch <code>auto</code> wäre, würde die Tabelle trotz der angegebenen Breite wachsen, um ihren Inhalt aufzunehmen.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<div id="Fixed-width_tables_with_text-overflow">
+<pre class="brush: html notranslate">&lt;table&gt;
+  &lt;tr&gt;&lt;td&gt;Ed&lt;/td&gt;&lt;td&gt;Wood&lt;/td&gt;&lt;/tr&gt;
+  &lt;tr&gt;&lt;td&gt;Albert&lt;/td&gt;&lt;td&gt;Schweitzer&lt;/td&gt;&lt;/tr&gt;
+  &lt;tr&gt;&lt;td&gt;Jane&lt;/td&gt;&lt;td&gt;Fonda&lt;/td&gt;&lt;/tr&gt;
+  &lt;tr&gt;&lt;td&gt;William&lt;/td&gt;&lt;td&gt;Shakespeare&lt;/td&gt;&lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">table {
+  table-layout: fixed;
+  width: 120px;
+  border: 1px solid red;
+}
+
+td {
+  border: 1px solid blue;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}</pre>
+
+</div>
+
+<h4 id="Ergebnis">Ergebnis</h4>
+
+<p>{{EmbedLiveSample('Fixed-width_tables_with_text-overflow')}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'tables.html#width-layout', 'table-layout')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ursprüngliche Definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und senden Sie uns eine Pull-Anfrage.</div>
+
+<p>{{Compat("css.properties.table-layout")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/table">&lt;table&gt;</a></code></li>
+</ul>
diff --git a/files/de/web/css/tatsächlicher_wert/index.html b/files/de/web/css/tatsächlicher_wert/index.html
new file mode 100644
index 0000000000..5e77670cac
--- /dev/null
+++ b/files/de/web/css/tatsächlicher_wert/index.html
@@ -0,0 +1,36 @@
+---
+title: tatsächlicher Wert
+slug: Web/CSS/tatsächlicher_Wert
+translation_of: Web/CSS/actual_value
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Der <strong>tatsächliche Wert</strong> einer CSS Eigenschaft ist der verwendete Wert nachdem alle Annäherungen angewendet wurden. Zum Beispiel kann ein User Agent nur in der Lage sein, Ränder mit einem ganzzahligen Pixelwert darzustellen und daher gezwungen sein, die berechnete Breite des Randes anzunähern.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'cascade.html#actual-value', 'actual value')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/CSS/Referenz">CSS Referenz</a></li>
+ <li>{{CSS_key_concepts}}</li>
+</ul>
diff --git a/files/de/web/css/text-align-last/index.html b/files/de/web/css/text-align-last/index.html
new file mode 100644
index 0000000000..41b0607160
--- /dev/null
+++ b/files/de/web/css/text-align-last/index.html
@@ -0,0 +1,106 @@
+---
+title: text-align-last
+slug: Web/CSS/text-align-last
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Text
+  - Experimentell
+  - Referenz
+translation_of: Web/CSS/text-align-last
+---
+<div>{{CSSRef}}</div>
+
+<p>Die CSS Eigenschaft<strong> <code>text-align-last</code></strong>  beschreibt, wie die letzte Zeile eines Blocks, oder die letzte Zeile unmittelbar vor einem erzwungenem Umbruch, ausgerichtet ist</p>
+
+<div>{{EmbedInteractiveExample("pages/css/text-align-last.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css no-line-numbers">/* Keyword values */
+text-align-last: auto;
+text-align-last: start;
+text-align-last: end;
+text-align-last: left;
+text-align-last: right;
+text-align-last: center;
+text-align-last: justify;
+
+/* Global values */
+text-align-last: inherit;
+text-align-last: initial;
+text-align-last: unset;
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Die Ausrichtung der Zeile ist gleich dem Wert von {{cssxref("text-align")}}, außer wenn {{cssxref("text-align")}} den Wert <code>justify</code> hat; in diesem Fall entspricht der Wert von <code>text-align-last</code> der Einstellung <code>start</code>.</dd>
+ <dt><code>start</code></dt>
+ <dd>Das Gleiche wie <code>left</code>, wenn die Leserichtung links-nach-rechts ist, und <code>right</code>, wenn die Leserichtung rechts-nach-links ist.</dd>
+ <dt><code>end</code></dt>
+ <dd>Das Gleiche wie <code>right</code>, wenn die Leserichtung links-nach-rechts ist, und <code>left</code>, wenn die Leserichtung rechts-nach-links ist.</dd>
+ <dt><code>left</code></dt>
+ <dd>Die Inhalte werden an der linken Kante des inline-Elements ausgerichtet.</dd>
+ <dt><code>right</code></dt>
+ <dd>Die Inhalte werden an der rechten Kante des inline-Elements ausgerichtet.</dd>
+ <dt><code>center</code></dt>
+ <dd>Die Inhalte werden innerhalb des inline-Elements zentriert.</dd>
+ <dt><code>justify</code></dt>
+ <dd>Der Text wird im Blocksatz angezeigt, d.h. der Text schließt sowohl links als auch rechts mit der Kante des inline-Elements ab.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<div class="hidden">
+<pre class="brush: html">&lt;p&gt;Integer elementum massa at nulla placerat varius. Suspendisse in libero risus, in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque. Nullam est eros, suscipit sed dictum quis, accumsan a ligula.&lt;/p&gt;
+</pre>
+</div>
+
+<pre class="brush: css">p {
+  font-size: 1.4em;
+  text-align: justify;
+  text-align-last: center;
+}</pre>
+
+<p>{{EmbedLiveSample('Example','560')}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#text-align-last-property', 'text-align-last')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("css.properties.text-align-last")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref("text-align")}}</li>
+</ul>
diff --git a/files/de/web/css/text-align/index.html b/files/de/web/css/text-align/index.html
new file mode 100644
index 0000000000..5af079ca81
--- /dev/null
+++ b/files/de/web/css/text-align/index.html
@@ -0,0 +1,238 @@
+---
+title: text-align
+slug: Web/CSS/text-align
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Text
+  - Referenz
+translation_of: Web/CSS/text-align
+---
+<div>{{CSSRef}}</div>
+
+<div>
+<p>Die <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft <strong><code>text-align</code></strong> egt die horizontale Ausrichtung eines Blockelements oder eines Tabellenzellenrahmens fest. Dies bedeutet, dass sie wie {{cssxref("vertical-align")}} funktioniert, jedoch in horizontaler Richtung.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/text-align.html")}}</div>
+
+<p class="hidden">Die Quelle für dieses interaktive Beispiel ist in einem GitHub-Repository gespeichert. Wenn Sie zum Projekt der interaktiven Beispiele beitragen möchten, klonen Sie bitte <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und senden Sie uns eine Pull-Anfrage.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* Keyword values */
+text-align: left;
+text-align: right;
+text-align: center;
+text-align: justify;
+text-align: justify-all;
+text-align: start;
+text-align: end;
+text-align: match-parent;
+
+/* Character-based alignment in a table column */
+text-align: ".";
+text-align: "." center;
+
+/* Block alignment values (Non-standard syntax) */
+text-align: -moz-center;
+text-align: -webkit-center;
+
+/* Global values */
+text-align: inherit;
+text-align: initial;
+text-align: unset;</pre>
+
+<p>Die Eigenschaft <code>text-align</code> wird auf eine der folgenden Arten angegeben:</p>
+
+<ul>
+ <li>Mit den Schlüsselwortwerten <code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/text-align$edit#start">start</a></code>, <code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/text-align$edit#end">end</a></code>, <code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/text-align$edit#left">left</a></code>, <code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/text-align$edit#right">right</a></code>, <code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/text-align$edit#center">center</a></code>, <code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/text-align$edit#justify">justify</a></code>, <code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/text-align$edit#justify-all">justify-all</a></code>, or <code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/text-align$edit#match-parent">match-parent</a></code>.</li>
+ <li>Nur mit einem <code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/text-align$edit#string">&lt;string&gt;</a></code> Wert, wobei in diesem Fall der andere Wert standardmäßig auf <code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/text-align$edit#right">right</a></code> gesetzt wird.</li>
+ <li> Die Verwendung sowohl eines Schlüsselwortwerts als auch eines <code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/text-align$edit#string">&lt;string&gt;</a></code> Wertes.</li>
+</ul>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>start</code> {{experimental_inline}}</dt>
+ <dd>Dasselbe wie <code>left</code>, falls {{cssxref("direction")}} <code>ltr</code> ist und <code>right</code>, falls <code>direction</code> <code>rtl</code> ist.</dd>
+ <dt><code>end</code> {{experimental_inline}}</dt>
+ <dd>Dasselbe wie <code>right</code>, falls {{cssxref("direction")}} <code>ltr</code> ist und <code>left</code>, falls <code>direction</code> <code>rtl</code> ist.</dd>
+ <dt><code>left</code></dt>
+ <dd>Die Inlineinhalte werden am linken Rand (linksbündig) der Zeilenbox ausgerichtet.</dd>
+ <dt><code>right</code></dt>
+ <dd>Die Inlineinhalte werden am rechten Rand (rechtsbündig) der Zeilenbox ausgerichtet.</dd>
+ <dt><code>center</code></dt>
+ <dd>Die Inlineinhalte werden innerhalb der Zeilenbox zentriert.</dd>
+ <dt><code>justify</code></dt>
+ <dd>Der Text wird im Blocksatz angeordnet. Text sollte seinen linken und rechten Rand bündig am linken und rechten Rand des Absatzinhalts ausrichten.</dd>
+ <dt><code>justify-all</code> {{experimental_inline}}</dt>
+ <dd>Dasselbe wie <code>justify</code>, erzwingt jedoch, dass die letzte Zeile ebenfalls im Blocksatz angeordnet wird.</dd>
+ <dt><code>match-parent</code> {{experimental_inline}}</dt>
+ <dd>Ähnlich zu <code>inherit</code> mit dem Unterschied, dass die Werte <code>start</code> und <code>end</code> in Bezug auf die {{cssxref("direction")}} des Elternelements berechnet werden und durch den passenden <code>left</code> oder <code>right</code> Wert ersetzt werden.</dd>
+ <dt id="string">{{cssxref("&lt;string&gt;")}} {{experimental_inline}}</dt>
+ <dd>Gibt bei Anwendung auf eine Tabellenzelle das Zeichen an, um das der Inhalt der Zelle ausgerichtet wird.</dd>
+</dl>
+
+<h2 id="Bedenken_zur_Zugänglichkeit">Bedenken zur Zugänglichkeit</h2>
+
+<p>Der inkonsistente Abstand zwischen den Wörtern, der durch einen gerechtfertigten Text entsteht, kann für Menschen mit kognitiven Problemen wie Legasthenie problematisch sein.</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html">Understanding Success Criterion 1.4.8 | Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Formale_Definition">Formale Definition</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formale_Syntax">Formale Syntax</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Linksbündig">Linksbündig</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<div id="Left_alignment">
+<pre class="brush: html notranslate">&lt;p class="example"&gt;
+  Integer elementum massa at nulla placerat varius.
+  Suspendisse in libero risus, in interdum massa.
+  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
+  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
+&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; highlight:[2] notranslate">.example {
+  text-align: left;
+  border: solid;
+}</pre>
+</div>
+
+<h4 id="Ergebnis">Ergebnis</h4>
+
+<p>{{EmbedLiveSample("Left_alignment","100%","100%")}}</p>
+
+<h3 id="Zentriert">Zentriert</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<div id="Centered_text">
+<pre class="brush: html notranslate">&lt;p class="example"&gt;
+  Integer elementum massa at nulla placerat varius.
+  Suspendisse in libero risus, in interdum massa.
+  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
+  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
+&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css; highlight:[2] notranslate">.example {
+  text-align: center;
+  border: solid;
+}</pre>
+</div>
+
+<h4 id="Ergebnis_2">Ergebnis</h4>
+
+<p>{{EmbedLiveSample("Centered_text","100%","100%")}}</p>
+
+<h3 id="Blocksatz">Blocksatz</h3>
+
+<h4 id="HTML_3">HTML</h4>
+
+<div id="Justify">
+<pre class="brush: html notranslate">&lt;p class="example"&gt;
+  Integer elementum massa at nulla placerat varius.
+  Suspendisse in libero risus, in interdum massa.
+  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
+  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
+&lt;/p&gt;</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css; highlight:[2] notranslate">.example {
+  text-align: justify;
+  border: solid;
+}</pre>
+
+</div>
+
+<h4 id="Ergebnis_3">Ergebnis</h4>
+
+<p>{{EmbedLiveSample("Justify","100%","100%")}}</p>
+
+<h3 id="Hinweis">Hinweis</h3>
+
+<p>Der Standard-kompatible Weg, einen Block selbst zu zentrieren, ohne seinen Inline-Inhalt zu zentrieren, ist z.B. das Setzen der linken und rechten {{cssxref("margin")}} auf <code>auto</code>, z.B..:</p>
+
+<pre class="brush: css notranslate">.something {
+  margin: auto;
+}
+</pre>
+
+<pre class="brush: css notranslate">.something {
+  margin: 0 auto;
+}
+</pre>
+
+<pre class="brush: css notranslate">.something {
+  margin-left: auto;
+  margin-right: auto;
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Logical Properties', '#text-align', 'text-align')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td>Keine Änderungen</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Text', '#alignment', 'text-align')}}</td>
+   <td>{{Spec2('CSS4 Text')}}</td>
+   <td>Fügt den Wert <code>&lt;string&gt;</code> hinzu.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#text-align-property', 'text-align')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Fügt die <code>start</code>, <code>end</code> und <code>match-parent</code> Werte hinzu. Ändert den unbenannten Initialwert zu <code>start</code> (der er war).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#alignment-prop', 'text-align')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Keine Änderungen</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#text-align', 'text-align')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und senden Sie uns eine Pull-Anfrage.</div>
+
+<p>{{Compat("css.properties.text-align")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref("margin", "margin:auto")}}, {{cssxref("margin-left", "margin-left:auto")}}, {{cssxref("vertical-align")}}</li>
+</ul>
diff --git a/files/de/web/css/text-decoration-color/index.html b/files/de/web/css/text-decoration-color/index.html
new file mode 100644
index 0000000000..32f9355d51
--- /dev/null
+++ b/files/de/web/css/text-decoration-color/index.html
@@ -0,0 +1,135 @@
+---
+title: text-decoration-color
+slug: Web/CSS/text-decoration-color
+translation_of: Web/CSS/text-decoration-color
+---
+<div>{{ CSSRef }}</div>
+
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+
+<p>Mit der CSS-Eigenschaft <code>text-decoration-color</code> kann die Farbe für Unterstreichungen, Überstreichungen oder Durchstreichungen gesetzt werden, spezifiziert durch {{cssxref("text-decoration-line")}}. Das ist die bevorzugte Art und Weise, Textdekorationen eine Farbe zuzuweisen.</p>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formale Syntax</a>: {{csssyntax("text-decoration-color")}}
+</pre>
+
+<pre>text-decoration-color: currentColor
+text-decoration-color: red
+text-decoration-color: #00ff00
+text-decoration-color: rgba(255, 128, 128, 0.5)
+text-decoration-color: transparent
+
+text-decoration-color: inherit
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>Die Eigenschaft <code>color</code> akzeptiert verschiedene Schlüsselwörter und numerische Daten. Siehe {{cssxref("&lt;color&gt;")}}-Werte für genauere Details.</dd>
+</dl>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: css; highlight:[3]">.beispiel {
+    text-decoration: underline;
+    text-decoration-color: red;
+}
+</pre>
+
+<p>Das obige Beispiel hat denselben Effekt wie der folgende Code, der auch noch einen Hover-Style hinzufügt.</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;style&gt;
+.beispiel {
+  font-size: 24px;
+  text-decoration: underline;
+  color: red;
+}
+.beispiel:hover {
+  color: blue;
+  text-decoration: line-through;
+}
+&lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;span class="beispiel"&gt;
+  &lt;span style="color:black"&gt;schwarzer Text mit roter Linie und blauem Hovereffekt&lt;/span&gt;
+&lt;/span&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Text-decoration', '#text-decoration-color', 'text-decoration-color') }}</td>
+   <td>{{ Spec2('CSS3 Text-decoration') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompabilität">Browserkompabilität</h2>
+
+<p>{{ CompatibilityTable }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funktion</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Elementare Unterstützung</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>{{ CompatGeckoDesktop("6.0") }}{{ property_prefix("-moz") }}</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>{{ CompatUnknown }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funktion</th>
+   <th>Android</th>
+   <th>Firefox mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Elementare Unterstützung</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>{{ CompatGeckoMobile("6.0") }}{{ property_prefix("-moz") }}</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>{{ CompatUnknown }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/de/web/css/text-decoration-line/index.html b/files/de/web/css/text-decoration-line/index.html
new file mode 100644
index 0000000000..ac3ab5bfb1
--- /dev/null
+++ b/files/de/web/css/text-decoration-line/index.html
@@ -0,0 +1,94 @@
+---
+title: text-decoration-line
+slug: Web/CSS/text-decoration-line
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/text-decoration-line
+---
+<div>{{ CSSRef() }}</div>
+
+<h2 id=".C3.9Cbersicht" name=".C3.9Cbersicht">Übersicht</h2>
+
+<p>Die <code>text-decoration-line</code> CSS Eigenschaft repräsentiert die Art der Liniendekoration eines Elements.</p>
+
+<p>Unter- und Überstreichungsdekorationen werden hinter dem Text dargestellt, während Durchstreichungen über dem Text dargestellt werden.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="twopartsyntaxbox"><a href="/de/docs/CSS/Wertdefinitionssyntax" title="CSS/Value_definition_syntax">Formale Syntax</a>: {{csssyntax("text-decoration-line")}}
+</pre>
+
+<pre>text-decoration-line: none /* This is the only keyword that cannot be mixed with other */
+
+text-decoration-line: underline
+text-decoration-line: overline
+text-decoration-line: line-through
+text-decoration-line: underline overline
+text-decoration-line: overline underline line-through
+
+text-decoration-line: inherit
+</pre>
+
+<h3 id="Werte" name="Werte">Werte</h3>
+
+<p>Akzeptiert entweder <code>none</code> als Wert oder einen oder mehrere durch Leerzeichen getrennte Werte:</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Erzeugt keine Textdekoration.</dd>
+ <dt><code>underline</code></dt>
+ <dd>Jede Zeile des Texts wird unterstrichen.</dd>
+ <dt><code>overline</code></dt>
+ <dd>Über jeder Zeile des Texts wird eine Linie dargestellt.</dd>
+ <dt><code>line-through</code></dt>
+ <dd>Jede Zeile des Texts wird durchgestrichen.</dd>
+ <dt><code>blink {{deprecated_inline}}</code></dt>
+ <dd>Der Text blinkt (wechselt zwischen sichtbar und unsichtbar). Dem Standard folgende User Agents können das Blinken ignorieren. Dieser Wert ist  <strong>missbilligt</strong> und es sollten stattdessen <a href="/de/docs/Web/Guide/CSS/CSS_Animationen_nutzen">Animationen</a> verwendet werden.</dd>
+ <dt><code>-moz-anchor-decoration</code></dt>
+ <dd><a href="/de/docs/Web/CSS/CSS_Referenz/Mozilla_CSS_Erweiterungen" title="CSS_Reference/Mozilla_Extensions">Mozilla CSS Erweiterung</a>, nicht geeignet für Webinhalte.</dd>
+</dl>
+
+<h2 id="Beispiel" name="Beispiel">Beispiel</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Hier steht Text mit einer roten Unterkringelung!&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  -moz-text-decoration-line: underline;
+  -moz-text-decoration-style: wavy;
+  -moz-text-decoration-color: red;
+}</pre>
+
+<p>{{ EmbedLiveSample('Beispiel') }}</p>
+
+<h2 id="Spezifikation" name="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Text-decoration', '#text-decoration-line', 'text-decoration-line') }}</td>
+   <td>{{ Spec2('CSS3 Text-decoration') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.text-decoration-line")}}
diff --git a/files/de/web/css/text-decoration/index.html b/files/de/web/css/text-decoration/index.html
new file mode 100644
index 0000000000..af1de281c1
--- /dev/null
+++ b/files/de/web/css/text-decoration/index.html
@@ -0,0 +1,116 @@
+---
+title: text-decoration
+slug: Web/CSS/text-decoration
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Text
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+translation_of: Web/CSS/text-decoration
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <strong><code>text-decoration</code></strong> CSS Eigenschaft wird dazu verwendet, die Textformatierung auf <code>underline</code>, <code>overline</code>, <code>line-through</code> oder <code>blink</code> zu setzen. Unter- und Überstrichdekorationen werden unterhalb des Texts positioniert, Durchstreichungen über dem Text.</p>
+
+<p>Textdekorationen werden auf Unterelemente gezeichnet. Das bedeutet, dass es nicht möglich ist, die Textdekoration, die für ein übergeordnetes Element angegeben wurde, für ein Unterelement zu deaktivieren. Zum Beispiel würde in folgendem Markup <code>&lt;p&gt;Dieser Text hat &lt;em&gt;ein paar hervorgehobene Wörter&lt;/em&gt;.&lt;/p&gt;</code> die Stilregel <code>p { text-decoration: underline; }</code> den gesamten Absatz unterstreichen. Die Stilregel <code>em { text-decoration: none; }</code> würde nichts ändern; der gesamte Absatz wäre immer noch unterstrichen. Jedoch würde die Regel <code>em { text-decoration: overline; }</code> eine zweite Dekoration für "ein paar hervorgehobene Wörter" erscheinen lassen.</p>
+
+<div class="note style-wrap">
+<p><strong>Hinweis:</strong> CSS Text Decoration Level 3 hat diese Eigenschaft zu einer Kurzschreibweise für die drei neuen CSS Eigenschaften {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}} und {{cssxref("text-decoration-style")}} gemacht. Wie für andere Kurzschreibweiseeigenschaften bedeutet dies, dass sie deren Werte auf deren Standardwerte zurücksetzt, falls diese nicht explizit in der Kurzschreibweiseeigenschaft angegeben sind.</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css">/* Schlüsselwortwerte */
+text-decoration: none;                 /* Keine Textdekoration */
+text-decoration: underline red;        /* Rote Unterstreichung */
+text-decoration: underline wavy red;   /* Rote gewellte Unterstreichung */
+
+/* Globale Werte */
+text-decoration: inherit;
+text-decoration: initial;
+text-decoration: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<p>Die <code>text-decoration</code> Eigenschaft ist eine Kurzschreibweise und kann die Werte jeder der drei Langschreibweiseeigenschaften annehmen: {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}} und {{cssxref("text-decoration-style")}}</p>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: css">h1.under {
+    text-decoration: underline;
+}
+h1.over {
+    text-decoration: overline;
+}
+p.line {
+    text-decoration: line-through;
+}
+p.blink {
+    text-decoration: blink;
+}
+a.none {
+    text-decoration: none;
+}
+p.underover {
+    text-decoration: underline overline;
+}
+</pre>
+
+<pre class="brush: html" style="display: none;">&lt;h1 class="under"&gt;Unterstrichene Überschrift&lt;/h1&gt;
+&lt;p class="line"&gt;Falls Text durchgestrichen werden soll, verwende &lt;code&gt;line-through&lt;/code&gt;.&lt;/p&gt;
+&lt;p class="blink"&gt;Dieser Text könnte blinken.&lt;/p&gt;
+&lt;h1 class="over"&gt;Und jetzt eine überstrichene Überschrift.&lt;/h1&gt;
+&lt;p&gt;Dieser &lt;a class="none" href="textdecoration.html"&gt;Link wird nicht unterstrichen&lt;/a&gt;, wie das bei den meisten Links standardmäßig ist. Vorsicht beim Entfernen der Textdekoration bei Links, da die meisten Benutzer davon ausgehen, dass Hyperlinks unterstrichen sind.&lt;/p&gt;
+&lt;p class="underover"&gt;Dieser Text hat beides, eine Unter- und eine Überstreichung.&lt;/p&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Beispiele','100%','310')}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text Decoration', '#text-decoration-property', 'text-decoration')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td>Hat die Eigenschaft in eine Kurzschreibweiseeigenschaft ungewandelt. Unterstützung für den Wert von {{cssxref('text-decoration-style')}} wurde hinzugefügt.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#lining-striking-props', 'text-decoration')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Keine wesentlichen Änderungen</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#text-decoration', 'text-decoration')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{Compat("css.properties.text-decoration")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Das {{cssxref("list-style")}} Attribut steuert die Darstellung von Einträgen in HTML {{HTMLElement("ol")}} und {{HTMLElement("ul")}} Listen.</li>
+</ul>
diff --git a/files/de/web/css/text-indent/index.html b/files/de/web/css/text-indent/index.html
new file mode 100644
index 0000000000..7c5c74219c
--- /dev/null
+++ b/files/de/web/css/text-indent/index.html
@@ -0,0 +1,119 @@
+---
+title: text-indent
+slug: Web/CSS/text-indent
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Text
+  - Layout
+  - Referenz
+translation_of: Web/CSS/text-indent
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die CSS Eigenschaft <code>text-indent</code><font face="Consolas"> </font>legt den Einzug vor der ersten Zeile eines Textes fest. Dabei wird der Abstand zur linken Seite des enthaltenden Elements angegeben.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("text-indent")}}</pre>
+
+<pre>text-indent: 3mm       /* Beispielwerte */
+text-indent: 40px
+text-indent: 15%       /* Prozentuale Angaben sind relativ zur Breite des Blockelements */
+text-indent: each-line /* Festgelegte Werte */
+text-indent: hanging
+
+text-indent: inherit
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Der Einzug wird absolut angegeben. Negative Angaben sind erlaubt. Für mögliche Einheiten, siehe {{cssxref("&lt;length&gt;")}} .</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Abstand wird prozentual {{cssxref("&lt;percentage&gt;")}} zur Breite des enthaltenden Blockelements angegeben.</dd>
+ <dt><code>each-line</code> {{experimental_inline}}</dt>
+ <dd>Der Einzug beeinflusst die erste Zeile des Blockelements sowie jede Zeile nach einem erzwungenem Zeilenumbruch (<em>forced line break</em> ), lässt Zeilen nach einem <em>soft wrap break</em> allerdings unberührt.</dd>
+ <dt><code>hanging</code> {{experimental_inline}}</dt>
+ <dd>Kehrt den Texteinzug um. Jede Zeile, außer der ersten, wird eingerückt.</dd>
+</dl>
+
+<h2 id="Simple_indent" name="Simple_indent">Beispiel mit absoluter Angabe</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  text-indent: 5em;
+  background: powderblue;
+}</pre>
+
+<p>{{ EmbedLiveSample('Simple_indent','100%','100%') }}</p>
+
+<h2 id="Percentage_indent_example" name="Percentage_indent_example">Beispiel mit prozentualer Angabe</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt; </pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">p {
+  text-indent: 30%;
+  background: plum;
+}</pre>
+
+<p>{{ EmbedLiveSample('Percentage_indent_example','100%','100%') }}</p>
+
+<h2 id="Details">Details</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#text-indent', 'text-indent')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Schlüsselwerte <code>hanging</code> und <code>each-line</code> hinzugefügt</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'text-indent')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>text-indent</code> als Eigenschaft, die animiert werden kann</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#indentation-prop', 'text-indent')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Verhalten von <code>display: inline-block</code> und anderen <code>block </code>Containern explizit definiert</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#text-indent', 'text-indent')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{Compat("css.properties.text-indent")}}</p>
diff --git a/files/de/web/css/text-justify/index.html b/files/de/web/css/text-justify/index.html
new file mode 100644
index 0000000000..441321a862
--- /dev/null
+++ b/files/de/web/css/text-justify/index.html
@@ -0,0 +1,117 @@
+---
+title: text-justify
+slug: Web/CSS/text-justify
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Text
+  - Referenz
+translation_of: Web/CSS/text-justify
+---
+<div>{{CSSRef}}</div>
+
+<p>Die CSS Eigenschaft <strong><code>text-justify</code></strong> legt fest, wie der Blocksatz ausgeführt werden soll, wenn ein Element auf {{cssxref("text-align")}}<code>: justify;</code> gesetzt ist.</p>
+
+<pre class="brush: css no-line-numbers">text-justify: none;
+text-justify: auto;
+text-justify: inter-word;
+text-justify: inter-character;
+text-justify: distribute; /* Deprecated value */
+</pre>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>Die Eigenschaft <code>text-justify</code>  wird mit einem der Schlüsselwörter aus der folgenden Liste definiert.</p>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Der Blocksatz ist abgeschaltet. Dies hat den gleichen Effekt wie wenn {{cssxref("text-align")}} überhaupt nicht definiert ist. Diese Einstellung is nützlich, wenn man den Blocksatz dynamisch ein- und ausschalten möchte.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Der Browser entscheidet, wie der Blocksatz ausgeführt wird, abhängig von Performance und Qualität, aber auch, was angemessen ist für die Sprache des Textes (z.B. Deutsch, asiatische Sprachen). Dies ist die Standardeinstellung, wenn  <code>text-justify</code> nicht definiert ist.</dd>
+ <dt><code>inter-word</code></dt>
+ <dd>Um den Blocksatz zu erreichen, wird Weißraum zwischen den <em>Wörtern </em>eingefügt (also eine Variante zu {{cssxref("word-spacing")}}). Diese Form ist gebräuchlich für Sprachen, die Wörter mit Leerzeichen trennen, wie Deutsch oder Koreanisch.</dd>
+ <dt><code>inter-character</code></dt>
+ <dd>Um den Blocksatz zu erreichen, wird Weißraum zwischen den <em>Zeichen </em>eingefügt (also eine Variante zu {{cssxref("letter-spacing")}}). Diese Form ist gebräuchlich für Sprachen wie Japanisch.</dd>
+ <dt><code>distribute</code> {{deprecated_inline}}</dt>
+ <dd>Zeigt das gleiche Verhalten wie <code>inter-character</code>; dieser Wert wird beibehalten, um Abwärtskompatibilität zu gewährleisten.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<div class="hidden">
+<pre class="brush: html">&lt;p class="none"&gt;&lt;code&gt;text-justify: none&lt;/code&gt; —&lt;br&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.&lt;/p&gt;
+&lt;p class="auto"&gt;&lt;code&gt;text-justify: auto&lt;/code&gt; —&lt;br&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.&lt;/p&gt;
+&lt;p class="dist"&gt;&lt;code&gt;text-justify: distribute&lt;/code&gt; —&lt;br&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.&lt;/p&gt;
+&lt;p class="word"&gt;&lt;code&gt;text-justify: inter-word&lt;/code&gt; —&lt;br&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.&lt;/p&gt;
+&lt;p class="char"&gt;&lt;code&gt;text-justify: inter-character&lt;/code&gt; —&lt;br&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.&lt;/p&gt;</pre>
+</div>
+
+<pre class="brush: css">p {
+  font-size: 1.5em;
+  border: 1px solid black;
+  padding: 10px;
+  width: 95%;
+  margin: 10px auto;
+  text-align: justify;
+}
+
+.none {
+  text-justify: none;
+}
+
+.auto {
+  text-justify: auto;
+}
+
+.dist {
+  text-justify: distribute;
+}
+
+.word {
+  text-justify: inter-word;
+}
+
+.char {
+  text-justify: inter-character;
+}</pre>
+
+<p>{{EmbedLiveSample("Examples","100%",400)}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#text-justify-property', 'text-justify')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("css.properties.text-justify")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref("text-align")}}</li>
+</ul>
diff --git a/files/de/web/css/text-overflow/index.html b/files/de/web/css/text-overflow/index.html
new file mode 100644
index 0000000000..c513eca823
--- /dev/null
+++ b/files/de/web/css/text-overflow/index.html
@@ -0,0 +1,274 @@
+---
+title: text-overflow
+slug: Web/CSS/text-overflow
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - NeedsLiveSample
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+translation_of: Web/CSS/text-overflow
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <strong><code>text-overflow</code></strong> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft bestimmt, wie überlaufende Inhalte die nicht angezeigt werden (Siehe {{cssxref("overflow")}}) dem Nutzer signalisiert werden. Sie können abgeschnitten (clipped) oder durch ein Auslassungszeichen ('<code>…</code>', <code style="text-transform: uppercase;">U+2026 Horizontal Ellipsis</code>) beziehungsweise eine vom Webautor definierte Zeichenfolge markiert sein.</p>
+
+<p><img alt="text-overflow.png" class="default internal" src="/@api/deki/files/5846/=text-overflow.png"></p>
+
+<p>Das Abschneiden des überlaufenden Textes findet exakt am Rand des Inhaltselements statt. Um erst nach einem vollen Zeichen abzuschneiden, kann eine leere benutzerdefinierte Zeichenfolge angegeben werden (' ').</p>
+
+<p>Diese Eigenschaft beeinflusst nur Inhalte, welche aus einem Blockelement in dessen <em>inline</em>-Richtung überlaufen (beispielsweise wird Text der am unteren Ende eines Kastens überläuft nicht beeinflusst). Ein Textüberlauf kann auftreten, wenn ein Text-wrapping verhindert wird (z.B., durch ‘<code class="css"><code>white-space:nowrap</code></code>’) oder wenn ein einzelnes Wort zu lang ist.</p>
+
+<p>Diese CSS Eigenschaft erzwingt keinen Textüberlauf; um dies zu erreichen und somit die <code>text-overflow</code>-Eigenschaft anzuwenden, muss der Autor dem Element weitere Eigenschaften zuweisen, u. a. den {{cssxref("overflow")}} auf <code>hidden</code> setzen.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css">/* Überlaufverhalten am Zeilenende
+   Rechtes Ende, falls links nach rechts, linkes Ende, falls rechts nach links */
+text-overflow: clip;
+text-overflow: ellipsis;
+text-overflow: "…";
+
+/* Überlaufverhalten am linken/rechten Ende
+   Richtung hat keinen Einfluss */
+text-overflow: clip ellipsis;
+text-overflow: "…" "…";
+
+/* Globale Werte */
+text-overflow: inherit;
+text-overflow: initial;
+text-overflow: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>clip</code></dt>
+ <dd>Dieses Schlüsselwort führt dazu, dass Text genau am Ende des <a href="/de/docs/Web/CSS/Boxmodell">Inhaltsbereichs</a> abgeschnitten wird. Daher kann der Schnitt auch innerhalb eines Zeichens geschehen. Um am Übergang zwischen zwei Zeichen abzuschneiden, muss eine leere Zeichenfolge (<code>''</code>) verwendet werden. Der Wert <code>clip</code> ist der Standardwert für diese Eigenschaft.</dd>
+ <dt><code>ellipsis</code></dt>
+ <dd>Dieses Schlüsselwort führt dazu, dass ein Auslassungszeichen (<code>'…'</code>, <code style="text-transform: uppercase;">U+2026 Horizontal Ellipsis</code>) an der Schnittstelle angezeigt wird, um abgeschnittenen Text zu repräsentieren. Das Auslassungszeichen wird innerhalb des <a href="/de/docs/Web/CSS/Boxmodell">Inhaltsbereichs angezeigt, wodurch die Menge des angezeigten Texts verringert wird. Wenn nicht genug Platz für das Auslassungszeichen selbst zur Verfügung steht, wird es abgeschnitten.</a></dd>
+ <dt><a href="/de/docs/Web/CSS/Boxmodell"><code>&lt;string&gt;</code> {{experimental_inline}}</a></dt>
+ <dd><a href="/de/docs/Web/CSS/Boxmodell">Der </a>{{cssxref("&lt;string&gt;")}}<a href="/de/docs/Web/CSS/Boxmodell">, welcher zur Anzeige des abgeschnittenen Texts genutzt werden soll. Diese Zeichenfolge wird innerhalb des Inhaltsbereichs</a> angezeigt und führt dazu, dass die Menge des angezeigten Texts verringert wird. Wenn nicht genug Platz für die Zeichenfolge selbst zur Verfügung steht, wird sie abgeschnitten.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: css">p {
+  white-space: nowrap;
+  width: 100%;
+  overflow: hidden;              /* "overflow"-Wert darf nicht "visible" sein */
+
+  text-overflow: ellipsis;
+}
+</pre>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th colspan="1" rowspan="2" scope="col">CSS Wert</th>
+   <th colspan="2" rowspan="1" scope="col" style="text-align: center;"><code>direction: ltr</code></th>
+   <th colspan="2" rowspan="1" scope="col" style="text-align: center;"><code>direction: rtl</code></th>
+  </tr>
+  <tr>
+   <th scope="col">Erwartetes Ergebnis</th>
+   <th scope="col">Live-Ergebnis</th>
+   <th scope="col">Erwartetes Ergebnis</th>
+   <th scope="col">Live-Ergebnis</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><em>visible overflow</em></td>
+   <td style="font-family: monospace;">1234567890</td>
+   <td style="direction: ltr;">
+    <div style="float: left; font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: visible;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">0987654321</td>
+   <td>
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: visible;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: clip</code></td>
+   <td style="padding: 1px; font-family: monospace;"><img alt="t-o_clip.png" class="default internal" src="/@api/deki/files/6056/=t-o_clip.png"></td>
+   <td style="direction: ltr;">
+    <div style="float: left; font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip;">123456</div>
+   </td>
+   <td style="padding: 1px; font-family: monospace;"><img alt="t-o_clip_rtl.png" class="default internal" src="/@api/deki/files/6057/=t-o_clip_rtl.png"></td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: ''</code></td>
+   <td style="font-family: monospace;">12345</td>
+   <td style="direction: ltr;">
+    <div style="float: left; font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: '';">123456</div>
+   </td>
+   <td style="font-family: monospace;">54321</td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: '';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: ellipsis</code></td>
+   <td style="font-family: monospace;">1234…</td>
+   <td style="direction: ltr;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">…4321</td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: '.'</code></td>
+   <td style="font-family: monospace;">1234.</td>
+   <td style="direction: ltr;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: '.';"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">.4321</td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: '.';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: clip clip</code></td>
+   <td style="font-family: monospace;">123456</td>
+   <td style="direction: ltr;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip clip;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">654321</td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip clip;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: clip ellipsis</code></td>
+   <td style="font-family: monospace;">1234…</td>
+   <td style="direction: ltr;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip ellipsis;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">6543…</td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip ellipsis;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: clip '.'</code></td>
+   <td style="font-family: monospace;">1234.</td>
+   <td style="direction: ltr;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip '.';"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">6543.</td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip '.';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: ellipsis clip</code></td>
+   <td style="font-family: monospace;">…3456</td>
+   <td style="direction: ltr;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis clip;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">…4321</td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis clip;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: ellipsis ellipsis</code></td>
+   <td style="font-family: monospace;">…34…</td>
+   <td style="direction: ltr;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis ellipsis;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">…43…</td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis ellipsis;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: ellipsis '.'</code></td>
+   <td style="font-family: monospace;">…34.</td>
+   <td style="direction: ltr;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis '.';"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">…43.</td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis '.';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: ',' clip</code></td>
+   <td style="font-family: monospace;">,3456</td>
+   <td style="direction: ltr;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ',' clip;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">,4321</td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ',' clip;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: ',' ellipsis</code></td>
+   <td style="font-family: monospace;">,34…</td>
+   <td style="direction: ltr;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ','ellipsis;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">,43…</td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ','ellipsis;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: ',' '.'</code></td>
+   <td style="font-family: monospace;">,34.</td>
+   <td style="direction: ltr;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ',' '.';"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">,53.</td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ',' '.';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 UI', '#text-overflow', 'text-overflow')}}</td>
+   <td>{{Spec2('CSS3 UI')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Eine vorherige Version dieser Schnittstelle erreichte den <em>Candidate Recommendation</em>-Status (CR). Da einige der nicht aufgeführten gefährdeten Eigenschaften entfernt werden mussten, wurde die Spezifikation auf <em>Working Draft</em>-Niveau herabgesetzt. Das erklärt, weshalb Browser diese Eigenschaft ohne Präfix, jedoch nicht im CR-Zustand, umgesetzt haben. Momentan hat die Spezifikation das <em>Editor's Draft</em>-Niveau erreicht.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.text-overflow")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Verwandte CSS Eigenschaften: {{cssxref("overflow")}}, {{cssxref("white-space")}}</li>
+</ul>
diff --git a/files/de/web/css/text-rendering/index.html b/files/de/web/css/text-rendering/index.html
new file mode 100644
index 0000000000..57d8ffb78d
--- /dev/null
+++ b/files/de/web/css/text-rendering/index.html
@@ -0,0 +1,133 @@
+---
+title: text-rendering
+slug: Web/CSS/text-rendering
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Text
+  - NeedsLiveSample
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+  - SVG
+translation_of: Web/CSS/text-rendering
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <strong><code>text-rendering</code></strong> CSS Eigenschaft liefert der Renderingengine Informationen darüber, wie die Darstellung von Text optimiert werden soll.</p>
+
+<p>Der Browser macht Abstriche bezüglich Geschwindigkeit, Lesbarkeit und geometrischer Präzision. Die <code>text-rendering</code> Eigenschaft ist eine SVG Eigenschaft, die in keinem CSS Standard definiert ist. Jedoch erlauben Gecko und WebKit Browser es unter Windows, Mac OS X und Linux, diese Eigenschaft auf HTML und XML Inhalte anzuwenden.</p>
+
+<p>Ein offensichtlicher Effekt ist <code>optimizeLegibility</code>, welches Ligaturen (ff, fi, fl etc.) in Text kleiner als 20px für einige Schriftarten aktiviert (zum Beispiel Microsofts <em>Calibri</em>, <em>Candara</em>, <em>Constantia</em> und <em>Corbel</em> oder die <em>DejaVu</em> Schriftfamilie).</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css">/* Schlüsselwortwerte */
+text-rendering: auto;
+text-rendering: optimizeSpeed;
+text-rendering: optimizeLegibility;
+text-rendering: geometricPrecision;
+
+/* Globale Werte */
+text-rendering: inherit;
+text-rendering: initial;
+text-rendering: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Der Browser bestimmt, wann auf Geschwindigkeit, Lesbarkeit oder geometrische Präzision optimiert werden soll, wenn Text gezeichnet wird. Für Unterschiede, wie dieser Wert von den Browser interpretiert wird, siehe die Kompatibilitätstabelle.</dd>
+ <dt><code>optimizeSpeed</code></dt>
+ <dd>Der Browser betont Geschwindigkeit gegenüber Lesbarkeit und geometrischer Präzision, wenn Text gezeichnet wird. Dies deaktiviert Unterschneidung und Ligaturen.</dd>
+ <dt><code>optimizeLegibility</code></dt>
+ <dd>Der Browser betont Lesbarkeit gegenüber Geschwindigkeit und geometrischer Präzision, wenn Text gezeichnet wird. Dies aktiviert Unterschneidung und optionale Ligaturen.</dd>
+ <dt><code>geometricPrecision</code></dt>
+ <dd>
+ <p>Der Browser betont geometrischer Präzision gegenüber Geschwindigkeit und Lesbarkeit. Bestimmte Aspekte von Schriften — wie Unterschneidung — skalieren nicht linear. Daher erlaubt es dieser Wert, Text in diesen Schriften gut aussehen zu lassen.</p>
+
+ <p>Wenn Text in SVG hoch- oder runterskaliert wird, berechnen Browser die finale Größe des Texts (welche durch die angegebene Schriftgröße und die Skalierung bestimmt wird) und fordern eine Schriftart dieser berechneten Größe vom Schriftsystem der Plattform an. Aber falls eine Schriftgröße von beispielsweise 9 mit einer Skalierung von 140% angefordert wird, existiert die sich ergebende Schriftgröße von 12.6 nicht explizit im Schriftsystem, sodass der Browser stattdessen die Schriftgröße auf 12 abrundet. Dies resultiert in einer schrittweisen Skalierung von Text.</p>
+
+ <p>Der <code>geometricPrecision</code> Wert — falls von der Renderingengine vollständig unterstützt — erlaubt es, Text übergangslos zu skalieren. Große Skalierungsfaktoren können eine weniger schöne Textdarstellung zur Folge haben, aber die Größe ist, was erwartet wird — weder auf- noch abgerundet auf die nächstmögliche Schriftgröße, die von Windows oder Linux unterstützt wird.</p>
+
+ <p class="note"><strong>Hinweis</strong>: WebKit wendet exakt den angegebenen Wert an, aber Gecko behandelt den Wert genauso wie <code>optimizeLegibility</code>.</p>
+ </dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush:css">/* stellt sicher, dass alle Schriften innerhalb des HTML Dokuments in all ihrer Pracht dargestellt werden,
+   aber verhindert unangemessene Ligaturen in Elementen mit der Klasse 'foo' */
+
+body {
+  text-rendering: optimizeLegibility;
+}
+
+.foo {
+  text-rendering: optimizeSpeed;
+}</pre>
+
+<h3 id="Livebeispiele">Livebeispiele</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>CSS Code</th>
+   <th>Unterschneidung</th>
+   <th>Ligaturen</th>
+  </tr>
+  <tr style="font: 19.9px 'DejaVu Serif', Constantia;">
+   <td style="font: medium monospace;">font: 19.9px 'DejaVu Serif', Constantia;</td>
+   <td>LYoWAT</td>
+   <td>ff fi fl ffl</td>
+  </tr>
+  <tr style="font: 20px 'DejaVu Serif', Constantia;">
+   <td style="font: medium monospace;">font: 20px 'DejaVu Serif', Constantia;</td>
+   <td>LYoWAT</td>
+   <td>ff fi fl ffl</td>
+  </tr>
+  <tr style="font: 3em 'DejaVu Serif', Constantia; text-rendering: optimizeSpeed;">
+   <td style="font: medium monospace;">font: 3em 'DejaVu Serif', Constantia;<br>
+    text-rendering: optimizeSpeed;</td>
+   <td>LYoWAT</td>
+   <td>ff fi fl ffl</td>
+  </tr>
+  <tr style="font: 3em 'Dejavu Serif', Constantia; text-rendering: optimizeLegibility;">
+   <td style="font: medium monospace;">font: 3em 'Dejavu Serif', Constantia;<br>
+    text-rendering: optimizeLegibility;</td>
+   <td>LYoWAT</td>
+   <td>ff fi fl ffl</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'painting.html#TextRenderingProperty', 'text-rendering')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.text-rendering")}}
diff --git a/files/de/web/css/text-shadow/index.html b/files/de/web/css/text-shadow/index.html
new file mode 100644
index 0000000000..89b3f6907e
--- /dev/null
+++ b/files/de/web/css/text-shadow/index.html
@@ -0,0 +1,145 @@
+---
+title: text-shadow
+slug: Web/CSS/text-shadow
+tags:
+  - CSS
+  - CSS Text
+  - Eigenschaft
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+translation_of: Web/CSS/text-shadow
+---
+<div>{{Cssref}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <strong><code>text-shadow</code></strong> CSS Eigenschaft fügt Text Schatten hinzu. Sie akzeptiert eine kommaseparierte Liste von Schatten, die auf den Text und {{cssxref("text-decoration","Textdekorationen")}} des Elements angewendet werden sollen.</p>
+
+<p>Jeder Schatten wird mit einem Versatz vom Text angegeben, zusammen mit optionalen Farb- und Unschärferadiuswerten.</p>
+
+<p>Mehrere Schatten werden von vorne nach hinten angewendet, wobei der zuerst angewendete Schatten oben ist.</p>
+
+<p>Diese Eigenschaft gilt sowohl für {{cssxref("::first-line")}} als auch {{cssxref("::first-letter")}} <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelemente</a>.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css">/* offset-x | offset-y | blur-radius | color */
+text-shadow: 1px 1px 2px black;
+
+/* color | offset-x | offset-y | blur-radius */
+text-shadow: #CCC 1px 0 10px;
+
+/* offset-x | offset-y | color */
+text-shadow: 5px 5px #558ABB;
+
+/* color | offset-x | offset-y */
+text-shadow: white 2px 5px;
+
+/* offset-x | offset-y */
+/* Für color und blur-radius werden Standardwerte verwendet */
+text-shadow: 5px 10px;
+
+/* Globale Werte */
+text-shadow: inherit;
+text-shadow: initial;
+text-shadow: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt>&lt;color&gt;</dt>
+ <dd>Optional. Kann entweder vor oder nach dem Versatzwert angegeben werden. Falls die Farbe nicht angegeben wurde, wird eine vom User Agent bestimmte Farbe verwendet. {{note("Falls Konsistenz zwischen den Browsern gewünscht ist, sollte eine Farbe explizit gewählt werden.")}}</dd>
+ <dt>&lt;offset-x&gt; &lt;offset-y&gt;</dt>
+ <dd>Benötigt. Diese <code>&lt;length&gt;</code> Werte bestimmen den Versatz des Schattens vom Text. <code>&lt;offset-x&gt;</code> bestimmt die horizontale Distanz; ein negativer Wert platziert den Schatten links vom Text. <code>&lt;offset-y&gt;</code> bestimmt die vertikale Distanz; ein negativer Wert platziert den Schatten oberhalb des Texts. Falls beide Werte <code>0</code> sind, wird der Schatten hinter dem Text platziert (und kann einen Unschärfeeffekt erzeugen, falls <code>&lt;blur-radius&gt;</code> gesetzt ist).<br>
+ Siehe {{cssxref("&lt;length&gt;")}} für mögliche Einheiten.</dd>
+ <dt>&lt;blur-radius&gt;</dt>
+ <dd>Optional. Dies ist ein {{cssxref("&lt;length&gt;")}} Wert. Falls nicht angegeben, ist der Standardwert <code>0</code>. Je größer dieser Wert ist, desto größer ist die Unschärfe; der Schatten wird ausgedehnter und geringer.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<div id="Beispiel1">
+<pre class="brush: css">.red-text-shadow {
+   text-shadow: red 0 -2px;
+}</pre>
+
+<pre class="brush: html">&lt;p class="red-text-shadow"&gt;
+   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
+   inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+&lt;/p&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample('Beispiel1', '689px', '90px')}}</p>
+
+<div id="Beispiel2">
+<pre class="brush:css">.white-with-blue-shadow {
+   text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
+   color: white;
+   font: 1.5em Georgia, "Bitstream Charter", "URW Bookman L", "Century Schoolbook L", serif;
+}</pre>
+
+<pre class="brush: html">&lt;p class="white-with-blue-shadow"&gt;
+   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
+   veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+&lt;/p&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample('Beispiel2', '689px', '180px')}}</p>
+
+<div id="Beispiel3">
+<pre class="brush:css">.gold-on-gold {
+   text-shadow: rgba(0,0,0,0.1) -1px 0, rgba(0,0,0,0.1) 0 -1px,
+   rgba(255,255,255,0.1) 1px 0, rgba(255,255,255,0.1) 0 1px,
+   rgba(0,0,0,0.1) -1px -1px, rgba(255,255,255,0.1) 1px 1px;
+   color: gold;
+   background: gold;
+}</pre>
+
+<pre class="brush: html">&lt;p class="gold-on-gold"&gt;
+   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
+   veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+&lt;/p&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample('Beispiel3', '689px', '90px')}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'text-shadow')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Definiert <code>text-shadow</code> als animierbar.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td>Die CSS Eigenschaft <code>text-shadow</code> wurde <a class="external" href="http://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#text-shadow-props">in CSS2 inkorrekt definiert</a> und in CSS2 (Level 1) verworfen. Die <em>CSS Text Module Level 3</em> Spezifikation hat die Syntax verbessert und präzisiert. Später wurde sie in den neuen Arbeitsentwurf <em><a href="http://www.w3.org/TR/2012/WD-css-text-decor-3-20121113/">CSS Text Decoration Module Level 3</a></em> verschoben.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{Compat("css.properties.text-shadow")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref("box-shadow")}}</li>
+</ul>
diff --git a/files/de/web/css/text-transform/index.html b/files/de/web/css/text-transform/index.html
new file mode 100644
index 0000000000..5461a868a2
--- /dev/null
+++ b/files/de/web/css/text-transform/index.html
@@ -0,0 +1,504 @@
+---
+title: text-transform
+slug: Web/CSS/text-transform
+translation_of: Web/CSS/text-transform
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Summary" name="Summary">Übersicht</h2>
+
+<p>Das <code>text-transform</code> CSS Attribut legt die Groß- und Kleinschreibung eines Elementes fest. Es kann verwendet werden, um den Text eines Elementes komplett klein oder klein zu schreiben oder den ersten Buchstaben jedes Wortes groß zu schreiben.</p>
+
+<div class="note">
+<p>Das <code>text-transform</code> Attribut berücksichtigt sprachspezifische Regeln:</p>
+
+<ul>
+ <li>in Turksprachen, wie Türkisch (tr), Aserbaidschanisch (az), Krimtatarisch (crh), und Baschkirisch (ba), gibt es zwei Arten von i, mit und ohne Punkt, und jeweils die Groß- bzw. Kleinschreibung: <code>i</code>/<code>İ</code> and <code>ı</code>/<code>I</code>.</li>
+ <li>auf Deutsch (de) wird das <code>ß</code> in der Großschreibung zu <code>SS</code>.</li>
+ <li>auf Niederländisch (nl) wird der Digraph <code>ij</code> auch bei <code style="font-size: 14px;">text-transform: capitalize</code> zu <code>IJ</code>.</li>
+ <li>auf Griechisch (el) verlieren Vokale ihren Akzent wenn wenn ganze Worte is in Großschreibung geschrieben werden (<code>ά</code>/<code>Α</code>), außer beim Eta (<code>ή</code>/<code>Ή</code>). Doppelvokale mit einem Akzent auf dem ersten Vokal verlieren den Akzent und bekommen einen Trema auf dem zweiten Vokal (<code>άι</code>/<code>ΑΪ</code>).</li>
+ <li>auf Griechisch (el) hat das kleine Sigma zwei Formen: <code style="font-size: 14px;">σ</code> and <code style="font-size: 14px;">ς</code>. <code style="font-size: 14px;">ς</code> wird nur dann genutzt, wenn Sigma ein Wort beendet. Wird <code style="font-size: 14px;">text-transform: lowercase</code> auf ein großes Sigma (<span style="font-family: courier new,andale mono,monospace; line-height: normal;">Σ</span>) angewandt, so muss der Browser aus dem Kontext heraus entscheiden, welches verwendet wird.</li>
+</ul>
+
+<p>Die Sprache wird durch das <code>lang</code> HTML Attribut oder das <code>xml:lang</code> XML Attribut festgelegt..</p>
+
+<p>Die Unterstützung dieser spezifischen Fälle unterscheidet sich von Browser zu Browser, also prüfen Sie dies anhand der <a href="/en-US/docs/CSS/text-transform#Browser_compatibility" title="CSS/text-transform#Browser_compatibility">Kompatibilitätstabelle</a>.</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("text-transform")}}
+</pre>
+
+<pre>text-transform: capitalize
+text-transform: uppercase
+text-transform: lowercase
+text-transform: none
+text-transform: full-width
+
+text-transform: inherit
+</pre>
+
+<h3 id="Values" name="Values">Werte</h3>
+
+<dl>
+ <dt><code>capitalize</code></dt>
+ <dd>Ein Schlüsselwort, dass die Großschreibung des Anfachsbuchstaben jedes Wortes erzwingt. Geändert werden alle Unicode-basierten Zeichen außer Symbole. Dabei bleiben alle anderen Zeichen unverändert.</dd>
+ <dd>
+ <div class="note">Bei der automatischen Großschreibung sollte je nach Sprache die Kompatibilität beachtet und überprüft werden. </div>
+ </dd>
+ <dt><code>uppercase</code></dt>
+ <dd>Wendet die Großschreibung auf alle Zeichen an.</dd>
+ <dt><code>lowercase</code></dt>
+ <dd>Erzwingt die Kleinschreibung aller Zeichen.</dd>
+ <dt><code>none</code></dt>
+ <dd>Verhindert Änderungen; alle Buchstaben bleiben unverändert.</dd>
+ <dt><code>full-width</code> {{experimental_inline}}</dt>
+ <dd>Erzwingt das Rendern der Buchstaben als rechteckige Form, was z.B. die Interaktion mit ostasiatischen Sprachen (z.B. Chinesisch oder Japanisch) erlaubt.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td colspan="2"><code>p { text-transform: none; }</code></td>
+  </tr>
+  <tr>
+   <td>Zeichenkette</td>
+   <td><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></td>
+  </tr>
+  <tr>
+   <td>Echtzeitbeispiel</td>
+   <td><code style="text-transform: none;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></td>
+  </tr>
+  <tr>
+   <td>Referenzwert</td>
+   <td><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td colspan="2"><code>p { text-transform: capitalize; }</code></td>
+  </tr>
+  <tr>
+   <td>Zeichenkette</td>
+   <td><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></td>
+  </tr>
+  <tr>
+   <td>Echtzeitbeispiel</td>
+   <td><code style="text-transform: capitalize;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></td>
+  </tr>
+  <tr>
+   <td>Referenzwert</td>
+   <td><code>Lorem Ipsum Dolor Sit Amet, Consectetur Adipisicing Elit, ...</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td colspan="2">
+    <p><code>p { text-transform: capitalize; }</code></p>
+
+    <p>Die Großschreibung beginnt bei Zeichen, die nach Unicode der Buchstabenkategorie angehören.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Zeichenkette</td>
+   <td><code>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</code></td>
+  </tr>
+  <tr>
+   <td>Echtzeitbeispiel</td>
+   <td><code style="text-transform: capitalize;">(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</code></td>
+  </tr>
+  <tr>
+   <td>Referenzwert</td>
+   <td><code>(This) “Is” [A] –Short– -Test- «For» *The* _Css_ ¿Capitalize? ?¡Transform!</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td colspan="2">
+    <p><code>p { text-transform: capitalize; }</code></p>
+
+    <p>Symbole werden ignoriert. Auch hier wird erst der erste gefundene Buchstabe in einer Zeichenkette großgeschrieben.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Zeichenkette</td>
+   <td><code>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</code></td>
+  </tr>
+  <tr>
+   <td>Echtzeitbeispiel</td>
+   <td style="text-transform: capitalize;"><code>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</code></td>
+  </tr>
+  <tr>
+   <td>Referenzwert</td>
+   <td><code>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙKl</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td colspan="2"><code>p { text-transform: capitalize; }</code><br>
+    Das dänische Digraph <code>ij </code>muss wie ein einzelnes Zeichen behandelt werden.</td>
+  </tr>
+  <tr>
+   <td>Zeichenkette</td>
+   <td><code>The Dutch word: "<span lang="nl">ijsland</span>" starts with a digraph.</code></td>
+  </tr>
+  <tr>
+   <td>Echtzeitbeispiel</td>
+   <td style="text-transform: capitalize;"><code>The Dutch word: "<span lang="nl">ijsland</span>" starts with a digraph.</code></td>
+  </tr>
+  <tr>
+   <td>Referenzwert</td>
+   <td><code>The Dutch Word: "IJsland" Starts With A Digraph.</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td colspan="2"><code>p { text-transform: uppercase; }</code></td>
+  </tr>
+  <tr>
+   <td>Zeichenkette</td>
+   <td><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></td>
+  </tr>
+  <tr>
+   <td>Echtzeitbeispiel</td>
+   <td><code style="text-transform: uppercase;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></td>
+  </tr>
+  <tr>
+   <td>Referenzwert</td>
+   <td><code>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISICING ELIT, ...</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table" lang="el">
+ <tbody>
+  <tr>
+   <td colspan="2">
+    <p><code>p { text-transform: uppercase; }</code></p>
+
+    <p>Bei Griechischen Vokalen sollte, außer bei einem trennenden <code>eta</code>, auf Akzente verzichtet werden. Bei der Großschreibung eines ersten Vokals mit Akzent kommt es bei zwei direkt aufeinander folgenden Vokalen zu einer Diaräse.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Zeichenkette</td>
+   <td><code>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα";</code></td>
+  </tr>
+  <tr>
+   <td>Echtzeitbeispiel</td>
+   <td><code style="text-transform: uppercase;">Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα";</code></td>
+  </tr>
+  <tr>
+   <td>Referenzwert</td>
+   <td><code>ΘΑ ΠΑΜΕ ΣΤΟ "ΘΕΪΚΟ ΦΑΪ" Ή ΣΤΗ "ΝΕΡΑΪΔΑ";</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td colspan="2"><code>p { text-transform: lowercase; }</code></td>
+  </tr>
+  <tr>
+   <td>Zeichenkette</td>
+   <td><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></td>
+  </tr>
+  <tr>
+   <td>Echtzeitbeispiel</td>
+   <td><code style="text-transform: lowercase;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></td>
+  </tr>
+  <tr>
+   <td>Referenzwert</td>
+   <td><code>lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td colspan="2">
+    <p><code>p { text-transform: lowercase; }</code></p>
+
+    <p>Der griechische Buchstabe Sigma (<font face="Consolas">Σ</font>) wird je nach Kontext in ein kleingeschriebenes Sigma (<font face="Consolas">σ</font>) oder die entsprechene Wortvariante (<font face="Consolas">ς</font>) umgewandelt.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Zeichenkette</td>
+   <td><code>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</code></td>
+  </tr>
+  <tr>
+   <td>Echtzeitbeispiel</td>
+   <td><code style="text-transform: lowercase;">Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</code></td>
+  </tr>
+  <tr>
+   <td>Referenzwert</td>
+   <td><code>σ is a greek letter that appears several times in </code><code style="text-transform: lowercase;">ΟΔΥΣΣΕΥ</code><code>ς.</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td colspan="2"><code>p { text-transform: full-width; }</code><br>
+    Some characters exists in two formats, normal width and a full-width, with different Unicode code points. The full-width version is used to mix them smoothly with Asian ideographic characters.</td>
+  </tr>
+  <tr>
+   <td>Zeichenkette</td>
+   <td>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&amp;()*+,-./:;&lt;=&gt;?@{|}~</td>
+  </tr>
+  <tr>
+   <td>Echtzeitbeispiel</td>
+   <td><span>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&amp;()*+,-./:;&lt;=&gt;?@{|}~</span></td>
+  </tr>
+  <tr>
+   <td>Referenzwert</td>
+   <td>０１２３４５６７８９ａｂｃｄｅｆｇｈｉｊｋｌｍｎｏｐｑｒｓｔｕｖｗｘｙｚＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ！＂＃＄％＆（）＊＋，－．／：；＜＝＞？＠｛｜｝～</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Specifications" name="Specifications">Details</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentrar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Text', '#text-transform', 'text-transform')}}</td>
+   <td>{{Spec2('CSS4 Text')}}</td>
+   <td>Aus{{SpecName('CSS3 Text', '#text-transform', 'text-transform')}} :Fügt das Schlüsselwort <code>full-size-kana</code> hinzu und erlaubt die Kombination von Schlüsselwörtern mit <code>full-width</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#text-transform', 'text-transform')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>
+    <p>Aus {{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}} : Mehr Zahlen und Buchstaben können verwendet werden. Das Schlüsselwort <font face="Consolas">capitalize</font> aktiviert die Großschreibung nur beim <em>ersten unterstützten </em>Zeichen eines Wortes; andere Zeichen werden ignoriert. Erhöhung der Kompatibilität des Schlüsselwortes <font face="Consolas">full-width.</font></p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aus {{SpecName('CSS1', '#text-transform', 'text-transform')}} : Ergänzung des Umfangs an unterstützten Zeichen um einige nicht-lateinische Buchstaben</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#text-transform', 'text-transform')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundfunktionalität</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>4.0</td>
+   <td>7.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td><code>capitalize</code> (CSS3 version)</td>
+   <td>siehe Bemerkung</td>
+   <td>{{CompatGeckoDesktop("14")}} (siehe Bemerkung)</td>
+   <td>siehe Bemerkung</td>
+   <td>{{CompatUnknown}}</td>
+   <td>siehe Bemerkung</td>
+  </tr>
+  <tr>
+   <td><code>full-size-kana</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>full-width</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("19")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>ß</code> → <code>SS</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>i</code> → <code>İ</code> and <code>ı</code> → <code>I</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("14")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Dänisches <code>IJ D</code>igraph</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("14")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Griech. Zeichen mit Akzent</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("15")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>Σ</code> → <code>σ</code> bzw. <code>ς</code></td>
+   <td>30</td>
+   <td>{{CompatGeckoDesktop("14")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundfunktionalität</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td><code>capitalize</code> (CSS3 version)</td>
+   <td>siehe Bemerkung</td>
+   <td>{{CompatGeckoMobile("14")}} siehe Bemerkung</td>
+   <td>siehe Bemerkung</td>
+   <td>{{CompatUnknown}}</td>
+   <td>siehe Bemerkung</td>
+  </tr>
+  <tr>
+   <td><code>full-size-kana</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>full-width</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("19")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>ß</code> → <code>SS</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>i</code> → <code>İ</code> and <code>ı</code> → <code>I</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("14")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Dänisches <code>IJ D</code>igraph</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("14")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Griech. Zeichen mit Akzent</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>Σ</code> → <code>σ</code> bzw. <code>ς</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("14")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Browser_notes" name="Browser_notes">Browserinformationen</h3>
+
+<p>Das capitalize Schlüsselwort wurde in CSS1 bzw. CSS 2.1 nicht eindeutig spezifiziert. Dadurch wurde der erste großzuschreibende Buchstabe unterschiedlich ermittelt. Sowohl Webkit-basierte Browser als auch die Gecko Engine identifizierte Symbole fälschlicherwiese als Buchstaben. Beispielsweise galten bei Firefox <code>- </code>respektive <code>_</code> als Buchstaben. Internet Explorer 9 hielt sich den Spezifikationen insgesamt am nächsten. Mit CSS3 wurde das Verhalten vereinheitlicht. Der Kompatibilitätstabelle können die Browserversionen entnommen werden, mit denen der Standard erstmals exakt umgesetzt wurde.</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref("font-variant")}}</li>
+</ul>
diff --git a/files/de/web/css/text-underline-position/index.html b/files/de/web/css/text-underline-position/index.html
new file mode 100644
index 0000000000..90fd9ddafd
--- /dev/null
+++ b/files/de/web/css/text-underline-position/index.html
@@ -0,0 +1,92 @@
+---
+title: text-underline-position
+slug: Web/CSS/text-underline-position
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+translation_of: Web/CSS/text-underline-position
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>text-underline-position</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft legt die Position der Linie einer Unterstreichung, die über die {{cssxref("text-decoration")}}-Eigenschaft mit dem Wert <code>underline</code> gesetzt wurde, fest.</p>
+
+<p>Diese Eigenschaft wird vererbt und nicht von {{cssxref("text-decoration")}} zurückgesetzt, wodurch sie auch für das gesamte Dokument festgelegt werden kann:</p>
+
+<pre class="brush: css">:root { /* nützlich für Dokumente mit vielen chemischen Formeln */
+  text-underline-position: under;
+}</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Schlüsselwortwerte */
+text-underline-position: auto;
+text-underline-position: under;
+text-underline-position: left;
+text-underline-position: right;
+text-underline-position: under left;
+text-underline-position: right under;
+
+/* Globale Werte */
+text-underline-position: inherit;
+text-underline-position: initial;
+text-underline-position: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Der Browser verwendet einen Algorithmus, um zwischen <code>under</code> und der Grundlinie zu unterscheiden.</dd>
+ <dt><code>under</code></dt>
+ <dd>Die Linie wird <em>unterhalb</em> der Grundlinie, wo keine Unterlängen berührt werden, gesetzt. Dies ist nützlich, um zu verhindern, dass chemische oder mathematische Formeln, die oft Tiefstellungen enthalten, schwer lesbar werden.</dd>
+ <dt><code>left</code></dt>
+ <dd>In vertikalen Schreibrichtungen wird die Linie auf der <em>linken</em> Seite der Zeichen platziert. In horizontalen Schreibrichtungen ist dies ein Synonym für <code>under</code>.</dd>
+ <dt><code>right</code></dt>
+ <dd>In vertikalen Schreibrichtungen wird die Linie auf der <em>rechten</em> Seite der Zeichen platziert. In horizontalen Schreibrichtungen ist dies ein Synonym für <code>under</code>.</dd>
+ <dt><code>auto-pos</code>{{non-standard_inline}}</dt>
+ <dd>Dies ist ein Synonym für <code>auto</code> und sollte nicht verwendet werden.</dd>
+ <dt><code>above</code>{{non-standard_inline}}</dt>
+ <dd>Die Linie wird <em>über</em> dem Text gesetzt. In ostasiatischem Text führt der Wert <code>auto</code> zum gleichen Ergebnis.</dd>
+ <dt><code>below</code>{{non-standard_inline}}</dt>
+ <dd>Die Linie wird <em>unter</em> dem Text gesetzt. In aus Buchstaben bestehendem Text führt der Wert <code>auto</code> zum gleichen Ergebnis.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spezifikationen" name="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text-decoration', '#text-underline-position', 'text-underline-position')}}</td>
+   <td>{{Spec2('CSS3 Text-decoration')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.text-underline-position")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Verwandte CSS-Eigenschaften: {{cssxref("text-decoration")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, {{cssxref("text-decoration-color")}}.</li>
+ <li><a href="https://msdn.microsoft.com/en-us/library/ie/ms531176%28v=vs.85%29.aspx" title="https://msdn.microsoft.com/en-us/library/ie/ms531176%28v=vs.85%29.aspx">Microsoft-Dokumentation der nicht-standardisierten Werte</a> (englisch).</li>
+</ul>
diff --git a/files/de/web/css/time/index.html b/files/de/web/css/time/index.html
new file mode 100644
index 0000000000..e8e0f07a88
--- /dev/null
+++ b/files/de/web/css/time/index.html
@@ -0,0 +1,75 @@
+---
+title: <time>
+slug: Web/CSS/time
+tags:
+  - CSS
+  - CSS Datentyp
+  - Layout
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+  - Web
+translation_of: Web/CSS/time
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Der <code>&lt;time&gt;</code> <a href="/de/docs/Web/CSS">CSS</a> Datentyp bestimmt eine Zeitangabe in Sekunden oder Millisekunden. Dieser setzt sich aus einem {{cssxref("&lt;number&gt;")}} Wert und der entsprächenden Einheit zusammen. Dazwischen darf sich kein Leerzeichen befinden.</p>
+
+<p>Die verschiedenen Einheiten sind:</p>
+
+<ul>
+ <li><code>s</code> für Sekunden (bspw. <code>0s</code>, <code>1.5s</code>, <code>-60s)</code></li>
+ <li><code>ms</code> für Millisekunden(bspw. <code>0ms</code>, <code>1500ms</code>, <code>-60000ms)</code></li>
+</ul>
+
+<p>Die Umwandlung zwischen <code>s</code> und <code>ms</code> folgt dem logischen <code>1s</code> = <code>1000ms</code>.</p>
+
+<p>Auch wenn alle Einheiten dieselbe Zeit für den Wert <code>0</code> repräsentieren, darf die Einheit in diesem Fall nicht ausgelassen werden, da sie keine {{cssxref("&lt;length&gt;")}} ist: <code>0</code> ist ungültig und entspricht nicht <code>0s</code> oder <code>0ms</code>.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Dies sind gültige Zeitwerte:</p>
+
+<pre class="eval">12s         Positive Ganzzahl
+-456ms      Negative Ganzzahl
+4.3ms       keine Ganzzahl
+14mS        Die Einheit ist unabhängig von Groß- und Kleinschreibung, jedoch werden Großbuchstaben für s und ms nicht empfohlen.
++0s         Null mit einem führenden + und der Einheit
+-0ms        Null mit einem führenden - und der Einheit (obwohl seltsam ist dies ein erlaubter Wert)
+</pre>
+
+<p>Dies sind ungültige Zeitwerte:</p>
+
+<pre class="eval">0           Obwohl die einheitenlose Null für {{cssxref("length")}} erlaubt ist, ist sie ungültig für alle anderen Einheiten.
+12.0        Dies ist eine {{cssxref("&lt;number&gt;")}}, keine <code>&lt;time&gt;</code>; sie muss eine Einheit haben.
+7 ms        Leerzeichen zwischen {{cssxref("&lt;number&gt;")}} und Einheit sind nicht erlaubt.
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Values','#time','&lt;time&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Definiert <code>s</code> und <code>ms</code> normativ</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1','aural.html#times','&lt;time&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Definiert <code>s</code> und <code>ms</code> informativ</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.types.time")}}
diff --git a/files/de/web/css/tools/cubic_bezier_generator/index.html b/files/de/web/css/tools/cubic_bezier_generator/index.html
new file mode 100644
index 0000000000..a385d685be
--- /dev/null
+++ b/files/de/web/css/tools/cubic_bezier_generator/index.html
@@ -0,0 +1,321 @@
+---
+title: Cubic Bezier Generator
+slug: Web/CSS/Tools/Cubic_Bezier_Generator
+tags:
+  - CSS
+  - Werkzeuge
+translation_of: Web/CSS/Tools/Cubic_Bezier_Generator
+---
+<div id="Tool">
+<div style="display: none;">
+<pre class="brush:html">&lt;html&gt;
+    &lt;canvas id="bezier" width="336" height="336"&gt;
+    &lt;/canvas&gt;
+    &lt;form&gt;
+       &lt;label for="x1"&gt;x1 = &lt;/label&gt;&lt;input onchange="updateCanvas();" type="text" maxlength=6 id="x1" value="0.79" class='field'&gt;
+       &lt;label for="y1"&gt;y1 = &lt;/label&gt;&lt;input onchange="updateCanvas();return true;"  type="text" maxlength=6 id="y1" value="0.33" class='field'&gt;
+       &lt;label for="x2"&gt;x2 = &lt;/label&gt;&lt;input onchange="updateCanvas();return true;"  type="text" maxlength=6 id="x2" value="0.14" class='field'&gt;
+       &lt;label for="y2"&gt;y2 = &lt;/label&gt;&lt;input onchange="updateCanvas();return true;"  type="text" maxlength=6 id="y2" value="0.53" class='field'&gt;
+       &lt;br&gt;
+       &lt;output id="output"&gt;Log&lt;/output&gt;
+    &lt;/form&gt;
+&lt;/html&gt;
+     </pre>
+
+<pre class="brush:css">.field {
+    width: 40px;
+}
+     </pre>
+
+<pre class="brush:js">function updateCanvas() {
+
+    var x1 = document.getElementById('x1').value;
+    var y1 = document.getElementById('y1').value;
+    var x2 = document.getElementById('x2').value;
+    var y2 = document.getElementById('y2').value;
+
+    drawBezierCurve(x1, y1, x2, y2);
+}
+
+const radius = 4;
+// Place needed to draw the rulers
+const rulers = 30.5;
+const margin = 10.5;
+const basic_scale_size = 5; // Size of 0.1 tick on the rulers
+var scaling; //LIMITATION: scaling is computed once: if canvas.height/canvas.width change it won't be recalculated
+var dragSM = 0; // Drag state machine: 0 = nodrag, others = object being dragged
+
+function initCanvas() {
+    // get the canvas element using the DOM
+    var canvas = document.getElementById('bezier');
+
+    // Make sure we don't execute when canvas isn't supported
+    if (canvas.getContext) {
+        // use getContext to use the canvas for drawing
+        var ctx = canvas.getContext('2d');
+
+        scaling = Math.min(canvas.height - rulers - margin, canvas.width - rulers - margin);
+
+        canvas.onmousedown = mouseDown;
+        canvas.onmouseup = mouseUp;
+    } else {
+        alert('You need Safari or Firefox 1.5+ to see this demo.');
+    }
+}
+
+function cX(x) {
+    return x * scaling + rulers;
+}
+
+function reverseX(x) {
+    return (x - rulers) / scaling;
+}
+
+function lX(x) {
+    //Used when drawing vertical lines to prevent subpixel blur
+    var result = cX(x);
+    return Math.round(result) == result ? result + 0.5 : result;
+}
+
+function cY(y) {
+
+    return (1 - y) * scaling + margin;
+}
+
+function reverseY(y) {
+    return (margin - y) / scaling + 1;
+}
+
+function lY(y) {
+    // Used when drawing horizontal lines to prevent subpixel blur
+    var result = cY(y);
+    return Math.round(result) == result ? result + 0.5 : result;
+}
+
+function drawBezierCurve(x1, y1, x2, y2) {
+
+    // get the canvas element using the DOM
+    var canvas = document.getElementById('bezier');
+
+    // Make sure we don't execute when canvas isn't supported
+    if (canvas.getContext) {
+
+        // use getContext to use the canvas for drawing
+        var ctx = canvas.getContext('2d');
+
+
+
+        // Clear canvas
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+        // Draw the rulers
+        ctx.beginPath();
+        ctx.strokeStyle = "black";
+
+        // Draw the Y axis
+        ctx.moveTo(cX(0), cY(0));
+        ctx.lineTo(cX(1), cY(0));
+        ctx.textAlign = "right";
+
+        for (var i = 0.1; i &lt;= 1; i = i + 0.1) {
+            ctx.moveTo(-basic_scale_size + cX(0), lY(i));
+            if ((i == 0.5) || (i &gt; 0.9)) {
+                ctx.moveTo(-2 * basic_scale_size + cX(0), lY(i));
+                ctx.fillText(Math.round(i * 10) / 10, -3 * basic_scale_size + cX(0), cY(i) + 4);
+                // Limitation the constant 4 should be font size dependant
+            }
+            ctx.lineTo(cX(0), lY(i));
+        }
+        ctx.stroke();
+        ctx.closePath();
+        ctx.beginPath();
+
+        // Draw the Y axis label
+        ctx.save();
+        ctx.rotate(-Math.PI / 2);
+        ctx.textAlign = "left";
+        ctx.fillText("Output (Value Ratio)", -cY(0), -3 * basic_scale_size + cX(0));
+        ctx.restore();
+
+        // Draw the X axis
+        ctx.moveTo(cX(0), cY(0));
+        ctx.lineTo(cX(0), cY(1));
+        ctx.textAlign = "center";
+        for (i = 0.1; i &lt;= 1; i = i + 0.1) {
+            ctx.moveTo(lX(i), basic_scale_size + cY(0));
+            if ((i == 0.5) || (i &gt; 0.9)) {
+                ctx.moveTo(lX(i), 2 * basic_scale_size + cY(0));
+                ctx.fillText(Math.round(i * 10) / 10, cX(i), 4 * basic_scale_size + cY(0));
+                // Limitation the constant 4 should be dependant of the font size
+            }
+            ctx.lineTo(lX(i), cY(0));
+        }
+
+        // Draw the X axis label
+        ctx.textAlign = "left";
+        ctx.fillText("Input (Time Duration Ratio)", cX(0), 4 * basic_scale_size + cY(0));
+        // Limitation the constant 4 should be dependant of the font size
+        ctx.stroke();
+        ctx.closePath();
+
+        // Draw the Bézier Curve
+        ctx.beginPath();
+        ctx.moveTo(cX(0), cY(0));
+        ctx.strokeStyle = 'blue';
+        ctx.bezierCurveTo(cX(x1), cY(y1), cX(x2), cY(y2), cX(1), cY(1));
+        ctx.stroke();
+        ctx.closePath();
+
+
+
+        // Draw the P2 point (with a line to P0)
+        ctx.beginPath();
+        ctx.strokeStyle = 'red';
+        ctx.moveTo(cX(x1), cY(y1));
+        ctx.lineTo(cX(0), cY(0));
+        ctx.stroke();
+        ctx.closePath();
+        ctx.beginPath();
+        ctx.moveTo(cX(x1), cY(y1));
+        ctx.arc(cX(x1), cY(y1), radius, 0, 2 * Math.PI);
+        ctx.stroke();
+        ctx.fillStyle = 'white';
+        ctx.fill();
+        ctx.closePath();
+
+
+
+        // Draw the P3 point (with a line to P1)
+        ctx.beginPath();
+        ctx.strokeStyle = 'red';
+        ctx.moveTo(cX(x2), cY(y2));
+        ctx.lineTo(cX(1), cY(1));
+        ctx.stroke();
+        ctx.closePath();
+
+        ctx.beginPath();
+        ctx.moveTo(cX(x2), cY(y2));
+        ctx.arc(cX(x2), cY(y2), radius, 0, 2 * Math.PI);
+        ctx.stroke();
+        ctx.fill();
+        ctx.closePath();
+
+        // Draw the P1(1,1) point (with dashed hints)
+        ctx.beginPath();
+        ctx.moveTo(cX(1), cY(1));
+        ctx.strokeStyle = 'lightgrey';
+        ctx.lineTo(cX(0), cY(1));
+        ctx.moveTo(cX(1), cY(1));
+        ctx.lineTo(cX(1), cY(0));
+        ctx.stroke();
+        ctx.closePath();
+
+        ctx.beginPath();
+        ctx.strokeStyle = "black";
+        ctx.fillStyle = "black";
+        ctx.arc(cX(1), cY(1), radius, 0, 2 * Math.PI);
+        ctx.fill();
+        ctx.stroke();
+        ctx.closePath();
+
+
+        // Draw the P0(0,0) point
+        ctx.beginPath();
+        ctx.arc(cX(0), cY(0), radius, 0, 2 * Math.PI);
+        ctx.fill();
+        ctx.stroke();
+        ctx.closePath();
+
+
+    } else {
+        alert('You need Safari or Firefox 1.5+ to see this demo.');
+    }
+}
+
+function mouseDown(e) {
+
+    var canvas = document.getElementById('bezier');
+
+    var x1 = cX(document.getElementById('x1').value);
+    var y1 = cY(document.getElementById('y1').value);
+
+    var x = e.pageX - canvas.offsetLeft;
+    var y = e.pageY - canvas.offsetTop;
+
+    var output = document.getElementById('output');
+    output.value = "(" + x + "," + y + ") should be (" + x1 + "," + y1 + ")";
+
+
+    if ((x1 + radius &gt;= x) &amp;&amp; (x1 - radius &lt;= x) &amp;&amp; (y1 + radius &gt;= y) &amp;&amp; (y1 - radius &lt;= y)) {
+        var output = document.getElementById('output');
+        output.value = "P1!";
+        dragSM = 1;
+    }
+
+    var x2 = cX(document.getElementById('x2').value);
+    var y2 = cY(document.getElementById('y2').value);
+
+    if ((x2 + radius &gt;= x) &amp;&amp; (x2 - radius &lt;= x) &amp;&amp; (y2 + radius &gt;= y) &amp;&amp; (y2 - radius &lt;= y)) {
+        var output = document.getElementById('output');
+        output.value = "P2!";
+        dragSM = 2;
+    }
+
+    // If we are starting a drag
+    if (dragSM != 0) {
+        canvas.onmousemove = mouseMove;
+    }
+}
+
+function mouseUp(e) {
+
+    var output = document.getElementById('output');
+    output.value = "Mouse up!";
+    dragSM = 0;
+    canvas.onmousemove = null;
+}
+
+function mouseMove(e) {
+    if (dragSM != 0) {
+        var canvas = document.getElementById('bezier');
+
+        var x = e.pageX - canvas.offsetLeft;
+        var y = e.pageY - canvas.offsetTop;
+
+        var output = document.getElementById('output');
+        output.value = "Drag!";
+
+        if (dragSM == 1) {
+            var x1 = document.getElementById('x1');
+            var y1 = document.getElementById('y1');
+            x1.value = reverseX(x);
+            x1.value = Math.round(x1.value * 10000) / 10000;
+            y1.value = reverseY(y);
+            y1.value = Math.round(y1.value * 10000) / 10000;
+            if (x1.value &lt; 0) { x1.value = 0; }
+            if (x1.value &gt; 1) { x1.value = 1; }
+        } else if (dragSM == 2) {
+            var x2 = document.getElementById('x2');
+            var y2 = document.getElementById('y2');
+            x2.value = reverseX(x);
+            x2.value = Math.round(x2.value * 10000) / 10000;
+            y2.value = reverseY(y);
+            y2.value = Math.round(y2.value * 10000) / 10000;
+            if (x2.value &lt; 0) { x2.value = 0; }
+            if (x2.value &gt; 1) { x2.value = 1; }
+        }
+        updateCanvas();
+    }
+}
+
+initCanvas();
+updateCanvas();
+     </pre>
+</div>
+
+<p>{{draft}}</p>
+
+<p><span class="seoSummary">Dies ist ein Beispielwerkzeug; es erlaubt die Bearbeitung von Bezierkurven. Es ist noch nicht wirklich nützlich, wird es aber sein!</span></p>
+
+<p>{{EmbedLiveSample("Tool", 1000, 2000)}}</p>
+</div>
diff --git a/files/de/web/css/tools/index.html b/files/de/web/css/tools/index.html
new file mode 100644
index 0000000000..f107c81ddb
--- /dev/null
+++ b/files/de/web/css/tools/index.html
@@ -0,0 +1,25 @@
+---
+title: Tools
+slug: Web/CSS/Tools
+tags:
+  - CSS
+translation_of: Web/CSS/Tools
+---
+<p>CSS bietet eine Reihe mächtiger Features, die knifflig in der Anwendung sein können oder eine Reihe von Parametern haben, sodass es hilfreich ist, diese während an ihnen gearbeitet wird, zu visualisieren. Dieses Seite bietet Links zu verschiedenen nützlichen Werkzeugen, die helfen, das CSS unter Verwendung dieser Features zu erstellen, um den Inhalt zu stylen.</p>
+
+<p>{{LandingPageListSubpages}}</p>
+
+<h2 id="Weitere_Werkzeuge">Weitere Werkzeuge</h2>
+
+<ul>
+ <li>
+  <h4 id="CSS_Animation_-_Stylie">CSS Animation - <a href="http://jeremyckahn.github.io/stylie/">Stylie</a></h4>
+ </li>
+ <li>Um die Gerätedarstellungsinformationen zu überprüfen (hilfreich in {{Glossary("Responsive Web Design")}}) - <a href="http://mydevice.io">mydevice.io</a></li>
+</ul>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/CSS">CSS</a></li>
+</ul>
diff --git a/files/de/web/css/tools/linear-gradient_generator/index.html b/files/de/web/css/tools/linear-gradient_generator/index.html
new file mode 100644
index 0000000000..bc5f7b2465
--- /dev/null
+++ b/files/de/web/css/tools/linear-gradient_generator/index.html
@@ -0,0 +1,3328 @@
+---
+title: Linear-gradient Generator
+slug: Web/CSS/Tools/Linear-gradient_Generator
+tags:
+  - CSS
+  - Werkzeuge
+translation_of: Web/CSS/Tools/Linear-gradient_Generator
+---
+<div style="display: none;">
+<h2 id="linear-gradient_generator" name="linear-gradient_generator">linear-gradient generator</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">    &lt;div id="container"&gt;
+        &lt;div id="gradient-container" data-alpha="true"&gt;
+        &lt;/div&gt;
+
+        &lt;div id="controls"&gt;
+            &lt;div class="section"&gt;
+                &lt;div class="title"&gt; Active point &lt;/div&gt;
+                &lt;div class="property"&gt;
+                &lt;div class="ui-input-slider" data-topic="point-position" data-info="position"
+                    data-unit="px" data-min="-1000" data-value="0" data-max="1000" data-sensivity="5"&gt;&lt;/div&gt;
+                    &lt;div id="delete-point" class="button"&gt; delete point &lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div class="ui-color-picker" data-topic="picker"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div class="section"&gt;
+                &lt;div class="title"&gt; Active axis &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="name"&gt; axis unit &lt;/div&gt;
+                    &lt;div class="ui-dropdown" data-topic="axis-unit" data-selected="1"&gt;
+                        &lt;div data-value='px'&gt; pixels (px) &lt;/div&gt;
+                        &lt;div data-value='%'&gt; percentage (%) &lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div id="delete-axis" class="button"&gt; delete line &lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="ui-slider" data-topic="axis-rotation" data-info="rotation"
+                        data-min="-180" data-value="0" data-max="180"&gt;&lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="tool-section" class="section"&gt;
+                &lt;div class="title"&gt; Tool settings &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="name"&gt; alpha background &lt;/div&gt;
+                    &lt;div id="canvas-bg"&gt;&lt;/div&gt;
+                    &lt;div id="add-axis" class="button"&gt; add line &lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div id="order"&gt;
+                    &lt;div id="gradient-axes"&gt;&lt;/div&gt;
+                    &lt;div id="gradient-order"&gt;&lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="output"&gt;
+            &lt;div class="css-property"&gt;
+                &lt;span class="property"&gt;background:&lt;/span&gt;
+                &lt;span class="value"&gt;&lt;/span&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">/*
+ * COLOR PICKER TOOL
+ */
+
+.ui-color-picker {
+	width: 420px;
+	margin: 0;
+	border: 1px solid #DDD;
+	background-color: #FFF;
+	display: table;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-color-picker .picking-area {
+	width: 198px;
+	height: 198px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: relative;
+	float: left;
+	display: table;
+}
+
+.ui-color-picker .picking-area:hover {
+	cursor: default;
+}
+
+/* HSV format - Hue-Saturation-Value(Brightness) */
+.ui-color-picker .picking-area {
+	background: url("images/picker_mask.png");
+
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+
+	background-color: #F00;
+}
+
+/* HSL format - Hue-Saturation-Lightness */
+.ui-color-picker[data-mode='HSL'] .picking-area {
+	background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background-color: #F00;
+}
+
+.ui-color-picker .picker {
+	width: 10px;
+	height: 10px;
+	margin: -5px 0 0 -5px;
+	border-radius: 50%;
+	border: 1px solid #FFF;
+	position: absolute;
+	top: 45%;
+	left: 45%;
+}
+
+.ui-color-picker .picker:before {
+	width: 8px;
+	height: 8px;
+	content: "";
+	position: absolute;
+	border: 1px solid #999;
+	border-radius: 50%;
+}
+
+.ui-color-picker .hue,
+.ui-color-picker .alpha {
+	width: 198px;
+	height: 28px;
+	margin: 5px;
+	border: 1px solid #FFF;
+	float: left;
+}
+
+.ui-color-picker .hue {
+	background: url("images/hue_mask.png");
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+}
+
+.ui-color-picker .alpha {
+	border: 1px solid #CCC;
+	background: url("images/alpha_mask.png");
+}
+
+.ui-color-picker .slider-picker {
+	width: 2px;
+	height: 100%;
+	margin: 0 0 0 -2px;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+}
+
+/* input HSV and RGB */
+
+.ui-color-picker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+.ui-color-picker .info * {
+	float: left;
+}
+
+.ui-color-picker .input {
+	width: 64px;
+	margin: 5px 2px;
+	float: left;
+}
+
+.ui-color-picker .input .name {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+.ui-color-picker .input input {
+	width: 30px;
+	height: 18px;
+	margin: 0;
+	padding: 0;
+	border: 1px solid #DDD;
+	text-align: center;
+	float: right;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+.ui-color-picker .input[data-topic="lightness"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] {
+	display: block;
+}
+
+.ui-color-picker .input[data-topic="alpha"] {
+	margin-top: 10px;
+	width: 93px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] &gt; .name {
+	width: 60px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] &gt; input {
+	float: right;
+}
+
+.ui-color-picker .input[data-topic="hexa"] {
+	width: auto;
+	float: right;
+	margin: 6px 8px 0 0;
+}
+
+.ui-color-picker .input[data-topic="hexa"] &gt; .name {
+	display: none;
+}
+
+.ui-color-picker .input[data-topic="hexa"] &gt; input {
+	width: 90px;
+	height: 24px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/* Preview color */
+.ui-color-picker .preview {
+	width: 95px;
+	height: 53px;
+	margin: 5px;
+	margin-top: 10px;
+	border: 1px solid #DDD;
+	background-image: url("images/alpha.png");
+	float: left;
+	position: relative;
+}
+
+.ui-color-picker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	top: 0;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .preview-color {
+	width: 100%;
+	height: 100%;
+	background-color: rgba(255, 0, 0, 0.5);
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .switch_mode {
+	width: 10px;
+	height: 20px;
+	position: relative;
+	border-radius: 5px 0 0 5px;
+	border: 1px solid #DDD;
+	background-color: #EEE;
+	left: -12px;
+	top: -1px;
+	z-index: 1;
+	transition: all 0.5s;
+}
+
+.ui-color-picker .switch_mode:hover {
+	background-color: #CCC;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider &gt; input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+	line-height: inherit;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * UI Slider
+ */
+
+.ui-slider {
+	height: 20px;
+	margin: 10px 0;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-slider &gt; * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Slider */
+
+.ui-slider-slider {
+	height: 10px;
+	width: 200px;
+	margin: 4px 10px;
+	display: block;
+	border: 1px solid #999;
+	border-radius: 3px;
+	background: #EEE;
+}
+
+.ui-slider-slider:hover {
+	cursor: pointer;
+}
+
+.ui-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-slider-pointer {
+	width: 12px;
+	height: 13px;
+	margin: 0 0 0 -7px;
+	background-color: #EEE;
+	border: 1px solid #2C9FC9;
+	border-radius: 3px;
+	position: relative;
+	top: -3px;
+	left: 0%;
+}
+
+.ui-slider-button {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 3px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-slider-button:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+.ui-slider &gt; input {
+	width: 50px;
+	margin: 0 10px;
+	padding: 0;
+	text-align: center;
+}
+
+/*
+ * UI DropDown
+ */
+
+/* Dropdown */
+
+.ui-dropdown {
+	height: 2em;
+	width: 120px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 12px;
+
+	background-image: url("dropdown_arrow.svg");
+	background-position: right 0.3em center;
+	background-repeat: no-repeat;
+	background-color: #359740;
+	background-size: 1.1em;
+
+	position: relative;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-dropdown:hover {
+	cursor: pointer;
+	background-color: #208B20;
+}
+
+/* Dropdown Select Button */
+
+.ui-dropdown-select {
+	padding: 0 0.75em;
+	color: #FFF;
+	line-height: 2em;
+}
+
+/* Dropdown List */
+
+.ui-dropdown-list {
+	width: 100%;
+	height: 150px;
+	max-height: 150px;
+	margin: 0;
+	padding: 0 0.3em;
+
+	border: 1px solid #3490D2;
+	border-color: #208B20;
+	background: #666;
+	background-color: #EEF1F5;
+	color: #000;
+
+	position: absolute;
+	top: 100%;
+	left: 0;
+	z-index: 100;
+
+	overflow: hidden;
+	transition: all 0.3s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list:hover {
+	overflow: auto;
+}
+
+.ui-dropdown-list[data-hidden='true'] {
+	height: 0 !important;
+	opacity: 0;
+	visibility: hidden;
+}
+
+.ui-dropdown[data-position='left'] .ui-dropdown-list {
+	left: -100%;
+	top: 0;
+}
+
+.ui-dropdown[data-position='right'] .ui-dropdown-list {
+	left: 100%;
+	top: 0;
+}
+
+.ui-dropdown-list &gt; div {
+	width: 80%;
+	height: 1.6em;
+	margin: 0.3em 0;
+	padding: 0.3em 10%;
+	line-height: 1.6em;
+}
+
+.ui-dropdown-list &gt; div:hover {
+	background: #3490D2;
+	color:#FFF;
+	border-radius: 2px;
+	cursor: pointer;
+}
+
+/*
+ * COLOR PICKER TOOL
+ */
+
+body {
+	width: 100%;
+	height: 100%;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+body[data-dragging="true"] {
+}
+
+/**
+ * Resize Handle
+ */
+
+.resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url("images/resize.png") center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+[data-resize='both']:hover {
+	cursor: nw-resize !important;
+}
+
+[data-resize='width']:hover {
+	cursor: w-resize !important;
+}
+
+[data-resize='height']:hover {
+	cursor: n-resize !important;
+}
+
+/**
+ * Main Container
+ */
+
+#container {
+	width: 1000px;
+	height: 100%;
+	display: table;
+	margin: 0 auto;
+}
+
+
+#gradient-container {
+	width: 450px;
+	height: 250px;
+	min-width: 8px;
+	min-height: 8px;
+	margin: 100px auto;
+	border: 1px solid #DDD;
+	position: relative;
+}
+
+#gradient-container[data-alpha="true"]:after {
+	content: "";
+	width: 100%;
+	height: 100%;
+	background: url('images/canvas-pattern.png');
+	position: absolute;
+	z-index: -1;
+}
+
+/**
+ * 	Gradient Axis
+ */
+
+.gradient-axis {
+	width: 125%;
+	height: 4px;
+	margin: -3px 0 0 0;
+	border: 1px solid #CCC;
+	position: absolute;
+	top: 50%;
+	left: 0;
+	opacity: 0.5;
+}
+
+.gradient-axis[data-active='true'] {
+	opacity: 1;
+	z-index: 1;
+}
+
+.gradient-axis:after {
+	content: "";
+	width: 25px;
+	height: 100%;
+	background-color: #CCC;
+	position: absolute;
+	left: 0;
+	top: 0;
+}
+
+.gradient-axis .gradient-line {
+	width: 80%;
+	height: 100%;
+	margin: 0px auto;
+	position: relative;
+}
+
+.gradient-axis .gradient-line:hover {
+	cursor: pointer;
+}
+
+.gradient-axis .gradient-line:after,
+.gradient-axis .gradient-line:before {
+	content: "";
+	width: 1px;
+	height: 100px;
+	background-color: #CCC;
+	position: absolute;
+	top: -48px;
+}
+
+.gradient-axis .gradient-line:after {
+	left: -1px;
+}
+
+.gradient-axis .gradient-line:before {
+	right: -1px;
+}
+
+.gradient-axis .gradient-point {
+	width: 16px;
+	height: 16px;
+	margin: 0 0 0 -8px;
+	top: -7px;
+	border-radius: 50%;
+	background-color: #FFF;
+	border: 1px solid #999;
+	position: absolute;
+	z-index: 1;
+}
+
+.gradient-axis .gradient-point:after {
+	content: "";
+	width: 6px;
+	height: 6px;
+	border-radius: 50%;
+	background-color: #FFF;
+	border: 1px solid #999;
+	position: absolute;
+	top: 4px;
+	left: 4px;
+}
+
+.gradient-axis .gradient-point:hover:after,
+.gradient-axis .gradient-point[data-active="true"]:after {
+	background-color: #CCC;
+}
+
+.gradient-axis .rotate-point {
+	width: 25px;
+	height: 25px;
+	position: absolute;
+	top: -10.5px;
+	right: -12px;
+}
+
+.gradient-axis[axisID='0']:after {
+	background-color: #DA5C5C;
+}
+
+.gradient-axis[axisID='1']:after {
+	background-color: #5CDA9B;
+}
+
+.gradient-axis[axisID='2']:after {
+	background-color: #5C9BDA;
+}
+
+.gradient-axis[axisID='3']:after {
+	background-color: #5C5CDA;
+}
+
+.gradient-axis[axisID='0'] path {
+	fill: #DA5C5C;
+}
+
+.gradient-axis[axisID='1'] path {
+	fill: #5CDA9B;
+}
+
+.gradient-axis[axisID='2'] path {
+	fill: #5C9BDA;
+}
+
+.gradient-axis[axisID='3'] path {
+	fill: #5C5CDA;
+}
+
+
+.gradient-axis .rotate-point:hover {
+	cursor: pointer;
+}
+
+/**
+ * Controls
+ */
+
+#controls {
+	width: 100%;
+	margin: 0 auto;
+	display: table;
+}
+
+#controls .section {
+	width: 50%;
+	padding: 10px;
+	display: table;
+	float: left;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#controls .section .title {
+	width: 90%;
+	margin: 0 0 10px 0;
+	padding: 5px;
+	border-bottom: 1px solid #DDD;
+	font-size: 18px;
+	color: #777;
+}
+
+#controls .property {
+	width: 100%;
+	height: 24px;
+	margin: 10px 0;
+	padding: 3px 0;
+	display: table;
+}
+
+#controls .property &gt; * {
+	float: left;
+}
+
+#controls .property .name {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	line-height: 150%;
+}
+
+/* Button */
+
+#controls .button {
+	height: 24px;
+	padding: 0 10px;
+	background-color: #379B4A;
+	border-radius: 3px;
+	font-size: 14px;
+	color: #FFF;
+	display: inline;
+	float: left;
+}
+
+#controls .button[data-state='disabled'] {
+	background-color: #CCC !important;
+	color: #777 !important;
+}
+
+#controls .button[data-state='disabled']:hover {
+	background-color: #CCC !important;
+	cursor: default !important;
+}
+
+#controls .button:hover {
+	cursor: pointer;
+	background-color: #208B20;
+}
+
+/* Active Point  */
+
+.ui-input-slider {
+	height: 24px;
+	line-height: 20px;
+}
+
+#delete-point {
+	margin: 0 58px 0 0;
+	float: right !important;
+}
+
+#controls .ui-color-picker[data-topic="picker"] {
+	margin: 20px 0 0 0;
+}
+
+#controls .ui-input-slider[data-topic="axis-rotation"] {
+}
+
+#controls .ui-dropdown {
+	width: 130px;
+	height: 24px;
+}
+
+#controls .ui-dropdown-select {
+	line-height: 24px;
+}
+
+#controls .ui-dropdown-list {
+	height: 66px;
+	line-height: 2.5em;
+	overflow: hidden;
+}
+
+#delete-axis {
+	margin: 0 38px 0 0;
+	float: right !important;
+}
+
+/* Tool controls */
+
+#tool-section .property .name {
+	width: 150px;
+}
+
+#canvas-bg {
+	width: 16px;
+	height: 16px;
+	margin: 5px;
+	background: url("images/toggle-background.png") center right no-repeat;
+}
+
+#canvas-bg:hover {
+	cursor: pointer;
+}
+
+#canvas-bg[data-alpha='false'] {
+	background-position: center left;
+}
+
+#canvas-bg[data-alpha='true'] {
+	background-position: center right;
+}
+
+/* Order gradients */
+
+#order {
+	margin-left: 24px;
+}
+
+#gradient-axes {
+	width: 100%;
+	height: 30px;
+	padding: 0 0 0 15px;
+	display: table;
+	position: relative;
+}
+
+#gradient-axes .axis {
+	width: 50px;
+	height: 20px;
+	margin: 5px 0;
+	background-color: #DDD;
+	text-align: center;
+	float: left;
+	transition: all 0.3s;
+	position: absolute;
+}
+
+#gradient-axes .axis:hover {
+	margin: 2px 0;
+	height: 26px;
+	background-color: #CCC;
+	cursor: pointer;
+}
+
+#gradient-axes .axis[data-state='active'] {
+	margin: 2px 0;
+	height: 26px;
+}
+
+#gradient-axes .axis[data-state='active']:after {
+	content: "*";
+	color: #FFF;
+	padding: 3px;
+}
+
+#gradient-axes .axis[axisID='0'] {
+	background-color: #DA5C5C;
+}
+
+#gradient-axes .axis[axisID='1'] {
+	background-color: #5CDA9B;
+}
+
+#gradient-axes .axis[axisID='2'] {
+	background-color: #5C9BDA;
+}
+
+#gradient-axes .axis[axisID='3'] {
+	background-color: #5C5CDA;
+}
+
+#add-axis.button {
+	margin: 0 38px 0 0;
+	float: right;
+}
+
+#gradient-order {
+	width: 60%;
+	height: 5px;
+	margin: 5px 0 0 0;
+	overflow: visible;
+	background-color: #CCC;
+	position: relative;
+}
+
+#gradient-order:before {
+	content: "gradient order - drag to order";
+	position: absolute;
+	top: 100%;
+	color: #CCC;
+}
+
+#gradient-order:after {
+	content: "";
+	width: 24px;
+	height: 24px;
+	background: url('images/arrow.svg');
+	background-size: 24px 24px;
+	position: absolute;
+	right: -10px;
+	top: -9.5px;
+}
+
+
+/**
+ * Output
+ */
+
+#output {
+	width: 100%;
+	padding: 10px 0;
+	margin: 20px 0 50px 0;
+	border: 2px dashed #CCC;
+	border-radius: 5px;
+	display: table;
+	font-size: 13px;
+	overflow: hidden;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+}
+
+#output .css-property {
+	width: 90%;
+	margin: 5px 5%;
+	color: #777;
+	position: relative;
+	float: left;
+}
+
+#output .property {
+	height: 100%;
+	width: 12%;
+	position: absolute;
+	left: 0;
+}
+
+#output .value {
+	width: 88%;
+	position: absolute;
+	white-space: pre;
+	word-wrap: break-word;
+	display: block;
+	right: 0;
+
+}
+
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js">var UIColorPicker = (function UIColorPicker() {
+	'use strict';
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	var subscribers = [];
+	var pickers = [];
+
+	/**
+	 * RGBA Color class
+	 *
+	 * HSV/HSB and HSL (hue, saturation, value / brightness, lightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 * @param lightness		0-100
+	 */
+
+	function Color(color) {
+
+		if(color instanceof Color === true) {
+			this.copy(color);
+			return;
+		}
+
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+		this.lightness = 0;
+		this.format = 'HSV';
+	}
+
+	function RGBColor(r, g, b) {
+		var color = new Color();
+		color.setRGBA(r, g, b, 1);
+		return color;
+	}
+
+	function RGBAColor(r, g, b, a) {
+		var color = new Color();
+		color.setRGBA(r, g, b, a);
+		return color;
+	}
+
+	function HSVColor(h, s, v) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		return color;
+	}
+
+	function HSVAColor(h, s, v, a) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		color.a = a;
+		return color;
+	}
+
+	function HSLColor(h, s, l) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		return color;
+	}
+
+	function HSLAColor(h, s, l, a) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		color.a = a;
+		return color;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+		this.format = '' + obj.format;
+		this.lightness = obj.lightness;
+	};
+
+	Color.prototype.setFormat = function setFormat(format) {
+		if (format === 'HSV')
+			this.format = 'HSV';
+		if (format === 'HSL')
+			this.format = 'HSL';
+	};
+
+	/*========== Methods to set Color Properties ==========*/
+
+	Color.prototype.isValidRGBValue = function isValidRGBValue(value) {
+		return (typeof(value) === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+			value &gt;= 0 &amp;&amp; value &lt;= 255);
+	};
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (this.isValidRGBValue(red) === false ||
+			this.isValidRGBValue(green) === false ||
+			this.isValidRGBValue(blue) === false)
+			return;
+
+			this.r = red | 0;
+			this.g = green | 0;
+			this.b = blue | 0;
+
+		if (this.isValidRGBValue(alpha) === true)
+			this.a = alpha | 0;
+	};
+
+	Color.prototype.setByName = function setByName(name, value) {
+		if (name === 'r' || name === 'g' || name === 'b') {
+			if(this.isValidRGBValue(value) === false)
+				return;
+
+			this[name] = value;
+			this.updateHSX();
+		}
+	};
+
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setHSL = function setHSL(hue, saturation, lightness) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.lightness = lightness;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHue = function setHue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value &lt; 0 || value &gt; 359)
+			return;
+		this.hue = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setSaturation = function setSaturation(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value &lt; 0 || value &gt; 100)
+			return;
+		this.saturation = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setValue = function setValue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value &lt; 0 || value &gt; 100)
+			return;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setLightness = function setLightness(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value &lt; 0 || value &gt; 100)
+			return;
+		this.lightness = value;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setAlpha = function setAlpha(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value &lt; 0 || value &gt; 1)
+			return;
+		this.a = parseFloat(value.toFixed(2));
+	};
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value);
+
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3');
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+		this.RGBtoHSV();
+	};
+
+	/*========== Conversion Methods ==========*/
+
+	Color.prototype.convertToHSL = function convertToHSL() {
+		if (this.format === 'HSL')
+			return;
+
+		this.setFormat('HSL');
+		this.RGBtoHSL();
+	};
+
+	Color.prototype.convertToHSV = function convertToHSV() {
+		if (this.format === 'HSV')
+			return;
+
+		this.setFormat('HSV');
+		this.RGBtoHSV();
+	};
+
+	/*========== Update Methods ==========*/
+
+	Color.prototype.updateRGB = function updateRGB() {
+		if (this.format === 'HSV') {
+			this.HSVtoRGB();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.HSLtoRGB();
+			return;
+		}
+	};
+
+	Color.prototype.updateHSX = function updateHSX() {
+		if (this.format === 'HSV') {
+			this.RGBtoHSV();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.RGBtoHSL();
+			return;
+		}
+	};
+
+	Color.prototype.HSVtoRGB = function HSVtoRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H &gt;= 0 &amp;&amp; H &lt; 1) {	this.setRGBA(C, X, m);	return; }
+		if (H &gt;= 1 &amp;&amp; H &lt; 2) {	this.setRGBA(X, C, m);	return; }
+		if (H &gt;= 2 &amp;&amp; H &lt; 3) {	this.setRGBA(m, C, X);	return; }
+		if (H &gt;= 3 &amp;&amp; H &lt; 4) {	this.setRGBA(m, X, C);	return; }
+		if (H &gt;= 4 &amp;&amp; H &lt; 5) {	this.setRGBA(X, m, C);	return; }
+		if (H &gt;= 5 &amp;&amp; H &lt; 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.HSLtoRGB = function HSLtoRGB() {
+		var sat = this.saturation / 100;
+		var light = this.lightness / 100;
+		var C = sat * (1 - Math.abs(2 * light - 1));
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = light - C/2;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H &gt;= 0 &amp;&amp; H &lt; 1) {	this.setRGBA(C, X, m);	return; }
+		if (H &gt;= 1 &amp;&amp; H &lt; 2) {	this.setRGBA(X, C, m);	return; }
+		if (H &gt;= 2 &amp;&amp; H &lt; 3) {	this.setRGBA(m, C, X);	return; }
+		if (H &gt;= 3 &amp;&amp; H &lt; 4) {	this.setRGBA(m, X, C);	return; }
+		if (H &gt;= 4 &amp;&amp; H &lt; 5) {	this.setRGBA(X, m, C);	return; }
+		if (H &gt;= 5 &amp;&amp; H &lt; 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.RGBtoHSV = function RGBtoHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue &lt; 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	};
+
+	Color.prototype.RGBtoHSL = function RGBtoHSL() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+		var lightness = (cmax + cmin) / 2;
+		var X = (1 - Math.abs(2 * lightness - 1));
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / X;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue &lt; 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.lightness = (lightness * 100) | 0;
+	};
+
+	/*========== Get Methods ==========*/
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r &lt; 16) r = '0' + r;
+		if (this.g &lt; 16) g = '0' + g;
+		if (this.b &lt; 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	};
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b;
+		var a = '';
+		var v = '';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'rgb' + a + rgb + v + ')';
+		return value;
+	};
+
+	Color.prototype.getHSLA = function getHSLA() {
+		if (this.format === 'HSV') {
+			var color = new Color(this);
+			color.setFormat('HSL');
+			color.updateHSX();
+			return color.getHSLA();
+		}
+
+		var a = '';
+		var v = '';
+		var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'hsl' + a + hsl + v + ')';
+		return value;
+	};
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	};
+
+	/*=======================================================================*/
+	/*=======================================================================*/
+
+	/*========== Capture Mouse Movement ==========*/
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener('mousedown', function(e) {
+			callback(e);
+			document.addEventListener('mousemove', callback);
+		});
+
+		document.addEventListener('mouseup', function(e) {
+			document.removeEventListener('mousemove', callback);
+		});
+	};
+
+	/*====================*/
+	// Color Picker Class
+	/*====================*/
+
+	function ColorPicker(node) {
+		this.color = new Color();
+		this.node = node;
+		this.subscribers = [];
+
+		var type = this.node.getAttribute('data-mode');
+		var topic = this.node.getAttribute('data-topic');
+
+		this.topic = topic;
+		this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV';
+		this.color.setFormat(this.picker_mode);
+
+		this.createPickingArea();
+		this.createHueArea();
+
+		this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this));
+		this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this));
+		this.newInputComponent('V', 'value', this.inputChangeValue.bind(this));
+		this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this));
+
+		this.createAlphaArea();
+
+		this.newInputComponent('R', 'red', this.inputChangeRed.bind(this));
+		this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this));
+		this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this));
+
+		this.createPreviewBox();
+		this.createChangeModeButton();
+
+		this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this));
+		this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this));
+
+		this.setColor(this.color);
+		pickers[topic] = this;
+	}
+
+	/*************************************************************************/
+	//				Function for generating the color-picker
+	/*************************************************************************/
+
+	ColorPicker.prototype.createPickingArea = function createPickingArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'picking-area';
+		picker.className = 'picker';
+
+		this.picking_area = area;
+		this.color_picker = picker;
+		setMouseTracking(area, this.updateColor.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createHueArea = function createHueArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'hue';
+		picker.className ='slider-picker';
+
+		this.hue_area = area;
+		this.hue_picker = picker;
+		setMouseTracking(area, this.updateHueSlider.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createAlphaArea = function createAlphaArea() {
+		var mask = document.createElement('div');
+		var picker = document.createElement('div');
+
+		mask.className = 'alpha';
+		picker.className = 'slider-picker';
+
+		this.alpha_mask = mask;
+		this.alpha_picker = picker;
+		setMouseTracking(mask, this.updateAlphaSlider.bind(this));
+
+		mask.appendChild(picker);
+		this.node.appendChild(mask);
+	};
+
+	ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) {
+		var preview_box = document.createElement('div');
+		var preview_color = document.createElement('div');
+
+		preview_box.className = 'preview';
+		preview_color.className = 'preview-color';
+
+		this.preview_color = preview_color;
+
+		preview_box.appendChild(preview_color);
+		this.node.appendChild(preview_box);
+	};
+
+	ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) {
+		var wrapper = document.createElement('div');
+		var input = document.createElement('input');
+		var info = document.createElement('span');
+
+		wrapper.className = 'input';
+		wrapper.setAttribute('data-topic', topic);
+		info.textContent = title;
+		info.className = 'name';
+		input.setAttribute('type', 'text');
+
+		wrapper.appendChild(info);
+		wrapper.appendChild(input);
+		this.node.appendChild(wrapper);
+
+		input.addEventListener('change', onChangeFunc);
+		input.addEventListener('click', function() {
+			this.select();
+		});
+
+		this.subscribe(topic, function(value) {
+			input.value = value;
+		});
+	};
+
+	ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() {
+
+		var button = document.createElement('div');
+		button.className = 'switch_mode';
+		button.addEventListener('click', function() {
+			if (this.picker_mode === 'HSV')
+				this.setPickerMode('HSL');
+			else
+				this.setPickerMode('HSV');
+
+		}.bind(this));
+
+		this.node.appendChild(button);
+	};
+
+	/*************************************************************************/
+	//					Updates properties of UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updateColor = function updateColor(e) {
+		var x = e.pageX - this.picking_area.offsetLeft;
+		var y = e.pageY - this.picking_area.offsetTop;
+
+		// width and height should be the same
+		var size = this.picking_area.clientWidth;
+
+		if (x &gt; size) x = size;
+		if (y &gt; size) y = size;
+		if (x &lt; 0) x = 0;
+		if (y &lt; 0) y = 0;
+
+		var value = 100 - (y * 100 / size) | 0;
+		var saturation = x * 100 / size | 0;
+
+		if (this.picker_mode === 'HSV')
+			this.color.setHSV(this.color.hue, saturation, value);
+		if (this.picker_mode === 'HSL')
+			this.color.setHSL(this.color.hue, saturation, value);
+
+		this.color_picker.style.left = x + 'px';
+		this.color_picker.style.top = y + 'px';
+
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('value', value);
+		this.notify('lightness', value);
+		this.notify('saturation', saturation);
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) {
+		var x = e.pageX - this.hue_area.offsetLeft;
+		var width = this.hue_area.clientWidth;
+
+		if (x &lt; 0) x = 0;
+		if (x &gt; width) x = width;
+
+		var hue = ((359 * x) / width) | 0;
+
+		this.updateSliderPosition(this.hue_picker, x - 1);
+		this.setHue(hue);
+	};
+
+	ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) {
+		var x = e.pageX - this.alpha_mask.offsetLeft;
+		var width = this.alpha_mask.clientWidth;
+
+		if (x &lt; 0) x = 0;
+		if (x &gt; width) x = width;
+
+		this.color.a = (x / width).toFixed(2);
+
+		this.updateSliderPosition(this.alpha_picker, x - 1);
+		this.updatePreviewColor();
+
+		this.notify('alpha', this.color.a);
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setHue = function setHue(value) {
+		this.color.setHue(value);
+
+		this.updatePickerBackground();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+		this.notify('hue', this.color.hue);
+
+		notify(this.topic, this.color);
+	};
+
+	// Updates when one of Saturation/Value/Lightness changes
+	ColorPicker.prototype.updateSLV = function updateSLV() {
+		this.updatePickerPosition();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	/*************************************************************************/
+	//				Update positions of various UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() {
+		var size = this.picking_area.clientWidth;
+		var value = 0;
+
+		if (this.picker_mode === 'HSV')
+			value = this.color.value;
+		if (this.picker_mode === 'HSL')
+			value = this.color.lightness;
+
+		var x = (this.color.saturation * size / 100) | 0;
+		var y = size - (value * size / 100) | 0;
+
+		this.color_picker.style.left = x + 'px';
+		this.color_picker.style.top = y + 'px';
+	};
+
+	ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) {
+		elem.style.left = pos + 'px';
+	};
+
+	ColorPicker.prototype.updateHuePicker = function updateHuePicker() {
+		var size = this.hue_area.clientWidth;
+		var pos = (this.color.hue * size / 360 ) | 0;
+		this.hue_picker.style.left = pos + 'px';
+	};
+
+	ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() {
+		var size = this.alpha_mask.clientWidth;
+		var pos = (this.color.a * size) | 0;
+		this.alpha_picker.style.left = pos + 'px';
+	};
+
+	/*************************************************************************/
+	//						Update background colors
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() {
+		var nc = new Color(this.color);
+		nc.setHSV(nc.hue, 100, 100);
+		this.picking_area.style.backgroundColor = nc.getHexa();
+	};
+
+	ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() {
+		this.alpha_mask.style.backgroundColor = this.color.getHexa();
+	};
+
+	ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() {
+		this.preview_color.style.backgroundColor = this.color.getColor();
+	};
+
+	/*************************************************************************/
+	//						Update input elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) {
+		var value = parseInt(e.target.value);
+		this.setHue(value);
+		this.updateHuePicker();
+	};
+
+	ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) {
+		var value = parseInt(e.target.value);
+		this.color.setSaturation(value);
+		e.target.value = this.color.saturation;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setValue(value);
+		e.target.value = this.color.value;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) {
+		var value = parseInt(e.target.value);
+		this.color.setLightness(value);
+		e.target.value = this.color.lightness;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('r', value);
+		e.target.value = this.color.r;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('g', value);
+		e.target.value = this.color.g;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('b', value);
+		e.target.value = this.color.b;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) {
+		var value = parseFloat(e.target.value);
+
+		if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+			value &gt;= 0 &amp;&amp; value &lt;= 1)
+			this.color.a = value.toFixed(2);
+
+		e.target.value = this.color.a;
+		this.updateAlphaPicker();
+		this.updatePreviewColor();
+	};
+
+	ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) {
+		var value = e.target.value;
+		this.color.setHexa(value);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//							Internal Pub/Sub
+	/*************************************************************************/
+
+	ColorPicker.prototype.subscribe = function subscribe(topic, callback) {
+		this.subscribers[topic] = callback;
+	};
+
+	ColorPicker.prototype.notify = function notify(topic, value) {
+		if (this.subscribers[topic])
+			this.subscribers[topic](value);
+	};
+
+	/*************************************************************************/
+	//							Set Picker Properties
+	/*************************************************************************/
+
+	ColorPicker.prototype.setColor = function setColor(color) {
+		if(color instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		if (color.format !== this.picker_mode) {
+			color.setFormat(this.picker_mode);
+			color.updateHSX();
+		}
+
+		this.color.copy(color);
+		this.updateHuePicker();
+		this.updatePickerPosition();
+		this.updatePickerBackground();
+		this.updateAlphaPicker();
+		this.updatePreviewColor();
+		this.updateAlphaGradient();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+
+		this.notify('hue', this.color.hue);
+		this.notify('saturation', this.color.saturation);
+		this.notify('value', this.color.value);
+		this.notify('lightness', this.color.lightness);
+
+		this.notify('alpha', this.color.a);
+		this.notify('hexa', this.color.getHexa());
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setPickerMode = function setPickerMode(mode) {
+		if (mode !== 'HSV' &amp;&amp; mode !== 'HSL')
+			return;
+
+		this.picker_mode = mode;
+		this.node.setAttribute('data-mode', this.picker_mode);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//								UNUSED
+	/*************************************************************************/
+
+	var setPickerMode = function setPickerMode(topic, mode) {
+		if (pickers[topic])
+			pickers[topic].setPickerMode(mode);
+	};
+
+	var setColor = function setColor(topic, color) {
+		if (pickers[topic])
+			pickers[topic].setColor(color);
+	};
+
+	var getColor = function getColor(topic) {
+		if (pickers[topic])
+			return new Color(pickers[topic].color);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(callback) {
+		subscribers.indexOf(callback);
+		subscribers.splice(index, 1);
+	};
+
+	var notify = function notify(topic, value) {
+		if (subscribers[topic] === undefined || subscribers[topic].length === 0)
+			return;
+
+		var color = new Color(value);
+		for (var i in subscribers[topic])
+			subscribers[topic][i](color);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-color-picker');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new ColorPicker(elem[i]);
+	};
+
+	return {
+		init : init,
+		Color : Color,
+		RGBColor : RGBColor,
+		RGBAColor : RGBAColor,
+		HSVColor : HSVColor,
+		HSVAColor : HSVAColor,
+		HSLColor : HSLColor,
+		HSLAColor : HSLAColor,
+		setColor : setColor,
+		getColor : getColor,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPickerMode : setPickerMode
+	};
+
+})();
+
+/**
+ * UI-DropDown Select
+ */
+
+var DropDownManager = (function DropdownManager() {
+	'use strict';
+
+	var subscribers = {};
+	var dropdowns = [];
+	var active = null;
+
+	var visbility = ["hidden", "visible"];
+
+	var DropDown = function DropDown(node) {
+		var topic = node.getAttribute('data-topic');
+		var label = node.getAttribute('data-label');
+		var selected = node.getAttribute('data-selected') | 0;
+
+		var select = document.createElement('div');
+		var list = document.createElement('div');
+		var uval = 0;
+		var option = null;
+		var option_value = null;
+
+		list.className = 'ui-dropdown-list';
+		select.className = 'ui-dropdown-select';
+
+		while (node.firstElementChild !== null) {
+			option = node.firstElementChild;
+			option_value = option.getAttribute('data-value');
+
+			if (option_value === null)
+				option.setAttribute('data-value', uval);
+
+			list.appendChild(node.firstElementChild);
+			uval++;
+		}
+
+		node.appendChild(select);
+		node.appendChild(list);
+
+		select.onclick = this.toggle.bind(this);
+		list.onclick = this.updateValue.bind(this);
+		document.addEventListener('click', clickOut);
+
+		this.state = 0;
+		this.time = 0;
+		this.dropmenu = list;
+		this.select = select;
+		this.toggle(false);
+		this.value = {};
+		this.topic = topic;
+
+		if (label)
+			select.textContent = label;
+		else
+			this.setNodeValue(list.children[selected]);
+
+		dropdowns[topic] = this;
+
+	};
+
+	DropDown.prototype.toggle = function toggle(state) {
+		if (typeof(state) === 'boolean')
+			this.state = state === false ? 0 : 1;
+		else
+			this.state = 1 ^ this.state;
+
+		if (active !== this) {
+			if (active)
+				active.toggle(false);
+			active = this;
+		}
+
+		if (this.state === 0)
+			this.dropmenu.setAttribute('data-hidden', 'true');
+		else
+			this.dropmenu.removeAttribute('data-hidden');
+
+	};
+
+	DropDown.prototype.updateValue = function updateValue(e) {
+
+		if (Date.now() - this.time &lt; 500)
+			return;
+
+		if (e.target.className !== "ui-dropdown-list") {
+			this.setNodeValue(e.target);
+			this.toggle(false);
+		}
+
+		this.time = Date.now();
+	};
+
+	DropDown.prototype.setNodeValue = function setNodeValue(node, send_notify) {
+		this.value['name'] = node.textContent;
+		this.value['value'] = node.getAttribute('data-value');
+
+		this.select.textContent = node.textContent;
+		this.select.setAttribute('data-value', this.value['value']);
+
+		if (send_notify !== false)
+			notify.call(this);
+	};
+
+	var clickOut = function clickOut(e) {
+		if (active.state === 0 ||
+			e.target === active.dropmenu ||
+			e.target === active.select)
+			return;
+
+		active.toggle(false);
+	};
+
+	var createDropDown = function createDropDown(topic, options) {
+
+		var dropdown = document.createElement('div');
+		dropdown.setAttribute('data-topic', topic);
+		dropdown.className = 'ui-dropdown';
+
+		for (var i in options) {
+			var x = document.createElement('div');
+			x.setAttribute('data-value', i);
+			x.textContent = options[i];
+			dropdown.appendChild(x);
+		}
+
+		new DropDown(dropdown);
+
+		return dropdown;
+	};
+
+	var setValue = function setValue(topic, index, send_notify) {
+		if (dropdowns[topic] === undefined ||
+			index &gt;= dropdowns[topic].dropmenu.children.length)
+			return;
+
+		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index], send_notify);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		var index = subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	};
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-dropdown');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new DropDown(elem[i]);
+
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		createDropDown : createDropDown
+	};
+
+})();
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+	'use strict';
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision &gt;= 0 ? precision : 0;
+		this.step = step &lt; 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity &gt; 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value &gt; slider.max) value = slider.max;
+		if (value &lt; slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value, send_notify);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value &gt; 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+/**
+ * UI-SlidersManager
+ */
+
+var SliderManager = (function SliderManager() {
+	'use strict';
+
+	var subscribers = {};
+	var sliders = [];
+
+	function trackMouse(elem, callback, startFunc, endFunc) {
+		startFunc = startFunc || function(e) {};
+		endFunc = endFunc || function(e) {};
+
+		elem.addEventListener('mousedown', function(e) {
+			e.preventDefault();
+			startFunc(e);
+
+			document.addEventListener('mousemove', callback);
+			document.addEventListener('mouseup', function up(e) {
+				document.removeEventListener('mousemove', callback);
+				document.removeEventListener('mouseup', up);
+				endFunc(e);
+			});
+		});
+
+		elem.addEventListener('click', function(e) {
+			e.stopPropagation();
+		});
+	}
+
+	var Slider = function(node) {
+		var topic = node.getAttribute('data-topic');
+		var info = node.getAttribute('data-info');
+		var unit = node.getAttribute('data-unit');
+		var min = node.getAttribute('data-min') | 0;
+		var max = node.getAttribute('data-max') | 0;
+		var step = node.getAttribute('data-step') | 0;
+		var value = node.getAttribute('data-value') | 0;
+		var snap = node.getAttribute('data-snap');
+
+		this.min = min;
+		this.max = max &gt; 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.value = value &lt;= max &amp;&amp; value &gt;= min ? value : (min + max) / 2 | 0;
+		this.snap = snap === "true" ? true : false;
+		this.topic = topic;
+		this.unit = unit;
+
+		var name = document.createElement('div');
+		var slider = document.createElement('div');
+		var pointer = document.createElement('div');
+
+		name.className = 'ui-slider-name';
+		name.textContent = info;
+
+		slider.className = 'ui-slider-slider';
+		pointer.className = 'ui-slider-pointer';
+
+		node.appendChild(name);
+		slider.appendChild(pointer);
+
+		this.pointer = pointer;
+		this.slider = slider;
+		this.node = node;
+
+		this.createSetButton('-', this.decrement.bind(this));
+		node.appendChild(slider);
+		this.createSetButton('+', this.increment.bind(this));
+		this.createInputField();
+
+		new trackMouse(slider, this.updateSlider.bind(this), this.startMove.bind(this));
+		slider.addEventListener('click', function(e) {
+			this.startMove();
+			this.updateSlider(e);
+		}.bind(this));
+
+		sliders[topic] = this;
+		this.setValue(this.value);
+	};
+
+	Slider.prototype.createSetButton = function createSetButton(type, callback) {
+		var button = document.createElement('div');
+		button.className = 'ui-slider-button';
+		button.textContent = type;
+		button.addEventListener("click", callback);
+		this.node.appendChild(button);
+	};
+
+	Slider.prototype.createInputField = function createInputField() {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		this.node.appendChild(input);
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			this.setValue(e.target.value | 0);
+		}.bind(this));
+
+		subscribe(this.topic, function(value) {
+			input.value = value + this.unit;
+		}.bind(this));
+	};
+
+	Slider.prototype.startMove = function startMove(e) {
+		this.sliderX = this.slider.getBoundingClientRect().left;
+	};
+
+	Slider.prototype.updateSlider = function updateSlider(e) {
+		var width = this.slider.clientWidth;
+		var pos = e.clientX - this.sliderX;
+		var delta = this.max - this.min;
+
+		if (pos &lt; 0) pos = 0;
+		if (pos &gt; width) pos = width;
+
+		var value = pos * delta / width | 0;
+		var precision = value % this.step;
+		value = value - precision + this.min;
+
+		if (precision &gt; this.step / 2)
+			value = value + this.step;
+
+		if (this.snap)
+			pos =  (value - this.min) * width / delta;
+
+		this.pointer.style.left = pos + "px";
+		this.value = value;
+		notify.call(this);
+	};
+
+	Slider.prototype.increment = function increment() {
+		this.setValue(this.value + this.step);
+	};
+
+	Slider.prototype.decrement = function decrement() {
+		this.setValue(this.value - this.step);
+	};
+
+	Slider.prototype.setValue = function setValue(value) {
+		if (value &gt; this.max || value &lt; this.min)
+			return;
+
+		var delta = this.max - this.min;
+		var width = this.slider.clientWidth;
+		var pos =  (value - this.min) * width / delta | 0;
+		this.value = value;
+		this.pointer.style.left = pos + "px";
+		notify.call(this);
+	};
+
+	var setValue = function setValue(topic, value) {
+		var slider = sliders[topic];
+		slider.setValue(value);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-slider');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new Slider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	};
+
+})();
+
+window.addEventListener("load", function() {
+	LinearGradientTool.init();
+});
+
+window.addEventListener("load", function() {
+	LinearGradientTool.init();
+});
+
+var LinearGradientTool = (function LinearGradientTool() {
+	'use strict';
+
+	var radian = 180 / Math.PI;
+	var inv_radian = Math.PI / 180;
+	var units = {'%': 1, 'px' : 0};
+
+	/*========== DOM Methods ==========*/
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	function allowDropEvent(e) {
+		e.preventDefault();
+	}
+
+	function createClassElement(tag, className, parent) {
+		var elem = document.createElement(tag);
+		elem.className = className;
+		if (parent) parent.appendChild(elem);
+		return elem;
+	};
+
+	function trackMouse(elem, callback, startFunc, endFunc) {
+		startFunc = startFunc || function(e) {};
+		endFunc = endFunc || function(e) {};
+
+		elem.addEventListener('mousedown', function(e) {
+			e.preventDefault();
+			startFunc(e);
+
+			document.addEventListener('mousemove', callback);
+
+			document.addEventListener('mouseup', function up(e) {
+				document.removeEventListener('mousemove', callback);
+				document.removeEventListener('mouseup', up);
+				endFunc(e);
+			});
+		});
+
+		elem.addEventListener('click', function(e) {
+			e.stopPropagation();
+		});
+	}
+
+	var Color = UIColorPicker.Color;
+	var HSVColor = UIColorPicker.HSVColor;
+
+	var UIComponent = (function UIComponent() {
+
+		function makeResizable(elem, axis, callback, endFunc) {
+			var valueX = 0;
+			var valueY = 0;
+			var action = 0;
+			var callback = typeof callback === "function" ? callback : null;
+
+			endFunc = endFunc || function(e) {};
+
+			var resizeStart = function resizeStart(e) {
+				e.stopPropagation();
+				e.preventDefault();
+				if (e.button !== 0)
+					return;
+
+				valueX = e.clientX - elem.clientWidth;
+				valueY = e.clientY - elem.clientHeight;
+
+				document.body.setAttribute('data-resize', axis);
+				document.addEventListener('mousemove', mouseMove);
+				document.addEventListener('mouseup', resizeEnd);
+			};
+
+			var mouseMove = function mouseMove(e) {
+				if (action &gt;= 0)
+					elem.style.width = e.clientX - valueX + 'px';
+				if (action &lt;= 0)
+					elem.style.height = e.clientY - valueY + 'px';
+				if (callback)
+					callback();
+			};
+
+			var resizeEnd = function resizeEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.body.removeAttribute('data-resize', axis);
+				document.removeEventListener('mousemove', mouseMove);
+				document.removeEventListener('mouseup', resizeEnd);
+				endFunc();
+			};
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			if (axis === 'width') action = 1;
+			else if (axis === 'height') action = -1;
+			else axis = 'both';
+
+			handle.className = 'resize-handle';
+			handle.setAttribute('data-resize', axis);
+			handle.addEventListener('mousedown', resizeStart);
+			elem.appendChild(handle);
+		};
+
+		return {
+			makeResizable : makeResizable
+		};
+	})();
+
+
+	/**
+	 * Gradient Point
+	 */
+	var GradientPoint = function GradientPoint(Axis) {
+		var point = document.createElement('div');
+
+		point.className = 'gradient-point';
+
+		this.position = 0;
+		this.node = point;
+		this.Axis = Axis;
+		this.color = new HSVColor(0, 0, 100);
+		this.CSScolor = this.color.getColor();
+		this.CSSposition = 0;
+		this.PrevPoint = null;
+		this.NextPoint = null;
+
+		this.Axis.num_points++;
+
+		point.addEventListener('click', this.activate.bind(this));
+		trackMouse(point, this.updatePositionM.bind(this), this.startMove.bind(this),
+			this.endMove.bind(this));
+
+		Axis.line.appendChild(point);
+		return this;
+	};
+
+	GradientPoint.prototype.deletePoint = function deletePoint() {
+		this.Axis.line.removeChild(this.node);
+	};
+
+	GradientPoint.prototype.activate = function activate() {
+		if (this.Axis.state === false)
+			return;
+
+		this.Axis.setActivePoint(this);
+		this.node.setAttribute('data-active', 'true');
+		UIColorPicker.setColor('picker', this.color);
+		InputSliderManager.setValue('point-position', this.CSSposition);
+		if (this.Axis.num_points &gt; 2)
+			AxesManager.setDeleteButtonState('active');
+	};
+
+	GradientPoint.prototype.deactivate = function deactivate() {
+		this.node.removeAttribute('data-active');
+	};
+
+	GradientPoint.prototype.startMove = function startMove(e) {
+		this.Axis.updateCenterPointPos();
+		this.node.setAttribute('data-active', 'true');
+		document.body.setAttribute('data-dragging', 'true');
+	};
+
+	GradientPoint.prototype.endMove = function endMove(e) {
+		this.node.removeAttribute('data-active', 'true');
+		document.body.removeAttribute('data-dragging');
+	};
+
+	GradientPoint.prototype.updatePositionM = function updatePositionM(e) {
+		var A = this.Axis;
+		var Qx = e.clientX - A.centerX;
+		var Qy = e.clientY - A.centerY;
+		this.position = (A.Px * Qx + A.Py * Qy) / A.Pmod + A.lsize;
+		this.updateCSSPosition();
+		this.Axis.reorderPoint(this);
+		this.Axis.updateGradient();
+		this.updateSlider();
+	};
+
+	GradientPoint.prototype.setPositionM = function setPositionM(posX, posY) {
+		var A = this.Axis;
+		var Qx = posX - A.centerX;
+		var Qy = posY - A.centerY;
+		this.position = (A.Px * Qx + A.Py * Qy) / A.Pmod + A.lsize;
+		this.updateCSSPosition();
+		this.Axis.reorderPoint(this);
+		this.Axis.updateGradient();
+		this.updateSlider();
+	};
+
+	GradientPoint.prototype.updateAbsolutePosition = function updateAbsolutePosition() {
+		if (this.Axis.unit ='%')
+			this.position = parseFloat(((this.CSSposition / 100) * (2 * this.Axis.lsize)).toFixed(1));;
+	};
+
+	GradientPoint.prototype.setPosition = function setPosition(pos) {
+		this.position = pos;
+		if (this.Axis.unit === '%')
+			this.position = parseFloat(((this.position / 100) * (2 * this.Axis.lsize)).toFixed(1));;
+		this.updateCSSPosition();
+		this.Axis.reorderPoint(this);
+		this.Axis.updateGradient();
+	};
+
+	GradientPoint.prototype.updateSlider = function updateSlider() {
+		if (this.Axis.ActivePoint === this &amp;&amp; this.Axis.state === true)
+			InputSliderManager.setValue('point-position', this.CSSposition, false);
+	};
+
+	GradientPoint.prototype.updateColor = function updateColor(color) {
+		this.color.copy(color);
+		this.CSScolor = color.getColor();
+		this.updateCSSvalue();
+	};
+
+	GradientPoint.prototype.updateCSSPosition = function updateCSSPosition() {
+		this.CSSposition = this.position | 0;
+		if (this.Axis.unit === '%')
+			this.CSSposition = parseFloat((100 * this.position / (2 * this.Axis.lsize)).toFixed(1));
+
+		this.node.style.left = this.CSSposition + this.Axis.unit;
+		this.updateCSSvalue();
+	};
+
+	GradientPoint.prototype.updateCSSvalue = function updateCSSvalue() {
+		this.CSSvalue = this.CSScolor + ' ' + this.CSSposition + this.Axis.unit;
+	};
+
+	GradientPoint.prototype.insertBefore = function insertBefore(point) {
+		this.NextPoint = point;
+		this.PrevPoint = point.PrevPoint;
+		point.PrevPoint = this;
+		if (this.PrevPoint)
+			this.PrevPoint.NextPoint = this;
+	};
+
+	GradientPoint.prototype.insertAfter = function insertAfter(point) {
+		this.NextPoint = point.NextPoint;
+		this.PrevPoint = point;
+		point.NextPoint = this;
+		if (this.NextPoint)
+			this.NextPoint.PrevPoint = this;
+	};
+
+
+	/**
+	 * Gradient Axis
+	 */
+	function GradientAxis(container, id) {
+		var axis = createClassElement('div', 'gradient-axis', null);
+		var line = createClassElement('div', 'gradient-line', axis);
+		var rotate_point = createClassElement('div', 'rotate-point', axis);
+
+		axis.setAttribute('axisID', id);
+
+		var svg = this.createSVGArrow(id);
+		rotate_point.appendChild(svg);
+
+		this.id 	= id;
+		this.axis	= axis;
+		this.unit	= '%';
+		this.line	= line;
+		this.container = container;
+		this.lsize = container.clientWidth / 2;
+		this.FirstPoint = null;
+		this.ActivePoint = null;
+		this.gradient = '';
+		this.num_points = 0;
+
+		this.size = 0;
+		this.angle = 0;
+		this.state = false;
+		this.updateOnResize();
+
+		trackMouse(rotate_point, this.updateAxisAngle.bind(this),
+						this.startRotation.bind(this));
+
+		container.appendChild(axis);
+		line.addEventListener('click', this.placeGradientPoint.bind(this));
+	};
+
+
+	GradientAxis.prototype.createSVGArrow = function createSVGArrow(id) {
+		var xmlns = 'http://www.w3.org/2000/svg';
+		var svg = document.createElementNS(xmlns, 'svg');
+		var path = document.createElementNS(xmlns, 'path');
+
+		svg.setAttribute('class', 'gradient-arrow');
+
+		svg.setAttribute('width', '25');
+		svg.setAttribute('height', '25');
+
+		path.setAttribute('fill', '#CCC');
+		path.setAttribute('d', 'M 25,12.5 L 0,0 L 7.5,12.5 L 0,25');
+		svg.appendChild(path);
+
+		return svg;
+	};
+
+	GradientAxis.prototype.placeGradientPoint = function placeGradientPoint(e) {
+		this.updateCenterPointPos();
+		var point = new GradientPoint(this);
+		point.setPositionM(e.clientX, e.clientY);
+		point.activate();
+		this.attachPoint(point);
+		this.updateGradient();
+	};
+
+	GradientAxis.prototype.newGradientPoint = function newGradientPoint(pos) {
+		var point = new GradientPoint(this);
+		point.setPosition(pos);
+		point.activate();
+		this.attachPoint(point);
+		this.updateGradient();
+	};
+
+	GradientAxis.prototype.attachPoint = function attachPoint(point) {
+
+		// add the first point
+		if (this.FirstPoint === null) {
+			this.FirstPoint = point;
+			return;
+		}
+
+		// insert the point into the list
+		var p = this.FirstPoint;
+		while (p.NextPoint) {
+			if (point.CSSposition &lt; p.CSSposition) {
+				point.insertBefore(p);
+				if (point.PrevPoint === null)
+					this.FirstPoint = point;
+				return;
+			}
+			p = p.NextPoint;
+		};
+
+		// test the last point
+		if (point.CSSposition &lt; p.CSSposition)
+			point.insertBefore(p);
+		else
+			point.insertAfter(p);
+
+		if (point.PrevPoint === null)
+			this.FirstPoint = point;
+
+		return;
+	};
+
+	GradientAxis.prototype.detachPoint = function detachPoint(point) {
+		if (this.FirstPoint === point)
+			this.FirstPoint = point.NextPoint;
+		if (point.PrevPoint)
+			point.PrevPoint.NextPoint = point.NextPoint;
+		if (point.NextPoint)
+			point.NextPoint.PrevPoint = point.PrevPoint;
+		point.NextPoint = null;
+		point.PrevPoint = null;
+	};
+
+	GradientAxis.prototype.deleteActivePoint = function deleteActivePoint() {
+		// return if only 2 points left on the axis
+		if (this.num_points === 2)
+			return;
+
+		if (this.ActivePoint) {
+			this.ActivePoint.deletePoint();
+			this.detachPoint(this.ActivePoint);
+			this.updateGradient();
+			this.num_points--;
+		}
+	};
+
+	GradientAxis.prototype.reorderPoint = function reorderPoint(point) {
+		if (point.NextPoint &amp;&amp; point.NextPoint.CSSposition &gt; point.CSSposition &amp;&amp;
+			point.PrevPoint &amp;&amp; point.PrevPoint.CSSposition &lt; point.CSSposition)
+			return;
+		if (point.NextPoint === point.PrevPoint)
+			return;
+
+		this.detachPoint(point);
+		this.attachPoint(point);
+	};
+
+	GradientAxis.prototype.setActivePoint = function setActivePoint(point) {
+		if (this.ActivePoint)
+			this.ActivePoint.deactivate();
+		this.ActivePoint = point;
+	};
+
+	GradientAxis.prototype.activate = function activate() {
+		this.state = true;
+		this.axis.setAttribute('data-active', this.state);
+		InputSliderManager.setUnit('point-position', this.unit, false);
+		SliderManager.setValue('axis-rotation', this.angle | 0, false);
+		DropDownManager.setValue('axis-unit', units[this.unit], false);
+
+		if (this.ActivePoint)
+			this.ActivePoint.activate();
+	};
+
+	GradientAxis.prototype.deactivate = function deactivate() {
+		this.state = false;
+		this.axis.removeAttribute('data-active', this.state);
+		if (this.ActivePoint)
+			this.ActivePoint.deactivate();
+	};
+
+	GradientAxis.prototype.deleteAxis = function deleteAxis() {
+		this.deactivate();
+		this.container.removeChild(this.axis);
+	};
+
+	GradientAxis.prototype.updatePointColor = function updatePointColor(color) {
+		if (this.ActivePoint)
+			this.ActivePoint.updateColor(color);
+		this.updateGradient();
+	};
+
+	GradientAxis.prototype.updatePointPosition = function updatePointPosition(value) {
+		if (this.ActivePoint)
+			this.ActivePoint.setPosition(value);
+	};
+
+	GradientAxis.prototype.setUnit = function setUnit(unit) {
+		this.unit = unit;
+		this.updateAllPoints();
+		InputSliderManager.setUnit('point-position', unit, false);
+
+		if (this.ActivePoint)
+			this.ActivePoint.updateSlider();
+
+		this.updateGradient();
+	};
+
+	GradientAxis.prototype.updateAllPoints = function updateAllPoints() {
+		var p = this.FirstPoint;
+		while(p) {
+			p.updateCSSPosition();
+			p = p.NextPoint;
+		}
+	};
+
+	/* Axis events */
+	GradientAxis.prototype.startRotation = function startRotation(e) {
+		this.updateCenterPointPos();
+		this.updateAxisAngle(e);
+	};
+
+	GradientAxis.prototype.updateOnResize = function updateOnResize() {
+		this.updateContainer();
+		this.updateCenterPointPos();
+		this.setAxisAngle(this.angle);
+	};
+
+	GradientAxis.prototype.updateCenterPointPos = function updateCenterPointPos() {
+		var pos = this.container.getBoundingClientRect();
+		this.centerX = (pos.left + pos.right) / 2;
+		this.centerY = (pos.top + pos.bottom) / 2;
+	};
+
+	GradientAxis.prototype.updateContainer = function updateContainer() {
+		var W = this.container.clientWidth;
+		var H = this.container.clientHeight;
+
+		var max_size = Math.sqrt(W * W + H * H) + 50;
+
+		this.axis.style.width = max_size + 'px';
+		this.axis.style.left = (W - max_size)/2 - 1 + 'px';
+
+		this.mW = W / 2;
+		this.mH = H / 2;
+	};
+
+	GradientAxis.prototype.updateAxisAngle = function updateAxisAngle(e) {
+
+		var Px = e.clientX - this.centerX;
+		var Py = e.clientY - this.centerY;
+		var deg = -Math.atan2(Py, Px) * radian;
+		var Pmod = Math.sqrt(Px * Px + Py * Py);
+		this.lsize = (this.mW * Math.abs(Px) + this.mH * Math.abs(Py)) / Pmod;
+
+		if (this.state === true)
+			SliderManager.setValue('axis-rotation', deg | 0, false);
+
+		this.angle = deg;
+		this.updateCSS();
+		AxesManager.updateCSSGradient();
+
+		this.Px = Px;
+		this.Py = Py;
+		this.Pmod = Pmod;
+	};
+
+	GradientAxis.prototype.setAxisAngle = function setAxisAngle(deg) {
+		var rad = -deg * inv_radian;
+		var Px = Math.cos(rad);
+		var Py = Math.sin(rad);
+		this.lsize = this.mW * Math.abs(Px) + this.mH * Math.abs(Py);
+
+		this.angle = deg;
+		this.updateCSS();
+		AxesManager.updateCSSGradient();
+
+		this.Px = Px;
+		this.Py = Py;
+		this.Pmod = 1;
+	};
+
+	/* UI Methods - apply CSS */
+
+	GradientAxis.prototype.updateCSS = function updateCSS() {
+		this.line.style.width = 2 * this.lsize + 'px';
+		this.axis.style.transform = 'rotate('+ -this.angle +'deg)';
+		this.axis.style.webkitTransform = 'rotate('+ -this.angle +'deg)';
+	};
+
+	GradientAxis.prototype.updateGradient = function updateGradient() {
+		var p = this.FirstPoint;
+		if (p === null)
+			return;
+
+		this.gradient = p.CSSvalue;
+		p = p.NextPoint;
+		while(p) {
+			this.gradient += ', ' + p.CSSvalue;
+			p = p.NextPoint;
+		};
+		AxesManager.updateCSSGradient();
+	};
+
+	// this is the standard syntax
+	GradientAxis.prototype.getCSSGradient = function getCSSGradient() {
+		return 'linear-gradient('+ (-this.angle + 90 | 0) +'deg, ' + this.gradient + ')';
+	};
+
+	/**
+	 * AxesManager
+	 */
+	var AxesManager = (function AxesManager() {
+
+		var lg_axes = [];
+		var ActiveAxis = null;
+		var ActiveShortcut = null;
+		var axes_menu = null;
+		var gradient_container = null;
+		var add_axis_btn;
+		var delete_axis_btn;
+		var delete_point_btn;
+		var update_output;
+		var dragElem;
+
+		var createStartAxis = function createStartAxis(angle) {
+
+			if (ActiveAxis)
+				ActiveAxis.deactivate();
+
+			var axisID = getNextAxisID();
+			var axis = new GradientAxis(gradient_container, axisID);
+			var color = new HSVColor(210, 90, 90);
+			ActiveAxis = axis;
+
+			axis.activate();
+			axis.setAxisAngle(angle);
+			axis.newGradientPoint(10);
+			axis.updatePointColor(color);
+
+			color.setAlpha(0.5);
+			axis.newGradientPoint(50);
+			axis.updatePointColor(color);
+
+			color.setHue(275);
+			axis.newGradientPoint(50);
+			axis.updatePointColor(color);
+
+			color.setAlpha(1);
+			axis.newGradientPoint(90);
+			axis.updatePointColor(color);
+
+			UIColorPicker.setColor('picker', color);
+			lg_axes.push(axis);
+
+			axis.Shortcut = createAxisShortcut(axisID);
+			axis.activate();
+		};
+
+		var createAxis = function createAxis(angle) {
+
+			if (ActiveAxis)
+				ActiveAxis.deactivate();
+
+			var axisID = getNextAxisID();
+			var axis = new GradientAxis(gradient_container, axisID);
+			var color = new HSVColor(0, 0, 50);
+			ActiveAxis = axis;
+
+			axis.activate();
+			axis.setAxisAngle(angle);
+			axis.newGradientPoint(10);
+			axis.updatePointColor(color);
+
+			color.setValue(90);
+			axis.newGradientPoint(90);
+			axis.updatePointColor(color);
+
+			UIColorPicker.setColor('picker', color);
+			lg_axes.push(axis);
+
+			axis.Shortcut = createAxisShortcut(axisID);
+			axis.activate();
+		};
+
+		var createAxisShortcut = function createAxisShortcut(axisID) {
+			var axis = createClassElement('div', 'axis', axes_menu);
+
+			axis.setAttribute('axisID', axisID);
+			axis.setAttribute('draggable', 'true');
+			axis.style.left = (lg_axes.length - 1) * 60 + 'px';
+
+			axis.addEventListener('click', function() {
+				activateAxisShortcut(axis);
+				var axisID = this.getAttribute('axisID') | 0;
+				activateAxis(axisID);
+			});
+
+			axis.addEventListener('dragstart', function (e) {
+				dragElem = this;
+				e.dataTransfer.setData('axisID', this.getAttribute('axisID'));
+			});
+			axis.addEventListener('dragover', allowDropEvent);
+			axis.addEventListener('drop', function swap(e) {
+				if (dragElem === this)
+					return;
+
+				var from = getOrderID(e.dataTransfer.getData('axisID'));
+				var to = getOrderID(this.getAttribute('axisID'));
+
+				var swap = lg_axes[from];
+				lg_axes[from] = lg_axes[to];
+				lg_axes[to] = swap;
+
+				var left = dragElem.offsetLeft;
+				dragElem.style.left = this.offsetLeft + 'px';
+				this.style.left = left + 'px';
+
+				updateCSSGradient();
+			});
+
+			activateAxisShortcut(axis);
+			return axis;
+		};
+
+		var activateAxisShortcut = function activateAxisShortcut(node) {
+			if (ActiveShortcut)
+				ActiveShortcut.removeAttribute('data-state');
+			node.setAttribute('data-state', 'active');
+			ActiveShortcut = node;
+		};
+
+		var getNextAxisID = function getNextAxisID() {
+			var ids = [];
+			var idx = 0;
+			var len = lg_axes.length;
+
+			for (var i=0; i 1)
+				delete_axis_btn.removeAttribute('data-state');
+		};
+
+		/* Axis functions */
+
+		var updateAxisRotation = function updateAxisRotation(value) {
+			ActiveAxis.setAxisAngle(value);
+		};
+
+		var setAxisUnit = function setAxisUnit(obj) {
+			ActiveAxis.setUnit(obj.value);
+		};
+
+		var setAddAxisButton = function setAddAxisButton() {
+			add_axis_btn = getElemById('add-axis');
+			add_axis_btn.addEventListener('click', function() {
+				if (lg_axes.length === 4)
+					return;
+
+				createAxis(0);
+
+				if (lg_axes.length &gt; 1)
+					delete_axis_btn.removeAttribute('data-state');
+				if (lg_axes.length === 4)
+					this.setAttribute('data-state', 'disabled');
+			});
+		};
+
+		var setDeleteAxisButton = function setDeleteAxisButton() {
+			delete_axis_btn = getElemById('delete-axis');
+			delete_axis_btn.addEventListener('click', function () {
+				if (this.hasAttribute('data-state'))
+					return;
+				if (lg_axes.length === 1)
+					return;
+
+				axes_menu.removeChild(ActiveAxis.Shortcut);
+				ActiveAxis.deleteAxis();
+				lg_axes.splice(getOrderID(ActiveAxis.id), 1);
+
+				ActiveAxis = null;
+				updateCSSGradient();
+
+				var len = lg_axes.length;
+				for (var i=0; i</pre>
+</div>
+
+<p>{{Draft}}</p>
+
+<p>Dieses Werkzeug kann dazu verwendet werden, um benutzerdefinierte CSS3 {{cssxref("linear-gradient")}} Hintergründe zu erstellen.</p>
+
+<p>{{EmbedLiveSample('linear-gradient_generator', '100%', '1000')}}</p>
diff --git a/files/de/web/css/top/index.html b/files/de/web/css/top/index.html
new file mode 100644
index 0000000000..51000ba020
--- /dev/null
+++ b/files/de/web/css/top/index.html
@@ -0,0 +1,83 @@
+---
+title: top
+slug: Web/CSS/Top
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Positionierung
+  - CSS Referenz
+translation_of: Web/CSS/top
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>top</code> Eigenschaft macht eine Angabe zur Position von Elementen und wird daher zusammen mit der <a href="/de/CSS/position" title="de/CSS/position"><code>position</code></a> Eigenschaft notiert, wenn für die Positionsart der Wert <code>absolute</code>, <code>fixed</code> oder <code>relative</code> definiert wurde.</p>
+
+<p>Bei absolut positionierten Elementen (<code>position: absolute</code> oder <code>position: fixed</code>) wird der Abstand zwischen der oberen, äußeren Kante (<em>margin edge</em>) des Elements und der oberen Kante des umschließenden Blocks definiert.</p>
+
+<p>Bei relativ positionierten Elementen (<code>position: relative</code>) wird das Element aus seiner normalen Position im Elementfluss verschoben. Dabei gilt: Wenn die <code>top</code> Eigenschaft definiert wurde, überschreibt diese den Wert der <a href="/De/CSS/Bottom" title="De/CSS/Bottom"><code>bottom</code></a> Eigenschaft. Wenn <code>top</code> den Wert <code>auto</code> besitzt, ist der berechnete Wert für <a href="/De/CSS/Bottom" title="De/CSS/Bottom"><code>bottom</code></a> gleich dem Wert der <code>top</code> Eigenschaft mit umgedrehtem Vorzeichen.<br>
+ Wenn beide Eigenschaften nicht den Wert <code>auto</code> besitzen, wird <a href="/De/CSS/Bottom" title="De/CSS/Bottom"><code>bottom</code></a> ignoriert und auf <code>auto</code> gesetzt.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt>&lt;Länge&gt;</dt>
+ <dd>Eine <a href="/de/CSS/Einheiten#L.c3.a4ngen">Längenangabe</a>, die positive und negative Werte sowie Null erlaubt.</dd>
+ <dt>&lt;Prozentzahl&gt;</dt>
+ <dd>Eine <a href="/de/CSS/Einheiten#Prozent">prozentuale Angabe</a>, die sich auf den umschließenden Block bezieht. Die Prozentangabe kann nur berücksichtigt werden, wenn die Höhe des umschließenden Blocks festgelegt wurde, andernfalls wird die definierte Prozentzahl wie <code>auto</code> behandelt.</dd>
+ <dt>auto</dt>
+ <dd>Standardwert. Die vertikale Position des Elementes wird nicht weiter beeinflusst, es sei denn durch <a href="/De/CSS/Bottom" title="De/CSS/Bottom"><code>bottom</code></a>, <a href="/de/CSS/margin" title="de/CSS/margin"><code>margin</code></a>, <a href="/de/CSS/padding" title="de/CSS/padding"><code>padding</code></a> oder durch die <a href="/de/CSS/height" title="de/CSS/height">Höhe</a>.</dd>
+ <dt>inherit</dt>
+ <dd>Der Wert des Elternelements wird geerbt.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre>element {
+  position: absolute;
+}
+</pre>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'top')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Definiert <code>top</code> als animierbar</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#propdef-top', 'top')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2>
+
+{{Compat("css.properties.top")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/CSS/position" title="de/CSS/position"><code>position</code></a></li>
+ <li><a href="/De/CSS/Bottom" title="De/CSS/Bottom"><code>bottom</code></a>, <a href="/De/CSS/Left" title="De/CSS/Left"><code>left</code></a>, <a href="/De/CSS/Right" title="De/CSS/Right"><code>right</code></a></li>
+</ul>
diff --git a/files/de/web/css/touch-action/index.html b/files/de/web/css/touch-action/index.html
new file mode 100644
index 0000000000..c746406011
--- /dev/null
+++ b/files/de/web/css/touch-action/index.html
@@ -0,0 +1,72 @@
+---
+title: touch-action
+slug: Web/CSS/touch-action
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - Referenz
+  - Web
+translation_of: Web/CSS/touch-action
+---
+<div>{{ CSSRef }}{{SeeCompatTable}}</div>
+
+<h2 id="Summary" name="Summary">Übersicht</h2>
+
+<p>Die CSS-Eigenschaft <code>touch-action</code> spezifiziert, ob das Standardverhalten des Browsers ausgeführt wird oder nicht (z. B. durch Scrollen oder Zoomen).</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h3 id="Values" name="Values">Werte</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Der User-Agent führt das voreingestellte Verhalten für Berührungen aus, wie die Manipulation des Elements durch Scrollen oder Zoomen bei Berührungen, die in dem Element beginnen.</dd>
+ <dt><code>none</code></dt>
+ <dd>Berührungen, die auf dem Element beginnen, lösen nicht das Standardverhalten aus.</dd>
+ <dt><code>pan-x</code></dt>
+ <dd>Der User-Agent reagiert nur auf Berührungen, die das horizontale Scrollen des nächsten scrollbaren Elements auslösen.</dd>
+ <dt><code>pan-y</code></dt>
+ <dd>Der User-Agent reagiert nur auf Berührungen, die das vertikale Scrollen des nächsten scrollbaren Elements auslösen.</dd>
+ <dt><code>manipulation</code></dt>
+ <dd>Der User-Agent reagiert nur auf Berührungen, die dem Scrollen oder dem ununterbrochenen Zoomen dienen.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Beispiel</h2>
+
+<pre class="brush: css">.list {
+  width: 200px;
+  height: 50px;
+  overflow-x: scroll;
+}
+
+.list &gt; .entry {
+  touch-action: pan-x;
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Pointer Events', '#the-touch-action-css-property', 'touch-action')}}</td>
+   <td>{{Spec2('Pointer Events')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompatibilität</h2>
+
+{{compat("css.properties.touch-action")}}
diff --git a/files/de/web/css/transform-origin/index.html b/files/de/web/css/transform-origin/index.html
new file mode 100644
index 0000000000..83f8a833ed
--- /dev/null
+++ b/files/de/web/css/transform-origin/index.html
@@ -0,0 +1,692 @@
+---
+title: transform-origin
+slug: Web/CSS/transform-origin
+tags:
+  - CSS
+  - CSS Transformationen
+  - CSS3
+  - Fortgeschritten
+translation_of: Web/CSS/transform-origin
+---
+<div>{{ CSSRef("CSS Transforms") }}</div>
+
+<p>Die CSS-Eigenschaft <strong><code>transform-origin</code></strong> legt den Ankerpunkt für die Transformationen eines Elements fest.</p>
+
+<pre class="brush: css no-line-numbers">/* One-value syntax */
+transform-origin: 2px<em>;</em>
+transform-origin: bottom;
+
+/* x-offset y-offset */
+transform-origin: 3cm 2px;
+
+/* x-offset-keyword y-offset */
+transform-origin: left 2px;
+
+/* x-offset-keyword y-offset-keyword */
+transform-origin: right top;
+
+/* y-offset-keyword x-offset-keyword */
+transform-origin: top right;
+
+/* x-offset y-offset z-offset */
+transform-origin: 2px 30% 10px;
+
+/* x-offset-keyword y-offset z-offset */
+transform-origin: left 5px -3px;
+
+/* x-offset-keyword y-offset-keyword z-offset */
+transform-origin: right bottom 2cm;
+
+/* y-offset-keyword x-offset-keyword z-offset */
+transform-origin: bottom right 2cm;
+
+/* Global values */
+transform-origin: inherit;
+transform-origin: initial;
+transform-origin: unset;
+</pre>
+
+<div class="hidden" id="transform-origin">
+<pre class="brush: html">&lt;div class="grid"&gt;
+  &lt;div class="col"&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt;
+        rotate(&lt;span class="angle"&gt;-120&lt;/span&gt;deg);
+        &lt;div class="border"&gt;
+          &lt;div class="content"&gt;
+            &lt;div class="center"&gt;&lt;/div&gt;
+            &lt;div class="tr d2"&gt;&lt;/div&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt;
+        rotatex(&lt;span class="angle"&gt;-120&lt;/span&gt;deg);
+        &lt;div class="border"&gt;
+          &lt;div class="content"&gt;
+            &lt;div class="center"&gt;&lt;/div&gt;
+            &lt;div class="tr d3x"&gt;&lt;/div&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt;
+        rotatey(&lt;span class="angle"&gt;-120&lt;/span&gt;deg);
+        &lt;div class="border"&gt;
+          &lt;div class="content"&gt;
+            &lt;div class="center"&gt;&lt;/div&gt;
+            &lt;div class="tr d3y"&gt;&lt;/div&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt;
+        rotatez(&lt;span class="angle"&gt;-120&lt;/span&gt;deg);
+        &lt;div class="border"&gt;
+          &lt;div class="content"&gt;
+            &lt;div class="center"&gt;&lt;/div&gt;
+            &lt;div class="tr d3z"&gt;&lt;/div&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class="cell note"&gt;
+      transform-origin: &lt;input type="text" value="30% top -20px"&gt; (&lt;i&gt;rotate by &lt;input type="number" min="-360" max="360" value="-120"&gt; deg&lt;/i&gt;)
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html,body {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.grid {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  background: #EEE;
+  font: 1em monospace;
+}
+
+.row {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.col {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: column;
+}
+
+.cell {
+  box-sizing: border-box;
+  margin: .5em;
+  padding: .5em;
+  background-color: #FFF;
+  overflow: hidden;
+  text-align: center;
+}
+
+.note {
+  background: #fff3d4;
+  padding: 1em;
+  margin: 0 .5em .5em;
+  font: .8em sans-serif;
+  text-align: center;
+  flex: none;
+}
+
+input[type=number] {
+  width: 3rem;
+}
+
+.border {
+  width : 140px;
+  height: 140px;
+  border: 1px solid #E4F0F5;
+  margin: .5rem auto;
+  overflow: hidden;
+}
+
+.content {
+  width : 50px;
+  height: 50px;
+  margin: 44px;
+  border: 1px dotted hsla(0, 100%, 50%, .5);
+  position: relative;
+}
+
+.center {
+  position: absolute;
+  width : 5px;
+  height: 5px;
+  border-radius: 100%;
+  background: red;
+  top : 50%;
+  left: 50%;
+  transform: translate(-3px, -3px);
+  z-index: 1;
+}
+
+.center:before {
+  content: '';
+  position: absolute;
+  left  : 2px;
+  right : 2px;
+  top   : -6px;
+  bottom: -6px;
+  background: red;
+}
+
+.center:after {
+  content: '';
+  position: absolute;
+  left  : -6px;
+  right : -6px;
+  top   : 2px;
+  bottom: 2px;
+  background: red;
+}
+
+.tr {
+  width : 50px;
+  height: 50px;
+  background: hsla(215, 100%, 50%, 0.3);
+  transition: transform 2s linear;
+}
+
+.tr.d2  { transform: rotate(-120deg);  }
+.tr.d3x { transform: rotatex(-120deg); }
+.tr.d3y { transform: rotatey(-120deg); }
+.tr.d3z { transform: rotatez(-120deg); }</pre>
+
+<pre class="brush: js">window.addEventListener('load', function () {
+  var LENGTH = /^-?\d+(?:em|ex|cap|ch|ic|rem|lh|rlh|vh|vw|vi|vb|vmin|vmax|px|mm|q|cm|in|pt|pc$)/
+  var LENGTH_PERCENT = /^-?\d+(?:em|ex|cap|ch|ic|rem|lh|rlh|vh|vw|vi|vb|vmin|vmax|px|mm|q|cm|in|pt|pc|%$)/
+
+  var KEYX = /^left|center|right$/
+  var KEYY = /^top|center|bottom$/
+  var KEYALL = /^left|center|right|top|bottom$/
+
+  var INPUT = document.querySelector('input[type=text]')
+  var ANGLE = document.querySelector('input[type=number]')
+  var CENTER= Array.from(document.querySelectorAll('.center'))
+  var TR    = Array.from(document.querySelectorAll('.tr'))
+
+  function update () {
+    INPUT.style.boxShadow = 'none'
+    var val  = INPUT.value.trim()
+    var isValid = true
+    var v = val.split(/\s+/)
+
+    isValid = isValid &amp;&amp; (v[2] === undefined || LENGTH.test(v[2]))
+    isValid = isValid &amp;&amp; (v[1] === undefined || LENGTH_PERCENT.test(v[1]) || KEYALL.test(v[1]))
+    isValid = isValid &amp;&amp; (LENGTH_PERCENT.test(v[0]) || KEYALL.test(v[0]))
+
+    if (v.length === 2) {
+      var double_key_words = KEYY.test(v[0]) &amp;&amp; KEYX.test(v[1])
+      var ordinary_value = (LENGTH_PERCENT.test(v[0]) || KEYX.test(v[0])) &amp;&amp; (LENGTH_PERCENT.test(v[1]) || KEYY.test(v[1]))
+
+      isValid = isValid &amp;&amp; (double_key_words || ordinary_value)
+    }
+
+
+    if (!isValid) {
+      val = '50% 50%'
+
+      if (v[0] !== '') {
+        INPUT.style.boxShadow = '0 0 .5em red'
+      }
+    }
+
+    TR.forEach(function (tr, index) {
+      tr.style.transformOrigin = val;
+
+      setTimeout(function () {
+        var pos = window.getComputedStyle(tr).transformOrigin.split(/\s+/);
+
+        CENTER[index].style.left = pos[0]
+        CENTER[index].style.top  = pos[1]
+      }, 0)
+    })
+  }
+
+  function rotate() {
+    var value = Math.min(360, Math.max(-360, Number(ANGLE.value) || 0));
+
+    document.querySelector('.d2').style.transform = 'rotate(' + value + 'deg)'
+    document.querySelector('.d3x').style.transform = 'rotatex(' + value + 'deg)'
+    document.querySelector('.d3y').style.transform = 'rotatey(' + value + 'deg)'
+    document.querySelector('.d3z').style.transform = 'rotatez(' + value + 'deg)'
+    Array.from(document.querySelectorAll('.angle')).forEach(function (node){
+      node.innerText = value
+    })
+  }
+
+  function mouseenter() {
+    document.querySelector('.tr.d2' ).style.transform = 'rotate(0)'
+    document.querySelector('.tr.d3x').style.transform = 'rotatex(0)'
+    document.querySelector('.tr.d3y').style.transform = 'rotatey(0)'
+    document.querySelector('.tr.d3z').style.transform = 'rotatez(0)'
+  }
+
+  INPUT.addEventListener('input', update)
+  ANGLE.addEventListener('input', rotate)
+  update()
+  rotate()
+
+  document.querySelector('.row').addEventListener('mouseenter', mouseenter)
+  document.querySelector('.row').addEventListener('mouseleave', rotate)
+})</pre>
+</div>
+
+<p>{{EmbedLiveSample("transform-origin", "100%", 250, "", "", "example-outcome-frame")}}</p>
+
+<p><span id="result_box" lang="de"><span>Der Ankerpunkt ist somit der Punkt, um den eine Transformation angewendet wird.</span> <span>Zum Beispiel ist der Ankerpunkt der Funktion rotate() der Rotationsmittelpunkt.</span> <span>(Diese Eigenschaft wird angewendet, indem zuerst das Element durch den negierten Wert der Eigenschaft verschoben wird, dann die Transformation des Elements angewendet wird und dann um den Eigenschaftswert zurück verschoben wird.)</span><br>
+ <br>
+ <span>Werte, die nicht explizit definiert sind, werden auf die entsprechenden Standardwerte zurückgesetzt.</span></span></p>
+
+<p>{{Cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p><span id="result_box" lang="de"><span>Die Eigenschaft </span></span> <code>transform-origin</code> <span id="result_box" lang="de"><span>kann mit einem, zwei oder drei Werten angegeben werden.</span></span></p>
+
+<ul>
+ <li>Syntax mit einem Wert:
+  <ul>
+   <li>Der Wert muss als <a href="/de/docs/Web/CSS/length" lang="de">{{cssxref("&lt;length&gt;")}}</a>, <a href="/en-US/docs/Web/CSS/percentage">{{cssxref("&lt;percentage&gt;")}}</a>, oder eines der Schlüsselwörter <code>left</code>, <code>center</code>, und <code>right</code> angegeben werden.</li>
+  </ul>
+ </li>
+ <li>Syntax mit zwei Werten:
+  <ul>
+   <li>Ein Wert muss eine Länge (<a href="/de/docs/Web/CSS/length" lang="de">{{cssxref("&lt;length&gt;")}}</a>), ein Prozentwert (<a href="/en-US/docs/Web/CSS/percentage">{{cssxref("&lt;percentage&gt;")}}</a>) oder eines der Schlüsselwörter <code>left</code>, <code>center</code>, und <code>right</code> sein.</li>
+   <li>Der andere Wert muss als eine Länge (<a href="/de/docs/Web/CSS/length" lang="de">{{cssxref("&lt;length&gt;")}}</a>), ein Prozentwert(<a href="/en-US/docs/Web/CSS/percentage">{{cssxref("&lt;percentage&gt;")}}</a>) oder eines der Schlüsselwörter <code>top</code>, <code>center</code>, und <code>bottom</code> sein.</li>
+  </ul>
+ </li>
+ <li>Syntax mit drei Werten:
+  <ul>
+   <li>Die ersten zwei Werte entsprechen der Syntax mit zwei Werten.</li>
+   <li>Der dritte Wert muss ein {{cssxref("&lt;length&gt;")}}-Wert sein. Er repräsentiert immer den Wert auf der Z-Achse.</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><em>x-offset</em></dt>
+ <dd>Ist als {{cssxref("&lt;length&gt;")}} oder {{cssxref("&lt;percentage&gt;")}} angegebener Versatz auf der X-Achse von der oberden linken Ecke.</dd>
+ <dt><em>offset-keyword</em></dt>
+ <dd>Die Schlüsselwörter <code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code>, und <code>center</code> beschreiben entsprechende Werte.</dd>
+ <dt><em>y-offset</em></dt>
+ <dd>Ist als {{cssxref("&lt;length&gt;")}} oder {{cssxref("&lt;percentage&gt;")}} angegebener Versatz auf der Y-Achse von der oberden linken Ecke.</dd>
+ <dt><em>x-offset-keyword</em></dt>
+ <dd>Die Schlüsselwörter <code>left</code>, <code>right</code>, oder <code>center</code> beschreiben entsprechende Werte für die horizontale Transformation.</dd>
+ <dt><em>y-offset-keyword</em></dt>
+ <dd>Die Schlüsselwörter <code>top</code>, <code>bottom</code>, oder <code>center</code> beschreiben entsprechende Werte für die vertikale Transformation.</dd>
+ <dt><em>z-offset</em></dt>
+ <dd>Als {{cssxref("&lt;length&gt;")}} (und nicht als {{cssxref("&lt;percentage&gt;")}}) beschreibt den Versatz auf der Z-Achse relativ zu 0.</dd>
+</dl>
+
+<p>Die Schlüsselwörte entschprechen folgenden Angaben in {{cssxref("&lt;percentage&gt;")}}:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Schlüsselwort</th>
+   <th scope="col">Wert</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>left</code></td>
+   <td><code>0%</code></td>
+  </tr>
+  <tr>
+   <td><code>center</code></td>
+   <td><code>50%</code></td>
+  </tr>
+  <tr>
+   <td><code>right</code></td>
+   <td><code>100%</code></td>
+  </tr>
+  <tr>
+   <td><code>top</code></td>
+   <td><code>0%</code></td>
+  </tr>
+  <tr>
+   <td><code>bottom</code></td>
+   <td><code>100%</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Quellcode</th>
+   <th>Ausgabe</th>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: none;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_none">
+    <pre class="brush: html">
+&lt;div class="box1"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box1 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: none;
+-webkit-transform: none;
+}
+</pre>
+    </div>
+
+    <p>{{EmbedLiveSample('transform_none', '', '', '', '', 'no-button') }}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: rotate(30deg);</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_rotate_only">
+    <pre class="brush: html">
+&lt;div class="box2"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box2 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: rotate(30deg);
+-webkit-transform: rotate(30deg);
+}
+</pre>
+    </div>
+
+    <p>{{EmbedLiveSample('transform_rotate_only', '', '', '', '', 'no-button') }}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: rotate(30deg);<br>
+     transform-origin: 0 0;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_rotate">
+    <pre class="brush: html">
+&lt;div class="box3"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box3 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform-origin: 0 0;
+-webkit-transform-origin: 0 0;
+transform: rotate(30deg);
+-webkit-transform: rotate(30deg);
+}
+</pre>
+    </div>
+
+    <p>{{EmbedLiveSample('transform_rotate', '', '', '', '', 'no-button') }}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: rotate(30deg);<br>
+     transform-origin: 100% 100%;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_rotate_with_percentage">
+    <pre class="brush: html">
+&lt;div class="box4"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box4 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform-origin: 100% 100%;
+-webkit-transform-origin: 100% 100%;
+transform: rotate(30deg);
+-webkit-transform: rotate(30deg);
+}
+</pre>
+    </div>
+
+    <p>{{EmbedLiveSample('transform_rotate_with_percentage', '', '', '', '', 'no-button') }}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: rotate(30deg);<br>
+     transform-origin: -1em -3em;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_rotate_with_em">
+    <pre class="brush: html">
+&lt;div class="box5"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box5 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform-origin: -1em -3em;
+-webkit-transform-origin: -1em -3em;
+transform: rotate(30deg);
+-webkit-transform: rotate(30deg);
+}
+</pre>
+    </div>
+
+    <p>{{EmbedLiveSample('transform_rotate_with_em', '', '', '', '', 'no-button') }}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: scale(1.9);</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_scale_only">
+    <pre class="brush: html">
+&lt;div class="box6"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box6 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: scale(1.9);
+-webkit-transform: scale(1.9);
+}
+</pre>
+    </div>
+
+    <p>{{EmbedLiveSample('transform_scale_only', '', '', '', '', 'no-button') }}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: scale(1.9);<br>
+     transform-origin: 0 0;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_scale_without_origin">
+    <pre class="brush: html">
+&lt;div class="box7"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box7 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: scale(1.9);
+-webkit-transform: scale(1.9);
+transform-origin: 0 0;
+-webkit-transform-origin: 0 0;
+}
+</pre>
+    </div>
+
+    <p>{{EmbedLiveSample('transform_scale_without_origin', '', '', '', '', 'no-button') }}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: scale(1.9);<br>
+     transform-origin: 100% -30%;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_scale">
+    <pre class="brush: html">
+&lt;div class="box8"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box8 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: scale(1.9);
+-webkit-transform: scale(1.9);
+transform-origin: 100% -30%;
+-webkit-transform-origin: 100% -30%;
+}
+</pre>
+    </div>
+
+    <p>{{EmbedLiveSample('transform_scale', '', '', '', '', 'no-button') }}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: skewX(50deg);<br>
+     transform-origin: 100% -30%;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_skew_x">
+    <pre class="brush: html">
+&lt;div class="box9"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box9 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: skewX(50deg);
+-webkit-transform: skewX(50deg);
+transform-origin: 100% -30%;
+-webkit-transform-origin: 100% -30%;
+}
+</pre>
+    </div>
+
+    <p>{{EmbedLiveSample('transform_skew_x', '', '', '', '', 'no-button') }}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: skewY(50deg);<br>
+     transform-origin: 100% -30%;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_skew_y">
+    <pre class="brush: html">
+&lt;div class="box10"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box10 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: skewY(50deg);
+-webkit-transform: skewY(50deg);
+transform-origin: 100% -30%;
+-webkit-transform-origin: 100% -30%;
+}
+</pre>
+    </div>
+
+    <p>{{EmbedLiveSample('transform_skew_y', '', '', '', '', 'no-button') }}</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spezifikation"><span class="short_text" id="result_box" lang="de"><span>Spezifikation</span></span></h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><span class="short_text" id="result_box" lang="de"><span>Spezifikation</span></span></th>
+   <th scope="col">Status</th>
+   <th scope="col">Notiz</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Transforms', '#transform-origin-property', 'transform-origin') }}</td>
+   <td>{{ Spec2('CSS3 Transforms') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserunterstützung">Browserunterstützung</h2>
+
+
+
+<p>{{Compat("css.properties.transform-origin")}}</p>
+
+<h2 id="Siehe_auch"><span class="short_text" id="result_box" lang="de"><span>Siehe auch</span></span></h2>
+
+<ul>
+ <li><a href="/de/docs/Web/CSS/CSS_Transforms/CSS_Transformationen_verwenden">CSS Transformationen verwenden</a></li>
+</ul>
diff --git a/files/de/web/css/transform/index.html b/files/de/web/css/transform/index.html
new file mode 100644
index 0000000000..3e001247e1
--- /dev/null
+++ b/files/de/web/css/transform/index.html
@@ -0,0 +1,123 @@
+---
+title: transform
+slug: Web/CSS/transform
+tags:
+  - BrauchtBeispiele
+  - BrauchtBrowserKompatibilität
+  - CSS-Eigenschaft
+  - Referenz
+translation_of: Web/CSS/transform
+---
+<p>   {{CSRef}} {{SeheCompatTable}}</p>
+
+<p>Mit der Eigenschaft "CSS übersetzen" können Sie Übersetzungstransformationen einzeln und unabhängig von der Eigenschaft<br>
+ {{CSSxRef ("transform")}} angeben. Dadurch wird die typische Verwendung der Benutzeroberfläche besser abgebildet, und Sie müssen sich nicht die genaue Reihenfolge der Transformationsfunktionen merken, die im Transformationswerte angegeben werden müssen.</p>
+
+<p>Syntax</p>
+
+<p>/ * Schlüsselwortwerte * / translate: none; / * Einzelwerte * / translate: 100px; übersetzen: 50%; / * Zwei Werte * / translate: 100px 200px; übersetzen: 50% 105px; / * Drei Werte * / übersetzen: 50% 105px 5rem;</p>
+
+<p><br>
+ Values</p>
+
+<p>&lt;p&gt; {{HTMLSidebar ("Global_attributes")}} &lt;/p&gt;</p>
+
+<p>  &lt;p&gt; &lt;span class = "seoSummary"&gt; Das &lt;strong&gt; translate &lt;/strong&gt; &lt;a href="/en-US/docs/Web/HTML/Global_attributes"&gt; globale Attribut &lt;/a&gt; ist ein aufgezähltes Attribut, das wird verwendet, um anzugeben, ob die &lt;em&gt; übersetzbaren Attributwerte &lt;/em&gt; eines Elements und die untergeordneten Knoten {{domxref ("Text")}} beim Lokalisieren der Seite übersetzt werden sollen oder ob sie unverändert bleiben sollen. &lt;/span&gt; Es kann folgende Werte annehmen:<br>
+ &lt;/p&gt;</p>
+
+<p>&lt;ul&gt;<br>
+ &lt;li&gt; leere Zeichenfolge oder &lt;code&gt; "yes" &lt;/code&gt;, die angibt, dass das Element übersetzt werden soll, wenn die Seite lokalisiert wird. &lt;/i&gt;<br>
+ &lt;li&gt; &lt;code&gt; "no" &lt;/code&gt; gibt an, dass das Element nicht übersetzt werden darf. &lt;/li&gt;<br>
+   &lt;/ul&gt;</p>
+
+<p>  &lt;p&gt; Obwohl nicht alle Browser dieses Attribut erkennen, wird es von automatischen Übersetzungssystemen wie Google Translate und möglicherweise auch von Tools, die von menschlichen Übersetzern verwendet werden, respektiert. Aus diesem Grund ist es wichtig, dass Webautoren dieses Attribut verwenden, um Inhalte zu markieren, die nicht übersetzt werden sollen. &lt;/P&gt;</p>
+
+<p>  &lt;h2 id = "Specifications"&gt; Spezifikationen &lt;/h2&gt;</p>
+
+<p>  &lt;table class = "standard-table"&gt;<br>
+ &lt;tbody&gt;<br>
+ &lt;tr&gt;<br>
+ &lt;th scope = "col"&gt; Spezifikation &lt;/th&gt;<br>
+ &lt;th scope = "col"&gt; Status &lt;/th&gt;<br>
+ &lt;th scope = "col"&gt; Kommentar &lt;/th&gt;<br>
+ &lt;/tr&gt;<br>
+ &lt;tr&gt;<br>
+ &lt;td&gt; {{SpecName ('HTML WHATWG', "dom.html # attr-translate", "translate")}} &lt;/td&gt;<br>
+ &lt;td&gt; {{Spec2 ('HTML WHATWG')}} &lt;/td&gt;<br>
+ &lt;td&gt; Keine Änderung gegenüber dem letzten Snapshot {{SpecName ('HTML5.1')}} &lt;/td&gt;<br>
+ &lt;/tr&gt;<br>
+ &lt;tr&gt;<br>
+ &lt;td&gt; {{SpecName ('HTML5.1', ​​"dom.html # the-translate-attribute", "translate")}} &lt;/td&gt;<br>
+ &lt;td&gt; {{Spec2 ('HTML5.1')}} &lt;/td&gt;<br>
+ &lt;td&gt; Momentaufnahme von {{SpecName ('HTML WHATWG')}}, ursprüngliche Definition &lt;/td&gt;<br>
+ &lt;/tr&gt;<br>
+ &lt;/tbody&gt;<br>
+   &lt;/table&gt;</p>
+
+<p>  &lt;h2 id = "Browser_compatibility"&gt; Browserkompatibilität &lt;/h2&gt;</p>
+
+<p>  &lt;div class = "hidden"&gt; Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, lesen Sie &lt;a href="https://github.com/mdn/browser-compat-data"&gt; https://github.com/mdn/browser-compat- Daten &lt;/a&gt; und senden Sie uns eine Pull-Anfrage. &lt;/div&gt;</p>
+
+<p>  &lt;p&gt; {{Compat ("html.global_attributes.translate")}} &lt;/p&gt;</p>
+
+<p>  &lt;h2 id = "See_also"&gt; Siehe auch &lt;/h2&gt;</p>
+
+<p>  &lt;ul&gt;<br>
+ &lt;li&gt; Alle &lt;a href="/en-US/docs/Web/HTML/Global_attributes"&gt; globalen Attribute &lt;/a&gt;. &lt;/li&gt;<br>
+ &lt;li&gt; Die Eigenschaft {{domxref ("HTMLElement.translate")}}, die dieses Attribut widerspiegelt. &lt;/li&gt;<br>
+ &lt;li&gt; &lt;a href="https://www.w3.org/International/questions/qa-translate-flag"&gt; Verwenden des HTML-Übersetzungsattributs &lt;/a&gt; &lt;/li&gt;<br>
+   &lt;/ul&gt;</p>
+
+<p><br>
+ Formal syntax</p>
+
+<p>{{CSSSyntax}}</p>
+
+<p>Examples</p>
+
+<p>HTML</p>
+
+<p>&lt;div&gt;<br>
+ &lt;p class="translate"&gt; Translation<br>
+ &lt;/p&gt; &lt;/div&gt;</p>
+
+<p>CSS</p>
+
+<p>* { box-sizing: border-box; } html { font-family: sans-serif; } div { width: 150px; margin: 0 auto; } p { padding: 10px 5px; border: 3px solid black; border-radius: 20px; width: 150px; font-size: 1.2rem; text-align: center; } .translate { transition: translate 1s; } div:hover .translate { translate: 200px 50px; }</p>
+
+<p>Result</p>
+
+<p>{{EmbedLiveSample<br>
+ ('Examples')}}</p>
+
+<p>Specifications</p>
+
+<p>SpecificationStatusComment{{SpecName('CSS Transforms 2', '#individual-transforms', 'individual transforms')}}{{Spec2('CSS Transforms 2')}}Initial definition.</p>
+
+<p>{{CSSInfo}}</p>
+
+<p>Browser-Kompatibilität</p>
+
+<p>Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, lesen Sie bitte https://github.com/mdn/browser-compat-data und senden Sie uns eine Pull-Anfrage.<br>
+ {{Compat("css.properties.translate")}}</p>
+
+<p> Siehe auch</p>
+
+<p>{{cssxref ('scale')}}</p>
+
+<p>{{cssxref ('rotate')}}</p>
+
+<p>{{cssxref ('transform')}}</p>
+
+<p>hinweis: skew ist kein unabhängiger Transformationswert</p>
+
+<p><br>
+ Übersetzung in Deutsch:</p>
+
+<p>Benötigen Sie Hilfe? • Leitfaden für Redakteure • Stilleitfaden</p>
+
+<p>Sie haben einen Entwurf vom: 21.10.2019 16:52:53.</p>
+
+<p>Entwurf automatisch gespeichert: 21.10.2019 16:55:27</p>
+
+<p> </p>
diff --git a/files/de/web/css/transition-property/index.html b/files/de/web/css/transition-property/index.html
new file mode 100644
index 0000000000..02a492097e
--- /dev/null
+++ b/files/de/web/css/transition-property/index.html
@@ -0,0 +1,91 @@
+---
+title: transition-property
+slug: Web/CSS/transition-property
+tags:
+  - CSS
+  - CSS Animationen
+  - CSS Übergänge
+  - Reference
+  - Référence(2)
+translation_of: Web/CSS/transition-property
+---
+<div>{{CSSRef("CSS Transitions")}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die CSS Eigenschaft <code>transition-property</code> wird verwendet, um den <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">Übergangseffekte</a> auf bestimmte CSS Eigenschaften anzuwenden.</p>
+
+<div class="note"><strong>Hinweis:</strong> Die Eigenschaften, die animiert werden können, könnten sich unter Umständen ändern. Eigenschaften, die bis jetzt noch nicht animierbar sind, sollten nicht angegeben werden, da sie vielleicht eines Tages animierbar sein werden, und es dann unerwartete Auswirkungen haben könnte.</div>
+
+<p>Wird eine Kurzform einer CSS Eigenschaft (zum Beispiel {{cssxref("background")}}) angegeben, so werden alle Untereigenschaften (zum Beispiel {{cssxref("background-color")}}), wenn diese animierbar sind, ebenfalls animiert.</p>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css">/* Schlüsselwortwerte */
+transition-property: none;
+transition-property: all;
+transition-property: test_05;
+transition-property: -specific;
+transition-property: sliding-vertically;
+
+transition-property: test1;
+transition-property: test1, animation4;
+transition-property: all, height, all;
+transition-property: all, -moz-specific, sliding;
+
+/* Globale Werte */
+transition-property: inherit;
+transition-property: initial;
+transition-property: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Keine Eigenschaften werden animiert.</dd>
+ <dt><code>all</code></dt>
+ <dd>An allen animierbaren Eigenschaften werden Übergangsanimationen angewant.</dd>
+ <dt><code>IDENT</code></dt>
+ <dd>Zeichenkette, die eine Eigenschaft bezeichnet, an der bei einer Änderung des Wertes der jeweiligen Eigenschaft, eine Übergangsanimation angewant werden soll. Die Groß- und Kleinschreibung des Eingenschaftsnamen wird ignoriert. Ein Eigenschaftsname darf nur alphabetische (<code>a</code> bis <code>z)</code> und numerische (<code>0</code> bis <code>9) Zeichen</code>, sowie Unter- (<code>_</code>) und Bindestriche(<code>-</code>) erhalten. Das erste Zeichen, das kein Bindestrich ist, muss ein alphabetisches Zeichen sein (Es darf keine Zahl am Anfang stehen, auch wenn kein Bindestrich vorangestellt wurde). Der Eigenschaftsname darf ebenfalls nicht mit zwei Bindestrichen beginnen.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Es gibt mehrere Beispiele von CSS Übergängen im <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">CSS Animationen</a> Hauptartikel.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Komentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#transition-property', 'transition-property')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Initiale definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.transition-property")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/Web/Guide/CSS/Using_CSS_transitions">CSS Animationen nutzen</a></li>
+ <li>{{domxref("TransitionEvent")}}</li>
+</ul>
diff --git a/files/de/web/css/transition/index.html b/files/de/web/css/transition/index.html
new file mode 100644
index 0000000000..89a4533cdc
--- /dev/null
+++ b/files/de/web/css/transition/index.html
@@ -0,0 +1,104 @@
+---
+title: transition
+slug: Web/CSS/transition
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Transitions
+  - Referenz
+translation_of: Web/CSS/transition
+---
+<div>{{CSSRef}}</div>
+
+<p>Die <strong><code>transition</code></strong> <a href="/en/CSS" title="CSS">CSS </a>Eigenschaft ist eine <a href="/en-US/docs/Web/CSS/Shorthand_properties">Kurzschreibweise</a> für {{ cssxref("transition-property") }}, {{ cssxref("transition-duration") }}, {{ cssxref("transition-timing-function") }} und {{ cssxref("transition-delay") }}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/transition.html")}}</div>
+
+<p class="hidden">Der Quellcode dieses interaktiven Beispiels wird in einem Github-Repository gepflegt. Falls Sie zu dem Projekt für interaktive Beispiele beitragen möchten, klonen Sie bitte <a class="tgwf_grey" href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und schicken Sie uns einen Pull Request.</p>
+
+<p>Übergänge erlauben Ihnen, den Übergang zwischen zwei Stati eines Elements zu betimmen. Verschiedene Stati können etwa durch das Nutzen von <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes" title="/en-US/docs/CSS/Pseudo-classes">pseudo-classes</a> wie {{cssxref(":hover")}} oder {{cssxref(":active")}} bestimmt oder dynamisch durch JavaScript gesetzt werden.</p>
+
+<h2 id="Syntax"><strong>Syntax</strong></h2>
+
+<pre class="brush:css no-line-numbers">/* Apply to 1 property */
+/* property name | duration */
+transition: margin-right 4s;
+
+/* property name | duration | delay */
+transition: margin-right 4s 1s;
+
+/* property name | duration | timing function */
+transition: margin-right 4s ease-in-out;
+
+/* property name | duration | timing function | delay */
+transition: margin-right 4s ease-in-out 1s;
+
+/* Apply to 2 properties */
+transition: margin-right 4s, color 1s;
+
+/* Apply to all changed properties */
+transition: all 0.5s ease-out;
+
+/* Global values */
+transition: inherit;
+transition: initial;
+transition: unset;
+</pre>
+
+<p>Die <code>transition</code> Eigenschaft wird durch eine einzelne Eigenschaft oder durch mehrere Eigenschaften von transitions ausgezeichnet. Mehrere Eigenschaften müssen durch Kommas getrennt werden.</p>
+
+<p>Jede einzelne transition Eigenschaft beschreibt die transition, die auf eine einzelne Eigenschaft (oder die speziellen Werte <code>all</code> und <code>none</code>) angewandt werden soll. Das bezieht mit ein:</p>
+
+<ul>
+ <li>kein oder ein Wert repräsentiert die Eigenschaft, auf welche die transition angewandt werden soll. Diese Eigenschaft kann eine der folgenden sein:
+  <ul>
+   <li>das Schlüsselwort <code>none</code></li>
+   <li>das Schlüsselwort <code>all</code></li>
+   <li>ein {{cssxref("&lt;custom-ident&gt;")}}, das eine CSS Eigenschaft nennt.</li>
+  </ul>
+ </li>
+ <li>kein oder ein {{cssxref("&lt;single-transition-timing-function&gt;")}} Wert, der die zu benutzende timing function definiert</li>
+ <li>kein, ein oder zwei {{cssxref("&lt;time&gt;")}} Werte. Der erste Wert, der als Zeit geparst werden kann, wird der {{cssxref("transition-duration")}} zugewiesen. Der zweite als Zeit parsbare Wert wird der {{cssxref("transition-delay")}} zugewiesen.</li>
+</ul>
+
+<p>Sehen Sie <a href="/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#When_property_value_lists_are_of_different_lengths" title="en/CSS/CSS transitions#When property value lists are of different lengths">wie Dinge gehandhabt werden</a>, wenn die Liste der Eigenschaftswerte nicht unterschiedliche Länge haben. Die Kurzfassung ist, dass zusätzliche transition Beschreibungen ignoriert werden, wenn sie die Anzahl der Eigenschaften überschreiten.</p>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Es gibt viele weitere Beispiele über CSS transitions in dem Hauptartikel über <a href="/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions" title="en/CSS/CSS transitions">CSS transitions</a>.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#transition-shorthand-property', 'transition') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div class="hidden">Die Kompatibilitätstabelle dieser Seite wird aus strukturierten Daten generiert. Falls Sie Daten beitragen möchten, checken Sie bitte <a class="tgwf_grey" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> aus und senden Sie uns einen Pull Request.</div>
+
+<p>{{Compat("css.properties.transition")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_transitions" title="en/CSS/CSS transitions">Verwendung von CSS transitions</a></li>
+ <li>{{ domxref("TransitionEvent") }}</li>
+</ul>
diff --git a/files/de/web/css/tutorials/index.html b/files/de/web/css/tutorials/index.html
new file mode 100644
index 0000000000..5b65112de4
--- /dev/null
+++ b/files/de/web/css/tutorials/index.html
@@ -0,0 +1,62 @@
+---
+title: CSS Tutorials
+slug: Web/CSS/Tutorials
+tags:
+  - CSS
+  - Guide
+  - Junk
+  - Tutorial
+translation_of: Web/CSS/Tutorials
+---
+<p>CSS zu erlernen mag abschreckend sein. Um dir zu helfen haben wir zahlreiche <strong>Tutorials zu CSS</strong> geschrieben. Ein paar sind an Neuanfänger gerichtet und andere stellen komplexe Funktionen vor, die von erfahreneren Nutzern genutz werden.</p>
+
+<p>Die Seite zählt sie alle auf, mit einer kurzen Beschreibung. Sie sind nach Schwierigkeitsgrad geordnet, sodass du die für dich passenden Tutorials heraussuchen kannst.</p>
+
+<div class="note">
+<p><strong>Editor's note:</strong><strong> </strong>We should look at using "difficulty level" tags on the tutorial/guide pages so that difficulty-based lists can be automatically built.</p>
+</div>
+
+<h2 id="CSS-Tutorials_für_Anfänger">CSS-Tutorials für Anfänger</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/CSS/Getting_Started" title="/en-US/docs/CSS/Getting_Started">Getting started</a></dt>
+ <dd>Dieser Guide richtet sich an <u>komplette Neuanfänger</u>: Hast du noch keine einzige Zeile in CSS geschrieben? — das ist für dich. Es erklärt dir die grundlegenden Konzepte der Sprache und führt dich in das Schreiben von einfachen Stylesheets ein.</dd>
+ <dt><a href="/en-US/docs/CSS/Using_CSS_multiple_backgrounds" title="/en-US/docs/CSS/Using_CSS_multiple_backgrounds">Using multiple backgrounds</a></dt>
+ <dd>Hintergründe sind essentiell für eine hübsche Gestaltung: Mit CSS kannst du gleich mehrere auf jede Box anwenden. Dieses Tutorial erklärt dir, wie sie miteinander interagieren und wie du schöne Effekte erstellen kannst.</dd>
+ <dt><a href="/en-US/docs/CSS/Scaling_background_images" title="/en-US/docs/CSS/Scaling_background_images">Scaling background images</a></dt>
+ <dd>Mit CSS kannst du Bilder skalieren, die als Hintergrund verwendet werden. Dieses Tutorial bringt dir bei, wie du das einfacherweise erreichen kannst.</dd>
+ <dt><a href="/en-US/docs/CSS/Media_queries" title="/en-US/docs/CSS/Media_queries">Media queries</a></dt>
+ <dd>Die Größe der Bildschirme oder die Art von Geräten wie Touchscreens oder gedruckte Seiten kann heutzutage stark variieren. Media queries sind die fundamentalen Bausteine um Websites überall in ihrer besten Form erscheinen zu lassen.</dd>
+ <dt><a href="/en-US/docs/CSS/Understanding_z-index" title="/en-US/docs/CSS/Understanding_z-index">Understanding z-index</a></dt>
+ <dd>Controlling superposition of boxes is a basic feature that is very quickly needed by Web developers. Though not that difficult, it requires a basic knowledge of CSS.</dd>
+</dl>
+
+<h2 id="CSS-Tutorials_für_fortgeschrittene_Anfänger">CSS-Tutorials für fortgeschrittene Anfänger</h2>
+
+<p>Nach dem Release von CSS 2 (Level 1) wurden neue Funktionen zu CSS hinzugefügt. Manche von ihnen sind schick und ziemlich eigenständig. Sie sind einfach zu verwenden für Leute mit einem guten Verständnis der Grundkonzepte.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/CSS/Counters" title="/en-US/docs/CSS/Counters">CSS Counters</a></dt>
+ <dd>Counting items and pages is an easy task in CSS. Learn to use {{cssxref("counter-reset")}}, {{cssxref("counter-increment")}}, {{cssxref("counters", "counters()")}}, and {{cssxref("counter", "counter()")}}.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations" title="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_animations">CSS Animations</a></dt>
+ <dd>CSS3 Animations allow you to define configurations of style, as <a href="/en-US/docs/CSS/@keyframes" title="/en-US/docs/CSS/@keyframes">keyframes</a>, and to transition between them defining an animation.</dd>
+ <dt><a href="/en-US/docs/CSS/Tutorials/Using_CSS_transitions" title="/en-US/docs/CSS/Using_CSS_transitions">CSS Transitions</a></dt>
+ <dd>CSS3 Transitions allow you to define an animation between several styles and to control the way this transition happens.</dd>
+ <dt><a href="/en-US/docs/CSS/Tutorials/Using_CSS_transforms">CSS Transforms</a></dt>
+ <dd>Transforms allow you to change the position of elements by modifying their coordinate space: it allows for translating, rotating, and deforming them in the 2D or 3D spaces.</dd>
+ <dt><a href="/en-US/docs/CSS/Using_CSS_gradients" title="/en-US/docs/CSS/Using_CSS_gradients">CSS Gradients</a></dt>
+ <dd>Gradients (Farbverläufe) sind Bilder die sanft von einer Farbe zur anderen verlaufen. Es gibt mehrere Arten von Farbverläufen die in CSS möglich sind: linear oder radial, wiederholend oder nicht. Dieses Tutorial beschreibt, wie man sie benutzt.</dd>
+</dl>
+
+<h2 id="CSS-Tutorials_für_Fortgeschrittene">CSS-Tutorials für Fortgeschrittene</h2>
+
+<p>CSS hat auch neue Funktionen um anspruchsvolle Layouts zu erstellen. Neben den einfachen Methoden, um so ein Layout zu erstellen, sind sie viel anspruchsvoller für Leute mit zu viel Erfahrung.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="/en-US/docs/CSS/Using_CSS_multi-column_layouts">CSS multi-column layouts</a></dt>
+ <dd>CSS3 introduces a new layout allowing you to easily define multiple columns in an element. Though multi-column text is not that common on devices like screens, this is particularly useful on printed pages, or for indexes.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxes" title="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxes">CSS flexible boxes layouts</a></dt>
+ <dd>This new layout allow you to give boxes flexibility, allowing them to be resized smoothly. It is a powerful way to describe complex interfaces.</dd>
+</dl>
+
+<p> </p>
diff --git a/files/de/web/css/type_selectors/index.html b/files/de/web/css/type_selectors/index.html
new file mode 100644
index 0000000000..9c86b0e07d
--- /dev/null
+++ b/files/de/web/css/type_selectors/index.html
@@ -0,0 +1,78 @@
+---
+title: Typselektoren
+slug: Web/CSS/Type_selectors
+tags:
+  - Anfänger
+  - CSS
+  - CSS Referenz
+  - Selektoren
+translation_of: Web/CSS/Type_selectors
+---
+<div>{{CSSRef("Selectors")}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>CSS Typselektoren matchen Elemente über den Knotennamen. Alleine verwendet markiert ein Typselektor für einen bestimmten Knotennamen daher alle Elemente dieses Typs - d. h. mit diesem Knotennamen - innerhalb des Dokuments.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">element { <em>Stileigenschaften</em> }
+</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">span {
+  background-color: DodgerBlue;
+  color: #ffffff;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;span&gt;Hier ist ein span mit Text.&lt;/span&gt;
+&lt;p&gt;Hier ist ein p mit Text.&lt;/p&gt;
+</pre>
+
+<h3 id="Ergebnis">Ergebnis</h3>
+
+<p>{{EmbedLiveSample('Beispiel', 200, 100)}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#type-selectors', 'Typselektoren')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#type-selectors', 'Typselektoren')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#type-selectors', 'Typselektoren')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#basic-concepts', 'Typselektoren')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.selectors.type")}}
diff --git a/files/de/web/css/unicode-bidi/index.html b/files/de/web/css/unicode-bidi/index.html
new file mode 100644
index 0000000000..b8853c8add
--- /dev/null
+++ b/files/de/web/css/unicode-bidi/index.html
@@ -0,0 +1,102 @@
+---
+title: unicode-bidi
+slug: Web/CSS/unicode-bidi
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - NeedsLiveSample
+  - Reference
+  - Referenz
+translation_of: Web/CSS/unicode-bidi
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+
+<p>Die <strong><code>unicode-bidi</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> Eigenschaft zusammen mit der {{Cssxref("direction")}} Eigenschaft hat damit zu tun wie bidirektionaler Text in einem Dokument behandelt wird. Zum Beispiel, wenn ein Textblock sowohl Text der von links nach recht als auch von rechts nach links läuft enthält, dann entscheidet das System mithilfe eines komplexen Unicode Algorithmus wie es den Text darstellen soll. Diese Eigenschaft überschreibt den Algorithmus und gibt dem Entwickler die Kontrolle über die Textdarstellung.</p>
+
+<p>Die <code>unicode-bidi</code> und{{cssxref("direction")}} Eigenschaften sind die einzigen zwei Werte welche nicht von der {{cssxref("all")}} Kurzform betroffen sind.</p>
+
+<div class="note"><strong>Hinweis:</strong> Die Eigenschaft ist für DTD Designer gedacht. Web Designer und ähnliche sollten es nicht überschreiben.</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Schlüsselwerte */
+unicode-bidi: normal;
+unicode-bidi: embed;
+unicode-bidi: isolate;
+unicode-bidi: bidi-override;
+unicode-bidi: isolate-override;
+unicode-bidi: plaintext;
+
+/* Globale Werte*/
+unicode-bidi: inherit;
+unicode-bidi: initial;
+unicode-bidi: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>The element does not offer a additional level of embedding with respect to the bidirectional algorithm. For inline elements implicit reordering works across element boundaries.</dd>
+ <dt><code>embed</code></dt>
+ <dd>If the element is inline, this value opens an additional level of embedding with respect to the bidirectional algorithm. The direction of this embedding level is given by the {{Cssxref("direction")}} property.</dd>
+ <dt><code>bidi-override</code></dt>
+ <dd>For inline elements this creates an override. For block container elements this creates an override for inline-level descendants not within another block container element. This means that inside the element, reordering is strictly in sequence according to the {{Cssxref("direction")}} property; the implicit part of the bidirectional algorithm is ignored.</dd>
+ <dt><code>isolate</code> {{experimental_inline}}</dt>
+ <dd>This keyword indicates that the element's container directionality should be calculated without considering the content of this element. The element is therefore <em>isolated</em> from its siblings. When applying its bidirectional-resolution algorithm, its container element treats it as one or several <code>U+FFFC Object Replacement Character</code>, i.e. like an image.</dd>
+ <dt><code>isolate-override</code>{{experimental_inline}}</dt>
+ <dd>This keyword applies the isolation behavior of the <code>isolate</code> keyword to the surrounding content and the override behavior of the <code>bidi-override</code> keyword to the inner content.</dd>
+ <dt><code>plaintext</code>{{experimental_inline}}</dt>
+ <dd>This keyword makes the elements directionality calculated without considering its parent bidirectional state or the value of the {{cssxref("direction")}} property. The directionality is calculated using the P2 and P3 rules of the Unicode Bidirectional Algorithm.<br>
+ This value allows to display data which has already formatted using a tool following the Unicode Bidirectional Algorithm.</dd>
+</dl>
+
+<h3 id="Formaler_Syntax">Formaler Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: css">.bible-quote {
+  direction: rtl;
+  unicode-bidi: embed;
+}
+</pre>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Writing Modes', '#unicode-bidi', 'unicode-bidi')}}</td>
+   <td>{{Spec2('CSS3 Writing Modes')}}</td>
+   <td>Added <code>plaintext</code>, <code>isolate</code>, and <code>isolate-override</code> keywords</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#propdef-unicode-bidi', 'unicode-bidi')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.unicode-bidi")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{Cssxref("direction")}}</li>
+</ul>
diff --git a/files/de/web/css/universal_selectors/index.html b/files/de/web/css/universal_selectors/index.html
new file mode 100644
index 0000000000..4253374c81
--- /dev/null
+++ b/files/de/web/css/universal_selectors/index.html
@@ -0,0 +1,80 @@
+---
+title: Universalselektoren
+slug: Web/CSS/Universal_selectors
+tags:
+  - Anfänger
+  - CSS
+  - CSS Referenz
+  - Selektoren
+translation_of: Web/CSS/Universal_selectors
+---
+<div>{{CSSRef("Selectors")}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Ein Sternchen (<code>*</code>) ist der Universalselektor für CSS. Es matcht ein einzelnes Element eines beliebigen Typs. Das Weglassen des Sternchens bei einfachen Selektoren hat denselben Effekt. Zum Beispiel sind <code>*.warning</code> und <code>.warning</code> gleich.</p>
+
+<p>In CSS 3 kann das Sternchen in Kombination mit Namensräumen verwendet werden:</p>
+
+<ul>
+ <li><code>ns|*</code> - matcht alle Elemente im Namensraum ns</li>
+ <li><code>*|*</code> - matcht alle Elemente</li>
+ <li><code>|*</code> - matcht alle Elemente ohne einen angegebenen Namensraum</li>
+</ul>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: css">* [lang^=en] {
+  color: green;
+}
+
+* .warning {
+  color: red;
+}
+
+* #maincontent {
+  border: 1px solid blue;
+}
+</pre>
+
+<pre class="brush: html">&lt;p class="warning"&gt;
+  &lt;span lang="en-us"&gt;Ein grüner &amp;lt;span&amp;gt;&lt;/span&gt; in einem roten Absatz.
+&lt;/p&gt;
+&lt;p id="maincontent" lang="en-gb"&gt;
+  &lt;span class="warning"&gt;Ein roter &amp;lt;span&amp;gt;&lt;/span&gt; in einem grünen Absatz.
+&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample('Beispiel', 250, 100)}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#the-universal-selector', 'Universalselektor')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#universal-selector', 'Universalselektor')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Definiert das Verhalten in Bezug auf Namensräume weist darauf hin, dass das Weglassen des Selektors innerhalb von Pseudoelementen erlaubt ist</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#universal-selector', 'Universalselektor')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.selectors.universal")}}
diff --git a/files/de/web/css/unset/index.html b/files/de/web/css/unset/index.html
new file mode 100644
index 0000000000..0e1ac7bc76
--- /dev/null
+++ b/files/de/web/css/unset/index.html
@@ -0,0 +1,64 @@
+---
+title: unset
+slug: Web/CSS/unset
+tags:
+  - CSS
+  - CSS Cascade
+  - Layout
+  - NeedsLiveSample
+  - Referenz
+  - Schlüsselwort
+  - Web
+translation_of: Web/CSS/unset
+---
+<div>{{CSSRef}}</div>
+
+<p>Das <code>unset</code> <a href="/de/docs/Web/CSS">CSS</a> Schlüsselwort ist eine Kombination der Schlüsselwörter {{cssxref("initial")}} und {{cssxref("inherit")}}. Wie diese beiden anderen CSS-weiten Schlüsselwörter kann es auf alle CSS-Eigenschaften angewendet werden, einschließlich des CSS-Shorthands {{cssxref("all")}}. Dieses Schlüsselwort setzt die Eigenschaft auf ihren geerbten Wert zurück, falls er vom Elternelement geerbt wurde, oder andernfalls auf den ursprünglichen Wert. Mit anderen Worten, es verhält sich im ersten Fall wie das <code>inherit</code> Schlüsselwort und wie das <code>initial</code> Schlüsselwort im zweiten Fall.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: css">/* Kopfzeilen erhalten einen grünen Rand */
+h2 {
+  border: medium solid green;
+}
+
+/* Aber die in der Seitenleiste verwenden den Wert der "color" Eigenschaft (Initialwert) */
+#sidebar h2 {
+  border-color: unset;
+}
+</pre>
+
+<pre class="brush: css">&lt;p style="color: red;"&gt;
+  Dieser Text ist rot.
+  &lt;em style="color:initial"&gt;
+    Dieser Text ist in der Initialfarbe gehalten, d. h. schwarz
+  &lt;/em&gt;
+  Dieser Text ist wieder rot.
+&lt;/p&gt; </pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Cascade', '#unset', 'unset') }}</td>
+   <td>{{ Spec2('CSS3 Cascade') }}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+{{Compat("css.types.global_keywords.unset")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<p>Die CSS-weiten Eigenschaftswerte: {{cssxref("initial")}}, {{cssxref("inherit")}} und {{cssxref("unset")}}.</p>
diff --git a/files/de/web/css/url/index.html b/files/de/web/css/url/index.html
new file mode 100644
index 0000000000..52f9bad5e5
--- /dev/null
+++ b/files/de/web/css/url/index.html
@@ -0,0 +1,84 @@
+---
+title: <url>
+slug: Web/CSS/url
+tags:
+  - CSS
+  - Layout
+  - Referenz
+  - URI
+  - URL
+translation_of: Web/CSS/url
+---
+<div>{{ CssRef() }}</div>
+
+<p>Der <strong><code>&lt;url&gt;</code></strong> <a href="/de/docs/Web/CSS" title="CSS">CSS</a>-<a href="/de/docs/Web/CSS/CSS_Types">Datentyp</a> bezeichnet einen Zeiger auf eine Ressource, z.B. ein Bild oder eine Schriftart. URLs können in zahlreichen CSS Eigenschaften verwendet werden, wie etwa {{ Cssxref("background-image") }}, {{ Cssxref("cursor") }}, und {{ cssxref("list-style") }}.</p>
+
+<div class="note">
+<p><strong>URI oder URL?</strong> Es gibt einen Unterschied zwischen einem <a class="external" href="https://de.wikipedia.org/wiki/Uniform_Resource_Identifier" title="https://de.wikipedia.org/wiki/Uniform_Resource_Identifier">URI</a> und einem <a class="external" href="https://de.wikipedia.org/wiki/Uniform_Resource_Locator" title="https://de.wikipedia.org/wiki/Uniform_Resource_Locator">URL</a>. Ein URI identifiziert einfach eine Ressource. Ein URL ist eine Art von URI und beschreibt den <em>Speicherort</em> einer Ressource. Ein URI kann entweder ein URL oder ein Name (<a class="external" href="https://de.wikipedia.org/wiki/Uniform_Resource_Name" title="https://de.wikipedia.org/wiki/Uniform_Resource_Name">URN</a>) einer Ressource sein.</p>
+
+<p>In CSS1 die funktionale Notation <code>url()</code> beschrieb nur echte URLs. In CSS2.1 die Definition von <code>url()</code>  wurde erweitert, um alle URIs zu beschreiben, ob URL oder URN. Verwirrenderweise bedeutete es, dass <code>url()</code> verwendet werden konnte, um ein <code>&lt;uri&gt;</code> CSS-Datentyp zu erstellen. Diese Änderung war nicht nur ungünstig, sondern auch überflüßig, weil die URNs so oft wie nie in CSS verwendet werden. Um die Verwirrung zu vermindern, kehrte CSS3 zu der engeren Anfangsdefinition. Jetzt bezeichnet <code>url()</code> nur echte <code>&lt;url&gt;</code>s.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>Der <code>&lt;url&gt;</code> Datentyp wird mit der funktionalen Notation <code><a id="The_url()_functional_notation" name="The_url()_functional_notation">url()</a></code> spezifiziert. Es kann sowohl ohne Anführungszeichen als auch mit  einfachen oder doppelten Anführungszeichen geschrieben werden. Relative URLs sind erlaubt und sind relativ zum URL des Stylesheets (nicht zum URL der Webseite).</p>
+
+<pre class="syntaxbox">&lt;a_css_property&gt;: url("http://mysite.example.com/mycursor.png")
+&lt;a_css_property&gt;: url('http://mysite.example.com/mycursor.png')
+&lt;a_css_property&gt;: url(http://mysite.example.com/mycursor.png)
+</pre>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Steuerzeichen über <span id="summary_alias_container"><span id="short_desc_nonedit_display">0x7e sind ab Firefox 15 </span></span><span><span>in URLs ohne Anführungszeichen nicht erlaubt. Sieh</span></span> {{Bug(752230)}} für mehr Details.</p>
+</div>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: css">.topbanner {
+  background: url("topbanner.png") #00D no-repeat fixed;
+}
+</pre>
+
+<pre class="brush: css">ul {
+  list-style: square url(http://www.example.com/redball.png);
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Values', '#urls', '&lt;url&gt;') }}</td>
+   <td>{{ Spec2('CSS3 Values') }}</td>
+   <td>Keine wichtige Änderungen seit CSS2.1.</td>
+  </tr>
+  <tr>
+   <td>{{ Specname('CSS2.1', 'syndata.html#uri', '&lt;uri&gt;') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Keine wichtige Änderungen seit CSS1.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#url', '&lt;url&gt;') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Erste Definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browserkompatibilität</h2>
+
+<p> </p>
+
+<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten erzeugt. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und schicken Sie uns ein Pull-Request.</div>
+
+<p>{{Compat("css.types.url")}}</p>
+
+<p> </p>
diff --git a/files/de/web/css/vererbung/index.html b/files/de/web/css/vererbung/index.html
new file mode 100644
index 0000000000..f5d4a097b2
--- /dev/null
+++ b/files/de/web/css/vererbung/index.html
@@ -0,0 +1,33 @@
+---
+title: Vererbung
+slug: Web/CSS/Vererbung
+tags:
+  - CSS
+  - Guide
+  - Web
+translation_of: Web/CSS/inheritance
+---
+<h2 id="Übersicht">Übersicht</h2>
+<p>Die Übersicht jeder <a href="/de/docs/Web/CSS/CSS_Referenz" title="en/CSS_Reference">CSS Eigenschaft Definition</a> gibt an, ob jene Eigenschaft standardmäßig vererbt ist ("Vererbt: Ja") oder nicht ("Vererbt: Nein"). Dies steuert, was passiert, falls kein Wert für eine Eigenschaft eines Elements angegeben wird.</p>
+<h2 id="Vererbte_Eigenschaften">Vererbte Eigenschaften</h2>
+<p>Falls kein Wert für eine <strong>vererbte Eigenschaft</strong> für ein Element angegeben wurde, erhält das Element den <a href="/de/docs/Web/CSS/Berechneter_Wert" title="en/CSS/computed_value">berechneten Wert</a> dieser Eigenschaft des Elternelements. Nur das Wurzelelement des Dokuments erhält den in der Übersicht angegebenen <a href="/de/docs/Web/CSS/Initialwert" title="en/CSS/initial_value">Initialwert</a>.</p>
+<p>Ein typisches Beispiel für eine vererbte Eigenschaft ist die {{ Cssxref("color") }} Eigenschaft. Für die gegebene Stilregel:</p>
+<pre class="brush: css">p { color: green }</pre>
+<p>und den Markup:</p>
+<pre class="brush: html">&lt;p&gt;Dieser Absatz beinhaltet &lt;em&gt;hervorgehobenen Text&lt;/em&gt;.&lt;/p&gt;</pre>
+<p>werden die Wörter "hervorgehobenen Text" in grün erscheinen, da das <code>em</code> Element den Wert der {{ Cssxref("color") }} Eigenschaft vom <code>p</code> Element erbt. Es erhält <em>nicht</em> den Initialwert der Eigenschaft (welcher die Farbe des Wurzelelements ist, falls die Seite keine Farbe definiert).</p>
+<h2 id="Nicht_vererbte_Eigenschaften">Nicht vererbte Eigenschaften</h2>
+<p>Falls kein Wert für eine <strong>nicht vererbte Eigenschaft</strong> (in Mozilla Code manchmal auch <strong>rücksetzende Eigenschaft</strong> genannt) für ein Element angegeben wurde, erhält das Element den <a href="/de/docs/Web/CSS/Initialwert" title="en/CSS/initial_value">Initialwert</a> dieser Eigenschaft (wie in der Übersicht der Eigenschaft angegeben).</p>
+<p>Ein typisches Beispiel für eine nicht vererbte Eigenschaft ist die {{ Cssxref("border") }} Eigenschaft. Für die gegebene Stilregel:</p>
+<pre class="brush: css"> p { border: medium solid }</pre>
+<p>und den Markup:</p>
+<pre class="brush: html">  &lt;p&gt;Dieser Absatz beinhaltet &lt;em&gt;hervorgehobenen Text&lt;/em&gt;.&lt;/p&gt;</pre>
+<p>werden die Wörter "hervorgehobenen Text" keinen Rahmen haben (da der Initialwert von {{ Cssxref("border-style") }} <code>none</code> ist).</p>
+<h2 id="Hinweise">Hinweise</h2>
+<p>Das {{ Cssxref("inherit") }} Schlüsselwort erlaubt es Autoren, die Vererbung explizit anzugeben. Dies funktioniert sowohl für vererbte als auch nicht vererbte Eigenschaften.</p>
+<h2 id="Siehe_auch">Siehe auch</h2>
+<ul>
+ <li><a href="/de/docs/Web/CSS/CSS_Referenz" title="CSS Reference">CSS Referenz</a></li>
+ <li>{{ CSS_key_concepts() }}</li>
+ <li>{{ Cssxref("inherit") }}</li>
+</ul>
diff --git a/files/de/web/css/vertical-align/index.html b/files/de/web/css/vertical-align/index.html
new file mode 100644
index 0000000000..2a6779dbee
--- /dev/null
+++ b/files/de/web/css/vertical-align/index.html
@@ -0,0 +1,240 @@
+---
+title: vertical-align
+slug: Web/CSS/vertical-align
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/vertical-align
+---
+<div>{{CSSRef}}</div>
+
+<p>Die <strong><code>vertical-align</code></strong> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft bestimmt die vertikale Ausrichtung in inline Elementen oder in Tabellenzellen.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/vertical-align.html")}}</div>
+
+<p>Die vertical-align Eigenschaft kann in zwei Anwendungsfällen genutzt werden:</p>
+
+<ul>
+ <li>Um die Box eines inline-Elements vertikal in der beinhaltenden Box auszurichten. Beispielsweise kann sie eingesetzt werden um die ein {{HTMLElement("img")}} in einer Textzeile vertikal auszurichten:</li>
+</ul>
+
+<div id="vertical-align-inline">
+<pre class="hidden brush: html">&lt;p&gt;
+top:&lt;img style="vertical-align:top" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+middle:&lt;img style="vertical-align:middle" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+bottom:&lt;img style="vertical-align:bottom" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+super:&lt;img style="vertical-align:super" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+sub:&lt;img style="vertical-align:sub" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+&lt;/p&gt;
+&lt;p&gt;
+text-top:&lt;img style="vertical-align:text-top" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+text-bottom:&lt;img  style="vertical-align:text-bottom" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+0.2em:&lt;img style="vertical-align:0.2em" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+-1em:&lt;img  style="vertical-align:-1em" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+20%:&lt;img style="vertical-align:20%" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+-100%:&lt;img  style="vertical-align:-100%" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+&lt;/p&gt;
+
+</pre>
+
+<pre class="hidden brush: css">#* {
+  box-sizing: border-box;
+}
+
+img {
+  margin-right: 0.5em;
+}
+
+p {
+  height: 3em;
+  padding: 0 .5em;
+  font-family: monospace;
+  text-decoration: underline overline;
+  margin-left: auto;
+  margin-right: auto;
+  width: 80%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample("vertical-align-inline", 1200, 120, "", "", "example-outcome-frame")}}</p>
+
+<ul>
+ <li>Um den Inhalt einer Zelle vertikal in einer Tabelle auszurichten:</li>
+</ul>
+
+<div id="vertical-align-table">
+<pre class="hidden brush: html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td style="vertical-align: baseline"&gt;baseline&lt;/td&gt;
+    &lt;td style="vertical-align: top"&gt;top&lt;/td&gt;
+    &lt;td style="vertical-align: middle"&gt;middle&lt;/td&gt;
+    &lt;td style="vertical-align: bottom"&gt;bottom&lt;/td&gt;
+    &lt;td&gt;
+      &lt;p&gt;There is a theory which states that if ever anyone discovers exactly what the Universe is for and why it is here, it will instantly disappear and be replaced by something even more bizarre and inexplicable.&lt;/p&gt;
+&lt;p&gt;There is another theory which states that this has already happened.&lt;/p&gt;
+    &lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+
+</pre>
+
+<pre class="hidden brush: css">table {
+  margin-left: auto;
+  margin-right: auto;
+  width: 80%;
+}
+
+table, th, td {
+  border: 1px solid black;
+}
+
+td {
+  padding: 0.5em;
+  font-family: monospace;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample("vertical-align-table", 1200, 210, "", "", "example-outcome-frame")}}</p>
+
+<p>Beachte, dass sich <code>vertical-align</code> nur auf inline- und Tabellenzellenelemente bezieht: es kann nicht eingesetzt werden um <a href="/de/docs/Web/HTML/Block-level_elemente">Block-level Elemente</a> auszurichten.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p> </p>
+
+<pre class="brush: css no-line-numbers language-css"><code class="language-css"><span class="comment token">/* Schlüsselwörter */</span>
+<span class="property token">vertical-align</span><span class="punctuation token">:</span> baseline<span class="punctuation token">;</span>
+<span class="property token">vertical-align</span><span class="punctuation token">:</span> sub<span class="punctuation token">;</span>
+<span class="property token">vertical-align</span><span class="punctuation token">:</span> super<span class="punctuation token">;</span>
+<span class="property token">vertical-align</span><span class="punctuation token">:</span> text-top<span class="punctuation token">;</span>
+<span class="property token">vertical-align</span><span class="punctuation token">:</span> text-bottom<span class="punctuation token">;</span>
+<span class="property token">vertical-align</span><span class="punctuation token">:</span> middle<span class="punctuation token">;</span>
+<span class="property token">vertical-align</span><span class="punctuation token">:</span> top<span class="punctuation token">;</span>
+<span class="property token">vertical-align</span><span class="punctuation token">:</span> bottom<span class="punctuation token">;</span>
+
+<span class="comment token">/* &lt;length&gt; Werte */</span>
+<span class="property token">vertical-align</span><span class="punctuation token">:</span> <span class="number token">10</span>em<span class="punctuation token">;</span>
+<span class="property token">vertical-align</span><span class="punctuation token">:</span> <span class="number token">4</span>px<span class="punctuation token">;</span>
+
+<span class="comment token">/* &lt;percentage&gt; Werte */</span>
+<span class="property token">vertical-align</span><span class="punctuation token">:</span> <span class="number token">20%</span><span class="punctuation token">;</span>
+
+<span class="comment token">/* Globale Werte */</span>
+<span class="property token">vertical-align</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span>
+<span class="property token">vertical-align</span><span class="punctuation token">:</span> initial<span class="punctuation token">;</span>
+<span class="property token">vertical-align</span><span class="punctuation token">:</span> unset<span class="punctuation token">;</span></code></pre>
+
+<p>Bei Elementen, die keine Grundlinie besitzen, beziehen sich die Angaben auf die untere äußere Kante (<em>bottom margin edge</em>).</p>
+
+<h3 id="Werte_für_inline-Elemente">Werte für inline-Elemente</h3>
+
+<dl>
+ <dt>baseline</dt>
+ <dd>Die Grundlinie des Elements liegt auf der Grundlinie des Elternelements.</dd>
+ <dt>sub</dt>
+ <dd>Das Element ist tiefgestellt.</dd>
+ <dt>super</dt>
+ <dd>Das Element ist hochgestellt.</dd>
+ <dt>text-top</dt>
+ <dd>Die Oberkante des Elements liegt auf der Oberkante der Schrift des Elternelements.</dd>
+ <dt>text-bottom</dt>
+ <dd>Die Unterkante des Elements liegt auf der Unterkante der Schrift des Elternelements.</dd>
+ <dt>middle</dt>
+ <dd>Die Mitte des Elements liegt auf der Mitte der Kleinbuchstaben des Elternelements.</dd>
+ <dt>top</dt>
+ <dd>Die Oberkante des Elements liegt auf der Oberkante des Elternelements.</dd>
+ <dt>bottom</dt>
+ <dd>Die Unterkante des Elements liegt auf der Unterkante des Elternelements.</dd>
+ <dt>&lt;Prozentzahl&gt;</dt>
+ <dd>Die Unterkante des Elements liegt um einen <a href="/de/CSS/Einheiten#Prozent">prozentualen Wert</a> höher als die Unterkante des Elternelements. Die Anteile beziehen sich auf den Wert der <a href="/de/CSS/line-height" title="de/CSS/line-height"><code>line-height</code></a> Eigenschaft.</dd>
+ <dt>&lt;Länge&gt;</dt>
+ <dd>Die Unterkante des Elements liegt um einen <a href="/de/CSS/Einheiten#L.c3.a4ngen">bestimmten Wert</a> höher als die Unterkante des Elternelements. Negative Werte sind erlaubt.</dd>
+ <dt>inherit</dt>
+ <dd>Der Wert des Elternelements wird geerbt.</dd>
+</dl>
+
+<h3 id="Werte_für_Tabellenzellen">Werte für Tabellenzellen</h3>
+
+<dl>
+ <dt>baseline, sub, super, text-top, text-bottom, &lt;Prozentzahl&gt; und &lt;Länge&gt;</dt>
+ <dd>Die Grundlinie des Elements liegt auf der Grundlinie des Elternelements</dd>
+ <dt>top</dt>
+ <dd>Die Oberkante der Textzeile liegt auf der Oberkante der Tabellenzelle.</dd>
+ <dt>middle</dt>
+ <dd>Die vertikale Mitte der Textzeile liegt auf der Mitte der Tabellenzelle.</dd>
+ <dt>bottom</dt>
+ <dd>Die Unterkante der Textzeile liegt auf der Unterkante der Tabellenzelle.</dd>
+ <dt>inherit</dt>
+ <dd>Der Wert des Elternelements wird geerbt.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;Ein &lt;img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /&gt; Bild mit default Ausrichtung.&lt;/div&gt;
+&lt;div&gt;Ein &lt;img class="top" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /&gt; Bild mit text-top Ausrichtung.&lt;/div&gt;
+&lt;div&gt;Ein &lt;img class="bottom" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /&gt; Bild mit text-bottom Ausrichtung.&lt;/div&gt;
+&lt;div&gt;Ein &lt;img class="middle" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /&gt; Bild mit middle Ausrichtung.&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">img.top { vertical-align: text-top; }
+img.bottom { vertical-align: text-bottom; }
+img.middle { vertical-align: middle; }
+</pre>
+
+<h3 id="Ergebnis">Ergebnis</h3>
+
+<p>{{EmbedLiveSample("Beispiel")}}</p>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<p> </p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'vertical-align')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Definiert<code>vertical-align</code> als animierbar.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visudet.html#propdef-vertical-align', 'vertical-align')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Fügt den {{cssxref("&lt;length&gt;")}} Wert hinzu und erlaubt die Anwendung auf Elemente mit <code>table-cell </code>{{cssxref("display")}}-Typ.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#vertical-align', 'vertical-align')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Einführung.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{Compat("css.properties.vertical-align")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{Cssxref("line-height")}}</li>
+ <li>{{Cssxref("text-align")}}</li>
+</ul>
diff --git a/files/de/web/css/visibility/index.html b/files/de/web/css/visibility/index.html
new file mode 100644
index 0000000000..f724ee51bd
--- /dev/null
+++ b/files/de/web/css/visibility/index.html
@@ -0,0 +1,99 @@
+---
+title: visibility
+slug: Web/CSS/visibility
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Positionierung
+  - Layout
+  - NeedsLiveSample
+  - Referenz
+  - Web
+translation_of: Web/CSS/visibility
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>visibility</code> Eigenschaft legt fest, ob ein Element sichtbar ist.</p>
+
+<p>Sie kann dazu verwendet werden, ein Element zu verstecken, aber den Raum, den es eingenommen hätte zu belassen. Sie kann auch Zeilen oder Spalten einer Tabelle verstecken.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css">/* Schlüsselwortwerte */
+visibility: visible;
+visibility: hidden;
+visibility: collapse;
+
+/* Globale Werte */
+visibility: inherit;
+visibility: initial;
+visibility: unset;</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>visible</code></dt>
+ <dd>Standardwert. Das Element ist sichtbar.</dd>
+ <dt><code>hidden</code></dt>
+ <dd>Das Element ist unsichtbar (komplett transparent), es beeinflusst jedoch immernoch das Layout. Kindelemente mit <code>visibility:visible</code> sind sichtbar (funktioniert nicht im IE bis Version 7).</dd>
+ <dt><code>collapse</code></dt>
+ <dd>Bei Tabellenzeilen, Spalten und Zeilengruppen wird/werden die Spalte(n) bzw. Zeile(n) entfernt und der Platz, den sie eingenommen hätten, wird entfernt (als ob <code>{{cssxref("display")}}: none;</code> für die Zeile/Spalte der Tabelle angegeben worden wäre). Jedoch wird die Größe der anderen Zeilen und Spalten immer noch so berechnet, als ob die zusammengefallene(n) Zeile(n)/Spalte(n) da wären. Die Funktion ist zum schnellen Entfernen von Tabellenspalten/-zeilen gedacht ohne die Breiten und Höhen jedes Teils der Tabelle neuberechnen zu müssen. Für XUL-Elemente ist die berechnete Größe des Elements immer 0, unabhängig von anderen Styles, die normalerweise die Größe beeinflussen würden. Jedoch werden Außenabstände immer noch berücksichtigt. Bei anderen Elementen ist <code>collapse</code> gleichbedeutend zu <code>hidden</code>.</dd>
+</dl>
+
+<h3 id="Interpolation">Interpolation</h3>
+
+<p>Sichtbarkeitswerte sind interpolierbar zwischen <em>sichtbar</em> und <em>nicht sichtbar</em>. Einer der Start- oder Endwerte muss daher <code>visible</code> sein, damit eine Interpolation stattfinden kann. Falls einer der Werte <code>visible</code> ist, wird er in einem einzelnen Schritt interpoliert, wobei Werte der Timingfunktion zwischen <code>0</code> und <code>1</code> auf <code>visible</code> und andere Werte der Timingfunktion (welche nur am Start/Ende des Übergangs oder als das Ergebnis aus <code>cubic-bezier()</code> Funktionen mit y-Werten außerhalb von [0, 1]) abgebildet werden.</p>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: css">p        { visibility: hidden; }    /* Absätze sind unsichtbar */
+p.showme { visibility: visible; }   /* Absätze der Klasse "showme" sind sichtbar */
+tr.col   { visibility: collapse; }  /* Tabellenzeilen mit der Klasse "col" fallen zusammen. */
+</pre>
+
+<h3 id="Hinweise">Hinweise</h3>
+
+<p>Die Unterstützung von <code>visibility:collapse</code> fehlt oder ist teilweise fehlerhaft in manchen modernen Browsern. In einigen Fällen wird es bei Elementen mit Ausnahme von Tabellenzeilen und -spalten nicht korrekt interpretiert.</p>
+
+<p><code>visibility:collapse</code> kann die Darstellung einer Tabelle ändern, falls die Tabelle verschachtelte Tabellen in den zusammengefallenen Zellen beinhaltet, sofern <code>visibility:visible</code> explizit bei den Tabellen angegeben ist.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Box', '#the-visibility-property', 'visibility')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>Keine Änderungen</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'visibility')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Definiert <code>visibility</code> als animierbar.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visufx.html#visibility', 'visibility')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+{{Compat("css.properties.visibility")}}
diff --git a/files/de/web/css/webkit_extensions/index.html b/files/de/web/css/webkit_extensions/index.html
new file mode 100644
index 0000000000..f6f60969cb
--- /dev/null
+++ b/files/de/web/css/webkit_extensions/index.html
@@ -0,0 +1,271 @@
+---
+title: WebKit extensions
+slug: Web/CSS/WebKit_Extensions
+translation_of: Web/CSS/WebKit_Extensions
+---
+<p>{{ CSSRef() }}</p>
+<p>WebKit unterstützt eine Reihe von <a href="/de/CSS" title="en/CSS">CSS</a> Erweiterungen, welche mit dem Präfix<code> -webkit</code> versehen sind. Alle Erweiterungen mit dem Präfix <code>-webkit</code> funktionieren auch mit dem Präfix <code>-apple</code>.</p>
+<p>Einige dieser Eigenschaften sind für eine Aufnahme in die CSS Spezifikation vorgeschlagen. Es kann allerdings Abweichungen von der im Standard definierten Eigenschaft und der durch <code>-webkit-</code> eingeführten Eigenschaften geben.</p>
+<h2 id="Standardisierte_Eigenschaften_mit_Präfix">Standardisierte Eigenschaften mit Präfix</h2>
+<div style="-moz-column-width: 20em; -webkit-columns: 20em; columns: 20em;">
+ <span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">A</span>
+ <ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
+  <li>{{ Cssxref("-webkit-animation") }}</li>
+  <li>{{ Cssxref("-webkit-animation-delay") }}</li>
+  <li>{{ Cssxref("-webkit-animation-direction") }}</li>
+  <li>{{ Cssxref("-webkit-animation-duration") }}</li>
+  <li>{{ Cssxref("-webkit-animation-fill-mode") }}</li>
+  <li>{{ Cssxref("-webkit-animation-iteration-count") }}</li>
+  <li>{{ Cssxref("-webkit-animation-name") }}</li>
+  <li>{{ Cssxref("-webkit-animation-play-state") }}</li>
+  <li>{{ Cssxref("-webkit-animation-timing-function") }}</li>
+  <li>{{ Cssxref("-webkit-appearance") }}</li>
+ </ul>
+ <span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">B</span>
+ <ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
+  <li>{{ Cssxref("-webkit-backface-visibility") }}</li>
+  <li>{{ Cssxref("-webkit-border-image") }}</li>
+ </ul>
+ <span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">C D E</span>
+ <ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
+  <li>{{ Cssxref("-webkit-column-count") }}</li>
+  <li>{{ Cssxref("-webkit-column-gap") }}</li>
+  <li>{{ Cssxref("-webkit-column-width") }}</li>
+  <li>{{ Cssxref("-webkit-column-rule") }}</li>
+  <li>{{ Cssxref("-webkit-column-rule-width") }}</li>
+  <li>{{ Cssxref("-webkit-column-rule-style") }}</li>
+  <li>{{ Cssxref("-webkit-column-rule-color") }}</li>
+  <li>{{ Cssxref("-webkit-columns") }}</li>
+  <li>{{ Cssxref("-webkit-column-span") }}</li>
+ </ul>
+ <span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">F</span><br>
+ <ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
+  <li>{{ Cssxref("-webkit-font-feature-settings") }}</li>
+  <li>{{ Cssxref("-webkit-font-kerning") }}</li>
+  <li>{{ Cssxref("-webkit-font-size-delta") }}</li>
+  <li>{{ Cssxref("-webkit-font-variant-ligatures") }}</li>
+ </ul>
+ <span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">G</span><br>
+ <ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
+  <li>{{ Cssxref("-webkit-grid-column") }}</li>
+  <li>{{ Cssxref("-webkit-grid-columns") }}</li>
+  <li>{{ Cssxref("-webkit-grid-row") }}</li>
+  <li>{{ Cssxref("-webkit-grid-rows") }}</li>
+ </ul>
+ <span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">H</span><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">—O</span><br>
+ <ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
+  <li>{{ Cssxref("-webkit-hyphens") }}</li>
+ </ul>
+ <span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">P</span>
+ <ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
+  <li>{{ Cssxref("-webkit-perspective") }}</li>
+  <li>{{ Cssxref("-webkit-perspective-origin") }}</li>
+ </ul>
+ <p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em; line-height: 1.572;">Q—Z</span></p>
+ <ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
+  <li>{{ cssxref("-webkit-region-overflow") }}</li>
+  <li>{{ Cssxref("-webkit-transform") }}</li>
+  <li>{{ Cssxref("-webkit-transform-origin") }}</li>
+  <li>{{ Cssxref("-webkit-transform-style") }}</li>
+  <li>{{ cssxref("-webkit-transition") }}</li>
+  <li>{{ cssxref("-webkit-transition-delay") }}</li>
+  <li>{{ cssxref("-webkit-transition-duration") }}</li>
+  <li>{{ cssxref("-webkit-transition-property") }}</li>
+  <li>{{ cssxref("-webkit-transition-timing-function") }}</li>
+  <li>{{ cssxref("-epub-word-break") }}</li>
+  <li>{{ cssxref("-epub-writing-mode") }}</li>
+ </ul>
+</div>
+<h2 id="Eigenschaften_deren_Präfix_entfernt_wurde">Eigenschaften, deren Präfix entfernt wurde</h2>
+<div class="warning">
+ <p>Diese Eigenschaften sollten nur noch als Fallbacks genutzt werden.</p>
+</div>
+<p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">A B</span></p>
+<ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
+ <li>{{ Cssxref("-webkit-background-clip") }}</li>
+ <li>{{ Cssxref("-webkit-background-origin") }}</li>
+ <li>{{ Cssxref("-webkit-background-size") }}</li>
+ <li>{{ Cssxref("-webkit-border-bottom-left-radius") }}</li>
+ <li>{{ Cssxref("-webkit-border-bottom-right-radius") }}</li>
+ <li>{{ Cssxref("-webkit-border-radius") }}</li>
+ <li>{{ Cssxref("-webkit-border-top-left-radius") }}</li>
+ <li>{{ Cssxref("-webkit-border-top-right-radius") }}</li>
+ <li>{{ Cssxref("-webkit-box-sizing") }}</li>
+ <li>{{ Cssxref("-epub-caption-side") }}</li>
+ <li>{{ Cssxref("-webkit-opacity") }}</li>
+ <li>{{ Cssxref("-epub-text-transform") }}</li>
+</ul>
+<h2 id="Unstandardisierte_Eigenschaften_mit_Präfix">Unstandardisierte Eigenschaften mit Präfix</h2>
+<div class="warning">
+ <p>Diese Eigenschaften sind nicht für den Einsatz auf gebräuchlichen Webseiten gedacht.</p>
+</div>
+<div style="-moz-column-width: 20em; -webkit-columns: 20em; columns: 20em;">
+ <p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">A</span></p>
+ <ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
+  <li>{{ Cssxref("-webkit-aspect-ratio") }}</li>
+  <li><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">B</span></li>
+  <li>{{ Cssxref("-webkit-background-composite") }}</li>
+  <li>{{ Cssxref("background-origin-x") }} (unprefixed!)</li>
+  <li>{{ Cssxref("background-origin-y") }} (unprefixed!)</li>
+  <li>{{ Cssxref("-webkit-border-after") }}</li>
+  <li>{{ Cssxref("-webkit-border-after-color") }}</li>
+  <li>{{ Cssxref("-webkit-border-after-style") }}</li>
+  <li>{{ Cssxref("-webkit-border-after-width") }}</li>
+  <li>{{ Cssxref("-webkit-border-before") }}</li>
+  <li>{{ Cssxref("-webkit-border-before-color") }}</li>
+  <li>{{ Cssxref("-webkit-border-before-style") }}</li>
+  <li>{{ Cssxref("-webkit-border-before-width") }}</li>
+  <li>{{ Cssxref("-webkit-border-end") }}</li>
+  <li>{{ Cssxref("-webkit-border-end-color") }}</li>
+  <li>{{ Cssxref("-webkit-border-end-style") }}</li>
+  <li>{{ Cssxref("-webkit-border-end-width") }}</li>
+  <li>{{ Cssxref("-webkit-border-fit") }}</li>
+  <li>{{ Cssxref("-webkit-border-horizontal-spacing") }}</li>
+  <li>{{ Cssxref("-webkit-border-start") }}</li>
+  <li>{{ Cssxref("-webkit-border-start-color") }}</li>
+  <li>{{ Cssxref("-webkit-border-start-style") }}</li>
+  <li>{{ Cssxref("-webkit-border-start-width") }}{{ Cssxref("-webkit-border-vertical-spacing") }}</li>
+  <li>{{ Cssxref("-webkit-box-align") }}</li>
+  <li>{{ Cssxref("-webkit-box-direction") }}</li>
+  <li>{{ Cssxref("-webkit-box-flex") }}</li>
+  <li>{{ Cssxref("-webkit-box-flex-group") }}</li>
+  <li>{{ Cssxref("-webkit-box-lines") }}</li>
+  <li>{{ Cssxref("-webkit-box-ordinal-groups") }}</li>
+  <li>{{ Cssxref("-webkit-box-orient") }}</li>
+  <li>{{ cssxref("-webkit-box-pack") }}</li>
+  <li>{{ Cssxref("-webkit-box-reflect") }}</li>
+  <li>{{ Cssxref("-webkit-box-shadow") }}</li>
+ </ul>
+ <p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">C</span></p>
+ <ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
+  <li>{{ Cssxref("-webkit-column-axis") }}</li>
+  <li>{{ Cssxref("-webkit-column-break-after") }}</li>
+  <li>{{ Cssxref("-webkit-column-break-before") }}</li>
+  <li>{{ Cssxref("-webkit-column-break-inside") }}</li>
+  <li><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">D</span></li>
+  <li>{{ Cssxref("-webkit-dashboard-region") }}</li>
+  <li><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">E—G</span></li>
+  <li>{{ Cssxref("-webkit-filter") }}</li>
+  <li>{{ Cssxref("-webkit-font-smoothing") }}</li>
+ </ul>
+ <p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">H</span></p>
+ <ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
+  <li>{{ Cssxref("-webkit-highlight") }}</li>
+  <li>{{ Cssxref("-webkit-hyphenate-charset") }}</li>
+  <li>{{ Cssxref("-webkit-hyphenate-limit-after") }}</li>
+  <li>{{ Cssxref("-webkit-hyphenate-limit-before") }}</li>
+  <li>{{ Cssxref("-webkit-hyphenate-limit-lines") }}</li>
+ </ul>
+ <p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">I—L</span></p>
+ <ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
+  <li>{{ Cssxref("-webkit-line-align") }}</li>
+  <li>{{ Cssxref("-webkit-line-box-contain") }}</li>
+  <li>{{ Cssxref("-webkit-line-break") }}</li>
+  <li>{{ Cssxref("-webkit-line-clamp") }}</li>
+  <li>{{ Cssxref("-webkit-line-grid") }}</li>
+  <li>{{ Cssxref("-webkit-line-snap") }}</li>
+  <li>{{ Cssxref("-webkit-locale") }}</li>
+  <li>{{ Cssxref("-webkit-logical-height") }}</li>
+  <li>{{ Cssxref("-webkit-logical-width") }}</li>
+ </ul>
+ <p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">M</span></p>
+ <ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
+  <li>{{ Cssxref("-webkit-margin-after") }}</li>
+  <li>{{ Cssxref("-webkit-margin-after-collapse") }}</li>
+  <li>{{ Cssxref("-webkit-margin-before") }}</li>
+  <li>{{ Cssxref("-webkit-margin-before-collapse") }}</li>
+  <li>{{ Cssxref("-webkit-margin-bottom-collapse") }}</li>
+  <li>{{ Cssxref("-webkit-margin-collapse") }}</li>
+  <li>{{ Cssxref("-webkit-margin-end") }}</li>
+  <li>{{ Cssxref("-webkit-margin-start") }}</li>
+  <li>{{ Cssxref("-webkit-margin-top-collapse") }}</li>
+  <li>{{ Cssxref("-webkit-marquee") }}</li>
+  <li>{{ Cssxref("-webkit-marquee-direction") }}</li>
+  <li>{{ Cssxref("-webkit-marquee-increment") }}</li>
+  <li>{{ Cssxref("-webkit-marquee-repetition") }}</li>
+  <li>{{ Cssxref("-webkit-marquee-speed") }}</li>
+  <li>{{ Cssxref("-webkit-marquee-style") }}</li>
+  <li>{{ Cssxref("-webkit-mask") }}</li>
+  <li>{{ Cssxref("-webkit-mask-attachment") }}</li>
+  <li>{{ Cssxref("-webkit-mask-box-image") }}</li>
+  <li>{{ Cssxref("-webkit-mask-box-image-outset") }}</li>
+  <li>{{ Cssxref("-webkit-mask-box-image-repeat") }}</li>
+  <li>{{ Cssxref("-webkit-mask-box-image-slice") }}</li>
+  <li>{{ Cssxref("-webkit-mask-boximage-source") }}</li>
+  <li>{{ Cssxref("-webkit-mask-box-image-width") }}</li>
+  <li>{{ Cssxref("-webkit-mask-clip") }}</li>
+  <li>{{ Cssxref("-webkit-mask-composite") }}</li>
+  <li>{{ Cssxref("-webkit-mask-image") }}</li>
+  <li>{{ Cssxref("-webkit-mask-origin") }}</li>
+  <li>{{ Cssxref("-webkit-mask-position") }}</li>
+  <li>{{ Cssxref("-webkit-mask-position-x") }}</li>
+  <li>{{ Cssxref("-webkit-mask-position-y") }}</li>
+  <li>{{ Cssxref("-webkit-mask-repeat") }}</li>
+  <li>{{ Cssxref("-webkit-mask-repeat-x") }}</li>
+  <li>{{ Cssxref("-webkit-mask-repeat-y") }}</li>
+  <li>{{ Cssxref("-webkit-mask-size") }}</li>
+  <li>{{ Cssxref("-webkit-match-nearest-mail-blockquote-color") }}</li>
+  <li>{{ Cssxref("-webkit-max-logical-height") }}</li>
+  <li>{{ Cssxref("-webkit-max-logical-width") }}</li>
+  <li>{{ Cssxref("-webkit-min-logical-height") }}</li>
+  <li>{{ Cssxref("-webkit-min-logical-width") }}</li>
+ </ul>
+ <p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">N</span></p>
+ <ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
+  <li>{{ Cssxref("-webkit-nbsp-mode") }}</li>
+ </ul>
+ <p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">O</span></p>
+ <ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
+  <li>{{ cssxref("-webkit-overflow-scrolling") }}</li>
+ </ul>
+ <p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">P Q R</span></p>
+ <ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
+  <li>{{ Cssxref("-webkit-padding-after") }}</li>
+  <li>{{ Cssxref("-webkit-padding-before") }}</li>
+  <li>{{ Cssxref("-webkit-padding-end") }}</li>
+  <li>{{ Cssxref("-webkit-padding-start") }}</li>
+  <li>{{ Cssxref("-webkit-perspective-origin-x") }}</li>
+  <li>{{ Cssxref("-webkit-perspective-origin-y") }}</li>
+  <li>{{ Cssxref("-webkit-print-color-adjust") }}<br>
+   <p> </p>
+  </li>
+  <li>
+   <p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">R</span></p>
+  </li>
+  <li>{{ Cssxref("-webkit-region-break-after") }}</li>
+  <li>{{ Cssxref("-webkit-region-break-before") }}</li>
+  <li>{{ Cssxref("-webkit-region-break-inside") }}</li>
+  <li>{{ Cssxref("-webkit-rtl-ordering") }}</li>
+ </ul>
+ <p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">S</span></p>
+ <ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
+  <li>{{ Cssxref("-webkit-shape-insided") }}</li>
+  <li>{{ Cssxref("-webkit-shape-outside") }}</li>
+  <li>{{ Cssxref("-webkit-svg-shadow") }}</li>
+ </ul>
+ <p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">T U V</span></p>
+ <ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
+  <li>{{ Cssxref("-webkit-tap-highlight-color") }}</li>
+  <li>{{ Cssxref("-epub-text-combine") }}</li>
+  <li>{{ Cssxref("-webkit-text-decorations-in-effect") }}</li>
+  <li>{{ Cssxref("-epub-text-emphasis") }}</li>
+  <li>{{ Cssxref("-epub-text-emphasis-color") }}</li>
+  <li>{{ Cssxref("-webkit-text-emphasis-position") }}</li>
+  <li>{{ Cssxref("-epub-text-emphasis-style") }}</li>
+  <li>{{ Cssxref("-webkit-text-fill-color") }}</li>
+  <li>{{ Cssxref("-epub-text-orientation") }}</li>
+  <li>{{ Cssxref("-webkit-text-security") }}</li>
+  <li>{{ Cssxref("-webkit-text-size-adjust") }}</li>
+  <li>{{ Cssxref("-webkit-text-stroke") }}</li>
+  <li>{{ Cssxref("-webkit-text-stroke-color") }}</li>
+  <li>{{ Cssxref("-webkit-text-stroke-width") }}</li>
+  <li>{{ Cssxref("-webkit-touch-callout") }}</li>
+ </ul>
+ <p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em;">W—Z</span></p>
+ <ul style="margin-left: 0; padding-left: 0; list-style-type: none;">
+ </ul>
+</div>
+<h2 id="Siehe_auch">Siehe auch</h2>
+<ul>
+ <li><a href="https://trac.webkit.org/wiki/Styling%20Form%20Controls" title="https://trac.webkit.org/wiki/Styling Form Controls">Styling Form Controls on the WebKit Trac</a></li>
+</ul>
diff --git a/files/de/web/css/wertdefinitionssyntax/index.html b/files/de/web/css/wertdefinitionssyntax/index.html
new file mode 100644
index 0000000000..da49131901
--- /dev/null
+++ b/files/de/web/css/wertdefinitionssyntax/index.html
@@ -0,0 +1,405 @@
+---
+title: Wertdefinitionssyntax
+slug: Web/CSS/Wertdefinitionssyntax
+tags:
+  - CSS
+  - Referenz
+translation_of: Web/CSS/Value_definition_syntax
+---
+<p>{{ CSSRef() }}</p>
+
+<p><span class="seoSummary">Eine formale Grammatik, die <strong>CSS Wertdefinitionssyntax</strong>, wird für die Definition einer Menge von gültigen Werten für eine CSS Eigenschaft oder Funktion verwendet.</span> Zusätzlich zu dieser Syntax kann die Menge an gültigen Werten durch semantische Beschränkungen (wie z. B. dass eine Zahl positiv sein muss) weiter eingegrenzt werden.</p>
+
+<p>Die Definitionssyntax beschreibt, welche Werte erlaubt sind und die Interaktionen zwischen ihnen. Eine Komponente kann ein <em>Schlüsselwort</em> sein, einige Zeichen, die als <em>Literal</em> interpretiert werden, oder ein Wert eines vorhandenen CSS Datentyps einer anderen CSS Eigenschaft.</p>
+
+<h2 id="Komponentenwert_Typen">Komponentenwert Typen</h2>
+
+<h3 id="Schlüsselwörter">Schlüsselwörter</h3>
+
+<h4 id="Generische_Schlüsselwörter">Generische Schlüsselwörter</h4>
+
+<p>Ein Schlüsselwort mit einer vordefinierten Bedeutung wird wortgetreu, ohne Anführungszeichen, dargestellt, zum Beispiel: <code>auto</code>, <code>smaller</code> oder <code>ease-in</code>.</p>
+
+<h4 id="Die_Spezialfälle_inherit_und_initial">Die Spezialfälle <code>inherit</code> und <code>initial</code></h4>
+
+<p>Alle CSS Eigenschaften akzeptieren die Schlüsselwörter <code>inherit</code> und <code>initial</code>, die durchweg in CSS definiert werden. Sie werden nicht in der Wertdefinition angezeigt und werden implizit definiert.</p>
+
+<h3 id="Literale">Literale</h3>
+
+<p>In CSS können einige Zeichen getrennt auftreten, wie der Schrägstrich ('<code>/</code>') oder das Komma ('<code>,</code>'), und werden in der Eigenschaftendefinition verwendet, um Teile voneinander zu trennen. Das Komma wird oft verwendet, um Werte in Aufzählungen oder Parameter in Mathematik ähnlichen Funktionen zu trennen; der Schrägstrich trennt oft Teile eines Wertes, die semantisch unterscheiden, jedoch eine gemeinsame Syntax haben. Normalerweise wird der Schrägstrich manchmal in Kurzform Eigenschaften verwendet, um Komponenten von einander zu trennen, die vom gleichen Typ sind, aber zu verschiedenen Eigenschaften gehören.</p>
+
+<p>Beide Symbole erscheinen buchstäblich in einer Wertdefinition.</p>
+
+<h3 id="Datentypen">Datentypen</h3>
+
+<h4 id="Elementare_Datentypen">Elementare Datentypen</h4>
+
+<p>Bestimmte Daten werden überall in CSS verwendet und werden einmalig für alle Werte in der Spezifikation definiert. Die sogenannten <em>elementaren Datentypen</em> werden durch ihren von den Symbolen '<code>&lt;</code>' und '<code>&gt;</code>' umschlossenen Namen gekennzeichnet: {{ cssxref("&lt;angle&gt;") }}, {{cssxref("&lt;string&gt;")}}, …</p>
+
+<h4 id="Nichtterminale_Datentypen">Nichtterminale Datentypen</h4>
+
+<p>Weniger häufige Datentypen, genannt <em>nichtterminale Datentypen</em>, werden ebenfalls von '<code>&lt;</code>' und '<code>&gt;</code>' umschlossen.</p>
+
+<p>Es gibt zwei Arten von nichtterminalen Datentypen:</p>
+
+<ul>
+ <li>Datentypen, die <em>den Namen einer Eigenschaft teilen</em>, eingeschlossen von Anführungszeichen. In diesem Fall teilt der Datentyp die gleiche Menge an Werten wie die Eigenschaft. Sie werden oft in der Definition von Kurzform Eigenschaften verwendet.</li>
+ <li>Datentypen, die <em>den Namen einer Eigenschaft nicht teilen</em>. Diese Datentypen ähneln den elementaren Datentypen. Sie unterscheiden sich lediglich in der Stelle ihrer Definition von den elementaren Datentypen: In diesem Fall ist die Definition normalerweise sehr nahe bei der Definition der Eigenschaft, die sie benutzt.</li>
+</ul>
+
+<h2 id="Komponentenwert_Kombinatoren">Komponentenwert Kombinatoren</h2>
+
+<h3 id="Eckige_Klammern">Eckige Klammern</h3>
+
+<p><em>Eckige Klammern</em> schließen mehrere Entitäten, Kombinatoren und Multiplikatoren ein und transformieren diese anschließend als eine einzige Komponente. Sie werden benutzt, um <strong>Komponenten zu gruppieren und so die Rangordnungsregeln zu umgehen</strong>.</p>
+
+<pre class="syntaxbox"><code>bold [ thin &amp;&amp; &lt;length&gt; ]</code></pre>
+
+<p>Dieses Beispiel passt auf die folgenden Werte:</p>
+
+<ul>
+ <li><code>bold thin 2vh</code></li>
+ <li><code>bold 0 thin</code></li>
+ <li><code>bold thin 3.5em</code></li>
+</ul>
+
+<p>Aber nicht:</p>
+
+<ul>
+ <li><code>thin bold 3em</code>; da <code>bold</code> neben die durch die Klammern definierte Komponente gestellt ist, muss sie davor erscheinen.</li>
+</ul>
+
+<h3 id="Nebeneinanderstellung">Nebeneinanderstellung</h3>
+
+<p>Wenn mehrere Schlüsselwörter, Literale oder Datentypen aufgereiht werden und nur durch ein oder mehrere Leerzeichen getrennt werden, nennt man dies <em>Nebeneinanderstellung</em>. Alle nebeneinander gestellten Komponenten sind zwingend und müssen in der exakten Reihenfolge angegeben werden.</p>
+
+<pre class="syntaxbox">bold &lt;length&gt; , thin
+</pre>
+
+<p>Dieses Beispiel passt auf die folgenden Werte:</p>
+
+<ul>
+ <li><code>bold 1em, thin</code></li>
+ <li><code>bold 0, thin</code></li>
+ <li><code>bold 2.5cm, thin</code></li>
+ <li><code>bold 3vh, thin</code></li>
+</ul>
+
+<p>Aber nicht:</p>
+
+<ul>
+ <li><code>thin 1em, bold</code>, da die Entitäten in der beschriebenen Reihenfolge stehen müssen.</li>
+ <li><code>bold 1em thin</code>, da die Entitäten zwingend angegeben werden müssen; das Komma und ein Literal müssen vorhanden sein.</li>
+ <li><code>bold 0.5ms, thin</code>, da <code>ms</code> Werte keine {{cssxref("&lt;length&gt;")}} Werte sind.</li>
+</ul>
+
+<h3 id="Doppeltes_Und-Zeichen">Doppeltes Und-Zeichen</h3>
+
+<p>Wenn zwei oder mehrere Komponenten durch ein <em>doppeltes Und-Zeichen</em>, <code>&amp;&amp;</code>, getrennt sind, bedeutet das, dass alle diese Entitäten <strong>zwingend sind, jedoch in beliebiger Reihenfolge auftreten können</strong>.</p>
+
+<pre class="syntaxbox">bold &amp;&amp; &lt;length&gt;
+</pre>
+
+<p>Dieses Beispiel passt auf die folgenden Werte:</p>
+
+<ul>
+ <li><code>bold 1em</code></li>
+ <li><code>bold 0</code></li>
+ <li><code>2.5cm bold</code></li>
+ <li><code>3vh bold</code></li>
+</ul>
+
+<p>Aber nicht:</p>
+
+<ul>
+ <li><code>bold</code>, da beide Komponenten im Wert vorkommen müssen.</li>
+ <li><code>bold 1em bold</code>, da beide Komponenten nur einmal vorkommen dürfen.</li>
+</ul>
+
+<div class="note"><strong>Hinweis:</strong> Juxtaposition hat Vorrang gegenüber dem doppelten Und-Zeichen, was bedeutet, dass <code>bold thin &amp;&amp; &lt;length&gt;</code> gleichbedeutend ist mit <code>[ </code><code>bold thin ] &amp;&amp; &lt;length&gt;</code>. Dies beschreibt <code>bold thin &lt;length&gt;</code> oder <code>&lt;length&gt;</code><code> bold thin</code>, aber nicht <code>bold &lt;length&gt;</code><code> thin</code>.</div>
+
+<h3 id="Doppelter_Balken">Doppelter Balken</h3>
+
+<p>Wenn zwei oder mehrere Komponenten durch einen <em>doppelten Balken</em>, <code>||</code>, getrennt sind, bedeutet das, dass alle Entitäten optional sind: <strong>mindestens eine davon muss angegeben werden, und sie können in beliebiger Reihenfolge auftreten</strong>. Normalerweise wird dies verwendet, um die verschiedenen Werte einer <a href="/de/docs/Web/CSS/Kurzform_Eigenschaft" title="/en-US/docs/CSS/Shorthand_properties">Kurzform Eigenschaft</a> zu definieren.</p>
+
+<pre class="syntaxbox">&lt;'border-width'&gt; || &lt;'border-style'&gt; || &lt;'border-color'&gt;
+</pre>
+
+<p>Dieses Beispiel passt auf die folgenden Werte:</p>
+
+<ul>
+ <li><code>1em solid blue</code></li>
+ <li><code>blue 1em</code></li>
+ <li><code>solid 1px yellow</code></li>
+</ul>
+
+<p>Aber nicht:</p>
+
+<ul>
+ <li><code>blue yellow</code>, da eine Komponente nur einmal vorkommen darf.</li>
+ <li><code>bold</code>, da es kein erlaubtes Schlüsselwort als Wert für irgendeine Entität ist.</li>
+</ul>
+
+<div class="note"><strong>Hinweis:</strong> Das doppelte Und-Zeichen hat Vorrang gegenüber dem doppelten Balken, was bedeutet, dass <code>bold || thin &amp;&amp; &lt;length&gt;</code> gleichbedeutend ist mit <code>bold || [ thin &amp;&amp; &lt;length&gt; ]</code>. Dies beschreibt <code>bold</code>, <code>thin</code>, <code>&lt;length&gt;</code>, <code>bold thin</code>, <code>&lt;length&gt; bold</code>, oder <code>thin &lt;length&gt; bold</code>, aber nicht <code>bold &lt;length&gt;</code><code> bold thin</code>, da <code>bold</code>, falls nicht weggelassen, vor oder nach der gesamten <code>thin &amp;&amp; &lt;length&gt;</code> Komponente platziert werden muss.</div>
+
+<h3 id="Einfacher_Balken">Einfacher Balken</h3>
+
+<p>Wenn zwei oder mehrere Entitäten durch einen <em>einfachen Balken</em>, <code>|</code>, getrennt werden, bedeutet das, dass alle Entitäten exklusive Optionen sind: <strong>genau eine dieser Optionen muss angegeben werden</strong>. Dies wird normalerweise benutzt, um eine Liste möglicher Schlüsselwörter zu trennen.</p>
+
+<pre class="syntaxbox">&lt;percentage&gt; | &lt;length&gt; | left | center | right | top | bottom</pre>
+
+<p>Dieses Beispiel passt auf die folgenden Werte:</p>
+
+<ul>
+ <li><code>3%</code></li>
+ <li><code>0</code></li>
+ <li><code>3.5em</code></li>
+ <li><code>left</code></li>
+ <li><code>center</code></li>
+ <li><code>right</code></li>
+ <li><code>top</code></li>
+ <li><code>bottom</code></li>
+</ul>
+
+<p>Aber nicht:</p>
+
+<ul>
+ <li><code>center 3%</code>, da nur eine der Komponenten angegeben werden darf.</li>
+ <li><code>3em 4.5em</code>, da eine Komponente nur einmal vorkommen darf.</li>
+</ul>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Der doppelte Balken hat Vorrang gegenüber dem einfachen Balken, was bedeutet, dass <code>bold | thin || &lt;length&gt;</code> gleichbedeutend ist mit <code>bold | [ thin || &lt;length&gt; ]</code>. Dies beschreibt <code>bold</code>, <code>thin</code>, <code>&lt;length&gt;</code>, <code>&lt;length&gt; thin</code>, oder <code>thin &lt;length&gt;</code>, aber nicht <code>bold &lt;length&gt;</code>, da nur eine Entität jeder Seite des <code>|</code> Kombinators vorkommen darf.</p>
+</div>
+
+<h2 id="Komponentenwert_Multiplikatoren">Komponentenwert Multiplikatoren</h2>
+
+<p>Ein Multiplikator ist ein Zeichen, das angibt, wie oft eine vorhergehende Entität wiederholt werden kann. Ohne einen Multiplikator muss eine Entität exakt einmal vorkommen.</p>
+
+<p>{{Note("Multiplikatoren können nicht zu Kombinatoren hinzugefügt werden und haben auch keinen Vorrang vor diesen.")}}</p>
+
+<h3 id="Asterisk_(*)">Asterisk (<code>*</code>)</h3>
+
+<p>Der <em>Asterisk Multiplikator</em> gibt an, dass die Entität <strong>keinmal, einmal oder mehrmals</strong> vorkommen kann.</p>
+
+<pre class="syntaxbox"><code>bold smaller*</code></pre>
+
+<p>Dieses Beispiel passt auf die folgende Werte:</p>
+
+<ul>
+ <li><code>bold</code></li>
+ <li><code>bold smaller</code></li>
+ <li><code>bold smaller smaller</code></li>
+ <li><code>bold smaller smaller smaller</code> and so on.</li>
+</ul>
+
+<p>Aber nicht:</p>
+
+<ul>
+ <li><code>smaller</code>, da <code>bold</code> eine Nebeneinanderstellung ist und vor jeglichem <code>smaller</code> Schlüsselwort stehen muss.</li>
+</ul>
+
+<h3 id="Plus_()">Plus (<code>+</code>)</h3>
+
+<p>Der <em>Plus Multiplikator</em> gibt an, dass die Entität <strong>einmal oder mehrmals</strong> vorkommen kann.</p>
+
+<pre class="syntaxbox"><code>bold smaller+</code></pre>
+
+<p>Dieses Beispiel passt auf die folgenden Werte:</p>
+
+<ul>
+ <li><code>bold smaller</code></li>
+ <li><code>bold smaller smaller</code></li>
+ <li><code>bold smaller smaller smaller</code> and so on.</li>
+</ul>
+
+<p>Aber nicht:</p>
+
+<ul>
+ <li><code>bold</code>, da <code>smaller</code> mindestens einmal vorkommen muss.</li>
+ <li><code>smaller</code>, da <code>bold</code> eine Nebeneinanderstellung ist und vor jeglichem <code>smaller</code> Schlüsselwort stehen muss.</li>
+</ul>
+
+<h3 id="Fragezeichen_()">Fragezeichen (<code>?</code>)</h3>
+
+<p>Der <em>Fragezeichen Multiplikator</em> gibt an, dass die Entität optional ist und <strong>keinmal oder einmal</strong> vorkommen kann.</p>
+
+<pre class="syntaxbox"><code>bold smaller?</code></pre>
+
+<p>Dieses Beispiel passt auf die folgenden Werte:</p>
+
+<ul>
+ <li><code>bold</code></li>
+ <li><code>bold smaller</code></li>
+</ul>
+
+<p>Aber nicht:</p>
+
+<ul>
+ <li><code>bold smaller smaller</code>, da <code>smaller</code> höchstens einmal vorkommen darf.</li>
+ <li><code>smaller</code>, da <code>bold</code> eine Nebeneinanderstellung ist und vor jeglichem <code>smaller</code> Schlüsselwort stehen muss.</li>
+</ul>
+
+<h3 id="Geschweifte_Klammern_(_)">Geschweifte Klammern (<code>{ }</code>)</h3>
+
+<p>Der <em>Geschweifte Klammern Multiplikator</em> schließt zwei durch Komma getrennte Ganzzahlen A und B ein und gibt an, dass die Entität <strong>mindestens A-mal vorkommen muss und höchstens B-mal vorkommen darf</strong>.</p>
+
+<pre class="syntaxbox"><code>bold smaller{1,3}</code></pre>
+
+<p>Dieses Beispiel passt auf die folgenden Werte:</p>
+
+<ul>
+ <li><code>bold smaller</code></li>
+ <li><code>bold smaller smaller</code></li>
+ <li><code>bold smaller smaller smaller</code></li>
+</ul>
+
+<p>Aber nicht:</p>
+
+<ul>
+ <li><code>bold</code>, da <code>smaller</code> mindestens einmal vorkommen muss.</li>
+ <li><code>bold smaller smaller smaller smaller</code>, da <code>smaller</code> höchstens dreimal vorkommen darf.</li>
+ <li><code>smaller</code>, da <code>bold</code> eine Nebeneinanderstellung ist und vor jeglichem <code>smaller</code> Schlüsselwort stehen muss.</li>
+</ul>
+
+<h3 id="Rautensymbol_()">Rautensymbol (<code>#</code>)</h3>
+
+<p>Der <em>Rautensymbol Multiplizierer</em> gibt an, dass die Entität <strong>einmal oder mehrmals</strong> wiederholt werden kann (wie beim <em>Plus Multiplikator</em>), jedoch jedes Vorkommen durch <strong>ein Komma </strong>('<code>,</code>')<strong> getrennt</strong> wird.</p>
+
+<pre class="syntaxbox"><code>bold smaller#</code></pre>
+
+<p>Dieses Beispiel passt auf die folgenden Werte:</p>
+
+<ul>
+ <li><code>bold smaller</code></li>
+ <li><code>bold smaller, smaller</code></li>
+ <li><code>bold smaller, smaller, smaller</code> and so on.</li>
+</ul>
+
+<p>Aber nicht:</p>
+
+<ul>
+ <li><code>bold</code>, da <code>smaller</code> mindestens einmal vorkommen muss.</li>
+ <li><code>bold smaller smaller smaller</code>, da verschiedene Vorkommen von <code>smaller</code> durch Komma getrennt werden müssen.</li>
+ <li><code>smaller</code>, da <code>bold</code> eine Nebeneinanderstellung ist und vor jeglichem <code>smaller</code> Schlüsselwort stehen muss.</li>
+</ul>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Zeichen</th>
+   <th scope="col">Name</th>
+   <th scope="col">Beschreibung</th>
+   <th scope="col">Beispiel</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4">Kombinatoren</th>
+  </tr>
+  <tr>
+   <td> </td>
+   <td>Nebeneinanderstellung</td>
+   <td>Komponenten sind zwingend und müssen in der angegebenen Reihenfolge vorkommen</td>
+   <td><code>solid &lt;length&gt;</code></td>
+  </tr>
+  <tr>
+   <td><code>&amp;&amp;</code></td>
+   <td>Doppeltes Und-Zeichen</td>
+   <td>Komponenten sind zwingend, aber können in beliebiger Reihenfolge vorkommen</td>
+   <td><code>&lt;length&gt; &amp;&amp; &lt;string&gt;</code></td>
+  </tr>
+  <tr>
+   <td><code>||</code></td>
+   <td>Doppelter Balken</td>
+   <td>Mindestens eine der Komponenten muss angegeben werden und sie können in beliebiger Reihenfolge vorkommen</td>
+   <td><code>&lt;'border-image-outset'&gt; || &lt;'border-image-slice'&gt;</code></td>
+  </tr>
+  <tr>
+   <td><code>|</code></td>
+   <td>Einfacher Balken</td>
+   <td>Genau eine der Komponenten muss angegeben werden</td>
+   <td><code>smaller | small | normal | big | bigger</code></td>
+  </tr>
+  <tr>
+   <td><code>[ ]</code></td>
+   <td>Eckige Klammern</td>
+   <td>Gruppierung von Komponenten, um Rangordnungsregeln zu umgehen</td>
+   <td><code>bold [ thin &amp;&amp; &lt;length&gt; ]</code></td>
+  </tr>
+  <tr>
+   <th colspan="4">Multiplizierer</th>
+  </tr>
+  <tr>
+   <td> </td>
+   <td>Kein Multiplizierer</td>
+   <td>Genau einmal</td>
+   <td><code>solid</code></td>
+  </tr>
+  <tr>
+   <td><code>*</code></td>
+   <td>Asterisk</td>
+   <td>0 oder mehrmals</td>
+   <td><code>bold smaller*</code></td>
+  </tr>
+  <tr>
+   <td><code>+</code></td>
+   <td>Pluszeichen</td>
+   <td>1 oder mehrmals</td>
+   <td><code>bold smaller+</code></td>
+  </tr>
+  <tr>
+   <td><code>?</code></td>
+   <td>Fragezeichen</td>
+   <td>0 oder 1-mal (that is <em>optional)</em></td>
+   <td><code>bold smaller?</code></td>
+  </tr>
+  <tr>
+   <td><code>{A,B}</code></td>
+   <td>Geschweifte Klammern</td>
+   <td>Mindestens <code>A</code>-mal, höchstens <code>B</code>-mal</td>
+   <td><code>bold smaller{1,3}</code></td>
+  </tr>
+  <tr>
+   <td><code>#</code></td>
+   <td>Rautensymbol</td>
+   <td>1 oder mehrmals, aber jedes Vorkommen getrennt durch Komma ('<code>,</code>')</td>
+   <td><code>bold smaller#</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Values', '#value-defs', 'Value definition syntax') }}</td>
+   <td>{{ Spec2('CSS3 Values') }}</td>
+   <td>Fügt den Rautensymbol Multiplizierer hinzu.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'about.html#value-defs', 'Value definition syntax') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Fügt den doppelten Und-Zeichen Kombinator hinzu.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#notation-for-property-values', 'Value definition syntax') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{ CSS_key_concepts() }}</li>
+</ul>
diff --git a/files/de/web/css/white-space/index.html b/files/de/web/css/white-space/index.html
new file mode 100644
index 0000000000..5bd5f70eae
--- /dev/null
+++ b/files/de/web/css/white-space/index.html
@@ -0,0 +1,244 @@
+---
+title: white-space
+slug: Web/CSS/white-space
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Text
+  - NeedsLiveSample
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+translation_of: Web/CSS/white-space
+---
+<div>{{CSSRef}}</div>
+
+<p>Die CSS Eigenschaft <strong><code>white-space</code></strong> wird benutzt, um Leerzeichen innerhalb eines Elementes zu handhaben.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/white-space.html")}}</div>
+
+<div class="hidden">Die Quelle für dieses interaktive Beispiel ist in einem GitHub-Repository gespeichert. Wenn Sie zum Projekt der interaktiven Beispiele beitragen möchten, klonen Sie bitte <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und senden Sie uns eine Pull-Anfrage.</div>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Um Wörter umzubrechen, verwenden Sie stattdessen {{CSSxRef("overflow-wrap")}}, {{CSSxRef("word-break")}}, oder {{CSSxRef("hyphens")}}.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="brush: css notranslate">/* Schlüsselwortwerte */
+white-space: normal;
+white-space: nowrap;
+white-space: pre;
+white-space: pre-wrap;
+white-space: pre-line;
+white-space: break-spaces;
+
+/* Globale Werte */
+white-space: inherit;
+white-space: initial;
+white-space: unset;
+</pre>
+
+<p>Die Eigenschaft <code>white-space</code> wird als ein einzelnes Schlüsselwort angegeben, das aus der untenstehenden Liste von Werten ausgewählt wird.</p>
+
+<h3 id="Values" name="Values">Werte</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Aufeinanderfolgende Leerzeichen fallen zusammen. Zeilenumbruch-Zeichen im Quellcode werden als andere Leerzeichen gehandhabt. Bricht Zeilen notwendigen Stellen um und füllt die Zeile.</dd>
+ <dt><code>nowrap</code></dt>
+ <dd>Wie <code>normal</code>, aber unterdrückt Zeilenumbrüche im Text.</dd>
+ <dt><code>pre</code></dt>
+ <dd>Aufeinanderfolgende Leerzeichen bleiben erhalten, Zeilen werden nur an Zeilenumbruch-Zeichen im Quellcode und an  {{HTMLElement("br")}}-Elementen gebrochen.</dd>
+ <dt><code>pre-wrap</code></dt>
+ <dd>Aufeinanderfolgende Zwischenraumzeichen bleiben erhalten. Zeilen werden an Zeilenumbruch-Zeichen, an {{HTMLElement("br")}} und an notwendigen Stellen um die Zeile zu füllen umgebrochen.</dd>
+ <dt><code>pre-line</code></dt>
+ <dd>Aufeinanderfolgende Zwischenraumzeichen fallen zusammen. Zeilen werden an Zeilenumbruch-Zeichen, an {{HTMLElement("br")}} und an notwendigen Stellen um die Zeile zu füllen umgebrochen.</dd>
+ <dt><code>break-spaces</code></dt>
+ <dd> Das Verhalten ist bis auf eine Ausnahme identisch mit <code>pre-line</code>:
+ <ul>
+  <li>Jede Sequenz von erhaltenen Zwischenraumzeichen nimmt immer Platz ein, auch am Ende der Zeile.</li>
+  <li>Nach jedem enthaltenen Zwischenraumzeichen besteht die Möglichkeit eines Zeilenumbruchs, auch zwischen Zwischenraumzeichen.</li>
+  <li>Solche beibehaltenen Leerräume nehmen Platz in Anspruch und beeinflussen somit die intrinsischen Größen der Box (Min-Inhaltsgröße und Max-Inhaltsgröße).</li>
+ </ul>
+ </dd>
+</dl>
+
+<p>Die folgende Tabelle fasst das Verhalten der verschiedenen <code>white-space</code> Zwischenraumzeichen zusammen:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th></th>
+   <th>Neue Zeilen</th>
+   <th>Leerzeichen und Tabulatoren</th>
+   <th>Textumbruch</th>
+   <th>Zeilenende-Raum</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th><code>normal</code></th>
+   <td>Fallen zusammen</td>
+   <td>Fallen zusammen</td>
+   <td>Umbruch</td>
+   <td>Entfernt</td>
+  </tr>
+  <tr>
+   <th><code>nowrap</code></th>
+   <td>Fallen zusammen</td>
+   <td>Fallen zusammen</td>
+   <td>Kein Umbruch</td>
+   <td>Entfernt</td>
+  </tr>
+  <tr>
+   <th><code>pre</code></th>
+   <td>Bleiben erhalten</td>
+   <td>Bleiben erhalten</td>
+   <td>Kein Umbruch</td>
+   <td>Entfernt</td>
+  </tr>
+  <tr>
+   <th><code>pre-wrap</code></th>
+   <td>Bleiben erhalten</td>
+   <td>Bleiben erhalten</td>
+   <td>Umbruch</td>
+   <td>hängend</td>
+  </tr>
+  <tr>
+   <th><code>pre-line</code></th>
+   <td>Bleiben erhalten</td>
+   <td>Fallen zusammen</td>
+   <td>Umbruch</td>
+   <td>Entfernt</td>
+  </tr>
+  <tr>
+   <th><code>break-space</code></th>
+   <td>Bleiben erhalten</td>
+   <td>Bleiben erhalten</td>
+   <td>Umbruch</td>
+   <td>Umbruch</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Formale_Definition">Formale Definition</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formale_Syntax">Formale Syntax</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<h3 id="Einfaches_Beispiel">Einfaches Beispiel</h3>
+
+<pre class="brush: css notranslate">code {
+  white-space: pre;
+}</pre>
+
+<h3 id="Line_breaks_inside_pre_elements" name="Line_breaks_inside_pre_elements">Zeilenumbrüche innerhalb von &lt;pre&gt; Elementen</h3>
+
+<pre class="brush: css notranslate">pre {
+  word-wrap: break-word;      /* IE 5.5-7 */
+  white-space: pre-wrap;      /* Modern browsers */
+}</pre>
+
+<h3 id="In_Aktion">In Aktion</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<div class="hidden" id="In_action">
+<pre class="brush: html notranslate">&lt;div id="css-code" class="box"&gt;
+  p { white-space:
+  &lt;select&gt;
+    &lt;option&gt;normal&lt;/option&gt;
+    &lt;option&gt;nowrap&lt;/option&gt;
+    &lt;option&gt;pre&lt;/option&gt;
+    &lt;option&gt;pre-wrap&lt;/option&gt;
+    &lt;option&gt;pre-line&lt;/option&gt;
+    &lt;option&gt;break-spaces&lt;/option&gt;
+  &lt;/select&gt; }
+&lt;/div&gt;
+&lt;div id="results" class="box"&gt;
+  &lt;p&gt;    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+
+    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">.box {
+  width: 300px;
+  padding: 16px;
+  border-radius: 10px;
+}
+
+#css-code {
+  background-color: rgb(220, 220, 220);
+  font-size: 16px;
+  font-family: monospace;
+}
+
+#css-code select {
+  font-family: inherit;
+}
+
+#results {
+  background-color: rgb(230, 230, 230);
+  overflow-x: scroll;
+  height: 400px;
+  white-space: normal;
+  font-size: 14px;
+}</pre>
+
+<pre class="brush: js notranslate">var select  = document.querySelector("#css-code select");
+var results = document.querySelector("#results p");
+select.addEventListener("change", function(e) {
+  results.setAttribute("style", "white-space: "+e.target.value);
+})</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt; </pre>
+
+<h4 id="Ergebnis">Ergebnis</h4>
+
+<p>{{EmbedLiveSample("In_action", "100%", 500)}}</p>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#white-space', 'white-space')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Präzisiert den Umbruch-Algorithmus. Äußerlich bewirkt der <code>white-space</code> eine kompakte Eigenschaft.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#white-space-prop', 'white-space')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompatibilität</h2>
+
+<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und senden Sie uns eine Pull-Anfrage.</div>
+
+<p>{{Compat("css.properties.white-space")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Eigenschaften, die definieren, wie Wörter umgebrochen werden: {{CSSxRef("overflow-wrap")}}, {{CSSxRef("word-break")}}, {{CSSxRef("hyphens")}}</li>
+</ul>
diff --git a/files/de/web/css/widows/index.html b/files/de/web/css/widows/index.html
new file mode 100644
index 0000000000..7d2179c80b
--- /dev/null
+++ b/files/de/web/css/widows/index.html
@@ -0,0 +1,128 @@
+---
+title: widows
+slug: Web/CSS/widows
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS3
+  - Layout
+  - Referenz
+  - Web
+  - mehrspaltiges Layout
+  - print
+translation_of: Web/CSS/widows
+---
+<div>{{CSSRef}}</div>
+
+<p>Die <a href="/de/docs/CSS">CSS</a>-Eigenschaft <strong><code>widows</code></strong> legt die Mindestanzahl von Zeilen in einem Blockcontainer fest, die <em>oben</em> auf einer <a href="/de/docs/Web/CSS/Paged_Media">Seite</a>, einem Bereich oder einer <a href="/de/docs/Web/CSS/CSS_Columns">Spalte</a> angezeigt werden müssen.</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;integer&gt; values */
+widows: 2;
+widows: 3;
+
+/* Global values */
+widows: inherit;
+widows: initial;
+widows: unset;
+</pre>
+
+<div class="note">
+<p><strong>Hinweis</strong>: In der Typografie ist ein <em>Hurenkind</em> die letzte Zeile eines Absatzes, die allein oben auf einer Seite angezeigt wird (der Absatz wird von einer vorherigen Seite fortgesetzt).</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>Die Mindestanzahl von Zeilen, die nach einem Fragmentierungsbruch ganz oben an einem neuen Fragment bleiben können. Der Wert muss positiv sein.</dd>
+</dl>
+
+<h2 id="Formale_Definition">Formale Definition</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formale_Syntax">Formale Syntax</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="Spalten_kontrollierendes_widows">Spalten kontrollierendes widows</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;p&gt;This is the first paragraph containing some text.&lt;/p&gt;
+  &lt;p&gt;This is the second paragraph containing some more text than the first one. It is used to demonstrate how widows work.&lt;/p&gt;
+  &lt;p&gt;This is the third paragraph. It has a little bit more text than the first one.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; highlight[4] notranslate">div {
+  background-color: #8cffa0;
+  columns: 3;
+  widows: 2;
+}
+
+p {
+  background-color: #8ca0ff;
+}
+
+p:first-child {
+  margin-top: 0;
+}
+</pre>
+
+<h4 id="Ergebnis">Ergebnis</h4>
+
+<p>{{EmbedLiveSample("Controlling_column_widows", 400, 160)}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fragmentation', '#widows-orphans', 'widows')}}</td>
+   <td>{{Spec2('CSS3 Fragmentation')}}</td>
+   <td>Erweitert <code>widows</code>, die auf alle Fragmenttypen angewendet werden können, einschließlich Seiten, Regionen oder Spalten.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#filling-columns', 'widows')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>
+    <p>Empfehlungen zur Berücksichtigung von <code>widows</code> in Bezug auf Spalten.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'page.html#break-inside', 'widows')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("css.properties.widows")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref("orphans")}}</li>
+ <li><a href="/de/docs/Web/CSS/Paged_Media">Seitennummerierte Medien</a></li>
+</ul>
diff --git a/files/de/web/css/width/index.html b/files/de/web/css/width/index.html
new file mode 100644
index 0000000000..b31a069823
--- /dev/null
+++ b/files/de/web/css/width/index.html
@@ -0,0 +1,191 @@
+---
+title: width
+slug: Web/CSS/width
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - NeedsBrowserCompatibility
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+translation_of: Web/CSS/width
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <strong><code>width</code></strong> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft legt die Breite des Inhaltsbereichs eines Elements fest. Der <a href="/de/docs/Web/CSS/Boxmodell#Inhaltsbereich">Inhaltsbereich</a> ist <em>innerhalb</em> des Innenabstands, Rahmens und Außenabstands des Elements.</p>
+
+<p>Die {{cssxref("min-width")}} und {{cssxref("max-width")}} Eigenschaften überschreiben <code>width</code>.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* &lt;length&gt; Werte */
+width: 300px;
+width: 25em;
+
+/* &lt;percentage&gt; Werte */
+width: 75%;
+
+/* Schlüsselwortwerte */
+width: border-box;
+width: content-box;
+width: max-content;
+width: min-content;
+width: available;
+width: fit-content;
+width: auto;
+
+/* Globale Werte */
+width: inherit;
+width: initial;
+width: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Siehe {{cssxref("&lt;length&gt;")}} für mögliche Einheiten.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Angegeben als {{cssxref("&lt;percentage&gt;")}} der Breite des beinhaltenden Blocks.</dd>
+ <dt><code>border-box </code>{{experimental_inline}}</dt>
+ <dd>Falls angegeben, wird der vorherige {{cssxref("&lt;length&gt;")}} oder {{cssxref("&lt;percentage&gt;")}} Wert auf die Borderbox des Elements angewendet.</dd>
+ <dt><code>content-box</code> {{experimental_inline}}</dt>
+ <dd>Falls angegeben, wird der vorherige {{cssxref("&lt;length&gt;")}} oder {{cssxref("&lt;percentage&gt;")}} Wert auf die Contentbox des Elements angewendet.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Der Browser berechnet die Breite für das angegebene Element.</dd>
+ <dt><code>max-content</code> {{experimental_inline}}</dt>
+ <dd>Die innere bevorzugte Breite.</dd>
+ <dt><code>min-content</code> {{experimental_inline}}</dt>
+ <dd>Die innere Minimalbreite.</dd>
+ <dt><code>available</code> {{experimental_inline}}</dt>
+ <dd>Die Breite des beinhaltenden Blocks minus horizontalem Rand, Außen- und Innenabstand.</dd>
+ <dt><code>fit-content</code> {{experimental_inline}}</dt>
+ <dd>Der größere Werte von:
+ <ul>
+  <li>der inneren Minimalbreite.</li>
+  <li>der kleineren Größe der inneren bevorzugten und der verfügbaren Breite.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Standardbreite">Standardbreite</h3>
+
+<pre class="brush:css">p.goldie {
+  background: gold;
+}</pre>
+
+<pre class="brush:html">&lt;p class="goldie"&gt;Die Mozilla Community produziert tolle Software.&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample('Standardbreite', '500px', '64px')}}</p>
+
+<h3 id="Pixel_und_ems">Pixel und ems</h3>
+
+<pre class="brush: css">.px_length {
+  width: 200px;
+  background-color: red;
+  color: white;
+  border: 1px solid black;
+}
+
+.em_length {
+  width: 20em;
+  background-color: white;
+  color: red;
+  border: 1px solid black;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="px_length"&gt;Breite gemessen in px&lt;/div&gt;
+&lt;div class="em_length"&gt;Breite gemessen in em&lt;/div&gt;</pre>
+
+<p>{{EmbedLiveSample('Pixel_und_ems', '500px', '64px')}}</p>
+
+<h3 id="Prozentwert">Prozentwert</h3>
+
+<pre class="brush: css">.percent {
+  width: 20%;
+  background-color: silver;
+  border: 1px solid red;
+}</pre>
+
+<pre class="brush: html">&lt;div class="percent"&gt;Breite in Prozent&lt;/div&gt;</pre>
+
+<p>{{EmbedLiveSample('Prozentwert', '500px', '64px')}}</p>
+
+<h3 id="max-content">max-content</h3>
+
+<pre class="brush:css;">p.maxgreen {
+  background: lightgreen;
+  width: intrinsic;           /* Safari/WebKit verwendet einen nicht standardisierten Namen */
+  width: -moz-max-content;    /* Firefox/Gecko */
+  width: -webkit-max-content; /* Chrome */
+}</pre>
+
+<pre class="brush:html">&lt;p class="maxgreen"&gt;Die Mozilla Community produziert tolle Software.&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample('max-content', '500px', '64px')}}</p>
+
+<h3 id="min-content">min-content</h3>
+
+<pre class="brush:css">p.minblue {
+  background: lightblue;
+  width: -moz-min-content;    /* Firefox */
+  width: -webkit-min-content; /* Chrome */
+}</pre>
+
+<pre class="brush:html">&lt;p class="minblue"&gt;Die Mozilla Community produziert tolle Software.&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample('min-content', '500px', '155px')}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Box', '#the-width-and-height-properties', 'width')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>Fügt die Schlüsselwörter <code>max-content</code>, <code>min-content</code>, <code>available</code>, <code>fit-content</code>, <code>border-box</code> und <code>content-box</code> hinzu.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'width')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Listet <code>width</code> als animierbar.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visudet.html#the-width-property', 'width')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Präzisiert die Art von Elementen, auf die die Eigenschaft angewendet werden kann.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#width', 'width')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{Compat("css.properties.width")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/CSS/Boxmodell#Inhaltsbereich">Boxmodell</a>, {{cssxref("height")}}, {{cssxref("box-sizing")}}, {{cssxref("min-width")}} und {{cssxref("max-width")}}</li>
+</ul>
diff --git a/files/de/web/css/word-break/index.html b/files/de/web/css/word-break/index.html
new file mode 100644
index 0000000000..658ca59cf3
--- /dev/null
+++ b/files/de/web/css/word-break/index.html
@@ -0,0 +1,115 @@
+---
+title: word-break
+slug: Web/CSS/word-break
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS3
+  - Layout
+  - NeedsContent
+  - NeedsExample
+  - Referenz
+  - Web
+  - css3-text
+translation_of: Web/CSS/word-break
+---
+<div>{{CSSRef}}</div>
+
+<p>Die <code>word-break</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft wird verwendet, um anzugeben, ob zwischen Wörtern Zeilenumbrüche sein können.</p>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Schlüsselwortwerte */
+word-break: normal;
+word-break: break-all;
+word-break: keep-all;
+
+/* Globale Werte */
+word-break: inherit;
+word-break: initial;
+word-break: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Die Standardregeln für Zeilenumbrüche werden verwendet.</dd>
+ <dt><code>break-all</code></dt>
+ <dd>Zeilenumbrüche können bei Text, der nicht in CJK (chinesisch/japanisch/koreanisch) geschrieben ist, nach irgendeinem Zeichen eingefügt werden.</dd>
+ <dt><code>keep-all</code></dt>
+ <dd>Erlaubt keine Zeilenumbrüche in CJK-Text.  Das Verhalten bei Nicht-CJK-Text ist das gleiche wie bei <code>normal</code>.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="HTML-Inhalt">HTML-Inhalt</h3>
+
+<pre class="brush: html">&lt;p&gt;1. &lt;code&gt;word-break: normal&lt;/code&gt;&lt;/p&gt;
+&lt;p class="normal narrow"&gt; Die Schönbrunn wurde von einem Donaudampfschiffahrtsgesellschaftskapitän gesteuert. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉 &lt;/p&gt;
+
+&lt;p&gt;2. &lt;code&gt;word-break: break-all&lt;/code&gt;&lt;/p&gt;
+&lt;p class="breakAll narrow"&gt; Die Schönbrunn wurde von einem Donaudampfschiffahrtsgesellschaftskapitän gesteuert. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉 &lt;/p&gt;
+
+&lt;p&gt;3. &lt;code&gt;word-break: keep-all&lt;/code&gt;&lt;/p&gt;
+&lt;p class="keep narrow"&gt; Die Schönbrunn wurde von einem Donaudampfschiffahrtsgesellschaftskapitän gesteuert. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉&lt;/p&gt;
+</pre>
+
+<h3 id="CSS-Inhalt">CSS-Inhalt</h3>
+
+<pre class="brush: css">.narrow {
+    padding: 5px;
+    border: 1px solid;
+    width: 8em;
+}
+
+.normal {
+    word-break: normal;
+}
+
+.breakAll {
+    word-break: break-all;
+}
+
+.keep {
+    word-break: keep-all;
+}
+
+</pre>
+
+<p>{{EmbedLiveSample('Beispiele', 600, 580, '', 'Web/CSS/word-break')}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#word-break-property', 'word-break')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{Compat("css.properties.word-break")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref("overflow-wrap")}}</li>
+</ul>
diff --git a/files/de/web/css/word-spacing/index.html b/files/de/web/css/word-spacing/index.html
new file mode 100644
index 0000000000..f9f6fb1e83
--- /dev/null
+++ b/files/de/web/css/word-spacing/index.html
@@ -0,0 +1,107 @@
+---
+title: word-spacing
+slug: Web/CSS/word-spacing
+tags:
+  - CSS
+  - CSS Text
+  - NeedsLiveSample
+  - NeedsMobileBrowserCompatibility
+  - Property
+  - Referenz
+translation_of: Web/CSS/word-spacing
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die<strong> <code>word-spacing</code></strong> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft gibt das Abstandsverhalten zwischen Tags und Wörtern an.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Schlüsselwortwerte */
+word-spacing: normal;
+
+/* &lt;length&gt; Werte */
+word-spacing: 3px;
+word-spacing: 0.3em;
+
+/* &lt;percentage&gt; Werte */
+word-spacing: 50%;
+word-spacing: 200%;
+
+/* Globale Werte */
+word-spacing: inherit;
+word-spacing: initial;
+word-spacing: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Der normale Abstand zwischen Wörtern, wie durch die aktuelle Schriftart und/oder den Browser angegeben.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Definiert Abstände zusätzlich zu den immanenten Abständen zwischen den Wörtern, die durch die Schriftart definiert werden. Siehe {{cssxref("&lt;length&gt;")}} für mögliche Einheiten.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Definiert die zusätzlichen Abstände als Prozentwert der Breite des betreffenden Zeichens.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Der folgende CSS Code:</p>
+
+<pre class="brush: css">#mozdiv1 {
+  word-spacing: 15px;
+}
+
+#mozdiv2 {
+  word-spacing: 5em;
+}</pre>
+
+<p>formatiert zwei {{HTMLElement("div")}} Tags, die Text beinhalten wie hier gezeigt:</p>
+
+<p><img alt="example.png" class="default internal" src="/@api/deki/files/6103/=example.png"></p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#propdef-word-spacing', 'word-spacing')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Ersetzt die vorherigen Werte mit einem <code>&lt;spacing-limit&gt;</code> Wert, der denselben Wert definiert plus den <code>&lt;percentage&gt;</code> Wert und erlaubt bis zu drei Werte, die den Optimal-, Minimal- und Maximalwert beschreiben.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'word-spacing')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Definiert <code>word-spacing</code> als animierbar.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#propdef-word-spacing', 'word-spacing')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#word-spacing', 'word-spacing')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("css.properties.word-spacing")}}
diff --git a/files/de/web/css/word-wrap/index.html b/files/de/web/css/word-wrap/index.html
new file mode 100644
index 0000000000..fd803452d4
--- /dev/null
+++ b/files/de/web/css/word-wrap/index.html
@@ -0,0 +1,83 @@
+---
+title: word-wrap
+slug: Web/CSS/word-wrap
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - NeedsLiveSample
+  - Referenz
+translation_of: Web/CSS/overflow-wrap
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Die <code>word-wrap</code> Eigenschaft wird verwendet, um anzugeben ob der Webbrowser Zeilenumbrüche innerhalb von Wörtern machen darf. Dies ist nötig um einem Overflow vorzubeugen, wenn ein sonst nicht trennbarer Text zu lang für die beinhaltende Box wäre.</p>
+
+<div class="note"><strong>Hinweis:</strong> Die ursprünglich (unprefixed) proprietäre Erweiterung <code>word-wrap</code> von Microsoft wurde im aktuellen Entwurf der CSS3 Text Spezifikation in {{cssxref("overflow-wrap")}} umbenannt. <code>word-wrap</code> wird jetzt als "alternativer Name" für <code>overflow-wrap</code> angesehen. Stabile Builds von Google Chrome und Opera unterstützen die neue Syntax.</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Keyword values */
+word-wrap: normal;
+word-wrap: break-word;
+
+/* Global values */
+word-wrap: inherit;
+word-wrap: initial;
+word-wrap: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Zeilen dürfen nur bei normal Trennstellen von Wörtern umbrechen.</dd>
+ <dt><code>break-word</code></dt>
+ <dd>Normalerweise nicht trennbare Wörter dürfen an beliebigen Stellen getrennt werden, wenn es sonst keine anwendbaren Trennstellen in der Zeile gibt.</dd>
+</dl>
+
+<h3 id="Formale_Syntax">Formale Syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: css">p { width: 13em; background: gold; }</pre>
+
+<p style="width: 13em; background: gold;">FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)</p>
+
+<pre class="brush: css">p { width: 13em; background: gold; word-wrap: break-word; }</pre>
+
+<p style="word-wrap: break-word; width: 13em; background: gold;">FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Bemerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Text', '#propdef-word-wrap', 'word-wrap') }}</td>
+   <td>{{ Spec2('CSS3 Text') }}</td>
+   <td>Initiale Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Webbrowserkompatibilität">Webbrowserkompatibilität</h2>
+
+{{Compat("css.properties.overflow-wrap")}}
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref("word-break")}}</li>
+</ul>
diff --git a/files/de/web/css/z-index/index.html b/files/de/web/css/z-index/index.html
new file mode 100644
index 0000000000..014b0c53c8
--- /dev/null
+++ b/files/de/web/css/z-index/index.html
@@ -0,0 +1,150 @@
+---
+title: z-index
+slug: Web/CSS/z-index
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Positionierung
+  - Referenz
+translation_of: Web/CSS/z-index
+---
+<div>{{CSSRef}}</div>
+
+<div>
+<p>Die CSS-Eigenschaft <strong><code>z-index</code></strong> legt die z-Reihenfolge eines <a href="/de/docs/Web/CSS/position">positionierten</a> Elements und seiner Abkömmlinge oder Flex-Elemente fest. Überlappende Elemente mit einem größeren <code>z-index</code> überdecken diejenigen mit einem kleineren.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/z-index.html")}}</div>
+
+<p class="hidden">Die Quelle für dieses interaktive Beispiel ist in einem GitHub-Repository gespeichert. Wenn Sie zum Projekt der interaktiven Beispiele beitragen möchten, klonen Sie bitte <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und senden Sie uns eine Pull-Anfrage.</p>
+
+<p>Für einen positionierte Box (d.h. eine mit einer <code>position</code> anders als <code>static</code>) ist für die Eigenschaft <code>z-index</code> spezifiert:</p>
+
+<p>For a positioned box (that is, one with any <code>position</code> other than <code>static</code>), the <code>z-index</code> property specifies:</p>
+
+<ol>
+ <li>Die Stapelebene der Box im aktuellen <a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">Stapel-Zusammenhang</a>.</li>
+ <li>Ob die Box einen lokalen Stapel-Zusammenhang herstellt.</li>
+</ol>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css notranslate">/* Schlüsselwortwert */
+z-index: auto;
+
+/* &lt;integer&gt; Werte */
+z-index: 0;
+z-index: 3;
+z-index: 289;
+z-index: -1; /* Negative Werte, um die Priorität zu senken */
+
+/* Globale Werte*/
+z-index: inherit;
+z-index: initial;
+z-index: unset;
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Die Box etabliert keinen neuen lokalen Stapelkontext. Die generierte Box befindet sich im aktuellen Stapelkontext auf gleicher Ebene wie dessen Elternbox. </dd>
+ <dt><code>&lt;integer&gt;</code></dt>
+ <dd>Der {{cssxref("integer")}} legt die Stapelebene des momentanen Stapelkontexts fest. Die Box etabliert zudem einen neuen Stapelkontext, dessen Stapelebene 0 ist. Dadurch werden die z-Indizes von Kinder-Elementen nicht mit z-Indizes außerhalb des Elements verglichen.</dd>
+</dl>
+
+<h2 id="Formale_Definition">Formale Definition</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formale_Syntax">Formale Syntax</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Visuelle_Schichtenelement">Visuelle Schichtenelement</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="dashed-box"&gt;Dashed box&lt;/div&gt;
+  &lt;div class="gold-box"&gt;Gold box&lt;/div&gt;
+  &lt;div class="green-box"&gt;Green box&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; notranslate">.wrapper {
+  position: relative;
+}
+
+.dashed-box {
+  position: relative;
+  z-index: 1;
+  border: dashed;
+  height: 8em;
+  margin-bottom: 1em;
+  margin-top: 2em;
+}
+.gold-box {
+  position: absolute;
+  z-index: 3; /* put .gold-box above .green-box and .dashed-box */
+  background: gold;
+  width: 80%;
+  left: 60px;
+  top: 3em;
+}
+.green-box {
+  position: absolute;
+  z-index: 2; /* put .green-box above .dashed-box */
+  background: lightgreen;
+  width: 20%;
+  left: 65%;
+  top: -25px;
+  height: 7em;
+  opacity: 0.9;
+}
+</pre>
+
+<h4 id="Ergebnis">Ergebnis</h4>
+
+<p>{{ EmbedLiveSample('Visually_layering_elements', '550', '200', '') }}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'animation behavior for z-index')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Definiert <code>z-index</code> als animierbar.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#z-index', 'z-index')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und senden Sie uns eine Pull-Anfrage.</div>
+
+<p>{{Compat("css.properties.z-index")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>CSS-Eigenschaft {{cssxref("position")}}</li>
+ <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index">Understanding CSS z-index</a></li>
+</ul>
diff --git a/files/de/web/demos_of_open_web_technologies/index.html b/files/de/web/demos_of_open_web_technologies/index.html
new file mode 100644
index 0000000000..5fcfdcb557
--- /dev/null
+++ b/files/de/web/demos_of_open_web_technologies/index.html
@@ -0,0 +1,154 @@
+---
+title: Demos für Open Web Technologie
+slug: Web/Demos_of_open_web_technologies
+tags:
+  - Apps
+  - Demos
+  - Example
+  - Translation
+translation_of: Web/Demos_of_open_web_technologies
+---
+<p>Mozilla unterstützt eine Vielzahl an Open Web Technologien und ermutigt ihre Verwendung, deswegen auch die ganzen <strong>toten links</strong> hier auf dieser Seite. Diese Seite bietet Links zu spannenden Demonstrationen dieser Technologien, unter anderem beliebte Demos aus dem Demo Studio, <a href="https://blog.mozilla.org/community/2015/12/18/saying-goodbye-to-demo-studio/">welches kürzlich geschlossen wurde</a>. Wenn Sie eine gute Demonstration oder Anwendung von Open Web Technologie kennen, bitte fügen Sie einen Link in der passenden Sektion ein.</p>
+
+<p> </p>
+
+<h2 id="2D_Grafik">2D Grafik</h2>
+
+<h3 id="APNG" name="APNG">APNG</h3>
+
+<ul>
+ <li><a class="external" href="http://people.mozilla.com/~dolske/apng/demo.html">Justin's demo</a> (funktioniert wenn lokal gespeichert)</li>
+</ul>
+
+<h3 id="SVG" name="SVG">Canvas</h3>
+
+<ul>
+ <li><a class="external" href="http://www.blobsallad.se/">Ein interaktiver blob mit javascript und canvas (fun)</a></li>
+ <li><a class="external" href="http://blobsallad.se/article/" title="http://blobsallad.se/article/">Blob's demos</a></li>
+ <li><a class="external" href="http://glimr.rubyforge.org/cake/canvas.html">Canvas Animation Kit Experiment (CAKE)</a></li>
+ <li><a class="external" href="http://www.xs4all.nl/~peterned/3d/" title="http://www.xs4all.nl/~peterned/3d/">Canvas3D &amp; Flickr</a></li>
+ <li><a class="external" href="http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html" title="http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html">Playing with Canvas</a></li>
+ <li><a class="external" href="http://langexplr.blogspot.com/2008/11/using-canvas-html-element.html" title="http://langexplr.blogspot.com/2008/11/using-canvas-html-element.html">Verwendung des  Canvas HTML5-Elements</a></li>
+ <li><a class="external" href="/samples/raycaster/RayCaster.html" title="https://developer.mozilla.org/editor/fckeditor/core/editor/samples/raycaster/RayCaster.html">RayCaster</a></li>
+ <li><a class="external" href="http://jsmsxdemo.googlepages.com/jsmsx.html" title="http://jsmsxdemo.googlepages.com/jsmsx.html">MSX Emulator</a></li>
+ <li><a class="external" href="http://processingjs.org/exhibition/" title="http://dev.jquery.com/~john/processing.js/examples/basic/">processing.js</a></li>
+ <li><a class="external" href="http://glimr.rubyforge.org/cake/missile_fleet.html" title="http://glimr.rubyforge.org/cake/missile_fleet.html">Missile fleet</a></li>
+ <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/fireworks2.6rt.html" title="http://glimr.rubyforge.org/cake/demos/fireworks2.6rt.html">FireWorks</a></li>
+ <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/canvas_ash.html" title="http://glimr.rubyforge.org/cake/demos/canvas_ash.html">Canvas ash1</a></li>
+ <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/canvas_ash2.html" title="http://glimr.rubyforge.org/cake/demos/canvas_ash2.html">Canvas ash2</a></li>
+ <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/canvas_ash8.html" title="http://glimr.rubyforge.org/cake/demos/canvas_ash8.html">Canvas ash8</a></li>
+ <li><a class="external" href="http://gyu.que.jp/jscloth/" title="http://gyu.que.jp/jscloth/">3D on 2D Canvas</a></li>
+ <li><a href="http://viliusle.github.io/miniPaint/">miniPaint - Image editor </a>(<a href="https://github.com/viliusle/miniPaint">source code</a>)</li>
+</ul>
+
+<h3 id="SVG" name="SVG">SVG</h3>
+
+<ul>
+ <li><a class="external" href="http://www.kde-look.org/CONTENT/content-files/19524-gearflowers.svg.gz">Gearflowers image</a> Nicht vergessen reinzuzoomen (funktioniert wenn lokal gespeichert)</li>
+ <li><a class="external" href="http://people.mozilla.com/~vladimir/demos/photos.svg">SVG photo demo</a> (Visuelle Effekte und Interaktion)</li>
+ <li><a class="external" href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">Bubblemenu</a> (Visuelle Effekte und Interaktion)</li>
+ <li><a class="external" href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">HTML transformationen</a> using <code>foreignObject</code> (Visuelle Effekte and transforms)</li>
+ <li><a class="external" href="http://svg-whiz.com/svg/linguistics/theCreepyMouth.svg">Phonetics Guide</a> (Interaktiv)</li>
+ <li><a class="external" href="http://www.lutanho.net/svgvml3d/platonic.html">3D objects demo</a> (Interaktiv)</li>
+ <li><a class="external" href="http://www.themaninblue.com/experiment/Blobular/" title="http://www.themaninblue.com/experiment/Blobular/">Blobular</a> (Interaktiv)</li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/video.svg">Video embedded in SVG</a> (oder benutze den <a class="external" href="http://www.double.co.nz/video_test/video_svg.tar.bz2">lokalen Download</a>)</li>
+ <li><a href="http://summerstyle.github.io/summer/">Summer HTML image map creator</a> (<a href="https://github.com/summerstyle/summer">source code</a>)</li>
+</ul>
+
+<h3 id="Video" name="Video">Video</h3>
+
+<ul>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test1.html">Streaming Anime, Movie Trailer and Interview</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test2.html">Billy's Browser Firefox Flick</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test3.html">Virtual Barber Shop</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test4.html">Transformers Movie Trailer</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test5.html">A Scanner Darkly Movie Trailer</a> (mit eingebauter Steuerung)</li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/events.html">Events firing and volume control</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/video.svg" title="http://www.double.co.nz/video_test/video.svg">Dragable and sizable videos</a></li>
+</ul>
+
+<h2 id="3D_Grafik">3D Grafik</h2>
+
+<h3 id="WebGL">WebGL</h3>
+
+<ul>
+ <li><a href="http://ondras.github.io/fireworks-webgl/">Web Audio Fireworks</a></li>
+ <li><a href="https://dl.dropboxusercontent.com/u/62064441/ioquake3.js/ioquake3.html">IoQuake3</a> (<a href="https://github.com/klaussilveira/ioquake3.js">source code</a>)</li>
+ <li><a href="http://micah.tech/demoscene/">Escher puzzle</a> (<a href="https://github.com/micahbolen/demoscene">source code</a>)</li>
+ <li><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a> (<a href="https://github.com/collinhover/kaiopua">source code</a>)</li>
+</ul>
+
+<h3 id="Virtual_Reality">Virtual Reality</h3>
+
+<ul>
+ <li><a href="http://mozvr.github.io/polarsea/">The Polar Sea</a> (<a href="https://github.com/MozVR/polarsea">source code</a>)</li>
+ <li><a href="http://mozvr.github.io/sechelt/">Sechelt fly-through</a> (<a href="https://github.com/mozvr/sechelt">source code</a>)</li>
+</ul>
+
+<h2 id="CSS">CSS</h2>
+
+<ul>
+ <li><a href="http://felixniklas.com/paperfold/">Paperfold</a></li>
+ <li><a href="http://ondras.zarovi.cz/games/blockout/">CSS Blockout</a></li>
+ <li><a href="http://ondras.zarovi.cz/demos/rubik/">Rubik's cube</a></li>
+ <li><a href="http://ondras.zarovi.cz/demos/nojs/">Pure CSS Slides</a></li>
+ <li>Planetarium (<a href="https://github.com/littleworkshop/planetarium">source code</a>)</li>
+ <li><a href="http://www.lesmoffat.co.uk/folio/forest/forest.html">CSS Paralax Forest</a></li>
+ <li><a href="http://webdeveloperbareilly.in/blog/css3/awesome-login-form.html">Awesome Login Page</a></li>
+ <li><a href="http://webdeveloperbareilly.in/blog/css3/onepage-scroll-template.html">CSS3 One Page Scroll</a></li>
+</ul>
+
+<h3 id="Transformations">Transformations</h3>
+
+<ul>
+ <li><a href="http://impress.github.io/impress.js">Impress.js</a> (<a href="https://github.com/impress/impress.js">source code</a>)</li>
+</ul>
+
+<h2 id="Spiele">Spiele</h2>
+
+<ul>
+ <li><a href="https://dl.dropboxusercontent.com/u/62064441/ioquake3.js/ioquake3.html">IoQuake3</a> (<a href="https://github.com/klaussilveira/ioquake3.js">source code</a>)</li>
+ <li><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a> (<a href="https://github.com/collinhover/kaiopua">source code</a>)</li>
+</ul>
+
+<h2 id="HTML">HTML</h2>
+
+<ul>
+ <li> <a href="http://zenphoton.com">Zen Photon Garden </a>(<a href="https://github.com/scanlime/zenphoton">source code</a>)</li>
+ <li><a href="http://webdeveloperbareilly.in/blog/smo/html-meta-tags-for-social-media-optimization.html">HTMl Meta Tags For SMO</a></li>
+</ul>
+
+<h2 id="Web_APIs">Web APIs</h2>
+
+<ul>
+</ul>
+
+<h3 id="Notifications_API">Notifications API</h3>
+
+<ul>
+ <li>HTML5 Notifications (<a href="https://github.com/elfoxero/html5notifications">source code</a>)</li>
+</ul>
+
+<ul>
+</ul>
+
+<h3 id="Web_Audio_API">Web Audio API</h3>
+
+<ul>
+ <li><a href="http://ondras.github.io/fireworks-webgl/">Web Audio Fireworks</a></li>
+ <li><a href="http://ondras.github.io/oscope/">oscope.js - JavaScript oscilloscope</a></li>
+ <li><a href="http://mdn.github.io/audio-buffer/">Audio Buffer demo</a> (<a href="http://mdn.github.io/audio-buffer/">source code</a>)</li>
+ <li><a href="http://nipe-systems.de/webapps/html5-web-audio/">HTML5 Web Audio Showcase</a> (<a href="https://github.com/NIPE-SYSTEMS/html5-web-audio-showcase">source code</a>)</li>
+ <li><a href="http://wayou.github.io/HTML5_Audio_Visualizer/">HTML5 Audio Visualizer</a> (<a href="https://github.com/Wayou/HTML5_Audio_Visualizer">source code</a>)</li>
+ <li><a href="http://carlosrafaelgn.com.br/GraphicalFilterEditor/">Graphical Filter Editor and Visualizer</a> (<a href="https://github.com/carlosrafaelgn/GraphicalFilterEditor">source code</a>)</li>
+</ul>
+
+<h3 id="Unclassified" name="Unclassified">Web Workers</h3>
+
+<ul>
+ <li><a href="http://ondras.github.io/fractal/">Web Worker Fractals</a></li>
+ <li><a href="http://ondras.github.io/photo/">Photo editor</a></li>
+ <li><a href="http://ondras.github.io/coral/">Coral generator</a></li>
+ <li><a class="external" href="http://nerget.com/rayjs-mt/rayjs.html" title="http://nerget.com/rayjs-mt/rayjs.html">Raytracer</a></li>
+ <li><a href="http://palerdot.github.io/hotcold/">HotCold Touch Typing</a></li>
+</ul>
diff --git a/files/de/web/events/change/index.html b/files/de/web/events/change/index.html
new file mode 100644
index 0000000000..8836b6bc67
--- /dev/null
+++ b/files/de/web/events/change/index.html
@@ -0,0 +1,109 @@
+---
+title: change
+slug: Web/Events/change
+translation_of: Web/API/HTMLElement/change_event
+---
+<p>Das <code>change</code> Event wird von {{HTMLElement("input")}}, {{HTMLElement("select")}}, und {{HTMLElement("textarea")}} Elementen ausgelöst, wenn der Benutzer den Wert des Elements verändert. Im Gegensatz zum {{event("input")}} Event wird das <code>change</code> Event nicht bei jeder Änderung der <code>value</code> Eigenschaft ausgelöst.</p>
+
+<h2 id="General_info">General info</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Specification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#event-input-change">HTML5</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">Yes</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
+ <dd style="margin: 0 0 0 120px;">undefined</dd>
+</dl>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Das <code>change</code> Event wird abhängig vom Form-Element, welches verändert wird, und der Art der Benutzerinteraktion mit dem Element in verschiedenen Situationen ausgelöst:</p>
+
+<ul>
+ <li>Wenn das Element aktiviert ist (durch einen KIlick oder Verwendung der Tastatur) bei <code>&lt;input type="radio"&gt;</code> und <code>&lt;input type="checkbox"&gt;</code>;</li>
+ <li>Wenn der Benutzer den Veränderung explizit bestätigt (z.B.: beim Auswählen eines Wertes eines {{HTMLElement("select")}}'s Dropdown mit einem Mausklick, beim Auswählen eine Datums bei einem Date Picker für <code>&lt;input type="date"&gt;</code>, beim Auswählen einer Datei im File Picker für <code>&lt;input type="file"&gt;</code>, etc.);</li>
+ <li>Wenn das Element den Fokus verliert, nachdem sein Wert verändert aber noch nicht bestätigt wurde (z.B.: nach dem Editieren des Wert eines {{HTMLElement("textarea")}} oder <code>&lt;input type="text"&gt;</code>).</li>
+</ul>
+
+<p>Verschiedene Webbbrowser unterscheiden sich darin, ob das <code>change</code> Event bei bestimmten Interaktionen ausgelöst werden soll oder nicht. Tastaturnavigation in {{HTMLElement("select")}} Elementen zum Beispiel lösen das <code>change</code> event in Gecko nie aus bis der Benutzer die Enter-Taste drückt oder den Fokus vom <code>&lt;select&gt;</code> (see {{bug("126379")}}) Element nimmt.</p>
+
+<p>Die HTML Spezifikation listet<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#do-not-apply" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#do-not-apply"> die <code>&lt;input&gt;</code> Typen, welche das <code>change</code> Event auslösen können</a>.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Ein unvollständiges Beispiel auf jsfiddle: <a href="http://jsfiddle.net/nfakc/5/" title="http://jsfiddle.net/nfakc/5/">http://jsfiddle.net/nfakc/5/</a>, welches möglicherweise nich in allen Webbrowsern funktioniert.</p>
+
+<h3 id="Beispiel_Change_Event_auf_einem_select">Beispiel: Change Event auf einem <code>select</code></h3>
+
+<p>Der folgende Code behandelt das <code>change</code> Event eines <code>select</code> durch den Aufruf der <code>changeEventHandler</code> Funktion im <code>onchange</code> Attribut. Die Funktion liest den Wert des Elements, das das Event auslöste, und gibt ihn in einem Alert aus.</p>
+
+<pre class="brush: html">&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Example: Change event on a select&lt;/title&gt;
+    &lt;script type="text/javascript"&gt;
+      function changeEventHandler(event) {
+        alert('You like ' + event.target.value + ' ice cream.');
+      }
+    &lt;/script&gt;
+    &lt;/head&gt;
+    &lt;body&gt;
+        &lt;label&gt;Choose an ice cream flavor: &lt;/label&gt;
+        &lt;select size="1" onchange="changeEventHandler(event);"&gt;
+            &lt;option&gt;chocolate&lt;/option&gt;
+            &lt;option&gt;strawberry&lt;/option&gt;
+            &lt;option&gt;vanilla&lt;/option&gt;
+        &lt;/select&gt;
+    &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<p>{{domxref("NetworkInformation.connection")}} löst das <code>change</code> Event  aus, wenn sich die Informationen zur Verbindung verändern.</p>
+
+<h2 id="Webbrowserkompatibilität">Webbrowserkompatibilität</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<p>Laut <a href="http://www.quirksmode.org/dom/events/">QuirksMode</a> sind Chrome und Firefox manchmal kompatibel. Aber IE9 und frühere Versionen von IE10 haben nur eine unvollständige Unterstützung.</p>
diff --git a/files/de/web/events/domcontentloaded/index.html b/files/de/web/events/domcontentloaded/index.html
new file mode 100644
index 0000000000..d6841f774a
--- /dev/null
+++ b/files/de/web/events/domcontentloaded/index.html
@@ -0,0 +1,156 @@
+---
+title: DOMContentLoaded
+slug: Web/Events/DOMContentLoaded
+tags:
+  - Referenz
+  - Web
+  - events
+translation_of: Web/API/Window/DOMContentLoaded_event
+---
+<p>Das <code>DOMContentLoaded</code>-Event wird ausgelöst, wenn das initiale HTML-Dokument vollständig geladen und geparst ist. Es wird dabei nicht auf Stylesheets, Bilder und Frames gewartet. Das <a href="/en-US/docs/Mozilla_event_reference/load"><code>load-Event</code></a> sollte im Gegensatz dazu nur benutzt werden um eine komplett geladene Seite zu erkennen. Es ist ein weit verbreiteter Fehler das <a href="/en-US/docs/Mozilla_event_reference/load"><code>load-Event</code></a> zu benutzen, obwohl <code>DOMContentLoaded</code> wesentlich besser geeignet wäre.</p>
+
+<p>{{Note("Synchrones JavaScript pausiert das Parsen des DOM.")}}</p>
+
+<p>{{Note("Es gibt viele Bibliotheken, die Methoden bereitstellen, um bei verschiedenen Browsern zu erkennen, ob das DOM bereit ist.")}}</p>
+
+<h2 id="Performanz">Performanz</h2>
+
+<p>Wenn DOM so schnell wie möglich geladen werden soll, nachdem der Benutzer die Seite angefragt hat, sollte zum einen das <a href="/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">JavaScript asynchron</a> ausgeführt und <a href="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery">das Laden der Stylesheets optimiert</a> werden, was bei zu häufigem Einsatz den Aufbau der Seite durch das parallele Laden verlangsamen kann.</p>
+
+<h2 id="Allgemeine_Informationen">Allgemeine Informationen</h2>
+
+<dl>
+ <dt style="width: 120px; text-align: right; float: left;">Specification</dt>
+ <dd style="margin: 0px 0px 0px 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html#the-end">HTML5</a></dd>
+ <dt style="width: 120px; text-align: right; float: left;">Interface</dt>
+ <dd style="margin: 0px 0px 0px 120px;">Event</dd>
+ <dt style="width: 120px; text-align: right; float: left;">Bubbles</dt>
+ <dd style="margin: 0px 0px 0px 120px;">Ja</dd>
+ <dt style="width: 120px; text-align: right; float: left;">Abbrechbar</dt>
+ <dd style="margin: 0px 0px 0px 120px;">Ja (Auch wenn es als ein einfaches Event spezifiziert ist, das nicht abgebrochen werden kann)</dd>
+ <dt style="width: 120px; text-align: right; float: left;">Ziel</dt>
+ <dd style="margin: 0px 0px 0px 120px;">Dokument</dd>
+ <dt style="width: 120px; text-align: right; float: left;">Standardaktion</dt>
+ <dd style="margin: 0px 0px 0px 120px;">Keine</dd>
+</dl>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>Das Zielelement des Events (das oberste Ziel im DOM Baum).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Der Typ des Events.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Gibt an, ob das Event weiter nach oben wandert (bubble).</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Gibt and, ob das Event abbrechbar ist.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: html">&lt;script&gt;
+  document.addEventListener("DOMContentLoaded", function(event) {
+    console.log("DOM fully loaded and parsed");
+  });
+&lt;/script&gt;
+</pre>
+
+<pre class="brush: html">&lt;script&gt;
+  document.addEventListener("DOMContentLoaded", function(event) {
+    console.log("DOM fully loaded and parsed");
+  });
+
+for(var i=0; i&lt;1000000000; i++)
+{} // Dieses synchrone Script wird das Parsen des DOMs verzögern. Dadurch wird das DOMContentLoaded-Event erst später ausgelöst.
+&lt;/script&gt;
+</pre>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1")}}<sup>[1]</sup></td>
+   <td>9.0<sup>[2]</sup></td>
+   <td>9.0</td>
+   <td>3.1<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}<sup>[2]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Bubbling für dieses Event benötigt mindestens Gecko 1.9.2, Chrome 6, and Safari 4.</p>
+
+<p>[2] Internet Explorer 8 unterstützt das  <code>readystatechange</code>-Event, welches genutzt werden kann um festzustellen, wenn das DOM fertig ist. In früheren Versionen des Internet Explorers kann dieser Status festgestellt werden, indem wiederholt versucht wird, <code>document.documentElement.doScroll("left");</code> auszuführen. Dieser Befehl gibt einen Error zurück, bis das DOM bereit ist.</p>
+
+<h2 id="Verwandte_Events">Verwandte Events</h2>
+
+<ul>
+ <li>{{event("DOMContentLoaded")}}</li>
+ <li>{{event("readystatechange")}}</li>
+ <li>{{event("load")}}</li>
+ <li>{{event("beforeunload")}}</li>
+ <li>{{event("unload")}}</li>
+</ul>
diff --git a/files/de/web/events/index.html b/files/de/web/events/index.html
new file mode 100644
index 0000000000..ed03ce3a7f
--- /dev/null
+++ b/files/de/web/events/index.html
@@ -0,0 +1,1981 @@
+---
+title: Event reference
+slug: Web/Events
+tags:
+  - Mozilla
+  - NeedsTranslation
+  - Reference
+  - Référence(2)
+  - TopicStub
+  - Web
+translation_of: Web/Events
+---
+<p>DOM-Events werden gesendet, um Code von interessanten Dingen, welche stattgefunden haben, anzuzeigen. Jedes Event wird durch ein Objekt dargestellt, das auf der {{domxref ("Event")}}-Schnittstelle basiert und möglicherweise zusätzliche benutzerdefinierte Felder und/oder Funktionen enthält, die dazu benutzt werden, um zusätzliche Informationen darüber zu erhalten, was genau passiert ist. Events können alles repräsentieren, angefangen von einfachen Benutzerinteraktionen bis hin zu automatisierten Benachrichtigungen über Abläufe, die im Rendering-Modell stattgefunden haben.</p>
+
+<p>Dieser Artikel zeigt eine Liste von Events, die gesendet werden können; einige sind Standard-Events, definiert in offiziellen Spezifikationen, während andere solche Events sind, die intern von bestimmten Browsern verwendet werden. Beispielswese werden Mozilla-spezifische Events aufgelistet, so dass <a href="/en-US/docs/Mozilla/Add-ons">add-ons</a> sie verwenden werden können, um mit dem Browser zu interagieren.</p>
+
+<h2 id="Standard_Events">Standard Events</h2>
+
+<p>Diese Ereignisse werden in offiziellen Web-Spezifikationen definiert und sollten in allen Browsern gemeinsam sein. Jedes Ereignis wird zusammen mit der Schnittstelle aufgelistet, die das Objekt darstellt, das an die Empfänger des Ereignisses gesendet wird (so können Sie Informationen darüber finden, welche Daten mit jedem Ereignis bereitgestellt werden) sowie einen Link zu der Spezifikation oder Spezifikationen, die das Ereignis definieren.</p>
+
+<table class="standard-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <th class="header" style="width: 220px;">Event Name</th>
+   <th class="header" style="width: 90px;">Event Typ</th>
+   <th class="header" style="width: 100px;">Spezifikation</th>
+   <th class="header">Wird abgefeuert wenn...</th>
+  </tr>
+  <tr>
+   <td>{{event("abort")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-abort">DOM L3</a></td>
+   <td>The loading of a resource has been aborted.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/abort_(ProgressEvent)">abort</a></code></td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a> and <a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-abort">XMLHttpRequest</a></td>
+   <td>Progression has been terminated (not due to an error).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/abort_indexedDB">abort</a></code></td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#database-interface">IndexedDB</a></td>
+   <td>A transaction has been aborted.</td>
+  </tr>
+  <tr>
+   <td>{{event("afterprint")}}{{gecko_minversion_inline("6")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/webappapis.html#printing">HTML5</a></td>
+   <td>The associated document has started printing or the print preview has been closed.</td>
+  </tr>
+  <tr>
+   <td>{{event("animationend")}}</td>
+   <td>{{domxref("AnimationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></td>
+   <td>A <a href="/en-US/docs/CSS/CSS_animations">CSS animation</a> has completed.</td>
+  </tr>
+  <tr>
+   <td>{{event("animationiteration")}}</td>
+   <td>{{domxref("AnimationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></td>
+   <td>A <a href="/en-US/docs/CSS/CSS_animations">CSS animation</a> is repeated.</td>
+  </tr>
+  <tr>
+   <td>{{event("animationstart")}}</td>
+   <td>{{domxref("AnimationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></td>
+   <td>A <a href="/en-US/docs/CSS/CSS_animations">CSS animation</a> has started.</td>
+  </tr>
+  <tr>
+   <td>{{event("audioprocess")}}</td>
+   <td>{{domxref("AudioProcessingEvent")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Audio API', '#AudioProcessingEvent', 'audioprocess')}}</td>
+   <td>The input buffer of a {{domxref("ScriptProcessorNode")}} is ready to be processed.</td>
+  </tr>
+  <tr>
+   <td>{{event("beforeprint")}} {{gecko_minversion_inline("6")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/webappapis.html#printing">HTML5</a></td>
+   <td>The associated document is about to be printed or previewed for printing.</td>
+  </tr>
+  <tr>
+   <td>{{event("beforeunload")}}</td>
+   <td>{{domxref("BeforeUnloadEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/browsers.html#unloading-documents">HTML5 </a></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{event("beginEvent")}}</td>
+   <td>{{domxref("TimeEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>A <a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SMIL</a> animation element begins.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/blocked_indexedDB">blocked</a></code></td>
+   <td></td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td>
+   <td>An open connection to a database is blocking a <code>versionchange</code> transaction on the same database.</td>
+  </tr>
+  <tr>
+   <td>{{event("blur")}}</td>
+   <td>{{domxref("FocusEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-blur">DOM L3</a></td>
+   <td>An element has lost focus (does not bubble).</td>
+  </tr>
+  <tr>
+   <td>{{event("cached")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td>
+   <td>The resources listed in the manifest have been downloaded, and the application is now cached.</td>
+  </tr>
+  <tr>
+   <td>{{event("canplay")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplay">HTML5 media</a></td>
+   <td>The user agent can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.</td>
+  </tr>
+  <tr>
+   <td>{{event("canplaythrough")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplaythrough">HTML5 media</a></td>
+   <td>The user agent can play the media, and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content.</td>
+  </tr>
+  <tr>
+   <td>{{event("change")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM L2</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#event-input-change">HTML5</a></td>
+   <td>An element loses focus and its value changed since gaining focus.</td>
+  </tr>
+  <tr>
+   <td>{{event("chargingchange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td>
+   <td>The battery begins or stops charging.</td>
+  </tr>
+  <tr>
+   <td>{{event("chargingtimechange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td>
+   <td>The <code>chargingTime</code> attribute has been updated.</td>
+  </tr>
+  <tr>
+   <td>{{event("checking")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td>
+   <td>The user agent is checking for an update, or attempting to download the cache manifest for the first time.</td>
+  </tr>
+  <tr>
+   <td>{{event("click")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-click">DOM L3</a></td>
+   <td>A pointing device button has been pressed and released on an element.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/close_websocket">close</a></code></td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td>
+   <td>A WebSocket connection has been closed.</td>
+  </tr>
+  <tr>
+   <td>{{event("compassneedscalibration")}}</td>
+   <td>{{domxref("SensorEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/orientation-event/#compassneedscalibration">Orientation</a></td>
+   <td>The compass used to obtain orientation data is in need of calibration.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/complete_indexedDB">complete</a></code></td>
+   <td></td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#transaction">IndexedDB</a></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{event("complete")}}</td>
+   <td>{{domxref("OfflineAudioCompletionEvent")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Audio API', '#OfflineAudioCompletionEvent-section', 'OfflineAudioCompletionEvent')}}</td>
+   <td>The rendering of an {{domxref("OfflineAudioContext")}} is terminated.</td>
+  </tr>
+  <tr>
+   <td>{{event("compositionend")}}</td>
+   <td>{{domxref("CompositionEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-compositionend">DOM L3</a></td>
+   <td>The composition of a passage of text has been completed or canceled.</td>
+  </tr>
+  <tr>
+   <td>{{event("compositionstart")}}{{gecko_minversion_inline("9")}}</td>
+   <td>{{domxref("CompositionEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-compositionstart">DOM L3</a></td>
+   <td>The composition of a passage of text is prepared (similar to keydown for a keyboard input, but works with other inputs such as speech recognition).</td>
+  </tr>
+  <tr>
+   <td>{{event("compositionupdate")}}{{gecko_minversion_inline("9")}}</td>
+   <td>{{domxref("CompositionEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-compositionupdate">DOM L3</a></td>
+   <td>A character is added to a passage of text being composed.</td>
+  </tr>
+  <tr>
+   <td>{{event("contextmenu")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/interactive-elements.html#context-menus">HTML5</a></td>
+   <td>The right button of the mouse is clicked (before the context menu is displayed).</td>
+  </tr>
+  <tr>
+   <td>{{event("copy")}}</td>
+   <td>{{domxref("ClipboardEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/clipboard-apis/#copy-event">Clipboard</a></td>
+   <td>The text selection has been added to the clipboard.</td>
+  </tr>
+  <tr>
+   <td>{{event("cut")}}</td>
+   <td>{{domxref("ClipboardEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/clipboard-apis/#cut-event">Clipboard</a></td>
+   <td>The text selection has been removed from the document and added to the clipboard.</td>
+  </tr>
+  <tr>
+   <td>{{event("dblclick")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-dblclick">DOM L3</a></td>
+   <td>A pointing device button is clicked twice on an element.</td>
+  </tr>
+  <tr>
+   <td>{{event("devicelight")}}</td>
+   <td>{{domxref("DeviceLightEvent")}}</td>
+   <td style="white-space: nowrap;"><a class="external" href="http://dvcs.w3.org/hg/dap/raw-file/tip/light/Overview.html" lang="en" title="The definition of 'Ambient Light Events' in that specification.">Ambient Light Events</a></td>
+   <td>Fresh data is available from a light sensor.</td>
+  </tr>
+  <tr>
+   <td>{{event("devicemotion")}}</td>
+   <td>{{domxref("DeviceMotionEvent")}}</td>
+   <td style="white-space: nowrap;"><a class="external" href="http://dev.w3.org/geo/api/spec-source-orientation.html" lang="en" title="The 'Device Orientation Events' specification">Device Orientation Events</a></td>
+   <td>Fresh data is available from a motion sensor.</td>
+  </tr>
+  <tr>
+   <td>{{event("deviceorientation")}}</td>
+   <td>{{domxref("DeviceOrientationEvent")}}</td>
+   <td style="white-space: nowrap;"><a class="external" href="http://dev.w3.org/geo/api/spec-source-orientation.html" lang="en" title="The 'Device Orientation Events' specification">Device Orientation Events</a></td>
+   <td>Fresh data is available from an orientation sensor.</td>
+  </tr>
+  <tr>
+   <td>{{event("deviceproximity")}}</td>
+   <td>{{domxref("DeviceProximityEvent")}}</td>
+   <td style="white-space: nowrap;"><a class="external" href="http://dvcs.w3.org/hg/dap/raw-file/tip/proximity/Overview.html" lang="en" title="The definition of 'Proximity Events' in that specification.">Proximity Events</a></td>
+   <td>Fresh data is available from a proximity sensor (indicates an approximated distance between the device and a nearby object).</td>
+  </tr>
+  <tr>
+   <td>{{event("dischargingtimechange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td>
+   <td>The <code>dischargingTime</code> attribute has been updated.</td>
+  </tr>
+  <tr>
+   <td><code>DOMActivate</code> {{deprecated_inline}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMActivate">DOM L3</a></td>
+   <td>A button, link or state changing element is activated (use {{event("click")}} instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMAttributeNameChanged</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationNameEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/2011/WD-DOM-Level-3-Events-20110531/#event-type-DOMAttributeNameChanged">DOM L3</a> Removed</td>
+   <td>The name of an attribute changed (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMAttrModified</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMAttrModified">DOM L3</a></td>
+   <td>The value of an attribute has been modified (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMCharacterDataModified</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMCharacterDataModified">DOM L3</a></td>
+   <td>A text or another <a href="/en-US/docs/DOM/CharacterData">CharacterData</a> has changed (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td>{{event("DOMContentLoaded")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html#the-end">HTML5</a></td>
+   <td>The document has finished loading (but not its dependent resources).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMElementNameChanged</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationNameEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/2011/WD-DOM-Level-3-Events-20110531/#event-type-DOMElementNameChanged">DOM L3</a> Removed</td>
+   <td>The name of an element changed (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td><code>DOMFocusIn</code> {{deprecated_inline}}</td>
+   <td>{{domxref("FocusEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMFocusIn">DOM L3</a></td>
+   <td>An element has received focus (use {{event("focus")}} or {{event("focusin")}} instead).</td>
+  </tr>
+  <tr>
+   <td><code>DOMFocusOut</code> {{deprecated_inline}}</td>
+   <td>{{domxref("FocusEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMFocusOut">DOM L3</a></td>
+   <td>An element has lost focus (use {{event("blur")}} or {{event("focusout")}} instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInserted</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInserted">DOM L3</a></td>
+   <td>A node has been added as a child of another node (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInsertedIntoDocument</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInsertedIntoDocument">DOM L3</a></td>
+   <td>A node has been inserted into the document (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemoved</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeRemoved">DOM L3</a></td>
+   <td>A node has been removed from its parent node (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemovedFromDocument</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeRemovedFromDocument">DOM L3</a></td>
+   <td>A node has been removed from the document (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMSubtreeModified</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMSubtreeModified">DOM L3</a></td>
+   <td>A change happened in the document (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td>{{event("downloading")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td>
+   <td>The user agent has found an update and is fetching it, or is downloading the resources listed by the cache manifest for the first time.</td>
+  </tr>
+  <tr>
+   <td>{{event("drag")}}</td>
+   <td>{{domxref("DragEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-drag">HTML5</a></td>
+   <td>An element or text selection is being dragged (every 350ms).</td>
+  </tr>
+  <tr>
+   <td>{{event("dragend")}}</td>
+   <td>{{domxref("DragEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragend">HTML5</a></td>
+   <td>A drag operation is being ended (by releasing a mouse button or hitting the escape key).</td>
+  </tr>
+  <tr>
+   <td>{{event("dragenter")}}</td>
+   <td>{{domxref("DragEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragenter">HTML5</a></td>
+   <td>A dragged element or text selection enters a valid drop target.</td>
+  </tr>
+  <tr>
+   <td>{{event("dragleave")}}</td>
+   <td>{{domxref("DragEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragleave">HTML5</a></td>
+   <td>A dragged element or text selection leaves a valid drop target.</td>
+  </tr>
+  <tr>
+   <td>{{event("dragover")}}</td>
+   <td>{{domxref("DragEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragover">HTML5</a></td>
+   <td>An element or text selection is being dragged over a valid drop target (every 350ms).</td>
+  </tr>
+  <tr>
+   <td>{{event("dragstart")}}</td>
+   <td>{{domxref("DragEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragstart">HTML5</a></td>
+   <td>The user starts dragging an element or text selection.</td>
+  </tr>
+  <tr>
+   <td>{{event("drop")}}</td>
+   <td>{{domxref("DragEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-drop">HTML5</a></td>
+   <td>An element is dropped on a valid drop target.</td>
+  </tr>
+  <tr>
+   <td>{{event("durationchange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-durationchange">HTML5 media</a></td>
+   <td>The <code>duration</code> attribute has been updated.</td>
+  </tr>
+  <tr>
+   <td>{{event("emptied")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-emptied">HTML5 media</a></td>
+   <td>The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the <a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" rel="internal"><code>load()</code></a> method is called to reload it.</td>
+  </tr>
+  <tr>
+   <td>{{event("ended")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-ended">HTML5 media</a></td>
+   <td>Playback has stopped because the end of the media was reached.</td>
+  </tr>
+  <tr>
+   <td>{{event("ended_(Web_Audio)", "ended")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;">{{SpecName("Web Audio API")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{event("endEvent")}}</td>
+   <td>{{domxref("TimeEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>A <a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SMIL</a> animation element ends.</td>
+  </tr>
+  <tr>
+   <td>{{event("error")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-error">DOM L3</a></td>
+   <td>A resource failed to load.</td>
+  </tr>
+  <tr>
+   <td>{{event("error")}}</td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> and </span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-error">XMLHttpRequest</a></td>
+   <td>Progression has failed.</td>
+  </tr>
+  <tr>
+   <td>{{event("error")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td>
+   <td>An error occurred while downloading the cache manifest or updating the content of the application.</td>
+  </tr>
+  <tr>
+   <td>{{event("error")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td>
+   <td>A WebSocket connection has been closed with prejudice (some data couldn't be sent for example).</td>
+  </tr>
+  <tr>
+   <td>{{event("error")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/eventsource/">Server Sent Events</a></td>
+   <td>An event source connection has been failed.</td>
+  </tr>
+  <tr>
+   <td>{{event("error")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td>
+   <td>A request caused an error and failed.</td>
+  </tr>
+  <tr>
+   <td>{{event("focus")}}</td>
+   <td>{{domxref("FocusEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focus">DOM L3</a></td>
+   <td>An element has received focus (does not bubble).</td>
+  </tr>
+  <tr>
+   <td>{{event("focusin")}}</td>
+   <td>{{domxref("FocusEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusIn">DOM L3</a></td>
+   <td>An element is about to receive focus (bubbles).</td>
+  </tr>
+  <tr>
+   <td>{{event("focusout")}}</td>
+   <td>{{domxref("FocusEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusout">DOM L3</a></td>
+   <td>An element is about to lose focus (bubbles).</td>
+  </tr>
+  <tr>
+   <td>{{event("fullscreenchange")}}{{gecko_minversion_inline("9")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Full Screen</a></td>
+   <td>An element was turned to fullscreen mode or back to normal mode.</td>
+  </tr>
+  <tr>
+   <td>{{event("fullscreenerror")}}{{gecko_minversion_inline("9")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Full Screen</a></td>
+   <td>It was impossible to switch to fullscreen mode for technical reasons or because the permission was denied.</td>
+  </tr>
+  <tr>
+   <td>{{event("gamepadconnected")}}</td>
+   <td>{{domxref("GamepadEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/gamepad/#the-gamepadconnected-event">Gamepad</a></td>
+   <td>A gamepad has been connected.</td>
+  </tr>
+  <tr>
+   <td>{{event("gamepaddisconnected")}}</td>
+   <td>{{domxref("GamepadEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/gamepad/#the-gamepaddisconnected-event">Gamepad</a></td>
+   <td>A gamepad has been disconnected.</td>
+  </tr>
+  <tr>
+   <td>{{event("hashchange")}}</td>
+   <td>{{domxref("HashChangeEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-hashchange">HTML5</a></td>
+   <td>The fragment identifier of the URL has changed (the part of the URL after the #).</td>
+  </tr>
+  <tr>
+   <td>{{event("input")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/forms.html#common-event-behaviors">HTML5</a></td>
+   <td>The value of an element changes or the content of an element with the attribute <a href="/en-US/docs/DOM/Element.contentEditable">contenteditable</a> is modified.</td>
+  </tr>
+  <tr>
+   <td>{{event("invalid")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#constraint-validation">HTML5</a></td>
+   <td>A submittable element has been checked and doesn't satisfy its constraints.</td>
+  </tr>
+  <tr>
+   <td>{{event("keydown")}}</td>
+   <td>{{domxref("KeyboardEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keydown">DOM L3</a></td>
+   <td>A key is pressed down.</td>
+  </tr>
+  <tr>
+   <td>{{event("keypress")}}</td>
+   <td>{{domxref("KeyboardEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keypress">DOM L3</a></td>
+   <td>A key is pressed down and that key normally produces a character value (use input instead).</td>
+  </tr>
+  <tr>
+   <td>{{event("keyup")}}</td>
+   <td>{{domxref("KeyboardEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keyup">DOM L3</a></td>
+   <td>A key is released.</td>
+  </tr>
+  <tr>
+   <td>{{event("languagechange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;">{{ SpecName('HTML5.1', '#dom-navigator-languages', 'NavigatorLanguage.languages') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{event("levelchange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td>
+   <td>The <code>level</code> attribute has been updated.</td>
+  </tr>
+  <tr>
+   <td>{{event("load")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-load">DOM L3</a></td>
+   <td>A resource and its dependent resources have finished loading.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/load_(ProgressEvent)">load</a></code></td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-load">XMLHttpRequest</a></td>
+   <td>Progression has been successful.</td>
+  </tr>
+  <tr>
+   <td>{{event("loadeddata")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-loadeddata">HTML5 media</a></td>
+   <td>The first frame of the media has finished loading.</td>
+  </tr>
+  <tr>
+   <td>{{event("loadedmetadata")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-loadedmetadata">HTML5 media</a></td>
+   <td>The metadata has been loaded.</td>
+  </tr>
+  <tr>
+   <td>{{event("loadend")}}</td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-loadend">XMLHttpRequest</a></td>
+   <td>Progress has stopped (after "error", "abort" or "load" have been dispatched).</td>
+  </tr>
+  <tr>
+   <td>{{event("loadstart")}}</td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress </a><span>and </span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-loadstart">XMLHttpRequest</a></td>
+   <td>Progress has begun.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/message_websocket">message</a></code></td>
+   <td>{{domxref("MessageEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td>
+   <td>A message is received through a WebSocket.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/message_webworker">message</a></code></td>
+   <td>{{domxref("MessageEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/workers/#communicating-with-a-dedicated-worker">Web Workers</a></td>
+   <td>A message is received from a Web Worker.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/message_webmessaging">message</a></code></td>
+   <td>{{domxref("MessageEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/webmessaging/">Web Messaging</a></td>
+   <td>A message is received from a child (i)frame or a parent window.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/message_serversentevents">message</a></code></td>
+   <td>{{domxref("MessageEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/eventsource/">Server Sent Events</a></td>
+   <td>A message is received through an event source.</td>
+  </tr>
+  <tr>
+   <td>{{event("mousedown")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mousedown">DOM L3</a></td>
+   <td>A pointing device button (usually a mouse) is pressed on an element.</td>
+  </tr>
+  <tr>
+   <td>{{event("mouseenter")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseenter">DOM L3</a></td>
+   <td>A pointing device is moved onto the element that has the listener attached.</td>
+  </tr>
+  <tr>
+   <td>{{event("mouseleave")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseleave">DOM L3</a></td>
+   <td>A pointing device is moved off the element that has the listener attached.</td>
+  </tr>
+  <tr>
+   <td>{{event("mousemove")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mousemove">DOM L3</a></td>
+   <td>A pointing device is moved over an element.</td>
+  </tr>
+  <tr>
+   <td>{{event("mouseout")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseout">DOM L3</a></td>
+   <td>A pointing device is moved off the element that has the listener attached or off one of its children.</td>
+  </tr>
+  <tr>
+   <td>{{event("mouseover")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseover">DOM L3</a></td>
+   <td>A pointing device is moved onto the element that has the listener attached or onto one of its children.</td>
+  </tr>
+  <tr>
+   <td>{{event("mouseup")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseup">DOM L3</a></td>
+   <td>A pointing device button is released over an element.</td>
+  </tr>
+  <tr>
+   <td>{{event("noupdate")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td>
+   <td>The manifest hadn't changed.</td>
+  </tr>
+  <tr>
+   <td>{{event("obsolete")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td>
+   <td>The manifest was found to have become a 404 or 410 page, so the application cache is being deleted.</td>
+  </tr>
+  <tr>
+   <td>{{event("offline")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#event-offline">HTML5 offline</a></td>
+   <td>The browser has lost access to the network.</td>
+  </tr>
+  <tr>
+   <td>{{event("online")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#event-online">HTML5 offline</a></td>
+   <td>The browser has gained access to the network (but particular websites might be unreachable).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/open_websocket">open</a></code></td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td>
+   <td>A WebSocket connection has been established.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/open_serversentevents">open</a></code></td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/eventsource/">Server Sent Events</a></td>
+   <td>An event source connection has been established.</td>
+  </tr>
+  <tr>
+   <td>{{event("orientationchange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/screen-orientation/">Screen Orientation</a></td>
+   <td>The orientation of the device (portrait/landscape) has changed</td>
+  </tr>
+  <tr>
+   <td>{{event("pagehide")}}</td>
+   <td>{{domxref("PageTransitionEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pagehide">HTML5</a></td>
+   <td>A session history entry is being traversed from.</td>
+  </tr>
+  <tr>
+   <td>{{event("pageshow")}}</td>
+   <td>{{domxref("PageTransitionEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pageshow">HTML5</a></td>
+   <td>A session history entry is being traversed to.</td>
+  </tr>
+  <tr>
+   <td>{{event("paste")}}</td>
+   <td>{{domxref("ClipboardEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/clipboard-apis/#paste-event">Clipboard</a></td>
+   <td>Data has been transfered from the system clipboard to the document.</td>
+  </tr>
+  <tr>
+   <td>{{event("pause")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-pause">HTML5 media</a></td>
+   <td>Playback has been paused.</td>
+  </tr>
+  <tr>
+   <td>{{event("pointerlockchange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerlock/#pointerlockchange-and-pointerlockerror-events">Pointer Lock</a></td>
+   <td>The pointer was locked or released.</td>
+  </tr>
+  <tr>
+   <td>{{event("pointerlockerror")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerlock/#pointerlockchange-and-pointerlockerror-events">Pointer Lock</a></td>
+   <td>It was impossible to lock the pointer for technical reasons or because the permission was denied.</td>
+  </tr>
+  <tr>
+   <td>{{event("play")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-play">HTML5 media</a></td>
+   <td>Playback has begun.</td>
+  </tr>
+  <tr>
+   <td>{{event("playing")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-playing">HTML5 media</a></td>
+   <td>Playback is ready to start after having been paused or delayed due to lack of data.</td>
+  </tr>
+  <tr>
+   <td>{{event("popstate")}}</td>
+   <td>{{domxref("PopStateEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-popstate">HTML5</a></td>
+   <td>A session history entry is being navigated to (in certain cases).</td>
+  </tr>
+  <tr>
+   <td>{{event("progress")}}</td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-progress">XMLHttpRequest</a></td>
+   <td>In progress.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/progress_(appcache_event)">progress</a></code></td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td>
+   <td>The user agent is downloading resources listed by the manifest.</td>
+  </tr>
+  <tr>
+   <td>{{event("ratechange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-ratechange">HTML5 media</a></td>
+   <td>The playback rate has changed.</td>
+  </tr>
+  <tr>
+   <td>{{event("readystatechange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><span>HTML5 <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-readystatechange">XMLHttpRequest</a></td>
+   <td>The readyState attribute of a document has changed.</td>
+  </tr>
+  <tr>
+   <td>{{event("repeatEvent")}}</td>
+   <td>{{domxref("TimeEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>A <a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SMIL</a> animation element is repeated.</td>
+  </tr>
+  <tr>
+   <td>{{event("reset")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM L2</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-0#resetting-a-form">HTML5</a></td>
+   <td>A form is reset.</td>
+  </tr>
+  <tr>
+   <td>{{event("resize")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-resize">DOM L3</a></td>
+   <td>The document view has been resized.</td>
+  </tr>
+  <tr>
+   <td>{{event("scroll")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-scroll">DOM L3</a></td>
+   <td>The document view or an element has been scrolled.</td>
+  </tr>
+  <tr>
+   <td>{{event("seeked")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-seeked">HTML5 media</a></td>
+   <td>A <em>seek</em> operation completed.</td>
+  </tr>
+  <tr>
+   <td>{{event("seeking")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-seeking">HTML5 media</a></td>
+   <td>A <em>seek</em> operation began.</td>
+  </tr>
+  <tr>
+   <td>{{event("select")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-select">DOM L3</a></td>
+   <td>Some text is being selected.</td>
+  </tr>
+  <tr>
+   <td>{{event("show")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/interactive-elements.html#context-menus">HTML5</a></td>
+   <td>A contextmenu event was fired on/bubbled to an element that has a <a href="/en-US/docs/DOM/element.contextmenu">contextmenu</a> attribute</td>
+  </tr>
+  <tr>
+   <td>{{event("stalled")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-stalled">HTML5 media</a></td>
+   <td>The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.</td>
+  </tr>
+  <tr>
+   <td>{{event("storage")}}</td>
+   <td>{{domxref("StorageEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/webstorage/#the-storage-event">Web Storage</a></td>
+   <td>A storage area (<a href="/en-US/docs/DOM/Storage#localStorage">localStorage</a> or <a href="/en-US/docs/DOM/Storage#sessionStorage">sessionStorage</a>) has changed.</td>
+  </tr>
+  <tr>
+   <td>{{event("submit")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM L2</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-algorithm">HTML5</a></td>
+   <td>A form is submitted.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/success_indexedDB">success</a></code></td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td>
+   <td>A request successfully completed.</td>
+  </tr>
+  <tr>
+   <td>{{event("suspend")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-suspend">HTML5 media</a></td>
+   <td>Media data loading has been suspended.</td>
+  </tr>
+  <tr>
+   <td>{{event("SVGAbort")}}</td>
+   <td>{{domxref("SVGEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>Page loading has been stopped before the <a href="/en-US/docs/SVG">SVG</a> was loaded.</td>
+  </tr>
+  <tr>
+   <td>{{event("SVGError")}}</td>
+   <td>{{domxref("SVGEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An error has occurred before the <a href="/en-US/docs/SVG">SVG</a> was loaded.</td>
+  </tr>
+  <tr>
+   <td>{{event("SVGLoad")}}</td>
+   <td>{{domxref("SVGEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An <a href="/en-US/docs/SVG">SVG</a> document has been loaded and parsed.</td>
+  </tr>
+  <tr>
+   <td>{{event("SVGResize")}}</td>
+   <td>{{domxref("SVGEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An <a href="/en-US/docs/SVG">SVG</a> document is being resized.</td>
+  </tr>
+  <tr>
+   <td>{{event("SVGScroll")}}</td>
+   <td>{{domxref("SVGEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An <a href="/en-US/docs/SVG">SVG</a> document is being scrolled.</td>
+  </tr>
+  <tr>
+   <td>{{event("SVGUnload")}}</td>
+   <td>{{domxref("SVGEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An <a href="/en-US/docs/SVG">SVG</a> document has been removed from a window or frame.</td>
+  </tr>
+  <tr>
+   <td>{{event("SVGZoom")}}</td>
+   <td>{{domxref("SVGZoomEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An <a href="/en-US/docs/SVG">SVG</a> document is being zoomed.</td>
+  </tr>
+  <tr>
+   <td>{{event("timeout")}}</td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-timeout">XMLHttpRequest</a></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{event("timeupdate")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-timeupdate">HTML5 media</a></td>
+   <td>The time indicated by the <code>currentTime</code> attribute has been updated.</td>
+  </tr>
+  <tr>
+   <td>{{event("touchcancel")}}</td>
+   <td>{{domxref("TouchEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/">Touch Events</a></td>
+   <td>A touch point has been disrupted in an implementation-specific manners (too many touch points for example).</td>
+  </tr>
+  <tr>
+   <td>{{event("touchend")}}</td>
+   <td>{{domxref("TouchEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/#the-touchend-event">Touch Events</a></td>
+   <td>A touch point is removed from the touch surface.</td>
+  </tr>
+  <tr>
+   <td>{{event("touchenter")}}</td>
+   <td>{{domxref("TouchEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/">Touch Events</a> Removed</td>
+   <td>A touch point is moved onto the interactive area of an element.</td>
+  </tr>
+  <tr>
+   <td>{{event("touchleave")}}</td>
+   <td>{{domxref("TouchEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/">Touch Events</a> Removed</td>
+   <td>A touch point is moved off the interactive area of an element.</td>
+  </tr>
+  <tr>
+   <td>{{event("touchmove")}}</td>
+   <td>{{domxref("TouchEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/#the-touchmove-event">Touch Events</a></td>
+   <td>A touch point is moved along the touch surface.</td>
+  </tr>
+  <tr>
+   <td>{{event("touchstart")}}</td>
+   <td>{{domxref("TouchEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/#the-touchstart---------event">Touch Events</a></td>
+   <td>A touch point is placed on the touch surface.</td>
+  </tr>
+  <tr>
+   <td>{{event("transitionend")}}</td>
+   <td>{{domxref("TransitionEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/css3-transitions/#transition-events">CSS Transitions</a></td>
+   <td>A <a href="/en-US/docs/CSS/CSS_transitions">CSS transition</a> has completed.</td>
+  </tr>
+  <tr>
+   <td>{{event("unload")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-unload">DOM L3</a></td>
+   <td>The document or a dependent resource is being unloaded.</td>
+  </tr>
+  <tr>
+   <td>{{event("updateready")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/spec/offline.html">Offline</a></td>
+   <td>The resources listed in the manifest have been newly redownloaded, and the script can use <code>swapCache()</code> to switch to the new cache.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/upgradeneeded_indexedDB">upgradeneeded</a></code></td>
+   <td></td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td>
+   <td>An attempt was made to open a database with a version number higher than its current version. A <code>versionchange</code> transaction has been created.</td>
+  </tr>
+  <tr>
+   <td>{{event("userproximity")}}</td>
+   <td>{{domxref("SensorEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/proximity/Overview.html">Sensor</a></td>
+   <td>Fresh data is available from a proximity sensor (indicates whether the nearby object is <code>near</code> the device or not).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/versionchange_indexedDB">versionchange</a></code></td>
+   <td></td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#database-interface">IndexedDB</a></td>
+   <td>A <code>versionchange</code> transaction completed.</td>
+  </tr>
+  <tr>
+   <td>{{event("visibilitychange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/page-visibility/#sec-visibilitychange-event">Page visibility</a></td>
+   <td>The content of a tab has become visible or has been hidden.</td>
+  </tr>
+  <tr>
+   <td>{{event("volumechange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-volumechange">HTML5 media</a></td>
+   <td>The volume has changed.</td>
+  </tr>
+  <tr>
+   <td>{{event("waiting")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-waiting">HTML5 media</a></td>
+   <td>Playback has stopped because of a temporary lack of data.</td>
+  </tr>
+  <tr>
+   <td>{{event("wheel")}}{{gecko_minversion_inline("17")}}</td>
+   <td>{{domxref("WheelEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-wheel">DOM L3</a></td>
+   <td>A wheel button of a pointing device is rotated in any direction.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Non-standard_events">Non-standard events</h2>
+
+<table class="standard-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <th class="header" style="width: 220px;">Event Name</th>
+   <th class="header" style="width: 90px;">Event Type</th>
+   <th class="header" style="width: 100px;">Specification</th>
+   <th class="header">Fired when...</th>
+  </tr>
+  <tr>
+   <td>{{event("afterscriptexecute")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td><em>Mozilla Specific</em></td>
+   <td>A script has been executed.</td>
+  </tr>
+  <tr>
+   <td>{{event("beforescriptexecute")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td><em>Mozilla Specific</em></td>
+   <td>A script is about to be executed.</td>
+  </tr>
+  <tr>
+   <td>{{event("cardstatechange")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The {{domxref("MozMobileConnection.cardState")}} property changes value.</td>
+  </tr>
+  <tr>
+   <td>{{event("change")}}</td>
+   <td>{{domxref("DeviceStorageChangeEvent")}}</td>
+   <td><em>Firefox OS specific</em></td>
+   <td>This event is triggered each time a file is created, modified or deleted on a given storage area.</td>
+  </tr>
+  <tr>
+   <td>{{event("connectionInfoUpdate")}}</td>
+   <td></td>
+   <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#176"><em>Firefox OS specific</em></a></td>
+   <td>The informations about the signal strength and the link speed have been updated.</td>
+  </tr>
+  <tr>
+   <td>{{event("cfstatechange")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The call forwarding state changes.</td>
+  </tr>
+  <tr>
+   <td>{{event("datachange")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The {{domxref("MozMobileConnection.data")}} object changes values.</td>
+  </tr>
+  <tr>
+   <td>{{event("dataerror")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The {{domxref("MozMobileConnection.data")}} object receive an error from the <abbr title="Radio Interface Layer">RIL</abbr>.</td>
+  </tr>
+  <tr>
+   <td>{{event("DOMMouseScroll")}}{{deprecated_inline}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>The wheel button of a pointing device is rotated (detail attribute is a number of lines). (use {{event("wheel")}} instead)</td>
+  </tr>
+  <tr>
+   <td><code>dragdrop</code> {{deprecated_inline}}</td>
+   <td><code>DragEvent</code></td>
+   <td><em>Mozilla specific</em></td>
+   <td>An element is dropped (use {{event("drop")}} instead).</td>
+  </tr>
+  <tr>
+   <td><code>dragexit</code> {{deprecated_inline}}</td>
+   <td><code>DragEvent</code></td>
+   <td><em>Mozilla specific</em></td>
+   <td>A drag operation is being ended(use {{event("dragend")}} instead).</td>
+  </tr>
+  <tr>
+   <td><code>draggesture</code> {{deprecated_inline}}</td>
+   <td><code>DragEvent</code></td>
+   <td><em>Mozilla specific</em></td>
+   <td>The user starts dragging an element or text selection (use {{event("dragstart")}} instead).</td>
+  </tr>
+  <tr>
+   <td>{{event("icccardlockerror")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>the {{domxref("MozMobileConnection.unlockCardLock()")}} or {{domxref("MozMobileConnection.setCardLock()")}} methods fails.</td>
+  </tr>
+  <tr>
+   <td>{{event("iccinfochange")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The {{domxref("MozMobileConnection.iccInfo")}} object changes.</td>
+  </tr>
+  <tr>
+   <td>{{event("localized")}}</td>
+   <td></td>
+   <td><em><a href="https://github.com/fabi1cazenave/webL10n">Mozilla Specific</a></em></td>
+   <td>The page has been localized using data-l10n-* attributes.</td>
+  </tr>
+  <tr>
+   <td>{{event("mousewheel")}}{{deprecated_inline}}</td>
+   <td></td>
+   <td><a href="http://msdn.microsoft.com/en-us/library/ie/ms536951%28v=vs.85%29.aspx"><em>IE invented</em></a></td>
+   <td>The wheel button of a pointing device is rotated.</td>
+  </tr>
+  <tr>
+   <td>{{event("MozAudioAvailable")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td><em>Mozilla specific</em></td>
+   <td>The audio buffer is full and the corresponding raw samples are available.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozBeforeResize"><code>MozBeforeResize</code></a> {{obsolete_inline}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>A window is about to be resized.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowserclose")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>Sent when window.close() is called within a browser iframe.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowsercontextmenu")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>Sent when a browser {{HTMLElement("iframe")}} try to open a context menu.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowsererror")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>Sent when an error occured while trying to load a content within a browser iframe</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowsericonchange")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>Sent when the favicon of a browser iframe changes.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowserlocationchange")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>Sent when an browser iframe's location changes.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowserloadend")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>Sent when the browser iframe has finished loading all its assets.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowserloadstart")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>Sent when the browser iframe starts to load a new page.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowseropenwindow")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>Sent when {{domxref("window.open()")}} is called within a browser iframe.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowsersecuritychange")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>Sent when the SSL state changes within a browser iframe.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowsershowmodalprompt")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>Sent when {{domxref("window.alert","alert()")}}, {{domxref("window.confirm","confirm()")}} or {{domxref("window.prompt","prompt()")}} are called within a browser iframe</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowsertitlechange")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>Sent when the document.title changes within a browser iframe.</td>
+  </tr>
+  <tr>
+   <td>{{event("MozGamepadButtonDown")}}</td>
+   <td></td>
+   <td><em>To be specified</em></td>
+   <td>A gamepad button is pressed down.</td>
+  </tr>
+  <tr>
+   <td>{{event("MozGamepadButtonUp")}}</td>
+   <td></td>
+   <td><em>To be specified</em></td>
+   <td>A gamepad button is released.</td>
+  </tr>
+  <tr>
+   <td>{{event("MozMousePixelScroll")}} {{deprecated_inline}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>The wheel button of a pointing device is rotated (detail attribute is a number of pixels). (use wheel instead)</td>
+  </tr>
+  <tr>
+   <td>{{event("MozOrientation")}} {{deprecated_inline}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>Fresh data is available from an orientation sensor (see deviceorientation).</td>
+  </tr>
+  <tr>
+   <td>{{event("MozScrolledAreaChanged")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td><em>Mozilla specific</em></td>
+   <td>The document view has been scrolled or resized.</td>
+  </tr>
+  <tr>
+   <td>{{event("moztimechange")}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>The time of the device has been changed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchDown</a> {{deprecated_inline}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>A touch point is placed on the touch surface (use touchstart instead).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchMove</a> {{deprecated_inline}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>A touch point is moved along the touch surface (use touchmove instead).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchUp</a> {{deprecated_inline}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>A touch point is removed from the touch surface (use touchend instead).</td>
+  </tr>
+  <tr>
+   <td>{{event("alerting")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>The correspondent is being alerted (his/her phone is ringing).</td>
+  </tr>
+  <tr>
+   <td>{{event("busy")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>The line of the correspondent is busy.</td>
+  </tr>
+  <tr>
+   <td>{{event("callschanged")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call has been added or removed from the list of current calls.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/DOM/onconnected">onconnected</a> {{event("connected")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call has been connected.</td>
+  </tr>
+  <tr>
+   <td>{{event("connecting")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call is about to connect.</td>
+  </tr>
+  <tr>
+   <td>{{event("delivered")}}</td>
+   <td>{{domxref("SMSEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>An SMS has been successfully delivered.</td>
+  </tr>
+  <tr>
+   <td>{{event("dialing")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>The number of a correspondent has been dialed.</td>
+  </tr>
+  <tr>
+   <td>{{event("disabled")}}</td>
+   <td></td>
+   <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#182"><em>Firefox OS specific</em></a></td>
+   <td>Wifi has been disabled on the device.</td>
+  </tr>
+  <tr>
+   <td>{{event("disconnected")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call has been disconnected.</td>
+  </tr>
+  <tr>
+   <td>{{event("disconnecting")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call is about to disconnect.</td>
+  </tr>
+  <tr>
+   <td>{{event("enabled")}}</td>
+   <td></td>
+   <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#182"><em>Firefox OS specific</em></a></td>
+   <td>Wifi has been enabled on the device.</td>
+  </tr>
+  <tr>
+   <td>{{event("error_(Telephony)","error")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>An error occurred.</td>
+  </tr>
+  <tr>
+   <td>{{event("held")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call has been held.</td>
+  </tr>
+  <tr>
+   <td>{{event("holding")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call is about to be held.</td>
+  </tr>
+  <tr>
+   <td>{{event("incoming")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call is being received.</td>
+  </tr>
+  <tr>
+   <td>{{event("received")}}</td>
+   <td>{{domxref("SMSEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>An SMS has been received.</td>
+  </tr>
+  <tr>
+   <td>{{event("resuming")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call is about to resume.</td>
+  </tr>
+  <tr>
+   <td>{{event("sent")}}</td>
+   <td>{{domxref("SMSEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>An SMS has been sent.</td>
+  </tr>
+  <tr>
+   <td>{{event("statechange")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>The state of a call has changed.</td>
+  </tr>
+  <tr>
+   <td>{{event("statuschange")}}</td>
+   <td></td>
+   <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#156"><em>Firefox OS specific</em></a></td>
+   <td>The status of the Wifi connection changed.</td>
+  </tr>
+  <tr>
+   <td>{{event("overflow")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td><em>Mozilla specific</em></td>
+   <td>An element has been overflowed by its content or has been rendered for the first time in this state (only works for elements styled with <code>overflow</code> != <code>visible</code>).</td>
+  </tr>
+  <tr>
+   <td>{{event("smartcard-insert")}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>A <a href="/en-US/docs/JavaScript_crypto">smartcard</a> has been inserted.</td>
+  </tr>
+  <tr>
+   <td>{{event("smartcard-remove")}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>A <a href="/en-US/docs/JavaScript_crypto">smartcard</a> has been removed.</td>
+  </tr>
+  <tr>
+   <td>{{event("stkcommand")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The <abbr title="SIM Application Toolkit">STK</abbr> Proactive Command is issued from <abbr title="Integrated Circuit Card">ICC</abbr>.</td>
+  </tr>
+  <tr>
+   <td>{{event("stksessionend")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The <abbr title="SIM Application Toolkit">STK</abbr> Session is terminated by <abbr title="Integrated Circuit Card">ICC</abbr>.</td>
+  </tr>
+  <tr>
+   <td><code>text</code></td>
+   <td></td>
+   <td><em>Mozilla Specific</em></td>
+   <td>A generic composition event occurred.</td>
+  </tr>
+  <tr>
+   <td>{{event("underflow")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td><em>Mozilla specific</em></td>
+   <td>An element is no longer overflowed by its content (only works for elements styled with <code>overflow</code> != <code>visible</code>).</td>
+  </tr>
+  <tr>
+   <td><code>uploadprogress</code> {{deprecated_inline}}</td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td><em>Mozilla Specific</em></td>
+   <td>Upload is in progress (see {{event("progress")}}).</td>
+  </tr>
+  <tr>
+   <td>
+    <p>{{event("ussdreceived")}}</p>
+   </td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>A new <abbr title="Unstructured Supplementary Service Data">USSD</abbr> message is received</td>
+  </tr>
+  <tr>
+   <td>{{event("voicechange")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The {{domxref("MozMobileConnection.voice")}} object changes values.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Mozilla-specific_events">Mozilla-specific events</h2>
+
+<div class="note">
+<p><strong>Note:</strong> those events are never exposed to web content and can only be used in chrome content context.</p>
+</div>
+
+<h3 id="XUL_events">XUL events</h3>
+
+<table class="standard-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <th class="header" style="width: 220px;">Event Name</th>
+   <th class="header" style="width: 90px;">Event Type</th>
+   <th class="header" style="width: 100px;">Specification</th>
+   <th class="header">Fired when...</th>
+  </tr>
+  <tr>
+   <td>{{event("broadcast")}}</td>
+   <td></td>
+   <td><a href="/en-US/docs/XUL/Tutorial/Broadcasters_and_Observers#Broadcast_event">XUL</a></td>
+   <td>An <code>observer</code> noticed a change to the attributes of a watched broadcaster.</td>
+  </tr>
+  <tr>
+   <td>{{event("CheckboxStateChange")}}</td>
+   <td></td>
+   <td>XUL</td>
+   <td>The state of a <code>checkbox</code> has been changed either by a user action or by a script (useful for accessibility).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/close_event">close</a></td>
+   <td></td>
+   <td>XUL</td>
+   <td>The close button of the window has been clicked.</td>
+  </tr>
+  <tr>
+   <td>{{event("command")}}</td>
+   <td></td>
+   <td>XUL</td>
+   <td>An element has been activated.</td>
+  </tr>
+  <tr>
+   <td>{{event("commandupdate")}}</td>
+   <td></td>
+   <td>XUL</td>
+   <td>A command update occurred on a <code>commandset</code> element.</td>
+  </tr>
+  <tr>
+   <td>{{event("DOMMenuItemActive")}}</td>
+   <td></td>
+   <td>XUL</td>
+   <td>A menu or menuitem has been hovered or highlighted.</td>
+  </tr>
+  <tr>
+   <td>{{event("DOMMenuItemInactive")}}</td>
+   <td></td>
+   <td><em>XUL</em></td>
+   <td>A menu or menuitem is no longer hovered or highlighted.</td>
+  </tr>
+  <tr>
+   <td>{{event("popuphidden")}}</td>
+   <td><code>PopupEvent</code></td>
+   <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td>
+   <td>A menupopup, panel or tooltip has been hidden.</td>
+  </tr>
+  <tr>
+   <td>{{event("popuphiding")}}</td>
+   <td><code>PopupEvent</code></td>
+   <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td>
+   <td>A menupopup, panel or tooltip is about to be hidden.</td>
+  </tr>
+  <tr>
+   <td>{{event("popupshowing")}}</td>
+   <td><code>PopupEvent</code></td>
+   <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td>
+   <td>A menupopup, panel or tooltip is about to become visible.</td>
+  </tr>
+  <tr>
+   <td>{{event("popupshown")}}</td>
+   <td><code>PopupEvent</code></td>
+   <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td>
+   <td>A menupopup, panel or tooltip has become visible.</td>
+  </tr>
+  <tr>
+   <td>{{event("RadioStateChange")}}</td>
+   <td></td>
+   <td>XUL</td>
+   <td>The state of a <code>radio</code> has been changed either by a user action or by a script (useful for accessibility).</td>
+  </tr>
+  <tr>
+   <td>{{event("ValueChange")}}</td>
+   <td></td>
+   <td>XUL</td>
+   <td>The value of an element has changed (a progress bar for example, useful for accessibility).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Add-on-specific_events">Add-on-specific events</h3>
+
+<table class="standard-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <th class="header" style="width: 220px;">Event Name</th>
+   <th class="header" style="width: 90px;">Event Type</th>
+   <th class="header" style="width: 100px;">Specification</th>
+   <th class="header">Fired when...</th>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozSwipeGesture">MozSwipeGesture</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A touch point is swiped across the touch surface</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureStart">MozMagnifyGestureStart</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points start to move away from each other.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureUpdate">MozMagnifyGestureUpdate</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points move away from each other (after a MozMagnifyGestureStart).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozMagnifyGesture">MozMagnifyGesture</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points moved away from each other (after a sequence of MozMagnifyGestureUpdate).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozRotateGestureStart">MozRotateGestureStart</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points start to rotate around a point.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozRotateGestureUpdate">MozRotateGestureUpdate</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points rotate around a point (after a MozRotateGestureStart).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozRotateGesture">MozRotateGesture</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points rotate around a point (after a sequence of MozRotateGestureUpdate).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozTapGesture">MozTapGesture</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points are tapped on the touch surface.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozPressTapGesture">MozPressTapGesture</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A "press-tap" gesture happened on the touch surface (first finger down, second finger down, second finger up, first finger up).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozEdgeUIGesture">MozEdgeUIGesture</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A touch point is swiped across the touch surface to invoke the edge UI (Win8 only).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozAfterPaint">MozAfterPaint</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Content has been repainted.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMPopupBlocked">DOMPopupBlocked</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A popup has been blocked</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMWindowCreated">DOMWindowCreated</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A window has been created.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMWindowClose">DOMWindowClose</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A window is about to be closed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMTitleChanged">DOMTitleChanged</a></td>
+   <td></td>
+   <td><em>Addons specifc</em></td>
+   <td>The title of a window has changed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMLinkAdded">DOMLinkAdded</a></td>
+   <td></td>
+   <td><em>Addons specifc</em></td>
+   <td>A link has been added a document.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMLinkRemoved">DOMLinkRemoved</a></td>
+   <td></td>
+   <td><em>Addons specifc</em></td>
+   <td>A link has been removed inside from a document.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMMetaAdded">DOMMetaAdded</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A <code>meta</code> element has been added to a document.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMMetaRemoved">DOMMetaRemoved</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A <code>meta</code> element has been removed from a document.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMWillOpenModalDialog">DOMWillOpenModalDialog</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A modal dialog is about to open.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMModalDialogClosed">DOMModalDialogClosed</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A modal dialog has been closed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMAutoComplete">DOMAutoComplete</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>The content of an element has been auto-completed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMFrameContentLoaded">DOMFrameContentLoaded</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>The frame has finished loading (but not its dependent resources).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/AlertActive">AlertActive</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A <code><a href="/en-US/docs/XUL/notification">notification</a></code> element is shown.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/AlertClose">AlertClose</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A <code><a href="/en-US/docs/XUL/notification">notification</a></code> element is closed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/fullscreen">fullscreen</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Browser fullscreen mode has been entered or left.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/sizemodechange">sizemodechange</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Window has entered/left fullscreen mode, or has been minimized/unminimized.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozEnteredDomFullscreen">MozEnteredDomFullscreen</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td><a href="/en-US/docs/DOM/Using_full-screen_mode">DOM fullscreen</a> mode has been entered.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/SSWindowClosing">SSWindowClosing</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>The session store will stop tracking this window.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/SSTabClosing">SSTabClosing</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>The session store will stop tracking this tab.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/SSTabRestoring">SSTabRestoring</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A tab is about to be restored.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/SSTabRestored">SSTabRestored</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been restored.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/SSWindowStateReady">SSWindowStateReady</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A window state has switched to "ready".</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/SSWindowStateBusy">SSWindowStateBusy</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A window state has switched to "busy".</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/tabviewsearchenabled">tabviewsearchenabled</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>The search feature of Panorama has been activated</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/tabviewsearchdisabled">tabviewsearchdisabled</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>The search feature of Panorama has been deactivated</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/tabviewframeinitialized">tabviewframeinitialized</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>The frame container of Panorama has been initialized</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/tabviewshown">tabviewshown</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>The Panorama tab has been shown</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/tabviewhidden">tabviewhidden</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>The Panorama tab has been hidden</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabOpen">TabOpen</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been opened.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabClose">TabClose</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been closed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabSelect">TabSelect</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been selected.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabShow">TabShow</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been shown.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabHide">TabHide</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been hidden.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabPinned">TabPinned</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been pinned.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabUnpinned">TabUnpinned</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been unpinned.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Developer_tool-specific_events">Developer tool-specific events</h3>
+
+<table class="standard-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <th class="header" style="width: 220px;">Event Name</th>
+   <th class="header" style="width: 90px;">Event Type</th>
+   <th class="header" style="width: 100px;">Specification</th>
+   <th class="header">Fired when...</th>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/CssRuleViewRefreshed">CssRuleViewRefreshed</a></td>
+   <td></td>
+   <td><em>devtools specific</em></td>
+   <td>The "Rules" view of the style inspector has been updated.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/CssRuleViewChanged">CssRuleViewChanged</a></td>
+   <td></td>
+   <td><em>devtools specific</em></td>
+   <td>The "Rules" view of the style inspector has been changed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/CssRuleViewCSSLinkClicked">CssRuleViewCSSLinkClicked</a></td>
+   <td></td>
+   <td><em>devtools specific</em></td>
+   <td>A link to a CSS file has been clicked in the "Rules" view of the style inspector.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Categories">Categories</h2>
+
+<h3 id="Animation_events">Animation events</h3>
+
+<p>{{event("animationend")}}, {{event("animationiteration")}}, {{event("animationstart")}}, {{event("beginEvent")}}, {{event("endEvent")}}, {{event("repeatEvent")}}</p>
+
+<h3 id="Battery_events">Battery events</h3>
+
+<p>{{event("chargingchange")}} {{event("chargingtimechange")}}, {{event("dischargingtimechange")}} {{event("levelchange")}}</p>
+
+<h3 id="Call_events">Call events</h3>
+
+<p>{{event("alerting")}}, {{event("busy")}}, {{event("callschanged")}} {{event("cfstatechange")}}, {{event("connected")}}, {{event("connecting")}}, {{event("dialing")}}, {{event("disconnected")}}, {{event("disconnecting")}}, {{event("error_(Telephony)","error")}}, {{event("held")}}, {{event("holding")}}, {{event("incoming")}}, {{event("resuming")}}, {{event("statechange")}}, {{event("voicechange")}}</p>
+
+<h3 id="CSS_events">CSS events</h3>
+
+<p><a href="/en-US/docs/Web/Reference/Events/CssRuleViewRefreshed">CssRuleViewRefreshed</a>, <a href="/en-US/docs/Web/Reference/Events/CssRuleViewChanged">CssRuleViewChanged</a>, <a href="/en-US/docs/Web/Reference/Events/CssRuleViewCSSLinkClicked">CssRuleViewCSSLinkClicked</a>, {{event("transitionend")}}</p>
+
+<h3 id="Database_events">Database events</h3>
+
+<p><code><a href="/en-US/docs/Web/Reference/Events/abort_indexedDB">abort</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/blocked_indexedDB">blocked</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/complete_indexedDB">complete</a></code>, {{event("error")}} (<a href="/en-US/docs/Web/Reference/Events/error">link</a>), <code><a href="/en-US/docs/Web/Reference/Events/success_indexedDB">success</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/upgradeneeded_indexedDB">upgradeneeded</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/versionchange_indexedDB">versionchange</a></code></p>
+
+<h3 id="Document_events">Document events</h3>
+
+<p><a href="/en-US/docs/Web/Reference/Events/DOMLinkAdded">DOMLinkAdded</a>, <a href="/en-US/docs/Web/Reference/Events/DOMLinkRemoved">DOMLinkRemoved</a>, <a href="/en-US/docs/Web/Reference/Events/DOMMetaAdded">DOMMetaAdded</a>, <a href="/en-US/docs/Web/Reference/Events/DOMMetaRemoved">DOMMetaRemoved</a>, <a href="/en-US/docs/Web/Reference/Events/DOMWillOpenModalDialog">DOMWillOpenModalDialog</a>, <a href="/en-US/docs/Web/Reference/Events/DOMModalDialogClosed">DOMModalDialogClosed</a>, {{event("unload")}}</p>
+
+<h3 id="DOM_mutation_events">DOM mutation events</h3>
+
+<p>code&gt;<a href="/en-US/docs/DOM/Mutation_events">DOMAttributeNameChanged</a>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMAttrModified</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMCharacterDataModified</a></code>, {{event("DOMContentLoaded")}}, <code><a href="/en-US/docs/DOM/Mutation_events">DOMElementNameChanged</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInserted</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInsertedIntoDocument</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemoved</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemovedFromDocument</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMSubtreeModified</a></code></p>
+
+<h3 id="Drag_events">Drag events</h3>
+
+<p>{{event("drag")}}, <code>dragdrop</code>, {{event("dragend")}}, {{event("dragenter")}}, <code>dragexit</code>, <code>draggesture</code>, {{event("dragleave")}}, {{event("dragover")}}, {{event("dragstart")}}, {{event("drop")}}</p>
+
+<h3 id="Element_events">Element events</h3>
+
+<p>{{event("invalid")}}, {{event("overflow")}}, {{event("underflow")}}, <a href="/en-US/docs/Web/Reference/Events/DOMAutoComplete">DOMAutoComplete</a>, {{event("command")}}, {{event("commandupdate")}}</p>
+
+<h3 id="Focus_events">Focus events</h3>
+
+<p>{{event("blur")}}, {{event("change")}}, <code>DOMFocusIn</code>, <code>DOMFocusOut</code>, {{event("focus")}}, {{event("focusin")}}, {{event("focusout")}}</p>
+
+<h3 id="Form_events">Form events</h3>
+
+<p>{{event("reset")}}, {{event("submit")}}</p>
+
+<h3 id="Frame_events">Frame events</h3>
+
+<p>{{event("mozbrowserclose")}}, {{event("mozbrowsercontextmenu")}}, {{event("mozbrowsererror")}}, {{event("mozbrowsericonchange")}}, {{event("mozbrowserlocationchange")}}, {{event("mozbrowserloadend")}}, {{event("mozbrowserloadstart")}}, {{event("mozbrowseropenwindow")}}, {{event("mozbrowsersecuritychange")}}, {{event("mozbrowsershowmodalprompt")}} (<a href="/en-US/docs/Web/Reference/Events/mozbrowsershowmodalprompt">link</a>), {{event("mozbrowsertitlechange")}}, <a href="/en-US/docs/Web/Reference/Events/DOMFrameContentLoaded">DOMFrameContentLoaded</a></p>
+
+<h3 id="Input_device_events">Input device events</h3>
+
+<p>{{event("click")}}, {{event("contextmenu")}}, {{event("DOMMouseScroll")}}, {{event("dblclick")}}, {{event("gamepadconnected")}}, {{event("gamepaddisconnected")}}, {{event("keydown")}}, {{event("keypress")}}, {{event("keyup")}}, {{event("MozGamepadButtonDown")}}, {{event("MozGamepadButtonUp")}}, {{event("mousedown")}}, {{event("mouseenter")}}, {{event("mouseleave")}}, {{event("mousemove")}}, {{event("mouseout")}}, {{event("mouseover")}}, {{event("mouseup")}}, {{event("mousewheel")}}, {{event("MozMousePixelScroll")}}, {{event("pointerlockchange")}}, {{event("pointerlockerror")}},{{event("wheel")}}</p>
+
+<h3 id="Media_events">Media events</h3>
+
+<p>{{event("audioprocess")}}, {{event("canplay")}}, {{event("canplaythrough")}}, {{event("durationchange")}}, {{event("emptied")}}, {{event("ended")}}, {{event("ended_(Web_Audio)", "ended")}}, {{event("loadeddata")}}, {{event("loadedmetadata")}}, {{event("MozAudioAvailable")}}, {{event("pause")}}, {{event("play")}}, {{event("playing")}}, {{event("ratechange")}}, {{event("seeked")}}, {{event("seeking")}}, {{event("stalled")}}, {{event("suspend")}}, {{event("timeupdate")}}, {{event("volumechange")}}, {{event("waiting")}}, {{event("complete")}}</p>
+
+<h3 id="Menu_events">Menu events</h3>
+
+<p>{{event("DOMMenuItemActive")}}, {{event("DOMMenuItemInactive")}}</p>
+
+<h3 id="Network_events">Network events</h3>
+
+<p>{{event("datachange")}}, {{event("dataerror")}}, {{event("disabled")}}, {{event("enabled")}}, {{event("offline")}}, {{event("online")}}, {{event("statuschange")}}, {{event("connectionInfoUpdate")}},</p>
+
+<h3 id="Notification_events">Notification events</h3>
+
+<p><a href="/en-US/docs/Web/Reference/Events/AlertActive">AlertActive</a>, <a href="/en-US/docs/Web/Reference/Events/AlertClose">AlertClose</a></p>
+
+<h3 id="Popup_events">Popup events</h3>
+
+<p>{{event("popuphidden")}}, {{event("popuphiding")}}, {{event("popupshowing")}}, {{event("popupshown")}}, <a href="/en-US/docs/Web/Reference/Events/DOMPopupBlocked">DOMPopupBlocked</a></p>
+
+<h3 id="Printing_events">Printing events</h3>
+
+<p>{{event("afterprint")}}, {{event("beforeprint")}}</p>
+
+<h3 id="Progress_events">Progress events</h3>
+
+<p><code><a href="/en-US/docs/Web/Reference/Events/abort_(ProgressEvent)">abort</a></code>, {{event("error")}}, <code><a href="/en-US/docs/Web/Reference/Events/load_(ProgressEvent)">load</a></code>, {{event("loadend")}}, {{event("loadstart")}}, {{event("progress")}}, <code><a href="/en-US/docs/Web/Reference/Events/progress_(appcache_event)">progress</a></code>, {{event("timeout")}}, <code>uploadprogress</code></p>
+
+<h3 id="Resource_events">Resource events</h3>
+
+<p>{{event("abort")}}, {{event("cached")}}, {{event("error")}}, {{event("load")}}</p>
+
+<h3 id="Script_events">Script events</h3>
+
+<p>{{event("afterscriptexecute")}}, {{event("beforescriptexecute")}}</p>
+
+<h3 id="Sensor_events">Sensor events</h3>
+
+<p>{{event("compassneedscalibration")}}, {{event("devicelight")}}, {{event("devicemotion")}}, {{event("deviceorientation")}}, {{event("deviceproximity")}}, {{event("MozOrientation")}}, {{event("orientationchange")}}, {{event("userproximity")}}</p>
+
+<h3 id="Session_history_events">Session history events</h3>
+
+<p>{{event("pagehide")}}, {{event("pageshow")}}, {{event("popstate")}}</p>
+
+<h3 id="Smartcard_events">Smartcard events</h3>
+
+<p>{{event("icccardlockerror")}}, {{event("iccinfochange")}}, {{event("smartcard-insert")}}, {{event("smartcard-remove")}}, {{event("stkcommand")}}, {{event("stksessionend")}}, {{event("cardstatechange")}}</p>
+
+<h3 id="SMS_and_USSD_events">SMS and USSD events</h3>
+
+<p>{{event("delivered")}}, {{event("received")}}, {{event("sent")}}, {{event("ussdreceived")}}</p>
+
+<h3 id="Storage_events">Storage events</h3>
+
+<p>{{event("change")}}, {{event("storage")}}</p>
+
+<h3 id="SVG_events">SVG events</h3>
+
+<p>{{event("SVGAbort")}}, {{event("SVGError")}}, {{event("SVGLoad")}}, {{event("SVGResize")}}, {{event("SVGScroll")}}, {{event("SVGUnload")}}, {{event("SVGZoom")}}</p>
+
+<h3 id="Tab_events">Tab events</h3>
+
+<p><a href="/en-US/docs/Web/Reference/Events/tabviewsearchenabled">tabviewsearchenabled</a>, <a href="/en-US/docs/Web/Reference/Events/tabviewsearchdisabled">tabviewsearchdisabled</a>, <a href="/en-US/docs/Web/Reference/Events/tabviewframeinitialized">tabviewframeinitialized</a>, <a href="/en-US/docs/Web/Reference/Events/tabviewshown">tabviewshown</a>, <a href="/en-US/docs/Web/Reference/Events/tabviewhidden">tabviewhidden</a>, <a href="/en-US/docs/Web/Reference/Events/TabOpen">TabOpen</a>, <a href="/en-US/docs/Web/Reference/Events/TabClose">TabClose</a>, <a href="/en-US/docs/Web/Reference/Events/TabSelect">TabSelect</a>, <a href="/en-US/docs/Web/Reference/Events/TabShow">TabShow</a>, <a href="/en-US/docs/Web/Reference/Events/TabHide">TabHide</a>, <a href="/en-US/docs/Web/Reference/Events/TabPinned">TabPinned</a>, <a href="/en-US/docs/Web/Reference/Events/TabUnpinned">TabUnpinned</a>, <a href="/en-US/docs/Web/Reference/Events/SSTabClosing">SSTabClosing</a>, <a href="/en-US/docs/Web/Reference/Events/SSTabRestoring">SSTabRestoring</a>, <a href="/en-US/docs/Web/Reference/Events/SSTabRestored">SSTabRestored</a>, {{event("visibilitychange")}}</p>
+
+<h3 id="Text_events">Text events</h3>
+
+<p>{{event("compositionend")}}, {{event("compositionstart")}}, {{event("compositionupdate")}}, {{event("copy")}}, {{event("cut")}}, {{event("paste")}}, {{event("select")}}, <code>text</code></p>
+
+<h3 id="Touch_events">Touch events</h3>
+
+<p><a href="/en-US/docs/Web/Reference/Events/MozEdgeUIGesture">MozEdgeUIGesture</a>, <a href="/en-US/docs/Web/Reference/Events/MozMagnifyGesture">MozMagnifyGesture</a>, <a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureStart">MozMagnifyGestureStart</a>, <a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureUpdate">MozMagnifyGestureUpdate</a>, <a href="/en-US/docs/Web/Reference/Events/MozPressTapGesture">MozPressTapGesture</a>, <a href="/en-US/docs/Web/Reference/Events/MozRotateGesture">MozRotateGesture</a>, <a href="/en-US/docs/Web/Reference/Events/MozRotateGestureStart">MozRotateGestureStart</a>, <a href="/en-US/docs/Web/Reference/Events/MozRotateGestureUpdate">MozRotateGestureUpdate</a>, <a href="/en-US/docs/Web/Reference/Events/MozSwipeGesture">MozSwipeGesture</a>, <a href="/en-US/docs/Web/Reference/Events/MozTapGesture">MozTapGesture</a>, <a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchDown</a>, <a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchMove</a>, <a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchUp</a>, {{event("touchcancel")}}, {{event("touchend")}}, {{event("touchenter")}}, {{event("touchleave")}}, {{event("touchmove")}}, {{event("touchstart")}}</p>
+
+<h3 id="Update_events">Update events</h3>
+
+<p>{{event("checking")}}, {{event("downloading")}}, {{event("error")}}, {{event("noupdate")}}, {{event("obsolete")}}, {{event("updateready")}}</p>
+
+<h3 id="Value_change_events">Value change events</h3>
+
+<p>{{event("broadcast")}}, {{event("CheckboxStateChange")}}, {{event("hashchange")}}, {{event("input")}}, {{event("RadioStateChange")}}, {{event("readystatechange")}}, {{event("ValueChange")}}</p>
+
+<h3 id="View_events">View events</h3>
+
+<p><a href="/en-US/docs/Web/Reference/Events/fullscreen">fullscreen</a>, {{event("fullscreenchange")}}, {{event("fullscreenerror")}}, <a href="/en-US/docs/Web/Reference/Events/MozEnteredDomFullscreen">MozEnteredDomFullscreen</a>, {{event("MozScrolledAreaChanged")}}, {{event("resize")}}, {{event("scroll")}}, <a href="/en-US/docs/Web/Reference/Events/sizemodechange">sizemodechange</a></p>
+
+<h3 id="Websocket_events">Websocket events</h3>
+
+<p><code><a href="/en-US/docs/Web/Reference/Events/close_websocket">close</a></code>, {{event("error")}}, <code><a href="/en-US/docs/Web/Reference/Events/message_websocket">message</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/open_websocket">open</a></code></p>
+
+<h3 id="Window_events">Window events</h3>
+
+<p><a href="/en-US/docs/Web/Reference/Events/DOMWindowCreated">DOMWindowCreated</a>, <a href="/en-US/docs/Web/Reference/Events/DOMWindowClose">DOMWindowClose</a>, <a href="/en-US/docs/Web/Reference/Events/DOMTitleChanged">DOMTitleChanged</a>, <a href="/en-US/docs/Web/Reference/Events/MozBeforeResize">MozBeforeResize</a> {{obsolete_inline}}, <a href="/en-US/docs/Web/Reference/Events/SSWindowClosing">SSWindowClosing</a>, <a href="/en-US/docs/Web/Reference/Events/SSWindowStateReady">SSWindowStateReady</a>, <a href="/en-US/docs/Web/Reference/Events/SSWindowStateBusy">SSWindowStateBusy</a>, <a href="/en-US/docs/Web/Reference/Events/close_event">close</a></p>
+
+<h3 id="Uncategorized_events">Uncategorized events</h3>
+
+<p>{{event("beforeunload")}}, {{event("localized")}}, <code><a href="/en-US/docs/Web/Reference/Events/message_webworker">message</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/message_webmessaging">message</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/message_serversentevents">message</a></code>, <a href="/en-US/docs/Web/Reference/Events/MozAfterPaint">MozAfterPaint</a>, {{event("moztimechange")}}, <code><a href="/en-US/docs/Web/Reference/Events/open_serversentevents">open</a></code>, {{event("show")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Event")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/DOM/Events">Event developer guide</a></li>
+</ul>
diff --git a/files/de/web/events/load/index.html b/files/de/web/events/load/index.html
new file mode 100644
index 0000000000..066a2bea25
--- /dev/null
+++ b/files/de/web/events/load/index.html
@@ -0,0 +1,88 @@
+---
+title: load
+slug: Web/Events/load
+translation_of: Web/API/Window/load_event
+---
+<p>Das <code>load</code> Ereignis wird ausgelöst, sobald eine Ressource und die von ihr abhängigen Ressourcen das Laden beendet haben.</p>
+
+<h2 id="General_info">General info</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spezifikation</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-load">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Schnittstelle</dt>
+ <dd style="margin: 0 0 0 120px;">UIEvent</dd>
+ <dt style="float: left; text-align: right; width: 120px;">bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">Nein</dd>
+ <dt style="float: left; text-align: right; width: 120px;">cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">Nein</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Ziel</dt>
+ <dd style="margin: 0 0 0 120px;">Window,Document,Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
+ <dd style="margin: 0 0 0 120px;">None.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: html">&lt;script&gt;
+  window.addEventListener("load", function(event) {
+    console.log("Alle Ressourcen haben das Laden beendet!");
+  });
+&lt;/script&gt;
+</pre>
+
+<p> </p>
+
+<h2 id="Related_Events">Related Events</h2>
+
+<ul>
+ <li>{{event("DOMContentLoaded")}}</li>
+ <li>{{event("readystatechange")}}</li>
+ <li>{{event("load")}}</li>
+ <li>{{event("beforeunload")}}</li>
+ <li>{{event("unload")}}</li>
+</ul>
diff --git a/files/de/web/events/readystatechange/index.html b/files/de/web/events/readystatechange/index.html
new file mode 100644
index 0000000000..9fba4b5dee
--- /dev/null
+++ b/files/de/web/events/readystatechange/index.html
@@ -0,0 +1,86 @@
+---
+title: readystatechange
+slug: Web/Events/readystatechange
+tags:
+  - Referenz
+  - XMLHttpRequest
+translation_of: Web/API/Document/readystatechange_event
+---
+<p>{{ApiRef}}</p>
+
+<p>Das Ereignis <code>readystatechange</code> wird ausgelöst, wenn sich die Eigenschaft <a href="/en-US/docs/DOM/document.readyState"><code>readyState</code></a> eines Dokumentes verändert hat.</p>
+
+<h2 id="Allgemeine_Information">Allgemeine Information</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spezifikation</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#current-document-readiness">HTML5</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Schnittstelle</dt>
+ <dd style="margin: 0 0 0 120px;">Event</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Aufsteigend</dt>
+ <dd style="margin: 0 0 0 120px;">Nein</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Abbrechbar</dt>
+ <dd style="margin: 0 0 0 120px;">Nein</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Ziel</dt>
+ <dd style="margin: 0 0 0 120px;">Dokument</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Standardaktion</dt>
+ <dd style="margin: 0 0 0 120px;">Keine</dd>
+</dl>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: js">// als Alternative zu DOMContentLoaded
+document.onreadystatechange = function () {
+    if (document.readyState == "interactive") {
+        initApplication();
+    }
+}
+</pre>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<p>Dieses Ereignis wird vom Internet Explorer schon sehr lange unterstützt und kann daher als Alternative zum <a href="/en-US/docs/Mozilla_event_reference/DOMContentLoaded_(event)"><code>DOMContentLoaded</code></a>-Ereignis genutzt werden (vgl. Anmerkung [2] im Abschnitt <a href="/de/docs/Web/Events/DOMContentLoaded#Browserkompatibilität">Browserkompatibilität</a>).</p>
+
+<h2 id="Verwandte_Ereignisse">Verwandte Ereignisse</h2>
+
+<ul>
+ <li>{{event("DOMContentLoaded")}}</li>
+ <li>{{event("readystatechange")}}</li>
+ <li>{{event("load")}}</li>
+ <li>{{event("beforeunload")}}</li>
+ <li>{{event("unload")}}</li>
+</ul>
diff --git a/files/de/web/guide/ajax/erste_schritte/index.html b/files/de/web/guide/ajax/erste_schritte/index.html
new file mode 100644
index 0000000000..011696a2cd
--- /dev/null
+++ b/files/de/web/guide/ajax/erste_schritte/index.html
@@ -0,0 +1,338 @@
+---
+title: Erste Schritte
+slug: Web/Guide/AJAX/Erste_Schritte
+tags:
+  - AJAX
+  - API
+  - JavaScript
+  - XMLHttRequest
+translation_of: Web/Guide/AJAX/Getting_Started
+---
+<div>{{DefaultAPISidebar("XMLHttpRequest")}}</div>
+
+<p class="summary">Dieser Artikel führt Sie durch die AJAX-Grundlagen und gibt einige einfache praktische Beispiele für den Einstieg.</p>
+
+<h2 id="Was_ist_AJAX">Was ist AJAX?</h2>
+
+<p>AJAX steht für <strong>A</strong>synchronous <strong>J</strong>avaScript <strong>A</strong>nd <strong>X</strong>ML. Kurz gesagt ist es die Verwendung des XMLHttpRequest-Objekts zur Kommunikation mit Servern. Es kann Informationen in verschiedenen Formaten senden und empfangen, darunter JSON, XML, HTML und Textdateien. Das ansprechendste Merkmal von AJAX ist seine "asynchrone" Natur, d.h. es kann mit dem Server kommunizieren, Daten austauschen und die Seite aktualisieren, ohne die Seite aktualisieren zu müssen.</p>
+
+<p>Die zwei Hauptmerkmale von AJAX ermöglichen Folgendes::</p>
+
+<ul>
+ <li>Anfragen an den Server stellen, ohne die Seite neu zu laden</li>
+ <li>Daten vom Server empfangen und mit ihnen arbeiten</li>
+</ul>
+
+<h2 id="Schritt_1_–_Wie_man_eine_HTTP-Anfrage_stellt">Schritt 1 – Wie man eine HTTP-Anfrage stellt</h2>
+
+<p>Um mit JavaScript eine HTTP-Anfrage an den Server zu stellen, wird eine Instanz eines Objekts mit der notwendigen Funktionalität benötigt. An dieser Stelle kommt XMLHttpRequest ins Spiel. Sein Vorgänger entstand im Internet Explorer als ein ActiveX-Objekt namens XMLHTTP. Dann folgten Mozilla, Safari und andere Browser, die ein XMLHttpRequest-Objekt implementierten, das die Methoden und Eigenschaften des ursprünglichen ActiveX-Objekts von Microsoft unterstützte. In der Zwischenzeit implementierte Microsoft auch XMLHttpRequest.</p>
+
+<pre class="brush: js notranslate">// Old compatibility code, no longer needed.
+if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...
+    httpRequest = new XMLHttpRequest();
+} else if (window.ActiveXObject) { // IE 6 and older
+    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
+}
+</pre>
+
+<div class="note">Hinweis: Zur Veranschaulichung ist die obige Abbildung eine etwas vereinfachte Version des Codes, der für die Erstellung einer XMLHttp-Instanz zu verwenden ist. Ein realistischeres Beispiel finden Sie in Schritt 3 dieses Artikels.</div>
+
+<p>Nachdem die Anfrage abgesandt wurde, kommt eine Antwort zurück. Jetzt muss dem XMLHttp-Anfrageobjekt mitteilt werden, welche JavaScript-Funktion die Antwort behandeln wird, indem die <code>onreadystatechange</code> -Eigenschaft des Objekts gesetzt und nach der Funktion benannt wird, die aufgerufen werden soll, wenn sich der Status der Anfrage ändert, etwa so:</p>
+
+<pre class="brush: js notranslate"><code>httpRequest.onreadystatechange = nameOfTheFunction;</code></pre>
+
+<p>Beachten Sie, dass hinter dem Funktionsnamen keine Klammern oder Parameter stehen, da Sie der Funktion eine Referenz zuweisen, anstatt sie tatsächlich aufzurufen. Anstatt einen Funktionsnamen anzugeben, können Sie alternativ auch die JavaScript-Technik verwenden, Funktionen on the fly zu definieren (so genannte "anonyme Funktionen"), um die Aktionen zu definieren, die die Antwort verarbeiten, wie z.B:</p>
+
+<pre class="brush: js notranslate">httpRequest.onreadystatechange = function(){
+    // Process the server response here.
+};
+</pre>
+
+<p>Nachdem Sie erklärt haben, was passiert, wenn Sie die Antwort erhalten, müssen Sie als Nächstes die Anfrage tatsächlich stellen, indem Sie die open()- und send()-Methoden des HTTP-Anfrageobjekts aufrufen, und zwar wie folgt::</p>
+
+<pre class="brush: js notranslate">httpRequest.open('GET', 'http://www.example.org/some.file', true);
+httpRequest.send();
+</pre>
+
+<ul>
+ <li>
+  <p>Der erste Parameter des Aufrufs von open() ist die HTTP-Anforderungsmethode - GET, POST, HEAD oder eine andere von Ihrem Server unterstützte Methode. Behalten Sie die Methode in Großbuchstaben gemäß dem HTTP-Standard bei, da sonst einige Browser (wie Firefox) die Anfrage möglicherweise nicht verarbeiten. Weitere Informationen zu den möglichen HTTP-Anforderungsmethoden finden Sie in den <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html">W3C specs</a>.</p>
+ </li>
+ <li>Der zweite Parameter ist die URL, an die Sie die Anfrage senden. Als Sicherheitsfunktion können Sie standardmäßig keine URLs auf 3rd-Party-Domains aufrufen. Stellen Sie sicher, dass Sie den genauen Domainnamen auf allen Ihren Seiten verwenden, sonst erhalten Sie beim Aufruf von <code>open()</code> einen "permission denied"-Fehler. Ein häufiger Fallstrick ist der Zugriff auf Ihre Website über <code>domain.tld</code>, aber der Versuch, Seiten mit www.domain.tld aufzurufen. Wenn Sie wirklich eine Anfrage an eine andere Domain senden müssen, siehe <a href="/en-US/docs/Web/HTTP/CORS">HTTP access control (CORS)</a>.</li>
+ <li>Der optionale dritte Parameter legt fest, ob die Anforderung asynchron ist. Wenn dies der <code>true</code> ist (Standardeinstellung), wird die JavaScript-Ausführung fortgesetzt, und der Benutzer kann mit der Seite interagieren, solange die Serverantwort noch nicht eingetroffen ist. Dies ist das erste A in AJAX.</li>
+</ul>
+
+<p>Der Parameter der send()-Methode kann jede Form von Daten beinhalten, die Sie beim <code>POST</code>-ing der Anfrage an den Server senden möchten. Formulardaten sollten in einem Format gesendet werden, das der Server parsen kann, wie ein Abfrage-String:</p>
+
+<pre class="notranslate"><code>"name=value&amp;anothername="+encodeURIComponent(myVar)+"&amp;so=on"</code></pre>
+
+<p>oder andere Formate wie <code>multipart/form-data</code>, JSON, XML, etc.</p>
+
+<p>Beachten Sie, dass Sie möglicherweise den MIME-Typ der Anforderung angeben müssen, wenn Sie Daten <code>POST</code>-en wollen. Verwenden Sie beispielsweise Folgendes, bevor Sie <code>send()</code> für Formulardaten aufrufen, die als Abfragezeichenfolge gesendet werden::</p>
+
+<pre class="brush: js notranslate">httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+</pre>
+
+<h2 id="Schritt_2_-_Behandlung_der_Server-Antwort">Schritt 2 - Behandlung der Server-Antwort</h2>
+
+<p>Als Sie die Anfrage abgeschickt haben, haben Sie den Namen einer JavaScript-Funktion zur Behandlung der Antwort angegeben:</p>
+
+<pre class="brush: js notranslate">httpRequest.onreadystatechange = nameOfTheFunction;
+</pre>
+
+<p>Was soll diese Funktion tun? Zunächst muss die Funktion den Status der Anfrage überprüfen. Wenn der Status den Wert <code>XMLHttpRequest.DONE</code> (entsprechend 4) hat, bedeutet dies, dass die vollständige Serverantwort empfangen wurde und Sie mit der Verarbeitung fortfahren können.</p>
+
+<pre class="brush: js notranslate">if (httpRequest.readyState === XMLHttpRequest.DONE) {
+    // Everything is good, the response was received.
+} else {
+    // Not ready yet.
+}
+</pre>
+
+<p>Die vollständige Liste <code>readyState</code> -Werte ist unter <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/readyState">XMLHTTPRequest.readyState</a> dokumentiert und lautet wie folgt:</p>
+
+<ul>
+ <li>0 (uninitialized) or (<strong>request not initialized</strong>)</li>
+ <li>1 (loading) or (<strong>server connection established</strong>)</li>
+ <li>2 (loaded) or (<strong>request received</strong>)</li>
+ <li>3 (interactive) or (<strong>processing request</strong>)</li>
+ <li>4 (complete) or (<strong>request finished and response is ready</strong>)</li>
+</ul>
+
+<p>Überprüfen Sie als Nächstes die <a href="/en-US/docs/Web/HTTP/Status">HTTP response status codes</a> der HTTP-Antwort. Die möglichen Codes sind beim <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html">W3C</a> aufgelistet. Im folgenden Beispiel unterscheiden wir zwischen einem erfolgreichen und einem nicht erfolgreichen AJAX-Aufruf, indem wir nach einem <code>200 OK</code>-Antwort-Code suchen.</p>
+
+<pre class="brush: js notranslate">if (httpRequest.status === 200) {
+    // Perfect!
+} else {
+    // There was a problem with the request.
+    // For example, the response may have a 404 (Not Found)
+    // or 500 (Internal Server Error) response code.
+}
+</pre>
+
+<p>Nachdem Sie den Status der Anfrage und den HTTP-Statuscode der Antwort überprüft haben, können Sie mit den vom Server gesendeten Daten tun, was Sie wollen. Sie haben zwei Möglichkeiten, auf diese Daten zuzugreifen:</p>
+
+<ul>
+ <li><code>httpRequest.responseText</code> – gibt die Server-Antwort als eine Zeichenkette aus Text zurück</li>
+ <li><code>httpRequest.responseXML</code> – gibt die Antwort als ein XMLDocument-Objekt zurück, das Sie mit JavaScript-DOM-Funktionen durchlaufen können</li>
+</ul>
+
+<p>Beachten Sie, dass die obigen Schritte nur gültig sind, wenn Sie eine asynchrone Anforderung verwendet haben (der dritte Parameter von <code>open()</code> war nicht spezifiziert oder auf true gesetzt). Wenn Sie eine synchrone Anforderung verwendet haben, brauchen Sie keine Funktion anzugeben, aber davon wird dringend abgeraten, da dies eine schlechte Benutzerführung zur Folge hat.</p>
+
+<h2 id="Schritt_3_–_Ein_einfaches_Beispiel">Schritt  3 – Ein einfaches Beispiel</h2>
+
+<p>Lassen Sie uns das alles mit einer einfachen HTTP-Anfrage zusammenfassen. Unser JavaScript wird ein HTML-Dokument, <code>test.html</code>, anfordern, das den Text "Ich bin ein Test" enthält. Dann <code>alert()</code> wir den Inhalt der Antwort. Beachten Sie, dass dieses Beispiel <a href="https://wiki.selfhtml.org/wiki/Vanilla-JS">Vanilla JavaScript</a> verwendet - es handelt sich nicht um jQuery. Außerdem sollten sich die HTML-, XML- und PHP-Dateien im selben Verzeichnis befinden.</p>
+
+<pre class="brush: html notranslate">&lt;button id="ajaxButton" type="button"&gt;Make a request&lt;/button&gt;
+
+&lt;script&gt;
+(function() {
+  var httpRequest;
+  document.getElementById("ajaxButton").addEventListener('click', makeRequest);
+
+  function makeRequest() {
+    httpRequest = new XMLHttpRequest();
+
+    if (!httpRequest) {
+      alert('Giving up :( Cannot create an XMLHTTP instance');
+      return false;
+    }
+    httpRequest.onreadystatechange = alertContents;
+    httpRequest.open('GET', 'test.html');
+    httpRequest.send();
+  }
+
+  function alertContents() {
+    if (httpRequest.readyState === XMLHttpRequest.DONE) {
+      if (httpRequest.status === 200) {
+        alert(httpRequest.responseText);
+      } else {
+        alert('There was a problem with the request.');
+      }
+    }
+  }
+})();
+&lt;/script&gt;
+</pre>
+
+<p>In this example:</p>
+
+<ul>
+ <li>Der Benutzer klickt auf den "Make a request"- Button;</li>
+ <li>Der Ereignisbehandler ruft die <code>makeRequest()-</code>Funktion auf;</li>
+ <li>Die Anfrage wird gestellt und dann (<code>onreadystatechange</code>) zur Ausführung an <code>alertContents()</code> übergeben;</li>
+ <li><code>alertContents()</code> prüft, ob die Antwort empfangen wurde und OK ist, dann <code>alert()</code> den Inhalt der <code>test.html</code>-Datei.</li>
+</ul>
+
+<div class="note">Hinweis: Wenn Sie eine Anfrage an ein Stück Code senden, das XML statt einer statischen HTML-Datei zurückgibt, müssen Sie die Antwortheader so einstellen, dass sie im Internet Explorer funktionieren.. Wenn Sie den Header Content-Type <code>Content-Type: application/xml nicht angeben</code>, gibt IE nach der Zeile, in der Sie versucht haben, auf ein XML-Element zuzugreifen, einen JavaScript-Fehler " Object Expected " aus.</div>
+
+<div class="note"><strong>Hinweis 2</strong>: Wenn Sie den Header <code>Cache-Control: no-cache</code> nicht setzen, wird der Browser die Antwort zwischenspeichern und die Anfrage nie erneut senden, was das Debugging erschwert. Sie können auch einen immer unterschiedlichen GET-Parameter hinzufügen, wie einen Zeitstempel oder eine Zufallszahl (siehe <a href="/en/DOM/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache">bypassing the cache</a>)</div>
+
+<div class="note"><strong>Hinweis 3</strong>: Wenn die <code>httpRequest</code>-Variable global verwendet wird, können sich konkurrierende Aufrufe von <code>makeRequest()</code> gegenseitig überschreiben und eine Wettlaufsituation auslösen. Wird der <code>httpRequest </code>lokal ain einer <a href="/en/JavaScript/Guide/Closures">closure</a> Umgebung mit einer AJAX-Function deklariert, so wird dies vermieden.</div>
+
+<p>Im Falle eines Kommunikationsfehlers (z. B. bei einem Serverausfall) wird beim Zugriff auf den Antwortstatus in der Methode <code>onreadystatechange</code> eine Ausnahmemeldung zurückgegeben. Um dieses Problem zu beheben, könnten Sie Ihre <code>if...then</code>-Anweisung in a <code>try...catch</code> packen:</p>
+
+<pre class="brush: js notranslate">function alertContents() {
+  try {
+    if (httpRequest.readyState === XMLHttpRequest.DONE) {
+      if (httpRequest.status === 200) {
+        alert(httpRequest.responseText);
+      } else {
+        alert('There was a problem with the request.');
+      }
+    }
+  }
+  catch( e ) {
+    alert('Caught Exception: ' + e.description);
+  }
+}
+</pre>
+
+<h2 id="Schritt_4_–_Arbeiten_mit_der_XML-Antwort">Schritt 4 – Arbeiten mit der XML-Antwort</h2>
+
+<p>Im vorherigen Beispiel haben wir nach dem Empfang der Antwort auf die HTTP-Anforderung die Eigenschaft <code>responseText</code> des Anforderungsobjekts verwendet, die den Inhalt der Datei <code>test.html</code> enthielt. Lassen Sie uns nun die <code>responseXML</code>-Eigenschaft ausprobieren.</p>
+
+<p>Lassen Sie uns zunächst ein gültiges XML-Dokument erstellen, das wir später anfordern werden. Das Dokument (<code>test.xml</code>) enthält Folgendes:</p>
+
+<pre class="brush: html notranslate">&lt;?xml version="1.0" ?&gt;
+&lt;root&gt;
+    I'm a test.
+&lt;/root&gt;
+</pre>
+
+<p>Im Skript brauchen wir nur die Anforderungszeile zu ändern:</p>
+
+<pre class="brush: html notranslate">...
+onclick="makeRequest('test.xml')"&gt;
+...
+</pre>
+
+<p>In <code>alertContents()</code> müssen wir die Zeile <code>alert(httpRequest.responseText);</code>ersetzen mit:</p>
+
+<pre class="brush: js notranslate">var xmldoc = httpRequest.responseXML;
+var root_node = xmldoc.getElementsByTagName('root').item(0);
+alert(root_node.firstChild.data);
+</pre>
+
+<p>Dieser Code nimmt das von <code>responseXML</code> übergebene <code>XMLDocument</code>-Objekt und verwendet DOM-Methoden, um auf einige der im XML-Dokument enthaltenen Daten zuzugreifen. Sie können <a class="external" href="http://www.w3clubs.com/mozdev/test.xml">here</a> das <code>test.xml</code> and<a class="external" href="http://www.w3clubs.com/mozdev/httprequest_test_xml.html"> here</a> das aktualisierte test script aufrufen.</p>
+
+<h2 id="Schritt_5_–_Arbeiten_mit_Daten">Schritt 5 – Arbeiten mit Daten</h2>
+
+<p>Zum Schluss senden wir einige Daten an den Server und erhalten eine Antwort. Unser JavaScript wird diesmal eine dynamische Seite <code>test.php</code> anfordern, die die von uns gesendeten Daten entgegennimmt und einen "computed" string - "Hello, [user data]!" - den wir  <code>alert()</code>-en werden.</p>
+
+<p>Zuerst fügen wir unserem HTML ein Textfeld hinzu, damit der Benutzer seinen Namen eingeben kann:</p>
+
+<pre class="brush: html notranslate">&lt;label&gt;Your name:
+  &lt;input type="text" id="ajaxTextbox" /&gt;
+&lt;/label&gt;
+&lt;span id="ajaxButton" style="cursor: pointer; text-decoration: underline"&gt;
+  Make a request
+&lt;/span&gt;</pre>
+
+<p>Wir fügen auch eine Zeile zu unserem Event-Handler hinzu, um die Daten des Benutzers aus dem Textfeld zu holen und sie zusammen mit der URL unseres serverseitigen Skripts an die Funktion <code>makeRequest()</code> zu senden:</p>
+
+<pre class="brush: js notranslate">  document.getElementById("ajaxButton").onclick = function() {
+      var userName = document.getElementById("ajaxTextbox").value;
+      makeRequest('test.php',userName);
+  };
+</pre>
+
+<p>Wir müssen <code>makeRequest()</code> so modifizieren, dass es die Benutzerdaten akzeptiert und an den Server weiterleitet. Wir werden die Anfragemethode von <code>GET</code> auf <code>POST</code> ändern und unsere Daten als Parameter in den Aufruf von <code>httpRequest.send()</code> aufnehmen:</p>
+
+<pre class="brush: js notranslate">  function makeRequest(url, userName) {
+
+    ...
+
+    httpRequest.onreadystatechange = alertContents;
+    httpRequest.open('POST', url);
+    httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+    httpRequest.send('userName=' + encodeURIComponent(userName));
+  }
+</pre>
+
+<p>Die Funktion <code>alertContents()</code> kann auf die gleiche Weise wie in Schritt 3 geschrieben werden, um unsere Zeichenfolge zu <code>alert()</code>-en, wenn das alles ist, was der Server zurückgibt.. Nehmen wir jedoch an, der Server wird sowohl die berechnete Zeichenkette als auch die ursprünglichen Benutzerdaten zurückgeben. Wenn also unser Benutzer "Jane" in das Textfeld eingibt, würde die Antwort des Servers wie folgt aussehen::</p>
+
+<p><code>{"userData":"Jane","computedString":"Hi, Jane!"}</code></p>
+
+<p>Um diese Daten mit <code>alertContents()</code> zu nutzen, können wir nicht einfach den <code>responseText</code> ausgeben, sondern wir müssen ihn parsen und die gewünschte Eigenschaft <code>computedString</code> <code>alert()</code>-en:</p>
+
+<pre class="brush: js notranslate">function alertContents() {
+  if (httpRequest.readyState === XMLHttpRequest.DONE) {
+    if (httpRequest.status === 200) {
+      var response = JSON.parse(httpRequest.responseText);
+      alert(response.computedString);
+    } else {
+      alert('There was a problem with the request.');
+    }
+  }
+}</pre>
+
+<p>Die <code>test.php</code>-Datei sollte folgendes enthalten:</p>
+
+<pre class="brush: php notranslate"><code>$name = (isset($_POST['userName'])) ? $_POST['userName'] : 'no name';
+$computedString = "Hi, " . $name . "!";
+$array = ['userName' =&gt; $name, 'computedString' =&gt; $computedString];
+echo json_encode($array);</code></pre>
+
+<p>Weitere Informationen zu DOM-Methoden finden Sie unter <a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model (DOM)</a>.</p>
+
+<h2 id="Einfaches_zeitgesteuertes_XHR-Beispiel">Einfaches zeitgesteuertes XHR-Beispiel</h2>
+
+<p>Es folgt ein weiteres einfaches Beispiel - hier laden wir eine Textdatei über XHR, deren Struktur wie folgt angenommen wird:</p>
+
+<pre class="notranslate">TIME: 312.05
+TIME: 312.07
+TIME: 312.10
+TIME: 312.12
+TIME: 312.14
+TIME: 312.15</pre>
+
+<p>Sobald die Textdatei geladen ist, <code>split()</code>-en wir die Elemente an jedem Zeilenumbruchszeichen (<code>\n</code> - im Grunde genommen dort, wo jeder Zeilenumbruch in der Textdatei steht) in ein Array auf und geben dann die vollständige Liste der Zeitstempel und den letzten Zeitstempel auf der Seite aus.</p>
+
+<p>Dies wird alle 5 Sekunden wiederholt, unter Verwendung eines <code>setInterval()</code> Aufrufs. Die Idee wäre, dass eine Art serverseitiges Skript die Textdatei kontinuierlich mit neuen Zeitstempeln aktualisiert, und unser XHR-Code verwendet wird, um den neuesten Zeitstempel auf der Client-Seite zu melden.</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;XHR log time&lt;/title&gt;
+    &lt;style&gt;
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p id="writeData" class="data"&gt;Off-Line&lt;/p&gt;
+    &lt;p id="lastStamp"&gt;No Data yet&lt;/p&gt;
+
+    &lt;script&gt;
+
+    const fullData = document.getElementById('writeData');
+    const lastData = document.getElementById('lastStamp');
+
+    function fetchData() {
+      console.log('Fetching updated data.');
+      let xhr = new XMLHttpRequest();
+      xhr.open("GET", "time-log.txt", true);
+      xhr.onload = function() {
+        updateDisplay(xhr.response);
+      }
+      xhr.send();
+    }
+
+    function updateDisplay(text) {
+      fullData.textContent = text;
+
+      let timeArray = text.split('\n');
+
+      // included because some file systems always include a blank line at the end of text files.
+      if(timeArray[timeArray.length-1] === '') {
+        timeArray.pop();
+      }
+
+      lastData.textContent = timeArray[timeArray.length-1];
+    }
+
+    setInterval(fetchData, 5000);
+    &lt;/script&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
diff --git a/files/de/web/guide/ajax/index.html b/files/de/web/guide/ajax/index.html
new file mode 100644
index 0000000000..e6106c0cb5
--- /dev/null
+++ b/files/de/web/guide/ajax/index.html
@@ -0,0 +1,83 @@
+---
+title: AJAX
+slug: Web/Guide/AJAX
+translation_of: Web/Guide/AJAX
+---
+<div class="callout-box"><strong><a href="/de/AJAX/Einführung" title="de/AJAX/Einführung">Einführung</a></strong><br>
+Erste Schritte in AJAX.</div>
+
+<p><strong>AJAX (Asynchronous JavaScript and XML)</strong> ist für sich selbst keine eigene Technologie, sondern beschreibt ein "neuen" Ansatz verschiedene vorhandene Technologien zu nutzen wie <a href="/de/HTML" title="de/HTML">HTML</a> oder <a href="/de/XHTML" title="de/XHTML">XHTML</a>, <a href="/de/CSS" title="de/CSS">Cascading Style Sheets</a>, <a href="/de/JavaScript" title="de/JavaScript">JavaScript</a>, das <a href="/de/DOM" title="de/DOM">Document Object Model</a>, <a href="/de/XML" title="de/XML">XML</a>, <a href="/de/XSLT" title="de/XSLT">XSLT</a> und das <a href="/de/docs/Web/API/XMLHttpRequest" title="de/XMLHttpRequest">XMLHttpRequest Objekt</a>.<br>
+ Kombiniert man diese Technologien zum AJAX-Modell, können Web-Anwendungen schnell und schrittweise Updates an der Webseite vornehmen, ohne jedes Mal die gesamte Seite neu zu laden. Dadurch können Web-Anwendungen schneller auf Benutzereingaben reagieren.</p>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h4 id="Dokumentaion"><a href="/Special:Tags?tag=AJAX&amp;language=de" title="Special:Tags?tag=AJAX&amp;language=de">Dokumentaion</a></h4>
+
+    <dl>
+     <dt><a href="/en-US/docs/Web/Guide/AJAX/Getting_Started">Einführung</a> (en)</dt>
+     <dd><small>Dieser Artikel zeigt Grundlagen von AJAX und gibt zum Einstieg zwei einfache Beispiele.</small></dd>
+     <dt><a class="external" href="http://www.webreference.com/programming/ajax_tech/">Alternative AJAX Techniken</a> (en)</dt>
+     <dd><small>Viele Artikel über Ajax fokussieren sich auf die Verwendung von XMLHttp, Ajax Techniken beschränken sich jedoch nicht nur auf XMLHttp. Es gibt weitere, unterschiedliche Methoden.</small></dd>
+     <dt><a class="external" href="http://www.adaptivepath.com/publications/essays/archives/000385.php">AJAX: Ein neuer Ansatz für Web-Anwendungen</a> (en)</dt>
+     <dd><small>Jesse James Garrett, von <a class="external" href="http://www.adaptivepath.com">adaptive path</a>, schrieb diesen Artikel im Februar 2005 und liefert eine Einführung in AJAX und die dahinter stehenden Konzepte.</small></dd>
+     <dt><a class="external" href="http://www.onlamp.com/pub/a/onlamp/2005/05/19/xmlhttprequest.html">Ein einfacherer AJAX Weg</a> (en)</dt>
+     <dd><small>"Es hat sich herausgestellt, dass es sehr einfach ist, die Vorteile vom XMLHttpRequest Objekt zu nutzen, eine Web-Anwendung wie eine Desktop-Anwendung reagieren zu lassen und immer noch die traditionellen Werkzeuge wie Formulare für Benutzereingaben zu verwenden. Ich habe außerdem gute Wege gefunden um serverseitig Fehler zu behandeln, um das Debugging einfacher zu gestalten."</small></dd>
+     <dt><a class="external" href="http://www.contentwithstyle.co.uk/Articles/38/fixing-the-back-button-and-enabling-bookmarking-for-ajax-apps">Den Zurück-Knopf wiederherstellen und Lesezeichen für AJAX Anwendungen ermöglichen</a> (en)</dt>
+     <dd><small>Dieser, von Mike Stenhouse verfasste Artikel, zeigt Methoden wie man die Funktionalität des Zurück-Knopfs wiederherstellen kann und die Probleme für Lesezeichen in AJAX-Anwendungen löst.</small></dd>
+     <dt><a class="external" href="http://alexbosworth.backpackit.com/pub/67688">AJAX Fehler</a> (en)</dt>
+     <dd><small>Alex Bosworth hat einen Artikel geschrieben, der einige Fehlerquellen mit der AJAX-Programmierung aufzeigt. "Sicherlich ist AJAX cool, und Entwickler lieben es mit coolen Technologien zu spielen. Jedoch ist AJAX ein Werkzeug und kein Spielzeug. AJAX ist außerdem eine gefährliche Technologie, die mit ihrer Mächtigkeit UI Probleme sowie Serverseitig Probleme verursacht. Also habe ich eine liste der möglichen Fehler, die AJAX-Prorammieren häufig machen, zusammengestellt."</small></dd>
+     <dt><a class="external" href="http://www.w3.org/TR/XMLHttpRequest/">XMLHttpRequest Spezifikation</a> (en)</dt>
+     <dd><small>W3C Working draft</small></dd>
+    </dl>
+
+    <p><span class="alllinks"><a href="/Special:Tags?tag=AJAX&amp;language=de" title="Special:Tags?tag=AJAX&amp;language=de">Alle zeigen...</a></span></p>
+   </td>
+   <td>
+    <h4 id="Community">Community</h4>
+
+    <ul>
+     <li>Mozillas AJAX Foren:</li>
+    </ul>
+
+    <p>{{ DiscussionList("dev-ajax", "mozilla.dev.ajax") }}</p>
+
+    <ul>
+     <li><a href="/en/AJAX/Community" title="en/AJAX/Community">AJAX community links</a></li>
+    </ul>
+
+    <h4 id="Tools">Tools</h4>
+
+    <ul>
+     <li><a class="external" href="http://www.ajaxprojects.com">Toolkits und Frameworks</a></li>
+     <li><a class="external" href="http://www.getfirebug.com/">Firebug - Ajax/Web development tool</a></li>
+     <li><a class="external" href="http://blog.monstuff.com/archives/000252.html">AJAX Debugging Tool</a></li>
+     <li><a class="external" href="http://www.osflash.org/doku.php?id=flashjs">Flash/AJAX Integration Kit</a></li>
+     <li><a class="external" href="http://xkr.us/code/javascript/XHConn/">XMLHTTP Interface Library</a></li>
+     <li><a href="/Special:Tags?tag=AJAX:Tools&amp;language=de" title="Special:Tags?tag=AJAX:Tools&amp;language=de">weitere...</a></li>
+    </ul>
+
+    <h4 id="Beispiele">Beispiele</h4>
+
+    <ul>
+     <li><a class="external" href="http://www.dhtmlgoodies.com/index.html?whichScript=ajax-poller">AJAX poller script</a></li>
+     <li><a class="external" href="http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=9">Ajax Chat Tutorial</a></li>
+     <li><a class="external" href="http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=13">RSS Ticker mit AJAX</a></li>
+     <li><a class="external" href="http://www.jamesdam.com/ajax_login/login.html#login">AJAX Login System mittels XMLHttpRequest</a></li>
+     <li><a class="external" href="http://www.thinkvitamin.com/features/ajax/create-your-own-ajax-effects">Eigene Ajax Effekte erstellen</a></li>
+     <li><a class="external" href="http://codinginparadise.org/weblog/2005/08/ajax-creating-huge-bookmarklets.html">AJAX: Bookmarklets</a></li>
+     <li><a class="external" href="http://www.hotajax.org">Hot Ajax</a></li>
+    </ul>
+
+    <h4 id="Verwandte_Themen">Verwandte Themen</h4>
+
+    <dl>
+     <dd><a href="/de/HTML" title="de/HTML">HTML</a>, <a href="/de/XHTML" title="de/XHTML">XHTML</a>, <a href="/de/CSS" title="de/CSS">CSS</a>, <a href="/de/DOM" title="de/DOM">DOM</a>, <a href="/de/JavaScript" title="de/JavaScript">JavaScript</a>, <a href="/de/XML" title="de/XML">XML</a>, <a href="/de/XMLHttpRequest" title="de/XMLHttpRequest">XMLHttpRequest</a>, <a href="/de/XSLT" title="de/XSLT">XSLT</a>, <a href="/de/DHTML" title="de/DHTML">DHTML</a>, <a href="/de/HTML/Canvas" title="de/HTML/Canvas">Canvas</a></dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{ languages( { "ca": "ca/AJAX", "cs": "cs/AJAX", "en": "en/AJAX", "es": "es/AJAX", "fr": "fr/AJAX", "it": "it/AJAX", "ja": "ja/AJAX", "ko": "ko/AJAX", "nl": "nl/AJAX", "pl": "pl/AJAX", "pt": "pt/AJAX", "ru": "ru/AJAX", "zh-cn": "cn/AJAX", "zh-tw": "zh_tw/AJAX" } ) }}</p>
diff --git a/files/de/web/guide/css/getting_started/farbe/index.html b/files/de/web/guide/css/getting_started/farbe/index.html
new file mode 100644
index 0000000000..a3e7d6a4eb
--- /dev/null
+++ b/files/de/web/guide/css/getting_started/farbe/index.html
@@ -0,0 +1,332 @@
+---
+title: Color
+slug: Web/Guide/CSS/Getting_started/Farbe
+translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{previousPage("/de/docs/Web/Guide/CSS/Getting_Started/Textstyles", "Text styles")}}Das ist der achte Teil des <a href="/de/docs/Web/Guide/CSS/Getting_Started">CSS Getting Started</a> Tutorials. Er erklärt, wie man Farben in CSS angeben kann. In Ihrem Stylesheet werden Sie Hintergrundfarben einführen.</p>
+
+<h2 class="clearLeft" id="Information_Farbe">Information: Farbe</h2>
+
+<p>In diesem Tutorial haben Sie soweit wenige der benannten Farben verwendet. CSS 2 unterstützt insgesamt 17 benannte Farben. Einige der Namen lauten aber nicht wie erwartet:</p>
+
+<table style="border: 0px; margin-left: 2em; text-align: right;">
+ <tbody>
+  <tr>
+   <td> </td>
+   <td>black</td>
+   <td style="width: 2em; height: 2em; background-color: black;"> </td>
+   <td>gray</td>
+   <td style="width: 2em; height: 2em; background-color: gray;"> </td>
+   <td>silver</td>
+   <td style="width: 2em; height: 2em; background-color: silver;"> </td>
+   <td>white</td>
+   <td style="width: 2em; height: 2em; background-color: white; border: 1px dotted gray;"> </td>
+  </tr>
+  <tr>
+   <td>primär</td>
+   <td>red</td>
+   <td style="width: 2em; height: 2em; background-color: red;"> </td>
+   <td>lime</td>
+   <td style="width: 2em; height: 2em; background-color: lime;"> </td>
+   <td>blue</td>
+   <td style="width: 2em; height: 2em; background-color: blue;"> </td>
+  </tr>
+  <tr>
+   <td>sekundär</td>
+   <td>yellow</td>
+   <td style="width: 2em; height: 2em; background-color: yellow;"> </td>
+   <td>aqua</td>
+   <td style="width: 2em; height: 2em; background-color: aqua;"> </td>
+   <td>fuchsia</td>
+   <td style="width: 2em; height: 2em; background-color: fuchsia;"> </td>
+  </tr>
+  <tr>
+   <td> </td>
+   <td>maroon</td>
+   <td style="width: 2em; height: 2em; background-color: maroon;"> </td>
+   <td>orange</td>
+   <td style="width: 2em; height: 2em; background-color: orange;"> </td>
+   <td>olive</td>
+   <td style="width: 2em; height: 2em; background-color: olive;"> </td>
+   <td>purple</td>
+   <td style="width: 2em; height: 2em; background-color: purple;"> </td>
+   <td>green</td>
+   <td style="width: 2em; height: 2em; background-color: green;"> </td>
+   <td>navy</td>
+   <td style="width: 2em; height: 2em; background-color: navy;"> </td>
+   <td>teal</td>
+   <td style="width: 2em; height: 2em; background-color: teal;"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<div class="tuto_details">
+<div class="tuto_type">Details</div>
+
+<p>Ihr Webbrowser könnte viel mehr benannte Farben unterstützen, wie zum Beispiel:</p>
+
+<table style="background-color: inherit; border: 0px; margin: .5em 0px .5em 2em; text-align: right;">
+ <tbody>
+  <tr>
+   <td>dodgerblue</td>
+   <td style="width: 2em; height: 2em; background-color: dodgerblue;"> </td>
+   <td>peachpuff</td>
+   <td style="width: 2em; height: 2em; background-color: peachpuff;"> </td>
+   <td>tan</td>
+   <td style="width: 2em; height: 2em; background-color: tan;"> </td>
+   <td>firebrick</td>
+   <td style="width: 2em; height: 2em; background-color: firebrick;"> </td>
+   <td>aquamarine</td>
+   <td style="width: 2em; height: 2em; background-color: aquamarine;"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Mehr Details zur erweiterten Liste finden Sie unter <a class="external" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#svg-color">SVG color keywords</a> im CSS 3 Color Module. Vermeiden Sie Farben, die vom Webbrowser des Lesers möglicheweise nicht unterstützt werden.</p>
+</div>
+
+<p>Für eine größere Farbpalette geben Sie die rot, grün und blau Komponenten der gewünschten Farbe mit einem Nummernzeichen (Hash) und drei <em>hexadezimalen</em> Ziffern im Bereich von 0 – 9 und a – f an. Die Buchstaben a – f repräsentieren die Werte 10 – 15:</p>
+
+<table style="border: 0px; margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td>schwarz</td>
+   <td style="width: 2em; height: 2em; background-color: #000;"> </td>
+   <td><code>#000</code></td>
+  </tr>
+  <tr>
+   <td>reines rot</td>
+   <td style="width: 2em; height: 2em; background-color: #f00;"> </td>
+   <td><code>#f00</code></td>
+  </tr>
+  <tr>
+   <td>reines grün</td>
+   <td style="width: 2em; height: 2em; background-color: #0f0;"> </td>
+   <td><code>#0f0</code></td>
+  </tr>
+  <tr>
+   <td>reines blau</td>
+   <td style="width: 2em; height: 2em; background-color: #00f;"> </td>
+   <td><code>#00f</code></td>
+  </tr>
+  <tr>
+   <td>weiß</td>
+   <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td>
+   <td><code>#fff</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><br>
+ Für die volle Farbpalette geben sie zwei hexadezimale Ziffern für jede Farbkomponente an:</p>
+
+<table style="border: 0px; margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td>schwarz</td>
+   <td style="width: 2em; height: 2em; background-color: #000;"> </td>
+   <td><code>#000000</code></td>
+  </tr>
+  <tr>
+   <td>reines rot</td>
+   <td style="width: 2em; height: 2em; background-color: #f00;"> </td>
+   <td><code>#ff0000</code></td>
+  </tr>
+  <tr>
+   <td>reines grün</td>
+   <td style="width: 2em; height: 2em; background-color: #0f0;"> </td>
+   <td><code>#00ff00</code></td>
+  </tr>
+  <tr>
+   <td>reines blau</td>
+   <td style="width: 2em; height: 2em; background-color: #00f;"> </td>
+   <td><code>#0000ff</code></td>
+  </tr>
+  <tr>
+   <td>weiß</td>
+   <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td>
+   <td><code>#ffffff</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Sie können normalerweise diese sechstelligen hexadezimalen Code in einem Grafikprogramm oder einem anderen Tool finden.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Beispiel</div>
+
+<p>Mit ein wenig Übung können Sie dreistellige Farben für die meisten Zwecke manuell anpassen:</p>
+
+<table style="background-color: #fffff4; border: 0px; margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td>Starten Sie mit reinem rot:</td>
+   <td style="width: 2em; height: 2em; background-color: #f00;"> </td>
+   <td><code>#f00</code></td>
+  </tr>
+  <tr>
+   <td>Um es blasser zu machen, fügen Sie ein wenig grün und blau hinzu:</td>
+   <td style="width: 2em; height: 2em; background-color: #f77;"> </td>
+   <td><code>#f77</code></td>
+  </tr>
+  <tr>
+   <td>Um es mehr orange zu machen, fügen Sie ein wenig mehr grün hinzu:</td>
+   <td style="width: 2em; height: 2em; background-color: #fa7;"> </td>
+   <td><code>#fa7</code></td>
+  </tr>
+  <tr>
+   <td>Um es dunkler zu machen, reduzieren sie alle Farbkomponenten:</td>
+   <td style="width: 2em; height: 2em; background-color: #c74;"> </td>
+   <td><code>#c74</code></td>
+  </tr>
+  <tr>
+   <td>Um die Sättigung zu reduzieren, gleichen sie die Farbkomponenten ein wenig an:</td>
+   <td style="width: 2em; height: 2em; background-color: #c98;"> </td>
+   <td><code>#c98</code></td>
+  </tr>
+  <tr>
+   <td>Wenn die Farbkomponenten exakt gleich sind, erhalten Sie grau:</td>
+   <td style="width: 2em; height: 2em; background-color: #ccc;"> </td>
+   <td><code>#ccc</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Für einen Pastellton wie ein blasses blau:</p>
+
+<table style="background-color: #fffff4; border: 0px; margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td>Starten Sie mit reinem weiß:</td>
+   <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td>
+   <td><code>#fff</code></td>
+  </tr>
+  <tr>
+   <td>Reduzieren Sie die anderen Farbkomponenten ein wenig:</td>
+   <td style="width: 2em; height: 2em; background-color: #eef; border: 1px dotted gray;"> </td>
+   <td><code>#eef</code></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">Mehr Details</div>
+
+<p>Sie können Farben auch mit dezimalen RGB Werten im Bereich von 0 – 255 oder mit Prozenten angeben.</p>
+
+<p>Das ist zum Beispiel Kastanienbraun (dunkles rot):</p>
+
+<pre class="brush:css">rgb(128, 0, 0)
+</pre>
+
+<p>Alle Details zur Angabe von Farben finden sie unter <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#color-units">Colors</a> in der CSS Spezifikation.</p>
+
+<p>Mehr Information zur Abstimmung von Farbsystemen wie Menu und ThreeDFace finden Sie unter <a class="external" href="http://www.w3.org/TR/CSS21/ui.html#system-colors">CSS2 System Colors</a> in der CSS Spezifikation.</p>
+</div>
+
+<h3 id="Farbeigenschaften">Farbeigenschaften</h3>
+
+<p>Sie haben bereits die {{ cssxref("color") }} Eigenschaft auf Text angewendet.</p>
+
+<p>Sie können auch die {{ cssxref("background-color") }} Eigenschaft verwenden, um die Hintergrundfarbe eines Elements zu verändern.</p>
+
+<p>Hintergründe können auf <code>transparent</code> gesetzt werden, um explizit die Hintergrundfarbe zu entfernen. Somit ist der Hintergrund des Elternelements sichtbar.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Beispiel</div>
+
+<p>Die <strong>Beispiel-</strong>Boxen in diesem Tutorial verwenden dieses blasse gelb als Hintergrund:</p>
+
+<pre class="brush:css">background-color: #fffff4;
+</pre>
+
+<p>Die <strong>Mehr Details</strong>-Boxen verwenden dieses blasse grau:</p>
+
+<pre class="brush:css">background-color: #f4f4f4;
+</pre>
+</div>
+
+<p> </p>
+
+<h2 id="Aktion_Farbcodes_verwenden">Aktion: Farbcodes verwenden</h2>
+
+<ol>
+ <li>Bearbeiten Sie Ihre CSS Datei.</li>
+ <li>Make the change shown here in bold, to give the initial letters a pale blue background. (The layout and comments in your file probably differ from the file shown here. Keep the layout and comments the way you prefer them.)
+  <pre class="brush:css;highlight:[13]">/*** CSS Tutorial: Color page ***/
+
+/* page font */
+body {font: 16px "Comic Sans MS", cursive;}
+
+/* paragraphs */
+p {color: blue;}
+#first {font-style: italic;}
+
+/* initial letters */
+strong {
+  color: red;
+  background-color: #ddf;
+  font: 200% serif;
+  }
+
+.carrot {color: red;}
+.spinach {color: green;}
+</pre>
+ </li>
+ <li>Save the file and refresh your browser to see the result.</li>
+</ol>
+
+<table>
+ <tbody>
+  <tr>
+   <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="background-color: #ddf; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddf; color: green; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddf; color: green; font: 200% serif;">S</strong>heets</td>
+  </tr>
+  <tr>
+   <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="background-color: #ddf; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddf; color: red; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddf; color: red; font: 200% serif;">S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="tuto_example">
+<div class="tuto_type">Herausforderung</div>
+
+<p>In your CSS file, change all the color names to 3-digit color codes without affecting the result.</p>
+
+<p>(This cannot be done exactly, but you can get close. To do it exactly you need 6-digit codes, and you need to look up the CSS Specification or use a graphics tool to match the colors.)</p>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Possible solution</div>
+
+<p>The following values are reasonable approximations of the named colors:</p>
+
+<pre class="brush: css">strong {
+  color: #f00; /* red */
+  background-color: #ddf; /* pale blue */
+  font: 200% serif;
+}
+
+.carrot {
+  color: #fa0; /* orange */
+}
+
+.spinach {
+  color: #080; /* dark green */
+}
+
+p {
+  color: #00f; /* blue */
+}
+</pre>
+
+<p> </p>
+<a class="hideAnswer" href="#challenge">Hide solution</a></div>
+<a href="#tutochallenge" title="Display a possible solution for the challenge">Sehen Sie sich die Lösung an.</a></div>
+
+<h2 id="What_next">What next?</h2>
+
+<p>{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Content", "Content")}}Your sample document and your sample stylesheet strictly separate content from style. The <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Content" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Content">next section</a> explains how you can make exceptions to this strict separation.</p>
diff --git a/files/de/web/guide/css/getting_started/index.html b/files/de/web/guide/css/getting_started/index.html
new file mode 100644
index 0000000000..3629de6539
--- /dev/null
+++ b/files/de/web/guide/css/getting_started/index.html
@@ -0,0 +1,59 @@
+---
+title: Einführung
+slug: Web/Guide/CSS/Getting_started
+tags:
+  - CSS
+  - 'CSS:Einführung'
+translation_of: Learn/CSS/First_steps
+---
+<h3 id="Einleitung">Einleitung</h3>
+<p>Dieser Artikel stellt eine Einführung in Cascading Style Sheets (CSS) dar.</p>
+<p>Die Führung durch die grundlegenden Möglichkeiten von CSS ist mit einigen praktischen Beispielen zum Testen auf dem eigenen Computer untermalt. Das Tutorial gliedert sich in zwei Teile:</p>
+<ul>
+ <li>Der erste Teil verdeutlicht die grundlegenden Möglichkeiten von CSS, die in Mozilla Browsern und in den meisten anderen modernen Browsern funktionieren.</li>
+</ul>
+<ul>
+ <li>Der zweite Teil beinhaltet einige Beispiele über spezielle Möglichkeiten, die in Mozilla Browsern funktionieren, aber nicht unbedingt von anderen Browsern unterstützt werden.</li>
+</ul>
+<p>Diese Einführung basiert auf der <a class="external" href="http://www.w3.org/TR/CSS21/">CSS 2.1 Spezifikation</a>.</p>
+<h4 id="An_wen_richtet_sich_dieses_Tutorial">An wen richtet sich dieses Tutorial?</h4>
+<p>Dieses Tutorial ist vorwiegend für Anfänger geschrieben, allerdings kann es auch für jemanden mit etwas Erfahrung hilfreich sein.</p>
+<p>Anfänger, die noch wenig über CSS wissen, sollten den ersten Teil dieses Tutorials lesen, um CSS zu verstehen und zu lernen wie man es benutzt. Danach bietet sich der zweite Teil an, um die Möglichkeiten in Mozilla Produkten kennen zu lernen.</p>
+<p>Fortgeschrittene, die schon etwas über CSS wissen, können einfach die Teile überspringen, die sie schon kennen und nur die Teile lesen, die sie interessiert.</p>
+<p>Fortgeschrittene, die Erfahrungen mit CSS haben, aber nichts über CSS in Mozilla wissen, sollten zum zweiten Teil springen.</p>
+<h4 id="Was_braucht_man_bevor_man_anfängt">Was braucht man bevor man anfängt?</h4>
+<p>Am Besten versteht man dieses Tutorial, wenn man die Beispiele direkt nachvollzieht. Benötigt wird dazu ein Editor für Textdateien und der Mozilla Firefox mit dem man grundlegend umgehen sollte.</p>
+<p>Ein weniger effektiver Weg ist es, das Tutorial einfach nur durchzulesen ohne selbst Dateien zu erstellen.</p>
+<p>Einige Teile dieses Tutorials benötigen unter Umständen die Mozilla Software. Diese Teile sind optional und können gegebenenfalls übersprungen werden.</p>
+<p><strong>Hinweis: </strong> CSS ermöglicht das Arbeiten mit Farben. Einige Teile dieses Tutorials sind von Farben abhängig. Diese Teile können nur benutzt werden, wenn ein Farbdisplay mit normalen Farbeinstellungen verfügbar ist.</p>
+<h4 id="Wie_man_dieses_Tutorial_benutzen_sollte">Wie man dieses Tutorial benutzen sollte</h4>
+<p>Um dieses Tutorial zu verwenden, sollten die Seiten sorgfältig und der Reihe nach, gelesen werden. Wird eine Seite ausgelassen, könnte es schwierig werden die nachfolgenden Seiten zu verstehen.</p>
+<p>Auf jeder Seite gibt es einen <em>Informationsbereich</em>, um zu verstehen wie CSS funktioniert und einen <em>Aktionsbereich</em>, um CSS auf dem eigenen Computer selbst auszuprobieren.</p>
+<p>Um das Wissen zu überprüfen, gibt es am Ende jeder Seite eine Aufgabe. Die Lösungen einiger Aufgaben ergeben sich aus den nachfolgenden Seiten des Tutorials.</p>
+<p>Damit man noch tiefer in CSS eintauchen kann, ist es sinnvoll die Hinweise unter <em>Weite Details</em> zu lesen und den Links zu folgen, die auf die CSS Spezifikation verweisen.</p>
+<h3 id="Erster_Teil">Erster Teil</h3>
+<p>Eine Schritt für Schritt Einführung in CSS:</p>
+<ol>
+ <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/What_is_CSS" rel="next" title="Chapter 'What is CSS' of the CSS tutorial">Was ist CSS</a></li>
+ <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS" title="Chapter 'Why use CSS' of the CSS tutorial">Warum CSS</a></li>
+ <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/How_CSS_works" title="Chapter 'How CSS works' of the CSS tutorial">Wie CSS funktioniert</a></li>
+ <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="Chapter 'Cascading and inheritance' of the CSS tutorial">Kaskade und Vererbung</a></li>
+ <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/Selectors" title="Chapter 'Selectors' of the CSS tutorial">Selektoren</a></li>
+ <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="Chapter 'Readable_CSS' of the CSS tutorial">Lesbares CSS</a></li>
+ <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/Text_styles" title="Chapter 'Text_styles' of the CSS tutorial">Textformatierung</a></li>
+ <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/Color" title="Chapter 'Color' of the CSS tutorial">Farbe</a></li>
+ <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/Content" title="Chapter 'Content' of the CSS tutorial">Inhalt Boxen</a></li>
+ <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/Boxes" title="Chapter 'Boxes' of the CSS tutorial">Boxes</a></li>
+ <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/Layout" title="Chapter 'Layout' of the CSS tutorial">Layout</a></li>
+ <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/Tables" title="Chapter 'Tables' of the CSS tutorial">Tabellen</a></li>
+ <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/Media" title="Chapter 'Media' of the CSS tutorial">Medien</a></li>
+</ol>
+<h3 id="Zweiter_Teil">Zweiter Teil</h3>
+<p>Beispiele, die die Anwendung von CSS in Mozilla zeigen:</p>
+<ol>
+ <li><a href="/de/docs/Web/Guide/CSS/Getting_started/JavaScript" title="de/CSS/Einführung/JavaScript">JavaScript</a></li>
+ <li><a href="/de/docs/Web/Guide/CSS/Getting_started/XBL_bindings" title="de/CSS/Einführung/XBL_bindings">XBL bindings</a></li>
+ <li><a href="/de/docs/Web/Guide/CSS/Getting_started/CSS_in_XUL" title="de/CSS/Einführung/CSS_in_XUL">CSS in XUL</a></li>
+ <li><a href="/de/docs/Web/Guide/CSS/Getting_started/CSS_in_SVG" title="de/CSS/Einführung/CSS_in_SVG">CSS in SVG</a></li>
+ <li><a href="/de/docs/Web/Guide/CSS/Getting_started/CSS_in_XML" title="de/CSS/Einführung/CSS_in_XML">CSS in XML</a></li>
+</ol>
diff --git a/files/de/web/guide/css/getting_started/kaskadierung_und_vererbung/index.html b/files/de/web/guide/css/getting_started/kaskadierung_und_vererbung/index.html
new file mode 100644
index 0000000000..8ebc7fe0cc
--- /dev/null
+++ b/files/de/web/guide/css/getting_started/kaskadierung_und_vererbung/index.html
@@ -0,0 +1,159 @@
+---
+title: Kaskadierung und Vererbung
+slug: Web/Guide/CSS/Getting_started/Kaskadierung_und_vererbung
+translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{ previousPage("/de/docs/Web/Guide/CSS/Getting_Started/How_CSS_works", "Wie CSS funktioniert.")}}<span class="seoSummary">Das ist der vierte Abschnitt des <a href="/de/docs/Web/Guide/CSS/Getting_Started" title="/de/docs/Web/Guide/CSS/Getting_Started">CSS Getting Started</a> Tutorials. Er erklärt wie Stylesheets in einer Kaskade interagieren und wie Element den Style von ihren Elternelmenten erben können. Sie werden Vererbung verwenden, um eine Menge von Teilen in Ihrem Beispieldokument in einem Schritt zu verändern.</span></p>
+
+<h2 class="clearLeft" id="Information_Kaskadierung_und_Vererbung">Information: Kaskadierung und Vererbung</h2>
+
+<p>Der schlussendliche Style eines Elements kann an vielen verschiedenen Orten angegeben werden, die auf eine komplexe Art miteinander interagieren. Diese Komplexität macht CSS mächtig. Aber dadurch kann es auch verwirrend und schwer zu debuggen werden.</p>
+
+<p>Drei Hauptquellen von Styleinformationen bilden eine <em>Kaskade</em>. Diese sind:</p>
+
+<ul>
+ <li>Die standardmäßigen Styles des Webbrowsers für die Markup Language.</li>
+ <li>Die Styles, die vom Benutzer, der das Dokument liest, angegeben werden.</li>
+ <li>Die Styles, die vom Autor mit dem Dokument verknüpft worden sind. Diese können an drei verschiedenen Orten angegeben werden:
+  <ul>
+   <li>In einer externen Datei: Dieses Tutorial diskutiert hauptsächlich diese Method zur Definition von Styles.</li>
+   <li>In einer Definition am Anfang des Dokumenst: Diese Methode sollte nur für Styles verwendet werden, die nur von dieser Seite benützt werden.</li>
+   <li>Auf einem bestimmten Element im Inhalt des Dokument: Das ist die am schwersten wartbare Methode, welche für Tests verwendet werden kann.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Der Style des Benutzers verändert den standardmäßigen Style des Webbrowsers. Der Style des Autors des Dokuments verändert dann den Style ein weiteres Mal. In diesem Tutorial sind Sie der Autor des Beispieldokuments und es wird nur mit Stylesheets vom Autor gearbeitet.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Beispiel</div>
+
+<p>Wenn Sie dieses Dokument in einem Webbrowser lesen, kommen Teile des Styles, den Sie sehen, von dem standardmäßigen Style des Webbrowsers für HTML.</p>
+
+<p>Teile vom Style können von angepassten Webbrowsereinstellungen oder von einer angepassten Styledefinitionsdatei stammen. In Firefox können die Einstellungen im Preferences Dialog vorgenommen werden, oder Sie geben Styles in der Datei <code>userContent.css</code> innerhalb Ihres Browserprofils an.</p>
+
+<p>Andere Teile vom Style kommen aus Stylesheets, die vom Wiki-Server mit dem Dokument verlinkt werden.</p>
+</div>
+
+<p>Wenn Sie Ihr Beispieldokument in Ihrem Webbrowser öffnen, werden die {{ HTMLElement("strong") }} Elemente mit dickeren Buchstaben als der Rest des Textes dargestellt. Das kommt aus dem standardmäßigen Style des Webbbrowsers für HTML.</p>
+
+<p>Die {{ HTMLElement("strong") }} Elemente sind rot. Das kommt aus Ihrem Beispielstylesheet.</p>
+
+<p>Die {{ HTMLElement("strong") }} Elemente erben auch viele Eigenschaften vom Style des {{ HTMLElement("p") }} Elements, weil sie ein Kindelement davon sind. Auf dieselbe Art erbt das {{ HTMLElement("p") }} Element vom Style des {{ HTMLElement("body") }} Elements.</p>
+
+<p>Für Styles in der Kaskade haben die Stylesheets vom Autor höchste Priorität. Danach folgen die Stylesheets des Benutzers und der standardmäßige Stylesheet vom Webbrowser.</p>
+
+<p>Bei vererbten Styles haben die eigenen Styles von Kindelementen eine höhere Priorität als die von dessen Elternelementen.</p>
+
+<p>Das sind nicht alle Prioritäten, die angwendet werden. Folgende Seiten in diesem Tutorial gehen noch detaillierter darauf ein.</p>
+
+<div class="tuto_details">
+<div class="tuto_type">Mehr Details</div>
+
+<p>CSS ermöglicht es auch mit dem Schlüsselwort <code>!important</code> die Styles vom Autor zu überschreiben.</p>
+
+<p>Das bedeutet, dass ein Autor nicht immer genau vorhersehen kann, was genau die Leser sehen werden.</p>
+
+<p>Wenn Sie alle Details über Kaskadierung und Vererbung erfahren wollen, rufen Sie bitte die Seite <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">Assigning property values, Cascading, and Inheritance</a> in der CSS Spezifikation auf.</p>
+</div>
+
+<h2 id="Aktion_Vererbung_verwenden">Aktion: Vererbung verwenden</h2>
+
+<ol>
+ <li>Editieren Sie Ihre CSS Datei.</li>
+ <li>Kopieren Sie die folgende Zeile in Ihre CSS Datei. Es macht dabei keinen Unterschied, ob Sie die Zeile vor oder nach der bereits enthaltenen Zeile einfügen. Es ist aber verständlicher die Zeile oben einzufügen, da das {{ HTMLElement("p") }} Element in Ihrem Dokument das Elternelement vom {{ HTMLElement("strong") }} Element ist:
+  <pre class="brush:css">p {
+  color: blue;
+  text-decoration: underline;
+}
+</pre>
+ </li>
+ <li>Laden Sie die Seite im Webbrowser erneut, damit die Änderung an Ihrem Beispieldokument sehen können. Die unterstreichende Line betrifft den gesamten Text im Absatz und somit auch alle Anfangsbuchstaben. Die {{ HTMLElement("strong") }} Elemente haben den Unterstrich von ihrem Elternknoten {{ HTMLElement("p") }} geerbt.<br>
+
+  <p>Die {{ HTMLElement("strong") }} Elemente sind aber immer noch rot. Die rote Farbe gehört zu ihrem eigenen Style und hat somit Priorität gegenüber dem blau des {{ HTMLElement("p") }} Elternelements.</p>
+ </li>
+</ol>
+
+<h2 id="Before" name="Before">Davor</h2>
+
+<h3 id="HTML_Inhalt">HTML Inhalt</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  &lt;strong&gt;C&lt;/strong&gt;ascading
+  &lt;strong&gt;S&lt;/strong&gt;tyle
+  &lt;strong&gt;S&lt;/strong&gt;heets
+&lt;/p&gt;
+</pre>
+
+<h3 id="CSS_Inhalt">CSS Inhalt</h3>
+
+<pre class="brush: css">strong {
+  color:red
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Before') }}</p>
+
+<h2 id="After" name="After">Danach</h2>
+
+<h3 id="HTML_Inhalt_2">HTML Inhalt</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  &lt;strong&gt;C&lt;/strong&gt;ascading
+  &lt;strong&gt;S&lt;/strong&gt;tyle
+  &lt;strong&gt;S&lt;/strong&gt;heets
+&lt;/p&gt;</pre>
+
+<h3 id="CSS_Inhalt_2">CSS Inhalt</h3>
+
+<pre class="brush:css" dir="rtl">p {
+  color:blue;
+  text-decoration:underline;
+}
+
+strong {
+  color:red;
+}</pre>
+
+<p>{{ EmbedLiveSample('After') }}</p>
+
+<p> </p>
+
+<div class="tuto_example">
+<div class="tuto_type">Herausforderung</div>
+Verändern Sie Ihren Stylesheet, damit nur die roten Buchstaben unterstrichen sind:
+
+<table style="border: 2px outset #36b; padding: 1em;">
+ <tbody>
+  <tr>
+   <td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Mögliche Lösung</div>
+
+<p>Verschieben Sie die Deklaration für die untersteichende Linie aus der Regel für {{ HTMLElement("p") }} in die für {{ HTMLElement("strong") }}. Die resultierende Datei sieht folgendermaßen aus:</p>
+
+<pre class="brush: css">p {
+  color: blue;
+}
+
+strong {
+  color: red;
+  text-decoration: underline;
+}
+</pre>
+
+<p> </p>
+<a class="hideAnswer" href="#challenge">Lösung ausblenden</a></div>
+<a href="#tutochallenge" title="Eine mögliche Lösung für die Herausforderung darstellen">Sehen Sie sich die Lösung an.</a></div>
+
+<p> </p>
+
+<h2 id="Was_kommt_als_Nächstes">Was kommt als Nächstes?</h2>
+
+<p>{{ nextPage("/de/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selektoren")}}Ihr Beispielstylesheet definiert Styles für die Tags <code>&lt;p&gt;</code> und <code>&lt;strong&gt;</code>, um den Style der entsprechenden Elemente im gesamten Dokument zu verändern. Der nächste Abschnitt beschreibt, wie Sie den Style auf eine noch <a href="/de/docs/Web/Guide/CSS/Getting_Started/Selektoren" title="/de/docs/Web/Guide/CSS/Getting_Started/Selektoren">selektivere Art</a> angeben können.</p>
diff --git a/files/de/web/guide/css/getting_started/lesbares_css/index.html b/files/de/web/guide/css/getting_started/lesbares_css/index.html
new file mode 100644
index 0000000000..460d137c59
--- /dev/null
+++ b/files/de/web/guide/css/getting_started/lesbares_css/index.html
@@ -0,0 +1,165 @@
+---
+title: Lesbares CSS
+slug: Web/Guide/CSS/Getting_started/Lesbares_CSS
+translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{ previousPage("/de/docs/Web/Guide/CSS/Getting_Started/Selektoren", "Selektoren")}}<span class="seoSummary">Das ist der sechste Teil des <a href="/de/docs/Web/Guide/CSS/Getting_Started" title="/de/docs/Web/Guide/CSS/Getting_Started">CSS Getting Started</a> Tutorials. Er erklärt den Stil und die Grammatik der CSS Sprache selbst. Sie ändern das Layout Ihrer CSS Datei, damit sie lesbarer wird.</span></p>
+
+<h2 class="clearLeft" id="Information_Lesbares_CSS">Information: Lesbares CSS</h2>
+
+<p>Sie können Leerstellen und Kommentare in Ihren Stylesheets einfügen, um sie lesbarer zu machen. Wenn verschiedene Selektoren dasselbe Element nur auf verschiedene Arten auswählen und deren Regeln darauf angewendet werden, können Sie diese Selektoren im Stylesheet nacheinander gruppieren.</p>
+
+<h3 id="Leerstellen">Leerstellen</h3>
+
+<p>Leerstellen können Leerzeichen, Tabs und Leerzeilen sein. Sie können Leerstellen in Ihren Stylesheets einfügen, um sie lesbarer zu machen.</p>
+
+<p>Im Kontext eines Seitenlayouts und -zusammenstellung sind <strong>Leerstellen</strong> die Teile einer Seite, die frei bleiben: Seitenränder, Zwischenräume und Platz zwischen Spalten und beschriebene Zeilen.</p>
+
+<p>Ihre CSS Datei aus den Beispielen hat momentan eine Regel pro Zeile und fast nur das Minimum von Leerstellen. In einem komplexen Stylesheet würde diese Layout schwer zu lesen und somit auch schwer zu warten sein.</p>
+
+<p>Das gewählte Layout ist normalerweise eine persönliche Vorliebe. Doch wenn Ihre Stylesheets Teil eines gemeinsammen Projekts sind, könnten diese Projekte eigene Konventionen für das Layout haben.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Beispiele</div>
+
+<p>Einige Personen mögen das kompakte Layout, das wir bis jetzt verwendet haben, in dem eine Zeile nur geteilt wird, wenn sie sonst sehr lange sein würde:</p>
+
+<pre class="brush: css">.carrot {color: orange; text-decoration: underline; font-style: italic;}
+</pre>
+
+<p>Einige Personen bevorzugen, wenn pro Zeile ein Property-Wert-Paar steht:</p>
+
+<pre class="brush: css">.carrot
+{
+color: orange;
+text-decoration: underline;
+font-style: italic;
+}
+</pre>
+
+<p>Einige Personen verwenden dann auch Einzüge — zwei oder vier Leerzeichen oder ein Tab sind gebräuchlich:</p>
+
+<pre class="brush: css">.carrot {
+  color: orange;
+  text-decoration: underline;
+  font-style: italic;
+}
+</pre>
+
+<p>Einige Personen richten alles vertikal an (aber solche Layouts sind schwer zu warten):</p>
+
+<pre class="brush: css">.carrot
+    {
+    color           : orange;
+    text-decoration : underline;
+    font-style      : italic;
+    }
+</pre>
+
+<p>Einige Personen verwenden verschieden viele Leerzeichen, um die Lesbarkeit zu verbessern.</p>
+
+<pre class="brush: css">.vegetable         { color: green; min-height:  5px; min-width:  5px }
+.vegetable.carrot  { color: orange;    height: 90px;     width: 10px }
+.vegetable.spinach { color: darkgreen; height: 30px;     width: 30px }
+</pre>
+</div>
+
+<p>Einige Personen verwenden Tabs für das Layout, während andere nur Leerzeichen verwenden.</p>
+
+<h3 id="Kommentare">Kommentare</h3>
+
+<p>Kommentare in CSS beginnen mit <code>/*</code> und enden mit <code>*/</code>.</p>
+
+<p>Sie können Kommentare in Stylesheets für Anmerkungen verwenden oder auch Teile vorübergehend für Testzwecke <em>auskommentieren</em>.</p>
+
+<p>Um Teile eines Stylesheets auszukommentieren, platzieren Sie diesen Teil in einem Kommentar, damit der Webbrowser ihn nicht auswertet. Seien Sie mit dem Start und dem Ende eines Kommentars vorsichtig. Der Rest des Stylesheets muss weiterhin eine korrekte Syntax haben.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Beispiel</div>
+
+<pre class="brush: css">/* style for initial letter C in first paragraph */
+.carrot {
+  color:            orange;
+  text-decoration:  underline;
+  font-style:       italic;
+  }
+</pre>
+</div>
+
+<h3 id="Gruppierte_Selektoren">Gruppierte Selektoren</h3>
+
+<p>Wenn mehrere Elemente denselben Style haben, können Sie eine Gruppe von Selektoren getrennt mit einem Komma spezifizieren. Die Deklaration wird dann auf alle selektierten Elemente angewendet.</p>
+
+<p>An einer anderen Stelle in Ihrem Stylesheet können Sie einen einzelnen Selektor erneut spezifizieren, um zusätzlich individuelle Regeln dazu anzugeben.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Beispiel</div>
+
+<p>Diese Regel macht {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }} und {{ HTMLElement("h3") }} Elemente in derselben Farbe.</p>
+
+<p>Es ist angenehm die Farbe an nur einer Stelle zu spezifizieren, denn dann kann sie später einfacher verändert werden.</p>
+
+<pre class="brush: css">/* color for headings */
+h1, h2, h3 {color: navy;}
+</pre>
+</div>
+
+<h2 id="Aktion_Kommentare_hinzufügen_und_das_Layout_verbessern">Aktion: Kommentare hinzufügen und das Layout verbessern</h2>
+
+<ol>
+ <li>Bearbeiten Sie Ihre CSS Datei und schreiben Sie die folgenden Regeln hinein (in beliebiger Reihenfolge):
+  <pre class="brush: css">strong {color: red;}
+.carrot {color: orange;}
+.spinach {color: green;}
+#first {font-style: italic;}
+p {color: blue;}
+</pre>
+ </li>
+ <li>Machen Sie den Stylesheet lesbaren, in dem sie die Regeln in eine für Sie logische Reihenfolge bringen und Sie Ihrer Meinung nach sinnvolle Leerstellen und Kommentare einfügen.</li>
+ <li>Speichern Sie die Datei und aktualisieren Sie Ihren Webbrowser, um sicherzustellen, dass Ihre Änderungen keinen Einfluss auf die Anwendung des Stylesheets haben:
+  <table style="border: 2px outset #36b; padding: 1em;">
+   <tbody>
+    <tr>
+     <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+    </tr>
+    <tr>
+     <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+</ol>
+
+<div class="tuto_details">
+<div class="tuto_type">Herausforderung</div>
+
+<p>Kommentiere Sie nur Teile Ihres Stylesheets aus, damit nur der allererste Buchstabe in Ihrem Dokument rot ist:</p>
+
+<table style="background-color: white; border: 2px outset #36b; padding: 1em;">
+ <tbody>
+  <tr>
+   <td style="font-style: italic; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+  </tr>
+  <tr>
+   <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>(Es gibt mehrere Wege dies zu erreichen.)</p>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Mögliche Lösung</div>
+Eine mögliche Lösung wäre das Auskommentieren der Regel <code>.carrot</code>:
+
+<pre class="brush: css">/*.carrot {
+  color: orange;
+}*/</pre>
+<a class="hideAnswer" href="#challenge">Lösung ausblenden</a></div>
+<a href="#tutochallenge" title="Eine mögliche Lösung für die Herausforderung darstellen">Sehen Sie sich die Lösung an.</a></div>
+
+<h2 id="Was_kommt_als_Nächstes">Was kommt als Nächstes?</h2>
+
+<p>{{ nextPage("/de/docs/Web/Guide/CSS/Getting_Started/Textstyles", "Textstyles") }}Ihr Beispiel-Stylesheet verwendet kursiven und unterstrichenen Text. Die nächste Seite beschreibt weitere Wege, um <a href="/de/docs/Web/Guide/CSS/Getting_Started/Textstyles" title="/de/docs/Web/Guide/CSS/Getting_Started/Textstyles">das Aussehen von Text</a> in Ihrem Dokument zu spezifizieren<strong>.</strong></p>
diff --git a/files/de/web/guide/css/getting_started/selektoren/index.html b/files/de/web/guide/css/getting_started/selektoren/index.html
new file mode 100644
index 0000000000..cd9115477c
--- /dev/null
+++ b/files/de/web/guide/css/getting_started/selektoren/index.html
@@ -0,0 +1,429 @@
+---
+title: Selektoren
+slug: Web/Guide/CSS/Getting_started/Selektoren
+translation_of: Learn/CSS/Building_blocks/Selectors
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{ previousPage("/de/docs/Web/Guide/CSS/Getting_Started/Kaskadierung_und_vererbung", "Kaskadierung &amp; Vererbung")}}<span class="seoSummary">Das ist der fünfte Abschnitt des <a href="/de/docs/Web/Guide/CSS/Getting_Started" title="/de/docs/Web/Guide/CSS/Getting_Started">CSS Getting Started</a> Tutorials. Er erklärt wie sie Styles selektiv anwenden können und wie verschiedene Arten von Selektoren verschiedene Prioritäten haben können. Sie fügen einige Attribute zu den Tags in Ihrem Beispiel-Dokument hinzu und Sie verwenden diese Attribute in Ihrem Beispielstylesheet.</span></p>
+
+<h2 class="clearLeft" id="Information_Selektoren">Information: Selektoren</h2>
+
+<p>CSS hat eine eigene Terminologie, die die CSS Sprache beschreibt. Früher in diesem Tutorial haben Sie eine Zeile wie die folgende geschrieben:</p>
+
+<pre class="brush: css">strong {
+  color: red;
+}
+</pre>
+
+<p>In der CSS Terminologie ist die gesamte Zeile eine <em>Regel</em>. Diese Regel beginnt mit <code>strong</code>, welches ein <em>Selektor</em> ist. Sie wählt aus, auf welche Elemente im DOM die Regel angewandt wird.</p>
+
+<div class="tuto_details">
+<div class="tuto_type">Mehr Details</div>
+
+<p>Der Teil innerhalb der geschwungenen Klammern ist die <em>Deklaration</em>.</p>
+
+<p>Das Schlüsselwort <code>color</code> ist eine <em>Eigenschaft (Property)</em> und <code>red</code> is ein <em>Wert (value)</em>.</p>
+
+<p>Das Semicolon nach dem Property-Value Pair trennt es von anderen Property-Value Pairs in derselben Deklaration.</p>
+
+<p>Dieser Tutorial bezeichnet einen Selektor wie <code>strong</code> als einen <em>Tag</em>-Selektor. Die CSS Spezifikation bezeichnet es als <em>Type</em>-Selector.</p>
+</div>
+
+<p>Diese Seite vom Tutorial geht detaillierter auf die Selektoren ein, die in CSS Regeln verwendet werden können.</p>
+
+<p>Zusätzlich zu Tagnamen können Werte von Attributen in Selektoren verwendet werden. Damit können Regeln spezifischer gemacht werden.</p>
+
+<p>Zwei Attribute haben einen speziellen Status in CSS. Diese sind <a href="/de/docs/Web/HTML/Global_attributes#attr-class" title="/de/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> und <a href="/de/docs/Web/HTML/Global_attributes#id" title="/de/docs/Web/HTML/Global_attributes#id"><code>id</code></a>.</p>
+
+<h3 id="Class_Selektoren">Class Selektoren</h3>
+
+<p>Verwenden Sie das <a href="/de/docs/Web/HTML/Global_attributes#attr-class" title="/de/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> Attribut in einem Element, um das Element einer Klasse zuzuordnen. Der Name der Klasse ist frei wählbar. Mehrere Elemente in einem Dokument können denselben Wert für die Klasse haben.</p>
+
+<p>Tippen Sie einen Punkt direkt vor dem Klassennamen im Stylesheet, um die Klasse im Selektor zu verwenden.</p>
+
+<h3 id="ID_Selektoren">ID Selektoren</h3>
+
+<p>Verwenden Sie das <a href="/de/docs/Web/HTML/Global_attributes#id" title="/de/docs/Web/HTML/Global_attributes#id"><code>id</code></a> Attribut in einem Element, um dem Elemente eine ID zuzuweisen. Der Name der ID ist frei wählbar. Die ID muss innerhalb vom Dokument eindeutig sein.</p>
+
+<p>Tippen Sie eine Raute (Hash) direkt vor der ID im Styleshet, um die ID im Selektor zu verwenden.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Beispiel</div>
+Dieser HTML Tag hat ein <code>class</code> Attribut und ein <code>id</code> Attribute:
+
+<pre class="brush: html">&lt;p class="key" id="principal"&gt;
+</pre>
+
+<p>Der <strong>id</strong> Wert, <code>principal</code>, muss innerhalb vom Dokument eindeutig, aber andere Tags Dokument dürfen denselben K<strong>lassennamen</strong>, <code>key</code>, haben.</p>
+
+<p>In einem CSS Stylesheet macht diese Regel alle Elemente mit der class <code>key</code> grün. (Sie müssen dazu kein {{ HTMLElement("p") }} sein.)</p>
+
+<pre class="brush: css">.key {
+  color: green;
+}
+</pre>
+
+<p>Diese Regel macht das eine Element mit der <strong>id</strong> <code>principal</code> fettgedruckt:</p>
+
+<pre class="brush: css">#principal {
+  font-weight: bolder;
+}
+</pre>
+</div>
+
+<p>Wenn mehr als eine Regel auf ein Element zutreffen und dieselbe Eigenschaft spezifiziert wird, gibt CSS der Regel mit dem spezifischeren Selektor Priorität. Ein ID Selektor ist spezifischer als ein class Selektor, welcher wiederum spezifischer als ein tag Selektor ist.</p>
+
+<div class="tuto_details">
+<div class="tuto_type">Mehr Details</div>
+
+<p>Sie können Selektoren kombinieren, um einen selektiveren Selektor zu erstellen.</p>
+
+<p>Der Selektor <code>.key</code> zum Beispiel selektier alle Elements mit der Klasse <code>key</code>. Der Selektor <code>p.key</code> selektiert nur {{ HTMLElement("p") }} Elemente, die die Klasse <code>key</code> haben.</p>
+
+<p>Sie sind nicht auf die zwei speziellen Attribute <code>class</code> und <code>id</code> eingeschränkt. Mit eckigen Klammern können Sie auch andere Attribute spezifizieren. Der Selektor <code>[type='button']</code> zum Beispiel selektiert alle Elemente, die ein <code>type</code> Attribut mit dem Wert <code>button</code> haben.</p>
+</div>
+
+<p>Wenn ein Stylesheet Regeln mit einem Konflikt hat und und diese gleich spezifisch sind, dann gibt CSS der Regel, die später im Stylesheet ist, Priorität.</p>
+
+<p>Wenn Sie Probleme mit konfliktierenden Regeln haben, versuchen Sie eine Regel spezifischer zu machen, damit sie Priorität hat. Wenn Sie das nicht können, verschieben Sie eine der Regeln ans Ende des Stylesheet, damit sie Priorität bekommt.</p>
+
+<h3 id="Pseudo-classes_Selektoren">Pseudo-classes Selektoren</h3>
+
+<p>Eine CSS <a href="/de/docs/Web/CSS/Pseudo-classes" title="/de/docs/Web/CSS/Pseudo-classes">pseudo-class</a> ist ein Schlüsselwort, welches einem Selektor hinzugefügt wird. Damit kann ein bestimmter Zustand des selektierten Elements spezifiziert werden. {{ Cssxref(":hover") }} zum Beispiel wenden seinen Style an, wenn der Benutzer mit dem Mauszeiger über das selektierte Element fährt.</p>
+
+<p>Pseudo-classes zusammen mit pseudo-elements lassen Sie eine Style für ein Element nicht nur in Relation zum Inhalt vom Document Tree sondern auch in Relation zu externen Faktoren wie den Verlauf  der Navigation ({{ cssxref(":visited") }}, zum Beispiel), dem Zustand seines Inhalt (wie {{ cssxref(":checked") }} auf manchen form Elementen) oder der Position des Mauszeigers (wie {{ cssxref(":hover") }} das angibt, ob sich der Mauszeiger über dem Element befindet) anwenden. Eine vollständige Liste der Selektoren ist unter <a class="external" href="http://www.w3.org/TR/selectors/#selectors" rel="external nofollow" title="CSS3 Selectors working spec">CSS3 Selectors working spec</a> zu finden.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Syntax</div>
+
+<pre class="brush:css">selector:pseudo-class {
+  property: value;
+}
+</pre>
+</div>
+
+<h4 id="Liste_von_pseudo-classes">Liste von pseudo-classes</h4>
+
+<ul>
+ <li>{{ Cssxref(":link") }}</li>
+ <li>{{ Cssxref(":visited") }}</li>
+ <li>{{ Cssxref(":active") }}</li>
+ <li>{{ Cssxref(":hover") }}</li>
+ <li>{{ Cssxref(":focus") }}</li>
+ <li>{{ Cssxref(":first-child") }}</li>
+ <li>{{ Cssxref(":nth-child") }}</li>
+ <li>{{ Cssxref(":nth-last-child") }}</li>
+ <li>{{ Cssxref(":nth-of-type") }}</li>
+ <li>{{ Cssxref(":first-of-type") }}</li>
+ <li>{{ Cssxref(":last-of-type") }}</li>
+ <li>{{ Cssxref(":empty") }}</li>
+ <li>{{ Cssxref(":target") }}</li>
+ <li>{{ Cssxref(":checked") }}</li>
+ <li>{{ Cssxref(":enabled") }}</li>
+ <li>{{ Cssxref(":disabled") }}</li>
+</ul>
+
+<h2 id="Information_Selektoren_basieren_auf_Beziehungen">Information: Selektoren basieren auf Beziehungen</h2>
+
+<p>CSS hat einige Wege um Elemente basieren auf ihrer Bezieung zu anderen Eementen zu selektieren. Damit können Selektoren spezifischer gemacht werden.</p>
+
+<table id="relselectors">
+ <caption>Gängige Selektoren basierend auf Beziehungen</caption>
+ <tbody>
+  <tr>
+   <td style="width: 10em;"><strong>Selektor</strong></td>
+   <td><strong>Selektiert</strong></td>
+  </tr>
+  <tr>
+   <td><code>A E</code></td>
+   <td>Jedes E Element, das ein <em>Nachfolger</em> eines A Elements ist (das heißt: ein Kind oder ein Kind eines Kindes, <em>etc</em>.)</td>
+  </tr>
+  <tr>
+   <td><code>A &gt; E</code></td>
+   <td>Jedes E Element, das ein Kind eines A Elements ist</td>
+  </tr>
+  <tr>
+   <td><code>E:first-child</code></td>
+   <td>Jedes E Element, das das erste Kind seines Parent ist</td>
+  </tr>
+  <tr>
+   <td><code>B + E</code></td>
+   <td>Jedes E Element, das das nächste S<em>ibling</em> eines B Elements ist (das heißt: das nächste Kind von demselben Parent)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Über eine Kombination der selektoren können komplexe Beziehungen ausgedrückt werden.</p>
+
+<p>Sie können auch das Symbol <code>*</code> (asterisk) verwenden, welches "jedes Element" bedeutet.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Beispiel</div>
+
+<p>Eine HTML Tabelle hat ein <code>id</code> Attribute aber die Zeilen und Zellen haben keinen eigenen Identifier:</p>
+
+<pre class="brush: html">&lt;table id="data-table-1"&gt;
+...
+&lt;tr&gt;
+&lt;td&gt;Prefix&lt;/td&gt;
+&lt;td&gt;0001&lt;/td&gt;
+&lt;td&gt;default&lt;/td&gt;
+&lt;/tr&gt;
+...
+</pre>
+
+<p>Diese Regeln machen die erste Zelle jeder Zeile fettgedruckt und die zweite Zelle jeweils monospaced. Sie betreffen nur eine bestimmte Tabelle im Dokument:</p>
+
+<pre class="brush:css">#data-table-1 td:first-child {
+  font-weight: bolder;
+}
+
+#data-table-1 td:first-child + td {
+  font-family: monospace;
+}
+</pre>
+
+<p>Das Ergebnis sieht so aus:</p>
+
+<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
+ <tbody>
+  <tr>
+   <td>
+    <table style="margin-right: 2em; width: 18em;">
+     <tbody>
+      <tr>
+       <td><strong>Prefix</strong></td>
+       <td><code>0001</code></td>
+       <td>default</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">Mehr Details</div>
+
+<p>Wenn Sie einen Selektor spezifischer machen, erhöhen Sie normalerweise seine Priorität.</p>
+
+<p>Wenn Sie diese Technik anwenden, können Sie es vermeiden vielen Tags in ihrem Dokument ein <code>class</code> oder ein <code>id</code> Attribut zu geben. Stattdessen erledigt CSS die Arbeit.</p>
+
+<p>In umfassenden Designs, bei denen Geschwindigkeit wichtig ist, können Sie ihre Stylesheets effizienter machen, indem Sie komplexe Regeln mit Beziehungen zu anderen Elementen vermeiden.</p>
+
+<p>Mehr Beispiele zu <a href="/de/docs/Web/Guide/CSS/Getting_Started/Tables" title="/de/docs/Web/Guide/CSS/Getting_Started/Tables">Tabellen</a> finden Sie auf der CSS Referenzseite.</p>
+</div>
+
+<h2 id="Aktion_class_und_ID_Selektoren_verwenden">Aktion: class und ID Selektoren verwenden</h2>
+
+<ol>
+ <li>Bearbeiten Sie Ihre HTML Datei und duplizieren Sie den Absatz mit copy and paste.</li>
+ <li>Danach setzen Sie ein <strong>id</strong> und <strong>class</strong> Attribut auf den ersten Absatz und ein <strong>id</strong> Attribut auf dem zweiten wie unten dargestellt. Alternativ können Sie die gesamte Datei kopieren und einfügen:
+  <pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+  &lt;meta charset="UTF-8"&gt;
+  &lt;title&gt;Sample document&lt;/title&gt;
+  &lt;link rel="stylesheet" href="style1.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p id="first"&gt;
+      &lt;strong class="carrot"&gt;C&lt;/strong&gt;ascading
+      &lt;strong class="spinach"&gt;S&lt;/strong&gt;tyle
+      &lt;strong class="spinach"&gt;S&lt;/strong&gt;heets
+    &lt;/p&gt;
+    &lt;p id="second"&gt;
+      &lt;strong&gt;C&lt;/strong&gt;ascading
+      &lt;strong&gt;S&lt;/strong&gt;tyle
+      &lt;strong&gt;S&lt;/strong&gt;heets
+    &lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+ </li>
+ <li>Bearbeiten Sie jetzt Ihre CSS Datei. Ersetzen Sie den gesamten Inhalt mit:
+  <pre class="brush:css">strong {
+  color: red;
+}
+
+.carrot {
+  color: orange;
+}
+
+.spinach {
+  color: green;
+}
+
+#first {
+  font-style: italic;
+}
+</pre>
+ </li>
+ <li>Speichern Sie die Dateien und aktualisieren Sie den Webbrowser, um das Ergebnis zu sehen:
+  <table style="border: 2px outset #3366bb; padding: 1em;">
+   <tbody>
+    <tr>
+     <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+    </tr>
+    <tr>
+     <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+    </tr>
+   </tbody>
+  </table>
+
+  <p>Sie können die Zeilen in Ihrer CSS Datei neu anordnen, um zu sehen, dass die Reihenfolge keine Auswirkungen hat.</p>
+
+  <p>Die class Selektoren <code>.carrot</code> und <code>.spinach</code> haben Priorität gegenüber dem tag Selektor <code>strong</code>.</p>
+
+  <p>Der ID Selektor <code>#first</code> hat Priorität gegenüber den class und den tag Selektoren.</p>
+ </li>
+</ol>
+
+<div class="tuto_example">
+<div class="tuto_type">Herausforderungen</div>
+
+<ol>
+ <li>Ohne die HTML Datei zu verändern, fügen sie eine einzige Regel in Ihrer CSS Datei hinzu, die die Farbe aller Anfangsbuchstaben wie jetzt beibehält aber alle anderen Buchstaben im zweiten Absatz blau macht:
+  <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
+   <tbody>
+    <tr>
+     <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+    </tr>
+    <tr>
+     <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li>Ändern sie jetzt die neue Regel (ohne etwas anderes zu ändern), um den ersten Absatz auch blau zu machen:
+  <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
+   <tbody>
+    <tr>
+     <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+    </tr>
+    <tr>
+     <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+</ol>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Mögliche Lösung</div>
+
+<ol>
+ <li>Fügen Sie eine Regel mit dem ID Selektor <code>#second</code> und einer Deklaration <code>color: blue;</code> wie unten dargestellt hinzu:
+
+  <pre class="brush: css">#second {
+  color: blue;
+}
+</pre>
+  Ein noch spezifischerer Selektor <code>p#second</code> funktioniert auch.</li>
+ <li>Ändern Sie den Selektor der neuen Regel auf <code>p</code>, damit er ein Tag-Selektor ist:
+  <pre class="brush: css">p {
+  color: blue;
+}
+</pre>
+ </li>
+</ol>
+<a class="hideAnswer" href="#challenge">Lösung ausblenden</a></div>
+<a href="#tutochallenge" title="Eine mögliche Lösung für die Herausforderung darstellen">Sehen Sie sich die Lösung an.</a></div>
+
+<h2 id="Aktion_pseudo-classes_Selektoren_verwenden">Aktion: pseudo-classes Selektoren verwenden</h2>
+
+<ol>
+ <li>Erstellen Sie eine HTML Datei wie folgt:
+  <pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+  &lt;meta charset="UTF-8"&gt;
+  &lt;title&gt;Sample document&lt;/title&gt;
+  &lt;link rel="stylesheet" href="style1.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;Go to our &lt;a class="homepage" href="http://www.example.com/" title="Home page"&gt;Home page&lt;/a&gt;.&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+ </li>
+ <li>Bearbeiten Sie jetzt Ihre CSS Datei. Ersetzen Sie den gesamten Inhalt mit:
+  <pre class="brush: css">a.homepage:link, a.homepage:visited {
+  padding: 1px 10px 1px 10px;
+  color: #fff;
+  background: #555;
+  border-radius: 3px;
+  border: 1px outset rgba(50,50,50,.5);
+  font-family: georgia, serif;
+  font-size: 14px;
+  font-style: italic;
+  text-decoration: none;
+}
+
+a.homepage:hover, a.homepage:focus, a.homepage:active {
+  background-color: #666;
+}
+</pre>
+ </li>
+ <li>Speichern Sie die Dateien und aktualisieren Sie den Webbrowser, um das Ergebnis zu sehen (fahren sie mit dem Mauszeiger über den folgenden Link, um den Effekt zu sehen):
+  <table style="border: 2px outset #3366bb; padding: 1em;">
+   <tbody>
+    <tr>
+     <td>Go to our <a class="tutospecial" href="#" title="Home page">Home page</a><span style="display: none;"> </span><span style="display: none;"> </span></td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+</ol>
+
+<h2 id="Aktion_Selektoren_basierend_auf_Beziehungen_und_pseudo-classes_verwenden">Aktion: Selektoren basierend auf Beziehungen und pseudo-classes verwenden</h2>
+
+<p>Mit Selektoren basierung auf Beziehungen und pseudo-classes können Sie komplexe Algorithmen mit Kaskadierung erstellen. Das ist eine gängige Technik, um zum Beispiel <strong>reine CSS Dropdown Menüs</strong> zu erstellen (die nur aus CSS ohne <a href="/de/docs/Web/JavaScript" title="de/docs/Web/JavaScript">JavaScript</a> bestehen). Die Essenz dieser Technik ist die Erstellung einer Regel wie die folgende:</p>
+
+<pre class="brush: css">div.menu-bar ul ul {
+  display: none;
+}
+
+div.menu-bar li:hover &gt; ul {
+  display: block;
+}</pre>
+
+<p>Angewendet auf eine HTML Struktur wie die folgende:</p>
+
+<pre class="brush: html">&lt;div class="menu-bar"&gt;
+  &lt;ul&gt;
+    &lt;li&gt;
+      &lt;a href="example.html"&gt;Menu&lt;/a&gt;
+      &lt;ul&gt;
+        &lt;li&gt;
+          &lt;a href="example.html"&gt;Link&lt;/a&gt;
+        &lt;/li&gt;
+        &lt;li&gt;
+          &lt;a class="menu-nav" href="example.html"&gt;Submenu&lt;/a&gt;
+          &lt;ul&gt;
+            &lt;li&gt;
+              &lt;a class="menu-nav" href="example.html"&gt;Submenu&lt;/a&gt;
+              &lt;ul&gt;
+                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
+              &lt;/ul&gt;
+            &lt;/li&gt;
+            &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
+          &lt;/ul&gt;
+        &lt;/li&gt;
+      &lt;/ul&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Sehen sie in das komplette <a class="internal" href="https://mdn.mozillademos.org/files/3700/css_dropdown_menu.html" title="css_dropdown_menu.html">CSS-basierte Dropdown Menü Beispiel</a> für mögliche Hinweise.</p>
+
+<h2 id="Was_kommt_als_Nächstes">Was kommt als Nächstes?</h2>
+
+<p>Ihr Beispiel-Stylesheet sieht langsam kompakt und kompliziert aus. Der nächste Anschnit beschreibt die Wege, um <a href="/de/docs/Web/Guide/CSS/Getting_Started/Lesbares_CSS" title="/de/docs/Web/Guide/CSS/Getting_Started/Lesbares_CSS">CSS leichter lesbar</a> zu machen.{{nextPage("/de/docs/Web/Guide/CSS/Getting_Started/Lesbares_CSS", "Lesbares CSS")}}</p>
diff --git a/files/de/web/guide/css/getting_started/textstyles/index.html b/files/de/web/guide/css/getting_started/textstyles/index.html
new file mode 100644
index 0000000000..d03bea91e6
--- /dev/null
+++ b/files/de/web/guide/css/getting_started/textstyles/index.html
@@ -0,0 +1,151 @@
+---
+title: Textstyles
+slug: Web/Guide/CSS/Getting_started/Textstyles
+translation_of: Learn/CSS/Styling_text/Fundamentals
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{previousPage("/de/docs/Web/Guide/CSS/Getting_Started/Lesbares_CSS", "Lesbares CSS")}}<span class="seoSummary">Das ist der siebte Teil des <a href="/de/docs/Web/Guide/CSS/Getting_Started" title="/de/docs/Web/Guide/CSS/Getting_Started">CSS Getting Started</a> Tutorials. Er enthält weitere Beispiele für Textstyles. Sie verändern Ihren Stylesheet, um verschiedene Schriftarten zu verwenden.</span></p>
+
+<h2 class="clearLeft" id="Information_Textstyles">Information: Textstyles</h2>
+
+<p>CSS besitzt verschiedene Eigenschaften, um Text zu gestalten.</p>
+
+<p>Es gibt zur Gemütlichkeit eine Eigenschaft {{ cssxref("font") }}, mit der sich verschiedene Aspekte auf einmal definieren lassen, wie zum Beispiel:</p>
+
+<ul>
+ <li>Fettgedruckt, kursiv und kleine Großbuchstaben</li>
+ <li>Schriftgröße</li>
+ <li>Zeilenhöhe</li>
+ <li>Schriftart</li>
+</ul>
+
+<div class="tuto_example">
+<div class="tuto_type">Beispiel</div>
+
+<pre class="brush:css">p {
+  font: italic 75%/125% "Comic Sans MS", cursive;
+}
+</pre>
+
+<p>Diese Regel setzt verschiedene Eigenschaften der Schrift und macht alle Absätze kursiv.</p>
+
+<p>Die Schriftgröße wird auf drei Viertel der Größe jedes Absatzelements gesetzt und die Zeilenhöhe wird auf 125% (ein wenig größer als normal) gesetzt.</p>
+
+<p>Die Art der Schrift wird auf auf Comic Sans MS gesetzt. Wenn aber die Schriftart im Webbrowser nicht verfügbar ist, wird die standardmäßig kursiv (handgeschriebene) Art verwendet.</p>
+
+<p>Diese Regel hat den Nebeneffekt, dass alle dicken und kleinen Anfangsbuchstaben auf <code>normal</code> zurückgesetzt werden.</p>
+</div>
+
+<h3 id="Schriftarten">Schriftarten</h3>
+
+<p>Sie können nicht vorhersagen welche Schriftarten der Leser Ihres Dokument installiert hat. Deshalb ist es eine gute Idee eine Liste von Alternativen in bevorzugter Reihenfolge anzugeben.</p>
+
+<p>Beenden Sie die Liste mit einer eingebauten Standardschriftart: <code>serif</code>, <code>sans-serif</code>, <code>cursive</code>, <code>fantasy</code> oder <code>monospace</code>.</p>
+
+<p>Wenn die Schriftart ein Feature des Dokuments nicht unterstützt, kann der Webbrowser eine andere Schriftart dafür auswählen. Das Dokument könnte zum Beispiel spezielle Zeichen enthalten, die von der Schriftart nicht unterstützt werden. Wenn der Webbrowser eine andere Schriftart finden kann, die diese Zeichen unterstützt, verwendet er diese.</p>
+
+<p>Um nur Schriftart anzugeben, können Sie die {{ cssxref("font-family") }} Eigenschaft verwenden.</p>
+
+<h3 id="Schriftgrößen">Schriftgrößen</h3>
+
+<p>Benutzer des Webbrowsers können die standardmäßige Schriftgröße überschreiben oder die Textgröße während dem Lesen ändern. Deshalb macht es überall wo es geht Sinn eine relative Größe zu verwenden.</p>
+
+<p>Sie können die bereits vordefinierten Werte wie <code>small</code>, <code>medium</code> und <code>large</code> verwenden. Sie können aber auch relative Werte zur Schriftgröße des Elternelements wie <code>smaller</code>, <code>larger</code>, <code>150%</code> oder <code>1.5em</code> verwenden. Ein "em" ist äquivalent zu der Breite des Buchstabens "m" (für die Schriftgröße des Elternelements). Damit sind <code>1.5em</code> eineinhalb Mal so groß als die Schrift im Elternelement.</p>
+
+<p>Wenn nötig können Sie eine genaue Größe wie <code>14px</code> (14 Pixel) für einen Bildschirm oder <code>14pt</code> (14 Punkt) für einen Drucker angeben. Das ist aber für Benutzer mit einer Sehbehinderung nicht zugänglich, da sie damit die Schriftgröße nicht mehr ändern können. Eine zugänglichere Strategie wäre, eine bereits vordefinierten Wert wie medium auf dem höchsten Element im Dokument zu setzen und dann relative Größen auf allen Kindelementen zu verwenden.</p>
+
+<p>Um nur die Schriftgröße anzugeben, können Sie die {{ cssxref("font-size") }} Eigenschaft verwenden.</p>
+
+<h3 id="Zeilenhöhe">Zeilenhöhe</h3>
+
+<p>Die Zeilenhöhe gibt den Abstand zwischen Zeilen an. Wenn Ihr Dokument lange Absätze über viele Zeilen hat, kann ein größerer Zeilenabstand als normal besonders bei einer kleinen Schriftgröße einfacher zum Lesen zu sein.</p>
+
+<p>Um nur die Zeilenhöhe anzugeben, können Sie die {{ cssxref("line-height") }} Eigenschaft verwenden.</p>
+
+<h3 id="Textdekoration">Textdekoration</h3>
+
+<p>Die separate {{ cssxref("text-decoration") }} Eigenschaft kann andere Styles wie <code>underline</code> oder <code>line-through</code> definieren. Sie können sie auf <code>none</code> setzen, um explizit jede Textdekoration zu entfernen.</p>
+
+<h3 id="Andere_Eigenschaften">Andere Eigenschaften</h3>
+
+<p>Um nur kursiv anzugeben, verwenden Sie  {{ cssxref("font-style") }}<code>: italic;</code><br>
+ Um nur fettgedruckt anzugeben, verwenden Sie <code>{{ cssxref("font-weight") }}: bold;</code><br>
+ Um nur kleine Großbuchstaben anzugeben, verwenden Sie  <code>{{ cssxref("font-variant") }}: small-caps;</code></p>
+
+<p>Um eine Eigenschaft einzeln abzuschalten, können Sie den Wert <code>normal</code> oder <code>inherit</code> angeben.</p>
+
+<div class="tuto_details">
+<div class="tuto_type">Mehr Details</div>
+
+<p>Sie können Textstyles auf viele andere Wege angeben.</p>
+
+<p>Einige der hier erwähnten Eigenschaften haben zum Beispiel andere Werte, die Sie auch verwenden können.</p>
+
+<p>Vermeiden Sie in einem komplexen Stylesheet die abgekürzte <code>font</code> Eigenschaft, da sie Nebeneffekte hat (setzt andere individuelle Eigenschaften zurück).</p>
+
+<p>Für alle Details von Eigenschaften, die mit Schriften zu tun haben, gehen Sie bitte auf <a class="external" href="http://www.w3.org/TR/CSS21/fonts.html">Fonts</a> in der CSS Spezifikation. Die kompletten Details zur Textdekoration finden Sie unter <a class="external" href="http://www.w3.org/TR/CSS21/text.html">Text</a>.</p>
+
+<p>Wenn Sie nicht von den installierten Schriftarten auf dem System des Benutzers abhängig sein wollen, können Sie {{ cssxref("@font-face") }} verwenden, um einen Online Font anzugeben. Dazu muss der Webbrowser des Benutzers diese Regel aber auch unterstützen.</p>
+</div>
+
+<h2 id="Aktion_Schriftart_angeben">Aktion: Schriftart angeben</h2>
+
+<p>Für ein einfaches Dokument können sie eine Schrift auf dem {{ HTMLElement("body") }} Element angeben und der Rest des Dokuments erbt diese Regel.</p>
+
+<ol>
+ <li>Bearbeiten Sie Ihre CSS Datei.</li>
+ <li>Fügen sie die folgendene Regel hinzu, um die Schrift im gesamten Dokument zu bestimmen. Der Anfang der CSS Datei ist eine logische Stelle dafür, aber es hat auch an anderen Stellen in der Datei denselben Effekt:
+  <pre class="eval">body {
+  font: 16px "Comic Sans MS", cursive;
+}
+</pre>
+ </li>
+ <li>Kommentieren sie Regel und fügen Sie nach Ihrem Geschmak Zeilenumbrüche und Leerzeichen hinzu.</li>
+ <li>Speichern Sie die Datei und aktualisieren Sie Ihren Webbrowser um die Änderung zu sehen. Wenn Sie die Schrift Comic Sans MS oder eine andere Schrift, welche kursiv nicht unterstützt, auf Ihren Computer haben, wählt Ihr Webbrowser eine andere Schriftart für den kursiven Text in der ersten Zeile aus:
+  <table style="border: 2px outset #36b; padding: 1em;">
+   <tbody>
+    <tr>
+     <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+    </tr>
+    <tr>
+     <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li>Wählen Sie <strong>Ansicht &gt; Schirftgröße &gt; Vergrößern</strong> (oder <strong>Ansicht &gt; Zoom &gt; Vergrößern</strong>) im Menü Ihres Webbrowsers aus. Obwohl Sie 16 Pixel im Sil angegeben haben, kann der Benutzer die Schriftgröße in der Ansicht ändern.</li>
+</ol>
+
+<div class="tuto_example">
+<div class="tuto_type">Herausforderung</div>
+
+<p>Machen Sie alle sechs Anfangsbuchstaben zweimal so groß in der serif Standardschrift vom Webbrowser ohne etwas anderes zu verändern:</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: green; font: 200% serif;">S</strong>tyle <strong style="color: green; font: 200% serif;">S</strong>heets</td>
+  </tr>
+  <tr>
+   <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: red; font: 200% serif;">S</strong>tyle <strong style="color: red; font: 200% serif;">S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Mögliche Lösung</div>
+
+<p>Fügen Sie die folgende Style Deklaration zur <code>strong</code> Regel hinzu:</p>
+
+<pre class="brush: css">  font: 200% serif;
+</pre>
+Wenn Sie getrennte Deklarationen für <code>font-size</code> und <code>font-family</code> verwenden, dann wird die <code>font-style</code> Einstellung auf dem ersten Absatz <em>nicht</em> überschrieben.
+
+<p> </p>
+<a class="hideAnswer" href="#challenge">Hide solution</a></div>
+<a href="#tutochallenge" title="Eine mögliche Lösung für die Herausforderung darstellen">Sehen Sie sich die Lösung an.</a></div>
+
+<h2 id="Was_kommt_als_Nächstes">Was kommt als Nächstes?</h2>
+
+<p>{{nextPage("/de/docs/Web/Guide/CSS/Getting_started/Farbe", "Farbe")}}Ihr Beispieldokument verwendet bereits verschiedene benannte Farben. Der <a href="/de/docs/Web/Guide/CSS/Getting_Started/Farbe" title="/de/docs/Web/Guide/CSS/Getting_Started/Farbe">nächste Teil</a> listet die Namen der Standardfarben auf und erklärt wie Sie eigene Farben definieren können<strong>.</strong></p>
diff --git a/files/de/web/guide/css/getting_started/was_ist_css/index.html b/files/de/web/guide/css/getting_started/was_ist_css/index.html
new file mode 100644
index 0000000000..47b52a99be
--- /dev/null
+++ b/files/de/web/guide/css/getting_started/was_ist_css/index.html
@@ -0,0 +1,112 @@
+---
+title: Was ist CSS
+slug: Web/Guide/CSS/Getting_started/Was_ist_CSS
+translation_of: Learn/CSS/First_steps/How_CSS_works
+---
+<div>{{CSSTutorialTOC}}</div>
+
+<p>{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started", "Einführung")}} <span class="seoSummary">Das erste Kapitel von <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en/CSS/Getting Started">CSS für Einsteiger</a> erklärt kurz CSS. Sie werden in den nächsten Kapiteln ein simples Dokument zum Üben erstellen.</span></p>
+
+<h2 class="clearLeft" id="Was_ist_CSS">Was ist CSS</h2>
+
+<p>Cascading Style Sheets (<dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn> für "gestufte Gestaltungsbögen") ist eine Sprache, die definiert wie Dokumente dem Benutzer präsentiert werden.</p>
+
+<p>Ein <em>Dokument</em> ist eine Ansammlung von Informationen (Texte, Bilder, …), die mit einer <em>Auszeichnungssprache</em> <em>(Markup Language)</em> strukturiert werden. In der Auszeichnungssprache wird angegeben, dass ein Text beispielsweise als Überschrift oder als Link dargestellt werden soll. Es wird jedoch NICHT angegeben, WIE eine Überschrift oder ein Link dargestellt werden sollen. Das genau macht CSS.</p>
+
+<p>Ein solches Dokument einem Benutzer zu <em>präsentieren</em> bedeutet, es in einer lesbaren Form darzustellen. Browser wie Firefox, Chrome oder Internet Explorer sind dafür entworfen, Dokumente visuell zu präsentieren. Beispielsweise auf einem Computer Monitor, Beamer oder Drucker.</p>
+
+<div class="tuto_example">
+<p><strong>Beispiele</strong></p>
+
+<ul>
+ <li>Eine Webseite, wie diese hier, ist ein Dokument.<br>
+  Die Information, die Sie auf einer Webseite sehen können, ist normalerweise mit der Auszeichnungssprache HTML (HyperText Markup Language) geschrieben.</li>
+ <li>Auch Dialoge in einer Anwendung - auch Dialogfenster genannt - sind oft Dokumente. Solche Dialoge können auch mit einer Auszeichnugssprache, wie XUL (XML User Interface Language für XML Benutzeroberflächensprache), strukturiert sein. XML oder XUL sind also Beispiele für andere Auszeichungssprachen.</li>
+</ul>
+</div>
+
+<p>In dieser Anleitung gibt es Boxen mit der Beschriftung <strong>Weitere Details</strong>, wie sie unten zu sehen ist. Solche Boxen stellen weiterführende Informationen und Links zu einem Thema bereit. Lesen Sie sie, folgen Sie den Links oder überspringen Sie diese Boxen und lesen Sie sie später.</p>
+
+<div class="tuto_details">
+<div class="tuto_type">Weitere Details</div>
+
+<p>Ein Dokument ist nicht dasselbe wie eine Datei. Sie können aber selbstverständlich ein Dokument als Datei abspeichern.</p>
+
+<p><span style="line-height: 1.5;">Das Dokument, das Sie gerade lesen, ist nicht als Datei gespeichert. Wenn Ihr Browser diese Seite anfragt, durchsucht der Server eine Datenbank und generiert dieses Dokument indem er Teile daraus aus mehreren, verschiedenen Dateien zusammensetzt.</span></p>
+
+<p><span style="line-height: 1.5;">Sie werden dennoch in diesem Tutorial mit Dokumenten arbeiten, die in Dateien gespeichert sind.</span></p>
+
+<p>Weiterführende Infromationen über Dokumente und Auszeichnungssprachen finden Sie hier:</p>
+
+<table style="background-color: inherit; margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a></td>
+   <td>für Webseiten</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/XML" title="/en-US/docs/XML">XML</a></td>
+   <td>allgemein für strukturierte Dokumente</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/SVG" title="/en-US/docs/Web/SVG">SVG</a></td>
+   <td>für Grafiken</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a></td>
+   <td>für Userinterfaces in Mozilla</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Im Teil II dieses Tutorials werden Sie Beispiele für diese Auszeichnungssprachen sehen.</p>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">Weitere Details</div>
+
+<p>In korrekter CSS-Terminologie wird das Programm, das ein Dokument darstellt <em>user agent (UA)</em> genannt. Ein Browser ist nur eine Art eines UA. CSS ist nicht nur für Browser oder Präsentationen interessant, aber im Teil I dieses Tutorials werden Sie nur mit CSS in einem Browser arbeiten.</p>
+
+<p>Für korrekte Definitionen der CSS-Terminologie sehen Sie unter <a class="external" href="http://www.w3.org/TR/CSS21/conform.html#q1">Definitions</a> in der CSS Spezifikation des World Wide Web Consortium (W3C) nach. Das ist eine internationale Gemeinschaft, die offene Standards für das Web definiert.</p>
+</div>
+
+<h2 id="Action_Ein_Dokument_erstellen">Action: Ein Dokument erstellen</h2>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+  &lt;meta charset="UTF-8"&gt;
+  &lt;title&gt;Sample document&lt;/title&gt;
+  &lt;/head&gt;
+
+  &lt;body&gt;
+    &lt;p&gt;
+      &lt;strong&gt;C&lt;/strong&gt;ascading
+      &lt;strong&gt;S&lt;/strong&gt;tyle
+      &lt;strong&gt;S&lt;/strong&gt;heets
+    &lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>{{ LiveSampleLink('Action_Ein_Dokument_erstellen', 'Schauen Sie sich die Demo an') }}</p>
+
+<ol>
+ <li>Erstellen Sie einen neuen Ordner irgendwo auf Ihrem Computer, um die Übungen für dieses Tutorial abzuspeichern.</li>
+ <li>Öffnen Sie einen Texteditor und erstellen Sie eine neue Textdatei. Diese Datei wird das Dokument für die nächsten Übungen enthalten.</li>
+ <li>Kopieren Sie den folgenden HTML-Code in Ihre Datei, und speichern Sie diese unter dem Namen <code>doc1.html</code></li>
+ <li>Öffnen Sie in Ihrem Browser ein neues Fenster oder einen neuen Tab und dann öffnen Sie darin die Datei, die Sie gerade gespeichert haben. Sie sollten dann folgenden Text mit fetten Anfangsbuchstaben sehen:</li>
+</ol>
+
+<table style="border: 2px outset #3366bb; padding: 1em;">
+ <tbody>
+  <tr>
+   <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Möglicherweise sieht der Text in Ihrem Browser etwas anders aus als hier dargestellt. Das liegt daran, dass manche der Einstellungen in Ihrem Browser anders sein können, als wir sie hier verwendet haben. Das tut aber vorerst nichts zur Sache.</p>
+
+<h2 id="Was_nun">Was nun?</h2>
+
+<p>{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Wofür CSS?")}}Ihr Dokument verwendet vorerst noch kein CSS. Im <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS">nächsten Abschnitt</a> werden Sie CSS verwenden um die Darstellung Ihres Dokumentes zu verändern.</p>
diff --git a/files/de/web/guide/css/getting_started/why_use_css/index.html b/files/de/web/guide/css/getting_started/why_use_css/index.html
new file mode 100644
index 0000000000..f0b8dc7a7e
--- /dev/null
+++ b/files/de/web/guide/css/getting_started/why_use_css/index.html
@@ -0,0 +1,105 @@
+---
+title: Why use CSS?
+slug: Web/Guide/CSS/Getting_started/Why_use_CSS
+translation_of: Learn/CSS/First_steps/How_CSS_works
+---
+<p><span style="line-height: 1.5;">{{ CSSTutorialTOC() }}</span></p>
+
+<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/What_is_CSS", "What is CSS?") }}Dieser zweite Teil des <span class="seoSummary"> <a href="/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">CSS Getting Started</a> Tutorials erklärt die Beziehung zwischen CSS and Dokumenten. Im Beispiel werden Sie lernen, wie Sie ein CSS-Stylesheet Ihrem Dokument hinzufügen.</span></p>
+
+<h2 class="clearLeft" id="Warum_CSS">Warum CSS ?</h2>
+
+<p>Mithilfe von CSS definieren Sie Styles für Ihr Dokument. Das beinhaltet das Design, Layout und Varianten der Darstellung für verschiedene Geräte und Bildschirmgrößen. Sie können Ihr CSS direkt in den &lt;Kopfbereich&gt; (head) Ihres Dokumentes einbetten (<em>eingebettetes Stylesheet</em>) oder eine separate CSS-Datei mit Ihrem Dokument verknüpfen (<em>externes Stylesheet</em>). Dazu müssen Sie einfach einen Link auf Ihr Stylesheet in den &lt;Kopfbereich&gt; Ihres Dokumentes einbauen.</p>
+
+<p><span style="line-height: 16.7999992370605px;">Die Trennung von Inhalt und Form mithilfe eines</span> externen Stylesheets hat viele Vorteile:</p>
+
+<ul>
+ <li>Sie müssen nicht alles doppelt und mehrfach tun</li>
+ <li>Die Wartung wird vereinfacht</li>
+ <li>Ein ganzer Webauftritt kann an einer zentralen Stelle umgestaltet werden.</li>
+</ul>
+
+<div class="tuto_example">
+<div class="tuto_type">Beispiel</div>
+
+<p>Mit CSS speichern Sie die Darstellungsinformationen in einer gemeinsamen Datei, die alle Seiten verwenden, die damit verknüpft sind. So können Sie beispielsweise die Farbe oder den Stil einer Überschrift für alle Ihre Webseiten ändern, die auf das selbe CSS-Stylesheet verlinken, indem Sie einfach einige wenige CSS-Attribute in diesem Stylesheet ändern.</p>
+
+<p>Wenn ein User eine Webseite betrachten will, lädt der Browser die Styleinformationen gemeinsam mit dem Inhalt der Seite.</p>
+
+<p>Wenn ein User eine Webseite drucken will, können Sie ihm unterschiedliche Stilinformationen für den Druck anbiete, sodass die ausgedruckte Seite schön gestaltet ist.</p>
+</div>
+
+<p>Wie arbeiten nun HTML und CSS zusammen? Generell kann man sagen: Verwenden Sie HTML um den Inhalt (content) Ihres Dokumentes zu beschreiben und CSS um die Form, den Darstellungsstil Ihrer Seite zu beschreiben und nicht ihren Inhalt. Etwas später werden Sie in diesem Tutorial auch Ausnahmen von dieser Regel kennenlernen.</p>
+
+<div class="tuto_details">
+<div class="tuto_type">Weitere Details</div>
+
+<p>Auch eine Auszeichnungssprache wie HTML stellt Methoden zur Verfügung um einen Darstellungsstil zu definieren.</p>
+
+<p>Beispielsweise können Sie in HTML einen &lt;b&gt;Tag verwenden um Text <strong>fett</strong> darzustellen, oder Sie können die Hintergrundfarbe eines Dokumentes mithilfe des &lt;body&gt;Tags festlegen.</p>
+
+<p>Wenn Sie CSS verwenden vermeiden Sie üblicherweise diese Möglichkeiten der Auszeichnungssprache damit alle Styleinformationen Ihrers Dokumentes an einer Stelle beisammen bleiben.</p>
+</div>
+
+<h2 id="Action_Ein_CSS-Stylesheet_anlegen">Action: Ein CSS-Stylesheet anlegen</h2>
+
+<ol>
+ <li>Erstellen Sie ein eneue Textdatei im selben Verzeichnis wo sie schon Ihr Dokument doc1.html abgelegt haben.</li>
+ <li>Speichern Sie Ihre datei als: <code>style1.css</code>. Das wird nun Ihr Stylesheet.</li>
+ <li>Kopieren Sie nachfolgende Zeile in Ihr neu erstelltes Stylesheet und speichern dieses.
+  <pre class="brush: css">strong {color: red;}
+</pre>
+ </li>
+</ol>
+
+<h3 id="Verknüpfung_von_Dokument_und_Stylesheet">Verknüpfung von Dokument und Stylesheet</h3>
+
+<ol>
+ <li>Um nun die beiden Dateien miteinander zu verknüpfen, bearbeiten Sie Ihre HTML Datei.  Fürgen Sie die unten hervorgehobene Zeile hinzu:
+  <pre class="brush: html; highlight:[6];">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+  &lt;meta charset="UTF-8"&gt;
+  &lt;title&gt;Sample document&lt;/title&gt;
+  &lt;link rel="stylesheet" href="style1.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;
+      &lt;strong&gt;C&lt;/strong&gt;ascading
+      &lt;strong&gt;S&lt;/strong&gt;tyle
+      &lt;strong&gt;S&lt;/strong&gt;heets
+    &lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+ </li>
+ <li>Speichern Sie die HTML Datei und aktualisieren Sie Ihre Browserdarstellung (reload). Das Stylesheet hat die Initialien rot gefärbt:
+  <table style="border: 2px outset #3366bb; padding: 1em;">
+   <tbody>
+    <tr>
+     <td><span style="color: red;"><strong>C</strong></span>ascading <span style="color: red;"><strong>S</strong></span>tyle <span style="color: red;"><strong>S</strong></span>heets</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+</ol>
+
+<p>{{ LiveSampleLink('Action.3A_Creating_a_stylesheet', 'View above Demo') }}</p>
+
+<div class="tuto_example" id="challenge">
+<div class="tuto_type">Challenge</div>
+
+<p>Außer rot (red) erlaubt CSS noch andere Farbnamen.</p>
+
+<p>Versuchen Sie fünf weitere Farbnamen herauszufinen ohne in einem Referenzdokument nachzusehen.</p>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Possible solution</div>
+
+<p>CSS supports common color names like <code>orange</code>, <code>yellow</code>, <code>blue</code>, <code>green</code>, or <code>black</code>. It also supports some more exotic color names like <code>chartreuse</code>, <code>fuschia</code>, or <code>burlywood</code>. See <a href="/en-US/docs/CSS/color_value" title="The CSS color data type">CSS Color value</a> for a complete list as well as other ways of specifying colors.</p>
+<a class="hideAnswer" href="#challenge">Hide solution</a></div>
+<a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div>
+
+<h2 id="Was_nun">Was nun?</h2>
+
+<p>{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works", "Wie CSS funktioniert.")}}Sie haben nun Ihr HTML-Dokument mit Ihrem separaten CSS-Stylesheet verknüpft. Als nächstes <a href="/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works" title="/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works">lernen</a> Sie, wie Ihr Browser diese beiden kombiniert um das Dokument darzustellen.</p>
diff --git a/files/de/web/guide/css/getting_started/wie_css_funktioniert/index.html b/files/de/web/guide/css/getting_started/wie_css_funktioniert/index.html
new file mode 100644
index 0000000000..64dc94541b
--- /dev/null
+++ b/files/de/web/guide/css/getting_started/wie_css_funktioniert/index.html
@@ -0,0 +1,122 @@
+---
+title: Wie CSS funktioniert
+slug: Web/Guide/CSS/Getting_started/Wie_CSS_funktioniert
+translation_of: Learn/CSS/First_steps/How_CSS_works
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Warum CSS?") }}Dieser dritte Abschnitt des<span class="seoSummary"> <a href="/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">CSS Getting Started</a> Tutorials erklärt wie CSS funktioniert, was im Browser damit passiert und welchen Zweck das Document Object Model (DOM) hat. Sie werden auch lernen Ihr Beispieldokument zu analysieren.</span></p>
+
+<h2 class="clearLeft" id="Wie_CSS_funktioniert">Wie CSS funktioniert</h2>
+
+<p>Wenn ein Browser ein Dokument darstellt, muss er den Inhalt des Dokuments mit den Stilinformationen kombinieren. Er bearbeitet das Dokument in zwei Schritten:</p>
+
+<ol>
+ <li>Der Browser kombiniert die Auszeichnungssprache (HTML) und das CSS in das <a href="/en-US/docs/DOM" title="/en-US/docs/HTML/DOM"><em>DOM</em></a> (Document Object Model). Das DOM wird aus diesen beiden als Gesamtdokument im Computerspeicher abgelegt. Es kombiniert also Inhalt und Stil.</li>
+ <li>Der Browser stellt den Inhalt des DOM dar.</li>
+</ol>
+
+<p>Eine Auszeichnungssprache verwendet <em>Elemente</em> um die Dokumentenstruktur darzustellen. Sie markieren Elemente mithilfe von <em>Tags</em>. Das sind Schlüsselworte zwischen zwei '&lt;' spitzen Klammern '&gt;'. Die meisten Elemente haben <em>paarweise Tags</em> - einen Start-Tag &lt;schluesselwort&gt; und einen End-Tag &lt;/schluesselwort&gt;, wobei das selbe Schlüsselwort verwendet wird, und das Endtag mit einem zusätzlichen '/' vor dem Schlüsselwort gekennzeichnet ist.</p>
+
+<p>Abhängig von der Auszeichnungssprache haben manche Elemente NUR ein Start-Tag. Solche Tags haben ein '/' nach dem Schlüsselwort. &lt;schluesselwort/&gt;.</p>
+
+<p>Ein Element kann auch andere Elemente innerhalb seines Start- und End-Tags enthalten. Man spricht dann auch von einem <em>Container</em>. Vergessen Sie niemals Tags innerhalb eines Containers auch wieder zu schließen!</p>
+
+<p>Ein DOM hat eine Baumstruktur. Jedes Element, Attribut und Textelement innerhalb der Auszeichnungssprache ist ein <em>Knoten</em> (node) innerhalb der Baumstruktur. Knoten sind durch Ihre Beziehung zu anderen DOM-Knoten charakterisiert. Manche Elemente sind Eltern von Kind-Knoten und Kind-Knoten haben Geschwister.</p>
+
+<p>Sie müssen das DOM verstehen, damit Sie Ihr CSS erstellen, debuggen und warten können, denn im COM kommen CSS und Dokumenteninhalt zusammen.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Beispiel</div>
+
+<p>In Ihrem Beispieldokument erzeugen der &lt;p&gt;-Tag und sein End-Tag &lt;/p&gt; einen Container:</p>
+
+<pre class="brush:html">&lt;p&gt;
+  &lt;strong&gt;C&lt;/strong&gt;ascading
+  &lt;strong&gt;S&lt;/strong&gt;tyle
+  &lt;strong&gt;S&lt;/strong&gt;heets
+&lt;/p&gt;
+</pre>
+
+<h2 id="Live_Beispiel">Live Beispiel</h2>
+
+<p><a href="http://jsfiddle.net/djaniketster/6jbpS/">http://jsfiddle.net/djaniketster/6jbpS/</a></p>
+
+<p>Im DOM, ist der entsprechende P-Knoten ein Eltern-Element. Seine Kinder sind die <small>STRONG</small>- und die nachfolgenden Knoten. Der <small>STRONG</small> Knoten sind ihrerseits wieder Eltern mit dem Text als ihre Kinder:</p>
+
+<pre><span style="color: black;">P</span>
+├─<span style="color: black;">STRONG</span>
+│ └─"<span style="color: black;">C</span>"
+├─"<span style="color: black;">ascading</span>"
+├─<span style="color: black;">STRONG</span>
+│ └─"<span style="color: black;">S</span>"
+├─"<span style="color: black;">tyle</span>"
+├─<span style="color: black;">STRONG</span>
+│ └─"<span style="color: black;">S</span>"
+└─"<span style="color: black;">heets</span>"</pre>
+</div>
+
+<h2 id="Action_Ein_DOM_analysieren">Action: Ein DOM analysieren</h2>
+
+<h3 id="Den_DOM_Inspector_verwenden">Den DOM Inspector verwenden</h3>
+
+<p>Um ein DOM zu analysieren, benötigen Sie eine spezielle Software. Dafür können Sie beispielsweise Mozilla's <a href="/en/DOM_Inspector" title="en/DOM_Inspector">DOM Inspector</a> (DOMi) Add-on verwenden. Sie brauchen sich nur das Add-on zu installieren (siehe unten).</p>
+
+<ol>
+ <li>Verwenden Sie den Mozilla Browser um Ihr HTML-Beispieldokument zu öffnen .</li>
+ <li>Wählen Sie <strong>Tools &gt; DOM Inspector</strong> aus der Menüleiste oder <strong>Tools &gt; Web Development &gt; DOM Inspector</strong>.
+  <div class="tuto_details">
+  <div class="tuto_type">Weitere Details</div>
+
+  <p>Wenn Ihr Mozilla Browser kein DOMi hat, können Sie ihn auf der <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622/" title="https://addons.mozilla.org/en-US/firefox/addon/6622/">Add-ons Seite installieren</a> und den Browser neu starten. Setzen Sie dann mit dem Tutorial fort.</p>
+
+  <p>Wenn Sie DOMi nicht installieren wollen (oder Sie einen anderen Browser verwenden), dann können Sie Web X-Ray Goggles verwenden, wie wir Ihnen weiter unten erklären werden. Oder Sie können diesen Abschnitt auch überspringen.</p>
+  </div>
+ </li>
+ <li>In DOMi, expandieren Sie die Knoten in Ihrem Dokument indem Sie auf ihre Pfeile klicken.
+  <p><strong>Anmerkung:</strong> Leerzeichen in Ihrer HTML datei können in DOMi leere Text-Knoten hervorrufen. Diese können Sie einfach ignorieren.</p>
+
+  <p>Je nachdem welche Knoten Sie expandiert haben könnte ein  Teil des Ergebnisses so aussehen:</p>
+
+  <pre>│ ▼╴<span style="color: black;">P</span>
+│ │ │ ▼╴<span style="color: black;">STRONG</span>
+│ │ └<span style="color: darkblue;">#text</span>
+│ ├╴<span style="color: darkblue;">#text</span>
+│ ►╴<span style="color: black;">STRONG</span>
+│ │</pre>
+
+  <p>Wenn Sie einen Knoten auswählen, können Sie im Panel auf der rechten Seite von DOMi Details dazu sehen. So sehen Sie dort etwa den Text eines Text-Knotens.</p>
+
+  <p>Wenn Sie ein Element auswählen, analysiert DOMi dieses Element und zeigt Ihnen zahlreiche Informationen dazu im rechten Panel. Style Informationen sind ein Teil davon.</p>
+ </li>
+</ol>
+
+<div class="tuto_example">
+<div class="tuto_type">Challenge</div>
+
+<p>Klicken Sie in DOMi auf einen <small>STRONG</small> Knoten.</p>
+
+<p>Benutzen Sie das rechte Panel von DOMi um herauszufinden wo die Farbe dieses Knotes auf rot gesetzt wird und wo die Schrift auf fett gesetzt wird.</p>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Possible solution</div>
+
+<p>In the menu above the right-hand pane, choose <strong>CSS Rules</strong>. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the <strong>font-weight</strong> property as <code>bolder</code>; your stylesheet defines the <strong>color</strong> property as <code>red</code>.</p>
+<a class="hideAnswer" href="#challenge">Hide solution</a></div>
+<a href="#tutochallenge" title="Display a possible solution for the challenge">Lösung.</a></div>
+
+<h3 id="Web_X-Ray_Goggles">Web X-Ray Goggles</h3>
+
+<p><a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">Web X-Ray Goggles </a>zeigt weniger Information an als DOM Inspektor. Dafür ist es einfacher zu installieren und auch zu verwenden.</p>
+
+<ol>
+ <li>Gehen Sie auf die Seite <a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">Web X-Ray Goggles</a>.</li>
+ <li>Ziehen Sie den Link für das Bookmarklet auf dieser Seite auf den Toolbar Ihres Browsers.</li>
+ <li>Öffnen Sie Ihr HTML Dokument.</li>
+ <li>Aktivieren Sie Web X-Ray Goggles indem Sie das Bookmarklet im Toolbar anklicken.</li>
+ <li>Bewegen Sie Ihren Mauszeiger in Ihrem Dokument um seine Elemente zu sehen.</li>
+</ol>
+
+<h2 id="Was_nun">Was nun?</h2>
+
+<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading &amp; Inheritance") }}If you took the challenge, you saw that style information from more than one place interacts to create the final style for an element. The <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance">next page</a> explains more about these interactions.</p>
diff --git a/files/de/web/guide/css/scaling_background_images/index.html b/files/de/web/guide/css/scaling_background_images/index.html
new file mode 100644
index 0000000000..e260667670
--- /dev/null
+++ b/files/de/web/guide/css/scaling_background_images/index.html
@@ -0,0 +1,111 @@
+---
+title: Hintergrundbilder skalieren
+slug: Web/Guide/CSS/Scaling_background_images
+tags:
+  - CSS Hintergrundbild
+  - Skalierung Hintergrundbild
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images
+---
+<p><span class="seoSummary">Die {{ cssxref("background-size") }} CSS Eigenschaft ermöglicht es, die Größe von Hintergrundbildern einzustellen, anstatt das voreingestellte Verhalten, das Bild auf die volle Größe zu kacheln, zu verwenden.</span>Man kann das Bild nach Wunsch nach oben oder unten skalieren.</p>
+
+<h2 id="Tiling_a_large_image" name="Tiling_a_large_image">Kacheln eines großen Bildes</h2>
+
+<p>Nehmen wir ein großes Bild, ein 2982x2808 Firefox Logo. Wir wollen (auch wenn das höchstwahrscheinlichst ein grauenhaft schlechtes Seitendesign ergibt) vier Kopien dieses Bildes in ein 300x300 Pixel Quadrat kacheln, damit es so aussieht:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8965/ss1.png"></p>
+
+<p>Das wird erreicht, indem wir folgendes CSS verwenden:</p>
+
+<pre class="brush: css;  highlight:[8]">.square {
+  width: 300px;
+  height: 300px;
+  background-image: url(firefox_logo.png);
+  border: solid 2px;
+  text-shadow: white 0px 0px 2px;
+  font-size: 16px;
+  background-size: 150px;
+}
+</pre>
+
+<p>Man braucht für  {{ cssxref("background-size") }} kein Präfix mehr zu setzen, jedoch können  Präfix-Versionen hinzugefügt werden, wenn ältere Browser angesprochen werden sollen.</p>
+
+<h2 id="Stretching_an_image" name="Stretching_an_image">Dehnen eines Bildes</h2>
+
+<p>Sowohl die horizontale als auch die vertikale Größe des Bildes kann angegeben werden, wie hier angegeben:</p>
+
+<pre class="brush:css">background-size: 300px 150px;
+</pre>
+
+<p>So sieht das Ergebnis aus:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8967/ss2.png"></p>
+
+<h2 id="Scaling_an_image_up" name="Scaling_an_image_up">Hochskalieren eines Bildes</h2>
+
+<p>Auf der anderen Seite des Spektrums kann ein Bild im Hintergrund auch hochskaliert werden. Hier wird ein 32x32 Pixel favicon auf 300x300 Pixel skaliert:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8969/ss3.png"></p>
+
+<pre class="brush: css; highlight:[5]">.square2 {
+  width: 300px;
+  height: 300px;
+  background-image: url(favicon.png);
+  background-size: 300px;
+  border: solid 2px;
+  text-shadow: white 0px 0px 2px;
+  font-size: 16px;
+}
+</pre>
+
+<p>Wie man sehen kann, ist das CSS im Grunde identisch, außer dem Namen der Bilddatei.</p>
+
+<h2 id="Special_values.3A_.22contain.22_and_.22cover.22" name="Special_values.3A_.22contain.22_and_.22cover.22">Spezielle Werte: "contain" und "cover"</h2>
+
+<p>Neben den {{cssxref("&lt;length&gt;")}} Werten, bietet die {{ cssxref("background-size") }} CSS Eigenschaft zwei spezielle Werte für Größen, <code>contain</code> und <code>cover</code>. Sehen wir uns diese an.</p>
+
+<h3 id="contain" name="contain"><code>contain</code></h3>
+
+<p>Der contain Wert spezifiziert, unabhängig von der Größe der umgebenden Box, die Skalierung des Hintergrundbildes so, dass jede Seite so breit als irgend möglich angezeigt wird ohne über die Länge der korrespondierenden Seite des Containers hinauszugehen. Versuche mit einem Browser, der skalierende Hintergründe unterstützt (wie z. B.  Firefox 3.6 oder höher), dieses Fenster in der Größe zu verändern, um das Verhalten am untenstehenden Live-Beispiel zu sehen.</p>
+
+<figure>
+<p>{{ EmbedLiveSample("contain", "100%", "220") }}</p>
+</figure>
+
+<pre class="brush:html">&lt;div class="bgSizeContain"&gt;
+  &lt;p&gt;Try resizing this window and see what happens.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush:css;highlight:[4]">.bgSizeContain {
+  height: 200px;
+  background-image: url(https://mdn.mozillademos.org/files/8971/firefox_logo.png);
+  background-size: contain;
+  border: 2px solid darkgray;
+  color: #000; text-shadow: 1px 1px 0 #fff;
+}</pre>
+
+<h3 id="cover" name="cover"><code>cover</code></h3>
+
+<p>Der cover Wert spezifizert, dass das Hintergundbild in der Größe so angezeigt wird, dass es selbst so klein als möglich ist, dabei aber auf alle Fälle in beiden Dimensionen größer oder gleich der jeweiligen korresponierenden Maße des Containers ist. </p>
+
+<figure>{{ EmbedLiveSample("cover", "100%", "220") }}</figure>
+
+<p>Das Beispiel verwendet folgendes HTML &amp; CSS:</p>
+
+<pre class="brush:html">&lt;div class="bgSizeCover"&gt;
+  &lt;p&gt;Try resizing this window and see what happens.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush:css;highlight:[4]">.bgSizeCover {
+  height: 200px;
+  background-image: url('https://mdn.mozillademos.org/files/8971/firefox_logo.png');
+  background-size: cover;
+  border: 2px solid darkgray;
+  color: #000; text-shadow: 1px 1px 0 #fff;
+</pre>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{ cssxref("background-size") }}</li>
+ <li>{{ cssxref("background") }}</li>
+</ul>
diff --git a/files/de/web/guide/dom/index.html b/files/de/web/guide/dom/index.html
new file mode 100644
index 0000000000..997730a412
--- /dev/null
+++ b/files/de/web/guide/dom/index.html
@@ -0,0 +1,21 @@
+---
+title: DOM developer guide
+slug: Web/Guide/DOM
+tags:
+  - API
+  - DOM
+  - Guide
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/API/Document_Object_Model
+---
+<p>{{draft}}</p>
+<p>The <a href="/docs/DOM">Document Object Model</a> is an API for <a href="/en-US/docs/HTML">HTML</a> and <a href="/en-US/docs/XML">XML</a> documents. It provides a structural representation of the document, enabling the developer to modify its content and visual presentation. Essentially, it connects web pages to scripts or programming languages.</p>
+<p>All of the properties, methods, and events available to the web developer for manipulating and creating web pages are organized into <a href="/en-US/docs/Gecko_DOM_Reference">objects</a> (e.g., the document object that represents the document itself, the table object that represents a HTML table element, and so forth). Those objects are accessible via scripting languages in most recent web browsers.</p>
+<p>The DOM is most often used in conjunction with <a href="/en-US/docs/JavaScript">JavaScript</a>. However, the DOM was designed to be independent of any particular programming language, making the structural representation of the document available from a single, consistent API. Though we focus on JavaScript throughout this site, implementations of the DOM can be built for <a href="http://www.w3.org/DOM/Bindings">any language</a>.</p>
+<p>The <a href="http://www.w3.org/">World Wide Web Consortium</a> establishes a <a href="http://www.w3.org/DOM/">standard for the DOM</a>, called the W3C DOM. It should, now that the most important browsers correctly implement it, enable powerful cross-browser applications.</p>
+<h2 id="Why_is_the_DOM_support_in_Mozilla_important.3F" name="Why_is_the_DOM_support_in_Mozilla_important.3F">Why is the DOM important?</h2>
+<p>"Dynamic HTML" (<a href="/en-US/docs/DHTML">DHTML</a>) is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated. The W3C DOM Working Group is working hard to make sure interoperable and language-neutral solutions are agreed upon (see also the <a href="http://www.w3.org/DOM/faq.html">W3C FAQ</a>). As Mozilla claims the title of "Web Application Platform", support for the DOM is one of the most requested features, and a necessary one if Mozilla wants to be a viable alternative to the other browsers.</p>
+<p>Even more important is the fact that the user interface of Mozilla (also Firefox and Thunderbird) is built using <a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a>, using the DOM to <a href="/en-US/docs/Dynamically_modifying_XUL-based_user_interface">manipulate its own UI</a>.</p>
+<h2 id="More_about_the_DOM">More about the DOM</h2>
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/de/web/guide/dom/manipulating_the_browser_history/index.html b/files/de/web/guide/dom/manipulating_the_browser_history/index.html
new file mode 100644
index 0000000000..6f59cbbdc3
--- /dev/null
+++ b/files/de/web/guide/dom/manipulating_the_browser_history/index.html
@@ -0,0 +1,227 @@
+---
+title: Manipulieren des Browser-Verlaufes
+slug: Web/Guide/DOM/Manipulating_the_browser_history
+tags:
+  - Verlauf
+translation_of: Web/API/History_API
+---
+<p>Das DOM {{ domxref("window") }} Objekt stellt Zugriffsmöglichkeiten auf den Browser-Verlauf über das {{ domxref("window.history", "history") }} Objekt bereit. Es bietet nützliche Methoden und Einstellungen, die es ermöglichen, den Zurück- und Vorwärts-Button und den Browser-Verlauf zu steuern und – seit HTML5 – diesen auch zu manipulieren</p>
+
+<h2 id="Durch_den_Verlauf_gehen">Durch den Verlauf gehen</h2>
+
+<p>Um durch den Verlauf des Benutzers zu gehen gibt es die Methoden <code>back()</code>, <code>forward()</code> und <code>go()</code>.</p>
+
+<h3 id="Vor_und_zurück_bewegen">Vor und zurück bewegen</h3>
+
+<p>Um im Verlauf zurück zu navigieren, nutze:</p>
+
+<pre class="brush: js">window.history.back();
+</pre>
+
+<p>Dies hat denselben Effekt, wie wenn der Benutzer den Zurück-Knopf drückt.</p>
+
+<p>Auf ähnliche Weise kann so vorwärts navigiert werden: </p>
+
+<pre class="brush: js">window.history.forward();
+</pre>
+
+<h3 id="An_einen_bestimmten_Punkt_im_Verlauf_springen">An einen bestimmten Punkt im Verlauf springen</h3>
+
+<p>Mit der Methode <code>go()</code> ist es möglich, eine spezifische Seite aus dem Verlauf zu laden, welche relativ zur momentanen Seite im Verlauf steht. Die aktuelle Seite hat hierbei natürlich Index 0.</p>
+
+<p>Um eine Seite rückwärts zu gehen (äquivalent zu <code>back()</code>):</p>
+
+<pre class="brush: js"><code>window.history.go(-1);</code>
+</pre>
+
+<p>Um eine Seite vorwärts zu gehen (äquivalent zu <code>forward()</code>):</p>
+
+<pre class="brush: js"><code>window.history.go(1);</code>
+</pre>
+
+<p>Gleichermassen ist es möglich, 2 Seiten vorwärts mit <code>go(2)</code> zu gehen, 3 rückwärts mit <code>go(-3)</code> und so weiter.</p>
+
+<p>Die Anzahl der Seiten im history-Stapel kann mithilfe der Eigenschaft <code>length</code> bestimmt werden:</p>
+
+<pre class="brush: js">var <code>numberOfEntries</code> = window.history.length;
+</pre>
+
+<div class="note"><strong>Anmerkung:</strong> Der Internet Explorer unterstützt das Übergeben von String URLs als Parameter für <code>go()</code>; dies ist nicht standardisiertes Verhalten und wird von Gecko nicht unterstützt.</div>
+
+<h2 id="Hinzufügen_und_Ändern_von_Verlaufseinträgen">Hinzufügen und Ändern von Verlaufseinträgen</h2>
+
+<p>{{ gecko_minversion_header("2") }}</p>
+
+<p>Mit HTML5 wurden die Methoden <code>history.pushState()</code> und <code>history.replaceState()</code> eingeführt, welche jeweils das Hinzufügen und die Manipulation von Verlaufseinträgen ermöglichen. Diese stehen in Verbindung mit dem {{ domxref("window.onpopstate") }}-Event.</p>
+
+<p>Wenn <code>history.pushState()</code> benutzt wird, ändert das den Referrer der als HTTP-Header in danach erstellten <a href="/en/DOM/XMLHttpRequest" title="en/XMLHttpRequest"><code>XMLHttpRequest</code></a>-Objekten genutzt wird. Der Referrer wird die URL des Dokumentes sein, dessen Fenster <code>this</code> zur Zeit der Erstellung des <a href="/en/DOM/XMLHttpRequest" title="en/XMLHttpRequest"><code>XMLHttpRequest</code></a>-Objektes ist.</p>
+
+<h3 id="Beispiel_für_die_pushState()-Methode">Beispiel für die pushState()-Methode</h3>
+
+<p>Angenommen, <span class="nowiki">http://mozilla.org/foo.html</span> führt folgendes JavaScript aus:</p>
+
+<pre class="brush: js">var stateObj = { foo: "bar" };
+history.pushState(stateObj, "seite 2", "bar.html");
+</pre>
+
+<p>Das ändert die angezeigte URL zu <span class="nowiki">http://mozilla.org/bar.html</span>, bringt den Browser aber nicht dazu, <code>bar.html</code> zu laden oder überhaupt dessen Existenz zu überprüfen.</p>
+
+<p>Man nehme weiter an, der Benutzer navigiert zu http://google.com und klickt dann Zurück. Zu diesem Zeitpunkt wird die URL-Bar http://mozilla.org/bar.html anzeigen, und die Seite erhält ein <code>popstate</code>-Event mit einem <em>Status-Objekt</em>, das eine Kopie von <code>stateObj</code> darstellt. Die Seite selbst wird aussehen wie <code>foo.html</code>, aber während dem <code>popstate</code>-Event kann der Inhalt bearbeitet worden sein.</p>
+
+<p>Wenn der Benutzer noch einmal Zurück drückt, ändert sich die URL zu <span class="nowiki">http://mozilla.org/foo.html</span>, und die Seite erhält ein weiteres <code>popstate</code>-Event, dieses Mal mit einem <code>null</code> <em>Status-Objekt</em>. Auch hier wird der Inhalt der Seite nicht geändert, wenn das nicht manuell im <code>popstate</code>-Event vollzogen wird.</p>
+
+<h3 id="Die_pushState()-Methode">Die pushState()-Methode</h3>
+
+<p><code>pushState()</code> übernimmt drei Parameter: ein <em>state</em> Objekt, einen <em>title</em> (welcher aktuell noch ignoriert wird), und (optional) eine <em>URL</em>. Betrachten wir die einzelnen Parameter genauer:</p>
+
+<ul>
+ <li>
+  <p><strong>state-Objekt</strong> — Das Status-Objekt ist ein JavaScript-Objekt, das mit dem per <code>pushState()</code> neu erzeugten history-Eintrag verknüpft ist. Jedesmal wenn der Benutzer zu diesem neuen Status navigiert, wird ein <code>popstate</code>-Event ausgelöst. Die <code>state</code>-Eigenschaft des Events enthält dabei eine Kopie des Status-Objektes des history-Eintrages.<br>
+   <br>
+   Das Status-Objekt kann alles sein, was sich serialisieren lässt. Weil Firefox state-Objekte auf dem Speicher den Nutzers ablegt, lassen sie sich auch wiederherstellen, nachdem der Nutzer seinen Browser neu gestartet hat, das serialisierte Abbild des Status-Objekt ist dabei auf 640k Zeichen begrenzt. Wird ein größeres Status-Objekt an <code>pushState()</code> übergeben, gibt die Methode eine <em>Exception</em> aus. Wenn mehr Speicherplatz benötigt wird, sollte <code>sessionStorage</code> und/oder <code>localStorage</code> verwendet werden.</p>
+ </li>
+ <li>
+  <p><strong>title</strong> — Aktuell ignoriert Firefox diesen Parameter, wenngleich er in Zukunft verwendet werden könnte. Um gegenüber zukünftigen Änderungen abgesichert zu sein, empfiehlt sich, einen leeren String zu übergeben. Alternativ kann man hier einen kurzen Titel für den Status hinterlassen.</p>
+ </li>
+ <li>
+  <p><strong>URL</strong> — Der neue history-Eintrag erhält mit diesem Parameter seine URL. Man beachte, dass der Browser nicht versuchen wird, nach einem Aufruf von <code>pushState()</code> diese URL zu laden, aber später dennoch versuchen könnte, beispielsweise nachdem der Nutzer seinen Browser neu gestartet hat. Die neue URL muss nicht absolute sein; wenn sie relativ ist, wird sie relativ zur aktuellen URL aufgelöst. Die neue URL muss denselben Ursprung haben wie die aktuelle, sonst gibt <code>pushState()</code> eine <em>Exception</em> zurück. Dieser Parameter ist optional; falls er übergeben wird, wird er auf die aktuelle URL des <em>documents</em> gesetzt.</p>
+ </li>
+</ul>
+
+<div class="note"><strong>Anmerkung:</strong> In Gecko 2.0 {{ geckoRelease("2.0") }} bis Gecko 5.0 {{ geckoRelease("5.0") }} wird das übergebene Objekt mittels JSON serialisiert. Ab Gecko 6.0 {{ geckoRelease("6.0") }}, übernimmt der<a href="/en/DOM/The_structured_clone_algorithm" title="en/DOM/The structured clone algorithm"> structured clone algorithm</a> die Serialisierung des Objekts. Dies erlaubt eine größere Vielfalt an Objekten, die sich sicher serialisieren lassen.</div>
+
+<p>In gewissem Sinne ist der Aufruf von <code>pushState()</code> ähnlich dem Setzen von <code>window.location = "#foo"</code>, insofern beide einen weiteren history-Eintrag sowohl erzeugen als auch aktivieren, der mit dem aktuellen Document verbunden ist. Aber <code>pushState()</code> hat ein paar Vorteile:</p>
+
+<ul>
+ <li>Die neue URL kann irgendeine URL desselben Ursprungs sein wie die aktuelle URL.<br>
+  Im Gegensatz dazu bleibt <code>window.location</code> nur dann im selben {{ domxref("document") }} selbst wenn man nur den <em>hash</em> ändert.</li>
+ <li>Man muss nicht die URL ändern, wenn man nicht will. <br>
+  Im Gegensatz dazu erzeugt <code>window.location = "#foo";</code> nur dann einen neuen history-Eintrag, wenn der aktuelle <em>hash</em> nicht <code>#foo</code> ist.
+  <ul>
+   <li>Es lassen sich auch willkürliche Daten mit dem neuen history-Eintrag verbinden. Mit dem <em>hash</em>-basierten Ansatz müssen alle relevanten Daten in einen kurzen String kodiert werden.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Man beachte, dass <code>pushState()</code> niemals das Auslösen eines <code>hashchange</code>-Events verursacht, selbst wenn sich die neue URL von der alten nur durch ihren <em>hash</em> unterscheidet.</p>
+
+<h3 id="Die_replaceState()-Methode">Die replaceState()-Methode</h3>
+
+<p><code>history.replaceState()</code> arbeitet genauso wie <code>history.pushState()</code>, abgesehen davon, dass <code>replaceState()</code> den aktuellen history-Eintrag verändert, statt einen neuen zu erzeugen.</p>
+
+<p><code>replaceState()</code> ist insbesondere nützlich, um das <em>Status</em>-Objekt oder die URL des aktuellen history-Eintrages als Reaktion auf eine Benutzer-Aktion zu aktualisieren.</p>
+
+<div class="note"><strong>Anmerkung:</strong> In Gecko 2.0 {{ geckoRelease("2.0") }} bis Gecko 5.0 {{ geckoRelease("5.0") }} wird das übergebene Objekt mittels JSON serialisiert. Ab Gecko 6.0 {{ geckoRelease("6.0") }}, übernimmt der<a href="/en/DOM/The_structured_clone_algorithm" title="en/DOM/The structured clone algorithm"> structured clone algorithm</a> die Serialisierung des Objekts. Dies erlaubt eine größere Vielfalt an Objekten, die sich sicher serialisieren lassen.</div>
+
+<h3 id="Beispiel_für_die_replaceState()-Methode">Beispiel für die replaceState()-Methode</h3>
+
+<p>Angenommen, http://mozilla.org/foo.html führt folgendes JavaScript aus:</p>
+
+<p> </p>
+
+<pre class="brush: js"><code>var stateObj = { foo: "bar" };
+history.pushState(stateObj, "page 2", "bar.html");</code></pre>
+
+<p>Die Erläuterung dieser beiden Zeilen findet sich in unter "Beispiel für die pushState()-Metode". Weiterhin nehme man an, http://mozilla.org/bar.html würde dieses JavaScript ausführen:</p>
+
+<pre class="brush: js"><code>history.replaceState(stateObj, "page 3", "bar2.html");</code></pre>
+
+<p>Dies lässt den Browser http://mozilla.org/bar2.html in der Adresszeile anzeigen, aber nicht <code>bar2.html</code> laden oder auch nur prüfen, ob <code>bar2.html</code> existiert.</p>
+
+<p>Nehmen wir nun an, dass der Nutzer zu http://www.microsoft.com navigiert und dann auf den Zurück-Button des Browsers drückt. Dann wird die Adresszeile http://mozilla.org/bar2.html anzeigen. Drückt der Benutzer den Zurück-Button nun nochmals, zeigt die Adresszeile http://mozilla.org/foo.html und umgeht bar.html vollständig.</p>
+
+<p> </p>
+
+<h3 id="The_popstate_event">The popstate event</h3>
+
+<p>A <code>popstate</code> event is dispatched to the window every time the active history entry changes. If the history entry being activated was created by a call to <code>pushState</code> or affected by a call to <code>replaceState</code>, the <code>popstate</code> event's <code>state</code> property contains a copy of the history entry's state object.</p>
+
+<p>See {{ domxref("window.onpopstate") }} for sample usage.</p>
+
+<h3 id="Reading_the_current_state">Reading the current state</h3>
+
+<p>When your page loads, it might have a non-null state object.  This can happen, for example, if the page sets a state object (using <code>pushState()</code> or <code>replaceState()</code>) and then the user restarts her browser.  When your page reloads, the page will receive an <span style="font-family: courier new;">onload</span><span style="font-family: helvetica;"> event, but no <span style="font-family: courier new;">popstate</span> event.</span>  However, if you read the <span style="font-family: courier new;">history.state</span> property, you'll get back the state object you would have gotten if a <span style="font-family: courier new;">popstate</span> had fired.</p>
+
+<p>You can read the state of the current history entry without waiting for a <code>popstate</code> event using the <code>history.state</code> property like this:</p>
+
+<pre class="brush: js">var currentState = history.state;
+</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<p>For a complete example of AJAX web site, please see: <a href="/en-US/docs/DOM/Manipulating_the_browser_history/Example" title="/en-US/docs/DOM/Manipulating_the_browser_history/Example">Ajax navigation example</a>.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>replaceState, pushState</td>
+   <td>5</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>10</td>
+   <td>11.50</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td>history.state</td>
+   <td>18</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>10</td>
+   <td>11.50</td>
+   <td>6.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>replaceState, pushState</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>history.state</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{ domxref("window.history") }}</li>
+ <li>{{ domxref("window.onpopstate") }}</li>
+</ul>
+
+<p>{{ languages( { "ja": "ja/DOM/Manipulating_the_browser_history"} ) }}</p>
diff --git a/files/de/web/guide/events/creating_and_triggering_events/index.html b/files/de/web/guide/events/creating_and_triggering_events/index.html
new file mode 100644
index 0000000000..06a765d3c0
--- /dev/null
+++ b/files/de/web/guide/events/creating_and_triggering_events/index.html
@@ -0,0 +1,135 @@
+---
+title: Erstellen und Auslösen von Ereignissen
+slug: Web/Guide/Events/Creating_and_triggering_events
+translation_of: Web/Guide/Events/Creating_and_triggering_events
+---
+<p>Dieser Artikel zeigt, wie man DOM-Ereignisse erstellt und versendet. Solche Ereignisse werden allgemein als <strong>synthetische Ereignisse</strong> bezeichnet, im Gegensatz zu den Ereignissen, die vom Browser selbst ausgelöst werden.</p>
+
+<h2 id="Erstellen_von_benutzerdefinierten_Ereignissen">Erstellen von benutzerdefinierten Ereignissen</h2>
+
+<p>Ereignisse können mit dem <code>Event</code>-Konstruktor wie folgt erstellt werden:</p>
+
+<pre class="brush: js">var event = new Event('build');
+
+// Listen for the event.
+elem.addEventListener('build', function (e) { /* ... */ }, false);
+
+// Dispatch the event.
+elem.dispatchEvent(event);</pre>
+
+<p>Das obige Codebeispiel verwendet die Methode EventTarget.dispatchEvent().</p>
+
+<p>Dieser Konstruktor wird in den meisten modernen Browsern unterstützt (mit Ausnahme des Internet Explorers). Für einen ausführlicheren Ansatz (der mit dem Internet Explorer funktioniert) siehe den altmodischen Weg unten.</p>
+
+<h3 id="Hinzufügen_von_benutzerdefinierten_Daten_-_CustomEvent()">Hinzufügen von benutzerdefinierten Daten - CustomEvent()</h3>
+
+<p>Um weitere Daten zum Ereignisobjekt hinzuzufügen, existiert die CustomEvent-Schnittstelle und die <strong>Detail</strong>eigenschaft kann zur Übergabe von benutzerdefinierten Daten verwendet werden.<br>
+ Beispielsweise könnte das Ereignis wie folgt angelegt werden:</p>
+
+<pre class="brush: js">var event = new CustomEvent('build', { detail: elem.dataset.time });</pre>
+
+<p>Auf diese Weise können Sie dann auf die zusätzlichen Daten im Event-Listener zugreifen:</p>
+
+<pre class="brush: js">function eventHandler(e) {
+  console.log('The time is: ' + e.detail);
+}
+</pre>
+
+<h3 id="Auf_die_altmodische_Art_und_Weise">Auf die altmodische Art und Weise</h3>
+
+<p>Der ältere Ansatz zur Erstellung von Ereignissen verwendet APIs, die von Java inspiriert sind. Im Folgenden ist ein Beispiel dargestellt:</p>
+
+<pre class="brush: js">// Create the event.
+var event = <a href="/en-US/docs/Web/API/Document/createEvent">document.createEvent</a>('Event');
+
+// Define that the event name is 'build'.
+event.initEvent('build', true, true);
+
+// Listen for the event.
+elem.addEventListener('build', function (e) {
+  // e.target matches elem
+}, false);
+
+// target can be any Element or other EventTarget.
+elem.dispatchEvent(event);
+
+</pre>
+
+<h3 id="Ereignisbubbling">Ereignisbubbling</h3>
+
+<p>Es ist oft wünschenswert, ein Ereignis aus einem untergeordneten Element auszulösen und von einem Vorfahren abfangen zu lassen; optional mit Daten:</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;textarea&gt;&lt;/textarea&gt;
+&lt;/form&gt;
+</pre>
+
+<pre class="brush: js">const form = document.querySelector('form');
+const textarea = document.querySelector('textarea');
+
+// Create a new event, allow bubbling, and provide any data you want to pass to the "details" property
+const eventAwesome = new CustomEvent('awesome', {
+  bubbles: true,
+  detail: { text: () =&gt; textarea.value }
+});
+
+// The form element listens for the custom "awesome" event and then consoles the output of the passed text() method
+form.addEventListener('awesome', e =&gt; console.log(e.detail.text()));
+
+// As the user types, the textarea inside the form dispatches/triggers the event to fire, and uses itself as the starting point
+textarea.addEventListener('input', e =&gt; e.target.dispatchEvent(eventAwesome));
+</pre>
+
+<h3 id="Dynamisches_Erstellen_und_Versenden_von_Ereignissen">Dynamisches Erstellen und Versenden von Ereignissen</h3>
+
+<p>Elemente können auf Ereignisse warten, die noch nicht erstellt wurden:</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;textarea&gt;&lt;/textarea&gt;
+&lt;/form&gt;
+</pre>
+
+<pre class="brush: js">const form = document.querySelector('form');
+const textarea = document.querySelector('textarea');
+
+form.addEventListener('awesome', e =&gt; console.log(e.detail.text()));
+
+textarea.addEventListener('input', function() {
+  // Create and dispatch/trigger an event on the fly
+  // Note: Optionally, we've also leveraged the "function expression" (instead of the "arrow function expression") so "this" will represent the element
+  this.dispatchEvent(new CustomEvent('awesome', { bubbles: true, detail: { text: () =&gt; textarea.value } }))
+});
+</pre>
+
+<h2 id="Auslösen_von_eingebauten_Ereignissen">Auslösen von eingebauten Ereignissen</h2>
+
+<p>Dieses Beispiel demonstriert die Simulation eines Klicks (d.h. das programmgesteuerte Erzeugen eines Klickereignisses) auf einem Kontrollkästchen mit Hilfe von DOM-Methoden.</p>
+
+<p><a href="http://developer.mozilla.org/samples/domref/dispatchEvent.html">Sehen Sie sich das Beispiel in Aktion an.</a></p>
+
+<pre class="brush: js">function simulateClick() {
+  var event = new MouseEvent('click', {
+    view: window,
+    bubbles: true,
+    cancelable: true
+  });
+  var cb = document.getElementById('checkbox');
+  var cancelled = !cb.dispatchEvent(event);
+  if (cancelled) {
+    // A handler called preventDefault.
+    alert("cancelled");
+  } else {
+    // None of the handlers called preventDefault.
+    alert("not cancelled");
+  }
+}</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/CustomEvent/CustomEvent">CustomEvent()</a></li>
+ <li>{{domxref("document.createEvent()")}}</li>
+ <li>{{domxref("Event.initEvent()")}}</li>
+ <li>{{domxref("EventTarget.dispatchEvent()")}}</li>
+ <li>{{domxref("EventTarget.addEventListener()")}}</li>
+</ul>
diff --git a/files/de/web/guide/events/index.html b/files/de/web/guide/events/index.html
new file mode 100644
index 0000000000..9fbfac8b89
--- /dev/null
+++ b/files/de/web/guide/events/index.html
@@ -0,0 +1,53 @@
+---
+title: Event developer guide
+slug: Web/Guide/Events
+tags:
+  - DOM
+  - Event
+  - Guide
+  - NeedsTranslation
+  - NeedsUpdate
+  - TopicStub
+  - events
+translation_of: Web/Guide/Events
+---
+<p> </p>
+
+<p>Events bezieht sich sowohl auf ein Entwurfsmuster, das für die asynchrone Behandlung verschiedener Vorfälle, die während der Lebensdauer einer Webseite auftreten, als auch auf die Benennung, Charakterisierung und Verwendung einer großen Anzahl von Vorfällen unterschiedlicher Art.</p>
+
+<p>Die Übersichtsseite bietet eine Einführung in das Entwurfsmuster und eine Zusammenfassung der Arten von Vorfällen, die von modernen Webbrowsern definiert werden und darauf reagieren.</p>
+
+<p>Auf der Seite <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Events/Creating_and_triggering_events">Benutzerdefinierte Ereignisse</a> wird beschrieben, wie das Ereigniscode-Entwurfsmuster in benutzerdefiniertem Code verwendet werden kann, um neue Ereignistypen zu definieren, die von Benutzerobjekten ausgegeben werden, Listener-Funktionen zum Behandeln dieser Ereignisse zu registrieren und die Ereignisse im Benutzercode auszulösen.</p>
+
+<p>The remaining pages describe how to use events of different kinds defined by web browsers. Unfortunately, these events have been defined piece by piece as web browsers have evolved so that there is no satisfying systematic characterization of the events built-in or defined by modern web browsers.</p>
+
+<p>The <strong>device</strong> on which the web browser is running can trigger events, for example due to a change in its position and orientation in the real world, as discussed partially by the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Orientation_and_motion_data_explained">page on orientation coordinate systems</a> and the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Using_device_orientation_with_3D_transforms">page on the use of 3D transforms</a>. That is different, but similar, to the change in device vertical orientation. </p>
+
+<p>The <strong>window</strong> in which the browser is displayed can trigger events; for example, change size if the user maximizes the window or otherwise changes it.</p>
+
+<p>The <strong>process</strong> loading of a web page can trigger events in response to the completion of different steps in the downloading, parsing, and rendering of the web page for display to the user.</p>
+
+<p>The <strong>user interaction</strong> with the web page contents can trigger events. The events triggered by user interaction evolved during the early years of browser design and include a complicated system defining the sequence in which events will be called and the manner in which that sequence can be controlled. The different types of user interaction-driven events include:</p>
+
+<ul>
+ <li>the original 'click' event,</li>
+ <li>mouse events,</li>
+ <li><a href="/en-US/docs/Web/Guide/API/DOM/Events/Mouse_gesture_events">mouse gesture events</a>, and</li>
+ <li>both <a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events">touch events</a> and the earlier <a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events_(Mozilla_experimental)">mozilla experimental touch events</a>, now deprecated.</li>
+</ul>
+
+<p>The <strong>modification of the web page</strong> in structure or content might trigger some events, as explained in the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Mutation_events">mutation events page</a>, but the use of these events has been deprecated in favour of the lighter <a href="/en-US/docs/Web/API/MutationObserver">Mutation Observer</a> approach.</p>
+
+<p>The <strong>media streams</strong> embedded in the HTML documents might trigger some events, as explained in the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Media_events">media events</a> page.</p>
+
+<p>The <strong>network requests</strong> made by a web page might trigger some events.</p>
+
+<p>There are many other sources of events defined by web browsers for which pages are not yet available in this guide.</p>
+
+<div class="note">
+<p>Note: This Event Developer Guide needs substantial work. The structure needs to be reorganized and the pages rewritten. Our hope is that everything you need to know about events will go under here.</p>
+</div>
+
+<h2 id="Docs">Docs</h2>
+
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/de/web/guide/graphics/index.html b/files/de/web/guide/graphics/index.html
new file mode 100644
index 0000000000..f97b79a18e
--- /dev/null
+++ b/files/de/web/guide/graphics/index.html
@@ -0,0 +1,51 @@
+---
+title: Grafiken im Internet
+slug: Web/Guide/Graphics
+tags:
+  - 2D
+  - 3D
+  - Canvas
+  - Grafiken
+  - HTML5
+  - SVG
+  - Web
+  - WebGL
+  - WebRTC
+translation_of: Web/Guide/Graphics
+---
+<p><span class="seoSummary">Moderne Websites und Webanwendungen müssen oft Grafiken darstellen.</span> Statische Bilder können leicht mit einem {{HTMLElement("img")}}-Element oder als Hintergrund eines Elements mit der {{cssxref("background-image")}} Eigenschaft angezeigt werden. Oft will man aber Grafiken auf die Schnelle erzeugen oder Bilder im Nachhinein manipulieren. <span class="seoSummary">Diese Artikel bieten einen Einblick, wie das erreicht werden kann.</span></p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">2D-Grafiken</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/HTML/Canvas">Canvas</a></dt>
+ <dd><em>Das {{HTMLElement("canvas")}}-Element bietet </em><em>APIs zum Zeichnen von 2D-Grafiken mithilfe von JavaScript.</em></dd>
+ <dt><a href="/en-US/docs/Web/SVG">SVG</a></dt>
+ <dd><em>Mit skalierbaren Vektorgraphiken (SVG) kannst du Linien, Kurven und andere geometrische Figuren anzeigen. Durch Vermeidung von Pixelgrafiken sind diese in jeder Größe gestochen scharf.</em></dd>
+</dl>
+
+<p><span class="alllinks"><a href="/en-US/docs/tag/Graphics">Alle Themen...</a></span></p>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">3D-Grafiken</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/WebGL">WebGL</a></dt>
+ <dd><em>Eine Anleitung für den Einstieg in WebGL, die API für 3D-Grafiken im Internet. Mit dieser Technologie kannst du Standard OpenGL ES in Webinhalten nutzen.</em></dd>
+</dl>
+
+<h2 id="Video">Video</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video">HTML5 Audio und Video</a></dt>
+ <dd><em>Videos in HTML-Dokumente einbetten und die Wiedergabe kontrollieren.</em></dd>
+ <dt><a href="/en-US/docs/WebRTC">WebRTC</a></dt>
+ <dd><em>Das RTC aus WebRTC steht für "Real-Time Communications", eine Technologie zum Streamen von Audio, Video und anderen Daten zwischen Browser-Clients (Peers).</em></dd>
+</dl>
+</div>
+</div>
+
+<p> </p>
diff --git a/files/de/web/guide/html/canvas_tutorial/advanced_animations/index.html b/files/de/web/guide/html/canvas_tutorial/advanced_animations/index.html
new file mode 100644
index 0000000000..10c4a7650c
--- /dev/null
+++ b/files/de/web/guide/html/canvas_tutorial/advanced_animations/index.html
@@ -0,0 +1,380 @@
+---
+title: Fortgeschrittene Animationen
+slug: Web/Guide/HTML/Canvas_Tutorial/Advanced_animations
+tags:
+  - Canvas
+  - Graphics
+  - Tutoria
+translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}</div>
+
+<div class="summary">
+<p>In dem vorherigem Kapitel machten wir einige <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">Basisanimationen</a> und lernten Möglichkeiten, Dinge zu bewegen. In diesem Kapitel werden wir uns die Bewegung selbst anschauen und werden etwas Physik einfügen um unsere Animationen fortgeschrittener zu machen.</p>
+</div>
+
+<h2 id="Einen_Ball_zeichnen">Einen Ball zeichnen</h2>
+
+<p>Wir werden einen Ball für unsere Animationen benutzen, deshalb zeichnen wir zuerst einen Ball mit dem folgendem Code in die Canvas.</p>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="600" height="300"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>Wie gewöhnlich brauchen wir zuerst ein draw context. Um den Ball zu zeichnen, werden wir ein <code>ball</code> - Objekt erstellen, welches Eigenschaften und eine <code>draw()</code> - Methode enthält, um es in die Canvas zu zeichnen.</p>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+var ball = {
+  x: 100,
+  y: 100,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+ball.draw();</pre>
+
+<p>Nichts Besonderes hier, der Ball ist momentan ein einfacher Kreis und wird mit der {{domxref("CanvasRenderingContext2D.arc()", "arc()")}} - Methode gezeichnet.</p>
+
+<h2 id="Geschwindigkeit_hinzufügen">Geschwindigkeit hinzufügen</h2>
+
+<p>Nun haben wir einen Ball und sind bereit, eine Basisanimation hinzuzufügen, wie wir es im <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">vorherigen Kapitel</a> von diesem Tutorial lernten. Wieder hilft uns {{domxref("window.requestAnimationFrame()")}}, die Animation zu kontrollieren. Der Ball bewegt sich durch Hinzufügen von einem Geschwindigkeitsvektor zu der Position. Für jedes Frame {{domxref("CanvasRenderingContext2D.clearRect", "clean", "", 1)}} wir die Canvas, um alte Kreise zu entfernen.</p>
+
+<pre class="brush: js; highlight:[8,9,24,25]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e){
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener("mouseout",function(e){
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();
+</pre>
+
+<h2 id="Gebundenheit">Gebundenheit</h2>
+
+<p>Ohne jede gebundene Kollisionsüberprüfung fliegt unser Ball schnell aus dem Canvas. Wir müssen die <code>x</code> - und <code>y</code>position von dem Ball überprüfen und wenn der Ball außerhalb des Canvas ist, die Richtung der Geschwindigkeitsvektoren umkehren.</p>
+
+<pre class="brush: js">if (ball.y + ball.vy &gt; canvas.height || ball.y + ball.vy &lt; 0) {
+  ball.vy = -ball.vy;
+}
+if (ball.x + ball.vx &gt; canvas.width || ball.x + ball.vx &lt; 0) {
+  ball.vx = -ball.vx;
+}</pre>
+
+<h3 id="Erste_Demo">Erste Demo</h3>
+
+<p>Lass uns sehen, wie das in Aktion aussieht. Bewegen Sie die Maus in die Canvas, um die Animation zu starten.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+
+  if (ball.y + ball.vy &gt; canvas.height ||
+      ball.y + ball.vy &lt; 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx &gt; canvas.width ||
+      ball.x + ball.vx &lt; 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e){
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener("mouseout",function(e){
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Erste_Demo", "610", "310")}}</p>
+
+<h2 id="Acceleration">Acceleration</h2>
+
+<p>Um die Bewegung realistischer zu machen, können Sie mit Geschwindigkeit spielen, zum Beispiel:</p>
+
+<pre class="brush: js">ball.vy *= .99;
+ball.vy += .25;</pre>
+
+<p>Dies verlangsamt die vertikale Geschwindigkeit in jedem Frame, sodass der Ball am Ende nur noch am Boden hüpft.</p>
+
+<div class="hidden">
+<h6 id="Nächste_Demo">Nächste Demo</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+  ball.vy *= .99;
+  ball.vy += .25;
+
+  if (ball.y + ball.vy &gt; canvas.height ||
+      ball.y + ball.vy &lt; 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx &gt; canvas.width ||
+      ball.x + ball.vx &lt; 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e){
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener("mouseout",function(e){
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Acceleration", "610", "310")}}</p>
+
+<h2 id="Spureneffekt">Spureneffekt</h2>
+
+<p>Bis jetzt haben wir die {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}}  - Methode benutzt, wenn wir Frames clearten. Wenn Sie diese Methode durch {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}} ersetzen, können Sie einfach einen Spureneffekt erzeugen.</p>
+
+<pre class="brush: js">ctx.fillStyle = 'rgba(255,255,255,0.3)';
+ctx.fillRect(0,0,canvas.width,canvas.height);</pre>
+
+<div class="hidden">
+<h6 id="Dritte_Demo">Dritte Demo</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.fillStyle = 'rgba(255,255,255,0.3)';
+  ctx.fillRect(0,0,canvas.width,canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+  ball.vy *= .99;
+  ball.vy += .25;
+
+  if (ball.y + ball.vy &gt; canvas.height ||
+      ball.y + ball.vy &lt; 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx &gt; canvas.width ||
+      ball.x + ball.vx &lt; 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e){
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener("mouseout",function(e){
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Spureneffekt", "610", "310")}}</p>
+
+<h2 id="Mauskontrolle_hinzufügen">Mauskontrolle hinzufügen</h2>
+
+<p>Um etwas Kontrolle über den Ball zu bekommen, können wir machen, dass er die Maus verfolgt, indem wir beispielsweise das <code><a href="/en-US/docs/Web/Reference/Events/mousemove">mousemove</a></code> - Ereignis benutzen. Das <code><a href="/en-US/docs/Web/Events/click">click</a></code> - Ereignis lässt den Ball wieder hüpfen.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+var running = false;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 1,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function clear() {
+  ctx.fillStyle = 'rgba(255,255,255,0.3)';
+  ctx.fillRect(0,0,canvas.width,canvas.height);
+}
+
+function draw() {
+  clear();
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+
+  if (ball.y + ball.vy &gt; canvas.height || ball.y + ball.vy &lt; 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx &gt; canvas.width || ball.x + ball.vx &lt; 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mousemove', function(e){
+  if (!running) {
+    clear();
+    ball.x = e.clientX;
+    ball.y = e.clientY;
+    ball.draw();
+  }
+});
+
+canvas.addEventListener("click",function(e){
+  if (!running) {
+    raf = window.requestAnimationFrame(draw);
+    running = true;
+  }
+});
+
+canvas.addEventListener("mouseout",function(e){
+  window.cancelAnimationFrame(raf);
+  running = false;
+});
+
+ball.draw();
+</pre>
+
+<p>Bewegen Sie den Ball mit der Maus und klicken Sie, um ihn loszulassen.</p>
+
+<p>{{EmbedLiveSample("Mauskontrolle_hinzuf%C3%BCgen", "610", "310")}}</p>
+
+<h2 id="Breakout">Breakout</h2>
+
+<p>Dieses kurze Kapitel erklärt nur einige Möglichkeiten, fortgeschrittene Animationen zu erstellen. Es gibt viel mehr! Was darüber, ein Brett und einige Blöcke hizuzufügen und diese Demo in ein <a href="http://de.wikipedia.org/wiki/Breakout(Computerspiel)">Breakout</a> - Spiel zu verwandeln? Schauen Sie sich unseren <a href="/en-US/docs/Games">Spieleentwickelungsbereich</a> an für mehr auf Spiele bezogene Artikel.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{domxref("window.requestAnimationFrame()")}}</li>
+ <li><a href="/en-US/docs/Games/Techniques/Efficient_animation_for_web_games">Effiziete Animation für Webspiele</a></li>
+</ul>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}</p>
diff --git a/files/de/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html b/files/de/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html
new file mode 100644
index 0000000000..6caa27b3ef
--- /dev/null
+++ b/files/de/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html
@@ -0,0 +1,785 @@
+---
+title: Stile und Farben verwenden
+slug: Web/Guide/HTML/Canvas_Tutorial/Applying_styles_and_colors
+translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}</div>
+
+<div class="summary">
+<p class="Normal">Im Kapitel über das <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes" title="Web/Guide/HTML/Canvas_tutorial/Drawing_shapes">Zeichnen von Formen</a> haben wir zum Einstieg nur die Standard-Stile für Linien und Füllungen benutzt. Nun möchten wir uns etwas näher mit Möglichkeiten beschäftigen, unsere Zeichnungen etwas attraktiver zu gestalten. Wir werden lernen, unterschiedliche Farben, Linienstile, Verläufe, Muster und Schatten in unseren Zeichnungen anzuwenden.</p>
+</div>
+
+<h2 id="Colors" name="Colors">Farben</h2>
+
+<p class="Normal">Bis jetzt haben wir nur Methoden im unmittelbaren Zusammenhang mit dem Zeichnen gelernt. Möchten wir einer Form eine Farbe zuordnen, stehen uns folgenden zwei Eigenschaften zur Verfügung: <code>fillStyle</code> und <code>strokeStyle</code>.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle = color")}}</dt>
+ <dd>
+ <p class="Normal"> Bestimmt den Stil in dem die Form gefüllt wird.</p>
+ </dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle = color")}}</dt>
+ <dd>
+ <p class="Normal">Bestimmt den Stil der Umrandungslinien.</p>
+ </dd>
+</dl>
+
+<p class="Normal"><code>color</code> steht entweder für einen CSS {{cssxref("&lt;color&gt;")}} Farbwert, ein Gradienten-Objekt, oder ein Muster-Objekt. Auf letztere gehen wir später noch ein. Standardmäßig sind Strich- und Füllfarbe auf Schwarz eingestellt (CSS-Farbwert #000000).</p>
+
+<div class="note">
+<p class="Normal"><strong>Anmerkung:</strong> Nach dem Setzen von <code>strokeStyle</code> und/oder <code>fillStyle</code> wird der neue Wert zum Standardwert für alle nachfolgend gezeichneten Formen. Für jede in einer abweichenden Farbe gewünschte Form müssen <code>fillStyle</code> bzw. <code>strokeStyle</code> neu definiert werden.</p>
+</div>
+
+<p class="Normal">Der String <code>color</code> sollte, entsprechend der Spezifikation, ein gültiger CSS {{cssxref("&lt;color&gt;")}} -Wert sein. Alle folgenden Beispiele definieren die selbe Farbe.</p>
+
+<pre class="brush: js">// these all set the fillStyle to 'orange'
+
+ctx.fillStyle = "orange";
+ctx.fillStyle = "#FFA500";
+ctx.fillStyle = "rgb(255,165,0)";
+ctx.fillStyle = "rgba(255,165,0,1)";
+</pre>
+
+<h3 class="Normal" id="Beispiel_für_fillStyle">Beispiel für <code>fillStyle</code></h3>
+
+<p class="Normal">In diesem Beispiel nutzen wir wieder zwei Schleifen um ein Gitter aus gefüllten Quadraten zu zeichnen, jedes in einer anderen Farbe. Das resultierende Bild sollte etwa dem Screenshot unten entsprechen. Außergewöhnliches passiert hier nicht, wir nutzen einfach die beiden Variablen i und j um jedem Quadrat eine eigene Farbe zu geben, wobei wir nur die Werte für den Rot- und Grünanteil ändern; der Blauwert bleibt unverändert. Durch Modifikation der Farbkanäle können Sie verschiedene Paletten erzeugen; eine Erhöhung der Schrittweite erzeugt z.B. ein Muster, das an die Farbpaletten in Photoshop erinnert.</p>
+
+<pre class="brush: js;highlight[5,6]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i=0;i&lt;6;i++){
+    for (var j=0;j&lt;6;j++){
+      ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +
+                       Math.floor(255-42.5*j) + ',0)';
+      ctx.fillRect(j*25,i*25,25,25);
+    }
+  }
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html"> </pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>Das Ergebnis:</p>
+
+<p>{{EmbedLiveSample("A_fillStyle_example", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}</p>
+
+<h3 id="A_strokeStyle_example" name="A_strokeStyle_example">Beispiel für <code>strokeStyle</code></h3>
+
+<p class="Normal">Dieses Beispiel ähnelt dem vorangegangenen, nutzt aber die <code>strokeStyle</code> Eigenschaft, um die Farben der Umrisslinien zu ändern. Mit der Methode <code>arc()</code> zeichnen wir Kreise an Stelle der Quadrate.</p>
+
+<pre class="brush: js;highlight[5,6]">  function draw() {
+    var ctx = document.getElementById('canvas').getContext('2d');
+    for (var i=0;i&lt;6;i++){
+      for (var j=0;j&lt;6;j++){
+        ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' +
+                         Math.floor(255-42.5*j) + ')';
+        ctx.beginPath();
+        ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
+        ctx.stroke();
+      }
+    }
+  }
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>The result looks like this:</p>
+
+<p>{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}</p>
+
+<h2 id="Transparency" name="Transparency">Transparenz</h2>
+
+<p class="Normal">Zusätzlich zu deckenden Formen können wir auch teiltransparente (oder durchscheinende) Formen zeichnen. Dies geschieht entweder durch das Setzen der Eigenschaft <code>globalAlpha</code> oder die Zuordnung einer teiltransparenten Farbe zu einem Zeichen- oder Füllstil.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha = transparencyValue")}}</dt>
+ <dd>
+ <p class="Normal">Wendet den angegebenen Transparenz-Wert auf alle nachfolgend gezeichneten Formen an. Der Wert muss zwischen 0.0 (vollständig transparent) und 1.0 (vollständig deckend) liegen. Der Standardwert ist 1.0.</p>
+ </dd>
+</dl>
+
+<p class="Normal">Die Eigenschaft <code>globalTransparency</code> ist nützlich, wenn man viele Formen mit gleicher Transparenz zeichnen möchte; meist ist es aber praktischer, die Transparenz jeder einzelnen Form gemeinsam mit ihrer Farbe zu definieren.</p>
+
+<p class="Normal">Die Eigenschaften <code>strokeStyle</code> und <code>fillStyle</code> akzeptieren CSS rgba Farbwerte, daher kann die Transparenz direkt bei der Zuordnung einer Farbe wie folgt gesetzt werden:</p>
+
+<pre class="brush: js">// Assigning transparent colors to stroke and fill style
+
+ctx.strokeStyle = "rgba(255,0,0,0.5)";
+ctx.fillStyle = "rgba(255,0,0,0.5)";
+</pre>
+
+<p class="Normal">Die rgba()-Funktion entspricht der rgb()-Funktion, allerdings mit einem zusätzlichen Parameter am Ende. Dieser Wert bestimmt die Transparenz dieser bestimmten Farbe. Der Gültigkeitsbereich umfasst Werte zwischen 0.0 (völlig transpartent) und 1.0 (vollständig deckend).</p>
+
+<h3 id="A_globalAlpha_example" name="A_globalAlpha_example">Beispiel für <code>globalAlpha</code></h3>
+
+<p class="Normal">In diesem Beispiel zeichnen wir einen Hintergrund aus vier unterschiedlich gefärbten Quadraten. Über diese legen wir dann einige transparente Kreise. Die Eigenschaft <code>globalAlpha</code> wird auf den Wert 0.2 gesetzt, der dann für alle folgend gezeichneten Formen verwendet wird. Jeder Durchlauf der <code>for</code>-Schleife zeichnet einen Satz Kreise mit zunehmendem Radius. Das Endresultat ist ein kreisförmiger Verlauf. Durch das Übereinanderlagern von immer mehr Kreisen reduzieren wir letztlich die Transparenz bereits gezeichneter Kreise. Erhöhen wir die Anzahl der Durchläufe (und damit der gezeichneten Kreise) weiter, wird der Hintergrund in der Bildmitte irgendwann völlig überdeckt.</p>
+
+<pre class="brush: js;highlight[15]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  // draw background
+  ctx.fillStyle = '#FD0';
+  ctx.fillRect(0,0,75,75);
+  ctx.fillStyle = '#6C0';
+  ctx.fillRect(75,0,75,75);
+  ctx.fillStyle = '#09F';
+  ctx.fillRect(0,75,75,75);
+  ctx.fillStyle = '#F30';
+  ctx.fillRect(75,75,75,75);
+  ctx.fillStyle = '#FFF';
+
+  // set transparency value
+  ctx.globalAlpha = 0.2;
+
+  // Draw semi transparent circles
+  for (i=0;i&lt;7;i++){
+    ctx.beginPath();
+    ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
+    ctx.fill();
+  }
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}</p>
+
+<h3 id="An_example_using_rgba()" name="An_example_using_rgba()">Beispiel für die Verwendung von <code>rgba()</code></h3>
+
+<p class="Normal">Das zweite Beispiel ist ähnlich dem ersten, aber hier überlagern wir farbige Flächen mit schmalen, weißen Rechtecken zunehmender Deckkraft. Die Verwendung von rgba() an Stelle von <code>globalAlpha</code> erlaubt uns mehr Kontrolle und Flexibilität, weil wir damit Strich- und Füllstil unterschiedlich behandeln können.</p>
+
+<pre class="brush: js;highlight[16]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Draw background
+  ctx.fillStyle = 'rgb(255,221,0)';
+  ctx.fillRect(0,0,150,37.5);
+  ctx.fillStyle = 'rgb(102,204,0)';
+  ctx.fillRect(0,37.5,150,37.5);
+  ctx.fillStyle = 'rgb(0,153,255)';
+  ctx.fillRect(0,75,150,37.5);
+  ctx.fillStyle = 'rgb(255,51,0)';
+  ctx.fillRect(0,112.5,150,37.5);
+
+  // Draw semi transparent rectangles
+  for (var i=0;i&lt;10;i++){
+    ctx.fillStyle = 'rgba(255,255,255,'+(i+1)/10+')';
+    for (var j=0;j&lt;4;j++){
+      ctx.fillRect(5+i*14,5+j*37.5,14,27.5);
+    }
+  }
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "https://mdn.mozillademos.org/files/246/Canvas_rgba.png")}}</p>
+
+<h2 id="Line_styles" name="Line_styles">Linienstile</h2>
+
+<p class="Normal">Mehrere Eigenschaften ermöglichen den Zugriff auf Linienstile:</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth = value")}}</dt>
+ <dd>Setzt die Breite später gezeichneter Linien.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineCap", "lineCap = type")}}</dt>
+ <dd>Definiert die Form der Linienenden.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin = type")}}</dt>
+ <dd>Definiert die Form der „Ecken“, an denen sich Linien treffen.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit = value")}}</dt>
+ <dd>Definiert einen Grenzwert für die Gehrung (Schräge) am spitzen Winkel zwischen zwei Linien; damit wird die Dicke des Verbindungsbereichs begrenzt.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.getLineDash", "getLineDash()")}}</dt>
+ <dd>
+ <p class="Normal">Gibt den aktuellen Array für das Strichlierungsmuster zurück (eine gerade Anzahl nicht-negativer Zahlen).</p>
+ </dd>
+ <dt>{{domxref("CanvasRenderingContext2D.setLineDash", "setLineDash(segments)")}}</dt>
+ <dd>
+ <p class="Normal">Definiert das aktuelle Strichlierungsmuster.</p>
+ </dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset = value")}}</dt>
+ <dd>
+ <p class="Normal">Beschreibt wo das Strichlierunsmuster startet.</p>
+ </dd>
+</dl>
+
+<p class="Normal">Die Beispiele unten sollen Ihnen das Verständnis dieser Angaben erleichtern.</p>
+
+<h3 id="A_lineWidth_example" name="A_lineWidth_example">Beispiel für <code>lineWidth</code></h3>
+
+<p class="Normal">Diese Eigenschaft bestimmt die aktuelle Linienbreite. Der Standardwert ist 1.0, und es sind nur positive Zahlen erlaubt.</p>
+
+<p class="Normal">Die Linienbreite entspricht der Dicke des Strichs, zentriert über der Strecke zwischen den Punkten. Anders ausgedrückt dehnt sich die Fläche der gezeichneten Linie je zur Hälfte links und rechts der Strecke aus. Weil Canvas-Koordinaten sich nicht unmittelbar auf Pixel beziehen müssen, sollte man etwas Sorgfalt walten lassen um „scharfe“ bzw. definierte horizontale und vertikale Linien zu erhalten.</p>
+
+<p class="Normal">Im folgenden Beispiel werden zehn gerade Linien zunehmender Breite gezeichnet. Die Linie ganz links ist 1.0 Einheiten breit. Allerdings erscheint diese Linie - und auch alle anderen Linien mit einem ungeraden Wert für die Liniendicke - nicht wirklich scharf; schuld daran ist die Positionierung.</p>
+
+<pre class="brush: js;highlight[4]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i = 0; i &lt; 10; i++){
+    ctx.lineWidth = 1+i;
+    ctx.beginPath();
+    ctx.moveTo(5+i*14,5);
+    ctx.lineTo(5+i*14,140);
+    ctx.stroke();
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_lineWidth_example", "180", "180", "https://mdn.mozillademos.org/files/239/Canvas_linewidth.png")}}</p>
+
+<p class="Normal">Um scharfe Linien zu erzeugen muss man erst verstehen, wie Linien gezeichnet werden. In den Bildern unten steht das Gitter für das Koordinatensystem im Canvas. Die Quadrate zwischen den Gitterlinien entsprechen reellen Pixeln der Bildschirmdarstellung. Im ersten Bild wird ein Rechteck zwischen (2,1) und (5,5) gefüllt. Das gesamte Rechteck zwischen diesen Koordinaten (im Bild hellrot) fällt mit den Pixelgrenzen zusammen, und es resultiert eine Rechteckfläche mit scharfen Abgrenzungen.</p>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/201/Canvas-grid.png"></p>
+
+<p class="Normal">Stellen wir uns jetzt einen Pfad von (3,1) nach (3,5) mit einer Linienbreite von 1.0 vor, dann erhalten wir die Situation im zweiten Bild. Die zu füllende Fläche erstreckt sich jeweils nur zur Hälfte über die links und rechts angrenzenden Pixel. Dieser Zustand kann nur näherungsweise umgesetzt werden, so dass die betroffenen Pixel nur in der halben Intensität gefüllt werden. Genau das passierte mit der 1.0 Einheiten breiten Linie im vorhergehenden Programm.</p>
+
+<p class="Normal">Um das zu korrigieren muss man bei der Definition der Verbindungsstrecke besonders genau sein. Mit dem Wissen, dass eine Linie der Breite 1.0 sich jeweils zur Hälfte auf beide Seiten ausdehnt, kann man die Strecke von (3.5,1) bis (3.5,5) legen und erhält die Situation im dritten Bild - die eine Einheit breite Linie füllt exakt eine Pixelreihe.</p>
+
+<div class="note">
+<p class="Normal"><strong>Anmerkung:</strong> Bitte beachten Sie, dass in dem Beispiel der vertikalen Linie die Y-Position sich immer noch auf eine ganzzahlige Position bezieht - andernfalls würden an den Endpunkten die Pixel nur halb gedeckt.(Beachten Sie aber auch, dass dieses Verhalten zusätzlich vom <code>lineCap</code>-Stil abhängt, der standardmäßig auf <code>butt</code> eingestellt ist. Möchten Sie einheitliche Striche mit Koordinaten in halben Pixeln für ungerade Liniendicken berechnen, können Sie dafür den <code>lineCap</code>-Sti auf <code>square</code> setzten, wodurch der Aussenrand des Strichs am Endpunkt automatisch über den ganzen Pixel ausgedehnt wird.)</p>
+
+<p class="Normal">Beachten Sie auch, dass nur der Start- und Zielpunkt einer Strecke betroffen ist. Bei einer mit <code>closePath() </code>geschlossenen Strecke git es keinen solchen Start- bzw. Zielpunkt, stattdessen werden alle Endpunkte mit den vorhergehenden und nachfolgenden Segmenten entsprechend dem aktuellen <code>lineJoin</code>-Stil verbunden; dessen Standardwert ist <code>miter</code>, was eine automatische Ausweitung der äußeren Linienränder bis zu ihrem Schnittpunkt bewirkt, so dass der gezeichnete Strich an jedem Endpunkt exakt volle Pixel abdeckt, wenn die verbundenen Segmente horizontal und/oder vertikal verlaufen. Die folgenden zwei Abschnitte demonstrieren das Verhalten dieser zusätzlichen Linien-Stile.</p>
+</div>
+
+<p class="Normal">Für scharfe Ränder bei geradzahligen Linienbreiten definieren wir den Pfad zwischen den Pixeln (z.B. (3,1) bis (3,5)), so dass jede Hälfte des Strichs einer ganzzahligen Anzahl von Pixeln entspricht.</p>
+
+<p class="Normal">Wenn die sorgfältige Arbeit mit dem Pixelraster in 2D-Grafiken anfangs auch noch etwas anstrengend erscheinen mag, so gewährleistet sie letztlich eine korrekte Abbildung der Grafiken, unabhänging von Skalierungen oder anderen Transformationen. Eine korrekt positionierte Linie mit einer Breite von 1.0 wird nach einer Vergrößerung um den Faktor 2 eine Linie der Breite 2.0 ergeben, wiederum scharf umrissen und an der richtigen Position.</p>
+
+<h3 id="A_lineCap_example" name="A_lineCap_example">Beispiel für <code>lineCap</code></h3>
+
+<p class="Normal">Die Eigenschaft <code>lineCap</code> bestimmt das Erschinungsbild der Linienenden. Sie kann drei verschiedene Werte annehmen: <code>butt</code> (Standardwert), <code>round</code> und <code>square</code>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/236/Canvas_linecap.png" style="float: right; height: 190px; width: 190px;"></p>
+
+<dl>
+ <dt><code>butt</code></dt>
+ <dd>
+ <p class="Normal">Glatte Enden an den Endpunkten.</p>
+ </dd>
+ <dt><code>round</code></dt>
+ <dd>
+ <p class="Normal">Abgerundete Enden.</p>
+ </dd>
+ <dt><code>square</code></dt>
+ <dd>
+ <p class="Normal">Die Enden werden glatt abgeschnitten, es wird aber vorher ein Rechteck angefügt, gleicher Breite wie die Linie und halb so lang wie breit.</p>
+ </dd>
+</dl>
+
+<p class="Normal">In diesem Beispiel ziehen wir drei Linien, jede davon mit einem unterschiedlichen Wert für <code>lineCap</code>. Zwei Hilfslinien helfen dabei die Unterschiede zu verdeutlichen. Jede Linie beginnt und endet exakt an den Hilfslinien.</p>
+
+<p class="Normal">Die linke Linie verwendet die Option <code>butt</code>. Sie sehen, dass sie exakt an den Hilfslinien endet. Die zweite Linie verwendet die Option <code>round</code>, es wird dadurch ein Halbkreis mit einem Radius entsprechend der halben Linienbreite angehängt. Die recht Linie verwendet die Option <code>square</code>. Diese hängt ein Rechteck von gleicher Breite und einer Länge der halben Linienbreite an.</p>
+
+<pre class="brush: js;highlight[18]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var lineCap = ['butt','round','square'];
+
+  // Draw guides
+  ctx.strokeStyle = '#09f';
+  ctx.beginPath();
+  ctx.moveTo(10,10);
+  ctx.lineTo(140,10);
+  ctx.moveTo(10,140);
+  ctx.lineTo(140,140);
+  ctx.stroke();
+
+  // Draw lines
+  ctx.strokeStyle = 'black';
+  for (var i=0;i&lt;lineCap.length;i++){
+    ctx.lineWidth = 15;
+    ctx.lineCap = lineCap[i];
+    ctx.beginPath();
+    ctx.moveTo(25+i*50,10);
+    ctx.lineTo(25+i*50,140);
+    ctx.stroke();
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_lineCap_example", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}</p>
+
+<h3 id="A_lineJoin_example" name="A_lineJoin_example">Beispiel für <code>lineJoin</code></h3>
+
+<p class="Normal">Die Eigenschaft <code>lineJoin</code> bestimmt, wie zwei zusammenhängende Segmente (Linien-, Kurven- oder Kreissegmente) länger als Null in einer Form verbunden werden („degenerierte“ Elemente mit zusammenfallenden Start- und Zielpunkten, also mit der Länge Null, werden dabei übersprungen).</p>
+
+<p class="Normal">Diese Eigenschaft kann drei mögliche Werte annehmen: <code>round</code>, <code>bevel</code> und <code>miter</code> (Standardeinstellung). Beachten Sie, dass die <code>lineJoin</code>-Einstellung keine Auswirkungen hat wenn die Segemente in gleicher Richtung verlaufen, da in diesem Falle keine Verbindungsfläche eingefügt wird.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/237/Canvas_linejoin.png" style="float: right; height: 190px; width: 190px;"></p>
+
+<dl>
+ <dt><code>round</code></dt>
+ <dd>
+ <p class="Normal">Rundet die Ecke ab indem ein zusätzlicher Kreisausschnitt am gemeinsamen Endpunkt der verbundenen Segmente eingefügt wird. Der Radius entspricht der halben Liniendicke.</p>
+ </dd>
+ <dt><code>bevel</code></dt>
+ <dd>
+ <p class="Normal">Füllt die Fläche zwischen dem gemeinsamen Endpunkt und den beiden getrennten äußeren Ecken der Segmente mit einem Dreieck.</p>
+ </dd>
+ <dt><code>miter</code></dt>
+ <dd>
+ <p class="Normal">Verlängert die Aussenränder der Segmente bis sie sich in einem Punkt schneiden, wobei eine rautenförmige Fläche eingefügt wird. Diese Einstellung wird durch die Eigenschaft <code>miterLimit</code> beeinflusst, welche später erklärt wird.</p>
+ </dd>
+</dl>
+
+<p class="Normal">Das folgenden Beispielprogramm verdeutlicht die Auswirkungen der drei Varianten von <code>lineJoin</code> anhand von drei Linienzügen; das Ergebnis sehen Sie oben.</p>
+
+<pre class="brush: js;highlight[6]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var lineJoin = ['round','bevel','miter'];
+  ctx.lineWidth = 10;
+  for (var i=0;i&lt;lineJoin.length;i++){
+    ctx.lineJoin = lineJoin[i];
+    ctx.beginPath();
+    ctx.moveTo(-5,5+i*40);
+    ctx.lineTo(35,45+i*40);
+    ctx.lineTo(75,5+i*40);
+    ctx.lineTo(115,45+i*40);
+    ctx.lineTo(155,5+i*40);
+    ctx.stroke();
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_lineJoin_example", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}</p>
+
+<h3 id="A_demo_of_the_miterLimit_property" name="A_demo_of_the_miterLimit_property">Beispiel für die Eigenschaft <code>miterLimit</code></h3>
+
+<p class="Normal">Wie wir im vorhergehenden Beispiel gesehen haben, werden mit der Option <code>miter</code> die äußeren Kanten von zwei schneidenden Linien bis zu ihrem Schnittpunkt verlängert. Schneiden sich die Linien unter einem großen Winkel, liegt dieser äußere Schnittpunkt nicht allzu weit vom inneren entfernt. Mit kleiner werdendem Winkel vergrößert sich die Länge dieses Bereichs (genannt Gehrung = engl. <em>miter</em>) aber exponentiell.</p>
+
+<p class="Normal">Die Eigenschaft <code>miterLimit</code> bestimmt, wie weit der äußere Verbindungspunkt maximal vom inneren entfernt sein darf. Wird dieser Wert überschritten, wird stattdessen eine Fase gezogen, ähnlich der Einstellung <code>bevel</code>. Beachten Sie: Die maximale Gehrungslänge ist das Produkt aus der Liniendicke, gemessen im aktuellen Koordinatensystem, und dem Wert von <code>miterLimit</code> (Standardwert 10.0 im HTML {{HTMLElement("canvas")}}). Daher kann <code>miterLimit</code> unabhängig vom aktuellen Vergrößerungsmaßstab oder irgendeiner affinen Transformation der Strecke gesetzt werden; es beeinflusst nur die reell abgebildete Form der Kanten.</p>
+
+<p class="Normal">Präziser gesagt ist beschreibt <code>miterLimit</code> das maximale Verhältnis der Ausdehnung der Verlängerung nach außen (diese wird im HTML Canvas zwischen dem Schnittpunkt der äußeren Kanten der schneidenden Linien und dem gemeinsamen Endpunkt der Strecken gemessen) zur halben Liniendicke. Dazu gleichwertig ist die Definition als das maximal erlaubte Verhältnis der Entfernung zwischen dem inneren und äußeren Eckpunkt der Verbindung und der vollen Liniendicke. Er entspricht mathematisch dem Kosekans des halben minimalen Innenwinkels zwischen den verbundenen Segmenten, unterhalb dessen nur eine Fase ohne weitere Ausdehnung gezeichnet wird.</p>
+
+<ul>
+ <li><code>miterLimit</code> = <strong>max</strong> <code>miterLength</code> / <code>lineWidth</code> = 1 / <strong>sin</strong> ( <strong>min</strong> <em>θ</em> / 2 )</li>
+ <li>Der Standardwert von <code>miterLimit</code> = <code>10.0</code> schneidet alle Überhänge von Winkeln kleiner als 11° ab.</li>
+ <li>Ein Wert von √2 ≈ 1.4142136 (aufgerundet) stutzt Überhänge bei spitzen Winkeln, und belässt nur bei stumpfen und rechten Winkeln zusätzlich Raum für die Gehrung.</li>
+ <li>Ein Wert von 1.0 ist erlaubt, schneidet aber alle Überhänge ab.</li>
+ <li>Werte kleiner als 1.0 sind nicht erlaubt.</li>
+</ul>
+
+<p class="Normal">In dieser einfachen Demonstration können Sie den Wert für <code>miterLimit</code> dynamisch einstellen und dabei verfolgen, wie sich die Form der Ecken ändert. Die blauen Linien zeigen an wo Start- und Zielpunkt jedes Zickzack-Segments liegen.</p>
+
+<p class="Normal">Stellen Sie in diesem Programm ein <code>miterLimit</code> kleiner als 4.2 ein, wird an keiner der sichtbaren Ecken zu einer zusätzlichen Ausdehnung durch die Gehrung kommen; stattdessen entsteht an der blauen Linie eine Fase. Ist <code>miterLimit</code> größer als zehn, verbinden sich die meisten Linien in diesem Beispiel in einer Gehrung die weit über die blauen Linie hinausreicht, wobei sich die Höhe von links nach rechts wegen der zunehmenden Winkel verringert. Für dazwischenliegende Werte bilden die linken Elemente eine ausgedehnte Gehrung, während nach rechts die Spitzen durch Fasen ersetzt werden.</p>
+
+<pre class="brush: js;highlight[18]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Clear canvas
+  ctx.clearRect(0,0,150,150);
+
+  // Draw guides
+  ctx.strokeStyle = '#09f';
+  ctx.lineWidth   = 2;
+  ctx.strokeRect(-5,50,160,50);
+
+  // Set line styles
+  ctx.strokeStyle = '#000';
+  ctx.lineWidth = 10;
+
+  // check input
+  if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) {
+    ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value);
+  } else {
+    alert('Value must be a positive number');
+  }
+
+  // Draw lines
+  ctx.beginPath();
+  ctx.moveTo(0,100);
+  for (i=0;i&lt;24;i++){
+    var dy = i%2==0 ? 25 : -25 ;
+    ctx.lineTo(Math.pow(i,1.5)*2,75+dy);
+  }
+  ctx.stroke();
+  return false;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td&gt;&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;&lt;/td&gt;
+    &lt;td&gt;Change the &lt;code&gt;miterLimit&lt;/code&gt; by entering a new value below and clicking the redraw button.&lt;br&gt;&lt;br&gt;
+      &lt;form onsubmit="return draw();"&gt;
+        &lt;label&gt;Miter limit&lt;/label&gt;
+        &lt;input type="text" size="3" id="miterLimit"/&gt;
+        &lt;input type="submit" value="Redraw"/&gt;
+      &lt;/form&gt;
+    &lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<pre class="brush: js">document.getElementById('miterLimit').value = document.getElementById('canvas').getContext('2d').miterLimit;
+draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png")}}</p>
+
+<h2 class="Normal" id="Strichlierte_Linien_verwenden">Strichlierte Linien verwenden</h2>
+
+<p class="Normal">Die Methode <code>setLineDash</code> und die Eigenschaft <code>lineDashOffset</code> definieren die Strichlierung von Linien. <code>setLineDash</code> akzeptiert eine Liste von Zahlenwerten, die abwechselnd die Abstände von Strichen und Zwischenräumen definieren, wobei <code>lineDashOffset</code> einen Versatz am Start des Musters definiert.</p>
+
+<p>In diesem Beispiel erzeugen wir einen „marschierende Ameisen“-Effekt. Diese Animation finden wir oft bei Auswahlwerkzeugen von Bildbearbeitungsprogrammen. Es macht dort die Grenze zwischen Auswahlbereich und Hintergrund sichtbar. Später werden Sie in diesem Tutorial noch lernen solche oder ähnliche <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">einfache Animationen</a> zu erzeugen.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="110" height="110"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<pre class="brush: js;highlight[6]">var ctx = document.getElementById('canvas').getContext('2d');
+var offset = 0;
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ctx.setLineDash([4, 2]);
+  ctx.lineDashOffset = -offset;
+  ctx.strokeRect(10,10, 100, 100);
+}
+
+function march() {
+  offset++;
+  if (offset &gt; 16) {
+    offset = 0;
+  }
+  draw();
+  setTimeout(march, 20);
+}
+
+march();</pre>
+
+<p>{{EmbedLiveSample("Using_line_dashes", "120", "120", "https://mdn.mozillademos.org/files/9853/marching-ants.png")}}</p>
+
+<h2 id="Gradients" name="Gradients">Gradienten</h2>
+
+<p class="Normal">Wie in jedem anderen Zeichenprogramm können wir auch im Canvas linien- und kreisförmige Verläufe zum Zeichnen und Füllen von Formen verwenden. Mit den folgenden Befehlen können wir ein {{domxref("CanvasGradient")}}-Objekt erzeugen; dieses ordnen wir dann einer <code>fillStyle</code>- oder <code>strokeStyle</code>-Eigenschaft zu.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.createLinearGradient", "createLinearGradient(x1, y1, x2, y2)")}}</dt>
+ <dd>
+ <p class="Normal">Erzeugt eine lineares Verlaufsobjekt mit Startpunkt (<code>x1</code>, <code>y1</code>) und Zielpunkt (<code>x2</code>, <code>y2</code>).</p>
+ </dd>
+ <dt>{{domxref("CanvasRenderingContext2D.createRadialGradient", "createRadialGradient(x1, y1, r1, x2, y2, r2)")}}</dt>
+ <dd>
+ <p class="Normal">Erzeugt einen kreisförmige Verlauf. Die Parameter beschreiben zwei Kreise, der erste mit dem Mittelpunkt bei (<code>x1</code>, <code>y1</code>) und einem Radius von <code>r1</code>, der zweite mit Mittelpunkt (<code>x2</code>, <code>y2</code>) und demRadius <code>r2</code>.</p>
+ </dd>
+</dl>
+
+<p>For example:</p>
+
+<pre class="brush: js">var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
+var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);
+</pre>
+
+<p class="Normal">Sobald wir ein <code>canvasGradient</code>-Objekt erzeugt haben, können wir mit der Methode <code>addColorStop()</code> Farben zuordnen.</p>
+
+<dl>
+ <dt>{{domxref("CanvasGradient.addColorStop", "gradient.addColorStop(position, color)")}}</dt>
+ <dd>
+ <p class="Normal">Erzeugt einen neuen Farbwert am Verlaufsobjekt. Das Positionsargument ist eine Zahl zwischen 0.0 und 1.0, und es definiert die relative Position der Farbe innerhalb der Verlaufsstrecke. Das Farbargument ist eine Zeichenkette für eine CSS {{cssxref("&lt;color&gt;")}} und beschreibt den Farbwert, den der Farbverlauf bis zur angegebenen Position erreicht hat.</p>
+ </dd>
+</dl>
+
+<p class="Normal">Die Anzahl der Farbschritte ist beliebig. Es folgt ein Beispiel für einen einfachen Verlauf von Weiss nach Schwarz.</p>
+
+<pre class="brush: js">var lineargradient = ctx.createLinearGradient(0,0,150,150);
+lineargradient.addColorStop(0, 'white');
+lineargradient.addColorStop(1, 'black');
+</pre>
+
+<h3 id="A_createLinearGradient_example" name="A_createLinearGradient_example">Beispiel für <code>createLinearGradient</code></h3>
+
+<p class="Normal">In diesem Beispiel erzeugen wir zwei unterschiedliche Verläufe. Wie Sie sehen, akzeptieren sowohl <code>strokeStyle</code> als auch <code>fillStyle</code> ein <code>canvasGradient</code>-Objekt als Eingabe.</p>
+
+<p> </p>
+
+<pre class="brush: js;highlight[5,11]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Create gradients
+  var lingrad = ctx.createLinearGradient(0,0,0,150);
+  lingrad.addColorStop(0, '#00ABEB');
+  lingrad.addColorStop(0.5, '#fff');
+  lingrad.addColorStop(0.5, '#26C000');
+  lingrad.addColorStop(1, '#fff');
+
+  var lingrad2 = ctx.createLinearGradient(0,50,0,95);
+  lingrad2.addColorStop(0.5, '#000');
+  lingrad2.addColorStop(1, 'rgba(0,0,0,0)');
+
+  // assign gradients to fill and stroke styles
+  ctx.fillStyle = lingrad;
+  ctx.strokeStyle = lingrad2;
+
+  // draw shapes
+  ctx.fillRect(10,10,130,130);
+  ctx.strokeRect(50,50,50,50);
+
+}
+</pre>
+
+<p> </p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p class="Normal">Der erste Teil beschreibt den Hintergrundverlauf. Wie Sie sehen, haben wir an der gleichen Position zwei unterschiedliche Farben definiert. Das dient zur Erzeugung sprunghafter Farbänderungen - hier von weiss nach grün. Üblicherweise spielt es keine Rolle in welcher Reihenfolge die Farbstufen definiert werden, in diesem speziellen Fall ist die Reihenfolge aber wichtig. Nehmen Sie die Zuordnungen am besten in der tatsächlichen Reihenfolge vor, so beugen Sie möglichen Problemen vor.</p>
+
+<p class="Normal">Beim zweiten Verlauf haben wir an der Startposition (0,0) keinen Farbwert definiert, was auch nicht unbedingt nötig ist, weil dann automatisch die Farbe der nächsten Farbstufe verwendet wird. Daher bewirkt die Zuordnung der Farbstufe „schwarz“ an der Position 0.5 automatisch eine einheitliche Schwarzfärbung vom Start Null bis zur Position 0.5.</p>
+
+<p>{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "https://mdn.mozillademos.org/files/235/Canvas_lineargradient.png")}}</p>
+
+<h3 id="A_createRadialGradient_example" name="A_createRadialGradient_example">Beispiel für <code>createRadialGradient</code></h3>
+
+<p class="Normal">In diesem Beispiel werden wir vier kreisförmige Verläufe definieren. Weil wir volle Kontrolle über die Start- und Zielpunkte der Verläufe haben, können wir komplexere Verläufe erzeugen als z.B. die einfacheren Radialverläufe in Photoshop, die uns nur Verläufe mit einem gemeinsamen Mittelpunkt und radial gleichmäßig verteilten Farben erlauben würden.</p>
+
+<pre class="brush: js;highlight[5,10,15,20]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Create gradients
+  var radgrad = ctx.createRadialGradient(45,45,10,52,50,30);
+  radgrad.addColorStop(0, '#A7D30C');
+  radgrad.addColorStop(0.9, '#019F62');
+  radgrad.addColorStop(1, 'rgba(1,159,98,0)');
+
+  var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50);
+  radgrad2.addColorStop(0, '#FF5F98');
+  radgrad2.addColorStop(0.75, '#FF0188');
+  radgrad2.addColorStop(1, 'rgba(255,1,136,0)');
+
+  var radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40);
+  radgrad3.addColorStop(0, '#00C9FF');
+  radgrad3.addColorStop(0.8, '#00B5E2');
+  radgrad3.addColorStop(1, 'rgba(0,201,255,0)');
+
+  var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);
+  radgrad4.addColorStop(0, '#F4F201');
+  radgrad4.addColorStop(0.8, '#E4C700');
+  radgrad4.addColorStop(1, 'rgba(228,199,0,0)');
+
+  // draw shapes
+  ctx.fillStyle = radgrad4;
+  ctx.fillRect(0,0,150,150);
+  ctx.fillStyle = radgrad3;
+  ctx.fillRect(0,0,150,150);
+  ctx.fillStyle = radgrad2;
+  ctx.fillRect(0,0,150,150);
+  ctx.fillStyle = radgrad;
+  ctx.fillRect(0,0,150,150);
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p class="Normal">Wir haben die Mittelpunkte von Start- und Zielkreis etwas gegeneinander versetzt, was einen kugelförmigen 3D-Effekt erzeugt. Man sollte vermeiden, dass sich die Begrenzungen des inneren und des äußeren Kreises schneiden, weil das unberechenbare Effekte erzeugen kann.</p>
+
+<p class="Normal">Die letzte Farbstufe in jedem der vier Verläufe verwendet eine völlig transparente Farbe. Für einen gelungenen Übergang zur vorhergehenden Stufe sollten die Farbwerte identisch sein. Das ist im obigen Programm nicht gleich erkennbar, weil unterscheidliche Schreibweisen für die Farbwerte verwendet wurden. Berücksichtigen Sie, dass z.B. beim ersten Farbverlauf <code>#019F62</code> auch als <code>rgba(1,159,98,1)</code> geschrieben werden könnte.</p>
+
+<p>{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "https://mdn.mozillademos.org/files/244/Canvas_radialgradient.png")}}</p>
+
+<h2 id="Patterns" name="Patterns">Muster</h2>
+
+<p class="Normal">In einem der Beispiele auf der vorhergehenden Seite haben wir mehrere Schleifen verwendet, um Bilder in Form eines Musters anzuordnen. Allerdings gibt es auch eine weit einfachere Methode: <code>createPattern()</code></p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}</dt>
+ <dd>
+ <p class="Normal">Erzeugt ein neues Muster-Objekt in Canvas und gibt es zurück. <code>image</code> ist eine {{domxref("CanvasImageSource")}} (ein {{domxref("HTMLImageElement")}}, ein weiterer Canvas, ein {{HTMLElement("video")}} Element, oder ähnliches). Der String <code>image</code> gibt an wie das Bild benutzt wird.</p>
+ </dd>
+</dl>
+
+<p class="Normal"><code>type</code> enthält eine der folgenden Zeichenketten und bestimmt, wie aus dem Bild ein Muster erzeugt wird.</p>
+
+<dl>
+ <dt><code>repeat</code></dt>
+ <dd>
+ <p class="Normal">Wiederhole („kachle“) das Bild horizontal und vertikal.</p>
+ </dd>
+ <dt><code>repeat-x</code></dt>
+ <dd>
+ <p class="Normal">Wiederhole das Bild nur horizontal.</p>
+ </dd>
+ <dt><code>repeat-y</code></dt>
+ <dd>
+ <p class="Normal">Nur vertikale Wiederholung.</p>
+ </dd>
+ <dt><code>no-repeat</code></dt>
+ <dd>
+ <p class="Normal">Keine Wiederholung, das Bild wird nur einmal benutzt.</p>
+ </dd>
+</dl>
+
+<p> </p>
+
+<p class="Normal">Wir verwenden eine Methode ähnlich den vorhergehenden Beispielen zu Verläufen, um ein {{domxref("CanvasPattern")}}-Objekt zu erzeugen. Haben wir das Muster erst erzeugt, können wir es einer <code>fillStyle</code>- oder <code>strokeStyle</code>-Eigenschaft zuordnen.</p>
+
+<pre class="brush: js">var img = new Image();
+img.src = 'someimage.png';
+var ptrn = ctx.createPattern(img,'repeat');
+</pre>
+
+<p> </p>
+
+<div class="note">
+<p class="Normal"><strong>Anmerkung:</strong> Wie bei <code>drawImage()</code> müssen Sie auch hier sicherstellen, dass das Bild vollständig geladen wurde bevor Sie die Methode aufrufen; andernfalls kann das Muster inkorrekt dargestellt werden.</p>
+</div>
+
+<h3 id="A_createPattern_example" name="A_createPattern_example">Beispiel für <code>createPattern</code></h3>
+
+<p class="Normal">Im abschließenden Beispiel erzeugen wir ein Muster um es dann dem <code>fillStyle</code> zuzuordnen. Bemerkenswert ist hierbei die Verwendung des <code>onload()</code>-Handlers, um zu gewährleisten, dass die Bilddatei erst dann dem Muster zugeordnet wird, wenn sie vollständig geladen wurde.</p>
+
+<pre class="brush: js;highlight[10]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // create new image object to use as pattern
+  var img = new Image();
+  img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
+  img.onload = function(){
+
+    // create pattern
+    var ptrn = ctx.createPattern(img,'repeat');
+    ctx.fillStyle = ptrn;
+    ctx.fillRect(0,0,150,150);
+
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+
+<p>The result looks like this:</p>
+</div>
+
+<p>{{EmbedLiveSample("A_createPattern_example", "180", "180", "https://mdn.mozillademos.org/files/222/Canvas_createpattern.png")}}</p>
+
+<h2 id="Schatten">Schatten</h2>
+
+<p class="Normal">An der Erzeugung von Schatten sind vier Eignschaften beteiligt:</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX = float")}}</dt>
+ <dd>
+ <p class="Normal">Definiert die horizontale Ausdehnung des Schattens vom Objekt weg. Dieser Wert wird nicht durch die Transforamtionsmatrix beeinflusst. Standardwert ist 0.</p>
+ </dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY = float")}}</dt>
+ <dd>
+ <p class="Normal">Wie <code>shadowOffsetY</code>, aber in vertikaler Richtung.</p>
+ </dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur = float")}}</dt>
+ <dd>
+ <p class="Normal">Definiert das Ausmaß der Unschärfe; der Wert beschreibt dabei nicht eine bestimmte Anzahl von Pixeln. Er wird nicht durch die Transformationsmatrix beeinflusst. Standardwert ist 0.</p>
+ </dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}}</dt>
+ <dd>
+ <p class="Normal">Eine CSS Farbdefinition der Schattenfarbe. Standardwert ist voll tranparentes Schwarz.</p>
+ </dd>
+</dl>
+
+<p class="Normal">Die Eigenschaften <code>shadowOffsetX</code> und <code>shadowOffsetY</code> bestimmen wie weit weg vom Objekt sich der Schatten in x- und y-Richtung erstrecken soll; diese Werte werden nicht von der aktuellen Tranformationsmatrix beeinflusst. Mit negative Werten verläuft der Schatten nach links und oben, mit positiven nach rechts und unten. Standardwert für beide Parameter ist 0.</p>
+
+<p class="Normal">Die Eigenschaft <code>shadowBlur</code> definiert die Ausdehnung der Unschärfezone; der Wert beschreibt dabei keine bestimmte Anzahl von Pixeln und wird durch die Transformationsmatrix nicht verändert. Standardwert: 0.</p>
+
+<p class="Normal">Die Eigenschaft <code>shadowColor</code> ist ein regulärer CSS-Farbwert, der die Farbe des Schatteneffektes definiert. Standardwert: voll-transparentes Schwarz.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Schatten werden nur bei <code>source-over</code> <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Web/Guide/HTML/Canvas_tutorial/Compositing">compositing operations</a> gezeichnet.</p>
+</div>
+
+<h3 id="Beispiel_für_Text_mit_Schatteneffekt">Beispiel für Text mit Schatteneffekt</h3>
+
+<p class="Normal">Dieses Beispiel zeichnet eine Buchstabenfolge mit einem Schatteneffekt.</p>
+
+<pre class="brush: js;highlight[4,5,6,7]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.shadowOffsetX = 2;
+  ctx.shadowOffsetY = 2;
+  ctx.shadowBlur = 2;
+  ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
+
+  ctx.font = "20px Times New Roman";
+  ctx.fillStyle = "Black";
+  ctx.fillText("Sample String", 5, 30);
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="80"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "https://mdn.mozillademos.org/files/2505/shadowed-string.png")}}</p>
+
+<p>Wir werden uns die <code>font</code>-Eigenschaft und die <code>fillText</code>-Methode im nächsten Kapitel über das <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text">Zeichnen von Text</a> genauer ansehen.</p>
+
+<h2 id="Canvas_Füllregeln">Canvas Füllregeln</h2>
+
+<p class="Normal">Bei der Verwendung von <code>fill</code> ( oder {{domxref("CanvasRenderingContext2D.clip", "clip")}} und {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) kann man wahlweise eine Füllregel angeben, mit der man über die Berechnung der Windungszahl bestimmt ob ein Punkt innerhalb oder ausserhalb der Strecke liegt und ob die Fläche dementsprechend gefüllt wird oder nicht. Das ist nützlich wenn eine Strecke sich selbst schneidet oder in eine andere eingeschrieben ist.</p>
+
+<p>Zwei Werte sind möglich:</p>
+
+<ul>
+ <li><code><strong>"nonzero</strong></code>": Die <a class="external external-icon" href="http://en.wikipedia.org/wiki/Nonzero-rule">non-zero winding rule</a>, der Standardwert.</li>
+ <li><code><strong>"evenodd"</strong></code>: Die <a class="external external-icon" href="http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule">even-odd rule</a>.</li>
+</ul>
+
+<p>In diesem  Beispiel verwenden wir die <code>evenodd</code>-Regel.</p>
+
+<pre class="brush: js;highlight[6]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.beginPath();
+  ctx.arc(50, 50, 30, 0, Math.PI*2, true);
+  ctx.arc(50, 50, 15, 0, Math.PI*2, true);
+  ctx.fill("evenodd");
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="100" height="100"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "https://mdn.mozillademos.org/files/9855/fill-rule.png")}}</p>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}</p>
diff --git a/files/de/web/guide/html/canvas_tutorial/basic_animations/index.html b/files/de/web/guide/html/canvas_tutorial/basic_animations/index.html
new file mode 100644
index 0000000000..78ca0ac2fc
--- /dev/null
+++ b/files/de/web/guide/html/canvas_tutorial/basic_animations/index.html
@@ -0,0 +1,307 @@
+---
+title: Einfache Animationen
+slug: Web/Guide/HTML/Canvas_Tutorial/Basic_animations
+translation_of: Web/API/Canvas_API/Tutorial/Basic_animations
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}</div>
+
+<div class="summary">
+<p>Seitdem wir JavaScript benutzen, um {{HTMLElement("canvas")}}-Elemente zu steuern, ist es auch sehr einfach, interaktive Animationen zu erzeugen. In diesem Kapitel werden wir uns ein paar einfachen Animationen widmen.</p>
+</div>
+
+<p>Die wahrscheinlich größte Einschränkung ist, dass jede Form, die einmal gezeichnet wird, genauso bleibt wie anfänglich. Wenn wir sie bewegen wollen, müssen wir sie neuzeichnen. Aber: Auch alle anderen Formen, die wir davor schon gezeichnet haben, müssen auch neu gezeichnet werden! Es beansprucht leider einiges an Zeit, komplexe Figuren neu zu zeichnen.</p>
+
+<h2 id="Basic_animation_steps" name="Basic_animation_steps">Grundlagen der Animation</h2>
+
+<p>Diese Schritte müssen Sie befolgen, um ein neues Frame zu zeichnen:</p>
+
+<ol>
+ <li><strong>Bereinigen Sie die Zeichenfläche <em>(canvas)</em></strong><br>
+  Sofern die Form, die Sie zeichnen wollen, nicht den gesamten Platz der Zeichenfläche einnimmt, müssen Sie alle vorherigen Formen entfernen. Am einfachsten erreichen Sie dies über die {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}-Methode.</li>
+ <li><strong>Sichern Sie den Canvas-Zustand</strong><br>
+  Wenn Sie irgendeine Einstellung verändern (wie das Layout, Transformtationen, etc.), die den Status der Zeichenfläche beeinflussen, sollten Sie den Ursprungszustand sichern. Nur so gewährleisten Sie, dass der Ursprungszustand für jedes neue Frame verwendet wird. Verwenden Sie hierfür die <code>save()</code>-Methode.</li>
+ <li><strong>Zeichnen Sie die animierte Form</strong><br>
+  Hier erzeugen Sie nun endlich die eigentliche Animation.</li>
+ <li><strong>Setzen Sie den Canvas-Zustand zurück.</strong><br>
+  Mit der <code>restore()</code>-Methode können Sie auf den Ursprungszustand zurückwechseln, um ein neues Frame zu erzeugen.</li>
+</ol>
+
+<h2 id="Controlling_an_animation" name="Controlling_an_animation">Steuerung einer Animation</h2>
+
+<p>Formen werden auf eine Zeichenfläche appliziert, indem die entsprechende Canvas-Methode verwendet wird oder eine vorher erzeugte Funktion aufgerufen wird. Im Normalfall erscheint die Canvas-Zeichnung erst, nachdem das Skript vollständig ausgeführt wurde. So ist es nicht möglich, eine Animation durch eine <code>for</code>-Schleife zu erzeugen.</p>
+
+<p>Das bedeutet nun, dass wir einen Weg finden müssen, die Zeichenfunktion für eine bestimmte Zeitdauer ausführen zu können. Dafür gibt es nun zwei Wege, um eine Animation so zu steuern:</p>
+
+<h3 id="Updates_nach_Zeitplan">Updates nach Zeitplan</h3>
+
+<p>Einerseits gibt es die {{domxref("window.setInterval()")}}-, {{domxref("window.setTimeout()")}}- und {{domxref("window.requestAnimationFrame()")}}-Funktionen, die benutzt werden, um eine bestimmte Funktion nach einer Zeitspanne aufzurufen.</p>
+
+<dl>
+ <dt>{{domxref("WindowTimers.setInterval", "setInterval(function, delay)")}}</dt>
+ <dd>Ruft die unter <code>function</code> spezifierte Funktion wiederholend nach der in <code>delay</code> (Milisekunden) definierten Zeitspanne auf.</dd>
+ <dt>{{domxref("WindowTimers.setTimeout", "setTimeout(function, delay)")}}</dt>
+ <dd>Ruft die spezifizierte Funktion nach der unter <code>delay</code> festgelegten Zeitspanne einmalig auf.</dd>
+ <dt>{{domxref("Window.requestAnimationFrame()", "requestAnimationFrame(callback)")}}</dt>
+ <dd>Tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint.</dd>
+</dl>
+
+<p>If you don't want any user interaction you can use the <code>setInterval()</code> function which repeatedly executes the supplied code. If we wanted to make a game, we could use keyboard or mouse events to control the animation and use <code>setTimeout()</code>. By setting {{domxref("EventListener")}}s, we catch any user interaction and execute our animation functions.</p>
+
+<div class="note">
+<p>In the examples below, we'll use the {{domxref("window.requestAnimationFrame()")}} method to control the animation. The <code>requestAnimationFrame</code> method provides a smoother and more efficient way for animating by calling the animation frame when the system is ready to paint the frame. The number of callbacks is usually 60 times per second and may be reduced to a lower rate when running in background tabs. For more information about the animation loop, especially for games, see the article <a href="/en-US/docs/Games/Anatomy">Anatomy of a video game</a> in our <a href="/en-US/docs/Games">Game development zone</a>.</p>
+</div>
+
+<h2 id="An_animated_solar_system">An animated solar system</h2>
+
+<p>This example animates a small model of our solar system.</p>
+
+<pre class="brush: js">var sun = new Image();
+var moon = new Image();
+var earth = new Image();
+function init() {
+  sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
+  moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
+  earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
+  window.requestAnimationFrame(draw);
+}
+
+function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.globalCompositeOperation = 'destination-over';
+  ctx.clearRect(0, 0, 300, 300); // clear canvas
+
+  ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';
+  ctx.strokeStyle = 'rgba(0, 153, 255, 0.4)';
+  ctx.save();
+  ctx.translate(150, 150);
+
+  // Earth
+  var time = new Date();
+  ctx.rotate(((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * time.getMilliseconds());
+  ctx.translate(105, 0);
+  ctx.fillRect(0, -12, 50, 24); // Shadow
+  ctx.drawImage(earth, -12, -12);
+
+  // Moon
+  ctx.save();
+  ctx.rotate(((2 * Math.PI) / 6) * time.getSeconds() + ((2 * Math.PI) / 6000) * time.getMilliseconds());
+  ctx.translate(0, 28.5);
+  ctx.drawImage(moon, -3.5, -3.5);
+  ctx.restore();
+
+  ctx.restore();
+
+  ctx.beginPath();
+  ctx.arc(150, 150, 105, 0, Math.PI * 2, false); // Earth orbit
+  ctx.stroke();
+
+  ctx.drawImage(sun, 0, 0, 300, 300);
+
+  window.requestAnimationFrame(draw);
+}
+
+init();
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("An_animated_solar_system", "310", "310", "https://mdn.mozillademos.org/files/202/Canvas_animation1.png")}}</p>
+
+<h2 id="An_animated_clock">An animated clock</h2>
+
+<p>This example draws an animated clock, showing your current time.</p>
+
+<pre class="brush: js">function clock() {
+  var now = new Date();
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.save();
+  ctx.clearRect(0, 0, 150, 150);
+  ctx.translate(75, 75);
+  ctx.scale(0.4, 0.4);
+  ctx.rotate(-Math.PI / 2);
+  ctx.strokeStyle = 'black';
+  ctx.fillStyle = 'white';
+  ctx.lineWidth = 8;
+  ctx.lineCap = 'round';
+
+  // Hour marks
+  ctx.save();
+  for (var i = 0; i &lt; 12; i++) {
+    ctx.beginPath();
+    ctx.rotate(Math.PI / 6);
+    ctx.moveTo(100, 0);
+    ctx.lineTo(120, 0);
+    ctx.stroke();
+  }
+  ctx.restore();
+
+  // Minute marks
+  ctx.save();
+  ctx.lineWidth = 5;
+  for (i = 0; i &lt; 60; i++) {
+    if (i % 5!= 0) {
+      ctx.beginPath();
+      ctx.moveTo(117, 0);
+      ctx.lineTo(120, 0);
+      ctx.stroke();
+    }
+    ctx.rotate(Math.PI / 30);
+  }
+  ctx.restore();
+
+  var sec = now.getSeconds();
+  var min = now.getMinutes();
+  var hr  = now.getHours();
+  hr = hr &gt;= 12 ? hr - 12 : hr;
+
+  ctx.fillStyle = 'black';
+
+  // write Hours
+  ctx.save();
+  ctx.rotate(hr * (Math.PI / 6) + (Math.PI / 360) * min + (Math.PI / 21600) *sec);
+  ctx.lineWidth = 14;
+  ctx.beginPath();
+  ctx.moveTo(-20, 0);
+  ctx.lineTo(80, 0);
+  ctx.stroke();
+  ctx.restore();
+
+  // write Minutes
+  ctx.save();
+  ctx.rotate((Math.PI / 30) * min + (Math.PI / 1800) * sec);
+  ctx.lineWidth = 10;
+  ctx.beginPath();
+  ctx.moveTo(-28, 0);
+  ctx.lineTo(112, 0);
+  ctx.stroke();
+  ctx.restore();
+
+  // Write seconds
+  ctx.save();
+  ctx.rotate(sec * Math.PI / 30);
+  ctx.strokeStyle = '#D40000';
+  ctx.fillStyle = '#D40000';
+  ctx.lineWidth = 6;
+  ctx.beginPath();
+  ctx.moveTo(-30, 0);
+  ctx.lineTo(83, 0);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.arc(0, 0, 10, 0, Math.PI * 2, true);
+  ctx.fill();
+  ctx.beginPath();
+  ctx.arc(95, 0, 10, 0, Math.PI * 2, true);
+  ctx.stroke();
+  ctx.fillStyle = 'rgba(0, 0, 0, 0)';
+  ctx.arc(0, 0, 3, 0, Math.PI * 2, true);
+  ctx.fill();
+  ctx.restore();
+
+  ctx.beginPath();
+  ctx.lineWidth = 14;
+  ctx.strokeStyle = '#325FA2';
+  ctx.arc(0, 0, 142, 0, Math.PI * 2, true);
+  ctx.stroke();
+
+  ctx.restore();
+
+  window.requestAnimationFrame(clock);
+}
+
+window.requestAnimationFrame(clock);</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("An_animated_clock", "180", "180", "https://mdn.mozillademos.org/files/203/Canvas_animation2.png")}}</p>
+
+<h2 id="A_looping_panorama">A looping panorama</h2>
+
+<p>In this example, a panorama is scrolled left-to-right. We're using <a href="http://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_National_Park.jpg" title="http://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_National_Park.jpg">an image of Yosemite National Park</a> we took from Wikipedia, but you could use any image that's larger than the canvas.</p>
+
+<pre class="brush: js">var img = new Image();
+
+// User Variables - customize these to change the image being scrolled, its
+// direction, and the speed.
+
+img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg';
+var CanvasXSize = 800;
+var CanvasYSize = 200;
+var speed = 30; // lower is faster
+var scale = 1.05;
+var y = -4.5; // vertical offset
+
+// Main program
+
+var dx = 0.75;
+var imgW;
+var imgH;
+var x = 0;
+var clearX;
+var clearY;
+var ctx;
+
+img.onload = function() {
+    imgW = img.width * scale;
+    imgH = img.height * scale;
+
+    if (imgW &gt; CanvasXSize) { x = CanvasXSize - imgW; } // image larger than canvas
+    if (imgW &gt; CanvasXSize) { clearX = imgW; } // image width larger than canvas
+    else { clearX = CanvasXSize; }
+    if (imgH &gt; CanvasYSize) { clearY = imgH; } // image height larger than canvas
+    else { clearY = CanvasYSize; }
+
+    // get canvas context
+    ctx = document.getElementById('canvas').getContext('2d');
+
+    // set refresh rate
+    return setInterval(draw, speed);
+}
+
+function draw() {
+    ctx.clearRect(0, 0, clearX, clearY); // clear the canvas
+
+    // if image is &lt;= Canvas Size
+    if (imgW &lt;= CanvasXSize) {
+        // reset, start from beginning
+        if (x &gt; CanvasXSize) { x = -imgW + x; }
+        // draw additional image1
+        if (x &gt; 0) { ctx.drawImage(img, -imgW + x, y, imgW, imgH); }
+        // draw additional image2
+        if (x - imgW &gt; 0) { ctx.drawImage(img, -imgW * 2 + x, y, imgW, imgH); }
+    }
+
+    // if image is &gt; Canvas Size
+    else {
+        // reset, start from beginning
+        if (x &gt; (CanvasXSize)) { x = CanvasXSize - imgW; }
+        // draw aditional image
+        if (x &gt; (CanvasXSize-imgW)) { ctx.drawImage(img, x - imgW + 1, y, imgW, imgH); }
+    }
+    // draw image
+    ctx.drawImage(img, x, y,imgW, imgH);
+    // amount to move
+    x += dx;
+}
+</pre>
+
+<p>Below is the {{HTMLElement("canvas")}} in which the image is scrolled. Note that the width and height specified here must match the values of the <code>CanvasXZSize</code> and <code>CanvasYSize</code> variables in the JavaScript code.</p>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="800" height="200"&gt;&lt;/canvas&gt;</pre>
+
+<p>{{EmbedLiveSample("A_looping_panorama", "830", "230")}}</p>
+
+<h2 id="Other_examples" name="Other_examples">Other examples</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster" title="/en-US/docs/Web/Guide/HTML/A_basic_ray-caster">A basic ray-caster</a></dt>
+ <dd>A good example of how to do animations using keyboard controls.</dd>
+ <dt><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Advanced_animations">Advanced animations</a></dt>
+ <dd>We will have a look at some advanced animation techniques and physics in the next chapter.</dd>
+</dl>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}</p>
diff --git a/files/de/web/guide/html/canvas_tutorial/bilder/index.html b/files/de/web/guide/html/canvas_tutorial/bilder/index.html
new file mode 100644
index 0000000000..b636807f97
--- /dev/null
+++ b/files/de/web/guide/html/canvas_tutorial/bilder/index.html
@@ -0,0 +1,324 @@
+---
+title: Bilder
+slug: Web/Guide/HTML/Canvas_Tutorial/Bilder
+translation_of: Web/API/Canvas_API/Tutorial/Using_images
+---
+<p>{{CanvasSidebar}}</p>
+
+<p>Natürlich können auch Bilder gezeichnet werden. Diese können die unterschiedlichsten Formate haben: PNG, GIF, JPEG oder bestimmte HTML Elemente.</p>
+
+<p>Um Bilder zu importieren bedarf es bloß zwei Schritte:</p>
+
+<ol>
+ <li>Ein {{domxref("HTMLImageElement")}} Objekt erzeugen oder das HTML Element selektieren.</li>
+ <li>Das Bild mithilfe der <code>drawImage()</code> Funktion zeichnen.</li>
+</ol>
+
+<h2 id="Bilder_importieren">Bilder importieren</h2>
+
+<p>Die canvas API unterstützt folgende Typen als Bilder:</p>
+
+<dl>
+ <dt>{{domxref("HTMLImageElement")}}</dt>
+ <dd>Diese Bilder können mithilfe des <code>Image()</code> Konstruktor oder mithilfe eines {{HTMLElement("img")}} Element erstellt werden.</dd>
+ <dt>{{domxref("HTMLVideoElement")}}</dt>
+ <dd>Der aktuelle Frame des {{HTMLElement("video")}} Element wird als Bild genutzt.</dd>
+ <dt>{{domxref("HTMLCanvasElement")}}</dt>
+ <dd>Ein anderes {{HTMLElement("canvas")}} Element kann ebenfalls als Bild dienen.</dd>
+ <dt>{{domxref("ImageBitmap")}}</dt>
+ <dd>Eine hochleistungsfähige Bitmap, welche mit niedriger Verzögerung gerendert werden kann. Sie lässt sich aus allen der oben genannten Quellen, sowie aus mehreren weitern erstellen.</dd>
+</dl>
+
+<p>These sources are collectively referred to by the type {{domxref("CanvasImageSource")}}.</p>
+
+<p>There are several ways to get images for use on a canvas.</p>
+
+<h3 id="Bilder_von_derselben_Seite">Bilder von derselben Seite</h3>
+
+<p>Um Bilder von derselben Seite zu bekommen, können diese Methoden genutzt werden:</p>
+
+<ul>
+ <li>Die {{domxref("document.images")}} Sammlung</li>
+ <li>Die {{domxref("document.getElementsByTagName()")}} Methode</li>
+ <li>Die {{domxref("document.getElementById()")}} Methode, wenn eine Id festgelegt worden ist</li>
+</ul>
+
+<h3 id="Bilder_von_anderen_Seiten_nutzen">Bilder von anderen Seiten nutzen</h3>
+
+<p>Mithilfe des {{htmlattrxref("crossorigin", "img")}} Attributs eines {{domxref("HTMLImageElement")}} ist es möglich die Erlaubnis zur Benutzung eines Bildes von einer anderen Domain zu nutzen. Wenn die Domain jenen Zugriff gestattet, kann das Image genutzt werden und das Bild wird wie gewollt angezeigt; andernfalls entsteht ein <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image#What_is_a_.22tainted.22_canvas.3F">"getaintes Canvas"</a>.</p>
+
+<h3 id="Andere_Canvas_Elemente_benutzen">Andere Canvas Elemente benutzen</h3>
+
+<p>Genau wie normalen Bildern auch, können wir ein anderes Canvas durch {{domxref("document.getElementsByTagName()")}} oder {{domxref("document.getElementById()")}} ansprechen.</p>
+
+<p>Sei dabei sicher, dass du auf deinem Canvas etwas gezeichnet hast, bevor du es im Zielcanvas verwendest.</p>
+
+<p>Eine sinnvoller Einsatz ist zum Beispiel das zweite Canvas als Vorschaubild (Thumbnail) des ersten zu verwenden.</p>
+
+<h3 id="Ein_Bild_von_Grund_auf">Ein Bild von Grund auf</h3>
+
+<p>Eine andere Option ist ein neues {{domxref("HTMLImageElement")}} in JavaScript zu erstellen. Um das zu tun, können wir den <code>Image()</code>-Konstruktor verwenden:</p>
+
+<pre class="brush: js"><code>var img = new Image(); // Erstelle neues Image-Objekt
+img.src = 'myImage.png'; // Setze den Pfad zum Bild</code></pre>
+
+<p>Wird dieses Skript ausgeführt, fängt das Bild an zu laden.</p>
+
+<div class="note">
+<p><strong>Achtung</strong>: Wenn <code>drawImage()</code> vor dem Laden des Bildes ausgeführt wird, wird nichts passieren (In älteren Browsern kann es eine Fehlermeldung geben). Um jenen Fehler zu vermeiden, muss also sichergestellt werden, dass das load-Event benutzt wird.</p>
+</div>
+
+<pre class="brush: js"><code>var img = new Image();   // Erstelle neues Image-Objekt
+img.addEventListener("load", function() {
+  // füge hier den drawImage()-Befehl ein
+}, false);
+img.src = 'myImage.png'; // Setze den Pfad zum Bild
+</code></pre>
+
+<p>Wenn nur ein externes Bild geladen werden muss, ist das eine gute Möglichkeit. Wenn jedoch mehrere Bilder benötigt werden, sollte es besser anders gelöst werden. Es ist nicht das Ziel deises Tutorials auf das Vorladen von Bildern einzugehen, aber für eine komplette Lösung kannst du dir <a href="http://www.webreference.com/programming/javascript/gr/column3/">JavaScript Image Preloader</a> angucken (ist leder auf Englisch).</p>
+
+<h3 id="Embedding_an_image_via_data_URL">Embedding an image via data: URL</h3>
+
+<p>Another possible way to include images is via the <a class="external" href="/en-US/docs/data_URIs" rel="external" title="http://en.wikipedia.org/wiki/Data:_URL">data: url</a>. Data URLs allow you to completely define an image as a Base64 encoded string of characters directly in your code.</p>
+
+<pre class="brush: js">var img_src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
+</pre>
+
+<p>One advantage of data URLs is that the resulting image is available immediately without another round trip to the server. Another potential advantage is that it is also possible to encapsulate in one file all of your <a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a>, <a href="/en-US/docs/Web/JavaScript" title="/en-US/docs/Web/JavaScript">JavaScript</a>, <a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a>, and images, making it more portable to other locations.</p>
+
+<p>Some disadvantages of this method are that your image is not cached, and for larger images the encoded url can become quite long.</p>
+
+<h3 id="Using_frames_from_a_video">Using frames from a video</h3>
+
+<p>You can also use frames from a video being presented by a {{HTMLElement("video")}} element (even if the video is not visible). For example, if you have a {{HTMLElement("video")}} element with the ID "myvideo", you can do this:</p>
+
+<pre class="brush: js">function getMyVideo() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    return document.getElementById('myvideo');
+  }
+}
+</pre>
+
+<p>This returns the {{domxref("HTMLVideoElement")}} object for the video, which, as covered earlier, is one of the objects that can be used as a <code>CanvasImageSource</code>.</p>
+
+<h2 id="Drawing_images">Drawing images</h2>
+
+<p>Once we have a reference to our source image object we can use the <code>drawImage()</code> method to render it to the canvas. As we will see later the <code>drawImage()</code> method is overloaded and has several variants. In its most basic form it looks like this:</p>
+
+<dl>
+ <dt><code>drawImage(<em>image</em>, <em>x</em>, <em>y</em>)</code></dt>
+ <dd>Draws the <code>CanvasImageSource</code> specified by the <code>image</code> parameter at the coordinates (<code>x</code>, <code>y</code>).</dd>
+</dl>
+
+<h3 id="Example_A_simple_line_graph">Example: A simple line graph</h3>
+
+<p>In the following example, we will use an external image as the backdrop for a small line graph. Using backdrops can make your script considerably smaller because we can avoid the need for code to generate the background. In this example, we're only using one image, so I use the image object's <code>load</code> event handler to execute the drawing statements. The <code>drawImage()</code> method places the backdrop at the coordinate (0, 0), which is the top-left corner of the canvas.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="180" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var img = new Image();
+  img.onload = function(){
+    ctx.drawImage(img,0,0);
+    ctx.beginPath();
+    ctx.moveTo(30,96);
+    ctx.lineTo(70,66);
+    ctx.lineTo(103,76);
+    ctx.lineTo(170,15);
+    ctx.stroke();
+  };
+  img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';
+}</pre>
+
+<p>The resulting graph looks like this:</p>
+
+<p>{{EmbedLiveSample("Example_A_simple_line_graph", 220, 160, "https://mdn.mozillademos.org/files/206/Canvas_backdrop.png")}}</p>
+
+<h2 id="Scaling">Scaling</h2>
+
+<p>The second variant of the <code>drawImage()</code> method adds two new parameters and lets us place scaled images on the canvas.</p>
+
+<dl>
+ <dt><code>drawImage(<em>image</em>, <em>x</em>, <em>y</em>, <em>width</em>, <em>height</em>)</code></dt>
+ <dd>This adds the <code>width</code> and <code>height</code> parameters, which indicate the size to which to scale the image when drawing it onto the canvas.</dd>
+</dl>
+
+<h3 id="Example_Tiling_an_image">Example: Tiling an image</h3>
+
+<p>In this example, we'll use an image as a wallpaper and repeat it several times on the canvas. This is done simply by looping and placing the scaled images at different positions. In the code below, the first <code>for</code> loop iterates over the rows. The second <code>for</code> loop iterates over the columns. The image is scaled to one third of its original size, which is 50x38 pixels.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Images can become blurry when scaling up or grainy if they're scaled down too much. Scaling is probably best not done if you've got some text in it which needs to remain legible.</p>
+</div>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var img = new Image();
+  img.onload = function(){
+    for (var i=0;i&lt;4;i++){
+      for (var j=0;j&lt;3;j++){
+        ctx.drawImage(img,j*50,i*38,50,38);
+      }
+    }
+  };
+  img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+}</pre>
+
+<p>The resulting canvas looks like this:</p>
+
+<p>{{EmbedLiveSample("Example_Tiling_an_image", 160, 160, "https://mdn.mozillademos.org/files/251/Canvas_scale_image.png")}}</p>
+
+<h2 id="Slicing">Slicing</h2>
+
+<p>The third and last variant of the <code>drawImage()</code> method has eight parameters. It lets us cut out a section of the source image, then scale and draw it on our canvas.</p>
+
+<dl>
+ <dt><code>drawImage(<em>image</em>, <em>sx</em>, <em>sy</em>, <em>sWidth</em>, <em>sHeight</em>, <em>dx</em>, <em>dy</em>, <em>dWidth</em>, <em>dHeight</em>)</code></dt>
+ <dd>Given an <code>image</code>, this function takes the area of the source image specified by the rectangle whose top-left corner is (<code>sx</code>, <code>sy</code>) and whose width and height are <code>sWidth</code> and <code>sHeight</code> and draws it into the canvas, placing it on the canvas at (<code>dx</code>, <code>dy</code>) and scaling it to the size specified by <code>dWidth</code> and <code>dHeight</code>.</dd>
+</dl>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/225/Canvas_drawimage.jpg" style="float: right; height: 290px; width: 300px;">To really understand what this does, it may help to look at the image to the right. The first four parameters define the location and size of the slice on the source image. The last four parameters define the rectangle into which to draw the image on the destination canvas.</p>
+
+<p>Slicing can be a useful tool when you want to make compositions. You could have all elements in a single image file and use this method to composite a complete drawing. For instance, if you want to make a chart you could have a PNG image containing all the necessary text in a single file and depending on your data could change the scale of your chart fairly easily. Another advantage is that you don't need to load every image individually, which can improve load performance.</p>
+
+<h3 id="Example_Framing_an_image">Example: Framing an image</h3>
+
+<p>In this example, we'll use the same rhino as in the previous example, but we'll slice out its head and composite it into a picture frame. The picture frame image is a 24-bit PNG which includes a drop shadow. Because 24-bit PNG images include a full 8-bit alpha channel, unlike GIF and 8-bit PNG images, it can be placed onto any background without worrying about a matte color.</p>
+
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+   &lt;div style="display:none;"&gt;
+     &lt;img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227"&gt;
+     &lt;img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150"&gt;
+   &lt;/div&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<pre class="brush: js">function draw() {
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+
+  // Draw slice
+  ctx.drawImage(document.getElementById('source'),
+                33, 71, 104, 124, 21, 20, 87, 104);
+
+  // Draw frame
+  ctx.drawImage(document.getElementById('frame'),0,0);
+}</pre>
+
+<p>We took a different approach to loading the images this time. Instead of loading them by creating new {{domxref("HTMLImageElement")}} objects, we included them as {{HTMLElement("img")}} tags directly in our HTML source and retrieved the images from those. The images are hidden from output by setting the CSS property {{cssxref("display")}} to none for those images.</p>
+
+<p>{{EmbedLiveSample("Example_Framing_an_image", 160, 160, "https://mdn.mozillademos.org/files/226/Canvas_drawimage2.jpg")}}</p>
+
+<p>The script itself is very simple. Each {{HTMLElement("img")}} is assigned an ID attribute, which makes them easy to select using {{domxref("document.getElementById()")}}. We then simply use <code>drawImage()</code> to slice the rhino out of the first image and scale him onto the canvas, then draw the frame on top using a second <code>drawImage()</code> call.</p>
+
+<h2 id="Art_gallery_example">Art gallery example</h2>
+
+<p>In the final example of this chapter, we'll build a little art gallery. The gallery consists of a table containing several images. When the page is loaded, a {{HTMLElement("canvas")}}  element is inserted for each image and a frame is drawn arround it.</p>
+
+<p>In this case, every image has a fixed width and height, as does the frame that's drawn around them. You could enhance the script so that it uses the image's width and height to make the frame fit perfectly around it.</p>
+
+<p>The code below should be self-explanatory. We loop through the {{domxref("document.images")}} container and add new canvas elements accordingly. Probably the only thing to note, for those not so familiar with the DOM, is the use of the {{domxref("Node.insertBefore")}} method. <code>insertBefore()</code> is a method of the parent node (a table cell) of the element (the image) before which we want to insert our new node (the canvas element).</p>
+
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+     &lt;table&gt;
+      &lt;tr&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5399/gallery_1.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5401/gallery_2.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5403/gallery_3.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5405/gallery_4.jpg"&gt;&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5407/gallery_5.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5409/gallery_6.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5411/gallery_7.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5413/gallery_8.jpg"&gt;&lt;/td&gt;
+      &lt;/tr&gt;
+     &lt;/table&gt;
+     &lt;img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150"&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>And here's some CSS to make things look nice:</p>
+
+<pre class="brush: css">body {
+  background: 0 -100px repeat-x url(https://mdn.mozillademos.org/files/5415/bg_gallery.png) #4F191A;
+  margin: 10px;
+}
+
+img {
+  display: none;
+}
+
+table {
+  margin: 0 auto;
+}
+
+td {
+  padding: 15px;
+}
+</pre>
+
+<p>Tying it all together is the JavaScript to draw our framed images:</p>
+
+<pre class="brush: js">function draw() {
+
+  // Loop through all images
+  for (var i=0;i&lt;document.images.length;i++){
+
+    // Don't add a canvas for the frame image
+    if (document.images[i].getAttribute('id')!='frame'){
+
+      // Create canvas element
+      canvas = document.createElement('canvas');
+      canvas.setAttribute('width',132);
+      canvas.setAttribute('height',150);
+
+      // Insert before the image
+      document.images[i].parentNode.insertBefore(canvas,document.images[i]);
+
+      ctx = canvas.getContext('2d');
+
+      // Draw image to canvas
+      ctx.drawImage(document.images[i],15,20);
+
+      // Add frame
+      ctx.drawImage(document.getElementById('frame'),0,0);
+    }
+  }
+}</pre>
+
+<p>{{EmbedLiveSample("Art_gallery_example", 725, 400, "https://mdn.mozillademos.org/files/205/Canvas_art_gallery.jpg")}}</p>
+
+<h2 id="Controlling_image_scaling_behavior">Controlling image scaling behavior</h2>
+
+<p>As mentioned previously, scaling images can result in fuzzy or blocky artifacts due to the scaling process. You can use the drawing context's imageSmoothingEnabled property to control the use of image smoothing algorithms when scaling images within your context. By default, this is <code>true</code>, meaning images will be smoothed when scaled. You can disable this feature like this:</p>
+
+<pre class="js">ctx.mozImageSmoothingEnabled = false;
+</pre>
+
+<p>{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Drawing_shapes", "Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors")}}</p>
diff --git a/files/de/web/guide/html/canvas_tutorial/canvas_optimieren/index.html b/files/de/web/guide/html/canvas_tutorial/canvas_optimieren/index.html
new file mode 100644
index 0000000000..fc1678c71a
--- /dev/null
+++ b/files/de/web/guide/html/canvas_tutorial/canvas_optimieren/index.html
@@ -0,0 +1,118 @@
+---
+title: Canvas optimieren
+slug: Web/Guide/HTML/Canvas_Tutorial/Canvas_optimieren
+tags:
+  - Canvas
+  - Fortgeschritten
+  - Grafik
+  - HTML
+  - HTML5
+  - Tutorial
+translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}</div>
+
+<div class="summary">
+<p>Das {{HTMLElement("canvas")}}-Element ist einer der am meisten verbreiteten Standards, um 2D-Grafiken im Web zu erzeugen. Es wird oft für Spiele und komplexe Visualisierungen eingesetzt. Reizen Webseiten und Apps das Canvas jedoch zu sehr aus, lässt die Performance nach. <span class="seoSummary">Dieser Artikel soll Hilfestellung für die Optimierung der Nutzung des Canvas-Elements geben, um sicherzustellen, dass Ihre Webseite oder App performant ist.</span></p>
+</div>
+
+<h2 id="Tipps_zur_Performance">Tipps zur Performance</h2>
+
+<p>Dies ist eine Sammlung von Tipps, die Helfen, die Performance zu verbessern.</p>
+
+<h3 id="Vorrendern_von_ähnlichen_oder_sich_wiederholenden_Objekten_auf_einem_Offscreen-Canvas">Vorrendern von ähnlichen oder sich wiederholenden Objekten auf einem Offscreen-Canvas</h3>
+
+<p>Falls Sie komplexe Zeichenoperationen in jedem Frame ausführen, ziehen Sie in Betracht, ein Offscreen-Canvas zu erzeugen. Damit können Sie Objekte einmal (oder wann immer Änderungen stattfinden) auf dem Offscreen-Canvas zeichnen und in jedem Frame das Offscreen-Canvas zeichnen.</p>
+
+<pre class="brush: js">myEntity.offscreenCanvas = document.createElement('canvas');
+myEntity.offscreenCanvas.width = myEntity.width;
+myEntity.offscreenCanvas.height = myEntity.height;
+myEntity.offscreenContext = myEntity.offscreenCanvas.getContext('2d');
+
+myEntity.render(myEntity.offscreenContext);
+</pre>
+
+<h3 id="Vermeiden_Sie_Gleitkomma-Koordinaten">Vermeiden Sie Gleitkomma-Koordinaten</h3>
+
+<p>Falls Sie Objekte auf dem Canvas mit Gleitkommazahlen als Koordinaten zeichnen, müssen Subpixel gerendert werden.</p>
+
+<pre class="brush: js">ctx.drawImage(myImage, 0.3, 0.5);
+</pre>
+
+<p>Dadurch muss der Browser zusätzliche Berechnungen durchführen, um eine Kantenglättung zu erzielen. Um dies zu verhindern, stellen Sie sicher, dass Sie alle Koordinaten in Aufrufen von <span style='background-color: transparent; color: #333333; display: inline !important; float: none; font-family: "Open Sans",arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal;'>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}</span> runden, zum Beispiel mit Hilfe von <span style='background-color: transparent; color: #333333; display: inline !important; float: none; font-family: "Open Sans",arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal;'>{{jsxref("Math.floor()")}}.</span></p>
+
+<h3 id="Skalieren_Sie_keine_Bilder_in_drawImage">Skalieren Sie keine Bilder in <code>drawImage</code></h3>
+
+<p>Laden Sie mehrere Größen Ihrer Bilder auf ein Offscreen-Canvas, anstatt sie andauernd in {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} zu skalieren.</p>
+
+<h3 id="Benutzen_Sie_mehrere_Canvas-Ebenen_für_komplexe_Szenen">Benutzen Sie mehrere Canvas-Ebenen für komplexe Szenen</h3>
+
+<p>Möglicherweise haben Sie einige Elemente, die sich oft ändern oder bewegen, während andere Dinge (wie zum Beispiel die UI) sich nie ändern. Diese Situation können Sie optimieren, indem Sie durch die Erzeugung mehrerer Canvas-Elemente Ebenen erzeugen.</p>
+
+<p>Zum Beispiel können Sie eine UI-Ebene erzeugen, die über allen anderen Ebenen liegt und nur während Benutzereingaben gezeichnet wird. Zusätzlich kann es eine Spiel-Ebene geben, die alle oft veränderten Objekte enthält, sowie eine Hintergrund-Ebene, deren Objekte sich selten ändern.</p>
+
+<pre class="brush: html">&lt;div id="stage"&gt;
+  &lt;canvas id="ui-layer" width="480" height="320"&gt;&lt;/canvas&gt;
+  &lt;canvas id="game-layer" width="480" height="320"&gt;&lt;/canvas&gt;
+  &lt;canvas id="background-layer" width="480" height="320"&gt;&lt;/canvas&gt;
+&lt;/div&gt;
+
+&lt;style&gt;
+  #stage {
+    width: 480px;
+    height: 320px;
+    position: relative;
+    border: 2px solid black
+  }
+  canvas { position: absolute; }
+  #ui-layer { z-index: 3 }
+  #game-layer { z-index: 2 }
+  #background-layer { z-index: 1 }
+&lt;/style&gt;
+</pre>
+
+<h3 id="Nutzen_Sie_CSS_für_große_Hintergrundbilder">Nutzen Sie CSS für große Hintergrundbilder</h3>
+
+<p>Falls Sie wie die meisten Spiele ein statisches Hintergrundbild haben, nutzen Sie ein simples {{HTMLElement("div")}}-Element mit der CSS-Eigenschaft {{cssxref("background")}} und positionieren Sie es unter dem Canvas. Dadurch verhindern Sie ein permanentes Neuzeichnen des Bildes in jedem Frame.</p>
+
+<h3 id="Skalieren_Sie_das_Canvas_mit_CSS-Transformationen">Skalieren Sie das Canvas mit CSS-Transformationen</h3>
+
+<p><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transforms">CSS-Transformationen</a> sind schneller, da sie die Grafikkarte nutzen. Im besten Fall skalieren Sie das Canvas nicht, oder haben ein kleineres Canvas, das Sie hochskalieren, als dass Sie ein großes Canvas herunterskalieren. Für Firefox OS ist die Zielgröße 480 x 320 px.</p>
+
+<pre class="brush: js">var scaleX = window.innerWidth / canvas.width;
+var scaleY = window.innerHeight / canvas.height;
+
+var scaleToFit = Math.min(scaleX, scaleY);
+var scaleToCover = Math.max(scaleX, scaleY);
+
+stage.style.transformOrigin = '0 0'; //scale from top left
+stage.style.transform = 'scale(' + scaleToFit + ')';
+</pre>
+
+<h3 id="Nutzen_Sie_das_moz-opaque_Attribut_(nur_Gecko)">Nutzen Sie das <code>moz-opaque</code> Attribut (nur Gecko)</h3>
+
+<p>Falls Ihr Spiel ein Canvas nutzt, das nicht transparent sein muss, setzen Sie das <code>moz-opaque</code> Attribut im Canvas-Tag. Diese Information kann intern genutzt werden, um das Zeichnen zu optimieren.</p>
+
+<pre class="brush: html">&lt;canvas id="myCanvas" moz-opaque&gt;&lt;/canvas&gt;</pre>
+
+<h3 id="Weitere_Tipps">Weitere Tipps</h3>
+
+<ul>
+ <li>Bündeln Sie Canvas-Aufrufe (Zeichnen Sie zum Beispiel eine Linie mit mehreren Knotenpunkten, anstatt einzelne Linien).</li>
+ <li>Vermeiden Sie unnötige Zustandsänderungen des Canvas.</li>
+ <li>Rendern Sie nur die Unterschiede, nicht den ganzen neuen Zustand.</li>
+ <li>Vermeiden Sie die {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}-Eigenschaft, soweit möglich.</li>
+ <li>Vermeiden Sie <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text">das Zeichnen von Text</a>, falls möglich.</li>
+ <li>Versuchen Sie verschiedene Wege, das Canvas zu leeren ({{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}, {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} oder Größenänderung des Canvas)</li>
+ <li>Bei Animationen, nutzen Sie {{domxref("window.requestAnimationFrame()")}} anstatt {{domxref("window.setInterval()")}} .</li>
+ <li>Seien Sie vorsichtig mit schwergewichtigen Physik-Bibliotheken.</li>
+</ul>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="http://www.html5rocks.com/en/tutorials/canvas/performance/#toc-ref">Improving HTML5 Canvas Performance – HTML5 Rocks</a></li>
+ <li><a href="https://hacks.mozilla.org/2013/05/optimizing-your-javascript-game-for-firefox-os/">Optimizing your JavaScript game for Firefox OS – Mozilla Hacks</a></li>
+</ul>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}</p>
diff --git a/files/de/web/guide/html/canvas_tutorial/drawing_text/index.html b/files/de/web/guide/html/canvas_tutorial/drawing_text/index.html
new file mode 100644
index 0000000000..1cd3f0bfc6
--- /dev/null
+++ b/files/de/web/guide/html/canvas_tutorial/drawing_text/index.html
@@ -0,0 +1,165 @@
+---
+title: Text zeichnen
+slug: Web/Guide/HTML/Canvas_Tutorial/Drawing_text
+tags:
+  - Canvas
+  - Fortgeschritten
+  - Grafik
+  - Tutorial
+translation_of: Web/API/Canvas_API/Tutorial/Drawing_text
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}</div>
+
+<div class="summary">
+<p>Nachdem wir im vorigen Kapitel gesehen haben, wie man <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Gestaltung und Farben anwendet</a> , werden wir nun einen Blick darauf werfen, wie man Text auf ein <code>canvas</code> zeichnet.</p>
+</div>
+
+<h2 id="Text_zeichnen">Text zeichnen</h2>
+
+<p>Der Rendering-Kontext hält zwei Methoden zum zeichnen von Text bereit:</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fillText", "fillText(text, x, y [, maxWidth])")}}</dt>
+ <dd>Füllt einen gegebenen Text an den gegebenen (x,y)-Koordinaten. Optional mit einer maximalen Breite, die zu zeichnen ist.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeText", "strokeText(text, x, y [, maxWidth])")}}</dt>
+ <dd>Umrandet einen gegebenen Text an den gegebenen (x,y)-Koordinaten. Optional mit einer maximalen Breite, die zu zeichnen ist.</dd>
+</dl>
+
+<h3 id="ein_fillText-Beispiel">ein <code>fillText</code>-Beispiel</h3>
+
+<p>Der Text wird mit dem aktuellen <code>fillStyle</code> gefüllt.</p>
+
+<pre class="brush: js;highlight[4]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.font = '48px serif';
+  ctx.fillText('Hello world', 10, 50);
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="300" height="100"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_fillText_example", 310, 110)}}</p>
+
+<h3 id="ein_strokeText-Beispiel">ein <code>strokeText</code>-Beispiel</h3>
+
+<p>Der Text wird mit dem aktuellen <code>strokeStyle</code> umrandet.</p>
+
+<pre class="brush: js;highlight[4]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.font = '48px serif';
+  ctx.strokeText('Hello world', 10, 50);
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="300" height="100"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_strokeText_example", 310, 110)}}</p>
+
+<h2 id="Text_gestalten">Text gestalten</h2>
+
+<p>In den obigen Beispielen nutzen wir bereits die <code>font</code>-Eigentschaft, um den Text ein wenig größer als standardmäßig zu machen. Es gibt ein paar mehr Eigenschaften, die es erlauben, das Zeichnen von Text auf dem <code>canvas</code> zu beeinflussen:</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.font", "font = value")}}</dt>
+ <dd>Der aktuell genutzte Text-Stil, der zum Zeichnen genutzt wird. Dieser String nutzt die selbe Syntax wie die <a href="/en-US/docs/Web/CSS">CSS</a> {{cssxref("font")}}-Eigenschaft. Die Standard-Schriftart ist <code>10px sans-serif</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.textAlign", "textAlign = value")}}</dt>
+ <dd>Einstellung der Text-Ausrichtung. Mögliche Werte: <code>start</code>, <code>end</code>, <code>left</code>, <code>right</code> oder <code>center</code>. Der Standard-Wert ist <code>start</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline = value")}}</dt>
+ <dd>Baseline alignment setting. Possible values: <code>top</code>, <code>hanging</code>, <code>middle</code>, <code>alphabetic</code>, <code>ideographic</code>, <code>bottom</code>. The default value is <code>alphabetic</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.direction", "direction = value")}}</dt>
+ <dd>Directionality. Possible values: <code>ltr</code>, <code>rtl</code>, <code>inherit</code>. The default value is <code>inherit</code>.</dd>
+</dl>
+
+<p>These properties might be familiar to you, if you have worked with CSS before.</p>
+
+<p>The following diagram from the <a class="external" href="http://www.whatwg.org/" title="http://www.whatwg.org/">WHATWG</a> demonstrates the various baselines supported by the <code>textBaseline</code> property.<img alt="The top of the em square is
+roughly at the top of the glyphs in a font, the hanging baseline is
+where some glyphs like आ are anchored, the middle is half-way
+between the top of the em square and the bottom of the em square,
+the alphabetic baseline is where characters like Á, ÿ,
+f, and Ω are anchored, the ideographic baseline is
+where glyphs like 私 and 達 are anchored, and the bottom
+of the em square is roughly at the bottom of the glyphs in a
+font. The top and bottom of the bounding box can be far from these
+baselines, due to glyphs extending far outside the em square." src="http://www.whatwg.org/specs/web-apps/current-work/images/baselines.png"></p>
+
+<h3 id="A_textBaseline_example">A textBaseline example</h3>
+
+<p>Edit the code below and see your changes update live in the canvas:</p>
+
+<pre class="brush: js;highlight[2]">ctx.font = '48px serif';
+ctx.textBaseline = 'hanging';
+ctx.strokeText('Hello world', 0, 100);
+</pre>
+
+<div class="hidden">
+<h6 id="Playable_code" name="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.font = "48px serif";
+ctx.textBaseline = "hanging";
+ctx.strokeText("Hello world", 0, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var edit = document.getElementById('edit');
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener('click', function() {
+  textarea.focus();
+})
+
+textarea.addEventListener('input', drawCanvas);
+window.addEventListener('load', drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Advanced_text_measurements">Advanced text measurements</h2>
+
+<p>In the case you need to obtain more details about the text, the following method allows you to measure it.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.measureText", "measureText()")}}</dt>
+ <dd>Returns a {{domxref("TextMetrics")}} object containing the width, in pixels, that the specified text will be when drawn in the current text style.</dd>
+</dl>
+
+<p>The following code snippet shows how you can measure a text and get its width.</p>
+
+<pre class="brush: js;highlight[3]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var text = ctx.measureText('foo'); // TextMetrics object
+  text.width; // 16;
+}
+</pre>
+
+<h2 id="Gecko-specific_notes">Gecko-specific notes</h2>
+
+<p>In Gecko (the rendering engine of Firefox, Firefox OS and other Mozilla based applications), some <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#Prefixed_APIs">prefixed APIs</a> were implemented in earlier versions to draw text on a canvas. These are now deprecated and removed, and are no longer guaranteed to work.</p>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}</p>
diff --git a/files/de/web/guide/html/canvas_tutorial/formen_zeichnen/index.html b/files/de/web/guide/html/canvas_tutorial/formen_zeichnen/index.html
new file mode 100644
index 0000000000..f23e7664b5
--- /dev/null
+++ b/files/de/web/guide/html/canvas_tutorial/formen_zeichnen/index.html
@@ -0,0 +1,453 @@
+---
+title: Formen zeichnen mit Canvas
+slug: Web/Guide/HTML/Canvas_Tutorial/Formen_zeichnen
+translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes
+---
+<p>{{CanvasSidebar}}</p>
+
+<h2 id="Koordinatensystem">Koordinatensystem</h2>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/224/Canvas_default_grid.png" style="float: right; height: 220px; width: 220px;">Bevor wir mit dem Zeichnen beginnen können, müssen wir über das <em>canvas grid</em> oder Koordinatensystem sprechen. Unser HTML-Skelett von der vorigen Seite hatte ein canvas-Element mit den Maßen 150 Pixel Höhe und 150 Pixel Breite. Zur Rechten sieht man diesen canvas, über den das Standard-Grid gelegt wurde. Normalerweise entspricht eine Einheit einem Pixel auf dem canvas. Der Ursprung dieses Rasters befindet sich in der oberen linken Ecke, im Punkt (0,0). Alle Elemente werden relativ zum Ursprung positioniert. Die Position des blauen Quadrates ist also x Pixel vom linken Rand und y Pixel vom oberen Rand entfernt, am Punkt (x,y). Später in diesem Tutorial werden wir sehen, wie wir den Ursprung an eine andere Position verschieben, das Koordinatensystem rotieren und sogar skalieren können, aber für's Erste behalten wir die Standardeinstellungen bei.</p>
+
+<h2 id="Rechtecke_zeichnen">Rechtecke zeichnen</h2>
+
+<p>Nicht wie in <a href="/en-US/docs/SVG" rel="internal" title="en/SVG">SVG</a>, unterstützt {{HTMLElement("canvas")}} nur eine einfache Form: das Rechteck. Andere Formen werden mithilfe von Pfaden gezeichnet, dazu später mehr.</p>
+
+<div id="section_3">
+<p>Es gibt drei Funktionen, welche auf verschiedenste Art Rechtecke zeichnen:</p>
+
+<dl>
+ <dt><code>fillRect(<em>x</em>, <em>y</em>, <em>breite</em>, <em>höhe</em>)</code></dt>
+ <dd>Zeichnet ein gefülltes Rechteck</dd>
+ <dt><code>strokeRect(<em>x</em>, <em>y</em>, <code><em>breite</em>, <em>höhe</em></code>)</code></dt>
+ <dd>Zeichnet den Rahmen eines Rechteckes</dd>
+ <dt><code>clearRect(<em>x</em>, <em>y</em>, <code><em>breite</em>, <em>höhe</em></code>)</code></dt>
+ <dd>Der Bereich des Rechteckes wird transparent</dd>
+</dl>
+
+<p>Alle drei Funktionen benötigen die selben drei Argumente. <code>x</code> und <code>y</code> beschreibt die Position (<em>siehe Koordinatensystem</em>). <code>breite</code> und <code>höhe</code> beschreiben die Größe des Rechteckes.</p>
+
+<h3 id="Beispiel_mit_Rechtecken">Beispiel mit Rechtecken</h3>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre><code>function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    ctx.fillRect(25, 25, 100, 100);
+    ctx.clearRect(45, 45, 60, 60);
+    ctx.strokeRect(50, 50, 50, 50);
+  }
+}</code></pre>
+
+<p>Demo:</p>
+
+<p>{{EmbedLiveSample("Beispiel_mit_Rechtecken", 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}</p>
+
+<p>Die <code>fillRect()</code>-Methode zeichnet ein 100px großes, schwarzes Quadrat. Die <code>clearRect()</code>-Methode löscht danach ein 60px großes Quadrat in der Mitte des schwarzen Quadrates. Anschließend zeichnet die <code>strokeRect()</code>-Methode einen 50px großen schwarzen Rahmen in der Mitte.</p>
+
+<p>Später werden wir zwei alternative Methoden für <code>clearRect()</code> behandeln und sehen, wie man die Füll- und Konturfarbe ändern kann.</p>
+
+<p>Anders als die Pfadmethoden zeichnen diese drei Rechteckmethoden sofort auf den canvas.</p>
+
+<h2 id="Pfade_zeichnen">Pfade zeichnen</h2>
+
+<p>Um andere Formen mithilfe von Pfaden zu zeichnen, benötigt man einige weitere Schritte. Zuerst muss man einen Pfad beginnen. Danach kommen die Pfadbefehle. Zuletzt wird dieser gezeichnet oder gefüllt. Diese Methoden werden hierfür genutzt:</p>
+
+<dl>
+ <dt><code>beginPath()</code></dt>
+ <dd>Erstellt einen Pfad und beendet ggf. einen älteren.</dd>
+ <dt><code>closePath()</code></dt>
+ <dd>Beendet den Pfad und verbindet den Startpunkt mit dem Endpunkt.</dd>
+ <dt><code>stroke()</code></dt>
+ <dd>Zeichnet die Kontur des Pfades.</dd>
+ <dt><code>fill()</code></dt>
+ <dd>Zeichnet die Füllung des Pfades.</dd>
+</dl>
+
+<p>Zuerst wird also die <code>beginPath()</code>-Methode ausgeführt. Danach kommen weitere Pfadanweisung wie Linien oder Kurven. Ein weiterer Aufruf der Methode <code>beginPath()</code> oder ein Aufruf der Methode <code>closePath()</code> löscht die Pfadanweisungen. Optional kann nun <code>closePath()</code> ausgeführt werden.</p>
+
+<div class="note"><strong>Hinweis:</strong> Wenn <code>fill()</code> ausgeführt wird, wird automatisch der Pfad beendet, sodass <code>closePath()</code> nicht mehr ausgeführt werden muss. Da ist <strong>nicht</strong> der Fall wenn <code>stroke()</code> ausgeführt wird.</div>
+
+<h3 id="Ein_Dreieck_zeichnen">Ein Dreieck zeichnen</h3>
+
+<p>So sähe zum Beispiel der Code aus, um ein Dreieck zu zeichnen:</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre><code>function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    ctx.beginPath();
+    ctx.moveTo(75, 50);
+    ctx.lineTo(100, 75);
+    ctx.lineTo(100, 25);
+    ctx.fill();
+  }
+}</code></pre>
+
+<p>Demo:</p>
+
+<p>{{EmbedLiveSample("Ein_Dreieck_zeichnen", 160, 160)}}</p>
+
+<h3 id="Stift_bewegen">Stift bewegen</h3>
+
+<p>Eine sehr sinnvolle Methode ist <code>moveTo()</code>. Sie zeichnet zwar nichts, verändert allerdings die Position des Stiftes, sodass spätere Methoden nicht beim Punkt (0, 0) anfangen.</p>
+
+<dl>
+ <dt><code>moveTo(<em>x</em>, <em>y</em>)</code></dt>
+ <dd>Bewegt den Stift zu der Koordinate (x , y).</dd>
+</dl>
+
+<p>Meist wird direkt nach dem Aufruf von <code>beginPath()</code> <code>moveTo()</code> ausgeführt. Außerdem kann man <code>moveTo()</code> für nichtverbundene Pfade benutzen. Beispiel (<code>moveTo()</code>-Aufrufe sind rote Linien):</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre><code>function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+     var ctx = canvas.getContext('2d');
+
+     ctx.beginPath();
+     ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle
+     ctx.moveTo(110, 75);
+     ctx.arc(75, 75, 35, 0, Math.PI, false);    // Mund
+     ctx.moveTo(65, 65);
+     ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // Linkes Auge
+     ctx.moveTo(95, 65);
+     ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // Rechtes Auge
+     ctx.stroke();
+  }
+}</code></pre>
+
+<p>Demo:</p>
+
+<p>{{EmbedLiveSample("Stift_bewegen", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}</p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> <code>arc()</code> zeichnet einen Kreisbogen. Mehr dazu: {{anch("Kreisbögen")}}.</p>
+</div>
+
+<h3 id="Linien">Linien</h3>
+
+<p>Für Linien verwendet man die <code>lineTo()</code>-Methode:</p>
+
+<dl>
+ <dt><code>lineTo(<em>x</em>, <em>y</em>)</code></dt>
+ <dd>Zeichnet eine Linie von der aktuellen Stiftposition zu dem Punkt (x, y).</dd>
+</dl>
+
+<p>Diese Methode erwartet wie <code>moveTo()</code> zwei Argumente: x und y, welche die Koordinate des Linienendes ist. Der Startpunkt wurde Mithilfe anderer Methoden schon festgelegt. Anschließend ist das Linienende der neue Startpunkt.</p>
+
+<p>Beispiel mit zwei Dreiecken:</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre><code>function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    // Filled triangle
+    ctx.beginPath();
+    ctx.moveTo(25, 25);
+    ctx.lineTo(105, 25);
+    ctx.lineTo(25, 105);
+    ctx.fill();
+
+    // Stroked triangle
+    ctx.beginPath();
+    ctx.moveTo(125, 125);
+    ctx.lineTo(125, 45);
+    ctx.lineTo(45, 125);
+    ctx.closePath();
+    ctx.stroke();
+  }
+}</code></pre>
+
+<p>Es beginnt mit der Ausführung von <code>beginPath()</code> um eine neue Form zu beginnen. Danach wird mit <code>moveTo()</code> der Startpunkt festgelegt. Danach werden die Linien gezeichnet.</p>
+
+<p>{{EmbedLiveSample("Linien", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}</p>
+
+<h3 id="Kreisbögen">Kreisbögen</h3>
+
+<p>Um Kreise oder Kreisbögen zu zeichnen, benutzt man die <code>arc()</code>-Methode.</p>
+
+<dl>
+ <dt><code>arc(<em>x</em>, <em>y</em>, <em>radius</em>, <em>startWinkel</em>, <em>endWinkel</em>, <em>uhrzeigersinn</em>)</code></dt>
+ <dd>Zeichnet einen Kreisbogen.</dd>
+</dl>
+
+<p>Diese Methode benötigt sechs Parameter: <code>x</code> und <code>y</code> sind die Koordinaten des Mittelpunktes des Kreisbogens. <code>radius</code> ist der Radius des Kreisbogens. <code>startWinkel</code> und <code>endWinkel</code> definieren die Punkte auf dem Kreis in rad. Der <code>uhrzeigersinn</code>-Parameter ist <code>true</code>, wenn der Kreisbogen gegen den Uhrzeigersinn und <code>false</code> wenn er im Uhrzeigersinn gezeichnet werden soll.</p>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Die Winkelzahlen werden in rad angegeben, nicht in deg. Die Umrechnungsformel lautet: <code>rad = (Math.PI / 180) * deg</code>.</p>
+</div>
+Dieses Beispiel zeigt Kreisbügen mit den unterschiedlichsten Parametern:<br>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="200"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre><code>function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    for (var i = 0; i &lt; 4; i++) {
+      for (var j = 0; j &lt; 3; j++) {
+        ctx.beginPath();
+        var x = 25 + j * 50; // x coordinate
+        var y = 25 + i * 50; // y coordinate
+        var radius = 20; // Arc radius
+        var startAngle = 0; // Starting point on circle
+        var endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle
+        var anticlockwise = i % 2 == 0 ? false : true; // clockwise or anticlockwise
+
+        ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
+
+        if (i &gt; 1) {
+          ctx.fill();
+        } else {
+          ctx.stroke();
+        }
+      }
+    }
+  }
+}</code></pre>
+{{EmbedLiveSample("Kreisbögen", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}}
+
+<h3 id="Bezier_und_quadratische_Kurven">Bezier und quadratische Kurven</h3>
+
+<p><a class="external" href="http://de.wikipedia.org/wiki/B%C3%A9zierkurve" rel="external" title="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">Bézierkurven</a> sind in kubischer und quadratischer Form enthalten. Damit kann man ziemlich komplexe Strukturen zeichnen.</p>
+
+<dl>
+ <dt><code>quadraticCurveTo(cp1x, cp1y, x, y)</code></dt>
+ <dd>Zeichnet eine quadratische Bézierkurve von der aktuellen Stiftposition zu <code>x</code> und <code>y</code>, mithilfe des Kontrollpunktes mit den Koordinaten (<code>cp1x</code>, <code>cp1y</code>).</dd>
+ <dt><code>bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)</code></dt>
+ <dd>Zeichnet eine quadratische Bézierkurve von der aktuellen Stiftposition zu <code>x</code> und <code>y</code>, mithilfe der Kontrollpunkte mit den Koordinaten (<code>cp1x</code>, <code>cp1y</code>) und (<code>cp2x</code>, <code>cp2y</code>).</dd>
+</dl>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/223/Canvas_curves.png" style="float: right; height: 190px; width: 190px;">Den Unterschied zwischen den beiden Funktionen lässt sich am Besten durch die beiden Bilder rechts erklären: Oben die quadratische und unten die kubische.</p>
+
+<p>Die Kontrollpunkte sind hier rot, die Start- und Endpunkte blau gekennzeichnet.</p>
+
+<h4 id="Quadratische_Bézierkurven">Quadratische Bézierkurven</h4>
+
+<p>Dieses Beispiel zeichnet Mithilfe von Bézierkurven eine Sprechblase:</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre><code>function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    // Quadratric curves example
+    ctx.beginPath();
+    ctx.moveTo(75, 25);
+    ctx.quadraticCurveTo(25, 25, 25, 62.5);
+    ctx.quadraticCurveTo(25, 100, 50, 100);
+    ctx.quadraticCurveTo(50, 120, 30, 125);
+    ctx.quadraticCurveTo(60, 120, 65, 100);
+    ctx.quadraticCurveTo(125, 100, 125, 62.5);
+    ctx.quadraticCurveTo(125, 25, 75, 25);
+    ctx.stroke();
+  }
+}</code></pre>
+
+<p>{{EmbedLiveSample("Quadratische_Bézierkurven", 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}</p>
+
+<h4 id="Kubische_Bézierkurven">Kubische Bézierkurven</h4>
+
+<p>Dieses Beispiel zeichnet ein Herz Mithilfe von kubischen Bézierkurven.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre><code>function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    // Cubic curves example
+    ctx.beginPath();
+    ctx.moveTo(75, 40);
+    ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
+    ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
+    ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
+    ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
+    ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
+    ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
+    ctx.fill();
+  }
+}</code></pre>
+
+<p>{{EmbedLiveSample("Kubische_Bézierkurven", 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}</p>
+
+<h3 id="Rechtecke">Rechtecke</h3>
+
+<p>Es gibt auch eine Rechtecksmethode für Pfade:</p>
+
+<dl>
+ <dt><code>rect(<em>x</em>, <em>y</em>, <em>width</em>, <em>height</em>)</code></dt>
+ <dd>Zeichnet ein Rechteck.</dd>
+</dl>
+
+<p>Nachdem diese Methode ausgeführt wurde, wird automatisch <code>moveTo(0, 0)</code> ausgeführt.</p>
+
+<h3 id="Kombinationen">Kombinationen</h3>
+
+<p>Mit Kombinationen all dieser Pfadmethoden können die komplexesten Formen gezeichnet werden. In diesem letzten Beispiel wird ein Spielcharakter gezeichnet:</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre><code>function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    roundedRect(ctx, 12, 12, 150, 150, 15);
+    roundedRect(ctx, 19, 19, 150, 150, 9);
+    roundedRect(ctx, 53, 53, 49, 33, 10);
+    roundedRect(ctx, 53, 119, 49, 16, 6);
+    roundedRect(ctx, 135, 53, 49, 33, 10);
+    roundedRect(ctx, 135, 119, 25, 49, 10);
+
+    ctx.beginPath();
+    ctx.arc(37, 37, 13, Math.PI / 7, -Math.PI / 7, false);
+    ctx.lineTo(31, 37);
+    ctx.fill();
+
+    for (var i = 0; i &lt; 8; i++) {
+      ctx.fillRect(51 + i * 16, 35, 4, 4);
+    }
+
+    for (i = 0; i &lt; 6; i++) {
+      ctx.fillRect(115, 51 + i * 16, 4, 4);
+    }
+
+    for (i = 0; i &lt; 8; i++) {
+      ctx.fillRect(51 + i * 16, 99, 4, 4);
+    }
+
+    ctx.beginPath();
+    ctx.moveTo(83, 116);
+    ctx.lineTo(83, 102);
+    ctx.bezierCurveTo(83, 94, 89, 88, 97, 88);
+    ctx.bezierCurveTo(105, 88, 111, 94, 111, 102);
+    ctx.lineTo(111, 116);
+    ctx.lineTo(106.333, 111.333);
+    ctx.lineTo(101.666, 116);
+    ctx.lineTo(97, 111.333);
+    ctx.lineTo(92.333, 116);
+    ctx.lineTo(87.666, 111.333);
+    ctx.lineTo(83, 116);
+    ctx.fill();
+
+    ctx.fillStyle = 'white';
+    ctx.beginPath();
+    ctx.moveTo(91, 96);
+    ctx.bezierCurveTo(88, 96, 87, 99, 87, 101);
+    ctx.bezierCurveTo(87, 103, 88, 106, 91, 106);
+    ctx.bezierCurveTo(94, 106, 95, 103, 95, 101);
+    ctx.bezierCurveTo(95, 99, 94, 96, 91, 96);
+    ctx.moveTo(103, 96);
+    ctx.bezierCurveTo(100, 96, 99, 99, 99, 101);
+    ctx.bezierCurveTo(99, 103, 100, 106, 103, 106);
+    ctx.bezierCurveTo(106, 106, 107, 103, 107, 101);
+    ctx.bezierCurveTo(107, 99, 106, 96, 103, 96);
+    ctx.fill();
+
+    ctx.fillStyle = 'black';
+    ctx.beginPath();
+    ctx.arc(101, 102, 2, 0, Math.PI * 2, true);
+    ctx.fill();
+
+    ctx.beginPath();
+    ctx.arc(89, 102, 2, 0, Math.PI * 2, true);
+    ctx.fill();
+  }
+}
+
+// A utility function to draw a rectangle with rounded corners.
+
+function roundedRect(ctx, x, y, width, height, radius) {
+  ctx.beginPath();
+  ctx.moveTo(x, y + radius);
+  ctx.lineTo(x, y + height - radius);
+  ctx.arcTo(x, y + height, x + radius, y + height, radius);
+  ctx.lineTo(x + width - radius, y + height);
+  ctx.arcTo(x + width, y + height, x + width, y + height-radius, radius);
+  ctx.lineTo(x + width, y + radius);
+  ctx.arcTo(x + width, y, x + width - radius, y, radius);
+  ctx.lineTo(x + radius, y);
+  ctx.arcTo(x, y, x, y + radius, radius);
+  ctx.stroke();
+}</code></pre>
+
+<div id="section_18">
+<p>Demo:</p>
+
+<p>{{EmbedLiveSample("Kombinationen", 160, 160)}}</p>
+
+<p>{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Basic_usage", "Web/Guide/HTML/Canvas_tutorial/Using_images")}}</p>
+</div>
+</div>
diff --git a/files/de/web/guide/html/canvas_tutorial/grundlagen/index.html b/files/de/web/guide/html/canvas_tutorial/grundlagen/index.html
new file mode 100644
index 0000000000..f89af7fa04
--- /dev/null
+++ b/files/de/web/guide/html/canvas_tutorial/grundlagen/index.html
@@ -0,0 +1,154 @@
+---
+title: Grundlagen Canvas
+slug: Web/Guide/HTML/Canvas_Tutorial/Grundlagen
+tags:
+  - Canvas
+  - Graphics
+  - HTML
+  - Intermediate
+  - Tutorial
+translation_of: Web/API/Canvas_API/Tutorial/Basic_usage
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}</div>
+
+<div class="summary">
+<p>Beginnen wir diese Einführung mit einem Blick auf das {{Glossary("HTML")}}-Element {{HTMLElement("canvas")}} an sich. Am Ende wirst du in einem Canvas einen 2D-Context anlegen können und ein erstes Beispiel im Browser gezeichnet haben.</p>
+</div>
+
+<h2 id="Das_&lt;canvas>-Element">Das <code>&lt;canvas&gt;</code>-Element</h2>
+
+<p>Beginnen wir mit dem {{HTMLElement("canvas")}}-Element:</p>
+
+<pre class="brush: html">&lt;canvas id="tutorial" width="150" height="150"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>Auf den ersten Blick sieht ein {{HTMLElement("canvas")}} wie ein {{HTMLElement("img")}}-Element aus, mit dem Unterschied, dass es die Attribute <code>src</code> und <code>alt</code> nicht besitzt. Das <code>&lt;canvas&gt;</code>-Element hat nur zwei Attribute - {{htmlattrxref("width", "canvas")}} und {{htmlattrxref("height", "canvas")}}. Diese sind optional und können auch über {{Glossary("DOM")}}-<a href="/de/docs/Web/API/HTMLCanvasElement">Eigenschaften</a> gesetzt werden. Wenn die Attribute nicht gesetzt sind, bekommt das Element eine Breite von <strong>300px</strong> und eine Höhe von <strong>150px</strong>. Die Maße des canvas können auch über {{Glossary("CSS")}} gesetzt werden, allerdings wird das Bild dann auf die gesetzte Größe skaliert. Wenn das Verhältnis der CSS-Maße nicht zur ursprünglichen Größe passt, wird das Bild verzerrt.</p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Wenn das Ergebnis des Renderings verzerrt wirkt, dann setze bitte die Attribute <code>width</code> und <code>height</code> explizit im <code>&lt;canvas&gt;</code> und nicht über CSS.</p>
+</div>
+
+<p>Das <a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute#id">id</a>-Attribut ist eines der <a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">globalen Attribute</a> in HTML, welche auf alle HTML-Elemente anwendbar sind (sein sollen). Es empfiehlt sich eine <code>id</code> zu vergeben, dadurch wird der Zugriff mit JavaScript/CSS vereinfacht.</p>
+
+<p>Auch wenn man nicht mit CSS die Maße des canvas festlegen sollte, kann man jegliche andere CSS-Eigenschaften auf das {{HTMLElement("canvas")}}-Element anwenden (margin, border, background etc). Diese CSS-Regeln haben keinen Effekt auf das eigentliche Zeichnen (anders bei <a href="https://developer.mozilla.org/de/docs/SVG">SVG</a>)</p>
+
+<div id="section_2">
+<h3 id="Fallback">Fallback</h3>
+
+<p>Einige ältere Browser unterstützen das {{HTMLElement("canvas")}}-Element nicht, deshalb sollte man einen sogenannten Fallback schreiben, welcher nur den Browsern angezeigt wird, welche das {{HTMLElement("canvas")}}-Element nicht unterstützen. Browser, die das {{HTMLElement("canvas")}}-Element unterstützen zeigen diesen Fallback nicht.</p>
+
+<p>Beispiele:</p>
+
+<pre class="brush: html">&lt;canvas id="stockGraph" width="150" height="150"&gt;
+  aktueller Wechselkurs: $3.15 +0.15
+&lt;/canvas&gt;
+
+&lt;canvas id="clock" width="150" height="150"&gt;
+  &lt;img src="images/clock.png" width="150" height="150" alt=""/&gt;
+&lt;/canvas&gt;
+</pre>
+
+<h3 id="Benötigter_&lt;canvas>-Tag">Benötigter <code>&lt;/canvas&gt;</code>-Tag</h3>
+
+<p>Im Unterschied zu dem {{HTMLElement("img")}}-Element, <strong>benötigt</strong> das {{HTMLElement("canvas")}}-Element den Endtag  (<code>&lt;/canvas&gt;</code>).</p>
+
+<p>Wenn kein Fallback definiert wird, reicht ein <code>&lt;canvas id="foo" ...&gt;&lt;/canvas&gt;</code> völlig aus.</p>
+
+<h2 id="Der_Kontext">Der Kontext</h2>
+
+<p>{{HTMLElement("canvas")}} stellt mehrere Kontexte zum Zeichnen auf dem canvas zur Verfügung. Der Standardkontext ist der 2D-Kontext. Es gibt noch <a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a> (3D context) basierend auf <a class="external" href="http://www.khronos.org/opengles/" rel="external" title="http://en.wikipedia.org/wiki/OpenGL_ES">OpenGL ES</a>.</p>
+
+<p>Zuerst ist das canvas leer. Mithilfe von JavaScript definiert man den Kontext und zeichnet mit diesem. Das {{HTMLElement("canvas")}}-Element hat eine <a href="/en-US/docs/Web/API/HTMLCanvasElement#Methods" title="/en-US/docs/Web/API/HTMLCanvasElement#Methods">Methode</a> <code>getContext()</code>, mit der der Kontext definiert wird. <code>getContext()</code> benötigt nur einen String als Argument, den Typ des Kontextes. Für 2D-Grafiken ist dieser String "2d".</p>
+
+<pre class="brush: js">var canvas = document.getElementById("tutorial");
+var ctx = canvas.getContext("2d");
+</pre>
+
+<p>Die erste Zeile speichert in der Variablen <code>canvas</code> den DOM-Knoten unseres canvas mithilfe der {{domxref("document.getElementById()")}}-Methode. Danach wird die <code>getContext()</code>-Methode aufgerufen, um den Kontext in der Variablen <code>ctx</code> zu speichern.</p>
+
+<div id="section_5">
+<h2 id="Browserkompatibilität_prüfen">Browserkompatibilität prüfen</h2>
+
+<p>Nicht nur der Fallback kann die Browserkompatibilität prüfen. Auch mit JavaScript ist dies möglich, in dem die Existenz der <code>getContext()</code>-Methode überprüft wird. Beispiel:</p>
+
+<pre class="brush: js">var canvas = document.getElementById('tutorial');
+
+if (canvas.getContext) {
+  var ctx = canvas.getContext('2d');
+  // weiterer Code
+} else {
+  alert("Dein Browser unterstützt das &lt;canvas&gt; Element nicht")
+}
+</pre>
+</div>
+</div>
+
+<h2 id="HTML-Struktur">HTML-Struktur</h2>
+
+<p>Eine einfache HTML-Struktur reicht für unser Tutorial erst einmal völlig aus.</p>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Es gilt als schlechter Stil, Skripte direkt in HTML einzubetten. Wir tun das hier nur aus Gründen der Kompaktheit.</p>
+</div>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Canvas tutorial&lt;/title&gt;
+    &lt;script type="text/javascript"&gt;
+      function draw() {
+        var canvas = document.getElementById('tutorial');
+        if (canvas.getContext) {
+          var ctx = canvas.getContext('2d');
+        }
+      }
+    &lt;/script&gt;
+    &lt;style type="text/css"&gt;
+      canvas { border: 1px solid black; }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body onload="draw();"&gt;
+    &lt;canvas id="tutorial" width="150" height="150"&gt;&lt;/canvas&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Das Skript enthält eine Funktion <code>draw()</code>, die nach dem Laden der Seite ausgeführt wird; dies geschieht durch Hören auf das {{event("load")}}-Ereignis des Dokuments. Diese oder eine ähnliche Funktion könnte auch durch {{domxref("WindowTimers.setTimeout", "window.setTimeout()")}}, {{domxref("WindowTimers.setInterval", "window.setInterval()")}} oder jeden anderen Ereignisbehandler aufgerufen werden, solange die Seite vorher geladen wurde.</p>
+
+<p>So sieht die Vorlage in Aktion aus. Wie man hier sehen kann, ist sie anfangs leer.</p>
+
+<p>{{EmbedLiveSample("HTML-Struktur", 160, 160)}}</p>
+
+<h2 id="Einfaches_Beispiel">Einfaches Beispiel</h2>
+
+<p>Im einfachen Beispiel werden zwei Rechtecke gezeichnet, eins mit Transparenz.</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+ &lt;head&gt;
+  &lt;script type="application/javascript"&gt;
+    function draw() {
+      var canvas = document.getElementById("canvas");
+      if (canvas.getContext) {
+        var ctx = canvas.getContext("2d");
+
+        ctx.fillStyle = "rgb(200,0,0)";
+        ctx.fillRect(10, 10, 55, 50);
+
+        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
+        ctx.fillRect(30, 30, 55, 50);
+      }
+    }
+  &lt;/script&gt;
+ &lt;/head&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Demo:</p>
+
+<p>{{EmbedLiveSample("Einfaches_Beispiel", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}</p>
+
+<p>{{PreviousNext("Web/Guide/HTML/Canvas_tutorial", "Web/Guide/HTML/Canvas_tutorial/Drawing_shapes")}}</p>
diff --git a/files/de/web/guide/html/canvas_tutorial/index.html b/files/de/web/guide/html/canvas_tutorial/index.html
new file mode 100644
index 0000000000..487f5b7984
--- /dev/null
+++ b/files/de/web/guide/html/canvas_tutorial/index.html
@@ -0,0 +1,51 @@
+---
+title: Canvas Tutorial
+slug: Web/Guide/HTML/Canvas_Tutorial
+translation_of: Web/API/Canvas_API/Tutorial
+---
+<p><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas"><img alt="" src="https://mdn.mozillademos.org/files/257/Canvas_tut_examples.jpg" style="float: right; height: 450px; width: 200px;"></a></p>
+
+<p><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas"><strong><code>&lt;canvas&gt;</code></strong></a> ("Leinwand") ist ein <a href="/en-US/docs/HTML" title="HTML">HTML</a> Element, auf das man mit Hilfe von Skripten (normalerweise <a href="/de/docs/JavaScript" title="JavaScript">JavaScript</a>) Animationen, Grafiken oder Bilder projiziert. Die Bilder rechts zeigen Beispiele, die sich mit dem <code>&lt;canvas&gt;</code>-Element erstellen lassen.</p>
+
+<p><code>Das &lt;canvas&gt;-</code>Element wurde zuerst von Apple für das Mac OS X Dashboard vorgestellt und später in Safari und Google Chrome implementiert. <a href="/en-US/docs/Gecko" title="Gecko">Gecko</a> 1.8-basierte Browser wie Firefox 1.5 und jünger unterstützen dieses Element ebenfalls. Das <code>&lt;canvas&gt;</code>-Element ist Teil der <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WhatWG Web applications 1.0</a> Spezifikation (HTML5).</p>
+
+<p><span class="seoSummary">Dieses Tutorial beschreibt die Grundlagen des Zeichnens von 2d-Grafiken mit dem &lt;canvas&gt;-Element. Die Beispiele sollen die Möglichkeiten des Canvas aufzeigen. Der zugehörige Code dient als Einführung und kann als Vorlage für eigenen Content dienen.</span></p>
+
+<h2 id="Before_you_start" name="Before_you_start">Vorbereitung</h2>
+
+<p>Das <code>&lt;canvas&gt;</code>-Element ("Leinwand") sinnvoll zu nutzen ist nicht schwierig, setzt aber ein einfaches Verständnis von <a href="/de/docs/HTML" title="HTML">HTML</a> und <a href="/de/docs/JavaScript" title="JavaScript">JavaScript</a> voraus. Einige ältere Browser unterstützen das <code>&lt;canvas&gt;</code>-Element nicht. Die Standardgröße des Canvas beträgt 300 x 150 Pixel (Breite x Höhe). Selbstverständlich lassen diese sich über die Attribute <code>height</code> und <code>width</code> oder mit Hilfe von <a href="/de/docs/CSS" title="HTML">CSS</a> ändern. Um auf dem <code>&lt;canvas&gt;</code>-Element zu zeichnen, nutzen Entwickler meist die JavaScript-Canvas-API "on the fly".</p>
+
+<h2 id="In_this_tutorial" name="In_this_tutorial">In diesem Tutorial</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/de/docs/Web/Guide/HTML/Canvas_Tutorial/Grundlagen" title="Canvas_tutorial/Basic_usage">Grundlagen</a></li>
+ <li><a href="https://developer.mozilla.org/de/docs/Web/Guide/HTML/Canvas_Tutorial/Formen_zeichnen" title="Canvas_tutorial/Drawing_shapes">Formen zeichnen</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images" title="Canvas_tutorial/Using_images">Bilder</a></li>
+ <li><a href="/de/docs/Web/Guide/HTML/Canvas_Tutorial/Applying_styles_and_colors" title="Canvas_tutorial/Applying_styles_and_colors">Stile und Farben verwenden</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Transformations" title="Canvas_tutorial/Transformations">Transformations</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing" title="Canvas_tutorial/Compositing">Compositing</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Basic_animations" title="Canvas_tutorial/Basic_animations">Basic animations</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas" title="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas">Optimizing the canvas</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas">Canvas topic page</a></li>
+ <li><a href="/en-US/docs/HTML/Canvas/Drawing_Graphics_with_Canvas" title="Drawing_Graphics_with_Canvas">Drawing Graphics with Canvas</a></li>
+ <li><a href="/en-US/docs/tag/Canvas_examples" title="tag/Canvas_examples">Canvas examples</a></li>
+ <li><a class="external" href="http://html5tutorial.com" title="http://html5tutorial.com">HTML5 Tutorial</a></li>
+ <li><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">Drawing Text Using a Canvas</a></li>
+ <li><a class="external" href="http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/HTML-canvas-guide/AddingText/AddingText.html#//apple_ref/doc/uid/TP40010542-CH6-SW4" title="Adding Text to Canvas">Adding Text to Canvas</a></li>
+ <li><a class="external" href="http://canvimation.github.com/" title="http://canvimation.github.com/">Canvas Drawing and Animation Application</a></li>
+ <li><a class="external" href="http://billmill.org/static/canvastutorial/" title="http://billmill.org/static/canvastutorial/">Interactive canvas tutorial</a></li>
+ <li><a class="external" href="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html" title="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html">Canvas Cheat Sheet with all attributes and methods</a></li>
+ <li><a class="external" href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">Adobe Illustrator to Canvas plug-in</a></li>
+ <li><a class="external" href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a></li>
+ <li><a class="external" href="http://html5tutorial.com/how-to-draw-n-grade-bezier-curve-with-canvas-api" title="http://html5tutorial.com/how-to-draw-n-grade-bezier-curve-with-canvas-api">How to draw N grade Bézier curves with the Canvas API</a></li>
+ <li><a class="external" href="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/" title="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/">31 days of canvas tutorials</a></li>
+ <li><a href="http://www.w3.org/TR/2dcontext/" title="http://www.w3.org/TR/2dcontext/">W3C Standard</a></li>
+ <li><a href="http://www.tutorialspark.com/html5/HTML5_canvas_Intro.php" title="http://www.tutorialspark.com/html5/HTML5_canvas_Intro.php">HTML5 Canvas tutorials and reference</a></li>
+</ul>
+
+<div>{{ Next("Web/Guide/HTML/Canvas_tutorial/Basic_usage") }}</div>
diff --git a/files/de/web/guide/html/content_editable/index.html b/files/de/web/guide/html/content_editable/index.html
new file mode 100644
index 0000000000..03ab2fdfe0
--- /dev/null
+++ b/files/de/web/guide/html/content_editable/index.html
@@ -0,0 +1,52 @@
+---
+title: Content Editable
+slug: Web/Guide/HTML/Content_Editable
+tags:
+  - HTML5 Inhalt ändern editierbar
+translation_of: Web/Guide/HTML/Editable_content
+---
+<p><span class="seoSummary">In HTML5 kann jedes Element editiert werden. Mit JavaScript Event handlers können Sie Ihre Webseite in einen umfangreichen und schnellen Texteditor verwandeln. Dieser Artikel gibt einige Informationen über diese Funktion.</span></p>
+
+<h2 id="Kompatibilität">Kompatibilität</h2>
+
+<p>Content editable ist kompatibel mit folgenden Browsern.</p>
+
+<ul>
+ <li>Firefox 3.5+</li>
+ <li>Firefox for Android 19+</li>
+ <li>Chrome 4.0+</li>
+ <li>Internet Explorer 5.5+</li>
+ <li>Safari 3.1+</li>
+ <li>Opera 9+</li>
+ <li>iOS Safari 5.0+</li>
+ <li>Android Browser 3.0+</li>
+ <li>Opera Mobile 12.1+</li>
+ <li>Chrome for Android 25+</li>
+</ul>
+
+<p>Keine Unterstützung in Opera Mini.</p>
+
+<h2 id="Wie_funktioniert_es">Wie funktioniert es?</h2>
+
+<p>Ändere das {{DOMXRef("HTMLElement.contentEditable", "contentEditable")}} Attribut zu <code>true</code> in deinem HTML Element. Es kann in nahezu allen HTML Elementen genutzt werden.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Ein einfaches Beispiel:</p>
+
+<pre class="brush: html">&lt;div contenteditable="true"&gt;
+  This text can be edited by the user.
+&lt;/div&gt;</pre>
+
+<p>Das obige Beispiel kann direkt ausprobiert werden:</p>
+
+<p>{{ EmbedLiveSample('Beispiele') }}</p>
+
+<h2 id="Weiterführende_Informationen">Weiterführende Informationen</h2>
+
+<pre class="code">user_pref("capability.policy.policynames", "allowclipboard");
+user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org");
+user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess");
+user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");</pre>
+
+<p><a href="/en/Midas" title="en/Midas">How to interact with the content </a> (old IE style API) and <a href="/en/Rich-Text_Editing_in_Mozilla" title="en/rich-text editing in mozilla">here</a></p>
diff --git a/files/de/web/guide/html/inhaltskategorien/index.html b/files/de/web/guide/html/inhaltskategorien/index.html
new file mode 100644
index 0000000000..03687c47af
--- /dev/null
+++ b/files/de/web/guide/html/inhaltskategorien/index.html
@@ -0,0 +1,153 @@
+---
+title: Inhaltskategorien
+slug: Web/Guide/HTML/Inhaltskategorien
+tags:
+  - Anleitung
+  - HTML
+  - HTML5
+  - NeedsTranslation
+  - Web
+  - erweitert
+translation_of: Web/Guide/HTML/Content_categories
+---
+<p><span class="seoSummary">Für jedes HTML-Element gibt es Regeln, welche definieren, welchen Inhalt es hat. Diese Regeln sind zu Inhaltsmodellen gruppiert, welche für mehrere Elemente gelten. Jedes HTML-Element gehört zu null oder einem oder mehreren Inhaltsmodellen, von welchen jedes die Regeln bestimmt, welche der Inhalt des Elementes in einem gültigen HTML-Document befolgen muss.</span></p>
+
+<p>Es gibt drei Typen von Inhaltskategorien:</p>
+
+<ul>
+ <li>Hauptinhaltskategorien(engl. <code>main content categories</code>), welche Inhaltsregeln beschreiben, welche bei vielen Elementen gültig sind;</li>
+ <li>Formzusammenhängende Inhaltskategorien(engl. <code>form-related content categories</code>), welche Inhaltsregeln beschreiben, welche für formzusammenhängende Elemente gelten;</li>
+ <li>Spezifische Inhaltskategorien(engl.<code> specific content categories</code>), welche seltene Kategorien beschreiben, welche nur für wenige Elemente gelten, manchmal nur in einem spezifischen Context.</li>
+</ul>
+
+<div style="width: 50%;"><a href="/@api/deki/files/6244/=Content_categories_venn.png" title="Content_categories_venn.png"><img alt="Content_categories_venn.png" class="default internal" src="/@api/deki/files/6244/=Content_categories_venn.png?size=webview" style="height: 200px; width: 350px;"></a></div>
+
+<h2 id="Hauptinhaltskategorien">Hauptinhaltskategorien</h2>
+
+<h3 id="Metadateninhalt">Metadateninhalt</h3>
+
+<p>Elemente, welche zu der <em>Metadata</em>inhaltscategorie(engl.<em>metadata content category</em>) gehören, verändern die Präsentation oder das Verhalten des Restes des Documentes, stellen Links zu anderen Documenten ein, oder enthalten andere <em>out-of-band</em>-Information.</p>
+
+<p>Elemente, die zu dieser Kategorie gehören, sind {{HTMLElement("base")}}, {{HTMLElement("command")}}, {{HTMLElement("link")}}, {{HTMLElement("meta")}}, {{HTMLElement("noscript")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} und {{HTMLElement("title")}}.</p>
+
+<h3 id="Fließender_Inhalt"><a name="fließender_Inhalt">Fließender Inhalt</a></h3>
+
+<p>Elemente, die zu der Kategorie des fließenden Inhaltes(engl.<em>flow content category</em> gehören, enthalten typischerweise Text oder eingebetteten Inhalt. Sie sind: {{HTMLElement("a")}}, {{HTMLElement("abbr")}}, {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}},{{HTMLElement("bdo")}}, {{HTMLElement("bdi")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("del")}}, {{HTMLElement("details")}}, {{HTMLElement("dfn")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("ins")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("main")}}, {{HTMLElement("map")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("menu")}}, {{HTMLElement("meter")}}, {{HTMLElement("nav")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("ol")}}, {{HTMLElement("output")}}, {{HTMLElement("p")}}, {{HTMLElement("pre")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("s")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("section")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("table")}}, {{HTMLElement("template")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("ul")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} und Text.</p>
+
+<p>Einige wenige Elemente gehören zu dieser Kategorie, aber nur, wenn eine specifische Bedingung erfüllt ist:</p>
+
+<ul>
+ <li>{{HTMLElement("area")}}, falls es ein Nachfolger eines {{HTMLElement("map")}}-Elementes ist</li>
+ <li>{{HTMLElement("link")}}, falls das <a href="/en-US/docs/HTML/Global_attributes#attr-itemprop" title="HTML/Global attributes#itemprop"><strong>itemprop</strong></a>-Attribut geschrieben ist</li>
+ <li>{{HTMLElement("meta")}}, falls das <a href="/en-US/docs/HTML/Global_attributes#attr-itemprop" title="HTML/Global attributes#itemprop"><strong>itemprop</strong></a>-Attribut geschrieben ist</li>
+ <li>{{HTMLElement("style")}}, falls das {{htmlattrxref("scoped","style")}}-Attribut geschrieben ist</li>
+</ul>
+
+<h3 id="Unterteilender_Inhalt">Unterteilender Inhalt</h3>
+
+<p>Elemente, die zu dem <em>sectioninig-content</em>-Modell gehören, erstellen eine <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Section in der laufenden Outline</a>, welche das Aussehen eines {{HTMLElement("header")}}-Elementes , {{HTMLElement("footer")}}-Elementes, und <a href="#Heading_content" title="#heading content">Überschrifteninhaltes</a> definiert.</p>
+
+<p>Elemente, die zu dieser Categorie gehören, sind {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} und {{HTMLElement("section")}}. </p>
+
+<div class="note">
+<p><em>Notiz:</em> Nicht dieses Modell mit der <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document#sectioning_root" title="Sections and Outlines of an HTML5 document#sectioning root">Sectionierende-Wurzel</a>-Kategorie(engl.<em>sectioning root category</em>, welche ihren Inhalt von der regularen Outline isoliert, verwechseln.</p>
+</div>
+
+<h3 id="Überschrifteninhalt">Überschrifteninhalt</h3>
+
+<p>Überschrifteninhalt definiert den Titel einer Section, dabei gibt es keinen Unterschied, ob es mit einem expliciten <a href="#Sectionierender_Inhalt" title="#Sectionierender Inhalt">sectionierenden Inhalt</a> gekennzeichnet oder implicite durch den Überschrifteninhalt selbst definiert ist.</p>
+
+<p>Elemente, die zu dieser Categorie gehören, sind {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} und {{HTMLElement("hgroup")}}.</p>
+
+<div class="note">
+<p><em>Notiz:</em> Obwohl es meistens Überschrifteninhalt enthält, ist {{HTMLElement("header")}} selbst kein Überschrifteninhalt.</p>
+</div>
+
+<h3 id="Gestaltender_Inhalt">Gestaltender Inhalt</h3>
+
+<p>Gestaltender Inhalt definiert den Text und das Markup, welche er enthält. Folgen von phrasierendem Inhalt sind Paragraphen.</p>
+
+<p>Elemente, die zu dieser Categorie gehören, sind {{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{HTMLElement("command")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("meter")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} und einfacher Text (welcher nicht nur aus Leerzeichen-Zeichen besteht).</p>
+
+<p>Einige andere Elemente, die zu dieser Categorie gehören, aber nur, falls eine bestimmte Condition erfüllt ist:</p>
+
+<ul>
+ <li>{{HTMLElement("a")}}, falls es nur phrasierenden Inhalt enthält</li>
+ <li>{{HTMLElement("area")}}, falls es das Descendens eines {{HTMLElement("map")}}-Elementes ist</li>
+ <li>{{HTMLElement("del")}}, falls es nur phrasierenden Inhalt enthält</li>
+ <li>{{HTMLElement("ins")}}, falls es nur phrasierenden Inhalt enthält</li>
+ <li>{{HTMLElement("link")}}, falls das <a href="/de/docs/HTML/Globale_Attribute#itemprop" title="HTML/Globale Attribute#itemprop"><strong>itemprop</strong></a>-Attribut geschrieben ist</li>
+ <li>{{HTMLElement("map")}}, falls es nur phrasierenden Inhalt enthält</li>
+ <li>{{HTMLElement("meta")}}, falls das <a href="/de/docs/HTML/Globale_Attribute#itemprop" title="HTML/Globale Attributes#itemprop"><strong>itemprop</strong></a>-Attribut geschrieben ist.</li>
+</ul>
+
+<h3 id="Eingebetter_Inhalt">Eingebetter Inhalt</h3>
+
+<p>Eingebetteter Inhalt importiert eine andere Ressource oder gibt Inhalt einer anderen Markup-Sprache oder Namensraumes in das Document ein. Elemente in dieser Categorie sind: {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{SVGElement("svg")}}, {{HTMLElement("video")}}.</p>
+
+<h3 id="Interaktiver_Inhalt"><a name="interactiver_Inhalt">Interaktiver Inhalt</a></h3>
+
+<p>Interaktiver Inhalt enthält Elemente, die speziell für Interaktionen mit dem Benutzer gedacht sind. Folgende Elemente geöhren zu dieser Kategorie: {{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.<br>
+ Einige Elemente sind nur unter spezifischen Conditionen in dieser Categorie:</p>
+
+<ul>
+ <li>{{HTMLElement("audio")}}, falls das {{htmlattrxref("controls", "audio")}}-Attribut geschrieben ist</li>
+ <li>{{HTMLElement("img")}}, falls das {{htmlattrxref("usemap", "img")}}-Attribut geschrieben ist</li>
+ <li>{{HTMLElement("input")}}, falls das {{htmlattrxref("type", "input")}}-Attribut nicht im versteckten Status ist.</li>
+ <li>{{HTMLElement("menu")}}, falls das {{htmlattrxref("type", "menu")}}-Attribut im Toolbar-Status ist</li>
+ <li>{{HTMLElement("object")}}, falls das {{htmlattrxref("usemap", "object")}}-Attribut geschrieben ist</li>
+ <li>{{HTMLElement("video")}}, falls das {{htmlattrxref("controls", "video")}}-Attribut geschrieben ist.</li>
+</ul>
+
+<h3 id="Fühlbarer_Inhalt">Fühlbarer Inhalt</h3>
+
+<p> A content is palpable when it's neither empty nor hidden. Elements whose model is flow content or phrasing content should have at least one node which is palpable.</p>
+
+<h3 id="Formularbezogener_Inhalt">Formularbezogener Inhalt</h3>
+
+<p>Formularassoziierter Inhalt umfasst Elemente mit einem Formularbezeichner, welcher durch ein Formularattribut verfügbar gemacht wird. Ein Formularbezeichner ist entweder das enthaltende {{HTMLElement ("form")}} Element oder das Element, dessen ID im Formularattribut angegeben ist.</p>
+
+<ul>
+ <li>{{HTMLElement("button")}}</li>
+ <li>{{HTMLElement("fieldset")}}</li>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{HTMLElement("keygen")}}</li>
+ <li>{{HTMLElement("label")}}</li>
+ <li>{{HTMLElement("meter")}}</li>
+ <li>{{HTMLElement("object")}}</li>
+ <li>{{HTMLElement("output")}}</li>
+ <li>{{HTMLElement("progress")}}</li>
+ <li>{{HTMLElement("select")}}</li>
+ <li>{{HTMLElement("textarea")}}</li>
+</ul>
+
+<p>This category contains several sub-categories:</p>
+
+<dl>
+ <dt><a id="Formular_gelistet" name="Formular_gelistet">gelistet</a></dt>
+ <dd>Elements that are listed in the <a href="/en-US/docs/DOM/form.elements" title="DOM/form.elements">form.elements</a> and fieldset.elements IDL collections. Contains {{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.</dd>
+ <dt><a id="Formular_bezeichenbar" name="Formular_bezeichenbar">bezeichenbar</a></dt>
+ <dd>Elements that can be associated with {{HTMLElement("label")}} elements. Contains {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("meter")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.</dd>
+ <dt><a id="Formular_abschickbar" name="Formular_abschickbar">abschickbar</a></dt>
+ <dd>Elements that can be used for constructing the form data set when the form is submitted. Contains {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.</dd>
+ <dt><a id="Formular_zurücksetzbar" name="Formular_zurücksetzbar">zurücksetzbar</a></dt>
+ <dd>Elements that can be affected when a form is reset. Contains {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("output")}},{{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.</dd>
+</dl>
+
+<h2 id="Transparentes_Inhaltsmodell">Transparentes Inhaltsmodell</h2>
+
+<p>If an element has a transparent content model, then its contents must be structured such that they would be valid HTML 5, even if the transparent element were removed and replaced by the child elements.</p>
+
+<p>For example, the {{HTMLElement("del")}} and {{HTMLELement("ins")}} elements are transparent:</p>
+
+<pre class="notranslate">&lt;p&gt;We hold these truths to be &lt;del&gt;&lt;em&gt;sacred &amp;amp; undeniable&lt;/em&gt;&lt;/del&gt; &lt;ins&gt;self-evident&lt;/ins&gt;.&lt;/p&gt;
+</pre>
+
+<p>If those elements were removed, this fragment would still be valid HTML (if not correct English).</p>
+
+<pre class="notranslate">&lt;p&gt;We hold these truths to be &lt;em&gt;sacred &amp;amp; undeniable&lt;/em&gt; self-evident.&lt;/p&gt;
+</pre>
+
+<h2 id="Andere_Inhaltsmodelle">Andere Inhaltsmodelle</h2>
+
+<p>Sectioning root.</p>
diff --git a/files/de/web/guide/html/sections_and_outlines_of_an_html5_document/index.html b/files/de/web/guide/html/sections_and_outlines_of_an_html5_document/index.html
new file mode 100644
index 0000000000..882a3333dc
--- /dev/null
+++ b/files/de/web/guide/html/sections_and_outlines_of_an_html5_document/index.html
@@ -0,0 +1,351 @@
+---
+title: Verwendung von HTML-Abschnitten und -Gliederungen
+slug: Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document
+translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines
+---
+<div>{{HTMLSidebar}}</div>
+
+<div class="warning">
+<p><strong>Wichtig:</strong> Es gibt keine Implementierungen des vorgeschlagenen Gliederungsalgorithmus in Webbrowsern oder Unterstützungstechnologie. Es war nie Teil einer endgültigen W3C-Spezifikation. Daher sollte der <a href="https://www.w3.org/TR/html5/sections.html#outline">Gliederungsalgorithmus</a> <em>nicht verwendet werden</em>, um den Benutzern die Dokumentstruktur zu vermitteln. Autoren sollten den <a href="https://www.w3.org/TR/html5/sections.html#rank">Überschriftenrang</a> (<code><a href="https://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a></code>-<code><a href="http://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h6</a></code>) verwenden, um die Dokumentstruktur zu vermitteln.</p>
+</div>
+
+<p>Die HTML5-Spezifikation bietet Webentwicklern mehrere neue Elemente, mit denen sie die Struktur eines Webdokuments mit Standardsemantik beschreiben können. In diesem Dokument werden diese Elemente beschrieben und wie man sie einsetzt, um die gewünschte Gliederung für ein Dokument zu definieren.</p>
+
+<h2 id="Dokumentstruktur_in_HTML_4">Dokumentstruktur in HTML 4</h2>
+
+<p>Die Struktur eines Dokuments, d. h. die semantische Struktur dessen, was sich zwischen <code>&lt;body&gt;</code> und <code>&lt;/body&gt;</code> befindet, ist von grundlegender Bedeutung, um dem Benutzer eine Seite zu präsentieren. HTML4 verwendet den Begriff der Abschnitte und Unterabschnitte eines Dokuments, um seine Struktur zu beschreiben. Ein Abschnitt wird definiert durch ein Element ({{HTMLElement("div")}}) mit darin enthaltenen Überschriftenelementen ({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}} oder {{HTMLElement("h6")}}) die dessen Titel definieren. Die Beziehungen dieser Elemente führen zur Struktur des Dokuments und seiner Gliederung.</p>
+
+<p>Folgendes Markup:</p>
+
+<pre class="brush: html">&lt;div class="section" id="forest-elephants" &gt;
+  &lt;h1&gt;Forest elephants&lt;/h1&gt;
+  &lt;p&gt;In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  &lt;div class="subsection" id="forest-habitat" &gt;
+    &lt;h2&gt;Habitat&lt;/h2&gt;
+    &lt;p&gt;Forest elephants do not live in trees but among them.
+     ...this subsection continues...
+  &lt;/div&gt;
+&lt;/div&gt; </pre>
+
+<p>führt zu folgender Gliederung (ohne die implizierten Ebenennummern):</p>
+
+<pre>1. Forest elephants
+   1.1 Habitat
+</pre>
+
+<p>Die {{HTMLElement("div")}}-Elemente sind nicht zwingend erforderlich, um einen neuen Abschnitt zu definieren. Die bloße Anwesenheit eines Überschriftselements reicht aus, um einen neuen Abschnitt anzuzeigen. Deshalb führt:</p>
+
+<pre class="brush: html">&lt;h1&gt;Forest elephants&lt;/h1&gt;
+  &lt;p&gt;In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  &lt;h2&gt;Habitat&lt;/h2&gt;
+  &lt;p&gt;Forest elephants do not live in trees but among them.
+    ...this subsection continues...
+  &lt;h2&gt;Diet&lt;/h2&gt;
+&lt;h1&gt;Mongolian gerbils&lt;/h1&gt;
+</pre>
+
+<p>zu folgender Gliederung:</p>
+
+<pre>1. Forest elephants
+   1.1 Habitat
+   1.2 Diet
+2. Mongolian gerbils
+</pre>
+
+<h2 id="Durch_HTML5_gelöste_Probleme">Durch HTML5 gelöste Probleme</h2>
+
+<p>Die HTML 4-Definition der Struktur eines Dokuments und seines implizierten Umrißalgorithmus ist sehr grob und führt zu zahlreichen Problemen:</p>
+
+<ol>
+ <li>Die Verwendung von {{HTMLElement("div")}} zum Definieren semantischer Abschnitte ohne Definieren bestimmter Werte für die <strong>Klassenattribute</strong> macht die Automatisierung des Gliederungsalgorithmus unmöglich ("Ist dieses {{HTMLElement("div")}} Teil der Gliederung der Seite, definiert es einen Abschnitt oder einen Unterabschnitt?" oder "Dient dieses {{HTMLElement("div")}} rein der Präsentation, um nur Styles darauf anzuwenden?"). Mit anderen Worten, die HTML4-Spezifikation ist sehr ungenau, was ein Abschnitt ist und wie sein Geltungsbereich definiert ist. Die automatische Generierung von Gliederungen ist insbesondere für {{interwiki("wikipedia", "Unterstützungstechnologie")}} wichtig, die die Art und Weise, in der sie den Benutzern Informationen präsentieren, an die Struktur des Dokuments anpassen können. HTML5 macht {{HTMLElement("div")}}-Elemente für den Gliederungsalgorithmus überflüssig und führt für Abschnitte das neue HTML-Element {{HTMLElement("section")}} ein.</li>
+ <li>Das Zusammenführen mehrerer Dokumente ist schwierig: Wenn Sie ein Unterdokument in ein Hauptdokument einfügen, müssen Sie die Ebene des HTML-Überschriftenelements so ändern, dass die Gliederung erhalten bleibt. Dies wird in HTML5 gelöst, da die neu eingeführten Abschnittselemente ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} und {{HTMLElement("aside")}}) immer Unterabschnitte ihres nächsten Vorfahrenabschnitts sind, unabhängig davon, welche Abschnitte durch interne Überschriften erstellt werden.</li>
+ <li>In HTML4 ist jeder Abschnitt Teil der Dokumentgliederung. Dokumente sind jedoch oft nicht so linear. Ein Dokument kann spezielle Abschnitte mit Informationen enthalten, die nicht Teil des Hauptflusses sind, bspw. ein Werbeblock oder ein Erklärungsfeld. HTML5 führt das Element {{HTMLElement("aside")}} ein, sodass solche Abschnitte von der Hauptgliederung ausgenommen werden können.</li>
+ <li>Da in HTML4 jeder Abschnitt Teil der Dokumentgliederung ist, gibt es keine Möglichkeit, Abschnitte mit Informationen zu haben, die sich nicht auf das Dokument, sondern auf die gesamte Website beziehen, wie Logos, Menüs, Inhaltsverzeichnisse oder Copyright-Informationen und rechtliche Hinweise. Zu diesem Zweck führt HTML5 drei neue Elemente ein: {{HTMLElement("nav")}} für Linksammlungen, z. B. für ein Inhaltsverzeichnis, und {{HTMLElement("footer")}} und {{HTMLElement("header")}} für Webseiten-bezogene Informationen. Beachten Sie, dass {{HTMLElement("header")}} und {{HTMLElement("footer")}} keine abschnittsweisen Inhalte wie {{HTMLElement("section")}} sind, sondern nur dazu dienen Teile eines Abschnitts semantisch zu markieren.</li>
+</ol>
+
+<p>HTML5 verbessert allgemeinhin die Abschnitts- und Überschriftsfunktionen, sodass die Gliederungen von Dokumenten vorhersehbar sind und vom Browser verwendet werden können, um die Benutzererfahrung zu verbessern.</p>
+
+<h2 id="Der_HTML5-Gliederungsalgorithmus">Der HTML5-Gliederungsalgorithmus</h2>
+
+<div class="warning">
+<p><strong>Wichtig:</strong> Es gibt keine Implementierungen des vorgeschlagenen Gliederungsalgorithmus in Webbrowsern oder Unterstützungstechnologie. Es war nie Teil einer endgültigen W3C-Spezifikation. Daher sollte der <a href="https://www.w3.org/TR/html5/sections.html#outline">Gliederungsalgorithmus</a> <em>nicht verwendet werden</em>, um den Benutzern die Dokumentstruktur zu vermitteln. Autoren sollten den <a href="https://www.w3.org/TR/html5/sections.html#rank">Überschriftenrang</a> (<code><a href="https://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a></code>-<code><a href="http://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h6</a></code>) verwenden, um die Dokumentstruktur zu vermitteln.</p>
+</div>
+
+<p>Betrachten wir die Algorithmen, die der Verarbeitung von Abschnitten und Gliederungen in HTML zugrunde liegen.</p>
+
+<h3 id="Abschnitte_definieren">Abschnitte definieren</h3>
+
+<p>Der gesamte Inhalt des Elements {{HTMLElement("body")}} ist Teil eines Abschnitts. Abschnitte in HTML5 können verschachtelt sein. Neben dem durch das {{HTMLElement("body")}}-Element definierten Hauptabschnitt werden Abschnittsgrenzwerte entweder explizit oder implizit definiert. Ausdrücklich definierte Abschnitte sind der Inhalt der Tags {{HTMLElement("body")}}, {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}} und {{HTMLElement("nav")}}.</p>
+
+<div class="note">Jeder Abschnitt kann eine eigene Überschriftenhierarchie haben. Daher kann auch ein verschachtelter Abschnitt ein {{HTMLElement("h1")}} haben. Siehe {{anch("Überschriften definieren")}}</div>
+
+<p>Sehen wir uns ein Beispiel an — hier haben wir ein Dokument mit einem Abschnitt und einer Fußzeile auf der obersten Ebene definiert. Innerhalb des Abschnitts der obersten Ebene haben wir drei Unterabschnitte, die durch zwei {{htmlelement("section")}}-Elemente und ein {{htmlelement("aside")}}-Element definiert werden:</p>
+
+<pre class="brush: html">&lt;section&gt;
+
+  &lt;h1&gt;Forest elephants&lt;/h1&gt;
+
+  &lt;section&gt;
+    &lt;h1&gt;Introduction&lt;/h1&gt;
+    &lt;p&gt;In this section, we discuss the lesser known forest elephants.&lt;/p&gt;
+  &lt;/section&gt;
+
+  &lt;section&gt;
+    &lt;h1&gt;Habitat&lt;/h1&gt;
+    &lt;p&gt;Forest elephants do not live in trees but among them.&lt;/p&gt;
+  &lt;/section&gt;
+
+  &lt;aside&gt;
+    &lt;p&gt;advertising block&lt;/p&gt;
+  &lt;/aside&gt;
+
+&lt;/section&gt;
+
+&lt;footer&gt;
+  &lt;p&gt;(c) 2010 The Example company&lt;/p&gt;
+&lt;/footer&gt;</pre>
+
+<p>Dies erzeugt folgende Gliederung:</p>
+
+<pre>1. Forest elephants
+   1.1 Introduction
+   1.2 Habitat
+</pre>
+
+<h3 id="Überschriften_definieren">Überschriften definieren</h3>
+
+<div class="warning">
+<p><strong>Wichtig:</strong> Es gibt keine Implementierungen des vorgeschlagenen Gliederungsalgorithmus in Webbrowsern oder Unterstützungstechnologie. Es war nie Teil einer endgültigen W3C-Spezifikation. Daher sollte der <a href="https://www.w3.org/TR/html5/sections.html#outline">Gliederungsalgorithmus</a> <em>nicht verwendet werden</em>, um den Benutzern die Dokumentstruktur zu vermitteln. Autoren sollten den <a href="https://www.w3.org/TR/html5/sections.html#rank">Überschriftenrang</a> (<code><a href="https://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a></code>-<code><a href="http://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h6</a></code>) verwenden, um die Dokumentstruktur zu vermitteln.</p>
+</div>
+
+<p>Während die HTML-Abschnittselemente die Struktur des Dokuments definieren, müssen für eine sinnvolle Gliederung auch Überschriften verwendet werden. Die Grundregel ist einfach: Das erste HTML-Überschriftenelement (eines von {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}) definiert die Überschrift des aktuellen Abschnitts.</p>
+
+<p>Die Überschriftenelemente haben einen Rang, der durch die Nummer im Elementnamen angegeben wird, wobei {{HTMLElement("h1")}} den <em>höchsten</em> Rang und {{HTMLElement("h6")}} den <em>niedrigsten</em> Rang hat. Die relative Rangordnung ist nur innerhalb eines Abschnitts von Bedeutung. Die Struktur der Abschnitte bestimmt die Gliederung, nicht die Rangfolge der Abschnitte. Betrachten Sie zum Beispiel diesen Code:</p>
+
+<p> </p>
+
+<pre class="brush:xml">&lt;section&gt;
+  &lt;h1&gt;Forest elephants&lt;/h1&gt;
+  &lt;p&gt;In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  &lt;section&gt;
+    &lt;h2&gt;Habitat&lt;/h2&gt;
+    &lt;p&gt;Forest elephants do not live in trees but among them.
+        ...this subsection continues...
+  &lt;/section&gt;
+&lt;/section&gt;
+&lt;section&gt;
+  &lt;h3&gt;Mongolian gerbils&lt;/h3&gt;
+  &lt;p&gt;In this section, we discuss the famous mongolian gerbils.
+     ...this section continues...
+&lt;/section&gt;</pre>
+
+<p>Dies erzeugt folgende Gliederung:</p>
+
+<pre>1. Forest elephants
+   1.1 Habitat
+2. Mongolian gerbils</pre>
+
+<p>Beachten Sie, dass der Rang des Überschriftenelements (im Beispiel {{HTMLElement("h1")}} für den ersten Abschnitt der obersten Ebene, {{HTMLElement("h2")}} für den Unterabschnitt und {{HTMLElement("h3")}} für den zweiten Abschnitt der oberen Ebene) nicht wichtig ist (jeder Rang kann als Überschrift eines explizit definierten Abschnitts verwendet werden, obwohl dies nicht empfohlen wird).</p>
+
+<h3 id="Implizierte_Abschnitte">Implizierte Abschnitte</h3>
+
+<p> </p>
+
+<p>Da die HTML5-Abschnittselemente zum Definieren einer Gliederung nicht zwingend erforderlich sind, besteht die Möglichkeit Abschnitte ohne sie zu definieren, um die Kompatibilität mit HTML4 zu gewährleisten. Dies nennt man einen <em>implizierten Abschnitt</em>.</p>
+
+<p>Die Überschriftenelemente ({{HTMLElement("h1")}} bis {{HTMLElement("h6")}}) definieren einen neuen impliziten Abschnitt, wenn sie nicht die erste Überschrift ihrer übergeordneten, expliziten Abschnitte sind. Die Position dieses impliziten Abschnitts in der Gliederung wird durch seinen relativen Rang mit der vorherigen Überschrift im übergeordneten Abschnitt definiert. Wenn es einen niedrigeren Rang als die vorherige Überschrift hat, wird ein impliziter Unterabschnitt des Abschnitts geöffnet. Dieser Code:</p>
+
+<p> </p>
+
+<pre class="brush: html">&lt;section&gt;
+  &lt;h1&gt;Forest elephants&lt;/h1&gt;
+  &lt;p&gt;In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  &lt;h3 class="implicit subsection"&gt;Habitat&lt;/h3&gt;
+  &lt;p&gt;Forest elephants do not live in trees but among them.
+    ...this subsection continues...
+&lt;/section&gt;</pre>
+
+<p>erzeugt die Gliederung:</p>
+
+<pre>1. Forest elephants
+   1.1 Habitat (implizit definiert durch das Element h3)
+</pre>
+
+<p>Wenn es den gleichen Rang wie die vorherige Überschrift hat, schließt es den vorherigen Abschnitt (der möglicherweise explizit war!) und öffnet einen neuen impliziten Abschnitt auf derselben Ebene:</p>
+
+<pre class="brush: html">&lt;section&gt;
+  &lt;h1&gt;Forest elephants&lt;/h1&gt;
+  &lt;p&gt;In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  &lt;h1 class="implicit section"&gt;Mongolian gerbils&lt;/h1&gt;
+  &lt;p&gt;Mongolian gerbils are cute little mammals.
+    ...this section continues...
+&lt;/section&gt;</pre>
+
+<p>erzeugt die Gliederung:</p>
+
+<pre>1. Forest elephants
+2. Mongolian gerbils (implizit definiert durch das Element h1, wodurch gleichzeitig der vorherige Abschnitt geschlossen wurde)
+</pre>
+
+<p>Wenn es einen höheren Rang als die vorherige Überschrift hat, schließt es den vorherigen Abschnitt und öffnet einen neuen impliziten auf der höheren Ebene:</p>
+
+<pre class="brush:xml">&lt;body&gt;
+  &lt;h1&gt;Mammals&lt;/h1&gt;
+  &lt;h2&gt;Whales&lt;/h2&gt;
+  &lt;p&gt;In this section, we discuss the swimming whales.
+    ...this section continues...
+  &lt;section&gt;
+    &lt;h3&gt;Forest elephants&lt;/h3&gt;
+    &lt;p&gt;In this section, we discuss the lesser known forest elephants.
+      ...this section continues...
+    &lt;h3&gt;Mongolian gerbils&lt;/h3&gt;
+      &lt;p&gt;Hordes of gerbils have spread their range far beyond Mongolia.
+         ...this subsection continues...
+    &lt;h2&gt;Reptiles&lt;/h2&gt;
+      &lt;p&gt;Reptiles are animals with cold blood.
+          ...this section continues...
+  &lt;/section&gt;
+&lt;/body&gt;</pre>
+
+<p>leading to the following outline:</p>
+
+<pre>1. Mammals
+   1.1 Whales <em>(implicitly defined by the h2 element)</em>
+   1.2 Forest elephants <em>(explicitly defined by the section element)</em>
+   1.3 Mongolian gerbils <em>(implicitly defined by the h3 element, which closes the previous section at the same time)</em>
+2. Reptiles <em>(implicitly defined by the h2 element, which closes the previous section at the same time)</em>
+</pre>
+
+<p>This is not the outline that one might expect by quickly glancing at the heading tags. To make your markup human-understandable, it is a good practice to use explicit tags for opening and closing sections, and to match the heading rank to the intended section nesting level. However, this is not required by the HTML5 specification. If you find that browsers are rendering your document outline in unexpected ways, check whether you have sections that are implicitly closed by heading elements.</p>
+
+<p>An exception to the rule of thumb that heading rank should match the section nesting level is for sections that may be reused in multiple documents. For example, a section might be stored in a content-management system and assembled into documents at run time. In this case, a good practice is to start at {{HTMLElement("h1")}} for the top heading level of the reusable section. The nesting level of the reusable section will be determined by the section hierarchy of the document in which it appears. Explicit section tags are still helpful in this case.</p>
+
+<h3 id="Sectioning_roots"><a name="sectioning_root">Sectioning roots</a></h3>
+
+<p>A <a id="sectioning root" name="sectioning root">sectioning root</a> is an HTML element that can have its own outline, but the sections and headings inside it do not contribute to the outline of its ancestor. Besides {{HTMLElement("body")}} which is the logical sectioning root of a document, the following elements often introduce external content to the page: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, and {{HTMLElement("figure")}}.</p>
+
+<p>Example:</p>
+
+<pre class="brush:xml">&lt;section&gt;
+  &lt;h1&gt;Forest elephants&lt;/h1&gt;
+  &lt;section&gt;
+    &lt;h2&gt;Introduction&lt;/h2&gt;
+    &lt;p&gt;In this section, we discuss the lesser known forest elephants&lt;/p&gt;
+  &lt;/section&gt;
+  &lt;section&gt;
+    &lt;h2&gt;Habitat&lt;/h2&gt;
+    &lt;p&gt;Forest elephants do not live in trees but among them. Let's
+       look what scientists are saying in "&lt;cite&gt;The Forest Elephant in Borneo&lt;/cite&gt;":&lt;/p&gt;
+    &lt;blockquote&gt;
+       &lt;h1&gt;Borneo&lt;/h1&gt;
+       &lt;p&gt;The forest element lives in Borneo...&lt;/p&gt;
+    &lt;/blockquote&gt;
+  &lt;/section&gt;
+&lt;/section&gt;
+</pre>
+
+<p>This example results in the following outline:</p>
+
+<pre>1. Forest elephants
+   1.1 Introduction
+   1.2 Habitat</pre>
+
+<p>This outline doesn't contain the internal outline of the {{HTMLElement("blockquote")}} element, which, being an external citation, is a sectioning root and isolates its internal outline.</p>
+
+<h3 id="Sections_outside_the_outline">Sections outside the outline</h3>
+
+<p>HTML5 introduces two new elements that allow defining sections that don't belong to the main outline of a web document:</p>
+
+<ol>
+ <li>The HTML Aside Section Element ({{HTMLElement("aside")}}) defines a section that, though related to the main element, doesn't belong to the main flow, like an explanation box or an advertisement. It has its own outline, but doesn't belong to the main one.</li>
+ <li>The HTML Navigational Section Element ({{HTMLElement("nav")}}) defines a section that contains navigation links. There can be several of them in a document, for example one with page internal links like a table of contents, and another with site navigational links. These links are not part of the main document flow and outline, and are generally not initially rendered by screen readers and similar assistive technologies.</li>
+</ol>
+
+<h3 id="Headers_and_Footers">Headers and Footers</h3>
+
+<p>HTML5 also introduces two new elements that can be used to mark up the header and the footer of a section:</p>
+
+<ol>
+ <li>The HTML Header Element ({{HTMLElement("header")}}) defines a page header — typically containing the logo and name of the site and possibly a horizontal menu — or section header, containing perhaps the section's heading, author name, etc. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}} can have their own {{HTMLElement("header")}}. Despite its name, it is not necessarily positioned at the beginning of the page or section.</li>
+ <li>The HTML Footer Element ({{HTMLElement("footer")}}) defines a page footer — typically containing the copyright and legal notices and sometimes some links — or section footer, containing perhaps the section's publication date, license information, etc. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}} can have their own {{HTMLElement("footer")}}. Despite its name, it is not necessarily positioned at the end of the page or section.</li>
+</ol>
+
+<p>These do not create new sections in the outline, rather, they mark up content inside sections of the page.</p>
+
+<h2 id="Addresses_in_sectioning_elements">Addresses in sectioning elements</h2>
+
+<p>The author of a document often wants to publish some contact information, such as the author's name and address. HTML4 allowed this via the {{HTMLElement("address")}} element, which has been extended in HTML5.</p>
+
+<p>A document can be made of different sections from different authors. A section from another author than the one of the main page is defined using the {{HTMLElement("article")}} element. Consequently, the {{HTMLElement("address")}} element is now linked to its nearest {{HTMLElement("body")}} or {{HTMLElement("article")}} ancestor.</p>
+
+<h2 id="Using_HTML5_elements_in_non-HTML5_browsers">Using HTML5 elements in non-HTML5 browsers</h2>
+
+<p>Sections and headings elements can be made to work in most non-HTML5 browsers with a couple of extra steps, and in this section we'll show you how. If a significant percentage of your particular target audience is using Internet Explorer 8 or older, then you can follow the below instructions to make them behave as expected. However, global usage of these browsers is now very small, so this is unlikely.</p>
+
+<p>HTML5 semantic elements don't need a special DOM interface, but they will need a specific CSS styling in older browser that don't support them explicitly. Unknown elements are styled as <code>display:inline</code> by default, so you'll want to set them to <code>display: block</code>:</p>
+
+<pre class="brush: css">article, aside, footer, header, nav, section {
+  display:block;
+}
+</pre>
+
+<p>Of course the web developer can style them differently, but keep in mind that in a non-HTML5 browser, the default styling is different from what is expected for such elements. Also note that the {{HTMLElement("time")}} element has not been included, because the default styling for it in a non-HTML5 browser is the same as the one in an HTML5-compatible one.</p>
+
+<p>Next up, older IE versions do not allow styling of unsupported elements, unless you create an instance of them in the DOM. You can add a specific script to allow this, as seen below:</p>
+
+<pre class="brush:xml">&lt;!--[if lt IE 9]&gt;
+  &lt;script&gt;
+    document.createElement("article");
+    document.createElement("aside");
+    document.createElement("footer");
+    document.createElement("header");
+    document.createElement("nav");
+    document.createElement("section");
+    document.createElement("time");
+  &lt;/script&gt;
+&lt;![endif]--&gt;
+</pre>
+
+<p>As a last precaution, you could also add an explicit {{HTMLElement("noscript")}} element inside the {{HTMLElement("head")}} element to warn any users that have JavaScript disabled that your page relies on JavaScript:</p>
+
+<pre class="brush:xml">&lt;noscript&gt;
+  &lt;p&gt;&lt;strong&gt;This web page requires JavaScript to be enabled.&lt;/strong&gt;&lt;/p&gt;
+  &lt;p&gt;JavaScript is an object-oriented computer programming language
+    commonly used to create interactive effects within web browsers.&lt;/p&gt;
+  &lt;p&gt;&lt;a href="https://goo.gl/koeeaJ"&gt;How to enable JavaScript?&lt;/a&gt;&lt;/p&gt;
+&lt;/noscript&gt;
+</pre>
+
+<p>This leads to the following code to allow the support of the HTML5 sections and headings elements in non-HTML5 browsers, even for Internet Explorer (8 and older), with a proper fallback for the case where this latter browser is configured not to use scripting:</p>
+
+<pre class="brush:xml">&lt;!--[if lt IE 9]&gt;
+  &lt;script&gt;
+    document.createElement("article");
+    document.createElement("aside");
+    document.createElement("footer");
+    document.createElement("header");
+    document.createElement("nav");
+    document.createElement("section");
+    document.createElement("time");
+  &lt;/script&gt;
+&lt;![endif]--&gt;
+&lt;noscript&gt;
+  &lt;p&gt;&lt;strong&gt;This web page requires JavaScript to be enabled.&lt;/strong&gt;&lt;/p&gt;
+  &lt;p&gt;JavaScript is an object-oriented computer programming language
+    commonly used to create interactive effects within web browsers.&lt;/p&gt;
+  &lt;p&gt;&lt;a href="https://goo.gl/koeeaJ"&gt;How to enable JavaScript?&lt;/a&gt;&lt;/p&gt;
+&lt;/noscript&gt;
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: This code will also cause the <a href="https://validator.w3.org/">HTML validator</a> to return errors. This isn't a really bad thing neccessarily — sites will often have a few validation errors — but it something to be aware of still.</p>
+</div>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>The new semantic elements introduced in HTML5 bring the ability to describe the structure of a web document in a standard way. They bring a big advantage for people having HTML5 browsers and needing the structure to help them understand the page, for instance people needing the help of some assistive technology. These new semantic elements are simple to use and, with very few burdens, can be made to work also in non-HTML5 browsers. Therefore they should be used without restrictions.</p>
diff --git a/files/de/web/guide/index.html b/files/de/web/guide/index.html
new file mode 100644
index 0000000000..c789a6e4a9
--- /dev/null
+++ b/files/de/web/guide/index.html
@@ -0,0 +1,28 @@
+---
+title: Web-Entwickler Leitfäden
+slug: Web/Guide
+tags:
+  - Guide
+  - Landing
+  - TopicStub
+  - Web
+translation_of: Web/Guide
+---
+<p>Diese Artikel stellen Ihnen praktische Informationen zum Gebrauch von bestimmten Technologien und Programmierschnittstellen bereit.</p>
+
+<div class="note">
+<p><strong>Anmerkung:</strong> Bis wir alle Inhalte umgezogen haben, wird diese Seite für kurze Zeit etwas unorganisiert wirken. Wir entschuldigen uns dafür!</p>
+</div>
+
+<div>{{LandingPageListSubpages}}</div>
+
+<dl>
+ <dt><a href="/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a></dt>
+ <dd>JavaScript ist die leistungsfähige Scriptsprache zur Entwicklung von Webanwendungen.</dd>
+</dl>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Reference" title="/en-US/docs/Web/Reference">Web Developer Reference</a></li>
+</ul>
diff --git a/files/de/web/html/applying_color/index.html b/files/de/web/html/applying_color/index.html
new file mode 100644
index 0000000000..3e39d7bbcf
--- /dev/null
+++ b/files/de/web/html/applying_color/index.html
@@ -0,0 +1,498 @@
+---
+title: Applying color to HTML elements using CSS
+slug: Web/HTML/Applying_color
+tags:
+  - Beginner
+  - CSS
+  - CSS Colors
+  - Guide
+  - HTML
+  - HTML Colors
+  - HTML Styles
+  - Styling HTML
+  - color
+translation_of: Web/HTML/Applying_color
+---
+<div>{{HTMLRef}}</div>
+
+<p>Die Verwendung von Farben ist eine fundamentale Ausdrucksweise der Menschheit. Kinder experimentieren mit Farben, noch bevor sie zeichnen können. Vielleicht ist das der Grund, warum viele Leute zuerst mit Farben experimentieren wollen, wenn sie lernen, eine Webseite zu erstellen. <span class="seoSummary">Mit <a href="/en-US/docs/Web/CSS">CSS</a> gibt es viele Möglichkeiten, den <a href="/en-US/docs/Web/HTML">HTML</a> <a href="/en-US/docs/Web/HTML/Element">elements</a> Farbe zu verleihen. Dieser Artikel ist eine Einführung, die jede Möglichkeit vorstellt, CSS Farben in HTML zu verwenden.</span></p>
+
+<p>Zum Glück ist das Hinzufügen von Farbe zu deinem HTML eigentlich wirklich <em>easy</em> und du kannst Farbe zu fast allem hinzufügen.</p>
+
+<p>Wir werden die meisten Dinge behandeln, die du wissen musst, wenn du Farbe verwendest, einschließlich einer {{anch("Dinge, die Farbe haben können", "list of what you can color and what CSS properties are involved")}}, {{anch("How to describe a color", "how you describe colors")}}, und wie man eigentlich {{anch("Using color", "use colors both in stylesheets and in scripts")}}. Wir werden uns auch anschauen, wie man {{anch("Letting the user picka color", "let the user pick a color")}}.</p>
+
+<p>Dann schließen wir mit einer kurzen Diskussion ab, wie man {{anch("Using color wisely", "use color wisely")}}: Wie man angemessene Farben auswählt und dabei auch die Bedürfnisse von Menschen mit unterschiedlichen visuellen Fähigkeiten im Auge behält</p>
+
+<h2 id="Dinge_die_Farbe_haben_können">Dinge, die Farbe haben können</h2>
+
+<p>Einfach gesagt kann alles mögliche in HTML Farbe hinzugefügt werden. Stattdessen schauen wir deswegen auf die Dinge die in einem Element sind, wie beispielsweise Text oder Ränder (Borders) usw. Für jedes werden wir eine Liste von CSS Eigenschaften sehen, die ihnen Farbe verleihen können.</p>
+
+<p>Auf einer Grundebene definiert die {{cssxref("color")}} Eigenschaft den Vordergrund des Inhaltes eines HTML Elements und die {{cssxref("background-color")}} Eigenschaft definiert die Hintergrundfarbe eines Elements. Sie können auf fast jedem Element angewendet werden.</p>
+
+<h3 id="Text">Text</h3>
+
+<p>Wo auch immer ein Element gerendert wurde sind diese Elemente dazu da, die Farbe des Textes, seinen Hintergrund oder Dekorationen des Textes festzulegen.</p>
+
+<dl>
+ <dt>{{cssxref("color")}}</dt>
+ <dd>Legt die Farbe von Text und <a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals#Font_style_font_weight_text_transform_and_text_decoration">text decorations</a> fest (wie z. B. die Ergänzung von Über- oder Unterstrichen, durchgestrichene Linien, usw.)</dd>
+ <dt>{{cssxref("background-color")}}</dt>
+ <dd>Die Hintergrundfarbe des Textes.</dd>
+ <dt>{{cssxref("text-shadow")}}</dt>
+ <dd>Fügt einen Schatteneffekt zu Text hinzu. Unter den Optionen für den Schatten ist die Basisfarbe des Schatten (die dann verschwommen und dann mit dem Hintergrund "vermischt" (blended) wird, basierend auf die anderen Parameter). Gehen Sie auf {{SectionOnPage("/en-US/docs/Learn/CSS/Styling_text/Fundamentals", "Text drop shadows")}} um mehr darüber zu erfahren.</dd>
+ <dt>{{cssxref("text-decoration-color")}}</dt>
+ <dd>Als Standardeinstellung verwenden Textdekorationen (wie z. B. Unterstreichungen, Durchstreichungen, etc.) die <code>color</code> Eigenschaft als ihre Farbe. Jedoch können sie diese Einstellung überschreiben und eine andere Farbe mit der <code>text-decoration-color</code> Eigenschaft verwenden.</dd>
+ <dt>{{cssxref("text-emphasis-color")}}</dt>
+ <dd>The color to use when drawing emphasis symbols adjacent to each character in the text. This is used primarily when drawing text for East Asian languages.</dd>
+ <dt>{{cssxref("caret-color")}}</dt>
+ <dd>The color to use when drawing the {{Glossary("caret")}} (sometimes referred to as the text input cursor) within the element. This is only useful in elements that are editable, such as {{HTMLElement("input")}} and {{HTMLElement("textarea")}} or elements whose HTML {{htmlattrxref("contenteditable")}} attribute is set.</dd>
+</dl>
+
+<h3 id="Boxen">Boxen</h3>
+
+<p>Jedes Element ist eine Box mit irgendeiner Art von Inhalt, hat einen Hintergrund und eine Grenze (Border) zusätzlich zu irgendwelchen Inhalten, die die Box besitzt.</p>
+
+<dl>
+ <dt>{{anch("Borders")}}</dt>
+ <dd>Schauen Sie sich den Abschnitt {{anch("Borders")}} an für eine Liste von CSS Eigenschaften, die Sie benutzen können, um die Farbe der Grenze (Border) einer Box festzulegen.</dd>
+ <dt>{{cssxref("background-color")}}</dt>
+ <dd>Farbe auf Bereiche eines Elements anwenden, die keinen Inhalt im Vordergrund haben.</dd>
+ <dt>{{cssxref("column-rule-color")}}</dt>
+ <dd>Farbe auf Linien anwenden, die Textspalten trennen.</dd>
+ <dt>{{cssxref("outline-color")}}</dt>
+ <dd>The color to use when drawing an outline around the outside of the element. This outline is different from the border in that it doesn't get space set aside for it in the document (so it may overlap other content). It's generally used as a focus indicator, to show which element will receive input events.</dd>
+</dl>
+
+<h3 id="Ränder_(Borders)">Ränder (Borders)</h3>
+
+<p>Jedes Element kann einen Rand (<a href="/en-US/docs/Learn/CSS/Styling_boxes/Borders">border</a>) um sich herum haben. A basic element border is a line drawn around the edges of the element's content. See {{SectionOnPage("/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model", "Box properties")}} to learn about the relationship between elements and their borders, and the article <a href="/en-US/docs/Learn/CSS/Styling_boxes/Borders">Styling borders using CSS</a> to learn more about applying styles to borders.</p>
+
+<p>You can use the {{cssxref("border")}} shorthand property, which lets you configure everything about the border in one shot (including non-color features of borders, such as its <a href="/en-US/docs/Web/CSS/border-width">width</a>, <a href="/en-US/docs/Web/CSS/border-style">style</a> (solid, dashed, etc.), and so forth.</p>
+
+<dl>
+ <dt>{{cssxref("border-color")}}</dt>
+ <dd>Specifies a single color to use for every side of the element's border.</dd>
+ <dt>{{cssxref("border-left-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, and {{cssxref("border-bottom-color")}}</dt>
+ <dd>Lets you set the color of the corresponding side of the element's border.</dd>
+ <dt>{{cssxref("border-block-start-color")}} and {{cssxref("border-block-end-color")}}</dt>
+ <dd>With these, you can set the color used to draw the borders which are closest to the start and end of the block the border surrounds. In a left-to-right writing mode (such as the way English is written), the block start border is the top edge and the block end is the bottom. This differs from the inline start and end, which are the left and right edges (corresponding to where each line of text in the box begins and ends).</dd>
+ <dt>{{cssxref("border-inline-start-color")}} and {{cssxref("border-inline-end-color")}}</dt>
+ <dd>These let you color the edges of the border closest to to the beginning and the end of the start of lines of text within the box. Which side this is will vary depending on the {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}} properties, which are typically (but not always) used to adjust text directionality based on the language being displayed. For example, if the box's text is being rendered right-to-left, then the <code>border-inline-start-color</code> is applied to the right side of the border.</dd>
+</dl>
+
+<h3 id="Andere_Methoden_um_Farbe_zu_verwenden">Andere Methoden um Farbe zu verwenden</h3>
+
+<p>CSS ist nicht die einzige Webtechnologie, die Farbe unterstützt. Es gibt auch Grafiktechnologien die auf dem Web verfügbar sind und auch Farbe unterstützen.</p>
+
+<dl>
+ <dt>Die  HTML <a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a></dt>
+ <dd>Lets you draw 2D bitmapped graphics in a {{HTMLElement("canvas")}} element. See our <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a> to learn more.</dd>
+ <dt><a href="/en-US/docs/Web/SVG">SVG</a> (Scalable Vector Graphics)</dt>
+ <dd>Lets you draw images using commands that draw specific shapes, patterns, and lines to produce an image. SVG commands are formatted as XML, and can be embedded directly into a web page or can be placed in he page using the {{HTMLElement("img")}} element, just like any other type of image.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API">WebGL</a></dt>
+ <dd>The Web Graphics Library is an OpenGL ES-based API for drawing high-performance 2D and 3D graphics on the Web. See <a href="/en-US/docs/Learn/WebGL">Learn WebGL for 2D and 3D</a> graphics to find out more.</dd>
+</dl>
+
+<h2 id="Wie_man_eine_Farbe_definiert">Wie man eine Farbe definiert</h2>
+
+<p>In order to represent a color in CSS, you have to find a way to translate the analog concept of "color" into a digital form that a computer can use. This is typically done by breaking down the color into components, such as how much of each of a set of primary colors to mix together, or how bright to make the color. As such, there are several ways you can describe color in CSS.</p>
+
+<p>For more detailed discussion of each of the color value types, see the reference for the CSS {{cssxref("&lt;color&gt;")}} unit.</p>
+
+<h3 id="Schlüsselwörter">Schlüsselwörter</h3>
+
+<p>A set of standard color names have been defined, letting you use these keywords instead of numeric representations of colors if you choose to do so and there's a keyword representing the exact color you want to use. Color keywords include the standard primary and secondary colors (such as <code>red</code>, <code>blue</code>, or <code>orange</code>), shades of gray (from <code>black</code> to <code>white</code>, including colors like <code>darkgray</code> and <code>lightgrey</code>), and a variety of other blended colors including <code>lightseagreen</code>, <code>cornflowerblue</code>, and <code>rebeccapurple</code>.</p>
+
+<p>See {{SectionOnPage("/en-US/docs/Web/CSS/color_value", "Color keywords", "code")}} for a list of all available color keywords.</p>
+
+<h3 id="RGB-Werte">RGB-Werte</h3>
+
+<p>There are three ways to represent an RGB color in CSS.</p>
+
+<h4 id="Hexadezimale_String_Notation">Hexadezimale String Notation</h4>
+
+<p>Die Hexadezimale String Notation repräsentiert eine Farbe, indem sie hexadezimale Zeichen für jeden Farbkomponenten benutzt (rot, grün und blau). It may also include a fourth compoment: the alpha channel (or opacity). Each color component can be represented as a number between 0 and 255 (0x00 and 0xFF) or, optionally, as a number between 0 and 15 (0x0 and 0xF). All components <em>must</em> be specified using the same number of digits. If you use the single-digit notation, the final color is computed by using each component's digit twice; that is, <code>"#D"</code> becomes <code>"#DD"</code> when drawing.</p>
+
+<p>A color in hexadecimal string notation always begins with the character <code>"#"</code>. After that come the hexadecimal digits of the color code. The string is case-insensitive.</p>
+
+<dl>
+ <dt><code>"#rrggbb"</code></dt>
+ <dd>Specifies a fully-opaque color whose red component is the hexadecimal number <code>0xrr</code>, green component is <code>0xgg</code>, and blue component is <code>0xbb</code>.</dd>
+ <dt><code>"#rrggbbaa"</code></dt>
+ <dd>Specifies a color whose red component is the hexadecimal number <code>0xrr</code>, green component is <code>0xgg</code>, and blue component is <code>0xbb</code>. The alpha channel is specified by <code>0xaa</code>; the lower this value is, the more translucent the color becomes.</dd>
+ <dt><code>"#rgb"</code></dt>
+ <dd>Specifies a color whose red component is the hexadecimal number <code>0xrr</code>, green component is <code>0xgg</code>, and blue component is <code>0xbb</code>.</dd>
+ <dt><code>"#rgba"</code></dt>
+ <dd>Specifies a color whose red component is the hexadecimal number <code>0xrr</code>, green component is <code>0xgg</code>, and blue component is <code>0xbb</code>. The alpha channel is specified by <code>0xaa</code>; the lower this value is, the more translucent the color becomes.</dd>
+</dl>
+
+<p>As an example, you can represent the opaque color bright blue as <code>"#0000ff"</code> or <code>"#00f"</code>. To make it 25% opaque, you can use <code>"#0000ff44"</code> or <code>"#00f4"</code>.</p>
+
+<h4 id="RGB_functional_notation">RGB functional notation</h4>
+
+<p>RGB (Red/Green/Blue) functional notation, like hexadecimal string notation, represents colors using their red, green, and blue components (as well as, optionally, an alpha channel component for opacity). However, instead of using a string, the color is defined using the CSS function {{cssxref("rgb()")}}. This function accepts as its input parameters the values of the red, green, and blue components and an optional fourth parameter, the value for the alpha channel.</p>
+
+<p>Legal values for each of these parameters are:</p>
+
+<dl>
+ <dt><code>red</code>, <code>green</code>, and <code>blue</code></dt>
+ <dd>Each must be an {{cssxref("&lt;integer&gt;")}} value between 0 and 255 (inclusive), or a {{cssxref("&lt;percentage&gt;")}} from 0% to 100%.</dd>
+ <dt><code>alpha</code></dt>
+ <dd>The alpha channel is a number between 0.0 (fully transparent) and 1.0 (fully opaque). You can also specify a percentage where 0% is the same as 0.0 and 100% is the same as 1.0.</dd>
+</dl>
+
+<p>For example, a bright red that's 50% opaque can be represented as <code>rgb(255, 0, 0, 0.5)</code> or <code>rgb(100%, 0, 0, 50%)</code>.</p>
+
+<h3 id="HSL_functional_notation">HSL functional notation</h3>
+
+<p>Designers and artists often prefer to work using the {{interwiki("wikipedia", "HSL and HSV", "HSL")}} (Hue/Saturation/Luminosity) color method. On the web, HSL colors are represented using HSL functional notation. The <code>hsl()</code> CSS function is very similar to the <code>rgb()</code> function in usage otherwise.</p>
+
+<div style="padding-bottom: 20px;">
+<figure style="width: 500px;"><img alt="HSL color cylinder" src="https://mdn.mozillademos.org/files/15445/1200px-HSL_color_solid_cylinder_alpha_lowgamma.png" style="height: 375px; width: 500px;">
+<figcaption><em><strong>Figure 1. An HSL color cylinder.</strong> Hue defines the actual color based on the position along a circular color wheel representing the colors of the visible spectrum. Saturation is a percentage of how much of the way between being a shade of gray and having the maximum possible amount of the given hue. As the value of luminance (or lightness) increases, the color transitions from the darkest possible to the brightest possible (from black to white). Image courtesy of user <a href="http://commons.wikimedia.org/wiki/User:SharkD">SharkD</a> on <a href="https://www.wikipedia.org/">Wikipedia</a>, distributed under the <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY-SA 3.0</a> license.</em></figcaption>
+</figure>
+</div>
+
+<p>The value of the hue (H) component of an HSL color is an angle from red around through yellow, green, cyan, blue, and magenta (ending up back at red again at 360°) that identifies what the base color is. The value can be specified in any {{cssxref("&lt;angle&gt;")}} unit supported by CSS, including degrees (<code>deg</code>), radians (<code>rad</code>), gradians (<code>grad</code>), or turns (<code>turn</code>). But this doesn't control how vivid or dull, or how bright or dark the color is.</p>
+
+<p>The saturation (S) component of the color specifies what percentage of the final color is comprised of the specified hue. The rest is defined by the grey level provided by the luminance (L) component.</p>
+
+<p>Think of it like creating the perfect paint color:</p>
+
+<ol>
+ <li>You start with base paint that's the maximum intensity possible for a given color, such as  the most intense blue that can be represented by the user's screen. This is the <strong>hue</strong> (H) component: a value representing the angle around the color wheel for the vivid hue we want to use as our base.</li>
+ <li>Then select a greyscale paint that corresponds how bright you want the color to be; this is the luminance. Do you want it to be very bright and nearly white, or very dark and closer to black, or somewhere in between? This is specified using a percentage, where 0% is perfectly black and 100% is perfectly white. (regardless of the saturation or hue). In between values are a literal grey area.</li>
+ <li>Now that you have a grey paint and a perfectly vivid color, you need to mix them together. The saturation (S) component of the color indicates what percentage of the final color should be comprised of that perfectly vivid color. The rest of the final color is made up of the grey paint that represents the saturation.</li>
+</ol>
+
+<p>You can also optionally include an alpha channel, to make the color less than 100% opaque.</p>
+
+<p>Here are some sample colors in HSL notation:</p>
+
+<div id="hsl-swatches">
+<div class="hidden">
+<pre class="brush: css">table {
+  border: 1px solid black;
+  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
+th, td {
+  border: 1px solid black;
+  padding:4px 6px;
+  text-align: left;
+}
+
+th {
+  background-color: hsl(0, 0%, 75%);
+}</pre>
+
+<pre class="brush: html">&lt;table&gt;
+ &lt;thead&gt;
+  &lt;tr&gt;
+   &lt;th scope="col"&gt;Color in HSL notation&lt;/th&gt;
+   &lt;th scope="col"&gt;Example&lt;/th&gt;
+  &lt;/tr&gt;
+ &lt;/thead&gt;
+ &lt;tbody&gt;
+  &lt;tr&gt;
+   &lt;td&gt;&lt;code&gt;hsl(90deg, 100%, 50%)&lt;/code&gt;&lt;/td&gt;
+   &lt;td style="background-color: hsl(90deg, 100%, 50%);"&gt;&amp;nbsp;&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+   &lt;td&gt;&lt;code&gt;hsl(90, 100%, 50%)&lt;/code&gt;&lt;/td&gt;
+   &lt;td style="background-color: hsl(90, 100%, 50%);"&gt;&amp;nbsp;&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+   &lt;td&gt;&lt;code&gt;hsl(0.15turn, 50%, 75%)&lt;/code&gt;&lt;/td&gt;
+   &lt;td style="background-color: hsl(0.15turn, 50%, 75%);"&gt;&amp;nbsp;&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+   &lt;td&gt;&lt;code&gt;hsl(0.15turn, 90%, 75%)&lt;/code&gt;&lt;/td&gt;
+   &lt;td style="background-color: hsl(0.15turn, 90%, 75%);"&gt;&amp;nbsp;&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+   &lt;td&gt;&lt;code&gt;hsl(0.15turn, 90%, 50%)&lt;/code&gt;&lt;/td&gt;
+   &lt;td style="background-color: hsl(0.15turn, 90%, 50%);"&gt;&amp;nbsp;&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+   &lt;td&gt;&lt;code&gt;hsl(270deg, 90%, 50%)&lt;/code&gt;&lt;/td&gt;
+   &lt;td style="background-color: hsl(270deg, 90%, 50%);"&gt;&amp;nbsp;&lt;/td&gt;
+  &lt;/tr&gt;
+ &lt;/tbody&gt;
+&lt;/table&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("hsl-swatches", 300, 260)}}</p>
+</div>
+
+<div class="note">
+<p>Note that when you omit the hue's unit, it's assumed to be in degrees (<code>deg</code>).</p>
+</div>
+
+<h2 id="Farbe_verwenden">Farbe verwenden</h2>
+
+<p>Now that you know what CSS properties exist that let you apply color to elements and the formats you can use to describe colors, you can put this together to begin to make use of color. As you may have seen from the list under {{anch("Things that can have color")}}, there are plenty of things you can color with CSS. Let's look at this from two sides: using color within a {{Glossary("stylesheet")}}, and adding and changing color using {{Glossary("JavaScript")}} code to alter the styles of elements.</p>
+
+<h3 id="Specifying_colors_in_stylesheets">Specifying colors in stylesheets</h3>
+
+<p>The easiest way to apply color to elements—and the way you'll usually do it—is to simply specify colors in the CSS that's used when rendering elements. While we won't use every single property mentioned previously, we'll look at a couple of examples. The concept is the same anywhere you use color.</p>
+
+<p>Let's take a look at an example, starting by looking at the results we're trying to achieve:</p>
+
+<div>{{EmbedLiveSample("Specifying_colors_in_stylesheets", 650, 150)}}</div>
+
+<h4 id="HTML">HTML</h4>
+
+<p>The HTML responsible for creating the above example is shown here:</p>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box boxLeft"&gt;
+    &lt;p&gt;
+      This is the first box.
+    &lt;/p&gt;
+  &lt;/div&gt;
+  &lt;div class="box boxRight"&gt;
+    &lt;p&gt;
+      This is the second box.
+    &lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>This is pretty simple, using a {{HTMLElement("div")}} as a wrapper around the contents, which consists of two more <code>&lt;div&gt;</code>s, each styled differently with a single paragraph ({{HTMLElement("p")}}) in each box.</p>
+
+<p>The magic happens, as usual, in the CSS, where we'll apply colors define the layout for the HTML above.</p>
+
+<h4 id="CSS">CSS</h4>
+
+<p>We'll look at the CSS to create the above results a piece at a time, so we can review the interesting parts one by one.</p>
+
+<pre class="brush: css">.wrapper {
+  width: 620px;
+  height: 110px;
+  margin: 0;
+  padding: 10px;
+  border: 6px solid mediumturquoise;
+}</pre>
+
+<p>The <code>.wrapper</code> class is used to assign styles to the {{HTMLElement("div")}} that encloses all of our other content. This establishes thesize of the container using {{cssxref("width")}} and {{cssxref("height")}} as well as its {{cssxref("margin")}} and {{cssxref("padding")}}.</p>
+
+<p>Of more interest to our discussion here is the use of the {{cssxref("border")}} property to establish a border around the outside edge of the element. This border is a solid line, 6 pixels wide, in the color <code>mediumturquoise</code>.</p>
+
+<p>Our two colored boxes share a number of properties in common, so next we establish a class, <code>.box</code>, that defines those shared properties:</p>
+
+<pre class="brush: css">.box {
+  width: 290px;
+  height: 100px;
+  margin: 0;
+  padding: 4px 6px;
+  font: 28px "Marker Felt", "Zapfino", cursive;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}</pre>
+
+<p>In brief, <code>.box</code> establishes the size of each box, as well as the configuration of the font used within. We also take advantage of <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexbox</a> to easily center the contents of each box. We enable <code>flex</code> mode using {{cssxref("display", "display: flex")}}, and set both {{cssxref("justify-content")}} and {{cssxref("align-items")}} to <code>center</code>. Then we can create a class for each of the two boxes that defines the propeties that differ between the two.</p>
+
+<pre class="brush: css">.boxLeft {
+  float: left;
+  background-color: rgb(245, 130, 130);
+  outline: 2px solid darkred;
+}</pre>
+
+<p>The <code>.boxLeft</code> class—which, cleverly, is used to style the box on the left—floats the box to the left, then sets up the colors:</p>
+
+<ul>
+ <li>The box's background color is set by changing the value of the CSS {{cssxref("background-color")}} property to <code>rgb(245, 130, 130)</code>.</li>
+ <li>An outline is defined for the box. Unlike the more commonly used <code>border</code>, {{cssxref("outline")}} doesn't affect layout at all; it draws over the top of whatever may happen to be outside the element's box instead of making room as <code>border</code> does. This outline is a solid, dark red line that's two pixels thick. Note the use of the <code>darkred</code> keyword when specifying the color.</li>
+ <li>Notice that we're not explicitly setting the text color. That means the value of {{cssxref("color")}} will be inherited from the nearest containing element that defines it. By default, that's black.</li>
+</ul>
+
+<pre class="brush: css">.boxRight {
+  float: right;
+  background-color: hsl(270deg, 50%, 75%);
+  outline: 4px dashed rgb(110, 20, 120);
+  color: hsl(0deg, 100%, 100%);
+  text-decoration: underline wavy #88ff88;
+  text-shadow: 2px 2px 3px black;
+}</pre>
+
+<p>Finally, the <code>.boxRight</code> class describes the unique properties of the box that's drawn on the right. It's configured to float the box to the right so that it appears next to the previous box. Then the following colors are established:</p>
+
+<ul>
+ <li>The <code>background-color</code> is set using the HSL value specified using <code>hsl(270deg, 50%, 75%)</code>. This is a medium purple color.</li>
+ <li>The box's <code>outline</code> is used to specify that the box should be enclosed in a four pixel thick dashed line whose color is a somewhat deeper purple (<code>rgb(110, 20, 120)</code>).</li>
+ <li>The foreground (text) color is specified by setting the {{cssxref("color")}} property to <code>hsl(0deg, 100%, 100%)</code>. This is one of many ways to specify the color white.</li>
+ <li>We add a green wavy line under the text with {{cssxref("text-decoration")}}.</li>
+ <li>Finally, a bit of a shadow is added to the text using {{cssxref("text-shadow")}}. Its <code>color</code> parameter is set to <code>black</code>.</li>
+</ul>
+
+<h2 id="Dem_Nutzer_die_Farbe_wählen_lassen">Dem Nutzer die Farbe wählen lassen</h2>
+
+<p>There are many situations in which your web site may need to let the user select a color. Perhaps you have a customizable user interface, or you're implementing a drawing app. Maybe you have editable text and need to let the user choose the text color. Or perhaps your app lets the user assign colors to folders or items. Although historically it's been necessary to implement your own {{interwiki("wikipedia", "color picker")}}, HTML now provides support for browsers to provide one for your use through the {{HTMLElement("input")}} element, by using <code>"color"</code> as the value of its {{htmlattrxref("type", "input")}} attribute.</p>
+
+<p>The <code>&lt;input&gt;</code> element represents a color only in the {{anch("Hexadecimal string notation", "hexadecimal string notation")}} covered above.</p>
+
+<h3 id="Beispiel_Farbe_wählen">Beispiel: Farbe wählen</h3>
+
+<p>Let's look at a simple example, in which the user can choose a color. As the user adjusts the color, the border around the example changes to reflect the new color. After finishing up and picking the final color, the color picker's value is displayed.</p>
+
+<p>{{EmbedLiveSample("Example_Picking_a_color", 525, 275)}}</p>
+
+<div class="note">
+<p>On macOS, you indicate that you've finalized selection of the color by closing the color picker window.</p>
+</div>
+
+<h4 id="HTML_2">HTML</h4>
+
+<p>The HTML here creates a box that contains a color picker control (with a label created using the {{HTMLElement("label")}} element) and an empty paragraph element ({{HTMLElement("p")}}) into which we'll output some text from our JavaScript code.</p>
+
+<pre class="brush: html">&lt;div id="box"&gt;
+  &lt;label for="colorPicker"&gt;Border color:&lt;/label&gt;
+  &lt;input type="color" value="#8888ff" id="colorPicker"&gt;
+  &lt;p id="output"&gt;&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<p>The CSS simply establishes a size for the box and some basic styling for appearances. The border is also established with a 2-pixel width and a border color that won't last, courtesy of the JavaScript below...</p>
+
+<pre class="brush: css">#box {
+  width: 500px;
+  height: 200px;
+  border: 2px solid rgb(245, 220, 225);
+  padding: 4px 6px;
+  font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif"
+}</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<p>The script here handles the task of updating the starting color of the border to match the color picker's value. Then two event handlers are added to deal with input from the <code><a href="/en-US/docs/Web/HTML/Element/input/color">&lt;input type="color"&gt;</a></code> element.</p>
+
+<pre class="brush: js">let colorPicker = document.getElementById("colorPicker");
+let box = document.getElementById("box");
+let output = document.getElementById("output");
+
+box.style.borderColor = colorPicker.value;
+
+colorPicker.addEventListener("input", function(event) {
+  box.style.borderColor = event.target.value;
+}, false);
+
+colorPicker.addEventListener("change", function(event) {
+  output.innerText = "Color set to " + colorPicker.value + ".";
+}, false);</pre>
+
+<p>The {{event("input")}} event is sent every time the value of the element changes; that is, every time the user adjusts the color in the color picker. Each time this event arrives, we set the box's border color to match the color picker's current value.</p>
+
+<p>The {{event("change")}} event is received when the color picker's value is finalized. We respond by setting the contents of the <code>&lt;p&gt;</code> element with the ID <code>"output"</code> to a string describing the finally selected color.</p>
+
+<h2 id="Farbe_klug_verwenden">Farbe klug verwenden</h2>
+
+<p>Making the right choices when selecting colors when designing a web site can be a tricky process, especially if you aren't well-grounded in art, design, or at least basic color theory. The wrong color choice can render your site unattractive, or even worse, leave the content unreadable due to problems with contrast or conflicting colors. Worse still, if using the wrong colors can result in your content being outright unusable by people withcertain vision problems, particularly color blindness.</p>
+
+<h3 id="Die_richtigen_Farben_finden">Die richtigen Farben finden</h3>
+
+<p>Coming up with just the right colors can be tricky, especially without training in art or design. Fortunately, there are tools available that can help you. While they can't replace having a good designer helping you make these decisions, they can definitely get you started.</p>
+
+<h4 id="Base_color">Base color</h4>
+
+<p>The first step is to choose your <strong>base color</strong>. This is the color that in some way defines your web site or the subject matter of the site. Just as we associate green with the beverage {{interwiki("wikipedia", "Mountain Dew")}} and one might think of the color blue in relationship with the sky or the ocean, choosing an appropriate base color to represent your site is a good place to start. There are plenty of ways to select a base color; a few ideas include:</p>
+
+<ul>
+ <li>A color that is naturally associated with the topic of your content, such as the existing color identified with a product or idea or a color representative of the emotion you wish to convey.</li>
+ <li>A color that comes from imagery associated with what your content is about. If you're creating a web site about a given item or product, choose a color that's physically present on that item.</li>
+ <li>Browse web sites that let you look at lots of existing color palettes and imags to find inspiration.</li>
+</ul>
+
+<p>When trying to decide upon a base color, you may find that browser extensions that let you select colors from web content can be particularly handy. Some of these are even specifically designed to help with this sort of work. For example, the web site <a href="http://www.colorzilla.com/">ColorZilla</a> offers an extension (<a href="http://www.colorzilla.com/chrome">Chrome</a> / <a href="http://www.colorzilla.com/firefox">Firefox</a>) that offers an eyedropper tool for picking colors from the web. It can also take averages of the colors of pixels in various sized areas or even a selected area of the page.</p>
+
+<div class="note">
+<p>The advantage to averaging colors can be that often what looks like a solid color is actually a surprisingly varied number of related colors all used in concert, blending to create a desired effect. Picking just one of these pixels can result in getting a color that on its own looks very out of place.</p>
+</div>
+
+<h4 id="Fleshing_out_the_palette">Fleshing out the palette</h4>
+
+<p>Once you have decided on your base color, there are plenty of online tools that can help you build out a palette of appropriate colors to use along with your base color by applying color theory to your base color to determine appropriate added colors. Many of these tools also support viewing the colors filtered so you can see what they would look like to people with various forms of color blindness. See {{anch("Color and accessibility")}} for a brief explanation of why this matters.</p>
+
+<p>A few examples (all free to use as of the time this list was last revised):</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool">MDN's color picker tool</a></li>
+ <li><a href="http://paletton.com">Paletton</a></li>
+ <li><a href="https://color.adobe.com/create/color-wheel">Adobe Color CC online color wheel</a></li>
+</ul>
+
+<p>When designing your palette, be sure to keep in mind that in addition to the colors these tools typically generate, you'll probably also need to add some core neutral colors such as white (or nearly white), black (or nearly black), and some number of shades of gray.</p>
+
+<div class="note">
+<p>Usually, you are far better off using the smallest number of colors possible. By using color to accentuate rather than adding color to everything on the page, you keep your content easy to read and the colors you do use have far more impact.</p>
+</div>
+
+<h3 id="Ressourcen_zu_Farbentheorie">Ressourcen zu Farbentheorie</h3>
+
+<p>A full review of color theory is beyond the scope of this article, but there are plenty of articles about color theory available, as well as courses you can find at nearby schools and universities. A couple of useful resources about color theory:</p>
+
+<dl>
+ <dt><a href="https://www.khanacademy.org/partner-content/pixar/color">Color Science</a> (<a href="https://www.khanacademy.org/">Khan Academy</a> in association with <a href="https://www.pixar.com/">Pixar</a>)</dt>
+ <dd>An online course which introduces concepts such as what color is, how it's percieved, and how to use colors to express ideas. Presented by Pixar artists and designers.</dd>
+ <dt>{{interwiki("wikipedia", "Color theory")}} on Wikipedia</dt>
+ <dd>Wikipedia's entry on color theory, which has a lot of great information from a technical perspective. It's not really a resource for helping you with the color sleection process, but is still full of useful information.</dd>
+</dl>
+
+<h3 id="Farbe_und_Barrierefreiheit">Farbe und Barrierefreiheit</h3>
+
+<p>There are several ways color can be an {{Glossary("accessibility")}} problem. Improper or careless use of color can result in a web site or app that a percentage of your target audience may not be able to use adequately, resulting in lost traffic, lost business, and possibly even a public relations problem. So it's important to consider your use of color carefully.</p>
+
+<p>You should do at least basic research into {{interwiki("wikipedia", "color blindness")}}. There are several kinds; the most common is red-green color blindness, which causes people to be unable to differentiate between the colors red and green. There are others, too, ranging from inabilities to tell the difference between certain colors to total inability to see color at all.</p>
+
+<div class="note">
+<p>The most important rule: never use color as the only way to know something. If, for example, you indicate success or failure of an operation by changing the color of a shape from white to green for success and red for failure, users with red-green color-blindness won't be able to use your site properly. Instead, perhaps use both text and color together, so that everyone can understand what's happening.</p>
+</div>
+
+<p>For more information about color blindness, see the following articles:</p>
+
+<ul>
+ <li><a href="https://medlineplus.gov/colorblindness.html">Medline Plus: Color Blindness</a> (United States National Institute of Health)</li>
+ <li><a href="https://www.aao.org/eye-health/diseases/what-is-color-blindness">American Academy of Ophthamology: What Is Color Blindness?</a></li>
+ <li><a href="https://www.usability.gov/get-involved/blog/2010/02/color-blindness.html">Color Blindness &amp; Web Design</a> (Usability.gov: United States Department of Health and Human Services)</li>
+</ul>
+
+<h3 id="Palette_design_example">Palette design example</h3>
+
+<p>Let's consider a quick example of selecting an appropriate color palette for a site. Imagine that you're building a web site for a new game that takes place on the planet Mars. So let's do a <a href="https://www.google.com/search?q=Mars&amp;tbm=isch">Google search for photos of Mars</a>. Lots of good examples of Martian coloration there. We carefully avoid the mockups and the photos from movies. And we decide to use a photo taken by one of the Mars landers humanity has parked on the surface over the last few decades, since the game takes place on the planet's surface. We use a color picker tool to select a sample of the color we choose.</p>
+
+<p>Using an eyedropper tool, we identify a color we like and determine that the color in question is <code>#D79C7A</code>, which is an appropriate rusty orange-red color that's so stereotypical of the Martian surface.</p>
+
+<p>Having selected our base color, we need to build out our palette. We decide to use <a href="http://www.paletteon.com/">Paletteon</a> to come up with the other colors we need. Upon opening Paletton, we see:</p>
+
+<p><img alt="Right after loading Paletton." src="https://mdn.mozillademos.org/files/15451/paletton1.png" style="height: 361px; width: 600px;"></p>
+
+<p>Next, we enter our color's hex code (<code>D79C7A</code>) into the "Base RGB" box at the bottom-left corner of the tool:</p>
+
+<p><img alt="After entering base color" src="https://mdn.mozillademos.org/files/15453/paletton2.png" style="height: 361px; width: 600px;"></p>
+
+<p>We now see a monochromatic palette based on the color we picked from the Mars photo. If you need a lot of related colors for some reason, those are likely to be good ones. But what we really want is an accent color. Something that will pop along side the base color. To find that, we click the "add complementary" toggle underneath the menu that lets you select the palette type (currently "Monochromatic"). Paletton computes an appropriate accent color; clicking on the accent color down in the bottom-right corner tells us that this color is <code>#508D7C</code>.</p>
+
+<p><img alt="Now with complementary colors included." src="https://mdn.mozillademos.org/files/15455/paletton3.png" style="height: 361px; width: 600px;"></p>
+
+<p>If you're unhappy with the color that's proposed to you, you can change the color scheme, to see if you find something you like better. For example, if we don't like the proposed greenish-blue color, we can click the Triad color scheme icon, which presents us with the following:</p>
+
+<p><img alt="Triad color scheme selected" src="https://mdn.mozillademos.org/files/15457/paletton4.png" style="height: 361px; width: 600px;"></p>
+
+<p>That greyish blue in the top-right looks pretty good. Clicking on it, we find that it's <code>#556E8D</code>. That would be used as the accent color, to be used sparingly to make things stand out, such as in headlines or in the highlighting of tabs or other indicators on the site:</p>
+
+<p><img alt="Triad color scheme selected" src="https://mdn.mozillademos.org/files/15459/paletton-color-detail.png" style="height: 370px; width: 526px;"></p>
+
+<p>Now we have our base color and our accent. On top of that, we have a few complementary shades of each, just in case we need them for gradients and the like. The colors can then be exported in a number of formats so you can make use of them.</p>
+
+<p>Once you have these colors, you will probably still need to select appropriate neutral colors. Common design practice is to try to find the sweet spot where there's just enough contrast that the text is crisp and readable but not enough contrast to become harsh for the eyes. It's easy to go too far in one way or another so be sure to get feedback on your colors once you've selected them and have examples of them in use available. If the contrast is too low, your text will tend to be washed out by the background, leaving it unreadable, but if your contrast is too high, the user may find your site garish and unpleasant to look at.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></li>
+ <li><a href="/en-US/docs/Web/Guide/Graphics">Graphics on the web</a></li>
+ <li><a href="/en-US/docs/Tools/DevToolsColors">MDN's color picker tool</a></li>
+</ul>
diff --git a/files/de/web/html/attributes/index.html b/files/de/web/html/attributes/index.html
new file mode 100644
index 0000000000..3ec9df8ec7
--- /dev/null
+++ b/files/de/web/html/attributes/index.html
@@ -0,0 +1,662 @@
+---
+title: HTML attribute reference
+slug: Web/HTML/Attributes
+tags:
+  - Anfänger
+  - Attribute
+  - Einstellungen
+  - Elemente
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Attributes
+---
+<p>Elemente in HTML haben <strong>Attribute</strong>; dies sind zusätzliche Werte, die die Elemente konfigurieren oder ihr Verhalten auf verschiedene Weise anpassen, um die Kriterien zu erfüllen, die die Benutzer wollen.</p>
+
+<h2 id="Attributliste">Attributliste</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Attributname</th>
+   <th>Elemente</th>
+   <th>Beschreibung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>accept</code></td>
+   <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td>
+   <td>Liste der Typen, die der Server akzeptiert, in der Regel ein Dateityp.</td>
+  </tr>
+  <tr>
+   <td><code>accept-charset</code></td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>Liste der unterstützten Zeichensätze.</td>
+  </tr>
+  <tr>
+   <td><code>accesskey</code></td>
+   <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td>
+   <td>Definiert eine Tastenkombination zum Aktivieren oder Hinzufügen von Fokus auf das Element.</td>
+  </tr>
+  <tr>
+   <td><code>action</code></td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>Die URI eines Programms, das die über das Formular übermittelten Informationen verarbeitet.</td>
+  </tr>
+  <tr>
+   <td><code>align</code></td>
+   <td>{{ HTMLElement("applet") }}, {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }},  {{ HTMLElement("hr") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }},  {{ HTMLElement("td") }},  {{ HTMLElement("tfoot") }} , {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }}</td>
+   <td>Gibt die horizontale Ausrichtung des Elements an.</td>
+  </tr>
+  <tr>
+   <td><code>alt</code></td>
+   <td>{{ HTMLElement("applet") }}, {{ HTMLElement("area") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}</td>
+   <td>Alternativer Text, falls ein Bild oder ein vergleichbares anderes Element nicht angezeigt werden kann.</td>
+  </tr>
+  <tr>
+   <td><code>async</code></td>
+   <td>{{ HTMLElement("script") }}</td>
+   <td>Gibt an, dass das Skript asynchron ausgeführt werden soll.</td>
+  </tr>
+  <tr>
+   <td><code>autocomplete</code></td>
+   <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td>
+   <td>Gibt an, ob die Kontrollen in diesem Formular standardmäßig ihre Werte automatisch durch den Browser vervollständigen können.</td>
+  </tr>
+  <tr>
+   <td><code>autofocus</code></td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Das Element sollte nach der geladenen Seite automatisch fokussiert werden.</td>
+  </tr>
+  <tr>
+   <td><code>autoplay</code></td>
+   <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td>
+   <td>Das Audio oder Video sollte so schnell wie möglich spielen.</td>
+  </tr>
+  <tr>
+   <td><code>autosave</code></td>
+   <td>{{ HTMLElement("input") }}</td>
+   <td>Bisherige Werte sollten Dropdowns von auswählbaren Werten über Seitenlasten bestehen bleiben.</td>
+  </tr>
+  <tr>
+   <td><code>bgcolor</code></td>
+   <td>{{ HTMLElement("body") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }}</td>
+   <td>
+    <p>Hintergrundfarbe des Elements</p>
+
+    <div class="note">
+    <p><strong>Hinweis:</strong> Dies ist ein veraltetes Attribut. Bitte benutze stattdessen die CSS {{ Cssxref("background-color") }} Eigenschachaft.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>border</code></td>
+   <td>{{ HTMLElement("img") }}, {{ HTMLElement("object") }}, {{ HTMLElement("table") }}</td>
+   <td>
+    <p>Die Randbreite eines Elements</p>
+
+    <div class="note">
+    <p><strong>Hinweis:</strong> Die ist ein veraltetes Attribut. Bitte benutze stattdessen die CSS {{ Cssxref("border") }} Eigenschaft.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>buffered</code></td>
+   <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td>
+   <td>Enthält den Zeitbereich von bereits gepufferten Medien.</td>
+  </tr>
+  <tr>
+   <td><code>challenge</code></td>
+   <td>{{ HTMLElement("keygen") }}</td>
+   <td>Eine Herausforderung, die zusammen mit dem öffentlichen Schlüssel eingereicht wird.</td>
+  </tr>
+  <tr>
+   <td><code>charset</code></td>
+   <td>{{ HTMLElement("meta") }}, {{ HTMLElement("script") }}</td>
+   <td>Deklariert die Zeichencodierung der Seite oder des Skripts.</td>
+  </tr>
+  <tr>
+   <td><code>checked</code></td>
+   <td>{{ HTMLElement("command") }}, {{ HTMLElement("input") }}</td>
+   <td>Gibt an, ob das Element auf Seitenladung überprüft werden soll.</td>
+  </tr>
+  <tr>
+   <td><code>cite</code></td>
+   <td>{{ HTMLElement("blockquote") }}, {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("q") }}</td>
+   <td>Enthält einen URI, der auf die Quelle des Angebots oder der Änderung verweist.</td>
+  </tr>
+  <tr>
+   <td><code>class</code></td>
+   <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td>
+   <td>Oft mit CSS verwendet, um Elemente mit gemeinsamen Eigenschaften zu gestalten.</td>
+  </tr>
+  <tr>
+   <td><code>code</code></td>
+   <td>{{ HTMLElement("applet") }}</td>
+   <td>Gibt die URL der zu ladenden und ausgeführten Klassendatei des Applets an.</td>
+  </tr>
+  <tr>
+   <td><code>codebase</code></td>
+   <td>{{ HTMLElement("applet") }}</td>
+   <td>Dieses Attribut gibt die absolute oder relative URL des Verzeichnisses an, in dem Applets '.class-Dateien, die durch das Codeattribut referenziert werden, gespeichert sind.</td>
+  </tr>
+  <tr>
+   <td><code>color</code></td>
+   <td>{{ HTMLElement("basefont") }}, {{ HTMLElement("font") }}, {{ HTMLElement("hr") }}</td>
+   <td>
+    <p>Dieses Attribut setzt die Textfarbe entweder mit einer benannten Farbe oder einer Farbe, die im hexadezimalen #RRGGBB-Format angegeben ist.</p>
+
+    <div class="note">
+    <p><strong>Hinweis:</strong> Das ist ein veraltetestes Attribut. Bitte benutze stattdessen die CSS {{ Cssxref("color") }} Eigenschaft.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>cols</code></td>
+   <td>{{ HTMLElement("textarea") }}</td>
+   <td>Definiert die Anzahl der Spalten in einem Textbereich.</td>
+  </tr>
+  <tr>
+   <td><code>colspan</code></td>
+   <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td>
+   <td>Das colspan-Attribut definiert die Anzahl der Spalten, die eine Zelle überspannen soll.</td>
+  </tr>
+  <tr>
+   <td><code>content</code></td>
+   <td>{{ HTMLElement("meta") }}</td>
+   <td>Ein Wert, der mit <code>http-equiv</code> oder dem Namen verbunden ist, abhängig vom Kontext.</td>
+  </tr>
+  <tr>
+   <td><code>contenteditable</code></td>
+   <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td>
+   <td>Gibt an, ob der Inhalt des Elements bearbeitet werden kann.</td>
+  </tr>
+  <tr>
+   <td><code>contextmenu</code></td>
+   <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td>
+   <td>Definiert die ID eines {{HTMLElement("menu")}} - Elements, das als Kontextmenü des Elements dient.</td>
+  </tr>
+  <tr>
+   <td><code>controls</code></td>
+   <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td>
+   <td>Gibt an, ob der Browser dem Benutzer die Wiedergabesteuerung anzeigen soll.</td>
+  </tr>
+  <tr>
+   <td><code>coords</code></td>
+   <td>{{ HTMLElement("area") }}</td>
+   <td>Ein Satz von Werten, die die Koordinaten des Hot-Spot-Bereichs angeben.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">crossorigin</a></code></td>
+   <td>{{ HTMLElement("audio") }}, {{ HTMLElement("img") }}, {{ HTMLElement("link") }}, {{ HTMLElement("script") }}, {{ HTMLElement("video") }}</td>
+   <td>Wie das Element grenzüberschreitende Anfragen behandelt.</td>
+  </tr>
+  <tr>
+   <td><code>data</code></td>
+   <td>{{ HTMLElement("object") }}</td>
+   <td>Gibt die URL der Ressource an.</td>
+  </tr>
+  <tr>
+   <td><code>data-*</code></td>
+   <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td>
+   <td>Ermöglicht es Ihnen, benutzerdefinierte Attribute an ein HTML-Element anzuhängen.</td>
+  </tr>
+  <tr>
+   <td><code>datetime</code></td>
+   <td>{{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("time") }}</td>
+   <td>Gibt das Datum und die Uhrzeit an, die dem Element zugeordnet sind.</td>
+  </tr>
+  <tr>
+   <td><code>default</code></td>
+   <td>{{ HTMLElement("track") }}</td>
+   <td>Zeigt an, dass die Spur aktiviert werden soll, es sei denn, die Einstellungen des Benutzers zeigen etwas anderes an.</td>
+  </tr>
+  <tr>
+   <td><code>defer</code></td>
+   <td>{{ HTMLElement("script") }}</td>
+   <td>Gibt an, dass das Skript nach dem Analysieren der Seite ausgeführt werden soll.</td>
+  </tr>
+  <tr>
+   <td><code>dir</code></td>
+   <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td>
+   <td>Definiert die Textrichtung. Zulässige Werte sind (links-nach-rechts oder rechts-nach-links)</td>
+  </tr>
+  <tr>
+   <td><code>dirname</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>disabled</code></td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Gibt an, ob der Benutzer mit dem Element interagieren kann.</td>
+  </tr>
+  <tr>
+   <td><code>download</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td>
+   <td>Zeigt an, dass der Hyperlink zum Herunterladen einer Ressource verwendet werden soll.</td>
+  </tr>
+  <tr>
+   <td><code>draggable</code></td>
+   <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td>
+   <td>Legt fest, ob das Element gezogen werden kann.</td>
+  </tr>
+  <tr>
+   <td><code>dropzone</code></td>
+   <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td>
+   <td>Gibt an, dass das Element das Fallenlassen von Inhalt auf ihm akzeptiert.</td>
+  </tr>
+  <tr>
+   <td><code>enctype</code></td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>Definiert den Inhaltstyp des Formulars, wenn die Methode POST ist.</td>
+  </tr>
+  <tr>
+   <td><code>for</code></td>
+   <td>{{ HTMLElement("label") }}, {{ HTMLElement("output") }}</td>
+   <td>Beschreibt Elemente, die zu diesem gehören.</td>
+  </tr>
+  <tr>
+   <td><code>form</code></td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Gibt das Formular an, das der Besitzer des Elements ist.</td>
+  </tr>
+  <tr>
+   <td><code>formaction</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("button") }}</td>
+   <td>Gibt die Aktion des Elements an und überschreibt die im {{HTMLElement ("Formular")}} definierte Aktion.</td>
+  </tr>
+  <tr>
+   <td><code>headers</code></td>
+   <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td>
+   <td>IDs der <code>&lt;th&gt;</code> -Elemente, die für dieses Element gelten.</td>
+  </tr>
+  <tr>
+   <td><code>height</code></td>
+   <td>{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}</td>
+   <td>
+    <p>Gibt die Höhe der hier aufgeführten Elemente an. Für alle anderen Elemente verwenden Sie die Eigenschaft CSS {{cssxref ("height")}}.</p>
+
+    <div class="note">
+    <p><strong>Hinweis:</strong> In einigen Fällen wie {{HTMLElement ("div")}} ist dies ein Legacy-Attribut, in welchem ​​Fall die CSS {{Cssxref ("height")}} Eigenschaft stattdessen verwendet werden soll.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>hidden</code></td>
+   <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td>
+   <td>Verhindert das Rendering des gegebenen Elements, während Kinderelemente, z.B. Script-Elemente, aktiv.</td>
+  </tr>
+  <tr>
+   <td><code>high</code></td>
+   <td>{{ HTMLElement("meter") }}</td>
+   <td>Zeigt die untere Schranke des oberen Bereichs an.</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("link") }}</td>
+   <td>Gibt die URL einer verknüpften Ressource an.</td>
+  </tr>
+  <tr>
+   <td><code>hreflang</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td>
+   <td>Gibt die Sprache der verknüpften Ressource an.</td>
+  </tr>
+  <tr>
+   <td><code>http-equiv</code></td>
+   <td>{{ HTMLElement("meta") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>icon</code></td>
+   <td>{{ HTMLElement("command") }}</td>
+   <td>Gibt ein Bild an, das den Befehl darstellt.</td>
+  </tr>
+  <tr>
+   <td><code>id</code></td>
+   <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td>
+   <td>Oft mit CSS verwendet, um ein bestimmtes Element zu stylen. Der Wert dieses Attributs muss eindeutig sein.</td>
+  </tr>
+  <tr>
+   <td><code>integrity</code></td>
+   <td>{{ HTMLElement("link") }}, {{ HTMLElement("script") }} </td>
+   <td>
+    <p>Sicherheits-Feature, das Browsern ermöglicht zu verifizieren, was sie abrufen.</p>
+
+    <p><a href="https://developer.mozilla.org/de/docs/Web">MDN Link</a></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>ismap</code></td>
+   <td>{{ HTMLElement("img") }}</td>
+   <td>Gibt an, dass das Bild Teil einer Server-seitigen Image-Map ist.</td>
+  </tr>
+  <tr>
+   <td><code>itemprop</code></td>
+   <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>keytype</code></td>
+   <td>{{ HTMLElement("keygen") }}</td>
+   <td>Spezifiziert den Typ des generierten Schlüssels.</td>
+  </tr>
+  <tr>
+   <td><code>kind</code></td>
+   <td>{{ HTMLElement("track") }}</td>
+   <td>Spezifiziert die Art der Textspur.</td>
+  </tr>
+  <tr>
+   <td><code>label</code></td>
+   <td>{{ HTMLElement("track") }}</td>
+   <td>Definiert einen für den Nutzer lesbaren Titel der Textspur.</td>
+  </tr>
+  <tr>
+   <td><code>lang</code></td>
+   <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td>
+   <td>Definiert die im Element genutzte Sprache.</td>
+  </tr>
+  <tr>
+   <td><code>language</code></td>
+   <td>{{ HTMLElement("script") }}</td>
+   <td>Definiert die im Element genutzte Skriptsprache.</td>
+  </tr>
+  <tr>
+   <td><code>list</code></td>
+   <td>{{ HTMLElement("input") }}</td>
+   <td>Identifiziert eine dem Nutzer vorzuschlagende Liste vordefinierter Optionen.</td>
+  </tr>
+  <tr>
+   <td><code>loop</code></td>
+   <td>{{ HTMLElement("audio") }}, {{ HTMLElement("bgsound") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("video") }}</td>
+   <td>Gibt an, ob das Medium ab dem Start beginnen soll, wenn es fertig ist.</td>
+  </tr>
+  <tr>
+   <td><code>low</code></td>
+   <td>{{ HTMLElement("meter") }}</td>
+   <td>Zeigt die obere Schranke des unteren Bereiches an.</td>
+  </tr>
+  <tr>
+   <td><code>manifest</code></td>
+   <td>{{ HTMLElement("html") }}</td>
+   <td>Gibt die URL des Cache-Manifests des Dokuments an.</td>
+  </tr>
+  <tr>
+   <td><code>max</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td>
+   <td>Gibt den maximal zulässigen Wert an.</td>
+  </tr>
+  <tr>
+   <td><code>maxlength</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Definiert die maximal zulässige Anzahl von Zeichen im Element.</td>
+  </tr>
+  <tr>
+   <td><code>media</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}</td>
+   <td>Gibt einen Hinweis auf das Medium an, für das die verknüpfte Ressource entworfen wurde.</td>
+  </tr>
+  <tr>
+   <td><code>method</code></td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>Legt fest, welche HTTP-Methode bei der Übermittlung des Formulars verwendet werden soll. Kann GET (Standard) oder POST sein.</td>
+  </tr>
+  <tr>
+   <td><code>min</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}</td>
+   <td>Gibt den zulässigen Mindestwert an.</td>
+  </tr>
+  <tr>
+   <td><code>multiple</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td>
+   <td>Gibt an, ob mehrere Werte in einer Eingabe des Typs E-Mail oder Datei eingegeben werden können.</td>
+  </tr>
+  <tr>
+   <td><code>muted</code></td>
+   <td>{{ HTMLElement("video") }}</td>
+   <td>Zeigt an, ob der Ton anfänglich auf Seitenladung ausgeschaltet wird.</td>
+  </tr>
+  <tr>
+   <td><code>name</code></td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("map") }}, {{ HTMLElement("meta") }}, {{ HTMLElement("param") }}</td>
+   <td>Name des Elements. Zum Beispiel von dem Server verwendet, um die Felder in Form zu übermitteln.</td>
+  </tr>
+  <tr>
+   <td><code>novalidate</code></td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>Dieses Attribut gibt an, dass das Formular bei der Übermittlung nicht validiert werden darf.</td>
+  </tr>
+  <tr>
+   <td><code>open</code></td>
+   <td>{{ HTMLElement("details") }}</td>
+   <td>Gibt an, ob die Details auf Seite geladen werden sollen.</td>
+  </tr>
+  <tr>
+   <td><code>optimum</code></td>
+   <td>{{ HTMLElement("meter") }}</td>
+   <td>Zeigt den optimalen numerischen Wert an.</td>
+  </tr>
+  <tr>
+   <td><code>pattern</code></td>
+   <td>{{ HTMLElement("input") }}</td>
+   <td>Definiert einen regulären Ausdruck, den der Wert des Elements validiert.</td>
+  </tr>
+  <tr>
+   <td><code>ping</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>placeholder</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Bietet dem Benutzer einen Hinweis darauf, was im Feld eingegeben werden kann.</td>
+  </tr>
+  <tr>
+   <td><code>poster</code></td>
+   <td>{{ HTMLElement("video") }}</td>
+   <td>Eine URL, die einen Posterrahmen anzeigt, bis der Benutzer spielt oder sucht.</td>
+  </tr>
+  <tr>
+   <td><code>preload</code></td>
+   <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td>
+   <td>Indicates whether the whole resource, parts of it or nothing should be preloaded.</td>
+  </tr>
+  <tr>
+   <td><code>radiogroup</code></td>
+   <td>{{ HTMLElement("command") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>readonly</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Indicates whether the element can be edited.</td>
+  </tr>
+  <tr>
+   <td><code>rel</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td>
+   <td>Specifies the relationship of the target object to the link object.</td>
+  </tr>
+  <tr>
+   <td><code>required</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Indicates whether this element is required to fill out or not.</td>
+  </tr>
+  <tr>
+   <td><code>reversed</code></td>
+   <td>{{ HTMLElement("ol") }}</td>
+   <td>Indicates whether the list should be displayed in a descending order instead of a ascending.</td>
+  </tr>
+  <tr>
+   <td><code>rows</code></td>
+   <td>{{ HTMLElement("textarea") }}</td>
+   <td>Defines the number of rows in a text area.</td>
+  </tr>
+  <tr>
+   <td><code>rowspan</code></td>
+   <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td>
+   <td>Defines the number of rows a table cell should span over.</td>
+  </tr>
+  <tr>
+   <td><code>sandbox</code></td>
+   <td>{{ HTMLElement("iframe") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>scope</code></td>
+   <td>{{ HTMLElement("th") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>scoped</code></td>
+   <td>{{ HTMLElement("style") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>seamless</code></td>
+   <td>{{ HTMLElement("iframe") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>selected</code></td>
+   <td>{{ HTMLElement("option") }}</td>
+   <td>Defines a value which will be selected on page load.</td>
+  </tr>
+  <tr>
+   <td><code>shape</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>size</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td>
+   <td>Defines the width of the element (in pixels). If the element's <code>type</code> attribute is <code>text</code> or <code>password</code> then it's the number of characters.</td>
+  </tr>
+  <tr>
+   <td><code>sizes</code></td>
+   <td>{{ HTMLElement("link") }}, {{ HTMLElement("img") }}, {{ HTMLElement("source") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>slot</code></td>
+   <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td>
+   <td>Assigns a slot in a shadow DOM shadow tree to an element.</td>
+  </tr>
+  <tr>
+   <td><code>span</code></td>
+   <td>{{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>spellcheck</code></td>
+   <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td>
+   <td>Indicates whether spell checking is allowed for the element.</td>
+  </tr>
+  <tr>
+   <td><code>src</code></td>
+   <td>{{ HTMLElement("audio") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("track") }}, {{ HTMLElement("video") }}</td>
+   <td>Die URL des einbettbaren Inhalts.</td>
+  </tr>
+  <tr>
+   <td><code>srcdoc</code></td>
+   <td>{{ HTMLElement("iframe") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>srclang</code></td>
+   <td>{{ HTMLElement("track") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>srcset</code></td>
+   <td>{{ HTMLElement("img") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>start</code></td>
+   <td>{{ HTMLElement("ol") }}</td>
+   <td>Definiert die erste Zahl, wenn sie anders als 1 ist.</td>
+  </tr>
+  <tr>
+   <td><code>step</code></td>
+   <td>{{ HTMLElement("input") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>style</code></td>
+   <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td>
+   <td>Definiert CSS Stile für das Element und überschreibt andere Stile, welche z.B. in einem Stylesheet für das Element festgelegt sind.</td>
+  </tr>
+  <tr>
+   <td><code>summary</code></td>
+   <td>{{ HTMLElement("table") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>tabindex</code></td>
+   <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td>
+   <td>Overrides the browser's default tab order and follows the one specified instead.</td>
+  </tr>
+  <tr>
+   <td><code>target</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("form") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>title</code></td>
+   <td><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">Globales Attribut</a></td>
+   <td>Text to be displayed in a tooltip when hovering over the element.</td>
+  </tr>
+  <tr>
+   <td><code>type</code></td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("command") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("object") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}, {{ HTMLElement("menu") }}</td>
+   <td>Definiert den Typ eines Elements.</td>
+  </tr>
+  <tr>
+   <td><code>usemap</code></td>
+   <td>{{ HTMLElement("img") }},  {{ HTMLElement("input") }}, {{ HTMLElement("object") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>value</code></td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("li") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("param") }}</td>
+   <td>Defines a default value which will be displayed in the element on page load.</td>
+  </tr>
+  <tr>
+   <td><code>width</code></td>
+   <td>{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}</td>
+   <td>
+    <p>For the elements listed here, this establishes the element's width.</p>
+
+    <div class="note">
+    <p><strong>Note:</strong> For all other instances, such as {{ HTMLElement("div") }}, this is a legacy attribute, in which case the CSS {{ Cssxref("width") }} property should be used instead.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>wrap</code></td>
+   <td>{{ HTMLElement("textarea") }}</td>
+   <td>Indicates whether the text should be wrapped.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Content_versus_IDL_attributes">Content versus IDL attributes</h2>
+
+<p>In HTML, most attributes have two faces: the <strong>content attribute</strong> and the <strong>IDL attribute</strong>.</p>
+
+<p>The content attribute is the attribute as you set it from the content (the HTML code) and you can set it or get it via {{domxref("element.setAttribute()")}} or {{domxref("element.getAttribute()")}}. The content attribute is always a string even when the expected value should be an integer. For example, to set an {{HTMLElement("input")}} element's <code>maxlength</code> to 42 using the content attribute, you have to call <code>setAttribute("maxlength", "42")</code> on that element.</p>
+
+<p>The IDL attribute is also known as a JavaScript property. These are the attributes you can read or set using JavaScript properties like <code class="moz-txt-verticalline">element.foo</code>. The IDL attribute is always going to use (but might transform) the underlying content attribute to return a value when you get it and is going to save something in the content attribute when you set it. In other words, the IDL attributes, in essence, reflect the content attributes.</p>
+
+<p>Most of the time, IDL attributes will return their values as they are really used. For example, the default <code>type</code> for {{HTMLElement("input")}} elements is "text", so if you set <code>input.type="foobar"</code>, the <code>&lt;input&gt;</code> element will be of type text (in the appearance and the behavior) but the "type" content attribute's value will be "foobar". However, the <code>type</code> IDL attribute will return the string "text".</p>
+
+<p>IDL attributes are not always strings; for example, <code>input.maxlength</code> is a number (a signed long). When using IDL attributes, you read or set values of the desired type, so <code>input.maxlength</code> is always going to return a number and when you set <code>input.maxlength</code> ,it wants a number. If you pass another type, it is automatically converted to a number as specified by the standard JavaScript rules for type conversion.</p>
+
+<p>IDL attributes can <a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes">reflect other types</a> such as unsigned long, URLs, booleans, etc. Unfortunately, there are no clear rules and the way IDL attributes behave in conjunction with their corresponding content attributes depends on the attribute. Most of the time, it will follow <a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes">the rules laid out in the specification</a>, but sometimes it doesn't. HTML specifications try to make this as developer-friendly as possible, but for various reasons (mostly historical), some attributes  behave oddly (<code>select.size</code>, for example) and you should read the specifications to understand how exactly they behave.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/de/docs/Web/HTML/Element">HTML-Elemente</a></li>
+</ul>
diff --git a/files/de/web/html/block-level_elemente/index.html b/files/de/web/html/block-level_elemente/index.html
new file mode 100644
index 0000000000..ed5cd1af79
--- /dev/null
+++ b/files/de/web/html/block-level_elemente/index.html
@@ -0,0 +1,108 @@
+---
+title: Block-Level Elemente
+slug: Web/HTML/Block-level_elemente
+tags:
+  - Anfänger
+  - Beginner
+  - Elemente
+  - Guide
+  - HTML
+  - HTML Elemente
+  - Referenzen
+  - Web Programmierung
+translation_of: Web/HTML/Block-level_elements
+---
+<p>Block- und <a href="/de/docs/Web/HTML/Inline_elemente" title="/en-US/docs/HTML/inline_elements">Inline-Elemente</a> sind die zwei ursprünglichen Kategorien der darstellenden HTML-Elemente.</p>
+
+<p>Block-Elemente nehmen typischerweise die gesamte verfügbare Breite ihres Elternelements ein und grenzen ihren Inhalt vertikal durch je einen Zeilenumbruch gegenüber den vor- und nachfolgenden Elementen ab. Auf diese Weise erzeugen sie den rechteckigen Block, der ihnen den Namen gibt.</p>
+
+<p>Block-Elemente stellen inhaltlich einen zusammenhängenden Bereich dar und geben ihm eine semantische Bedeutung. Prominentes Beispiel für ein Block-Element ist {{ HTMLElement("p") }}, das einen Textabsatz (Englisch: paragraph) umfasst und mit Abständen darüber und darunter von anderen Bereichen des Dokuments trennt.<br>
+ Einzige Ausnahme ist von dieser Regel ist {{ HTMLElement("div") }}; dieses hat keine semantische Bedeutung und dient lediglich dem Zugriff auf den betreffenden Bereich mittels CSS oder Javascript.</p>
+
+<p>Gemeinhin können Block-Elemente Inline- und meist auch weitere Block-Elemente enthalten. Dieser strukturellen Unterscheidung liegt die Idee zugrunde, dass auf Block-Ebene größere Strukturen definiert werden als auf Inline-Ebene.<br>
+ Die höchste Ebene für Block-Elemente selbst ist das Element {{ HTMLElement("body") }}.</p>
+
+<p>Die einfache Unterscheidung zwischen Block- und Inline-Ebene wird in HTML-Spezifikationen bis einschließlich Version 4.01 verwendet. In HTML 5 wird diese Zweiteilung zu einem komplexeren Satz von <a href="/en-US/docs/HTML/Content_categories" title="/en-US/docs/HTML/Content_categories">Inhaltskategorien</a> ergänzt. Hierbei entspricht die Block-Ebene in HTML 5 grob der Kategorie <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="/en-US/docs/HTML/Content_categories#Flow_content">fließender Inhalte</a>, während die Inline-Ebene der Kategorie <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="/en-US/docs/HTML/Content_categories#Phrasing_content">gestaltender Inhalte</a> gleichkommt. Darüber hinaus existieren weitere Kategorien.</p>
+
+<h2 id="Elemente">Elemente</h2>
+
+<p>Die nachfolgende Liste zeigt eine komplette Übersicht aller HTML-Block-Elemente (die neuen HTML-5-Elemente sind technisch gesehen nicht als Block-Elemente definiert).</p>
+
+<div class="threecolumns">
+<dl>
+ <dt>{{ HTMLElement("address") }}</dt>
+ <dd>Kontaktinformation.</dd>
+ <dt>{{ HTMLElement("article") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Inhalt eines Artikels.</dd>
+ <dt>{{ HTMLElement("aside") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Anmerkungen.</dd>
+ <dt>{{ HTMLElement("audio") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Audio-Wiedergabe.</dd>
+ <dt>{{ HTMLElement("video") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Video-Wiedergabe.</dd>
+ <dt>{{ HTMLElement("blockquote") }}</dt>
+ <dd>Zitat in Form eines eigenständigen Absatzes.</dd>
+ <dt>{{ HTMLElement("canvas") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Bereich zum Zeichnen und Malen.</dd>
+ <dt>{{ HTMLElement("dd") }}</dt>
+ <dd>Definition, Beschreibung.</dd>
+ <dt>{{ HTMLElement("div") }}</dt>
+ <dd>Allgemeine Unterteilung ohne semantische Aussage.</dd>
+</dl>
+
+
+
+<dl>
+ <dt></dt>
+ <dt>{{ HTMLElement("dl") }}</dt>
+ <dd>Definitionsliste.</dd>
+</dl>
+
+<dl>
+ <dt>{{ HTMLElement("fieldset") }}</dt>
+ <dd>Gruppe von Elementen im Formular oder Reiter im Dialog.</dd>
+ <dt>{{ HTMLElement("figcaption") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Beschreibung einer Grafik.</dd>
+ <dt>{{ HTMLElement("figure") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Grafik mit Beschreibung (siehe {{ HTMLElement("figcaption") }}).</dd>
+ <dt>{{ HTMLElement("footer") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Fußbereich.</dd>
+ <dt>{{ HTMLElement("form") }}</dt>
+ <dd>Eingabeformular.</dd>
+ <dt>{{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}</dt>
+ <dd>Überschriften in Abstufung 1 bis 6.</dd>
+ <dt>{{ HTMLElement("header") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Kopfbereich.</dd>
+ <dt>{{ HTMLElement("hgroup") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Gruppe mehrerer Überschriften.</dd>
+ <dt></dt>
+ <dt>{{ HTMLElement("hr") }}</dt>
+ <dd>Horizontrale Trennlinie.</dd>
+ <dt>{{ HTMLElement("noscript") }}</dt>
+ <dd>Ersatzinhalt, falls JavaScript deaktiviert ist.</dd>
+ <dt>{{ HTMLElement("ol") }}</dt>
+ <dd>Geordnete Liste.</dd>
+ <dt>{{ HTMLElement("output") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Dynamisch erzeugte Ausgaben.</dd>
+ <dt>{{ HTMLElement("p") }}</dt>
+ <dd>Textabsatz.</dd>
+ <dt>{{ HTMLElement("pre") }}</dt>
+ <dd><span class="short_text" id="result_box" lang="de"><span class="hps">Vorformatierter </span></span>Text.</dd>
+ <dt>{{ HTMLElement("section") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Abschnitt einer Seite.</dd>
+ <dt>{{ HTMLElement("table") }}</dt>
+ <dd>Tabelle.</dd>
+ <dt>{{ HTMLElement("tfoot") }}</dt>
+ <dd>Fußbereich der Tabelle.</dd>
+ <dt>{{ HTMLElement("ul") }}</dt>
+ <dd>Ungeordnete Liste.</dd>
+</dl>
+</div>
+
+<h3 id="See_also" name="See_also"></h3>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/HTML/Inline_elemente" title="en/HTML/Inline_elements">Inline-Elemente</a></li>
+</ul>
diff --git a/files/de/web/html/canvas/index.html b/files/de/web/html/canvas/index.html
new file mode 100644
index 0000000000..50e6da1aae
--- /dev/null
+++ b/files/de/web/html/canvas/index.html
@@ -0,0 +1,120 @@
+---
+title: Canvas
+slug: Web/HTML/Canvas
+tags:
+  - API
+  - Canvas
+  - HTML5
+translation_of: Web/API/Canvas_API
+---
+<div>{{CanvasSidebar}}</div>
+
+<p class="summary">Mit der Einführung von <a href="/en-US/docs/HTML/HTML5">HTML5 </a>wurde ein neues "Leinwand" Element zum Zeichnen von Grafiken mittels <a href="/en-US/docs/Web/JavaScript">JavaScript</a>-API vorgestellt: <strong>{{HTMLElement("canvas")}}</strong>. Die Anwendungsgebiete sind äußerst flexibel, so ist es möglich, mit Canvas Diagramme zu zeichnen, Bilder zu bearbeiten, Animationen zu erstellen oder sogar Videos zu bearbeiten und zu rendern.</p>
+
+<p>Der Support für <code>&lt;canvas&gt;</code> in Mozilla-Anwendungen wurde ab Gecko 1.8 (sprich ab <a href="/en-US/docs/Mozilla/Firefox/Releases/1.5">Firefox 1.5</a>) implementiert. Canvas stammt ursprünglich von Apple und wurde für das OS X <a href="https://en.wikipedia.org/wiki/Dashboard_%28Mac_OS%29">Dashboard </a>und den Safari-browser entwickelt. Der Internet Explorer unterstützt Canvas ab Version 9, wobei es durch ein Skript von Google's <a href="http://excanvas.sourceforge.net/">Explorer Canvas Projekt</a> auch in früheren Versionen des IE lauffähig ist. Google Chrome und Opera ab Version 9 unterstützen <code>&lt;canvas&gt;</code> ebenfalls problemlos.</p>
+
+<p>Das <code>&lt;canvas&gt;</code> Element wird zudem von <a href="/en-US/docs/Web/WebGL">WebGL </a>für die hardwarebeschleunigte Darstellung von 3D-Grafiken auf Webseiten eingesetzt.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Dies ist ein einfacher Code-Ausschnitt mit der {{domxref("CanvasRenderingContext2D.fillRect()")}} Methode.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span></code>
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.fillStyle = "green";
+ctx.fillRect(10, 10, 100, 100);
+</pre>
+
+<p>Bearbeite den untenstehenden Code und sieh live Updates im Canvas: (Funktion kaputt auf Deutsch, die Englische Seite funktioniert, bitte oben umschalten auf Englisch )</p>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Referenzen">Referenzen</h2>
+
+<div class="index">
+<ul>
+ <li>{{domxref("HTMLCanvasElement")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasGradient")}}</li>
+ <li>{{domxref("CanvasPattern")}}</li>
+ <li>{{domxref("ImageBitmap")}}</li>
+ <li>{{domxref("ImageData")}}</li>
+ <li>{{domxref("TextMetrics")}}</li>
+ <li>{{domxref("Path2D")}} {{experimental_inline}}</li>
+</ul>
+</div>
+
+<p>Die Schnittstellen, die sich auf <code>WebGLRenderingContext</code> beziehen, werden unter <a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a> zusammengefasst.</p>
+
+<h2 id="Leitfäden_und_Anleitungen">Leitfäden und Anleitungen</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas Tutorial</a></dt>
+ <dd>Eine ausführliche Anleitung, die sowohl grundlegende Nutzung als auch fortgeschrittene Funktionen umfasst</dd>
+ <dt><a href="/en-US/Add-ons/Code_snippets/Canvas">Code-Ausschnitte: Canvas</a></dt>
+ <dd>Einige Entwickler-orientierte Code-Ausschnitte, die <code>&lt;canvas&gt;</code> enthalten.</dd>
+ <dt><a href="/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster">Demo: A basic ray-caster</a></dt>
+ <dd>A demo of ray-tracing animation using canvas.</dd>
+ <dt><a href="/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas">DOM-Objekte in ein canvas zeichnen</a></dt>
+ <dd>Wie man DOM Inhalt, wie zum Beispiel HTML-Elemente, in ein canvas zeichnet.</dd>
+ <dt><a href="/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">Videos mit canvas manipulieren</a></dt>
+ <dd>{{HTMLElement("video")}} und {{HTMLElement("canvas")}} kombinieren, um Videos in Echtzeit zu manipulieren.</dd>
+</dl>
+
+<h2 id="Quellen">Quellen</h2>
+
+<h3 id="Allgemeines">Allgemeines</h3>
+
+<ul>
+ <li><a href="http://joshondesign.com/p/books/canvasdeepdive/title.html">HTML5 Canvas Deep Dive</a></li>
+ <li><a href="http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html">Canvas Handbook</a></li>
+</ul>
+
+<h3 id="Libraries">Libraries</h3>
+
+<ul>
+ <li><a href="http://fabricjs.com">Fabric.js</a> is an open-source canvas library with SVG parsing capabilities.</li>
+ <li><a href="https://github.com/ericdrowell/KineticJS">Kinetic.js</a> is an open-source canvas library focused on interactivity for desktop and mobile applications.</li>
+ <li><a href="http://paperjs.org/">Paper.js</a> is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas.</li>
+ <li><a href="http://libcanvas.github.com/">libCanvas</a> is powerful and lightweight canvas framework.</li>
+ <li><a href="http://processingjs.org">Processing.js</a> is a port of the Processing visualization language.</li>
+ <li><a href="https://playcanvas.com/">PlayCanvas</a> is an open source game engine.</li>
+ <li><a href="http://www.pixijs.com/">Pixi.js</a> is an open source game engine.</li>
+ <li><a href="http://www.liquidx.net/plotkit/">PlotKit</a> is a charting and graphing library.</li>
+ <li><a class="link-https" href="https://github.com/jeremyckahn/rekapi">Rekapi</a> is an animation key-framing API for Canvas.</li>
+ <li><a href="http://senchalabs.github.com/philogl/">PhiloGL</a> is a WebGL framework for data visualization, creative coding and game development.</li>
+ <li><a href="http://thejit.org/">JavaScript InfoVis Toolkit</a> creates interactive 2D Canvas data visualizations for the Web.</li>
+</ul>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "the-canvas-element.html", "Canvas")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/WebGL">WebGL</a></li>
+</ul>
diff --git a/files/de/web/html/element/a/index.html b/files/de/web/html/element/a/index.html
new file mode 100644
index 0000000000..6413dd1ac9
--- /dev/null
+++ b/files/de/web/html/element/a/index.html
@@ -0,0 +1,361 @@
+---
+title: <a>
+slug: Web/HTML/Element/a
+tags:
+  - Element
+  - HTML
+  - 'HTML: fliessender Inhalt'
+  - Inhalt
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/a
+---
+<div>{{HTMLRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Das <em>HTML-Element <code>&lt;a&gt;</code></em> (auch <em>HTML-Anker-Element</em>) definiert einen Hyperlink, ein benanntes Ziel für einen Hyperlink oder beides.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorien</a></th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Fließender Inhalt</a>, <a href="/de/docs/Web/Guide/HTML/Inhaltskategorien#Gestaltender_Inhalt" title="Gestaltender Inhalt">gestaltender Inhalt</a>, interaktiver Inhalt, fühlbarer Inhalt.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubter Inhalt</th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Transparent_content_model" title="HTML/Content_categories#Transparent_content_model">Transparent</a>, beinhaltet entweder <a href="/de/docs/Web/Guide/HTML/Inhaltskategorien#Fließender_Inhalt" title="HTML/Content_categories#Flow_content">fließenden Inhalt</a> (ausgenommen interaktiven Inhalt) oder <a href="/de/docs/Web/Guide/HTML/Inhaltskategorien#Gestaltender_Inhalt" title="Gestaltender Inhalt">gestaltender Inhalt</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag Wegfall</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte Elternelemente</th>
+   <td>Alle Elemente die <a href="/de/docs/Web/Guide/HTML/Inhaltskategorien#Gestaltender_Inhalt" title="Gestaltender Inhalt">gestaltenden Inhalt</a> akzeptieren, oder alle Elemente die <a href="/de/docs/Web/Guide/HTML/Inhaltskategorien#Fließender_Inhalt" title="HTML/Content_categories#Flow_content">fließenden Inhalt</a> erlauben.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte ARIA-Rollen</th>
+   <td>{{ARIARole("button")}}, {{ARIARole("checkbox")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("option")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}, {{ARIARole("treeitem")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLAnchorElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p><span style="line-height: 21px;">Dieses  Element besitzt die </span><a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute" style="line-height: 21px;" title="HTML/Global attributes">globalen Attribute</a><span style="line-height: 21px;">.</span></p>
+
+<dl>
+ <dt>{{htmlattrdef("download")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Dieses Attribut zeigt, dass der Autor möchte, dass der Hyperlink verwendet wird, um eine Datei herunterzuladen. Also soll der Browser, wenn der Benutzer auf den Link klickt, diesen fragen, wo die Datei lokal gespeichert werden soll. Falls dem Attribut ein Wert zugewiesen ist, wird dieser Wert als Dateiname zum Abspeichern vorgeschlagen (der Benutzer kann diesen Namen natürlich ändern). Es gibt keine Einschränkungen für erlaubte Werte (obgleich <code>/</code> und <code>\</code> in Unterstriche konvertiert werden, um Verwechslungen mit Dateipfaden zu vermeiden). Dennoch sollten Sie beachten, dass die meisten Dateisysteme Einschränkungen bezüglich der unterstützten Interpunktion in Dateinamen haben, sowie die Browser die Dateinamen anpassen könnten.
+ <div class="note">
+ <p><strong>Hinweis:</strong></p>
+
+ <ul>
+  <li>Dies kann mit <a href="/de/docs/Web/API/URL.createObjectURL" title="/en-US/docs/Web/API/URL.createObjectURL"><code>blob:</code>-URLs</a> und <code>data:</code>-URLs verwendet werden, um es für Benutzer leichter zu machen, Inhalte herunterzuladen, die durch JavaScript generiert wurden (z. B. ein Bild, welches online über eine Zeichen-Anwendung erstellt wurde).</li>
+  <li>Falls der HTTP-Header <code>Content-Disposition:</code> angegeben wird und einen anderen Dateinamen vorschlägt als dieses Attribut, hat der HTTP-Header Vorrang vor diesem Attribut.</li>
+  <li>Falls das Attribut angegeben wird und <code>Content-Disposition:</code> den Wert <code>inline</code> hat, gibt Firefox <code>Content-Disposition</code> eine größere Wichtigkeit, wie im Fall des Dateinamens, während Chrome dem <code>download</code>-Attribut mehr Priorität gibt.</li>
+  <li>Im <a href="/de/docs/Firefox_20_for_developers" title="/en-US/docs/Firefox_20_for_developers">Firefox 20</a> wird dieses Attribut nur für Links auf Dateien desselben Ursprungs angewendet.</li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("href")}}</dt>
+ <dd>Dieses war das einzige erforderliche Attribut für Anker, die einen Hyperlink definieren, aber es ist nicht länger erforderlich in HTML5. Wird dieses Attribut weggelassen, wird ein Platzhalter-Link erzeugt. Das <code>href</code>-Attribut zeigt das Ziel des Links an, entweder eine URL oder ein URL-Fragment. Ein URL-Fragment ist ein Name dem ein Doppelkreuz (<code>#</code>) vorausgeht, welches ein internes Ziel im aktuellen Dokument (eine <a href="/de/docs/HTML/Global_attributes#attr-id" title="Global attributes#attr-id">ID</a>) festlegt. URLs sind nicht auf Web-(HTTP-)Dokumente beschränkt. Sie können ein beliebiges Protokoll verwenden, das von Browser unterstützt wird. Zum Beispiel <code>file</code>, <code>ftp</code> und <code>mailto</code> funktionieren in den meisten Browsern.
+ <div class="note">
+ <p><strong>Hinweis:</strong> Sie können das spezielle Fragment „top“ verwenden, um Links zu erzeugen, die zurück zum Anfang der Seite springen. Zum Beispiel: <code>&lt;a href="#top"&gt;Return to top&lt;/a&gt;</code>. <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#scroll-to-fragid" lang="en" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#scroll-to-fragid">Dieses Verhalten ist in HTML5 festgelegt</a>.</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("media")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Dieses Attribut legt das Medium fest, zu welchem die verlinkte Seite gehört. Der Wert muss ein <a href="/de/docs/CSS/Media_queries" title="CSS/Media queries">Media Query</a> sein. Das Attribut ist sinnvoll, wenn auf externe Stylesheets verlinkt wird, während dem Browser erlaubt wird, das passende für das Gerät auszuwählen.
+ <div class="note">
+ <p><strong>Verwendungshinweis:</strong></p>
+
+ <ul>
+  <li>In HTML 4 ist nur eine einfache durch Leerzeichen getrennte Liste von <a href="/de/docs/CSS/@media" title="https://developer.mozilla.org/en-US/docs/CSS/@media">Media Types und Media Groups</a> definiert worden und als Werte für dieses Attribut erlaubt, z. B. <code>print</code>, <code>screen</code>, <code>aural</code>, <code>braille</code>, … HTML 5 hat dies auf beliebige <a href="/de/docs/CSS/Media_queries" title="CSS/Media queries">Media Queries</a> erweitert, die eine Obermenge der erlaubten Werte von HTML 4 sind.</li>
+  <li>Browser, welche die <a href="/de/docs/CSS/Media_queries" title="CSS/Media queries">CSS3 Media Queries</a> nicht unterstützen, werden nicht notwendigerweise den passenden Link erkennen. Vergessen Sie also nicht Fallback-Links auf die beschränkten Werte von HTML 4 zu definieren.</li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("ping")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Falls das Attribut <code>ping</code> vorhanden ist, wird den URLs der Zielseiten eine Benachrichtigung gesendet, wenn der Benutzer dem Hyperlink folgt.</dd>
+ <dt>{{htmlattrdef("rel")}}</dt>
+ <dd>Legt das Verhältnis des Zielobjekts zum Linkobjekt fest. Der Wert ist eine durch Leerzeichen getrennte Liste von <a href="/de/docs/Web/HTML/Link_types">Link-Typen</a>.</dd>
+ <dt>{{htmlattrdef("target")}}</dt>
+ <dd>Dieses Attribut legt fest, wo die verlinkte Quelle angezeigt wird. In HTML4 ist das der Name eines Frames oder ein Schlüsselwort für ein Frame. In HTML5 ist es ein Name eines <em>browsing context</em>es oder ein Schlüsselwort für einen <em>browsing context</em> (zum Beispiel ein Tab, Fenster oder Inline Frame). Die folgenden Schlüsselwörter haben eine spezielle Bedeutung:
+ <ul>
+  <li><code>_self</code>: Lädt die Antwort in dasselbe Frame (HTML4) bzw. denselben <em>browsing context</em> (HTML5) wie die aktuelle Seite. Dieser Wert ist der Standardwert.</li>
+  <li><code>_blank</code>: Lädt die Antwort in ein neues unbenanntes Fenster (HTML4) bzw. einen neuen <em>browsing context</em> (HTML5).</li>
+  <li><code>_parent</code>: Lädt die Antwort in den <em>frameset parent</em> des aktuellen Frames (HTML4) bzw. <em>parent browsing context</em> (HTML5) des aktuellen. Falls es keinen <em>parent</em> gibt, verhält sich dieser Wert wie <code>_self</code>.</li>
+  <li><code>_top</code>: Lädt die Antwort in das gesamte Fenster und alle Frames werden überschrieben (HTML4) bzw. in den obersten <em>browsing context</em> (d.h. der <em>browsing context</em>, der dem aktuellen übergeordnet ist und keine übergeordneten <em>browsing context</em>e hat). Falls es keinen übergeordneten gibt, verhält sich dieser Wert wie <code>_self</code>.</li>
+ </ul>
+ Verwenden Sie dieses Attribut nur, wenn ein <code>href</code>-Attribut vorhanden ist.</dd>
+ <dt>{{htmlattrdef("charset")}} {{obsoleteGeneric("inline","HTML5")}}</dt>
+ <dd>Dieses Attribut definiert die Zeichencodierung der verlinkten Datei. Der Wert ist eine durch Leerzeichen und/oder Komma-getrennte Liste von Zeichen-Sets nach der Definition der <a class="external" href="http://tools.ietf.org/html/rfc2045" title="http://tools.ietf.org/html/rfc2045">RFC 2045</a>. Der Standardwert ist ISO-8859-1.
+ <div class="note">
+ <p><strong>Verwendungshinweis:</strong> Dieses Attribut ist obsolet in HTML5 und <strong>sollte nicht mehr verwendet werden</strong>. Um denselben Effekt zu erhalten, verwenden Sie den HTTP-Header <code>Content-Type:</code> bei der verlinkten Datei.</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("coords")}} nur {{HTMLVersionInline(4)}}, {{obsoleteGeneric("inline","HTML5")}}</dt>
+ <dd>Bei der Verwendung mit dem <code>shape</code>-Attribut gibt dieses Attribut als durch Komma getrennte Liste von Zahlen die Koordinaten des Objekts auf der Seite an.</dd>
+ <dt>{{htmlattrdef("datafld")}} {{Non-standard_inline}}</dt>
+ <dd>Dieses Attribut legt den Spaltennamen des Datenquellenobjekts fest, das die Daten zur Verfügung stellt, die mit diesem Element verknüpft sind.
+ <div class="note">
+ <p><strong><strong>Verwendungshinweis</strong>:</strong> Dieses Attribut ist nicht standardisiert und <strong>s<strong>ollte nicht verwendet werden</strong></strong>. Um denselben Effekt zu erhalten, verwenden Sie Scripting und einen Mechanismus wie <a href="/de/docs/nsIXMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a>, um die Seite dynamisch zu verändern.</p>
+ </div>
+
+ <table class="fullwidth-table">
+  <tbody>
+   <tr>
+    <td rowspan="2">Unterstützung</td>
+    <td>Gecko</td>
+    <td>Presto</td>
+    <td>WebKit</td>
+    <td>Trident</td>
+   </tr>
+   <tr>
+    <td>Nicht unterstützt</td>
+    <td>Nicht unterstützt</td>
+    <td>Nicht unterstützt</td>
+    <td>IE4, IE5, IE6, IE7 (Entfernt in IE8)</td>
+   </tr>
+   <tr>
+    <td>Normatives Dokument</td>
+    <td colspan="4"><a class="external" href="http://msdn.microsoft.com/en-us/library/ms533703%28VS.85%29.aspx">Microsoft's Data Binding: dataFld Property (MSDN)</a></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt>{{htmlattrdef("datasrc")}} {{Non-standard_inline}}</dt>
+ <dd>Dieses Attribut zeigt die ID des Datenquellenobjekts an, das die Daten zur Verfügung stellt, die mit diesem Element verknüpft sind.
+ <div class="note">
+ <p><strong><strong>Verwendungshinweis</strong>:</strong> Dieses Attribut ist nicht standardisiert und <strong>s<strong>ollte nicht verwendet werden</strong></strong>. Um denselben Effekt zu erhalten, verwenden Sie Scripting und einen Mechanismus wie <a href="/de/docs/nsIXMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a>, um die Seite dynamisch zu verändern.</p>
+ </div>
+
+ <table class="fullwidth-table">
+  <tbody>
+   <tr>
+    <td rowspan="2">Unterstützung</td>
+    <td>Gecko</td>
+    <td>Presto</td>
+    <td>WebKit</td>
+    <td>Trident</td>
+   </tr>
+   <tr>
+    <td>Nicht unterstützt</td>
+    <td>Nicht unterstützt</td>
+    <td>Nicht unterstützt</td>
+    <td>IE4, IE5, IE6, IE7 (Entfernt in IE8)</td>
+   </tr>
+   <tr>
+    <td>Normatives Dokument</td>
+    <td colspan="4"><a class="external" href="http://msdn.microsoft.com/en-us/library/ms533709(VS.85).aspx" title="http://msdn.microsoft.com/en-us/library/ms533709(VS.85).aspx">Microsoft's Data Binding: dataSrc Property (MSDN)</a></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt>{{htmlattrdef("hreflang")}}</dt>
+ <dd>Dieses Attribut zeigt die Sprache der verlinkten Datei an. Es ist nur ein Hinweis. Erlaubte Werte sind bestimmt von <a class="external" href="http://www.ietf.org/rfc/bcp/bcp47.txt" title="http://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a> für HTML5 und von <a class="external" href="http://www.ietf.org/rfc/rfc1766.txt" title="http://www.ietf.org/rfc/rfc1766.txt">RFC1766</a> für HTML4. Verwenden Sie dieses Attribut nur, wenn ein <code>href</code>-Attribut vorhanden ist.</dd>
+ <dt>{{htmlattrdef("methods")}} {{Non-standard_inline}}</dt>
+ <dd>Der Wert dieses Attributes liefert Informationen über die Funktionen, die an einem Objekt ausgeführt werden können. Die Werte werden üblicherweise vom HTTP bestimmt, wenn es verwendet wird, aber es könnte (für ähnliche Gründe wie für das <code>title</code>-Attribut) nützlich sein, hinweisende Informationen im Voraus im Link einzufügen. Zum Beispiel könnte der Browser einen Link anders anzeigen, je nachdem welche Methoden angegenben sind; etwas, das durchsuchbar ist könnte ein anderes Icon erhalten oder ein Link, der auf eine fremde Seite verweist, könnte mit einem Hinweis, die Seite zu verlassen, angezeigt werden. Dieses Attribut ist weder gut verstanden noch unterstützt, sogar vom definierenden Browser, Internet Explorer 4. <a class="external" href="http://msdn.microsoft.com/en-us/library/ms534168(VS.85).aspx">Methods Property (MSDN)</a></dd>
+ <dt>{{htmlattrdef("name")}} nur {{HTMLVersionInline(4)}}, {{obsoleteGeneric("inline","HTML5")}}</dt>
+ <dd>Dieses Attribut wird in einem Anker benötigt, der ein Sprungziel innerhalb einer Seite definiert. Ein Wert für <strong>name</strong> ist einem Wert für das <strong>id</strong>-Attribut ähnlich und sollte eine alphanumerische Identifikation sein, die für das Dokument eindeutig ist. Nach der HTML-4.01-Spezifikation können <strong>id</strong> und <strong>name</strong> beide mit dem <code>a</code>-Element verwendet werden, solange sie idente Werte haben.
+ <div class="note">
+ <p><strong>Verwendungshinweis:</strong> Dieses Attribut ist obsolet in HTML5. Verwenden Sie das <a href="/de/docs/Web/HTML/Globale_Attribute#attr-id" title="HTML/Global attributes#id">globale Attribut <strong>id</strong></a> stattdessen.</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("rev")}} nur {{HTMLVersionInline(4)}}, {{obsoleteGeneric("inline","HTML5")}}</dt>
+ <dd>Dieses Attribut legt einen umgekehrten Link fest und ist das inverse Verhältnis zum <strong>rel</strong>-Attribut. Es ist nützlich, um anzuzeigen, woher ein Objekt kam, sowie den Autor eines Dokuments.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("shape")}} nur {{HTMLVersionInline(4)}}, {{obsoleteGeneric("inline","HTML5")}}</dt>
+ <dd>Dieses Attribut wird verwendet, um eine auswählbare Region für Hyperlinks festzulegen, die mit einer Abbildung verbunden sind, um eine Bildkarte zu erstellen. Die Werte für das Attribut sind <code>circle</code>, <code>default</code>, <code>polygon</code> und <code>rect</code>. Das Format des <strong>coords</strong>-Attributes hängt vom Wert jenes Attributs <strong>shape</strong> ab. Für <code>circle</code> ist der Wert <code>x,y,r</code>, wobei <code>x</code> und <code>y</code> die Pixelkoordinaten für den Mittelpunkt des Kreises sind und <code>r</code> der Radius in Pixeln ist. Für <code>rect</code> sollte das <strong>coords</strong>-Attribut <code>x,y,w,h</code> sein. Die Werte <code>x,y</code> legen das obere linke Eck des Rechtecks fest, während <code>w</code> und <code>h</code> die Breite bzw. Höhe festlegen. Der Wert <code>polygon</code> für <strong>shape</strong> verlangt Werte <code>x1,y1,x2,y2,...</code> für <strong>coords</strong>. Jedes der <code>x,y</code>-Paare definiert einen Punkt des Polygons, wobei aufeinander folgende Punkte sowie der letzte Punkt mit dem ersten mit geraden Linien verbunden werden. Der Wert <code>default</code> für <strong>shape</strong> verlangt, dass die gesamte beigefügte Fläche, üblicherweise ein Bild, verwendet wird.
+ <div class="note"><strong>Hinweis:</strong> Es ist ratsam, das <strong>usemap</strong>-Attribut für das {{HTMLElement("img")}}-Element und das verbundene {{HTMLElement("map")}}-Element zu verwenden, um Hotspots anstatt des <strong>shape</strong>-Attributes zu definieren.</div>
+ </dd>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>Dieses Attribut legt den Medientyp in der Form eines MIME-Types für das Linkziel fest. Im Allgemeinen ist dies nur als hilfreiche Information verfügbar, aber in Zukunft könnte ein Browser ein kleines Icon für Multimedia-Typen hinzufügen. Beispielweise könnte ein Browser ein kleines Lautsrechersymbol anzeigen, wenn <strong>type</strong> auf <code>audio/wav</code> gesetzt ist. Für eine komplette Liste von erkannten MIME-Typen siehe <a class="external" href="http://www.w3.org/TR/html4/references.html#ref-MIMETYPES">http://www.w3.org/TR/html4/references.html#ref-MIMETYPES</a>. Verwenden Sie dieses Attribut nur, wenn ein <code>href</code>-Attribut vorhanden ist.</dd>
+ <dt>{{htmlattrdef("urn")}} {{Non-standard_inline}}</dt>
+ <dd>Dieses angeblich von Microsoft unterstützte Attribut bezieht einen Uniform Resource Name (URN) auf den Link. Während dies auf Normungsarbeit vor Jahren basiert, ist die Bedeutung von URNs immer noch nicht gut definiert. Daher ist dieses Attribut bedeutungslos. <a class="external" href="http://msdn.microsoft.com/en-us/library/ms534710(VS.85).aspx">urn Property (MSDN)</a></dd>
+</dl>
+
+<h2 id="Beispiel_Link_zu_einem_externen_Ort">Beispiel: Link zu einem externen Ort</h2>
+
+<pre class="brush: html">&lt;!-- Link zu einer externen Datei --&gt;
+&lt;a href="http://www.mozilla.com/"&gt;
+Externer Link
+&lt;/a&gt;
+</pre>
+
+<h3 id="Result" name="Result">Ergebnis</h3>
+
+<p><a class="external" href="http://www.mozilla.com/">Externer Link</a></p>
+
+<h2 id="Beispiel_Erstellung_eines_Bildlinks">Beispiel: Erstellung eines Bildlinks</h2>
+
+<p>Diese kleine Beispiel verwendet ein Bild, um zur MDN-Homepage zu verlinken. Die Homepage wird in einem neun <em>browsing context</em> geöffnet, d.h. eine neue Seite oder ein neuer Tab.</p>
+
+<pre class="brush: html">&lt;a href="https://developer.mozilla.org/de/"&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" alt="MDN-Logo" /&gt;
+&lt;/a&gt;
+</pre>
+
+<h3 id="Result" name="Result">Ergebnis</h3>
+
+<p><a href="https://developer.mozilla.org/de/"><img alt="MDN-Logo" src="https://mdn.mozillademos.org/files/6851/mdn_logo.png"></a></p>
+
+<h2 id="Beispiel_Erstellung_eines_E-Mail-Links">Beispiel: Erstellung eines E-Mail-Links</h2>
+
+<p>Es ist üblich, Schaltflächen oder Links zu erstellen, die in des Benutzers E-Mail-Programm geöffnet werden, um ihnen zu erlauben, eine neue Nachricht zu senden. Dies wird mit <code>mailto</code>-Links gemacht. Hier ein einfaches Beispiel:</p>
+
+<pre class="brush: html">&lt;a href="mailto:nowhere@mozilla.org"&gt;E-Mail senden&lt;/a&gt;</pre>
+
+<p>Dies führt zu einem Link, der so aussieht: <a href="mailto:nowhere@mozilla.org">E-Mail senden</a>.</p>
+
+<p>Für weitere Details über das <code>mailto</code>-URL-Schema, z.B. wie man Betreff, Nachrichtentext oder ähnliches festlegt, siehe <a href="/de/docs/Web/Guide/HTML/Email_links">E-Mail-Links</a> oder {{RFC(6068)}}.</p>
+
+<h2 id="Beispiel_Verwendung_des_download-Attributes_um_ein_canvas_als_PNG_zu_speichern">Beispiel: Verwendung des download-Attributes, um ein canvas als PNG zu speichern</h2>
+
+<p>Falls Sie einem Benutzer erlauben möchten, ein HTML-Canvas als Bild herunterzuladen, können Sie einen Link mit <code>download</code>-Attribut und den <code>canvas</code>-Daten als Datei-URL erstellen:</p>
+
+<pre class="brush: js"><strong style="color: #000066; font-weight: bold;">var</strong> link <span style="color: #339933;">=</span> document.<span style="color: #660066;">createElement</span><span style="color: #009900;">(</span><span style="color: #3366cc;">'a'</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>
+link.<span style="color: #660066;">innerHTML</span> <span style="color: #339933;">=</span> <span style="color: #3366cc;">'Bild herunterladen'</span><span style="color: #339933;">;</span>
+link.<span style="color: #660066;">addEventListener</span><span style="color: #009900;">(</span><span style="color: #3366cc;">'click'</span><span style="color: #339933;">,</span> <strong style="color: #000066; font-weight: bold;">function</strong><span style="color: #009900;">(</span>ev<span style="color: #009900;">)</span> <span style="color: #009900;">{</span>
+    link.<span style="color: #660066;">href</span> <span style="color: #339933;">=</span> canvas.<span style="color: #660066;">toDataURL</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>
+    link.<span style="color: #660066;">download</span> <span style="color: #339933;">=</span> <span style="color: #3366cc;">"meinBild.png"</span><span style="color: #339933;">;</span>
+<span style="color: #009900;">}</span><span style="color: #339933;">,</span> <strong style="color: #003366; font-weight: bold;">false</strong><span style="color: #009900;">)</span><span style="color: #339933;">;</span>
+document.<span style="color: #660066;">body</span>.<span style="color: #660066;">appendChild</span><span style="color: #009900;">(</span>link<span style="color: #009900;">)</span><span style="color: #339933;">;</span></pre>
+
+<p>Hier können Sie dies in Aktion sehen <a href="http://jsfiddle.net/codepo8/V6ufG/2/">http://jsfiddle.net/codepo8/V6ufG/2/</a></p>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-a-element', '&lt;a&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-a-element', '&lt;a&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.2', '&lt;a&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>href="#top"</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("10.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{htmlattrxref("download","a")}}</td>
+   <td>14</td>
+   <td>{{CompatGeckoDesktop("20.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>href="#top"</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("10.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{htmlattrxref("download","a")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("20.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Hinweise">Hinweise</h2>
+
+<p>Die folgenden sind reservierte Browser Schlüsselverbindungen für die 2 Hauptbrowser und sollten nicht als Wert eines Zugangsschlüssels benutzt werden: a, c, e, f, g, h, v, Pfeil links, and Pfeil rechts.</p>
+
+<p>HTML 3.2 definiert nur <strong>name</strong>, <strong>href</strong>, <strong>rel</strong>, <strong>rev</strong>, und <strong>title</strong>.</p>
+
+<p>Das <strong>target</strong> Attribut ist nicht definiert in Browsern die keine Frames unterstützen, so wie Netscape 1 Generation Browser. Desweiteren, ist target nicht erlaubt in Varianten von <a href="/en-US/docs/XHTML" title="XHTML">XHTML</a> sondern ist limitiert nur auf frameset oder Transit-Formulare.</p>
+
+<h3 id="JavaScript_Empfehlungen">JavaScript Empfehlungen</h3>
+
+<p>Es ist öfters der Fall, dass ein Anker-Tag benutzt wird zusammen mit dem <code>onclick</code> Event. Um zu verhindern, dass die Seite sich neu lädt, wird <strong>href</strong> durch entweder "#" oder "javascript:void(0)" gesetzt. Beide Werte können zu unerwarteten Fehlern führen, wenn Hyperlinks kopiert oder in einem neuen Tab und/oder Fenster geöffnet werden. Seien Sie sich dieses Gebrauchs bewusst, und ausserdem, dass wenn Benutzer Anker-Tags benutzen, aber das generelle Verhalten verhindert wird.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Andere Elemente, die Text semantisch beschreiben: {{HTMLElement("abbr")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li>
+</ul>
diff --git a/files/de/web/html/element/abbr/index.html b/files/de/web/html/element/abbr/index.html
new file mode 100644
index 0000000000..8679e31e46
--- /dev/null
+++ b/files/de/web/html/element/abbr/index.html
@@ -0,0 +1,202 @@
+---
+title: '<abbr>: Das Abkürzungselement'
+slug: Web/HTML/Element/abbr
+tags:
+  - Element
+  - HTML
+  - HTML Textlevel Semantik
+  - Referenz
+  - Web
+translation_of: Web/HTML/Element/abbr
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">Das <strong>HTML-Abkürzungselement</strong> (<strong><code>&lt;abbr&gt;</code></strong>) steht für eine Abkürzung oder ein Akronym. Das optionale Attribut {{htmlattrxref("title")}} kann eine Erweiterung oder Beschreibung für die Abkürzung bereitstellen.</span> Wenn vorhanden, <code>title</code> diese vollständige Beschreibung und nichts anderes enthalten.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/abbr.html", "tabbed-shorter")}}</div>
+
+
+
+<p>Der Artikel <em><a href="/de/Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable">Wie Abkürzungen markiert und verständlich gemacht werden</a></em>, ist ein Leitfaden zur Verwendung von <code>&lt;abbr&gt;</code> und verwandten Elementen.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Inhaltskategorien</a></th>
+   <td><a href="/de/docs/Web/HTML/Content_categories#Flow_content">Fließender Inhalt</a>, <a href="/de/docs/Web/HTML/Content_categories#Phrasing_content">Formulierungsinhalt</a>, fühlbarer Inhalt</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubter Inhalt</th>
+   <td><a href="/de/docs/Web/HTML/Content_categories#Phrasing_content">Formulierungsinhalt</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Tag Wegfall</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte Elternelemente</th>
+   <td>Jedes Element, das Formulierungsinhalt akzeptiert</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte ARIA Rollen</th>
+   <td>Alle</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM-Schnittstelle</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p>Dieses Element unterstützt nur die <a href="/de/docs/Web/HTML/Global_attributes">globalen Attribute</a>. Das Attribut {{htmlattrxref("title")}} hat bei Verwendung mit dem <code>&lt;abbr&gt;</code>-Element eine bestimmte semantische Bedeutung. Es <em>muss</em> eine vollständige von Menschen lesbare Beschreibung oder Erweiterung der Abkürzung enthalten. Dieser Text wird von Browsern häufig als Tooltip dargestellt, wenn der Mauszeiger über das Element bewegt wird.</p>
+
+<p>Jedes <code>&lt;abbr&gt;</code>-Element, das Sie verwenden, ist unabhängig von allen anderen; wenn Sie <code>title</code> für eines angeben, wird derselbe Erweiterungstext nicht automatisch an ein anderes mit demselben Inhaltstext angehängt.</p>
+
+<h2 id="Nutzungshinweise">Nutzungshinweise</h2>
+
+<h3 id="Typische_Anwendungsfälle">Typische Anwendungsfälle</h3>
+
+<p>Es ist sicherlich nicht erforderlich, dass alle Abkürzungen mit <code>&lt;abbr&gt;</code> markiert werden. Es gibt jedoch einige Fälle, in denen es hilfreich ist, dies zu tun:</p>
+
+<ul>
+ <li>Wenn eine Abkürzung verwendet wird und Sie eine Erweiterung oder Definition außerhalb des Dokumentenflusses bereitstellen möchten, verwenden Sie <code>&lt;abbr&gt;</code> mit einer entsprechenden {{htmlattrxref("title")}}.</li>
+ <li>Um eine Abkürzung zu definieren, die dem Leser möglicherweise nicht vertraut ist, legen Sie den Begriff mit <code>&lt;abbr&gt;</code> und entweder einem <code>title</code>-Attribut oder einem Inline-Text vor, der die Definition bereitstellt.</li>
+ <li>Wenn die Anwesenheit einer Abkürzung im Text semantisch notiert werden muss, ist das <code>&lt;abbr&gt;</code>-Element hilfreich. Dies kann wiederum für Styling- oder Scripting-Zwecke verwendet werden.</li>
+ <li>Sie können <code>&lt;abbr&gt;</code> zusammen mit {{HTMLElement("dfn")}} verwenden, um Definitionen für Begriffe festzulegen, die Abkürzungen oder Akronyme sind. Siehe das Beispiel {{anch("Eine Abkürzung definieren")}} unten.</li>
+</ul>
+
+<h3 id="Überlegungen_zur_Grammatik">Überlegungen zur Grammatik</h3>
+
+<p>Verwenden Sie in Sprachen mit {{interwiki ("wikipedia", "Numerus")}} (d. h. Sprachen, in denen die Anzahl der Elemente die Grammatik eines Satzes beeinflusst) die gleiche grammatikalische Nummer in Ihrem <code>title</code>-Attribut wie in Ihrem <code>&lt;abbr&gt;</code>-Element. Dies ist besonders wichtig bei Sprachen mit mehr als zwei Numeri, wie z. B. Arabisch, ist aber auch in Englisch relevant.</p>
+
+<h2 id="Standarddarstellung">Standarddarstellung</h2>
+
+<p>Der Zweck dieses Elements ist ausschließlich für den Autor gedacht und wird von allen Browsern standardmäßig inline ({{cssxref('display')}}<code>: inline</code>) angezeigt. Die Standardeinstellung ist jedoch von Browser zu Browser unterschiedlich:</p>
+
+<ul>
+ <li>Manche Browser, wie der Internet Explorer, stellen es nicht anders als das {{HTMLElement("span")}}-Element dar.</li>
+ <li>Opera, Firefox, Chrome und einige andere fügen dem Inhalt des Elements eine gepunktete Unterstreichung hinzu.</li>
+ <li>Einige Browser fügen nicht nur eine gepunktete Unterstreichung hinzu, sondern setzen sie auch in Kapitälchen ein. Um dies zu vermeiden, fügen Sie Ihrem CSS etwas wie <a href="https://developer.mozilla.org/de/docs/Web/CSS/font-variant" title="The CSS Eigenschaft font-variant property selects a normal, or small-caps face from a font family. Setting font-variant is also possible by using the font shorthand."><code>font-variant</code></a><code>: none</code> hinzu.</li>
+</ul>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Eine_Abkürzung_semantisch_markieren">Eine Abkürzung semantisch markieren</h3>
+
+<p>Um eine Abkürzung zu markieren, ohne eine Erweiterung oder Beschreibung anzugeben, verwenden Sie einfach <code>&lt;abbr&gt;</code> ohne Attribute, wie in diesem Beispiel dargestellt.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Using &lt;abbr&gt;HTML&lt;/abbr&gt; is fun and easy!&lt;/p&gt;</pre>
+
+<h4 id="Ergebnis">Ergebnis</h4>
+
+<p>{{EmbedLiveSample("Marking_up_an_abbreviation_semantically")}}</p>
+
+<h3 id="Abkürzungen_formatieren">Abkürzungen formatieren</h3>
+
+<p>Sie können CSS verwenden, um einen benutzerdefinierten Stil festzulegen, der für Abkürzungen verwendet wird, wie in diesem einfachen Beispiel gezeigt.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Using &lt;abbr&gt;CSS&lt;/abbr&gt;, you can style your abbreviations!&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">abbr {
+  font-variant: all-small-caps;
+}</pre>
+
+<h4 id="Ergebnis_2">Ergebnis</h4>
+
+<p>{{EmbedLiveSample("Styling_abbreviations")}}</p>
+
+<h3 id="Eine_Erweiterung_bereitstellen">Eine Erweiterung bereitstellen</h3>
+
+<p>Durch das Hinzufügen eines Attributs {{htmlattrxref("title")}} können Sie eine Erweiterung oder Definition für die Abkürzung oder das Akronym angeben.</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Ashok's joke made me &lt;abbr title="Laugh Out Loud"&gt;LOL&lt;/abbr&gt; big
+time.&lt;/p&gt;</pre>
+
+<h4 id="Ergebnis_3">Ergebnis</h4>
+
+<p>{{EmbedLiveSample("Providing_an_expansion")}}</p>
+
+<h3 id="Eine_Abkürzung_definieren">Eine Abkürzung definieren</h3>
+
+<p>Sie können <code>&lt;abbr&gt;</code> zusammen mit {{HTMLElement("dfn")}} verwenden, um eine Abkürzung formal zu definieren, wie hier gezeigt.</p>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;&lt;dfn id="html"&gt;&lt;abbr title="HyperText Markup Language"&gt;HTML&lt;/abbr&gt;
+&lt;/dfn&gt; is a markup language used to create the semantics and structure
+of a web page.&lt;/p&gt;
+
+&lt;p&gt;A &lt;dfn id="spec"&gt;Specification&lt;/dfn&gt;
+(&lt;abbr title="Specification"&gt;spec&lt;/abbr&gt;) is a document that outlines
+in detail how a technology or API is intended to function and how it is
+accessed.&lt;/p&gt;</pre>
+
+<h4 id="Ergebnis_4">Ergebnis</h4>
+
+<p>{{EmbedLiveSample("Defining_an_abbreviation", 600, 120)}}</p>
+
+<p>Ausführlichere Beispiele finden Sie im Artikel <em><a href="/de/Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable">Wie Abkürzungen markiert und verständlich gemacht werden</a></em>.</p>
+
+<h2 id="Barrierefreiheit">Barrierefreiheit</h2>
+
+<p>Wenn Sie das Akronym oder die Abkürzung bei der ersten Verwendung auf einer Seite vollständig ausschreiben, hilft dies den Menschen, sie zu verstehen, insbesondere wenn es sich um technische Inhalte oder um Fachjargon handelt.</p>
+
+<h4 id="Beispiel">Beispiel</h4>
+
+<pre class="brush: html">&lt;p&gt;JavaScript Object Notation (&lt;abbr&gt;JSON&lt;/abbr&gt;) is a lightweight data-interchange format.&lt;/p&gt;
+</pre>
+
+<p>Dies ist besonders hilfreich für Personen, die mit der Terminologie oder den inhaltlichen Begriffen nicht vertraut sind, Personen, die sich mit der Sprache noch nicht auskennen, und Menschen mit kognitiven Hürden.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-abbr-element', '&lt;abbr&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-abbr-element', '&lt;abbr&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '&lt;abbr&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("html.elements.abbr")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/Learn/HTML/Element/abbr">Benutzung des <code>&lt;abbr&gt;</code>-Elements</a></li>
+ <li>Andere Elemente, die <a href="/de/docs/Web/HTML/Text_level_semantics_conveying_elements">Semantik auf Textebene</a> vermitteln: {{HTMLElement("a")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li>
+ <li>Das veraltete Element {{HTMLElement("acronym")}}, dessen Verantwortlichkeiten in <code>&lt;abbr&gt;</code> zusammengefasst wurden</li>
+</ul>
diff --git a/files/de/web/html/element/acronym/index.html b/files/de/web/html/element/acronym/index.html
new file mode 100644
index 0000000000..9116c10296
--- /dev/null
+++ b/files/de/web/html/element/acronym/index.html
@@ -0,0 +1,78 @@
+---
+title: <acronym>
+slug: Web/HTML/Element/acronym
+tags:
+  - Element
+  - HTML
+  - Referenz
+  - Veraltet
+  - Web
+translation_of: Web/HTML/Element/acronym
+---
+<div>{{HTMLRef}}{{obsolete_header}}</div>
+
+<p>Mit dem HTML Acronym Element (<code>&lt;acronym&gt;</code>) können Autoren eine Folge von Zeichen deutlich angeben, aus denen ein Akronym oder eine Abkürzung für ein Wort besteht. Dieses Element wurde in HTML5 entfernt. Verwenden Sie das Element {{HTMLElement("abbr")}}.</p>
+
+<div class="note">
+<p><strong>Nutzungshinweis:</strong> Dieses Element wurde in HTML5 entfernt und sollte nicht mehr verwendet werden. Stattdessen sollten Webentwickler das Element {{HTMLElement("abbr")}} verwenden.</p>
+</div>
+
+<h2 id="Attributes" name="Attributes">Attribute</h2>
+
+<p>Dieses Element hat nur <a href="/de/docs/HTML/global_attributes">globale Attribute</a>, die allen Elementen gemeinsam sind.</p>
+
+<h2 id="DOM_Interface" name="DOM_Interface">DOM Schnittstelle</h2>
+
+<p>Dieses Element implementiert die {{domxref('HTMLElement')}} Schnittstelle.</p>
+
+<div class="note"><strong>Implementierungshinweis: </strong>Bis einschließlich Gecko 1.9.2 implementiert Firefox die {{domxref('HTMLSpanElement')}} Schnittstelle für dieses Element.</div>
+
+<h2 id="Example" name="Example">Beispiel</h2>
+
+<pre class="brush:html">&lt;p&gt;Das &lt;acronym title="World Wide Web"&gt;WWW&lt;/acronym&gt; ist nur eine Komponente des Internets.&lt;/p&gt;
+</pre>
+
+<h2 id="Default_styling" name="Default_styling">Standarddarstellung</h2>
+
+<p>Obwohl der Zweck dieses Tags nur der Bequemlichkeit des Autors dient, variiert sein Standardstil von Browser zu Browser:</p>
+
+<ul>
+ <li>Manche Browser, wie der Internet Explorer, stellen es nicht anders als das {{HTMLElement("span")}}-Element dar.</li>
+ <li>Opera, Firefox, Chrome und einige andere fügen dem Inhalt des Elements eine gepunktete Unterstreichung hinzu.</li>
+ <li>Einige Browser fügen nicht nur eine gepunktete Unterstreichung hinzu, sondern setzen sie auch in Kapitälchen ein. Um dies zu vermeiden, fügen Sie Ihrem CSS etwas wie {{cssxref("font-variant")}}<code>: none</code> hinzu.</li>
+</ul>
+
+<p>Es wird daher dringend empfohlen, dass sich Webautoren nicht vollständig auf das Standard-Styling verlassen.</p>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#edef-ACRONYM', '&lt;acronym&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2>
+
+<p> </p>
+
+<p>{{Compat("html.elements.acronym")}}</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>Das HTML-Element {{HTMLElement("abbr")}}</li>
+</ul>
+
+<div> </div>
diff --git a/files/de/web/html/element/address/index.html b/files/de/web/html/element/address/index.html
new file mode 100644
index 0000000000..3b8d17f305
--- /dev/null
+++ b/files/de/web/html/element/address/index.html
@@ -0,0 +1,163 @@
+---
+title: <address>
+slug: Web/HTML/Element/address
+tags:
+  - Element
+  - HTML
+  - HTML Sektionen
+  - Referenz
+  - Web
+translation_of: Web/HTML/Element/address
+---
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Das <em>HTML <code>&lt;address&gt;</code> Element</em> kann von Autoren genutzt werden, um Kontaktinformationen an den nähesten {{HTMLElement("article")}} oder {{HTMLElement("body")}} Erben zu übergeben. Im letzteren Fall gilt es für das gesamte Dokument.</p>
+
+<div class="note">
+<p><strong>Hinweis zur Benutzung:</strong></p>
+
+<ul>
+ <li>Um eine beliebige Adresse darzustellen, welche unabhängig von den Kontaktinformationen ist, sollte eher das {{HTMLElement("p")}} Element als das <span style="font-family: courier new;">&lt;address&gt;</span> Element genutzt werden.</li>
+ <li>Dieses Element sollte nicht mehr Informationen als die reinen Kontaktinformationen beinhalten, wie zum Beispiel ein Publizierungs-Datum (welches in ein {{HTMLElement("time")}} Element gehört).</li>
+ <li>Typischerweise wird ein <span style="font-family: courier new;">&lt;address&gt;</span> Element innerhalb eines {{HTMLElement("footer")}} Elements der aktuellen Sektion platziert.</li>
+</ul>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorien</a></th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Fließender Inhalt</a>, greifbarer Inhalt.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubter Inhalt</th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Fließender Inhalt</a>, jedoch ohne <span style="font-family: courier new;">&lt;address&gt;</span> Element und ohne Kopfinhalt ({{HTMLElement("hgroup")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}), no sectioning content ({{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}), and no {{HTMLElement("header")}} or {{HTMLElement("footer")}} element.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag Auslassung</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte Elternelemente</th>
+   <td>Jedes Element, welches <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">fließenden Inhalt</a> akzeptiert.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM Schnittstelle</th>
+   <td>{{domxref("HTMLElement")}}. Bis Gecko 2.0 (Firefox 4), hat Gecko dieses Element mit Hilfe der {{domxref("HTMLSpanElement")}} Schnittstelle implementiert.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p><span style="line-height: 21px;">Dieses Element schließt nur </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globale Attribute</a><span style="line-height: 21px;"> ein.</span></p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: html">  &lt;address&gt;
+    You can contact author at &lt;a href="http://www.somedomain.com/contact"&gt;www.somedomain.com&lt;/a&gt;.&lt;br&gt;
+    If you see any bugs, please &lt;a href="mailto:webmaster@somedomain.com"&gt;contact webmaster&lt;/a&gt;.&lt;br&gt;
+    You may also want to visit us:&lt;br&gt;
+    Mozilla Foundation&lt;br&gt;
+    1981 Landings Drive&lt;br&gt;
+    Building K&lt;br&gt;
+    Mountain View, CA 94043-0801&lt;br&gt;
+    USA
+  &lt;/address&gt;
+</pre>
+
+<p>Das obenstehende HTML wird folgendes ausgeben:</p>
+
+<p><img alt="Image:HTML-address.png" src="/@api/deki/files/238/=HTML-address.png"></p>
+
+<p>Außerdem stellt das <em>address</em> Element den Text im gleichen Stil wie das {{HTMLElement("i")}} oder {{HTMLElement("em")}} Element dar. Es ist angebracht das <em>address</em> Element zu benutzen, wenn man mit Kontaktinformationen umgeht, als wenn man nur zusätzliche Informationen mitteilen möchte.</p>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'sections.html#the-address-element', '&lt;address&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-address-element', '&lt;address&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.6', '&lt;address&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>1.0</td>
+   <td>5.12</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mini</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.7")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Andere verwandte Elemente: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("footer")}}, {{HTMLElement("section")}}, {{HTMLElement("header")}};</li>
+ <li class="last"><a class="deki-ns current" href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sections and outlines of an HTML5 document</a>.</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/de/web/html/element/applet/index.html b/files/de/web/html/element/applet/index.html
new file mode 100644
index 0000000000..3d9424ebbb
--- /dev/null
+++ b/files/de/web/html/element/applet/index.html
@@ -0,0 +1,139 @@
+---
+title: <applet>
+slug: Web/HTML/Element/applet
+tags:
+  - Element
+  - HTML
+  - Obsolete
+  - Referenz
+  - Web
+translation_of: Web/HTML/Element/applet
+---
+<div>
+ {{obsolete_header}}</div>
+<h2 id="Übersicht">Übersicht</h2>
+<p>Das HTML Applet Element (<code>&lt;applet&gt;</code>) identifiziert die Einbindung eines Java Applets.</p>
+<div class="note">
+ <p><strong>Hinweis zur Benutzung: </strong>Dieses Element wurde in HTML5 entfernt und sollte nicht mehr verwendet werden. Stattdessen sollten Webentwickler das generische {{HTMLElement("object")}} Element verwenden.</p>
+</div>
+<h2 id="Attributes" name="Attributes">Attribute</h2>
+<dl>
+ <dt>
+  {{htmlattrdef("align")}}</dt>
+ <dd>
+  Dieses Attribut wird verwendet um die Position des Applets relativ zum Inhalt auf der Seite zu bestimmen. Die HTML 4.01 Spezifikation definiert die Werte <strong>bottom</strong>, <strong>left</strong>, <strong>middle</strong>, <strong>right</strong> und <strong>top</strong>, während Microsoft und Netscape ebenso <strong>absbottom</strong>, <strong>absmiddle</strong>, <strong>baseline</strong>, <strong>center</strong> und <strong>texttop</strong> unterstützen.</dd>
+ <dt>
+  {{htmlattrdef("alt")}}</dt>
+ <dd>
+  Dieses Attribut bewirkt eine beschreibende Textalternative welche angezeigt wird, wenn der Browser kein Java unterstützt. Designer sollten daran denken, dass Inhalte die innerhalb des <code>&lt;applet&gt;</code> Elements liegen, auch als Alternativtext dargestellt werden könnten.</dd>
+ <dt>
+  {{htmlattrdef("archive")}}</dt>
+ <dd>
+  Dieses Attribut verweist zu einer archivierten oder komprimierten Version des Applets und der damit assoziierten Klassen-Datei. Die Anwendung dieses Attributs kann dabei helfen, die Download-Zeit zu verkürzen.</dd>
+ <dt>
+  {{htmlattrdef("code")}}</dt>
+ <dd>
+  Dieses Attribut spezifiziert die URL der Applet Klassendatei die geladen und ausgeführt wird. Applet Dateinamen werden identifiziert mit Hilfe der Extension .class. <span id="result_box" lang="de"><span class="hps">Die vom</span> <span class="hps">Code angegeben</span>e <span class="hps">URL kann</span> <span class="hps">in Bezug mit dem</span> <span class="hps">codebase-Attribut</span> <span class="hps">stehen.</span></span></dd>
+ <dt>
+  {{htmlattrdef("codebase")}}</dt>
+ <dd>
+  Dieses Attribut gibt die absolute oder die relative URL vom Pfad der Applet-Klassendatei an, welche vom code Attribut gespeichert wird.</dd>
+ <dt>
+  {{htmlattrdef("datafld")}}</dt>
+ <dd>
+  Dieses Attribut, unterstützt vom Internet Explorer 4 oder höher, spezifiziert den Spaltennamen des Data Source Objects welches die gebundenen Daten liefert. Es kann genutzt werden, um die verschiedenen {{HTMLElement("param")}} Elemente aufzulisten, welche an das Java Applet durchgereicht werden.</dd>
+ <dt>
+  {{htmlattrdef("datasrc")}}</dt>
+ <dd>
+  Ähnlich wie <code>datafld</code>, wird dieses Attribut zur Datenbindung unter dem Internet Explorer 4 genutzt. Es bestimmt die ID des Data Source Objects, welches die Daten liefert, die mit {{HTMLElement("param")}} Elementen innerhalb des Applets assoziiert sind.</dd>
+ <dt>
+  {{htmlattrdef("height")}}</dt>
+ <dd>
+  Dieses Attribut spezifiziert die Höhe in Pixeln, die das Applet benötigt.</dd>
+ <dt>
+  {{htmlattrdef("hspace")}}</dt>
+ <dd>
+  Dieses Attribut spezifiziert zusätzlichen horizontalen Platz in Pixeln, der für das Applet reserviert wird.</dd>
+ <dt>
+  {{htmlattrdef("mayscript")}}</dt>
+ <dd>
+  In der Netscape Implementierung erlaubt dieses Attribut den Zugriff auf Applets durch Programme, die innerhalb einer Skriptsprache im Dokument eingebettet sind.</dd>
+ <dt>
+  {{htmlattrdef("name")}}</dt>
+ <dd>
+  Dieses Attribut weist dem Applet einen Namen zu, sodass es von anderen Ressourcen (vorwiegend Scripts) identifiziert werden kann.</dd>
+ <dt>
+  {{htmlattrdef("object")}}</dt>
+ <dd>
+  Dieses Attribut spezifiziert die URL einer serialisierten Darstellung eines Applets.</dd>
+ <dt>
+  {{htmlattrdef("src")}}</dt>
+ <dd>
+  Wenn es nach dem Internet Explorer 4 und höher geht, dient dieses Attribut dazu, eine URL für eine verknüpfte Datei eines Applets zu spezifizieren. Die Bedeutung und die Benutzung ist unklar und kein Teil des HTML-Standards.</dd>
+ <dt>
+  {{htmlattrdef("vspace")}}</dt>
+ <dd>
+  Dieses Attribut spezifiziert zusätzlichen vertikalen Platz in Pixeln, der für das Applet ober- und unterhalb reserviert wird.</dd>
+ <dt>
+  {{htmlattrdef("width")}}</dt>
+ <dd>
+  Dieses Attribut spezifiziert die Breite in Pixeln, die das Applet benötigt.</dd>
+</dl>
+<h2 id="Beispiel">Beispiel</h2>
+<pre class="brush: html">&lt;applet code="game.class" align="left" archive="game.zip" height="250" width="350"&gt;
+  &lt;param name="difficulty" value="easy"&gt;
+  &lt;b&gt;Sorry, du brauchst Java um dieses Spiel zu spielen.&lt;/b&gt;
+&lt;/applet&gt;
+</pre>
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+<p>{{CompatibilityTable}}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mini</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="Anmerkungen">Anmerkungen</h2>
+<p>Die W3C Spezifikation rät von der Benutzung des <code>&lt;applet&gt;</code> Elements ab und bevorzugt die Nutzung des {{HTMLElement("object")}} Elements. Unter der strikten Definition von HTML 4.01 ist dieses Element veraltet und überflüssig in HTML5.</p>
+<div>
+ {{HTMLRef}}</div>
diff --git a/files/de/web/html/element/area/index.html b/files/de/web/html/element/area/index.html
new file mode 100644
index 0000000000..e279ff7b90
--- /dev/null
+++ b/files/de/web/html/element/area/index.html
@@ -0,0 +1,174 @@
+---
+title: <area>
+slug: Web/HTML/Element/area
+tags:
+  - Eingebettet
+  - Element
+  - HTML
+  - Inhalt
+  - Multimedia
+  - Referenz
+  - Web
+translation_of: Web/HTML/Element/area
+---
+<h2 id="Übersicht">Übersicht</h2>
+
+<p class="seoSummary">Das <em>HTML-Element <code>&lt;area&gt;</code> </em>definiert einen Bereich auf einem Bild als Hot-Spot. Optional kann auf diesem Bereich ein {{Glossary("Hyperlink", "Hyperlink")}} hinterlegt werden. Dieses Element kann nur innerhalb eines {{HTMLElement("map")}} Elements verwendet werden.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/de/docs/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorien</a></th>
+   <td><a href="/de/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Fließender Inhalt</a>, <a href="/de/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">Formulierung</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubter Inhalt</th>
+   <td>Keiner, es ist ein {{Glossary("empty element", "leeres Element")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag Wegfall</th>
+   <td>Es muss einen Start-Tag und keinen End-Tag geben.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte Elternelemente</th>
+   <td>Jedes Element, das <a href="/de/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">Formulierungen</a> akzeptiert. Das <code>&lt;area&gt;</code> Element muss direkt oder indirekt ein Kind eines {{HTMLElement("map")}} Elements sein.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLAreaElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p><span style="line-height: 21px;">Dieses Element besitzt die globalen Attribute </span><a href="https://developer.mozilla.org/de/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globalen Attribute</a><span style="line-height: 21px;">.</span></p>
+
+<dl>
+ <dt>{{htmlattrdef("accesskey")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}</dt>
+ <dd>Spezifiziert einen Tastatur-Shortcut für dieses Element. Eine Tastenkombination mit ALT oder einer ähnlichen Taste in Verbindung mit dem angegebenen Zeichen selektiert die damit assoziierte From Control. Dabei sollten keine von Webbrowsern vorbelegten Tastenkombinationen verwendet werden. Dieses Attribut ist seit HTML5 global.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("alt")}}</dt>
+ <dd>Ein alternativer Text zum Einblenden, wenn der Webbrowser keine Bilder darstellt. Der Text soll dem Benutzer den Inhalt des Bildes beschreiben. In HTML4 ist dieses Attribut verpflichtend aber es kann ein leerer Text ("") angegeben werden. In HTML5 ist dieses Attribute nur verpflichtend, wenn das <strong>href</strong> Attribut vewendet wird.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("coords")}}</dt>
+ <dd>Eine Menge von Werten, welche die Koordinaten des Hot-Spot Bereichs angeben. Die Anzahl und die Bedeutung der Werte hängt von dem Wert des <strong>shape</strong> Attributs ab. Für <code>rect</code> (rechteckige Form) beinhaltet der Wert von <strong>coords</strong> zwei x,y Pare: left, top, right und bottom. Für <code>circle</code> (kreisförmige Form) besteht der Wert aus <code>x,y,r</code>. Dabei sind <code>x,y</code> ein Paar, dass die Position des Kreismittelpunkt angibt und <code>r</code> ist der Radius. Für <code>poly</code> (Polygon) beinhaltet der Wert mehrere x,y Paare, wobei jedes Paar für einen Punkt im Polygon steht: <code>x1,y1,x2,y2,x3,y3,</code> usw. In HTML4 sind die Werte die Anzahl Pixel oder Prozente, wenn ein Prozentzeichen (%) angehängt wird. In HTML5 sind die Werte die Anzahl von CSS Pixel.</dd>
+ <dt>{{htmlattrdef("download")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Dieses Attribut gibt an, sofern es verwendet wird, dass der Autor den Hyperlink zum Dowload einer Ressource verwendet. Siehe {{HTMLElement("a")}} für eine vollständige Beschreibung des {{htmlattrxref("download", "a")}} Attributs.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("href")}}</dt>
+ <dd>Das Ziel des Hyperlinks für diesen Bereich. Der Wert muss eine gültige URL sein. In HTML4 muss entweder dieses Attribut oder das <strong>nohref</strong> Attribut im Element sein. In HTML5 kann dieses Attribut ausgelassen werden. In diesem Fall repräsentiert das area Element keinen Hyperlink.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("hreflang")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Gibt die Sprache der verlinkten Ressource an. Erlaubte Werte sind in <a class="external" href="http://www.ietf.org/rfc/bcp/bcp47.txt" title="http://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a> bestimmt worden. Dieses Attribut sollte nur zusammen mit einem <strong>href</strong> Attribut verwendet werden.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("name")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}</dt>
+ <dd>Definiert einen Namen für den anklickbaren Bereich, damit er von älternen Webbrowserns mittels Scripting verwendet werden kann.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("media")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Ein Hinweis zum Medium, für welches die verlinkte Ressource ausgelegt ist (zum Beispiel: <code>print und screen</code>.). Wenn es ausgelassen wird, wird der Standardwert <code>all</code> angenommen. Dieses Attribut sollte nur zusammen mit einem <strong>href</strong> Attribut verwendet werden.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("nohref")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}</dt>
+ <dd>Gibt an, dass auf diesem Bereich kein Hyperlink hinterlegt ist. Es muss entweder dieses Attribut oder das <strong>href</strong> Attribut in diesem Element verwendet werden.
+ <div class="note">
+ <p><strong>Verwendungshinweis: </strong>Dieses Attribut ist seit HTML5 veraltet. Stattdessen ist das Auslassen des <strong>href</strong> Attributs ausreichend.</p>
+ </div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("rel")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Dieses Attribut spezifiziert für Anker im <strong>href</strong> Attribut die Beziehung zwischen dem Zielobjekt und dem Linkobjekt. Der Wert ist eine kommaseparierte Liste von <a href="https://developer.mozilla.org/de/docs/Web/HTML/Link_types">Linktypen</a>. Die Werte und deren Semantik werden von Autorität eingetragen, welche die entsprechenden Rechte am Dokument besitzt. Der Standardwert ist void, wenn kein anderer Wert angegeben ist. Dieses Attribut sollte nur zusammen mit einem <strong>href</strong> Attribut verwendet werden.</dd>
+ <dt>{{htmlattrdef("shape")}}</dt>
+ <dd>Die Form vom Hot-Spot. Die Spezifikationen für HTML 5 und HTML 4 definieren die Werte <code>rect</code> (rechteckiger Bereich), <code>circle</code> (kreisförmiger Bereich), <code>poly</code> (für ein Polygon) und <code>default</code> (für den ganzen Bereich außerhalb der definierten Bereiche). Viele Webbrowser, insbesonders Internet Explorer 4 und höher, unterstützen <code>circ</code>, <code>polygon</code> und <code>rectangle</code> als gültige Werte für <strong>shape</strong>, welche nicht spezifiziert sind {{Non-standard_inline}}.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("tabindex")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}</dt>
+ <dd>Ein numerischer Wert, der die Position in der Reihenfolge des Tabbing im Webbrowser definiert. Dieses Attribut ist in HTML5 global.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("target")}}</dt>
+ <dd>Dieses Attribut gibt an, wo die verlinkte Ressource dargestellt werden soll. In HTML4 ist das der Name oder ein Schlüssenwort für einen Frame. In HTML5 ist es der Name oder ein Schlüsselwort für einen <em>browsing context</em> (zum Beispiel: tab, window oder inline frame). Die folgenden Schlüsselwörter haben eine spezielle Bedeutung:
+ <ul>
+  <li><code>_self</code>: Lädt die Antwort in denselben HTML4 Frame (oder HTML5 browsing context) wie der aktuelle. Das ist der Standardwert, wenn das Attribut nicht angegeben wird.</li>
+  <li><code>_blank</code>: Lädt die Antwort in ein neues unbenanntes HTML4 Fenster oder HTML5 browsing context.</li>
+  <li><code>_parent</code>: Lädt die Antwort in  das HTML4 Frameset Parent des aktuellen Framee oder in den HTML5 parent browsing context des aktuellen. Wenn es kein Parent gibt, verhält sich diese Option wie <code>_self</code>.</li>
+  <li><code>_top</code>: In HTML4: Lädt die Antwort in das volle, originale Fenster und löscht alle anderen Frames. In HTML5: Lädt die Antwort in den top-level browsing context (der browsing context, der ein Parent des aktuellen ist und selbst kein Parent hat). Wenn es kein Parent gibt, verhält sich diese Option wie <code>_self</code>.</li>
+ </ul>
+ Dieses Attribut sollte nur zusammen mit einem <strong>href</strong> Attribut verwendet werden.</dd>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>Dieses Attribut spezifiziert den Medientyp des Linkziels als MIME Type. Normalerweise wird dies streng als beratende Information angeboten. In der Zukunft könnte ein Webbrowser aber ein kleines Icon zum Multimediatyp hinzufügen (zum Beispiel: ein Webbrowser zeigt ein Icon mit einem Lautsprecher an, wenn der Typ auf audio/wav gesetzt ist). Eine vollständige Liste der erkannten MIME types ist unter <a class="linkification-ext external" href="http://www.w3.org/TR/html4/references.html#ref-MIMETYPES" title="Linkification: http://www.w3.org/TR/html4/references.html#ref-MIMETYPES">http://www.w3.org/TR/html4/references.html#ref-MIMETYPES</a> zu finden. Dieses Attribut sollte nur zusammen mit einem <strong>href</strong> Attribut verwendet werden.</dd>
+</dl>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: html">&lt;map name="primary"&gt;
+  &lt;area shape="circle" coords="200,250,25" href="another.htm" /&gt;
+  &lt;area shape="default" nohref /&gt;
+&lt;/map&gt;
+</pre>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Bemerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'the-map-element.html#the-area-element', '&lt;area&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-area-element', '&lt;area&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.6.1', '&lt;area&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("html.elements.area")}}</p>
+
+<h2 id="Hinweise">Hinweise</h2>
+
+<p>Unter den HTML 3.2, 4.0 und 5 Spezifikationen ist der End-Tag <code>&lt;/area&gt;</code> verboten.</p>
+
+<p>Die XHTML 1.0 Spezifikation verlangt einen nachfolgenden Slash: <code>&lt;area /&gt;</code>.</p>
+
+<p>Die Attribute <strong>id</strong>, <strong>class</strong>, und <strong>style</strong> haben dieselbe Bedeutung wie die in HTML 4 definierten Kernattribute. Aber nur Netscape und Microsoft definieren sie.</p>
+
+<p>Netscape 1–level Webbrowser verstehen das <strong>target</strong> Attribut in dem Sinne, dass es sich auf Frames bezieht.</p>
+
+<p>HTML 3.2 definiert nur <strong>alt</strong>, <strong>coords</strong>, <strong>href</strong>, <strong>nohref</strong> und <strong>shape</strong>.</p>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/de/web/html/element/article/index.html b/files/de/web/html/element/article/index.html
new file mode 100644
index 0000000000..44d07c202c
--- /dev/null
+++ b/files/de/web/html/element/article/index.html
@@ -0,0 +1,146 @@
+---
+title: '<article>: Das Inhaltselement für Artikel'
+slug: Web/HTML/Element/article
+tags:
+  - Element
+  - HTML
+  - HTML Bereiche
+  - HTML5
+  - Referenz
+  - Web
+translation_of: Web/HTML/Element/article
+---
+<div>{{HTMLRef}}</div>
+
+<p>Das <strong>HTML-Element <code>&lt;article&gt;</code></strong> stellt eine in sich geschlossene Komposition in einem Dokument, einer Seite, Anwendung oder Website dar, die unabhängig verteilt oder wiederverwendbar sein soll (z. B. bei Syndikation), z. B. ein Forumsbeitrag, ein Zeitschriften- oder Zeitungsartikel oder ein Blogeintrag.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/article.html", "tabbed-standard")}}</div>
+
+<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>
+
+<p>Ein bestimmtes Dokument kann mehrere Artikel enthalten, z. B. in einem Blog, in dem der Text jedes Artikels nacheinander angezeigt wird, während der Leser blättert, wäre jeder Beitrag in einem <code>&lt;article&gt;</code>-Element mit einem oder mehreren <code>&lt;section&gt;</code>-Elementen enthalten.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/de/docs/HTML/Content_categories">Inhaltskategorien</a></th>
+   <td><a href="/de/docs/HTML/Content_categories#Flow_content">Fließender Inhalt</a>, Sektionsinhalt, fühlbarer Inhalt</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubter Inhalt</th>
+   <td><a href="/de/docs/HTML/Content_categories#Flow_content">Fließender Inhalt</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag Wegfall</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte Elternelemente</th>
+   <td>Jedes Element das <a href="/de/docs/HTML/Content_categories#Flow_content">fließenden Inhalt</a> erlaubt. Beachten Sie, dass ein <code>&lt;article&gt;</code>-Element kein Nachkomme eines {{HTMLElement("address")}}-Elements sein darf.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte ARIA Rollen</th>
+   <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("main")}}, {{ARIARole("presentation")}}, {{ARIARole("region")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM-Schnittstelle</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p>Dieses Element unterstützt nur die <a class="new" href="/de/docs/Web/HTML/Global_attributes" rel="nofollow">globalen Attribute</a>.</p>
+
+<h2 id="Nutzungshinweise">Nutzungshinweise</h2>
+
+<ul>
+ <li>Jeder <code>&lt;article&gt;</code> sollte beschriftet sein, normalerweise indem eine Überschrift (<a href="/de/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h1&gt;</code>-<code>&lt;h6&gt;</code></a>) als untergeordnetes Element des <code>&lt;article&gt;</code>-Elements eingefügt wird.</li>
+ <li>Wenn ein <code>&lt;article&gt;</code>-Element verschachtelt ist, repräsentiert das innere Element einen Artikel, der sich auf das äußere Element bezieht. Zum Beispiel können die Kommentare eines Blogbeitrags <code>&lt;article&gt;</code>-Elemente sein, die im <code>&lt;article&gt;</code> des Blogbeitrags verschachtelt sind.</li>
+ <li>Informationen zum Autor eines <code>&lt;article&gt;</code>-Elements können über das {{HTMLElement("address")}}-Element bereitgestellt werden, gelten jedoch nicht für verschachtelte <code>&lt;article&gt;</code>-Elemente.</li>
+ <li>Das Datum und die Uhrzeit der Veröffentlichung eines <code>&lt;article&gt;</code>-Elements können mit dem Attribut {{htmlattrxref("datetime", "time")}} eines {{HTMLElement("time")}}-Elements beschrieben werden. <em>Beachten Sie, dass das Attribut {{htmlattrxref("pubdate", "time")}} von {{HTMLElement("time")}} nicht mehr Bestandteil des W3C HTML 5-Standards ist.</em></li>
+</ul>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: html">&lt;article class="film_review"&gt;
+  &lt;header&gt;
+    &lt;h2&gt;Jurassic Park&lt;/h2&gt;
+  &lt;/header&gt;
+  &lt;section class="main_review"&gt;
+    &lt;p&gt;Dinos were great!&lt;/p&gt;
+  &lt;/section&gt;
+  &lt;section class="user_reviews"&gt;
+    &lt;article class="user_review"&gt;
+      &lt;p&gt;Way too scary for me.&lt;/p&gt;
+      &lt;footer&gt;
+        &lt;p&gt;
+          Posted on
+          &lt;time datetime="2015-05-16 19:00"&gt;May 16&lt;/time&gt;
+          by Lisa.
+        &lt;/p&gt;
+      &lt;/footer&gt;
+    &lt;/article&gt;
+    &lt;article class="user_review"&gt;
+      &lt;p&gt;I agree, dinos are my favorite.&lt;/p&gt;
+      &lt;footer&gt;
+        &lt;p&gt;
+          Posted on
+          &lt;time datetime="2015-05-17 19:00"&gt;May 17&lt;/time&gt;
+          by Tom.
+        &lt;/p&gt;
+      &lt;/footer&gt;
+    &lt;/article&gt;
+  &lt;/section&gt;
+  &lt;footer&gt;
+    &lt;p&gt;
+      Posted on
+      &lt;time datetime="2015-05-15 19:00"&gt;May 15&lt;/time&gt;
+      by Staff.
+    &lt;/p&gt;
+  &lt;/footer&gt;
+&lt;/article&gt;
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-article-element', '&lt;article&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'sections.html#the-article-element', '&lt;article&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-article-element', '&lt;article&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("html.elements.article")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Andere abschnittsbezogene Elemente: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}</li>
+ <li class="last"><a class="deki-ns current" href="/de/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document">Abschnitte und Umrisse eines HTML5-Dokuments</a></li>
+</ul>
diff --git a/files/de/web/html/element/aside/index.html b/files/de/web/html/element/aside/index.html
new file mode 100644
index 0000000000..d37db02004
--- /dev/null
+++ b/files/de/web/html/element/aside/index.html
@@ -0,0 +1,107 @@
+---
+title: <aside>
+slug: Web/HTML/Element/aside
+tags:
+  - Element
+  - HTML
+  - HTML5
+  - Referenz
+  - Web
+translation_of: Web/HTML/Element/aside
+---
+<p>Das <em>HTML <code>&lt;aside&gt;</code> Element</em> repräsentiert eine Sektion einer Seite, welche aus Inhalt besteht der nur indirekt zum restlichen Inhalt gehört, also parallel zum Kontext betrachtet werden kann. Diese Sektionen werden oftmals als Seitenleisten oder Beilage dargestellt. Sie enthalten meistens nebenläufige Erklärungen, wie ein Glossar; weniger zusammenhängenden Inhalt, wie Werbung; die Biographie eines Autors oder zum Beispiel Profilinformationen die zugehörig zu einer Blog-Seite sind.</p>
+
+<div class="note">
+<p><em>Hinweis zur Benutzung:</em></p>
+
+<ul>
+ <li>Das <code>&lt;aside&gt;</code> Element sollte nicht genutzt werden, um eingeklammerte Texte zu bezeichnen, so lange diese Art von Texten zum primären Inhalt gehören.</li>
+</ul>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorien</a></th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Fließender Inhalt</a>, Sektionsinhalte, greifbarer Inhalt.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubter Inhalt</th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">Fließender Inhalt</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag Auslassung</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte Elternelemente</th>
+   <td>Jedes Element das <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">fließenden Inhalt</a> erlaubt. Das <code>&lt;aside&gt;</code> Element darf kein Abkömmling des {{HTMLElement("address")}} Elements sein.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM Schnittstelle</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p><span style="line-height: 21px;">Dieses Element schließt nur </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globale Attribute</a><span style="line-height: 21px;"> ein.</span></p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: html">&lt;article&gt;
+  &lt;p&gt;
+    The Disney movie &lt;em&gt;The Little Mermaid&lt;/em&gt; was
+    first released to theatres in 1989.
+  &lt;/p&gt;
+  &lt;aside&gt;
+    The movie earned $87 million during its initial release.
+  &lt;/aside&gt;
+  &lt;p&gt;
+    More info about the movie...
+  &lt;/p&gt;
+&lt;/article&gt;</pre>
+
+<p>{{EmbedLiveSample("Beispiel")}}</p>
+
+<h2 id="Specifications" name="Specifications"> </h2>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'sections.html#the-aside-element', '&lt;aside&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-aside-element', '&lt;aside&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+
+
+<p>{{Compat("html.elements.aside")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Andere Sektionsverwandte Elemente: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li>
+ <li><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sections and outlines of an HTML5 document</a>.</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/de/web/html/element/b/index.html b/files/de/web/html/element/b/index.html
new file mode 100644
index 0000000000..89a75bd39f
--- /dev/null
+++ b/files/de/web/html/element/b/index.html
@@ -0,0 +1,83 @@
+---
+title: b
+slug: Web/HTML/Element/b
+tags:
+  - HTML
+  - HTML Elemente
+  - HTML Referenz
+translation_of: Web/HTML/Element/b
+---
+<p>Das HTML bold Element (<code><span style="font-family: Courier New;">&lt;b&gt;</span></code>) wird benutzt, um einen Text hervorzuheben und die Aufmerksamkeit des Lesers hierauf zu lenken. Dabei wird keine besondere Wichtigkeit oder Relevanz übertragen. Typischerweise sind Schlüsselwörter in einer Zusammenfassung, Produktnamen oder andere Textstellen, die speziell präsentiert werden sollen, mit dem bold Tag ausgezeichnet. Ein weiteres Beispiel ist die Markierung der führenden Sätze der Absätze eines Artikels.</p>
+
+<div class="note">
+<p><strong>Hinweise zur Verwendung:</strong></p>
+
+<ul>
+ <li>Das HTML bold Element sollte nicht mit den {{ HTMLElement("strong") }}, {{ HTMLElement("em") }} oder {{ HTMLElement("mark") }} Elementen verwechselt werden. Das {{ HTMLElement("strong") }} Element repräsentiert einen Text, der über eine gewisse <em>Wichtigkeit</em> verfügt, {{ HTMLElement("em") }} betont den Text und das {{ HTMLElement("mark") }} Element repräsentiert einen Text, der über eine gewisse <em>Relevanz</em> verfügt. Das bold Element enthält keine speziellen semantischen Informationen; es kann als das Element angesehen werden, welches benutzt wird, wenn kein anderes passend ist.</li>
+ <li>Überschriften sollen daher nicht mit dem bold Element ausgezeichnet werden. Dafür sind die Elemente {{ HTMLElement("h1") }} bis {{ HTMLElement("h6") }} gedacht. Stylesheets können verwendet werden, um das Standardaussehen des Elements zu verändern, sodass es nicht zwingend ist, dass etwas in Fettdruck angezeigt wird.</li>
+ <li>Es macht in der Praxis Sinn das <strong>class</strong> Attribut zu verwenden, um weitere semantische Informationen hinzuzufügen. Das vereinfacht zudem die Entwicklung von verschiedenen Styles eines Webdokuments, ohne dass dabei der HTML-Code verändert werden muss.</li>
+ <li>In der Geschichte von HTML war das <code>bold</code> Element dazu gedacht, Text mit Fettdruck darzustellen. Da Style-Informationen seit HTML 4 nicht länger erwünscht sind, hat sich diese Bedeutung geändert.</li>
+</ul>
+</div>
+
+<h2 id="Verwendungskontext">Verwendungskontext</h2>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td><a href="/de/HTML/Inhaltskategorien" title="de/HTML/Inhaltskategorien">Inhaltskategorie</a></td>
+   <td><a href="/de/HTML/Inhaltskategorien#Flow_content" title="de/HTML/Inhaltskategorien#Flow content">Flow content</a>, <a href="/de/HTML/Inhaltskategorien#Phrasing_content" title="de/HTML/Inhaltskategorien#Phrasing content">Phrasing content</a></td>
+  </tr>
+  <tr>
+   <td>Erlaubter Inhalt</td>
+   <td>Phrasing content</td>
+  </tr>
+  <tr>
+   <td>Tag Auslassung</td>
+   <td>Keine; <span title="syntax-start-tag">Start- und Endtag </span>sind vorgeschrieben.</td>
+  </tr>
+  <tr>
+   <td>Erlaubte Elternelemente</td>
+   <td>Jedes Element, dass Phrasing content zulässt.</td>
+  </tr>
+  <tr>
+   <td>Normatives Dokument</td>
+   <td><a class="external" href="https://html.spec.whatwg.org/multipage/semantics.html#the-b-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-b-element">HTML5, section 4.5.21</a> (<a class="external" href="http://www.w3.org/TR/REC-html40/present/graphics.html#edef-B" title="http://www.w3.org/TR/REC-html40/present/graphics.html#edef-B">HTML4.01, section 15.2.1</a>)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p>Genau wie alle anderen HTML Elemente verfügt dieses Element über <a href="/de/HTML/Globale_Attribute" title="de/HTML/Globale Attribute">globale Attribute</a>.</p>
+
+<h2 id="DOM_Interface">DOM Interface</h2>
+
+<p>Dieses Element implementiert das <code><a href="/de/DOM/element" title="de/DOM/element">HTMLElement</a></code> Interface.</p>
+
+<div class="note">
+<p><strong>Implementationshinweis:</strong> Bis einschließlich Gecko 1.9.2 implementiert Firefox das <a href="/de/DOM/span" title="de/DOM/span"><span style="font-family: Courier New;">HTMLSpanElement</span></a> Interface für dieses Element.</p>
+</div>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="eval">&lt;p&gt;
+  Dieser Artikel beschreibt einige &lt;b&gt;text-level&lt;/b&gt; Elemente. Es beschreibt die Verwendung in einem &lt;b&gt;HTML&lt;/b&gt; Dokument.
+&lt;/p&gt;
+Schlüsselwörter werden hier mit dem Standard-Style des &lt;b&gt; Elements versehen, meistens Fettdruck
+</pre>
+
+<h4 id="Ergebnis">Ergebnis</h4>
+
+<p>Dieser Artikel beschreibt einige <strong>text-level</strong> Elemente. Es beschreibt die Verwendung in einem <strong>HTML</strong> Dokument.</p>
+
+<p>Schlüsselwörter werden hier mit dem Standard-Style des &lt;b&gt; Elements versehen, meistens Fettdruck.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Andere Elemente mit semantischer Bedeutung auf Text-Ebene: {{ HTMLElement("a") }}, {{ HTMLElement("em") }}, {{ HTMLElement("strong") }}, {{ HTMLElement("small") }}, {{ HTMLElement("cite") }}, {{ HTMLElement("q") }}, {{ HTMLElement("dfn") }}, {{ HTMLElement("abbr") }}, {{ HTMLElement("time") }}, {{ HTMLElement("code") }}, {{ HTMLElement("var") }}, {{ HTMLElement("samp") }}, {{ HTMLElement("kbd") }}, {{ HTMLElement("sub") }}, {{ HTMLElement("sup") }}, {{ HTMLElement("i") }}, {{ HTMLElement("mark") }}, {{ HTMLElement("ruby") }}, {{ HTMLElement("rp") }}, {{ HTMLElement("rt") }}, {{ HTMLElement("bdo") }}, {{ HTMLElement("span") }}, {{ HTMLElement("br") }}, {{ HTMLElement("wbr") }}.</li>
+ <li><a class="external" href="http://www.w3.org/International/questions/qa-b-and-i-tags.de.php">Verwendung von &lt;b&gt; und &lt;i&gt; Elementen (W3C)</a></li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/de/web/html/element/base/index.html b/files/de/web/html/element/base/index.html
new file mode 100644
index 0000000000..e5f37d7d1a
--- /dev/null
+++ b/files/de/web/html/element/base/index.html
@@ -0,0 +1,170 @@
+---
+title: <base>
+slug: Web/HTML/Element/base
+tags:
+  - Element
+  - HTML
+  - HTML Dokumentmetadaten
+  - Referenz
+  - Web
+translation_of: Web/HTML/Element/base
+---
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Das <em>HTML Base Element</em> (<strong>&lt;base&gt;</strong>) definiert die Basis URL für alle relativen URLs im Dokument. Das &lt;base&gt; Element darf nur einmal im Dokument vorkommen.</p>
+
+<div class="note"><strong>Hinweis:</strong> Falls mehrere <code>&lt;base&gt;</code> Elemente in einem Dokument vorhanden sind, wird nur der Erste <strong>href</strong> und der Erste <strong>target</strong> Wert verwendet. Alle anderen werden ignoriert.</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories">Inhaltskategorien</a></th>
+   <td>Metadata Inhalt.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubter Inhalt</th>
+   <td>Keine, ist ein {{Glossary("empty element")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag Auslassung</th>
+   <td>Es ist kein End-Tag erforderlich.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte Elternelemente</th>
+   <td>Jedes {{HTMLElement("head")}} Element, das keine anderen {{HTMLElement("base")}} Elemente enthält.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM Schnittstelle</th>
+   <td>{{domxref("HTMLBaseElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p><span style="line-height: 21px;">Dieses Element schliesst </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globale Attribute</a><span style="line-height: 21px;"> ein</span><span style="line-height: 21px;">.</span></p>
+
+<dl>
+ <dt>{{htmlattrdef("href")}}</dt>
+ <dd>Die Basis URL die im Dokument für relative URLs genutzt werden soll. Wenn dieses Attribut verwendet wird, sollte das Element vor allen anderen Elementen definiert werden, die eine URL als Wert enthalten.<br>
+ Absolute und relative URLs sind erlaubt (siehe Anmerkungen).</dd>
+ <dt>{{htmlattrdef("target")}}</dt>
+</dl>
+
+<p>Dieses Attribut legt fest, wo die verlinkte Quelle angezeigt wird. In HTML4 ist das der Name eines Frames oder ein Schlüsselwort für ein Frame. In HTML5 ist es ein Name eines <em>browsing context</em>es oder ein Schlüsselwort für einen <em>browsing context</em> (zum Beispiel ein Tab, Fenster oder Inline Frame). Die folgenden Schlüsselwörter haben eine spezielle Bedeutung:</p>
+
+<ul>
+ <li><code>_self</code>: Lädt die Antwort in dasselbe Frame (HTML4) bzw. denselben <em>browsing context</em> (HTML5) wie die aktuelle Seite. Dieser Wert ist der Standardwert.</li>
+ <li><code>_blank</code>: Lädt die Antwort in ein neues unbenanntes Fenster (HTML4) bzw. einen neuen <em>browsing context</em> (HTML5).</li>
+ <li><code>_parent</code>: Lädt die Antwort in den <em>frameset parent</em> des aktuellen Frames (HTML4) bzw. <em>parent browsing context</em> (HTML5) des aktuellen. Falls es keinen <em>parent</em> gibt, verhält sich dieser Wert wie <code>_self</code>.</li>
+ <li><code>_top</code>: Lädt die Antwort in das gesamte Fenster und alle Frames werden überschrieben (HTML4) bzw. in den obersten <em>browsing context</em> (d.h. der <em>browsing context</em>, der dem aktuellen übergeordnet ist und keine übergeordneten <em>browsing context</em>e hat). Falls es keinen übergeordneten gibt, verhält sich dieser Wert wie <code>_self</code>.</li>
+</ul>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: html">&lt;base href="http://www.example.com/"&gt;
+&lt;base target="_blank" href="http://www.example.com/"&gt;
+</pre>
+
+<h2 id="Specifications" name="Specifications">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-base-element', '&lt;base&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Keine Änderungen seit der letzten Version</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'document-metadata#the-base-element', '&lt;base&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Verhalten des <code>target</code> Attributs defniert</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.4', '&lt;base&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td><code>target</code> Attribut hinzugefügt</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Anmerkungen">Anmerkungen</h2>
+
+<ul>
+ <li>Die Basis URL ist für Skripte erforderlich, die {{domxref('document.baseURI')}} verwenden.</li>
+ <li>Relative URLs für <code>href</code> werden seit Gecko 2.0 (Firefox 4.0) unterstützt</li>
+ <li>HTML 2.0 und 3.2 spezifizieren lediglich das <code>href</code> Attribut</li>
+ <li>XHTML setzte einen nachfolgenden Slash voraus: <code>&lt;base /&gt;</code></li>
+ <li>Die Verwendung eines Verweises innerhalb der Seite, z.B. <code>&lt;a href="#anchor"&gt;Anker&lt;/a&gt;,</code> wird mit Hilfe der Basis-Url ausgewertet und löst einen HTTP-Request auf die Basis-Url aus.<br>
+  <br>
+  <strong>Beispiel:</strong><br>
+  <br>
+  Die Basis Url:<br>
+  <code>&lt;base href="http://www.example.com/"&gt;</code><br>
+  <br>
+  Der Verweis:<br>
+  <code>&lt;a href="#anchor"&gt;Anker&lt;/a&gt;</code><br>
+  <br>
+  Wird aufgelöst in:<br>
+  <code>http://www.example.com/#anchor</code><br>
+   </li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/de/web/html/element/bdi/index.html b/files/de/web/html/element/bdi/index.html
new file mode 100644
index 0000000000..20c25bb54d
--- /dev/null
+++ b/files/de/web/html/element/bdi/index.html
@@ -0,0 +1,138 @@
+---
+title: <bdi>
+slug: Web/HTML/Element/bdi
+translation_of: Web/HTML/Element/bdi
+---
+<p>Das <strong>HTML <code>&lt;bdi&gt;</code> Element</strong> (engl. für <em>bidirectional isolation</em>) isoliert einen Textauszug der in einer anderen Richtung erscheinen soll, als der Text der ihn umgibt.</p>
+
+<p>Dieses Element ist nützlich, wenn Text in einen Text eingebunden werden soll, z. B. von einer Datenbank, aber die Schreibrichtung anders sein kann, als der bestehende Text.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Inhaltskategorien</a></th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Fließender Inhalt</a>, gestaltender Inhalt, eindeutiger Inhalt.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubter Inhalt</th>
+   <td>Ausdrucksinhalt.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag Wegfall</th>
+   <td>keiner</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte Elternelemente</th>
+   <td>Irgend ein Element, das den Ausdrucksinhalt akzeptiert.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte ARIA-Rollen</th>
+   <td>Beliebig</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p>Wie alle anderen HTML Elemente hat dieses Element globale Attribute mit einer leicht anderen Bedeutung: das <strong>dir</strong> Attribut wird nicht geerbt. Wenn es nicht gesetzt wurde, ist der Standardwert <code>auto</code>. Das lässt den Browser an Hand des Inhalts entscheiden, welche Richtung er für den Text innerhalb des <code>&lt;bdi&gt;</code> Element setzt.</p>
+
+<h2 id="Gebrauchshinweise">Gebrauchshinweise</h2>
+
+<p>Obwohl der gleiche visuelle Effekt mit der CSS Regel  {{cssxref("unicodes-bidi")}}<code>: isolate</code> auf einem {{HTMLElement("span")}} oder einem anderen textformatierenden Element erziehlt werden kann, wird die semantische Bedeutung nur mit dem <code>&lt;bdi&gt;</code> Element übermittelt. Zumal es Browsern erlaubt ist, CSS-Styling zu ignorieren. In einem solchen Fall würde der Text unter dem genannten Element richtig angezeigt, die Methode mit CSS würde hingegen Müll erzeugen.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: html">&lt;p dir="ltr"&gt;Das arabische Wort &lt;bdi&gt;ARABISCHER_PLATZHALTER&lt;/bdi&gt;
+wird automatisch von rechts nach links geschrieben.&lt;/p&gt;
+</pre>
+
+<h3 id="Ergebnis">Ergebnis</h3>
+
+<p dir="ltr">Das arabische Wort RETLAHZTALP_REHCSIBARA wird automatisch von rechts nach links geschrieben..</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-bdi-element', '&lt;bdi&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-bdi-element', '&lt;bdi&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>16</td>
+   <td>{{CompatGeckoDesktop("10.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("10.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 dir="ltr" id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Ähnliches HTML Element:  bdo</li>
+ <li>Ähnliche HTML Eigenschaften: direction, unicode-bidi</li>
+</ul>
+
+<p>HTMLRef</p>
diff --git a/files/de/web/html/element/bdo/index.html b/files/de/web/html/element/bdo/index.html
new file mode 100644
index 0000000000..a97af7ab38
--- /dev/null
+++ b/files/de/web/html/element/bdo/index.html
@@ -0,0 +1,153 @@
+---
+title: <bdo>
+slug: Web/HTML/Element/bdo
+tags:
+  - BiDi
+  - Element
+  - HTML
+  - HTML Text-Level Semantik
+  - NeedsCompatTable
+  - Referenz
+  - Web
+translation_of: Web/HTML/Element/bdo
+---
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Das <strong>HTML <code>&lt;bdo&gt;</code> Element</strong> (oder <em>HTML bidirectional override element</em>) wird genutzt um die Laufrichtung von Texten zu überschreiben. Die Richtungsabhängigkeit der einzelnen Buchstaben wird ignoriert, stattdessen wird die spezifische Richtungsabhängigkeit favorisiert.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorien</a></th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Fließender Inhalt</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">Formulierungsinhalt</a>, greifbarer Inhalt.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubter Inhalt</th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Formulierungsinhalt</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag Auslassung</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte Elternelemente</th>
+   <td>Jedes Element, das <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Formulierungsinhalt</a> akzeptiert.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM Schnittstelle</th>
+   <td>{{domxref("HTMLElement")}} Bis einschließlich Gecko 1.9.2 (Firefox 4) hat Firefox die <a href="/en-US/docs/DOM/span" title="DOM/span"><span style="font-family: courier new;">HTMLSpanElement</span></a> Schnittstelle für dieses Element implementiert.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p><span style="line-height: 21px;">Dieses Element schließt </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globale Attribute</a><span style="line-height: 21px;"> ein.</span></p>
+
+<dl>
+ <dt>{{htmlattrdef("dir")}}</dt>
+ <dd>Textausrichtung in diesem Element. Mögliche Werte sind:
+ <ul>
+  <li><code>ltr</code>: Indiziert, dass der Text von links-nach-rechts ausgerichtet wird.</li>
+  <li><code>rtl</code>: Indiziert, dass der Text von rechts-nach-links ausgerichtet wird.</li>
+  <li><code>auto</code>: Der Browser entscheidet über die Ausrichtung, basierend auf den Inhalt des Elements.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: html">&lt;!-- Ändere die Textrichtung --&gt;
+&lt;p&gt;Dieser Text wird von links nach rechts gehen.&lt;/p&gt;
+&lt;p&gt;&lt;bdo dir="rtl"&gt;Dieser Text wird von rechts nach links gehen.&lt;/bdo&gt;&lt;/p&gt;</pre>
+
+<h3 id="Ergebnis">Ergebnis</h3>
+
+<p>Dieser Text wird von links nach rechts gehen.</p>
+
+<p>.neheg sknil hcan sthcer nov driw txeT reseiD</p>
+
+<h2 id="Bemerkung">Bemerkung</h2>
+
+<p>In der HTML 4 Spezifikation werden keine Events für dieses Element beschrieben; diese wurden in XHTML hinzugefügt. Dies wird oftmals übersehen.</p>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-bdo-element', '&lt;bdo&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'the-bdo-element.html#the-bdo-element', '&lt;bdo&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'dirlang.html#h-8.2.4', '&lt;bdo&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/de/web/html/element/bgsound/index.html b/files/de/web/html/element/bgsound/index.html
new file mode 100644
index 0000000000..8c9946dc0f
--- /dev/null
+++ b/files/de/web/html/element/bgsound/index.html
@@ -0,0 +1,96 @@
+---
+title: <bgsound>
+slug: Web/HTML/Element/bgsound
+translation_of: Web/HTML/Element/bgsound
+---
+<div>
+ {{non-standard_header}}</div>
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+<p>Das HTML Hintergrund Sound-Element (&lt;bgsound&gt;) ist ein Internet Explorer-Element, was ein Hintergrund-Sound mit einer Webseite verknüpft.</p>
+<div class="note">
+ <p><strong>Benutze dies nicht!:<em> </em></strong>Wenn du nur eine Audiodatei einbetten willst, solltest du {{HTMLElement("audio")}} benutzen.</p>
+</div>
+<h2 id="Attribute">Attribute</h2>
+<dl>
+ <dt>
+  {{htmlattrdef("balance")}}</dt>
+ <dd>
+  Dieses Attribut definiert den Lautstärkeunterschied(zwischen -10,000 und +10,000)zwischen den beiden Lautsprechern.</dd>
+ <dt>
+  {{htmlattrdef("loop")}}</dt>
+ <dd>
+  Dieses Attribut gibt die Nummer der Anzahl an, wie oft ein Sound abgespielt werden soll. Du kannst entweder eine Nummer angeben oder "infinite" schreiben, damit der Sound unendlich angespielt wird.</dd>
+</dl>
+<dl>
+ <dt>
+  {{htmlattrdef("src")}}</dt>
+ <dd>
+  Dieses Attribut gibt die URL von dem Sound an, der gespielt werden soll. Die Datei muss eines dieser Formate haben: .wav, .au oder .mid.</dd>
+ <dt>
+  {{htmlattrdef("volume")}}</dt>
+ <dd>
+  Dieses attribut gibt an mit einer Nummer zwischen -10,000 and 0, die die Lautstärke angibt.</dd>
+</dl>
+<h2 id="Beispiel">Beispiel</h2>
+<pre class="brush:html">&lt;bgsound src="sound1.mid"&gt;
+
+&lt;bgsound src="sound2.au" loop="infinite"&gt;
+</pre>
+<h2 id="Notes">Notes</h2>
+<p>Die gleiche Funktionalität kann erreicht werden in einigen Versionen von Netscape, wenn man den &lt;embed&gt;-Tag benutzt, der dann einen Audio-Player auruft.</p>
+<p>Du kannst &lt;bgsound&gt; mit einem Selbstschließendem-Tag(Also so:<code>&lt;bgsound /&gt;</code>) schreiben. Allerdings ist dies nicht Teil des Standarts, wenn ihr XHTML benutzt, wird es nicht valide sein.</p>
+<h2 id="Browser-Kompatiblität">Browser-Kompatiblität</h2>
+<p>{{CompatibilityTable}}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>
+     <p>{{CompatUnknown}}</p>
+    </td>
+    <td>{{CompatNo}} [1]</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatNo}} [1]</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<p>[1] Bis zur Firefox-Version 22, selbst wenn es nicht unterstützt wird, hat Gecko es interpretiert wie {{domxref("HTMLSpanElement")}}. Dies wurde gefixt und nun wird es wie {{domxref("HTMLUnknownElement")}} interpretiert, wie es eigentlich sein sollte.</p>
+<h2 id="Siehe_auch">Siehe auch</h2>
+<ul>
+ <li>Das {{htmlelement("audio")}}, was das Standart-Element ist bei eingebetteten Audio-Dokumenten.</li>
+</ul>
+<div>
+ {{HTMLRef}}</div>
diff --git a/files/de/web/html/element/big/index.html b/files/de/web/html/element/big/index.html
new file mode 100644
index 0000000000..5515b9798f
--- /dev/null
+++ b/files/de/web/html/element/big/index.html
@@ -0,0 +1,89 @@
+---
+title: <big>
+slug: Web/HTML/Element/big
+tags:
+  - Element
+  - HTML
+  - Obsolete
+  - Referenz
+  - Web
+translation_of: Web/HTML/Element/big
+---
+<div>
+ {{obsolete_header}}</div>
+<h2 id="Übersicht">Übersicht</h2>
+<p>Das HTML Big Element (<code>&lt;big&gt;</code>) vergrößert die Schrift um einen Wert (zum Beispiel von small nach medium oder von large nach x-large) bis zur maximalen Schriftgröße des Browsers.</p>
+<div class="note">
+ <p><strong>Hinweis zur Benutzung: </strong>Dadurch, dass dieses Element rein der Darstellung diente, wurde es in <a href="/en-US/docs/Web/Guide/HTML/HTML5" title="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a> entfernt und sollte nicht mehr verwendet werden. Stattdessen sollten Webentwickler die <a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a> Eigenschaften nutzen.</p>
+</div>
+<h2 id="Attribute">Attribute</h2>
+<p>Dieses Element hat nicht mehr als die <a href="/en-US/docs/HTML/global_attributes" title="HTML/global attributes">globalen Attribute</a>, wie jedes Element.</p>
+<h2 id="Beispiel_1">Beispiel 1</h2>
+<pre class="brush:xml">&lt;p&gt;
+  Das ist der erste Satz. &lt;big&gt;Der zweite
+  Satz wird größer dargestellt.&lt;/big&gt;
+&lt;/p&gt;</pre>
+<h2 id="Beispiel_2_(CSS_Alternative)">Beispiel 2 (CSS Alternative)</h2>
+<pre class="brush:xml">&lt;p&gt;
+  Das ist der erste Satz. &lt;span style="font-size:1.2em"&gt;Der zweite
+  Satz wird größer dargestellt.&lt;/span&gt;
+&lt;/p&gt;</pre>
+<h3 id="Ergebnis">Ergebnis</h3>
+<p>Das ist der erste Satz. <span style="font-size: 1.2em;">Der zweite Satz wird größer dargestellt.</span></p>
+<h2 id="DOM_Schnittstelle">DOM Schnittstelle</h2>
+<p>Dieses Element implementiert die {{domxref('HTMLElement')}} Schnittstelle.</p>
+<div class="note">
+ <strong>Hinweis zur Implementierung: </strong>Bis einschließlich Gecko 1.9.2 implementierte Firefox die {{domxref('HTMLSpanElement')}} Schnittstelle für dieses Element.</div>
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+<p>{{CompatibilityTable}}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="Siehe_auch">Siehe auch</h2>
+<ul>
+ <li>{{htmlelement("small")}}, {{htmlelement("font")}}, {{htmlelement("style")}}</li>
+ <li>HTML 4.01 Spezifikation: <a class="external" href="http://www.w3.org/TR/html4/present/graphics.html#h-15.2">Font Styles</a></li>
+</ul>
+<div>
+ {{HTMLRef}}</div>
diff --git a/files/de/web/html/element/blink/index.html b/files/de/web/html/element/blink/index.html
new file mode 100644
index 0000000000..cc2718c06e
--- /dev/null
+++ b/files/de/web/html/element/blink/index.html
@@ -0,0 +1,87 @@
+---
+title: <blink>
+slug: Web/HTML/Element/blink
+tags:
+  - Deprecated
+  - Element
+  - HTML
+  - Non-standard
+  - Referenz
+  - Web
+translation_of: Web/HTML/Element/blink
+---
+<div>
+ {{Deprecated_header}} {{Non-standard_header}}</div>
+<h2 id="Übersicht">Übersicht</h2>
+<p>Das HTML Blink Element (<code>&lt;blink&gt;</code>) ist kein Standard-Element und bewirkt, dass der vom Element umschlossene Text blinkt.</p>
+<div class="warning">
+ <p class="note"><strong>Warnung:</strong> Dieses Element sollte nicht verwendet werden, da es nicht zum Standard gehört und <strong>veraltet</strong> ist. Blinkender Text wird von diversen Zugriffstandards missbilligt und die CSS-Spezifikation erlaubt Browsern, das &lt;blink&gt;-Element zu ignorieren.</p>
+</div>
+<h2 id="DOM_Schnittstelle">DOM Schnittstelle</h2>
+<p>Dieses Element wird nicht unterstützt und implementiert somit die {{domxref("HTMLUnknownElement")}} Schnittstelle.</p>
+<h2 id="Beispiel">Beispiel</h2>
+<pre class="brush:html">&lt;blink&gt;Why would somebody use this?&lt;/blink&gt;
+</pre>
+<h3 id="Ergebnis">Ergebnis</h3>
+<p><img alt="Image:HTMLBlinkElement.gif" src="/@api/deki/files/247/=HTMLBlinkElement.gif"></p>
+<h2 id="Spezifikation">Spezifikation</h2>
+<p>Dieses Element gehört nicht zum Standard und ist somit auch kein Teil einer Spezifikation.</p>
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+<div>
+ {{CompatibilityTable}}</div>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari (WebKit)</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>{{CompatNo}}</td>
+    <td>Until {{CompatGeckoDesktop("22.0")}}<br>
+     {{CompatNo}} since {{CompatGeckoDesktop("23.0")}}</td>
+    <td>{{CompatNo}}</td>
+    <td>Until 12.1<br>
+     {{CompatNo}} since 15.0</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Phone</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>{{CompatNo}}</td>
+    <td>Until {{CompatGeckoMobile("22.0")}}<br>
+     {{CompatNo}} since {{CompatGeckoMobile("23.0")}}</td>
+    <td>{{CompatNo}}</td>
+    <td>Until 12.1<br>
+     {{CompatNo}} since 15.0</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="Siehe_auch">Siehe auch</h2>
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blink" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blink">Die Geschichte der Entstehung des HTML <code>&lt;blink&gt;</code> Elements</a>.</li>
+ <li>{{cssxref("text-decoration")}}, wo blinkende Werte existieren, der Browser sie jedoch nicht effektiv blinken lassen muss.</li>
+ <li>{{htmlelement("marquee")}}, ein ähnliches Element, welches ebenfalls nicht zum Standard gehört.</li>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations" title="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">CSS Animationen</a> sind der richtige Weg für diese Art von Effekt.</li>
+</ul>
+<p>{{HTMLRef}}</p>
diff --git a/files/de/web/html/element/blockquote/index.html b/files/de/web/html/element/blockquote/index.html
new file mode 100644
index 0000000000..75f38620cc
--- /dev/null
+++ b/files/de/web/html/element/blockquote/index.html
@@ -0,0 +1,156 @@
+---
+title: <blockquote>
+slug: Web/HTML/Element/blockquote
+tags:
+  - Element
+  - HTML
+  - HTML Gruppierungsinhalt
+  - 'HTML:Flow content'
+  - Referenz
+  - Web
+translation_of: Web/HTML/Element/blockquote
+---
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Das <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (oder <em>HTML Block Quotation Element</em>) gibt an, dass der eingeschlossene Text ein erweiterndes Zitat ist. Normalerweise wird dieses Element als Einrückung dargestellt (siehe <a href="/en-US/docs/HTML/Element/blockquote#Notes" title="HTML/Element/blockquote#Notes">Anmerkungen</a> wie man die Darstellung ändert). Eine URL für die Quelle des Zitats kann mit Hilfe des <em>cite</em> Attributs angegeben werden, während die Quelle eines Textes mit dem {{HTMLElement("cite")}} Element angegeben werden kann.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorien</a></th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Fließender Inhalt</a>, Sektionsursprung, greifbarer Inhalt.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubter Inhalt</th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Phrasing_content">Fließender Inhalt</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag Auslassung</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte Elternelemente</th>
+   <td>Jedes Element, dass <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Phrasing_content">fließenden Inhalt</a> erlaubt.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM Schnittstelle</th>
+   <td>{{domxref("HTMLQuoteElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p><span style="line-height: 21px;">Dieses Element schließt die </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globalen Attribute</a><span style="line-height: 21px;"> ein.</span></p>
+
+<dl>
+ <dt>{{htmlattrdef("cite")}}</dt>
+ <dd>Eine URL, die ein Quelldokument oder die Quellnachricht angibt, für die zitierte Information. Dieses Attribut zielt darauf ab, auf Informationen zu zeigen, die den Kontext oder die Referenz des Zitats näher erläutern.</dd>
+</dl>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: html">&lt;blockquote cite="http://developer.mozilla.org"&gt;
+  &lt;p&gt;Das ist ein Zitat vom Mozilla Developer Center.&lt;/p&gt;
+&lt;/blockquote&gt;
+</pre>
+
+<p>Dieser HTML Code gibt folgendes Ergebnis aus:</p>
+
+<blockquote cite="http://developer.mozilla.org">
+<p>Das ist ein Zitat vom Mozilla Developer Center.</p>
+</blockquote>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-blockquote-element', '&lt;blockquote&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-blockquote-element', '&lt;blockquote&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.2', '&lt;blockquote&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Anmerkungen">Anmerkungen</h2>
+
+<p>Um die <code>&lt;blockquote&gt;</code> Einrückung zu ändern, kann die <a href="/en-US/docs/CSS" title="CSS">CSS</a> {{cssxref("margin")}} Eigenschaft genutzt werden.</p>
+
+<p>Für kurze Zitate kann man das {{HTMLElement("q")}} Element nutzen.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Das {{HTMLElement("q")}}  Element einreihige Zitat.</li>
+ <li>Das {{HTMLElement("cite")}} Element für Quellenangaben.</li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/de/web/html/element/body/index.html b/files/de/web/html/element/body/index.html
new file mode 100644
index 0000000000..d71558312c
--- /dev/null
+++ b/files/de/web/html/element/body/index.html
@@ -0,0 +1,230 @@
+---
+title: <body>
+slug: Web/HTML/Element/body
+tags:
+  - Element
+  - Grundlagen
+  - HTML
+  - Web
+translation_of: Web/HTML/Element/body
+---
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+
+<p>Das <strong>HTML <code>&lt;body&gt;</code> Element</strong> repräsentiert den Inhalt eines HTML Dokuments. Es gibt nur ein <code>&lt;body&gt;</code> Element in einem Dokument.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th>
+   <td><a href="/en-US/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document#Sectioning_roots">Sectioning root</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubter Inhalt</th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag Platzierung</th>
+   <td>Der Starttag darf weggelassen werden, wenn das erste Ding dazwischen kein Leerzeichen, Kommentar, {{HTMLElement("script")}} Element oder {{HTMLElement("style")}} Element ist. Der Endtag kann weggelassen werden, wenn das Body-Element Inhalte oder einen Starttag hat und ihm nicht sofort ein Kommentar folgt.</td>
+  </tr>
+  <tr>
+   <th scope="row">Zulässige Elternelemente</th>
+   <td>Es muss das zweite Element eines {{HTMLElement("html")}} Elements sein.</td>
+  </tr>
+  <tr>
+   <th>DOM Schnittstelle</th>
+   <td>{{domxref("HTMLBodyElement")}}
+    <ul>
+     <li>Das <code>&lt;body&gt;</code> Element implementiert die {{domxref("HTMLBodyElement")}} Schnittstelle.</li>
+     <li>Sie können auf das Body-Element durch ein {{domxref("document.body")}} Attribute zugreifen.</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p>Dieses Element beinhaltet die <a href="/en-US/docs/Web/HTML/Global_attributes">Globalen Attribute</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("alink")}} {{obsolete_inline}}</dt>
+ <dd>Textfarbe für selektierte Links. <em>Diese Methode ist fehlerhaft, benutzen Sie stattdessen das CSS {{cssxref("color")}} Objekt in Verbindung mit der {{cssxref(":active")}} Pseudoklasse.</em></dd>
+ <dt>{{htmlattrdef("background")}} {{obsolete_inline}}</dt>
+ <dd>URI eines Bilds, das als Hintergrundbild gesetzt wird. <em>Diese Methode ist fehlerhaft, benutzen Sie stattdessen das CSS</em><em> {{cssxref("background")}} Objekt auf dem Element.</em>
+ <div class="note"><strong>Hinweis:</strong> Seit Gecko 7.0 {{geckoRelease("7.0")}} wird <code>background</code> nicht länger als eine URI aufgelöst; stattdessen wird es als einfacher String behandelt.</div>
+ </dd>
+ <dt>{{htmlattrdef("bgcolor")}} {{obsolete_inline}}</dt>
+ <dd>Hintergrundfarbe eines Dokumentes. <em>Diese Methode ist fehlerhaft, benutzen Sie stattdessen das CSS {{cssxref("background-color")}} Objekt auf dem Element.</em></dd>
+ <dt>{{htmlattrdef("bottommargin")}} {{obsolete_inline}}</dt>
+ <dd>Der Abstand des Bodens des Bodys. <em>Diese Methode ist fehlerhaft, benutzen Sie stattdessen das CSS {{cssxref("margin-bottom")}} Objekt auf dem Element.</em></dd>
+ <dt>{{htmlattrdef("leftmargin")}} {{obsolete_inline}}</dt>
+ <dd>Der Abstand der linken Seite des Bodys. <em>Diese Methode ist fehlerhaft, benutzen Sie stattdessen das CSS {{cssxref("margin-left")}} Objekt auf dem Element.</em></dd>
+ <dt>{{htmlattrdef("link")}} {{obsolete_inline}}</dt>
+ <dd>Textfarbe eines unbesuchten Links. <em>Diese Methode ist fehlerhaft, benutzen Sie stattdessen das CSS {{cssxref("color")}} Objekt in Verbindung mit der {{cssxref(":link")}} Pseudoklasse.</em></dd>
+ <dt>{{htmlattrdef("onafterprint")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Funktion, die aufgerufen wird, wenn der Nutzer das Dokument gedruckt hat.</dd>
+ <dt>{{htmlattrdef("onbeforeprint")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Funktion, die aufgerufen wird, wenn der Nutzer das Dokument drucken möchte.</dd>
+ <dt>{{htmlattrdef("onbeforeunload")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Funktion, die aufgerufen wird, wenn das Dokument nicht geladen wird.</dd>
+ <dt>{{htmlattrdef("onblur")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Funktion, die aufgerufen wird, wenn das Dokument nicht mehr angezeigt wird.</dd>
+ <dt>{{htmlattrdef("onerror")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Funktion, die aufgerufen wird, wenn das Dokument nicht richtig geladen wird.</dd>
+ <dt>{{htmlattrdef("onfocus")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Funktion, die aufgerufen wird, wenn das Dokument angezigt wird.</dd>
+ <dt>{{htmlattrdef("onhashchange")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Funktion, die aufgerufen wird, wenn der Fragment-Identifizier-Teil (beginnend mit der Raute (<code>'#'</code>)) der eigentlichen Adresse des Dokuments geändert wird.</dd>
+ <dt>{{htmlattrdef("onlanguagechange")}} {{experimental_inline}}</dt>
+ <dd>Funktion, die aufgerufen wird, wenn die bevorzugte Sprache geändert wird.</dd>
+ <dt>{{htmlattrdef("onload")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Funktion, die aufgerufen wird, wenn das Dokument fertig geldaden ist.</dd>
+ <dt>{{htmlattrdef("onmessage")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Funktion, die aufgerufen wird, wenn das Dokument eine Nachricht erhalten hat.</dd>
+ <dt>{{htmlattrdef("onoffline")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Funktion, die aufgerufen wird, wenn die Netzwerk-Kommunikation gescheitert ist.</dd>
+ <dt>{{htmlattrdef("ononline")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Funktion, die aufgerufen wird, wenn die Netzwerk-Kommunikation wiederhergestellt wird.</dd>
+ <dt>{{htmlattrdef("onpopstate")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Funktion, die aufgerufen wird, wenn der Nutzer den Sitzungsverlauf aufgerufen hat.</dd>
+ <dt>{{htmlattrdef("onredo")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Funktion, die aufgerufen wird, wenn der Nutzer vorwärts eine Rückgängig-Aktion wiederholt hat.</dd>
+ <dt>{{htmlattrdef("onresize")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Funktion, die aufgerufen wird, wenn die Größe des Dokumentes verändert wird.</dd>
+ <dt>{{htmlattrdef("onstorage")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Funktion, die aufgerufen wird, wenn der Speicherbreich verändert wurde.</dd>
+ <dt>{{htmlattrdef("onundo")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Funktion, die aufgerufen wird, wenn der Nutzer zurückgegangen ist.</dd>
+ <dt>{{htmlattrdef("onunload")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Funktion, die aufgerufen wird, wenn das Dokument verschwindet.</dd>
+ <dt>{{htmlattrdef("rightmargin")}} {{obsolete_inline}}</dt>
+ <dd>Der Abstand der rehten Seite des Bodys. <em>Diese Methode ist fehlerhaft, benutzen Sie stattdessen das CSS {{cssxref("margin-right")}} Objekt auf dem Element.</em></dd>
+ <dt>{{htmlattrdef("text")}} {{obsolete_inline}}</dt>
+ <dd>Vordergrundfarbe des Textes. <em>TDiese Methode ist fehlerhaft, benutzen Sie stattdessen das CSS {{cssxref("color")}} Objekt auf dem Element.</em></dd>
+ <dt>{{htmlattrdef("topmargin")}} {{obsolete_inline}}</dt>
+ <dd>Der Abstand von oben des Bodys. <em>Diese Methode ist fehlerhaft, benutzen Sie stattdessen das CSS {{cssxref("margin-top")}} Objekt auf dem Element.</em></dd>
+ <dt>{{htmlattrdef("vlink")}} {{obsolete_inline}}</dt>
+ <dd>Textfarbe eines besuchten Links. <em>Diese Methode ist fehlerhaft, benutzen Sie stattdessen das CSS {{cssxref("color")}} Objekt in Verbindung mit der {{cssxref(":visited")}} Pseudoklasse.</em></dd>
+</dl>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'sections.html#the-body-element', '&lt;body&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Veränderte die Liste der fehlerhaften Features.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-body-element', '&lt;body&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Überholt die ehemaligen veralteten Attribute. Definiert das Verhalten der fehlerhaften und niemals standartisierten <strong>margintop</strong>, <strong>marginleft</strong>, <strong>marginright</strong> und <strong>marginbottom</strong><strong>.</strong></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.1', '&lt;body&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Überholt die <strong>alink</strong>, <strong>background</strong>, <strong>bgcolor</strong>, <strong>link</strong>, <strong>text</strong> und <strong>vlink</strong> Attribute.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onlanguagechange</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("32")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>bottommargin</code>, <code>leftmargin</code>, <code>rightmargin</code>, <code>topmargin</code> {{obsolete_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("35")}} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onlanguagechange</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("32")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>bottommargin</code>, <code>leftmargin</code>, <code>rightmargin</code>, <code>topmargin</code> {{obsolete_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("35")}} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Wurde bereits vorher im Quirk Mode unterstützt.</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{HTMLElement("html")}}</li>
+ <li>{{HTMLElement("head")}}</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/de/web/html/element/br/index.html b/files/de/web/html/element/br/index.html
new file mode 100644
index 0000000000..b5ca16c71b
--- /dev/null
+++ b/files/de/web/html/element/br/index.html
@@ -0,0 +1,130 @@
+---
+title: <br>
+slug: Web/HTML/Element/br
+translation_of: Web/HTML/Element/br
+---
+<h2 id="Summary" name="Summary">Zusammenfassung</h2>
+
+<p>Das HTML Element <em>line break</em> <code>&lt;br&gt;</code> produziert einen Zeilenumbruch in (Fließ-)Text (Wagenrücklauf). Es ist z.B nützlich beim Notieren eines Gedichtes oder einer Adresse, wo die Aufteilung der Zeilen von Bedeutung ist.</p>
+
+<h2 id="Usage_Context" name="Usage_Context">Gebrauch</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Zulässiger Inhalt</td>
+   <td>Keiner, es handelt sich um ein "void" Element.</td>
+  </tr>
+  <tr>
+   <td>Tag Platzierung</td>
+   <td>Muss ein Start-Tag und darf kein Ende-Tag besitzen. In XHTML Dokumenten wird das Element als <code>&lt;br/&gt;</code> notiert.</td>
+  </tr>
+  <tr>
+   <td>Zulässige Elternelemente</td>
+   <td>Alle Elemente die <a href="/en-US/docs/HTML/Content_categories#phrasing_content" title="HTML/Content categories#phrasing content">formulierten Inhalt</a> akzeptieren.</td>
+  </tr>
+  <tr>
+   <td>Normatives Dokument</td>
+   <td><a class="external" href="http://www.w3.org/TR/html5/text-level-semantics.html#the-br-element" title="http://www.w3.org/TR/html5/text-level-semantics.html#the-br-element">HTML5, section 4.6.23</a>; <a class="external" href="http://www.w3.org/TR/html401/struct/text.html#h-9.3.2.1" title="http://www.w3.org/TR/html401/struct/text.html#h-9.3.2.1">HTML 4.01, section 9.3.2</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes" name="Attributes">Attribute</h2>
+
+<p>Wie alle anderen HTML Elemente besitzt dieses Element die <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">globalen Attribute</a>.</p>
+
+<dl>
+ <dt>{{ htmlattrdef("clear") }} {{deprecatedGeneric('inline','HTML4.01')}} {{obsoleteGeneric('inline','HTML5')}}</dt>
+ <dd>Zeigt an, wo die nächste Zeile nach dem Zeilenumbruch beginnt.
+ <div class="note">
+ <p><strong>Gebrauchshinweis: </strong>Dieses Attribut ist veraltet in {{ HTMLVersionInline(5) }} und <strong>sollte nicht verwendet werden</strong>. Stattdessen sollte die CSS-Eigenschaft {{CSSxref('clear')}} verwendet werden.</p>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="Example" name="Example">Beispiel</h2>
+
+<pre class="brush: html">Mozilla Foundation&lt;br&gt;
+1981 Landings Drive&lt;br&gt;
+Building K&lt;br&gt;
+Mountain View, CA 94043-0801&lt;br&gt;
+USA
+</pre>
+
+<p>Ausgabe:</p>
+
+<p>Mozilla Foundation<br>
+ 1981 Landings Drive<br>
+ Building K<br>
+ Mountain View, CA 94043-0801<br>
+ USA</p>
+
+<h2 id="DOM_Interface" name="DOM_Interface">DOM_Interface</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/HTMLBRElement" title="DOM/HTMLBRElement">HTMLBRElement</a></li>
+</ul>
+
+<h2 id="Notes" name="Notes">Anmerkungen</h2>
+
+<p><code>&lt;br&gt;</code> <em>nicht</em> verwenden um die Lücken zwischen Text zu vergrößern; stattdessen sollte die <a href="/en-US/docs/CSS" title="CSS">CSS</a> {{cssxref('margin')}} Eigenschaft oder das {{ HTMLElement("p") }} Element verwendet werden.</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser Kompatibilität</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{ HTMLElement("address") }} element</li>
+ <li>{{ HTMLElement("p") }} element</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/de/web/html/element/canvas/index.html b/files/de/web/html/element/canvas/index.html
new file mode 100644
index 0000000000..e4247626de
--- /dev/null
+++ b/files/de/web/html/element/canvas/index.html
@@ -0,0 +1,110 @@
+---
+title: <canvas>
+slug: Web/HTML/Element/canvas
+translation_of: Web/HTML/Element/canvas
+---
+<h2 id="Übersicht">Übersicht</h2>
+<p>Das Canvas Element ist ein großer Fortschritt in der Entwicklung des HTML, bietet es doch die Möglichkeit zur dynamischen Darstellung grafischer Informationen. Dazu wird eine Canvas (engl. Leinwand) definiert und mittels JavaScript verschiedene Methoden zur Anwendung gebracht und Attribute gesetzt (siehe <a class="external" href="http://www.selfhtml5.org/2010-html5-features/canvas-attribute-table/">Canvas Attribute</a>). Es sollte ein Fallbackinhalt in den <code>&lt;canvas&gt;Tag</code> eingefügt werden, welcher nur angezeigt wird, wenn Browser das <code>&lt;canvas&gt;</code> Element nicht unterstützt oder Javascript deaktiviert ist.</p>
+<h2 id="Attribute">Attribute</h2>
+<p><span style="line-height: 21px;">Dieses Element unterstützt die </span><a style="line-height: 21px;" title="HTML/Global attributes">globalen Attribute</a><span style="line-height: 21px;">.</span></p>
+<dl>
+ <dt>
+  {{htmlattrdef("width")}}</dt>
+ <dd>
+  Die Breite in Pixel. Standard ist 300px.</dd>
+ <dt>
+  {{htmlattrdef("height")}}</dt>
+ <dd>
+  Die Höhe in Pixel. Standard ist 150px.</dd>
+</dl>
+<p>{{Note("Die Größe des <code>canvas</code> kann auch via CSS geändert werden. Das Bild wird hierzu gestreckt um die per CSS definierte Größe zu erreichen.")}}</p>
+<h2 id="Beispiele">Beispiele</h2>
+<pre class="brush: html">&lt;canvas id="canvas" width="300" height="300"&gt;
+  Dein Browser unterstützt das &amp;lt;canvas&amp;gt; Element anscheinend nicht.
+&lt;/canvas&gt;
+</pre>
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'the-canvas-element.html#the-canvas-element', '&lt;canvas&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'the-canvas-element.html#the-canvas-element', '&lt;canvas&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+<p>{{CompatibilityTable}}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Funktion</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>1.0</td>
+    <td>{{CompatGeckoDesktop("1.8")}}</td>
+    <td>9.0</td>
+    <td><a href="http://www.opera.com/docs/changelogs/windows/900/">9.0</a></td>
+    <td><a href="http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/HTML-canvas-guide/Introduction/Introduction.html">2.0</a></td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Funktion</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>Android</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>{{CompatGeckoMobile("1.8")}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>1.0</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h3 id="Browserspezifische_Hinweise">Browserspezifische Hinweise</h3>
+<h4 id="Firefox_(Gecko)">Firefox (Gecko)</h4>
+<ul>
+ <li>Before Gecko 5.0 {{geckoRelease("5.0")}}, the canvas width and height were signed integers instead of unsigned integers.</li>
+ <li>Prior to Gecko 6.0 {{geckoRelease("6.0")}}, a {{HTMLElement("canvas")}} element with a zero width or height would be rendered as if it had default dimensions.</li>
+ <li>Before Gecko 12.0 {{geckoRelease("12.0")}}, if JavaScript is disabled, the <code>&lt;canvas&gt;</code> element was being rendered instead of showing the fallback content as per the <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html">specification</a>. Now the fallback content is rendered instead.</li>
+</ul>
+<h2 id="See_also">See also</h2>
+<ul>
+ <li><a href="/en-US/docs/HTML/Canvas" title="https://developer.mozilla.org/en-US/docs/HTML/Canvas">MDN canvas portal</a></li>
+ <li>A <a href="/en-US/docs/Canvas_tutorial" title="Canvas tutorial">canvas tutorial</a></li>
+ <li><a href="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html">Canvas cheat sheet</a></li>
+ <li><a href="/en-US/demos/tag/tech:canvas" title="demos/tag/tech:canvas/">Canvas-related demos</a></li>
+</ul>
+<div>
+ {{HTMLRef}}</div>
+<p style="margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; text-indent: 0px;"><span style="font-family: 'Ubuntu'; font-size: 9pt; color: #000000;">{{ languages( { "de": "de/HTML/Element/canvas", "en": "en/HTML/Element/canvas", "es": "es/HTML/Elemento/canvas", "ja": "ja/HTML/Element/canvas", "ko": "ko/HTML/Element/canvas", "nl": "nl/HTML/HTML_Tags/canvas", "pl": "pl/HTML/Element/canvas", "ru": "Ru/HTML/Element/canvas", "zh-cn": "cn/HTML/Element/canvas", "fr": "fr/HTML/Element/canvas" } ) }}</span></p>
diff --git a/files/de/web/html/element/caption/index.html b/files/de/web/html/element/caption/index.html
new file mode 100644
index 0000000000..a259091943
--- /dev/null
+++ b/files/de/web/html/element/caption/index.html
@@ -0,0 +1,151 @@
+---
+title: <caption>
+slug: Web/HTML/Element/caption
+translation_of: Web/HTML/Element/caption
+---
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+
+<p>Das <strong>HTML-Element <code>&lt;caption&gt;</code> </strong>(oder auch HTML-Tabellenüberschrift-Element) stellt den Titel einer Tabelle dar. Somit ist dieses immer das erste untergeordnete Element einer Tabelle ({{HTMLElement("table")}}). Das Layout wird über CSS festegelegt, es ist relativ zur Tabelle.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorie</a></th>
+   <td>Keine</td>
+  </tr>
+  <tr>
+   <th scope="row">erlaubter Inhalt</th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Fließender Inhalt</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Auslassbare Tags</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">erlaubte elterliche Elemente</th>
+   <td>A {{HTMLElement("table")}} element, as its first descendant.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM-Schnittstelle</th>
+   <td>{{domxref("HTMLTableCaptionElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p>Dieses Dokument unterstützt die <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">globalen Attribute</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("align")}} {{deprecatedGeneric('inline','HTML4.01')}} {{obsoleteGeneric('inline','HTML5')}}</dt>
+ <dd>This enumerated attribute indicates how the caption must be aligned with respect to the table. It may have the following values:
+ <ul>
+  <li><code>left</code>, displayed to the left of the table</li>
+  <li><code>top</code>, displayed before the the table</li>
+  <li><code>right</code>, displayed to the right of the table</li>
+  <li><code>bottom</code>, displayed under the table</li>
+ </ul>
+
+ <div class="note"><strong>Usage note: </strong>Do not use this attribute, as it has been deprecated: the {{HTMLElement("caption")}} element should be styled using <a href="/en-US/docs/CSS" title="CSS">CSS</a>. To give a similar effect to the <code>align</code> attribute, use the the <a href="/en-US/docs/CSS" title="CSS">CSS</a> properties {{cssxref("caption-side")}} and {{cssxref("text-align")}}.</div>
+ </dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>Please see the {{HTMLElement("table")}} page for examples on {{HTMLElement("caption")}}</p>
+
+<h2 id="Specifications" name="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'tabular-data.html#the-caption-element', '&lt;caption&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-caption-element', '&lt;caption&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/tables.html#h-11.2.2', '&lt;caption&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Other table-related HTML Elements: {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li>
+ <li>CSS properties that may be specially useful to style the {{HTMLElement("caption")}} element:
+  <ul>
+   <li>{{cssxref("text-align")}}, {{cssxref("caption-side")}}.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/de/web/html/element/center/index.html b/files/de/web/html/element/center/index.html
new file mode 100644
index 0000000000..8697ffe2da
--- /dev/null
+++ b/files/de/web/html/element/center/index.html
@@ -0,0 +1,41 @@
+---
+title: <center>
+slug: Web/HTML/Element/center
+tags:
+  - Deprecated
+  - Element
+  - HTML
+  - Referenz
+  - Web
+translation_of: Web/HTML/Element/center
+---
+<div>
+ {{deprecated_header()}}</div>
+<h2 id="Übersicht">Übersicht</h2>
+<p>Das HTML Center Element (<code>&lt;center&gt;</code>) ist ein <a href="/en-US/docs/HTML/Block-level_elements" title="HTML/Block-level_elements">Block-Level Element</a>, welches Paragraphen oder andere Block-Level Elemente und Inline Elemente enthalten kann. Der gesamte Inhalt des Elements wird horizontal zentriert, innerhalb des übergeordneten Elements (normalerweise das {{HTMLElement("body")}} Element). Dieses Element ist in HTML 4 (und XHTML 1) veraltet und wird nicht mehr angewendet, zu Gunsten der <a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a> {{Cssxref("text-align")}} Eigenschaft, welche auf {{HTMLElement("div")}} Elemente oder individuell auf {{HTMLElement("p")}} Elemente angewendet werden kann.</p>
+<h2 id="DOM_Schnittstelle">DOM Schnittstelle</h2>
+<p>Dieses Element implementiert die {{domxref("HTMLElement")}} Schnittstelle.</p>
+<div class="note">
+ <p><strong>Implementierungs Anmerkung:</strong> Bis einschließlich Gecko 1.9.2, implementiert Firefox die {{domxref("HTMLSpanElement")}} Schnittstelle für dieses Element.</p>
+</div>
+<h2 id="Example_1" name="Example_1">Beispiel 1</h2>
+<pre class="brush: html">&lt;center&gt;Dieser Text wird zentriert.
+&lt;p&gt;Ebenso dieser Paragraph.&lt;/p&gt;&lt;/center&gt;
+</pre>
+<h2 id="Example_2" name="Example_2">Beispiel 2 (CSS Alternative)</h2>
+<pre class="brush: html">&lt;div style="text-align:center"&gt;Dieser Text wird zentriert.
+&lt;p&gt;Ebenso dieser Paragraph.&lt;/p&gt;&lt;/div&gt;
+</pre>
+<h2 id="Example_3" name="Example_3">Beispiel 3 (CSS alternative)</h2>
+<pre class="brush: html">&lt;p style="text-align:center"&gt;Dieser Text wird zentriert.&lt;br&gt;
+Ebenso dieser Paragraph.&lt;/p&gt;
+</pre>
+<h2 id="Notes" name="Notes">Anmerkung</h2>
+<p>Bei Zuweisung der {{Cssxref("text-align")}}<code>:center</code> Eigenschaft zu einem {{HTMLElement("div")}} oder {{HTMLElement("p")}} Element, wird der <em>Inhalt</em> des Elements zentriert, während dessen Größe unverändert bleibt.</p>
+<h2 id="Siehe_auch">Siehe auch</h2>
+<ul>
+ <li>{{Cssxref("text-align")}}</li>
+ <li>{{Cssxref("display")}}</li>
+</ul>
+<div>
+ {{HTMLRef}}</div>
diff --git a/files/de/web/html/element/cite/index.html b/files/de/web/html/element/cite/index.html
new file mode 100644
index 0000000000..6766a93cbe
--- /dev/null
+++ b/files/de/web/html/element/cite/index.html
@@ -0,0 +1,152 @@
+---
+title: <cite>
+slug: Web/HTML/Element/cite
+tags:
+  - Element
+  - HTML
+  - HTML Text-Level Semantik
+  - Referenz
+  - Web
+translation_of: Web/HTML/Element/cite
+---
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Das <strong>HTML <code>&lt;cite&gt;</code> Element</strong> (oder <em>HTML Citation Element</em>) repräsentiert eine Referenz zu einer kreativen Arbeit. Es muss den Titel der Arbeit, den Namen des Autors oder die URL Referenz, welche in abgekürzter Form als Metadaten vorliegen, zusätzlich zur Zitatangabe beinhalten.</p>
+
+<div class="note">
+<p><strong>Hinweis zur Benutzung:</strong></p>
+
+<ul>
+ <li>Eine kreative Arbeit kann ein Buch, eine Skizze, ein Essay, ein Gedicht, ein Ergebnis, ein Song, ein Script, ein Film, eine TV-Show, ein Spiel, eine Skulptur, ein Bild, eine Theaterproduktion, eine Oper, ein Musical, eine Ausstellung, ein Computer-Programm, eine Website, ein Blogpost, ein Kommentar, ein Forumeintrag, ein Tweet, ein schriftliches Statement, usw. sein.</li>
+ <li>Das {{htmlattrxref("cite", "blockquote")}} Attribut innerhalb eines {{HTMLElement("blockquote")}} oder {{HTMLElement("q")}} Elements kann für eine Online-Ressource einer Quelle genutzt werden.</li>
+</ul>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorien</a></th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Fließender Inhalt</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">Formulierungsinhalt</a>, greifbarer Inhalt.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubter Inhalt</th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag Auslassung</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte Elternelemente</th>
+   <td>Jedes Element, dass <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Formulierungsinhalt</a> erlaubt.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM Schnittstelle</th>
+   <td>{{domxref("HTMLElement")}} Bis einschließlich Gecko 1.9.2 (Firefox 4) hat Firefox dieses Element in die {{domxref("HTMLSpanElement")}} Schnittstelle implementiert.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p><span style="line-height: 21px;">Dieses Element schließt nur </span><a href="/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globale Attribute</a> ein.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: html">Mehr Informationen können in &lt;cite&gt;[ISO-0000]&lt;/cite&gt; gefunden werden.</pre>
+
+<p>Der HTML Code liefert folgendes Ergebnis:</p>
+
+<p>Mehr Informationen können in <cite>[ISO-0000]</cite> gefunden werden.</p>
+
+<h2 id="Anmerkungen">Anmerkungen</h2>
+
+<p>Um die standardisierte Kursiv-Darstellung des &lt;cite&gt; Elements zu umgehen, kann die <a href="/en-US/docs/CSS" title="CSS">CSS</a> {{cssxref("font-style")}} Eigenschaft genutzt werden.</p>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-cite-element', '&lt;cite&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-cite-element', '&lt;cite&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '&lt;cite&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Das {{HTMLElement("blockquote")}} Element für lange Zitate.</li>
+ <li>Das {{HTMLElement("q")}} Element für einzeilige Zitate.</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/de/web/html/element/code/index.html b/files/de/web/html/element/code/index.html
new file mode 100644
index 0000000000..9738f9f66a
--- /dev/null
+++ b/files/de/web/html/element/code/index.html
@@ -0,0 +1,147 @@
+---
+title: <code>
+slug: Web/HTML/Element/code
+tags:
+  - Code
+  - Element
+  - HTML
+  - HTML Text-Level Semantik
+  - Referenz
+  - Web
+translation_of: Web/HTML/Element/code
+---
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Das <em>HTML Code Element</em> (<code>&lt;code&gt;</code>) repräsentiert ein Fragment von Computer Code. Standardmäßig wird dieses Element in der Monospace Schriftart des Browsers dargestellt.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorien</a></th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Fließender Inhalt</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">Formulierungsinhalt</a>, fühlbarer Inhalt.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubter Inhalt</th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Formulierungsinhalt</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag Wegfall</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte Elternelemente</th>
+   <td>Jedes Element, das <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Formulierungsinhalt</a> akzeptiert.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM-Schnittstelle</th>
+   <td>{{domxref("HTMLElement")}} bis einschließlich Gecko 1.9.2 (Firefox 4) hat Firefox die {{domxref("HTMLSpanElement")}} Schnittstelle für dieses Element implementiert.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p><span style="line-height: 21px;">Dieses Element schließt nur </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globale Attribute</a><span style="line-height: 21px;"> ein.</span></p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: html">&lt;p&gt;Normaler Text. &lt;code&gt;Das ist Code.&lt;/code&gt; Normaler Text.&lt;/p&gt;
+</pre>
+
+<h3 id="Result" name="Result">Ergebnis</h3>
+
+<p>Normaler Text. <code>Das ist code.</code> Normaler Text.</p>
+
+<h2 id="Anmerkung">Anmerkung</h2>
+
+<p>Für den <code>code</code> Selektor kann eine CSS Regel definiert werden, um die Standard Schriftart des Browsers zu überschreiben. Vom Benutzer gesetzte Einstellungen haben Vorrang vor den CSS spezifischen Einstellungen.</p>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-code-element', '&lt;code&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-code-element', '&lt;code&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '&lt;code&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser-Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funktion</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basis Unterstützung</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funktion</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basis Unterstützung</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{HTMLElement("samp")}}</li>
+ <li>{{HTMLElement("kbd")}}</li>
+ <li>{{HTMLElement("command")}}</li>
+ <li>{{HTMLElement("var")}}</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/de/web/html/element/col/index.html b/files/de/web/html/element/col/index.html
new file mode 100644
index 0000000000..64d9cffcf1
--- /dev/null
+++ b/files/de/web/html/element/col/index.html
@@ -0,0 +1,240 @@
+---
+title: <col>
+slug: Web/HTML/Element/col
+translation_of: Web/HTML/Element/col
+---
+<div> </div>
+
+<div><span id="result_box" lang="de"><span>Das <strong>HTML <code>&lt;col&gt;</code>-Element </strong>definiert eine Spalte innerhalb einer Tabelle und wird zum Definieren einer gemeinsamen Semantik für alle gängigen Zellen verwendet.</span> <span>Es wird allgemein innerhalb eines {{HTMLElement("colgroup")}} -Elements gefunden.</span></span></div>
+
+<div> </div>
+
+<div><span id="result_box" lang="de"><span>Auf dieses Element können CSS-Stilvorschriften für das Design von Spalten angewendet werden, aber nur wenige Attribute wirken sich auf die Spalte aus (siehe die CSS 2.1-Spezifikation für eine Liste).</span></span></div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Inhaltskategorien</a></th>
+   <td>Keine</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubter Inhalt</th>
+   <td>Keiner, es ist ein {{Glossary("empty element")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag-Auslassung</th>
+   <td><span id="result_box" lang="de"><span>Das Start-Tag ist obligatorisch, aber da es sich um ein void-Element handelt, ist die Verwendung eines End-Tags nicht zulässig.</span></span></td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte Elternelemente</th>
+   <td>Nur {{HTMLElement("colgroup")}}<span lang="de"><span>, obwohl es implizit definiert werden kann, da sein Start-Tag nicht obligatorisch ist.</span> <span>Das </span></span> {{HTMLElement("colgroup")}} <span lang="de"><span> darf kein </span></span> {{htmlattrxref("span", "colgroup")}} <span lang="de"><span> - Attribut haben.</span></span></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="short_text" id="result_box" lang="de"><span>Zulässige ARIA-Rollen</span></span></th>
+   <td>Keine</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM Schnittstelle</th>
+   <td>{{domxref("HTMLTableColElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p><span class="short_text" id="result_box" lang="de"><span>Dieses Element enthält die globalen Attribute</span></span></p>
+
+<dl>
+ <dt>{{htmlattrdef("align")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
+ <dd><span id="result_box" lang="de"><span>Dieses Aufzählungsattribut gibt an, wie die horizontale Ausrichtung der einzelnen Spaltenzelleninhalte behandelt wird.</span> <span>Mögliche Werte sind:</span></span>
+ <ul>
+  <li><code>left</code>, <span id="result_box" lang="de"><span>richtet den Inhalt links von der Zelle aus</span></span></li>
+  <li><code>center</code>, <span id="result_box" lang="de"><span>zentriert den Inhalt in der Zelle</span></span></li>
+  <li><code>right</code>, <span id="result_box" lang="de"><span>richtet den Inhalt auf der rechten Seite der Zelle aus</span></span></li>
+  <li><code>justify</code>, <span id="result_box" lang="de"><span>einfügen von Leerzeichen in den Textinhalt, so dass der Inhalt in der Zelle gerechtfertigt ist</span></span></li>
+  <li><code>char</code>, <span id="result_box" lang="de"><span>richtet den Textinhalt auf ein Sonderzeichen mit einem minimalen Offset aus, definiert durch htmlattrxref &lt;char&gt;, &lt;col&gt; und htmlattrxref &lt;charoff&gt;, &lt;col&gt; Attribute ;</span> </span><span class="short_text" id="result_box" lang="de"><span>nicht implementiert</span></span><span lang="de"><span>_inline (2212).</span></span></li>
+ </ul>
+
+ <p><span id="result_box" lang="de"><span>Wenn dieses Attribut nicht gesetzt ist, wird der Wert von </span></span> {{htmlattrxref("align", "colgroup")}} des {{HTMLElement("colgroup")}} <span lang="de"><span>-Elements geerbt, zu dem dieses <code>&lt;col&gt;</code> -Element gehört.</span> <span>Wenn es keine gibt, wird der Wert <code>left</code> angenommen.</span></span></p>
+
+ <div class="note"><strong>Note: </strong><span id="result_box" lang="de"><span>Verwenden Sie dieses Attribut nicht, da es im neuesten Standard veraltet (nicht unterstützt) ist.</span></span>
+
+ <ul>
+  <li> Um den gleichen Effekt zu erzielen wie die Werte <code>left</code>, <code>center</code>, <code>right</code> or <code>justify</code>:
+
+   <ul>
+    <li>Versuchen Sie nicht, die Eigenschaft {{cssxref("text-align")}} in einem Selektor festzulegen, der ein  {{HTMLElement("col")}} enthält. Da {{HTMLElement("td")}} nicht von <code>&lt;col&gt;</code>-Element abhängen, werden sie nicht übernommen..</li>
+    <li>Wenn die Tabelle keines der {{htmlattrxref("colspan", "td")}}-Attribute verwendet, benutzen Sie bitte den <code>td:nth-child(an+b)</code>-CSS-Selektoren. Setzen Sie <code>a</code> auf null und <code>b</code> auf die Position der Tabellenspalte, z.B. <code>td:nth-child(2) { text-align: right; }</code>, um die zweite Zeile rechts auszurichten.</li>
+    <li><span id="result_box" lang="de"><span>Wenn die Tabelle ein Attribut </span></span> {{htmlattrxref("colspan", "td")}} <span lang="de"><span>verwendet, kann der Effekt durch Kombination geeigneter CSS-Attributselektoren wie <code>[colspan = n] </code>erzielt werden, obwohl dies nicht trivial ist.</span></span></li>
+   </ul>
+  </li>
+  <li><span id="result_box" lang="de"><span>Um den gleichen Effekt wie den <code>char</code>-Wert zu erzielen, können Sie in CSS3 den Wert von </span></span> {{htmlattrxref("char", "col")}} <span lang="de"><span>als Wert von </span></span> {{cssxref("text-align")}} <span lang="de"><span> verwenden.</span><span>(Inline nicht implementiert)  .</span></span></li>
+ </ul>
+
+ <ul>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt>
+ <dd><span id="result_box" lang="de"><span>Dieses Attribut definiert die Hintergrundfarbe jeder Zelle der Spalte</span></span>. <span id="result_box" lang="de"><span>Zugelassene Werte sind jeweils einer der 6-stelligen Hexadezimalcodes, wie in</span></span> <a class="external" href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a> definiert wurden, immer mit einem '#' vorangestellt. <span id="result_box" lang="de"><span>Außerdem kann einer der sechzehn vordefinierten Farbstrings verwendet werden:</span></span>
+ <table style="width: 80%;">
+  <tbody>
+   <tr>
+    <td style="background-color: black; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>black</code> = "#000000"</td>
+    <td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>green</code> = "#008000"</td>
+   </tr>
+   <tr>
+    <td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>silver</code> = "#C0C0C0"</td>
+    <td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>lime</code> = "#00FF00"</td>
+   </tr>
+   <tr>
+    <td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>gray</code> = "#808080"</td>
+    <td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>olive</code> = "#808000"</td>
+   </tr>
+   <tr>
+    <td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>white</code> = "#FFFFFF"</td>
+    <td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>yellow</code> = "#FFFF00"</td>
+   </tr>
+   <tr>
+    <td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>maroon</code> = "#800000"</td>
+    <td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>navy</code> = "#000080"</td>
+   </tr>
+   <tr>
+    <td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>red</code> = "#FF0000"</td>
+    <td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>blue</code> = "#0000FF"</td>
+   </tr>
+   <tr>
+    <td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>purple</code> = "#800080"</td>
+    <td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>teal</code> = "#008080"</td>
+   </tr>
+   <tr>
+    <td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>fuchsia</code> = "#FF00FF"</td>
+    <td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>aqua</code> = "#00FFFF"</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note"><span id="result_box" lang="de"><span><u><strong>Hinweis zur Verwendung</strong></u>: Verwenden Sie dieses Attribut nicht, da es nicht standardgemäß ist und nur in einigen Versionen von Microsoft Internet Explorer implementiert ist: Das Element <code>&lt;col&gt;</code> sollte mit CSS formatiert werden.</span> <span>Verwenden Sie die CSS-Eigenschaft </span></span> {{cssxref("background-color")}} <span lang="de"><span> in den relevanten </span></span> {{HTMLElement("td")}}-Elementen<span lang="de"><span>, um einen mit dem <code>bgcolor</code>-Attribut vergleichbaren Effekt zu erzielen.</span></span></div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("char")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
+ <dt> </dt>
+ <dd>
+ <p><span lang="de"><span>Dieses Attribut wird verwendet, um das Zeichen festzulegen, an dem die Zellen in einer Spalte ausgerichtet werden sollen.</span> <span>Typische Werte hierfür sind ein Punkt (.) Beim Ausrichten von Zahlen oder Geldwerten.</span> <span>Wenn </span></span> {{htmlattrxref("align", "col")}} <span lang="de"><span> nicht auf <code>char</code> gesetzt ist, wird dieses Attribut ignoriert</span></span>;</p>
+ </dd>
+ <dd>
+ <div class="note"><span id="result_box" lang="de"><span><u><strong>Anmerkung</strong></u>: Verwenden Sie dieses Attribut nicht, da es im neuesten Standard veraltet (und nicht unterstützt) ist.</span> <span>Um den gleichen Effekt wie bei </span></span> {{htmlattrxref("char", "col")}} <span lang="de"><span> zu erzielen, können Sie in CSS3 den Zeichensatz mit dem </span></span> {{htmlattrxref("char", "col")}} <span lang="de"><span> Attribut als</span> <span>Wert der Eigenschaft </span></span> {{cssxref("text-align")}} <span lang="de"><span> einsetzen.</span></span></div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
+ <dd><span id="result_box" lang="de"><span>Dieses Attribut gibt die Anzahl der Zeichen an, die die Spaltendaten von den vom char-Attribut angegebenen Ausrichtungszeichen versetzen sollen</span></span>
+ <div class="note"><strong><u>Anmerkung</u>: </strong><span id="result_box" lang="de"><span>Verwenden Sie dieses Attribut nicht, da es im aktuellen Standard veraltet (und nicht unterstützt) ist.</span></span></div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("span")}}</dt>
+ <dd><span id="result_box" lang="de"><span>Dieses Attribut enthält eine positive ganze Zahl, die die Anzahl aufeinanderfolgender Spalten angibt, die das <code>&lt;col&gt;</code> -Element überspannt.</span> <span>Wenn nicht vorhanden, ist der Standardwert <code>1</code>.</span></span></dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("valign")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
+ <dd><span id="result_box" lang="de"><span>Dieses Attribut gibt die vertikale Ausrichtung des Texts in jeder Zelle der Spalte an.</span> <span>Mögliche Werte für dieses Attribut sind:</span></span></dd>
+ <dd>
+ <ul>
+  <li><code>baseline</code>, <span id="result_box" lang="de"><span>setzt</span></span><span lang="de"><span> den Text so nahe wie möglich an den unteren Rand der Zelle , richtet ihn aber an der Grundlinie der Zeichen anstatt am unteren Rand aus.</span> <span>Wenn alle Zeichen dieselbe Größe haben, hat dies den gleichen Effekt wie</span></span> <code>bottom</code></li>
+  <li><code>bottom</code>, setzt<span lang="de"><span> den Text so nahe wie möglich an den unteren Rand der Zelle</span></span></li>
+  <li><code>middle</code>, zentriert den Text in der Zelle</li>
+  <li><code>top</code>, <span id="result_box" lang="de"><span>setzt den Text so nahe wie möglich an den oberen Rand der Zelle</span></span></li>
+ </ul>
+
+ <div class="note"><strong><u>Anmerkung</u>: </strong><span id="result_box" lang="de"><span>Verwenden Sie dieses Attribut nicht, da es im neuesten Standard veraltet (und nicht unterstützt) ist:</span></span>
+
+ <ul>
+  <li><span id="result_box" lang="de"><span>Versuchen Sie nicht, die Eigenschaft {{cssxref ("vertical-align")}} in einem Selektor festzulegen, der ein HTMLElement &lt;col&gt; enthält.</span> <span>Da das</span></span> {{HTMLElement("td")}}-Element <span lang="de"><span> nicht vom</span></span> {{HTMLElement("col")}}-Element <span lang="de"><span>abhängt, werden sie nicht vererbt</span></span>.</li>
+  <li><span id="result_box" lang="de"><span>Wenn die Tabelle kein </span></span> {{htmlattrxref("colspan", "td")}}<span lang="de"><span> - Attribut verwendet, verwenden Sie den CSS-Selektor <code>td: nth-child (an + b)</code>, wobei a die Gesamtanzahl der Spalten in der Tabelle ist</span> <span>und b ist die Ordnungsposition der Spalte in der Tabelle.</span> <span>Erst nach diesem Selektor kann die Eigenschaft cssxref </span></span> {{cssxref("vertical-align")}} <span lang="de"><span> verwendet werden.</span></span></li>
+  <li><span id="result_box" lang="de"><span>Wenn die Tabelle ein </span></span> {{htmlattrxref("colspan", "td")}}<span lang="de"><span>- Attribut verwendet, kann der Effekt durch Kombination geeigneter CSS-Attributselektoren wie <code>[colspan = n]</code> erzielt werden, obwohl dies nicht trivial ist.</span></span></li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("width")}} {{obsolete_inline("html5")}}</dt>
+ <dd><span id="result_box" lang="de"><span>Dieses Attribut gibt eine Standardbreite für jede Spalte in der aktuellen Spaltengruppe an.</span> <span>Zusätzlich zu den Standardpixel- und -prozentwerten kann dieses Attribut das Sonderformat <code>0 *</code> annehmen, was bedeutet, dass die Breite jeder Spalte in der Gruppe die minimale Breite sein sollte, die erforderlich ist, um den Inhalt der Spalte aufzunehmen.</span> <span>Relative Breiten wie <code>0,5 *</code> können ebenfalls verwendet werden.</span></span></dd>
+</dl>
+
+<h2 id="Beispiel"><span class="short_text" id="result_box" lang="de"><span>Beispiel</span></span></h2>
+
+<p><span id="result_box" lang="de"><span>Auf der Seite </span></span> {{HTMLElement("table")}} <span lang="de"><span> finden Sie Beispiele für <code>&lt;col&gt;</code>.</span></span></p>
+
+<h2 id="Spezifikationen"><span class="short_text" id="result_box" lang="de"><span>Spezifikationen</span></span></h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'tables.html#the-col-element', '&lt;col&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-col-element', '&lt;col&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/tables.html#h-11.2.4.2', '&lt;col&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Initiale Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<div class="hidden"><span id="result_box" lang="de"><span>Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert.</span> <span>Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte</span></span> <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> <span id="result_box" lang="de"><span>und senden Sie uns eine Pull-Anfrage</span></span>.</div>
+
+<p>{{Compat("html.elements.col")}}</p>
+
+<h2 id="Siehe_auch"><span class="short_text" id="result_box" lang="de"><span>Siehe auch</span></span></h2>
+
+<ul>
+ <li><span id="result_box" lang="de"><span>Andere tabellenbezogene HTML-Elemente: </span></span> {{HTMLElement("caption")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li>
+ <li><span id="result_box" lang="de"><span>CSS-Eigenschaften und Pseudoklassen, die besonders nützlich sein können, um das <code>&lt;col&gt;</code> -Element zu formatieren:</span></span>
+  <ul>
+   <li><span id="result_box" lang="de"><span>Die Eigenschaft </span></span> {{cssxref("width")}} <span lang="de"><span>, um die Breite der Spalte zu steuern;</span></span></li>
+   <li><span id="result_box" lang="de"><span>Die Pseudoklasse </span></span> {{cssxref(":nth-child")}} <span lang="de"><span>, um die Ausrichtung auf die Zellen der Spalte festzulegen;</span></span></li>
+   <li><span id="result_box" lang="de"><span>Die </span></span> {{cssxref("text-align")}} <span lang="de"><span> -Eigenschaft, um den Inhalt aller Zellen auf dasselbe Zeichen wie '.'.</span></span></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/de/web/html/element/data/index.html b/files/de/web/html/element/data/index.html
new file mode 100644
index 0000000000..49f4d271b0
--- /dev/null
+++ b/files/de/web/html/element/data/index.html
@@ -0,0 +1,90 @@
+---
+title: <data>
+slug: Web/HTML/Element/data
+translation_of: Web/HTML/Element/data
+---
+<p><span id="result_box" lang="de"><span>Das HTML &lt;data&gt; -Element verknüpft einen gegebenen Inhalt mit einer maschinenlesbaren Übersetzung.</span> <span>Wenn der Inhalt zeit- oder datumsbezogen ist, muss das Element HTMLElement &lt;time&gt; verwendet werden.</span></span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Inhaltsverzeichnis</th>
+   <td>fließender Inhalt, gestaltender Inhalt, eindeutiger Inhalt.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubter Inhalt</th>
+   <td>gestaltender Inhalt.</td>
+  </tr>
+  <tr>
+   <th scope="row">Schlagwort Wegfall</th>
+   <td>Keiner</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte Eltern</th>
+   <td>Alle Elemente die ein gestaltenden Inhalt haben.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>domxref("HTMLDataElement")</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes">Attributes</h2>
+
+<p><span id="result_box" lang="de"><span>Die Attribute dieses Elements enthalten die globalen Attribute.</span></span></p>
+
+<dl>
+ <dt>htmlattrdef("value")</dt>
+ <dd><span id="result_box" lang="de"><span>Dieses Attribut gibt die maschinenlesbare Übersetzung des Inhalts des Elements an.</span></span></dd>
+</dl>
+
+<h2 id="Beispiel"><span class="short_text" id="result_box" lang="de"><span>Beispiel</span></span></h2>
+
+<p><span id="result_box" lang="de"><span>Das folgende Beispiel zeigt Produktnamen an, ordnet jedoch jedem Namen eine Produktnummer zu.</span></span></p>
+
+<pre class="brush: html">&lt;p&gt;New Products&lt;/p&gt;
+&lt;ul&gt;
+ &lt;li&gt;&lt;data value="398"&gt;Mini Ketchup&lt;/data&gt;&lt;/li&gt;
+ &lt;li&gt;&lt;data value="399"&gt;Jumbo Ketchup&lt;/data&gt;&lt;/li&gt;
+ &lt;li&gt;&lt;data value="400"&gt;Mega Jumbo Ketchup&lt;/data&gt;&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h2 id="Spezifikationen"><span class="short_text" id="result_box" lang="de"><span>Spezifikationen</span></span></h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>SpecName('HTML WHATWG', 'semantics.html#the-data-element', '&lt;data&gt;')</td>
+   <td>Spec2('HTML WHATWG')</td>
+   <td>No change from SpecName('HTML5 W3C')</td>
+  </tr>
+  <tr>
+   <td>SpecName('HTML5 W3C', 'text-level-semantics.html#the-data-element', '&lt;data&gt;')</td>
+   <td>Spec2('HTML5 W3C')</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden"><span id="result_box" lang="de"><span>Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert.</span> <span>Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte https://github.com/mdn/browser-compat-data und senden Sie uns eine Pull-Anfrage.</span></span></div>
+
+<p>Compat("html.elements.data")</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The HTML HTMLElement &lt;time&gt; element.</li>
+</ul>
+
+<p>HTMLRef</p>
diff --git a/files/de/web/html/element/datalist/index.html b/files/de/web/html/element/datalist/index.html
new file mode 100644
index 0000000000..ebb2ea5cbf
--- /dev/null
+++ b/files/de/web/html/element/datalist/index.html
@@ -0,0 +1,106 @@
+---
+title: <datalist>
+slug: Web/HTML/Element/datalist
+tags:
+  - HTML
+  - HTML Formulare
+  - HTML5
+  - Referenz
+  - Web
+translation_of: Web/HTML/Element/datalist
+---
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+
+<p>Das <strong>HTML <span style="font-family: courier new;">&lt;datalist&gt;</span> Element</strong> enthält eine Liste von {{HTMLElement("option")}} Elementen, die mögliche Optionen für den Wert eines anderen Elementes repräsentieren.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/de/docs/HTML/Content_categories" title="HTML/Inhaltskategorien">Inhaltskategorien</a></th>
+   <td><a href="/de/docs/HTML/Content_categories#Flow_content" title="HTML/Inhaltskategorien#Flussinhalt">Flussinhalt</a>, <a href="/de/docs/HTML/Content_categories#Phrasing_content" title="HTML/Inhaltskategorien#Textinhalt">Textinhalt</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubter Inhalt</th>
+   <td>Entweder <a href="/de/docs/HTML/Content_categories#Phrasing_content" title="HTML/Inhaltskategorien#Textinhalt">Textinhalt</a> oder null oder mehr {{HTMLElement("option")}} Elemente.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag-Auslassung</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte Eltern-Elemente</th>
+   <td>Alle Elemente, die <a href="/de/docs/HTML/Content_categories#Phrasing_content" title="HTML/Inhaltskategorien#Textinhalt">Textinhalt</a> akzeptieren.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM-interface</th>
+   <td>{{domxref("HTMLDataListElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p><span style="line-height: 21px;">Dieses Element verfügt nur über die </span><a href="https://developer.mozilla.org/de/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Globale Attribute">globalen Attribute</a><span style="line-height: 21px;">.</span></p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: html">&lt;label for="myBrowser"&gt;Gib einen Browsernamen ein:&lt;/label&gt;
+&lt;input list="browsers" id="myBrowser" name="myBrowser" /&gt;
+&lt;datalist id="browsers"&gt;
+  &lt;option value="Chrome"&gt;
+  &lt;option value="Firefox"&gt;
+  &lt;option value="Internet Explorer"&gt;
+  &lt;option value="Opera"&gt;
+  &lt;option value="Safari"&gt;
+&lt;/datalist&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Beispiele")}}</p>
+
+<p>Dieses HTML wird in Firefox 4 folgendermaßen gerendert:</p>
+
+<p><img alt="datalist.png" class="default internal" src="/@api/deki/files/4982/=datalist.png"></p>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-datalist-element', '&lt;datalist&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'the-datalist-element.html#the-datalist-element', '&lt;datalist&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+
+
+<p>{{Compat("html.elements.datalist")}}</p>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Der folgende Polyfill wurde für den Support für ältere oder derzeit noch inkompatible Browser entwickelt:<br>
+ <a href="https://github.com/mfranzke/datalist-polyfill">datalist-polyfill</a></p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li class="last">Das {{HTMLElement("input")}} Element, und noch genauer sein {{htmlattrxref("list", "input")}} Attribut;</li>
+ <li class="last">Das {{HTMLElement("option")}} Element.</li>
+</ul>
+
+<p class="last">{{HTMLRef}}</p>
diff --git a/files/de/web/html/element/dd/index.html b/files/de/web/html/element/dd/index.html
new file mode 100644
index 0000000000..503b72751a
--- /dev/null
+++ b/files/de/web/html/element/dd/index.html
@@ -0,0 +1,140 @@
+---
+title: <dd>
+slug: Web/HTML/Element/dd
+tags:
+  - Element
+  - HTML
+  - HTML Gruppierungsinhalt
+  - Referenz
+  - Web
+translation_of: Web/HTML/Element/dd
+---
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Das <strong>HTML <code>&lt;dd&gt;</code> Element</strong> (oder <em>HTML Description Element</em>) indiziert die Beschreibung eines Begriffes innerhalb einer Description List ({{HTMLElement("dl")}} Element). Dieses Element kann nur als Kindelement auftreten und muss einem {{HTMLElement("dt")}} Element folgen.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorien</a></th>
+   <td>Keine.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubter Inhalt</th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">Fließender Inhalt</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag Auslassung</th>
+   <td>Muss ein Start-Tag haben. Das End-Tag kann ausgelassen werden, wenn es direkt von einem <code>&lt;dd&gt;</code> Element gefolgt wird oder es keinen Inhalt im Elternelement mehr gibt.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte Elternelemente</th>
+   <td>Nach einem {{HTMLElement("dt")}} Element oder einem <code>&lt;dl&gt;</code> Element, innerhalb eines {{HTMLElement("dl")}} Elements.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM Schnittstelle</th>
+   <td>{{domxref("HTMLElement")}} Bis einschließlich Gecko 1.9.2 (Firefox 4) hat Firefox die <a href="/en-US/docs/DOM/span" title="DOM/span"><span style="font-family: courier new;">HTMLSpanElement</span></a> Schnittstelle für dieses Element implementiert.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p><span style="line-height: 21px;">Dieses Element schließt </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globale Attribute</a><span style="line-height: 21px;"> ein.</span></p>
+
+<dl>
+ <dt>{{htmlattrdef("nowrap")}} {{Non-standard_inline}}</dt>
+ <dd>Wenn der Wert dieses Attributs auf <code>yes</code> steht, wird der Definitionstext nicht umbrechen. Der Standardwert für dieses Attribut lautet <code>no</code>.</dd>
+</dl>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Siehe <a href="/en-US/docs/HTML/Element/dl#examples" title="HTML/Element/dl#examples">&lt;dl&gt; Beispiele</a>.</p>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-dd-element', '&lt;dd&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dd-element', '&lt;dd&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '&lt;dd&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{HTMLELement("dl")}} Element</li>
+ <li>{{HTMLElement("dt")}} Element</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/de/web/html/element/del/index.html b/files/de/web/html/element/del/index.html
new file mode 100644
index 0000000000..37a96da6df
--- /dev/null
+++ b/files/de/web/html/element/del/index.html
@@ -0,0 +1,124 @@
+---
+title: <del>
+slug: Web/HTML/Element/del
+tags:
+  - Element
+  - HTML
+  - HTML edits
+  - Referenz
+  - Web
+translation_of: Web/HTML/Element/del
+---
+<div>{{HTMLRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Das <strong>HTML <code>&lt;del&gt; E</code>lement</strong> (oder <em>HTML Deleted Text Element</em>) repräsentiert eine Textmenge, die aus einem Dokument gelöscht wurde. Dieses Element wird oftmals als durchgestrichener Text dargestellt.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorien</a></th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">Formulierungsinhalt</a> oder <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">fließender Inhalt</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubter Inhalt</th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Transparent" title="HTML/Content categories#Transparent">Transparent</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag Auslassung</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte Elternelemente</th>
+   <td>Jedes Element, dass <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Formulierungsinhalt</a> erlaubt.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM Schnittstelle</th>
+   <td>{{domxref("HTMLModElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p><span style="line-height: 21px;">Dieses Element schließt </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globale Attribute</a><span style="line-height: 21px;"> ein.</span></p>
+
+<dl>
+ <dt>{{htmlattrdef("cite")}}</dt>
+ <dd>Eine URI als Quelle, die erläutert, warum der Text geändert wurde.</dd>
+ <dt>{{htmlattrdef("datetime")}}</dt>
+ <dd>Dieses Attribut indiziert das Datum und die Uhrzeit, wann der Text geändert wurde und muss ein <a class="external" href="http://www.w3.org/TR/html5/common-microsyntaxes.html#valid-date-string-with-optional-time" title="http://www.w3.org/TR/html5/common-microsyntaxes.html#valid-date-string-with-optional-time">gültiges Datum mit optionaler Uhrzeitangabe</a> sein. Wenn der Wert nicht als Datum mit optionaler Zeitangabe erkannt werden kann, hat dieses Element keinen Bezug zur Zeit.</dd>
+</dl>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: html">&lt;p&gt;&lt;del&gt;Dieser Text wurde gelöscht.&lt;/del&gt;&lt;/p&gt;</pre>
+
+<h3 id="Ergebnis">Ergebnis</h3>
+
+<div><del>Dieser Text wurde gelöscht.</del></div>
+
+<h2 id="Specifications" name="Specifications"> </h2>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'edits.html#the-del-element', '&lt;del&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'edits.html#the-del-element', '&lt;del&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.4', '&lt;del&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{HTMLElement("ins")}} Element für das Einfügen in einen Text.</li>
+</ul>
diff --git a/files/de/web/html/element/details/index.html b/files/de/web/html/element/details/index.html
new file mode 100644
index 0000000000..9f8786b656
--- /dev/null
+++ b/files/de/web/html/element/details/index.html
@@ -0,0 +1,97 @@
+---
+title: <details>
+slug: Web/HTML/Element/details
+tags:
+  - Element
+  - HTML
+  - HTML interactive Elemente
+  - HTML5
+  - Referenz
+  - Web
+translation_of: Web/HTML/Element/details
+---
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Das <strong>HTML <code>&lt;details&gt; </code>Element</strong> wird genutzt für Auskünfte, damit Benutzer zusätzliche Informationen erhalten können.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Inhaltskategorien</a></th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Fließender Inhalt</a>, Sektionsursprung, interaktiver Inhalt, greifbarer Inhalt.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubter Inhalt</th>
+   <td>Ein {{HTMLElement("summary")}} Element gefolgt von <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">fließenden Inhalt</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag Auslassung</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte Elternelemente</th>
+   <td>Jedes Element, dass <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">fließenden Inhalt</a> erlaubt.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM Schnittstelle</th>
+   <td>{{domxref("HTMLDetailsElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p>Dieses Element schließt <a href="/en-US/docs/Web/HTML/Global_attributes">globale Attribute</a> ein.</p>
+
+<dl>
+ <dt>{{htmlattrdef("open")}}</dt>
+ <dd>Dieses Boolesche Attribut indiziert, ob die Details dem Benutzer beim Laden der Seite angezeigt werden. Standardmäßig steht dieser Wert auf 'false', sodass die Details versteckt sind.</dd>
+</dl>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: html">&lt;details&gt;
+  &lt;summary&gt;Some details&lt;/summary&gt;
+  &lt;p&gt;More info about the details.&lt;/p&gt;
+&lt;/details&gt;
+</pre>
+
+<h3 id="Live_Beispiel">Live Beispiel</h3>
+
+<p>{{EmbedLiveSample("Beispiel")}}</p>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'interactive-elements.html#the-details-element', '&lt;details&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'the-details-element.html#the-details-element', '&lt;details&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{Compat("html.elements.details")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{HTMLElement("summary")}} Element</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/de/web/html/element/dialog/index.html b/files/de/web/html/element/dialog/index.html
new file mode 100644
index 0000000000..d08899bdad
--- /dev/null
+++ b/files/de/web/html/element/dialog/index.html
@@ -0,0 +1,206 @@
+---
+title: <dialog>
+slug: Web/HTML/Element/dialog
+tags:
+  - Dialog
+  - Element
+  - Experimentell
+  - HTML
+  - HTML interaktive Elemente
+  - Referenz
+  - Web
+translation_of: Web/HTML/Element/dialog
+---
+<p>{{ SeeCompatTable() }}</p>
+
+<h2 id="Summary" name="Summary">Zusammenfassung</h2>
+
+<p>Das <strong>HTML <code>&lt;dialog&gt;</code> element</strong> stellte einen Dialog oder eine andere interaktive Komponente, so wie ein Fenster oder Unterfenster, dar. <code>&lt;form&gt;</code> Elemente können in einen Dialog Integriert werden in dem sie mit dem Attribut <code>method="dialog"</code> angegeben werden. Wenn eine solches Formular übertragen (submit) wird, wird der Dialog mit dem Rückgabewert (<code>returnValue</code> ) des <code>value</code> Attributes  am benutzten Submit Button geschlossen.</p>
+
+<p>Das {{cssxref('::backdrop')}} CSS pseudo-element kann benutzt werden um Elemente hinter dem <code>&lt;dialog&gt;</code> Element zu verändern; So kann beispielsweise der Hintergrund abgedunkelt werden.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Content categories</a></th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document#Sectioning_roots">sectioning root</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted content</th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th>Permitted parent elements</th>
+   <td>Jedes Element, das <a href="/en-US/docs/HTML/Content_categories#Flow_content">flow content</a> akzeptiert</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLDialogElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes" name="Attributes">Attribute</h2>
+
+<p>An diesem Element können die <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">Globalen Attribute</a> verwendet werden. Das <code>tabindex</code> Attribut darf am <code>&lt;dialog&gt;</code> Element nicht benutzt werden.</p>
+
+<dl>
+ <dt>{{htmlattrdef("open")}}</dt>
+ <dd>Der Dialog ist nach dem Laden des Dokumentes bereits geöffnet und aktiv. Ist das Attribut nicht gesetzt, so wird der Dialog nicht angezeigt.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<h3 id="Beispiel_1">Beispiel 1</h3>
+
+<pre class="brush: html">&lt;dialog open&gt;
+  &lt;p&gt;Greetings, one and all!&lt;/p&gt;
+&lt;/dialog&gt;
+</pre>
+
+<h3 id="Beispiel_2">Beispiel 2</h3>
+
+<pre class="brush: html">&lt;!-- Simple pop-up dialog box, containing a form --&gt;
+&lt;dialog id="favDialog"&gt;
+  &lt;form method="dialog"&gt;
+    &lt;section&gt;
+      &lt;p&gt;&lt;label for="favAnimal"&gt;Favorite animal:&lt;/label&gt;
+      &lt;select id="favAnimal" name="favAnimal"&gt;
+        &lt;option&gt;&lt;/option&gt;
+        &lt;option&gt;Brine shrimp&lt;/option&gt;
+        &lt;option&gt;Red panda&lt;/option&gt;
+        &lt;option&gt;Spider monkey&lt;/option&gt;
+      &lt;/select&gt;&lt;/p&gt;
+    &lt;/section&gt;
+    &lt;menu&gt;
+      &lt;button id="cancel" type="reset"&gt;Cancel&lt;/button&gt;
+      &lt;button type="submit"&gt;Confirm&lt;/button&gt;
+    &lt;/menu&gt;
+  &lt;/form&gt;
+&lt;/dialog&gt;
+
+&lt;menu&gt;
+  &lt;button id="updateDetails"&gt;Update details&lt;/button&gt;
+&lt;/menu&gt;
+
+&lt;script&gt;
+  (function() {
+    var updateButton = document.getElementById('updateDetails');
+    var cancelButton = document.getElementById('cancel');
+    var favDialog = document.getElementById('favDialog');
+
+    // Update button opens a modal dialog
+    updateButton.addEventListener('click', function() {
+      favDialog.showModal();
+    });
+
+    // Form cancel button closes the dialog box
+    cancelButton.addEventListener('click', function() {
+      favDialog.close();
+    });
+
+  })();
+&lt;/script&gt;
+</pre>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#the-dialog-element', '&lt;dialog&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'interactive-elements.html#the-dialog-element', '&lt;dialog&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>37</td>
+   <td>{{CompatNo()}} {{bug(840640)}}</td>
+   <td>{{CompatNo()}}</td>
+   <td>24</td>
+   <td>{{CompatNo()}}</td>
+  </tr>
+  <tr>
+   <td>Anchor points</td>
+   <td>{{CompatNo()}}</td>
+   <td>{{CompatNo()}}</td>
+   <td>{{CompatNo()}}</td>
+   <td>{{CompatNo()}}</td>
+   <td>{{CompatNo()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>Android Browser 37</td>
+   <td>{{CompatNo()}}</td>
+   <td>{{CompatNo()}}</td>
+   <td>{{CompatNo()}}</td>
+   <td>{{CompatNo()}}</td>
+  </tr>
+  <tr>
+   <td>Anchor points</td>
+   <td>{{CompatNo()}}</td>
+   <td>{{CompatNo()}}</td>
+   <td>{{CompatNo()}}</td>
+   <td>{{CompatNo()}}</td>
+   <td>{{CompatNo()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_Auch">Siehe Auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Forms" title="/en-US/docs/Web/Guide/HTML/Forms">HTML forms guide</a>.</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/de/web/html/element/dir/index.html b/files/de/web/html/element/dir/index.html
new file mode 100644
index 0000000000..092f9b8a4c
--- /dev/null
+++ b/files/de/web/html/element/dir/index.html
@@ -0,0 +1,44 @@
+---
+title: <dir>
+slug: Web/HTML/Element/dir
+tags:
+  - Element
+  - HTML
+  - Obsolete
+  - Referenz
+  - Web
+translation_of: Web/HTML/Element/dir
+---
+<div>
+ {{Obsolete_header()}}</div>
+<h2 id="Übersicht">Übersicht</h2>
+<p>Das <em>HTML directory Element</em> (<code>&lt;dir&gt;</code>) repräsentiert ein Verzeichnis, namentlich eine Sammlung von Dateinamen.</p>
+<div class="note">
+ <strong>Hinweis zur Benutzung: </strong>Dieses Element sollte nicht mehr verwendet werden. In den frühen HTML Spezifikationen, genauer gesagt seit HTML4, ist dieses Element veraltet und in <a href="/en-US/docs/Web/Guide/HTML/HTML5" title="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a> somit obsolet. Es sollte das {{HTMLElement("ul")}} Element stattdessen verwendet werden.</div>
+<h2 id="DOM_Schnittstelle">DOM Schnittstelle</h2>
+<p>Dieses Element implementiert die {[domxref("HTMLDirectoryElement")}} Schnittstelle.</p>
+<h2 id="Attribute">Attribute</h2>
+<p>Dieses Element schließt <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">globale Attribute</a> ein.</p>
+<dl>
+ <dt>
+  {{htmlattrdef("compact")}}</dt>
+ <dd>
+  Dieses Boolesche Attribut verweist darauf, ob die angezeigte Liste kompakt dargestellt werden soll. Die Interpretation dieses Attributs ist abhängig vom sogenannten User Agent und funktioniert nicht in allen Browsern.<br>
+  <div class="note">
+   <strong>Hinweis zur Benutzung: </strong>Dieses Attribut sollte nicht mehr verwendet werden, seit dem es veraltet ist. Das {{HTMLElement("dir")}} Element sollte mit Hilfe von <a href="/en-US/docs/CSS" title="CSS">CSS</a> designt werden. Um einen ähnlichen Effekt wie das <code>compact</code> Attribut zu erreichen, kann die <a href="/en-US/docs/CSS" title="CSS">CSS</a> Eigenschaft {{cssxref("line-height")}} mit einem Wert von <code>80%</code> genutzt werden.</div>
+ </dd>
+</dl>
+<h2 id="Siehe_auch">Siehe auch</h2>
+<ul>
+ <li>Andere Listen-basierte HTML Elemente: {{HTMLElement("ol")}}, {{HTMLElement("ul")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}};</li>
+ <li>CSS Eigenschaft die besonders wertvoll sein könnten, um das <code>&lt;dir&gt;</code> Element zu stylen:
+  <ul>
+   <li>Die {{cssxref('list-style')}} Eigenschaft, nützlich um die Art des Ranks darzustellen.</li>
+   <li><a href="/en-US/docs/CSS_Counters" title="CSS_Counters">CSS counters</a>, nützlich um mit komplexen verschachtelten Listen zu arbeiten.</li>
+   <li>Die {{Cssxref('line-height')}} Eigenschaft, nützlich um das {{htmlattrxref("compact", "dir")}} Attribut zu imitieren.</li>
+   <li>Die {{cssxref('margin')}} Eigenschaft, nützlich um die Einrückung zu kontrollieren.</li>
+  </ul>
+ </li>
+</ul>
+<div>
+ {{HTMLRef}}</div>
diff --git a/files/de/web/html/element/div/index.html b/files/de/web/html/element/div/index.html
new file mode 100644
index 0000000000..b56ea2b22c
--- /dev/null
+++ b/files/de/web/html/element/div/index.html
@@ -0,0 +1,117 @@
+---
+title: <div>
+slug: Web/HTML/Element/div
+tags:
+  - Element
+  - HTML
+  - HTML Gruppierungsinhalt
+  - 'HTML:Flow content'
+  - Referenz
+  - Web
+translation_of: Web/HTML/Element/div
+---
+<div>{{HTMLRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Das <a href="/de/docs/Web/HTML">HTML</a>-Element<strong> <code>&lt;div&gt;</code></strong> (Englisch: <em>HTML Document Division Element</em>) ist ein allgemeiner Container für fließenden Inhalt, dem keine semantische Bedeutung zugeordnet wird.</p>
+
+<p>Der wesentliche Unterschied zwischen <code>&lt;div&gt;</code> und anderen Block-Elementen wie beispielsweise {{HTMLElement("article")}} oder {{HTMLElement("p")}} ist die semantische Bedeutung bzw. das Fehlen dieser. Während <code>&lt;article&gt;</code> einen Artikel, einen eigenständigen Bereich eines Dokuments darstellt und <code>&lt;p&gt;</code> einen Textabsatz, gibt <code>&lt;div&gt;</code> seinem Inhalt keine Bedeutung.<br>
+ <code>&lt;div&gt;</code> sollte deshalb nur genutzt werden, falls kein anderes Block-Element eine zutreffendere Aussage macht.</p>
+
+<p>Der Einsatzbereich von <code>&lt;div&gt;</code> ist die Gruppierung von Elementen alleine zum Zweck der Gestaltung oder des programmatischen Zugriffs (mit Hilfe des <strong>class</strong>- oder <strong>id</strong>-Attributs), oder weil sie die gleichen Attribut-Werte besitzen, wie zum Beispiel das Attribut <strong>lang</strong>.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorien</a></th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Fließender Inhalt</a>, greifbarer Inhalt.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubter Inhalt</th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Fließender Inhalt</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag Auslassung</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte Elternelemente</th>
+   <td>Jedes Element, dass <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">fließenden Inhalt</a> erlaubt.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM-Schnittstelle</th>
+   <td>{{domxref("HTMLDivElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p>Dieses Element unterstützt nur die <a href="/en-US/docs/Web/HTML/Global_attributes">globalen Attribute</a>, insbesondere {{htmlattrxref("class")}} und {{htmlattrxref("id")}}.</p>
+
+<p>{{HTMLVersionInline(5)}} {{obsolete_inline}} Das <strong>align</strong>-Attribut ist für <code>&lt;div&gt;</code>-Elemente nicht mehr zulässig.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="beispiel"&gt;
+  &lt;p&gt;Dies ist ein sehr interessanter Hinweis
+     in einem hübsch dekorierten Kasten.
+  &lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.beispiel {
+  width: 15em;
+  border: 1px solid #333;
+  box-shadow: 8px 8px 5px #444;
+  padding: 8px 12px;
+  background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
+}</pre>
+
+<h3 id="Ergebnis">Ergebnis</h3>
+
+<p>{{EmbedLiveSample("Beispiel", 650, 60)}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-div-element', '&lt;div&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-div-element', '&lt;div&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.4', '&lt;div&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Semantische Sektionselemente: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}</li>
+ <li>{{HTMLElement("span")}} Element für die Darstellung von Formulierungsinhalten</li>
+</ul>
diff --git a/files/de/web/html/element/dl/index.html b/files/de/web/html/element/dl/index.html
new file mode 100644
index 0000000000..7145a49a1d
--- /dev/null
+++ b/files/de/web/html/element/dl/index.html
@@ -0,0 +1,222 @@
+---
+title: <dl>
+slug: Web/HTML/Element/dl
+tags:
+  - Element
+  - HTML
+  - HTML Gruppierungsinhalt
+  - Referenz
+  - Web
+translation_of: Web/HTML/Element/dl
+---
+<p>Das <strong>HTML <code>&lt;dl&gt;</code> Element</strong> (oder <em>HTML</em> <em>Description List Element</em>) umfasst eine Liste von Begriffspaaren und Beschreibungen. Üblicherweise wird das Element zur Implementierung eines Glossars oder zur Anzeige von Metadaten (eine Liste von Schlüsselwertpaaren) genutzt.</p>
+
+<p>Vor HTML5, war &lt;dl&gt; bekannt als Definition List.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorien</a></th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Fließender Inhalt</a>, wenn das <code>&lt;dl&gt;</code> Elementkind nur ein Wertepaar beinhaltet, dann greifbarer Inhalt.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubter Inhalt</th>
+   <td>Null oder mehr {{HTMLElement("dt")}} Elemente, jedes gefolgt von einem oder mehreren {{HTMLElement("dd")}} Elementen.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag Auslassung</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte Elternelemente</th>
+   <td>Jedes Element, das <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">fließenden Inhalt</a> erlaubt.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM Schnittstelle</th>
+   <td>{{domxref("HTMLDListElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p><span style="line-height: 21px;">Dieses Element schließt </span><a href="/de/docs/Web/HTML/Globale_Attribute" style="line-height: 21px;" title="HTML/Global attributes">globale Attribute</a><span style="line-height: 21px;"> ein.</span></p>
+
+<dl>
+ <dt>{{htmlattrdef("compact")}} {{Non-standard_inline}}</dt>
+ <dd>Zwingt die Beschreibung dazu, in derselben Linie zu erscheinen wie der Begriff. Dieses Attribut wird aktuell nicht unterstützt.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einzelbegriff_und_Beschreibung">Einzelbegriff und Beschreibung</h3>
+
+<pre class="brush: html">&lt;dl&gt;
+  &lt;dt&gt;Firefox&lt;/dt&gt;
+  &lt;dd&gt;A free, open source, cross-platform, graphical web browser
+      developed by the Mozilla Corporation and hundreds of volunteers.&lt;/dd&gt;
+
+  &lt;!-- other terms and definitions --&gt;
+&lt;/dl&gt;
+</pre>
+
+<p>Ausgabe:</p>
+
+<p><img alt="Image:HTML-dl1.png" src="/@api/deki/files/241/=HTML-dl1.png"></p>
+
+<h3 id="Multiple_Begriffe_einzelne_Beschreibung">Multiple Begriffe, einzelne Beschreibung</h3>
+
+<pre class="brush: html">&lt;dl&gt;
+  &lt;dt&gt;Firefox&lt;/dt&gt;
+  &lt;dt&gt;Mozilla Firefox&lt;/dt&gt;
+  &lt;dt&gt;Fx&lt;/dt&gt;
+  &lt;dd&gt;A free, open source, cross-platform, graphical web browser
+      developed by the Mozilla Corporation and hundreds of volunteers.&lt;/dd&gt;
+
+  &lt;!-- other terms and definitions --&gt;
+&lt;/dl&gt;
+</pre>
+
+<p>Ausgabe:</p>
+
+<p><img alt="Image:HTML-dl2.png" src="/@api/deki/files/242/=HTML-dl2.png"></p>
+
+<h3 id="Einzelbegriff_multiple_Beschreibungen">Einzelbegriff, multiple Beschreibungen</h3>
+
+<pre class="brush: html">&lt;dl&gt;
+  &lt;dt&gt;Firefox&lt;/dt&gt;
+  &lt;dd&gt;A free, open source, cross-platform, graphical web browser
+      developed by the Mozilla Corporation and hundreds of volunteers.&lt;/dd&gt;
+  &lt;dd&gt;The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox,
+      is a mostly herbivorous mammal, slightly larger than a domestic cat
+      (60 cm long).&lt;/dd&gt;
+
+  &lt;!-- other terms and definitions --&gt;
+&lt;/dl&gt;
+</pre>
+
+<p>Ausgabe:</p>
+
+<p><img alt="Image:HTML-dl3.png" src="/@api/deki/files/243/=HTML-dl3.png"></p>
+
+<h3 id="Multiple_Begriffe_und_Beschreibungen">Multiple Begriffe und Beschreibungen</h3>
+
+<p>Es ist ebenfalls möglich, multiple Begriffe und Beschreibungen zu definieren, wenn man die oberen Beispiele kombiniert.</p>
+
+<h3 id="Metadata">Metadata</h3>
+
+<p>Description Lists sind nützlich um Metadaten als Wertepaar-Listen anzuzeigen.</p>
+
+<pre>&lt;dl&gt;
+    &lt;dt&gt;Name&lt;/dt&gt;
+    &lt;dd&gt;Godzilla&lt;/dd&gt;
+    &lt;dt&gt;Born&lt;/dt&gt;
+    &lt;dd&gt;1952&lt;/dd&gt;
+    &lt;dt&gt;Birthplace&lt;/dt&gt;
+    &lt;dd&gt;Japan&lt;/dd&gt;
+    &lt;dt&gt;Color&lt;/dt&gt;
+    &lt;dd&gt;Green&lt;/dd&gt;
+&lt;/dl&gt;
+</pre>
+
+<p>Tipp: Es kann hilfreich sein, Separatoren für Schlüsselwerte in CSS3 zu definieren, wie zum Beispiel:</p>
+
+<div>
+<pre class="brush: css">dt:after {
+  content: ": ";
+}</pre>
+</div>
+
+<h2 id="Anmerkungen">Anmerkungen</h2>
+
+<p>Weder dieses Element, noch das {{HTMLElement("ul")}} Element, sollten genutzt werden, um bloß eine Einrückung vorzunehmen. Es funktioniert zwar, wird in der Praxis jedoch nicht angewendet und verfehlt die Definition einer Description List.</p>
+
+<p>Um die Einrückung eines Begriffs zu ändern, sollte die <a href="/de/docs/Web/CSS" title="CSS">CSS</a> {{cssxref("margin")}} Eigenschaft genutzt werden.</p>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-dl-element', '&lt;dl&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dl-element', '&lt;dl&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '&lt;dl&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{HTMLElement("dt")}} Element</li>
+ <li>{{HTMLElement("dd")}} Element</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/de/web/html/element/dt/index.html b/files/de/web/html/element/dt/index.html
new file mode 100644
index 0000000000..769ab49a25
--- /dev/null
+++ b/files/de/web/html/element/dt/index.html
@@ -0,0 +1,135 @@
+---
+title: <dt>
+slug: Web/HTML/Element/dt
+tags:
+  - Element
+  - HTML
+  - HTML Gruppierungsinhalt
+  - Referenz
+  - Web
+translation_of: Web/HTML/Element/dt
+---
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Das <strong>HTML <code>&lt;dt&gt;</code> Element</strong> (oder HTML Definition Term Element) identifiziert einen Begriff in einer Definitionsliste. Dieses Element kann nur als Kindelement eines {{HTMLElement("dl")}} Elements vorkommen. Normalerweise wird es gefolgt von einem {{HTMLElement("dd")}} Element. Mehrere <code>&lt;dt&gt;</code> Elemente in einer Reihe indizieren verschiedene Begriffe, die jeweils vom nächsten {{HTMLElement("dd")}} Element definiert werden.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorien</a></th>
+   <td>Keine.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubter Inhalt</th>
+   <td>{{todo}} <a href="/en-US/docs/HTML/Content_categories#Flowing_content" title="HTML/Content_categories#Phrasing_content">Fließender Inhalt</a>, jedoch ohne {{HTMLElement("header")}}, {{HTMLElement("footer")}}, Sektionsinhalt oder Nachfahren von Kopfinhalten.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag Auslassung</th>
+   <td>Muss ein Start-Tag besitzen. Das End-Tag kann ausgelassen werden, vorausgesetzt es folgt direkt ein <code>&lt;dd&gt;</code> Element oder es gibt keinen weiteren Inhalt im Elternelement.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte Elternelemente</th>
+   <td>Vor einem {{HTMLElement("dt")}} oder einem {{HTMLElement("dd")}} Element, innerhalb eines {{HTMLElement("dl")}} Elements.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM Schnittstelle</th>
+   <td>{{domxref("HTMLElement")}} Bis einschließlich Gecko 1.9.2 (Firefox 4) hat Firefox die <a href="/en-US/docs/DOM/span" title="DOM/span"><span style="font-family: courier new;">HTMLSpanElement</span></a> Schnittstelle für dieses Element implementiert.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p><span style="line-height: 21px;">Dieses Attribut schließt </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globale Attribute</a><span style="line-height: 21px;"> ein.</span></p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Siehe <a href="/en-US/docs/HTML/Element/dl#Examples" title="HTML/Element/dl#Examples">definition list</a>.</p>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-dt-element', '&lt;dt&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dt-element', '&lt;dt&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '&lt;dt&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{HTMLElement("dd")}} Element</li>
+ <li>{{HTMLElement("dl")}} Element</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/de/web/html/element/em/index.html b/files/de/web/html/element/em/index.html
new file mode 100644
index 0000000000..2ea23affbf
--- /dev/null
+++ b/files/de/web/html/element/em/index.html
@@ -0,0 +1,152 @@
+---
+title: <em>
+slug: Web/HTML/Element/em
+translation_of: Web/HTML/Element/em
+---
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Das HTML Element<em> Emphasis</em> <strong>&lt;em&gt;</strong> stellt das eingeschlossene Wort <em>kursiv</em> dar. Wenn das <strong><code>&lt;em&gt;</code></strong> ein Nachfahr von <em>&lt;strong&gt;</em> ist, wird dessen Text sowohl <em>kursiv</em> als auch <strong>fett</strong> dargestellt.</p>
+
+<div class="note"><strong>Anmerkung:</strong> Normalerweise wird dieses Element in kursiv Schrift angezeigt. Sie können mit CSS jeden Text fett oder kursiv ausgeben und auch die Standartformatierung eines Browsers für die Elemente wie &lt;strong&gt; und &lt;em&gt; überschreiben. Verwenden Sie &lt;cite&gt; Elemente für Zitate oder Quellenverweise. Man nimmt es z.B. für Titel oder Bücher, Namen eines Lieds oder ein Konzert, Theaterstück usw. ; &lt;cite&gt; ist nur für die Quelle gedacht, nicht für das, was Sie daraus zitieren. Verwenden Sie &lt;strong&gt; Element um einen wichtigen Text zu kennzeichnen,  während &lt;em&gt; die Betonung vermittelt. Sie verwenden sie je nach inhaltlicher Anforderung einzeln oder zusammen.</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Inhaltsverzeichnis</th>
+   <td>fließender Inhalt, gestaltender Inhalt, eindeutiger Inhalt</td>
+  </tr>
+  <tr>
+   <th scope="row">Nicht erlaubter Inhalt</th>
+   <td>Ausdrucksinhalt</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag wegfall</th>
+   <td>keiner ; kleine Anmerkung= Tag in diesem Sinne heisst "Schlagwort", im Zusammenhang mit HTML belasse ich das Wort TAG im Orginalen, zum besseren Verständnis.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubtes Elternelement</th>
+   <td>
+    <p>Alle Elemente die Inhaltsformulierung akzeptieren</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implementiert die {{domxref("HTMLSpanElement")}} Schnittstelle für dieses Element.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes">Attributes</h2>
+
+<p>Dieses Element beinhaltet nur die  <a href="/en-US/docs/Web/HTML/Global_attributes">globalen Eigenschaften</a>.</p>
+
+<h2 id="Example">Example</h2>
+
+<p><span id="result_box" lang="de"><span>Das Element &lt;em&gt; wird oft verwendet, um einen impliziten oder expliziten Kontrast anzugeben.</span></span></p>
+
+<pre class="brush: html">&lt;p&gt;
+  In HTML 5, what was previously called &lt;em&gt;blockorientiert&lt;/em&gt; content is now called &lt;em&gt;dynamisch&lt;/em&gt; content.
+&lt;/p&gt;</pre>
+
+<h3 id="Result" name="Result">Result</h3>
+
+<p><span id="result_box" lang="de"><span>In HTML 5 wird der Inhalt, der zuvor als <em>blockorientiert</em>er-Inhalt bezeichnet wurde, wird jetzt als <em>dynamisch</em>er-Inhalt bezeichnet.</span></span></p>
+
+<h2 id="&lt;i>_vs._&lt;em>">&lt;i&gt; vs. &lt;em&gt;</h2>
+
+<p><span id="result_box" lang="de"><span>Es ist für neue Entwickler oft verwirrend, warum es so viele Elemente gibt, um die Betonung auf etwas Text auszudrücken.</span> <span>&lt;i&gt; und &lt;em&gt; sind vielleicht eine der häufigsten.</span> <span>Warum sollten Sie &lt;em&gt; &lt;/ em&gt; vs &lt;i&gt; &lt;/ i&gt; verwenden?</span> <span>Sie produzieren genau das gleiche Ergebnis, nicht wahr?</span></span></p>
+
+<p><span id="result_box" lang="de"><span>Nicht genau.</span> <span>Das visuelle Ergebnis ist standardmäßig das gleiche - beide Tags(<em>Schlagwörter</em>) rendern den Inhalt kursiv.</span> <span>Aber die semantische Bedeutung ist anders.</span> <span>Das &lt;em&gt; -Tag stellt die Betonung des Inhalts dar, während das &lt;i&gt; -Tag Text darstellt, der von der normalen Prosa abgesetzt wird, wie z. B. der Name eines Films oder Buchs, ein Fremdwort oder wenn sich der Text auf die</span> <span>Definition eines Wortes statt seiner semantischen Bedeutung.</span></span></p>
+
+<p><span id="result_box" lang="de"><span>Ein Beispiel für &lt;em&gt; könnte lauten: "Just <em>do</em> it already!", oder: "</span></span>We <em>had</em> to do something about it<span lang="de"><span>".</span> <span>Eine Person oder Software, die den Text liest, würde die Wörter in Kursivschrift mit Betonung aussprechen.</span></span></p>
+
+<p><span id="result_box" lang="de"><span>Ein Beispiel für &lt;i&gt; könnte sein: "</span></span>The <em>Queen Mary</em> sailed last night<span lang="de"><span>".</span> <span>Hier gibt es keine zusätzliche Betonung oder Bedeutung für das Wort "Queen Mary".</span> <span>Es wird lediglich angedeutet, dass es sich nicht um eine Königin namens Mary handelt, sondern um ein Schiff namens Queen Mary.</span> <span>Ein weiteres Beispiel für &lt;i&gt; könnte sein: "</span></span>The word <em>the</em> is an article<span lang="de"><span>"</span></span></p>
+
+<p> </p>
+
+<h2 id="Specifications" name="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-em-element', '&lt;em&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-em-element', '&lt;em&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '&lt;em&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li>HTMLElement i</li>
+</ul>
+
+<div>HTML Referenz</div>
diff --git a/files/de/web/html/element/embed/index.html b/files/de/web/html/element/embed/index.html
new file mode 100644
index 0000000000..edbb17c4fe
--- /dev/null
+++ b/files/de/web/html/element/embed/index.html
@@ -0,0 +1,99 @@
+---
+title: <embed>
+slug: Web/HTML/Element/embed
+translation_of: Web/HTML/Element/embed
+---
+<p><span id="result_box" lang="de"><span>Das HTML-Element &lt;embed&gt; stellt einen Integrationspunkt für eine externe Anwendung oder einen interaktiven Inhalt dar (mit anderen Worten ein Plug-in).</span></span></p>
+
+<p><span id="result_box" lang="de"><span>Hinweis ("Dieses Thema dokumentiert nur das Element, das als Teil von HTML5 definiert ist. Es behandelt keine frühere, nicht standardisierte Implementierung des Elements.")</span></span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Inhaltsverzeichnis</th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Fließender Inhalt</a>, gestaltender Inhalt, eingebundener, interaktiver Inhalt, darstellender Inhalt.</td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="short_text" id="result_box" lang="de"><span>Erlaubter Inhalt</span></span></th>
+   <td><span class="short_text" id="result_box" lang="de"><span>Keine, es ist ein Glossar ("leeres Element").</span></span></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="short_text" id="result_box" lang="de"><span>Tag-Auslassung</span></span></th>
+   <td><span id="result_box" lang="de"><span>Muss ein Start-Tag haben und darf kein End-Tag haben.</span></span></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="short_text" id="result_box" lang="de"><span>Erlaubte Eltern</span></span></th>
+   <td><span id="result_box" lang="de"><span>Jedes Element, das eingebetteten Inhalt akzeptiert.</span></span></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="short_text" id="result_box" lang="de"><span>Zulässige ARIA-Rollen</span></span></th>
+   <td>ARIARole("application"), ARIARole("document"), ARIARole("img"), ARIARole("presentation")</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM Schnittstelle</th>
+   <td>domxref("HTMLEmbedElement")</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p><span id="result_box" lang="de"><span>Die Attribute dieses Elements enthalten die globalen Attribute.</span></span></p>
+
+<dl>
+ <dt>htmlattrdef("height")</dt>
+ <dd><span id="result_box" lang="de"><span>Die angezeigte Höhe der Ressource in CSS-Pixeln.</span> <span>- (nur absolute Werte. KEINE Prozentsätze)</span></span></dd>
+ <dt>htmlattrdef("src")</dt>
+ <dd><span class="short_text" id="result_box" lang="de"><span>Die URL der eingebetteten Ressource</span></span></dd>
+ <dt>htmlattrdef("type")</dt>
+ <dd><span id="result_box" lang="de"><span>Der zu verwendende MIME-Typ, um das zu instanziierende Plug-In auszuwählen.</span></span></dd>
+ <dt>htmlattrdef("width")</dt>
+ <dd><span id="result_box" lang="de"><span>Die angezeigte Breite der Ressource in CSS-Pixeln.</span> <span>- (nur absolute Werte. KEINE Prozentsätze)</span></span></dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: html">&lt;embed type="video/quicktime" src="movie.mov" width="640" height="480"&gt;
+</pre>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>SpecName('HTML WHATWG', 'embedded-content.html#the-embed-element', '&lt;embed&gt;')</td>
+   <td>Spec2('HTML WHATWG')</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>SpecName('HTML5 W3C', 'embedded-content-0.html#the-embed-element', '&lt;embed&gt;')</td>
+   <td>Spec2('HTML5 W3C')</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_kompatibilität">Browser kompatibilität</h2>
+
+<div class="note">
+<p><strong>Note</strong>: <span id="result_box" lang="de"><span>Es gibt derzeit einen Implementierungsunterschied zwischen Browsern.</span> <span>Während Blink (Chrome, Opera) den Inhalt der HTML-Ressource anzeigt, zeigt Firefox eine allgemeine Meldung an, dass der Inhalt ein Plug-in benötigt (siehe Bug ("730768")).</span> <span>Es wird empfohlen, das Element &lt;object&gt; oder &lt;iframe&gt; zu verwenden.</span></span></p>
+</div>
+
+<div class="hidden"><span id="result_box" lang="de"><span>Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert.</span> <span>Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte https://github.com/mdn/browser-compat-data und senden Sie uns eine Pull-Anfrage.</span></span></div>
+
+<p>Compat("html.elements.embed")</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><span id="result_box" lang="de"><span>Andere Elemente, die zum Einbetten von Inhalten verschiedener Typen verwendet werden, sind HTMLElement ("audio"), HTMLElement ("canvas"), HTMLElement ("iframe"), HTMLElement ("</span> <span>img "), MathMLElement (" math "), HTMLElement (" Objekt "), SVgelement (" svg ") und HTMLElement (" video ").</span></span></li>
+</ul>
+
+<p> HTMLRef</p>
diff --git a/files/de/web/html/element/fieldset/index.html b/files/de/web/html/element/fieldset/index.html
new file mode 100644
index 0000000000..c901ee0dc3
--- /dev/null
+++ b/files/de/web/html/element/fieldset/index.html
@@ -0,0 +1,489 @@
+---
+title: <fieldset>
+slug: Web/HTML/Element/fieldset
+translation_of: Web/HTML/Element/fieldset
+---
+<div>HTMLRef</div>
+
+<p><span id="result_box" lang="de"><span>Das <strong>HTML &lt;fieldset&gt; -Element</strong> wird verwendet, um mehrere Steuerelemente sowie Bezeichnungen (HTMLElement ("label")) in einem Webformular zu gruppieren. </span> </span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Inhaltsverzeichnis</th>
+   <td>fließender-Inhalt, sektion Wurzel, gelistete, formordnender Element, eindeutiger Inhalt.</td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="short_text" id="result_box" lang="de"><span>Erlaubter Inhalt</span></span></th>
+   <td><span id="result_box" lang="de"><span>Ein optionales HTMLElement &lt;legend&gt;, gefolgt von einem fließendem Inhalt.</span></span></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="short_text" id="result_box" lang="de"><span>Tag-Auslassung</span></span></th>
+   <td>Keine</td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="short_text" id="result_box" lang="de"><span>Erlaubte Eltern</span></span></th>
+   <td><span class="short_text" id="result_box" lang="de"><span>Jedes Element, das den flow content akzeptiert.</span></span></td>
+  </tr>
+  <tr>
+   <th scope="row"><span class="short_text" id="result_box" lang="de"><span>Zulässige ARIA-Rollen</span></span></th>
+   <td>ARIARole("group"), ARIARole("presentation")</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM Schnittstelle</th>
+   <td>{{domxref("HTMLFieldSetElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Anmerkung:</strong> <span id="result_box" lang="de"><span>Im Gegensatz zu fast jedem anderen Element schlägt die WHATWG-HTML-Rendering-Spezifikation cssxref ("min-width") vor: min-content als Teil des Standardstils für HTMLElement ("fieldset") und viele Browser implementieren</span> <span>solches Styling (oder etwas, das es annähert).</span></span></p>
+</div>
+
+<div class="note">
+<p><strong>Anmerkung:</strong> <span id="result_box" lang="de"><span>Mit dem Element HTMLElement ("fieldset") wird erwartet, dass es einen neuen Kontext für die Blockformatierung herstellt (siehe HTML5-Spezifikation).</span></span></p>
+</div>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p><span class="short_text" id="result_box" lang="de"><span>Dieses Element enthält die globalen Attribute.</span></span></p>
+
+<dl>
+ <dt>htmlattrdef("disabled") HTMLVersionInline(5)</dt>
+ <dd><span id="result_box" lang="de"><span>Wenn dieses boolesche Attribut gesetzt ist, sind die Formularsteuerelemente, die seine Nachfolger sind, mit Ausnahme der Nachfolger des ersten optionalen Elements HTMLElement ("legend"), deaktiviert, d.h. nicht editierbar.</span> <span>Sie erhalten keine Browserereignisse wie Mausklicks oder Fokus-bezogene Ereignisse.</span> <span>Oft zeigen Browser solche Steuerelemente als grau an.</span></span></dd>
+ <dt>htmlattrdef("form") HTMLVersionInline(5)</dt>
+ <dd><span id="result_box" lang="de"><span>Dieses Attribut hat den Wert des id-Attributs des HTMLElement ("form") , mit dem es verknüpft ist.</span> <span>Ihr Standardwert ist die ID des nächsten HTMLElement ("Formular") , von dem sie abstammt.</span></span></dd>
+ <dt>htmlattrdef("name") HTMLVersionInline(5)</dt>
+ <dd><span class="short_text" id="result_box" lang="de"><span>Der Name, der der Gruppe zugeordnet ist</span></span><br>
+
+ <div class="note"><span id="result_box" lang="de"><span>Die Bezeichnung für das Feldset wird durch das erste HTMLElement ("legend") angegeben, das ein untergeordnetes Element(Kind Element) dieses Feldsatzes ist.</span></span></div>
+ </dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Example_1_Form_with_fieldset_legend_and_label">Example #1: Form with fieldset, legend, and label</h3>
+
+<pre class="brush: html">&lt;form action="test.php" method="post"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Title&lt;/legend&gt;
+    &lt;input type="radio" id="radio"&gt;
+    &lt;label for="radio"&gt;Click me&lt;/label&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="Example_2_Simulieren_eines_editierbaren_HTMLElement_(select)_durch_ein_Feldset_von_Radioboxen_und_Textboxen_*">Example #2: <span id="result_box" lang="de"><span>Simulieren eines editierbaren HTMLElement ("select") durch ein Feldset von Radioboxen und Textboxen *</span></span></h3>
+
+<p><span id="result_box" lang="de"><span>Das folgende Beispiel besteht aus reinem HTML und CSS.</span> <span>Es gibt keinen JavaScript-Code.</span></span></p>
+
+<p><span id="result_box" lang="de"><span>Seien Sie gewarnt, dass Bildschirmleser und Hilfsgeräte das folgende Formular nicht korrekt interpretieren.</span> <span>Dieses Beispiel wäre ungültiger HTML-Code, wenn die richtigen Elemente verwendet würden.</span></span></p>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8" /&gt;
+&lt;title&gt;Editable [pseudo]select&lt;/title&gt;
+&lt;style type="text/css"&gt;
+
+/* Generic form fields */
+
+fieldset.elist, input[type="text"], textarea, select,
+option, fieldset.elist ul, fieldset.elist &gt; legend,
+fieldset.elist input[type="text"],
+fieldset.elist &gt; legend:after {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+input[type="text"] {
+  padding: 0 20px;
+}
+
+textarea {
+  width: 500px;
+  height: 200px;
+  padding: 20px;
+}
+
+textarea, input[type="text"], fieldset.elist ul,
+select, fieldset.elist &gt; legend {
+  border: 2px #cccccc solid;
+  border-radius: 10px;
+}
+
+input[type="text"], fieldset.elist, select,
+fieldset.elist &gt; legend {
+  height: 32px;
+  font-family: Tahoma;
+  font-size: 14px;
+}
+
+input[type="text"]:hover, textarea:hover,
+select:hover, fieldset.elist:hover &gt; legend {
+  background-color: #ddddff;
+}
+
+select {
+  padding: 4px 20px;
+}
+
+option {
+  height: 30px;
+  padding: 5px 4px;
+}
+
+option:not(:checked), textarea:focus {
+  background-color: #ffcccc;
+}
+
+fieldset.elist &gt; legend:after,
+fieldset.elist label {
+  height: 28px;
+}
+
+input[type="text"], fieldset.elist {
+  width: 316px;
+}
+
+input[type="text"]:focus {
+  background: #ffcccc url("data:image/gif;
+  base64,R0lGODlhEAAQANU5APnoxuvr6+uxPdvb2+
+  rq6ri4uO7qxunp6dPT06SHV+/rx8vLy+
+  nezLO0sbe3t9Ksas+qaaCEV8rKyp2dnf39/
+  QAAAK6ursifZHFxcc/
+  Qzu3mxYyMjExCJnV1dc6maO7u7o+
+  Pj2tXNoaGhtfDpKCDVu3lxM+
+  tcaKEV9bW1qOFVWNjY8KrisTExNra2nBbObGxsby8vO/
+  mu7Kyso9ZAuzs7MSgAIiKhf///8zMzP///
+  wAAAAAAAAAAAAAAAAAAAAAAACH5BAEAADkALAAAAAAQ
+  ABAAAAaXwJxwSCwOYzWkMpkkZmoAqDQaJdpqAqw2m53
+  NRjlboAarFczomcE0C99o8DgNMVM8Tm3bbYDr9x11Dw
+  kzDG5yc2oQJIRCenx/MxoeETM2Q3pxATMlF4MYlo17O
+  AsdLispMyAioIY0BzMcITMTKBasjgssFTMqGxItMjYU
+  oTQBBAQHxgE0wZcfMtDRMi/QrA022NnaNg1CQQA7")
+  no-repeat 2px center !important;
+}
+
+input[type="text"]:focus, textarea:focus,
+select:focus, fieldset.elist &gt; legend {
+  border: 2px #ccaaaa solid;
+}
+
+fieldset {
+  border: 2px #af3333 solid;
+  border-radius: 10px;
+}
+
+/* Editable [pseudo]select
+(i.e. fieldsets with [class=elist]) */
+
+fieldset.elist {
+  display: inline-block;
+  position: relative;
+  vertical-align: middle;
+  overflow: visible;
+  padding: 0;
+  margin: 0;
+  border: none;
+}
+
+fieldset.elist ul {
+  position: absolute;
+  width: 100%;
+  max-height: 320px;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  background-color: transparent;
+}
+
+fieldset.elist:hover ul {
+  background-color: #ffffff;
+  border: 2px #af3333 solid;
+  left: 2px;
+  overflow: auto;
+}
+
+fieldset.elist ul &gt; li {
+  list-style-type: none;
+  background-color: transparent;
+}
+
+fieldset.elist label {
+  display: none;
+  width: 100%;
+}
+
+fieldset.elist input[type="text"] {
+  width: 100%;
+  height: 30px;
+  line-height: 30px;
+  border: none;
+  background-color: transparent;
+  border-radius: 0;
+}
+
+fieldset.elist &gt; legend {
+  display: block;
+  margin: 0;
+  padding: 0 0 0 5px;
+  position: absolute;
+  width: 100%;
+  cursor: default;
+  background-color: #ccffcc;
+  line-height: 30px;
+  font-style: italic;
+}
+
+fieldset.elist:hover &gt; legend {
+  position: relative;
+  overflow: hidden;
+}
+
+fieldset.elist &gt; legend:after {
+  width: 20px;
+  content: "\2335";
+  float: right;
+  text-align: center;
+  border-left: 2px #cccccc solid;
+  font-style: normal;
+  cursor: default;
+}
+
+fieldset.elist:hover &gt; legend:after {
+  background-color: #99ff99;
+}
+
+fieldset.elist ul input[type="radio"] {
+  display: none;
+}
+
+fieldset.elist input[type="radio"]:checked ~ label {
+  display: block;
+  width: 292px;
+  background-color: #ffffff;
+}
+
+fieldset.elist:hover
+input[type="radio"]:checked ~ label {
+  width: 100%;
+}
+
+fieldset.elist:hover label {
+  display: block;
+  height: 100%;
+}
+
+fieldset.elist label:hover {
+  background-color: #3333ff !important;
+}
+
+fieldset.elist:hover
+input[type="radio"]:checked ~ label {
+  background-color: #aaaaaa;
+}
+
+&lt;/style&gt;
+
+&lt;/head&gt;
+&lt;body&gt;
+
+&lt;form method="get" action="test.php"&gt;
+
+&lt;fieldset&gt;
+    &lt;legend&gt;Order a T-Shirt&lt;/legend&gt;
+    &lt;p&gt;Write your name (simple textbox):
+    &lt;input type="text" /&gt;&lt;/p&gt;
+    &lt;p&gt;Choose your size (simple select):
+    &lt;select&gt;
+        &lt;option value="s"&gt;Small&lt;/option&gt;
+        &lt;option value="m"&gt;Medium&lt;/option&gt;
+        &lt;option value="l"&gt;Large&lt;/option&gt;
+        &lt;option value="xl"&gt;Extra Large&lt;/option&gt;
+    &lt;/select&gt;&lt;/p&gt;
+    &lt;div&gt;What address do you want to use?
+    (editable pseudoselect)
+    &lt;fieldset class="elist"&gt;
+        &lt;legend&gt;Address&amp;hellip;&lt;/legend&gt;
+        &lt;ul&gt;
+            &lt;li&gt;&lt;input type="radio" value="1"
+            id="address-switch_1" checked
+            /&gt;&lt;label for="address-switch_1"
+            &gt;&lt;input type="text"
+            value="19 Quaker Ridge Rd. Bethel CT 06801"
+            /&gt;&lt;/label&gt;&lt;/li&gt;
+            &lt;li&gt;&lt;input type="radio" value="2"
+            id="address-switch_2"
+            /&gt;&lt;label for="address-switch_2"
+            &gt;&lt;input type="text"
+            value="1000 Coney Island Ave.
+            Brooklyn NY 11230"
+            /&gt;&lt;/label&gt;&lt;/li&gt;
+            &lt;li&gt;&lt;input type="radio" value="3"
+            id="address-switch_3"
+            /&gt;&lt;label for="address-switch_3"
+            &gt;&lt;input type="text"
+            value="2962 Dunedin Cv. Germantown TN 38138"
+            /&gt;&lt;/label&gt;&lt;/li&gt;
+            &lt;li&gt;&lt;input type="radio" value="4"
+            id="address-switch_4"
+            /&gt;&lt;label for="address-switch_4"
+            &gt;&lt;input type="text"
+            value="915 E 7th St. Apt 6L. Brooklyn NY 11230"
+            /&gt;&lt;/label&gt;&lt;/li&gt;
+        &lt;/ul&gt;
+    &lt;/fieldset&gt;
+    &lt;/div&gt;
+    &lt;p&gt;Write a comment:&lt;br /&gt;
+    &lt;textarea&gt;&lt;/textarea&gt;&lt;/p&gt;
+    &lt;p&gt;&lt;input type="reset" value="Reset" /&gt;
+    &lt;input type="submit" value="Send!" /&gt;&lt;/p&gt;
+&lt;/fieldset&gt;
+
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Betrachten Sie dieses Beispiel in Aktion.</p>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>SpecName('HTML WHATWG', 'forms.html#the-fieldset-element', '&lt;fieldset&gt;')</td>
+   <td>Spec2('HTML WHATWG')</td>
+   <td>Definition of the <code>fieldset</code> element</td>
+  </tr>
+  <tr>
+   <td>SpecName('HTML WHATWG', 'rendering.html#the-fieldset-and-legend-elements')</td>
+   <td>Spec2('HTML WHATWG')</td>
+   <td>Suggested default rendering of the <code>fieldset</code> and <code>legend</code> elements</td>
+  </tr>
+  <tr>
+   <td>SpecName('HTML5 W3C', 'forms.html#the-fieldset-element', '&lt;fieldset&gt;')</td>
+   <td>Spec2('HTML5 W3C')</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>SpecName('HTML4.01', 'interact/forms.html#h-17.10', '&lt;fieldset&gt;')</td>
+   <td>Spec2('HTML4.01')</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>disabled</code> attribute</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>12</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td>Establish a new block formatting</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>disabled</code> attribute</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>6.0</td>
+  </tr>
+  <tr>
+   <td>Establish a new block formatting</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <span id="result_box" lang="de"><span>Nicht alle Formularsteuerungsnachkommen eines deaktivierten Fieldsets sind in IE11 ordnungsgemäß deaktiviert.</span> <span>siehe IE Bug 817488: Eingabe [Typ = "Datei"] nicht deaktiviert in deaktiviertem Feldset und IE Bug 962368: Kann Eingabe [Typ = "Text"] innerhalb von Feldset [deaktiviert] bearbeiten.</span></span></p>
+
+<h2 id="Bugs">Bugs</h2>
+
+<ul>
+ <li><a href="https://bugs.webkit.org/show_bug.cgi?id=123507">WebKit bug 123507</a> - <code>min-width: {{cssxref("-webkit-min-content")}}</code> on fieldset</li>
+ <li><span id="result_box" lang="de"><span>StackOverflow-Diskussion mit Workarounds für die oben genannten Fehler</span></span></li>
+</ul>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Andere form-bezogene Elemente: HTMLElement("form"), HTMLElement("legend"), HTMLElement("label"), HTMLElement("button"), HTMLElement("select"), HTMLElement("datalist"), HTMLElement("optgroup"), HTMLElement("option"), HTMLElement("textarea"), HTMLElement("keygen"), HTMLElement("input"), HTMLElement("output"), HTMLElement("progress") and HTMLElement("meter").</li>
+</ul>
diff --git a/files/de/web/html/element/font/index.html b/files/de/web/html/element/font/index.html
new file mode 100644
index 0000000000..c57e2e9135
--- /dev/null
+++ b/files/de/web/html/element/font/index.html
@@ -0,0 +1,53 @@
+---
+title: <font>
+slug: Web/HTML/Element/font
+tags:
+  - HTML
+  - Referenz
+  - Schrift
+  - Tags
+  - Textformatierung
+translation_of: Web/HTML/Element/font
+---
+<div>{{obsolete_header}}</div>
+
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+
+<p>Das <em>HTML Font Element</em> (<span style="font-family: courier new;">&lt;font&gt;</span>) definiert die Textgröße, Textfarbe und Schriftart für seinen Inhalt.</p>
+
+<div class="note">
+<p><em>Notiz zur Verwendung: </em></p>
+
+<p><strong>Benutzen Sie dieses Element nicht!</strong> Obwohl es sich in HTML 3.2 normalisierte, wurde es in HTML 4.01 abgelehnt. Zu dieser Zeit verknüpfte es nur die Gestaltung, ab HTML5 ist es dann veraltet.</p>
+
+<p>Startend mit HTML 4, werden Gestaltungsinformationen nicht mit HTML (außer durch das {{HTMLElement("style")}}-Element oder das <strong>style</strong>-Attribut jedes Elementes) übermittelt. Für eine moderne Web-Entwicklung sollten diese Informationen in <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> ausgelagert werden.</p>
+
+<p>Die bisherige Wirkung des {{HTMLElement("font")}}-Elementes kann genauso, oder sogar noch besser durch die <a href="/en-US/docs/Web/CSS/CSS_Fonts">CSS Schriftarten</a> in den CSS-Einstellungen erzielt werden.</p>
+</div>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p>Wie alle anderen Elemente auch, unterstützt dieses Element die <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">globalen Attribute</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("color")}}</dt>
+ <dd>Dieses Attribut legt die Textfarbe durch die Eingabe eines Farbennamens oder einer speziellen Farbe im hexadezimalen #RRGGBB-Format fest.</dd>
+ <dt>{{htmlattrdef("face")}}</dt>
+ <dd>Dieses Attribut beinhaltet eine durch Kommata getrennte Liste von einem oder mehreren Schriftarten. Der Text des Dokuments im Standard-Stil wird durch die erste, vom Browser unterstützte, Schriftart dargestellt. Wenn keine genannte Schriftart auf dem lokalen System installiert ist, wird der Browser die typische Standard-Schriftart verwenden.</dd>
+ <dt>{{htmlattrdef("size")}}</dt>
+ <dd>Dieses Attribut gibt die Schriftgröße als Zahl von <span style="font-family: courier new;">1</span> bis <span style="font-family: courier new;">7</span> (<span style="font-family: courier new;">1</span> als kleinstes und <span style="font-family: courier new;">3</span> als Standard) an. Es kann auch durch einen relativen Wert, wie <span style="font-family: courier new;">+2</span> oder <span style="font-family: courier new;">-3</span>, der den Wert vom {{htmlattrxref("size", "basefont")}}-Attribut des {{HTMLElement("basefont")}}-Elementes oder relativ zum Standardwert <span style="font-family: courier new;">3</span> als Grundlage verwendet, festgelegt werden.</dd>
+</dl>
+
+<h2 id="DOM-Schnittstelle">DOM-Schnittstelle</h2>
+
+<p>Dieses Element implementiert die {{domxref("HTMLFontElement")}}-Schnittstelle.</p>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<h3 id="Notizen_zu_Gecko">Notizen zu Gecko</h3>
+
+<p>Vor Gecko 15.0 {{geckoRelease("15.0")}}, verarbeitete der Browser verbotene Werte für das <code>size</code>-Attribut nicht korrekt. Es hat keine verbotenen Werte für relative Werte akzeptiert. Nun kürzt der Browser diese im Bereich von -10 zu +10 korrekt.</p>
+
+<p>Gecko 15.0 entfernte auch die Unterstützung für die <code>font-weight</code> und <code>point-size</code>-Attribute im  <code>&lt;font&gt;</code>-Element; Diese waren keine Standard-Werte und Gecko war die einzige Umgebung, die dies noch unterstützte.</p>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/de/web/html/element/footer/index.html b/files/de/web/html/element/footer/index.html
new file mode 100644
index 0000000000..1e6b96fbc1
--- /dev/null
+++ b/files/de/web/html/element/footer/index.html
@@ -0,0 +1,99 @@
+---
+title: <footer>
+slug: Web/HTML/Element/footer
+tags:
+  - Element
+  - HTML
+  - HTML Sektionen
+  - HTML5
+  - Referenz
+  - Web
+translation_of: Web/HTML/Element/footer
+---
+<div>{{HTMLRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Das <strong>HTML <code>&lt;footer&gt;</code> Element</strong> repräsentiert eine Fußzeile für den nahestehendsten Sektionsinhalt oder das <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document#Sectioning_root" title="Sections and Outlines of an HTML5 document#Sectioning root">Sektionsquellen</a> Element (also das nahestehendste Element wie zum Beispiel {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}}, {{HTMLElement("section")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("body")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}}, {{HTMLElement("td")}}). Eine Fußzeile enthält typischerweise Informationen über den Autor der Sektion, die Copyright-Daten oder Links zu verwandten Dokumente.</p>
+
+<div class="note">
+<p><strong>Hinweis zur Benutzung:</strong></p>
+
+<ul>
+ <li>Informationen über den Autor sollten in ein {{HTMLElement("address")}} Element eingebettet werden, welches wiederum in einem <code>&lt;footer&gt;</code> Element stehen kann.</li>
+ <li>Das <code>&lt;footer&gt;</code> Element ist kein Sektionsinhalt und führt deshalb auch keine neue Sektion in der <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Begrenzung</a> ein.</li>
+</ul>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorien</a></th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Fließender Inhalt</a>, greifbarer Inhalt.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubter Inhalt</th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Fließender Inhalt</a>, jedoch kein <code>&lt;footer&gt;</code> oder {{HTMLElement("header")}} Nachfahre.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag Auslassung</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte Elternelemente</th>
+   <td>Jedes Element, dass <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">fließenden Inhalt</a> erlaubt. Das <code>&lt;footer&gt;</code> Element muss kein Nachfahre eines {{HTMLElement("address")}}, {{HTMLElement("header")}} oder anderem <code>&lt;footer&gt;</code> Element sein.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM Schnittstelle</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p>Dieses Element schließt nur <a href="/en-US/docs/HTML/Global_attributes">globale Attribute</a> ein.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: html">&lt;footer&gt;
+  Hier ein paar Copyright Informationen oder stattdessen Informationen über den &amp;lt;Artikel&amp;gt;?
+&lt;/footer&gt;
+</pre>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'sections.html#the-footer-element', '&lt;footer&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-footer-element', '&lt;footer&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("html.elements.footer")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Andere Sektions-verwandte Elemente: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("section")}}, {{HTMLElement("address")}};</li>
+ <li class="last"><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sektionen und Begrenzungen eines HTML5 Dokuments</a>.</li>
+</ul>
diff --git a/files/de/web/html/element/frame/index.html b/files/de/web/html/element/frame/index.html
new file mode 100644
index 0000000000..2e044d7369
--- /dev/null
+++ b/files/de/web/html/element/frame/index.html
@@ -0,0 +1,52 @@
+---
+title: <frame>
+slug: Web/HTML/Element/Frame
+translation_of: Web/HTML/Element/frame
+---
+<div>{{HTMLRef}}{{Deprecated_header}}</div>
+
+<p><code>&lt;frame&gt;</code> ist ein HTML Element dass einen bestimmten Bereich definiert, indem ein anderes HTML Dokument angezeigt werden kann. Ein Frame sollte innerhalb eines {{HTMLElement("frameset")}}s verwendet werden.</p>
+
+<p>Es wird davon abgeraten das <code>&lt;frame&gt;</code> Element zu verwenden, da es Nachteile wie Performance-Probleme hat und nicht von Screen Readern unterstützt wird. Anstatt des <code>&lt;frame&gt;</code> Elements sollte man einen {{HTMLElement("iframe")}} bevorzugen.</p>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p>Wie alle HTML Elemente, unterstütz dieses Element die <a href="/en-US/docs/HTML/Global_attributes">globalen Attribute</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>Dieses Attribut gibt an welches Dokument im Frame angezeigt wird.</dd>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>Dieses Attribut wird für die Kennzeichnung von Frames verwendet. Ohne die Angabe einer Kennzeichnung öffnet sich ein Link in dem Frame, in dem er sich befindet – dem übergeordneten Frame. Für mehr Informationen siehe das {{htmlattrxref("target","a")}} Attribut.</dd>
+ <dt>{{htmlattrdef("noresize")}}</dt>
+ <dd>Dieses Attribut verhindert das Anpassen der Größe des Frames durch Benutzer.</dd>
+ <dt>{{htmlattrdef("scrolling")}}</dt>
+ <dd>Dieses Attribut gibt an ob eine Scrollbar angezeigt werden solle. Wenn das Attribut nicht gesetzt ist, fügt der Browser eine Scrollbar hinzu, wenn sie benötigt wird. Es gibt zwei Optionen: <code>yes</code> zeigt die Scrollbar an, auch wenn sie nicht notwendig ist und <code>no</code> bei der keine Scrollbar angezeigt wird auch <em>wenn</em> sie benötigt werden würde.</dd>
+ <dt>{{htmlattrdef("marginheight")}}</dt>
+ <dd>Dieses Attribut gibt die Höhe des margin zwischen Frames an.</dd>
+ <dt>{{htmlattrdef("marginwidth")}}</dt>
+ <dd>Dieses Attribut gibt die Breite des margin zwischen Frames an.</dd>
+ <dt>{{htmlattrdef("frameborder")}}</dt>
+ <dd>Dieses Attribut gibt die Möglichkeit einen Rahmen für das Frame zu definieren.</dd>
+</dl>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: html">&lt;frameset cols="50%,50%"&gt;
+  &lt;frame src="https://developer.mozilla.org/en/HTML/Element/iframe" /&gt;
+  &lt;frame src="https://developer.mozilla.org/en/HTML/Element/frame" /&gt;
+&lt;/frameset&gt;
+</pre>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+
+
+<p>{{Compat("html.elements.frame")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{HTMLElement("frameset")}}</li>
+ <li>{{HTMLElement("iframe")}}</li>
+</ul>
diff --git a/files/de/web/html/element/h1-h6/index.html b/files/de/web/html/element/h1-h6/index.html
new file mode 100644
index 0000000000..1c8aa07e0f
--- /dev/null
+++ b/files/de/web/html/element/h1-h6/index.html
@@ -0,0 +1,72 @@
+---
+title: h1-h6
+slug: Web/HTML/Element/h1-h6
+tags:
+  - HTML
+  - HTML Elemente
+  - HTML Referenz
+translation_of: Web/HTML/Element/Heading_Elements
+---
+<h3 id="Übersicht">Übersicht</h3>
+
+<p>Die <strong>Überschriftenelemente</strong> bestehen aus sechs verschiedenen Leveln. <code>&lt;h1&gt;</code> ist die Überschrift mit der höchsten Gewichtung und <code>&lt;h6&gt;</code> mit der kleinsten. Ein Überschriften-Element beschreibt das Thema des Bereiches, welcher der Überschrift folgt. Überschriften können auch verwendet werden, um ein Inhaltsverzeichnis für ein Dokument automatisch zu erstellen.</p>
+
+<ul>
+ <li>Element Typ: <a href="/de/HTML/Block-level_Elemente" title="de/HTML/Block-level_Elemente">block-level</a></li>
+ <li>Erlaubter Inhalt: <a href="/de/HTML/Inline_Elemente" title="de/HTML/Inline_Elemente">inline</a></li>
+</ul>
+
+<h3 id="Beispiel">Beispiel</h3>
+
+<h4 id="Alle_Überschriften">Alle Überschriften</h4>
+
+<pre>  &lt;h1&gt;Überschrift Level 1&lt;/h1&gt;
+  &lt;h2&gt;Überschrift Level 2&lt;/h2&gt;
+  &lt;h3&gt;Überschrift Level 3&lt;/h3&gt;
+  &lt;h4&gt;Überschrift Level 4&lt;/h4&gt;
+  &lt;h5&gt;Überschrift Level 5&lt;/h5&gt;
+  &lt;h6&gt;Überschrift Level 6&lt;/h6&gt;
+</pre>
+
+<p>Dieses HTML gibt das Folgende aus:</p>
+
+<p><img alt="Image:HTML-headers2.png" class="internal" src="/@api/deki/files/245/=HTML-headers2.png"></p>
+
+<h4 id="Beispielseite">Beispielseite</h4>
+
+<pre>  &lt;h1&gt;Heading elements&lt;/h1&gt;
+
+    &lt;h2&gt;Summary&lt;/h2&gt;
+    &lt;p&gt;Some text here...&lt;/p&gt;
+
+    &lt;h2&gt;Examples&lt;/h2&gt;
+      &lt;h3&gt;Example 1&lt;/h3&gt;
+      &lt;p&gt;Some text here...&lt;/p&gt;
+
+      &lt;h3&gt;Example 2&lt;/h3&gt;
+      &lt;p&gt;Some text here...&lt;/p&gt;
+
+    &lt;h2&gt;See also&lt;/h2&gt;
+    &lt;p&gt;Some text here...&lt;/p&gt;
+</pre>
+
+<p>Dieses HTML gibt das Folgende aus:</p>
+
+<p><img alt="Image:HTML-headers1.png" class="internal" src="/@api/deki/files/244/=HTML-headers1.png"></p>
+
+<h3 id="Hinweise">Hinweise</h3>
+
+<p>Es sollte kein tieferes Überschriftenlevel verwendet werden, um die Schriftgröße zu vermindern. Stattdessen sollte die Größe über die <a href="/de/CSS" title="de/CSS">CSS</a> <a href="/de/CSS/font-size" title="de/CSS/font-size">font-size</a> Eigenschaft festgelegt werden.</p>
+
+<p>Es sollte vermieden werden Überschriftenlevel zu überspringen. Es sollte immer von <code>&lt;h1&gt; ausgegangen werden</code>, danach <code>&lt;h2&gt;</code> und so weiter. Außerdem sollte versucht werden nur eine Überschrift des ersten Levels in einem Dokument zu benutzen.</p>
+
+<p>Die Gruppierung von Überschriften und Inhalte kann über <a href="/de/HTML/Element/div" title="de/HTML/Element/div"><code>&lt;div&gt;</code></a> Element realisiert werden.</p>
+
+<h3 id="Siehe_auch">Siehe auch</h3>
+
+<ul>
+ <li><a href="/de/HTML/Element/p" title="de/HTML/Element/p">HTML Paragraph Element</a></li>
+ <li><a href="/de/HTML/Element/div" title="de/HTML/Element/div">HTML Division Element</a></li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/de/web/html/element/head/index.html b/files/de/web/html/element/head/index.html
new file mode 100644
index 0000000000..1c71988bda
--- /dev/null
+++ b/files/de/web/html/element/head/index.html
@@ -0,0 +1,28 @@
+---
+title: head
+slug: Web/HTML/Element/head
+tags:
+  - HTML
+  - HTML Elemente
+  - HTML Referenz
+translation_of: Web/API/HTMLHeadElement
+---
+<p>Das <code>&lt;head&gt;</code> HTML Element legt den Kopf eines Dokuments fest. In diesem werden Informationen für das Dokument angegeben, darunter der Dokumententitel und Meta-Daten.</p>
+
+<h3 id="Beispiel">Beispiel</h3>
+
+<pre class="eval">&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Seitentitel&lt;/title&gt;
+  &lt;/head&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="Spezifikationen">Spezifikationen</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/html401/struct/global.html#h-7.4.1">HTML 4.01 #head</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/html5/semantics.html#the-head-element-0">HTML5 #head</a></li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/de/web/html/element/header/index.html b/files/de/web/html/element/header/index.html
new file mode 100644
index 0000000000..61a4a0349d
--- /dev/null
+++ b/files/de/web/html/element/header/index.html
@@ -0,0 +1,143 @@
+---
+title: <header>
+slug: Web/HTML/Element/header
+tags:
+  - Element
+  - HTML
+  - HTML Sektionen
+  - HTML5
+  - Referenz
+  - Web
+translation_of: Web/HTML/Element/header
+---
+<div>{{HTMLRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Das <strong>HTML <code>&lt;header&gt;</code> Element</strong> repräsentiert eine Gruppe von Einführungs- oder Navigationshilfen. Es kann ein paar Kopfelemente beinhalten, jedoch auch andere Elemente wie zum Beispiel ein Logo, ein Suchfeld, usw.</p>
+
+<div class="note">
+<p><strong>Hinweis zur Benutzung:</strong></p>
+
+<ul>
+ <li>Das <code>&lt;header&gt;</code> Element ist kein Sektionsinhalt und führt deshalb auch keine neue Sektion in der <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Begrenzung</a> ein.</li>
+</ul>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorien</a></th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Fließender Inhalt</a>, greifbarer Inhalt.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubter Inhalt</th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Fließender Inhalt</a>, jedoch kein <code>&lt;header&gt;</code> oder {{HTMLElement("footer")}} Nachfahre</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag Auslassung</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte Elternelemente</th>
+   <td>Jedes Element, dass <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">fließenden Inhalt</a> erlaubt. Ein <code>&lt;header&gt;</code> Element darf kein Nachfahre von einem {{HTMLElement("address")}}, {{HTMLElement("footer")}} oder anderem {{HTMLElement("header")}} Element sein.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM Schnittstelle</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p><span style="line-height: 21px;">Dieses Element schließt nur </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globale Attribute</a><span style="line-height: 21px;"> ein.</span></p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: html">&lt;header&gt;
+  hier ein Logo
+&lt;/header&gt;
+</pre>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'sections.html#the-header-element', '&lt;header&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-header-element', '&lt;header&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>9.0</td>
+   <td>11.10</td>
+   <td>4.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.2</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>9.0</td>
+   <td>11.0</td>
+   <td>5.0 (iOS 4.2)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Eine detailliertere Beschreibung: <a class="external" href="http://html5doctor.com/the-header-element/" title="The header element | HTML5 Doctor">The header element | HTML5 Doctor</a></li>
+ <li>Andere Sektions-verwandte Elemente: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("footer")}}, {{HTMLElement("section")}}, {{HTMLElement("address")}};</li>
+ <li class="last"><a class="deki-ns current" href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sektionen und Bregrenzungen eines HTML5 Dokuments</a>.</li>
+</ul>
diff --git a/files/de/web/html/element/hr/index.html b/files/de/web/html/element/hr/index.html
new file mode 100644
index 0000000000..b4bba99ae2
--- /dev/null
+++ b/files/de/web/html/element/hr/index.html
@@ -0,0 +1,57 @@
+---
+title: hr
+slug: Web/HTML/Element/hr
+tags:
+  - HTML
+  - HTML Elemente
+  - HTML Referenz
+translation_of: Web/HTML/Element/hr
+---
+<h3 id="Übersicht">Übersicht</h3>
+
+<p>Das <strong>HTML &lt;hr&gt; - Element</strong> (hr für engl.: <em>horizontal rule</em>) wird verwendet, um eine horizontale Linie einzufügen, die Bereiche im Dokument von einander trennt. Die Linie wird normalerweise als angehobene oder hervorstehende Linie gerendert.</p>
+
+<h3 id="Attribute">Attribute</h3>
+
+<dl>
+ <dt>{{htmlattrdef("align")}} {{deprecated_inline}}</dt>
+ <dd>Legt die Ausrichtung der Linie fest. Wird kein Wert angegeben, ist der Standardwert <code>left</code>.</dd>
+ <dt>{{htmlattrdef("color")}} {{Non-standard_inline}}</dt>
+ <dd>Legt die Farbe der Linie durch einen Farbnamen oder einen hexadezimalen Wert fest.</dd>
+ <dt>{{htmlattrdef("noshade")}} {{deprecated_inline}}</dt>
+ <dd>Deaktiviert den Schatten.</dd>
+ <dt>{{htmlattrdef("size")}} {{deprecated_inline}}</dt>
+ <dd>Legt die Höhe der Linie in Pixeln fest.</dd>
+ <dt>{{htmlattrdef("width")}} {{deprecated_inline}}</dt>
+ <dd>Legt die Länge der Linie durch eine prozentuale Angabe oder eine Angabe in Pixeln fest.</dd>
+</dl>
+
+<h3 id="Beispiel">Beispiel</h3>
+
+<pre>  &lt;p&gt;Das ist der erste Absatz des Texts. Das ist der erste Absatz des Texts.
+     Das ist der erste Absatz des Texts. Das ist der erste Absatz des Texts.&lt;/p&gt;
+
+  &lt;hr&gt;
+
+  &lt;p&gt;Das ist der zweite Absatz des Texts. Das ist der zweite Absatz des Texts.
+     Das ist der zweite Absatz des Texts. Das ist der zweite Absatz des Texts.&lt;/p&gt;
+</pre>
+
+<p>Dieses HTML gibt das Folgende aus:</p>
+
+<p>Das ist der erste Absatz des Texts. Das ist der erste Absatz des Texts. Das ist der erste Absatz des Texts. Das ist der erste Absatz des Texts.</p>
+
+<hr>
+<p>Das ist der zweite Absatz des Texts. Das ist der zweite Absatz des Texts. Das ist der zweite Absatz des Texts. Das ist der zweite Absatz des Texts.</p>
+
+<h3 id="Hinweis">Hinweis</h3>
+
+<p>Um das Aussehen der Linie zu verändern oder die Abstände zu definieren, sollten <a href="/de/CSS" title="de/CSS">Cascading Style Sheets</a> verwendet werden.</p>
+
+<h3 id="Siehe_auch">Siehe auch</h3>
+
+<ul>
+ <li><a href="/de/HTML/Element/p" title="de/HTML/Element/p">HTML Paragraph Element</a></li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/de/web/html/element/html/index.html b/files/de/web/html/element/html/index.html
new file mode 100644
index 0000000000..54c1bf51a1
--- /dev/null
+++ b/files/de/web/html/element/html/index.html
@@ -0,0 +1,157 @@
+---
+title: <html>
+slug: Web/HTML/Element/html
+tags:
+  - Element
+  - HTML
+  - HTML Elemente
+  - HTML Referenz
+  - HTML Wurzel Element
+  - Referenz
+  - Web
+translation_of: Web/HTML/Element/html
+---
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Das <em>HTML Wurzel Element</em> (<strong><code>&lt;html&gt;</code></strong>) repäsentiert die Wurzel eines HTML Dokuments. Alle anderen Elemente müssen ein Nachfahre dieses Elements sein.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/de/docs/HTML/Content_categories" title="HTML/Content_categories">Inhalt Kategorien</a></th>
+   <td>Keine.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubter Inhalt</th>
+   <td>Ein {{HTMLElement("head")}} Element, gefolgt von einem {{HTMLElement("body")}} Element.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag Wegfall</th>
+   <td>Der Anfangstag darf weggelassen werden, wenn der erste Code kein Kommentar ist.<br>
+    Der Endtag darf weggelassen werden, wenn auf das Element unmittelbar kein Kommentar folgt.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte Elternelemente</th>
+   <td>Als das Wurzelelement eines Dokuments oder wo auch immer ein Fragment eines Unterdokuments in einem zusammengesetzten Dokument erlaubt ist.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM Schnittstelle</th>
+   <td>{{domxref("HTMLHtmlElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p><span style="line-height: 21px;">Dieses Element enhält die </span><a href="https://developer.mozilla.org/de/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globale Attribute</a><span style="line-height: 21px;">.</span></p>
+
+<dl>
+ <dt>{{htmlattrdef("manifest")}} {{HTMLVersionInline(5)}} {{Gecko_minversion_inline(1.9)}}</dt>
+ <dd>Gibt die URI einer manifesten Quelle an, die Quellen anzeigen, welche lokal gespeichert werden sollen. Siehe <a href="/de/docs/HTML/Using_the_application_cache" title="/en-US/docs/HTML/Using_the_application_cache">Benutzung des Application Cache</a> für weitere Details.</dd>
+ <dt>{{htmlattrdef("version")}} {{deprecatedGeneric('inline','HTML4.01')}} {{obsoleteGeneric('inline','HTML5')}}</dt>
+ <dd>Gibt die Version der Definition des HTML Dokumententyps an, welches das aktuelle Dokument besitzt. Dieses Attribut ist nicht benötigt, weil die Versionsinformation in der Deklaration des Dokumententyps diese Information bereits liefert und ist damit überflüssig.</dd>
+ <dt>{{htmlattrdef("xmlns")}}</dt>
+ <dd>Gibt den XML Namensraum des Dokuments an. Der Standardwert ist "http://www.w3.org/1999/xhtml". Das ist in XHTML essentiell, doch in HTML5 optional.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Der benutzte DOCTYPE wird im folgenden Beispiel benutzt, um HTML5 anzuzeigen.</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt; ... &lt;/head&gt;
+  &lt;body&gt; ... &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Notizen">Notizen</h2>
+
+<p>Weil das <code>&lt;html&gt;</code> Element das erste Element außer Kommentare in einem Dokument ist, wird es als das Wurzelelement bezeichnet. Obwohl dieser Tag mit <a href="/en-US/docs/HTML" title="HTML">HTML</a> nicht notwendig anzugeben ist oder nur angedeutet werden kann, muss es in <a href="/en-US/docs/XHTML" title="XHTML">XHTML</a> geöffnet und geschlossen sein.</p>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-html-element', '&lt;html&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'semantics.html#the-html-element', '&lt;html&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.3', '&lt;html&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser-Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funktion</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basis Unterstützung</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funktion</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basis Unterstützung</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>MathML Top-Level Element: {{MathMLElement("math")}}</li>
+ <li>SVG Top-Level Element: {{SVGElement("svg")}}</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/de/web/html/element/i/index.html b/files/de/web/html/element/i/index.html
new file mode 100644
index 0000000000..a1b7fb8e88
--- /dev/null
+++ b/files/de/web/html/element/i/index.html
@@ -0,0 +1,156 @@
+---
+title: <i>
+slug: Web/HTML/Element/i
+tags:
+  - HTML
+  - Textformatierung
+  - semantisch
+  - tag
+translation_of: Web/HTML/Element/i
+---
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+
+<p>Das <strong>HTML-Element <code>&lt;i&gt;</code>  </strong>hebt einen Teil vom Rest eines Textes ab um ein Beispiel, einen Fachbegriff, einen Ausdruck aus einer Fremdsprache oder die Gedanken einer fiktionalen Figur deutlicher vom Rest abzugrenzen. Das Element stellt diese Inhalte dann <em>kursiv</em> dar.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">I</a>nhaltliche Kategorien</th>
+   <td>
+    <p><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Fließtexte</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Ausdruckstext,</a> greifbarer/offensichtlicher Inhalt</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Zugelassener Inhalt</th>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Phrasing_content/">ausdrückender Inhalt</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Unterdrückte Tags</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte elterliche Elemente</th>
+   <td>
+    <p>Sämtliche Elemente mit <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">ausdrückendem Inhalt</a>.<br>
+     <br>
+     (Textform!)</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">DOM-Schnittstelle</th>
+   <td>{{domxref("HTMLElement")}} Seit Gecko 1.9.2 (Firefox 4) inklusive unterstützt Firefox die {{domxref("HTMLSpanElement")}}-Schnittstelle für dieses Element.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p>Dieses Element unterstützt nur die <a href="/en-US/docs/Web/HTML/Global_attributes">Globalen Attribute</a>.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: html">&lt;p&gt;Der lateinische Ausdruck &lt;i&gt;Veni, vidi, vici&lt;/i&gt; wird häufig in Musik, Kunst und Literatur verwendet.&lt;/p&gt;
+</pre>
+
+<h3 id="Result" name="Result">Ergebnis</h3>
+
+<p>Der lateinische Ausdruck <em>Veni, vidi, vici</em> wird häufig in Kunst, Musik und Literatur verwendet. </p>
+
+<h2 id="Notizen">Notizen</h2>
+
+<p>In früheren Versionen der HTML-Spezifikation war der <code>&lt;i&gt;</code>-Tag nur ein Element um den angezeigten Text zu formatieren, ähnlich wie der <code>&lt;b&gt;-T</code>ag für die Darstellung von fettem Text verwendet wird.</p>
+
+<p>Diese Funktion wurde zunehmend unüblicher: Heute werden <code>&lt;i&gt;</code>-Tags häufiger für semantische Abgrenzungen als für Textformatierungen verwendet. Trotzdem stellen die Browser den Text kursiv dar, auch wenn diese Funktion per Definiton nicht mehr erwünscht ist.</p>
+
+<p>Wir empfehlen, dieses Element nur zu verwenden, wenn kein anderes passenderes Element gefunden werden kann. Zum Beispiel:</p>
+
+<ul>
+ <li>Benutzen Sie das Element {{HTMLElement("em")}}, um Betonungen darszustellen.</li>
+ <li>Benutzen Sie das Element {{HTMLElement("strong")}}, um einen Textabschnitt als wichtig darzustellen.</li>
+ <li>Benutzen Sie das Element {{HTMLElement("mark")}}, um Relevanz darzustellen.</li>
+ <li>Um ein kreatives Werk (ein Buch, ein Bühnenwerk oder ein Musikstück) kennzuzeichnen, wird das Element "{{HTMLElement("cite")}}" verwendet.</li>
+ <li>Verwenden Sie das Element {{HTMLElement("dfn")}}, um definierende Instanzen kennzuzeichnen.</li>
+</ul>
+
+<p>Eine gute Idee ist es auch, das <strong>class</strong>-Attribut zu verwenden, um zu definieren, warum und wie das Element verwendet wird.</p>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-i-element', '&lt;i&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-i-element', '&lt;i&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '&lt;b&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funktion</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>grundlegend</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funktion</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>grundlegend</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/de/web/html/element/iframe/index.html b/files/de/web/html/element/iframe/index.html
new file mode 100644
index 0000000000..3549bfb18a
--- /dev/null
+++ b/files/de/web/html/element/iframe/index.html
@@ -0,0 +1,44 @@
+---
+title: iframe
+slug: Web/HTML/Element/iframe
+tags:
+  - HTML
+  - HTML Elemente
+  - HTML Referenz
+translation_of: Web/HTML/Element/iframe
+---
+<p>Mit dem <code>&lt;iframe&gt;</code> HTML Element („inline frame“) kann eine weitere HTML Seite in die aktuelle Seite eingebunden werden.</p>
+
+<p>Genau wie <a href="/de/HTML/Element/frame" title="de/HTML/Element/frame">&lt;frame&gt;</a>s, verfügen <code>&lt;iframe&gt;</code>s über ein <code><a href="/de/DOM/window.frames" title="de/DOM/window.frames">window.frame</a></code> Pseudo-Array.</p>
+
+<h3 id="Attribute">Attribute</h3>
+
+<p>Legt den Namen des Frames fest, sodass dieser Ziel eines <a href="/de/HTML/Element/a" title="de/HTML/Element/a">HTML Anker Element</a> (mit dem <code>target</code> Attribut) werden kann.</p>
+
+<dl>
+ <dt>src</dt>
+ <dd>Bestimmt die URL der Seite, die eingebunden werden soll.</dd>
+ <dt>width</dt>
+ <dd>Gibt die Breite des Frames in Prozent oder in Pixeln an.</dd>
+ <dt>height</dt>
+ <dd>Gibt die Höhe des Frames in Prozent oder in Pixeln an.</dd>
+ <dt>frameborder</dt>
+ <dd>Legt die Breite des Frame-Rahmens fest.</dd>
+ <dt>name</dt>
+</dl>
+
+<h3 id="Scripting">Scripting</h3>
+
+<p>Mit dem DOM <code>iframe</code> Element können Scripte Zugang zum <a href="/de/DOM/window" title="de/DOM/window"><code>window</code></a> Objekt der eingebundenen HTML Seite über die <code>contentWindow</code> Eigenschaft erhalten. Die <code>contentDocument</code> Eigenschaft bezieht sich auf das Dokument innerhalb des <code>iframe</code> Elements (gleichbedeutend zu <code>contentWindow.document</code>), wird aber nicht von Internet Explorer Versionen vor IE8 unterstützt.</p>
+
+<p>Aus dem Inneren eines Frames kann ein Script über <code><a href="/de/DOM/window.parent" title="de/DOM/window.parent">window.parent</a></code> einen Bezug zum Elternelement herstellen.</p>
+
+<p>Die Scripte, die versuchen Zugang zum Inhalt eines Frames zu erhalten, unterliegen der <a href="/de/JavaSkripts_gleicher_Herkunft" title="de/JavaSkripts_gleicher_Herkunft">„Same-origin policy“</a>, und können auf die meisten Eigenschaften nicht zugreifen, wenn das Dokument von einer anderen Domain geladen wird. Das betrifft auch Skripte innerhalb eines Frames, die versuchen sich Zugang zum übergeordneten Fenster zu verschaffen. Domain-übergreifende Kommunikation kann per <code><a href="/de/DOM/window.postMessage" title="de/DOM/window.postMessage">window.postMessage</a></code> erreicht werden.</p>
+
+<h3 id="Beispiel">Beispiel</h3>
+
+<pre>var iframe = window.getElementsByTagName( "iframe" )[ 0 ];
+alert( "Frame title: " + iframe.contentWindow.title );
+</pre>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/de/web/html/element/image/index.html b/files/de/web/html/element/image/index.html
new file mode 100644
index 0000000000..56814f7701
--- /dev/null
+++ b/files/de/web/html/element/image/index.html
@@ -0,0 +1,48 @@
+---
+title: <image>
+slug: Web/HTML/Element/image
+tags:
+  - Element
+  - HTML
+  - HTML-Element
+  - HTML-Element-Referenz
+  - HTML-Referenz
+  - Nicht-Standard
+  - Obsolet
+  - Referenz
+translation_of: Web/HTML/Element/image
+---
+<div>{{obsolete_header}}</div>
+
+<div>{{non-standard_header}}</div>
+
+<p>Das HTML-Element <code>&lt;image&gt;</code> ist ein Überbleibsel einer alten Version von HTML, welche im Laufe der Zeit obsolet geworden ist; Stattdessen wird dazu geraten das Standard {{HTMLElement("img")}}-Element zu verwenden. Tatsächlich verwendet die Spezifikation wortwörtlich die Worte "Frag nicht" zur Beschreibung des Elements.</p>
+
+<div class="note">
+<p><strong>Nicht benutzen!<em> </em></strong>Um Bilder darzustellen, verwende das übliche {{HTMLElement("img")}}-Element.</p>
+</div>
+
+<p>Auch wenn Browser versuchen werden, eine automatische Konvertierung in ein {{HTMLElement("img")}}-Element vorzunehmen, wird das nicht immer so sein, und auch wird der Versuch nicht immer glücken, wegen der unterschiedlichen Wege dorthin. Also benutze das Element einfach nicht, wenn dir an deinen Nutzern etwas gelegen ist.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Es war vielleicht einmal Bestandteil der Spezifikation, aber niemand scheint sich mehr daran zu erinnern. Sicher ist, es ist kein Bestandteil mehr. Vermeide es wie die Pest.</p>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>Im Allgemeinen werden Browser versuchen das Element in ein <code>&lt;img&gt;</code> abzubilden, jedoch nur wenn das {{htmlattrxref("src", "img")}}-Attribute ebenso angegeben ist.  Die Erstellung eines<code> &lt;image&gt;</code>-Elements ohne ein <code>src</code>-Attribut resultiert in ein <code>HTMLElement</code>-Objekt mit dem lokalen Elementnamen "image". Wenn das Element jedoch mit einem <code>src</code>-Attribut erstellt wurde, ist das Ergebnis stattdessen ein <code>HTMLImageElement</code> und sein lokaler Elementname wird geändert zu "img".</p>
+
+<p>Dennoch bedeutet dies nicht, dass es eine gute Idee ist das Element zu nutzen. Ist es nämlich nicht.</p>
+
+
+
+<p>{{Compat("html.elements.image")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{HTMLElement("img")}}: Die richtige Art ein Bild in einem Dokument anzuzeigen.</li>
+ <li>{{HTMLElement("picture")}}: Eine mächtigere und richtige Art ein Bild in einem Dokument anzuzeigen.</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/de/web/html/element/img/index.html b/files/de/web/html/element/img/index.html
new file mode 100644
index 0000000000..01c64c5747
--- /dev/null
+++ b/files/de/web/html/element/img/index.html
@@ -0,0 +1,348 @@
+---
+title: <img>
+slug: Web/HTML/Element/img
+translation_of: Web/HTML/Element/img
+---
+<p>{{HTMLRef}}</p>
+
+<p>Das Element <strong>&lt;img&gt;</strong> fügt eine Grafik in ein Dokument ein.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorien</a></th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Fließender Inhalt</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">gestaltender Inhalt</a>, eingebetteter Inhalt, fühlbarer Inhalt.<br>
+    Falls das Attribut {{htmlattrxref("usemap", "img")}} gesetzt ist, gehört das Element auch zu den interaktiven Inhalten.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubter Inhalt</th>
+   <td>Keiner, es ist ein {{Glossary("leeres Element")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag-Verwendung</th>
+   <td>Muss einen Start-Tag, darf jedoch keinen End-Tag haben.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte Elternelemente</th>
+   <td>Jedes Element, das gestaltenden Inhalt erlaubt.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM-Schnittstelle</th>
+   <td>{{domxref("HTMLImageElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes">Attributes</h2>
+
+<p>Dieses Element unterstützt die <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">globalen Attribute</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("align")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}</dt>
+ <dd>Ausrichtung der Grafik im Verhältnis zu ihrer Umgebung.<br>
+ Benutzen Sie stattdessen die CSS-Eigenschaft {{cssxref('vertical-align')}}.</dd>
+ <dt>{{htmlattrdef("alt")}}</dt>
+ <dd>Text, der vom Browser alternativ statt der Grafik angezeigt werden kann, zum Beispiel falls sie noch nicht heruntergeladen wurde, bei Übertragungsfehlern oder falls sie in keinem <a href="#Supported_image_formats" title="HTML/Element/Img#Supported image formats">unterstützten Format</a> vorliegt. Der Benutzer kann die Grafikdarstellung auch abgeschaltet haben oder einen Browser benutzen, der keine Grafik darstellen kann.</dd>
+ <dd>Der Text sollte das von der Grafik Dargestellte kurz und sinnvoll wiedergeben, so dass der Inhalt, den sie transportieren, ersichtlich wird. Ist dies nicht möglich, sollte das Attribut weggelassen werden.</dd>
+ <dd>Reine Dekorationselemente sollten hingegen mit einem leeren Attribut (<code>alt=""</code>) eingefügt werden; Alternativtexte wie "Roter Punkt" sind unbedingt zu vermeiden!</dd>
+ <dd>
+ <div class="note">
+ <p><strong>Hinweis:</strong> Eine aussagekräftige Beschreibung des Bildes ist vor allem für die Barrierefreiheit von elementarer Bedeutung!<br>
+  Dies gilt auch für das leere Attribut <code>alt=""</code>. Browser können die (Ersatz-) Darstellung des img-Elements in diesem Fall ganz überspringen, was merklich der Übersichtlichkeit dient – niemand möchte einen Text vorgelesen bekommen, ständig von nutzlosen Hinweisen wie "Roter Punkt" unterbrochen.</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("border")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}</dt>
+ <dd>Breite des Rahmens um die Grafik. Benutzen Sie stattdessen die CSS-Eigenschaft {{cssxref('border')}}.</dd>
+ <dt>{{htmlattrdef("crossorigin")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Ist dieses Attribut gesetzt, wird die betreffende Grafik mittels <a href="/en-US/docs/CORS_Enabled_Image" title="CORS_Enabled_Image">CORS </a>(Cross-Origin Resource Sharing) abgerufen, wahlweise ohne den Benutzer zu authentifizieren oder mit:
+ <dl>
+  <dt><code>"anonymous"</code></dt>
+  <dd>Es wird eine CORS-basierte Anfrage durchgeführt, jedoch wird keine Benutzerauthentifizierung mitgesendet (Cookies, X.509-Zertifikat, HTTP-Authentifizierung).</dd>
+  <dt><code>"use-credentials"</code></dt>
+  <dd>Es wird eine CORS-basierte Anfrage durchgeführt, gegebenenfalls mit Benutzerauthentifizierung (Cookies, X.509-Zertifikat, HTTP-Authentifizierung).</dd>
+ </dl>
+ Hat das Attribut einen ungültigen Wert, wird stattdessen die Einstellung <strong>anonymous</strong> angenommen.<br>
+ Fehlt das crossorigin-Attribut, wird die Grafik ohne CORS heruntergeladen (d.h. ohne die HTTP-Kopfzeile {{HTTPHeader('Origin')}}).</dd>
+ <dd>Damit das Dokument uneingeschränkt auf die Grafik zugreifen kann (zum Beispiel im {{HTMLElement("canvas")}}-Element), muss der Server zusätzlich mit einer {{HTTPHeader('Access-Control-Allow-Credentials')}}-Angabe antworten, die den Ursprung des Dokuments einschließt.</dd>
+ <dd>Weitere Informationen sind im Artikel über <a href="/en-US/docs/HTML/CORS_settings_attributes" title="CORS settings attributes">CORS-Attribute</a> nachzulesen.</dd>
+ <dt>{{htmlattrdef("height")}}</dt>
+ <dd>Tatsächliche Höhe der Grafik in {{HTMLVersionInline(5)}} CSS-Pixeln, in {{HTMLVersionInline(4)}} Bildschirmpixeln oder als prozentualer Wert.</dd>
+ <dt>{{htmlattrdef("hspace")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}</dt>
+ <dd>Breite des Innenabstands links und rechts der Grafik. Benutzen Sie stattdessen die CSS-Eigenschaften {{cssxref('padding-left')}} und {{cssxref('padding-right')}} bzw. {{cssxref('padding')}}.</dd>
+ <dt>{{htmlattrdef("ismap")}}</dt>
+ <dd>Serverseitig verweissensitive Grafik. Ist dieses Attribut gesetzt, werden bei jedem Klick die betreffenden Mauskoordinaten an den Server gesendet.
+ <div class="note">
+ <p><strong>Hinweis: </strong>Dieses Attribut ist nur bei <code>&lt;img&gt;</code>-Elementen erlaubt, die sich innerhalb eines {{htmlelement("a")}}-Elements mit einem gültigen {{htmlattrxref("href","a")}}-Attribut befinden.</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("longdesc")}}</dt>
+ <dd>URL einer längeren Beschreibung des Bildes, die als Ergänzung zum <strong>alt</strong>-Text dient.</dd>
+ <dt>{{htmlattrdef("name")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}</dt>
+ <dd>Name des Elements. Benutzen Sie stattdessen das <strong>id</strong>-Attribut.</dd>
+ <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt>
+ <dd>Definiert, was beim Abruf der Grafik als verweisende URL in der HTTP-Kopfzeile {{HTTPHeader('Referer')}} an den Server gesendet werden soll:
+ <ul>
+  <li><code>"no-referrer"</code>: Es wird nichts gesendet.</li>
+  <li>"<code>no-referrer-when-downgrade</code>": Wurde das die Grafik enthaltende Dokument über eine gesicherte Verbindung (HTTPS) abgerufen, wird nur dann <em>keine</em> verweisende URL gesendet, falls die Grafik über eine <em>ungesicherte</em> Verbindung abgerufen wird.<br>
+   Dies ist das Standardverhalten des Browsers, falls nichts anderes angegeben wurde.</li>
+  <li><code>"origin"</code>: Es wird der Ursprung des Dokuments gesendet, üblicherweise das Protokoll, die Domain und gegebenenfalls der Port (zum Beispiel <code>http://example.com:88</code>).</li>
+  <li>"<code>origin-when-cross-origin</code>": Wie <code>origin</code>, jedoch nur, falls die Grafik von einem anderen Server abgerufen wird. Ist der Server der gleiche, wird die vollständige URL des Dokuments, einschließlich Pfad, gesendet.</li>
+  <li><code>"unsafe-url"</code>: Es wird immer die vollständige verweisende URL gesendet (jedoch ohne Fragmentbezeichner, Benutzername und Passwort).<br>
+   Dies ist unsicher, da zuvor über gesicherte Verbindungen abgerufene Informationen (die URL des Dokuments) auch über nichtgesicherte gesendet werden könnten (als verweisende URL beim Abruf der Grafik).</li>
+ </ul>
+
+ <div class="note">
+ <p><strong>Hinweis:  </strong>In älteren Versionen hieß dieses Attribut <code>referrer</code>.</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("sizes")}}{{HTMLVersionInline(5)}}</dt>
+ <dd>Mit dem <code>sizes</code>-Attribut wird die Anzeigegröße der Grafik in Abhängigkeit von der Größe des Anzeigegeräts festgelegt. Es enthält mehrere, durch Kommata getrennte Einträge, jeweils bestehend aus:
+ <ol>
+  <li>einer CSS-Medienbedingung, zum Beispiel <code>(max-width: 480px)</code>. Diese Angabe entfällt für den letzten Eintrag.</li>
+  <li>einer CSS-Größenangabe.</li>
+ </ol>
+
+ <p>Anhand dieser Einträge wählt der Browser eine der in <code>srcset</code> gebenenen Grafikquellen, sofern diese mit Breitenangaben ('<code>w</code>') versehen sind.<br>
+  Fehlt das <code>srcset</code>-Attribut oder enthält es keine Breitenangaben, wird <code>sizes</code> ignoriert.</p>
+ </dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>URL der Grafik. Dieses Attribut ist zwingend erforderlich.<br>
+ Browser, die <code>srcset</code> unterstützen, behandeln <code>src</code> als Grafik mit einer Pixeldichte von <code>1x</code>, sofern keine andere Grafik mit dieser Dichte in <code>srcset</code> aufgeführt ist oder falls <code>srcset</code> '<code>w</code>'-Bezeichner enthält.</dd>
+ <dt>{{htmlattrdef("srcset")}}{{HTMLVersionInline(5)}}</dt>
+ <dd><code>srcset</code> erlaubt das Bereitsstellen derselben Grafik in verschiedenen Versionen für niedrig- und hochauflösende Anzeigegeräte. Letztere profitieren von der höheren Bildqualität -bei größerer Datenmenge-, erstere von der geringeren Datenmenge.</dd>
+ <dd><code>srcset</code> enthält mehrere – durch Kommata getrennte – Einträge, jeweils bestehend aus:
+ <ol>
+  <li>einer URL,</li>
+  <li>optional, Leerzeichen gefolgt von einem Kennwert:
+   <ul>
+    <li>der tatsächlichen Breite dieser Quelle (positive Ganzzahl) gefolgt von dem Buchstaben <code>w</code>. Dieser Wert steht in Abhängigkeit zu den Einträgen im <code>sizes</code>-Attribut.</li>
+    <li>eine abstrakte Pixeldichte in Form einer positiven Kommazahl gefolgt von dem Buchstaben <code>x</code>.</li>
+   </ul>
+  </li>
+ </ol>
+
+ <p>Ist kein Kennwert gegeben, wird für die jeweilige Quelle <code>1x</code> angenommen.</p>
+
+ <p>Breitenangaben und Pixeldichten dürfen nicht gleichzeitig verwendet werden.  Doppelte Kennwerte (zum Beispiel zwei Quellen desselben <code>srcset</code>-Attributs mit dem Kennwert '<code style="font-style: normal;">4x</code>') sind ebenfalls nicht erlaubt.</p>
+
+ <p>Die Entscheidung, welche Quelle genutzt wird, obliegt alleine dem Browser. Neben den Eigenschaften der Anzeige können so auch Benutzereinstellungen oder die Internetverbindung berücksichtigt werden.</p>
+ </dd>
+ <dt>{{htmlattrdef("width")}}</dt>
+ <dd>Breite der Grafik in {{HTMLVersionInline(5)}} CSS-Pixeln, {{HTMLVersionInline(4)}} Bildschirmpixeln oder als prozentuale Angabe.</dd>
+ <dt>{{htmlattrdef("usemap")}}</dt>
+ <dd>Verweissensitive Grafik; das usemap-Attribut enthält das URL-Fragment (beginnend mit '#') der zugehörigen <a href="/en-US/docs/HTML/Element/map" title="HTML/Element/Map">Karte</a>.
+ <div class="note">
+ <p><strong>Hinweis: </strong><code>usemap</code> kann nicht benutzt werden, falls sich das <code>&lt;img&gt;</code>-Element in einem {{htmlelement("a")}}- oder  {{HTMLElement("button")}}-Element befindet. Die Verwendung würde mit <code>ismap</code> kollidieren.</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("vspace")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}</dt>
+ <dd>Breite des Innenabstands über und unter der Grafik. Benutzen Sie stattdessen die CSS-Eigenschaften {{cssxref('padding-top')}} und {{cssxref('padding-bottom')}} bzw. {{cssxref('padding')}}.</dd>
+</dl>
+
+<h2 id="Unterstützte_Grafikformate">Unterstützte Grafikformate</h2>
+
+<p>Der HTML-Standard gibt nicht vor, welche Grafikformate unterstützt werden müssen. JPEG und GIF sind in allen grafischen Browsern zu finden, ebenso mittlerweile das etwas jüngere PNG. Die Unterstützung für SVG ist beim Internet Explorer und älteren Android-Versionen nur rudimentär vorhanden, breite Unterstützung gibt es erst durch seit 2015 erschienene Browser (insbesondere des Internet-Explorer-Nachfolgers Edge).</p>
+
+<p>Gecko unterstützt die folgenden Formate:</p>
+
+<ul>
+ <li><a class="external" href="http://en.wikipedia.org/wiki/JPEG" title="http://en.wikipedia.org/wiki/JPEG">JPEG</a></li>
+ <li><a class="external" href="http://en.wikipedia.org/wiki/Graphics_Interchange_Format" title="http://en.wikipedia.org/wiki/Graphics_Interchange_Format">GIF</a>, einschließlich animierter</li>
+ <li><a class="external" href="http://en.wikipedia.org/wiki/Portable_Network_Graphics" title="http://en.wikipedia.org/wiki/Portable_Network_Graphics">PNG</a></li>
+ <li><a href="/en-US/docs/Animated_PNG_graphics" title="Animated PNG graphics">APNG</a> {{gecko_minversion_inline("1.9.2")}}</li>
+ <li><a href="/en-US/docs/SVG" title="SVG">SVG</a> {{gecko_minversion_inline("2.0")}}</li>
+ <li><a class="external" href="http://en.wikipedia.org/wiki/BMP_file_format" title="http://en.wikipedia.org/wiki/BMP_file_format">BMP</a></li>
+ <li><a class="external" href="http://en.wikipedia.org/wiki/ICO_%28file_format%29" title="http://en.wikipedia.org/wiki/ICO_%28file_format%29">BMP ICO</a></li>
+ <li><a class="external" href="http://en.wikipedia.org/wiki/ICO_%28file_format%29" title="http://en.wikipedia.org/wiki/ICO_%28file_format%29">PNG ICO</a> {{gecko_minversion_inline("9.0")}}</li>
+</ul>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Das <a class="external" href="http://en.wikipedia.org/wiki/X_BitMap" title="http://en.wikipedia.org/wiki/X_BitMap">XBM</a>-Format wird seit Gecko 1.9.2 nicht mehr unterstützt.</p>
+</div>
+
+<h2 id="Beeinflussung_durch_CSS">Beeinflussung durch CSS</h2>
+
+<p>CSS behandelt <code>&lt;img&gt;</code> als <a href="/en-US/docs/CSS/Replaced_element" title="CSS/Replaced_element">ersetztes Element</a>.</p>
+
+<p>Bei der Verwendung im <code>inline</code>-Modus zusammen mit {{cssxref("vertical-align")}}<code>: baseline</code> wird die Unterkante der Grafik an der Grundline des Elternelements ausgerichtet, da die Grafik selbst keine Grundline besitzt.</p>
+
+<p>Ob eine Grafik festgelegte Abmessungen, d.h. Breite und Höhe hat, hängt vom Grafiktyp ab. SVG-Grafiken verfügen zum Beispiel nicht unbedingt darüber, sie erhalten ihre tatsächlichen Abmessungen aus ihrer Verwendung.</p>
+
+<h2 id="Fehlerbehandlung">Fehlerbehandlung</h2>
+
+<p>Schlägt die Übertragung oder Darstellung der Grafik fehl, wird die wurde mittels {{htmlattrxref("onerror")}} festgelegte Ereignisbehandlung ausgeführt. Mögliche Ursachen sind unter anderem:</p>
+
+<ul>
+ <li>Das {{htmlattrxref("src", "img")}}-Attribute ist leer oder <code>null</code>.</li>
+ <li>Die für <code>src</code> angegebene URL ist die gleiche wie die des Dokuments.</li>
+ <li>Die Grafikdaten sind unlesbar beschädigt oder auch nur, falls weder <code>width</code> noch <code>height</code> angegeben sind, in einer Weise, die es unmöglich macht, Abmessungen auszulesen.</li>
+ <li>Das Grafikformat wird vom {{Glossary("Browser")}} nicht unterstützt.</li>
+</ul>
+
+<h2 id="Beispiel_1">Beispiel 1</h2>
+
+<pre class="brush: html">&lt;img src="mdn-logo-sm.png" alt="MDN"&gt;
+</pre>
+
+<p><img alt="MDN" src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"></p>
+
+<h2 id="Beispiel_2_Anklickbare_Grafik_als_Verweis">Beispiel 2: Anklickbare Grafik als Verweis</h2>
+
+<pre class="brush: html">&lt;a href="https://developer.mozilla.org/"&gt;&lt;img src="mdn-logo-sm.png" alt="MDN"&gt;&lt;/a&gt;</pre>
+
+<p><a href="https://developer.mozilla.org/"><img alt="MDN" src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"> </a></p>
+
+<h2 id="Beispiel_3_Das_srcset-Attribut">Beispiel 3: Das <code>srcset</code>-Attribut</h2>
+
+<p>Das <code>src</code>-Attribut hat als Vorgabe den Wert <code>1x</code> bei Browsern, die <code>srcset</code> unterstützen.</p>
+
+<pre class="brush: html"> &lt;img src="mdn-logo-sm.png"
+      alt="MDN"
+      srcset="mdn-logo-HD.png 2x"&gt;</pre>
+
+<h2 id="Beispiel_4_Die_Benutzung_von_srcset_und_size">Beispiel 4: Die Benutzung von <code>srcset</code> und <code>size </code></h2>
+
+<p>Browser, die <code>srcset</code> unterstützen, ignorieren <code>src</code> bei der Benutzung des Bezeichners '<code>w</code>'. Trifft im Beispiel die Bedingung <code>(min-width: 600px)</code> zu, ist die Grafik 200px breit, andernfalls 50vw (50% der Breite des Anzeigegeräts).</p>
+
+<pre class="brush: html" style="font-size: 14px;"> &lt;img src="clock-demo-thumb-200.png"
+      alt="Clock"
+      srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w"
+      sizes="(min-width: 600px) 200px, 50vw"&gt;</pre>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Hinweis</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td>
+   <td>{{Spec2('Referrer Policy')}}</td>
+   <td>Attribut <code>referrer</code> hinzugefügt.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-img-element', '&lt;img&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-img-element', '&lt;img&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.2', '&lt;img&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Eigenschaft</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>&lt;img&gt;</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>srcset</code> </td>
+   <td>{{CompatChrome(34.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("32.0")}} (behind a pref)</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(21)}}</td>
+   <td>{{CompatSafari(7.1)}}</td>
+  </tr>
+  <tr>
+   <td><code>referrer</code> </td>
+   <td>{{CompatChrome(46.0)}} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("42.0")}} (behind a pref)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Eigenschaft</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>srcset</code> </td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(34.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>21</td>
+   <td>iOS 8</td>
+   <td>{{CompatChrome(34.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>referrer</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(46.0)}} [1]</td>
+   <td>{{CompatGeckoMobile("42.0")}} (behind a pref)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(46.0)}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>[1] Zuschaltbar als <code>referrerpolicy</code> implementiert.</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>HTML-Elemente {{HTMLElement("picture")}}, {{HTMLElement("object")}} und {{HTMLElement("embed")}}.</li>
+</ul>
+
+<div> </div>
diff --git a/files/de/web/html/element/index.html b/files/de/web/html/element/index.html
new file mode 100644
index 0000000000..a623bb8edd
--- /dev/null
+++ b/files/de/web/html/element/index.html
@@ -0,0 +1,249 @@
+---
+title: Element
+slug: Web/HTML/Element
+tags:
+  - HTML Elemente
+  - HTML Referenz
+translation_of: Web/HTML/Element
+---
+<div>{{HTMLSidebar("Elements")}}</div>
+
+<h2 id="HTML_Elemente">HTML Elemente</h2>
+
+<p>In dieser Liste sind alle HTML-Elemente aufgelistet, die in HTML5 oder vorherigen Versionen spezifiziert wurden. Wenn die Elemente in spitzen Klammern eingeschlossen sind, sind es HTML-Tags (<code>&lt;elementenname&gt;</code>). Elemente sind "Entities", die spezifizieren, wie das HTML-Dokument aufgebaut ist. Außerdem bestimmen sie, welcher Inhaltstyp in welchem Teil des HTML-Dokuments eingefügt werden sollte.</p>
+
+<p>Diese Seite listet alle aktuellen Standard-HTML-Tags auf, aber auch obsolete. Elemente, die erst in HTML5 eingeführt wurden, werden referenziert, wobei die anderen Elemente in HTML5 auch gültig sind.</p>
+
+<p>In HTML wird ein Element über das Start-Tag definiert und wenn das Element weiteren Inhalt enthält, wird ein Ende-Tag angefügt, das einen Slash <code>&lt;/elementenname&gt;</code> beinhaltet. Einige Elemente müssen nicht geschlossen werden, wie z.B. das <code>&lt;img&gt;</code>-Tag. Diese Elemente werden auch void-Elemente genannt. Das HTML–Dokument besteht aus beliebig vielen Elementen, wobei diese Struktur der Elemente als Baum bezeichnet wird. Jedes Element repräsentiert den Inhalt über den Tag-Namen. So repräsentiert das <code>&lt;title&gt;</code>-Element den Titel des Dokuments. Weitere Elemente finden sie in der Liste.</p>
+
+<p>Die Elemente, die mit dem  <a href="https://developer.mozilla.org/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="https://developer.mozilla.org/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a>  Symbol gekennzeichnet sind, wurden in HTML5 eingeführt. Einige hier gelistete Elemente wurden in der HTML5 Spezifikation erweitert oder modifiziert. Elemente, die veraltet oder keine Standardelemente sind, sind ausgegraut. Es wird davon abgeraten diese Elemente in neuen Webseiten zu benutzen und sie sollten von existierenden Seiten entfernt werden, um unerwünschtes Verhalten zu vermeiden. </p>
+
+<p>Das Symbol {{FontAwesomeIcon("icon-cogs")}} kennzeichnet die Elemente, die in <a href="http://www.w3.org/TR/components-intro/" title="http://www.w3.org/TR/components-intro/">Web Components collection of specifications </a>definiert wurden.</p>
+
+<div class="index widgeted"><span id="A">A</span>
+
+<ul>
+ <li>{{ HTMLElement("a") }}</li>
+ <li>{{ HTMLElement("abbr") }}</li>
+ <li><s class="obsoleteElement">{{ HTMLElement("acronym") }}</s></li>
+ <li>{{ HTMLElement("address") }}</li>
+ <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("applet") }}</s></li>
+ <li>{{ HTMLElement("area") }}</li>
+ <li class="html5">{{ HTMLElement("article") }}</li>
+ <li class="html5">{{ HTMLElement("aside") }}</li>
+ <li class="html5">{{ HTMLElement("audio") }}</li>
+</ul>
+<span id="B">B</span>
+
+<ul>
+ <li>{{ HTMLElement("b") }}</li>
+ <li>{{ HTMLElement("base") }}</li>
+ <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("basefont") }}</s></li>
+ <li class="html5">{{ HTMLElement("bdi") }}</li>
+ <li>{{ HTMLElement("bdo") }}</li>
+ <li><s class="nonStdElement">{{ HTMLElement("bgsound") }}</s></li>
+ <li><s class="obsoleteElement">{{ HTMLElement("big") }}</s></li>
+ <li><s class="nonStdElement">{{ HTMLElement("blink") }}</s></li>
+ <li>{{ HTMLElement("blockquote") }}</li>
+ <li>{{ HTMLElement("body") }}</li>
+ <li>{{ HTMLElement("br") }}</li>
+ <li>{{ HTMLElement("button") }}</li>
+</ul>
+<span id="C">C</span>
+
+<ul>
+ <li class="html5">{{ HTMLElement("canvas") }}</li>
+ <li>{{ HTMLElement("caption") }}</li>
+ <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("center") }}</s></li>
+ <li>{{ HTMLElement("cite") }}</li>
+ <li>{{ HTMLElement("code") }}</li>
+ <li>{{ HTMLElement("col") }}</li>
+ <li>{{ HTMLElement("colgroup") }}</li>
+ <li class="webcomp">{{ HTMLElement("content")}}</li>
+ <li></li>
+</ul>
+<span id="D">D</span>
+
+<ul>
+ <li class="html5">{{ HTMLElement("data") }}</li>
+ <li class="html5">{{ HTMLElement("datalist") }}</li>
+ <li>{{ HTMLElement("dd") }}</li>
+ <li class="webcomp">{{ HTMLElement("decorator")}}</li>
+ <li>{{ HTMLElement("del") }}</li>
+ <li class="html5">{{ HTMLElement("details") }}</li>
+ <li>{{ HTMLElement("dfn") }}</li>
+ <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("dir") }}</s></li>
+ <li>{{ HTMLElement("div") }}</li>
+ <li>{{ HTMLElement("dl") }}</li>
+ <li>{{ HTMLElement("dt") }}</li>
+</ul>
+<span id="E">E</span>
+
+<ul>
+ <li class="webcomp">{{ HTMLElement("element")}}</li>
+ <li>{{HTMLElement("em") }}</li>
+ <li class="html5">{{ HTMLElement("embed") }}</li>
+</ul>
+<span id="F">F</span>
+
+<ul>
+ <li>{{ HTMLElement("fieldset") }}</li>
+ <li class="html5">{{ HTMLElement("figcaption") }}</li>
+ <li class="html5">{{ HTMLElement("figure") }}</li>
+ <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("font") }}</s></li>
+ <li class="html5">{{ HTMLElement("footer") }}</li>
+ <li>{{ HTMLElement("form") }}</li>
+ <li><s class="obsoleteElement">{{ HTMLElement("frame") }}</s></li>
+ <li><s class="obsoleteElement">{{ HTMLElement("frameset") }}</s></li>
+</ul>
+<span id="G">G H</span>
+
+<ul>
+ <li>{{ HTMLElement("h1") }}</li>
+ <li>{{ HTMLElement("h2") }}</li>
+ <li>{{ HTMLElement("h3") }}</li>
+ <li>{{ HTMLElement("h4") }}</li>
+ <li>{{ HTMLElement("h5") }}</li>
+ <li>{{ HTMLElement("h6") }}</li>
+ <li>{{ HTMLElement("head") }}</li>
+ <li class="html5">{{ HTMLElement("header") }}</li>
+ <li class="html5"><s class="deprecatedElement obsoleteElement">{{ HTMLElement("hgroup") }}</s></li>
+ <li>{{ HTMLElement("hr") }}</li>
+ <li>{{ HTMLElement("html") }}</li>
+</ul>
+<span id="I">I</span>
+
+<ul>
+ <li>{{ HTMLElement("i") }}</li>
+ <li>{{ HTMLElement("iframe") }}</li>
+ <li>{{ HTMLElement("img") }}</li>
+ <li>{{ HTMLElement("input") }}</li>
+ <li>{{ HTMLElement("ins") }}</li>
+ <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("isindex") }}</s></li>
+</ul>
+<span id="J">J K</span>
+
+<ul>
+ <li>{{ HTMLElement("kbd") }}</li>
+ <li class="html5">{{ HTMLElement("keygen") }}</li>
+</ul>
+<span id="L">L</span>
+
+<ul>
+ <li>{{ HTMLElement("label") }}</li>
+ <li>{{ HTMLElement("legend") }}</li>
+ <li>{{ HTMLElement("li") }}</li>
+ <li>{{ HTMLElement("link") }}</li>
+ <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("listing") }}</s></li>
+</ul>
+<span id="M">M</span>
+
+<ul>
+ <li class="html5">{{HTMLElement("main")}}</li>
+ <li>{{ HTMLElement("map") }}</li>
+ <li class="html5">{{ HTMLElement("mark") }}</li>
+ <li><s class="nonStdElement">{{ HTMLElement("marquee") }}</s></li>
+ <li class="html5">{{ HTMLElement("menu") }}</li>
+ <li class="html5">{{ HTMLElement("menuitem") }}</li>
+ <li>{{ HTMLElement("meta") }}</li>
+ <li class="html5">{{ HTMLElement("meter") }}</li>
+</ul>
+<span id="N">N</span>
+
+<ul>
+ <li class="html5">{{ HTMLElement("nav") }}</li>
+ <li><s class="nonStdElement">{{ HTMLElement("nobr") }}</s></li>
+ <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("noframes") }}</s></li>
+ <li>{{ HTMLElement("noscript") }}</li>
+</ul>
+<span id="O">O</span>
+
+<ul>
+ <li>{{ HTMLElement("object") }}</li>
+ <li>{{ HTMLElement("ol") }}</li>
+ <li>{{ HTMLElement("optgroup") }}</li>
+ <li>{{ HTMLElement("option") }}</li>
+ <li class="html5">{{ HTMLElement("output") }}</li>
+</ul>
+<span id="P">P</span>
+
+<ul>
+ <li>{{ HTMLElement("p") }}</li>
+ <li>{{ HTMLElement("param") }}</li>
+ <li class="html5">{{ HTMLElement("picture") }}</li>
+ <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("plaintext") }}</s></li>
+ <li>{{ HTMLElement("pre") }}</li>
+ <li class="html5">{{ HTMLElement("progress") }}</li>
+</ul>
+<span id="Q">Q</span>
+
+<ul>
+ <li>{{ HTMLElement("q") }}</li>
+</ul>
+<span id="R">R</span>
+
+<ul>
+ <li class="html5">{{ HTMLElement("rp") }}</li>
+ <li class="html5">{{ HTMLElement("rt") }}</li>
+ <li class="html5">{{ HTMLElement("ruby") }}</li>
+</ul>
+<span id="S">S</span>
+
+<ul>
+ <li>{{ HTMLElement("s") }}</li>
+ <li>{{ HTMLElement("samp") }}</li>
+ <li>{{ HTMLElement("script") }}</li>
+ <li class="html5">{{ HTMLElement("section") }}</li>
+ <li>{{ HTMLElement("select") }}</li>
+ <li class="webcomp">{{ HTMLElement("shadow")}}</li>
+ <li>{{ HTMLElement("small") }}</li>
+ <li class="html5">{{ HTMLElement("source") }}</li>
+ <li><s class="nonStdElement">{{ HTMLElement("spacer") }}</s></li>
+ <li>{{ HTMLElement("span") }}</li>
+ <li><s class="deprecatedElement obsoleteElement">{{ HTMLElement("strike") }}</s></li>
+ <li>{{ HTMLElement("strong") }}</li>
+ <li>{{ HTMLElement("style") }}</li>
+ <li>{{ HTMLElement("sub") }}</li>
+ <li class="html5">{{ HTMLElement("summary") }}</li>
+ <li>{{ HTMLElement("sup") }}</li>
+</ul>
+<span id="T">T</span>
+
+<ul>
+ <li>{{ HTMLElement("table") }}</li>
+ <li>{{ HTMLElement("tbody") }}</li>
+ <li>{{ HTMLElement("td") }}</li>
+ <li class="webcomp">{{ HTMLElement("template")}}</li>
+ <li>{{ HTMLElement("textarea") }}</li>
+ <li>{{ HTMLElement("tfoot") }}</li>
+ <li>{{ HTMLElement("th") }}</li>
+ <li>{{ HTMLElement("thead") }}</li>
+ <li class="html5">{{ HTMLElement("time") }}</li>
+ <li>{{ HTMLElement("title") }}</li>
+ <li>{{ HTMLElement("tr") }}</li>
+ <li class="html5">{{ HTMLElement("track") }}</li>
+ <li><s class="obsoleteElement">{{ HTMLElement("tt") }}</s></li>
+</ul>
+<span id="U">U</span>
+
+<ul>
+ <li>{{ HTMLElement("u") }}</li>
+ <li>{{ HTMLElement("ul") }}</li>
+</ul>
+<span id="V">V</span>
+
+<ul>
+ <li>{{ HTMLElement("var") }}</li>
+ <li class="html5">{{ HTMLElement("video") }}</li>
+</ul>
+<span id="W">W</span>
+
+<ul>
+ <li class="html5">{{ HTMLElement("wbr") }}</li>
+</ul>
+<span id="X">X Y Z </span>
+
+<ul>
+ <li><span id="X"><s class="deprecatedElement obsoleteElement">{{ HTMLElement("xmp") }}</s></span></li>
+</ul>
+</div>
diff --git a/files/de/web/html/element/input/button/index.html b/files/de/web/html/element/input/button/index.html
new file mode 100644
index 0000000000..d36dc8944b
--- /dev/null
+++ b/files/de/web/html/element/input/button/index.html
@@ -0,0 +1,246 @@
+---
+title: <input type ="button">
+slug: Web/HTML/Element/Input/button
+tags:
+  - Eingabeelement
+  - Element
+  - HTML
+  - Referenz
+translation_of: Web/HTML/Element/input/button
+---
+<p>{{HTMLRef}}</p>
+
+<p><span class="seoSummary">Das HTML <code><strong>&lt;input type="button"&gt;</strong></code> Element ist eine bestimmte Version des <strong><code>&lt;input&gt;</code></strong> Elements. Es wird benutzt, um einen anklickbaren Button zu generieren, der jedoch keinen voreingestellten Wert hat.</span></p>
+
+<p>Browser generieren einen Controller für clickbare Buttons ohne Standartwert. Ein Button kann beliebige Beschriftungen besitzen. Der Controller selbst variiert von Browser zu Browser.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th>
+   <td><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Interactive_content" title="HTML/Content categories#Interactive content">Interactive content</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Form_listed" title="HTML/Content categories#Form listed">listed</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Form_labelable" title="HTML/Content categories#Form labelable">labelable</a>, and <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Form_submittable" title="HTML/Content categories#Form submittable">submittable</a> <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Form-associated_" title="HTML/Content categories#Form-associated ">form-associated</a> element, palpable content.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted content</th>
+   <td><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>None, both the starting and ending tag are mandatory. </td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted parent elements</th>
+   <td>Any element that accepts <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement" title="The HTMLButtonElement interface provides properties and methods (beyond the &lt;button> object interface it also has available to them by inheritance) for manipulating the layout and presentation of button elements."><code>HTMLButtonElement</code></a></td>
+  </tr>
+  <tr>
+   <th scope="row">Element Typ</th>
+   <td>Inline</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes">Attributes</h2>
+
+<p>Dieses Element kann zusätzlich zu den <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">globalen Attribute</a> jedes der folgenden besitzen:</p>
+
+<dl>
+ <dt>{{htmlattrdef("disabled")}}</dt>
+ <dd>
+ <p>This Boolean attribute indicates that the user cannot interact with the button. If this attribute is not specified, the button inherits its setting from the containing element, for example {{HTMLElement("fieldset")}}; if there is no containing element with the <code><strong>disabled</strong></code> attribute set, then the button is enabled. The disabled control's value isn't submitted with the form and the <code>click</code> event <a class="external" href="https://html.spec.whatwg.org/multipage/forms.html#enabling-and-disabling-form-controls:-the-disabled-attribute">will not be dispatched</a> on disabled controls.</p>
+ </dd>
+ <dd>
+ <p>Firefox will, unlike other browsers, by default, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic disabled state</a> of a {{HTMLElement("button")}} across page loads. Use the {{htmlattrxref("autocomplete","button")}} attribute to control this feature.</p>
+ </dd>
+ <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>This Boolean attribute lets you specify that the button should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form-associated element in a document can have this attribute specified.</dd>
+ <dt>{{htmlattrdef("autocomplete")}} {{non-standard_inline}}</dt>
+ <dd>The use of this attribute on a {{HTMLElement("button")}} is nonstandard and Firefox-specific. By default, unlike other browsers, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">Firefox persists the dynamic disabled state</a> of a {{HTMLElement("button")}} across page loads. Setting the value of this attribute to <code>off</code> (i.e., <code>autocomplete="off"</code>) disables this feature.</dd>
+ <dt>{{htmlattrdef("form")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>The form element that the button is associated with (its <em>form owner</em>). The value of the attribute must be the <strong>id</strong> attribute of a {{HTMLElement("form")}} element in the same document. If this attribute is not specified, the <code>&lt;button&gt;</code> element must be a descendent of a form element. This attribute enables you to place <code>&lt;button&gt;</code> elements anywhere within a document, not just as descendents of their {{HTMLElement("form")}} elements.</dd>
+ <dt>{{htmlattrdef("formenctype")}}</dt>
+ <dd>Since the input element is a submit button, the <code><strong>formenctype</strong></code> attribute specifies the type of content that is used to submit the form to the server. Possible values are:
+ <ul>
+  <li><code>application/x-www-form-urlencoded</code>: The default value if the attribute is not specified.</li>
+  <li><code>multipart/form-data</code>: This value is used if an {{HTMLElement("input")}} element is used with the {{htmlattrxref("type","input")}} attribute set to <code>file</code>.</li>
+  <li><code>text/plain</code></li>
+ </ul>
+
+ <p>If this attribute is specified, it overrides the {{htmlattrxref("enctype","form")}} attribute of the element's form owner.</p>
+ </dd>
+ <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>The URI of a program that processes the information submitted by the button. If specified, it overrides the {{htmlattrxref("action","form")}} attribute of the button's form owner.</dd>
+ <dt>{{htmlattrdef("formmethod")}}</dt>
+ <dd>Since the input element is a submit button, the <code><strong>formmethod</strong></code> attribute specifies the HTTP method that the browser uses to submit the form. Possible values are:
+ <ul>
+  <li><code>post</code>: The data from the form is included in the body of the form and is sent to the server.</li>
+  <li><code>get</code>: The data from the form is appended to the <strong>form</strong> attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.</li>
+ </ul>
+
+ <p>If specified, this attribute overrides the {{htmlattrxref("method","form")}} attribute of the element's form owner.</p>
+ </dd>
+ <dt>{{htmlattrdef("formnovalidate")}}</dt>
+ <dd>Since the input element is a submit button, the <code><strong>formnovalidate </strong></code>attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the {{htmlattrxref("novalidate","form")}} attribute of the element's form owner. This is a Boolean attribute.</dd>
+ <dt>{{htmlattrdef("formtarget")}}</dt>
+ <dd>Since the input element is a submit button, the <code><strong>formtarget</strong></code> attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a <em>browsing context</em> (for example, tab, window, or inline frame). If this attribute is specified, it overrides the {{htmlattrxref("target", "form")}} attribute of the element's form owner. The following keywords have special meanings:
+ <ul>
+  <li>_<code>self</code>: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.</li>
+  <li><code>_blank</code>: Load the response into a new unnamed browsing context.</li>
+  <li><code>_parent</code>: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as <code>_self</code>.</li>
+  <li><code>_top</code>: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as <code>_self</code>.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd><span class="tlid-translation translation" lang="de"><span title="">Der Name der Schaltfläche, der mit den Formulardaten übermittelt wird.</span></span></dd>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>The type of the button. Possible values are:
+ <ul>
+  <li><code>submit</code>: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.</li>
+  <li><code>reset</code>: The button resets all the controls to their initial values.</li>
+  <li><code>button</code>: The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("value")}}</dt>
+ <dd>The initial value of the button.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush:html">&lt;input type="button" value="Klick mich"&gt;
+</pre>
+
+<p>Das erstellt einen neuen Button mit der Beschriftung: 'Klick mich'.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table" style="height: 137px; width: 1065px;">
+ <tbody>
+  <tr>
+   <td>Specification</td>
+   <td>Status</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-button-element', '&lt;button&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-button-element', '&lt;button&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.5', '&lt;button&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibiltiy">Browser Compatibiltiy</h2>
+
+<table class="standard-table">
+ <caption>Browser Compatibility</caption>
+ <tbody>
+  <tr>
+   <td>Feature</td>
+   <td>Chrome</td>
+   <td>Gecko (Firefox)</td>
+   <td>Internet Explorer</td>
+   <td>Opera</td>
+   <td>Safari</td>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>formenctype</code> attribute</td>
+   <td>9.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>10.6</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>formmethod</code> attribute</td>
+   <td>9.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>autofocus</code> attribute</td>
+   <td>5.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>9.6</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td><code>formaction</code> attribute</td>
+   <td>9.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Mobile Browser Compatibility</caption>
+ <tbody>
+  <tr>
+   <td>Feature</td>
+   <td>Android</td>
+   <td>Gecko (Firefox Mobile)</td>
+   <td>Internet Explorer Mobile</td>
+   <td>Opera Mobile</td>
+   <td>Safari Mobile</td>
+  </tr>
+  <tr>
+   <td>Basic Support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>formaction </code>attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>formenctype </code>attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>formmethod</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The generic {{HTMLElement("input")}} element and the interface used to manipulate it, {{domxref("HTMLInputElement")}}</li>
+</ul>
diff --git a/files/de/web/html/element/input/checkbox/index.html b/files/de/web/html/element/input/checkbox/index.html
new file mode 100644
index 0000000000..5d2af0d966
--- /dev/null
+++ b/files/de/web/html/element/input/checkbox/index.html
@@ -0,0 +1,352 @@
+---
+title: <input type="checkbox">
+slug: Web/HTML/Element/Input/checkbox
+tags:
+  - Element
+  - HTML
+  - HTML forms
+  - Input
+  - Input Types
+  - Reference
+  - checkbox
+  - form
+translation_of: Web/HTML/Element/input/checkbox
+---
+<div>{{HTMLRef}}</div>
+
+<p>{{htmlelement("input")}}-Elemente vom Typ <strong><code>checkbox</code></strong> werden standardmäßig als Kästchen gerendert, die mit einem Häkchen versehen (angeklickt) sind, wenn sie aktiviert sind, ähnlich wie man es von offiziellen Formularen kennt. Das exakte Erscheinungsbild hängt vom System ab, auf dem der Browser läuft. Normalerweise ist es ein Quadrat aber es kann auch abgerundete Ecken haben. Eine Checkbox erlaubt die Auswahl eines einzelnen Wertes zur Übertragung in einer Form (oder nicht).</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-checkbox.html", "tabbed-standard")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</div>
+
+<div class="note">
+<p><strong>Anmerkung</strong>: <a href="/en-US/docs/Web/HTML/Element/input/radio">Radio buttons</a> sind Checkboxen ähnlich, jedoch mit einer wichtigen Ausnahme - Radiobuttons sind in einem Satz gruppiert, in dem nur ein Radiobutton aktiviert sein kann, während Checkboxen es erlauben, einen einzelnen Wert an- und auszuschalten. Dort wo mehrere Steuerelemente exisiteren, erlauben es Radiobuttons, eines davon zu selektieren, während Checkboxen mehrere Werte setzen können.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value")}}</strong></td>
+   <td>Ein {{domxref("DOMString")}} der den Wert der Checkbox repräsentiert.</td>
+  </tr>
+  <tr>
+   <td><strong>Events</strong></td>
+   <td>{{event("change")}} und {{event("input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Supported common attributes</strong></td>
+   <td><code>checked</code></td>
+  </tr>
+  <tr>
+   <td><strong>IDL attributes</strong></td>
+   <td><code>{{anch("checked")}}</code> und <code>{{anch("value")}}</code></td>
+  </tr>
+  <tr>
+   <td><strong>Methods</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Value">Value</h2>
+
+<p>Ein {{domxref("DOMString")}} der den Wert der checkbox repräsentiert. Dies findet man nicht clientseitig, aber auf Servern ist dies der Wert (<strong><code>value</code></strong>), der beim Übermitteln der Daten mit dem Checkbox-<strong><code>name </code></strong>übergeben wird. Sehen wir uns folgendes Beispiel an:</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter"&gt;
+    &lt;label for="subscribeNews"&gt;Subscribe to newsletter?&lt;/label&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button type="submit"&gt;Subscribe&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('Value', 600, 60)}}</p>
+
+<p>In diesem Beispiel haben wir einen Namen <code>subscribe</code> und einen Wert <code>newsletter</code>. Wenn die Form übertragen wird, wird das name/value pair <code>subscribe=newsletter</code> sein.</p>
+
+<p>Wird das <code>value</code>-Attribut weggelassen, ist der default value für die Checkbox <code>on</code>, in diesem Fall würden also die übertragenen Daten <code>subscribe=on</code> sein.</p>
+
+<div class="note">
+<p><strong>Anmerkung</strong>: Wenn beim Übertragen der Form eine Checkbox nicht angeklickt (unchecked) ist, so wird kein Wert vorgesehen, der den unchecked-Status repräsentiert (z.B. <code>value=unchecked</code>); der Wert wird überhaupt nicht zum Server übertragen. Wenn Sie einen default-Wert für die Checkbox übertrgen wollen, können Sie - eventuell durch JavaScript generiert - ein {{HTMLElement("input/hidden", '&lt;input type="hidden"&gt;')}} in die Form einbauen, das den selben <code>name</code> and <code>value</code> wie die Checkbox hat.</p>
+</div>
+
+<h2 id="Zusätzliche_Attribute">Zusätzliche Attribute</h2>
+
+<p>Zusätzlich zu den allgemeinen Attributen, die von allen {{HTMLElement("input")}}-Elementen geteilt werden, unterstützen "<code>checkbox</code>"-Inputs die folgenden Attribute:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attribute</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("checked")}}</code></td>
+   <td>Boolean; wenn vorhanden, wird die Checkbox standardmäßig auf <code>on</code> gestellt.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("readonly")}}</code></td>
+   <td>Boolean; wenn vorhanden, wird das Erscheinungsbild abgeändert, so dass angezeigt wird, dass der Wert nicht geändert werden kann.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("value")}}</code></td>
+   <td>Der String, der beim Übertragen der Form benutzt wird, wenn die Checkbox den Wert <code>on </code>hat.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdefchecked">{{htmlattrdef("checked")}}</h3>
+
+<p>Ein Boolean-Attribut, das angibt, ob die Checkbox standardmäßig <code>checked</code> ist oder nicht (wenn die Seite gelaoden wird). Es gibt nicht an, ob diese Checkbox aktuell den Status checked hat: Wenn der Status der Checkbox sich ändert, gibt dieses Content Attribut die Änderung nicht wieder. (Nur das {{domxref("HTMLInputElement")}}’s <code>checked</code> IDL Attribut wird aktualisiert)</p>
+
+<div class="note">
+<p><strong>Anmerkung:</strong> Anders als andere Eingabe-Steuerelemente ist eine Checkbox nur dann in den übermittelten Daten vorhanden, wenn die Checkbox angeklickt (<code>checked</code>) ist. Wenn das der Fall ist, wird der Wert der Checkbox (<code>value</code>) als die Eingabe übermittelt.</p>
+</div>
+
+<p>Anders als andere Browser, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">speichert </a>Firefox standardmäßig den dynamischen Status von <code>&lt;input&gt;</code> zwischen mehreren Seitenaufrufen. Benutzen Sie das {{htmlattrxref("autocomplete","input")}}-Attribut, um dieses Feature zu steuern.</p>
+
+<h3 id="htmlattrdefreadonly">{{htmlattrdef("readonly")}}</h3>
+
+<p>Ein Boolean-Attribut, das angibt, ob der Wert dieser Checkbox durch den Benutzer geändert werden kann oder nicht. Bedenken Sie, dass dieses Attribut nur die Erscheinungsform der Checkbox ändert, typischweise, indem eine graue Farbe für Linien und Hintergrund verwendet werden. Dieses Attribut hat jedoch keinen Einfluss auf den Status der Checkbox, der auch immer noch vom Benutzer geändert werden kann. Wenn Sie darüber hinaus verhindern wollen, dass der Benutzer den Status der Checkbox ändert, müssen Sie das <code>disabled</code>-Attribut verwenden. Wenn Sie jedoch das <code>disabled</code>-Attribut verwenden, bedenken Sie, dass der Wert des Steuerelements nicht übertragen wird, wenn die Form übermittelt wird.</p>
+
+<h3 id="htmlattrdefvalue">{{htmlattrdef("value")}}</h3>
+
+<p>Das <code>value</code>-Attribut ist eines der Attribute, das alle {{HTMLElement("input")}}s teilen. Es bietet jedoch einen speziellen Nutzen für Inputs vom Typ <code>checkbox</code>: Wenn eine Form übermittelt wird, werden Checkboxen nur dann übermittelt, wenn sie aktuell angeklickt sind, und der übermittelte Wert ist der Wert aus dem <code>value</code>-Attribut. Wenn der Wert nicht anderweitig spezifiziert ist, ist es standarsmäßig der String <code>on</code>. Dies wird im Abschnitt {{anch("Value")}} demonstriert.</p>
+
+<h2 id="checkbox_inputs_benutzen">checkbox inputs benutzen</h2>
+
+<p>Wir haben oben schon die gängisten Nutzungsmöglichkeiten von Checkoxen gesehen. Lassen Sie uns nun die weiteren Features betrachten, die Sie vielleicht brauchen werden.</p>
+
+<h3 id="Mit_multiple_checkboxes_umgehen">Mit multiple checkboxes umgehen</h3>
+
+<p>Das Besipiel oben enthielt nur eine Checkbox; in Wirklichkeit werden Sie wahrscheinlich mehrere Checkboxen entdecken. Wenn sie keinen Bezug haben, dann können sie alle separat betrachtet werden, so wie oben gezeigt. Wenn sie jedoch in Beziehung zueinander stehen, sind die Dinge nicht mehr so einfach.</p>
+
+<p>Im folgenden Demo bauen wir mehrere Checkboxen ein, um dem Benutzer zu erlauben, seine Interessen auszuwählen. (Ganze Version im {{anch("Beispiele")}}-Abschnitt).</p>
+
+<pre class="brush: html">&lt;fieldset&gt;
+  &lt;legend&gt;Choose your interests&lt;/legend&gt;
+  &lt;div&gt;
+    &lt;input type="checkbox" id="coding" name="interest" value="coding"&gt;
+    &lt;label for="coding"&gt;Coding&lt;/label&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input type="checkbox" id="music" name="interest" value="music"&gt;
+    &lt;label for="music"&gt;Music&lt;/label&gt;
+  &lt;/div&gt;
+&lt;/fieldset&gt;</pre>
+
+<p>{{EmbedLiveSample('Handling_multiple_checkboxes', 600, 100)}}</p>
+
+<p>In diesem Beispiel werden Sie sehen, dass wir jeder Checkbox den selben <code>name</code> gegeben haben. Wenn beide Checkboxen checked sind und dann die Form übermittelt wird, werden Sie einen String mit name/value pairs wie folgt erhalten: <code>interest=coding&amp;interest=music</code>. Wenn der String den Server erreicht, müssen Sie ihn anders parsen als ein assoziatives Array, so dass alle Werte und nicht nur der letzte von <code>interest</code> ermittelt werden. Für eine Technik, die mit PHP eingesetzt wird, sehen Sie sich dieses Beispiel an: <a class="question-hyperlink" href="http://stackoverflow.com/questions/18745456/handle-multiple-checkboxes-with-a-single-serverside-variable">Handle Multiple Checkboxes with a Single Serverside Variable</a>.</p>
+
+<h3 id="Checkboxen_auf_checked_setzen">Checkboxen auf 'checked' setzen</h3>
+
+<p>Um eine Checkbox auf den Wert 'checked' zu setzen, geben Sie ihm einfach das <code>checked</code>-Attribute. Sehen Sie sich das Beispiel unten an:</p>
+
+<pre class="brush: html">&lt;fieldset&gt;
+  &lt;legend&gt;Choose your interests&lt;/legend&gt;
+  &lt;div&gt;
+    &lt;input type="checkbox" id="coding" name="interest" value="coding" checked&gt;
+    &lt;label for="coding"&gt;Coding&lt;/label&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input type="checkbox" id="music" name="interest" value="music"&gt;
+    &lt;label for="music"&gt;Music&lt;/label&gt;
+  &lt;/div&gt;
+&lt;/fieldset&gt;</pre>
+
+<p>{{EmbedLiveSample('Checking_boxes_by_default', 600, 100)}}</p>
+
+<h3 id="Einen_größeren_Click-Bereich_für_die_Checkbox_vorsehen">Einen größeren Click-Bereich für die Checkbox vorsehen</h3>
+
+<p>In den Beispielen oben werden Sie gesehen haben, dass man den Wert der Checkbox ebenso umschalten kann, indem man auf das {{htmlelement("label")}}-Element klickt, das mit der Checkbox verbunden ist, wie wenn man auf die Checkbox selbst klickt. Das ist ein wirklich hilfreiches Feature von HTML Form Labels, das es einfacher macht, die Option anzuklicken, die man möchte, speziell auf kleinen Bildschirmen wie z.B. bei Smartphones.</p>
+
+<p>Neben der Benutzbarkeit ist dies ein guter Grund, die <code>&lt;label&gt;</code>-Elemente in der Form sauber aufzusetzen.</p>
+
+<h3 id="Checkboxen_mit_unbestimmbarem_Wert">Checkboxen mit unbestimmbarem Wert</h3>
+
+<p>Zusätzlich zu den Status-Werten <code>checked </code>und <code>unchecked </code>gibt es einen dritten Status, den eine Checkbox annehmen kann: <strong>indeterminate</strong>. Dies ist ein Status, bei dem man nich sagen kann, ob das Element <code>on</code> oder <code>off</code> ist. Dies wird gesetzt durch die {{domxref("HTMLInputElement")}} object's <code>indeterminate</code> Eigenschaft via JavaScript (es kann nicht durch HTML gesetzt werden):</p>
+
+<pre class="brush: js">inputInstance.indeterminate = true;</pre>
+
+<p>Eine Checkbox im indeterminate-Status hat in den meisten Browsern eine horizontale Linie in der Box (es sieht ein bisschen wie ien Bindestrich oder ein Minus-Zeichen aus) anstatt eines Häkchens.</p>
+
+<p>Es gibt nicht viele Fälle, in denen diese Eigenschaft sinnvoll eingesetzt werden kann. Am häufigsten ist der Gebrauch, wenn eine Checkbox eine Gruppe von Unteroptionen (die ebenfalls Checkboxen sind) beherbergt.Wenn alle Unteroptionen angeklickt (<code>checked</code>) sind, dann ist die übergeordnete Checkbox auch <code>checked</code>, sind alle Unteroptionen <code>unchecked</code>, so ist die übergeordnete Checkbox ebenfalls <code>unchecked</code>. In allen anderen Fällen hätte die übergeordnete Checkbox den Status <code>indeterminate</code> .</p>
+
+<p>Im Besipiel unten kann man dies sehen (Dank an <a href="https://css-tricks.com/indeterminate-checkboxes/">CSS Tricks</a> für die Inspiration). In diesem Beispiel halten wir Zutaten vor, die für ein Rezept gesammelt werden. Wenn Sie eine Zutaten-Checkbox an- oder ausklicken, prüft eine JavaScript-Funktion die Gesamtzahl der ausgewählten Zutaten.</p>
+
+<ul>
+ <li>Wenn keine Checkboxen den Status <code>checked</code> haben, hat die Rezept-Checkbox den Status <code>unchecked</code></li>
+ <li>Wenn eine oder zwei den Status <code>checked</code> haben, wird der Status der Rezept-Checkbox auf <code>indeterminate</code> gesetzt.</li>
+ <li>Sind alle drei Checkboxen angeklickt, wird der Status der Rezeot.Checkbox auf <code>checked</code> gesetzt.</li>
+</ul>
+
+<p>In diesem Fall wird also der <code>indeterminate</code>-Status benutzt, um anzuzeigen, dass das Sammeln der Zutaten begonnen hat, das Rezept aber noch nicht komplett ist.</p>
+
+<pre class="brush: js" id="line1">  var overall = document.querySelector('input[id="EnchTbl"]');
+  var ingredients = document.querySelectorAll('ul input');
+
+  overall.addEventListener('click', function(e) {
+    e.preventDefault();
+  });
+
+  for(var i = 0; i &lt; ingredients.length; i++) {
+    ingredients[i].addEventListener('click', updateDisplay);
+  }
+
+  function updateDisplay() {
+    var checkedCount = 0;
+    for(var i = 0; i &lt; ingredients.length; i++) {
+      if(ingredients[i].checked) {
+        checkedCount++;
+      }
+    }
+
+    if(checkedCount === 0) {
+      overall.checked = false;
+      <strong>overall.indeterminate = false;</strong>
+    } else if(checkedCount === ingredients.length) {
+      overall.checked = true;
+      <strong>overall.indeterminate = false;</strong>
+    } else {
+      overall.checked = false;
+      <strong>overall.indeterminate = true;</strong>
+    }
+  }</pre>
+
+<p>{{EmbedGHLiveSample("learning-area/html/forms/indeterminate-example/index.html", '100%', 200)}}</p>
+
+<div class="note">
+<p><strong>Anmerkung</strong>: Wenn Sie eine From mit einer indeterminate Checkbox übermitteln, passiert dasselbe, wie wenn die Checkbox den Status unchecked hat - es werden keine Daten übermittelt, die die Checkbox repräsentieren.</p>
+</div>
+
+<h2 id="Gültigkeitsprüfung">Gültigkeitsprüfung</h2>
+
+<p>Checkboxen unterstützen <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">validation</a> (Gültigkeitsprüfung) (allen {{HTMLElement("input")}}s verfügbar). Jedoch werden die meisten {{domxref("ValidityState")}}s immer <code>false</code> sein. Wenn die Checkbox das {{htmlattrxref("required", "input")}}-Attribut hat, aber nicht angeklickt ist, then {{domxref("ValidityState.valueMissing")}}, dann wird der Wert <code>true</code> sein.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Das folgende Beispiel ist eine erweiterte Version des "multiple checkboxes"-Beispiels, das wir oben gesehen haben. — es hat mehr Standard-Optionen, plus eine "andere" Checkbox, die, wenn sie angeklickt wird, verursacht, dass eine Textbox erscheint, in die man einen Wert für die "andere" Option eingeben kann. Dies wird durch einen einfachen javaScript-Block erreicht. Das Beispiel enthält ebenso etwas CSS, um das Styling zu verbessern.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;fieldset&gt;
+  &lt;legend&gt;Choose your interests&lt;/legend&gt;
+    &lt;div&gt;
+      &lt;input type="checkbox" id="coding" name="interest" value="coding"&gt;
+      &lt;label for="coding"&gt;Coding&lt;/label&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+      &lt;input type="checkbox" id="music" name="interest" value="music"&gt;
+      &lt;label for="music"&gt;Music&lt;/label&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+      &lt;input type="checkbox" id="art" name="interest" value="art"&gt;
+      &lt;label for="art"&gt;Art&lt;/label&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+      &lt;input type="checkbox" id="sports" name="interest" value="sports"&gt;
+      &lt;label for="sports"&gt;Sports&lt;/label&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+      &lt;input type="checkbox" id="cooking" name="interest" value="cooking"&gt;
+      &lt;label for="cooking"&gt;Cooking&lt;/label&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+      &lt;input type="checkbox" id="other" name="interest" value="other"&gt;
+      &lt;label for="other"&gt;Other&lt;/label&gt;
+      &lt;input type="text" id="otherValue" name="other"&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+      &lt;button type="submit"&gt;Submit form&lt;/button&gt;
+    &lt;/div&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+form {
+  width: 600px;
+  margin: 0 auto;
+}
+
+div {
+  margin-bottom: 10px;
+}
+
+fieldset {
+  background: cyan;
+  border: 5px solid blue;
+}
+
+legend {
+  padding: 10px;
+  background: blue;
+  color: cyan;
+}
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var otherCheckbox = document.querySelector('input[value="other"]');
+var otherText = document.querySelector('input[id="otherValue"]');
+otherText.style.visibility = 'hidden';
+
+otherCheckbox.addEventListener('change', () =&gt; {
+  if(otherCheckbox.checked) {
+    otherText.style.visibility = 'visible';
+    otherText.value = '';
+  } else {
+    otherText.style.visibility = 'hidden';
+  }
+});</pre>
+
+<p>{{EmbedLiveSample('Examples', '100%', 300)}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#checkbox-state-(type=checkbox)', '&lt;input type="checkbox"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#checkbox-state-(type=checkbox)', '&lt;input type="checkbox"&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+
+
+<p>{{Compat("html.elements.input.input-checkbox")}}</p>
+
+<h2 id="Weiterführende_Informationen">Weiterführende Informationen</h2>
+
+<ul>
+ <li>{{HTMLElement("input")}} and the {{domxref("HTMLInputElement")}} interface which implements it.</li>
+ <li>The {{cssxref(":checked")}} and {{cssxref(":indeterminate")}} CSS selectors let you style checkboxes based on their current state</li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Compatibility of CSS properties</a></li>
+</ul>
diff --git a/files/de/web/html/element/input/index.html b/files/de/web/html/element/input/index.html
new file mode 100644
index 0000000000..92754c05f9
--- /dev/null
+++ b/files/de/web/html/element/input/index.html
@@ -0,0 +1,1411 @@
+---
+title: <input>
+slug: Web/HTML/Element/Input
+tags:
+  - Element
+  - Formulare
+  - HTML
+  - HTML Formulare
+  - HTML input tag
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+  - Web
+translation_of: Web/HTML/Element/input
+---
+<div>{{draft}}{{HTMLRef}}</div>
+
+<p>Das <strong>HTML-Element <code>&lt;input&gt;</code></strong> ermöglicht es, interaktive Bedienelemente für webbasierte Formulare zu erstellen, die Daten vom Benutzer entgegennehmen.<br>
+ Eine große Bandbreite verschiedener Eingabedaten und Bedienelemente ist verfügbar, abhängig je nach Gerät und {{Glossary("user agent")}}. Das <code>&lt;input&gt;</code> Element ist eine der mächtigsten und komplexesten von allen HTML-Elemente, da es eine ungeheure Anzahl an Kombinationen aus Eingabetypen und Attributen besitzt.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Um einen Eindruck davon zu bekommen, wie die unterschiedlichen Typen des &lt;input&gt;-Elements aussehen, kannst du die Werte des Attributs <strong>type</strong> im folgenden editierbaren Live-Beispiel ändern. Die Ausgabe verändert sich, während du tippst. In jedem Fall erzeugt der Anfangswert <code>text</code> eine einfache Textausgabe. Du kannst andere Werte ausprobieren, etwa <code>number</code>, <code>color</code>, <code>checkbox</code>, <code>radio</code>, <code>date</code>, <code>file</code>, <code>month</code>, <code>password</code>, <code>range</code> oder <code>time</code>.</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/forms/editable-input-example/editable_input.html", '100%', 230)}}</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Content categories</a></th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, listed, submittable, resettable, form-associated element, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>.<br>
+    Wenn der {{htmlattrxref("type", "input")}} nicht den Wert <code>hidden</code> hat, dann ein label-bares Element, mit greifbarem Inhalt.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted content</th>
+   <td>Keiner, das ist ein leeres Element.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>Muss ein Start-Tag und darf kein End-Tag haben</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte Elternknoten</th>
+   <td>Jedes Element, das <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a> erlaubt.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted ARIA roles</th>
+   <td>
+    <ul>
+     <li><code>type=button</code>: {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}</li>
+     <li><code>type=checkbox</code>: {{ARIARole("button")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("option")}}, {{ARIARole("switch")}}</li>
+     <li><code>type=image</code>: {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}</li>
+     <li><code>type=radio</code>: {{ARIARole("menuitemradio")}}</li>
+     <li><code>type=color|date|datetime|datetime-local|email|file</code>: None</li>
+     <li><code>type=hidden|month|number|password|range|research</code>: None</li>
+     <li><code>type=search|submit|tel|text|url|week</code>: None</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLInputElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="sect1"></h2>
+
+<h2 id="Arten_des_&lt;input>-Elements">Arten des &lt;input&gt;-Elements</h2>
+
+<p>Wie ein &lt;input&gt; sich verhält ist stark von seinem <strong>type</strong>-Attribut abhängig. Deshalb werden dessen Werte in einer eigenen Referenz beschrieben. Fehlt das Attribut, gilt der Standardwert <code>text</code>.</p>
+
+<p><code>type</code> kann folgende Werte annehmen:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/de-DE/docs/Web/HTML/Element/input/button">button</a>: Ein Knopf zum Drücken ohne voreingestelltes Verhalten. </li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox">checkbox</a>: Ein Kästchen zum Auswählen. Das <strong>value</strong>-Attribut muss benutzt werden, um den Wert zu definieren, den dieses Element übermittelt. Mit dem <strong>checked</strong>-Attribut kann angezeigt werden, dass das Element ausgewählt ist. Es ist auch möglich das <strong>indeterminate</strong>-Attribut zu verwenden, um anzuzeigen, dass das Kästchen sich in einem undefinierten Zustand befindet (auf den meisten Plattformen wird dies durch eine horizontale Linie durch das Kästchen dargestellt).</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color">color</a>: {{HTMLVersionInline("5")}} Ein Bedienelement zum Festlegen einer Farbe. Die Benutzerschnittstelle einer Farbauswahl muss nichts anderes tun, als einfache Farben als Text anzunehmen. (<a href="http://www.w3.org/TR/html5/forms.html#color-state-(type=color)">mehr Infos</a>).</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date">date</a>: {{HTMLVersionInline("5")}} Ein Bedienelement zum Eingeben eines Datum (Jahr, Monat und Tag, ohne Uhrzeit).</li>
+ <li><a href="/de/docs/Web/HTML/Element/input/datetime-local">datetime-local</a>: {{HTMLVersionInline("5")}} Ein Bedienelement zum Eingeben eines Datums mit Uhrzeit, ohne Zeitzone.</li>
+ <li><a href="/de/docs/Web/HTML/Element/input/email">email</a>: {{HTMLVersionInline("5")}} Ein Feld zum Bearbeiten einer E-Mail-Adresse. Der Eingabewert wird vor dem Übermitteln darauf überprüft, ob er entweder leer ist oder eine einzelne, valide E-Mail-Adresse enthält. Die CSS-Pseudoklassen {{cssxref(":valid")}}- und {{cssxref(":invalid")}} werden entsprechend gesetzt.</li>
+ <li><code>file</code>: Ein Bedienelement, das den Nutzer eine Datei auswählen lässt. Das <strong>accept</strong>-Attribut definiert die Art der auswählbaren Dateien.</li>
+ <li><code>hidden</code>: Ein unsichtbares Bedienelement, dessen Wert aber dennoch an den Server übermittelt wird.</li>
+ <li><code>image</code>: Ein graphischer Knopf zum Abschicken. Das <strong>src</strong>-Attribut ist erforderlich, um die Quelle des Bildes anzugeben. Im ebenfalls verpflichtenden a<strong>lt</strong>-Attribut ist alternativer Text zu definieren. Die <strong>height</strong>- und <strong>width</strong>-Attribute können benutzt werden um die Größe des Bildes in Pixeln anzugeben. </li>
+ <li><code>month</code>: {{HTMLVersionInline("5")}} Ein Bedienelement zum Eingeben von Monat und Jahr, ohne Zeitzone.</li>
+ <li><code>number</code>: {{HTMLVersionInline("5")}} Ein Bedienelement zum Eingeben einer Gleitkommazahl. </li>
+ <li><code>password</code>: Ein einzeiliges Textfeld, dessen Wert verschleiert wird. Das <strong>maxlength</strong>-Attribut legt die maximale Länge des einzugebenden Wertes fest.
+  <div class="note"><strong>Bemerkung</strong>: Alle Formulare mit sensitiven Daten wie Passwörter (z.B. Anmeldeformulare) sollten über HTTPS ausgeliefert werden. Firefox warnt mit verschiedenen Methoden vor unsicheren Anmeldeverfahren (siehe <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Insecure_passwords">Insecure passwords</a>). Andere Browser bieten ähnliche Mechanismen.</div>
+ </li>
+ <li><code>radio</code>: Ein Schaltknopf. Das <strong>value</strong>-Attribut muss verwendet werden, um den von diesem Element übermittelten Wert festzulegen. Das <strong>checked</strong>-Attribut definiert, ob es standardmäßig angewählt ist. Schaltknöpfe mit demselben Wert für das <strong>name</strong>-Attribut gehören zur selben Gruppe. Nur jeweils ein Schaltknopf einer Gruppe kann angewählt sein. </li>
+ <li><code>range</code>: {{HTMLVersionInline("5")}} Ein Bedienelement zum Eintragen einer Zahl, deren genauer Wert unwichtig ist. Sind die entsprechenden Attribute nicht festgelegt, gelten folgende Voreinstellungen:
+  <ul>
+   <li><code>min</code>: 0</li>
+   <li><code>max</code>: 100</li>
+   <li><code>value</code>: <code>min</code> + (<code>max</code>-<code>min</code>)/2, or <code>min</code> if <code>max</code> is less than <code>min</code></li>
+   <li><code>step</code>: 1</li>
+  </ul>
+ </li>
+ <li><code>reset</code>: Ein Knopf, der den Inhalt des Formulars auf die Standardwerte zurücksetzt. </li>
+ <li><code>search</code>: {{HTMLVersionInline("5")}} Ein einzeiliges Textfeld zur Eingabe von Suchbegriffen. Zeilenumbrüche werden automatisch aus dem Eingabewert entfernt. </li>
+ <li><code>submit</code>: Ein Knopf zum Übermitteln des Formulars. </li>
+ <li><code>tel</code>: {{HTMLVersionInline("5")}} Ein Bedienelement zum Anzeigen einer Telefonnummer. Zeilenumbrüche werden automatisch aus dem Eingabewert entfernt, sonst werden keine anderen Regeln erzwungen. Attribute wie pattern und <strong>maxlength</strong> können verwendet werden, um zulässige Werte einzuschränken. Die CSS-Pseudoklassen {{cssxref(":valid")}}- und {{cssxref(":invalid")}} werden entsprechend gesetzt.</li>
+ <li><code>text</code>: Ein einzeiliges Textfeld; Zeilenumbrüche werden automatisch aus dem Eingabewert entfernt. </li>
+ <li><code>time</code>: {{HTMLVersionInline("5")}} Ein Bedienelement zum Eingeben einer Uhrzeit ohne Zeitzone.</li>
+ <li><code>url</code>: {{HTMLVersionInline("5")}} Ein Feld zum Eingeben einer URL. Der Eingabewert wird vor dem Übermitteln darauf überprüft, ob er leer oder eine korrekte, absolute URL ist. Attribute wie <strong>pattern</strong> und <strong>maxlength</strong> können verwendet werden um zulässige Werte einzuschränken. Die CSS-Pseudoklassen {{cssxref(":valid")}}- und {{cssxref(":invalid")}} werden entsprechend gesetzt.</li>
+ <li><code>week</code>: {{HTMLVersionInline("5")}} Ein Bedienelement zum Eingeben eines Datums bestehend aus einer Jahreszahl und einer Wochennummer, ohne Zeitzone.</li>
+</ul>
+
+<p>Einige Werte für das <strong>type</strong>-Attribut sind jetzt überflüssg:</p>
+
+<ul>
+ <li><code>datetime</code>: {{HTMLVersionInline("5")}} {{deprecated_inline}} {{obsolete_inline}} Ein Bedienelement zum Eingeben eines Datums mit Uhrzeit (Stunde, Minute, Sekunde und Bruchteil einer Sekunde). Diese Eigenschaft wurde <a href="https://github.com/whatwg/html/issues/336">in WHATWG HTML entfernt</a>.</li>
+</ul>
+
+<dl>
+ <dt>
+ <h2 id="Attribute">Attribute</h2>
+
+ <h3 id="Globale_&lt;input>-Attribute">Globale &lt;input&gt;-Attribute</h3>
+ </dt>
+</dl>
+
+<p>Dieser Abschnitt beschreibt die für alle Arten des <code>input</code>-Elements verfügbaren Attribute. Nicht-globale Attribute – und globale, die sich bei unterschiedlichen <code>input</code>-Elementen anders verhalten – werden bei diesen Elementen behandelt.</p>
+
+<div class="note">
+<p><strong>Bemerkung</strong>: Das gilt auch für die globalen HTML-Attribute</p>
+</div>
+
+<ul>
+ <li>Ein zulässiger MIME-Typ ohne Erweiterungen</li>
+ <li><code>audio/*</code> für Klang-Dateien {{HTMLVersionInline("5")}}</li>
+ <li><code>video/*</code> für Video-Dateien {{HTMLVersionInline("5")}}</li>
+ <li><code>image/*</code> für Bild-dateien {{HTMLVersionInline("5")}}</li>
+</ul>
+
+<dl>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>Die Art des Bedienelements. Siehe {{anch("Arten des &lt;input&gt;-Elements")}} für die einzelnen Typen. </dd>
+ <dt>{{htmlattrdef("accept")}}</dt>
+ <dd>Ist der Wert des <strong>type</strong>-Attributes <code>file</code>, beschreibt dieses Attribut die Art der Dateien, die der Server akzeptiert. Sonst wird es ignoriert. Der Wert muss eine durch Kommata getrennte Liste eindeutiger Werte sein:</dd>
+ <dt>{{htmlattrdef("accesskey")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline", "HTML5")}}</dt>
+ <dd>Ein einzelnes Zeichen, dass der Benutzer drücken kann, um den Fokus zu diesem Feld zu bewegen. Dieses Attribute ist in HTML5 global.</dd>
+ <dt>{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</dt>
+ <dd>Definiert einen "Aktionstipp", der festlegt wie die Eingabetaste auf Geräten mit virtueller Tastatur erscheint. Zulässige Werte sind <code>go</code>, <code>done</code>, <code>next</code>, <code>search</code> und <code>send</code>. Sie werden automatisch der passenden Zeichenkette zugeordnet. Groß-/Kleinschreibung spielt keine Rolle.</dd>
+ <dt>{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}</dt>
+ <dd>Dieses Attribut ist nicht standardisiert. <a href="https://developers.google.com/web/updates/2015/04/autocapitalize">Chrome</a> und iOS Safari Mobile kontrollieren damit, ob und wie eingegebener Text automatisch in Großbuchstaben gewandelt wird. Die nicht veralteten Werte sind ab IOS 5 verfügbar. Zulässige Werte sind:
+ <ul>
+  <li><code>none</code>: Automatische Großschreibung abschalten.</li>
+  <li><code>sentences</code>: Satzanfänge automatisch groß schreiben.</li>
+  <li><code>words</code>: Wortanfänge automatisch groß schreiben.</li>
+  <li><code>characters</code>: Alles automatisch großschreiben.</li>
+  <li><code>on</code>: {{deprecated_inline}} Seit iOS 5 veraltet.</li>
+  <li><code>off</code>: {{deprecated_inline}} Seit iOS 5 veraltet.</li>
+ </ul>
+ <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html#//apple_ref/doc/uid/TP40008058-autocapitalize"><code>autocapitalize</code> documentation</a> in der Safari HTML Reference.</dd>
+ <dt>{{htmlattrdef("autocomplete")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Dieses Attribute gibt an, ob der Browser den Wert des Eingabeelements automatisch vervollständigen kann. </dd>
+ <dd>Zulässige Werte sind:
+ <ul>
+  <li><code>off</code>: Der Anwender muss jedesmal einen Wert in dieses Feld eintragen oder das Dokument stellt ein eigenes Verfahren für das Vervollständigen bereit. Der Browser vervollständigt das Feld nicht automatisch.</li>
+  <li><code>on</code>: Der Browser kann den Wert automatisch vervollständigen, ausgehend von dem, was der Benutzer in der Vergangenheit eingetragen hat. Dieser Wert gibt jedoch keinen Hinweis über die erwarteten Eingaben.</li>
+  <li><code>name</code>: Vollständiger Name.</li>
+  <li><code>honorific-prefix: Titel oder Anrede</code> (z.B. "Herr", "Frau", "Dr."</li>
+  <li><code>given-name</code>: Rufname.</li>
+  <li><code>additional-name</code>: Weitere Vornamen.</li>
+  <li><code>family-name</code>: Nachname.</li>
+  <li><code>honorific-suffix</code>: Namensanhängel (z.B. "Jr.", "B.Sc.",  "II").</li>
+  <li><code>nickname: Spitzname</code></li>
+  <li><code>email</code>: E-Mail-Adresse</li>
+  <li><code>username</code>: Nutzername</li>
+  <li><code>new-password</code>: Ein neues Passwort (z.B. beim Erzeugen eines neuen Accounts oder beim Ändern eines Passworts).</li>
+  <li><code>current-password</code></li>
+  <li><code>organization-title</code>: Berufsbezeichnung (z.B. "Software-Ingenieur", "Senior Vice President", "Stellvertretender Direktor").</li>
+  <li><code>organization</code></li>
+  <li><code>street-address</code>: Adresse</li>
+  <li><code>address-line1</code>, <code>address-line2</code>, <code>address-line3</code>, <code>address-level4</code>, <code>address-level3</code>, <code>address-level2</code>, <code>address-level1</code></li>
+  <li><code>country</code></li>
+  <li><code>country-name</code></li>
+  <li><code>postal-code: Postleitzahl</code></li>
+  <li><code>cc-name</code>: Vollständiger Name wie auf dem Zahlungsinstrument angegeben.</li>
+  <li><code>cc-given-name</code></li>
+  <li><code>cc-additional-name</code></li>
+  <li><code>cc-family-name</code></li>
+  <li><code>cc-number</code>: Code, der das Zahlungsinstrument identifiziert (z.B. die Kreditkartennummer).</li>
+  <li><code>cc-exp:</code> Ablaufdatum des Zahlungsinstruments.</li>
+  <li><code>cc-exp-month</code></li>
+  <li><code>cc-exp-year</code></li>
+  <li><code>cc-csc</code>: Sicherheitscode des Zahlungsinstruments.</li>
+  <li><code>cc-type</code>: Art des Zahlungsinstruments (e.g. Visa).</li>
+  <li><code>transaction-currency</code></li>
+  <li><code>transaction-amount</code></li>
+  <li><code>language</code>: Bevorzugte Sprache, gültiges BCP 47 Sprach-Tag.</li>
+  <li><code>bday: Geburtsdatum</code></li>
+  <li><code>bday-day</code></li>
+  <li><code>bday-month</code></li>
+  <li><code>bday-year</code></li>
+  <li><code>sex</code>: Geschlechtliche Identität (z.B. weiblich), beliebiger Text ohne Zeilenumbrüche.</li>
+  <li><code>tel</code>: Telefonnummer</li>
+  <li><code>url</code>: Homepage oder andere Webseite, die zur Firma, Person, Adresse oder der Kontaktinformation in den anderen mit diesem Feld verbundenen Feldern gehört.</li>
+  <li><code>photo</code>: Foto, Icon oder anderes Bild, das zur Firma, Person, Adresse oder der Kontaktinformation in den anderen mit diesem Feld verbundenen Feldern gehört.</li>
+ </ul>
+
+ <p>Der <a href="https://html.spec.whatwg.org/multipage/forms.html#autofill">WHATWG Standard</a> enthält weitere Details zu diesem Thema</p>
+
+ <p>Ist <strong>autocomplete</strong> für ein Eingabeelement nicht angegeben, verwendet der Browser das <strong>autocomplete</strong>-Attribut des Formular-Eigentümers für dieses Element. Der Formular-Eigentümer ist entweder das <code>form</code>-Element, von dem dieses <code>input</code>-Element abstammt oder das <code>form</code>-Element, dessen <strong>id</strong> im <strong>form</strong>-Attribut des Eingabelements angegeben ist. Mehr Informationen dazu bei {{htmlattrxref("autocomplete", "form")}} in {{HTMLElement("form")}}.</p>
+
+ <p>Das <strong>autocomplete</strong>-Attribute kontrolliert auch, ob Firefox (anders als andere Browser) die Atribute <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">disabled und checked eines Eingabeelements zwischen Ladevorgängen der Seite</a> erhält. Diese Funktion ist normalerweise aktiv, es wird durch Setzen von  <strong>autocomplete</strong> auf <code>off</code> abgeschaltet. Das gilt auch für solche Eingabefelder, für die das <strong>autocomplete</strong>-Attribut normalerweise wegen des Werts von <strong>type</strong> nicht wirkt. Siehe {{bug(654072)}}.</p>
+
+ <p>Bei den meisten modernen Browsern (einschließlich Firefox 38+, Google Chrome 34+, IE11+) verhindert das Setzen von <strong>autocomplete</strong> nicht, dass der Passwort-Manager dem Nutzer anbietet, seine Login-Daten zu speichern und gegebenenfalls anschließend automatisch einzutragen. Siehe <a href="https://developer.mozilla.org/de/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#The_autocomplete_attribute_and_login_fields">the autocomplete attribute and login fields</a>.</p>
+ </dd>
+ <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Dieses boolesche Attribut gibt an, dass ein Eingabeelement den Fokus bekommt, wenn die Seite lädt, es sei denn, der Nutzer wechselt ihn, etwa durch Tippen in ein anderes Feld. Nur ein Form-Element in einem Dokument darf das <code><strong>autofocus</strong></code>-Attribut besitzen. Es kann nicht gesetzt werden, wenn das <strong><code>type</code></strong>-Attribut <code>hidden</code> ist. Das heißt, man kann den Fokus nicht automatisch auf ein unsichtbares Element setzen.
+ <div class="note"><strong>Bemerkung</strong>: Der Einsatz des <strong><code>autofocus</code></strong>-Attributs kann für Nutzer assistiver Technologien (Screenreader etc.) eine <strong>Barriere</strong> darstellen, da Inhalte der Seite übersprungen werden, ohne erfasst werden zu können. Dies kann damit umgangen werden, indem <a href="http://www.brucelawson.co.uk/2009/the-accessibility-of-html-5-autofocus/">zusätzlicher beschreibender Text</a> hinzugefügt wird.</div>
+ </dd>
+ <dt>{{htmlattrdef("capture")}}</dt>
+ <dd>
+ <p>Ist das <strong>type-</strong>Attribute <code>file</code>, weist das Vorhandensein dieses boolschen Attributs darauf hin, dass das direkte Mitschneiden von Medien per <a href="https://www.w3.org/TR/html-media-capture/#dfn-media-capture-mechanism">media capture mechanism</a> bevorzugt ist.</p>
+ </dd>
+ <dt>{{htmlattrdef("checked")}}</dt>
+ <dd>Ist das <strong>type</strong>-Attribute <code>radio</code> oder <code>checkbox</code>, setzt dieses boolsche Attribut das Element auf vorausgewählt. Sonst wird das Attribut ignoriert.</dd>
+ <dt>{{htmlattrdef("disabled")}}</dt>
+ <dd>Dieses boolsche Attribut gewährleistet, dass der Nutzer mit dem Eingabeelement nicht interagieren kann. Insbesondere In particular erhalten so abgeschaltete Elemente <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#enabling-and-disabling-form-controls">keine Click-Events</a>. Außerdem wird der Wert eines abgeschalteten Elements beim Übertragen des Formulars nicht übermittelt. Das Attribute wird ignoriert, wenn das <strong>type</strong>-Attribut den Wert <code>hidden</code> hat.</dd>
+ <dt>{{htmlattrdef("form")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Das <code>form</code>-Element, zu dem dieses Eingabeelement gehört (sein "Formulareigentümer"). Der Wert dieses Attributs muss die <strong>id</strong> eines {{HTMLElement("form")}}-Elements im selben Dokument sein. Fehlt das Attribut, muss das Eingabeelement Abkömmling eines {{HTMLElement("form")}}-Elements sein. Das Attribut ermöglicht es, Eingabeelemente irgendwo in einem Dokument zu platzieren, nicht nur als Abkömmlinge eines <code>form</code>-Elements. Ein Eingabeelement darf nur zu einem Formular gehören.</dd>
+ <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>The URI of a program that processes the information submitted by the input element, if it is a submit button or image. If specified, it overrides the {{htmlattrxref("action","form")}} attribute of the element's form owner.</dd>
+ <dt>{{htmlattrdef("formenctype")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>If the input element is a submit button or image, this attribute specifies the type of content that is used to submit the form to the server. Possible values are:
+ <ul>
+  <li><code>application/x-www-form-urlencoded</code>: The default value if the attribute is not specified.</li>
+  <li><code>multipart/form-data</code>: Use this value if you are using an {{HTMLElement("input")}} element with the {{htmlattrxref("type","input")}} attribute set to <code>file</code>.</li>
+  <li><code>text/plain</code></li>
+ </ul>
+
+ <p>If this attribute is specified, it overrides the {{htmlattrxref("enctype","form")}} attribute of the element's form owner.</p>
+ </dd>
+ <dt>{{htmlattrdef("formmethod")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>If the input element is a submit button or image, this attribute specifies the HTTP method that the browser uses to submit the form. Possible values are:
+ <ul>
+  <li><code>post</code>: The data from the form is included in the body of the form and is sent to the server.</li>
+  <li><code>get</code>: The data from the form are appended to the <strong>form</strong> attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.</li>
+ </ul>
+
+ <p>If specified, this attribute overrides the {{htmlattrxref("method","form")}} attribute of the element's form owner.</p>
+ </dd>
+ <dt>{{htmlattrdef("formnovalidate")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>If the input element is a submit button or image, this Boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the {{htmlattrxref("novalidate","form")}} attribute of the element's form owner.</dd>
+ <dt>{{htmlattrdef("formtarget")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>If the input element is a submit button or image, this attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a <em>browsing context</em> (for example, tab, window, or inline frame). If this attribute is specified, it overrides the {{htmlattrxref("target", "form")}} attribute of the elements's form owner. The following keywords have special meanings:
+ <ul>
+  <li>_<code>self</code>: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.</li>
+  <li><code>_blank</code>: Load the response into a new unnamed browsing context.</li>
+  <li><code>_parent</code>: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as <code>_self</code>.</li>
+  <li><code>_top</code>: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as <code>_self</code>.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("height")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>If the value of the <strong>type</strong> attribute is <code>image</code>, this attribute defines the height of the image displayed for the button.</dd>
+ <dt>{{htmlattrdef("inputmode")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>A hint to the browser for which keyboard to display. This attribute applies when the value of the <strong>type</strong> attribute is text, password, email, or url. Possible values are:
+ <ul>
+  <li><code>verbatim</code>: Alphanumeric, non-prose content such as usernames and passwords.</li>
+  <li><code>latin</code>: Latin-script input in the user's preferred language with typing aids such as text prediction enabled. For human-to-computer communication such as search boxes.</li>
+  <li><code>latin-name</code>: As <em>latin</em>, but for human names.</li>
+  <li><code>latin-prose</code>: As <em>latin</em>, but with more aggressive typing aids. For human-to-human communication such as instant messaging for email.</li>
+  <li><code>full-width-latin</code>: As <em>latin-prose</em>, but for the user's secondary languages.</li>
+  <li><code>kana</code>: Kana or romaji input, typically hiragana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.</li>
+  <li><code>katakana</code>: Katakana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.</li>
+  <li><code>numeric</code>: Numeric input, including keys for the digits 0 to 9, the user's preferred thousands separator character, and the character for indicating negative numbers. Intended for numeric codes, e.g. credit card numbers. For actual numbers, prefer using &lt;input type="number"&gt;</li>
+  <li><code>tel</code>: Telephone input, including asterisk and pound key. Use &lt;input type="tel"&gt; if possible instead.</li>
+  <li><code>email</code>: Email input. Use &lt;input type="email"&gt; if possible instead.</li>
+  <li><code>url</code>: URL input. Use &lt;input type="url"&gt; if possible instead.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("list")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Identifies a list of pre-defined options to suggest to the user. The value must be the <strong>id</strong> of a {{HTMLElement("datalist")}} element in the same document. The browser displays only options that are valid values for this input element. This attribute is ignored when the <strong>type</strong> attribute's value is <code>hidden</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, or a button type.</dd>
+ <dt>{{htmlattrdef("max")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>The maximum (numeric or date-time) value for this item, which must not be less than its minimum (<strong>min</strong> attribute) value.</dd>
+ <dt>{{htmlattrdef("maxlength")}}</dt>
+ <dd>If the value of the <strong>type</strong> attribute is <code>text</code>, <code>email</code>,<code> search</code>, <code>password</code>, <code>tel</code>, or <code>url</code>, this attribute specifies the maximum number of characters (in Unicode code points) that the user can enter; for other control types, it is ignored. It can exceed the value of the <strong>size</strong> attribute. If it is not specified, the user can enter an unlimited number of characters. Specifying a negative number results in the default behavior; that is, the user can enter an unlimited number of characters. The constraint is evaluated only when the value of the attribute has been changed.</dd>
+ <dt>{{htmlattrdef("min")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>The minimum (numeric or date-time) value for this item, which must not be greater than its maximum (<strong>max</strong> attribute) value.</dd>
+ <dt>{{htmlattrdef("minlength")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>If the value of the <strong>type</strong> attribute is <code>text</code>, <code>email</code>,<code> search</code>, <code>password</code>, <code>tel</code>, or <code>url</code>, this attribute specifies the minimum number of characters (in Unicode code points) that the user can enter; for other control types, it is ignored.</dd>
+ <dt>{{htmlattrdef("multiple")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>This Boolean attribute indicates whether the user can enter more than one value. This attribute applies when the <strong>type</strong> attribute is set to <code>email</code> or <code>file</code>; otherwise it is ignored.</dd>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>The name of the control, which is submitted with the form data.</dd>
+ <dt>{{htmlattrdef("pattern")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>A regular expression that the control's value is checked against. The pattern must match the entire value, not just some subset. Use the <strong>title</strong> attribute to describe the pattern to help the user. This attribute applies when the value of the <strong>type</strong> attribute is <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code> or <code>email</code>; otherwise it is ignored. The regular expression language is the same as JavaScript's. The pattern is not surrounded by forward slashes.</dd>
+ <dt>{{htmlattrdef("placeholder")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>A hint to the user of what can be entered in the control . The placeholder text must not contain carriage returns or line-feeds. This attribute applies when the value of the <strong>type</strong> attribute is <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code> or <code>email</code>; otherwise it is ignored.
+ <div class="note"><strong>Note:</strong> Do not use the <code>placeholder</code> attribute instead of a {{HTMLElement("label")}} element. Their purposes are different: the {{HTMLElement("label")}} attribute describes the role of the form element; that is, it indicates what kind of information is expected, the <code>placeholder</code> attribute is a hint about the format the content should take. There are cases in which the <code>placeholder</code> attribute is never displayed to the user, so the form must be understandable without it.</div>
+ </dd>
+ <dt>{{htmlattrdef("readonly")}}</dt>
+ <dd>This Boolean attribute indicates that the user cannot modify the value of the control.
+ <p>{{HTMLVersionInline("5")}} This attribute is ignored if the value of the <strong>type</strong> attribute is <code>hidden</code>, <code>range</code>, <code>color</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, or a button type.</p>
+ </dd>
+ <dt>{{htmlattrdef("required")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>This attribute specifies that the user must fill in a value before submitting a form. It cannot be used when the <strong>type</strong> attribute is <code>hidden</code>, <code>image</code>, or a button type (<code>submit</code>, <code>reset</code>, or <code>button</code>). The {{cssxref(":optional")}} and {{cssxref(":required")}} CSS pseudo-classes will be applied to the field as appropriate.</dd>
+ <dt>{{htmlattrdef("selectionDirection")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>The direction in which selection occurred. This is "forward" if the selection was made from left-to-right in an LTR locale or right-to-left in an RTL locale, or "backward" if the selection was made in the opposite direction. This can be "none" if the selection direction is unknown.</dd>
+ <dt>{{htmlattrdef("size")}}</dt>
+ <dd>The initial size of the control. This value is in pixels unless the value of the <strong>type</strong> attribute is <code>text</code> or <code>password</code>, in which case, it is an integer number of characters. Starting in HTML5, this attribute applies only when the <strong>type</strong> attribute is set to <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code>, <code>email</code>, or <code>password</code>; otherwise it is ignored. In addition, the size must be greater than zero. If you don't specify a size, a default value of 20 is used.</dd>
+ <dt>{{htmlattrdef("spellcheck")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Setting the value of this attribute to <code>true</code> indicates that the element needs to have its spelling and grammar checked. The value <code>default</code> indicates that the element is to act according to a default behavior, possibly based on the parent element's own <code>spellcheck</code> value. The value <code>false</code> indicates that the element should not be checked.</dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>If the value of the <strong>type</strong> attribute is <code>image</code>, this attribute specifies a URI for the location of an image to display on the graphical submit button; otherwise it is ignored.</dd>
+ <dt>{{htmlattrdef("step")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Works with the <strong>min</strong> and <strong>max</strong> attributes to limit the increments at which a numeric or date-time value can be set. It can be the string <code>any</code> or a positive floating point number. If this attribute is not set to <code>any</code>, the control accepts only values at multiples of the step value greater than the minimum.</dd>
+ <dt>{{htmlattrdef("tabindex")}} element-specific in {{HTMLVersionInline(4)}}, global in {{HTMLVersionInline("5")}}</dt>
+ <dd>The position of the element in the tabbing navigation order for the current document.</dd>
+ <dt>{{htmlattrdef("usemap")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline", "HTML5")}}</dt>
+ <dd>The name of a {{HTMLElement("map")}} element to as an image map.</dd>
+ <dt>{{htmlattrdef("value")}}</dt>
+ <dd>The initial value of the control. This attribute is optional except when the value of the <strong>type</strong> attribute is <code>radio</code> or <code>checkbox</code>.<br>
+ Note that when reloading the page, Gecko and IE <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=46845#c186">will ignore the value specified in the HTML source</a>, if the value was changed before the reload.</dd>
+ <dt>{{htmlattrdef("width")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>If the value of the <strong>type</strong> attribute is <code>image</code>, this attribute defines the width of the image displayed for the button.</dd>
+ <dt>{{htmlattrdef("x-moz-errormessage")}} {{non-standard_inline}}</dt>
+ <dd>This Mozilla extension allows you to specify the error message to display when a field doesn't successfully validate.</dd>
+</dl>
+
+<h2 id="Notes">Notes</h2>
+
+<h3 id="File_inputs">File inputs</h3>
+
+<div class="note">
+<p><strong>Note:</strong> Starting in {{Gecko("2.0")}}, calling the <code>click()</code> method on an {{HTMLElement("input")}} element of type "file" opens the file picker and lets the user select files. See <a href="/en-US/docs/Using_files_from_web_applications">Using files from web applications</a> for an example and more details.</p>
+</div>
+
+<p>You can't set the value of a file picker from a script; doing something like the following has no effect:</p>
+
+<pre class="brush: js">var e = getElementById("someFileInputElement");
+e.value = "foo";
+</pre>
+
+<h3 id="Error_messages">Error messages</h3>
+
+<p>If you want Firefox to present a custom error message when a field fails to validate, you can use the <code>x-moz-errormessage</code> attribute to do so:</p>
+
+<pre class="brush: html">&lt;input type="email" x-moz-errormessage="Please specify a valid email address."&gt;
+</pre>
+
+<p>Note, however, that this is not standard and will not have an effect on other browsers.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="A_simple_input_box">A simple input box</h3>
+
+<pre class="brush: html">&lt;!-- A basic input --&gt;
+&lt;input type="text" name="input" value="Type here"&gt;
+</pre>
+
+<p><input></p>
+
+<h3 id="A_common_use-case_scenario">A common use-case scenario</h3>
+
+<pre class="brush: html">&lt;!-- A common form that includes input tags --&gt;
+&lt;form action="getform.php" method="get"&gt;
+    First name: &lt;input type="text" name="first_name" /&gt;&lt;br /&gt;
+     Last name: &lt;input type="text" name="last_name" /&gt;&lt;br /&gt;
+        E-mail: &lt;input type="email" name="user_email" /&gt;&lt;br /&gt;
+&lt;input type="submit" value="Submit" /&gt;
+&lt;/form&gt;
+</pre>
+
+<h3 id="Using_mozactionhint_on_Firefox_mobile">Using mozactionhint on Firefox mobile</h3>
+
+<p>You can use the {{htmlattrxref("mozactionhint", "input")}} attribute to specify the text for the label of the enter key on the virtual keyboard when your form is rendered on Firefox mobile. For example, to have a "Next" label, you can do this:</p>
+
+<pre class="brush: html">&lt;input type="text" mozactionhint="next" name="sometext" /&gt;
+</pre>
+
+<p>The result is:</p>
+
+<p><a href="/@api/deki/files/4970/=mozactionhint.png"><img alt="mozactionhint.png" class="default internal" src="/@api/deki/files/4970/=mozactionhint.png?size=webview" style="border: 1px solid black; height: 350px; width: 210px;"></a></p>
+
+<h2 id="Specifications" name="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'the-input-element.html#the-input-element', '&lt;input&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-input-element', '&lt;input&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'forms.html#h-17.4', '&lt;form&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td>
+   <td>2 or earlier</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>type</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td>
+   <td>2</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>type=button</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td>
+   <td>3</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>type=checkbox</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7 or earlier")}}<br>
+    {{CompatGeckoDesktop("1.9.2")}} for <code>indeterminate</code> value</td>
+   <td>2</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>type=color</td>
+   <td>21.0</td>
+   <td>
+    <p>{{CompatGeckoDesktop("29.0")}} (Not for Windows Touch yet)</p>
+   </td>
+   <td>{{CompatNo}}</td>
+   <td>11.01</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>type=date</td>
+   <td>5.0 (recognized but no UI)</td>
+   <td>{{CompatNo}}<br>
+    {{unimplemented_inline("446510")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.62</td>
+   <td>{{CompatVersionUnknown}} (recognized but no UI)</td>
+  </tr>
+  <tr>
+   <td>type=datetime</td>
+   <td>5.0 (recognized but no UI)</td>
+   <td>{{CompatNo}}<br>
+    {{unimplemented_inline("446510")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.62</td>
+   <td>{{CompatVersionUnknown}} (recognized but no UI)</td>
+  </tr>
+  <tr>
+   <td style="white-space: nowrap;">type=datetime-local</td>
+   <td>5.0 (recognized but no UI)</td>
+   <td>{{CompatNo}}<br>
+    {{unimplemented_inline("446510")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.62</td>
+   <td>{{CompatVersionUnknown}} (recognized but no UI)</td>
+  </tr>
+  <tr>
+   <td>type=email</td>
+   <td>5.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>10.62</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>type=file</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td>
+   <td>3.02</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>type=hidden</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td>
+   <td>2</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>type=image</td>
+   <td>1.0</td>
+   <td>Gecko 2.0 only sends x and y coordinates when clicked, not longer the name/value of the element</td>
+   <td>2</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>type=month</td>
+   <td>5.0 (recognized but no UI)</td>
+   <td>{{CompatNo}}<br>
+    {{unimplemented_inline("446510")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.62</td>
+   <td>{{CompatVersionUnknown}} (recognized but no UI)</td>
+  </tr>
+  <tr>
+   <td>type=number</td>
+   <td>6.0 (Localization in Chrome 11)</td>
+   <td>{{CompatGeckoDesktop("29.0")}}</td>
+   <td>10<br>
+    (recognized but no UI)</td>
+   <td>10.62</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>type=password</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td>
+   <td>2</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>type=radio</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7 or earlier")}}<br>
+    {{CompatGeckoDesktop("1.9.2")}} for <code>indeterminate</code> value</td>
+   <td>2</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>type=range</td>
+   <td>5.0</td>
+   <td>{{CompatGeckoDesktop("23.0")}}</td>
+   <td>10</td>
+   <td>10.62 (11.01 added support for a default value)</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>type=reset</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td>
+   <td>2</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>type=search</td>
+   <td>5.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>11.01</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>type=submit</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td>
+   <td>2</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>type=tel</td>
+   <td>5.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>11.01</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>type=text</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td>
+   <td>2</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>type=time</td>
+   <td>5.0 (recognized but no UI)</td>
+   <td>{{CompatNo}}<br>
+    {{unimplemented_inline("446510")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.62</td>
+   <td>{{CompatVersionUnknown}} (recognized but no UI)</td>
+  </tr>
+  <tr>
+   <td>type=url</td>
+   <td>5.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>10.62</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>type=week</td>
+   <td>5.0 (recognized but no UI)</td>
+   <td>{{CompatNo}}<br>
+    {{unimplemented_inline("446510")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.62</td>
+   <td>{{CompatVersionUnknown}} (recognized but no UI)</td>
+  </tr>
+  <tr>
+   <td>accept=[MIME type]</td>
+   <td>8.0</td>
+   <td>{{CompatGeckoDesktop("16.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>accept=audio/*</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}<br>
+    Filters for the following audio file extensions: .aac, .aif, .flac, .iff, .m4a, .m4b, .mid, .midi, .mp3, .mpa, .mpc, .oga, .ogg, .ra, .ram, .snd, .wav, .wma</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>accept=video/*</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}<br>
+    Filters for the following video file extensions: .avi, .divx, .flv, .m4v, .mkv, .mov, .mp4, .mpeg, .mpg, .ogm, .ogv, .ogx, .rm, .rmvb, .smil, .webm, .wmv, .xvid</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>accept=image/*</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}<br>
+    Filters for the following image file extensions: .jpe, .jpg, .jpeg, .gif, .png, .bmp, .ico, .svg, .svgz, .tif, .tiff, .ai, .drw, .pct, .psp, .xcf, .psd, .raw</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>accesskey</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>6</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>mozactionhint</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>autocomplete</td>
+   <td>17.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>5</td>
+   <td>9.6</td>
+   <td>5.2</td>
+  </tr>
+  <tr>
+   <td>autofocus</td>
+   <td>5.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>9.6</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td>checked</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td>
+   <td>2</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>disabled</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td>
+   <td>6</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>form</td>
+   <td>9.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.62</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>formaction</td>
+   <td>9.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>10.62</td>
+   <td>5.2</td>
+  </tr>
+  <tr>
+   <td>formenctype</td>
+   <td>9.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>10.62</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>formmethod</td>
+   <td>9.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>10.62</td>
+   <td>5.2</td>
+  </tr>
+  <tr>
+   <td>formnovalidate</td>
+   <td>5.0 (in 6.0 only worked with HTML5 doctype, validation support in 7.0 was disabled and re-enabled in 10.0)</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>10.62</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>formtarget</td>
+   <td>9.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>10.62</td>
+   <td>5.2</td>
+  </tr>
+  <tr>
+   <td>height</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("16.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>inputmode</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>list</td>
+   <td>20.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>9.6</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>max</td>
+   <td>5.0</td>
+   <td>{{CompatGeckoDesktop("16.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.62</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>maxlength</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>2</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>min</td>
+   <td>5.0</td>
+   <td>{{CompatGeckoDesktop("16.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.62</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>minlength</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>multiple</td>
+   <td>1.0 (supported for type=file and type=email as of 5.0)</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}} for <strong>type</strong>=file<br>
+    {{CompatVersionUnknown}} for <strong>type</strong>=email</td>
+   <td>10</td>
+   <td>1.0 (10.62 support for type=file and as of 11.01 type=email)</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>name</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td>
+   <td>2</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>pattern</td>
+   <td>5.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>9.6</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>placeholder</td>
+   <td>10.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>11.00</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td>readonly</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td>
+   <td>6 (missing for <strong>type</strong> of <code>checkbox</code>, <code>radio</code>)</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>required</td>
+   <td>5.0 (support for select element as of 10)</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>9.6</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>size</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td>
+   <td>2</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>spellcheck</td>
+   <td>10.0</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>10</td>
+   <td>11.0</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>src</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td>
+   <td>2</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>step</td>
+   <td>6.0</td>
+   <td>{{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>10.62</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td>tabindex</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td>
+   <td>6 (elements with tabindex &gt; 0 are not navigated)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>width</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("16.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>type</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>type=button</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>type=checkbox</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>type=color</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("27.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>type=date</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.62</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td>type=datetime</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.62</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td style="white-space: nowrap;">type=datetime-local</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.62</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td style="white-space: nowrap;">type=email</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3.1 (no validation but gives a specific keyboard)</td>
+  </tr>
+  <tr>
+   <td style="white-space: nowrap;">type=file</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td style="white-space: nowrap;">type=hidden</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td style="white-space: nowrap;">type=image</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td style="white-space: nowrap;">type=month</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.62</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td style="white-space: nowrap;">type=number</td>
+   <td>2.3 (no validation but gives a specific keyboard)</td>
+   <td>{{CompatGeckoMobile("29.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>4.0 (no validation but gives a specific keyboard)</td>
+  </tr>
+  <tr>
+   <td style="white-space: nowrap;">type=password</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td style="white-space: nowrap;">type=radio</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td style="white-space: nowrap;">type=range</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td style="white-space: nowrap;">type=reset</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td style="white-space: nowrap;">type=search</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.62</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td style="white-space: nowrap;">type=submit</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td style="white-space: nowrap;">type=tel</td>
+   <td>2.3</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.62</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td style="white-space: nowrap;">type=text</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td style="white-space: nowrap;">type=time</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.62</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td style="white-space: nowrap;">type=url</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.62</td>
+   <td>3.1 (no validation but gives a specific keyboard)</td>
+  </tr>
+  <tr>
+   <td style="white-space: nowrap;">type=week</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.62</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>accept=[MIME type]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>accept=audio/*</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>accept=image/*</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>accept=video/*</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>accesskey</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>autocomplete</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>autofocus</td>
+   <td>3.2</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>checked</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>disabled</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>form</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>formaction</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.62</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td>formenctype</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>formmethod</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.62</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td>formnovalidate</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.62</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>formtarget</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.62</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td>height</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("16.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>list</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>max</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} {{bug("556010")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.62</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>maxlength</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>min</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} {{bug("556010")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.62</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>minlength</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>multiple</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>name</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>pattern</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>placeholder</td>
+   <td>2.3</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>11.10</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>readonly</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>required</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>size</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>spellcheck</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>11.0</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>src</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>step</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} {{bug("556009")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.62</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>tabindex</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>width</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("16.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Gecko_notes">Gecko notes</h3>
+
+<p>Starting in Gecko 9.0 {{geckoRelease("9.0")}}, Firefox for Android lets users capture images using their camera and upload them, without having to leave the browser. Web developers can implement this feature by simply specifying setting the <code>accept</code> attribute's value to "image/*" on their <code>file</code> input, like this:</p>
+
+<p><code>&lt;input type="file" accept="image/*"&gt;</code></p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Other form-related elements: {{HTMLElement("form")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li>
+ <li><a class="external" href="http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text">Cross-browser HTML5 placeholder text</a></li>
+</ul>
diff --git a/files/de/web/html/element/ins/index.html b/files/de/web/html/element/ins/index.html
new file mode 100644
index 0000000000..7c80f9d2ea
--- /dev/null
+++ b/files/de/web/html/element/ins/index.html
@@ -0,0 +1,122 @@
+---
+title: <ins>
+slug: Web/HTML/Element/ins
+tags:
+  - Element
+  - HTML
+  - HTML edits
+  - Referenz
+  - Web
+translation_of: Web/HTML/Element/ins
+---
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Das <strong>HTML <code>&lt;ins&gt;</code> Element</strong> (oder <em>HTML Inserted Text</em>) repräsentiert eine Menge an Text, die nachträglich in das Dokument eingefügt wurde.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorien</a></th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">Formulierungsinhalt</a> oder <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">fließender Inhalt</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubter Inhalt</th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Transparent" title="HTML/Content categories#Transparent">Transparent</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag Auslassung</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte Elternelemente</th>
+   <td>Jedes Element, dass <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Formulierungsinhalt</a> erlaubt.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM Schnittstelle</th>
+   <td>{{domxref("HTMLModElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p><span style="line-height: 21px;">Dieses Element schließt </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globale Attribute</a><span style="line-height: 21px;"> ein.</span></p>
+
+<dl>
+ <dt>{{htmlattrdef("cite")}}</dt>
+ <dd>Dieses Attribut definiert die URI einer Quelle, die die Änderung ausgelöst hat, wie zum Beispiel eine Ticketnummer in einem Bugtrack-System.</dd>
+ <dt>{{htmlattrdef("datetime")}}</dt>
+ <dd>Dieses Attribut indiziert das Datum und die Uhrzeit, wann der Text geändert wurde und muss ein <a class="external" href="http://www.w3.org/TR/2011/WD-html5-20110525/common-microsyntaxes.html#valid-date-string-with-optional-time" title="http://www.w3.org/TR/html5/common-microsyntaxes.html#valid-date-string-with-optional-time">gültiges Datum mit optionaler Uhrzeit</a> sein. Wenn der Wert nicht als Datum mit optionaler Zeitangabe erkannt werden kann, hat dieses Element keinen Bezug zur Zeit.</dd>
+</dl>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: html">&lt;ins&gt;Dieser Text wurde hinzugefügt.&lt;/ins&gt;</pre>
+
+<h3 id="Ergebnis">Ergebnis</h3>
+
+<p><ins>Dieser Text wurde hinzugefügt.</ins></p>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'edits.html#the-ins-element', '&lt;ins&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'edits.html#the-ins-element', '&lt;ins&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.4', '&lt;ins&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{HTMLElement("del")}} Element um gelöschten Inhalt zu markieren</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/de/web/html/element/legend/index.html b/files/de/web/html/element/legend/index.html
new file mode 100644
index 0000000000..9f31eac6cc
--- /dev/null
+++ b/files/de/web/html/element/legend/index.html
@@ -0,0 +1,97 @@
+---
+title: <legend>
+slug: Web/HTML/Element/legend
+translation_of: Web/HTML/Element/legend
+---
+<p>The <strong>HTML <code>&lt;legend&gt;</code> element</strong> represents a caption for the content of its parent {{HTMLElement("fieldset")}}.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Inhaltskategorien</a></th>
+   <td>Keine.</td>
+  </tr>
+  <tr>
+   <th scope="row">Zugelassener Inhalt</th>
+   <td>Definiert eine Überschrift für einen Formularbereich welches durch ein Fieldset zusammengefasst wurde.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag Verwendung</th>
+   <td>Start-Tag und End-Tag notwendig.</td>
+  </tr>
+  <tr>
+   <th scope="row">Elternelemente</th>
+   <td>Legend kann nur innerhalb von fieldset stehen</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted ARIA roles</th>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p>Dieses Element unterstützt die <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">globalen Attribute</a>.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>&lt;fieldset&gt;<br>
+             &lt;legend&gt;Geschlecht&lt;/legend&gt;<br>
+                     &lt;label for="man"&gt;<br>
+                             &lt;input type="radio" name="geschlecht" value="man"&gt; Männlich&lt;/label&gt;<br>
+                    &lt;label for="woman"&gt;<br>
+                              &lt;input type="radio" name="geschlecht"  value="woman"&gt; Weiblich&lt;/label&gt;<br>
+ &lt;/fieldset&gt;</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "forms.html#the-legend-element", "&lt;legend&gt;")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Definition of the <code>legend</code> element</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "rendering.html#the-fieldset-and-legend-elements")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Suggested default rendering of the <code>fieldset</code> and <code>legend</code> elements</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "forms.html#the-legend-element", "&lt;legend&gt;")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML4.01", "interact/forms.html#h-17.10", "&lt;legend&gt;")}}</td>
+   <td>{{Spec2("HTML4.01")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+
+
+<p>{{Compat("html.elements.legend")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Others form-related elements: {{HTMLElement("form")}}, {{HTMLElement("option")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/de/web/html/element/li/index.html b/files/de/web/html/element/li/index.html
new file mode 100644
index 0000000000..2647622b12
--- /dev/null
+++ b/files/de/web/html/element/li/index.html
@@ -0,0 +1,193 @@
+---
+title: <li>
+slug: Web/HTML/Element/li
+tags:
+  - Element
+  - HTML
+  - HTML Gruppierender Inhalt
+  - Referenz
+  - Web
+translation_of: Web/HTML/Element/li
+---
+<div>{{HTMLRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Das HTML Element <em>list item</em> <code>&lt;li&gt; </code>wird verwendet, um einen Listeneintrag innerhalb einer geordneten Liste ({{HTMLElement("ol")}}) oder einer ungeordneten Liste ({{HTMLElement("ul")}}) oder einem Menü ({{HTMLElement("menu")}}) auszuzeichnen. In Menüs und ungeordneten Listen werden Listeneinträge normalerweise mit Aufzählungszeichen dargestellt. In geordneten Listen werden sie normalerweise mit einem aufsteigendem Zähler wie einer Nummer oder einem Buchstaben auf der linken Seite dargestellt.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/de/docs/Web/Guide/HTML/Inhaltskategorien">Inhaltskategorien</a></th>
+   <td>Keine</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubter Inhalt</th>
+   <td><a href="/de/docs/Web/Guide/HTML/Inhaltskategorien#Fließender+Inhalt">Fließender Inhalt</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Tagauslassung</th>
+   <td>Der Endtag kann weggelassen werden, falls ihm direkt ein weiteres {{HTMLElement("li")}} Element folgt oder falls sein Elternelement keine weiteren Inhalte hat.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte Elternelemente</th>
+   <td>Ein {{HTMLElement("ul")}}, {{HTMLElement("ol")}} oder {{HTMLElement("menu")}} Element. Obwohl es nicht spezifikationsgerechter Verwendung entspricht, kann das veraltete {{HTMLElement("dir")}} ebenfalls als Elternelement verwendet werden.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM Schnittstelle</th>
+   <td>{{domxref("HTMLLIElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p>Dieses Element enthält die <a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">globalen Attribute</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("value")}} </dt>
+ <dd>Legt die Zahl fest, mit der die Nummerierung in einem {{HTMLElement("ol")}} Element beginnen soll. Dies geschieht unabhängig vom Typ der Nummerierung. Römische Zahlen und Buchstaben können allerdings nicht als Wert angegeben werden, der einzig akzeptierte Wert ist eine Zahl. Listeneinträge, die dem Eintrag mit dem <code>value</code> Attribut folgen, werden die Nummerierung fortführen, die festgelegt wurde. Das <code>value</code> Attribut hat für eine ungeordnete Liste keine Bedeutung.</dd>
+ <dd>{{Note("Dieses Attribut wurde in HTML4 missbilligt, jedoch in HTML5 neu eingeführt.")}}
+ <div class="note">
+ <p><strong>Hinweis:</strong> Vor {{Gecko("9.0")}} wurden negative Werte fälschlicherweise zu 0 konvertiert. Seit {{Gecko("9.0")}} werden alle Ganzzahlwerte korrekt interpretiert.</p>
+ </div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("type")}} {{Deprecated_inline}}</dt>
+ <dd>Dieses Zeichen legt den Aufzählungstyp fest:</dd>
+ <dd>
+ <ul>
+  <li><code>a</code>: Kleinbuchstaben</li>
+  <li><code>A</code>: Großbuchstaben</li>
+  <li><code>i</code>: kleingeschriebene, römische Nummerierung</li>
+  <li><code>I</code>: großgeschriebene römische Nummerierung</li>
+  <li><code>1</code>: Zahlen</li>
+ </ul>
+ Die Festlegung eines Typs in einem {{HTMLElement("ol")}} Element wird für das ganze Element verwendet, wenn nicht innerhalb eines <code>&lt;li&gt;</code> Elements etwas anderes angegeben wird.</dd>
+</dl>
+
+<div class="note"><strong>Hinweis:</strong> Dieses Attribut ist veraltet. Es sollte stattdessen die CSS {{cssxref("list-style-type")}} Eigenschaft verwendet werden.</div>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<div id="Beispiel_1">
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;Erster Eintrag&lt;/li&gt;
+  &lt;li&gt;Zweiter Eintrag&lt;/li&gt;
+  &lt;li&gt;Dritter Eintrag&lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+</div>
+
+<p>Ergibt:</p>
+
+<p>{{EmbedLiveSample("Beispiel_1")}}</p>
+
+<div id="Beispiel_2">
+<pre class="brush: html" id="Beispiel_2">&lt;ul&gt;
+  &lt;li&gt;Erster Eintrag&lt;/li&gt;
+  &lt;li&gt;Zweiter Eintrag&lt;/li&gt;
+  &lt;li&gt;Dritter Eintrag&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+</div>
+
+<p>Ergibt:</p>
+
+<p>{{EmbedLiveSample("Beispiel_2")}}</p>
+
+<p>Für detailliertere Beispiele siehe die Seiten für {{HTMLElement("ol")}} und {{HTMLElement("ul")}}.</p>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-li-element', '&lt;li&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'the-li-element.html#the-li-element', '&lt;li&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'lists.html#h-10.2', '&lt;li&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Andere Listenbezogene HTML-Elemente: {{HTMLElement("ul")}}, {{HTMLElement("ol")}}, {{HTMLElement("menu")}} und das veraltete {{HTMLElement("dir")}};</li>
+ <li>CS- Eigenschaften, die besonders nützlich zur Gestaltung des <code>&lt;li&gt;</code> Elements sind:
+  <ul>
+   <li>die {{cssxref("list-style")}}-Eigenschaft, um festzulegen, wie die Nummerierung dargestellt wird</li>
+   <li><a href="https://developer.mozilla.org/Web/Guide/CSS/Counters">CSS Counters</a>, um komplexe verschachtelte Listen zu erstellen</li>
+   <li>die {{cssxref("margin")}} Eigenschaft, um den Einzug der Listeneinträge zu steuern</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/de/web/html/element/link/index.html b/files/de/web/html/element/link/index.html
new file mode 100644
index 0000000000..a17b05667d
--- /dev/null
+++ b/files/de/web/html/element/link/index.html
@@ -0,0 +1,361 @@
+---
+title: <link>
+slug: Web/HTML/Element/link
+tags:
+  - Element
+  - HTML
+  - Metadaten
+  - Referenz
+  - Web
+translation_of: Web/HTML/Element/link
+---
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+
+<p>Das <em>HTML-Link-Element</em> (<strong>&lt;link&gt;</strong>) spezifiziert Beziehungen zwischen dem aktuellen Dokument und einer externen Ressource. Mögliche Anwendungen für dieses Element sind die Definition eines relationalen Rahmens für die Navigation. Dieses Element wird am häufigsten verwendet, um mit Style Sheets zu verlinken.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th>
+   <td>Metadata content. If {{htmlattrxref("itemprop", "link")}} is present: <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content"> phrasing content</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted content</th>
+   <td>None, it is an {{Glossary("empty element")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>As it is a void element, the <span title="syntax-start-tag">start tag</span> must be present and the <span title="syntax-end-tag">end tag</span> must not be present</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted parent elements</th>
+   <td>Any element that accepts metadata elements. If {{htmlattrxref("itemprop", "link")}} is present: any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLLinkElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p>Dieses Element beinhaltet die <a href="/de/docs/Web/HTML/Globale_Attribute">Globalen Attribute</a>.</p>
+
+<p> </p>
+
+<dl>
+ <dt>{{htmlattrdef("charset")}}{{obsolete_inline}}</dt>
+ <dd>Dieses Attribut definiert die Zeichenkodierung der verlinkten Ressource. Der Wert ist eine durch Leerzeichen und/oder Komma getrennte Liste von Zeichensätzen gemäß <a href="http://tools.ietf.org/html/rfc2045">RFC 2045</a>. Der Standardwert ist ISO-8859-1.
+ <div class="note"><strong>Verwendungshinweis</strong>: Dieses Attribut ist in HTML5 obsolet und <strong>darf von den Autoren nicht verwendet werden</strong>. Um seine Wirkung zu erzielen, verwenden Sie den <font face="Courier New, monospace"><font color="#000000">Content-Type</font></font> HTTP-Header auf der verlinkten Ressource.</div>
+ </dd>
+ <dd> </dd>
+ <dt>{{htmlattrdef("crossorigin")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Dieses aufgezählte Attribut gibt an, ob das Abrufen des zugehörigen Bildes mit CORS erfolgen muss oder nicht. <a href="/en-US/docs/CORS_Enabled_Image">CORS-fähige Bilder</a> können im Element {{HTMLElement("canvas")}} wiederverwendet werden, ohne verunreinigt zu werden. Die zulässigen Werte sind:
+ <dl>
+  <dt>anonymous</dt>
+  <dd>
+  <p>Es wird eine ursprungsübergreifende Anforderung (z.B. mit <code>Origin:</code> HTTP-Header) durchgeführt. Es werden jedoch keine Anmeldeinformationen gesendet (d.h. es wird kein Cookie, kein X.509-Zertifikat und keine HTTP Basic-Authentifizierung gesendet). Wenn der Server der Ursprungsseite keine Anmeldeinformationen übergibt (indem er den <code>Access-Control-Allow-Origin:</code> HTTP-Header nicht setzt), wird das Bild verfälscht und seine Verwendung eingeschränkt.</p>
+  </dd>
+  <dt>use-credentials</dt>
+  <dd>Eine ursprungsübergreifende Anforderung (z.B. mit <code>Origin:</code> HTTP-Header) wird mit Anmeldeinformationen ausgeführt (d.h. es wird ein Cookie, ein Zertifikat und eine HTTP-Basic-Authentifizierung durchgeführt). Wenn der Server der Ursprungsseite keine Anmeldeinformationen gibt (über <code>Access-Control-Allow-Credentials:</code> HTTP-Header), wird das Bild verfälscht und seine Verwendung eingeschränkt.</dd>
+ </dl>
+ Wenn nicht vorhanden, wird die Ressource ohne CORS-Anfrage geholt (d.h. ohne den <code>Origin:</code> HTTP-Header zu senden), wodurch verhindert wird, dass sie in {{HTMLElement('canvas')}}} Elementen verwendet wird. Wenn ungültig, wird es so behandelt, als ob das aufgezählte Schlüsselwort <strong>anonymous</strong> verwendet wurde. Weitere Informationen finden Sie unter Attribute der <a href="/en-US/docs/Web/HTML/CORS_settings_attributes">CORS-Einstellungen</a>.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("disabled")}} {{Non-standard_inline}}</dt>
+ <dd>Dieses Attribut wird verwendet, um eine Linkbeziehung zu deaktivieren. In Verbindung mit Scripting kann dieses Attribut verwendet werden, um verschiedene Style-Sheet-Beziehungen ein- und auszuschalten.
+ <div class="note">
+ <p><strong>Hinweis</strong>: Während es im HTML-Standard kein <code>disabled</code> Attribut hat, <strong>gibt</strong> es im DOM-Objekt des <code>HTMLLinkElement</code> ein <code>disabled</code> Attribut.</p>
+
+ <p>Die Verwendung von <code>disabled</code> als HTML-Attribut ist nicht standardisiert und wird nur von einigen Browsern verwendet (<a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=27677">W3 #27677</a>). <strong>Verwenden Sie es nicht.</strong> Um einen ähnlichen Effekt zu erzielen, verwenden Sie eine der folgenden Techniken:</p>
+
+ <p>Wenn das Attribut <code>disabled</code> direkt zu dem Element auf der Seite hinzugefügt wurde, darf stattdessen nicht das Element {{HTMLElement("link")}}} aufgenommen werden;<br>
+  Setzt die <code>disabled</code> <strong>Eigenschaft</strong> des <code>StyleSheet</code> DOM Objekts über Skripting.</p>
+
+ <p> </p>
+ </div>
+ </dd>
+</dl>
+
+<p><strong>{{htmlattrdef("href")}}</strong></p>
+
+<p>Dieses Attribut gibt die URL der verlinkten Ressource an. Eine URL kann absolut oder relativ sein.</p>
+
+<dl>
+ <dt>{{htmlattrdef("hreflang")}}</dt>
+ <dd>Dieses Attribut gibt die Sprache der verlinkten Ressource an. Es ist rein beratend. Erlaubte Werte werden von <a href="http://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a> für HTML5 und von <a href="http://www.ietf.org/rfc/rfc1766.txt">RFC1766</a> für HTML 4 bestimmt, verwenden Sie dieses Attribut nur, wenn das Attribut {{htmlattrxref("href", "a")}}} vorhanden ist.</dd>
+ <dt>{{htmlattrdef("media")}}</dt>
+ <dd>Dieses Attribut gibt das Medium an, für das die verknüpfte Ressource gilt. Sein Wert muss eine <a href="/de/docs/Web/CSS/Media_Queries/Using_media_queries">Medienanfrage</a> sein. Dieses Attribut ist vor allem bei der Verknüpfung mit externen Stylesheets nützlich, da es dem Benutzeragenten ermöglicht, das am besten geeignete für das Gerät auszuwählen, auf dem es läuft.
+ <div class="note"><strong>Verwendungshinweis</strong><strong>: </strong>
+ <ul>
+  <li>In HTML 4 kann dies nur eine einfache, durch Leerzeichen getrennte Liste von Mediendaten sein, d.h. <a href="/de/docs/Web/CSS/@media">Medientypen und -gruppen</a>, die als Werte für dieses Attribut definiert und erlaubt sind, wie z.B. <code>print</code>, <code>screen</code>, <code>aural</code>, <code>braille</code>. HTML5 erweiterte dies auf jede Art von <a href="/de/docs/Web/CSS/Media_Queries/Using_media_queries">Medienabfragen</a>, die eine Obermenge der zulässigen Werte von HTML 4 darstellen.</li>
+  <li>Browser, die die <a href="/de/docs/Web/CSS/Media_Queries/Using_media_queries">CSS3-Medienabfragen</a> nicht unterstützen, erkennen nicht unbedingt den passenden Link; vergessen Sie nicht, Fallback-Links zu setzen, den in HTML 4 definierten eingeschränkten Satz von Medienabfragen.</li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("methods")}} {{Non-standard_inline}}</dt>
+ <dd>Der Wert dieses Attributs gibt Auskunft über die Funktionen, die an einem Objekt ausgeführt werden können. Die Werte werden im Allgemeinen vom HTTP-Protokoll bei der Verwendung angegeben, aber es könnte (aus ähnlichen Gründen wie beim <strong>Titelattribut</strong>) sinnvoll sein, Beratungsinformationen im Voraus in den Link aufzunehmen. So kann beispielsweise der Browser eine andere Darstellung eines Links in Abhängigkeit von den angegebenen Methoden wählen; etwas, das durchsuchbar ist, kann ein anderes Symbol erhalten, oder ein externer Link kann mit dem Hinweis auf das Verlassen der aktuellen Website dargestellt werden. Dieses Attribut wird weder gut verstanden noch unterstützt, auch nicht vom definierenden Browser, dem Internet Explorer 4. Siehe <a href="http://msdn.microsoft.com/en-us/library/ms534168%28VS.85%29.aspx">Methodeneigenschaften (MSDN)</a>.</dd>
+ <dt>{{htmlattrdef("rel")}}</dt>
+ <dd>Dieses Attribut bezeichnet eine Beziehung des verknüpften Dokuments zum aktuellen Dokument. Das Attribut muss eine durch Leerzeichen getrennte Liste der <a href="/en-US/docs/Web/HTML/Link_types">Werte der Link-Typen</a> sein. Die häufigste Verwendung dieses Attributs ist die Angabe eines Links zu einem externen Stylesheet: Das <strong>rel</strong>-Attribut ist auf <code>stylesheet</code> gesetzt, und das <strong>href</strong>-Attribut ist auf die URL eines externen Stylesheets gesetzt, um die Seite zu formatieren. WebTV unterstützt auch die Verwendung des Wertes <code>next</code> für <strong>rel</strong>, um die nächste Seite in einer Dokumentserie vorzuladen.</dd>
+ <dt>{{htmlattrdef("rev")}}{{obsolete_inline}}</dt>
+ <dd>The value of this attribute shows the relationship of the current document to the linked document, as defined by the {{htmlattrxref("href", "link")}} attribute. The attribute thus defines the reverse relationship compared to the value of the <strong>rel</strong> attribute. <a href="/en-US/docs/Web/HTML/Link_types">Link types values</a> for the attribute are similar to the possible values for {{htmlattrxref("rel", "link")}}.
+ <div class="note"><strong>Usage note: </strong>This attribute is obsolete in HTML5. <strong>Do not use it</strong>. To achieve its effect, use the {{htmlattrxref("rel", "link")}} attribute with the opposite <a href="/en-US/docs/Web/HTML/Link_types">link types values</a>, e.g. <span style="font-family: courier new;">made</span> should be replaced by <span style="font-family: courier new;">author</span>. Also this attribute doesn't mean <em>revision</em> and must not be used with a version number, which is unfortunately the case on numerous sites.</div>
+ </dd>
+ <dt>{{htmlattrdef("sizes")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>This attribute defines the sizes of the icons for visual media contained in the resource. It must be present only if the {{htmlattrxref("rel","link")}} contains the <span style="font-family: courier new;">icon</span> <a href="/en-US/docs/Web/HTML/Link_types">link types value</a>. It may have the following values:
+ <ul>
+  <li><code>any</code>, meaning that the icon can be scaled to any size as it is in a vectorial format, like <code>image/svg+xml</code>.</li>
+  <li>a white-space separated list of sizes, each in the format <span style="font-family: courier new;"><em>&lt;width in pixels&gt;</em>x<em>&lt;height in pixels&gt;</em></span> or <span style="font-family: courier new;"><em>&lt;width in pixels&gt;</em>X<em>&lt;height in pixels&gt;</em></span>. Each of these sizes must be contained in the resource.</li>
+ </ul>
+
+ <div class="note"><strong>Usage note: </strong>
+
+ <ul>
+  <li>Most icon format are only able to store one single icon; therefore most of the time the {{htmlattrxref("sizes")}} contains only one entry. Among the major browsers, only the Apple's ICNS format allows the storage of multiple icons, and this format is only supported in WebKit.</li>
+  <li>Apple's iOS does not support this attribute, hence Apple's iPhone and iPad use special, non-standard <a href="/en-US/docs/Web/HTML/Link_types">link types values</a> to define icon to be used as Web Clip or start-up placeholder: <span style="font-family: courier new;">apple-touch-icon</span> and <span style="font-family: courier new;">apple-touch-startup-icon</span>.</li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("target")}}{{Non-standard_inline}}</dt>
+ <dd>Defines the frame or window name that has the defined linking relationship or that will show the rendering of any linked resource.</dd>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>This attribute is used to define the type of the content linked to. The value of the attribute should be a MIME type such as <strong>text/html</strong>, <strong>text/css</strong>, and so on. The common use of this attribute is to define the type of style sheet linked and the most common current value is <strong>text/css</strong>, which indicates a Cascading Style Sheet format.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Including_a_stylesheet">Including a stylesheet</h3>
+
+<p>To include a stylesheet in a page, use the following syntax:</p>
+
+<pre class="brush: html">&lt;link href="style.css" rel="stylesheet"&gt;
+</pre>
+
+<h3 id="Providing_alternative_stylesheets">Providing alternative stylesheets</h3>
+
+<p>You can also specify <a href="/en-US/docs/Web/CSS/Alternative_style_sheets">alternative style sheets</a>.</p>
+
+<p>The user can choose which style sheet to use by choosing it from the View&gt;Page Style menu. This provides a way for users to see multiple versions of a page.</p>
+
+<pre class="brush: html">&lt;link href="default.css" rel="stylesheet" title="Default Style"&gt;
+&lt;link href="fancy.css" rel="alternate stylesheet" title="Fancy"&gt;
+&lt;link href="basic.css" rel="alternate stylesheet" title="Basic"&gt;
+</pre>
+
+<h3 id="Stylesheet_load_events">Stylesheet load events</h3>
+
+<p>You can determine when a style sheet has been loaded by watching for a <code>load</code> event to fire on it; similarly, you can detect if an error has occurred while processing a style sheet by watching for an <code>error</code> event:</p>
+
+<pre class="brush: html">&lt;script&gt;
+function sheetLoaded() {
+  // Do something interesting; the sheet has been loaded
+}
+
+function sheetError() {
+  alert("An error occurred loading the stylesheet!");
+}
+&lt;/script&gt;
+
+&lt;link rel="stylesheet" href="mystylesheet.css" onload="sheetLoaded()" onerror="sheetError()"&gt;
+</pre>
+
+<div class="note"><strong>Note:</strong> The <code>load</code> event fires once the stylesheet and all of its imported content has been loaded and parsed, and immediately before the styles start being applied to the content.</div>
+
+<h2 id="Notes">Notes</h2>
+
+<ul>
+ <li>A <code>&lt;link&gt;</code> tag can occur only in the head element; however, there can be multiple occurrences of <code>&lt;link&gt;</code>.</li>
+ <li>HTML 3.2 defines only the <strong>href</strong>, <strong>rel</strong>, <strong>rev</strong>, and <strong>title</strong> attributes for the link element.</li>
+ <li>HTML 2 defines the <strong>href</strong>, <strong>methods</strong>, <strong>rel</strong>, <strong>rev</strong>, <strong>title</strong>, and <strong>urn</strong> attributes for the <code>&lt;link&gt;</code> element. The <strong>methods</strong> and <strong>urn</strong> attributes were later removed from the specifications.</li>
+ <li>The HTML and XHTML specifications define event handlers for the <code>&lt;link&gt;</code> element, but it is unclear how they would be used.</li>
+ <li>Under XHTML 1.0, empty elements such as <code>&lt;link&gt;</code> require a trailing slash: <code>&lt;link /&gt;</code>.</li>
+</ul>
+
+<h2 id="Specifications" name="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-link-element', '&lt;link&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-link-element', '&lt;link&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.3', '&lt;link&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Alternative stylesheets</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>disabled</code> attribute {{Non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>methods</code> attribute {{Non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>4.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>sizes</code> attribute</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}} {{bug("441770")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>load</code> and <code>error</code> events</td>
+   <td>
+    <p>19 (Webkit: 535.23)</p>
+
+    <p>({{webkitbug(38995)}})</p>
+   </td>
+   <td>{{CompatGeckoDesktop("9.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>11.60</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>crossorigin</code> attribute</td>
+   <td>{{CompatChrome("25")}}</td>
+   <td>{{CompatGeckoDesktop("18.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera("15")}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Alternative stylesheets</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>disabled</code> attribute {{Non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>methods</code> attribute {{Non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>4.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>sizes</code> attribute</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}} {{bug("441770")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>load</code> and <code>error</code> events</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("9.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>crossorigin</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("18.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="http://pieisgood.org/test/script-link-events/">Ryan Grove's &lt;script&gt; and &lt;link&gt; node event compatibility chart</a></li>
+</ul>
+
+<p id=".7B.7BHTMLRef.7D.7D">{{HTMLRef}}</p>
diff --git a/files/de/web/html/element/main/index.html b/files/de/web/html/element/main/index.html
new file mode 100644
index 0000000000..eb330b2279
--- /dev/null
+++ b/files/de/web/html/element/main/index.html
@@ -0,0 +1,175 @@
+---
+title: <main>
+slug: Web/HTML/Element/main
+tags:
+  - Element
+  - HTML
+  - HTML Gruppierender Inhalt
+  - Referenz
+translation_of: Web/HTML/Element/main
+---
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Das <em>HTML Main Element</em> (<strong>&lt;main&gt;</strong>)<strong> </strong>kann als ein Container für den leitenden Inhalt benutzt werden. Der Hauptteil besteht aus Inhalt, der direkt bezogen oder auf das zentrale Thema eines Bereichs oder der zentralen Funktionalität einer Applikation aufbaut. Der Inhalt sollte zum Dokument einzigartig sein, ausgenommen jeglicher Inhalt, welcher auf dem gesamten Dokument wiederholt ist wie zum Beispiel Seitenleisten, Navigationlinks, Information über das Urheberrecht, Seitenlogos, und Sucheingaben (augenommen, wenn die Hauptfunktion eine Sucheingabe ist). Anders als {{HTMLElement("article")}} und {{HTMLElement("section")}}, trägt dieses Element dem Entwurf des Dokuments nicht bei.</p>
+
+<div class="note"><strong>Hinweis:</strong>
+
+<ul>
+ <li><code>&lt;main&gt;</code> <strong>darf kein</strong> Nachfolger eines {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}} oder {{HTMLElement("nav")}} Elements sein.</li>
+ <li><strong>Nur ein</strong> <a href="http://www.w3.org/TR/html51/semantics.html#the-main-element">main</a> Element kann pro Dokument verwendet werden.</li>
+</ul>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Inhalt Kategorien</a></th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">Fließender Inhalt</a>, fühlbarer Inhalt.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubter Inhalt</th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">Fließender Inhalt</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag-Wegfall</th>
+   <td>Keine; Sowohl Anfangs- als auch End-Tag sind erforderlich.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte Elternelemente</th>
+   <td>Alle Elemente, die <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">fließenden Inhalt</a> akzeptieren.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM-Schnittstelle</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p><span style="line-height: 21px;">Das Element enthält ausschließlich <a href="/de/docs/Web/HTML/Globale_Attribute">globale Attribute</a></span><span style="line-height: 21px;">.</span></p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: html">&lt;!-- Anderer Inhalt --&gt;
+
+&lt;main&gt;
+  &lt;h1&gt;Äpfel&lt;/h1&gt;
+  &lt;p&gt;Der Apfel ist das Kernobst des Apfelbaumes.&lt;/p&gt;
+
+  &lt;article&gt;
+    &lt;h2&gt;Rote Köstlichkeiten&lt;/h2&gt;
+    &lt;p&gt;Diese hervorragenden roten Äpfel sind die verbreitetsten
+    wie man sie in Supermärkten finden kann.&lt;/p&gt;
+    &lt;p&gt;... &lt;/p&gt;
+    &lt;p&gt;... &lt;/p&gt;
+  &lt;/article&gt;
+
+  &lt;article&gt;
+    &lt;h2&gt;Großmütterchen&lt;/h2&gt;
+    &lt;p&gt;Diese saftigen grünen Äpfel sind eine großartige Füllung
+    für meine Apfelkuchen.&lt;/p&gt;
+    &lt;p&gt;... &lt;/p&gt;
+    &lt;p&gt;... &lt;/p&gt;
+  &lt;/article&gt;
+
+&lt;/main&gt;
+
+&lt;!-- Anderer Inhalt --&gt;</pre>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#the-main-element', '&lt;main&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Die Einschränkung der Nichtnutzung von <code>&lt;main&gt;</code> als ein Nachfahre eines {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, oder {{HTMLElement("nav")}} Elements wurde aufgehoben.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'grouping-content.html#the-main-element', '&lt;main&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Keine Änderung von {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-main-element', '&lt;main&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Ursprüngliche Definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser-Kompatibilität</h2>
+
+<p>Das <code>&lt;main&gt;</code> Element wird flächendeckend unterstützt (ausgenommen für Internet Explorer). Es wird vorgeschlagen, bis das &lt;main&gt; Element von Internet Explorer unterstützt wird, <code>das</code> <code>"main"</code> ARIA role dem <code>&lt;main&gt;</code> Element hinzufügen:</p>
+
+<pre class="brush: html">&lt;main role="main"&gt;
+  ...
+&lt;/main&gt;
+</pre>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funktion</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basis Unterstützung</td>
+   <td>Chrome 26</td>
+   <td>{{ CompatGeckoDesktop("21.0") }}</td>
+   <td>{{CompatNo()}}</td>
+   <td>Opera 16</td>
+   <td>Safari 7</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funktion</th>
+   <th>Android</th>
+   <th>Firefox Mobil (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobil</th>
+   <th>Safari Mobil</th>
+  </tr>
+  <tr>
+   <td>Basis Unterstützung</td>
+   <td>{{CompatNo()}}</td>
+   <td>{{ CompatGeckoMobile("21.0") }}</td>
+   <td>{{CompatNo()}}</td>
+   <td>{{CompatNo()}}</td>
+   <td>{{CompatNo()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Basis Strukturelemente: {{HTMLElement("html")}}, {{HTMLElement("head")}}, {{HTMLElement("body")}}</li>
+ <li>Sektionzugehörige Elemente: {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, oder {{HTMLElement("nav")}}</li>
+</ul>
+
+<p> </p>
diff --git a/files/de/web/html/element/map/index.html b/files/de/web/html/element/map/index.html
new file mode 100644
index 0000000000..a15d594470
--- /dev/null
+++ b/files/de/web/html/element/map/index.html
@@ -0,0 +1,116 @@
+---
+title: <map>
+slug: Web/HTML/Element/map
+tags:
+  - Element
+  - HTML
+  - HTML eingebetteter Inhalt
+  - Multimedia
+  - Referenz
+  - Web
+translation_of: Web/HTML/Element/map
+---
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Das <strong>HTML-Element </strong><strong><code>&lt;map&gt;</code></strong> wird zusammen mit {{HTMLElement("area")}} benutzt um ein Image Map zu definieren (eine klickbare Fläche).</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Kategorien für den Inhalt</th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, palpable content.</td>
+  </tr>
+  <tr>
+   <th scope="row">Eralubter Inhalt</th>
+   <td>Any <a href="/en-US/docs/HTML/Content_categories#Transparent_content_model" title="https://developer.mozilla.org/en/HTML/Content_categories#Transparent_content_model">transparent</a> element.</td>
+  </tr>
+  <tr>
+   <th scope="row">Auslassung von Tags</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte elterliche Elemente</th>
+   <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM-Schnittstelle</th>
+   <td>{{domxref("HTMLMapElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p><span style="line-height: 21px;">Dieses Element verwendet die </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globalen Attribute</a><span style="line-height: 21px;">.</span></p>
+
+<dl>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>Das Attribut "name" gibt der Map einen Namen, damit sie referenziert werden kann. Das Attribut muss vorhanden sein und muss einen Wert beinhalten, der nicht null ist und keine Leerzeichen beinhaltet. Der Wert des "name"-Attributs darf nicht mit dem "name"-Attribut eines anderen Map-Elements im selben Dokument übereinstimmen, ungeachtet der Groß-/Kleinschreibung. Falls das "id"-Attribut verwendet wird, müssen beide Attribute den selben Wert haben.</dd>
+</dl>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: html">&lt;map&gt;
+  &lt;area shape="circle" coords="200,250,25" href="another.htm" /&gt;
+  &lt;area shape="default" /&gt;
+&lt;/map&gt;
+</pre>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'the-map-element.html#the-map-element', '&lt;map&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-map-element', '&lt;map&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.6.1', '&lt;map&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("html.elements.map")}}</p>
+
+<h3 id="Notizen_zu_Gecko">Notizen zu Gecko</h3>
+
+<p>[1] Startend mit Gecko 5.0 {{geckoRelease("5.0")}}, wurden leere Karten nicht länger übersprungen zugunsten für nicht-leere Karten, als diese im eigenen Modus passten. Zum Beispiel im folgenden HTML-Dokument:</p>
+
+<pre class="brush: html">&lt;map name="a"&gt;&lt;/map&gt;
+&lt;map name="a"&gt;
+  &lt;area shape="rect" coords="25,25,75,75" href="#fail"&gt;
+&lt;/map&gt;
+&lt;img usemap="#a" src="image.png"&gt;
+</pre>
+
+<p>Vor Gecko 5.0 musste das {{HTMLElement("img")}}-Element zur zweiten, nicht-leeren Karte, passen. Nun passt es auch zum Ersten, auch wenn die Karte leer ist.</p>
+
+<p>[2] Von Firefox 17 ist das Standard-Aussehen des <code>&lt;map&gt;</code> HTML-Elementes  <code>display: inline;</code> und nicht mehr <code>display: block;</code>.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{HTMLElement("a")}}</li>
+ <li>{{HTMLElement("area")}}</li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/de/web/html/element/marquee/index.html b/files/de/web/html/element/marquee/index.html
new file mode 100644
index 0000000000..4c8150bf43
--- /dev/null
+++ b/files/de/web/html/element/marquee/index.html
@@ -0,0 +1,216 @@
+---
+title: <marquee>
+slug: Web/HTML/Element/marquee
+tags:
+  - Element
+  - HTML
+  - Referenz
+  - Veraltet
+  - Web
+  - marquee
+translation_of: Web/HTML/Element/marquee
+---
+<div>{{HTMLRef}}</div>
+
+<div>{{obsolete_header}}</div>
+
+<p>Das HTML Element &lt;marquee&gt; wird dazu benutzt um ein scrollendes Textfeld einzufügen. Sie können mithilfe der Attribute kontrollieren, was passiert, wenn der Text das Ende des Textfeldes erreicht. </p>
+
+<div class="warning">
+<p>Das <code>&lt;marquee&gt;</code> Element ist <strong>veraltet</strong> und muss bzw. soll nicht mehr verwendet werden. Obwohl manche Browser es immernoch unterstützen, ist es nicht erforderlich. Es wird davon abgeraten, dieses Tag zu benutzen, da es das schlimmste ist, was Sie ihren Besuchern antun können.</p>
+</div>
+
+<h2 id="Attribute">Attribute</h2>
+
+<dl>
+ <dt>{{htmlattrdef("behavior")}}</dt>
+ <dd>Bestimmt, wie sich der Text innerhalb des marquee-tags bewegt. Mögliche Optionen send "scroll", "slide" und "alternate". Der Standardwert ist "scroll" und wird automatisch benutzt, falls kein Wert definiert wird.</dd>
+ <dt>{{htmlattrdef("bgcolor")}}</dt>
+ <dd>Bestimmt die Hintergrundfarbe mittels einer der Standardfarben, dem RGB- bzw. dem Hexadezimalwert.</dd>
+ <dt>{{htmlattrdef("direction")}}</dt>
+ <dd>Legt die Bewegungsrichtung innerhalb des marquee-tags fest. Mögliche Optionen sind "left", "right", "up" und "down". Der Standardwert ist "left" und wird automatisch benutzt, falls kein Wert definiert wird.</dd>
+ <dt>{{htmlattrdef("height")}}</dt>
+ <dd>Definiert die Höhe in Pixel- oder Prozentwerten.</dd>
+ <dt>{{htmlattrdef("hspace")}}</dt>
+ <dd>Definiert den horizontalen Außenabstand.</dd>
+ <dt>{{htmlattrdef("loop")}}</dt>
+ <dd>Definiert, wie oft die Aktion (scroll, slide, alternate) ausgeführt wird. Der Standardwert ist -1, was bedeutet, dass der Inhalt des Marquee-tags in Dauerschleife dargestellt wird.</dd>
+ <dt>{{htmlattrdef("scrollamount")}}</dt>
+ <dd>Definiert den Wert eines Intervalls in Pixel. Der Standardwert beträgt 6.</dd>
+ <dt>{{htmlattrdef("scrolldelay")}}</dt>
+ <dd>Definiert den Intervall zwischen jeder Bewegung in Millisekunden. Der Standardwert ist 85. <strong>Merke:</strong>  Jeder Wert, der kleiner als 60 ist, wird ignoriert und der Wert 60 wird stattdessen verwendet, außer "truespeed" ist definiert.</dd>
+ <dt>{{htmlattrdef("truespeed")}}</dt>
+ <dd>Standardmäßig werden scrolldelays, die kleiner als 60 sind ignoriert. Wenn "truespeed" verwendet wird, ist dies jedoch nicht der Fall.</dd>
+ <dt>{{htmlattrdef("vspace")}}</dt>
+ <dd>Definiert den vertikalen Außenabstand in Pixel- oder Prozentwerten.</dd>
+ <dt>{{htmlattrdef("width")}}</dt>
+ <dd>Definiert die Breite in Pixel- oder Prozentwerten.</dd>
+</dl>
+
+<h2 id="Event_handlers" name="Event_handlers">Event-Handler</h2>
+
+<dl>
+ <dt>{{htmlattrdef("onbounce")}}</dt>
+ <dd>Startet, wenn der Text das Ende des zuvor definierten Marquee-tags erreicht hat. Diese Option ist jedoch nur verfügbar, wenn das Attribut "alternate" als "behavior" verwendet wird.</dd>
+ <dt>{{htmlattrdef("onfinish")}}</dt>
+ <dd>Startet, wenn das Attribut "loop" abgeschlossen ist. Diese Option ist jedoch nur verfügbar, wenn für das Attribut "loop" ein größerer Wert als 0 gewählt wurde.</dd>
+ <dt>{{htmlattrdef("onstart")}}</dt>
+ <dd>Startet gleichzeitig mit dem Marquee-tag.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Methoden</h2>
+
+<dl>
+ <dt>start</dt>
+ <dd>Startet das Marquee-tag.</dd>
+ <dt>stop</dt>
+ <dd>Stoppt das Marquee-tag.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: html">&lt;marquee&gt;Dieser Text bewegt sich von rechts nach links&lt;/marquee&gt;
+
+&lt;marquee direction="up"&gt;Dieser Text bewegt sich von unten nach oben&lt;/marquee&gt;
+
+&lt;marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid"&gt;
+  &lt;marquee behavior="alternate"&gt;
+    Dieser Text prallt am Rand ab.
+  &lt;/marquee&gt;
+&lt;/marquee&gt;</pre>
+
+<p>{{EmbedLiveSample("Examples", 600, 450)}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Erklärung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'obsolete.html#the-marquee-element-2', '&lt;marquee&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>
+    <p>Wird veraltet zugunsten von CSS dargestellt, jedoch muss die erwartete "behavior" für die umgekehrte Kompatibilität festgelegt werden.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'obsolete.html#the-marquee-element-0', '&lt;marquee&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Wird veraltet zugunsten von CSS dargestellt, jedoch muss die erwartete "behavior" für die umgekehrte Kompatibilität festgelegt werden.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibiltät">Browser Kompatibiltät</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>2.0</td>
+   <td>7.2</td>
+   <td>1.2</td>
+  </tr>
+  <tr>
+   <td><code>truespeed</code> attribute</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>4.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>hspace/vspace</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>loop</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>truespeed</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>hspace/vspace</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>loop</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/de/web/html/element/nav/index.html b/files/de/web/html/element/nav/index.html
new file mode 100644
index 0000000000..b3c2f32231
--- /dev/null
+++ b/files/de/web/html/element/nav/index.html
@@ -0,0 +1,106 @@
+---
+title: nav
+slug: Web/HTML/Element/nav
+tags:
+  - Element
+  - HTML
+  - HTML Sektionen
+  - Referenz
+  - Web
+translation_of: Web/HTML/Element/nav
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">Das <strong>HTML Element <code>&lt;nav&gt;</code></strong> zeichent einen Seitenbereich aus, der dazu bestimmt ist Navigationslinks bereitzustellen, die entweder zum aktuellen Dokument oder zu anderen Dokumenten zeigen. Häufige Beispiele für Navigationsbereiche sind Menüs, Inhaltsverzeichnisse oder andere Verzeichnisse.</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/de/docs/Web/Guide/HTML/Inhaltskategorien">Inhaltskategorien</a></th>
+   <td><a href="/de/docs/Web/Guide/HTML/Inhaltskategorien#Fließender_Inhalt">Fließender Inhalt</a>, <a href="/de/docs/Web/Guide/HTML/Inhaltskategorien#Unterteilender_Inhalt">Unterteilender Inhalt</a>, <a href="/de/docs/Web/Guide/HTML/Inhaltskategorien#Fühlbarer_Inhalt">Fühlbarer Inhalt</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubter Inhalt</th>
+   <td><a href="/de/docs/Web/Guide/HTML/Inhaltskategorien#Fließender_Inhalt">Fließender Inhalt</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag Wegfall</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte Elternelemente</th>
+   <td>Alle Elemente die <a href="/de/docs/Web/Guide/HTML/Inhaltskategorien#Fließender_Inhalt">fließenden Inhalt</a> akzeptieren.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte ARIA-Rollen</th>
+   <td>Keine</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p>Dieses Element besitzt nur die <a href="/de/docs/Web/HTML/Globale_Attribute">globalen Attribute</a>.</p>
+
+<h2 id="Verwendungshinweise">Verwendungshinweise</h2>
+
+<ul>
+ <li>Es ist nicht nötig, dass alle Links in einen <code>&lt;nav&gt;</code> Element enthalten sind. Die Benutzung von <code>&lt;nav&gt;</code> ist nur für wichtige Abschnitte von Navigationslinks beabsichtigt; normalerweise enthält das {{HTMLElement("footer")}} Element eine Liste von Links, welche nicht in einem {{HTMLElement("nav")}} Element beinhaltet sein müssen.</li>
+ <li>Ein Dokument darf mehrere {{HTMLElement("nav")}} Elemente enthalten, zum Beispiel, eins für die Seitennavigation und eins für seiteninterne Navigation. <code><a href="/de/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code> kann benutzt werden um Barrierefreiheit zu fördern (siehe <a href="/en-US/docs/Web/HTML/Element/Heading_Elements#Labeling_section_content">Beispiel</a>).</li>
+ <li>User-Agents, wie Bildschirmleser zur Unterstützung von Menschen mit Behinderung, können dieses Element benutzen, um zu entscheiden, ob das anfängliche Rendering von Navigationsinhalt ausgelassen werden kann.</li>
+</ul>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>In diesem Beispiel wird das <code>&lt;nav&gt;</code> Element benutzt, um eine ungeordnete Liste ({{HTMLElement("ul")}}) von Links. Mit entsprechenden CSS kann dies als Seitenleiste, Navigationsleiste oder Drop-Down-Menü verwendet werden.</p>
+
+<pre class="brush: html">&lt;nav class="menu"&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;a href="#"&gt;Startseite&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="#"&gt;Über&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="#"&gt;Kontakt&lt;/a&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/nav&gt;
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'sections.html#the-nav-element', '&lt;nav&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Keine Änderung seit dem letzten W3C Schnapschuss.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-nav-element', '&lt;nav&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Anfängliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+
+
+<p>{{Compat("html.elements.nav")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Other section-related elements: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li>
+ <li class="last"><a class="deki-ns current" href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sections and outlines of an HTML5 document</a>.</li>
+ <li class="last"><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Navigation_Role">ARIA: Navigation role</a></li>
+</ul>
diff --git a/files/de/web/html/element/noembed/index.html b/files/de/web/html/element/noembed/index.html
new file mode 100644
index 0000000000..b0b13f7bb0
--- /dev/null
+++ b/files/de/web/html/element/noembed/index.html
@@ -0,0 +1,41 @@
+---
+title: '<noembed>: Das Embed Fallback Element (veraltet)'
+slug: Web/HTML/Element/noembed
+tags:
+  - Element
+  - Embedded content
+  - Reference
+  - Veraltet
+  - noembed
+translation_of: Web/HTML/Element/noembed
+---
+<div>{{HTMLRef}}{{Non-standard_header}}{{obsolete_header}}</div>
+
+<p><span class="seoSummary">Das <code><strong>&lt;noembed&gt;</strong></code>-Element ist eine veraltete, nicht standardisierte Möglichkeit, alternativen oder "Fallback"-Inhalt für Browser bereitzustellen, die das Element {{HTMLElement("embed")}} oder den Typ des <a href="/de/docs/Web/Guide/HTML/Content_categories#Embedded_content">eingebetteten Inhalts</a> nicht unterstützen den ein Autor verwenden möchte.</span> Dieses Element wurde in HTML 4.01 und höher als veraltet gekennzeichnet, um stattdessen den Fallback-Inhalt zwischen den öffnenden und schließenden Tags eines {{HTMLElement("object")}}-Elements zu platzieren.</p>
+
+<div class="note">
+<p>Hinweis: Während dieses Element derzeit noch in vielen Browsern funktioniert, ist es veraltet und sollte nicht verwendet werden. Verwenden Sie stattdessen {{HTMLElement("object")}} mit Fallback-Inhalt zwischen den öffnenden und schließenden Tags des Elements.</p>
+</div>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#noembed', '&lt;noembed&gt;')}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>Non-conforming feature.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("html.elements.noembed")}}</p>
diff --git a/files/de/web/html/element/noscript/index.html b/files/de/web/html/element/noscript/index.html
new file mode 100644
index 0000000000..552fdbafed
--- /dev/null
+++ b/files/de/web/html/element/noscript/index.html
@@ -0,0 +1,103 @@
+---
+title: <noscript>
+slug: Web/HTML/Element/noscript
+tags:
+  - Element
+  - HTML
+  - HTML scripting
+  - Referenz
+  - Web
+translation_of: Web/HTML/Element/noscript
+---
+<div>{{HTMLRef}}</div>
+
+<p>Das <strong>HTML Element <code>&lt;noscript&gt;</code> </strong>definiert einen HTML Abschnitt, der eingefügt werden soll, wenn ein Skripttyp auf der Seite nicht unterstützt wird oder wenn Skripting nicht aktiviert ist.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/de/docs/HTML/Content_categories" title="HTML/Content_categories">lnhaltskategorien</a></th>
+   <td><a href="/de/docs/HTML/Content_categories#Metadata_content" title="HTML/Content_categories#Metadata_content">Metadaten</a>, <a href="/de/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">flow content</a>, <a href="/de/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubter Inhalt</th>
+   <td>Wenn skripten deaktiviert ist und es ein Element im {{HTMLElement("head")}} Element ist: ohne bestimmte Reihenfolge, mehrere oder kein {{HTMLElement("link")}} Elemente, kein oder mehrere {{HTMLElement("style")}} Elemente, und kein oder mehrere {{HTMLElement("meta")}} Elemente.<br>
+    Wenn skripten deaktiviert ist und es kein Element im {{HTMLElement("head")}} Element ist: jedes nicht-darstellbare Element, aber kein <code>&lt;noscript&gt;</code> Element darf unter den Unterelementen sein.<br>
+    Sonst: flow content oder phrasing content.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tageinschränkungen</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte Überelemente</th>
+   <td>Jedes Element, welches <a href="/de/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a> erlaubt, wenn es kein <code>&lt;noscript&gt;</code> Element ist, oder in einem {{HTMLElement("head")}} Element (ausser für ein HTML Dokument), hier auch: nur, wenn es kein <code>&lt;noscript&gt;</code> Element ist.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte ARIA Rollen</th>
+   <td>Keine</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM Schnittstelle</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p><span style="line-height: 21px;">Dieses Element inkludiert </span><a href="/de/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globale Attribute</a><span style="line-height: 21px;">.</span></p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: html">&lt;noscript&gt;
+  &lt;!-- Anker Link zu einer externe Datei --&gt;
+  &lt;a href="http://www.mozilla.com/"&gt;Externer Link&lt;/a&gt;
+&lt;/noscript&gt;
+&lt;p&gt;Rockt!&lt;/p&gt;
+</pre>
+
+<h3 id="Resultat_wenn_skripten_aktiviert_ist">Resultat wenn skripten aktiviert ist</h3>
+
+<p>Rockt!</p>
+
+<h3 id="Resultat_wenn_skripten_deaktiviert_ist">Resultat wenn skripten deaktiviert ist</h3>
+
+<p><a class="external" href="http://www.mozilla.com/">Externer Link</a></p>
+
+<p>Rockt!</p>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'scripting-1.html#the-noscript-element', '&lt;noscript&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'the-noscript-element.html#the-noscript-element', '&lt;noscript&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'scripts.html#h-18.3.1', '&lt;noscript&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("html.elements.noscript")}}</p>
diff --git a/files/de/web/html/element/object/index.html b/files/de/web/html/element/object/index.html
new file mode 100644
index 0000000000..ebab466113
--- /dev/null
+++ b/files/de/web/html/element/object/index.html
@@ -0,0 +1,176 @@
+---
+title: <object>
+slug: Web/HTML/Element/object
+tags:
+  - Element
+  - HTML
+  - HTML eingebetteter Inhalt
+  - Referenz
+  - Web
+translation_of: Web/HTML/Element/object
+---
+<h2 id="Summary">Summary</h2>
+
+<p>Das <strong>HTML <code>&lt;object&gt;</code> Element</strong> (oder auch <em>HTML Embedded Object Element</em>) repräsentiert eine externe Resource die entweder als Bild, eingebetteter Browser Context oder eine Resource die von einem Plugin geöffnet wird.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>; <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>; <a href="/en-US/docs/HTML/Content_categories#Embedded_content" title="HTML/Content categories#Embedded content">embedded content</a>, palpable content; Bei besitzen des Attributs <strong>usemap: </strong><a href="/en-US/docs/HTML/Content_categories#Interactive_content" title="HTML/Content categories#Interactive content">interactive content</a>; <a href="/en-US/docs/HTML/Content_categories#Form_listed" title="HTML/Content categories#Form listed">listed</a>, <a href="/en-US/docs/HTML/Content_categories#Form_submittable" title="HTML/Content categories#Form submittable">submittable</a> <a href="/en-US/docs/HTML/Content_categories#Form-associated_content" title="HTML/Content categories#Form-associated content">form-associated</a> element.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubter Inhalt</th>
+   <td>Null oder mehrere {{HTMLElement("param")}} Elemente, dann <a href="/en-US/docs/HTML/Content_categories#Transparent_content_models" title="HTML/Content categories#Transparent content models">Transparent content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted parent elements</th>
+   <td>Jedes Element das <a href="/en-US/docs/HTML/Content_categories#Embedded_content" title="HTML/Content categories#Embedded content">embedded content</a> erlaubt.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLObjectElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes">Attributes</h2>
+
+<p><span style="line-height: 21px;">Dieses Element enthält die </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p>
+
+<dl>
+ <dt>{{htmlattrdef("archive")}} {{HTMLVersionInline(4)}} only; {{obsoleteGeneric('inline','HTML5')}}</dt>
+ <dd>Eine durch Leerzeichen getrennte Liste von URIs für die Archive der Resourcen dieses <em>objects</em>.</dd>
+ <dt>{{htmlattrdef("border")}} {{deprecatedGeneric('inline','HTML4.01')}}; {{obsoleteGeneric('inline','HTML5')}}</dt>
+ <dd>Rahmenbreite in Pixeln.</dd>
+ <dt>{{htmlattrdef("classid")}} {{HTMLVersionInline(4)}} only; {{obsoleteGeneric('inline','HTML5')}}</dt>
+ <dd>URI die Object implementiert. Kann mit oder anstatt des <strong>data</strong> Attributes benutzt werden.</dd>
+ <dt>{{htmlattrdef("codebase")}} {{HTMLVersionInline(4)}} only; {{obsoleteGeneric('inline','HTML5')}}</dt>
+ <dd>Der Ursprungspfad zum auflösen der relativen URIs die durch <strong>classid</strong>, <strong>data</strong>, oder <strong>archive</strong> spezifiziert werden. Falls nicht spezifiziert, ist der Ursprungspfad der URI, document.</dd>
+ <dt>{{htmlattrdef("codetype")}} {{HTMLVersionInline(4)}} only; {{obsoleteGeneric('inline','HTML5')}}</dt>
+ <dd>Inhaltstype der Daten die durch <strong>classid</strong> spezifiziert werden.</dd>
+ <dt>{{htmlattrdef("data")}}</dt>
+ <dd>Valide URL der Adressressource. Wenigstens eine muss für <strong>data</strong> und <strong>type</strong> angegeben werden.</dd>
+ <dt>{{htmlattrdef("declare")}} {{HTMLVersionInline(4)}} only; {{obsoleteGeneric('inline','HTML5')}}</dt>
+ <dd>Bei vorhanden sein dieses Boolschen Attributes, wird das Element lediglich deklariert. <em>Object </em>muss durch ein nachfolgendes <code>&lt;object&gt;</code> Element instanziiert werden. In HTML5, wiederholt sich &lt;object&gt; komplett sodass jede Resource wiederbenutzt wird.</dd>
+ <dt>{{htmlattrdef("form")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Das form Element, falls vorhanden, sodass das <em>object mit dieser Form identifiziert wird </em>(seinem <em>form Besitzer</em>). Der Wert muss eine ID eines {{HTMLElement("form")}} Elements im selben <em>document</em> sein.</dd>
+ <dt>{{htmlattrdef("height")}}</dt>
+ <dd>Rahmenhöhe in Pixeln.</dd>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>Name des gültigen Browsing Contexts (HTML5), oder der Name oder Name der <em>control </em>(HTML 4).</dd>
+ <dt>{{htmlattrdef("standby")}} {{HTMLVersionInline(4)}} only; {{obsoleteGeneric('inline','HTML5')}}</dt>
+ <dd>Eine Nachricht die angezeigt wird, während die <em>object</em> Implementierung und Daten geladen werden.</dd>
+ <dt>{{htmlattrdef("tabindex")}} {{HTMLVersionInline(4)}} only; {{obsoleteGeneric('inline','HTML5')}}</dt>
+ <dd>Tabbing Position im aktuellen <em>document</em>.</dd>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd><a href="/en-US/docs/Glossary/Content_type">content type</a> der Resource wie in <strong>data</strong> spezifiziert. Wenigsten ein <strong>data</strong> und <strong>type</strong> müssen definiert sein.</dd>
+ <dt>{{htmlattrdef("usemap")}}</dt>
+ <dd><em>hash-name</em> Referenz zu einem {{HTMLElement("map")}} Element; d.h. ein '#' gefolgt der Value eines {{htmlattrxref("name", "map")}} von einem map Element.</dd>
+ <dt>{{htmlattrdef("width")}}</dt>
+ <dd>Anzeigebreite in PixelnThe width of the display resource, in CSS pixels.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Flash_Video_einbetten">Flash Video einbetten</h3>
+
+<pre class="brush: html">&lt;!-- Einbetten eines Flash Videos --&gt;
+&lt;object data="move.swf" type="application/x-shockwave-flash"&gt;&lt;/object&gt;
+
+&lt;!-- <span style="font-size: 1rem;"> Einbetten eines Flash Videos</span><span style="font-size: 1rem;"> mit Parametern --&gt;</span>
+&lt;object data="move.swf" type="application/x-shockwave-flash"&gt;
+  &lt;param name="foo" value="bar"&gt;
+&lt;/object&gt;
+</pre>
+
+<h2 id="Specifications" name="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'the-iframe-element.html#the-object-element', '&lt;object&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-object-element', '&lt;object&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.3', '&lt;object&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTMLElement("param")}}</li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/de/web/html/element/ol/index.html b/files/de/web/html/element/ol/index.html
new file mode 100644
index 0000000000..c480203a78
--- /dev/null
+++ b/files/de/web/html/element/ol/index.html
@@ -0,0 +1,157 @@
+---
+title: ol
+slug: Web/HTML/Element/ol
+tags:
+  - HTML
+  - HTML Elemente
+  - HTML Referenz
+translation_of: Web/HTML/Element/ol
+---
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Das HTML Element <em>ordered list</em> &lt;ol&gt; wird verwendet, um eine geordnete Liste zu definieren. Die Aufzählung kann in unterschiedlichen Formen geschehen, darunter Buchstaben, römische Zahlen und reguläre Zahlen. Die einzelnen Einträge innerhalb der Liste werden über <a href="/de/HTML/Element/li" title="de/HTML/Element/li">Listen</a> (<a href="/de/HTML/Element/li" title="de/HTML/Element/li">&lt;li&gt;</a>) Elemente in das <code>&lt;ol&gt;</code> Element eingefügt.</p>
+
+<ul>
+ <li>Element Typ: <a href="/de/HTML/Block-level_Elemente">block-level</a></li>
+ <li>Erlaubter Inhalt: <a href="/de/HTML/Element/li" title="de/HTML/Element/li">li</a></li>
+</ul>
+
+<h2 id="Attribute">Attribute</h2>
+
+<dl>
+ <dt>{{htmlattrdef("start")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Legt einen Startwert für die Aufzählung der Listeneinträge fest. Dies geschieht unabhängig vom Typ der Nummerierung. Römische Zahlen und Buchstaben können allerdings nicht als Wert angegeben werden, der einzig akzeptierte Wert ist eine Zahl. Um die Aufzählung mit dem Buchstaben "C" zu beginnen, schreibt man einfach: <code>&lt;ol type="A" start="3"&gt;</code>.</dd>
+ <dd>
+ <div class="note">
+ <p>Das Start-Attribut wurde in HTML4 als deprecated markiert, allerdings in HTML5 wieder integriert.</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("type")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>
+ <p>Wird verwendet, um das Aufzählungszeichen der Liste festzulegen. Die Werte sind in der <a href="/de/HTML3.2" title="de/HTML3.2">HTML3.2</a> Spezifikation festgelegt und in der „transitional“ Version von <a href="/de/HTML4.01" title="de/HTML4.01">HTML 4.0/4.01</a> sind <code>circle</code>, <code>disc</code>, und <code>square</code> aufgeführt. Der Browser kann über unterschiedliche Zeichen entscheiden, abhängig vom Grad der Verschachtelung, wenn das type Attribut nicht verwendet wird. Das WebTV Interface unterstützt auch ein <code>triangle</code> Zeichen. Dieses Attribut ist veraltet, es sollte die <a href="/de/CSS" title="de/CSS">CSS</a> <a href="/de/CSS/list-style-type" title="de/CSS/list-style-type">list-style-type</a> Eigenschaft stattdessen verwendet werden.</p>
+
+ <div class="note">
+ <p>Das Type-Attribut wurde in HTML4 als deprecated markiert, allerdings in HTML5 wieder integriert.</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("compact")}} {{ Deprecated_inline() }}</dt>
+ <dd>Gibt an, dass die Liste in einer kompakten Form gerendert werden soll. Die Interpretation dieses Attributs hängt vom Browser ab.</dd>
+ <dd>
+ <div class="note">
+ <p>Das Compact-Attribut wurde seit HTML4 als deprecated markiert und sollte nicht weiter benutzt werden.</p>
+
+ <p>einen ähnlichen Effekt kann man mit der CSS-Eigenschaft {{cssxref("line-height")}} und einem Wert von <code>80%</code> erzielen.</p>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einfaches_Beispiel">Einfaches Beispiel</h3>
+
+<pre>  &lt;ol&gt;
+    &lt;li&gt;Erster Eintrag&lt;/li&gt;
+    &lt;li&gt;Zweiter Eintrag&lt;/li&gt;
+    &lt;li&gt;Dritter Eintrag&lt;/li&gt;
+  &lt;/ol&gt;
+</pre>
+
+<p>Dieses HTML gibt das Folgende aus:</p>
+
+<ol>
+ <li>Erster Eintrag</li>
+ <li>Zweiter Eintrag</li>
+ <li>Dritter Eintrag</li>
+</ol>
+
+<h3 id="Verwendung_des_start_Attributs">Verwendung des <code>start</code> Attributs</h3>
+
+<pre>  &lt;ol start="7"&gt;
+    &lt;li&gt;Erster Eintrag&lt;/li&gt;
+    &lt;li&gt;Zweiter Eintrag&lt;/li&gt;
+    &lt;li&gt;Dritter Eintrag&lt;/li&gt;
+  &lt;/ol&gt;
+</pre>
+
+<p>Dieses HTML gibt das Folgende aus:</p>
+
+<ol start="7">
+ <li>Erster Eintrag</li>
+ <li>Zweiter Eintrag</li>
+ <li>Dritter Eintrag</li>
+</ol>
+
+<h3 id="Verschachtelte_Listen">Verschachtelte Listen</h3>
+
+<pre>  &lt;ol&gt;
+    &lt;li&gt;Erster Eintraf&lt;/li&gt;
+    &lt;li&gt;Zweiter Eintrag      &lt;!-- Achtung, das schließende &lt;/li&gt; Tag wird hier nicht notiert! --&gt;
+      &lt;ol&gt;
+        &lt;li&gt;Zweiter Eintrag erster Untereintrag&lt;/li&gt;
+        &lt;li&gt;Zweiter Eintrag zweiter Untereintrag&lt;/li&gt;
+        &lt;li&gt;Zweiter Eintrag dritter Untereintrag&lt;/li&gt;
+      &lt;/ol&gt;
+    &lt;/li&gt;                &lt;!-- Hier ist das schließende &lt;/li&gt; Tag angegeben! --&gt;
+    &lt;li&gt;Dritter Eintrag&lt;/li&gt;
+  &lt;/ol&gt;
+</pre>
+
+<p>Dieses HTML gibt das Folgende aus:</p>
+
+<ol>
+ <li>Erster Eintrag</li>
+ <li>Zweiter Eintrag
+  <ol>
+   <li>Zweiter Eintrag erster Untereintrag</li>
+   <li>Zweiter Eintrag zweiter Untereintrag</li>
+   <li>Zweiter Eintrag dritter Untereintrag</li>
+  </ol>
+ </li>
+ <li>Dritter Eintrag</li>
+</ol>
+
+<h3 id="Verschachtelte_&lt;ul>_und_&lt;ol>">Verschachtelte &lt;ul&gt; und &lt;ol&gt;</h3>
+
+<pre>  &lt;ol&gt;
+    &lt;li&gt;Erster Eintrag&lt;/li&gt;
+    &lt;li&gt;Zweiter Eintrag      &lt;!-- Achtung, das schließende &lt;/li&gt; Tag wird hier nicht notiert! --&gt;
+      &lt;ul&gt;
+        &lt;li&gt;Zweiter Eintrag erster Untereintrag&lt;/li&gt;
+        &lt;li&gt;Zweiter Eintrag zweiter Untereintrag&lt;/li&gt;
+        &lt;li&gt;Zweiter Eintrag dritter Untereintrag&lt;/li&gt;
+      &lt;/ul&gt;
+    &lt;/li&gt;                &lt;!-- Hier ist das schließende &lt;/li&gt; Tag angegeben! --&gt;
+    &lt;li&gt;Dritter Eintrag&lt;/li&gt;
+  &lt;/ol&gt;
+</pre>
+
+<p>Dieses HTML gibt das Folgende aus:</p>
+
+<ol>
+ <li>Erster Eintrag</li>
+ <li>Zweiter Eintrag
+  <ul>
+   <li>Zweiter Eintrag erster Untereintrag</li>
+   <li>Zweiter Eintrag zweiter Untereintrag</li>
+   <li>Zweiter Eintrag dritter Untereintrag</li>
+  </ul>
+ </li>
+ <li>Dritter Eintrag</li>
+</ol>
+
+<h2 id="Hinweise">Hinweise</h2>
+
+<p>Es können so viele Listen, wie man möchte verschachtelt werden, <code>&lt;ul&gt;</code> und <code>&lt;ol&gt;</code> in jeder Reihenfolge.</p>
+
+<p>Um die Einrückung von Listen zu verändern sollte die <a href="/de/CSS" title="de/CSS">CSS</a> <a href="/de/CSS/margin" title="de/CSS/margin">margin</a> Eigenschaft verwendet werden.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/HTML/Element/li" title="de/HTML/Element/li">HTML List item Element</a></li>
+ <li><a href="/de/HTML/Element/ul" title="de/HTML/Element/ul">HTML ungeordnete Liste</a></li>
+ <li><a href="/de/CSS/list-style" title="de/CSS/list-style">CSS list-style Eigenschaft</a></li>
+ <li><a href="/de/CSS_Counters" title="de/CSS_Counters">CSS Counters</a></li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/de/web/html/element/optgroup/index.html b/files/de/web/html/element/optgroup/index.html
new file mode 100644
index 0000000000..0f64b6a5d7
--- /dev/null
+++ b/files/de/web/html/element/optgroup/index.html
@@ -0,0 +1,161 @@
+---
+title: <optgroup>
+slug: Web/HTML/Element/optgroup
+tags:
+  - Element
+  - HTML
+  - HTML Formulare
+  - Referenz
+  - Web
+translation_of: Web/HTML/Element/optgroup
+---
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>In einem Webformular erstellt das <code>&lt;optgroup&gt;</code> HTML Element eine Gruppe von Optionen innerhalb eines {{HTMLElement("select")}} Elements.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/de/docs/Web/Guide/HTML/Inhaltskategorien" title="HTML/Content_categories">Inhaltskategorien</a></th>
+   <td>Keine</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubter Inhalt</th>
+   <td>Keine oder mehrere {{HTMLElement("option")}} Elemente.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag Auslassung</th>
+   <td>Der Starttag ist zwingend. Der Endtag ist optional, falls dem Element direkt ein weiteres <span style="font-family: courier new;">&lt;optgroup&gt;</span> Element folgt oder falls das Elternelement keine weiteren Inhalte hat.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte Elternelemente</th>
+   <td>Ein {{HTMLElement("select")}} Element.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM Schnittstelle</th>
+   <td>{{domxref("HTMLOptGroupElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{Note("<code>&lt;optgroup&gt;</code> Elemente können nicht verschachtelt werden.")}}</p>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p>Dieses Element beinhaltet die <a href="/de/docs/Web/HTML/Globale_Attribute" title="HTML/Global attributes">globalen Attribute</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("disabled")}}</dt>
+ <dd>Falls dieses boolsche Attribut gesetzt ist, ist keines der Optionsgruppenelemente auswählbar. Oft grauen Browser diese Optionen aus und sie erhalten keine Ereignisse wie Mausklicks oder Fokus bezogene Ereignisse.</dd>
+ <dt>{{htmlattrdef("label")}}</dt>
+ <dd>Der Name der Optionsgruppe, welchen der Browser verwenden kann, um die Optionen in der Benutzerschnittstelle zu beschreiben. Dieses Attribut ist zwingend, falls dieses Element benutzt wird.</dd>
+</dl>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: html">&lt;select&gt;
+  &lt;optgroup label="Gruppe 1"&gt;
+    &lt;option&gt;Option 1.1&lt;/option&gt;
+  &lt;/optgroup&gt;
+  &lt;optgroup label="Gruppe 2"&gt;
+    &lt;option&gt;Option 2.1&lt;/option&gt;
+    &lt;option&gt;Option 2.2&lt;/option&gt;
+  &lt;/optgroup&gt;
+  &lt;optgroup label="Gruppe 3" disabled&gt;
+    &lt;option&gt;Option 3.1&lt;/option&gt;
+    &lt;option&gt;Option 3.2&lt;/option&gt;
+    &lt;option&gt;Option 3.3&lt;/option&gt;
+  &lt;/optgroup&gt;
+&lt;/select&gt;
+</pre>
+
+<h3 id="Ergebnis">Ergebnis</h3>
+
+<p>{{EmbedLiveSample("Beispiel")}}</p>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-optgroup-element', '&lt;optgroup&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-optgroup-element', '&lt;optgroup&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '&lt;optgroup&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Andere Formular bezogene Elemente: {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("option")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/de/web/html/element/option/index.html b/files/de/web/html/element/option/index.html
new file mode 100644
index 0000000000..b52686ddc7
--- /dev/null
+++ b/files/de/web/html/element/option/index.html
@@ -0,0 +1,155 @@
+---
+title: <option>
+slug: Web/HTML/Element/option
+tags:
+  - Element
+  - Formulare
+  - HTML
+  - HTML Formulare
+  - Referenz
+  - Web
+translation_of: Web/HTML/Element/option
+---
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+
+<p>Im Rahmen eines Web Formulars erzeugt das <strong>HTML<em> </em><code>&lt;option&gt;</code><em> </em>Element </strong>einen innerhalb eines HTML5 {{HTMLElement("select")}}, {{HTMLElement("optgroup")}} oder {{HTMLElement("datalist")}} Elements zur Auswahl angezeigten Eintrag.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorie</a></th>
+   <td>Keine.</td>
+  </tr>
+  <tr>
+   <th scope="row">Zugelassene Inhalte</th>
+   <td>Text mit bedarfsweise in HTML Sequenzen umgewandelten Spezial- und Sonderzeichen, wie z.B. <code>&amp;eacute;</code>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Verhalten bei Auslassung</th>
+   <td>Im Gegensatz zum einleitenden Tag kann das beendende Tag ausgelassen werden, sofern diesem direkt ein weiteres <code>&lt;option&gt;</code> oder {{HTMLElement("optgroup")}} Element folgt, oder aber, wenn das Elternelement keine weiteren Inhalte enthält.</td>
+  </tr>
+  <tr>
+   <th scope="row">Zugelassene Elternelemente</th>
+   <td>Ein {{HTMLElement("select")}}, {{HTMLElement("optgroup")}} oder {{HTMLElement("datalist")}} Element.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM Schnittstelle</th>
+   <td>{{domxref("HTMLOptionElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p><span style="line-height: 21px;">Dieses Element berücksichtigt die </span><a href="/en-US/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globalen Attribute</a><span style="line-height: 21px;">.</span></p>
+
+<dl>
+ <dt>{{htmlattrdef("disabled")}}</dt>
+ <dd>Dieser boolesche Wert kennzeichnet diesen Eintrag als nicht auswählbar. Im Regelfall werden nicht auswählbare Einträge in der Darstellung ausgegraut und erhalten keine Benachrichtigungen über Mausclicks, Fokus etc. mehr vom Browser. Ein Element kann darüber hinaus auch deshalb nicht auswählbar sein, weil ein ihm übergeordnetes {{HTMLElement("optgroup")}} Element inaktiviert ist.</dd>
+ <dt>{{htmlattrdef("label")}}</dt>
+ <dd>Dieses Attribut kann eine kurze erläuternde Informationen zur Bedeutung der jeweiligen Auswahl enthalten. Wurde dem <code><strong>label</strong></code> Attribut kein Inhalt explizit zugewiesen, enthält es den Textinhalt des Auswahlpunktes selbst.
+ <div class="note"><em>Hinweis zur Nutzung: </em>Ein <code><strong>label</strong></code> Attribut sollte lediglich eine kurze Erläuterung enthalten, wie sie z.B. im Rahmen eines Auswahlmenüs sinnvoll ist. Für längere Beschreibungen, z.B. den neben Radiobuttons und Auswahlschaltflächen angezeigten Text, wurde das <strong><code>value</code></strong> Attribut vorgesehen.</div>
+ </dd>
+ <dt>{{htmlattrdef("selected")}}</dt>
+ <dd>Wenn angegeben, kennzeichnet dieser boolesche Wert, ob die betreffende Auswahl initial bereits als angewählt gekennzeichnet ist. Wenn das betreffende<span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">&lt;option&gt;</code><span style="line-height: 1.5;"> Element einem {{HTMLElement("select")}} Element untergeordnet ist, dessen Attribut für Mehrfachauswahl {{htmlattrxref("multiple", "select")}} nicht gesetzt ist, darf nur ein einziges </span><code style="font-style: normal; line-height: 1.5;">&lt;option&gt;</code><span style="line-height: 1.5;"> Element des beinhaltenden {{HTMLElement("select")}} über ein </span><strong style="line-height: 1.5;">selected</strong><span style="line-height: 1.5;"> Attribut verfügen.</span></dd>
+ <dt>{{htmlattrdef("value")}}</dt>
+ <dd>Dieses Attribut kann eine textuelle Erläuterung zur Bedeutung der betreffenden Auswahl enthalten. Wurde diesem Attribut kein Inhalt explizit zugewiesen, enthält es den Textinhalt des Auswahlpunktes selbst<span style="line-height: 1.5;">.</span></dd>
+ <dd>
+ <div class="note"><em>Hinweis zur Nutzung: </em>Ein <code style="font-style: italic;"><strong>label</strong></code> Attribut sollte lediglich eine kurze Erläuterung enthalten, wie sie z.B. im Rahmen eines Auswahlmenüs sinnvoll ist. Für längere Beschreibungen, z.B. den neben Radiobuttons und Auswahlschaltflächen angezeigten Text, wurde das <strong><code>value</code></strong> Attribut vorgesehen.</div>
+ </dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Siehe Beispiele bei {{HTMLElement("select")}}.</p>
+
+<h2 id="Specifications" name="Specifications">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-option-element', '&lt;option&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-option-element', '&lt;option&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '&lt;option&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browserunterstützung</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Grundlegend unterstützt</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1.0")}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegend unterstützt</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Gecko_notes">Gecko notes</h3>
+
+<p>[1] In Versionen vor Gecko 7.0, {{geckoRelease("7.0")}}, enthielt ein nicht explizit spezifiziertes label Attribut fälschlicherweise überhaupt keinen Inhalt, anstatt den textuellen Inhalt des Auswahlpunktes selbst.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Weitere Elemente mit Bezug auf Formulare: {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} und {{HTMLElement("meter")}}.</li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/de/web/html/element/p/index.html b/files/de/web/html/element/p/index.html
new file mode 100644
index 0000000000..3a9bcf34a1
--- /dev/null
+++ b/files/de/web/html/element/p/index.html
@@ -0,0 +1,155 @@
+---
+title: p
+slug: Web/HTML/Element/p
+tags:
+  - HTML
+  - HTML Elemente
+  - HTML Referenz
+translation_of: Web/HTML/Element/p
+---
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Das <strong>&lt;p&gt;</strong>-Element erzeugt einen Absatz, den zusammenhängenden Abschnitt eines längeren Textes. In HTML kann <code>&lt;p&gt;</code> jedoch für jedwede Art von zu gruppierendem, zusammenhängendem Inhalt genutzt werden, zum Beispiel Bilder oder Formularfelder.</p>
+
+<p><code>&lt;p&gt;</code> ist eines der am häufigsten benutzen HTML-Elemente.</p>
+
+<p>{{EmbedInteractiveExample("pages/tabbed/p.html", "tabbed-standard")}}</p>
+
+<p><code>&lt;p&gt;</code> ist ein <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements">Blockelement</a>; als solches wird es automatisch beendet, sobald ein anderes Blockelement vor seinem eigenen schließenden &lt;/p&gt; erscheint.</p>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p>Dieses Element unterstützt lediglich die <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">globalen Attribute</a>.</p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Das <code>align</code>-Attribut sollte nicht mehr benutzt werden.</p>
+</div>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre>&lt;p&gt;
+Das ist der erste Absatz des Textes. Das ist der erste Absatz des Textes.
+Das ist der erste Absatz des Textes. Das ist der erste Absatz des Textes.
+&lt;/p&gt;
+
+&lt;p&gt;
+Das ist der zweite Absatz des Textes. Das ist der zweite Absatz des Textes.
+Das ist der zweite Absatz des Textes. Das ist der zweite Absatz des Textes.
+&lt;/p&gt;
+</pre>
+
+<h3 id="Ergebnis">Ergebnis</h3>
+
+<p>Das ist der erste Absatz des Textes. Das ist der erste Absatz des Textes. Das ist der erste Absatz des Textes. Das ist der erste Absatz des Textes.</p>
+
+<p>Das ist der zweite Absatz des Textes. Das ist der zweite Absatz des Textes. Das ist der zweite Absatz des Textes. Das ist der zweite Absatz des Textes.</p>
+
+<h2 id="Absätze_gestalten">Absätze gestalten</h2>
+
+<p>Zwei Absätze werden üblicherweise durch einen leeren Zwischenraum voneinander getrennt. {{glossary("CSS")}} ermöglicht jedoch vielfältige Gestaltungsmöglichkeiten, etwa den Einzug der ersten Zeile:</p>
+
+<h3 id="HTML_2">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Separating paragraphs with blank lines is easiest
+for readers to scan, but they can also be separated
+by indenting their first lines. This is often used
+to take up less space, such as to save paper in print.&lt;/p&gt;
+
+&lt;p&gt;Writing that is intended to be edited, such as school
+papers and rough drafts, uses both blank lines and
+indentation for separation. In finished works, combining
+both is considered redundant and amateurish.&lt;/p&gt;
+
+&lt;p&gt;In very old writing, paragraphs were separated with a
+special character: ¶, the &lt;i&gt;pilcrow&lt;/i&gt;. Nowadays, this
+is considered claustrophobic and hard to read.&lt;/p&gt;
+
+&lt;p&gt;How hard to read? See for yourself:
+  &lt;button data-toggle-text="Oh no! Switch back!"&gt;Use pilcrow for paragraphs&lt;/button&gt;
+&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  margin: 0;
+  text-indent: 3ch;
+}
+
+p.pilcrow {
+   text-indent: 0;
+   display: inline;
+}
+p.pilcrow + p.pilcrow::before {
+  content: " ¶ ";
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">document.querySelector('button').addEventListener('click', function (event) {
+  document.querySelectorAll('p').forEach(function (paragraph) {
+    paragraph.classList.toggle('pilcrow');
+  });
+  var newButtonText = event.target.dataset.toggleText;
+  var oldText = event.target.innerText;
+  event.target.innerText = newButtonText;
+  event.target.dataset.toggleText = oldText;
+});</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample('Styling_paragraphs')}}</p>
+
+<h2 id="Barrierefreiheit">Barrierefreiheit</h2>
+
+<p>Das Aufteilen eines Dokuments in mehrere Absätze erleichtert das Verständnis des Inhalts für alle Nutzergruppen erheblich.</p>
+
+<p>Bildschirmleseprogramme und ähnliche Hilfsmittel verfügen darüber hinaus über Bedienelemente, mit denen Absätze übersprungen werden können. Dies erlaubt blinden Nutzern das schnelle Überfliegen eines Textes, ähnlich wie die Leerzeilen sehenden Nutzern Orientierungspunkte bieten.</p>
+
+<p>Leere <code>&lt;p&gt;</code>-Elemente und auch mehrere aufeinanderfolgende <code>&lt;br&gt;</code>-Zeilenumbrüche, deren einziger Nutzen das Vergrößeren des visuellen Abstandes ist, führen bei Bildschirmleseprogrammen oft zu einer verwirrenden Ausgabe: Es werden Absätze angekündigt, die eigentlich gar nicht vorhanden sind.</p>
+
+<p>Auf die Dauer kann dieses Verhalten frustrierend sein. Abstände sollten deshalb ausschließlich mit {{glossary("CSS")}} erzeugt werden. CSS ermöglicht zudem eine wesentlich feinere Kontrolle der Maße.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{HTMLElement("hr")}}</li>
+ <li>{{HTMLElement("br")}}</li>
+</ul>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-p-element', '&lt;p&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Keine Änderung.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-p-element', '&lt;p&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td><code>align</code>-Attribut ist überflüssig.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.1', '&lt;p&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Erste Definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilät">Browserkompatibilät</h2>
+
+
+
+<p>{{Compat("html.elements.p")}}</p>
diff --git a/files/de/web/html/element/picture/index.html b/files/de/web/html/element/picture/index.html
new file mode 100644
index 0000000000..60bf6d78cd
--- /dev/null
+++ b/files/de/web/html/element/picture/index.html
@@ -0,0 +1,103 @@
+---
+title: <picture>
+slug: Web/HTML/Element/picture
+translation_of: Web/HTML/Element/picture
+---
+<div>{{HTMLRef}}</div>
+
+<p>Das <strong>HTML-Element <code>&lt;picture&gt;</code> </strong>ist ein Container, der zur Angabe mehrerer {{HTMLElement("source")}}s (Bildquellen) für ein {{HTMLElement("img")}} dient. Der Browser wird die Quelle verwenden, die aufgrund des gegenwärtigen Seitenlayouts (die Begrenzungen der Box, in der das Bild auftaucht) und dem Anzeigegerät (z.B. ein normales or hiDPI-Gerät) am geeignesten erscheint.</p>
+
+<h2 id="Usage_Context">Usage Context</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, phrasing content, embedded content</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted content</th>
+   <td>Null oder mehr {{HTMLElement("source")}}-Elemente, gefolgt von einem {{HTMLElement("img")}}-Element, optional vermischt mit Skript-unterstützenden Elementen.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted parent elements</th>
+   <td>
+    <p>Jegliches Element, das eingebetteten Inhalt erlaubt.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLPictureElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p>Dieses Element beinhaltet nur <a href="/en-US/docs/Web/HTML/Global_attributes">globale Attribute</a>.</p>
+
+<h2 id="Beispiel_1_Verwendung_des_Attributs_media">Beispiel 1: Verwendung des Attributs <code>media</code></h2>
+
+<p>Das Attribut <code>media</code> erlaubt die Angabe eines Media-Query, das der User Agent auswertet, um das gewünschte {{HTMLElement("source")}}-Element auszuwählen. Wenn ein Media Query zu <code>false</code> evaluiert, wird das {{HTMLElement("source")}}-Element übersprungen.</p>
+
+<pre class="brush: html">&lt;picture&gt;
+ &lt;source srcset="mdn-logo-wide.png" media="(min-width: 600px)"&gt;
+ &lt;img src="mdn-logo-narrow.png" alt="MDN"&gt;
+&lt;/picture&gt;
+</pre>
+
+<h2 id="Beispiel_2_Verwendung_des_Attributs_type">Beispiel 2: Verwendung des Attributs <code>type</code></h2>
+
+<p>Das Attribut type erlaubt die Angabe eines MIME-Typs für Ressourcen, die im Attribut srcset des Elements {{HTMLElement("source")}} angegeben sind. Wenn der User Agent den angegebenen Typ nicht unterstützt, wird das {{HTMLElement("source")}}-Element übersprungen.</p>
+
+<pre class="brush: html">​&lt;picture&gt;
+ &lt;source srcset="mdn-logo.svg" type="image/svg+xml"&gt;
+ &lt;img src="mdn-logo.png" alt="MDN"&gt;
+&lt;/picture&gt;
+</pre>
+
+<p> </p>
+
+<h2 id="Beispiel_3_Verwendung_des_Attributs_srcset">Beispiel 3: Verwendung des Attributs <code>srcset</code></h2>
+
+<p>Das Attribut srcset erlaubt es verschiedene Bildgrößen auszuliefern. Höhere Auflösungen werden bei höheren Zoomstufen im Browser, oder bei Bildschirmen mit hohen Pixeldichten (DPI) geladen.</p>
+
+<pre class="brush: html">​&lt;picture&gt;
+ &lt;source srcset="mdn-logo.png 1x, mdn-logo_x2.png 2x, mdn-logo_x3.png 3x"&gt;
+ &lt;img src="mdn-logo.png" alt="MDN"&gt;
+&lt;/picture&gt;</pre>
+
+<p> </p>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-picture-element', '&lt;picture&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+{{Compat("html.elements.picture")}}
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{HTMLElement("img")}}-Element</li>
+</ul>
diff --git a/files/de/web/html/element/pre/index.html b/files/de/web/html/element/pre/index.html
new file mode 100644
index 0000000000..e57979b3d3
--- /dev/null
+++ b/files/de/web/html/element/pre/index.html
@@ -0,0 +1,37 @@
+---
+title: pre
+slug: Web/HTML/Element/pre
+translation_of: Web/HTML/Element/pre
+---
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+
+<p>Dieses Element repräsentiert vorformatierten Text. Text innerhalb dieses Elements wird typischerweise nicht-proportional und genauso wie in der Datei angegeben angezeigt. Leerstellen - sogenannte whitespaces - werden dargestellt wie eingegeben..</p>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p>Wie alle anderen HTML Elemente besitzt dieses Element die <a href="/en/HTML/Global_attributes" rel="internal">globalen Attribute</a>.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: html">&lt;!-- Beispiel CSS code --&gt;
+&lt;pre&gt;
+body {
+  color:red;
+}
+&lt;/pre&gt;
+</pre>
+
+<h3 id="Ergebnis">Ergebnis</h3>
+
+<pre>body {
+  color:red;
+}
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>CSS: {{ Cssxref('white-space') }}, {{ Cssxref('word-break') }}</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/de/web/html/element/progress/index.html b/files/de/web/html/element/progress/index.html
new file mode 100644
index 0000000000..c256dec21a
--- /dev/null
+++ b/files/de/web/html/element/progress/index.html
@@ -0,0 +1,175 @@
+---
+title: <progress>
+slug: Web/HTML/Element/progress
+tags:
+  - Element
+  - HTML
+  - HTML Formulare
+  - HTML5
+  - Referenz
+  - Web
+translation_of: Web/HTML/Element/progress
+---
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Das <strong>HTML<em> </em><code>&lt;progress&gt;</code> Element</strong> wird benutzt, um den Fortschritt einer Aufgabe zu visualisieren. Während die Einzelheiten dem Browser überlassen werden, wird es üblicherweise als Fortschrittsanzeige angezeigt. Javascript kann den Wert der Fortschrittsanzeige manipulieren.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Inhalt Kategorien</a></th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Fließender Inhalt</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Formuliereder Inhalt</a>, bezeichbarer Inhalt, fühlbarer Inhalt.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubter Inhalt</th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Formulierender Inhalt</a>, doch es darf kein <code>&lt;progress&gt;</code> Element unter seinen Nachfahren sein.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag Wegfall</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte Elternelemente</th>
+   <td>Alle Elemente, die <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">formuliereden Inhalt</a> akzeptieren.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM-Schnittstelle</th>
+   <td>{{domxref("HTMLProgressElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p><span style="line-height: 21px;">Das Element enthält die </span><a href="/en-US/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globalen Attribute</a><span style="line-height: 21px;">.</span></p>
+
+<dl>
+ <dt>{{ htmlattrdef("max") }}</dt>
+ <dd>Das Attribut beschreibt, wie viel Arbeit die Aufgabe, angezeigt bei dem <code>progress</code> Element, benötigt. Das <code>max</code> Attribut, wenn vorhanden, muss größer als Null sein und eine gültige Zahl binnen floating point number sein.</dd>
+ <dt>{{ htmlattrdef("value") }}</dt>
+ <dd>Das Atttribut gibt an, wie viel Arbeit der gesamten Aufgabe schon verrichtet wurde. Es muss eine gültige Zahl binnen floating point number zwischen 0 und <code>max</code> oder zwischen 0 und 1, falls <code>max</code> wegfällt, sein. Falls kein <code>value</code> (Wert) Attribut gegeben ist, ist die Fortschrittsanzeige unbestimmt; dies zeigt an, dass eine Aktivität ohne eine festgelegte ungefähre Restdauer fortläuft.</dd>
+</dl>
+
+<p>Sie können die {{ cssxref("-moz-orient") }} Eigenschaft nutzen, um festzulegen, ob die Fortschrittsanzeige horizontal (der Standard) oder vertikal gerendert werden soll. Die {{ cssxref(":indeterminate") }} Pseudo-Klasse kann benutzt werden, um unbestimmte Fortschrittsanzeigen zuzuorden.</p>
+
+<dl>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: html">&lt;progress value="70" max="100"&gt;70 %&lt;/progress&gt;
+</pre>
+
+<h3 id="Resultat">Resultat</h3>
+
+<p>{{ EmbedLiveSample("Beispiele", 200, 50) }}</p>
+
+<p>Das Endergebnis sieht auf Mac OS X so aus:</p>
+
+<p><img alt="The progress bar seen in OS X Mavericks" class="default internal" src="https://mdn.mozillademos.org/files/6863/Screenshot%202014-01-30%2011.14.30.png" style="height: 24px; width: 167px;"></p>
+
+<p>Das Endergebnis sieht auf Windows so aus:</p>
+
+<p><img alt="progress-firefox.JPG" class="default internal" src="/@api/deki/files/6031/=progress-firefox.JPG"></p>
+
+<h3 id="Zusätzliche_Bespiele">Zusätzliche Bespiele</h3>
+
+<p>Siehe auch {{ cssxref("-moz-orient") }}.</p>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-progress-element', '&lt;progress&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-progress-element', '&lt;progress&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Ursprünliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funktion</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basis Unterstützung</td>
+   <td>6.0</td>
+   <td>{{ CompatGeckoMobile("6.0") }} [1]<br>
+    {{ CompatGeckoMobile("14.0")}} [2]</td>
+   <td>10</td>
+   <td>11.0</td>
+   <td>5.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funktion</th>
+   <th>Android</th>
+   <th>Firefox Mobil (Gecko)</th>
+   <th>IE Mobil</th>
+   <th>Opera Mobil</th>
+   <th>Safari Mobil</th>
+  </tr>
+  <tr>
+   <td>Basis Unterstützung</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatGeckoMobile("6.0") }} [1]<br>
+    {{ CompatGeckoMobile("14.0")}} [2]</td>
+   <td>{{ CompatNo() }}</td>
+   <td>11.0</td>
+   <td>7 [3]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Gecko liefert das {{ cssxref("::-moz-progress-bar") }} Pseudo-Element, welches Sie das Aussehen des Inneren der Fortschrittsanzeige verändern lässt, wie groß der Fortschritt schon ist.<br>
+ Vor Gecko 14.0 {{ geckoRelease("14.0") }} wurde das <code>&lt;progress&gt;</code> Element inkorrekterweise als ein Formularelement klassifiziert und hatte daher ein <code>form</code> Attribut. Dieser Fehler wurde jedoch behoben.</p>
+
+<p>[2] Gecko liefert das {{ cssxref("::-moz-progress-bar") }} Pseudo-element, welches Sie das Aussehen des Inneren der Fortschrittsanzeige verändern lässt, wie groß der Fortschritt schon ist.</p>
+
+<p>[3] Safari auf iOS unterstützt die unbestimmte Fortschrittsanzeige nicht. (Stattdessen wird 0% Fortschritt angezeigt).</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{htmlelement("meter")}}</li>
+ <li>{{ cssxref(":indeterminate") }}</li>
+ <li>{{ cssxref("-moz-orient") }}</li>
+ <li>{{ cssxref("::-moz-progress-bar") }}</li>
+ <li>{{ cssxref("::-ms-fill") }}</li>
+ <li>{{ cssxref("::-webkit-progress-bar") }}</li>
+ <li>{{ cssxref("::-webkit-progress-value") }}</li>
+ <li>{{ cssxref("::-webkit-progress-inner-element") }}</li>
+</ul>
+
+<p>{{ HTMLRef }}</p>
diff --git a/files/de/web/html/element/q/index.html b/files/de/web/html/element/q/index.html
new file mode 100644
index 0000000000..efcee4ad6f
--- /dev/null
+++ b/files/de/web/html/element/q/index.html
@@ -0,0 +1,155 @@
+---
+title: <q>
+slug: Web/HTML/Element/q
+tags:
+  - Element
+  - HTML
+  - HTML Text-Level Semantik
+  - Referenz
+  - Web
+translation_of: Web/HTML/Element/q
+---
+<div>{{HTMLRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Das <strong>HTML <code>&lt;q&gt;</code> Element</strong> (oder <em>HTML Quote Element</em>) indiziert, dass es sich bei dem eingeschlossenen Text um ein kurzes Zitat handelt. Dieses Element ist speziell für kurze Zitate gedacht, die keinen Umbruch benötigen; für längere Zitate sollte das {{HTMLElement("blockquote")}} Element verwendet werden.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorien</a></th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Fließender Inhalt</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">Formulierungsinhalt</a>, greifbarer Inhalt.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubter Inhalt</th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Formulierungsinhalt</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag Auslassung</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte Elternelemente</th>
+   <td>Jedes Element, dass <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Formulierungsinhalt</a> erlaubt.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM Schnittstelle</th>
+   <td>{{domxref("HTMLQuoteElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p><span style="line-height: 21px;">Dieses Element schließt nur </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globale Attribute</a><span style="line-height: 21px;"> ein.</span></p>
+
+<dl>
+ <dt>{{htmlattrdef("cite")}}</dt>
+ <dd>Der Wert des Attributs ist eine URL, die zu dem Quelldokument oder der Quellnachricht der Information führt. Dieses Attribut zielt darauf ab, auf Informationen zu zeigen, die den Kontext oder die Referenz des Zitats näher erläutern.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Beispiel</h2>
+
+<pre class="brush: html">&lt;p&gt;Jedes mal, wenn Kenny stirbt, sagt Stan
+   &lt;q cite="http://en.wikipedia.org/wiki/Kenny_McCormick#Cultural_impact"&gt;
+     Oh mein Gott, sie haben Kenny getötet!
+   &lt;/q&gt;.
+&lt;/p&gt;
+</pre>
+
+<p>Dieser HTML Code liefert folgendes Ergebnis:</p>
+
+<p>Jedes mal, wenn Kenny stirbt, sagt Stan <q cite="http://en.wikipedia.org/wiki/Kenny_McCormick#Cultural_impact">Oh mein Gott, sie haben Kenny getötet!</q>.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-q-element', '&lt;q&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-q-element', '&lt;q&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.2', '&lt;q&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Anmerkungen">Anmerkungen</h3>
+
+<p>Die meisten modernen Standard-basierten Browser, wie Mozilla Firefox, Opera, und Safari sollten Anführungszeichen um das <code>&lt;q&gt;</code> Element hinzufügen.</p>
+
+<p>Manche Browser, wie der Internet Explorer, ändern die Darstellung nicht, ermöglichen jedoch eine Darstellungsregel für Zitate festzulegen.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Das {{HTMLElement("blockquote")}} Element für lange Zitate.</li>
+ <li>Das {{HTMLElement("cite")}} Element für Quellangaben.</li>
+</ul>
diff --git a/files/de/web/html/element/s/index.html b/files/de/web/html/element/s/index.html
new file mode 100644
index 0000000000..877ec73bb5
--- /dev/null
+++ b/files/de/web/html/element/s/index.html
@@ -0,0 +1,70 @@
+---
+title: <s>
+slug: Web/HTML/Element/s
+tags:
+  - Element
+  - HTML
+  - HTML Textlevelsemantiken
+  - NeedsCompatTable
+  - Referenz
+  - Web
+translation_of: Web/HTML/Element/s
+---
+<div>{{HTMLRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Das <em>HTML Strikethrough Element</em> (<code>&lt;s&gt;</code>) stellt Text mit einer durchgestrichenen Linie dar. Benutzt wird das <code>&lt;s&gt;</code> Element um zu repräsentieren, dass Dinge nicht länger relevant oder zutreffend sind. <code>&lt;s&gt;</code> ist jedoch nicht dafür geeignet, um Dokumentenänderungen anzuzeigen - hierfür sollten das {{HTMLElement("del")}} und das {{HTMLElement("ins")}} Element genutzt werden.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorien</a></th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">Formulierungsinhalt</a> oder <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">fließender Inhalt</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubter Inhalt</th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Transparent" title="HTML/Content categories#Transparent">Transparent</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag Auslassung</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte Elternelemente</th>
+   <td>Jedes Element, dass <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Formulierungsinhalt</a> erlaubt.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM Schnittstelle</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p><span style="line-height: 21px;">Dieses Element schließt nur </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globale Attribute</a><span style="line-height: 21px;"> ein.</span></p>
+
+<h2 id="DOM_Schnittstelle">DOM Schnittstelle</h2>
+
+<p>Dieses Element implementiert die <code><a href="/en-US/docs/DOM/element" title="DOM/element">HTMLElement</a></code> Schnittstelle.</p>
+
+<div class="note"><strong>Hinweis zur Implementierung: </strong>Bis einschließlich Gecko 1.9.2, hat Firefox die <a href="/en-US/docs/DOM/span" title="DOM/span"><code>HTMLSpanElement</code></a> Schnittstelle für dieses Element implementiert.</div>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush:html">&lt;s&gt;Heute im Angebot: Lachs&lt;/s&gt; AUSVERKAUFT&lt;br /&gt;
+&lt;span style="text-decoration:line-through;"&gt;Heute im Angebot: Lachs&lt;/span&gt; AUSVERKAUFT</pre>
+
+<h3 id="Ergebnis">Ergebnis</h3>
+
+<p><s>Heute im Angebot: Lachs</s> AUSVERKAUFT<br>
+ <s style="text-decoration: line-through;">Heute im Angebot: Lachs</s> AUSVERKAUFT</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Das {{HTMLElement("strike")}} Element, der Vorgänger des {{HTMLElement("s")}} Elements ist veraltet und sollte nicht mehr genutzt werden.</li>
+ <li>Das {{HTMLElement("del")}} Element, welches genutzt werden sollte, wenn Daten <em>gelöscht</em> wurden.</li>
+ <li>Die CSS {{cssxref("text-decoration")}} Eigenschaft um die visuellen Aspekte des {{HTMLElement("s")}} Elements zu archivieren.</li>
+</ul>
diff --git a/files/de/web/html/element/section/index.html b/files/de/web/html/element/section/index.html
new file mode 100644
index 0000000000..85155a81ed
--- /dev/null
+++ b/files/de/web/html/element/section/index.html
@@ -0,0 +1,170 @@
+---
+title: '<section>: um Abschnitten zu erstellen'
+slug: Web/HTML/Element/section
+tags:
+  - Element
+  - HTML
+  - HTML 5
+  - HTML section
+  - Unterteilung
+translation_of: Web/HTML/Element/section
+---
+<div>{{HTMLRef}}</div>
+
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Das <em>HTML Element Section </em>(<code>&lt;section&gt;</code>) stellt eine allgemeine Unterteilung des Dokumentes dar, z.B. eine thematische Gruppierung des Inhaltes typischerweise mit einer Überschrift.  Jeder <code>&lt;section&gt;</code> Abschnitt sollte identifizierbar sein, üblicherweise durch Einfügen einer Überschrift (<code><a href="http://www.w3.org/html/wg/drafts/html/master/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a></code>-<code><a href="http://www.w3.org/html/wg/drafts/html/master/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h6</a></code> Element) als Kindelement des <code>&lt;section&gt;</code> Elementes.</p>
+
+<p>Zum Beispiel sollte jedes Navigationsmenü in ein <code>&lt;nav&gt;</code> Element eingebettet sein, eine Liste von Suchergebnissen und eine Anzeige einer Karte hat kein solch spezifisches Element und könnte daher in eine <code>&lt;section&gt;</code> eingebettet werden.</p>
+
+<div class="note">
+<p><em>Hinweis zur Benutzung:</em></p>
+
+<ul>
+ <li>Wenn der Inhalt des {{HTMLElement("section")}} Elementes sinnvoll getrennt zu syndizieren ist, benutzt man stattdessen das {{HTMLElement("article")}} Element.</li>
+ <li>{{HTMLElement("section")}} soll nicht als allgemeines Containerelement benutzt werden; dafür gibt es  {{HTMLElement("div")}}. Insbesondere gilt dies, wenn die Einteilung ausschließlich für CSS-Zwecke gedacht ist. Als Faustformel gilt, dass ein mit  {{HTMLElement("section")}} ausgezeichneter Abschnitt auch in der Gliederung des Dokumentes erscheinen sollte.</li>
+</ul>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Inhaltskategorien</a></th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Fließender Inhalt</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Sectioning_content">Abschnitte</a>, greifbarer Inhalt.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubter Inhalt</th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Fließender Inhalt</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte Elternelemente</th>
+   <td>Jedes Element das <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a> erlaubt. Beachte, dass das {{HTMLElement("section")}}  kein Nachkomme des {{HTMLElement("address")}} Elementes sein darf.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM Schnittstelle</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p>Dieses Element enthält nur  <a href="/en-US/docs/Web/HTML/Global_attributes">globale Attribute</a>.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: html">&lt;section&gt;
+  &lt;h1&gt;Heading&lt;/h1&gt;
+  &lt;p&gt;Bunch of awesome content&lt;/p&gt;
+&lt;/section&gt;
+</pre>
+
+<h2 id="Beispiel_2">Beispiel 2</h2>
+
+<h3 id="Bisher">Bisher</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;h2&gt;Heading&lt;/h2&gt;
+  &lt;img&gt;some image&lt;/img&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Jetzt">Jetzt</h3>
+
+<pre class="brush: html">&lt;section&gt;
+  &lt;h2&gt;Heading&lt;/h2&gt;
+  &lt;img&gt;some image&lt;/img&gt;
+&lt;/section&gt;
+</pre>
+
+<h2 id="sect1"></h2>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'sections.html#the-section-element', '&lt;section&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'sections.html#the-section-element', '&lt;section&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-section-element', '&lt;section&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>9.0</td>
+   <td>11.10</td>
+   <td>4.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.2</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>9.0</td>
+   <td>11.0</td>
+   <td>5.0 (iOS 4.2)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Andere mit Section verwandte Elemente: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li>
+ <li><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document">Sections and outlines of an HTML5 document</a>.</li>
+</ul>
diff --git a/files/de/web/html/element/shadow/index.html b/files/de/web/html/element/shadow/index.html
new file mode 100644
index 0000000000..4072f6237b
--- /dev/null
+++ b/files/de/web/html/element/shadow/index.html
@@ -0,0 +1,159 @@
+---
+title: <shadow>
+slug: Web/HTML/Element/Shadow
+translation_of: Web/HTML/Element/shadow
+---
+<h2 id="Summary" name="Summary">Zusammenfassung</h2>
+
+<p>Das <strong><a href="/en-US/docs/Web/HTML">HTML</a> <code>&lt;shadow&gt;</code></strong> Element wird als shadow DOM {{glossary("insertion point")}} genutzt. Es kann eventuell gesehen werden, wenn mehrerere shadow roots unter einem shadow host erstellt wurden. Es wird mit <a href="/en-US/docs/Web/Web_Components">Web Components</a> genutzt.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Kategorien des Inhalts</a></th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Transparent_content_model" title="HTML/Content_categories#Transparent_content_model">Transparenter Inhalt</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Zulässiger Inhalt</th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tags</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Zulässige Eltern-Elemente</th>
+   <td>Any element that accepts flow content.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM Schnittstelle</th>
+   <td>{{domxref("HTMLShadowElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes" name="Attributes">Attribute</h2>
+
+<p>Dieses Element inkludiert die <a href="/en-US/docs/Web/HTML/Global_attributes">Globalen Attribute</a>.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Hier ist ein einfaches Beispiel, welches das <code>&lt;shadow&gt;</code> Element verwendet. Es ist eine HTML-Datei mit allem was benötigt wird.</p>
+
+<div class="note">
+<p><strong>Notiz:</strong> Dies ist eine experimentelle Technologie. Damit dieser Code funktioniert muss ihr Browser Web Components unterstützen.  <a href="/en-US/docs/Web/Web_Components#Enabling_Web_Components_in_Firefox">Aktivieren von Web Components in Firefox</a>.</p>
+</div>
+
+<pre class="brush: html">&lt;html&gt;
+  &lt;head&gt;&lt;/head&gt;
+  &lt;body&gt;
+
+  &lt;!-- This &lt;div&gt; will hold the shadow roots. --&gt;
+  &lt;div&gt;
+    &lt;!-- This heading will not be displayed --&gt;
+    &lt;h4&gt;My Original Heading&lt;/h4&gt;
+  &lt;/div&gt;
+
+  &lt;script&gt;
+    // Get the &lt;div&gt; above with its content
+    var origContent = document.querySelector('div');
+    // Create the first shadow root
+    var shadowroot1 = origContent.createShadowRoot();
+    // Create the second shadow root
+    var shadowroot2 = origContent.createShadowRoot();
+
+    // Insert something into the older shadow root
+    shadowroot1.innerHTML =
+      '&lt;p&gt;Older shadow root inserted by &amp;lt;shadow&amp;gt;&lt;/p&gt;';
+    // Insert into younger shadow root, including &lt;shadow&gt;.
+    // The previous markup will not be displayed unless
+    // &lt;shadow&gt; is used below.
+    shadowroot2.innerHTML =
+      '&lt;shadow&gt;&lt;/shadow&gt; &lt;p&gt;Younger shadow root, displayed because it is the youngest.&lt;/p&gt;';
+  &lt;/script&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Das obige Beispiel sollte folgendes anzeigen.</p>
+
+<p><img alt="shadow example" src="https://mdn.mozillademos.org/files/10083/shadow-example.png" style="height: 343px; width: 641px;"></p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="spec-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Shadow DOM', "#the-shadow-element", "shadow")}}</td>
+   <td>{{Spec2('Shadow DOM')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>35</td>
+   <td>{{CompatGeckoDesktop("28")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>26</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>37</td>
+   <td>{{CompatGeckoMobile("28")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Wenn Shadow DOM nicht in Firefox aktiviert ist, verhalten sich <code>&lt;shadow&gt;</code> Elemente wie {{domxref("HTMLUnknownElement")}}. Shadow DOM wurde erstmals in Firefox 33 implementiert und steckt hinter der Einstellung <code>dom.webcomponents.enabled</code>, welche standardmäßig aktiviert ist.</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Web_Components">Web Components</a></li>
+ <li>{{HTMLElement("content")}}, {{HTMLElement("template")}}, {{HTMLElement("element")}}</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/de/web/html/element/strong/index.html b/files/de/web/html/element/strong/index.html
new file mode 100644
index 0000000000..dfa167e89a
--- /dev/null
+++ b/files/de/web/html/element/strong/index.html
@@ -0,0 +1,49 @@
+---
+title: strong
+slug: Web/HTML/Element/strong
+tags:
+  - HTML
+  - HTML Elemente
+  - HTML Referenz
+translation_of: Web/HTML/Element/strong
+---
+<div class="note">
+<p><strong>Hinweis:</strong> Dieser Artikel ist nicht vollständig.</p>
+</div>
+
+<p>Das HTML <code>&lt;strong&gt;</code> Element gibt dem Text eine starke Betonung. Typischerweise wird dieser dann in Fettdruck dargestellt.</p>
+
+<h3 id="DOM_Interface">DOM Interface</h3>
+
+<p>Dieses Element implementiert das <code><a href="/de/DOM/element" title="de/DOM/element">HTMLElement</a></code> Interface.</p>
+
+<div class="note">
+<p><strong>Implementationshinweis:</strong> Bis einschließlich Gecko 1.9.2 implementiert Firefox das <a href="/de/DOM/span" title="de/DOM/span"><span style="font-family: courier new;">HTMLSpanElement</span></a> Interface für dieses Element.</p>
+</div>
+
+<h4 id="Beispiel">Beispiel</h4>
+
+<pre class="eval">   &lt;p&gt;
+
+       Wenn x ausgeführt werden soll, ist es &lt;strong&gt;notwendig&lt;/strong&gt; vorher y auszuführen.
+
+   &lt;/p&gt;
+</pre>
+
+<h4 id="Ergebnis">Ergebnis</h4>
+
+<p>Wenn x augeführt werden soll, ist es <strong>notwendig</strong> vorher y auszuführen.</p>
+
+<h3 id="Bold_vs._Strong">Bold vs. Strong</h3>
+
+<p>Meist ist es besonders für neue Entwickler verwunderlich, warum es so viele Wege gibt, ein und die selbe Sache auszudrücken. <code>&lt;b&gt;</code> und <code>&lt;strong&gt;</code> ist ein gutes Beispiel dafür. Warum &lt;strong&gt;&lt;/strong&gt; gegenüber &lt;b&gt;&lt;/b&gt; bevorzugen? Der Tag-Name ist doch länger und es wird letztlich das gleiche angezeigt.</p>
+
+<p>Vielleicht nicht ganz, denn <code>strong</code> ist eine logische und <code>bold</code> eine äußerliche Aussage. Logische Aussagen trennen Präsentation vom Inhalt und daher bieten sie mehr Möglichkeiten zum Ausdruck eines betonten Texts. Anstatt den Text einfach nur in Fettdruck darzustellen, könnte <code>&lt;strong&gt;</code> auch rot, in größerer Schrift, unterstrichen oder in einer anderen Art dargestellt werden. Es macht mehr Sinn die Präsentationseigenschaften von strong zu verändern als die von bold. Das kommt daher, weil bold eine äußerliche Aussage tätigt und keine Trennung von Präsentation und Inhalt stattfindet. Eine Änderung an der äußerlichen Gestaltung von bold, welche bold z.B. nicht mehr als Fettdruck gestalten würde, wäre verwirrend und unlogisch.</p>
+
+<h3 id="Siehe_auch">Siehe auch</h3>
+
+<ul>
+ <li><a href="/de/HTML/Element/b" title="de/HTML/Element/b">HTML bold Element</a></li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/de/web/html/element/summary/index.html b/files/de/web/html/element/summary/index.html
new file mode 100644
index 0000000000..544ab58ab3
--- /dev/null
+++ b/files/de/web/html/element/summary/index.html
@@ -0,0 +1,106 @@
+---
+title: <summary>
+slug: Web/HTML/Element/summary
+tags:
+  - Element
+  - HTML
+  - HTML5
+  - Referenz
+  - Web
+  - Élément(2)
+translation_of: Web/HTML/Element/summary
+---
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Das HTML <em>summary </em>Element (<code>&lt;summary&gt;</code>) wird für Zusammenfassungen oder Legenden für den Inhalt eines {{HTMLElement("details")}} Elements verwendet.</p>
+
+<div class="note"><strong>Hinweis:</strong> Wenn das <code>&lt;summary&gt;</code> Element ausgelassen wird, wird stattdessen die Titelzeile des "details" Bereich genutzt.</div>
+
+<h2 id="Anwendung">Anwendung</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Erlaubter Inhalt</td>
+   <td><a href="/en/HTML/Content_categories#Phrasing_content" title="en/HTML/Content categories#Phrasing content">Formulierungsinhalt</a></td>
+  </tr>
+  <tr>
+   <td>Tag Auslassung</td>
+   <td>None, both the start tag and the end tag are mandatory.</td>
+  </tr>
+  <tr>
+   <td>Erlaubte Elternelemente</td>
+   <td>Das {{ HTMLElement("details") }} Element.</td>
+  </tr>
+  <tr>
+   <td>Standard</td>
+   <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#the-summary-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#the-summary-element">HTML5, section 4.11.2</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p><span style="line-height: 21px;">Dieses Element schließt nur </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globale Attribute</a><span style="line-height: 21px;"> ein.</span></p>
+
+<h2 id="DOM_Schnittstelle">DOM Schnittstelle</h2>
+
+<p>Dieses Element implementiert die <code><a href="/en/DOM/element" title="en/DOM/element">HTMLElement</a></code> Schnittstelle.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<details style="color: blue; margin-left: 15px; margin-bottom: 10px;">
+<p style="color: red;">In summation, get details from the link on the next line</p>
+</details>
+
+<p style="margin-bottom: 10px;">Siehe {{HTMLElement("details")}} Seite für Beispiele des &lt;summary&gt; Elements.</p>
+
+<h2 id="Specifications" name="Specifications">Spezifikation</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'interactive-elements.html#the-summary-element', '&lt;summary&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'interactive-elements.html#the-summary-element', '&lt;summary&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p> </p>
+
+<p>{{Compat("html.elements.summary")}}</p>
+
+<p> </p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<p> </p>
+
+<ul>
+ <li>{{ HTMLElement("details") }}</li>
+</ul>
+
+<p> </p>
+
+<div class="noinclude">{{ languages({ "de": "de/HTML/Element/summary", "ja": "ja/HTML/Element/summary" }) }}</div>
+
+<p> </p>
+
+<div class="noinclude">{{HTMLRef}}</div>
diff --git a/files/de/web/html/element/table/index.html b/files/de/web/html/element/table/index.html
new file mode 100644
index 0000000000..51e7e3b93f
--- /dev/null
+++ b/files/de/web/html/element/table/index.html
@@ -0,0 +1,448 @@
+---
+title: <table>
+slug: Web/HTML/Element/table
+tags:
+  - Element
+  - Reference
+  - Tables
+  - Web
+translation_of: Web/HTML/Element/table
+---
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+
+<p>Das <em>HTML-Tabellen-Element </em>(<code>&lt;table&gt;</code>) repräsentiert Daten in zwei oder mehr Dimensionen.</p>
+
+<div class="note"><strong>Hinweis: </strong>Bevor es <a href="/en-US/docs/CSS" title="CSS">CSS</a> gab, wurden HTML-{{HTMLElement("table")}}-Elemente oft für das Seitenlayout verwendet. Von dieser Nutzung wird seit HTML 4 abgeraten, und das {{HTMLElement("table")}}-Element <strong style="font-weight: bold;">sollte nicht</strong> für Layoutzwecke verwendet werden.</div>
+
+<h2 id="Nutzungskontext">Nutzungskontext</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content categories">Inhaltskategorien</a></td>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Fließ-Inhalt</a></td>
+  </tr>
+  <tr>
+   <td>Erlaubter Inhalt</td>
+   <td>
+    <div class="content-models">
+    <div id="table-mdls">In dieser Reihenfolge:
+    <ul>
+     <li>ein optionales {{HTMLElement("caption")}}-Element,</li>
+     <li>null oder mehr {{HTMLElement("colgroup")}}-Elemente,</li>
+     <li>ein optionales {{HTMLElement("thead")}}-Element,</li>
+     <li>eine der beiden Alternativen:
+      <ul>
+       <li>ein {{HTMLElement("tfoot")}}-Element, gefolgt von:
+        <ul>
+         <li>null oder mehr {{HTMLElement("tbody")}}-Elementen,</li>
+         <li>oder einem oder mehr {{HTMLElement("tr")}}-Elementen,</li>
+        </ul>
+       </li>
+       <li>eine zweite Alternative gefolgt von einem optionalen {{HTMLElement("tfoot")}}-Element:
+        <ul>
+         <li>entweder null oder mehr {{HTMLElement("tbody")}}-Elemente,</li>
+         <li>oder ein oder mehr {{HTMLElement("tr")}}-Elemente</li>
+        </ul>
+       </li>
+      </ul>
+     </li>
+    </ul>
+    </div>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td>Tag-Auslassung</td>
+   <td>Keine, sowohl das Start-Tag als auch das End-Tag sind Pflicht</td>
+  </tr>
+  <tr>
+   <td>Erlaubte Eltern-Elemente</td>
+   <td>Jedes Element, das Fließ-Inhalt akzeptiert</td>
+  </tr>
+  <tr>
+   <td>Normatives Dokument</td>
+   <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-table-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-table-element">HTML5, Abschnitt 4.9.1</a> (<a class="external" href="http://www.w3.org/TR/REC-html40/struct/tables.html#edef-TABLE" title="http://www.w3.org/TR/REC-html40/struct/tables.html#edef-TABLE">HTML4.01, Abschnitt 11.2.1</a>)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p><span style="line-height: 21px;">Dieses Element beinhaltet die </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globalen Attribute</a><span style="line-height: 21px;">.</span></p>
+
+<dl>
+ <dt>{{htmlattrdef("align")}} {{Deprecated_inline}}</dt>
+ <dd>Dieses aufgezählte Attribut gibt an, wie die Tabelle im beinhaltenden Dokument ausgerichtet werden muss. Es kann die folgenden Werte haben:
+ <ul>
+  <li><span>left</span>, bedeutet, dass die Tabelle links im Dokument angezeigt werden soll;</li>
+  <li><span>center</span>, bedeutet, dass die Tabelle mittig im Dokument angezeigt werden soll;</li>
+  <li><span>right</span>, bedeutet, dass die Tabelle rechts im Dokument angezeigt werden soll.</li>
+ </ul>
+
+ <div class="note"><strong>Hinweis: </strong>
+
+ <ul>
+  <li><strong>Verwenden Sie dieses Attribut nicht</strong>, da es überholt ist: das {{HTMLElement("table")}}-Element sollte mit <a href="/en-US/docs/CSS" title="CSS">CSS</a> angepasst werden. Um einen ähnlichen Effekt zu erreichen wie mit dem align-Attribut, sollten die <a href="/en-US/docs/CSS" title="CSS">CSS</a>-Eigenschaften "text-align" und "vertical-align" verwendet werden.</li>
+  <li>Vor Firefox 4 unterstützte Firefox, nur im Quirks-Modus, auch die Werte <code>middle</code>, <code>absmiddle</code>, und <code>abscenter</code> als Synonyme von <code>center</code><em>.  </em></li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("bgcolor")}} {{Deprecated_inline}}</dt>
+ <dd>Dieses Attribut definiert die Hintergrundsfarbe von der Tabelle und deren Inhalt. Die Farbe entspricht einem 6-stelligen Hexadezimalcode definiert in <a class="external" href="http://www.w3.org/Graphics/Color/sRGB" title="http://www.w3.org/Graphics/Color/sRGB">sRGB</a> mit einem vorangestellten '#'. Es kann auch einer der sechszehn vordefinierten Farbnamen benutzt werden:
+ <table>
+  <tbody>
+   <tr>
+    <td style="width: 24px; background-color: black;"> </td>
+    <td><span>black</span> = "#000000"</td>
+    <td style="width: 24px; background-color: green;"> </td>
+    <td><span>green</span> = "#008000"</td>
+   </tr>
+   <tr>
+    <td style="width: 24px; background-color: silver;"> </td>
+    <td><span>silver</span> = "#C0C0C0"</td>
+    <td style="width: 24px; background-color: lime;"> </td>
+    <td><span>lime</span> = "#00FF00"</td>
+   </tr>
+   <tr>
+    <td style="width: 24px; background-color: gray;"> </td>
+    <td><span>gray</span> = "#808080"</td>
+    <td style="width: 24px; background-color: olive;"> </td>
+    <td><span>olive</span> = "#808000"</td>
+   </tr>
+   <tr>
+    <td style="width: 24px; background-color: white;"> </td>
+    <td><span>white</span> = "#FFFFFF"</td>
+    <td style="width: 24px; background-color: yellow;"> </td>
+    <td><span>yellow</span> = "#FFFF00"</td>
+   </tr>
+   <tr>
+    <td style="width: 24px; background-color: maroon;"> </td>
+    <td><span>maroon</span> = "#800000"</td>
+    <td style="width: 24px; background-color: navy;"> </td>
+    <td><span>navy</span> = "#000080"</td>
+   </tr>
+   <tr>
+    <td style="width: 24px; background-color: red;"> </td>
+    <td><span>red</span> = "#FF0000"</td>
+    <td style="width: 24px; background-color: blue;"> </td>
+    <td><span>blue</span> = "#0000FF"</td>
+   </tr>
+   <tr>
+    <td style="width: 24px; background-color: purple;"> </td>
+    <td><span>purple</span> = "#800080"</td>
+    <td style="width: 24px; background-color: teal;"> </td>
+    <td><span>teal</span> = "#008080"</td>
+   </tr>
+   <tr>
+    <td style="width: 24px; background-color: fuchsia;"> </td>
+    <td><span>fuchsia</span> = "#FF00FF"</td>
+    <td style="width: 24px; background-color: aqua;"> </td>
+    <td><span>aqua</span> = "#00FFFF"</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note"><strong>Gebrauchshinweis:</strong> Es wird von der Benutzung dieses Attributs abgeraten, da es veraltet ist. Das {{HTMLElement("table")}} Element sollte mit <a href="/de/docs/Web/CSS" title="CSS">CSS</a> formatiert werden. Um einen ähnlichen Effekt zu erzielen sollte das <a href="/de/docs/Web/CSS" title="CSS">CSS </a>Attribut {{cssxref("background-color")}} verwendet werden.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("border")}} {{Deprecated_inline}}</dt>
+ <dd>Dieser Integer Wert definiert die Breite des Rahmens in Pixeln. Wenn er auf <span>0</span> gesetzt wird, dann impliziert es, dass das {{htmlattrxref("frame", "table")}} Attribut auf <span>void</span> gesetzt ist.
+ <div class="note"><strong>Gebrauchshinweis: </strong> Es wird von der Benutzung dieses Attributs abgeraten, da es veraltet ist. Das {{HTMLElement("table")}} Element sollte mit <a href="/de/docs/Web/CSS" title="CSS">CSS</a> formatiert werden.. Um einen ähnlichen Effekt wie das border Attribut zu erzielen sollten die <a href="/de/docs/Web/CSS" title="CSS">CSS</a> Eigenschaften {{cssxref("border")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}} und{{cssxref("border-style")}} benutzt werden.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("cellpadding")}} {{Deprecated_inline}}</dt>
+ <dd>This attribute defines the space between the content of a cell and the border, displayed or not, of it. If it is a pixel length, this pixel-sized space will be applied on all four sides; if it is a percentage length, the content will be centered and the total vertical space (top and bottom) will represent this percentage. The same is true for the total horizontal space (left and right).
+ <div class="note"><strong>Usage note: </strong>Do not use this attribute, as it has been deprecated: the {{HTMLElement("table")}} element should be styled using <a href="/en-US/docs/CSS" title="CSS">CSS</a>. To give a similar effect than the <span>border</span> attribute, use the <a href="/en-US/docs/CSS" title="CSS">CSS</a> property {{cssxref("border-collapse")}} with the value collapse on the  {{HTMLElement("table")}} element itself, and the property {{cssxref("padding")}} on the {{HTMLElement("td")}}.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("cellspacing")}} {{Deprecated_inline}}</dt>
+ <dd>This attribute defines the size, in percentage or in pixels, of the space between two cells (both horizontally and vertically), between the top of the table and the cells of the first row, the left of the table and the first column, the right of the table and the last column and the bottom of the table and the last row.
+ <div class="note"><strong>Usage note: </strong>Do not use this attribute, as it has been deprecated: the {{HTMLElement("table")}} element should be styled using <a href="/en-US/docs/CSS" title="CSS">CSS</a>. To give a similar effect than the <span>border</span> attribute, use the <a href="/en-US/docs/CSS" title="CSS">CSS</a> property {{cssxref("border-collapse")}} with the value collapse on the  {{HTMLElement("table")}} element itself, and the property {{cssxref("margin")}} on the {{HTMLElement("td")}} element.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("frame")}} {{Deprecated_inline}}</dt>
+ <dd>This enumerated attribute defines which side of the frame surrounding the table must be displayed. It may have the following values:
+ <table style="width: 668px;">
+  <tbody>
+   <tr>
+    <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td>
+    <td><span>above</span></td>
+    <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td>
+    <td><span>below</span></td>
+   </tr>
+   <tr>
+    <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td>
+    <td><span>hsides</span></td>
+    <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td>
+    <td><span>vsides</span></td>
+   </tr>
+   <tr>
+    <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td>
+    <td><span>lhs</span></td>
+    <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td>
+    <td><span>rhs</span></td>
+   </tr>
+   <tr>
+    <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td>
+    <td><span>border</span></td>
+    <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td>
+    <td><span>box</span></td>
+   </tr>
+   <tr>
+    <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td>
+    <td><span>void</span></td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note"><strong>Usage note: </strong>Do not use this attribute, as it has been deprecated: the {{HTMLElement("table")}} element should be styled using <a href="/en-US/docs/CSS" title="CSS">CSS</a>. To give a similar effect than the <span>frame</span> attribute, use the <a href="/en-US/docs/CSS" title="CSS">CSS</a> properties {{cssxref("border-style")}} and {{cssxref("border-width")}}.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("rules")}} {{Deprecated_inline()}}</dt>
+ <dd>This enumerated attribute defines where rules, i.e. lines, should appear in a table. It can have the following values:
+ <ul>
+  <li><span>none</span>, which indicates the no rules will be displayed; it is the default value;</li>
+  <li><span>groups</span>, which will make the rules to be displayed between row groups (defined by the {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} and {{HTMLElement("tfoot")}} elements) and between column groups (defined by the {{HTMLElement("col")}} and {{HTMLElement("colgroup")}} elements) only;</li>
+  <li><span>rows</span>, which will make the rules to be displayed between rows;</li>
+  <li><span>columns</span>, which will make the rules to be displayed between columns;</li>
+  <li><span>all</span>, which wil make the rules to be displayed between rows and columns.</li>
+ </ul>
+
+ <div class="note"><strong>Note</strong>:
+
+ <ul>
+  <li>The styling of the rules is browser-dependant and cannot be modified.</li>
+  <li>Do not use this attribute, as it has been deprecated: the rules should be defined and styled using <a href="/en-US/docs/CSS" title="CSS">CSS</a>. use the <a href="/en-US/docs/CSS" title="CSS">CSS</a> property {{cssxref("border")}} on the adequate {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("col")}} or {{HTMLElement("colgroup")}} elements.</li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("summary")}} {{Deprecated_inline}}</dt>
+ <dd>This attribute defines an alternative text use to describe the table in user-agent unable to display it. Typically, it contents a description of it to allow visually impaired people, like blind people browsing the web using Braille screen, to get the information in it. If the information added in this attribute may also be useful for non-visually impaired people, consider using the {{HTMLElement("caption")}} instead. The summary attribute is not mandatory and may be omitted when a {{HTMLElement("caption")}} element fulfills its role.
+ <div class="note"><strong>Usage Note: </strong>Do not use this attribute, as it has been deprecated. Instead, use one of these way of describing a table:
+ <ul>
+  <li>In prose, surrounding the table (this is the less semantic-conveying way of doing it).</li>
+  <li>In the table's {{HTMLElement("caption")}} element.</li>
+  <li>In a {{HTMLElement("details")}} element, inside the table's {{HTMLElement("caption")}} element.</li>
+  <li>Include the {{HTMLElement("table")}} element in a {{HTMLElement("figure")}} element and add the description in prose next to it.</li>
+  <li>Include the {{HTMLElement("table")}} element in a {{HTMLElement("figure")}} element and add the description in prose inside a {{HTMLElement("figcaption")}} element.</li>
+  <li>Adjust the table so that such description is no more needed, by using {{HTMLElement("th")}} and {{HTMLElement("thead")}} elements for example.</li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("width")}} {{Deprecated_inline}}</dt>
+ <dd>This attribute defines the width of the table. It may either be a pixel length or a percentage value, representing the percentage of the width of its container that the table should use.
+ <div class="note"><strong>Usage Note: </strong>Do not use this attribute, as it has been deprecated: the rules should be defined and styled using <a href="/en-US/docs/CSS" title="CSS">CSS</a>. use the <a href="/en-US/docs/CSS" title="CSS">CSS</a> property {{cssxref("width")}} instead.</div>
+ </dd>
+</dl>
+
+<h2 id="DOM_interface">DOM interface</h2>
+
+<p>This element implements the <code><a href="/en-US/docs/DOM/HTMLTableElement" title="DOM/HTMLTableElement">HTMLTableElement</a></code> interface.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einfache_Tabelle">Einfache Tabelle</h3>
+
+<pre class="brush: html" style="font-size: 12px;">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Max&lt;/td&gt;
+    &lt;td&gt;Mustermann&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Maxine&lt;/td&gt;
+    &lt;td&gt;Mustermann&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<p><span style="line-height: 1.5;">{{ EmbedLiveSample('Einfache_Tabelle', '100%', '100') }}</span></p>
+
+<h3 id="Weitere_Beispiele">Weitere Beispiele</h3>
+
+<pre class="brush: html">&lt;p&gt;Einfache Tabelle mit Überschrift&lt;/p&gt;
+&lt;table&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Vorname&lt;/th&gt;
+    &lt;th&gt;Nachname&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Max&lt;/td&gt;
+    &lt;td&gt;Mustermann&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Maxine&lt;/td&gt;
+    &lt;td&gt;Mustermann&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+
+&lt;p&gt;Tabelle mit thead, tfoot, and tbody&lt;/p&gt;
+&lt;table&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th&gt;Header content 1&lt;/th&gt;
+      &lt;th&gt;Header content 2&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tfoot&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Footer content 1&lt;/td&gt;
+      &lt;td&gt;Footer content 2&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tfoot&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Body content 1&lt;/td&gt;
+      &lt;td&gt;Body content 2&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+
+&lt;p&gt;Tabelle mit colgroup&lt;/p&gt;
+&lt;table&gt;
+  &lt;colgroup span="4" class="columns"&gt;&lt;/colgroup&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Länder&lt;/th&gt;
+    &lt;th&gt;Hauptstädte&lt;/th&gt;
+    &lt;th&gt;Bevölkerung&lt;/th&gt;
+    &lt;th&gt;Sprache&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;USA&lt;/td&gt;
+    &lt;td&gt;Washington D.C.&lt;/td&gt;
+    &lt;td&gt;309 Millionen&lt;/td&gt;
+    &lt;td&gt;Englisch&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Schweden&lt;/td&gt;
+    &lt;td&gt;Stockholm&lt;/td&gt;
+    &lt;td&gt;9 Millionen&lt;/td&gt;
+    &lt;td&gt;Schwedisch&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+
+&lt;p&gt;Tabelle mit colgroup und col&lt;/p&gt;
+&lt;table&gt;
+  &lt;colgroup&gt;
+    &lt;col class="column1"&gt;
+    &lt;col class="columns2plus3" span="2"&gt;
+  &lt;/colgroup&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Limone&lt;/th&gt;
+    &lt;th&gt;Zitrone&lt;/th&gt;
+    &lt;th&gt;Orange&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Grün&lt;/td&gt;
+    &lt;td&gt;Gelb&lt;/td&gt;
+    &lt;td&gt;Orange&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+
+&lt;p&gt;Einfache Tabelle mit Beschreibung&lt;/p&gt;
+&lt;table&gt;
+  &lt;caption&gt;Unglaublich tolle Beschreibung&lt;/caption&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Unglaublich tolle Daten&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">table
+{
+border-collapse: collapse;
+border-spacing: 0px;
+}
+table, th, td
+{
+padding: 5px;
+border: 1px solid black;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Weitere_Beispiele', '100%', '800') }}</p>
+
+<h2 id="Browser_Kompabilität">Browser Kompabilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>4.0</td>
+   <td>7.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Other table-related HTML Elements: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li>
+ <li>CSS properties that may be specially useful to style the <span style="font-family: courier new;">&lt;table&gt;</span> element:
+  <ul>
+   <li>{{cssxref("width")}} to control the width of the table;</li>
+   <li>{{cssxref("border")}}, {{cssxref("border-style")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}}, {{cssxref("border-collapse")}}, {{cssxref("border-spacing")}} to control the aspect of cell borders, rules and frame;</li>
+   <li>{{cssxref("margin")}} and {{cssxref("padding")}} to style the individual cell content;</li>
+   <li>{{cssxref("text-align")}} and {{cssxref("vertical-align")}} to define alignment of text and cell content.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/de/web/html/element/td/index.html b/files/de/web/html/element/td/index.html
new file mode 100644
index 0000000000..762d531a13
--- /dev/null
+++ b/files/de/web/html/element/td/index.html
@@ -0,0 +1,218 @@
+---
+title: '<td>: The Table Data Cell element'
+slug: Web/HTML/Element/td
+translation_of: Web/HTML/Element/td
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">The <strong>HTML <code>&lt;td&gt;</code> Element</strong> definiert eine Zelle in einer Datentabelle. Es ist Teil des  <em>table model</em>.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/td.html","tabbed-taller")}}</div>
+
+<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th>
+   <td>Sectioning root.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubter Inhalt</th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag Wegfall</th>
+   <td>Der Start-Tag ist erforderlich.<br>
+    Der Ende Tag kann weggelassen werden, wenn direkt ein {{HTMLElement("th")}}  oder  ein {{HTMLElement("td")}} folgt oder wenn in seinem 'parent element' keine weiteren Daten enthalten sind.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte parents</th>
+   <td>Ein {{HTMLElement("tr")}} Element.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte ARIA Funktionen</th>
+   <td>Alle</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM Interface</th>
+   <td>{{domxref("HTMLTableDataCellElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<p>Dieses Element enthält die <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("abbr")}} {{obsolete_inline("html5")}}</dt>
+ <dd>Dieses Attribut enthält eine Kurzbeschreibung des Inhalts der Zelle. Einige user-agents, wie z.B Sparchausgabe Apps, können diese Beschreibung vor dem Inhalt selbst anzeigen.
+ <div class="note"><strong>Hinweis:</strong> Verwenden Sie diese Eigenschaft nicht mehr, da sie von dem neuesten Standard nicht mehr unterstützt wird. Alternativ können Sie die Kurzbeschreibung in die Zelle selbst stellen und den vollständigen Inhalt in die <strong>title</strong>-Eigenschaft schreiben.</div>
+ </dd>
+ <dt>{{htmlattrdef("align")}} {{obsolete_inline("html5")}}</dt>
+ <dd>Diese Listen Attribute legen fest, we der Zellinhalt waagerecht ausgerichtet wird. Mögliche Werte sind:
+ <ul>
+  <li><code>left</code>: Der Inhalt wird links in der Zelle ausgerichtet.</li>
+  <li><code>center</code>: Der inhalt wird innerhalb der Zelle zentriert.</li>
+  <li><code>right</code>: Der Inhalt wird innerhalb der Zelle rechts ausgerichtet.</li>
+  <li><code>justify</code> (nur bei Text): Der Inhalt wird über die gesamte Breite der Zelle gedehnt.</li>
+  <li><code>char</code> (nur bei Text):  Der Inhalt wird mit minimalem Offset an einem Zeichen innerhalb der des  <code>&lt;th&gt;</code> Elementes ausgerichtet. Das Zeichen wird durch die {{htmlattrxref("char", "td")}}  und  {{htmlattrxref("charoff", "td")}} definiert. {{unimplemented_inline(2212)}}.</li>
+ </ul>
+
+ <p>Der Default Wert, wenn das Attribut nicht spezifiziert wird ist <code>left</code>.</p>
+
+ <div class="note"><strong>Hinweis: </strong>Verwenden Sie diese Eigenschaft nicht mehr, da sie von dem neuesten Standard nicht mehr unterstützt wird.
+
+ <ul>
+  <li>Um den gleichen Effekt wie mit den  <code>left</code>, <code>center</code>, <code>right</code> oder <code>justify</code> Werten zu erhalten, verwenden Sie die CSS {{cssxref("text-align")}} Eigenschaft für dieses Element.</li>
+  <li>Um den gleichen Effekt wie bei dem <code>char</code> Wert zu erzielen, geben Sie der {{cssxref("text-align")}} Eigenschaft die gleichen Werte, die Sie auch für das {{htmlattrxref("char", "td")}} Attribut verwendet hätten.<br>
+   {{unimplemented_inline}} in CSS3.</li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("axis")}} {{obsolete_inline("html5")}}</dt>
+ <dd> Dieses Attribute enthält eine Liste von strings, durch Leerzeichen getrennt. Jeder String ist die <code>id</code>  einer Gruppe von Zellen, die diesen Text als Header enthalten.
+ <div class="note"><strong>Hinweis:</strong> Verwenden Sie diese Eigenschaft nicht mehr, da sie von dem neuesten Standard nicht mehr unterstützt wird.</div>
+ </dd>
+ <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt>
+ <dd>Dieses Attribut definiert die Hintergrundfarbe jeder Zelle in einer Spalte. Es enthält einen 6-stelligen Hexadezimal-Code in <a href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a> definiert mit einem vorangestellten '#'. Für dieses Attribut sind die folgenden 16 Werte mit string-Werten vordefiniert:
+ <table>
+  <tbody>
+   <tr>
+    <td style="background-color: black; width: 24px; height: 24px; border: 1px solid black;"></td>
+    <td><code>black</code> = "#000000"</td>
+    <td style="background-color: green; width: 24px; height: 24px; border: 1px solid black;"></td>
+    <td><code>green</code> = "#008000"</td>
+   </tr>
+   <tr>
+    <td style="background-color: silver; width: 24px; height: 24px; border: 1px solid black;"></td>
+    <td><code>silver</code> = "#C0C0C0"</td>
+    <td style="background-color: lime; width: 24px; height: 24px; border: 1px solid black;"></td>
+    <td><code>lime</code> = "#00FF00"</td>
+   </tr>
+   <tr>
+    <td style="background-color: gray; width: 24px; height: 24px; border: 1px solid black;"></td>
+    <td><code>gray</code> = "#808080"</td>
+    <td style="background-color: olive; width: 24px; height: 24px; border: 1px solid black;"></td>
+    <td><code>olive</code> = "#808000"</td>
+   </tr>
+   <tr>
+    <td style="background-color: white; width: 24px; height: 24px; border: 1px solid black;"></td>
+    <td><code>white</code> = "#FFFFFF"</td>
+    <td style="background-color: yellow; width: 24px; height: 24px; border: 1px solid black;"></td>
+    <td><code>yellow</code> = "#FFFF00"</td>
+   </tr>
+   <tr>
+    <td style="background-color: maroon; width: 24px; height: 24px; border: 1px solid black;"></td>
+    <td><code>maroon</code> = "#800000"</td>
+    <td style="background-color: navy; width: 24px; height: 24px; border: 1px solid black;"></td>
+    <td><code>navy</code> = "#000080"</td>
+   </tr>
+   <tr>
+    <td style="background-color: red; width: 24px; height: 24px; border: 1px solid black;"></td>
+    <td><code>red</code> = "#FF0000"</td>
+    <td style="background-color: blue; width: 24px; height: 24px; border: 1px solid black;"></td>
+    <td><code>blue</code> = "#0000FF"</td>
+   </tr>
+   <tr>
+    <td style="background-color: purple; width: 24px; height: 24px; border: 1px solid black;"></td>
+    <td><code>purple</code> = "#800080"</td>
+    <td style="background-color: teal; width: 24px; height: 24px; border: 1px solid black;"></td>
+    <td><code>teal</code> = "#008080"</td>
+   </tr>
+   <tr>
+    <td style="background-color: fuchsia; width: 24px; height: 24px; border: 1px solid black;"></td>
+    <td><code>fuchsia</code> = "#FF00FF"</td>
+    <td style="background-color: aqua; width: 24px; height: 24px; border: 1px solid black;"></td>
+    <td><code>aqua</code> = "#00FFFF"</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note"><strong>Hinweis:</strong> Verwnden Sie dieses Attribut nicht, da es kein Standard ist und nur in einigen Versionen des Microsoft Internet Explorers implementiert ist: Das {{HTMLElement("td")}} Element sollte mittels <a href="/en-US/docs/CSS">CSS</a> formatiert werden Um den gleichen Effekt zu erhalten verwenden Sie stattdessen die {{cssxref("background-color")}} Eigenschaft in <a href="/en-US/docs/CSS">CSS</a>.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("char")}} {{obsolete_inline("html5")}}</dt>
+ <dd> Der Inhalt der Zelle wird an einem Zeichen ausgerichtet. Typische Zeichen sind ein (.) oder (,) um Währungswerte auszurichten. Wenn {{htmlattrxref("align", "td")}} nicht als <code>char</code>, gesetzt ist, wird dieses Attribute ignoriert
+ <div class="note"><strong>Hinweis: </strong> Verwenden Sie diese Eigenschaft nicht mehr, da sie von dem neuesten Standard nicht mehr unterstützt wird.  Um den gleichen Effekt zu erzielen können Sie das Zeichen auch als ersten Wert der {{cssxref("text-align")}} Eigenschaft definieren. <br>
+ {{unimplemented_inline}} in CSS3.</div>
+ </dd>
+ <dt>{{htmlattrdef("charoff")}} {{obsolete_inline("html5")}}</dt>
+ <dd>Dieses Attribut wird verwendet um die Daten einer Spalte rechts von dem Zeichen auszurichten, das durch das <strong>char</strong> Attribut spezifiziert wurde. Sein Wert spezifiziert die Anzahl der Zeichen um die die Daten nach rechts verschoben werden.
+ <div class="note"><strong>Hinweis: </strong>Verwenden Sie diese Eigenschaft nicht mehr, da sie von dem neuesten Standard nicht mehr unterstützt wird.</div>
+ </dd>
+ <dt>{{htmlattrdef("colspan")}}</dt>
+ <dd>Dieses Attribut enhält eine nicht negative ganze Zahl, die festlegt über wieviele Spalten einer Tabelle sich diese Zelle erstreckt. Der Default-Wert ist <code>1</code>. Größere Werte als 1000 werden nicht akzeptiert und auf den Default-Wert zurückgesetzt (1).</dd>
+ <dt>{{htmlattrdef("headers")}}</dt>
+ <dd>Diese Attribut enthält eine durch Leerzeichen getrennte Liste von Strings, von denen jeder mit dem <strong>id</strong> Attribut des {{HTMLElement("th")}} Elementes korrespondiert.</dd>
+ <dt>{{htmlattrdef("height")}} {{Deprecated_inline("html 4")}}, {{obsolete_inline("html5")}}</dt>
+ <dd>Dieses Attribut wird verwendet um die Höhe einer Zelle festzulegen.
+ <div class="note"><strong>Hinweis:</strong> DVerwenden Sie diese Eigenschaft nicht mehr, da sie von dem neuesten Standard nicht mehr unterstützt wird. Verwenden Sie stattdessen die  {{cssxref("height")}} Eigenschaft.</div>
+ </dd>
+ <dt>{{htmlattrdef("rowspan")}}</dt>
+ <dd>Dieses Attribut enthält einen nicht negativen ganzahligen Integer Wert, der festlegt, über wieviele Reihen sich eine Zelle erstreckt. Der Default-Wert ist <code>1</code>; wenn der Wert auf <code>0</code>  gesetzt wird, erstreckt sich die Größe der Zelle über den Rest der Tabelle zu der die Zelle gehört auch wenn die Attribute ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}), implizit definiert sind. Werte über 65534 werden auf 65534 gesetzt.</dd>
+ <dt>{{htmlattrdef("scope")}} {{obsolete_inline("html5")}}</dt>
+ <dd>Dieses Listen Attribut definiert die Zellen, auf die sich das Header-Element bezieht, dass in dem {{HTMLElement("th")}} Element, definiert wurde.
+ <div class="note"><strong>Hinweis:</strong> Verwenden Sie diese Eigenschaft nicht mehr, da sie von dem neuesten Standard nicht mehr unterstützt wird. Verwenden Sie diesesAttributenur mit dem  {{HTMLElement("th")}} Element um eine Reihe oder eine Spalte für die dieses der Header ist zu definieren.</div>
+ </dd>
+ <dt>{{htmlattrdef("valign")}} {{obsolete_inline("html5")}}</dt>
+ <dd>Dieses Attribut legt fest, wie ein Text vertikal innerhalb einer Zelle ausgerichtet ist. Mögliche Werte für dieses Attribut sind:
+ <ul>
+  <li><code>baseline</code>: Positioniert den Text mit der <a href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">baseline</a> der Zeichen am unteren Rand der aus und nicht mit dem unteren Ende der Zeichen. Gibt es keine Zeichen mit Anhängen unterhalb der Zeichengrundlinie, so hat dieser Wert den gleichen Effekt wie <code>bottom</code>.</li>
+  <li><code>bottom</code>: Positioniert den Text am unteren Rand in der Zelle</li>
+  <li><code>middle</code>: Zentriert den Text vertikal in der Zelle.</li>
+  <li>and <code>top</code>: Positioniert den Text am oberen Rand der Zelle.</li>
+ </ul>
+
+ <div class="note"><strong>Hinweis:</strong> Verwenden Sie diese Eigenschaft nicht mehr, da sie von dem neuesten Standard nicht mehr unterstützt wird. <br>
+ Verwenden Sie stattdessen die CSS {{cssxref("vertical-align")}} Eigenschaft.</div>
+ </dd>
+ <dt>{{htmlattrdef("width")}} {{Deprecated_inline("html 4")}}, {{obsolete_inline("html5")}}</dt>
+ <dd>Dieses Attribut defieniert die benötigte Breite der Zelle.  Zusätzlicher Platz kann mit Hilfe der <a href="/en-US/docs/Web/API/HTMLTableElement/cellSpacing">cellspacing</a> and <a href="/en-US/docs/Web/API/HTMLTableElement/cellPadding">cellpadding</a> Eigenschaftenerreicht werden. Mit Hilfe des {{HTMLElement("col")}} Elementes kann ebenfalls zusätzliche Breite erzeugt werden. Allerdings wird eine Zelle, die zu schmal für die passende Darstellung ihres Inhaltes, bei der Darstellung automatisch auf die richtige Breite erweitert.
+ <div class="note"><strong>Note:</strong> Verwenden Sie diese Eigenschaft nicht mehr, da sie von dem neuesten Standard nicht mehr unterstützt wird. <br>
+ Verwenden Sie stattdessen die CSS {{cssxref("width")}} Eigenschaft.</div>
+ </dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Siehe {{HTMLElement("table")}} für Beispiele für <code>&lt;td&gt;</code>.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','tables.html#the-td-element','td element')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C','tabular-data.html#the-td-element','td element')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("html.elements.td")}}</p>
+
+<h2 id="Sieh_auch">Sieh auch</h2>
+
+<ul>
+ <li>Other table-related HTML Elements: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}.</li>
+</ul>
diff --git a/files/de/web/html/element/template/index.html b/files/de/web/html/element/template/index.html
new file mode 100644
index 0000000000..8a6a29e26e
--- /dev/null
+++ b/files/de/web/html/element/template/index.html
@@ -0,0 +1,186 @@
+---
+title: <template>
+slug: Web/HTML/Element/template
+tags:
+  - Element
+  - HTML
+  - Referenz
+  - Web
+  - Web Components
+translation_of: Web/HTML/Element/template
+---
+<h2 id="Summary" name="Summary">Zusammenfassung</h2>
+
+<p><span class="seoSummary">Das <strong><a href="/en-US/docs/Web/HTML">HTML</a> template-Element <code>&lt;template&gt;</code></strong> dient dazu, Client-seitige Inhalte zu gruppieren, die nicht gerendert werden, wenn die Seite geladen wird, sondern anschließend zur Laufzeit mittels JavaScript gerendert werden können.</span></p>
+
+<p>Template kann als Inhaltsfragment aufgefasst werden, das für eine spätere Verwendung im Dokument gespeichert wird. Die Inhalte von <strong><code>&lt;template&gt;</code></strong> werden allerdings beim Laden der Seite geparst, um Ihre Validität sicher zu stellen.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorien</a></th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Metadata_content">Metadata content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">phrasing content</a>, script-supporting element</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte Inhalte</th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Metadata_content">Metadata content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content, </a>jeder gültige HTML Inhalt, der innerhalb der folgenden Elemente {{HTMLElement("ol")}}, {{HTMLElement("dl")}}, {{HTMLElement("figure")}}, {{HTMLElement("ruby")}}, {{HTMLElement("object")}}, {{HTMLElement("video")}}, {{HTMLElement("audio")}}, {{HTMLElement("table")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("tr")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("select")}}, {{HTMLElement("details")}} erlaubt ist und {{HTMLElement("menu")}}, dessen type-Attribut sich im Zustand popup menu befindet.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted parent elements</th>
+   <td>{{HTMLElement("body")}}, {{HTMLElement("frameset")}}, {{HTMLElement("head")}} und {{HTMLElement("colgroup")}} ohne <code>span</code> Attribut</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLTemplateElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes" name="Attributes">Attribute</h2>
+
+<p>Das Element beinhaltet die <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p>
+
+<p>Es gibt auch ein <code>content</code> Attribut, das nur read-only, also nur leseberechtigt ist. Dieses Attribut gewährt Zugriff auf die Inhalte von template. Das <code>content</code> Attribut wird oftmals genutzt, um den Browser-Support eines bestimmten Browsers für das <strong><code>&lt;template&gt;</code> </strong>Element festzustellen.</p>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<p>Im Folgenden zuerst der HTML Code des Beispiels:</p>
+
+<pre class="brush: html">&lt;table id="producttable"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;td&gt;UPC_Code&lt;/td&gt;
+      &lt;td&gt;Product_Name&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;!-- existierende Daten könnten optional hier eingefügt werden --&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+
+&lt;template id="productrow"&gt;
+  &lt;tr&gt;
+    &lt;td class="record"&gt;&lt;/td&gt;
+    &lt;td&gt;&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/template&gt;
+</pre>
+
+<p>Im Weiteren der JavaScript Code, mit dem der HTML Code instantiiert werden könnte:</p>
+
+<pre class="brush:js;">// Browsersupport-Check, indem die Existenz des content Attributs
+// des template Elements geprüft wird.
+if ('content' in document.createElement('template')) {
+
+  // Tabelle mit dem existierenden HTML tbody und der Zeile (row) aus dem template Element instantiieren
+  var t = document.querySelector('#productrow'),
+  td = t.content.querySelectorAll("td");
+  td[0].textContent = "1235646565";
+  td[1].textContent = "Stuff";
+
+  // Neue Zeile (row) klonen und in die Tabelle einfügen
+  var tb = document.getElementsByTagName("tbody");
+  var clone = document.importNode(t.content, true);
+  tb[0].appendChild(clone);
+
+  // Neue Zeile erstellen
+  td[0].textContent = "0384928528";
+  td[1].textContent = "Acme Kidney Beans";
+
+  // Neue Zeile klonen und in die Tabelle einfügen
+  var clone2 = document.importNode(t.content, true);
+  tb[0].appendChild(clone2);
+
+} else {
+  // Wenn das HTML template element nicht unterstützt wird
+  // muss die Tabelle auf anderem Weg erzeugt werden
+}
+</pre>
+
+<p>Das Ergebnis ist die ursprüngliche HTML Tabelle, an die zwei neue Zeilen mittels JavaScript angehängt wurde.</p>
+
+<p><a href="http://jsbin.com/qimaw/1/">Hier</a> kann das live-Beispiel aufgerufen werden (Code kann <a href="http://jsbin.com/qimaw/1/edit">hier</a> eingesehen werden).</p>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikationen</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','/scripting-1.html#the-template-element','template element')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C','/scripting-1.html#the-template-element','template element')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompabilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>26</td>
+   <td>{{CompatGeckoDesktop("22")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>iOS 8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>Web components: {{HTMLElement("content")}}, {{HTMLElement("shadow")}}</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/de/web/html/element/th/index.html b/files/de/web/html/element/th/index.html
new file mode 100644
index 0000000000..fce82bc5ca
--- /dev/null
+++ b/files/de/web/html/element/th/index.html
@@ -0,0 +1,297 @@
+---
+title: <th>
+slug: Web/HTML/Element/th
+translation_of: Web/HTML/Element/th
+---
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Das  HTML Element<em> table header cell </em><code>&lt;th&gt;</code> defines a cell that is a header for a group of cells of a table. The group of cells that the header refers to is defined by the {{htmlattrxref("scope", "th")}} and {{htmlattrxref("headers", "th")}} attribute.</p>
+
+<h2 id="Gebrauchsübersicht">Gebrauchsübersicht</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content categories">Content categories</a></td>
+   <td>None.</td>
+  </tr>
+  <tr>
+   <td>Permitted content</td>
+   <td>
+    <div class="content-models">
+    <div id="table-mdls">Phrasing content.</div>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td>Tag omission</td>
+   <td>The <span title="syntax-start-tag">start tag</span> is mandatory.<br>
+    The end tag may be omitted, if it is immediately followed by a {{HTMLElement("th")}} or {{HTMLElement("td")}} element or if there are no more data in its parent element.</td>
+  </tr>
+  <tr>
+   <td>Permitted parent elements</td>
+   <td>A {{HTMLElement("tr")}} element.</td>
+  </tr>
+  <tr>
+   <td>Normative document</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-th-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-th-element">HTML5, section 4.9.10</a> (<a href="http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.2.6" title="http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.2.6">HTML4.01, section 11.2.6</a>)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p>This element includes the <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">global attributes</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("abbr")}} {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt>
+ <dd>This attribute contains a short abbreviated description of the content of the cell. Some user-agent, like speech reader, may present it before the content itself.
+ <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete in the latest standard: instead either consider starting the cell content by an independent abbreviated content itself or use the abbreviated content as the cell content and use the long content as the description of the cell by putting it in the <strong>title</strong> attribute.</div>
+ </dd>
+ <dt>{{htmlattrdef("align")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt>
+ <dd>This enumerated attribute specifies how horizontal alignment of each cell content will be handled. Possible values are:
+ <ul>
+  <li><code>left</code>, aligning the content to the left of the cell</li>
+  <li><code>center</code>, centering the content in the cell</li>
+  <li><code>right</code>, aligning the content to the right of the cell</li>
+  <li><code>justify</code>, inserting spaces into the textual content so that the content is justified in the cell</li>
+  <li><code>char</code>, aligning the textual content on a special character with a minimal offset, defined by the {{htmlattrxref("char", "th")}} and {{htmlattrxref("charoff", "th")}} attributes {{unimplemented_inline("2212")}}.</li>
+ </ul>
+
+ <p>If this attribute is not set, the <code>left</code> value is assumed.</p>
+
+ <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (not supported) in the latest standard.
+
+ <ul>
+  <li>To achieve the same effect as the <code>left</code>, <code>center</code>, <code>right</code> or <code>justify</code> values, use the CSS {{cssxref("text-align")}} property on it.</li>
+  <li>To achieve the same effect as the <code>char</code> value, in CSS3, you can use the value of the {{htmlattrxref("char", "th")}} as the value of the {{cssxref("text-align")}} property {{unimplemented_inline}}.</li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("axis")}} {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt>
+ <dd>This attribute contains a list of space-separated strings. Each string is the id of a group of cells that this header apply to.
+ <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete in the latest standard: instead use the {{htmlattrxref("scope", "th")}} attribute.</div>
+ </dd>
+ <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt>
+ <dd>This attribute defines the background color of each cell of the column. It is one of the 6-digit hexadecimal code as defined in <a href="http://www.w3.org/Graphics/Color/sRGB" title="http://www.w3.org/Graphics/Color/sRGB">sRGB</a>, prefixed by a '#'. One of the sixteen predefined color strings may be used:
+ <table>
+  <tbody>
+   <tr>
+    <td style="background-color: black; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>black</code> = "#000000"</td>
+    <td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>green</code> = "#008000"</td>
+   </tr>
+   <tr>
+    <td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>silver</code> = "#C0C0C0"</td>
+    <td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>lime</code> = "#00FF00"</td>
+   </tr>
+   <tr>
+    <td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>gray</code> = "#808080"</td>
+    <td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>olive</code> = "#808000"</td>
+   </tr>
+   <tr>
+    <td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>white</code> = "#FFFFFF"</td>
+    <td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>yellow</code> = "#FFFF00"</td>
+   </tr>
+   <tr>
+    <td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>maroon</code> = "#800000"</td>
+    <td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>navy</code> = "#000080"</td>
+   </tr>
+   <tr>
+    <td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>red</code> = "#FF0000"</td>
+    <td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>blue</code> = "#0000FF"</td>
+   </tr>
+   <tr>
+    <td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>purple</code> = "#800080"</td>
+    <td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>teal</code> = "#008080"</td>
+   </tr>
+   <tr>
+    <td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>fuchsia</code> = "#FF00FF"</td>
+    <td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>aqua</code> = "#00FFFF"</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note"><strong>Usage note:</strong> Do not use this attribute, as it is non-standard and only implemented some versions of Microsoft Internet Explorer: the {{HTMLElement("th")}} element should be styled using <a href="/en-US/docs/CSS" title="CSS">CSS</a>. To give a similar effect to the <strong>bgcolor</strong> attribute, use the <a href="/en-US/docs/CSS" title="CSS">CSS</a> property {{cssxref("background-color")}} instead.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("char")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt>
+ <dd>This attribute is used to set the character to align the cells in a column on. Typical values for this include a period (.) when attempting to align numbers or monetary values. If {{htmlattrxref("align", "th")}} is not set to <code>char</code>, this attribute is ignored.
+ <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard. To achieve the same effect as the {{htmlattrxref("char", "thead")}}, in CSS3, you can use the character set using the {{htmlattrxref("char", "th")}} attribute as the value of the {{cssxref("text-align")}} property {{unimplemented_inline}}.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt>
+ <dd>This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the <strong>char</strong> attribute.
+ <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("colspan")}}</dt>
+ <dd>This attribute contains a non-negative integer value that indicates on how many columns does the cell extend. Its default value is <code>1</code>; if its value is set to <code>0</code>, it does extend until the end of the {{HTMLElement("colgroup")}}, eventually implicitly defined, the cell belongs to. Values higher than 1000 are clipped down to 1000.</dd>
+ <dt>{{htmlattrdef("headers")}}</dt>
+ <dd>This attributes a list of space-separated strings, each corresponding to the <strong>id</strong> attribute of the {{HTMLElement("th")}} elements that applies to this element.</dd>
+ <dt>{{htmlattrdef("rowspan")}}</dt>
+ <dd>This attribute contains a non-negative integer value that indicates on how many rows does the cell extend. Its default value is <code>1</code>; if its value is set to <code>0</code>, it does extend until the end of the table section ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, eventually implicitly defined) the cell belongs to. Values higher than 65534 are clipped down to 65534.</dd>
+ <dt>{{htmlattrdef("scope")}}</dt>
+ <dd>This enumerated attribute defines the cells that the header defined in this {{HTMLElement("th")}} element relates to. It may have the following values:
+ <ul>
+  <li><code>row</code>, which means that the header relates to all cells in the row that this element belongs to;</li>
+  <li><code>col</code>, which means that the header relates to all cells in the column that this element belongs to;</li>
+  <li><code>rowgroup</code>, which means that the header relates to all remaining cells in the row group that this element belongs to. The remaining cells are either those to the right of this element, or to his left depending of the value of{{htmlattrxref("dir", "table")}} attribute defined on the {{HTMLElement("table")}} element;</li>
+  <li><code>colgroup</code>, which means that the header relates to all remaining cells in the column group that this element belongs to;</li>
+  <li><em>auto</em></li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("valign")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt>
+ <dd>This attribute specifies the vertical alignment of the text within each row of cells of the table header. Possible values for this attribute are:
+ <ul>
+  <li><code>baseline</code>, which will put the text as close to the bottom of the cell as it is possible, but align it on the <a href="http://en.wikipedia.org/wiki/Baseline_%28typography%29" title="http://en.wikipedia.org/wiki/Baseline_(typography)">baseline</a> of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as <code>bottom</code>.</li>
+  <li><code>bottom</code>, which will put the text as close to the bottom of the cell as it is possible;</li>
+  <li><code>middle</code>, which will center the text in the cell;</li>
+  <li>and <code>top</code>, which will put the text as close to the top of the cell as it is possible.</li>
+ </ul>
+
+ <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard: instead set the CSS {{cssxref("vertical-align")}} property on it.</div>
+ </dd>
+ <dt>{{htmlattrdef("width")}} {{Deprecated_inline}} in {{HTMLVersionInline(4.01)}}</dt>
+ <dd>This attribute is used to define a recommended cell width.  Properties <a href="/en-US/docs/Web/API/HTMLTableElement/cellSpacing">cellspacing</a> and <a href="/en-US/docs/Web/API/HTMLTableElement/cellPadding">cellpadding</a> may add additional space, and element {{HTMLElement("col")}} width may also have some effect. In general, if a column's width is too narrow to show a particular cell properly, it, and thus the cells in it, may be widened when displayed.
+ <div class="note"><strong>Note: </strong>Do not use this attribute in the latest standard: instead set the CSS {{cssxref("width")}} property.</div>
+ </dd>
+</dl>
+
+<h2 id="DOM_interface">DOM interface</h2>
+
+<p>This element implements the <code><a href="en-US/docs/Web/API/HTMLTableHeaderCellElement" title="DOM/HTMLTableHeaderCellElement">HTMLTableHeaderCellElement</a></code> interface.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>See {{HTMLElement("table")}} for examples on <code>&lt;th&gt;</code>.</p>
+
+<h2 id="Kompatibilät">Kompatibilät</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>align/valign</code> attribute</td>
+   <td>1.0</td>
+   <td>{{CompatNo}} {{bug("915")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>char/charoff</code> attribute</td>
+   <td>1.0</td>
+   <td>{{CompatNo}} {{bug("2212")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>bgcolor</code> attribute {{Non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>align/valign</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} {{bug("915")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>char/charoff</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} {{bug("2212")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>bgcolor</code> attribute {{Non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Other table-related HTML Elements: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}.</li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/de/web/html/element/time/index.html b/files/de/web/html/element/time/index.html
new file mode 100644
index 0000000000..510f8c5ff2
--- /dev/null
+++ b/files/de/web/html/element/time/index.html
@@ -0,0 +1,162 @@
+---
+title: <time>
+slug: Web/HTML/Element/time
+tags:
+  - Element
+  - HTML
+  - HTML Textlevel Semantiken
+  - HTML5
+  - Referenz
+  - Web
+translation_of: Web/HTML/Element/time
+---
+<p>Das <strong>HTML <code>&lt;time&gt;</code>-Element</strong> repräsentiert entweder Zeitangaben im 24-Stunden-Format oder ein präzises Datum im <a href="http://de.wikipedia.org/wiki/Gregorianischer_Kalender">gregorianischen Kalender</a> (mit optionalen Zeit- und Zeitzonen-Informationen).</p>
+
+<p>Dieses Element erlaubt es, Daten und Zeiten in einem maschinell lesbaren Format darzustellen. Dies kann hilfreich für User Agents sein, die eine beliebige Art der Terminplanung für den Kalender des Benutzers anbieten.</p>
+
+<div class="note"><strong>Hinweis zur Verwendung: </strong>Dieses Element ist nicht geeignet, wenn ein genaues Datum nicht berechnet werden kann oder das Datum vor der Einführung des gregorianischen Kalenders liegt (aufgrund von Schwierigkeiten, diese Daten zu berechnen).</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, palpable content.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted content</th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">Phrasing content</a>, aber keine verschachtelten <code>time</code>-Elemente.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>Keine; sowohl End- als auch Starttag sind Pflicht.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted parent elements</th>
+   <td>Jedes Element, das <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a> akzeptiert.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLTimeElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p>Wie alle anderen HTML-Elemente, unterstützt dieses Element <a href="/en-US/docs/HTML/Global_attributes">globale Attribute</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("datetime")}}</dt>
+ <dd>Dieses Attribut gibt Zeit und Datum des Elements an und muss ein <a href="http://www.w3.org/TR/html-markup/datatypes.html#common.data.datetime">gültiges Datum mit optionalem Zeit-String</a> sein. Wenn der Wert nicht als Datum mit optionalem Zeit-String geparst werden kann, wird diesem Element kein gültiger Zeitstempel zugeordnet.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Simple_example" name="Simple_example">Einfaches Beispiel</h3>
+
+<pre class="brush: html">&lt;p&gt;Das Konzert startet um &lt;time&gt;20:00&lt;/time&gt; Uhr.&lt;/p&gt;
+</pre>
+
+<p>Die Ausgabe des obigen HTML ist:</p>
+
+<p>Das Konzert startet um 20:00 Uhr.</p>
+
+<h3 id="Datetime_example" name="Datetime_example"><code>datetime</code>-Beispiel</h3>
+
+<pre class="brush: html">&lt;p&gt;Das Konzert findet am &lt;time datetime="2001-05-15 19:00"&gt;15. Mai&lt;/time&gt; statt.&lt;/p&gt;
+</pre>
+
+<p>Die Ausgabe des obigen HTML ist:</p>
+
+<p>Das Konzert findet am 15. Mai statt.</p>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#the-time-element', '&lt;time&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Keine Änderung zu {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'grouping-content.html#the-time-element', '&lt;main&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Keine Änderung zu {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-time-element', '&lt;main&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("22.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>11.50<br>
+    Removed in 15.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>11.50<br>
+    Entfernt in 15.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>Das{{HTMLElement("data")}}-Element erlaubt die Auszeichnung anderer Werte.</li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/de/web/html/element/title/index.html b/files/de/web/html/element/title/index.html
new file mode 100644
index 0000000000..d3cb8fb32d
--- /dev/null
+++ b/files/de/web/html/element/title/index.html
@@ -0,0 +1,81 @@
+---
+title: <title>
+slug: Web/HTML/Element/title
+tags:
+  - Element
+  - HTML
+  - HTML Dokumentmetadaten
+  - Referenz
+  - Web
+translation_of: Web/HTML/Element/title
+---
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Das <strong>HTML &lt;title&gt; Element</strong> (<em>HTML Titel Element</em>) definiert den Titel eines Dokumentes und wird in der Titelleiste des Browsers oder in der Seiten-Registerkarte angezeigt. Der Titel kann nur Text enthalten - enthaltene Tags werden nicht interpretiert.</p>
+
+<h2 id="Gebrauch">Gebrauch</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorien</a></th>
+   <td>Metadata Inhalt.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubter Inhalt</th>
+   <td>Text</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag Auslassung</th>
+   <td>Wird zwingend benötigt. Achtung: Wird das <code>&lt;/title&gt;</code> Tag weggelassen, kann es dazu kommen, dass der Rest der Seite vom Browser ignoriert wird.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte Elternelemente</th>
+   <td>Ein {{ HTMLElement("head") }} Element, das kein anderes {{ HTMLElement("title") }} Element beinhaltet.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM Schnittstelle</th>
+   <td>{{domxref("HTMLTitleElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p><span style="line-height: 21px;">Dieses Element schließt nur </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globale Attribute</a><span style="line-height: 21px;"> ein.</span></p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: html">&lt;title&gt;Das ist der Seiten-Titel&lt;/title&gt;
+</pre>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-title-element', '&lt;title&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-title-element', '&lt;title&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.2', '&lt;title&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/de/web/html/element/tr/index.html b/files/de/web/html/element/tr/index.html
new file mode 100644
index 0000000000..f3a177cb40
--- /dev/null
+++ b/files/de/web/html/element/tr/index.html
@@ -0,0 +1,230 @@
+---
+title: <tr>
+slug: Web/HTML/Element/tr
+tags:
+  - Element
+  - HTML
+  - HTML tabular data
+  - Reference
+  - Tables
+  - Web
+translation_of: Web/HTML/Element/tr
+---
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Das HTML<em> </em>Element<em> table row </em><code>&lt;tr&gt;</code> definiert eine Reihe, bestehend aus einzelnen Zellen, in einer Tabelle. Diese können aus {{HTMLElement("td")}} und {{HTMLElement("th")}} Elementen bestehen.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><a href="/de/docs/HTML/Content_categories" title="HTML/Content categories">Inhaltskategorien</a></td>
+   <td>Keine</td>
+  </tr>
+  <tr>
+   <td>Erlaubter Inhalt</td>
+   <td>0 oder mehrere {{HTMLElement("td")}} oder {{HTMLElement("th")}} Elemente, oder eine Mischung aus diesen</td>
+  </tr>
+  <tr>
+   <td>Tag Wegfall</td>
+   <td>Start-Tag ist ein Muss. Ende-Tag kann weggelassen werden, wenn das {{HTMLElement("tr")}} Element direkt gefolgt wird von einem {{HTMLElement("tr")}} Element, oder wenn die Haupttabellengruppen ({{HTMLElement("thead")}},  {{HTMLElement("tbody")}} oder {{HTMLElement("tfoot")}}) keinen Inhalt haben</td>
+  </tr>
+  <tr>
+   <td>Erlaubte Elternelemente</td>
+   <td>{{HTMLElement("table")}}, {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} oder {{HTMLElement("tfoot")}} Element</td>
+  </tr>
+  <tr>
+   <td>Erlaubte ARIA-Rollen</td>
+   <td>alle</td>
+  </tr>
+  <tr>
+   <td>DOM interface</td>
+   <td>{{domxref("HTMLTableRowElement")}}</td>
+  </tr>
+  <tr>
+   <td>Verweis-Dokument</td>
+   <td><a class="external" href="http://www.whatwg.org/html/#the-tr-element">HTML, "The <code>tr</code> element"</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p><span style="line-height: 21px;">Dieses Element beinhaltet </span><a href="/de/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globale Attribute</a><span style="line-height: 21px;">.</span></p>
+
+<dl>
+ <dt>{{htmlattrdef("align")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt>
+ <dd>Dieses aufgezählte Attribut spezifiziert wie die horizontale Ausrichtung jeden Zelleninhalts behandelt wird. Mögliche Werte sind:
+ <ul>
+  <li><code>left</code>, Ausrichtung des Inhalts am linken Rand der Zelle</li>
+  <li><code>center</code>, Zentrierung des Inhalts innerhalb der Zelle</li>
+  <li><code>right</code>, Ausrichtung des Inhalts am rechten Rand der Zelle</li>
+  <li><code>justify</code>, Erweiterung der Leerstellen im textuellen Inhalt so dass der Inhalt die gesamte Breite der Zelle besetzt (Blocksatz)</li>
+  <li><code>char</code>, Ausrichtung des textuellen Inhalts an einem speziellen Charakter mit einem minimalen  Abstand, definiert durch {{htmlattrxref("char", "tr")}} und {{htmlattrxref("charoff", "tr")}} Attribute {{unimplemented_inline("2212")}}</li>
+ </ul>
+
+ <p>Wenn dieses Attribut nicht gesetzt wird, dann wird der Wert des Elternknotens geerbt.</p>
+
+ <div class="note"><strong>Bemerkung: </strong>Benutzen Sie dieses Attribut nicht, da es nicht mehr im aktuellen Standard unterstützt wird.
+
+ <ul>
+  <li>Um denselben Effekt zu erhalten wie <code>left</code>, <code>center</code>, <code>right</code> oder <code>justify</code>, benutzen Sie die CSS {{cssxref("text-align")}} Eigenschaft.</li>
+  <li>Um denselben Effekt zu erhalten wie <code>char</code>, in CSS3, können Sie den Wert der Eigenschaft {{htmlattrxref("char", "tr")}} als Wert der {{cssxref("text-align")}} Eigenschaft benutzen  {{unimplemented_inline}}.</li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("bgcolor")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt>
+ <dd>Dieses Attribut definiert die Hintergrundfarbe jeder Zelle in einer Zeile. Es kann entweder ein <a href="/de/docs/CSS/color_value#HTML.2fSVG.2fX11.c2.a0_Color_Keywords" title="CSS/color value#HTML.2fSVG.2fX11.c2.a0 Color Keywords">#RRGGBB Code</a> oder ein <a href="/#HTML.2fSVG.2fX11.c2.a0_Color_Keywords" title="#HTML.2fSVG.2fX11.c2.a0 Color Keywords">SVG Farbschlüssel</a> sein.
+ <div class="note"><strong>Gebrauchsanweisung: </strong>Das {{HTMLElement("tr")}} Element sollte mit <a href="/de/docs/CSS" title="CSS">CSS</a> formatiert werden. Um denselben Effekt wie das <strong>bgcolor</strong> Attribut zu erreichen, benutzen Sie die <a href="/de/docs/CSS" title="CSS">CSS</a> Eigenschaft {{cssxref("background-color")}}.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("char")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt>
+ <dd>Dieses Attribut wird benutzt um die Charaktere einer Zelle zu einer Kolonne auszurichten. Typische Werte beinhalten einen Punkt (.) wenn Zahlen oder Währungswerte ausgerichtet werden sollen. Wenn {{htmlattrxref("align", "tr")}} nicht mit <code>char</code> gesetzt ist, so wird dieses Attribut ignoriert.
+ <div class="note"><strong>Bemerkung: </strong>Benutzen Sie dieses Attribut nicht, da es nicht mehr im aktuellen Standard unterstützt wird. Um denselben Effekt wie {{htmlattrxref("char", "tr")}}, in CSS3 zu erreichen, können Sie den Zeichensatz benutzen, welcher das {{htmlattrxref("char", "tr")}} Attribut als Wert der {{cssxref("text-align")}} Eigenschaft enthält {{unimplemented_inline}}.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("charoff")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt>
+ <dd>Dieses Attribut wird benutzt um die Anzahl der Charaktere zu bestimmen, welche als Abstand für den Kolonneninhalt genommen und durch das <strong>char</strong> Attribut definiert wird.
+ <div class="note"><strong>Bemerkung: </strong>Benutzen Sie dieses Attribut nicht, da es nicht mehr im aktuellen Standard unterstützt wird.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("valign")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt>
+ <dd>Dieses Attribut definiert die vertikale Ausrichtung des Textes in jeder Zeile. Mögliche Werte für dieses Attribut sind:
+ <ul>
+  <li><code>baseline</code>, platziert den Text so nah wie möglich an den unteren Rand der Zelle, aber richtet sie an der <a class="external" href="http://en.wikipedia.org/wiki/Baseline_%28typography%29" title="http://en.wikipedia.org/wiki/Baseline_(typography)">Basislinie</a> der Charaktere aus anstatt am unteren Rand derselben. Sind alle Charaktere von derselben Grösse, so hat es denselben Effekt wie <code>bottom</code>.</li>
+  <li><code>bottom</code>, platziert den Text so nah wie möglich an den unteren Rand der Zelle;</li>
+  <li><code>middle</code>, zentriert den Text innerhalb der Zelle;</li>
+  <li>und <code>top</code>, platziert den Text so nah wie möglich an den oberen Rand der Zelle.</li>
+ </ul>
+
+ <div class="note"><strong>Note: </strong>Benutzen Sie dieses Attribut nicht, da es nicht mehr im aktuellen Standard unterstützt wird; benutzen Sie die CSS {{cssxref("vertical-align")}} Eigenschaft.</div>
+ </dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Siehe {{HTMLElement("table")}} für Beispiele von <code>&lt;tr&gt;</code>.</p>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basis Unterstützung</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>align/valign</code> Attribut</td>
+   <td>1.0</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>char/charoff</code> Attribut</td>
+   <td>1.0</td>
+   <td>{{CompatNo}} [2]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>bgcolor</code> Attribute {{Non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basis Unterstützung</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>align/valign</code> Attribut</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>char/charoff</code> Attribut</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} [2]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>bgcolor</code> Attribut {{Non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Siehe {{bug(915)}}.</p>
+
+<p>[2] Siehe {{bug(2212)}}.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Andere Tabellen-bezogene HTML Elemente: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}};</li>
+ <li>CSS Eigenschaften und Pseudo-Klassen die eventuel wichtig sind für die Formatierung des <code>&lt;tr&gt;</code> Elementes:
+  <ul>
+   <li>Die {{cssxref(":nth-child")}} Pseudo-Klasse für die Ausrichtung der Zellen ganzer Zeilen und Spalten;</li>
+   <li>Die {{cssxref("text-align")}} Eigenschaft um alle Zelleninhalte auf demselben Charakter auszurichten, wie '.'.&lt;</li>
+  </ul>
+ </li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/de/web/html/element/tt/index.html b/files/de/web/html/element/tt/index.html
new file mode 100644
index 0000000000..08abd9019b
--- /dev/null
+++ b/files/de/web/html/element/tt/index.html
@@ -0,0 +1,52 @@
+---
+title: <tt>
+slug: Web/HTML/Element/tt
+translation_of: Web/HTML/Element/tt
+---
+<div>{{ obsolete_header() }}</div>
+
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+
+<p>Das HTML Teletype (Fernschreiber) Text Element (<code>&lt;tt&gt;</code>) erzeugt ein inline Element das in der standardmässigen Nichtproportionalschrift des Browsers angezeigt wird. Die Absicht hinter diesem Element war, Text so zu präsentieren, als würde er auf einem Bildschirm mit fester Breite angezeigt, wie bei einem Fernschreiber. Es ist vermutlich verbreiteter, Text mit fester Breite mit dem Element {{ HTMLElement("code") }} anzuzeigen.</p>
+
+<div class="note">Dieses Element ist überholt. An seiner Stelle sollte ein angepasstes Element wie Beispielsweise {{ HTMLElement("code") }} oder {{ HTMLElement("span") }} mit <a href="/fr/docs/CSS" title="/fr/docs/CSS">CSS</a> benutzt werden.</div>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p>Dieses Element hat keine anderen Attribute als die <a href="/en-US/docs/Web/HTML/global_attributes" title="HTML/global attributes">globalen Attribute</a>, die alle Elemente verwenden.</p>
+
+<h2 id="DOM_Interface">DOM Interface</h2>
+
+<p>Dieses Element implementiert das {{domxref('HTMLElement')}} Interface.</p>
+
+<div class="note">
+<p><strong>Anmerkung zur Implementation: </strong>Bis und mit Gecko 1.9.2, Firefox implementiert das {{domxref('HTMLSpanElement')}} Interface für dieses Element.</p>
+</div>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush:html">&lt;p&gt;Geben Sie bei der Eingabeaufforderung des Fernschreibers folgendes Kommando ein: &lt;code&gt;set localecho&lt;/code&gt;&lt;br /&gt;
+
+Der Fernschreiber Client sollte &lt;tt&gt;Local Echo is on&lt;/tt&gt; anzeigen&lt;/p&gt;
+</pre>
+
+<h3 id="Resultat">Resultat</h3>
+
+<p>Geben Sie bei der Eingabeaufforderung des Fernschreibers folgendes Kommando ein: <code>set localecho</code><br>
+ Der Fernschreiber Client sollte: <code>Local Echo is on</code> anzeigen</p>
+
+<h2 id="Notes" name="Notes">Anmerkungen</h2>
+
+<ul>
+ <li>Eine CSS-Regel kann für den <code>tt</code> Selektor definiert werden, um die Standardschriftart des Browsers anzupassen. Benutzereinstellungen können Vorrang vor dem spezifizierten CSS haben.</li>
+ <li>Obwohl dieses Element nicht für deprecated erklärt wurde, wird mit der HTML 4.01 Spezification davon abgeraten es zu benutzen, stattdessen sollten Style Sheets (CSS) verwendet werden.</li>
+</ul>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{ HTMLElement("code") }}</li>
+ <li>HTML 4.01 Spezifikation: <a class="external" href="http://www.w3.org/TR/html4/present/graphics.html#h-15.2">Schriftstile</a></li>
+</ul>
+
+<div>{{ HTMLRef }}</div>
diff --git a/files/de/web/html/element/u/index.html b/files/de/web/html/element/u/index.html
new file mode 100644
index 0000000000..6110097354
--- /dev/null
+++ b/files/de/web/html/element/u/index.html
@@ -0,0 +1,68 @@
+---
+title: <u>
+slug: Web/HTML/Element/u
+tags:
+  - Element
+  - Unterstrich
+translation_of: Web/HTML/Element/u
+---
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Das <em>HTML Underline Element</em> (<code>&lt;u&gt;</code>) versieht Text mit einem Unterstrich, also einer Linie unter der Basislinie des Textinhalts.</p>
+
+<p>In HTML5, repräsentiert dieses Element ein Textfeld mit einem unausgesprochenen, also nur gerenderten, nicht-textuellen Vermerk, so wie die Beschreibung eines Textes, als sei es eine Eigenschaft eines chinesisches Textes (eine chinesische Textmarkierung), oder als ob der Text falsch buchstabiert sei.</p>
+
+<div class="note"><strong>Gebrauchsnotiz: </strong>So wie alle stylisierenden Elemente, wird {{ HTMLElement("u") }} in HTML 4 und XHTML 1 nicht mehr unterstützt. Das Attribut wurde aber wieder in HTML5 zusammen mit anderen Wortbedeutungen aufgenommen. Wenn ein Text unterstrichen werden soll in einer nicht-begriffsbestimmenden Art und Weise, sollte ein {{ HTMLElement("span") }} Element eingesetzt werden, oder andere angepasste Elemente, und es mit <a href="/en/CSS" title="en/CSS">CSS</a> formatieren {{ cssxref("text-decoration") }}, also mit der <span style="font-family: Courier New;">underline</span> Eigenschaft.</div>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p><span style="line-height: 21px;">Dieses Element enthält nur das </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">globale Attribut</a><span style="line-height: 21px;">.</span></p>
+
+<h2 id="Tips_und_Bemerkungen">Tips und Bemerkungen</h2>
+
+<p style="line-height: 21px;"><b>Tip:</b> Das {{ HTMLElement("u") }} Element nicht benutzen wo es mit einem Hyperlink verwechselt werden kann.</p>
+
+<div class="note">
+<p><span style="line-height: 21px;"><strong>Notiz:</strong> Die HTML 5 Spezifikation errinnert Entwickler dass andere Elemente passender sind als {{ HTMLElement("u") }}.</span></p>
+</div>
+
+<h2 id="DOM_Interface">DOM Interface</h2>
+
+<p>Dieses Element implementiert das <code><a href="/en/DOM/element" title="en/DOM/element">HTMLElement</a></code> Interface.</p>
+
+<div class="note"><strong>Implementation-Notiz: </strong>bis zur Version Gecko 1.9.2 inklusive, implementiert Firefox das {{ domxref("HTMLSpanElement") }} Interface für dieses Element.</div>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: html">&lt;u&gt;Today's Special&lt;/u&gt;: Salmon&lt;br /&gt;
+&lt;span style="text-decoration:underline;"&gt;Today's Special&lt;/span&gt;: Salmon
+</pre>
+
+<p><u>Today's Special</u>: Salmon</p>
+
+<p><span style="text-decoration: underline;">Today's Special</span>: Salmon</p>
+
+<pre class="brush: html">&lt;p&gt;&lt;u&gt;All&lt;/u&gt; of that is explained in &lt;u&gt;Dive into Python&lt;/u&gt;.
+</pre>
+
+<p><u>All</u> of that is explained in <u>Dive into Python</u>.</p>
+
+<p>Sollte ersetzt werden durch</p>
+
+<pre class="brush: html">&lt;p&gt;&lt;em&gt;All&lt;/em&gt; of that is explained in &lt;cite&gt;Dive into Python&lt;/cite&gt;.
+</pre>
+
+<p><em>All</em> of that is explained in <cite>Dive into Python</cite>.</p>
+
+<p>CSS sollte benutzt werden um diese Elemente zu formatieren.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Die {{ HTMLElement("span") }}, {{ HTMLElement("i") }}, {{ HTMLElement("em") }}, and {{ HTMLElement("cite") }} Elemente sollten, vom Fall abhängend, anstatt benutzt werden.</li>
+ <li>Die CSS {{ cssxref("text-decoration") }} Eigenschaft sollte benutzt werden für dasselbe Aussehen als das {{ HTMLElement("u") }} Element.</li>
+</ul>
+
+<p>{{ languages({"ja":"ja/HTML/Element/u","en":"en/HTML/Element/u"}) }}</p>
+
+<div>{{ HTMLRef }}</div>
diff --git a/files/de/web/html/element/ul/index.html b/files/de/web/html/element/ul/index.html
new file mode 100644
index 0000000000..e3299cef19
--- /dev/null
+++ b/files/de/web/html/element/ul/index.html
@@ -0,0 +1,123 @@
+---
+title: ul
+slug: Web/HTML/Element/ul
+tags:
+  - HTML
+  - HTML Elemente
+  - HTML Referenz
+translation_of: Web/HTML/Element/ul
+---
+<h2 id="Übersicht">Übersicht</h2>
+
+<p>Das HTML Element <em>unordered list</em> &lt;ul&gt; wird verwendet um eine ungeordnete Liste darzustellen. Eine Sammlung von Einträgen, die keine nummerische Ordung aufweisen bzw. deren Aufzählung bedeutungslos ist. Die einzelnen Einträge der Liste werden durch das <a href="/de/HTML/Element/li" title="de/HTML/Element/li">list item</a> (<a href="/de/HTML/Element/li" title="de/HTML/Element/li">&lt;li&gt;</a>) Element definiert, welches das einzige Element ist, was innerhalb eines <code>&lt;ul&gt;</code> Tag stehen darf.</p>
+
+<ul>
+ <li>Element Typ: <a href="/de/HTML/Block-level_Elemente" title="de/HTML/Block-level_Elemente">block-level</a></li>
+ <li>Erlaubter Inhalt: <a href="/de/HTML/Element/li" title="de/HTML/Element/li">li</a></li>
+</ul>
+
+<h2 id="Attribute">Attribute</h2>
+
+<dl>
+ <dt>type {{ Deprecated_inline() }}</dt>
+ <dd>Wird verwendet, um das Aufzählungszeichen der Liste festzulegen. Die Werte sind in der <a href="/de/HTML3.2" title="de/HTML3.2">HTML3.2</a> Spezifikation festgelegt und in der „transitional“ Version von <a href="/de/HTML4.01" title="de/HTML4.01">HTML 4.0/4.01</a> sind <code>circle</code>, <code>disc</code>, und <code>square</code> aufgeführt. Der Browser kann über unterschiedliche Zeichen entscheiden, abhängig vom Grad der Verschachtelung, wenn das type Attribut nicht verwendet wird. Das WebTV Interface unterstützt auch ein <code>triangle</code> Zeichen. Dieses Attribut ist veraltet, es sollte die <a href="/de/CSS" title="de/CSS">CSS</a> <a href="/de/CSS/list-style-type" title="de/CSS/list-style-type">list-style-type</a> Eigenschaft stattdessen verwendet werden.</dd>
+</dl>
+
+<dl>
+ <dt>compact {{ Deprecated_inline() }}</dt>
+ <dd>Gibt an, dass die Liste in einer kompakten Form gerendert werden soll. Die Interpretation dieses Attributs hängt vom Browser ab.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einfaches_Beispiel">Einfaches Beispiel</h3>
+
+<pre>  &lt;ul&gt;
+    &lt;li&gt;Erster Eintrag&lt;/li&gt;
+    &lt;li&gt;Zweiter Eintrag&lt;/li&gt;
+    &lt;li&gt;Dritter Eintrag&lt;/li&gt;
+  &lt;/ul&gt;
+</pre>
+
+<p>Dieses HTML gibt das Folgende aus:</p>
+
+<ul>
+ <li>Erster Eintrag</li>
+ <li>Zweiter Eintrag</li>
+ <li>Dritter Eintrag</li>
+</ul>
+
+<h3 id="Verschachtelte_Listen">Verschachtelte Listen</h3>
+
+<pre>  &lt;ul&gt;
+    &lt;li&gt;Erster Eintraf&lt;/li&gt;
+    &lt;li&gt;Zweiter Eintrag      &lt;!-- Achtung, das schließende &lt;/li&gt; Tag wird hier nicht notiert! --&gt;
+      &lt;ul&gt;
+        &lt;li&gt;Zweiter Eintrag erster Untereintrag&lt;/li&gt;
+        &lt;li&gt;Zweiter Eintrag zweiter Untereintrag&lt;/li&gt;
+        &lt;li&gt;Zweiter Eintrag dritter Untereintrag&lt;/li&gt;
+      &lt;/ul&gt;
+    &lt;/li&gt;                &lt;!-- Hier ist das schließende &lt;/li&gt; Tag angegeben! --&gt;
+    &lt;li&gt;Dritter Eintrag&lt;/li&gt;
+  &lt;/ul&gt;
+</pre>
+
+<p>Dieses HTML gibt das Folgende aus:</p>
+
+<ul>
+ <li>Erster Eintrag</li>
+ <li>Zweiter Eintrag
+  <ul>
+   <li>Zweiter Eintrag erster Untereintrag</li>
+   <li>Zweiter Eintrag zweiter Untereintrag</li>
+   <li>Zweiter Eintrag dritter Untereintrag</li>
+  </ul>
+ </li>
+ <li>Dritter Eintrag</li>
+</ul>
+
+<h3 id="Verschachtelte_&lt;ul>_und_&lt;ol>">Verschachtelte &lt;ul&gt; und &lt;ol&gt;</h3>
+
+<pre>  &lt;ul&gt;
+    &lt;li&gt;Erster Eintrag&lt;/li&gt;
+    &lt;li&gt;Zweiter Eintrag      &lt;!-- Achtung, das schließende &lt;/li&gt; Tag wird hier nicht notiert! --&gt;
+      &lt;ol&gt;
+        &lt;li&gt;Zweiter Eintrag erster Untereintrag&lt;/li&gt;
+        &lt;li&gt;Zweiter Eintrag zweiter Untereintrag&lt;/li&gt;
+        &lt;li&gt;Zweiter Eintrag dritter Untereintrag&lt;/li&gt;
+      &lt;/ol&gt;
+    &lt;/li&gt;                &lt;!-- Hier ist das schließende &lt;/li&gt; Tag angegeben! --&gt;
+    &lt;li&gt;Dritter Eintrag&lt;/li&gt;
+  &lt;/ul&gt;
+</pre>
+
+<p>Dieses HTML gibt das Folgende aus:</p>
+
+<ul>
+ <li>Erster Eintrag</li>
+ <li>Zweiter Eintrag
+  <ol>
+   <li>Zweiter Eintrag erster Untereintrag</li>
+   <li>Zweiter Eintrag zweiter Untereintrag</li>
+   <li>Zweiter Eintrag dritter Untereintrag</li>
+  </ol>
+ </li>
+ <li>Dritter Eintrag</li>
+</ul>
+
+<h2 id="Hinweise">Hinweise</h2>
+
+<p>Es können so viele Listen, wie man möchte verschachtelt werden, <code>&lt;ul&gt;</code> und <code>&lt;ol&gt;</code> in jeder Reihenfolge.</p>
+
+<p>Um die Einrückung von Listen zu verändern sollte die <a href="/de/CSS" title="de/CSS">CSS</a> <a href="/de/CSS/margin" title="de/CSS/margin">margin</a> Eigenschaft verwendet werden.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/HTML/Element/li" title="de/HTML/Element/li">HTML List item Element</a></li>
+ <li><a href="/de/HTML/Element/ol" title="de/HTML/Element/ol">HTML geordnete Liste</a></li>
+ <li><a href="/de/CSS/list-style" title="de/CSS/list-style">CSS list-style Eigenschaft</a></li>
+ <li><a href="/de/CSS_Counters" title="de/CSS_Counters">CSS Counters</a></li>
+</ul>
+
+<div class="noinclude">{{ languages({ "en":"en/HTML/Element/ul", "ja":"de/HTML/Element/ul", "pl":"pl/HTML/Element/ul"}) }}</div>
diff --git a/files/de/web/html/element/var/index.html b/files/de/web/html/element/var/index.html
new file mode 100644
index 0000000000..109ea376a2
--- /dev/null
+++ b/files/de/web/html/element/var/index.html
@@ -0,0 +1,46 @@
+---
+title: var
+slug: Web/HTML/Element/var
+tags:
+  - HTML
+  - HTML Elemente
+  - HTML Referenz
+translation_of: Web/HTML/Element/var
+---
+<h2 id="Summary" name="Summary">Übersicht</h2>
+
+<p>Das HTML <code>&lt;var&gt;</code> Element repräsentiert eine Variable. Es kann sich dabei um eine mathematischen Ausdruck handeln oder um eine Variable in einem Quellcode.</p>
+
+<h2 id="DOM_Interface">DOM Interface</h2>
+
+<p>Dieses Element implementiert das <code><a href="/de/DOM/element" title="de/DOM/element">HTMLElement</a></code> Interface.</p>
+
+<div class="note">
+<p><strong>Implementationshinweis:</strong> Bis einschließlich Gecko 1.9.2 implementiert Firefox das <a href="/de/DOM/span" title="de/DOM/span"><span style="font-family: Courier New;">HTMLSpanElement</span></a> Interface für dieses Element.</p>
+</div>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p>Keine speziellen vorhanden, nur Universalattribute.</p>
+
+<h3 id="Standardmäßige_Style-Eigenschaften">Standardmäßige Style-Eigenschaften</h3>
+
+<pre class="brush:css">var {
+  font-style: italic;
+}</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush:xml">&lt;p&gt; Eine einfache Gleichung: &lt;var&gt;x&lt;/var&gt; = &lt;var&gt;y&lt;/var&gt; + 2 &lt;/p&gt;
+</pre>
+
+<p>Eine einfache Gleichung: <var>x</var> = <var>y</var> + 2</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/html401/struct/text.html#edef-VAR">HTML 4.01 var</a></li>
+ <li><a class="external" href="http://dev.w3.org/html5/markup/var.html">HTML5 var</a></li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/de/web/html/element/video/index.html b/files/de/web/html/element/video/index.html
new file mode 100644
index 0000000000..f30eb2e9f0
--- /dev/null
+++ b/files/de/web/html/element/video/index.html
@@ -0,0 +1,379 @@
+---
+title: <video>
+slug: Web/HTML/Element/video
+tags:
+  - Element
+  - HTML
+  - HTML eingebetteter Inhalt
+  - HTML5
+  - Medien
+  - Multimedia
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+  - Web
+translation_of: Web/HTML/Element/video
+---
+<div>{{HTMLRef}}</div>
+
+<h2 id="Summary" name="Summary">Übersicht</h2>
+
+<p>Das <strong>HTML <code>&lt;video&gt;</code> Element</strong> wird verwendet, um Videos einzubetten. Es kann verschiedene Quellen für Videos enthalten, die im <code>src</code> Attribut oder im {{HTMLElement("source")}} Element repräsentiert werden. Der Webbrowser wählt dann die für ihn passende Quelle aus.</p>
+
+<p>Eine Liste der unterstützten Formate ist unter <a href="/de/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">Unterstützte Formate der <code>&lt;audio&gt;</code> und <code>&lt;video&gt;</code> Elemente</a> zu finden.</p>
+
+<h2 id="Usage_context" name="Usage_context">Anwendungscontext</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/de/docs/Web/HTML/Content_categories">Inhaltskategorien</a></th>
+   <td><a href="/de/docs/Web/HTML/Content_categories#Flow_content">Fließender Inhalt</a>, Formulierung, eingebetteter Inhalt. Wenn es ein {{htmlattrxref("controls", "video")}} Attribut hat: interaktiver Inhalt und konkreter Inhalt.</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubter Inhalt</th>
+   <td>Wenn das Element ein {{htmlattrxref("src", "video")}} Attribut hat: kein oder mehrere {{HTMLElement("track")}} Elemente, gefolgt von transparentem Inhalt, der keine Medienelemente des Typs {{HTMLElement("audio")}} oder {{HTMLElement("video")}} enthält.<br>
+    Sonst: kein oder mehrere {{HTMLElement("source")}} Elemente, gefolgt von keinem oder mehreren {{HTMLElement("track")}} Elementen, gefolgt von transparentem Inhalt, der keine Medienelemente des Typs {{HTMLElement("audio")}} oder {{HTMLElement("video")}} enthält.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag Wegfall</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubte Elternelemente</th>
+   <td>Jedes Element, das eingebetteten Inhalt akzeptiert.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLVideoElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes" name="Attributes">Attribute</h2>
+
+<p>Wie jedes andere HTML Element unterstützt diese Element die <a href="/de/docs/HTML/Global_attributes" title="HTML/Global attributes">globalen Attribute</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("autoplay")}}</dt>
+ <dd>Ein Boolean Attribut; wenn es gesetzt ist, beginnt das Video automatisch abzuspielen sobald es nicht mehr stoppen muss um weitere Daten zu laden.</dd>
+ <dt>{{htmlattrdef("autobuffer")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Ein Boolean Attribut; wenn es gesetzt ist, beginnt das Video automatisch mit dem Buffering, sogar wenn die automatische Wiedergabe nicht aktiv ist. Diese Attribut sollte verwendet werden, wenn angenommen werden kann, dass der Benutzer das Video abspielen wird (zum Beispiel wenn der Benutzer die Seite aufruft, um das Video abzuspielen und nicht weil es auf der Seite anderen Inhalt gibt und auch ein eingebettetes Video). Das Video wird solange gepuffert, bis der Mediencache voll ist.
+ <div class="note"><strong>Implementierungshinweis:</strong> obwohl es ein Teil der frühen Entwürfe der HTML5 Spezifikation ist, wurde das <code>autobuffer</code> Attribut aus späteren Veröffentlichungen entfernt. Es wurde aus Gecko 2.0 und anderen Webbrowsern entfernt, wobei es von manchen gar nicht erst implementiert wurde. Die Spezifikation definiert ein neues Attribut <code>preload</code> mit einer anderen Syntax, um das <code>autobuffer</code> Attribut zu ersetzen. {{bug(548523)}}</div>
+ </dd>
+ <dt>{{htmlattrdef("buffered")}}</dt>
+ <dd>Ein Attribut, das aus dem die bereits gepufferten Zeitspannen des Mediums gelesen werden können. Dieses Attribut enthält ein {{domxref("TimeRanges")}} Objekt.</dd>
+ <dt>{{htmlattrdef("controls")}}</dt>
+ <dd>Wenn dieses Attribut gesetzt ist,  blendet Gecko Steuerelemente für die Wiedergabe ein. Darunter befinden sich Lautstärke, Spulen und pausieren/fortsetzen der Wiedergabe.</dd>
+ <dt>{{htmlattrdef("crossorigin")}}</dt>
+ <dd>Dieses aufgezählte Attribut gibt an, ob das Laden des dazugehörigen Bildes mit CORS erfolgen muss. <a href="/de/docs/CORS_Enabled_Image" title="CORS_Enabled_Image">CORS-enabled Ressourcen</a> können im {{HTMLElement("canvas")}} Element <em>ohne Qualitätsabfall</em> verwendet werden. Die erlaubten Werte sind:
+ <dl>
+  <dt>anonymous</dt>
+  <dd>Ein cross-origin Request (z. B. mit <code>Origin:</code> HTTP Header) wird ausgeführt aber es werden keine Credentials gesendet (z. B. kein Cookie, kein X.509 Zertifikat und keine HTTP Basic authentication werden gesendet). Wenn der Server keine Credentials an die origin site gibt (wenn der <code>Access-Control-Allow-Origin:</code> HTTP Header nicht gesetzt ist), wird das Bild <em>schlecht</em> und die Verwendung ist eingeschränkt.</dd>
+  <dt>use-credentials</dt>
+  <dd>Ein cross-origin Request (i.e. with <code>Origin:</code> HTTP header) wird ausgeführt und Credentials werden gesendet (z.B. ein Cookie, ein Zertifikat und eine HTTP Basic authentication wird ausgeführt). Wenn der Server keine Credentials an die origin site gibt (über den <code>Access-Control-Allow-Credentials:</code> HTTP Header), wird das Bild <em>schlecht</em> sein und die Verwendung eingeschränkt.</dd>
+ </dl>
+ Wenn dieses Attribute nicht verwendet wir, wird die Ressource ohne einen CORS Request geladen (z. B. ohne den <code>Origin:</code> HTTP Header zu senden), preventing its non-tainted used in {{HTMLElement('canvas')}} elements. Bei einem ungültigen Wert wird das Verhalten von <strong>anonymous</strong> übernommen. Weitere Informationen sind unter <a href="/de/docs/HTML/CORS_settings_attributes" title="CORS settings attributes">CORS settings attributes</a> zu finden.</dd>
+ <dt>{{htmlattrdef("height")}}</dt>
+ <dd>Die Höhe des Wiedergabebereichs in CSS Pixel.</dd>
+ <dt>{{htmlattrdef("loop")}}</dt>
+ <dd>Ein Boolean-Attribut; wenn es gesetzt ist, wird das Video nach dem Ende zurück an den Anfang gespult</dd>
+ <dt>{{htmlattrdef("muted")}}</dt>
+ <dd>Ein Boolean-Attribut das eine Standardeinstellung für den Ton im Video angibt. Wenn es gesetzt ist, ist der Ton initial auf stumm geschaltet. Der Standardwert ist false. Das bedeutet, dass der Ton mit dem Video abgespielt wird</dd>
+ <dt>{{htmlattrdef("played")}}</dt>
+ <dd>Ein {{domxref("TimeRanges")}} Objekt das die abgespielten Abschnitte des Videos angibt.</dd>
+ <dt>{{htmlattrdef("preload")}}</dt>
+ <dd>Dieses aufgezählte Attribute ist ein Hinweis vom Autor darüber, wie laut ihm die möglichst beste User Experience erreicht werden kann. Es kann einen der folgenden Werte enthalten:
+ <ul>
+  <li><span style="font-family: courier new;">none: </span>der Autor meint, dass der Benutzer das Video nicht anfragen wird, oder dass der Server seinen Datenverkehr minimieren will; das Video sollte nicht gecached werden</li>
+  <li><span style="font-family: courier new;">metadata</span>: der Autor meint, dass das Laden der Metadaten (z.B. Länge) vertretbar ist, auch wenn der Benutzer das Video nicht anfragen wird</li>
+  <li><span style="font-family: courier new;">auto</span>: die Bedürfnisse des Benutzers haben Priorität; bei Bedarf kann das gesamte Video heruntergeladen werden, auch wenn es der Benutzer womöglich nicht vollständig ansieht</li>
+  <li>ein <em>leerer String</em>: ein Synonym für den Wert <span style="font-family: courier new;">auto</span></li>
+ </ul>
+
+ <p>Wenn diese Attribut nicht gesetzt ist, wird der Standardwert vom Webbrowser verwendet. Jeder Webbrowser kann seinen eigenen Standardwert auswählen, obwohl die Spezifikation den Wert <span style="font-family: courier new;">metadata</span> empfiehlt.</p>
+
+ <div class="note"><strong>Verwendungshinweise:</strong>
+
+ <ul>
+  <li>Das <code>autoplay</code>-Attribut hat Vorrang gegenüber diesem Attribute, denn wenn das Video automatisch abgespielt werden soll, muss der Webbrowser es laden. Das Setzen der Attribute <code>autoplay</code> und <code>preload</code> wird von der Spezifikation erlaubt.</li>
+  <li>Der Webbrowser wird von der Spezifikation nicht gezwungen den Wert zu befolgen. Es ist ein reiner Hinweis.</li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("poster")}}</dt>
+ <dd>Die URL eines Vorschaubildes, das dargestellt wird bis der Benutzer das Video abspielt oder spult. Wenn diese Attribut nicht angegeben wird, wird nichts dargestellt bis der erste Frame des Videos verfügbar ist. Der erste Frame wird dann als Vorschaubild dargestellt.</dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>Die URL des Videos, das eingebettet werden soll. Diese Attribut ist optional. Stattdessen kann das {{HTMLElement("source")}}-Element innerhalb des video-Blocks für die Angabe des einzubettenden Videos verwendet werden.</dd>
+ <dt>{{htmlattrdef("width")}}</dt>
+ <dd>Die Breite des Wiedergabebereichs in CSS Pixel.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Events</h2>
+
+<p>Das <code>&lt;video&gt;</code>-Element kann verschiedene <a href="/de/docs/Web/Guide/Events/Media_events">Events</a> auslösen.</p>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<pre class="brush: html">&lt;!-- Simple video example --&gt;
+&lt;video src="videofile.ogg" autoplay poster="posterimage.jpg"&gt;
+  Sorry, your browser doesn't support embedded videos,
+  but don't worry, you can &lt;a href="videofile.ogg"&gt;download it&lt;/a&gt;
+  and watch it with your favorite video player!
+&lt;/video&gt;
+
+&lt;!-- Video with subtitles --&gt;
+&lt;video src="foo.ogg"&gt;
+  &lt;track kind="subtitles" src="foo.en.vtt" srclang="en" label="English"&gt;
+  &lt;track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska"&gt;
+&lt;/video&gt;
+</pre>
+
+<p>Das erste Beispiel spielt ein Video ab, sobald genügend Frames geladen worden sind, damit es keine Unterbrechungen beim Abspielen gibt. Das Bild "posterimage.jpg" wird dargestellt, bis das Video abgespielt wird.</p>
+
+<p>Das zweite Beispiel erlaubt dem Benutzer die Auswahl eines Untertitels.</p>
+
+<h2 id="Server_support" name="Server_support">Serverunterstützung</h2>
+
+<p>Wenn der MIME Type für das Video auf dem Server nicht korrekt konfiguriert ist, wird das Video nicht angezeigt oder eine graue Box mit einem X, falls JavaScript aktiviert ist.</p>
+
+<p>Wenn die Videos als Ogg Theora bereitgestellt werden sollen, kann beim Apache Web Server die Dateiendung der Videos (".ogm", ".ogv", oder ".ogg" sind die gängigsten) zum MIME Type "video/ogg" über die "mime.types" Datei in "/etc/apache" oder über die "AddType" Konfigurationsdirektive in httpd.conf abgegeben werden.</p>
+
+<pre>AddType video/ogg .ogm
+AddType video/ogg .ogv
+AddType video/ogg .ogg
+</pre>
+
+<p>Wenn die Videos als WebM bereitgestellt werden sollen, kann beim Apache Web Server die Dateiendung der Videos (".webm" ist die gängigste) zum MIME Type "video/webm" über die "mime.types" Datei in "/etc/apache" oder über die "AddType" Konfigurationsdirektive in httpd.conf abgegeben werden.</p>
+
+<pre>AddType video/webm .webm
+</pre>
+
+<p>Ihr Web Host bietet möglicherweise eine einfache Schnittstellun zur Konfiguration der MIME Typen, bis es ein globales Update gibt.</p>
+
+<h2 id="DOM_interface" name="DOM_interface">DOM Interface</h2>
+
+<p>Dieses Element implementiert das <code><a href="/en-US/docs/Web/API/HTMLVideoElement" title="DOM/HTMLVideoElementInterface">HTMLVideoElement</a></code> Interface.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Webbrowserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>3.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>10.5</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>autoplay</code> attribute</td>
+   <td>3.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>10.5</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>buffered</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>Yes</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>controls</code> attribute</td>
+   <td>3.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>10.5</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>crossorigin</code> attribue</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("12.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>loop</code> attribute</td>
+   <td>3.0</td>
+   <td>{{CompatGeckoDesktop("11.0")}}</td>
+   <td>9.0</td>
+   <td>10.5</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>muted</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("11.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>Yes</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>played</code> property</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("15.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>Yes</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>poster</code> attribute</td>
+   <td>3.0</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>9.0</td>
+   <td>10.5</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>preload</code> attribute</td>
+   <td>3.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>9.0</td>
+   <td>Yes</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>src</code> attribute</td>
+   <td>3.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>10.5</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>autoplay</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>iOS 6.0 only</td>
+  </tr>
+  <tr>
+   <td><code>buffered</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>controls</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>loop</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("11.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>muted</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("11.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>played</code> property</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("15.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>poster</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>preload</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>src</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>crossorigin</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("12.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">Media formats supported by the audio and video elements</a></li>
+ <li>{{htmlelement("audio")}}</li>
+ <li><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using audio and video in Firefox">Using HTML5 audio and video</a></li>
+ <li><a href="/en-US/docs/Manipulating_video_using_canvas" title="Manipulating video using canvas">Manipulating video using canvas</a></li>
+ <li><a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" title="NsIDOMHTMLMediaElement"><code>nsIDOMHTMLMediaElement</code></a></li>
+ <li><a class="external" href="http://tinyvid.tv/" title="http://tinyvid.tv/">TinyVid</a> - Beispiele zur Verwendung von ogg Dateien in HTML5.</li>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#video" title="http://www.whatwg.org/specs/web-apps/current-work/#video">The <code>video</code> element</a> (HTML5 Spezifikation)</li>
+ <li><a href="/en-US/docs/Configuring_servers_for_Ogg_media" title="Configuring servers for Ogg media">Configuring servers for Ogg media</a></li>
+ <li><a href="http://www.jwplayer.com/html5/">The state of HTML5 video</a></li>
+</ul>
diff --git a/files/de/web/html/globale_attribute/accesskey/index.html b/files/de/web/html/globale_attribute/accesskey/index.html
new file mode 100644
index 0000000000..2fff85d11a
--- /dev/null
+++ b/files/de/web/html/globale_attribute/accesskey/index.html
@@ -0,0 +1,116 @@
+---
+title: accesskey
+slug: Web/HTML/Globale_Attribute/accesskey
+tags:
+  - Globale Attribute
+  - HTML
+  - Referenz
+translation_of: Web/HTML/Global_attributes/accesskey
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p>Das <a href="/de/docs/Web/HTML/Globale_Attribute">globale Attribut</a> <strong>accesskey</strong> definiert ein Tastaturkürzel für das aktuelle Element. Der Attributwert muss aus einem einzelnen, druckbarem Zeichen bestehen (dies beinhaltet Zeichen mit Umlauten und andere Zeichen, die über die Tastatur eingegeben werden können).</p>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Die WHATWG-Spezifikation besagt, dass mehrere mit Leerzeichen voneinander getrennte Zeichen angegeben werden können und der Browser davon das erste unterstützte verwenden wird. Das funktioniert jedoch in den meisten Browsern nicht. In Internet Explorer und Edge wird das erste unterstützte Zeichen jedoch ohne Probleme verwendet, sofern es keine Konflikte mit anderen Befehlen gibt.</p>
+</div>
+
+<p>Je nach Browser und Betriebssystem unterscheidet sich die Tastaturkombination zur Ansteuerung des <strong>accesskey</strong>.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th> </th>
+   <th>Windows</th>
+   <th>Linux</th>
+   <th>Mac</th>
+  </tr>
+  <tr>
+   <th>Firefox</th>
+   <td colspan="2" rowspan="1" style="text-align: center;"><kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd><em>key</em></kbd></td>
+   <td>Firefox 57+: <kbd>Control</kbd> +  <kbd>Option</kbd> + <kbd><em>key</em></kbd> -ODER- <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd><br>
+    Firefox 14–56: <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd><br>
+    Firefox &lt; 14, <kbd>Control</kbd> + <kbd><em>key</em></kbd></td>
+  </tr>
+  <tr>
+   <th>Internet Explorer</th>
+   <td><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td>
+   <td colspan="2">N/V</td>
+  </tr>
+  <tr>
+   <th>Google Chrome</th>
+   <td colspan="2" rowspan="1" style="text-align: center;"><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td>
+   <td><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd></td>
+  </tr>
+  <tr>
+   <th>Safari</th>
+   <td><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td>
+   <td>N/V</td>
+   <td><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd></td>
+  </tr>
+  <tr>
+   <th>Opera 15+</th>
+   <td colspan="2" rowspan="1" style="text-align: center;"><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td>
+   <td><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd></td>
+  </tr>
+  <tr>
+   <th>Opera 12</th>
+   <td colspan="3" rowspan="1">
+    <p><kbd>Shift</kbd> + <kbd>Esc</kbd> öffnet zunächst eine Liste der Inhalte, die über <strong>accesskey</strong> erreichbar sind und erlaubt eine Ansteuerung über  <kbd><em>key</em></kbd></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Beachte, dass die Tastaturkombination in Firefox über die Einstellungen angepasst werden kann.</p>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.2', "editing.html#the-accesskey-attribute", "accesskey")}}</td>
+   <td>{{Spec2('HTML5.2')}}</td>
+   <td>Beschreibt ein realistischeres Verhalten der tatsächlichen Implementierungen.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "interaction.html#the-accesskey-attribute", "accesskey")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Keine Änderung gegenüber {{SpecName('HTML5.1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "editing.html#the-accesskey-attribute", "accesskey")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Keine Änderung gegenüber {{SpecName('HTML5 W3C')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "editing.html#the-accesskey-attribute", "accesskey")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Ab {{SpecName('HTML4.01')}} können mehrere Zeichen als  <code>accesskey</code> gesetzt werden. Zudem kann ein <code>accesskey</code> an jedem Element gesetzt werden.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', "interact/forms.html#h-17.11.2", "accesskey")}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Nur unterstützt an {{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }} und {{ HTMLElement("textarea") }}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("html.global_attributes.accesskey")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{domxref("Element.accessKey")}}</li>
+ <li>{{domxref("HTMLElement.accessKeyLabel")}}</li>
+ <li><a href="/de/docs/Web/HTML/Globale_Attribute">Globale Attribute</a>.</li>
+</ul>
diff --git a/files/de/web/html/globale_attribute/autocapitalize/index.html b/files/de/web/html/globale_attribute/autocapitalize/index.html
new file mode 100644
index 0000000000..33eb99d131
--- /dev/null
+++ b/files/de/web/html/globale_attribute/autocapitalize/index.html
@@ -0,0 +1,46 @@
+---
+title: autocapitalize
+slug: Web/HTML/Globale_Attribute/autocapitalize
+tags:
+  - Automatische Großschreibung
+  - Globales Attribut
+  - HTML
+translation_of: Web/HTML/Global_attributes/autocapitalize
+---
+<p>{{HTMLSidebar("Global_attributes")}}</p>
+
+<p>Das <a href="/en-US/docs/Web/HTML/Global_attributes">Globale Attribut</a> <code><strong>autocapitalize</strong></code> ist ein Aufzählungsattribut, welches kontrolliert ob und wie Text-Input automatisch großgeschrieben wird, während der Nutzer etwas einfügt oder editiert. Das Attribut muss einen der folgenden Werte annehmen:</p>
+
+<ul>
+ <li><code>off</code> oder <code>none</code>: Es wird keine automatische Großschreibung benutzt (alle Buchstaben sind automatisch kleingeschrieben) </li>
+ <li><code>on</code> oder <code>sentences</code>: Der erste Buchstabe jedes Satzes wird zu einem großgeschriebenen Buchstaben transformiert. Die restlichen Buchstaben werden kleingeschrieben.</li>
+ <li><code>words</code>: Der erste Buchstabe jedes Wortes wird zu einem großgeschriebenen Buchstaben transformiert. Die restlichen Buchstaben werden kleingeschrieben.</li>
+ <li><code>characters</code>: Alle Buchstaben sind automatisch großgeschrieben. </li>
+</ul>
+
+<p>Das <code>autocapitalize</code> Attribut hat keine Auswirkungen auf das Verhalten eines physikalischen Keyboards beim Tippen. Aber es hat Auswirkungen auf das Verhalten von anderen Input Mechanismen, wie virtuellen Keyboards auf Mobilfunkgeräten oder Sprachinput. Diese Mechanismen helfen Nutzern oft dabei, den ersten Buchstaben eines Satzes automatisch großzuschreiben. Das <code>autocapitalize</code> Attribut ermöglicht es Autoren dieses Verhalten auf einer per-Element Basis nicht zu berücksichtigen.</p>
+
+<p>Das <code>autocapitalize</code> Attribut führt nie zu automatischer Großschreibung bei einem {{HTMLElement("input")}} Element mit einem {{htmlattrxref("type", "input")}} Attribut, dessen Wert <code>url</code>, <code>email</code>, oder <code>password</code> ist.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "interaction.html#autocapitalization", "autocapitalize")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+
+
+<p>{{Compat("html.global_attributes.autocapitalize")}}</p>
diff --git a/files/de/web/html/globale_attribute/class/index.html b/files/de/web/html/globale_attribute/class/index.html
new file mode 100644
index 0000000000..cf2366a55f
--- /dev/null
+++ b/files/de/web/html/globale_attribute/class/index.html
@@ -0,0 +1,109 @@
+---
+title: class
+slug: Web/HTML/Globale_Attribute/class
+tags:
+  - Klassen Globale Attribute
+translation_of: Web/HTML/Global_attributes/class
+---
+<p class="note">{{HTMLSidebar("Global_attributes")}}</p>
+
+<p>Das <a href="/en-US/docs/Web/HTML/Global_attributes">Globale Attribut</a> <strong>class</strong> ist eine durch Leerzeichen separierte Liste von Klassen dieses Elements. Klassen erlauben es CSS und Javascript auf spezifische Elemente über <a href="/En/CSS/Class_selectors">Klassenselektoren</a> oder DOM-Methoden {{domxref("document.getElementsByClassName")}} zuzugreifen.</p>
+
+<p>Obwohl die Spezifikation keine Anforderung an die Benennung von Klassen stellt, sollten Webentwickler darauf achten, dass der semantische Zweck des Elements beschrieben wird, und gerade nicht die Darstellungseigenschaften.</p>
+
+<p>Beispiel:<br>
+ Attribut <em>hervorgehoben</em> , um einen hervorgehobenen Textteil zu beschreiben aber nicht als  <em>italics</em>.</p>
+
+<p>"Semantische" Namen bleiben logisch (zutreffend), auch wenn sich die Darstellung der Webseite ändert (wenn also z.B. Hervorhebungen anstatt <em>kursiv</em> nun farbig in braun dargestellt werden).</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Bemerkung</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "elements.html#classes", "class")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Keine Änderungen zum letzten Snapshot, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "elements.html#classes", "class")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot von {{SpecName('HTML WHATWG')}}, keine Änderung zu {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "elements.html#classes", "class")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot von  {{SpecName('HTML WHATWG')}}. Von {{SpecName('HTML4.01')}}, <strong>class</strong> ist jetzt ein echtes Globales Attribut.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', "struct/global.html#h-7.5.2", "class")}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Unterstützt alle Elemente außer {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }} [1]</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }} [1]</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <strong>class</strong> ist ein echtes Globales Attribut erst seit Firefox 32.</p>
+
+<h2 id="Weiterführende_Links">Weiterführende Links</h2>
+
+<ul>
+ <li>All <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</li>
+</ul>
diff --git a/files/de/web/html/globale_attribute/contenteditable/index.html b/files/de/web/html/globale_attribute/contenteditable/index.html
new file mode 100644
index 0000000000..916eaf2073
--- /dev/null
+++ b/files/de/web/html/globale_attribute/contenteditable/index.html
@@ -0,0 +1,114 @@
+---
+title: contenteditable
+slug: Web/HTML/Globale_Attribute/contenteditable
+tags:
+  - Globale Attribute
+  - HTML
+  - Referenz
+  - Textbearbeitung
+  - Texteingabe
+  - contenteditable
+translation_of: Web/HTML/Global_attributes/contenteditable
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p>Das <a href="/de/docs/Web/HTML/Globale_Attribute">globale Attribut</a> <code><strong>contenteditable</strong></code> ist ein Aufzählungsattribut, das angibt, ob das Element für den Benutzer bearbeitbar sein soll. Das Attribut muss eines der folgenden Werte annehmen:</p>
+
+<ul>
+ <li><code>true</code> oder eine <em>leere Zeichenkette</em> geben an, dass das Element editierbar sein soll;</li>
+ <li><code>false</code> gibt an, dass das Element nicht editierbar sein darf..</li>
+</ul>
+
+<p>Wenn das Attribut nicht gesetzt ist, wird der Standardwert vom Elternelement <em>geerbt</em>.</p>
+
+<p>Das Attribut ist ein <em>Aufzählungs-</em> und kein <em>Boolean</em>-Attribut. Das bedeutet, dass eines der Werte <code>true</code>, <code>false</code> oder die leere Zeichenkette erforderlich sind und eine abgekürzte Schreibweise wie <code>&lt;label contenteditable&gt;Example Label&lt;/label&gt;</code> nicht erlaubt ist. Die richtige Verwendung ist <code>&lt;label contenteditable="true"&gt;Example Label&lt;/label&gt;</code>.</p>
+
+<p>Die Farbe der {{Glossary("caret", "Texteinfügemarke")}} kann mit der CSS-Eigenschaft {{cssxref("caret-color")}} gesetzt werden.</p>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "editing.html#attr-contenteditable", "contenteditable")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Keine Änderung seit letztem Snapshot, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "editing.html#attr-contenteditable", "contenteditable")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot von {{SpecName('HTML WHATWG')}}, keine Änderung seit {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "editing.html#attr-contenteditable", "contenteditable")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot von {{SpecName('HTML WHATWG')}}, ursprüngliche  Definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{ CompatibilityTable }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatGeckoDesktop("1.9") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatGeckoMobile("1.9") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/Guide/HTML/Content_Editable">Inhalt bearbeitbar machen</a></li>
+ <li><a href="/de/docs/Web/HTML/Globale_Attribute">Globale Attribute</a></li>
+ <li>{{domxref("HTMLElement.contentEditable")}} and {{domxref("HTMLElement.isContentEditable")}}</li>
+ <li>The CSS {{cssxref("caret-color")}} property</li>
+</ul>
diff --git a/files/de/web/html/globale_attribute/dir/index.html b/files/de/web/html/globale_attribute/dir/index.html
new file mode 100644
index 0000000000..28ed6389ac
--- /dev/null
+++ b/files/de/web/html/globale_attribute/dir/index.html
@@ -0,0 +1,85 @@
+---
+title: dir
+slug: Web/HTML/Globale_Attribute/dir
+tags:
+  - Globales Attribut
+  - HTML
+  - Referenz
+  - Textrichtung
+translation_of: Web/HTML/Global_attributes/dir
+---
+<p>{{HTMLSidebar("Global_attributes")}}</p>
+
+<p>Das globale Attribut <strong>dir</strong> ist ein Attribut, das die Richtung des Elementtextes angibt. Es kann folgende Werte haben:</p>
+
+<ul>
+ <li><code>ltr</code>, von <strong>links nach rechts</strong> (englisch: <em>left to right</em>). Wird für Sprachen, die von links nach rechts geschrieben werden (z.B. deutsch) verwendet;</li>
+ <li><code>rtl</code>, von <strong>rechts nach links</strong> (englisch: <em>right to left</em>). Wird für Sprachen, die von rechts nach links geschrieben werden (z.B. arabisch) verwendet;</li>
+ <li><code>auto</code>, lässt den Browser des Nutzers entscheiden. Es benutzt einen simplen Algorithmus, indem es die Zeichen im Element einliest, bis es ein Zeichen mit einer bekannten Richtung findet und dann diese Richtung auf das gesamte Element anwendet.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nutzungsinformationen</strong></p>
+
+<p>Dieses Attribut ist verpflichtend für das {{ HTMLElement("bdo") }}-Element, bei dem es eine andere Bedeutung hat.</p>
+
+<ul>
+ <li>
+  <p>Dieses Attribut wird nicht vom {{ HTMLElement("bdi") }}-Element geerbt. Sein Standardwert ist  <code>auto</code>.</p>
+ </li>
+ <li>
+  <p>Dieses Attribut kann von den CSS-Eigenschaften {{ cssxref("direction") }} and {{ cssxref("unicode-bidi") }} überschrieben werden, sofern eine CSS-Seite eingebunden ist und das Element diese Eigenschaften unterstützt.</p>
+ </li>
+ <li>
+  <p>Da die Richtung eines Textes sprachlich zu seinem Inhalt und nicht zu seiner Darstellung gehört, ist es zu empfehlen, dass Web-Entwickler - sofern möglich - dieses Attribut anstatt der zugehörigen CSS-Eigenschaft zu verwenden. So kann der Text auch in einem Browser, der die CSS-Eigenschaften nicht unterstützt oder in dem CSS deaktiviert ist, korrekt dargestellt werden.</p>
+ </li>
+ <li>
+  <p>Der <code>auto</code> Wert sollte für Daten mit einer unbekannten Richtung verwendet werden, wie zum Beispiel Daten aus Benutzereingaben, möglicherweise in einer Datenbank gespeichert.</p>
+ </li>
+</ul>
+</div>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "dom.html#the-dir-attribute", "dir")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#the-dir-attribute", "dir")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "dom.html#the-dir-attribute", "dir")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', "dirlang.html#h-8.2", "dir")}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+
+
+<p>{{Compat("html.global_attributes.dir")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Alle <a href="/de-DE/docs/Web/HTML/Global_attributes">globalen Attribute</a>.</li>
+ <li>{{domxref("HTMLElement.dir")}}, das auf dieses Attribut zurückgreift</li>
+</ul>
diff --git a/files/de/web/html/globale_attribute/draggable/index.html b/files/de/web/html/globale_attribute/draggable/index.html
new file mode 100644
index 0000000000..3a0dfd105e
--- /dev/null
+++ b/files/de/web/html/globale_attribute/draggable/index.html
@@ -0,0 +1,104 @@
+---
+title: draggable
+slug: Web/HTML/Globale_Attribute/draggable
+tags:
+  - Experimental
+  - Global attributes
+  - HTML
+  - Reference
+translation_of: Web/HTML/Global_attributes/draggable
+---
+<p>{{HTMLSidebar("Global_attributes")}} {{SeeCompatTable}}</p>
+
+<p>Das globale Attribut <strong>draggable</strong> ist ein Attribut, dass zeigt, ob das entsprechende Element auf einen anderen Ort gezogen werden kann. Es unterstützt die {{domxref("HTML_Drag_and_Drop_API","HTML Drag and Drop API")}}. Folgende Werte sind erlaubt:</p>
+
+<ul>
+ <li><span style="font-family: courier new;">true</span>, das Element kann <em>gedraggt</em> werden</li>
+ <li><span style="font-family: courier new;">false</span>, das Element kann nicht <em>gedraggt </em>werden</li>
+</ul>
+
+<p>Wurde das Attribut nicht gesetzt, wird als Wert <code>auto</code> angenommen. Das Drag-Verhalten des Elements wird dann durch den Browser bestimmt. </p>
+
+<p>Bei diesem Attribut handelt es sich nicht um einen <em>booleschen </em>Wert, <code>true</code> oder <code>false</code> muss explizit angegeben werden. Eine Kurzform wie beispielsweise <code>&lt;label draggable&gt;Beispiel Label&lt;/label&gt;</code> ist nicht zulässig. Die korrekte Verwendung ist <code>&lt;label draggable="true"&gt;Beispiel Label&lt;/label&gt;</code>.</p>
+
+<p>Nativ kann das Attribut <strong>draggable </strong>nur für Textauswahl, Bilder und Links verwendet werden. Bei allen anderen Elementen muss das<strong> {{domxref('GlobalEventHandlers.ondragstart','ondragstart')}}</strong><code><strong>-</strong></code>Event gesetzt werden, um Drag &amp; Drop Mechanismen verwendet zu können. <a href="/en-US/docs/DragDrop/Drag_Operations">Dieses Beispiel</a> (englisch) enthält eine ausführlichere Beschreibung der Drag &amp; Drop API und deren Verwendung. </p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "interaction.html#the-draggable-attribute", "draggable")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Keine Änderung seit dem letztem Snapshot, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "editing.html#the-draggable-attribute", "draggable")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot von {{SpecName('HTML WHATWG')}}, initiale Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Eigenschaft</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Funktionalität</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("1.8.1") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Eigenschaft</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Funktionalität</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("1.8.1") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Alle <a href="de/docs/Web/HTML/Globale_Attribute">globalen Attribute</a>.</li>
+</ul>
diff --git a/files/de/web/html/globale_attribute/dropzone/index.html b/files/de/web/html/globale_attribute/dropzone/index.html
new file mode 100644
index 0000000000..4d0667217f
--- /dev/null
+++ b/files/de/web/html/globale_attribute/dropzone/index.html
@@ -0,0 +1,45 @@
+---
+title: dropzone
+slug: Web/HTML/Globale_Attribute/dropzone
+tags:
+  - Experimentell
+translation_of: Web/HTML/Global_attributes/dropzone
+---
+<p class="note">{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}</p>
+
+<p>Das <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">globale Attribut</a> <strong>dropzone</strong> ist ein Attribut, das anzeigt, welche Arten von Inhalt auf dem Element abgelegt werden können. Es wird die <a href="/En/DragDrop/Drag_and_Drop" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;" title="https://developer.mozilla.org/En/DragDrop/Drag_and_Drop">Drag and Drop API</a> verwendet. Es kann folgende Werte enthalten:</p>
+
+<ul>
+ <li><code><span style="font-family: courier new;">copy</span></code>, was anzeigt, dass eine Kopie vom abgelegten Element erstellt wird.</li>
+ <li><code><span style="font-family: courier new;">move</span></code>, was anzeigt, dass das abgelegte Element an diese neue Stelle verschoben wird.</li>
+ <li><code><span style="font-family: courier new;">link</span></code>, was einen Link auf das abgelegte Element erzeugt.</li>
+</ul>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Auszug von {{SpecName('HTML WHATWG')}}, der ursprünglichen Definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{Compat("html.global_attributes.dropzone")}}</p>
+
+<div id="compat-mobile"> </div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Alle <a href="/en-US/docs/Web/HTML/Global_attributes">globalen Attribute</a>.</li>
+</ul>
diff --git a/files/de/web/html/globale_attribute/hidden/index.html b/files/de/web/html/globale_attribute/hidden/index.html
new file mode 100644
index 0000000000..f78b025ca1
--- /dev/null
+++ b/files/de/web/html/globale_attribute/hidden/index.html
@@ -0,0 +1,56 @@
+---
+title: hidden
+slug: Web/HTML/Globale_Attribute/hidden
+tags:
+  - Attribut
+  - Globales Attribut
+  - HTML
+  - Reference
+  - Referenz
+translation_of: Web/HTML/Global_attributes/hidden
+---
+<p class="note">{{HTMLSidebar("Global_attributes")}}</p>
+
+<p>Das <a href="/en-US/docs/Web/HTML/Global_attributes">globale Attribut</a> <strong>hidden </strong>ist ein boolesches Attribut welches angibt, dass das Element nicht oder nicht länger <em>relevant</em> ist. Zum Beispiel, kann es benutzt werden, um Elemente einer Seite zu verstecken, die nicht benötigt werden, wenn ein Anmeldeprozess erfolgreich durchgeführt wurde. Der Browser wird solche Elemente nicht anzeigen.</p>
+
+<p>Dieses Attribut soll nicht benutzt werden, um Inhalt zu verstecken, der rechtmäßig angzeigt werden könnte. Zum Beispiel sollte es nicht benutzt werden, um Seiten eines Tabelleninterface zu verstecken. Dies ist eine Gestaltungsfrage.</p>
+
+<p>Versteckte Elemente sollten nicht mit sichtbaren Elementen verlinkt sein. Elemente, die von versteckten Elementen abstammen, sind trotzdem aktiv, was bedeutet, dass Skript-Elemente immer noch ausgeführt und Form-Elemente gesendet werden können.</p>
+
+<div class="note">
+<p><strong>Bemerkung:</strong> Das Abändern des Wertes der CSS {{cssxref("display")}} Eigenschaft eines Elementes mit dem <code>hidden</code> Attribut überschreibt das Verhalten. Also wird ein Element mit Style <code>display: flex</code> angezeigt, egal ob das <code>hidden</code> Attribut gesetzt ist oder nicht.</p>
+</div>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Bemerkung</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "interaction.html#the-hidden-attribute", "hidden")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Keine Änderung seit letztem Snapshot, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "hidden")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot von {{SpecName('HTML WHATWG')}}, initiale Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("html.global_attributes.hidden")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Alle <a href="/en-US/docs/Web/HTML/Global_attributes">globalen Attribute</a>.</li>
+</ul>
diff --git a/files/de/web/html/globale_attribute/id/index.html b/files/de/web/html/globale_attribute/id/index.html
new file mode 100644
index 0000000000..6e1ef85aad
--- /dev/null
+++ b/files/de/web/html/globale_attribute/id/index.html
@@ -0,0 +1,109 @@
+---
+title: id
+slug: Web/HTML/Globale_Attribute/id
+translation_of: Web/HTML/Global_attributes/id
+---
+<p class="note">{{HTMLSidebar("Global_attributes")}}</p>
+
+<p>Das <strong>id</strong> <a href="/en-US/docs/Web/HTML/Global_attributes">globale Attribut</a> definiert einen eindeutigen Bezeichner (ID) welcher eindeutig im gesamten Dokument sein muss. Das Ziel ist die Identifizierung eines Elementes in Verknüpfungen (durch einen Fragmentbezeichner), Skripting, oder Stylisierung (mit CSS).</p>
+
+<p>Der Wert des Attributes ist eine undurchsichtige Zeichenkette: dies bedeutet, dass der Webautor es nicht benutzen darf um Informationen abzuleiten. Bestimmte Bedeutung, zum Beispiel bedeutungsspezifische Eigenschaften, dürfen nicht von der Zeichenkette abgeleitet sein.</p>
+
+<p>Der Attributwert darf keine Leerzeichen enthalten. Browsers treat non-conforming IDs that contains white spaces as if the white space is part of the ID. In contrast to the <strong>class</strong> attribute, which allows space-separated values, elements can only have one single ID defined through the <strong>id</strong> attribute. Note that an element may have several IDs, but the others should be set by another means, such as via a script interfacing with the DOM interface of the element.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Using characters except ASCII letters and digits, <code>'_'</code>, <code>'-'</code> and <code>'.'</code> may cause compatibility problems, as they weren't allowed in HTML 4. Though this restriction has been lifted in HTML 5, an ID should start with a letter for compatibility.</p>
+</div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "dom.html#the-id-attribute", "id")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#the-id-attribute", "id")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "dom.html#the-id-attribute", "id")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName('HTML WHATWG')}}, now accept <code>'_'</code>, <code>'-'</code> and <code>'.'</code> if not at the beginning fo the id. It is also a true global attribute.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#adef-id', 'id')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown }}[1]</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown }}[1]</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <strong>class</strong> is a true global attribute only since Firefox 32.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>All <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</li>
+ <li>{{domxref("Element.id")}} that reflects this attribute.</li>
+</ul>
diff --git a/files/de/web/html/globale_attribute/index.html b/files/de/web/html/globale_attribute/index.html
new file mode 100644
index 0000000000..59b8f1d2aa
--- /dev/null
+++ b/files/de/web/html/globale_attribute/index.html
@@ -0,0 +1,205 @@
+---
+title: Globale Attribute
+slug: Web/HTML/Globale_Attribute
+tags:
+  - Attribute
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Global_attributes
+---
+<h3 id="HTMLSidebarGlobal_attributes">{{HTMLSidebar("Global_attributes")}}</h3>
+
+<p><strong>Globale Attribute</strong> sind Attribute die alle HTML Elemente gemeinsam haben; Sie können auf alle Elemente angewendet werden, auch wenn Sie auf einige Elemente keinen Effekt haben.</p>
+
+<p>Globale Attribute können für alle <a href="https://developer.mozilla.org/de/docs/Web/HTML/Element">HTML Elemente</a> festgelegt werden, <em>auch für jene die nicht im Standard verankert sind</em>. Das bedeutet, dass auch nicht standardgemäße Elemente diese Attribute erlauben müssen, auch wenn dadurch das Dokument nicht mehr HTML5-konform ist. Zum Beispiel verstecken HTML5-konforme Browser Inhalte wie <code>&lt;foo hidden&gt;...&lt;/foo&gt;</code>, obwohl <code>&lt;foo&gt;</code> kein gültiges HTML Element ist.</p>
+
+<p>Zusätzlich zu den grundlegenden globalen HTML Attributen, gibt es noch die folgenden globalen Attribute:</p>
+
+<ul>
+ <li>{{HTMLAttrDef("xml:lang")}} und {{HTMLAttrDef("xml:base")}} — Diese sind von der XHTML-Spezifikation abgeleitet und veraltet und gibt es nur noch aus Kompatibilitätsgründen.</li>
+ <li>Mehrere <code><strong><a href="/de/docs/Web/Barrierefreiheit/ARIA">aria-*</a></strong></code> Attribute, benutzt für bessere Barrierefreiheit.</li>
+ <li>Die <a href="/de/docs/Web/Guide/Events/Event_handlers">Event Handler</a> Attribute: <code><strong>onabort</strong></code>, <code><strong>onautocomplete</strong></code>, <code><strong>onautocompleteerror</strong></code>, <code><strong>onblur</strong></code>, <code><strong>oncancel</strong></code>, <code><strong>oncanplay</strong></code>, <code><strong>oncanplaythrough</strong></code>, <code><strong>onchange</strong></code>, <code><strong>onclick</strong></code>, <code><strong>onclose</strong></code>, <code><strong>oncontextmenu</strong></code>, <code><strong>oncuechange</strong></code>, <code><strong>ondblclick</strong></code>, <code><strong>ondrag</strong></code>, <code><strong>ondragend</strong></code>, <code><strong>ondragenter</strong></code>, <code><strong>ondragexit</strong></code>, <code><strong>ondragleave</strong></code>, <code><strong>ondragover</strong></code>, <code><strong>ondragstart</strong></code>, <code><strong>ondrop</strong></code>, <code><strong>ondurationchange</strong></code>, <code><strong>onemptied</strong></code>, <code><strong>onended</strong></code>, <code><strong>onerror</strong></code>, <code><strong>onfocus</strong></code>, <code><strong>oninput</strong></code>, <code><strong>oninvalid</strong></code>, <code><strong>onkeydown</strong></code>, <code><strong>onkeypress</strong></code>, <code><strong>onkeyup</strong></code>, <code><strong>onload</strong></code>, <code><strong>onloadeddata</strong></code>, <code><strong>onloadedmetadata</strong></code>, <code><strong>onloadstart</strong></code>, <code><strong>onmousedown</strong></code>, <code><strong>onmouseenter</strong></code>, <code><strong>onmouseleave</strong></code>, <code><strong>onmousemove</strong></code>, <code><strong>onmouseout</strong></code>, <code><strong>onmouseover</strong></code>, <code><strong>onmouseup</strong></code>, <code><strong>onmousewheel</strong></code>, <code><strong>onpause</strong></code>, <code><strong>onplay</strong></code>, <code><strong>onplaying</strong></code>, <code><strong>onprogress</strong></code>, <code><strong>onratechange</strong></code>, <code><strong>onreset</strong></code>, <code><strong>onresize</strong></code>, <code><strong>onscroll</strong></code>, <code><strong>onseeked</strong></code>, <code><strong>onseeking</strong></code>, <code><strong>onselect</strong></code>, <code><strong>onshow</strong></code>, <code><strong>onsort</strong></code>, <code><strong>onstalled</strong></code>, <code><strong>onsubmit</strong></code>, <code><strong>onsuspend</strong></code>, <code><strong>ontimeupdate</strong></code>, <code><strong>ontoggle</strong></code>, <code><strong>onvolumechange</strong></code>, <code><strong>onwaiting</strong></code>.</li>
+</ul>
+
+<h2 id="Liste_globaler_Attribute">Liste globaler Attribute</h2>
+
+<dl>
+ <dt><a href="/de/docs/Web/HTML/Globale_Attribute/accesskey">{{HTMLAttrDef("accesskey")}}</a></dt>
+ <dd>Bietet einen Hinweis zum Generieren eines Tastenkürzels für das aktuelle Element. Dieses Attribut besteht aus einer durch Leerzeichen getrennten Liste von Zeichen. Der Browser sollte das Erste verwenden, welches auf der Computertastatur vorhanden ist.</dd>
+ <dt><a href="/en-US/docs/Web/HTML/Global_attributes/autocapitalize">{{HTMLAttrDef("autocapitalize")}}</a></dt>
+ <dd>Steuert, ob und wie Texteingaben automatisch großgeschrieben werden, wenn sie vom Benutzer eingegeben / bearbeitet werden. Es kann folgende Werte annehmen:
+ <ul>
+  <li><code>off</code> oder <code>none</code>, keine automatische Großschreibung wird angewendet (alle Buchstaben sind kleingeschrieben)</li>
+  <li><code>on</code> oder <code>sentences</code>, der erste Buchstabe jedes Satzes ist standardmäßig ein Großbuchstabe; alle weiteren Buchstaben sind standardmäßig kleingeschrieben</li>
+  <li><code>words</code>, der erste Buchstabe jedes Wortes ist standardmäßig ein Großbuchstabe; alle weiteren Buchstaben sind standardmäßig kleingeschrieben</li>
+  <li><code>characters</code>, alle Buchstaben werden standardmäßig großgeschrieben.</li>
+ </ul>
+ </dd>
+ <dt><a href="/en-US/docs/Web/HTML/Global_attributes/class">{{HTMLAttrDef("class")}}</a></dt>
+ <dd>Eine durch Leerzeichen getrennte Liste der Klassen des Elements. Mit Klassen können CSS und JavaScript über die <a href="/de/docs/Web/CSS/Klassenselektoren">Klassenselektoren</a> bestimmte Elemente, oder Funktionen wie die Methode {{DOMxRef("Document.getElementsByClassName()")}} auswählen und darauf zugreifen.</dd>
+ <dt><a href="/en-US/docs/Web/HTML/Global_attributes/contenteditable">{{HTMLAttrDef("contenteditable")}}</a></dt>
+</dl>
+
+<p>Ein Aufzählungsattribut das angibt, ob das Element für den Benutzer bearbeitbar sein soll. Das Attribut muss einen der folgenden Werte annehmen:</p>
+
+<ul>
+ <li><code>true</code> oder eine <em>leere Zeichenkette</em> geben an,  das Element editierbar sein soll;</li>
+ <li><code>false</code> gibt an, dass das Element nicht editierbar sein darf.</li>
+</ul>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/HTML/Global_attributes/contextmenu">{{HTMLAttrDef("contextmenu")}}</a></dt>
+ <dd>Die <code><a href="#attr-id"><strong>id</strong></a></code> von einem {{HTMLElement("menu")}} welches als Kontextmenu für das Element benutzt werden soll.</dd>
+ <dt><a href="/en-US/docs/Web/HTML/Global_attributes/data-*">{{HTMLAttrDef("data-*")}}</a></dt>
+ <dd>Diese Attributklasse erlaubt es Daten zwischen <a href="/en-US/docs/Web/HTML" title="en/HTML">HTML</a> und <a href="/en-US/docs/DOM" title="en/DOM">DOM</a> auszutauschen und auch mit Skripten darauf zuzugreifen. Diese Daten sind in dem jeweiligen  {{DOMxRef("HTMLElement")}} gespeichert und können über {{DOMxRef("HTMLElement.dataset")}} ausgelesen oder geändert werden.</dd>
+ <dt><a href="/en-US/docs/Web/HTML/Global_attributes/dir">{{HTMLAttrDef("dir")}}</a></dt>
+ <dd>Ein Aufzählungsattribut das die Richtung des Elementtextes angibt. Es kann folgende Werte haben:
+ <ul>
+  <li><code>ltr</code>, von <strong>links nach rechts</strong> (englisch: <em>left to right</em>). Wird für Sprachen, die von links nach rechts geschrieben werden (z.B. deutsch) verwendet;</li>
+  <li><code>rtl</code>, von <strong>rechts nach links</strong> (englisch: <em>right to left</em>). Wird für Sprachen, die von rechts nach links geschrieben werden (z.B. arabisch) verwendet;</li>
+  <li><code>auto</code>, lässt den Browser des Nutzers entscheiden. Es benutzt einen simplen Algorithmus, indem es die Zeichen im Element einliest, bis es ein Zeichen mit einer bekannten Richtung findet und dann diese Richtung auf das gesamte Element anwendet.</li>
+ </ul>
+ </dd>
+ <dt><a href="/en-US/docs/Web/HTML/Global_attributes/draggable">{{HTMLAttrDef("draggable")}}</a></dt>
+ <dd>Ein Aufzählungsattribut das zeigt, ob das entsprechende Element auf einen anderen Ort gezogen werden kann. Es unterstützt die <a href="https://developer.mozilla.org/de/docs/Web/API/HTML_Drag_and_Drop_API" rel="nofollow" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben. Bitte überlege, mitzuwirken!"><code>HTML Drag and Drop API</code></a>. Folgende Werte sind erlaubt:
+ <ul>
+  <li><code>true</code>, das Element kann <em>gedraggt</em> werden.</li>
+  <li><code>false</code>, das Element kann nicht <em>gedraggt </em>werden.</li>
+ </ul>
+ </dd>
+ <dt><a href="/en-US/docs/Web/HTML/Global_attributes/dropzone">{{HTMLAttrDef("dropzone")}}</a> {{Experimental_Inline}}</dt>
+ <dd>Ein Aufzählungsattribut das anzeigt, welche Arten von Inhalt auf dem Element abgelegt werden können. Es wird die <a href="https://developer.mozilla.org/En/DragDrop/Drag_and_Drop" title="https://developer.mozilla.org/En/DragDrop/Drag_and_Drop">Drag and Drop API</a> verwendet. Es kann folgende Werte annehmen:
+ <ul>
+  <li><code>copy</code>,  was anzeigt, dass eine Kopie vom abgelegten Element erstellt wird.</li>
+  <li><code>move</code>, was anzeigt, dass das abgelegte Element an diese neue Stelle verschoben wird.</li>
+  <li><code>link</code>, was einen Link auf das abgelegte Element erzeugt.</li>
+ </ul>
+ </dd>
+ <dt><a href="/en-US/docs/Web/HTML/Global_attributes/exportparts">{{HTMLAttrDef("exportparts")}}</a> {{Experimental_Inline}}</dt>
+ <dd>Used to transitively export shadow parts from a nested shadow tree into a containing light tree.</dd>
+ <dt><a href="/en-US/docs/Web/HTML/Global_attributes/hidden">{{HTMLAttrDef("hidden")}}</a></dt>
+ <dd>A Boolean attribute indicates that the element is not yet, or is no longer, <em>relevant</em>. For example, it can be used to hide elements of the page that can't be used until the login process has been completed. The browser won't render such elements. This attribute must not be used to hide content that could legitimately be shown.</dd>
+ <dt><a href="/en-US/docs/Web/HTML/Global_attributes/id">{{HTMLAttrDef("id")}}</a></dt>
+ <dd>Defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).</dd>
+ <dt><a href="/en-US/docs/Web/HTML/Global_attributes/inputmode">{{HTMLAttrDef("inputmode")}}</a></dt>
+ <dd>Provides a hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents. Used primarily on {{HTMLElement("input")}} elements, but is usable on any element while in {{HTMLAttrxRef("contenteditable")}} mode.</dd>
+ <dt><a href="/en-US/docs/Web/HTML/Global_attributes/is">{{HTMLAttrDef("is")}}</a></dt>
+ <dd>Allows you to specify that a standard HTML element should behave like a registered custom built-in element (see <a href="/en-US/docs/Web/Web_Components/Using_custom_elements">Using custom elements</a> for more details).</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note: </strong>The <code>item*</code> attributes are part of the <a class="external" href="https://html.spec.whatwg.org/multipage/microdata.html#microdata">WHATWG HTML Microdata feature</a>.</p>
+</div>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemid">{{HTMLAttrDef("itemid")}}</a></dt>
+ <dd>The unique, global identifier of an item.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemprop">{{HTMLAttrDef("itemprop")}}</a></dt>
+ <dd>Used to add properties to an item. Every HTML element may have an <code>itemprop</code> attribute specified, where an <code>itemprop</code> consists of a name and value pair.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemref">{{HTMLAttrDef("itemref")}}</a></dt>
+ <dd>Properties that are not descendants of an element with the <code>itemscope</code> attribute can be associated with the item using an <code>itemref</code>. It provides a list of element ids (not <code>itemid</code>s) with additional properties elsewhere in the document.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemscope">{{HTMLAttrDef("itemscope")}}</a></dt>
+ <dd><code>itemscope</code> (usually) works along with {{HTMLAttrxRef("itemtype")}} to specify that the HTML contained in a block is about a particular item. <code>itemscope</code> creates the Item and defines the scope of the <code>itemtype</code> associated with it. <code>itemtype</code> is a valid URL of a vocabulary (such as <a href="https://schema.org/">schema.org</a>) that describes the item and its properties context.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemtype">{{HTMLAttrDef("itemtype")}}</a></dt>
+ <dd>Specifies the URL of the vocabulary that will be used to define <code>itemprop</code>s (item properties) in the data structure. {{HTMLAttrxRef("itemscope")}} is used to set the scope of where in the data structure the vocabulary set by <code>itemtype</code> will be active.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang">{{HTMLAttrDef("lang")}}</a></dt>
+ <dd>Helps define the language of an element: the language that non-editable elements are in, or the language that editable elements should be written in by the user. The attribute contains one “language tag” (made of hyphen-separated “language subtags”) in the format defined in <a href="https://www.ietf.org/rfc/bcp/bcp47.txt"><em>Tags for Identifying Languages (BCP47)</em></a>. <a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute$edit#attr-xml:lang"><strong>xml:lang</strong></a> has priority over it.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part">{{HTMLAttrDef("part")}}</a> {{Experimental_Inline}}</dt>
+ <dd>A space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the {{CSSxRef("::part()")}} pseudo-element.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot">{{HTMLAttrDef("slot")}}</a></dt>
+ <dd>Assigns a slot in a <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a> shadow tree to an element: An element with a <code>slot</code>attribute is assigned to the slot created by the {{HTMLElement("slot")}} element whose {{HTMLAttrxRef("name", "slot")}} attribute's value matches that <code>slot</code> attribute's value.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck">{{HTMLAttrDef("spellcheck")}}</a> {{Experimental_Inline}}</dt>
+ <dd>An enumerated attribute defines whether the element may be checked for spelling errors. It may have the following values:
+ <ul>
+  <li><code>true</code>, which indicates that the element should be, if possible, checked for spelling errors;</li>
+  <li><code>false</code>, which indicates that the element should not be checked for spelling errors.</li>
+ </ul>
+ </dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/style">{{HTMLAttrDef("style")}}</a></dt>
+ <dd>Contains <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> styling declarations to be applied to the element. Note that it is recommended for styles to be defined in a separate file or files. This attribute and the {{HTMLElement("style")}} element have mainly the purpose of allowing for quick styling, for example for testing purposes.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex">{{HTMLAttrDef("tabindex")}}</a></dt>
+ <dd>An integer attribute indicating if the element can take input focus (is <em>focusable</em>), if it should participate to sequential keyboard navigation, and if so, at what position. It can take several values:
+ <ul>
+  <li>a <em>negative value</em> means that the element should be focusable, but should not be reachable via sequential keyboard navigation;</li>
+  <li><code>0</code> means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;</li>
+  <li>a <em>positive value</em> means that the element should be focusable and reachable via sequential keyboard navigation; the order in which the elements are focused is the increasing value of the <a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute$edit#attr-tabindex"><strong>tabindex</strong></a>. If several elements share the same tabindex, their relative order follows their relative positions in the document.</li>
+ </ul>
+ </dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title">{{HTMLAttrDef("title")}}</a></dt>
+ <dd>Contains a text representing advisory information related to the element it belongs to. Such information can typically, but not necessarily, be presented to the user as a tooltip.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/translate">{{HTMLAttrDef("translate")}}</a> {{Experimental_Inline}}</dt>
+ <dd>An enumerated attribute that is used to specify whether an element's attribute values and the values of its {{DOMxRef("Text")}} node children are to be translated when the page is localized, or whether to leave them unchanged. It can have the following values:
+ <ul>
+  <li>empty string and <code>"yes"</code>, which indicates that the element will be translated.</li>
+  <li><code>"no"</code>, which indicates that the element will not be translated.</li>
+ </ul>
+ </dd>
+ <dd>
+ <h2 id="Specifications">Specifications</h2>
+
+ <table>
+  <thead>
+   <tr>
+    <th scope="col">Specification</th>
+    <th scope="col">Status</th>
+    <th scope="col">Comment</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td>{{SpecName("HTML WHATWG", "dom.html#global-attributes", "Global attributes")}}</td>
+    <td>{{Spec2("HTML WHATWG")}}</td>
+    <td></td>
+   </tr>
+   <tr>
+    <td>{{SpecName("CSS Shadow Parts", "#exposing")}}</td>
+    <td>{{Spec2("CSS Shadow parts")}}</td>
+    <td>Added the <code>part</code> and <code>exportparts</code> global attributes.</td>
+   </tr>
+   <tr>
+    <td>{{SpecName("HTML5.3", "dom.html#global-attributes", "Global attributes")}}</td>
+    <td>{{Spec2("HTML5.3")}}</td>
+    <td></td>
+   </tr>
+   <tr>
+    <td>{{SpecName("HTML5.2", "dom.html#global-attributes", "Global attributes")}}</td>
+    <td>{{Spec2("HTML5.2")}}</td>
+    <td>Snapshot of {{SpecName("HTML WHATWG")}}. From {{SpecName("HTML5.1")}}, <code>itemid</code>, <code>itemprop</code>, <code>itemref</code>, <code>itemscope</code>, and <code>itemtype</code> have been added.</td>
+   </tr>
+   <tr>
+    <td>{{SpecName("HTML5.1", "dom.html#global-attributes", "Global attributes")}}</td>
+    <td>{{Spec2("HTML5.1")}}</td>
+    <td>Snapshot of {{SpecName("HTML WHATWG")}}. From {{SpecName("HTML5 W3C")}}, <code>contextmenu</code>, <code>draggable</code>, <code>dropzone</code>, and <code>spellcheck</code> have been added.</td>
+   </tr>
+   <tr>
+    <td>{{SpecName("HTML5 W3C", "dom.html#global-attributes", "Global attributes")}}</td>
+    <td>{{Spec2("HTML5 W3C")}}</td>
+    <td>Snapshot of {{SpecName("HTML WHATWG")}}. From {{SpecName("HTML4.01")}}, the concept of global attributes is introduced and the <code>dir</code>, <code>lang</code>, <code>style</code>, <code>id</code>, <code>class</code>, <code>tabindex</code>, <code>accesskey</code>, and <code>title</code> are now true global attributes.<br>
+     <code>xml:lang</code> which was initially part of XHTML, is now also part of HTML.<br>
+     <code>hidden</code>, <code>data-*</code>, <code>contenteditable</code>, and <code>translate</code> have been added.</td>
+   </tr>
+   <tr>
+    <td>{{SpecName("HTML4.01")}}</td>
+    <td>{{Spec2("HTML4.01")}}</td>
+    <td>There are no global attributes defined. Several attributes that will become global attributes in subsequent specifications are defined on a subset of elements.<br>
+     <code>class</code> and <code>style</code> are supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.<br>
+     <code>dir</code> is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.<br>
+     <code>id</code> is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.<br>
+     <code>lang</code> is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.<br>
+     <code>tabindex</code> is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.<br>
+     <code>accesskey</code> is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} and {{HTMLElement("textarea")}}.<br>
+     <code>title</code> is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, and {{HTMLElement("title")}}.</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <h2 id="Browser_compatibility">Browser compatibility</h2>
+
+ <p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+ <p>{{Compat("html.global_attributes")}}</p>
+
+ <h2 id="See_also">See also</h2>
+ {{DOMxRef("Element")}} and {{DOMxRef("GlobalEventHandlers")}} interfaces that allow to query most global attributes.</dd>
+</dl>
diff --git a/files/de/web/html/globale_attribute/inputmode/index.html b/files/de/web/html/globale_attribute/inputmode/index.html
new file mode 100644
index 0000000000..d5dd048922
--- /dev/null
+++ b/files/de/web/html/globale_attribute/inputmode/index.html
@@ -0,0 +1,76 @@
+---
+title: inputmode
+slug: Web/HTML/Globale_Attribute/inputmode
+tags:
+  - Attribute
+  - Bearbeiten
+  - Eingabemodus
+  - Formulare
+  - Globale Attribute
+  - HTML
+  - Referenz
+  - Text
+  - Texteingabe
+  - Web
+  - global
+translation_of: Web/HTML/Global_attributes/inputmode
+---
+<p><span class="seoSummary">Das <strong><code>inputmode</code></strong> <a href="/en-US/docs/Web/HTML/Global_attributes">globale Attribut</a> </span>ist ein aufgezähltes Attribut, das einen Hinweis auf die Art der Daten liefert, die der Benutzer während der Bearbeitung des Elements oder seines Inhalts eingeben kann. Es kann die folgenden Werte haben:</p>
+
+<dl>
+ <dt><code>"none"</code></dt>
+ <dd>Keine virtuelle Tastatur; dies ist nützlich, wenn die Anwendung oder die Website ihre eigene Tastatureingabesteuerung implementiert.</dd>
+ <dt><code>"text"</code></dt>
+ <dd>Standard-Text-Eingabetastatur für das aktuelle Gebietsschema des Benutzers.</dd>
+ <dt><code>"decimal"</code></dt>
+ <dd>Fraktionierte numerische Eingabetastatur, die die Ziffern und das entsprechende Trennzeichen für das Gebietsschema des Benutzers enthält (typischerweise entweder "." oder ",").</dd>
+ <dt><code>"numeric"</code></dt>
+ <dd>Numerische Eingabetastatur; alles, was benötigt wird, sind die Ziffern 0 bis 9.</dd>
+ <dt><code>"tel"</code></dt>
+ <dd>Eine Telefontastatur-Eingabe, die die Ziffern 0 bis 9, das Sternchen ("*") und die Pfund-Taste ("#") enthält. Für Formulareingaben, die eine Telefontastatur erfordern, sollte stattdessen <code><a href="/en-US/docs/Web/HTML/Element/input/tel">&lt;input type="tel"&gt;</a></code> verwendet werden.</dd>
+ <dt><code>"search"</code></dt>
+ <dd>Eine virtuelle Tastatur, die für die Sucheingabe optimiert ist. So kann beispielsweise die Eingabetaste in "Suchen" umbenannt werden, und es kann weitere Optimierungen geben.</dd>
+ <dt><code>"email"</code></dt>
+ <dd>Eine virtuelle Tastatur, die für die Eingabe von E-Mail-Adressen optimiert ist; typischerweise beinhaltet dies das Zeichen "@" sowie andere Optimierungen. Für Formulareingaben, die eine Eingabe der E-Mail-Adresse erfordern, sollte stattdessen <code><a href="/en-US/docs/Web/HTML/Element/input/email">&lt;input type="email"&gt;</a></code> verwendet werden.</dd>
+ <dt><code>"url"</code></dt>
+ <dd>Eine Tastatur, die für die Eingabe von URLs optimiert ist. Dies kann z.B. dazu führen, dass die Taste "/" prominenter verfügbar ist. Erweiterte Funktionen können auch den Zugriff auf die Historie und dergleichen beinhalten. Für Formulareingaben, die eine URL anfordern, sollte stattdessen <code><a href="/en-US/docs/Web/HTML/Element/input/url">&lt;input type="url"&gt;</a></code> verwendet werden.</dd>
+</dl>
+
+<p>Wenn dieses Attribut nicht gesetzt ist, lautet sein Standardwert <code>"text"</code>, was darauf hinweist, dass die Standard-Text-Eingabetastatur des Gebietsschemas verwendet werden sollte.</p>
+
+<div class="warning">
+<p><strong>Spezifischer Konflikt:</strong> Das <a href="https://html.spec.whatwg.org/multipage/interaction.html#attr-inputmode">WHATWG spec lists <code>inputmode</code></a>, und moderne Browser arbeiten daran, sie zu unterstützen. Das <a href="https://www.w3.org/TR/html52/index.html#contents">W3C HTML 5.2 spec</a> listet es nicht mehr (markiert es als veraltet). Sie sollten die WHATWG-Definition als richtig betrachten, bis ein Konsens erreicht ist.</p>
+</div>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Bemerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "interaction.html#input-modalities:-the-inputmode-attribute", "inputmode")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+
+
+<p>{{Compat("html.global_attributes.inputmode")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Alle <a href="/en-US/docs/Web/HTML/Global_attributes">globalen Attribute</a>.</li>
+</ul>
+
+<div>{{HTMLSidebar("Global_attributes")}}</div>
diff --git a/files/de/web/html/globale_attribute/is/index.html b/files/de/web/html/globale_attribute/is/index.html
new file mode 100644
index 0000000000..ff888d1002
--- /dev/null
+++ b/files/de/web/html/globale_attribute/is/index.html
@@ -0,0 +1,62 @@
+---
+title: is
+slug: Web/HTML/Globale_Attribute/is
+translation_of: Web/HTML/Global_attributes/is
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p><span class="seoSummary">The <strong><code>is</code></strong> <a href="/en-US/docs/Web/HTML/Global_attributes">global attribute</a> allows you to specify that a standard HTML element should behave like a defined custom built-in element (see <a href="/en-US/docs/Web/Web_Components/Using_custom_elements">Using custom elements</a> for more details).</span></p>
+
+<p>This attribute can only be used if the specified custom element name has been successfully <a href="/en-US/docs/Web/API/CustomElementRegistry/define">defined</a> in the current document, and extends the element type it is being applied to.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>The following code is taken from our <a href="https://github.com/mdn/web-components-examples/tree/master/word-count-web-component">word-count-web-component</a> example (<a href="https://mdn.github.io/web-components-examples/word-count-web-component/">see it live also</a>).</p>
+
+<pre class="brush: js">// Create a class for the element
+class WordCount extends HTMLParagraphElement {
+  constructor() {
+    // Always call super first in constructor
+    super();
+
+    // Constructor contents ommitted for brevity
+    ...
+
+  }
+}
+
+// Define the new element
+customElements.define('word-count', WordCount, { extends: 'p' });</pre>
+
+<pre class="brush: html">&lt;p is="word-count"&gt;&lt;/p&gt;</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "custom-elements.html#attr-is", "is")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("html.global_attributes.is")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>All <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</li>
+</ul>
diff --git a/files/de/web/html/globale_attribute/kontextmenu/index.html b/files/de/web/html/globale_attribute/kontextmenu/index.html
new file mode 100644
index 0000000000..33c1cc2e99
--- /dev/null
+++ b/files/de/web/html/globale_attribute/kontextmenu/index.html
@@ -0,0 +1,169 @@
+---
+title: Kontextmenü
+slug: Web/HTML/Globale_Attribute/kontextmenu
+tags:
+  - Globale Attribute
+  - HTML
+  - Kontextmenü
+  - Referenz
+translation_of: Web/HTML/Global_attributes/contextmenu
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<div class="warning">
+<p>Das <a href="https://html.spec.whatwg.org/multipage/obsolete.html#attr-contextmenu">contextmenu Attrbut ist obsolet</a> und die Unterstützung wird aus allen Browsern entfernt werden.</p>
+</div>
+
+<p>Das <a href="/en-US/docs/Web/HTML/Global_attributes">globale Attribut </a><code><strong>contextmenu</strong></code> ist die <a href="/en-US/docs/Web/HTML/Global_attributes/id"><strong>id</strong></a> von einem {{HTMLElement("menu")}}, welches als Kontextmenü benutzt werden soll.</p>
+
+<p>Ein <em>Kontextmenü</em> ist ein Menü, dass nach einer Interaktion des Benutzers erscheint. HTML5 erlaubt nun, dieses Menü anzupassen. Hier sind ein paar Beispiele, inklusive verschachtelter Menüs.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html; highlight:[1,10,15]">&lt;body contextmenu="share"&gt;
+  &lt;menu type="context" id="share"&gt;
+    &lt;menu label="share"&gt;
+      &lt;menuitem label="Twitter" onclick="shareViaTwitter()"&gt;&lt;/menuitem&gt;
+      &lt;menuitem label="Facebook" onclick="shareViaFacebook()"&gt;&lt;/menuitem&gt;
+    &lt;/menu&gt;
+  &lt;/menu&gt;
+  &lt;ol&gt;
+    &lt;li&gt;
+      Überall in diesem Beispiel kannst du die Seite über das Kontextmenü auf Twitter und Facebook teilen.
+    &lt;/li&gt;
+    &lt;li contextmenu="changeFont" id="fontSizing"&gt;
+      In diesem besonderen Listen-Element kannst du die Schriftgröße eines
+      Textes über das Kontextmenü vergrößern und verkleinern.
+    &lt;/li&gt;
+    &lt;menu type="context" id="changeFont"&gt;
+      &lt;menuitem label="Schrift vergrößern" onclick="incFont()"&gt;&lt;/menuitem&gt;
+      &lt;menuitem label="Schrift verkleinern" onclick="decFont()"&gt;&lt;/menuitem&gt;
+    &lt;/menu&gt;
+    &lt;li contextmenu="ChangeImage" id="changeImage"&gt;
+      Auf dem unteren Bild kannst du die Option
+      "Wechsele Bild" im Kontextmenü auswählen.&lt;br /&gt;
+      &lt;img src="https://developer.mozilla.org/media/img/promote/promobutton_mdn5.png"
+          contextmenu="ChangeImage" id="promoButton" /&gt;
+      &lt;menu type="context" id="ChangeImage"&gt;
+        &lt;menuitem label="Wechsele Bild" onclick="changeImage()"&gt;&lt;/menuitem&gt;
+      &lt;/menu&gt;
+    &lt;/li&gt;
+  &lt;/ol&gt;
+&lt;/body&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush:js">function shareViaTwitter() {
+  window.open("https://twitter.com/intent/tweet?text=" +
+      "Hurray! I am learning ContextMenu from MDN via Mozilla");
+}
+
+function shareViaFacebook() {
+  window.open("https://facebook.com/sharer/sharer.php?u=" +
+      "https://developer.mozilla.org/en/HTML/Element/Using_HTML_context_menus");
+}
+
+function incFont() {
+  document.getElementById("fontSizing").style.fontSize = "larger";
+}
+
+function decFont() {
+  document.getElementById("fontSizing").style.fontSize = "smaller";
+}
+
+function changeImage() {
+  var index = Math.ceil(Math.random() * 39 + 1);
+  document.images[0].src =
+      "https://developer.mozilla.org/media/img/promote/promobutton_mdn" +
+      index + ".png";
+}</pre>
+
+<h3 id="Ergebnis">Ergebnis</h3>
+
+<p>{{EmbedLiveSample("Beispiel", "100%", 400)}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "forms.html#attr-contextmenu", "contextmenu")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Keine Änderungen seit dem letzten Snapshot, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "interactive-elements.html#context-menus", "contextmenu")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot von {{SpecName('HTML WHATWG')}}, initiale Definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop(9)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(20)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Eine experimentelle Implementation war zwischenzeitlich mit der Kommandozeilen-Option <code>--enable-blink-features=ContextMenu</code> verfügbar. Bis Chrome 52 und Opera 39 war diese außerdem durch Aktivieren der Option <em>Experimental Web Platform</em> verfügbar, welche aber aufgrund eines Kompatibilitätsproblems entfernt wurde. Dies ist dokumentiert in <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=87553">Chromium bug 87553</a>.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Alle <a href="/en-US/docs/Web/HTML/Global_attributes">globalen Attribute</a></li>
+ <li>{{domxref("HTMLElement.contextMenu")}}</li>
+</ul>
diff --git a/files/de/web/html/globale_attribute/lang/index.html b/files/de/web/html/globale_attribute/lang/index.html
new file mode 100644
index 0000000000..705dfa4396
--- /dev/null
+++ b/files/de/web/html/globale_attribute/lang/index.html
@@ -0,0 +1,60 @@
+---
+title: lang
+slug: Web/HTML/Globale_Attribute/lang
+tags:
+  - Attribute
+  - HTML
+  - Referenz
+  - Sprachen
+  - global
+translation_of: Web/HTML/Global_attributes/lang
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p>Das globale Attribut <strong>lang</strong> <a href="/en-US/docs/Web/HTML/Global_attributes">global attribute</a> wird verwendet, um die Sprache eines Elementes oder die zu verwendene Sprache für zu bearbeitende Elemente festzulegen. Dieses Attribut enthält nur einen Wert, der der Richtlinie "<a class="external" href="http://www.ietf.org/rfc/bcp/bcp47.txt"><em>Tags for Identifying Languages (BCP47)</em></a>" entspricht. Wenn kein Wert festgelegt wurde, wird automatisch <em>unkn</em><em>own</em> als Sprache festgelegt; Nach BCP47 ungültige Werte werden als <em>invalid</em> behandelt.</p>
+
+<p>Auch wenn ein Wert für das <strong>lang</strong>-Attribut vergeben wurde, kann es vorkommen, dass es nicht beachtet wird, weil ein <a href="/en-US/docs/Web/HTML/Global_attributes/xml:lang"><strong>xml:lang</strong></a>-Attribut immer priorisiert wird.</p>
+
+<p>Für die CSS-Klasse {{cssxref(":lang")}} gilt, dass zwei ungültige Werte getrennt von einander behandelt werden, wenn sich ihr Name unterscheidet. (Wenn Sie dies nicht verstehen, lesen Sie bitte den englischen Originalartikel.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikiation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Keine Veränderungen zur letzten Version, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Version von {{SpecName('HTML WHATWG')}}, Keine Veränderungen zu {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Version von {{SpecName('HTML WHATWG')}}, Verhalten bei <code>xml:lang</code> und vorbestimmten Sprachgen durch einen Algorithmus festgelegt. Ebenfalls ein echtes globales Attribut.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/dirlang.html#h-8.1', 'lang')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Unterstützt alle Elemente außer diesen: {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{Compat("html.global_attributes.lang")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Alle <a href="/en-US/docs/Web/HTML/Global_attributes">globalen Attribute</a>.</li>
+</ul>
diff --git a/files/de/web/html/globale_attribute/style/index.html b/files/de/web/html/globale_attribute/style/index.html
new file mode 100644
index 0000000000..7c3c2b5c77
--- /dev/null
+++ b/files/de/web/html/globale_attribute/style/index.html
@@ -0,0 +1,107 @@
+---
+title: style
+slug: Web/HTML/Globale_Attribute/style
+translation_of: Web/HTML/Global_attributes/style
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p>Das <a href="/en-US/docs/Web/HTML/Global_attributes">globale Attribut</a> <strong>style</strong> kann <a href="/en-US/docs/Web/CSS">CSS</a>-Stilvorschriften für das entsprechende Element enthalten. Bitte beachten Sie, dass eine Auslagerung der Stilvorschriften in eine externe CSS-Datei vorzuziehen sind! Dieses Attribut und das {{HTMLElement("style")}}-Element haben den großen Vorteil, schnell ein paar Stilvorschriften festzulegen, zum Beispiel um etwas nur kurz zu testen.</p>
+
+<div class="note">
+<p><strong>Verwendung: </strong>Dieses Attribut sollte nicht für inhaltliche Informationen genutzt werden. Wenn alle Stilvorschriften entfernt wurden, soll die Seite dennoch inhaltlich korrekt bleiben. Deshalb sollte es auch nicht zum Verstecken von irrelevanten Informationen genutzt werden, dieses Ziel verfolgt man am besten mit dem <strong><a href="#attr-hidden">hidden</a>-</strong>Attribut.</p>
+</div>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "dom.html#the-style-attribute", "style")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Keine Änderungen seit der letzten Version {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#the-style-attribute", "style")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Version {{SpecName('HTML WHATWG')}}, keine Ändeurngen zur Version {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "dom.html#the-style-attribute", "style")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Version {{SpecName('HTML WHATWG')}}. Seit {{SpecName("HTML4.01")}} ist es nun ein globales Attribut</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'present/styles.html#h-14.2.2', 'style')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Unterstützt alle Elemente außer {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, und {{HTMLElement("title")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Style", "", "")}}</td>
+   <td>{{Spec2("CSS3 Style")}}</td>
+   <td>Definiert den Inhalt des <code>style</code>-Attributes.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funktion</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>grundlegende Unterstützung</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funktion</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>grundlegende Unterstützung</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Weitere_Informationen">Weitere Informationen</h2>
+
+<ul>
+ <li>Alle <a href="/en-US/docs/Web/HTML/Global_attributes">globalen Attribute</a>.</li>
+</ul>
diff --git a/files/de/web/html/globale_attribute/tabindex/index.html b/files/de/web/html/globale_attribute/tabindex/index.html
new file mode 100644
index 0000000000..e097cc7985
--- /dev/null
+++ b/files/de/web/html/globale_attribute/tabindex/index.html
@@ -0,0 +1,130 @@
+---
+title: tabindex
+slug: Web/HTML/Globale_Attribute/tabindex
+tags:
+  - Accessibility
+  - Global attributes
+  - HTML
+  - Reference
+  - a11y
+translation_of: Web/HTML/Global_attributes/tabindex
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p><span class="seoSummary">Das  <a href="/en-US/docs/Web/HTML/Global_attributes">Globale Attribut</a> <strong><code>tabindex</code></strong> gibt an, ob sein Element fokussiert werden kann, ob und an welcher Stelle es an der sequentiellen Tastaturnavigation beteiligt ist (normalerweise mit der Tabulatortaste, daher der Name).</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/attribute-tabindex.html","tabbed-standard")}}</div>
+
+<p class="hidden">Die Quelle für dieses interaktive Beispiel wird in einem GitHub-Repository gespeichert. Wenn du am interaktiven Beispielprojekt mitarbeiten möchtest, klone bitte <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a>und sende uns eine Pull-Anfrage.</p>
+
+<p>Es akzeptiert einen Integer als Wert der zu unterschiedlichen Ergebnissen führt, abhängig von diesen Werten:</p>
+
+<ul>
+ <li>
+  <p>Ein<em> negativer Wert </em>(normalerweise <code>tabindex="-1"</code>) bedeutet, dass das Element fokussierbar, jedoch nicht durch die sequenzielle Tastaturnavigation erreichbar sein sollte. Er ist meistens hilfreich um barrierefreie Widgets mit JavaScript zu erstellen.</p>
+ </li>
+ <li>
+  <div class="note">
+  <p>Dies ist hilfreich, wenn Inhalte außerhalb des Bildschirms vorhanden sind, welche zu einem bestimmten Ereignis in Erscheinung treten. Es ist nicht möglich ein Element mit der Tastatur zu fokussieren, das einen negativen <code>tabindex</code> hat. Jedoch ist es möglich, es mittels der <code>focus()</code> <a href="/en-US/docs/Web/API/HTMLElement/focus">Methode</a> aufzurufen.</p>
+  </div>
+
+
+ </li>
+</ul>
+
+<div class="note"></div>
+
+<ul>
+ <li>
+  <p><code>tabindex="0"</code> bedeutet, dass das Element mittels der sequenziellen Tastaturnavigation fokussierbar ist, wobei die Aufrufreihenfolge von der Quellreihenfolge des Dokuments definiert ist</p>
+ </li>
+ <li>
+  <div class="warning">
+  <p>Die CSS-Positionierung <strong>wirkt sich nicht</strong> auf die Tab-Reihenfolge aus. Es wird sich nur die visuelle Reihenfolge der Elemente ändern. Tab-Reihenfolge entspricht der Quellreihenfolge!<em> </em></p>
+  </div>
+
+
+ </li>
+</ul>
+
+<div class="warning"></div>
+
+<ul>
+ <li>
+  <p>Ein <em>positiver Wert</em> bedeutet, dass das Element in der sequenziellen Tastaturnavigation fokussierbar sein kann, wobei seine Reihenfolge durch den Wert der Zahl definiert wird. <code>tabindex="4"</code> würde also vor <code>tabindex="5"</code>, aber nach <code>tabindex="3"</code> fokussiert werden. Wenn mehrere Elemente den gleichen positiven <code>tabindex</code>-Wert haben, folgt ihre Reihenfolge relativ zu ihrer Position in der Dokumentquelle.</p>
+
+  <div class="warning">
+  <p>Vermeiden Sie die Verwendung von <code>tabindex</code>-Werten größer als 0. Dies erschwert es Benutzern, die auf assistive Technologie angewiesen sind, durch Seiteninhalte zu Navigieren und sie zu Bedienen.</p>
+  </div>
+ </li>
+</ul>
+
+<div class="note">
+<p>Es wird nicht empfohlen, den Elementen positive Werte zu geben. Am Ende springt der Fokus zwischen den Elementen und es wird verwirrend, die <code>tabindex</code>-Attributwerte einzelner Elemente zu manipulieren. Empfehlenswert ist, sie in einer geeigneten DOM-Sequenz zu schreiben.</p>
+</div>
+
+<p>Wenn das <code>tabindex</code>-Attribut für ein {{htmlelement ("div")}} festgelegt wird, kann der untergeordnete Inhalt nicht mit den Pfeiltasten gescrollt werden. Außer, der <code>tabindex</code> wurde für den Inhalt festgelegt. <a href="https://jsfiddle.net/jainakshay/0b2q4Lgv/">Folgendes fiddle hilft beim Verstehen der Scrolleffekte des <code>tabindex</code></a>.</p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Der maximale Wert für <code>tabindex</code> ist 32767. Wenn er nicht spezifiziert ist, wird der Standardwert von 0 angenommen.</p>
+</div>
+
+<h2 id="Bedenken_zur_Barrierefreiheit">Bedenken zur Barrierefreiheit</h2>
+
+
+
+<p>Vermeiden Sie die Verwendung des <code>tabindex</code>-Attributs in Verbindung mit <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Interactive_content">nichtinteraktiven Inhalten</a>, um Elemente durch die Tastatureingabe interaktiv fokussierbar zu machen, wie etwa zum Beispiel die Verwendung eines {{HTMLElement ("div")}} Elements, um eine Schaltfläche zu erzeugen, anstelle des {{HTMLElement ("button")}} Elements.</p>
+
+<p>Interaktive Komponenten, die mit nichtinteraktiven Elementen erstellt wurden, gelangen nicht in der <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">accessibility tree</a> für Eingabehilfen aufgeführt. Dadurch wird verhindert, dass assistive Technologien zu ihnen navigieren und sie manipulieren können. Der Inhalt sollte semantisch mit interaktiven Elementen ({{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}, etc.) beschrieben werden. Diese Elemente verfügen über integrierte Rollen und Zustände, die den Status der Zugänglichkeit mitteilen, die andernfalls durch <a href="/en-US/docs/Web/Accessibility/ARIA">ARIA</a> verwaltet werden müsste.</p>
+
+<ul>
+ <li><a href="https://developer.paciellogroup.com/blog/2014/08/using-the-tabindex-attribute/">Verwenden des tabindex Attributs | The Paciello Group</a></li>
+</ul>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "interaction.html#attr-tabindex", "tabindex")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from latest snapshot, {{SpecName('HTML5.1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "editing.html#the-tabindex-attribute", "tabindex")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "editing.html#attr-tabindex", "tabindex")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, the attribute is now supported on all elements (global attributes).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#adef-tabindex', 'tabindex')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("html.global_attributes.tabindex")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Alle <a href="/en-US/docs/Web/HTML/Global_attributes">globalen Attribute</a></li>
+ <li>{{domxref("HTMLElement.tabIndex")}} das dieses Attribut widerspiegelt</li>
+ <li>Accessibility-Probleme mit tabindex: siehe <a href="http://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html">Don’t Use Tabindex Greater than 0</a> von Adrian Roselli</li>
+</ul>
diff --git a/files/de/web/html/globale_attribute/title/index.html b/files/de/web/html/globale_attribute/title/index.html
new file mode 100644
index 0000000000..2d94d0202c
--- /dev/null
+++ b/files/de/web/html/globale_attribute/title/index.html
@@ -0,0 +1,164 @@
+---
+title: title
+slug: Web/HTML/Globale_Attribute/title
+tags:
+  - Globales Attribut
+  - HTML
+  - Referenz
+  - Referenzen
+translation_of: Web/HTML/Global_attributes/title
+---
+<p>{{HTMLSidebar("Global_attributes")}}</p>
+
+<p>Der <strong>title</strong> <a href="/en-US/docs/Web/HTML/Global_attributes">globales Attribut</a> beinhaltet einen Text mit Informationen über das Element zu welchem es gehört. Diese Informationen werden dem Benutzer üblicherweise (aber nicht nur) als Tooltip angezeigt. Hier sind einige typische Beispiele für dieses Attribut:</p>
+
+<ul>
+ <li>Link: Der Titel oder die Beschreibung des verlinkten Dokuments</li>
+ <li>Media Elemente, (z.B.: ein Bild): eine Beschreibung oder Quellenangabe</li>
+ <li>Paragraph: eine Fusszeile oder ein Kommentar über den Paragraphen</li>
+ <li>Zitate: Informationen über den Autor, usw.</li>
+</ul>
+
+<p>Wenn dieses Attribut weggelassen wird, ist das <code>title</code> Attribut des nächsten Vorgängers des Elements gültig (und kann somit als Tooltip für das Element verwendet werden). Wenn das Attribut als leerer String gesetzt wird, wird das <code>title</code> Attribut des Vorgängers explizit außer Kraft gesetzt (und sollte nicht als Tooltip für das Element verwendet werden).</p>
+
+<p>Zusätzliche Semantics sind für die <code>title</code> Attribute der {{ HTMLElement("link") }}, {{ HTMLElement("abbr") }}, {{ HTMLElement("input") }} und {{ HTMLElement("menuitem") }} Elemente definiert.</p>
+
+<p>Das <code>title</code> Attribut darf Mehrzeilig sein. Jede eingefügte  <code>U+000A LINE FEED</code> (<code>LF</code>) repräsentiert eine solche newline. Aber Achtung! Dies bedeutet, dass:</p>
+
+<pre class="brush: html">&lt;p&gt;Newlines in title should be taken into account,like this &lt;abbr title="This is a
+multiline title"&gt;example&lt;/abbr&gt;.&lt;/p&gt;
+</pre>
+
+<p>einen zweizeiligen Titel definiert.</p>
+
+<h2 id="Bedenken_bezüglich_des_barrierefreien_Internet">Bedenken bezüglich des barrierefreien Internet</h2>
+
+<p>Die Nutzung des <code>title</code> Attributs ist sehr problematisch für:</p>
+
+<ul>
+ <li>Menschen, die nur Berührungsgeräte benutzen</li>
+ <li>Menschen, die das Internet nur mit dem Keyboard navigieren</li>
+ <li>Menschen, die mit unterstützenden Technologien wie einem Bildschirmleser auf das Internet zugreifen</li>
+ <li>Menschen mit Beeinträchtigungen in der Feinmotorik</li>
+ <li>Menschen mit kognitiven Bedenken</li>
+</ul>
+
+<p>Dies kann besonders auf inkonsistenten Browser Support zurückgeführt werden. Dies ist des Weiteren ein Problem, da unterstützende Technologien zu mehr Komplexität beim Browser-Rendering der Seite führen. Falls ein Tooltip Effekt gewollt sein sollte, ist es besser eine der folgenden Browsermethoden zu benutzen.</p>
+
+<p> </p>
+
+<ul>
+ <li><a href="https://www.w3.org/TR/html/dom.html#the-title-attribute">3.2.5.1. The title attribute | W3C HTML 5.2: 3. Semantics, structure, and APIs of HTML documents</a></li>
+ <li><a href="https://developer.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/">Using the HTML title attribute – updated | The Paciello Group</a></li>
+ <li><a href="https://inclusive-components.design/tooltips-toggletips/">Tooltips &amp; Toggletips - Inclusive Components</a></li>
+</ul>
+
+<p> </p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "elements.html#the-title-attribute", "title")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#the-title-attribute", "title")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "dom.html#the-title-attribute", "title")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, it is now a true global attribute.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#adef-title', 'title')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, and {{HTMLElement("title")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Multi-line support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatGeckoDesktop(12)}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Multi-line support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(12)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Alle <a href="/en-US/docs/Web/HTML/Global_attributes">globalen Attribute</a>.</li>
+ <li>{{domxref("HTMLElement.title")}} welches dieses Attribut reflektiert</li>
+</ul>
diff --git a/files/de/web/html/globale_attribute/translate/index.html b/files/de/web/html/globale_attribute/translate/index.html
new file mode 100644
index 0000000000..5cf914afb3
--- /dev/null
+++ b/files/de/web/html/globale_attribute/translate/index.html
@@ -0,0 +1,30 @@
+---
+title: Übersetztung in Deutsch
+slug: Web/HTML/Globale_Attribute/translate
+tags:
+  - DE von LV
+  - Editor's.
+  - Everyone
+  - Experimental-De
+  - HTML-DE
+  - german
+translation_of: Web/HTML/Global_attributes/translate
+---
+<p>Anerkannte englische (US) Version:</p>
+
+<p> {{HTMLSidebar ("Global_attributes")}}</p>
+
+<p> Das Attribut translate global ist ein Aufzählungsattribut, mit dem angegeben wird, ob die übersetzbaren Attributwerte eines Elements und die untergeordneten Knoten {{domxref ("Text")}} beim Lokalisieren der Seite übersetzt werden sollen oder ob sie unverändert bleiben sollen.  Es kann folgende Werte annehmen:</p>
+
+<ul>
+ <li>     leere Zeichenfolge oder "Ja", die angibt, dass das Element übersetzt werden soll, wenn die Seite lokalisiert wird.</li>
+ <li>     "no" gibt an, dass das Element nicht übersetzt werden darf.</li>
+</ul>
+
+<p> Obwohl nicht alle Browser dieses Attribut erkennen, wird es von automatischen Übersetzungssystemen wie Google Translate und möglicherweise auch von Tools, die von menschlichen Übersetzern verwendet werden, respektiert.  Aus diesem Grund ist es wichtig, dass Webautoren dieses Attribut verwenden, um Inhalte zu markieren, die nicht übersetzt werden</p>
+
+<p>Verwenden des Übersetzungsattributs von HTML.</p>
+
+<p>Tags übersetzen Kategorisieren Sie den Artikel. Dadurch wird der Artikel unter den richtigen Filtern in der Suchmaschine auffindbar.</p>
+
+<p>DE German, HTML-DE, Experimental-De, Everyone, Editor's..Github. L. v</p>
diff --git a/files/de/web/html/html5/html5_element_list/index.html b/files/de/web/html/html5/html5_element_list/index.html
new file mode 100644
index 0000000000..44cfd7a6ac
--- /dev/null
+++ b/files/de/web/html/html5/html5_element_list/index.html
@@ -0,0 +1,586 @@
+---
+title: Liste der HTML5-Elemente
+slug: Web/HTML/HTML5/HTML5_element_list
+translation_of: Web/HTML/Element
+---
+<p>Auf dieser Seite finden Sie eine Liste aller <strong>Standard HTML5-Elemente</strong>, beschrieben durch ihr öffnendes Tag, nach Funktion gruppiert. Diese Liste enthält ausschließlich die gültigen HTML5-Elemente. In neuen Websites sollten nur die hier aufgezählten Tags verwendet werden. Eine komplette Liste aller HTML-Elemente finden Sie im <a href="/en-US/docs/HTML/Element" title="/en-US/docs/HTML/Element">Index aller HTML-Elemente</a>. Dieser enthält sämtliche möglichen Tags: standardisierte, nicht-standardkonforme, gültige, obsolete und als veraltet ("deprecated") betrachtete.</p>
+
+<p>Das Symbol <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a> steht für ein in HTML5 neu hinzugekommenes Element. Beachten Sie, dass andere hier aufgeführte Elemente in der HTML5-Spezifikation möglicherweise verändert oder erweitert wurden.</p>
+
+<h2 id="Das_Wurzelelement" style="">Das Wurzelelement</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Tag</th>
+   <th scope="col">Beschreibung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ HTMLElement("html") }}</td>
+   <td><span style="line-height: 21px;">Steht für den Wurzelknoten eines HTML- oder XHTML-Dokuments. Alle weiteren Elemente müssen Nachkommen dieses Elements sein.</span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Metadaten_des_Dokuments">Metadaten des Dokuments</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Tag</th>
+   <th scope="col">Beschreibung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ HTMLElement("head") }}</td>
+   <td><span style="line-height: 21px;">Bezeichnet eine Sammlung von Metadaten des Dokuments. Hierzu gehören auch Links zu oder Definitionen von Skripts und Stylesheets.</span></td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("title") }}</td>
+   <td><span style="line-height: 21px;">Definiert den Titel eines Dokuments, der in der Titelzeile des Browsers im Tab der betreffenden Seite angezeigt wird. Darf ausschließlich Text enthalten. Eventuell enthaltene Tags werden nicht interpretiert.</span></td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("base") }}</td>
+   <td>Definiert den Basis-URL für in der Seite verwendete relative URLs.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("link") }}</td>
+   <td>Wird verwendet, um externe JavaScript- und CSS-Dateien in das aktuelle HTML-Dokument einzubinden.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("meta") }}</td>
+   <td>Wird für die Definition von Metadaten verwenden, die mit keinem anderen HTML-Element definiert werden können.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("style") }}</td>
+   <td>Tag für die Definition eines internen CSS-Stylesheets.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Skripting">Skripting</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Tag</th>
+   <th scope="col">Beschreibung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ HTMLElement("script") }}</td>
+   <td>Definiert entweder ein internes Skript oder einen Link auf ein externes Skript. Als Programmiersprache wird JavaScript verwendet.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("noscript") }}</td>
+   <td>Definiert alternative Inhalte, die angezeigt werden sollen, wenn der Browser kein Skripting unterstützt.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Abschnitte_(Sections)">Abschnitte (Sections)</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Tag</th>
+   <th scope="col">Beschreibung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ HTMLElement("body") }}</td>
+   <td>
+    <div>Steht für den Hauptinhalt eines HTML-Dokuments. Jedes Dokument kann nur ein <code>&lt;body&gt;</code>-Element enthalten.</div>
+   </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("section") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td>
+   <td>Beschreibt einen Abschnitt eines Dokuments.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("nav") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td>
+   <td>Beschreibt einen Abschnitt der ausschließlich Navigationslinks enthält.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("article") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td>
+   <td>Beschreibt eigenständigen Inhalt, der unabhängig von den übrigen Inhalten sein kann.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("aside") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td>
+   <td>Steht für eine Randbemerkung. Der übrige Inhalt sollte auch verständlich sein, wenn dieses Element entfernt wird.</td>
+  </tr>
+  <tr>
+   <td><a href="/en/HTML/Element/Heading_Elements" title="Elementy blokowe"><code>&lt;h1&gt;,&lt;h2&gt;,&lt;h3&gt;,&lt;h4&gt;,&lt;h5&gt;,&lt;h6&gt;</code></a></td>
+   <td>Hiermit werden Überschriften definiert. Es gibt sechs verschiedene Hierarchieebenen, wobei <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">&lt;h1&gt;</span><br>
+    für die Hauptüberschrift steht und <code style="font-size: 14px; color: rgb(51, 51, 51);">&lt;h6&gt;</code> für eine Überschrift der untersten Ebene. Eine Überschrift beschreibt knapp das Thema des Abschnitts, dem sie voransteht.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("header") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td>
+   <td>Definiert den Kopfteil ("header") einer Seite oder eines Abschnitts. Er enthält oft ein Logo, den Titel der Website und die Seitennavigation.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("footer") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td>
+   <td>Definiert den Fußteil ("footer") einer Seite oder eines Abschnitts. Er enthält oft Copyright-Hinweise, einen Link auf das Impressum oder Kontaktadressen.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("address") }}</td>
+   <td>
+    <p>Definiert einen Abschnitt mit Kontaktinformationen.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("main") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td>
+   <td>Definiert den Hauptinhalt der Seite. Es ist nur ein &lt;main&gt; Element pro Seite zulässig.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Inhalte_gruppieren">Inhalte gruppieren</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Tag</th>
+   <th scope="col">Beschreibung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ HTMLElement("p") }}</td>
+   <td>Der Inhalt dieses Elements soll als Absatz dargestellt werden.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("hr") }}</td>
+   <td>Bezeichnet einen thematischen Bruch zwischen Absätzen eines Abschnitts, Artikels oder anderem längeren Inhalt.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("pre") }}</td>
+   <td>Zeigt an, das der Inhalt dieses Elements vorformatiert ist und das dieses Format erhalten bleiben soll.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("blockquote") }}</td>
+   <td>Kennzeichnet ein Zitat.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("ol") }}</td>
+   <td>Definiert eine geordnete Liste, bei der die Einträge eine bestimmte Reihenfolge haben müssen.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("ul") }}</td>
+   <td>Definiert eine Liste ungeordneter Einträge.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("li") }}</td>
+   <td>Kennzeichnet einen Listeneintrag. Diesem wird oftmals ein Aufzählungszeichen ("bullet") vorangestellt.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("dl") }}</td>
+   <td>Kennzeichnet eine Definitionsliste aus Begriffen und den dazugehörigen Definitionen.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("dt") }}</td>
+   <td>Kennzeichnet einen Begriff der im folgenden <code>&lt;dd&gt;</code>-Element beschrieben wird.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("dd") }}</td>
+   <td>Markiert die Definition des oder der Begriffe, die in den direkt vorangehenden <code style="font-size: 14px; color: rgb(51, 51, 51);">&lt;dt&gt;</code>-Element angegeben wurden.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("figure") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td>
+   <td>Kennzeichnet eine Abbildung, die einen Teil des Dokuments illustriert.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("figcaption") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td>
+   <td>Bezeichnet die Beschriftung einer Abbildung.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("div") }}</td>
+   <td>Bezeichnet ein allgemeines Container-Element ohne spezielle semantische Bedeutung. Wird oft zusammen mit <code>class</code>- oder <code>id</code>-Attributen verwendet, um es in Skripts oder Stylesheets auswählen zu können.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Semantische_Text-Elemente">Semantische Text-Elemente</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Tag</th>
+   <th scope="col">Beschreibung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ HTMLElement("a") }}</td>
+   <td>Bezeichnet einen<em>Hyperlink</em> , der auf eine andere Ressource verweist (angegeben durch das <code>href</code>-Attribut).</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("em") }}</td>
+   <td>Steht für<em>hervorgehobenen</em> Text. </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("strong") }}</td>
+   <td>Markiert besonders<em>wichtigen</em>  (stark hervorgehobenen) Text.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("small") }}</td>
+   <td>Steht für das "Kleingedruckte" eines Dokuments, wie Ausschlussklauseln, Copyright-Hinweise oder andere Dinge, die für das Verständnis des Dokuments nicht unbedingt nötig sind.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("s") }}</td>
+   <td>Wird für Inhalte verwendet, die<em>nicht länger relevant oder akkurat</em> sind. Wird meist durchgestrichen dargestellt.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("cite") }}</td>
+   <td>Steht für den<em>Titel eines Werks.</em></td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("q") }}</td>
+   <td>Bezeichnet ein<em>Kurzzitat</em> . Für längere Zitate sollte <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">&lt;blockquote&gt;</span> verwendet werden.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("dfn") }}</td>
+   <td>Steht für einen Begriff, dessen<em>Definition</em> im nächstgelegenen Nachkommen-Element enthalten ist.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("abbr") }}</td>
+   <td>Bezeichnet eine<em>Abkürzung</em> oder ein<em>Akronym</em> .</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("data") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td>
+   <td>Verbindet seinen Inhalt mit einem<em>maschinenlesbaren Equivalent,</em> angegeben im <code>value</code>-Attribut. (Dieses Element wird nur in der WHATWG-Version des HTML-Standards definiert, nicht aber in der W3C-Version von HTML5).</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("time") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td>
+   <td>Steht für einen Wert, der<em>Datum</em> und<em>Uhrzeit angibt</em> .</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("code") }}</td>
+   <td>Wird verwendet, um<em>Programmiercode</em> zu markieren.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("var") }}</td>
+   <td>Steht für eine<em>Variable.</em> Dies kann ein tatsächlicher mathematischer Ausdruck oder Programmierungskontext sein, ein Identifier für eine Konstante, ein Symbol für eine physikalische Größe, ein Funktionsparameter oder einfach ein Platzhalter.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("samp") }}</td>
+   <td>Markiert die<em>Ausgabe</em> eines Programms oder eines Computers.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("kbd") }}</td>
+   <td>Steht für eine <em>Benutzereingabe</em>, oftmals, aber nicht unbedingt, auf der Tastatur. Kann auch für andere Eingaben, beispielsweise transkribierte Sprachbefehle stehen.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("sub") }},{{ HTMLElement("sup") }}</td>
+   <td>Markiert<em>tiefgestellten</em> , bzw. <em>hochgestellten</em> Text<em>.</em></td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("i") }}</td>
+   <td>Steht für einen Textabschnitt, der <em>vom übrigen Inhalt abgesetzt</em> und <em>üblicherweise kursiv</em> dargestellt wird, ohne für eine spezielle Betonung oder Wichtigkeit zu stehen. Dies kann beispielsweise eine taxonomische Bezeichnung, ein technischer Begriff, ein idiomatischer Ausdruck, ein Gedanke oder der Name eines Schiffes sein.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("b") }}</td>
+   <td>Steht für einen Textabschnitt, der <em>vom übrigen Inhalt abgesetzt</em> und <em>üblicherweise fettgedruckt</em> dargestellt wird, ohne für eine spezielle Betonung oder Wichtigkeit zu stehen. Dies kann beispielsweise ein Schlüsselwort oder ein Produktname in einer Produktbewertung sein.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("u") }}</td>
+   <td>Steht für einen Textabschnitt, der <em>vom übrigen Inhalt abgesetzt</em> und <em>üblicherweise unterstrichen</em> dargestellt wird, ohne für eine spezielle Betonung oder Wichtigkeit zu stehen. Dies könnte beispielsweise ein Eigenname auf in chinesischer Sprache sein oder ein Textabschnitt, der häufig falsch buchstabiert wird.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("mark") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td>
+   <td>Steht für Text, der aus <em>Referenzgründen</em> hervorgehoben wird, d.h. der in anderem Kontext von Bedeutung ist.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("ruby") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td>
+   <td>
+    <p>Bezeichnet einen Textteil mit <em>Ruby-Annotationen</em>. Dies sind kurze Aussprachetipps und andere Hinweise, die hauptsächlich für ostasiatische Typografie verwendet werden.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("rt") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td>
+   <td>Bezeichnet den Text einer <em>Ruby-Annotation</em>.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("rp") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td>
+   <td>Wird zusammen mit dem Element <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">&lt;ruby&gt; </span>verwendet, um Ruby-Text mit Klammern zu umgeben, die angezeigt werden, wenn das Benutzerprogramm (Browser) keine Ruby-Annotationen unterstützt.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("bdi") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td>
+   <td>Markiert Text, der vom umgebenden Inhalt zum Zweck der bidirektionalen Formatierung (z.B. arabischer Text innerhalb von deutschsprachigen Inhalten) <em>isoliert</em> werden soll. Hiermit kann ein Textabschnitt mit einer unterschiedlichen oder unbekannten Textrichtung gekennzeichnet werden.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("bdo") }}</td>
+   <td>Kann verwendet werden, um die <em>Textrichtung der enthaltenen Kindelemente</em> zu steuern. Hiermit kann der Unicode BiDi-Algorithmus explizit überschrieben werden.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("span") }}</td>
+   <td>Markiert einen allgemeinen Textabschnitt. Das <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">&lt;span&gt;-</span>Element erhält seine Bedeutung meistens durch ein <code>class</code>- oder ein <code>id</code>-Attribut, wodurch es außerdem für Skripte zugänglich ist und von Stylesheets ausgewählt werden kann.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("br") }}</td>
+   <td>Bezeichnet einen<em>Zeilenumbruch</em> .</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("wbr") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td>
+   <td>Hiermit kann die <em>Gelegenheit für einen Zeilenumbruch</em> gekennzeichnet werden, mit dem die Lesbarkeit verbessert werden kann, wenn der Text auf mehrere Zeilen verteilt wird.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Änderungen_am_Dokument">Änderungen am Dokument</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Tag</th>
+   <th scope="col">Beschreibung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ HTMLElement("ins") }}</td>
+   <td>Markiert einen zum Dokument <em>hinzugefügten</em> Teil.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("del") }}</td>
+   <td>Markiert einen aus dem Dokument <em>entfernten</em> Teil.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Eingebettete_Inhalte_(Ersetzte_Elemente)">Eingebettete Inhalte (Ersetzte Elemente)</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Tag</th>
+   <th scope="col">Beschreibung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ HTMLElement("img") }}</td>
+   <td>Steht für ein<em>Bild</em> .</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("iframe") }}</td>
+   <td>Definiert einen so genannten <em>Iframe</em>, mit dem ein HTML-Dokument in seinem eigenen Kontext in das aktuelle Dokument eingebettet werden kann.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("embed") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td>
+   <td>Steht für einen <em>Einbindungspunkt</em> für externe Ressourcen. Dies sind typischerweise keine HTML-Inhalte, sondern beispielsweise eine Applikation oder interaktiver Inhalt, der mit Hilfe eines Plugins (anstatt nativ durch das Benutzerprogramms) dargestellt wird.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("object") }}</td>
+   <td>Steht für <em>allgemeinen externen Inhalt</em>, der je nach Kontext als Bild, "verschachtelter Browsing-Kontext" (s. <code>iframe</code>), oder externer Inhalt (der mit Hilfe eines Plugins darsgestellt wird) betrachtet wird.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("param") }}</td>
+   <td>Definiert <em>Parameter</em> für ein Plugin, das für die Darstellung eines mit <code>&lt;object&gt;</code> eingebundenen Elements verwendet werden.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("video") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td>
+   <td>Steht für eine <em>Videodatei</em> und die dazugehörigen Audiodateien, sowie die für das Abspielen nötigen Kontrollelemente.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("audio") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td>
+   <td>Markiert eine <em>Tondatei</em> oder einen <em>Audiostream</em>.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("source") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td>
+   <td>Ermöglicht es Autoren, alternative Medienressourcen (z.B. verschiedene Audio- oder Videoformate) für Medienelemente wie <code>&lt;video&gt;</code> oder <code>&lt;audio&gt;</code> anzugeben.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("track") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td>
+   <td>Hiermit können zusätzliche Medienspuren (z.B. Untertitel) für Elemente wie <code>&lt;video&gt;</code> oder<em><code>&lt;audio&gt;</code></em> angegeben werden. </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("canvas") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td>
+   <td>Steht für einen <em>Bitmap-Bereich</em>, der von Skripts verwendet werden kann, um beispielsweise Diagramme, Spielegraphiken oder andere visuellen Effekte dynamisch darzustellen.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("map") }}</td>
+   <td>Definiert in Verbindung mit dem <code>&lt;area&gt;</code>-Element eine <em>Image Map</em>.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("area") }}</td>
+   <td>Definiert in Verbindung mit dem <code>&lt;map&gt;</code>-Element eine <em>Image Map</em>.</td>
+  </tr>
+  <tr>
+   <td>{{ SVGElement("svg") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td>
+   <td>Definiert eine eingebettete <em>Vektorgrafik</em>.</td>
+  </tr>
+  <tr>
+   <td>{{ MathMLElement("math") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td>
+   <td>Markiert eine <em>mathematische Formel</em>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Tabellarische_Daten">Tabellarische Daten</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Tag</th>
+   <th scope="col">Beschreibung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ HTMLElement("table") }}</td>
+   <td>Markiert eine <em>Tabelle</em>, d.h. Daten mit mehr als einer Dimension.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("caption") }}</td>
+   <td>Kennzeichnet die <em>Beschriftung (Titel)</em> einer Tabelle.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("colgroup") }}</td>
+   <td>Steht für eine <em>Gruppe</em> aus einer oder mehreren <em>Tabellenspalten</em>.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("col") }}</td>
+   <td>Steht für eine <em>Tabellenspalte</em>.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("tbody") }}</td>
+   <td>Steht für die Spalten, die die <em>eigentlichen Daten</em> einer Tabelle enthalten.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("thead") }}</td>
+   <td>Markiert die Gruppe der Tabellenzeilen, die die <em>Beschriftungen</em> der Tabellenspalten enthalten.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("tfoot") }}</td>
+   <td>Markiert die Gruppe der Tabellenzeilen, die die <em>Zusammenfassungen</em> der Tabellenspalten enthalten.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("tr") }}</td>
+   <td>Steht für eine <em>Zeile mit Tabellenzellen</em>.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("td") }}</td>
+   <td>Kennzeichnet eine einzelne <em>Tabellenzelle</em>.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("th") }}</td>
+   <td>Kennzeichnet eine <em>Tabellenzelle mit einer Beschriftung</em>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Formulare">Formulare</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Tag</th>
+   <th scope="col">Beschreibung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>Markiert ein<em>Formular.</em> Formulare bestehen typischerweise aus einer Reihe von Kontrollelementen, deren Werte zur weiteren Verarbeitung an einen Server übertragen werden.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("fieldset") }}</td>
+   <td>Steht für eine<em>Gruppe von Kontrollelementen.</em></td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("legend") }}</td>
+   <td>Kennzeichnet eine Beschriftung für ein <code>&lt;fieldset&gt;</code>-Element.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("label") }}</td>
+   <td>Kennzeichnet die <em>Beschriftung</em> für ein Formular-Kontrollelement (z.B. Texteingabefelder).</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("input") }}</td>
+   <td>Steht für ein <em>Feld für Benutzereingaben</em> eines bestimmten Typs. Der Typ (Radiobutton, Ankreuzfeld, Texteingabe, etc.) wird anhand des <code>type</code>-Attributs angegeben.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("button") }}</td>
+   <td>Markiert einen<em>Button</em> .</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("select") }}</td>
+   <td>Kennzeichnet ein Kontrollelement, mit dem aus einer Reihe von <em>Optionen</em> ausgewählt werden kann.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("datalist") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td>
+   <td>Steht für eine Sammlung <em>vordefinierter Optionen für andere Kontrollelemente</em>.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("optgroup") }}</td>
+   <td>Steht für eine Reihe logisch gruppierter <em>Auswahloptionen</em>.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("option") }}</td>
+   <td>Steht für eine <em>Auswahloption</em> innerhalb eines <code>&lt;select&gt;</code>-Elements, oder einen Vorschlag innerhalb eines <code>&lt;datalist&gt;-</code>Elements.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("textarea") }}</td>
+   <td>Markiert ein Element für<em>mehrzeilige Texteingaben</em> .</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("keygen") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td>
+   <td>Steht für ein Kontrollelement zur Erzeugung eines<em>Paares aus öffentlichem und privaten Schlüssel</em> und zum Versenden des öffentlichen Schlüssels.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("output") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td>
+   <td>Markiert das<em>Ergebnis einer Berechnung</em> .</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("progress") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td>
+   <td>Ein Element zur<em>Fortschrittsanzeige</em> einer bestimmten Aufgabe.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("meter") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td>
+   <td>Steht für eine<em>Messskala</em> (oder deren Teilwerte) innerhalb eines bekannten Bereichs.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Interaktive_Elemente">Interaktive Elemente</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Tag</th>
+   <th scope="col">Beschreibung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ HTMLElement("details") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td>
+   <td>Markiert ein Kontrollelement, mit dem der Benutzer<em>zusätzliche Informationen</em> oder Kontrolle erhalten kann.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("summary") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td>
+   <td>Kennzeichnet eine<em>Zusammenfassung</em> oder eine<em>Legende</em> für ein bestimmte <code>&lt;details&gt;</code>-Element.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("command") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td>
+   <td>Kennzeichnet einen<em>Befehl</em> , der vom Benutzer aufgerufen werden kann.</td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("menu") }} <a href="/en-US/docs/HTML/HTML5"><img alt="Neu in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="Neu in HTML5"></a></td>
+   <td>Markiert eine<em>Liste mit Befehlen</em> .</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/HTML/HTML5" title="/en-US/docs/HTML/HTML5">Eine Reihe von Dokumenten zu HTML5</a>.</li>
+ <li>Die <a href="/en-US/docs/HTML/Element" title="/en-US/docs/HTML/Element">Referenz aller HTML-Tags</a>, auch Elemente, die in HTML5 nicht mehr gültig sind.</li>
+ <li>Eine weitere Form, die HTML-Tags darzustellen: Der<a href="http://joshduck.com/periodic-table.html" title="http://joshduck.com/periodic-table.html">"Periodic table of HTML5 elements"</a> von Josh Duck.</li>
+</ul>
diff --git a/files/de/web/html/html5/index.html b/files/de/web/html/html5/index.html
new file mode 100644
index 0000000000..a6f25869e9
--- /dev/null
+++ b/files/de/web/html/html5/index.html
@@ -0,0 +1,174 @@
+---
+title: HTML5
+slug: Web/HTML/HTML5
+tags:
+  - HTML
+  - HTML5
+  - References
+  - Web Development
+translation_of: Web/Guide/HTML/HTML5
+---
+<p><span class="seoSummary"><strong>HTML5</strong> ist die aktuellste Entwicklung des Web Standards, der <a href="/en-US/docs/HTML" title="HTML">HTML</a> definiert.</span> Der Begriff repräsentiert zwei verschiedene Konzepte:</p>
+
+<ul>
+ <li><span class="seoSummary">Es ist eine neue Version der <em>Sprache</em> HTML, mit neuen Elementen, Attributen und Verhaltensweisen,</span></li>
+ <li><span class="seoSummary">und eine größere Sammlung von Technologien, die vielfältigere und leistungsstärkere Webseiten und Anwendungen ermöglichen.</span> Diese Kombination wird manchmal <em>HTML5 &amp; Freunde</em> genannt und oft zu <em>HTML5</em> abgekürzt.</li>
+</ul>
+
+<p>Diese Referenzseite wurde entworfen, um für alle offenen Web-Entwickler nutzbar zu sein und verknüpft zahlreiche Ressourcen über HTML5 Technologien, gruppiert in mehreren Kategorien, basierend auf ihrer Funktion.</p>
+
+<ul>
+ <li><em>Semantik</em>: Erlaubt präziser zu beschreiben, was der Inhalt ist.</li>
+ <li><em>Konnektivität</em>: Ermöglicht neue und innovative Wege, mit dem Server zu kommunizieren.</li>
+ <li><em>Offline &amp; Speicherung</em>: Erlaubt Webseiten, Daten lokal auf der Client-Seite zu speichern und effizienter offline zu arbeiten.</li>
+ <li><em>Multimedia</em>: Macht Video und Audio zu Erste-Klasse-Bürgern des offenen Webs.</li>
+ <li><em>2D/3D Graphiken &amp; Effekte</em>: Erlaubt eine deutlich vielschichtigere Menge an Präsentationsmöglichkeiten.</li>
+ <li><em>Leistung &amp; Integration</em>: Bietet größere Geschwindigkeitsoptimierungen und besserer Zugriff auf Computer-Hardware.</li>
+ <li><em>Gerätezugriff</em>: Erlaubt die Benutzung verschiedenster Eingabe- und Ausgabegeräte.</li>
+ <li><em>Styling</em>: Lässt Autoren anspruchsvollere Designs schreiben.</li>
+</ul>
+
+<div class="cleared row topicpage-table">
+<div class="section">
+<h2 id="SemantiK" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">SemantiK</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Gliederungen und Abschnitte in HTML5</a></dt>
+ <dd>Ein Blick auf die neuen Gliederungs- und Abschnitts-Elemente in HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}} und {{HTMLElement("hgroup")}}.</dd>
+ <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">HTML5 Audio und Video benutzen</a></dt>
+ <dd>Das {{HTMLElement("audio")}} und das {{HTMLElement("video")}} Element binden neue Multimedia-Inhalte ein und erlauben, sie zu manipulieren.</dd>
+ <dt><a href="/en-US/docs/HTML/Forms_in_HTML" title="Forms in HTML5">Formulare in HTML5</a></dt>
+ <dd>Ein Blick auf Verbesserungen bei Formularen in HTML5: die constraint validation API (<em>Überprüfung von Wertbeschränkungen</em>), mehrere neue Attribute, neue Werte für das {{HTMLElement("input")}} Attribut {{htmlattrxref("type", "input")}} und das neue {{HTMLElement("output")}} Element.</dd>
+ <dt>Neue semantische Elemente</dt>
+ <dd>Außer Sektions-, Medien- und Formular-Elementen erhöhen eine Vielzahl neuer Elemente, wie {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} oder {{HTMLElement("meter")}}, die Menge <a href="/en-US/docs/HTML/HTML5/HTML5_element_list" title="HTML/HTML5/HTML5_element_list">gültiger HTML5 Elemente</a>.</dd>
+ <dt>Verbesserung bei {{HTMLElement("iframe")}}</dt>
+ <dd>Mithilfe der {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}} und {{htmlattrxref("srcdoc", "iframe")}} Attribute können Autoren jetzt das Sicherheitslevel und das gewünschte Rendering von {{HTMLElement("iframe")}} Elementen angeben.</dd>
+ <dt><a href="/en-US/docs/MathML" title="MathML">MathML</a></dt>
+ <dd>Erlaubt das direkte Einbinden mathematischer Formeln.</dd>
+ <dt><a href="/en-US/docs/HTML/HTML5/Introduction_to_HTML5" title="HTML/HTML5/Introduction_to_HTML5">Einführung in HTML5</a></dt>
+ <dd>Dieser Artikel führt in die Benutzung von HTML5 für Ihr Web-Design oder Ihre Web-Anwendung ein.</dd>
+ <dt><a href="/en-US/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">HTML5-konformer Parser</a></dt>
+ <dd>Der Parser, der aus den Bytes eines HTML-Dokumentes ein DOM erzeugt, wurde erweitert und definiert jetzt präzise das Verhalten in allen Fällen, selbst für ungültiges HTML. Das führt zu viel größerer Vorhersehbarkeit und Zusammenarbeit zwischen HTML5-konformen Browsern.</dd>
+</dl>
+
+<h2 id="Konnektivität" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Konnektivität</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/WebSockets" title="WebSockets">Web Sockets</a></dt>
+ <dd>Erlaubt eine permanente Verbindung zwischen der Seite und dem Server zu erzeugen und nicht-HTML-Daten hierüber auszutauschen.</dd>
+ <dt><a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="Server-sent_events/Using_server-sent_events">Server-gesendete Ereignisse</a></dt>
+ <dd>Erlaubt dem Server, Ereignisse direkt an den Client zu senden, anstatt wie beim klassischen Modell Daten nur als Antwort auf eine Anfrage des Clients senden zu können.</dd>
+ <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt>
+ <dd>Diese Technologie, wobei RTC für Real-Time Communication (<em>Echtzeit-Kommunikation</em>) steht, erlaubt sich mit anderen zu verbinden und Videokonferenzen direkt aus dem Browser zu steuern, ohne dafür ein Plugin oder externes Programm zu brauchen.</dd>
+</dl>
+
+<h2 id="Offline_Speicherung" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Offline &amp; Speicherung</h2>
+
+<div class="note">
+<dl>
+ <dt><a href="/en-US/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">Offline-Ressourcen: der Anwendungs-Cache</a></dt>
+ <dd>Firefox unterstützt vollständig die HTML5 <em>offline resource</em> Spezifikation. Die meisten anderen bieten variierende Unterstützung für Offline-Ressourcen.</dd>
+ <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Online- und Offline-Ereignisse</a></dt>
+ <dd>Firefox 3 unterstützt die WHATWG Online- und Offline-Ereignisse, die Anwendungen und Erweiterungen erkennen lassen, ob oder ob es keine aktive Internetverbindung gibt, sowie ob eine Verbindung auf- oder abgebaut wird.</dd>
+ <dt><a href="/en-US/docs/DOM/Storage" title="DOM/Storage">WHATWG Client-seitiger Sitzungs- und persistenter Speicher (auch bekannt als DOM Storage)</a></dt>
+ <dd>Client-seitiger Sitzungs- und persistenter Speicher erlaubt Webanwendungen, strukturierte Daten auf der Anwenderseite zu speichern.</dd>
+ <dt><a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt>
+ <dd>Ist ein Web-Standard zum Speichern von großen Mengen strukturierter Daten im Browser und für das hochperformante Suchen dieser Daten mittels Indizes.</dd>
+ <dt><a href="/en-US/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">Dateien aus Webanwendungen benutzen</a></dt>
+ <dd>Unterstützung für die neue HTML5 Datei-API wurde zu Gecko hinzugefügt, wodurch Web-Anwendungen der Zugriff auf vom Benutzer gewählte lokale Dateien ermöglicht wird. Das schließt die Unterstützung für das Auswählen mehrerer Dateien über das neue <a href="/en-US/docs/HTML/Element/Input#attr-multiple" title="HTML/Element/input#attr-multiple"><strong>multiple</strong></a> Attribut von <span style="font-family: monospace;">{{HTMLElement("input")}} </span>Elementen des <a href="/en-US/docs/HTML/Element/Input#attr-type" title="HTML/Element/input#attr-type"><strong>Typs</strong></a><span style="font-family: monospace;"> </span><span style="font-family: courier new;">file</span> ein. Außerdem gibt es <a href="/en-US/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a>.</dd>
+</dl>
+</div>
+
+<h2 id="Multimedia" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Multimedia</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">HTML5 Audio und Video benutzen</a></dt>
+ <dd>Das {{HTMLElement("audio")}} und das {{HTMLElement("video")}} Element binden neue Multimedia-Inhalte ein und erlauben, sie zu manipulieren.</dd>
+ <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt>
+ <dd>Diese Technologie, wobei RTC für Real-Time Communication (<em>Echtzeit-Kommunikation</em>) steht, erlaubt sich mit anderen zu verbinden und Videokonferenzen direkt aus dem Browser zu steuern, ohne dafür ein Plugin oder externes Programm zu brauchen.</dd>
+ <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Die Camera API benutzen</a></dt>
+ <dd>Erlaubt das Benutzen, Manipulieren und Speichern von Bildern der Computer-Kamera.</dd>
+ <dt>Untertitel und WebVTT</dt>
+ <dd>Das {{HTMLElement("track")}} Element erlaubt Untertitel und Kapitel. <a href="/en-US/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> ist ein Texttitel-Format.</dd>
+</dl>
+
+<h2 id="3D_graphiKEN_effeKtE" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">3D, graphiKEN &amp; effeKtE</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Canvas_tutorial" title="Canvas tutorial">Canvas-Tutorial</a></dt>
+ <dd>Lerne mehr über das neue <code>{{HTMLElement("canvas")}}</code> Element und wie darauf Diagramme und andere Objekte in Firefox gezeichnet werden können.</dd>
+ <dt><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">HTML5 Text-API für <code>&lt;canvas&gt;</code> Elemente</a></dt>
+ <dd>Die HTML5 Text-API wird jetzt von {{HTMLElement("canvas")}} Elementen unterstützt.</dd>
+ <dt><a href="/en-US/docs/WebGL" title="WebGL">WebGL</a></dt>
+ <dd>WebGL bringt 3D-Graphiken durch die Einführung einer auf OpenGL ES 2.0 basierten API in's Web, die in HTML5 {{HTMLElement("canvas")}} Elementen genutzt werden kann.</dd>
+ <dt><a href="/en-US/docs/SVG" title="SVG">SVG</a></dt>
+ <dd>Ein XML-basiertes Format von Vektor-Bildern, die direkt in HTML eingebettet werden können.</dd>
+ <dt> </dt>
+</dl>
+</div>
+
+<div class="section">
+<h2 id="Leistung_integration" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Leistung &amp; integration</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/DOM/Using_web_workers" title="Using web workers">Web Worker</a></dt>
+ <dd>Erlaubt die Ausführung von JavaScript an Hintergrund-Threads zu delegieren, so dass diese Aktivitäten interaktive Ereignisse nicht verlangsamen.</dd>
+ <dt><code><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> Level 2</dt>
+ <dd>Erlaubt einige Teile der Seite asynchron zu laden, so dass dynamische Inhalte je nach Zeit und Verhalten des Benutzers gezeigt werden können. Das ist die Technologie hinter <a href="/en-US/docs/AJAX" title="AJAX">Ajax</a>.</dd>
+ <dt>JIT-kompilierende JavaScript-Engines</dt>
+ <dd>Die neue Generation der JavaScript-Engines sind wesentlich performanter, was zu deutlich höherer Leistung führt.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">History API</a></dt>
+ <dd>Erlaubt die Manipulation der Browser-Historie. Das ist besonders hilfreich für Seiten, die interaktiv neue Informationen laden.</dd>
+ <dt><a href="/en-US/docs/HTML/Content_Editable" title="HTML/Content Editable">Das contentEditable Attribut: verwandeln Sie Ihre Webseite in ein Wiki!</a></dt>
+ <dd>In HTML5 wurde das contentEditable Attribut standardiziert. Lernen Sie mehr über dieses Feature.</dd>
+ <dt><a href="/en-US/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">Drag und Drop</a></dt>
+ <dd>Die HTML5 Drag und Drop API erlaubt Unterstützung für das Ziehen und Fallenlassen von Objekte innerhalb und zwischen Webseiten. Außerdem gibt es eine einfachere API für die Benutzung in Erweiterungen und Mozilla-basierten Anwendungen.</dd>
+ <dt><a href="/en-US/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">Fokus-Kontrolle in HTML</a></dt>
+ <dd>Die neuen HTML5 <code>activeElement</code> und <code>hasFocus</code> Attribute werden unterstützt.</dd>
+ <dt><a href="/en-US/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">Web-basierte Protokoll-Handler</a></dt>
+ <dd>Sie können jetzt Webanwendungen als Protokoll-Handler mit der <code>navigator.registerProtocolHandler()</code> Methode registrieren.</dd>
+ <dt><a href="/en-US/docs/DOM/window.requestAnimationFrame" title="DOM/window.requestAnimationFrame"><code>requestAnimationFrame</code></a></dt>
+ <dd>Erlaubt das Rendern von Animationen für optimale Leistung zu kontrollieren.</dd>
+ <dt><a href="/en-US/docs/DOM/Using_full-screen_mode" title="DOM/Using_full-screen_mode">Vollbild-API</a></dt>
+ <dd>Kontrolliert die Benutzung des ganzen Bildschirms für eine Webseite oder -anwendung, ohne die Browserelemente anzuzeigen.</dd>
+ <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt>
+ <dd>Erlaubt, den Zeiger auf den Bereich des Inhalts zu begrenzen, so dass Spiele und ähnliche Anwendungen nicht den Fokus verlieren, wenn der Zeiger die Fenstergrenzen erreicht.</dd>
+ <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Online- und Offline-Ereignisse</a></dt>
+ <dd>Um eine gute offline-fähige Webanwendung zu entwickeln, müssen Sie wissen, wann Ihre Anwendung tatsächlich offline ist. Nebenbei sollten Sie auch wissen, wann Ihre Anwendung wieder online ist.</dd>
+</dl>
+
+<h2 id="Gerätezugriff" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Gerätezugriff</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Die Kamera-API benutzen</a></dt>
+ <dd>Erlaubt das Benutzen, Manipulieren und Speichern von Bildern der Computer-Kamera.</dd>
+ <dt><a href="/en-US/docs/DOM/Touch_events" title="DOM/Touch_events">Touch-Ereignisse</a></dt>
+ <dd>Verarbeitung von Ereignissen, die durch Tippen auf Touchscreens ausgelöst werden.</dd>
+ <dt><a href="/en-US/docs/Using_geolocation" title="Using geolocation">Geolocation benutzen</a></dt>
+ <dd>Lässt Browser die Position des Benutzers mittels geolocation herausfinden.</dd>
+ <dt><a href="/en-US/docs/Detecting_device_orientation" title="Detecting_device_orientation">Geräte-Orientierung ermitteln</a></dt>
+ <dd>Ermöglicht herauszufinden, wenn das Gerät des Browsers die Orientierung wechselt. Das kann als Eingabegerät genutzt werden (z.B. um Spiele zu entwickeln, die auf die Orientierung des Gerätes reagieren) oder um das Layout einer Seite der Orientierung des Bildschirms anzupassen (hochkant oder Querformat).</dd>
+ <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt>
+ <dd>Erlaubt, den Zeiger auf den Bereich des Inhalts zu begrenzen, so dass Spiele und ähnliche Anwendungen nicht den Fokus verlieren, wenn der Zeiger die Fenstergrenzen erreicht.</dd>
+</dl>
+
+<h2 id="Styling" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Styling</h2>
+
+<p><a href="/en-US/docs/CSS" title="CSS">CSS</a> wurde erweitert, um das Dekorieren von Elementen auf viel komplexere Weisen zu ermöglichen. Das wird oft als <a href="/en-US/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a> bezeichnet, obwohl CSS keine monolithische Spezifikation mehr ist und die unterschiedlichen Module nicht alle auf Level 3 sind: einige sind auf Level 1 und andere auf Level 4, und alle dazwischen liegenden Level sind vertreten.</p>
+
+<dl>
+ <dt>Neue Funktionen für Hintergründe</dt>
+ <dd>Es ist jetzt möglich, Boxen über {{cssxref("box-shadow")}} einen Schatten zu geben und <a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple_backgrounds">mehrere Hintergründe</a> zu setzen.</dd>
+ <dt>Ausgefallenere Ränder</dt>
+ <dd>Jetzt ist es nicht nur möglich, Ränder mit Bildern über {{cssxref("border-image")}} und zugehörige ausgeschriebene Eigenschaften zu dekorieren, sondern auch runde Ränder werden über die {{cssxref("border-radius")}} Eigenschaft unterstützt.</dd>
+ <dt>Stile animierbar machen</dt>
+ <dd>Mit <a href="/en-US/docs/CSS/Using_CSS_transitions" title="CSS/Using_CSS_transitions">CSS Übergängen</a>, um zwischen unterschiedlichen Zuständen zu animieren, oder <a href="/en-US/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_animations">CSS Animationen</a>, um Teile der Seite ohne auslösendes Ereignis zu animieren, können Sie jetzt mobile Elemente Ihrer Seite kontrollieren.</dd>
+ <dt>Typographie-Verbesserungen</dt>
+ <dd>Autoren haben mehr Kontrolle, um eine bessere Typographie zu erreichen. Sie können Textüberlauf mit {{cssxref("text-overflow")}} und <a href="/en-US/docs/CSS/hyphens" title="CSS/hyphens">Silbentrennung</a> kontrollieren, aber sie können auch <a href="/en-US/docs/CSS/text-shadow" title="CSS/text-shadow">Schatten</a> zuweisen und noch präziser seine <a href="/en-US/docs/CSS/text-decoration" title="SVG/Attribute/text-decoration">Dekorationen</a> kontrollieren. Benutzerdefinierte Schriftarten können durch die neue {{cssxref("@font-face")}} at-Regel heruntergeladen und angewendet werden.</dd>
+ <dt>Neue Präsentations-Layouts</dt>
+ <dd>Um die Flexibilität von Designs zu verbessern, wurden zwei neue Layouts hinzugefügt: das <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="CSS/Using_CSS_multi-column_layouts">CSS Mehr-Spalten-Layout</a> und das <a href="/en-US/docs/CSS/Flexbox" title="CSS/Flexbox">CSS Flexible-Box-Layout</a>.</dd>
+</dl>
+</div>
+</div>
+
+<p> </p>
diff --git a/files/de/web/html/index.html b/files/de/web/html/index.html
new file mode 100644
index 0000000000..299321dbaa
--- /dev/null
+++ b/files/de/web/html/index.html
@@ -0,0 +1,100 @@
+---
+title: 'HTML: HyperText Markup Language'
+slug: Web/HTML
+tags:
+  - Einführung
+  - Web Programmierung
+translation_of: Web/HTML
+---
+<div>{{HTMLSidebar}}</div><p class="summary"><span class="seoSummary"><strong>HTML</strong> (HyperText Markup Language) ist der grundlegendste Baustein des Webs. Es beschreibt und definiert den <em>Inhalt</em> einer Webseite zusammen mit dem grundlegenden Layout der Webseite. Neben HTML werden im Allgemeinen andere Technologien verwendet, um das Erscheinungsbild (<a href="/de/docs/Web/CSS">CSS</a>) oder die Funktionalität/Verhalten (<a href="/de/docs/Web/JavaScript">JavaScript</a>) einer Webseite zu beschreiben.</span></p>
+
+<p>"HyperText" bezieht sich auf Links, die Webseiten miteinander verbinden, entweder innerhalb einer einzelnen Webseite oder zwischen mehreren Webseiten. Links sind ein grundlegender Bestandteil des Webs. Indem Sie Inhalte in das Internet hochladen und mit Seiten verlinken, die von anderen Personen erstellt wurden, werden Sie ein aktiver Teilnehmer im World Wide Web.</p>
+
+<p>HTML verwendet "Markup", um Texte, Bilder und andere Inhalte für die Anzeige in einem Webbrowser zu kommentieren. HTML-Markup beinhaltet spezielle "Elemente" wie {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("datalist")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("nav")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("video")}} und viele andere.</p>
+
+<p>Die Tags in HTML sind case-insensitive. Das heißt, sie können in Groß- und Kleinbuchstaben oder in einer Mischung geschrieben werden. Beispiel <strong>&lt;title&gt; </strong>tag kann als <strong>&lt;Title&gt;</strong>,<strong>&lt;TITLE&gt;</strong> oder auf andere Weise geschrieben werden.</p>
+
+<p>Die folgenden Artikel helfen Ihnen, mehr über HTML zu erfahren.</p>
+
+<section class="cleared" id="sect1">
+<ul class="card-grid">
+ <li><span>HTML Einführung</span>
+
+  <p>Wenn Sie neu in der Webentwicklung sind, lesen Sie unbedingt unseren <a href="/de/docs/Learn/Getting_started_with_the_web">HTML Grundlagen</a> Artikel, um zu erfahren, was HTML ist und wie man es verwendet.</p>
+ </li>
+ <li><span>HTML Tutorials</span>
+  <p>Artikel über die Verwendung von HTML sowie Tutorials und vollständige Beispiele finden Sie in unserem <a href="/de/docs/Learn/HTML">HTML Lernbereich</a>.</p>
+ </li>
+ <li><span>HTML Referenz </span>
+  <p>In unserem umfangreichen Abschnitt <a href="/de/docs/Web/HTML/Reference">HTML Referenz</a> finden Sie die Details zu jedem Element und Attribut in HTML.</p>
+ </li>
+</ul>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Tools" id="Tutorials_für_Anfänger">Tutorials für Anfänger</h2>
+
+<p>Unser <a href="/de/docs/Learn/HTML">HTML Lernbereich</a> verfügt über mehrere Module, die HTML von Grund auf vermitteln - es sind keine Vorkenntnisse erforderlich.</p>
+
+<dl>
+ <dt><a href="/de/docs/Learn/HTML/Introduction_to_HTML">Einführung in HTML</a></dt>
+ <dd>Dieses Modul schafft die Voraussetzungen, um Sie an wichtige Konzepte und Syntaxen zu gewöhnen, wie z.B. die Anwendung von HTML auf Text, die Erstellung von Hyperlinks und die Verwendung von HTML zur Strukturierung einer Webseite.</dd>
+ <dt><a href="/de/docs/Learn/HTML/Multimedia_and_embedding">Einbettung von Multimedia Inhalten</a></dt>
+ <dd>Dieses Modul erklärt, wie Sie HTML verwenden können, um Multimedia Inhalte in Ihre Webseite aufnehmen können, einschließlich der verschiedenen Möglichkeiten, wie Bilder eingebunden werden können, und wie Sie Video, Audio oder sogar ganze andere Webseiten einbetten können.</dd>
+ <dt><a href="/de/docs/Learn/HTML/Tables">HTML Tabellen</a></dt>
+ <dd>Die verständliche und einfache Darstellung von Tabellendaten auf einer Webseite kann eine Herausforderung sein. Dieses Modul behandelt grundlegende Tabellen sowie komplexere Funktionen wie die Implementierung von Beschriftungen und Zusammenfassungen.</dd>
+ <dt><a href="/de/docs/Learn/HTML/Forms">HTML Formulare</a></dt>
+ <dd>Formulare sind ein sehr wichtiger Teil des Webs - sie bieten viele Funktionen, die Sie für die Interaktion mit Websites benötigen, z.B. Registrierung und Anmeldung, Feedback, Kauf von Produkten und mehr. Dieses Modul ermöglicht Ihnen den Einstieg in die Erstellung der Client-seitigen/Frontend-Teile von Formularen.</dd>
+ <dt><a href="/de/docs/Learn/HTML/Howto">Verwenden Sie HTML, um häufige Probleme zu lösen</a></dt>
+ <dd>Enthält Links zu Inhaltsabschnitten, die erklären, wie man HTML verwendet, um sehr häufige Probleme beim Erstellen einer Webseite zu lösen: Umgang mit Titeln, Hinzufügen von Bildern oder Videos, Hervorheben von Inhalten, Erstellen einer Grundform usw.</dd>
+</dl>
+
+<h2 id="Fortgeschrittene_Themen">Fortgeschrittene Themen</h2>
+
+<dl>
+ <dt class="landingPageList"><a href="/de/docs/Web/HTML/CORS_enabled_image">CORS fähiges Bild</a></dt>
+ <dd class="landingPageList">Das Attribut <code><a href="/de/docs/Web/HTML/Element/img#attr-crossorigin">crossorigin</a></code>, in Kombination mit einem entsprechenden <a class="glossaryLink" href="/de/docs/Glossar/CORS">CORS</a> header, ermöglicht es, Bilder, die durch das Element {{HTMLElement("img")}} definiert sind, aus fremden Quellen zu laden und in einem {{HTMLElement("canvas")}} Element zu verwenden, als würden sie aus dem aktuellen Ursprung geladen.</dd>
+ <dt class="landingPageList"><a href="/de/docs/Web/HTML/CORS_settings_attributes">Attribute der CORS Einstellungen</a></dt>
+ <dd class="landingPageList">Einige HTML-Elemente, die Unterstützung für <a href="/de/docs/HTTP/Access_control_CORS">CORS</a> bieten, wie {{HTMLElement("img")}} oder {{HTMLElement("video")}}, haben ein <code>crossorigin</code> Attribut (<code>crossOrigin</code> Eigenschaft), mit dem Sie die CORS-Anfragen für die abgerufenen Daten des Elements konfigurieren können.</dd>
+ <dt class="landingPageList"><a href="/de/docs/Web/HTML/Focus_management_in_HTML">Fokusverwaltung in HTML</a></dt>
+ <dd class="landingPageList">Die <code><a href="/de/docs/Web/API/Document/activeElement">activeElement</a></code> DOM-Attribut und das <code><a href="/de/docs/Web/API/Document/hasFocus">hasFocus()</a></code> DOM-Methode helfen Ihnen, die Interaktionen eines Benutzers mit Elementen auf einer Webseite zu verfolgen und zu steuern.</dd>
+ <dt class="landingPageList"><a href="/de/docs/Web/HTML/Using_the_application_cache">Verwendung des Anwendungs Cache</a></dt>
+ <dd class="landingPageList">Durch den Anwendungs Cache können webbasierte Anwendungen offline ausgeführt werden. Sie können die Schnittstelle <strong>Application Cache</strong> (<em>AppCache</em>) verwenden, um Ressourcen anzugeben, die der Browser zwischenspeichern und für Offline-Benutzer verfügbar machen soll. Anwendungen, die im Cache gespeichert sind, laden und funktionieren korrekt, auch wenn Benutzer auf die Schaltfläche Aktualisieren klicken, wenn sie offline sind.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/de/docs/Web/HTML/Preloading_content">Vorladen von Inhalten mit rel="preload".</a></dt>
+ <dd class="landingPageList">Das Attribut {{htmlattrxref("rel", "link")}} des {{htmlelement("link")}} Elements ermöglicht es Ihnen, deklarative Fetch-Anfragen in Ihr HTML {{htmlelement("head")}} zu schreiben, wobei Sie Ressourcen angeben, die Ihre Seiten sehr bald nach dem Laden benötigen, die Sie daher früh im Lebenszyklus einer Seitenladung vorab laden möchten, bevor die Haupt-Rendering-Maschine des Browsers einsetzt. Dadurch wird sichergestellt, dass sie früher verfügbar sind und weniger wahrscheinlich das erste Rendering der Seite blockieren, was zu Leistungssteigerungen führt. Dieser Artikel bietet eine grundlegende Anleitung, wie <code>preload</code> funktioniert.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="Referenzen">Referenzen</h2>
+
+<dl>
+ <dt class="landingPageList"><a href="/de/docs/Web/HTML/Reference">HTML Referenz</a></dt>
+ <dd class="landingPageList">HTML besteht aus <strong>Elementen</strong>, von denen jedes durch eine Anzahl von <strong>Attributen</strong> modifiziert werden kann. HTML Dokumente werden über <a href="/de/docs/Web/HTML/Link_types">links</a> miteinander verbunden.</dd>
+ <dt class="landingPageList"><a href="/de/docs/Web/HTML/Element">HTML Element Referenz</a></dt>
+ <dd class="landingPageList">Durchsuchen Sie eine Liste aller <a class="glossaryLink" href="/de/docs/Glossar/HTML">HTML</a> <a class="glossaryLink" href="/de/docs/Glossar/Element">Elemente</a>.</dd>
+ <dt class="landingPageList"><a href="/de/docs/Web/HTML/Attributes">HTML Attribut Referenz</a></dt>
+ <dd class="landingPageList">Elemente in HTML haben <strong>Attribute</strong>. Dies sind zusätzliche Werte, die die Elemente konfigurieren oder ihr Verhalten auf verschiedene Weise anpassen.</dd>
+ <dt class="landingPageList"><a href="/de/docs/Web/HTML/Global_attributes">Globale Attribute</a></dt>
+ <dd class="landingPageList">Globale Attribute können für alle <a href="/de/docs/Web/HTML/Element">HTML-Elemente</a>, <em>auch für diejenigen, die nicht im Standard</em> angegeben sind, angegeben werden. Das bedeutet, dass alle nicht standardmäßigen Elemente diese Attribute weiterhin zulassen müssen, auch wenn diese Elemente das Dokument nicht HTML5 kompatibel machen.</dd>
+ <dt class="landingPageList"><a href="/de/docs/Web/HTML/Inline_elements">Inline Elemente</a> und <a href="/de/docs/Web/HTML/Block-level_elements">Block Level Elemente</a></dt>
+ <dd class="landingPageList">HTML Elemente sind in der Regel "inline" oder "block-level" Elemente. Ein Inline-Element belegt nur den Raum, der durch die Tags begrenzt ist, die es definieren. Ein Element auf Blockebene nimmt den gesamten Platz seines übergeordneten Elements (Containers) ein und erzeugt so einen "Block".</dd>
+ <dt class="landingPageList"><a href="/de/docs/Web/HTML/Link_types">Link Typen</a></dt>
+ <dd class="landingPageList">In HTML können verschiedene Link-Typen verwendet werden, um die Verknüpfung zwischen zwei Dokumenten herzustellen und zu definieren. Zu den Link Elementen die verwendet werden können gehören <a href="/de/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/de/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a> und <a href="/de/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a>.</dd>
+ <dt class="landingPageList"><a href="/de/docs/Web/HTML/Supported_media_formats">Medienformate die von HTML unterstützt werden sind Audio und Video Elemnte</a></dt>
+ <dd class="landingPageList">The <a href="/de/docs/Web/HTML/Element/audio"><code>&lt;audio&gt;</code></a> und <a href="/de/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a> Elemente ermöglichen die Wiedergabe von Audio- und Videomedien. Diese Elemente bieten eine Browser-native Alternative zu Adobe Flash und anderen Plug-Ins.</dd>
+ <dt class="landingPageList"><a href="/de/docs/Web/HTML/Kinds_of_HTML_content">Arten von HTML Inhalten</a></dt>
+ <dd class="landingPageList">HTML umfasst verschiedene Arten von Elementen, von denen jeder in bestimmten Kontexten verwendet werden darf und in anderen nicht zulässig ist. Ebenso hat jede eine Reihe von Inhalten, die sie enthalten kann und Elemente die darin nicht verwendet werden können. Dies ist ein Leitfaden für diese Kategorien.</dd>
+ <dt class="landingPageList"><a href="/de/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">Eigenarten und Normen</a></dt>
+ <dd class="landingPageList">Historische Informationen über Eigenarten und Normen.</dd>
+</dl>
+
+<h2 class="landingPageList" id="Verwandte_Themen">Verwandte Themen</h2>
+
+<dl>
+ <dt><a href="/de/docs/Web/HTML/Applying_color">Hinzufügen von Farben mit CSS auf HTML Elemente</a></dt>
+ <dd>Dieser Artikel beschreibt die meisten der Möglichkeiten, wie Sie CSS verwenden, um HTML Elementen Farben hinzuzufügen, und listet auf, welche Teile von HTML-Dokumenten farbig dargestellt werden können und welche CSS-Eigenschaften dabei zu verwenden sind. Enthält Beispiele, Links zu Tools zur Farb Palettenerstellung und vieles mehr.</dd>
+</dl>
+</div>
+</div>
+<span class="alllinks"><a href="/de/docs/tag/HTML">Alles anzeigen...</a></span></section>
diff --git a/files/de/web/html/inline_elemente/index.html b/files/de/web/html/inline_elemente/index.html
new file mode 100644
index 0000000000..29f7e242cd
--- /dev/null
+++ b/files/de/web/html/inline_elemente/index.html
@@ -0,0 +1,32 @@
+---
+title: Inline-Elemente
+slug: Web/HTML/Inline_elemente
+translation_of: Web/HTML/Inline_elements
+---
+<h3 id="Summary" name="Summary">Zusammenfassung</h3>
+
+<p>"Inline" ist eine Kategorisierung von HTML-Elementen, und stellt das Gegenteil von <a href="/en-US/docs/HTML/Block-level_elements">"Block-Level" Elementen</a> dar. Inline-Elemente können sich innerhalb von Block-Level Elementen oder anderen Inline-Elementen befinden. Die Breite eines Inline-Elementes richtet sich nach dem Inhalt. Die Unterschiede zwischen Block-Elementen und Inline-Elementen beinhalten:</p>
+
+<dl>
+ <dt>Inhaltsmodell</dt>
+ <dd>Generell beinhalten Inline-Elemente nur Daten und andere Inline-Elemente.</dd>
+ <dt>Formatierung</dt>
+ <dd>Standardmäßig beginnen Inline-Elemente nicht in einer neuen Zeile.</dd>
+</dl>
+
+<h3 id="Elements" name="Elements">Elemente</h3>
+
+<p>Die folgenden Elemente sind "inline":</p>
+
+<ul>
+ <li><a href="/en/HTML/Element/b" title="en/HTML/Element/b">b</a>, <a href="/en/HTML/Element/big" title="en/HTML/Element/big">big</a>, <a href="/en/HTML/Element/i" title="en/HTML/Element/i">i</a>, <a href="/en/HTML/Element/small" title="en/HTML/Element/small">small</a>, <a href="/en/HTML/Element/tt" title="en/HTML/Element/tt">tt</a></li>
+ <li><a href="/en/HTML/Element/abbr" title="en/HTML/Element/abbr">abbr</a>, <a href="/en/HTML/Element/acronym" title="en/HTML/Element/acronym">acronym</a>, <a href="/en/HTML/Element/cite" title="en/HTML/Element/cite">cite</a>, <a href="/en/HTML/Element/code" title="en/HTML/Element/code">code</a>, <a href="/en/HTML/Element/dfn" title="en/HTML/Element/dfn">dfn</a>, <a href="/en/HTML/Element/em" title="en/HTML/Element/em">em</a>, <a href="/en/HTML/Element/kbd" title="en/HTML/Element/kbd">kbd</a>, <a href="/en/HTML/Element/strong" title="en/HTML/Element/strong">strong</a>, <a href="/en/HTML/Element/samp" title="en/HTML/Element/samp">samp</a>, <a href="/en/HTML/Element/var" title="en/HTML/Element/var">var</a></li>
+ <li><a href="/en/HTML/Element/a" title="en/HTML/Element/a">a</a>, <a href="/en/HTML/Element/bdo" title="en/HTML/Element/bdo">bdo</a>, <a href="/en/HTML/Element/br" title="en/HTML/Element/br">br</a>, <a href="/En/HTML/Element/Img" title="En/HTML/Element/Img">img</a>, <a href="/en/HTML/Element/map" title="en/HTML/Element/map">map</a>, <a href="/en/HTML/Element/object" title="en/HTML/Element/object">object</a>, <a href="/en/HTML/Element/q" title="en/HTML/Element/q">q</a>, <a href="/En/HTML/Element/Script" title="En/HTML/Element/Script">script</a>, <a href="/en/HTML/Element/span" title="en/HTML/Element/span">span</a>, <a href="/en/HTML/Element/sub" title="en/HTML/Element/sub">sub</a>, <a href="/en/HTML/Element/sup" title="en/HTML/Element/sup">sup</a></li>
+ <li><a href="/en/HTML/Element/button" title="en/HTML/Element/button">button</a>, <a href="/en/HTML/Element/Input" title="en/HTML/Element/Input">input</a>, <a href="/en/HTML/Element/label" title="en/HTML/Element/label">label</a>, <a href="/en/HTML/Element/select" title="en/HTML/Element/select">select</a>, <a href="/en/HTML/Element/textarea" title="en/HTML/Element/textarea">textarea</a></li>
+</ul>
+
+<h3 id="See_also" name="See_also">Siehe auch</h3>
+
+<ul>
+ <li><a href="/en/HTML/Block-level_elements" title="en/HTML/Block-level_elements">Block-level elements</a></li>
+</ul>
diff --git a/files/de/web/html/referenz/index.html b/files/de/web/html/referenz/index.html
new file mode 100644
index 0000000000..b9ad6c3301
--- /dev/null
+++ b/files/de/web/html/referenz/index.html
@@ -0,0 +1,29 @@
+---
+title: HTML-Referenz
+slug: Web/HTML/Referenz
+tags:
+  - Einstieg
+  - HTML
+  - Refernz
+  - Web
+translation_of: Web/HTML/Reference
+---
+<div>{{HTMLSidebar}}</div>
+
+<p class="summary">Diese <a href="/en-US/docs/Web/HTML">HTML</a>-Referenz beschreibt alle Elemente und Attribute von HTML, einschließlich globaler Attribute, die für alle Elemente gelten.</p>
+
+<dl>
+ <dd></dd>
+ <dt><a class="new" href="/de-DE/docs/Web/HTML/Element" rel="nofollow">HTML-Element-Referenz</a></dt>
+ <dd>Diese Seite listet alle Standard-HTML-Tags auf, die aktuell sind, aber auch welche die obsolet sind. Elemente die erst in HTML5 eingeführt wurden, werden referenziert, wobei die anderen Elemente in HTML5 auch valide sind.</dd>
+ <dt><a class="new" href="/de-DE/docs/Web/HTML/Attributes" rel="nofollow">HTML-Attribut-Referenz</a></dt>
+ <dd>Elemente in HTML haben Attribute; dies sind zusätzliche Werte, die die Elemente konfigurieren oder ihr Verhalten auf verschiedene Weise anpassen, um die Kriterien zu erfüllen, die die Benutzer wollen.</dd>
+ <dt><a href="/en-US/docs/Web/HTML/Global_attributes">Globale Attribute</a></dt>
+ <dd>Globale Attribute dürfen allen HTML Elementen zugewiesen werden, auch wenn diese Elemente nicht dem Standard entsprechen. Es müssen also alle Attribute vom Browser ausgewertet werden, auch wenn die Verwendung eines Elements bewirkt, dass das Dokument nicht HTML5-konform ist. Zum Beispiel verstecken HTML5-konforme Browser ein Element &lt;foo hidden&gt;...&lt;foo&gt;, obwohl &lt;foo&gt; kein valides HTML Element ist.</dd>
+ <dt><a href="/en-US/docs/Web/HTML/Link_types">Link-Typen</a></dt>
+ <dd>In HTML, the following link types indicate the relationship between two documents, in which one links to the other using an &lt;a&gt;, &lt;area&gt;, or &lt;link&gt; element.</dd>
+</dl>
+
+<p><span class="alllinks"><a href="/en-US/docs/tag/HTML" title="Article tagged: HTML">Alle Seiten mit dem Tag "HTML" ansehen...</a></span></p>
+
+<div class="section"></div>
diff --git a/files/de/web/html/using_the_application_cache/index.html b/files/de/web/html/using_the_application_cache/index.html
new file mode 100644
index 0000000000..1afea42d7d
--- /dev/null
+++ b/files/de/web/html/using_the_application_cache/index.html
@@ -0,0 +1,375 @@
+---
+title: Benutzung des Application Cache
+slug: Web/HTML/Using_the_application_cache
+translation_of: Web/HTML/Using_the_application_cache
+---
+<h2 id="Einführung">Einführung</h2>
+
+<p><a href="/de/docs/Web/HTML/HTML5" title="HTML/HTML5">HTML5</a> bietet einen <em>Anwendungscaching</em>-Mechanismus, welcher webbasierte Anwendungen offline nutzbar macht. Entwickler können das <strong>Application Cache</strong> (AppCache) - Interface nutzen, um Ressourcen, die der Browser cachen soll für die Offline-Nutzung verfügbar zu machen. Gecachte Anwendungen laden und arbeiten korrekt, auch wenn der User den "Neu laden" - Button des Browsers klickt.</p>
+
+<p>Die Nutzung des Application Cache ermöglicht einer Anwendung folgende Vorteile: </p>
+
+<ul>
+ <li>Offline surfen: Nutzer können durch eine Seite navigieren wenn sie offline sind.</li>
+ <li>Geschwindigkeit: Gecachte Ressourcen sind lokal und laden daher schneller.</li>
+ <li>Verminderte Serverlast: Der Browser lädt nur die Ressourcen vom Server, die sich geändert haben.</li>
+</ul>
+
+<h2 id="Wie_der_AppCache_funktioniert">Wie der AppCache funktioniert</h2>
+
+<h3 id="Aktivieren_des_AppCaches">Aktivieren des AppCaches</h3>
+
+<p>Zum Aktivieren des ApplicationCaches für eine App muss das {{htmlattrxref("manifest", "html")}}-Attribute in das {{HTMLElement("html")}}-Element auf allen Seiten der App eingebunden werden, wie folgendes Beispiel zeigt:</p>
+
+<div style="overflow: hidden;">
+<pre class="brush: html">&lt;html manifest="example.appcache"&gt;
+  ...
+&lt;/html&gt;
+</pre>
+</div>
+
+<p>Das Manifest-Attribut verweist auf eine <strong>cache manifest</strong>-Datei, die als Textdatei alle Ressourcen (Dateien) auflistet, die der Browser innerhalb der App cachen soll.</p>
+
+<p>Sie sollten das <code>manifest</code>-Attribute auf jeder Seite Ihrer App einbinden, die zwischengespeichert werden soll. Der Browser speichert keine Seiten die nicht das <code>manifest</code>-Attribute besitzen, außer manche Seiten sind explizit in der manifest-Datei beschrieben. Sie müssen nicht alle Dateien einzeln in die manifest-Datei schreiben die gespeichert werden sollen, der Browser fügt jede Seite indirekt hinzu die der Benutzer besucht und die, die das <code>manifest</code>-Attribute enthalten.</p>
+
+<p>Manche Browser (z.B. Firefox) zeigen eine Benachrichtigung an, dass ein entsprechender App-Cache verwendet wird, wenn ein Benutzer die App das erste Mal besucht. Die Benachrichtigungsleiste zeigt dann in etwa folgendes an:</p>
+
+<p style="margin-left: 40px;">Die Webseite (<code>www.example.com</code>) möchte gerne Daten zur Offline-Benutzung abspeichern. [Erlauben] [Nie für diese Seite] [Nicht jetzt]</p>
+
+<p>The term "offline(-enabled) applications" sometimes refers specifically to applications that the user has allowed to use offline capabilities.</p>
+
+<h3 id="Loading_documents">Loading documents</h3>
+
+<p>The use of an application cache modifies the normal process of loading a document:</p>
+
+<ul>
+ <li>If an application cache exists, the browser loads the document and its associated resources directly from the cache, without accessing the network. This speeds up the document load time.</li>
+ <li>The browser then checks to see if the cache manifest has been updated on the server.</li>
+ <li>If the cache manifest has been updated, the browser downloads a new version of the manifest and the resources listed in the manifest. This is done in the background and does not affect performance significantly.</li>
+</ul>
+
+<p>The process for loading documents and updating the application cache is specified in greater detail below:</p>
+
+<ol>
+ <li>When the browser visits a document that includes the <code>manifest</code> attribute, if no application cache exists, the browser loads the document and then fetches all the entries listed in the manifest file, creating the first version of the application cache.</li>
+ <li>Subsequent visits to that document cause the browser to load the document and other assets specified in the manifest file from the application cache (not from the server). In addition, the browser also sends a <code>checking</code> event to the <code><a href="/en-US/docs/DOM/window.applicationCache" title="DOM/window.applicationCache">window.applicationCache</a></code> object, and fetches the manifest file, following the appropriate HTTP caching rules.</li>
+ <li>If the currently-cached copy of the manifest is up-to-date, the browser sends a <code>noupdate</code> event to the <code>applicationCache</code> object, and the update process is complete. Note that if you change any cached resources on the server, you must also change the manifest file itself, so that the browser knows it needs to fetch all the resources again.</li>
+ <li>If the manifest file <em>has</em> changed, all the files listed in the manifest—as well as those added to the cache by calling <code><a href="/en-US/docs/nsIDOMOfflineResourceList#add.28.29" title="nsIDOMOfflineResourceList#add.28.29">applicationCache.add()</a></code>—are fetched into a temporary cache, following the appropriate HTTP caching rules. For each file fetched into this temporary cache, the browser sends a <code>progress</code> event to the <code>applicationCache</code> object. If any errors occur, the browser sends an <code>error</code> event, and the update halts.</li>
+ <li>Once all the files have been successfully retrieved, they are moved into the real offline cache automatically, and a <code>cached</code> event is sent to the <code>applicationCache</code> object. Since the document has already been loaded into the browser from the cache, the updated document will not be rendered until the document is reloaded (either manually or programatically).</li>
+</ol>
+
+<h2 id="Storage_location_and_clearing_the_offline_cache">Storage location and clearing the offline cache</h2>
+
+<p>In Chrome you can clear the offline cache by selecting "Clear browsing data..." in the preferences or by visiting <a title="chrome://appcache-internals/">chrome://appcache-internals/</a>. Safari has a similar "Empty cache" setting in its preferences but a browser restart may also be required.</p>
+
+<p>In Firefox, the offline cache data is stored separately from the Firefox profile—next to the regular disk cache:</p>
+
+<ul>
+ <li>Windows Vista/7: <code>C:\Users\&lt;username&gt;\AppData\<strong>Local</strong>\Mozilla\Firefox\Profiles\&lt;salt&gt;.&lt;profile name&gt;\OfflineCache</code></li>
+ <li>Mac/Linux: <code>/Users/&lt;username&gt;/Library/Caches/Firefox/Profiles/&lt;salt&gt;.&lt;profile name&gt;/OfflineCache</code></li>
+</ul>
+
+<p>In Firefox the current status of the offline cache can be inspected on the <code>about:cache</code> page (under the "Offline cache device" heading). The offline cache can be cleared for each site separately using the "Remove..." button in Tools -&gt; Options -&gt; Advanced -&gt; Network -&gt; Offline data.</p>
+
+<p>Prior to Firefox 11, neither Tools -&gt; Clear Recent History nor Tools -&gt; Options -&gt; Advanced -&gt; Network -&gt; Offline data -&gt; Clear Now cleared the offline cache. This has been fixed.</p>
+
+<p>See also <a href="/en-US/docs/DOM/Storage#Storage_location_and_clearing_the_data" title="DOM/Storage#Storage location and clearing the data">clearing the DOM Storage data</a>.</p>
+
+<p>Application caches can also become obsolete. If an application's manifest file is removed from the server, the browser removes all application caches that use that manifest, and sends an "obsolete" event to the <code>applicationCache</code> object. This sets the application cache's state to <code>OBSOLETE</code>.</p>
+
+<h2 id="The_cache_manifest_file">The cache manifest file</h2>
+
+<h3 id="Referencing_a_cache_manifest_file">Referencing a cache manifest file</h3>
+
+<p>The <code>manifest</code> attribute in a web application can specify either the relative path of a cache manifest file or an absolute URL. (Absolute URLs must be from the same origin as the application). A cache manifest file can have any file extension, but it must be served with the MIME type <code>text/cache-manifest</code>.</p>
+
+<div class="note"><strong>Note: </strong>On Apache servers, the MIME type for manifest (.appcache) files can be set by adding <code>AddType text/cache-manifest .appcache</code> to a .htaccess file within either the root directory, or the same directory as the application.</div>
+
+<h3 id="Entries_in_a_cache_manifest_file">Entries in a cache manifest file</h3>
+
+<p>The cache manifest file is a simple text file that lists the resources the browser should cache for offline access. Resources are identified by URI. Entries listed in the cache manifest must have the same scheme, host, and port as the manifest.</p>
+
+<h3 id="Example_1_a_simple_cache_manifest_file">Example 1: a simple cache manifest file</h3>
+
+<p>The following is a simple cache manifest file, <code>example.appcache</code>, for an imaginary web site at <span class="nowiki">www.example.com</span>.</p>
+
+<pre>CACHE MANIFEST
+# v1 - 2011-08-13
+# This is a comment.
+<span class="nowiki">http://www.example.com/index.html</span>
+<span class="nowiki">http://www.example.com/header.png</span>
+<span class="nowiki">http://www.example.com/blah/blah</span>
+</pre>
+
+<p>A cache manifest file can include three sections (<code>CACHE</code>, <code>NETWORK</code>, and <code>FALLBACK</code>, discussed below). In the example above, there is no section header, so all data lines are assumed to be in the explicit (<code>CACHE</code>) section, meaning that the browser should cache all the listed resources in the application cache. Resources can be specified using either absolute or relative URLs (e.g., <code>index.html</code>).</p>
+
+<p>The "v1" comment in the example above is there for a good reason. Browsers only update an application cache when the manifest file changes, byte for byte. If you change a cached resource (for example, you update the <code>header.png</code> image with new content), you must also change the content of the manifest file in order to let browsers know that they need to refresh the cache. You can make any change you want to the manifest file, but revising a version number is the recommended best practice.</p>
+
+<div class="warning"><strong>Important:</strong> Do not specify the manifest itself in the cache manifest file, otherwise it will be nearly impossible to inform the browser a new manifest is available.</div>
+
+<h3 id="Sections_in_a_cache_manifest_file_CACHE_NETWORK_and_FALLBACK">Sections in a cache manifest file: <code>CACHE</code>, <code>NETWORK</code>, and <code>FALLBACK</code></h3>
+
+<p>A manifest can have three distinct sections: <code>CACHE</code>, <code>NETWORK</code>, and <code>FALLBACK</code>.</p>
+
+<dl>
+ <dt><code>CACHE:</code></dt>
+ <dd>This is the default section for entries in a cache manifest file. Files listed under the <code>CACHE:</code> section header (or immediately after the <code>CACHE MANIFEST</code> line) are explicitly cached after they're downloaded for the first time.</dd>
+ <dt><code>NETWORK:</code></dt>
+ <dd>Files listed under the <code>NETWORK:</code> section header in the cache manifest file are white-listed resources that require a connection to the server. All requests to such resources bypass the cache, even if the user is offline. Wildcards may be used.</dd>
+ <dt><code>FALLBACK:</code></dt>
+ <dd>The <code>FALLBACK:</code> section specifies fallback pages the browser should use if a resource is inaccessible. Each entry in this section lists two URIs—the first is the resource, the second is the fallback. Both URIs must be relative and from the same origin as the manifest file. Wildcards may be used.</dd>
+</dl>
+
+<p>The <code>CACHE</code>, <code>NETWORK</code>, and <code>FALLBACK </code>sections can be listed in any order in a cache manifest file, and each section can appear more than once in a single manifest.</p>
+
+<h3 id="Example_2_a_more_complete_cache_manifest_file">Example 2: a more complete cache manifest file</h3>
+
+<p>The following is a more complete cache manifest file for the imaginary web site at <span class="nowiki">www.example.com</span>:</p>
+
+<pre>CACHE MANIFEST
+# v1 2011-08-14
+# This is another comment
+index.html
+cache.html
+style.css
+image1.png
+
+# Use from network if available
+NETWORK:
+network.html
+
+# Fallback content
+FALLBACK:
+/ fallback.html
+</pre>
+
+<p>This example uses <code>NETWORK</code> and <code>FALLBACK</code> sections to specify that the <code>network.html</code> page must always be retrieved from the network, and that the <code>fallback.html</code> page should be served as a fallback resource (e.g., in case a connection to the server cannot be established).</p>
+
+<h3 id="Structure_of_a_cache_manifest_file">Structure of a cache manifest file</h3>
+
+<p>Cache manifest files must be served with the <code>text/cache-manifest</code> MIME type. All resources served using this MIME type must follow the syntax for an application cache manifest, as defined in this section.</p>
+
+<p>Cache manifests are UTF-8 format text files, and may optionally include a BOM character. Newlines may be represented by line feed (<code>U+000A</code>), carriage return (<code>U+000D</code>), or carriage return and line feed both.</p>
+
+<p>The first line of the cache manifest must consist of the string <code>CACHE MANIFEST</code> (with a single <code>U+0020</code> space between the two words), followed by zero or more space or tab characters. Any other text on the line is ignored.</p>
+
+<p>The remainder of the cache manifest must be comprised of zero or more of the following lines:</p>
+
+<dl>
+ <dt>Blank line</dt>
+ <dd>You may use blank lines comprised of zero or more space and tab characters.</dd>
+ <dt>Comment</dt>
+ <dd>Comments consist of zero or more tabs or spaces followed by a single <code>#</code> character, followed by zero or more characters of comment text. Comments may only be used on their own lines, and cannot be appended to other lines. This means that you cannot specify fragment identifiers.</dd>
+ <dt>Section header</dt>
+ <dd>Section headers specify which section of the cache manifest is being manipulated. There are three possible section headers:</dd>
+</dl>
+
+<blockquote>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Section header</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td><code>CACHE:</code></td>
+   <td>Switches to the explicit section of the cache manifest (this is the default section).</td>
+  </tr>
+  <tr>
+   <td><code>NETWORK:</code></td>
+   <td>Switches to the online whitelist section of the cache manifest.</td>
+  </tr>
+  <tr>
+   <td><code>FALLBACK:</code></td>
+   <td>Switches to the fallback section of the cache manifest.</td>
+  </tr>
+ </tbody>
+</table>
+</blockquote>
+
+<dl>
+ <dd>The section header line may include whitespaces, but must include the colon (<code>:</code>) in the section name.</dd>
+ <dt>Section data</dt>
+ <dd>The format for lines of data varies from section to section. In the explicit (<code>CACHE:</code>) section, each line is a valid URI or IRI reference to a resource to cache (no wildcard characters are allowed in this sections). Whitespace is allowed before and after the URI or IRI on each line. In the Fallback section each line is a valid URI or IRI reference to a resource, followed by a fallback resource that is to be served up when a connection with the server cannot be made. In the network section, each line is a valid URI or IRI reference to a resource to fetch from the network (the wildcard character * is allowed in this section).
+ <div class="note"><strong>Note: </strong>Relative URIs are relative to the cache manifest's URI, not to the URI of the document referencing the manifest.</div>
+ </dd>
+</dl>
+
+<p>Cache manifest files can switch from section to section at will (each section header can be used more than once), and sections are allowed to be empty.</p>
+
+<h2 id="Resources_in_an_application_cache">Resources in an application cache</h2>
+
+<p>An application cache always includes at least one resource, identified by URI. All resources fit into one of the following categories:</p>
+
+<dl>
+ <dt>Master entries</dt>
+ <dd>These are resources added to the cache because a browsing context visited by the user included a document that indicated that it was in this cache using its <code>manifest</code> attribute.</dd>
+ <dt>Explicit entries</dt>
+ <dd>These are resources explicitly listed in the application's cache manifest file.</dd>
+ <dt>Network entries</dt>
+ <dd>These are resources listed in the application's cache manifest files as network entries.</dd>
+ <dt>Fallback entries</dt>
+ <dd>These are resources listed in the application's cache manifest files as fallback entries.</dd>
+</dl>
+
+<div class="note"><strong>Note:</strong> Resources can be tagged with multiple categories, and can therefore be categorized as multiple entries. For example, an entry can be both an explicit entry and a fallback entry.</div>
+
+<p>Resource categories are described in greater detail below.</p>
+
+<h3 id="Master_entries">Master entries</h3>
+
+<p>Master entries are any HTML files that include a {{htmlattrxref("manifest","html")}} attribute in their {{HTMLElement("html")}} element. For example, let's say we have the HTML file <code><a class="linkification-ext external" href="http://www.foo.bar/entry.html" title="Linkification: http://www.foo.bar/entry.html">http://www.example.com/entry.html</a></code>, which looks like this:</p>
+
+<pre class="brush: html">&lt;html manifest="example.appcache"&gt;
+  &lt;h1&gt;Application Cache Example&lt;/h1&gt;
+&lt;/html&gt;
+</pre>
+
+<p>If <code>entry.html</code> is not listed in the <code>example.appcache</code> cache manifest file, visiting the <code>entry.html</code> page causes <code>entry.html</code> to be added to the application cache as a master entry.</p>
+
+<h3 id="Explicit_entries">Explicit entries</h3>
+
+<p>Explicit entries are resources that are explicitly listed in the <code>CACHE </code>section of a cache manifest file.</p>
+
+<h3 id="Network_entries">Network entries</h3>
+
+<p>The <code>NETWORK</code> section of a cache manifest file specifies resources for which a web application requires online access. Network entries in an application cache are essentially an "online whitelist"—URIs specified in the <code>NETWORK</code> section are loaded from the server instead of the cache. This lets the browser's security model protect the user from potential security breaches by limiting access to approved resources.</p>
+
+<p>As an example, you can use network entries to load and execute scripts and other code from the server instead of the cache:</p>
+
+<pre>CACHE MANIFEST
+NETWORK:
+/api
+</pre>
+
+<p>The cache manifest section listed above ensures that requests to load resources contained in the <code><a href="http://www.example.com/api/" rel="freelink">http://www.example.com/api/</a></code> subtree always go to the network without attempting to access the cache.</p>
+
+<div class="note"><strong>Note</strong>: Simply omitting master entries (files that have the <code>manifest</code> attribute set in the <code>html</code> element) from the manifest file would not have the same result, because master entries will be added—and subsequently served from—the application cache.</div>
+
+<h3 id="Fallback_entries">Fallback entries</h3>
+
+<p>Fallback entries are used when an attempt to load a resource fails. For example, let's say the cache manifest file <code><a href="http://www.example.com/example.appcache" rel="freelink">http://www.example.com/example.appcache</a></code> includes the following content:</p>
+
+<pre>CACHE MANIFEST
+FALLBACK:
+example/bar/ example.html
+</pre>
+
+<p>Any request to <code><a href="http://www.example.com/example/bar/" rel="freelink">http://www.example.com/example/bar/</a></code> or any of its subdirectories and their content cause the browser to issue a network request to attempt to load the requested resource. If the attempt fails, due to either a network failure or a server error of some kind, the browser loads the file <code>example.html</code> instead.</p>
+
+<h2 id="Cache_states">Cache states</h2>
+
+<p>Each application cache has a <strong>state</strong>, which indicates the current condition of the cache. Caches that share the same manifest URI share the same cache state, which can be one of the following:</p>
+
+<dl>
+ <dt><code>UNCACHED</code></dt>
+ <dd>A special value that indicates that an application cache object is not fully initialized.</dd>
+ <dt><code>IDLE</code></dt>
+ <dd>The application cache is not currently in the process of being updated.</dd>
+ <dt><code>CHECKING</code></dt>
+ <dd>The manifest is being fetched and checked for updates.</dd>
+ <dt><code>DOWNLOADING</code></dt>
+ <dd>Resources are being downloaded to be added to the cache, due to a changed resource manifest.</dd>
+ <dt><code>UPDATEREADY</code></dt>
+ <dd>There is a new version of the application cache available. There is a corresponding <code>updateready</code> event, which is fired instead of the <code>cached</code> event when a new update has been downloaded but not yet activated using the <code>swapCache()</code> method.</dd>
+ <dt><code>OBSOLETE</code></dt>
+ <dd>The application cache group is now obsolete.</dd>
+</dl>
+
+<h2 id="Testing_for_updates_to_the_cache_manifest">Testing for updates to the cache manifest</h2>
+
+<p>You can programmatically test to see if an application has an updated cache manifest file, using JavaScript. Since a cache manifest file may have been updated before a script attaches event listeners to test for updates, scripts should always test <code>window.applicationCache.status</code>.</p>
+
+<pre class="brush: js">function onUpdateReady() {
+  alert('found new version!');
+}
+window.applicationCache.addEventListener('updateready', onUpdateReady);
+if(window.applicationCache.status === window.applicationCache.UPDATEREADY) {
+  onUpdateReady();
+}</pre>
+
+<p>To manually start testing for a new manifest file, you can use <code>window.applicationCache.update()</code>.</p>
+
+<h2 id="Gotchas">Gotchas</h2>
+
+<ul>
+ <li>Never access cached files by using traditional GET parameters (like <code>other-cached-page.html?parameterName=value</code>). This will make the browser bypass the cache and attempt to get it from network. To link to cached resources that have parameters parsed in JavaScript use parameters in the hash part of the link, such as <code>other-cached-page.html#whatever?parameterName=value</code>.</li>
+ <li>When applications are cached, simply updating the resources (files) that are used in a web page is not enough to update the files that have been cached. You must update the cache manifest file itself before the browser retrieves and uses the updated files. You can do this programmatically using <code>window.applicationCache.swapCache()</code>, though resources that have already been loaded will not be affected. To make sure that resources are loaded from a new version of the application cache, refreshing the page is ideal.</li>
+ <li>It's a good idea to set expires headers on your web server for <code>*.appcache</code> files to expire immediately. This avoids the risk of caching manifest files. For example, in Apache you can specify such a configuration as follows:<br>
+  <code>ExpiresByType text/cache-manifest "access plus 0 seconds"</code></li>
+</ul>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.0</td>
+   <td>3.5</td>
+   <td>10.0</td>
+   <td>10.6</td>
+   <td>4.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>11.0</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Note: Versions of Firefox prior to 3.5 ignore the <code>NETWORK </code>and <code>FALLBACK </code>sections of the cache manifest file.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="http://www.html5rocks.com/en/tutorials/appcache/beginner/" title="http://www.html5rocks.com/en/tutorials/appcache/beginner/">HTML5Rocks - A Beginner's Guide to Using the Application Cache</a></li>
+ <li><a href="http://appcachefacts.info/" title="http://appcachefacts.info/">appcachefacts.info</a> - detailed information on AppCache idiosyncrasies</li>
+ <li><a href="http://alistapart.com/article/application-cache-is-a-douchebag" title="http://alistapart.com/article/application-cache-is-a-douchebag">A List Apart: Application Cache is a Douchebag</a></li>
+ <li><a href="http://hacks.mozilla.org/2010/01/offline-web-applications/" title="http://hacks.mozilla.org/2010/01/offline-web-applications/">offline web applications</a> at hacks.mozilla.org - showcases an offline app demo and explains how it works.</li>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline">HTML 5 working draft: Offline web applications</a></li>
+ <li><a href="http://www.w3.org/TR/offline-webapps/" title="http://www.w3.org/TR/offline-webapps/">W3C Working Group Note: Offline Web Applications</a></li>
+ <li><a href="http://developer.teradata.com/blog/js186040/2011/11/html5-cache-manifest-an-off-label-usage" title="http://developer.teradata.com/blog/js186040/2011/11/html5-cache-manifest-an-off-label-usage">HTML5 Cache Manifest: An Off-label Usage</a></li>
+ <li><a href="http://manifest-validator.com" title="http://manifest-validator.com">Cache Manifest Validator</a></li>
+ <li>{{interface("nsIApplicationCache")}}</li>
+ <li>{{interface("nsIApplicationCacheNamespace")}}</li>
+ <li>{{interface("nsIApplicationCacheContainer")}}</li>
+ <li>{{interface("nsIApplicationCacheChannel")}}</li>
+ <li>{{interface("nsIApplicationCacheService")}}</li>
+ <li>{{interface("nsIDOMOfflineResourceList")}}</li>
+ <li><a href="http://www.ibm.com/developerworks/web/library/wa-ffox3/">Get ready for Firefox 3.0 - A Web developer's guide to the many new features in this popular browser, especially the offline application features</a> (IBM developerWorks)</li>
+ <li><a href="/en-US/docs/Application_cache_implementation_overview" title="/en-US/docs/Application_cache_implementation_overview">Application cache implementation overview</a></li>
+</ul>
+
+<div>{{HTML5ArticleTOC}}</div>
diff --git a/files/de/web/http/basics_of_http/identifying_resources_on_the_web/index.html b/files/de/web/http/basics_of_http/identifying_resources_on_the_web/index.html
new file mode 100644
index 0000000000..9e435fa016
--- /dev/null
+++ b/files/de/web/http/basics_of_http/identifying_resources_on_the_web/index.html
@@ -0,0 +1,188 @@
+---
+title: Resourcen im Internet identifizieren
+slug: Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web
+tags:
+  - Anfrage
+  - Domain
+  - HTTP
+  - Internet
+  - Pfad
+  - Resourcen
+  - Schema
+  - Syntax
+  - URI
+  - URL
+  - URL Syntax
+  - fragment
+  - port
+translation_of: Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary">Das Ziel einer HTTP Anfrage wird Resource genannt. Deren Eigenschaften ist nicht weiter definiert, sie könnte ein Dokument, ein Photo oder irgendwas anderes sein. Jede Resource ist identifiziert über einen Uniformen Resourcen Identifizierer ({{Glossary("URI")}}), welche überall in HTTP genutzt werden, um Resourcen zu identifizieren.</p>
+
+<p>Die Identität und der Ort von Resourcen im Internet sind meistens gegeben über eine einzelne URL (Uniform Resource Locator, eine Art der URI). Es gibt manchmal Gründe, dass Identitä und Ort nicht von der selben URI gegeben: HTTP benutzt einen spezifischen HTTP header, {{HTTPHeader("Alt-Svc")}} wenn die Resource will, dass der Client sie an einem anderen Ort anfragt.</p>
+
+<h2 id="URLs_und_URNs">URLs und URNs</h2>
+
+<h3 id="URLs">URLs</h3>
+
+<p>Die häufigste Form von URI ist der Uniform Resource Locator ({{Glossary("URL")}}),  welche als Web Adresse bekannt ist.</p>
+
+<pre>https://developer.mozilla.org
+https://developer.mozilla.org/en-US/docs/Learn/
+https://developer.mozilla.org/en-US/search?q=URL</pre>
+
+<p>Jede dieser URLs kann in einen Browser eingegeben werden um mit diesem die assoziierte Seite (auch eine Resource) zu laden.</p>
+
+<p>Eine URL besteht aus verschiedenen Teilen, manche werden benötigt, andere sind optional. Ein komplexeres Beispiel könnte so aussehen:</p>
+
+<pre>http://www.example.com:80/path/to/myfile.html?key1=value1&amp;key2=value2#SomewhereInTheDocument</pre>
+
+<h3 id="URNs">URNs</h3>
+
+<p>Ein Uniform Resource Name (URN) ist eine URI die eine Resource über einen namen in einem Namespace.</p>
+
+<pre>urn:isbn:9780141036144
+urn:ietf:rfc:7230
+</pre>
+
+<p>Die beiden URNs korrespondieren zu</p>
+
+<ul>
+ <li>Dem Buch Nineteen Eighty-Four von George Orwell,</li>
+ <li>Der IETF Spezifikation 7230, Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing.</li>
+</ul>
+
+<h2 id="Syntax_von_Uniform_Resource_Identifiers_URIs">Syntax von Uniform Resource Identifiers (URIs)</h2>
+
+<h3 id="Schema_oder_Protokoll">Schema oder Protokoll</h3>
+
+<dl>
+ <dt><img alt="Protocol" src="https://mdn.mozillademos.org/files/8013/mdn-url-protocol@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>http://</code> ist das Protokoll. Es gibt an, welches Protokoll der Browser nutzen soll. Normalerweise ist das das HTTP Protokoll oder seine gesicherte version, HTTPS. Das Internet verlangt eines der beiden, aber Browser wissen auch wie andere Protokolle wie mailto: (um einen email Client zu öffnen) oder ftp: (für einen Datentransfer) zu behandeln sind, also sollte man nicht überrascht sein wenn man solche Protokolle sieht. Häufige Schemata sind:</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Schema</th>
+   <th scope="col">Beschreibung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>data</td>
+   <td><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">Daten URIs</a></td>
+  </tr>
+  <tr>
+   <td>file</td>
+   <td>Serverspezifische Dateinamen</td>
+  </tr>
+  <tr>
+   <td>ftp</td>
+   <td><a href="/en-US/docs/Glossary/FTP">File Transfer Protocol</a></td>
+  </tr>
+  <tr>
+   <td>http/https</td>
+   <td><a href="/en-US/docs/Glossary/HTTP">Hyper text transfer protocol (Secure)</a></td>
+  </tr>
+  <tr>
+   <td>mailto</td>
+   <td>email Adresse</td>
+  </tr>
+  <tr>
+   <td>ssh</td>
+   <td>Secure shell</td>
+  </tr>
+  <tr>
+   <td>tel</td>
+   <td>Telephon</td>
+  </tr>
+  <tr>
+   <td>urn</td>
+   <td>Uniform Resource Names</td>
+  </tr>
+  <tr>
+   <td>view-source</td>
+   <td>Source Code der Resource</td>
+  </tr>
+  <tr>
+   <td>ws/wss</td>
+   <td>(Verschlüsselte) <a href="/en-US/docs/Web/API/WebSockets_API">WebSocket</a> Verbindungen</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Authorität">Authorität</h3>
+
+<dl>
+ <dt><img alt="Domaine Name" src="https://mdn.mozillademos.org/files/8015/mdn-url-domain@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>www.example.com</code> ist der Domain Name oder Authorität die den Namespace verwaltet. Sie gibt an, welcher Server angefragt wird. Alternativ ist es möglich, direkt eine {{Glossary("IP address")}} anzugeben, aber da es weniger angenehm ist, wird es nicht häufig genutzt.</dd>
+</dl>
+
+<h3 id="Port">Port</h3>
+
+<dl>
+ <dt><img alt="Port" src="https://mdn.mozillademos.org/files/8017/mdn-url-port@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>:80</code> ist der Port in diesem Fall. Er gibt das technologische "Tor" an, über welches die Resource auf dem Server angesprochen wird. Er wird in der Regel weggelassen wenn der Server die Standard Ports für das HTTP (80) oder HTTPS (443) Protokoll nutzt. Andernfalls wird die Portangabe benötigt.</dd>
+</dl>
+
+<h3 id="Pfad">Pfad</h3>
+
+<dl>
+ <dt><img alt="Path to the file" src="https://mdn.mozillademos.org/files/8019/mdn-url-path@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>/path/to/myfile.html</code> ist der Pfad zu der Resource auf dem Server. Anfangs hat der Pfad einen Dateipfad auf dem Server angegeben, heutzutage ist er aber meist eine Abstraktion, die von dem Server verarbeitet wird</dd>
+</dl>
+
+<h3 id="Anfrage">Anfrage</h3>
+
+<dl>
+ <dt><img alt="Parameters" src="https://mdn.mozillademos.org/files/8021/mdn-url-parameters@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>?schluessel1=wert1&amp;wśchluessel2=wert2</code> sind extra Parameter die dem Server übergeben werden. Diese Parameter sind eine Liste von Schlüssel/Wert paaren, die mit einem &amp; getrennt werden. Der Server kann diese Parameter nutzen um zusätzliche Sachen zu machen bevor die Resource dem Nutzer übergeben wird. Jeder Server hat eigene Regeln bezüglich Parametern und der einzig sichere Weg diese zu wissen, ist denn Besitzer des Servers zu fragen.</dd>
+</dl>
+
+<h3 id="Fragment">Fragment</h3>
+
+<dl>
+ <dt><img alt="Anchor" src="https://mdn.mozillademos.org/files/8023/mdn-url-anchor@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>#SomewhereInTheDocument</code> ist ein Anker zu einem anderen Bereich der Resource selber. Ein Anker repräsentiert eine Art "Lesezeichen" innerhalb der Resource, damit der Browser den Inhalt an der Stelle des Ankers anzeigt. In einem HTML document wird der Browser zum Beispiel an die Stelle scrollen, an der der Anker definiert ist; in einem Video oder Audio Document wird der Browser zu der entsprechenden Zeit springen. Das Fragment selber wird allerdings nie zu dem Server gesendet, es wird allein von dem Browser verarbeitet.</dd>
+</dl>
+
+<h2 id="Nutzungshinweise">Nutzungshinweise</h2>
+
+<p>Wenn man URLs in einem {{Glossary("HTML")}} Inhalt nutzt sollte man generell nur ein paar dieser URL Schemata nutzen. Nutzt man Subresourcen — das heißt, Dateien die als Teil eines größeren Dokuments geladen werden —, sollte man nur die HTTP und HTTPS Schemata nutzen. Browser entfernen vermehrt den Support dafür, dass FTP Schema zu nutzen um Subresourcen zu laden, da dies eine Sicherheitslücker darstellt.</p>
+
+<p>FTP ist immernoch akzeptiert auf dem obersten Level (zum Beispiel direkt in der URL Leiste des Browsers eingegeben, oder das Ziel eines Links), wobei manche Browser FTP Inhalte an eine andere Anwendung delegieren.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<pre>https://developer.mozilla.org/en-US/docs/Learn
+tel:+1-816-555-1212
+git@github.com:mdn/browser-compat-data.git
+ftp://example.org/resource.txt
+urn:isbn:9780141036144
+mailto:help@supercyberhelpdesk.info
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7230", "Uniform Resource Identifiers", "2.7")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Common_questions/What_is_a_URL">What is a URL?</a></li>
+ <li><a href="http://www.iana.org/assignments/uri-schemes/uri-schemes.xhtml">IANA list of URI schemes</a></li>
+</ul>
diff --git a/files/de/web/http/basics_of_http/index.html b/files/de/web/http/basics_of_http/index.html
new file mode 100644
index 0000000000..237dda5f72
--- /dev/null
+++ b/files/de/web/http/basics_of_http/index.html
@@ -0,0 +1,51 @@
+---
+title: Basics of HTTP
+slug: Web/HTTP/Basics_of_HTTP
+tags:
+  - Guide
+  - HTTP
+  - NeedsTranslation
+  - Overview
+  - TopicStub
+translation_of: Web/HTTP/Basics_of_HTTP
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP is a pretty extensible protocol. It relies on a few basic concepts like the notion of resources and URIs, a simple structure of messages, and a client-server structure for the communication flow. On top of these basic concepts, numerous extensions have appeared over the years, adding new functionality and new semantics by creating new HTTP methods or headers.</p>
+
+<h2 id="Articles">Articles</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/HTTP/Overview">Overview of HTTP</a></dt>
+ <dd>Describes what HTTP is and its role in the Web architecture, its position in the protocol stack.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP">Evolution of HTTP</a></dt>
+ <dd>HTTP was created in the early 1990s and has been extended several times. This article goes through its history and describes HTTP/0.9, HTTP/1.0, HTTP/1.1, and the modern HTTP/2 as well as minor novelties introduced over the years.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Negotiating)an_HTTP_version">Negotiating an HTTP version</a></dt>
+ <dd>Explains how a client and a server can negotiate a specific HTTP version and eventually upgrade the protocol version used.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Resources_and_URIs">Resources and URIs</a></dt>
+ <dd>A brief introduction of the notion of resources, identifiers, and locations on the Web.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web">Identifying resources on the Web</a></dt>
+ <dd>Describes how Web resources are referenced and how to locate them.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">Data URIs</a></dt>
+ <dd>A specific kind of URIs that directly embeds the resource it represents. Data URIs are very convenient, but have some caveats.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Resource_URLs">Resource URLs</a> {{Non-standard_Inline}}</dt>
+ <dd>Resource URLs, URLs prefixed with the <code>resource:</code> scheme, are used by Firefox and Firefox browser extensions to load resources internally, but some of the information is available to sites the browser connects to as well.</dd>
+ <dt>Separating identity and location of a resource: the Alt-Svc HTTP header</dt>
+ <dd>Most of the time identity and location of a Web resource are shared, this can be changed with the {{HTTPHeader("Alt-Svc")}} header.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME types</a></dt>
+ <dd>Since HTTP/1.0, different types of content can be transmitted. This article explains how this is done using the {{HTTPHeader("Content-Type")}} header and the MIME standard.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Choosing_between_www_and_non-www_URLs">Choosing between www and non-www URLs</a></dt>
+ <dd>Advice on using a www-prefixed domain or not, this article explains the consequences of the choice as well as how to make it.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Flow_of_an_HTTP_session">Flow of an HTTP session</a></dt>
+ <dd>This fundamental article describes a typical HTTP session: what happens under the hood when you click on a link in your browser…</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Messages">HTTP Messages</a></dt>
+ <dd>HTTP Messages transmitted during requests or responses have a very clear structure; this introductory article describes this structure, its purpose and its possibilities.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Frame and message structure in HTTP_2">Frame and message structure in HTTP/2</a></dt>
+ <dd>HTTP/2 encapsulates and represents HTTP/1.x messages in a binary frame. This article explains the frame structure, its purpose and the way it is encoded.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Connection_management_in_HTTP_1.x">Connection management in HTTP/1.x</a></dt>
+ <dd>HTTP/1.1 was the first version of HTTP to support persistent connection and pipelining. This article explains these two concepts.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Connection_management_in_HTTP_2">Connection management in HTTP/2</a></dt>
+ <dd>HTTP/2 completely revisited how connections are created and maintained: this article explains how HTTP frames allow multiplexing and solve the 'head-of-line' blocking problem of former HTTP versions.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Content_negotiation">Content Negotiation</a></dt>
+ <dd>HTTP introduces a set of headers, starting with <code>Accept-</code> as a way for a browser to announce the format, language, or encoding it prefers. This article explains how this advertisement happens, how the server is expected to react and how it will choose the most adequate response.</dd>
+</dl>
diff --git a/files/de/web/http/caching_faq/index.html b/files/de/web/http/caching_faq/index.html
new file mode 100644
index 0000000000..79aa913713
--- /dev/null
+++ b/files/de/web/http/caching_faq/index.html
@@ -0,0 +1,73 @@
+---
+title: HTTP Caching FAQ
+slug: Web/HTTP/Caching_FAQ
+tags:
+  - Cache
+  - HTTP
+  - Necko
+  - NeedsContent
+  - header
+translation_of: Web/HTTP/Caching
+---
+<h3 id="What_is_cached.3F" name="What_is_cached.3F">Was wird im Cache gespeichert?</h3>
+
+<p>Der Mozilla Cache beinhaltet alle Dokumente, die via <a href="/en/HTTP" title="en/HTTP">HTTP</a> vom Benutzer heruntergeladen wurden. Dies mag sich zunächst widersprüchlich anhören, dieses Verhalten ermöglicht jedoch das Vor- und Zurück-Navigieren, Speichern, sowie die Anzeige des Quelltextes etc. im Browser, ohne dabei zusätzliche Serveranfragen zu benötigen. Somit verbessert es auch die Offline-Nutzung von temporär gespeicherten Inhalten im Cache.</p>
+
+<h3 id="What_about_documents_sent_with_a_Cache-control:_no-cache_header.3F" name="What_about_documents_sent_with_a_Cache-control:_no-cache_header.3F">Was ist mit Dokumenten die mit "Cache-control: no-cache"  in der Kopfzeile (Header) gesendet werden?</h3>
+
+<p>Auch "no-cache" Dokumente werden von uns aufgrund der oben genannten Gründe im Cache gespeichert.</p>
+
+<h3 id="But_don.27t_you_end_up_serving_stale_content.3F" name="But_don.27t_you_end_up_serving_stale_content.3F">Sorgt das nicht dafür, dass abgelaufene Inhalte bereitgestellt werden?</h3>
+
+<p>Nein, denn jedes Dokument, das im Mozilla Cache gespeichert wird, erhält eine Gültigkeitsdauer. Lädt Mozilla dieses Dokument für eine normale Ansicht, wird die Gültigkeit berücksichtigt. Wenn nötig, wird ein aus dem Cache zu ladendes Dokument mit dem Server abgeglichen und gegebenenfalls neu geladen, bevor es dem Benutzer angezeigt wird.</p>
+
+<h3 id="How_are_expiration_times_calculated_.28since_not_every_response_includes_an_Expires_header.29.3F" name="How_are_expiration_times_calculated_.28since_not_every_response_includes_an_Expires_header.29.3F">Wie wird die Gültigkeitsdauer berechnet (da nicht jede Serverantwort eine Gültigkeit in der Kopfzeile enthält)?</h3>
+
+<p>Mozilla strebt danach, <a class="external" href="http://tools.ietf.org/html/rfc2616" title="http://tools.ietf.org/html/rfc2616">RFC 2616</a> zu implementieren (siehe speziell Abschnitt 13 für nähere Informationen). Jede der folgenden Antwort-Kopfzeilen generiert eine stets abgelaufene Gültigkeitsdauer, z.B. "00:00:00 UTC, January 1, 1970":</p>
+
+<pre>Cache-control: no-cache
+Cache-control: no-store
+Pragma: no-cache
+Expires: 0</pre>
+
+<p>Bemerkenswerter Weise sind die Werte <code>Expires: 0</code> und <code>Pragma: no-cache</code> technisch gesehen ungültige Werte in einer Antwort-Kopfzeile. Wenn keine dieser Angaben vorhanden ist, geschieht die Berechnung der Gültigkeitsdauer nach dem Algorithmus, welcher in <a class="external" href="http://tools.ietf.org/html/rfc2616" title="http://tools.ietf.org/html/rfc2616">RFC 2616</a>, Abschnitt 13.2. beschrieben wird. Wir ermitteln das gegenwärtige Alter der Antwort und seine Gültigkeit basierend auf den vorhandenen Informationen.</p>
+
+<p>Das gegenwärtige Alter entspricht für gewöhnlich fast Null, wird jedoch durch eine vorhandene <code>Age</code>-Angabe in der Antwort-Kopfzeile beeinflusst, die z.B. von Proxy Caches angeben wird um die Länge der Dauer anzugeben, die sich ein Dokument bereits in ihrem Cache befindet. Der exakte Algorithmus, der versucht, Fehler bei der Zeitverschiebung zu verhindern, wird in <a class="external" href="http://tools.ietf.org/html/rfc2616" title="http://tools.ietf.org/html/rfc2616">RFC 2616</a>, Abschnitt 13.2.3 beschrieben.</p>
+
+<p>Die Gültigkeit wird basierend auf mehreren Antwort-Kopfzeilen berechnet. Wenn die Kopfzeile <code>Cache-control: max-age=N</code> angegeben ist, entspricht die Gültigkeit des Dokumentes dem Wert N. Ist dieser Wert nicht vorhanden, was mitunter sehr oft der Fall ist, wird nach einer <code>Expires</code>-Angabe in der Kopfzeile gesucht. Existiert diese, ergibt sich die Gültigkeitsdauer aus dem darin enthaltenen Wert abzüglich des in <code>Date</code> enthaltenen Wertes. Sollte sich letztlich keine <code>Expires</code>-Angabe in den Antwort-Kopfzeilen befinden, wird nach einem <code>Last-Modified</code> Wert gesucht. Ist dieser Wert vorhanden, entspricht die Gültigkeitsdauer im Cache dem Wert <code>Date</code> abzüglich des Wertes <code>Last-Modified</code> geteilt durch 10. Dies ist die vereinfachte Darstellung des heuristischen Algorithmus, der in Abschnitt 13.2.4 des <a class="external" href="http://tools.ietf.org/html/rfc2616" title="http://tools.ietf.org/html/rfc2616">RFC 2616</a> vorgeschlagen wird. </p>
+
+<p>Die Gültigkeitsdauer berechnet sich somit folgendermaßen:</p>
+
+<pre>ablaufZeit = reaktionsZeit + neuheitsLebenszeit - aktuellesAlter</pre>
+
+<p>Wobei <code>reaktionsZeit</code> dem Zeitwert entspricht, zu dem der Browser die Antwort erhalten hat.</p>
+
+<h3 id="What_other_factors_influence_revalidation.3F" name="What_other_factors_influence_revalidation.3F">Gibt es weitere Faktoren, welche die Revalidation beinflussen?</h3>
+
+<p>Die Revalidation wird ausgelöst, sobald ein User die Seite neu lädt (z.B. mittels des Neu-Laden-Knopfes). Ebenso wird sie beim normalen browsen ausgelöst, wenn in den Antwort-Kopfzeilen <code>Cache-control: must-revalidate</code> enthalten ist. Ein weiterer Faktor sind die Einstellungen des Cache-Management im Bereich <code>Erweitert-&gt;Netzwerk</code> der Firefox-Einstellungen. Hier kann als Option gewählt werden, dass Dokumente bei jedem Laden neu validiert werden ("Nachfragen, wenn Websites Daten für die Verwendung im Offline-Modus speichern möchten").</p>
+
+<h3 id="How_does_cache_validation_work.3F" name="How_does_cache_validation_work.3F">Wie funktioniert die Cache-Valdiation?</h3>
+
+<p>Sobald die Gültigkeit eines Dokumentes im Cache abgelaufen ist, wird es entweder revalidiert oder gänzlich neu vom Server angefordert. Eine Validation kann nur dann angewendet werden, wenn der Server entweder eine <em>starke Valdiation</em> (strong validation) oder eine <em>schwache Valdiation</em> (weak validation) ermöglicht. Cache-Validatoren werden im Abschnitt 13.3.2 des <a class="external" href="http://tools.ietf.org/html/rfc2616" title="http://tools.ietf.org/html/rfc2616">RFC 2616</a> beschrieben.</p>
+
+<p>Der <code>ETag</code>-Wert in den Antwort-Kopfzeilen ist ein Wert, der nicht für den User Agent einsehbar ist (<em>opaque-to-the-useragent</em>) und als starker Validator genutzt werden kann (strong validator). Ist der <code>ETag</code>-Wert in den Antwort-Kopfzeilen vorhanden, kann der Browser einen <code>If-None-Match</code>-Wert in den Anfrage-Kopfzeilen ausgeben, um das Dokument im Cache zu validieren.</p>
+
+<p>Der <code>Last-Modified</code>-Wert in den Antwort-Kopfzeilen kann als schwacher Validator (weak validator) genutzt werden. Er wird als schwach eingestuft, da er nur eine 1-Sekunden-Lösung ermöglicht. Wenn der <code>Last-Modified</code>-Wert in den Antwort-Kopfzeilen enthalten ist, kann der Browser einen <code>If-Modified-Since</code>-Wert in den Anfrage-Kopfzeilen ausgeben, um das Dokument im Cache zu validieren.</p>
+
+<p>Sobald eine Validierungs-Anfrage gestellt wurde, kann der Server diese entweder ignorieren und mit einem normalen <code><a href="/en/HTTP/HTTP_response_codes#200" title="https://developer.mozilla.org/en/HTTP/HTTP_response_codes#200">200 OK</a></code>-Statuscode antworten, oder aber einen <code><a href="/en/HTTP/HTTP_response_codes#304" title="https://developer.mozilla.org/en/HTTP/HTTP_response_codes#304">304 Not Modified</a></code>-Statuscode zurückgeben um den Browser anzuweisen, die im Cache befindliche Kopie des Dokumentes zu verwenden. Letzere kann ebenfalls Werte in der Antwort-Kopfzeile enthalten, welche die Gültigkeit des Dokumentes im Cache aktualisieren.</p>
+
+<h3 id="What_about....3F" name="What_about....3F">Was ist mit...?</h3>
+
+<p>Ich beabsichtige, diese Dokumentation in Zukunft zu erweitern. Fühlen Sie sich frei, mir eine E-Mail mit Ihren Fragen oder Kommentaren zu schreiben.</p>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">Informationen zum Original-Dokument</h2>
+
+<ul>
+ <li>Autor(en): <a class="link-mailto" href="mailto:darin@meer.net">Darin Fisher</a></li>
+ <li>Zuletzt aktualisiert: 16. Juni 2004</li>
+ <li>Copyright Information: Teile des Inhaltes sind urheberrechtlich durch © 1998–2007 einzelne Mitwirkende von  mozilla.org; Inhalt lizensiert under einer Creative Commons Lizenz | <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Details</a>.</li>
+</ul>
+</div>
+
+<p> </p>
diff --git a/files/de/web/http/cors/errors/corsdidnotsucceed/index.html b/files/de/web/http/cors/errors/corsdidnotsucceed/index.html
new file mode 100644
index 0000000000..ba44867384
--- /dev/null
+++ b/files/de/web/http/cors/errors/corsdidnotsucceed/index.html
@@ -0,0 +1,34 @@
+---
+title: 'Reason: CORS request did not succeed'
+slug: Web/HTTP/CORS/Errors/CORSDidNotSucceed
+tags:
+  - CORS
+  - CORSDidNotSucceed
+  - Cross-Origin
+  - Fehler
+  - Gründe
+  - HTTP
+  - HTTPS
+  - Konsole
+  - Nachrichten
+  - Sicherheit
+  - troubleshooting
+translation_of: Web/HTTP/CORS/Errors/CORSDidNotSucceed
+---
+<div>{{HTTPSidebar}}</div>
+
+<h2 id="Grund">Grund</h2>
+
+<pre class="syntaxbox">Grund: CORS-Anfrage schlug fehl</pre>
+
+<h2 id="Was_ist_schiefgelaufen">Was ist schiefgelaufen?</h2>
+
+<p>Die {{Glossary("HTTP")}}-Anfrage, die CORS benutzt hat, versagt, weil die HTTP-Verbindung entweder auf Netzwerk- oder Protokoll-Level versagt hat. Der Fehler hat nicht direkt etwas mit CORS zu tun, sondern ist ein unbestimmter fundamentaler Netzwerkfehler.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors">CORS-Fehler</a></li>
+ <li>Glossar: {{Glossary("CORS")}}</li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS">CORS-Einführung</a></li>
+</ul>
diff --git a/files/de/web/http/cors/errors/corsfehlenderallowheaderauspreflight/index.html b/files/de/web/http/cors/errors/corsfehlenderallowheaderauspreflight/index.html
new file mode 100644
index 0000000000..d40ac7b5b5
--- /dev/null
+++ b/files/de/web/http/cors/errors/corsfehlenderallowheaderauspreflight/index.html
@@ -0,0 +1,37 @@
+---
+title: >-
+  Grund: fehlendes Token ‘xyz’ in CORS-Kopfzeile 'Access-Control-Allow-Headers'
+  aus dem CORS-Preflight-Kanal
+slug: Web/HTTP/CORS/Errors/CORSFehlenderAllowHeaderAusPreflight
+tags:
+  - CORS
+  - CORSMissingAllowHeaderFromPreflight
+  - Cross-Origin
+  - Fehler
+  - HTTP
+  - HTTPS
+  - Meldungen
+  - Sicherheit
+  - Ursachen
+translation_of: Web/HTTP/CORS/Errors/CORSMissingAllowHeaderFromPreflight
+---
+<div>{{HTTPSidebar}}</div>
+
+<h2 id="Grund">Grund</h2>
+
+<pre class="syntaxbox">Grund: fehlendes Token ‘xyz’ in CORS-Kopfzeile ‘Access-Control-Allow-Headers’ aus dem CORS-Preflight-Kanal</pre>
+
+<h2 id="Was_ist_schiefgelaufen">Was ist schiefgelaufen?</h2>
+
+<p>Der <code>Access-Control-Allow-Headers</code> Header wird vom Server gesendet, damit der Client weiß welche Header er für {{Glossary("CORS")}} Requests unterstützt. Der Wert für <code>Access-Control-Allow-Headers</code> ist eine durch Komma getrennte Liste von Header-Namen, wie z.B. "<code>X-Custom-Information</code>" oder jeder der Standart-Header (aber kein Basic-Header, die immer erlaubt sind).</p>
+
+<p>Dieser Fehler tritt auf, wenn versucht wird einen Preflight auszuführen mit einem Header, der nicht ausdrücklich erlaubt ist, d.h. der nicht im <code>Access-Control-Allow-Headers</code> Header enthalten ist, der vom Server gesendet wird. Um dies zu beheben, muss der Server so angepasst werden, dass er den angegebenen Header zulässt, oder man vermeidet es diesen Header zu verwenden.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors">CORS-Fehler</a></li>
+ <li>Glossar: {{Glossary("CORS")}}</li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS">CORS-Einführung</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Headers">HTTP Header</a></li>
+</ul>
diff --git a/files/de/web/http/cors/errors/corsfehltquelleerlauben/index.html b/files/de/web/http/cors/errors/corsfehltquelleerlauben/index.html
new file mode 100644
index 0000000000..8ccb987535
--- /dev/null
+++ b/files/de/web/http/cors/errors/corsfehltquelleerlauben/index.html
@@ -0,0 +1,59 @@
+---
+title: >-
+  Grund: CORS header 'AccessGrund: CORS-Kopfzeile 'Access-Control-Allow-Origin'
+  fehlt
+slug: Web/HTTP/CORS/Errors/CORSFehltQuelleErlauben
+tags:
+  - CORS
+  - CORSMissingAllowOrigin
+  - Cross-Origin
+  - Error
+  - Fehler
+  - Gründe
+  - HTTP
+  - HTTPS
+  - Konsole
+  - Nachrichten
+  - Sicherheit
+  - troubleshooting
+translation_of: Web/HTTP/CORS/Errors/CORSMissingAllowOrigin
+---
+<div>{{HTTPSidebar}}</div>
+
+<h2 id="Grund">Grund</h2>
+
+<pre class="syntaxbox"> <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">Grund: CORS-Kopfzeile 'Access-Control-Allow-Origin' fehlt</span></span></span></pre>
+
+<h2 id="Was_ist_schief_gelaufen">Was ist schief gelaufen?</h2>
+
+<p>Der Antwort auf die {{Glossary("CORS")}}-Anfrage fehlt der benötigte {{HTTPHeader("Access-Control-Allow-Origin")}}-Header, welcher verwendet wird, um herauszufinden, ob die Ressource vom Inhalt, der im momentanen Origin arbeitet, verwendet werden kann oder nicht.</p>
+
+<p>Wenn der Server unter Ihrer Kontrolle steht, fügen Sie die Quelle der anfragenden Seite zu der Liste der Domains hinzu, die Zugriff haben, indem Sie Sie zum Header-Wert <code>Access-Control-Allow-Origin</code> ergänzen.</p>
+
+<p>Um zum Beispiel einer Seite unter https://amazing.site zu erlauben, auf die Ressource mithilfe von CORS zuzugreifen, sollte der Header lauten:</p>
+
+<pre>Access-Control-Allow-Origin: https://amazing.site</pre>
+
+<p>Mithilfe der <code>"*"</code>-Wildcard kann man eine Seite so konfigureren, dass Sie jeder anderen Webseite Zugriff gewährt. Dies sollte man ausschließlich für öffentliche APIs tun. Private APIs sollten niemals <code>"*"</code> verwenden, sondern stattdessen eine spezifische Domain oder eine Liste von Domains. Zudem funktioniert die Wildcard nur für Requests, die mit dem {{htmlattrxref("crossorigin")}}-Attribut, gesetzt auf <code>"anonymous"</code>, erstellt wurden.</p>
+
+<pre>Access-Control-Allow-Origin: *</pre>
+
+<div class="warning">
+<p><strong>Warnung:</strong> Die Wildcard dazu zu benutzen, um allen Websites Zugriff auf eine private API zu geben, ist - aus wohl offensichtlichen Gründen - keine gute Idee.</p>
+</div>
+
+<p>Fügen Sie z.B. in Apache eine Zeile wie die Folgende zur Konfiguration des Servers hinzu (im zugehörigen <code>&lt;Directory&gt;</code>, <code>&lt;Location&gt;</code>, <code>&lt;Files&gt;</code>, oder <code>&lt;VirtualHost&gt;</code>-Abschnitt). Die Konfigurationseinstellungen findet man üblicherweise in einer <code>.conf</code>-Datei (<code>httpd.conf</code> und <code>apache.conf</code> sind übliche Namen dafür), oder in einer <code>.htaccess</code>-Datei.</p>
+
+<pre>Header set Access-Control-Allow-Origin '<em>origin-list</em>'</pre>
+
+<p>Für Nginx lautet der Befehl, um den Header zu setzen:</p>
+
+<pre>add_header 'Access-Control-Allow-Origin' '<em>origin-list</em>'</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors">CORS fehler</a></li>
+ <li>Glossar: {{Glossary("CORS")}}</li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS">CORS-Einführung</a></li>
+</ul>
diff --git a/files/de/web/http/cors/errors/corsrequestnothttp/index.html b/files/de/web/http/cors/errors/corsrequestnothttp/index.html
new file mode 100644
index 0000000000..a3223da49a
--- /dev/null
+++ b/files/de/web/http/cors/errors/corsrequestnothttp/index.html
@@ -0,0 +1,25 @@
+---
+title: 'Ursache: CORS Anfrage nicht HTTP'
+slug: Web/HTTP/CORS/Errors/CORSRequestNotHttp
+translation_of: Web/HTTP/CORS/Errors/CORSRequestNotHttp
+---
+<div>{{HTTPSidebar}}</div>
+
+<h2 id="Ursache">Ursache</h2>
+
+<pre class="syntaxbox">Reason: CORS request not HTTP</pre>
+
+<h2 id="Was_ist_schief_gelaufen">Was ist schief gelaufen?</h2>
+
+<p>{{Glossary("CORS")}} Anfragen (requests) sollten nur das HTTPS URL Schema benutzen, aber die von der Anfrage spezifizierte URL ist von einem anderen Typ. Dies passiert oft, wenn die URL bspw. eine lokale URL, wie eine Datei beschreibt: <code>file:///</code> URL.</p>
+
+<p>Um das Problem zu beheben, stelle sicher, dass Du eine HTTPS URL verwendest, wenn CORS Anfragen involviert sind.</p>
+
+<h2 id="Siehe_auch">Siehe auch:</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors">CORS errors</a></li>
+ <li>Glossary: {{Glossary("CORS")}}</li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS">CORS introduction</a></li>
+ <li><a href="/en-US/docs/Learn/Common_questions/What_is_a_URL">What is a URL?</a></li>
+</ul>
diff --git a/files/de/web/http/cors/errors/index.html b/files/de/web/http/cors/errors/index.html
new file mode 100644
index 0000000000..d1dd12dc75
--- /dev/null
+++ b/files/de/web/http/cors/errors/index.html
@@ -0,0 +1,76 @@
+---
+title: CORS errors
+slug: Web/HTTP/CORS/Errors
+tags:
+  - CORS
+  - Errors
+  - HTTP
+  - HTTPS
+  - Messages
+  - NeedsTranslation
+  - Same-origin
+  - Security
+  - TopicStub
+  - console
+  - troubleshooting
+translation_of: Web/HTTP/CORS/Errors
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="seoSummary"><a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing</a> ({{Glossary("CORS")}}) is a standard that allows a server to relax the <a href="/en-US/docs/Web/Security/Same-origin_policy">same-origin policy</a>. This is used to explicitly allow some cross-origin requests while rejecting others.</span> For example, if a site offers an embeddable service, it may be necessary to relax certain restrictions. Setting up such a CORS configuration isn't necessarily easy and may present some challenges. In these pages, we'll look into some common CORS error messages and how to resolve them.</p>
+
+<p>If the CORS configuration isn't setup correctly, the browser console will present an error like <code>"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at $somesite"</code> indicating that the request was blocked due to violating the CORS security rules. This might not necessarily be a set-up mistake, though. It's possible that the request is in fact intentionally being disallowed by the user's web application and remote external service. However, If the endpoint is meant to be available, some debugging is needed to succeed.</p>
+
+<h2 id="Identifying_the_issue">Identifying the issue</h2>
+
+<p>To understand the underlying issue with the CORS configuration, you need to find out which request is at fault and why. These steps may help you do so:</p>
+
+<ol>
+ <li>Navigate to the web site or web app in question and open the <a href="/en-US/docs/Tools">Developer Tools</a>.</li>
+ <li>Now try to reproduce the failing transaction and check the <a href="/en-US/docs/Tools/Web_Console">console</a> if you are seeing a CORS violation error message. It will probably look like this:</li>
+</ol>
+
+<p><img alt="Firefox console showing CORS error" src="https://mdn.mozillademos.org/files/16050/cors-error2.png"></p>
+
+<p>The text of the error message will be something similar to the following:</p>
+
+<pre>Cross<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">-Origin Request Blocked: The Same Origin Policy disallows
+reading the remote resource at <em>https://some-url-here</em>. (<em>Reason:
+additional information here</em>).</span></span></span></pre>
+
+<div class="note">
+<p><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><strong>Note:</strong> For security reasons, specifics about what went wrong with a CORS request <em>are not available to JavaScript code</em>. All the code knows is that an error occurred. The only way to determine what specifically went wrong is to look at the browser's console for details.</span></span></span></p>
+</div>
+
+<h2 id="CORS_error_messages">CORS error messages</h2>
+
+<p>Firefox's console displays messages in its console when requests fail due to CORS. Part of the error text is a "reason" message that provides added insight into what went wrong.  The reason messages are listed below; click the message to open an article explaining the error in more detail and offering possible solutions.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSDisabled">Reason: CORS disabled</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSDidNotSucceed">Reason: CORS request did not succeed</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSOriginHeaderNotAdded">Reason: CORS header ‘Origin’ cannot be added</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSExternalRedirectNotAllowed">Reason: CORS request external redirect not allowed</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp">Reason: CORS request not http</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin">Reason: CORS header ‘Access-Control-Allow-Origin’ missing</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin">Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘xyz’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials">Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMethodNotFound">Reason: Did not find method in CORS header ‘Access-Control-Allow-Methods’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowCredentials">Reason: expected ‘true’ in CORS header ‘Access-Control-Allow-Credentials’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSPreflightDidNotSucceed">Reason: CORS preflight channel did not succeed</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSInvalidAllowMethod">Reason: invalid token ‘xyz’ in CORS header ‘Access-Control-Allow-Methods’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSInvalidAllowHeader">Reason: invalid token ‘xyz’ in CORS header ‘Access-Control-Allow-Headers’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowHeaderFromPreflight">Reason: missing token ‘xyz’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMultipleAllowOriginNotAllowed">Reason: Multiple CORS header ‘Access-Control-Allow-Origin’ not allowed</a></li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Glossary: {{Glossary("CORS")}}</li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS">CORS introduction</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">Server-side CORS settings</a></li>
+ <li><a href="/en-US/docs/Web/HTML/CORS_enabled_image">CORS enabled image</a></li>
+ <li><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">CORS settings attributes</a></li>
+ <li><a href="https://www.test-cors.org">https://www.test-cors.org</a> – page to test CORS requests</li>
+</ul>
diff --git a/files/de/web/http/cors/index.html b/files/de/web/http/cors/index.html
new file mode 100644
index 0000000000..ff57fe7c88
--- /dev/null
+++ b/files/de/web/http/cors/index.html
@@ -0,0 +1,567 @@
+---
+title: Cross-Origin Resource Sharing (CORS)
+slug: Web/HTTP/CORS
+tags:
+  - AJAX
+  - CORS
+  - Cross-Origin Resource Sharing
+  - Fetch
+  - Fetch API
+  - HTTP
+  - HTTP Access Controls
+  - NeedsTranslation
+  - Same-origin policy
+  - Security
+  - TopicStub
+  - XMLHttpRequest
+  - 'l10n:priority'
+translation_of: Web/HTTP/CORS
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="seoSummary"><strong>Cross-Origin Resource Sharing</strong> ({{Glossary("CORS")}}) ist ein Mechanismus, der zusätzliche {{Glossary("HTTP")}} Header verwendet um einem Browser mitzuteilen, dass er einer Webanwendung, die auf einer anderen Domain(Origin) läuft, die Berechtigung erteilt auf ausgewählte Ressourcen von einem Server eines anderen Ursprungs(Origin) zuzugreifen.</span> Eine Webanwendung stellt eine <strong>cross-origin HTTP-Anfage, </strong>wenn sie<strong> </strong>eine Ressource anfordert, die einen anderen Ursprung(Domain, Protokoll und Port) hat, als ihren eigenen.</p>
+
+<p>Ein Beispiel für cross-origin Anfragen: Der Frontend-JavaScript-Code für eine von <code>http://domain-a.com</code> bereitgestellte Webanwendung verwendet {{domxref("XMLHttpRequest")}} um eine Anfrage an <code>http://api.domain-b.com/data.json</code>zu stellen</p>
+
+<p>Aus Sicherheitsgründen beschränken Browser die aus Skripten heraus initiierten HTTP-Anfragen mit unterschiedlichen Herkunftsbezeichnungen. Beispielsweise folgen XMLHttpRequest und die<a href="/de-DE/docs/Web/API/Fetch_API">Fetch-API</a> der <a href="/en-US/docs/Web/Security/Same-origin_policy">Richtlinie gleichen Ursprungs</a>. Das bedeutet, dass eine Webanwendung, die diese APIs verwendet, nur HTTP-Ressourcen aus der gleichen Herkunft anfordern kann, aus der die Anwendung geladen wurde, es sei denn, die Antwort aus der anderen Herkunft enthält die richtigen CORS-Header.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14295/CORS_principle.png" style="height: 305px; width: 440px;"></p>
+
+<p>Der CORS-Mechanismus unterstützt sichere Cross-Origin-Anfragen und Datenübertragungen zwischen Browsern und Webservern. Moderne Browser verwenden CORS in einem API-Container wie <code>XMLHttpRequest</code> oder <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a>, um das Risiko von Cross-Origin-HTTP-Anfragen zu minimieren.</p>
+
+<h2 id="Wer_sollte_diesen_Artikel_lesen">Wer sollte diesen Artikel lesen?</h2>
+
+<p>Wirklich jeder.</p>
+
+<p>Genauer gesagt richtet sich dieser Artikel an Webadministratoren, Server- und Frontend-Entwickler. Moderne Browser handhaben die clientseitigen Komponenten von Cross-Origin Sharing, einschließlich Header und Richtliniendurchsetzung. Dieser neue Standard bedeutet jedoch, dass Server neue Anfrage- und Antwortheader verarbeiten müssen. Ein weiterer Artikel für Server-Entwickler, in dem <a href="/de-US/docs/Web/HTTP/Server-Side_Access_Control">cross-origin sharing aus der Server-Perspektive (mit PHP-Code-Snippets)</a> diskutiert wird, ist eine ergänzende Lektüre.</p>
+
+<h2 id="Welche_Requests_benutzen_CORS">Welche Requests benutzen CORS?</h2>
+
+<p>Der <a class="external" href="https://fetch.spec.whatwg.org/#http-cors-protocol">cross-origin sharing standard</a> wird benutzt um cross-site HTTP Requests für die:</p>
+
+<ul>
+ <li>Invocations of the {{domxref("XMLHttpRequest")}} or <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> APIs in a cross-site manner, as discussed above.</li>
+ <li>Web Fonts (for cross-domain font usage in <code>@font-face</code> within CSS), <a class="external" href="https://www.w3.org/TR/css-fonts-3/#font-fetching-requirements">so that servers can deploy TrueType fonts that can only be cross-site loaded and used by web sites that are permitted to do so.</a></li>
+ <li><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">WebGL textures</a>.</li>
+ <li>Images/video frames drawn to a canvas using {{domxref("CanvasRenderingContext2D.drawImage()", "drawImage()")}}.</li>
+</ul>
+
+<p>This article is a general discussion of Cross-Origin Resource Sharing and includes a discussion of the necessary HTTP headers.</p>
+
+<h2 id="Functional_overview">Functional overview</h2>
+
+<p>The Cross-Origin Resource Sharing standard works by adding new <a href="/en-US/docs/Web/HTTP/Headers">HTTP headers</a> that allow servers to describe the set of origins that are permitted to read that information using a web browser. Additionally, for HTTP request methods that can cause side-effects on server's data (in particular, for HTTP methods other than {{HTTPMethod("GET")}}, or for {{HTTPMethod("POST")}} usage with certain <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME types</a>), the specification mandates that browsers "preflight" the request, soliciting supported methods from the server with an HTTP {{HTTPMethod("OPTIONS")}} request method, and then, upon "approval" from the server, sending the actual request with the actual HTTP request method. Servers can also notify clients whether "credentials" (including <a href="/en-US/docs/Web/HTTP/Cookies">Cookies</a> and HTTP Authentication data) should be sent with requests.</p>
+
+<p>CORS failures result in errors, but for security reasons, specifics about what went wrong <em>are not available to JavaScript code</em>. All the code knows is that an error occurred. The only way to determine what specifically went wrong is to look at the browser's console for details.</p>
+
+<p>Subsequent sections discuss scenarios, as well as provide a breakdown of the HTTP headers used.</p>
+
+<h2 id="Examples_of_access_control_scenarios">Examples of access control scenarios</h2>
+
+<p>Here, we present three scenarios that illustrate how Cross-Origin Resource Sharing works. All of these examples use the {{domxref("XMLHttpRequest")}} object, which can be used to make cross-site invocations in any supporting browser.</p>
+
+<p>The JavaScript snippets included in these sections (and running instances of the server-code that correctly handles these cross-site requests) can be found "in action" at <a class="external" href="http://arunranga.com/examples/access-control/">http://arunranga.com/examples/access-control/</a>, and will work in browsers that support cross-site <code>XMLHttpRequest</code>.</p>
+
+<p>A discussion of Cross-Origin Resource Sharing from a server perspective (including PHP code snippets) can be found in the <a class="internal" href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">Server-Side Access Control (CORS)</a> article.</p>
+
+<h3 id="Simple_requests">Simple requests</h3>
+
+<p>Some requests don’t trigger a <a href="#Preflighted_requests">CORS preflight</a>. Those are called “simple requests” in this article, though the {{SpecName('Fetch')}} spec (which defines CORS) doesn’t use that term. A request that doesn’t trigger a <a href="#Preflighted_requests">CORS preflight</a>—a so-called “simple request”—is one that meets all the following conditions:</p>
+
+<ul>
+ <li>The only allowed methods are:
+  <ul>
+   <li>{{HTTPMethod("GET")}}</li>
+   <li>{{HTTPMethod("HEAD")}}</li>
+   <li>{{HTTPMethod("POST")}}</li>
+  </ul>
+ </li>
+ <li>Apart from the headers set automatically by the user agent (for example, {{HTTPHeader("Connection")}}, {{HTTPHeader("User-Agent")}}, or <a href="https://fetch.spec.whatwg.org/#forbidden-header-name">any of the other headers with names defined in the Fetch spec as a “forbidden header name”</a>), the only headers which are allowed to be manually set are <a href="https://fetch.spec.whatwg.org/#cors-safelisted-request-header">those which the Fetch spec defines as being a “CORS-safelisted request-header”</a>, which are:
+  <ul>
+   <li>{{HTTPHeader("Accept")}}</li>
+   <li>{{HTTPHeader("Accept-Language")}}</li>
+   <li>{{HTTPHeader("Content-Language")}}</li>
+   <li>{{HTTPHeader("Content-Type")}} (but note the additional requirements below)</li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#dpr">DPR</a></code></li>
+   <li>{{HTTPHeader("Downlink")}}</li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#save-data">Save-Data</a></code></li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#viewport-width">Viewport-Width</a></code></li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#width">Width</a></code></li>
+  </ul>
+ </li>
+ <li>The only allowed values for the {{HTTPHeader("Content-Type")}} header are:
+  <ul>
+   <li><code>application/x-www-form-urlencoded</code></li>
+   <li><code>multipart/form-data</code></li>
+   <li><code>text/plain</code></li>
+  </ul>
+ </li>
+ <li>No event listeners are registered on any {{domxref("XMLHttpRequestUpload")}} object used in the request; these are accessed using the {{domxref("XMLHttpRequest.upload")}} property.</li>
+ <li>No {{domxref("ReadableStream")}} object is used in the request.</li>
+</ul>
+
+<div class="note"><strong>Note:</strong> These are the same kinds of cross-site requests that web content can already issue, and no response data is released to the requester unless the server sends an appropriate header. Therefore, sites that prevent cross-site request forgery have nothing new to fear from HTTP access control.</div>
+
+<div class="note"><strong>Note:</strong> WebKit Nightly and Safari Technology Preview place additional restrictions on the values allowed in the {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}}, and {{HTTPHeader("Content-Language")}} headers. If any of those headers have ”non-standard” values, WebKit/Safari does not consider the request to meet the conditions for a “simple request”. What WebKit/Safari considers “non-standard” values for those headers is not documented except in the following WebKit bugs: <a href="https://bugs.webkit.org/show_bug.cgi?id=165178" rel="nofollow noreferrer">Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language</a>, <a href="https://bugs.webkit.org/show_bug.cgi?id=165566" rel="nofollow noreferrer">Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS</a>, and <a href="https://bugs.webkit.org/show_bug.cgi?id=166363" rel="nofollow noreferrer">Switch to a blacklist model for restricted Accept headers in simple CORS requests</a>. No other browsers implement those extra restrictions, because they’re not part of the spec.</div>
+
+<p>For example, suppose web content on domain <code class="plain">http://foo.example</code> wishes to invoke content on domain <code class="plain">http://bar.other</code>. Code of this sort might be used within JavaScript deployed on foo.example:</p>
+
+<pre class="brush: js notranslate" id="line1">var invocation = new XMLHttpRequest();
+var url = 'http://bar.other/resources/public-data/';
+
+function callOtherDomain() {
+  if(invocation) {
+    invocation.open('GET', url, true);
+    invocation.onreadystatechange = handler;
+    invocation.send();
+  }
+}
+</pre>
+
+<p>This will lead to a simple exchange between the client and the server, using CORS headers to handle the privileges:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14293/simple_req.png" style="height: 224px; width: 521px;"></p>
+
+<p>Let us look at what the browser will send to the server in this case, and let's see how the server responds:</p>
+
+<pre class="brush: shell;highlight:[10,16] notranslate">GET /resources/public-data/ HTTP/1.1
+Host: bar.other
+User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
+Connection: keep-alive
+Referer: http://foo.example/examples/access-control/simpleXSInvocation.html
+Origin: http://foo.example
+
+
+HTTP/1.1 200 OK
+Date: Mon, 01 Dec 2008 00:23:53 GMT
+Server: Apache/2.0.61
+Access-Control-Allow-Origin: *
+Keep-Alive: timeout=2, max=100
+Connection: Keep-Alive
+Transfer-Encoding: chunked
+Content-Type: application/xml
+
+[XML Data]
+</pre>
+
+<p>Lines 1 - 10 are headers sent. The main HTTP request header of note here is the {{HTTPHeader("Origin")}} header on line 10 above, which shows that the invocation is coming from content on the domain <code class="plain">http://foo.example</code>.</p>
+
+<p>Lines 13 - 22 show the HTTP response from the server on domain <code class="plain">http://bar.other</code>. In response, the server sends back an {{HTTPHeader("Access-Control-Allow-Origin")}} header, shown above in line 16. The use of the {{HTTPHeader("Origin")}} header and of {{HTTPHeader("Access-Control-Allow-Origin")}} show the access control protocol in its simplest use. In this case, the server responds with a <code>Access-Control-Allow-Origin: *</code> which means that the resource can be accessed by <strong>any</strong> domain in a cross-site manner. If the resource owners at <code class="plain">http://bar.other</code> wished to restrict access to the resource to requests only from <code class="plain">http://foo.example</code>, they would send back:</p>
+
+<p><code class="plain">Access-Control-Allow-Origin: http://foo.example</code></p>
+
+<p>Note that now, no domain other than <code class="plain">http://foo.example</code> (identified by the ORIGIN: header in the request, as in line 10 above) can access the resource in a cross-site manner. The <code>Access-Control-Allow-Origin</code> header should contain the value that was sent in the request's <code>Origin</code> header.</p>
+
+<h3 id="Preflighted_requests">Preflighted requests</h3>
+
+<p>Unlike <a href="#Simple_requests">“simple requests” (discussed above)</a>, "preflighted" requests first send an HTTP request by the {{HTTPMethod("OPTIONS")}} method to the resource on the other domain, in order to determine whether the actual request is safe to send. Cross-site requests are preflighted like this since they may have implications to user data.</p>
+
+<p>In particular, a request is preflighted if <strong>any of the following conditions</strong> is true:</p>
+
+<ul>
+ <li><strong>If</strong> the request uses any of the following methods:
+
+  <ul>
+   <li>{{HTTPMethod("PUT")}}</li>
+   <li>{{HTTPMethod("DELETE")}}</li>
+   <li>{{HTTPMethod("CONNECT")}}</li>
+   <li>{{HTTPMethod("OPTIONS")}}</li>
+   <li>{{HTTPMethod("TRACE")}}</li>
+   <li>{{HTTPMethod("PATCH")}}</li>
+  </ul>
+ </li>
+ <li><strong>Or if</strong>, apart from the headers set automatically by the user agent (for example, {{HTTPHeader("Connection")}}, {{HTTPHeader("User-Agent")}}, or <a href="https://fetch.spec.whatwg.org/#forbidden-header-name">any of the other header with a name defined in the Fetch spec as a “forbidden header name”</a>), the request includes any headers other than <a href="https://fetch.spec.whatwg.org/#cors-safelisted-request-header">those which the Fetch spec defines as being a “CORS-safelisted request-header”</a>, which are the following:
+  <ul>
+   <li>{{HTTPHeader("Accept")}}</li>
+   <li>{{HTTPHeader("Accept-Language")}}</li>
+   <li>{{HTTPHeader("Content-Language")}}</li>
+   <li>{{HTTPHeader("Content-Type")}} (but note the additional requirements below)</li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#dpr">DPR</a></code></li>
+   <li>{{HTTPHeader("Downlink")}}</li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#save-data">Save-Data</a></code></li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#viewport-width">Viewport-Width</a></code></li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#width">Width</a></code></li>
+  </ul>
+ </li>
+ <li><strong>Or if</strong> the {{HTTPHeader("Content-Type")}} header has a value other than the following:
+  <ul>
+   <li><code>application/x-www-form-urlencoded</code></li>
+   <li><code>multipart/form-data</code></li>
+   <li><code>text/plain</code></li>
+  </ul>
+ </li>
+ <li><strong>Or if</strong> one or more event listeners are registered on an {{domxref("XMLHttpRequestUpload")}} object used in the request.</li>
+ <li><strong>Or if</strong> a {{domxref("ReadableStream")}} object is used in the request.</li>
+</ul>
+
+<div class="note"><strong>Note:</strong> WebKit Nightly and Safari Technology Preview place additional restrictions on the values allowed in the {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}}, and {{HTTPHeader("Content-Language")}} headers. If any of those headers have ”non-standard” values, WebKit/Safari preflights the request. What WebKit/Safari considers “non-standard” values for those headers is not documented except in the following WebKit bugs: <a href="https://bugs.webkit.org/show_bug.cgi?id=165178" rel="nofollow noreferrer">Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language</a>, <a href="https://bugs.webkit.org/show_bug.cgi?id=165566" rel="nofollow noreferrer">Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS</a>, and <a href="https://bugs.webkit.org/show_bug.cgi?id=166363" rel="nofollow noreferrer">Switch to a blacklist model for restricted Accept headers in simple CORS requests</a>. No other browsers implement those extra restrictions, because they’re not part of the spec.</div>
+
+<p>The following is an example of a request that will be preflighted.</p>
+
+<pre class="brush: js notranslate" id="line1">var invocation = new XMLHttpRequest();
+var url = 'http://bar.other/resources/post-here/';
+var body = '&lt;?xml version="1.0"?&gt;&lt;person&gt;&lt;name&gt;Arun&lt;/name&gt;&lt;/person&gt;';
+
+function callOtherDomain(){
+  if(invocation)
+    {
+      invocation.open('POST', url, true);
+      invocation.setRequestHeader('X-PINGOTHER', 'pingpong');
+      invocation.setRequestHeader('Content-Type', 'application/xml');
+      invocation.onreadystatechange = handler;
+      invocation.send(body);
+    }
+}
+
+......
+</pre>
+
+<p>In the example above, line 3 creates an XML body to send with the <code>POST</code> request in line 8. Also, on line 9, a "customized" (non-standard) HTTP request header is set (<code>X-PINGOTHER: pingpong</code>). Such headers are not part of the HTTP/1.1 protocol, but are generally useful to web applications. Since the request uses a Content-Type of <code>application/xml</code>, and since a custom header is set, this request is preflighted.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16753/preflight_correct.png" style="height: 553px; width: 521px;"></p>
+
+<p>(Note: as described below, the actual POST request does not include the Access-Control-Request-* headers; they are needed only for the OPTIONS request.)</p>
+
+<p>Let's take a look at the full exchange between client and server. The first exchange is the <em>preflight request/response</em>:</p>
+
+<pre class="brush: none;highlight:[1,10,11,17-20] notranslate">OPTIONS /resources/post-here/ HTTP/1.1
+Host: bar.other
+User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
+Connection: keep-alive
+Origin: http://foo.example
+Access-Control-Request-Method: POST
+Access-Control-Request-Headers: X-PINGOTHER, Content-Type
+
+
+HTTP/1.1 200 OK
+Date: Mon, 01 Dec 2008 01:15:39 GMT
+Server: Apache/2.0.61 (Unix)
+Access-Control-Allow-Origin: http://foo.example
+Access-Control-Allow-Methods: POST, GET, OPTIONS
+Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
+Access-Control-Max-Age: 86400
+Vary: Accept-Encoding, Origin
+Content-Encoding: gzip
+Content-Length: 0
+Keep-Alive: timeout=2, max=100
+Connection: Keep-Alive
+Content-Type: text/plain
+</pre>
+
+<p>Once the preflight request is complete, the real request is sent:</p>
+
+<pre class="brush: none; notranslate">POST /resources/post-here/ HTTP/1.1
+Host: bar.other
+User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
+Connection: keep-alive
+X-PINGOTHER: pingpong
+Content-Type: text/xml; charset=UTF-8
+Referer: http://foo.example/examples/preflightInvocation.html
+Content-Length: 55
+Origin: http://foo.example
+Pragma: no-cache
+Cache-Control: no-cache
+
+&lt;?xml version="1.0"?&gt;&lt;person&gt;&lt;name&gt;Arun&lt;/name&gt;&lt;/person&gt;
+
+
+HTTP/1.1 200 OK
+Date: Mon, 01 Dec 2008 01:15:40 GMT
+Server: Apache/2.0.61 (Unix)
+Access-Control-Allow-Origin: http://foo.example
+Vary: Accept-Encoding, Origin
+Content-Encoding: gzip
+Content-Length: 235
+Keep-Alive: timeout=2, max=99
+Connection: Keep-Alive
+Content-Type: text/plain
+
+[Some GZIP'd payload]
+</pre>
+
+<p>Lines 1 - 12 above represent the preflight request with the {{HTTPMethod("OPTIONS")}} method. The browser determines that it needs to send this based on the request parameters that the JavaScript code snippet above was using, so that the server can respond whether it is acceptable to send the request with the actual request parameters. OPTIONS is an HTTP/1.1 method that is used to determine further information from servers, and is a {{Glossary("safe")}} method, meaning that it can't be used to change the resource. Note that along with the OPTIONS request, two other request headers are sent (lines 10 and 11 respectively):</p>
+
+<pre class="brush: none notranslate">Access-Control-Request-Method: POST
+Access-Control-Request-Headers: X-PINGOTHER, Content-Type
+</pre>
+
+<p>The {{HTTPHeader("Access-Control-Request-Method")}} header notifies the server as part of a preflight request that when the actual request is sent, it will be sent with a <code>POST</code> request method. The {{HTTPHeader("Access-Control-Request-Headers")}} header notifies the server that when the actual request is sent, it will be sent with a <code>X-PINGOTHER</code> and Content-Type custom headers. The server now has an opportunity to determine whether it wishes to accept a request under these circumstances.</p>
+
+<p>Lines 14 - 26 above are the response that the server sends back indicating that the request method (<code>POST</code>) and request headers (<code>X-PINGOTHER</code>) are acceptable. In particular, let's look at lines 17-20:</p>
+
+<pre class="brush: none notranslate">Access-Control-Allow-Origin: http://foo.example
+Access-Control-Allow-Methods: POST, GET
+Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
+Access-Control-Max-Age: 86400</pre>
+
+<p>The server responds with <code>Access-Control-Allow-Methods</code> and says that <code>POST</code> and <code>GET</code> are viable methods to query the resource in question. Note that this header is similar to the {{HTTPHeader("Allow")}} response header, but used strictly within the context of access control.</p>
+
+<p>The server also sends <code>Access-Control-Allow-Headers</code> with a value of "<code>X-PINGOTHER, Content-Type</code>", confirming that these are permitted headers to be used with the actual request. Like <code>Access-Control-Allow-Methods</code>, <code>Access-Control-Allow-Headers</code> is a comma separated list of acceptable headers.</p>
+
+<p>Finally, {{HTTPHeader("Access-Control-Max-Age")}} gives the value in seconds for how long the response to the preflight request can be cached for without sending another preflight request. In this case, 86400 seconds is 24 hours. Note that each browser has a <a href="/en-US/docs/Web/HTTP/Headers/Access-Control-Max-Age">maximum internal value</a> that takes precedence when the <code>Access-Control-Max-Age</code> is greater.</p>
+
+<h4 id="Preflighted_requests_and_redirects">Preflighted requests and redirects</h4>
+
+<p>Not all browsers currently support following redirects after a preflighted request. If a redirect occurs after a preflighted request, some browsers currently will report an error message such as the following.</p>
+
+<blockquote>
+<p>The request was redirected to 'https://example.com/foo', which is disallowed for cross-origin requests that require preflight</p>
+</blockquote>
+
+<blockquote>
+<p>Request requires preflight, which is disallowed to follow cross-origin redirect</p>
+</blockquote>
+
+<p>The CORS protocol originally required that behavior but <a href="https://github.com/whatwg/fetch/commit/0d9a4db8bc02251cc9e391543bb3c1322fb882f2">was subsequently changed to no longer require it</a>. However, not all browsers have implemented the change, and so still exhibit the behavior that was originally required.</p>
+
+<p>So until all browsers catch up with the spec, you may be able to work around this limitation by doing one or both of the following:</p>
+
+<ul>
+ <li>change the server-side behavior to avoid the preflight and/or to avoid the redirect—if you have control over the server the request is being made to</li>
+ <li>change the request such that it is a <a href="#Simple_requests">simple request</a> that doesn’t cause a preflight</li>
+</ul>
+
+<p>But if it’s not possible to make those changes, then another way that may be possible is to this:</p>
+
+<ol>
+ <li>Make a <a href="#Simple_requests">simple request</a> (using {{domxref("Response.url")}} for the Fetch API, or {{domxref("XMLHttpRequest.responseURL")}}) to determine what URL the real preflighted request would end up at.</li>
+ <li>Make another request (the “real” request) using the URL you obtained from <code>Response.url</code> or <code>XMLHttpRequest.responseURL</code> in the first step.</li>
+</ol>
+
+<p>However, if the request is one that triggers a preflight due to the presence of the <code>Authorization</code> header in the request, you won’t be able to work around the limitation using the steps above. And you won’t be able to work around it at all unless you have control over the server the request is being made to.</p>
+
+<h3 id="Requests_with_credentials">Requests with credentials</h3>
+
+<p>The most interesting capability exposed by both {{domxref("XMLHttpRequest")}} or <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> and CORS is the ability to make "credentialed" requests that are aware of <a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a> and HTTP Authentication information. By default, in cross-site <code>XMLHttpRequest"</code> or <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> invocations, browsers will <strong>not</strong> send credentials. A specific flag has to be set on the <code>XMLHttpRequest"</code> object or the {{domxref("Request")}} constructor when it is invoked.</p>
+
+<p>In this example, content originally loaded from <code class="plain">http://foo.example</code> makes a simple GET request to a resource on <code class="plain">http://bar.other</code> which sets Cookies. Content on foo.example might contain JavaScript like this:</p>
+
+<pre class="brush: js notranslate" id="line1">var invocation = new XMLHttpRequest();
+var url = 'http://bar.other/resources/credentialed-content/';
+
+function callOtherDomain(){
+  if(invocation) {
+    invocation.open('GET', url, true);
+    invocation.withCredentials = true;
+    invocation.onreadystatechange = handler;
+    invocation.send();
+  }
+}</pre>
+
+<p>Line 7 shows the flag on {{domxref("XMLHttpRequest")}} that has to be set in order to make the invocation with Cookies, namely the <code>withCredentials</code> boolean value. By default, the invocation is made without Cookies. Since this is a simple <code>GET</code> request, it is not preflighted, but the browser will <strong>reject</strong> any response that does not have the {{HTTPHeader("Access-Control-Allow-Credentials")}}<code>: true</code> header, and <strong>not</strong> make the response available to the invoking web content.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14291/cred-req.png" style="height: 223px; width: 521px;"></p>
+
+<p>Here is a sample exchange between client and server:</p>
+
+<pre class="brush: none notranslate">GET /resources/access-control-with-credentials/ HTTP/1.1
+Host: bar.other
+User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
+Connection: keep-alive
+Referer: http://foo.example/examples/credential.html
+Origin: http://foo.example
+Cookie: pageAccess=2
+
+
+HTTP/1.1 200 OK
+Date: Mon, 01 Dec 2008 01:34:52 GMT
+Server: Apache/2.0.61 (Unix) PHP/4.4.7 mod_ssl/2.0.61 OpenSSL/0.9.7e mod_fastcgi/2.4.2 DAV/2 SVN/1.4.2
+X-Powered-By: PHP/5.2.6
+Access-Control-Allow-Origin: http://foo.example
+Access-Control-Allow-Credentials: true
+Cache-Control: no-cache
+Pragma: no-cache
+Set-Cookie: pageAccess=3; expires=Wed, 31-Dec-2008 01:34:53 GMT
+Vary: Accept-Encoding, Origin
+Content-Encoding: gzip
+Content-Length: 106
+Keep-Alive: timeout=2, max=100
+Connection: Keep-Alive
+Content-Type: text/plain
+
+
+[text/plain payload]
+</pre>
+
+<p>Although line 11 contains the Cookie destined for the content on <code class="plain">http://bar.other</code>, if bar.other did not respond with an {{HTTPHeader("Access-Control-Allow-Credentials")}}<code>: true</code> (line 19) the response would be ignored and not made available to web content.</p>
+
+<h4 id="Credentialed_requests_and_wildcards">Credentialed requests and wildcards</h4>
+
+<p>When responding to a credentialed request, the server <strong>must</strong> specify an origin in the value of the <code>Access-Control-Allow-Origin</code> header, instead of specifying the "<code>*</code>" wildcard.</p>
+
+<p>Because the request headers in the above example include a <code>Cookie</code> header, the request would fail if the value of the <code>Access-Control-Allow-Origin</code> header were "*". But it does not fail: Because the value of the <code>Access-Control-Allow-Origin</code> header is "<code class="plain">http://foo.example</code>" (an actual origin) rather than the "<code>*</code>" wildcard, the credential-cognizant content is returned to the invoking web content.</p>
+
+<p>Note that the <code>Set-Cookie</code> response header in the example above also sets a further cookie. In case of failure, an exception—depending on the API used—is raised.</p>
+
+<h4 id="Third-party_cookies">Third-party cookies</h4>
+
+<p>Note that cookies set in CORS responses are subject to normal third-party cookie policies. In the example above, the page is loaded from <code>foo.example</code>, but the cookie on line 22 is sent by <code>bar.other</code>, and would thus not be saved if the user has configured their browser to reject all third-party cookies.</p>
+
+<h2 id="The_HTTP_response_headers">The HTTP response headers</h2>
+
+<p>This section lists the HTTP response headers that servers send back for access control requests as defined by the Cross-Origin Resource Sharing specification. The previous section gives an overview of these in action.</p>
+
+<h3 id="Access-Control-Allow-Origin">Access-Control-Allow-Origin</h3>
+
+<p>A returned resource may have one {{HTTPHeader("Access-Control-Allow-Origin")}} header, with the following syntax:</p>
+
+<pre class="brush: none notranslate">Access-Control-Allow-Origin: &lt;origin&gt; | *
+</pre>
+
+<p><code>Access-Control-Allow-Origin</code> specifies either a single origin, which tells browsers to allow that origin to access the resource; or else — for requests <strong>without</strong> credentials — the "<code>*</code>" wildcard, to tell browsers to allow any origin to access the resource.</p>
+
+<p>For example, to allow code from the origin <code>http://mozilla.org</code> to access the resource, you can specify:</p>
+
+<pre class="brush: none notranslate">Access-Control-Allow-Origin: http://mozilla.org</pre>
+
+<p>If the server specifies a single origin rather than the "<code>*</code>" wildcard, then the server should also include <code>Origin</code> in the {{HTTPHeader("Vary")}} response header — to indicate to clients that server responses will differ based on the value of the {{HTTPHeader("Origin")}} request header.</p>
+
+<h3 id="Access-Control-Expose-Headers">Access-Control-Expose-Headers</h3>
+
+<p>The {{HTTPHeader("Access-Control-Expose-Headers")}} header lets a server whitelist headers that browsers are allowed to access. For example:</p>
+
+<pre class="brush: none notranslate">Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header
+</pre>
+
+<p>This allows the <code>X-My-Custom-Header</code> and <code>X-Another-Custom-Header</code> headers to be exposed to the browser.</p>
+
+<h3 id="Access-Control-Max-Age">Access-Control-Max-Age</h3>
+
+<p>The {{HTTPHeader("Access-Control-Max-Age")}} header indicates how long the results of a preflight request can be cached. For an example of a preflight request, see the above examples.</p>
+
+<pre class="brush: none notranslate">Access-Control-Max-Age: &lt;delta-seconds&gt;
+</pre>
+
+<p>The <code>delta-seconds</code> parameter indicates the number of seconds the results can be cached.</p>
+
+<h3 id="Access-Control-Allow-Credentials">Access-Control-Allow-Credentials</h3>
+
+<p>The {{HTTPHeader("Access-Control-Allow-Credentials")}} header Indicates whether or not the response to the request can be exposed when the <code>credentials</code> flag is true. When used as part of a response to a preflight request, this indicates whether or not the actual request can be made using credentials. Note that simple <code>GET</code> requests are not preflighted, and so if a request is made for a resource with credentials, if this header is not returned with the resource, the response is ignored by the browser and not returned to web content.</p>
+
+<pre class="brush: none notranslate">Access-Control-Allow-Credentials: true
+</pre>
+
+<p><a class="internal" href="#Requests_with_credentials">Credentialed requests</a> are discussed above.</p>
+
+<h3 id="Access-Control-Allow-Methods">Access-Control-Allow-Methods</h3>
+
+<p>The {{HTTPHeader("Access-Control-Allow-Methods")}} header specifies the method or methods allowed when accessing the resource. This is used in response to a preflight request. The conditions under which a request is preflighted are discussed above.</p>
+
+<pre class="brush: none notranslate">Access-Control-Allow-Methods: &lt;method&gt;[, &lt;method&gt;]*
+</pre>
+
+<p>An example of a <a class="internal" href="#Preflighted_requests">preflight request is given above</a>, including an example which sends this header to the browser.</p>
+
+<h3 id="Access-Control-Allow-Headers">Access-Control-Allow-Headers</h3>
+
+<p>The {{HTTPHeader("Access-Control-Allow-Headers")}} header is used in response to a <a class="internal" href="#Preflighted_requests">preflight request</a> to indicate which HTTP headers can be used when making the actual request.</p>
+
+<pre class="brush: none notranslate">Access-Control-Allow-Headers: &lt;field-name&gt;[, &lt;field-name&gt;]*
+</pre>
+
+<h2 id="The_HTTP_request_headers">The HTTP request headers</h2>
+
+<p>This section lists headers that clients may use when issuing HTTP requests in order to make use of the cross-origin sharing feature. Note that these headers are set for you when making invocations to servers. Developers using cross-site {{domxref("XMLHttpRequest")}} capability do not have to set any cross-origin sharing request headers programmatically.</p>
+
+<h3 id="Origin">Origin</h3>
+
+<p>The {{HTTPHeader("Origin")}} header indicates the origin of the cross-site access request or preflight request.</p>
+
+<pre class="brush: none notranslate">Origin: &lt;origin&gt;
+</pre>
+
+<p>The origin is a URI indicating the server from which the request initiated. It does not include any path information, but only the server name.</p>
+
+<div class="note"><strong>Note:</strong> The <code>origin</code> can be the empty string; this is useful, for example, if the source is a <code>data</code> URL.</div>
+
+<p>Note that in any access control request, the {{HTTPHeader("Origin")}} header is <strong>always</strong> sent.</p>
+
+<h3 id="Access-Control-Request-Method">Access-Control-Request-Method</h3>
+
+<p>The {{HTTPHeader("Access-Control-Request-Method")}} is used when issuing a preflight request to let the server know what HTTP method will be used when the actual request is made.</p>
+
+<pre class="brush: none notranslate">Access-Control-Request-Method: &lt;method&gt;
+</pre>
+
+<p>Examples of this usage can be <a class="internal" href="#Preflighted_requests">found above.</a></p>
+
+<h3 id="Access-Control-Request-Headers">Access-Control-Request-Headers</h3>
+
+<p>The {{HTTPHeader("Access-Control-Request-Headers")}} header is used when issuing a preflight request to let the server know what HTTP headers will be used when the actual request is made.</p>
+
+<pre class="brush: none notranslate">Access-Control-Request-Headers: &lt;field-name&gt;[, &lt;field-name&gt;]*
+</pre>
+
+<p>Examples of this usage can be <a class="internal" href="#Preflighted_requests">found above</a>.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch', '#cors-protocol', 'CORS')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>New definition; supplants <a href="https://www.w3.org/TR/cors/">W3C CORS</a> specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Access-Control-Allow-Origin")}}</p>
+
+<h3 id="Compatibility_notes">Compatibility notes</h3>
+
+<ul>
+ <li>Internet Explorer 8 and 9 expose CORS via the <code>XDomainRequest</code> object, but have a full implementation in IE 10.</li>
+ <li>While Firefox 3.5 introduced support for cross-site <code>XMLHttpRequests</code> and Web Fonts, certain requests were limited until later versions. Specifically, Firefox 7 introduced the ability for cross-site HTTP requests for WebGL Textures, and Firefox 9 added support for Images drawn on a canvas using <code>drawImage()</code>.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors">CORS errors</a></li>
+ <li><a href="https://enable-cors.org/server.html">Enable CORS: I want to add CORS support to my server</a></li>
+ <li>{{domxref("XMLHttpRequest")}}</li>
+ <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
+ <li><a class="external" href="http://www.kendoui.com/blogs/teamblog/posts/11-10-03/using_cors_with_all_modern_browsers.aspx">Using CORS with All (Modern) Browsers</a></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/cors/">Using CORS - HTML5 Rocks</a>
+  <ul>
+  </ul>
+ </li>
+ <li><a class="external" href="https://arunranga.com/examples/access-control/">Code Samples Showing <code>XMLHttpRequest</code> and Cross-Origin Resource Sharing</a></li>
+ <li><a href="https://github.com/jackblackevo/cors-jsonp-sample">Client-Side &amp; Server-Side (Java) sample for Cross-Origin Resource Sharing (CORS)</a></li>
+ <li><a class="internal" href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">Cross-Origin Resource Sharing From a Server-Side Perspective (PHP, etc.)</a></li>
+ <li><a href="https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe/43881141#43881141">Stack Overflow answer with “how to” info for dealing with common problems</a>:
+  <ul>
+   <li>How to avoid the CORS preflight</li>
+   <li>How to use a CORS proxy to get around <em>“No Access-Control-Allow-Origin header”</em></li>
+   <li>How to fix <em>“Access-Control-Allow-Origin header must not be the wildcard”</em></li>
+  </ul>
+ </li>
+</ul>
+
+<div>{{HTTPSidebar}}</div>
diff --git a/files/de/web/http/headers/accept/index.html b/files/de/web/http/headers/accept/index.html
new file mode 100644
index 0000000000..072e1bebd3
--- /dev/null
+++ b/files/de/web/http/headers/accept/index.html
@@ -0,0 +1,96 @@
+---
+title: Accept
+slug: Web/HTTP/Headers/Accept
+tags:
+  - Anfrage-Header
+  - HTTP
+  - HTTP Header
+translation_of: Web/HTTP/Headers/Accept
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Der <strong><code>Accept</code></strong> Anfrage-HTTP-Header drückt aus, welche Inhaltstypen, ausgedrückt als <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME-Typen (MIME-Types)</a>, der anfragende Client unterstützt. Durch <a href="/en-US/docs/Web/HTTP/Content_negotiation">Inhalts-Aushandlung (Content negotiation)</a> wählt der Ziel-Server einen Inhalts-Typen aus, verwendet diesen für den Inhalt und teilt dem Client diesen über den Antwort-HTTP-Header {{HTTPHeader("Content-Type")}} mit. Browser setzen entsprechende Inhalts-Typen automatisch, je nachdem in welchem Kontext die Anfrage stattfindet: Wenn ein CSS-Stylesheet angefragt wird, wird ein anderer Inhalts-Typ verwendet wie wenn ein Bild, Video oder Script angefragt wird.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header-Typ</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>Nein</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("CORS-safelisted request header")}}</th>
+   <td>Ja, mit der zusätzlichen Restriktion dass die Werte keine <em>CORS-unsicheren Anfrage-Header-Bytes</em> enthalten dürfen: <code>"():&lt;&gt;?@[\]{}</code>, Delete, Tab und Kontrollzeichen: 0x00 to 0x19.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Accept: &lt;MIME_type&gt;/&lt;MIME_subtype&gt;
+Accept: &lt;MIME_type&gt;/*
+Accept: */*
+
+// Mehrere Werte, gewichtet mit der {{glossary("quality values", "quality value")}} Syntax:
+Accept: text/html, application/xhtml+xml, application/xml;q=0.9, image/webp, */*;q=0.8
+</pre>
+
+<h2 id="Direktiven">Direktiven</h2>
+
+<dl>
+ <dt><code>&lt;MIME_type&gt;/&lt;MIME_subtype&gt;</code></dt>
+ <dd>Ein einfacher, präziser <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME-Type</a> wie <code>text/html</code>.</dd>
+ <dt><code>&lt;MIME_type&gt;/*</code></dt>
+ <dd>Ein Mime-Type, aber ohne einen Untertypen. <code>image/*</code> z.B. stimmt mit <code>image/png</code>, <code>image/svg</code>, <code>image/gif</code> und allen anderen Bild-Typen überein.</dd>
+ <dt><code>*/*</code></dt>
+ <dd>Irgend ein MIME-Type</dd>
+ <dt><code>;q=</code> (q-Faktor Gewichtung)</dt>
+ <dd>Jeder verwendete Wert definiert eine Ordnung der Präferenzen durch einen relativen <a href="/en-US/docs/Glossary/Quality_values">Qualitätswert (Quality value)</a>, auch als <strong>Gewichtung</strong> bezeichnet.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre>Accept: text/html
+
+Accept: image/*
+
+// Standard für allgemeine Anfragen
+Accept: */*
+
+// Standard für Navigations-Anfragen im Browser
+Accept: text/html, application/xhtml+xml, application/xml;q=0.9, */*;q=0.8
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("7231", "Accept", "5.3.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Context</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Accept")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>HTTP <a href="/en-US/docs/Web/HTTP/Content_negotiation">Inhalts-Aushandlung (Content negotiation)</a></li>
+ <li>Header, der das Ergebnis der Aushandlung enthält: {{HTTPHeader("Content-Type")}}</li>
+ <li>Andere, ähnliche Header: {{HTTPHeader("TE")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("Accept-Charset")}}, {{HTTPHeader("Accept-Language")}}</li>
+</ul>
diff --git a/files/de/web/http/headers/age/index.html b/files/de/web/http/headers/age/index.html
new file mode 100644
index 0000000000..1f7190fc36
--- /dev/null
+++ b/files/de/web/http/headers/age/index.html
@@ -0,0 +1,80 @@
+---
+title: Age
+slug: Web/HTTP/Headers/Age
+tags:
+  - Caching
+  - HTTP
+  - Response
+  - header
+translation_of: Web/HTTP/Headers/Age
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><code><strong>Age</strong></code> nennt die Dauer in Sekunden, die das angefragte Objekt bereits in einem Proxy-Cache zwischengespeichert ist.</p>
+
+<p>Die Dauer versteht sich üblicherweise als Differenz zwischen der aktuellen Uhrzeit und der Angabe {{HTTPHeader("Date")}}, die den Zeitpunkt anzeigt, an dem das Objekt ursprünglich erstellt wurde.</p>
+
+<p>Der Wert 0 deutet darauf hin, dass das Objekt gerade durch den Cache vom eigentlichen Server geholt wurde, mithin aktuell ist.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Typ</th>
+   <td>{{Glossary("Response header", "Antwort")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name", "Verboten")}}</th>
+   <td>Nein</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Age: &lt;delta-seconds&gt;
+</pre>
+
+<h2 id="Argument">Argument</h2>
+
+<dl>
+ <dt>&lt;delta-seconds&gt;</dt>
+ <dd>
+ <p>Eine positive Ganzzahl, die der Dauer in Sekunden entspricht, die das Objekt von einem Proxy-Cache zum Zeitpunkt des Abrufs bereits zwischengespeichert wurde.</p>
+ </dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre>Age: 24
+Date: Tue, 15 Nov 1994 08:12:31 GMT
+</pre>
+
+<p>Das Objekt befindet sich seit 24 Sekunden im Cache. Die aktuelle Uhrzeit müsste demnach 8:12:55 sein, 8:12:31 + 24s.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Titel</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7234", "Age", "5.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Caching</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Age")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{HTTPHeader("Cache-Control")}}</li>
+ <li>{{HTTPHeader("Expires")}}</li>
+</ul>
diff --git a/files/de/web/http/headers/cache-control/index.html b/files/de/web/http/headers/cache-control/index.html
new file mode 100644
index 0000000000..6606bcabd7
--- /dev/null
+++ b/files/de/web/http/headers/cache-control/index.html
@@ -0,0 +1,176 @@
+---
+title: Cache-Control
+slug: Web/HTTP/Headers/Cache-Control
+tags:
+  - Allgemeine Header
+  - HTTP
+  - HTTP-Header
+  - Referenz
+translation_of: Web/HTTP/Headers/Cache-Control
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Das allgemeine Header-Feld <strong><code>Cache-Control</code></strong> wird benutzt um Direktiven für Caching-Mechanismen, sowohl für Requests als auch für Responses, zu spezifizieren. Caching-Direktiven sind unidirektional, das bedeutet dass eine Direktive in einem Request nicht impliziert, dass die gleiche Direktive auch in einem Response zurückkommen muss.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("General header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>nein</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Simple response header", "CORS-safelisted response-header")}}</th>
+   <td>ja</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>Die Direktiven beachten Groß- und Kleinschreibung und haben optionale Argumente, die sowohl Token-Syntax als auch Zeichenketten mit Anführungszeichen verwenden. Mehrere Direktiven werden kommasepariert.</p>
+
+<h3 id="Cache_Request_Direktiven">Cache Request Direktiven</h3>
+
+<p>Standard <code>Cache-Control</code> Direktiven, die vom Client in einem HTTP Request verwendet werden können.</p>
+
+<pre class="syntaxbox">Cache-Control: max-age=&lt;seconds&gt;
+Cache-Control: max-stale[=&lt;seconds&gt;]
+Cache-Control: min-fresh=&lt;seconds&gt;
+Cache-Control: no-cache
+Cache-Control: no-store
+Cache-Control: no-transform
+Cache-Control: only-if-cached
+</pre>
+
+<h3 id="Cache_Response_Direktiven">Cache Response Direktiven</h3>
+
+<p>Standard <code>Cache-Control</code> Direktiven, die vom Server in einer HTTP Response verwendet werden können.</p>
+
+<pre class="syntaxbox">Cache-Control: must-revalidate
+Cache-Control: no-cache
+Cache-Control: no-store
+Cache-Control: no-transform
+Cache-Control: public
+Cache-Control: private
+Cache-Control: proxy-revalidate
+Cache-Control: max-age=&lt;seconds&gt;
+Cache-Control: s-maxage=&lt;seconds&gt;
+</pre>
+
+<h3 id="Erweiterungs_Cache-Control_Direktiven">Erweiterungs <code>Cache-Control</code> Direktiven</h3>
+
+<p>Erweiterungs <code>Cache-Control</code> Direktiven sind nicht Teil des Kern HTTP Caching Standard-Dokuments. Prüfen Sie die Unterstützung in der <a href="#Browser_compatibility">Kompatibilitätstabelle</a>.</p>
+
+<pre class="syntaxbox">Cache-Control: immutable
+Cache-Control: stale-while-revalidate=&lt;seconds&gt;
+Cache-Control: stale-if-error=&lt;seconds&gt;
+</pre>
+
+<h2 id="Direktiven">Direktiven</h2>
+
+<h3 id="Cachebarkeit">Cachebarkeit</h3>
+
+<dl>
+ <dt><code>public</code></dt>
+ <dd>Kennzeichen dass die Response von jedem Cache gecached werden dürfen.</dd>
+ <dt><code>private</code></dt>
+ <dd>Kennzeichen dass die Response für einen einzigen Benutzer gedacht ist, und nicht von einem geteilten Cache gespeichert werden dürfen. Ein privater Cache darf die Response speichern.</dd>
+ <dt><code>no-cache</code></dt>
+ <dd>Zwingt Caches den Request dem Ursprungs-Server zuzustellen, um die Gültigkeit zu validieren, bevor eine gecachte Kopie freigegeben wird.</dd>
+ <dt><code>only-if-cached</code></dt>
+ <dd>Gibt an, dass keine neue Daten abgerufen werden sollen. Der Client möchte nur eine gecachte Response erhalten und sollte nicht den Ursprungs-Server kontaktieren, um zu prüfen, ob eine neuere Kopie existiert.</dd>
+</dl>
+
+<h3 id="Cache-Verfall">Cache-Verfall</h3>
+
+<dl>
+ <dt><code>max-age=&lt;seconds&gt;</code></dt>
+ <dd>Spezifiziert die maximale Zeitdauer, die eine Ressource als aktuell betrachtet wird. Im Gegensatz zu <code>Expires</code>, ist diese Direktive relativ zum Zeitpunkt des Requests.</dd>
+ <dt><code>s-maxage=&lt;seconds&gt;</code></dt>
+ <dd>Überschreibt <code>max-age</code> oder den <code>Expires</code> Header, bezieht sich allerdings nur auf geteilte Caches (z.B. Proxyserver) und wird von einem privaten Cachen ignoriert.</dd>
+ <dt><code>max-stale[=&lt;seconds&gt;]</code></dt>
+ <dd>Gibt an, dass der Client bereit ist eine Response zu akzeptieren, die ihre Ablaufzeit überschritten hat. Optional können Sie einen Wert in Sekunden angeben, der die Zeit angibt, die eine Response höchstens abgelaufen sein darf.</dd>
+ <dt><code>min-fresh=&lt;seconds&gt;</code></dt>
+ <dd>Gibt an, dass der Client eine Response erwartet, die mindestens noch für die angegebene Zeit aktuell ist.</dd>
+ <dt><code>stale-while-revalidate=&lt;seconds&gt;</code> {{experimental_inline}}</dt>
+ <dd>Gibt an, dass der Client bereit ist eine abgelaufene Response zu akzeptieren, während im Hintergrund asynchron auf eine Aktualisierung geprüft wird. Der zweite Wert gibt an für wie lange der Client bereit ist die abgelaufene Response zu akzeptieren.</dd>
+ <dt><code>stale-if-error=&lt;seconds&gt;</code> {{experimental_inline}}</dt>
+ <dd>...</dd>
+</dl>
+
+<h3 id="Revalidierung_und_Neuladen">Revalidierung und Neuladen</h3>
+
+<dl>
+ <dt><code>must-revalidate</code></dt>
+ <dd>Der Cache muss den Status der abgelaufenen Ressource überprüfen bevor sie verwendet wird. Abgelaufene Ressourcen sollten nicht verwendet werden.</dd>
+ <dt><code>proxy-revalidate</code></dt>
+ <dd>Gleich wie <code>must-revalidate</code>, aber bezieht sich nur auf geteilte Caches (z.B. Proxyserver) und wird von einem privaten Cache ignoriert.</dd>
+ <dt><code>immutable</code></dt>
+ <dd>Gibt an, dass der Response-Body sich nicht im Laufe der Zeit ändern wird. Falls die Ressource noch nicht abgelaufen ist, ist sie auf dem Server unverändert und daher sollte der Client, selbst wenn der Benutzer die Seite explizit aktualisiert, nicht eine bedingte Revalidierung schicken (z.B. <code>If-None-Match</code> oder <code>If-Modified-Since</code>) , um auf Aktualisierungen zu prüfen Die Ressource . Clients, denen diese Erweiterung unbekannt ist, müssen sie nach der HTTP-Spezifikation ignorieren. In Firefox, <code>immutable</code> wird nur bei <code>https://</code> Transaktionen beachtet. Für mehr Informationen, siehe auch diesen <a href="http://bitsup.blogspot.de/2016/05/cache-control-immutable.html">Blogpost</a>.</dd>
+</dl>
+
+<h3 id="Weitere">Weitere</h3>
+
+<dl>
+ <dt><code>no-store</code></dt>
+ <dd>Der Cache sollte nichts über den Client-Request oder die Server-Response speichern.</dd>
+ <dt><code>no-transform</code></dt>
+ <dd>Es sollte keinerlei Transformation oder Konvertierung der Ressoruce durchgeführt werden. Die Content-Encoding, Content-Range, Content-Type Headers dürfen nicht durch einen Proxyserver verändert werden. Ein nicht-transparenter Proxy könnte beispielsweise zwischen Bildformaten konvertieren, um Speicherplatz im Cache zu sparen oder den Datenverkehr bei einer langsamen Verbindung zu reduzieren. Die <code>no-transform</code> Direktive verbietet dies.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Caching_verhindern">Caching verhindern</h3>
+
+<p>Um Caching abzuschalten können Sie den folgenden Response Header schicken. Beachten Sie ggf. zusätzlich die <code>Expires</code> und <code>Pragma</code> Header.</p>
+
+<pre class="brush: bash">Cache-Control: no-cache, no-store, must-revalidate
+</pre>
+
+<h3 id="Statische_Assets_cachen">Statische Assets cachen</h3>
+
+<p>Für die Dateien einer Anwendung, die sich nicht ändern werden, können Sie normalerweise aggressives Caching nutzen, indem Sie den untenstehenden Response-Header senden. Dies schließt statische Dateien ein, die von der Anwendung bereitgestellt werden, wie z.B. Bilder, CSS- und JavaScript-Dateien. Beachten Sie außerdem den <code>Expires</code> Header.</p>
+
+<pre class="brush: bash">Cache-Control: public, max-age=31536000</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7234")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Caching</td>
+  </tr>
+  <tr>
+   <td>{{RFC("5861")}}</td>
+   <td>HTTP Cache-Control Extensions for Stale Content</td>
+  </tr>
+  <tr>
+   <td>{{RFC("8246")}}</td>
+   <td>HTTP Immutable Responses</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Cache-Control")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Caching_FAQ">HTTP Caching FAQ</a></li>
+ <li>{{HTTPHeader("Age")}}</li>
+ <li>{{HTTPHeader("Expires")}}</li>
+ <li>{{HTTPHeader("Pragma")}}</li>
+</ul>
diff --git a/files/de/web/http/headers/connection/index.html b/files/de/web/http/headers/connection/index.html
new file mode 100644
index 0000000000..8c4000ac5c
--- /dev/null
+++ b/files/de/web/http/headers/connection/index.html
@@ -0,0 +1,48 @@
+---
+title: Connection
+slug: Web/HTTP/Headers/Connection
+translation_of: Web/HTTP/Headers/Connection
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>The <strong><code>Connection</code></strong> general header controls whether or not the network connection stays open after the current transaction finishes. If the value sent is <code>keep-alive</code>, the connection is persistent and not closed, allowing for subsequent requests to the same server to be done.</p>
+
+<div class="blockIndicator warning">
+<p>Connection-specific header fields such as {{HTTPHeader("Connection")}} and {{HTTPHeader("Keep-Alive")}} are <a href="https://tools.ietf.org/html/rfc7540#section-8.1.2.2">prohibited in HTTP/2</a>. Chrome and Firefox ignore them in HTTP/2 responses, but Safari conforms to the HTTP/2 spec requirements and won’t load any response which contains them.</p>
+</div>
+
+<p>Except for the standard hop-by-hop headers ({{HTTPHeader("Keep-Alive")}}, {{HTTPHeader("Transfer-Encoding")}}, {{HTTPHeader("TE")}}, {{HTTPHeader("Connection")}}, {{HTTPHeader("Trailer")}}, {{HTTPHeader("Upgrade")}}, {{HTTPHeader("Proxy-Authorization")}} and {{HTTPHeader("Proxy-Authenticate")}}), any hop-by-hop headers used by the message must be listed in the <code>Connection</code> header, so that the first proxy knows it has to consume them and not forward them further. Standard hop-by-hop headers can be listed too (it is often the case of {{HTTPHeader("Keep-Alive")}}, but this is not mandatory).</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("General header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">Connection: keep-alive
+Connection: close
+</pre>
+
+<h2 id="Directives">Directives</h2>
+
+<dl>
+ <dt><code>close</code></dt>
+ <dd>Indicates that either the client or the server would like to close the connection. This is the default on HTTP/1.0 requests.</dd>
+ <dt>any comma-separated list of HTTP headers [Usually <code>keep-alive</code> only]</dt>
+ <dd>Indicates that the client would like to keep the connection open. Having a persistent connection is the default on HTTP/1.1 requests. The list of headers are the name of the header to be removed by the first non-transparent proxy or cache in-between: these headers define the connection between the emitter and the first entity, not the destination node.</dd>
+</dl>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Connection")}}</p>
diff --git a/files/de/web/http/headers/cookie/index.html b/files/de/web/http/headers/cookie/index.html
new file mode 100644
index 0000000000..71552da494
--- /dev/null
+++ b/files/de/web/http/headers/cookie/index.html
@@ -0,0 +1,72 @@
+---
+title: Cookie
+slug: Web/HTTP/Headers/Cookie
+tags:
+  - Cookies
+  - HTTP
+  - Reference
+  - header
+  - request
+translation_of: Web/HTTP/Headers/Cookie
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Der <strong><code>Cookie</code></strong> HTTP Request Header enthält gespeicherte <a href="/en-US/docs/Web/HTTP/Cookies">HTTP Cookies</a> welche zuvor vom Server mit dem {{HTTPHeader("Set-Cookie")}} Header gesendet wurden.</p>
+
+<p>Der <code>Cookie</code> Header ist optional und kann weggelassen werden falls z.B. die Einstellungen für Privatsphäre im Browser keine Cookies zulassen.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header Typ</th>
+   <td>{{Glossary("Request Header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary( "Forbidden header name" , "Verbotener Header-Name")}}</th>
+   <td>Ja</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Cookie: &lt;cookie-list&gt;
+Cookie: name=value
+Cookie: name=value; name2=value2; name3=value3</pre>
+
+<dl>
+ <dt>&lt;cookie-list&gt;</dt>
+ <dd>Eine Liste von Name/Wert-Paaren von folgender Form <code>&lt;cookie-name&gt;=&lt;cookie-value&gt;</code>. Mehrere Einträge in der Liste werden durch ein Semikolon gefolgt von einem Leerzeichen getrennt (<code>'; '</code>).</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre>Cookie: PHPSESSID=298zf09hf012fh2; csrftoken=u32t4o3tb3gg43; _gat=1;</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikationen</th>
+   <th scope="col">Titel</th>
+  </tr>
+  <tr>
+   <td>{{RFC("6265", "Cookie", "5.4")}}</td>
+   <td>HTTP State Management Mechanism</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Cookie")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{HTTPHeader("Set-Cookie")}}</li>
+ <li>{{domxref("Document.cookie")}}</li>
+</ul>
diff --git a/files/de/web/http/headers/dnt/index.html b/files/de/web/http/headers/dnt/index.html
new file mode 100644
index 0000000000..861c398c92
--- /dev/null
+++ b/files/de/web/http/headers/dnt/index.html
@@ -0,0 +1,88 @@
+---
+title: DNT
+slug: Web/HTTP/Headers/DNT
+tags:
+  - DNT
+  - HTTP
+  - Refernz
+  - header
+translation_of: Web/HTTP/Headers/DNT
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Der <strong><code>DNT</code></strong> (<strong>D</strong>o <strong>N</strong>ot <strong>T</strong>rack, engl. "Bitte nicht Tracken") Anfragenheader indiziert, die Tracking-Präferenz des Nutzers. Er lässt den Nutzer indizieren, ob dieser lieber Privatsphäre als personalisierten Kontent hätte.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header-Typ</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>Ja</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">DNT: 0
+DNT: 1
+</pre>
+
+<h2 id="Directives">Directives</h2>
+
+<dl>
+ <dt>0</dt>
+ <dd>Der Nutzer erlaubt das Tracking auf der Zielseite.</dd>
+ <dt>1</dt>
+ <dd>Der Nutze möchte auf der Zielseite lieber nicht getrackt werden.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Die_DNT-Präferenz_per_JavaScript_auslesen">Die DNT-Präferenz per JavaScript auslesen</h3>
+
+<p>Die DNT-Präferenz des Nutzers kann auch per JavaScript, dank dem {{domxref("Navigator.doNotTrack")}} Wert, ausgelesen werden:</p>
+
+<pre class="brush: js">navigator.doNotTrack; // "0" oder "1"</pre>
+
+<h2 id="Specifikationen">Specifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Tracking','#dnt-header-field', 'DNT Header Field for HTTP Requests')}}</td>
+   <td>{{Spec2("Tracking")}}</td>
+   <td>Erstmalige Definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.DNT")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{domxref("Navigator.doNotTrack")}}</li>
+ <li>{{HTTPHeader("Tk")}} header</li>
+ <li><a href="https://en.wikipedia.org/wiki/Do_Not_Track">Do Not Track on Wikipedia</a></li>
+ <li><a href="https://www.eff.org/deeplinks/2011/02/what-does-track-do-not-track-mean">What Does the "Track" in "Do Not Track" Mean? – EFF</a></li>
+ <li><a href="http://donottrack.us/">donottrack.us</a></li>
+ <li>DNT Browsereinstellungen:
+  <ul>
+   <li><a href="https://www.mozilla.org/en-US/firefox/dnt/">Firefox</a></li>
+   <li><a href="https://support.google.com/chrome/answer/2790761">Chrome</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/de/web/http/headers/expect-ct/index.html b/files/de/web/http/headers/expect-ct/index.html
new file mode 100644
index 0000000000..15ec892562
--- /dev/null
+++ b/files/de/web/http/headers/expect-ct/index.html
@@ -0,0 +1,113 @@
+---
+title: Expect-CT
+slug: Web/HTTP/Headers/Expect-CT
+tags:
+  - HTTP
+  - Reference
+  - Referenz
+  - Security
+  - Sicherheit
+  - Verschlüsselung
+  - header
+translation_of: Web/HTTP/Headers/Expect-CT
+---
+<p>{{HTTPSidebar}}</p>
+
+<p><span class="seoSummary">Der <code>Expect-CT</code> HTTP Header erlaubt es Webseiten, die Anforderungen der <a href="/en-US/docs/Web/Security/Certificate_Transparency">Certificate Transparency</a> (kurz: CT) zu aktivieren und/oder zu erzwingen, um so der (unbemerkten) Verwendung falsch ausgestellter Zertifikate vorzubeugen.</span></p>
+
+<p>CT-Anforderungen können erfüllt werden über einen der nachstehenden Mechanismen:</p>
+
+<ul>
+ <li>X.509v3 certificate extension: signierte SCTs (SCT=<em>signed certificate timestamp)</em> werden direkt in das Zertifikat einbettet</li>
+ <li>Eine TLS-Erweiterung des Typs <code>signed_certificate_timestamp</code> wird während des handshakes gesendet</li>
+ <li>OCSP stapling (über die <code>status_request</code> TLS-Erweiterung) und das Bereitstellen einer <code>SignedCertificateTimestampList</code> mit einem oder mehreren SCTs</li>
+</ul>
+
+<div class="note">
+<p>Wenn eine Webseite die Verwendung des <code>Expect-CT</code> Headers aktiviert, fordert sie den Browser darüber auf, jedes im Zusammenhang mit der Webseite verwendete Zertifikat in <strong><a href="https://www.certificate-transparency.org/known-logs">öffentlichen CT Protokollen</a> </strong>nachzuschlagen.</p>
+</div>
+
+<div class="note">
+<p>Browsers <strong>ignorieren</strong> den <code>Expect-CT</code> Header bei HTTP-Verbindungen; der Header hat nur bei HTTPS-Verbindungen einen Effekt.</p>
+</div>
+
+<div class="note">
+<p><code>Expect-CT</code> wird im Juni 2021 voraussichtlich obsolet werden. Seit Mai 2018 ist es erforderlich, dass neue ausgestellte Zertifikate standardmäßig SCTs unterstützen. Ältere Zertifikate, vor März 2018 ausgestellt, können eine Gültigkeitsdauer von 39 Monaten haben, wodurch sie alle im Juni 2021 ablaufen.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre>Expect-CT: report-uri="&lt;uri&gt;",
+           enforce,
+           max-age=&lt;age&gt;</pre>
+
+<h2 id="Direktiven"> Direktiven</h2>
+
+<dl>
+ <dt><code>max-age</code></dt>
+ <dd>
+ <p>Die Anzahl der Sekunden nach dem Empfang des <code>Expect-CT</code>-Header-Feldes, während der der User-Agent den Host der empfangenen Nachricht als bekannten <code>Expect-CT</code> Host betrachten sollte.</p>
+
+ <p>Falls ein Cache einen Wert enthält der größer ist, als dieser abbilden kann oder seine nachfolgenden Berechnungen überlaufen, dann verwendet der Cache automatisch den für ihn größtmöglichen positiven Ganzzahlwert (integer) bzw. 2,147,483,648 (2<sup>31</sup>).</p>
+ </dd>
+ <dt><code>report-uri="&lt;uri&gt;"</code> {{optional_inline}}</dt>
+ <dd>
+ <p>Die URI wohin der Browser <code>Expect-CT</code> Fehler melden soll.</p>
+ In Kombination mit der <code>enforce</code> Direktive wird die Konfiguration als sogenannte "enforce-and-report" (erzwinge und melde) gewertet, wodurch dem user agent signalisiert wird, dass sowohl die Einhaltung der Certificate Transparency Richtlinien erzwungen als auch jede Verletzung berichtet werden soll.</dd>
+ <dt><code>enforce</code> {{optional_inline}}</dt>
+ <dd>
+ <p>Verlangt vom user agent, dass die Einhaltung der Certificate Transparency Richtlinien erzwungen werden soll (anstatt diese nur zu berichten). Gleichzeitig verweigert der user agent zukünftige Verbindungen, die gegen die Certificate Transparency Richtlinien verstoßen.</p>
+
+ <p>In Kombination mit den Direktiven <code>enforce</code> und <code>report-uri</code> wird die Konfiguration als sogenannte "enforce-and-report" (erzwinge und melde) gewertet, wodurch dem user agent signalisiert wird, dass sowohl die Einhaltung der Certificate Transparency Richtlinien erzwungen als auch jede Verletzung berichtet werden soll.</p>
+ </dd>
+</dl>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Dieses Beispiel legt fest, dass die Certificate Transparency für den Zeitraum von 24 Stunden erzwungen werden soll und jede Verletzung in dem Zusammenhang wird gemeldet an die angegebene URL unter <code>foo.example</code>.</p>
+
+<pre>Expect-CT: max-age=86400, enforce, report-uri="https://foo.example/report"</pre>
+
+<h2 id="Hinweise">Hinweise</h2>
+
+<p>Root CAs, die manuell als vertrauenswürdig festgelegt werden, übersteuern und verhindern <code>Expect-CT</code> Berichte/Durchsetzung.</p>
+
+<p>Browser merken sich eine <code>Expect-CT</code> Richtlinie nicht, außer eine Webseite hat bewiesen, dass sie Zertifikate bereitstellt, die den Certificate Transparency Anforderungen genügen. Browser implementieren ihre eigenen Modelle darüber, welche CT-Protokolle diese für die Bewertung der Vertrauenswürdigkeit heranziehen.</p>
+
+<p>Google Chrome beispielsweise erzwingt eine <code>Expect-CT</code> Richtlinie nur für einen Zeitraum von 10 Wochen nach dem Build Datum.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://tools.ietf.org/html/draft-ietf-httpbis-expect-ct-08">Internet Draft</a></td>
+   <td>Expect-CT Erweiterung für HTTP</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Unterstützung">Browser Unterstützung</h2>
+
+<div class="hidden">Diese Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten erstellt. Wenn du an diesen Daten mitwirken möchtest, besuche bitte die URL <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und sende uns einen Pull Request.</div>
+
+<p>{{Compat("http.headers.Expect-CT")}}</p>
diff --git a/files/de/web/http/headers/expires/index.html b/files/de/web/http/headers/expires/index.html
new file mode 100644
index 0000000000..994fb342c9
--- /dev/null
+++ b/files/de/web/http/headers/expires/index.html
@@ -0,0 +1,75 @@
+---
+title: Expires
+slug: Web/HTTP/Headers/Expires
+translation_of: Web/HTTP/Headers/Expires
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Der <code><strong>Expires</strong></code> header enthält das Datum/Zeit nach dem die Response als abgelaufen angesehen wird.</p>
+
+<p>Invalide Datumsangaben, wie ein Date=0, stellen ein Datum in der Vergangenheit dar, dementsprechend ist die Resource bereits abgelaufen.</p>
+
+<p>Falls ein  {{HTTPHeader("Cache-Control")}} header mit der "max-age" oder "s-maxage" Direktive in der Response gesetzt ist, wird  der <code>Expires</code> Header ignoriert.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>nein</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Simple response header", "CORS-safelisted response-header")}}</th>
+   <td>Ja</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Expires: &lt;http-date&gt;
+</pre>
+
+<h2 id="Direktiven">Direktiven</h2>
+
+<dl>
+ <dt>&lt;http-date&gt;</dt>
+ <dd>
+ <p>Ein HTTP-date timestamp.</p>
+ </dd>
+</dl>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre>Expires: Wed, 21 Oct 2015 07:28:00 GMT</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Titel</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7234", "Expires", "5.3")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Caching</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">Die Kompabilitätstabelle wird aus Strukturierten Datensätzen generiert. Falls Sie zum Datenbestand beitragen wolllen, finden Sie ihn auf <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und können uns einen Pullrequest stellen</p>
+
+<p>{{Compat("http.headers.Expires")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTTPHeader("Cache-Control")}}</li>
+ <li>{{HTTPHeader("Age")}}</li>
+</ul>
diff --git a/files/de/web/http/headers/index.html b/files/de/web/http/headers/index.html
new file mode 100644
index 0000000000..2f2c145e6b
--- /dev/null
+++ b/files/de/web/http/headers/index.html
@@ -0,0 +1,441 @@
+---
+title: HTTP Header
+slug: Web/HTTP/Headers
+translation_of: Web/HTTP/Headers
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP Header (Kopfzeilen) erlauben es dem Client und Server zusätzliche Informationen an eine Anfrage oder eine Antwort zu übergeben. Ein HTTP Header besteht aus seinem Namen (Groß-/Kleinschreibung unwichtig), gefolgt von einem Doppelpunkt '<code>:</code>' und dem Wert (ohne Zeilenumbrüche). Führender Leerraum vor dem Wert wird ignoriert.</p>
+
+<p>Benutzerdefinierte, proprietäre Header können mit einem 'X-' Präfix hinzugefügt werden, diese Konvention wurde jedoch im Juni 2012 missbilligt, da es Unannehmlichkeiten verursachte, als nicht standardisierte Felder in {{rfc(6648)}} standardisiert wurden; andere sind im <a href="https://www.iana.org/assignments/message-headers/perm-headers.html">IANA Register</a> aufgeführt, dessen ursprünglicher Inhalt in {{rfc(4229)}} definiert wurde. Die IANA pflegt auch ein <a href="https://www.iana.org/assignments/message-headers/prov-headers.html">Register mit Vorschlägen für neue HTTP Header</a>.</p>
+
+<p>Header können gemäß ihres Kontexts gruppiert werden:</p>
+
+<ul>
+ <li>{{Glossary("General header")}}: Header die sowohl für Anfragen als auch für Antworten zutreffen, jedoch keinen Bezug zu den Daten haben, die eventuell im Body übertragen werden.</li>
+ <li>{{Glossary("Request header")}}: Header die weitere Informationen über die angeforderte Ressource oder den Client selbst enthalten.</li>
+ <li>{{Glossary("Response header")}}: Header mit weiteren Informationen zur Antwort, wie etwa ihres Orts oder den Server selbst (Name und Version etc.)</li>
+ <li>{{Glossary("Entity header")}}: Header die weitere Informationen über den Body der Entität enthalten, wie etwa der Inhaltslänge oder ihren MIME-Type.</li>
+</ul>
+
+<p>Header können auch danach gruppiert werden, wie Proxys sie verarbeiten:</p>
+
+<dl>
+ <dt>End-to-end Header</dt>
+ <dd>Diese Header müssen an den endgültigen Empfänger der Nachricht übermittelt werden, d. h. den Server für eine Anfrage oder den Client für eine Antwort. Zwischen-Proxys müssen unmodifizierte End-to-end-Header erneut übertragen und zwischenspeichern.</dd>
+ <dt>Hop-by-hop Header</dt>
+ <dd>Diese Header sind nur für eine einzelne Verbindung auf Transportebene von Bedeutung und dürfen nicht von Proxys erneut übertragen oder zwischengespeichert werden. Solche Header sind: {{httpheader("Connection")}}, {{httpheader("Keep-Alive")}}, {{httpheader("ProxyAuthenticate")}}, {{httpheader("Proxy-Authorization")}}, {{httpheader("TE")}}, {{httpheader("Trailer")}}, {{httpheader("Transfer-Encoding")}} und {{httpheader("Upgrade")}}. Beachten Sie, dass nur Hop-by-hop Header mit dem allgemeinen Header {{httpheader("Connection")}} festgelegt werden können.</dd>
+</dl>
+
+<p>In der folgenden Liste werden die HTTP Header nach ihrer Verwendungskategorie zusammengefasst. Eine alphabetische Liste finden Sie in der Navigation auf der linken Seite.</p>
+
+<h2 id="Authentifizierung">Authentifizierung</h2>
+
+<dl>
+ <dt>{{HTTPHeader("WWW-Authenticate")}}</dt>
+ <dd>Definiert die Authentifizierungsmethode, die verwendet werden soll, um Zugriff auf eine Ressource zu erhalten.</dd>
+ <dt>{{HTTPHeader("Authorization")}}</dt>
+ <dd>Enthält die Anmeldeinformationen zum Authentifizieren eines Benutzer-Agenten an einem Server.</dd>
+ <dt>{{HTTPHeader("Proxy-Authenticate")}}</dt>
+ <dd>Definiert die Authentifizierungsmethode, die verwendet werden soll, um Zugriff auf eine Ressource hinter einem Proxyserver zu erhalten.</dd>
+ <dt>{{HTTPHeader("Proxy-Authorization")}}</dt>
+ <dd>Enthält die Anmeldeinformationen zum Authentifizieren eines Benutzer-Agenten an einem Proxyserver.</dd>
+</dl>
+
+<h2 id="Caching">Caching</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Age")}}</dt>
+ <dd>Die Zeit in Sekunden, die sich das Objekt in einem Proxy-Cache befunden hat.</dd>
+ <dt>{{HTTPHeader("Cache-Control")}}</dt>
+ <dd>Gibt Anweisungen für Cache-Mechanismen in Anfragen und Antworten an.</dd>
+ <dt>{{HTTPHeader("Clear-Site-Data")}}</dt>
+ <dd>Löscht Browsing-Daten (z. B. Cookies, Storage, Cache), die der anfragenden Website zugeordnet sind.</dd>
+ <dt>{{HTTPHeader("Expires")}}</dt>
+ <dd>Das Datum und die Uhrzeit, nach der die Antwort als veraltet gilt.</dd>
+ <dt>{{HTTPHeader("Pragma")}}</dt>
+ <dd>Implementierungsspezifischer Header, der entlang der Anfrage-Antwort-Kette verschiedene Auswirkungen haben kann. Wird für die Abwärtskompatibilität mit HTTP/1.0 Caches verwendet, bei denen der <code>Cache-Control</code>-Header noch nicht vorhanden ist.</dd>
+ <dt>{{HTTPHeader("Warning")}}</dt>
+ <dd>Ein allgemeines Warnfeld, das Informationen zu möglichen Problemen enthält.</dd>
+</dl>
+
+<h2 id="Client_Hints">Client Hints</h2>
+
+<p>HTTP Client Hints befinden sich noch in der Entwicklung. Dokumentation hierzu befindet sich auf der <a href="https://httpwg.org/http-extensions/client-hints.html">Webseite der HTTP Working Group</a>.</p>
+
+<dl>
+ <dt>{{HTTPHeader("Accept-CH")}} {{experimental_inline}}</dt>
+ <dd>Server können Unterstützung für Clienthinweise unter Verwendung des Headerfelds Accept-CH oder eines entsprechenden HTML {{htmlelement("meta")}} Element mit dem Attribut http-equiv attribute (<a href="https://httpwg.org/http-extensions/client-hints.html#HTML5"><cite>[HTML5]</cite></a>) ankündigen.</dd>
+ <dt>{{HTTPHeader("Accept-CH-Lifetime")}} {{experimental_inline}}</dt>
+ <dd><span class="tlid-translation translation">Server können den Client auffordern, sich an die vom Client für einen bestimmten Zeitraum unterstützten Client Hints zu erinnern, um die Zustellung von Client hints für nachfolgende Anfragen an den Ursprung des Servers zu ermöglichen</span> (<a href="https://httpwg.org/http-extensions/client-hints.html#RFC6454"><cite>[RFC6454]</cite></a>).</dd>
+ <dt>{{HTTPHeader("Early-Data")}} {{experimental_inline}}</dt>
+ <dd><span class="tlid-translation translation">Gibt an, dass die Anforderung in frühen Daten übermittelt wurde.</span></dd>
+ <dt>{{HTTPHeader("Content-DPR")}} {{experimental_inline}}</dt>
+ <dd><span class="tlid-translation translation">Das <code>Content-DPR</code> Antwort Header-Feld ist eine Zahl, die das Verhältnis zwischen physischen Pixeln und CSS Pixeln des ausgewählten Bilds als Antwort angibt.</span></dd>
+ <dt>{{HTTPHeader("DPR")}} {{experimental_inline}}</dt>
+ <dd>Das <code>DPR</code> Anfrage-Header-Feld ist eine Zahl, die das aktuelle Geräte-Pixelverhältnis (Device Pixel Ratio (DPR)) des Clients angibt. Hierbei handelt es sich um das Verhältnis der physischen Pixel zu CSS Pixeln (Abschnitt 5.2 von <a href="https://httpwg.org/http-extensions/client-hints.html#CSSVAL"><cite>[CSSVAL]</cite></a>) des Layout Viewport (Abschnitt 9.1.1 <cite>von </cite><a href="https://httpwg.org/http-extensions/client-hints.html#CSS2"><cite>[CSS2]</cite></a>) auf dem Gerät.</dd>
+ <dt>{{HTTPHeader("Save-Data")}} {{experimental_inline}}</dt>
+ <dd>Das <a class="internalDFN" href="https://wicg.github.io/netinfo/#dom-networkinformation-savedata"><code>SaveData</code></a> [<cite><a class="bibref" href="https://wicg.github.io/netinfo/#bib-client-hints">CLIENT-HINTS</a></cite>] Anfrage-Header-Feld besteht aus einem oder mehreren Token, die die Präferenz des Benutzer-Agenten für eine reduzierte Datennutzung angeben.</dd>
+ <dt>{{HTTPHeader("Viewport-Width")}} {{experimental_inline}}</dt>
+ <dd>
+ <div id="rfc.section.3.3.p.1">
+ <p>Das <code>Viewport-Width</code> Anfrage-Header-Feld ist eine Zahl, die die Breite des Layout Viewport in CSS Pixeln angibt. Der gegebene CSS Pixel Wert ist eine Zahl, die auf die kleinste folgende Ganzzahl (d. h. den Höchstwert) gerundet wird.</p>
+ </div>
+
+ <div id="rfc.section.3.3.p.2">
+ <p>Wenn <code>Viewport-Width</code> mehr als einmal in einer Nachricht vorkommt, dann überschreibt der letzte Wert alle vorherigen.</p>
+ </div>
+ </dd>
+ <dt>{{HTTPHeader("Width")}} {{experimental_inline}}</dt>
+ <dd>
+ <div id="rfc.section.3.2.p.1">
+ <p>Das <code>Width</code> Anfrage-Header-Feld ist eine Zahl, die die gewünschte Ressourcenbreite in physischen Pixeln angibt (d. h. eigentliche Größe eines Bildes). Der gegebene physikalische Pixel Wert ist eine Zahl, die auf die kleinste folgende Ganzzahl (d. h. den Höchstwert) gerundet ist.</p>
+
+ <p>Wenn die gewünschte Ressourcenbreite zum Zeitpunkt der Anforderung nicht bekannt ist oder die Ressource keine Anzeigebreite aufweist, kann das Header-Feld <code>Width</code> weggelassen werden. Wenn <code>Width</code> mehr als einmal in einer Nachricht vorkommt, dann überschreibt der letzte Wert alle vorherigen.</p>
+ </div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{HTTPHeader("Accept-CH")}} {{experimental_inline}}</dt>
+ <dd>Server können Support für Client Hints bekanntgeben, indem das Accept-CH Header-Feld oder das entsprechende HTML {{htmlelement("meta")}} Element mit http-equiv Attribut benutzt wird (<a href="https://httpwg.org/http-extensions/client-hints.html#HTML5"><cite>[HTML5]</cite></a>).</dd>
+</dl>
+
+<dl>
+ <dt>{{HTTPHeader("Accept-CH-Lifetime")}} {{experimental_inline}}</dt>
+ <dd>Servers can ask the client to remember the set of Client Hints that the server supports for a specified period of time, to enable delivery of Client Hints on subsequent requests to the server’s origin (<a href="https://httpwg.org/http-extensions/client-hints.html#RFC6454"><cite>[RFC6454]</cite></a>).</dd>
+ <dt>{{HTTPHeader("Early-Data")}} {{experimental_inline}}</dt>
+ <dd>Indicates that the request has been conveyed in early data.</dd>
+</dl>
+
+<h2 id="Bedingungen">Bedingungen</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Last-Modified")}}</dt>
+ <dd>Ein Validator mit dem letzten Änderungsdatum der Ressource, mit welchem mehrere Versionen derselben Ressource miteinander verglichen werden. Es ist weniger genau als {{HTTPHeader("ETag")}}, aber in einigen Umgebungen einfacher zu berechnen. Bedingte Anforderungen, die {{HTTPHeader("If-Modified-Since")}} und {{HTTPHeader("If-Unmodified-Since")}} verwenden, verwenden diesen Wert, um das Verhalten der Anforderung zu ändern.</dd>
+ <dt>{{HTTPHeader("ETag")}}</dt>
+ <dd>Ein Validator für eine eindeutige Zeichenfolge, die die Version der Ressource identifiziert. Bedingte Anforderungen, die {{HTTPHeader("If-Match")}} und {{HTTPHeader("If-None-Match")}} verwenden, nutzen diesen Wert um das Verhalten der Anfrage zu verändern.</dd>
+ <dt>{{HTTPHeader("If-Match")}}</dt>
+ <dd>Knüpft die Anfrage an eine Bedingung und wendet die Methode nur dann an, wenn die gespeicherte Ressource einem der gegebenen ETags entspricht.</dd>
+ <dt>{{HTTPHeader("If-None-Match")}}</dt>
+ <dd>Knüpft die Anfrage an eine Bedingung und wendet die Methode nur dann an, wenn die gespeicherte Ressource keinem der gegebenen ETags entspricht. Dies kann dazu benutzt werden, um Caches zu aktualisieren (für sichere Anfragen) oder um zu verhindern, eine neue Ressource hochzuladen, wenn bereits eine existiert.</dd>
+ <dt>{{HTTPHeader("If-Modified-Since")}}</dt>
+ <dd>Knüpft die Anfrage an eine Bedingung und erwartet, dass die Entität nur dann übertragen wird, wenn sie nach einem gegebenem Datum modifiziert wurde. Dies kann dazu benutzt werden, nur dann Daten zu übertragen, wenn der Cache veraltet ist.</dd>
+ <dt>{{HTTPHeader("If-Unmodified-Since")}}</dt>
+ <dd>Knüpft die Anfrage an eine Bedingung und erwartet, dass die Entität nur dann übertragen wird, wenn sie nach einem gegebenem Datum nicht modifiziert wurde. Dies kann dazu benutzt werden, um die Stimmigkeit eines neuen Fragments eines bestimmten Bereichs mit vorherigen zu gewährleisten oder ein optimistisches Parallelitätskontrollsystem beim Modifizieren existierender Dokumente zu implementieren.</dd>
+ <dt>{{HTTPHeader("Vary")}}</dt>
+ <dd>Legt fest, wie zukünftige Anfrage Header abgeglichen werden sollen, um zu entscheiden, ob eine zwischengespeicherte Antwort verwendet werden kann, anstatt eine neue vom Ursprungsserver anzufordern.</dd>
+</dl>
+
+<h2 id="Verbindungsverwaltung">Verbindungsverwaltung</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Connection")}}</dt>
+ <dd>Steuert, ob die Netzwerkverbindung geöffnet bleiben soll, nachdem die aktuelle Transaktion beendet ist.</dd>
+ <dt>{{HTTPHeader("Keep-Alive")}}</dt>
+ <dd>Steuert, wie lange eine dauerhafte Verbindung geöffnet bleiben soll.</dd>
+</dl>
+
+<h2 id="Inhaltsverhandlung"><a href="/en-US/docs/Web/HTTP/Content_negotiation">Inhaltsverhandlung</a></h2>
+
+<dl>
+ <dt>{{HTTPHeader("Accept")}}</dt>
+ <dd>Setzt den Server darüber in Kenntnis, welche Art Daten zurückgesendet werden können (als MIME-Type).</dd>
+ <dt>{{HTTPHeader("Accept-Charset")}}</dt>
+ <dd>Setzt den Server darüber in Kenntnis, welchen Zeichensatz der Client versteht.</dd>
+ <dt>{{HTTPHeader("Accept-Encoding")}}</dt>
+ <dd>Setzt den Server über den Kodierungs-Algorithmus in Kenntnis, üblicherweise ein Kompressionsalgorithmus, der bei Rücksendung einer Ressource benutzt werden kann.</dd>
+ <dt>{{HTTPHeader("Accept-Language")}}</dt>
+ <dd>Setzt den Server über die Sprache in Kenntnis, in welcher er zurücksenden soll. Dies ist ein Hinweis und nicht zwangsweise unter vollständiger Kontrolle des Benutzers: der Server sollte stets darauf achten eine explizite Benutzerauswahl nicht zu überschreiben (etwa die ausgewählte Sprache einer Dropdown-Liste).</dd>
+</dl>
+
+<h2 id="Steuerung">Steuerung</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Expect")}}</dt>
+ <dd>Gibt an, welchen Anforderungen der Server erfüllen muss, um die Anfrage ordnungsgemäß bearbeiten zu können.</dd>
+ <dt>{{HTTPHeader("Max-Forwards")}}</dt>
+ <dd>Eine Ganzzahl, welche die maximal erlaubte Anzahl an Weiterleitungen festlegt. Bei jeder Weiterleitung durch ein Gateway oder einen Proxy wird der Wert um 1 reduziert. Erreicht er 0 bevor die Anfrage ihr Ziel erreicht wird diese verworfen.</dd>
+</dl>
+
+<h2 id="Cookies">Cookies</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Cookie")}}</dt>
+ <dd>Enthält gespeicherte <a href="/de/docs/Web/HTTP/Cookies">HTTP Cookies</a>, die zuvor vom Server mit dem Header {{HTTPHeader("Set-Cookie")}} gesendet wurden.</dd>
+ <dt>{{HTTPHeader("Set-Cookie")}}</dt>
+ <dd>Sendet Cookies vom Server an den Benutzer-Agenten.</dd>
+ <dt>{{HTTPHeader("Cookie2")}} {{obsolete_inline}}</dt>
+ <dd>Enthielt ein HTTP-Cookie, welches zuvor vom Server mit dem Header {{HTTPHeader("Set-Cookie2")}} gesendet wurde, gilt durch die Spezifikation jedoch mittlerweile als veraltet. Benutzen Sie stattdessen {{HTTPHeader("Cookie")}}.</dd>
+ <dt>{{HTTPHeader("Set-Cookie2")}} {{obsolete_inline}}</dt>
+ <dd>Sendete Cookies vom Server an den Benutzer-Agenten, gilt durch die Spezifikation jedoch mittlerweile als veraltet. Benutzen Sie stattdessen {{HTTPHeader("Set-Cookie")}}.</dd>
+</dl>
+
+<h2 id="Cross-origin_Resource_Sharing_(CORS)">Cross-origin Resource Sharing (CORS)</h2>
+
+<p><em>Erfahren Sie <a href="/de/docs/Web/HTTP/CORS">hier</a> mehr zu Cross-origin Resource Sharing (CORS).</em></p>
+
+<dl>
+ <dt>{{HTTPHeader("Access-Control-Allow-Origin")}}</dt>
+ <dd>Gibt an, ob die Antwort geteilt werden kann.</dd>
+ <dt>{{HTTPHeader("Access-Control-Allow-Credentials")}}</dt>
+ <dd>Gibt an, ob die Antwort auf die Anfrage verfügbar gemacht werden kann, wenn das Kennzeichen für Anmeldedaten wahr ist.</dd>
+ <dt>{{HTTPHeader("Access-Control-Allow-Headers")}}</dt>
+ <dd>Wird als Antwort auf eine Vor-Anfrage verwendet, um anzugeben, welche HTTP-Header bei der tatsächlichen Anfrage verwendet werden können.</dd>
+ <dt>{{HTTPHeader("Access-Control-Allow-Methods")}}</dt>
+ <dd>Gibt die Methode(n) an, die beim Zugriff auf die Ressource als Antwort auf eine Vor-Anfrage zulässig sind.</dd>
+ <dt>{{HTTPHeader("Access-Control-Expose-Headers")}}</dt>
+ <dd>Gibt an, welche Header als Teil der Antwort verfügbar gemacht werden können, indem ihre Namen aufgelistet werden.</dd>
+ <dt>{{HTTPHeader("Access-Control-Max-Age")}}</dt>
+ <dd>Gibt an, wie lange die Ergebnisse einer Vor-Anfrage zwischengespeichert werden können.</dd>
+ <dt>{{HTTPHeader("Access-Control-Request-Headers")}}</dt>
+ <dd>Wird verwendet, wenn eine Vor-Anfrage ausgegeben wird, um dem Server mitzuteilen, welche HTTP-Header bei der tatsächlichen Anforderung verwendet werden.</dd>
+ <dt>{{HTTPHeader("Access-Control-Request-Method")}}</dt>
+ <dd>Wird bei der Ausgabe einer Vor-Anfrage verwendet, um dem Server mitzuteilen, welche <a href="/de/docs/Web/HTTP/Methods">HTTP-Methode</a> bei der tatsächlichen Anforderung verwendet wird.</dd>
+ <dt>{{HTTPHeader("Cross-Origin-Resource-Policy")}}</dt>
+ <dd>Der Header <a href="https://fetch.spec.whatwg.org/#cross-origin-resource-policy-header">Cross-Origin-Resource-Policy</a> verhindert, dass andere Domänen die Ressourcen laden.</dd>
+</dl>
+
+<dl>
+ <dt>{{HTTPHeader("Origin")}}</dt>
+ <dd>Gibt an, woher ein Abruf stammt.</dd>
+ <dt>{{HTTPHeader("Timing-Allow-Origin")}}</dt>
+ <dd>Gibt die Ursprünge an, die Werte von Attributen anzeigen dürfen, die über Funktionen der <a href="/de/docs/Web/API/Resource_Timing_API">Resource Timing API</a> abgerufen werden, die andernfalls aufgrund von Ursprungsbeschränkungen als Null gemeldet werden.</dd>
+ <dt>{{HTTPHeader("X-Permitted-Cross-Domain-Policies")}}</dt>
+ <dd>Gibt an, ob eine domänenübergreifende Richtliniendatei (XML) zulässig ist. In der Datei kann eine Richtlinie definiert werden, mit der Web-Clients wie Adobe Flash Player oder Adobe Acrobat (z. B. PDF) die Erlaubnis erteilt werden darf, Daten zwischen Domänen zu verarbeiten.</dd>
+</dl>
+
+<h2 id="Do_Not_Track">Do Not Track</h2>
+
+<dl>
+ <dt>{{HTTPHeader("DNT")}}</dt>
+ <dd>Wird verwendet, um die Tracking-Einstellung des Benutzers auszudrücken.</dd>
+ <dt>{{HTTPHeader("Tk")}}</dt>
+ <dd>Gibt den Tracking-Status an, der auf die entsprechende Anfrage angewendet wurde.</dd>
+</dl>
+
+<h2 id="Downloads">Downloads</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Content-Disposition")}}</dt>
+ <dd>Gibt an, ob die übertragene Ressource inline angezeigt (Standardverhalten, wenn der Header nicht vorhanden ist) oder als Download behandelt werden und der Browser einen "Speichern unter" Dialog anzeigen soll.</dd>
+</dl>
+
+<h2 id="Informationen_zum_Nachrichtenrumpf_(Body)">Informationen zum Nachrichtenrumpf (Body)</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Content-Length")}}</dt>
+ <dd>Gibt die Größe des Body der Entität in Oktetten (Anzahl an 8-Bit Bytes) an, die an den Empfänger gesendet werden.</dd>
+ <dt>{{HTTPHeader("Content-Type")}}</dt>
+ <dd>Gibt den Inhaltstyp der Ressource an.</dd>
+ <dt>{{HTTPHeader("Content-Encoding")}}</dt>
+ <dd>Gibt den Kompressionsalgortihmus an.</dd>
+ <dt>{{HTTPHeader("Content-Language")}}</dt>
+ <dd>Beschreibt die Sprache(n), die für das Publikum bestimmt ist/sind, damit der Benutzer nach seiner bevorzugten Sprache unterscheiden kann.</dd>
+ <dt>{{HTTPHeader("Content-Location")}}</dt>
+ <dd>Gibt einen alternativen Ort für die zurückgegebenen Daten an.</dd>
+</dl>
+
+<h2 id="Proxys">Proxys</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Forwarded")}}</dt>
+ <dd>Enthält Informationen Client zugewandten Seite von Proxyservern, die geändert oder verloren geht, wenn ein Proxy am Pfad der Anfrage beteiligt ist.</dd>
+ <dt>{{HTTPHeader("X-Forwarded-For")}} {{non-standard_inline}}</dt>
+ <dd>Gibt die ursprünglichen IP-Adressen eines Clients an, der über einen HTTP-Proxy oder einen Load Balancer eine Verbindung zu einem Webserver herstellt.</dd>
+ <dt>{{HTTPHeader("X-Forwarded-Host")}} {{non-standard_inline}}</dt>
+ <dd>Gibt den ursprünglichen Host an, den ein Client angefragt hat, um eine Verbindung zu Ihrem Proxy oder Load Balancer herzustellen.</dd>
+ <dt>{{HTTPHeader("X-Forwarded-Proto")}} {{non-standard_inline}}</dt>
+ <dd>Gibt das Protokoll (HTTP oder HTTPS) an, mit dem ein Client eine Verbindung zu Ihrem Proxy oder Load Balancer herstellt.</dd>
+ <dt>{{HTTPHeader("Via")}}</dt>
+ <dd>Wird durch sowohl durch Vorwärts- als auch Rückwärtsproxys hinzugefügt und kann in den Anfrage Headern als auch den Antwort Headern erscheinen und gibt die Proxys an, über die die Nachricht versendet wurde.</dd>
+</dl>
+
+<h2 id="Umleitungen">Umleitungen</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Location")}}</dt>
+ <dd>Gibt die URL an, zu der eine Seite umgeleitet werden soll.</dd>
+</dl>
+
+<h2 id="Anfragenkontext">Anfragenkontext</h2>
+
+<dl>
+ <dt>{{HTTPHeader("From")}}</dt>
+ <dd>Enthält eine Internet-E-Mail-Adresse für einen Benutzer, der den anfordernden Benutzer-Agenten steuert.</dd>
+ <dt>{{HTTPHeader("Host")}}</dt>
+ <dd>Gibt den Domänennamen des Servers (für virtuelles Hosting) und (optional) die TCP-Portnummer an, auf welcher der Server lauscht.</dd>
+ <dt>{{HTTPHeader("Referer")}}</dt>
+ <dd>Die Adresse der vorherigen Webseite, von der aus ein Link auf die aktuell angeforderte Seite folgt.</dd>
+ <dt>{{HTTPHeader("Referrer-Policy")}}</dt>
+ <dd>Gibt an, welche Referrer-Informationen im Header {{HTTPHeader("Referer")}} mit den gesendeten Anfragen enthalten sein sollen.</dd>
+ <dt>{{HTTPHeader("User-Agent")}}</dt>
+ <dd>Enthält einen charakteristischen String, mit der die Netzwerkprotokollpartner den Anwendungstyp, das Betriebssystem, den Softwareanbieter oder die Softwareversion des anfragenden Benutzer-Agenten bestimmen können. Siehe auch die <a href="/de/docs/Web/HTTP/Headers/User-Agent/Firefox">Benutzer-Agenten-String Referenz von Firefox</a>.</dd>
+</dl>
+
+<h2 id="Antwortkontext">Antwortkontext</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Allow")}}</dt>
+ <dd>Listet die von einer Ressource unterstützten HTTP-Anfragemethoden auf.</dd>
+ <dt>{{HTTPHeader("Server")}}</dt>
+ <dd>Enthält Informationen zu der Software, die der Ursprungsserver zur Bearbeitung der Anfrage verwendet.</dd>
+</dl>
+
+<h2 id="Bereichsanfragen">Bereichsanfragen</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Accept-Ranges")}}</dt>
+ <dd>Gibt an, ob der Server Bereichsanfragen unterstützt und wenn ja, in welcher Einheit der Bereich ausgedrückt werden kann.</dd>
+ <dt>{{HTTPHeader("Range")}}</dt>
+ <dd>Gibt den Teil eines Dokuments an, den der Server zurückgeben soll.</dd>
+ <dt>{{HTTPHeader("If-Range")}}</dt>
+ <dd>Erzeugt eine bedingte Bereichanfrage, die nur erfüllt wird, wenn das gegebene ETag oder Datum mit der entfernten Ressource übereinstimmt. Kann verwendet werden, um das Herunterladen von zwei Bereichen von einer inkompatiblen Version der Ressource zu verhindern.</dd>
+ <dt>{{HTTPHeader("Content-Range")}}</dt>
+ <dd>Gibt an, welchem Bereich des Body der gesendete Inhalt angehört.</dd>
+</dl>
+
+<h2 id="Sicherheit">Sicherheit</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Content-Security-Policy")}} ({{Glossary("CSP")}})</dt>
+ <dd>Steuert Ressourcen, die der Benutzer-Agent für eine bestimmte Seite laden darf.</dd>
+ <dt>{{HTTPHeader("Content-Security-Policy-Report-Only")}}</dt>
+ <dd>Webentwickler können mit Richtlinien experimentieren, indem sie ihre Auswirkungen überwachen, jedoch nicht durchsetzen. Berichte über Verstöße bestehen aus {{Glossary("JSON")}}-Dokumenten, die über eine HTTP <code>POST</code> Anfrage an die angegebene URI gesendet werden.</dd>
+ <dt>{{HTTPHeader("Expect-CT")}}</dt>
+ <dd>Erlaubt es Websites, sich für die Berichterstellung und/oder Durchsetzung der Zertifikattransparenzanforderungen zu entscheiden. Dadurch wird verhindert, dass falsch ausgestellte Zertifikate für eine Seite unbemerkt bleiben. Wenn eine Seite den Expect-CT-Header aktiviert, fordert sie den Browser auf zu überprüfen, ob alle Zertifikate für diese Seite in öffentlichen CT-Protokollen angezeigt werden.</dd>
+ <dt>{{HTTPHeader("Feature-Policy")}}</dt>
+ <dd>Stellt einen Mechanismus bereit, um die Verwendung von Browserfunktionen in seinem eigenen Frame und in eingebetteten iFrames zuzulassen und zu verbieten.</dd>
+</dl>
+
+<dl>
+ <dt>{{HTTPHeader("Public-Key-Pins")}} ({{Glossary("HPKP")}})</dt>
+ <dd>Ordnet einen bestimmten kryptografischen öffentlichen Schlüssel einem bestimmten Webserver zu, um das Risiko von {{Glossary("MITM", "Man-in-the-Middle")}}-Angriffen mit gefälschten Zertifikaten zu verringern.</dd>
+ <dt>{{HTTPHeader("Public-Key-Pins-Report-Only")}}</dt>
+ <dd>Sendet Berichte an die im Header angegebene URI zur Protokollierung, während Clients weiterhin eine Verbindung zum Server herstellen können, selbst wenn gegen das Pinning verstoßen wurde.</dd>
+</dl>
+
+<dl>
+ <dt>{{HTTPHeader("Strict-Transport-Security")}} ({{Glossary("HSTS")}})</dt>
+ <dd>Erzwingt die Kommunikation über HTTPS statt HTTP.</dd>
+ <dt>{{HTTPHeader("Upgrade-Insecure-Requests")}}</dt>
+ <dd>Sendet ein Signal an den Server, dass der Client eine verschlüsselte und authentifizierte Antwort bevorzugt und dass die Anweisung {{CSP("upgrade-insecure-request")}} erfolgreich verarbeitet werden kann.</dd>
+</dl>
+
+<dl>
+ <dt>{{HTTPHeader("X-Content-Type-Options")}}</dt>
+ <dd>Deaktiviert das Erraten des MIME-Types durch den Browser und zwingt ihn den MIME-Type im Header {{HTTPHeader("Content-Type")}} zu benutzen.</dd>
+</dl>
+
+<dl>
+ <dt>{{HTTPHeader("X-Download-Options")}}</dt>
+ <dd>Gibt an, dass der Browser (Internet Explorer) nicht die Option zum "Öffnen" einer aus einer Anwendung heruntergeladenen Datei anzeigen sollte, um Phishing-Angriffe zu verhindern, da die Datei sonst im Kontext der Anwendung ausgeführt werden kann.</dd>
+</dl>
+
+<dl>
+ <dt>{{HTTPHeader("X-Frame-Options")}} (XFO)</dt>
+ <dd>Gibt an, ob es einem Browser erlaubt wird eine Seite in einem {{HTMLElement("frame")}}, {{HTMLElement("iframe")}}, {{HTMLElement("embed")}} oder {{HTMLElement("object")}} Element darzustellen.</dd>
+ <dt>{{HTTPHeader("X-Powered-By")}}</dt>
+ <dd>Kann durch Hosting-Umgebungen oder andere Frameworks festgelegt werden und enthält Informationen zu diesen, ohne der Anwendung oder ihren Besuchern einen Nutzen zu bieten. Heben Sie diesen Header auf, um zu verhindern mögliche Schwachstellen preiszugeben.</dd>
+ <dt>{{HTTPHeader("X-XSS-Protection")}}</dt>
+ <dd>Aktiviert Seiten-übergreifende Skript-Filterung.</dd>
+</dl>
+
+<h2 id="Vom_Server_gesendete_Ereignisse">Vom Server gesendete Ereignisse</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Last-Event-ID")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("NEL")}} {{experimental_inline}}</dt>
+ <dd>Definiert einen Mechanismus, mit dem Entwickler eine Netzwerkfehler-Berichterstattungs-Richtlinie deklarieren können.</dd>
+ <dt>{{HTTPHeader("Ping-From")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Ping-To")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Report-To")}}</dt>
+ <dd>Kann verwendet werden, um einen Server-Endpunkt anzugeben, an den der Browser Warnmeldungen und Fehlerberichte senden soll.</dd>
+</dl>
+
+<h2 id="Übertragungskodierung">Übertragungskodierung</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Transfer-Encoding")}}</dt>
+ <dd>Gibt die Form der Kodierung an, die zum sicheren Übertragen der Entität an den Benutzer verwendet wird.</dd>
+ <dt>{{HTTPHeader("TE")}}</dt>
+ <dd>Gibt die Übertragungskodierungen an, die der Benutzer-Agent akzeptiert.</dd>
+ <dt>{{HTTPHeader("Trailer")}}</dt>
+ <dd>Ermöglicht dem Absender, am Ende einer Nachricht in mehreren Teilen zusätzliche Felder einzufügen.</dd>
+</dl>
+
+<h2 id="WebSockets">WebSockets</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Sec-WebSocket-Key")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Sec-WebSocket-Extensions")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Sec-WebSocket-Accept")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Sec-WebSocket-Protocol")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Sec-WebSocket-Version")}}</dt>
+ <dd>...</dd>
+</dl>
+
+<h2 id="Sonstiges">Sonstiges</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Accept-Push-Policy")}} {{experimental_inline}}</dt>
+ <dd>Ein Client kann die gewünschte Push-Richtlinie für eine Anfrage ausdrücken, indem er ein Header-Feld <code><a href="https://tools.ietf.org/html/draft-ruellan-http-accept-push-policy-00#section-3.1">Accept-Push-Policy</a></code> mitsendet.</dd>
+ <dt>{{HTTPHeader("Accept-Signature")}} {{experimental_inline}}</dt>
+ <dd>Ein Client kann das Header-Feld <code><a href="https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html#rfc.section.3.7">Accept-Signature</a></code> senden, um anzugeben dass er beabsichtigt von verfügbaren Signaturen gebrauch zu machen und anzuzeigen, welche Art von Signaturen er unterstützt.</dd>
+ <dt>{{HTTPHeader("Alt-Svc")}}</dt>
+ <dd>Kann verwendet werden, um alternative Wege aufzulisten, um diesen Dienst zu erreichen.</dd>
+ <dt>{{HTTPHeader("Date")}}</dt>
+ <dd>Enthält das Datum und die Uhrzeit, zu dem die Nachricht erstellt wurde.</dd>
+ <dt>{{HTTPHeader("Large-Allocation")}}</dt>
+ <dd>Setzt den Browser darüber in Kenntnis, dass die zu ladende Seite eine große Zuordnung durchführen möchte.</dd>
+ <dt>{{HTTPHeader("Link")}}</dt>
+ <dd>Das <code><a href="https://tools.ietf.org/html/rfc5988#section-5">Link</a></code> Entitäten-Header-Feld bietet eine Möglichkeit, eine oder mehrere Links in HTTP-Headern zu serialisieren. Es entspricht semantisch dem HTML Element {{HTMLElement("link")}}.</dd>
+ <dt>{{HTTPHeader("Push-Policy")}} {{experimental_inline}}</dt>
+ <dd>Eine <code><a href="https://tools.ietf.org/html/draft-ruellan-http-accept-push-policy-00#section-3.2">Push-Policy</a></code> definiert das Serververhalten bezüglich Push bei der Verarbeitung einer Anfrage.</dd>
+</dl>
+
+<dl>
+ <dt>{{HTTPHeader("Retry-After")}}</dt>
+ <dd>Gibt an, wie lange der Benutzer-Agent warten soll, bevor eine Folgeanfrage gesendet wird.</dd>
+ <dt>{{HTTPHeader("Signature")}} {{experimental_inline}}</dt>
+ <dd>Das <code><a href="https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html#rfc.section.3.1">Signature</a></code> Header-Feld enthält eine Liste von Signaturen für einen Austausch, von welchem jeder Informationen darüber enthält, wie die Autorität dieser Signatur ermittelt und aktualisiert werden kann.</dd>
+ <dt>{{HTTPHeader("Signed-Headers")}} {{experimental_inline}}</dt>
+ <dd>Das <code><a href="https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html#rfc.section.5.1.2">Signed-Headers</a></code> Header-Feld identifiziert eine geordnete Liste von Antwort-Header-Feldern, die in eine Signatur aufgenommen werden sollen.</dd>
+ <dt>{{HTTPHeader("Server-Timing")}}</dt>
+ <dd>Kommuniziert eine oder mehrere Metriken und Beschreibungen für den gegebenen Anfrage-Antwort-Zyklus.</dd>
+ <dt>{{HTTPHeader("SourceMap")}}</dt>
+ <dd>Knüpft generierten Code an eine <a href="/de/docs/Tools/Debugger/How_to/Use_a_source_map">Source Map</a>.</dd>
+ <dt>{{HTTPHeader("Upgrade")}}</dt>
+ <dd>Das relevante RFC-Dokument für das <a href="https://tools.ietf.org/html/rfc7230#section-6.7"><code>Upgrade</code> Header-Feld ist RFC 7230, Abschnitt 6.7</a>. Der Standard legt Regeln für das Upgrade oder das Wechseln zu einem anderen Protokoll auf der aktuellen Client-, Server- und Transportprotokollverbindung fest. Mit diesem Header-Standard kann ein Client beispielsweise von HTTP 1.1 zu HTTP 2.0 wechseln, vorausgesetzt der Server beschließt, das <code>Upgrade</code> Header-Feld zu bestätigen und zu implementieren. Keine der Parteien muss die Bedingungen akzeptieren, die im <code>Upgrade</code> Header-Feld angegeben sind. Es kann in Client- und Server-Headern verwendet werden. Wenn das <code>Upgrade</code> Header-Feld angegeben ist, MUSS der Absender auch das <code>Connection</code> Header-Feld mit der angegebenen <code>Upgrade</code> Option senden. Einzelheiten zum <code>Connection</code> Header-Feld finden Sie in <a href="https://tools.ietf.org/html/rfc7230#section-6.1">Abschnitt 6.1</a> des zuvor genannten RFC.</dd>
+ <dt>{{HTTPHeader("X-DNS-Prefetch-Control")}}</dt>
+ <dd>Steuert das DNS-Prefetching, eine Funktion, mit der Browser proaktiv eine Namensauflösung sowohl für Links durchführen, denen der Benutzer folgen könnte, als auch URLs für Elemente, auf die im Dokument verwiesen wird, einschließlich Bilder, CSS, JavaScript, usw.</dd>
+ <dt>{{HTTPHeader("X-Firefox-Spdy")}} {{deprecated_inline}} {{non-standard_inline}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("X-Pingback")}} {{non-standard_inline}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("X-Requested-With")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("X-Robots-Tag")}} {{non-standard_inline}}</dt>
+ <dd>Wird verwendet, um anzugeben, wie eine Webseite in öffentlichen Suchmaschinenergebnissen indiziert werden soll. Die Kopfzeile entspricht effektiv <code>&lt;meta name="robots" content="..."&gt;</code>.</dd>
+ <dt>{{HTTPHeader("X-UA-Compatible")}} {{non-standard_inline}}</dt>
+ <dd>Wird von Internet Explorer verwendet, um zu signalisieren, welcher Dokumentmodus verwendet werden soll.</dd>
+</dl>
+
+<h2 id="Mitwirken">Mitwirken</h2>
+
+<p>Sie können helfen, indem Sie <a href="/de/docs/MDN/Contribute/Howto/Document_an_HTTP_header">neue Einträge schreiben</a> oder die vorhandenen verbessern.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{interwiki("wikipedia", "Liste der HTTP-Headerfelder")}} auf Wikipedia</li>
+ <li><a href="https://www.iana.org/assignments/message-headers/perm-headers.html">IANA Register</a> (Englisch)</li>
+ <li><a href="https://httpwg.org/specs/">HTTP Arbeitsgruppe</a> (Englisch)</li>
+</ul>
diff --git a/files/de/web/http/headers/referer/index.html b/files/de/web/http/headers/referer/index.html
new file mode 100644
index 0000000000..d61fa0c2f4
--- /dev/null
+++ b/files/de/web/http/headers/referer/index.html
@@ -0,0 +1,87 @@
+---
+title: Referer
+slug: Web/HTTP/Headers/Referer
+tags:
+  - Anfrage
+  - HTTP
+  - Referenz
+  - header
+  - referer
+  - referrer
+translation_of: Web/HTTP/Headers/Referer
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Der <code><strong>Referer</strong></code> Anfrage-Header beinhaltet die Adresse von der vorher besuchten Webseite, welche einen Link zur aktuell angefragten Seite beinhaltet. Der <code><strong>Referer</strong></code>-Header erlaubt es Server zu sehen, von wo die Personen sie Besuchen und diese Daten zum Beispiel zur Analyse, Logging oder optimiertes Caching zu benutzen.</p>
+
+<div class="warning">
+<p><strong>Wichtig</strong>: Auch wenn dieser Header nützlich ist, kann es ungewollte Konsequenzen für die Sicherheit und Privatsphäre beinhalten. Siehe <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Referer_header:_privacy_and_security_concerns">Referer header: privacy and security concerns</a> für mehr Informationen und Milderungen</p>
+</div>
+
+<p>Merke, dass das Wort referer falsch geschrieben ist. Das richtige Wort ist "referrer". Siehe {{interwiki("wikipedia", "Referrer", "HTTP referer on Wikipedia")}} für mehr Details.</p>
+
+<p>Ein <code>Referer</code>-Header wird von einem Browser nicht gesendet, wenn:</p>
+
+<ul>
+ <li>Der verweisende Ressource ist eine lokale "file" oder "data" URI ist.</li>
+ <li>Eine unsichere HTTP-Anfrage benutzt wird und die verweisende Seite in einem sicheren Protokoll (HTTPS) empfangen wurde.</li>
+</ul>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header-Typ</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Referer: &lt;url&gt;
+</pre>
+
+<h2 id="Richtlinien">Richtlinien</h2>
+
+<dl>
+ <dt>&lt;url&gt;</dt>
+ <dd>Eine absolute oder partielle Adresse von der vorherigen Webseite, von welcher ein Link zur aktuell angefragen Seite gefolgt wurde. URL-Fragmente (z.B.: "#section") und userinfo (z.B.: "username:password" in "https://username:password@example.com/foo/bar/") sind nicht enthalten.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre>Referer: https://developer.mozilla.org/en-US/docs/Web/JavaScript</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Titel</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("7231", "Referer", "5.5.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<p class="hidden">Die Kompatibilitätstabelle auf dieser Seite ist Generiert von struktuierten Daten. Wenn Du zu den Daten beitragen möchtest, schauen sie hier: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und sende uns ein Pull-request.</p>
+
+<p>{{Compat("http.headers.Referer")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{interwiki("wikipedia", "HTTP_referer", "HTTP referer on Wikipedia")}}</li>
+ <li>{{HTTPHeader("Referrer-Policy")}}</li>
+</ul>
diff --git a/files/de/web/http/headers/server/index.html b/files/de/web/http/headers/server/index.html
new file mode 100644
index 0000000000..fbd162d742
--- /dev/null
+++ b/files/de/web/http/headers/server/index.html
@@ -0,0 +1,69 @@
+---
+title: Server
+slug: Web/HTTP/Headers/Server
+tags:
+  - HTTP
+  - header
+translation_of: Web/HTTP/Headers/Server
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Der <code><strong>Server</strong></code>-Header beinhaltet Informationen über die Software, die von dem Ursprungsserver verwendet wurde, um die Anfrage zu behandeln.</p>
+
+<p>Zu lange und detailierte Server-Werte sollten vermieden werden, da sie möglicherweise interne Implementations-Details herausgeben, welche es (ein wenig) einfacher für Angreifer machen, bekannte Sicherheitslücken zu finden und auszunutzen.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header-Typ</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>Nein</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Server: &lt;produkt&gt;
+</pre>
+
+<h2 id="Directives">Directives</h2>
+
+<dl>
+ <dt>&lt;produkt&gt;</dt>
+ <dd>Der Name der Software oder das (Unter-)Produkt, welches mit Anfragen umgeht.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre>Server: Apache/2.4.1 (Unix)</pre>
+
+<h2 id="Specifikationen">Specifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Server", "7.4.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Unterstützung">Browser-Unterstützung</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Server")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{HTTPHeader("Allow")}}</li>
+</ul>
diff --git a/files/de/web/http/headers/set-cookie/index.html b/files/de/web/http/headers/set-cookie/index.html
new file mode 100644
index 0000000000..917e705959
--- /dev/null
+++ b/files/de/web/http/headers/set-cookie/index.html
@@ -0,0 +1,225 @@
+---
+title: Set-Cookie
+slug: Web/HTTP/Headers/Set-Cookie
+tags:
+  - Cookies
+  - HTTP
+  - NeedsTranslation
+  - Reference
+  - Response
+  - TopicStub
+  - header
+  - samesite
+translation_of: Web/HTTP/Headers/Set-Cookie
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="seoSummary">The <strong><code>Set-Cookie</code></strong> HTTP response header is used to send a cookie from the server to the user agent, so the user agent can send it back to the server later. To send multiple cookies, multiple <strong><code>Set-Cookie</code></strong></span> headers should be sent in the same response.</p>
+
+<div class="blockIndicator warning">
+<p>Browsers block frontend JavaScript code from accessing the <code>Set Cookie</code> header, as required by the Fetch spec, which defines <code>Set-Cookie</code> as a <a href="https://fetch.spec.whatwg.org/#forbidden-response-header-name">forbidden response-header name</a> that <a href="https://fetch.spec.whatwg.org/#ref-for-forbidden-response-header-name%E2%91%A0">must be filtered out</a> from any response exposed to frontend code.</p>
+</div>
+
+<p>For more information, see the guide on <a href="/en-US/docs/Web/HTTP/Cookies">Using HTTP cookies</a>.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+  <tr>
+   <th scope="row"><a href="https://fetch.spec.whatwg.org/#forbidden-response-header-name">Forbidden response-header name</a></th>
+   <td>yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; Expires=&lt;date&gt;
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; Max-Age=&lt;non-zero-digit&gt;
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; Domain=&lt;domain-value&gt;
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; Path=&lt;path-value&gt;
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; Secure
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; HttpOnly
+
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; SameSite=Strict
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; SameSite=Lax
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; SameSite=None; Secure
+
+// Multiple attributes are also possible, for example:
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; Domain=&lt;domain-value&gt;; Secure; HttpOnly
+</pre>
+
+<h2 id="Attributes">Attributes</h2>
+
+<dl>
+ <dt><code>&lt;cookie-name&gt;=&lt;cookie-value&gt;</code></dt>
+ <dd>A cookie begins with a name-value pair:
+ <ul>
+  <li>A <code>&lt;cookie-name&gt;</code> can be any US-ASCII characters, except control characters, spaces, or tabs. It also must not contain a separator character like the following: <code>( ) &lt; &gt; @ , ; : \ " / [ ] ? = { }</code>.</li>
+  <li>A <code>&lt;cookie-value&gt;</code> can optionally be wrapped in double quotes and include any US-ASCII characters excluding control characters, {{glossary("Whitespace")}}, double quotes, comma, semicolon, and backslash. <strong>Encoding</strong>: Many implementations perform URL encoding on cookie values, however it is not required per the RFC specification. It does help satisfying the requirements about which characters are allowed for &lt;cookie-value&gt; though.</li>
+  <li><strong><code>__Secure-</code> prefix</strong>: Cookies names starting with<code> __Secure-</code> (dash is part of the prefix) must be set with the <code>secure</code> flag from a secure page (HTTPS).</li>
+  <li><strong><code>__Host-</code> prefix</strong>: Cookies with names starting with <code>__Host-</code> must be set with the <code>secure</code> flag, must be from a secure page (HTTPS), must not have a domain specified (and therefore aren't sent to subdomains) and the path must be <code>/</code>.</li>
+ </ul>
+ </dd>
+ <dt><code>Expires=&lt;date&gt;</code> {{optional_inline}}</dt>
+ <dd>
+ <p>The maximum lifetime of the cookie as an HTTP-date timestamp. See {{HTTPHeader("Date")}} for the required formatting.</p>
+
+ <p>If unspecified, the cookie becomes a <strong>session cookie</strong>. A session finishes when the client shuts down, and session cookies will be removed.</p>
+
+ <div class="blockIndicator warning">
+ <p><strong>Warning:</strong> Many web browsers have a <em>session restore</em> feature that will save all tabs and restore them next time the browser is used. Session cookies will also be restored, as if the browser was never closed.</p>
+ </div>
+
+ <p>When an Expires date is set, the deadline is relative to the <em>client</em> the cookie is being set on, not the server.</p>
+ </dd>
+ <dt><code>Max-Age=&lt;number&gt; </code>{{optional_inline}}</dt>
+ <dd>Number of seconds until the cookie expires. A zero or negative number will expire the cookie immediately. If both <code>Expires</code> and <code>Max-Age</code> are set, <code>Max-Age</code> has precedence.</dd>
+ <dt><code>Domain=&lt;domain-value&gt;</code> {{optional_inline}}</dt>
+ <dd>Host to which the cookie will be sent.
+ <ul>
+  <li>If omitted, defaults to the host of the current document URL, not including subdomains.</li>
+  <li>Contrary to earlier specifications, leading dots in domain names (<code>.example.com</code>) are ignored.</li>
+  <li>Multiple host/domain values are <em>not</em> allowed, but if a domain <em>is</em> specified, then subdomains are always included.</li>
+ </ul>
+ </dd>
+ <dt><code>Path=&lt;path-value&gt;</code> {{optional_inline}}</dt>
+ <dd>A path that must exist in the requested URL, or the browser won't send the <code>Cookie</code> header.</dd>
+ <dd>The forward slash (<code>/</code>) character is interpreted as a directory separator, and subdirectories will be matched as well: for <code>Path=/docs</code>, <code>/docs</code>, <code>/docs/Web/</code>, and <code>/docs/Web/HTTP</code> will all match.</dd>
+ <dt id="Secure"><code>Secure</code> {{optional_inline}}</dt>
+ <dd>Cookie is only sent to the server when a request is made with the <code>https:</code> scheme (except on localhost), and therefore is more resistent to <a href="https://wiki.developer.mozilla.org/en-US/docs/Glossary/MitM">man-in-the-middle</a> attacks.
+ <p class="note"><strong>Note:</strong> Do not assume that <code>Secure</code> prevents all access to sensitive information in cookies (session keys, login details, etc.). Cookies with this attribute can still be read/modified with access to the client's hard disk, or from JavaScript if the <code>HttpOnly</code> cookie attribute is not set.</p>
+
+ <p class="note"><strong>Note:</strong> Insecure sites (<code>http:</code>) can't set cookies with the <code>Secure</code> attribute (since Chrome 52 and Firefox 52). For Firefox, the <code>https:</code> requirements are ignored when the <code>Secure</code> attribute is set by localhost (since Firefox 75).</p>
+ </dd>
+ <dt id="HttpOnly"><code>HttpOnly</code> {{optional_inline}}</dt>
+ <dd>Forbids JavaScript from accessing the cookie, for example, through the {{domxref("Document.cookie")}} property. Note that a cookie that has been created with HttpOnly will still be sent with JavaScript-initiated requests, e.g. when calling {{domxref("XMLHttpRequest.send()")}} or {{domxref("fetch()")}}. This mitigates attacks against cross-site scripting ({{Glossary("XSS")}}).</dd>
+ <dt id="SameSite"><code>SameSite=&lt;samesite-value&gt;</code> {{optional_inline}}</dt>
+ <dd>Controls whether a cookie is sent with cross-origin requests, providing some protection against cross-site request forgery attacks ({{Glossary("CSRF")}}).</dd>
+ <dd>
+ <div class="note">
+ <p>Standards related to the <a href="/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite">SameSite Cookies</a> recently changed such that:</p>
+
+ <ol>
+  <li>The cookie-sending behaviour if <code>SameSite</code> is not specified is <code>SameSite=Lax</code>. Previously the default was that cookies were sent for all requests.</li>
+  <li>Cookies with <code>SameSite=None</code> must now<br>
+   also specify the <code>Secure</code> attribute (i.e. they require a secure context).</li>
+ </ol>
+
+ <p>The options below covers the new behaviour. See the <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite#Browser_compatibility">Browser compatibility</a> table for information about specific browser implementation (rows: "<code>SameSite</code>: Defaults to <code>Lax</code>" and "<code>SameSite</code>: Secure context required").</p>
+ </div>
+ Inline options are:
+
+ <ul>
+  <li><code>Strict</code>: The browser sends the cookie only for same-site requests (that is, requests originating from the same site that set the cookie). If the request originated from a different URL than the current one, no cookies with the <code>SameSite=Strict</code> attribute are sent.</li>
+  <li><code>Lax</code>: The cookie is not sent on cross-site requests, such as calls to load images or frames, but is sent when a user is navigating to the origin site from an external site (e.g. if following a link).<br>
+   This is the default behaviour if the <code>SameSite</code> attribute is not specified.</li>
+  <li><code>None</code>: The browser sends the cookie with both cross-site and same-site requests. The <code>Secure</code> attribute must also be set when <code>SameSite=None</code>!</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Session_cookie">Session cookie</h3>
+
+<p><strong>Session cookies</strong> are removed when the client shuts down. Cookies are session cookies if they don't specify the <code>Expires</code> or <code>Max-Age</code> attributes.</p>
+
+<pre class="notranslate">Set-Cookie: sessionId=38afes7a8</pre>
+
+<h3 id="Permanent_cookie">Permanent cookie</h3>
+
+<p>Instead of expiring when the client is closed, <strong>permanent cookies</strong> expire at a specific date (<code>Expires</code>) or after a specific length of time (<code>Max-Age</code>).</p>
+
+<pre class="notranslate">Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT
+</pre>
+
+<pre class="notranslate">Set-Cookie: id=a3fWa; Max-Age=2592000</pre>
+
+<h3 id="Invalid_domains">Invalid domains</h3>
+
+<p>A cookie for a domain that does not include the server that set it <a href="https://tools.ietf.org/html/rfc6265#section-4.1.2.3">should be rejected by the user agent</a>.</p>
+
+<p>The following cookie will be rejected if set by a server hosted on <code>originalcompany.com</code>:</p>
+
+<pre class="notranslate">Set-Cookie: qwerty=219ffwef9w0f; Domain=somecompany.co.uk</pre>
+
+<p>A cookie for a sub domain of the serving domain will be rejected.</p>
+
+<p>The following cookie will be rejected if set by a server hosted on <code>example.com</code>:</p>
+
+<pre class="notranslate">Set-Cookie: sessionId=e8bb43229de9; Domain=foo.example.com</pre>
+
+<h3 id="Cookie_prefixes">Cookie prefixes</h3>
+
+<p>Cookies names prefixed with <code>__Secure-</code> or <code>__Host-</code> can be used only if they are set with the <code>secure</code> attribute from a secure (HTTPS) origin.</p>
+
+<p>In addition, cookies with the <code>__Host-</code> prefix must have a path of <code>/</code> (meaning any path at the host) and must not have a <code>Domain</code> attribute.</p>
+
+<div class="blockIndicator warning">
+<p>For clients that don't implement cookie prefixes, you cannot count on these additional assurances, and prefixed cookies will always be accepted.</p>
+</div>
+
+<pre class="notranslate">// Both accepted when from a secure origin (HTTPS)
+Set-Cookie: __Secure-ID=123; Secure; Domain=example.com
+Set-Cookie: __Host-ID=123; Secure; Path=/
+
+// Rejected due to missing Secure attribute
+Set-Cookie: __Secure-id=1
+
+// Rejected due to the missing Path=/ attribute
+Set-Cookie: __Host-id=1; Secure
+
+// Rejected due to setting a Domain
+Set-Cookie: __Host-id=1; Secure; Path=/; Domain=example.com
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("6265", "Set-Cookie", "4.1")}}</td>
+   <td>HTTP State Management Mechanism</td>
+  </tr>
+  <tr>
+   <td><a href="https://tools.ietf.org/html/draft-ietf-httpbis-rfc6265bis-05">draft-ietf-httpbis-rfc6265bis-05</a></td>
+   <td>Cookie Prefixes, Same-Site Cookies, and Strict Secure Cookies</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Set-Cookie", 5)}}</p>
+
+<h2 id="Compatibility_notes">Compatibility notes</h2>
+
+<ul>
+ <li>Starting with Chrome 52 and Firefox 52, insecure sites (<code>http:</code>) can't set cookies with the <code>Secure</code> attribute anymore.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a></li>
+ <li>{{HTTPHeader("Cookie")}}</li>
+ <li>{{domxref("Document.cookie")}}</li>
+ <li><a href="/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite">SameSite cookies</a></li>
+</ul>
diff --git a/files/de/web/http/headers/set-cookie/samesite/index.html b/files/de/web/http/headers/set-cookie/samesite/index.html
new file mode 100644
index 0000000000..51879c388d
--- /dev/null
+++ b/files/de/web/http/headers/set-cookie/samesite/index.html
@@ -0,0 +1,135 @@
+---
+title: SameSite cookies
+slug: Web/HTTP/Headers/Set-Cookie/SameSite
+tags:
+  - HATTP
+  - IT
+translation_of: Web/HTTP/Headers/Set-Cookie/SameSite
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="seoSummary">The <strong><code>SameSite</code></strong> attribute of the {{HTTPHeader("Set-Cookie")}} HTTP response header allows you to declare if your cookie should be restricted to a <a href="/en-US/docs/Web/HTTP/Cookies#Third-party_cookies">first-party</a> or same-site context. </span></p>
+
+<div class="blockIndicator note">
+<p>Standards related to the Cookie <code>SameSite</code> attribute recently changed such that:</p>
+
+<ul>
+ <li>The cookie-sending behaviour if <code>SameSite</code> is not specified is <code>SameSite=Lax</code>. Previously the default was that cookies were sent for all requests.</li>
+ <li>Cookies with <code>SameSite=None</code> must now also specify the <code>Secure</code> attribute (they require a secure context/HTTPS).</li>
+</ul>
+
+<p>This article documents the new standard. See <a href="#Browser_compatibility">Browser Compatibility</a> below for information about specific versions where the behaviour changed.</p>
+</div>
+
+<h2 id="Values">Values</h2>
+
+<p>The <code>SameSite</code> attribute accepts three values:</p>
+
+<h3 id="Lax"><code>Lax</code></h3>
+
+<p>Cookies are not sent on normal cross-site subrequests (for example to load images or frames into a third party site), but are sent when a user is <em>navigating to</em> the origin site (i.e. when following a link).</p>
+
+<p>This is the default cookie value if <code>SameSite</code> has not been explicitly specified in recent browser versions (see the "SameSite: Defaults to Lax" feature in the Browser Compatibility).</p>
+
+<div class="blockIndicator note">
+<p><code>Lax</code> replaced <code>None</code> as the default value in order to ensure that users have reasonably robust defense against some classes of cross-site request forgery ({{Glossary("CSRF")}}) attacks.</p>
+</div>
+
+<h3 id="Strict"><code>Strict</code></h3>
+
+<p>Cookies will only be sent in a first-party context and not be sent along with requests initiated by third party websites.</p>
+
+<h3 id="None"><code>None</code></h3>
+
+<p>Cookies will be sent in all contexts, i.e in responses to both first-party and cross-origin requests.If <code>SameSite=None</code> is set, the cookie <a href="/en-US/docs/Web/HTTP/Headers/Set-Cookie#Secure"><code>Secure</code></a> attribute must also be set (or the cookie will be blocked).</p>
+
+<h2 id="Fixing_common_warnings">Fixing common warnings</h2>
+
+<h3 id="SameSiteNone_requires_Secure"><code>SameSite=None</code> requires <code>Secure</code></h3>
+
+<p>Warnings like the ones below might appear in your console:</p>
+
+<pre class="syntaxbox notranslate">Cookie “<em>myCookie</em>” rejected because it has the “SameSite=None” attribute but is missing the “secure” attribute.
+
+This Set-Cookie was blocked because it had the "SameSite=None" attribute but did not have the "Secure" attribute, which is required in order to use "SameSite=None".</pre>
+
+<p>The warning appears because any cookie that requests <code>SameSite=None</code> but is not marked <code>Secure</code> will be rejected.</p>
+
+<pre class="example-bad notranslate">Set-Cookie: flavor=choco; SameSite=None</pre>
+
+<p>To fix this, you will have to add the <code>Secure</code> attribute to your <code>SameSite=None</code> cookies.</p>
+
+<pre class="example-good notranslate">Set-Cookie: flavor=choco; SameSite=None; <strong>Secure</strong></pre>
+
+<p>A <a href="#Secure"><code>Secure</code></a> cookie is only sent to the server with an encrypted request over the HTTPS protocol. Note that insecure sites (<code>http:</code>) can't set cookies with the <code>Secure</code> directive.</p>
+
+<div class="blockIndicator note">
+<p>On older browser versions you might simply get a warning that the cookie will be blocked in future. For example:</p>
+
+<pre class="syntaxbox notranslate">Cookie “<em>myCookie</em>” will be soon rejected because it has the “SameSite” attribute set to “None” or an invalid value, without the “secure” attribute. To know more about the “SameSite” attribute, read https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite
+</pre>
+</div>
+
+<h3 id="Cookies_without_SameSite_default_to_SameSiteLax">Cookies without <code>SameSite</code> default to <code>SameSite=Lax</code></h3>
+
+<p>Recent versions of modern browsers provide a more secure default for <code>SameSite</code> to your cookies and so the following message might appear in your console:</p>
+
+<pre class="syntaxbox notranslate">Cookie “<em>myCookie</em>” has “SameSite” policy set to “Lax” because it is missing a “SameSite” attribute, and “SameSite=Lax” is the default value for this attribute.
+</pre>
+
+<p>The warning appears because the <code>SameSite</code> policy for a cookie was not explicitly specified:</p>
+
+<pre class="example-bad notranslate">Set-Cookie: flavor=choco</pre>
+
+<p>You should explicitly communicate the intended <code>SameSite</code> policy for your cookie (rather than relying on browsers to apply <code>SameSite=Lax</code> automatically). This will also improve the experience across browsers as not all of them default to <code>Lax</code> yet.</p>
+
+<pre class="example-good notranslate">Set-Cookie: flavor=choco; <strong>SameSite=Lax</strong></pre>
+
+<h2 id="Example"><strong>Example:</strong></h2>
+
+<pre class="notranslate">RewriteEngine on
+RewriteBase "/"
+RewriteCond "%{HTTP_HOST}"       "^example\.org$" [NC]
+RewriteRule "^(.*)"              "https://www.example.org/index.html" [R=301,L,QSA]
+RewriteRule "^(.*)\.ht$"         "index.php?nav=$1 [NC,L,QSA,CO=RewriteRule;01;https://www.example.org;30/;SameSite=None;Secure]
+RewriteRule "^(.*)\.htm$"        "index.php?nav=$1 [NC,L,QSA,CO=RewriteRule;02;https://www.example.org;30/;SameSite=None;Secure]
+RewriteRule "^(.*)\.html$"       "index.php?nav=$1 [NC,L,QSA,CO=RewriteRule;03;https://www.example.org;30/;SameSite=None;Secure]
+[...]
+RewriteRule "^admin/(.*)\.html$" "admin/index.php?nav=$1 [NC,L,QSA,CO=RewriteRule;09;https://www.example.org:30/;SameSite=Strict;Secure]
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("6265", "Set-Cookie", "4.1")}}</td>
+   <td>HTTP State Management Mechanism</td>
+  </tr>
+  <tr>
+   <td><a href="https://tools.ietf.org/html/draft-ietf-httpbis-rfc6265bis-05">draft-ietf-httpbis-rfc6265bis-05</a></td>
+   <td>Cookie Prefixes, Same-Site Cookies, and Strict Secure Cookies</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Set-Cookie", 5)}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a></li>
+ <li>{{HTTPHeader("Cookie")}}</li>
+ <li>{{domxref("Document.cookie")}}</li>
+ <li><a href="https://web.dev/samesite-cookies-explained/">Samesite cookies explained</a> (web.dev blog)</li>
+</ul>
diff --git a/files/de/web/http/headers/tk/index.html b/files/de/web/http/headers/tk/index.html
new file mode 100644
index 0000000000..f2bd1a3e24
--- /dev/null
+++ b/files/de/web/http/headers/tk/index.html
@@ -0,0 +1,94 @@
+---
+title: Tk
+slug: Web/HTTP/Headers/Tk
+tags:
+  - Antwort
+  - DNT
+  - HTTP
+  - Referenz
+  - header
+  - tracking
+translation_of: Web/HTTP/Headers/Tk
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Der <strong><code>Tk</code></strong> Antwort-Header beeinhaltet den Tracking-Status der auf die Anfrage zutraf.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header-Typ</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>Nein</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Tk: !  (Arbeit im Gange)
+Tk: ?  (Dynamisch)
+Tk: G  (Gateway oder mehrere Partien)
+Tk: N  (Kein Tracking)
+Tk: T  (Tracking)
+Tk: C  (Tracking mit Einwilligung)
+Tk: P  (Mögliche Einwilligung)
+Tk: D  (DNT wird ignoriert)
+Tk: U  (Aktuallisiert)
+</pre>
+
+<h3 id="Directives">Directives</h3>
+
+<dl>
+ <dt>!</dt>
+ <dd>Arbeit im Gange. Der Ursprungsserver testet gerade seine Kommunikation des Tracking-Status.</dd>
+ <dt>?</dt>
+ <dd>Dynamisch. Der Ursprungsserver braucht mehr Information, um den Tracking-Status bestimmen zu können.</dd>
+ <dt>G</dt>
+ <dd>Gateway oder mehrere Partien. Der Server handelt als Gateway zu einem Austausch, der mehrere Partien beinhaltet.</dd>
+ <dt>N</dt>
+ <dd>Kein Tracking.</dd>
+ <dt>T</dt>
+ <dd>Tracking.</dd>
+ <dt>C</dt>
+ <dd>Tracking mit Einwilligung. Der Ursprungsserver glaubt, er hat zuvur eine Einwilligung bekommen, diesen Nutzer, User-Agent oder dieses Gerät zu tracken.</dd>
+ <dt>P</dt>
+ <dd>Mögliche Einwilligung. Der Ursprungsserver weiß nicht, in Echtzeit, ob er eine zuvorige Einwilligung für das tracken dieses Nutzers, User-Agents oder Geräts, bekommen hat. Verspricht, aber keine <code>DNT:1</code>-Daten zu teilen, bis eine Einwilligung festgestellt wurde. Des weiteren, verspricht er alle <code>DNT:1</code>-Daten in den folgenen 24 Stunden zu löschen oder zu de-identifizieren.</dd>
+ <dt>D</dt>
+ <dd>DNT wird ignoriert. Der Ursprungsserver ist nicht fähig, eine Tracking-Präferenz des User-Agents zu respektieren, oder will einfach nicht.</dd>
+ <dt>U</dt>
+ <dd>Aktuallisiert. Die Anfrage hat in eine mögliche Änderung des Tracking-Statueses des Nutzers, User-Agents oder Geräts resultiert.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Ein <code>Tk</code>-Header für eine Resource, die von sich selbst sagt, nicht zu tracken, würde so aussehen:</p>
+
+<pre>Tk: N</pre>
+
+<p>Spezifikationen</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Tracking','#Tk-header-defn', 'Tk header field')}}</td>
+   <td>{{Spec2("Tracking")}}</td>
+   <td>Erstmalige Definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{HTTPHeader("DNT")}} header</li>
+ <li>{{domxref("Navigator.doNotTrack")}}</li>
+</ul>
diff --git a/files/de/web/http/headers/user-agent/index.html b/files/de/web/http/headers/user-agent/index.html
new file mode 100644
index 0000000000..ceb6e8e533
--- /dev/null
+++ b/files/de/web/http/headers/user-agent/index.html
@@ -0,0 +1,139 @@
+---
+title: User-Agent
+slug: Web/HTTP/Headers/User-Agent
+tags:
+  - HTTP
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - header
+translation_of: Web/HTTP/Headers/User-Agent
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>The <strong>User-Agent</strong> request header contains a characteristic string that allows the network protocol peers to identify the application type, operating system, software vendor or software version of the requesting software user agent.</p>
+
+<div class="note">
+<p>Please read <a href="/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent">Browser detection using the user agent</a> and why serving different Web pages or services to different browsers is usually a bad idea.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">User-Agent: &lt;product&gt; / &lt;product-version&gt; &lt;comment&gt;
+
+Common format for web browsers:
+
+User-Agent: Mozilla/&lt;version&gt; (&lt;system-information&gt;) &lt;platform&gt; (&lt;platform-details&gt;) &lt;extensions&gt;
+</pre>
+
+<h2 id="Directives">Directives</h2>
+
+<dl>
+ <dt>&lt;product&gt;</dt>
+ <dd>A product identifier</dd>
+ <dt>&lt;product-version&gt;</dt>
+ <dd>A version number of the product.</dd>
+ <dt>&lt;comment&gt;</dt>
+ <dd>Zero or more comments containing sub product information, for example.</dd>
+</dl>
+
+<h2 id="Firefox_UA_string">Firefox UA string</h2>
+
+<p>For more details on Firefox and Gecko based user agent strings, see the <a href="/en-US/docs/Web/HTTP/Headers/User-Agent/Firefox">Firefox user agent string reference</a>. The UA string of Firefox itself is broken down into four components:</p>
+
+<p><strong>Mozilla/5.0 (<em>platform</em>; rv:<em>geckoversion</em>) Gecko/<em>geckotrail</em> Firefox/<em>firefoxversion</em></strong></p>
+
+<ul>
+ <li><em><strong>Mozilla/5.0</strong></em> is the general token that says the browser is Mozilla compatible, and is common to almost every browser today.</li>
+ <li><strong><em>platform</em></strong> describes the native platform the browser is running on (e.g. Windows, Mac, Linux or Android), and whether or not it's a mobile phone. Firefox OS phones simply say "Mobile"; the web is the platform. Note that <strong><em>platform</em></strong> can consist of multiple "; "-separated tokens. See below for further details and examples.</li>
+ <li><strong>rv:<em>geckoversion</em></strong> indicates the release version of Gecko (such as <em>"17.0"</em>). In recent browsers, <strong><em>geckoversion</em></strong> is the same as <strong><em>firefoxversion</em></strong>.</li>
+ <li><strong><em>Gecko/geckotrail</em></strong> indicates that the browser is based on Gecko.</li>
+ <li>On Desktop, <em><strong>geckotrail</strong></em> is the fixed string "20100101"</li>
+ <li><em><strong>Firefox/firefoxversion</strong></em> indicates the browser is Firefox, and provides the version (such as "<em>17.0"</em>).</li>
+</ul>
+
+<h3 id="Examples">Examples</h3>
+
+<pre>Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:47.0) Gecko/20100101 Firefox/47.0
+Mozilla/5.0 (Macintosh; Intel Mac OS X <em>x.y</em>; rv:42.0) Gecko/20100101 Firefox/42.0
+</pre>
+
+<h2 id="Chrome_UA_string">Chrome UA string</h2>
+
+<p>The Chrome (or Chromium/blink-based engines) user agent string is similar to the Firefox format. For compatibility, it adds strings like "KHTML, like Gecko" and "Safari".</p>
+
+<h3 id="Examples_2">Examples</h3>
+
+<pre>Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36</pre>
+
+<h2 id="Opera_UA_string">Opera UA string</h2>
+
+<p>The Opera browser is also based on the blink engine, which is why it almost looks the same, but adds "OPR/&lt;version&gt;".</p>
+
+<h3 id="Examples_3">Examples</h3>
+
+<pre>Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36 OPR/38.0.2220.41</pre>
+
+<h2 id="Safari_UA_string">Safari UA string</h2>
+
+<p>In this example, the user agent string is mobile safari version. It contains the word "Mobile".</p>
+
+<h3 id="Examples_4">Examples</h3>
+
+<pre>Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1</pre>
+
+<h2 id="Internet_Explorer_UA_string">Internet Explorer UA string</h2>
+
+<h3 id="Examples_5">Examples</h3>
+
+<pre>Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0)</pre>
+
+<h2 id="Crawler_and_bot_UA_strings">Crawler and bot UA strings</h2>
+
+<h3 id="Examples_6">Examples</h3>
+
+<pre>Googlebot/2.1 (+http://www.google.com/bot.html)</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "User-Agent", "5.5.3")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.User-Agent")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://hacks.mozilla.org/2013/09/user-agent-detection-history-and-checklist/">User-Agent detection, history and checklist</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Headers/User-Agent/Firefox">Firefox user agent string reference</a></li>
+ <li>
+  <p><a href="/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent">Browser detection using the user agent</a></p>
+ </li>
+</ul>
diff --git a/files/de/web/http/headers/x-content-type-options/index.html b/files/de/web/http/headers/x-content-type-options/index.html
new file mode 100644
index 0000000000..3f4220a14d
--- /dev/null
+++ b/files/de/web/http/headers/x-content-type-options/index.html
@@ -0,0 +1,93 @@
+---
+title: X-Content-Type-Options
+slug: Web/HTTP/Headers/X-Content-Type-Options
+translation_of: Web/HTTP/Headers/X-Content-Type-Options
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Der Header <code><strong>X-Content-Type-Option</strong></code> in HTTP-Antworten wird vom Server dazu benutzt, um anzuzeigen, dass <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME-Typen</a>, so wie sie in den {{HTTPHeader("Content-Type")}}-Headern angegeben sind, nicht geändert und somit befolgt werden sollen. Damit lässt sich <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#MIME_sniffing">MIME type sniffing</a> ausschließen. Oder anders gesagt: es zeigt, dass die Web-Admins wissen, was sie tun.</p>
+
+<p>Der Header wurde von Microsoft mit dem IE 8 eingeführt, damit Web-Admins die automatische Inhaltserkennung ausschalten können. Die automatische Erkennung konnte dazu führen, dass Inhalt fälschlich als ausführbarer MIME-Typ erkannt wird. Inzwischen haben andere Browser diese Option übernommen, auch wenn deren Erkennungsalgorithmen von vorneherein vorsichtiger waren.</p>
+
+<p>Bei Sicherheits-Audits wird im Allgemeinen erwartet, dass dieser Header gesetzt ist.</p>
+
+<p class="blockIndicator note">Anmerkung: <code>nosniff</code> gilt nur für "<code>script</code>"- und "<code>style</code>"-Typen. Gleichzeitig wird auch Cross-Origin Read Blocking (CORB) für HTML-, TXT-, JSON- und XML- Dateien (ausgenommen SVG bzw. <code>image/svg+xml</code>) aktiviert. Das Anwenden von <code>nosniff</code> bei Bildern erwies sich als <a href="https://github.com/whatwg/fetch/issues/395">inkompatibel zu bestehenden Webseiten</a>.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Art des Headers</th>
+   <td>{{Glossary("Antwort-Header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Unzulässiger Header-Name")}}</th>
+   <td>Nein</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">X-Content-Type-Options: nosniff
+</pre>
+
+<h2 id="Direktiven">Direktiven</h2>
+
+<dl>
+ <dt><code>nosniff</code></dt>
+ <dd>Verhindert eine Anfrage, wenn der angeforderte Typ
+ <ul>
+  <li>"<code>style</code>" und der MIME-Typ nicht  "<code>text/css</code>" ist, oder</li>
+  <li>"<code>script</code>" und der MIME-Typ kein <a href="https://html.spec.whatwg.org/multipage/scripting.html#javascript-mime-type">JavaScript-MIME-Typ</a> ist.</li>
+ </ul>
+
+ <p>Aktiviert außerdem Cross-Origin Read Blocking für folgende MIME-Typen:</p>
+
+ <ul>
+  <li><code>text/html</code></li>
+  <li><code>text/plain</code></li>
+  <li><code>text/json</code>, <code>application/json</code> und alle anderen MIME-Typen mit JSON-Erweiterung: <code>*/*+json</code></li>
+  <li><code>text/xml</code>, <code>application/xml</code> und alle anderen MIME-Typen mit XML-Erweiterung: <code>*/*+xml</code> (ausgenommen <code>image/svg+xml</code>)</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Fetch", "#x-content-type-options-header", "X-Content-Type-Options definition")}}</td>
+   <td>{{Spec2("Fetch")}}</td>
+   <td>Erste Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<div class="hidden">Die Kompatibilitätstabelle dieser Seite wurde aus strukturierten Daten automatisch generiert. Falls du zu diesen Daten beitragen möchtest, lade dir <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> herunter und sende uns einen Pull Request.</div>
+
+<p>{{Compat("http.headers.X-Content-Type-Options")}}</p>
+
+<h3 id="Browser_spezifische_Anmerkung">Browser spezifische Anmerkung</h3>
+
+<ul>
+ <li>Firefox 72 schaltet <code>X-Content-Type-Options: nosniff</code> für Dokumente der obersten Ebene frei</li>
+</ul>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Type")}}</li>
+ <li>Die <a href="https://blogs.msdn.microsoft.com/ie/2008/09/02/ie8-security-part-vi-beta-2-update/">Original-Definition</a> von X-Content-Type-Options von Microsoft</li>
+ <li>Das Werkzeug <a href="https://observatory.mozilla.org/">Mozilla Observatory</a>, um die Sicherheit von Webseiten (darunter auch diesen Header) zu prüfen</li>
+ <li><a href="https://blog.mozilla.org/security/2016/08/26/mitigating-mime-confusion-attacks-in-firefox/">Mitigating MIME Confusion Attacks in Firefox</a></li>
+ <li><a href="https://fetch.spec.whatwg.org/#corb">Cross-Origin Read Blocking (CORB)</a></li>
+ <li><a href="https://chromium.googlesource.com/chromium/src/+/master/services/network/cross_origin_read_blocking_explainer.md">Google Docs CORB explainer</a></li>
+</ul>
diff --git a/files/de/web/http/headers/x-frame-options/index.html b/files/de/web/http/headers/x-frame-options/index.html
new file mode 100644
index 0000000000..5d18375875
--- /dev/null
+++ b/files/de/web/http/headers/x-frame-options/index.html
@@ -0,0 +1,131 @@
+---
+title: X-Frame-Options
+slug: Web/HTTP/Headers/X-Frame-Options
+translation_of: Web/HTTP/Headers/X-Frame-Options
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Die <strong><code>X-Frame-Options</code></strong> im <a href="/en-US/docs/Web/HTTP">HTTP</a> Antwort Header kann verwendet werden, um zu bestimmen, ob ein aufrufender Browser die Zielseite in einem {{HTMLElement("frame")}}, {{HTMLElement("iframe")}}, {{HTMLElement("embed")}} oder {{HTMLElement("object")}} rendern also einbetten darf. Webseiten können diesen Header verwenden, um {{interwiki("wikipedia", "clickjacking")}} Attacken abzuwehren, indem sie unterbinden, dass ihr Content in fremden Seiten eingebettet wird.</p>
+
+<p>Die somit erreichte Sicherheit wird nur dann gewährleistet, wenn der User zum Aufruf einen Browser verwendet, der die <code>X-Frame-Options</code> Funktion auch unterstützt.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>nein</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>Es gibt drei mögliche Ausprägungen der <code>X-Frame-Options</code>:</p>
+
+<pre class="syntaxbox">X-Frame-Options: deny
+X-Frame-Options: sameorigin
+X-Frame-Options: allow-from https://example.com/
+</pre>
+
+<h3 id="Ausprägungen">Ausprägungen</h3>
+
+<p>Die Nutzung von <code>deny</code> unterbindet nicht nur die Frame-Einbindung von fremden Seiten sondern auch das Einbetten auf derselben Ursprungswebseite. Alternativ kann der Wert <code>sameorigin</code> verwendet werden, wenn die Nutzung innerhalb der gleichen Ursprungswebseite erlaubt sein soll.</p>
+
+<dl>
+ <dt><code>deny</code></dt>
+ <dd>Die Seite kann nicht in einem Frame eingebettet werden, egal welches die aufrufende Webseite ist.</dd>
+ <dt><code>sameorigin</code></dt>
+ <dd>Die Seite kann nur als Frame eingebettet werden, wenn beide von der gleichen Quellseite (same origin) stammen. Die Spezifikation lässt es Browserherstellern offen, auf welcher Ebene dieser Wert greift: auf höchster Ebene, der nächsthöheren oder der gesamten Kette. Es wird jedoch festgestellt, dass die Option wenig nützlich ist, sofern nicht alle Eltern-Webseiten von der gleichen Quelle stammen (siehe {{bug(725490)}}).  Siehe weiterhin {{anch("Browser compatibility")}} zur Browserunterstützung.</dd>
+ <dt><code>allow-from <em>uri</em></code></dt>
+ <dd>Die Seite lässt sich ausschließlich dann einbetten, wenn die einbettende Seite aus der Quelle <em><code>uri</code></em> stammt. Hinweis: In Firefox besteht hier das gleiche Problem wie bei <code>sameorigin</code> -  die Eltern-Frames werden nicht darauf hin geprüft, ob sie aus der gleichen Quelle stammen.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Die Nutzung des <code>meta tag</code> innerhalb des Webseiten-Contents hat keinen Effekt! Beispielsweise die Deklaration <code>&lt;meta http-equiv="X-Frame-Options" content="deny"&gt;</code> führt zu keiner Verhaltensänderung. Ausschließlich die Nutzung der HTTP Header (siehe Beispiele) führt zu einer Verhaltensänderung des Browser.</p>
+</div>
+
+<h3 id="Apache_Konfiguration">Apache Konfiguration</h3>
+
+<p>Um einen Apache Webserver zum Senden des <code>X-Frame-Options</code> Headers für alle Webseiten zu bewegen, fügen Sie folgenden Eintrag in die Seiten-Konfiguration ein:</p>
+
+<pre>Header always set X-Frame-Options "sameorigin"
+</pre>
+
+<p>Um Apache so zu konfigurieren, dass <code>X-Frame-Options</code> mit dem Wert <code>deny</code> gesendet wird, fügen Sie folgenden Eintrag in die Seiten-Konfiguration ein:</p>
+
+<pre class="line-numbers  language-html"><code class="language-html">Header set X-Frame-Options "deny"</code></pre>
+
+<p>Um Apache so zu konfigurieren, dass <code>X-Frame-Options</code> mit dem Wert <code>allow-from</code> einen bestimmten Host freigibt, fügen Sie folgenden Eintrag in die Seiten-Konfiguration ein:</p>
+
+<pre class="line-numbers  language-html"><code class="language-html">Header set X-Frame-Options "allow-from https://example.com/"</code></pre>
+
+<h3 id="nginx_Konfiguration">nginx Konfiguration</h3>
+
+<p>Um einen nginx Server zum Senden des <code>X-Frame-Options</code> Header aufzufordern, fügen Sie folgenden Eintrag entweder zu Ihrer http, server oder location Konfiguration hinzu:</p>
+
+<pre>add_header X-Frame-Options sameorigin;
+</pre>
+
+<h3 id="IIS_Konfiguration">IIS Konfiguration</h3>
+
+<p>Um den IIS Server zum Senden des <code>X-Frame-Options</code> Headers aufzufordern, ergänzen Sie folgenden Eintrag entsprechend in Ihrer <code>Web.config</code> Datei:</p>
+
+<pre class="brush: xml">&lt;system.webServer&gt;
+  ...
+
+  &lt;httpProtocol&gt;
+    &lt;customHeaders&gt;
+      &lt;add name="X-Frame-Options" value="sameorigin" /&gt;
+    &lt;/customHeaders&gt;
+  &lt;/httpProtocol&gt;
+
+  ...
+&lt;/system.webServer&gt;
+</pre>
+
+<h3 id="HAProxy_Konfiguration">HAProxy Konfiguration</h3>
+
+<p>Um HAProxy zum Senden des <code>X-Frame-Options</code> Headers aufzufordern, fügen Sie diesen Eintrag zu Ihrer front-end, listen oder backend Konfiguration hinzu:</p>
+
+<pre>rspadd X-Frame-Options:\ sameorigin</pre>
+
+<p>Alternatively, in newer versions:</p>
+
+<pre class="line-numbers language-html"><code class="language-html">http-response set-header X-Frame-Options sameorigin</code></pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Bezeichnung</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7034")}}</td>
+   <td>HTTP Header Field X-Frame-Options</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p class="hidden">Die hier gelistete Browser-Kompatibilitätstabelle wurde automatisch aus strukturierten Daten erzuegt. Wenn Sie Daten entsprechend ergänzen möchten, tun Sie dies bitte unter der URL <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und senden Sie uns einen Pull Request.</p>
+
+<p>{{Compat("http.headers.X-Frame-Options")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors"><code>frame-ancestors</code> (CSP)</a></li>
+ <li><a class="external" href="https://blogs.msdn.com/b/ie/archive/2009/01/27/ie8-security-part-vii-clickjacking-defenses.aspx">ClickJacking Defenses - IEBlog</a></li>
+ <li><a href="https://blogs.msdn.com/b/ieinternals/archive/2010/03/30/combating-clickjacking-with-x-frame-options.aspx">Combating ClickJacking with X-Frame-Options - IEInternals</a></li>
+ <li><a href="https://tools.ietf.org/html/rfc7034">HTTP Header Field X-Frame-Options - RFC 7034</a></li>
+ <li><a href="https://w3c.github.io/webappsec/specs/content-security-policy/#directive-frame-ancestors">CSP Level 2 frame-ancestors directive</a></li>
+</ul>
diff --git a/files/de/web/http/index.html b/files/de/web/http/index.html
new file mode 100644
index 0000000000..6cf5dfb5e4
--- /dev/null
+++ b/files/de/web/http/index.html
@@ -0,0 +1,366 @@
+---
+title: HTTP
+slug: Web/HTTP
+tags:
+  - HTTP
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/HTTP
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary"><strong><dfn>Das Hypertext Transfer Protocol (HTTP)</dfn></strong> ist ein <a class="external" href="https://de.wikipedia.org/wiki/OSI-Modell#Schicht_7_.E2.80.93_Anwendungsschicht_.28Application_Layer.29">Anwendungsschicht</a>-Protokoll zum Transportieren von <a class="external" href="https://de.wikipedia.org/wiki/Hypermedia">Hypermedia</a> Dokumenten, wie zum Beispiel <a href="/de/docs/Web/HTML">HTML</a>. Hauptsächlich wird es zur Kommunikation zwischen Webservern und Webbrowsern verwendet, jedoch könnte es theoretisch auch für andere Zwecke benutzt werden. Es folgt einem klassischen <a class="external" href="https://de.wikipedia.org/wiki/Client-Server-Modell">Client-Server-Modell</a>, mit einem Client der die Verbindung eröffnet, indem er eine Anfrage macht und dann wartet, bis es eine Antwort erhält. Außerdem ist es ein <a class="external" href="https://de.wikipedia.org/wiki/Zustandslosigkeit">zustandsloses</a> <a class="external" href="https://de.wikipedia.org/wiki/Netzwerkprotokoll">Protokoll</a>, was bedeutet, dass der Server keine Daten (Zustände) zwischen zwei Anfragen behält.<br>
+ <br>
+ Obwohl oft auf einer TCP/IP Schicht aufgebaut, könnte es auch auf jede andere verlässliche, verbindungsorientierte <a class="external" href="https://de.wikipedia.org/wiki/OSI-Modell#Schicht_4_.E2.80.93_Transportschicht">Transportschicht</a> aufbauen, sofern sie Nachrichten nicht leise verliert, wie es zum Beispiel bei <a class="external" href="https://de.wikipedia.org/wiki/User_Datagram_Protocol">UDP</a> der Fall ist.</p>
+
+<h2 class="Documentation" id="Dokumentation">Dokumentation</h2>
+
+<dl>
+ <dt><a href="/de/docs/Web/HTTP/Headers">HTTP-Header</a></dt>
+ <dd>HTTP-Nachrichten-Header werden verwendet, um genau zu beschreiben, welche Ressource abgeholt wird oder das Verhalten des Servers oder des Clients. Benutzerdefinierte Header können mit dem ' X-' Präfix hinzugefügt werden; Andere sind in einer IANA-Registry aufgeführt, deren ursprünglicher Inhalt in <a href="https://tools.ietf.org/html/rfc4229">RFC 4229</a> definiert wurde. IANA unterhält auch eine <a href="https://www.iana.org/assignments/message-headers/message-headers.xhtml#prov-headers">Registry der vorgeschlagenen neuen HTTP-Nachrichten-Header</a>.</dd>
+ <dt><a href="/de/Web_Development/HTTP_cookies">HTTP-Cookies</a></dt>
+ <dd>Wie Cookies funktionieren, definiert der RFC 6265. Wenn ein Server eine HTTP-Anfrage erhält, kann er einen <code>Set-Cookie</code> Header mit der Antwort senden. Danach wird der Cookie-Wert zusammen mit jeder Anfrage an den gleichen Server in Form eines <code>Cookie</code> HTTP-Headers gesendet. Zusätzlich kann eine Verfallsverzögerung angegeben werden. Einschränkungen einer bestimmten Domäne und eines bestimmten Pfades können ebenfalls festgelegt werden.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/de/docs/HTTP/Basic_access_authentication">Basic access authentication</a></dt>
+ <dd>Im Kontext einer HTTP-Transaktion ist <strong>basic access authentication</strong> eine Methode für einen <a href="/de/docs/Web/API/window.navigator.userAgent">HTTP user agent</a> einen Benutzernamen und ein Kennwort beim Stellen einer Anfrage zu übermitteln.</dd>
+ <dt><a href="/de/HTTP_Pipelining_FAQ">HTTP pipelining FAQ</a></dt>
+ <dd>HTTP/1.1 Pipelining FAQ</dd>
+ <dt><a href="/de/docs/HTTP/Access_control_CORS">HTTP access control (CORS)</a></dt>
+ <dd><strong>Cross-site HTTP requests</strong> sind <a href="/de/docs/HTTP">HTTP</a>-Anfragen nach Ressourcen auf einer <strong>anderen Domain</strong> als der Domain, auf der die Ressource liegt, die die Anfrage initiiert. Beispielsweise initiiert eine Ressource, wie eine Web-Seite, die von Domain A (<code>http://domaina.example</code>) geladen wird, eine Anfrage durch Verwendung des <code>img</code>-Elements (<code>http://domainb.foo/image.jpg</code>) nach einem Bild, das auf Domain B (http://domainb.foo) liegt. Dies tritt heutzutage sehr häufig auf — Seiten laden eine Vielzahl an Ressourcen mittels Cross-site-Verfahren, einschließlich CSS-Stylesheets, Bildern, Skripten und anderen Ressourcen.</dd>
+ <dt><a href="/de/Controlling_DNS_prefetching">Steuern des DNS prefetchings</a></dt>
+ <dd>Firefox 3.5 führt <strong>DNS prefetching</strong> durch. Dies ist eine Funktion durch die Firefox gezielt Domain-Namensauflösung betreibt, sowohl für Verknüpfungen, denen der Benutzer möglicherweise folgt, als auch für URLs von Objekten auf die im Dokument Bezug genommen wird, einschließlich Bildern, CSS, JavaScript und so weiter. Dieses Vorausladen wird im Hintergrund durchgeführt, so dass es wahrscheinlich ist, dass der DNS-Name bereits aufgelöst wurde, wenn er benötigt wird. Dies reduziert die Verzögerung wenn ein Benutzer tatsächlich eine Verknüpfung anklickt.</dd>
+ <dt><a href="/de/docs/HTTP/HTTP_response_codes">HTTP Antwort-Codes</a></dt>
+ <dd>HTTP Antwort-Codes zeigen an, ob eine bestimmte <a href="/de/docs/HTTP">HTTP</a>-Anfrage erfolgreich abgeschlossen wurde. Antworten werden in fünf Klassen zusammengefasst: Informationsantworten, Erfolgsantworten, Weiterleitungen, Client-Fehler und Server-Fehler.</dd>
+</dl>
+
+<h2 id="Die_kurze_Geschichte_zu_HTTP">Die kurze Geschichte zu HTTP</h2>
+
+<p>Since its original conception, as a protocol with one single method (GET) and returning only HTML pages, the HTTP protocol went through several revisions. The first documented version was HTTP/0.9 in 1991, corresponding to the original version. Very simple, it has a rudimentary search capability via the HTML {{ HTMLElement("isindex") }} element and an extension of the URL using the '<code>?</code>' character.</p>
+
+<p>Then, in 1992, a version was published that became, with some minor changes, HTTP/1.0 (finalized in <a class="external" href="https://tools.ietf.org/html/rfc1945">RFC 1945</a> in May 1996). One major improvement over the previous version was the ability to transmit files of different types, like images, videos, scripts, CSS documents, and so on, instead of only HTML files: this is achieved by using <a class="external" href="https://en.wikipedia.org/wiki/Mime_types">MIME types</a> in conjunction with the <code>Content-Type:</code> header.</p>
+
+<p>In 1995, the <a class="external" href="https://www.ietf.org/">IETF</a>  began developing a new version of HTTP, which would become HTTP/1.1. It quickly spread into wide usage, and it was officially standardized in 1997 in <a class="external" href="https://tools.ietf.org/html/rfc2068">RFC 2068</a>, with minor fixes in <a class="external" href="https://tools.ietf.org/html/rfc2616">RFC 2616</a> two years later.</p>
+
+<p>HTTP/1.1 brought the ability to reuse established connections for subsequent requests, greatly improving the performance of the protocol by lowering the latency between them; this is especially useful with complex HTML documents that need to fetch several subsequent files, like images or style sheets. It also brought the <code>Host:</code> header, which allows a single server, listening on a specific port, to receive requests for several websites; this paved the way for colocating numerous websites on one single server, greatly reducing the cost of hosting.</p>
+
+<p>Since then, the HTTP protocol evolved by adding new <a href="/de/HTTP/Headers">headers</a>, defining new behaviors without the need to fundamentally change the protocol. Unknown headers are simply ignored by servers or clients.</p>
+
+<p>HTTP/1.1 is currently being revised by the <a class="external" href="https://tools.ietf.org/wg/httpbis/">IETF HTTPbis Working Group</a>.</p>
+
+<h2 id="Eine_HTTP-Sitzung">Eine HTTP-Sitzung</h2>
+
+<p>Because HTTP is a client-server protocol, an HTTP session consists of three phases:</p>
+
+<ol>
+ <li>The client establishes a TCP connection (or the appropriate connection if the transport layer is not TCP).</li>
+ <li>The client sends its request and then waits for the answer.</li>
+ <li>The server processes the request and sends back its answer, containing a status code and the appropriate data.</li>
+</ol>
+
+<p>Starting with HTTP/1.1, the connection is no longer closed after the third phase, as the client is allowed to issue another request at this point: the second and third phases can therefore be done several times.</p>
+
+<h3 id="Herstellen_einer_Verbindung">Herstellen einer Verbindung</h3>
+
+<p>Because HTTP is a client-server protocol, it always is the client that establishes the connection. Opening a connection in HTTP really is establishing a connection in the underlying transport layer, usually TCP.</p>
+
+<p>With TCP, the default port for an HTTP server on a computer is port 80, though others are often used, like 8000 or 8080. The URL of a page to fetch contains both the domain name and the port number, though the latter can be omitted if it is 80.</p>
+
+<div class="note"><strong>Note:</strong> The client-server model does not allow the server to send data to the client without an explicit request of for it. To work around this problem, web developers use several techniques: pinging the server periodically via the <a href="/de/DOM/XMLHttpRequest">XMLHTTPRequest</a> Javascript object, using the HTML <a href="/de/WebSockets">WebSockets API</a>, or similar protocols.</div>
+
+<h3 id="Senden_einer_Client-Anfrage">Senden einer Client-Anfrage</h3>
+
+<p>Once the connection is established, the user-agent can send its request. (A user-agent is typically a web browser, but need not be.) A client request consists of text directives, separated by CRLF (carriage return, followed by line feed), divided in three blocks:</p>
+
+<ol>
+ <li>The first line contains a request method followed by its parameters:
+  <ul>
+   <li>the path of the document, i.e., an absolute URL without the protocol and the domain name</li>
+   <li>the HTTP protocol version used</li>
+  </ul>
+ </li>
+ <li>The subsequent lines each represent a specific HTTP header, giving the server some information about what kind of data is appropriate (e.g., what language, what MIME types) or some data altering its behavior (e.g., not sending an answer if it is already cached). These HTTP headers form a block that ends with an empty line.</li>
+ <li>The final block is the optional data block, which contains further data and is mainly used by the POST method.</li>
+</ol>
+
+<h4 id="Beispiele_von_Anfragen">Beispiele von Anfragen</h4>
+
+<ul>
+ <li>Fetching the root page of developer.mozilla.org, i.e. <a class="linkification-ext external" href="/">http://developer.mozilla.org/</a>, and telling the server that the user-agent would prefer the page in French, if possible:
+
+  <pre class="notranslate">GET / HTTP/1.1
+Host: developer.mozilla.org
+Accept-Language: fr
+
+</pre>
+
+  <p>Note the final empty line, separating the data block from the headers block. As there is no <code>Content-Length:</code> HTTP header, the data block is empty and the server can process the request as soon as it receives the empty line marking the end of the headers.</p>
+ </li>
+ <li>Sending the result of a form:
+  <pre class="notranslate">POST /contact_form.php HTTP/1.1
+Host: developer.mozilla.org
+Content-Length: 64
+Content-Type: application/x-www-form-urlencoded
+
+name=Joe%20User&amp;request=Send%20me%20one%20of%20your%20catalogue
+</pre>
+ </li>
+</ul>
+
+<h3 id="Die_Struktur_einer_Server-Antwort">Die Struktur einer Server-Antwort</h3>
+
+<p>After the connected agent has sent its request, the web server handles it, and finally sends a response back. Similarly to a client request, a server response is formed of text directives, separated by CRLF, though divided in three different blocks:</p>
+
+<ol>
+ <li>The first line, the <em>status line</em>, consists of an acknowledgment of the HTTP version used followed by a status request (and its meaning in human-readable text).</li>
+ <li>The subsequent lines each represent a specific HTTP header giving the client some information about the data sent (e.g., type, data size, compression algorithm used, hints about caching). Similarly to the block of HTTP headers for a client request, these HTTP headers form a block that ends with an empty line.</li>
+ <li>The final block is the data block, which contains the data (if any).</li>
+</ol>
+
+<h4 id="Beispiele_von_Antworten">Beispiele von Antworten</h4>
+
+<ul>
+ <li>Successful reception of a web page:
+  <pre class="notranslate">HTTP/1.1 200 OK
+Date: Sat, 09 Oct 2010 14:28:02 GMT
+Server: Apache
+Last-Modified: Tue, 01 Dec 2009 20:18:22 GMT
+ETag: "51142bc1-7449-479b075b2891b"
+Accept-Ranges: bytes
+Content-Length: 29769
+Content-Type: text/html
+
+&lt;!DOCTYPE html... <em><strong>(here comes the 29769 bytes of the requested web page)</strong></em>
+
+</pre>
+ </li>
+ <li>Notification that the requested resource has been permanently moved:
+  <pre class="notranslate">HTTP/1.1 301 Moved Permanently
+Server: Apache/2.2.3 (Red Hat)
+Content-Type: text/html; charset=iso-8859-1
+Date: Sat, 09 Oct 2010 14:30:24 GMT
+Location: <a class="linkification-ext" href="../../../../">https://developer.mozilla.org/</a> <strong><em>(this is the</em><em> new link to the resource; it is expected that the user-agent will fetch it)</em></strong>
+Keep-Alive: timeout=15, max=98
+Accept-Ranges: bytes
+Via: Moz-Cache-zlb05
+Connection: Keep-Alive
+X-Cache-Info: caching
+X-Cache-Info: caching
+Content-Length: 325 <em>(<strong>the content contains a default page to display if the user-agent is not able to follow the link)</strong></em>
+
+&lt;!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"&gt;
+&lt;html&gt;&lt;head&gt;
+&lt;title&gt;301 Moved Permanently&lt;/title&gt;
+&lt;/head&gt;&lt;body&gt;
+&lt;h1&gt;Moved Permanently&lt;/h1&gt;
+&lt;p&gt;The document has moved &lt;a href="<a class="linkification-ext" href="../../../../">https://developer.mozilla.org/</a>"&gt;here&lt;/a&gt;.&lt;/p&gt;
+&lt;hr&gt;
+&lt;address&gt;Apache/2.2.3 (Red Hat) Server at developer.mozilla.org Port 80&lt;/address&gt;
+&lt;/body&gt;&lt;/html&gt;
+
+</pre>
+ </li>
+ <li>Notification that the requested resource doesn't exist:
+  <pre class="notranslate">HTTP/1.1 404 Not Found
+Date: Sat, 09 Oct 2010 14:33:02 GMT
+Server: Apache
+Last-Modified: Tue, 01 May 2007 14:24:39 GMT
+ETag: "499fd34e-29ec-42f695ca96761;48fe7523cfcc1"
+Accept-Ranges: bytes
+Content-Length: 10732
+Content-Type: text/html
+
+&lt;!DOCTYPE html... <strong><em>(contains a site-customized page helping the user to find the missing resource)</em></strong>
+
+</pre>
+ </li>
+</ul>
+
+<h3 id="Persistente_Verbindungen">Persistente Verbindungen</h3>
+
+<p>Persistent connections were introduced in HTTP/1.1. They allow transmitting several requests on the same TCP connection (or on the specific connected transport layer if the HTTP is not built upon TCP/IP). This has several advantages:</p>
+
+<ul>
+ <li>Because the connection can be reused, requests can be <a href="/de/HTTP_Pipelining_FAQ">pipelined</a> to save part of the connection latency.</li>
+ <li>By opening and closing fewer TCP connections, CPU time is saved.</li>
+ <li>Network congestion is diminished by lowering the total amount of TCP packets (fewer opening and closing TCP packets).</li>
+ <li>The TCP stack has more time to detect network congestion and to adapt its sending and receiving windows.</li>
+ <li>HTTP is more adaptive: the cost for trying a feature is considerably lowered as an error response no longer leads to closing the connection.</li>
+</ul>
+
+<h2 id="HTTP-Antfragemethoden">HTTP-Antfragemethoden</h2>
+
+<p>The request method indicates the action to be performed by the server. The HTTP/1.1 standard defines seven methods and allows other methods to be added later. Over the years, a few ones have been added in standards like <a href="/de/WebDAV">WebDAV</a>. The  <a class="external" href="https://tools.ietf.org/wg/httpbis/" rel="external nofollow">IETF HTTPbis Working Group</a> is currently working on an IANA registry to list them all. If a server receives a request method that it doesn't know, it must return a <code><a href="/de/HTTP/HTTP_response_codes#501" rel="internal">501 Not implemented</a></code> response; if it knows the method but is configured not to answer it, it must return a <code><a href="/de/HTTP/HTTP_response_codes#501" rel="internal">405 Method not allowed</a></code> response. Two methods are required to be supported: HEAD and GET; all others are optional.</p>
+
+<p>Two specific semantics are defined in the standard and are crucial for web developers: the <em>safety</em> property and the <em>idempotent</em> property.</p>
+
+<h3 id="Sichere_Methoden">Sichere Methoden</h3>
+
+<p>A <dfn>safe method</dfn> is a method that doesn't have any side-effects on the server. In other words, this property means that the method must be used only for <em>retrieval</em> of data. The safe HTTP methods defined in HTTP/1.1 are:</p>
+
+<ul>
+ <li>GET, used to retrieve information identified by the request URI. This information may be generated on the fly or the GET may be conditional if any of the {{ httpheader("If-Modified-Since") }}, {{ httpheader("If-Unmodified-Since") }}, {{ httpheader("If-Match") }}, {{ httpheader("If-None-Match") }} or {{ httpheader("If-Range") }} HTTP headers are set. In that latter case the information is only sent back if all the conditions are fulfilled.</li>
+ <li>HEAD, which is identical to GET but without the message body sent.</li>
+</ul>
+
+<div class="note"><strong>Notes: </strong>
+
+<ul>
+ <li>Any safe method is also <em>idempotent</em>.</li>
+ <li>Not having any side-effects means, for the GET method, that it <strong>must</strong> not be used to trigger an action outside the server, like an order in an e-commerce site. If a side-effect is wanted, a non-<em>idempotent</em> method should be used, like POST.</li>
+ <li>When a page is generated on the fly by a script, the script engine may calculate the page as if it was requested by a GET and then strip the data block. This does not cause problem as long as the GET as implemented in the script is <em>safe</em>, but if it has any side-effects (like triggering an order on an e-commerce site), the HEAD method will trigger it too. It is up to the web developer to ensure that both the GET and HEAD method are safely implemented.</li>
+</ul>
+</div>
+
+<h3 id="Idempotente_Methoden">Idempotente Methoden</h3>
+
+<p>An <dfn>idempotent method</dfn> is a method such that the side-effects on the server of several identical requests with the method are the same as the side-effects of one single request.</p>
+
+<ul>
+ <li>HEAD and GET, like any safe method, are also idempotent, as a safe method doesn't have side-effects on the server.</li>
+ <li>PUT is the way to upload a new resource on the server. If the resource already exists and is different, it is replaced; if it doesn't exist, it is created.</li>
+ <li>DELETE removes a resource from the server.</li>
+</ul>
+
+<h3 id="Andere_Methoden">Andere Methoden</h3>
+
+<ul>
+ <li>POST is the way to trigger an action on the server. It has side-effects and can be used to trigger an order, to modify a database, to post a message in a forum, and so on.</li>
+ <li>OPTIONS is a request for communication options available on the chain between the client and the server (through eventual proxies); this method is typically sent before any <a href="/de/HTTP_access_control#Preflighted_requests">preflighted cross-origin request</a>, in order to know whether it is safe to do it.
+  <div class="note"><strong>Note:</strong> <a href="/de/HTTP_access_control#Preflighted_requests">Preflighted cross-origin requests</a> cannot be done on servers which don't allow or support the OPTIONS method.</div>
+ </li>
+ <li>TRACE is a kind of ping between the client and the server (through eventual proxies).</li>
+</ul>
+
+<p>Many more methods, such as PROPFIND or PATCH are defined in other standards-track RFCs of the IETF, like WebDAV.</p>
+
+<p>The CONNECT method is defined in <a class="external" href="https://tools.ietf.org/html/rfc2817">RFC 2817</a>.</p>
+
+<h3 id="HTTP-Anfragemethoden_in_HTML-Formularen">HTTP-Anfragemethoden in HTML-Formularen</h3>
+
+<p>In HTML, different HTTP request methods can be specified in the {{ htmlattrxref("method", "form") }} attribute of the {{ HTMLElement("form") }} element, but also to the {{ htmlattrxref("formmethod", "input") }} of the {{ HTMLElement("input") }} and {{ HTMLElement("button") }} elements. But not all HTTP methods can be used with these attributes; only GET and POST method are allowed by the HTML specification. See <a href="https://softwareengineering.stackexchange.com/a/211790">this StackExchange answer why other HTTP request methods are not allowed by the HTML specification</a>.</p>
+
+<div class="note"><strong>Note</strong>: The choice of a GET or POST method for HTML forms is not neutral. Because the GET method is a <a href="/de/HTTP#Safe_methods">safe method</a>, it should be used only in cases where no side-effect is expected; e.g., it shouldn't be used to transmit an order, as this order is a side-effect. In all cases where such side-effects are expected, the POST method should be used.</div>
+
+<h2 id="HTTP-Antwort-Codes">HTTP-Antwort-Codes</h2>
+
+<p>When answering a client request, the server sends back a three-digit number indicating whether the request was successfully processed. These codes can be grouped in five categories:</p>
+
+<ul>
+ <li><dfn>Informational responses</dfn> (of the form <code>1xx</code>) are provisional responses. Most of the time neither the end user, nor the web developer or webmaster should have to bother with these. The most common is the <code><a href="/de/HTTP/HTTP_response_codes#100">100 Continue</a></code> response, indicating that the client should continue to send its request.
+
+  <div class="note"><strong>Note:</strong> No information response codes were defined in the HTTP/1.0, and therefore they must not be sent back when this version of the protocol is used.</div>
+ </li>
+ <li><dfn>Success responses</dfn> (of the form <code>2xx</code>) are for successfully processed requests. The <code><a href="/de/HTTP/HTTP_response_codes#200">200 OK</a></code> response is by far the most common of these responses, but the <code><a href="/de/HTTP/HTTP_response_codes#206">206 Partial Content</a></code> is also often seen when fetching a file or some media data like video or audio.</li>
+ <li><dfn>Redirection responses</dfn> (of the form <code>3xx</code>) indicate that the resource that the client requested has moved and the server is not able to serve it directly. Most of these responses contain some location information telling where to find the requested resource; user-agents often then retrieve it without further user interaction. The most common responses of this type are <code><a href="/de/HTTP/HTTP_response_codes#301">301 Moved Permanently</a></code>, indicating that the URI given is no longer valid and has been moved to another place, and <code><a href="/de/HTTP/HTTP_response_codes#302">302 Found</a></code> which indicates that the resource has been <em>temporarily</em> moved to another place.
+  <div class="note"><strong>Note:</strong> For webmasters, it is recommended to set up a <code><a href="/de/HTTP/HTTP_response_codes#301">301 Moved Permanently</a></code> redirection when moving pages to another URI, during a site reorganization for example. That allows users following links to still reach the resource and it also teaches search engines and other services the new location of the resource, so that they can transfer their metadata to it. It is also important to add adequate cache headers to the <code><a href="/de/HTTP/HTTP_response_codes#301">301 Moved Permanently</a></code> response so that this information is cached by the client and prevents it from making unnecessary requests to the original URI prior to fetching the resource itself.</div>
+ </li>
+ <li><dfn>Client error responses</dfn> (of the form <code>4xx</code>) indicate that the request sent by the client is either invalid, incomplete, or doesn't have enough rights to be performed. The most common such response is <code><a href="/de/HTTP/HTTP_response_codes#404">404 Not Found</a></code> which is sent back when the URI requested doesn't exist, but a few others are often presented to the end user, like <code><a href="/de/HTTP/HTTP_response_codes#400">400 Bad Request</a></code> sent when the request isn't a valid HTTP request (as this shouldn't happen but may indicate a bug into the user agent or, less likely, the server) or <code><a href="/de/HTTP/HTTP_response_codes#403">403 Forbidden</a></code>, sent when the client request a resource that does exist but isn't allowed to be transmitted (like a directory content).</li>
+ <li><dfn>Server error responses</dfn> (of the form <code>5xx</code>) indicate that the server had a problem handling the valid client request. The two most common such responses are <code><a href="/de/HTTP/HTTP_response_codes#500">500 Internal Server Error</a></code>, a generic error code indicating a bug in the server or <code><a href="/de/HTTP/HTTP_response_codes#503">503 Service Unavailable</a></code> indicating that the server cannot process the request due to a temporary problem, like a disabled service for maintenance purposes or the non-availability of a database.</li>
+</ul>
+
+<p>A web developer shouldn't encounter many other response codes, but people building requests using the <code><a href="/de/nsIXMLHttpRequest">XMLHTTPRequest</a></code> function may hit <a href="/de/HTTP/HTTP_response_codes">less usual response codes</a>.</p>
+
+<h3 id="Mehr_über_Weiterleitungsantworten">Mehr über Weiterleitungsantworten</h3>
+
+<p>Starting in Gecko 9.0 {{ geckoRelease("9.0") }}, redirections (such as 301 and 307) that specify a <code>javascript:</code> URI are no longer performed. Instead, a bad connection error is presented. This helps avoid cross-site scripting attacks. See {{ bug(255119) }} if you want more details.</p>
+
+<h2 id="HTTP-Headers">HTTP-Headers</h2>
+
+<p>HTTP-Kopfdaten ermöglichen the client and the server to pass additional information with the request or the response. A request header consists of its case-insensitive name followed by a colon ':', then by its value (without CRLF in it). Leading white space before the value is ignored.</p>
+
+<p>Headers are grouped according the context in which they may appear:</p>
+
+<dl>
+ <dt>Allgemeine Kopfdaten</dt>
+ <dd>These headers apply to both requests and responses but are unrelated to the data eventually transmitted in the body. They therefore apply only to the message being transmitted. There are only a few of them and new ones cannot been added without increasing the version number of the HTTP protocol. The exhaustive list for HTTP/1.1 is {{ httpheader("Cache-Control") }}, {{ httpheader("Connection") }}, {{ httpheader("Date") }}, {{ httpheader("Pragma") }}, {{ httpheader("Trailer") }}, {{ httpheader("Transfer-Encoding") }}, {{ httpheader("Upgrade") }}, {{ httpheader("Via") }} and {{ httpheader("Warning") }}.</dd>
+ <dt>Anfragekopfdaten</dt>
+ <dd>These headers give more precise information about the resource to be fetched or about the client itself. Among them one find <a href="/de/HTTP_Caching_FAQ">cache-related headers</a>, transforming a GET method in a conditional GET, like {{ httpheader("If-Modified-Since") }}, user-preference information like {{ httpheader("Accept-Language") }} or {{ httpheader("Accept-Charset") }} or plain client information like {{ httpheader("User-Agent") }}. New request headers cannot officially be added without increasing the version number of the HTTP protocol. But, it is common for new request headers to be added if both the server and the client agree on their meaning. In that case, a client should not assume that they will be handled adequately by the server; unknown request headers are handled as <em>entity headers</em>.</dd>
+ <dt>Antwortkopfdaten</dt>
+ <dd>These headers give more information about the resource sent back, like its real location ({{ httpheader("Location") }}) or about the server itself, like its name and version ({{ httpheader("Server") }}). New response headers cannot be added without increasing the version number of the HTTP protocol. But, it is common for new response headers to be added if both the server and the client agree on their meaning. In that case, a server should not assume that they will be handled adequately by the client ; unknown response headers are handled as <em>entity headers</em>.</dd>
+ <dt>Entitätskopfdaten</dt>
+ <dd>Diese Kopfdaten beinhalten mehr Informationen über den Körper der Entität, wie ihre Länge ({{ httpheader("Content-Length") }}), eine Identifikationsprüfsumme ({{ httpheader("Content-MD5") }}) oder ihren MIME-Typ ({{ httpheader("Content-Type") }}). Neue Entitätskopfdaten können ohne Erhöhung der Versionsnummer des HTTP-Protokolls hinzugefügt werden.</dd>
+</dl>
+
+<p>Kopfdaten können auch nach ihrer Handhabung durch puffernde und nicht-puffernde Proxys gruppiert werden:</p>
+
+<dl>
+ <dt>Ende-zu-Ende-Kopfdaten</dt>
+ <dd>These headers must be transmitted to the final recipient of the message; that is, the server for a request message or the client for a response message. Such a header means that intermediate proxies must retransmit it unmodified and also that caches must store it.</dd>
+ <dt>Sprung-zu-Sprung-Kopfdaten</dt>
+ <dd>Diese Kopfdaten sind nur für eine einzelne Verbindung auf Transportebene von Bedeutung und dürfen von Proxys nicht weitergeleitet oder gepuffert werden. Solche Kopfdaten sind: {{ httpheader("Connection") }}, {{ httpheader("Keep-Alive") }}, {{ httpheader("Proxy-Authenticate") }}, {{ httpheader("Proxy-Authorization") }}, {{ httpheader("TE") }}, {{ httpheader("Trailers") }}, {{ httpheader("Transfer-Encoding") }} und {{ httpheader("Upgrade") }}. Zu Beachten ist, dass nur Sprung-zu-Sprung-Kopfdaten {{ httpheader("Connection") }} bei der Verwendung der Allgemeinen Kopfdaten gesetzt werden dürfen.</dd>
+</dl>
+
+<p>In order to learn about the specific semantic of each header, see its entry in the <a href="/de/HTTP/Headers">comprehensive list of HTTP headers</a>.</p>
+
+<h3 id="Nützliche_Anfragekopfdaten">Nützliche Anfragekopfdaten</h3>
+
+<p>Among the numerous <a href="/de/HTTP/Headers">HTTP request headers</a>, several are especially useful when set correctly. If you are building your own requests, by using <code><a href="/de/DOM/XMLHttpRequest">XMLHTTPRequest</a></code> or when writing an extension and sending <a href="/de/Setting_HTTP_request_headers">custom HTTP requests via XPCOM</a>, then it is important to ensure the presence of headers that are often set by browsers based on the preferences of the user.</p>
+
+<dl>
+ <dt>Steuern der Ressourcensprache</dt>
+ <dd>Most user-agents, like Firefox, allow the user to set a preference for the language for receiving a resource. The browser translate this into an {{ httpheader("Accept-Language") }} header. It is good practice for web developers, when building specific HTTP requests, to include such a header too.</dd>
+ <dt>Verwenden des bedingten GET</dt>
+ <dd>Caching is a major tool to accelerate the display of web pages. Even when parts of a webpage are refreshed via an <code><a href="/de/DOM/XMLHttpRequest">XMLHTTPRequest</a></code>:, it is a good idea to use the {{ httpheader("If-Modified-Since") }} header (and other similar ones) in order to fetch the new content only if it has changed. This approach lowers the burden on the network.</dd>
+</dl>
+
+<h3 id="Nützliche_Antwortkopfdaten">Nützliche Antwortkopfdaten</h3>
+
+<p>The configuration of a web server is a critical part to ensure good performance and optimal security of a web site. Among the <a href="/de/HTTP/Headers">numerous HTTP response headers</a>, several are of specific importance and should be configured on the server</p>
+
+<h4 id="Restricting_framing">Restricting framing</h4>
+
+<p>Several cross-site scripting (XSS) attacks take advantage of the ability to put third-party content inside an {{ HTMLElement("frame") }} or {{ HTMLElement("iframe") }}. In order to mitigate that risk, modern browsers have introduced the <code><a href="/de/Security/CSP/CSP_policy_directives#frame-ancestors">CSP frame-ancestors directive</a></code>. By setting it with the value <code>'none'</code>, it prevents the browser from displaying this resource inside of a frame. Using it on critical resources (like those containing a formularies or critical information) will reduce the risk caused by XSS attacks. Note that this specific HTTP response header is not the only way to mitigate XSS risks; other techniques, like setting some <a href="/de/Security/CSP/Introducing_Content_Security_Policy">Content Security Policies</a>, may be helpful too.</p>
+
+<h4 id="Komprimierung">Komprimierung</h4>
+
+<p>Minimizing the amount of data transferred accelerates the display of a web page. Though most techniques, like <a href="/de/CSS/CSS_Sprites">CSS Sprites</a>, should be applied on the site itself, compression of data must be set at the web server level. If set, resources requested by the client with an {{ httpheader("Accept-Encoding") }} request header are compressed using the appropriate method and sent back with a {{ httpheader("Content-Encoding") }} response header. Setting these in Apache 2 servers is done by using the <a class="external" href="https://httpd.apache.org/docs/2.4/mod/mod_deflate.html">mod_deflate module</a>.</p>
+
+<div class="note"><strong>Note:</strong> Be aware that not all data formats can be efficiently compressed. Already-compressed media data, like JPEG images or most audio and video formats, do not shrink using another pass of compression. In fact, they often become larger due to the overhead of the compression method. It is important not to try to compress these resource types any further; there is no advantage in size and the compression/decompression mechanism is resource-intensive.</div>
+
+<h4 id="Steruern_des_Puffers">Steruern des Puffers</h4>
+
+<p><a href="/de/HTTP_Caching_FAQ">HTTP Caching</a> is a technique that prevents the same resource from being fetched several times if it hasn't change. Configuring the server with the correct response headers allows the user-agent to adequately cache the data. In order to do that, be sure that:</p>
+
+<ul>
+ <li>Any static resource provides an {{ httpheader("Expires") }} response header that is set to far in the future. That way, the resource may stay in the cache until the user-agent flushes it for its own reasons (like reaching its cache size limit).
+  <div class="note"><strong>Note: </strong>On Apache, use the ExpiresDefault directive in your .htaccess to define a relative expires: <code>ExpiresDefault "access plus 1 month"</code>.</div>
+ </li>
+ <li>Any dynamic resource provides a {{ httpheader("Cache-control") }} response header. Theoretically, any HTTP request done through a <a href="/de/HTTP#Safe_Methods">safe method</a> (GET or HEAD) or even through a solely <a href="/de/HTTP#Idempotent_Methods">idempotent one</a> (DELETE, PUT) may be cached; but in practice careful study is needed to determine if the caching of the response may lead to inappropriate side-effects.</li>
+</ul>
+
+<h4 id="Setzen_der_richtigen_MIME-Typen">Setzen der richtigen MIME-Typen</h4>
+
+<p>The MIME type is the mechanism to tell the client the kind of document transmitted: the extension of a file name has no meaning on the web. It is therefore important that the server is correctly set up so that the correct MIME type is transmitted with each document: user-agents often use this MIME-type to determine what default action to do when a resource is fetched.</p>
+
+<div class="note"><strong>Note: </strong>
+
+<ul>
+ <li>On Apache, one can match file extensions with a given MIME type in the .htaccess using the <code>AddType</code> type directive like <code>AddType image/jpeg jpg.</code></li>
+ <li>Most web servers send unknown-type resources using the default <code>application/octet-stream</code> MIME type; for security reasons, most browsers, like Firefox, do not allow setting a custom default action for such resources and force the user to store it to disk in order to use it. Some common cases of often incorrectly configured servers happens for the following file types:
+  <ul>
+   <li>
+    <p>Rar-encoded files. The ideal would be to be able to set the real type of the encoded files; this often is not possible (as it may not be known to the server and these files may contains several resource of different types). In that case, configure the server to send the <code>application/x-rar-compressed </code>MIME type or some users won't be able to define a useful default action for them.</p>
+   </li>
+   <li>
+    <p>Audio and video files. Only resources with the proper MIME Type will be recognized and played, using a {{ HTMLElement("video") }} or {{ HTMLElement("audio") }} elements. Be sure to <a href="/de/Media_formats_supported_by_the_audio_and_video_elements">use the correct MIME type for audio and video resources</a>.</p>
+   </li>
+   <li>
+    <p>Proprietary file types. Pay special attention when serving a proprietary file type. Be sure not to forget to add an x-prefixed type for it; otherwise, special handling won't be possible. This is especially true with resources using the <a class="external" href="https://en.wikipedia.org/wiki/Keyhole_Markup_Language">Keyhole Markup Language</a>, which should be served as <code>application/vnd.google-earth.kml+xml </code>for an optimal user experience.</p>
+   </li>
+  </ul>
+ </li>
+</ul>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/Controlling_DNS_prefetching">Controlling DNS prefetching</a></li>
+ <li>The <a href="/de/HTTP_Pipelining_FAQ">HTTP pipelining FAQ</a></li>
+ <li><a href="/de/Web_Development/HTTP_cookies">HTTP cookies</a></li>
+ <li><a href="/de/docs/HTTP/Headers">HTTP Headers</a></li>
+ <li><a href="/de/docs/HTTP/Basic_access_authentication">Basic access authentication</a></li>
+ <li><a href="/de/docs/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+</ul>
diff --git a/files/de/web/http/methods/connect/index.html b/files/de/web/http/methods/connect/index.html
new file mode 100644
index 0000000000..6372973577
--- /dev/null
+++ b/files/de/web/http/methods/connect/index.html
@@ -0,0 +1,84 @@
+---
+title: CONNECT
+slug: Web/HTTP/Methods/CONNECT
+translation_of: Web/HTTP/Methods/CONNECT
+---
+<div>{{HTTPSidebar}}</div>
+
+<div>
+<p>Die <strong>Methode HTTP <code>CONNECT</code></strong> startet die bidirektionale Kommunikation mit der angeforderten Ressource. Es kann verwendet werden, um einen Tunnel zu öffnen.</p>
+
+<p>Beispielsweise kann die CONNECT-Methode verwendet werden, um auf Websites zuzugreifen, die {{Glossary("SSL")}} ({{Glossary("HTTPS")}}) verwenden. Der Client fordert einen HTTP-Proxy-Server auf, die TCP-Verbindung zum gewünschten Ziel zu tunneln. Der Server fährt dann fort, die Verbindung im Namen des Clients herzustellen. Sobald die Verbindung vom Server hergestellt wurde, fährt der Proxy-Server mit dem Proxy des TCP-Streams zum und vom Client fort.</p>
+</div>
+
+<p><code>CONNECT </code>ist eine Hop-by-Hop-Methode.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Request hat einen Inhalt</th>
+   <td>Nein</td>
+  </tr>
+  <tr>
+   <th scope="row">Erfolgreicher response hat einen Inhalt</th>
+   <td>Ja</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Safe")}}</th>
+   <td>Nein</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Idempotent")}}</th>
+   <td>Nein</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Cacheable")}}</th>
+   <td>Nein</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubt in <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML forms</a></th>
+   <td>Nein</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">CONNECT www.example.com:443 HTTP/1.1
+</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Einige Proxy-Server benötigen möglicherweise die Berechtigung, um einen Tunnel zu erstellen. Siehe auch den Header {{HTTPHeader("Proxy-Authorization")}}.</p>
+
+<pre class="line-numbers  language-html">CONNECT server.example.com:80 HTTP/1.1
+Host: server.example.com:80
+Proxy-Authorization: basic aGVsbG86d29ybGQ=</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "CONNECT", "4.3.6")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.methods.CONNECT")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{Glossary("Proxy server")}}</li>
+ <li>{{HTTPHeader("Proxy-Authorization")}}</li>
+</ul>
diff --git a/files/de/web/http/methods/delete/index.html b/files/de/web/http/methods/delete/index.html
new file mode 100644
index 0000000000..c054a834f9
--- /dev/null
+++ b/files/de/web/http/methods/delete/index.html
@@ -0,0 +1,98 @@
+---
+title: DELETE
+slug: Web/HTTP/Methods/DELETE
+translation_of: Web/HTTP/Methods/DELETE
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Die <strong>Request-Methode HTTP DELETE</strong> löscht die angegebene Ressource.</p>
+
+<p> </p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Request hat einen Körper</th>
+   <td>Kann</td>
+  </tr>
+  <tr>
+   <th scope="row">Erfolgreiche Response hat Körper</th>
+   <td>Kann</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Safe")}}</th>
+   <td>Nein</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Idempotent")}}</th>
+   <td>Ja</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Cacheable")}}</th>
+   <td>Nein</td>
+  </tr>
+  <tr>
+   <th scope="row">In <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms">HTML Formularen</a> erlaubt </th>
+   <td>Nein</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">DELETE /file.html HTTP/1.1
+</pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="Request">Request</h3>
+
+<pre>DELETE /file.html HTTP/1.1</pre>
+
+<h3 id="Responses">Responses</h3>
+
+<p>Bei erfolgreicher Anwendung einer <code>DELETE</code>-Methode sind mehrere Antwortzustandscodes möglich:</p>
+
+<ul>
+ <li>Einen {{HTTPStatus("202")}} (<code>Akzeptiert</code>) Statuscode, wenn die Aktion wahrscheinlich erfolgreich sein wird, aber noch nicht durchgeführt wurde.</li>
+ <li>Einen {{HTTPStatus("204")}} (<code>Kein Inhalt</code>) Statuscode, wenn die Aktion durchgeführt wurde und keine weiteren Informationen zu liefern sind.</li>
+ <li>Einen {{HTTPStatus("200")}} (<code>OK</code>) Statuscode, wenn die Aktion ausgeführt wurde und die Antwortnachricht eine Darstellung enthält, die den Status beschreibt.</li>
+</ul>
+
+<pre>HTTP/1.1 200 OK
+Date: Wed, 21 Oct 2015 07:28:00 GMT
+
+&lt;html&gt;
+  &lt;body&gt;
+    &lt;h1&gt;File deleted.&lt;/h1&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("7231", "DELETE", "4.3.5")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.methods.DELETE")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>HTTP status: {{HTTPStatus("200")}}, {{HTTPStatus("202")}}, {{HTTPStatus("204")}}</li>
+</ul>
diff --git a/files/de/web/http/methods/get/index.html b/files/de/web/http/methods/get/index.html
new file mode 100644
index 0000000000..b0ab2b3654
--- /dev/null
+++ b/files/de/web/http/methods/get/index.html
@@ -0,0 +1,75 @@
+---
+title: GET
+slug: Web/HTTP/Methods/GET
+tags:
+  - Anfragemethode
+  - HTTP
+  - Referenz
+translation_of: Web/HTTP/Methods/GET
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Die <strong>HTTP <code>GET</code> Methode</strong> fordert eine Darstellung einer spezifischen Ressource an. Anfragen die <code>GET</code> benutzen, sollten nur Daten abholen.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Anfrage hat einen Inhalt (Body)</th>
+   <td>Nein</td>
+  </tr>
+  <tr>
+   <th scope="row">Erfolgreiche Antwort hat einen Inhalt (Body)</th>
+   <td>Ja</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Safe")}}</th>
+   <td>Ja</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Idempotent")}}</th>
+   <td>Ja</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Cacheable")}}</th>
+   <td>Ja</td>
+  </tr>
+  <tr>
+   <th scope="row">Erlaubt in HTML Formularen</th>
+   <td>Ja</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">GET /index.html
+</pre>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Titel</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "GET", "4.3.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.methods.GET")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Headers">HTTP Headers</a></li>
+ <li>{{HTTPHeader("Range")}}</li>
+ <li><a href="/en-US/docs/Web/HTTP/Methods/POST">POST</a></li>
+</ul>
diff --git a/files/de/web/http/methods/index.html b/files/de/web/http/methods/index.html
new file mode 100644
index 0000000000..ddeff2a293
--- /dev/null
+++ b/files/de/web/http/methods/index.html
@@ -0,0 +1,75 @@
+---
+title: HTTP request methods
+slug: Web/HTTP/Methods
+tags:
+  - HTTP
+  - Methods
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/HTTP/Methods
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP defines a set of <strong>request methods</strong> to indicate the desired action to be performed for a given resource. Although they can also be nouns, these request methods are sometimes referred as <em>HTTP verbs</em>. Each of them implements a different semantic, but some common features are shared by a group of them: e.g. a request method can be {{glossary("safe")}}, {{glossary("idempotent")}}, or {{glossary("cacheable")}}.</p>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/HTTP/Methods/GET">GET</a></code></dt>
+ <dd>The <code>GET</code> method requests a representation of the specified resource. Requests using <code>GET</code> should only retrieve data.</dd>
+ <dt><code><a href="/en-US/docs/Web/HTTP/Methods/HEAD">HEAD</a></code></dt>
+ <dd>The <code>HEAD</code> method asks for a response identical to that of a <code>GET</code> request, but without the response body.</dd>
+ <dt><code><a href="/en-US/docs/Web/HTTP/Methods/POST">POST</a></code></dt>
+ <dd>The <code>POST</code> method is used to submit an entity to the specified resource, often causing a change in state or side effects on the server.</dd>
+ <dt><code><a href="/en-US/docs/Web/HTTP/Methods/PUT">PUT</a></code></dt>
+ <dd>
+ <p>The <code>PUT</code> method replaces all current representations of the target resource with the request payload.</p>
+ </dd>
+ <dt><code><a href="/en-US/docs/Web/HTTP/Methods/DELETE">DELETE</a></code></dt>
+ <dd>The <code>DELETE</code> method deletes the specified resource.</dd>
+ <dt><code><a href="/en-US/docs/Web/HTTP/Methods/CONNECT">CONNECT</a></code></dt>
+ <dd>
+ <p>The <code>CONNECT</code> method establishes a tunnel to the server identified by the target resource.</p>
+ </dd>
+ <dt><code><a href="/en-US/docs/Web/HTTP/Methods/OPTIONS">OPTIONS</a></code></dt>
+ <dd>The <code>OPTIONS</code> method is used to describe the communication options for the target resource.</dd>
+ <dt><code><a href="/en-US/docs/Web/HTTP/Methods/TRACE">TRACE</a></code></dt>
+ <dd>
+ <p>The <code>TRACE</code> method performs a message loop-back test along the path to the target resource.</p>
+ </dd>
+ <dt><code><a href="/en-US/docs/Web/HTTP/Methods/PATCH">PATCH</a></code></dt>
+ <dd>The <code>PATCH</code> method is used to apply partial modifications to a resource.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Request methods", "4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+   <td>Specifies GET, HEAD, POST, PUT, DELETE, CONNECT, OPTIONS, TRACE.</td>
+  </tr>
+  <tr>
+   <td>{{RFC("5789", "Patch method", "2")}}</td>
+   <td>PATCH Method for HTTP</td>
+   <td>Specifies PATCH.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">To contribute to this compatibility data, please write a pull request against this file: <a href="https://github.com/mdn/browser-compat-data/blob/master/http/methods.json">https://github.com/mdn/browser-compat-data/blob/master/http/methods.json</a>.</p>
+
+<p>{{Compat("http/methods")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Headers">HTTP headers</a></li>
+</ul>
diff --git a/files/de/web/http/status/100/index.html b/files/de/web/http/status/100/index.html
new file mode 100644
index 0000000000..d409a1cade
--- /dev/null
+++ b/files/de/web/http/status/100/index.html
@@ -0,0 +1,46 @@
+---
+title: 100 Continue
+slug: Web/HTTP/Status/100
+tags:
+  - HTTP
+  - Informationell
+  - Statuscode
+translation_of: Web/HTTP/Status/100
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Der HTTP <strong><code>100 Continue</code></strong> Statuscode zeigt an, dass bisher alles in Ordnung ist und der Client mit der Anfrage fortfahren oder ihn ignorieren kann, sofern sie schon beendet ist.</p>
+
+<p>Damit ein Server die Header der Anfrage überprüft, muss ein Client in seiner ursprünglichen Anfrage ein <code>Expect: 100-continue</code> senden und einen <code>100 Continue</code> Statuscode als Antwort bekommen bevor der Inhalt gesendet wird.</p>
+
+<h2 id="Status">Status</h2>
+
+<pre class="syntaxbox">100 Continue</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Titel</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "100 Continue" , "6.2.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.100")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{HTTPHeader("Expect")}}</li>
+ <li>{{HTTPStatus(417)}}</li>
+</ul>
diff --git a/files/de/web/http/status/200/index.html b/files/de/web/http/status/200/index.html
new file mode 100644
index 0000000000..55b7cb9c81
--- /dev/null
+++ b/files/de/web/http/status/200/index.html
@@ -0,0 +1,57 @@
+---
+title: 200 OK
+slug: Web/HTTP/Status/200
+tags:
+  - '200'
+  - Erfolg
+  - HTTP
+  - HTTP-Statuscode
+  - Statuscode
+  - ok
+translation_of: Web/HTTP/Status/200
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Der HTTP-Statuscode <strong><code>200 OK</code></strong> gibt an, dass eine Anfrage erfolgreich verlaufen ist. Eine 200-Antwort ist standardmäßig im Cache speicherbar.</p>
+
+<p>Die Bedeutung eines Erfolgs hängt von der Art der Anfragemethode ab:</p>
+
+<ul>
+ <li>{{HTTPMethod("GET")}}: Die Datei wurde aufgerufen und wird im Body der Nachricht übertragen.</li>
+ <li>{{HTTPMethod("HEAD")}}: Die Entitätsüberschriften befinden sich im Body der Nachricht</li>
+ <li>{{HTTPMethod("POST")}}: Die Datei, welche das Ergebnis der Aktion darstellt, befindet sich im Body der Nachricht.</li>
+ <li>{{HTTPMethod("TRACE")}}: Der Body der Nachricht enthält die Anfrage so, wie sie der Server erhalten hat.</li>
+</ul>
+
+<p>Der Erfolg eines {{HTTPMethod("PUT")}} oder eines {{HTTPMethod("DELETE")}} ist oft kein <code>200</code> <code>OK</code> sondern ein {{HTTPStatus("204")}} <code>No Content</code> (oder ein {{HTTPStatus("201")}} <code>Created</code>, wenn die Datei das erste mal hochgeladen wird.).</p>
+
+<h2 id="Status">Status</h2>
+
+<pre class="syntaxbox">200 OK</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Titel</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "200 OK" , "6.3.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantik und Inhalt</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<p class="hidden">Die Kompabilitätstabelle welche sich in dieser Seite befindet wurde aus strukturierten Daten generiert. Wenn Sie dazu beitragen wollen, besuchen Sie bitte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und schicken Sie uns eine pull-request.</p>
+
+<p>{{Compat("http.status.200")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Methods">HTTP request methods</a></li>
+</ul>
diff --git a/files/de/web/http/status/201/index.html b/files/de/web/http/status/201/index.html
new file mode 100644
index 0000000000..e5ff236f90
--- /dev/null
+++ b/files/de/web/http/status/201/index.html
@@ -0,0 +1,43 @@
+---
+title: 201 Created
+slug: Web/HTTP/Status/201
+translation_of: Web/HTTP/Status/201
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Der Antwortcode HTTP <strong><code>201 Created</code></strong> Erfolgsstatus zeigt an, dass die Anfrage erfolgreich war und zur Erstellung einer Ressource geführt hat. Die neue Ressource wird effektiv erstellt, bevor diese Antwort zurückgesendet wird, und die neue Ressource wird im Hauptteil der Nachricht zurückgegeben, wobei ihre Position entweder die URL der Anforderung oder der Inhalt des {{HTTPHeader("Location")}} Headers ist.</p>
+
+<p>Der übliche Anwendungsfall für diesen Statuscode ist das Ergebnis einer {{HTTPMethod("POST")}} Anfrage.</p>
+
+<h2 id="Status">Status</h2>
+
+<pre class="syntaxbox notranslate">201 Created</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Titel</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("7231", "201 Created" , "6.3.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und senden Sie uns eine Pull-Anfrage.</div>
+
+<p>{{Compat("http.status.201")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Methods">HTTP request methods</a></li>
+</ul>
diff --git a/files/de/web/http/status/302/index.html b/files/de/web/http/status/302/index.html
new file mode 100644
index 0000000000..4e4df4bb9f
--- /dev/null
+++ b/files/de/web/http/status/302/index.html
@@ -0,0 +1,54 @@
+---
+title: 302 Found
+slug: Web/HTTP/Status/302
+tags:
+  - HTTP
+  - HTTP-Statuscode
+  - Statuscode
+  - Weiterleitung
+translation_of: Web/HTTP/Status/302
+---
+<div>{{HTTPSidebar}}</div>
+
+<div><span lang="de">Der HTTP-Statuscode </span><code><strong>302 Found</strong></code><span lang="de"> besagt, dass die angeforderte Ressource vorübergehend auf die URL verschoben wurde, die durch den {{HTTPHeader("Location")}}-Header angegeben wurde. Ein Browser folgt der Weiterleitung auf diese Seite, aber Suchmaschinen aktualisieren ihre Links auf die Ressource nicht (In SEO-Sprech sagt man, dass der 'link-juice' nicht an die neue URL gesendet wird).</span></div>
+
+<div></div>
+
+<div>Obwohl die Spezifikation verlangt, dass die Anfragemethode (und der Body der Anfrage) beim Folgen auf die Weiterleitung nicht verändert wird, setzen das nicht alle User-Agents um - man findet immer noch Programme, die hier Fehler haben Daher ist zu empfehlen, den Code <code>302</code> nur als Antwort auf die Anfragemethoden {{HTTPMethod("GET")}} und {{HTTPMethod("HEAD")}} auszugeben und ansonsten {{HTTPStatus("307")}} <code>Temporary Redirect</code> zu benutzen, wo ein Wechsel der Methode ausdrücklich verboten ist.</div>
+
+<div></div>
+
+<p>Falls Sie möchten, dass der User-Agent die Anfragemethode auf {{HTTPMethod("GET")}} ändert, benutzen Sie stattdessen den Code {{HTTPStatus("303")}} <code>See Other</code>. Das ist etwa nützlich, wenn Sie eine {{HTTPMethod("PUT")}}-Anfrage nicht mit der hochgeladenen Resource, sondern mit einer bestätigenden Nachricht wie "Sie haben XYZ erfolgreich hochgeladen." beantworten wollen.</p>
+
+<h2 id="Status">Status</h2>
+
+<pre class="syntaxbox">302 Found</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Titel</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "302 Found" , "6.4.3")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.302")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{HTTPStatus("307")}} <code>Temporary Redirect</code>, entspricht diesem Statuscode, lässt aber nie eine Änderung der Anfragemethode zu.</li>
+ <li>{{HTTPStatus("303")}} <code>See Other</code>, eine vorübergehende Weiterleitung, bei der die Anfragemethode auf {{HTTPMethod("GET")}} geändert werden soll.</li>
+ <li>{{HTTPStatus("301", "301 Moved Permanently")}} Die dauerhafte Weiterleitung.</li>
+</ul>
diff --git a/files/de/web/http/status/304/index.html b/files/de/web/http/status/304/index.html
new file mode 100644
index 0000000000..a5d5465634
--- /dev/null
+++ b/files/de/web/http/status/304/index.html
@@ -0,0 +1,61 @@
+---
+title: 304 Not Modified
+slug: Web/HTTP/Status/304
+tags:
+  - HTTP
+  - HTTP-Statuscode
+  - Statuscode
+  - Weiterleitung
+translation_of: Web/HTTP/Status/304
+---
+<div>{{HTTPSidebar}}</div>
+
+<div>
+<p>Der HTTP-Statuscode <code><strong>304 Not Modified </strong></code> gibt an, dass die angeforderten Ressourcen nicht erneut übertragen werden müssen. Es handelt sich um eine implizite Weiterleitung zu einer zwischengespeicherten Ressource. Dies geschieht, wenn die Anforderungsmethode {{glossary("safe")}} ist, wie eine {{HTTPMethod("GET")}}- oder {{HTTPMethod("HEAD")}}-Anfrage oder wenn die Anfrage bedingt ist und einen {{HTTPHeader("If-None-Match")}}- oder {{HTTPHeader("If-Modified-Since")}}-Header verwendet.</p>
+
+<p>Eine entsprechende Antwort mit {{HTTPStatus("200")}} <code>OK</code> hätte die Header {{HTTPHeader("Cache-Control")}}, {{HTTPHeader("Content-Location")}}, {{HTTPHeader("Date")}}, {{HTTPHeader("ETag")}}, {{HTTPHeader("Expires")}}, und {{HTTPHeader("Vary")}} enthalten.</p>
+</div>
+
+<div></div>
+
+<div class="note">
+<p>Many <a href="/en-US/docs/Tools/Network_Monitor">developer tools' network panels</a> of browsers create extraneous requests leading to <code>304</code> responses, so that access to the local cache is visible to developers.</p>
+</div>
+
+<h2 id="Status">Status</h2>
+
+<pre class="syntaxbox">304 Not Modified</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Titel</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7232", "304 Not Modified" , "4.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Conditional Requests</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.304")}}</p>
+
+<h2 id="Anmerkungen_zur_Kompatibilität">Anmerkungen zur Kompatibilität</h2>
+
+<ul>
+ <li>Browser verhalten sich unterschiedlich, wenn zu dieser Antwort im Rahmen einer persistenten Verbindung fälschlicherweise ein Body geliefert wird. Genaueres siehe <a href="/en-US/docs/Web/HTTP/Status/204">204 No Content</a>.</li>
+</ul>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{HTTPHeader("If-Modified-Since")}}</li>
+ <li>{{HTTPHeader("If-None-Match")}}</li>
+</ul>
diff --git a/files/de/web/http/status/400/index.html b/files/de/web/http/status/400/index.html
new file mode 100644
index 0000000000..c4b5ce6b89
--- /dev/null
+++ b/files/de/web/http/status/400/index.html
@@ -0,0 +1,36 @@
+---
+title: 400 Bad Request
+slug: Web/HTTP/Status/400
+tags:
+  - Clientfehler
+  - HTTP
+  - HTTP-Statuscode
+  - Statuscode
+translation_of: Web/HTTP/Status/400
+---
+<p>{{HTTPSidebar}}</p>
+
+<p>Der <a href="/de/docs/Web/HTTP">HTTP</a>-Statuscode <code><strong>400 Bad Request</strong></code> gibt an, dass der Server die Anfrage nicht verarbeiten kann, weil anscheinend ein clientseitiger Fehler geschehen ist (z.B. eine syntaktisch falsche Anfrage).</p>
+
+<div class="warning">
+<p>Der Client sollte diese Anfrage nicht unmodifiziert wiederholen.</p>
+</div>
+
+<h2 id="Status">Status</h2>
+
+<pre class="syntaxbox">400 Bad Request </pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Titel</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "400 Bad Request" , "6.5.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/de/web/http/status/401/index.html b/files/de/web/http/status/401/index.html
new file mode 100644
index 0000000000..be399c6451
--- /dev/null
+++ b/files/de/web/http/status/401/index.html
@@ -0,0 +1,57 @@
+---
+title: 401 Unauthorized
+slug: Web/HTTP/Status/401
+tags:
+  - HTTP
+  - Statuscode
+translation_of: Web/HTTP/Status/401
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Der <a href="/de/docs/Web/HTTP">HTTP</a>-Statuscode <strong><code>401 Unauthorized</code></strong> gibt an, dass der Server die Anfrage aufgrund fehlender oder ungültiger Authentifizierung abgelehnt hat.</p>
+
+<p>Dieser Statuscode wird zusammen mit dem {{HTTPHeader("WWW-Authenticate")}}-Header gesendet, welcher Informationen zur korrekten Authentifizierung bereithält.</p>
+
+<p>Dieser Statuscode ist ähnlich zu {{HTTPStatus("403")}}, gibt jedoch an, dass eine Authentifizierung möglich ist.</p>
+
+<h2 id="Status">Status</h2>
+
+<pre class="syntaxbox">401 Unauthorized</pre>
+
+<h2 id="Beispiel_für_eine_Antwort">Beispiel für eine Antwort</h2>
+
+<pre>HTTP/1.1 401 Unauthorized
+Date: Wed, 21 Oct 2015 07:28:00 GMT
+WWW-Authenticate: Basic realm="Zugang zu geschuetzter Seite"</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Titel</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7235", "401 Unauthorized" , "3.1")}}</td>
+   <td>HTTP/1.1: Authentication</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<p class="hidden">Die Kompatibilitäts-Tabelle wird aus strukturierten Daten generiert. Falls Sie dazu beitragen möchten, besuchen Sie bitte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und senden Sie uns dort einen "pull request".</p>
+
+<p>{{Compat("http.status.401")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Authentication">HTTP authentication</a></li>
+ <li>{{HTTPHeader("WWW-Authenticate")}}</li>
+ <li>{{HTTPHeader("Authorization")}}</li>
+ <li>{{HTTPHeader("Proxy-Authorization")}}</li>
+ <li>{{HTTPHeader("Proxy-Authenticate")}}</li>
+ <li>{{HTTPStatus("403")}}, {{HTTPStatus("407")}}</li>
+</ul>
diff --git a/files/de/web/http/status/403/index.html b/files/de/web/http/status/403/index.html
new file mode 100644
index 0000000000..64e71e6c5f
--- /dev/null
+++ b/files/de/web/http/status/403/index.html
@@ -0,0 +1,55 @@
+---
+title: 403 Forbidden
+slug: Web/HTTP/Status/403
+tags:
+  - Client-Fehler
+  - Clientfehler
+  - HTTP
+  - HTTP-Statuscode
+  - Statuscode
+translation_of: Web/HTTP/Status/403
+---
+<p>{{HTTPSidebar}}</p>
+
+<p>Der HTTP <strong><code>403 Forbidden</code></strong> Statuscode zeigt an, dass der Server die Anfrage zwar verstanden hat, aber sich weigert, sie zuzulassen.</p>
+
+<p>Dieser Status ist {{HTTPStatus("401")}} ähnlich, aber ein erneutes Anmelden wird am Ergebnis nichts ändern. Der Zugriff ist dauerhaft verboten und liegt an der Anwendungslogik, wie etwa unzureichenden Rechten für eine Ressource.</p>
+
+<h2 id="Status">Status</h2>
+
+<pre class="syntaxbox">403 Forbidden</pre>
+
+<h2 id="Beispielantwort">Beispielantwort</h2>
+
+<pre>HTTP/1.1 403 Forbidden
+Date: Wed, 21 Oct 2015 07:28:00 GMT
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Titel</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("7231", "403 Forbidden" , "6.5.3")}}</td>
+   <td>HTTP/1.1: Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität </h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.403")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{HTTPStatus("401")}}</li>
+</ul>
diff --git a/files/de/web/http/status/404/index.html b/files/de/web/http/status/404/index.html
new file mode 100644
index 0000000000..ae28507d6a
--- /dev/null
+++ b/files/de/web/http/status/404/index.html
@@ -0,0 +1,62 @@
+---
+title: 404 Not Found
+slug: Web/HTTP/Status/404
+tags:
+  - Client-Fehler
+  - Clientfehler
+  - HTTP
+  - HTTP-Statuscode
+  - Statuscode
+translation_of: Web/HTTP/Status/404
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Der HTTP-Statuscode <code><strong>404</strong></code><strong><code> Not Found</code></strong> zeigt an, dass der Server die angeforderte Ressource nicht finden konnte. Dieser Statuscode ist wahrscheinlich einer der bekanntesten, da er so häufig im Web auftritt. Oft spricht man dann von kaputten oder toten Links, die durch <a href="https://de.wikipedia.org/wiki/Toter_Link">Linkverrottung ("link rot")</a> entstehen.</p>
+
+<p>Ein 404-Statuscode zeigt nicht an, ob es sich dabei um einen temporären oder permanenten Zustand handelt. Wenn bekannt ist, dass die Ressource wahrscheinlich dauerhaft nicht verfügbar sein wird, ist {{HTTPStatus(410)}} (Gone) einem Status 404 vorzuziehen.</p>
+
+<h2 id="Status">Status</h2>
+
+<pre class="syntaxbox">404 Not Found</pre>
+
+<h2 id="Eigene_Fehler-Seiten">Eigene Fehler-Seiten</h2>
+
+<p>Viele Webseiten passen das Aussehen einer 404 Seite an, damit sie dem Benutzer Unterstützung anbieten kann. Apache-Server können mit einer <code>.htaccess</code>-Datei und folgendem Code-Schnipsel konfiguriert werden.</p>
+
+<pre>ErrorDocument 404 /notfound.html</pre>
+
+<p>Sie können sich auch von der <a href="/de/404">404 Seite des MDN</a> inspirieren lassen.</p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Es gibt eine <a href="https://www.google.de/search?q=awesome+404+pages">schier unerschöpfliche Quelle</a> an Inspiration für das Design einer 404-Seite. Beachten Sie aber, dass eine solche Seite nicht nur witzig sein soll, sondern es auch <a href="http://alistapart.com/article/perfect404">gute fachliche Herangehensweisen</a> gibt, die für die Besucher Ihrer Webseite hilfreich sind.</p>
+</div>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Titel</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "404 Not Found" , "6.5.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{HTTPStatus(410)}}</li>
+ <li>
+  <p>{{interwiki("wikipedia", "HTTP_404", "Wikipedia: HTTP 404")}}</p>
+ </li>
+</ul>
diff --git a/files/de/web/http/status/409/index.html b/files/de/web/http/status/409/index.html
new file mode 100644
index 0000000000..4545b82ffd
--- /dev/null
+++ b/files/de/web/http/status/409/index.html
@@ -0,0 +1,40 @@
+---
+title: 409 Konflikt
+slug: Web/HTTP/Status/409
+tags:
+  - Client fehler
+  - HTTP
+  - HTTP Status Code
+  - Referenz
+translation_of: Web/HTTP/Status/409
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Der HTTP <code><strong>409 Conflict</strong></code> Antwort Status Code indiziert einen Anfragenkonflikt mit dem aktuellen Status des Servers.</p>
+
+<p>Konflikte entstehen meistens als Antwort auf eine {{HTTPMethod("PUT")}} Anfrage. Zum Beispiel erhält man eine 409 Antwort wenn man eine Datei hochlädt, die älter ist als die Datei auf dem Server, wodurch ein Versionskonflikt entsteht</p>
+
+<h2 id="Status">Status</h2>
+
+<pre class="syntaxbox">409 Conflict</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "409 Conflict" , "6.5.8")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTTPMethod("PUT")}}</li>
+</ul>
diff --git a/files/de/web/http/status/410/index.html b/files/de/web/http/status/410/index.html
new file mode 100644
index 0000000000..35524d6806
--- /dev/null
+++ b/files/de/web/http/status/410/index.html
@@ -0,0 +1,53 @@
+---
+title: 410 Gone
+slug: Web/HTTP/Status/410
+tags:
+  - Client-Fehler
+  - HTTP
+  - HTTP-Statuscode
+  - Referenz
+  - Statuscode
+translation_of: Web/HTTP/Status/410
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Der HTTP-Statuscode <code><strong>410</strong></code><strong><code> Gone</code></strong> zeigt an, dass der Zugriff auf die Zielressource über den Server nicht länger möglich ist und dieser Zustand wahrscheinlich permanent sein wird.</p>
+
+<p>Wenn Sie sich nicht sicher sind, ob es sich um einen temporären oder permanenten Zustand handeln wird, sollte ein {{HTTPStatus(404)}}-Statuscode verwendet werden.</p>
+
+<p>Das Englische "Gone" lässt sich in diesem Zusammenhang am besten mit "weg" oder "verschwunden" übersetzen, im vergleich zum "nicht gefunden" von {{HTTPStatus(404)}}</p>
+
+<div class="note">
+<p>Anmerkung: Eine Antwort mit Statuscode 410 ist standardmäßig im Cache speicherbar.</p>
+</div>
+
+<h2 id="Status">Status</h2>
+
+<pre class="syntaxbox">410 Gone</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Titel</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "410 Gone" , "6.5.9")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.410")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{HTTPStatus(404)}}</li>
+</ul>
diff --git a/files/de/web/http/status/414/index.html b/files/de/web/http/status/414/index.html
new file mode 100644
index 0000000000..1a24bd3832
--- /dev/null
+++ b/files/de/web/http/status/414/index.html
@@ -0,0 +1,47 @@
+---
+title: 414 URI Too Long
+slug: Web/HTTP/Status/414
+tags:
+  - Clientfehler
+  - Fehlermeldung
+  - HTTP
+  - HTTP-Statuscode
+  - Statuscode
+translation_of: Web/HTTP/Status/414
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Der HTTP-Statuscode <code><strong>414 URI Too Long</strong></code> zeigt an, dass die vom Client angefragte URI länger ist als das, was der Server zu verarbeiten bereit ist.</p>
+
+<p>Es gibt einige seltene Fälle, in denen so etwas passieren kann:</p>
+
+<ul>
+ <li>wenn ein Client fälschlicherweise eine {{HTTPMethod("POST")}}- in eine  {{HTTPMethod("GET")}}-Anfrage umgewandelt hat und die bei der Anfrage übergebenen Daten umfangreich sind,</li>
+ <li>wenn der Client in eine Schleife von Weiterleitungen geraten ist (beispielsweise, wenn URIs immer wieder auf eine durch eine Ergänzung verlängerte URI verweisen) oder</li>
+ <li>wenn der Server von einem Client angegriffen wird, der versucht, durch die Anfrage sehr langer URIs Sicherheitslücken auszunutzen.</li>
+</ul>
+
+<h2 id="Status">Status</h2>
+
+<pre class="syntaxbox">414 URI Too Long</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Titel</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "414 URI Too Long" , "6.5.12")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{Glossary("URI")}}</li>
+</ul>
diff --git a/files/de/web/http/status/418/index.html b/files/de/web/http/status/418/index.html
new file mode 100644
index 0000000000..e0bf111cdc
--- /dev/null
+++ b/files/de/web/http/status/418/index.html
@@ -0,0 +1,47 @@
+---
+title: 418 I'm a teapot
+slug: Web/HTTP/Status/418
+tags:
+  - Aprilscherz
+  - Fehlermeldung
+  - HTTP
+  - HTTP-Statuscode
+  - Statuscode
+translation_of: Web/HTTP/Status/418
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Der HTTP-Statuscode <strong><code>418 I'm a teapot</code></strong> zeigt an, dass der Server sich weigert, Kaffee zu kochen, weil er ein Teekessel ist. Diese Fehlermeldung bezieht sich auf das <em>Hyper Text Coffee Pot Control Protocol</em>, einen Aprilscherz aus 1998.</p>
+
+<h2 id="Status">Status</h2>
+
+<pre class="syntaxbox">418 I'm a teapot</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("2324", "418 I'm a teapot" , "2.3.2")}}</td>
+   <td>Hyper Text Coffee Pot Control Protocol (HTCPCP/1.0): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.418")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{interwiki("wikipedia", "Hyper Text Coffee Pot Control Protocol", "Wikipedia: Hyper Text Coffee Pot Control Protocol")}}</li>
+</ul>
diff --git a/files/de/web/http/status/500/index.html b/files/de/web/http/status/500/index.html
new file mode 100644
index 0000000000..c7c0be2091
--- /dev/null
+++ b/files/de/web/http/status/500/index.html
@@ -0,0 +1,42 @@
+---
+title: 500 Internal Server Error
+slug: Web/HTTP/Status/500
+tags:
+  - Fehlermeldung
+  - HTTP
+  - HTTP-Statuscode
+  - Server-Fehler
+  - Serverfehler
+  - Statuscode
+translation_of: Web/HTTP/Status/500
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Der HTTP <code><strong>500</strong></code><strong><code> Internal Server Error</code></strong> Statuscode zeigt an, dass der Server durch einen unerwarteten Umstand daran gehindert wurde die an ihn gesendete Anfrage zu erfüllen.</p>
+
+<p>Diese Fehlermeldung ist ein generisches "Auffangbecken". Oft kommt es vor, dass Server-Administratoren Antworten mit Fehlermeldungen wie dem Statuscode 500 mit detaillierteren Angaben protokollieren, um den Fehler in Zukunft vermeiden zu können.</p>
+
+<h2 id="Status">Status</h2>
+
+<pre class="syntaxbox">500 Internal Server Error</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Titel</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "500 Internal Server Error" , "6.6.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat}}</p>
diff --git a/files/de/web/http/status/503/index.html b/files/de/web/http/status/503/index.html
new file mode 100644
index 0000000000..edfcebe11c
--- /dev/null
+++ b/files/de/web/http/status/503/index.html
@@ -0,0 +1,55 @@
+---
+title: 503 Service Unavailable
+slug: Web/HTTP/Status/503
+tags:
+  - Fehlermeldung
+  - HTTP
+  - HTTP-Statuscode
+  - Serverfehler
+  - Statuscode
+translation_of: Web/HTTP/Status/503
+---
+<p>{{HTTPSidebar}}</p>
+
+<p>Der HTTP-Statuscode <code><strong>503 Service Unavailable</strong></code> zeigt an, dass der Server nicht in der Lage ist, die Anfrage zu bearbeiten.</p>
+
+<p>Übliche Gründe dafür sind, dass ein Server wegen Wartungsarbeiten abgeschaltet oder dass er überlastet ist. Dieser Code sollte für vorübergehende Zustände benutzt werden, und der HTTP-Header {{HTTPHeader("Retry-After")}} sollte möglichst angeben, ab wann damit zu rechnen ist, dass der Dienst wieder funktioniert.</p>
+
+<div class="note">
+<p><strong>Anmerkung:</strong> Zusammen mit einer solchen Antwort sollte eine benutzerfreundliche Seite ausgeliefert werden, die das Problem erklärt.</p>
+</div>
+
+<p>Werden mit einer solchen Antwort Header verschickt, die das Caching betreffen, sollten diese beachtet werden, da der Status 503 oft einen vorübergehenden Zustand betrifft und die Antwort daher normalerweise nicht in einem Cache gespeichert werden sollte.</p>
+
+<h2 id="Status">Status</h2>
+
+<pre class="syntaxbox">503 Service Unavailable</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "503 Service Unavailable" , "6.6.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<p>Die unten genannen Informationen wurden von MDNs GitHub (<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>) abgerufen.</p>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.503")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{HTTPHeader("Retry-After")}}</li>
+</ul>
diff --git a/files/de/web/http/status/504/index.html b/files/de/web/http/status/504/index.html
new file mode 100644
index 0000000000..8d24afe266
--- /dev/null
+++ b/files/de/web/http/status/504/index.html
@@ -0,0 +1,51 @@
+---
+title: 504 Gateway Timeout
+slug: Web/HTTP/Status/504
+tags:
+  - Fehlermeldung
+  - HTTP
+  - HTTP-Statuscode
+  - Serverfehler
+  - Statuscode
+translation_of: Web/HTTP/Status/504
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Der HTTP-Statuscode <code><strong>504 Gateway Timeout</strong></code> zeigt an, dass der Server, der als Gateway oder Proxy fungiert, keine rechtzeitige Antwort von einem vorgelagerten Serverserver bekommen hat, die nötig gewesen wäre, um die Anfrage vollständig auszuführen.</p>
+
+<div class="note">
+<p><strong>Anmerkung</strong>: Es gibt verschiedene Dinge, die man in der Netzwerktechnik als {{interwiki("wikipedia", "Gateway_(telecommunications)", "Gateway")}} bezeichnet. Bei einer 504-Fehlermeldung können Sie meist nichts tun, um das Problem zu beheben, sondern dies muss auf dem Zielserver oder auf den Proxies, über die Sie den Zugriff versucht haben, geschehen.</p>
+</div>
+
+<h2 id="Status">Status</h2>
+
+<pre class="syntaxbox">504 Gateway Timeout</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Titel</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "504 Gateway Timeout" , "6.6.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<p>Die unten genannen Informationen wurden von MDNs GitHub (<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>) abgerufen.</p>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.504")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{HTTPStatus(502)}}</li>
+</ul>
diff --git a/files/de/web/http/status/505/index.html b/files/de/web/http/status/505/index.html
new file mode 100644
index 0000000000..6cdd25cd12
--- /dev/null
+++ b/files/de/web/http/status/505/index.html
@@ -0,0 +1,39 @@
+---
+title: 505 HTTP Version Not Supported
+slug: Web/HTTP/Status/505
+tags:
+  - Fehlermeldung
+  - HTTP
+  - HTTP-Statuscode
+  - Serverfehler
+  - Statuscode
+translation_of: Web/HTTP/Status/505
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Der HTTP-Statuscode <code><strong>505 HTTP Version Not Supported</strong></code> zeigt an, dass die für die Anfrage benutzte HTTP-Version vom Server nicht unterstützt wird.</p>
+
+<h2 id="Status">Status</h2>
+
+<pre class="syntaxbox">505 HTTP Version Not Supported</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Titel</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "505 HTTP Version Not Supported" , "6.6.6")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{HTTPHeader("Upgrade")}}</li>
+</ul>
diff --git a/files/de/web/http/status/511/index.html b/files/de/web/http/status/511/index.html
new file mode 100644
index 0000000000..bc9a2028fd
--- /dev/null
+++ b/files/de/web/http/status/511/index.html
@@ -0,0 +1,43 @@
+---
+title: 511 Network Authentication Required
+slug: Web/HTTP/Status/511
+tags:
+  - Fehlermeldung
+  - HTTP
+  - HTTP-Statuscode
+  - Serverfehler
+  - Statuscode
+translation_of: Web/HTTP/Status/511
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Der HTTP-Statuscode <code><strong>511 Network Authentication Required</strong></code> zeigt an, dass sich der Client authentifizieren muss, um Zugang zu einem Netz zu erhalten.</p>
+
+<p>Dieser Statuscode wird nicht vom angefragten Server ausgegeben, sondern von einem dazwischengeschalteten Proxy, das den Zugang zum Netz kontrolliert.</p>
+
+<p>Netzbetreiber verlangen manchmal eine Authentifizierung, die Zustimmung zu Nutzungsbedingungen oder andere Aktionen des Benutzers, bevor sie Zugang gewähren (z.B. in einem Internet-Café oder an einem Flughafen). Clients, bei denen es daran noch fehlt, werden oft über ihre Media-Access-Control-Adressen ({{Glossary("MAC")}}) identifiziert.</p>
+
+<h2 id="Status">Status</h2>
+
+<pre class="syntaxbox">511 Network Authentication Required</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Titel</th>
+  </tr>
+  <tr>
+   <td>{{RFC("6585", "511 Network Authentication Required" , "6")}}</td>
+   <td>Additional HTTP Status Codes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{Glossary("Proxy server")}}</li>
+</ul>
diff --git a/files/de/web/http/status/index.html b/files/de/web/http/status/index.html
new file mode 100644
index 0000000000..91ae3cda58
--- /dev/null
+++ b/files/de/web/http/status/index.html
@@ -0,0 +1,175 @@
+---
+title: HTTP response status codes
+slug: Web/HTTP/Status
+tags:
+  - HTTP
+  - NeedsTranslation
+  - Status codes
+  - TopicStub
+translation_of: Web/HTTP/Status
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP-Antwortstatuscodes zeigen an, ob eine bestimmte <a href="/en-US/docs/Web/HTTP">HTTP</a>-Anfrage erfolgreich abgeschlossen wurde. Die Antworten sind in fünf Klassen eingeteilt:</p>
+
+<ol>
+ <li>Informative Antworten (100-199)</li>
+ <li>Erfolgreiche Antworten (200-299)</li>
+ <li>Umleitungen (300-399)</li>
+ <li>Client-Fehler (400-499)</li>
+ <li>Server-Fehler (500-599)</li>
+</ol>
+
+<p>Die folgenden Statuscodes sind in <a href="https://tools.ietf.org/html/rfc2616#section-10">Abschnitt 10 von RFC 2616</a> definiert. Eine aktualisierte Spezifikation finden Sie in <a href="https://tools.ietf.org/html/rfc7231#section-6.5.1">RFC 7231</a>.</p>
+
+<h2 id="Informative_Antworten">Informative Antworten</h2>
+
+<dl>
+ <dt>{{HTTPStatus(100, "100 Continue")}}</dt>
+ <dd>Diese vorläufige Antwort zeigt an, dass bisher alles in Ordnung ist und dass der Client mit der Anfrage fortfahren oder sie ignorieren sollte, wenn sie bereits abgeschlossen ist.</dd>
+ <dt>{{HTTPStatus(101, "101 Switching Protocol")}}</dt>
+ <dd>Dieser Code wird als Antwort auf einen {{HTTPHeader("Upgrade")}} Request-Header vom Client gesendet und zeigt an, dass auch der Server das Protokoll wechselt. Er wurde eingeführt, um die Migration zu einer inkompatiblen Protokollversion zu ermöglichen, und wird nicht häufig verwendet.</dd>
+ <dt>{{HTTPStatus(102, "102 Processing")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>Dieser Code zeigt an, dass der Server die Anfrage erhalten hat und bearbeitet, aber noch keine Antwort verfügbar ist.</dd>
+ <dt>{{HTTPStatus(103, "103 Early Hints")}}</dt>
+ <dd>Dieser Statuscode ist in erster Linie für die Verwendung mit dem {{HTTPHeader("Link")}} Header vorgesehen, damit der Benutzeragent mit dem <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content">Vorladen</a> von Ressourcen beginnen kann, während der Server eine Antwort vorbereitet.</dd>
+</dl>
+
+<h2 id="Erfolgreiche_Antworten">Erfolgreiche Antworten</h2>
+
+<dl>
+ <dt>{{HTTPStatus(200, "200 OK")}}</dt>
+ <dd>
+ <p>Die Anfrage ist erfolgreich. Die Bedeutung eines Erfolgs hängt von der HTTP-Methode ab​​​​:</p>
+
+ <ul>
+  <li><code>GET</code>: Die Ressource wurde geholt und wird im Nachrichtentext übertragen.</li>
+  <li><code>HEAD</code>: Die Entity-Header befinden sich im Nachrichtenkörper.</li>
+  <li><code>POST</code>: Die Ressource, die das Ergebnis der Aktion beschreibt, wird im Hauptteil der Nachricht übertragen.</li>
+  <li><code>TRACE</code>: Der Hauptteil der Nachricht enthält die vom Server empfangene Anforderungsnachricht.</li>
+ </ul>
+ </dd>
+ <dt>{{HTTPStatus(201, "201 Created")}}</dt>
+ <dd>Die Anfrage war erfolgreich, und als Ergebnis wurde eine neue Ressource geschaffen. Dies ist normalerweise die Antwort, die nach einer PUT-Anforderung gesendet wird.</dd>
+ <dt>{{HTTPStatus(202, "202 Accepted")}}</dt>
+ <dd>Die Anfrage ist eingegangen, aber noch nicht bearbeitet worden. Sie ist unverbindlich, was bedeutet, dass es in HTTP keine Möglichkeit gibt, später eine asynchrone Antwort zu senden, die das Ergebnis der Bearbeitung der Anfrage anzeigt. Sie ist für Fälle gedacht, in denen ein anderer Prozess oder Server die Anfrage bearbeitet, oder für die Stapelverarbeitung.</dd>
+ <dt>{{HTTPStatus(203, "203 Non-Authoritative Information")}}</dt>
+ <dd>Dieser Antwortcode bedeutet, dass der zurückgesendete Metainformationssatz nicht exakt dem Satz entspricht, der auf dem ursprünglichen Server verfügbar war, sondern von einer lokalen Kopie oder einer Kopie eines Drittanbieters gesammelt wurde. Abgesehen von dieser Bedingung sollten 200 OK-Antworten anstelle dieser Antwort bevorzugt werden.</dd>
+ <dt>{{HTTPStatus(204, "204 No Content")}}</dt>
+ <dd>Es gibt keinen Inhalt, den man für diese Anfrage senden kann, aber die Kopfzeilen können nützlich sein. Der Benutzer-Agent kann seine zwischengespeicherten Header für diese Ressource mit den neuen Header aktualisieren.</dd>
+ <dt>{{HTTPStatus(205, "205 Reset Content")}}</dt>
+ <dd>Dieser Antwortcode wird nach dem Ausführen der Anforderung gesendet, um dem Benutzeragenten mitzuteilen, der diese Anforderung gesendet hat.</dd>
+ <dt>{{HTTPStatus(206, "206 Partial Content")}}</dt>
+ <dd>Dieser Antwortcode wird aufgrund des vom Client gesendeten Range-Headers verwendet, um den Download in mehrere Streams zu trennen.</dd>
+ <dt>{{HTTPStatus(208, "208 Already Reported")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>Wird innerhalb eines <code>&lt;dav:propstat&gt;</code> Antwortelements verwendet, um die wiederholte Aufzählung der internen Mitglieder mehrerer Bindungen zu derselben Sammlung zu vermeiden.</dd>
+ <dt>{{HTTPStatus(226, "226 IM Used")}} (<a href="https://tools.ietf.org/html/rfc3229">HTTP Delta encoding</a>)</dt>
+ <dd>Der Server hat eine <code>GET</code>-Anforderung für die Ressource erfüllt, und die Antwort ist eine Darstellung des Ergebnisses einer oder mehrerer auf die aktuelle Instanz angewandter Instanzmanipulationen.</dd>
+</dl>
+
+<h2 id="Umleitungen">Umleitungen</h2>
+
+<dl>
+ <dt>{{HTTPStatus(300, "300 Multiple Choice")}}</dt>
+ <dd>Die Anfrage hat mehr als eine mögliche Antwort. Der Benutzer-Agent oder Benutzer sollte eine davon auswählen. Es gibt keine standardisierte Möglichkeit, eine der Antworten auszuwählen.</dd>
+ <dt>{{HTTPStatus(301, "301 Moved Permanently")}}</dt>
+ <dd>Dieser Antwortcode bedeutet, dass der URI der angeforderten Ressource geändert wurde. Wahrscheinlich wird in der Antwort eine neue URI angegeben.</dd>
+ <dt>{{HTTPStatus(302, "302 Found")}}</dt>
+ <dd>Dieser Antwortcode bedeutet, dass der URI der angeforderten Ressource <em>vorübergehend</em> geändert wurde. Möglicherweise werden in der Zukunft neue Änderungen an der URI vorgenommen. Daher sollte derselbe URI vom Kunden in zukünftigen Anfragen verwendet werden.</dd>
+ <dt>{{HTTPStatus(303, "303 See Other")}}</dt>
+ <dd>Der Server sandte diese Antwort an den Client, um die angeforderte Ressource mit einer GET-Anforderung an eine andere URI zu leiten.</dd>
+ <dt>{{HTTPStatus(304, "304 Not Modified")}}</dt>
+ <dd>Dies wird für Cache-Zwecke verwendet. Es teilt dem Client mit, dass die Antwort nicht geändert wurde. Der Client kann also weiterhin dieselbe zwischengespeicherte Version der Antwort verwenden.</dd>
+ <dt>{{HTTPStatus(305, "305 Use Proxy")}}</dt>
+ <dd>Das bedeutet, dass ein Proxy auf die angeforderte Antwort zugreifen muss. Dieser Response-Code wird aus Sicherheitsgründen weitgehend nicht unterstützt.</dd>
+ <dt>{{HTTPStatus(306, "306 unused")}} {{deprecated_inline}}</dt>
+ <dd>Dieser Antwortcode wird nicht mehr verwendet, er ist derzeit nur reserviert. Er wurde in einer früheren Version der HTTP 1.1-Spezifikation verwendet.</dd>
+ <dt>{{HTTPStatus(307, "307 Temporary Redirect")}}</dt>
+ <dd>
+ <p>Der Server schickte diese Antwort an den Client, um die angeforderte Ressource an eine andere URI mit derselben Methode zu senden, die die vorherige Anforderung verwendete. Dies hat die gleiche Semantik wie der <code>302 Found</code> HTTP Response Code, mit der Ausnahme, dass der Benutzeragent die verwendete HTTP-Methode <em>nicht ändern</em> darf: Wenn in der ersten Anforderung ein <code>POST</code> verwendet wurde, muss in der zweiten Anforderung ein <code>POST</code> verwendet werden.</p>
+ </dd>
+ <dt>{{HTTPStatus(308, "308 Permanent Redirect")}}</dt>
+ <dd>Dies bedeutet, dass sich die Ressource nun <em>dauerhaft</em> an einem anderen, vom <code>Location:</code> angegebenen URI befindet: HTTP-Antwort-Header angegeben wird. Dies hat die gleiche Semantik wie der <code>301 Moved Permanently</code> HTTP Response Code, mit der Ausnahme, dass der Benutzeragent die verwendete HTTP-Methode <em>nicht ändern</em> darf: Wenn in der ersten Anfrage ein <code>POST</code> verwendet wurde, muss in der zweiten Anfrage ein <code>POST</code> verwendet werden.</dd>
+</dl>
+
+<h2 id="Antworten_auf_Client-Fehler">Antworten auf Client-Fehler</h2>
+
+<dl>
+ <dt>{{HTTPStatus(400, "400 Bad Request")}}</dt>
+ <dd>Diese Antwort bedeutet, dass der Server die Anfrage aufgrund einer ungültigen Syntax nicht verstehen konnte.</dd>
+ <dt>{{HTTPStatus(401, "401 Unauthorized")}}</dt>
+ <dd>Eine Authentifizierung ist erforderlich, um die angeforderte Antwort zu erhalten. Dies ist ähnlich wie bei 403, aber in diesem Fall ist eine Authentifizierung möglich.</dd>
+ <dt>{{HTTPStatus(402, "402 Payment Required")}}</dt>
+ <dd>Dieser Antwortcode ist für die zukünftige Verwendung reserviert. Ursprüngliches Ziel bei der Erstellung dieses Codes war es, ihn für digitale Zahlungssysteme zu verwenden, doch wird er derzeit nicht verwendet.</dd>
+ <dt>{{HTTPStatus(403, "403 Forbidden")}}</dt>
+ <dd>Der Client hat keine Zugriffsrechte auf den Inhalt, daher verweigert der Server eine ordnungsgemäße Antwort.</dd>
+ <dt>{{HTTPStatus(404, "404 Not Found")}}</dt>
+ <dd>Server kann angeforderte Ressource nicht finden. Dieser Antwort-Code ist wahrscheinlich der bekannteste aufgrund seiner Häufigkeit, mit der er im Web auftritt.</dd>
+ <dt>{{HTTPStatus(405, "405 Method Not Allowed")}}</dt>
+ <dd>Die Anfragemethode ist dem Server bekannt, wurde jedoch deaktiviert und kann nicht verwendet werden. Die beiden obligatorischen Methoden, <code>GET</code> und <code>HEAD</code>, dürfen niemals deaktiviert werden und sollten diesen Fehlercode nicht zurückgeben.</dd>
+ <dt>{{HTTPStatus(406, "406 Not Acceptable")}}</dt>
+ <dd>Diese Antwort wird gesendet, wenn der Webserver nach Durchführung der <a href="/en-US/docs/HTTP/Content_negotiation#Server-driven_negotiation">servergesteuerten Inhaltsaushandlung</a> nach den vom Benutzer-Agenten vorgegebenen Kriterien keinen Inhalt findet.</dd>
+ <dt>{{HTTPStatus(407, "407 Proxy Authentication Required")}}</dt>
+ <dd>Dies ist ähnlich wie 401, aber die Authentifizierung muss von einem Proxy durchgeführt werden.</dd>
+ <dt>{{HTTPStatus(408, "408 Request Timeout")}}</dt>
+ <dd>
+ <p>Diese Antwort wird von einigen Servern auf einer inaktiven Verbindung gesendet, auch ohne vorherige Anfrage durch den Client. Das bedeutet, dass der Server diese unbenutzte Verbindung abschalten möchte. Diese Antwort wird viel häufiger verwendet, da einige Browser, wie Chrome oder IE9, <a href="http://www.belshe.com/2011/02/10/the-era-of-browser-preconnect/">HTTP-Vorverbindungsmechanismen</a> verwenden, um das Surfen zu beschleunigen (siehe {{bug(634278)}}, der die zukünftige Implementierung eines solchen Mechanismus in Firefox verfolgt). Beachten Sie auch, dass einige Server lediglich die Verbindung unterbrechen, ohne diese Nachricht zu senden.</p>
+ </dd>
+ <dt>{{HTTPStatus(409, "409 Conflict")}}</dt>
+ <dd>Diese Antwort würde gesendet, wenn eine Anfrage mit dem aktuellen Zustand des Servers in Konflikt gerät.</dd>
+ <dt>{{HTTPStatus(410, "410 Gone")}}</dt>
+ <dd>Diese Antwort würde gesendet, wenn der angeforderte Inhalt vom Server gelöscht wurde.</dd>
+ <dt>{{HTTPStatus(411, "411 Length Required")}}</dt>
+ <dd>Der Server lehnte die Anforderung ab, weil das Header-Feld <code>Content-Length</code> nicht definiert ist und der Server sie benötigt.</dd>
+ <dt>{{HTTPStatus(412, "412 Precondition Failed")}}</dt>
+ <dd>Der Client hat in seinen Headern Vorbedingungen angegeben, die der Server nicht erfüllt.</dd>
+ <dt>{{HTTPStatus(413, "413 Payload Too Large")}}</dt>
+ <dd>Anforderungsentität ist größer als die vom Server definierten Grenzen; der Server könnte die Verbindung schließen oder ein <code>Retry-After</code> Header-Feld zurückgeben.</dd>
+ <dt>{{HTTPStatus(414, "414 URI Too Long")}}</dt>
+ <dd>Der vom Client angeforderte URI ist länger, als der Server zu interpretieren bereit ist.</dd>
+ <dt>{{HTTPStatus(415, "415 Unsupported Media Type")}}</dt>
+ <dd>Das Medienformat der angeforderten Daten wird vom Server nicht unterstützt, daher lehnt der Server die Anfrage ab.</dd>
+ <dt>{{HTTPStatus(416, "416 Requested Range Not Satisfiable")}}</dt>
+ <dd>Der durch das Header-Feld <code>Range</code> in der Anforderung angegebene Bereich kann nicht erfüllt werden; es ist möglich, dass der Bereich außerhalb der Größe der Daten des Ziel-URIs liegt.</dd>
+ <dt>{{HTTPStatus(417, "417 Expectation Failed")}}</dt>
+ <dd>Dieser Antwort-Code bedeutet, dass die im Header-Feld <code>Expect</code> request angegebene Erwartung vom Server nicht erfüllt werden kann.</dd>
+ <dt>{{HTTPStatus(421, "421 Misdirected Request")}}</dt>
+ <dd>Die Anfrage war an einen Server gerichtet, der nicht in der Lage ist, eine Antwort zu produzieren. Diese kann von einem Server gesendet werden, der nicht so konfiguriert ist, dass er Antworten für die Kombination aus Schema und Autorität erzeugt, die im Anforderungs-URI enthalten sind.</dd>
+ <dt>{{HTTPStatus(426, "426 Upgrade Required")}}</dt>
+ <dd>Der Server weigert sich, die Anforderung mit dem aktuellen Protokoll auszuführen, ist aber möglicherweise bereit, dies zu tun, nachdem der Client auf ein anderes Protokoll aktualisiert wurde. Der Server MUSS ein Upgrade-Header-Feld in einer 426-Antwort senden, um das/die erforderliche(n) Protokoll(e) anzugeben (<a href="https://tools.ietf.org/html/rfc7230#section-6.7">Abschnitt 6.7 von [RFC7230]</a>).</dd>
+ <dt>{{HTTPStatus(428, "428 Precondition Required")}}</dt>
+ <dd>Der Ursprungsserver verlangt, dass die Anfrage bedingt ist. Damit soll "das Problem der 'verlorenen Aktualisierung' verhindert werden, bei dem ein Client den Zustand einer Ressource GETs, modifiziert sie und PUTs zurück an den Server sendet, wenn inzwischen eine dritte Partei den Zustand auf dem Server modifiziert hat, was zu einem Konflikt führt.</dd>
+ <dt>{{HTTPStatus(429, "429 Too Many Requests")}}</dt>
+ <dd>Der Benutzer hat in einer bestimmten Zeitspanne zu viele Anfragen gesendet ("rate limiting").</dd>
+ <dt>{{HTTPStatus(431, "431 Request Header Fields Too Large")}}</dt>
+ <dd>Der Server ist nicht bereit, die Anfrage zu verarbeiten, weil seine Header-Felder zu groß sind. Die Anfrage KANN nach Reduzierung der Größe der Anfrage-Header-Felder erneut eingereicht werden.</dd>
+ <dt>{{HTTPStatus(451, "451 Unavailable For Legal Reasons")}}</dt>
+ <dd>Der Benutzer fordert eine illegale Ressource an, z.B. eine Webseite, die von einer Regierung zensiert wurde.</dd>
+</dl>
+
+<h2 id="Antworten_auf_Server-Fehler">Antworten auf Server-Fehler</h2>
+
+<dl>
+ <dt>{{HTTPStatus(500, "500 Internal Server Error")}}</dt>
+ <dd>Der Server ist auf eine Situation gestoßen, mit der er nicht umzugehen weiß.</dd>
+ <dt>{{HTTPStatus(501, "501 Not Implemented")}}</dt>
+ <dd>Die Anfragemethode wird vom Server nicht unterstützt und kann nicht bearbeitet werden. Die einzigen Methoden, die vom Server unterstützt werden müssen (und die daher diesen Code nicht zurückgeben dürfen), sind <code>GET</code> und <code>HEAD</code>.</dd>
+ <dt>{{HTTPStatus(502, "502 Bad Gateway")}}</dt>
+ <dd>Diese Fehlerreaktion bedeutet, dass der Server, während er als Gateway arbeitete, um eine Antwort zu erhalten, die zur Bearbeitung der Anfrage erforderlich ist, eine ungültige Antwort erhielt.</dd>
+ <dt>{{HTTPStatus(503, "503 Service Unavailable")}}</dt>
+ <dd>Der Server ist nicht bereit, die Anfrage zu bearbeiten. Häufige Ursachen sind ein Server, der wegen Wartungsarbeiten ausfällt oder überlastet ist. Beachten Sie, dass zusammen mit dieser Antwort eine benutzerfreundliche Seite gesendet werden sollte, die das Problem erklärt. Diese Antworten sollten für vorübergehende Bedingungen und <code>Retry-After:</code> verwendet werden: HTTP-Header sollte, wenn möglich, die geschätzte Zeit vor der Wiederherstellung des Dienstes enthalten. Der Webmaster muss sich auch um die Caching-bezogenen Header kümmern, die zusammen mit dieser Antwort gesendet werden, da diese Antworten auf temporäre Bedingungen normalerweise nicht im Cache gespeichert werden sollten.</dd>
+ <dt>{{HTTPStatus(504, "504 Gateway Timeout")}}</dt>
+ <dd>Diese Fehlerantwort wird gegeben, wenn der Server als Gateway fungiert und nicht rechtzeitig eine Antwort erhalten kann.</dd>
+ <dt>{{HTTPStatus(505, "505 HTTP Version Not Supported")}}</dt>
+ <dd>Die in der Anfrage verwendete HTTP-Version wird vom Server nicht unterstützt.</dd>
+ <dt>{{HTTPStatus(506, "506 Variant Also Negotiates")}}</dt>
+ <dd>Der Server weist einen internen Konfigurationsfehler auf: Die gewählte Ressourcenvariante ist so konfiguriert, dass sie selbst transparente Inhaltsverhandlungen führt und daher kein geeigneter Endpunkt im Vermittlungsprozess ist.</dd>
+ <dt>{{HTTPStatus(507, "507 Insufficient Storage")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>Die Methode konnte auf der Ressource nicht ausgeführt werden, weil der Server nicht in der Lage ist, die Darstellung zu speichern, die zum erfolgreichen Abschluss der Anfrage erforderlich ist.</dd>
+ <dt>{{HTTPStatus(508, "508 Loop Detected")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>Der Server hat bei der Verarbeitung der Anfrage eine Endlosschleife festgestellt.</dd>
+ <dt>{{HTTPStatus(510, "510 Not Extended")}}</dt>
+ <dd>Damit der Server den Antrag erfüllen kann, sind weitere Erweiterungen des Antrags erforderlich.</dd>
+ <dt>{{HTTPStatus(511, "511 Network Authentication Required")}}</dt>
+ <dd>Der Statuscode 511 zeigt an, dass sich der Client authentifizieren muss, um Zugang zum Netzwerk zu erhalten.</dd>
+</dl>
diff --git a/files/de/web/index.html b/files/de/web/index.html
new file mode 100644
index 0000000000..798a6e81f5
--- /dev/null
+++ b/files/de/web/index.html
@@ -0,0 +1,102 @@
+---
+title: Webtechnologien für Entwickler
+slug: Web
+tags:
+  - History
+  - Landing
+  - Web
+  - Web Development
+translation_of: Web
+---
+<p class="summary">Das offene Web bietet unglaubliche Möglichkeiten für Entwickler, die Webseiten oder Onlineanwendungen erstellen möchten. Um diese Technologien voll ausschöpfen zu können, müssen Sie wissen, wie man sie verwendet. Unten finden Sie Links zu unseren Dokumentationen zum Thema Webtechnologien.</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">Webtechnologien</h2>
+
+<h3 id="Grundlagen">Grundlagen</h3>
+
+<dl>
+ <dt><a href="/de/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a></dt>
+ <dd>Die Auszeichnungssprache <strong>HyperText Markup Language</strong> kommt bei der Erstellung von <em>Inhalten </em>für eine Webseite zum Einsatz.</dd>
+ <dt><a href="/de/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a></dt>
+ <dd><strong>Cascading Style Sheets</strong> werden verwendet, um das <em>Aussehen </em>einer Webseite zu definieren.</dd>
+ <dt><a href="/de/docs/Web/HTTP">HTTP</a></dt>
+ <dd><strong><dfn>Hypertext Transfer Protocol (HTTP)</dfn></strong> wird benutzt, um HTML und andere Medien über das Netz zu übertragen.</dd>
+</dl>
+
+<h3 id="Scripting">Scripting</h3>
+
+<dl>
+ <dt><a href="/de/docs/Web/JavaScript">JavaScript</a></dt>
+ <dd>Die Programmiersprache <strong>JavaScript</strong> wird bei der Erstellung von anspruchsvolleren Webseiten und Anwendungen eingesetzt. Durch ihre Anwendung können dynamische Funktionen oder weitere Interaktionen zu einer Webseite hinzugefügt werden.</dd>
+ <dt><a href="/de/docs/Web/Reference/API" title="/en-US/docs/Web/API">Web APIs</a></dt>
+ <dd><strong>Web Application Programming Interfaces (Web APIs)</strong> enthalten Referenzmaterial für jede Einzelne der skriptfähigen APIs, einschließlich des <a href="/de/docs/DOM">DOM</a> und aller zugehörigen APIs und Schnittstellen, die Sie für die Erstellung von Webinhalten und Anwendungen einsetzen können.
+ <ul>
+  <li><a href="/de/docs/Web/API" title="/en-US/docs/Web/API">Web API Schnittstellen Referenz</a> - alle Schnittstellen in alphabetischer Reihenfolge.</li>
+  <li>Auf der <a href="/de/docs/Web/WebAPI">WebAPI</a> Seite sind APIs für den Gerätezugriff und weitere für Anwendungen nützliche APIs aufgeführt.</li>
+  <li>In der <a href="de/docs/Web/Events">Ereignis-Referenz</a> werden alle Ereignisse aufgelistet, die man nutzen kann, um auf den Benutzer zu reagieren.</li>
+ </ul>
+ </dd>
+ <dt><a href="/de/docs/Web/Web_components">Webkomponenten</a></dt>
+ <dd>Webkomponenten (<strong>Web components</strong>) sind eine Sammlung von Technologien, die es ermöglichen wiederverwendbare Elemente zu erstellen — wobei die Funktionalität vom Rest des Codes gekapselt wird — und in verschiedenen Webanwendungen benutzt werden kann.</dd>
+</dl>
+
+<h3 id="Grafik">Grafik</h3>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/HTML/Canvas">Canvas</a></dt>
+ <dd>Dieses {{HTMLElement("canvas")}} Element bietet APIs zum Zeichnen von 2D-Grafiken durch JavaScript an. </dd>
+ <dt><a href="/de/docs/Web/SVG" title="/en-US/docs/Web/SVG">SVG</a></dt>
+ <dd><strong>Scalable Vector Graphics (SVG)</strong> ermöglichen es Ihnen, Bilder als Gruppen von Vektoren und Formen zu beschreiben. Dadurch kann reibungslos skaliert werden und die Objekte sehen in jeder Darstellungsgröße gleich aus. </dd>
+ <dt><a href="/de/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a></dt>
+ <dd><strong>WebGL</strong> ermöglicht 3D-Grafiken im Internet durch die Einführung einer API, die an OpenGL ES 2.0 angelehnt ist, und in HTML  {{HTMLElement("canvas")}} Elementen verwendet werden kann.</dd>
+ <dt>
+ <h3 id="Audio_Video_und_Multimedia">Audio, Video, und Multimedia</h3>
+ </dt>
+ <dt><a href="https://developer.mozilla.org/de/docs/Web/Media">Webmedientechnologien</a></dt>
+ <dd>Eine Liste medienbezogener APIs mit Links zu deren jeweiliger Dokumentation.</dd>
+ <dt><a href="https://developer.mozilla.org/de/docs/Web/Media/Overview">Übersicht über die Medientechnologien im Netz</a></dt>
+ <dd>Ein Überblick über die freien Webtechnologien und APIs die Audio- und Video-Wiedergabe, -Bearbeitung und -Aufnahme ermöglichen. Wenn Sie sich unklar sind, welche API Sie nutzen sollten, dann sind Sie hier richtig.</dd>
+ <dt><a href="https://developer.mozilla.org/de/docs/Web/API/Media_Streams_API">Medien-Aufnahme und -Streaming API</a></dt>
+ <dd>Eine Liste der APIs die es ermöglichen, Medien sowohl lokal als auch übers Netzwerk aufzunehmen, zu bearbeiten und zu streamen. Dies beinhaltet auch das Nutzen von lokalen Kameras und Mikrofonen zur Aufzeichnung von Videos, Audio oder Fotos.</dd>
+ <dt><a href="https://developer.mozilla.org/de/docs/Web/Guide/HTML/Using_HTML5_audio_and_video">Nutzen von HTML5 Audio und Video</a></dt>
+ <dd>Wie man Videos und/oder Audios in eine Webseite einbindet und das Abspielen kontrollieren kann. </dd>
+ <dt><a href="https://developer.mozilla.org/de/docs/WebRTC">WebRTC</a></dt>
+ <dd>Das RTC in WebRTC steht für "Real-Time Communications" (Echtzeitkommunikation). Dies sind Technologien, die Audio/Video-Streaming und Datenübertragung zwischen Client-Browsern unterstützen. </dd>
+</dl>
+
+<h3 id="Weitere">Weitere</h3>
+
+<dl>
+ <dt><a href="/de/docs/Web/MathML" title="/en-US/docs/Web/MathML">MathML</a></dt>
+ <dd>Die <strong>Mathematical Markup Language (MathML)</strong> ermöglicht es, komplexe mathematische Gleichungen und Syntaxen anzuzeigen.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">Lernbereich</h2>
+
+<dl>
+ <dt> </dt>
+ <dt><a href="/de/docs/Learn">Lerne Webentwicklung</a></dt>
+ <dd>Dieser Artikel enthält alles Material, das ein Anfänger benötigt, um einfache Webanwendungen zu entwickeln.</dd>
+</dl>
+
+<h2 id="Weitere_Themen">Weitere Themen</h2>
+
+<dl>
+ <dt><a href="/de/Apps">Webanwendungen entwickeln</a></dt>
+ <dd>Dokumentation für Entwickler von Webanwendungen; Web Apps sind echte “Write-once, deploy anywhere” Apps für Mobil, Desktop und Firefox OS.</dd>
+ <dt><a href="/de/docs/Web/Barrierefreiheit">Barrierefreiheit</a></dt>
+ <dd>Barrierefreiheit in der Webentwicklung bedeutet, dass so viele Menschen wie möglich Webseiten verwenden können, auch wenn die Fähigkeiten dieser Menschen in irgendeiner Weise eingeschränkt sind. Hier informieren wir über die Entwicklung von zugänglichen Inhalten.</dd>
+</dl>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/de/docs/Web/Security">Security</a></dt>
+ <dd>Lerne hier, wie du es unterbindest, dass deine Webseite oder App unzulässige Daten herausgibt.</dd>
+</dl>
+</div>
+</div>
+
+<p><span class="alllinks"><a href="/de/docs/tag/Web">Alle ansehen...</a></span></p>
diff --git a/files/de/web/javascript/about_javascript/index.html b/files/de/web/javascript/about_javascript/index.html
new file mode 100644
index 0000000000..5f5fdca9cc
--- /dev/null
+++ b/files/de/web/javascript/about_javascript/index.html
@@ -0,0 +1,61 @@
+---
+title: Über JavaScript
+slug: Web/JavaScript/About_JavaScript
+tags:
+  - Beginner
+  - Introduction
+  - JavaScript
+translation_of: Web/JavaScript/About_JavaScript
+---
+<div>{{JsSidebar}}</div>
+
+<h2 id="Was_ist_JavaScript">Was ist JavaScript?</h2>
+
+<p><strong>JavaScript</strong><sup>®</sup> (oft auch <strong>JS</strong> abgekürzt) ist eine leichte, interpretierte, objektorientierte Sprache mit <a href="https://de.wikipedia.org/wiki/First-Class-Funktion" title="https://en.wikipedia.org/wiki/First-class_functions">First-Class-Funktionen</a> und ist bekannt als Skriptsprache für Webseiten. Die Sprache wird aber auch <a href="https://en.wikipedia.org/wiki/JavaScript#Uses_outside_Web_pages">in vielen nicht-Browserumgebungen (englisch)</a> eingesetzt. Es ist eine <a class="mw-redirect" href="https://de.wikipedia.org/wiki/Prototypenbasierte_Programmierung" title="Prototype-based">prototypenbasierte</a>, multiparadigmen Skriptsprache, die dynamisch ist und objektorientierten, imperativen und funktionalen Programmierstil erlaubt.</p>
+
+<p>JavaScript wird auf der Clientseite des Webs ausgeführt, was dazu genutzt werden kann, um das Design und Verhalten einer Webseite ereignisgesteuert zu ändert. JavaScript ist eine leicht zu lernende und mächtige Skriptsprache, die auf Webseiten weit verbreitet ist.</p>
+
+<p>Im Gegensatz zu dem weit verbreiteten Irrtum ist <strong>JavaScript <u>kein</u> interpretiertes Java</strong>. Kurz gesagt ist JavaScript eine dynamische Skriptsprache, die <a class="mw-redirect" href="https://de.wikipedia.org/wiki/Prototypenbasierte_Programmierung" title="Prototype-based">prototypenbasierte</a> Objektkonstrukte unterstützt. Die Basissyntax ist absichtlich ähnlich zu Java und C++, um die Anzahl der neu zu lernenden Sprachkonzepte zu reduzieren. Sprachkonstrukte, wie <code>if</code>-Anweisungen, <code>for</code>- und <code>while</code>-Schleifen und <code>switch</code>- und <code>try...catch</code>-Blöcke funktionieren genauso wie in den oben genannten Sprachen (oder fast genauso).</p>
+
+<p>JavaScript kann sowohl als <a class="external" href="https://de.wikipedia.org/wiki/Prozedurale_Programmierung" title="https://en.wikipedia.org/wiki/Procedural_programming">prozedurale</a> als auch als <a class="external" href="/de/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript" title="https://developer.mozilla.org/en-US/docs/Introduction_to_Object-Oriented_JavaScript">objektorientierte</a> Sprache eingesetzt werden. Objekte werden in JavaScript programmatisch erstellt und durch anfügen von Methoden und Eigenschaften zu leeren Objekten <strong>zur laufzeit</strong> erstellt,  was anders ist als in Klassendefinitionen in kompilierten Sprachen wie C++ und Java. Wenn ein Objekt erstellt wurde, kann dieses als Blaupause (oder Prototyp) für das erstellen gleicher Objekte verwendet werden.</p>
+
+<p>JavaScripts dynamische Fähigkeiten beinhalten Objekterzeugung zur Laufzeit, variable Parameterlisten, Funktionsvariablen,  dynamische Skripterzeugung (mit {{jsxref("eval")}}), Objekt Introspektion (mit {{jsxref("Statements/for...in", "for...in")}}) und Quelltextwiederherstellung (JavaScriptprogramme können Funktionskörper zurück in den Quelltext übersetzen).</p>
+
+<p>Für einen tieferen Einblick in die JavaScript-Programmiersprache folgen den <a href="#JavaScript Quellen">JavaScript Quellen</a> unten.</p>
+
+<h2 id="Welche_JavaScript_Implementierungen_gibt_es">Welche JavaScript Implementierungen gibt es?</h2>
+
+<p>Das Mozilla Projekt verfügt über zwei JavaScript Implementierungen. Als erstes gab es JavaScript (erstellt von Brendan Eich) in dem Netscape-Browser und seit dem wurde diese JavaScript Version aktualisiert um konform zu dem ECMA-262 Standard in der 5. Auflage und späteren Versionen zu sein. Diese Umgebung, mit dem Codenamen <a href="/de/docs/Mozilla/Projects/SpiderMonkey" title="en-US/docs/SpiderMonkey">SpiderMonkey</a>, ist in C/C++ implementiert. Die <a href="/de/docs/Rhino" title="en-US/docs/Rhino">Rhino</a> Umgebung, hauptsächlich erstellt von Norris Boyd (auch bei Netscape), ist eine JavaScript Implementierung, die in Java geschrieben wurde. Wie auch SpiderMonkey ist Rhino kompatibel zu dem  ECMA-262 Standard in der 5. Auflage.</p>
+
+<p>Einige wichtige Laufzeitoptimierungen, wie TraceMonkey (Firefox 3.5), JägerMonkey (Firefox 4) and IonMonkey wurden zu der SpiderMonkey JavaScriptumgebung hinzugefügt. Die arbeit geht immernoch weiter, um die Ausführungsperformance in JavaScript zu verbessern.</p>
+
+<p>Neben den oben genannten Implementierungen gibt es weitere bekannte JavaScript-Umgebungen:</p>
+
+<ul>
+ <li>Google's <a class="external" href="https://developers.google.com/v8/" title="https://code.google.com/p/v8/">V8</a>, welche in dem Browser Google Chrome und den neueren Version des Opera Browsers eingesetzt wird. Sie wird ebenfalls in <a href="http://nodejs.org">Node.js</a> eingesetzt.</li>
+ <li><a class="external" href="https://www.webkit.org/projects/javascript/index.html" title="https://www.webkit.org/projects/javascript/index.html">JavaScriptCore</a> (SquirrelFish/Nitro) wird in einigen WebKit Browsern wie zum Beispiel Apple Safari eingesetzt.</li>
+ <li><a class="external" href="http://my.opera.com/ODIN/blog/carakan-faq" title="http://my.opera.com/ODIN/blog/carakan-faq">Carakan</a> wurde in alten Opera Browsern eingesetzt.</li>
+ <li>Die <a class="external" href="http://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29" title="http://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29">Chakra</a> Umgebung wird im Internet Explorer benutzt (die hier implementierte Sprache heißt JScript um Markenrechten zu umgehen).</li>
+</ul>
+
+<p>Jede JavaScript Umgebung von Mozilla enthält eine öffentliche API, mit der Entwickler JavaScript in ihre Applikationen integrieren können. Bei weitem sind Web-Browser die häufigsten Einsatzgebiete von JavaScript-Umgebungen. Web-Browser benutzen typischeweise die öffentliche API um Host-Objekte zu erstellen, um das <a class="external" href="http://www.w3.org/DOM/">DOM</a> in JavaScript wiederzuspiegeln.</p>
+
+<p>Eine weiteres Einsatzgebiet für JavaScript ist der Einsatz als serverseitige Skriptsprache. Ein JavaScript Web-Server wird Host-Objekte erstellen, die eine HTTP-Anfrage und -Antwort repräsentieren. Diese können dann verändert werden, um dynamische Webseiten zu programmieren. <a href="http://nodejs.org">Node.js</a> ist das bekannteste Beispiel für einen solchen Server.</p>
+
+<h2 id="JavaScript_Quellen"><a name="JavaScript Quellen">JavaScript Quellen</a></h2>
+
+<dl>
+ <dt><a href="/de/docs/Mozilla/Projects/SpiderMonkey" title="en-US/docs/SpiderMonkey">SpiderMonkey</a></dt>
+ <dd>Informationen spezifisch zu Mozillas Implementierung von JavaScript der C/C++ Umgebung SpiderMonkey. Beinhaltet auch Informationen über das einbetten in Applikationen.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/de/docs/Rhino" title="en-US/docs/Rhino">Rhino</a></dt>
+ <dd>Informationen spezifisch zu Mozillas Implementierung von JavaScript in der Java Umgebungen Rhino.</dd>
+ <dt><a href="/de/docs/Web/JavaScript/Language_Resources" title="en-US/docs/JavaScript_Language_Resources">Sprachquellen</a></dt>
+ <dd>Zeigt veröffentliche JavaScript-Standards.</dd>
+ <dt><a href="/de/docs/Web/JavaScript/A_re-introduction_to_JavaScript" title="en-US/docs/A_re-introduction_to_JavaScript">Eine (Wieder)-Einführung in JavaScript</a></dt>
+ <dd><a href="/de/docs/Web/JavaScript/Guide" title="en-US/docs/JavaScript/Guide">JavaScript Guide</a> und <a href="/de/docs/Web/JavaScript/Reference" title="en-US/docs/JavaScript/Reference">JavaScript-Referenzen</a>.</dd>
+</dl>
+
+<p>JavaScript® ist eine Marke oder registrierte Marke von Oracle in den USA und anderen Ländern.</p>
diff --git a/files/de/web/javascript/aufzählbarkeit_und_zugehörigkeit_von_eigenschaften/index.html b/files/de/web/javascript/aufzählbarkeit_und_zugehörigkeit_von_eigenschaften/index.html
new file mode 100644
index 0000000000..70c769be5a
--- /dev/null
+++ b/files/de/web/javascript/aufzählbarkeit_und_zugehörigkeit_von_eigenschaften/index.html
@@ -0,0 +1,340 @@
+---
+title: Aufzählbarkeit und Zugehörigkeit von Eigenschaften
+slug: Web/JavaScript/Aufzählbarkeit_und_Zugehörigkeit_von_Eigenschaften
+tags:
+  - Eigenschaft
+  - JavaScript
+  - Objekt
+  - enumerable
+translation_of: Web/JavaScript/Enumerability_and_ownership_of_properties
+---
+<div>{{JsSidebar("More")}}</div>
+
+<p>Aufzählbare Eigenschaften sind jene, deren internes Statusfeld <code>enumerable</code> gesetzt ist.</p>
+
+<p>Alle aufzählbaren Eigenschaften eines Objektes sind mit <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a>-Schleifen zu durchlaufen (sofern der Name der Eigenschaft kein <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol">Symbol</a> ist), daher die Bezeichnung „aufzählbar“.<br>
+ Neben for…in gibt es weitere Möglichkeiten, die Existenz einer Eigenschaft zu erkennen, Eigenschaften aufzuzählen oder abzurufen. Siehe dazu nachfolgende Tabellen.</p>
+
+<p>Standardmäßig aufzählbar sind Eigenschaften, die durch einfache Zuweisung oder Initialisierung entstanden sind, nicht jedoch Eigenschaften, die durch <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a> oder ähnliche Mechanismen erzeugt wurden.</p>
+
+<p>Die Zugehörigkeit einer Eigenschaft ergibt sich aus dem Ort seiner Definition; dies ist entweder das Objekt selbst oder einer seiner Prototypen. Eine Eigenschaft, die im Objekt definiert wurde, gehört zu diesem Objekt.</p>
+
+<div style="overflow: auto; width: 100%;">
+<table>
+ <caption>Aufzählbarkeit und Zugehörigkeit – Eingebaute Methoden zur Erkennung, zum Abruf und zur Aufzählung</caption>
+ <tbody>
+  <tr>
+   <th>Funktion</th>
+   <th>Objekt</th>
+   <th>Objekt und geerbt aus Prototypenkette</th>
+   <th>nur geerbt aus Prototypenkette</th>
+  </tr>
+  <tr>
+   <td>Erkennung</td>
+   <td>
+    <table>
+     <thead>
+      <tr>
+       <th scope="col">aufzählbar</th>
+       <th scope="col">nicht aufzählbar</th>
+       <th scope="col">aufzählbar und nicht aufzählbar</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <td>
+        <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable">propertyIsEnumerable</a></code></p>
+
+        <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty">hasOwnProperty</a></code></p>
+       </td>
+       <td>
+        <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty">hasOwnProperty</a></code> – aufzählbare Eigenschaften mit <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable">propertyIsEnumerable</a></code> entfernt</p>
+       </td>
+       <td><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty">hasOwnProperty</a></code></td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>
+    <table>
+     <thead>
+      <tr>
+       <th scope="col">aufzählbar</th>
+       <th scope="col">nicht aufzählbar</th>
+       <th scope="col">aufzählbar und nicht aufzählbar</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <td>nur mit eigenem Code möglich</td>
+       <td>nur mit eigenem Code möglich</td>
+       <td><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/in">in</a></code></td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>nur mit eigenem Code möglich</td>
+  </tr>
+  <tr>
+   <td>Abruf</td>
+   <td>
+    <table>
+     <thead>
+      <tr>
+       <th scope="col">aufzählbar</th>
+       <th scope="col">nicht aufzählbar</th>
+       <th scope="col">aufzählbar und nicht aufzählbar</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <td>
+        <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys</a></code></p>
+
+        <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code> </p>
+
+        <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols">getOwnPropertySymbols</a></code></p>
+       </td>
+       <td><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols">getOwnPropertySymbols</a> </code>– aufzählbare Eigenschaften mit <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable">propertyIsEnumerable</a></code> entfernt</td>
+       <td>
+        <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code></p>
+
+        <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols">getOwnPropertySymbols</a></code></p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>nur mit eigenem Code möglich</td>
+   <td>nur mit eigenem Code möglich</td>
+  </tr>
+  <tr>
+   <td>Aufzählung</td>
+   <td>
+    <table>
+     <thead>
+      <tr>
+       <th scope="col">aufzählbar</th>
+       <th scope="col">nicht aufzählbar</th>
+       <th scope="col">aufzählbar und nicht aufzählbar</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <td>
+        <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys</a></code></p>
+
+        <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code> </p>
+
+        <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols">getOwnPropertySymbols</a></code></p>
+       </td>
+       <td><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols">getOwnPropertySymbols</a></code> – aufzählbare Eigenschaften mit <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable">propertyIsEnumerable</a></code> entfernt</td>
+       <td>
+        <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code></p>
+
+        <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols">getOwnPropertySymbols</a></code></p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>
+    <table>
+     <thead>
+      <tr>
+       <th scope="col">aufzählbar</th>
+       <th scope="col">nicht aufzählbar</th>
+       <th scope="col">aufzählbar und nicht aufzählbar</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <td>
+        <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for..in</a></code></p>
+
+        <p>(ohne Symbole)</p>
+       </td>
+       <td>nur mit eigenem Code möglich</td>
+       <td>nur mit eigenem Code möglich</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>nur mit eigenem Code möglich</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Sichtbarkeit_von_Eigenschaften">Sichtbarkeit von Eigenschaften</h2>
+
+<div style="overflow: auto; width: 100%;">
+<table>
+ <thead>
+  <tr>
+   <th scope="row"></th>
+   <th scope="col"><code>in</code></th>
+   <th scope="col"><code>for..in</code></th>
+   <th scope="col"><code>obj.hasOwnProperty</code></th>
+   <th scope="col"><code>obj.propertyIsEnumerable</code></th>
+   <th scope="col"><code>Object.keys</code></th>
+   <th scope="col"><code>Object.getOwnPropertyNames</code></th>
+   <th scope="col"><code>Object.getOwnPropertyDescriptors</code></th>
+   <th scope="col"><code>Reflect.ownKeys()</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Aufzählbar</th>
+   <td>ja</td>
+   <td>ja</td>
+   <td>ja</td>
+   <td>ja</td>
+   <td>ja</td>
+   <td>ja</td>
+   <td>ja</td>
+   <td>ja</td>
+  </tr>
+  <tr>
+   <th scope="row">Nicht aufzählbar</th>
+   <td>ja</td>
+   <td>nein</td>
+   <td>ja</td>
+   <td>nein</td>
+   <td>nein</td>
+   <td>ja</td>
+   <td>ja</td>
+   <td>ja</td>
+  </tr>
+  <tr>
+   <th scope="row">Symbol als Name</th>
+   <td>ja</td>
+   <td>nein</td>
+   <td>ja</td>
+   <td>ja</td>
+   <td>nein</td>
+   <td>nein</td>
+   <td>ja</td>
+   <td>ja</td>
+  </tr>
+  <tr>
+   <th scope="row">Aufzählbar, geerbt</th>
+   <td>ja</td>
+   <td>ja</td>
+   <td>nein</td>
+   <td>nein</td>
+   <td>nein</td>
+   <td>nein</td>
+   <td>nein</td>
+   <td>nein</td>
+  </tr>
+  <tr>
+   <th scope="row">Nicht aufzählbar, geerbt</th>
+   <td>ja</td>
+   <td>nein</td>
+   <td>nein</td>
+   <td>nein</td>
+   <td>nein</td>
+   <td>nein</td>
+   <td>nein</td>
+   <td>nein</td>
+  </tr>
+  <tr>
+   <th scope="row">Symbol als Name, geerbt</th>
+   <td>ja</td>
+   <td>nein</td>
+   <td>nein</td>
+   <td>nein</td>
+   <td>nein</td>
+   <td>nein</td>
+   <td>nein</td>
+   <td>nein</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Eigenschaften_nach_Aufzählbarkeit_oder_Zugehörigkeit_abrufen">Eigenschaften nach Aufzählbarkeit oder Zugehörigkeit abrufen</h2>
+
+<p>Der nachfolgende Code ist nicht immer der effizienteste Weg, aber als einfaches Beispiel gut geeignet.</p>
+
+<ul>
+ <li>Die Existenz einer Eigenschaft erkennen: <code>SimplePropertyRetriever.theGetMethodYouWant(obj).indexOf(prop) &gt; -1</code></li>
+ <li>Alle Eigenschaften durchlaufen:<br>
+  <code>SimplePropertyRetriever.theGetMethodYouWant(obj).forEach(function (value, prop) {});</code> (or use<code> filter()</code>, <code>map()</code>, etc.)</li>
+</ul>
+
+<pre class="brush: js">var SimplePropertyRetriever = {
+    getOwnEnumerables: function(obj) {
+        return this._getPropertyNames(obj, true, false, this._enumerable);
+         // Or could use for..in filtered with hasOwnProperty or just this: return Object.keys(obj);
+    },
+    getOwnNonenumerables: function(obj) {
+        return this._getPropertyNames(obj, true, false, this._notEnumerable);
+    },
+    getOwnEnumerablesAndNonenumerables: function(obj) {
+        return this._getPropertyNames(obj, true, false, this._enumerableAndNotEnumerable);
+        // Or just use: return Object.getOwnPropertyNames(obj);
+    },
+    getPrototypeEnumerables: function(obj) {
+        return this._getPropertyNames(obj, false, true, this._enumerable);
+    },
+    getPrototypeNonenumerables: function(obj) {
+        return this._getPropertyNames(obj, false, true, this._notEnumerable);
+    },
+    getPrototypeEnumerablesAndNonenumerables: function(obj) {
+        return this._getPropertyNames(obj, false, true, this._enumerableAndNotEnumerable);
+    },
+    getOwnAndPrototypeEnumerables: function(obj) {
+        return this._getPropertyNames(obj, true, true, this._enumerable);
+        // Or could use unfiltered for..in
+    },
+    getOwnAndPrototypeNonenumerables: function(obj) {
+        return this._getPropertyNames(obj, true, true, this._notEnumerable);
+    },
+    getOwnAndPrototypeEnumerablesAndNonenumerables: function(obj) {
+        return this._getPropertyNames(obj, true, true, this._enumerableAndNotEnumerable);
+    },
+    // Private static property checker callbacks
+    _enumerable: function(obj, prop) {
+        return obj.propertyIsEnumerable(prop);
+    },
+    _notEnumerable: function(obj, prop) {
+        return !obj.propertyIsEnumerable(prop);
+    },
+    _enumerableAndNotEnumerable: function(obj, prop) {
+        return true;
+    },
+    // Inspired by http://stackoverflow.com/a/8024294/271577
+    _getPropertyNames: function getAllPropertyNames(obj, iterateSelfBool, iteratePrototypeBool, includePropCb) {
+        var props = [];
+
+        do {
+            if (iterateSelfBool) {
+                Object.getOwnPropertyNames(obj).forEach(function(prop) {
+                    if (props.indexOf(prop) === -1 &amp;&amp; includePropCb(obj, prop)) {
+                        props.push(prop);
+                    }
+                });
+            }
+            if (!iteratePrototypeBool) {
+                break;
+            }
+            iterateSelfBool = true;
+        } while (obj = Object.getPrototypeOf(obj));
+
+        return props;
+    }
+};</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/in">in</a></code></li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for..in</a></code></li>
+ <li>{{jsxref("Object.hasOwnProperty()")}}</li>
+ <li>{{jsxref("Object.propertyIsEnumerable()")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
+ <li>{{jsxref("Object.keys()")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyDescriptors()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/closures/index.html b/files/de/web/javascript/closures/index.html
new file mode 100644
index 0000000000..a9fcd90d9c
--- /dev/null
+++ b/files/de/web/javascript/closures/index.html
@@ -0,0 +1,471 @@
+---
+title: Closures (Funktionsabschlüsse)
+slug: Web/JavaScript/Closures
+tags:
+  - Closure
+  - ES5
+  - Intermediate
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Closures
+---
+<div>{{jsSidebar("Intermediate")}}<br>
+ </div>
+
+<p class="summary"><em>Closures</em> sind Funktionen mit unabhängigen, freien Variablen. Anders ausgedrückt: Die in der <em>Closure</em> definierte Funktion merkt sich die Umgebung, in der sie erzeugt wurde.</p>
+
+<h2 id="Lexical_scoping">Lexical scoping</h2>
+
+<h3 id="Lexikalischer_Geltungsbereich">Lexikalischer Geltungsbereich</h3>
+
+<p>Betrachten wir folgendes Beispiel:</p>
+
+<div>
+<pre class="brush: js notranslate">function init() {
+  var name = "Mozilla"; // name ist eine von init erzeugte lokale Variable
+  function displayName() { // displayName() ist die innere, umschlossene Funktion, sprich die 'Closure'
+    alert(name); // hier wird die in der umschließenden Eltern-Funktion deklarierte Variable benutzt
+  }
+  displayName();
+}
+init();</pre>
+</div>
+
+<p><code>init()</code> erzeugt eine lokale Variable <code>name</code> und anschließend eine Funktion <code>displayName()</code>. <code>displayName()</code> ist eine interne Funktion definiert in <code>init()</code> und ist ausschließlich im Rahmen dieser Funktion verfügbar. <code>displayName()</code> besitzt keine eigenen lokalen Variablen, hat jedoch Zugriff auf Variablen umgebender Funktionen und kann darum die Variable <code>name</code> aus der umschließenden Eltern-Funktion abrufen.</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/78dg25ax/", "js,result", 250)}}</p>
+
+<p>Dieses <a href="http://jsfiddle.net/xAFs9/3/" title="http://jsfiddle.net/xAFs9/">Code-Beispiel</a> zeigt, dass es funktioniert. Es handelt sich hier um einen lexikalischen Geltungsbereich (<em>lexical</em> <em>scoping</em>), d.h. in JavaScript wird der Geltungsbereich (<em>scope</em>) einer Variablen bestimmt durch ihren Fundort im Quellcode (darum lexikalisch). Und verschachtelte Funktionen haben Zugriff auf Variablen, die im umschließenden Geltungsbereich (<em>outer scope</em>) deklariert werden.</p>
+
+<h2 id="Closure">Closure</h2>
+
+<h3 id="Funktionsabschluss">Funktionsabschluss</h3>
+
+<p>Betrachten wir folgendes Beispiel:</p>
+
+<pre class="brush: js notranslate">function makeFunc() {
+  var name = "Mozilla";
+  function displayName() {
+    alert(name);
+  }
+  return displayName;
+}
+
+var myFunc = makeFunc();
+myFunc();
+</pre>
+
+<p>Zum Laufen gebracht zeigt dieser Code exakt den gleichen Effekt wie das vorherige <code>init()</code> Beispiel: Die Zeichenfolge "Mozilla" wird als JavaScript <em>alert</em> Meldung angezeigt. Der interessante Unterschied besteht darin, dass die innere Funktion <code>displayName()</code> von der äußeren Funktion schon vor ihrer Ausführung zurückgegeben wurde.</p>
+
+<p>Dass der Code weiterhin funktioniert, mag verwundern. Üblicherweise existieren die in einer Funktion enthaltenen lokalen Variablen nur während ihrer Ausführung. Man könnte also annehmen, dass die Variable <code>name</code> nicht mehr abrufbar ist, nachdem <code>makeFunc()</code> geendet hat. Da der Code trotzdem funktioniert, ist dies offensichtlich nicht der Fall.</p>
+
+<p>Des Rätsels Lösung ist, dass <code>myFunc</code> zu einem Funktionsabschluss, einer <em>Closure</em>, geworden ist. Die <em>Closure</em> ist ein besonderes Objekt mit zwei außergewöhnlichen Merkmalen – sie umfasst sowohl die Funktion, wie auch das Umfeld, in dem diese erzeugt wurde. Dieses Umfeld besteht aus sämtlichen lokalen Variablen, die im Geltungsbereich (<em>Scope</em>) lagen zum Zeitpunkt der Erzeugung der <em>Closure.</em> Im obigen Beispiel ist <code>myFunc</code> eine <em>Closure</em>, die sowohl die Funktion <em>myFunc</em>, wie auch die Zeichenfolge "Mozilla", die bei der Erzeugung der <em>Closure</em> exisitierte, umfasst. </p>
+
+<p>Hier nun ein etwas interessanteres Beispiel, eine <code>makeAdder()</code> Funktion:</p>
+
+<pre class="brush: js notranslate">function makeAdder(x) {
+  return function(y) {
+    return x + y;
+  };
+}
+
+var add5 = makeAdder(5);
+var add10 = makeAdder(10);
+
+console.log(add5(2));  // 7
+console.log(add10(2)); // 12
+</pre>
+
+<p>In diesem Beispiel haben wir eine Funktion <code>makeAdder(x)</code> definiert, die ein einzelnes Argument <code>x</code> erwartet und eine neue Funktion zurück gibt. Die zurückgegebene Funktion erwartet ein Argument <code>y</code> und liefert die Summe von <code>x</code> und <code>y</code> als Ergebnis.</p>
+
+<p>Die Funktion <code>makeAdder</code> ist im Wesentlichen eine Factory für spezielle Funktionen: sie erzeugt  Funktionen, welche ihrem Argument einen bestimmten Wert hinzuaddieren. Im vorangegangenen Beispiel erzeugen wir mittels dieser Factory zwei neue Funktionen: eine von ihnen addiert 5 zu ihrem Argument, die andere addiert 10 hinzu.</p>
+
+<p><code>add5</code> und <code>add10</code> sind beides Closures. Sie teilen beide den selben Funktionsrumpf, behalten aber verschiedene Kontexte. In <code>add5</code>'s Kontext ist <code>x</code> 5, im Kontext von <code>add10</code> ist <code>x</code> 10.</p>
+
+<h2 id="Practical_closures">Practical closures</h2>
+
+<h3 id="Closures_in_der_Praxis">Closures in der Praxis</h3>
+
+<p>Soviel zur Theorie von Closures — aber gibt es tatsächlich einen Praxisnutzen? Betrachten wir dafür die Auswirkungen in der Praxis. Ein Closure lässt uns Daten (die Ausführungsumgebung) mit einer Funktion, die auf diesen Daten operiert, verbinden. Das hat offensichtliche Parallelen zur objektorientierten Programmierung, bei der die Daten eines Objekts (die Objekteigenschaften) mit einer oder mehreren Methoden verbunden werden. Somit kann ein Closure immer dann verwendet werden, wo normalerweise ein Objekt mit einer einzigen Methode verwendet wird.</p>
+
+<p>Besonders im Web kommt uns das häufig entgegen. Ein Großteil von JavaScript-Code ist ereignisbasierter Code: wir definieren erst ein Verhalten, und hängen es dann an ein Benutzerereignis (bspw. einen Mausklick oder Tastendruck). Unser Code nimmt dabei üblicherweise die Form eines Callback an: eine einzelne Funktion, die bei Eintreten des Ereignisses aufgerufen wird.</p>
+
+<p>Hier ein Beispiel aus der Praxis: Angenommen, wir wollen Buttons auf einer Seite hinzufügen, die die Schriftgröße ändern – eine Möglichkeit wäre, die Schriftgröße mittels der Eigenschaft <code>font-size</code> im <code>body</code>-Element in Pixel (<code>px</code>) zu setzen und bei anderen Elementen der Seite (z.B. <em>header</em>-Elemente wie <code>h1</code>, <code>h2</code>) die Eigenschaft <code>font-size</code> in der relativen Einheit <code>em</code> anzugeben:</p>
+
+<pre class="brush: css notranslate">body {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 12px;
+}
+
+h1 {
+  font-size: 1.5em;
+}
+
+h2 {
+  font-size: 1.2em;
+}
+</pre>
+
+<p>Unser interaktiver Schriftgößen-Button ändert die <code>font-size</code>-Eigenschaft des <code>body</code>-Elements. Diese Änderung wird von den anderen Elementen auf der Seite wahrgenommen und die Elemente passen sich dank der relativen Einheit <code>em</code> nun der neuen Schriftgröße an.</p>
+
+<p>Hier das JavaScript:</p>
+
+<pre class="brush: js notranslate">function makeSizer(size) {
+  return function() {
+    document.body.style.fontSize = size + 'px';
+  };
+}
+
+var size12 = makeSizer(12);
+var size14 = makeSizer(14);
+var size16 = makeSizer(16);
+</pre>
+
+<p><code>size12</code>, <code>size14</code> und <code>size16</code> sind nun Funktionen, die den <code>body</code>-Text in Schriftgröße 12 Pixel, 14 Pixel oder 16 Pixel ändern. Diese Funktionen können nun wie folgt als Buttons (in diesem Fall als Links) hinzugefügt werden:</p>
+
+<pre class="brush: js notranslate">document.getElementById('size-12').onclick = size12;
+document.getElementById('size-14').onclick = size14;
+document.getElementById('size-16').onclick = size16;
+</pre>
+
+<pre class="brush: html notranslate">&lt;a href="#" id="size-12"&gt;12&lt;/a&gt;
+&lt;a href="#" id="size-14"&gt;14&lt;/a&gt;
+&lt;a href="#" id="size-16"&gt;16&lt;/a&gt;
+</pre>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/vnkuZ/7726/","","200")}}</p>
+
+<h2 id="Emulation_privater_Methoden_mit_Hilfe_von_Closures">Emulation privater Methoden mit Hilfe von Closures</h2>
+
+<p>Sprachen wie Java bieten die Möglichkeit Methoden als privat zu deklarieren, was bedeutet, dass sie nur von anderen Methoden der gleichen Klasse aufgerufen werden können.</p>
+
+<p>Dies ist in JavaScript nicht explizit vorgesehen, aber es kann mit Hilfe von Funtionsabschlüssen nachgebildet werden. Private Methoden sind nicht nur nützlich um den Zugriff auf Code einzuschränken: sie bieten auch ein mächtiges Werkzeug um den globalen Namensraum zu verwalten indem sie weniger wichtige Methoden vor dem öffentlichen Interface verbergen.</p>
+
+<p>Das folgende Beispiel zeigt, wie man ein paar öffentliche Funktionen definiert, welche Zugriff auf private Funktionen und Variablen haben, indem man <em>Closures </em>verwendet. Die ist auch als <a class="external" href="http://www.google.com/search?q=javascript+module+pattern" title="http://www.google.com/search?q=javascript+module+pattern">module pattern</a> bekannt:</p>
+
+<pre class="brush: js notranslate">var counter = (function() {
+  var privateCounter = 0;
+  function changeBy(val) {
+    privateCounter += val;
+  }
+  return {
+    increment: function() {
+      changeBy(1);
+    },
+    decrement: function() {
+      changeBy(-1);
+    },
+    value: function() {
+      return privateCounter;
+    }
+  };
+})();
+
+console.log(counter.value()); // logs 0
+counter.increment();
+counter.increment();
+console.log(counter.value()); // logs 2
+counter.decrement();
+console.log(counter.value()); // logs 1
+</pre>
+
+<p>In den vorhergehenden Beispielen hatte jede <em>Closure </em>ihr eigenes Umfeld; hier erzeugen wir ein einziges Umfeld, welches von 3 Funktionen geteilt wird: <code>counter.increment</code>, <code>counter.decrement</code> und <code>counter.value</code>.</p>
+
+<p>Das gemeinsame Umfeld wird im Inneren einer anonymen Funktion erzeugt, welche nach der Definition auch gleich aufgerufen wird. Das Umfeld enthält 2 private Dinge: eine Variable mit dem Namen <code>privateCounter</code> und eine Funktion mit dem Namen <code>changeBy</code>. Auf keines von diesen privaten Dingen kann von ausserhalb der anonymen Funktion zugegriffen werden. Statt dessen muß auf sie mit Hilfe der drei öffentlichen Funktionen zugegriffen werden, welche von der anonymen Funktion zurueckgegeben werden.</p>
+
+<p>Diese drei öffentlichen Funktionen sind <em>Closures</em>, welche das gleiche Umfeld teilen. Wegen JavaScripts lexikalischem Geltungsbereich haben sie alle Zugriff auf die <code>privateCounter</code> Variable und die <code>changeBy</code> Funktion.</p>
+
+<div class="note">
+<p>Du siehst: wir definieren eine anonyme Funktion, die einen Zähler erzeugt, und dann rufen wir sie unmittelbar auf und weisen das Ergebnis der <code>counter</code> Variablen zu. Wir könnten diese Funktion in einer separaten Variablen <code>makeCounter</code> speichern und sie zum Erzeugen mehrerer Zähler benutzen.</p>
+</div>
+
+<pre class="brush: js notranslate">var makeCounter = function() {
+  var privateCounter = 0;
+  function changeBy(val) {
+    privateCounter += val;
+  }
+  return {
+    increment: function() {
+      changeBy(1);
+    },
+    decrement: function() {
+      changeBy(-1);
+    },
+    value: function() {
+      return privateCounter;
+    }
+  }
+};
+
+var counter1 = makeCounter();
+var counter2 = makeCounter();
+alert(counter1.value()); /* Alerts 0 */
+counter1.increment();
+counter1.increment();
+alert(counter1.value()); /* Alerts 2 */
+counter1.decrement();
+alert(counter1.value()); /* Alerts 1 */
+alert(counter2.value()); /* Alerts 0 */
+</pre>
+
+<p>Beachte wie jeder der zwei Zähler, <code>counter1</code> und <code>counter2</code>, seine Unabhängigkeit vom anderen erhält. Jede <em>Closure </em>referenziert eine andere Version der <code>privateCounter</code> Variablen durch ihren eigene Closure. Jedes mal, wenn einer der Zähler aufgerufen wird, ändert sich das lexikalische Umfeld durch ändern des Wertes dieser Variablen; jedoch haben Änderungen des Wertes der Variablen in der einen <em>Closure</em> keinen Einfluss auf den Wert in der anderen <em>Closure</em>.</p>
+
+<div class="note">
+<p>Diese Art <em>Closures </em>zu verwenden bietet einige Vorteile, die man der Objekt orientierten Progammierung zuspricht, insbesondere Daten verbergen und Klammerung.</p>
+</div>
+
+<h2 id="Closure_Scope_Chain">Closure Scope Chain</h2>
+
+<h3 id="Kette_von_Closure_Geltungsbereichen">Kette von Closure Geltungsbereichen</h3>
+
+<p>Für jede <em>Closure </em>haben wir drei Geltungsbereiche:</p>
+
+<ul>
+ <li>Lokaler Geltungsbereich (Eigener Geltungsbereich)</li>
+ <li>Geltungsbereich der Äusseren Funktionen</li>
+ <li>Globaler Geltungsbereich</li>
+</ul>
+
+<p>Wir haben also drei Geltungsbereiche für eine <em>Closure</em>. Aber häufig machen wir Fehler, wenn wir geschachtelte innere Funktionen haben. Betrachten wir das folgende Beispiel:</p>
+
+<pre class="brush: js notranslate">// global scope
+var e = 10;
+function sum(a){
+  return function(b){
+    return function(c){
+      // outer functions scope
+      return function(d){
+        // local scope
+        return a + b + c + d + e;
+      }
+    }
+  }
+}
+
+console.log(sum(1)(2)(3)(4)); // log 20
+
+// We can also write without anonymous functions:
+
+// global scope
+var e = 10;
+function sum(a){
+  return function sum2(b){
+    return function sum3(c){
+      // outer functions scope
+      return function sum4(d){
+        // local scope
+        return a + b + c + d + e;
+      }
+    }
+  }
+}
+
+var s = sum(1);
+var s1 = s(2);
+var s2 = s1(3);
+var s3 = s2(4);
+console.log(s3) //log 20
+</pre>
+
+<p>Also in dem obigen Beispiel haben wir eine Serie von geschachtelten Funktionen, die alle Zugriff auf den Geltungsbereich der äusseren Funktionen haben aber fälschlicherweise oft angenommen wird, dass sie Zugriff nur auf den Geltungsbereich der nächsten äusseren Funktion haben. Zur Verdeutlichung kann man sagen, dass alle <em>Closures </em>Zugriff auf die Geltungsbereiche aller Funktionen haben, innerhalb derer sie deklariert sind.</p>
+
+<h2 id="Creating_closures_in_loops_A_common_mistake">Creating closures in loops: A common mistake</h2>
+
+<h3 id="Erzeugen_von_Closures_in_Schleifen_Ein_häufiger_Fehler">Erzeugen von <em>Closures </em>in Schleifen: Ein häufiger Fehler</h3>
+
+<p>Vor der Einführung des <a href="/en-US/docs/Web/JavaScript/Reference/Statements/let" title="let"><code>let</code></a> Schlüsselwortes in ECMAScript 6, gab es ein häufiges Problem mit <em>Closures</em>, wenn sie innerhalb einer Schleife erzeugt wurden. Hier ein Beispiel:</p>
+
+<pre class="brush: html notranslate">&lt;p id="help"&gt;Helpful notes will appear here&lt;/p&gt;
+&lt;p&gt;E-mail: &lt;input type="text" id="email" name="email"&gt;&lt;/p&gt;
+&lt;p&gt;Name: &lt;input type="text" id="name" name="name"&gt;&lt;/p&gt;
+&lt;p&gt;Age: &lt;input type="text" id="age" name="age"&gt;&lt;/p&gt;
+</pre>
+
+<pre class="brush: js notranslate">function showHelp(help) {
+  document.getElementById('help').innerHTML = help;
+}
+
+function setupHelp() {
+  var helpText = [
+      {'id': 'email', 'help': 'Your e-mail address'},
+      {'id': 'name', 'help': 'Your full name'},
+      {'id': 'age', 'help': 'Your age (you must be over 16)'}
+    ];
+
+  for (var i = 0; i &lt; helpText.length; i++) {
+    var item = helpText[i];
+    document.getElementById(item.id).onfocus = function() {
+      showHelp(item.help);
+    }
+  }
+}
+
+setupHelp();
+</pre>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/v7gjv/8164/", "", 200)}}</p>
+
+<p>Das <code>helpText</code> Array definiert drei Hilfshinweise, die jeweils mit der ID eines Eingabefeldes verknüpft sind. Die Schleife geht durch diese Definitionen und hängt an das <code>onfocus</code> Ereignis die entsprechende Hilfemethode.</p>
+
+<p>Wenn du aber diesen Code ausprobierst, wirst du sehen, dass er nicht tut was er sollte. Egal auf welches Feld du den Fokus gibst, es wird immer die Meldung über dein Alter gezeigt.</p>
+
+<p>Der Grund dafür ist, dass die Callbacks, die an <code>onfocus</code> gehängt sind, <em>Closures </em>sind; sie bestehen aus der Funktionsdefinition und dem Umfeld aus dem Geltungsbereich von <code>setupHelp</code>. Drei <em>Closures</em> wurden von der Schleife erzeugt, aber jede benutzt das gleiche gemeinsame lexikalische Umfeld, das eine Variable mit sich änderndem Wert besitzt (<code>item.help</code>). Der Wert von <code>item.help</code> wird bestimmt, wenn die <code>onfocus</code> Callbacks ausgeführt werden. Weil aber die Schleife zu dieser Zeit bereits gelaufen ist, zeigt das <code>item</code> Objekt (das von allen drei <em>Closures </em>geteilt wird) weiterhin auf den letzten Eintrag in der <code>helpText</code> Liste.</p>
+
+<p>Eine Lösung ist in diesem Fall die Benutzung von mehreren <em>Closures</em>: insbesondere, eine Funktionsfabrik zu benutzten wie früher beschrieben:</p>
+
+<pre class="brush: js notranslate">function showHelp(help) {
+  document.getElementById('help').innerHTML = help;
+}
+
+function makeHelpCallback(help) {
+  return function() {
+    showHelp(help);
+  };
+}
+
+function setupHelp() {
+  var helpText = [
+      {'id': 'email', 'help': 'Your e-mail address'},
+      {'id': 'name', 'help': 'Your full name'},
+      {'id': 'age', 'help': 'Your age (you must be over 16)'}
+    ];
+
+  for (var i = 0; i &lt; helpText.length; i++) {
+    var item = helpText[i];
+    document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
+  }
+}
+
+setupHelp();
+</pre>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/v7gjv/9573/", "", 300)}}</p>
+
+<p>Das tut wie erwartet. Anstatt den Callbacks ein gemeinsames lexikales Umfeld zu geben erzeugt die <code>makeHelpCallback</code> Funktion ein neues lexikalisches Umfeld für jeden Callback, in dem sich <code>help</code> auf den entsprechenden String aus dem <code>helpText</code> Array bezieht.</p>
+
+<p>Ein anderer Weg das obige mit einer anonymonen <em>Closure</em> zu schreiben ist:</p>
+
+<pre class="brush: js notranslate">function showHelp(help) {
+  document.getElementById('help').innerHTML = help;
+}
+
+function setupHelp() {
+  var helpText = [
+      {'id': 'email', 'help': 'Your e-mail address'},
+      {'id': 'name', 'help': 'Your full name'},
+      {'id': 'age', 'help': 'Your age (you must be over 16)'}
+    ];
+
+  for (var i = 0; i &lt; helpText.length; i++) {
+    (function() {
+       var item = helpText[i];
+       document.getElementById(item.id).onfocus = function() {
+         showHelp(item.help);
+       }
+    })(); // Immediate event listener attachment with the current value of item (preserved until iteration).
+  }
+}
+
+setupHelp();</pre>
+
+<p>Wenn du nicht mehrere <em>Closures </em>benutzten möchtest, kannst du das <code><a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/let">let</a></code> Schlüsselwort benutzen, das in ES2015 eingeführt wurde:</p>
+
+<pre class="brush: js notranslate">function showHelp(help) {
+  document.getElementById('help').innerHTML = help;
+}
+
+function setupHelp() {
+  var helpText = [
+      {'id': 'email', 'help': 'Your e-mail address'},
+      {'id': 'name', 'help': 'Your full name'},
+      {'id': 'age', 'help': 'Your age (you must be over 16)'}
+    ];
+
+  for (var i = 0; i &lt; helpText.length; i++) {
+    let item = helpText[i];
+    document.getElementById(item.id).onfocus = function() {
+      showHelp(item.help);
+    }
+  }
+}
+
+setupHelp();</pre>
+
+<p>Dieses Beispiel benutzt <code>let</code> anstatt <code>var</code>, so dass jede Closure die blocksichtbare Variable bindet, was bedeutet, dass keine zusätzlichen <em>Closures </em>gebraucht werden.</p>
+
+<p>Eine weitere Alternative könnte sein <code>forEach()</code> für die Iteration über das <code>helpText</code> Array zu benutzen und einen Callback für jeden {{htmlelement("div")}} zuzuweisen, wie hier gezeigt:</p>
+
+<pre class="brush: js notranslate">function showHelp(help) {
+  document.getElementById('help').innerHTML = help;
+}
+
+function setupHelp() {
+  var helpText = [
+      {'id': 'email', 'help': 'Your e-mail address'},
+      {'id': 'name', 'help': 'Your full name'},
+      {'id': 'age', 'help': 'Your age (you must be over 16)'}
+    ];
+
+  helpText.forEach(function(text) {
+    document.getElementById(text.id).onfocus = function() {
+      showHelp(text.help);
+    }
+  });
+}
+
+setupHelp();</pre>
+
+<h2 id="Performance_considerations">Performance considerations</h2>
+
+<h3 id="Effizienzbetrachtungen">Effizienzbetrachtungen</h3>
+
+<p>Es ist unklug unnötigerweise Funktionen innerhalb anderer Funktionen zu erzeugen, wenn <em>Closures </em>für eine bestimmte Aufgabe nicht gebraucht werden. Denn es hat negativen Einfluss auf die Scripteffizienz sowohl in Bezug auf Geschwindigkeit als auch Speicherbedarf.</p>
+
+<p>Wenn zum Beispiel ein neues Objekt/Klasse erzeugt wird, sollten die Methoden mit dem Prototypen des Objekts verbunden sein anstatt im Objektkonstuktor erzeugt werden. Der Grund ist, dass immer wenn der Konstruktor aufgerufen wird, die Methoden neu zugewiesen würden (das heisst, für jede Objekterzeugung).</p>
+
+<p>Betrachte folgenden Fall:</p>
+
+<pre class="brush: js notranslate">function MyObject(name, message) {
+  this.name = name.toString();
+  this.message = message.toString();
+  this.getName = function() {
+    return this.name;
+  };
+
+  this.getMessage = function() {
+    return this.message;
+  };
+}
+</pre>
+
+<p>Da der vorliegende Code die Vorteile von <em>Closures </em>in diesem speziellen Fall nicht nutzt, könnten wir ihn umschreiben so dass wir die <em>Closure </em>vermeiden:</p>
+
+<pre class="brush: js notranslate">function MyObject(name, message) {
+  this.name = name.toString();
+  this.message = message.toString();
+}
+MyObject.prototype = {
+  getName: function() {
+    return this.name;
+  },
+  getMessage: function() {
+    return this.message;
+  }
+};
+</pre>
+
+<p>Es wird jedoch nicht empfohlen, den Prototyp neu zu definieren. Das folgende Beispiel erweitert statt dessen den existierenden Prototyp:</p>
+
+<pre class="brush: js notranslate">function MyObject(name, message) {
+  this.name = name.toString();
+  this.message = message.toString();
+}
+MyObject.prototype.getName = function() {
+  return this.name;
+};
+MyObject.prototype.getMessage = function() {
+  return this.message;
+};
+</pre>
+
+<p>In den zwei vorhergehenden Beispielen kann der vererbte Prototyp von allen Objekten benutzt werden und die Definition der Methoden muss nicht bei jeder Objekterzeugung durchgeführt werden. Weitere Informationen unter <a href="/de/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Details zum Objektmodell</a>.</p>
diff --git a/files/de/web/javascript/datenstrukturen/index.html b/files/de/web/javascript/datenstrukturen/index.html
new file mode 100644
index 0000000000..d918cd7a0e
--- /dev/null
+++ b/files/de/web/javascript/datenstrukturen/index.html
@@ -0,0 +1,271 @@
+---
+title: JavaScript Datentypen und Datenstrukturen
+slug: Web/JavaScript/Datenstrukturen
+tags:
+  - Beginner
+  - JavaScript
+  - Types
+translation_of: Web/JavaScript/Data_structures
+---
+<div>{{jsSidebar("More")}}</div>
+
+<p>Alle Programmiersprachen besitzen eingebaute Datenstrukturen. Diese unterschieden sich aber je nach Programmiersprache. Dieser Artikel versucht, die in JavaScript verfügbaren Datenstrukturen und ihre Eigenschaften zu erläutern. Außerdem werden an passenden Stellen Vergleiche zu anderen Programmiersprachen gezogen.</p>
+
+<h2 id="Dynamische_Typisierung">Dynamische Typisierung</h2>
+
+<p>JavaScript ist eine <em>schwach typisierte</em> oder <em>dynamische</em> Programmiersprache. Datentypen werden bei einer Variable nicht explizit deklariert und jede Variable kann mit Werten jedes Typen beschrieben (überschrieben) werden:</p>
+
+<pre class="brush: js">var foo = 42;    // foo ist jetzt eine number
+var foo = "bar"; // foo ist jetzt ein string
+var foo = true;  // foo ist jetzt ein boolean
+</pre>
+
+<h2 id="Datentypen">Datentypen</h2>
+
+<p>Der aktuelle ECMAScript Standard definiert sieben Datentypen:</p>
+
+<ul>
+ <li>Sechs Datentypen sind {{Glossary("Primitive", "primitives")}}:
+  <ul>
+   <li>{{Glossary("Boolean")}}</li>
+   <li>{{Glossary("Null")}}</li>
+   <li>{{Glossary("Undefined")}}</li>
+   <li>{{Glossary("Number")}}</li>
+   <li>{{Glossary("String")}}</li>
+   <li>{{Glossary("Symbol")}} (new in ECMAScript 2015)</li>
+  </ul>
+ </li>
+ <li>und {{Glossary("Object")}}</li>
+</ul>
+
+<h2 id="Primitive_Werte">Primitive Werte</h2>
+
+<p>Alle Datentypen, bis auf Object, definieren unveränderbare Werte (Werte, die nicht verändert werden können). Zum Beispiel im Gegensatz zu C sind Strings unveränderbar. Die Werte dieser Datentypen werden als "primitive Werte" bezeichnet.</p>
+
+<h3 id="Boolean_Datentyp">Boolean Datentyp</h3>
+
+<p>Boolean repräsentiert eine logische Einheit und kann zwei Werte annehmen: <code>true</code> und <code>false</code>.</p>
+
+<h3 id="Null_Datentyp">Null Datentyp</h3>
+
+<p>Der Null Typ hat genau einen Wert: <code>null</code>. Siehe {{jsxref("null")}} und {{Glossary("Null")}} für mehr Details.</p>
+
+<h3 id="Undefined_Datentyp">Undefined Datentyp</h3>
+
+<p>Eine Variable, der noch kein Wert zugewiesen wurde, hat den Wert <code>undefined</code>. Siehe {{jsxref("undefined")}} und {{Glossary("Undefined")}} für mehr Details.</p>
+
+<h3 id="Number_Datentyp">Number Datentyp</h3>
+
+<p>Laut dem ECMAScript Standard gibt es nur einen Datentyp für Zahlen: <a href="https://de.wikipedia.org/wiki/Doppelte_Genauigkeit">double-precision 64-bit binary format IEEE 754 value</a> (Zahlen zwischen -(2<sup>63</sup>) und +2<sup>63</sup>-1). <strong>Es gibt keinen spezifischen Datentyp für Ganzzahlen</strong>. Neben Gleitkommazahlen kann der Datentyp für Zahlen auch drei symbolische Werte annehmen: <code>+Infinity</code>, <code>-Infinity</code> und <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a> (not-a-number = keine Zahl).</p>
+
+<p>Um auf größere oder kleinere Werte als <code>+/-Infinity</code> zu prüfen, können die Konstanten {{jsxref("Number.MAX_VALUE")}} oder {{jsxref("Number.MIN_VALUE")}} verwendet werden. Ab ECMAScript 2015 kann auch geprüft werden, ob sich eine Zahl innerhalb des Bereichs der Gleitkommazahlen mit doppelter Präzision befindet. Die ist mit {{jsxref("Number.isSafeInteger()")}} als auch {{jsxref("Number.MAX_SAFE_INTEGER")}} und {{jsxref("Number.MIN_SAFE_INTEGER")}} möglich. Zahlen außerhalb diesen Bereichs sind in JavaScript nicht mehr sicher.</p>
+
+<p>Der Datentyp für Zahlen hat eine Ganzzahl mit zwei Repräsentationen: 0 kann als -0 und +0 repräsentiert werden. ("0" ist ein Alias für +0). In der Praxis hat dies fast keinen Einfluss. <code>+0 === -0</code> ist zum Beispiel <code>true</code>. Eine Division ergibt aber zwei unterschiedliche Werte:</p>
+
+<pre class="brush: js">&gt; 42 / +0
+Infinity
+&gt; 42 / -0
+-Infinity
+</pre>
+
+<p>Obwohl eine Zahl oft ihren Wert repräsentiert, bietet JavaScript <a href="/de/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="en/JavaScript/Reference/Operators/Bitwise_Operators">einige binäre Operatoren</a> an. Mit ihnen können zum Beispiel mehrere Boolean Werte innerhalb einer einzigen Zahl mittels <a class="external" href="http://en.wikipedia.org/wiki/Mask_%28computing%29">Bitmaskierung</a> repräsentiert werden. Das gilt generell als schlechte Praxis, da JavaScript andere Wege anbietet, um eine Menge von Booleans zu repräsentierten (wie zum Beispiel ein Array von Booleans oder ein Objekt mit Boolean Werten als benannte Eigenschaften). Bitmaskierung führt außerdem dazu, dass Code schwerer zu lesen, zu verstehen und zu warten ist. In sehr speziellen Anwendungsgebiete kann eine Bitmaskierung aber notwendig sein. Zum Beispiel wenn nur geringe Speichermengen verfügbar sind oder in extremen Fällen, wenn jedes übertragene Bit im Netzwerk zählt. Diese Technik sollte aber als letzter Ausweg gesehen werden, um die Größe zu optimieren.</p>
+
+<h3 id="String_Datentyp">String Datentyp</h3>
+
+<p>Der Datentyp String wird in JavaScript für die Repräsentation von textuellen Daten verwendet. Er ist eine Menge von "Elementen" aus 16-Bit vorzeichenlosen Ganzzahlenwerten. Jedes Element im String nimmt eine Position im String ein. Das erste Element befindet sich an der Position mit dem Index 0, das nächste beim Index 1 und so weiter. Die Länge eines String ist die Anzahl der sich darin befindenden Elemente.</p>
+
+<p>In Gegensatz zu anderen Programmiersprachen wie C kann ein String in JavaScript nicht verändert werden. Das bedeutet, dass ein String nicht mehr verändert werden kann, nachdem er erstellt wurde. Es ist aber möglich einen anderen String mit der Hilfe von Operationen aus dem ursprünglichen String zu erstellen:</p>
+
+<ul>
+ <li>Eine Teilzeichenfolge vom ursprünglichen String durch das Auswählen von bestimmten Zeichen oder mit der Methode {{jsxref("String.substr()")}}.</li>
+ <li>Eine Verkettung von zwei Strings mit dem Operator (<code>+</code>) oder {{jsxref("String.concat()")}}.</li>
+</ul>
+
+<h4 id="Vermeiden_Sie_stringly-typing_in_Ihrem_Code!">Vermeiden Sie "stringly-typing" in Ihrem Code!</h4>
+
+<p>Es kann verlockend sein mit String komplexe Daten zu repräsentieren. Es bringt kurzfristige Vorteile mit sich:</p>
+
+<ul>
+ <li>Komplexe Strings können einfach durch Verkettung erstellt werden.</li>
+ <li>Strings sind einfacher im Debug (die Ausgabe entspricht dem Inhalt vom String).</li>
+ <li>Strings sind bei vielen APIs gebräuchlich (<a href="/de/docs/Web/API/HTMLInputElement" title="HTMLInputElement">Eingabefeldern</a>, <a href="/de/docs/Storage" title="Storage">Local Storage</a> Werte, {{ domxref("XMLHttpRequest") }} Antworten in ihrer Eigenschaft als <code>responseText</code>, etc.). Dadurch kann es verlockend sein nur mit Strings zu arbeiten.</li>
+</ul>
+
+<p>Ohne Konventionen kann jede Datenstruktur als String repräsentiert werden. Das ist aber keine gute Idee. Es könnte zum Beispiel eine Liste emuliert werden, indem die Listenelemente im String durch einen Separator getrennt werden. In diesem Fall ist ein JavaScript Array aber geeigneter, denn die Liste kann zerstört werden sobald ein Listenelement den Separator enthält. Ein Escape-Zeichen oder Ähnliches müsste verwendet werden. Dafür sind aber zusätzliche Konventionen nötig und die Wartung des Codes nimmt an Komplexität zu.</p>
+
+<p>Strings sollten nur für textuelle Daten verwendet werden. Wenn komplexe Daten repräsentiert werden sollen, parsen Sie den String und verwenden Sie eine geeignete Abstraktion.</p>
+
+<h3 id="Symbol_Datentyp">Symbol Datentyp</h3>
+
+<p>Symbole in JavaScript sind mit ECMAScript 2015 eingeführt worden. Ein Symbol ist ein <strong>eindeutiger</strong> und <strong>unveränderbarer</strong> primitiver Wert. Er kann als Schlüssel einer Eigenschaft eines Objekts (siehe unten) verwendet werden. In manchen Programmiersprachen werden Symbole auch Atoms genannt. Details dazu sind unter {{Glossary("Symbol")}} und dem {{jsxref("Symbol")}} Object Wrapper in JavaScript zu finden.</p>
+
+<h2 id="Objekte">Objekte</h2>
+
+<p>Objekte sind in der Informatik Werte im Speicher, die möglicherweise über einen {{Glossary("Identifier", "identifier")}} referenziert werden.</p>
+
+<h3 id="Eigenschaften">Eigenschaften</h3>
+
+<p>In JavaScript können Objekte als eine Sammlung von Eigenschaften (Properties) angesehen werden. Mit der <a href="/de/docs/Web/JavaScript/Guide/Werte_Variablen_und_Literale#Objekt-Literale">Object Literal Syntax</a> werden die nötigsten Eigenschaften initialisiert. Danach können Eigenschaften hinzugefügt oder wieder entfernt werden. Der Wert einer Eigenschaft kann von jedem Datentyp sein. Darunter können sich auch andere Objekte befinden. Dadurch können komplexe Datenstrukturen realisiert werden. Eigenschaften werden mit einem Key identifiziert. Ein Key ist entweder ein String oder ein Symbol.</p>
+
+<p>Es gibt zwei Arten von Eigenschaften, die bestimmte Attribute haben: Die Dateneigenachften und Zugriffseigenschaften.</p>
+
+<h4 id="Dateneigenschaften">Dateneigenschaften</h4>
+
+<p>Assoziiert einen Key mit einem Wert und besitzt die folgenden Attribute:</p>
+
+<table class="standard-table">
+ <caption>Attribute einer Dateneigenschaft</caption>
+ <tbody>
+  <tr>
+   <th>Attribut</th>
+   <th>Datentyp</th>
+   <th>Beschreibung</th>
+   <th>Standardwert</th>
+  </tr>
+  <tr>
+   <td>[[Value]]</td>
+   <td>beliebiger JavaScript Datentyp</td>
+   <td>Der Wert, der bei einem Get-Zugriff auf die Eigenschaft zurückgegeben wird</td>
+   <td>undefined</td>
+  </tr>
+  <tr>
+   <td>[[Writable]]</td>
+   <td>Boolean</td>
+   <td><code>false</code>, wenn [[Value]] der Eigenschaft nicht verändert werden kann.</td>
+   <td>false</td>
+  </tr>
+  <tr>
+   <td>[[Enumerable]]</td>
+   <td>Boolean</td>
+   <td><code>true</code>, wenn die Eigenschaft in <a href="/de/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> Schleifen aufgelistet wird. Siehe dazu auch <a href="/de/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Aufzählbarkeit und Eigentum von Eigenschaften</a>.</td>
+   <td>false</td>
+  </tr>
+  <tr>
+   <td>[[Configurable]]</td>
+   <td>Boolean</td>
+   <td><code>false</code>, wenn die Eigenschaft nicht gelöscht und die Attribute [[Value]] und [[Writable]] nicht verändert werden können.</td>
+   <td>false</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Zugriffseigenschaften">Zugriffseigenschaften</h4>
+
+<p>Assoziiert einen Key mit einer oder zwei Accessor-Funktionen (get und set), um einen Wert zu erhalten oder zu speichern. Es besitzt die folgenden Attribute:</p>
+
+<table class="standard-table">
+ <caption>Attribute eines Zugriffseigenschaft</caption>
+ <tbody>
+  <tr>
+   <th>Attribut</th>
+   <th>Datentyp</th>
+   <th>Beschreibung</th>
+   <th>Standardwert</th>
+  </tr>
+  <tr>
+   <td>[[Get]]</td>
+   <td>Funktionsobjekt oder undefined</td>
+   <td>Die Funktion wird ohne ein Argument aufgerufen und gibt den Wert der Eigenschaft zurück, sobald ein Get-Zugriff auf den Wert ausgeführt wird. Siehe auch <a href="/de/docs/Web/JavaScript/Reference/Operators/get"><code>get</code></a>.</td>
+   <td>undefined</td>
+  </tr>
+  <tr>
+   <td>[[Set]]</td>
+   <td>Funktionsobjekt oder undefined</td>
+   <td>Die Funktion wird mit einem Argument aufgerufen, das den Wert für die Zuweisung enthält. Sie wird immer aufgerufen, sobald eine bestimmte Eigenschaft verändert werden soll. Siehe auch <a href="/de/docs/Web/JavaScript/Reference/Operators/set"><code>set</code></a>.</td>
+   <td>undefined</td>
+  </tr>
+  <tr>
+   <td>[[Enumerable]]</td>
+   <td>Boolean</td>
+   <td><code>true</code>, wenn die Eigenschaft in <a href="/de/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> Schleifen aufgelistet wird.</td>
+   <td>false</td>
+  </tr>
+  <tr>
+   <td>[[Configurable]]</td>
+   <td>Boolean</td>
+   <td><code>false</code>, wenn die Eigenschaft nicht gelöscht und nicht zu einer Dateneigenschaft verändert werden kann.</td>
+   <td>false</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Attribut wird normalerweise von der JavaScript-Umgebung genutzt und man kann nicht direkt zugreifen (mehr darüber: <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty()</a>). Deswegen sind die Attribute in doppelten eckigen Klammern statt in einfachen.</p>
+</div>
+
+<h3 id="Normale_Objekte_und_Funktionen">"Normale" Objekte und Funktionen</h3>
+
+<p>Ein Objekt in JavaScript ist ein Mapping zwischen Keys und Werten. Keys sind Strings oder Symbole und Werte können von jedem Datentyp sein. Dadurch sind Objekte eine Art <a class="external" href="https://de.wikipedia.org/wiki/Hashtabelle">Hashtabelle</a>.</p>
+
+<p>Funktionen sind reguläre Objekte mit der Fähigkeit direkt aufgerufen werden zu können.</p>
+
+<h3 id="Datum">Datum</h3>
+
+<p>Mit der in JavaScript eingebauten <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Date"><code>Date</code> Utility</a> kann ein Datum repräsentiert werden.</p>
+
+<h3 id="Indizierte_Collections_Arrays_und_typisierte_Arrays">Indizierte Collections: Arrays und typisierte Arrays</h3>
+
+<p><a href="/de/docs/JavaScript/Reference/Global_Objects/Array" title="Array">Arrays</a> sind reguläre Objekte bei denen eine Beziehung zwischen Eigenschaften, die über Ganzzahlen indiziert werden, und der Eigenschaft 'length' besteht. Zusätzlich erben Arrays von <code>Array.prototype</code>, einer Helfermethoden, die die Manipulation von Arrays anbietet, wie zum Beispiel <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf" title="en/JavaScript/Reference/Global_Objects/Array/indexOf">indexOf</a></code> (zur Suche eines Werts im Array) oder <code><a href="/de/docs/JavaScript/Reference/Global_Objects/Array/push" title="en/JavaScript/Reference/Global_Objects/Array/push">push</a></code> (um Elemente zu einem Array hinzufügen). Dadurch können Listen und Mengen über ein Array repräsentiert werden.</p>
+
+<p><a href="/de/docs/Web/JavaScript/Typed_arrays">Typisierte Arrays</a> sind in JavaScript mit ECMAScript Edition 2015 eingeführt worden. Sie bieten eine Array-ähnliche Sicht auf einen darunterliegenden binären Datenpuffer an. Die folgende Tabelle stellt äquivalente C Datentypen dar:</p>
+
+<p>{{page("/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray", "TypedArray_objects", "", 0, 3)}}</p>
+
+<h3 id="Keyed_Collections_Maps_Sets_WeakMaps_WeakSets">Keyed Collections: Maps, Sets, WeakMaps, WeakSets</h3>
+
+<p>Diese Datenstrukturen verwenden Objektreferenzen als Keys. Sie wurden mit ECMAScript Edition 6 eingeführt. {{jsxref("Set")}} und {{jsxref("WeakSet")}} repräsentieren eine Menge von Objekten, während {{jsxref("Map")}} und {{jsxref("WeakMap")}} einen Wert mit einem Objekt assoziieren. Der Unterschied zwischen Maps und WeakMaps ist, dass bei Maps über Objekt-Keys iteriert werden kann. Das erlaubt eine spätere Optimierung der Garbage Collection.</p>
+
+<p>Maps und Sets könnten in reinem ECMAScript 5 implementiert werden. Da Objekte aber nicht verglichen werden können (im Sinne von zum Beispiel "kleiner gleich"), wäre die Performance für einen Look-Up linear. Native Implementierungen (inklusive WeakMaps) können eine ungefähr logarithmische Look-Up Performance haben.</p>
+
+<p>Um Daten an einen DOM-Knoten zu binden, werden normalerweise die Eigenschaften direkt auf dem Objekt gesetzt oder es werden <code>data-*</code> Attribute verwendet. Das hat aber den Nachteil, dass die Daten für jedes Skript in demselben Kontext verfügbar sind. Mit Maps und WeakMaps können Daten einfach privat an ein Objekt gebunden werden.</p>
+
+<h3 id="Strukturierte_Daten_JSON">Strukturierte Daten: JSON</h3>
+
+<p>JSON (JavaScript Object Notation) ist ein leichtgewichtges Format zum Datenaustausch, das von JavaScript abgeleitet aber auch von vielen anderen Programmiersprachen verwendet wird. Mit JSON können universelle Datenstrukturen aufgebaut werden. Siehe {{Glossary("JSON")}} und {{jsxref("JSON")}} für mehr Details.</p>
+
+<h3 id="Mehr_Objekte_in_der_Standardbibliothek">Mehr Objekte in der Standardbibliothek</h3>
+
+<p>JavaScript hat eine Standardbibliothek mit zahlreichen eingebauten Objekten. Details darüber sind unter <a href="/de/docs/Web/JavaScript/Reference/Global_Objects">Referenz</a> zu finden.</p>
+
+<h2 id="Datentypen_mit_dem_typeof_Operator_bestimmen">Datentypen mit dem <code>typeof</code> Operator bestimmen</h2>
+
+<p>Der <code>typeof</code> Operator kann den Datentyp einer Variablen herausfinden. Unter der <a href="/de/docs/Web/JavaScript/Reference/Operators/typeof">Referenzseite</a> sind mehr Details und Grenzfälle zu finden.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>initiale Definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-8', 'Types')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-ecmascript-data-types-and-values', 'ECMAScript Data Types and Values')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-ecmascript-data-types-and-values', 'ECMAScript Data Types and Values')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a class="link-https" href="https://github.com/nzakas/computer-science-in-javascript/">Nicholas Zakas Sammlung von gebräuchlichen Datastrukturen und Algorithmen in JavaScript.</a></li>
+ <li><a href="https://github.com/monmohan/DataStructures_In_Javascript" title="https://github.com/monmohan/DataStructures_In_Javascript">Search Tre(i)es mit JavaScript JavaScript</a></li>
+</ul>
diff --git a/files/de/web/javascript/eine_wiedereinfuehrung_in_javascript/index.html b/files/de/web/javascript/eine_wiedereinfuehrung_in_javascript/index.html
new file mode 100644
index 0000000000..a306d9fd16
--- /dev/null
+++ b/files/de/web/javascript/eine_wiedereinfuehrung_in_javascript/index.html
@@ -0,0 +1,909 @@
+---
+title: Eine Wiedereinführung in JavaScript
+slug: Web/JavaScript/Eine_Wiedereinfuehrung_in_JavaScript
+tags:
+  - Anleitung
+  - CodingScripting
+  - Einleitung
+  - Guide
+  - Intermediate
+  - JavaScript
+  - Lernen
+translation_of: Web/JavaScript/A_re-introduction_to_JavaScript
+---
+<div>{{jsSidebar}}</div>
+
+<p>Warum eine "Wieder" - Einführung? Weil {{Glossary("JavaScript")}} als <a class="external" href="http://javascript.crockford.com/javascript.html">die am meisten missverstandene Programmiersprache der Welt</a> bekannt ist. Obwohl die Sprache oft als Spielzeug abgewertet wird, besitzt sie neben ihrer Einfachheit einige mächtige Sprachfunktionen. Heutzutage wird JavaScript in einer Großzahl von wichtigen Anwendungen verwendet, was zeigt, dass Wissen über diese Technologie eine wichtige Eigenschaft für jeden Web- und Mobil-Entwickler ist.</p>
+
+<p>Es ist sinnvoll mit einem Überblick über die Sprachgeschichte zu beginnen. JavaScript wurde im Jahr 1995 von Brendan Eich entworfen, der Ingenieur bei Netscape war. JavaScript wurde erstmals 1996 mit Netscape 2 veröffentlicht. Ursprünglich hieß die Sprache LiveScript, wurde aber wegen unglücklichen Marketingentscheidung umbenannt, die sich die Popularität der Java-Sprache von Sun Microsystem zunutze machen wollte - obwohl beide wenig gemeinsam hatten. Dies ist seither eine Quelle für Verwirrung.</p>
+
+<p>Einige Monate später veröffentlichte Microsoft JScript mit dem Internet Explorer 3. Diese war eine weitgehend zu JavaScript kompatibele Sprache. Einige Monate später übergab Netscape JavaScript an <a class="external" href="https://www.ecma-international.org/">Ecma International</a>, einer Europäischen Standardisierungsorganisation, welche noch im selben Jahr die ersten Edition des {{Glossary("ECMAScript")}} Standards veröffentlichten. Der Standard bekam 1999 ein bedeutendes Update mit <a class="external" href="https://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript Edition 3</a> und hält sich seither sehr stabil. Die vierte Edition des Standards wurde aufgrund von politischen Meinungsverschiedenheiten zur Komplexität der Sprache fallen gelassen. Viele Teile der vieren Edition bildeten die Basis der fünften und sechsten Edition des Standards, welche im Dezember 2009 bzw. im Juni 2015 veröffentlicht wurden.</p>
+
+<div class="note">
+<p>Aus Gründen der Vertrautheit verwenden wir ab hier die Bezeichnung "JavaScript" anstatt "ECMAScript".</p>
+</div>
+
+<p>Anders als viele andere Programmiersprachen, gibt es bei JavaScript kein Konzept für Eingabe und Ausgabe. JavaScript wurde als Skriptsprache in eine Hostumgebung entworfen und es ist die Aufgabe dieser Umgebung Mechanismen für die Kommunikation mit der Außenwelt bereitzustellen. Die hierfür am meisten genutzte Hostumgebung ist der Browser, jedoch findet man Interpreter auch in vielen anderen Anwendungen, zum Beispiel Adobe Acrobat, Photoshop, SVG Bilder, Yahoo! Widget Umgebung, serverseitigen Applikationen wie <a href="https://nodejs.org/">node.js</a>, NoSQL-Datenbanken wie die Open Source-Datenbank <a href="https://couchdb.apache.org/">Apache CouchDB</a>, integrierte Computer, Desktopumgebungen wie <a href="https://www.gnome.org/">GNOME</a> (eine der beliebtesten Desktopumgebungen für GNU/Linux Betriebssysteme) und vielen mehr.</p>
+
+<h2 id="Überblick">Überblick</h2>
+
+<p>JavaScript ist eine dynamische Multi-Paradigmen-Sprache mit Typen und Operatoren, Standardobjekten und Methoden. Die Syntax basiert auf den Sprachen Java und C — viele Strukturen aus diesen Sprachen wurden in JavaScript übernommen. JavaScript unterstützt Objektorientierung mit Prototypobjekten statt Klassen (mehr darüber in <a href="/de/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Vererbung mit Prototypen</a> und ES2015 <a href="/de/docs/Web/JavaScript/Reference/Classes">Klassen</a>). JavaScript unterstützt auch funktionale Programmierung — Funktionen sind Objekte, die Funktionen ermöglichen, ausführbaren Code zu speichern und wie jedes andere Objekt weitergegeben zu werden.</p>
+
+<p>Beginnen wir mit einer Betrachtung der Sprachbausteine. JavaScript Programme manipulieren Werte und jeder Wert ist von einem bestimmten Typ. JavaScript Typen sind:</p>
+
+<ul>
+ <li>{{jsxref("Number")}}</li>
+ <li>{{jsxref("String")}}</li>
+ <li>{{jsxref("Boolean")}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Object")}}</li>
+ <li>{{jsxref("Symbol")}} (neu in ES 6)</li>
+</ul>
+
+<p>... und {{jsxref("undefined")}} und {{jsxref("null")}}, die ein wenig speziell sind. Und {{jsxref("Array")}} , die eine besonere Art von Objekt ist. Und {{jsxref("Date")}} <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Date"> </a>und {{jsxref("RegExp")}}, welche man quasi mitgeliefert bekommt. Wenn man genau sein will, sind Funktionen ebenfalls eine spezielle Art von Objekten. Also sieht das Typdiagramm eher so aus:</p>
+
+<ul>
+ <li>{{jsxref("Number")}}</li>
+ <li>{{jsxref("String")}}</li>
+ <li>{{jsxref("Boolean")}}</li>
+ <li>{{jsxref("Symbol")}} (neu in ES2015)</li>
+ <li>{{jsxref("Object")}}
+  <ul>
+   <li>{{jsxref("Function")}}</li>
+   <li>{{jsxref("Array")}}</li>
+   <li>{{jsxref("Date")}}</li>
+   <li>{{jsxref("RegExp")}}</li>
+  </ul>
+ </li>
+ <li>{{jsxref("null")}}</li>
+ <li>{{jsxref("undefined")}}</li>
+</ul>
+
+<p>Zusätzlich gibt es noch einige vordefinierte {{jsxref("Error")}} Typen. Der Einfachheit halber beschränken wir uns im Folgenden erst einmal auf die Typen aus dem ersten Diagramm.</p>
+
+<h2 id="Numbers">Numbers</h2>
+
+<p>Numbers sind in JavaScript laut der Spezifikation "doppeltpräzise 64-bit Werte im IEEE 754 Format". Das hat einige interessante Konsequenzen. Es gibt in JavaScript nichts vergleichbares wie Integer, weshalb man vorsichtig mit Arithmetik umgehen muss, wenn man Mathematik wie in C oder Java nutzt.</p>
+
+<p>Achte auch auf Dinge wie:</p>
+
+<pre class="brush: js">0.1 + 0.2 == 0.30000000000000004</pre>
+
+<p>In der Praxis werden Integer-Werte wie 32-Bit-Integer behandelt und einige Implementierungen speichern sie sogar so, bis sie einen Befehl ausführen sollen, der für eine Number, aber nicht für eine 32-Bit Integer gültig ist. Das kann z.B. für Bitoperationen wichtig sein.</p>
+
+<p>Unterstützt werden die <a href="/de/docs/Web/JavaScript/Reference/Operators#Arithmetische_Operatoren">arithmetischen Standardoperationen</a>, inklusive Addition, Subtraktion, Modulo (oder Rest) Arithmetik und so weiter. Außerdem existiert noch ein Objekt <em>Math</em> für die Anwendung von mathematischen Funktionen und Konstanten, welches oben noch nicht genannt wurde:</p>
+
+<pre class="brush: js">Math.sin(3.5);
+var umfang = 2 * Math.PI * r;</pre>
+
+<p>Man kann Strings mit der eingebauten {{jsxref("Global_Objects/parseInt", "parseInt()")}} Funktion nach Integer konvertieren. Die Funktion enthält die Basis des Zahlensystems für die Konvertierung als zweiten optionalen Parameter, welcher immer angegeben werden sollte:</p>
+
+<pre class="brush: js">parseInt("123", 10); // 123
+parseInt("010", 10); // 10
+</pre>
+
+<p>In älteren Browsern werden Strings, die mit "0" anfangen als Oktalzahlen (Basis 8) interpretiert, seit 2013 ist das aber nicht mehr so. Wenn man sich bei dem Stringformat nicht sicher ist, kann das in den älteren Browsern zu überraschenden Ergebnissen führen:</p>
+
+<pre class="brush: js">parseInt("010");  //  8
+parseInt("0x10"); // 16</pre>
+
+<p>Hier sieht man, dass die {{jsxref("Global_Objects/parseInt", "parseInt()")}} Funktion den ersten String als Oktalzahl, wegen der führenden 0, und den zweiten String als Hexadezimalzahl, wegen des führenden "0x", interpretiert. Die Hexadezimalnotation ist immernoch zulässig; nur die Oktalnotation wurde entfernt, weil sie praktisch nicht mehr verwendet wird.</p>
+
+<p>Um eine Binärzahl in ein Integer zu ändern, verwendet man einfach die Basis 2:</p>
+
+<pre class="brush: js">parseInt("11", 2); // 3</pre>
+
+<p>Auf die gleiche Weise lassen sich auch Gleitkommazahlen mit Hilfe der Funktion<a href="/de/docs/Web/JavaScript/Reference/Global_Objects/parseFloat"> </a> {{jsxref("Global_Objects/parseFloat", "parseFloat()")}} konvertieren. Anders als bei der {{jsxref("Global_Objects/parseInt", "parseInt()")}} Funktion nutzt <code>parseFloat()</code> immer die Basis 10.</p>
+
+<p>Auch der unäre + Operator kann eingesetzt werden, um zu einer Zahl zu konvertieren:</p>
+
+<pre class="brush: js">+ "42";   // 42
++ "010";  // 10
++ "0x10"; // 16</pre>
+
+<p>Ein spezieller Wert mit der Bezeichnung {{jsxref("NaN")}} (für "Not a Number") wird zurückgegeben, wenn der String keinen numerischen Wert enthält:</p>
+
+<pre class="brush: js">parseInt("hello", 10); // NaN</pre>
+
+<p><code>NaN</code> ist gefährlich: Wenn es als Operand in eine mathematische Operation benutzt wird, wird das Ergebnis ebenfalls <code>NaN</code> sein;</p>
+
+<pre class="brush: js">NaN + 5; // NaN</pre>
+
+<p>Mit der eingebauten  {{jsxref("Global_Objects/isNaN", "isNaN()")}} Funktion kann man auf <code>NaN</code> testen:</p>
+
+<pre class="brush: js">isNaN(NaN); // true</pre>
+
+<p>JavaScript kennt außerdem die speziellen Werte {{jsxref("Infinity")}} und <code>-Infinity</code>:</p>
+
+<pre class="brush: js"> 1 / 0; //  Infinity
+-1 / 0; // -Infinity</pre>
+
+<p>Man kann auf <code>Infinity</code>, <code>-Infinity</code> und <code>NaN</code> Werte mit der eingebauten Funktion {{jsxref("Global_Objects/isFinite", "isFinite()")}} testen:</p>
+
+<pre class="brush: js">isFinite(1 / 0);     // false
+isFinite(-Infinity); // false
+isFinite(NaN);       // false</pre>
+
+<div class="note">
+<p>Die {{jsxref("Global_Objects/parseInt", "parseInt()")}} und {{jsxref("Global_Objects/parseFloat", "parseFloat()")}} Funktionen lesen einen String, bis ein Zeichen erreicht wird, welches für das Zahlensystem unzulässig ist und geben die Zahl bis zu dieser Stelle zurück. Der unäre + Operator konvertiert den String einfach zu <code>NaN</code>, wenn dieser ein unerlaubtes Zeichen enthält. Probiere mal aus, den String "10.2abc" mit jeder der Methoden in der Console zu konvertieren, um die Unterschiede besser zu verstehen.</p>
+</div>
+
+<h2 id="Strings">Strings</h2>
+
+<p>Strings sind in JavaScript eine Folge von <a href="/de/docs/Web/JavaScript/Guide/Grammar_and_types#String_Literale">Unicode-Zeichen</a>. Das sollte für alle erfreulich sein, die mit Internationalisierung arbeiten. Genauer gesagt sind Strings Folgen von UTF-16 Codeeinheit; jeder Codeeinheit ist durch eine 16-Bit Zahl repräsentiert. Jedes Unicode-Zeichen besteht aus 1 oder 2 Codeeinheiten.</p>
+
+<p>Für ein einzelnes Zeichen, verwendet man einfach einen String mit einem Zeichen.</p>
+
+<p>Um die Länge eines Strings (in Codeeinheiten) herauszufinden, nutzt man die <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/String/length">length </a>Eigenschaft:</p>
+
+<pre class="brush: js">'hello'.length; // 5</pre>
+
+<p>Da ist die erster Begegnung mit JavaScript Objekten! Haben wir schon erwähnt, dass man auch Strings wie {{jsxref("Object", "Objekte", "", 1)}} verwenden kann? Sie haben auch {{jsxref("String", "Methoden", "#Methoden", 1)}}, um den Strings zu verändern und Informationen zu erhalten.</p>
+
+<pre class="brush: js">'hello'.charAt(0); // "h"
+'hello, world'.replace('hello', 'goodbye'); // "goodbye, world"
+'hello'.toUpperCase(); // "HELLO"</pre>
+
+<h2 id="Andere_Datentypen">Andere Datentypen</h2>
+
+<p>JavaScript unterscheidet zwischen {{jsxref("null")}}, wobei es sich um einen Wert handelt, der einen "nicht Wert" repräsentiert (und nur über das <code>null</code> Schlüsselwort erreichbar ist) und {{jsxref("undefined")}}, wobei es sich um einen Wert vom Typ <code>undefined</code> handelt, welcher für einen nicht initialisierten Wert steht - also, dass noch kein Wert zugewiesen wurde. Variablen werden später besprochen, aber in JavaScript ist es möglich Variablen zu deklarieren, ohne ihnen eine Wert zuzuweisen. Wenn das gemacht wird ist die Variable vom Typ <code>undefined</code>. <code>undefined</code> ist sogar eine Konstante.</p>
+
+<p>JavaScript hat einen Boolean Typ mit den möglichen Werten <code>true</code> und <code>false</code> (beide sind Schlüsselwörter). Jeder Wert kann mit den folgenden Regeln zu einem Boolean konvertiert werden:</p>
+
+<ol>
+ <li><code>false</code>, <code>0</code>, leere Strings (<code>""</code>), <code>NaN</code>, <code>null</code>, und <code>undefined</code> werden <code>false</code>.</li>
+ <li>Alle anderen Werte werden <code>true</code>.</li>
+</ol>
+
+<p>Die Konvertierung kann explizit mit der <code>Boolean()</code> Funktion durchgeführt werden:</p>
+
+<pre class="brush: js">Boolean('');  // false
+Boolean(234); // true</pre>
+
+<p>Das ist jedoch kaum nötig, da JavaScript die Konvertierung automatisch vornimmt, wenn ein Boolean erwartet wird, wie z.B. bei einer <code>if</code>-Anweisung (siehe unten). Aus diesem Grund ist oft von "true Werten" und "false Werten" die Rede, womit Werte gemeint sind, die zu <code>true</code> oder <code>false</code> werden, nachdem sie zu einem Boolean konvertiert wurden. Alternativ können diese Werte auch "truthy" und "falsy" genannt werden.</p>
+
+<p>Boolesche Operationen wie beispielsweise <code>&amp;&amp;</code> (logisches <em>und</em>), <code>||</code> (logisches <em>oder</em>) und <code>!</code> (logisches <em>nicht</em>) werden ebenfalls unterstützt (siehe unten).</p>
+
+<h2 id="Variablen">Variablen</h2>
+
+<p>Neue Variablen werden in JavaScript mit einem der drei Schlüsselwort <code><a href="/de/docs/Web/JavaScript/Reference/Statements/let">let</a></code>, <code><a href="/de/docs/Web/JavaScript/Reference/Statements/const">const</a></code> oder <code><a href="/de/docs/Web/JavaScript/Reference/Statements/var" title="/en/JavaScript/Reference/Statements/var">var</a></code> <a href="/de/docs/Web/JavaScript/Reference/Statements/var"> </a>deklariert.</p>
+
+<p><code><strong>let</strong></code> erlaubt es Variablen auf Blockebene zu deklarieren. Die deklarierte Variable ist in dem Block gültig, von dem sie umschlossen wird.</p>
+
+<pre class="brush: js">let a;
+let name = "Simon";</pre>
+
+<p>Im folgenden ist ein Beispiel für den Gültigkeitsbereich einer mit <code><strong>let</strong></code> deklarierten Variablen:</p>
+
+<pre class="brush: js">// myLetVariable ist hier *nicht* sichtbar
+
+for (let myLetVariable = 0; myLetVariable &lt; 5; myLetVariable++) {
+  // myLetVariable ist nur hier sichtbar
+}
+
+// myLetVariable ist hier *nicht* sichtbar
+</pre>
+
+<p><code><strong>const</strong></code> erlaubt es Variablen zu deklarieren, dessen Wert nie wieder geändert wird. Die Variable ist in dem Block sichtbar, von dem sie umschlossen wird.</p>
+
+<pre class="brush: js">const Pi = 3.14;  // Variable Pi wird initialisiert
+Pi = 1;  // Führt zu einem Fehler, weil konstante (const) Variablen nicht geändert werden können.
+</pre>
+
+<p><code><strong>var</strong></code> ist das gebräuchlichste deklarative Schlüsselwort. Es hat nicht die Restriktionen, die die anderen beiden Schlüsselwörter haben. Das liegt daran, dass das traditionell der einzige Weg war, um eine Variable in JavaScript zu deklarieren. Eine Variable, die mit dem <code><strong>var</strong></code> Schlüsselwort definiert wird, ist in der Funktion, in der sie deklariert wird, erreichbar.</p>
+
+<pre class="brush: js">var a;
+var name = 'Simon';</pre>
+
+<p>Im folgenden ist ein Beispiel für den Gültigkeitsbereich einer mit <strong><code>var</code></strong> deklarierten Variablen:</p>
+
+<pre class="brush: js">// myVarVariable *ist* hier sichtbar
+
+for (var myVarVariable = 0; myVarVariable &lt; 5; myVarVariable++) {
+// myVarVariable ist in der ganzen Funktion sichtbar
+}
+
+// myVarVariable *ist* hier sichtbar</pre>
+
+<p>Deklariert man eine Variable, ohne ihr einen Wert zuzuweisen, ist ihr Typ <code>undefined</code>.</p>
+
+<p>Ein sehr wichtiger Unterschied zu anderen Programmiersprachen wie Java besteht darin, dass bei JavaScript keine Blöckegültigkeitsbereiche hat, sondern nur Funktionsgültigkeitsbereiche. Wird eine Variable mit dem <code>var</code> Schlüsselwort in einer zusammengesetzten Statement (z.B. if-Anweisung) definiert, so ist diese Variable innerhalb der ganzen Funktion sichtbar. Jedoch ist es ab ECMAScript 2015 mit <a href="/de/docs/Web/JavaScript/Reference/Statements/let">let </a>und <a href="/de/docs/Web/JavaScript/Reference/Statements/const">const</a> Deklarationen möglich, Variablen mit Blocksichtbarkeitsbereich zu erstellen.</p>
+
+<h2 id="Operatoren">Operatoren</h2>
+
+<p>JavaScripts numerische Operatoren sind <code>+</code>, <code>-</code>, <code>*</code>, <code>/</code> und <code>%</code> welches der Divisionsrestoperator ist (<a href="/de/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Divisionsrest_()">nicht dasselbe wie Modulo</a>). Werte werden mit <code>=</code> zugewiesen und es gibt zusammengesetzte Zuweisungsstatement wie <code>+=</code> und <code>-=</code>. Diese werden als <code>x = x Operator y</code> interpretiert.</p>
+
+<pre class="brush: js">x += 5
+x = x + 5</pre>
+
+<p>Zum Inkrementieren und Dekrementieren kann <code>++</code> und <code>--</code> verwendet werden. Diese können als Prefix oder Postfix Operatoren benutzt werden.</p>
+
+<p>Mit dem <a href="/de/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition">+ Operator</a> ist es auch möglich, Strings zu verbinden:</p>
+
+<pre class="brush: js">'hello' + ' world'; // "hello world"</pre>
+
+<p>Addiert man einen String mit einer Zahl (oder einem anderen Wert), wird alles zuerst zu einem String konvertiert. Dies bereitet manchmal Probleme:</p>
+
+<pre class="brush: js">"3" + 4 + 5;  // "345"
+3 + 4 + "5"; // "75"</pre>
+
+<p>Das Addieren eines leeren Strings zu einem Wert ist eine hilfreiche Methode, den Wert in einen String zu konvertieren.</p>
+
+<p><a href="/de/docs/Web/JavaScript/Reference/Operators/Vergleichsoperatoren" title="en/Core_JavaScript_1.5_Reference/Operators/Comparison_Operators">Vergleiche</a> können in JavaScript mit <code>&lt;</code>, <code>&gt;</code>, <code>&lt;=</code> und <code>&gt;=</code> durchgeführt werden. Dieses funktionieren bei Strings und Zahlen. Gleichheit ist etwas komplizierter. Der Doppelgleichoperator hat einen Typzwang, was zu überraschend Ergebnissen führen kann:</p>
+
+<pre class="brush: js">123 == "123"; // true
+1 == true;    // true</pre>
+
+<p>Um den Typzwang zu vermeiden, benutzt man den Dreifachgleichoperator:</p>
+
+<pre class="brush: js">123 === "123"; // false
+1 === true;    // false</pre>
+
+<p>Des Weiteren gibt es die Operatoren != und !== für das Testen auf Ungleichheit.</p>
+
+<p>Außerdem gibt es in JavaScript noch <a href="/en/JavaScript/Reference/Operators/Bitwise_Operators" title="en/Core_JavaScript_1.5_Reference/Operators/Bitwise_Operators">bitweise Operationen</a>.</p>
+
+<h2 id="Kontrollstrukturen">Kontrollstrukturen</h2>
+
+<p>JavaScript hat eine ähnliche Menge an Kontrollstrukturen wie andere Sprachen aus der C Familie. Bedingte Statements sind durch <code>if</code> und <code>else</code> unterstützt; man kann sie auch verketten:</p>
+
+<pre class="brush: js">var name = 'kittens';
+if (name == 'puppies') {
+  name += ' woof';
+} else if (name == 'kittens') {
+  name += ' neow';
+} else {
+  name += '!';
+}
+name == 'kittens neow';
+</pre>
+
+<p>JavaScript hat <code>while</code>- und <code>do-while</code>-Schleifen. Die erste ist gut für normale Schleifen. Die zweite ist für Schleifen geeignet, bei denen sichergestellt werden soll, dass der Schleifeninhalt mindestens einmal ausgeführt wird:</p>
+
+<pre class="brush: js">while (true) {
+  // Endlosschleife!
+}
+
+var input;
+do {
+  input = get_input();
+} while (inputIsNotValid(input))
+</pre>
+
+<p>JavaScripts <a href="/de/docs/Web/JavaScript/Reference/Statements/for"><code>for</code>-Schleife</a> ist die selbe wie in C und Java: Die Kontrollinformationen können in einer einzigen Zeile angegeben werden.</p>
+
+<pre class="brush: js">for (var i = 0; i &lt; 5; i++) {
+  // Wird 5-Mal ausgeführt
+}
+</pre>
+
+<p>JavaScript hat zudem zwei weitere bekannte for Schleifen: <a href="/de/docs/Web/JavaScript/Reference/Statements/for...of"><code>for</code>...<code>of</code></a></p>
+
+<pre class="brush: js">for (let value of array) {
+  // Tue etwas mit value
+}</pre>
+
+<p>und <a href="/de/docs/Web/JavaScript/Reference/Statements/for...in"><code>for</code>...<code>in</code></a>:</p>
+
+<pre class="brush: js">for (let property in object) {
+  // Tue etwas mit dem objects property
+}</pre>
+
+<p>Die Operatoren <code>&amp;&amp;</code> und <code>||</code> benutzen Kurzschlusslogik, was bedeutet, dass die Ausführung des zweiten Operanden abhängig von dem ersten ist. Dieses ist nützlich für die Überprüfung auf null, bevor auf Objektattribute zugegriffen wird:</p>
+
+<pre class="brush: js">var name = o &amp;&amp; o.getName();
+</pre>
+
+<p>Oder für das Abfangen von Werten (wenn falsy Werte nicht valide sind):</p>
+
+<pre class="brush: js">var name = cachedName || (cachedName = getName());
+</pre>
+
+<p>JavaScript besitzt einen ternären Operator für bedingte Ausdrücke:</p>
+
+<pre class="brush: js">var allowed = (age &gt; 18) ? 'yes' : 'no';
+</pre>
+
+<p>Das <code>switch</code> Statement kann führ mehrere Zweige abhängig von einer Zahl oder einem String eingesetzt werden:</p>
+
+<pre class="brush: js">switch(action) {
+    case 'draw':
+        drawIt();
+        break;
+    case 'eat':
+        eatIt();
+        break;
+    default:
+        doNothing();
+}
+</pre>
+
+<p>Lässt man das <code>break</code> Statement weg, werden auch der folgezweig ausgeführt. Dieses Verhalten ist selten gewollt — es lohnt sich in solchen Fällen explizite Kommentare hinzuzufügen, um späteres Debugging zu unterstützen:</p>
+
+<pre class="brush: js">switch(a) {
+    case 1: // fallthrough
+    case 2:
+        eatit();
+        break;
+    default:
+        donothing();
+}
+</pre>
+
+<p>Die <code>default</code> Klausel ist optional. Wenn gewünscht, können Ausdrücke im <code>switch</code> und im <code>case</code> eingesetzt werden. Der Vergleiche zwischen beiden wird mit dem === Operator durchgeführt:</p>
+
+<pre class="brush: js">switch(1 + 3) {
+    case 2 + 2:
+        yay();
+        break;
+    default:
+        neverhappens();
+}
+</pre>
+
+<h2 id="Objekte">Objekte</h2>
+
+<p>JavaScript Objekte setzen sich aus einfachen Name-Wert-Paaren zusammen. Sie sind ähnlich wie:</p>
+
+<ul>
+ <li>Dictionaries in Python</li>
+ <li>Hashes in Perl und Ruby</li>
+ <li>Hash tables in C und C++</li>
+ <li>HashMaps in Java</li>
+ <li>Assoziative Arrays in PHP</li>
+</ul>
+
+<p>Der Fakt, dass diese Datenstruktur so oft eingesetzt wird, zeigt seine Vielseitigkeit. Da alles (reine Kerntypen) in JavaScript ein Objekt ist, beinhaltet jedes JavaScript-Programm natürlich eine große Menge von Suchoperationen in Hashtabellen. Gut, dass diese so schnell sind!</p>
+
+<p>Der "Name"-Teil ist ein JavaScript String, während als Wert jeder JavaScript Wert in Frage kommt — auch andere Objekte. Dies ermöglicht das Erstellen von beliebig komplexen Datenstrukturen.</p>
+
+<p>Es gibt zwei grundlegende Möglichkeiten, ein leeres Objekt zu erstellen:</p>
+
+<pre class="brush: js">var obj = new Object();
+</pre>
+
+<p>Und:</p>
+
+<pre class="brush: js">var obj = {};
+</pre>
+
+<p>Beide sind semantisch äquivalent. Die zweite wird "Objektliteral Syntax" genannt und ist verbreiteter. Diese Syntax ist zudem der Kern des JSON Formates und sollte immer bevorzugt genutzt werden.</p>
+
+<p>"Objektliteral Syntax" kann eingesetzt werden, um ein umfassendes Objekt zu erstellen:</p>
+
+<pre class="brush: js">var obj = {
+    name: "Carrot",
+    "for": "Max",
+    details: {
+        color: "orange",
+        size: 12
+    }
+}
+</pre>
+
+<p>Der Zugriff auf Eigenschaften kann verkettet werden:</p>
+
+<pre class="brush: js">obj.details.color; // orange
+obj["details"]["size"]; // 12</pre>
+
+<p>Das folgende Beispiel erstellt einen Prototyp <code>Person</code> und eine Instanz dieses Prototyps <code>you</code>.</p>
+
+<pre class="brush: js">function Person(name, age) {
+  this.name = name;
+  this.age = age;
+}
+
+// Definiere ein Objekt
+var you = new Person('You', 24);
+// Wir erstellen eine Person mit dem Namen "You" und dem Alter 24</pre>
+
+<p><strong>Nach der Erstellung</strong> kann eine Objekteigenschaft über einem von zwei möglichen Wegen erreicht werden:</p>
+
+<pre class="brush: js">obj.name = "Simon";
+var name = obj.name;
+</pre>
+
+<p>Und...</p>
+
+<pre class="brush: js">// Klammernotation
+obj['name'] = 'Simon';
+var name = obj['name'];
+// man kann eine Variable benutzen, um einen Schlüssel zu definieren
+var user = prompt('was ist dein Schlüssel?');
+obj[user] = prompt('was ist dein Schlüssel?');
+</pre>
+
+<p>Beide sind wieder semantisch äquivalent. Die zweite Methode hat den Vorteil, dass der Name der Eigenschaft als String zur Verfügung gestellt wird, was bedeutet, dass dieser zur Laufzeit berechnet werden kann. Jedoch verhindert diese Methode, dass einige JavaScript-Engines "Minifier Optimierungen" durchführen können. Sie kann außerdem eingesetzt werden, um Eigenschaften zu erreichen, die ein <a href="/de/docs/Web/JavaScript/Reference/Lexical_grammar#Schlüsselwörter" title="en/Core_JavaScript_1.5_Reference/Reserved_Words">reservierte Schlüsselwörter</a> als Namen haben:</p>
+
+<pre class="brush: js">obj.for = "Simon"; // Syntaxfehler, da 'for' ein reserviertes Schlüsselwort ist
+obj["for"] = "Simon"; // funktioniert
+</pre>
+
+<div class="note">
+<p>Ab ECMAScript 5 können reservierte Wörter bei Objektliteralen verwendet werden. Das bedeutet, dass keine Anführungszeichen und eckige Klammern mehr nötig sind. <a href="https://es5.github.io/#x7.6.1">Siehe ES5 Spec</a>.</p>
+</div>
+
+<p>Weitere Informationen zu Objekten und Prototypen gibt es im Artikel <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype">Object.prototype</a>. Für eine Erklärung von Objektprototypen und die Objektprototypenkette siehe in den Artikel <a href="/de/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Vererbung und die Prototypenkette</a>.</p>
+
+<div class="note">
+<p>Ab ECMAScript 2015 können Schlüssel mit Variablen definiert werden, indem eckige Klammern verwendet werden. <code>{[phoneType]: 12345}</code> ist möglich, statt <code>var userPhone = {}; userPhone[phoneType] = 12345</code> zu verwenden.</p>
+</div>
+
+<h2 id="Arrays">Arrays</h2>
+
+<p>Arrays sind in JavaScript ein spezieller Typ von Objekten. Sie funktionieren weitgehend wie normale Objekte (numerische Eigenschaften können nur über die <code>[]</code>-Syntax erreicht werden), besitzen jedoch eine zusätzliche Eigenschaft <code>length</code>. Der Wert dieser Eigenschaft ist immer der höchsten Index des Arrays + 1.</p>
+
+<p>Eine Möglichkeit ein Array zu erstellen ist die folgende:</p>
+
+<pre class="brush: js">var a = new Array();
+a[0] = 'dog';
+a[1] = 'cat';
+a[2] = 'hen';
+a.length; // 3</pre>
+
+<p>Eine praktischere Möglichkeit  ist die Erstellung über ein Array-Literal.</p>
+
+<pre class="brush: js">var a = ['dog', 'cat', 'hen'];
+a.length; // 3</pre>
+
+<p>Zu beachten ist, dass <code>array.length</code> nicht unbedingt der Anzahl der Elemente des Arrays entspricht. Siehe das folgende Beispiel:</p>
+
+<pre class="brush: js">var a = ['dog', 'cat', 'hen'];
+a[100] = 'fox';
+a.length; // 101</pre>
+
+<p>Zur Erinnerung: Der Wert von <code>length</code> entspricht immer dem höchsten Index + 1.</p>
+
+<p>Versucht man auf einen nicht-existenten Array-Index zuzugreifen, erhält man <code>undefined</code>:</p>
+
+<pre class="brush: js">typeof a[90]; // undefined</pre>
+
+<p>Wenn Sie die obigen Angaben über <code>[]</code> und Länge (<code>array.length</code>) berücksichtigen, können Sie über ein Array iterieren, indem Sie die folgende for-Schleife verwenden:</p>
+
+<pre class="brush: js">for (var i = 0; i &lt; a.length; i++) {
+    // Verarbeitung von a[i]
+}
+</pre>
+
+<p>ECMAScript (ES2015) empfiehlt die wesentlich kürzer gefasste <a href="/de/docs/Web/JavaScript/Reference/Statements/for...of"><code>for</code>...<code>of</code></a>-Schleife, um über Objekte und Arrays zu iterieren:</p>
+
+<pre class="brush: js">for (const currentValue of a) {
+  // Tue etwas mit currentValue
+}</pre>
+
+<p>Man kann auch mit einer <a href="/de/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> Schleife über ein Array iterieren, wobei diese nicht über die Arrayelemente, sondern die Arrayindizes iteriert. Zudem wird bei einer solchen Schleife auch über Eigenschaften iteriert, die evtl. später in <code>Array.prototype</code> hinzugefügt werden. Deshalb wird diese Methode für Arrays nicht empfohlen.</p>
+
+<p>In ECMAScript (ES2015) wurde mit <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach">forEach()</a></code> eine weitere Schleife zur Iteration über Arrays eingeführt:</p>
+
+<pre class="brush: js">['dog', 'cat', 'hen'].forEach(function(currentValue, index, array) {
+  // Verarbeite currentValue oder array[index]
+});</pre>
+
+<p>Das Anhängen eines neuen Elements zu einem Array funktioniert folgendermaßen:</p>
+
+<pre class="brush: js">a.push(item);</pre>
+
+<p>Arrays besitzen viele Methoden. <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Array">Hier findet man die Dokumentation für alle Array Methoden</a>.</p>
+
+<table style="height: 586px; width: 874px;">
+ <thead>
+  <tr>
+   <th scope="col">Methodenname</th>
+   <th scope="col">Beschreibung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>a.toString()</code></td>
+   <td>Gibt einen String zurück, bei dem <code>toString()</code> jedes Objektes getrennt mit Komma ist.</td>
+  </tr>
+  <tr>
+   <td><code>a.toLocaleString()</code></td>
+   <td>Gibt einen String zurück, bei dem <code>toLocaleString</code><code>()</code> jedes Objektes getrennt mit Komma ist.</td>
+  </tr>
+  <tr>
+   <td><code>a.concat(item1[, item2[, ...[, itemN]]])</code></td>
+   <td>Erstellt eine Kopie mit den neu hinzugefügten Elemente.</td>
+  </tr>
+  <tr>
+   <td><code>a.join(sep)</code></td>
+   <td>Wandelt das Array in einen String um. Die Elemente werden durch <code>sep</code> getrennt.</td>
+  </tr>
+  <tr>
+   <td><code>a.pop()</code></td>
+   <td>Entfernt das letzte Element und gibt es zurück.</td>
+  </tr>
+  <tr>
+   <td><code>a.push(item1, ..., itemN)</code></td>
+   <td>Fügt ein oder mehrere Elemente am Ende hinzu.</td>
+  </tr>
+  <tr>
+   <td><code>a.reverse()</code></td>
+   <td>Kehrt die Reihenfolge des Arrays um.</td>
+  </tr>
+  <tr>
+   <td><code>a.shift()</code></td>
+   <td>Entfernt das erste Element und gibt es zurück.</td>
+  </tr>
+  <tr>
+   <td><code>a.slice(start, end)</code></td>
+   <td>Gibt einen Teil eines Arrays zurück.</td>
+  </tr>
+  <tr>
+   <td><code>a.sort([cmpfn])</code></td>
+   <td>Sortiert das Array. Ein Vergleichsfunktion kann optional angegeben werden.</td>
+  </tr>
+  <tr>
+   <td><code>a.splice(start, delcount[, item1[, ...[, itemN]]])</code></td>
+   <td>Modifiziert ein Array, indem ein Teil gelöscht und durch mehrere Elemente ersetzt wird.</td>
+  </tr>
+  <tr>
+   <td><code>a.unshift(item1[, item2[, ...[, itemN]]])</code></td>
+   <td>Fügt Elemente am Anfang des Arrays hinzu.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Funktionen">Funktionen</h2>
+
+<p>Neben Objekten gehören Funktionen zu den Kernkomponenten von JavaScript. Die Syntax für eine einfache Funktion könnte kaum einfacher sein:</p>
+
+<pre class="brush: js">function add(x, y) {
+    var total = x + y;
+    return total;
+}
+</pre>
+
+<p>Das Beispiel demonstriert eine einfache Funktion. Einer JavaScript-Funktion können 0 oder mehr benannte Parameter übergeben werden. Der Funktionsrumpf kann beliebig viele Anweisungen enthalten und kann seine eigene lokalen Variablen definieren, die nur in der Funktion erreichbar sind. Das <code>return</code> Statement kann dazu benutzt werden, um jederzeit einen Rückgabewert festzulegen und die Funktion zu beenden. Wird kein <code>return</code>-Statement angegeben (oder ein leeres <code>return</code>-Statement ohne Wert), gibt JavaScript <code>undefined</code> zurück.</p>
+
+<p>Die benannten Parameter sind eher als Richtlinie zu verstehen, weniger als eine Pflichtangabe. Eine Funktion kann also auch ohne Angabe der Parameter aufgerufen werden, wobei die Parameter dann den Wert <code>undefined</code> bekommen.</p>
+
+<pre class="brush: js">add() //NaN
+// Addition mit undefined ist nicht möglich
+</pre>
+
+<p>Mann kann der Funktion auch mehr Parameter übergeben, als erwartet werden:</p>
+
+<pre class="brush: js">add(2, 3, 4) // 5
+// Addition der ersten beiden Parameter; 4 wird ignoriert
+</pre>
+
+<p>Auf den ersten Blick wirkt das komisch, jedoch haben Funktionen innerhalb des Funktionsrumpfes Zugriff auf eine zusätzliche Variable namens <a href="/de/docs/Web/JavaScript/Reference/Functions/arguments" title="En/Core_JavaScript_1.5_Reference/Functions_and_function_scope/arguments"><code>arguments</code></a>, welche ein arrayähnliches Objekt ist, das alle der Funktion übergebenen Werte enthält. Hier eine überarbeitete <code>add-</code>Funktion, die beliebig viele Parameter verarbeitet:</p>
+
+<pre class="brush: js">function add() {
+    var sum = 0;
+    for (var i = 0, j = arguments.length; i &lt; j; i++) {
+        sum += arguments[i];
+    }
+    return sum;
+}
+
+add(2, 3, 4, 5); // 14
+</pre>
+
+<p>Das ist jedoch nicht nützlicher als <code>2 + 3 + 4 + 5</code> zu schreiben. Deswegen erstellen wir eine Funktion, welche den Durchschnitt aller Werte in unserem Array berechnet:</p>
+
+<pre class="brush: js">function avg() {
+  var sum = 0;
+  for (var i = 0, j = arguments.length; i &lt; j; i++) {
+    sum += arguments[i];
+  }
+  return sum / arguments.length;
+}
+
+avg(2, 3, 4, 5); // 3.5</pre>
+
+<p>Das ist wirklich nützlich, jedoch wirkt es noch ein bisschen lang. Um den Code ein wenig zu reduzieren, kann man den Einsatz des <code>arguments</code>-Arrays durch eine <a href="/de/docs/Web/JavaScript/Reference/Functions/rest_parameters">Rest Parameter Syntax</a> ersetzen. Damit können beliebig viele Argumente übergeben werden und der Code bleibt minimal. Der <strong>Rest Parameter Operator</strong> wird in der Funktionsparameterliste mit dem Format <code>...variable</code> geschrieben und enthält alle nicht benannten, der Funktion übergebenen Argumente in der Variable. Zudem kann man die <code>for</code>-Schleife durch eine <code>for...of</code>-Schleife ersetzen, um die Werte in der Variablen direkt verwenden zu können.</p>
+
+<pre class="brush: js">function avg(...args) {
+  var sum = 0;
+  for (let value of args) {
+    sum += value;
+  }
+  return sum / args.length;
+}
+
+avg(2, 3, 4, 5); // 3.5</pre>
+
+<div class="note">
+<p>Die Variable <code>args</code><strong> </strong>in der oberen Funktion<strong> </strong>enthält alle an die Funktion übergebenen Werte.</p>
+
+<p>Es ist wichtig zu beachten, dass der Einsatz des <strong>Rest Parameter Operators</strong> in einer Funktionsdeklaration alle Argumente <strong>nach</strong> der Deklaration enthält, jedoch nicht die davor. Z. B. wird bei <code><em>function avg(</em><strong>firstValue</strong><em>, ...args)</em></code> der erste der Funktion übergebene Wert in der Variable <code>firstValue</code> gespeichert und alle folgenden Werte werden in der Variable <code>args</code> gespeichert. Das ist eine sehr nützliche Sprachfunktion, die jedoch ein neues Problem aufwirft. Die Funktion <code>avg()</code> nimmt eine mit Kommata getrennte Liste von Argumenten entgegen — was ist jedoch, wenn man den Durchschnitt eines Arrays haben möchte? Man kann die Funktion folgendermaßen umschreiben:</p>
+</div>
+
+<pre class="brush: js">function avgArray(arr) {
+  var sum = 0;
+  for (var i = 0, j =  arr.length; i &lt; j; i++) {
+    sum += arr[i];
+  }
+  return sum / arr.length;
+}
+
+avgArray([2, 3, 4, 5]); // 3.5</pre>
+
+<p>Es wäre jedoch schöner, wenn man die erste Funktion wiederverwenden könnten. Glücklicherweise ist es bei JavaScript möglich, eine Funktion mit einem Array von Argumenten aufzurufen, indem man die Methode <code>apply()</code> benutzt, die alle <code>Function</code>-Objekte besitzen:</p>
+
+<pre class="brush: js">avg.apply(null, [2, 3, 4, 5]); // 3.5</pre>
+
+<p>Das zweite Argument der <code>apply()</code>-Funktion ist das Array mit den Argumenten; das erste Argument wird später bzw. weiter unten näher erklärt. Das betont noch einmal die Tatsache, dass Funktionen auch Objekte sind.</p>
+
+<div class="note">
+<p>Man kann das gleiche Ergebnis mit dem Einsatz des <a href="/de/docs/Web/JavaScript/Reference/Operators/Spread_operator">Spread operator</a> im Funktionsaufruf erreichen.</p>
+
+<p>Zum Beispiel: <code>avg(...numbers);</code></p>
+</div>
+
+<p>JavaScript erlaubt es, anonyme Funktionen zu erstellen:</p>
+
+<pre class="brush: js">var avg = function() {
+    var sum = 0;
+    for (var i = 0, j = arguments.length; i &lt; j; i++) {
+        sum += arguments[i];
+    }
+    return sum / arguments.length;
+}
+</pre>
+
+<p>Die Semantik ist äquivalent zu <code>function avg()</code> Form. Es ist extrem mächtig, weil es erlaubt, an bestimmten Stellen vollständige Funktionsdefinition zu schreiben, wo normalerweise ein Ausdruck verwendet wird. Das ermöglicht allerlei klevere Tricks. Hier eine Möglichkeit, eine Variable zu verbergen — wie Variablen mit Blocksichtbarkeit in C:</p>
+
+<pre class="brush: js">var a = 1;
+var b = 2;
+
+(function() {
+  var b = 3;
+  a += b;
+})();
+
+a; // 4
+b; // 2</pre>
+
+<p>JavaScript erlaubt den rekursiven Aufruf von Funktionen. Das ist praktisch beim Verarbeiten von Baumstrukturen, wie es beim Browser-<a href="/en/DOM" title="en/DOM">DOM</a> der Fall ist.</p>
+
+<pre class="brush: js">function countChars(elm) {
+    if (elm.nodeType == 3) { // TEXT_NODE
+        return elm.nodeValue.length;
+    }
+    var count = 0;
+    for (var i = 0, child; child = elm.childNodes[i]; i++) {
+        count += countChars(child);
+    }
+    return count;
+}
+</pre>
+
+<p>Das hebt ein potentielles Problem mit anonymen Funktionen hervor: Wie ruft man sie rekursiv auf, wenn sie keinen Namen haben? JavaScript erlaubt hierfür die Benennung von Funktionsausdrücken. Man kann dazu benannte "IIFEs" (Immediately Invoked Function Expressions) wie unten beschrieben benutzen:</p>
+
+<pre class="brush: js">var charsInBody = (function counter(elm) {
+    if (elm.nodeType == 3) { // TEXT_NODE
+        return elm.nodeValue.length;
+    }
+    var count = 0;
+    for (var i = 0, child; child = elm.childNodes[i]; i++) {
+        count += counter(child);
+    }
+    return count;
+})(document.body);
+</pre>
+
+<p>Der angegebene Name im Funktionsausdruck ist nur innerhalb der selben Funktion verfügbar. Das erlaubt der JavaScript-Engine, den Code besser zu optimieren und fördert die Lesbarkeit des Codes. Der Name wird zudem im Debugger und einigen Stack Traces angezeigt, was beim Debuggen viel Zeit sparen kann.</p>
+
+<p>Zu beachten ist auch hier wieder, dass JavaScript-Funktionen ebenfalls Objekte sind — wie alles andere in JavaScript. Und man kann Eigenschaften ändern und hinzufügen, wie es im oberen Abschnitt über Objekte bereits gezeigt wurde.</p>
+
+<h2 id="Benutzerdefinierte_Objekte">Benutzerdefinierte Objekte</h2>
+
+<div class="note">Detaillierte Informationen zum objektorientiertem Programmieren in JavaScript finden Sie in der <a href="/de/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript" title="https://developer.mozilla.org/en/Introduction_to_Object-Oriented_JavaScript">Einführung zu objektorientiertem Programmieren in JavaScript</a>.</div>
+
+<p>In klassischen objektorientierten Programmiersprachen sind Objekte Zusammenstellungen von Daten und Methoden, die mit den Daten arbeiten. JavaScript ist eine Prototypenbasierte Sprache, die anders als in Java oder C++ kein Klassen-Statement besitzt (was manchmal verwirrend für Programmierer ist, die bisher nur mit Sprachen mit Klassen-Statements gearbeitet haben). Stattdessen benutzt JavaScript Funktionen als Klassen. Angenommen es gibt ein Objekt <code><em>person</em></code> mit Feldern für Vor- und Nachnamen. Es gibt zwei Wege den Namen zu schreiben: als "Vorname Nachname" oder "Nachname, Vorname". Nutzt man die vorher beschriebenen Funktionen und Objekte, lässt sich dies z. B. so umsetzen:</p>
+
+<pre class="brush: js">function makePerson(first, last) {
+  return {
+    first: first,
+    last: last
+  };
+}
+function personFullName(person) {
+  return person.first + ' ' + person.last;
+}
+function personFullNameReversed(person) {
+  return person.last + ', ' + person.first;
+}
+
+s = makePerson("Simon", "Willison");
+personFullName(s); // "Simon Willison"
+personFullNameReversed(s); // "Willison, Simon"</pre>
+
+<p>Das funktioniert zwar, ist aber keine schöne Lösung. Man hat am Ende dutzende unnötiger Funktionen im globalen Namensraum. Was man braucht ist die Möglichkeit, eine Funktion an ein Objekt anzuhängen. Weil Funktionen Objekte sind, lässt sich dies einfach realisieren:</p>
+
+<pre class="brush: js">function makePerson(first, last) {
+  return {
+    first: first,
+    last: last,
+    fullName: function() {
+      return this.first + ' ' + this.last;
+    },
+    fullNameReversed: function() {
+      return this.last + ', ' + this.first;
+    }
+  };
+}
+
+s = makePerson("Simon", "Willison")
+s.fullName(); // "Simon Willison"
+s.fullNameReversed(); // "Willison, Simon"</pre>
+
+<p>Hier sehen Sie etwas, was vorher noch nicht eingesetzt wurde: Das <code><a href="/de/docs/Web/JavaScript/Reference/Operators/this">this</a></code>-Schlüsselwort. Wird es innerhalb einer Funktion benutzt, verweist <code>this</code> auf das aktuelle Objekt. Was das tatsächlich bedeutet, hängt davon ab, wie die Funktion aufgerufen wird. Wenn die Funktion mit der <a href="/de/docs/Web/JavaScript/Reference/Operators/Objekt_Initialisierer#Auf_Eigenschaften_zugreifen">Punkt- oder Klammer-Notation</a> auf einem Objekt aufgerufen wird, repräsentiert <code>this</code> dieses Objekt. Wird die Punkt-Notation nicht verwendet, dann verweist <code>this</code> auf das globale Objekt.</p>
+
+<p>Zu beachten ist, dass <code>this</code> ein häufiger Grund für Fehler ist. Zum Beispiel:</p>
+
+<pre class="brush: js">s = makePerson("Simon", "Willison");
+var fullName = s.fullName;
+fullName(); // undefined undefined</pre>
+
+<p>Wenn <code>fullName()</code> alleine und ohne den Einsatz von <code>s.fullName()</code> aufgerufen wird, referenziert <code>this</code> das globale Objekt. Dort gibt es keine globalen Variablen <code>first</code> oder <code>last</code>, weshalb man als Rückgabewert <code>undefined</code> erhält.</p>
+
+<p>Man kann Vorteile des <code>this</code>-Schlüsselwortes nutzen, um die <code>makePerson</code>-Funktion zu optimieren:</p>
+
+<pre class="brush: js">function Person(first, last) {
+    this.first = first;
+    this.last = last;
+    this.fullName = function() {
+        return this.first + ' ' + this.last;
+    }
+    this.fullNameReversed = function() {
+        return this.last + ', ' + this.first;
+    }
+}
+var s = new Person("Simon", "Willison");
+</pre>
+
+<p>Hier wird ein neues Schlüsselwort aufgeführt: <code><code><a href="/de/docs/Web/JavaScript/Reference/Operators/new" title="en/Core_JavaScript_1.5_Reference/Operators/Special_Operators/new_Operator">new</a></code></code>. <code>new</code> steht in starker Beziehung zu <code>this</code>. Es erstellt ein neues Objekt und ruft die nachstehende Funktion auf, wobei <code>this</code> dann das neue Objekt ist. Zu beachten ist, dass die Funktion keinen Wert zurückgibt, sondern das <code>this</code>-Objekt modifiziert. Das <code>new</code> gibt dann das <code>this</code>-Objekt an den Aufrufer zurück. Funktionen die für den Aufruf mit <code>new</code> konzipiert sind, nennt man Konstruktoren. Gängige Praxis ist es, diese Funktionen mit einem großen Anfangsbuchstaben zu versehen, um an den Einsatz von <code>new</code> zu erinnern.</p>
+
+<p>Die nun optimiertere Funktion hat jedoch immernoch eine Fehlerquelle mit dem Aufruf von<code> fullName()</code>.</p>
+
+<p>Das <code>person</code>-Objekt wird besser, weist jedoch noch immer einige unangenehme Effekte auf: Bei jedem Erstellen eines <code>person</code>-Objekts werden zwei neue Funktionen erzeugt — wäre es nicht besser, wenn dieser Code wiederverwendet werden könnte?</p>
+
+<pre class="brush: js">function personFullName() {
+    return this.first + ' ' + this.last;
+}
+function personFullNameReversed() {
+    return this.last + ', ' + this.first;
+}
+function Person(first, last) {
+    this.first = first;
+    this.last = last;
+    this.fullName = personFullName;
+    this.fullNameReversed = personFullNameReversed;
+}
+
+</pre>
+
+<p>Das ist besser: Man erstellt die Methodenfunktionen nur einmal und referenziert zu diesen im Konstruktor. Geht das noch besser? Die Antwort ist auch hier wieder ja:</p>
+
+<pre class="brush: js">function Person(first, last) {
+  this.first = first;
+  this.last = last;
+}
+Person.prototype.fullName = function() {
+  return this.first + ' ' + this.last;
+}
+Person.prototype.fullNameReversed = function() {
+  return this.last + ', ' + this.first;
+}</pre>
+
+<p><code>Person.prototype</code> ist ein Objekt, das sich alle <code>Person</code>-Instanzen teilen. Dies ist ein Teil einer Prototypen-Suchkette (mit dem speziellen Namen Prototypenkette (prototype chain)): Bei jedem Versuch, auf eine Eigenschaft von <code>Person</code> zuzugreifen, die nicht gesetzt ist, prüft JavaScript ob diese Eigenschaft stattdessen in <code>Person.prototype</code> vorhanden ist. Als Ergebnis wird alles in <code>Person.prototype</code> für alle Instanzen eines Konstruktors über <code>this</code> verfügbar.</p>
+
+<p>Das ist ein unglaublich mächtiges Werkzeug. JavaScript erlaubt es Prototypen irgendwo innerhalb des Programmes zu verändern, was bedeutet, dass man Methoden zur Laufzeit zu existierenden Objekten hinzufügen kann:</p>
+
+<pre class="brush: js">s = new Person("Simon", "Willison");
+s.firstNameCaps(); // TypeError on line 1: s.firstNameCaps is not a function
+
+Person.prototype.firstNameCaps = function firstNameCaps() {
+  return this.first.toUpperCase()
+};
+s.firstNameCaps(); // "SIMON"</pre>
+
+<p>Interessanterweise können auch neue Eigenschaften zu Prototypen von JavaScript-Objekten hinzugefügt werden. So kann z. B. dem <code>String</code>-Objekt eine neue Methode hinzugefügt werden, welche den <code>String</code> in umgekehrter Reihenfolge zurückgibt:</p>
+
+<pre class="brush: js">var s = "Simon";
+s.reversed(); // TypeError on line 1: s.reversed is not a function
+
+String.prototype.reversed = function reversed() {
+  var r = "";
+  for (var i = this.length - 1; i &gt;= 0; i--) {
+    r += this[i];
+  }
+  return r;
+};
+
+s.reversed(); // nomiS</pre>
+
+<p>Die neue Methode funktioniert sogar mit String-Literalen!</p>
+
+<pre class="brush: js">"This can now be reversed".reversed(); // desrever eb won nac sihT</pre>
+
+<p>Wie schon vorher erwähnt, ist der Prototyp ein Teil einer Kette. Der Anfang dieser Kette ist <code>Object.prototype</code>, welcher die Methode <code>toString()</code> enthält — das ist die Methode die aufgerufen wird, wenn ein Objekt als <code>String</code> repräsentiert werden soll. Das ist für das Debuggen des <code>Person</code>-Objekts nützlich:</p>
+
+<pre class="brush: js">var s = new Person("Simon", "Willison");
+s; // [object Object]
+
+Person.prototype.toString = function() {
+  return '&lt;Person: ' + this.fullName() + '&gt;';
+};
+
+s.toString(); // "&lt;Person: Simon Willison&gt;"</pre>
+
+<p>Erinnern Sie sich an die Stelle weiter oben, als <code>avg.apply()</code> als erstes Argument <code>null</code> übergeben bekommen hat? Diese Stelle können wir uns zur genaueren Betrachtung wieder heranziehen. Mit diesem ersten übergebenen Argument von <code>apply()</code> wird das Objekt festgelegt, welches <code>this</code> repräsentiert. Hier ist z. B. eine einfache Implementierung von <code>new</code>:</p>
+
+<pre class="brush: js">function trivialNew(constructor, ...args) {
+  var o = {}; // Create an object
+  constructor.apply(o, args);
+  return o;
+}</pre>
+
+<p>Das ist keine exakte Replikation von <code>new</code>, weil die Prototypenkette nicht angelegt wird (es wäre schwer, hier vollständig darzustellen). Das ist nichts, was man häufig benötigt, jedoch ist es nützlich darüber Bescheid zu wissen. In diesem Codeteil nennt man <code>...args</code> (mit den Punkten) das sogenannte <a href="/de/docs/Web/JavaScript/Reference/Functions/rest_parameters">Restargument</a> — wie der Name impliziert, enthält dieser alle restlichen Argumente.</p>
+
+<p>Der Aufruf von</p>
+
+<pre class="brush: js">var bill = trivialNew(Person, "William", "Orange");</pre>
+
+<p>ist somit fast äquivalent zu</p>
+
+<pre class="brush: js">var bill = new Person("William", "Orange");</pre>
+
+<p><code>apply()</code> hat eine Schwesterfunktion namens <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Function/call"><code>call</code></a>, die ebenfalls das Setzen von <code>this</code> erlaubt, jedoch statt eines Arrays nimmt sie eine erweiterte Liste mit Argumenten entgegen.</p>
+
+<pre class="brush: js">function lastNameCaps() {
+  return this.last.toUpperCase();
+}
+var s = new Person("Simon", "Willison");
+lastNameCaps.call(s);
+// Das gleiche wie:
+s.lastNameCaps = lastNameCaps;
+s.lastNameCaps();</pre>
+
+<h3 id="Innere_Funktionen">Innere Funktionen</h3>
+
+<p>Funktionsdeklarationen sind in JavaScript auch innerhalb von Funktionen erlaubt. Das lies sich bei der weiter oben verwendeten <code>makePerson()</code>-Funktion schon erkennen. Ein wichtige Eigenschaft von verschachtelten Funktionen in JavaScript ist der Zugriff auf Variablen aus der Elternfunktion:</p>
+
+<pre class="brush: js">function betterExampleNeeded() {
+    var a = 1;
+    function oneMoreThanA() {
+        return a + 1;
+    }
+    return oneMoreThanA();
+}
+</pre>
+
+<p>Dies bietet einen großen Nutzen beim Schreiben von einfacher wartbarem Code. Wenn eine Funktion ein oder zwei andere Funktionen benutzt, diese aber im Code nirgendwo anders benötigt werden, kann man diese Hilfsfunktionen in die Funktion schachteln, die diese schlussendlich eigentlich aufruft. Das hällt die Anzahl der globalen Funktionen niedrig, was immer gut ist.</p>
+
+<p>Dieses ist ein Gegenpool zum oft verlockenden Einsatz von globalen Variablen. Wenn komplexer Code geschrieben wird, ist es oft verlockend und einfach, globale Variablen für das Teilen von Werten zwischen mehreren Funktionen zu benutzen — was aber zu einem unwartbaren Code führen kann. Geschachtelte Funktionen teilen sich Variablen aus der Elternfunktion, weshalb dieser Mechanismus gut für das Koppeln von Funktionen geeignet ist, wenn es Sinn ergibt, ohne dabei den globalen Namensraum zu verunreinigen — "lokal global" wenn man so will. Diese Technik sollte mit Vorsicht eingesetzt werden, ist jedoch eine nützliche Möglichkeit.</p>
+
+<h2 id="Closures">Closures</h2>
+
+<p>Nun wird einer der mächtigsten Abstraktionsmechanismen vorgestellt, den JavaScript mit sich bringt —  der jedoch oft auch für Verwirrung sorgt. Was passiert im nachfolgenden Codeschnipsel?</p>
+
+<pre class="brush: js">function makeAdder(a) {
+  return function(b) {
+    return a + b;
+  };
+}
+var x = makeAdder(5);
+var y = makeAdder(20);
+x(6); // ?
+y(7); // ?</pre>
+
+<p>Der Name der <code>makeAdder</code>-Funktion lässt es schon vermuten, was diese bewirken soll: sie erstellt neue <code>adder</code>-Funktionen, welche dann mit einem Argument aufgerufen werden, welches zu dem Argument addiert wird, mit dem sie erstellt wurden.</p>
+
+<p>Was hier passiert ist das gleiche wie das, was vorab mit den inneren Funktionen geschehen ist: eine Funktion, die in einer anderen Funktion definiert ist, hat Zugriff auf die Variable der äußeren Funktion. Hier jedoch mit dem Unterschied, dass die äußere Funktion etwas zurückgibt und vortäuscht, dass die lokalen Variablen nicht mehr existieren. Doch bleiben diese bestehen — andernfalls könnte die <code>adder</code>-Funktion nicht funktionieren. Außerdem gibt es zwei verschiedene Kopien der lokalen Variablen der <code>makeAdder()</code>-Funktion — eine, wo <code>a</code> den Wert 5 hat und eine wo <code>a</code> den Wert 20 hat. Die Ergebnisse der beiden Funktionsaufrufe ist deswegen folgendes:</p>
+
+<pre class="brush: js">x(6) // ergibt 11
+y(7) // ergibt 27
+</pre>
+
+<p>Hier ist, was tatsächlich passiert. Immer, wenn JavaScript eine Funktion ausführt, wird ein <strong>Scopeobjekt</strong> erstellt, welches die lokalen Variablen enthält, die in der Funktion erstellt werden. Es wird mit jeder Variablen initialisiert, die als Funktionsparameter übergeben wird. Das ist wie mit dem globalen Objekt, welches alle globalen Variablen und Funktionen in sich vorhält, jedoch mit einigen wichtigen Unterschieden: erstens wird immer ein neues Scopeobjekt für jeden Aufruf einer Funktion erstellt und zweitens (anders als bei globalen Objekten, welche als <code>this</code> und in Browsern als <code>window</code> erreichbar sind), sind diese Scopeobjekte nicht direkt im JavaScript Code erreichbar. Es gibt zum Beispiel keinen Mechanismus zum Iterieren aller Eigenschaften eines Scopeobjekts.</p>
+
+<p>Beim Aufruf der <code>makeAdder()</code>-Funktion wird ein Scope-Objekt erstellt, das eine Eigenschaft besitzt: <code>a</code>, welche das übergebene Argument der <code>makeAdder()</code> Funktion ist. <code>makeAdder()</code> gibt dann eine neu erstellte Funktion zurück. Normalerweise würde der Garbage Collector von JavaScript das für <code>makeAdder()</code> erstellte Scopeobjekt an dieser Stelle entsorgen, doch die zurückgegebene Funktion enthält noch immer eine Referenz auf das Scopeobjekt. Als Resultat wird das Scopeobjekt nicht entsorgt, bis es keine Referenzen mehr auf die von <code>makeAdder()</code> zurückgegebene Funktion gibt.</p>
+
+<p>Scopeobjekte bilden eine Scopekette, die ähnlich funktioniert wie die Prototypenkette von JavaScripts Objektsystem.</p>
+
+<p>Eine <strong>Closure</strong> ist eine Kombination aus einer Funktion und dem Scopeobjekt, in dem die Funktion erstellt wurde. Closures sind in der Lage, einen Status zu speichern — als solches können sie oft an Stellen von Objekten eingesetzt werden. <a href="https://stackoverflow.com/questions/111102/how-do-javascript-closures-work">Hier sind einige gute Einführungen zu Closures zu finden</a>.</p>
diff --git a/files/de/web/javascript/einführung_in_den_gebrauch_von_xpath_in_javascript/index.html b/files/de/web/javascript/einführung_in_den_gebrauch_von_xpath_in_javascript/index.html
new file mode 100644
index 0000000000..6af0ba9e0e
--- /dev/null
+++ b/files/de/web/javascript/einführung_in_den_gebrauch_von_xpath_in_javascript/index.html
@@ -0,0 +1,411 @@
+---
+title: Einführung in den Gebrauch von XPath in JavaScript
+slug: Web/JavaScript/Einführung_in_den_Gebrauch_von_XPath_in_JavaScript
+translation_of: Web/XPath/Introduction_to_using_XPath_in_JavaScript
+---
+<p>Dieses Dokument beschreibt die Schnittstelle zu <a href="/en-US/docs/XPath" title="en/XPath">XPath</a> in JavaScript intern, in Erweiterungen und in Webseiten. Mozilla implementiert einen großen Teil von <a class="external" href="http://www.w3.org/TR/DOM-Level-3-XPath/xpath.html">DOM 3 XPath</a>, sodass XPath auf HTML- und XML-Dokumente angewendet werden kann.</p>
+
+<p>Die Hauptschnittstelle für die Anwendung von XPath ist die <a href="/en-US/docs/Web/API/document.evaluate" title="en/DOM/document.evaluate">evaluate</a>-Methode des <a href="/en-US/Web/API/document" title="en/DOM/document">document</a>-Objekts.</p>
+
+<h2 id="document.evaluate" name="document.evaluate">document.evaluate</h2>
+
+<p>Diese Methode wertet  <a href="/en-US/docs/XPath" title="en/XPath">XPath</a> Ausdrücke in Bezug auf ein <a href="/en-US/docs/Glossary/XML" title="en/XML">XML</a> basierendes Dokument (einschließlich HTML-Documente) aus und gibt ein <code><a href="/en-US/docs/XPathResult" title="en/XPathResult">XPathResult</a></code>-Objekt zurück, das ein Einzelknoten oder eine Zusammenstellung mehrerer Knoten sein kann. Die vorhandene Dokumentation dieser Methode ist unter <a href="/en-US/docs/Web/API/Document.evaluate" title="en/DOM/document.evaluate">document.evaluate</a> zu finden, sie ist jedoch für unseren jetzigen Bedarf ziemlich knapp gehalten. Eine umfangreichere Betrachtung wird nachfolgend beschrieben.</p>
+
+<pre class="brush: js">var xpathResult = document.evaluate( xpathExpression, contextNode, namespaceResolver, resultType, result );
+</pre>
+
+<h3 id="Parameters" name="Parameters">Parameter</h3>
+
+<p>Die <a href="/en-US/docs/Web/API/Document.evaluate" title="en/DOM/document.evaluate">evaluate</a> Funktion nimmt insgesamt fünf Parameter entgegen:</p>
+
+<ul>
+ <li><code>xpathExpression</code>: Eine Zeichenkette, die den auszuwertenden XPath-Ausdrucks beinhaltet.</li>
+ <li><code>contextNode</code>: Ein Bezugsknoten im Dokument, auf den sich die Auswertung von <code>xpathExpression</code> beziehen soll, einschließlich sämtlicher Kindknoten. Am häufigsten wird hierfür der <a href="/en-US/docs/Web/API/document" title="en/DOM/document">document</a>-Knoten verwendet.</li>
+ <li><code>namespaceResolver</code>: A function that will be passed any namespace prefixes contained within <code>xpathExpression</code> which returns a string representing the namespace URI associated with that prefix. This enables conversion between the prefixes used in the XPath expressions and the possibly different prefixes used in the document. The function can be either:
+  <ul>
+   <li><a href="#Implementing_a_Default_Namespace_Resolver">Created</a> by using the <code><a href="/en-US/docs/Web/API/Document.createNSResolver" title="en/DOM/document.createNSResolver">createNSResolver</a></code> method of a <code><a href="/en-US/docs/Using_XPath#Node-specific_evaluator_function" title="en/XPathEvaluator">XPathEvaluator</a></code> object. You should use this virtually all of the time.</li>
+   <li><code>null</code>, which can be used for HTML documents or when no namespace prefixes are used. Note that, if the <code>xpathExpression</code> contains a namespace prefix, this will result in a <code>DOMException</code> being thrown with the code <code>NAMESPACE_ERR</code>.</li>
+   <li>A custom user-defined function. See the <a href="#Implementing_a_User_Defined_Namespace_Resolver">Using a User Defined Namespace Resolver</a> section in the appendix for details.</li>
+  </ul>
+ </li>
+ <li><code>resultType</code>: Eine <a href="#XPathResult_Defined_Constants">Konstante</a>, die den gewünschten Rückgabetyp als Ergebnis der Auswertung angibt. Die am häufigsten übergebene Konstante ist <code>XPathResult.ANY_TYPE</code>, die eine Rückgabe der Ergebnisse in in einer Weise liefert, die den sebstverständlichen Erwartungen am ehesten entspricht. Im Anhang ist ein Abschnitt zu finden, der eine vollständige Liste der der <a href="#XPathResult_Defined_Constants">verfügbaren Konstanten</a> enthält. Sie werden weiter unten im Abschnitt  "<a href="#Specifying_the_Return_Type">Festlegung des Rückgabetyps</a>" erläutert.</li>
+ <li><code>result</code>: Wird ein vorhandenes <code>XPathResult</code>-Objekt angegeben, so wird es für die Ergebnisrückgabe wiederverwendet. Bei der Angabe von <code>null</code> wird ein neues <code>XPathResult</code>-Objekt erzeugt.</li>
+</ul>
+
+<h3 id="Return_Value" name="Return_Value">Rückgabewert</h3>
+
+<p>Returns <code>xpathResult</code>, which is an <code>XPathResult</code> object of the type <a href="#Specifying_the_Return_Type">specified</a> in the <code>resultType</code> parameter. The <code>XPathResult</code> Interface is defined {{ Source("dom/interfaces/xpath/nsIDOMXPathResult.idl", "here") }}.</p>
+
+<h3 id="Implementing_a_Default_Namespace_Resolver" name="Implementing_a_Default_Namespace_Resolver">Einen Standard-Namensraumauflöser (Default Namespace Resolver) implementieren</h3>
+
+<p>Wir erstellen einen Namensraumauflöser mit Hilfe der <code>createNSResolver</code>-Methode des <a href="/en-US/docs/Web/API/document" title="en/DOM/document">document</a>-Objekts.</p>
+
+<pre class="brush: js">var nsResolver = document.createNSResolver( contextNode.ownerDocument == null ? contextNode.documentElement : contextNode.ownerDocument.documentElement );
+</pre>
+
+<p><span class="comment">Or alternatively by using the &lt;code&gt;createNSResolver&lt;/code&gt; method of a &lt;code&gt;XPathEvaluator&lt;/code&gt; object. &lt;pre&gt; var xpEvaluator = new XPathEvaluator(); var nsResolver = xpEvaluator.createNSResolver( contextNode.ownerDocument == null ? contextNode.documentElement : contextNode.ownerDocument.documentElement ); &lt;/pre&gt;</span> And then pass <code>document.evaluate</code>, the <code>nsResolver</code> variable as the <code>namespaceResolver</code> parameter.</p>
+
+<p>Note: XPath defines QNames without a prefix to match only elements in the null namespace. There is no way in XPath to pick up the default namespace as applied to a regular element reference (e.g., <code>p[@id='_myid']</code> for <code><span class="nowiki">xmlns='http://www.w3.org/1999/xhtml</span>'</code>). To match default elements in a non-null namespace, you either have to refer to a particular element using a form such as <code>['namespace-uri()='<span class="nowiki">http://www.w3.org/1999/xhtml</span>' and name()='p' and @id='_myid']</code> (<a href="#Using_XPath_functions_to_reference_elements_with_a_default_namespace">this approach</a> works well for dynamic XPath's where the namespaces might not be known) or use prefixed name tests, and create a namespace resolver mapping the prefix to the namespace. Read more on <a href="#Implementing_a_User_Defined_Namespace_Resolver">how to create a user defined namespace resolver</a>, if you wish to take the latter approach.</p>
+
+<h3 id="Notes" name="Notes">Anmerkungen</h3>
+
+<p>Adapts any DOM node to resolve namespaces so that an <a href="/en-US/docs/XPath" title="en/XPath">XPath</a> expression can be easily evaluated relative to the context of the node where it appeared within the document. This adapter works like the DOM Level 3 method <code>lookupNamespaceURI</code> on nodes in resolving the <code>namespaceURI</code> from a given prefix using the current information available in the node's hierarchy at the time <code>lookupNamespaceURI</code> is called. Also correctly resolves the implicit <code>xml</code> prefix.</p>
+
+<h3 id="Specifying_the_Return_Type" name="Specifying_the_Return_Type">Festlegung des Rückgabetyps</h3>
+
+<p>The returned variable <code>xpathResult</code> from <code>document.evaluate</code> can either be composed of individual nodes (<a href="#Simple_Types">simple types</a>), or a collection of nodes (<a href="#Node-Set_Types">node-set types</a>).</p>
+
+<h4 id="Simple_Types" name="Simple_Types">Simple Types</h4>
+
+<p>When the desired result type in <code>resultType</code> is specified as either:</p>
+
+<ul>
+ <li><code>NUMBER_TYPE</code> - a double</li>
+ <li><code>STRING_TYPE</code> - a string</li>
+ <li><code>BOOLEAN_TYPE</code> - a boolean</li>
+</ul>
+
+<p>We obtain the returned value of the expression by accessing the following properties respectively of the <code>XPathResult</code> object.</p>
+
+<ul>
+ <li><code>numberValue</code></li>
+ <li><code>stringValue</code></li>
+ <li><code>booleanValue</code></li>
+</ul>
+
+<h5 id="Example" name="Example">Beispiel</h5>
+
+<p>The following uses the XPath expression <code><a href="/en-US/docs/XPath/Functions/count" title="en/XPath/Functions/count">count(//p)</a></code> to obtain the number of <code>&lt;p&gt;</code> elements in a HTML document:</p>
+
+<pre class="brush: js">var paragraphCount = document.evaluate( 'count(//p)', document, null, XPathResult.ANY_TYPE, null );
+
+alert( 'This document contains ' + paragraphCount.numberValue + ' paragraph elements' );
+</pre>
+
+<p>Although JavaScript allows us to convert the number to a string for display, the XPath interface will not automatically convert the numerical result if the <code>stringValue</code> property is requested, so the following code will <strong>not</strong> work:</p>
+
+<pre class="brush: js">var paragraphCount = document.evaluate('count(//p)', document, null, XPathResult.ANY_TYPE, null );
+
+alert( 'This document contains ' + paragraphCount.stringValue + ' paragraph elements' );
+</pre>
+
+<p>Instead it will return an exception with the code <code>NS_DOM_TYPE_ERROR</code>.</p>
+
+<h4 id="Node-Set_Types" name="Node-Set_Types">Node-Set-Typen</h4>
+
+<p>The <code>XPathResult</code> object allows node-sets to be returned in 3 principal different types:</p>
+
+<ul>
+ <li><a href="#Iterators">Iterators</a></li>
+ <li><a href="#Snapshots">Snapshots</a></li>
+ <li><a href="#First_Node">First Nodes</a></li>
+</ul>
+
+<h5 id="Iterators" name="Iterators">Iteratoren</h5>
+
+<p>When the specified result type in the <code>resultType</code> parameter is either:</p>
+
+<ul>
+ <li><code>UNORDERED_NODE_ITERATOR_TYPE</code></li>
+ <li><code>ORDERED_NODE_ITERATOR_TYPE</code></li>
+</ul>
+
+<p>The <code>XPathResult</code> object returned is a node-set of matched nodes which will behave as an iterator, allowing us to access the individual nodes contained by using the <code>iterateNext()</code> method of the <code>XPathResult</code>.</p>
+
+<p>Once we have iterated over all of the individual matched nodes, <code>iterateNext()</code> will return <code>null</code>.</p>
+
+<p>Note however, that if the document is mutated (the document tree is modified) between iterations that will invalidate the iteration and the <code>invalidIteratorState</code> property of <code>XPathResult</code> is set to <code>true</code>, and a <code>NS_ERROR_DOM_INVALID_STATE_ERR</code> exception is thrown.</p>
+
+<h6 id="Iterator_Example" name="Iterator_Example">Iterator Example</h6>
+
+<pre class="brush: js">var iterator = document.evaluate('//phoneNumber', documentNode, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null );
+
+try {
+  var thisNode = iterator.iterateNext();
+
+  while (thisNode) {
+    alert( thisNode.textContent );
+    thisNode = iterator.iterateNext();
+  }
+}
+catch (e) {
+  dump( 'Error: Document tree modified during iteration ' + e );
+}
+</pre>
+
+<h5 id="Snapshots" name="Snapshots">Momentabbilder (Snapshots)</h5>
+
+<p>When the specified result type in the <code>resultType</code> parameter is either:</p>
+
+<ul>
+ <li><code>UNORDERED_NODE_SNAPSHOT_TYPE</code></li>
+ <li><code>ORDERED_NODE_SNAPSHOT_TYPE</code></li>
+</ul>
+
+<p>The <code>XPathResult</code> object returned is a static node-set of matched nodes, which allows us to access each node through the <code>snapshotItem(itemNumber)</code> method of the <code>XPathResult</code> object, where <code>itemNumber</code> is the index of the node to be retrieved. The total number of nodes contained can be accessed through the <code>snapshotLength</code> property.</p>
+
+<p>Snapshots do not change with document mutations, so unlike the iterators the snapshot does not become invalid, but it may not correspond to the current document, for example the nodes may have been moved, it might contain nodes that no longer exist, or new nodes could have been added.</p>
+
+<h6 id="Snapshot_Example" name="Snapshot_Example">Snapshot Example</h6>
+
+<pre class="brush: js">var nodesSnapshot = document.evaluate('//phoneNumber', documentNode, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null );
+
+for ( var i=0 ; i &lt; nodesSnapshot.snapshotLength; i++ )
+{
+  dump( nodesSnapshot.snapshotItem(i).textContent );
+}
+</pre>
+
+<h5 id="First_Node" name="First_Node">Erster Knoten</h5>
+
+<p>When the specified result type in the <code>resultType</code> parameter is either:</p>
+
+<ul>
+ <li><code>ANY_UNORDERED_NODE_TYPE</code></li>
+ <li><code>FIRST_ORDERED_NODE_TYPE</code></li>
+</ul>
+
+<p>The <code>XPathResult</code> object returned is only the first found node that matched the XPath expression. This can be accessed through the <code>singleNodeValue</code> property of the <code>XPathResult</code> object. This will be <code>null</code> if the node set is empty.</p>
+
+<p>Note that, for the unordered subtype the single node returned might not be the first in document order, but for the ordered subtype you are guaranteed to get the first matched node in the document order.</p>
+
+<h6 id="First_Node_Example" name="First_Node_Example">First Node Example</h6>
+
+<pre class="brush: js">var firstPhoneNumber = document.evaluate('//phoneNumber', documentNode, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null );
+
+dump( 'The first phone number found is ' + firstPhoneNumber.singleNodeValue.textContent );
+</pre>
+
+<h4 id="The_ANY_TYPE_Constant" name="The_ANY_TYPE_Constant">Die Konstante ANY_TYPE</h4>
+
+<p>When the result type in the <code>resultType</code> parameter is specified as <code>ANY_TYPE</code>, the <code>XPathResult</code> object returned, will be whatever type that naturally results from the evaluation of the expression.</p>
+
+<p>It could be any of the simple types (<code>NUMBER_TYPE, STRING_TYPE, BOOLEAN_TYPE</code>), <strong>but</strong>, if the returned result type is a node-set then it will <strong>only</strong> be an <code>UNORDERED_NODE_ITERATOR_TYPE</code>.</p>
+
+<p>To determine that type after evaluation, we use the <code>resultType</code> property of the <code>XPathResult</code> object. The <a href="#XPathResult_Defined_Constants">constant</a> values of this property are defined in the appendix. <span class="comment">None Yet =====Any_Type Example===== &lt;pre&gt; &lt;/pre&gt;</span></p>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<h3 id="Within_an_HTML_Document" name="Within_an_HTML_Document">Innerhalb eines HTML-Dokuments</h3>
+
+<p>The following code is intended to be placed in any JavaScript fragment within or linked to the HTML document against which the XPath expression is to be evaluated.</p>
+
+<p>To extract all the <code>&lt;h2&gt;</code> heading elements in an HTML document using XPath, the <code>xpathExpression</code> is simply '<code>//h2</code>'. Where, <code>//</code> is the Recursive Descent Operator that matches elements with the nodeName <code>h2</code> anywhere in the document tree. The full code for this is: <span class="comment">link to introductory xpath doc</span></p>
+
+<pre class="brush: js">var headings = document.evaluate('//h2', document, null, XPathResult.ANY_TYPE, null );
+</pre>
+
+<p>Notice that, since HTML does not have namespaces, we have passed <code>null</code> for the <code>namespaceResolver</code> parameter.</p>
+
+<p>Since we wish to search over the entire document for the headings, we have used the <a href="/en-US/docs/Web/API/document" title="en/DOM/document">document</a> object itself as the <code>contextNode</code>.</p>
+
+<p>The result of this expression is an <code>XPathResult</code> object. If we wish to know the type of result returned, we may evaluate the <code>resultType</code> property of the returned object. In this case, that will evaluate to <code>4</code>, an <code>UNORDERED_NODE_ITERATOR_TYPE</code>. This is the default return type when the result of the XPath expression is a node set. It provides access to a single node at a time and may not return nodes in a particular order. To access the returned nodes, we use the <code>iterateNext()</code> method of the returned object:</p>
+
+<pre class="brush: js">var thisHeading = headings.iterateNext();
+
+var alertText = 'Level 2 headings in this document are:\n'
+
+while (thisHeading) {
+  alertText += thisHeading.textContent + '\n';
+  thisHeading = headings.iterateNext();
+}
+</pre>
+
+<p>Once we iterate to a node, we have access to all the standard DOM interfaces on that node. After iterating through all the <code>h2</code> elements returned from our expression, any further calls to <code>iterateNext()</code> will return <code>null</code>.</p>
+
+<h3 id="Evaluating_against_an_XML_document_within_an_Extension" name="Evaluating_against_an_XML_document_within_an_Extension">Auswertung an einem XML-Dokument innerhalb einer Erweiterung</h3>
+
+<p>The following uses an XML document located at <span class="nowiki">chrome://yourextension/content/peopleDB.xml</span> as an example.</p>
+
+<pre class="brush: xml">&lt;?xml version="1.0"?&gt;
+&lt;people xmlns:xul = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" &gt;
+  &lt;person&gt;
+	&lt;name first="george" last="bush" /&gt;
+	&lt;address street="1600 pennsylvania avenue" city="washington" country="usa"/&gt;
+	&lt;phoneNumber&gt;202-456-1111&lt;/phoneNumber&gt;
+  &lt;/person&gt;
+  &lt;person&gt;
+	&lt;name first="tony" last="blair" /&gt;
+	&lt;address street="10 downing street" city="london" country="uk"/&gt;
+	&lt;phoneNumber&gt;020 7925 0918&lt;/phoneNumber&gt;
+  &lt;/person&gt;
+&lt;/people&gt;
+</pre>
+
+<p>To make the contents of the XML document available within the extension, we create an <code><a href="/en-US/docs/Web/API/XMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a></code> object to load the document synchronously, the variable <code>xmlDoc</code> will contain the document as an <code><a href="/en-US/docs/Web/API/XMLDocument" title="en/XMLDocument">XMLDocument</a></code> object against which we can use the <code>evaluate</code> method</p>
+
+<p>JavaScript used in the extensions xul/js documents.</p>
+
+<pre class="brush: js">var req = new XMLHttpRequest();
+
+req.open("GET", "chrome://yourextension/content/peopleDB.xml", false);
+req.send(null);
+
+var xmlDoc = req.responseXML;
+
+var nsResolver = xmlDoc.createNSResolver( xmlDoc.ownerDocument == null ? xmlDoc.documentElement : xmlDoc.ownerDocument.documentElement);
+
+var personIterator = xmlDoc.evaluate('//person', xmlDoc, nsResolver, XPathResult.ANY_TYPE, null );
+</pre>
+
+<h3 id="Anmerkung">Anmerkung</h3>
+
+<p>When the XPathResult object is not defined, the constants can be retreived in privileged code using <code>Components.interfaces.nsIDOMXPathResult.ANY_TYPE</code> (<code>CI.nsIDOMXPathResult</code>). Similarly, an XPathEvaluator can be created using:</p>
+
+<pre class="brush: js">Components.classes["@mozilla.org/dom/xpath-evaluator;1"].createInstance(Components.interfaces.nsIDOMXPathEvaluator)</pre>
+
+<h2 id="Appendix" name="Appendix">Anhang</h2>
+
+<h4 id="Implementing_a_User_Defined_Namespace_Resolver" name="Implementing_a_User_Defined_Namespace_Resolver">Einen benutzerdefinierten Namensauflöser implementieren</h4>
+
+<p>This is an example for illustration only. This function will need to take namespace prefixes from the <code>xpathExpression</code> and return the URI that corresponds to that prefix. For example, the expression:</p>
+
+<pre>'//xhtml:td/mathml:math'
+</pre>
+
+<p>will select all <a href="/en-US/docs/Web/API/MathML" title="en/MathML">MathML</a> expressions that are the children of (X)HTML table data cell elements.</p>
+
+<p>In order to associate the '<code>mathml:</code>' prefix with the namespace URI '<code><span class="nowiki">http://www.w3.org/1998/Math/MathML</span></code>' and '<code>xhtml:</code>' with the URI '<code><span class="nowiki">http://www.w3.org/1999/xhtml</span></code>' we provide a function:</p>
+
+<pre class="brush: js">function nsResolver(prefix) {
+  var ns = {
+    'xhtml' : 'http://www.w3.org/1999/xhtml',
+    'mathml': 'http://www.w3.org/1998/Math/MathML'
+  };
+  return ns[prefix] || null;
+}
+</pre>
+
+<p>Our call to <code>document.evaluate</code> would then looks like:</p>
+
+<pre class="brush: js">document.evaluate( '//xhtml:td/mathml:math', document, nsResolver, XPathResult.ANY_TYPE, null );
+</pre>
+
+<h4 id="Implementing_a_default_namespace_for_XML_documents" name="Implementing_a_default_namespace_for_XML_documents">Einen Standard-Namensrauf für XML-Dokumente implementieren</h4>
+
+<p>As noted in the <a href="#Implementing_a_Default_Namespace_Resolver">Implementing a Default Namespace Resolver</a> previously, the default resolver does not handle the default namespace for XML documents. For example with this document:</p>
+
+<pre class="brush: xml">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;feed xmlns="http://www.w3.org/2005/Atom"&gt;
+    &lt;entry /&gt;
+    &lt;entry /&gt;
+    &lt;entry /&gt;
+&lt;/feed&gt;
+</pre>
+
+<p><code>doc.evaluate('//entry', doc, nsResolver, XPathResult.ANY_TYPE, null)</code> will return an empty set, where <code>nsResolver</code> is the resolver returned by <code>createNSResolver</code>. Passing a <code>null</code> resolver doesn't work any better, either.</p>
+
+<p>One possible workaround is to create a custom resolver that returns the correct default namespace (the Atom namespace in this case). Note that you still have to use some namespace prefix in your XPath expression, so that the resolver function will be able to change it to your required namespace. E.g.:</p>
+
+<pre class="brush: js">function resolver() {
+    return 'http://www.w3.org/2005/Atom';
+}
+doc.evaluate('//myns:entry', doc, resolver, XPathResult.ANY_TYPE, null)
+</pre>
+
+<p>Note that a more complex resolver will be required if the document uses multiple namespaces.</p>
+
+<p>An approach which might work better (and allow namespaces not to be known ahead of time) is described in the next section.</p>
+
+<h4 id="Using_XPath_functions_to_reference_elements_with_a_default_namespace" name="Using_XPath_functions_to_reference_elements_with_a_default_namespace">Using XPath functions to reference elements with a default namespace</h4>
+
+<p>Another approach to match default elements in a non-null namespace (and one which works well for dynamic XPath expressions where the namespaces might not be known), involves referring to a particular element using a form such as <code>[namespace-uri()='<span class="nowiki">http://www.w3.org/1999/xhtml</span>' and name()='p' and @id='_myid']</code>. This circumvents the problem of an XPath query not being able to detect the default namespace on a regularly labeled element.</p>
+
+<h4 id="Getting_specifically_namespaced_elements_and_attributes_regardless_of_prefix" name="Getting_specifically_namespaced_elements_and_attributes_regardless_of_prefix">Getting specifically namespaced elements and attributes regardless of prefix</h4>
+
+<p>If one wishes to provide flexibility in namespaces (as they are intended) by not necessarily requiring a particular prefix to be used when finding a namespaced element or attribute, one must use special techniques.</p>
+
+<p>While one can adapt the approach in the above section to test for namespaced elements regardless of the prefix chosen (using <code><a href="/en-US/docs/XPath/Functions/local-name" title="en/XPath/Functions/local-name">local-name()</a></code> in combination with <code><a href="/en-US/docs/XPath/Functions/namespace-uri" title="en/XPath/Functions/namespace-uri">namespace-uri()</a></code> instead of <code><a href="/en-US/docs/XPath/Functions/name" title="en/XPath/Functions/name">name()</a></code>), a more challenging situation occurs, however, if one wishes to grab an element with a particular namespaced attribute in a predicate (given the absence of implementation-independent variables in XPath 1.0).</p>
+
+<p>For example, one might try (incorrectly) to grab an element with a namespaced attribute as follows: <code>var xpathlink = someElements[local-name(@*)="href" and namespace-uri(@*)='<span class="nowiki">http://www.w3.org/1999/xlink</span>'];</code></p>
+
+<p>This could inadvertently grab some elements if one of its attributes existed that had a local name of "<code>href</code>", but it was a different attribute which had the targeted (XLink) namespace (instead of <code><a href="/en/XPath/Axes/attribute" title="en/XPath/Axes/attribute">@href</a></code>).</p>
+
+<p>In order to accurately grab elements with the XLink <code>@href</code> attribute (without also being confined to predefined prefixes in a namespace resolver), one could obtain them as follows:</p>
+
+<pre class="brush: js">var xpathEls = 'someElements[@*[local-name() = "href" and namespace-uri() = "http://www.w3.org/1999/xlink"]]'; // Grabs elements with any single attribute that has both the local name 'href' and the XLink namespace
+var thislevel = xml.evaluate(xpathEls, xml, null, XPathResult.ANY_TYPE, null);
+var thisitemEl = thislevel.iterateNext();
+</pre>
+
+<h4 id="XPathResult_Defined_Constants" name="XPathResult_Defined_Constants">In XPathResult definierte Konstanten</h4>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <td class="header">Result Type Defined Constant</td>
+   <td class="header">Value</td>
+   <td class="header">Description</td>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>ANY_TYPE</td>
+   <td>0</td>
+   <td>A result set containing whatever type naturally results from evaluation of the expression. Note that if the result is a node-set then UNORDERED_NODE_ITERATOR_TYPE is always the resulting type.</td>
+  </tr>
+  <tr>
+   <td>NUMBER_TYPE</td>
+   <td>1</td>
+   <td>A result containing a single number. This is useful for example, in an XPath expression using the <code>count()</code> function.</td>
+  </tr>
+  <tr>
+   <td>STRING_TYPE</td>
+   <td>2</td>
+   <td>A result containing a single string.</td>
+  </tr>
+  <tr>
+   <td>BOOLEAN_TYPE</td>
+   <td>3</td>
+   <td>A result containing a single boolean value. This is useful for example, in an XPath expression using the <code>not()</code> function.</td>
+  </tr>
+  <tr>
+   <td>UNORDERED_NODE_ITERATOR_TYPE</td>
+   <td>4</td>
+   <td>A result node-set containing all the nodes matching the expression. The nodes may not necessarily be in the same order that they appear in the document.</td>
+  </tr>
+  <tr>
+   <td>ORDERED_NODE_ITERATOR_TYPE</td>
+   <td>5</td>
+   <td>A result node-set containing all the nodes matching the expression. The nodes in the result set are in the same order that they appear in the document.</td>
+  </tr>
+  <tr>
+   <td>UNORDERED_NODE_SNAPSHOT_TYPE</td>
+   <td>6</td>
+   <td>A result node-set containing snapshots of all the nodes matching the expression. The nodes may not necessarily be in the same order that they appear in the document.</td>
+  </tr>
+  <tr>
+   <td>ORDERED_NODE_SNAPSHOT_TYPE</td>
+   <td>7</td>
+   <td>A result node-set containing snapshots of all the nodes matching the expression. The nodes in the result set are in the same order that they appear in the document.</td>
+  </tr>
+  <tr>
+   <td>ANY_UNORDERED_NODE_TYPE</td>
+   <td>8</td>
+   <td>A result node-set containing any single node that matches the expression. The node is not necessarily the first node in the document that matches the expression.</td>
+  </tr>
+  <tr>
+   <td>FIRST_ORDERED_NODE_TYPE</td>
+   <td>9</td>
+   <td>A result node-set containing the first node in the document that matches the expression.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/XPath">XPath</a></li>
+ <li><a href="http://www.xml.com/pub/a/2000/08/holman/index.html?page=2#xpath-info">XML Path Language </a>from <em><a href="http://www.xml.com/pub/a/2000/08/holman/">What is XSLT?</a> </em>by G. Ken Holman</li>
+</ul>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2>
+
+<ul>
+ <li>Based Upon Original Document <a class="external" href="http://www-xray.ast.cam.ac.uk/~jgraham/mozilla/xpath-tutorial.html">Mozilla XPath Tutorial</a></li>
+ <li>Original Source Author: James Graham.</li>
+ <li>Other Contributors: James Thompson.</li>
+ <li>Last Updated Date: 2006-3-25.</li>
+</ul>
+</div>
diff --git a/files/de/web/javascript/eventloop/index.html b/files/de/web/javascript/eventloop/index.html
new file mode 100644
index 0000000000..9f8093aa57
--- /dev/null
+++ b/files/de/web/javascript/eventloop/index.html
@@ -0,0 +1,138 @@
+---
+title: Concurrency model and Event Loop
+slug: Web/JavaScript/EventLoop
+tags:
+  - Advanced
+  - Event Loop
+  - Event Management
+  - Event Queue
+  - Handling Events
+  - JavaScript
+  - events
+translation_of: Web/JavaScript/EventLoop
+---
+<div>{{JsSidebar("Advanced")}}</div>
+
+<p>JavaScript hat ein Nebenläufigkeitsmodell, auf Basis einer Eventschleife. Dieses Modell unterscheidet sich stark von Modellen aus anderen Sprachen wie C und Java.</p>
+
+<h2 id="Laufzeitkonzepte">Laufzeitkonzepte</h2>
+
+<p>Der folgenden Abschnitt erklärt ein theoretisches Modell. Moderne JavaScript-Engines implementieren und optimieren die beschriebenen Semantiken sehr stark.</p>
+
+<h3 id="Visuelle_Repräsentation">Visuelle Repräsentation</h3>
+
+<p style="text-align: center;"><img alt="Stack, heap, queue" src="/files/4617/default.svg" style="height: 270px; width: 294px;"></p>
+
+<h3 id="Stack">Stack</h3>
+
+<p>Funktionsaufrufe von einem Stack von <em>Frames.</em></p>
+
+<pre class="brush: js">function foo(b){
+  var a = 10;
+  return a + b + 11;
+}
+
+function bar(x){
+  var y = 3;
+  return foo(x * y);
+}
+
+console.log(bar(7)); // gibt 42 zurück
+</pre>
+
+<p>Beim Aufruf von <code>bar</code> wird ein erster Frame erstellt, der die Argumente und lokalen Variablen von <code>bar</code> enthält. Sobald <code>bar</code> die Funktion <code>foo</code> aufruft, wird ein zweiter Frame erstellt, der auf den ersten gelegt wird und die Argumente und lokalen Variablen von <code>foo</code> enthält. Wenn <code>foo</code> beendet wird, wird der der oberste Frame aus dem Stack entfernt (nur der <code>bar</code> Frame bleibt auf dem Stack). Wenn <code>bar</code> beendet wird, ist der Stack leer.</p>
+
+<h3 id="Heap">Heap</h3>
+
+<p>Objekte werden in einem Heap gespeichert, welcher hauptsächlich eine meist große unstrukturierte Region im Speicher ist.</p>
+
+<h3 id="Queue">Queue</h3>
+
+<p>Eine JavaScript Laufzeitumgebung benutzt eine Nachrichten-Queue, welche eine Liste von Nachrichten ist, die ausgeführt werden. Jede Nachricht hat eine Funktion, die aufgerufen wird, um die Nachricht abzuarbeiten.</p>
+
+<p>An diesem Punkt, während der {{anch("Eventschleife", "Eventschleife")}}, beginnt die Laufzeitumgebung mit der ältesten Nachricht. Dazu wird die Nachricht aus der Queue entfernt und die zugehörige Funktion mit der Nachricht als Eingabeparameter aufgerufen. Wie immer erzeugt das Aufrufen einer Funktion einen neuen Frame auf dem Stack, für den Funktionsgebrauch.</p>
+
+<p>Die Ausführung von Funktionen geht so lange weiter, bis der Stack wieder leer ist; dann wird die Eventschleife die nächste Nachricht ausführen (wenn eine vorhanden ist).</p>
+
+<h2 id="Eventschleife">Eventschleife</h2>
+
+<p>Die <strong>Eventschleife</strong> ist nach der Art und Weise, wie diese meist implementiert ist, benannt. Dies ähnelt meist der folgenden Struktur:</p>
+
+<pre class="brush: js">while (queue.waitForMessage()){
+  queue.processNextMessage();
+}</pre>
+
+<p><code>queue.waitForMessage()</code> wartet synchron auf eine eingehende Nachricht, wenn keine vorhanden ist.</p>
+
+<h3 id="Ausführungsfertigstellung">Ausführungsfertigstellung</h3>
+
+<p>Jede Nachricht wird vollständig verarbeitet, bevor eine andere Nachricht verarbeitet wird. Dies bietet einige nette Eigenschaften zum Verständnis der Ausführung ihres Programms, einschließlich der Tatsache, dass eine Funktion, wann immer sie ausgeführt wird, nicht vorzeitig verlassen werden kann. Die Funktion wird daher vollständig ausgeführt bevor irgendein anderer Code ausgeführt wird (und die Daten ändern könnte). Dies unterscheidet sich z. B. von C, wo eine Funktion in einem Thread läuft und gestoppt werden kann, um anderen Code in einem anderen Thread auszuführen.</p>
+
+<p>Dies bringt aber den Nachteil mit sich, dass während einer Nachricht, die sehr lange dauern kann, keine Nutzer-Interaktionen, wie z.B. Klicken oder Scrollen, möglich ist. Der Browser entschärft dies mit dem "Ein Skript antwortet nicht mehr" Dialog. Gute Praxis ist es daher die Dauer der Nachrichten kurz zu halten und wenn möglich in einzelne Nachrichten aufzuteilen.</p>
+
+<h3 id="Hinzufügen_von_Nachrichten">Hinzufügen von Nachrichten</h3>
+
+<p>In einem Webbrowser werden Nachrichten immer hinzugefügt, wenn ein Event auftritt und diesem ein Event Listener hinzugefügt wurde. Ist kein Listener vorhanden, geht das Event verloren. Ein Klick auf ein Element mit einem Click-Event-Handler fügt also eine Nachricht hinzu - ähnlich wie bei jedem anderen Ereignis.</p>
+
+<p>Die Funktion {{domxref("WindowTimers.setTimeout", "setTimeout")}} wird mit 2 Argumenten aufgerufen: eine Nachricht, die der Queue hinzugefügt wird, und einen Zeitwert (optional; Standardwert 0). Der Zeitwert gibt die (minimale) Zeit an, nach der die Nachricht zur Queue hinzugefügt wird. Die Nachricht wird nach dieser Zeit aufgeführt, wenn keine anderen Nachrichten ausgeführt werden. Aus diesem Grund ist der zweite Parameter die minimale und nicht die garantierte Zeit.</p>
+
+<p>Hier ist ein Beispiel, welches das Konzept demonstriert (<code>setTimeout</code> wird nicht direkt nach dem Ablaufen der Zeit aufgeführt):</p>
+
+<pre class="brush: js">const s = new Date().getSeconds();
+
+setTimeout(function() {
+  // prints out "2", meaning that the callback is not called immediately after 500 milliseconds.
+  console.log("Ran after " + (new Date().getSeconds() - s) + " seconds");
+}, 500);
+
+while(true) {
+  if(new Date().getSeconds() - s &gt;= 2) {
+    console.log("Good, looped for 2 seconds");
+    break;
+  }
+}
+</pre>
+
+<h3 id="Nullverzögerungen">Nullverzögerungen</h3>
+
+<p>Nullverzögerung bedeutet nicht, dass der Aufruf nach null Millisekunden gefeuert wird. Der Aufruf von {{domxref("WindowTimers.setTimeout", "setTimeout")}} mit einer Verzögerung von 0 Millisekunden führt die übergebene Funktion nicht nach dem gegebenen Intervall aus.</p>
+
+<p>Die Ausführung hängt von der Anzahl von wartenden Aufrufen in der Queue ab. Im Beispiel unten, wird die Nachricht ''this is just a message'' vor der Ausführung des Callback auf der Konsole ausgegeben, weil die Verzögerung die minimale Verzögerung für die Laufzeigumgebung ist, aber diese nicht garantiert werden kann.</p>
+
+<p>Im Grunde muss setTimeout warten, bis der gesamte Code für Nachrichten in der Warteschlange abgeschlossen wurde, obwohl ein bestimmtes Zeitlimit für setTimeout angegeben wurde.</p>
+
+<pre class="brush: js">(function() {
+
+  console.log('this is the start');
+
+  setTimeout(function cb() {
+    console.log('this is a msg from call back');
+  });
+
+  console.log('this is just a message');
+
+  setTimeout(function cb1() {
+    console.log('this is a msg from call back1');
+  }, 0);
+
+  console.log('this is the end');
+
+})();
+
+// "this is the start"
+// "this is just a message"
+// "this is the end"
+// note that function return, which is undefined, happens here
+// "this is a msg from call back"
+// "this is a msg from call back1"
+</pre>
+
+<h3 id="Komunikation_mehrere_Laufzeitumgebungen_zur_gleichen_Zeit">Komunikation mehrere Laufzeitumgebungen zur gleichen Zeit</h3>
+
+<p>Ein Web Worker oder ein Cross-Origin iFrame hat seinen eigenen Stack, Heap und Nachrichten Queue. Zwei unabhängige Laufzeitumgebungen können nur durch das Senden von Nachrichten über die <a href="/de/docs/Web/API/Window/postMessage"><code>postMessage</code></a> Methode kommunizieren. Diese Methode fügt der Message Queue der anderen Laufzeit eine Nachricht hinzu, wenn diese auf die Message-Events hört.</p>
+
+<h2 id="Niemals_blockierend">Niemals blockierend</h2>
+
+<p>Eine sehr interessante Eigenschaft des Eventschleifen Modells ist, dass Javascript, im Gegensatz zu vielen anderen Sprachen, niemals blockiert. Die Handhabung von I/O wird typischerweise über Events und Callback-Funktionen erledigt, so dass die Applikation, während sie auf Ergebnisse einer <a href="/de/docs/Web/API/IndexedDB_API">IndexedDB</a>- oder <a href="/de/docs/Web/API/XMLHttpRequest">XHR</a>-Anfrage wartet, weitere Benutzereingaben verarbeiten kann.</p>
+
+<p>Es gibt Ausnahmen, wie z.B. alert oder synchrone XHR, wobei es eine gute Praxis ist, diese zu vermeiden. Obacht, <a href="http://stackoverflow.com/questions/2734025/is-javascript-guaranteed-to-be-single-threaded/2734311#2734311">es existieren Ausnahmen für die Ausnahme</a> (aber diese sind für gewöhnlich eher Bugs bei der Implementierung als irgendetwas anderes).</p>
diff --git a/files/de/web/javascript/guide/ausdruecke_und_operatoren/index.html b/files/de/web/javascript/guide/ausdruecke_und_operatoren/index.html
new file mode 100644
index 0000000000..7a0e723c6c
--- /dev/null
+++ b/files/de/web/javascript/guide/ausdruecke_und_operatoren/index.html
@@ -0,0 +1,965 @@
+---
+title: Ausdrücke und Operatoren
+slug: Web/JavaScript/Guide/Ausdruecke_und_Operatoren
+tags:
+  - Beginner
+  - Extensions
+  - Guide
+  - JavaScript
+  - Operatoren
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Guide/Expressions_and_Operators
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Funktionen", "Web/JavaScript/Guide/Numbers_and_dates")}}</div>
+
+<p class="summary">Dieses Kapitel beschreibt JavaScript Ausdrücke und Operatoren, Zuweisungsoperatoren, Vergleichsoperatoren, Rechenoperatoren, Bit-Operatoren, Logische Operatoren, Operator zur Zeichenkettenverknüpfung, Bedingte (ternäre) Operatoren und mehr.</p>
+
+<p>Eine vollständige und detaillierte Liste mit Operatoren und Ausdrücken ist in den <a href="/de-DE/docs/Web/JavaScript/Reference/Operators">Referenzen</a> zu finden.</p>
+
+<h2 id="Operatoren">Operatoren</h2>
+
+<p>JavaScript besitzt verschiedene Operatortypen. Dieser Abschnitt beschreibt die einzelnen Operatoren und beinhaltet Informationen über die Operator-Prioritäten.</p>
+
+<ul>
+ <li>{{ web.link("#Assignment_operators", "Zuweisungs-Operatoren") }}</li>
+ <li>{{ web.link("#Comparison_operators", "Vergleichs-Operatoren") }}</li>
+ <li>{{ web.link("#Arithmetic_operators", "Arithmetische Operatoren") }}</li>
+ <li>{{ web.link("#Bitwise_operators", "Bit-Operatoren") }}</li>
+ <li>{{ web.link("#Logical_operators", "Logische Operatoren") }}</li>
+ <li>{{ web.link("#String_operators", "String Operatoren") }}</li>
+ <li>{{ web.link("#Conditional_(ternary)_operator", "Bedingter (ternärer) Operator")}}</li>
+ <li>{{ web.link("#Comma_operator", "Komma Operator")}}</li>
+ <li>{{ web.link("#Unary_operators", "Unäre Operatoren")}}</li>
+ <li>{{ web.link("#Relational_operators", "Vergleichsoperator")}}</li>
+</ul>
+
+<p>JavaScript verfügt über beides, binäre als auch unäre Operatoren. Zudem existiert ein spezieller ternärer Operator - der Bedingungsoperator. Ein binärer Operator benötigt zwei Operanden, einen vor dem Operator und einen nach dem Operator:</p>
+
+<pre class="syntaxbox"><em>operand1</em> <em>operator</em> <em>operand2</em>
+</pre>
+
+<p>Zum Beispiel: <code>3+4</code>, oder <code>x*y</code>.</p>
+
+<p>Ein unärer Operator erwartet einen einzelnen Operanden, entweder vor, oder nach dem Operator:</p>
+
+<pre class="syntaxbox"><em>operator</em> <em>operand</em>
+</pre>
+
+<p>oder</p>
+
+<pre class="syntaxbox"><em>operand</em> <em>operator</em>
+</pre>
+
+<p>Zum Beispiel: <code>x++</code>, oder <code>++x</code>.</p>
+
+<h3 id="Zuweisungsoperatoren">Zuweisungsoperatoren</h3>
+
+<p>Ein Zuweisungsoperator weißt seinem linken Operanden einen Wert zu. Dieser Wert basiert auf dem Ergebnis des rechten Operanden. Der einfachste Zuweisungsoperator ist das "Gleich" (<code>=</code>), welches den Wert des rechten Operanden dem linken Operanden zuweist.</p>
+
+<p>Zum Beispiel: <code>x = y</code> (<code>y</code> wid der Wert von <code>x</code> zugewiesen).</p>
+
+<p>Es gibt auch zusammengesetzte Zuweisungsoperatoren, diese stellen Abkürzungen für die in der folgenden Tabelle aufgelisteten Operationen dar:</p>
+
+<table class="standard-table">
+ <caption>Zusammengesetzte Zuweisungsoperatoren</caption>
+ <thead>
+  <tr>
+   <th>Name</th>
+   <th>Abgekürzter Operator</th>
+   <th>Ausgeschriebener Operator</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Assignment" title="Zuweisung">Zuweisung</a></td>
+   <td><code>x = y</code></td>
+   <td><code>x = y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Addition_assignment">Addition</a></td>
+   <td><code>x += y</code></td>
+   <td><code>x = x + y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Subtraction_assignment">Subraktion</a></td>
+   <td><code>x -= y</code></td>
+   <td><code>x = x - y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Multiplication_assignment">Multiplikation</a></td>
+   <td><code>x *= y</code></td>
+   <td><code>x = x * y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Division_assignment">Division</a></td>
+   <td><code>x /= y</code></td>
+   <td><code>x = x / y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Remainder_assignment">Modulo (Division mit Rest)</a></td>
+   <td><code>x %= y</code></td>
+   <td><code>x = x % y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Exponentiation_assignment">Exponentiation assignment</a> {{experimental_inline}}</td>
+   <td><code>x **= y</code></td>
+   <td><code>x = x ** y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Left_shift_assignment">Left shift assignment</a></td>
+   <td><code>x &lt;&lt;= y</code></td>
+   <td><code>x = x &lt;&lt; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Right_shift_assignment">Right shift assignment</a></td>
+   <td><code>x &gt;&gt;= y</code></td>
+   <td><code>x = x &gt;&gt; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Unsigned_right_shift_assignment">Unsigned right shift assignment</a></td>
+   <td><code>x &gt;&gt;&gt;= y</code></td>
+   <td><code>x = x &gt;&gt;&gt; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Bitwise_AND_assignment">Bitwise AND assignment</a></td>
+   <td><code>x &amp;= y</code></td>
+   <td><code>x = x &amp; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Bitwise_XOR_assignment">Bitwise XOR assignment</a></td>
+   <td><code>x ^= y</code></td>
+   <td><code>x = x ^ y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Bitwise_OR_assignment">Bitwise OR assignment</a></td>
+   <td><code>x |= y</code></td>
+   <td><code>x = x | y</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Destrukturierung">Destrukturierung</h4>
+
+<p>Komplexere Zuweisungen ermöglicht Javascript über die sogenannte <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">Destrukturierung</a>. Diese ermöglicht es, Daten aus Arrays oder Objekten mithilfe einer Syntax zu extrahieren, die die Konstruktion von Array- und Objektliteralen widerspiegelt.</p>
+
+<pre class="brush: js">var foo = ["eins", "zwei", "drei"];
+
+// Ohne Destrukturierung
+var eins   = foo[0];
+var zwei   = foo[1];
+var drei   = foo[2];
+
+// mit Destrukturierung
+var [eins, zwei, drei] = foo;</pre>
+
+<h3 id="Vergleichsoperatoren">Vergleichsoperatoren</h3>
+
+<p>Ein Vergleichsoperator vergleicht seine Operanden und gibt einen logischen Wert zurück, der darauf basiert, ob der Vergleich wahr ist, oder nicht.</p>
+
+<p>Die Operanden können numerische-, string-, logische- oder Objektwerte sein. Zeichenfolgen werden basierend auf der lexikographischen Standardreihenfolge mit unicodewerten verglichen. Wenn die beiden Operanden nicht vom selben Typ sind, versucht JavaScript in den meisten Fällen, sie in einen geeigneten Typ für den Vergleich zu konvertieren. Dieses Verhalten führt im Allgemeinen dazu, dass die Operanden numerisch verglichen werden. Die einzigen Ausnahmen für die Typumwandlung innerhalb von Vergleichen sind die Operatoren <code>===</code> und <code>!==</code>, die strenge Vergleiche durchführen. Diese Operatoren versuchen nicht, die Operanden in kompatible Typen zu konvertieren, bevor sie die Gleichheit überprüfen.</p>
+
+<p>Die folgende Tabelle beschreibt die Vergleichsoperatoren in Bezug auf diesen Beispielcode:</p>
+
+<pre class="brush: js">var var1 = 3;
+var var2 = 4;
+</pre>
+
+<table class="standard-table">
+ <caption>Vergleichsoperatoren</caption>
+ <thead>
+  <tr>
+   <th scope="col">Operator</th>
+   <th scope="col">Beschreibung</th>
+   <th scope="col">Beispiele, die <code>true</code> zurückgeben</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Equality">Equal</a> (<code>==</code>)</td>
+   <td>Gibt <code>true</code> zurück, wenn die Operanden gleich sind.</td>
+   <td><code>3 == var1</code>
+    <p><code>"3" == var1</code></p>
+    <code>3 == '3'</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Inequality">Not equal</a> (<code>!=</code>)</td>
+   <td>Gibt <code>true</code> zurück, wenn die Operanden ungleich sind.</td>
+   <td><code>var1 != 4<br>
+    var2 != "3"</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Identity">Strict equal</a> (<code>===</code>)</td>
+   <td>Gibt <code>true</code> zurück, wenn die Operanden gleich sind und auch der Typ übereinstimmt. Weitere Informationen unter {{jsxref("Object.is")}} und <a href="/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness" title="/en-US/docs/Web/JavaScript/Guide/Sameness">sameness in JS</a>.</td>
+   <td><code>3 === var1</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Nonidentity">Strict not equal</a> (<code>!==</code>)</td>
+   <td>Gibt <code>true</code> zurück, wenn die Operanden vom selben Typ sind, doch nicht den selben Wert haben, oder wenn sie den selben Wert haben, doch nicht vom selben Typ sind.</td>
+   <td><code>var1 !== "3"<br>
+    3 !== '3'</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_operator">Greater than</a> (<code>&gt;</code>)</td>
+   <td>Gibt <code>true</code> zurück, wenn der linke Operand größer dem rechten Operanden ist.</td>
+   <td><code>var2 &gt; var1<br>
+    "12" &gt; 2</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_or_equal_operator">Greater than or equal</a> (<code>&gt;=</code>)</td>
+   <td>Gibt <code>true</code> zurück, wenn der linke Operand größer als, oder gleich dem linken Operanden ist.</td>
+   <td><code>var2 &gt;= var1<br>
+    var1 &gt;= 3</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than_operator">Less than</a> (<code>&lt;</code>)</td>
+   <td>Gibt <code>true</code> zurück, wenn der linke Operand kleiner dem rechten Operanden ist.</td>
+   <td><code>var1 &lt; var2<br>
+    "2" &lt; 12</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than_or_equal_operator">Less than or equal</a> (<code>&lt;=</code>)</td>
+   <td>Gibt <code>true</code> zurück, wenn der linke Operand kleiner als, oder gleich dem rechten Operanden ist.</td>
+   <td><code>var1 &lt;= var2<br>
+    var2 &lt;= 5</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note: </strong>(<strong>=&gt;</strong>) ist kein Operator, hiermit werden <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a> notiert.</p>
+</div>
+
+<h3 id="Arithmetische_Operatoren_(Rechenzeichen)">Arithmetische Operatoren (Rechenzeichen)</h3>
+
+<p>Ein <a href="/de/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators">arithmetischer Operator</a> nimmt numerische Werte (Literale oder Variablen) als Operanden entgegen und gibt einen einzelnen numerischen Wert zurück. Die arithmetischen Standardoperatoren sind Addition (<code>+)</code>, Subtraktion (<code>-</code>), Multiplikation (<code>*</code>) und Division (<code>/</code>). Diese Operatoren funktionieren wie in den meisten anderen Programmiersprachen, wenn sie mit Fließkommazahlen verwendet werden (beachten Sie insbesondere, dass die Division durch Null {{jsxref ("Infinity")}} ergibt).</p>
+
+<pre class="brush: js">1 / 2; // 0.5
+1 / 2 == 1.0 / 2.0; // this is true
+</pre>
+
+<p>Neben den arithmetischen Standardoperatoren (+, -, * /), stellt JavaScript noch weitere Rechenzeichen zur Verfügung. Diese werden in der folgenden Tabelle aufgeführt:</p>
+
+<table class="fullwidth-table">
+ <caption>Arithmetische Operatoren</caption>
+ <thead>
+  <tr>
+   <th scope="col">Operator</th>
+   <th scope="col">Beschreibung</th>
+   <th scope="col">Beispiel</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder">Remainder</a> (<code>%</code>)</td>
+   <td>Binärer Operator. Gibt den ganzzahligen Rest der Division beider Operanden zurück.</td>
+   <td><code>12 % 5</code> gibt <code>2</code> zurück.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment">Increment</a> (<code>++</code>)</td>
+   <td>
+    <p>Unärer Operator. Addiert 1 zu seinem Operanden.</p>
+
+    <p>Wenn der Operator vorangestellt wird (<code>++x</code>), gibt er den Wert seines Operanden zurück nachdem 1 addiert wurde; Wenn der Operator nachgestellt wird (<code>x++</code>), gibt er den Wert seines Operanden zurück, bevor 1 addiert wurde.</p>
+   </td>
+   <td>Wenn <code>x</code> gleich 3 ist, setzt <code>++x</code> <code>x</code> auf 4 und gibt 4 zurück, wobei <code>x++</code>  3 zurückgibt und erst danach <code>x</code> auf 4 setzt.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Decrement">Decrement</a> (<code>--</code>)</td>
+   <td>
+    <p>Unärer Operator. Subtrahiert 1 von seinem Operanden.</p>
+
+    <p>Der Rückgabewert verhält sich analog zum increment Operator.</p>
+   </td>
+   <td>Wenn <code>x</code> gleich 3 ist, setzt <code>--x</code> <code>x</code> auf 2 und gibt 2 zurück, wobei <code>x--</code> 3 zurückgibt und erst danach, <code>x</code> auf 2 setzt.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_negation">Unary negation</a> (<code>-</code>)</td>
+   <td>Unärer Operator. Gibt die Negierung seines Operanden zurück.</td>
+   <td>Wenn <code>x</code> gleich 3 ist, gibt <code>-x</code> -3 zurück.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_plus">Unary plus</a> (<code>+</code>)</td>
+   <td>Versucht, den Operanden in eine Zahl umzuwandeln, wenn dies nicht bereits der Fall ist.</td>
+   <td><code>+"3"</code> gibt <code>3</code> zurück.<br>
+    <code>+true</code> gibt <code>1</code> zurück.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Exponentiation">Exponentiation operator</a> (<code>**</code>) {{experimental_inline}}</td>
+   <td>Calculates the <code>base</code> to the <code>exponent</code> power, that is, <code>base<sup>exponent</sup></code></td>
+   <td><code>2 ** 3</code> gibt <code>8</code> zurück.<br>
+    <code>10 ** -1</code> gibt <code>0.1 </code>zurück.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Bitweise_Operatoren">Bitweise Operatoren</h3>
+
+<p>Ein bitweiser Operator behandelt seine Operanden als eine Menge von 32 Bits (Nullen und Einsen) und nicht als dezimale, hexadezimale oder oktale Zahlen. Zum Beispiel hat die Dezimalzahl Neun eine binäre Darstellung von <code>1001</code>. Bitweise Operatoren führen ihre Operationen mit solchen binären Darstellungen aus, doch sie geben standardmäßige numerische JavaScript-Werte zurück.</p>
+
+<p>Die folgende Tabelle fasst die bitweisen Operatoren von JavaScript zusammen.</p>
+
+<table class="standard-table">
+ <caption>Bitweise Operatoren</caption>
+ <thead>
+  <tr>
+   <th scope="col">Operator</th>
+   <th scope="col">Verwendung</th>
+   <th scope="col">Beschreibung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_AND">Bitwise AND</a></td>
+   <td><code>a &amp; b</code></td>
+   <td>Returns a one in each bit position for which the corresponding bits of both operands are ones.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_OR">Bitwise OR</a></td>
+   <td><code>a | b</code></td>
+   <td>Returns a zero in each bit position for which the corresponding bits of both operands are zeros.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR">Bitwise XOR</a></td>
+   <td><code>a ^ b</code></td>
+   <td>Returns a zero in each bit position for which the corresponding bits are the same.<br>
+    [Returns a one in each bit position for which the corresponding bits are different.]</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_NOT">Bitwise NOT</a></td>
+   <td><code>~ a</code></td>
+   <td>Inverts the bits of its operand.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Left_shift">Left shift</a></td>
+   <td><code>a &lt;&lt; b</code></td>
+   <td>Shifts <code>a</code> in binary representation <code>b</code> bits to the left, shifting in zeros from the right.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Right_shift">Sign-propagating right shift</a></td>
+   <td><code>a &gt;&gt; b</code></td>
+   <td>Shifts <code>a</code> in binary representation <code>b</code> bits to the right, discarding bits shifted off.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Unsigned_right_shift">Zero-fill right shift</a></td>
+   <td><code>a &gt;&gt;&gt; b</code></td>
+   <td>Shifts <code>a</code> in binary representation <code>b</code> bits to the right, discarding bits shifted off, and shifting in zeros from the left.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Bitwise_Logical_Operators" name="Bitwise_Logical_Operators">Bitweise logische Operatoren</h4>
+
+<p>Konzeptuell arbeiten bitweise logische Operatoren wie folgt:</p>
+
+<ul>
+ <li>Die Operanden werden zu 32 Bit Integer Zahlen konvertiert und als Folge von Bits (Nullen und Einsen) dargestellt. Zahlen mit mehr als 32 Bits verlieren dabei ihre signifikanten Bits bis auf eine Länge von 32. Im folgenden Beispiel wird eine Zahl mit mehr als 32 Bits zu einer 32 Bit Integer Zahl konvertiert:
+  <pre>Before: 11100110111110100000000000000110000000000001
+After:              10100000000000000110000000000001</pre>
+ </li>
+ <li>Jedes Bit des ersten Operanden wird mit dem korrespondierenden Bit im zweiten Operanden gepaart: Erstes Bit mit dem ersten Bit, zweites Bit mit dem zweiten Bit und so weiter.</li>
+ <li>Der Operator wird auf jedes paar von Bits angewendet und das Ergebnis bitweise erstellt.</li>
+</ul>
+
+<p>Zum Beispiel ist die binäre Darstellung der Zahl neun 1001, die binäre Darstellung der Zahl 15 ist 1111. Wenn die bitweisen logischen Operatoren auf diese Zahlen angewendet werden, ergeben sich folgende Ergebnisse:</p>
+
+<table class="standard-table">
+ <caption>Beispiele für bitweise Operatoren</caption>
+ <thead>
+  <tr>
+   <th scope="col">Ausdruck</th>
+   <th scope="col">Ergebnis</th>
+   <th scope="col">Binäre Darstellung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>15 &amp; 9</code></td>
+   <td><code>9</code></td>
+   <td><code>1111 &amp; 1001 = 1001</code></td>
+  </tr>
+  <tr>
+   <td><code>15 | 9</code></td>
+   <td><code>15</code></td>
+   <td><code>1111 | 1001 = 1111</code></td>
+  </tr>
+  <tr>
+   <td><code>15 ^ 9</code></td>
+   <td><code>6</code></td>
+   <td><code>1111 ^ 1001 = 0110</code></td>
+  </tr>
+  <tr>
+   <td><code>~15</code></td>
+   <td><code>-16</code></td>
+   <td><code>~</code><code>00000000...</code><code>00001111 = </code><code>1111</code><code>1111</code><code>...</code><code>11110000</code></td>
+  </tr>
+  <tr>
+   <td><code>~9</code></td>
+   <td><code>-10</code></td>
+   <td><code>~</code><code>00000000</code><code>...</code><code>0000</code><code>1001 = </code><code>1111</code><code>1111</code><code>...</code><code>1111</code><code>0110</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Beachte, dass alle 32 Bits invertiert werden, wenn der bitweise NOT Operator benutzt wird. Wenn dabei das höchstwertigste (ganz linke) Bit auf 1 gesetzt wird, entsteht eine negative Zahl. Note that all 32 bits are inverted using the Bitwise NOT operator, and that values with the most significant (left-most) bit set to 1 represent negative numbers (Zweierkomplement). <code>~x</code> wird also genauso ausgewertet wie <code>-x - 1</code>.</p>
+
+<h4 id="Bitwise_Shift_Operators" name="Bitwise_Shift_Operators">Bitweise Schiebeoperatoren</h4>
+
+<p>Die bitweisen Schiebeoperatoren erwarten zwei Operanden. Der erste ist der Wert, der geschoben werden soll, der zweite die Anzahl der Bits, um die geschoben werden soll. Die Richtung, in die geschoben wird, wird durch den verwendeten Operator bestimmt.</p>
+
+<p>Schiebeoperatoren konvertieren ihre Operanden in 32 Bit Integer Zahlen und liefern als Ergebnis einen Wert vom selben Typen wir der linke Operand.</p>
+
+<p>Die Schiebeoperatoren sind in der folgenden Tabelle aufgelistet.</p>
+
+<table class="fullwidth-table">
+ <caption>Bitwise shift operators</caption>
+ <thead>
+  <tr>
+   <th scope="col">Operator</th>
+   <th scope="col">Description</th>
+   <th scope="col">Example</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#&lt;&lt;_(Left_shift)">Left shift</a><br>
+    (<code>&lt;&lt;</code>)</td>
+   <td>This operator shifts the first operand the specified number of bits to the left. Excess bits shifted off to the left are discarded. Zero bits are shifted in from the right.</td>
+   <td><code>9&lt;&lt;2</code> yields 36, because 1001 shifted 2 bits to the left becomes 100100, which is 36.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#>>_(Sign-propagating_right_shift)">Sign-propagating right shift</a> (<code>&gt;&gt;</code>)</td>
+   <td>This operator shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Copies of the leftmost bit are shifted in from the left.</td>
+   <td><code>9&gt;&gt;2</code> yields 2, because 1001 shifted 2 bits to the right becomes 10, which is 2. Likewise, <code>-9&gt;&gt;2</code> yields -3, because the sign is preserved.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#>>>_(Zero-fill_right_shift)">Zero-fill right shift</a> (<code>&gt;&gt;&gt;</code>)</td>
+   <td>This operator shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Zero bits are shifted in from the left.</td>
+   <td><code>19&gt;&gt;&gt;2</code> yields 4, because 10011 shifted 2 bits to the right becomes 100, which is 4. For non-negative numbers, zero-fill right shift and sign-propagating right shift yield the same result.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Logische_Operatoren">Logische Operatoren</h3>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators">Logische Operatoren</a> werden normalerweise mit boolesche (logischen) Werten verwendet - hierbei geben sie dann einen booleschen Wert zurück. Die Operatoren <code>&amp;&amp;</code> und <code>||</code> geben den Wert von einem der Operatoren zurück, sodass sie im Falle der Verwendung mit einem nicht-booleschen Wert auch einen nicht-booleschen Wert zurückgeben können. Die logischen Operatoren werden in der folgenden Tabelle beschrieben: </p>
+
+<table class="fullwidth-table">
+ <caption>Logische Operatoren</caption>
+ <thead>
+  <tr>
+   <th scope="col">Operator</th>
+   <th scope="col">Verwendung</th>
+   <th scope="col">Beschreibung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_AND">Logical AND</a><code> </code>(<code>&amp;&amp;</code>)</td>
+   <td><code>expr1 &amp;&amp; expr2</code></td>
+   <td>Gibt <code>expr1</code> zurück, sofern es zu <code>false</code> konvertiert werden kann; ansonsten wird <code>expr2</code> zurückgegeben. Insofern mit booleschen Werten verwendet, <code>&amp;&amp;</code> gibt <code>true</code> zurück, wenn beide Operanden wahr sind; ansonsten <code>false</code>.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR">Logical OR </a>(<code>||</code>)</td>
+   <td><code>expr1 || expr2</code></td>
+   <td>
+    <p>Gibt <code>expr1</code> zurück, sofern er zu <code>true</code> konvertiert werden kann. Insofern mit booleschen Werten verwendet, gibt der Operator <code>||</code> true zurück, wenn einer von beiden Operanden <code>true</code> ist; wenn beide <code>false</code> sind, wird <code>false</code> zurückgegeben. </p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_NOT">Logical NOT </a>(<code>!</code>)</td>
+   <td><code>!expr</code></td>
+   <td>
+    <p>Gibt <code>false</code> zurück, wenn sein einziger Operand in <code>true</code> konvertiert werden kann; andernfalls gibt er <code>true</code> zurück. </p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Beispiele von Ausdrücken, die in <code>false</code> umgewandelt werden können, sind solche, die <code>null</code>, 0, <code>NaN</code>, einen leeren String ("") oder <code>undefined</code> sind. </p>
+
+<p>Die folgenden Zeilen zeigen Beispiele des <code>&amp;&amp;</code> (logisches UND) Operators.</p>
+
+<pre class="brush: js">var a1 =  true &amp;&amp; true;     // t &amp;&amp; t returns true
+var a2 =  true &amp;&amp; false;    // t &amp;&amp; f returns false
+var a3 = false &amp;&amp; true;     // f &amp;&amp; t returns false
+var a4 = false &amp;&amp; (3 == 4); // f &amp;&amp; f returns false
+var a5 = "Cat" &amp;&amp; "Dog";    // t &amp;&amp; t returns Dog
+var a6 = false &amp;&amp; "Cat";    // f &amp;&amp; t returns false
+var a7 = "Cat" &amp;&amp; false;    // t &amp;&amp; f returns false
+</pre>
+
+<p>Die folgenden Zeilen zeigen Beispiele des <code>||</code> (logisches ODER) Operators:</p>
+
+<pre class="brush: js">var o1 =  true || true;     // t || t returns true
+var o2 = false || true;     // f || t returns true
+var o3 =  true || false;    // t || f returns true
+var o4 = false || (3 == 4); // f || f returns false
+var o5 = "Cat" || "Dog";    // t || t returns Cat
+var o6 = false || "Cat";    // f || t returns Cat
+var o7 = "Cat" || false;    // t || f returns Cat
+</pre>
+
+<p>Die folgenden Zeilen zeigen Beispiele des <code>!</code> (logisches NICHT) Operators:</p>
+
+<pre class="brush: js">var n1 = !true;  // !t returns false
+var n2 = !false; // !f returns true
+var n3 = !"Cat"; // !t returns false
+</pre>
+
+<h4 id="Short-Circuit_Evaluation" name="Short-Circuit_Evaluation">Short-circuit-Bewertung </h4>
+
+<p>Da logische Ausdrücke von links nach rechts bewertet werden, werden sie auf eine mögliche "Abkürzung" (short-circuit) hin gemäß den folgenden Regeln evaluiert:</p>
+
+<ul>
+ <li><code>false</code> &amp;&amp; <em>irgendwas</em> wird abgekürzt als <code>false</code> bewertet.</li>
+ <li><code>true</code> || <em>irgendwas</em> wird abgekürtz als <code>true</code> bewertet. </li>
+</ul>
+
+<p>Die Regeln der Logik garantieren, dass diese Bewertungen immer korrekt sind. Der <em>irgendwas</em>-Operand werden in den o.g. Beispielen hierbei nicht bewertet. </p>
+
+<h3 id="String-Operatoren">String-Operatoren</h3>
+
+<p>In addition to the comparison operators, which can be used on string values, the concatenation operator (+) concatenates two string values together, returning another string that is the union of the two operand strings.</p>
+
+<p>For example,</p>
+
+<pre class="brush: js">console.log("my " + "string"); // console logs the string "my string".</pre>
+
+<p>The shorthand assignment operator += can also be used to concatenate strings.</p>
+
+<p>For example,</p>
+
+<pre class="brush: js">var mystring = "alpha";
+mystring += "bet"; // evaluates to "alphabet" and assigns this value to mystring.</pre>
+
+<h3 id="Conditional_(ternary)_operator">Conditional (ternary) operator</h3>
+
+<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">conditional operator</a> is the only JavaScript operator that takes three operands. The operator can have one of two values based on a condition. The syntax is:</p>
+
+<pre class="syntaxbox"><em>condition</em> ? <em>val1</em> : <em>val2</em>
+</pre>
+
+<p>If <code>condition</code> is true, the operator has the value of <code>val1</code>. Otherwise it has the value of <code>val2</code>. You can use the conditional operator anywhere you would use a standard operator.</p>
+
+<p>For example,</p>
+
+<pre class="brush: js">var status = (age &gt;= 18) ? "adult" : "minor";
+</pre>
+
+<p>This statement assigns the value "adult" to the variable <code>status</code> if <code>age</code> is eighteen or more. Otherwise, it assigns the value "minor" to <code>status</code>.</p>
+
+<h3 id="Comma_operator" name="Comma_operator">Comma operator</h3>
+
+<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator">comma operator</a> (<code>,</code>) simply evaluates both of its operands and returns the value of the last operand. This operator is primarily used inside a <code>for</code> loop, to allow multiple variables to be updated each time through the loop.</p>
+
+<p>For example, if <code>a</code> is a 2-dimensional array with 10 elements on a side, the following code uses the comma operator to update two variables at once. The code prints the values of the diagonal elements in the array:</p>
+
+<pre class="brush: js">var x = [0,1,2,3,4,5,6,7,8,9];
+var a = [x, x, x, x, x]
+
+for (var i = 0, j = 9; i &lt;= j; i++, j--)
+  console.log("a[" + i + "][" + j + "]= " + a[i][j]);
+</pre>
+
+<h3 id="Unary_operators">Unary operators</h3>
+
+<p>A unary operation is an operation with only one operand.</p>
+
+<h4 id="delete" name="delete"><code>delete</code></h4>
+
+<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code> operator deletes an object, an object's property, or an element at a specified index in an array. The syntax is:</p>
+
+<pre class="brush: js">delete objectName;
+delete objectName.property;
+delete objectName[index];
+delete property; // legal only within a with statement
+</pre>
+
+<p>where <code>objectName</code> is the name of an object, <code>property</code> is an existing property, and <code>index</code> is an integer representing the location of an element in an array.</p>
+
+<p>The fourth form is legal only within a <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/with">with</a></code> statement, to delete a property from an object.</p>
+
+<p>You can use the <code>delete</code> operator to delete variables declared implicitly but not those declared with the <code>var</code> statement.</p>
+
+<p>If the <code>delete</code> operator succeeds, it sets the property or element to <code>undefined</code>. The <code>delete</code> operator returns true if the operation is possible; it returns <code>false</code> if the operation is not possible.</p>
+
+<pre class="brush: js">x = 42;
+var y = 43;
+myobj = new Number();
+myobj.h = 4;    // create property h
+delete x;       // returns true (can delete if declared implicitly)
+delete y;       // returns false (cannot delete if declared with var)
+delete Math.PI; // returns false (cannot delete predefined properties)
+delete myobj.h; // returns true (can delete user-defined properties)
+delete myobj;   // returns true (can delete if declared implicitly)
+</pre>
+
+<h5 id="Deleting_array_elements">Deleting array elements</h5>
+
+<p>When you delete an array element, the array length is not affected. For example, if you delete <code>a[3]</code>, <code>a[4]</code> is still <code>a[4]</code> and <code>a[3]</code> is undefined.</p>
+
+<p>When the <code>delete</code> operator removes an array element, that element is no longer in the array. In the following example, <code>trees[3]</code> is removed with <code>delete</code>. However, <code>trees[3]</code> is still addressable and returns <code>undefined</code>.</p>
+
+<pre class="brush: js">var trees = ["redwood", "bay", "cedar", "oak", "maple"];
+delete trees[3];
+if (3 in trees) {
+  // this does not get executed
+}
+</pre>
+
+<p>If you want an array element to exist but have an undefined value, use the <code>undefined</code> keyword instead of the <code>delete</code> operator. In the following example, <code>trees[3]</code> is assigned the value <code>undefined</code>, but the array element still exists:</p>
+
+<pre class="brush: js">var trees = ["redwood", "bay", "cedar", "oak", "maple"];
+trees[3] = undefined;
+if (3 in trees) {
+  // this gets executed
+}
+</pre>
+
+<h4 id="typeof" name="typeof"><code>typeof</code></h4>
+
+<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof"><code>typeof</code> operator</a> is used in either of the following ways:</p>
+
+<pre class="syntaxbox">typeof operand
+typeof (operand)
+</pre>
+
+<p>The <code>typeof</code> operator returns a string indicating the type of the unevaluated operand. <code>operand</code> is the string, variable, keyword, or object for which the type is to be returned. The parentheses are optional.</p>
+
+<p>Suppose you define the following variables:</p>
+
+<pre class="brush: js">var myFun = new Function("5 + 2");
+var shape = "round";
+var size = 1;
+var today = new Date();
+</pre>
+
+<p>The <code>typeof</code> operator returns the following results for these variables:</p>
+
+<pre class="brush: js">typeof myFun;     // returns "function"
+typeof shape;     // returns "string"
+typeof size;      // returns "number"
+typeof today;     // returns "object"
+typeof dontExist; // returns "undefined"
+</pre>
+
+<p>For the keywords <code>true</code> and <code>null</code>, the <code>typeof</code> operator returns the following results:</p>
+
+<pre class="brush: js">typeof true; // returns "boolean"
+typeof null; // returns "object"
+</pre>
+
+<p>For a number or string, the <code>typeof</code> operator returns the following results:</p>
+
+<pre class="brush: js">typeof 62;            // returns "number"
+typeof 'Hello world'; // returns "string"
+</pre>
+
+<p>For property values, the <code>typeof</code> operator returns the type of value the property contains:</p>
+
+<pre class="brush: js">typeof document.lastModified; // returns "string"
+typeof window.length;         // returns "number"
+typeof Math.LN2;              // returns "number"
+</pre>
+
+<p>For methods and functions, the <code>typeof</code> operator returns results as follows:</p>
+
+<pre class="brush: js">typeof blur;        // returns "function"
+typeof eval;        // returns "function"
+typeof parseInt;    // returns "function"
+typeof shape.split; // returns "function"
+</pre>
+
+<p>For predefined objects, the <code>typeof</code> operator returns results as follows:</p>
+
+<pre class="brush: js">typeof Date;     // returns "function"
+typeof Function; // returns "function"
+typeof Math;     // returns "object"
+typeof Option;   // returns "function"
+typeof String;   // returns "function"
+</pre>
+
+<h4 id="void" name="void"><code>void</code></h4>
+
+<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/void"><code>void</code> operator</a> is used in either of the following ways:</p>
+
+<pre class="syntaxbox">void (expression)
+void expression
+</pre>
+
+<p>The <code>void</code> operator specifies an expression to be evaluated without returning a value. <code>expression</code> is a JavaScript expression to evaluate. The parentheses surrounding the expression are optional, but it is good style to use them.</p>
+
+<p>You can use the <code>void</code> operator to specify an expression as a hypertext link. The expression is evaluated but is not loaded in place of the current document.</p>
+
+<p>The following code creates a hypertext link that does nothing when the user clicks it. When the user clicks the link, <code>void(0)</code> evaluates to <code>undefined</code>, which has no effect in JavaScript.</p>
+
+<pre class="brush: html"><a>Click here to do nothing</a>
+</pre>
+
+<p>The following code creates a hypertext link that submits a form when the user clicks it.</p>
+
+<pre class="brush: html"><a>
+Click here to submit</a></pre>
+
+<h3 id="Relational_operators">Relational operators</h3>
+
+<p>A relational operator compares its operands and returns a <code>Boolean</code> value based on whether the comparison is true.</p>
+
+<h4 id="in"><code>in</code></h4>
+
+<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/in"><code>in</code> operator</a> returns true if the specified property is in the specified object. The syntax is:</p>
+
+<pre class="brush: js">propNameOrNumber in objectName
+</pre>
+
+<p>where <code>propNameOrNumber</code> is a string or numeric expression representing a property name or array index, and <code>objectName</code> is the name of an object.</p>
+
+<p>The following examples show some uses of the <code>in</code> operator.</p>
+
+<pre class="brush: js">// Arrays
+var trees = ["redwood", "bay", "cedar", "oak", "maple"];
+0 in trees;        // returns true
+3 in trees;        // returns true
+6 in trees;        // returns false
+"bay" in trees;    // returns false (you must specify the index number,
+                   // not the value at that index)
+"length" in trees; // returns true (length is an Array property)
+
+// built-in objects
+"PI" in Math;          // returns true
+var myString = new String("coral");
+"length" in myString;  // returns true
+
+// Custom objects
+var mycar = { make: "Honda", model: "Accord", year: 1998 };
+"make" in mycar;  // returns true
+"model" in mycar; // returns true
+</pre>
+
+<h4 id="instanceof" name="instanceof"><code>instanceof</code></h4>
+
+<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/instanceof"><code>instanceof</code> operator</a> returns true if the specified object is of the specified object type. The syntax is:</p>
+
+<pre class="syntaxbox">objectName instanceof objectType
+</pre>
+
+<p>where <code>objectName</code> is the name of the object to compare to <code>objectType</code>, and <code>objectType</code> is an object type, such as {{jsxref("Date")}} or {{jsxref("Array")}}.</p>
+
+<p>Use <code>instanceof</code> when you need to confirm the type of an object at runtime. For example, when catching exceptions, you can branch to different exception-handling code depending on the type of exception thrown.</p>
+
+<p>For example, the following code uses <code>instanceof</code> to determine whether <code>theDay</code> is a <code>Date</code> object. Because <code>theDay</code> is a <code>Date</code> object, the statements in the <code>if</code> statement execute.</p>
+
+<pre class="brush: js">var theDay = new Date(1995, 12, 17);
+if (theDay instanceof Date) {
+  // statements to execute
+}
+</pre>
+
+<h3 id="Operator_precedence">Operator precedence</h3>
+
+<p>The <em>precedence</em> of operators determines the order they are applied when evaluating an expression. You can override operator precedence by using parentheses.</p>
+
+<p>The following table describes the precedence of operators, from highest to lowest.</p>
+
+<table class="standard-table">
+ <caption>Operator precedence</caption>
+ <thead>
+  <tr>
+   <th scope="col">Operator type</th>
+   <th scope="col">Individual operators</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>member</td>
+   <td><code>. []</code></td>
+  </tr>
+  <tr>
+   <td>call / create instance</td>
+   <td><code>() new</code></td>
+  </tr>
+  <tr>
+   <td>negation/increment</td>
+   <td><code>! ~ - + ++ -- typeof void delete</code></td>
+  </tr>
+  <tr>
+   <td>multiply/divide</td>
+   <td><code>* / %</code></td>
+  </tr>
+  <tr>
+   <td>addition/subtraction</td>
+   <td><code>+ -</code></td>
+  </tr>
+  <tr>
+   <td>bitwise shift</td>
+   <td><code>&lt;&lt; &gt;&gt; &gt;&gt;&gt;</code></td>
+  </tr>
+  <tr>
+   <td>relational</td>
+   <td><code>&lt; &lt;= &gt; &gt;= in instanceof</code></td>
+  </tr>
+  <tr>
+   <td>equality</td>
+   <td><code>== != === !==</code></td>
+  </tr>
+  <tr>
+   <td>bitwise-and</td>
+   <td><code>&amp;</code></td>
+  </tr>
+  <tr>
+   <td>bitwise-xor</td>
+   <td><code>^</code></td>
+  </tr>
+  <tr>
+   <td>bitwise-or</td>
+   <td><code>|</code></td>
+  </tr>
+  <tr>
+   <td>logical-and</td>
+   <td><code>&amp;&amp;</code></td>
+  </tr>
+  <tr>
+   <td>logical-or</td>
+   <td><code>||</code></td>
+  </tr>
+  <tr>
+   <td>conditional</td>
+   <td><code>?:</code></td>
+  </tr>
+  <tr>
+   <td>assignment</td>
+   <td><code>= += -= *= /= %= &lt;&lt;= &gt;&gt;= &gt;&gt;&gt;= &amp;= ^= |=</code></td>
+  </tr>
+  <tr>
+   <td>comma</td>
+   <td><code>,</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>A more detailed version of this table, complete with links to additional details about each operator, may be found in <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#Table">JavaScript Reference</a>.</p>
+
+<h2 id="Expressions">Expressions</h2>
+
+<p>An <em>expression</em> is any valid unit of code that resolves to a value.</p>
+
+<p>Every syntactically valid expression resolves to some value but conceptually, there are two types of expressions: with side effects (for example: those that assign value to a variable) and those that in some sense evaluate and therefore resolve to a value.</p>
+
+<p>The expression <code>x = 7</code> is an example of the first type. This expression uses the =<em> operator</em> to assign the value seven to the variable <code>x</code>. The expression itself evaluates to seven.</p>
+
+<p>The code <code>3 + 4</code> is an example of the second expression type. This expression uses the + operator to add three and four together without assigning the result, seven, to a variable.<br>
+ <br>
+ JavaScript has the following expression categories:</p>
+
+<ul>
+ <li>Arithmetic: evaluates to a number, for example 3.14159. (Generally uses {{ web.link("#Arithmetic_operators", "arithmetic operators") }}.)</li>
+ <li>String: evaluates to a character string, for example, "Fred" or "234". (Generally uses {{ web.link("#String_operators", "string operators") }}.)</li>
+ <li>Logical: evaluates to true or false. (Often involves {{ web.link("#Logical_operators", "logical operators") }}.)</li>
+ <li>Primary expressions: Basic keywords and general expressions in JavaScript.</li>
+ <li>Left-hand-side expressions: Left values are the destination of an assignment.</li>
+</ul>
+
+<h3 id="Primary_expressions">Primary expressions</h3>
+
+<p>Basic keywords and general expressions in JavaScript.</p>
+
+<h4 id="this" name="this"><code>this</code></h4>
+
+<p>Use the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code> keyword</a> to refer to the current object. In general, <code>this</code> refers to the calling object in a method. Use <code>this</code> either with the dot or the bracket notation:</p>
+
+<pre class="syntaxbox">this["propertyName"]
+this.propertyName
+</pre>
+
+<p>Suppose a function called <code>validate</code> validates an object's <code>value</code> property, given the object and the high and low values:</p>
+
+<pre class="brush: js">function validate(obj, lowval, hival){
+  if ((obj.value &lt; lowval) || (obj.value &gt; hival))
+    console.log("Invalid Value!");
+}
+</pre>
+
+<p>You could call <code>validate</code> in each form element's <code>onChange</code> event handler, using <code>this</code> to pass it the form element, as in the following example:</p>
+
+<pre class="brush: html"></pre>
+
+<p>Enter a number between 18 and 99:</p>
+
+<p><input></p>
+
+<h4 id="Grouping_operator">Grouping operator</h4>
+
+<p>The grouping operator <code>( )</code> controls the precedence of evaluation in expressions. For example, you can override multiplication and division first, then addition and subtraction to evaluate addition first.</p>
+
+<pre class="brush:js">var a = 1;
+var b = 2;
+var c = 3;
+
+// default precedence
+a + b * c     // 7
+// evaluated by default like this
+a + (b * c)   // 7
+
+// now overriding precedence
+// addition before multiplication
+(a + b) * c   // 9
+
+// which is equivalent to
+a * c + b * c // 9
+</pre>
+
+<h4 id="Comprehensions">Comprehensions</h4>
+
+<p>Comprehensions are an experimental JavaScript feature, targeted to be included in a future ECMAScript version. There are two versions of comprehensions:</p>
+
+<dl>
+ <dt>{{experimental_inline}} {{jsxref("Operators/Array_comprehensions", "[for (x of y) x]")}}</dt>
+ <dd>Array comprehensions.</dd>
+ <dt>{{experimental_inline}} {{jsxref("Operators/Generator_comprehensions", "(for (x of y) y)")}}</dt>
+ <dd>Generator comprehensions.</dd>
+</dl>
+
+<p>Comprehensions exist in many programming languages and allow you to quickly assemble a new array based on an existing one, for example.</p>
+
+<pre class="brush:js">[for (i of [ 1, 2, 3 ]) i*i ];
+// [ 1, 4, 9 ]
+
+var abc = [ "A", "B", "C" ];
+[for (letter of abc) letter.toLowerCase()];
+// [ "a", "b", "c" ]</pre>
+
+<h3 id="Left-hand-side_expressions">Left-hand-side expressions</h3>
+
+<p>Left values are the destination of an assignment.</p>
+
+<h4 id="new" name="new"><code>new</code></h4>
+
+<p>You can use the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> operator</a> to create an instance of a user-defined object type or of one of the built-in object types. Use <code>new</code> as follows:</p>
+
+<pre class="brush: js">var objectName = new objectType([param1, param2, ..., paramN]);
+</pre>
+
+<h4 id="super">super</h4>
+
+<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super keyword</a> is used to call functions on an object's parent. It is useful with <a href="/en-US/docs/Web/JavaScript/Reference/Classes">classes</a> to call the parent constructor, for example.</p>
+
+<pre class="syntaxbox">super([arguments]); // calls the parent constructor.
+super.functionOnParent([arguments]);
+</pre>
+
+<h4 id="Spread_operator">Spread operator</h4>
+
+<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">spread operator</a> allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) are expected.</p>
+
+<p><strong>Example:</strong> Today if you have an array and want to create a new array with the existing one being part of it, the array literal syntax is no longer sufficient and you have to fall back to imperative code, using a combination of <code>push</code>, <code>splice</code>, <code>concat</code>, etc. With spread syntax this becomes much more succinct:</p>
+
+<pre class="brush: js">var parts = ['shoulder', 'knees'];
+var lyrics = ['head', ...parts, 'and', 'toes'];</pre>
+
+<p>Similarly, the spread operator works with function calls:</p>
+
+<pre class="brush: js">function f(x, y, z) { }
+var args = [0, 1, 2];
+f(...args);</pre>
+
+<div>{{PreviousNext("Web/JavaScript/Guide/Funktionen", "Web/JavaScript/Guide/Numbers_and_dates")}}</div>
diff --git a/files/de/web/javascript/guide/einführung/index.html b/files/de/web/javascript/guide/einführung/index.html
new file mode 100644
index 0000000000..b38cb1b700
--- /dev/null
+++ b/files/de/web/javascript/guide/einführung/index.html
@@ -0,0 +1,140 @@
+---
+title: Einführung
+slug: Web/JavaScript/Guide/Einführung
+tags:
+  - Beginner
+  - Guide
+  - Introduction
+  - JavaScript
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Guide/Introduction
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammatik_und_Typen")}}</div>
+
+<p class="summary">Dieses Kapitel stellt JavaScript vor und behandelt einige grundlegende Konzepte.</p>
+
+<h2 id="Was_solltest_du_bereits_wissen">Was solltest du bereits wissen</h2>
+
+<p>Für diese Einführung solltest du die folgenden Grundkenntnisse besitzen:</p>
+
+<ul>
+ <li>Ein allgemeines Verständnis vom Internet und dem World Wide Web ({{Glossary("WWW")}}).</li>
+ <li>Gute praktische Kenntnisse in der HyperText Markup Language ({{Glossary("HTML")}}).</li>
+ <li>Etwas Programmiererfahrung. Falls du erst mit dem Programmieren beginnst, folge einem der Tutorials, die auf der Hauptseite zu <a href="/de/docs/Web/JavaScript" title="/en-US/docs/">JavaScript</a> verlinkt sind.</li>
+</ul>
+
+<h2 id="Wo_findest_du_Informationen_zu_JavaScript">Wo findest du Informationen zu JavaScript</h2>
+
+<p>Die Dokumentation zu JavaScript im MDN umfasst Folgendes:</p>
+
+<ul>
+ <li><a href="/de/Learn">Learning the Web [de]</a> vermittelt Informationen für Einsteiger und präsentiert grundlegende Konzepte der Programmierung und des Internets.</li>
+ <li><a href="/de/docs/Web/JavaScript/Guide">JavaScript Guide [de]</a> (dieser Artikel) gibt einen Überblick über JavaScript und die Komponenten der Sprache.</li>
+ <li><a href="/de/docs/Web/JavaScript/Reference">JavaScript Referenz [de]</a> enthält ausführliches Referenzmaterial über JavaScript.</li>
+</ul>
+
+<p>Falls du dich das erste Mal mit JavaScript befasst, beginne einfach mit den Tutorials von <a href="/de/Learn">Learning the Web [de]</a> und dem <a href="/de/docs/Web/JavaScript/Guide" title="en/Core_JavaScript_1.5_Guide">JavaScript Guide [de]</a>. Sobald du mit den ersten Grundlagen vertraut bist, kannst du die <a href="/de/docs/Web/JavaScript/Reference">JavaScript Referenz [de]</a> nutzen, um noch mehr über die einzelnen Methoden, Funktionen und Objekte von JavaScript zu erfahren.</p>
+
+<h2 id="Was_ist_JavaScript">Was ist JavaScript?</h2>
+
+<p>JavaScript ist eine plattformübergreifende, objektorientierte Skriptsprache. Es ist eine kompakte und ressourcenschonende Sprache. Innerhalb einer Host-Umgebung kann JavaScript mit den Objekten seiner Umgebung verknüpft werden, um diese programmatisch zu steuern.</p>
+
+<p>JavaScript beinhaltet eine Standardbibliothek von Objekten wie <code>Array</code>, <code>Date</code>, und <code>Math</code>, sowie einen Kern an Sprachelementen wie Operatoren, Kontrollstrukturen und Anweisungen. Der JavaScript-Kern kann für eine Vielzahl von Anwendungsfällen erweitert werden, indem man ihn durch zusätzliche Objekte ergänzt. Beispiele:</p>
+
+<ul>
+ <li><em>Clientseitiges JavaScript</em> erweitert die Kernsprache durch die Bereitstellung von Objekten, mit denen ein Browser und sein Document Object Model (DOM) steuern lassen. Zum Beispiel ermöglichen clientseitige Erweiterungen einer Anwendung, Elemente in einem HTML-Formular anzulegen und auf Benutzerereignisse wie Mausklicks, Formulareingaben und Seitennavigation zu reagieren.</li>
+ <li><em>Serverseitiges JavaScript</em> erweitert die Kernsprache durch Bereitstellung von Objekten, die für die Ausführung von JavaScript auf einem Server von Bedeutung sind. Zum Beispiel ermöglichen es serverseitige Erweiterungen einer Applikation, mit einer Datenbank zu kommunizieren, Information von einem Aufruf der Applikation zum nächsten zu erhalten oder Änderungen an Dateien auf einem Server vorzunehmen.</li>
+</ul>
+
+<h2 id="JavaScript_and_Java" name="JavaScript_and_Java">JavaScript und Java</h2>
+
+<p>JavaScript und Java gleichen einander in manchen Aspekten, sind in anderen aber grundlegend verschieden. Die Sprache JavaScript ähnelt Java, verfügt jedoch nicht über Javas statische Typisierung und seine strenge Typprüfung. JavaScript folgt weitgehend der Ausdruckssyntax, den Namenskonventionen und den elementaren Kontrollstrukturen von Java, was der Grund für die Umbenennung von LiveScript in JavaScript gewesen ist.</p>
+
+<p>Im Gegensatz zu Javas durch Deklarationen aufgebautes System, von zur Compile-Zeit verfügbaren Klassen, unterstützt JavaScript ein Laufzeitsystem, das auf einer kleinen Zahl an Datentypen basiert, die numerische und Boolesche Werte sowie Zeichenketten repräsentieren. JavaScript besitzt ein prototypen-basiertes Objektmodell anstatt des verbreiteteren klassenbasierten. Das prototypen-basierte Modell liefert dynamische Vererbung; das bedeutet, was vererbt wird, kann zwischen einzelnen Objekten variieren. JavaScript unterstützt zudem Funktionen ohne spezielle deklarative Anforderungen. Funktionen können Objekt Eigenschaften sein, ausgeführt als schwach typisierte Methoden.</p>
+
+<p>JavaScript ist im Vergleich zu Java eine syntaktisch sehr freie Sprache. Sie müssen nicht alle Variablen, Klassen und Methoden deklarieren. Sie müssen sich nicht damit befassen, ob Methoden öffentlich, privat oder geschützt sind und Sie müssen keine Interfaces implementieren. Variablen, Parameter und Rückgabewerte von Funktionen sind nicht explizit typisiert.</p>
+
+<p>Java ist eine auf schnelle Ausführung und Typsicherheit ausgelegte, klassenbasierte Programmiersprache. Typsicherheit bedeutet, dass Sie zum Beispiel keine Ganzzal in Java in eine Objektreferenz wandeln oder auf geschützten Speicher zugreifen können, indem Sie den Bytecode von Java manipulieren. Javas klassenbasiertes Modell bedeutet, dass Programme ausschließlich aus Klassen und ihren Methoden bestehen. Javas Klassenvererbung und strenge Typisierung erfordern im Allgemeinen eng gekoppelte Objekthierarchien. Wegen dieser Anforderungen ist das Programmieren in Java komplexer als in JavaScript.</p>
+
+<p>Im Gegensatz dazu steht JavaScript in der Tradition einer Reihe kleiner, dynamisch typisierter Sprachen wie HyperTalk und dBase. Diese Skriptsprachen stellen, dank ihrer einfacheren Syntax, spezialisierter eingebauter Funktionalität und minimalen Anforderungen, für die Objektgenerierung Programmierwerkzeuge für einen deutlich breiteren Adressatenkreis zu Verfügung.</p>
+
+<table class="standard-table">
+ <caption>JavaScript im Vergleich zu Java</caption>
+ <thead>
+  <tr>
+   <th scope="col">JavaScript</th>
+   <th scope="col">Java</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Objektorientiert. Keine Unterscheidung zwischen Typen von Objekten. Vererbung mittels des Prototypen-Mechanismus, jedes beliebige Objekt kann dynamisch um Eigenschaften und Methoden erweitert werden.</td>
+   <td>Klassenbasiert. Objekte werden in Klassen und Instanzen unterteilt, Vererbung erfolgt vollständig über die Klassenhierarchie. Klassen und Instanzen können keine Eigenschaften und Methoden dynamisch hinzugefügt werden.</td>
+  </tr>
+  <tr>
+   <td>Datentypen von Variablen werden nicht deklariert (dynamische Typisierung)</td>
+   <td><span style="background-color: rgba(212, 221, 228, 0.14902);">Datentypen von Variablen müssen deklariert werden (statische Typisierung)</span></td>
+  </tr>
+  <tr>
+   <td>Kein automatischer Schreibzugriff auf die Festplatte.</td>
+   <td><span style="background-color: rgba(212, 221, 228, 0.14902);">Kein automatischer Schreibzugriff auf die Festplatte.</span></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Weitere Informationen zu den Unterschieden zwischen JavaScript und Java finden Sie im Kapitel <a href="/de/docs/Web/JavaScript/Guide/Details_of_the_Object_Model" title="JavaScript/Guide/Details of the Object Model">Einzelheiten des Objektmodells</a>.</p>
+
+<h2 id="JavaScript_and_the_ECMAScript_Specification" name="JavaScript_and_the_ECMAScript_Specification">JavaScript und die ECMAScript-Spezifikation</h2>
+
+<p>JavaScript wird durch <a class="external" href="http://www.ecma-international.org/">Ecma International</a> standardisiert — den europäischen Verband zur Standardisierung von Informations- und Telekommunikationssystemen (ECMA war vormals ein Akronym für 'European Computer Manufacturers Association'), um eine standardisierte, internationale Programmiersprache auf der Basis von JavaScript verfügbar zu machen. Diese standardisierte Version von JavaScript, genannt ECMAScript, verhält sich in allen standardkonformen Applikationen identisch. Unternehmen können die offene Sprachdefinition verwenden, um ihre eigene Implementierung von JavaScript zu entwickeln. Der ECMAScript-Standard ist in der Spezifikation ECMA-262 dokumentiert. Unter <a href="/de/docs/Web/JavaScript/New_in_JavaScript">Neu in JavaScript</a> erfahren Sie mehr über die unterschiedlichen Versionen von JavaScript und den ECMAScript-Spezifikationen.</p>
+
+<p>ECMA-262 ist auch von der <a class="external" href="http://www.iso.ch/">ISO</a> (International Organization for Standardization) als ISO-16262 verabschiedet. Sie finden die Spezifikation auch auf <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">der Website von Ecma International</a>. Die Spezifikation von ECMAScript beschreibt nicht das Document Object Model (DOM), welches durch das <a class="external" href="http://www.w3.org/">World Wide Web Consortium (W3C)</a> und der <a href="https://whatwg.org">WHATWG (Web Hypertext Application Technology Working Group)</a> standardisiert wird. Das DOM definiert die Art und Weise, in der HTML-Dokumentenobjekte für Ihr Skript sichtbar sind. Um ein besseres Verständnis der verschiedenen bei der Programmierung in JavaScript eingesetzten Technologien zu entwickeln, lesen Sie den Artikel <a href="/de/docs/Web/JavaScript/JavaScript_technologieuebersicht">JavaScript Technologieübersicht</a>.</p>
+
+<h3 id="JavaScript_Documentation_versus_the_ECMAScript_Specification" name="JavaScript_Documentation_versus_the_ECMAScript_Specification">JavaScript-Dokumentation vs. ECMAScript-Spezifikation</h3>
+
+<p>Die Spezifikation von ECMAScript besteht aus Anforderungen an eine Implementierung von ECMAScript; sie ist zweckdienlich, falls Sie standardkonforme Spracheigenschaften in Ihrer ECMAScript-Implementierung oder ihrer Laufzeitumgebung (wie SpiderMonkey in Firefox oder v8 in Chrome) realisieren wollen.</p>
+
+<p>Das ECMAScript-Dokument soll nicht den Skriptprogrammierer unterstützen; nutzen Sie für Informationen zum Erstellen von Skripten die JavaScript-Dokumentation.</p>
+
+<p>Die ECMAScript-Spezifikation verwendet Terminologie und Syntax, mit der JavaScript-Programmierer möglicherweise nicht vertraut sind. Obwohl sich die Beschreibung der Sprache in ECMAScript unterscheiden kann, bleibt die Sprache selbst die gleiche. JavaScript unterstützt jede Funktionalität, die in der ECMAScript-Spezifikation genannt wird.</p>
+
+<p>Die JavaScript-Dokumentation beschreibt Aspekte der Sprache in für JavaScript-Programmierer passender Form.</p>
+
+<h2 id="Erste_Schritte_mit_JavaScript">Erste Schritte mit JavaScript</h2>
+
+<p>Die ersten Schritte mit JavaScript sind einfach: alles was Sie brauchen, ist einen aktuellen Browser. Diese Einführung nimmt auf einige Spracheigenschaften von JavaScript Bezug, die zur Zeit nur in den jüngsten Versionen von Firefox verfügbar sind, somit wird die Nutzung der aktuellsten Firefox-Version empfohlen.</p>
+
+<p>Es gibt zwei Werkzeuge in Firefox, die zum Experimentieren mit JavaScript nützliche sind: die Web-Konsole and die JavaScript-Umgebung.</p>
+
+<h3 id="Die_Web-Konsole">Die Web-Konsole</h3>
+
+<p>Die <a href="/de/docs/Tools/Web_Konsole">Web-Konsole</a> zeigt Ihnen Informationen zur aktuell geladenen Webseite an und beinhaltet zudem eine <a href="/de/docs/Tools/Web_Konsole#Der_Kommandozeileninterpreter">Kommandozeile</a>, die Sie nutzen können, um JavaScript-Ausdrücke im Kontext der aktuellen Seite auszuführen.</p>
+
+<p>Um die Web-Konsole zu öffnen (Ctrl+Shift+K), wählen Sie "Web-Konsole" im Menü "Entwicklerwerkzeuge", das Sie im Menü von Firefox finden. Die Konsole wird am unteren Rand des Browserfensters angezeigt. Entlang des unteren Randes der Konsole befindet sich die Kommandozeile, in der Sie JavaScript eingeben können; die zugehörige Ausgabe erscheint im darüberliegenden Fensterbereich:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7363/web-console-commandline.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="JavaScript-Umgebung_(Scratchpad)">JavaScript-Umgebung (Scratchpad)</h3>
+
+<p>Die Web-Konsole eignet sich hervorragend zur Ausführung einzelner Zeilen JavaScript, möchten Sie jedoch mehrere Zeilen ausführen können, ist das nicht besonders komfortabel und Ihren Beispielcode speichern können Sie mit der Web-Konsole auch nicht. Daher ist für komplexere Beispiele die <a href="/de/docs/Tools/Scratchpad">JavaScript-Umgebung</a> die bessere Wahl.</p>
+
+<p>Um die JavaScript-Umgebung zu öffnen (Shift+F4), wählen Sie "JavaScript-Umgebung" aus dem Menü "Entwicklerwerkzeuge", das Sie im Firefox-Menü finden. Die JavaScript-Umgebung öffnet sich in einem eigenen Fenster als Editor, mit dem Sie JavaScript schreiben und im Browser ausführen können. Sie können auch Skripte auf der Festplatte speichern bzw. laden.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13468/scratchpad.png" style="display: block; height: 375px; margin-left: auto; margin-right: auto; width: 631px;"></p>
+
+<h3 id="Hello_world">Hello world</h3>
+
+<p>Beginnen Sie mit dem Programmieren in JavaScript, indem Sie die JavaScript-Umgebung öffnen und Ihr erstes "Hello World"-Programm in JavaScript schreiben:</p>
+
+<pre class="brush: js">function greetMe(yourName) {
+  alert("Hello " + yourName);
+}
+
+greetMe("World");
+</pre>
+
+<p>Markieren Sie den Quelltext und drücken Sie Ctrl+R, um zu schauen, ob alles funktioniert.</p>
+
+<p>Auf den folgenden Seiten macht Sie diese Einführung mit Syntax und Spracheigenschaften von JavaScript vertraut, sodass Sie bald komplexere Anwendungen schreiben können.</p>
+
+<p>{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammatik_und_Typen")}}</p>
diff --git a/files/de/web/javascript/guide/feinheiten_des_objektmodells/index.html b/files/de/web/javascript/guide/feinheiten_des_objektmodells/index.html
new file mode 100644
index 0000000000..4d5e46ac26
--- /dev/null
+++ b/files/de/web/javascript/guide/feinheiten_des_objektmodells/index.html
@@ -0,0 +1,721 @@
+---
+title: Feinheiten des Objektmodells
+slug: Web/JavaScript/Guide/Feinheiten_des_Objektmodells
+tags:
+  - Guide
+  - Intermediate
+  - JavaScript
+  - Object
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Mit_Objekten_arbeiten", "Web/JavaScript/Guide/Using_promises")}}</div>
+
+<p class="summary">JavaScript ist eine Objektbasierte Programmiersprache, die auf Prototypen, statt auf Klassen basiert. Aufgrund dieser Tatsache ist es u. U. schwieriger zu erkennen, wie in JavaScript Objekthierarchien erstellt werden und die Vererbung von Eigenschaften und deren Werten erfolgt. Dieses Kapitel versucht diese Situation zu klären.</p>
+
+<p>Dieses Kapitel geht davon aus, dass bereits Erfahrungen mit JavaScript vorhanden sind und man einfache Objekte mit Funktionen schon erstellt hat.</p>
+
+<h2 id="Klassenbasierte_vs._Prototypbasierte_Sprachen">Klassenbasierte vs. Prototypbasierte Sprachen</h2>
+
+<p>Klassenbasierte, Objektorientierte Sprachen wie Java und C++ bauen auf dem Konzept von Klassen und Instanzen auf.</p>
+
+<ul>
+ <li>Eine <em>Klasse</em> definiert alle Eigenschaften (was Methoden und Felder in Java oder Members in C++ entspricht), welche eine Menge von Objekten charakterisiert. Eine Klasse ist ein abstrakter Bauplan für Objekte. Die Klasse repräsentiert den Aufbau ihrer Objekte. Zum Beispiel kann die Klasse <code>Employee</code> die Menge aller Mitarbeiter repräsentieren.</li>
+ <li>Eine <code>Instanz</code> ist auf der anderen Seite eine Instanz einer Klasse. Diese Instanz ist ein Mitglied der oben genannten Objektmenge. Zum Beispiel kann <code>Victoria</code> eine Instanz der <code>Employee</code> Klasse sein und somit einen individuellen Mitarbeiter repräsentieren. Eine Instanz hat genau die selben Eigenschaften wie die Elternklasse (keine mehr und keine weniger).</li>
+</ul>
+
+<p>Eine Prototypbasierte Sprache wie JavaScript hat diese Unterscheidung nicht: es gibt einfach Objekte. Eine Prototypbasierte Sprache hat die Notation eines <em>prototypischen Objektes</em>, ein Objekt welches als Template genutzt wird und die initialen Eigenschaften für ein neues Objekt vorgibt. Jedes Objekt kann seine eigenen Eigenschaften spezifizieren, entweder beim Erstellen oder zur Laufzeit. Zudem kann jedes Objekt als <em>Prototyp</em> für ein anderes Objekt verwendet werden, was es auch dem zweiten Objekt erlaubt seine Eigenschaften mit dem ersten Objekt zu teilen.</p>
+
+<h3 id="Eine_Klasse_definieren">Eine Klasse definieren</h3>
+
+<p>In einer Klassenbasierten Sprache definiert man Klassen in separaten <em>Klassendefinitionen</em>. In diesen Definitionen spezifiziert man spezielle Methoden, <em>Konstruktoren</em> genannt, um eine Instanz der Klasse zu erstellen. Eine Konstruktormethode spezifiziert Initialwerte für die Eigenschaften einer Instanz und kann andere Prozesse während der Erstellungszeit durchführen. Man benutzt den <code>new</code> Operator in Verbindung mit der Konstruktormethode, um Klasseninstanzen zu erstellen.</p>
+
+<p>JavaScript folgt einem ähnlichen Modell, jedoch hat keine vom Konstruktor getrennte Klassendefinition. Stattdessen definiert man eine Konstruktorfunktion, um ein Objekt mit einer initialen Menge an Eigenschaften und Werten zu erstellen. Jede JavaScript Funktion kann als Konstruktor verwendet werden. Man benutzt den <code>new</code> Operator mit einer Konstruktorfunktion, um ein neues Objekt zu erstellen.</p>
+
+<h3 id="Unterklassen_und_Vererbung">Unterklassen und Vererbung</h3>
+
+<p>In einer Klassenbasierten Sprache erstellt man eine Hierarchie von Klassen durch die Klassendefinition. In der Klassendefinition kann man spezifizieren, dass die neue Klasse eine <em>Unterklasse</em> der schon existierenden Klassen ist. Die Unterklasse erbt alle Eigenschaften von der Oberklasse und kann neue Eigenschaften hinzufügen oder vererbte verändern. Angenommen die <code>Employee</code> Klasse hat nur die Eigenschaften <code>name</code> und <code>dept</code> und <code>Manager</code> ist eine Unterklasse von <code>Employee</code> welche die Eigenschaft <code>reports</code> hinzufügt. In diesem Fall hat eine Instanz der <code>Manager</code> Klasse alle drei Eigenschaften: <code>name</code>, <code>dept</code> und <code>reports</code>.</p>
+
+<p>JavaScript implementiert Vererbung so, dass man jedes Prototypobjekt mit jeder Konstruktorfunktion verbinden kann. So kann man das gleiche <code>Employee</code> — <code>Manager</code> Beispiel erstellen, jedoch mit einer leicht anderen Terminologie. Als erstes definiert man die <code>Employee</code> Konstruktorfunktion, welche die Eigenschaften <code>name</code> und <code>dept</code> spezifiziert. Als nächstes definiert man die <code>Manager</code> Konstruktorfunktion, ruft den <code>Employee</code> Konstruktor auf und spezifiziert die <code>reports</code> Eigenschaft. Letztlich weist man ein neues Objekt zu, welches von <code>Employee.prototype</code> stammt und als <code>prototype</code> für die <code>Manager</code> Konstruktorfunktion dient. Dann, wenn man einen neuen <code>Manager</code> erstellt, erbt dieser die Eigenschaften <code>name</code> und <code>dept</code> von dem <code>Employee</code> Objekt.</p>
+
+<h3 id="Hinzufügen_und_Entfernen_von_Eigenschaften">Hinzufügen und Entfernen von Eigenschaften</h3>
+
+<p>In Klassenbasierten Sprachen wird eine Klasse typischerweise zur Übersetzungszeit erstellt und Instanzen dieser Klasse werden zur Übersetzungs- oder Laufzeit instantiiert. Man kann die Anzahl oder die Typen von Eigenschaften einer Klasse nicht nach der Definition der Klasse verändern. In JavaScript kann man immer EIgenschaften während der Laufzeit zu Objekten hinzufügen oder von ihnen entfernen. Wenn eine Eigenschaft zu einem Objekt hinzugefügt wird, welches als Prototyp für andere Objekte fungiert, so bekommen die anderen Objekte auch diese neue Eigenschaft.</p>
+
+<h3 id="Zusammenfassung_von_Unterschieden">Zusammenfassung von Unterschieden</h3>
+
+<p>Die folgende Tabelle gibt eine kurze Zusammenfassung von einigen der Unterschiede. Der Rest des Kapitels beschreibt detailliert den Einsatz von JavaScript Konstruktoren und Prototypen, um eine Objekthierarchie zu erstellen und vergleicht dieses mit der Sprache Java.</p>
+
+<table class="standard-table">
+ <caption>Vergleich von Klassbasierten (Java) und Prototypebasierten (JavaScript) Objektsystemen</caption>
+ <thead>
+  <tr>
+   <th scope="col">Klassenbasiert (Java)</th>
+   <th scope="col">Prototypbasiert (JavaScript)</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Klassen und Instanzen sind verschiedene Dinge.</td>
+   <td>Alle Objekte können von anderen Objekt erben.</td>
+  </tr>
+  <tr>
+   <td>Definieren einer Klasse mit einer Klassendefinition; Instantiieren eine Klasse mit Konstruktormethoden.</td>
+   <td>Definieren und Erstellen einer Menge von Objekten mit Konstruktorfunktionen.</td>
+  </tr>
+  <tr>
+   <td>Erstellt ein Objekt mit dem <code>new</code> Operator.</td>
+   <td>Genauso.</td>
+  </tr>
+  <tr>
+   <td>Konstruiert eine Objekthierarchie mit Klassendefinitionen, um Unterklasse aus existierenden Klassen zu definieren.</td>
+   <td>Konstruiert eine Objekthierarchie, indem ein Objekt als Prototyp mit einer Konstruktorfunktion verbunden werden.</td>
+  </tr>
+  <tr>
+   <td>Erbt Eigenschaften entlang der Klassenkette.</td>
+   <td>Erbt Eigenschaften entlang der Prototypenkette.</td>
+  </tr>
+  <tr>
+   <td>Klassendefinitionen spezifizieren <em>alle</em> Eigenschaften von allen Klasseninstanzen. Man kann keine Eigenschaften dynamisch zur Laufzeit hinzufügen.</td>
+   <td>Konstruktorfunktionen oder Prototypen spezifizieren eine <em>initiale Menge</em> von Eigenschaften. Man kann Eigenschaften dynamisch zu individuellen Objekten hinzufügen oder entfernen oder zu einer Menge von Objekten.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Das_Mitarbeiter-Beispiel">Das Mitarbeiter-Beispiel</h2>
+
+<p>Das restliche Kapitel benutzt die Mitarbeiterhierarchie, die in folgender Grafik dargestellt ist.</p>
+
+<div style="display: table-row;">
+<div style="display: table-cell; width: 350px; text-align: center; vertical-align: middle; padding: 10px;">
+<p>Eine einfache Objekthierarchie mit den folgenden Objekten:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/3060/figure8.1.png"></p>
+</div>
+
+<div style="display: table-cell; vertical-align: middle; padding: 10px;">
+<ul>
+ <li><code>Employee</code> (Mitarbeiter) hat die Eigenschafte <code>name</code> (die als Initialwert einen leerer String hat) und <code>dept</code> (Abteilung) (die als Initialwert "general" hat).</li>
+ <li><code>Manager</code> basiert auf <code>Employee</code>. Er fügt die Eigenschaft <code>reports</code> (Berichte) hinzu (die als Initialwert ein leeres Array hat und für ein Array von <code>Employee</code>s vorgesehen ist).</li>
+ <li><code>WorkerBee</code> (Arbeitsbiene) basiert ebenfalls auf <code>Employee</code>. Er fügt die Eigenschaft <code>projects</code> hinzu (die als Initialwert ein leeres Array hat und für ein Array von Strings vorgesehen ist).</li>
+ <li><code>SalesPerson</code> (Verkäufer) basiert auf <code>WorkerBee</code>. Er fügt die Eigenschaft <code>quota</code> (Pensum) hinzu (die als Initialwert 100 hat). zudem überschreibt er die <code>dept</code> Eigenschaft mit dem Wert "sales", um anzudeuten, dass alle Verkäufer in der gleichen Abteilung sind.</li>
+ <li><code>Engineer</code> (Ingenieur) basiert auf <code>WorkerBee</code>. Er fügt die Eigenschaft <code>machine</code> (Maschine) hinzu (die als Initialwert einen leeren String hat) und überschreibt die Eigenschaft <code>dept</code> mit dem Wert "engineering".</li>
+</ul>
+</div>
+</div>
+
+<h2 id="Erstellen_der_Hierarchie">Erstellen der Hierarchie</h2>
+
+<p>Es gibt viele Wege, um angemessene Konstruktorfunktionen für die Mitarbeiterhierarchie zu implementieren. Welchen man auswählt hängt stark davon ab, was in der Anwendung erreicht werden soll.</p>
+
+<p>Dieser Abschnitt zeigt, wie man eine sehr einfache (und vergleichbar unflexible) Definition benutzen kann, um zu demonstrieren, wie die Vererbung funktioniert. In dieser Definition ist es nicht möglich jeden Eigenschaftswert zu spezifizieren, wenn ein Objekt erstellt wird. Die neu erstellten Objekte bekommen nur die Initialwerte und können später verändert werden.</p>
+
+<p>In einer echten Anwendung würde man Konstruktoren so definieren, dass man diesen Eigenschaftswerte zur Erstellzeit übergeben kann (siehe <a href="#Flexiblere_Konstruktoren">Flexiblere Konstruktoren</a> für mehr Informationen). Für den Anfang zeigen diese Definitionen wie die Vererbung funktioniert.</p>
+
+<p>Die folgenden Java und JavaScript <code>Employee</code> Definitionen sind gleich. Der einzige Unterschied ist, dass in Java für jede Eigenschaft ein Typ definiert sein muss, in JavaScript jedoch nicht (das liegt daran, dass Java eine <a href="https://de.wikipedia.org/wiki/Starke_Typisierung">stark typisierte Sprache</a> ist, während JavaScript eine schwach typisierte Sprache ist).</p>
+
+<div class="twocolumns">
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js notranslate">function Employee() {
+  this.name = '';
+  this.dept = 'general';
+}
+</pre>
+
+<h4 id="Java"><br>
+ Java</h4>
+
+<pre class="brush: java notranslate">public class Employee {
+   public String name = "";
+   public String dept = "general";
+}
+</pre>
+</div>
+
+<p>Die <code>Manager</code> und <code>WorkerBee</code> Definitionen zeigen die Unterschiede bei der Spezifizierung eines Oberobjektes in der Vererbungskette. In JavaScript fügt man eine Prototypinstanz der Eigenschaft <code>prototype</code> der Konstruktorfunktion hinzu. Man kann dieses zu jedem Zeitpunkt nach der Definition des Konstruktors machen. In Java spezifiziert man die Oberklasse in der Klassendefinition. Man kann die Oberklasse nicht außerhalb der Klassendefinition ändern.</p>
+
+<div class="twocolumns">
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<pre class="brush: js notranslate">function Manager() {
+  Employee.call(this);
+  this.reports = [];
+}
+Manager.prototype =
+    Object.create(Employee.prototype);
+
+function WorkerBee() {
+  Employee.call(this);
+  this.projects = [];
+}
+WorkerBee.prototype =
+    Object.create(Employee.prototype);
+</pre>
+
+<h4 id="Java_2"><br>
+ Java</h4>
+
+<pre class="brush: java notranslate">public class Manager extends Employee {
+   public Employee[] reports =
+       new Employee[0];
+}
+
+
+
+public class WorkerBee extends Employee {
+   public String[] projects = new String[0];
+}
+
+
+</pre>
+</div>
+
+<p>Die <code>Engineer</code> und <code>SalesPerson</code> Definition erstellt Objekte, welche von <code>WorkerBee</code> und somit auch von <code>Employee</code> abstammen. Ein Objekt von diesen Typen hat alle Eigenschaften der vorherigen Objekte in der Vererbungskette. Zudem überschreiben diese Definitionen den Wert der geerbten <code>dept</code> Eigenschaft mit einem neuen Wert für diese Objekte.</p>
+
+<div class="twocolumns">
+<h4 id="JavaScript_3">JavaScript</h4>
+
+<pre class="brush: js notranslate">function SalesPerson() {
+   WorkerBee.call(this);
+   this.dept = 'sales';
+   this.quota = 100;
+}
+SalesPerson.prototype =
+    Object.create(WorkerBee.prototype);
+
+function Engineer() {
+   WorkerBee.call(this);
+   this.dept = 'engineering';
+   this.machine = '';
+}
+Engineer.prototype =
+    Object.create(WorkerBee.prototype);
+</pre>
+
+<h4 id="Java_3"><br>
+ Java</h4>
+
+<pre class="brush: java notranslate">public class SalesPerson extends WorkerBee {
+   public String dept = "sales";
+   public double quota = 100.0;
+}
+
+
+public class Engineer extends WorkerBee {
+   public String dept = "engineering";
+   public String machine = "";
+}
+
+</pre>
+</div>
+
+<p>Mit diesen Definitionen kann man Instanzen dieser Objekte mit ihren Initialwerten und Eigenschaften erstellen. Die nächste Grafik zeigt diese JavaScript Definitionen, um neue Objekte zu erzeugen und die Werte der neuen Objekte.</p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Der Term <em>Instanz</em> hat eine spezielle technische Bedeutung in Klassenbasierten Sprachen. In diesen Sprachen ist eine Instanz eine individuelle Instanz von einer Klasse und ist fundamental anders als eine Klasse. In JavaScript gibt es diese technische Bedeutung nicht, weil JavaScript nicht zwischen Klassen und Instanzen unterscheidet. Immer wenn über JavaScript Instanzen gesprochen wird, ist das rein informell und bedeutet, dass ein Objekte mit einer Konstruktorfunktion erstellt wurde. So kann man in diesem Beispiel sagen, dass <code><code>jane</code></code> eine Instanz von <code><code>Engineer</code></code> ist. Ebenso haben die Terme <em>Eltern</em>, <em>Kind</em>, <em>Vorfahre</em><strong><em> </em></strong>und <em>Nachfahre</em> keine formale Bedeutung in JavaScript; Man kann diese benutzen, um deutlich zu machen wo sich ein Objekt in der Prototypenkette befindet.</p>
+</div>
+
+<h3 id="Objekte_mit_der_einfachen_Definition_erstellen">Objekte mit der einfachen Definition erstellen</h3>
+
+<div class="twocolumns">
+<h4 id="Objekthierarchie">Objekthierarchie</h4>
+
+<p>Die folgende Hierarchie wird mit dem Code auf der rechten Seite erstellt.</p>
+
+<p><img src="https://mdn.mozillademos.org/files/10412/=figure8.3.png"></p>
+
+<h4 id="Individuelle_Objekte_Jim_Sally_Mark_Fred_Jane_etc._Instanzen_erstellt_vom_Konstruktor">Individuelle Objekte = Jim, Sally, Mark, Fred, Jane, etc.<br>
+ "Instanzen" erstellt vom Konstruktor</h4>
+
+<pre class="brush: js notranslate">var jim = new Employee;
+// Parentheses can be omitted if the
+// constructor takes no arguments.
+// jim.name is ''
+// jim.dept is 'general'
+
+var sally = new Manager;
+// sally.name is ''
+// sally.dept is 'general'
+// sally.reports is []
+
+var mark = new WorkerBee;
+// mark.name is ''
+// mark.dept is 'general'
+// mark.projects is []
+
+var fred = new SalesPerson;
+// fred.name is ''
+// fred.dept is 'sales'
+// fred.projects is []
+// fred.quota is 100
+
+var jane = new Engineer;
+// jane.name is ''
+// jane.dept is 'engineering'
+// jane.projects is []
+// jane.machine is ''
+</pre>
+</div>
+
+<h2 id="Objekteigenschaften">Objekteigenschaften</h2>
+
+<p>Dieser Abschnitt diskutiert, wie Objekte EIgenschaften von anderen Objekten in der Prototypenkette erben und was passiert, wenn eine Eigenschaft währende der Laufzeit hinzugefügt wird.</p>
+
+<h3 id="Eigenschaften_vererben">Eigenschaften vererben</h3>
+
+<p>Es wird vorausgesetzt, dass das Objekt <code>mark</code> als <code>WorkerBee</code> mit dem folgenden Statement erstellt wurde:</p>
+
+<pre class="brush: js notranslate">var mark = new WorkerBee;
+</pre>
+
+<p>Wenn JavaScript den <code>new</code> Operator sieht, erstellt es ein neues generisches Objekt und setzt implizit den Wert der internen Eigenschaft [[Prototype]] auf den Wert <code>WorkerBee.prototype</code> und setzt die <em><code>this</code></em> Referenz in der <code>WorkerBee</code> Konstruktorfunktion auf das neu erstellte Objekt. Die interne [[Prototype]] Eigenschaft legt die Prototypenkette fest, die zum Zurückgeben von Eigenschaftswerten benutzt wird. Sobald diese Eigenschaften gesetzt sind, gibt JavaScript das neue Objekt zurück und das Zuweisungsstatement setzt die Variable <code>mark</code> mit diesem Objekt.</p>
+
+<p>Dieser Prozess fügt keine Werte in das <code>mark</code>-Objekt (lokale Werte) für Eigenschaften, die <code>mark</code> von der Prototypenkette erbt. Wenn man nach einem Wert einer Eigenschaft fragt, prüft JavaScript erst, ob der Wert in dem Objekt existiert. Wenn dies der Fall ist, wird dieser zurückgegeben. Wenn kein lokaler Wert vorhanden ist, prüft JavaScript die Prototypenkette (über die interne [[Prototype]] Eigenschaft). Wenn ein Objekt in der Prototypenkette einen Wert für die Eigenschaft hat, wird diese zurückgegeben. Wenn keine solche Eigenschaft gefunden wird, geht JavaScript davon aus, dass das Objekt keine solche Eigenschaft hat. Dementsprechend hat das <code>mark</code> Objekt folgende Eigenschaften und Werte:</p>
+
+<pre class="brush: js notranslate">mark.name = '';
+mark.dept = 'general';
+mark.projects = [];
+</pre>
+
+<p>Das <code>mark</code> Objekt hat lokale Werte für die <code>name</code> und <code>dept</code> Eigenschaft über den <code>Employee</code> Konstruktor zugewiesen bekommen. Es wurde ein Wert für die Eigenschaft <code>projects</code> vom <code>WorkerBee</code> Konstruktor zugewiesen. Dieses gibt die Vererbung von Eigenschaften und Werten in JavaScript her. Einige Feinheiten dieses Prozesses werden in <a href="#Eigenschaftsvererbung_erneut_besuchen">Eigenschaftsvererbung erneut besuchen</a> behandelt.</p>
+
+<p>Weil diese Konstruktoren keine instanzspezifischen Werte bereitstellen können, sind diese Informationen generisch. Die Eigenschaftswerte sind die Standardwerte, die bei der Erstellung aller mit <code>WorkerBee</code> erstellten Objekt genutzt werden. Man kann natürlich die Werte jeder Eigenschaft ändern. So kann man spezifische Informationen für <code>mark</code> wie folgt vergeben:</p>
+
+<pre class="brush: js notranslate">mark.name = 'Doe, Mark';
+mark.dept = 'admin';
+mark.projects = ['navigator'];</pre>
+
+<h3 id="Eigenschaften_hinzufügen">Eigenschaften hinzufügen</h3>
+
+<p>In JavaScript kann man zu jedem Objekt zur Laufzeit Eigenschaften hinzufügen. Man ist nicht nur auf die unterstützten Eigenschaften der Konstruktorfunktion angewiesen. Um eine Eigenschaft spezifisch zu einem einfachen Objekt hinzuzufügen, kann man diese wie folgt dem Objekt zuweisen:</p>
+
+<pre class="brush: js notranslate">mark.bonus = 3000;
+</pre>
+
+<p>Jetzt hat das <code>mark</code> Objekt eine <code>bonus</code> Eigenschaft, aber kein anderer <code>WorkerBee</code> hat diese Eigenschaft.</p>
+
+<p>Wenn man eine neue Eigenschaft zu einem Objekt hinzufügt, welches als Prototyp für eine Konstruktorfunktion benutzt wird, fügt man die Eigenschaft zu allen Objekten hinzu, die Eigenschaften von diesem Prototypen erben. Zum Beispiel kann man eine <code>specialty</code> Eigenschaft zu allen <code>employee</code>s mit dem folgenden Statement hinzufügen:</p>
+
+<pre class="brush: js notranslate">Employee.prototype.specialty = 'none';
+</pre>
+
+<p>Nach der Ausführung dieses Statements durch JavaScript, hat das <code>mark</code> Objekt auch die <code>specialty</code> Eigenschaft mit dem Wert <code>"none"</code>. Die folgende Grafik zeigt den Effekt des Hinzufügens dieser Eigenschaft zum <code>Employee</code> Prototyp und das Überschreiben des <code>Engineer</code> Prototypen.</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/4422/=figure8.4.png" style="height: 519px; width: 833px;"><br>
+ <small><strong>Eigenschaften hinzufügen</strong></small></p>
+
+<h2 id="Flexiblere_Konstruktoren">Flexiblere Konstruktoren</h2>
+
+<p>Mit den bisher gezeigten Konstruktorfunktionen kann man beim Erstellen einer Instanz keine Eigenschaftswerte angeben. Wie bei Java kann man Konstruktoren Argumente zum Initialisieren von Eigenschaftswerten für Instanzen übergeben. Die folgende Abbildung zeigt eine Möglichkeit, dies zu tun.</p>
+
+<p><img alt="" class="internal" id="figure8.5" src="/@api/deki/files/4423/=figure8.5.png" style="height: 481px; width: 1012px;"><br>
+ <small><strong>Spezifizieren von Eigenschaften in einem Konstruktor, Teil 1</strong></small></p>
+
+<p>Die folgende Tabelle zeigt die Java und JavaScript Definitionen für diese Objekte.</p>
+
+<div class="twocolumns">
+<h4 id="JavaScript_4">JavaScript</h4>
+
+<h4 id="Java_4">Java</h4>
+</div>
+
+<div class="twocolumns">
+<pre class="brush: js notranslate">function Employee(name, dept) {
+  this.name = name || '';
+  this.dept = dept || 'general';
+}
+</pre>
+
+<pre class="brush: java notranslate">public class Employee {
+   public String name;
+   public String dept;
+   public Employee () {
+      this("", "general");
+   }
+   public Employee (String name) {
+      this(name, "general");
+   }
+   public Employee (String name, String dept) {
+      this.name = name;
+      this.dept = dept;
+   }
+}
+</pre>
+</div>
+
+<div class="twocolumns">
+<pre class="brush: js notranslate">function WorkerBee(projs) {
+
+ this.projects = projs || [];
+}
+WorkerBee.prototype = new Employee;
+</pre>
+
+<pre class="brush: java notranslate">public class WorkerBee extends Employee {
+   public String[] projects;
+   public WorkerBee () {
+      this(new String[0]);
+   }
+   public WorkerBee (String[] projs) {
+      projects = projs;
+   }
+}
+</pre>
+</div>
+
+<div class="twocolumns">
+<pre class="brush: js notranslate">
+function Engineer(mach) {
+   this.dept = 'engineering';
+   this.machine = mach || '';
+}
+Engineer.prototype = new WorkerBee;
+</pre>
+
+<pre class="brush: java notranslate">public class Engineer extends WorkerBee {
+   public String machine;
+   public Engineer () {
+      dept = "engineering";
+      machine = "";
+   }
+   public Engineer (String mach) {
+      dept = "engineering";
+      machine = mach;
+   }
+}
+</pre>
+</div>
+
+<p>Diese JavaScript Definitionen benutzen eine spezielle Syntax für das Setzen von Standardwerten:</p>
+
+<pre class="brush: js notranslate">this.name = name || '';
+</pre>
+
+<p>Der logische ODER Operator (<code>||</code>) von JavaScript wertet das erste Argument aus. Wenn das Argument zu <code>true</code> konvertiert wird, gibt der Operator dieses zurück. Andernfalls wird der Wert des zweiten Arguments zurückgegeben. Demnach prüft diese Zeile Code, ob <code>name</code> einen nützlichen Wert für die <code>name</code> Eigenschaft hat. Wenn das der Fall ist, wird <code>this.name</code> auf diesen Wert gesetzt. Andernfalls wird <code>this.name</code> auf den leeren String gesetzt. Dieses Kapitel nutzt diese Syntax aus Gründen der Kürze; es kann jedoch auf den ersten Blick verwirrend sein.</p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Das kann möglicherweise nicht wie erwartet funktionieren, wenn der Konstruktorfunktion Argumente übergeben werden, welche zu <code><code>false</code></code> konvertiert werden (wie <code>0</code> (null) und der leere String (<code>""</code>)). In diesen Fällen wird der Standardwert benutzt.</p>
+</div>
+
+<p>Mit dieser Definition, kann man beim Erstellen einer Objektinstanz spezifische Werte für die lokal definierten Eigenschaften benutzen. Man kann das folgende Statement nutzen, um einen neuen <code>Engineer</code> zu erstellen:</p>
+
+<pre class="brush: js notranslate">var jane = new Engineer('belau');
+</pre>
+
+<p><code>Jane</code>'s Eigenschaften sind jetzt:</p>
+
+<pre class="brush: js notranslate">jane.name == '';
+jane.dept == 'engineering';
+jane.projects == [];
+jane.machine == 'belau';
+</pre>
+
+<p>Zu beachten ist, dass man mit diesen Definitionen keinen Initialwert für vererbte Eigenschaft wie <code>name</code> spezifizieren kann. Wenn man einen Initialwert für vererbe Eigenschaften in JavaScript spezifizieren möchte, muss man mehr Code zum Konstruktor hinzufügen.</p>
+
+<p>Bisher hat die Konstruktorfunktion ein generisches Objekt erstellt und dann lokale Eigenschaften und Werte für das neue Objekt angegeben. Man kann den Konstruktor weitere Eigenschaften hinzufügen lassen, indem Sie die Konstruktorfunktion für ein Objekt in der Prototypkette direkt aufrufen. Die folgende Abbildung zeigt diese neuen Definitionen.</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/4430/=figure8.6.png" style="height: 534px; width: 1063px;"><br>
+ <small><strong>Spezifizieren von Eigenschaften in einem Konstruktor, Teil 2</strong></small></p>
+
+<p>Sehen wir uns eine dieser Definitionen genauer an. Hier ist die neue Definition für den <code>Engineer</code>-Konstruktor:</p>
+
+<pre class="brush: js notranslate">function Engineer(name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, 'engineering', projs);
+  this.machine = mach || '';
+}
+</pre>
+
+<p>Angenommen, man erstellt ein neues <code>Engineer</code>-Objekt wie folgt:</p>
+
+<pre class="brush: js notranslate">var jane = new Engineer('Doe, Jane', ['navigator', 'javascript'], 'belau');
+</pre>
+
+<p>JavaScript folgt folgenden Schritten:</p>
+
+<ol>
+ <li>Der <code>new</code> Operator erstellt ein generisches Objekt und setzt die <code>__proto__</code> EIgenschaft auf <code>Engineer.prototype</code>.</li>
+ <li>Der <code>new</code> Operator übergibt das neue Objekt dem <code>Engineer</code> Konstruktor als Wert des <code>this</code> Schlüsselwortes.</li>
+ <li>Der Konstruktor erstellt eine neue Eigenschaft namens <code>base</code> für dieses Objekt und weist dieser den Wert des <code>WorkerBee</code> Konstruktors zu. Das macht den <code>WorkerBee</code> Konstruktor zu einer Methode des <code>Engineer</code> Objektes. Der Name der <code>base</code> Eigenschaft ist nicht festgelegt. Man kann jeden legalen Eigenschaftsnamen nutzen; <code>base</code> erinnert einfach an den Zweck.</li>
+ <li>Der Konstruktor ruft die <code>base</code> Methode auf, übergibt als Argumente zwei der Argumente des Konstruktors (<code>"Doe, Jane"</code> und <code>["navigator", "javascript"]</code>) und zudem den String <code>"engineering"</code>. Der explizite Einsatz von <code>"engineering"</code> im Konstruktor zeigt, dass alle <code>Engineer</code> Objekte den selben Wert für dei geerbte <code>dept</code> Eigenschaft haben und dieser Wert den vererbten Wert von <code>Employee</code> überschreibt.</li>
+ <li>Weil <code>base</code> eine Methode von <code>Engineer</code> ist, weshalb JavaScrip beim Aufruf von <code>base</code> das Schlüsselwort <code>this</code> an das erstellte Objekt aus Schritt 1 bindet. Somit übergibt die <code>WorkerBee</code> Funktion die <code>"Doe, Jane"</code> und <code>"engineering"</code> Argumente zu der <code>Employee</code> Konstruktorfunktion. Nach der Rückgabe der <code>Employee</code> Konstruktorfunktion verwendet die <code>WorkerBee</code> Funktion das restliche Argument, um die <code>projects</code> Eigenschaft zu setzen.</li>
+ <li>Nach der Rückgabe der <code>base</code> Methode initialisiert der <code>Engineer</code> Konstruktor die Objekteigenschaft <code>machine</code> mit <code>"belau"</code>.</li>
+ <li>Nach der Rückgabe des Konstruktors weist JavaScript das neue Objekte, der <code>jane</code> Variablen zu.</li>
+</ol>
+
+<p>Man kann denken, dass man, nachdem der <code>WorkerBee</code>-Konstruktor innerhalb des <code>Engineer</code>-Konstruktors aufgerufen wird, die Vererbung für das <code>Engineer</code>-Objekte entsprechend eingerichtet hat. Das ist nicht der Fall. Der Aufruf des <code>WorkerBee</code> Konstruktors stellt sicher, dass ein <code>Engineer</code> Objekt mit den Eigenschaften beginnt, die in allen aufgerufenen Konstruktorfunktionen angegeben sind. Wenn jedoch später eine Eigenschaft zum <code>Employee</code> oder <code>WorkerBee</code> Prototyp hinzugefügt wird, wird diese Eigenschaft nicht von <code>Engineer</code> Objekt geerbt. Nimmt man zum Beispiel folgende Statements an:</p>
+
+<pre class="brush: js notranslate">function Engineer(name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, 'engineering', projs);
+  this.machine = mach || '';
+}
+var jane = new Engineer('Doe, Jane', ['navigator', 'javascript'], 'belau');
+Employee.prototype.specialty = 'none';
+</pre>
+
+<p>Das <code>jane</code> Objekt erbt nicht die <code>specialty</code> Eigenschaft. Man muss explizit den Prototypen einstellen, um dynamische Vererbung sicherzustellen. Nimmt man stattdessen folgende Statements an:</p>
+
+<pre class="brush: js notranslate">function Engineer(name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, 'engineering', projs);
+  this.machine = mach || '';
+}
+Engineer.prototype = new WorkerBee;
+var jane = new Engineer('Doe, Jane', ['navigator', 'javascript'], 'belau');
+Employee.prototype.specialty = 'none';
+</pre>
+
+<p>Jetzt ist der Wert der <code>specialty</code> Eigenschaft des <code>jane</code> Objektes <code>"none"</code>.</p>
+
+<p>Ein anderer Weg wür Vererbung ist der Einsatz der <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="en-US/docs/JavaScript/Reference/Global Objects/Function/call">call()</a></code> / <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="en-US/docs/JavaScript/Reference/Global Objects/Function/apply"><code>apply()</code></a> Methoden. Die folgenden Beispiele sind äquivalent:</p>
+
+<div class="twocolumns">
+<pre class="brush: js notranslate">function Engineer(name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, 'engineering', projs);
+  this.machine = mach || '';
+}
+</pre>
+
+<pre class="brush: js notranslate">function Engineer(name, projs, mach) {
+  WorkerBee.call(this, name, 'engineering', projs);
+  this.machine = mach || '';
+}
+</pre>
+</div>
+
+<p>Der Einsatz von javascript <code>call()</code> Methode ergibt ein sauberere Implementierung, weil <code>base</code> nicht mehr benötigt wird.</p>
+
+<h2 id="Eigenschaftsvererbung_erneut_besuchen">Eigenschaftsvererbung erneut besuchen</h2>
+
+<p>Im vorangegangenen Abschnitten wurde beschrieben, wie JavaScript Konstruktoren und Prototypen Hierarchien und Vererbung bereitstellt. Dieser Abschnitt diskutiert einige Feinheiten, die in der vorherigen Diskussion nicht unbedingt ersichtlich waren.</p>
+
+<h3 id="Lokale_versus_vererbte_Werte">Lokale versus vererbte Werte</h3>
+
+<p>Wenn man auf eine Objekteigenschaft zugreift, führt JavaScript diese Schritte, wie vorhin in dem Kapitel beschrieben, durch:</p>
+
+<ol>
+ <li>Prüft, ob der Wert lokal existiert. Ist das der Fall, wird er zurückgegeben.</li>
+ <li>Wenn kein lokaler Wert vorhanden ist, wird die Prototypenkette (über die <code>__proto__</code> Eigenschaft) geprüft.</li>
+ <li>Wenn ein Objekt in der Prototypenkette einen Wert für die spezifizierte Eigenschaft hat, wird dieser zurückgegeben.</li>
+ <li>Wenn keine solche Eigenschaft gefunden wird, hat das Objekt diese Eigenschaft nicht.</li>
+</ol>
+
+<p>Das Resultat dieser Schritte hängt davon ab, wie Dinge im Code definiert sind. Das originale Beispiel hat diese Definition:</p>
+
+<pre class="brush: js notranslate">function Employee() {
+  this.name = '';
+  this.dept = 'general';
+}
+
+function WorkerBee() {
+  this.projects = [];
+}
+WorkerBee.prototype = new Employee;
+</pre>
+
+<p>Nimmt man mit diesen Definitionen an, man erstellt <code>amy</code> als eine Instanz von <code>WorkerBee</code> mit folgendem Statement:</p>
+
+<pre class="brush: js notranslate">var amy = new WorkerBee;
+</pre>
+
+<p>Das <code>amy</code> Objekt hat eine lokale Eigenschaft, <code>projects</code>. Die Werte der <code>name</code> und <code>dept</code> Eigenschaften sind nicht lokal in <code>amy</code> und werden über die Objekteigenschaft <code>__proto__</code> von <code>amy</code> erreicht. Deshalb hat <code>amy</code> diese Eigenschaftswerte:</p>
+
+<pre class="brush: js notranslate">amy.name == '';
+amy.dept == 'general';
+amy.projects == [];
+</pre>
+
+<p>Nimmt man jetzt an, man ändert den Wert der <code>name</code> Eigenschaft in dem <code>Employee</code> Prototyp:</p>
+
+<pre class="brush: js notranslate">Employee.prototype.name = 'Unknown';
+</pre>
+
+<p>Auf den ersten Blick erwartet man, dass der neue Wert an alle Instanzen von <code>Employee</code> propagiert wird. Jedoch ist das falsch.</p>
+
+<p>Wenn man irgendeine Instanz des <code>Employee</code> Objektes erstellt, bekommt die Instanz einen <strong>lokalen Wert</strong> für die <code>name</code> Eigenschaft (der leere String). Das bedeutet, wenn man den <code>WorkerBee</code> Prototyp mit einem neuen <code>Employee</code> Objekt einstellt, dass <code>WorkerBee.prototype</code> einen lokalen Wert für die <code>name</code> Eigenschaft hat. Wenn demnach JavaScript nach der <code>name</code> Eigenschaft im <code>amy</code> Objekt sucht (eine Instanz von <code>WorkerBee</code>), wird der lokale Wert der Eigenschaft <code>WorkerBee.prototype</code> gefunden. Demnach wird nicht tiefer in der Kette in <code>Employee.prototype</code> gesucht.</p>
+
+<p>Wenn man den Wert einer Objekteigenschaft zur Laufzeit ändert möchte und den neuen Wert für alle Nachkommenschaften dieses Objektes haben möchte, kann man die Eigenschaft nicht in der Konstruktorfunktion des Objektes definieren. Stattdessen fügt man sie zu dem Konstruktor assoziierten Prototyp hinzu. Angenommen man ändert zum Beispiel deb vorherigen Code wie folgt:</p>
+
+<pre class="brush: js notranslate">function Employee() {
+  this.dept = 'general';    // Note that this.name (a local variable) does not appear here
+}
+Employee.prototype.name = '';    // A single copy
+
+function WorkerBee() {
+  this.projects = [];
+}
+WorkerBee.prototype = new Employee;
+
+var amy = new WorkerBee;
+
+Employee.prototype.name = 'Unknown';
+</pre>
+
+<p>In diesem Fall wird die <code>name</code> Eigenschaft von <code>amy</code> <code>"Unknown"</code>.</p>
+
+<p>Das Beispiel zeigt, dass wenn man Standardwerte für Objekteigenschaften haben möchte und zudem dass diese zur Laufzeit geändert werden können, muss man die Eigenschaft im Konstruktorprototypen setzen und nicht in der Konstruktorfunktion.</p>
+
+<h3 id="Instanzbeziehungen_prüfen">Instanzbeziehungen prüfen</h3>
+
+<p>Das Nachgucken von Eigenschaften in JavaScript prüft erst die eigenen Eigenschaften und wenn die Eigenschaft dort nicht ist die Eigenschaften der speziellen Eigenschaft <code>__proto__</code>. Das setzt sich rekursiv fort; der Prozess wird "nachschlagen in der Prototypenkette" genannt.</p>
+
+<p>Die spezielle Eigenschaft <code>__proto__</code> wird beim erstellen des Objektes gesetzt; sie wird auf den Wert der <code>prototype</code> Eigenschaft des Konstruktors gesetzt. Deshalb erstellt der Ausdruck <code>new Foo()</code> ein Objekt mit <code>__proto__ == <code class="moz-txt-verticalline">Foo.prototype</code></code>. Folglich ändert die Änderung der <code class="moz-txt-verticalline">Foo.prototype</code> Eigenschaft alle Nachschlage Prozesse für alle Objekte, die mit <code>new Foo()</code> erstellt wurden.</p>
+
+<p>Alle Objekte haben eine <code>__proto__</code> Objekteigenschaft (außer <code>Object</code>); Alle Funktionen haben eine <code>prototype</code> Objekteigenschaft. So können Objekte über 'Prototypenvererbung' mit anderen Objekten verbunden werden. Man kann auf Vererbung testen, indem <code>__proto__</code> eines Objekts mit einer <code>prototype</code> Objekt einer Funktion verglichen wird. JavaScript hat dafür eine Kurzschreibweise: der <code>instanceof</code> Operator prüft ein Objekt gegen eine Funktion und gibt <code>true</code> zurück, wenn das Objekt von dem Funktionsprototyp erbt. Zum Beispiel:</p>
+
+<pre class="brush: js notranslate">var f = new Foo();
+var isTrue = (f instanceof Foo);</pre>
+
+<p>Für ein detailierteres Beispiel nehmen wir an, dass wir die gleichen Definition wie in <a href="#Eigenschaften_vererben">Eigenschaften vererben</a> haben. Ein <code>Engineer</code> wird wie folgt erstellt:</p>
+
+<pre class="brush: js notranslate">var chris = new Engineer('Pigman, Chris', ['jsd'], 'fiji');
+</pre>
+
+<p>Mit diesem Objekt, sind alle folgenden Statements <code>true</code>:</p>
+
+<pre class="brush: js notranslate">chris.__proto__ == Engineer.prototype;
+chris.__proto__.__proto__ == WorkerBee.prototype;
+chris.__proto__.__proto__.__proto__ == Employee.prototype;
+chris.__proto__.__proto__.__proto__.__proto__ == Object.prototype;
+chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null;
+</pre>
+
+<p>Damit kann man eine <code>instanceOf</code> Funktion wie folgt schreiben:</p>
+
+<pre class="brush: js notranslate">function instanceOf(object, constructor) {
+   object = object.__proto__;
+   while (object != null) {
+      if (object == constructor.prototype)
+         return true;
+      if (typeof object == 'xml') {
+        return constructor.prototype == XML.prototype;
+      }
+      object = object.__proto__;
+   }
+   return false;
+}
+</pre>
+
+<div class="note"><strong>Hinweis:</strong> Die obige Implementierung überprüft den Typ des Objekts gegen "xml", um eine Eigenart der Darstellung von XML-Objekten in neueren JavaScript-Versionen zu umgehen. die wesentlichen Details sind in {{bug(634150)}}, beschrieben.</div>
+
+<p>Der Einsatz der oben definierten <code>instanceOf</code> Funktion führt bei folgenden Ausdrücken zu <code>true</code>:</p>
+
+<pre class="brush: js notranslate">instanceOf(chris, Engineer)
+instanceOf(chris, WorkerBee)
+instanceOf(chris, Employee)
+instanceOf(chris, Object)
+</pre>
+
+<p>Jedoch ist der folgende Ausdruck <code>false</code>:</p>
+
+<pre class="brush: js notranslate">instanceOf(chris, SalesPerson)
+</pre>
+
+<h3 id="Globale_Informationen_in_Konstruktoren">Globale Informationen in Konstruktoren</h3>
+
+<p>Wenn man einen Konstruktor erstellt, muss man vorsichtig sein, wenn man globale Informationen im Konstruktor einstellt. Nimmt man zum Beispiel an, man möchte eine eindeutige ID, die automatisch für jeden neuen <code>employee</code> zugewiesen wird, kann man die folgende Definition für <code>Employee</code> benutzen:</p>
+
+<pre class="brush: js notranslate">var idCounter = 1;
+
+function Employee(name, dept) {
+   this.name = name || '';
+   this.dept = dept || 'general';
+   this.id = idCounter++;
+}
+</pre>
+
+<p>Wenn man mit dieser Definition ein neuen <code>Employee</code> erstellt, weist der Konstruktor die nächste ID in der Sequenz zu und inkrementiert dann den globalen ID-Zähler. Wenn die nächsten Statemants die folgenden sind, so ist <code>victoria.id == 1</code> und <code>harry.id == 2</code>:</p>
+
+<pre class="brush: js notranslate">var victoria = new Employee('Pigbert, Victoria', 'pubs');
+var harry = new Employee('Tschopik, Harry', 'sales');
+</pre>
+
+<p>Auf den ersten Blick ist das super. Jedoch wird <code>idCounter</code> jedes mal, wenn ein <code>Employee</code> erstellt wird, wofür auch immer, inkrementiert. Wenn man eine <code>Employee</code> Hierarchie wie im Kapitel oben gezeigt, so wird der <code>Employee</code> Konstruktor für jedes einstellen des Prototypen aufgerufen. Angenommen man hat den folgenden Code:</p>
+
+<pre class="brush: js notranslate">var idCounter = 1;
+
+function Employee(name, dept) {
+   this.name = name || '';
+   this.dept = dept || 'general';
+   this.id = idCounter++;
+}
+
+function Manager(name, dept, reports) {...}
+Manager.prototype = new Employee;
+
+function WorkerBee(name, dept, projs) {...}
+WorkerBee.prototype = new Employee;
+
+function Engineer(name, projs, mach) {...}
+Engineer.prototype = new WorkerBee;
+
+function SalesPerson(name, projs, quota) {...}
+SalesPerson.prototype = new WorkerBee;
+
+var mac = new Engineer('Wood, Mac');
+</pre>
+
+<p>Angenommen die Definitionen lassen hier die <code>base</code> Eigenschaft weg und rufen den Konstruktor oberhalb in der Prototypenkette auf. In diesem Fall, bekommt das <code>mac</code> Objekt die id 5.</p>
+
+<p>Abhängig von der Anwendung ist es sinnvoll oder auch nicht, dass der Zähler an diesen Stellen extra hochzählt. Wenn man an dem exakten Wert des Zählers interessiert ist, ist eine mögliche Lösung den folgenden Konstruktor zu nutzen:</p>
+
+<pre class="brush: js notranslate">function Employee(name, dept) {
+   this.name = name || '';
+   this.dept = dept || 'general';
+   if (name)
+      this.id = idCounter++;
+}
+</pre>
+
+<p>Wenn eine Instanz von <code>Employee</code> erstellt wird, der als Prototyp genutzt wird, übergibt man keine Argumente an den Konstruktor. Benutzt man diese Definition des Konstruktors, wird keine id vergeben und der Zäher nicht aktualisiert, wenn dem Konstruktor keine Argumente übergeben werden. Daraus folgt, dass man einem <code>Employee</code> einen Namen geben muss, damit er eine id erhält. In diesem Beispiel ist <code>mac.id == 1</code>.</p>
+
+<p>Alternativ kann man <code>WorkerBee</code> eine Kopie des <code>Employee</code> Prototypenobjektes zuweisen:</p>
+
+<pre class="brush: js notranslate">WorkerBee.prototype = Object.create(Employee.prototype);
+// instead of WorkerBee.prototype = new Employee
+</pre>
+
+<h3 id="Keine_Mehrfachvererbung">Keine Mehrfachvererbung</h3>
+
+<p>Einige objektorientierte SPrachen erlauben Mehrfachvererbung. Das bedeutet, dass ein Objekt die Eigenschaften und Werte von mehreren Elternobjekte erben kann. JavaScript unterstützt keine Mehrfachvererbung.</p>
+
+<p>Vererbung von Eigenschafteswerten funktioniert zu JavaScripts Laufzeit durch das Suchen in der Prototypenkette eines Objektes. Weil ein Objekt ein einzigen Prototypen hat, kann JavaScript nicht dynamisch von mehr als einer Prototypenkette erben.</p>
+
+<p>In JavaScript kann eine Konstruktorfunkton mehrere andere Konstruktorfunktionen in sich aufrufen. Das gibt die Illusion von Mehrfachvererbung. Zum Beispiel die folgenden Statements:</p>
+
+<pre class="brush: js notranslate">function Hobbyist(hobby) {
+   this.hobby = hobby || 'scuba';
+}
+
+function Engineer(name, projs, mach, hobby) {
+   this.base1 = WorkerBee;
+   this.base1(name, 'engineering', projs);
+   this.base2 = Hobbyist;
+   this.base2(hobby);
+   this.machine = mach || '';
+}
+Engineer.prototype = new WorkerBee;
+
+var dennis = new Engineer('Doe, Dennis', ['collabra'], 'hugo');
+</pre>
+
+<p>Vorausgesetzt wird, die Definition von <code>WorkerBee</code> früher in diesem Kapitel. In diesem Fall hat das <code>dennis</code> Objekt die folgenden Eigenschaften:</p>
+
+<pre class="brush: js notranslate">dennis.name == 'Doe, Dennis';
+dennis.dept == 'engineering';
+dennis.projects == ['collabra'];
+dennis.machine == 'hugo';
+dennis.hobby == 'scuba';
+</pre>
+
+<p><code>dennis</code> hat also die <code>hobby</code> Eigenschaften des <code>Hobbyist</code> Konstruktors bekommen. Setzt man jetzt noch voraus, dass danach Eigenschaften zum Konstruktorprototypen <code>Hobbyist</code> hinzugefügt werde:</p>
+
+<pre class="brush: js notranslate">Hobbyist.prototype.equipment = ['mask', 'fins', 'regulator', 'bcd'];
+</pre>
+
+<p>Das <code>dennis</code> Objekt erbt diese neue Eigenschaft nicht.</p>
+
+<div>{{PreviousNext("Web/JavaScript/Guide/Mit_Objekten_arbeiten", "Web/JavaScript/Guide/Using_promises")}}</div>
diff --git a/files/de/web/javascript/guide/funktionen/index.html b/files/de/web/javascript/guide/funktionen/index.html
new file mode 100644
index 0000000000..3eeeb4f4e5
--- /dev/null
+++ b/files/de/web/javascript/guide/funktionen/index.html
@@ -0,0 +1,657 @@
+---
+title: Funktionen
+slug: Web/JavaScript/Guide/Funktionen
+tags:
+  - Beginner
+  - Functions
+  - Guide
+  - JavaScript
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Guide/Functions
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Schleifen_und_Iterationen", "Web/JavaScript/Guide/Ausdruecke_und_Operatoren")}}</div>
+
+<p class="summary">Funktionen sind ein Grundbaustein in JavaScript. Eine Funktion ist eine Prozedur - eine Reihe von Anweisungen, um eine Aufgabe auszuführen oder eine Wert auszurechnen. Um Funktionen zu verwenden, müssen diese im Scope (Gültigkeitsbereich) deklariert werden, in dem sie ausgeführt werden soll.</p>
+
+<p>Siehe ebenfalls in der <a href="/de/docs/Web/JavaScript/Reference/Functions">ausführlichen Referenz über JavaScript Funktionen</a> nach, um noch mehr Detail zu erfahren.</p>
+
+<h2 id="Funktionen_definieren">Funktionen definieren</h2>
+
+<h3 id="Funktionsdeklaration">Funktionsdeklaration</h3>
+
+<p>Eine <strong>Funktionsdefinition</strong> (auch <strong>Funktionsdeklaration </strong>oder <strong>Funktionsanweisung</strong> genannt) besteht aus dem Schlüsselwort <a href="/de/docs/Web/JavaScript/Reference/Statements/function" title="function"><code>function</code></a>, gefolgt von:</p>
+
+<ul>
+ <li>Den Namen der Funktion.</li>
+ <li>Eine Liste von Parametern, die in runden Klammern geschrieben sind und durch Kommas getrennt sind.</li>
+ <li>Die JavaScript Anweisungen, die durch die Funktion definiert werden und innerhalb von geschweiften Klammern steht<code>.</code></li>
+</ul>
+
+<p>Das folgende Beispiel definiert eine Funktion mit dem Namen <code>square</code>:</p>
+
+<pre class="brush: js">function square(number) {
+  return number * number;
+}
+</pre>
+
+<p>Die Funktion <code>square </code>nimmt einen Parameter entgegen, welcher <code>number</code> heißt. Die Funktion besteht aus einer Anweisung, die besagt, dass der Parameter der Funktion (das ist <code>number</code>), multipliziert mit sich selbst, zurückgegeben werden soll. Dabei gibt das  <a href="/de/docs/Web/JavaScript/Reference/Statements/return" title="return"><code>return</code></a> Statement an, welcher Wert von der Funktion zurückzugeben wird.</p>
+
+<pre class="brush: js">return number * number;
+</pre>
+
+<p>Bei Primitive Parameter, wie Zahlen, wird der Funktionen <strong>der Wert</strong> übergeben. Werte, die der Funktion übergeben wurden und innerhalb der Funktion geändert werden, ändert den Wert zwar innerhalb der Funktion, <strong>aber nicht global oder in der aufrufenden Funktion</strong>.</p>
+
+<p>Wird ein Objekt als Parameter übergeben (z. B. ein nicht primitiver Wert wie ein  {{jsxref("Array")}} oder ein selbst definiertes Objekt) und die Funktion ändert die Objekteigenschaften, so sind die Änderungen außerhalb der Funktion sichtbar, wie im folgendem Beispiel veranschaulicht wird:</p>
+
+<pre class="brush: js">function myFunc(theObject) {       //Funktiondekleration
+  theObject.make = 'Toyota';
+}
+
+var mycar = {make: 'Honda', model: 'Accord', year: 1998};
+var x, y;
+
+x = mycar.make;  // x bekommt den Wert "Honda"
+
+myFunc(mycar);
+y = mycar.make;  // y  bekommt den Wert "Toyota"
+                 // (die make Eigenschaft wurde in der Funktion geändert)</pre>
+
+<h3 id="Funktionsausdrücke">Funktionsausdrücke</h3>
+
+<p>Während die Funktionsdeklarationen oben syntaktisch ein Statement sind, kann eine Funktion auch durch <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/function">Funktionsausdrücke</a> erstellt werde. Derartige Funktionen können auch <strong>anonym</strong> sein; denn Funktionen benötigten keinen Namen. So kann zum Beispiel die Funktion <code>square</code> auch so definiert werden:</p>
+
+<pre class="brush: js">var square = function(number) { return number * number; };
+var x = square(4); // x bekommt den Wert 16</pre>
+
+<p>Jedoch kann die Funktion auch einen Name haben, um sich innerhalb der Funktion selbst aufzurufen oder die Funktion im Stack Traces des Debuggers zu identifizieren zu können:</p>
+
+<pre class="brush: js">var factorial = function fac(n) { return n &lt; 2 ? 1 : n * fac(n - 1); };
+
+console.log(factorial(3));
+</pre>
+
+<p>Funktionsausdrücke sind praktisch, um Funktionen als ein Argument einer anderen Funktion zu übergeben. Das folgende Beispiel zeigt die Definition einer <code>map</code> Funktion, die eine Funktion als ersten Parameter erwartet:</p>
+
+<pre class="brush: js">function map(f, a) {
+  var result = [],i; // erstellt ein neues Array
+  for (i = 0; i != a.length; i++)
+    result[i] = f(a[i]);
+  return result;
+}
+</pre>
+
+<p>Im folgenden Quelltext wird einer Funktion eine Funktion übergeben, welche zuvor durch einen Funktions-Ausdruck definiert wurde. Diese Funktion wird für jedes Element in einem Array (zweiter Parameter) ausgeführt.</p>
+
+<pre class="brush: js">function map(f, a) {
+  var result = []; // erstellt ein neues Array
+  var i;
+  for (i = 0; i &lt; a.length; i++) {
+    result[i] = f(a[i]);
+  }
+  return result;
+}
+var f = function(x) {
+  return x * x * x;
+}
+var numbers = [0, 1, 2, 5, 10];
+var cube = map(f,numbers);
+console.log(cube);
+</pre>
+
+<p>gibt [0, 1, 8, 125, 1000]  zurück.</p>
+
+<p>In JavaScript kann eine Funktion definiert werden, wenn eine Bedingung erfüllt ist. Zum Beispiel wird <code>myFunc</code> nur definiert, wenn <code>num </code>gleich <code>0 </code>ist:</p>
+
+<pre class="brush: js">var myFunc;
+if (num === 0) {
+  myFunc = function(theObject) {
+    theObject.make = 'Toyota';
+  }
+}</pre>
+
+<p>Im Unterschied zu den hier gezeigten Funktionsdeklarationen, kann man auch den {{jsxref("Function")}} Konstruktor verwenden, um eine Funktion von einem String zur Laufzeit zu erstellen, ähnlich der {{jsxref("eval()")}} Funktion.</p>
+
+<p>Eine <strong>Methode</strong> ist eine Funktion, die Eigenschaft eines Objektes ist. Mehr Informationen über Objekt und Methoden sind im Artikel "<a href="/de/docs/Web/JavaScript/Guide/Mit_Objekten_arbeiten">Mit Objekten arbeiten</a>" zu finden.</p>
+
+<h2 id="Aufruf_von_Funktionen">Aufruf von Funktionen</h2>
+
+<p>Das Definieren einer Funktion führen diese noch nicht aus. Die Definition gibt der Funktion lediglich einen Namen und beschreibt was geschehen soll, wenn die Funktion aufgerufen wird. Erst der <strong>Aufruf</strong> ermöglicht es die Aktionen mit den angegebenen Parametern durchzuführen. Zum Beispiel wird die vorher definierte Funktion <code>square</code> so aufgerufen:</p>
+
+<pre class="brush: js">square(5);
+</pre>
+
+<p>Es wird die Funktion mit dem Argument 5 aufgerufen. Die Funktion führt ihre Anweisungen aus und gibt den Wert 25 zurück.</p>
+
+<p>Funktionen müssen im Scope (Gültigkeitsbereich) sein, wenn sie aufgerufen werden, können jedoch auch erst später definiert werden, wie im folgenden Beispiel:</p>
+
+<pre class="brush: js">console.log(square(5));
+/* ... */
+function square(n) { return n * n; }
+</pre>
+
+<p>Der Scope einer Funktion ist die Funktion in der sie deklariert wird, oder das gesamte Programm, falls sie auf oberster Ebene deklariert wird.</p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Nur die oben angegebene Syntax für Funktionen wird funktionieren (<code>function funcName(){}</code>). Der folgende Code funktioniert nicht. Das bedeutet, dass das nur mit Funktionsdeklarationen funktioniert aber nicht mit Funktionsausdrücken.</p>
+</div>
+
+<pre class="brush: js example-bad">console.log(square); // square ist mit dem Initialwert undefined gehoisted.
+console.log(square(5)); // TypeError: square is not a function
+var square = function(n) {
+  return n * n;
+}
+</pre>
+
+<p>Die Argumente einer Funktion sind nicht auf Strings und Nummern limitiert, denn es können auch ganze Objekte übergeben werden. Die <code>showProps()</code> Funktion (definiert in Beitrag "<a href="/de/docs/Web/JavaScript/Guide/Mit_Objekten_arbeiten#Objekte_und_Eigenschaften" title="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Working_with_Objects#Objects_and_Properties">Arbeiten mit Objekten</a>") ist ein Beispiel für einer Funktion, die Objekte als Argument entgegennimmt.</p>
+
+<p>Eine Funktion kann sich selbst Aufrufen. Zum Beispiel berechnet folgende Funktion die Fakultät rekursiv:</p>
+
+<pre class="brush: js">function factorial(n) {
+  if ((n === 0) || (n === 1))
+    return 1;
+  else
+    return (n * factorial(n - 1));
+}
+</pre>
+
+<p>Die Fakultät von 1 bis 5 kann wie folgt berechnet werden:</p>
+
+<pre class="brush: js">var a, b, c, d, e;
+a = factorial(1); // a wird der Wert 1 zugewiesen
+b = factorial(2); // b wird der Wert 2 zugewiesen
+c = factorial(3); // c wird der Wert 6 zugewiesen
+d = factorial(4); // d wird der Wert 24 zugewiesen
+e = factorial(5); // e wird der Wert 120 zugewiesen
+</pre>
+
+<p>Es gibt aber noch weitere Möglichkeiten Funktionen aufzurufen. Oftmals gibt es Fälle, in denen Funktionen dynamisch aufgerufen werden müssen, die Anzahl der Argumente variiert oder der Kontext einer Funktion zur Laufzeit gesetzt werden muss. Das zieht nach sich, dass Funktionen selbst Objekte sind, die Methoden haben (siehe das {{jsxref("Function")}} Objekt). Eine diese Methoden ist die {{jsxref("Function.apply", "apply()")}} Methode, mit der man die oben genannten Aufgaben lösen kann.</p>
+
+<h2 class="deki-transform" id="Scopes_(Gültigkeitsbereiche)_von_Funktionen">Scopes (Gültigkeitsbereiche) von Funktionen</h2>
+
+<p>Variablen, die in einer Funktion definiert werden, können nicht außerhalb der Funktion erreicht werden, weil die Variablen nur im Scope (Gültigkeitbereich) der Funktion definiert sind. Im Gegensatz dazu kann eine Funktion alle Variablen und Funktionen erreichen, die in dem Scope definiert wurden, in dem auch die Funktion definiert wurde. Anders gesagt kann eine Funktion, die im globalen Scope definiert wurde, alle Variablen und Funktionen des globalen Scopes erreichen. Wenn eine Funktion in einer Funktion definiert wird, kann die innere Funktion auf alle Definitionen seiner Elternfunktion und alle Definitionen, auf die die Elternfunktion Zugriff hat, zugreifen.</p>
+
+<pre class="brush: js">// Die folgenden Variablen sind im globalen Scope definiert
+var num1 = 20,
+    num2 = 3,
+    name = 'Chamahk';
+
+// Diese Funktion ist im globalen Scope definiert
+function multiply() {
+  return num1 * num2;
+}
+
+multiply(); // gibt 60 zurück
+
+// Ein Beispiel für verschachtelte Funktionen
+function getScore() {
+  var num1 = 2,
+      num2 = 3;
+
+  function add() {
+    return name + ' scored ' + (num1 + num2);
+  }
+
+  return add();
+}
+
+getScore(); // gibt "Chamahk scored 5" zurück
+</pre>
+
+<h2 id="Scope_und_der_Funktionsstack">Scope und der Funktionsstack</h2>
+
+<h3 id="Rekursion">Rekursion</h3>
+
+<p>Eine Funktion kann sich selbst referenzieren und aufrufen. Dabei gibt es drei Möglichkeiten, wie eine Funktion sich selbst referenzieren kann:</p>
+
+<ol>
+ <li>Der Funktionsname</li>
+ <li><code><a href="/de/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee</a></code></li>
+ <li>Eine im Scope liegende Variable, die auf die Funktion referenziert.</li>
+</ol>
+
+<p>Nimmt man zum Beispiel folgende Funktion:</p>
+
+<pre class="brush: js">var foo = function bar() {
+   // Anweisungen
+};
+</pre>
+
+<p>Folgende Anweisungen im Körper der Funktion bewirken alle das Gleiche:</p>
+
+<ol>
+ <li><code>bar()</code></li>
+ <li><code>arguments.callee()</code></li>
+ <li><code>foo()</code></li>
+</ol>
+
+<p>Eine Funktion, die sich selbst aufruft, wird <em>rekursive Funktion</em> genannt. Rekursion ist dabei vergleichbar mit einer Schleife. Beide führen den selben Quelltext mehrfach aus und beide benötigen eine Bedingung (um eine unendliche Schleife zu vermeiden oder eine unendliche Rekursion zu vermeiden). Das nächste Beispiel zeigt eine Schleife:</p>
+
+<pre class="brush: js">var x = 0;
+while (x &lt; 10) { // "x &lt; 10" ist die Schleifenbedingung
+   // do stuff
+   x++;
+}
+</pre>
+
+<p>Diese Schleife kann in eine rekursive Funktion konvertiert werden, die aufgerufen wird:</p>
+
+<pre class="brush: js">function loop(x) {
+  if (x &gt;= 10) // "x &gt;= 10" ist die Abbruchbedingung (gleich zu "!(x &lt; 10)")
+    return;
+  // do stuff
+  loop(x + 1); // der rekursive Aufruf
+}
+loop(0);
+</pre>
+
+<p>Jedoch können manche Algorithmen nicht in eine <strong>einfache</strong> Schleife umgewandelt werden. Zum Beispiel kann das Abrufen aller Knoten einer Baumstruktur (z. B. <a href="/de/docs/DOM">DOM</a>) einfacher rekursiv realisieren werden:</p>
+
+<pre class="brush: js">function walkTree(node) {
+  if (node == null) //
+    return;
+  // do something with node
+  for (var i = 0; i &lt; node.childNodes.length; i++) {
+    walkTree(node.childNodes[i]);
+  }
+}
+</pre>
+
+<p>Verglichen mit der Funktion <code>loop</code>, erzeugt hier jeder rekursive Aufruf mehrere weitere rekursive Aufrufe.</p>
+
+<p>Es ist möglich jeden rekursiven Algorithmus in einen nicht rekursiven umzuwandeln, jedoch ist die Logik oftmals sehr viel komplexer und es wird ein zusätzlicher Stack benötigt. Rekursion nutzt ebenfalls einen Stack: den Funktionsstack.</p>
+
+<p>Die Stack-ähnliche Funktionsweise kann in folgendem Beispiel betrachtet werden:</p>
+
+<pre class="brush: js">function foo(i) {
+  if (i &lt; 0)
+    return;
+  console.log('begin:' + i);
+  foo(i - 1);
+  console.log('end:' + i);
+}
+foo(3);
+
+// Output:
+
+// begin: 3
+// begin: 2
+// begin: 1
+// begin: 0
+// end: 0
+// end: 1
+// end: 2
+// end: 3</pre>
+
+<h3 id="Verschachtelte_Funktionen_und_Closures">Verschachtelte Funktionen und Closures</h3>
+
+<p>Man kann eine Funktion in eine andere verschachteln. Die verschachtelte (innere) Funktion ist privat innerhalb ihrer Containerfunktion (äußere Funktion). Sie formt auch eine<em> Closure</em>. Eine Closure ist ein Ausdruck, der freie Variablen enthalten kann, (typischerweise eine Funktion) zusammen mit einer Umgebung, welche die diese Variablen einschließt (und damit den Ausdruck <em>abschließt</em>, daher der Name <em>closure</em>).</p>
+
+<p>Weil eine verschachtelte Funktion eine Closure ist, bedeutet das, dass sie die Argumente und Variablen ihrer Containerfunktion vererbt bekommt. Anders gesagt enthält der Scope der inneren Funktion den Scope der äußeren Funktion.</p>
+
+<p>Zusammenfassend:</p>
+
+<ul>
+ <li>Die innere Funktion kann nur von Anweisungen der äußeren Funktion erreicht werden.</li>
+ <li>Die innere Funktion formt eine Closure: die innere Funktion kann die Argumente und Variablen der äußeren Funktion benutzen, während die äußere Funktion nicht die Argumente und Variablen der inneren Funktion nutzen kann.</li>
+</ul>
+
+<p>Im folgenden Beispiel werden innere Funktionen gezeigt:</p>
+
+<pre class="brush: js">function addSquares(a, b) {
+  function square(x) {
+    return x * x;
+  }
+  return square(a) + square(b);
+}
+a = addSquares(2, 3); // gibt 13 zurück
+b = addSquares(3, 4); // gibt 25 zurück
+c = addSquares(4, 5); // gibt 41 zurück
+</pre>
+
+<p>Weil die innere Funktion eine Closure formt, kann die äußere Funktion aufgerufen werden und Argumente für die innere und äußere Funktion spezifizieren::</p>
+
+<pre class="brush: js">function outside(x) {
+  function inside(y) {
+    return x + y;
+  }
+  return inside;
+}
+fn_inside = outside(3);  // Man kann sich das folgendermaßen vorstellen
+                         // gib mir eine Funktion, die 3 zu einem Parameter addiert.
+result = fn_inside(5);   // gibt 8 zurück
+
+result1 = outside(3)(5); // gibt 8 zurück
+</pre>
+
+<h3 id="Erhaltung_von_Variablen">Erhaltung von Variablen</h3>
+
+<p>Bemerkenswert ist, dass <code>x</code> erhalten wird, wenn <code>inside</code> zurückgegeben wird. Eine Closure muss alle Argumente und Variablen erhalten, die sie referenziert. Weil jeder Aufruf potenziell verschiedene Argumente benötigt, wird eine neue Closure für jeden Aufruf erstellt. Der Speicher kann nur freigegeben werden, wenn die zurückgegebene <code>inside</code> Funktion nicht mehr erreichbar ist.</p>
+
+<p>Das ist nicht anders mit gespeicherten Referenzen in anderen Objekten, jedoch oftmals weniger deutlich, weil man diese nicht direkt referenziert und nicht inspizieren kann.</p>
+
+<h3 id="Mehrfach_verschachtelte_Funktionen">Mehrfach verschachtelte Funktionen</h3>
+
+<p>Funktionen können mehrfach verschachtelt sein, z. B. eine Funktion (A) enthält eine Funktion (B), die eine Funktion (C) enthält. Beide Funktionen, B und C sind Closures, B kann A erreichen und C kann B erreichen. Zudem kann C auch A erreichen, weil C B erreichen kann und B A erreichen kann. Deswegen kann eine Closure mehrere Scopes enthalten.; sie enthält rekursiv die Scopes der Funktion, die der Container ist. Das wird Scopeverkettung (<em>scope chaining</em>) genannt.</p>
+
+<p>Untersuche das nächste Beispiel:</p>
+
+<pre class="brush: js">function A(x) {
+  function B(y) {
+    function C(z) {
+      console.log(x + y + z);
+    }
+    C(3);
+  }
+  B(2);
+}
+A(1); // logs 6 (1 + 2 + 3)
+</pre>
+
+<p>In diesem Beispiel benutzt C die Variablen <code>y</code>, von B, und <code>x</code>, von A. Das kann gemacht werden weil:</p>
+
+<ol>
+ <li><code>B</code> ist eine Closure, die <code>A</code> enthält, z. B. <code>B</code> kann die Argumente und Variablen von <code>A</code> benutzen.</li>
+ <li><code>C </code>ist ein Closure, die <code>B</code> enthält.</li>
+ <li>Weil die Closure von B auf A zugreifen kann, kann die Closure von C auf die Argumente und Variablen von A und B zugreifen. Anders gesagt verkettet C den Scope von B und A in dieser Reihenfolge.</li>
+</ol>
+
+<p>Das umgekehrte ist nicht möglich. A kann nicht auf C zugreifen, weil A nicht auf die Variablen und Argumente von B zugreifen kann und C eine Variable von B ist. So bleibt C für B privat.</p>
+
+<h3 id="Namenskonflikte">Namenskonflikte</h3>
+
+<p>Wenn zwei Argumente oder Variablen in dem Scope einer Closure mit dem gleichen Namen existieren, gibt es einen Namenskonflikt. Der innerste Scope hat dann Vorrang, was bedeutet, dass der innerste Scope die höchste Priorität hat, während der äußerste Scope die geringste Priorität hat. Das ist wegen der Scopeverkettung. Das erste Glied in der Kette ist der innerste Scope und das letzt Glied ist der äußerste Scope. Dieses ist im folgenden Beispiel zu sehen:</p>
+
+<pre class="brush: js">function outside() {
+  var x = 10;
+  function inside(x) {
+    return x;
+  }
+  return inside;
+}
+result = outside()(20); // gibt 20 statt 10 zurück
+</pre>
+
+<p>Der Namenskonflikt tritt beim der Anweisung <code>return x</code> auf und ist zwischen dem Parmeter <code>x</code> von <code>inside</code> und der Variable <code>x</code> von <code> outside</code>. Die Scopekette ist hier {<code>inside</code>, <code>outside</code>, globales Objekt}. Dabei bekommt <code>x</code> von <code>inside</code> eine höhere Priorität als das <code>x</code> von <code>outside</code>. und 20 wird statt der 10 zurückgegeben.</p>
+
+<h2 id="Closures">Closures</h2>
+
+<p>Closures sind eines der mächtigsten Funktionen von JavaScript. JavaScript unterstützt das Verschachteln von Funktionen und erlaubt der inneren Funktionen den vollen Zugriff auf alle definierten Variablen und Funktionen der äußeren Funktion (und alle anderen Variablen und Funktionen die die äußere Funktion erreichen kann). Jedoch hat die äußere Funktion keinen Zugriff auf die Variablen und Funktione, die in der innere Funktion definiert werden. Das unterstützt mehr oder weniger Sicherheit für die Variablen der inneren Funktion. Wenn die innere Funktion Zugriff auf den Scope der äußeren Funktion hat, müssen die Variablen und Funktionen der äußeren Funktion länger leben, als die Ausführungen der inneren Funktion, weil die innere Funktion das Überleben der äußeren Funktion managet. Eine Closure wird erstellt, wenn die innere Funktion irgendwie in einem äußeren Scope der äußeren Funktion erreichbar gemacht wird.</p>
+
+<pre class="brush: js">var pet = function(name) {   // Die äußere Funktion definiert eine Variable "name"
+  var getName = function() {
+    return name;             // Die innere Funktion hat Zugriff auf die "name" Variable der äußeren Funktion
+  }
+  return getName;            // gibt die innere Funktion zurück
+}
+myPet = pet('Vivie');
+
+myPet();                     // gibt "Vivie" zurück
+</pre>
+
+<p>Es kann viel komplexer sein, als der oben gezeigte Quelltext. Ein Objekt enthält Methoden zum verändern von inneren Variablen der äußeren Funktion.</p>
+
+<pre class="brush: js">var createPet = function(name) {
+  var sex;
+
+  return {
+    setName: function(newName) {
+      name = newName;
+    },
+
+    getName: function() {
+      return name;
+    },
+
+    getSex: function() {
+      return sex;
+    },
+
+    setSex: function(newSex) {
+      if(typeof newSex === 'string' &amp;&amp; (newSex.toLowerCase() === 'male' || newSex.toLowerCase() === 'female')) {
+        sex = newSex;
+      }
+    }
+  }
+}
+
+var pet = createPet('Vivie');
+pet.getName();                  // Vivie
+
+pet.setName('Oliver');
+pet.setSex('male');
+pet.getSex();                   // male
+pet.getName();                  // Oliver
+</pre>
+
+<p>Im Quelltext oben ist die <code>name</code> Variable der äußeren Funktion in den inneren Funktionen erreichbar und es gibt keine andere Möglichkeit die inneren Variablen zu erreichen, als über die inneren Funktion. Die innere Variable der inneren Funktion fungiert als sicherer Speicher für die äußeren Parameter und Variablen. Sie enthalten permanent und sicher die Daten mit denen die innere Funktion arbeitet. Die Funktion hat niemals eine Variable beschrieben noch hat sie einen Namen.</p>
+
+<pre class="brush: js">var getCode = (function() {
+  var secureCode = '0]Eal(eh&amp;2';    // Ein Code der nicht von Außerhalb verändert werden soll
+
+  return function () {
+    return secureCode;
+  };
+}());
+
+getCode();    // gibt secureCode zurück.
+</pre>
+
+<p>Es gibt aber eine menge von Tücken, die der Einsatz von Closures mit sich bringt. Wenn eine innere Funktion eine Variable definiert, die den gleichen Namen wie eine Variable im äußeren Scope hat, kann die äußere Variable nicht mehr referenziert werden.</p>
+
+<pre class="brush: js">var createPet = function(name) {  // Äußere Funktion definiert die Variable "name"
+  return {
+    setName: function(name) {    // Innere Funktion definiert ebenfalls eine Variable "name"
+      name = name;               // Wie referenziert man die Variable "name" der äußeren Funktion?
+    }
+  }
+}
+</pre>
+
+<h2 id="Einsatz_des_arguments_Objekts">Einsatz des arguments Objekts</h2>
+
+<p>Die Argumente einer Funktion werden in einem Array-ähnlichen Objekt gewartet. In einer Funktion können die Argumente wie folgt adressiert werden:</p>
+
+<pre class="brush: js">arguments[i]
+</pre>
+
+<p><code>i</code> ist die Ordnungsnummer des Arguments, beginnend bei null. So ist das erste übergebene Argument einer Funktion <code>arguments[0]</code>. Die Anzahl der übergebenen Argumente ist <code>arguments.length</code>.</p>
+
+<p>Mit dem <code>arguments</code> Objekt kann man eine Funktion mit mehr Agumenten aufrufen als sie formal deklariert wurden. Das ist oft nützlich, wenn man nicht weiß, wie viele Argumente einer Funktion übergeben werden. Mit <code>arguments.length</code> kann die Anzahl der Argumente, die einer Funktion übergeben wurde, ermittelt werden. Über das <code>arguments</code> Objekt können dann alle Argumente gelesen werden.</p>
+
+<p>Zum Beispiel kann es eine Funktion geben, die verschieden viele Strings zusammenfügt. Das einzige formale Argument der Funktion ist das Trennzeichen, welches die Zeichen definiert, die zwischen den Strings eingefügt werden. Im folgenden Quelltext ist die Funktion implementiert:</p>
+
+<pre class="brush: js">function myConcat(separator) {
+   var result = ''; // initialize list
+   var i;
+   // iterate through arguments
+   for (i = 1; i &lt; arguments.length; i++) {
+      result += arguments[i] + separator;
+   }
+   return result;
+}
+</pre>
+
+<p>Man kann der Funktion jede Anzahl an Argumenten übergeben und die Funktion fügt die Argumente in einem String zusammen:</p>
+
+<pre class="brush: js">// returns "red, orange, blue, "
+myConcat(', ', 'red', 'orange', 'blue');
+
+// returns "elephant; giraffe; lion; cheetah; "
+myConcat('; ', 'elephant', 'giraffe', 'lion', 'cheetah');
+
+// returns "sage. basil. oregano. pepper. parsley. "
+myConcat('. ', 'sage', 'basil', 'oregano', 'pepper', 'parsley');
+</pre>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Die <code>arguments</code> Variable ist "Array-ähnlich", aber kein Array. Es ist Array-ähnlich indem es nummerierte Indizes und eine <code>length</code> Eigenschaft hat. Jedoch unterstützt es nicht alle Array-Manipulations-Methoden.</p>
+</div>
+
+<p>Siehe im {{jsxref("Function")}} Objekt in den JavaScript Referenzen für mehr Informationen.</p>
+
+<h2 id="Funktionsparameter">Funktionsparameter</h2>
+
+<p>Mit ECMAScript 2015, gibt es zwei neue Arten von Parametern: Default-Parameter und Rest-Parameter.</p>
+
+<h3 id="Default-Parameter">Default-Parameter</h3>
+
+<p>In JavaScript ist der Standardwert eines Parameters <code>undefined</code>. In manchen Situationen ist es sinnvoll den Standardwert auf einen anderen Wert zu setzen. Das ist das Einsatzgebiet von Default-Parametern.</p>
+
+<p>In der Vergangenheit war die Strategie für das Setzen von Standardwerten, dass im Körper der Funktion geprüft wird, ob ein Parameter <code>undefined</code> ist und ihn in diesem Fall neu zu beschreiben. Wenn im folgenden Beispiel kein Argument <code>b</code> übergeben wird, wird dieser <code>undefined</code> sein und die Auswertung von <code>a*b</code> wird <code>NaN</code> sein. Deswegen ist dieser Fall in der zweiten Zeile des Beispiels abgefangen:</p>
+
+<pre class="brush: js">function multiply(a, b) {
+  b = typeof b !== 'undefined' ?  b : 1;
+
+  return a * b;
+}
+
+multiply(5); // 5
+</pre>
+
+<p>Mit Default-Parametern ist die Überprüfung im Körper der Funktion nicht mehr nötig. Jetzt kann man <code>1</code> als Standardwert für <code>b</code> im Funktionskopf angeben:</p>
+
+<pre class="brush: js">function multiply(a, b = 1) {
+  return a * b;
+}
+
+multiply(5); // 5</pre>
+
+<p>Für mehr Details, siehe in den Referenzen unter <a href="/de/docs/Web/JavaScript/Reference/Functions/Default_parameters">Default-Parameter</a>.</p>
+
+<h3 id="Rest-Parameter">Rest-Parameter</h3>
+
+<p>Die <a href="/de/docs/Web/JavaScript/Reference/Functions/rest_parameters">Rest-Parameter </a>Syntax ermöglicht er eine unendliche Anzahl von Argumenten als Array zu repräsentieren. Im Beispiel wird der Rest-Parameter eingesetzt um die alle Argumente ab dem zweiten Argument zu sammeln. Danach werden diese mit dem ersten Parameter multipliziert. Dieses Beispiel benutzt Pfeilfunktionen, welche in nächsten Kapitel erklärt werden:</p>
+
+<pre class="brush: js">function multiply(multiplier, ...theArgs) {
+  return theArgs.map(x =&gt; multiplier * x);
+}
+
+var arr = multiply(2, 1, 2, 3);
+console.log(arr); // [2, 4, 6]</pre>
+
+<h2 id="Pfeilfunktionen">Pfeilfunktionen</h2>
+
+<p>Ein <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Pfeilfunktions Ausdruck</a> hat eine kürzere Syntax verglichen mit Funktionsausdrücken und bindet lexikalisch den <code>this</code> Wert. Pfeilfunktionen sind immer anonym. Sie dazu auch den hacks.mozilla.org Blogbeitrag: "<a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">ES6 In Depth: Arrow functions</a>".</p>
+
+<p>Zwei Faktoren haben die Einführung von Pfeilfunktionen beeinflusst: kürzere Funktionen und lexikalisches <code>this</code>.</p>
+
+<h3 id="Kürzere_Funktionen">Kürzere Funktionen</h3>
+
+<p>In manchen funktionalen Patterns sind kurze Funktionen willkommen. Vergleiche:</p>
+
+<pre class="brush: js">var a = [
+  'Hydrogen',
+  'Helium',
+  'Lithium',
+  'Beryl­lium'
+];
+
+var a2 = a.map(function(s) { return s.length; });
+
+console.log(a2); // logs [8, 6, 7, 9]
+
+var a3 = a.map( s =&gt; s.length );
+
+console.log(a3); // logs [8, 6, 7, 9]
+</pre>
+
+<h3 id="Lexikalisches_this">Lexikalisches <code>this</code></h3>
+
+<p>Bis es Pfeilfunktionen gab, hat jede neue Funktion sein eigenen <a href="/de/docs/Web/JavaScript/Reference/Operators/this">this</a> Wert definiert (ein neues Objekt in Fällen eines Konstruktors, undefined in Funktionsaufrufen im strict mode, das Kontextobjekt, wenn eine Funktion als Objektmethode aufgerufen wird, etc.). Das ist lästig mit objektorientierten Programmierstilen.</p>
+
+<pre class="brush: js">function Person() {
+  // The Person() constructor defines `<code>this`</code> as itself.
+  this.age = 0;
+
+  setInterval(function growUp() {
+    // In nonstrict mode, the growUp() function defines `this`
+    // as the global object, which is different from the `this`
+    // defined by the Person() constructor.
+    this.age++;
+  }, 1000);
+}
+
+var p = new Person();</pre>
+
+<p>In ECMAScript 3/5, wurde dieses Problem behoben, indem der Wert der Variablen <code>this</code> in einer weiteren Variablen gespeichert wird.</p>
+
+<pre class="brush: js">function Person() {
+  var self = this; // Some choose `that` instead of `self`.
+                   // Choose one and be consistent.
+  self.age = 0;
+
+  setInterval(function growUp() {
+    // The callback refers to the `self` variable of which
+    // the value is the expected object.
+    self.age++;
+  }, 1000);
+}</pre>
+
+<p>Alternativ kann eine <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">gebundene Funktion</a>  erstellt werden, so dass der Wert für <code>this</code> mit übergeben werden kann.</p>
+
+<p>Pfeilfunktionen nutzen den <code>this</code> Wert des umschließenden Kontextes, so dass der folgende Quelltext wie erwartet funktioniert:</p>
+
+<pre class="brush: js">function Person() {
+  this.age = 0;
+
+  setInterval(() =&gt; {
+    this.age++; // |this| properly refers to the person object
+  }, 1000);
+}
+
+var p = new Person();</pre>
+
+<h2 id="Vordefinierte_Funktionen">Vordefinierte Funktionen</h2>
+
+<p>JavaScript hat einige eingebaute Funktionen:</p>
+
+<dl>
+ <dt>{{jsxref("Global_Objects/eval", "eval()")}}</dt>
+ <dd>
+ <p>Die <code><strong>eval()</strong></code> Methode wertet JavaScript Quelltext repräsentiert als String aus.</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline}}</dt>
+ <dd>
+ <p>Die <code><strong>uneval()</strong></code> Methode erstellt einen String der Quelltext eines {{jsxref("Object")}}s repräsentiert.</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/isFinite", "isFinite()")}}</dt>
+ <dd>
+ <p>Die globale <code><strong>isFinite()</strong></code> Funktion ob ein übergebener Wert endlich ist. Der übergebene Wert wird, wenn es nötig ist, zu einer Zahl konvertiert.</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</dt>
+ <dd>Die <code><strong>isNaN()</strong></code> Funktion überprüft, ob ein Wert {{jsxref("Global_Objects/NaN", "NaN")}} ist oder nicht. Hinweis: Wegen einigen Zwängen innerhalb der <code>isNaN</code> Funktion gibt es <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/isNaN#Beschreibung">interessante Regeln</a>; alternativ kann auch die in  ECMAScript 2015 definierte Funktion Funktion {{jsxref("Number.isNaN()")}} oder der Operator <code><a href="/de/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a></code> verwendet werden, um einen {{jsxref("Global_Objects/NaN", "NaN")}} Wert zu erkennen.</dd>
+ <dt>{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}</dt>
+ <dd>
+ <p>Doe <code><strong>parseFloat()</strong></code> Funktion liest einen String als Argument ein und gibt eine Gleitkommazahl zurück.</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/parseInt", "parseInt()")}}</dt>
+ <dd>
+ <p>Die <code><strong>parseInt()</strong></code> Funktion liest einen String als Argument ein und gibt eine ganze Zahl der Spezifizierten Basis zurück (die Basis ist in der Mathematik das Zahlensystem).</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}</dt>
+ <dd>
+ <p>Die <code><strong>decodeURI()</strong></code> Methode decodiert einen Uniform Resource Identifier (URI), der vorher mit der {{jsxref("Global_Objects/encodeURI", "encodeURI")}} Funktion order einer ähnlichen Funktion erstellt wurde.</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</dt>
+ <dd>
+ <p>Die <code><strong>decodeURIComponent()</strong></code> Methode decodiert eine Uniform Resource Identifier (URI) Komponente, die vorher mit der {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} Funktion oder einer ähnlichen Funktion erstellt wurde.</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}</dt>
+ <dd>
+ <p>Die <code><strong>encodeURI()</strong></code> Methode codiert einen Uniform Resource Identifier (URI), indem jedes besondere Zeilen durch eine Sequenz aus zwei drei oder vier Zeichen escaped wird. Dieses Sequenzen Repräsentieren die UTF-8 Darstellung der Zeichen (wird nur vier escape Sequenzen von Zeichen zu zwei zwei Platzhalterzeichen umwandeln)</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</dt>
+ <dd>
+ <p>Die <code><strong>encodeURIComponent()</strong></code> Methode codiert eine Uniform Resource Identifier (URI) Komponente, indem jedes besondere Zeilen durch eine Sequenz aus zwei drei oder vier Zeichen escaped wird. Dieses Sequenzen Repräsentieren die UTF-8 Darstellung der Zeichen (wird nur vier escape Sequenzen von Zeichen zu zwei zwei Platzhalterzeichen umwandeln)</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline}}</dt>
+ <dd>
+ <p>Die veraltete <code><strong>escape()</strong></code> Methode berechnet einen neuen String indem manche Zeichen durch Hexadezimalsequenzen ersetzt werden. Man sollte {{jsxref("Global_Objects/encodeURI", "encodeURI")}} oder {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} stattdessen benutzen.</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline}}</dt>
+ <dd>
+ <p>Die veraltete <code><strong>unescape()</strong></code> Methode berechnet einen neuen String indem Hexadezimalsequenzen durch die repräsentierenden Zeichen ersetzt werden. Die Hexadezimalsequenzen können von Funktionen wie {{jsxref("Global_Objects/escape", "escape")}} eingeführt werden. Weil <code>unescape()</code> veraltet ist, sollte man stattdessen die Funktion {{jsxref("Global_Objects/decodeURI", "decodeURI()")}} oder {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} benutzen.</p>
+ </dd>
+</dl>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Schleifen_und_Iterationen", "Web/JavaScript/Guide/Ausdruecke_und_Operatoren")}}</p>
diff --git a/files/de/web/javascript/guide/grammatik_und_typen/index.html b/files/de/web/javascript/guide/grammatik_und_typen/index.html
new file mode 100644
index 0000000000..3ca2b9936b
--- /dev/null
+++ b/files/de/web/javascript/guide/grammatik_und_typen/index.html
@@ -0,0 +1,699 @@
+---
+title: Grammatik und Typen
+slug: Web/JavaScript/Guide/Grammatik_und_Typen
+tags:
+  - Guide
+  - JavaScript
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Guide/Grammar_and_types
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Einführung", "Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung")}}</div>
+
+<p class="summary">Dieses Kapitel behandelt die grundlegende Grammatik von JavaScript, Deklaration von Variablen, Datentypen und Objektinstanzen.</p>
+
+<h2 id="Grundlagen">Grundlagen</h2>
+
+<p>JavaScript leiht sich den größten Teil seiner Syntax von Java, ist aber auch von Sprachen wie Awk, Perl und Python beeinflusst.</p>
+
+<p>JavaScript ist <strong>case-sensitiv</strong> (unterscheidet zwischen Groß- und Kleinschreibung) und benutzt den <strong>Unicode</strong>-Zeichensatz. Zum Beispiel kann das Wort Früh als Variablenname genutzt werden.</p>
+
+<pre class="brush: js notranslate">var Früh = "foobar";
+</pre>
+
+<p>Jedoch ist die Variable <code>früh</code> nicht dieselbe wie <code>Früh</code>, weil JavaScript case-sensitiv ist.</p>
+
+<p>In JavaScript heißen Anweisungen "{{Glossary("Statement", "statements")}}" und werden durch ein Semikolon (;) voneinander getrennt. Ein Semikolon ist nicht nötig, wenn jedes Statement in einer neuen Zeile ist. Wenn mehrere Statements in einer Zeile geschrieben werden, sollte nach jedes mit einem Semikolon trennen. Zudem ist es gängige Praxis, hinter jedem Statement ein Semikolon zu schreiben. Leerzeichen, Tabulatoren und Zeilenumbrüche werden "Whitespace" genannt. Der Quelltext von JavaScript wird vom Interpreter von links nach rechts gelesen und in Sequenzen von Eingabe-Elementen wie JavaScript-Tokens, Steuerzeichen, Zeichenumbrüche, Kommentare und Objektinstanzen (Literale) umgewandelt. ECMAScript beschreibt für den Interpreter reservierte Schlüsselwörter sowie Objektinstanzen und hat eingebaute Regeln für die automatische Einfügung von Semikola (ASI) um Anweisungen zu beenden. Es wird jedoch empfohlen jede Anweisung mit einem Semikolon zu beenden; dies vermeidet ungewollte Nebeneffekte. Mehr Informationen dazu sind in der detaillierten Referenz über JavaScripts <a href="/de/docs/Web/JavaScript/Reference/Lexical_grammar">lexikalische Grammatik</a> zu finden.</p>
+
+<h2 id="Kommentare">Kommentare</h2>
+
+<p>Die Syntax von <strong>Kommentaren</strong> ist dieselbe wie in C++ und in vielen anderen Sprachen:</p>
+
+<pre class="brush: js notranslate">// Einzeiliger Kommentar
+
+/* Das ist ein langer,
+ * mehrzeiliger Kommentar
+ */
+
+/* Man kann keine Kommentare, /* Verschachteln */ SyntaxError */</pre>
+
+<p>Kommentare sind wie Whitespaces und werden bei der Ausführung von Skripten verworfen.</p>
+
+<h2 id="Deklarationen">Deklarationen</h2>
+
+<p>Es gibt drei mögliche Arten, Variablen zu deklarieren:</p>
+
+<dl>
+ <dt>{{jsxref("Statements/var", "var")}}</dt>
+ <dd>Deklariert eine Variable. Optional wird ein Wert initialisiert.</dd>
+ <dt>{{jsxref("Statements/let", "let")}}</dt>
+ <dd>Deklariert eine Variable mit Gültigkeit im aktuellen Block. Optional wird ein Wert initialisiert.</dd>
+ <dt>{{jsxref("Statements/const", "const")}}</dt>
+ <dd>Deklariert eine Konstante mit Gültigkeit im aktuellen Block.</dd>
+</dl>
+
+<h3 id="Variablen">Variablen</h3>
+
+<p>Variablen werden benutzt, um Werte zu speichern. Dabei gibt man einer Variablen einen Namen, der {{Glossary("identifier", "Bezeichner")}} bzw. Bezeichner genannt wird und der bestimmten Regeln folgt.</p>
+
+<p>Ein JavaScript Bezeichner muss mit einem Buchstaben, Unterstrich (_) oder einem Dollarzeichen ($) beginnen. Die nachfolgenden Zeichen können auch Zahlen sein. Da JavaScript case-sensitive ist, wird zwischen Groß- und Kleinschreibung unterschieden und somit repräsentiert "A" einen anderen Buchstaben als "a".</p>
+
+<p>Es kann ein Großteil der ISO 8859-1 und Unicode-Zeichen benutzt werden, wie z.B. ü oder auch å, aber auch <a href="/de/docs/Web/JavaScript/Reference/Lexical_grammar#String_literals">Unicode escape sequences</a> können genutzt werden.</p>
+
+<p>Beispiele für zulässige Bezeichner sind <code>Number_hits</code>, <code>temp99</code> und <code>_name.</code></p>
+
+<h3 id="Variablendeklaration">Variablendeklaration</h3>
+
+<p>Die Deklaration einer Variable ist durch drei unterschiedliche Wege möglich:</p>
+
+<ul>
+ <li>Mit dem Schlüsselwort {{jsxref("Statements/var", "var")}}, wie <code>var x = 42</code>. Die Syntax kann benutzt werden, um Variablen lokal und global zu deklarieren.</li>
+ <li>Mit dem Zuweisen einer Variable, wie <code>x = 42</code>. Wenn diese Form außerhalb einer Funktion genutzt wird, wird die Variable global deklariert. Es wird eine strikte JavaScript-Warnung erzeugt. Diese Variante sollte vermieden werden.</li>
+ <li>Mit dem Schlüsselwort {{jsxref("Statements/let", "let")}} , wie <code>let x = 42</code>. Die Syntax kann benutz werden, um Variablen nur für ihren Scope (Gültigkeitsbereich) zu deklarieren. Siehe <a href="#Variablen Scope">Variablen Scope</a>.</li>
+</ul>
+
+<h3 id="Variablen_auswerten">Variablen auswerten</h3>
+
+<p>Eine Variable, die mit <code>var</code> ohne Initialisierung deklariert wurde, hat den Wert {{jsxref("undefined")}}.</p>
+
+<p>Der Zugriff auf eine nicht initialisierte Variable und der Zugriff auf eine <code>let</code>-Variable, bevor diese Initialisiert wurde, erzeugt einen {{jsxref("ReferenceError")}} Fehler:</p>
+
+<pre class="brush: js line-numbers  language-js notranslate">var a;
+console.log("Der Wert von a ist " + a); // Der Wert von a ist undefined
+
+console.log("Der Wert von b ist " + b); // Der Wert von b ist undefined
+var b;
+
+console.log("Der Wert von c ist " + c); // ReferenceError: c is not defined
+
+let x
+console.log("Der Wert von x ist " + x); // Der Wert von x ist undefined
+
+console.log("Der Wert von y ist " + y); // ReferenceError: y is not defined
+let y;
+</pre>
+
+<p><code>undefined</code> kann benutzt werden, um zu überprüfen ob eine Variable einen Wert hat. Im Folgenden Codebeispiel ist der Variable <code>input</code> kein Wert zugewiesen worden und das <code><a href="/de/docs/Web/JavaScript/Reference/Statements/if...else">if</a></code>-Statement wird somit <code>true</code> ausgeben.</p>
+
+<pre class="brush: js notranslate">var input;
+if(input === undefined){
+  macheDas();
+} else {
+  macheDasAndere();
+}
+</pre>
+
+<p><code>undefined</code> verhält sich wie ein <code>false</code>, wenn es in einem boolschen Kontext verwendet wird. Zum Beispiel wird im folgendem Codebeispiel die Funktion <code>myFunction</code> ausgeführt, weil das <code>myArray</code> Element <code>undefined</code> ist:</p>
+
+<pre class="brush: js notranslate">var myArray = [];
+if (!myArray[0]) myFunction();
+</pre>
+
+<p><code>undefined</code> wird zu <code>NaN</code> (Not a Number) konvertiert, wenn es in einem numerischen Kontext verwendet wird:</p>
+
+<pre class="brush: js notranslate">var a;
+a + 2;  //NaN</pre>
+
+<p>Wenn eine {{jsxref("null")}} Variable ausgewertet wird, verhält sie sich im numerischen Kontext wie <code>0</code> und in booleschem Kontext wie <code>false</code>:</p>
+
+<pre class="brush: js notranslate">var n = null;
+console.log(n * 32);  // wird 0 in die Konsole eintragen
+</pre>
+
+<h3 id="Variablen_Scope"><a id="Variablen Scope" name="Variablen Scope"></a>Variablen Scope</h3>
+
+<p>Wird eine Variable außerhalb eines Code-Blocks deklariert, wird sie eine <code>globale Variable</code> genannt, da sie jetzt in jedem Bereich verfügbar ist. Wenn eine Variable jedoch innerhalb eines Code-Blocks deklariert wird, so ist sie nur innerhalb dieses Blocks verfügbar und wird aus diesem Grund <code>lokale Variable</code> genannt.</p>
+
+<p>JavaScript hatte vor ECMAScript 2015 keinen <a href="/de/docs/JavaScript/Guide/Statements#Block_Statement">Block-Anweisungs</a> Scope; daher wurde eine deklarierte Variable in einem Block immer zu der Funktion (oder dem globalen Scope) gezählt, in dem sich der Block befand. Zum Beispiel wird der folgende Quelltext 5 ausgeben, weil der Scope von <code>x</code> die Funktion ist bzw. der globale Kontext, in dem <code>x</code> deklariert wurde, und nicht der Block, in diesem Fall die <code>if</code> Anweisung, selbst.</p>
+
+<pre class="brush: js notranslate">if (true) {
+  var x = 5;
+}
+console.log(x);  // 5
+</pre>
+
+<p>Das Verhalten ändert sich, wenn man die in ECMAScript 2015 eingeführte <code>let</code> Deklaration benutzt.</p>
+
+<pre class="brush: js notranslate">if (true) {
+  let y = 5;
+}
+console.log(y);  // ReferenceError: y is not defined
+</pre>
+
+<h3 id="Variablen_hochziehen_hoisting">Variablen hochziehen (<strong>hoisting</strong>)</h3>
+
+<p>Eine andere Besonderheit mit Variablen in JavaScript ist, dass man eine Variable referenzieren kann, bevor sie deklariert wurde, ohne das es zu einem Fehler kommt. Diese Konzept ist bekannt als <strong>hoisting</strong> (hochziehen); Variablen in JavaScript sind hochgezogen und quasi zum Anfang der Funktion oder des Statements gehoben worden. Immer wenn Variablen hochgezogen werden, werden sie den Wert <code>undefined</code> zurückgeben. So wird immer <code>undefined</code> zurückgegeben, wenn man die Variablen benutzt, bevor sie deklariert und initialisiert wurden.</p>
+
+<pre class="brush: js notranslate">/**
+ * Beispiel 1
+ */
+console.log(x === undefined); // true
+var x = 3;
+
+/**
+ * Beispiel 2
+ * wird den Wert undefined zurückgeben
+ */
+var myvar = "my value";
+
+(function() {
+  console.log(myvar); // undefined
+  var myvar = "local value";
+})();
+</pre>
+
+<p>Das obere Beispiel wird genauso interpretiert, wie das folgende Beispiel:</p>
+
+<pre class="brush: js notranslate">/**
+ * Beispiel 1
+ */
+var x;
+console.log(x === undefined); // true
+x = 3;
+
+/**
+ * Beispiel 2
+ */
+var myvar = "my value";
+
+(function() {
+  var myvar;
+  console.log(myvar); // undefined
+  myvar = "local value";
+})();
+</pre>
+
+<p>Wegen des Hochziehens sollten alle <code>var</code> Anweisungen so weit am Anfang der Funktion wie nur möglich platziert werden. Dieses Vorgehen verbessert die Qualität des Quelltextes.</p>
+
+<p>In ECMAScript 2015 wird <code>let</code> (bzw. <code>const</code>) <strong>nicht</strong> an den Anfang eines Blocks <strong>hochgezogen</strong>. Das Referenzieren der Variable in dem Block, bevor diese deklariert wurde, führt zu einem {{jsxref("ReferenceError")}}. Die Variable ist in einer "temporären toten Zone", die vom Start des Blocks bis zur Deklaration der Variablen besteht.</p>
+
+<pre class="brush: js notranslate">console.log(x); // ReferenceError
+let x = 3;</pre>
+
+<h3 id="Funktionen_hochziehen_hoisting">Funktionen hochziehen (<strong>hoisting</strong>)</h3>
+
+<p>Bei Funktionen (nur Funktionsdeklarationen) werden die Deklarationen ebenfalls nach oben gezogen. Bei Funktionsausdrücken gilt das jedoch nicht.</p>
+
+<pre class="brush: js notranslate">/* Funktionsdeklaration */
+
+foo(); // "bar"
+
+function foo() {
+   console.log("bar");
+}
+
+
+/* Funktionsausdruck */
+
+baz(); // TypeError: baz ist keine Funktion
+
+var baz = function() {
+   console.log("bar2");
+};
+</pre>
+
+<h3 id="Globale_Variablen">Globale Variablen</h3>
+
+<p>Globale Variablen sind faktisch Eigenschaften des <em>globalen Objekts.</em> In Webseiten ist das globale Objekt das {{domxref("window")}} Objekt, so dass globale Variablen gesetzt und erreicht werden können, indem die Syntax <code>window.<em>variable</em></code> eingesetzt wird.</p>
+
+<p>Folglich kann man globale Variablen, die in einem window oder frame deklariert wurden, aus einem anderen window oder Frame erreichen, indem der window oder framename angegeben wird. Zum Beispiel kann eine Variable <code>phoneNumber</code>, die in einem Dokument deklariert wurde, von einem iframe mit <code>parent.phoneNumber</code> erreicht werden.</p>
+
+<h3 id="Konstanten">Konstanten</h3>
+
+<p>Man kann eine nur lesende, benannte Konstante mit dem Schlüsselwort {{jsxref("Statements/const", "const")}} erstellen. Die Syntax für einen Konstantenbezeichner ist dieselbe, wie für Variablenbezeichner: Er muss mit einem Buchstaben, Unterstrich oder Dollarzeichen beginnen und kann alphabetische Zeichen, numerische Zeichen und Unterstriche enthalten.</p>
+
+<pre class="brush: js notranslate">const PI = 3.14;
+</pre>
+
+<p>Der Wert einer Konstanten kann nicht zur Laufzeit durch Zuweisungen oder Neudeklarationen geändert werden. Konstanten müssen deswegen immer initialisiert werden.</p>
+
+<p>Die Sichtbarkeitsregeln (Scope) bei Konstanten sind die gleichen, wie für <code>let</code> Blockscope Variablen. Wenn das Schüsselwort <code>const</code> weggelassen wird, wird vorausgesetzt, dass der Bezeichner eine Variable repräsentiert.</p>
+
+<p>Man kann keine Konstante mit dem gleichen Namen einer Funktion oder Variablen im gleiche Gültigkeitsbereich deklarieren. Zum Beispiel:</p>
+
+<pre class="brush: js notranslate">// DAS WIRD ZU EINEM ERROR FÜHREN
+function f() {};
+const f = 5;
+
+// DAS WIRD EBENFALLS ZU EINEM ERROR FÜHREN
+function f() {
+  const g = 5;
+  var g;
+
+  //statements
+}
+</pre>
+
+<p>Immer, wenn Objektattribute nicht geschützt sind, werden die folgenden Anweisungen ohne Probleme ausgeführt.</p>
+
+<pre class="brush: js notranslate"><code>const MY_OBJECT = {"key": "value"};
+MY_OBJECT.key = "otherValue";</code></pre>
+
+<p>Jedoch ist der Inhalt eines Arrays nicht geschützt, sodass folgendes Statement ohne Probleme ausgeführt wird.</p>
+
+<pre class="brush: js notranslate">const MY_ARRAY = ['HTML','CSS'];
+MY_ARRAY.push('JAVASCRIPT');
+console.log(MY_ARRAY); // logs ['HTML','CSS','JAVASCRIPT']
+</pre>
+
+<h2 id="Datenstrukturen_und_-typen">Datenstrukturen und -typen</h2>
+
+<h3 id="Datentypen">Datentypen</h3>
+
+<p>Der neuste ECMAScript Standard definiert sieben Datentypen:</p>
+
+<ul>
+ <li>Sechs Datentypen sind {{Glossary("Primitive", "primitive")}} Datentypen:
+  <ul>
+   <li>{{Glossary("Boolean")}}. <code>true</code> und <code>false</code>.</li>
+   <li>{{Glossary("null")}}. Eine spezielles Schlüsselwort, was einen null-Wert kennzeichnet. Weil JavaScript zwischen Groß- und Kleinschreibung unterscheidet, ist <code>null</code> nicht das selbe wie <code>Null</code>, <code>NULL</code> oder einen andere Variante.</li>
+   <li>{{Glossary("undefined")}}. Ein Eigenschaft, wessen Wert nicht Definiert ist.</li>
+   <li>{{Glossary("Number")}}. Eine ganze Zahl oder Fließkommazahl. Zum Beispiel: <code>42</code> oder <code>3.14159</code>.</li>
+   <li>{{Glossary("String")}}. Eine Sequenz von Zeichen, die einen Textwert repräsentieren Zum Beispiel: "Howdy".</li>
+   <li>{{Glossary("Symbol")}} (neu in ECMAScript 2015). Ein Datentyp, bei dem Instanzen einzigartig und unveränderlich sind.</li>
+  </ul>
+ </li>
+ <li>und {{Glossary("Object")}}</li>
+</ul>
+
+<p>Obwohl die Anzahl der Datentypen relativ klein ist, eröffnen sie die Möglichkeit nützliche Funktionen für Applikationen zu erstellen. {{jsxref("Object", "Objects")}} und {{jsxref("Function", "functions")}} sind die anderen fundamentalen Elemente der Sprache. Man kann sich Objekte als benannte Container für Werte und Funktionen, die die Applikation ausführen kann, vorstellen.</p>
+
+<h3 id="Datentypkonvertierungen">Datentypkonvertierungen</h3>
+
+<p>JavaScript ist eine dynamisch typisierte Sprache. Das bedeutet, dass man den Datentypen einer Variable bei der Deklaration nicht mit angibt. Der Datentyp wird während der Ausführung automatisch konvertiert, wenn es notwendig ist. So kann eine Variable folgendermaßen definiert werden:</p>
+
+<pre class="brush: js notranslate">var answer = 42;
+</pre>
+
+<p>Und Später kann der gleichen Variablen eine Zeichenkette zugewiesen werden:</p>
+
+<pre class="brush: js notranslate">answer = "Thanks for all the fish...";
+</pre>
+
+<p>Weil JavaScript dynamisch typisiert ist, erzeugt diese Zuweisung keinen Fehler im Programm.</p>
+
+<p>In Ausdrücken, in denen Zahlen und Zeichenketten mit dem + Operator gebraucht werden, konvertiert JavaScript die Zahlen in Zeichenketten. Siehe dazu das folgende Beispiel:</p>
+
+<pre class="brush: js notranslate">x = "The answer is " + 42 // "The answer is 42"
+y = 42 + " is the answer" // "42 is the answer"
+</pre>
+
+<p>In Ausdrücken mit anderen Operatoren, konvertiert JavaScript zahlen nicht in Zeichenketten. Zum Beispiel:</p>
+
+<pre class="brush: js notranslate">"37" - 7 // 30
+"37" + 7 // "377"
+</pre>
+
+<h3 id="Konvertieren_von_Zeichenketten_zu_Zahlen">Konvertieren von Zeichenketten zu Zahlen</h3>
+
+<p>In Fällen, in denen eine Zahl durch einen String repräsentiert wird, gibt es folgende Methoden, um die Zeichenkette in eine Zahl umzuwandeln.</p>
+
+<ul>
+ <li id="parseInt()_and_parseFloat()">{{jsxref("parseInt", "parseInt()")}}</li>
+ <li>{{jsxref("parseFloat", "parseFloat()")}}</li>
+</ul>
+
+<p><code>parseInt</code> gibt nur ganze Zahlen zurück, weshalb der Einsatz für Dezimalzahlen nicht geeignet ist. Zu einem guten Programmierstil gehört es, dass man immer die Basis bei <code>parseInt</code> mit angibt. Der <em>radix</em> Parameter der Methode gibt an, aus welchem Zahlensystem die Zahl stammt.</p>
+
+<p>Eine alternative Methode, um einen String in eine Zahl zu konvertieren ist der + (unär Plus) Operator:</p>
+
+<pre class="brush: js notranslate">"1.1" + "1.1" // "1.11.1"
+(+"1.1") + (+"1.1") // 2.2
+// Hinweis: die hinzugefügten Klammern sind nur für die Lesbarkeit.</pre>
+
+<h2 id="Literale">Literale</h2>
+
+<p>Man benutzt Literale, um in JavaScript Werte zu repräsentieren. Es sind feste Werte, keine Variablen, die man in einem Skript einsetzt. Dieses Kapitel beschreibt die folgeden Literaltypen:</p>
+
+<ul>
+ <li>{{anch("Array Literale")}}</li>
+ <li>{{anch("Boolean Literale")}}</li>
+ <li>{{anch("Gleitkomma Literale")}}</li>
+ <li>{{anch("Ganze Zahlen")}}</li>
+ <li>{{anch("Objekt Literale")}}</li>
+ <li>{{anch("RegExp Literale")}}</li>
+ <li>{{anch("String Literale")}}</li>
+</ul>
+
+<h3 id="Array_Literal">Array Literal</h3>
+
+<p>Ein Array Literal ist eine Liste von null oder mehr Ausdrücken. Jeder Ausdruck repräsentiert ein Element des Arrays. Diese Elemente sind von eckigen Klammern ([]) umschlossen. Wenn ein Array mit einem Array Literal erstellt wird, wird das Array mit allen definierten Elementen initialisiert und die länge des Arrays wird auf die Menge der Elemente gesetzt.</p>
+
+<p>Das folgende Beispiel erstellt das <code>coffees</code> Array mit drei Elementen und der Länge drei:</p>
+
+<pre class="brush: js notranslate">var coffees = ["French Roast", "Colombian", "Kona"];
+</pre>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Ein Array Literal ist eine Art von Objektinitialisierung. Sie dazu auch den <a href="/de/docs/Web/JavaScript/Guide/Working_with_Objects#Using_object_initializers">Einsatz von Objektinitialisierern</a>.</p>
+</div>
+
+<p>Wenn ein Array durch ein Literal im Toplevel Skript erstellt wird, interpretiert JavaScript das Array immer dann, wenn ein Ausdruck dieses Literal enthält. Im Gegensatz dazu wird ein Literal in einer Funktion immer neu erstellt, wenn die Funktion aufgerufen wird.</p>
+
+<p>Array Literale sind ebenfalls <code>Array</code> Objekte. Für mehr Details siehe {{jsxref("Array")}} und <a href="/de/docs/Web/JavaScript/Guide/Indexed_collections">Indexed collections.</a></p>
+
+<h4 id="Extra_Kommas_in_Array_Literalen">Extra Kommas in Array Literalen</h4>
+
+<p>Man muss nicht alle Elemente in einem Array Literal spezifizieren. Wenn man zwei Kommas in einer Reihe verwendet, wird das Array mit einem <code>undefined</code> Element erstellt. Das folgende Beispiel erstellt das <code>fish</code> Array:</p>
+
+<pre class="brush: js notranslate">var fish = ["Lion", , "Angel"];
+</pre>
+
+<p>Dieses Array hat zwei Elemente mit Werten und ein leeres Element (<code>fish[0]</code> ist "Lion",<code> fish[1]</code> ist <code>undefined</code> und <code>fish[2]</code> ist "Angel").</p>
+
+<p>Wenn man ein trennendes Komma am Ende der Elementliste hinzufügt, wird es ignoriert. Im folgenden Beispiel ist die Länge des Arrays drei. Es gibt kein <code>myList[3]</code>. Alle weiteren Kommas in der Liste führen zu einem neuen Element.</p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Trennende Kommas können in älteren Browserversionen zu Fehlern führen. Zudem ist es ein guter Stil diese Kommas zu entfernen.</p>
+</div>
+
+<pre class="brush: js notranslate">var myList = ['home', , 'school', ];
+</pre>
+
+<p>Im folgenden Beispiel hat das Array vier Elemente und <code>myList[0]</code> und <code>myList[2]</code> sind nicht spezifiziert.</p>
+
+<pre class="brush: js notranslate">var myList = [ , 'home', , 'school'];
+</pre>
+
+<p>Im folgenden Beispiel hat das Array vier Elemente und <code>myList[1]</code> und <code>myList[3]</code> sind nicht spezifiziert. <strong>Nur das letzte Komma wird ignoriert.</strong></p>
+
+<pre class="brush: js notranslate">var myList = ['home', , 'school', , ];
+</pre>
+
+<p>Das Verständnis für das Verhalten von extra Kommas ist wichtig, um JavaScript als Sprache zu verstehen. Immer, wenn man seinen eigenen Quelltext schreibt, sollten explizit fehlenden Elementen mit <code>undefined</code> deklariert werden, damit die Lesbarkeit und Wartbarkeit des Quelltextes besser ist.</p>
+
+<h3 id="Boolean_Literale">Boolean Literale</h3>
+
+<p>Der Boolean Typ hat zwei Literale: <code>true</code> und <code>false</code>.</p>
+
+<p>Man sollte die primitiven Werte <code>true</code> und <code>false</code> jedoch nicht mit den Werten true und false des Boolean Objektes verwechseln. Das Boolean Objekt ist eine Hülle um den primitiven Boolean Datentypen. Siehe im Artikel {{jsxref("Boolean")}} für weitere Informationen.</p>
+
+<h3 id="Numerische_Literale">Numerische Literale</h3>
+
+<p>Ganze Zahlen können als Dezimal- (Basis 10), Hexadezimal- (Basis 16), Oktal- (Basis 8) und Binärzahl (Basis 2) ausgedrückt werden.</p>
+
+<ul>
+ <li>Eine Dezimalzahlenliteral besteht aus einer Sequenz von Ziffern ohne eine führende 0.</li>
+ <li>Eine führende 0 oder 0o (oder 0O) bei einem Zahlenliteral deutet eine Oktalzahl an. Oktalzahlen können nur die Ziffern 0 bis 7 enthalten.</li>
+ <li>Ein führendes 0x (oder 0X) deutet eine Hexadezimalzahl an. Hexadezimale Ganzzahlen können als Stellen Ziffern (0 - 9) und die Buchstaben a - f bzw. A - F enthalten. (Die Schreibweise des Buchstaben ändert nicht den Wert der Stelle. Z. B. 0xa = 0xA = 10 und 0xf = 0xF = 15.)</li>
+ <li>Ein führendes 0b (oder 0B) deutet eine binäre Ganzzahl an. Binäre Ganzzahlen können nur die Ziffern 0 und 1 enthalten.</li>
+</ul>
+
+<p>Im folgenden Beispiel sind einige Beispiele für Zahlenliterale:</p>
+
+<pre class="eval notranslate">0, 117 und -345 (dezimal, Basis 10)
+015, 0001 und -0o77 (oktal, Basis 8)
+0x1123, 0x00111 und -0xF1A7 (hexadezimal, "hex", Base 16)
+0b11, 0b0011 und -0b11 (binär, Basis 2)
+</pre>
+
+<p>Für weitere Informationen siehe <a href="/de/docs/Web/JavaScript/Reference/Lexical_grammar#Numeric_literals">numerische Literale in der Lexikalischen Grammatik Referenz</a>.</p>
+
+<h3 id="Gleitkomma_Literale">Gleitkomma Literale</h3>
+
+<p>Ein Gleitkomma Literal kann die folgenden Abschnitte beinhalten:</p>
+
+<ul>
+ <li>Eine dezimale ganze Zahl, die mit einem Vorzeichen ("+" oder "-") versehen sein kann.</li>
+ <li>Einen Dezimalpunkt (".").</li>
+ <li>Eine Nachkommazahl (weitere Dezimalzahl).</li>
+ <li>Einen Exponenten.</li>
+</ul>
+
+<p>Der Exponent besteht aus einem "e" oder "E" gefolgt von einer ganzen Zahl, die mit einem Vorzeichen ("+" oder "-") versehen sein kann. Eine Gleitkommazahl muss mindestens aus einer Ziffer und entweder einem Dezimalpunkt oder einem "e" (oder "E") bestehen.</p>
+
+<p>Kurz und knapp sieht die Syntax folgendermaßen aus:</p>
+
+<pre class="eval notranslate">[(+|-)][ziffern][.ziffern][(E|e)[(+|-)]ziffern]
+</pre>
+
+<p>Zum Beispiel:</p>
+
+<pre class="eval notranslate">3.1415926
+-.123456789
+-3.1E+12
+.1e-23
+</pre>
+
+<h3 id="Objekt_Literale">Objekt Literale</h3>
+
+<p>Ein Objekt Literal ist eine Liste von null oder mehr Paaren von Eigenschaftsnamen und -werten, umschlossen von geschweiften Klammern ({}). Man sollte kein Objektliteral am Anfang eines Statements benutzen. Das wird zu einem Fehler führen oder nicht wie erwartet funktionieren, weil das {-Zeichen als Anfang eines Blocks interpretiert wird.</p>
+
+<p>Es folgt ein Beispiel für ein Objekt Literal. Das erste Element des <code>car</code> Objektes definiert eine Eigenschaft <code>myCar</code> und beschreibt diese mit einem neuen String "<code>Saturn</code>". Am zweiten Element, der <code>getCar</code> Eigenschaft, wird der Rückgabewert der aufgerufenen Funktion <code>carTypes("Honda")</code> zugewiesen. Das dritte Element, die <code>special</code> Eigenschaft, benutzt eine existierende Variable <code>sales</code>.</p>
+
+<pre class="brush: js notranslate">var sales = "Toyota";
+
+function carTypes(name) {
+  if (name === "Honda") {
+    return name;
+  } else {
+    return "Sorry, we don't sell " + name + ".";
+  }
+}
+
+var car = {
+  myCar: "Saturn",
+  getCar: carTypes("Honda"),
+  special: sales
+};
+
+console.log(car.myCar);   // Saturn
+console.log(car.getCar);  // Honda
+console.log(car.special); // Toyota
+</pre>
+
+<p>Für die Namen der Eigenschaften kann auch ein String oder ein Zahlen Literal verwendet werden. Für den Wert kann auch ein verschachteltes Objekt Literal genutzt werden. Das folgende Beispiel nutzt diese Optionen.</p>
+
+<pre class="brush: js notranslate">var car = { manyCars: {a: 'Saab', b: 'Jeep'}, 7: 'Mazda' };
+
+console.log(car.manyCars.b); // Jeep
+console.log(car[7]); // Mazda
+</pre>
+
+<p>Die Namen von Objekteigenschaften können ein String sein, was auch den leeren String beinhaltet. Wenn die Eigenschaftsnamen keine gültigen JavaScript {{Glossary("Identifier","Bezeichner")}} sind, müssen sie in Anführungszeichen geschrieben werden. Eigenschaftsnamen die keine gültigen Bezeichner sind, können nicht mit der Punktschreibweise (.) erreicht werden. Wohl aber mit der Array ähnlichen Notation ("<code>[]</code>").</p>
+
+<pre class="brush: js notranslate">var unusualPropertyNames = {
+  "": "An empty string",
+  "!": "Bang!"
+}
+console.log(unusualPropertyNames."");   // SyntaxError: Unexpected string
+console.log(unusualPropertyNames[""]);  // An empty string
+console.log(unusualPropertyNames.!);    // SyntaxError: Unexpected token !
+console.log(unusualPropertyNames["!"]); // Bang!</pre>
+
+<h4 id="Erweiterte_Objekt_Literale">Erweiterte Objekt Literale</h4>
+
+<p>In ES2015 wurde das Objekt Literal dahingehend erweitert, dass der Prototyp bei der Erstellung gesetzt wird. Desweiteren sind neue Funktionalitäten hinzugekommen, die eine Kurzschreibweise für <code>foo: foo</code> Zuweisungen, die Definitionen für Methoden, das Aufrufen von super Methoden und die Berechnung der Eigenschaftsnamen mit Ausdrücken ermöglichen. Alle diese Funktionen bringen zum Einen Klassendefinition und Objekt Literale näher zusammen und sind somit objektbasiertes Design und zum Anderen häufig vorteilhafter und bequemer.</p>
+
+<pre class="brush: js notranslate">var obj = {
+    // __proto__
+    __proto__: theProtoObj,
+    // Shorthand for ‘handler: handler’
+    handler,
+    // Methods
+    toString() {
+     // Super calls
+     return "d " + super.toString();
+    },
+    // Computed (dynamic) property names
+    [ 'prop_' + (() =&gt; 42)() ]: 42
+};</pre>
+
+<p>Bitte beachten:</p>
+
+<pre class="brush: js notranslate">var foo = {a: "alpha", 2: "two"};
+console.log(foo.a);    // alpha
+console.log(foo[2]);   // two
+//console.log(foo.2);  // Error: missing ) after argument list
+//console.log(foo[a]); // Error: a is not defined
+console.log(foo["a"]); // alpha
+console.log(foo["2"]); // two
+</pre>
+
+<h3 id="RegExp_Literale">RegExp Literale</h3>
+
+<p>Ein RegExp Literal (welcher <a href="/de/docs/Web/JavaScript/Guide/Regular_Expressions">im Detail</a> später erklärt wird) ist ein Pattern (Muster) umschlossen von Slashes (/). Das Folgende ist ein Beispiel für ein RegExp Literal:</p>
+
+<pre class="brush: js notranslate">var re = /ab+c/;</pre>
+
+<h3 id="String_Literale">String Literale</h3>
+
+<p>Ein String Literal besteht aus null oder mehr Zeichen, die von doppelten (") oder einfachen (') Anführungszeichen umschlossen sind. Ein String muss immer von gleichen Anführungszeichen umschlossen sein. Entweder von einfachen oder von doppelten Anführungszeichen. Im folgenden Beispiel sind ein paar String Literale gezeigt:</p>
+
+<pre class="brush: js notranslate">"foo"
+'bar'
+"1234"
+"eine Zeile \n weitere Zeile"
+"John's cat"
+</pre>
+
+<p>Man kann alle Methoden des String Objektes auf einem String Literal aufrufen, denn JavaScript konvertiert das Literal automatisch in ein temporäres String Objekt, führt die Methode aus und verwirft danach das temporäre Objekt. Man kann auch die <code>String.length</code> Eigenschaft mit einem String Literal benutzen:</p>
+
+<pre class="brush: js notranslate">console.log("John's cat".length)
+// Wird die Anzahl der Zeichen (auch Leerzeichen) ausgeben.
+// In diesem Fall 10.
+</pre>
+
+<p>In ES2015, wurden zudem Template Literale eingeführt. Template Literale sind von Backticks (` `) (<a href="https://de.wikipedia.org/wiki/Gravis_(Typografie)">Gravis</a>) umschlossen. Template Strings bieten syntaktischen Zucker für das Erstellen von Strings an. Sie sind vergleichbar mit den <em>String Interpolations</em> Funktionen in Perl, Python und anderen Sprachen. Optional können Marken eingefügt werden, um einen String benutzerdefiniert zu erstellen. Sie vermeiden Injection-Attacken und ermöglichen es Datenstrukturen in Strings unterzubringen.</p>
+
+<pre class="brush: js notranslate">// Standardliteral für die String erstellung
+`In JavaScript '\n' is a line-feed.`
+
+// Mehrzellige Strings
+`In JavaScript ist das
+ nicht erlaubt.`
+
+// String Interpolation
+var name = "Bob", time = "today";
+`Hello ${name}, how are you ${time}?`
+
+// Erstellung einer HTTP Anfrage.
+POST`http://foo.org/bar?a=${a}&amp;b=${b}
+     Content-Type: application/json
+     X-Credentials: ${credentials}
+     { "foo": ${foo},
+       "bar": ${bar}}`(myOnReadyStateChangeHandler);</pre>
+
+<p>Man sollte String Literale benutzen, sofern man nicht explizit ein Objekt benötigt. Für weitere Informationen siehe im {{jsxref("String")}} Artikel nach.</p>
+
+<h4 id="Einsatz_von_Sonderzeichen_in_Strings">Einsatz von Sonderzeichen in Strings</h4>
+
+<p>Neben den normalen Zeichen ist es auch möglich Sonderzeichen in einem String zu verwenden. Ein Beispiel ist im folgenden zu sehen:</p>
+
+<pre class="brush: js notranslate">"eine Zeile \n nächste Zeile"
+</pre>
+
+<p>Die folgende Tabelle Zeigt die Sonderzeichen, die in JavaScript Strings verwendet werden können:</p>
+
+<table class="standard-table">
+ <caption>Table: JavaScript Sonderzeichen</caption>
+ <thead>
+  <tr>
+   <th scope="col">Zeichen</th>
+   <th scope="col">Bedeutung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>\0</code></td>
+   <td>Null Byte</td>
+  </tr>
+  <tr>
+   <td><code>\b</code></td>
+   <td>Backspace</td>
+  </tr>
+  <tr>
+   <td><code>\f</code></td>
+   <td>Form feed</td>
+  </tr>
+  <tr>
+   <td><code>\n</code></td>
+   <td>New line</td>
+  </tr>
+  <tr>
+   <td><code>\r</code></td>
+   <td>Carriage return</td>
+  </tr>
+  <tr>
+   <td><code>\t</code></td>
+   <td>Tab</td>
+  </tr>
+  <tr>
+   <td><code>\v</code></td>
+   <td>Vertical tab</td>
+  </tr>
+  <tr>
+   <td><code>\'</code></td>
+   <td>Einfache Anführungszeichen</td>
+  </tr>
+  <tr>
+   <td><code>\"</code></td>
+   <td>Doppelte Anführungszeichen</td>
+  </tr>
+  <tr>
+   <td><code>\\</code></td>
+   <td>Backslash Zeichen</td>
+  </tr>
+  <tr>
+   <td><code>\<em>XXX</em></code></td>
+   <td>Das Zeichen, das im Latin-1 Encoding mit drei Oktalzahlen (<em>XXX</em>) Spezifiziert wird (0 bis 377). Zum Beispiel ist \251 die Oktalsequenz für das Copyrightsymbol.</td>
+  </tr>
+  <tr>
+  </tr>
+  <tr>
+   <td><code>\x<em>XX</em></code></td>
+   <td>Zeichen, die im Latin-1 Encoding mit zwei Hexadezimalzahlen (<em>XX</em>) spezifiziert werden (00 bis FF). Zum Beispiel ist \xA9 die Hexadezimalsequenz für das Copyrightsymbol.</td>
+  </tr>
+  <tr>
+  </tr>
+  <tr>
+   <td><code>\u<em>XXXX</em></code></td>
+   <td>Die Unicode Zeichen, die mit vier Hexadezimalziffern <em>XXXX</em> beschreiben werden. Zum Beispiel ist \u00A9 die Hexadezimalsequenz für das Copyrightsymbol. Siehe <a href="/de/docs/Web/JavaScript/Reference/Lexical_grammar#String_literals">Unicode escape Sequenzen</a>.</td>
+  </tr>
+  <tr>
+   <td><code>\u<em>{XXXXX}</em></code></td>
+   <td>Unicode code point escapes. Zum Beispiel ist \u{2F804} das gleiche wie das einfache Unicodezeichen \uD87E\uDC04.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Escaping_Zeichen">Escaping Zeichen</h4>
+
+<p>Für nicht in der Tabelle gezeigte Zeichen wird ein voranstehendes Backslash ignoriert. Der Einsatz von Backslashs ist Veraltet und sollte vermieden werden.</p>
+
+<p>Man kann Anführungszeichen in einen String hinzufügen, indem ein Führendes Backslash eingesetzt wird. Das wird auch <em>escaping</em> der Anführungszeichen genannt. Ein Beispiel:</p>
+
+<pre class="brush: js notranslate">var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service.";
+console.log(quote);
+</pre>
+
+<p>Das Ergebnis ist:</p>
+
+<pre class="eval notranslate">He read "The Cremation of Sam McGee" by R.W. Service.
+</pre>
+
+<p>Um ein Backslash in einem String zu verwenden, muss dieses mit einem Backslash escaped werden. Zum Beispiel muss der Pfad <code>c:\temp</code> wie folgt geschrieben werden:</p>
+
+<pre class="brush: js notranslate">var home = "c:\\temp";
+</pre>
+
+<p>Man kann zudem Zeilenumbrüche mit einem vorangegangenen Backslash escapen. Das Backslash und der Zeilenumbruch werden aus dem String entfernt.</p>
+
+<pre class="brush: js notranslate">var str = "this string \
+is broken \
+across multiple\
+lines."
+console.log(str);   // this string is broken across multiple lines.
+</pre>
+
+<p>JavaScript kennt keine "heredoc" Syntax. Um eine solche zu simulieren muss am Ende jeder Zeile mit einem Zeilenumbruch (\n) ein Backslash stehen:</p>
+
+<pre class="brush: js notranslate">var poem =
+"Roses are red,\n\
+Violets are blue.\n\
+Sugar is sweet,\n\
+and so is foo."
+</pre>
+
+<p>ECMAScript 2015 führte einen neuen Literaltyp, das Template Literal, ein. Dieses führte, für viele neue Funktionen, Strings mit mehrere Zeilen ein!</p>
+
+<pre class="brush: js notranslate">var poem =
+`Roses are red,
+Violets are blue.
+Sugar is sweet,
+and so is foo.`
+</pre>
+
+<h2 id="Mehr_Informationen">Mehr Informationen</h2>
+
+<p>Dieses Kapitel beschränkt sich auf die Basissyntax für Deklarationen und Typen. Um mehr über die Sprachkonstrukte von JavaScript zu lernen siehe in die folgenden Kapitel dieses Guides:</p>
+
+<ul>
+ <li><a href="/de/docs/web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung">Kontrollfluss und Fehlerbehandlung</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Guide/schleifen_und_iterationen">Schleifen und Iterationen</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Guide/Funktionen">Funktionen</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Guide/Ausdruecke_und_Operatoren">Ausdrücke und Operatoren</a></li>
+</ul>
+
+<p>Im nächsten Kapitel wird ein Blick auf Kontrollflüsse und Fehlerbehandlungen geworfen.</p>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Einführung", "Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung")}}</p>
diff --git a/files/de/web/javascript/guide/index.html b/files/de/web/javascript/guide/index.html
new file mode 100644
index 0000000000..8e9fcfa13b
--- /dev/null
+++ b/files/de/web/javascript/guide/index.html
@@ -0,0 +1,130 @@
+---
+title: Guide
+slug: Web/JavaScript/Guide
+tags:
+  - Guide
+  - JavaScript
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Guide
+---
+<p>{{jsSidebar("JavaScript Guide")}}</p>
+
+<p class="summary">Der JavaScript Guide stellt einen Überblick zu <a href="/de/docs/Web/JavaScript">JavaScript</a> bereit und zeigt wie man die Sprache verwenden kann. Für detaillierte Informationen über einzelne Sprachteile JavaScripts gibt es die <a href="/de/docs/Web/JavaScript/Reference">JavaScript Referenz</a>.</p>
+
+<h2 id="Kapitel">Kapitel</h2>
+
+<p>Dieser Guide ist in mehrere Kapitel aufgeteilt:</p>
+
+<ul class="card-grid">
+ <li><span><a href="/de/docs/Web/JavaScript/Guide/Einführung">Einführung</a></span>
+
+  <p><a href="/de/docs/Web/JavaScript/Guide/Einführung#Wo_finden_Sie_Informationen_zu_JavaScript_.3F">Über diesen Guide</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Einführung#Was_ist_JavaScript">Über JavaScript</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Einführung#JavaScript_and_Java">JavaScript und Java</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Einführung#JavaScript_and_the_ECMAScript_Specification">ECMAScript</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Einführung#Erste_Schritte_mit_JavaScript">Tools</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Einführung#Hello_world">Hello World</a></p>
+ </li>
+ <li><span><a href="/de/docs/Web/JavaScript/Guide/Grammatik_und_Typen">Grammatik und Typen</a></span>
+  <p><a href="/de/docs/Web/JavaScript/Guide/Grammatik_und_Typen#Basics">Grundlegender Syntax &amp; Kommentare</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Grammatik_und_Typen#Declarations">Deklarationen</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Grammatik_und_Typen#Variable_scope">Variablen-Scope</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Grammatik_und_Typen#Variable_hoisting">Variablen-Hoisting</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Grammatik_und_Typen#Data_structures_and_types">Datenstrukturen und Typen</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Grammatik_und_Typen#Literals">Literale</a></p>
+ </li>
+ <li><span><a href="/de/docs/Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung">Kontrollfluss und Fehlerbehandlung</a></span>
+  <p><code><a href="/de/docs/Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung#if...else_statement">if...else</a></code><br>
+   <code><a href="/de/docs/Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung#switch_statement">switch</a></code><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung#Exception_handling_statements"><code>try</code>/<code>catch</code>/<code>throw</code></a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung#Utilizing_Error_objects"><code>Error</code>-Objekte</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung#Promises">Promises</a></p>
+ </li>
+ <li><span><a href="/de/docs/Web/JavaScript/Guide/schleifen_und_iterationen">Schleifen und Iteration</a></span>
+  <p><code><a href="/de/docs/Web/JavaScript/Guide/schleifen_und_iterationen#for_Anweisung">for</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/schleifen_und_iterationen#while_Anweisung">while</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/schleifen_und_iterationen#do...while_Anweisung">do...while</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/schleifen_und_iterationen#break_Anweisung">break</a>/<a href="/de/docs/Web/JavaScript/Guide/schleifen_und_iterationen#continue_Anweisung">continue</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/schleifen_und_iterationen#for...in_Anweisung">for..in</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/schleifen_und_iterationen#for...of_Anweisung">for..of</a></code></p>
+ </li>
+</ul>
+
+<ul class="card-grid">
+ <li><span><a href="/de/docs/Web/JavaScript/Guide/Funktionen">Funktionen</a></span>
+
+  <p><a href="/de/docs/Web/JavaScript/Guide/Funktionen#Defining_functions">Funktionen definieren</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Funktionen#Calling_functions">Funktionen aufrufen</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Funktionen#Function_scope">Scope von Funktionen</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Funktionen#Closures">Closures</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Funktionen#Using_the_arguments_object">Argumente</a> &amp; <a href="/de/docs/Web/JavaScript/Guide/Funktionen#Function_parameters">Parameter</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Funktionen#Arrow_functions">Arrow-Funktionen</a></p>
+ </li>
+ <li><span><a href="/de/docs/Web/JavaScript/Guide/Ausdruecke_und_Operatoren">Ausdrücke und Operatoren</a></span>
+  <p><a href="/de/docs/Web/JavaScript/Guide/Ausdruecke_und_Operatoren#Assignment_operators">Zuweisungen </a>&amp; <a href="/de/docs/Web/JavaScript/Guide/Ausdruecke_und_Operatoren#Comparison_operators">Vergleiche</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Ausdruecke_und_Operatoren#Arithmetic_operators">Arithmetische Operatoren</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Ausdruecke_und_Operatoren#Bitwise_operators">Bitwise</a> &amp; <a href="/de/docs/Web/JavaScript/Guide/Ausdruecke_und_Operatoren#Logical_operators">logische Operatoren</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Ausdruecke_und_Operatoren#Conditional_(ternary)_operator">Bedingter (ternärer) Operator</a></p>
+ </li>
+ <li><span><a href="/de/docs/Web/JavaScript/Guide/Numbers_and_dates">Zahlen und Datumsangaben</a></span><a href="/de/docs/Web/JavaScript/Guide/Numbers_and_dates#Numbers">Zahlen-Literale</a>
+  <p><a href="/de/docs/Web/JavaScript/Guide/Numbers_and_dates#Number_object"><code>Number</code>-Objekt</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Numbers_and_dates#Math_object"><code>Math</code>-Objekt</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Numbers_and_dates#Date_object"><code>Date</code>-Objekt</a></p>
+ </li>
+ <li><span><a href="/de/docs/Web/JavaScript/Guide/Text_formatting">Textformatierungen</a></span>
+  <p><a href="/de/docs/Web/JavaScript/Guide/Text_formatting#String_literals">String-Literale</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Text_formatting#String_objects"><code>String</code>-Objekt</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Text_formatting#Multi-line_template_literals">Template Literale</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Text_formatting#Internationalization">Internationalisierung</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Regular_Expressions">Reguläre Ausdrücke</a></p>
+ </li>
+</ul>
+
+<ul class="card-grid">
+ <li><span><a href="/de/docs/Web/JavaScript/Guide/Indexed_collections">Indexierte Kollektionen</a></span>
+
+  <p><a href="/de/docs/Web/JavaScript/Guide/Indexed_collections#Array_object">Arrays</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Indexed_collections#Typed_Arrays">Typed arrays</a></p>
+ </li>
+ <li><span><a href="/de/docs/Web/JavaScript/Guide/Keyed_collections">Kollektionen mit Schlüsseln</a></span>
+  <p><code><a href="/de/docs/Web/JavaScript/Guide/Keyed_collections#Map_object">Map</a></code><br>
+   <code><a href="/de/docs/Web/JavaScript/Guide/Keyed_collections#WeakMap_object">WeakMap</a></code><br>
+   <code><a href="/de/docs/Web/JavaScript/Guide/Keyed_collections#Set_object">Set</a></code><br>
+   <code><a href="/de/docs/Web/JavaScript/Guide/Keyed_collections#WeakSet_object">WeakSet</a></code></p>
+ </li>
+ <li><span><a href="/de/docs/Web/JavaScript/Guide/Mit_Objekten_arbeiten">Mit Objekten arbeiten</a></span>
+  <p><a href="/de/docs/Web/JavaScript/Guide/Mit_Objekten_arbeiten#Objects_and_properties">Objekte und Eigenschaften</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Mit_Objekten_arbeiten#Creating_new_objects">Objekte erstellen</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Mit_Objekten_arbeiten#Defining_methods">Methoden definieren</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Mit_Objekten_arbeiten#Defining_getters_and_setters">Getter und Setter</a></p>
+ </li>
+ <li><span><a href="/de/docs/Web/JavaScript/Guide/Feinheiten_des_Objektmodells">Feinheiten des Objektmodells</a></span>
+  <p><a href="/de/docs/Web/JavaScript/Guide/Feinheiten_des_Objektmodells#Class-based_vs._prototype-based_languages">Prototypen-basierte OOP</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Feinheiten_des_Objektmodells#Creating_the_hierarchy">Objekthierarchien erstellen</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Feinheiten_des_Objektmodells#Property_inheritance_revisited">Vererbung</a></p>
+ </li>
+</ul>
+
+<ul class="card-grid">
+ <li><span><a href="/de/docs/Web/JavaScript/Guide/Using_promises">Promises</a></span>
+
+  <p><a href="/de/docs/Web/JavaScript/Guide/Using_promises#Guarantees">Garantien</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Using_promises#Chaining">Verkettung</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Using_promises#Error_propagation">Fehlerübertragung</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Using_promises#Composition">Komposition</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Using_promises#Timing">Zeitablauf</a></p>
+ </li>
+ <li><span><a href="/de/docs/Web/JavaScript/Guide/Iteratoren_und_Generatoren">Iteratoren und Generatoren</a></span>
+  <p><a href="/de/docs/Web/JavaScript/Guide/Iteratoren_und_Generatoren#Iterators">Iterators</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Iteratoren_und_Generatoren#Iterables">Iterables</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Iteratoren_und_Generatoren#Generators">Generators</a></p>
+ </li>
+ <li><span><a href="/de/docs/Web/JavaScript/Guide/Meta_programming">Meta-Programmierung</a></span>
+  <p><code><a href="/de/docs/Web/JavaScript/Guide/Meta_programming#Proxies">Proxy</a></code><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Meta_programming#Handlers_and_traps">Handler und Traps</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Meta_programming#Revocable_Proxy">Widerrufbare Proxies</a><br>
+   <code><a href="/de/docs/Web/JavaScript/Guide/Meta_programming#Reflection">Reflect</a></code></p>
+ </li>
+</ul>
+
+<p>{{Next("Web/JavaScript/Guide/Introduction")}}</p>
diff --git a/files/de/web/javascript/guide/indexed_collections/index.html b/files/de/web/javascript/guide/indexed_collections/index.html
new file mode 100644
index 0000000000..fa47c0841b
--- /dev/null
+++ b/files/de/web/javascript/guide/indexed_collections/index.html
@@ -0,0 +1,448 @@
+---
+title: Indexed collections
+slug: Web/JavaScript/Guide/Indexed_collections
+tags:
+  - Guide
+  - Handbuch
+  - JavaScript
+  - Method
+  - Méthode
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Guide/Indexed_collections
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Keyed_Collections")}}</div>
+
+<p class="summary">Dieses Kapitel beschreibt Datensammlungen, die nach einem Indexwert sortiert sind. Diese beinhalten Arrays und Array-ähnliche Konstrukte, wie {{jsxref("Array")}} Objekte {{jsxref("TypedArray")}} Objekte.</p>
+
+<h2 id="Array_Objekt"><code>Array</code> Objekt</h2>
+
+<p>Ein <em>Array</em> ist ein sortiertes Set an Werten, die mit einem Namen und einem Index referenziert werden. Zum Beispiel könnte ein Array mit dem Namen <code>emp</code> Mitarbeiternamen enthalten, die über ihre Mitarbeiternummer indexiert sind. <code>emp[1]</code> würde somit Mitarbeiter Eins sein, <code>emp[2]</code> ist Mitarbeiter Zwei, und so weiter.</p>
+
+<p>JavaScript hat keinen expliziten Array-Datentyp, aber es ist möglich, das vordefinierte <code>Array</code> Objekt und dessen Methoden zu verwenden, um mit Arrays zu arbeiten. Das <code>Array</code> Objekt verfügt über Methoden, um Arrays auf unterschiedliche Weisen zu manipulieren. Es hat ein Property um die Arraylänge zu bestimmen, und andere Properties für die Verwendung von Regular Expressions.</p>
+
+<h3 id="Ein_Array_erstellen">Ein Array erstellen</h3>
+
+<p>Die folgenden Statements erstellen äquivalente Arrays:</p>
+
+<pre class="brush: js">var arr = new Array(element0, element1, ..., elementN);
+var arr = Array(element0, element1, ..., elementN);
+var arr = [element0, element1, ..., elementN];
+</pre>
+
+<p><code>element0, element1, ..., elementN</code> ist eine Liste von Werten für die Elemente im Array. Das Array wird mit den Werten als Elemente initialisiert. Das <code>length</code> Property des Arrays entspricht dann der Anzahl Argumente.</p>
+
+<p>Die Bracket-Syntax wird als "Array-Literal" oder "Array-Initialisierer" bezeichnet. Es ist eine kürzere Form der Array-Erstellung und wird allgemein bevorzugt. Siehe <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Array_literals">Array literals</a> für weitere Details.</p>
+
+<p>Um ein leeres Array mit einer Länge von mehr als Null zu erstellen, kann eine der folgenden Statements verwendet werden:</p>
+
+<pre class="brush: js">var arr = new Array(arrayLength);
+var arr = Array(arrayLength);
+
+// Folgendes hat den selben Effekt.
+var arr = [];
+arr.length = arrayLength;
+</pre>
+
+<div class="note">
+<p><strong>Bemerkung :</strong> im obigen Code, <code>arrayLength</code> muss ein <code>Number</code> Objekt sein, ansonsten wird ein Array mit einem Element (dem übergebenen Wert) erstellt. Ein Aufruf von <code>arr.length</code> wird <code>arrayLength</code> zurückgeben, aber das Array besteht aus leeren (<code>undefined</code>) Elementen. Eine {{jsxref("Statements/for...in","for...in")}} Schleife wird keine der Elemente aus dem Array zurückgeben.</p>
+</div>
+
+<p>Neben der Zuweisung an eine neue Variable, wie im Beispiel oben gezeigt, können Arrays auch als Property eines neuen oder existierenden Objekts zugewiesen werden:</p>
+
+<pre class="brush: js">var obj = {};
+// Weist das Array einem Property des bestehenden Objekts 'obj'
+// zu.
+obj.prop = [element0, element1, ..., elementN];
+
+// Weist das Array einem Property auf dem neuen Objekt 'obj'
+// zu.
+var obj = {prop: [element0, element1, ...., elementN]};
+</pre>
+
+<p>Wenn ein Array mit einem einzelnen <code>Number</code> Objekt erstellt werden soll, muss die Bracket-Syntax verwendet werden. Wenn ein einzelnes <code>Number</code> Objekt an den/der Array() Konstruktor oder Funktion übergeben wird, wird es als <code>arrayLength</code> und nicht als einzelnes Element interpretiert.</p>
+
+<pre class="brush: js">var arr = [42];      // Erstellt ein Array mit genau einem
+                     // Element: der Nummer 42.
+
+var arr = Array(42); // Erstellt ein Array ohne Elemente und
+                     // arr.length wird als 42 gesetzt; dies
+                     // ist äquivalent zu:
+var arr = [];
+arr.length = 42;
+</pre>
+
+<p>Wenn <code>Array(N)</code> aufgerufen wird und <code>N</code> keine Ganzzahl ist, wird ein <code>RangeError</code> geworfen. Das folgende Beispiel illustriert dieses Verhalten:</p>
+
+<pre class="brush: js">var arr = Array(9.3);  // RangeError: Invalid array length
+                       // "Ungültige Array-Länge"</pre>
+
+<p>Wenn im Code Arrays mit einzelnen Elements eines willkürlichen Datentyp verlangt sind, ist es sicherer, Array-Literals zu verwenden, oder zuerst ein leeres Array zu erstellen und dann das einzelne Element hinzuzufügen.</p>
+
+<h3 id="Ein_Array_abfüllen">Ein Array abfüllen</h3>
+
+<p>Ein Array kann abgefüllt werden, indem dessen Elemente mit Werten abgefüllt werden:</p>
+
+<pre class="brush: js">var emp = [];
+emp[0] = 'Casey Jones';
+emp[1] = 'Phil Lesh';
+emp[2] = 'August West';
+</pre>
+
+<div class="note">
+<p><strong>Bemerkung :</strong> Wenn ein Wert dem Array-Operator übergeben wird, der kein Integer ist, wie im obigen Code, wird ein Property auf dem Array-Objekt erstellt, statt als Array-Element.</p>
+
+<p>Der Array-Operator ist die Rechteckige Klammer nach der Array-Variable.</p>
+</div>
+
+<pre class="brush: js">var arr = [];
+arr[3.4] = 'Oranges';
+console.log(arr.length);                // 0
+console.log(arr.hasOwnProperty(3.4));   // true
+</pre>
+
+<p>Arrays können auch bei der Erstellung abgefüllt werden:</p>
+
+<pre class="brush: js">var myArray = new Array('Hello', myVar, 3.14159);
+var myArray = ['Mango', 'Apple', 'Orange'];
+</pre>
+
+<h3 id="Array-Elemente_referenzieren">Array-Elemente referenzieren</h3>
+
+<p>Ein Element in einem Array kann mit dessen Ordinalzahl (Index) referenziert werden. Beispielweise wird der folgende Array erstellt:</p>
+
+<pre class="brush: js">var myArray = ['Earth', 'Wind', 'Fire'];
+</pre>
+
+<p>Das erste Element kann mit <code>myArray[0]</code>, und das zweite Element des Arrays mit <code>myArray[1]</code> referenziert werden. Der Index der Elemente beginnt mit Null.</p>
+
+<div class="note">
+<p><strong>Bemerkung :</strong> Der Array-Operator (Rechteckige Klammer) wird auch für den Zugriff auf die Properties des Arrays (Arrays sind in JavaScript auch Objekte) verwendet. Beispielsweise:</p>
+</div>
+
+<pre class="brush: js">var arr = ['one', 'two', 'three'];
+arr[2];                            // three
+arr['length'];                     // 3
+</pre>
+
+<h3 id="Das_length_Property_verstehen">Das length Property verstehen</h3>
+
+<p>Auf dem Implementierungslevel, Arrays in JavaScript legen ihre Elemente als normale Properties eines Objekts (dem Array selbst) mit dessen Index als Property-Name ab. Das <code>length</code> Property ist speziell; Es gibt immer den Index des letzen Elements plus Eins (im folgenden Beispiel hat Dusty den Index 30, also gibt <code>cats.length</code> 30 + 1 zurück) zurück. Array-Indexe starten in JavaScript immer mit 0 und nicht mit 1. Dies bedeutet, dass das <code>length</code> Property immer um Eins grösser ist, als der höchste Index im Array:</p>
+
+<pre class="brush: js">var cats = [];
+cats[30] = ['Dusty'];
+console.log(cats.length); // 31
+</pre>
+
+<p>Das <code>length</code> Property kann auch beschrieben werden. Wird ein Wert zugewiesen, der kleiner ist, als die Anzahl Elemente im Array, wird das Array auf die angegebene Grösse geschrumpft; das Array wird geleert, wenn 0 zugewiesen wird:</p>
+
+<pre class="brush: js">var cats = ['Dusty', 'Misty', 'Twiggy'];
+console.log(cats.length); // 3
+
+cats.length = 2;
+console.log(cats); // Loggt "Dusty, Misty" - Twiggy wurde
+                   // entfernt.
+
+cats.length = 0;
+console.log(cats); // Loggt nichts; Das 'cats' Array ist leer.
+
+cats.length = 3;
+console.log(cats); // Loggt [undefined, undefined, undefined].
+</pre>
+
+<h3 id="Iteration_über_Arrays">Iteration über Arrays</h3>
+
+<p>Eine gebräuchliche Operation ist die Iteration über die Werte eines Arrays, um jedes Element auf eine Weise zu verarbeiten. Die einfachste Variate ist:</p>
+
+<pre class="brush: js">var colors = ['red', 'green', 'blue'];
+for (var i = 0; i &lt; colors.length; i++) {
+  console.log(colors[i]);
+}
+</pre>
+
+<p>Wenn es ausgeschlossen ist, dass eines der Elemente im Array in einem Boolean-Kontext als <code>false</code> evaluiert wird — beispielsweise, wenn es nur aus <a href="/en-US/docs/DOM" title="en-US/docs/DOM">DOM</a> Knoten besteht — kann ein effizienterer Ausdruck verwendet werden:</p>
+
+<pre class="brush: js">var divs = document.getElementsByTagName('div');
+for (var i = 0, div; div = divs[i]; i++) {
+  /* Verarbeite das div auf irgendeine Weise. */
+}
+</pre>
+
+<p>Dies vermeidet den Overhead bei der Überprüfung der Array-Länge und  weist der <code>div</code> Variable den aktuellen Wert des Schleifendurchlaufs sofort zu.</p>
+
+<p>Die {{jsxref("Array.forEach", "forEach()")}} Methode erlaubt eine andere Variate zur Iteration über ein Array:</p>
+
+<pre class="brush: js">var colors = ['red', 'green', 'blue'];
+colors.forEach(function(color) {
+  console.log(color);
+});
+</pre>
+
+<p>Die Funktion, die <code>forEach</code> übergeben wird, wird für jedes Element im Array ausgeführt, wobei das Element als Argument der Funktion übergeben wird. Elemente ohne Wert (<code>undefined</code>) werden von <code>forEach</code> nicht iteriert.</p>
+
+<p>Elemente ohne Wert werden von <code>forEach</code> nur übersprungen, wenn sie nicht manuell zugewiesen wurden:</p>
+
+<pre class="brush: js">var array = ['first', 'second', , 'fourth'];
+
+// Gibt ['first', 'second', 'fourth'] zurück.
+array.forEach(function(element) {
+  console.log(element);
+})
+
+if (array[2] === undefined) { // true
+  console.log('array[2] is undefined');
+}
+
+var array = ['first', 'second', undefined, 'fourth'];
+
+// Gibt ['first', 'second', undefined, 'fourth'] zurück.
+array.forEach(function(element) {
+  console.log(element);
+})</pre>
+
+<p>Weil JavaScript Elemente als normale Objekt-Properties abgelegt werden, ist es nicht ratsam Arrays mit {{jsxref("Statements/for...in","for...in")}} zu iterieren, weil normale Elemente plus alle aufzählbaren (enumerable) Properties aufgelistet werden.</p>
+
+<h3 id="Array-Methoden">Array-Methoden</h3>
+
+<p>Das {{jsxref("Array")}} Objekt verfügt über folgende Methoden:</p>
+
+<p>{{jsxref("Array.concat", "concat()")}} hängt zwei Arrays aneinander und gibt das kombinierte Array zurück.</p>
+
+<pre class="brush: js">var myArray = new Array('1', '2', '3');
+myArray = myArray.concat('a', 'b', 'c');
+// myArray ist nun ["1", "2", "3", "a", "b", "c"].
+</pre>
+
+<p>{{jsxref("Array.join", "join(deliminator = ',')")}} kombiniert alle Elemente eines Arrays in einen String mit einem Delimiter.</p>
+
+<pre class="brush: js">var myArray = new Array('Earth', 'Wind', 'Fire');
+var list = myArray.join(' - '); // list ist
+                                // "Earth - Wind - Fire".
+</pre>
+
+<p>{{jsxref("Array.push", "push()")}} fügt eines oder mehrere Elemente an ein Array und gibt den Wert des neuen <code>length</code> Property zurück.</p>
+
+<pre class="brush: js">var myArray = new Array('1', '2');
+myArray.push('3'); // myArray ist nun ["1", "2", "3"].
+</pre>
+
+<p>{{jsxref("Array.pop", "pop()")}} entfernt das letzte Element des Arrays und gibt es zurück.</p>
+
+<pre class="brush: js">var myArray = new Array('1', '2', '3');
+var last = myArray.pop();
+// myArray ist nun ["1", "2"], last = "3"
+</pre>
+
+<p>{{jsxref("Array.shift", "shift()")}} entfernt das erste Element des Arrays und gibt es zurück.</p>
+
+<pre class="brush: js">var myArray = new Array('1', '2', '3');
+var first = myArray.shift();
+// myArray ist nun ["2", "3"], first = "1"
+</pre>
+
+<p>{{jsxref("Array.unshift", "unshift()")}} fügt eines oder mehrere Elemente an den Anfang des Arrays und gibt den Wert des neuen <code>length</code> Property zurück.</p>
+
+<pre class="brush: js">var myArray = new Array('1', '2', '3');
+myArray.unshift('4', '5');
+// myArray wird ["4", "5", "1", "2", "3"].</pre>
+
+<p>{{jsxref("Array.slice", "slice(start_index, upto_index)")}} extrahiert einen Ausschnitt des Arrays und gibt ein neues Array zurück.</p>
+
+<pre class="brush: js">var myArray = new Array('a', 'b', 'c', 'd', 'e');
+myArray = myArray.slice(1, 4); // Beginnt bei Index 1 und
+                               // extrahiert alle Elemente bis
+                               // Index 3 und gibt somit
+                               // [ "b", "c", "d"] zurück.
+</pre>
+
+<p>{{jsxref("Array.splice", "splice(index, count_to_remove, addElement1, addElement2, ...)")}} entfernt einen Teil des Arrays und ersetzt sie (optional). Der rückgegebene Wert entspricht den entfernten Elementen.</p>
+
+<pre class="brush: js">var myArray = new Array('1', '2', '3', '4', '5');
+myArray.splice(1, 3, 'a', 'b', 'c', 'd');
+// myArray ist nun ["1", "a", "b", "c", "d", "5"].
+// Dieser Code startet mit Index 1 (wo '2' war), entfernt dort
+// 3 Elemente, und fügt die Werte 'a' bis '5' ein.
+</pre>
+
+<p>{{jsxref("Array.reverse", "reverse()")}} kehrt die Reihenfolge der Array-Elemente um; das erste Element ist neu das letzte und das letzte Element ist nun das erste.</p>
+
+<pre class="brush: js">var myArray = new Array('1', '2', '3');
+myArray.reverse();
+// Kehrt die Reihenfolge der Array-Elemente um.
+// myArray = ["3", "2", "1"]
+</pre>
+
+<p>{{jsxref("Array.sort", "sort()")}} sortiert die Elemente im Array.</p>
+
+<pre class="brush: js">var myArray = new Array('Earth', 'Wind', 'Fire');
+myArray.sort();
+// Sortiert das Array.
+// myArray = ["Earth", "Fire", "Wind"]
+</pre>
+
+<p><code>sort()</code> kann auch eine Callback-Funktion verwenden, um zu bestimmen, wie die Elemente miteinander verglichen werden sollen. Die Funktion vergleicht zwei Werte und gibt einen von drei Werten zurück:</p>
+
+<p>Beispielsweise wird der folgende Code das Array nach dem letzten Buchstaben des Strings sortieren:</p>
+
+<pre class="brush: js">var sortFn = function(a, b) {
+  if (a[a.length - 1] &lt; b[b.length - 1]) return -1;
+  if (a[a.length - 1] &gt; b[b.length - 1]) return 1;
+  if (a[a.length - 1] == b[b.length - 1]) return 0;
+}
+myArray.sort(sortFn);
+// Sortiert das Array nach dem letzten Buchstaben.
+// myArray = ["Wind","Fire","Earth"]</pre>
+
+<ul>
+ <li>Wenn <code>a</code> kleiner ist als <code>b</code>, -1 (oder eine andere negative Zahl) wird zurückgegeben</li>
+ <li>Wenn <code>a</code> ist grösser als <code>b</code>, 1 (oder eine andere positive Zahl) wird zurückgegeben</li>
+ <li>Wenn <code>a</code> und <code>b</code> äquivalent sind, wird 0 zurückgegeben.</li>
+</ul>
+
+<p>{{jsxref("Array.indexOf", "indexOf(searchElement[, fromIndex])")}} durchsucht das Array nach <code>searchElement</code> und gibt den Index des ersten Treffers zurück.</p>
+
+<pre class="brush: js">var a = ['a', 'b', 'a', 'b', 'a'];
+console.log(a.indexOf('b')); // Loggt 1.
+// Nochmals, die Suche beginnt ab dem Element mit dem Index 2.
+console.log(a.indexOf('b', 2)); // Loggt 3.
+console.log(a.indexOf('z')); // Loggt -1, weil 'z' nicht
+                             // gefunden wurde.
+</pre>
+
+<p>{{jsxref("Array.lastIndexOf", "lastIndexOf(searchElement[, fromIndex])")}} funktioniert wie <code>indexOf</code>, aber startet die Suche am Ende des Arrays.</p>
+
+<pre class="brush: js">var a = ['a', 'b', 'c', 'd', 'a', 'b'];
+console.log(a.lastIndexOf('b')); // Loggt 5.
+// Startet die Suche ab dem Element mit dem Index 4.
+console.log(a.lastIndexOf('b', 4)); // Loggt 1.
+console.log(a.lastIndexOf('z')); // Loggt -1.
+</pre>
+
+<p>{{jsxref("Array.forEach", "forEach(callback[, thisObject])")}} führt <code>callback</code> für jedes Element aus.</p>
+
+<pre class="brush: js">var a = ['a', 'b', 'c'];
+a.forEach(function(element) { console.log(element); });
+// Loggt jedes Element.
+</pre>
+
+<p>{{jsxref("Array.map", "map(callback[, thisObject])")}} gibt ein neues Array zurück, aus dem Rückgabewert der <code>callback</code> Funktion.</p>
+
+<pre class="brush: js">var a1 = ['a', 'b', 'c'];
+var a2 = a1.map(function(item) { return item.toUpperCase(); });
+console.log(a2); // Loggt ['A', 'B', 'C'].
+</pre>
+
+<p>{{jsxref("Array.filter", "filter(callback[, thisObject])")}} gibt ein Array zurück, das aus allen Elementen besteht, bei denen die <code>callback</code> Funtion <code>true</code> zurückgibt.</p>
+
+<pre class="brush: js">var a1 = ['a', 10, 'b', 20, 'c', 30];
+var a2 = a1.filter(function(item) { return typeof item === 'number'; });
+console.log(a2); // Loggt [10, 20, 30].
+</pre>
+
+<p>{{jsxref("Array.every", "every(callback[, thisObject])")}} gibt <code>true</code> zurück, wenn die <code>callback</code> Funktion für jedes Element auch <code>true</code> zurückgibt.</p>
+
+<pre class="brush: js">function isNumber(value) {
+  return typeof value === 'number';
+}
+var a1 = [1, 2, 3];
+console.log(a1.every(isNumber)); // Loggt true.
+var a2 = [1, '2', 3];
+console.log(a2.every(isNumber)); // Loggt false.
+</pre>
+
+<p>{{jsxref("Array.some", "some(callback[, thisObject])")}} gibt <code>true</code> zurück, wenn die <code>callback</code> Funktion für alle Elemente mindestens einmal <code>true</code> zurückgibt.</p>
+
+<pre class="brush: js">function isNumber(value) {
+  return typeof value === 'number';
+}
+var a1 = [1, 2, 3];
+console.log(a1.some(isNumber)); // Loggt true.
+var a2 = [1, '2', 3];
+console.log(a2.some(isNumber)); // Loggt true.
+var a3 = ['1', '2', '3'];
+console.log(a3.some(isNumber)); // Loggt false.
+</pre>
+
+<p>Die obige Methoden, die eine <code>callback</code> Funktion als Argument verlangen sind als <em>Iterative Methoden</em> bekannt, weil sie über das ganze Array auf irgendeine Weise iterieren. Jede der Methoden nimmt ein optionales zweites Argument <code>thisObject</code>. Wenn <code>thisObject</code> übergeben wird, wird es im Kontext der <code>callback</code> Funktion als <code>this</code> behandelt. Falls es nicht übergeben wird, wie es auch der Fall ist, wenn eine Funktion ausserhalb eines expliziten Objektkontext aufgerufen wird, referenziert this das globale Objekt ({{domxref("window")}}).</p>
+
+<p>Die <code>callback</code> Funktion wird jeweils mit drei Argumenten aufgerufen. Das erste ist der Wert des aktuellen Elements in der Iteration, das zweite ist der Index des Elements und das dritte ist eine Referenz auf das Array selbst. JavaScript Funktionen ignorieren Parameter, die in der Liste nicht benannt werden, es ist somit sicher, eine Funktion als <code>callback</code> zu definieren, die nur ein einzelnes Argument nimmt, zum Beispiel <code>alert</code>.</p>
+
+<p> </p>
+
+<p>{{jsxref("Array.reduce", "reduce(callback[, initialValue])")}} wendet <code>callback(firstValue, secondValue)</code> an, um die Liste auf einen einzelnen Wert zu reduzieren.</p>
+
+<pre class="brush: js">var a = [10, 20, 30];
+var total = a.reduce(function(first, second) { return first + second; }, 0);
+console.log(total) // Loggt 60.
+</pre>
+
+<p>{{jsxref("Array.reduceRight", "reduceRight(callback[, initialValue])")}} funktioniert wie <code>reduce()</code>, aber startet am Ende des Arrays.</p>
+
+<p><code>reduce</code> und <code>reduceRight</code> sind die unauffälligsten iterativen Array-Methoden. Sie sollten dazu verwendet werden, rekursiv jeweils zwei Werte miteinander zu kombinieren, bis nur noch ein einzelner Wert verbleibt.</p>
+
+<h3 id="Mehrdimensionale_Arrays">Mehrdimensionale Arrays</h3>
+
+<p>Arrays können verschachtelt sein. Das bedeutet, dass ein Array ein anderes Array als Element beinhalten kann. Mit dieser EIgenschaft von JavaScript können mehrdimensionale Arrays erstellt werden. Der folgende Code erstellt ein zwei-dimensionales Array:</p>
+
+<pre class="brush: js">var a = new Array(4);
+for (i = 0; i &lt; 4; i++) {
+  a[i] = new Array(4);
+  for (j = 0; j &lt; 4; j++) {
+    a[i][j] = '[' + i + ', ' + j + ']';
+  }
+}
+</pre>
+
+<p>Dieses Beispiel erstellt ein Array mit den folgenden Zeilen:</p>
+
+<pre>Zeile 0: [0, 0] [0, 1] [0, 2] [0, 3]
+Zeile 1: [1, 0] [1, 1] [1, 2] [1, 3]
+Zeile 2: [2, 0] [2, 1] [2, 2] [2, 3]
+Zeile 3: [3, 0] [3, 1] [3, 2] [3, 3]
+</pre>
+
+<h3 id="Arrays_und_Regular_Expressions">Arrays und Regular Expressions</h3>
+
+<p>Wenn ein Array das Resultat einer Regular Expression auf einem String ist, wird das Array Properties und Elemente zuückgeben, die Informationen zum Match liefern. Der Rückgabewert der {{jsxref("Global_Objects/RegExp/exec","RegExp.exec()")}}, {{jsxref("Global_Objects/String/match","String.match()")}}, und {{jsxref("Global_Objects/String/split","String.split()")}} Methode ist ein Array. Für weitere Informationen für die Verwendung von Arrays mit Regular Expressions, siehe <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Regular Expressions</a>.</p>
+
+<h3 id="Mit_Array-ähnlichen_Objekten_arbeiten">Mit Array-ähnlichen Objekten arbeiten</h3>
+
+<p>Manche JavaScript Objekte, wie {{domxref("NodeList")}}, welche von {{domxref("document.getElementsByTagName()")}} zurückgegeben oder als {{jsxref("Functions/arguments","arguments")}} in einem Funktionskörper referenziert wird, verhalten sich wie Arrays, aber teilen nicht alle deren Methoden. Das <code>arguments</code> Objekt stellt ein {{jsxref("Global_Objects/Function/length","length")}} Attribut zur Verfügung, implementiert aber beispielsweise nicht die {{jsxref("Array.forEach", "forEach()")}} Methode.</p>
+
+<p>Array Prototyp-Methoden können auf einem Array-ähnlichen Objekt aufgerufen werden, siehe folgendes Beispiel:</p>
+
+<pre class="brush: js">function printArguments() {
+  Array.prototype.forEach.call(arguments, function(item) {
+    console.log(item);
+  });
+}
+</pre>
+
+<p>Array Prototyp-Methoden können auch für Strings verwendet werden, weil diese einen sequenziellen Zugriff auf deren Zeichen erlauben, ähnlich wie Arrays:</p>
+
+<pre class="brush: js">Array.prototype.forEach.call('a string', function(chr) {
+  console.log(chr);
+});</pre>
+
+<h2 id="Typisierte_Arrays">Typisierte Arrays</h2>
+
+<p><a href="/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typisierte Arrays</a> sind Array-ähnliche Objekte und stellen einen Mechanismus für den Zugriff auf Raw-Binärdaten zur Verfügung. Wie bereits erklärt, passen {{jsxref("Array")}} Objekte ihre Grösse dynamisch an und können beliebige Werte enthalten. JavaScript Engines führen Optimierungen durch, damit diese Arrays schneller sind. Je stärker Web-Applikationen werden mit Features wie Audio und Video Manipulation, Zugriff auf Raw Daten mit <a href="/en-US/docs/WebSockets">WebSockets</a> und so weiter, ist es hilfreich, wenn JavaScript Code einfach und schnell Raw Binärdaten in typisierten Arrays manipulieren kann.</p>
+
+<h3 id="Buffers_und_Views_Typisierte_Array_Architektur">Buffers und Views: Typisierte Array Architektur</h3>
+
+<p>Um maximale Flexibilität und Effizienz zu erreichen, werden typisierte Arrays in JavaScript auf <strong>Buffers</strong> und V<strong>iews</strong> aufgeteilt. Ein Buffer (implementiert durch das {{jsxref("ArrayBuffer")}} Objekt) ist ein Objekt, welches einen Block Daten repräsentiert; es hat kein Format und keine Mechanismen für den Zugriff auf Inhalte. Um auf den Speicher in einem Buffer zuzugreifen, wird eine View benötigt. Eine View stellt einen Kontext — einen Datentyp, Start-Offset und eine Anzahl Elemente — zur Verfügung, welcher die Daten in einen typisierten Array verwandelt.</p>
+
+<p><img alt="Typed arrays in an ArrayBuffer" src="https://mdn.mozillademos.org/files/8629/typed_arrays.png" style="height: 278px; width: 666px;"></p>
+
+<h3 id="ArrayBuffer">ArrayBuffer</h3>
+
+<p>Der {{jsxref("ArrayBuffer")}} ist ein Datentyp, welcher für die Darstellung von generischen Binär-Daten-Buffer mit einer fixen Grösse. Der Inhalt eines <code>ArrayBuffer</code> kann nicht direkt manipuliert werden; stattdessen kann eine typisierte Array-View oder eine {{jsxref("DataView")}} erstellt werden, welches den Buffer in einem spezifischen Format darstellt, welche dann für das Lesen und Schreiben der Inhalte auf dem Buffer verwendet werden kann.</p>
+
+<h3 id="Typisierte_Array-Views">Typisierte Array-Views</h3>
+
+<p>Typisierte Array-Views haben selbstbeschreibende Namen und stellen Views für alle geläufigen numerischen Typen, wie <code>Int8</code>, <code>Uint32</code>, <code>Float64</code> und so weiter, zur Verfügung. Es gibt ein spezielles typisiertes Array: <code>Uint8ClampedArray</code>. Es klemmt (clamps) zwischen 0 und 255. Dies ist hilfreich für <a href="/en-US/docs/Web/API/ImageData">Canvas Datenverarbeitung</a>, zum Beispiel.</p>
+
+<p>{{page("/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray", "TypedArray_objects")}}</p>
+
+<p>Für weitere Informationen, siehe <a href="/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript Typisierte Arrays</a> und die Referenzdokumentation für die unterschiedlichen {{jsxref("TypedArray")}} Objekte.</p>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Keyed_Collections")}}</p>
diff --git a/files/de/web/javascript/guide/keyed_collections/index.html b/files/de/web/javascript/guide/keyed_collections/index.html
new file mode 100644
index 0000000000..a9b501da9e
--- /dev/null
+++ b/files/de/web/javascript/guide/keyed_collections/index.html
@@ -0,0 +1,157 @@
+---
+title: Collections mit Schlüssel
+slug: Web/JavaScript/Guide/Keyed_collections
+tags:
+  - Collections
+  - Guide
+  - JavaScript
+  - Map
+  - 'l10n:priority'
+  - set
+translation_of: Web/JavaScript/Guide/Keyed_collections
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Indexed_Collections", "Web/JavaScript/Guide/Working_with_Objects")}}</div>
+
+<p class="summary">Dieses Kapitel gibt eine Einleitung in Sammlungen von Daten, welche mit einem Schlüssel verknüpft werden. <code>Map</code> und <code>Set</code> Objekte enthalten Elemente, die in der Reihenfolge ihres Einfügens iterierbar sind.</p>
+
+<h2 id="Maps">Maps</h2>
+
+<h3 id="Map_Objekt"><code>Map</code> Objekt</h3>
+
+<p>ECMAScript 2015 führt eine neue Datenstruktur ein, um Werte auf Werte zu abbildet. Ein {{jsxref("Map")}} Objekt ist eine einfache Schlüssel/Werte-Abbildung und man kann über die Element in der Einfügereihenfolge iterieren.</p>
+
+<p>Das folgende Beispiel zeigt einige Basisoperationen mit einer <code>Map</code>.  Für mehr Beispiele und die komplette API siehe zudem die Referenzseite {{jsxref("Map")}}. Man kann eine {{jsxref("Statements/for...of","for...of")}} Schleife benutzen, um ein Array von <code>[key, value]</code> für jede Iteration zurückzugeben.</p>
+
+<pre class="brush: js notranslate">var sayings = new Map();
+sayings.set('dog', 'woof');
+sayings.set('cat', 'meow');
+sayings.set('elephant', 'toot');
+sayings.size; // 3
+sayings.get('fox'); // undefined
+sayings.has('bird'); // false
+sayings.delete('dog');
+sayings.has('dog'); // false
+
+for (var [key, value] of sayings) {
+  console.log(key + ' goes ' + value);
+}
+// "cat goes meow"
+// "elephant goes toot"
+
+sayings.clear();
+sayings.size; // 0
+</pre>
+
+<h3 id="Object_und_Map_im_Vergleich"><code>Object</code> und <code>Map</code> im Vergleich</h3>
+
+<p>Traditionell werden {{jsxref("Object", "Objekte", "", 1)}} eingesetzt, um Strings auf Werte abzubilden. Objekte erlauben es Werte zu Schlüsseln zu setzen, diese Werte abzufragen, Schlüssel zu löschen und erkennen, ob etwas zu einem Schlüssel gespeichert wurde. <code>Map</code> Objekte haben ein paar Vorteile, was sie zu besseren Abbildungen macht.</p>
+
+<ul>
+ <li>Die Schlüssel eines <code>Object</code> sind {{jsxref("Global_Objects/String","Strings")}}, während bei einer <code>Map</code> jeder Wert möglich ist.</li>
+ <li>Man kann die Größe einer <code>Map</code> einfach abfragen, während man bei einem Objekt manuell mitzählen muss.</li>
+ <li>Die Iteration einer <code>Map</code> erfolgt in der Reihenfolge des Einfügens ihrer Elemente.</li>
+ <li>Ein <code>Object</code> hat einen Prototyp, so dass Standardschlüssel in der <code>Map</code> schon vorhanden sind. (Dies kann mit <code>map = Object.create(null)</code> umgangen werden.)</li>
+</ul>
+
+<p>Diese drei Tipps können bei der Entscheidung für eine <code>Map</code> oder ein <code>Object</code> helfen:</p>
+
+<ul>
+ <li>Man sollte Maps bevorzugen, wenn die Schlüssel vor der Laufzeit unbekannt sind und wenn alle Schlüssel den gleichen Typ haben und wenn alle Werte den gleichen Schlüssel haben.</li>
+ <li>Man sollte Maps in Fällen benutzen, in denen primitive Werte als Schlüssel benutzt werden, weil in Objekten jeder Schlüssel ein String ist egal, ob eigentlich eine Zahl, ein Boolean oder ein anderer primitiver Datentyp vorliegt.</li>
+ <li>Man sollte Objekte benutzen, wenn es eine Logik gibt, die auf individuellen Elementen angewandt wird.</li>
+</ul>
+
+<h3 id="WeakMap_Objekte"><code>WeakMap</code> Objekte</h3>
+
+<p>Das {{jsxref("WeakMap")}} Objekt ist eine Collection von Schlüssel/Werte-Paaren, wobei der <strong>Schlüssel nur ein Objekt sein kann</strong> und die Werte willkürliche Werte sein können. Die Objektreferenzen in den Schlüsseln werden <em>weakly</em> gehalten, was bedeutet, dass diese Referenz ein Ziel des Speicherbereinigung (Garbage Collectors (GC)) wird, wenn keine andere Referenz mehr auf dieses Objekt referenziert. Die <code>WeakMap</code> API ist die gleiche wie die <code>Map</code> API.</p>
+
+<p>Einen Unterschied zu <code>Map</code> Objekten ist, dass <code>WeakMap</code> Schlüssel nicht aufzählbar sind (z. B. gibt es keine Methode, die eine Liste von Schlüsseln zurückgibt). Wenn dies der Fall wäre, würde die Liste vom Zustand der Speicherbereinigung abhängen, was zu Nicht-Determinismus führen würde.</p>
+
+<p>Für mehr Informationen, Beispiele und "Warum <em>Weak</em>Map" auf der {{jsxref("WeakMap")}} Referenzseite.</p>
+
+<p>Ein Einsatzgebiet für <code>WeakMap</code>s ist der Einsatz für Private Daten oder das Verbergen von Implementierungsdetails. Das folgende Beispiel ist von Nick Fitzgeralds Blogpost <a href="http://fitzgeraldnick.com/weblog/53/">"Hiding Implementation Details with ECMAScript 6 WeakMaps"</a>. Die privaten Daten und Methoden, die zu dem Objekt gehören, werden in dem WeakMap Objekt <code>privates</code> gespeichert. Alles offene auf der Instanz und dem Prototyp ist Öffentlich; alles andere ist von Außen nicht erreichbar, weil <code>privates</code> vom Modul nicht exportiert wird.</p>
+
+<pre class="brush: js notranslate">const privates = new WeakMap();
+
+function Public() {
+  const me = {
+    // Private data goes here
+  };
+  privates.set(this, me);
+}
+
+Public.prototype.method = function() {
+  const me = privates.get(this);
+  // Do stuff with private data in `me`...
+};
+
+module.exports = Public;
+</pre>
+
+<h2 id="Sets">Sets</h2>
+
+<h3 id="Set_Objekte"><code>Set</code> Objekte</h3>
+
+<p>{{jsxref("Set")}} Objekte sind Collectionen mit Werten. Man kann über die Elemente in der Einfügereihenfolge iterieren. Ein Wert in einem <code>Set</code> kann nur einmal existieren und ist einzigartig in einer <code>Set</code> Collection.</p>
+
+<p>Das folgende Beispiel zeigt einige Basisoperationen mit einem <code>Set</code>. Für mehr Beispiele und die komplette API siehe auf der {{jsxref("Set")}} Referenzseite nach.</p>
+
+<pre class="brush: js notranslate">var mySet = new Set();
+mySet.add(1);
+mySet.add('some text');
+mySet.add('foo');
+
+mySet.has(1); // true
+mySet.delete('foo');
+mySet.size; // 2
+
+for (let item of mySet) console.log(item);
+// 1
+// "some text"
+</pre>
+
+<h3 id="Konvertierung_zwischen_Arrays_und_Sets">Konvertierung zwischen Arrays und Sets</h3>
+
+<p>Man kann ein {{jsxref("Array")}} von einem Set erstellen, indem {{jsxref("Array.from")}} oder der <a href="/de/docs/Web/JavaScript/Reference/Operators/Spread_operator">spread Operator</a> eingesetzt wird. Zudem akzeptiert der <code>Set</code> Konstruktor ein <code>Array</code>, um es in die andere Richtung zu konvertieren. Wichtig ist aber, dass <code>Set</code> Objekte Werte nur einmalig Speichern, so dass jedes Elementduplikat aus dem Array beim Konvertieren gelöscht wird.</p>
+
+<pre class="brush: js notranslate">Array.from(mySet);
+[...mySet2];
+
+mySet2 = new Set([1, 2, 3, 4]);
+</pre>
+
+<h3 id="Array_und_Set_im_Vergleich"><code>Array</code> und <code>Set</code> im Vergleich</h3>
+
+<p>Traditionell wird eine Menge von Objekten in vielen Situationen in JavaScript in Arrays gespeichert. Das neue <code>Set</code> Objekt hat aber einige Vorteile:</p>
+
+<ul>
+ <li>Das Prüfen, ob ein Element in einer Collection schon existiert mit {{jsxref("Array.indexOf")}} ist in Arrays langsamer.</li>
+ <li>In <code>Set</code> Objekte lassen sich Elemente löschen. Mit einem Array entsteht an dem  Element Index eine Lücke, bzw. sie wird geschlossen.</li>
+ <li>Der Wert {{jsxref("NaN")}} kan in einem Array nicht mit <code>indexOf</code> gefunden werden.</li>
+ <li><code>Set</code> Objekte erlauben nur eindeutige Objekte; man muss sich nicht selber um Duplikate kümmern.</li>
+</ul>
+
+<h3 id="WeakSet_Objekte"><code>WeakSet</code> Objekte</h3>
+
+<p>{{jsxref("WeakSet")}} Objekte sind Collections von Objekten. Ein Objekt in einer <code>WeakSet</code> gibt es nur einmal; es ist einzigartig in der <code>WeakSet</code> Collection und Objekte sind nicht aufzählbar.</p>
+
+<p>Die Hauptunterschiede zu einem {{jsxref("Set")}} Objekt sind:</p>
+
+<ul>
+ <li>Im Gegensatz zu  <code>Sets</code>, ist <code>WeakSets</code> eine <strong>Collection von nur Objekten</strong> und nicht von beliebigen Werten von jedem Typ.</li>
+ <li>Das <code>WeakSet</code> ist <em>weak: </em>Referenzen in in der Collection sind <em>weakly</em> gehalten. Was gedeutet, dass wenn es keine weitere Referenz auf eine Objekt in dem <code>WeakSet</code> gibt, der Speicher geleert werden kann. Das bedeutet auch, dass es keine Liste gibt, die die aktuellen Objekte der Collection enthält. <code>WeakSets</code> sind nicht Aufzählbar.</li>
+</ul>
+
+<p>Die Einsatzgebiete von <code>WeakSet</code> Objekten sind begrenzt. Sie erzeugen keine Speicherlecks, so dass sie sicher DOM Elemente enthalten können, um sie zum Beispiel zu verfolgen.</p>
+
+<h2 id="Schlüssel-_und_Wertegleichheit_von_Map_und_Set">Schlüssel- und Wertegleichheit von <code>Map</code> und <code>Set</code></h2>
+
+<p>Beide, die Schlüsselgleichheit von <code>Map</code> Objekten und die Wertegleichheit von <code>Set</code> Objekten basieren auf dem "<a href="https://tc39.github.io/ecma262/#sec-samevaluezero">same-value-zero Algorithmus</a>":</p>
+
+<ul>
+ <li>Gleichheit funktioniert wie der Identitätsvergleichsoperator <code>===</code>.</li>
+ <li><code>-0</code> and <code>+0</code> werden als gleich angenommen.</li>
+ <li>{{jsxref("NaN")}} wird als gleich zu sich selbst angenommen (im Gegensatz zu <code>===</code>).</li>
+</ul>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Indexed_Collections", "Web/JavaScript/Guide/Working_with_Objects")}}</p>
diff --git a/files/de/web/javascript/guide/kontrollfluss_und_fehlerbehandlung/index.html b/files/de/web/javascript/guide/kontrollfluss_und_fehlerbehandlung/index.html
new file mode 100644
index 0000000000..97dbba8b3e
--- /dev/null
+++ b/files/de/web/javascript/guide/kontrollfluss_und_fehlerbehandlung/index.html
@@ -0,0 +1,430 @@
+---
+title: Kontrollfluss und Fehlerbehandlung
+slug: Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung
+tags:
+  - Beginner
+  - Guide
+  - JavaScript
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Grammatik_und_Typen", "Web/JavaScript/Guide/Schleifen_und_Iterationen")}}</div>
+
+<p class="summary">JavaScript unterstützt eine Menge von Anweisungen, speziell um Verlaufs-Anweisungen zu kontrollieren, welches eine großartige Methode ist um Interaktivität in deine Anwendung einzuarbeiten. Dieses Kapitel liefert dir ein Überblick über diese Anweisungen.</p>
+
+<p>Die <a href="/de/docs/Web/JavaScript/Reference/Statements">JavaScript Referenzen</a> beinhalten umfassende Details über die Anweisungen in diesem Kapitel. Das Semikolon (<code>;</code>) als Zeichen wird genutzt um Anweisungen im JavaScript Code einzuteilen.</p>
+
+<p>Jeder JavaScript Ausdruck ist auch eine Anweisung. Schau ebenfalls in <a href="/de/docs/Web/JavaScript/Guide/Ausdruecke_und_Operatoren">Ausdrücke und Operatoren</a>, um komplette Informationen über Ausdrücke zu erhalten.</p>
+
+<h2 id="Block-Anweisungen">Block-Anweisungen</h2>
+
+<p>Das einfachste Statement ist das Block-Statement, welches genutzt wird um Anweisungen zu gruppieren. Dieser Block wird von einem Paar geschweiften Klammer umschlossen:</p>
+
+<pre class="syntaxbox">{
+  statement_1;
+  statement_2;
+  .
+  .
+  .
+  statement_n;
+}
+</pre>
+
+<h3 id="Beispiele"><strong>Beispiele</strong></h3>
+
+<p>Block-Statements werden meistens mit Kontrollfluss-Statements genutzt (z. B. <code>if</code>, <code>for</code>, <code>while</code>).</p>
+
+<pre class="brush: js">while (x &lt; 10) {
+  x++;
+}
+</pre>
+
+<p>Hier ist, <code>{ x++; }</code> das Block-Statement.</p>
+
+<p><strong>Wichtig</strong>: JavaScript hat vor ECMAScript2015 <strong>keine </strong>Block-Scopes. Variablen, die in einem Block deklariert werden, gehören zu der Funktion oder dem Skript und das Beschreiben der Variablen führt dazu, dass diese über den Block hinaus verfügbar ist. In anderen Worten, Block-Statements definieren keinen Scope. Alleinstehende Blöcke in JavaScript können komplett andere Ergebnisse erzeugen als in C oder Java. Zum Beispiel:</p>
+
+<pre class="brush: js">var x = 1;
+{
+  var x = 2;
+}
+console.log(x); // outputs 2
+</pre>
+
+<p>Hier wird 2 ausgegeben, weil <code>var x</code> innerhalb des Blocks im gleichen Scope ist wie das <code>var x</code> vor dem Block. In C oder Java hätte der selbe Code 1 ausgegeben.</p>
+
+<p>Seit ECMAScript2015 sind <code>let</code> und <code>const</code> Variablendeklarationen, die an den Block gebunden sind. Siehe dazu auch die Referenzseiten {{jsxref("Statements/let", "let")}} und {{jsxref("Statements/const", "const")}} an.</p>
+
+<h2 id="Bedingte_Statements">Bedingte Statements</h2>
+
+<p>Ein bedingtes Statement ist eine Menge von Befehlen, die ausgeführt werden, wenn eine Bedingung wahr ist. JavaScript unterstützt zwei bedingte Statements: <code>if...else</code> und <code>switch</code>.</p>
+
+<h3 id="if...else_Anweisungen"><code>if...else </code>Anweisungen</h3>
+
+<p><code>if</code> wird eingesetzt um Statements auszuführen, wenn eine logische Bedingung wahr wird. Mit der optionalen <code>else-</code>Klausel werden Statements ausgeführt, wenn die Bedingung falsch ist. Ein <code>if</code>-Block sieht folgendermaßen aus:</p>
+
+<pre class="syntaxbox">if (bedingung) {
+  statement_1;
+} else {
+  statement_2;
+}</pre>
+
+<p>Hier kann die Bedingung ein Ausdruck sein, der zu <code>true</code> oder <code>false</code> ausgewertet wird. Siehe <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a> nach, um zu erfahren, was zu <code>true</code> und was zu <code>false</code> ausgewertet wird. Wenn <code>bedingung</code> zu <code>true</code> ausgewertet wird, wird <code>statement_1</code> ausgeführt. Andernfalls wird <code>statement_2</code> ausgeführt. <code>statement_1</code> und <code>statement_2</code> können beliebige Statements sein, auch weitere <code>if</code>-Statements.</p>
+
+<p>Man kann zudem Statements mit <code>else if</code> konstruieren, um mehrere Bedingungen sequentiell zu testen:</p>
+
+<pre class="syntaxbox">if (bedingung_1) {
+  statement_1;
+} else if (bedingung_2) {
+  statement_2;
+} else if (bedingung_n) {
+  statement_n;
+} else {
+  statement_last;
+}
+</pre>
+
+<p>Um mehrere Statements auszuführen, werden diese in Blockstatements gruppiert (<code>{ ... }</code>). Generell ist es guter Stil immer Block-Statements zu benutzen, besonders bei verschachtelten <code>if</code>-Statements.</p>
+
+<pre class="syntaxbox">if (bedingung) {
+  statement_1_runs_if_condition_is_true;
+  statement_2_runs_if_condition_is_true;
+} else {
+  statement_3_runs_if_condition_is_false;
+  statement_4_runs_if_condition_is_false;
+}
+</pre>
+
+<p>Es ist ratsam, keine einfachen Zuweisungen in Bedingungen zu verwenden, da die Zuordnung mit der Prüfung auf Gleichheit verwechselt werden kann, wenn man über den Code schaut. <span>Verwenden Sie zum Beispiel den folgenden Code nicht:</span></p>
+
+<pre class="example-bad brush: js">if (x = y) {
+  /* statements here */
+}
+</pre>
+
+<p>Wenn eine Zuweisung in einer Bedingung benötigt wird, ist es verbreitet diese in weitere runde Klammeren zu schreiben. Zum Beispiel:</p>
+
+<pre class="brush: js">if ((x = y)) {
+  /* statements here */
+}
+</pre>
+
+<h4 id="Falsy_Werte">Falsy Werte</h4>
+
+<p>Die folgenden Werte werden zu <code>false</code> ausgewertet (auch bekannt als {{Glossary("Falsy")}} Werte):</p>
+
+<ul>
+ <li><code>false</code></li>
+ <li><code>undefined</code></li>
+ <li><code>null</code></li>
+ <li><code>0</code></li>
+ <li><code>NaN</code></li>
+ <li>der leere string (<code>""</code>)</li>
+</ul>
+
+<p>Alle anderen Werte, auch alle Objekte, werden zu <code>true</code> ausgewertet, wenn sie als Bedingung eingesetzt werden.</p>
+
+<p>Es ist jedoch etwas verwirrend mit den primitiven boolean Werten <code>true</code> und <code>false</code> und den Werten des {{jsxref("Boolean")}}-Objektes, wie folgendes Beispiel zeigt:</p>
+
+<pre class="brush: js">var b = new Boolean(false);
+if (b)          // Die Bedingung wird zu true ausgewertet.
+if (b == true)  // Die Bedingung wird zu false ausgewertet.</pre>
+
+<h4 id="Beispiel"><strong>Beispiel</strong></h4>
+
+<p>Im folgenden Beispiel gibt die Funktion <code>checkData</code> <code>true</code> zurück, wenn die Anzahl der Zeichen in einem <code>Text</code> Objekt drei ist. Andernfalls wird ein Alert angezeigt, und <code>false</code> zurückgegeben.</p>
+
+<pre class="brush: js">function checkData() {
+  if (document.form1.threeChar.value.length == 3) {
+    return true;
+  } else {
+    alert("Enter exactly three characters. " +
+    document.form1.threeChar.value + " is not valid.");
+    return false;
+  }
+}
+</pre>
+
+<h3 id="switch_Statement"><code>switch</code> Statement</h3>
+
+<p>Ein <code>switch</code> Statement erlaubt es einen Ausdruck auszuwerten und das Resultat zu einem passenden Fall-Label (case-Label ) zuzuordnen. Wenn ein passendes Fall-Label gefunden wird, werden die zugehörigen Statements ausgeführt. Ein <code>switch</code> Statement sieht wie folgt aus:</p>
+
+<pre class="syntaxbox">switch (ausdruck) {
+  case label_1:
+    statements_1
+    [break;]
+  case label_2:
+    statements_2
+    [break;]
+    ...
+  default:
+    statements_def
+    [break;]
+}
+</pre>
+
+<p>Das Programm sucht als erstes nach eine <code>case</code>-Klausel mit einem Label, welches mit dem Wert des Ausgewerteten Ausdrucks übereinstimmt und gibt die Kontrolle zu dieser Klausel, was bedeutet, dass die zugehörigen Statements ausgeführt werden. Wenn kein passendes Label gefunden wird, sucht das Programm nach der optionalen <code>default</code>-Klausel und gibt die Kontrolle an diese, was bedeutet, dass die zugehörigen Statements ausgeführt werden. Wenn keine <code>default</code>-Klausel vorhanden ist, wird das <code>switch</code> beendet und das nächste Statement wird ausgeführt. Laut Konventionen ist die <code>default</code>-Klausel die letzte Klausel, das muss aber nicht immer so sein.</p>
+
+<p>Das optionale <code>break</code> Statement, welches in jeder <code>case</code>-Klausel eingesetzt ist, sorgt daführ, dass nach der Klausel das <code>switch</code> Statement beendet wird und das Programm mit dem nachfolgenden Statement weiter macht. Wenn <code>break</code> weggelassen wird, wird das Programm mit dem nächsten Statement im <code>switch</code> weitermachen, was dazu führt, dass alle nachlogenden <code>case</code>-Klauseln und die optionale <code>default</code>-Klausel mit ausgeführt werden.</p>
+
+<h4 id="Beispiel_2"><strong>Beispiel</strong></h4>
+
+<p>Im folgenden Beispiel wird der <code>case</code> "Bananas" ausgeführt, wenn <code>fruittype</code> zu "Bananas" ausgewertet wird. Die <code>break</code> Statements bewirken, dass das <code>switch</code> beendet wird und das nach <code>switch</code> stehende Statement ausgeführt wird. Wird <code>break</code> im <code>case </code>"Bananas" weggelassen, so wird der <code>case</code> "Cherries" mit ausgeführt.</p>
+
+<pre class="brush: js">switch (fruittype) {
+  case 'Oranges':
+    console.log('Oranges are $0.59 a pound.');
+    break;
+  case 'Apples':
+    console.log('Apples are $0.32 a pound.');
+    break;
+  case 'Bananas':
+    console.log('Bananas are $0.48 a pound.');
+    break;
+  case 'Cherries':
+    console.log('Cherries are $3.00 a pound.');
+    break;
+  case 'Mangoes':
+    console.log('Mangoes are $0.56 a pound.');
+    break;
+  case 'Papayas':
+    console.log('Mangoes and papayas are $2.79 a pound.');
+    break;
+  default:
+   console.log('Sorry, we are out of ' + fruittype + '.');
+}
+console.log("Is there anything else you'd like?");</pre>
+
+<h2 id="Statements_zur_Fehler-_bzw._Ausnahmebehandlung">Statements zur Fehler- bzw. Ausnahmebehandlung</h2>
+
+<p>Man kann mit dem <code>throw</code> Statement Fehler werfen (erzeugen) und diese mit dem Einsatz des <code>try...catch</code> Statements auffangen und verarbeiten.</p>
+
+<ul>
+ <li><a href="#throw"><code>throw</code> Statement</a></li>
+ <li><a href="#try-catch"><code>try...catch</code> Statement</a></li>
+</ul>
+
+<h3 id="Ausnahmetypen">Ausnahmetypen</h3>
+
+<p>Jedes Objekt in JavaScript kann als Fehler bzw. Ausnahme geworfen werden. Nicht alle Fehlerobjekte müssen auf die gleiche Art und Weise erstellt worden sein. Trotz des häufig Einsatzes von Zahlen oder Strings als Ausnahmen ist es deutlich effektiver die speziell für Ausnahmen erstellten Typen zu benutzen:</p>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Error#Error_Typen">ECMAScript exceptions</a></li>
+ <li>{{domxref("DOMException")}} und {{domxref("DOMError")}}</li>
+</ul>
+
+<h3 id="throw_Statement"><a id="throw" name="throw"><code>throw</code> Statement</a></h3>
+
+<p>Das <code>throw</code> Statement wird benutzt, um eine Exception (Ausnahme / Fehler) zu werfen. Wenn eine Exception geworfen wird, so wird ein Ausdruck spezifiziert, welcher den Wert, welcher geworfen wird, spezifiziert:</p>
+
+<pre class="syntaxbox">throw ausdruck;
+</pre>
+
+<p>Man<span id="result_box" lang="de"><span> kann jeden Ausdruck werfen, nicht nur Ausdrücke eines bestimmten Typs.</span></span> <span id="result_box" lang="de"><span>Der folgende Code wirft mehrere Ausnahmen verschiedenen Typs:</span></span></p>
+
+<pre class="brush: js">throw "Error2";   // String type
+throw 42;         // Number type
+throw true;       // Boolean type
+throw {toString: function() { return "I'm an object!"; } };
+</pre>
+
+<div class="note"><strong>Notiz:</strong> Man kann ein Objekt beim Werfen einer Exception spezifizieren. Im <code>catch</code> Block können die Eigenschaften des Objektes referenziert werden.</div>
+
+<pre class="brush: js">// Erstellt ein Objekt vom Typ UserException
+function UserException (message){
+  this.message=message;
+  this.name="UserException";
+}
+
+// Macht die Konvertierung der Exception in einen schönen String, wenn die Exception
+// als String genutzt werden soll.
+// (z. B. in der Fehlerconsole)
+UserException.prototype.toString = function () {
+  return this.name + ': "' + this.message + '"';
+}
+
+// Erstellt eine Instanz der UserException und wirft diese
+throw new UserException("Value too high");</pre>
+
+<h3 id="try...catch_Statement"><a id="try-catch" name="try-catch"><code>try...catch</code> Statement</a></h3>
+
+<p>Das <code>try...catch</code> Statement markiert einen Block von Statements, welcher versucht wird auszuführen, und einen oder mehrere Blöcke welche auf geworfene Exceptions abfangen. Wenn eine Exception geworfen wird, fängt das <code>try...catch</code> Statements diese ab.</p>
+
+<p>Das <code>try...catch</code> Statement besteht aus einem <code>try</code> Block, welcher ein oder mehrere Statements enthält, und null oder mehr <code>catch</code> Blöcken, welche Statements spezifizieren, welche eine im <code>try</code> Block geworfene Exception abfangen und behandeln. Das Statement versucht den <code>try</code> Block erfolgreich abzuarbeiten und wenn dieser nicht erfolgreich ist, wird die Kontrolle an den <code>catch</code> Block gegeben. Wenn ein Statement in dem <code>try</code> Block (oder eine im <code>try</code> Block aufgerufene Funktion) eine Exception wirft, wird der Kontrollfluss sofort an den <code>catch</code> Block übergeben. Wenn keine Exception im <code>try</code> Block geworfen wird, wird der <code>catch</code> Block übersprungen. Der optionale <code>finally</code> Block wird nach dem <code>try</code> und nach dem <code>catch</code> Block ausgeführt, bevor das auf das <code>try...catch</code> Statement folgenden Statement ausgeführt wird.</p>
+
+<p>Das Folgende Beispiel benutzt ein <code>try...catch</code> Statement. Das Beispiel ruft eine Funktion auf, welche einen Monatsnamen aus einen Array zurückgibt, je nachdem, welcher Wert übergeben wurde. Wenn der übergebene Wert keine korrekte Monatsnummer ist (1 - 12), dann wird eine Exception mit dem Wert <code>"InvalidMonthNo"</code> geworfen und die Statements im <code>catch</code> Block setzen die <code>monthName</code> Variable auf <code>unknown</code>.</p>
+
+<pre class="brush: js">function getMonthName (mo) {
+  mo = mo-1; // Justiert Monatsnummer zu Arrayindex (1=Jan, 12=Dec)
+  var months = ["Jan","Feb","Mar","Apr","May","Jun","Jul",
+                "Aug","Sep","Oct","Nov","Dec"];
+  if (months[mo] != null) {
+    return months[mo];
+  } else {
+    throw "InvalidMonthNo"; // throw Schlüsselwort wird hier benutzt
+  }
+}
+
+try { // statements to try
+  monthName = getMonthName(myMonth); // Funktion die Exceptions werfen kann
+}
+catch (e) {
+  monthName = "unknown";
+  logMyErrors(e); // Gibt Exception Objekt weiter für Fehlerbehandlung
+}
+</pre>
+
+<h4 id="The_catch_Block" name="The_catch_Block">Der <code>catch</code> Block</h4>
+
+<p>Man kann einen <code>catch</code> Block einsetzen, um alle Exceptions, die im <code>try</code> Block generiert werden, zu verarbeiten.</p>
+
+<pre class="syntaxbox">catch (catchID) {
+  statements
+}
+</pre>
+
+<p>Der <code>catch</code> Block spezifiziert einen Variable (<code>catchID</code> im voranstehenden Syntaxbeispiel), welcher den Wert des <code>throw</code> Statements enthält. Man kann über diese Variable Informationen über die geworfene Exception abfragen. JavaScript erstellt diese Variable, wenn der Programmfluss in den <code>catch</code> Block geht. Die Variable existiert nur in dem <code>catch</code> Block. Nach dem beenden des <code>catch</code> Blocks ist die Variable nicht mehr verfügbar.</p>
+
+<p>Im nächsten Beispeil wird eine Exception geworfen. Wenn die Exception geworfen wird, wird der Programmfluss in den <code>catch</code> Block gegeben.</p>
+
+<pre class="brush: js">try {
+  throw "myException" // Erstellt eine Exception
+}
+catch (e) {
+  // Statements, die die Exception verarbeiten
+  logMyErrors(e) // Verarbeitet Exception Objekt zur Fehlerbehandlung
+}
+</pre>
+
+<h4 id="Der_finally_Block">Der <code>finally</code> Block</h4>
+
+<p>Der <code>finally</code> Block enthält Statements, welche nach dem <code>try</code> und <code>catch</code> Block ausgeführt werden, bevor das Statement nach dem <code>try...catch</code> Statement ausgeführt wird. Der <code>finally</code> Block wird ausgeführt, egal ob eine Exception geworfen wird oder nicht. Wenn eine Exception geworfen wird, wird der <code>finally</code> auch ausgeführt, wenn kein <code>catch</code> die Exception abfängt.</p>
+
+<p>Man kann den <code>finally</code> Block benutzen, um Skripte fehlertoleranter zu gestalten. Zum Beispiel kann eine Ressource im <code>finally</code> Block geschlossen werden. Das Folgende Beispiel öffnet eine Datei und führt Statements aus, um die Datei zu benutzen (Serverseitiges JavaScript erlaubt Zugriffe auf Dateien). Wenn eine Exception geworfen wird, während die Datei geöffnet ist, sorgt der <code>finally</code> Block dafür, dass die Datei wieder geschlossen wird.</p>
+
+<pre class="brush: js">openMyFile();
+try {
+  writeMyFile(theData); //Das kann Exceptions werfen
+} catch(e) {
+  handleError(e); // Wenn eine Exception geworfen wird, wird sie hier verarbeitet
+} finally {
+  closeMyFile(); // Schließt immer die Ressource
+}
+</pre>
+
+<p>Wenn der <code>finally</code> Block einen Rückgabewert definiert, ist dieser der Rückgabewert des <code>try-catch-finally</code> Prozedur, unabhängig davon, ob <code>return</code> Statements im <code>try</code> und <code>catch</code> Block verwendet werden.</p>
+
+<pre class="brush: js">function f() {
+  try {
+    console.log(0);
+    throw "bogus";
+  } catch(e) {
+    console.log(1);
+    return true; // Dieses return Statement is überflüssig
+                 // weil im finally Block ebenfalls eins vorhanden ist
+    console.log(2); // wird niemals erreicht
+  } finally {
+    console.log(3);
+    return false; // überschreibt früheres return Statements
+    console.log(4); // wird niemals erreicht
+  }
+  // false wird jetzt zurückgegeben
+  console.log(5); // wird niemals erreicht
+}
+f(); // alerts 0, 1, 3; returns false
+</pre>
+
+<p>Das Überschreiben des Rückgabewertes durch den <code>finally</code> Block überschreibt auch geworfene Exceptions, wenn diese im <code>catch</code> geworfen werden.</p>
+
+<pre class="brush: js">function f() {
+  try {
+    throw "bogus";
+  } catch(e) {
+    console.log('caught inner "bogus"');
+    throw e; // Dieses throw Statement is überflüssig
+             // weil im finally Block ein return vorkommt
+  } finally {
+    return false; // Überschreibt das vorherige "throw"
+  }
+  // false wird zurückgegeben
+}
+
+try {
+  f();
+} catch(e) {
+  // Dieser bereich wird nie erreicht, weil
+  // die Exception durch das return im
+  // finally block überschrieben wird.
+  console.log('caught outer "bogus"');
+}
+
+// OUTPUT
+// caught inner "bogus"</pre>
+
+<h4 id="Nesting_try...catch_Statements" name="Nesting_try...catch_Statements">Verschachtelte try...catch Statements</h4>
+
+<p>Man kann mehrere <code>try...catch</code> Statements ineinander verschachteln. Wenn ein inneres <code>try...catch</code> Statements keinen <code>catch</code> Block hat, wird ein äußeres <code>try...catch</code> Statement mit einem <code>catch</code> Block eine Exception auffangen. Mehr Informationen gibt es im Kapitel <a href="/de/docs/Web/JavaScript/Reference/Statements/try...catch#Verschachtelte_try-Blöcke">Verschachtelte try-Blöcke</a> auf der <code><a href="/de/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> Seite.</p>
+
+<h3 id="Nützliche_Verwendung_des_Error_Objekts">Nützliche Verwendung des <code>Error</code> Objekts</h3>
+
+<p>Abhängig vom der Art des Fehlers, möchte man die Möglichkeit haben einen Namen und eine Fehlernachricht zu vergeben. 'name' und 'message' Eigenschaften sind generell durch die Klasse Error (z. B. <code>DOMException</code> oder <code>Error</code>) unterstützt. Die 'message' Eigenschaft ist dabei eine String-Repräsentation des Fehlers, so wie sie bei der Konvertierung des Objektes zu einem String benötigt wird.</p>
+
+<p>Wenn man beim Werfen von eigenen Exceptions die Vorteile dieser Eigenschaften nutzen möchte (wenn zum Beipsiel der <code>catch</code> Block nicht zwischen eigenen und System Exceptions unterscheidet), kann der Konstruktor von Error benutzt werden. Zum Beispiel:</p>
+
+<pre class="brush: js">function doSomethingErrorProne () {
+  if (ourCodeMakesAMistake()) {
+    throw (new Error('The message'));
+  } else {
+    doSomethingToGetAJavascriptError();
+  }
+}
+....
+try {
+  doSomethingErrorProne();
+}
+catch (e) {
+  console.log(e.name); // logs 'Error'
+  console.log(e.message); // logs 'The message' or a JavaScript error message)
+}</pre>
+
+<h2 id="Promises">Promises</h2>
+
+<p>Mit ECMAScript 6 hat JavaScript die Unterstützung für {{jsxref("Promise")}} Objekte bekommen, welche zum Steuern von asynchronen Operationen genutzt wird.</p>
+
+<p>Ein <code>Promise</code> ist in einem der folgenen Status:</p>
+
+<ul>
+ <li><em>pending</em>: <span class="short_text" id="result_box" lang="de"><span>Anfangszustand, nicht erfolgreich oder fehlerhaft beendet.</span></span></li>
+ <li><em>fulfilled</em>: Erfolgreiche Operation</li>
+ <li><em>rejected</em>: Gescheiterte Operation.</li>
+ <li><em>settled</em>: <span id="result_box" lang="de"><span>Das </span></span><code>Promise</code> <span lang="de"><span>ist entweder erfüllt oder abgelehnt, aber nicht </span></span><em>pending</em><span lang="de"><span>.</span></span></li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8633/promises.png" style="height: 297px; width: 801px;"></p>
+
+<h3 id="Ein_Bild_mit_XHR_laden">Ein Bild mit XHR laden</h3>
+
+<p>Ein einfaches Beispiel für den Einsatz von <code>Promise</code> und <code><a href="/de/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> ist das Laden eines Bildes (Siehe MDN GitHub <a href="https://github.com/mdn/js-examples/tree/master/promises-test">js-examples</a> Repository; man kann es hier auch <a href="https://mdn.github.io/js-examples/promises-test/">in Aktion sehen</a>). Jeder Schritt ist Kommentiert und erlaubt es der Architektur des Promise und XHR zu folgen. Hier ist die unkommentierte Version, welche den <code>Promise</code> Ablauf zeigt, zu sehen, so dass man eine Idee davon bekommt.</p>
+
+<pre class="brush: js">function imgLoad(url) {
+  return new Promise(function(resolve, reject) {
+    var request = new XMLHttpRequest();
+    request.open('GET', url);
+    request.responseType = 'blob';
+    request.onload = function() {
+      if (request.status === 200) {
+        resolve(request.response);
+      } else {
+        reject(Error('Image didn\'t load successfully; error code:'
+                     + request.statusText));
+      }
+    };
+    request.onerror = function() {
+      reject(Error('There was a network error.'));
+    };
+    request.send();
+  });
+}</pre>
+
+<p>Für deteiliertere Informationen, kann man sich die {{jsxref("Promise")}} Referenz Seite und den <a href="/de/docs/Web/JavaScript/Guide/Using_promises">Using Promises Guide</a> anschauen.</p>
+
+<div>{{PreviousNext("Web/JavaScript/Guide/Grammatik_und_Typen", "Web/JavaScript/Guide/Schleifen_und_Iterationen")}}</div>
diff --git a/files/de/web/javascript/guide/meta_programming/index.html b/files/de/web/javascript/guide/meta_programming/index.html
new file mode 100644
index 0000000000..691f5b05a6
--- /dev/null
+++ b/files/de/web/javascript/guide/meta_programming/index.html
@@ -0,0 +1,265 @@
+---
+title: Meta programming
+slug: Web/JavaScript/Guide/Meta_programming
+tags:
+  - Guide
+  - JavaScript
+  - Proxy
+  - Reflect
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Guide/Meta_programming
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{Previous("Web/JavaScript/Guide/Iterators_and_Generators")}}</div>
+
+<p class="summary">Beginnend mit ECMAScript 2015 hat JavaScript Unterstützung für {{jsxref("Proxy")}} and {{jsxref("Reflect")}} Objekte erhalten, welche das Abfangen und Definieren von benutzerdefinierten Verhaltens für grundlegenden Sprachoperation erlaubt (z. B. Eigenschaftensuche, Zuweisung, Aufzählung, Funktionsaufruf usw.). Mit der Hilfe dieser beiden Objekte ist es möglich auf der Metaebene von JavaScript zu programmieren.</p>
+
+<h2 id="Proxies">Proxies</h2>
+
+<p>Eingeführt in ECMAScript 6 erlaubt das {{jsxref("Proxy")}} Objekt das Abfangen und Definieren von benutzerdefinierten Verhaltens für bestimmte Operationen. Zum Beispiel um die Eigenschaft eines Objektes zu erhalten:</p>
+
+<pre class="brush: js">var handler = {
+  get: function(target, name) {
+    return name in target ? target[name] : 42;
+  }
+};
+
+var p = new Proxy({}, handler);
+p.a = 1;
+console.log(p.a, p.b); // 1, 42
+</pre>
+
+<p>Das <code>Proxy</code> Objekt definiert einen <em>Ziel</em> (<code>target</code>) (hier ein leeres Objekt) und einen <em>handler</em> (Verhaltens) Objekt in dem ein <code>get</code> <em>Trap</em> implementiert ist. In diesem Beispiel wird kein <code>undefined</code> zurückgegeben, wenn Eigenschaften nicht definiert sind. Stattdessen wird die Zahl 42 zurückgegeben.</p>
+
+<p>Weitere Beispiele sind auf der {{jsxref("Proxy")}} Referenzseite verfügbar.</p>
+
+<h3 id="Terminologie">Terminologie</h3>
+
+<p>Die folgenden Terme werden im Zusammenhang mit der Funktionalität von Proxies verwendet.</p>
+
+<dl>
+ <dt>{{jsxref("Global_Objects/Proxy/handler","Handler","","true")}}</dt>
+ <dd>Platzhalterobjekt, welches Traps enthält.</dd>
+ <dt>Traps</dt>
+ <dd>Die Methoden, die Zugriff auf Eigenschaften unterstützen. Diese sind analog zu Traps in Betriebssystemen.</dd>
+ <dt>Ziel</dt>
+ <dd>Objekt, welches vom Proxy virtualisiert wird. Es wird häufig als Speicher-Backend für den Proxy benutzt. Invarianten (Semantik, die unverändert bleiben) bezüglich nicht erweiterbarer Objekteigenschaften oder nicht konfigurierbarer Eigenschaften werden gegen das Ziel verifiziert.</dd>
+ <dt>Invarianten</dt>
+ <dd>Semantiken, die bei der Implementierung von benutzerdefinierten Operationen unverändert bleiben, werden als Invarianten bezeichnet. Wenn Sie gegen die Invarianten eines Handlers verstoßen, wird ein {{jsxref("TypeError")}} erzeugt.</dd>
+</dl>
+
+<h2 id="Handlers_und_Traps">Handlers und Traps</h2>
+
+<p>Die Folgende Tabelle fasst die verfügbaren Traps von <code>Proxy</code> Objekten zusammen. Siehe auf der <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler">Referenzseite</a> für detailliertere Erklärungen und Beispiele.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Handler / Trap</th>
+   <th>Interceptions</th>
+   <th>Invarianten</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/getPrototypeOf", "handler.getPrototypeOf()")}}</td>
+   <td>{{jsxref("Object.getPrototypeOf()")}}<br>
+    {{jsxref("Reflect.getPrototypeOf()")}}<br>
+    {{jsxref("Object/proto", "__proto__")}}<br>
+    {{jsxref("Object.prototype.isPrototypeOf()")}}<br>
+    {{jsxref("Operators/instanceof", "instanceof")}}</td>
+   <td>
+    <ul>
+     <li>Die <code>getPrototypeOf</code> Methode muss ein Objekt or <code>null</code> zurückgeben.</li>
+     <li>Wenn <code>target</code> nicht erweiterbar ist, muss die <code>Object.getPrototypeOf(proxy)</code> Methode das gleiche zurückgeben wie <code>Object.getPrototypeOf(target)</code>.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/setPrototypeOf", "handler.setPrototypeOf()")}}</td>
+   <td>{{jsxref("Object.setPrototypeOf()")}}<br>
+    {{jsxref("Reflect.setPrototypeOf()")}}</td>
+   <td>Wenn <code>target</code> nicht erweiterbar ist, muss der<code> prototype</code> Parameter der gleiche Wert sein wie <code>Object.getPrototypeOf(target)</code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/isExtensible", "handler.isExtensible()")}}</td>
+   <td>{{jsxref("Object.isExtensible()")}}<br>
+    {{jsxref("Reflect.isExtensible()")}}</td>
+   <td><code>Object.isExtensible(proxy)</code> muss den gleichen Wert wie <code>Object.isExtensible(target)</code> zurückgeben.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/preventExtensions", "handler.preventExtensions()")}}</td>
+   <td>{{jsxref("Object.preventExtensions()")}}<br>
+    {{jsxref("Reflect.preventExtensions()")}}</td>
+   <td><code>Object.preventExtensions(proxy)</code> gibt nur <code>true</code> zurück, wenn <code>Object.isExtensible(proxy)</code> <code>false</code> ist.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/getOwnPropertyDescriptor", "handler.getOwnPropertyDescriptor()")}}</td>
+   <td>{{jsxref("Object.getOwnPropertyDescriptor()")}}<br>
+    {{jsxref("Reflect.getOwnPropertyDescriptor()")}}</td>
+   <td>
+    <ul>
+     <li><code>getOwnPropertyDescriptor</code> muss ein Objekt oder <code>undefined</code> zurückgeben.</li>
+     <li>Eine Eigenschaft kann nicht als nichtexistent erkannt werden, wenn sie als nicht konfigurierbare Eigenschaft des Zielobjektes existiert.</li>
+     <li>Eine Eigenschaft kann nicht als nichtexistent erkannt werden, wenn sie als Eigenschaft des Zielobjektes existiert und das Zielobjekt nicht erweiterbar ist.</li>
+     <li>Eine Eigenschaft kann nicht als existent erkannt werden, wenn sie nicht als Eigenschaft des Zielobjektes existiert und das Zielobjekt nicht erweiterbar ist.</li>
+     <li>Eine Eigenschaft kann nicht als nicht konfigurierbar erkannt werden, wenn sie nicht als Eigenschaft des Zielobjektes existiert oder wenn sie als konfigurierbare Eigenschaft des Zielobjekt existiert.</li>
+     <li>Das Ergebnis von <code>Object.getOwnPropertyDescriptor(target)</code> kann dem Zielobjekt mit <code>Object.defineProperty</code> übergeben werden ohne, dass ein Fehler erzeugt wird.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/defineProperty", "handler.defineProperty()")}}</td>
+   <td>{{jsxref("Object.defineProperty()")}}<br>
+    {{jsxref("Reflect.defineProperty()")}}</td>
+   <td>
+    <ul>
+     <li>Eine Eigenschaft kann nicht hinzugefügt werden, wenn das Zielobjekt nicht erweiterbar ist.</li>
+     <li>Eine Eigenschaft kann nicht hinzugefügt werden oder zu nicht konfigurierbar geändert werden, wenn es nicht als nicht konfigurierbares Eigenschaft im Zielobjekt existiert.</li>
+     <li>Eine Eigenschaft darf nicht nicht konfigurierbar sein, wenn die zugehörige konfigurierbare Eigenschaft im Zielobjekt existiert.</li>
+     <li>Wenn eine Eigenschaft eine zugehörige Eigenschaft im Zielobjekt hat, so wird <code>Object.defineProperty(target, prop, descriptor)</code> keinen Fehler erzeugen.</li>
+     <li>Im Strict Mode, wird ein falscher Rückgabewert des <code>defineProperty</code> Handler einen {{jsxref("TypeError")}} Erzeugen.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/has", "handler.has()")}}</td>
+   <td>Eigenschaftsabfrage: <code>foo in proxy</code><br>
+    Vererbte Eigenschaftsabfrage: <code>foo in Object.create(proxy)</code><br>
+    {{jsxref("Reflect.has()")}}</td>
+   <td>
+    <ul>
+     <li>Eine Eigenschaft kan nicht als nichtexistent erkannt werden, wenn sie als nicht konfigurierbare Eigenschaft im Zielobjekt existiert.</li>
+     <li>Eine Eigenschaft kan nicht als nichtexistent erkannt werden, wenn sie als Eigenschaft im Zielobjekt existiert und das Zielobjekt nicht erweiterbar ist.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/get", "handler.get()")}}</td>
+   <td>Eigenschaftszugriff: <code>proxy[foo]</code>and <code>proxy.bar</code><br>
+    Vererbter Eigenschaftszugriff: <code>Object.create(proxy)[foo]</code><br>
+    {{jsxref("Reflect.get()")}}</td>
+   <td>
+    <ul>
+     <li>Der Wert, der für eine Eigenschaft zurückgegeben wird, muss der gleiche sein wie der in der zugehörigen Eigenschaft des Zielobjekts, wenn die Eigenschaft im Zielobjekt nicht überschreibbar und nicht konfigurierbar ist.</li>
+     <li>Der Wert, der für eine Eigenschaft zurückgegeben wird, muss undefined sein, wenn die zugehörige Eigenschaft im Zielobjekt einen nicht konfigurierbare Zugriffseigenschaft hat, dessen [[Get]] Attribut undefined ist.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/set", "handler.set()")}}</td>
+   <td>Eigenschaftszuweisung: <code>proxy[foo] = bar</code> and <code>proxy.foo = bar</code><br>
+    Vererbte Eigenschaftszuweisung: <code>Object.create(proxy)[foo] = bar</code><br>
+    {{jsxref("Reflect.set()")}}</td>
+   <td>
+    <ul>
+     <li>Der Wert kann nicht zu einem geändert werden, der anders als dem Wert im Zielobjekt ist, wenn die zugehörige Eigenschaft im Zielobjekt eine nicht überschreibbare, nicht konfigurierbare Dateneigenschaft ist.</li>
+     <li>Der Wert der Eigenschaft kann nicht geändert werden, wenn die zugehörige Eigenschaft im Zielobjekt nicht konfigurierbar ist und das [[Set]] Attribut den Wert <code>undefined</code> hat.</li>
+     <li>Im Strict Mode, wird ein falscher Rückgabewert des <code>set</code> Handlers einen {{jsxref("TypeError")}} erzeugen.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/deleteProperty", "handler.deleteProperty()")}}</td>
+   <td>Eigenschaft löschen: <code>delete proxy[foo]</code> und <code>delete proxy.foo</code><br>
+    {{jsxref("Reflect.deleteProperty()")}}</td>
+   <td>Eine Eigenschaft kann nicht gelöscht werden, Wenn sie als nicht konfigurierbare Eigenschaft im Zielobjekt existiert.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/enumerate", "handler.enumerate()")}}</td>
+   <td>Eigenschaft aufzählen (enumeration) / for...in: <code>for (var name in proxy) {...}</code><br>
+    {{jsxref("Reflect.enumerate()")}}</td>
+   <td>Die <code>enumerate</code> Methode muss ein Objekt zurückgeben.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/ownKeys", "handler.ownKeys()")}}</td>
+   <td>{{jsxref("Object.getOwnPropertyNames()")}}<br>
+    {{jsxref("Object.getOwnPropertySymbols()")}}<br>
+    {{jsxref("Object.keys()")}}<br>
+    {{jsxref("Reflect.ownKeys()")}}</td>
+   <td>
+    <ul>
+     <li>Das Ergebnis von <code>ownKeys</code> ist eine Liste.</li>
+     <li>Der Typ jedes Elements in der Ergebnisliste ist entweder {{jsxref("String")}} oder {{jsxref("Symbol")}}.</li>
+     <li>Die Ergebnisliste muss alle Schlüssel von nicht konfigurierbaren Eigenschaften des Zielobjektes enthalten.</li>
+     <li>Wenn das Zielobjekt nicht erweiterbar ist, muss die Ergebnisliste alle Schlüssel des Zielobjektes enthalten und keine anderen Werte.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/apply", "handler.apply()")}}</td>
+   <td><code>proxy(..args)</code><br>
+    {{jsxref("Function.prototype.apply()")}} and {{jsxref("Function.prototype.call()")}}<br>
+    {{jsxref("Reflect.apply()")}}</td>
+   <td>Es gibt keine Invarianten für die <code>handler.apply</code> Methode.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/construct", "handler.construct()")}}</td>
+   <td><code>new proxy(...args)</code><br>
+    {{jsxref("Reflect.construct()")}}</td>
+   <td>Das Ergebnis muss ein <code>Object</code> sein.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Widerrufbarer_Proxy">Widerrufbarer <code>Proxy</code></h2>
+
+<p>Die {{jsxref("Proxy.revocable()")}} Methode wird benutzt, um ein widerrufbares <code>Proxy</code> Objekt zu erstellen. Das bedeutet, dass der Proxy mit der Funktion <code>revoke</code> widerrufen werden kann und der Proxy ausgeschaltet wird. Danach wird jede Operation auf dem Proxy zu einem {{jsxref("TypeError")}} führen.</p>
+
+<pre class="brush: js">var revocable = Proxy.revocable({}, {
+  get: function(target, name) {
+    return '[[' + name + ']]';
+  }
+});
+var proxy = revocable.proxy;
+console.log(proxy.foo); // "[[foo]]"
+
+revocable.revoke();
+
+console.log(proxy.foo);  // TypeError is thrown
+proxy.foo = 1;           // TypeError again
+delete proxy.foo;        // still TypeError
+typeof proxy;            // "object", typeof doesn't trigger any trap</pre>
+
+<h2 id="Reflection">Reflection</h2>
+
+<p>{{jsxref("Reflect")}} ist ein Standardobjekt welches Methoden unterstützt, welche das Abfragen von JavaScript Operationen erlauben. Die Methoden sind die gleichen wie die eines {{jsxref("Global_Objects/Proxy/handler","Proxy Handlers","","true")}}. <code>Reflect</code> ist kein Funktionsobjekt.</p>
+
+<p><code>Reflect</code> hilft beim Weiterleiten von Standardoperationen des Handlers zu dem Zielobjekt.</p>
+
+<p>Mit bekommt man {{jsxref("Reflect.has()")}} zum Beispiel den <a href="/de/docs/Web/JavaScript/Reference/Operators/in"><code>in</code> Operator</a> als Funktion:</p>
+
+<pre class="brush: js">Reflect.has(Object, 'assign'); // true
+</pre>
+
+<h3 id="Eine_bessere_apply_Funktion">Eine bessere <code>apply</code> Funktion</h3>
+
+<p>In ES5 wird typischerweise die {{jsxref("Function.prototype.apply()")}} Methode genutzt, um eine Funktion mit einem gegebenen <code>this</code> Wert und <code>arguments</code> als Array (oder ein <a href="/de/docs/Web/JavaScript/Guide/Indexed_collections#Mit_Array-ähnlichen_Objekten_arbeiten">Array-ähnliches Objekt</a>) benutzt.</p>
+
+<pre class="brush: js">Function.prototype.apply.call(Math.floor, undefined, [1.75]);</pre>
+
+<p>Mit {{jsxref("Reflect.apply")}} wird dieses weniger Langatmig und leichter verständlich:</p>
+
+<pre class="brush: js">Reflect.apply(Math.floor, undefined, [1.75]);
+// 1;
+
+Reflect.apply(String.fromCharCode, undefined, [104, 101, 108, 108, 111]);
+// "hello"
+
+Reflect.apply(RegExp.prototype.exec, /ab/, ['confabulation']).index;
+// 4
+
+Reflect.apply(''.charAt, 'ponies', [3]);
+// "i"
+</pre>
+
+<h3 id="Prüfen_ob_Eigenschaftsdefinitionen_erfolgreich_waren">Prüfen ob Eigenschaftsdefinitionen erfolgreich waren</h3>
+
+<p>Mit {{jsxref("Object.defineProperty")}}, welche ein Objekt zurück gibt, wenn es erfolgreich war, oder andernfalls ein {{jsxref("TypeError")}} erzeugt, muss man ein {{jsxref("Statements/try...catch","try...catch")}} Block benutzen, um einen Fehler bei der Definition einer Eigenschaft abzufangen. Weil {{jsxref("Reflect.defineProperty")}} einen Boolean als Status zurück gibt, kann man einfach einen {{jsxref("Statements/if...else","if...else")}} Block benutzen:</p>
+
+<pre class="brush: js">if (Reflect.defineProperty(target, property, attributes)) {
+  // success
+} else {
+  // failure
+}</pre>
+
+<p>{{Previous("Web/JavaScript/Guide/Iterators_and_Generators")}}</p>
diff --git a/files/de/web/javascript/guide/mit_objekten_arbeiten/index.html b/files/de/web/javascript/guide/mit_objekten_arbeiten/index.html
new file mode 100644
index 0000000000..2448621a4a
--- /dev/null
+++ b/files/de/web/javascript/guide/mit_objekten_arbeiten/index.html
@@ -0,0 +1,506 @@
+---
+title: Mit Objekten arbeiten
+slug: Web/JavaScript/Guide/Mit_Objekten_arbeiten
+tags:
+  - Beginner
+  - Comparing object
+  - Constructor
+  - Document
+  - Guide
+  - JavaScript
+  - Object
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Guide/Working_with_Objects
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Feinheiten_des_Objektmodells")}}</div>
+
+<p class="summary">JavaScript ist nach einem einfachen objekt-basierten Muster entworfen. Ein Objekt ist eine Sammlung von Eigenschaften und eine Eigenschaft ist eine Verbindung von einem Namen und einem Wert. Der Wert einer Eigenschaft kann eine Funktion sein. In diesem Fall wird die Eigenschaft Methode genannt. Zusätzlich zu Objekten, die vom Browser vordefiniert sind, können auch eigene Objekte definiert werden. Dieses Kapitel beschreibt, wie Objekte, Eigenschaften, Funktionen und Methoden benutzt und eigene Objekte erzeugt werden können.</p>
+
+<h2 id="Objekte_Übersicht">Objekte Übersicht</h2>
+
+<p>Objekte in JavaScript, wie in vielen anderen Programmiersprachen, können mit Objekten aus dem realen Leben verglichen werden. Das Konzept der Objekte in JavaScript kann mit greifbaren Objekten aus der realen Welt verstanden werden.</p>
+
+<p>In JavaScript ist ein Objekt eine für sich stehende Einheit mit Eigenschaften und Typ. Vergleichbar mit einer Tasse zum Beispiel. Eine Tasse ist ein Objekt mit Eigenschaften. Eine Tasse hat eine Farbe, ein Design, ein Gewicht, ein Material, aus dem sie erstellt wurde, usw. Ebenso können JavaScript Objekte Eigenschaften besitzen, die Ihre Besonderheiten definieren.</p>
+
+<h2 id="Objekte_und_Eigenschaften">Objekte und Eigenschaften</h2>
+
+<p>Ein JavaScript Objekt besitzt mit ihm verbundene Eigenschaften. Eine Eigenschaft eines Objekts kann als Variable erklärt werden, die dem Objekt angeheftet ist. Objekteigenschaften sind grundsätzlich das Gleiche wie übliche Variablen ausser der Verknüpfung mit Objekten. Die Eigenschaften eines Objekts definieren seine Charakteristik. Auf die Eigenschaften eines Objekt kann mit einer einfachen Punkt-Notation zugegriffen werden:</p>
+
+<pre class="brush: js">objectName.propertyName
+</pre>
+
+<p>Wie bei allen JavaScript-Variablen sind Objektname (eine normale Variable) und Attribute groß-, und kleinschreibungsabhängig. Ein Attribut wird definiert, indem es einen Wert zugewiesen bekommt. Zum Beispiel: Ein Objekt namens <code>myCar</code> mit den Attributen <code>make</code>, <code>model</code>, und <code>year</code>:</p>
+
+<pre class="brush: js">var myCar = new Object();
+myCar.make = "Ford";
+myCar.model = "Mustang";
+myCar.year = 1969;
+</pre>
+
+<p>Nicht initialisierte Eigenschaften eines Objektes haben den Wert {{jsxref("undefined")}} (nicht {{jsxref("null")}}).</p>
+
+<pre class="brush: js">myCar.color; // undefined</pre>
+
+<p>Eigenschaften von JavaScript-Objekten können auch mit der Klammernotation (für weitere Informationen siehe <a href="/de/docs/Web/JavaScript/Reference/Operators/Property_Accessors">property accessors</a>). Objekte werden manchmal assoziative Arrays genannt da jede Eigenschaft mit einer Zeichenkette assoziiert ist mit der man auf die Eigenschaft zugreifen kann. Zum Beispiel kann man auf die Eigenschaften des Objekts <code>myCar</code> folgendermassen zugreifen:</p>
+
+<pre class="brush: js">myCar["make"] = "Ford";
+myCar["model"] = "Mustang";
+myCar["year"] = 1969;
+</pre>
+
+<p>Der Name einer Objekteigenschaft kann ein valider JavaScript String sein. Dies kann auch alles sein, was in einen String convertiert werden kann, inklusive eines leeren Strings. Immer, wenn der Name einer Eigenschaft kein valider JavaScript Bezeichner ist (zum Beispiel ein Name mit einem Leerzeichen oder einem minus oder ein Name der mit einer Ziffer beginnt), kann dieses nur über die Klammernotation erreicht werden. Diese Notation ist zusätzlich sehr hilfreich, wenn Namen von Eigenschaften dynamisch ermittelt werden (Wenn die Namen nicht bis zur Laufzeit ermittelt werden können). Im folgenden ein Beispiel:</p>
+
+<pre class="brush: js">// four variables are created and assigned in a single go,
+// separated by commas
+var myObj = new Object(),
+    str = 'myString',
+    rand = Math.random(),
+    obj = new Object();
+
+myObj.type              = 'Dot syntax';
+myObj['date created']   = 'String with space';
+myObj[str]              = 'String value';
+myObj[rand]             = 'Random Number';
+myObj[obj]              = 'Object';
+myObj['']               = 'Even an empty string';
+
+console.log(myObj);
+</pre>
+
+<p>Zu bemerken ist, dass alle Schlüssel in der Klammernotation zum Typ Strings konvertiert werden, weil in JavaScript nur Strings als Schlüssel bei Objekte erlaubt sind. Zum Beispiel wird im orberen Beispiel <code>obj</code> konvertiert wenn es in <code>myObj</code> benutzt wird. JavaScript ruft die <code>obj.toString()</code> Methode auf und benutzt den resultierenden String als neuen Schlüssel.</p>
+
+<p>Man kann eine Eigenschaft auch erreichen, indem eine Variable vom Typ String benutzt wird:</p>
+
+<pre class="brush: js">var propertyName = 'make';
+myCar[propertyName] = 'Ford';
+
+propertyName = 'model';
+myCar[propertyName] = 'Mustang';
+</pre>
+
+<p>Man kann die Klammernotation mit <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"> </a>nutzen, um über alle enumerable (aufzählbaren) Eigenschaften eines Objektes zu iterieren. Um dieses zu zeigen wie das funktioniert, zeigt die folgende Funktion die Eigenschaften eines Objektes, wenn eine Objekt und der Name des Objektes der Funktion als Parameter übergeben werden:</p>
+
+<pre class="brush: js">function showProps(obj, objName) {
+  var result = '';
+  for (var i in obj) {
+    // obj.hasOwnProperty() wird benutzt um Eigenschaften aus der Prototypen-Kette herauszufiltern
+    if (obj.hasOwnProperty(i)) {
+      result += objName + '.' + i + ' = ' + obj[i] + '\n';
+    }
+  }
+  return result;
+}
+</pre>
+
+<p>So gibt der Aufruf <code>showProps(myCar, "myCar")</code> folgenden Rückgabewert zurück:</p>
+
+<pre class="brush: js">myCar.make = Ford
+myCar.model = Mustang
+myCar.year = 1969</pre>
+
+<h2 id="Enumerate_the_properties_of_an_object">Enumerate the properties of an object</h2>
+
+<p>Starting with <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla" title="en-US/docs/JavaScript/ECMAScript 5 support in Mozilla">ECMAScript 5</a>, there are three native ways to list/traverse object properties:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in" title="en-US/docs/JavaScript/Reference/Statements/for...in">for...in</a></code> loops<br>
+  This method traverses all enumerable properties of an object and its prototype chain</li>
+ <li>{{jsxref("Object.keys", "Object.keys(o)")}}<br>
+  This method returns an array with all the own (not in the prototype chain) enumerable properties' names ("keys") of an object <code>o</code>.</li>
+ <li>{{jsxref("Object.getOwnPropertyNames", "Object.getOwnPropertyNames(o)")}}<br>
+  This method returns an array containing all own properties' names (enumerable or not) of an object <code>o</code>.</li>
+</ul>
+
+<p>Before ECMAScript 5, there was no native way to list all properties of an object. However, this can be achieved with the following function:</p>
+
+<pre class="brush: js">function listAllProperties(o) {
+	var objectToInspect;
+	var result = [];
+
+	for(objectToInspect = o; objectToInspect !== null; objectToInspect = Object.getPrototypeOf(objectToInspect)) {
+      result = result.concat(Object.getOwnPropertyNames(objectToInspect));
+	}
+
+	return result;
+}
+</pre>
+
+<p>This can be useful to reveal "hidden" properties (properties in the prototype chain which are not accessible through the object, because another property has the same name earlier in the prototype chain). Listing accessible properties only can easily be done by removing duplicates in the array.</p>
+
+<h2 id="Creating_new_objects">Creating new objects</h2>
+
+<p>JavaScript has a number of predefined objects. In addition, you can create your own objects. You can create an object using an <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer</a>. Alternatively, you can first create a constructor function and then instantiate an object invoking that function in conjunction with the <code>new</code> operator.</p>
+
+<h3 id="Using_object_initializers"><a id="Object_initializers" name="Object_initializers">Using object initializers</a></h3>
+
+<p>In addition to creating objects using a constructor function, you can create objects using an <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer</a>. Using object initializers is sometimes referred to as creating objects with literal notation. "Object initializer" is consistent with the terminology used by C++.</p>
+
+<p>The syntax for an object using an object initializer is:</p>
+
+<pre class="brush: js">var obj = { property_1:   value_1,   // property_# may be an identifier...
+            2:            value_2,   // or a number...
+            // ...,
+            'property n': value_n }; // or a string
+</pre>
+
+<p>where <code>obj</code> is the name of the new object, each <code>property_<em>i</em></code> is an identifier (either a name, a number, or a string literal), and each <code>value_<em>i</em></code> is an expression whose value is assigned to the <code>property_<em>i</em></code>. The <code>obj</code> and assignment is optional; if you do not need to refer to this object elsewhere, you do not need to assign it to a variable. (Note that you may need to wrap the object literal in parentheses if the object appears where a statement is expected, so as not to have the literal be confused with a block statement.)</p>
+
+<p>Object initializers are expressions, and each object initializer results in a new object being created whenever the statement in which it appears is executed. Identical object initializers create distinct objects that will not compare to each other as equal. Objects are created as if a call to <code>new Object()</code> were made; that is, objects made from object literal expressions are instances of <code>Object</code>.</p>
+
+<p>The following statement creates an object and assigns it to the variable <code>x</code> if and only if the expression <code>cond</code> is true:</p>
+
+<pre class="brush: js">if (cond) var x = {greeting: 'hi there'};
+</pre>
+
+<p>The following example creates <code>myHonda</code> with three properties. Note that the <code>engine</code> property is also an object with its own properties.</p>
+
+<pre class="brush: js">var myHonda = {color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}};
+</pre>
+
+<p>You can also use object initializers to create arrays. See <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Array_literals">array literals</a>.</p>
+
+<h3 id="Using_a_constructor_function">Using a constructor function</h3>
+
+<p>Alternatively, you can create an object with these two steps:</p>
+
+<ol>
+ <li>Define the object type by writing a constructor function. There is a strong convention, with good reason, to use a capital initial letter.</li>
+ <li>Create an instance of the object with <code>new</code>.</li>
+</ol>
+
+<p>To define an object type, create a function for the object type that specifies its name, properties, and methods. For example, suppose you want to create an object type for cars. You want this type of object to be called <code>Car</code>, and you want it to have properties for make, model, and year. To do this, you would write the following function:</p>
+
+<pre class="brush: js">function Car(make, model, year) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+}
+</pre>
+
+<p>Notice the use of <code>this</code> to assign values to the object's properties based on the values passed to the function.</p>
+
+<p>Now you can create an object called <code>mycar</code> as follows:</p>
+
+<pre class="brush: js">var mycar = new Car('Eagle', 'Talon TSi', 1993);
+</pre>
+
+<p>This statement creates <code>mycar</code> and assigns it the specified values for its properties. Then the value of <code>mycar.make</code> is the string "Eagle", <code>mycar.year</code> is the integer 1993, and so on.</p>
+
+<p>You can create any number of <code>Car</code> objects by calls to <code>new</code>. For example,</p>
+
+<pre class="brush: js">var kenscar = new Car('Nissan', '300ZX', 1992);
+var vpgscar = new Car('Mazda', 'Miata', 1990);
+</pre>
+
+<p>An object can have a property that is itself another object. For example, suppose you define an object called <code>person</code> as follows:</p>
+
+<pre class="brush: js">function Person(name, age, sex) {
+  this.name = name;
+  this.age = age;
+  this.sex = sex;
+}
+</pre>
+
+<p>and then instantiate two new <code>person</code> objects as follows:</p>
+
+<pre class="brush: js">var rand = new Person('Rand McKinnon', 33, 'M');
+var ken = new Person('Ken Jones', 39, 'M');
+</pre>
+
+<p>Then, you can rewrite the definition of <code>Car</code> to include an <code>owner</code> property that takes a <code>person</code> object, as follows:</p>
+
+<pre class="brush: js">function Car(make, model, year, owner) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+  this.owner = owner;
+}
+</pre>
+
+<p>To instantiate the new objects, you then use the following:</p>
+
+<pre class="brush: js">var car1 = new Car('Eagle', 'Talon TSi', 1993, rand);
+var car2 = new Car('Nissan', '300ZX', 1992, ken);
+</pre>
+
+<p>Notice that instead of passing a literal string or integer value when creating the new objects, the above statements pass the objects <code>rand</code> and <code>ken</code> as the arguments for the owners. Then if you want to find out the name of the owner of car2, you can access the following property:</p>
+
+<pre class="brush: js">car2.owner.name
+</pre>
+
+<p>Note that you can always add a property to a previously defined object. For example, the statement</p>
+
+<pre class="brush: js">car1.color = 'black';
+</pre>
+
+<p>adds a property <code>color</code> to car1, and assigns it a value of "black." However, this does not affect any other objects. To add the new property to all objects of the same type, you have to add the property to the definition of the <code>Car</code> object type.</p>
+
+<h3 id="Using_the_Object.create_method">Using the <code>Object.create</code> method</h3>
+
+<p>Objects can also be created using the {{jsxref("Object.create()")}} method. This method can be very useful, because it allows you to choose the prototype object for the object you want to create, without having to define a constructor function.</p>
+
+<pre class="brush: js">// Animal properties and method encapsulation
+var Animal = {
+  type: 'Invertebrates', // Default value of properties
+  displayType: function() {  // Method which will display type of Animal
+    console.log(this.type);
+  }
+};
+
+// Create new animal type called animal1
+var animal1 = Object.create(Animal);
+animal1.displayType(); // Output:Invertebrates
+
+// Create new animal type called Fishes
+var fish = Object.create(Animal);
+fish.type = 'Fishes';
+fish.displayType(); // Output:Fishes</pre>
+
+<h2 id="Inheritance">Inheritance</h2>
+
+<p>All objects in JavaScript inherit from at least one other object. The object being inherited from is known as the prototype, and the inherited properties can be found in the <code>prototype</code> object of the constructor. See <a href="/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Inheritance and the prototype chain</a> for more information.</p>
+
+<h2 id="Indexing_object_properties">Indexing object properties</h2>
+
+<p>You can refer to a property of an object either by its property name or by its ordinal index. If you initially define a property by its name, you must always refer to it by its name, and if you initially define a property by an index, you must always refer to it by its index.</p>
+
+<p>This restriction applies when you create an object and its properties with a constructor function (as we did previously with the <code>Car</code> object type) and when you define individual properties explicitly (for example, <code>myCar.color = "red"</code>). If you initially define an object property with an index, such as <code>myCar[5] = "25 mpg"</code>, you subsequently refer to the property only as <code>myCar[5]</code>.</p>
+
+<p>The exception to this rule is objects reflected from HTML, such as the <code>forms</code> array. You can always refer to objects in these arrays by either their ordinal number (based on where they appear in the document) or their name (if defined). For example, if the second <code>&lt;FORM&gt;</code> tag in a document has a <code>NAME</code> attribute of "myForm", you can refer to the form as <code>document.forms[1]</code> or <code>document.forms["myForm"]</code> or <code>document.forms.myForm</code>.</p>
+
+<h2 id="Defining_properties_for_an_object_type">Defining properties for an object type</h2>
+
+<p>You can add a property to a previously defined object type by using the <code>prototype</code> property. This defines a property that is shared by all objects of the specified type, rather than by just one instance of the object. The following code adds a <code>color</code> property to all objects of type <code>Car</code>, and then assigns a value to the <code>color</code> property of the object <code>car1</code>.</p>
+
+<pre class="brush: js">Car.prototype.color = null;
+car1.color = 'black';
+</pre>
+
+<p>See the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype" title="en-US/docs/JavaScript/Reference/Global Objects/Function/prototype"><code>prototype</code> property</a> of the <code>Function</code> object in the <a href="/en-US/docs/Web/JavaScript/Reference">JavaScript reference</a> for more information.</p>
+
+<h2 id="Defining_methods">Defining methods</h2>
+
+<p>A <em>method</em> is a function associated with an object, or, simply put, a method is a property of an object that is a function. Methods are defined the way normal functions are defined, except that they have to be assigned as the property of an object. See also <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a> for more details. An example is:</p>
+
+<pre class="brush: js">objectName.methodname = functionName;
+
+var myObj = {
+  myMethod: function(params) {
+    // ...do something
+  }
+
+  // OR THIS WORKS TOO
+
+  myOtherMethod(params) {
+    // ...do something else
+  }
+};
+</pre>
+
+<p>where <code>objectName</code> is an existing object, <code>methodname</code> is the name you are assigning to the method, and <code>functionName</code> is the name of the function.</p>
+
+<p>You can then call the method in the context of the object as follows:</p>
+
+<pre class="brush: js">object.methodname(params);
+</pre>
+
+<p>You can define methods for an object type by including a method definition in the object constructor function. You could define a function that would format and display the properties of the previously-defined <code>Car</code> objects; for example,</p>
+
+<pre class="brush: js">function displayCar() {
+  var result = 'A Beautiful ' + this.year + ' ' + this.make
+    + ' ' + this.model;
+  pretty_print(result);
+}
+</pre>
+
+<p>where <code>pretty_print</code> is a function to display a horizontal rule and a string. Notice the use of <code>this</code> to refer to the object to which the method belongs.</p>
+
+<p>You can make this function a method of <code>Car</code> by adding the statement</p>
+
+<pre class="brush: js">this.displayCar = displayCar;
+</pre>
+
+<p>to the object definition. So, the full definition of <code>Car</code> would now look like</p>
+
+<pre class="brush: js">function Car(make, model, year, owner) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+  this.owner = owner;
+  this.displayCar = displayCar;
+}
+</pre>
+
+<p>Then you can call the <code>displayCar</code> method for each of the objects as follows:</p>
+
+<pre class="brush: js">car1.displayCar();
+car2.displayCar();
+</pre>
+
+<h2 id="Using_this_for_object_references">Using <code>this</code> for object references</h2>
+
+<p>JavaScript has a special keyword, <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code>, that you can use within a method to refer to the current object. For example, suppose you have a function called <code>validate</code> that validates an object's <code>value</code> property, given the object and the high and low values:</p>
+
+<pre class="brush: js">function validate(obj, lowval, hival) {
+  if ((obj.value &lt; lowval) || (obj.value &gt; hival)) {
+    alert('Invalid Value!');
+  }
+}
+</pre>
+
+<p>Then, you could call <code>validate</code> in each form element's <code>onchange</code> event handler, using <code>this</code> to pass it the element, as in the following example:</p>
+
+<pre class="brush: html">&lt;input type="text" name="age" size="3"
+  onChange="validate(this, 18, 99)"&gt;
+</pre>
+
+<p>In general, <code>this</code> refers to the calling object in a method.</p>
+
+<p>When combined with the <code>form</code> property, <code>this</code> can refer to the current object's parent form. In the following example, the form <code>myForm</code> contains a <code>Text</code> object and a button. When the user clicks the button, the value of the <code>Text</code> object is set to the form's name. The button's <code>onclick</code> event handler uses <code>this.form</code> to refer to the parent form, <code>myForm</code>.</p>
+
+<pre class="brush: html">&lt;form name="myForm"&gt;
+&lt;p&gt;&lt;label&gt;Form name:&lt;input type="text" name="text1" value="Beluga"&gt;&lt;/label&gt;
+&lt;p&gt;&lt;input name="button1" type="button" value="Show Form Name"
+     onclick="this.form.text1.value = this.form.name"&gt;
+&lt;/p&gt;
+&lt;/form&gt;</pre>
+
+<h2 id="Defining_getters_and_setters">Defining getters and setters</h2>
+
+<p>A <a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a> is a method that gets the value of a specific property. A <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a> is a method that sets the value of a specific property. You can define getters and setters on any predefined core object or user-defined object that supports the addition of new properties. The syntax for defining getters and setters uses the object literal syntax.</p>
+
+<p>The following illustrates how getters and setters could work for a user-defined object <code>o</code>.</p>
+
+<pre class="brush: js">var o = {
+  a: 7,
+  get b() {
+    return this.a + 1;
+  },
+  set c(x) {
+    this.a = x / 2;
+  }
+};
+
+console.log(o.a); // 7
+console.log(o.b); // 8
+o.c = 50;
+console.log(o.a); // 25
+</pre>
+
+<p>The <code>o</code> object's properties are:</p>
+
+<ul>
+ <li><code>o.a</code> — a number</li>
+ <li><code>o.b</code> — a getter that returns <code>o.a</code> plus 1</li>
+ <li><code>o.c</code> — a setter that sets the value of <code>o.a</code> to half of the value <code>o.c</code> is being set to</li>
+</ul>
+
+<p>Please note that function names of getters and setters defined in an object literal using "[gs]et <em>property</em>()" (as opposed to <code>__define[GS]etter__</code> ) are not the names of the getters themselves, even though the <code>[gs]et <em>propertyName</em>(){ }</code> syntax may mislead you to think otherwise. To name a function in a getter or setter using the "[gs]et <em>property</em>()" syntax, define an explicitly named function programmatically using <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty" title="en-US/docs/Core JavaScript 1.5 Reference/Global
+Objects/Object/defineProperty">Object.defineProperty</a></code> (or the <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineGetter" title="en-US/docs/Core JavaScript 1.5 Reference/Global
+Objects/Object/defineGetter">Object.prototype.__defineGetter__</a></code> legacy fallback).</p>
+
+<p>The following code illustrates how getters and setters can extend the {{jsxref("Date")}} prototype to add a <code>year</code> property to all instances of the predefined <code>Date</code> class. It uses the <code>Date</code> class's existing <code>getFullYear</code> and <code>setFullYear</code> methods to support the <code>year</code> property's getter and setter.</p>
+
+<p>These statements define a getter and setter for the year property:</p>
+
+<pre class="brush: js">var d = Date.prototype;
+Object.defineProperty(d, 'year', {
+  get: function() { return this.getFullYear(); },
+  set: function(y) { this.setFullYear(y); }
+});
+</pre>
+
+<p>These statements use the getter and setter in a <code>Date</code> object:</p>
+
+<pre class="brush: js">var now = new Date();
+console.log(now.year); // 2000
+now.year = 2001; // 987617605170
+console.log(now);
+// Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001
+</pre>
+
+<p>In principle, getters and setters can be either</p>
+
+<ul>
+ <li>defined using <a href="#Object_initializers">object initializers</a>, or</li>
+ <li>added later to any object at any time using a getter or setter adding method.</li>
+</ul>
+
+<p>When defining getters and setters using <a href="#Object_initializers">object initializers</a> all you need to do is to prefix a getter method with <code>get</code> and a setter method with <code>set</code>. Of course, the getter method must not expect a parameter, while the setter method expects exactly one parameter (the new value to set). For instance:</p>
+
+<pre class="brush: js">var o = {
+  a: 7,
+  get b() { return this.a + 1; },
+  set c(x) { this.a = x / 2; }
+};
+</pre>
+
+<p>Getters and setters can also be added to an object at any time after creation using the <code>Object.defineProperties</code> method. This method's first parameter is the object on which you want to define the getter or setter. The second parameter is an object whose property names are the getter or setter names, and whose property values are objects for defining the getter or setter functions. Here's an example that defines the same getter and setter used in the previous example:</p>
+
+<pre class="brush: js">var o = { a: 0 };
+
+Object.defineProperties(o, {
+    'b': { get: function() { return this.a + 1; } },
+    'c': { set: function(x) { this.a = x / 2; } }
+});
+
+o.c = 10; // Runs the setter, which assigns 10 / 2 (5) to the 'a' property
+console.log(o.b); // Runs the getter, which yields a + 1 or 6
+</pre>
+
+<p>Which of the two forms to choose depends on your programming style and task at hand. If you already go for the object initializer when defining a prototype you will probably most of the time choose the first form. This form is more compact and natural. However, if you need to add getters and setters later — because you did not write the prototype or particular object — then the second form is the only possible form. The second form probably best represents the dynamic nature of JavaScript — but it can make the code hard to read and understand.</p>
+
+<h2 id="Deleting_properties">Deleting properties</h2>
+
+<p>You can remove a non-inherited property by using the <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code> operator. The following code shows how to remove a property.</p>
+
+<pre class="brush: js">// Creates a new object, myobj, with two properties, a and b.
+var myobj = new Object;
+myobj.a = 5;
+myobj.b = 12;
+
+// Removes the a property, leaving myobj with only the b property.
+delete myobj.a;
+console.log ('a' in myobj); // yields "false"
+</pre>
+
+<p>You can also use <code>delete</code> to delete a global variable if the <code>var</code> keyword was not used to declare the variable:</p>
+
+<pre class="brush: js">g = 17;
+delete g;
+</pre>
+
+<h2 id="Comparing_Objects">Comparing Objects</h2>
+
+<p>In JavaScript objects are a reference type. Two distinct objects are never equal, even if they have the same properties. Only comparing the same object reference with itself yields true.</p>
+
+<pre class="brush: js">// Two variables, two distinct objects with the same properties
+var fruit = {name: 'apple'};
+var fruitbear = {name: 'apple'};
+
+fruit == fruitbear; // return false
+fruit === fruitbear; // return false</pre>
+
+<pre class="brush: js">// Two variables, a single object
+var fruit = {name: 'apple'};
+var fruitbear = fruit;  // assign fruit object reference to fruitbear
+
+// here fruit and fruitbear are pointing to same object
+fruit == fruitbear; // return true
+fruit === fruitbear; // return true
+</pre>
+
+<pre class="brush: js">fruit.name = 'grape';
+console.log(fruitbear);    // yields { name: "grape" } instead of { name: "apple" }
+</pre>
+
+<p>For more information about comparison operators, see <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">Comparison operators</a>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>To dive deeper, read about the <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">details of javaScript's objects model</a>.</li>
+ <li>To learn about ECMAScript 2015 classes (a new way to create objects), read the <a href="/en-US/docs/Web/JavaScript/Reference/Classes">JavaScript classes</a> chapter.</li>
+</ul>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Feinheiten_des_Objektmodells")}}</p>
diff --git a/files/de/web/javascript/guide/modules/index.html b/files/de/web/javascript/guide/modules/index.html
new file mode 100644
index 0000000000..25dfa9cadb
--- /dev/null
+++ b/files/de/web/javascript/guide/modules/index.html
@@ -0,0 +1,446 @@
+---
+title: JavaScript modules
+slug: Web/JavaScript/Guide/Modules
+translation_of: Web/JavaScript/Guide/Modules
+---
+<div>
+<p><strong>Ein Hintergrund zu den Modulen</strong></p>
+
+<p><br>
+ JavaScript-Programme haben ziemlich klein angefangen - in der Anfangszeit wurde es hauptsächlich für isolierte Skripting-Aufgaben verwendet, um Ihren Webseiten bei Bedarf ein wenig Interaktivität zu verleihen, so dass große Skripte im Allgemeinen nicht erforderlich waren. Spätestens nach ein paar Jahren haben wir nun komplette Anwendungen, die in Browsern mit viel JavaScript ausgeführt werden, sowie JavaScript, das auch in anderen Kontexten verwendet wird (z.B. Node.js).</p>
+
+<p>Daher war es in den letzten Jahren sinnvoll, darüber nachzudenken, Mechanismen zur Aufteilung von JavaScript-Programmen in separate Module bereitzustellen, die bei Bedarf importiert werden können. Node.js besitzt diese Fähigkeit schon seit langem, und es gibt eine Reihe von JavaScript-Bibliotheken und Frameworks, die die Verwendung von Modulen ermöglichen (z.B. andere CommonJS- und AMD-basierte Modulsysteme wie RequireJS und seit kurzem auch Webpack und Babel).</p>
+
+<p>Die gute Nachricht ist, dass moderne Browser begonnen haben, die Modulfunktionalität nativ zu unterstützen, und genau darum geht es in diesem Artikel. Das kann nur eine gute Sache sein - Browser können das Laden von Modulen optimieren und damit effizienter machen, als wenn man eine Bibliothek verwenden müsste und all diese zusätzlichen clientseitigen Verarbeitungen und zusätzlichen Roundtrips durchführen müsste.</p>
+
+<p>Übersetzt mit www.DeepL.com/Translator (kostenlose Version)</p>
+</div>
+
+<h2 id="Browser_support">Browser support</h2>
+
+<p>Die Verwendung von nativen JavaScript-Modulen ist abhängig von den Import- und Export-Anweisungen {{JSxRef("Statements/import", "import")}} und{{JSxRef("Statements/export", "export")}} , deren Browserkompatibilität wie folgt ist (die Zahlen in den grünen Kästen sind wahrscheinlich die Release-Version der jeweiligen Plattform, die die Funktion unterstützt):</p>
+
+<h3 id="import">import</h3>
+
+<p>{{Compat("javascript.statements.import")}}</p>
+
+<h3 id="export">export</h3>
+
+<p>{{Compat("javascript.statements.export")}}</p>
+
+<h2 id="Introducing_an_example">Introducing an example</h2>
+
+<p>To demonstrate usage of modules, we've created a <a href="https://github.com/mdn/js-examples/tree/master/modules">simple set of examples</a> that you can find on GitHub. These examples demonstrate a simple set of modules that create a <a href="/en-US/docs/Web/HTML/Element/canvas" title="Use the HTML &lt;canvas> element with either the canvas scripting API or the WebGL API to draw graphics and animations."><code>&lt;canvas&gt;</code></a> element on a webpage, and then draw (and report information about) different shapes on the canvas.</p>
+
+<p>These are fairly trivial, but have been kept deliberately simple to demonstrate modules clearly.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: If you want to download the examples and run them locally, you'll need to run them through a local web server.</p>
+</div>
+
+<h2 id="Basic_example_structure">Basic example structure</h2>
+
+<p>In our first example (see <a href="https://github.com/mdn/js-examples/tree/master/modules/basic-modules">basic-modules</a>) we have a file structure as follows:</p>
+
+<pre>index.html
+main.js
+modules/
+    canvas.js
+    square.js</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: All of the examples in this guide have basically the same structure; the above should start getting pretty familiar.</p>
+</div>
+
+<p>The modules directory's two modules are described below:</p>
+
+<ul>
+ <li><code>canvas.js</code> — contains functions related to setting up the canvas:
+
+  <ul>
+   <li><code>create()</code> — creates a canvas with a specified <code>width</code> and <code>height</code> inside a wrapper <a href="/en-US/docs/Web/HTML/Element/div" title="The HTML Content Division element (&lt;div>) is the generic container for flow content. It has no effect on the content or layout until styled using CSS."><code>&lt;div&gt;</code></a> with a specified ID, which is itself appended inside a specified parent element. Returns an object containing the canvas's 2D context and the wrapper's ID.</li>
+   <li><code>createReportList()</code> — creates an unordered list appended inside a specified wrapper element, which can be used to output report data into. Returns the list's ID.</li>
+  </ul>
+ </li>
+ <li><code>square.js</code> — contains:
+  <ul>
+   <li><code>name</code> — a constant containing the string 'square'.</li>
+   <li><code>draw()</code> — draws a square on a specified canvas, with a specified size, position, and color. Returns an object containing the square's size, position, and color.</li>
+   <li><code>reportArea()</code> — writes a square's area to a specific report list, given its length.</li>
+   <li><code>reportPerimeter()</code> — writes a square's perimeter to a specific report list, given its length.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Aside_—_.mjs_versus_.js">Aside — <code>.mjs</code> versus <code>.js</code></h2>
+
+<p>Throughout this article, we've used <code>.js</code> extensions for our module files, but in other resources you may see the <code>.mjs</code> extension used instead. <a href="https://v8.dev/features/modules#mjs">V8's documentation recommends this</a>, for example. The reasons given are:</p>
+
+<ul>
+ <li>It is good for clarity, i.e. it makes it clear which files are modules, and which are regular JavaScript.</li>
+ <li>It ensures that your module files are parsed as a module by runtimes such as <a href="https://nodejs.org/api/esm.html#esm_enabling">Node.js</a>, and build tools such as <a href="https://babeljs.io/docs/en/options#sourcetype">Babel</a>.</li>
+</ul>
+
+<p>However, we decided to keep to using <code>.js</code>, at least for the moment. To get modules to work correctly in a browser, you need to make sure that your server is serving them with a <code>Content-Type</code> header that contains a JavaScript MIME type such as <code>text/javascript</code>. If you don't, you'll get a strict MIME type checking error along the lines of "The server responded with a non-JavaScript MIME type" and the browser won't run your JavaScript. Most servers already set the correct type for <code>.js</code> files, but not yet for <code>.mjs</code> files. Servers that already serve <code>.mjs</code> files correctly include <a href="https://pages.github.com/">GitHub Pages</a> and <code><a href="https://github.com/http-party/http-server#readme">http-server</a></code> for Node.js.</p>
+
+<p>This is OK if you are using such an environment already, or if you aren't but you know what you are doing and have access (i.e. you can configure your server to set the correct <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type">Content-Type</a></code> for <code>.mjs</code> files). It could however cause confusion if you don't control the server you are serving files from, or are publishing files for public use, as we are here.</p>
+
+<p>For learning and portability purposes, we decided to keep to <code>.js</code>.</p>
+
+<p>If you really value the clarity of using <code>.mjs</code> for modules versus using <code>.js</code> for "normal" JavaScript files, but don't want to run into the problem described above, you could always use <code>.mjs</code> during development and convert them to <code>.js</code> during your build step.</p>
+
+<p>It is also worth noting that:</p>
+
+<ul>
+ <li>Some tools may never support <code>.mjs</code>, such as <a href="https://www.typescriptlang.org/">TypeScript</a>.</li>
+ <li>The <code>&lt;script type="module"&gt;</code> attribute is used to denote when a module is being pointed to, as you'll see below.</li>
+</ul>
+
+<h2 id="Exporting_module_features">Exporting module features</h2>
+
+<p>The first thing you do to get access to module features is export them. This is done using the {{JSxRef("Statements/export", "export")}} statement.</p>
+
+<p>The easiest way to use it is to place it in front of any items you want exported out of the module, for example:</p>
+
+<pre class="brush: js;">export const name = 'square';
+
+export function draw(ctx, length, x, y, color) {
+  ctx.fillStyle = color;
+  ctx.fillRect(x, y, length, length);
+
+  return {
+    length: length,
+    x: x,
+    y: y,
+    color: color
+  };
+}</pre>
+
+<p>You can export functions, <code>var</code>, <code>let</code>, <code>const</code>, and — as we'll see later — classes. They need to be top-level items; you can't use <code>export</code> inside a function, for example.</p>
+
+<p>A more convenient way of exporting all the items you want to export is to use a single export statement at the end of your module file, followed by a comma-separated list of the features you want to export wrapped in curly braces. For example:</p>
+
+<pre class="brush: js;">export { name, draw, reportArea, reportPerimeter };</pre>
+
+<h2 id="Importing_features_into_your_script">Importing features into your script</h2>
+
+<p>Once you've exported some features out of your module, you need to import them into your script to be able to use them. The simplest way to do this is as follows:</p>
+
+<pre class="brush: js;">import { name, draw, reportArea, reportPerimeter } from './modules/square.js';</pre>
+
+<p>You use the {{JSxRef("Statements/import", "import")}} statement, followed by a comma-separated list of the features you want to import wrapped in curly braces, followed by the keyword from, followed by the path to the module file — a path relative to the site root, which for our <code>basic-modules</code> example would be <code>/js-examples/modules/basic-modules</code>.</p>
+
+<p>However, we've written the path a bit differently — we are using the dot (<code>.</code>) syntax to mean "the current location", followed by the path beyond that to the file we are trying to find. This is much better than writing out the entire relative path each time, as it is shorter, and it makes the URL portable — the example will still work if you move it to a different location in the site hierarchy.</p>
+
+<p>So for example:</p>
+
+<pre>/js-examples/modules/basic-modules/modules/square.js</pre>
+
+<p>becomes</p>
+
+<pre>./modules/square.js</pre>
+
+<p>You can see such lines in action in <code><a href="https://github.com/mdn/js-examples/blob/master/modules/basic-modules/main.js">main.js</a></code>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: In some module systems, you can omit the file extension and the dot (e.g. <code>'/modules/square'</code>). This doesn't work in native JavaScript modules.</p>
+</div>
+
+<p>Once you've imported the features into your script, you can use them just like they were defined inside the same file. The following is found in <code>main.js</code>, below the import lines:</p>
+
+<pre class="brush: js;">let myCanvas = create('myCanvas', document.body, 480, 320);
+let reportList = createReportList(myCanvas.id);
+
+let square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
+reportArea(square1.length, reportList);
+reportPerimeter(square1.length, reportList);
+</pre>
+
+<h2 id="Applying_the_module_to_your_HTML">Applying the module to your HTML</h2>
+
+<p>Now we just need to apply the <code>main.js</code> module to our HTML page. This is very similar to how we apply a regular script to a page, with a few notable differences.</p>
+
+<p>First of all, you need to include <code>type="module"</code> in the <a href="/en-US/docs/Web/HTML/Element/script" title="The HTML &lt;script> element is used to embed or reference executable code; this is typically used to embed or refer to JavaScript code."><code>&lt;script&gt;</code></a> element, to declare this script as a module:</p>
+
+<pre class="brush: html; no-line-numbers">&lt;script type="module" src="main.js"&gt;&lt;/script&gt;</pre>
+
+<p>The script into which you import the module features basically acts as the top-level module. If you omit it, Firefox for example gives you an error of "SyntaxError: import declarations may only appear at top level of a module".</p>
+
+<p>You can only use <code>import</code> and <code>export</code> statements inside modules; not regular scripts.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: You can also import modules into internal scripts, as long as you include <code>type="module"</code>, for example <code>&lt;script type="module"&gt; //include script here &lt;/script&gt;</code>.</p>
+</div>
+
+<h2 id="Other_differences_between_modules_and_standard_scripts">Other differences between modules and standard scripts</h2>
+
+<ul>
+ <li>You need to pay attention to local testing — if you try to load the HTML file locally (i.e. with a <code>file://</code> URL), you'll run into CORS errors due to JavaScript module security requirements. You need to do your testing through a server.</li>
+ <li>Also, note that you might get different behavior from sections of script defined inside modules as opposed to in standard scripts. This is because modules use {{JSxRef("Strict_mode", "strict mode", "", 1)}} automatically.</li>
+ <li>There is no need to use the <code>defer</code> attribute (see <a href="/en-US/docs/Web/HTML/Element/script#Attributes" title="The HTML &lt;script> element is used to embed or reference executable code; this is typically used to embed or refer to JavaScript code."><code>&lt;script&gt;</code> attributes</a>) when loading a module script; modules are deferred automatically.</li>
+ <li>Modules are only executed once, even if they have been referenced in multiple <code>&lt;script&gt;</code> tags.</li>
+ <li>Last but not least, let's make this clear — module features are imported into the scope of a single script — they aren't available in the global scope. Therefore, you will only be able to access imported features in the script they are imported into, and you won't be able to access them from the JavaScript console, for example. You'll still get syntax errors shown in the DevTools, but you'll not be able to use some of the debugging techniques you might have expected to use.</li>
+</ul>
+
+<h2 id="Default_exports_versus_named_exports">Default exports versus named exports</h2>
+
+<p>The functionality we've exported so far has been comprised of <strong>named exports</strong> — each item (be it a function, <code>const</code>, etc.) has been referred to by its name upon export, and that name has been used to refer to it on import as well.</p>
+
+<p>There is also a type of export called the <strong>default export</strong> — this is designed to make it easy to have a default function provided by a module, and also helps JavaScript modules to interoperate with existing CommonJS and AMD module systems (as explained nicely in <a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 In Depth: Modules</a> by Jason Orendorff; search for "Default exports").</p>
+
+<p>Let's look at an example as we explain how it works. In our basic-modules <code>square.js</code> you can find a function called <code>randomSquare()</code> that creates a square with a random color, size, and position. We want to export this as our default, so at the bottom of the file we write this:</p>
+
+<pre class="brush: js;">export default randomSquare;</pre>
+
+<p>Note the lack of curly braces.</p>
+
+<p>We could instead prepend <code>export default</code> onto the function and define it as an anonymous function, like this:</p>
+
+<pre class="brush: js;">export default function(ctx) {
+  ...
+}</pre>
+
+<p>Over in our <code>main.js</code> file, we import the default function using this line:</p>
+
+<pre class="brush: js;">import randomSquare from './modules/square.js';</pre>
+
+<p>Again, note the lack of curly braces. This is because there is only one default export allowed per module, and we know that <code>randomSquare</code> is it. The above line is basically shorthand for:</p>
+
+<pre class="brush: js;">import {default as randomSquare} from './modules/square.js';</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: The as syntax for renaming exported items is explained below in the <a href="#Renaming_imports_and_exports">Renaming imports and exports</a> section.</p>
+</div>
+
+<h2 id="Avoiding_naming_conflicts">Avoiding naming conflicts</h2>
+
+<p>So far, our canvas shape drawing modules seem to be working OK. But what happens if we try to add a module that deals with drawing another shape, like a circle or triangle? These shapes would probably have associated functions like <code>draw()</code>, <code>reportArea()</code>, etc. too; if we tried to import different functions of the same name into the same top-level module file, we'd end up with conflicts and errors.</p>
+
+<p>Fortunately there are a number of ways to get around this. We'll look at these in the following sections.</p>
+
+<h2 id="Renaming_imports_and_exports">Renaming imports and exports</h2>
+
+<p>Inside your <code>import</code> and <code>export</code> statement's curly braces, you can use the keyword <code>as</code> along with a new feature name, to change the identifying name you will use for a feature inside the top-level module.</p>
+
+<p>So for example, both of the following would do the same job, albeit in a slightly different way:</p>
+
+<pre class="brush: js;">// inside module.js
+export {
+  function1 as newFunctionName,
+  function2 as anotherNewFunctionName
+};
+
+// inside main.js
+import { newFunctionName, anotherNewFunctionName } from './modules/module.js';</pre>
+
+<pre class="brush: js;">// inside module.js
+export { function1, function2 };
+
+// inside main.js
+import { function1 as newFunctionName,
+         function2 as anotherNewFunctionName } from './modules/module.js';</pre>
+
+<p>Let's look at a real example. In our <a href="https://github.com/mdn/js-examples/tree/master/modules/renaming">renaming</a> directory you'll see the same module system as in the previous example, except that we've added <code>circle.js</code> and <code>triangle.js</code> modules to draw and report on circles and triangles.</p>
+
+<p>Inside each of these modules, we've got features with the same names being exported, and therefore each has the same <code>export</code> statement at the bottom:</p>
+
+<pre class="brush: js;">export { name, draw, reportArea, reportPerimeter };</pre>
+
+<p>When importing these into <code>main.js</code>, if we tried to use</p>
+
+<pre class="brush: js;">import { name, draw, reportArea, reportPerimeter } from './modules/square.js';
+import { name, draw, reportArea, reportPerimeter } from './modules/circle.js';
+import { name, draw, reportArea, reportPerimeter } from './modules/triangle.js';</pre>
+
+<p>The browser would throw an error such as "SyntaxError: redeclaration of import name" (Firefox).</p>
+
+<p>Instead we need to rename the imports so that they are unique:</p>
+
+<pre class="brush: js;">import { name as squareName,
+         draw as drawSquare,
+         reportArea as reportSquareArea,
+         reportPerimeter as reportSquarePerimeter } from './modules/square.js';
+
+import { name as circleName,
+         draw as drawCircle,
+         reportArea as reportCircleArea,
+         reportPerimeter as reportCirclePerimeter } from './modules/circle.js';
+
+import { name as triangleName,
+        draw as drawTriangle,
+        reportArea as reportTriangleArea,
+        reportPerimeter as reportTrianglePerimeter } from './modules/triangle.js';</pre>
+
+<p>Note that you could solve the problem in the module files instead, e.g.</p>
+
+<pre class="brush: js;">// in square.js
+export { name as squareName,
+         draw as drawSquare,
+         reportArea as reportSquareArea,
+         reportPerimeter as reportSquarePerimeter };</pre>
+
+<pre class="brush: js;">// in main.js
+import { squareName, drawSquare, reportSquareArea, reportSquarePerimeter } from './modules/square.js';</pre>
+
+<p>And it would work just the same. What style you use is up to you, however it arguably makes more sense to leave your module code alone, and make the changes in the imports. This especially makes sense when you are importing from third party modules that you don't have any control over.</p>
+
+<h2 id="Creating_a_module_object">Creating a module object</h2>
+
+<p>The above method works OK, but it's a little messy and longwinded. An even better solution is to import each module's features inside a module object. The following syntax form does that:</p>
+
+<pre class="brush: js;">import * as Module from './modules/module.js';</pre>
+
+<p>This grabs all the exports available inside <code>module.js</code>, and makes them available as members of an object <code>Module</code>, effectively giving it its own namespace. So for example:</p>
+
+<pre class="brush: js;">Module.function1()
+Module.function2()
+etc.</pre>
+
+<p>Again, let's look at a real example. If you go to our <a href="https://github.com/mdn/js-examples/tree/master/modules/module-objects">module-objects</a> directory, you'll see the same example again, but rewritten to take advantage of this new syntax. In the modules, the exports are all in the following simple form:</p>
+
+<pre class="brush: js;">export { name, draw, reportArea, reportPerimeter };</pre>
+
+<p>The imports on the other hand look like this:</p>
+
+<pre class="brush: js;">import * as Canvas from './modules/canvas.js';
+
+import * as Square from './modules/square.js';
+import * as Circle from './modules/circle.js';
+import * as Triangle from './modules/triangle.js';</pre>
+
+<p>In each case, you can now access the module's imports underneath the specified object name, for example:</p>
+
+<pre class="brush: js;">let square1 = Square.draw(myCanvas.ctx, 50, 50, 100, 'blue');
+Square.reportArea(square1.length, reportList);
+Square.reportPerimeter(square1.length, reportList);</pre>
+
+<p>So you can now write the code just the same as before (as long as you include the object names where needed), and the imports are much neater.</p>
+
+<h2 id="Modules_and_classes">Modules and classes</h2>
+
+<p>As we hinted at earlier, you can also export and import classes; this is another option for avoiding conflicts in your code, and is especially useful if you've already got your module code written in an object-oriented style.</p>
+
+<p>You can see an example of our shape drawing module rewritten with ES classes in our <a href="https://github.com/mdn/js-examples/tree/master/modules/classes">classes</a> directory. As an example, the <code><a href="https://github.com/mdn/js-examples/blob/master/modules/classes/modules/square.js">square.js</a></code> file now contains all its functionality in a single class:</p>
+
+<pre class="brush: js;">class Square {
+  constructor(ctx, listId, length, x, y, color) {
+    ...
+  }
+
+  draw() {
+    ...
+  }
+
+  ...
+}</pre>
+
+<p>which we then export:</p>
+
+<pre class="brush: js;">export { Square };</pre>
+
+<p>Over in <code><a href="https://github.com/mdn/js-examples/blob/master/modules/classes/main.js">main.js</a></code>, we import it like this:</p>
+
+<pre class="brush: js;">import { Square } from './modules/square.js';</pre>
+
+<p>And then use the class to draw our square:</p>
+
+<pre class="brush: js;">let square1 = new Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
+square1.draw();
+square1.reportArea();
+square1.reportPerimeter();</pre>
+
+<h2 id="Aggregating_modules">Aggregating modules</h2>
+
+<p>There will be times where you'll want to aggregate modules together. You might have multiple levels of dependencies, where you want to simplify things, combining several submodules into one parent module. This is possible using export syntax of the following forms in the parent module:</p>
+
+<pre class="brush: js;">export * from 'x.js'
+export { name } from 'x.js'</pre>
+
+<p>For an example, see our <a href="https://github.com/mdn/js-examples/tree/master/modules/module-aggregation">module-aggregation</a> directory. In this example (based on our earlier classes example) we've got an extra module called <code>shapes.js</code>, which aggregates all the functionality from <code>circle.js</code>, <code>square.js</code>, and <code>triangle.js</code> together. We've also moved our submodules inside a subdirectory inside the <code>modules</code> directory called <code>shapes</code>. So the module structure in this example is:</p>
+
+<pre>modules/
+  canvas.js
+  shapes.js
+  shapes/
+    circle.js
+    square.js
+    triangle.js</pre>
+
+<p>In each of the submodules, the export is of the same form, e.g.</p>
+
+<pre class="brush: js;">export { Square };</pre>
+
+<p>Next up comes the aggregation part. Inside <code><a href="https://github.com/mdn/js-examples/blob/master/modules/module-aggregation/modules/shapes.js">shapes.js</a></code>, we include the following lines:</p>
+
+<pre class="brush: js;">export { Square } from './shapes/square.js';
+export { Triangle } from './shapes/triangle.js';
+export { Circle } from './shapes/circle.js';</pre>
+
+<p>These grab the exports from the individual submodules and effectively make them available from the <code>shapes.js</code> module.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: The exports referenced in <code>shapes.js</code> basically get redirected through the file and don't really exist there, so you won't be able to write any useful related code inside the same file.</p>
+</div>
+
+<p>So now in the <code>main.js</code> file, we can get access to all three module classes by replacing</p>
+
+<pre class="brush: js;">import { Square } from './modules/square.js';
+import { Circle } from './modules/circle.js';
+import { Triangle } from './modules/triangle.js';</pre>
+
+<p>with the following single line:</p>
+
+<pre class="brush: js;">import { Square, Circle, Triangle } from './modules/shapes.js';</pre>
+
+<h2 id="Dynamic_module_loading">Dynamic module loading</h2>
+
+<p>The newest part of the JavaScript modules functionality to be available in browsers is dynamic module loading. This allows you to dynamically load modules only when they are needed, rather than having to load everything up front. This has some obvious performance advantages; let's read on and see how it works.</p>
+
+<p>This new functionality allows you to call {{JSxRef("Statements/import", "import()", "#Dynamic_Imports")}} as a function, passing it the path to the module as a parameter. It returns a {{JSxRef("Promise")}}, which fulfills with a module object (see <a href="#Creating_a_module_object">Creating a module object</a>) giving you access to that object's exports, e.g.</p>
+
+<pre class="brush: js;">import('./modules/myModule.js')
+  .then((module) =&gt; {
+    // Do something with the module.
+  });</pre>
+
+<p>Let's look at an example. In the <a href="https://github.com/mdn/js-examples/tree/master/modules/dynamic-module-imports">dynamic-module-imports</a> directory we've got another example based on our classes example. This time however we are not drawing anything on the canvas when the example loads. Instead, we include three buttons — "Circle", "Square", and "Triangle" — that, when pressed, dynamically load the required module and then use it to draw the associated shape.</p>
+
+<p>In this example we've only made changes to our <code><a href="https://github.com/mdn/js-examples/blob/master/modules/dynamic-module-imports/index.html">index.html</a></code> and <code><a href="https://github.com/mdn/js-examples/blob/master/modules/dynamic-module-imports/main.mjs">main.js</a></code> files — the module exports remain the same as before.</p>
+
+<p>Over in <code>main.js</code> we've grabbed a reference to each button using a <a href="/en-US/docs/Web/API/Document/querySelector"><code>Document.querySelector()</code></a> call, for example:</p>
+
+<pre class="brush: js;">let squareBtn = document.querySelector('.square');</pre>
+
+<p>We then attach an event listener to each button so that when pressed, the relevant module is dynamically loaded and used to draw the shape:</p>
+
+<pre class="brush: js;">squareBtn.addEventListener('click', () =&gt; {
+  import('./modules/square.js').then((Module) =&gt; {
+    let square1 = new Module.Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
+    square1.draw();
+    square1.reportArea();
+    square1.reportPerimeter();
+  })
+});</pre>
+
+<p>Note that, because the promise fulfillment returns a module object, the class is then made a subfeature of the object, hence we now need to access the constructor with <code>Module.</code> prepended to it, e.g. <code>Module.Square( ... )</code>.</p>
+
+<h2 id="Troubleshooting">Troubleshooting</h2>
+
+<p>Here are a few tips that may help you if you are having trouble getting your modules to work. Feel free to add to the list if you discover more!</p>
+
+<ul>
+ <li>We mentioned this before, but to reiterate: <code>.js</code> files need to be loaded with a MIME-type of <code>text/javascript</code> (or another JavaScript-compatible MIME-type, but <code>text/javascript</code> is recommended), otherwise you'll get a strict MIME type checking error like "The server responded with a non-JavaScript MIME type".</li>
+ <li>If you try to load the HTML file locally (i.e. with a <code>file://</code> URL), you'll run into CORS errors due to JavaScript module security requirements. You need to do your testing through a server. GitHub pages is ideal as it also serves <code>.js</code> files with the correct MIME type.</li>
+ <li>Because <code>.mjs</code> is a non-standard file extension, some operating systems might not recognise it, or try to replace it with something else. For example, we found that macOS was silently adding on <code>.js</code> to the end of <code>.mjs</code> files and then automatically hiding the file extension. So all of our files were actually coming out as <code>x.mjs.js</code>. Once we turned off automatically hiding file extensions, and trained it to accept <code>.mjs</code>, it was OK.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://developers.google.com/web/fundamentals/primers/modules#mjs">Using JavaScript modules on the web</a>, by Addy Osmani and Mathias Bynens</li>
+ <li><a href="https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/">ES modules: A cartoon deep-dive</a>, Hacks blog post by Lin Clark</li>
+ <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks blog post by Jason Orendorff</li>
+ <li>Axel Rauschmayer's book <a href="http://exploringjs.com/es6/ch_modules.html">Exploring JS: Modules</a></li>
+</ul>
+
+<p>{{Previous("Web/JavaScript/Guide/Meta_programming")}}</p>
diff --git a/files/de/web/javascript/guide/numbers_and_dates/index.html b/files/de/web/javascript/guide/numbers_and_dates/index.html
new file mode 100644
index 0000000000..b38881bb07
--- /dev/null
+++ b/files/de/web/javascript/guide/numbers_and_dates/index.html
@@ -0,0 +1,378 @@
+---
+title: Numbers and dates
+slug: Web/JavaScript/Guide/Numbers_and_dates
+tags:
+  - Guide
+  - JavaScript
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Guide/Numbers_and_dates
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Ausdruecke_und_Operatoren", "Web/JavaScript/Guide/Text_formatting")}}</div>
+
+<p class="summary">Dieses Kapitel ist eine Einleitung in die Nutzung von Nummern und Daten in JavaScript.</p>
+
+<h2 id="Nummern">Nummern</h2>
+
+<p>In JavaScript sind alle Nummern als <a class="external external-icon" href="https://en.wikipedia.org/wiki/Double-precision_floating-point_format">double-precision 64-Bit Binärformat IEEE 754</a> umgesetzt (z.b. eine Zahl zwischen -(2<sup>53</sup> -1) und 2<sup>53</sup> -1). <strong>Es gibt keinen extra Datentypen für ganze Zahlen </strong>(z. B. Integer in anderen Programmiersprachen). Neben der Repräsentation von Gleitkommazahlen hat der Nummern Typ noch drei symbolische Werte: <code>+</code>{{jsxref("Infinity")}}, <code>-</code>{{jsxref("Infinity")}}, und {{jsxref("NaN")}} (not-a-number; keine Nummer). Siehe auch in das Kapitel <a href="/de/docs/Web/JavaScript/Datenstrukturen">JavaScript Datentypen und Strukturen</a> für den Umgang mit anderen primitiven Typen in JavaScript.</p>
+
+<p>Es gibt vier verschiedene Nummernliterale: Dezimal-, Binär-, Oktal- und Hexadezimalzahlen.</p>
+
+<h3 id="Dezimalzahlen">Dezimalzahlen</h3>
+
+<pre class="brush: js">1234567890
+42
+
+// Vorsichtig mit führenden Nullen in der Darstellung:
+
+0888 // wird zu 888 Dezimal
+0777 // wird im non-strict Modus zu 511 in Dezimal
+</pre>
+
+<p>Zu beachten ist, dass das Dezimalliteral mit einer 0 beginnen kann, jedoch wird die Zahl als Oktalzahl interpretiert, wenn die nächste Zahl nach der 0 kleiner als 8 ist.</p>
+
+<h3 id="Binärzahlen">Binärzahlen</h3>
+
+<p>Die Syntax von Binärzahlen schreibt vor, dass die Zahl mit einer 0 gefolgt von einem "B" (0b oder 0B) beginnen muss. Wenn die Ziffern nach dem 0b nicht 0 oder 1 sind, wird der folgenden <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code> erzeugt: "Missing binary digits after 0b".</p>
+
+<pre class="brush: js">var FLT_SIGNBIT  = 0b10000000000000000000000000000000; // 2147483648
+var FLT_EXPONENT = 0b01111111100000000000000000000000; // 2139095040
+var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607</pre>
+
+<h3 id="Oktalzahlen">Oktalzahlen</h3>
+
+<p>Die Syntax von Oktalzahlen schreibt vor, dass die Nummern mit einer 0 beginnen. Dahinter sind Ziffern mit den Werten 0 bis 7 möglich. Wenn die Ziffern größer als 7 sind, wird die Zahl als Dezimalzahl interpretiert.</p>
+
+<pre class="brush: js">var n = 0755; // 493
+var m = 0644; // 420
+</pre>
+
+<p>Der Strict mode in ECMAScript 5 verbietet Oktalzahlen. Die Syntax der Oktalzahlen ist in ECMAScript 5 nicht vorhanden, jedoch wird es von allen Browser, durch eine führende 0, unterstützt: <code>0644 === 420</code> und<code> "\045" === "%"</code>. In ECMAScript 2015 sind Oktalzahlen mit dem Präfix <code>0o</code> unterstützt:</p>
+
+<pre class="brush: js">var a = 0o10; // ES2015: 8
+</pre>
+
+<h3 id="Hexadezimalzahlen">Hexadezimalzahlen</h3>
+
+<p>Hexadezimalzahlen können geschrieben werden, indem der Präfix <code>0x</code> oder <code>0X</code> genutzt wird. Wenn die Ziffern nach 0x nicht eines der Zeichen 0123456789ABCDEF entspricht, wird folgender <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code>  erzeugt: "Identifier starts immediately after numeric literal".</p>
+
+<pre>0xFFFFFFFFFFFFFFFFF // 295147905179352830000
+0x123456789ABCDEF   // 81985529216486900
+0XA                 // 10
+</pre>
+
+<h3 id="Potenzierung">Potenzierung</h3>
+
+<pre>1E3   // 1000
+2e6   // 2000000
+0.1e2 // 10</pre>
+
+<h2 id="Number_Objekt"><code>Number</code> Objekt</h2>
+
+<p>Das vordefinierte {{jsxref("Number")}} Objekt enthält Eigenschaften für nummerische Konstanten, wie zum Beispiel Maximalwerte, not-a-number (keine Nummer) und Unendlich. Man kann die Werte dieser Eigenschaften nicht ändern. Die Eigenschaften werden folgendermaßen eingesetzt:</p>
+
+<pre class="brush: js">var biggestNum = Number.MAX_VALUE;
+var smallestNum = Number.MIN_VALUE;
+var infiniteNum = Number.POSITIVE_INFINITY;
+var negInfiniteNum = Number.NEGATIVE_INFINITY;
+var notANum = Number.NaN;
+</pre>
+
+<p>Man verweist immer auf die Eigenschaften des vordefinierten <code>Number</code> Objekt (wie oben gezeigt) und nicht auf die Eigenschaft eines selbst erstellten <code>Number</code> Objektes.</p>
+
+<p>Die folgende Tabelle fasst du Eigenschaften des <code>Number</code> Objektes zusammen:</p>
+
+<table class="standard-table">
+ <caption>Eigenschaften von <code>Number</code></caption>
+ <thead>
+  <tr>
+   <th scope="col">Eigenschaft</th>
+   <th scope="col">Beschreibung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("Number.MAX_VALUE")}}</td>
+   <td>Die größte repräsentierbare Zahl</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.MIN_VALUE")}}</td>
+   <td>Die kleinste repräsentierbare Zahl</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.NaN")}}</td>
+   <td>Spezieller Wert für "keine Zahl" ("not a number")</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.NEGATIVE_INFINITY")}}</td>
+   <td>Spezieller Wert für negativ Unendlich; wird bei einem Overflow zurückgegeben.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.POSITIVE_INFINITY")}}</td>
+   <td>Spezieller Wert für positiv Unendlich; wird bei einem Overflow zurückgegeben.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.EPSILON")}}</td>
+   <td>Der Unterschied zwischen eins und der kleinsten Zahl größer als eins, die als {{jsxref("Number")}} repräsentiert werden kann.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.MIN_SAFE_INTEGER")}}</td>
+   <td>Kleinste sichere ganze Zahl in JavaScript.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.MAX_SAFE_INTEGER")}}</td>
+   <td>Größte sichere ganze Zahl in JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Methoden von <code>Number</code></caption>
+ <thead>
+  <tr>
+   <th>Methode</th>
+   <th>Beschreibung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("Number.parseFloat()")}}</td>
+   <td>Liest eine String-Argument ein und gibt eine Floating-Point Zahl zurück.<br>
+    Macht das gleiche wie die globale {{jsxref("parseFloat", "parseFloat()")}} Funktion.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.parseInt()")}}</td>
+   <td>Liest eine String-Argument ein und gibt eine ganze Zahl in der spezifizierten Basis zurück.<br>
+    Macht das gleiche wie die globale {{jsxref("parseInt", "parseInt()")}} Funktion.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.isFinite()")}}</td>
+   <td>Erkennt, ob ein übergebener Wert eine endliche Zahl ist.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.isInteger()")}}</td>
+   <td>Erkennt, ob ein übergebener Wert eine ganze Zahl ist.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.isNaN()")}}</td>
+   <td>Erkennt, ob ein übergebener Wert {{jsxref("Global_Objects/NaN", "NaN")}} ist. Diese Funktion ist eine robustere Version der globalen {{jsxref("Global_Objects/isNaN", "isNaN()")}} Funktion</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.isSafeInteger()")}}</td>
+   <td>Erkennt, ob ein übergebener Wert eine sichere ganze Zahl ist.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Der <code>Number</code> Prototyp enthält Methoden zum Zurückgeben von Informationen eines <code>Number</code> Objekts in verschiedenen Formaten. Die folgende Tabelle fasst die Methoden von <code>Number.prototype</code> zusammen:</p>
+
+<table class="standard-table">
+ <caption>Methoden von <code>Number.prototype</code></caption>
+ <thead>
+  <tr>
+   <th scope="col">Methode</th>
+   <th scope="col">Beschreibung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("Number.toExponential", "toExponential()")}}</td>
+   <td>Gibt eine String-Repräsentation der Zahl in Exponential-Notation zurück.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.toFixed", "toFixed()")}}</td>
+   <td>Gibt eine String-Repräsentation der Zahl in Festkomma-Notation zurück.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.toPrecision", "toPrecision()")}}</td>
+   <td>Gibt eine String-Repräsentation der Zahl in einer spezifizierten Präzision in der Festkomma-Notation zurück.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Math_Objekt"><code>Math</code> Objekt</h2>
+
+<p>Das eingebaute {{jsxref("Math")}} Objekt hat Eigenschaften und Methoden für mathematische Konstanten und Funktionen. Zum Beispiel enthält die Eigenschaft <code>PI</code> des <code>Math</code> Objektes den Wert von Pi (3,141...), welche wie folgt in einer Anwendung eingesetzt wird:</p>
+
+<pre class="brush: js">Math.PI
+</pre>
+
+<p>Genauso sind mathematische Standardfunktionen Methoden von <code>Math</code>. Dabei sind trigonometrische, logarithmische, exponentielle und ander Funktionen enthalten. Zum Beispiel wird eine trigonometrische Funktion wie folgt eingesetzt:</p>
+
+<pre class="brush: js">Math.sin(1.56)
+</pre>
+
+<p>Alle trigonometrischen Funktionen von <code>Math</code> erwarten Argumente im Radiantenmaß.</p>
+
+<p>Die folgende Tabelle fasst die Methoden des <code>Math</code> Objektes zusammen:</p>
+
+<table class="standard-table">
+ <caption>Methoden von <code>Math</code></caption>
+ <thead>
+  <tr>
+   <th scope="col">Methode</th>
+   <th scope="col">Beschreibung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("Math.abs", "abs()")}}</td>
+   <td>Absoluter Wert.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.sin", "sin()")}}, {{jsxref("Math.cos", "cos()")}}, {{jsxref("Math.tan", "tan()")}}</td>
+   <td>Trigonometrische Standardfunktionen; Argumente im Radiantenmaß.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.asin", "asin()")}}, {{jsxref("Math.acos", "acos()")}}, {{jsxref("Math.atan", "atan()")}}, {{jsxref("Math.atan2", "atan2()")}}</td>
+   <td>Inverse trigonometrische Standardfunktionen; Rückgabewert im Radiantenmaß.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.sinh", "sinh()")}}, {{jsxref("Math.cosh", "cosh()")}}, {{jsxref("Math.tanh", "tanh()")}}</td>
+   <td>Hyperbolische trigonometrische Standardfunktionen; Rückgabewert im Radiantenmaß.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.asinh", "asinh()")}}, {{jsxref("Math.acosh", "acosh()")}}, {{jsxref("Math.atanh", "atanh()")}}</td>
+   <td>Inverse hyperbolische trigonometrische Standardfunktionen; Rückgabewert im Radiantenmaß.</td>
+  </tr>
+  <tr>
+   <td>
+    <p>{{jsxref("Math.pow", "pow()")}}, {{jsxref("Math.exp", "exp()")}}, {{jsxref("Math.expm1", "expm1()")}}, {{jsxref("Math.log10", "log10()")}}, {{jsxref("Math.log1p", "log1p()")}}, {{jsxref("Math.log2", "log2()")}}</p>
+   </td>
+   <td>Exponential- und Logarithmus-Funktionen.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.floor", "floor()")}}, {{jsxref("Math.ceil", "ceil()")}}</td>
+   <td>Gibt die größte/kleinste ganze Zahl kleiner/größer oder gleich dem Argument zurück.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.min", "min()")}}, {{jsxref("Math.max", "max()")}}</td>
+   <td>Gibt den kleinsten oder den größten Wert aus einer mit Komma getrennten Liste von Zahlen.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.random", "random()")}}</td>
+   <td>Gibt eine Zufallszahl zwischen 0 und 1 zurück.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.round", "round()")}}, {{jsxref("Math.fround", "fround()")}}, {{jsxref("Math.trunc", "trunc()")}},</td>
+   <td>Rundungs- und Abschnittsfunktionen.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.sqrt", "sqrt()")}}, {{jsxref("Math.cbrt", "cbrt()")}}, {{jsxref("Math.hypot", "hypot()")}}</td>
+   <td>Quadratwurzel, kubische Wurzel, Quadratwurzel von der Summe von Quadrierten Argumenten.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.sign", "sign()")}}</td>
+   <td>Das Vorzeichen einer Zahl, welches Angibt, ob eine Zahl positiv, negativ oder null ist.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.clz32", "clz32()")}},<br>
+    {{jsxref("Math.imul", "imul()")}}</td>
+   <td>Anzahl der führenden 0-Bits in der 32-Bit Binärrepräsentation.<br>
+    Das Resultat der C-Ähnlichen 32-Bit Multiplikation von 2 Argumenten.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Im Gegensatz zu vielen Anderen Objekten, erzeigt man nie selber ein neues <code>Math</code> Objekt. Man benutzt immer das globale Objekt.</p>
+
+<h2 id="Date_Objekt"><code>Date</code> Objekt</h2>
+
+<p>JavaScript hat keinen Datums-Datentypen. Allerdings kann das {{jsxref("Date")}} Objekt und seine Methoden genutzt werden, um mit Daten und Zeiten in einer Applikation zu arbeiten. Das <code>Date</code>-Objekt hat sehr viele Methoden für das Einstellen, Abfragen und Manipulieren von Daten. Es hat keine Eigenschaften.</p>
+
+<p>JavaScript verarbeitet Daten ähnlich wie es in Java gemacht wird. In beiden Sprachen sind viele Methoden gleich und beide Sprachen speichern das Datum als Unix Zeitstempel, also die Anzahl der Millisekunden seit dem 1. Januar 1970 00:00:00, ab.</p>
+
+<p>Der Wertebereich eines <code>Date</code> Objektes ist zwischen -100.000.000 und 100.000.000 Tagen relativ zum 1. Januar 1970 UTC.</p>
+
+<p>Das erstellen eines <code>Date</code> Objektes:</p>
+
+<pre class="brush: js">var dateObjectName = new Date([parameters]);
+</pre>
+
+<p>Dabei ist <code>dateObjectName</code> der Name der Variablen, in der das erstellte <code>Date</code> Objekt gespeichert wird.</p>
+
+<p>Unter <code>parameters</code> können folgenden Werte eingesetzt werden:</p>
+
+<ul>
+ <li>Nichts: Erstellt das aktuelle Datum mit der aktuellen Zeit. Zum Beispiel: <code>today = new Date();</code>.</li>
+ <li>Eine Stringrepräsentation eines Datums mit folgenden Werten: "Monat Tag, Jahr Stunde:Minute:Sekunde". Zum Beispiel: <code>var Xmas95 = new Date("December 25, 1995 13:30:00")</code>. Wenn die Stunden, Minuten und Sekunden nicht angegeben werden, werden diese auf 0 gesetzt.</li>
+ <li>Eine Menge von ganzen Zahlen für das Jahr, den Monat und den Tag. Zum Beispiel: <code>var Xmas95 = new Date(1995, 11, 25)</code>.</li>
+ <li>Eine Menge von ganzen Zahlen für das Jahr, den Monat, den Tag, die Stunde, die Minute und die Sekunde. Zum Beispiel: <code>var Xmas95 = new Date(1995, 11, 25, 9, 30, 0)</code>.</li>
+</ul>
+
+<h3 id="Methoden_des_Date_Objektes">Methoden des <code>Date</code> Objektes</h3>
+
+<p>Das Methoden des <code>Date</code> Objektes für die Behandlung von Daten und Zeiten werden in folgende Kategorien eingeteilt:</p>
+
+<ul>
+ <li>"set"-Methoden für das Einstellten von Datums- und Zeit-Werten eines <code>Date</code>-Objektes.</li>
+ <li>"get"-Methoden für das Abfragen von Datums- und Zeit-Werten eines <code>Date</code>-Objektes.</li>
+ <li>"to"-Methoden für das Erstellen von String-Werten eines <code>Date</code>-Objektes.</li>
+ <li>"parse"- und "UTC"-Methoden für das Einlesen von String-Werten.</li>
+</ul>
+
+<p>Mit den "get"- und "set"-Methoden können Sekunden, Minuten, Stunden, Tag des Monats, Wochentag, Monat und Jahr separat eingestellt und abgefragt werden. Es gibt eine <code>getDay</code>-Methode, welche den Wochentag zurückgibt, es gibt aber keine vergleichbare <code>setDay</code>-Methode, weil der Wochentag automatisch eingestellt wird. Diese Methoden benutzen ganze Zahlen um folgende Werte darzustellen:</p>
+
+<ul>
+ <li>Sekunden und Minuten: 0 bis 59</li>
+ <li>Stunden: 0 bis 23</li>
+ <li>Tage: 0 (Sonntage) bis 6 (Samstag)</li>
+ <li>Tag (des Monats): 1 bis 31</li>
+ <li>Monat: 0 (Januar) bis 11 (Dezember)</li>
+ <li>Jahr: Jahre seit 1900</li>
+</ul>
+
+<p>Angenommen, man erstellt folgendes Datum:</p>
+
+<pre class="brush: js">var Xmas95 = new Date("December 25, 1995");
+</pre>
+
+<p>Dann gibt <code>Xmas95.getMonth()</code> 11 zurück und <code>Xmas95.getFullYear()</code> gibt 1995 zurück.</p>
+
+<p>Die <code>getTime</code> und <code>setTime</code> Methoden sind nützlich für das Vergleichen von Daten. Die <code>getTime</code> Methode gibt die Anzahl der Millisekunden seit dem 1. Januar 1970 00:00:00 eines <code>Date</code>-Objektes zurück.</p>
+
+<p>Der folgende Quelltext zeigt, wie die Anzahl der vergangenen Tage des aktuellen Jahres ermittelt werden kann:</p>
+
+<pre class="brush: js">var today = new Date();
+var endYear = new Date(1995, 11, 31, 23, 59, 59, 999); // Stellt den Tag und den Monat ein
+endYear.setFullYear(today.getFullYear()); // Stellt das Jahr auf das aktuelle Jahr
+var msPerDay = 24 * 60 * 60 * 1000; // Anzahl der Millisekunden pro Tag
+var daysLeft = (endYear.getTime() - today.getTime()) / msPerDay;
+var daysLeft = Math.round(daysLeft); //gibt die vergangenen Tage des aktuellen Jahres zurück
+</pre>
+
+<p>Diese Beispiel erstellt ein <code>Date</code>-Objekt namens <code>today</code>, welches das aktuelle Datum und die aktuelle Zeit enthält. Danach wird ein das <code>Date</code>-Objekt <code>endYear</code> erstellt und das Jahr wird auf das aktuelle Jahr eingestellt. Zum Schluss wird, mithilfe der Millisekunden pro Tag, die Anzahl der Tage zwischen <code>today</code> und <code>endYear</code> berechnet. Dafür wird die <code>getTime</code> Methode eingesetzt und es wird auf eine ganze Zahl von Tagen gerundet.</p>
+
+<p>Die <code>parse</code> Methode ist nützlich, um ein <code>Date</code>-Objekt aus einem String zu erstellen. Zum Beispiel verwendet der folgende Quelltext <code>parse</code> und <code>setTime</code> um das <code>IPOdate</code> einzustellen:</p>
+
+<pre class="brush: js">var IPOdate = new Date();
+IPOdate.setTime(Date.parse("Aug 9, 1995"));
+</pre>
+
+<h3 id="Beispiel">Beispiel</h3>
+
+<p>Im folgenden Beispiel, gibt die <code>JSClock()</code> Funktion die Zeit in dem Format einer digitalen Uhr zurück.</p>
+
+<pre class="brush: js">function JSClock() {
+  var time = new Date();
+  var hour = time.getHours();
+  var minute = time.getMinutes();
+  var second = time.getSeconds();
+  var temp = "" + ((hour &gt; 12) ? hour - 12 : hour);
+  if (hour == 0)
+    temp = "12";
+  temp += ((minute &lt; 10) ? ":0" : ":") + minute;
+  temp += ((second &lt; 10) ? ":0" : ":") + second;
+  temp += (hour &gt;= 12) ? " P.M." : " A.M.";
+  return temp;
+}
+</pre>
+
+<p>Die <code>JSClock</code> Funktion erstellt als erstes ein neues <code>Date</code> Objekt mit dem Namen <code>time</code>. Weil dabei keine Argumente angegeben werden, wird <code>time</code> mit dem aktuellen Datum und der aktuellen Zeit erstellt. Danach werden die Methoden <code>getHours</code>, <code>getMinutes</code>, und <code>getSeconds</code> eingesetzt, um den Wert der aktuellen Stunde, Minute und Sekunde in den Variablen  <code>hour</code>, <code>minute</code>, und <code>second</code> zu speichern.</p>
+
+<p>Die nächsten vier Statements bauen einen String-Wert mit der Zeit zusammen. Das erste Statement erstellt eine Variable <code>temp</code> und weist dieser einen Wert mit einem bedingten Ausdruck zu; wenn <code>hour</code> größer als 12 ist wird <code>hour - 12</code> zugewiesen, andernfalls nur <code>hour</code>. Wenn <code>hour</code> dann 0 ist, wird <code>hour</code> auf 12 gesetzt.</p>
+
+<p>Die nächsten Statement hängt einen den <code>minute</code>-Wert an <code>temp</code> heran. Wenn der Wert von <code>minute</code> kleiner als 10 ist, fügt der Bedingte Ausdruck einen String mit einer Null und einem Doppelpunkt an; andernfalls wird nur ein Doppelpunkt angehängt. Danach werden die Sekunden auf die gleiche weise angehängt.</p>
+
+<p>Zum Schluss fügt ein bedingter Ausdruck "P.M." an <code>temp</code> an, wenn die <code>hour</code> größer oder gleich 12 ist. Andernfalls wird "A.M." an <code>temp</code> angefügt.</p>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Ausdruecke_und_Operatoren", "Web/JavaScript/Guide/Text_formatting")}}</p>
diff --git a/files/de/web/javascript/guide/regular_expressions/index.html b/files/de/web/javascript/guide/regular_expressions/index.html
new file mode 100644
index 0000000000..4710e4e352
--- /dev/null
+++ b/files/de/web/javascript/guide/regular_expressions/index.html
@@ -0,0 +1,625 @@
+---
+title: Reguläre Ausdrücke
+slug: Web/JavaScript/Guide/Regular_Expressions
+tags:
+  - JavaScript
+  - ausdrücke
+  - regex
+  - reguläre
+translation_of: Web/JavaScript/Guide/Regular_Expressions
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Textformatierung", "Web/JavaScript/Guide/Indexed_collections")}}</div>
+
+<p class="summary">Reguläre Ausdrücke sind Muster, die eingesetzt werden, um Text auf bestimmte Zeichenkombinationen zu überprüfen. Auch reguläre Ausdrücke sind Objekte bei JavaScript. Die Muster werden mit den Methoden <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/RegExp/exec" title="exec"><code>exec</code></a> und <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/RegExp/test" title="test"><code>test</code></a> von <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/RegExp" title="RegExp"><code>RegExp</code></a> und den Methoden <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String/match" title="match"><code>match</code></a>, <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String/replace" title="en-US/docs/JavaScript/Reference/Global_Objects/String/replace"><code>replace</code></a>,<a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String/search" title="search"> <code>search</code></a> und <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String/split" title="split"><code>split</code></a> von <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String" title="String"><code>String</code></a> verwendet. Dieses Kapitel beschreibt reguläre Ausdrücke in JavaScript.</p>
+
+<h2 id="Erstellen_von_regulären_Ausdrücken">Erstellen von regulären Ausdrücken</h2>
+
+<p>Ein regulärer Ausdruck kann auf zwei verschiedene Arten erstellt werden.</p>
+
+<p>Zum einen kann ein Literal verwendet werden:</p>
+
+<pre class="brush:js;">var re = /ab+c/;</pre>
+
+<p>Hierbei findet die Kompilierung des regulären Ausdrucks während der Auswertung des Skripts statt. Wenn der reguläre Ausdruck konstant bleibt, ist diese Vorgehensweise aufgrund der schnelleren Ausführungsgeschwindigkeit empfehlenswert.</p>
+
+<p>Zum anderen kann wie folgt die Konstruktorfunktion des Objekts <code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/RegExp" title="en-US/docs/JavaScript/Reference/Global Objects/RegExp">RegExp</a></code> zum Einsatz kommen:</p>
+
+<pre class="brush:js;">var re = new RegExp("ab+c");</pre>
+
+<p>Bei der Benutzung der Konstruktorfunktion wird der reguläre Ausdruck während der Laufzeit kompiliert. Sie sollte verwendet werden, wenn man weiß, dass sich das Muster während der Laufzeit ändert oder man das Muster noch nicht kennt und von einer anderen Quelle, wie z. B. der Benutzereingabe, bezieht.</p>
+
+<h2 id="Schreiben_von_Mustern_für_reguläre_Ausdrücke">Schreiben von Mustern für reguläre Ausdrücke</h2>
+
+<p>Ein Muster eines regulären Ausdrucks wird aus einfachen Zeichen, wie z. B. <code>/abc/</code> oder einer Kombination von einfachen und speziellen Zeichen, wie z. B. <code>/ab*c/</code> oder <code>/Kapitel (\d+)\.\d*/</code> erstellt. Das letzte Beispiel enthält Klammern, die zur Speicherung verwendet werden. Die Übereinstimmung im Text, welche auf das eingeklammerte Muster passt, wird hierbei für die spätere Verwendung hinterlegt, wie unter <a href="/de/docs/JavaScript/Guide/Regular_Expressions#Benutzung_von_geklammerten_Mustern" title="/de/docs/JavaScript/Guide/Regular_Expressions#Benutzung_von_geklammerten_Mustern">Benutzung von geklammerten Mustern</a> beschrieben.</p>
+
+<h3 id="Verwendung_von_einfachen_Mustern">Verwendung von einfachen Mustern</h3>
+
+<p>Einfache Muster werden aus Zeichen konstruiert, für die man eine direkte Übereinstimmung finden möchte. Zum Beispiel passt das Muster <code>/abc/</code> nur dann für eine Zeichenkette, wenn exakt die Zeichen "abc" aufeinanderfolgend in dieser Reihenfolge vorkommen. Solch eine Übereinstimmung kommt z. B. in der Zeichenkette "Hallo, kennst du das abc?" und "Das müssen wir noch abchecken." vor. In beiden Fällen enthält die Zeichenkette die Zeichenfolge "abc". In der Zeichenkette "Stab" gibt es keine Übereinstimmung, weil die Zeichenfolge "abc" darin nicht vorkommt.</p>
+
+<h3 id="Verwendung_von_speziellen_Zeichen">Verwendung von speziellen Zeichen</h3>
+
+<p>Wenn bei der Suche nicht nur nach einer direkten Übereinstimmung, sondern z. B. nach einem oder mehreren aufeinanderfolgenden Vorkommen des Buchstabens "b" oder nach Leerräumen (sowohl Tabulator, Leerzeichen als auch Steuerzeichen) gesucht wird, kommen spezielle Zeichen zum Einsatz. Zum Beispiel stimmt das Muster <code>/ab*c/</code> mit allen Zeichenkombinationen überein, die ein "a", dann sofort nachfolgend 0 oder mehrere "b" (Das Sternchen bedeutet: 0 oder mehr Vorkommen des vorherigen Zeichens) und anschließend sofort ein "c" enthalten. Demnach wird in der Zeichenfolge "cbbabbbbcdebc" eine Übereinstimmung gefunden, weil das Muster auf die Zeichenfolge "abbbbc" passt.</p>
+
+<p>Die folgende Tabelle zeigt eine komplette Liste der speziellen Zeichen, die in regulären Ausdrücken verwendet werden, mit einer Beschreibung zu deren Bedeutung.</p>
+
+<table class="fullwidth-table">
+ <caption>Tabelle 4.1 Spezielle Zeichen in regulären Ausdrücken</caption>
+ <thead>
+  <tr>
+   <th scope="col">Zeichen</th>
+   <th scope="col">Bedeutung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="#special-backslash" id="special-backslash" name="special-backslash"><code>\</code></a></td>
+   <td>Eine der folgenden Bedeutungen:
+    <ul>
+     <li>Für Zeichen, die normalerweise buchstäblich interpretiert werden, wird mit der Voranstellung des Rückstrichs dafür gesorgt, dass das Zeichen als speziell und nicht als normales Zeichen interpretiert wird. Zum Beispiel stimmt <code>/b/</code> mit dem Zeichen "b" überein. Stellt man dem "b" einen Rückstrich voran, also <code>/\b/</code>, wird das Zeichen als spezielles Zeichen - in diesem Fall als <a href="#special-word-boundary" title="#special-word-boundary">Wortgrenze</a> - gedeutet.</li>
+     <li>Bei Zeichen, die normalerweise sofort als spezielle Zeichen interpretiert werden, bewirkt der Rückstrich genau das Gegenteil, d.h. dem Zeichen wird die spezielle Bedeutung genommen und es wird als einfaches Zeichen interpretiert. Zum Beispiel ist das Zeichen <code>*</code> (Sternchen) ein spezielles Zeichen mit der Bedeutung: 0 oder mehr Vorkommen des vorherigen Zeichens. Der Ausdruck <code>/a*/</code> steht demnach für 0 oder mehr a's. Um dem Zeichen <code>*</code> (Sternchen) die spezielle Bedeutung zu nehmen, stellt man ihm einen Rückstrich voran, z. B. stimmt <code>/a\*/</code> mit "a*" überein - der Stern wird nun als einfaches Zeichen interpretiert.</li>
+     <li>Das Maskieren eines Zeichens durch die Voranstellung eines Rückstrichs wird auch als <em>escapen</em> bezeichnet. Außerdem sollte man sich merken, dass bei Verwendung der new RegExp("pattern")-Notation auch der Rückstrich selbst eine spezielle Bedeutung hat und maskiert werden muss, wenn er als normales Zeichen interpretiert werden soll.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-caret" id="special-caret" name="special-caret"><code>^</code></a></td>
+   <td>
+    <p>Das Zirkumflex-Zeichen steht für den Anfang der Eingabe. Wenn das Flag für mehrere Zeilen (multiline flag) gesetzt ist, wird auch eine Übereinstimmung direkt hinter dem Zeichen für einen Zeilenumbruch (<code>\n</code>) gefunden.</p>
+
+    <p>Der Ausdruck <code>/^A/</code> passt zwar auf das "A" in "Apfel", nicht jedoch auf das "A" in "Ein Apfel", weil das "A" bei dieser Zeichenkette nicht am Anfang steht.</p>
+
+    <p>Achtung: Wenn das Zeichen innerhalb von eckigen Klammern (einer Zeichenauswahl) steht, hat es eine andere Bedeutung (siehe <a href="#special-negated-character-set" title="#special-negated-character-set"><code>[^xyz]</code></a> in dieser Tabelle).</p>
+
+    <p>Zum Beispiel stimmt <code>/[^a-zA-Z\s]/</code> mit der "3" in "Ich habe 3 Schwestern" überein. Die eckigen Klammern kennzeichnen die Zeichenauswahl. Das Zirkumflex innerhalb dieser Klammern negiert die aufgezählten Zeichen: nicht a bis z, nicht A bis Z und keine Leerräume wie das Leerzeichen oder die Steuerzeichen; übrig bleibt allein die "3".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/de/docs/JavaScript/Guide/Regular_Expressions#special-dollar" id="special-dollar" name="special-dollar"><code>$</code></a></td>
+   <td>
+    <p>Das Dollarzeichen steht für das Ende der Eingabe. Wenn das Flag für mehrere Zeilen (multiline flag) gesetzt ist, wird auch eine Übereinstimmung direkt hinter dem Zeichen für einen Zeilenumbruch (\n) gefunden.</p>
+
+    <p>Zum Beispiel wird mit <code>/t$/</code> bei "Butter" keine Übereinstimmung gefunden, jedoch bei "Brot", weil das "t" am Ende steht.</p>
+   </td>
+  </tr>
+  <tr>
+  </tr>
+  <tr>
+   <td><a href="#special-asterisk" name="special-asterisk"><code>*</code></a></td>
+   <td>
+    <p>Das Sternchen steht für eine beliebige Anzahl des vorangestellten Zeichens, also 0-mal oder öfter. Das Zeichen muss also nicht unbedingt vorkommen, sondern darf auch einfach nicht vorhanden sein. Das Sternchen wird gerne in Kombination mit dem . (Punkt) als Platzhalter für "ein beliebiges Zeichen beliebig oft" verwendet.</p>
+
+    <p>Der Ausdruck <code>/bu*/</code> passt auf "buuuuu" in "Ein Geist buuuuuht" als auch auf "b"  in "Ein Blauwal blubbert", jedoch nicht auf "Eine Katze kratzt".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-plus" id="special-plus" name="special-plus"><code>+</code></a></td>
+   <td>
+    <p>Steht für das vorangestellte Zeichen einmal oder öfter und ist äquivalent zu <code>{1,}</code>. Das Zeichen muss für einen Treffer also mindestens einmal vorkommen.</p>
+
+    <p>Zum Beispiel passt <code>/a+/</code> auf "a" in "Schokolade" und alle a's in "Schokolaaaade".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-questionmark" id="special-questionmark" name="special-questionmark"><code>?</code></a></td>
+   <td>
+    <p>Steht für das vorangestellte Zeichen 0 oder einmal und ist äquivalent zu <code>{0,1}</code>.</p>
+
+    <p>Zum Beispiel passt <code>/e?le?/</code> sowohl auf "el" in "Engel", als auch auf "le" in "Kapelle" und auch "l" in "Oslo".</p>
+
+    <p>Wenn es sofort hinter einen der Quantoren <code>*</code>, <code>+</code>, <code>?</code>, oder <code>{}</code> gestellt wird, deaktiviert es die standardmäßige "Gierigkeit" (eine möglichst hohe Anzahl von passende Zeichen einschließend) dieser Quantoren und macht sie "genügsam" (eine möglichst geringe Anzahl von passende Zeichen einschließend).</p>
+
+    <p>Zum Beispiel passt der Ausdruck <code>/\d+/</code> auf die Zeichenkette "123abc" angewendet auf "123", weil der Quantor + (Pluszeichen) "gierig" ist. Der Ausdruck /\d+?/ steht hingegen nur für "1", weil der Quantor + (Pluszeichen) aufgrund der Beeinflussung durch das hintangestellte ? (Fragezeichen) "genügsam" ist.</p>
+
+    <p>Das Fragezeichen wird auch bei sogenannten <em>lookahead assertions</em> (vorausschauenden Annahmen/Behauptungen) eingesetzt, die in dieser Tabelle unter <a href="#special-lookahead" title="#special-lookahead"><code>x(?=y)</code></a> und <a href="#special-negated-look-ahead" title="#special-negated-look-ahead"><code>x(?!y)</code></a> beschrieben sind.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-dot" id="special-dot" name="special-dot"><code>.</code></a></td>
+   <td>
+    <p>Der Punkt steht für ein einzelnes beliebiges Zeichen mit Ausnahme des Zeichens für den Zeilenumbruch.</p>
+
+    <p>Zum Beispiel passt <code>/.n/</code> auf "in" und "än" in der Zeichenkette "nur ein Apfel hängt am Baum", jedoch nicht auf das "n" ganz am Anfang, weil vor dem "n" ein beliebiges Zeichen stehen muss.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-capturing-parentheses" id="special-capturing-parentheses" name="special-capturing-parentheses"><code>(x)</code></a></td>
+   <td>
+    <p>Steht für die Zeichen "x", also die eingeklammerten Zeichen. Außerdem werden die Zeichen gespeichert, die mit dem einklammerten Muster übereinstimmen, damit sie an anderer Stelle wieder eingesetzt werden können. Die Klammern werden auch <em>capturing parentheses</em> (aufnehmende Klammern) genannt.</p>
+
+    <p>Zum Beispiel steht <code>/(foo)/</code> für "foo" in "foobar" und "foo" wird hinterlegt. Die Zeichen innerhalb der Klammern können durch Array-Elemente wieder eingesetzt werden. Dabei steht <code>[1]</code> für die Zeichen des ersten Klammerpaars, <code>[2]</code> für die Zeichen des zweiten Paars usw.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-non-capturing-parentheses" name="special-non-capturing-parentheses"><code>(?:x)</code></a></td>
+   <td>Steht für die Zeichen "x", aber die Übereinstimmung wird nicht hinterlegt. Diese Klammern werden auch als <em>non-capturing parentheses</em> bezeichnet. Die übereinstimmenden Zeichen können nicht wieder eingesetzt werden und die Array-Elemente <code>[1]</code>, ..., <code>[n]</code> finden keine Anwendung.</td>
+  </tr>
+  <tr>
+   <td><a href="#special-lookahead" id="special-lookahead" name="special-lookahead"><code>x(?=y)</code></a></td>
+   <td>
+    <p>Steht für die Zeichen "x", jedoch nur wenn "x" vor "y" steht. Dies wird als<em> lookahead</em> (vorausschauen) bezeichnet.</p>
+
+    <p>Zum Beispiel passt <code>/Mustermann(?=Max)/</code> auf "Mustermann" nur dann, wenn "Max" dahinter steht. Der Ausdruck <code>/Mustermann(?=Max|Erika)/</code> passt auf "Mustermann" nur dann, wenn dahinter "Max" oder "Erika" steht. Doch weder "Max" noch "Erika" ist Teil des übereinstimmenden Ergebnisses.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-negated-look-ahead" id="special-negated-look-ahead" name="special-negated-look-ahead"><code>x(?!y)</code></a></td>
+   <td>
+    <p>Passt nur dann auf die Zeichen "x", wenn "x" nicht vor den Zeichen "y" steht. Dies wird auch als <em>negated lookahead</em> (negierte vorausschauende Annahme) bezeichnet.</p>
+
+    <p>Zum Beispiel passt <code>/\d+(?!\.)/</code> nur dann auf eine Zahl, wenn diese nicht vor einem Dezimalpunkt steht. Der reguläre Ausdruck <code>/\d+(?!\.)/.exec("3.141")</code>  passt auf "141", jedoch nicht auf "3.141".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-or" id="special-or" name="special-or"><code>x|y</code></a></td>
+   <td>
+    <p>Passt auf entweder die Zeichen "x" oder die Zeichen "y".</p>
+
+    <p>Zum Beispiel passt der Ausdruck <code>/grüner|roter/</code>  auf "grüner" in "grüner Apfel" und "roter" in "roter Apfel".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-quantifier" id="special-quantifier" name="special-quantifier"><code>{n}</code></a></td>
+   <td>
+    <p>Das <code>n</code> steht für eine positive ganze Zahl. Das Muster passt exakt auf die Anzahl <code>n</code> des vorangestellten Zeichens.</p>
+
+    <p>Zum Beispiel passt <code>/a{2}/</code> nicht auf das "a" in "Schokolade",  jedoch auf alle beide a's in "Schokolaade" und die ersten beiden a's in "Schokolaaade".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-quantifier-range" id="special-quantifier-range" name="special-quantifier-range"><code>{n,m}</code></a></td>
+   <td>
+    <p>Wobei <code>n</code> und <code>m</code> positive ganze Zahlen sind. Passt auf mindestes <code>n</code> und höchstens <code>m</code> Vorkommen des vorangestellten Zeichens. Wenn für <code>n</code> oder <code>m</code> eine 0 stehen soll, kann diese auch weggelassen werden.</p>
+
+    <p>Zum Beispiel passt <code>/a{1,3}/</code> auf nichts in "cndy", jedoch auf das "a" in "candy", die beiden a's in "caandy," und die ersten drei a's in "caaaaaaandy".  Merke: Wenn der Ausdruck auf "caaaaaaandy" angewendet wird, ist die Übereinstimmung "aaa", auch wenn in der Zeichenkette mehr a's enthalten sind.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-character-set" id="special-character-set" name="special-character-set"><code>[xyz]</code></a></td>
+   <td>
+    <p>Die eckigen Klammern kennzeichnen eine Zeichenauswahl. Der Ausdruck stimmt mit allen in den Klammern stehenden Zeichen überein. Mit Hilfe eines Bindestrichs kann ein Bereich (z. B. von a bis z) festgelegt werden. Spezielle Zeichen (wie der Punkt oder das Sternchen) haben keine spezielle Bedeutung innerhalb der eckigen Klammern. Sie müssen nicht "escaped" werden. <a href="/de/docs/JavaScript/Guide/Werte_Variablen_und_Literale#Unicode_Escape-Sequenzen" title="/de/docs/JavaScript/Guide/Werte_Variablen_und_Literale#Unicode_Escape-Sequenzen">Escape-Sequenzen</a> funktionieren ebenfalls.</p>
+
+    <p>Zum Beispiel ist <code>[abcd]</code> dasselbe wie <span style="font-family: monospace;">[</span><code>a-d]</code>. Beides passt auf das "b" in "biegen" und das "d" in "denken". Die Ausdrücke<code> /[a-z.]+/</code> und <code>/[\w.]+/</code> passen beide auf "test.e.n". Der Punkt ist in diesem Fall kein spezielles Zeichen, weil er innerhalb der eckigen Klammern (Zeichenauswahl) steht.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-negated-character-set" id="special-negated-character-set" name="special-negated-character-set"><code>[^xyz]</code></a></td>
+   <td>
+    <p>Eine negierte oder komplementäre Zeichenauswahl. Das Zirkumflex-Zeichen an erster Stelle innerhalb der Klammern negiert die Zeichenauswahl. Der Ausdruck passt also auf alle Zeichen, die nicht in den Klammern stehen. Es kann mit Hilfe eines Bindestrichs auch ein Bereich von Zeichen (z. B. von a bis z) festgelegt werden. Alle Zeichen, die bei einer normalen Zeichenauswahl funktionieren, funktionieren hier ebenso.</p>
+
+    <p>Zum Beispiel ist <code>[^abc]</code> dasselbe wie <code>[^a-c]</code>. Beide Ausdrücke passen auf das "r" in "brechen" und das "m" in "campen".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-backspace" id="special-backspace" name="special-backspace"><code>[\b]</code></a></td>
+   <td>Passt auf das Steuerzeichen für die Backspace-Tastet (U+0008), welche den Cursor um eine Position nach links verschiebt und das dort stehende Zeichen entfernt. (Sollte nicht mit <code>\b</code> verwechselt werden.)</td>
+  </tr>
+  <tr>
+   <td><a href="#special-word-boundary" id="special-word-boundary" name="special-word-boundary"><code>\b</code></a></td>
+   <td>
+    <p>Steht für eine Wortgrenze. Wortgrenzen sind an den Stellen, wo kein anderes Wortzeichen vor oder hinter einem Wortzeichen steht. Eine Wortgrenze wird nicht in die Übereinstimmung aufgenommen. Mit anderen Worten ist die Länge einer Wortgrenze gleich 0 - die Wortgrenze ist der Zwischenraum zwischen einem Wortzeichen und einem Zeichen, das kein Wortzeichen ist oder zwischen einem Wortzeichen und dem Anfang oder Ende der Eingabe. (Sollte nicht mit <code>[\b]</code> verwechselt werden.)</p>
+
+    <p>Beispiele:<br>
+     <code>/\bMon/</code> passt auf das "Mon" in "Mond" ;<br>
+     <code>/ll\b/</code> passt nicht auf "ll" in "Falle", weil "ll" nicht vor einer Wortgrenze steht, sondern vor dem Zeichen "e", wobei es sich um ein Wortzeichen handelt.<br>
+     <code>/ond\b/</code> passt auf das "ond" in "Mond", weil "ond"  das Ende der Zeichenkette ist, also nicht vor einem Wortzeichen steht.<br>
+     <code>Bei /\w\b\w/</code> wird niemals eine Übereinstimmung gefunden, weil eine Wortgrenze niemals gleichzeitig vor einem Wortzeichen und keinem Wortzeichen stehen kann.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-non-word-boundary" id="special-non-word-boundary" name="special-non-word-boundary"><code>\B</code></a></td>
+   <td>
+    <p>Steht für alle Zeichen, die keine Wortgrenze sind. Dies trifft auf Positionen zu, wo zwei nebeneinanderstehende Zeichen vom selben Typ sind: Entweder sind beide Wortzeichen oder keine Wortzeichen. Der Anfang und das Ende einer Zeichenkette werden nicht als Wortzeichen angesehen, gelten also als Wortgrenzen.</p>
+
+    <p>For example, <code>/\B../</code> matches 'oo' in "noonday" (, and <code>/y\B./</code> matches 'ye' in "possibly yesterday."</p>
+
+    <p>Zum Beispiel passt <code>/\B../</code> auf "at" in "Katze" und <code>/e\B./</code> auf "ei" in "schlafe ein".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-control" id="special-control" name="special-control"><code>\c<em>X</em></code></a></td>
+   <td>
+    <p><em>X</em> ist ein Zeichenbereich von A bis Z. Passt auf ein Steuerzeichen in einer Zeichenkette.</p>
+
+    <p>Zum Beispiel steht <code>/\cM/</code> für das Steuerzeichen control-M (U+000D) in einer Zeichenkette.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-digit" id="special-digit" name="special-digit"><code>\d</code></a></td>
+   <td>
+    <p>Steht für Ziffern und ist äquivalent zu <code>[0-9]</code>.</p>
+
+    <p>Zum Beispiel passt <code>/\d/</code> oder <code>/[0-9]/</code> auf "2" in "B2 ist die Zimmernummer."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-non-digit" id="special-non-digit" name="special-non-digit"><code>\D</code></a></td>
+   <td>
+    <p>Steht für alle nicht-Ziffern und ist äquivalent zu <code>[^0-9]</code>.</p>
+
+    <p>Zum Beispiel passt <code>/\D/</code> oder <code>/[^0-9]/</code> auf "B" in "B2 ist die Zimmernummer."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-form-feed" id="special-form-feed" name="special-form-feed"><code>\f</code></a></td>
+   <td>Steht für einen Seitenvorschub (<strong>engl. <em>f</em></strong><em>orm feed</em> (U+000C)).</td>
+  </tr>
+  <tr>
+   <td><a href="#special-line-feed" id="special-line-feed" name="special-line-feed"><code>\n</code></a></td>
+   <td>Steht für einen Zeilenbruch (engl. <em>line feed</em> bzw. <em><strong>n</strong>ew line</em> U+000A).</td>
+  </tr>
+  <tr>
+   <td><a href="#special-carriage-return" id="special-carriage-return" name="special-carriage-return"><code>\r</code></a></td>
+   <td>Steht für einen Wagenrücklauf (engl. <em>carriage <strong>r</strong>eturn</em> (U+000D).</td>
+  </tr>
+  <tr>
+   <td><a href="#special-white-space" id="special-white-space" name="special-white-space"><code>\s</code></a></td>
+   <td>
+    <p>Steht für ein einzelnes Leerraum-Zeichen, einschließlich Leertaste, Tabulator, Seitenvorschub und Zeilenumbruch und ist äquivalent zu <code>[ \f\n\r\t\v​\u00A0\u1680​\u180e\u2000​\u2001\u2002​\u2003\u2004​ \u2005\u2006​\u2007\u2008​\u2009\u200a​\u2028\u2029​\u2028\u2029​ \u202f\u205f​\u3000]</code>.</p>
+
+    <p>Zum Beispiel passt <code>/\s\w*/</code> auf "bar" in "foo bar".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-non-white-space" id="special-non-white-space" name="special-non-white-space"><code>\S</code></a></td>
+   <td>
+    <p>Steht für ein einzelnes Zeichen, das kein Leerraum-Zeichen ist. Äquivalent zu <code>[^ \f\n\r\t\v​\u00A0\u1680​\u180e\u2000​\u2001\u2002​\u2003\u2004​ \u2005\u2006​\u2007\u2008​\u2009\u200a​\u2028\u2029​\u2028\u2029​ \u202f\u205f​\u3000]</code>.</p>
+
+    <p>Zum Beispiel passt <code>/\S\w*/</code> auf "foo" in "foo bar".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-tab" id="special-tab" name="special-tab"><code>\t</code></a></td>
+   <td>Steht für einen Tabulator (engl. <em>horizontal <strong>t</strong>ab</em> U+0009).</td>
+  </tr>
+  <tr>
+   <td><a href="#special-vertical-tab" id="special-vertical-tab" name="special-vertical-tab"><code>\v</code></a></td>
+   <td>Steht für einen vertikalen Tabulator (engl. <em><strong>v</strong>ertical tabulator</em> (U+000B).</td>
+  </tr>
+  <tr>
+   <td><a href="#special-word" id="special-word" name="special-word"><code>\w</code></a></td>
+   <td>
+    <p>Steht für ein alphanumerisches Zeichen (Wortzeichen), einschließlich Unterstrich. Äquivalent zu <code>[A-Za-z0-9_]</code>.</p>
+
+    <p>Zum Beispiel passt <code>/\w/</code> auf "a" in "apple" als auch auf "5" in "$5.28" und "3" in "3D".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-non-word" id="special-non-word" name="special-non-word"><code>\W</code></a></td>
+   <td>
+    <p>Steht für ein nicht-alphanumerisches Zeichen (nicht-Wortzeichen). Äquivalent zu <code>[^A-Za-z0-9_]</code>.</p>
+
+    <p>Zum Beispiel passt <code>/\W/</code> oder <code>/[^A-Za-z0-9_]/</code> auf "%" in "50%".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-backreference" id="special-backreference" name="special-backreference"><code>\<em>n</em></code></a></td>
+   <td>
+    <p>Stellt einen Rückgriff auf die passenden Zeichen eines eingeklammerten Teilausdrucks dar, wobei <em>n</em> eine positive ganze Zahl ist. Die Zahl steht hierbei für das jeweilige Teilmuster innerhalb eines Klammerpaars an entsprechender Stelle (öffnende Klammern werden gezählt).</p>
+
+    <p>Zum Beispiel passt <code>/Apfel(,)\sOrange\1/</code> auf "Apfel, Orange," in "Apfel, Orange, Kirsche, Pfirsich".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-null" id="special-null" name="special-null"><code>\0</code></a></td>
+   <td>Steht für ein NULL-Zeichen (U+0000). Es sollte kein Ziffer dahinter stehen, weil <code>\0&lt;Ziffer&gt;</code> eine Escape-Sequenz für oktale Zahlen ist.</td>
+  </tr>
+  <tr>
+   <td><a href="#special-hex-escape" id="special-hex-escape" name="special-hex-escape"><code>\x<em>hh</em></code></a></td>
+   <td>Steht für das Zeichen mit dem Code <em>hh</em> (zweistellige hexadezimale Zahl).</td>
+  </tr>
+  <tr>
+   <td><a href="#special-unicode-escape" id="special-unicode-escape" name="special-unicode-escape"><code>\u<em>hhhh</em></code></a></td>
+   <td>Steht für das Zeichen mit dem Code <em>hhhh</em> (vierstellige hexadezimale Zahl).</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Das Escapen von Benutzereingaben in einem Stringliteral eines regulären Ausdrucks kann durch folgende Ersetzung getan werden:</p>
+
+<pre>function escapeRegExp (string) {
+    return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&amp;"); // $&amp; meint den komplett erkannten String
+}</pre>
+
+<h3 id="Benutzung_von_Klammern">Benutzung von Klammern</h3>
+
+<p>Klammern werden verwendet, um den eingeklammerten Teil des regulären Ausdrucks zu speichern. Einmal gespeichert kann dieser Teil an anderer Stelle wieder eingesetzt werden, wie unter <a href="/de/docs/JavaScript/Guide/Regular_Expressions#Benutzung_von_geklammerten_Mustern" title="/de/docs/JavaScript/Guide/Regular_Expressions#Benutzung_von_geklammerten_Mustern">Benutzung von geklammerten Mustern</a> beschrieben.</p>
+
+<p>Zum Beispiel beinhaltet der Ausdruck <code>/Kapitel (\d+)\.\d*/</code> einige maskierte und spezielle Zeichen. Mit den Klammern wird bewirkt, dass die Zeichen, welche mit dem eingeklammerten Muster übereinstimmen, gespeichert werden. Der Ausdruck stimmt genau mit der Zeichenkette "Kapitel " gefolgt von einer oder mehreren Ziffern (<code>\d</code> steht für eine Ziffer und das <code>+</code> (Pluszeichen) bedeutet 1 oder mehr Vorkommen), einem Punkt (der Punkt selbst ist standardmäßig ein spezielles Zeichen, weshalb er maskiert werden muss) und nochmal beliebig vielen Ziffern (\d steht für eine Ziffer und der Stern bedeutet 0 oder mehr Vorkommen) überein. Zusätzlich werden die Klammern eingesetzt, um die erste Ziffer zu speichern.</p>
+
+<p>Eine Übereinstimmung wird z. B. in "Offenes Kapitel 4.3, Absatz 6" gefunden und dabei wird "4" gespeichert. Auf die Zeichenkette "Kapitel 3 und 4" passt der Ausdruck nicht, weil hinter der ersten Ziffer "3" kein Punkt steht.</p>
+
+<p>Möchte man einen zusammenhängenden Teil einer Zeichenkette suchen, jedoch nicht speichern, setzt man <code>?:</code> an den Anfang innerhalb der Klammern. Zum Beispiel stimmt <code>(?:\d+)</code> mit einer oder mehr Ziffern überein, aber diese Ziffern werden nicht gespeichert.</p>
+
+<h3 id="Arbeiten_mit_regulären_Ausdrücken">Arbeiten mit regulären Ausdrücken</h3>
+
+<p>Reguläre Ausdrücke werden mit den Methoden <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/RegExp/exec" title="exec"><code>exec</code></a> und <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/RegExp/test" title="test"><code>test</code></a> von <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/RegExp" title="RegExp"><code>RegExp</code></a> und den Methoden <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String/match" title="match"><code>match</code></a>, <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String/replace" title="en-US/docs/JavaScript/Reference/Global_Objects/String/replace"><code>replace</code></a>,<a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String/search" title="search"> <code>search</code></a> und <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String/split" title="split"><code>split</code></a> von <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String" title="String"><code>String</code></a> verwendet. Diese Methoden sind in der <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference" title="en-US/docs/JavaScript/Reference">JavaScript Referenz</a> beschrieben.</p>
+
+<table class="standard-table">
+ <caption>Tabelle 4.2 Methoden die reguläre Ausdrücke verwenden</caption>
+ <thead>
+  <tr>
+   <th scope="col">Method</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("RegExp.exec", "exec")}}</td>
+   <td>Eine Methode von <code>RegExp,</code> die eine Suche nach einer Übereinstimmung in einer Zeichenkette durchführt. Sie gibt ein Array mit den Übereinstimmungen zurück.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.test", "test")}}</td>
+   <td>Eine Methode von <code>RegExp</code>, die eine Zeichenkette auf eine Übereinstimmung überprüft. Sie gibt <code>true</code> oder <code>false</code> zurück.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.match", "match")}}</td>
+   <td>Eine Methode von <code>String</code>, die eine Suche nach einer Übereinstimmung in einer Zeichenkette durchführt. Sie gibt ein Array zurück oder <code>null</code> bei keinem Treffer.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.search", "search")}}</td>
+   <td>Eine Methode von <code>String</code>, die eine Zeichenkette auf eine Übereinstimmung überprüft. Sie gibt den Index der Übereinstimmung zurück oder -1 bei keinem Treffer.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.replace", "replace")}}</td>
+   <td>Eine Methode von <code>String</code>, die eine Suche nach einer Übereinstimmung in einer Zeichenkette durchführt und die Übereinstimmungen durch eine andere Zeichenkette ersetzt.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.split", "split")}}</td>
+   <td>Eine Methode von <code>String</code>, die anhand eines regulären Ausdrucks oder einer festen Zeichenkette eine Zeichenkette trennt und die Teile als Array zurückgibt.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Wenn man nur wissen möchte, ob ein regulärer Ausdruck auf eine Zeichenkette passt, sollten die Methoden <code>test</code> oder <code>search</code> zum Einsatz kommen. Möchte man mehr erfahren, sollte man auf die Methoden <code>exec</code> oder <code>match</code> zurückgreifen (langsamere Ausführungsgeschwindigkeit). Die Methoden <code>exec</code> und <code>match</code> geben ein Array zurück falls Übereinstimmungen gefunden werden und updaten die Eigenschaften des zugehörigen <code>RegExp</code>-Objekts und des vordefinierten <code>RegExp</code>-Objekts. Wenn keine Übereinstimmungen gefunden werden, geben die Methoden <code>null</code> (konvertiert: <code>false</code>) zurück.</p>
+
+<p>Bei folgendem Beispiel kommt die Methode exec zum Einsatz, um eine Übereinstimmung in einer Zeichenkette zu finden.  </p>
+
+<pre class="brush: js">var myRe = /d(b+)d/g;
+var myArray = myRe.exec("cdbbdbsbz");
+</pre>
+
+<p>Wenn man auf die Eingenschaften des Objekts für den regulären Ausdruck nicht zugreifen möchte, kann man <code>myArray</code> auch direkt wie folgt erzeugen:</p>
+
+<pre class="brush: js">var myArray = /d(b+)d/g.exec("cdbbdbsbz");  // äquivalent zu "cdbbdbsbz".match(/d(b+)d/g);
+</pre>
+
+<p>Möchte man den regulären Ausdruck aus einem String erzeugen, besteht folgende Möglichkeit:</p>
+
+<pre class="brush: js">var myRe = new RegExp("d(b+)d", "g");
+var myArray = myRe.exec("cdbbdbsbz");
+</pre>
+
+<p>Bei diesen Skripten werden Übereinstimmungen gefunden. Es wird ein Array zurückgegeben und die Eigenschaften geupdatet, welche in der nachstehenden Tabelle aufgelistet sind.</p>
+
+<table class="fullwidth-table">
+ <caption>Tabelle 4.3 Ergebnisse von regulären Ausdrücken</caption>
+ <thead>
+  <tr>
+   <th scope="col">Objekt</th>
+   <th scope="col">Eigenschaft oder Index</th>
+   <th scope="col">Beschreibung</th>
+   <th scope="col">Bei diesem Beispiel</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td rowspan="4"><code>myArray</code></td>
+   <td> </td>
+   <td>Die übereinstimmende Zeichenfolge und alle gespeicherten Teile.</td>
+   <td><code>["dbbd", "bb"]</code></td>
+  </tr>
+  <tr>
+   <td><code>index</code></td>
+   <td>Der mit 0 beginnende Index der Übereinstimmung in der Eingabe-Zeichenkette.</td>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <td><code>input</code></td>
+   <td>Die ursprüngliche Eingabe-Zeichenkette.</td>
+   <td><code>"cdbbdbsbz"</code></td>
+  </tr>
+  <tr>
+   <td><code>[0]</code></td>
+   <td>Die zuletzt übereinstimmenden Zeichen.</td>
+   <td><code>"dbbd"</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2"><code>myRe</code></td>
+   <td><code>lastIndex</code></td>
+   <td>Der Index bei dem die nächste Suche nach einer Übereinstimmung gestartet wird.  (Diese Eigenschaft wird nur gesetzt, wenn im regulären Ausdruck die Option "g" verwendet wird, wie unter <a href="#Erweiterte Suche mit Optionen (Flags)">Erweiterte Suche mit Optionen (Flags)</a> beschrieben).</td>
+   <td><code>5</code></td>
+  </tr>
+  <tr>
+   <td><code>source</code></td>
+   <td>Der Text des Musters - wird geupdatet wenn der reguläre Ausdruck erstellt wird, nicht bei der Ausführung.</td>
+   <td><code>"d(b+)d"</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Wie das zweite Beispiel zeigt, kann man einen regulären Ausdruck einsetzen, der über einen Objekt-Intializer erstellt wurde, ohne die Zuweisung einer Variablen. Bei dieser Vorgehensweise ist jede Übereinstimmung ein neuer Ausdruck. Aus diesem Grund kann nicht auf die Eigenschaften dieses regulären Ausdrucks zugegriffen werden. Angenommen man hat z. B. dieses Skript:</p>
+
+<pre class="brush: js">var myRe = /d(b+)d/g;
+var myArray = myRe.exec("cdbbdbsbz");
+console.log("Der Wert von lastIndex ist " + myRe.lastIndex);
+</pre>
+
+<p>Dann ist die Ausgabe:</p>
+
+<pre>Der Wert von lastIndex ist 5
+</pre>
+
+<p>Hat man nun aber dieses Skript:</p>
+
+<pre class="brush: js">var myArray = /d(b+)d/g.exec("cdbbdbsbz");
+console.log("Der Wert von lastIndex ist " + /d(b+)d/g.lastIndex);
+</pre>
+
+<p>Dann ist die Ausgabe:</p>
+
+<pre>Der Wert von lastIndex ist 0
+</pre>
+
+<p>Die einzelnen Vorkommen der Zeichenfolgen, die mit <code>/d(b+)d/g</code> übereinstimmen sind bei den beiden Anweisungen verschiedene Objekte und haben dementsprechend auch verschiedene Werte bei der jeweiligen Eigenschaft <code>lastIndex</code>. Falls man auf die Eigenschaften eines Objekts eines regulären Ausdrucks zugreifen möchte, sollte man diesen vorher einer Variablen zuweisen.</p>
+
+<h3 id="Benutzung_von_geklammerten_Mustern">Benutzung von geklammerten Mustern</h3>
+
+<p>Klammern werden verwendet, um einen Teil der Zeichen, die mit dem regulären Ausdruck übereinstimmen, zu speichern. Zum Beispiel stimmt <code>/a(b)c/</code> mit der Zeichenfolge "abc" überein und "b" wird gespeichert. Um die gespeicherten Zeichen wieder abzurufen, verwendet man die <code>Array</code>-Elemente <code>[1]</code>, ..., <code>[n]</code>.</p>
+
+<p>Die Anzahl der möglichen speicherbaren Teile ist nicht limitiert. Das Array, welches zurückgegeben wird, enthält alle gespeicherten Übereinstimmungen. Die folgenden Beispiele zeigen auf, wie man geklammerte Muster einsetzt.</p>
+
+<h4 id="Beispiel_1">Beispiel 1</h4>
+
+<p>Das folgende Skript benutzt die Methode <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String/replace" title="en-US/docs/JavaScript/Reference/Global Objects/String/replace"><code>replace()</code></a>, um Wörter in einer Zeichenkette auszutauschen. Die beiden Muster für die Wörter (<code>\w+</code>) wurden geklammert, damit die Wörter gespeichert werden. Anschließend werden im Ersetzungstext diese gespeicherten Wörter mit <code>$1</code> und <code>$2</code> wieder eingesetzt.</p>
+
+<pre class="brush: js">var re = /(\w+)\s(\w+)/;
+var str = "Jonas Schmidt";
+var newstr = str.replace(re, "$2, $1");
+console.log(newstr);
+</pre>
+
+<p>Die Ausgabe ist "Schmidt, Jonas".</p>
+
+<h3 id="Erweiterte_Suche_mit_Optionen_(Flags)"><a id="Erweiterte Suche mit Optionen (Flags)" name="Erweiterte Suche mit Optionen (Flags)">Erweiterte Suche mit Optionen (Flags)</a></h3>
+
+<p>Reguläre Ausdrücke kennen vier verschiedene Optionen (Flags), die es z. B. erlauben global nach Übereinstimmungen zu suchen oder die Berücksichtigung der Groß- und Kleinschreibweise zu deaktivieren. Zur Aktivierung der <strong>g</strong>lobalen Suche wird das Flag <code>g</code> eingesetzt. Die Berücksichtigung der Groß- und Kleinschreibweise (<em>engl. case-<strong>i</strong>nsensitive</em> ) wird mit dem Flag <code>i</code> abgeschaltet. Die mehrzeilige Suche (engl. <strong>m</strong>ultiline) wird mit dem Flag <code>m</code> aktiviert und eine "sticky" Suche, wobei die Übereinstimmung an der aktuellen Postion im Eingabe-Zeichenkette zutreffen muss, wird mit dem Flag <code>y</code> aktiviert. Diese Optionen können getrennt oder gemeinsam verwendet und in beliebiger Reihenfolge angegeben werden. Die Buchstaben werden einfach an den regulären Ausdruck angehängt.</p>
+
+<p>{{ Fx_minversion_note(3, "Die Unterstützung für das Flag <code>y</code> wurde bei Firefox 3 hinzugefügt. Wenn <code>y</code> aktiviert ist, schlägt die Suche fehl, wenn es keine Übereinstimmung an der aktuellen Position innerhalb der Eingabe-Zeichenkette gibt.") }}</p>
+
+<p>Syntax für die Verwendung von Optionen:</p>
+
+<pre class="brush: js">var re = /Muster/Optionen;
+</pre>
+
+<p>oder</p>
+
+<pre class="brush: js">var re = new RegExp("Muster", "Optionen");
+</pre>
+
+<p>Die Optionen sind ein integraler Bestandteil des regulären Ausdrucks. Sie können nicht im Nachhinein entfernt oder hinzugefügt werden.</p>
+
+<p>Zum Beispiel wird mit <code>re = /\w+\s/g</code> ein regulärer Ausdruck erstellt, der auf ein oder mehr Zeichen, gefolgt von einem Leerraum, passt. Nach diesem Muster wird über die ganze Zeichenkette hinweg gesucht.</p>
+
+<pre class="brush: js">var re = /\w+\s/g;
+var str = "fee fi fo fum";
+var myArray = str.match(re);
+console.log(myArray);
+</pre>
+
+<p>Hier ist die Ausgabe: ["fee ", "fi ", "fo "]. Bei diesem Beispiel könnte man die Zeile:</p>
+
+<pre class="brush: js">var re = /\w+\s/g;
+</pre>
+
+<p>mit folgender austauschen:</p>
+
+<pre class="brush: js">var re = new RegExp("\\w+\\s", "g");
+</pre>
+
+<p>und würde dasselbe Ergebnis erhalten.</p>
+
+<p>Die Option <code>m</code> sorgt dafür, dass eine mehrzeilige Eingabe auch als solche interpretiert wird. Wird die Option <code>m</code> angegeben, passen die speziellen Zeichen <code>^</code> und <code>$</code> auf den Anfang oder das Ende jeder Zeile der Eingabe, anstatt nur auf den Anfang und das Ende der gesamten Eingabe.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Das folgende Beispiel zeigt einige Einsatzmöglichkeiten von regulären Ausdrücken.</p>
+
+<h3 id="Ändern_der_Reihenfolge_in_einer_Zeichenkette">Ändern der Reihenfolge in einer Zeichenkette</h3>
+
+<p>Das folgende Beispiel veranschaulicht die Anordnung von regulären Ausdrücken und die Verwendung der Methoden <code>string.split()</code> und <code>string.replace()</code>. Im Beispiel wird eine schlecht formatierte Eingabe mit Personennamen (Vorname zuerst), die durch Leerzeichen, Tabulatoren und exakt ein Semikolon getrennt sind, bereinigt. Außerdem wird die Reihenfolge des jeweiligen Namens herumgedreht (Nachname zuerst) und die Liste nach Nachnamen sortiert.</p>
+
+<pre class="brush: js">// Die Zeichenkette beinhaltet mehrere Leerzeichen und Tabulatoren
+// und könnte mehrere Leerzeichen zwischen vor und Nachnamen enthalten.
+
+var names = "Lieschen Müller ;Erika Mustermann; Michel Deutscher ; Otto Normalverbraucher ; ";
+
+var output = ["---------- Original String\n", names + "\n"];
+
+// Erstellen von zwei regulären Ausdrücken und eines Arrays.
+// Die Eingabe-Zeichenkette wird in Array-Elemente zerlegt.
+
+// Muster: Möglicherweise ein Leerraum, dann ein Semikolon
+// und möglicherweise nochmal ein Leerraum (0 oder mehr).
+var pattern = /\s*;\s*/;
+
+// Splitten der Zeichenkette in einzelne Teile anhand des Musters und
+// speichern der Teile in einem Array mit Namen nameList.
+var nameList = names.split(pattern);
+
+// Neuer regulärer Ausdruck: ein oder mehr alphanumerische Zeichen,
+// dann mindestens ein Leerraum und nochmal mindestens ein Wortzeichen.
+// Klammern zum Speichern; Rückgriff auf gespeicherte Teile später.
+pattern = /(\w+)\s+(\w+)/;
+
+// Neues Array zum Speichern der bearbeiteten Namen.
+var bySurnameList = [];
+
+// Anzeigen des Arrays und befüllen des neuen Arrays
+// mit durch Komma getrennten Namen (Nachname zuerst).
+// Die Methode replace() entfernt alles, was mit dem Muster übereinstimmt
+// und ersetzt es durch den an zweiter Stelle angegebenen String,
+// bestehend aus den gespeicherten Teilen.
+// Zuerst wird der zweite Teil ($2) eingesetzt und anschließend durch Komma
+// und Leerzeichen getrennt der erste Teil ($1).
+
+output.push("---------- Nach Teilung durch regulären Ausdruck");
+
+var i, len;
+for (i = 0, len = nameList.length; i &lt; len; i++){
+  output.push(nameList[i]);
+  bySurnameList[i] = nameList[i].replace(pattern, "$2, $1");
+}
+
+// Anzeigen des neuen Arrays.
+output.push("---------- Namen reserviert");
+for (i = 0, len = bySurnameList.length; i &lt; len; i++){
+  output.push(bySurnameList[i]);
+}
+
+// Sortieren anhand des Nachnamens und anzeigen des neuen Arrays.
+bySurnameList.sort();
+output.push("---------- Sortiert");
+for (i = 0, len = bySurnameList.length; i &lt; len; i++){
+  output.push(bySurnameList[i]);
+}
+
+output.push("---------- End");
+
+console.log(output.join("\n"));
+</pre>
+
+<h3 id="Benutzung_von_speziellen_Zeichen_zur_Verifizierung_von_Eingaben">Benutzung von speziellen Zeichen zur Verifizierung von Eingaben</h3>
+
+<p>Beim nachstehenden Beispiel wird der Benutzer aufgefordert, eine Telefonnummer einzugeben. Wenn der Benutzer den "Prüfen"-Button drückt, überprüft das Skript die Validität der Nummer. Sofern dann sichergestellt ist, dass es sich um eine Telefonnummer handelt (die Eingabe stimmt mit dem Muster des regulären Ausdrucks überein), zeigt das Skript eine Nachricht, um dem Benutzer zu danken und die Nummer zu bestätigen. Wenn die Nummer nicht valide ist (nicht mit dem Muster des regulären Ausdrucks übereinstimmt), wird der Benutzer ebenfalls mit einer Nachricht darüber informiert.</p>
+
+<p>Das Muster des reguläre Ausdruck setzt sich folgendermaßen zusammen: Keine oder eine öffnende Klammer, <code>\(?</code>, gefolgt von drei Ziffern <code> \d{3}</code>, gefolgt von keiner oder einer schließenden Klammer <code>\)?</code>, gefolgt von einem Bindestrich, Schrägstrich, oder Punkt (falls vorhanden wird das Zeichen gespeichert) <code>([-\/\.])</code>, gefolgt von drei Ziffern <code>\d{3}</code>, gefolgt (falls vorhanden) von dem gespeicherten Zeichen (Bindestrich, Schrägstrich oder Punkt) <code>\1</code>, gefolgt von vier Ziffern <code>\d{4}</code>.</p>
+
+<p>Das Event <code>Change</code> wird ausgelöst, wenn der Benutzer die Enter-Taste drückt, um die Eingabe (den Wert für <code>RegExp.input</code>) zu bestätigen.</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
+    &lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
+    &lt;script type="text/javascript"&gt;
+      var re = /\(?\d{3}\)?([-\/\.])\d{3}\1\d{4}/;
+      function testInfo(phoneInput){
+        var OK = re.exec(phoneInput.value);
+        if (!OK)
+          window.alert(RegExp.input + " ist keine Telefonnummer mit Vorwahl!");
+        else
+          window.alert("Danke! Ihre Telefonnummer ist " + OK[0]);
+      }
+    &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;Bitte ihre Telefonnummer (mit Vorwahl) eingeben und den "Prüfen"-Button anklicken.
+        &lt;br&gt;Das Format ist z.B. ###-###-####.&lt;/p&gt;
+    &lt;form action="#"&gt;
+      &lt;input id="phone"&gt;&lt;button onclick="testInfo(document.getElementById('phone'));"&gt;Prüfen&lt;/button&gt;
+    &lt;/form&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Textformatierung", "Web/JavaScript/Guide/Indexed_collections")}}</p>
diff --git a/files/de/web/javascript/guide/schleifen_und_iterationen/index.html b/files/de/web/javascript/guide/schleifen_und_iterationen/index.html
new file mode 100644
index 0000000000..9f351abcd9
--- /dev/null
+++ b/files/de/web/javascript/guide/schleifen_und_iterationen/index.html
@@ -0,0 +1,337 @@
+---
+title: Schleifen und Iterationen
+slug: Web/JavaScript/Guide/schleifen_und_iterationen
+tags:
+  - Guide
+  - JavaScript
+  - Loop
+  - Syntax
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Guide/Loops_and_iteration
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</div>
+
+<p class="summary">Schleifen sind ein einfaches Werkzeug, um einzelne Schritte wiederholt auszuführen. Dieses Kapitel des <a href="/de/docs/Web/JavaScript/Guide">JavaScript Guide</a> stellt die verschiedenen Statements für Iterationen vor, welche in JavaScript zur Verfügung stehen.</p>
+
+<p>Man kann sich Schleifen wie eine Computerversion des Spiels vorstellen, bei dem man jemandem sagt, er soll x Schritte in eine Richtung und dann y Schritte in eine andere Richtung gehen. So kann zum Beispiel die Aussage "Gehe fünf Schritte nach Osten" mit Hilfe von Schleifen so ausgedrückt werden:</p>
+
+<pre class="brush: js">var schritt;
+for (schritt = 0; schritt &lt; 5; schritt++) {
+  // Laufe 5 mal, mit den Werten von Schritt 0 bis 4
+  console.log('Gehe einen Schritt nach Osten');
+}
+</pre>
+
+<p>Es gibt viele verschiedene Arten von Schleifen, doch im Wesentlichen verrichten alle die gleiche Aufgabe: sie führen eine Aktion für eine bestimmte Anzahl an Wiederholungen aus (diese Anzahl kann auch 0 sein). Dabei ermöglichen die verschiedenen Arten von Schleifen unterschiedliche Anfangs- und Endpunkte festzulegen. Es gibt zahlreiche Situationen in denen eine Art von Schleifen einfacher zum Ergebnis führt, als eine andere.</p>
+
+<p>JavaScript stellt folgende Statements für Schleifen zur Verfügung:</p>
+
+<ul>
+ <li>{{anch("for Statement")}}</li>
+ <li>{{anch("do...while Statement")}}</li>
+ <li>{{anch("while Statement")}}</li>
+ <li>{{anch("label Statement")}}</li>
+ <li>{{anch("break Statement")}}</li>
+ <li>{{anch("continue Statement")}}</li>
+ <li>{{anch("for...in Statement")}}</li>
+ <li>{{anch("for...of Statement")}}</li>
+</ul>
+
+<h2 id="for_Statement"><code>for</code> Statement</h2>
+
+<p>Eine  {{jsxref("statements/for","for Schleife")}} wird so lange durchlaufen, bis eine bestimmte Bedingung den Wert <code>false</code> liefert. Die for Schleife in JavaScript ist vergleichbar mit der in Java und C. Ein for Statement sieht wie folgt aus:</p>
+
+<pre class="syntaxbox">for ([initialerAusruck]; [Bedingung]; [erhöhenderAusdruck])
+  Anweisung
+</pre>
+
+<p>Bei der Ausführung einer for Schleife geschieht folgendes:</p>
+
+<ol>
+ <li>Der Ausdruck zur Initialisierung der Schleife <code>initialerAsudruck</code>, wird ausgeführt, sofern dieser existiert. Dieser Ausdruck initialisiert einen oder mehrere Schleifenzähler, wobei die Syntax beliebig komplexe Ausdrücke zulässt. In diesem Ausdruck können auch Variablen deklariert werden.</li>
+ <li>Die Bedingung <code>Bedingung</code> wird geprüft. Wenn die Auswertung von <code>Bedingung</code> den Wert <code>true</code> ergibt, werden die Anweisungen innerhalb der Schleife ausgeführt. Ergibt die Prüfung hingegen <code>false</code>, wird die Schleife verlassen. Bleibt die Bedingung leer, wird immer der Wert <code>true</code> angenommen.</li>
+ <li>Die <code>Anweisung</code> wird ausgeführt. Um mehrere Anweisungen auszuführen, werden Block-Anweisungen (<code>{ ... }</code>) verwendet, um diese zu gruppieren.</li>
+ <li>Wenn vorhanden, wird der Ausdruck <code>erhöhenderAusdruck</code> ausgeführt.</li>
+ <li>Geht zu Schritt 2 zurück.</li>
+</ol>
+
+<h3 id="Beispiel"><strong>Beispiel</strong></h3>
+
+<p>Die folgende Funktion enthält ein for Statement, welche die Anzahl der ausgewählten Optionen aus einer Auswahlliste (ein {{HTMLElement("select")}}, welches eine Mehrfachauswahl erlaubt) ermittelt. Das for Statement deklariert eine Variable <code>i</code> und initialisiert diese mit dem Wert 0. Sie prüft ob <code>i</code> kleiner als die Anzahl der verfügbarer Optionen des <code>&lt;select&gt;</code> Elements ist, führt das nachfolgende <code>if</code> Statement aus und erhöht <code>i</code> bei jedem Schleifendurchlauf um 1.</p>
+
+<pre class="brush: html">&lt;form name="selectForm"&gt;
+  &lt;p&gt;
+    &lt;label for="musicTypes"&gt;Choose some music types, then click the button below:&lt;/label&gt;
+    &lt;select id="musicTypes" name="musicTypes" multiple="multiple"&gt;
+      &lt;option selected="selected"&gt;R&amp;B&lt;/option&gt;
+      &lt;option&gt;Jazz&lt;/option&gt;
+      &lt;option&gt;Blues&lt;/option&gt;
+      &lt;option&gt;New Age&lt;/option&gt;
+      &lt;option&gt;Classical&lt;/option&gt;
+      &lt;option&gt;Opera&lt;/option&gt;
+    &lt;/select&gt;
+  &lt;/p&gt;
+  &lt;p&gt;&lt;input id="btn" type="button" value="How many are selected?" /&gt;&lt;/p&gt;
+&lt;/form&gt;
+
+&lt;script&gt;
+function howMany(selectObject) {
+  var numberSelected = 0;
+  for (var i = 0; i &lt; selectObject.options.length; i++) {
+    if (selectObject.options[i].selected) {
+      numberSelected++;
+    }
+  }
+  return numberSelected;
+}
+
+var btn = document.getElementById('btn');
+btn.addEventListener('click', function(){
+  alert('Number of options selected: ' + howMany(document.selectForm.musicTypes))
+});
+&lt;/script&gt;
+
+</pre>
+
+<h2 id="do...while_Statement"><code>do...while</code> Statement</h2>
+
+<p>Das {{jsxref("statements/do...while", "do...while")}} Statement wiederholt eine bestimmte Anweisung, bis eine Bedingung <code>false</code> ergibt. Ein <code>do...while</code> Statement sieht wie folgt aus:</p>
+
+<pre class="syntaxbox">do
+  anweisung
+while (bedingung);
+</pre>
+
+<p><code>amweisung</code> wird dabei einmal ausgeführt, bevor die Bedingung geprüft wird. Um mehrere Anweisungen auszuführen, werden diese als Block Statement (<code>{ ... }</code>) gruppiert. Wenn <code>bedingung</code> <code>true</code> ist, wird die Anweisung erneut ausgeführt. Nach jeder Ausführung der Anweisungen, wird die Bedingung erneut geprüft. Sobald <code>bedingung</code> <code>false</code> ergibt, endet die Ausführung der Schleife und die nächste Anweisung nach der <code>do...while </code>Schleife aus wird ausgeführt.</p>
+
+<h3 id="Beispiel_2"><strong>Beispiel</strong></h3>
+
+<p>Im folgenden Beispiel wird die Schleife mindestens einmal ausgeführt. Anschliessend wird die Schleife so oft durchlaufen, bis <code>i</code> nicht mehr kleiner als 5 ist.</p>
+
+<pre class="brush: js">var i = 0;
+do {
+  i += 1;
+  console.log(i);
+} while (i &lt; 5);</pre>
+
+<h2 id="while_Statement"><code>while</code> Statement</h2>
+
+<p>Ein {{jsxref("statements/while","while")}} Statement wird solange ausgeführt, wie eine bestimmte Bedingung <code>true</code> ergibt. Ein <code>while</code> Statement sieht wie folgt aus:</p>
+
+<pre class="syntaxbox">while (bedingung)
+  anweisung
+</pre>
+
+<p>Wenn die Bedingung <code>false</code> ist, wird die Schleife nicht weiter durchlaufen und die nächste Anweisung nach der <code>while</code> Schleife wird ausgeführt.</p>
+
+<p>Die Prüfung der Bedingung erfolgt, bevor die Anweisungen innerhalb der Schleife ausgeführt werden. Nur wenn die Bedingung <code>true</code> ist, wird die Schleife ausgeführt, wobei anschliessend eine erneute Prüfung der Bedingung erfolgt. Ergibt die Bedingung <code>false</code>, wir mit der Anweisungen nach der <code>while</code> Schleife fortgefahren.</p>
+
+<p>Um mehrere Anweisungen auszuführen, werden diese in einer block Anweisung ({ ... }) gruppiert.</p>
+
+<h3 id="Beispiel_1"><strong>Beispiel 1</strong></h3>
+
+<p>Die folgende <code>while</code> Schleife wird so lange ausgeführt, wie <code>n</code> kleiner als 3 ist.</p>
+
+<pre class="brush: js">var n = 0;
+var x = 0;
+while (n &lt; 3) {
+  n++;
+  x += n;
+}
+</pre>
+
+<p>Mit jedem Schleifendurchlauf wird <code>n</code> um 1 erhöht. Der Wert von <code>n</code> wird dann zum Wert von <code>x</code> addiert. Dadurch nehmen <code>x</code> und <code>n</code> die folgenden Werte an:</p>
+
+<ul>
+ <li>Nach dem ersten Durchlauf: <code>n</code> = 1 und <code>x</code> = 1</li>
+ <li>Nach dem zweiten Durchlauf: <code>n</code> = 2 und <code>x</code> = 3</li>
+ <li>Nach dem dritten Durchlauf: <code>n</code> = 3 und <code>x</code> = 6</li>
+</ul>
+
+<p>Nach dem dritten Durchlauf ist die Bedingung <code>n &lt; 3</code> nicht mehr <code>true</code> und die Schleife wird verlassen.</p>
+
+<h3 id="Beispiel_2_2"><strong>Beispiel 2</strong></h3>
+
+<p>Endlosschleifen müssen vermieden werden. Es ist immer sicherzustellen, dass die Bedingung irgendwann <code>false</code> ergibt, da die Schleife ansonsten nie endet. Die Anweisung in der folgenden <code>while</code> Schleife wird für immer ausgeführt, weil die Bedingung nie <code>false</code> ergibt:</p>
+
+<pre class="brush: js">while (true) {
+  console.log('Hello, world!');
+}</pre>
+
+<h2 id="Label_Statement"><code>Label</code> Statement</h2>
+
+<p>Ein {{jsxref("statements/label","label")}} stellt ein Statement mit einem Bezeichner bereit, welches es ermöglicht auf eine bestimmte stelle im Programm zu verweisen. So kann ein Label zum Beispiel dafür verwendet werden eine Schleife zu identifizieren und dann mit <code>break</code> oder <code>continue</code> festzulegen ob diese beendet oder weiter durchlaufen werden soll.</p>
+
+<p>Die Syntax des Label Statement sieht wie folgt aus:</p>
+
+<pre class="syntaxbox">label :
+   anweisung
+</pre>
+
+<p>Der Wert von <code><em>label</em></code> kann jede Bezeichnung sein, der kein reserviertes JavaScript Schlüsselwort ist. Die <code><em>anweisung</em></code> die mit dem Label identifiziert wird, kann jede beliebige Anweisung sein.</p>
+
+<h3 id="Beispiel_3"><strong>Beispiel</strong></h3>
+
+<p>In diesem Beispiel identifiziert das Label <code>markLoop</code> eine <code>while</code> Schleife.</p>
+
+<pre class="brush: js">markLoop:
+while (theMark == true) {
+   doSomething();
+}</pre>
+
+<h2 id="break_Statement"><code>break</code> Statement</h2>
+
+<p>Um eine Schleife oder ein <code>switch</code> Statement zu beenden, verwendet man das {{jsxref("statements/break","break")}} Statement in Verbindung mit dem Label Statement.</p>
+
+<ul>
+ <li>Wird <code>break</code> ohne ein Label verwendet, so wird die innerste <code>while</code>, <code>do-while</code>, <code>for</code> Schleife oder <code>switch</code> Statement beendet und die nachfolgende Ausführung wird ausgeführt.</li>
+ <li>Wird <code>break</code> in Verbindung mit einem Label eingesetzt, wird die Anweisung beendet, die mit dem Label identifiziert wird.</li>
+</ul>
+
+<p>Die Syntax von <code>break</code> sieht wie folgt aus:</p>
+
+<pre class="syntaxbox">break [<em>label</em>];
+</pre>
+
+<p>Die erste Variante der Syntax beendet die innerste Schleife oder das innerste <code>switch</code> Statement. Die zweite Variante beendet eine bestimmte Anweisung.</p>
+
+<h3 id="Beispiel_1_2"><strong>Beispiel</strong> <strong>1</strong></h3>
+
+<p>Das folgende Beispiel durchläuft die Elemente in einem Array, bis ein Element mit dem Wert von <code>theValue</code> gefunden wird:</p>
+
+<pre class="brush: js">for (var i = 0; i &lt; a.length; i++) {
+  if (a[i] == theValue) {
+    break;
+  }
+}</pre>
+
+<h3 id="Beispiel_2_break_mit_einem_Label"><strong>Beispiel 2: </strong><code>break</code> mit einem Label</h3>
+
+<pre class="brush: js">var x = 0;
+var z = 0;
+labelCancelLoops: while (true) {
+  console.log('Outer loops: ' + x);
+  x += 1;
+  z = 1;
+  while (true) {
+    console.log('Inner loops: ' + z);
+    z += 1;
+    if (z === 10 &amp;&amp; x === 10) {
+      break labelCancelLoops;
+    } else if (z === 10) {
+      break;
+    }
+  }
+}
+</pre>
+
+<h2 id="continue_Statement"><code>continue</code> Statement</h2>
+
+<p>Das {{jsxref("statements/continue","continue")}} Statement kann eingesetzt werden, um eine w<code>hile</code>, <code>do-while</code>, <code>for Schleife</code> oder ein Statement mit einem Label erneut auszuführen.</p>
+
+<ul>
+ <li>Wird <code>continue</code> ohne ein Label verwendet, wird der Durchlauf der innersten <code>while</code>, <code>do-while</code> oder <code>for</code> Statement beendet und der nächsten Durchlauf wird begonnen. Im Gegensatz zum <code>break</code> Statement, wird mit <code>continue</code> nicht die gesamte Schleife abgebrochen. In einer <code>while</code> Schleife springt das Programm zurück zur Bedingung. In einer <code>for</code> Schleife springt das Programm zum erhöhenden Ausdruck.</li>
+ <li>Wird <code>continue</code> mit einem Label eingesetzt, wird <code>continue</code> auf die Anweisungen angewendet, die durch das Label identifiziert werden.</li>
+</ul>
+
+<p>Die Syntax des <code>continue</code> Statement sieht wie folgt aus:</p>
+
+<pre class="syntaxbox"><code>continue</code> [<em>label</em>];
+</pre>
+
+<h3 id="Beispiel_1_3"><strong>Beispiel 1</strong></h3>
+
+<p>Das folgende Beispiel zeigt eine <code>while</code> Schleife, mit einem <code>continue</code> Statement, die weiter ausgeführt wird, wenn <code>i</code> den Wert 3 hat. Dadurch erhält <code>n</code> die Werte 1, 3, 7 und 12.</p>
+
+<pre class="brush: js">var i = 0;
+var n = 0;
+while (i &lt; 5) {
+  i++;
+  if (i == 3) {
+    continue;
+  }
+  n += i;
+}
+</pre>
+
+<h3 id="Beispiel_2_3"><strong>Beispiel 2</strong></h3>
+
+<p>Eine Anweisung mit dem Label <em><code>checkiandj</code></em> enthält eine Anweisung mit dem Label <em><code>checkj</code></em>. Wenn <code>continue</code> erreicht wird, bricht das Programm den aktuellen Schleifendurchlauf von <em><code>checkj</code></em> ab und setzt die Ausführung beim nächsten Durchlauf fort. Immer wenn <code>continue</code> erreicht wird, wird <em><code>checkj</code></em> erneut ausgeführt, bis dessen Bedingung <code>false</code> zurückliefert. Wird <code>false</code> zurückgeliefert, wird der Rest der <em><code>checkiandj</code></em> Anweisung vollendet und <em><code>checkiandj</code></em> wird wiederholt, bis dessen Bedingung <code>false</code> zurückgibt. Wird <code>false</code> zurückgegeben, wird das Programm bei der Anweisung nach <em><code>checkiandj</code></em> fortgesetzt.</p>
+
+<p>Wenn <code>continue</code> ein Label <em><code>checkiandj</code></em> hätte, würde das Programm am Anfang der <em><code>checkiandj</code></em> Anweisung fortgesetzt werden.</p>
+
+<pre class="brush: js">var i = 0;
+var j = 10;
+checkiandj:
+  while (i &lt; 4) {
+    console.log(i);
+    i += 1;
+    checkj:
+      while (j &gt; 4) {
+        console.log(j);
+        j -= 1;
+        if ((j % 2) == 0) {
+          continue checkj;
+        }
+        console.log(j + ' is odd.');
+      }
+      console.log('i = ' + i);
+      console.log('j = ' + j);
+  }</pre>
+
+<h2 id="for...in_Statement"><code>for...in</code> Statement</h2>
+
+<p>Das {{jsxref("statements/for...in","for...in")}} Statement durchläuft eine bestimmte Variable über alle aufzählbaren Eigenschaften eines Objekts. Für jede einzelne Eigenschaft führt JavaScript die entsprechende Anweisung aus. Ein <code>for...in</code> Statement sieht wie folgt aus:</p>
+
+<pre class="syntaxbox">for (variable in object) {
+  statements
+}
+</pre>
+
+<h3 id="Beispiel_4"><strong>Beispiel</strong></h3>
+
+<p>Die folgende Funktion nimmt als Argument ein Objekt und dessen Namen entgegen. Anschliessend durchläuft sie alle Eigenschaften des Objekts und liefert einen String zurück, der alle Namen und Werte der Eigenschaften des Objekts enthält.</p>
+
+<pre class="brush: js">function dump_props(obj, obj_name) {
+  var result = '';
+  for (var i in obj) {
+    result += obj_name + '.' + i + ' = ' + obj[i] + '&lt;br&gt;';
+  }
+  result += '&lt;hr&gt;';
+  return result;
+}
+</pre>
+
+<p>Für ein Objekt <code>car</code> mit den Eigenschaften <code>make</code> und <code>model</code>, sieht das Ergebnis wie folgt aus:</p>
+
+<pre class="brush: js">car.make = Ford
+car.model = Mustang
+</pre>
+
+<h3 id="Arrays"><strong>Arrays</strong></h3>
+
+<p>Auch wenn es nahe liegt diesen Weg zu verwenden, um die Elemente eines {{jsxref("Array")}}s zu durchlaufen, würde das <strong>for...in</strong> Statement die Namen der definierten Werte und den numerischen Index zurückliefern. Daher ist es besser eine normale {{jsxref("statements/for","for")}} Schleifen mit einem numerischen Index zu verwenden, wenn Arrays durchlaufen werden sollen, da das <strong>for...in</strong> Statement neben den benutzerdefinierten Elementen auch die Eigenschaften des Arrays durchläuft, wenn man Methoden oder Eigenschaften hinzufügt oder ändert.</p>
+
+<h2 id="for...of_Statement"><code>for...of</code> Statement</h2>
+
+<p>Das {{jsxref("statements/for...of","for...of")}} Statement erstellt eine Schleife, die alle <a href="/de/docs/Web/JavaScript/Guide/iterable">iterable objects</a> (inklusive {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("functions/arguments","arguments")}} Objekt, etc.) durchläuft und die Anweisungen ausführt, die mit dem Wert des Durchlaufes für jede Eigenschaft übereinstimmt.</p>
+
+<pre class="syntaxbox">for (<em>variable</em> of <em>object</em>) {
+  <em>statement
+</em>}</pre>
+
+<p>Das folgende Beispiel zeigt den Unterschied zwischen der <code>for...of</code> Schleife und der {{jsxref("statements/for...in","for...in")}} Schleife. Während <code>for...in</code> die Namen der Eigenschaften durchläuft, durchläuft <code>for...of</code> die Werte der Eigenschaft:</p>
+
+<pre class="brush:js">var arr = [3, 5, 7];
+arr.foo = 'hello';
+
+for (var i in arr) {
+   console.log(i); // logs "0", "1", "2", "foo"
+}
+
+for (var i of arr) {
+   console.log(i); // logs 3, 5, 7
+}
+</pre>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</p>
diff --git a/files/de/web/javascript/guide/textformatierung/index.html b/files/de/web/javascript/guide/textformatierung/index.html
new file mode 100644
index 0000000000..48c45c9871
--- /dev/null
+++ b/files/de/web/javascript/guide/textformatierung/index.html
@@ -0,0 +1,257 @@
+---
+title: Textformatierung
+slug: Web/JavaScript/Guide/Textformatierung
+tags:
+  - Guide
+  - JavaScript
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Guide/Text_formatting
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}</div>
+
+<p class="summary">Dieses Kapitel gibt eine Einführung darüber, wie in JavaScript mit Strings (Zeichenfolgen) und Texten gearbeitet wird.</p>
+
+<h2 id="Strings">Strings</h2>
+
+<p>JavaScript's Datentyp {{Glossary("String")}} wird verwendet, um textuelle Daten zu repräsentieren. Es handelt sich um eine Reihe von Elementen, die ganzzahlige 16-Bit-Werte ohne Vorzeichen (UTF-16 Code Units) sind. Jedes Element belegt eine Position im String. Das erste Element befindet hat den Index 0, das nächste den Index 1 usw. Die Länge des Strings ist die Anzahl der Elemente, die darin enthalten sind. Strings können über String-Literale oder String-Objekte erzeugt werden.</p>
+
+<p>ACHTUNG: Beim Bearbeiten dieser Seite keine Zeichen mit Zeichencode größer als U+FFFF einfügen, bis MDN bug 857438 behoben wurde ( <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=857438">https://bugzilla.mozilla.org/show_bug.cgi?id=857438</a> ).</p>
+
+<h3 id="String_Literale">String Literale</h3>
+
+<p>Einfache Strings können mittels einfacher oder doppelter Anführungszeichen erzeugt werden:</p>
+
+<pre class="brush: js">'foo'
+"bar"</pre>
+
+<p>Anspruchsvollere Strings können mit Escape-Sequenzen erstellt werden:</p>
+
+<h4 id="Hexadezimale_Escape-Sequenzen">Hexadezimale Escape-Sequenzen</h4>
+
+<p>Die Zahl nach <code>\x</code> wird als hexadecimale Zahl interpretiert.</p>
+
+<pre class="brush: js">'\xA9' // "©"
+</pre>
+
+<h4 id="Unicode_Escape-Sequenzen">Unicode Escape-Sequenzen</h4>
+
+<p>Unicode Escape-Sequenzen erfordern mindestens vier hexadezimale Ziffern nach <code>\u</code>.</p>
+
+<pre class="brush: js">'\u00A9' // "©"</pre>
+
+<h4 id="Unicode_Code_Point_Escapes">Unicode Code Point Escapes</h4>
+
+<p>Diese sind neu in ECMAScript 2015. Mit Unicode Code Point Maskierung können beliebige Zeichen durch Maskierungssequenzen mit hexadezimalen Zahlen erzeugt werden, sodass die Verwendung von Unicode Code Points bis zu <code>0x10FFFF</code> möglich ist. Mit einfachen Unicode Maskierungssequenz ist es oft notwendig, Surrogate-Hälften als zwei getrennte Maskierungssequenzen zu schreiben, um dasselbe Ergebnis zu erhalten.</p>
+
+<p>Siehe auch {{jsxref("String.fromCodePoint()")}} oder {{jsxref("String.prototype.codePointAt()")}}.</p>
+
+<pre class="brush: js">'\u{2F804}'
+
+// das gleiche mit einfachen Unicode Escape-Sequenzen
+'\uD87E\uDC04'</pre>
+
+<h3 id="String_Objekte">String Objekte</h3>
+
+<p>Das {{jsxref("String")}} Objekt ist ein Wrapper für den primitiven Datentyp String.</p>
+
+<pre class="brush: js">var s = new String('foo'); // Erstellt ein String object
+console.log(s); // Ausgabe: {'0': 'f', '1': 'o', '2': 'o'}
+typeof s; // Gibt 'object' zurück
+</pre>
+
+<p>Beliebige Methoden des <code>String</code> Objekts können als Methoden eines String-Literals aufgerufen werden – JavaScript wandelt das String-Literal automatisch in ein temporäres <code>String</code> Objekt um, ruft die Methode auf und verwirft das temporäre <code>String</code> Objekt anschließend. Außerdem kann die <code>String.length</code> Eigenschaft mit einem String-Literal verwendet werden.</p>
+
+<p>String-Literale sollten verwendet werden, außer es wird tatsächlich ein <code>String</code> Objekt benötigt, da <code>String</code> Objekte unerwartetes Verhalten aufweisen können. Beispielsweise:</p>
+
+<pre class="brush: js">var s1 = '2 + 2'; // Erzeugt ein String-Literal
+var s2 = new String('2 + 2'); // Erzeugt ein String Objekt
+eval(s1); // Gibt die Zahl 4 zurück
+eval(s2); // Gibt den String "2 + 2" zurück</pre>
+
+<p>Ein <code>String</code> Objekt hat eine Eigenschaft <code>length</code>, die die Anzahl von der UTF-16 Code Units im String angibt. Der folgende Code beispielsweise weist der Variable <code>x</code> den Wert 13 zu, da "Hello, World!" aus 13 Zeichen besteht. Jedes dieser Zeichen wird durch eine UTF-16 Code Unit dargestellt. Auf jede dieser Code Units kann durch eckige Klammern zugegriffen werden. Es können jedoch keine Zeichen geändert werden, da Strings unveränderbare Array-ähnliche Objekte sind:</p>
+
+<pre class="brush: js">var mystring = 'Hello, World!';
+var x = mystring.length;
+mystring[0] = 'L'; // hat keinen Effekt
+mystring[0]; // gibt "H" zurück
+</pre>
+
+<p>Zeichen mit einem Unicode-Wert größer als U+FFFF (wie z.B. manche seltene chinesiche/japanische/koreanische/vietnamesische Zeichen und einige Emoji) werden in UTF-16 als zwei Surrogate Code Units gespeichert. Ein String, der nur aus einem Zeichen, U+1F600 ("Emoji grinning face"), besteht, hätte die Länge 2. Der Zugriff auf einzelne Code Units in einem solchen String kann zu unerwünschten Effekten führen, wie z.B. die Entstehung von String mit unvollständigen Surrogate Code Units, was gegen den Unicode Standard verstößt. (Beispiele dafür sollten zu dieser Seite hinzugefügt werden, sobald MDN bug 857438 behoben wurde.) Siehe auch {{jsxref("String.fromCodePoint()")}} oder {{jsxref("String.prototype.codePointAt()")}}.</p>
+
+<p>Ein <code>String</code> Objekt verschiedenste Methoden, unter anderem auch welche, die den String in abgewandelter Form zurückgeben, wie z.B. <code>substring</code> und <code>toUpperCase</code>.</p>
+
+<p>Die folgende Tabelle gibt eine Zusammenfassung der Methoden von {{jsxref("String")}} Objekten.</p>
+
+<table class="standard-table">
+ <caption>
+ <h4 id="Methoden_von_String">Methoden von <code>String</code></h4>
+ </caption>
+ <thead>
+  <tr>
+   <th scope="col">Methode</th>
+   <th scope="col">Beschreibung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("String.charAt", "charAt")}}, {{jsxref("String.charCodeAt", "charCodeAt")}}, {{jsxref("String.codePointAt", "codePointAt")}}</td>
+   <td>Gibt das Zeichen oder den Zeichencode an der angegebenen Stelle im String zurück.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.indexOf", "indexOf")}}, {{jsxref("String.lastIndexOf", "lastIndexOf")}}</td>
+   <td>Gibt die erste bzw. letzte Position des angegebenen Teilstrings im String zurück.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.startsWith", "startsWith")}}, {{jsxref("String.endsWith", "endsWith")}}, {{jsxref("String.includes", "includes")}}</td>
+   <td>Gibt zurück, ob ein String mit dem angegebenen Teilstring beginnt, endet oder den Teilstring enthält.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.concat", "concat")}}</td>
+   <td>Fügt die beiden Strings zusammen und gibt diesen neuen String zurück.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.fromCharCode", "fromCharCode")}}, {{jsxref("String.fromCodePoint", "fromCodePoint")}}</td>
+   <td>Erstellt einen String aus den angegebenen Unicode Codes. Es handelt sich um eine Methode der Klasse String, nicht die einer String Instanz.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.split", "split")}}</td>
+   <td>Teilt ein <code>String</code> Objekt in ein Array von Teilstrings.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.slice", "slice")}}</td>
+   <td>Gibt einen Ausschnitt des Strings als neuen String zurück.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.substring", "substring")}}, {{jsxref("String.substr", "substr")}}</td>
+   <td>Gibt einen Ausschnitt des Strings zurück, der entweder durch Angabe der Start- und Endindizes oder durch Angabe des Startindex und einer Länge gebildet wird.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.match", "match")}}, {{jsxref("String.replace", "replace")}}, {{jsxref("String.search", "search")}}</td>
+   <td>Verwendet Regular Expressions um Übereinstimmungen mit einem Suchmuster zu finden oder Teile des Strings zu ersetzen.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.toUpperCase", "toUpperCase")}}, {{jsxref("String.toLowerCase", "toLowerCase")}}</td>
+   <td>
+    <p>Wandelt einen String in Groß- bzw Kleinschreibung um und gibt das Ergebnis als neuen String zurück.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.normalize", "normalize")}}</td>
+   <td>Gibt die Unicode Normalization Form des Strings zurück.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.repeat", "repeat")}}</td>
+   <td>Gibt einen String zurück, in dem der ursprüngliche String mehrfach aneinandergereiht wurde.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.trim", "trim")}}</td>
+   <td>Entfernt Leerzeichen vom Anfang und vom Ende des Strings.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Mehrzeilige_Template-Strings">Mehrzeilige Template-Strings</h3>
+
+<p><a href="/de/docs/Web/JavaScript/Reference/template_strings">Template-Strings</a> sind String-Symbole, die eingebettete Ausdrücke erlauben. Mit diesen Ausdrücken können mehrzeilige Strings und String-Interpolation genutzt werden.</p>
+
+<p>Template-Strings sind anstelle von doppelten bzw. einfachen Anführungszeichen in <em>Back-Ticks</em> (` `) (<a href="http://en.wikipedia.org/wiki/Grave_accent">grave accent</a>) eingeschlossen. Template-Strings können Platzhalter beinhalten, die durch das Dollarsymbol gefolgt von geschweiften Klammern gekennzeichnet sind (<code>${expression}</code>).</p>
+
+<h4 id="Mehrzeilige_Strings">Mehrzeilige Strings</h4>
+
+<p>Alle Zeichen, die einen Zeilenumbruch einleiten und sich zwischen Back-Ticks befinden, werden als Teil des Template Strings verwendet. Bei normalen Strings muss die folgende Syntax genutzt werden, um Strings mit Zeilenumbrücken über mehrere Codezeilen zu definieren:</p>
+
+<pre class="brush: js">console.log('string text line 1\n\
+string text line 2');
+// "string text line 1
+// string text line 2"</pre>
+
+<p>Um dasselbe Ergebnis mit Template-Strings zu erreichen, kann die folgende Schreibweise genutzt werden:</p>
+
+<pre class="brush: js">console.log(`string text line 1
+string text line 2`);
+// "string text line 1
+// string text line 2"</pre>
+
+<h4 id="Erweiterung_von_Ausdrücken">Erweiterung von Ausdrücken</h4>
+
+<p>Um Ausdrücke in normale Strings einzufügen, müsste die folgende Syntax genutzt werden:</p>
+
+<pre class="brush: js">var a = 5;
+var b = 10;
+console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');
+// "Fifteen is 15 and
+// not 20."</pre>
+
+<p>Mit Template-Strings können nun die syntaktischen Vorteile genutzt werden um solche Ersetzungen leserlicher zu machen:</p>
+
+<pre class="brush: js">var a = 5;
+var b = 10;
+console.log(`Fifteen is ${a + b} and\nnot ${2 * a + b}.`);
+// "Fifteen is 15 and
+// not 20."</pre>
+
+<p>Mehr Informationen sind unter <a href="/en-US/docs/Web/JavaScript/Reference/template_strings">Template-Strings</a> in der <a href="/de/docs/Web/JavaScript/Reference">JavaScript-Referenz</a> nachzulesen. </p>
+
+<h2 id="Internationalization">Internationalization</h2>
+
+<p>Das {{jsxref("Intl")}} Objekt ist der Namespace für das ECMAScript Internationalization API, welches sprachabhängige String-Vergleiche, Zahlen-, Datums- und Uhrzeitformate bereitstellt. Die Konstruktoren für {{jsxref("Collator")}}, {{jsxref("NumberFormat")}} und {{jsxref("DateTimeFormat")}} Objekte sind Eigenschaften des <code>Intl</code> Objekts.</p>
+
+<h3 id="Datums-_und_Uhrzeitformatierung">Datums- und Uhrzeitformatierung</h3>
+
+<p>Das {{jsxref("DateTimeFormat")}} Objekt hilft bei der Datums- oder Uhrzeitformatierung. Im folgenden Beispiel wird ein Datum für amerikanisches Englisch formatiert. (Das Ergebnis variiert je nach eingestellter Zeitzone.)</p>
+
+<pre class="brush: js">var msPerDay = 24 * 60 * 60 * 1000;
+
+// July 17, 2014 00:00:00 UTC.
+var july172014 = new Date(msPerDay * (44 * 365 + 11 + 197));
+
+var options = { year: '2-digit', month: '2-digit', day: '2-digit',
+                hour: '2-digit', minute: '2-digit', timeZoneName: 'short' };
+var americanDateTime = new Intl.DateTimeFormat('en-US', options).format;
+
+console.log(americanDateTime(july172014)); // 07/16/14, 5:00 PM PDT
+</pre>
+
+<h3 id="Zahlenformatierung">Zahlenformatierung</h3>
+
+<p>Das {{jsxref("NumberFormat")}} Objekt hilft bei der Formatierung von Zahlen, wie z.B. Währungen.</p>
+
+<pre class="brush: js">var gasPrice = new Intl.NumberFormat('en-US',
+                        { style: 'currency', currency: 'USD',
+                          minimumFractionDigits: 3 });
+
+console.log(gasPrice.format(5.259)); // $5.259
+
+var hanDecimalRMBInChina = new Intl.NumberFormat('zh-CN-u-nu-hanidec',
+                        { style: 'currency', currency: 'CNY' });
+
+console.log(hanDecimalRMBInChina.format(1314.25)); // ￥ 一,三一四.二五
+</pre>
+
+<h3 id="Sortierung">Sortierung</h3>
+
+<p>Das {{jsxref("Collator")}} Objekt hilft beim Vergleichen und Sortieren von Strings.</p>
+
+<p>Zum Beispiel gibt es im Deutschen zwei unterschiedliche Sortierreihenfolgen: Telefonbuchsortierung und Wörterbuchsortierung. Bei der Telefonbuchsortierung werden "ä", "ö" etc. so sortiert, als ob es sich um "ae", "oe" etc. handeln würde.</p>
+
+<pre class="brush: js">var names = ['Hochberg', 'Hönigswald', 'Holzman'];
+
+var germanPhonebook = new Intl.Collator('de-DE-u-co-phonebk');
+
+// as if sorting ["Hochberg", "Hoenigswald", "Holzman"]:
+console.log(names.sort(germanPhonebook.compare).join(', '));
+// logs "Hochberg, Hönigswald, Holzman"
+</pre>
+
+<p>Bei manchen Beugungsformen wird ein Vokal zu einem Umlaut, daher ist es sinnvoll, Wörterbücher so zu sortieren, dass Vokale und Umlaute gleich sortiert werden. Bei der Sortierung wird dann also "ä" wie "a" und "ö" wie "o" sortiert. Eine Ausnahme stellen Wörter dar, die sich nur im Umlaut unterscheiden. In solchen Fällen wird der Vokal vor dem Umlaut gereiht (z.B. <em>schon</em> vor <em>schön</em>). </p>
+
+<pre class="brush: js">var germanDictionary = new Intl.Collator('de-DE-u-co-dict');
+
+// as if sorting ["Hochberg", "Honigswald", "Holzman"]:
+console.log(names.sort(germanDictionary.compare).join(', '));
+// logs "Hochberg, Holzman, Hönigswald"
+</pre>
+
+<p>Mehr Informationen über das {{jsxref("Intl")}} API können unter <a href="https://hacks.mozilla.org/2014/12/introducing-the-javascript-internationalization-api/">Introducing the JavaScript Internationalization API</a> (in Englisch) nachgelesen werden.</p>
+
+<div>{{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}</div>
diff --git a/files/de/web/javascript/guide/using_promises/index.html b/files/de/web/javascript/guide/using_promises/index.html
new file mode 100644
index 0000000000..0aad2a4071
--- /dev/null
+++ b/files/de/web/javascript/guide/using_promises/index.html
@@ -0,0 +1,341 @@
+---
+title: Promises benutzen
+slug: Web/JavaScript/Guide/Using_promises
+translation_of: Web/JavaScript/Guide/Using_promises
+---
+<div>{{jsSidebar("JavaScript Guide")}}{{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Iterators_and_Generators")}}</div>
+
+<p class="summary">Ein {{jsxref("Promise")}} ist ein Objekt, das die finale Beendigung einer asynchronen Operation repräsentiert. Je nachdem, ob die Operation erfolgreich oder fehlerhaft beendet wurde, wird das Promise entsprechend gekennzeichnet.</p>
+
+<p class="summary">Da in den meisten Fällen bereits existierende Promises benutzt werden, wird diese Anleitung zuerst die Benutzung von zurückgegebenen Promises erklären, und dann darauf eingehen, wie diese erzeugt werden.</p>
+
+<p class="summary">Grob gesagt ist ein Promise ein zurückgegebenes Objekt, an welches Callback-Funktionen angehängt werden können, anstatt dass diese einer Funktion übergeben werden.</p>
+
+<p class="summary">Betrachten wir z.B. folgende Funktion <code>createAudioFileAsync()</code>, welche asynchron eine Audio-Datei generiert; an diese werden Audio-Einstellungen sowie zwei Callback-Funktionen übergeben - eine für das erfolgreiche Erzeugen der Audio-Datei, und die andere für auftretende Fehler.</p>
+
+<p class="summary">Ein beispielhafter Code, den <code>createAudioFileAsync()</code> nutzen würde, sieht in etwa so aus:</p>
+
+<pre class="summary notranslate">function successCallback(result) {
+  console.log("Audio-Datei bereit unter URL: " + result);
+}
+
+function failureCallback(error) {
+  console.error("Fehlerhafte Generierung der Audio-Datei: " + error);
+}
+
+createAudioFileAsync(audioSettings, successCallback, failureCallback);
+</pre>
+
+<p>In modernen Funktionen, welche Promises zurückgeben, kann man die Callbacks stattdessen direkt anhängen:</p>
+
+<p>Würde <code>createAudioFileAsync()</code> so umgeschrieben, dass es als Rückgabewert ein Promise hätte, wäre die Nutzung davon einfach so:</p>
+
+<pre class="notranslate">createAudioFileAsync(audiosettings).then(successCallback, failureCallback);</pre>
+
+<p>Das ist die Kurzform von:</p>
+
+<pre class="notranslate">const promise = createAudioFileAsync(audioSettings);
+promise.then(successCallback, failureCallback);
+</pre>
+
+<p>Dies nennt man einen <em>asynchronen Funktionsaufruf</em>. Diese Vorgehensweise hat mehrere Vorteile, von denen in diesem Artikel jeder einzeln geschildert wird.</p>
+
+<h2 id="Garantien">Garantien</h2>
+
+<p>Anders als bei Callback-Übergabe nach dem alten Verfahren, können Promise-Objekte folgendes sicherstellen:</p>
+
+<ul>
+ <li>Callback-Funktionen werden erst aufgerufen, wenn der <a href="/en-US/docs/Web/JavaScript/EventLoop#Run-to-completion">derzeitige Durchlauf des Javascript Event Loops </a>vollständig ist.</li>
+ <li>Callback-Funktionen, die in <code>.then()</code> angehängt werden, werden <em>nach</em> dem Ende der asynchronen Operation aufgerufen.</li>
+ <li>Mehrere Callback-Funktionen können durch mehrmaliges Aufrufen von <code>.then()</code> angehängt werden, um unabhängig von der Funktion selbst in der Anhänge-Reihenfolge aufgerufen zu werden.</li>
+</ul>
+
+<p>Allerdings ist der wohl kurzfristigste Nutzen von Promises das Chaining.</p>
+
+<h2 id="Chaining">Chaining</h2>
+
+<p>Eine häufige Aufgabenstellung ist der Aufruf von zwei oder mehr asynchronen Funktionen nacheinander in Sequenz, wobei Ergebnisse aus der vorangegangenen Funktion in die folgende Funktion übernommen werden. Dies ist realisierbar mittels einer <em>Promise chain</em>.</p>
+
+<p>Hier steckt der Zauber drin: Die Funktion <code>.then()</code> gibt stets ein neues Promise-Objekt zurück:</p>
+
+<pre class="brush: js notranslate">const promise = doSomething();
+const promise2 = promise.then(successCallback, failureCallback);
+</pre>
+
+<p>oder auch</p>
+
+<pre class="brush: js notranslate">const promise2 = doSomething().then(successCallback, failureCallback);
+</pre>
+
+<p>Hierbei repräsentiert <code>promise2</code> nicht nur den vollständigen Aufruf von <code>doSomething()</code>, sondern auch die Ergebnisse der beiden angehängten Funktionen <code>successCallback</code> oder <code>failureCallback</code> - diese können ebenfalls asynchrone Funktionen sein, die Promises zurückgeben. In diesem Fall werden jegliche Callback-Funktionen, die an <code>promise2</code> angehängt würden, jeweils auch eingereiht in den jeweiligen Promise-Rückgabewerten von <code>successCallback</code> oder <code>failureCallback</code>.</p>
+
+<p>Grundsätzlich repräsentiert jedes Promise-Objekt die Vervollständigung eines asynchronen Schritts in der Kette.</p>
+
+<p>Nach dem alten Verfahren führte das Aneinanderreihen von mehreren asynchronen Operationen zur klassischen <em>Callback pyramid of doom</em>:</p>
+
+<pre class="brush: js notranslate">doSomething(function(result) {
+  doSomethingElse(result, function(newResult) {
+    doThirdThing(newResult, function(finalResult) {
+      console.log('Got the final result: ' + finalResult);
+    }, failureCallback);
+  }, failureCallback);
+}, failureCallback);
+</pre>
+
+<p>Mit moderenen Funktionen können diese Callback-Funktionen stattdessen an die zurückgegebenen Promise-Objekte angehängt werden, womit die <em>Promise chain</em> geformt wird:</p>
+
+<pre class="brush: js notranslate">doSomething().then(function(result) {
+  return doSomethingElse(result);
+})
+.then(function(newResult) {
+  return doThirdThing(newResult);
+})
+.then(function(finalResult) {
+  console.log('Got the final result: ' + finalResult);
+})
+.catch(failureCallback);
+</pre>
+
+<p>Die Argumente für <code>.then()</code> sind optional, und <code>.catch(failureCallback)</code> ist die Kurzschreibform von <code>.then(null, failureCallback)</code>. Dies kann stattdessen auch mit <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Pfeil-Funktionen</a> ausgedrückt werden:</p>
+
+<pre class="brush: js notranslate">doSomething()
+.then(result =&gt; doSomethingElse(result))
+.then(newResult =&gt; doThirdThing(newResult))
+.then(finalResult =&gt; {
+  console.log(`Got the final result: ${finalResult}`);
+})
+.catch(failureCallback);
+</pre>
+
+<p><strong>Wichtig</strong>: Immer Rückgabewerte angeben; sonst können die Callback das Ergebnis eines vorherigen Promise nicht abfangen.</p>
+
+<h3 id="Chaining_nach_einem_.catch">Chaining nach einem <code>.catch()</code></h3>
+
+<p>Es ist auch möglich, nach einem Fehler, sprich <code>.catch()</code>, weiter zu verkettern. Dies ist nützlich um neue Operationen auszuführen, auch nachdem es einen Fehler in der Kette gab.</p>
+
+<pre class="brush: js notranslate">new Promise((resolve, reject) =&gt; {
+    console.log('Initial');
+
+    resolve();
+})
+.then(() =&gt; {
+    throw new Error('Something failed');
+
+    console.log('Do this');
+})
+.catch(() =&gt; {
+    console.log('Do that');
+})
+.then(() =&gt; {
+    console.log('Do this, no matter what happened before');
+});
+</pre>
+
+<p>Das obige Beispiel hat die nachfolgenden Ausgaben:</p>
+
+<pre class="notranslate">Initial
+Do that
+Do this, no matter what happened before
+</pre>
+
+<p>Zu beachten ist hier, dass der Text "Do this" nicht ausgegeben wird, weil der Fehler "Something failed" einen Abbruch ausgelöst hat.</p>
+
+<h2 id="Fehlerübertragung">Fehlerübertragung</h2>
+
+<p>Schaut man sich weiter oben die <em>Callback pyramid of doom</em> an, wird sichtbar, dass <code>failureCallback</code> dort mehrmals angegeben werden muss, anders als nur einmal beim Beispiel unten:</p>
+
+<pre class="brush: js notranslate">doSomething()
+.then(result =&gt; doSomethingElse(result))
+.then(newResult =&gt; doThirdThing(newResult))
+.then(finalResult =&gt; console.log(`Got the final result: ${finalResult}`))
+.catch(failureCallback);
+</pre>
+
+<p>Grundsätzlich hält eine Promise chain bei einer Exception an und erlaubt nur noch Zugriffe von <code>.catch()</code>-Handlern. Dies ist modelliert nach der Funktionsweise von synchronem Code:</p>
+
+<pre class="brush: js notranslate">try {
+  const result = syncDoSomething();
+  const newResult = syncDoSomethingElse(result);
+  const finalResult = syncDoThirdThing(newResult);
+  console.log(`Got the final result: ${finalResult}`);
+} catch(error) {
+  failureCallback(error);
+}
+</pre>
+
+<p>Diese Symmetrie mit synchronem Code erreichte ihren Höhepunkt in der <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async/await</a></code>-Komfortschreibweise in ECMAScript 2017:</p>
+
+<pre class="brush: js notranslate">async function foo() {
+  try {
+    const result = await doSomething();
+    const newResult = await doSomethingElse(result);
+    const finalResult = await doThirdThing(newResult);
+    console.log(`Got the final result: ${finalResult}`);
+  } catch(error) {
+    failureCallback(error);
+  }
+}
+</pre>
+
+<p>Diese Schreibweise baut auf Promises auf; so ist <code>doSomething()</code> die selbe Funktion wie vorher. <a href="https://developers.google.com/web/fundamentals/getting-started/primers/async-functions">Hier</a> kann man mehr über diese Syntax erfahren.</p>
+
+<p>Promise-Objekte lösen mit der <em>Callback pyramid of doom </em>ein fundamentales Designproblem, indem sie alle Fehler, auch geworfene Exceptions und Programmierfehler, abfangen. Diese Eigenschaft ist essentiell für die funktionale Komposition von asynchronen Operationen.</p>
+
+<h2 id="Promise_rejection-Events">Promise rejection-Events</h2>
+
+<p>Immer, wenn ein Promise abgelehnt ("rejected") wird, wird eines von zwei Events zum globalen Scope (grundsätzlich entweder <code><a href="/de/docs/Web/API/Window">window</a></code>, oder, falls in einem Web-Worker gearbeitet wird, der <code><a href="/de/docs/Web/API/Worker">Worker</a></code> selbst oder ein anderes, <code>Worker</code>-basiertes Interface) geschickt. Diese beiden Events sind:</p>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/API/Window/rejectionhandled_event">rejectionHandled</a></code></dt>
+ <dd>Wird bei der Ablehnung eines Promise gesendet, nachdem die Ablehnung von der reject-Funktion des Ausführenden verarbeitet wurde.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/Window/unhandledrejection_event">unhandledRejection</a></code></dt>
+ <dd>Wird bei der Ablehnung eines Promise gesendet, wenn es keinen Rejection-Handler gibt.</dd>
+</dl>
+
+<p>In beiden Fällen hat das Event (vom Typ <code><a href="/en-US/docs/Web/API/PromiseRejectionEvent">PromiseRejectionEvent</a></code>) als Member das Attribut <code><a href="/en-US/docs/Web/API/PromiseRejectionEvent/promise">promise</a></code> welches auf das abgelehnte Promise zeigt, sowie ein Attribut <code><a href="/en-US/docs/Web/API/PromiseRejectionEvent/reason">reason</a></code> welches eine Begründung für die Ablehnung des Promise enthält.</p>
+
+<p>Diese Events bilden ein Fallback für die Fehlerbehandlung bei Promises sowie eine Hilfestellung beim Debugging des eigenen Promise-Managements. Da die Händler im Kontext global sind, werden alle Fehler unabhängig von der Quelle zu ihnen geschickt.</p>
+
+<p>Ein Fall der besonderen Nützlichkeit: Wenn man Code in <a href="/de/docs/Glossary/Node.js">Node.js</a> schreibt, kann es oft passieren, dass im Projekt hinzugefügte Module unverarbeitete abgelehnte Promises haben. Diese werden von der Node-Laufzeitumgebung in die Konsole geloggt. Zu Analysezwecken, zur Verarbeitung durch den eigenen Code, oder auch einfach zur Verhinderung von übermäßigem Output, kann man diese abgelehnten Promises einfangen, indem man für das <a href="/en-US/docs/Web/API/Window/unhandledrejection_event"><code>unhandledrejection</code> event</a> einen Handler hinzufügen:</p>
+
+<pre class="brush: js notranslate">window.addEventListener('unhandledrejection', event =&gt; {
+  /* Hier lässt sich Code einfügen, um die Attribute des Events
+     zu untersuchen */
+  event.preventDefault();
+}, false);</pre>
+
+<p>Indem die <code><a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a></code>-Methode des Events aufgerufen wird, wird die standardmäßige Operation bei unverarbeiteten abgelehnten Promises verhindert. Üblicherweise beinhaltet dies das Loggen des Fehlers in der Konsole; im Fall von Node ist das tatsächlich der Fall.</p>
+
+<p>Idealerweise sollte man abgelehnte Promises immer untersuchen, um sicher zu gehen, dass es sich nicht um Code-Fehler handelt.</p>
+
+<h2 id="Ein_Promise-Objekt_in_einer_alten_Callback-API_erzeugen">Ein Promise-Objekt in einer alten Callback-API erzeugen</h2>
+
+<p>Ein einfaches {{jsxref("Promise")}} kann durch dessen Konstruktor-Methode erzeugt werden. Diese Art und Weise sollte nur genutzt werden, um alte APIs damit zu umschließen.</p>
+
+<p>Idealerweise würden alle asynchronen Funktionen bereits Promises zurückgeben. In der Realität erwarten einige APIs immer Callback-Funktionen für Erfolg und Fehlerfall, die nach dem alten Prinzip übergeben werden müssen. Ein eindeutiges Beispiel hierfür ist die Funktion {{domxref("WindowTimers.setTimeout", "setTimeout()")}}:</p>
+
+<pre class="brush: js notranslate">setTimeout(() =&gt; saySomething("10 seconds passed"), 10000);
+</pre>
+
+<p>Callback-Funktionen nach dem alten Verfahren und Promises zu vermischen, bringt Probleme mit sich. Wenn <code>saySomething()</code> fehlschlägt oder Programmierfehler enthält, wird dies durch nichts abgefangen.</p>
+
+<p>Glücklicherweise kann man solche Fälle mit einem Promise umschließen. Ein Best Practice besteht darin, problematische Funktionen auf der niedrigstmöglichen Ebene zu umschließen, und sie nie wieder direkt aufzurufen:</p>
+
+<pre class="brush: js notranslate">const wait = (ms) =&gt; new Promise(resolve =&gt; setTimeout(resolve, ms));
+
+wait(10000).then(() =&gt; saySomething("10 seconds")).catch(failureCallback);
+</pre>
+
+<p>Der Promise-Konstruktor empfängt grundsätzlich eine Ausführenden-Funktion, die es möglich macht, ein Promise manuell aufzulösen oder abzulehnen. Da <code>setTimeout()</code> nicht wirklich fehlschlägt, wurde im oberen Beispiel die Ablehnung ausgelassen.</p>
+
+<h2 id="Komposition">Komposition</h2>
+
+<p>{{jsxref("Promise.resolve()")}} und {{jsxref("Promise.reject()")}} sind Abkürzungen für das manuelle Erzeugen von jeweils bereits aufgelösten oder abgelehnten Promises. In bestimmten Fällen kann dies nützlich sein.</p>
+
+<p>{{jsxref("Promise.all()")}} und {{jsxref("Promise.race()")}} sind zwei Kompositionswerkzeuge für das parallele Durchführen von asynchronen Operationen.</p>
+
+<p>Sequenzielle Komposition ist möglich durch cleveres Javascript:</p>
+
+<pre class="notranslate">[func1, func2].reduce((p, f) =&gt; p.then(f), Promise.resolve());</pre>
+
+<p>Im oberen Beispiel wird ein Array von asynchronen Funktionen auf eine Promise chain reduziert. Somit ist es das gleiche, wie <code>Promise.resolve().then(func1).then(func2);</code>.</p>
+
+<p>Auch ist es möglich, dies mit einer wiederverwendbaren Kompositionsfunktion umzusetzen, die häufig in der funktionalen Programmierung vorkommt:</p>
+
+<pre class="brush: js notranslate">const applyAsync = (acc,val) =&gt; acc.then(val);
+const composeAsync = (...funcs) =&gt; x =&gt; funcs.reduce(applyAsync, Promise.resolve(x));</pre>
+
+<p>Die Funktion <code>composeAsync()</code> akzeptiert eine dynamische Anzahl von Funktionen als Parameter, und hat als Rückgabewert eine Funktion, die einen Initialwert akzeptiert, welcher durch die Kompositions-Pipeline durchgereicht wird. Der Nutzen besteht darin, dass einige oder alle übergebenen Funktionen entweder synchron oder asynchron sein können, und garantiert wird, dass sie in der richtigen Reihenfolge ausgeführt werden.</p>
+
+<pre class="brush: js notranslate">const transformData = composeAsync(func1, asyncFunc1, asyncFunc2, func2);
+transformData(data);
+</pre>
+
+<p>In ECMAScript 2017 kann sequenzielle Komposition mittels <code>async/await</code> noch einfacher durchgeführt werden:</p>
+
+<pre class="brush: js notranslate">for (const f of [func1, func2]) {
+  await f();
+}
+</pre>
+
+<h2 id="Timing">Timing</h2>
+
+<p>Um Überraschungen vorzubeugen, werden Funktionen die an <code>.then()</code> übergeben werden niemals synchron aufgerufen, auch wenn das Promise bereits aufgelöst wurde:</p>
+
+<pre class="brush: js notranslate">Promise.resolve().then(() =&gt; console.log(2));
+console.log(1); // 1, 2
+</pre>
+
+<p>Anstatt sofort ausgeführt zu werden, wird die übergebene Funktion in eine Microtask-Warteschlange eingereiht; das bedeutet, sie wird erst ausgeführt, wenn die Warteschlange am ende des aktuellen Durchlaufs des Javascript event loops geleert wird, sprich zeitnah:</p>
+
+<pre class="brush: js notranslate">const wait = ms =&gt; new Promise(resolve =&gt; setTimeout(resolve, ms));
+
+wait().then(() =&gt; console.log(4));
+Promise.resolve().then(() =&gt; console.log(2)).then(() =&gt; console.log(3));
+console.log(1); // 1, 2, 3, 4
+</pre>
+
+<h2 id="Nesting">Nesting</h2>
+
+<p>Einfache Promise chains sollten möglichst flach und ohne Nesting implementiert werden, da Nesting auch das Ergebnis von undurchdachter Komposition sein kann. Siehe auch bei typischen Fehlern.</p>
+
+<p>Als Nesting wird eine Kontrollstruktur bezeichnet, um den Scope von catch-Statements zu begrenzen. Ein nested catch fängt nur Fehler in seinem Scope und niedriger ab, nicht außerhalb. Korrekt genutzt führt dies zu höherer Präzision in der Fehlerbehandlung:</p>
+
+<pre class="brush: js notranslate">doSomethingCritical()
+.then(result =&gt; doSomethingOptional(result)
+  .then(optionalResult =&gt; doSomethingExtraNice(optionalResult))
+  .catch(e =&gt; {})) // Ignorieren, wenn optionale Operation fehlschlägt
+.then(() =&gt; moreCriticalStuff())
+.catch(e =&gt; console.error("Critical failure: " + e.message));</pre>
+
+<h2 id="Typische_Fehler">Typische Fehler</h2>
+
+<p>In diesem Abschnitt werden übliche Programmierfehler thematisiert, auf die man achten sollte, um Promise chains nicht zu kompromittieren. Im unteren Beispiel wurden drei der am häufigsten vorkommenden Fehler untergebracht:</p>
+
+<pre class="brush: js example-bad notranslate">eineFunktion().then(function (ergebnis) {
+  eineZweiteFunktion(ergebnis) // Kein Promise-Rückgabewert für innere Chain + unnötiges Nesting
+  .then(neuesErgebnis =&gt; eineDritteFunktion(neuesErgebnis));
+}).then(() =&gt; eineVierteFunktion());
+// Keine Chain-Terminierung mit einem catch!</pre>
+
+<p>Der erste Programmierfehler ist, dass die Promise chain nicht ordentlich geknüpft wurde. Passieren tut dies, wenn ein neues Promise erzeugt, aber nicht zurückgegeben wird. Das führt dazu, dass die Promise chain reisst, oder aber, dass zwei chains entstehen, die sich in einer Race condition befinden. Im Klartext heisst das, dass <code>eineVierteFunktion()</code> nicht darauf wartet, dass <code>eineZweiteFunktion()</code> oder <code>eineDritteFunktion()</code> abgeschlossen sind, und, wahrscheinlich unbeabsichtigt, parallel mit ihnen ausgeführt wird. Einzelne Promise chains haben zusätzlich eigene Fehlerbehandlungen, was in diesem Fall zu nicht abgefangenen Fehlern führt.</p>
+
+<p>Der zweite Programmierfehler ist das unnötige Nesting, welches den ersten Fehler mitverursachen kann. Da Nesting auch den Scope der inneren Fehler-Handler begrenzt, kann dies zu nicht abgefangenen Fehlern führen. Eine Variante hiervon ist das <a href="https://stackoverflow.com/questions/23803743/what-is-the-explicit-promise-construction-antipattern-and-how-do-i-avoid-it">Promise-Konstruktor-Antipattern</a>, welches Nesting mit der redundanten Nutzung eines Promise-Konstruktors, um Code, der bereits Promises nutzt, zu umschließen, kombiniert.</p>
+
+<p>Der dritte Programmierfehler ist, die Terminierung der Promise chain mit einem <code>.catch()</code> wegzulassen. Unterminierte chains führen in den meisten Browsern zu nicht abgefangenen Promise-Ablehnungen.</p>
+
+<p>Als Faustregel sei genannt, dass Promise chains immer entweder zurückgegeben oder terminiert werden sollen, und neue Promises sofort zurückgegeben werden sollten, um die Hierarchie flach zu halten:</p>
+
+<pre class="brush: js example-good notranslate">eineFunktion()
+.then(function(ergebnis) {
+  return eineZweiteFunktion(ergennis);
+})
+.then(neuesErgebnis =&gt; eineDritteFunktion(neuesErgebnis))
+.then(() =&gt; eineVierteFunktion())
+.catch(fehler =&gt; console.error(fehler));</pre>
+
+<p>Zu beachten ist, dass <code>() =&gt; x</code> die Kurzschreibform für <code>() =&gt; { return x; }</code> ist.</p>
+
+<p>Im oberen Beispiel steht jetzt eine einzelne, deterministische Promise chain mit ordentlicher Fehlerbehandlung.</p>
+
+<p>Das Verwenden von <a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function"><code>async</code>/<code>await</code></a> adressiert die meisten, wenn nicht alle dieser Fehlerquellen; stattdessen kann dann der typische Fehler entstehen, dass man <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function"><code>await</code></a>-Keyword vergisst.</p>
+
+<h2 id="Wenn_Promises_auf_Tasks_treffen">Wenn Promises auf Tasks treffen</h2>
+
+<p>In einer Situation, in der es Promises und Tasks (z.B. Events oder Callbacks) gibt, die in einer unvorhergesehenen Reihenfolge ausgeführt werden / feuern können, ist es möglich, sich einen Microtask zunutze zu machen, um den Status von Promises zu prüfen oder diese auszubalancieren, wenn diese unter bestimmten Bedingungen erzeugt werden.</p>
+
+<p>Für weitere Informationen über Microtasks und das Einreihen einer Funktion als Microtask mittels <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/queueMicrotask">queueMicrotask()</a></code>, kann im <a href="/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide">Microtask-Guide</a> nachlesen.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Promise.then()")}}</li>
+ <li><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/queueMicrotask">async/await</a></code></li>
+ <li><a href="http://promisesaplus.com/">Promises/A+ specification</a></li>
+ <li><a href="https://medium.com/@ramsunvtech/promises-of-promise-part-1-53f769245a53">Venkatraman.R - JS Promise (Part 1, Basics)</a></li>
+ <li><a href="https://medium.com/@ramsunvtech/js-promise-part-2-q-js-when-js-and-rsvp-js-af596232525c#.dzlqh6ski">Venkatraman.R - JS Promise (Part 2 - Using Q.js, When.js and RSVP.js)</a></li>
+ <li><a href="https://tech.io/playgrounds/11107/tools-for-promises-unittesting/introduction">Venkatraman.R - Tools for Promises Unit Testing</a></li>
+ <li><a href="http://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html">Nolan Lawson: We have a problem with promises — Common mistakes with promises</a></li>
+</ul>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Iterators_and_Generators")}}</p>
diff --git a/files/de/web/javascript/index.html b/files/de/web/javascript/index.html
new file mode 100644
index 0000000000..25a6710806
--- /dev/null
+++ b/files/de/web/javascript/index.html
@@ -0,0 +1,120 @@
+---
+title: JavaScript
+slug: Web/JavaScript
+tags:
+  - JavaScript
+  - Landing
+  - Learn
+  - 'l10n:priority'
+translation_of: Web/JavaScript
+---
+<div>{{JsSidebar}}</div>
+
+<p class="summary"><span class="seoSummary">JavaScript (JS) ist eine leichtgewichtige, interpretierte oder JIT-übersetzte Sprache mit {{Glossary("First-class_Function", "First-Class-Funktion")}}. Bekannt ist sie hauptsächlich als Skriptsprache für Webseiten geworden, jedoch wird sie auch in <a href="http://en.wikipedia.org/wiki/JavaScript#Uses_outside_web_pages" rel="noreferrer">vielen Umgebungen außerhalb des Browsers</a> wie zum Beispiel <a href="http://nodejs.org/" rel="noreferrer">Node.js</a>, <a href="http://couchdb.apache.org" rel="noreferrer">Apache CouchDB</a> und <a href="http://www.adobe.com/devnet/acrobat/javascript.html">Adobe Acrobat</a> eingesetzt.</span> JavaScript ist eine {{Glossary("Prototype-based_programming", "prototypbasierte")}} Sprache, die mehreren Paradigmen folgt, dynamisch ist und sowohl objektorientierte, imperative als auch deklarative Programmierung (z. B. funktionales Programmieren) ermöglicht. Weitere Informationen <a href="/de/docs/Web/JavaScript/Guide/Ueber_JavaScript" rel="noreferrer">über JavaScript</a>.</p>
+
+<p>Dieser Bereich dient zur Beschreibung der Sprache JavaScript selbst, also allgemeinen Inhalten, die nicht nur speziell für Webseiten oder andere Umgebungen gelten. Für weitere Informationen zu bestimmten {{Glossary("API","APIs")}} für Webseiten, siehe auf den Seiten für <a href="/docs/Web/API" rel="noreferrer">Web APIs</a> und <a href="/docs/Glossary/DOM" rel="noreferrer">DOM</a>.</p>
+
+<p>Der Standard für JavaScript ist <a href="/de/docs/Web/JavaScript/Language_Resources">ECMAScript</a>. Stand 2012 unterstützen alle <a href="https://kangax.github.io/compat-table/es5/">modernen Browser </a>ECMAScript 5.1 vollständig. Ältere Browser unterstützen mindestens ECMAScript 3. Am 17. Juni 2015 veröffentlichte <a href="https://www.ecma-international.org">ECMA International</a> die sechste Version von ECMAScript, welche offiziell ECMAScript 2015 genannt wird und initial mit ECMAScript 6 oder ES6 referenziert wurde. Seitdem gibt es jedes Jahr eine neue Version von ECMAScript-Standards. Diese Dokumentation referenziert den letzen Entwurfsstand, welcher aktuell <a href="https://tc39.github.io/ecma262/">ECMAScript 2019</a> ist.</p>
+
+<p>Man sollte JavaScript nicht mit der <a href="https://de.wikipedia.org/wiki/Java_(Programmiersprache)">Programmiersprache Java</a> verwechseln. Beide, "Java" und "JavaScript" sind Handelsmarken und/oder registrierte Handelsmarken von Oracle in den USA oder anderen Ländern. Die beiden Programmiersprachen haben eine sehr unterschiedliche Syntax, Semantik und Verwendung.</p>
+
+<div class="column-container">
+<div class="column-half">
+<h2 id="Tutorials">Tutorials</h2>
+Lernen Sie, wie man mit JavaScript programmiert, mit Guides und Tutorials.
+
+<h3 id="Für_komplette_Einsteiger">Für komplette Einsteiger</h3>
+
+<p>Besuchen Sie unseren Lernbereich zu JavaScript-Themen, wenn Sie noch keine Erfahrungen mit JavaScript oder Programmierung haben. Die folgenden Module sind dort verfügbar:</p>
+
+<dl>
+ <dt><a href="/de/Learn/JavaScript/First_steps">Erste Schritte mit JavaScript</a></dt>
+ <dd>Beantwortet einige fundamentale Fragen, wie "Was ist JavaScript?", "Wie sieht es aus?" und "Was kann es machen?", und diskutiert Schlüsselfunktionen von JavaScript, wie Variablen, Strings, Zahlen und Arrays.</dd>
+ <dt><a href="/de/Learn/JavaScript/Bausteine">JavaScript Bausteine</a></dt>
+ <dd>Erweitert die Kenntnisse über JavaScripts fundamentale Schlüsselfunktionen und lenkt die Aufmerksamkeit auf häufig eingesetzte Arten von Codeblöcken, wie Bedingte Statements, Schleifen, Funktionen und Events.</dd>
+ <dt><a href="/de/docs/Learn/JavaScript/Objects">Einführung in JavaScript Objekte</a></dt>
+ <dd>Die objektorientierte Natur von JavaScript ist wichtig zu verstehen, wenn man die Sprache weiter lernen möchte und effizienteren Code schreiben möchte. Deswegen ist dieses Modul hier, um Ihnen zu dabei zu helfen.</dd>
+</dl>
+
+<h3 id="JavaScript_Guide">JavaScript Guide</h3>
+
+<dl>
+ <dt><a href="/docs/Web/JavaScript/Guide" rel="noreferrer">JavaScript Guide</a></dt>
+ <dd>Ein deutlich detaillierterer Guide für die Sprache JavaScript, der für Leute gedacht ist, die schon Programmiererfahrung mit JavaScript oder anderen Sprachen gesammelt haben.</dd>
+</dl>
+
+<h3 id="Fortgeschritten">Fortgeschritten</h3>
+
+<dl>
+ <dt><a href="/de/docs/Learn/JavaScript/Client-side_web_APIs">Clientseitige Web APIs</a></dt>
+ <dd>Wenn Clientseitige JavaScript für Webseiten oder Applikationen geschrieben werden, kommt man nicht weit ohne den Einsatz von APIs — Schnittstellen für das Manipulieren von verschiedenen Aspekten des Browsers und des Operationssystem, auf dem die Seite läuft oder einfach Daten für andere Webseiten oder Services. Dieses Modul gibt einen Überblick über die APIs und zeigt, wie die am häufigsten eingesetzten APIs oft in der Entwicklungsarbeit benutzt werden.</dd>
+ <dt><a href="/de/docs/Web/JavaScript/Eine_Wiedereinfuehrung_in_JavaScript" rel="noreferrer">Eine Wiedereinführung in JavaScript</a></dt>
+ <dd>Ein Überblick für diejenigen, die <em>meinen</em>, dass sie JavaScript bereits kennen.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/docs/Web/JavaScript/Data_structures" rel="noreferrer">JavaScript-Datenstrukturen</a></dt>
+ <dd>Überblick über vorhandene Datenstrukturen in JavaScript.</dd>
+ <dt><a href="/de/docs/Web/JavaScript/Vergleiche_auf_Gleichheit_und_deren_Verwendung" rel="noreferrer">Vergleiche auf Gleichheit und deren Verwendung</a></dt>
+ <dd>JavaScript stellt drei verschieden Vergleichsoperatoren bereit: Strikte Gleichheit mit <code>===</code>, lose Gleichheit mit <code>==</code> und die {{jsxref("Global_Objects/Object/is", "Object.is()")}} Methode.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h3 id="Erweitert">Erweitert</h3>
+
+<dl>
+ <dt><a href="/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain" rel="noreferrer">Vererbung und die Prototyp-Kette</a></dt>
+ <dd>Erläuterung der vielfach missverstandenen und unterschätzten prototypbasierte Vererbung.</dd>
+ <dt><a href="/docs/Web/JavaScript/Reference/Strict_mode" rel="noreferrer">Strict mode</a></dt>
+ <dd>Der Strict mode definiert, dass man keine Variable vor der Initialisierung benutzen kann. Es ist eine eingeschränkte Variante von ECMAScript 5 für bessere Performance und einfacheres Debuggen.</dd>
+ <dt><a href="/docs/Web/JavaScript/Typed_arrays" rel="noreferrer">JavaScripts typisierte Arrays</a></dt>
+ <dd>JavaScript typisierte Arrays ermöglichen es, auf binäre Rohdaten zuzugreifen.</dd>
+ <dt><a href="/de/docs/Web/JavaScript/Speicherverwaltung" rel="noreferrer">Speicherverwaltung</a></dt>
+ <dd>Speicherzyklen und Garbage Collection in JavaScript.</dd>
+ <dt><a href="/de/docs/Web/JavaScript/EventLoop">Parallelitätsmodell und Ereignisschleife</a></dt>
+ <dd>JavaScript hat ein Parallelitätsmodell basierend auf einer Ereignisschleife.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<h2 id="Referenz">Referenz</h2>
+
+<p>In der kompletten <a href="/docs/Web/JavaScript/Reference" rel="noreferrer">JavaScript Referenz</a> Dokumentation nachschlagen.</p>
+
+<dl>
+ <dt><a href="/docs/Web/JavaScript/Reference/Global_Objects" rel="noreferrer">Standardobjekte</a></dt>
+ <dd>Eingebaute Objekte der Standardbibliothek wie {{jsxref("Array")}}, {{jsxref("Boolean")}}, {{jsxref("Date")}}, {{jsxref("Error")}}, {{jsxref("Function")}}, {{jsxref("JSON")}}, {{jsxref("Math")}}, {{jsxref("Number")}}, {{jsxref("Object")}}, {{jsxref("RegExp")}}, {{jsxref("String")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("WeakMap")}}, {{jsxref("WeakSet")}} und weitere.</dd>
+ <dt><a href="/docs/Web/JavaScript/Reference/Operators" rel="noreferrer">Ausdrücke &amp; Operatoren</a></dt>
+ <dd>Mehr lernen über die Bedeutung von JavaScript Operatoren {{jsxref("Operators/instanceof", "instanceof")}}, {{jsxref("Operators/typeof", "typeof")}}, {{jsxref("Operators/new", "new")}}, {{jsxref("Operators/this", "this")}}, die <a href="/de/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Operationsreihenfolge</a> und mehr.</dd>
+ <dt><a href="/docs/Web/JavaScript/Reference/Statements" rel="noreferrer">Statements &amp; Deklarationen</a></dt>
+ <dd>Lernen wie {{jsxref("Statements/do...while", "do-while")}}, {{jsxref("Statements/for...in", "for-in")}}, {{jsxref("Statements/for...of", "for-of")}}, {{jsxref("Statements/try...catch", "try-catch")}}, {{jsxref("Statements/let", "let")}}, {{jsxref("Statements/var", "var")}}, {{jsxref("Statements/const", "const")}}, {{jsxref("Statements/if...else", "if-else")}}, {{jsxref("Statements/switch", "switch")}} und weitere JavaScript Statements und Schlüsselwörter funktionieren.</dd>
+ <dt><a href="/docs/Web/JavaScript/Reference/Functions" rel="noreferrer">Funktionen</a></dt>
+ <dd>Lernen, wie man mit JavaScripts Funktionen Erarbeitet, um eine Applikation zu entwickeln.</dd>
+</dl>
+
+<h2 id="Werkzeuge_Hilfen">Werkzeuge &amp; Hilfen</h2>
+
+<p>Hilfreiche Werkzeuge zum Schreiben und Debuggen von JavaScript Code.</p>
+
+<dl>
+ <dt><a href="/docs/Tools" rel="noreferrer">Firefox Developer Tools</a></dt>
+ <dd><a href="/docs/Tools/Scratchpad" rel="noreferrer">Scratchpad</a>, <a href="/docs/Tools/Web_Console" rel="noreferrer">Web-Konsole</a>, <a href="/docs/Tools/Profiler" rel="noreferrer">JavaScript Profiler</a>, <a href="/docs/Tools/Debugger" rel="noreferrer">Debugger</a> und weitere.</dd>
+ <dt><a href="/docs/Web/JavaScript/Shells" rel="noreferrer">JavaScript Shells</a></dt>
+ <dd>Mit einer JavaScript-Shell ermöglicht es schnell und einfach Code-Schnipsel auszuprobieren.</dd>
+ <dt><a href="https://togetherjs.com/" rel="noreferrer">TogetherJS</a></dt>
+ <dd>
+ <p class="hero-header-text large">Zusammenarbeit einfach gemacht. Wenn TogetherJS auf einer Seite hinzugefügt wurde, können sich die Benutzer der Seit in Echtzeit helfen!</p>
+ </dd>
+ <dt><a href="http://stackoverflow.com/questions/tagged/javascript" rel="noreferrer">Stack Overflow</a></dt>
+ <dd>Stack Overflow Fragen, die mit "JavaScript" markiert sind.</dd>
+ <dt><a href="/de/docs/Web/JavaScript/Neu_in_JavaScript" rel="noreferrer">JavaScript Versionen und Release Notes</a></dt>
+ <dd>Geschichte und Status der Implementierungen von JavaScript Funktionen.</dd>
+ <dt><a href="https://jsfiddle.net/">JSFiddle</a></dt>
+ <dd>Bearbeiten von JavaScript, CSS und HTML und live Ergebnisse sehen. Man kann zudem externe Ressourcen benutzen und mit seinem Team online miteinander arbeiten.</dd>
+ <dt><a href="https://plnkr.co/">Plunker</a></dt>
+ <dd>Plunker ist eine online Community zum erstellen, zusammenarbeiten und teilen von Ideen in der Webentwicklung. Man kann JavaScript CSS und HTML Dateien bearbeiten und live Resultate und Dateistrukturen sehen.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/de/web/javascript/inheritance_and_the_prototype_chain/index.html b/files/de/web/javascript/inheritance_and_the_prototype_chain/index.html
new file mode 100644
index 0000000000..bf1ae998ee
--- /dev/null
+++ b/files/de/web/javascript/inheritance_and_the_prototype_chain/index.html
@@ -0,0 +1,300 @@
+---
+title: Vererbung und die Prototypenkette
+slug: Web/JavaScript/Inheritance_and_the_prototype_chain
+tags:
+  - Advanced
+  - Guide
+  - Inheritance
+  - JavaScript
+  - OOP
+translation_of: Web/JavaScript/Inheritance_and_the_prototype_chain
+---
+<div>{{jsSidebar("Advanced")}}</div>
+
+<p>JavaScript mag für Entwickler, die in klassenbasierten Sprachen (wie etwa Java oder C++) Erfahrung haben, etwas verwirrend erscheinen. Der Grund dafür ist, dass JavaScript per se keine <code><strong>class</strong></code>-Implementierung bereitstellt (das <code><strong>class</strong></code>-Schlüsselwort wurde erst mit ES2015 eingeführt. Es ist jedoch syntaktischer Zucker, JavaScript bleibt Prototyp-basiert).</p>
+
+<p class="brush: js">Wenn es um Vererbung geht, hat JavaScript nur ein Konstrukt anzubieten: Objekte. Jedes Objekt hat eine interne Verbindung zu einem anderen ("älteren") Objekt, welches als sein <strong>Prototyp</strong> bezeichnet wird. Dieses Prototypobjekt hat selbst einen Prototyp, der wiederum selbst einen Prototyp hat. Dies setzt sich fort, bis ein Objekt erreicht wird, dessen Prototyp <code>null</code> ist. null hat per Definition keinen Prototyp und bildet somit den Abschluß dieser <strong>Prototypenkette</strong>.</p>
+
+<p class="brush: js">Dies wird oft als eine der Schwächen von JavaScript betrachtet, jedoch ist das Prototypmodell tatsächlich mächtiger als das klassische OO Modell. Es ist zum Beispiel relativ trivial, ein klassisches OO Modell auf einem Prototypmodell zu realisieren.</p>
+
+<h2 id="Vererbung_mit_der_Prototypenkette">Vererbung mit der Prototypenkette</h2>
+
+<h3 id="Vererbung_von_Eigenschaften">Vererbung von Eigenschaften</h3>
+
+<p>Objekte in JavaScript sind dynamische "Behälter" von Eigenschaften, welche auch seine "eigenen Eigenschaften" (<strong>own properties</strong>) genannt werden. JavaScript-Objekte haben eine Verknüpfung zu einem Prototypobjekt. Beim Versuch auf eine Objekteigenschaft zuzugreifen, wird die Eigenschaft nicht nur in dem Objekt selbst, sondern auch in seinem Prototyp, dem Prototyp des Prototyps, usw. gesucht. Dies wird so lange fortgesetzt, bis eine Eigenschaft mit entsprechendem Namen gefunden wurde oder das Ende der Prototypenkette erreicht ist.</p>
+
+<div class="note">
+<p>Gemäß des ECMAScript-Standards, wird die Notation <code>someObject.[[Prototype]]</code> verwendet, um den Prototyp von <code>someObject</code> zu bezeichnen. Das ist äquivalent zu der JavaScript-Eigenschaft <code>__proto__ </code>(jetzt veraltet). Dies sollte nicht mit der <code><em>func</em>.prototype</code> Eigenschaft von Funktionen verwechselt werden, welche stattdessen den <code>[[Prototype]]</code> von allen <em>Instanzen</em> der entsprechenden Funktion spezifiziert. Seit ECMAScript 6 wird auf den <code>[[Prototype]]</code> mit Hilfe der Methoden {{jsxref("Object.getPrototypeOf()")}} und {{jsxref("Object.setPrototypeOf()")}} zugegriffen.</p>
+</div>
+
+<p>Folgendes passiert bei dem Versuch auf eine Eigenschaft zuzugreifen:</p>
+
+<pre class="brush: js">// Angenommen, wir haben ein Objekt o, mit eigenen Eigenschaften a und b:
+// {a: 1, b: 2}
+// o.[[Prototype]] hat die Eigenschaften b und c:
+// {b: 3, c: 4}
+// Letztendlich ist o.[[Prototype]].[[Prototype]] null.
+// Das ist das Ende der Prototypenkette, wobei null selbst
+// keinen Prototyp mehr besitzt
+// Daher sieht die gesamte Prototypenkette wie folgt aus:
+// {a:1, b:2} ---&gt; {b:3, c:4} ---&gt; null
+
+console.log(o.a); // 1
+// Gibt es eine eigen Eigenschaft 'a' im Objekt o? Ja, und ihr Wert ist 1.
+
+console.log(o.b); // 2
+// Gibt es eine eigene Eigenschaft 'b' im Objekt o? Ja, und ihr Wert ist 2.
+// Sein Prototyp hat auch eine 'b'-Eigenschaft, sie wird jedoch nicht
+// berücksichtigt. Das nennt man "property shadowing"
+
+console.log(o.c); // 4
+// Gibt es eine eigene Eigenschaft 'c' im Objekt o?
+// Nein, schaue im Prototyp.
+// Gibt es eine eigene Eigenschaft 'c' in o.[[Prototype]]? Ja, ihr Wert ist 4.
+
+console.log(o.d); // undefined
+// Gibt es eine eigene Eigenschaft 'd' im Objekt o? Nein, schaue im Prototyp!
+// Gibt es eine eigene Eigenschaft 'd' in o.[[Prototype]]? Nein, schaue im Prototyp!
+// o.[[Prototype]].[[Prototype]] ist null, Ende der Suche.
+// Keine Eigenschaft gefunden. Es wird undefined zurückgegeben.
+
+</pre>
+
+<p>Das Hinzufügen einer Eigenschaft zu einem Objekt erzeugt eine dem Objekt eigene Eigenschaft. Die einzige Ausnahme zu den beschriebenen Regeln beim Setzen und Abrufen von Eigenschaften besteht, wenn eine geerbte Eigenschaft mit einem <a href="/de/docs/Web/JavaScript/Guide/Mit_Objekten_arbeiten#Defining_getters_and_setters">Getter oder Setter</a> existiert.</p>
+
+<h3 id="Vererben_von_Methoden">Vererben von "Methoden"</h3>
+
+<p>JavaScript hat keine "Methoden" wie diese bei Klassen-basierten Sprachen definiert werden. In JavaScript kann jede Funktion als eine normale Eigenschaft zu einem Objekt hinzugefügt werden. Eine vererbte Funktion verhält sich demnach genau wie jede andere Eigenschaft, inklusive "property shadowing" wie oben gezeigt (in diesem Fall ist das eine Art der <em>Überschreibung von Methoden</em>).</p>
+
+<p>Wenn eine vererbte Funktion ausgeführt wird, zeigt der Wert von <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this" title="this"><code>this</code></a> zum erbenden Objekt und nicht zu dessen Prototyp, in dem diese Funktion eine eigene Eigenschaft (own property) ist.</p>
+
+<pre class="brush: js">var o = {
+  a: 2,
+  m: function(b){
+    return this.a + 1;
+  }
+};
+
+console.log(o.m()); // 3
+// Beim Aufruf von o.m referenziert 'this' hier das Objekt o.
+
+var p = Object.create(o);
+// p ist ein Objekt, welches von o erbt.
+
+p.a = 4; // erzeugt ein Eigenschaft 'a' in p
+console.log(p.m()); // 5
+// Wird p.m aufgerufen, referenziert 'this' hier das Objekt p.
+// Wenn also p die Funktion m von o erbt,
+// 'this.a' referenziert p.a, der Eigenschaft 'a' in p.
+</pre>
+
+<h2 id="Verschiedene_Wege_Objekte_zu_erzeugen_und_die_resultierende_Prototypenkette">Verschiedene Wege, Objekte zu erzeugen und die resultierende Prototypenkette</h2>
+
+<h3 id="Objekte_mit_Syntax_Konstrukten_erzeugen">Objekte mit Syntax Konstrukten erzeugen</h3>
+
+<pre class="brush: js">var o = {a: 1};
+
+// Das erzeugte Objekt o hat Object.prototype als seinen [[Prototype]]
+// o hat keine eigene Eigenschaft namens 'hasOwnProperty'.
+// hasOwnProperty ist eine eigene Eigenschaft von Object.prototype.
+// Objekt o erbt hasOwnProperty von Object.prototype,
+// Object.prototype wiederum hat null als Prototyp:
+// o ---&gt; Object.prototype ---&gt; null
+
+var a = ["yo", "whadup", "?"];
+
+// Arrays erben von Array.prototype
+// (der Methoden wie indexOf, forEach, etc. hat)
+// Die Prototypenkette sieht also so aus:
+// a ---&gt; Array.prototype ---&gt; Object.prototype ---&gt; null
+
+function f(){
+  return 2;
+}
+
+// Functionen erben von Function.prototype
+// (der Methoden wie call, bind, etc. enthält):
+// f ---&gt; Function.prototype ---&gt; Object.prototype ---&gt; null
+</pre>
+
+<h3 id="Mittels_Constructor">Mittels Constructor</h3>
+
+<p>Ein "constructor" ist in JavaScript lediglich eine Funktion, die mit dem <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new" title="new">new Operator</a> aufgerufen wird.</p>
+
+<pre class="brush: js">function Graph() {
+  this.vertices = [];
+  this.edges = [];
+}
+
+Graph.prototype = {
+  addVertex: function(v){
+    this.vertices.push(v);
+  }
+};
+
+var g = new Graph();
+// g ist ein Objekt mit eigenen Eigenschaften 'vertices' und 'edges'.
+// g.[[Prototype]] ist der Wert von Graph.prototype, wenn new Graph() ausgeführt wird.
+</pre>
+
+<h3 id="Mit_Object.create">Mit <code>Object.create</code></h3>
+
+<p>ECMAScript 5 führte eine neue Methode ein: {{jsxref("Object.create()")}}. Der Aufruf dieser Methode erzeugt ein neues Objekt. Der erste Parameter dieser Methode ist der Prototyp des neu erzeugten Objekts:</p>
+
+<pre class="brush: js">var a = {a: 1};
+// a ---&gt; Object.prototype ---&gt; null
+
+var b = Object.create(a);
+// b ---&gt; a ---&gt; Object.prototype ---&gt; null
+console.log(b.a); // 1 (vererbt)
+
+var c = Object.create(b);
+// c ---&gt; b ---&gt; a ---&gt; Object.prototype ---&gt; null
+
+var d = Object.create(null);
+// d ---&gt; null
+console.log(d.hasOwnProperty);
+// undefined, denn d erbte nicht von Object.prototype
+</pre>
+
+<div>
+<h3 id="Mit_dem_class_Schlüsselwort">Mit dem <code>class</code> Schlüsselwort</h3>
+
+<p>ECMAScript 6 führt einige neue Schlüsselwörter ein, um <a href="/en-US/docs/Web/JavaScript/Reference/Classes">Klassen</a> zu implementieren. Obwohl diese Konstrukte aussehen wie die, die Entwicklern aus Klassen-basierten Sprachen bekannt sind, verhalten sie sich doch anders. JavaScript bleibt Prototyp-basiert. Zu den neuen Schlüsselwörtern gehören {{jsxref("Statements/class", "class")}}, {{jsxref("Classes/constructor", "constructor")}}, {{jsxref("Classes/static", "static")}}, {{jsxref("Classes/extends", "extends")}}, und {{jsxref("Operators/super", "super")}}.</p>
+
+<pre class="brush: js">"use strict";
+
+class Polygon {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+}
+
+class Square extends Polygon {
+  constructor(sideLength) {
+    super(sideLength, sideLength);
+  }
+  get area() {
+    return this.height * this.width;
+  }
+  set sideLength(newLength) {
+    this.height = newLength;
+    this.width = newLength;
+  }
+}
+
+var square = new Square(2);
+</pre>
+
+<h3 id="Performance">Performance</h3>
+
+<p>Der Zugriff auf Eigenschaften, die sich weit oben in der Prototypenkette befinden, kann negativen Einfluss auf die Performance haben. Dies kann in Performance-kritischen Situationen zu Problemen führen. Hinzu kommt, dass beim Versuch, auf nicht existierende Eigenschaften zuzugreifen, immer die gesamte Prototypenkette durchlaufen wird.</p>
+
+<p>Beim Iterieren über die Eigenschaften von Objekten wird über <strong>jede</strong> aufzählbare Eigenschaft iteriert, die auf der Prototypenkette vorkommt.</p>
+
+<p>Um zu prüfen, ob ein Objekt eine Eigenschaft an sich <em>selbst</em> definiert hat (own property) und nicht von der Prototypenkette geerbt hat, muss die Funktion <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty" title="/ru/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty"><code>hasOwnProperty</code></a> benutzt werden, die alle Objekte vom <code>Object.prototype</code> erben.</p>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty" title="/ru/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty"><code>hasOwnProperty</code></a> ist das einzige Konstrukt in JavaScript das beim Umgang mit Eigenschaften von Objekten <strong>nicht</strong> die Prototypenkette durchläuft.</p>
+
+<p>Hinweis: Es reicht <strong>nicht</strong> aus, zu prüfen, ob eine Eigenschaft <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a> ist, um deren Existenz zu pfüfen. Die Eigenschaft könnte durchaus existieren, aber ihr aktueller Wert könnte aktuell explizit auf <code>undefined</code> gesetzt worden sein.</p>
+</div>
+
+<h3 id="Bad_practice_Erweiterung_von_nativen_Prototypen">Bad practice: Erweiterung von nativen Prototypen</h3>
+
+<p>Ein oft anzutreffendes "Feature" ist es, den <code>Object.prototype</code> oder einen anderen eingebauten Prototypen zu erweitern.</p>
+
+<p>Diese Technik, die als "monkey patching" bezeichnet wird, zerstört die <em>Kapselung</em>. Auch wenn diese Technik in populären Frameworks wie Prototype.js benutzt wird, gibt es dennoch keinen guten Grund dafür, die eingebauten Prototypen mit zuätzlicher, nicht-standard Funktionalität anzureichern.</p>
+
+<p>Der <strong>einzige</strong> gute Grund für die Erweiterung von eingebauten Prototypen ist es, Features neuerer JavaScript Engines zurück zu portieren, beipielsweise <code>Array.forEach</code>, etc.</p>
+
+<h2 id="Example" name="Example">Beispiel</h2>
+
+<p><code>B</code> soll erben von <code>A</code>:</p>
+
+<pre class="brush: js">function A(a){
+  this.varA = a;
+}
+
+// Was ist der Sinn darin, varA in den Prototyp aufzunehmen, wenn A.prototype.varA immer überschrieben wird von
+// this.varA, vorausgesetzt Funktion A wird wie oben gezeigt definiert?
+A.prototype = {
+  varA : null,  // Sollte varA nicht vom Prototyp entfernt werden, da nicht benötigt wird?
+      // Vielleicht ist es eine Optimierung, um den Platz in versteckten Klassen zu allozieren?
+      // https://developers.google.com/speed/articles/optimizing-javascript#initializing-instance-variables
+      // wäre ein valides Argument, wenn varA nicht individuell für jede Instanz initialisiert würde
+  doSomething : function(){
+    // ...
+  }
+}
+
+function B(a, b){
+  A.call(this, a);
+  this.varB = b;
+}
+B.prototype = Object.create(A.prototype, {
+  varB : {
+    value: null,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  },
+  doSomething : {
+    value: function(){ // override
+      A.prototype.doSomething.apply(this, arguments); // call super
+      // ...
+    },
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }
+});
+B.prototype.constructor = B;
+
+var b = new B();
+b.doSomething();
+</pre>
+
+<p>Die wichtigsten Stellen hier sind:</p>
+
+<ul>
+ <li>Typen werden in <code>.prototype</code> definiert</li>
+ <li><code>Object.create()</code> wird benutzt um zu vererben</li>
+</ul>
+
+<h2 id="prototype_und_Object.getPrototypeOf"><code>prototype</code> und <code>Object.getPrototypeOf</code></h2>
+
+<p>JavaScript kann etwas verwirrend sein für Entwickler, die aus der Java- oder C++ Welt kommen, da es komplett dynamisch ist, alles zur Laufzeit passiert und es keine Klassen hat. Alles dreht sich um Instanzen (Objekte). Sogar die "Klassen", die wir simulieren sind nur Funktions-Objekte.</p>
+
+<p>Wahrscheinlich hast Du bereits erkannt, dass unsere <code>function A</code> eine spezielle Eigenschaft namens <code>prototype</code> hat. Diese spezielle Eigenschaft agiert mit dem JavaScript <code>new </code>operator. Die Referenz des Prototypobjektes wird dabei in die interne <code>[[Prototype]]</code> Eigenschaft der neu erzeugten Instanz kopiert. Wenn man beispielsweise <code>var a1 = new A()</code> ausführt, setzt JavaScript (nachdem das Objekt im Speicher erzeugt und ehe function <code>A()</code> - mit <code>this</code> auf das neue Objekt definiert - ausgeführt wurde) <code>a1.[[Prototype]] = A.prototype</code>. Wenn dann auf Eigenschaften der Instanz zugegriffen wird, prüft JavaScript zuerst, ob diese an der Instanz existieren ehe es in <code>[[Prototype]]</code> danach schaut. Das heisst, das alles, was an der <code>prototype</code> Eigenschaft definiert wird, in allen Instanzen verfügbar ist. Die Eigenschaften in <code>prototype</code> könnten sogar später geändert werden und wären somit in allen existierenden Instanzen geändert.</p>
+
+<p>Wenn man im Beispiel von oben also <code>var a1 = new A(); var a2 = new A();</code> schreibt, dann würde <code>a1.doSomething</code> eigentlich auf <code>Object.getPrototypeOf(a1).doSomething</code> referenzieren, welches identisch ist mit <code>A.prototype.doSomething</code>, das am Anfang definiert wurde. Somit ist: <code>Object.getPrototypeOf(a1).doSomething == Object.getPrototypeOf(a2).doSomething == A.prototype.doSomething</code>.</p>
+
+<p>Kurz gesagt ist <code>prototype</code> für Typen gedacht, während <code>Object.getPrototypeOf()</code> für alle Instanzen das Gleiche ist.</p>
+
+<p><code>[[Prototype]]</code> wird <em>rekursiv</em> durchlaufen, das heisst:<br>
+ <code>a1.doSomething</code>,<br>
+ <code>Object.getPrototypeOf(a1).doSomething</code>, <code>Object.getPrototypeOf(Object.getPrototypeOf(a1)).doSomething</code><br>
+ etc., bis es gefunden wurde oder <code>Object.getPrototypeOf</code> null zurück gibt.</p>
+
+<p>Wenn man also folgendes aufruft:</p>
+
+<pre class="brush: js">var o = new Foo();</pre>
+
+<p>... macht JavaScript eigentlich dies:</p>
+
+<pre class="brush: js">var o = new Object();
+o.[[Prototype]] = Foo.prototype;
+Foo.call(o);</pre>
+
+<p>(oder ähnlich) und wenn man danach Folgendes aufruft:</p>
+
+<pre class="brush: js">o.someProp;</pre>
+
+<p>wird geprüft, ob <code>o</code> eine Eigenschaft namens <code>someProp</code> hat. Falls nicht, wird nach <code>Object.getPrototypeOf(o).someProp</code> gesucht und wenn dies auch nicht existiert, dann in <code>Object.getPrototypeOf(Object.getPrototypeOf(o)).someProp</code> und so weiter.</p>
+
+<div>
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+
+<p>Es ist essentiell das Modell der Prototypischen Vererbung zu verstehen ehe man komplexen Code schreibt, der darauf aufbaut. Man sollte sich außerdem über die Länge der Prototypenkette im Klaren sein und diese ggf. stückeln, um Performance-Problemen vorzubeugen. Außerdem sollten die eingebauten Prototypen niemals erweitert werden, außer es dient der Kompatibilitär mit neueren JavaScript-Features.</p>
+</div>
diff --git a/files/de/web/javascript/introduction_to_object-oriented_javascript/index.html b/files/de/web/javascript/introduction_to_object-oriented_javascript/index.html
new file mode 100644
index 0000000000..c59918ea22
--- /dev/null
+++ b/files/de/web/javascript/introduction_to_object-oriented_javascript/index.html
@@ -0,0 +1,389 @@
+---
+title: Einführung in objektorientiertes JavaScript
+slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript
+tags:
+  - Constructor
+  - Encapsulation
+  - Inheritance
+  - Intermediate
+  - JavaScript
+  - Members
+  - Namespace
+  - OOP
+  - Object
+  - Object-Oriented
+translation_of: Learn/JavaScript/Objects
+---
+<div>{{jsSidebar("Introductory")}}</div>
+
+<p>Im Kern ist JavaScript eine objektorientierte Programmiersprache mit mächtigen und flexiblen Fähigkeiten der {{Glossary("OOP")}}. Dieser Artikel beginnt mit einer Einführung in die objektorientierte Programmierung. Im zweiten Teil wird das Objektmodel von JavaScript erläutert. Danach folgt eine praktische Vorstellung der objektorientierten Programmierung in JavaScript. Dieser Artikel beschreibt nicht die neuere Syntax für {{jsxref("Classes", "objektorientierte Programmierung in ECMAScript 6", "", 1)}}.</p>
+
+<h2 id="JavaScript_Review" name="JavaScript_Review">JavaScript Review</h2>
+
+<p>Wenn Sie nicht mit den Konzepten in JavaScript, wie zum Beispiel Variablen, Typen, Funktionen und Geltungsbereich, vertraut sind, lesen Sie bitte zuerst den Artikel <a href="/de/docs/Web/JavaScript/Eine_Wiedereinfuehrung_in_JavaScript">Eine Wiedereinführung in JavaScript</a>. Sie können ebenfalls auf den <a href="/de/docs/Web/JavaScript/Guide">JavaScript Guide</a> zurückgreifen.</p>
+
+<h2 id="Object-oriented_programming" name="Object-oriented_programming">Objektorientierte Programmierung</h2>
+
+<p>Die objektorientierte Programmierung ist ein Paradigma, in dem über Abstraktion Modelle basierend auf der realen Welt erstellt werden. Es verwendet Techniken, die von zuvor etablierten Paradigmen eingeführt wurden. Darunter befinden sich Modularität, Polymorphismus und Datenkapselung. Heutzutage unterstützen viele populäre Programmiersprachen (z.B.: Java, JavaScript, C#, C++, Python, PHP, Ruby und Objective-C) die objektorientierte Programmierung (OOP).</p>
+
+<p>Objektorientierte Programmierung kann als das Design einer Software unter der Verwendung von kooperierenden Objekten angesehen werden. Die traditionelle Ansicht dagegen sieht ein Programm als eine Menge von Funktionen oder noch einfacher als eine Abfolge von Instruktionen an den Computer. In der OOP kann jedes Objekt Nachrichten empfangen, Daten verarbeiten und Nachrichten an andere Objekte senden. Jedes Objekt kann als eine unabhängige kleine Maschine mit einer bestimmten Rolle oder Verantwortlichkeit angesehen werden.</p>
+
+<p>Die Objektorientierte Programmierung versucht höhere Flexibilität und Wartbarkeit in Programmen zu ermöglichen und wird deshalb oft beim Software Engineering von hochskalierenden Programmen eingesetzt. Durch die starke Konzentration auf Modularität hat objektorientierter Code den Vorteil, dass er einfacher zu entwickeln und zu verstehen ist. Sie konzentriert sich direkter auf die Analyse, die Codierung und das Verstehen von komplexen Situationen und Prozeduren als weniger modulare Programmiermethoden.<a href="#cite-1"><sup>1</sup></a></p>
+
+<h2 id="Terminology" name="Terminology">Begriffsdefinitionen</h2>
+
+<dl>
+ <dt>{{Glossary("Namespace")}}</dt>
+ <dd>Ein Container, der Entwicklern die Bündelung von Funktionalität unter einem eindeutigen, applikationsspezifischen Namen ermöglicht.</dd>
+ <dt>{{Glossary("Klasse")}}</dt>
+ <dd>Definiert die Eigenschaften eines Objekts. Sie ist die Definition einer Vorlage von Variablen und Methoden eines Objekts.</dd>
+ <dt>{{Glossary("Objekt")}}</dt>
+ <dd>Eine Instanz einer Klasse.</dd>
+ <dt>{{Glossary("Eigenschaft")}}</dt>
+ <dd>Eine Eigenschaft eines Objekts, wie zum Beispiel eine Farbe.</dd>
+ <dt>{{Glossary("Methode")}}</dt>
+ <dd>Eine Fähigkeit eines Objekts, wie zum Beispiel laufen. Sie ist eine Unterroutine oder Funktion, die mit der Klasse assoziiert ist.</dd>
+ <dt>{{Glossary("Konstruktor")}}</dt>
+ <dd>Eine spezielle Methode, die zur Instanziierung eines Objekts aufgerufen wird. Sie hat gewöhnlicherweise denselben Namen wie die Klasse, zu der sie gehört.</dd>
+ <dt>{{Glossary("Vererbung")}}</dt>
+ <dd>Eine Klasse kann die Eigenschaften und Fähigkeiten von anderen Klassen erben und somit für sich verwenden.</dd>
+ <dt>{{Glossary("Datenkapselung")}}</dt>
+ <dd>Die Datenkapselung ist eine Technik, um die Daten und die Methoden, die diese Daten verwenden, miteinander zu bündeln.</dd>
+ <dt>{{Glossary("Abstraktion")}}</dt>
+ <dd>Die Verknüpfung von komplexer Vererbung, Methoden und Eigenschaften eines Objekts müssen ein Modell der Realität simulieren können.</dd>
+ <dt>{{Glossary("Polymorphismus")}}</dt>
+ <dd>Poly bedeute "<em>viele</em>"  und Morphismus bedeutet "<em>Formen</em>". Verschiedene Klassen können dieselbe Methode oder dieselbe Eigenschaft definieren.</dd>
+</dl>
+
+<p>Lesen Sie bitte den Artikel {{interwiki("wikipedia", "Objektorientierte Programmierung")}} auf Wikipedia für eine umfassendere Beschreibung der objektorientierten Programmierung.</p>
+
+<h2 id="Prototypenbasierte_Programmierung">Prototypenbasierte Programmierung</h2>
+
+<p>Prototypenbasierte Programmierung ist eine Art der objektorientierten Programmierung bei der keine Klassen gegenwärtig sind. Die Wiederverwendung von Verhalten (bekannt als Vererbung in klassenbasierten Programmiersprachen) wird über das Dekorieren von existierenden Objekten erreicht, die als Prototyp dienen. Dieses Modell wird als klassenlose, prototyporientierte oder instanzorientierte Programmierung bezeichnet.</p>
+
+<p>Das ursprüngliche (und am meisten kanonische) Beispiel einer prototypenbasierten Programmiersprache ist {{interwiki("wikipedia", "Self (Programmiersprache)")}}, welche von David Ungar and Randall Smith entwickelt wurde. Seitdem wurde die klassenlose Programmierung immer mehr populär und wurde für andere Programmiersprachen wie JavaScript, Cecil, NewtonScript, Io, MOO, REBOL, Kevo, Squeak (wenn das Viewer Framework zur Manipulation von Morphic Komponenten verwendet wird) und einige andere adoptiert.<a href="#cite-2"><sup>2</sup></a></p>
+
+<h2 id="JavaScript_Object_Oriented_Programming" name="JavaScript_Object_Oriented_Programming">Objektorientierte Programmierung mit JavaScript</h2>
+
+<h3 id="Namespace">Namespace</h3>
+
+<p>Ein Namespace ist ein Container in dem Entwickler Funktionalitäten unter einem eindeutigen, applikationsspezifischen Namen zusammenfassen können. <strong>In JavaScript ist ein Namespace ein gewöhnliches Objekt, welches Methoden, Eigenschaften und Objekte enthält.</strong></p>
+
+<div class="note">
+<p>Im Gegensatz zu manchen anderen objektorientierten Programmiersprachen gibt es in der Sprachebene von JavaScript keinen Unterschied zwischen einem regulären Objekt und einem Namespace.</p>
+</div>
+
+<p>Die Idee hinter der Erstellung eines Namespaces in JavaScript ist simpel: es wird ein globales Objekt erstellt, welches alle Variablen, Methoden und Funktionen als Eigenschaften besitzt. Zusätzlich kann die Verwendung von Namespaces Namenskonflikten in der Applikation vorbeugen.</p>
+
+<p>Es wird ein globales Objekt names MYAPP erstellt:</p>
+
+<pre class="brush: js">// global namespace
+var MYAPP = MYAPP || {};</pre>
+
+<p>Im obigen Code wird zuerst geprüft, ob MYAPP bereits definiert wurde (entweder in derselben oder einer anderen Datei). Wenn MYAPP bereits definiert wurde, wird das globale Objekt MYAPP verwendet. Anderenfalls wird ein leeres Objekt names MYAPP erstellt, welches später Methoden, Funktionen, Variablen und andere Objekte kapseln kann.</p>
+
+<p>Innerhalb eines Namespaces können weitere Namespaces erstellt werden:</p>
+
+<pre class="brush: js">// sub namespace
+MYAPP.event = {};</pre>
+
+<p>Der folgende Code erstellt einen Namespace und fügt diesem Variablen, Funktionen und Methoden hinzu:</p>
+
+<pre class="brush: js">// Create container called MYAPP.commonMethod for common method and properties
+MYAPP.commonMethod = {
+  regExForName: "", // define regex for name validation
+  regExForPhone: "", // define regex for phone no validation
+  validateName: function(name){
+    // Do something with name, you can access regExForName variable
+    // using "this.regExForName"
+  },
+
+  validatePhoneNo: function(phoneNo){
+    // do something with phone number
+  }
+}
+
+// Object together with the method declarations
+MYAPP.event = {
+    addListener: function(el, type, fn) {
+    //  code stuff
+    },
+   removeListener: function(el, type, fn) {
+    // code stuff
+   },
+   getEvent: function(e) {
+   // code stuff
+   }
+
+   // Can add another method and properties
+}
+
+//Syntax for Using addListner method:
+MYAPP.event.addListener("yourel", "type", callback);</pre>
+
+<h3 id="Core_Objects" name="Core_Objects">Standardmäßig eingebaute Objekte</h3>
+
+<p>JavaScript besitzt verschiedene Objekte im Kern. Darunter befinden sich zum Beispiel die Objekte Math, Object, Array, und String. Das folgende Beispiel zeigt, wie das Math Objekt mit der <code>random()</code> Methode eine Zufallszahl generiert.</p>
+
+<pre class="brush: js">console.log(Math.random());
+</pre>
+
+<div class="note"><strong>Hinweis:</strong> Dieses und folgende Beispiele setzen voraus, dass {{domxref("console.log()")}} global definiert wurde. Die <code>console.log</code> Funktion ist kein eigentlicher Sprachteil von JavaScript, jedoch implementieren viele Browser diese zum Debuggen.</div>
+
+<p>Siehe <a href="/de/docs/Web/JavaScript/Reference/Global_Objects" title="en-US/docs/Web/JavaScript/Reference/Global_Objects">JavaScript Reference: Standard built-in objects</a> für eine List aller Objekte im Kern von JavaScript.</p>
+
+<p>Jedes Objekt in JavaScript ist eine Instanz des Objekts <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a> und erbt somit alle Eigenschaften und Methoden von diesem.</p>
+
+<h3 id="Custom_Objects" name="Custom_Objects">Eigene Objekte</h3>
+
+<h4 id="The_Class" name="The_Class">Die Klasse</h4>
+
+<p>JavaScript ist eine prototypenbasierte Programmiersprache, welche im Gegensatz zu C++ oder Java keine class Anweisung enthält. Dies kann für Programmierer manchmal verwirrend sein, wenn sie normalerweise Programmiersprachen mit einer class Anweisung verwenden. JavaScript verwendet stattdessen Funktionen als Klassen. Die Definition einer Klasse erfolgt analog zu der einer Funktion. Im folgenden Beispiel wird eine neue Klasse namens Person definiert.</p>
+
+<pre class="brush: js">var Person = function(){ }
+</pre>
+
+<h4 id="The_Object_.28Class_Instance.29" name="The_Object_.28Class_Instance.29">Das Objekt (Instanz einer Klasse)</h4>
+
+<p>Um eine neue Instanz eines Objekts <em><code>obj</code></em> zu erstellen, wird die Anweisung <code>new <em>obj</em></code> ausgeführt. Das Ergebnis der Anweisung (welches den Typ <em><code>obj</code></em> hat) wird für eine spätere Verwendung einer Variablen zugewiesen.</p>
+
+<p>Im folgenden Beispiel wird eine Klasse mit dem Namen <code>Person</code> definiert und zwei Objekte (<code>person1</code> and <code>person2</code>) instanziiert.</p>
+
+<pre class="brush: js">var person1 = new Person();
+var person2 = new Person();
+</pre>
+
+<div class="note">Lesen Sie bitte {{jsxref("Object.create()")}} für eine neue, alternative Methode zur Objektinstanziierung.</div>
+
+<h4 id="The_Constructor" name="The_Constructor">Der Konstruktor</h4>
+
+<p>Der Konstruktor wird zum Zeitpunkt der Instanziierung (wenn eine Objektinstanz erstellt wird) aufgerufen. Er ist als eine Methode der Klasse definiert. In JavaScript agiert die Funktion als Konstruktor für das Objekt. Somit muss keine Methode explizit für den Konstruktor definiert werden. Jede deklarierte Anweisung in der Klasse wird zum Zeitpunkt der Instanziierung ausgeführt.</p>
+
+<p>Der Konstruktor wird zur Initialisierung der Eigenschaften oder vorbereitende Methodenaufrufe zur Verwendung des Objekts verwendet. Das Hinzufügen von Klassenmethoden und deren Definitionen verwendet eine andere Syntax, welche später im Artikel erläutert wird.</p>
+
+<p>Im folgenden Beispiel loggt der Konstruktor der Klasse <code>Person</code> eine Nachricht, wenn ein <code>Person</code> Objekt instanziiert wird.</p>
+
+<pre class="brush: js">function Person() {
+  console.log('Instanz erstellt');
+}
+
+var person1 = new Person();
+var person2 = new Person();
+</pre>
+
+<h4 id="The_Property_.28object_attribute.29" name="The_Property_.28object_attribute.29">Die Eigenschaft (Objektattribut)</h4>
+
+<p>Eigenschaften sind Variablen innerhalb einer Klasse. Jede Instanz des Objekts besitzt diese Eigenschaften. Eigenschaften sollten im Prototyp der Eigenschaft in der Klasse (Funktion) gesetzt werden, damit die Vererbung korrekt funktioniert.</p>
+
+<p>Eigenschaften können innerhalb eines Objekts mit dem Schlüsselwort <code>this</code>, welches das aktuelle Objekt referenziert, verwendet werden. Der Zugriff (lesen oder schreiben) auf eine Eigenschaft von außerhalb der Klasse wird durch die Syntax <code>InstanceName.Property</code> ermöglicht. Diese Syntax ist analog zu C++, Java und zahlreichen anderen Programmiersprachen. Innerhalb der Klasse wird die Syntax <code>this.Property</code> zum Lesen oder Schreiben des Werts verwendet.</p>
+
+<p>Im folgenden Beispiel wird die Eigenschaft <code>firstName</code> für die <code>Person</code> Klasse definiert. Bei der Instanziierung wird ihr ein Wert zugewiesen.</p>
+
+<pre class="brush: js">function Person(firstName) {
+  this.firstName = firstName;
+  console.log('Person instantiated');
+}
+
+var person1 = new Person('Alice');
+var person2 = new Person('Bob');
+
+// Zeigt die Eigenschaft firstName des Objektes
+console.log('person1 is ' + person1.firstName); // logs "person1 is Alice"
+console.log('person2 is ' + person2.firstName); // logs "person2 is Bob"
+</pre>
+
+<h4 id="The_methods" name="The_methods">Die Methoden</h4>
+
+<p>Methoden befolgen beinahe dieselbe Logik wie Eigenschaften mit dem Unterschied, dass sie Funktionen sind und deshalb als Funktionen definiert werden. Der Aufruf einer Funktion erfolgt analog zu Eigenschaften gefolgt von <code>()</code> am Ende des Methodennames. Innerhalb der Klammern können der Methode Argumente übergeben werden. Um eine Methode zu definieren, muss eine Funktion einer benannten Eigenschaft der <code>prototype</code> Eigenschaft der Klasse zugewiesen werden. Der Name der benannten Eigenschaft dient nun als Methodenname über den die Methode auf dem Objekt aufgerufen werden kann.</p>
+
+<p>Im folgenden Beispiel wird die Methode <code>sayHello()</code> für die <code>Person</code> Klasse definiert.</p>
+
+<pre class="brush: js">function Person(firstName) {
+  this.firstName = firstName;
+}
+
+Person.prototype.sayHello = function() {
+  console.log("Hello, I'm " + this.firstName);
+};
+
+var person1 = new Person("Alice");
+var person2 = new Person("Bob");
+
+// Aufrufen der Methode sayHello der Person.
+person1.sayHello(); // logs "Hello, I'm Alice"
+person2.sayHello(); // logs "Hello, I'm Bob"
+</pre>
+
+<p>Methoden in JavaScript sind gewöhnliche Funktionsobjekte, die als eine Eigenschaft an ein Objekt gebunden werden. Dadurch können Methoden auch "außerhalb des Kontexts" aufgerufen werden. Das folgende Beispiel veranschaulicht dies:</p>
+
+<pre class="brush: js">function Person(firstName) {
+  this.firstName = firstName;
+}
+
+Person.prototype.sayHello = function() {
+  console.log("Hello, I'm " + this.firstName);
+};
+
+var person1 = new Person("Alice");
+var person2 = new Person("Bob");
+var helloFunction = person1.sayHello;
+
+// logs "Hello, I'm Alice"
+person1.sayHello();
+
+// logs "Hello, I'm Bob"
+person2.sayHello();
+
+// logs "Hello, I'm undefined" (oder schlägt
+// mit einem TypeError im strict mode fehl)
+helloFunction();
+
+// logs true
+console.log(helloFunction === person1.sayHello);
+
+// logs true
+console.log(helloFunction === Person.prototype.sayHello);
+
+// logs "Hello, I'm Alice"
+helloFunction.call(person1);</pre>
+
+<p>Das Beispiel zeigt, dass alle Referenzen zur <code>sayHello</code> Funktion — die auf <code>person1</code>, auf <code>Person.prototype</code>, in der <code>helloFunction</code> Variable, etc. — <em>dieselbe Funktion</em> referenzieren. Der Wert von <code>this</code> während eines Funktionsaufrufs hängt von der Art ab, wie die Funktion aufgerufen wird. In allgemeinen Fällen, wenn die Funktion in einem Ausdruck  über die Eigenschaft aufgerufen wird — <code>person1.sayHello()</code> — referenziert <code>this</code> das Objekt, auf der die Funktion aufgerufen wird (<code>person1</code>). Deshalb verwendet <code>person1.sayHello()</code> den Namen "Alice" und <code>person2.sayHello()</code> den Namen "Bob". Wenn die Funktion über andere Arten aufgerufen wird, ist <code>this</code> unterschiedlich definiert: Der Aufruf von der Variablen aus — <code>helloFunction()</code> — setzt <code>this</code> auf das globale Objekt (<code>window</code>, in Webbbrowsern). Da dieses Objekt (wahrscheinlich) keine <code>firstName</code> Eigenschaft besitzt, gitb die Funktion "Hello, I'm undefined" aus. (Dieses Ergebnis wird im Loose Mode produziert. Im <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode" title="/en/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">Strict Mode</a> verhält sich die Funktion anders und es könnte ein Fehler ausgelöst werden. Um Verwirrungen zu vermeiden wird dies nicht weiter im Detail besprochen) <code>this</code> kann auch explizit über <code>Function#call</code> (oder <code>Function#apply</code>) definiert werden. Die geschieht in der letzten Zeile des obigen Beispiels.</p>
+
+<div class="note"><strong>Hinweis:</strong> Mehr über <code>this</code> können Sie unter <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/call">Function#call</a> und <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/apply">Function#apply</a> finden.</div>
+
+<h4 id="Inheritance" name="Inheritance">Vererbung</h4>
+
+<p>Vererbung ist eine Methode, um eine Klasse zu erstellen, die eine spezialisierte Version von einer (Einfachvererbung) oder mehrerer (Mehrfachvererbung) Klassen ist (<em>JavaScript unterstützt nur Einfachvererbung</em>). Die spezialisierte Klasse wird normalerweise als <em>child</em> bezeichnet. Die Klasse, von der geerbt wird, wird als <em>parent</em> bezeichnet. Vererbung in JavaScript funktioniert indem eine Instanz der <em>parent</em> Klasse der <em>child</em> Klasse zugewiesen und dann spezialisiert wird. In modernen Webbrowsern kann die Vererbung auch mittels der Verwendung von <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create#Classical_inheritance_with_Object.create" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/create#Classical_inheritance_with_Object.create">Object.create</a> implementiert werden.</p>
+
+<div class="note"><strong>Hinweis:</strong> JavaScript erkennt den Konstruktor <code>prototype.constructor</code> (siehe <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype">Object.prototype</a>) der child Klasse nicht. Er muss manuell angegeben werden. Sehe dazu zusätzlich den Beitrag "<a href="https://stackoverflow.com/questions/8453887/why-is-it-necessary-to-set-the-prototype-constructor">Why is it necessary to set the prototype constructor?</a>" (englisch) auf Stackoverflow an.</div>
+
+<p>Im folgenden Beispiel wird die Klasse <code>Student</code> als <em>child</em> Klasse von <code>Person</code> definiert. Dann wird die Methode <code>sayHello()</code> neu definiert und die Methode <code>sayGoodBye()</code> zur Klasse <code>Person</code> hinzugefügt.</p>
+
+<pre class="brush: js">// Definiert den Person Konstruktor
+function Person(firstName) {
+  this.firstName = firstName;
+}
+
+// Fügt Methoden zum Person.prototype hinzu
+Person.prototype.walk = function(){
+  console.log("I am walking!");
+};
+Person.prototype.sayHello = function(){
+  console.log("Hello, I'm " + this.firstName);
+};
+
+// Definiert den Student Konstruktor
+function Student(firstName, subject) {
+  // Call the parent constructor, making sure (using Function#call)
+  // that "this" is set correctly during the call
+  Person.call(this, firstName);
+
+  // Initialize our Student-specific properties
+  this.subject = subject;
+};
+
+// Erstellt ein Student.prototype Objekt das von Person.prototype erbt.
+// Hinweis: Ein häufiger Fehler ist der Einsatz von "new Person()" beim erstellen vomeines
+// Student.prototype. Das ist falsch aus einigen Gründen, nicht nur
+// das wir keinen Parameter der Person für "firstName" mitgeben können.
+// Der korrekte Ort für den Aufruf von Person ist oben, wo wir es
+// von Student aufrufen.
+Student.prototype = Object.create(Person.prototype); // See note below
+
+// Setzt die "constructor" Eigenschaft um auf Student zu referenzieren.
+Student.prototype.constructor = Student;
+
+// Ersetzt die "sayHello" Methode
+Student.prototype.sayHello = function(){
+  console.log("Hello, I'm " + this.firstName + ". I'm studying "
+              + this.subject + ".");
+};
+
+// Fügt die "sayGoodBye" Methode hinzu
+Student.prototype.sayGoodBye = function(){
+  console.log("Goodbye!");
+};
+
+// Beispieleinsatz:
+var student1 = new Student("Janet", "Applied Physics");
+student1.sayHello();   // "Hello, I'm Janet. I'm studying Applied Physics."
+student1.walk();       // "I am walking!"
+student1.sayGoodBye(); // "Goodbye!"
+
+// Check that instanceof works correctly
+console.log(student1 instanceof Person);  // true
+console.log(student1 instanceof Student); // true
+</pre>
+
+<p>Unter Betrachtung der Zeile <code>Student.prototype = Object.create(Person.prototype);</code>: In älteren JavaScript Engines ohne <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create" title="Object.create"><code>Object.create</code></a>, kann ein "polyfill" (auch "shim", siehe den verlinkten Artikel) oder eine Funktion, die dasselbe Ergebnis erzielt, verwendet werden:</p>
+
+<pre class="brush: js">function createObject(proto) {
+    function ctor() { }
+    ctor.prototype = proto;
+    return new ctor();
+}
+
+// Einsatz:
+Student.prototype = createObject(Person.prototype);
+</pre>
+
+<div class="note">Lesen Sie <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create" title="Object.create">Object.create</a>, um mehr zum obigen Beispiel zu erfahren.</div>
+
+<p>Stellen sie sicher, dass <code>this</code> zum richtigen Objekt referenziert unabhängig davon, wie das Objekt erstellt wird. Es gibt eine einfache Methode dieses sicherzustellen:</p>
+
+<pre>var Person = function(firstName) {
+  if (this instanceof Person) {
+    this.firstName = firstName
+  } else {
+    return new Person(firstName)
+  }
+}</pre>
+
+<h4 id="Encapsulation" name="Encapsulation">Datenkapselung</h4>
+
+<p>Im obigen Beispiel muss die <code>Student</code> Klasse nicht wissen, wie die Methode <code>walk()</code> der <code>Person</code> Klasse implementiert ist, um sie verwenden zu können. Die <code>Student</code> Klasse muss die Methode nicht explizit definierten, solange Sie unverändert übernommen werden soll. Dabei handelt es sich um <strong>Datenkapselung</strong>, bei der jede Klasse ihre Daten und Methoden in einer Einheit bündeln.</p>
+
+<p>Information Hiding ist ein gängiges Feature in anderen Programmiersprachen, bei dem Methoden und Eigenschaften als privat oder geschützt definierten werden können. Obwohl Information Hiding mit JavaScript realisiert werden kann, ist es keine Voraussetzung für objektorientierte Programmierung.<a href="#cite-3"><sup>3</sup></a></p>
+
+<h4 id="Abstraction" name="Abstraction">Abstraktion</h4>
+
+<p>Abstraktion ist ein Mechanismus, der die Modellierung eines Teils der Problemstellung erlaubt. Dazu kann Vererbung (Spezialisierung) oder Komposition eingesetzt werden. JavaScript ermöglicht die Spezialisierung mit Vererbung. Komposition wird realiseirt, indem Instanzen einer Klasse als Werte von Eigenschaften eines Objekts gesetzt werden.</p>
+
+<p>Die Function Klasse in JavaScript erbt von der Object Klasse (Spezialisierung). Die <code>Function.prototype</code> Eigenschaft ist eine Instanz der Object Klasse (Komposition).</p>
+
+<pre class="brush: js">var foo = function(){};
+
+// logs "foo is a Function: true"
+console.log('foo is a Function: ' + (foo instanceof Function));
+
+// logs "foo.prototype is an Object: true"
+console.log('foo.prototype is an Object: ' + (foo.prototype instanceof Object));</pre>
+
+<h4 id="Polymorphism" name="Polymorphism">Polymorphismus</h4>
+
+<p>Wie alle Methoden und Eigenschaften innerhalb der <code>prototype</code> Eigenschaft definiert werden, können unterschiedliche Klassen Methoden mit demselben Namen definieren. Methoden sind im Scope der Klasse, in der sie definiert sind, verfügbar. Das gilt solange die Klassen keine parent-child Beziehung besitzen (wenn die eine Klasse nicht innerhalb einer Kette von der anderen Klasse erbt).</p>
+
+<h2 id="Anmerkungen">Anmerkungen</h2>
+
+<p>Die im Artikel präsentierten Techniken umfassen nicht alle Möglichkeiten der objektorientierten Programmierung in JavaScript, da JavaScript sehr flexibel in der Umsetzung der objektorientierten Programmierung ist.</p>
+
+<p>Die vorgestellten Techniken zeigen nicht alle verfügbaren Hacks in JavaScript und mimen nicht die Implementierung der Objektorientiertheit in anderen Programmiersprachen.</p>
+
+<p>Es gibt weitere Techniken, welche eine fortgeschrittenere objektorientierte Programmierung in JavaScript ermöglichen. Diese gehen aber über den Umfang dieses einführenden Artikels hinaus.</p>
+
+<h2 id="References" name="References">Referenzen</h2>
+
+<ol>
+ <li><a name="cite-1"></a>Wikipedia. "<a href="https://en.wikipedia.org/wiki/Object-oriented_programming">Object-oriented programming</a>" und "<a href="https://de.wikipedia.org/wiki/Objektorientierte_Programmierung">Objektorientierte Programmierung</a>"</li>
+ <li><a name="cite-2"></a>Wikipedia. "<a href="https://en.wikipedia.org/wiki/Prototype-based_programming" id="cite-2">Prototype-based programming</a>" und "<a href="https://de.wikipedia.org/wiki/Prototypenbasierte_Programmierung">Prototypenbasierte Programmierung</a>"</li>
+ <li><a name="cite-3"></a>Wikipedia. "<a href="https://en.wikipedia.org/wiki/Encapsulation_%28object-oriented_programming%29">Encapsulation (object-oriented programming)</a>" und "<a href="https://de.wikipedia.org/wiki/Datenkapselung_%28Programmierung%29">Datenkapselung (Programmierung)</a>"</li>
+</ol>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Function.prototype.call()")}}</li>
+ <li>{{jsxref("Function.prototype.apply()")}}</li>
+ <li>{{jsxref("Object.create()")}}</li>
+ <li>{{jsxref("Strict_mode", "Strict mode")}}</li>
+</ul>
diff --git a/files/de/web/javascript/javascript_technologieuebersicht/index.html b/files/de/web/javascript/javascript_technologieuebersicht/index.html
new file mode 100644
index 0000000000..ae24cb1ca3
--- /dev/null
+++ b/files/de/web/javascript/javascript_technologieuebersicht/index.html
@@ -0,0 +1,87 @@
+---
+title: JavaScript Technologieübersicht
+slug: Web/JavaScript/JavaScript_technologieuebersicht
+translation_of: Web/JavaScript/JavaScript_technologies_overview
+---
+<div>{{JsSidebar("Introductory")}}</div>
+
+<h2 id="Einleitung">Einleitung</h2>
+
+<p>Während <a href="/en-US/docs/Web/HTML">HTML</a> die Struktur einer Webseite definiert und <a href="/en-US/docs/Web/CSS">CSS</a> den Style angibt, mit dem der Inhalt der Webseite dargestellt wird, ermöglicht <a href="/en-US/docs/Web/JavaScript">JavaScript</a> das Erstellen von interaktiven Webseiten und Rich Web Applications.</p>
+
+<p>Der Begriff "JavaScript" umfasst im Kontext von Web-Browsern mehrere Elemente. Darunter befinden sich der Sprachkern (ECMAScript) und einige <a href="/en-US/docs/Web/Reference/API">Web APIs</a>, die auch das DOM (Document Object Model) enthalten.</p>
+
+<h2 id="Sprachkern_von_JavaScript_(ECMAScript)">Sprachkern von JavaScript (ECMAScript)</h2>
+
+<p>Der Sprachkern von JavaScript wurde vom ECMA TC39 Kommittee als die Sprache <a href="/en-US/docs/JavaScript/Language_Resources" title="en-US/docs/JavaScript/Language_Resources">ECMAScript</a> standardisiert. Die aktuellste Version der Spezifikation ist <a class="external" href="http://ecma-international.org/ecma-262/5.1/">ECMAScript 5.1</a>.</p>
+
+<p>Der Sprachkern wird auch in Umgebungen außerhalb von Webbrowsern eingesetzt, wie zum Beispiel in <a href="http://nodejs.org/">node.js</a>.</p>
+
+<h3 id="Was_gehört_alles_zu_ECMAScript">Was gehört alles zu ECMAScript?</h3>
+
+<p>Neben anderen Dingen definiert ECMAScript folgende Punkte:</p>
+
+<ul>
+ <li>Die Sprachsyntax (Regeln zum Parsen, Schlüsselwörter, Kontrollfluss, Objektinitialisierung...)</li>
+ <li>Mechanismen zur Fehlerbehandlung (throw, try/catch, Erstellung von benutzerdefinierten Fehlertypen)</li>
+ <li>Typen (boolean, number, string, function, object...)</li>
+ <li>Das globale Objekt. In Webbrowsern ist dies das window Objekt. ECMAScript definiert hierbei nur die APIs, die nicht browserspezifisch sind. z.B.: <code>parseInt</code>, <code>parseFloat</code>, <code>decodeURI</code>, <code>encodeURI</code>...</li>
+ <li>Vererbungsmechanismus basierend auf Prototypen</li>
+ <li>Eingebaute Objekte und Funktionen (<code>JSON</code>, <code>Math</code>, <code>Array.prototype</code> Methoden, Object introspection methods...)</li>
+ <li>Strict mode</li>
+</ul>
+
+<h3 id="Webbrowserunterstützung">Webbrowserunterstützung</h3>
+
+<p>Im August 2014 implementierten die aktuellen Versionen der verbreitesten Webbrowser <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla">ECMAScript 5.1</a>. Es sind aber noch ältere Versionen in Verwendung, welche ECMAScript 3 und nur Teile von ECMAScript 5 implementieren. Moderne Webbrowsers implementieren bereits große Teile von <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla">ECMAScript 6</a>.</p>
+
+<h3 id="Zukunft">Zukunft</h3>
+
+<p>Die vorgeschlagene vierte Version von ECMA-262 (<strong>ECMAScript 4</strong> oder <strong>ES4</strong>) hätte das erste große Update von ECMAScript seit der dritten Version, welche in 1999 veröffentlicht wurde, sein sollen. Im August 2008 wurde der Vorschlag zur vierten Version von ECMAScript  unter dem Projekt <a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:harmony">ECMAScript Harmony</a> reduziert, welches zum Beispiel Proxies oder das <code>const</code> Schlüsselwort definiert. Der Fortschirtt kann <a class="external" href="http://wiki.ecmascript.org/doku.php">hier</a> verfolgt werden. Die Veröffentlichung der sechsten Hauptversion des Standards wird im Jahr 2015 erwartet.</p>
+
+<h2 id="Internationalization_API">Internationalization API</h2>
+
+<p>Die <a href="http://ecma-international.org/ecma-402/1.0/" title="http://ecma-international.org/ecma-402/1.0/">ECMAScript Internationalization API Specification</a> ist eine Erweiterung zur ECMAScript Sprachspezifikation, welche vom Ecma TC39 Kommittee standardisiert wird. Die Internationalization API bietet Textvergleiche (string Vergleiche), Formatierung von Zahlen, Datum und Zeit für JavaScript Applikationen, und lässt Applikationen die Sprache wählen, um die Funktionalität für die eigenen Bedürfnisse anpassen zu können. Der Standard wurde im Dezember 2012 freigegeben. Der Status über die Implementierung in Webbrowsern ist in der Documentation von <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Intl" title="/en-US/docs/JavaScript/Reference/Global_Objects/Intl"><code>Intl</code> object</a> aufgezeichnet.</p>
+
+<h2 id="Die_Web_APIs_und_der_DOM">Die Web APIs und der DOM</h2>
+
+<h3 id="WebIDL">WebIDL</h3>
+
+<p>Die <a class="external" href="http://www.w3.org/TR/WebIDL/" title="http://dev.w3.org/2006/webapi/WebIDL/">WebIDL specification</a> verbindet die DOM Technologien und ECMAScript miteinander.</p>
+
+<h3 id="Der_Kern_des_DOM">Der Kern des DOM</h3>
+
+<p>Das Document Object Model (DOM) ist eine plattform- und <strong>sprachunabhängige Konvention</strong> zur Repräsentation und Interaktion mit Objekten in HTML, XHTML und XML Dokumenten. Objekte im <strong>DOM Baum</strong> können über Methoden angesprochen und durch Aufrufen ihrer Methoden verändert werden. Das Core Document Object Model ist von der W3C standardisiert worden. Es definiert sprachspezifische Schnittstellen, welche HTML und XML Dokuments als Objekte abstrahieren und Mechanismen zur Manipulation dieser Abstraktion. Zusätzlich definiert der DOM auch:</p>
+
+<ul>
+ <li>Die Dokumentstruktur, ein Baummodell, und die DOM Event Architektur im <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html" title="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html">DOM core</a>: <code>Node</code>, <code>Element</code>, <code>DocumentFragment</code>, <code>Document</code>, <code>DOMImplementation</code>, <code>Event</code>, <code>EventTarget</code>, …</li>
+ <li>Eine weniger strenge Definition der DOM Event Architektur und spezifische Events im <a class="external" href="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html" title="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html">DOM events</a>.</li>
+ <li>Andere Definitionen wie zum Beispiel <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html">DOM Traversal</a> und <a class="external" href="http://html5.org/specs/dom-range.html" title="http://html5.org/specs/dom-range.html">DOM Range</a>.</li>
+</ul>
+
+<p>Aus der Sicht von ECMAScript werden Objekte, die in der DOM Spezifikation definiert sind,  "host objects" genannt.</p>
+
+<h3 id="HTML_DOM">HTML DOM</h3>
+
+<p><a class="external" href="http://www.whatwg.org/html" title="http://www.whatwg.org/html">HTML</a>, die Markup-Sprache im Web, ist mit Bezug auf den DOM definiert. HTML liegt eine Schicht über den abstrakten Konzepten vom DOM Kern und definiert zusätzlich die <em>Bedeutung</em> von Elementen. Der HTML DOM beinhaltet zum Beispiel die <code>className</code> Eigenschaft von HTML Elementen oder APIs wie {{ domxref("document.body") }}.</p>
+
+<p>Die HTML Spezifikation definiert auch Einschränkungen auf Documenten. So müssen zum Beispiel die direkten Kindelemente der ungeordneten Liste <code>ul</code> alle <code>li</code> Elemente sein, welche die Listeneinträge repräsentieren. Im Allgemeinen verbietet die Spezifikation auch die Verwendung von Elementen und Attributen, die nicht im Standard definiert sind.</p>
+
+<p>Suchen Sie nach dem <a href="/en-US/docs/DOM/document" title="https://developer.mozilla.org/en-US/docs/DOM/document"><code>Document</code> Objekt</a>, <a href="/en-US/docs/DOM/window" title="/en-US/docs/DOM/window"><code>Window</code> Objekt</a>, oder anderen DOM Elementen? Besuchen Sie die <a href="/en-US/docs/Web/API/Document_Object_Model" title="/en-US/docs/Gecko_DOM_Reference">DOM Dokumentation</a>.</p>
+
+<h3 id="Andere_APIs">Andere APIs</h3>
+
+<ul>
+ <li>Die <code>setTimeout</code> und die <code>setInterval</code> Funktionen wurden zuerst auf dem <code><a class="external" href="http://www.whatwg.org/html/#window" title="http://www.whatwg.org/html/#window">Window</a></code> interface im HTML Standard definiert.</li>
+ <li><a class="external" href="https://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html" title="http://dev.w3.org/2006/webapi/XMLHttpRequest-2/">XMLHttpRequest.</a> API die das Senden von asynchronen HTTP Request ermöglicht.</li>
+ <li><a class="external" href="http://dev.w3.org/csswg/cssom/">CSS Object Model.</a> Das CSSOM wird zur Abstraktion von CSS Regeln als Objekte verwendet.</li>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-workers/current-work/">WebWorkers.</a> API die die Verwendung von paralleler Verarbeitung ermöglicht.</li>
+ <li><a class="external" href="http://www.whatwg.org/C/#network">WebSockets.</a> API die eine low-level bidirektionale Kommunikation ermöglicht.</li>
+ <li><a class="external" href="http://www.whatwg.org/html/#2dcontext" title="http://www.whatwg.org/html/#2dcontext">Canvas 2D Context.</a> Grafik API für das canvas Element.</li>
+</ul>
+
+<h3 id="Webbrowserunterstützung_2">Webbrowserunterstützung</h3>
+
+<p>Jeder Webbrowser muss erfahren, dass <a class="external" href="http://ejohn.org/blog/the-dom-is-a-mess/">der DOM ein Chaos</a> ist. Die Einheitlichkeit der Webbrowserunterstützung variiert teilweise stark von Feature zu Feature. Die Ursache dafür ist, dass viele der wichtigen DOM Features kaum oder unklare Spezifikationen hatten. Zusätzlich implementieren verschiedene Webbrowser eigene inkompatible Features für überlappende Einsatzszenarien (wie das Event Model vom Internet Explorer). Der aktuelle Trend (Stand Juni 2011) ist, das die W3C und teilweise die WHATWG ältere Features detaillierter definieren, damit die Interoperabilität verbessert werden kann. Diesem Trend folgend verbessern Webbbrowser ihre Implementierungen basierend auf den detaillierten Spezifikationen.</p>
+
+<p>Eine allgemeine aber möglicherweise nicht vollkommen zuverlässiger Ansatz für cross-browser Kompatibilität ist der Einsatz einer JavaScript Bibliothek. Diese Bibliotheken abstrahieren DOM Features und gewährleisten den APIs, dass sie in verschiedenen Webbrowsern einheitlich funktionieren. Einige der meistverbreitesten Frameworks sind <a class="external" href="http://jquery.com/">jQuery</a>, <a class="external" href="http://www.prototypejs.org/">prototype</a>, und <a class="external" href="http://developer.yahoo.com/yui/">YUI</a>.</p>
diff --git a/files/de/web/javascript/language_resources/index.html b/files/de/web/javascript/language_resources/index.html
new file mode 100644
index 0000000000..9e5ef20b13
--- /dev/null
+++ b/files/de/web/javascript/language_resources/index.html
@@ -0,0 +1,142 @@
+---
+title: JavaScript Sprachressourcen
+slug: Web/JavaScript/Language_Resources
+tags:
+  - Advanced
+  - JavaScript
+translation_of: Web/JavaScript/Language_Resources
+---
+<div>{{JsSidebar()}}</div>
+
+<p><strong>ECMAScript</strong> ist eine Skriptsprache, auf dessen Form <a href="/en-US/docs/JavaScript">JavaScript</a> basiert. ECMAScript ist durch die <a href="http://www.ecma-international.org/" title="http://www.ecma-international.org/">Ecma International</a> standarisiert und entspricht den <strong>ECMA-262 und ECMA-402 Spezifikationen</strong>. Die folgende ECMAScript Standards wurden genehmigt oder werden gerade bearbeitet:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Name</th>
+   <th>Links</th>
+   <th>Datum</th>
+   <th>Beschreibung</th>
+  </tr>
+  <tr>
+   <th colspan="4">Aktuelle Editionen</th>
+  </tr>
+  <tr>
+   <td>ECMA-262 9. Edition</td>
+   <td><a href="https://tc39.github.io/ecma262/">Arbeitsentwurf</a>, <a href="https://github.com/tc39/ecma262">Repository</a></td>
+   <td>2018</td>
+   <td>ECMAScript 2018 Sprachspezifikation</td>
+  </tr>
+  <tr>
+   <td>ECMA-402 5. Edition</td>
+   <td><a href="https://tc39.github.io/ecma402/">Arbeitsentwurf</a>, <a href="https://github.com/tc39/ecma402">Repository</a></td>
+   <td>2018</td>
+   <td>ECMAScript 2018 Internationalisierungs API Spezifikation</td>
+  </tr>
+  <tr>
+   <th colspan="4">Veraltete/Historische Editionen</th>
+  </tr>
+  <tr>
+   <td>ECMA-262</td>
+   <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%201st%20edition,%20June%201997.pdf">PDF</a></td>
+   <td>Juni 1997</td>
+   <td>ECMAScript: Eine universelle plattformübergreifende Programmiersprache. Das war die erste Version des ECMAScript Standards</td>
+  </tr>
+  <tr>
+   <td>ECMA-262 2. Edition</td>
+   <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%202nd%20edition,%20August%201998.pdf">PDF</a></td>
+   <td>August 1998</td>
+   <td>ECMAScript Sprachspezifikation. Dieses ist die zweite die zweite Überarbeitung des ECMAScript Standards; auch ISO Standard 16262.</td>
+  </tr>
+  <tr>
+   <td>ECMA-262 3. Edition</td>
+   <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%203rd%20edition,%20December%201999.pdf">PDF</a></td>
+   <td>Dezember 1999</td>
+   <td>ECMAScript Sprachspezifikation. Dieses ist die dritte Überarbeitung des ECMAScript Standards; entspricht JavaScript 1.5. Siehe auch die <a href="http://www.mozilla.org/js/language/E262-3-errata.html">Fehlerkorrekturen</a></td>
+  </tr>
+  <tr>
+   <td>ECMA-262 5. Edition</td>
+   <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262%205th%20edition%20December%202009.pdf">PDF</a></td>
+   <td>Dezember 2009</td>
+   <td>ECMAScript Sprachspezifikation. Dieses ist die fünfte Überarbeitung des ECMAScript Standards; Siehe auch die <a href="http://wiki.ecmascript.org/doku.php?id=es3.1:es3.1_proposal_working_draft">ES5 Fehlerkorrekturen</a> und <a href="https://developer.mozilla.org/en-US/docs/JavaScript/ECMAScript_5_support_in_Mozilla" title="JavaScript/ECMAScript 5 support in Mozilla">ECMAScript 5 Unterstützung in Mozilla</a></td>
+  </tr>
+  <tr>
+   <td>ECMA-357</td>
+   <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST-WITHDRAWN/ECMA-357,%201st%20edition,%20June%202004.pdf">PDF</a></td>
+   <td>Juni 2004</td>
+   <td><a href="https://developer.mozilla.org/en-US/docs/E4X" title="E4X">ECMAScript für XML (E4X)</a>.<br>
+    Siehe auch die <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=169406">E4X Fehlerkorrekturen</a>.</td>
+  </tr>
+  <tr>
+   <td>ECMA-262 5.1 Edition</td>
+   <td><a href="http://www.ecma-international.org/ecma-262/5.1/Ecma-262.pdf">PDF</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/">HTML</a></td>
+   <td>Juni 2011</td>
+   <td>Diese Version ist voll auf den 3. Edition Internationalen Standard <a href="http://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=55755">ISO/IEC 16262:2011</a> ausgerichtet.<br>
+    Sie enthält ES5 Fehlerkorrekturen, keine neuen Funktionen.</td>
+  </tr>
+  <tr>
+   <td>ECMA-402 1. Edition</td>
+   <td><a href="http://ecma-international.org/ecma-402/1.0/ECMA-402.pdf">PDF</a>, <a href="http://ecma-international.org/ecma-402/1.0/index.html">HTML</a></td>
+   <td>Dezember 2012</td>
+   <td>ECMAScript Internationalisierungs API Spezifikation</td>
+  </tr>
+  <tr>
+   <td>ECMA-262 6. Edition</td>
+   <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf">PDF</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/index.html">HTML</a></td>
+   <td>Juni 2015</td>
+   <td>ECMAScript 2015 Sprachspezifikation</td>
+  </tr>
+  <tr>
+   <td>ECMA-402 2. Edition</td>
+   <td><a href="http://www.ecma-international.org/ecma-402/2.0/ECMA-402.pdf">PDF</a></td>
+   <td>Juni 2015</td>
+   <td>ECMAScript 2015 Internationalisierungs API Spezifikation</td>
+  </tr>
+  <tr>
+   <td>ECMA-262 7. Edition</td>
+   <td><a href="http://www.ecma-international.org/ecma-262/7.0/">HTML</a></td>
+   <td>Juni 2016</td>
+   <td>ECMAScript 2016 Sprachspezifikation</td>
+  </tr>
+  <tr>
+   <td>ECMA-402 3. Edition</td>
+   <td><a href="http://www.ecma-international.org/ecma-402/3.0/">HTML</a></td>
+   <td>Juni 2016</td>
+   <td>ECMAScript 2016 Internationalisierungs API Spezifikation</td>
+  </tr>
+  <tr>
+   <td>ECMA-262 8. Edition</td>
+   <td><a href="http://www.ecma-international.org/ecma-262/8.0/">HTML</a></td>
+   <td>Juni 2017</td>
+   <td>ECMAScript 2017 Sprachspezifikation</td>
+  </tr>
+  <tr>
+   <td>ECMA-402 4. Edition</td>
+   <td><a href="http://www.ecma-international.org/ecma-402/4.0/">HTML</a></td>
+   <td>Juni 2017</td>
+   <td>ECMAScript 2017 Internationalisierungs API Spezifikation</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><strong>ES.Next</strong> ist ein dynamischer Name für alles, was in der nächsten Version geschrieben werden soll. ES.Next Funktionen sind normalerweise Vorschläge, weil, laut Definition, die Spezifikation noch nicht fertig ist.</p>
+
+<p>Siehe <a href="https://de.wikipedia.org/wiki/JavaScript" title="http://en.wikipedia.org/wiki/ECMAScript">Wikipedia ECMAScript Eintrag </a>für weitere Informationen zur ECMAScript Geschichte.</p>
+
+<p>Man kann an den nächsten Überarbeitungen der ECMAScript Sprachspezifikation, mit dem Codenamen "Harmony", teilnehmen oder verfolgen und die Internationalisierungs API Spezifikation via öffentlichem wiki und der <a class="link-https" href="https://mail.mozilla.org/listinfo/es-discuss" title="https://mail.mozilla.org/listinfo/es-discuss">es-discuss mailing Liste</a> verknüpft mit <a href="http://www.ecmascript.org/community.php" title="http://www.ecmascript.org/community.php">ecmascript.org</a>.</p>
+
+<h2 id="Implementierungen">Implementierungen</h2>
+
+<ul>
+ <li><a href="/en-US/docs/SpiderMonkey" title="SpiderMonkey">SpiderMonkey</a> - die JavaScript Engine, die in verschiedenen Mozilla Produkten, wie Firefox, verwendet wird;</li>
+ <li><a href="/en-US/docs/Rhino" title="Rhino">Rhino</a> - die JavaScript engine geschrieben in Java;</li>
+ <li><a href="/en-US/docs/Tamarin" title="Tamarin">Tamarin</a> - die ActionScript virtuelle Maschine (verwendet im Adobe® Flash® Player);</li>
+ <li><a href="http://en.wikipedia.org/wiki/List_of_ECMAScript_engines" title="http://en.wikipedia.org/wiki/List_of_ECMAScript_engines">Andere Implementationen</a> (Wikipedia).</li>
+</ul>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="http://brendaneich.com/" title="http://brendaneich.com/">Brendan Eich's blog</a>. Brendan ist der Urheber von JavaScript und der SpiderMonkey JS Engine. Er arbeitet weiterhin mit der ECMA Arbeitsgruppe zusammen, um die Sprache weiter zu entwickeln.</li>
+ <li><a href="http://dmitrysoshnikov.com/" title="http://dmitrysoshnikov.com/">Dmitry Soshnikov's Analyse von ECMA-262 Ausgabe 3 und 5</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/about/index.html b/files/de/web/javascript/reference/about/index.html
new file mode 100644
index 0000000000..bda8422bb1
--- /dev/null
+++ b/files/de/web/javascript/reference/about/index.html
@@ -0,0 +1,52 @@
+---
+title: Über diese Referenz
+slug: Web/JavaScript/Reference/About
+tags:
+  - JavaScript
+translation_of: Web/JavaScript/Reference/About
+---
+<div>{{JsSidebar}}</div>
+
+<p>Die JavaScript Referenz dient als Faktensammlung über die JavaScript Sprache. Hier wird die gesamte Sprache im Detail beschrieben. Wenn Sie JavaScript verwenden, werden Sie diese Seiten häufig nutzen (daher der Titel "JavaScript Referenz). Wenn Sie JavaScript gerade erlernen oder Hilfe beim Verstehen von einigen JavaScript Merkmalen brauchen, schauen Sie sich mal den <a href="/de/docs/Web/JavaScript/Guide">JavaScript Guide</a> an.</p>
+
+<p>JavaScript ist für den Einsatz innerhalb größerer Umgebungen bestimmt, sei es ein Browser, Server seitige Skripte oder ähnliches. In den meisten Fällen versucht diese Referenz neutral bezüglich der Umgebung zu sein und bezieht sich nicht auf eine Web-Browser Umgebung.</p>
+
+<h2 id="Wo_sind_die_JavaScript_Informationen_zu_finden">Wo sind die JavaScript Informationen zu finden</h2>
+
+<p>Dokumentation der JavaScript Core Sprachmerkmale (meistens reines <a href="/de/docs/Web/JavaScript/Language_Resources">ECMAScript</a>) findet sich auf folgenden Seiten:</p>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Guide">JavaScript Guide</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Reference">JavaScript Referenz</a></li>
+</ul>
+
+<p>Wenn ihnen JavaScript neu ist, fangen Sie mit dem <a href="/de/docs/Web/JavaScript/Guide">Guide</a> an. Sobald sie die Grundlagen sicher beherrschen, können Sie die <a href="/de/docs/Web/JavaScript/Reference">Referenz</a> benutzen um tiefer in die Details der Sprache und ihrer Konstrukte einzusteigen.</p>
+
+<h2 id="Die_Struktur_der_Referenz">Die Struktur der Referenz</h2>
+
+<p>Folgende Kapitel sind in der JavaScript Referenz zu finden:</p>
+
+<dl>
+ <dt><a href="/de/docs/Web/JavaScript/Reference/Global_Objects">Standard "built-in" Objekte</a></dt>
+ <dd>Dieses Kapitel dokumentiert alle JavaScript standard "built-in" Objekte, zusammen mit ihren Methoden und Eigenschaften.</dd>
+ <dt><a href="/de/docs/Web/JavaScript/Reference/Anweisungen">Anweisungen</a></dt>
+ <dd>JavaScript Anwendungen bestehen aus Anweisungen mit bestimmter Syntax. Eine Anweisung kann mehrere Zeilen umfassen und mehrere Anweisungen können in einer einzigen Zeile stehen, wenn sie mittels Semikolon voneinander getrennt sind.</dd>
+ <dt><a href="/de/docs/Web/JavaScript/Reference/Operators">Ausdrücke und Operatoren</a></dt>
+ <dd>Dieses Kapitel dokumentiert alle <span class="new">JavaScript Ausdrücke, Operatoren</span> und Schlüsselworte.</dd>
+ <dt><a href="/de/docs/Web/JavaScript/Reference/Functions_and_function_scope">Funktionen</a></dt>
+ <dd>Dieses Kapitel befasst sich mit Funktionen.</dd>
+ <dt><a href="/de/docs/Web/JavaScript/Reference/Klassen">Klassen</a></dt>
+ <dd>Dieses Kapitel befasst sich mit Klassen in JavaScript. Klassen wurden in ECMAScript 2015 eingeführt.</dd>
+ <dt><a href="/de/docs/Web/JavaScript/Reference/Fehler">Errors</a></dt>
+ <dd>Dieses Kapitel befasst sich mit Fehlern und Warnungen und deren Behandlung in JavaScript.</dd>
+ <dt><a href="/de/docs/Web/JavaScript/New_in_JavaScript">Neues in JavaScript</a></dt>
+ <dd>JavaScript Versionsgeschichte.</dd>
+</dl>
+
+<h3 id="Sonstige_Referenzseiten">Sonstige Referenzseiten</h3>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features">Veraltete und überflüssige Merkmale</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Lexical_grammar">Lexikale Grammatik</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Data_structures">Daten Typen und Daten Strukturen</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/already_has_pragma/index.html b/files/de/web/javascript/reference/fehler/already_has_pragma/index.html
new file mode 100644
index 0000000000..d297d3fea9
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/already_has_pragma/index.html
@@ -0,0 +1,42 @@
+---
+title: 'Warning: -file- is being assigned a //# sourceMappingURL, but already has one'
+slug: Web/JavaScript/Reference/Fehler/Already_has_pragma
+tags:
+  - Error
+  - JavaScript
+  - Source maps
+  - Warning
+translation_of: Web/JavaScript/Reference/Errors/Already_has_pragma
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">Warning: -file- is being assigned a //# sourceMappingURL, but already has one.</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>Warnung. Die Ausführung von JavaScript wird nicht unterbrochen.</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Eine Source Map wurde mehrere Male für eine JavaScript Quelle spezifiziert.</p>
+
+<p>JavaScript Quellen sind oft kombiniert und minimiert, um diesen auf einem Server effizienter zu gestalten. Mit <a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">Source Maps</a> ist es möglich den Quelltext, beim Debuggen, zu den originalen Quelldateien zu verfolgen. Es gibt zwei Möglichkeiten Source Maps zuzuweisen, einerseits mit einem Kommentar und andererseits mit dem setzen eines Headers in der JavaScriptdatei.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Setzen einer Source Map mit einem Kommentar in einer Datei:</p>
+
+<pre class="brush: js example-good">//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map</pre>
+
+<p>Oder alternativ mit dem setzen eines Headers in einer JavaScriptdatei:</p>
+
+<pre class="brush: js example-good">X-SourceMap: /path/to/file.js.map</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Tools/Debugger/How_to/Use_a_source_map">Use a source map – Firefox Tools Dokumentation</a></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">Introduction to JavaScript Source Maps – HTML5 rocks</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/array_sort_argument/index.html b/files/de/web/javascript/reference/fehler/array_sort_argument/index.html
new file mode 100644
index 0000000000..2826cbe4c0
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/array_sort_argument/index.html
@@ -0,0 +1,47 @@
+---
+title: 'TypeError: invalid Array.prototype.sort argument'
+slug: Web/JavaScript/Reference/Fehler/Array_sort_argument
+tags:
+  - Error
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Array_sort_argument
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">TypeError: invalid Array.prototype.sort argument (Firefox)
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Das Argument von {{jsxref("Array.prototype.sort()")}} erwartet entweder {{jsxref("undefined")}} oder eine Funktion, welche die Operanden vergleicht.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Nicht_valide_Fälle">Nicht valide Fälle</h3>
+
+<pre class="brush: js example-bad">[1, 3, 2].sort(5);  // TypeError
+
+var cmp = { asc: (x, y) =&gt; x &gt;= y, dsc: (x, y) =&gt; x &lt;= y };
+[1, 3, 2].sort(cmp[this.key] || 'asc');  // TypeError
+</pre>
+
+<h3 id="Valide_Fälle">Valide Fälle</h3>
+
+<pre class="brush: js example-good">[1, 3, 2].sort();   // [1, 2, 3]
+
+
+var cmp = { asc: (x, y) =&gt; x &gt;= y, dsc: (x, y) =&gt; x &lt;= y };
+[1, 3, 2].sort(cmp[this.key || 'asc']); // [1, 2, 3]</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.sort()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/bad_octal/index.html b/files/de/web/javascript/reference/fehler/bad_octal/index.html
new file mode 100644
index 0000000000..d021c0daa4
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/bad_octal/index.html
@@ -0,0 +1,54 @@
+---
+title: 'Warning: 08/09 is not a legal ECMA-262 octal constant'
+slug: Web/JavaScript/Reference/Fehler/Bad_octal
+tags:
+  - Errors
+  - JavaScript
+  - SyntaxError
+  - Warning
+translation_of: Web/JavaScript/Reference/Errors/Bad_octal
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">Warning: SyntaxError: 08 is not a legal ECMA-262 octal constant.
+Warning: SyntaxError: 09 is not a legal ECMA-262 octal constant.
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>Warnung. Die Ausführung von JavaScript wird nicht gestoppt.</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Dezimalliterale können mit einer Null (<code>0</code>) beginnen, gefolgt von anderen Dezimalziffern. en alle Ziffern nach der führenden <code>0</code> kleiner als 8 sind, wird die Zal als Oktalzahl interpretiert. Weil das nicht der Fall ist mit <code>08</code> und <code>09</code>, warnt JavaScript.</p>
+
+<p>Zu beachten ist, dass Oktalliterale und oktal maskierte Sequenzen veraltet sind und eine zusätzliche Veraltungswarnung enthalten. Mit ECMAScript 6 und später wird diese Syntak mit einer führenden Null gefolgt von einem großen oder kleinen lateinischen Buschstaben "O" (<code>0o</code> or <code>0O)</code> benutzt. Sie dazu die Seite <a href="/de/docs/Web/JavaScript/Reference/Lexical_grammar#Octal">lexical grammar</a> für mehr Informationen.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Ungültige_Oktalzahlen">Ungültige Oktalzahlen</h3>
+
+<pre class="brush: js example-bad">08;
+09;
+// SyntaxError: 08 is not a legal ECMA-262 octal constant
+// SyntaxError: "0"-prefixed octal literals and octal escape sequences
+// are deprecated</pre>
+
+<h3 id="Gültige_Oktalzahlen">Gültige Oktalzahlen</h3>
+
+<p>Einsatz von einer führenden Null gefolgt von dem Buchstaben "o";</p>
+
+<pre class="brush: js example-good">0O755;
+0o644;
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Lexical_grammar#Octal">Lexical grammar</a></li>
+ <li>
+  <p><a href="/de/docs/Web/JavaScript/Reference/Errors/Deprecated_octal">SyntaxError: "0"-prefixed octal literals and octal escape seq. are deprecated</a></p>
+ </li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/bad_radix/index.html b/files/de/web/javascript/reference/fehler/bad_radix/index.html
new file mode 100644
index 0000000000..25c473eb93
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/bad_radix/index.html
@@ -0,0 +1,61 @@
+---
+title: 'RangeError: radix must be an integer'
+slug: Web/JavaScript/Reference/Fehler/Bad_radix
+tags:
+  - Errors
+  - JavaScript
+  - RangeError
+translation_of: Web/JavaScript/Reference/Errors/Bad_radix
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">RangeError: radix must be an integer at least 2 and no greater than 36 (Firefox)
+RangeError: toString() radix argument must be between 2 and 36 (Chrome)
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("RangeError")}}</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Der optionale <code>radix</code> Parameter der {{jsxref("Number.prototype.toString()")}} Methode wurde spezifiziert. Dieser Wert muss eine ganze Zahl zwischen 2 und 36 sein, welche die Basis des Zahlensystems des repräsentierten Zahlwertes angibt. Zum Beispiel wird die Dezimalzahl (Basis 10) 169 im Hexadezimalsystem (Basis 16) als A9 repräsentiert.</p>
+
+<p>Warum ist der Parameterwert auf 36 limitiert? Eine Basis größer als 10 nutzt als Ziffern Buchstaben; deswegen kann der Parameter nicht größer als 36 sein, weil das Lateinische Alphabet (welches im Englischen und vielen anderen Sprachen verwendet wird) nur 26 Buchstaben hat.</p>
+
+<p>Die am meisten eingesetzten Basen sind:</p>
+
+<ul>
+ <li>2 für <a href="https://de.wikipedia.org/wiki/Dualsystem">Binärzahlen</a></li>
+ <li>8 für <a href="https://de.wikipedia.org/wiki/Oktalsystem">Oktalzahlen</a>,</li>
+ <li>10 für <a href="https://de.wikipedia.org/wiki/Dezimalsystem">Dezimalzahlen</a>,</li>
+ <li>16 für <a href="https://de.wikipedia.org/wiki/Hexadezimalsystem">Hexadezimalzahlen</a>.</li>
+</ul>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Nicht_valide_Fälle">Nicht valide Fälle</h3>
+
+<pre class="brush: js example-bad">(42).toString(0);
+(42).toString(1);
+(42).toString(37);
+(42).toString(150);
+// You cannot use a string like this for formatting:
+(12071989).toString('MM-dd-yyyy');
+</pre>
+
+<h3 id="Valide_Fälle">Valide Fälle</h3>
+
+<pre class="brush: js example-good">(42).toString(2);     // "101010" (binary)
+(13).toString(8);     // "15"     (octal)
+(0x42).toString(10);  // "66"     (decimal)
+(100000).toString(16) // "186a0"  (hexadecimal)
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toString()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/bad_regexp_flag/index.html b/files/de/web/javascript/reference/fehler/bad_regexp_flag/index.html
new file mode 100644
index 0000000000..5bf381da53
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/bad_regexp_flag/index.html
@@ -0,0 +1,105 @@
+---
+title: 'SyntaxError: invalid regular expression flag "x"'
+slug: Web/JavaScript/Reference/Fehler/Bad_regexp_flag
+tags:
+  - Error
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Bad_regexp_flag
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">SyntaxError: invalid regular expression flag "x" (Firefox)
+SyntaxError: Invalid regular expression flags (Chrome)
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Es gibt nicht valide Flags in regulären Ausdrücken im Code. In einem regulärem Ausdrucksliteral, welches aus eine Muster umschlossen von Schrägstrichen ist, kommen die Flags nach dem zweiten Schrägstrich. Sie können auch in der Konstruktorfunktion des {{jsxref("RegExp")}} Objektes angegeben werden (zweiter Parameter). Flags für reguläre Ausdrücke können einfach oder zusammen in beliebiger Reihenfolge benutzt werden, jedoch gibt es in ECMAScript nur fünf.</p>
+
+<p>Um ein Flag in regulären Ausdrücken einzufügen kann folgende Syntax benutzt werden:</p>
+
+<pre class="brush: js">var re = /pattern/flags;
+</pre>
+
+<p>oder</p>
+
+<pre class="brush: js">var re = new RegExp('pattern', 'flags');</pre>
+
+<table class="standard-table">
+ <caption>Flags von regulären Ausdrücken</caption>
+ <thead>
+  <tr>
+   <th scope="col">Flag</th>
+   <th scope="col">Beschreibung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>g</td>
+   <td>Globale Suche.</td>
+  </tr>
+  <tr>
+   <td>i</td>
+   <td>Groß- und Kleinschreibung nicht unterscheiden.</td>
+  </tr>
+  <tr>
+   <td>m</td>
+   <td>Suche über mehrere Zeilen.</td>
+  </tr>
+  <tr>
+   <td>u</td>
+   <td>Unicode; nimmt das Muster als eine Sequenz von Unicode Codepoints an.</td>
+  </tr>
+  <tr>
+   <td>y</td>
+   <td>Führt eine "sticky" Suche durch, welche zutrifft, wenn der String von der Startposition aus auf das Muster zutrifft. Siehe {{jsxref("RegExp.sticky", "sticky")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Es gibt nur fünf valide Flags für reguläre Ausdrücke.</p>
+
+<pre class="brush: js example-bad">/foo/bar;
+
+// SyntaxError: invalid regular expression flag "b"
+</pre>
+
+<p>Ist eine regulärer Ausdruck gewollt? Ein Ausdruck, der zwei Schrägstriche enthält wird als Literal für reguläre Ausdrücke interpretiert.</p>
+
+<pre class="brush: js example-bad">let obj = {
+  url: /docs/Web
+};
+
+// SyntaxError: invalid regular expression flag "W"
+</pre>
+
+<p>Oder war stattdessen ein String gemeint? Füge einfache oder doppelte Anführungszeichen hinzu, um ein Stringliteral zu erstellen.</p>
+
+<pre class="brush: js example-good">let obj = {
+  url: '/docs/Web'
+};</pre>
+
+<h3 id="Valide_Flags_für_reguläre_Ausdrücke">Valide Flags für reguläre Ausdrücke</h3>
+
+<p>Siehe in der Tabelle oben für die fünf in JavaScript erlaubten validen Flags für reguläre Ausdrücke</p>
+
+<pre class="brush: js example-good">/foo/g;
+/foo/gim;
+/foo/uy;
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Guide/Regular_Expressions">Reguläre Ausdrücke</a></li>
+ <li><a href="http://xregexp.com/flags/">XRegEx Flags</a> – Bibliothek für reguläre Ausdrücke, die vier weitere Flags unterstützt (<code>n</code>, <code>s</code>, <code>x</code>, <code>A</code>)</li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/bad_return_or_yield/index.html b/files/de/web/javascript/reference/fehler/bad_return_or_yield/index.html
new file mode 100644
index 0000000000..e850455615
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/bad_return_or_yield/index.html
@@ -0,0 +1,55 @@
+---
+title: 'SyntaxError: return not in function'
+slug: Web/JavaScript/Reference/Fehler/Bad_return_or_yield
+tags:
+  - Errors
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Bad_return_or_yield
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">SyntaxError: return not in function
+SyntaxError: yield not in function
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("SyntaxError")}}.</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Ein <code><a href="/de/docs/Web/JavaScript/Reference/Statements/return">return</a></code> oder <code><a href="/de/docs/Web/JavaScript/Reference/Operators/yield">yield</a></code> Statement wird außerhalb einer <a href="/de/docs/Web/JavaScript/Guide/Functions">Funktion</a> aufgerufen. Es kann sein, dass geschweifte Klammern fehlen. Die Statements <code>return</code> und <code>yield</code> müssen in einer Funktion sein, weil sie die Ausführung der Funktion beenden (oder pausieren und wieder starten) und dem Funktionsaufrufer einen spezifizierten Wert zurückgeben.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js example-bad">var cheer = function(score) {
+  if (score === 147)
+    return 'Maximum!';
+  };
+  if (score &gt; 100) {
+    return 'Century!';
+  }
+}
+
+// SyntaxError: return not in function</pre>
+
+<p>Die geschweiften Klammern sehen auf den ersten Blick richtig aus, jedoch fehlt in dem Code eine <code>{</code> nach dem ersten <code>if</code> Statement. Korrekt währe es wir folgt:</p>
+
+<pre class="brush: js example-good">var cheer = function(score) {
+  if (score === 147) {
+    return 'Maximum!';
+  }
+  if (score &gt; 100) {
+    return 'Century!';
+  }
+};</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><code><a href="/de/docs/Web/JavaScript/Reference/Statements/return">return</a></code></li>
+ <li><code><a href="/de/docs/Web/JavaScript/Reference/Operators/yield">yield</a></code></li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/called_on_incompatible_type/index.html b/files/de/web/javascript/reference/fehler/called_on_incompatible_type/index.html
new file mode 100644
index 0000000000..1915e1b829
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/called_on_incompatible_type/index.html
@@ -0,0 +1,64 @@
+---
+title: X.prototype.y called on incompatible type
+slug: Web/JavaScript/Reference/Fehler/Called_on_incompatible_type
+tags:
+  - Error
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Called_on_incompatible_type
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">TypeError: Function.prototype.toString called on incompatible object (Firefox)
+TypeError: Function.prototype.bind called on incompatible target (Firefox)
+TypeError: Method Set.prototype.add called on incompatible receiver undefined (Chrome)
+TypeError: Bind must be called on a function (Chrome)
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Wenn dieser Fehler auftritt, wird eine Funktion (auf eineem gegebenen Objekt) aufgerufen, wobei <code>this</code> nicht vom erwarteten Typ ist.</p>
+
+<p>Dieser Fehler kann auftreten, wenn die {{jsxref("Function.prototype.call()")}} oder {{jsxref("Function.prototype.apply()")}} Methode mit einem <code>this</code> Argument genutzt werden, welches nicht dem erwarteten Typ entspricht.</p>
+
+<p>Dieser Fehler kann auch auftreten, wenn eine Funktion (in einem Objekt gespeichert) als Argument in einer anderen Funktion genutzt wird. In diesem Fall ist das Objekt nicht <code>this</code> der Funktion. Um diesen Dall zu umgehen muss eine Lambda-Funktion unterstützt werden, welche den Aufruf markiert, oder die {{jsxref("Function.prototype.bind()")}} Funktion eingesetzt werden, um das richtige <code>this</code> Objekt zu nutzen.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Fehlerfälle">Fehlerfälle</h3>
+
+<pre class="brush: js example-bad">var mySet = new Set;
+['bar', 'baz'].forEach(mySet.add);
+// mySet.add ist eine Funktion, aber "mySet" wird so nicht erfasst.
+
+var myFun = function () {};
+['bar', 'baz'].forEach(myFun.bind);
+// myFun.bind ist eine Funktion, aber "myFun" wird nicht so erfasst.
+
+</pre>
+
+<h3 id="Gültiger_Fälle">Gültiger Fälle</h3>
+
+<pre class="brush: js example-good">var mySet = new Set;
+['bar', 'baz'].forEach(mySet.add.bind(mySet));
+// Das funktioniert, weil "mySet" als this an die Funktion gebunden wird.
+
+var myFun = function () {};
+['bar', 'baz'].forEach(x =&gt; myFun.bind(x));
+// Das funktioniert durch die "bind" Funktion. Es wird eine Lambda-Funktion erstellt, die die Argumente weiterleitet..
+
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Function.prototype.call()")}}</li>
+ <li>{{jsxref("Function.prototype.apply()")}}</li>
+ <li>{{jsxref("Function.prototype.bind()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/cant_access_lexical_declaration_before_init/index.html b/files/de/web/javascript/reference/fehler/cant_access_lexical_declaration_before_init/index.html
new file mode 100644
index 0000000000..16b976aef6
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/cant_access_lexical_declaration_before_init/index.html
@@ -0,0 +1,60 @@
+---
+title: 'ReferenceError: can''t access lexical declaration`X'' before initialization'
+slug: Web/JavaScript/Reference/Fehler/Cant_access_lexical_declaration_before_init
+tags:
+  - Errors
+  - JavaScript
+  - ReferenceError
+translation_of: Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">ReferenceError: can't access lexical declaration `X' before initialization (Firefox)
+ReferenceError: 'x' is not defined (Chrome)
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("ReferenceError")}}</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Auf eine lexikalische Variable wurde zugegriffen bevor sie deklariert wurde. Das passiert in Blockstatements, in denen auf <code><a href="/de/docs/Web/JavaScript/Reference/Statements/let">let</a></code> oder <code><a href="/de/docs/Web/JavaScript/Reference/Statements/const">const</a></code> Variablen zugegriffen wird, bevor sie definiert wurden.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Falsche_Fälle">Falsche Fälle</h3>
+
+<p>In diesem Fall wird die Variable "foo" in einem Blockstatement mit <code>let</code> neu deklariert.</p>
+
+<pre class="brush: js example-bad">function test() {
+  let foo = 33;
+  if (true) {
+    let foo = (foo + 55);
+    // ReferenceError: can't access lexical
+    // declaration `foo' before initialization
+  }
+}
+test();
+</pre>
+
+<h3 id="Richtige_Fälle">Richtige Fälle</h3>
+
+<p>Um "foo" im if-Statement zu ändern, muss  <code>let</code> entfernt werden, welche die Neudeklaration verursacht.</p>
+
+<pre class="brush: js example-good">function test(){
+   let foo = 33;
+   if (true) {
+      foo = (foo + 55);
+   }
+}
+test();
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Statements/let#Zeitweilig_tote_Zonen_und_Fehler_mit_let">Temporal Dead Zone and errors with let</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/cant_access_property/index.html b/files/de/web/javascript/reference/fehler/cant_access_property/index.html
new file mode 100644
index 0000000000..98471eb28e
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/cant_access_property/index.html
@@ -0,0 +1,59 @@
+---
+title: 'TypeError: can''t access property "x" of "y"'
+slug: Web/JavaScript/Reference/Fehler/Cant_access_property
+tags:
+  - Fehler
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Cant_access_property
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">TypeError: Unable to get property {x} of undefined or null reference (Edge)
+TypeError: can't access property {x} of {y} (Firefox)
+TypeError: {y} is undefined, can't access property {x} of it (Firefox)
+TypeError: {y} is null, can't access property {x} of it (Firefox)
+
+Beispiele:
+TypeError: x is undefined, can't access property "prop" of it
+TypeError: x is null, can't access property "prop" of it
+TypeError: can't access property "prop" of undefined
+TypeError: can't access property "prop" of null
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("TypeError")}}.</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>The Attributzugriff erfolgte über einen {{jsxref("undefined")}} oder {{jsxref("null")}} Wert</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Invalide_Fälle">Invalide Fälle</h3>
+
+<pre class="brush: js example-bad">// undefined und null sind Fälle auf denen die Methode substring nicht aufgerufen werden kann
+var foo = undefined;
+foo.substring(1); // TypeError: x is undefined, can't access property "substring" of it
+
+var foo = null;
+foo.substring(1); // TypeError: x is null, can't access property "substring" of it
+</pre>
+
+<h3 id="Fehlerbehebung">Fehlerbehebung</h3>
+
+<p>Um den null pointer auf <code>undefined</code> oder <code>null</code> Werte zu beheben, kann beispielsweise der <a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a> Operator verwendet werden.</p>
+
+<pre class="brush: js">if (typeof foo !== 'undefined') {
+  // Hier wissen wir, dass foo definiert ist
+}</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("undefined")}}</li>
+ <li>{{jsxref("null")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/cant_define_property_object_not_extensible/index.html b/files/de/web/javascript/reference/fehler/cant_define_property_object_not_extensible/index.html
new file mode 100644
index 0000000000..691924f427
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/cant_define_property_object_not_extensible/index.html
@@ -0,0 +1,64 @@
+---
+title: 'TypeError: can''t define property "x": "obj" is not extensible'
+slug: Web/JavaScript/Reference/Fehler/Cant_define_property_object_not_extensible
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Cant_define_property_object_not_extensible
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">TypeError: can't define property "x": "obj" is not extensible (Firefox)
+TypeError: Cannot define property: "x", object is not extensible. (Chrome)
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Normalerweise ist ein Objekt erweiterbar und neue Eigenschaften können hinzugefügt werden. In diesem Fall markiert {{jsxref("Object.preventExtensions()")}} ein Objekt als nicht mehr erweiterbar, so dass ein Objekt nur noch die Eigenschaften haben kann, die es vor dem Aufruf hatte.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Im <a href="/de/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a> wird ein <code>TypeError</code> erzeugt, wenn versucht wird eine Eigenschaft zu einem nicht erweiterbaren Objekt hinzuzufügen. Im normalen Modus wird das Hinzufügen einfach ignoriert.</p>
+
+<pre class="brush: js example-bad">'use strict';
+
+var obj = {};
+Object.preventExtensions(obj);
+
+obj.x = 'foo';
+// TypeError: can't define property "x": "obj" is not extensible
+</pre>
+
+<p>Im <a href="/de/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a> und normalen Modus wird ein Fehler erzeugt, wenn {{jsxref("Object.defineProperty()")}} benutzt wird, um eine Eigenschaft zu einem nicht erweiterbaren Objekt hinzuzufügen.</p>
+
+<pre class="brush: js example-bad">var obj = { };
+Object.preventExtensions(obj);
+
+Object.defineProperty(obj,
+  'x', { value: "foo" }
+);
+// TypeError: can't define property "x": "obj" is not extensible
+</pre>
+
+<p>Um diesen Fehler zu vermeiden muss entweder der Aufruf von {{jsxref("Object.preventExtensions()")}} entfernt werden oder die Position des Aufrufes so verschoben werden, dass das Hinzufügen von Eigenschaften davor passiert und das Objekt erst danach als nicht erweiterbar markiert wird. Natürlich kann auch die neue Eigenschaft entfernt werden, wenn sie nicht benötigt wird.</p>
+
+<pre class="brush: js example-good">'use strict';
+
+var obj = {};
+obj.x = 'foo'; // add property first and only then prevent extensions
+
+Object.preventExtensions(obj);</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Object.preventExtensions()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/cant_delete/index.html b/files/de/web/javascript/reference/fehler/cant_delete/index.html
new file mode 100644
index 0000000000..fe09735071
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/cant_delete/index.html
@@ -0,0 +1,58 @@
+---
+title: 'TypeError: property "x" is non-configurable and can''t be deleted'
+slug: Web/JavaScript/Reference/Fehler/Cant_delete
+tags:
+  - Errors
+  - JavaScript
+  - Strict Mode
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Cant_delete
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">TypeError: property "x" is non-configurable and can't be deleted. (Firefox)
+TypeError: Cannot delete property 'x' of #&lt;Object&gt; (Chrome)
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("TypeError")}} nur im strict mode.</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Es wurde versucht eine EIgenschaft zu löschen, obwohl die Eigenschaft nicht Konfigurierbar (<a href="/de/docs/Web/JavaScript/Data_structures#Properties">non-configurable</a>) ist. Das <code>configurable</code> Attribut gibt an, ob ein Eigenschaft von einem Objekt gelöscht werden kann und ob ein Attribut (anders als <code>writable</code>) geändert werden kann.</p>
+
+<p>Dieser Fehler ist nur tritt nur im <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a> auf. In non-strict Quelltext, gibt die Operation <code>false</code> zurück.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Nicht Konfigurierbare Eigenschaften sind nicht sehr häufig, aber sie können mit {{jsxref("Object.defineProperty()")}} oder {{jsxref("Object.freeze()")}} erstellt werden.</p>
+
+<pre class="brush: js example-bad">'use strict';
+var obj = Object.freeze({name: 'Elsa', score: 157});
+delete obj.score;  // TypeError
+
+'use strict';
+var obj = {};
+Object.defineProperty(obj, 'foo', {value: 2, configurable: false});
+delete obj.foo;  // TypeError
+
+'use strict';
+var frozenArray = Object.freeze([0, 1, 2]);
+frozenArray.pop();  // TypeError
+</pre>
+
+<p>Es gibt auch einige nicht Konfigurierbare Eigenschaften, die in JavaScript eingebaut sind. Dazu zählen zum Beispiel die mathematischen Konstanten.</p>
+
+<pre class="brush: js example-bad">'use strict';
+delete Math.PI;  // TypeError</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Operators/delete">delete operator</a></li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.freeze()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/cant_redefine_property/index.html b/files/de/web/javascript/reference/fehler/cant_redefine_property/index.html
new file mode 100644
index 0000000000..80ef1e384b
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/cant_redefine_property/index.html
@@ -0,0 +1,51 @@
+---
+title: 'TypeError: can''t redefine non-configurable property "x"'
+slug: Web/JavaScript/Reference/Fehler/Cant_redefine_property
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Cant_redefine_property
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">TypeError: can't redefine non-configurable property "x" (Firefox)
+TypeError: Cannot redefine property: "x" (Chrome)
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Es wurde versucht eine Eigenschaft erneut zu definieren, aber die Eigenschaft ist nicht konfigurierbar (<a href="/de/docs/Web/JavaScript/Data_structures#Properties">non-configurable</a>). Das <code>configurable</code> Attribut kontrolliert, ob eine Eigenschaft von einem Objekt gelöscht werden kann und seine Attribute (anders als <code>writable</code>) geändert werden können. Eigenschaften von einem Objekt, dass von einem <a href="/de/docs/Web/JavaScript/Reference/Operators/Object_initializer">Objekt-Initialisierer</a> erstellt wurden, sind konfigurierbar. Immer, wenn zum Beispiel {{jsxref("Object.defineProperty()")}} eingesetzt wird, ist die Eigenschaft nicht ohne weiteres konfigurierbar.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Nicht_konfigurierbare_Eigenschaften_mit_Object.defineProperty_erstellen">Nicht konfigurierbare Eigenschaften mit <code>Object.defineProperty</code> erstellen</h3>
+
+<p>Die {{jsxref("Object.defineProperty()")}} Funktion erstellt nicht konfiguriertbare Eigenschaften wenn sie nicht extra als konfigurierbar spezifiziert sind.</p>
+
+<pre class="brush: js example-bad">var obj = Object.create({});
+Object.defineProperty(obj, "foo", {value: "bar"});
+
+Object.defineProperty(obj, "foo", {value: "baz"});
+// TypeError: can't redefine non-configurable property "foo"
+</pre>
+
+<p>Die "foo" Eigenschaft muss als Konfigurierbar eingestellt werden, wenn diese später im Quelltext erneut definiert bzw. überschrieben werden soll.</p>
+
+<pre class="brush: js example-good">var obj = Object.create({});
+Object.defineProperty(obj, "foo", {value: "bar", configurable: true});
+Object.defineProperty(obj, "foo", {value: "baz", configurable: true});</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Data_structures#Properties">[[Configurable]]</a></li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/cyclic_object_value/index.html b/files/de/web/javascript/reference/fehler/cyclic_object_value/index.html
new file mode 100644
index 0000000000..33bf4d508a
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/cyclic_object_value/index.html
@@ -0,0 +1,67 @@
+---
+title: 'TypeError: cyclic object value'
+slug: Web/JavaScript/Reference/Fehler/Cyclic_object_value
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Cyclic_object_value
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">TypeError: cyclic object value (Firefox)
+TypeError: Converting circular structure to JSON (Chrome and Opera)
+TypeError: Circular reference in value argument not supported (Microsoft Edge)
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Wenn {{jsxref("JSON.stringify()")}} aufgerufen wird, kann eine zyklische Objektreferenzstruktur nicht zu eine String konvertiert werden.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>In eine zyklischen Struktur wie folgender</p>
+
+<pre class="brush: js">var <code class="language-js">circularReference</code> = {otherData: 123};
+<code class="language-js">circularReference</code>.myself = <code class="language-js">circularReference</code>;
+</pre>
+
+<p>wird {{jsxref("JSON.stringify()")}} nicht funktionieren</p>
+
+<pre class="brush: js example-bad">JSON.stringify(a);
+// TypeError: cyclic object value
+</pre>
+
+<p>Um zyklische Referenzen zu serialisieren, kann man eine Bibliotheken benutzen (z. B. <a href="https://github.com/douglascrockford/JSON-js/blob/master/cycle.js">cycle.js</a> von Douglas Crockford) oder eine eigene Lösung implementieren, welche zyklische Referenzen findet und mit serialisierbaren Werten ersetzt (oder diese entfernt).</p>
+
+<p>Das folgende Codebeispiel zeigt, wie man eine zyklische Referenz mit dem Einsatz des  <code>replacer</code> Parameters von {{jsxref("JSON.stringify()")}} findet und filtert (das bedeutet, es gehen Daten verloren):</p>
+
+<pre class="brush: js">const getCircularReplacer = () =&gt; {
+  const seen = new WeakSet;
+  return (key, value) =&gt; {
+    if (typeof value === "object" &amp;&amp; value !== null) {
+      if (seen.has(value)) {
+        return;
+      }
+      seen.add(value);
+    }
+    return value;
+  };
+};
+
+JSON.stringify(<code class="language-js">circularReference</code>, getCircularReplacer());
+// {"otherData":123}</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("JSON.stringify")}}</li>
+ <li><a href="https://github.com/douglascrockford/JSON-js/blob/master/cycle.js">cycle.js</a> – Führt zwei Funktionen ein, <code>JSON.decycle</code> und <code>JSON.retrocycle</code>, welche es ermöglichen zyklische Strukturen aufzulösen, diese in JSON unterzubringen und sie wieder zu erstellen.</li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/dead_object/index.html b/files/de/web/javascript/reference/fehler/dead_object/index.html
new file mode 100644
index 0000000000..036e637ef4
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/dead_object/index.html
@@ -0,0 +1,50 @@
+---
+title: 'TypeError: can''t access dead object'
+slug: Web/JavaScript/Reference/Fehler/Dead_object
+tags:
+  - Addon
+  - Error
+  - Errors
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Errors/Dead_object
+---
+<div>{{JSSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">TypeError: can't access dead object
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Um die Speichernutzung zu verbessern und Speicherlücken zu vermeiden, verbietet Firefox Add-Ons Referenzen in das DOM Objekt zu speichern, nachdem das Elterndokument zerstört wurde. Ein totes Objekt hält eine starke Referenz zu einem DOM-Element, welche nach nach dem Zerstören in DOM existiert. Um dieses Problem zu vermeiden, sollte statt der Referenz zu einem DOM-Knoten im fremden Dokument die Referenz in einem Objekt, welches im Dokument selbst spezifiziert ist gespeichert werden und gesäubert werden, wenn das Dokument nicht mehr geladen ist, oder als <a href="/de/docs/Mozilla/Tech/XPCOM/Language_Bindings/Components.utils.getWeakReference">weak Referenz</a> gespeichert werden.</p>
+
+<h2 id="Prüfen_ob_ein_Objekt_tot_ist">Prüfen, ob ein Objekt tot ist</h2>
+
+<p><a href="/de/docs/Mozilla/Tech/XPCOM/Language_Bindings/Components.utils">Components.utils</a> hat ein <code>isDeadWrapper()</code> Methode, welche in privilegiertem Quelltext verwendet werden sollte.</p>
+
+<pre class="brush: js">if (Components.utils.isDeadWrapper(window)) {
+  // dead
+}</pre>
+
+<p>Nicht privilegierter Quelltext hat keinen Zugriff auf Component.utils und sollt deswegen einfach den Fehler abfangen.</p>
+
+<pre class="brush: js">try {
+  String(window);
+}
+catch (e) {
+  console.log("window is likely dead");
+}</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="https://blog.mozilla.org/addons/2012/09/12/what-does-cant-access-dead-object-mean/">What does “can’t access dead object” mean?</a></li>
+ <li><a href="/de/docs/Extensions/Common_causes_of_memory_leaks_in_extensions">Häufige Gründe für Speicherlöcher in Erweiterungen</a></li>
+ <li><a href="/de/docs/Mozilla/Tech/XPCOM/Language_Bindings/Components.utils">Components.utils</a></li>
+ <li><a href="/en-US/docs/Mozilla/Zombie_compartments">Zombie Abteilungen</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/delete_in_strict_mode/index.html b/files/de/web/javascript/reference/fehler/delete_in_strict_mode/index.html
new file mode 100644
index 0000000000..042505e066
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/delete_in_strict_mode/index.html
@@ -0,0 +1,70 @@
+---
+title: >-
+  SyntaxError: applying the 'delete' operator to an unqualified name is
+  deprecated
+slug: Web/JavaScript/Reference/Fehler/Delete_in_strict_mode
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Delete_in_strict_mode
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">SyntaxError: applying the 'delete' operator to an unqualified name is deprecated (Firefox)
+SyntaxError: Delete of an unqualified identifier in strict mode. (Chrome)
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("SyntaxError")}} nur im <a href="/de/docs/Web/JavaScript/Reference/Strict_mode">Strict Mode</a>.</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Normale Variablen können in JavaScript nicht mit dem <code><a href="/de/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code> Operator gelöscht werden. Im Strict Mode führt der Versuch des Löschens zu einem Fehler, weil es nicht erlaubt ist.</p>
+
+<p>Der <code>delete</code> Operator kann nur Eigenschaften eines Objektes löschen. Objekteigenschaften müssen dafür Konfigurierbar sein.</p>
+
+<p>Wie oft fälschlicherweise angenommen, hat die <code>delete</code> Operation <strong>nichts</strong> mit dem direkten freimachen von Speicher zu tun. Speicherverwaltung wird indirekt gemacht, mehr Informationen darüber auf den Seiten <a href="/de/docs/Web/JavaScript/Memory_Management">Speicherverwaltung</a> und <code><a href="/de/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code>.</p>
+
+<p>Der Fehler tritt nur im <a href="/de/docs/Web/JavaScript/Reference/Strict_mode">Strict Mode</a> auf. In normalem Code gibt die Operation einfach <code>false</code> zurück.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Der Versuch eine einfache Variable zu Löschen funktioniert in JavaScript nicht unf führt im Strict Mode zu einem Fehler:</p>
+
+<pre class="brush: js example-bad">'use strict';
+
+var x;
+
+// ...
+
+delete x;
+
+// SyntaxError: applying the 'delete' operator to an unqualified name
+// is deprecated
+</pre>
+
+<p>Um den Inhalt einer Variable zu leeren, kann man sie auf {{jsxref("null")}} setzen:</p>
+
+<pre class="brush: js example-good">'use strict';
+
+var x;
+
+// ...
+
+x = null;
+
+// x can be garbage collected
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><code><a href="/de/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code></li>
+ <li><a href="/de/docs/Web/JavaScript/Memory_Management">Speicherverwaltung</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Errors/Cant_delete">TypeError: property "x" is non-configurable and can't be deleted</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/deprecated_caller_or_arguments_usage/index.html b/files/de/web/javascript/reference/fehler/deprecated_caller_or_arguments_usage/index.html
new file mode 100644
index 0000000000..15bb0e68b6
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/deprecated_caller_or_arguments_usage/index.html
@@ -0,0 +1,75 @@
+---
+title: 'ReferenceError: deprecated caller or arguments usage'
+slug: Web/JavaScript/Reference/Fehler/Deprecated_caller_or_arguments_usage
+tags:
+  - Errors
+  - JavaScript
+  - Strict Mode
+  - Warning
+translation_of: Web/JavaScript/Reference/Errors/Deprecated_caller_or_arguments_usage
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">Warning: ReferenceError: deprecated caller usage (Firefox)
+Warning: ReferenceError: deprecated arguments usage (Firefox)
+TypeError: 'callee' and 'caller' cannot be accessed in strict mode. (Safari)
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>Eine {{jsxref("ReferenceError")}} Warnung, die nur im Strict Mode auftaucht. Die JavaScript-Ausführung wird dadurch nicht angehalten.</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Im <a href="/de/docs/Web/JavaScript/Reference/Strict_mode">Strict Mode</a> wurden die Eigenschaften {{jsxref("Function.caller")}} oder {{jsxref("Function.arguments")}} benutzt, was nicht getan werden sollte. Sie sind veraltet, da sie den Funktionsaufruf verlieren, nicht standardisiert sind, schwer zu optimieren sind und möglicherweise leistungsschädigend sein können.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Veraltete_function.caller_oder_arguments.callee.caller_Eigenschaft">Veraltete <code>function.caller</code> oder <code>arguments.callee.caller</code> Eigenschaft</h3>
+
+<p>{{jsxref("Function.caller")}} und <code><a href="/de/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee.caller</a></code> sind veraltet (in den Referenzartikeln sind mehr Informationen dazu enthalten).</p>
+
+<pre class="brush: js example-bad">'use strict';
+
+function myFunc() {
+  if (myFunc.caller == null) {
+    return 'The function was called from the top!';
+  } else {
+    return 'This function\'s caller was ' + myFunc.caller;
+  }
+}
+
+myFunc();
+// Warning: ReferenceError: deprecated caller usage
+// "The function was called from the top!"</pre>
+
+<h3 id="Function.arguments"><code>Function.arguments</code></h3>
+
+<p>{{jsxref("Function.arguments")}} ist veraltet (im Referenzartikel sind mehr Informationen dazu enthalten).</p>
+
+<pre class="brush: js example-bad">'use strict';
+
+function f(n) { g(n - 1); }
+
+function g(n) {
+  console.log('before: ' + g.arguments[0]);
+  if (n &gt; 0) { f(n); }
+  console.log('after: ' + g.arguments[0]);
+}
+
+f(2);
+
+console.log('returned: ' + g.arguments);
+// Warning: ReferenceError: deprecated arguments usage
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features">Veraltete and obsolete Funktionen</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Strict_mode">Strict Mode</a></li>
+ <li>{{jsxref("Function.arguments")}}</li>
+ <li>{{jsxref("Function.caller")}} und <code><a href="/de/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee.caller</a></code></li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/deprecated_expression_closures/index.html b/files/de/web/javascript/reference/fehler/deprecated_expression_closures/index.html
new file mode 100644
index 0000000000..b8c6e7ced8
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/deprecated_expression_closures/index.html
@@ -0,0 +1,78 @@
+---
+title: 'Warning: expression closures are deprecated'
+slug: Web/JavaScript/Reference/Fehler/Deprecated_expression_closures
+tags:
+  - JavaScript
+  - Warning
+translation_of: Web/JavaScript/Reference/Errors/Deprecated_expression_closures
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">Warning: expression closures are deprecated
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>Warnung. Die Ausführung von JavaScript wird nicht angehalten.</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Die nicht standardisierte <a href="/de/docs/Web/JavaScript/Reference/Operators/Expression_closures"> Ausdrucks Closure</a> Syntax (Kurzform der Funktionssyntax) ist veraltetet und sollte nicht mehr verwendet werden. Diese Syntax wird komplett entfernt ({{bug(1083458)}}) und Skripte die diese Benutzen erzeugen dann einen {{jsxref("SyntaxError")}}.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Veraltete_Syntax">Veraltete Syntax</h3>
+
+<p>Ausdrucks Closures vermeiden geschweifte Klammern oder return Anweisungen in Funktionsdeklarationen oder in Methodendefinitionen in Objekten.</p>
+
+<pre class="brush: js example-bad">var x = function() 1;
+
+var obj = {
+  count: function() 1
+};
+</pre>
+
+<h3 id="Standardsyntax">Standardsyntax</h3>
+
+<p>Um die nicht standardisierte Ausdrucks Closures Syntax zu Standard-ECMAScript Syntax zu konvertieren müssen geschweifte Klammern und ein return Statement hinzugefügt werden.</p>
+
+<pre class="brush: js example-good">var x = function() { return 1; }
+
+var obj = {
+  count: function() { return 1; }
+};
+</pre>
+
+<h3 id="Standardsyntax_mit_Arrowfunktionen">Standardsyntax mit Arrowfunktionen</h3>
+
+<p>Alternativ können <a href="/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow-Funktionen</a> genutzt werden:</p>
+
+<pre class="brush: js example-good">var x = () =&gt; 1;</pre>
+
+<h3 id="Standardsyntax_mit_Kurzformmethodensyntax">Standardsyntax mit Kurzformmethodensyntax</h3>
+
+<p>Anweisungs Closures können auch in Gettern und Settern gefunden werden:</p>
+
+<pre class="brush: js example-bad">var obj = {
+  get x() 1,
+  set x(v) this.v = v
+};
+</pre>
+
+<p>Mit ES2015 <a href="/de/docs/Web/JavaScript/Reference/Functions/Method_definitions">Methodendefinitionen</a> können diese folgendermaßen konvertiert werden :</p>
+
+<pre class="brush: js example-good">var obj = {
+  get x() { return 1 },
+  set x(v) { this.v = v }
+};
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Operators/Expression_closures">Ausdrucks Closures</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow Funktionen</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Functions/Method_definitions">Methodendefinitionen</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/deprecated_octal/index.html b/files/de/web/javascript/reference/fehler/deprecated_octal/index.html
new file mode 100644
index 0000000000..e153038950
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/deprecated_octal/index.html
@@ -0,0 +1,67 @@
+---
+title: 'SyntaxError: "0"-prefixed octal literals and octal escape seq. are deprecated'
+slug: Web/JavaScript/Reference/Fehler/Deprecated_octal
+tags:
+  - Error
+  - JavaScript
+  - Strict Mode
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Deprecated_octal
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">SyntaxError:
+"0"-prefixed octal literals and octal escape sequences are deprecated;
+for octal literals use the "0o" prefix instead
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("SyntaxError")}} nur im <a href="/de/docs/Web/JavaScript/Reference/Strict_mode">Strict Mode</a>.</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Oktalliterale und oktal maskierte Sequenzen sind veraltet und führen zu einem {{jsxref("SyntaxError")}} im Strict Mode. Ab ECMAScript 2015 wird in der standardisierten Syntax eine führende null gefolgt von einem kleinen oder großen lateinischen Buchstaben "O" verwendet (<code>0o</code> oder <code>0O)</code>.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Oktalliteral_mit_führender_0">Oktalliteral mit führender 0</h3>
+
+<pre class="brush: js example-bad">"use strict";
+
+03;
+
+// SyntaxError: "0"-prefixed octal literals and octal escape sequences
+// are deprecated</pre>
+
+<h3 id="Oktal_maskierte_Sequenz">Oktal maskierte Sequenz</h3>
+
+<pre class="brush: js example-bad">"use strict";
+
+"\251";
+
+// SyntaxError: "0"-prefixed octal literals and octal escape sequences
+// are deprecated
+</pre>
+
+<h3 id="Valide_Oktalzahlen">Valide Oktalzahlen</h3>
+
+<p>Einsatz einer führenden null gefolgt von "o" oder "O":</p>
+
+<pre class="brush: js example-good">0o3;
+</pre>
+
+<p>Statt oktal maskierte Sequenzen können hexadezimal maskierte Sequenzen benutzt werden:</p>
+
+<pre class="brush: js example-good">'\xA9';</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Lexical_grammar#Octal">Lexikalische Grammatik</a></li>
+ <li>
+  <p><a href="/de/docs/Web/JavaScript/Reference/Errors/Bad_octal">Warning: 08/09 is not a legal ECMA-262 octal constant</a></p>
+ </li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/deprecated_source_map_pragma/index.html b/files/de/web/javascript/reference/fehler/deprecated_source_map_pragma/index.html
new file mode 100644
index 0000000000..1f87b2bd2d
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/deprecated_source_map_pragma/index.html
@@ -0,0 +1,58 @@
+---
+title: >-
+  SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //#
+  instead
+slug: Web/JavaScript/Reference/Fehler/Deprecated_source_map_pragma
+tags:
+  - Errors
+  - JavaScript
+  - Source maps
+translation_of: Web/JavaScript/Reference/Errors/Deprecated_source_map_pragma
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">Warning: SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead
+
+Warning: SyntaxError: Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>Eine Warnung die als {{jsxref("SyntaxError")}} auftritt. Die Ausführung von JavaScript wird nicht unterbrochen.</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Es gibt eine veraltete Source-Map-Syntax im JavaScript Code.</p>
+
+<p>JavaScript Code wird oft zusammengefügt und minimiert, um die Auslieferung durch einen Server effizienter zu machen. Mit <a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">Source-Maps</a> kann beim Debuggen der ausgeführte Code auf die Original Codedateien übertragen werden.</p>
+
+<p>Die Source-Map Spezifikation änderte die Syntax wegen eines Konflikts mit dem IE immer wenn die Seite nach <code>//@cc_on</code> war, interpretierte dieser es als bedingte Kompilierung in der IE JScript Umgebung. Der <a href="https://msdn.microsoft.com/en-us/library/8ka90k2e%28v=vs.94%29.aspx">bedingte Kompilations Kommentar</a> im IE ist eine relativ unbekannte Funktion, aber dieses machte Source-Maps von <a href="https://bugs.jquery.com/ticket/13274">jQuery</a> und anderen Bibliotheken kaputt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Veraltete_Syntax">Veraltete Syntax</h3>
+
+<p>Syntax mit dem veralteten "@" Zeichen.</p>
+
+<pre class="brush: js example-bad">//@ sourceMappingURL=http://example.com/path/to/your/sourcemap.map
+</pre>
+
+<h3 id="Standard_Syntax">Standard Syntax</h3>
+
+<p>Benutzt stattdessen ein "#" Zeichen.</p>
+
+<pre class="brush: js example-good">//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map</pre>
+
+<p>Alternativ kann ein {{HTTPHeader("SourceMap")}} Header zu der JavaScript Datei gesetzt werden, um einen solchen Kommentar zu vermeiden:</p>
+
+<pre class="brush: js example-good">SourceMap: /path/to/file.js.map</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Tools/Debugger/How_to/Use_a_source_map">Wie man eine Source-Map einsetzt – Firefox Werkzeug Dokumentation</a></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">Einführung in Source-Maps – HTML5 rocks</a></li>
+ <li>{{HTTPHeader("SourceMap")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/deprecated_string_generics/index.html b/files/de/web/javascript/reference/fehler/deprecated_string_generics/index.html
new file mode 100644
index 0000000000..d495448759
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/deprecated_string_generics/index.html
@@ -0,0 +1,104 @@
+---
+title: 'Warning: String.x is deprecated; use String.prototype.x instead'
+slug: Web/JavaScript/Reference/Fehler/Deprecated_String_generics
+tags:
+  - JavaScript
+  - Warning
+translation_of: Web/JavaScript/Reference/Errors/Deprecated_String_generics
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">Warning: String.charAt            is deprecated; use String.prototype.charAt            instead
+Warning: String.charCodeAt        is deprecated; use String.prototype.charCodeAt        instead
+Warning: String.concat            is deprecated; use String.prototype.concat            instead
+Warning: String.contains          is deprecated; use String.prototype.contains          instead
+Warning: String.endsWith          is deprecated; use String.prototype.endsWith          instead
+Warning: String.includes          is deprecated; use String.prototype.includes          instead
+Warning: String.indexOf           is deprecated; use String.prototype.indexOf           instead
+Warning: String.lastIndexOf       is deprecated; use String.prototype.lastIndexOf       instead
+Warning: String.localeCompare     is deprecated; use String.prototype.localeCompare     instead
+Warning: String.match             is deprecated; use String.prototype.match             instead
+Warning: String.normalize         is deprecated; use String.prototype.normalize         instead
+Warning: String.replace           is deprecated; use String.prototype.replace           instead
+Warning: String.search            is deprecated; use String.prototype.search            instead
+Warning: String.slice             is deprecated; use String.prototype.slice             instead
+Warning: String.split             is deprecated; use String.prototype.split             instead
+Warning: String.startsWith        is deprecated; use String.prototype.startsWith        instead
+Warning: String.substr            is deprecated; use String.prototype.substr            instead
+Warning: String.substring         is deprecated; use String.prototype.substring         instead
+Warning: String.toLocaleLowerCase is deprecated; use String.prototype.toLocaleLowerCase instead
+Warning: String.toLocaleUpperCase is deprecated; use String.prototype.toLocaleUpperCase instead
+Warning: String.toLowerCase       is deprecated; use String.prototype.toLowerCase       instead
+Warning: String.toUpperCase       is deprecated; use String.prototype.toUpperCase       instead
+Warning: String.trim              is deprecated; use String.prototype.trim              instead
+Warning: String.trimLeft          is deprecated; use String.prototype.trimLeft          instead
+Warning: String.trimRight         is deprecated; use String.prototype.trimRight         instead
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>Warnung. JavaScript unterbricht die Ausführung nicht.</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Die nicht standardisierten generischen {{jsxref("String")}} Methoden sind veraltet und werden in Zukunft gelöscht (keine Browserübergreifende Unterstützung, nur in Firefox verfügbar). <span id="result_box" lang="de"><span>String-Generics stellen String-Instanzmethoden für das String-Objekt bereit, wodurch String-Methoden auf jedes Objekt angewendet werden können.</span></span></p>
+
+<p>Firefox {{bug(1222552)}} dokumentiert das Entfernen von generischen String Methoden.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Fehlerfälle">Fehlerfälle</h3>
+
+<pre class="brush: js example-bad">var num = 15;
+String.replace(num, /5/, '2');</pre>
+
+<h3 id="Gültige_Fälle">Gültige Fälle</h3>
+
+<pre class="brush: js example-good">var num = 15;
+String(num).replace(/5/, '2');
+</pre>
+
+<h2 id="Shim">Shim</h2>
+
+<p><span id="result_box" lang="de"><span>Das Folgende ist ein Shim zur Unterstützung nicht unterstützender Browser:</span></span></p>
+
+<pre class="brush: js">/*globals define*/
+// Assumes all supplied String instance methods already present
+// (one may use shims for these if not available)
+(function() {
+  'use strict';
+
+  var i,
+    // We could also build the array of methods with the following, but the
+    //   getOwnPropertyNames() method is non-shimable:
+    // Object.getOwnPropertyNames(String).filter(function(methodName) {
+    //   return typeof String[methodName] === 'function';
+    // });
+    methods = [
+      'contains', 'substring', 'toLowerCase', 'toUpperCase', 'charAt',
+      'charCodeAt', 'indexOf', 'lastIndexOf', 'startsWith', 'endsWith',
+      'trim', 'trimLeft', 'trimRight', 'toLocaleLowerCase', 'normalize',
+      'toLocaleUpperCase', 'localeCompare', 'match', 'search', 'slice',
+      'replace', 'split', 'substr', 'concat', 'localeCompare'
+    ],
+    methodCount = methods.length,
+    assignStringGeneric = function(methodName) {
+      var method = String.prototype[methodName];
+      String[methodName] = function(arg1) {
+        return method.apply(arg1, Array.prototype.slice.call(arguments, 1));
+      };
+    };
+
+  for (i = 0; i &lt; methodCount; i++) {
+    assignStringGeneric(methods[i]);
+  }
+}());</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("String")}}</li>
+ <li>Es gibt ebenfalls {{jsxref("Global_Objects/Array", "Generische Array Methoden", "#Array_generic_methods", 1)}}  (die auch veraltet sind).</li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/deprecated_tolocaleformat/index.html b/files/de/web/javascript/reference/fehler/deprecated_tolocaleformat/index.html
new file mode 100644
index 0000000000..31cc81d9cc
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/deprecated_tolocaleformat/index.html
@@ -0,0 +1,90 @@
+---
+title: 'Warning: Date.prototype.toLocaleFormat is deprecated'
+slug: Web/JavaScript/Reference/Fehler/Deprecated_toLocaleFormat
+tags:
+  - JavaScript
+  - Warning
+translation_of: Web/JavaScript/Reference/Errors/Deprecated_toLocaleFormat
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">Warning: Date.prototype.toLocaleFormat is deprecated; consider using Intl.DateTimeFormat instead
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>Warnung. JavaScript stoppt die ausführung nicht an.</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Die nicht standardisierte Methode {{jsxref("Date.prototype.toLocaleFormat")}} ist veraltet und sollte nicht mehr benutzt werden. Sie benutzt einen Formatstring mit dem selben Format, wie dei der C Funktion <code>strftime()</code>. <strong>Diese Funktion ist seit Firefox 58+ nicht mehr vorhanden</strong>.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Veraltete_Syntax">Veraltete Syntax</h3>
+
+<p>Die {{jsxref("Date.prototype.toLocaleFormat")}} Methode ist veraltet und wird entfernt werden (keine browserübergreifende Unterstützung, nur in Firefox verfügbar).</p>
+
+<pre class="brush: js example-bad">var today = new Date();
+var date = today.toLocaleFormat('%A, %e. %B %Y');
+
+console.log(date);
+// In German locale
+// "Freitag, 10. März 2017"</pre>
+
+<h3 id="Alternative_Standardsyntax_mit_der_ECMAScript_Intl_API">Alternative Standardsyntax mit der ECMAScript Intl API</h3>
+
+<p>Der ECMA-402 Standard spezifiziert Standardobjekte und Methoden (ECMAScript Intl API), die sprachabhängige Datums- und Zeitformatierung erlauben (verfügbar in Chrome 24+, Firefox 29+, IE11+, Safari10+).</p>
+
+<p>Man kan jetzt die {{jsxref("Date.prototype.toLocaleDateString")}} Methode einsetzen, um einen Zeitpunkt zu formatieren.</p>
+
+<pre class="brush: js example-good">var today = new Date();
+var options = { weekday: 'long', year: 'numeric',
+                month: 'long', day: 'numeric' };
+var date = today.toLocaleDateString('de-DE', options);
+
+console.log(date);
+// "Freitag, 10. März 2017"
+</pre>
+
+<p>Oder man kann das {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} Objekt einsetzen, welches die meisten Berechnungen zwischenspeichert, so dass das Formatieren schneller ist. Dieses ist nützlich, wenn Zeitpunkte in einer Schleife formatiert werden.</p>
+
+<pre class="brush: js example-good">var options = { weekday: 'long', year: 'numeric',
+                month: 'long', day: 'numeric' };
+var dateFormatter = new Intl.DateTimeFormat('de-DE', options)
+
+var dates = [Date.UTC(2012, 11, 20, 3, 0, 0),
+             Date.UTC(2014, 04, 12, 8, 0, 0)];
+
+dates.forEach(date =&gt; console.log(dateFormatter.format(date)));
+
+// "Donnerstag, 20. Dezember 2012"
+// "Montag, 12. Mai 2014"
+</pre>
+
+<h3 id="Alternative_Standardsyntax_mit_Date_Methoden">Alternative Standardsyntax mit Date Methoden</h3>
+
+<p>Das {{jsxref("Date")}} Objekt enthält einige Methoden, um einen Benutzerdefinierten Datumsstring zu erhalten.</p>
+
+<pre class="brush: js example-bad">(new Date()).toLocaleFormat("%Y%m%d");
+// "20170310"
+</pre>
+
+<p>Dieses kan konvertiert werde:</p>
+
+<pre class="brush: js example-good">let now = new Date();
+let date = now.getFullYear() * 10000 +
+          (now.getMonth() + 1) * 100 + now.getDate();
+
+console.log(date);
+// "20170310"</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.toLocaleFormat")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleDateString")}}</li>
+ <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/equal_as_assign/index.html b/files/de/web/javascript/reference/fehler/equal_as_assign/index.html
new file mode 100644
index 0000000000..dbe5e55b02
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/equal_as_assign/index.html
@@ -0,0 +1,54 @@
+---
+title: 'SyntaxError: test for equality (==) mistyped as assignment (=)?'
+slug: Web/JavaScript/Reference/Fehler/Equal_as_assign
+tags:
+  - Errors
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Equal_as_assign
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">Warning: SyntaxError: test for equality (==) mistyped as assignment (=)?
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("SyntaxError")}} Warnung nur im <a href="/de/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>.</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Es gibt eine Zuweisung (<code>=</code>) an der eigentlich ein Gleichheitsprüfung (<code>==</code>) erwartet wird. Um das Debuggen zu unterstützen, warnt JavaScript diesen Fakt (im strict mode).</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Zuweisung_in_bedingten_Ausdrücken">Zuweisung in bedingten Ausdrücken</h3>
+
+<p>Es ist ratsam in bedingten Ausdrücken (wie z. B. <code><a href="/de/docs/Web/JavaScript/Reference/Statements/if...else">if...else</a></code>) keine einfachen Zuweisungen zu verwenden, weil beim lesen des Codes eine Zuweisung mit einer Gleichheitsprüfung verwechselt werden kann. Zum Beispiel sollte folgender Code nicht verwendet werden:</p>
+
+<pre class="brush: js example-bad">if (x = y) {
+  // do the right thing
+}
+</pre>
+
+<p>Wenn es notwendig ist eine Zuweisung in einem bedingten Ausdruck einzusetzen, ist es verbreitet, diese mit runden Klammern einzuklammern. Zum Beispiel:</p>
+
+<pre class="brush: js">if ((x = y)) {
+  // do the right thing
+}</pre>
+
+<p>Andernfalls kann es sein, dass eigentliche eine Vergleichsoperation gemeint war (z. B. <code>==</code> oder <code>===</code>):</p>
+
+<pre class="brush: js">if (x == y) {
+  // do the right thing
+}</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Strict_mode">Strict mode</a></li>
+ <li><code><a href="/de/docs/Web/JavaScript/Reference/Statements/if...else">if...else</a></code></li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">Vergleichsoperatoren</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/for-each-in_loops_are_deprecated/index.html b/files/de/web/javascript/reference/fehler/for-each-in_loops_are_deprecated/index.html
new file mode 100644
index 0000000000..2651ea45ba
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/for-each-in_loops_are_deprecated/index.html
@@ -0,0 +1,168 @@
+---
+title: 'Warning: JavaScript 1.6''s for-each-in loops are deprecated'
+slug: Web/JavaScript/Reference/Fehler/For-each-in_loops_are_deprecated
+tags:
+  - JavaScript
+  - Warning
+translation_of: Web/JavaScript/Reference/Errors/For-each-in_loops_are_deprecated
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">Warning: JavaScript 1.6's for-each-in loops are deprecated; consider using ES6 for-of instead
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>Warnung</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Das {{jsxref("Statements/for_each...in", "for each (variable in obj)")}} Statement aus JavaScript 1.6 ist veraltet und wird in naher Zukunft entfernt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Objektiteration">Objektiteration</h3>
+
+<p>{{jsxref("Statements/for_each...in", "for each...in")}} wurde eingesetzt, um über spezifizierte Objektwerte zu iterieren.</p>
+
+<h4 id="Veraltete_Syntax">Veraltete Syntax</h4>
+
+<pre class="brush: js example-bad">var object = { a: 10, b: 20 };
+
+for each (var x in object) {
+  console.log(x);        // 10
+                         // 20
+}
+</pre>
+
+<h4 id="Alternative_Standardsyntax">Alternative Standardsyntax</h4>
+
+<p>Man kann die Standardschleife {{jsxref("Statements/for...in", "for...in")}} benutzen, um über spezifizierte Objektschlüssel zu iterieren und jeden Wert in der Schleife auszulesen:</p>
+
+<pre class="brush: js example-good">var object = { a: 10, b: 20 };
+
+for (var key in object) {
+  var x = object[key];
+  console.log(x);        // 10
+                         // 20
+}
+</pre>
+
+<p>Oder man benutzt {{jsxref("Statements/for...of", "for...of")}} (ES2015) und {{jsxref("Object.values")}} (ES2017), um ein Array von spezifizerten Werten zu bekommen und über diese zu iterieren:</p>
+
+<pre class="brush: js example-good">var object = { a: 10, b: 20 };
+
+for (var x of Object.values(object)) {
+  console.log(x);        // 10
+                         // 20
+}
+</pre>
+
+<h3 id="Arrayiteration">Arrayiteration</h3>
+
+<p>{{jsxref("Statements/for_each...in", "for each...in")}} wurde eingesetzt, um über spezifizierte Arrayelemente zu iterieren.</p>
+
+<h4 id="Veraltete_Syntax_2">Veraltete Syntax</h4>
+
+<pre class="brush: js example-bad">var array = [10, 20, 30];
+
+for each (var x in array) {
+  console.log(x);        // 10
+                         // 20
+                         // 30
+}
+</pre>
+
+<h4 id="Alternative_Standardsyntax_2">Alternative Standardsyntax</h4>
+
+<p>Dieses ist mit der {{jsxref("Statements/for...of", "for...of Schleife")}} (ES2015) möglich.</p>
+
+<pre class="brush: js example-good">var array = [10, 20, 30];
+
+for (var x of array) {
+  console.log(x);        // 10
+                         // 20
+                         // 30
+}
+</pre>
+
+<h3 id="Iterieren_über_ein_Arrays_oder_null">Iterieren über ein Arrays oder null</h3>
+
+<p>{{jsxref("Statements/for_each...in", "for each...in")}} tut nichts, wenn der übergebene Wert <code>null</code> oder <code>undefined</code> ist. {{jsxref("Statements/for...of", "for...of")}} erzeugt in diesem Fall einen Fehler.</p>
+
+<h4 id="Veraltete_Syntax_3">Veraltete Syntax</h4>
+
+<pre class="brush: js example-bad">function func(array) {
+  for each (var x in array) {
+    console.log(x);
+  }
+}
+func([10, 20]);        // 10
+                       // 20
+func(null);            // prints nothing
+func(undefined);       // prints nothing
+</pre>
+
+<h4 id="Alternative_Standardsyntax_3">Alternative Standardsyntax</h4>
+
+<p>Um das {{jsxref("Statements/for_each...in", "for each...in")}} Statement neu zu schreibe, so dass <code>null</code> oder <code>undefined</code> mit {{jsxref("Statements/for...of", "for...of")}} funktionieren, muss eine Bedingung um {{jsxref("Statements/for...of", "for...of")}} verfasst werden.</p>
+
+<pre class="brush: js example-good">function func(array) {
+  if (array) {
+    for (var x of array) {
+      console.log(x);
+    }
+  }
+}
+func([10, 20]);        // 10
+                       // 20
+func(null);            // prints nothing
+func(undefined);       // prints nothing
+</pre>
+
+<h3 id="Über_Objekt-Schlüssel-Werte-Paare_iterieren">Über Objekt-Schlüssel-Werte-Paare iterieren</h3>
+
+<h4 id="Veraltete_Syntax_4">Veraltete Syntax</h4>
+
+<p>Es gibt eine veraltete Dialekt, der das Iterieren über Objekt-Schlüssel-Werte-Paare mit {{jsxref("Statements/for_each...in", "for each...in")}} und mit dem veralteten {{jsxref("Iterator")}} Objekt erlaubt.</p>
+
+<pre class="brush: js example-bad">var object = { a: 10, b: 20 };
+
+for each (var [key, value] in Iterator(object)) {
+  console.log(key, value);  // "a", 10
+                            // "b", 20
+}
+</pre>
+
+<h4 id="Alternative_Standardsyntax_4">Alternative Standardsyntax</h4>
+
+<p>Man kann die Standardschleife {{jsxref("Statements/for...in", "for...in")}} benutzen, um über spezifizierte Objektschlüssel zu iterieren und jeden Wert in der Schleife auszulesen:</p>
+
+<pre class="brush: js example-good">var object = { a: 10, b: 20 };
+
+for (var key in object) {
+  var value = object[key];
+  console.log(key, value);  // "a", 10
+                            // "b", 20
+}
+</pre>
+
+<p>Oder man benutzt {{jsxref("Statements/for...of", "for...of")}} (ES2015) und {{jsxref("Object.values")}} (ES2017), um ein Array von spezifizerten Werten zu bekommen und über diese zu iterieren:</p>
+
+<pre class="brush: js example-good">var object = { a: 10, b: 20 };
+
+for (var [key, value] of Object.entries(object)) {
+  console.log(key, value);  // "a", 10
+                            // "b", 20
+}
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Statements/for...of", "for...of")}}</li>
+ <li>{{jsxref("Object.values")}}</li>
+ <li>{{jsxref("Object.entries")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/getter_only/index.html b/files/de/web/javascript/reference/fehler/getter_only/index.html
new file mode 100644
index 0000000000..268ee0cbf1
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/getter_only/index.html
@@ -0,0 +1,83 @@
+---
+title: 'TypeError: setting getter-only property "x"'
+slug: Web/JavaScript/Reference/Fehler/Getter_only
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - Strict Mode
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Getter_only
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">TypeError: setting getter-only property "x" (Firefox)
+TypeError: Cannot set property "prop" of #&lt;Object&gt; which has only a getter (Chrome)
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("TypeError")}} nur im <a href="/de/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>.</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Wenn versucht wird einen neuen Wert einer Wichenschaft zuzuweisen, welche nur als <a href="/de/docs/Web/JavaScript/Reference/Functions/get">Getter</a> spezifiziert wurde. Wenn kein strict mode verwendet wird, wird dieses stillschweigend ignoriert, während im <a href="/de/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a> ein {{jsxref("TypeError")}} erzeugt wird.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Das folgende Beispiel zeigt, wie eine Eigenschaft als Getter eingestellt wird. Es wird kein <a href="/de/docs/Web/JavaScript/Reference/Functions/set">Setter</a> definiert, so dass ein <code>TypeError</code> erzeugt wird, wenn die <code>temperature</code> Eigenschaft mit dem Wert <code>30</code> beschrieben werden soll. Für mehr Details siehe auf der {{jsxref("Object.defineProperty()")}} Seite.</p>
+
+<pre class="brush: js example-bad">"use strict";
+
+function Archiver() {
+  var temperature = null;
+  Object.defineProperty(this, 'temperature', {
+    get: function() {
+      console.log('get!');
+      return temperature;
+    }
+  });
+}
+
+var arc = new Archiver();
+arc.temperature; // 'get!'
+
+arc.temperature = 30;
+// TypeError: setting getter-only property "temperature"</pre>
+
+<p>Um den Fehler zu beheben, muss einefach die Zeile 16 entfernt werden, weil dort der Versuch ist die <code>temperature</code> Eigenschaft zu beschreiben, oder es muss ein <a href="/de/docs/Web/JavaScript/Reference/Functions/set">Setter</a> definiert werden, wie zum Beispiel dieser:</p>
+
+<pre class="brush: js example-good highlight[12]">"use strict";
+
+function Archiver() {
+  var temperature = null;
+  var archive = [];
+
+  Object.defineProperty(this, 'temperature', {
+    get: function() {
+      console.log('get!');
+      return temperature;
+    },
+    set: function(value) {
+      temperature = value;
+      archive.push({ val: temperature });
+    }
+  });
+
+  this.getArchive = function() { return archive; };
+}
+
+var arc = new Archiver();
+arc.temperature; // 'get!'
+arc.temperature = 11;
+arc.temperature = 13;
+arc.getArchive(); // [{ val: 11 }, { val: 13 }]</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.defineProperties()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/identifier_after_number/index.html b/files/de/web/javascript/reference/fehler/identifier_after_number/index.html
new file mode 100644
index 0000000000..64cb9cdfe3
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/identifier_after_number/index.html
@@ -0,0 +1,53 @@
+---
+title: 'SyntaxError: identifier starts immediately after numeric literal'
+slug: Web/JavaScript/Reference/Fehler/Identifier_after_number
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Identifier_after_number
+---
+<div>{{JSSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">SyntaxError: identifier starts immediately after numeric literal (Firefox)
+SyntaxError: Unexpected number (Chrome)
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Die Namen von Variablen, {{Glossary("Identifier", "Bezeichner")}} genannt, haben einige Regeln, die der Code erfüllen muss.</p>
+
+<p>Ein Bezeichner in JavaScript muss mit einem Buchstaben, einem Unterstrich (_) oder einem Dollarzeichen ($) starten. Er kann nicht mit einer Ziffer beginnen. Nur nachfolgende Zeichen sind Ziffern (0-9).</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Variablenname_der_mit_einer_Ziffer_beginnt">Variablenname der mit einer Ziffer beginnt</h3>
+
+<p>Variablennamen dürfen in JavaScript nicht mit einer Zahl beginnen. Das folgende wird nciht funktionieren:</p>
+
+<pre class="brush: js example-bad">var 1life = 'foo';
+// SyntaxError: identifier starts immediately after numeric literal
+
+var foo = 1life;
+// SyntaxError: identifier starts immediately after numeric literal
+</pre>
+
+<p>Man muss die Variable neu benenne, um die führende Zahl im Namen zu vermeiden.</p>
+
+<pre class="brush: js example-good">var life1 = 'foo';
+var foo = life1;
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Lexical_grammar">Lexikalische Grammatik</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Guide/Grammar_and_types#Variablen">Variablen</a> im <a href="/de/docs/Web/JavaScript/Guide">JavaScript Guide</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/illegal_character/index.html b/files/de/web/javascript/reference/fehler/illegal_character/index.html
new file mode 100644
index 0000000000..e0c083022c
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/illegal_character/index.html
@@ -0,0 +1,80 @@
+---
+title: 'SyntaxError: illegal character'
+slug: Web/JavaScript/Reference/Fehler/Illegal_character
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Illegal_character
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">SyntaxError: illegal character (Firefox)
+SyntaxError: Invalid or unexpected token (Chrome)
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Es gibt ein nicht valides oder nicht erwartetes Token, welches nicht an eine Position im Code passt. Man sollte einen Editor mit Syntaxhighlighting benutzten und vorsichtig nach Verwechselungen suchen, wie einem Minuszeichen (<code> - </code>) und einem Dashzeichen (<code> – </code>) oder einfachen Anführungszeichen (<code> " </code>) und anderen Anführungszeichen (<code> “ </code>).</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Verwechseltes_Zeichen">Verwechseltes Zeichen</h3>
+
+<p>Einige Zeichen sehen sehr ähnlich aus, aber führen dazu, dass der Code nicht interpretiert werden kann. Bekannte Beispiele dafür sind Anführungszeichen, das Minus oder das Semikolon (<a href="https://de.wikipedia.org/wiki/Fragezeichen#Weitere_Schriftsysteme">griechisches Fragezeichen (U+37e)</a> sieht genauso aus)</p>
+
+<pre class="brush: js example-bad line-numbers  language-js">“This looks like a string”;  // SyntaxError: illegal character
+                             // “ und ” sind nicht ", aber sehen so aus
+
+42 – 13;                     // SyntaxError: illegal character
+                             // – sind nicht -, aber sieht so aus
+
+var foo = 'bar';             <code class="language-js"><span class="comment token">// SyntaxError: illegal character
+                             </span></code>// &lt;37e&gt; sind nicht ;, aber sieht so aus
+</pre>
+
+<p>Das funktioniert:</p>
+
+<pre class="brush: js example-good">"This is actually a string";
+42 - 13;
+var foo = 'bar';
+</pre>
+
+<p>Einige Editoren und IDEs werden darauf hinweisen oder dieses anderes hervorheben, aber nicht alle. Wenn manchmal so etwas im Code passiert und man in der Lage ist das Problem zu finden, ist es oft das beste die Zeile zu löschen und sie neu einzutippen.</p>
+
+<h3 id="Vergessene_Zeichen">Vergessene Zeichen</h3>
+
+<p>Es passiert schnell, dass man ein Zeichen vergisst.</p>
+
+<pre class="brush: js example-bad">var colors = ['#000', #333', '#666'];
+// SyntaxError: illegal character
+</pre>
+
+<p>Man muss das fehlende Anführungszeichen ergänzen <code><strong>'</strong>#333'</code>.</p>
+
+<pre class="brush: js example-good">var colors = ['#000', '#333', '#666'];</pre>
+
+<h3 id="Nicht_sichtbare_Zeichen">Nicht sichtbare Zeichen</h3>
+
+<p>Beim Kopieren und Einfügen von Code aus externen Quellen kann es nicht valide Zeichen geben. Zum Beispiel:</p>
+
+<pre class="brush: js example-bad">var foo = 'bar';​
+// SyntaxError: illegal character
+</pre>
+
+<p>Wenn man den Code in einem Editor wie Vim anschaut, bemerkt man, dass ein<a href="https://de.wikipedia.org/wiki/Breitenloses_Leerzeichen"> breitenloses Leerzeichen (ZWSP) (U+200B)</a> benutzt wird.</p>
+
+<pre class="brush: js">var foo = 'bar';​&lt;200b&gt;</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Lexical_grammar">Lexikalische Grammatik</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/in_operator_no_object/index.html b/files/de/web/javascript/reference/fehler/in_operator_no_object/index.html
new file mode 100644
index 0000000000..6bace66437
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/in_operator_no_object/index.html
@@ -0,0 +1,72 @@
+---
+title: 'TypeError: cannot use ''in'' operator to search for ''x'' in ''y'''
+slug: Web/JavaScript/Reference/Fehler/in_operator_no_object
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/in_operator_no_object
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">TypeError: right-hand side of 'in' should be an object, got 'x' (Firefox)
+TypeError: cannot use 'in' operator to search for 'x' in 'y' (Firefox, Chrome)
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Der <a href="/de/docs/Web/JavaScript/Reference/Operators/in"><code>in</code> Operator</a> kan nur für das Prüfen von Eigenschaften in Objekten genutzt werden. Man kann nicht in Strings, Nummern oder anderen primitiven Typen suchen.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Suchen_in_Strings">Suchen in Strings</h3>
+
+<p>Im Vergleich zu anderen Programmiersprachen (z. B. Python) kann in Strings nicht mit dem <a href="/de/docs/Web/JavaScript/Reference/Operators/in"><code>in</code> Operator</a> gesucht werden.</p>
+
+<pre class="brush: js example-bad">"Hello" in "Hello World";
+// TypeError: cannot use 'in' operator to search for 'Hello' in 'Hello World'</pre>
+
+<p>Stattdessen kann zum Beispiel {{jsxref("String.prototype.indexOf()")}} eingesetzt werden.</p>
+
+<pre class="brush: js example-good">"Hello World".indexOf("Hello") !== -1;
+// true</pre>
+
+<h3 id="Der_Operand_kann_nicht_null_oder_undefined_sein">Der Operand kann nicht <code>null</code> oder <code>undefined</code> sein</h3>
+
+<p>Man muss sicherstellen, dass der Operand nicht {{jsxref("null")}} oder {{jsxref("undefined")}} ist.</p>
+
+<pre class="brush: js example-bad">var foo = null;
+"bar" in foo;
+// TypeError: cannot use 'in' operator to search for 'bar' in 'foo' (Chrome)
+// TypeError: right-hand side of 'in' should be an object, got null (Firefox)
+</pre>
+
+<p>Der <code>in</code> Operator erwartet immer ein Objekt.</p>
+
+<pre class="brush: js example-good">var foo = { baz: "bar" };
+"bar" in foo; // false
+
+"PI" in Math; // true
+"pi" in Math; // false
+</pre>
+
+<h3 id="Suchen_in_Arrays">Suchen in Arrays</h3>
+
+<p>Man muss vorsichtig sein, wenn der <code>in</code> Operator in {{jsxref("Array")}} Objekten genutzt wird. Der <code>in</code> Operator prüft die Indexnummern, aber nicht die Werte des Indizes.</p>
+
+<pre class="brush: js">var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple'];
+3 in trees; // true
+"oak" in trees; // false</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Operators/in"><code>in</code> Operator</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/index.html b/files/de/web/javascript/reference/fehler/index.html
new file mode 100644
index 0000000000..67809031e7
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/index.html
@@ -0,0 +1,29 @@
+---
+title: JavaScript Fehler Referenz
+slug: Web/JavaScript/Reference/Fehler
+tags:
+  - Debugging
+  - Error
+  - Errors
+  - Exception
+  - JavaScript
+  - exceptions
+translation_of: Web/JavaScript/Reference/Errors
+---
+<p>{{jsSidebar("Errors")}}</p>
+
+<p>Unten ist eine Liste von Fehlern, die in JavaScript auftauchen können. Diese Fehler können beim Debuggen hilfreich sein, jedoch sind die Probleme nicht immer so klar. Die untenstehenden Seiten enthalten Details zu diesen Fehlern. Jeder Fehler ist ein Objekt, welches auf dem {{jsxref("Error")}} Objekt basieren und haben einen <code>name</code> und eine Fehlermeldung (<code>message</code>).</p>
+
+<p>Fehler die in der Webconsole angezeigt werden enthalten manchmal einen Link zu einer der untenstehenden Seiten, um die Lösung von Problemen zu beschleunigen.</p>
+
+<h2 id="Liste_von_Fehlern">Liste von Fehlern</h2>
+
+<p>In dieser Liste ist jede Seite mit einem Namen (der Typ des Fehlers) und einer Fehlermeldung (eine detailliertere, verständlichere Meldung) aufgeführt. Diese beiden Eigenschaften eines Fehlers sind ein Einstiegspunkt für das Verständnis und das Lösen des Fehlers. Für mehr Informationen folge den folgenden Links!</p>
+
+<p>{{ListSubPages("/en-US/docs/Web/JavaScript/Reference/Errors")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Learn/JavaScript/First_steps/What_went_wrong">Was ist falsch gelaufen? Fehlerbehandlung in JavaScript</a>: Tutorial für Anfänger, welches das beheben von Fehlern zeigt.</li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/invalid_array_length/index.html b/files/de/web/javascript/reference/fehler/invalid_array_length/index.html
new file mode 100644
index 0000000000..34edeb2969
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/invalid_array_length/index.html
@@ -0,0 +1,77 @@
+---
+title: 'RangeError: invalid array length'
+slug: Web/JavaScript/Reference/Fehler/Invalid_array_length
+tags:
+  - Errors
+  - JavaScript
+  - RangeError
+translation_of: Web/JavaScript/Reference/Errors/Invalid_array_length
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">RangeError: invalid array length (Firefox)
+RangeError: Invalid array length (Chrome)
+RangeError: Invalid array buffer length (Chrome)
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("RangeError")}}</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>entweder:</p>
+
+<ul>
+ <li>ein {{jsxref("Array")}} oder ein {{jsxref("ArrayBuffer")}} wurde mit einer negativen oder einer Zahl größer gleich 2<sup>32</sup> erzeugt, oder</li>
+ <li>die {{jsxref("Array.length")}} Eigenschaft  wurde auf eine negative oder eine Zahl größer gleich 2<sup>32</sup>  gesetzt.</li>
+</ul>
+
+<p>Warum ist die Länge von Array and <code>ArrayBuffer</code> limitiert? Die <code>length</code> Eigenschaft von <code>Array </code>und <code>ArrayBuffer </code>ist mit einem vorzeichenlosen 32-bit Integer definiert, sodass nur Werte von 0 bis 2<sup>32</sup>-1 gültig sind.</p>
+
+<p>Wenn man ein Array mit dem Konstruktor erzeugen möchte, statt mit der Literalnotation, sollte man aufpassem, dass das erste Argument als Länge des Arrays interpretiert wird.</p>
+
+<p>Man sollte die Länge festlegen, bevor man die <code>length</code> Eigenschaft setzt, oder mit dem ersten Argument im Konstruktor.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Ungültige_Fälle">Ungültige Fälle</h3>
+
+<pre class="brush: js example-bad">new Array(Math.pow(2, 40))
+new Array(-1)
+new ArrayBuffer(Math.pow(2, 32))
+new ArrayBuffer(-1)
+
+let a = [];
+a.length = a.length - 1;         // length Eigenschaft auf -1 gesetzt
+
+let b = new Array(Math.pow(2, 32) - 1);
+b.length = b.length + 1;         // length Eigenschaft auf 2^32 gesetzt
+</pre>
+
+<h3 id="Gültige_Fälle">Gültige Fälle</h3>
+
+<pre class="brush: js example-good">[ Math.pow(2, 40) ]                     // [ 1099511627776 ]
+[ -1 ]                                  // [ -1 ]
+new ArrayBuffer(Math.pow(2, 32) - 1)
+new ArrayBuffer(0)
+
+let a = [];
+a.length = Math.max(0, a.length - 1);
+
+let b = new Array(Math.pow(2, 32) - 1);
+b.length = Math.min(0xffffffff, b.length + 1);
+
+// 0xffffffff ist die hexadecimal Notation für 2^32 - 1
+// kann auch als (-1 &gt;&gt;&gt; 0) geschrieben werden
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Array.length")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/invalid_assignment_left-hand_side/index.html b/files/de/web/javascript/reference/fehler/invalid_assignment_left-hand_side/index.html
new file mode 100644
index 0000000000..6e727fb9a2
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/invalid_assignment_left-hand_side/index.html
@@ -0,0 +1,53 @@
+---
+title: 'ReferenceError: invalid assignment left-hand side'
+slug: Web/JavaScript/Reference/Fehler/Invalid_assignment_left-hand_side
+tags:
+  - Errors
+  - JavaScript
+  - ReferenceError
+translation_of: Web/JavaScript/Reference/Errors/Invalid_assignment_left-hand_side
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">ReferenceError: invalid assignment left-hand side
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("ReferenceError")}}.</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Es gibt irgendwo eine unerwartete Zuweisung. Das kann zum Beispiel durch eine nicht Übereinstimmung des <a href="/de/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Zuweisungsoperators</a> und eines <a href="/de/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">Vergleichsoperators</a> hervorgerufen werden. Während ein einzelnes "<code>=</code>" Zeichen einer Variable einen Wert zuweist, vergleichen  "<code>==</code>" und "<code>===</code>" zwei Werte.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js example-bad">if (Math.PI = 3 || Math.PI = 4) {
+  console.log('no way!');
+}
+// ReferenceError: invalid assignment left-hand side
+
+var str = 'Hello, '
++= 'is it me '
++= 'you\'re looking for?';
+// ReferenceError: invalid assignment left-hand side</pre>
+
+<p>In dem <code>if</code> Statement wird ein Vergleichsoperator ("==") und für die Stringverkettung ein plus ("+") Operator benötigt.</p>
+
+<pre class="brush: js example-good">if (Math.PI == 3 || Math.PI == 4) {
+  console.log('no way!');
+}
+
+var str = 'Hello, '
++ 'from the '
++ 'other side!';
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Zuweisungsoperatoren</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">Vergleichsoperatoren</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/invalid_const_assignment/index.html b/files/de/web/javascript/reference/fehler/invalid_const_assignment/index.html
new file mode 100644
index 0000000000..812577360a
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/invalid_const_assignment/index.html
@@ -0,0 +1,90 @@
+---
+title: 'TypeError: invalid assignment to const "x"'
+slug: Web/JavaScript/Reference/Fehler/Invalid_const_assignment
+tags:
+  - Error
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Invalid_const_assignment
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">TypeError: invalid assignment to const "x" (Firefox)
+TypeError: Assignment to constant variable. (Chrome)
+TypeError: Redeclaration of const 'x' (IE/Edge)
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Eine Konstante ist ein Wert, der nicht von einem Programm während der normalen Ausführung, geändert werden kann. Sie kann nicht durch erneutes Zuweisen und Neudeklarationen geändert werden. In JavaScript werden Konstanten mit dem <code><a href="/de/docs/Web/JavaScript/Reference/Statements/const">const</a></code> Schlüsselwort deklariert.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="Nicht_valide_Neudeklaration">Nicht valide Neudeklaration</h3>
+
+<p>Weist eine Konstanten erneut einen Wert zu. Führt zu einem Fehler.</p>
+
+<pre class="brush: js example-bad">const COLUMNS = 80;
+
+// ...
+
+COLUMNS = 120; // TypeError: invalid assignment to const `COLUMNS'</pre>
+
+<h3 id="Den_Fehler_auflösen">Den Fehler auflösen</h3>
+
+<p>Es gibt mehrere Optionen, um den Fehler zu vermeiden. <span id="result_box" lang="de"><span>Überprüfen Sie, was mit der betreffenden Konstante erreicht werden sollte.</span></span></p>
+
+<h4 id="Umbenennen">Umbenennen</h4>
+
+<p><span id="result_box" lang="de"><span>Wenn Sie eine andere Konstante deklarieren möchten, wählen Sie einen anderen Namen und benennen Sie ihn um.</span> <span>Dieser konstante Name ist dann in diesem Bereich vergeben.</span></span></p>
+
+<pre class="brush: js example-good">const COLUMNS = 80;
+const WIDE_COLUMNS = 120;</pre>
+
+<h4 id="const_let_or_var"><code>const</code>, <code>let</code> or <code>var</code>?</h4>
+
+<p><span id="result_box" lang="de"><span>Verwenden Sie nicht <code>const</code>, wenn Sie keine Konstante deklarieren wollten. Vielleicht soll eine Blockvariable mit </span></span><code><a href="/de/docs/Web/JavaScript/Reference/Statements/let">let</a></code> oder eine globale Variable mit <code><a href="/de/docs/Web/JavaScript/Reference/Statements/var">var</a></code> deklariert werden.</p>
+
+<pre class="brush: js example-good">let columns = 80;
+
+// ...
+
+let columns = 120;
+</pre>
+
+<h4 id="Gültigkeitsbereich">Gültigkeitsbereich</h4>
+
+<p>Prüfen Sie, ob Sie im richtigen Gültigkeitsbereich sind. Sollte diese Konstante in diesen Gültigkeitsbereich oder sollte diese zum Beispiel in eine Funktion.</p>
+
+<pre class="brush: js example-good">const COLUMNS = 80;
+
+function setupBigScreenEnvironment() {
+  const COLUMNS = 120;
+}</pre>
+
+<h3 id="const_und_Unveränderlichkeit"><code>const</code> und Unveränderlichkeit</h3>
+
+<p>Die <code>const</code> Deklaration erstellt eine nur lesbare Referenz zu einem Wert. Das bedeutet nicht, dass der enthaltene Wert Unveränderbar ist, sondern nur, dass der Bezeichner nicht neu definiert werden kann. Wenn die Konstante zum Beispiel ein Objekt ist, kann das Objekt selbst verändert werden. Es bedeutet nur, dass der Wert in der Variable nicht verändert werden kann.</p>
+
+<pre class="brush: js example-bad">const obj = {foo: 'bar'};
+obj = {foo: 'baz'}; // TypeError: invalid assignment to const `obj'
+</pre>
+
+<p>Aber man kann die Eigenschaften der Variable verändern:</p>
+
+<pre class="brush: js example-good">obj.foo = 'baz';
+obj; // Object { foo: "baz" }</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><code><a href="/de/docs/Web/JavaScript/Reference/Statements/const">const</a></code></li>
+ <li><code><a href="/de/docs/Web/JavaScript/Reference/Statements/let">let</a></code></li>
+ <li><code><a href="/de/docs/Web/JavaScript/Reference/Statements/var">var</a></code></li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/invalid_date/index.html b/files/de/web/javascript/reference/fehler/invalid_date/index.html
new file mode 100644
index 0000000000..04954fe28f
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/invalid_date/index.html
@@ -0,0 +1,54 @@
+---
+title: 'RangeError: invalid date'
+slug: Web/JavaScript/Reference/Fehler/Invalid_date
+tags:
+  - Errors
+  - JavaScript
+  - RangeError
+translation_of: Web/JavaScript/Reference/Errors/Invalid_date
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">RangeError: invalid date (Firefox)
+RangeError: invalid time value (Chrome)
+RangeError: Provided date is not in valid range (Chrome)
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("RangeError")}}</p>
+
+<h2 id="Was_ist_schief_gelaufen">Was ist schief gelaufen?</h2>
+
+<p><span id="result_box" lang="de"><span>Eine Zeichenfolge, die ein ungültiges Datum enthält, wurde </span></span> {{jsxref("Date")}} oder {{jsxref("Date.parse()")}} übergeben.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Nicht_valide_Fälle">Nicht valide Fälle</h3>
+
+<p>Nicht erkennbare Strings oder Daten, welche nicht erlaubte Elementewerte im ISO formatierten String enthalten, geben gewöhnlich {{jsxref("NaN")}} zurück. Abhängig von der Implementierung kann es auch sein, dass nicht valide ISO Formate, einen <code>RangeError: invalid date</code> erzeugen, wie die folgenden Fällen in Firefox:</p>
+
+<pre class="brush: js example-bad">new Date('foo-bar 2014');
+new Date('2014-25-23').toISOString();
+new Date('foo-bar 2014').toString();
+</pre>
+
+<p>Das folgende gibt in Firefox {{jsxref("NaN")}} zurück.</p>
+
+<pre class="brush: js example-bad">Date.parse('foo-bar 2014'); // NaN</pre>
+
+<p>Für mehr Details, sollte die {{jsxref("Date.parse()")}} Dokumentation angesehen werden.</p>
+
+<h3 id="Valide_Fälle">Valide Fälle</h3>
+
+<pre class="brush: js example-good">new Date('05 October 2011 14:48 UTC');</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Date")}}</li>
+ <li>{{jsxref("Date.prototype.parse()")}}</li>
+ <li>{{jsxref("Date.prototype.toISOString()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/invalid_for-in_initializer/index.html b/files/de/web/javascript/reference/fehler/invalid_for-in_initializer/index.html
new file mode 100644
index 0000000000..bc4bf80c70
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/invalid_for-in_initializer/index.html
@@ -0,0 +1,74 @@
+---
+title: 'SyntaxError: for-in loop head declarations may not have initializers'
+slug: Web/JavaScript/Reference/Fehler/Invalid_for-in_initializer
+tags:
+  - Error
+  - JavaScript
+  - Strict Mode
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Invalid_for-in_initializer
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">SyntaxError: for-in loop head declarations may not have initializers (Firefox)
+
+SyntaxError: for-in loop variable declaration may not have an initializer. (Chrome)
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("SyntaxError")}} nur im <a href="/de/docs/Web/JavaScript/Reference/Strict_mode">Strict Mode</a>.</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Der Kopf einer <a href="/de/docs/Web/JavaScript/Reference/Statements/for...in"> for...in</a> Schleife enthält einen Initialisierungsausdruck. Das ist, wenn eine Variable deklariert und mit einem Wert initialisiert wird (<code>for(var i = 0 in obj)</code>). Ohne Strict Mode wird die Initialisierung still ignoriert und verhält sich wie <code>for(var i in obj)</code>. Im <a href="/de/docs/Web/JavaScript/Reference/Strict_mode">Strict Mode</a> wird ein <code>SyntaxError</code> erzeugt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Das Beispiel erzeugt einen <code>SyntaxError</code>:</p>
+
+<pre class="brush: js example-bad">"use strict";
+
+var obj = {a: 1, b: 2, c: 3 };
+
+for (var i = 0 in obj) {
+  console.log(obj[i]);
+}
+
+// SyntaxError: for-in loop head declarations may not have initializers
+</pre>
+
+<h3 id="Valide_for-in_Schleife">Valide for-in Schleife</h3>
+
+<p>Man kann die Initialisierung (<code>i = 0</code>) im Kopf der for-in Schleife entfernen.</p>
+
+<pre class="brush: js example-good">"use strict";
+
+var obj = {a: 1, b: 2, c: 3 };
+
+for (var i in obj) {
+  console.log(obj[i]);
+}
+</pre>
+
+<h3 id="Array_Iteration">Array Iteration</h3>
+
+<p>Die for...in Schleife <a href="/de/docs/Web/JavaScript/Reference/Statements/for...in#Array_Iteration_und_for...in">sollte nicht für Array Iterationen benutzt werden</a>. Zum Iterieren von durch ein {{jsxref("Array")}} sollte eine <code><a href="/de/docs/Web/JavaScript/Reference/Statements/for">for</a></code> Schleife statt einer <code>for-in</code> Schleife benutzt werden. Die <code>for</code> Schleife erlaubt es dann auch eine Initialisierung vorzunehmen:</p>
+
+<pre class="brush: js example-good">var arr = [ "a", "b", "c" ]
+
+for (var i = 2; i &lt; arr.length; i++) {
+  console.log(arr[i]);
+}
+
+// "c"</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><code><a href="/de/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code></li>
+ <li><code><a href="/de/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></code> – ebenfalls keine Initialisierung erlaubt (im Strict und normalen Mode).</li>
+ <li><code><a href="/de/docs/Web/JavaScript/Reference/Statements/for">for</a></code> – Präferiert für das Iterieren über ein Array. Erlaubt das Initialisieren.</li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/invalid_for-of_initializer/index.html b/files/de/web/javascript/reference/fehler/invalid_for-of_initializer/index.html
new file mode 100644
index 0000000000..3270387357
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/invalid_for-of_initializer/index.html
@@ -0,0 +1,63 @@
+---
+title: >-
+  SyntaxError: a declaration in the head of a for-of loop can't have an
+  initializer
+slug: Web/JavaScript/Reference/Fehler/Invalid_for-of_initializer
+tags:
+  - Error
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Invalid_for-of_initializer
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">SyntaxError: a declaration in the head of a for-of loop can't have an initializer (Firefox)
+
+SyntaxError: for-of loop variable declaration may not have an initializer. (Chrome)
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Was_falsch_gelaufen_ist">Was falsch gelaufen ist?</h2>
+
+<p>Der Kopf einer <a href="/de/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a> Schleife enthält einen Initialisierungsausdruck. Das ist eine Variable die deklariert und initialisiert wird |<code>for (var i = 0 of iterable)</code>|. Dieses ist nicht erlaubt in for...of Schleifen. Manchmal ist eine <code><a href="/de/docs/Web/JavaScript/Reference/Statements/for">for</a></code> Schleife gemeint, die eine Initialisierung erlaubt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Nicht_valide_for...of_Schleife">Nicht valide <code>for...of</code> Schleife</h3>
+
+<pre class="brush: js example-bad">let iterable = [10, 20, 30];
+
+for (let value = 50 of iterable) {
+  console.log(value);
+}
+
+// SyntaxError: a declaration in the head of a for-of loop can't
+// have an initializer</pre>
+
+<h3 id="Valide_for...of_Schleife">Valide <code>for...of</code> Schleife</h3>
+
+<p>Man muss die Initialisierung (<code>value = 50</code>) im Kopf der <code>for...of</code> Schleife entfernen. Wenn 50 als Offset gedacht ist, kann man eine Addition in den Körper der Schleife verschieben, wie im folgenden Beispiel:</p>
+
+<pre class="brush: js example-good">let iterable = [10, 20, 30];
+
+for (let value of iterable) {
+  value += 50;
+  console.log(value);
+}
+// 60
+// 70
+// 80
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><code><a href="/de/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></code></li>
+ <li><code><a href="/de/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code> – Verbietet ebenfalls eine Initialisierung im Strict Mode (<a href="/de/docs/Web/JavaScript/Reference/Errors/Invalid_for-in_initializer">SyntaxError: for-in loop head declarations may not have initializers</a>)</li>
+ <li><code><a href="/de/docs/Web/JavaScript/Reference/Statements/for">for</a></code> – Erlaubt eine Initialisierung beim Iterieren.</li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/invalid_right_hand_side_instanceof_operand/index.html b/files/de/web/javascript/reference/fehler/invalid_right_hand_side_instanceof_operand/index.html
new file mode 100644
index 0000000000..771838b428
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/invalid_right_hand_side_instanceof_operand/index.html
@@ -0,0 +1,62 @@
+---
+title: 'TypeError: invalid ''instanceof'' operand ''x'''
+slug: Web/JavaScript/Reference/Fehler/invalid_right_hand_side_instanceof_operand
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - Reference
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/invalid_right_hand_side_instanceof_operand
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">TypeError: invalid 'instanceof' operand "x" (Firefox)
+TypeError: "x" is not a function (Firefox)
+TypeError: Right-hand side of 'instanceof' is not an object (Chrome)
+TypeError: Right-hand side of 'instanceof' is not callable (Chrome)</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Der <a href="/de/docs/Web/JavaScript/Reference/Operators/instanceof"><code>instanceof</code> Operator</a> erwartet als rechten Operand einen Konstruktorobjekt, z. B. ein Objekt, welches eine <code>prototype</code> Eigenschaft hat und aufrufbar ist.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js example-bad">"test" instanceof ""; // TypeError: invalid 'instanceof' operand ""
+42 instanceof 0;      // TypeError: invalid 'instanceof' operand 0
+
+function Foo() {}
+var f = Foo();        // Foo() is called and returns undefined
+var x = new Foo();
+
+x instanceof f;       // TypeError: invalid 'instanceof' operand f
+x instanceof x;       // TypeError: x is not a function
+</pre>
+
+<p>Um diesen Fehler zu beheben, kann entweder der <a href="/de/docs/Web/JavaScript/Reference/Operators/instanceof"><code>instanceof</code> Operator</a> durch einen <a href="/de/docs/Web/JavaScript/Reference/Operators/typeof"><code>typeof</code> Operator</a> ersetzt werden, oder man muss sicher stellen, dass ein Funktionsname statt einem Resultat seines Aufrufes benutzt werden.</p>
+
+<pre class="brush: js example-good">typeof "test" == "string"; // true
+typeof 42 == "number"      // true
+
+function Foo() {}
+var f = Foo;               // Do not call Foo.
+var x = new Foo();
+
+x instanceof f;            // true
+x instanceof Foo;          // true
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Operators/instanceof"><code>instanceof</code> Operator</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Operators/typeof"><code>typeof</code> Operator</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/de/web/javascript/reference/fehler/is_not_iterable/index.html b/files/de/web/javascript/reference/fehler/is_not_iterable/index.html
new file mode 100644
index 0000000000..21460882c7
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/is_not_iterable/index.html
@@ -0,0 +1,103 @@
+---
+title: 'TypeError: ''x'' is not iterable'
+slug: Web/JavaScript/Reference/Fehler/is_not_iterable
+tags:
+  - Error
+  - JavaScript
+  - Reference
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/is_not_iterable
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">TypeError: 'x' is not iterable (Firefox, Chrome)
+TypeError: 'x' is not a function or its return value is not iterable (Chrome)
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Der Wert, welcher auf der rechten Seite von <a href="/de/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement">for…of</a> oder als Argument einer Funktion wie {{jsxref("Promise.all")}} oder {{jsxref("TypedArray.from")}} ist kein <a href="/de/docs/Web/JavaScript/Reference/Iteration_protocols">iterierbares Objekt</a>. Ein iterierbares Objekt kann vom Standardtypen wie {{jsxref("Array")}}, {{jsxref("String")}} oder {{jsxref("Map")}} sein oder ein Objekt, welches das <a href="/de/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol">iterable Protokoll</a> implementiert.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Über_Objekteigenschaften_iterieren">Über Objekteigenschaften iterieren</h3>
+
+<p>In JavaScript sind {{jsxref("Object", "Objekte")}} nicht iterierbar, außer sie implementieren das <a href="/de/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol">iterable Protokoll</a>. Demnach kann man <a href="/de/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement">for…of</a> nicht für das Iterieren von Objekteigenschaften benutzen.</p>
+
+<pre class="brush: js example-bad">var obj = { 'France': 'Paris', 'England': 'London' };
+for (let p of obj) { // TypeError: obj is not iterable
+    // …
+}
+</pre>
+
+<p>Stattdessen kann man {{jsxref("Object.keys")}} oder {{jsxref("Object.entries")}} benutzen, um über die Eigenschaften oder Einträge zu iterieren.</p>
+
+<pre class="brush: js example-good">var obj = { 'France': 'Paris', 'England': 'London' };
+// Iterate over the property names:
+for (let country of obj.keys()) {
+    var capital = obj[country];
+    console.log(country, capital);
+}
+
+for (const [country, capital] of obj.entries())
+    console.log(country, capital);
+</pre>
+
+<p>Eine andere Option ist in diesem Fall der Einsatz einer {{jsxref("Map")}}:</p>
+
+<pre class="brush: js example-good">var map = new Map;
+map.set('France', 'Paris');
+map.set('England', 'London');
+// Iterate over the property names:
+for (let country of map.keys()) {
+    let capital = map[country];
+    console.log(country, capital);
+}
+
+for (let capital of map.values())
+    console.log(capital);
+
+for (const [country, capital] of map.entries())
+    console.log(country, capital);
+</pre>
+
+<h3 id="Über_einen_Generator_iterieren">Über einen Generator iterieren</h3>
+
+<p><a href="/de/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators">Generatoren</a> sind Funktionen welche aufgerufen werden, um ein iterierbares Objekt zu produzieren.</p>
+
+<pre class="brush: js example-bad">function* generate(a, b) {
+  yield a;
+  yield b;
+}
+
+for (let x of generate) // TypeError: generate is not iterable
+    console.log(x);
+</pre>
+
+<p>Wenn dieser nicht aufgerufen wird, ist das korrespondierende {{jsxref("Function")}} Objekt des Generators aufrufbar, aber nicht iterierbar. Aufrufen des Generators Produziert ein iterierbares Objekt, welche über die Werte iteriert, die während der Ausführung des Generators zurückgegeben werden.</p>
+
+<pre class="brush: js example-good">function* generate(a, b) {
+    yield a;
+    yield b;
+}
+
+for (let x of generate(1,2))
+    console.log(x);
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol">Iterable Protokoll</a></li>
+ <li>{{jsxref("Object.keys")}}</li>
+ <li>{{jsxref("Object.entries")}}</li>
+ <li>{{jsxref("Map")}}</li>
+ <li><a href="/de/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators">Generatoren</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement">for…of</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/json_bad_parse/index.html b/files/de/web/javascript/reference/fehler/json_bad_parse/index.html
new file mode 100644
index 0000000000..0aa5e6bdae
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/json_bad_parse/index.html
@@ -0,0 +1,112 @@
+---
+title: 'SyntaxError: JSON.parse: bad parsing'
+slug: Web/JavaScript/Reference/Fehler/JSON_bad_parse
+tags:
+  - Errors
+  - JSON
+  - JavaScript
+  - Method
+  - Property
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/JSON_bad_parse
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">SyntaxError: JSON.parse: unterminated string literal
+SyntaxError: JSON.parse: bad control character in string literal
+SyntaxError: JSON.parse: bad character in string literal
+SyntaxError: JSON.parse: bad Unicode escape
+SyntaxError: JSON.parse: bad escape character
+SyntaxError: JSON.parse: unterminated string
+SyntaxError: JSON.parse: no number after minus sign
+SyntaxError: JSON.parse: unexpected non-digit
+SyntaxError: JSON.parse: missing digits after decimal point
+SyntaxError: JSON.parse: unterminated fractional number
+SyntaxError: JSON.parse: missing digits after exponent indicator
+SyntaxError: JSON.parse: missing digits after exponent sign
+SyntaxError: JSON.parse: exponent part is missing a number
+SyntaxError: JSON.parse: unexpected end of data
+SyntaxError: JSON.parse: unexpected keyword
+SyntaxError: JSON.parse: unexpected character
+SyntaxError: JSON.parse: end of data while reading object contents
+SyntaxError: JSON.parse: expected property name or '}'
+SyntaxError: JSON.parse: end of data when ',' or ']' was expected
+SyntaxError: JSON.parse: expected ',' or ']' after array element
+SyntaxError: JSON.parse: end of data when property name was expected
+SyntaxError: JSON.parse: expected double-quoted property name
+SyntaxError: JSON.parse: end of data after property name when ':' was expected
+SyntaxError: JSON.parse: expected ':' after property name in object
+SyntaxError: JSON.parse: end of data after property value in object
+SyntaxError: JSON.parse: expected ',' or '}' after property value in object
+SyntaxError: JSON.parse: expected ',' or '}' after property-value pair in object literal
+SyntaxError: JSON.parse: property names must be double-quoted strings
+SyntaxError: JSON.parse: expected property name or '}'
+SyntaxError: JSON.parse: unexpected character
+SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>{{jsxref("JSON.parse()")}} übersetzt einen String zu JSON. Dieser String muss eine gültiges JSON enthalten. Ist die Syntax fehlerhaft, wird dieser Error ausgegeben.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="JSON.parse()_erlaubt_keine_angehängten_Kommata"><code>JSON.parse()</code> erlaubt keine angehängten Kommata</h3>
+
+<p>Beide Zeilen werden einen SyntaxError erzeugen:</p>
+
+<pre class="brush: js example-bad">JSON.parse('[1, 2, 3, 4,]');
+JSON.parse('{"foo": 1,}');
+// SyntaxError JSON.parse: unexpected character
+// at line 1 column 14 of the JSON data
+</pre>
+
+<p>Das letzte trennende Komma muss in JSON vermieden werden:</p>
+
+<pre class="brush: js example-good">JSON.parse('[1, 2, 3, 4]');
+JSON.parse('{"foo": 1}');</pre>
+
+<h3 id="Eigenschaftsnamen_müssen_Strings_mit_doppelten_Anführungszeichen_sein">Eigenschaftsnamen müssen Strings mit doppelten Anführungszeichen sein</h3>
+
+<p>Man kann keine einfachen Anführungszeichen für Eigenschaften benutzen (wie 'foo').</p>
+
+<pre class="brush: js example-bad">JSON.parse("{'foo': 1}");
+// SyntaxError: JSON.parse: expected property name or '}'
+// at line 1 column 2 of the JSON data</pre>
+
+<p>Stattdessen muss "foo" benutzt werden:</p>
+
+<pre class="brush: js example-good">JSON.parse('{"foo": 1}');</pre>
+
+<h3 id="Führende_Nullen_und_Dezimalpunkte">Führende Nullen und Dezimalpunkte</h3>
+
+<p>Man kann keine führenden Nullen (wie 01) benutzen. Nach Dezimalpunkten muss mindestens eine Stelle stehen.</p>
+
+<pre class="brush: js example-bad">JSON.parse('{"foo": 01}');
+// SyntaxError: JSON.parse: expected ',' or '}' after property value
+// in object at line 1 column 2 of the JSON data
+
+JSON.parse('{"foo": 1.}');
+// SyntaxError: JSON.parse: unterminated fractional number
+// at line 1 column 2 of the JSON data
+</pre>
+
+<p>Stattdessen schreibe man nur 1, ohne eine Null (also 1, statt 01) und nutze mindestens eine Ziffer nach dem Dezimalpunkt:</p>
+
+<pre class="brush: js example-good">JSON.parse('{"foo": 1}');
+JSON.parse('{"foo": 1.0}');
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("JSON")}}</li>
+ <li>{{jsxref("JSON.parse()")}}</li>
+ <li>{{jsxref("JSON.stringify()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/malformed_formal_parameter/index.html b/files/de/web/javascript/reference/fehler/malformed_formal_parameter/index.html
new file mode 100644
index 0000000000..65a89bb84a
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/malformed_formal_parameter/index.html
@@ -0,0 +1,61 @@
+---
+title: 'SyntaxError: Malformed formal parameter'
+slug: Web/JavaScript/Reference/Fehler/Malformed_formal_parameter
+tags:
+  - Error
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Malformed_formal_parameter
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">SyntaxError: malformed formal parameter (Firefox)
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Es existiert ein <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Function">Function()</a></code> Konstruktor mit mindestend zwei übergebenen Parametern im Quelltext. Der letzte Parameter ist der Quelltext für die neu zu erstellende Funktion. Der ganze Rest bildet die liste der Parameter der neu zu erstellenden Funktion.</p>
+
+<p>Die Liste der Parameter ist manchmal nicht valide. Das kann passieren, wenn versehendlich ein Schlüsselword, wie <code>if</code> oder <code>var</code>, für die namen der Parameter verwendet werden. Ein andere Grund kann eine falsche Interpunktion in der Argumentenliste verwendet wird. Auch ein falscher Wert wie eine Zahl oder ein Objekt kann die Ursache sein.</p>
+
+<h2 id="OK_das_löst_mein_Problem._Aber_warum_hast_du_das_nicht_sofort_gesagt">OK, das löst mein Problem. Aber warum hast du das nicht sofort gesagt?</h2>
+
+<p><span id="result_box" lang="de"><span>Zugegeben, die</span> <span>Formulierung</span> <span>in der Fehlermeldung </span> <span>ist etwas</span> <span>seltsam.</span> </span> <span id="result_box" lang="de"> <span>"</span><span>formal</span><span> parameter</span><span>"</span> <span>ist</span> <span>eine andere Art</span> <span>"</span><span>Funktionsargument</span><span>" </span> oder "Funktionsparameter" <span>zu sagen</span><span>. </span></span><span id="result_box" lang="de"><span>Und wir</span> <span>verwenden das Wort</span> <span>"</span><span>malformed</span><span>"</span><span>, weil alle</span> <span>Firefox</span><span>-Ingenieure</span> sehr große Fans des<span> Romans </span><span>Gothic</span> <span>Horror</span><span> sind.</span></span></p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Invalide_Fälle">Invalide Fälle</h3>
+
+<pre class="brush: js example-bad">var f = Function('x y', 'return x + y;');
+// SyntaxError (missing a comma)
+
+var f = Function('x,', 'return x;');
+// SyntaxError (extraneous comma)
+
+var f = Function(37, "alert('OK')");
+// SyntaxError (numbers can't be argument names)
+</pre>
+
+<h3 id="Valide_Fälle">Valide Fälle</h3>
+
+<pre class="brush: js example-good">var f = Function('x, y', 'return x + y;');  // correctly punctuated
+
+var f = Function('x', "return x;');
+
+// if you can, avoid using Function - this is much faster
+var f = function(x) { return x; };
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Function">Function()</a></code></li>
+ <li><a href="/de/docs/Web/JavaScript/Guide/Functions">Über Funktionen</a></li>
+ <li><a href="https://www.gutenberg.org/ebooks/84"><em>Frankenstein</em> by Mary Wollstonecraft Shelley, voller E-Text</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/malformed_uri/index.html b/files/de/web/javascript/reference/fehler/malformed_uri/index.html
new file mode 100644
index 0000000000..cf831aa4a6
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/malformed_uri/index.html
@@ -0,0 +1,66 @@
+---
+title: 'URIError: malformed URI sequence'
+slug: Web/JavaScript/Reference/Fehler/Malformed_URI
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - URIError
+translation_of: Web/JavaScript/Reference/Errors/Malformed_URI
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">URIError: malformed URI sequence (Firefox)
+URIError: URI malformed (Chrome)
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("URIError")}}</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Das URI-Kodieren oder -Dekodieren war nicht erfolgreich. Ein gegebenenes Argument der {{jsxref("decodeURI")}}-, {{jsxref("encodeURI")}}-, {{jsxref("encodeURIComponent")}}-, oder {{jsxref("decodeURIComponent")}}-Funktion ist nicht valide, wodurch die Funktion nicht richtig Kodieren oder Dekodieren kann.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Kodieren">Kodieren</h3>
+
+<p>Kodieren ersetzt bestimmte Zeichen durch eine Sequenz von einem, zwei, drei oder vier maskierten Zeichen, welche der UTF-8 Kodierung des Zeichens entsprechen. Ein {{jsxref("URIError")}} wird erzeugt, wenn versucht wird ein Zeichen zu kodieren, welches kein Teil des high-low-Paares ist, zum Beispiel:</p>
+
+<pre class="brush: js example-bad">encodeURI('\uD800');
+// "URIError: malformed URI sequence"
+
+encodeURI('\uDFFF');
+// "URIError: malformed URI sequence"
+</pre>
+
+<p>Ein high-low Paar ist ok. Zum Beispiel:</p>
+
+<pre class="brush: js example-good">encodeURI('\uD800\uDFFF');
+// "%F0%90%8F%BF"</pre>
+
+<h3 id="Dekodieren">Dekodieren</h3>
+
+<p>Dekodieren ersetzt eine Sequenz maskierter Zeichen in einer URI-Komponente mit einem Zeichen, welches dieses repräsentiert. Wenn es kein solches Zeichen gibt, wird ein Fehler erzeugt:</p>
+
+<pre class="brush: js example-bad">decodeURIComponent('%E0%A4%A');
+// "URIError: malformed URI sequence"
+</pre>
+
+<p>Mit richiger Eingabe sollte es wie folgendermaßen aussehen:</p>
+
+<pre class="brush: js example-good">decodeURIComponent('JavaScript_%D1%88%D0%B5%D0%BB%D0%BB%D1%8B');
+// "JavaScript_шеллы"</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("URIError")}}</li>
+ <li>{{jsxref("decodeURI")}}</li>
+ <li>{{jsxref("encodeURI")}}</li>
+ <li>{{jsxref("encodeURIComponent")}}</li>
+ <li>{{jsxref("decodeURIComponent")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/missing_bracket_after_list/index.html b/files/de/web/javascript/reference/fehler/missing_bracket_after_list/index.html
new file mode 100644
index 0000000000..b5fe14ae14
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/missing_bracket_after_list/index.html
@@ -0,0 +1,56 @@
+---
+title: 'SyntaxError: missing ] after element list'
+slug: Web/JavaScript/Reference/Fehler/Missing_bracket_after_list
+tags:
+  - Errors
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Missing_bracket_after_list
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">SyntaxError: missing ] after element list
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("SyntaxError")}}.</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Der Syntax der Array-Initialisierung enthält einen Fehler. Wahrscheinlich fehlt eine schließende eckige Klammer ("<code>]</code>") oder ein Komma ("<code>,</code>").</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Unvollständige_Arrayinitialisierung">Unvollständige Arrayinitialisierung</h3>
+
+<pre class="brush: js example-bad">var list = [1, 2,
+
+var instruments = [
+  'Ukulele',
+  'Guitar',
+  'Piano'
+};
+
+var data = [{foo: 'bar'} {bar: 'foo'}];
+</pre>
+
+<p>Richtig wäre:</p>
+
+<pre class="brush: js example-good">var list = [1, 2];
+
+var instruments = [
+ 'Ukulele',
+ 'Guitar',
+ 'Piano'
+];
+
+var data = [{foo: 'bar'}, {bar: 'foo'}];</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/missing_colon_after_property_id/index.html b/files/de/web/javascript/reference/fehler/missing_colon_after_property_id/index.html
new file mode 100644
index 0000000000..26d515a018
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/missing_colon_after_property_id/index.html
@@ -0,0 +1,77 @@
+---
+title: 'SyntaxError: missing : after property id'
+slug: Web/JavaScript/Reference/Fehler/Missing_colon_after_property_id
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Missing_colon_after_property_id
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">SyntaxError: missing : after property id
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Wenn Objekte mit der <a href="/de/docs/Web/JavaScript/Reference/Operators/Object_initializer">Objektinitialisierungs</a>-Syntax erstellt werden, wird ein (<code>:</code>) eingesetzt, um bei Eiegenschaften Schlüssel und Werte zu trennen.</p>
+
+<pre class="brush: js">var obj = { propertyKey: 'value' };
+</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Doppelpunkt_vs._Gleichzeichen">Doppelpunkt vs. Gleichzeichen</h3>
+
+<p>Der Code funktioniert nicht, weil das Gleichzeichen nicht in dieser Form in der Objektinitialisierungs-Syntax genutzt werden kann.</p>
+
+<pre class="brush: js example-bad">var obj = { propertyKey = 'value' };
+// SyntaxError: missing : after property id
+</pre>
+
+<p>Richtig währe der Einsatz eines Doppelpunktes oder der Einsatz von eckigen Klammern, um eine Eigenschaft nach dem erstellen des Objektes zuzuweisen.</p>
+
+<pre class="brush: js example-good">var obj = { propertyKey: 'value' };
+
+// or alternatively
+
+var obj = { };
+obj['propertyKey'] = 'value';
+</pre>
+
+<h3 id="Leere_Eigenschaften">Leere Eigenschaften</h3>
+
+<p>Man kann nicht wie im Beispiel leere Eigenschaften erzeugen:</p>
+
+<pre class="brush: js example-bad">var obj = { propertyKey; };
+// SyntaxError: missing : after property id
+</pre>
+
+<p>Wenn eine Eigenschaft ohne Wert definiert werden soll, muss {{jsxref("null")}} als Wert genutzt werden.</p>
+
+<pre class="brush: js example-good">var obj = { propertyKey: null };</pre>
+
+<h3 id="Berechnete_Eigenschaften">Berechnete Eigenschaften</h3>
+
+<p>Wenn ein Eigenschaftsname aus einem Ausdruck berechnet wird, müssen eckige Klammern genutzt werden. Anderfalls kann der Eigenschaftname nicht errechnet werden:</p>
+
+<pre class="brush: js example-bad">var obj = { 'b'+'ar': 'foo' };
+// SyntaxError: missing : after property id
+</pre>
+
+<p>Man muss den Ausdruck in <code>[]</code> setzen:</p>
+
+<pre class="brush: js example-good">var obj = { ['b'+'ar']: 'foo' };</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Operators/Object_initializer">Objektinitialisierung</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/missing_curly_after_function_body/index.html b/files/de/web/javascript/reference/fehler/missing_curly_after_function_body/index.html
new file mode 100644
index 0000000000..b5e0239a2f
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/missing_curly_after_function_body/index.html
@@ -0,0 +1,67 @@
+---
+title: 'SyntaxError: missing } after function body'
+slug: Web/JavaScript/Reference/Fehler/Missing_curly_after_function_body
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Missing_curly_after_function_body
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">SyntaxError: missing } after function body
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Es gibt einen Syntaxfehler irgendwo beim erstellen von Funktionen. Man sollte prüfen, ob alle runden und geschweiften Klammern in der richtigen Reihenfolge sind. Einrückung und Formatierung des Codes hilft dabei den Fehler zu erkennen.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Schließende_geschweifte_Klammer_vergessen">Schließende geschweifte Klammer vergessen</h3>
+
+<p>Oftmals fehlt eine geschweifte Klammer im Funktionsocde:</p>
+
+<pre class="brush: js example-bad">var charge = function() {
+  if (sunny) {
+    useSolarCells();
+  } else {
+    promptBikeRide();
+};
+</pre>
+
+<p>Richtig wäre:</p>
+
+<pre class="brush: js example-good">var charge = function() {
+  if (sunny) {
+    useSolarCells();
+  } else {
+    promptBikeRide();
+  }
+};</pre>
+
+<p>Es kann deutlich verwirrender sein, wenn {{Glossary("IIFE")}}, <a href="/de/docs/Web/JavaScript/Closures">Closures</a>, oder andere Konstrukte, die viele verschiedene Klammern benutzt, eingesetzt werden, wie zum Beispiel:</p>
+
+<pre class="brush: js example-bad">(function() { if (true) { return false; } );
+</pre>
+
+<p>Oftmals hilft verschiedenes Einrücken oder doppeltes Prüfen der Einrückung, um den Fehler zu finden.</p>
+
+<pre class="brush: js example-good">(function() {
+  if (true) {
+    return false;
+  }
+});</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Guide/Functions">Funktionen</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/missing_curly_after_property_list/index.html b/files/de/web/javascript/reference/fehler/missing_curly_after_property_list/index.html
new file mode 100644
index 0000000000..41a82a9158
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/missing_curly_after_property_list/index.html
@@ -0,0 +1,51 @@
+---
+title: 'SyntaxError: missing } after property list'
+slug: Web/JavaScript/Reference/Fehler/Missing_curly_after_property_list
+tags:
+  - Errors
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Missing_curly_after_property_list
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">SyntaxError: missing } after property list
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Es gibt irgendwo in der <a href="/de/docs/Web/JavaScript/Reference/Operators/Object_initializer">Objektinitialisierungs</a>-Syntax einen Fehler. Es könnte ein vergessenes Komma sein oder eine vergessene geschweifte Klammer. Es muss auch geprüft werden, die Reihenfolge der schließenden runden und geschweiften Klammern richtig ist. Den Code richtig einzurücken und zu formatieren hilft bei der Suche nach dem Fehler.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Vergessenes_Komma">Vergessenes Komma</h3>
+
+<p>Häufig wird ein Komma bei der Objektinitialisierung vergessen:</p>
+
+<pre class="brush: js example-bad">var obj = {
+  a: 1,
+  b: { myProp: 2 }
+  c: 3
+};
+</pre>
+
+<p>Richtig wäre:</p>
+
+<pre class="brush: js example-good">var obj = {
+  a: 1,
+  b: { myProp: 2 },
+  c: 3
+};
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Operators/Object_initializer">Objektinitialisierer</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/missing_formal_parameter/index.html b/files/de/web/javascript/reference/fehler/missing_formal_parameter/index.html
new file mode 100644
index 0000000000..19813f9c47
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/missing_formal_parameter/index.html
@@ -0,0 +1,80 @@
+---
+title: 'SyntaxError: missing formal parameter'
+slug: Web/JavaScript/Reference/Fehler/Missing_formal_parameter
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Missing_formal_parameter
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">SyntaxError: missing formal parameter (Firefox)
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>"Formaler Parameter" ist eine andere Bezeichnung für Funktionsparameter. Einer Funktion fehlen valide Parameter. In der Deklaration einer Funktion müssen die Parameternamen {{Glossary("Identifier", "Bezeichner")}}, kein Wert einer Nummer, eines Strings oder eines Objektes. Deklarieren und Aufrufen von Funktionen sind zwei verschiedene Schritte. Deklarieren setzt Bezeichner als Parametername voraus und beim Ausführen (Aufrufen) der Funktion müssen Werte für die Funktion benutzt werden.</p>
+
+<p>In {{glossary("JavaScript")}} können Bezeichner nur alphanumerische Zeichen (und "$" und "_") enthalten und können nicht mit einer Zahl beginnen. Ein Bezeichner unterscheidet sich von einem String, weil der String Daten sind und der Bezeichner teil des Codes.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Funktionsparameter müssen Bezeichner beim erstellen der Funktion sein. Alle diese Funktionsdeklarationen schlagen fehl, wenn ein Wert als Parameter benutzt wird:</p>
+
+<pre class="brush: js example-bad highlight:[1,6,11]">function square(3) {
+  return number * number;
+};
+// SyntaxError: missing formal parameter
+
+function greet("Howdy") {
+  return greeting;
+};
+// SyntaxError: missing formal parameter
+
+function log({ obj: "value"}) {
+  console.log(arg)
+};
+// SyntaxError: missing formal parameter
+</pre>
+
+<p>Man muss einen Bezeichner für die Funktionsdeklarationen benutzen:</p>
+
+<pre class="brush: js example-good highlight:[1,5,9]">function square(number) {
+  return number * number;
+};
+
+function greet(greeting) {
+  return greeting;
+};
+
+function log(arg) {
+  console.log(arg)
+};</pre>
+
+<p>Danach kann man die Funktionen mit beliebigen Argumentwerten aufrufen:</p>
+
+<pre class="brush: js">square(2); // 4
+
+greet("Howdy"); // "Howdy"
+
+log({obj: "value"}); // Object { obj: "value" }
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Andere Fehler, die etwas mit formalen Parametern zu tun haben:
+  <ul>
+   <li><a href="/de/docs/Web/JavaScript/Reference/Errors/Malformed_formal_parameter">SyntaxError: Malformed formal parameter</a></li>
+   <li><a href="/de/docs/Web/JavaScript/Reference/Errors/Redeclared_parameter">SyntaxError: redeclaration of formal parameter "x"</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/missing_initializer_in_const/index.html b/files/de/web/javascript/reference/fehler/missing_initializer_in_const/index.html
new file mode 100644
index 0000000000..49db779546
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/missing_initializer_in_const/index.html
@@ -0,0 +1,58 @@
+---
+title: 'SyntaxError: missing = in const declaration'
+slug: Web/JavaScript/Reference/Fehler/Missing_initializer_in_const
+tags:
+  - Error
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Missing_initializer_in_const
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">SyntaxError: missing = in const declaration (Firefox)
+SyntaxError: Missing initializer in const declaration (Chrome)
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Eine Konstante ist ein Wert, der während der normalen Ausführung des Programmes nicht geändert werden kann. Ihr kann kein neuer Wert zugewiesen werden und can nicht neu deklariert werden. In JavaScript werden Konstanten mit dem <code><a href="/de/docs/Web/JavaScript/Reference/Statements/const">const</a></code> Schlüsselwort deklariert. Ein Initialwert für eine Konstante wird benötigt, was bedeutet, dass der Wert im gleichen Statement wie bei der Deklaration zugewiesen werden muss (was Sinn ergibt, weil der Wert später nicht mehr geändert werden kann).</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Fehlender_Initialwert_bei_const">Fehlender Initialwert bei const</h3>
+
+<p>Anders wie bei <code>var</code> or <code>let</code>, muss man bei <code>const</code> Deklarationen einen Initialwert angeben. Folgendes erzeugt einen Fehler:</p>
+
+<pre class="brush: js example-bad">const COLUMNS;
+// SyntaxError: missing = in const declaration</pre>
+
+<h3 id="Den_Fehler_beheben">Den Fehler beheben</h3>
+
+<p>Es gibt mehrere Möglichkeiten den Fehler zu beheben. Es muss geprüft werden, was mit der Konstanten erreicht werden soll.</p>
+
+<h4 id="Hinzufügen_eines_konstanten_Wertes">Hinzufügen eines konstanten Wertes</h4>
+
+<p>Der Wert muss im gleichen Statement wie die Deklaration spezifiziert werden:</p>
+
+<pre class="brush: js example-good">const COLUMNS = 80;</pre>
+
+<h4 id="const_let_oder_var"><code>const</code>, <code>let</code> oder <code>var</code>?</h4>
+
+<p>Es sollte kein <code>const</code> verwendet werden, wenn keine Konstante gemeint ist. Vielleicht ist eine Variable für den Block (<code><a href="/de/docs/Web/JavaScript/Reference/Statements/let">let</a></code>) oder eine global Variable (<a href="/de/docs/Web/JavaScript/Reference/Statements/var"><code>var</code></a>) gemeint. Beide benötigen keinen Initialwert.</p>
+
+<pre class="brush: js example-good">let columns;
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><code><a href="/de/docs/Web/JavaScript/Reference/Statements/const">const</a></code></li>
+ <li><code><a href="/de/docs/Web/JavaScript/Reference/Statements/let">let</a></code></li>
+ <li><code><a href="/de/docs/Web/JavaScript/Reference/Statements/var">var</a></code></li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/missing_name_after_dot_operator/index.html b/files/de/web/javascript/reference/fehler/missing_name_after_dot_operator/index.html
new file mode 100644
index 0000000000..cb79bdcc03
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/missing_name_after_dot_operator/index.html
@@ -0,0 +1,68 @@
+---
+title: 'SyntaxError: missing name after . operator'
+slug: Web/JavaScript/Reference/Fehler/Missing_name_after_dot_operator
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Missing_name_after_dot_operator
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">SyntaxError: missing name after . operator
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Der Punktoperator (<code>.</code>) wird für den <a href="/de/docs/Web/JavaScript/Reference/Operators/Property_Accessors">Zugriff auf Eigenschaften</a> genutzt. Man muss den Namen der Eigenschaft spezifizieren, auf den man zugreifen möchte. Um berechnete Eigenschaftsnamen zu benutzen muss statt dem Punkt eckige Klammern genutzt werden. Das erlaubt es einen Ausdruck zu berechnen. Manchmal möchte man Konkatenation stattdessen erreichen. Dafür wird ein Plusoperator (<code>+</code>) genutzt werden.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Zugriff_auf_Eigenschaften">Zugriff auf Eigenschaften</h3>
+
+<p><a href="/de/docs/Web/JavaScript/Reference/Operators/Property_Accessors">Zugriff auf Eigenschaften</a> wird in JavaScript entweder mit einem Punkt oder eckigen Klammern erreicht, aber nicht beides. Eckige Klammern erlauben es auch Eigenschaftsnamen zu berechnen.</p>
+
+<pre class="brush: js example-bad">var obj = { foo: { bar: "baz", bar2: "baz2" } };
+var i = 2;
+
+obj.[foo].[bar]
+// SyntaxError: missing name after . operator
+
+obj.foo."bar"+i;
+// SyntaxError: missing name after . operator
+</pre>
+
+<p>Um das Problem zu lösen, muss auf das Objekt wie folgt zugegriffen werden:</p>
+
+<pre class="brush: js example-good">obj.foo.bar; // "baz"
+// or alternatively
+obj["foo"]["bar"]; // "baz"
+
+// computed properties require square brackets
+obj.foo["bar" + i]; // "baz2"
+</pre>
+
+<h3 id="Zugriff_auf_Eigenschaften_vs._Konkatenation">Zugriff auf Eigenschaften vs. Konkatenation</h3>
+
+<p>Wenn man aus einer anderen Programmiersprache kommt (z. B. {{Glossary("PHP")}}), ist es einfach den Punktoperator (<code>.</code>) und den Konkatenationsoperator (<code>+</code>) zu vermischen.</p>
+
+<pre class="brush: js example-bad">console.log("Hello" . "world");
+
+// SyntaxError: missing name after . operator</pre>
+
+<p>Stattdessen muss man das Pluszeichen für Konkatenation benutzen:</p>
+
+<pre class="brush: js example-good">console.log("Hello" + "World");</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Operators/Property_Accessors">Zugriff auf Eigenschaften</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/missing_parenthesis_after_argument_list/index.html b/files/de/web/javascript/reference/fehler/missing_parenthesis_after_argument_list/index.html
new file mode 100644
index 0000000000..a3da4b9edf
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/missing_parenthesis_after_argument_list/index.html
@@ -0,0 +1,42 @@
+---
+title: 'SyntaxError: missing ) after argument list'
+slug: Web/JavaScript/Reference/Fehler/Missing_parenthesis_after_argument_list
+tags:
+  - Errors
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">SyntaxError: missing ) after argument list
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("SyntaxError")}}.</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Es gibt einen Fehler mit der Art wie die Funktion aufgerufen wird. Es kann sich hier zum Beispiel um einen Tippfehler, einem fehlenden Operator oder einen nicht richtig abgeschlossenen String handeln. </p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Bei einem fehlenden "+" Operator,  um zwei Strings zu konkatinieren,erwartet JavaScript , dass nur <code>"PI: " der Parameter </code>für die "log" Funktion ist. Darum sollte danach die Funktion mit einer abschliessenden Klammer abgeschlossen werden. </p>
+
+<pre class="brush: js example-bad">console.log("PI: " Math.PI);
+// SyntaxError: missing ) after argument list
+</pre>
+
+<p>Man kann den Fehler korrigieren, indem man den "<code>+</code>" Operator hinzufügt:</p>
+
+<pre class="brush: js example-good">console.log("PI: " + Math.PI);
+// "PI: 3.141592653589793"</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Guide/Functions">Functions</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/missing_parenthesis_after_condition/index.html b/files/de/web/javascript/reference/fehler/missing_parenthesis_after_condition/index.html
new file mode 100644
index 0000000000..295428a5b9
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/missing_parenthesis_after_condition/index.html
@@ -0,0 +1,70 @@
+---
+title: 'SyntaxError: missing ) after condition'
+slug: Web/JavaScript/Reference/Fehler/Missing_parenthesis_after_condition
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_condition
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">SyntaxError: missing ) after condition
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Es gibt einen Fehler beim schreiben einer <code><a href="/de/docs/Web/JavaScript/Reference/Statements/if...else">if</a></code> Bedingung. In jeder Programmiersprache benötigt man Fallunterscheidungen abhängig von Eingaben. Das if Statement führt ein Statement auf, wenn eine Bedingung true wird. In JavaScript muss diese Bedingung in runden Klammern nach dem <code>if</code> Schlüsselwort geschrieben werden, wie dieses:</p>
+
+<pre class="brush: js">if (condition) {
+  // do something if the condition is true
+}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Es könnte nur ein Versehen sein, weshalb man alle runden Klammern im Code gründlich überprüfen sollte.</p>
+
+<pre class="brush: js example-bad">if (3 &gt; Math.PI {
+  console.log("wait what?");
+}
+
+// SyntaxError: missing ) after condition
+</pre>
+
+<p>Um das Problem zu beheben, muss eine schließende runde Klammer nach der Bedingung geschrieben werden.</p>
+
+<pre class="brush: js example-good">if (3 &gt; Math.PI) {
+  console.log("wait what?");
+}</pre>
+
+<p>Wenn man aus einer anderen Programmiersprache kommt, passiert es schnell, dass Schlüsselwörter benutzt werden, die in JavaScript eine andere oder garkeine Bedeutung haben.</p>
+
+<pre class="brush: js example-bad">if (done is true) {
+ console.log("we are done!");
+}
+
+// SyntaxError: missing ) after condition
+</pre>
+
+<p>Stattdessen muss die richtige <a href="/de/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">Vergleichsoperation</a> benutzt werden. Zum Beispiel:</p>
+
+<pre class="brush: js example-good">if (done === true) {
+ console.log("we are done!");
+}</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><code><a href="/de/docs/Web/JavaScript/Reference/Statements/if...else">if...else</a></code></li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">Vergleichsoperatoren</a></li>
+ <li>
+  <p><a href="/de/docs/Learn/JavaScript/Building_blocks/conditionals">Entscheidungen im Code treffen — Bedingungen</a></p>
+ </li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/missing_semicolon_before_statement/index.html b/files/de/web/javascript/reference/fehler/missing_semicolon_before_statement/index.html
new file mode 100644
index 0000000000..dcdf35ed94
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/missing_semicolon_before_statement/index.html
@@ -0,0 +1,67 @@
+---
+title: 'SyntaxError: missing ; before statement'
+slug: Web/JavaScript/Reference/Fehler/Missing_semicolon_before_statement
+tags:
+  - Errors
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">SyntaxError: missing ; before statement
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("SyntaxError")}}.</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Es fehlt irgendwo ein Semikolon (<code>;</code>). <a href="/de/docs/Web/JavaScript/Reference/Statements">JavaScript Statements</a> müssen durch ein Semikolon beendet werden. Einige Statements sind von der <a href="/de/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">automatischen Semikolon Einfügung (ASI)</a> betroffen, aber in diesem Fall muss man ein Semikolon geliefert werden, damit JavaScript den Quelltext korrekt lesen kann.</p>
+
+<p>Meistens ist dieser Fehler eine Folge aus einem anderen Fehler, wie ein nicht escaptes Zeichen in einem String oder der falsche Einsatz von <code>var</code>.  Es kann auch sein, dass man zu viele runde Klammern benutzt. Wenn dieser Fehler auftritt, sollte die Syntax gründlich geprüft werden.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Nicht_escapte_Strings">Nicht escapte Strings</h3>
+
+<p>Dieser Fehler kann leicht auftreten, wenn ein String nicht richtig escapt wird und die JavaScript-Umgebung schon das Ende eines Strings erwartet. Zum Beispiel:</p>
+
+<pre class="brush: js example-bad">var foo = 'Tom's bar';
+// SyntaxError: missing ; before statement</pre>
+
+<p>Man kann doppelte Anführungszeichen benutzen oder das Apostroph escapen:</p>
+
+<pre class="brush: js example-good">var foo = "Tom's bar";
+var foo = 'Tom\'s bar';
+</pre>
+
+<h3 id="Eigenschaften_mit_var_deklarieren">Eigenschaften mit var deklarieren</h3>
+
+<p>Man kann Eigenschaften eines Objektes oder Arrays nicht mit einem <code>var</code> deklarieren.</p>
+
+<pre class="brush: js example-bad">var obj = {};
+var obj.foo = 'hi'; // SyntaxError missing ; before statement
+
+var array = [];
+var array[0] = 'there'; // SyntaxError missing ; before statement
+</pre>
+
+<p>Stattdessen muss das <code>var</code> Schlüsselwort vermieden werden:</p>
+
+<pre class="brush: js example-good">var obj = {};
+obj.foo = 'hi';
+
+var array = [];
+array[0] = 'there';
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">Automatische Semikolon Einfügung (ASI)</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Statements">JavaScript Statements</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/more_arguments_needed/index.html b/files/de/web/javascript/reference/fehler/more_arguments_needed/index.html
new file mode 100644
index 0000000000..3707c5446f
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/more_arguments_needed/index.html
@@ -0,0 +1,48 @@
+---
+title: 'TypeError: More arguments needed'
+slug: Web/JavaScript/Reference/Fehler/More_arguments_needed
+tags:
+  - Errors
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/More_arguments_needed
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">TypeError: Object.create requires more than 0 arguments
+TypeError: Object.setPrototypeOf requires more than 1 argument
+TypeError: Object.defineProperties requires more than 0 arguments
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("TypeError")}}.</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Es ist ein Fehler beim Aufrufen einer Funktion aufgetaucht. Es müssen mehr Argumente übergeben werden.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Die {{jsxref("Object.create()")}} Methode benötigt mindestens ein Argument und die {{jsxref("Object.setPrototypeOf()")}} Methode benötigt mindestens zwei Argumente:</p>
+
+<pre class="brush: js example-bad">var obj = Object.create();
+// TypeError: Object.create requires more than 0 arguments
+
+var obj = Object.setPrototypeOf({});
+// TypeError: Object.setPrototypeOf requires more than 1 argument
+</pre>
+
+<p>Dieser Fehler kann behoben werden, indem {{jsxref("null")}} als Eigenschaft gesetzt wird:</p>
+
+<pre class="brush: js example-good">var obj = Object.create(null);
+
+var obj = Object.setPrototypeOf({}, null);</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Guide/Functions">Functions</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/negative_repetition_count/index.html b/files/de/web/javascript/reference/fehler/negative_repetition_count/index.html
new file mode 100644
index 0000000000..53c153453f
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/negative_repetition_count/index.html
@@ -0,0 +1,44 @@
+---
+title: 'RangeError: repeat count must be non-negative'
+slug: Web/JavaScript/Reference/Fehler/Negative_repetition_count
+tags:
+  - Errors
+  - JavaScript
+  - RangeError
+translation_of: Web/JavaScript/Reference/Errors/Negative_repetition_count
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">RangeError: repeat count must be non-negative (Firefox)
+RangeError: Invalid count value (Chrome)
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("RangeError")}}</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Die {{jsxref("String.prototype.repeat()")}} Methode wurde benutzt. Sie hat einen <code>count</code> Parameter welche die Anzahl der Wiederholungen des Strings angibt. Dieser muss zwischen 0 und kleiner positiv {{jsxref("Infinity")}} sein und kann nicht negativ sein. Das erlaubte Intervall kann wie folgt beschrieben werden: [0, +∞).</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Falsche_Fälle">Falsche Fälle</h3>
+
+<pre class="brush: js example-bad">'abc'.repeat(-1); // RangeError </pre>
+
+<h3 id="Richtige_Fälle">Richtige Fälle</h3>
+
+<pre class="brush: js example-good">'abc'.repeat(0);    // ''
+'abc'.repeat(1);    // 'abc'
+'abc'.repeat(2);    // 'abcabc'
+'abc'.repeat(3.5);  // 'abcabcabc' (count will be converted to integer)
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.repeat()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/no_non-null_object/index.html b/files/de/web/javascript/reference/fehler/no_non-null_object/index.html
new file mode 100644
index 0000000000..a2c897c5cd
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/no_non-null_object/index.html
@@ -0,0 +1,66 @@
+---
+title: 'TypeError: "x" is not a non-null object'
+slug: Web/JavaScript/Reference/Fehler/No_non-null_object
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/No_non-null_object
+---
+<div>{{JSSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">TypeError: "x" is not a non-null object (Firefox)
+TypeError: Property description must be an object: "x" (Chrome)
+TypeError: Invalid value used in weak set (Chrome)
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Ein Objekt wird erwartete aber nicht übergeben. {{jsxref("null")}} ist kein Objekt und funktioniert nicht. In dieser Situation wird ein normales Objekt erwartet.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Eigehscgaftsbeschreibung_erwartet">Eigehscgaftsbeschreibung erwartet</h3>
+
+<p>Wenn Methoden wie {{jsxref("Object.create()")}} oder {{jsxref("Object.defineProperty()")}} und {{jsxref("Object.defineProperties()")}} eingesetzt werden, wird als optionale Beschreibung ein Beschreibungsobjekt erwartet. Wenn kein Objekt übergeben wird (z. B. eine Zahl), wird ein Fehler erzeugt:</p>
+
+<pre class="brush: js example-bad">Object.defineProperty({}, 'key', 1);
+// TypeError: 1 is not a non-null object
+
+Object.defineProperty({}, 'key', null);
+// TypeError: null is not a non-null object
+</pre>
+
+<p>Ein valides Beschreibungsobjekt kann wie folgendes aussehen:</p>
+
+<pre class="brush: js example-good">Object.defineProperty({}, 'key', { value: 'foo', writable: false });
+</pre>
+
+<h3 id="WeakMap_und_WeakSet_Objekte_benötigen_Objektschlüssel"><code>WeakMap</code> und <code>WeakSet</code> Objekte benötigen Objektschlüssel</h3>
+
+<p>{{jsxref("WeakMap")}} und {{jsxref("WeakSet")}} Objekte speichern Objektschlüssel. Man kann keine anderen Schlüssel verwenden.</p>
+
+<pre class="brush: js example-bad">var ws = new WeakSet();
+ws.add('foo');
+// TypeError: "foo" is not a non-null object</pre>
+
+<p>Stattdessen sollte folgendes verwendet werden:</p>
+
+<pre class="brush: js example-good">ws.add({foo: 'bar'});
+ws.add(window);
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Object.create()")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}, {{jsxref("Object.defineProperties()")}}</li>
+ <li>{{jsxref("WeakMap")}}, {{jsxref("WeakSet")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/no_properties/index.html b/files/de/web/javascript/reference/fehler/no_properties/index.html
new file mode 100644
index 0000000000..d5dc0328b6
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/no_properties/index.html
@@ -0,0 +1,40 @@
+---
+title: 'TypeError: "x" has no properties'
+slug: Web/JavaScript/Reference/Fehler/No_properties
+tags:
+  - Errors
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/No_properties
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">TypeError: null has no properties
+TypeError: undefined has no properties
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("TypeError")}}.</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Weder {{jsxref("null")}} noch {{jsxref("undefined")}} besitzen Eigenschaften auf die man zugreifen könnte.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js example-bad">null.foo;
+// TypeError: null has no properties
+
+undefined.bar;
+// TypeError: undefined has no properties
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("null")}}</li>
+ <li>{{jsxref("undefined")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/no_variable_name/index.html b/files/de/web/javascript/reference/fehler/no_variable_name/index.html
new file mode 100644
index 0000000000..a3b63df55d
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/no_variable_name/index.html
@@ -0,0 +1,84 @@
+---
+title: 'SyntaxError: missing variable name'
+slug: Web/JavaScript/Reference/Fehler/No_variable_name
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/No_variable_name
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">SyntaxError: missing variable name (Firefox)
+SyntaxError: Unexpected token = (Chrome)</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Einer Variablen fehlt ein Name. Das wird zu einem {{jsxref("SyntaxError")}} im Code führen. Vermutlich ist ein Komma irgendwo falsch oder man kämpft mit einem Namen. Völlig verständlich! <span>Dinge zu benennen ist so schwer.</span></p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Ein_Variablenname_fehlt">Ein Variablenname fehlt</h3>
+
+<pre class="brush: js example-bad">var = "foo";
+</pre>
+
+<p>Es ist schwer gute Variablennamen zu vergeben. Das geht allen so.</p>
+
+<pre class="brush: js example-good">var ohGodWhy = "foo";</pre>
+
+<h3 id="Reservierte_Schlüsselwörter_können_kein_Variablenname_sein">Reservierte Schlüsselwörter können kein Variablenname sein</h3>
+
+<p>Es gibt ein paar Namen, die <a href="/de/docs/Web/JavaScript/Reference/Lexical_grammar#Schlüsselwörter">reservierte Schlüsselwörter</a> sind. Diese kann man nicht benutzen.</p>
+
+<pre class="brush: js example-bad">var debugger = "whoop";
+// SyntaxError: missing variable name
+</pre>
+
+<h3 id="Deklarieren_von_mehreren_Variablen">Deklarieren von mehreren Variablen</h3>
+
+<p>Man muss beim Deklarieren von mehreren Variablen besonders auf Kommas aufpassen. Gibt es ein überflüssiges Komma? Wurde aus Versehen ein Komma statt eines Semikolons verwendet?</p>
+
+<pre class="brush: js example-bad">var x, y = "foo",
+var x, = "foo"
+
+var first = document.getElementById('one'),
+var second = document.getElementById('two'),
+
+// SyntaxError: missing variable name
+</pre>
+
+<p>Die korrigierte Version:</p>
+
+<pre class="brush: js example-good">var x, y = "foo";
+var x = "foo";
+
+var first = document.getElementById('one');
+var second = document.getElementById('two');</pre>
+
+<h3 id="Arrays">Arrays</h3>
+
+<p>{{jsxref("Array")}}-Literale in JavaScript benötigen eckige Klammern um die Werte. Folgendes funktioniert nicht:</p>
+
+<pre class="brush: js example-bad">var arr = 1,2,3,4,5;
+// SyntaxError: missing variable name
+</pre>
+
+<p>Richtig ist:</p>
+
+<pre class="brush: js example-good">var arr = [1,2,3,4,5];</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="http://wiki.c2.com/?GoodVariableNames">Gute Variablennamen</a></li>
+ <li><code><a href="/de/docs/Web/JavaScript/Reference/Statements/var">var</a></code></li>
+ <li><a href="/de/docs/Web/JavaScript/Guide/Grammatik_und_Typen#Deklarationen">Variablendeklarationen im JavaScript Guide</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/non_configurable_array_element/index.html b/files/de/web/javascript/reference/fehler/non_configurable_array_element/index.html
new file mode 100644
index 0000000000..771f480dda
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/non_configurable_array_element/index.html
@@ -0,0 +1,83 @@
+---
+title: 'TypeError: can''t delete non-configurable array element'
+slug: Web/JavaScript/Reference/Fehler/Non_configurable_array_element
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Non_configurable_array_element
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">TypeError: can't delete non-configurable array element (Firefox)
+TypeError: Cannot delete property '2' of [object Array] (Chrome)
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Es wurde versucht die <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Array/length#Verkürzung_eines_Arrays">Länge eines Arrays zu kürzen</a> obwohl eines der Arrayelemente nicht Konfigurierbar(<a href="/de/docs/Web/JavaScript/Data_structures#Properties">non-configurable</a>) ist. Beim Kürzen eines Arrays werden die Elemente hinter der neuen Länge gelöscht, was in dieser Situation nicht funktioniert.</p>
+
+<p>Das <code>configurable</code> Attribut kontrolliert, ob eine Eigenschaft von einem Objekt gelöscht werden kann und seine Attribute (anders als <code>writable</code>) geändert werden können.</p>
+
+<p>Eigenschaften von einem Objekt, dass von einem <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Array#Syntax">Array-Initialisierer</a> erstellt wurden, sind konfigurierbar. Immer, wenn zum Beispiel {{jsxref("Object.defineProperty()")}} eingesetzt wird, ist die Eigenschaft nicht ohne weiteres konfigurierbar.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Nicht_konfigurierbare_Eigenschaften_mit_Object.defineProperty_erstellen">Nicht konfigurierbare Eigenschaften mit <code>Object.defineProperty</code> erstellen</h3>
+
+<p>Die {{jsxref("Object.defineProperty()")}} Funktion erstellt nicht konfiguriertbare Eigenschaften wenn sie nicht extra als konfigurierbar spezifiziert sind.</p>
+
+<pre class="brush: js example-bad">var arr = [];
+Object.defineProperty(arr, 0, {value: 0});
+Object.defineProperty(arr, 1, {value: "1"});
+
+arr.length = 1;
+// TypeError: can't delete non-configurable array element
+</pre>
+
+<p>Die Elemente müssen als Konfigurierbar eingestellt werden, wenn das Array später im Quelltext gekürzt werden soll.</p>
+
+<pre class="brush: js example-good">var arr = [];
+Object.defineProperty(arr, 0, {value: 0, configurable: true});
+Object.defineProperty(arr, 1, {value: "1", configurable: true});
+
+arr.length = 1;
+</pre>
+
+<h3 id="Ein_Array_versiegeln_(seal)">Ein Array versiegeln (<code>seal</code>)</h3>
+
+<p>Die {{jsxref("Object.seal()")}} Funktion markiert alle existirenden Elements als nicht Konfugurierbar.</p>
+
+<pre class="brush: js example-bad">var arr = [1,2,3];
+Object.seal(arr);
+
+arr.length = 1;
+// TypeError: can't delete non-configurable array element
+</pre>
+
+<p>Man muss den Aufruf von {{jsxref("Object.seal()")}} entfernen oder ein Kopie des Arrays machen. Im fall einer Kopie führt das Kürzen des kopierten Arrays zu keiner Änderung des Original Arrays.</p>
+
+<pre class="brush: js example-good">var arr = [1,2,3];
+Object.seal(arr);
+
+// Copy the initial array to shorten the copy
+var copy = Array.from(arr);
+copy.length = 1;
+// arr.length == 3
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Data_structures#Properties">[[Configurable]]</a></li>
+ <li>{{jsxref("Array.length")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.seal()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/not_a_codepoint/index.html b/files/de/web/javascript/reference/fehler/not_a_codepoint/index.html
new file mode 100644
index 0000000000..8d72c3be4b
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/not_a_codepoint/index.html
@@ -0,0 +1,55 @@
+---
+title: 'RangeError: argument is not a valid code point'
+slug: Web/JavaScript/Reference/Fehler/Not_a_codepoint
+tags:
+  - Errors
+  - JavaScript
+  - RangeError
+translation_of: Web/JavaScript/Reference/Errors/Not_a_codepoint
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">RangeError: {0} is not a valid code point (Firefox)
+RangeError: Invalid code point {0} (Chrome)
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("RangeError")}}</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Die {{jsxref("String.fromCodePoint()")}} Methode erwartet gültige Codepoint.</p>
+
+<p>Ein <a href="https://de.wikipedia.org/wiki/Codepoint">Codepoint</a>  ist ein Wert im Unicode Coderaum, der als Integer im Wertebereich zwischen <code>0</code> und <code>0x10FFFF liegt</code>.</p>
+
+<p>Die Verwendung von {{jsxref("NaN")}} , negativen Integern (<code>-1</code>), nicht Integern (<code>3.14</code>) und Werten die größer als <code>0x10FFFF</code> (<code>1114111</code>) sind, werden einen Fehler bei dieser Methode produzieren.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Ungültige_Fälle">Ungültige Fälle</h3>
+
+<pre class="brush: js example-bad">String.fromCodePoint('_');      // RangeError
+String.fromCodePoint(Infinity); // RangeError
+String.fromCodePoint(-1);       // RangeError
+String.fromCodePoint(3.14);     // RangeError
+String.fromCodePoint(3e-2);     // RangeError
+String.fromCodePoint(NaN);      // RangeError</pre>
+
+<h3 id="Gültige_Fälle">Gültige Fälle</h3>
+
+<pre class="brush: js example-good">String.fromCodePoint(42);       // "*"
+String.fromCodePoint(65, 90);   // "AZ"
+String.fromCodePoint(0x404);    // "\u0404"
+String.fromCodePoint(0x2F804);  // "\uD87E\uDC04"
+String.fromCodePoint(194564);   // "\uD87E\uDC04"
+String.fromCodePoint(0x1D306, 0x61, 0x1D307) // "\uD834\uDF06a\uD834\uDF07"
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("String.fromCodePoint()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/not_a_constructor/index.html b/files/de/web/javascript/reference/fehler/not_a_constructor/index.html
new file mode 100644
index 0000000000..42858cf706
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/not_a_constructor/index.html
@@ -0,0 +1,97 @@
+---
+title: 'TypeError: "x" is not a constructor'
+slug: Web/JavaScript/Reference/Fehler/Not_a_constructor
+tags:
+  - Fehler
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Not_a_constructor
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">TypeError: "x" is not a constructor
+
+TypeError: Math is not a constructor
+TypeError: JSON is not a constructor
+TypeError: Symbol is not a constructor
+TypeError: Reflect is not a constructor
+TypeError: Intl is not a constructor
+TypeError: SIMD is not a constructor
+TypeError: Atomics is not a constructor
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Es wurde versucht auf ein Objekt oder eine Variable zuzugreifen welche kein Konstruktor ist. Mehr darüber, was ein Konstruktur ist, finden Sie unter {{Glossary("constructor")}} oder in der Beschreibung des <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> Operators</a>.</p>
+
+<p>Es gibt viele globale Objekte, wie {{jsxref("String")}} oder {{jsxref("Array")}}, welche mittels <code>new</code> erstellt werden können. Jedoch funktioniert das bei einigen Objekten nicht und deren Eigenschaften und Methoden sind statisch.</p>
+
+<p>Die folgenden Standard build-in Objekte sind keine Konstruktoren: {{jsxref("Math")}}, {{jsxref("JSON")}}, {{jsxref("Symbol")}}, {{jsxref("Reflect")}}, {{jsxref("Intl")}}, {{jsxref("SIMD")}}, {{jsxref("Atomics")}}.</p>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">Generelle Funktionen</a> können ebenso nicht als Konstruktor verwendet werden.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Ungültige_Fälle">Ungültige Fälle</h3>
+
+<pre class="brush: js example-bad">var Car = 1;
+new Car();
+// TypeError: Car is not a constructor
+
+new Math();
+// TypeError: Math is not a constructor
+
+new Symbol();
+// TypeError: Symbol is not a constructor
+
+function* f() {};
+var obj = new f;
+// TypeError: f is not a constructor
+</pre>
+
+<h3 id="Ein_car_Konstruktor">Ein car Konstruktor</h3>
+
+<p>Stellen Sie sich vor, Sie erstellen ein Objekt vom Typ vars. Sie wollen dieses Objekt als <code>Car</code> bezeichen und es soll Eigenschaften für make, model und year besitzt. Um dies zu erreichen, schreiben Sie die folgende Funktion:</p>
+
+<pre class="brush: js">function Car(make, model, year) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+}
+</pre>
+
+<p>Jetzt können Sie wie folgt ein Objekt mit dem Namen <code>mycar</code> erstellen:</p>
+
+<pre class="brush: js">var mycar = new Car('Eagle', 'Talon TSi', 1993);</pre>
+
+<h3 id="Promises">Promises</h3>
+
+<p>Bei Rückgabe eines Promises, welches sofort im Status resolved oder rejected ist, brauchen Sie kein neues Promise mit <em>new Promise(...)</em> erstellen und damit zu arbeiten. </p>
+
+<p>Folgendes ist nicht erlaubt (der <a href="/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Promise#Constructor">Promise Konstruktor</a> wird nicht korrekt aufgerufen) und wirft eine <code>TypeError: this is not a constructor</code> Exception.</p>
+
+<pre class="brush: js example-bad">return new Promise.resolve(true);
+</pre>
+
+<p>Verwenden Sie stattdessen<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve"> Promise.resolve()</a> oder die <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/reject">statische Methode Promise.reject()</a>:</p>
+
+<pre class="brush: js">// Das ist erlaubt, aber unnötig lang:
+return new Promise((resolve, reject) =&gt; { resolve(true); })
+
+// Alternative Verwendung der statische Methoden:
+return Promise.resolve(true);
+return Promise.reject(false);
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{Glossary("constructor","Konstruktor")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> Operator</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/not_a_function/index.html b/files/de/web/javascript/reference/fehler/not_a_function/index.html
new file mode 100644
index 0000000000..a8b66dff17
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/not_a_function/index.html
@@ -0,0 +1,124 @@
+---
+title: 'TypeError: "x" is not a function'
+slug: Web/JavaScript/Reference/Fehler/Not_a_function
+tags:
+  - Errors
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Not_a_function
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">TypeError: "x" is not a function
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("TypeError")}}.</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Es wird versucht, ein Wert wie eine Funktion aufzurufen, da aber der Wert eigentlich keine Funktion ist, kommt es zu diesem Fehler. Manchmal erwartet das Programm, dass eine Funktion erstellt wird, was aber nicht der Fall ist.</p>
+
+<p>Vielleicht ist ein Tippfehler im Funktionsnamen. Manchmal besitzt das aufgerufene Objekt eine Funktion aber auch nicht. Zum Beispiel besitzen JavaScript Objekte keine <code>map</code> Funktion, aber JavaScript Arrays haben diese Funktion.</p>
+
+<p>Es gibt viele eingebaute Funktionen, die eine (Callback-) Funktion benötigen. Es muss eine Funktion bereitgestellt werden, damit diese Methoden normal funktionieren:</p>
+
+<ul>
+ <li>Wenn mit {{jsxref("Array")}} oder {{jsxref("TypedArray")}} Objekten gearbeitet wird:
+  <ul>
+   <li>{{jsxref("Array.prototype.every()")}}, {{jsxref("Array.prototype.some()")}}, {{jsxref("Array.prototype.forEach()")}}, {{jsxref("Array.prototype.map()")}}, {{jsxref("Array.prototype.filter()")}}, {{jsxref("Array.prototype.reduce()")}}, {{jsxref("Array.prototype.reduceRight()")}}, {{jsxref("Array.prototype.find()")}}</li>
+  </ul>
+ </li>
+ <li>Wenn mit {{jsxref("Map")}} und {{jsxref("Set")}} Objekten gearbeitet wird:
+  <ul>
+   <li>{{jsxref("Map.prototype.forEach()")}} und {{jsxref("Set.prototype.forEach()")}}</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Ein_Schreibfehler_im_Funktionsnamen">Ein Schreibfehler im Funktionsnamen</h3>
+
+<p>In diesem Fall passiert es viel zu oft, dass im Name ein Schreibfehler enthält:</p>
+
+<pre class="brush: js example-bad">var x = document.getElementByID('foo');
+// TypeError: document.getElementByID is not a function
+</pre>
+
+<p>Der korrekte Funktionsname ist <code>getElementByI<strong>d</strong></code>:</p>
+
+<pre class="brush: js example-good">var x = document.getElementById('foo');
+</pre>
+
+<h3 id="Funktion_wird_auf_dem_falschen_Objekt_aufgerufen">Funktion wird auf dem falschen Objekt aufgerufen</h3>
+
+<p>Für bestimmte Methoden musst eine (callback) Funktion benutzt werden, die nur bei spezifizierten Objekten funktionieren. In diesem Beispiel wird {{jsxref("Array.prototype.map()")}} verwendet, welche nur mit {{jsxref("Array")}} Objekten funktioniert.</p>
+
+<pre class="brush: js example-bad">var obj = {a: 13, b: 37, c: 42};
+
+obj.map(function(num) {
+  return num * 2;
+});
+
+// TypeError: "x" is not a function</pre>
+
+<p>Stattdessen muss ein Array verwendet werden:</p>
+
+<pre class="brush: js example-good">var numbers = [1, 4, 9];
+
+numbers.map(function(num) {
+  return num * 2;
+});
+
+// Array [2, 8, 18]
+</pre>
+
+<h3 id="Funktionen_teilen_einen_Namen_mit_einer_existierenden_Eigenschaft">Funktionen teilen einen Namen mit einer existierenden Eigenschaft</h3>
+
+<p>Manchmal, wenn eine Klasse geschrieben wird, haben eine Eigenschaft und eine Funktion den gleichen Namen. Nach dem Aufruf der Funktion denkt der Compiler, dass die Funktion nicht mehr existiert.</p>
+
+<pre class="brush: js example-bad">var Dog = function () {
+ this.age = 11;
+ this.color = "black";
+ this.name = "Ralph";
+ return this;
+}
+
+Dog.prototype.name = function(name) {
+ this.name = name;
+ return this;
+}
+
+
+var myNewDog = new Dog();
+myNewDog.name("Cassidy"); //Uncaught TypeError: myNewDog.name is not a function
+</pre>
+
+<p>Stattdessen kann ein anderer Eigenschaftsname benutzt werden:</p>
+
+<pre class="brush: js example-good">var Dog = function () {
+ this.age = 11;
+ this.color = "black";
+ this.dogName = "Ralph"; //Using this.dogName instead of .name
+ return this;
+}
+
+Dog.prototype.name = function(name) {
+ this.dogName = name;
+ return this;
+}
+
+
+var myNewDog = new Dog();
+myNewDog.name("Cassidy"); //Dog { age: 11, color: 'black', dogName: 'Cassidy' }
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Functions">Functions</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/not_defined/index.html b/files/de/web/javascript/reference/fehler/not_defined/index.html
new file mode 100644
index 0000000000..030c47536b
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/not_defined/index.html
@@ -0,0 +1,70 @@
+---
+title: 'ReferenceError: "x" is not defined'
+slug: Web/JavaScript/Reference/Fehler/Not_defined
+tags:
+  - Error
+  - JavaScript
+  - ReferenceError
+translation_of: Web/JavaScript/Reference/Errors/Not_defined
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">ReferenceError: "x" is not defined
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("ReferenceError")}}.</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Es gibt eine Referenz auf eine Variable, die nicht existiert. Diese Variable muss deklariert werden; oder man muss sicherstellen, dass sie im Skript zugänglich ist; oder sich im aktuellen {{Glossary("scope")}} befindet.</p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Wenn Sie eine Bibliothek nutzen (wie z.B. jQuery), stellen Sie sicher, dass diese tatsächlich geladen ist, bevor Sie auf dessen Variablen (z. B. "$") zugreifen. Schreiben Sie das {{HTMLElement("script")}} Element, welches die Bibliothek lädt vor den Code, der die Bibliothek verwendet.</p>
+</div>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Variable_nicht_deklariert">Variable nicht deklariert</h3>
+
+<pre class="brush: js example-bad">foo.substring(1); // ReferenceError: foo is not defined
+</pre>
+
+<p>Die "foo" Variable ist nirgends deklariert. Die Variable muss ein String sein, damit die Methode {{jsxref("String.prototype.substring()")}} funktioniert.</p>
+
+<pre class="brush: js example-good">var foo = "bar";
+foo.substring(1); // "ar"</pre>
+
+<h3 id="Falscher_Gültigkeitsbereich">Falscher Gültigkeitsbereich</h3>
+
+<p>Eine Variable muss im aktuellem Kontext verfügbar sein. Variablen, die innerhalb einer <a href="/de/docs/Web/JavaScript/Reference/Functions">Funktion</a> definiert sind, können nicht von außerhalb erreicht werden, da diese nur im Gültigkeitsbereich der Funktion existieren.</p>
+
+<pre class="brush: js example-bad">function numbers() {
+  var num1 = 2,
+      num2 = 3;
+  return num1 + num2;
+}
+
+console.log(num1); // ReferenceError "num1" is not defined.</pre>
+
+<p>Wobei aus einer Methode kann man auf alle Variablen und Methoden zugreifen, die im gleichen Gültigkeitsbereich definiert worden sind. Kurz gesagt, eine Methode, die im globalen Gültigkeitsbereich definiert worden ist, kann auf alle Variablen zugreifen, die im globalen Gültigkeitsbereich definiert wurden.</p>
+
+<pre class="brush: js example-good">var num1 = 2,
+    num2 = 3;
+
+function numbers() {
+  return num1 + num2;
+}
+
+console.log(numbers()); // 5</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{Glossary("Scope")}}</li>
+ <li><a href="/de/docs/Web/JavaScript/Guide/Grammatik_und_Typen#Deklarationen">Variablendeklaration im JavaScript Guide</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Guide/Funktionen#Scopes_(G%C3%BCltigkeitsbereiche)_von_Funktionen">Methoden Gültigkeitsbereich im JavaScript Guide</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/precision_range/index.html b/files/de/web/javascript/reference/fehler/precision_range/index.html
new file mode 100644
index 0000000000..d03b4203c5
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/precision_range/index.html
@@ -0,0 +1,96 @@
+---
+title: 'RangeError: precision is out of range'
+slug: Web/JavaScript/Reference/Fehler/Precision_range
+tags:
+  - Errors
+  - JavaScript
+  - RangeError
+translation_of: Web/JavaScript/Reference/Errors/Precision_range
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">RangeError: precision {0} out of range (Firefox)
+RangeError: toExponential() argument must be between 0 and 20 (Chrome)
+RangeError: toFixed() digits argument must be between 0 and 20 (Chrome)
+RangeError: toPrecision() argument must be between 1 and 21 (Chrome)
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("RangeError")}}</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Das übergebene Argument für die Genauigkeit ist, für einer der folgenden Funktionen, ausserhalb des gültigen Bereiches:</p>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toExponential()")}}</li>
+ <li>{{jsxref("Number.prototype.toFixed()")}}</li>
+ <li>{{jsxref("Number.prototype.toPrecision()")}}</li>
+</ul>
+
+<p>Der gülitge Bereich für diese Methoden liegt im normal Fall zwischen 0 und 20 (oder 21). Wobei die ECMAScript Spezifikation erlaubt eine Erweiterung de Bereiches.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Method</th>
+   <th scope="col">Firefox (SpiderMonkey)</th>
+   <th scope="col">Chrome, Opera (V8)</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("Number.prototype.toExponential()")}}</td>
+   <td>0 bis 100</td>
+   <td>0 bis 20</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.prototype.toFixed()")}}</td>
+   <td>-20 bis100</td>
+   <td>0 bis 20</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.prototype.toPrecision()")}}</td>
+   <td>1 bis 100</td>
+   <td>1 bis 21</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Ungültige_Fälle">Ungültige Fälle</h3>
+
+<pre class="brush: js example-bad">77.1234.toExponential(-1);  // RangeError
+77.1234.toExponential(101); // RangeError
+
+2.34.toFixed(-100);         // RangeError
+2.34.toFixed(1001);         // RangeError
+
+1234.5.toPrecision(-1);     // RangeError
+1234.5.toPrecision(101);    // RangeError
+</pre>
+
+<h3 id="Gültige_Fälle">Gültige Fälle</h3>
+
+<pre class="brush: js example-good">77.1234.toExponential(4); // 7.7123e+1
+77.1234.toExponential(2); // 7.71e+1
+
+2.34.toFixed(1); // 2.3
+2.35.toFixed(1); // 2.4 (zu beachten ist, das in diesem Fall aufgerundet wird)
+
+5.123456.toPrecision(5); // 5.1235
+5.123456.toPrecision(2); // 5.1
+5.123456.toPrecision(1); // 5
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toExponential()")}}</li>
+ <li>{{jsxref("Number.prototype.toFixed()")}}</li>
+ <li>{{jsxref("Number.prototype.toPrecision()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/property_access_denied/index.html b/files/de/web/javascript/reference/fehler/property_access_denied/index.html
new file mode 100644
index 0000000000..d4feb4feb7
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/property_access_denied/index.html
@@ -0,0 +1,47 @@
+---
+title: 'Error: Permission denied to access property "x"'
+slug: Web/JavaScript/Reference/Fehler/Property_access_denied
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - Security
+translation_of: Web/JavaScript/Reference/Errors/Property_access_denied
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">Error: Permission denied to access property "x"
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("Error")}}.</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p><span class="seoSummary">Es wurde versucht auf ein Objekt zuzugreifen, wofür man nicht ausreichend berechtig ist. In den meisten Fällen handelt es sich um ein {{HTMLElement("iframe")}} Element, das von einer anderen Domäne geladen wurde und die <a href="/de/docs/Web/Security/Same-origin_policy">Same-Origin Policy</a> verletzt.</span></p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;iframe id="myframe" src="http://www1.w3c-test.org/common/blank.html"&gt;&lt;/iframe&gt;
+    &lt;script&gt;
+      onload = function() {
+        console.log(frames[0].document);
+        // Error: Permission denied to access property "document"
+      }
+    &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{HTMLElement("iframe")}}</li>
+ <li><a href="/de/docs/Web/Security/Same-origin_policy">Same-origin policy</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/read-only/index.html b/files/de/web/javascript/reference/fehler/read-only/index.html
new file mode 100644
index 0000000000..bb56305880
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/read-only/index.html
@@ -0,0 +1,78 @@
+---
+title: 'TypeError: "x" is read-only'
+slug: Web/JavaScript/Reference/Fehler/Read-only
+tags:
+  - Errors
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Read-only
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">TypeError: "x" is read-only (Firefox)
+TypeError: 0 is read-only (Firefox)
+TypeError: Cannot assign to read only property 'x' of #&lt;Object&gt; (Chrome)
+TypeError: Cannot assign to read only property '0' of [object Array] (Chrome)
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Die globale Variable oder Objekteigenschaften werden als nur lesbare Eigenschaften definiert (technisch wird das mit der <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty#Writable_attribute"><code>writable</code> Eigenschaft</a> erreicht).</p>
+
+<p>Der Fehler tritt nur im <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a> auf. Im normalen Modus wird eine Zuweisung still ignoriert.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Nicht_valide_Fälle">Nicht valide Fälle</h3>
+
+<p>Nur lesbare Eigenschaften sind nicht sehr weit verbreitet, aber sie können mit {{jsxref("Object.defineProperty()")}} oder {{jsxref("Object.freeze()")}} erstellt werden.</p>
+
+<pre class="brush: js example-bad">'use strict';
+var obj = Object.freeze({name: 'Elsa', score: 157});
+obj.score = 0;  // TypeError
+
+'use strict';
+Object.defineProperty(this, 'LUNG_COUNT', {value: 2, writable: false});
+LUNG_COUNT = 3;  // TypeError
+
+'use strict';
+var frozenArray = Object.freeze([0, 1, 2]);
+frozenArray[0]++;  // TypeError
+</pre>
+
+<p>Zudem gibt es ein paar standard Eigenschaft in JavaScript, die nicht überschrieben werden können. Da währen zum Beispiel mathematische Konstanten.</p>
+
+<pre class="brush: js example-bad">'use strict';
+Math.PI = 4;  // TypeError
+</pre>
+
+<p>Die globale Variable <code>undefined</code> ist auch nur lesbar, sodass der berüchtigte Fehler "undefined is not a function" nicht wie folgt umgangen werden kann:</p>
+
+<pre class="brush: js example-bad">'use strict';
+undefined = function() {};  // TypeError: "undefined" is read-only
+</pre>
+
+<h3 id="Valide_Fälle">Valide Fälle</h3>
+
+<pre class="brush: js example-good">'use strict';
+var obj = Object.freeze({name: 'Score', points: 157});
+obj = {name: obj.name, points: 0};   // replacing it with a new object works
+
+'use strict';
+var LUNG_COUNT = 2;  // a `var` works, because it's not read-only
+LUNG_COUNT = 3;  // ok (anatomically unlikely, though)
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.freeze()")}}</li>
+ <li><a href="https://www.answers.com/Q/Which_animals_have_three_lungs">"Which animals have three lungs?" on answers.com</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/redeclared_parameter/index.html b/files/de/web/javascript/reference/fehler/redeclared_parameter/index.html
new file mode 100644
index 0000000000..e80836e50f
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/redeclared_parameter/index.html
@@ -0,0 +1,61 @@
+---
+title: 'SyntaxError: redeclaration of formal parameter "x"'
+slug: Web/JavaScript/Reference/Fehler/Redeclared_parameter
+tags:
+  - Errors
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Redeclared_parameter
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">SyntaxError: redeclaration of formal parameter "x" (Firefox)
+SyntaxError: Identifier "x" has already been declared (Chrome)
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Der selbe Variablenname wird für einen Funktionsparameter benutzt und dann in einer <code><a href="/de/docs/Web/JavaScript/Reference/Statements/let">let</a></code> Zuweisung im Funktionskörper wieder neu deklariert. Das Neudeklarieren der gleichen Variablen in der selben Funktion oder im selben Block mit <code>let</code> ist in JavaScript nicht erlaubt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>In diesem Fall wird der Parameter "arg" neu deklariert.</p>
+
+<pre class="brush: js example-bad">function f(arg) {
+  let arg = 'foo';
+}
+
+// SyntaxError: redeclaration of formal parameter "arg"
+</pre>
+
+<p>Wenn der Wert von "arg" im Funktionskörper geändert werden soll, kann das getan werden, aber ohne die selbe Variable neu zu deklarieren. Oder anders gesagt, man kann das <code>let</code> Schlüsselwort weg lassen. Wenn eine neue Variable erstellt werden soll, muss sie umbenannt werden, damit es keine Konflikte mit dem Funktionsparameter mehr gibt.</p>
+
+<pre class="brush: js example-good">function f(arg) {
+  arg = 'foo';
+}
+
+function f(arg) {
+  let bar = 'foo';
+}
+</pre>
+
+<h2 id="Kompatibilitätshinweise">Kompatibilitätshinweise</h2>
+
+<ul>
+ <li>Vor Firefox 49 {{geckoRelease(49)}}, wurde ein {{jsxref("TypeError")}} erzeugt ({{bug(1275240)}}).</li>
+</ul>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><code><a href="/de/docs/Web/JavaScript/Reference/Statements/let">let</a></code></li>
+ <li><code><a href="/de/docs/Web/JavaScript/Reference/Statements/const">const</a></code></li>
+ <li><code><a href="/de/docs/Web/JavaScript/Reference/Statements/var">var</a></code></li>
+ <li><a href="/de/docs/Web/JavaScript/Guide/Grammatik_und_Typen#Deklarationen">Deklarieren von Variablen</a> im <a href="/de/docs/Web/JavaScript/Guide">JavaScript Guide</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/reduce_of_empty_array_with_no_initial_value/index.html b/files/de/web/javascript/reference/fehler/reduce_of_empty_array_with_no_initial_value/index.html
new file mode 100644
index 0000000000..a1a9a43748
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/reduce_of_empty_array_with_no_initial_value/index.html
@@ -0,0 +1,88 @@
+---
+title: 'TypeError: Reduce of empty array with no initial value'
+slug: Web/JavaScript/Reference/Fehler/Reduce_of_empty_array_with_no_initial_value
+tags:
+  - Error
+  - JavaScript
+  - Reference
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Reduce_of_empty_array_with_no_initial_value
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">TypeError: reduce of empty array with no initial value
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>In JavaScript gibt es einige Reduktionsfunktionen:</p>
+
+<ul>
+ <li>{{jsxref("Array.prototype.reduce()")}}, {{jsxref("Array.prototype.reduceRight()")}} und</li>
+ <li>{{jsxref("TypedArray.prototype.reduce()")}},  {{jsxref("TypedArray.prototype.reduceRight()")}}).</li>
+</ul>
+
+<p>Diese Funktionen haben den optionalen <code>initialValue</code> Parameter (welcher als erster Parameter beim ersten Aufruf der <code>callback</code> Funktion benutzt wird). Immer, wenn dieser Wert nicht angegeben wird, wird das erste Element des {{jsxref("Array", "Arrays")}} oder {{jsxref("TypedArray", "TypedArrays")}} als Initialwert benutzt. Dieser Fehler tritt auf, wenn das Array leer ist, weil es in diesem Fall keinen Initialwert gibt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Nicht_valide_Fälle">Nicht valide Fälle</h3>
+
+<p>Dieses Problem tritt öfter bei einer Kombination mit einem Filter ({{jsxref("Array.prototype.filter()")}}, {{jsxref("TypedArray.prototype.filter()")}}), welcher Elemente aus der Liste entfernt. Dieser lässt kein Element als Initialwert in der Liste zurück.</p>
+
+<pre class="brush: js example-bad">var ints = [0, -1, -2, -3, -4, -5];
+ints.filter(x =&gt; x &gt; 0)         // Entfernt alle Elemente
+    .reduce((x, y) =&gt; x + y)    // no more elements to use for the initial value.</pre>
+
+<p>Der gleiche Fehler kann bei einem Tippfehler passieren oder, bei einer unerwarteten Anzahl von Elementen in einer Liste.</p>
+
+<pre class="brush: js example-bad">var names = document.getElementsByClassName("names");
+var name_list = Array.prototype.reduce.call(names, (acc, name) =&gt; acc + ", " + name);
+</pre>
+
+<h3 id="Valide_Fälle">Valide Fälle</h3>
+
+<p>Diese Problem kann mit zwei Wegen gelöst werden.</p>
+
+<p>Ein Weg ist es, einen <code>initialValue</code> als neutrales Element des Operators anzugeben, so wie 0 bei der Addition, 1 bei der Multiplikation oder ein leerer String bei einer Konkatination.</p>
+
+<pre class="brush: js example-good">var ints = [0, -1, -2, -3, -4, -5];
+ints.filter(x =&gt; x &lt; 0)         // removes all elements
+    .reduce((x, y) =&gt; x + y, 0) // the initial value is the neutral element of the addition
+</pre>
+
+<p>Ein anderer Weg ist es den Fall eines leeren Arrays schon vor dem Aufruf von <code>reduce</code> zu behandeln oder einen Dummywert als Initialwert in der <code>callback</code>-Funktion zu benutzen.</p>
+
+<pre class="brush: js example-good">var names = document.getElementsByClassName("names");
+
+var name_list1 = "";
+if (names1.length &gt;= 1)
+  name_list1 = Array.prototype.reduce.call(names, (acc, name) =&gt; acc + ", " + name);
+// name_list1 == "" when names is empty.
+
+var name_list2 = Array.prototype.reduce.call(names, (acc, name) =&gt; {
+  if (acc == "") // initial value
+    return name;
+  return acc + ", " + name;
+}, "");
+// name_list2 == "" when names is empty.
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.reduce()")}}</li>
+ <li>{{jsxref("Array.prototype.reduceRight()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.reduce()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.reduceRight()")}}</li>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("TypedArray")}}</li>
+ <li>{{jsxref("Array.prototype.filter()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.filter()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/reserved_identifier/index.html b/files/de/web/javascript/reference/fehler/reserved_identifier/index.html
new file mode 100644
index 0000000000..a483f4cd1a
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/reserved_identifier/index.html
@@ -0,0 +1,80 @@
+---
+title: 'SyntaxError: "x" is a reserved identifier'
+slug: Web/JavaScript/Reference/Fehler/Reserved_identifier
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Reserved_identifier
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">SyntaxError: "x" is a reserved identifier (Firefox)
+SyntaxError: Unexpected reserved word (Chrome)</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p><a href="/de/docs/Web/JavaScript/Reference/Lexical_grammar#Schlüsselwörter">Reservierte Schlüsselwörter</a> führen zu einem Fehler, wenn sie als Bezeichner verwendet werden. Im Strict Mode und im Normalen Mode führen folgende Schlüsselwörter zu einem Fehler:</p>
+
+<ul>
+ <li><code>enum</code></li>
+</ul>
+
+<p>Die folgenden Schlüsselwörter führen nur im Strict Mode zu einem Fehler:</p>
+
+<ul class="threecolumns">
+ <li><code>implements</code></li>
+ <li><code>interface</code></li>
+ <li>{{jsxref("Statements/let", "let")}}</li>
+ <li><code>package</code></li>
+ <li><code>private</code></li>
+ <li><code>protected</code></li>
+ <li><code>public</code></li>
+ <li><code>static</code></li>
+</ul>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Reservierte_Schlüsselwörter_im_Strict_und_Normalen_Mode">Reservierte Schlüsselwörter im Strict und Normalen Mode</h3>
+
+<p>Der<code>enum</code> Bezeichner ist generell reserviert.</p>
+
+<pre class="brush: js example-bad">var enum = { RED: 0, GREEN: 1, BLUE: 2 };
+// SyntaxError: enum is a reserved identifier
+</pre>
+
+<p>Im Strict Mode sind weitere Bezeichner reserviert.</p>
+
+<pre class="brush: js example-bad">"use strict";
+var package = ["potatoes", "rice", "fries"];
+// SyntaxError: package is a reserved identifier
+</pre>
+
+<p>Man muss die Variablen umbenennen.</p>
+
+<pre class="brush: js example-good">var colorEnum = { RED: 0, GREEN: 1, BLUE: 2 };
+var list = ["potatoes", "rice", "fries"];</pre>
+
+<h3 id="Ältere_Browser_aktualisieren">Ältere Browser aktualisieren</h3>
+
+<p>Wenn ein alter Browser eingesetzt wird, der zum Beispiel noch nicht <code><a href="/de/docs/Web/JavaScript/Reference/Statements/let">let</a></code> oder <code><a href="/de/docs/Web/JavaScript/Reference/Statements/class">class</a></code> implementiert, muss der Browser aktualisiert werden, so dass er diese neuen Sprachfunktionen unterstützt.</p>
+
+<pre class="brush: js">"use strict";
+class DocArchiver {}
+
+// SyntaxError: class is a reserved identifier
+// (throws in older browsers only, e.g. Firefox 44 and older)
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="http://wiki.c2.com/?GoodVariableNames">Gute Variablennamen</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/resulting_string_too_large/index.html b/files/de/web/javascript/reference/fehler/resulting_string_too_large/index.html
new file mode 100644
index 0000000000..e3f0246d13
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/resulting_string_too_large/index.html
@@ -0,0 +1,49 @@
+---
+title: 'RangeError: repeat count must be less than infinity'
+slug: Web/JavaScript/Reference/Fehler/Resulting_string_too_large
+tags:
+  - Errors
+  - JavaScript
+  - RangeError
+translation_of: Web/JavaScript/Reference/Errors/Resulting_string_too_large
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">RangeError: repeat count must be less than infinity and not overflow maximum string size (Firefox)
+
+RangeError: Invalid count value (Chrome)
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("RangeError")}}</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Die {{jsxref("String.prototype.repeat()")}} Methode wurde benutzt. Sie hat einen <code>count</code> Parameter welche die Anzahl der Wiederholungen des Strings angibt. Dieser muss zwischen 0 und kleiner positiv {{jsxref("Infinity")}} sein und kann nicht negativ sein. Das erlaubte Intervall kann wie folgt beschrieben werden: [0, +∞).</p>
+
+<p>Der Ergebnisstring kann zudem nicht länger als die maximale Stringlänge sein, welche sich je nach JavaScript-Umgebung unterscheiden kann. In Firefox (SpiderMonkey) ist die maximale Stringlänge 2<sup>28</sup> -1 (<code>0xFFFFFFF</code>).</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Falsche_Fälle">Falsche Fälle</h3>
+
+<pre class="brush: js example-bad">'abc'.repeat(Infinity); // RangeError
+'a'.repeat(2**28);      // RangeError
+</pre>
+
+<h3 id="Richtige_Fälle">Richtige Fälle</h3>
+
+<pre class="brush: js example-good">'abc'.repeat(0);    // ''
+'abc'.repeat(1);    // 'abc'
+'abc'.repeat(2);    // 'abcabc'
+'abc'.repeat(3.5);  // 'abcabcabc' (count will be converted to integer)
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.repeat()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/stmt_after_return/index.html b/files/de/web/javascript/reference/fehler/stmt_after_return/index.html
new file mode 100644
index 0000000000..be395c3b83
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/stmt_after_return/index.html
@@ -0,0 +1,77 @@
+---
+title: 'Warning: unreachable code after return statement'
+slug: Web/JavaScript/Reference/Fehler/Stmt_after_return
+tags:
+  - JavaScript
+  - Warning
+translation_of: Web/JavaScript/Reference/Errors/Stmt_after_return
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">Warning: unreachable code after return statement (Firefox)
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>Warnung</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Nicht erreichbarer Code nach einem return Statement tritt in folgenden Fällen auf:</p>
+
+<ul>
+ <li>Wenn eine weitere Anweisung nach einer {{jsxref("Statements/return", "return")}} Anweisung folgt oder</li>
+ <li>wenn man eine {{jsxref("Statements/return", "return")}} Anweisung ohne abschließendes Semikolon verwendet und anschließend eine weiteren Anweisung angibt.</li>
+</ul>
+
+<p>Wenn eine Anweisung nach einer gültigen <code>return</code> Anweisung existiert, dann wird diese Warnmeldung ausgegeben, um aufzuzeigen, das der nachfolgende Quellcode nie ausgeführt wird.</p>
+
+<p>Warum sollte man Semikolons am Ende einer <code>return</code> Anweisung verwenden? Da im Falle einer <code>return</code> Anweisung ohne Semikolon, die Absicht des Entwicklers nicht klar ist. Es stellt sich die Frage, ob die Anweisung nach dem <code>return</code> als Rückgabewert der Methode zu sehen ist, oder sollte die Ausführung gleich beim <code>return</code> beendet werden. Hier zeigt die Warnung an, dass es sich um einen uneindeutige Situation handelt.</p>
+
+<p>Warnungen werden nicht erzeugt wenn nach einem semikolonlosen <code>return</code> folgende Anweisungen folgen:</p>
+
+<ul>
+ <li>{{jsxref("Statements/throw", "throw")}}</li>
+ <li>{{jsxref("Statements/break", "break")}}</li>
+ <li>{{jsxref("Statements/var", "var")}}</li>
+ <li>{{jsxref("Statements/function", "function")}}</li>
+</ul>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Fehlerfälle">Fehlerfälle</h3>
+
+<pre class="brush: js example-bad">function f() {
+  var x = 3;
+  x += 4;
+  return x;   // die return Anweisung beendet die Methode sofort.
+  x -= 3;     // somit ist dieser Code nicht erreichbar und wird nie ausgeführt
+}
+
+function f() {
+  return     // diese Zeile ist äquivalent zu `return;`
+    3 + 4;   // somit kann diese Code-Zeile nie erreicht werden
+}
+</pre>
+
+<h3 id="Gültige_Fälle">Gültige Fälle</h3>
+
+<pre class="brush: js example-good">function f() {
+  var x = 3;
+  x += 4;
+  x -= 3;
+  return x;  // OK: return ist die letzte Anweisung in der Methode
+}
+
+function f() {
+  return 3 + 4  // OK: return ohne Semikolon, aber mit einem Ausdruck auf der gleiche Zeile
+}
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Statements/return", "Automatic Semicolon Insertion", "#Automatic_Semicolon_Insertion", 1)}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/strict_non_simple_params/index.html b/files/de/web/javascript/reference/fehler/strict_non_simple_params/index.html
new file mode 100644
index 0000000000..a288a81a10
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/strict_non_simple_params/index.html
@@ -0,0 +1,111 @@
+---
+title: 'SyntaxError: "use strict" not allowed in function with non-simple parameters'
+slug: Web/JavaScript/Reference/Fehler/Strict_Non_Simple_Params
+tags:
+  - Errors
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Strict_Non_Simple_Params
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">Firefox:
+SyntaxError: "use strict" not allowed in function with default parameter
+SyntaxError: "use strict" not allowed in function with rest parameter
+SyntaxError: "use strict" not allowed in function with destructuring parameter
+
+Chrome:
+SyntaxError: Illegal 'use strict' directive in function with non-simple parameter list
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("SyntaxError")}}.</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Eine <code>"use strict"</code> Direktive steht am Anfang einer Funktion, die einen der folgende Parameter hat:</p>
+
+<ul>
+ <li>{{jsxref("Functions/Default_parameters", "Standardparameter", "", 1)}}</li>
+ <li>{{jsxref("Functions/rest_parameters", "Rest Parameter", "", 1)}}</li>
+ <li>{{jsxref("Operators/Destructuring_assignment", "Destrukturierte Parameter", "", 1)}}</li>
+</ul>
+
+<p>Eine <code>"use strict"</code> Direktive ist am Anfang solcher Funktionen durch die ECMAScript Spezifikation nicht erlaubt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Funktionsstatement">Funktionsstatement</h3>
+
+<p>In diesem Fall hat die Funktion <code>sum</code> zwei Standardparameter <code>a=1</code> und <code>b=2</code>:</p>
+
+<pre class="brush: js example-bad">function sum(a = 1, b = 2) {
+  // SyntaxError: "use strict" not allowed in function with default parameter
+  'use strict';
+  return a + b;
+}
+</pre>
+
+<p>Wenn die Funktion im <a href="/de/docs/Web/JavaScript/Reference/Strict_mode">Strict Mode</a> sein soll und das Skript oder die umschließende FUnktion auch für den Strict Mode in Ordnung ist, kann man die <code>"use strict"</code> Direktive nach außen verschieben:</p>
+
+<pre class="brush: js example-good">'use strict';
+function sum(a = 1, b = 2) {
+  return a + b;
+}
+</pre>
+
+<h3 id="Funktionsausdruck">Funktionsausdruck</h3>
+
+<p>Bei eine Funktionsausdruck kann ein andere Workaround genutzt werden:</p>
+
+<pre class="brush: js example-bad">var sum = function sum([a, b]) {
+  // SyntaxError: "use strict" not allowed in function with destructuring parameter
+  'use strict';
+  return a + b;
+};
+</pre>
+
+<p>Dieses kann zu folgendem Ausdruck konvertiert werden:</p>
+
+<pre class="brush: js example-good">var sum = (function() {
+  'use strict';
+  return function sum([a, b]) {
+    return a + b;
+  };
+})();
+</pre>
+
+<h3 id="Pfeilfunktionen">Pfeilfunktionen</h3>
+
+<p>Wenn eine Pfeilfunktion auf die <code>this</code> Variable zugreift, so kann eine umschließende Pfeilfunktion benutzt werden:</p>
+
+<pre class="brush: js example-bad">var callback = (...args) =&gt; {
+  // SyntaxError: "use strict" not allowed in function with rest parameter
+  'use strict';
+  return this.run(args);
+};
+</pre>
+
+<p>Dieses kann zu folgendem Ausdruck konvertiert werden:</p>
+
+<pre class="brush: js example-good">var callback = (() =&gt; {
+  'use strict';
+  return (...args) =&gt; {
+    return this.run(args);
+  };
+})();
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Strict_mode", "Strict mode", "", 1)}}</li>
+ <li>{{jsxref("Statements/function", "function statement", "", 1)}}</li>
+ <li>{{jsxref("Operators/function", "function expression", "", 1)}}</li>
+ <li>{{jsxref("Functions/Default_parameters", "Default parameters", "", 1)}}</li>
+ <li>{{jsxref("Functions/rest_parameters", "Rest parameters", "", 1)}}</li>
+ <li>{{jsxref("Operators/Destructuring_assignment", "Destructuring parameters", "", 1)}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/too_much_recursion/index.html b/files/de/web/javascript/reference/fehler/too_much_recursion/index.html
new file mode 100644
index 0000000000..0010afd90a
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/too_much_recursion/index.html
@@ -0,0 +1,54 @@
+---
+title: 'InternalError: too much recursion'
+slug: Web/JavaScript/Reference/Fehler/Too_much_recursion
+tags:
+  - Errors
+  - InternalError
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Errors/Too_much_recursion
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">InternalError: too much recursion
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("InternalError")}}.</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Eine Funktion, die sich selbst aufruft, wird rekursive Funktion genannt. In manchen Fällen ist Rekursion mit einer Schleife vergleichbar. Beide führen den gleichen Code mehrfach aus und beide brauchen eine Abbruchbedingung (um Endlosschleifen bzw. Endlosrekursion zu vermeiden). Wenn zu tiefe Rekursion oder Endlosrekursion auftritt, erzeugt JavaScript diesen Fehler.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Diese rekursive Methode wird bis zur Abbruchbedingung 10 mal durchlaufen.</p>
+
+<pre class="brush: js">function schleife(x) {
+  if (x &gt;= 10) // "x &gt;= 10" ist die Abbruchsbedingung
+    return;
+  // zu wiederholende Codezeilen
+  schleife(x + 1); // rekursiver Methodenaufruf
+}
+schleife(0);</pre>
+
+<p>Wird die Abbruchsbedingung auf eine zu hohe Wert gesetzt, ist die Rekursionstiefe zu hoch und es wird einen Fehler erzeugt:</p>
+
+<pre class="brush: js example-bad">function boeseSchleife(x) {
+  if (x &gt;= 1000000000000)
+    return;
+  // zu wiederholende Codezeilen
+  boeseSchleife(x + 1);
+}
+boeseSchleife(0);
+
+// InternalError: too much recursion</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{Glossary("Recursion")}}</li>
+ <li><a href="/de/docs/Web/JavaScript/Guide/Funktionen">Rekursive Methoden</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/typed_array_invalid_arguments/index.html b/files/de/web/javascript/reference/fehler/typed_array_invalid_arguments/index.html
new file mode 100644
index 0000000000..2e7fa8f0b3
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/typed_array_invalid_arguments/index.html
@@ -0,0 +1,77 @@
+---
+title: 'TypeError: invalid arguments'
+slug: Web/JavaScript/Reference/Fehler/Typed_array_invalid_arguments
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Typed_array_invalid_arguments
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">TypeError: invalid arguments (Firefox)</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Der <a href="/de/docs/Web/JavaScript/Typed_arrays">Typed Array</a> Konstruktor erwartet entweder</p>
+
+<ul>
+ <li>eine Länge,</li>
+ <li>ein anderes Typed Array,</li>
+ <li>Array ähnliche Objete,</li>
+ <li>iterierbare Objekte oder</li>
+ <li>ein {{jsxref("ArrayBuffer")}} Objekt,</li>
+</ul>
+
+<p>um ein neues Typed Array zu erstelltn. Andere Argumente im Konstruktor erstellen kein valides Typed Array.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Typed Arrays, zum Beispiel ein {{jsxref("Uint8Array")}}, können nicht von einem String erstellt werden. <span class="short_text" id="result_box" lang="de"><span>Tatsächlich können String nicht in typisierten Arrays enthalten sein.</span></span></p>
+
+<pre class="brush: js example-bad">var ta = new Uint8Array("nope");
+// TypeError: invalid arguments
+</pre>
+
+<p>Verschiedene Wege um ein valides {{jsxref("Uint8Array")}} Objekt zu erstellen:</p>
+
+<pre class="brush: js example-good">// From a length
+var uint8 = new Uint8Array(2);
+uint8[0] = 42;
+console.log(uint8[0]); // 42
+console.log(uint8.length); // 2
+console.log(uint8.BYTES_PER_ELEMENT); // 1
+
+// From an array
+var arr = new Uint8Array([21,31]);
+console.log(arr[1]); // 31
+
+// From another TypedArray
+var x = new Uint8Array([21, 31]);
+var y = new Uint8Array(x);
+console.log(y[0]); // 21
+
+// From an ArrayBuffer
+var buffer = new ArrayBuffer(8);
+var z = new Uint8Array(buffer, 1, 4);
+
+// From an iterable
+var iterable = function*(){ yield* [1,2,3]; }();
+var uint8 = new Uint8Array(iterable);
+// Uint8Array[1, 2, 3]
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Typed_arrays">Typed arrays</a></li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("Uint8Array")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/undeclared_var/index.html b/files/de/web/javascript/reference/fehler/undeclared_var/index.html
new file mode 100644
index 0000000000..b7c8b09165
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/undeclared_var/index.html
@@ -0,0 +1,67 @@
+---
+title: 'ReferenceError: assignment to undeclared variable "x"'
+slug: Web/JavaScript/Reference/Fehler/Undeclared_var
+tags:
+  - Errors
+  - JavaScript
+  - ReferenceError
+  - Strict Mode
+translation_of: Web/JavaScript/Reference/Errors/Undeclared_var
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">ReferenceError: assignment to undeclared variable "x" (Firefox)
+ReferenceError: "x" is not defined (Chrome)
+ReferenceError: Variable undefined in strict mode (Edge)
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("ReferenceError")}} Warnung nur im <a href="/de/docs/Web/JavaScript/Reference/Strict_mode">Strict mode</a>.</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Ein Wert wurde zu einer nicht deklarierten Variablen hinzugefügt. Oder mit anderen Worten, es gibt eine Zuweisung ohne das Schlüsselwort var. Es gibt einige Unterschiede zwischen deklarierten und nicht deklarierten Variablen, die zu unerwarteten Ergebnissen führen kann und weshalb der Fehler im Strict Mode erscheint.</p>
+
+<p>Drei Dinge über deklarierte und nicht deklarierte Variablen:</p>
+
+<ul>
+ <li>Deklarierte Variablen gehören zu dem Ausführungskontext, in dem sie deklariert werden. Nicht deklarierte Variablen sind immer global.</li>
+ <li>Deklarierte Variablen werden erstellt bevor Code ausgeführt wird. Nicht deklarierte Variablen existieren erst, wenn der zugehörige Code ausgeführt wird.</li>
+ <li>Deklarierte Variablen sind eine nicht konfigurierbare Eigenschaft des Ausführungskontextes (Funktion oder global). Nicht deklarierte Variablen sind konfigurierbar (sie können z. B. gelöscht werden).</li>
+</ul>
+
+<p>Mehr Details und Beispiele findet man auf der <code><a href="/de/docs/Web/JavaScript/Reference/Statements/var">var</a></code> Referenzseite.</p>
+
+<p>Fehler mit nicht deklarierten Variablenzuweisungen gibt es nur im <a href="/de/docs/Web/JavaScript/Reference/Strict_mode">Strict Mode Code</a>. Außerhalb davon wird die Warnung einfach Ignoriert.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Falsche_Fälle">Falsche Fälle</h3>
+
+<p>In diesem Fall ist die "bar" eine nicht deklarierte Variable.</p>
+
+<pre class="brush: js example-bad">function foo() {
+  'use strict';
+  bar = true;
+}
+foo(); // ReferenceError: assignment to undeclared variable bar
+</pre>
+
+<h3 id="Richtige_Fälle">Richtige Fälle</h3>
+
+<p>Um "bar" zu einer deklarierten Variable zu machen, kann das Schlüsselwort <code><a href="/de/docs/Web/JavaScript/Reference/Statements/var">var</a></code> eingesetzt werden.</p>
+
+<pre class="brush: js example-good">function foo() {
+  'use strict';
+  var bar = true;
+}
+foo();</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Strict_mode">Strict Mode</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/undefined_prop/index.html b/files/de/web/javascript/reference/fehler/undefined_prop/index.html
new file mode 100644
index 0000000000..fe83564f59
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/undefined_prop/index.html
@@ -0,0 +1,63 @@
+---
+title: 'ReferenceError: reference to undefined property "x"'
+slug: Web/JavaScript/Reference/Fehler/Undefined_prop
+tags:
+  - Errors
+  - JavaScript
+  - ReferenceError
+  - Strict Mode
+translation_of: Web/JavaScript/Reference/Errors/Undefined_prop
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">ReferenceError: reference to undefined property "x" (Firefox)
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("ReferenceError")}} Fehlermeldung tritt nur im  <a href="/de/docs/Web/JavaScript/Reference/Strict_mode">strikten Modus</a> auf.</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Es wird versucht auf eine Eigenschaft zuzugreifen, die nicht existiert. Es gibt zwei Arten um auf Eigenschaften zuzugreifen, siehe <a href="/de/docs/Web/JavaScript/Reference/Operators/Property_Accessors">Eigenschaften Zugriffsfunktionen</a> auf den Referenzseiten für weitere Details.</p>
+
+<p>Fehler aufgrund von leeren Eigenschaftsreferenzen treten nur im Quellcode auf, der im <a href="/de/docs/Web/JavaScript/Reference/Strict_mode">strikten Modus</a> geschrieben ist. Im Quellcode der nicht im strikten Modus geschrieben ist, wird der Fehler ohne Meldung ignoriert.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Ungültige_Fälle">Ungültige Fälle</h3>
+
+<p>In diesem Fall ist die Eigenschaft "bar" undefiniert.</p>
+
+<pre class="brush: js example-bad">"use strict";
+
+var foo = {};
+foo.bar; // ReferenceError: reference to undefined property "bar"
+</pre>
+
+<h3 id="Gültige_Fälle">Gültige Fälle</h3>
+
+<p>Um Fehler zu vermeiden muss man eine Eigenschaft "bar" definieren oder überprüfen, ob die Eigenschaft "bar" existiert, bevor man auf diese zugreift. (z.B.: mit Hilfe der Funktion {{jsxref("Object.prototype.hasOwnProperty()")}}).</p>
+
+<pre class="brush: js example-good">"use strict";
+
+var foo = {};
+
+// Definiert die bar Eigenschaft
+
+foo.bar = "Mond";
+console.log(foo.bar); // "Mond"
+
+// Testet vor dem Zugriff, ob bar existiert.
+
+if (foo.hasOwnProperty("bar")) {
+  console.log(foo.bar);
+}</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Strict_mode">Strikter Modus</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/unexpected_token/index.html b/files/de/web/javascript/reference/fehler/unexpected_token/index.html
new file mode 100644
index 0000000000..3aff253bfd
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/unexpected_token/index.html
@@ -0,0 +1,47 @@
+---
+title: 'SyntaxError: Unexpected token'
+slug: Web/JavaScript/Reference/Fehler/Unexpected_token
+tags:
+  - Fehler
+  - JavaScript
+  - Syntaxfehler
+translation_of: Web/JavaScript/Reference/Errors/Unexpected_token
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">SyntaxError: expected expression, got "x"
+SyntaxError: expected property name, got "x"
+SyntaxError: expected target, got "x"
+SyntaxError: expected rest argument name, got "x"
+SyntaxError: expected closing parenthesis, got "x"
+SyntaxError: expected '=&gt;' after argument list, got "x"
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Es wurde eine bestimmte Sprachenstruktur erwartet, aber etwas anderes wurde übermittelt. Es kann sich dabei um einen einfachen Tippfehler handeln.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Expression_expected_(Ausdruck_erwartet)">Expression expected (Ausdruck erwartet)</h3>
+
+<p>Zum Beispiel sind Kommas am Ende eines Befehls nicht erlaubt.</p>
+
+<pre class="brush: js example-bad">for (let i = 0; i &lt; 5,; i++) {
+  console.log(i);
+}
+// SyntaxError: expected expression, got ')'
+</pre>
+
+<p>Richtig wäre das Komma auszulassen oder ein weiteren Ausdruck hinzuzufügen:</p>
+
+<pre class="brush: js example-good">for (let i = 0; i &lt; 5; i++) {
+  console.log(i);
+}
+</pre>
diff --git a/files/de/web/javascript/reference/fehler/unexpected_type/index.html b/files/de/web/javascript/reference/fehler/unexpected_type/index.html
new file mode 100644
index 0000000000..601ec21d43
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/unexpected_type/index.html
@@ -0,0 +1,67 @@
+---
+title: 'TypeError: "x" is (not) "y"'
+slug: Web/JavaScript/Reference/Fehler/Unexpected_type
+tags:
+  - Errors
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Unexpected_type
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">TypeError: "x" is (not) "y"
+
+Examples:
+TypeError: "x" is undefined
+TypeError: "x" is null
+TypeError: "undefined" is not an object
+TypeError: "x" is not an object or null
+TypeError: "x" is not a symbol
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("TypeError")}}.</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Der Typ einer Variable ist unpassend. Dieser Fall tritt oft bei {{jsxref("undefined")}}- oder {{jsxref("null")}}-Werten auf.</p>
+
+<p>Außerdem benötigen bestimmte Metodhen wie {{jsxref("Object.create()")}} oder {{jsxref("Symbol.keyFor()")}} einen bestimmten Typ, der bereitgestellt werden muss.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Ungültige_Fälle">Ungültige Fälle</h3>
+
+<pre class="brush: js example-bad">// Undefinierte und null-Fälle, bei denen die Substring-Methode nicht funktioniert
+var foo = ;
+foo.substring(1); // TypeError: foo is undefined
+
+var foo = null;
+foo.substring(1); // TypeError: foo is null
+
+
+// Bestimmte Methoden erfordern einen bestimmten Typ
+var foo = {}
+Symbol.keyFor(foo); // TypeError: foo is not a symbol
+
+var foo = 'bar'
+Object.create(foo); // TypeError: "foo" is not an object or null
+</pre>
+
+<h3 id="Den_Fehler_beheben">Den Fehler beheben?</h3>
+
+<p><span lang="de">Um den Nullzeiger auf <code>undefined</code>- oder <code>null</code>-Werte zu beheben, kann z. B. der "typeof"-Operator verwendt werden.</span></p>
+
+<pre class="brush: js">if (typeof foo !== 'undefined') {
+  // Nun wissen wir, dass foo definiert ist, und können weitermachen.
+}</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("undefined")}}</li>
+ <li>{{jsxref("null")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/unnamed_function_statement/index.html b/files/de/web/javascript/reference/fehler/unnamed_function_statement/index.html
new file mode 100644
index 0000000000..6c148b6ff0
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/unnamed_function_statement/index.html
@@ -0,0 +1,115 @@
+---
+title: 'SyntaxError: function statement requires a name'
+slug: Web/JavaScript/Reference/Fehler/Unnamed_function_statement
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Unnamed_function_statement
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">SyntaxError: function statement requires a name [Firefox]
+SyntaxError: Unexpected token ( [Chrome]
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Es gibt eine <a href="/de/docs/Web/JavaScript/Reference/Statements/function">Funktionsstatement</a> im Code, welches einen Namen benötigt. Man muss überprüfen, wie Funktionen definiert sind und ob diese einen Namen benötigen oder ob diese Funktion ein Funktionsausdruck ist (eine {{Glossary("IIFE")}}) oder ob die Funktion im richtigen Kontext geschrieben ist.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Statements_vs_Ausdrücke">Statements vs Ausdrücke</h3>
+
+<p>Ein <em><a href="/de/docs/Web/JavaScript/Reference/Statements/function">Funktionsstatement</a></em> (oder <em>Funktionsdeklaration</em>) benötigt einen Namen. Folgendes funktioniert nicht:</p>
+
+<pre class="brush: js example-bad">function () {
+  return 'Hello world';
+}
+// SyntaxError: function statement requires a name
+</pre>
+
+<p>Man kann stattdessen ein <a href="/de/docs/Web/JavaScript/Reference/Operators/function">Funktionsausdruck</a> (Zuweisung) nutzen:</p>
+
+<pre class="brush: js example-good">var greet = function() {
+  return 'Hello world';
+};</pre>
+
+<p>Manchmal soll auch eine auch eine <a href="https://en.wikipedia.org/wiki/Immediately-invoked_function_expression">IIFE</a> (Immediately Invoked Function Expression) sein, welche eine Funktion ist, die nach der Definition direkt ausgeführt wird. Dafür müssen ein paar mehr Klammern benutzt werden:</p>
+
+<pre class="brush: js example-good">(function () {
+
+})();</pre>
+
+<h3 id="Funktionen_mit_Labeln">Funktionen mit Labeln</h3>
+
+<p>Wenn man ein <a href="/de/docs/Web/JavaScript/Reference/Statements/label">Funktionslabel</a> benutzt, muss ein Funktionsnamen nach dem <code>function</code> Schlüsselwort stehen. Folgendes funktioniert nicht:</p>
+
+<pre class="brush: js example-bad">function Greeter() {
+  german: function () {
+    return "Moin";
+  }
+}
+// SyntaxError: function statement requires a name
+</pre>
+
+<p>Das folgende funktioniert:</p>
+
+<pre class="brush: js example-good">function Greeter() {
+  german: function g() {
+    return "Moin";
+  }
+}</pre>
+
+<h3 id="Objektmethoden">Objektmethoden</h3>
+
+<p>Wenn man eine Methode für ein Objekt erstellen möchte, muss ein Objekt erstellt werden. Die folgende Syntax ohne einen Namen nach dem <code>function</code> Schlüsselwort ist zulässig.</p>
+
+<pre class="brush: js example-good">var greeter = {
+  german: function () {
+    return "Moin";
+  }
+};</pre>
+
+<h3 id="Callback_Syntax">Callback Syntax</h3>
+
+<p>Zudem sollte die Syntax bei Callbackfunktionen geprüft werden. Komma- und Klammersetzung kann schnell schwierig werden.</p>
+
+<pre class="brush: js example-bad">promise.then(
+  function() {
+    console.log("success");
+  });
+  function() {
+    console.log("error");
+}
+// SyntaxError: function statement requires a name
+</pre>
+
+<p>Richtig ist folgendes:</p>
+
+<pre class="brush: json example-good">promise.then(
+  function() {
+    console.log("success");
+  },
+  function() {
+    console.log("error");
+  }
+);
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Guide/Functions">Funktionen im JavaScript Guide</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Statements/function">Funktionsstatement</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Operators/function">Funktionsausdruck</a></li>
+ <li><a href="https://en.wikipedia.org/wiki/Immediately-invoked_function_expression">IIFE</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Statements/label">Label</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/unterminated_string_literal/index.html b/files/de/web/javascript/reference/fehler/unterminated_string_literal/index.html
new file mode 100644
index 0000000000..3d60240b51
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/unterminated_string_literal/index.html
@@ -0,0 +1,67 @@
+---
+title: 'SyntaxError: unterminated string literal'
+slug: Web/JavaScript/Reference/Fehler/Unterminated_string_literal
+tags:
+  - Errors
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Unterminated_string_literal
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">SyntaxError: unterminated string literal
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Es gibt irgendwo einen nicht beendeten {{jsxref("String")}}. Stringliterale müssen mit einfachen (<code>'</code>) oder doppelten (<code>"</code>) Anführungszeichen umschlossen sein. JavaScript unterscheidet nicht zwischen Strings, die mit einfachen oder doppelten Anführungszeichen umschlossen sind. <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/String#Escape_notation">Maskierte Sequenzen</a> funktionieren in Strings mit einfachen und doppelten Anführungszeichen. Um den Fehler zu beheben, sollte folgendes überprüft werden:</p>
+
+<ul>
+ <li>Es gibt öffnende und schließende Anführungszeichen (einfache oder doppelte) für alle Stringliterale,</li>
+ <li>Stringliterale sind richtig maskiert,</li>
+ <li>Stringliterale funktionieren richtig über mehrere Zeilen, wenn es solche gibt.</li>
+</ul>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="MehrereZeilen">MehrereZeilen</h3>
+
+<p>Man kann Strings nicht über mehrere Zeilen in JavaScript schreiben:</p>
+
+<pre class="brush: js example-bad">var longString = 'This is a very long string which needs
+                  to wrap across multiple lines because
+                  otherwise my code is unreadable.';
+// SyntaxError: unterminated string literal</pre>
+
+<p>Stattdessen muss ein <a href="/de/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition">+ Operator</a>, ein Backslask oder ein <a href="/de/docs/Web/JavaScript/Reference/Template_literals">Templateliteral</a> eingesetzt werden. Die <code>+</code> Operator Variante sieht wie folgt aus:</p>
+
+<pre class="brush: js example-good">var longString = 'This is a very long string which needs ' +
+                 'to wrap across multiple lines because ' +
+                 'otherwise my code is unreadable.';
+</pre>
+
+<p>Oder man benutzt ein Backslash Zeichen ("\") am ende jeder Zeile, um anzudeuten, dass der String in der nächsten Zeile weiter geht. Man muss sicherstellen, dass keine Leerzeichen oder andere Zeichen nach dem Backslash stehen (ausgenommen der Zeilenumbruch) oder als Einrückung, ansonsten wird es nicht funktionieren. Diese Form sieht wie folgt aus:</p>
+
+<pre class="brush: js example-good">var longString = 'This is a very long string which needs \
+to wrap across multiple lines because \
+otherwise my code is unreadable.';
+</pre>
+
+<p>Eine andere Möglichkeit ist der Einsatz von <a href="/de/docs/Web/JavaScript/Reference/Template_literals">Templateliteralen</a>, welche in ECMAScript 2015 Umgebungen unterstützt werden:</p>
+
+<pre class="brush: js example-good">var longString = `This is a very long string which needs
+                  to wrap across multiple lines because
+                  otherwise my code is unreadable.`;</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("String")}}</li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Template_literals">Templateliterale</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/fehler/var_hides_argument/index.html b/files/de/web/javascript/reference/fehler/var_hides_argument/index.html
new file mode 100644
index 0000000000..f06a1d5220
--- /dev/null
+++ b/files/de/web/javascript/reference/fehler/var_hides_argument/index.html
@@ -0,0 +1,56 @@
+---
+title: 'TypeError: variable "x" redeclares argument'
+slug: Web/JavaScript/Reference/Fehler/Var_hides_argument
+tags:
+  - Errors
+  - JavaScript
+  - Strict Mode
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Var_hides_argument
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Fehlermeldung">Fehlermeldung</h2>
+
+<pre class="syntaxbox">TypeError: variable "x" redeclares argument (Firefox)
+</pre>
+
+<h2 id="Fehlertyp">Fehlertyp</h2>
+
+<p>{{jsxref("TypeError")}} Warnung nur im <a href="/de/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>.</p>
+
+<h2 id="Was_ist_falsch_gelaufen">Was ist falsch gelaufen?</h2>
+
+<p>Der selbe Variablenname für einen Funktionsparameter und einer Neudeklaration mit einer <code><a href="/de/docs/Web/JavaScript/Reference/Statements/var">var</a></code> Zuweisung im Funktionskörper ist vorhanden. Dieses ist ein Namenskonflikt, weshalb JavaScript eine Warnung erzeugt.</p>
+
+<p>Dieser Fehler ist eine Warnung, die nur im <a href="/de/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a> auftaucht. Ist man nicht im strict mode, so wird die Neudeklaration still ignoriert.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Nicht_balider_Fall">Nicht balider Fall</h3>
+
+<p>In diesem Fall wird die Variable "arg" neu deklariert.</p>
+
+<pre class="brush: js example-bad">'use strict';
+
+function f(arg) {
+  var arg = 'foo';
+}
+</pre>
+
+<h3 id="Valider_Fall">Valider Fall</h3>
+
+<p>Um diese Warnung zu vermeiden kann das <code><a href="/de/docs/Web/JavaScript/Reference/Statements/var">var</a></code> Statement weggelassen werden, weil die Variable schon existiert. In anderen Fällen kann der Funktionsparameter oder die Variable umbenannt werden.</p>
+
+<pre class="brush: js example-good">'use strict';
+
+function f(arg) {
+  arg = 'foo';
+}
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Strict_mode">Strict mode</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/functions/arguments/@@iterator/index.html b/files/de/web/javascript/reference/functions/arguments/@@iterator/index.html
new file mode 100644
index 0000000000..5625ee01df
--- /dev/null
+++ b/files/de/web/javascript/reference/functions/arguments/@@iterator/index.html
@@ -0,0 +1,78 @@
+---
+title: 'arguments[@@iterator]()'
+slug: Web/JavaScript/Reference/Functions/arguments/@@iterator
+tags:
+  - Deprecated
+  - Functions
+  - JavaScript
+  - Property
+  - arguments
+translation_of: Web/JavaScript/Reference/Functions/arguments/@@iterator
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p>Der Initialwert der <code><strong>@@iterator</strong></code> Eigenschaft ist das selbe Funktionsobjekt wie der Initialwert der {{jsxref("Array.prototype.values")}} Eigenschaft.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>arguments</var>[Symbol.iterator]()</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Iterieren_mit_einer_for...of_Schleife">Iterieren mit einer <code>for...of</code> Schleife</h3>
+
+<pre class="brush: js">function f() {
+  // der Browser muss for..of Schleifen und
+  // let-Variablen in for Schleifen unterstützen
+  for (let letter of arguments) {
+    console.log(letter);
+  }
+}
+f('w', 'y', 'k', 'o', 'p');
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-createunmappedargumentsobject', ' CreateUnmappedArgumentsObject')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-createmappedargumentsobject', ' CreateMappedArgumentsObject')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-createunmappedargumentsobject', 'CreateUnmappedArgumentsObject')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-createmappedargumentsobject', 'CreateMappedArgumentsObject')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.functions.arguments.@@iterator")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.values()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/functions/arguments/callee/index.html b/files/de/web/javascript/reference/functions/arguments/callee/index.html
new file mode 100644
index 0000000000..704813b7a6
--- /dev/null
+++ b/files/de/web/javascript/reference/functions/arguments/callee/index.html
@@ -0,0 +1,157 @@
+---
+title: arguments.callee
+slug: Web/JavaScript/Reference/Functions/arguments/callee
+tags:
+  - Deprecated
+  - Functions
+  - JavaScript
+  - Property
+  - arguments
+translation_of: Web/JavaScript/Reference/Functions/arguments/callee
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p>Die <strong><code>arguments.callee</code></strong>-Eigenschaft enthält die Referenz der aktuell ausgeführten Funktion.</p>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p><code>callee</code> ist eine Eigenschaft des <code>arguments</code>-Objektes. Sie kann eingesetzt werden, um aus dem Körper einer Funktion auf die aktuell ausgeführte Funktion zu referenzieren. Dieses ist sinnvoll, wenn der Name der Funktion unbekannt ist. Auch in einer anonymen Funktion (ohne Namen) funktioniert dieses.</p>
+
+<div class="warning"><strong>Warnung</strong>: Die Version 5 von ECMAScript (ES5) verbietet die nutzung von <code>arguments.callee() im </code>{{jsxref("Strict_mode", "strict mode")}}. Der Einsatz von <code>arguments.callee() </code>soll vermieden werden, wenn function-Ausdrücke einen Namen haben oder Funktionen deklariert werden, die sich selbst aufrufen müssen.</div>
+
+<h3 id="Warum_wurde_arguments.callee_vom_ES5_strict_mode_entfernt">Warum wurde <code>arguments.callee</code> vom ES5 strict mode entfernt?</h3>
+
+<p>(angepasst von <a href="http://stackoverflow.com/a/235760/578288" title="http://stackoverflow.com/a/235760/578288">einer Stack Overflow-Antwort von olliej</a>)</p>
+
+<p>Frühe Versionen von JavaScript erlauben keine benamten Funktions-Anweisungen. Aus diesem Grund ist es nicht möglich rekursive Funktions-Anweisungen zu schreiben.</p>
+
+<p>Diese Syntax funktioniert, zum Beispiel:</p>
+
+<pre class="brush: js">function factorial (n) {
+    return !(n &gt; 1) ? 1 : factorial(n - 1) * n;
+}
+
+[1, 2, 3, 4, 5].map(factorial);</pre>
+
+<p>aber:</p>
+
+<pre class="brush: js">[1, 2, 3, 4, 5].map(function (n) {
+    return !(n &gt; 1) ? 1 : /* what goes here? */ (n - 1) * n;
+});</pre>
+
+<p>funktioniert nicht. Um dieses problem zu lösen wurde <code>arguments.callee</code> hinzugefügt.</p>
+
+<pre class="brush: js">[1, 2, 3, 4, 5].map(function (n) {
+    return !(n &gt; 1) ? 1 : arguments.callee(n - 1) * n;
+});</pre>
+
+<p>Allerdings ist dieses eine schlechte Lösung , weil diese (in Verbindung mit anderen <code>arguments</code>, <code>callee</code>, and <code>caller</code>-Problemen) inlining und Endrekursion unmöglich macht (man kann es benutzen um Tracing zu realisieren, jedoch ist der beste Code immer suboptimal). Ein weiteres Problem liegt darin, dass rekursive Aufrufe ein unterschiedliches <code>this</code> bekommen können (siehe folgendes Beispiel):</p>
+
+<pre class="brush: js">var global = this;
+
+var sillyFunction = function(recursed) {
+    if (!recursed) { return arguments.callee(true); }
+    if (this !== global) {
+        alert('This is: ' + this);
+    } else {
+        alert('This is the global');
+    }
+}
+
+sillyFunction();</pre>
+
+<p>ECMAScript 3 löste das Problem indem benamte Funktions-Ausdrücke erlaubt wurden:</p>
+
+<pre class="brush: js">[1, 2, 3, 4, 5].map(function factorial (n) {
+    return !(n &gt; 1) ? 1 : factorial(n - 1)*n;
+});</pre>
+
+<p>Dieses hat zahlreiche Vorteile:</p>
+
+<ul>
+ <li>Die Funktion kann wie jede andere Funktion im Code aufgerufen werden.</li>
+ <li>Es wird keine Variable im äußeren Gültigkeitsbereich erstellt (<a href="http://kangax.github.io/nfe/#example_1_function_expression_identifier_leaks_into_an_enclosing_scope">Ausnahme für IE 8 und kleiner</a>)</li>
+ <li>Es gibt eine bessere Performance wenn das arguments-Objekt genutzt wird</li>
+</ul>
+
+<p>Eine andere Funktion die verboten wurde ist <code>arguments.callee.caller</code> oder spezifischer <code>Function.caller</code>. Warum ist das so? Zu jedem Zeitpunkt ist es möglich, den tiefsten Aufrufer von jeder Funktion auf dem Stack herauszufinden und weil das herausfinden des Aufrufer-Stacks hat einen hauptsächlichen Effekt: Es macht das Optimieren unmöglich oder sehr viel schwerer. Zum Beispiel ist es nicht Möglich <code>f</code> zu inlinen, wenn nicht sichergestellt ist, dass eine Funktion <code>f</code> nicht eine unbekannte Funktion aufruft. Das bedeutet, dass jeder Aufruf eine große Anzahl an Sicherheitsabfragen durchführen müsste um inlinen zu können.</p>
+
+<pre class="brush: js">function f(a, b, c, d, e) { return a ? b * c : d * e; }</pre>
+
+<p>Wenn der JavaScript-Interpreter nicht garantieren kann, dass alle der unterstützten Argumente Nummern beim Aufruf sind, muss dieser Prüfungen für alle Argumente einfügen bevor der Code geinlinet werden kann oder die Funktion kann nicht geinlinet werden. In dieser Situation sollte ein guter Interpreter die Prüfungen neu anordnen, damit diese Optimal abgefragt werden und nur die Werte, die benutzt werden geprüft werden. Weil dieses in vielen Fällen nicht möglich ist, wird es in diesen unmöglich zu inlinen.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_arguments.callee_in_einer_anonymen_rekursiven_Funktion">Einsatz von <code>arguments.callee</code> in einer anonymen rekursiven Funktion</h3>
+
+<p>Eine rekursive Funktion muss sich selber aufrufen können. Normalerweise referenziert eine Funktion sich selbst mit dem Namen. Weil eine anonyme Funktion (welche von einem <a href="/de/docs/Web/JavaScript/Reference/Operators/function" title="JavaScript/Reference/Operators/Special/function">Funktionsausdruck</a> oder dem <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Function" title="JavaScript/Reference/Global_Objects/Function"><code>Function</code> Konstruktor</a> erstellt werden kann) hat keinen Namen. Wenn also keine Variable diese Funktion referenziert, ist der einzige Weg die Funktion über <code>arguments.callee</code> aufzurufen.</p>
+
+<p>Das folgende Beispiel definiert eine Funktion, welche wiederum eine Fakultätsfunktion Definiert und sie zurückgibt. Dieses Beispiel ist nicht sehr praktisch und es gibt fast keine Fälle, in denen dasselbe Ergebnis nicht mit <a href="/de/docs/Web/JavaScript/Reference/Operators/function">Funktionsausdrücken mit Namen</a> erreicht werden kann.</p>
+
+<pre class="brush: js">function create() {
+   return function(n) {
+      if (n &lt;= 1)
+         return 1;
+      return n * arguments.callee(n - 1);
+   };
+}
+
+var result = create()(5); // returns 120 (5 * 4 * 3 * 2 * 1)</pre>
+
+<h3 id="Der_einsatz_von_arguments.callee_mit_keinen_guten_Alternativen">Der einsatz von <code>arguments.callee</code> mit keinen guten Alternativen</h3>
+
+<p>In einem Fall wie dem Folgenden gibt es jedoch keine Alternativen zu arguments.callee, so dass seine Veraltung ein Fehler sein könnte (siehe {{Bug("725398")}}):</p>
+
+<pre class="brush: js">function createPerson(sIdentity) {
+    var oPerson = new Function('alert(arguments.callee.identity);');
+    oPerson.identity = sIdentity;
+    return oPerson;
+}
+
+var john = createPerson('John Smith');
+
+john();</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.2</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.functions.arguments.callee")}}</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Function")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/functions/arguments/index.html b/files/de/web/javascript/reference/functions/arguments/index.html
new file mode 100644
index 0000000000..180a53dc5f
--- /dev/null
+++ b/files/de/web/javascript/reference/functions/arguments/index.html
@@ -0,0 +1,223 @@
+---
+title: Arguments object
+slug: Web/JavaScript/Reference/Functions/arguments
+tags:
+  - Functions
+  - JavaScript
+  - Reference
+  - arguments
+translation_of: Web/JavaScript/Reference/Functions/arguments
+---
+<div>
+<div>
+<div>{{jsSidebar("Functions")}}</div>
+</div>
+</div>
+
+<p>Das <strong><code>arguments</code></strong>-Objekt ist ein Array-ähnliches Objekt, das auf die übergebenen Parameter einer Funktion verweist.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/functions-arguments.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">arguments</pre>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p>Das <code>arguments</code>-Objekt ist eine lokal verfügbare Variable in allen (Nicht-Pfeil-) Funktionen. Man kann auf die Parameter einer Funktion referenzieren, wenn man in einer Funktion das <code>arguments</code>-Objekt benutzt. Dieses Objekt enthält einen Eintrag für jeden übergebenen Parameter der Funktion. Der erste Eintrag beginnt beim Index 0. Wenn einer Funktion drei Parameter übergeben werden, kann wie folgt auf diese zugegriffen werden;</p>
+
+<pre class="brush: js notranslate">arguments[0]
+arguments[1]
+arguments[2]
+</pre>
+
+<p>Die Parameter können auch überschrieben werden:</p>
+
+<pre class="brush: js notranslate">arguments[1] = 'new value';</pre>
+
+<p>Das <code>arguments</code>-Objekt ist kein {{jsxref("Array")}}. Es ist ähnlich wie ein <code>Array</code>, hat aber keine Eigenschaften eines <code>Array</code>s mit <span class="dpf_sent" id="dpfsent_1">Ausnahme </span>von {{jsxref("Functions/arguments/length", "length")}}. Zum Beispiel ist die {{jsxref("Global_Objects/Array/pop", "pop")}}-Methode nicht vorhanden. Jedoch kann <code>arguments</code> zu einem echten <code>Array</code> konvertiert werden:</p>
+
+<pre class="brush: js notranslate">var args = Array.prototype.slice.call(arguments);
+var args = [].slice.call(arguments);
+
+// ES2015
+const args = Array.from(arguments);</pre>
+
+<div class="warning">
+<p>Der Einsatz von slice auf arguments kann Optimierungen bei einigen JavaScript-Engines (z. B. bei V8 — <a href="https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments">mehr Informationen</a>) verhindern. Wenn man sich darum kümmert, sollte ein neues Array erstellt werden, indem über das arguments-Objekt iteriert wird. Eine Alternative ist der Einsatz von <code>Array.apply</code> wie folgt:</p>
+
+<pre class="brush: js notranslate">var args = (arguments.length === 1 ? [arguments[0]] : Array.apply(null, arguments));)</pre>
+</div>
+
+<p>Man kann das <code>arguments</code>-Objekt nutzen, um eine Funktion mit mehr übergebenen Parametern, als die der formalen Definition, zu verarbeiten. Diese Technik ist hilfreich für Funktionen mit variabler Parameteranzahl. Man kann {{jsxref("Functions/arguments/length", "arguments.length")}} nutzen, um die Anzahl der übergebenen Parameter festzustellen und dann jeden Parameter über das <code>arguments</code>-Objekt zu verarbeiten. (Um die Anzahl der deklarierten Parameter festzustellen, kann die {{jsxref("Functions/length", "Funktion.length")}} Eigenschaft genutzt werden.)</p>
+
+<h3 id="Einsatz_von_typeof_bei_arguments">Einsatz von <code>typeof</code> bei arguments</h3>
+
+<p>Der Typ von <code>arguments</code> ist <code>'object'</code></p>
+
+<pre class="brush: js notranslate">console.log(typeof arguments); // 'object'</pre>
+
+<p>Der Typ von individuellen Argumenten kann über den Index ermittelt werden.</p>
+
+<pre class="brush: js notranslate">console.log(typeof arguments[0]); // Gibt den Typ des individuellen Arguments zurück</pre>
+
+<h3 id="Einsatz_der_Spread_Syntax_mit_arguments">Einsatz der Spread Syntax mit arguments</h3>
+
+<p>Man kann die {{jsxref("Array.from()")}} Methode oder den <a href="/de/docs/Web/JavaScript/Reference/Operators/Spread_operator">spread operator</a> nutzen, um arguments zu einem echten Array zu konvertieren:</p>
+
+<pre class="brush: js notranslate">var args = Array.from(arguments);
+var args = [...arguments];</pre>
+
+<h2 id="Properties" name="Properties">Eigenschaften</h2>
+
+<dl>
+ <dt>{{jsxref("Functions/arguments/callee", "arguments.callee")}}</dt>
+ <dd>Referenz zur aktuell ausgeführten Funktion.</dd>
+ <dt>{{jsxref("Functions/arguments/caller", "arguments.caller")}} {{ Obsolete_inline() }}</dt>
+ <dd>Referenz zur Funktion, die die aktuelle Funktion ausführt hat.</dd>
+ <dt>{{jsxref("Functions/arguments/length", "arguments.length")}}</dt>
+ <dd>Anzahl der übergebenen Funktionsparameter.</dd>
+ <dt>{{jsxref("Functions/arguments/@@iterator", "arguments[@@iterator]")}}</dt>
+ <dd>Gibt ein Array-Iterator-Objekt zurück, welches die Werte an allen Indizes von arguments enthält.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<h3 id="Example_Defining_function_that_concatenates_several_strings" name="Example:_Defining_function_that_concatenates_several_strings">Definition einer Funktion, die mehrere Strings <span class="dpf_sent" id="dpfsent_1">konkateniert</span></h3>
+
+<p>Dieses Beispiel definiert eine Funktion, die mehrere Strings <span class="dpf_sent" id="dpfsent_1">konkateniert</span>. Der einzige formale Parameter der Funktion ist ein String, der die Zeichen enthält, die die einzelnen Elemente trennt. Die Funktion ist wie folgt definiert:</p>
+
+<pre class="brush:js notranslate">function myConcat(separator) {
+  var args = Array.prototype.slice.call(arguments, 1);
+  return args.join(separator);
+}</pre>
+
+<p>Man kann eine beliebige Anzahl von Parametern der Funktion <span class="dpf_sent" id="dpfsent_0">übergeben</span> und es wird jedes Argument für den String eingesetzt.</p>
+
+<pre class="brush:js notranslate">// returns "red, orange, blue"
+myConcat(", ", "red", "orange", "blue");
+
+// returns "elephant; giraffe; lion; cheetah"
+myConcat("; ", "elephant", "giraffe", "lion", "cheetah");
+
+// returns "sage. basil. oregano. pepper. parsley"
+myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");</pre>
+
+<h3 id="Example_Defining_a_function_that_creates_HTML_lists" name="Example:_Defining_a_function_that_creates_HTML_lists">Definition einer Funktion, die HTML-Listen erstellt</h3>
+
+<p>Im Beispiel wird eine Funktion definiert, die einen String mit HTML für eine Liste zurückgibt. Der einzige formale Parameter der Funktion ist ein String, der "<code>u</code>" für eine ungeordnete Liste oder "<code>o</code>" für eine geordnete Liste enthält. Die Funktion ist wie folgt definiert:</p>
+
+<pre class="brush:js notranslate">function list(type) {
+  var result = "&lt;" + type + "l&gt;&lt;li&gt;";
+  var args = Array.prototype.slice.call(arguments, 1);
+  result += args.join("&lt;/li&gt;&lt;li&gt;");
+  result += "&lt;/li&gt;&lt;/" + type + "l&gt;"; // end list
+
+  return result;
+}</pre>
+
+<p>Der Funktion kann eine variable Anzahl an Parametern übergeben werden und es wird jeder Parameter als Listeneintrag einer Liste hinzugefügt. Zum Beispiel:</p>
+
+<pre class="brush:js notranslate">var listHTML = list("u", "One", "Two", "Three");
+
+/* listHTML is:
+
+"&lt;ul&gt;&lt;li&gt;One&lt;/li&gt;&lt;li&gt;Two&lt;/li&gt;&lt;li&gt;Three&lt;/li&gt;&lt;/ul&gt;"
+
+*/</pre>
+
+<h3 id="Rest_default_und_Destrukturierende_Parameter">Rest, default und Destrukturierende Parameter</h3>
+
+<p>Das <code>arguments</code>-Objekt kann in Verbindung mit <a href="/de/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest</a>, <a href="/de/docs/Web/JavaScript/Reference/Functions/Default_parameters">default</a>, und <a href="/de/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destrukturierenden</a> Parametern eingesetzt werden.</p>
+
+<pre class="brush: js notranslate">function foo (...args) {
+  return args;
+}
+foo(1, 2, 3); // [1,2,3]</pre>
+
+<p>Wenn der Einsatz von <a href="/de/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest</a>, <a href="/de/docs/Web/JavaScript/Reference/Functions/Default_parameters">default</a>, und <a href="/de/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destrukturierenden</a> Parametern nicht die <a href="/de/docs/Web/JavaScript/Reference/Strict_mode#Making_eval_and_arguments_simpler">die Eigenschaften des <code>arguments</code> Objekts verändert, gibt es eine Unterschied zwischen dem strict mode</a> und dem nicht strict mode.</p>
+
+<p>Wenn eine nicht-strikte (non-strict) Funktion nicht  <a href="/de/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest</a>, <a href="/de/docs/Web/JavaScript/Reference/Functions/Default_parameters">default</a>, oder <a href="/de/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destrukturierende</a> Parameter enthält, referenzieren die Werte des <code>arguments</code> Objektes direkt auf die deklarierten Parameter und umgekehrt. Siehe dazu folgenden Quelltext:</p>
+
+<pre class="brush: js notranslate">function func (a) {
+  arguments[0] = 99; // Aktualisert auch arguments[0] und a
+  console.log(a);
+}
+func(10); // 99</pre>
+
+<p>und</p>
+
+<pre class="brush: js notranslate">function func (a) {
+  a = 99; // Aktualisert auch arguments[0] und a
+  console.log(arguments[0]);
+}
+func(10); // 99</pre>
+
+<p>Wenn eine nicht-strikte (non-strict) Funktion <a href="/de/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest</a>, <a href="/de/docs/Web/JavaScript/Reference/Functions/Default_parameters">default</a>, oder <a href="/de/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destrukturierende</a> Parameter enthält, referenzieren die Werte des <code>arguments</code> Objektes <strong>nicht</strong> direkt auf die deklarierten Parameter und umgekehrt. Die Werte in <code>arguments</code> sind die Werte, die der Funktion beim Aufruf übergeben werden:</p>
+
+<pre class="brush: js notranslate">function func(a = 55) {
+  arguments[0] = 99; // aktualisert arguments[0] aber nicht a
+  console.log(a);
+}
+func(10); // 10</pre>
+
+<p>und</p>
+
+<pre class="brush: js notranslate">function func(a = 55) {
+  a = 99; // aktualisert a aber nicht arguments[0]
+  console.log(arguments[0]);
+}
+func(10); // 10;</pre>
+
+<p>und</p>
+
+<pre class="brush: js notranslate">function func(a = 55) {
+  console.log(arguments[0]);
+}
+func(); // undefined;</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.1</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.functions.arguments")}}</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Function")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/functions/arguments/length/index.html b/files/de/web/javascript/reference/functions/arguments/length/index.html
new file mode 100644
index 0000000000..a2da4718b4
--- /dev/null
+++ b/files/de/web/javascript/reference/functions/arguments/length/index.html
@@ -0,0 +1,87 @@
+---
+title: arguments.length
+slug: Web/JavaScript/Reference/Functions/arguments/length
+tags:
+  - Functions
+  - JavaScript
+  - Property
+  - arguments
+translation_of: Web/JavaScript/Reference/Functions/arguments/length
+---
+<div>
+<div>{{jsSidebar("Functions")}}</div>
+</div>
+
+<p>Die <strong><code>arguments.length</code></strong>-Eigenschaft <span class="dpf_sent" id="dpfsent_1">enthält </span>die Anzahl der übergebenen Parameter einer Funktion.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">arguments.length</pre>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p>Die <code>arguments.length</code>-Eigenschaft <span class="dpf_sent" id="dpfsent_1">enthält </span>die Anzahl der Parameter, die der aktuellen Funktion übergeben wurden. Diese Anzahl kann größer oder kleiner der Anzahl der definierten Parameter sein (siehe {{jsxref("Function.length")}}).</p>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<h3 id="Example:_Using_arguments.length" name="Example:_Using_arguments.length">Beispiel: <code>arguments.length</code> nutzen</h3>
+
+<p>In diesem Beispiel wird eine Funktion definiert, die zwei oder mehr Nummern addieren kann.</p>
+
+<pre class="brush: js">function adder(base /*, n2, ... */) {
+  base = Number(base);
+  for (var i = 1; i &lt; arguments.length; i++) {
+    base += Number(arguments[i]);
+  }
+  return base;
+}
+</pre>
+
+<div class="note">
+<p>Zu beachten ist der Unterschied zwischen {{jsxref("Function.length")}} und arguments.length</p>
+</div>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definietion. Implementiert in JavaScript 1.1</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.functions.arguments.length")}}</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Function.length")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/functions/default_parameters/index.html b/files/de/web/javascript/reference/functions/default_parameters/index.html
new file mode 100644
index 0000000000..6e88aaa134
--- /dev/null
+++ b/files/de/web/javascript/reference/functions/default_parameters/index.html
@@ -0,0 +1,223 @@
+---
+title: Default parameters
+slug: Web/JavaScript/Reference/Functions/Default_parameters
+tags:
+  - ECMAScript 2015
+  - Functions
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Functions/Default_parameters
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p><strong>Standard Funktionsparameter</strong> erlaubt es formale Parameter mit vorgegebenen Werten zu initialisieren, wenn beim Funktionsaufruf kein Wert oder <code>undefined</code> übergeben wird.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/functions-default.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">function [<em>name</em>]([<em>param1</em>[ = defaultValue1 ][, ..., <em>paramN</em>[ = defaultValueN ]]]) {
+   <em>statements</em>
+}
+</pre>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>In JavaScript haben Funktionsparameter standardmäßig den Default-Wert {{jsxref("undefined")}}. Manchmal ist es jedoch sinnvoll einen anderen Default-Wert zu setzen. Hier helfen Default-Parameter weiter.</p>
+
+<p>In der Vergangenheit war die allgemeine Strategie für das Setzen von Default-Werten das Testen von Parameterwerten im Body der Funktion und dem Zuordnen eines Default-Wertes, wenn dieser <code>undefined</code> ist. Wenn in dem folgenden Beispiel bei dem Aufruf kein Wert für <code>b</code> mitgegeben wird, würde der Wert <code>undefined</code> sein. Bei der Auswertung von <code>a*b</code> und dem Aufruf von <code>multiply</code> wird als Rückgabewert <code>NaN</code> zurückgegeben. Im Beispiel wird deshalb dieser Rückgabewert in der zweiten Zeile der Funktion aufgefangen:</p>
+
+<pre class="brush: js">function multiply(a, b) {
+  b = (typeof b !== 'undefined') ?  b : 1;
+  return a * b;
+}
+
+multiply(5, 2); // 10
+multiply(5, 1); // 5
+multiply(5);    // 5
+</pre>
+
+<p>Mit dem Default-Parameter in ES2015 ist die Prüfung im Funktionskörper nicht mehr nötig. Jetzt kann man einfach <code>1</code> als den Standardwert für <code>b</code> in dem Funktionskopf definieren: </p>
+
+<pre class="brush: js">function multiply(a, b = 1) {
+  return a * b;
+}
+
+multiply(5, 2); // 10
+multiply(5, 1); // 5
+multiply(5);    // 5
+</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Übergeben_von_undefined_und_anderen_falsy_Werten">Übergeben von <code>undefined</code> und anderen falsy Werten</h3>
+
+<p>In dem zweiten Aufruf, auch wenn das erste Argument explizit auf <code>undefined</code> gesetzt ist (jedoch nicht <code>null</code> oder andere {{Glossary("Falsy", "Falsy-Werte")}}, ist der Wert des Arguments <code>num</code> beim Aufruf der Default-Wert.</p>
+
+<pre class="brush: js">function test(num = 1) {
+  console.log(typeof num);
+}
+
+test();          // 'number' (num wird auf 1 gesetzt)
+test(undefined); // 'number' (num wird auf 1 gesetzt)
+
+// test with other falsy values:
+test('');        // 'string' (num wird auf '' gesetzt)
+test(null);      // 'object' (num wird auf null gesetzt)
+</pre>
+
+<h3 id="Auswerten_beim_Aufruf">Auswerten beim Aufruf</h3>
+
+<p>Das Standard-Argument wird zum Zeitpunkt des Aufrufs ausgewertet. Somit wird - anders als z.B. in Python - ein neues Objekt bei jedem Funktionsaufruf erzeugt.</p>
+
+<pre class="brush: js">function append(value, array = []) {
+  array.push(value);
+  return array;
+}
+
+append(1); //[1]
+append(2); //[2], nicht [1, 2]
+</pre>
+
+<p>Das Gleiche gilt für Funktionen und Variablen:</p>
+
+<pre class="brush: js">function callSomething(thing = something()) {
+ return thing;
+}
+
+function something(){
+  return "sth";
+}
+
+callSomething();  //sth</pre>
+
+<h3 id="Default-Parameter_stehen_nachfolgenden_Default-Parametern_zur_Verfügung">Default-Parameter stehen nachfolgenden Default-Parametern zur Verfügung</h3>
+
+<p>Die bereits angetroffenen Parameter stehen den späteren Standardparametern zur Verfügung:</p>
+
+<pre class="brush: js">function singularAutoPlural(singular, plural = singular+"s",
+                            rallyingCry = plural + " ATTACK!!!") {
+  return [singular, plural, rallyingCry ];
+}
+
+//["Gecko","Geckos", "Geckos ATTACK!!!"]
+singularAutoPlural("Gecko");
+
+//["Fox","Foxes", "Foxes ATTACK!!!"]
+singularAutoPlural("Fox","Foxes");
+
+//["Deer", "Deer", "Deer ... change."]
+singularAutoPlural("Deer", "Deer", "Deer peaceably and respectfully
+   petition the government for positive change.")
+</pre>
+
+<p>Diese Funktionalität wird in einer geradlinigen Weise angenähert und zeigt, wie viele Randfälle behandelt werden:</p>
+
+<pre class="brush: js">function go() {
+  return ":P"
+}
+
+function withDefaults(a, b = 5, c = b, d = go(), e = this,
+                      f = arguments, g = this.value) {
+  return [a,b,c,d,e,f,g];
+}
+
+function withoutDefaults(a, b, c, d, e, f, g){
+  switch(arguments.length){
+    case 0:
+      a
+    case 1:
+      b = 5
+    case 2:
+      c = b
+    case 3:
+      d = go();
+    case 4:
+      e = this
+    case 5:
+      f = arguments
+    case 6:
+      g = this.value;
+    default:
+  }
+  return [a,b,c,d,e,f,g];
+}
+
+withDefaults.call({value:"=^_^="});
+// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]
+
+
+withoutDefaults.call({value:"=^_^="});
+// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]
+</pre>
+
+<h3 id="Funktionen_definiert_innerhalb_des_Funktionskörpers">Funktionen definiert innerhalb des Funktionskörpers</h3>
+
+<p>Eingeführt in Gecko 33 {{geckoRelease(33)}}. Funktionen die innerhalb eines Funktionskörper deklariert werden, können nicht von Default-Parametern referenziert werden und führen zu einem {{jsxref("ReferenceError")}} (aktuell wird ein {{jsxref("TypeError")}} erzeugt, siehe {{bug(1022967)}}). Default-Parameter werden stets zuerst ausgewertet, Funktionsdeklarationen innerhalb von Funktionskörpern erst hinterher.</p>
+
+<pre class="brush: js">// Funktioniert nicht! Wirft einen ReferenceError.
+function f(a = go()) {
+  function go(){return ":P"}
+}
+</pre>
+
+<h3 id="Paramater_ohne_Default_nach_Default-Parameter">Paramater ohne Default nach Default-Parameter</h3>
+
+<p>Vor Gecko 26 {{geckoRelease(26)}} erzeugte der folgende Code einen {{jsxref("SyntaxError")}}. Dieses wurde in {{bug(777060)}} behoben und funktioniert wie erwartet in späteren Versionen. Bei Aufruf werden Parameter noch immer von links nach rechts angegeben. Default-Parameter werden überschrieben, auch wenn spätere Parameter keinen Default haben:</p>
+
+<pre class="brush: js">function f(x=1, y) {
+  return [x, y];
+}
+
+f(); // [1, undefined]
+f(2); // [2, undefined]
+</pre>
+
+<h3 id="Zerstörter_Parameter_mit_Standardwertzuordnung">Zerstörter Parameter mit Standardwertzuordnung</h3>
+
+<p>Sie können die Standardwertzuordnung mit der <a href="/de/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destrukturierende Zuordnung</a> Schreibweise verwenden:</p>
+
+<pre class="brush: js">function f([x, y] = [1, 2], {z: z} = {z: 3}) {
+  return x + y + z;
+}
+
+f(); // 6</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-function-definitions', 'Function Definitions')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div>
+
+
+<p>{{Compat("javascript.functions.default_parameters")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values" rel="external" title="http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values">Original Vorschlag von ecmascript.org</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/functions/get/index.html b/files/de/web/javascript/reference/functions/get/index.html
new file mode 100644
index 0000000000..b36b0f50e8
--- /dev/null
+++ b/files/de/web/javascript/reference/functions/get/index.html
@@ -0,0 +1,174 @@
+---
+title: Getter
+slug: Web/JavaScript/Reference/Functions/get
+tags:
+  - ECMAScript 2015
+  - ECMAScript 5
+  - Functions
+  - JavaScript
+  - Language feature
+translation_of: Web/JavaScript/Reference/Functions/get
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p>Die <strong><code>get</code></strong> Syntax bindet eine Objekteigenschaft an eine Funktion welche aufgerufen wird, wenn die Eigenschaft abgefragt wird.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/functions-getter.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">{get <var>prop</var>() { ... } }
+{get [<var>expression</var>]() { ... } }</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>Der Name der Eigenschaft, die an die gegebene Funktion gebunden wird.</dd>
+ <dt><code><var>expression</var></code></dt>
+ <dd>Beginnend mit ECMAScript 2015, kann auch ein Ausdruck für einen berechneten Eigenschaftsnamen genutzt werden, der an die Funktion gebunden wird.</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Manchmal ist es wünschenswert, den Zugriff auf eine Eigenschaft zuzulassen, die einen dynamisch berechneten Wert zurückgibt oder man möchten den Status einer internen Variablen widerspiegeln, ohne dass explizite Methodenaufrufe erforderlich sind. In JavaScript kann dieses mit einem <em>getter</em> erreicht werden.</p>
+
+<p>Es ist nicht möglich, dass ein Getter gleichzeitig an eine Eigenschaft gebunden ist und diese Eigenschaft tatsächlich einen Wert enthält, obwohl es möglich ist, einen Getter und einen Setter in Verbindung zu verwenden, um einen Pseudoeigenschaftstyp zu erstellen.</p>
+
+<p>Folgendes ist zu beachten, wenn die <code>get</code> Syntax verwendet wird:</p>
+
+<ul>
+ <li>Sie kann ein Bezeichner haben, welche entweder eine Zahl oder ein String ist.</li>
+ <li>Sie muss exakt null Parameter haben (siehe <a class="external" href="http://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/" rel="external nofollow">Incompatible <abbr title="ECMAScript 5th edition">ES5</abbr> change: literal getter and setter functions must now have exactly zero or one arguments</a> für mehr Informationen);</li>
+ <li>Es darf nicht in einem Objektliteral mit einem anderen <code>get</code> oder Dateneintrag für die gleiche Eigenschaft benutzt werden (<code>{ get x() { }, get x() { } }</code> und <code>{ x: ..., get x() { } }</code> sind verboten).</li>
+</ul>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Definition_eines_Getters_in_einem_neuen_Objekt_in_der_Objektinitialisierung">Definition eines Getters in einem neuen Objekt in der Objektinitialisierung</h3>
+
+<p>Folgendes erstellt eine Pseudoeigenschaft <code>latest</code> für das Objekt <code>obj</code>, welche dan letzte Arrayeintrag von <code>log</code> zurückgibt.</p>
+
+<pre class="brush: js">const obj = {
+  log: ['example','test'],
+  get latest() {
+    if (this.log.length === 0) return undefined;
+    return this.log[this.log.length - 1];
+  }
+}
+console.log(obj.latest); // "test".
+</pre>
+
+<p>Zu beachten ist, dass die Zuweisung eines Wertes auf <code>latest</code> keine Änderung bewirkt.</p>
+
+<h3 id="Löschen_eines_Getters_mit_dem_delete_Operator">Löschen eines Getters mit dem <code>delete</code> Operator</h3>
+
+<p>Wenn ein Getter gelöscht werden soll, kann einfach {{jsxref("Operators/delete", "delete")}} benutzt werden:</p>
+
+<pre class="brush: js">delete <var>obj</var>.latest;
+</pre>
+
+<h3 id="Definition_eines_Getter_auf_einem_existierenden_Objektes_mit_defineProperty">Definition eines Getter auf einem existierenden Objektes mit <code>defineProperty</code></h3>
+
+<p>Um einem Getter später zu einem existierenden Objekt hinzuzufügen, kann jederzeit {{jsxref("Object.defineProperty()")}} benutzt werden.</p>
+
+<pre class="brush: js">const o = {a: 0};
+
+Object.defineProperty(o, 'b', { get: function() { return this.a + 1; } });
+
+console.log(o.b) // Runs the getter, which yields a + 1 (which is 1)</pre>
+
+<h3 id="Einen_berechneten_Eigenschaftnamen_benutzen">Einen berechneten Eigenschaftnamen benutzen</h3>
+
+<pre class="brush: js">const expr = 'foo';
+
+const obj = {
+  get [expr]() { return 'bar'; }
+};
+
+console.log(obj.foo); // "bar"</pre>
+
+<h3 id="Intelligente_Selbstüberschreibende_Lazy_Getter">Intelligente / Selbstüberschreibende / Lazy Getter</h3>
+
+<p>Mit Gettern kann eine Eigenschaft eines Objekts <em>definiert</em> werden, wobei der Wert der Eigenschaft nicht <em>berechnen</em> wird, bis auf die Eigenschaft zugegriffen wird. Ein Getter verschiebt die Kosten für die Berechnung des Werts auf den Zeitpunkt des Zugriffs. Wenn der der Getter nie benötigt wird, fallen nie Kosten an.</p>
+
+<p>Eine weitere Optimierungstechnik, um die Berechnung eines Eigenschaftswerts zu verzögern und ihn für einen späteren Zugriff zwischenzuspeichern, sind <strong>intelligente (oder "<a href="https://de.wikipedia.org/wiki/Memoisation">memoisierte</a>") Getter</strong>. Der Wert wird berechnet, wenn der Getter das erste Mal aufgerufen wird und wird dann zwischengespeichert, damit nachfolgende Zugriffe den zwischengespeicherten Wert zurückgeben, ohne ihn neu zu berechnen. Dies ist in den folgenden Situationen nützlich:</p>
+
+<ul>
+ <li>Wenn die Berechnung eines Eigenschaftswerts teuer ist (erfordert viel RAM- oder CPU-Zeit, erzeugen von Worker-Threads, ruft eine Remote-Datei ab usw.).</li>
+ <li>Wenn der Wert gerade nicht benötigt wird. Er wird später verwendet oder in einigen Fällen wird er überhaupt nicht verwendet.</li>
+ <li>Wenn er verwendet wird, wird mehrmals darauf zugegriffen und er ist nicht erforderlich, den Wert neu zu berechnen, da er nie geändert oder nicht neu berechnet wird.</li>
+</ul>
+
+<div class="note">
+<p>Das bedeutet, dass keine verzögerten Getter für eine Eigenschaft verwenden werden sollten, deren Wert sich voraussichtlich ändern wird, weil der Getter den Wert nicht neu berechnet.</p>
+</div>
+
+<p>Im folgenden Beispiel hat das Objekt einen Getter als eigene Eigenschaft. Beim Abrufen der Eigenschaft wird die Eigenschaft aus dem Objekt entfernt und erneut hinzugefügt, diesmal jedoch implizit als Dateneigenschaft. Abschließend wird der Wert zurückgegeben.</p>
+
+<pre class="brush: js">get notifier() {
+  delete this.notifier;
+  return this.notifier = document.getElementById('bookmarked-notification-anchor');
+},</pre>
+
+<p>Für Firefox Code sollte zusätzlich das <code>XPCOMUtils.jsm</code> Code Modul angeschaut werden, welches die <code><a href="/de/docs/Mozilla/JavaScript_code_modules/XPCOMUtils.jsm#defineLazyGetter()">defineLazyGetter()</a></code> Funktion definiert.</p>
+
+<h3 id="get_vs._defineProperty"><code>get</code> vs. <code>defineProperty</code></h3>
+
+<p>Das <code>get</code> Schlüsselwort und {{jsxref("Object.defineProperty()")}} haben ähnliche Ergebnisse. Es gibt einen kleinen Unterschied zwischen beiden, wenn {{jsxref("classes")}} eingesetzt werden.</p>
+
+<p>Wenn <code>get</code> eingesetzt wird, wird die Eigenschaft im Instnaz-Prototyp definiert, während beim Einsatz von {{jsxref("Object.defineProperty()")}} die Eigenschaft auf der Instanz definiert wird.</p>
+
+<pre class="brush: js">class Example {
+  get hello() {
+    return 'world';
+  }
+}
+
+const obj = new Example();
+console.log(obj.hello);
+// "world"
+
+console.log(Object.getOwnPropertyDescriptor(obj, 'hello'));
+// undefined
+
+console.log(
+  Object.getOwnPropertyDescriptor(
+    Object.getPrototypeOf(obj), 'hello'
+  )
+);
+// { configurable: true, enumerable: false, get: function get hello() { return 'world'; }, set: undefined }</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.functions.get")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Functions/set">setter</a></li>
+ <li>{{jsxref("Operators/delete", "delete")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.defineGetter", "__defineGetter__")}}</li>
+ <li>{{jsxref("Object.defineSetter", "__defineSetter__")}}</li>
+ <li><a href="/de/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Defining Getters and Setters</a> im JavaScript Guide</li>
+</ul>
diff --git a/files/de/web/javascript/reference/functions/index.html b/files/de/web/javascript/reference/functions/index.html
new file mode 100644
index 0000000000..278d3e997d
--- /dev/null
+++ b/files/de/web/javascript/reference/functions/index.html
@@ -0,0 +1,594 @@
+---
+title: Funktionen
+slug: Web/JavaScript/Reference/Functions
+tags:
+  - Constructor
+  - Function
+  - Functions
+  - JavaScript
+  - Parameter
+  - parameters
+translation_of: Web/JavaScript/Reference/Functions
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p>Allgemein gesagt, ist eine Funktion ein "Unterprogramm", welches von Code außerhalb der Funktion (oder innerhalb der Funktion, im Fall von Rekursion) aufgerufen wird. Wie Programme selbst auch, ist eine Funktion eine Sequenz von ausgewählten Statements, die als Funktionskörper bezeichnet wird. Der Funktion können der Werte übergeben werden und die Funktion wird einen Wert zurückgeben.</p>
+
+<p>In JavaScript sind Funktionen First-Class Objekte, weil sie Eigenschaften und Methoden genau wie jedes andere Objekt haben können. Was sie von anderen Objekten unterscheidet ist, dass sie aufgerufen werden können. Kurz gesagt sind es <code><a href="/de/docs/JavaScript/Reference/Global_Objects/Function">Function</a></code> Objekte.</p>
+
+<p>Für mehr Beispiele und Erklärungen, siehe auch im <a href="/de/docs/Web/JavaScript/Guide/Functions">JavaScript Guide über Funktionen</a>.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Jede Funktion in JavaScript ist ein <code>Function</code> Objekt. Siehe {{jsxref("Function")}} für mehr Informationen zu Eigenschaften und Methoden von <code>Function</code> Objekten.</p>
+
+<p>Um einen Wert abweichend vom Standard zurückzugeben, muss eine Funktion ein <code><a href="/de/docs/Web/JavaScript/Reference/Statements/return">return</a></code> Statement haben, welches den Rückgabewert spezifiziert. Eine Funktion ohne ein return Statement wird den Standardwert zurückgeben. Im Fall eines <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">Konstruktor</a>aufrufes mit dem Schlüsselwort <code><a href="/de/docs/Web/JavaScript/Reference/Operators/new">new</a></code>, wird der als Standardwert der Wert vom <code>this</code> Parameter zurückgegeben. Für alle anderen Funktionen wird als Standardwert {{jsxref("undefined")}} zurückgegeben.</p>
+
+<p>Die Parameter eines Funktionsaufrufes sind die Argumente der Funktion. Argumente werden als Werte der Funktion übergeben. Wenn die Funktion den Wert eines Argumentes ändert, wirkt sich die Änderung nicht global oder in der aufrufenden Funktion aus. Jedoch sind auch Objektreferenzen Werte, welche speziell sind: Wenn die Funktion die Eigenschaften eines referenzierte Objekts ändern, ist die Änderung außerhalb der Funktion sichtbar, wie im folgenden Beispiel gezeigt wird:</p>
+
+<pre class="brush: js notranslate">/* Deklariert die Funktion 'myFunc' */
+function myFunc(theObject) {
+  theObject.brand = "Toyota";
+}
+
+/*
+ * Deklariert die Variable 'mycar';
+ * Erstellt und initialisiert ein neues Objekt;
+ * Weist Referenz 'mycar' zu
+ */
+var mycar = {
+  brand: "Honda",
+  model: "Accord",
+  year: 1998
+};
+
+/* gibt 'Honda' aus */
+console.log(mycar.brand);
+
+/* Übergibt Objektreferenz der Funktion */
+myFunc(mycar);
+
+/*
+ * gibt 'Toyota' als Wert der 'brand' Eigenschaft
+ * des Objektes aus, so wie er von der Funktion geändert wurde.
+ */
+console.log(mycar.brand);
+</pre>
+
+<p>Das <a href="/de/docs/Web/JavaScript/Reference/Operators/this"><code>this</code> Schlüsselwort</a> referenziert nicht zum aktuell ausgeführten Funktion, so, dass man das <code>Function</code> Objekt über den Namen referenzierten muss, auch im Funktionskörper.</p>
+
+<h2 id="Funktionen_definieren">Funktionen definieren</h2>
+
+<p>Es gibt verschiedenen Möglichkeiten Funktionen zu definieren:</p>
+
+<h3 id="Die_Funktionsdeklaration_function_Statement">Die Funktionsdeklaration (<code>function</code> Statement)</h3>
+
+<p>Es gibt eine spezielle Syntax für das Deklarieren von Funktionen (siehe <a href="/de/docs/Web/JavaScript/Reference/Statements/function">Funktionsstatement</a> für mehr Details):</p>
+
+<pre class="syntaxbox notranslate">function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) {
+   <em>statements</em>
+}
+</pre>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Der Funktionsname.</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>Der Name eines Arguments, welches der Funktion übergeben wird. Eine Funktion kann bis zu 255 Argumente haben.</dd>
+</dl>
+
+<dl>
+ <dt><code>statements</code></dt>
+ <dd>Die Statements, welche den Funktionskörper der Funktion bilden.</dd>
+</dl>
+
+<h3 id="Der_Funktionsausdruck_function_Ausdruck">Der Funktionsausdruck (<code>function</code> Ausdruck)</h3>
+
+<p>Ein Funktionsausdruck ist ähnlich wie eine Funktionsdeklaration und hat die selbe Syntax (siehe <a href="/de/docs/Web/JavaScript/Reference/Operators/function">Funktionsausdruck</a> für Details). Ein Funktionsausdruck ist manchmal ein Teil eines größeren Ausdrucks. Man kann benannte Funktionsausdrücke (in denen der Name des Ausdrucks zum Beispiel im Aufrufstack benutzt wird) oder anonyme Funktionsausdrücke definieren. Funktionsausdrücke werden nicht an den Anfang des Gültigkeitsbereiches verschoben (<em>hoisted</em>), was bedeutet, dass sie nicht vor der Definition im Code benutzt werden können.</p>
+
+<pre class="syntaxbox notranslate">function [<em>name</em>]([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) {
+   <em>statements</em>
+}
+</pre>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Der Funktionsname. Kann weggelassen werden, wodurch die Funktion eine sogenannte anonyme Funktion ist.</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>Der Name eines Arguments, welches der Funktion übergeben wird. Eine Funktion kann bis zu 255 Argumente haben.</dd>
+ <dt><code>statements</code></dt>
+ <dd>Die Statements, welche den Funktionskörper der Funktion bilden.</dd>
+</dl>
+
+<p>Hier ist ein Beispiel für einen <strong>anonymen</strong> Funktionsausdruck (<code>name</code> wird nicht benutzt):</p>
+
+<pre class="brush: js notranslate">var myFunction = function() {
+    statements
+}</pre>
+
+<p>Es ist auch möglich den Namen in der Funktionsdefinition erreichbar zu machen, indem eine <strong>benannter</strong> Funktionsausdruck erstellt wird:</p>
+
+<pre class="brush: js notranslate">var myFunction = function namedFunction(){
+    statements
+}
+</pre>
+
+<p>Ein Vorteil beim Erstellen eines benannten Funktionsausdrucks ist, dass im Fall eines auftretenden Fehlers, der Name der Funktion im Stack Trace enthalten ist, was es einfacher macht den Ursprung des Fehlers zu finden.</p>
+
+<p>Wie gezeigt, beginnen beide Beispiele nicht mit dem <code>function</code> Schlüsselwort. Statements die Funktionen enthalten aber nicht mit <code>function</code> beginnen, sind Funktionsausdrücke.</p>
+
+<p>Wenn eine Funktion nur einmal benutzt wird, wird ein Pattern namens <strong>IIFE (<em>Immediately Invokable Function Expression</em>)</strong> genutzt.</p>
+
+<pre class="brush: js notranslate">(function() {
+    statements
+})();</pre>
+
+<p>IIFE sind Funktionsausdrücke, die direkt nach dem Definieren ausgeführt werden.</p>
+
+<h3 id="Die_Generatorfunktionendeklaration_function*_Statement">Die Generatorfunktionendeklaration (<code>function*</code> Statement)</h3>
+
+<p>Es gibt eine spezielle Syntax für die Deklaration von Generatorfunktionen (siehe {{jsxref('Statements/function*', 'function* Statement')}} für Details):</p>
+
+<pre class="syntaxbox notranslate">function* <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) {
+   <em>statements</em>
+}
+</pre>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Der Funktionsname.</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>Der Name eines Arguments, welches der Funktion übergeben wird. Eine Funktion kann bis zu 255 Argumente haben.</dd>
+</dl>
+
+<dl>
+ <dt><code>statements</code></dt>
+ <dd>Die Statements, welche den Funktionskörper der Funktion bilden.</dd>
+</dl>
+
+<h3 id="Der_Generatorfunktionsausdruck_function*_Ausdruck">Der Generatorfunktionsausdruck (<code>function*</code> Ausdruck)</h3>
+
+<p>Ein Generatorfunktionsausdruck ist ähnlich wie eine Generatorfunktionsdeklaration und hat die selbe Syntax (siehe {{jsxref('Operators/function*', 'function* expression')}} für Details):</p>
+
+<pre class="syntaxbox notranslate">function* [<em>name</em>]([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) {
+   <em>statements</em>
+}
+</pre>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Der Funktionsname. Kann weggelassen werden, wodurch die Funktion eine sogenannte anonyme Funktion ist.</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>Der Name eines Arguments, welches der Funktion übergeben wird. Eine Funktion kann bis zu 255 Argumente haben.</dd>
+ <dt><code>statements</code></dt>
+ <dd>Die Statements, welche den Funktionskörper der Funktion bilden.</dd>
+</dl>
+
+<h3 id="Der_Pfeilfunktionsausdruck_>">Der Pfeilfunktionsausdruck (=&gt;)</h3>
+
+<p>Eine Pfeilfunktionsausdruck hat eine kürzere Syntax und der <code>this</code> Wert ist lexikalisch gebunden (siehe <a href="/de/docs/Web/JavaScript/Reference/Functions/Pfeilfunktionen">Pfeilfunktionen</a> für Details):</p>
+
+<pre class="syntaxbox notranslate">([param[, param]]) =&gt; {
+   statements
+}
+
+param =&gt; expression
+</pre>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>Der Name eines Arguments. Keine Argumente müssen mit <code>()</code> angegeben werden. Für nur ein Argument sind die Klammern nicht notwendig (z. B. <code>foo =&gt; 1</code>).</dd>
+ <dt><code>statements or expression</code></dt>
+ <dd>Mehrere Statements müssen in Klammern geschrieben werden. Ein einziger Ausdruck benötigt keine Klammern. Dieser Ausdruck ist implizit der Rückgabewert der Funktion.</dd>
+</dl>
+
+<h3 id="Der_Function_Konstruktor">Der <code>Function</code> Konstruktor</h3>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Der Einsatz des <code>Function</code> Konstruktors, um eine Funktion zu erstellen wird nicht empfohlen, weil der Funktionskörper als String übergeben wird, welcher von einigen JS Engines nicht optimiert werden kann und zu Problemen führen kann.</p>
+</div>
+
+<p>Wie alle anderen Objekte, können {{jsxref("Function")}} Objekte mit dem <code>new</code> Operator erstellt werden:</p>
+
+<pre class="syntaxbox notranslate">new Function (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>)
+</pre>
+
+<dl>
+ <dt><code>arg1, arg2, ... arg<em>N</em></code></dt>
+ <dd>Null oder mehr Namen, welche von der Funktion als formale Parameter benutzt werden. Jeder muss ein valider JavaScript Bezeichner sein.</dd>
+</dl>
+
+<dl>
+ <dt><code>functionBody</code></dt>
+ <dd>Ein String, der die JavaScript Statements enthält, die den Funktionskörper formen.</dd>
+</dl>
+
+<p>Das Ausführen des <code>Function</code> Konstruktors als Funktion (ohne den Einsatz des <code>new</code> Operators) hat den selben Effekt wie das Aufrufen als Konstruktor.</p>
+
+<h3 id="Der_GeneratorFunction_Konstruktor">Der <code>GeneratorFunction</code> Konstruktor</h3>
+
+<div class="note">
+<p><strong>Hinweis:</strong> <code>GeneratorFunction</code> ist kein globales Objekt, kann aber von Generatorfunktionsinstanzen erhalten werden (siehe {{jsxref("GeneratorFunction")}} für mehr Details).</p>
+</div>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Der Einsatz des <code>GeneratorFunction</code> Konstruktors, um eine Funktion zu erstellen wird nicht empfohlen, weil der Funktionskörper als String übergeben wird, welcher von einigen JS Engines nicht optimiert werden kann und zu Problemen führen kann.</p>
+</div>
+
+<p>Wie alle anderen Objekte, können {{jsxref("GeneratorFunction")}} Objekte mit dem <code>new</code> Operator erstellt werden:</p>
+
+<pre class="syntaxbox notranslate">new GeneratorFunction (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>)
+</pre>
+
+<dl>
+ <dt><code>arg1, arg2, ... arg<em>N</em></code></dt>
+ <dd>Null oder mehr Namen, welche von der Funktion als formale Parameter benutzt werden. Jeder muss ein valider JavaScript Bezeichner sein oder eine Liste solcher Strings mit Komma getrennt. Zum Beispiel "<code>x</code>", "<code>theValue</code>", or "<code>a,b</code>".</dd>
+</dl>
+
+<dl>
+ <dt><code>functionBody</code></dt>
+ <dd>Ein String, der die JavaScript Statements enthält, die den Funktionskörper formen.</dd>
+</dl>
+
+<p>Das Ausführen des <code>GeneratorFunction </code>Konstruktors als Funktion (ohne den Einsatz des <code>new</code> Operators) hat den selben Effekt wie das Aufrufen als Konstruktor.</p>
+
+<h2 id="Funktionsparameter">Funktionsparameter</h2>
+
+<h3 id="Standardparameter">Standardparameter</h3>
+
+<p>Standard Funktionsparameter erlauben es formale Parameter mit einem Standardwert zu initialisieren, wenn kein Wert oder <code>undefined</code> übergeben wird. Für mehr Details siehe <a href="/de/docs/Web/JavaScript/Reference/Functions/Default_parameters">Standardparameter</a>.</p>
+
+<h3 id="Rest_Parameter">Rest Parameter</h3>
+
+<p>Die Rest Parameter Syntax erlaubt die Repräsentation von beliebig fielen Argumenten als ein Array. Für mehr Details siehe <a href="/de/docs/Web/JavaScript/Reference/Functions/rest_parameters">Rest Parameter</a>.</p>
+
+<h2 id="Das_arguments_Objekt">Das <code>arguments</code> Objekt</h2>
+
+<p>Man kann die Funktionsargumente in einer Funktion referenzieren, indem das <code>arguments</code> Objekt benutzt wird. Siehe <a href="/de/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>.</p>
+
+<ul>
+ <li><code><a href="/de/docs/JavaScript/Reference/Functions_and_function_scope/arguments">arguments</a></code>: Ein arrayähnliches Objekt, welches die übergebenen Argumente in der aktuell ausgeführten Funktion enthält.</li>
+ <li><code><a href="/de/docs/JavaScript/Reference/Functions_and_function_scope/arguments/callee">arguments.callee</a></code> {{Deprecated_inline}}: Die aktuell ausgeführte Funktion.</li>
+ <li><code><a href="/de/docs/JavaScript/Reference/Functions_and_function_scope/arguments/caller">arguments.caller</a></code> {{Obsolete_inline}} : Die Funktion, die die aktuell ausgeführte Funktion aufgerufen hat.</li>
+ <li><code><a href="/de/docs/JavaScript/Reference/Functions_and_function_scope/arguments/length">arguments.length</a></code>: Die Anzahl der Argumente, die der Funktion übergeben wurden.</li>
+</ul>
+
+<h2 id="Methodenfunktionen_definieren">Methodenfunktionen definieren</h2>
+
+<h3 id="Getter_und_Setter_Funktionen">Getter und Setter Funktionen</h3>
+
+<p>Man kann Getter (Zugriffsmethoden) und Setter (Änderungsmethoden) bei jedem Standardobjekt oder benutzerdefinierten Objekt, welches das Hinzufügen von neuen Eigenschaften unterstützt. Die Syntax für das Definieren von Gettern und Settern beim Einsatz der Objektliteralsyntax.</p>
+
+<dl>
+ <dt><a href="/de/docs/Web/JavaScript/Reference/Functions/get">get</a></dt>
+ <dd>
+ <p>Bindet eine Objekteigenschaft an eine Funktion, welche aufgerufen wird, wenn der Wert der Eigenschaft abgefragt wird.</p>
+ </dd>
+ <dt><a href="/de/docs/Web/JavaScript/Reference/Functions/set">set</a></dt>
+ <dd>Bindet eine Objekteigenschaft an eine Funktion, welche aufgerufen wird, wenn der Wert der Eigenschaft geändert wird.</dd>
+</dl>
+
+<h3 id="Methodendefinitionssyntax">Methodendefinitionssyntax</h3>
+
+<p>Angefangen mit ECMAScript 2015 kann man eigene Methoden in einer kürzeren Syntax, ähnlich wie Getter und Setter, definieren. Siehe <a href="/de/docs/Web/JavaScript/Reference/Functions/Method_definitions">Methodendefinition</a> für mehr Details.</p>
+
+<pre class="brush: js notranslate">var obj = {
+  foo() {},
+  bar() {}
+};</pre>
+
+<h2 id="Konstruktor_vs._Deklaration_vs._Ausdruck">Konstruktor vs. Deklaration vs. Ausdruck</h2>
+
+<p>Das folgende wird verglichen:</p>
+
+<p>Eine Funktion, die mit dem <code>Function</code> Konstruktor definiert wird und der Variablen <code>multiply</code> zugewiesen wird:</p>
+
+<pre class="brush: js notranslate">var multiply = new Function('x', 'y', 'return x * y');</pre>
+
+<p>Eine Funktionsdeklaration mit dem Namen <code>multiply</code>:</p>
+
+<pre class="brush: js notranslate">function multiply(x, y) {
+   return x * y;
+} // there is no semicolon here
+</pre>
+
+<p>Ein Funktionsausdruck einer anonymen Funktion, die der Variablen <code>multiply</code> zugewiesen wird:</p>
+
+<pre class="brush: js notranslate">var multiply = function(x, y) {
+   return x * y;
+};
+</pre>
+
+<p>Ein Funktionsausdruck der Funktion <code>func_name</code>, die der Variablen <code>multiply</code> zugewiesen wird:</p>
+
+<pre class="brush: js notranslate">var multiply = function func_name(x, y) {
+   return x * y;
+};
+</pre>
+
+<h3 id="Unterschiede">Unterschiede</h3>
+
+<p>Alle machen annähernd die selben Dinge, jedoch mit kleinen subtilen Unterschieden:</p>
+
+<p>Es gibt einen Unterschied zwischen dem Funktionsnamen und der Variable, der die Funktion zugewiesen wird. Der Funktionsnamen kann nicht geändert werden, während die Variable, die mit der Funktion zugewiesen ist, überschrieben werden kann. Der Funktionsname kann nur innerhalb des Funktionskörpers benutzt werden. Der Versuch diesen außerhalb des Funktionskörpers zu benutzen resultiert in einem Fehler (oder <code>undefined</code>, wenn der Funktionsname vorher mit einem <code>var</code> Statement deklariert wurde). Zum Beispiel:</p>
+
+<pre class="brush: js notranslate">var y = function x() {};
+alert(x); // Führt zu einem Error
+</pre>
+
+<p>Der Funktionsname taucht auch auf, wenn die Funktion mit der <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Function/toString">toString Methode</a> serialisiert wird.</p>
+
+<p>Auf der anderen Seite ist die Variable, der die Funktion zugewiesen ist, nur durch ihren Gültigkeitsbereich begrenzt, der garantiert den Geltungsbereich einschließt, in dem die Funktion deklariert ist.</p>
+
+<p>Wie das 4. Beispiel zeigt, kann sich der Funktionsname von dem Namen der Variablen, der die Funktion zugewiesen ist, unterscheiden. Diese sind nicht voneinander abhängig. Eine Funktionsdeklaration erstellt ebenfalls eine Variable mit dem selben Namen wie die Funktion. Im Gegensatz zu den durch Funktionsausdrücke definierten Funktionen können Funktionen, die durch Funktionsdeklarationen definiert sind, über ihren Namen in dem Bereich aufgerufen werden, in dem sie definiert wurden:</p>
+
+<p>Eine Funktionsdefinition mit '<code>new Function'</code> hat keinen Funktionsnamen. In der <a href="/de/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> JavaScript Engine haben solche Funktionen in serialisierter Form immer den Namen "anonymous". Zum Beispiel gibt <code>alert(new Function())</code> folgendes aus:</p>
+
+<pre class="brush: js notranslate">function anonymous() {
+}
+</pre>
+
+<p>Weil die Funktion aktuell keinen Namen hat, ist <code>anonymous</code> keine Variable, die in der Funktion erreicht werden kann. Zum Beispiel führt folgendes zu einem Fehler:</p>
+
+<pre class="brush: js notranslate">var foo = new Function("alert(anonymous);");
+foo();
+</pre>
+
+<p>Anders als Funktionsdefinitionen mit Funktionsausdrücken oder dem <code>Function</code> Konstruktor, kann eine Funktionsdefinition mit Funktionsdeklaration genutzt werden, bevor bevor sie deklariert wird. Zum Beispiel:</p>
+
+<pre class="brush: js notranslate">foo(); // alerts FOO!
+function foo() {
+   alert('FOO!');
+}
+</pre>
+
+<p>Eine Funktionsdefinition mit einem Funktionsausdruck oder einer Funktionsdeklaration erbt den aktuellen Gültigkeitsbereich. Das bedeutet, die Funktion bildet eine Closure. Auf der anderen Seite erbt eine Funktion, die mit dem <code>Function</code> Konstruktor definiert wird, keinen anderen Gültigkeitsbereich außer dem globalen (welchen alle Funktionen erben).</p>
+
+<pre class="brush: js notranslate">/*
+ * Declare and initialize a variable 'p' (global)
+ * and a function 'myFunc' (to change the scope) inside which
+ * declare a varible with same name 'p' (current) and
+ * define three functions using three different ways:-
+ *     1. function declaration
+ *     2. function expression
+ *     3. function constructor
+ * each of which will log 'p'
+ */
+var p = 5;
+function myFunc() {
+    var p = 9;
+
+    function decl() {
+        console.log(p);
+    }
+    var expr = function() {
+        console.log(p);
+    };
+    var cons = new Function('\tconsole.log(p);');
+
+    decl();
+    expr();
+    cons();
+}
+myFunc();
+
+/*
+ * Logs:-
+ * 9  - for 'decl' by function declaration (current scope)
+ * 9  - for 'expr' by function expression (current scope)
+ * 5  - for 'cons' by Function constructor (global scope)
+ */
+</pre>
+
+<p>Funktionsdefinitionen als Funktionsausdrücke und Funktionsdeklarationen werden nur einmal übersetzt, während das bei <code>Function</code> Konstruktoren nicht so ist. Das bedeutet, dass der Funktionskörper, der dem <code>Function</code> Konstruktor übergeben wird, mit jedem Aufruf des Konstruktors erneut übersetzt wird. Weil ein Funktionsausdruck jedes mal eine Closure erstellt und der Funktionskörper aber nicht erneut übersetzt wird, sind Funktionsausdrücke um einiges schneller als "<code>new Function(...)</code>". Deshalb sollte der <code>Function</code> Konstruktor überall vermieden werden, wo es geht.</p>
+
+<p>Es sollte bemerkt werden, dass immer wenn Funktionsausdrücke und Funktionsdeklarationen verschachtelt in einer Funktion generiert vom <code>Function</code> Konstruktor erstellt werden, sie nicht mehrfach übersetzt werden. Zum Beispiel:</p>
+
+<pre class="brush: js notranslate">var foo = (new Function("var bar = \'FOO!\';\nreturn(function() {\n\talert(bar);\n});"))();
+foo(); // The segment "function() {\n\talert(bar);\n}" of the function body string is not re-parsed.</pre>
+
+<p>Eine Funktionsdeklaration wird sehr einfach (und oft unabsichtlich) in einen Funktionsausdruck geändert. Eine Funktionsdeklaration hört auf eine zu sein, wenn:</p>
+
+<ul>
+ <li>sie ein Teil eines Ausdrucks wird</li>
+ <li>sie kein "source element" einer Funktion oder des Skriptes selbst ist. Ein "source element" ist ein nicht geschachteltes Statement im Skript oder eines Funktionskörpers:</li>
+</ul>
+
+<pre class="brush: js notranslate">var x = 0;               // source element
+if (x === 0) {           // source element
+   x = 10;               // not a source element
+   function boo() {}     // not a source element
+}
+function foo() {         // source element
+   var y = 20;           // source element
+   function bar() {}     // source element
+   while (y === 10) {    // source element
+      function blah() {} // not a source element
+      y++;               // not a source element
+   }
+}
+</pre>
+
+<h3 id="Beispiele">Beispiele</h3>
+
+<pre class="brush: js notranslate">// Funktionsdeklaration
+function foo() {}
+
+// Funktionsausdruck
+(function bar() {})
+
+// Funktionsausdruck
+x = function hello() {}
+
+
+if (x) {
+   // Funktionsausdruck
+   function world() {}
+}
+
+
+// Funktionsdeklaration
+function a() {
+   // Funktionsdeklaration
+   function b() {}
+   if (0) {
+      // Funktionsausdruck
+      function c() {}
+   }
+}
+</pre>
+
+<h2 id="Funktionen_als_Block-Level-Element">Funktionen als Block-Level-Element</h2>
+
+<p>Beginnend mit ES2015 sind Funktionen im <a href="/de/docs/Web/JavaScript/Reference/Strict_mode">strict Modus</a> an den Block gebunden. Vor ES2015 waren Funktionen auf Blockebene im strikten Modus verboten.</p>
+
+<pre class="brush: js notranslate">'use strict';
+
+function f() {
+  return 1;
+}
+
+{
+  function f() {
+    return 2;
+  }
+}
+
+f() === 1; // true
+
+// f() === 2 nicht im strict Modus
+</pre>
+
+<h3 id="Block-level_Funktionen_im_nicht-strict_Code">Block-level Funktionen im nicht-strict Code</h3>
+
+<p>Kurz gesagt: nicht machen.</p>
+
+<p>Im nicht strict Code verhalten sich Funktionsdeklarationen innerhalb von Blöcken merkwürdig. Zum Beispiel:</p>
+
+<pre class="brush: js notranslate">if (shouldDefineZero) {
+   function zero() {     // DANGER: compatibility risk
+      console.log("This is zero.");
+   }
+}
+</pre>
+
+<p>ES2015 besagt, dass wenn <code>shouldDefineZero</code> false ist, <code>zero</code> niemals definiert wird, weil der Block nie ausgeführt wird. Jedoch ist das ein neuer Teil des Standards. Historisch war dieser Teil unspezifiziert und einigen Browser definierten <code>zero</code> egal, ob der Block ausgeführt wurde oder nicht.</p>
+
+<p>Im <a href="/de/docs/Web/JavaScript/Reference/Strict_mode">strict Modus</a> verhalten sich alle Browser, die ES2015 unterstützen, gleich. <code>zero</code> wird nur Definiert wenn <code>shouldDefineZero</code> true ist und nur in dem Gültigkeitsbereich des <code>if</code>-Blocks.</p>
+
+<p>Ein sicherer Weg eine Funktion bedingt zu definieren ist es einen Funktionsausdruck einer Variablen zuzuweisen:</p>
+
+<pre class="brush: js notranslate">var zero;
+if (shouldDefineZero) {
+   zero = function() {
+      console.log("This is zero.");
+   };
+}
+</pre>
+
+<h2 id="Beispiele_2">Beispiele</h2>
+
+<h3 id="Zurückgeben_einer_formatierten_Zahl">Zurückgeben einer formatierten Zahl</h3>
+
+<p>Die folgende Funktion gibt einen String zurück, der eine formatierte Zahlenrepräsentation mit führenden Nullen enthält.</p>
+
+<pre class="brush: js notranslate">// This function returns a string padded with leading zeros
+function padZeros(num, totalLen) {
+   var numStr = num.toString();             // Initialize return value as string
+   var numZeros = totalLen - numStr.length; // Calculate no. of zeros
+   for (var i = 1; i &lt;= numZeros; i++) {
+      numStr = "0" + numStr;
+   }
+   return numStr;
+}
+</pre>
+
+<p>Die folgende Statements rufen die padZeros Funktion auf.</p>
+
+<pre class="brush: js notranslate">var result;
+result = padZeros(42,4); // returns "0042"
+result = padZeros(42,2); // returns "42"
+result = padZeros(5,4);  // returns "0005"
+</pre>
+
+<h3 id="Prüfen_ob_eine_Funktoin_vorhanden_ist">Prüfen, ob eine Funktoin vorhanden ist</h3>
+
+<p>Man kann prüfen, ob eine Funktion existiert, indem man den <code>typeof</code> Operator benutzt wird. Im folgenden Beispiel wird getestet, ob das Objekt <code>window</code> eine Eigenschaft mit dem Namen <code>noFunc</code> hat, die eine Funktion ist. Wenn das so ist, wird sie benutzt, andernfalls wird etwas anderes gemacht.</p>
+
+<pre class="brush: js notranslate"> if ('function' === typeof window.noFunc) {
+   // use noFunc()
+ } else {
+   // do something else
+ }
+</pre>
+
+<p>Zu beachten ist, dass im <code>if</code> Test eine Referenz zu <code>noFunc</code> benutzt wird — es stehen keine Klammern <code>()</code> nach dem Funktionsnamen, so dass die Funktion nicht aufgerufen wird.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-13', 'Function Definition')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Neu: Pfeilfunktionen, Generatorfunktionen, Standardparameter, Rest Parameter.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.functions")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Statements/function", "Funktionsstatement")}}</li>
+ <li>{{jsxref("Operators/function", "Funktionsausdruck")}}</li>
+ <li>{{jsxref("Statements/function*", "function* Statement")}}</li>
+ <li>{{jsxref("Operators/function*", "function* Ausdruck")}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+ <li>{{jsxref("Functions/Arrow_functions", "Pfeilfunktionen")}}</li>
+ <li>{{jsxref("Functions/Default_parameters", "Standardparameter")}}</li>
+ <li>{{jsxref("Functions/rest_parameters", "Rest Parameter")}}</li>
+ <li>{{jsxref("Functions/arguments", "Arguments Objekt")}}</li>
+ <li>{{jsxref("Functions/get", "Getter")}}</li>
+ <li>{{jsxref("Functions/set", "Setter")}}</li>
+ <li>{{jsxref("Functions/Method_definitions", "Methodendefinitionen")}}</li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Functions_and_function_scope">Funktionen und Funktionsgültigkeitsbereiche</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/functions/methoden_definitionen/index.html b/files/de/web/javascript/reference/functions/methoden_definitionen/index.html
new file mode 100644
index 0000000000..bf4d432627
--- /dev/null
+++ b/files/de/web/javascript/reference/functions/methoden_definitionen/index.html
@@ -0,0 +1,230 @@
+---
+title: Methoden Definitionen
+slug: Web/JavaScript/Reference/Functions/Methoden_Definitionen
+tags:
+  - ECMAScript 2015
+  - Funktionen
+  - JavaScript
+  - Objekte
+  - Syntax
+translation_of: Web/JavaScript/Reference/Functions/Method_definitions
+---
+<div>{{JsSidebar("Functions")}}</div>
+
+<p>Beginnend mit ECMAScript 2015 wurde eine kürzere Syntax für Methodendefinitionen in Objekt Initialisierungen eingeführt. Es ist eine Abkürzung für die Zuweisung einer Funktion an einen Methodennamen.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var obj = {
+  <var>property</var>( <var>parameters…</var> ) {},
+  *<var>generator</var>( <var>parameters…</var> ) {},
+// also with computed keys:
+  [property]( <var>parameters…</var> ) {},
+  *[generator]( <var>parameters…</var> ) {},
+// compare ES5 getter/setter syntax:
+  get <var>property</var>() {},
+  set <var>property</var>(<var>value</var>) {}
+};
+</pre>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p>Die Syntax der Kurzschreibweise ähnelt der in ECMAScript 2015 eingeführten Syntax der <a href="/de/docs/Web/JavaScript/Reference/Functions/get">getter</a> und <a href="/de/docs/Web/JavaScript/Reference/Functions/set">setter</a>.</p>
+
+<p>Gegeben sei der folgende Quellcode:</p>
+
+<pre class="brush: js">var obj = {
+  foo: function() {},
+  bar: function() {}
+};</pre>
+
+<p>Jetzt können Sie das abkürzen zu:</p>
+
+<pre class="brush: js">var obj = {
+  foo() {},
+  bar() {}
+};</pre>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Die kurze Syntax benutzt benamte Funktionen statt anonymen Funktionen (wie in ...<code>foo: function() {}</code>...). Benamte Funktionen können sich vom Funktionskörper aus aufrufen (für anonyme Funktionen ist das unmöglich, weil sie keinen Bezeichner haben). Für mehr Details, siehe {{jsxref("Operators/function","function","#Beispiele")}}.</p>
+</div>
+
+<h3 id="Kurze_Generatormethoden">Kurze Generatormethoden</h3>
+
+<p><a href="/de/docs/Web/JavaScript/Reference/Statements/function*">Generatormethoden</a> können mit der kurzen Syntax ebenfalls definiert werden. Zu beachten ist, dass der Stern (*) in der kurzen Syntax nur vor dem Namen der Generatoreigenschaft geschrieben werden kann. <code>* g(){}</code> funktioniert, <code>g *(){}</code> funktioniert nicht.</p>
+
+<pre class="brush: js;highlight[12]">// Using a named property (pre-ES2015)
+var obj2 = {
+  g: function*() {
+    var index = 0;
+    while(true)
+      yield index++;
+  }
+};
+
+// The same object using shorthand syntax
+var obj2 = {
+  * g() {
+    var index = 0;
+    while(true)
+      yield index++;
+  }
+};
+
+var it = obj2.g();
+console.log(it.next().value); // 0
+console.log(it.next().value); // 1</pre>
+
+<h3 id="Methodendefinitionen_die_nicht_konstruiert_werden_können">Methodendefinitionen die nicht konstruiert werden können</h3>
+
+<p>Alle Methodendefinitionen die keine Konstruktoren sind werden einen {{jsxref("TypeError")}} erzeugen,  wenn man versucht sie zu instantieren.</p>
+
+<pre class="brush: js example-bad">var obj = {
+  method() {},
+};
+new obj.method; // TypeError: obj.method is not a constructor
+
+var obj = {
+  * g() {}
+};
+new obj.g; // TypeError: obj.g is not a constructor (changed in ES2016)
+</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Ein_einfacher_Testfall">Ein einfacher Testfall</h3>
+
+<pre class="brush: js;highlight[3]">var obj = {
+  a : "foo",
+  b(){ return this.a; }
+};
+console.log(obj.b()); // "foo"
+</pre>
+
+<h3 id="Berechnete_Eigenschaftsnamen">Berechnete Eigenschaftsnamen</h3>
+
+<p>Die Kurzschreib-Syntax unterstützt auch berechnete Eigenschaftsnamen.</p>
+
+<pre class="brush: js;highlight[4]">var bar = {
+  foo0 : function (){return 0;},
+  foo1(){return 1;},
+  ["foo" + 2](){return 2;},
+};
+
+console.log(bar.foo0()); // 0
+console.log(bar.foo1()); // 1
+console.log(bar.foo2()); // 2</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-method-definitions', 'Method definitions')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES7', '#sec-method-definitions', 'Method definitions')}}</td>
+   <td>{{Spec2('ES7')}}</td>
+   <td>Geändert, dass Generatormethoden ebenfalls nicht initialisierbar sind und einen Fehler schmeißen, wenn sie mit <code>new</code> eingesetzt werden.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Method definition shorthand</td>
+   <td>{{CompatChrome("39")}}</td>
+   <td>{{CompatGeckoDesktop("34")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("26")}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Generator methods are not constructable (ES2016)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("43")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Method definition shorthand</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("34")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Generator methods are not constructable (ES2016)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("43")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">SpiderMonkey spezifische Hinweise</h2>
+
+<ul>
+ <li>Vor SpiderMonkey 38 {{geckoRelease(38)}} waren "<code>get</code>" und "<code>set</code>" nicht valide Namen für Generatormethoden. Das wurde in {{bug(1073809)}} behoben.</li>
+ <li>Vor SpiderMonkey 41 {{geckoRelease(41)}} mussten geschweifte Klammern für Methoden nicht notwendiger weise benutzt werden. Jetzt sind sie vorausgesetzt, um konform zur ES2015 Spezifikation zu sein. Es wird ein {{jsxref("SyntaxError")}} in dieser und späteren Versionen erzeugt ({{bug(1150855)}}).
+  <pre class="brush: js example-bad">var o = {x() 12}; // SyntaxError</pre>
+ </li>
+ <li>Die Restriktion, dass Generatormethoden Konstuktoren sind wurde in SpiderMonkey 41 {{geckoRelease(41)}} implementiert. Dazu siehe auch {{bug(1059908)}} und {{bug(1166950)}}</li>
+</ul>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li><code><a href="/de/docs/Web/JavaScript/Reference/Functions/get">get</a></code></li>
+ <li><code><a href="/de/docs/Web/JavaScript/Reference/Functions/set">set</a></code></li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/functions/pfeilfunktionen/index.html b/files/de/web/javascript/reference/functions/pfeilfunktionen/index.html
new file mode 100644
index 0000000000..a29b5ea3cf
--- /dev/null
+++ b/files/de/web/javascript/reference/functions/pfeilfunktionen/index.html
@@ -0,0 +1,360 @@
+---
+title: Pfeilfunktionen
+slug: Web/JavaScript/Reference/Functions/Pfeilfunktionen
+tags:
+  - ECMAScript 2015
+  - Functions
+  - Intermediate
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Functions/Arrow_functions
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p>Der <strong>Ausdruck einer Pfeilfunktion</strong> hat eine kürzere Syntax als ein <a href="/de/docs/Web/JavaScript/Reference/Operators/function">Funktionsausdruck</a> und hat kein eigenes <code><a href="/de/docs/Web/JavaScript/Reference/Operators/this">this</a></code>, <a href="/de/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>, <a href="/de/docs/Web/JavaScript/Reference/Operators/super">super</a>, oder <a href="/de/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a>. Solche Funktionsausdrücke sind am besten für Funktionen, die nicht als Methode genutzt werden, geeignet und können nicht als Konstruktoren verwendet werden.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/functions-arrow.html")}}</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<h3 id="Basis_Syntax">Basis Syntax</h3>
+
+<pre class="syntaxbox">(param1, param2, …, paramN) =&gt; { statements }
+(param1, param2, …, paramN) =&gt; expression
+// gleich zu: =&gt; { return expression; }
+
+// Klammern sind optional, wenn nur ein Parametername vorhanden ist:
+(singleParam) =&gt; { statements }
+singleParam =&gt; { statements }
+
+// Die Parameterliste für eine parameterlose Funktion muss mit einem Klammernpaar geschrieben werden
+() =&gt; { statements }
+</pre>
+
+<h3 id="Fortgeschrittene_Syntax">Fortgeschrittene Syntax</h3>
+
+<pre class="syntaxbox">// Der Body kann eingeklammert werden, um ein Objektliteral Ausdruck zurück zu geben:
+params =&gt; ({foo: bar})
+
+// <a href="/de/docs/Web/JavaScript/Reference/Functions/rest_parameters">Rest Parameter</a> und <a href="/de/docs/Web/JavaScript/Reference/Functions/Default_parameters">Default Parameter</a> werden unterstützt
+(param1, param2, ...rest) =&gt; { statements }
+(param1 = defaultValue1, param2, …, paramN = defaultValueN) =&gt; {
+statements }
+
+// <a href="/de/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">Destrukturierung</a> in der Parameterliste ist ebenfalls unterstützt
+var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) =&gt; a + b + c;
+f(); // 6
+</pre>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Siehe auch <a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">"ES6 In Depth: Arrow functions" on hacks.mozilla.org</a>.</p>
+
+<p>Zwei Faktoren haben die Einführung von Pfeilfunktionen beeinflusst: kürzere Funktionen und dass <code>this</code> nicht gebunden ist.</p>
+
+<h3 id="Kürzere_Funktionen">Kürzere Funktionen</h3>
+
+<pre class="brush: js">var elements = [
+  "Hydrogen",
+  "Helium",
+  "Lithium",
+  "Beryllium"
+];
+
+elements.map(function(element) {
+  return element.length
+}); // [8, 6, 7, 9]
+
+elements.map(element =&gt; {
+  return element.length
+}); // [8, 6, 7, 9]
+
+elements.map(({length}) =&gt; length); // [8, 6, 7, 9]</pre>
+
+<h3 id="Keine_Bindung_von_this">Keine Bindung von <code>this</code></h3>
+
+<p>Vor (der Einführung von) Pfeilfunktionen definierte jede Funktion ihren eigenen <code><a href="/de/docs/Web/JavaScript/Reference/Operators/this">this</a></code>-Wert (d.h. ein neues Objekt im Falle eines Konstruktors; in <a href="/de/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a> Funktionsaufrufen nicht definiert; bzw. das kontextuelle Objekt, wenn die Funktion als eine "Objekt-Methode" aufgerufen wurde, usw.). Dies stellte sich innerhalb eines objektorientierten Programmierstils als lästig heraus.</p>
+
+<pre class="brush: js">function Person() {
+  // Der Person() Konstruktor definiert `this` als Instanz von sich selbst.
+  this.age = 0;
+
+  setInterval(function growUp() {
+    // Im nicht Strict Modus, definiert die growUp() Funktion `this`
+    // als das globale Objekt (weil das der Ort ist, an dem growUp() ausgeführt wird),
+    // das sich von dem `this`, welches vom Person() Konstruktor definiert wurde unterscheidet.
+    this.age++;
+  }, 1000);
+}
+
+var p = new Person();</pre>
+
+<p>In ECMAScript 3/5 konnte dies durch Zuweisung des Wertes von <code>this</code> an eine Variable, welche umschlossen werden konnte, behoben werden.</p>
+
+<pre class="brush: js">function Person() {
+  var that = this;
+  that.age = 0;
+
+  setInterval(function growUp() {
+    // Der Rückruf bezieht sich auf jene `that`-Variable,
+    // deren Wert das zu erwartende Objekt ist.
+    that.age++;
+  }, 1000);
+}</pre>
+
+<p>Alternativ könnte eine <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">gebundene Funktion</a> erstellt werden, sodass der passende <code>this</code>-Wert an die <code>growUp()</code>-Funktion übergeben würde.</p>
+
+<p>Eine Pfeilfunktion erstellt keinen eigenen <code>this</code> Kontext, wodurch <code>this</code> die ursprüngliche Bedeutung des umschließenden Kontextes trägt. Somit funktioniert der folgende Code wie erwartet.</p>
+
+<pre class="brush: js">function Person(){
+  this.age = 0;
+
+  setInterval(() =&gt; {
+    this.age++; // |this| bezieht sich entsprechend auf das Person-Objekt
+  }, 1000);
+}
+
+var p = new Person();</pre>
+
+<h4 id="Zusammenhang_mit_dem_Strict_Mode">Zusammenhang mit dem Strict Mode</h4>
+
+<p>Vorausgesetzt, dass <code>this</code> aus dem umschließenden lexikalischen Kontext kommt, werden <a href="/de/docs/Web/JavaScript/Reference/Strict_mode">Strict Mode</a> Regeln bezüglich <code>this</code> einfach ignoriert.</p>
+
+<pre class="brush: js">var f = () =&gt; {'use strict'; return this};
+f() === window; // oder das globale Objekt</pre>
+
+<p>Die restlichen strict mode Regeln verhalten sich normal.</p>
+
+<h4 id="Aufruf_durch_call_oder_apply">Aufruf durch call oder apply</h4>
+
+<p>Da <code>this</code><em> </em>in Pfeilfunktionen nicht gebunden ist, können <code>call()</code><em> </em>oder <code>apply()</code> Methoden nur Argumente übergeben; <code>this</code> wird ignoriert:</p>
+
+<pre class="brush: js">var adder = {
+  base : 1,
+
+  add : function(a) {
+    var f = v =&gt; v + this.base;
+    return f(a);
+  },
+
+  addThruCall: function(a) {
+    var f = v =&gt; v + this.base;
+    var b = {
+      base : 2
+    };
+
+    return f.call(b, a);
+  }
+};
+
+console.log(adder.add(1));         // Dies würde 2 ausgeben
+console.log(adder.addThruCall(1)); // Dies würde nach wie vor 2 ausgeben</pre>
+
+<h3 id="Keine_Bindung_von_Argumenten">Keine Bindung von Argumenten</h3>
+
+<p>Pfeilfunktionen haben kein eigenes <a href="/de/docs/Web/JavaScript/Reference/Functions/arguments"><code>arguments</code> Objekt</a>. Somit ist <code>arguments</code> einfach eine Referenz auf den Namen innerhalb des umschließenden Geltungsbereichs (scope).</p>
+
+<pre class="brush: js">var arguments = [1, 2, 3];
+var arr = () =&gt; arguments[0];
+
+arr(); // 1
+
+function foo(n) {
+  var f = () =&gt; arguments[0] + n; // implizite Argumenten-Bindung von <em>foo</em>
+  return f();
+}
+
+foo(1); // 2</pre>
+
+<p>In den meisten Fällen sind <a href="/de/docs/Web/JavaScript/Reference/Functions/rest_parameters">Rest Parameters</a> eine gute Alternative zum Einsatz des <code>arguments</code> Objektes:</p>
+
+<pre class="brush: js">function foo(n) {
+  var f = (...args) =&gt; args[0] + n;
+  return f(10);
+}
+
+foo(1); // 11</pre>
+
+<h3 id="Pfeilfunktionen_als_Methoden">Pfeilfunktionen als Methoden</h3>
+
+<p>Wie angegeben, sind Ausdrücke von Pfeilfunktionen am besten geeignet für nicht-methodische Funktionen. Man sehe, was geschieht, wenn versucht wird, sie als Methoden zu verwenden.</p>
+
+<pre class="brush: js">'use strict';
+
+var obj = {
+  i: 10,
+  b: () =&gt; console.log(this.i, this),
+  c: function() {
+    console.log( this.i, this)
+  }
+}
+obj.b(); // gibt undefined, Window {...} aus (oder das globale Objekt)
+obj.c(); // gibt 10, Object {...} aus</pre>
+
+<p>Pfeilfunktionen definieren (binden sozusagen) kein eigenes <code>this</code>. Ein anderes Beispiel, das {{jsxref("Object.defineProperty()")}} betrifft:</p>
+
+<pre class="brush: js">'use strict';
+
+var obj = {
+  a: 10
+};
+
+Object.defineProperty(obj, "b", {
+  get: () =&gt; {
+    console.log(this.a, typeof this.a, this);
+    return this.a+10; // stellt das globale Objekt 'Window' dar, 'this.a' gibt daher 'undefined' zurück
+  }
+});
+</pre>
+
+<h3 id="Verwendung_des_new_Operators">Verwendung des <code>new</code> Operators</h3>
+
+<p>Pfeilfunktionen können nicht als Konstruktoren verwendet werden. Sie führen zu einem Fehler, wenn auf ihnen ein <code>new</code> angewendet wird.</p>
+
+<pre class="brush: js">var Foo = () =&gt; {};
+var foo = new Foo(); // TypeError: Foo is not a constructor
+</pre>
+
+<h3 id="Einsatz_der_prototype_Eigenschaft">Einsatz der <code>prototype</code> Eigenschaft</h3>
+
+<p>Pfeilfunktionen haben keine <code>prototype</code> Eigenschaft.</p>
+
+<pre class="brush: js">var Foo = () =&gt; {};
+console.log(Foo.prototype); // undefined
+</pre>
+
+<h3 id="Verwendung_des_Schlüsselwortes_yield">Verwendung des Schlüsselwortes <code>yield</code></h3>
+
+<p>Das <code><a href="/de/docs/Web/JavaScript/Reference/Operators/yield">yield</a></code>-Schlüsselwort sollte im Körper einer Pfeilfunktion nicht verwendet werden (außer wenn dies innerhalb von darin weiter verschachtelten Funktionen erlaubt ist). Als Folge können Pfeilfunktionen nicht als Generatoren verwendet werden.</p>
+
+<h2 id="Funktionskörper">Funktionskörper</h2>
+
+<p>Pfeilfunktionen können entweder einen "knappen" oder einen gewöhnlichen "Blockkörper" haben.</p>
+
+<p>In einem knappen Körper ist lediglich ein Ausdruck nötig und eine implizite Rückgabe wird angehängt. In einem Blockkörper muss eine explizite Rückgabe-Anweisung verwendet werden.</p>
+
+<pre class="brush: js">var func = x =&gt; x * x;
+// knappe Syntax, implizierte Rückgabe
+
+var func = (x, y) =&gt; { return x + y; };
+// mit Blockkörper, explizite Rückgabe wird benötigt
+</pre>
+
+<h2 id="Rückgabe_von_Objekt-Literalen">Rückgabe von Objekt-Literalen</h2>
+
+<p>Man bedenke, dass die Rückgabe von Objekt-Literalen unter Verwendung der knappen Syntax <code>params =&gt; {object:literal}</code> nicht so ausgeführt wird, wie man es erwarten würde:</p>
+
+<pre class="brush: js">var func = () =&gt; {  foo: 1  };
+// Der Aufruf von func() gibt undefined zurück!
+
+var func = () =&gt; {  foo: function() {}  };
+// SyntaxError: function-Anweisung erfordert einen Namen</pre>
+
+<p>Der Grund dafür ist, dass der Code in geschweiften Klammern ({}) als eine Sequenz von Anweisungen übersetzt wird (d.h. foo wird als Bezeichner behandelt und nicht als Schlüssel eines Objekt-Literals).</p>
+
+<p>Man bedenke, das Objekt-Literal in Klammern zu setzen:</p>
+
+<pre class="brush: js">var func = () =&gt; ({ foo: 1 });</pre>
+
+<h2 id="Zeilenumbruch">Zeilenumbruch</h2>
+
+<p>Pfeilfunktionen können keinen Zeilenumbruch zwischen Parametern und dem Pfeil haben.</p>
+
+<pre class="brush: js">var func = ()
+           =&gt; 1;
+// SyntaxError: Ausdruck erwartet, '=&gt;' erhalten</pre>
+
+<h2 id="Übersetzungsreihenfolge">Übersetzungsreihenfolge</h2>
+
+<p>Der Pfeil innerhalb einer Pfeilfunktion ist kein Operator. Allerdings haben Pfeilfunktionen im Vergleich zu gewöhnlichen Funktionen besondere Übersetzungsregeln, welche mit der Priorität von Operatoren (<a href="/de/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">operator precedence</a>) anders interagieren.</p>
+
+<pre class="brush: js">let callback;
+
+callback = callback || function() {}; // ok
+
+callback = callback || () =&gt; {};
+// SyntaxError: invalid arrow-function arguments
+
+callback = callback || (() =&gt; {});    // ok
+</pre>
+
+<h2 id="Weitere_Beispiele">Weitere Beispiele</h2>
+
+<pre class="brush: js">// Eine leere Pfeilfunktion gibt undefined zurück
+let empty = () =&gt; {};
+
+(() =&gt; "foobar")()
+// Gibt "foobar" zurück
+// (Das ist eine Immediately Invoked Function Expression
+// siehe IIFE im Glossar
+
+var simple = a =&gt; a &gt; 15 ? 15 : a;
+simple(16); // 15
+simple(10); // 10
+
+let max = (a, b) =&gt; a &gt; b ? a : b;
+
+// Einfaches filtering, mapping, ... von Arrays
+
+var arr = [5, 6, 13, 0, 1, 18, 23];
+
+var sum = arr.reduce((a, b) =&gt; a + b);
+// 66
+
+var even = arr.filter(v =&gt; v % 2 == 0);
+// [6, 0, 18]
+
+var double = arr.map(v =&gt; v * 2);
+// [10, 12, 26, 0, 2, 36, 46]
+
+// Weitere knappe Zusicherungsketten (promise chains)
+promise.then(a =&gt; {
+  // ...
+}).then(b =&gt; {
+   // ...
+});
+
+// Parameterlose Pfeilfunktionen, welche visuell einfacher zu verstehen sind
+setTimeout( _ =&gt; {
+  console.log("I happen sooner");
+  setTimeout( _ =&gt; {
+    // deeper code
+    console.log("I happen later");
+  }, 1);
+}, 1);</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.functions.arrow_functions")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">"ES6 In Depth: Arrow functions" on hacks.mozilla.org</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/functions/rest_parameter/index.html b/files/de/web/javascript/reference/functions/rest_parameter/index.html
new file mode 100644
index 0000000000..a529c7b1d6
--- /dev/null
+++ b/files/de/web/javascript/reference/functions/rest_parameter/index.html
@@ -0,0 +1,167 @@
+---
+title: Rest Parameter
+slug: Web/JavaScript/Reference/Functions/rest_parameter
+tags:
+  - Functions
+  - JavaScript
+  - Rest
+  - Rest Parameter
+translation_of: Web/JavaScript/Reference/Functions/rest_parameters
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p>Mit der <strong>Rest Parameter</strong> Syntax kann man beliebig viele Parameter als Array empfangen.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/functions-restparameters.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">function f(a, b, ...restArgs) {
+  // ...
+}
+</pre>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Wenn vor dem letzten Parameter einer Funktion <code>...</code> steht wird aus diesem Parameter ein Array von <code>0</code> (inklusiv) bis zu <code>restArgs.length</code> (exklusiv), welches weitere der Funktion übergebene Parameter enthält.</p>
+
+<p>Im oberen Beispiel enthält das <code>restArgs</code> alle weiteren Argumente außer die ersten beiden, da diese bereits von den Variablen <code>a</code> und <code>b</code> erfasst werden.</p>
+
+<h3 id="Unterschiede_zwischen_Rest_Parametern_und_dem_arguments_Objekt">Unterschiede zwischen Rest Parametern und dem <code>arguments</code> Objekt</h3>
+
+<p>Es gibt drei Hauptunterschiede zwischen Rest Parametern und dem <a href="/de/docs/Web/JavaScript/Reference/Functions/arguments" title="arguments"><code>arguments</code></a> Objekt:</p>
+
+<ul>
+ <li>Rest Parameter sind nur die jenigen, die zu einem Namen gehören (z. B. in Funktionsausdrücken formal definierte Parameter), während das <code>arguments</code> Objekt alle übergebenen Argumente einer Funktion enthällt.</li>
+ <li>Das <code>arguments</code> Objekt ist kein echtes Array, während Rest Parameter eine <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Array" title="Array"><code>Array</code></a> sind, was bedeutet, dass Methoden wie <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Array/sort" title="Array sort method"><code>sort</code></a>, <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Array/map" title="Array map method"><code>map</code></a>, <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach" title="Array forEach method"><code>forEach</code></a> oder <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Array/pop" title="Array pop method"><code>pop</code></a> direkt angewendet werden können.</li>
+ <li>Das <code>arguments</code> Objekt hat zusätzliche, spezielle Funktionalität (wie die <code>callee</code> Eigenschaft).</li>
+</ul>
+
+<h3 id="Von_arguments_zu_einem_Array">Von <code>arguments</code> zu einem Array</h3>
+
+<p>Rest Parameter wurden eingeführt, um Standardcode zu reduzieren, welche beim Einsatz von <code>arguments</code> anfällt</p>
+
+<pre class="brush: js">// Before rest parameters, the following could be found:
+function f(a, b) {
+  var args = Array.prototype.slice.call(arguments, f.length);
+
+  // …
+}
+
+// to be equivalent of
+
+function f(a, b, ...args) {
+
+}
+</pre>
+
+<h3 id="Destrukturierte_Rest_Parameter">Destrukturierte Rest Parameter</h3>
+
+<p>Rest Parameter können destrukturiert werden, was bedeutet, dass sie in einzelne Variablen entpackt werden können. Siehe <a href="/de/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destrukturierende Zuweisung</a>.</p>
+
+<pre class="brush: js">function f(...[a, b, c]) {
+  return a + b + c;
+}
+
+f(1)          // NaN (b and c are undefined)
+f(1, 2, 3)    // 6
+f(1, 2, 3, 4) // 6 (the fourth parameter is not destructured)</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Weil <code>theArgs</code> ein Array ist, ist die Anzahl der Argumente mit der <code>length</code> Eigenschaft gegeben:</p>
+
+<pre class="brush: js">function fun1(...theArgs) {
+  console.log(theArgs.length);
+}
+
+fun1();  // 0
+fun1(5); // 1
+fun1(5, 6, 7); // 3
+</pre>
+
+<p>Im nächsten Beispiel wird ein Rest Parameter eingesetzt, um alle Argumente außer dem ersten in einem Array zu sammeln. Jedes wird dann mit dem ersten Argument multipliziert und als Array zurückgegeben:</p>
+
+<pre class="brush: js">function multiply(multiplier, ...theArgs) {
+  return theArgs.map(function(element) {
+    return multiplier * element;
+  });
+}
+
+var arr = multiply(2, 1, 2, 3);
+console.log(arr); // [2, 4, 6]
+</pre>
+
+<p>Das folgende Beispiel zeigt, dass <code>Array</code> Methoden auf Rest Parameter jedoch nicht auf <code>arguments</code> Objekten eingesetzt werden können:</p>
+
+<pre class="brush: js">function sortRestArgs(...theArgs) {
+  var sortedArgs = theArgs.sort();
+  return sortedArgs;
+}
+
+console.log(sortRestArgs(5, 3, 7, 1)); // shows 1, 3, 5, 7
+
+function sortArguments() {
+  var sortedArgs = arguments.sort();
+  return sortedArgs; // this will never happen
+}
+
+// throws a TypeError: arguments.sort is not a function
+console.log(sortArguments(5, 3, 7, 1));
+</pre>
+
+<p>Um <code>Array</code> Methoden auf einem <code>arguments</code> Objekt zu benutzen, muss dieses in ein echtes Array konvertiert werden.</p>
+
+<pre class="brush: js">function sortArguments() {
+  var args = Array.from(arguments);
+  var sortedArgs = args.sort();
+  return sortedArgs;
+}
+console.log(sortArguments(5, 3, 7, 1)); // 1, 3, 5, 7
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function-definitions', 'Function Definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initiale Definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("javascript.functions.rest_parameters")}}</p>
+</div>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Operators/Spread_operator" title="spread operator">Spread Syntax</a> (auch ‘<code>...</code>’)</li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Functions/arguments" title="arguments">Arguments Objekt</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Array" title="Array">Array</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Functions" title="Functions and function scope">Functions</a></li>
+ <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:rest_parameters">Original Vorschlag von ecmascript.org</a></li>
+ <li><a class="external" href="http://javascriptweblog.wordpress.com/2011/01/18/javascripts-arguments-object-and-beyond/">JavaScript arguments object and beyond</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">Destrukturierte Zuweisungen</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/functions/set/index.html b/files/de/web/javascript/reference/functions/set/index.html
new file mode 100644
index 0000000000..7b0e5fcd83
--- /dev/null
+++ b/files/de/web/javascript/reference/functions/set/index.html
@@ -0,0 +1,149 @@
+---
+title: Setter
+slug: Web/JavaScript/Reference/Functions/set
+tags:
+  - ECMAScript 5
+  - Functions
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Functions/set
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p>Die <strong><code>set</code></strong> Syntax bindet eine Objekteigenschaft an eine Funktion welche aufgerufen wird, wenn die Eigenschaft neu beschrieben wird.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/functions-setter.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">{set <em>prop</em>(<em>val</em>) { . . . }}
+{set [expression](<em>val</em>) { . . . }}</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>Der Name der Eigenschaft, die an die gegebene Funktion gebunden wird.</dd>
+</dl>
+
+<dl>
+ <dt><code>val</code></dt>
+ <dd>Ein Alias für die Variable, die den Wert enthält, der der Eigenschaft <code>prop</code> zugewiesen wird.</dd>
+ <dt>expression</dt>
+ <dd>Beginnend mit ECMAScript 2015, kann auch ein Ausdruck für einen berechneten Eigenschaftsnamen genutzt werden, der an die Funktion gebunden wird.</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>In JavaScript kann ein <em>Setter</em> benutzt werden, um eine Funktion aufzurufen, wenn eine Eigenschaft geändert werden soll. Setter werden oft in Verbindung mit Gettern als Pseudoeigenschaft benutzt. Es ist nicht möglich gleichzeitig einen Setter auf einer Eigenschaft zu haben, die eine tatsächlichen Wert hält.</p>
+
+<p>Das folgende ist zu beachten, wenn mit der <code>set</code> Syntax gearbeitet wird:</p>
+
+<div>
+<ul>
+ <li>Sie kann ein Bezeichner enthalten, welcher entweder eine Zahl oder ein String ist</li>
+ <li>Sie muss exakt einen Parameter haben (siehe <a class="external" href="http://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/" rel="external nofollow">Incompatible <abbr title="ECMAScript 5th edition">ES5</abbr> change: literal getter and setter functions must now have exactly zero or one arguments</a> für mehr Informationen);</li>
+ <li>Sie darf nicht in einem Objektliteral mit einem anderen <code>set</code> oder einen Dateneintrag mit der gleichen Eigenschaft geben. (<code>{ set x(v) { }, set x(v) { } }</code> und <code>{ x: ..., set x(v) { } }</code> sind verboten)</li>
+</ul>
+</div>
+
+<p>Ein Setter kann mit dem <a href="/de/docs/Web/JavaScript/Reference/Operators/delete" title="en-US/docs/JavaScript/Reference/Operators/Special/delete"><code>delete</code></a> Operator gelöscht werden.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Definieren_eines_Setters_in_einem_neuen_Objekt_in_der_Objektinitialisierung">Definieren eines Setters in einem neuen Objekt in der Objektinitialisierung</h3>
+
+<p>Das folgende definiert eine Pseudoeigenschaft <code>current</code> im Objekt <code>language</code>, die bei einer Zuweisung einen Wert in das <code>log</code> Array hinzufügt:</p>
+
+<pre class="brush: js">var language = {
+  set current(name) {
+    this.log.push(name);
+  },
+  log: []
+}
+
+language.current = 'EN';
+console.log(language.log); // ['EN']
+
+language.current = 'FA';
+console.log(language.log); // ['EN', 'FA']
+</pre>
+
+<p>Zu beachten ist, dass <code>current</code> nicht definiert ist und der Zugriff auf diese <code>undefined</code> als Ergebnis liefert.</p>
+
+<h3 id="Löschen_eines_Setter_mit_dem_delete_Operator">Löschen eines Setter mit dem <code>delete</code> Operator</h3>
+
+<p>Wenn ein Setter gelöscht werden soll, muss man einfach <code><a href="/de/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code> benutzen:</p>
+
+<pre class="brush: js">delete o.current;
+</pre>
+
+<h3 id="Definieren_eines_Setters_auf_einem_existierenden_Objekts_mit_defineProperty">Definieren eines Setters auf einem existierenden Objekts mit <code>defineProperty</code></h3>
+
+<p>Um einen Setter später zu einem existierenden Objekt hinzuzufügen, benutzt man {{jsxref("Object.defineProperty()")}}.</p>
+
+<pre class="brush: js">var o = {a: 0};
+
+Object.defineProperty(o, 'b', { set: function(x) { this.a = x / 2; } });
+
+o.b = 10; // Runs the setter, which assigns 10 / 2 (5) to the 'a' property
+console.log(o.a) // 5</pre>
+
+<h3 id="Einsatz_eines_berechneten_Eigenschaftsnamen">Einsatz eines berechneten Eigenschaftsnamen</h3>
+
+<pre class="brush: js">var expr = 'foo';
+
+var obj = {
+  baz: 'bar',
+  set [expr](v) { this.baz = v; }
+};
+
+console.log(obj.baz); // "bar"
+obj.foo = 'baz';      // run the setter
+console.log(obj.baz); // "baz"
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-method-definitions', 'Method definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Berechnete Eigenschaftsnamen hinzugefügt.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.functions.set")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Functions/get">Getter</a></li>
+ <li>{{jsxref("Operators/delete", "delete")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.defineGetter", "__defineGetter__")}}</li>
+ <li>{{jsxref("Object.defineSetter", "__defineSetter__")}}</li>
+ <li><a href="/de/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Defining Getters and Setters</a> im JavaScript Guide</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/array/@@iterator/index.html b/files/de/web/javascript/reference/global_objects/array/@@iterator/index.html
new file mode 100644
index 0000000000..790a7abcff
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/array/@@iterator/index.html
@@ -0,0 +1,89 @@
+---
+title: 'Array.prototype[@@iterator]()'
+slug: Web/JavaScript/Reference/Global_Objects/Array/@@iterator
+tags:
+  - Array
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@iterator
+---
+<div>{{JSRef}}</div>
+
+<div>Der Initialwert der <code><strong>@@iterator</strong></code> Eigenschaft ist das selbe Funktionsobjekt wie der Initialwert der {{jsxref("Array.prototype.values()", "values()")}} Eigenschaft.</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>arr</var>[Symbol.iterator]()</code></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Der Initialwert für den {{jsxref("Array.prototype.values()", "values()")}} <strong>Iterator</strong>. Im Standardfall gibt <code>arr[Symbol.iterator]</code> die Funktion von {{jsxref("Array.prototype.values()", "values()")}}  zurück.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Iterieren_mit_einer_for...of_Schleife">Iterieren mit einer <code>for...of</code> Schleife</h3>
+
+<pre class="brush: js">var arr = ['w', 'y', 'k', 'o', 'p'];
+var eArr = arr[Symbol.iterator]();
+// your browser must support for..of loop
+// and let-scoped variables in for loops
+for (let letter of eArr) {
+  console.log(letter);
+}
+</pre>
+
+<h3 id="Alternative_Iteration">Alternative Iteration</h3>
+
+<pre class="brush: js">var arr = ['w', 'y', 'k', 'o', 'p'];
+var eArr = arr[Symbol.iterator]();
+console.log(eArr.next().value); // w
+console.log(eArr.next().value); // y
+console.log(eArr.next().value); // k
+console.log(eArr.next().value); // o
+console.log(eArr.next().value); // p
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.@@iterator")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.keys()")}}</li>
+ <li>{{jsxref("Array.prototype.entries()")}}</li>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+ <li>{{jsxref("Array.prototype.values()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/array/@@species/index.html b/files/de/web/javascript/reference/global_objects/array/@@species/index.html
new file mode 100644
index 0000000000..c4de8a7978
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/array/@@species/index.html
@@ -0,0 +1,76 @@
+---
+title: 'get Array[@@species]'
+slug: Web/JavaScript/Reference/Global_Objects/Array/@@species
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@species
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>Array[@@species]</strong></code> Zugriffseigenschaft gibt den Array Konstruktor zurück.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Array[Symbol.species]
+</pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Der {{jsxref("Array")}} Konstruktor.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>species</code> Zugriffseigenschaft gibt den Standard-Konstruktor des <code>Array</code> Objekts zurück. Unterklassen können die Zuweisung Überschreiben, um die Konstruktorzuweisung ändern.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Die <code>species</code> Eigenschaft gibt die Standard-Konstruktor-Funktion, welches der <code>Array</code> Konstruktor für <code>Array</code> Objekte ist.</p>
+
+<pre class="brush: js">Array[Symbol.species]; // function Array()</pre>
+
+<p>In einem abgeleiteten Collection Objekt (z. B. ein benutzerdefiniertes Array <code>MyArray</code>), ist der <code>MyArray</code> der species des <code>MyArray</code> Konstruktors. Manchmal möchte man in abgeleiteten Klassenden Oberklassenkonstruktor zurückgeben. Dieses kann mit Überschreiben erreicht werden:</p>
+
+<pre class="brush: js">class MyArray extends Array {
+  // Overwrite MyArray species to the parent Array constructor
+  static get [Symbol.species]() { return Array; }
+}</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-get-array-@@species', 'get Array [ @@species ]')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-array-@@species', 'get Array [ @@species ]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.@@species")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Symbol.species")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/array/@@unscopables/index.html b/files/de/web/javascript/reference/global_objects/array/@@unscopables/index.html
new file mode 100644
index 0000000000..2cb4b51b11
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/array/@@unscopables/index.html
@@ -0,0 +1,76 @@
+---
+title: 'Array.prototype[@@unscopables]'
+slug: Web/JavaScript/Reference/Global_Objects/Array/@@unscopables
+tags:
+  - Array
+  - ECMAScript 2015
+  - JavaScript
+  - Property
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@unscopables
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>@@unscopable</strong></code> Symbol Eigenschaft enthält Namen von Eigenschaften, welche vor der ES2015 Version nicht im ECMAScript Standard waren. Diese Eigenschaften werden bei <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/with">with</a></code> Statement Bindungen ignoriert.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>arr</var>[Symbol.unscopables]</pre>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Der Standard Array Eigenschaften, die von den <code>with</code> Bindungen ausgenommen werden, sind: <code>copyWithin</code>, <code>entries</code>, <code>fill</code>, <code>find</code>, <code>findIndex</code>, <code>includes</code>, <code>keys</code>, und <code>values</code>.</p>
+
+<p>Siehe {{jsxref("Symbol.unscopables")}} für das setzten von <code>unscopables</code> für eigene Objekte</p>
+
+<p>{{js_property_attributes(0,0,1)}}</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Der Folgende Quelltext funktioniert in ES5 und niedriger. Jedoch wurde in ECMAScript 2015 und Später die {{jsxref("Array.prototype.keys()")}} eingeführt. Das bedeutet, dass in <code>with</code> Umgebungen "keys" jetzt eine Methode und keine Variable ist. Hier kommt die eingebaute <code>@@unscopables</code> <code>Array.prototype[@@unscopables]</code> Symboleigenschaft ins Spiel und verhindert, dass einige der Array Methoden in einer <code>with</code> Anweisung gescoped werden.</p>
+
+<pre class="brush: js">var keys = [];
+
+with (Array.prototype) {
+  keys.push('something');
+}
+
+Object.keys(Array.prototype[Symbol.unscopables]);
+// ["copyWithin", "entries", "fill", "find", "findIndex",
+//  "includes", "keys", "values"]</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Komment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.prototype-@@unscopables', 'Array.prototype[@@unscopables]')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype-@@unscopables', 'Array.prototype[@@unscopables]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.@@unscopables")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Symbol.unscopables")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/array/concat/index.html b/files/de/web/javascript/reference/global_objects/array/concat/index.html
new file mode 100644
index 0000000000..6bd46675da
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/array/concat/index.html
@@ -0,0 +1,156 @@
+---
+title: Array.prototype.concat()
+slug: Web/JavaScript/Reference/Global_Objects/Array/concat
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/concat
+---
+<div>{{JSRef}}</div>
+
+<p>Die Methode <strong><code>concat()</code></strong> führt zwei oder mehr Arrays zu einem zusammen. Die Methode ändert nicht die existierenden Arrays, sondern gibt stattdessen ein neues zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-concat.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <var>new_array</var> = <var>old_array</var>.concat(<var>value1</var>[, <var>value2</var>[, ...[, <var>valueN</var>]]])</pre>
+
+<h3 id="Parameters" name="Parameters">Parameter</h3>
+
+<dl>
+ <dt><code>value<em>N</em></code></dt>
+ <dd>Arrays und/oder Werte, die mit dem aktuellen zu einem neuen Array zusammenführt werden sollen.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine neue {{jsxref("Array")}} Instanz.</p>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p><code>concat</code> generiert ein neues Array. Dieses besteht aus den Elementen des Arrays, auf dem diese Methode aufgerufen wurde, gefolgt von dem Element oder den Elementen, die als Argument übergeben wurden.</p>
+
+<p>Die <code>concat </code>Methode verändert nicht das <code>this</code> Objekt oder eines der übergebenen Argumente, sondern gibt eine flache Kopie (<em>shallow copy</em>) zurück, die Kopien der Elemente in den ursprünglichen Arrays enthält. Elemente der ursprünglichen Arrays werden folgendermaßen in das neue Array kopiert:</p>
+
+<ul>
+ <li>Objektreferenzen (und nicht das eigentliche Objekt): <code>concat</code> kopiert Objektreferenzen in das neue Array. Sowohl das ursprüngliche Array als auch das neue Array zeigen auf das gleiche Objekt. Das heißt, wenn ein referiertes Objekt verändert wird, sind diese Änderungen sowohl im neuen als auch in den ursprünglichen Arrays sichtbar.</li>
+ <li>Zeichenketten (Strings), Zahlen und Booleane (nicht {{jsxref("Global_Objects/String", "String")}}, {{jsxref("Global_Objects/Number", "Number")}} und {{jsxref("Global_Objects/Boolean", "Boolean")}} Objekte): <code>concat</code> kopiert die Werte von Strings und Zahlen in das neue Array.</li>
+</ul>
+
+<div class="note">
+<p><strong>Anmerkung:</strong> Die Zusammenführung von Arrays und Werten verändert die Ausgangswerte und -objekte nicht. Etwaige weitere Operationen auf dem neuen Array (nur wenn Elemente keine Objekt-Referenz sind) haben keine Auswirkungen auf die Ausgangsarrays und umgekehrt.</p>
+</div>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<h3 id="Example:_Concatenating_two_arrays" name="Example:_Concatenating_two_arrays">Zusammenführen zweier Arrays</h3>
+
+<p>Der folgende Quellcode führt zwei Arrays zusammen:</p>
+
+<pre class="brush: js">var alpha = ['a', 'b', 'c'],;
+var numeric = [1, 2, 3];
+
+alpha.concat(numeric);
+// Result: ['a', 'b', 'c', 1, 2, 3]
+</pre>
+
+<h3 id="Example:_Concatenating_three_arrays" name="Example:_Concatenating_three_arrays">Zusammenführen von drei Arrays</h3>
+
+<p>Der folgende Quellcode führt drei Arrays zusammen:</p>
+
+<pre class="brush: js">var num1 = [1, 2, 3],
+    num2 = [4, 5, 6],
+    num3 = [7, 8, 9];
+
+var nums = num1.concat(num2, num3);
+
+console.log(nums);
+// Result: [1, 2, 3, 4, 5, 6, 7, 8, 9]
+</pre>
+
+<h3 id="Example:_Concatenating_three_arrays" name="Example:_Concatenating_three_arrays">Zusammenführen von Werten in ein Array</h3>
+
+<p>Der folgende Quellcode führt drei Werte in ein Array zusammen:</p>
+
+<pre class="brush: js">var alpha = ['a', 'b', 'c'];
+
+var alphaNumeric = alpha.concat(1, [2, 3]);
+
+console.log(alphaNumeric);
+// Result: ['a', 'b', 'c', 1, 2, 3]
+</pre>
+
+<h3 id="Zusammenführen_von_geschachtelten_Arrays">Zusammenführen von geschachtelten Arrays</h3>
+
+<p>Der folgende Quellcode führt inneinander geschachtelte Array zusammen und demonstriert die Erhaltung der Referenzen:</p>
+
+<pre class="brush: js">var num1 = [[1]];
+var num2 = [2, [3]];
+
+var nums = num1.concat(num2);
+
+console.log(nums);
+// result in [[1], 2, [3]]
+
+// modify the first element of num1
+num1[0].push(4);
+
+console.log(nums);
+// results in [[1, 4], 2, [3]];
+</pre>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.4', 'Array.prototype.concat')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.concat', 'Array.prototype.concat')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.concat', 'Array.prototype.concat')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.concat")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Array.push", "push")}} / {{jsxref("Array.pop", "pop")}} — Hinzufügen/Entfernen eines Elemente am Ende des Arrays.</li>
+ <li>{{jsxref("Array.unshift", "unshift")}} / {{jsxref("Array.shift", "shift")}} — Hinzufügen/Entfernen eines Elemente am Beginn des Arrays.</li>
+ <li>{{jsxref("Array.splice", "splice")}} — Hinzufügen/Entfernen eines Elemente an der angegebenen Stelle im Array.</li>
+ <li>{{jsxref("String.prototype.concat()")}}</li>
+ <li>{{jsxref("Symbol.isConcatSpreadable")}} – Kontrolle über flaches Konkatinieren.</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/array/copywithin/index.html b/files/de/web/javascript/reference/global_objects/array/copywithin/index.html
new file mode 100644
index 0000000000..6a7e9391d6
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/array/copywithin/index.html
@@ -0,0 +1,187 @@
+---
+title: Array.prototype.copyWithin()
+slug: Web/JavaScript/Reference/Global_Objects/Array/copyWithin
+tags:
+  - Array
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/copyWithin
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>copyWithin()</strong></code> Methode kopiert einen Teil eines Arrays in eine andere Stelle des gleichen Arrays und gibt das Array zurück, ohne die Länge des Arrays zu verändern.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-copywithin.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>arr</var>.copyWithin(<var>target</var>)
+<var>arr</var>.copyWithin(<var>target</var>, <var>start)
+arr</var>.copyWithin(<var>target</var>, <var>start</var>, <var>end</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parameter</h3>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>Null-Basierter Index an dem die kopierte Sequenz kopiert wird. Wenn <code>target</code> negativ ist, wird vom Ende angefangen zu zählen.</dd>
+ <dd>Wenn <code>target</code> glößer oder gleich <code>arr.length</code> ist, wird nicht kopiert. Wenn <code>target</code> nach <code>start</code> positioniert ist, wird die kopierte Sequenz gekürzt, um in die Länge des Arrays zu passen.</dd>
+ <dt><code>start</code> {{optional_inline}}</dt>
+ <dd>Null-Basierter Index an dem das Kopieren begonnen werden soll. Wenn <code>start</code> negativ ist, wird vom Ende angefangen zu zählen.</dd>
+ <dd>Wenn <code>start</code> nicht angegeben wird, nutzt <code>copyWithin</code> den Standardwert 0.</dd>
+ <dt><code>end</code> {{optional_inline}}</dt>
+ <dd>Null-Basierter Index an dem das Kopieren beendet werden soll. <code>end</code> ist exklusiv und wird deswegen nicht mitkopiert. Wenn <code>end</code> negativ ist, wird vom Ende angefangen zu zählen.</dd>
+ <dd>Wenn <code>end</code> nicht angegeben wird, nutzt <code>copyWithin</code> den Standardwert <code>arr.length</code>.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Das geänderte Array</p>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p><code>copyWithin</code> arbeitet wie die <code>memcpy</code> Funktion in C und C++ und ist eine hoch perfomante Methode zum Verschieben von Daten in einem {{jsxref("Array")}} oder {{jsxref("TypedArray")}}. Die Sequenz wird in einer Operation kopiert und eingefügt; Die eingefügte Sequenz wird den kopierten Wert haben, auch wenn sich die Regionen im Array überschneiden.</p>
+
+<p>Die <code>copyWithin</code> Funktion ist absichtlich generisch. Es wird nicht vorausgesetzt, dass <code>this</code> ein {{jsxref("Array")}} Objekt ist.</p>
+
+<p>Die <code>copyWithin</code> Methode ist eine veränderbare Methode. Sie ändert nichts an der Länge von <code>this</code>, aber sie ändert den Inhalt von <code>this</code> und erstellt neue Eigenschaften, wenn es notwendig ist.</p>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<pre class="brush: js">[1, 2, 3, 4, 5].copyWithin(-2);
+// [1, 2, 3, 1, 2]
+
+[1, 2, 3, 4, 5].copyWithin(0, 3);
+// [4, 5, 3, 4, 5]
+
+[1, 2, 3, 4, 5].copyWithin(0, 3, 4);
+// [4, 2, 3, 4, 5]
+
+[1, 2, 3, 4, 5].copyWithin(-2, -3, -1);
+// [1, 2, 3, 3, 5]
+
+[].copyWithin.call({length: 5, 3: 1}, 0, 3);
+// {0: 1, 3: 1, length: 5}
+
+// ES2015 Typed-Arrays sind Unterklassen von Array
+var i32a = new Int32Array([1, 2, 3, 4, 5]);
+
+i32a.copyWithin(0, 2);
+// Int32Array [3, 4, 5, 4, 5]
+
+// Für Plattformen die noch nicht ES6 unterstützen:
+[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
+// Int32Array [4, 2, 3, 4, 5]
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Polyfill</h2>
+
+<pre>if (!Array.prototype.copyWithin) {
+  Array.prototype.copyWithin = function(target, start/*, end*/) {
+    // Steps 1-2.
+    if (this == null) {
+      throw new TypeError('this is null or not defined');
+    }
+
+    var O = Object(this);
+
+    // Steps 3-5.
+    var len = O.length &gt;&gt;&gt; 0;
+
+    // Steps 6-8.
+    var relativeTarget = target &gt;&gt; 0;
+
+    var to = relativeTarget &lt; 0 ?
+      Math.max(len + relativeTarget, 0) :
+      Math.min(relativeTarget, len);
+
+    // Steps 9-11.
+    var relativeStart = start &gt;&gt; 0;
+
+    var from = relativeStart &lt; 0 ?
+      Math.max(len + relativeStart, 0) :
+      Math.min(relativeStart, len);
+
+    // Steps 12-14.
+    var end = arguments[2];
+    var relativeEnd = end === undefined ? len : end &gt;&gt; 0;
+
+    var final = relativeEnd &lt; 0 ?
+      Math.max(len + relativeEnd, 0) :
+      Math.min(relativeEnd, len);
+
+    // Step 15.
+    var count = Math.min(final - from, len - to);
+
+    // Steps 16-17.
+    var direction = 1;
+
+    if (from &lt; to &amp;&amp; to &lt; (from + count)) {
+      direction = -1;
+      from += count - 1;
+      to += count - 1;
+    }
+
+    // Step 18.
+    while (count &gt; 0) {
+      if (from in O) {
+        O[to] = O[from];
+      } else {
+        delete O[to];
+      }
+
+      from += direction;
+      to += direction;
+      count--;
+    }
+
+    // Step 19.
+    return O;
+  };
+}</pre>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2016', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}</td>
+   <td>{{Spec2('ES2016')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.copyWithin")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/array/entries/index.html b/files/de/web/javascript/reference/global_objects/array/entries/index.html
new file mode 100644
index 0000000000..2bd4fb9942
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/array/entries/index.html
@@ -0,0 +1,84 @@
+---
+title: Array.prototype.entries()
+slug: Web/JavaScript/Reference/Global_Objects/Array/entries
+tags:
+  - Array
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/entries
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>entries()</strong></code> Methode gibt ein neues <code><strong>Array Iterator</strong></code> Objekt zurück, das Schlüssel-Wert-Paare für jeden Index im Array enthält.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-entries.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>arr</var>.entries()</code></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein neues {{jsxref("Array")}}-iterator Objekt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_einer_for…of_Schleife">Einsatz einer <a href="/de/docs/Web/JavaScript/Reference/Statements/for...of">for…of</a> Schleife</h3>
+
+<pre class="brush:js">var a = ['a', 'b', 'c'];
+var iterator = a.entries();
+
+for (let e of iterator) {
+  console.log(e);
+}
+// [0, 'a']
+// [1, 'b']
+// [2, 'c']
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.entries', 'Array.prototype.entries')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.entries', 'Array.prototype.entries')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.entries")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.keys()")}}</li>
+ <li>{{jsxref("Array.prototype.values()")}}</li>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Iteration_protocols">Iteration protocols</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/array/every/index.html b/files/de/web/javascript/reference/global_objects/array/every/index.html
new file mode 100644
index 0000000000..a29a0e4e0c
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/array/every/index.html
@@ -0,0 +1,195 @@
+---
+title: Array.prototype.every()
+slug: Web/JavaScript/Reference/Global_Objects/Array/every
+tags:
+  - Array
+  - ECMAScript 5
+  - JavaScript
+  - Method
+  - Prototype
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/every
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>every()</strong></code> Methode testet ob alle Elemente in einem Array einen Test bestehen, welcher mittels einer implementierten Funktion bereitgestellt wird.</p>
+
+<div class="note">
+<p>Hinweis: Diese Methode gibt <code>true</code> für jede Bedingung bei einem leeren Array zurück.</p>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/js/array-every.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>arr</var>.every(<var>callback</var>[, <var>thisArg</var>])</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Funktion welche jedes Element testet, mit drei Argumenten:
+ <dl>
+  <dt><code>currentValue</code> (required)</dt>
+  <dd>Der aktuelle Wert des Arrays.</dd>
+  <dt><code>index</code>{{Optional_inline}}</dt>
+  <dd>Der Index des aktuellen Elementes im Array.</dd>
+  <dt><code>array</code>{{Optional_inline}}</dt>
+  <dd>Das Array auf welchem <code>every</code> aufgerufen wurde.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code>{{Optional_inline}}</dt>
+ <dd>Optional. Wert welcher als <code>this</code> in der <code>callback </code> Funktion benutzt wird.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p><code><strong>true</strong></code> wenn die callback-Funktion einen {{Glossary("truthy")}} Wert für jedes Array-Element zurückgibt, andernfalls <code><strong>false</strong></code>.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>every</code> Methode führt die übergebene <code>callback</code> Funktion für jedes Element in dem Array aus, solange die <code>callback</code> Funktion keinen {{Glossary("falsy")}} Wert zurückgibt. Wenn ein solches Element gefunden wird gibt die <code>every</code> Methode <code>false</code> zurück. Anderfalls, wenn<code> callback</code> für jedes Element einen {{Glossary("truthy")}} Wert zurück gibt, gibt die Funktion <code>every</code> <code>true</code> zurück. Die <code>callback</code> Funktion wird nur für Indizes im Array aufgerufen, denen ein Wert zugewiesen wurde; sie wird nicht aufgerufen für Indizes, die gelöscht wurden, oder welche, die nie beschrieben wurden.</p>
+
+<p>Die <code>callback</code> Funktion wird mit drei Argumenten aufgerufen: Der Wert eines Elements, der Index des Elements und Array auf dem <code>every</code> aufgerufen wurde.</p>
+
+<p>Wenn der <code>thisArg</code> Parameter von <code>every</code> angegeben wird, wird auf diesem Objekt die <code>callback</code> Funktion aufgerufen und dieses Objekt kann mit <code>this</code> aufgerufen werden. Anderfalls wird der Wert <code>undefined</code> für den Einsatz von <code>this</code> übergeben. Der <code>this</code> Wert ist nur in der <code>callback</code> Funktion verfügbar und wird nach den <a href="/de/docs/Web/JavaScript/Reference/Operators/this">normalen Regeln für das ermitteln von this</a> für die Funktion ermittelt.</p>
+
+<p>Die <code>every</code> Funktion verändert nicht die Werte des Arrays, auf dem sie aufgerufen wird.</p>
+
+<p>Die Anzahl der von <code>every</code> abzuarbeitenden Elemente wird vor dem ersten Aufruf von <code>callback</code> ermittelt. Elemente welche nach dem Aufruf von <code>every</code> angehängt werden, werden nicht von der <code>callback</code> Funktion besucht. Wenn existierende Element eines Arrays geändert werden, wird der <code>callback</code> Funktion der Wert übergeben, der zu dem Zeitpunkt des Aufrufens von <code>callback</code> im Array steht. Werte die gelöscht werden, werden nicht besucht.</p>
+
+<p><code>every</code> Arbeitet wie ein <a href="https://de.wikipedia.org/wiki/Quantor#Existenz-_und_Allquantor">Allquantor</a> in der Mathematik. Wenn das Array leer ist, gibt er <code>true</code> zurück. (Es ist wahr, dass alle Elemente einer <a href="https://de.wikipedia.org/wiki/Leere_Menge">leeren Menge</a> immer alle Bedingungen erfüllen.)</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Größe_aller_Arrayelemente_abprüfen">Größe aller Arrayelemente abprüfen</h3>
+
+<p>Das folgende Beispiel testet, ob alle Elemente in einem Array größer oder gleich 10 sind.</p>
+
+<pre class="brush: js">function isBigEnough(element, index, array) {
+  return element &gt;= 10;
+}
+[12, 5, 8, 130, 44].every(isBigEnough);   // false
+[12, 54, 18, 130, 44].every(isBigEnough); // true
+</pre>
+
+<h3 id="Einsatz_von_arrow_Funktionen">Einsatz von arrow Funktionen</h3>
+
+<p><a href="/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow Funktionen</a> unterstützen eine kürzere Syntax für den gleichen Test.</p>
+
+<pre class="brush: js">[12, 5, 8, 130, 44].every(elem =&gt; elem &gt;= 10); // false
+[12, 54, 18, 130, 44].every(elem =&gt; elem &gt;= 10); // true</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p><code>every</code> wurde im ECMA-262 Standard in der 5. Auflage hinzugefügt. Es kann sein, dass diese Funktion in anderer Implementierungen des Standards nicht vorkommt. Man dieses beheben, indem man den folgenden Quelltext an den Anfang eines Programms hinzufügt. Dadurch wird die <code>every</code> Funktion dort hinzugefügt, wo sie nicht nativ unterstützt wird. Der Algorithmus ist exakt der aus der 5. Auflage des ECMA-262 Standards, mit der Voraussetzung, dass <code>Object</code> und <code>TypeError</code> ihre originalen Werte haben und dass <code>callbackfn.call</code> die originale Funktion {{jsxref("Function.prototype.call")}} aufrufen kann.</p>
+
+<pre class="brush: js">if (!Array.prototype.every) {
+  Array.prototype.every = function(callbackfn, thisArg) {
+    'use strict';
+    var T, k;
+
+    if (this == null) {
+      throw new TypeError('this is null or not defined');
+    }
+
+    // 1. Let O be the result of calling ToObject passing the this
+    //    value as the argument.
+    var O = Object(this);
+
+    // 2. Let lenValue be the result of calling the Get internal method
+    //    of O with the argument "length".
+    // 3. Let len be ToUint32(lenValue).
+    var len = O.length &gt;&gt;&gt; 0;
+
+    // 4. If IsCallable(callbackfn) is false, throw a TypeError exception.
+    if (typeof callbackfn !== 'function') {
+      throw new TypeError();
+    }
+
+    // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
+    if (arguments.length &gt; 1) {
+      T = thisArg;
+    }
+
+    // 6. Let k be 0.
+    k = 0;
+
+    // 7. Repeat, while k &lt; len
+    while (k &lt; len) {
+
+      var kValue;
+
+      // a. Let Pk be ToString(k).
+      //   This is implicit for LHS operands of the in operator
+      // b. Let kPresent be the result of calling the HasProperty internal
+      //    method of O with argument Pk.
+      //   This step can be combined with c
+      // c. If kPresent is true, then
+      if (k in O) {
+
+        // i. Let kValue be the result of calling the Get internal method
+        //    of O with argument Pk.
+        kValue = O[k];
+
+        // ii. Let testResult be the result of calling the Call internal method
+        //     of callbackfn with T as the this value and argument list
+        //     containing kValue, k, and O.
+        var testResult = callbackfn.call(T, kValue, k, O);
+
+        // iii. If ToBoolean(testResult) is false, return false.
+        if (!testResult) {
+          return false;
+        }
+      }
+      k++;
+    }
+    return true;
+  };
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.16', 'Array.prototype.every')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.every', 'Array.prototype.every')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.every', 'Array.prototype.every')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.every")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.every()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/array/fill/index.html b/files/de/web/javascript/reference/global_objects/array/fill/index.html
new file mode 100644
index 0000000000..5f4821e986
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/array/fill/index.html
@@ -0,0 +1,155 @@
+---
+title: Array.prototype.fill()
+slug: Web/JavaScript/Reference/Global_Objects/Array/fill
+tags:
+  - Array
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Prototype
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/fill
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>fill()</strong></code> Methode befüllt ein Array mit einem statischen Wert von einem Startindex bis zu einem Endindex. Der Endindex wird nicht mit eingeschlossen.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-fill.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>arr</var>.fill(<var>value</var>[, <var>start<var>[, <var>end</var>]])</var></var></code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Wert, mit dem ein Array gefüllt werden soll.</dd>
+ <dt><code>start</code> {{optional_inline}}</dt>
+ <dd>Startindex, Standardwert ist 0.</dd>
+ <dt><code>end</code> {{optional_inline}}</dt>
+ <dd>Endindex, Standardwert ist <code>this.length</code>.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Das geänderte Array.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <strong><code>fill</code></strong> Methode nimmt bis zu drei Argumente entgegen: <code>value</code>, <code>start</code> und <code>end</code>. Die Argumente <code>start</code> und <code>end</code> sind optional und haben als Standardwert 0 und <code>length</code> des <code>this</code> Objektes.</p>
+
+<p>Wenn <code>start</code> negativ ist, wird stattdessen <code>length+start</code> benutzt, wobei <code>length</code> die Länge des Arrays ist. Wenn <code>end</code> negativ ist, wird stattdessen <code>length+end</code> benutzt.</p>
+
+<p>Die <code><strong>fill</strong></code> Funktion ist absichtlich generisch. Es ist nicht nötig, dass der <code>this</code> Wert ein Array Objekt ist.</p>
+
+<p>Die <code><strong>fill</strong></code> Methode ist eine verändernde Methode. Sie verändert das <code>this</code> Objekt selbst und gibt dieses zurück. Sie erstellt keine Kopie des Objektes.</p>
+
+<p>Wenn der <code><strong>fill</strong></code> Methode ein Objekt übergeben wird, wird das Objekt kopiert und die Referenz der Kopie wird im Array eingesetzt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js">[1, 2, 3].fill(4);               // [4, 4, 4]
+[1, 2, 3].fill(4, 1);            // [1, 4, 4]
+[1, 2, 3].fill(4, 1, 2);         // [1, 4, 3]
+[1, 2, 3].fill(4, 1, 1);         // [1, 2, 3]
+[1, 2, 3].fill(4, 3, 3);         // [1, 2, 3]
+[1, 2, 3].fill(4, -3, -2);       // [4, 2, 3]
+[1, 2, 3].fill(4, NaN, NaN);     // [1, 2, 3]
+[1, 2, 3].fill(4, 3, 5);         // [1, 2, 3]
+Array(3).fill(4);                // [4, 4, 4]
+[].fill.call({ length: 3 }, 4);  // {0: 4, 1: 4, 2: 4, length: 3}
+
+// Objects by reference.
+var arr = Array(3).fill({}) // [{}, {}, {}];
+arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js">if (!Array.prototype.fill) {
+  Object.defineProperty(Array.prototype, 'fill', {
+    value: function(value) {
+
+      // Steps 1-2.
+      if (this == null) {
+        throw new TypeError('this is null or not defined');
+      }
+
+      var O = Object(this);
+
+      // Steps 3-5.
+      var len = O.length &gt;&gt;&gt; 0;
+
+      // Steps 6-7.
+      var start = arguments[1];
+      var relativeStart = start &gt;&gt; 0;
+
+      // Step 8.
+      var k = relativeStart &lt; 0 ?
+        Math.max(len + relativeStart, 0) :
+        Math.min(relativeStart, len);
+
+      // Steps 9-10.
+      var end = arguments[2];
+      var relativeEnd = end === undefined ?
+        len : end &gt;&gt; 0;
+
+      // Step 11.
+      var final = relativeEnd &lt; 0 ?
+        Math.max(len + relativeEnd, 0) :
+        Math.min(relativeEnd, len);
+
+      // Step 12.
+      while (k &lt; final) {
+        O[k] = value;
+        k++;
+      }
+
+      // Step 13.
+      return O;
+    }
+  });
+}
+</pre>
+
+<p>Wenn es wirklich notwendig ist veraltete JavaScript-Umgebungen zu unterstützen, die <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code> nicht unterstützen, ist es meistens besser Methoden von <code>Array.prototype</code> nicht mit einem Polyfill zu unterstützen, weil sie nicht als nicht-aufzählbar eingestellt werden können.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.prototype.fill', 'Array.prototype.fill')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.fill', 'Array.prototype.fill')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.fill")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("TypedArray.prototype.fill()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/array/filter/index.html b/files/de/web/javascript/reference/global_objects/array/filter/index.html
new file mode 100644
index 0000000000..6f1ee08498
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/array/filter/index.html
@@ -0,0 +1,235 @@
+---
+title: Array.prototype.filter()
+slug: Web/JavaScript/Reference/Global_Objects/Array/filter
+tags:
+  - Array
+  - ECMAScript 5
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - filter
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/filter
+---
+<div>{{JSRef}}</div>
+
+<p><code>filter()</code> erstellt ein neues Array mit allen Elementen, die den von der bereitgestellten Funktion implementierten Test bestehen.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-filter.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate"><var>let newArray = arr</var>.filter(<var>callback(element[, index[, array]])</var>[, <var>thisArg</var>])</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Eine Funktion, um jedes Element des Arrays zu testen. Die Funktion gibt <code>true</code> zurück, um das Element zu behalten, ansonsten <code>false</code>.</dd>
+ <dd>
+ <dl>
+  <dt><code>element</code></dt>
+  <dd>Das aktuell zu testende Element aus dem Array.</dd>
+  <dt><code>index</code> {{optional_inline}}</dt>
+  <dd>Der Index des aktuell zu testenden Elements aus dem Array.</dd>
+  <dt><code>array</code> {{optional_inline}}</dt>
+  <dd>Das Array auf welchem <code>filter</code> aufgerufen wurde.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code> {{optional_inline}}</dt>
+ <dd>Wert, der als <code>this</code> innerhalb der Funktion genutzt wird.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein neues Array mit den Elementen, die den Test bestanden haben. Wenn kein Element den Test besteht, wird ein leeres Array zurückgegeben.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p><code>filter()</code> ruft eine bereitgestellte <code>callback</code>-Funktion einmal für jedes Element in einem Array auf und erstellt ein neues Array aller Werte, für die <code>callback</code> einen Wert zurückgibt <a href="/de/docs/Glossary/Truthy">der umgewandelt <code>true</code> ergibt</a>. <code>callback</code> wird nur für Indizes des Arrays aufgerufen, denen Werte zugewiesen wurden. Es wird nicht für Indizes aufgerufen, die gelöscht oder denen nie Werte zugewiesen wurden. Array-Elemente, die den Test in <code>callback</code> nicht bestehen, werden einfach übersprungen und sind im neuen Array nicht enthalten.</p>
+
+<p><code>callback</code> wird mit drei Argumenten aufgerufen:</p>
+
+<ol>
+ <li>Der Wert des Elements</li>
+ <li>Der Index des Elements</li>
+ <li>Das Array-Objekt, das durchlaufen wird</li>
+</ol>
+
+<p>Falls der Parameter <code>thisArg</code> an <code>filter</code> übergeben wird, wird er als Wert für <code>this</code> innerhalb von <code>callback</code> verwendet. Andernfalls hat <code>this</code> den Wert {{jsxref("undefined")}}. Welchen Wert <code>callback</code> letztendlich in <code>this</code> sieht wird gemäß <a href="/de/docs/Web/JavaScript/Reference/Operators/this">der üblichen Regeln bestimmt, nach denen <code>this</code> für eine Funktion ermittelt wird</a>.</p>
+
+<p><code>filter()</code> selbst verändert das Array nicht, auf dem es aufgerufen wird.</p>
+
+<p>Der Bereich der von <code>filter()</code> verarbeiteten Elemente wird vor dem ersten Aufruf von <code>callback</code> festgelegt. Elemente, die nach Beginn des Aufrufs von <code>filter()</code> an das Array angehängt werden, werden von <code>callback</code> nicht berücksichtigt. Wenn vorhandene Elemente des Arrays geändert werden, ist der Wert maßgeblich, den <code>filter()</code> beim Erreichen eines Elements antrifft und dann an <code>callback</code> übergibt. Nachfolgende Elemente, die nach Beginn eines Durchlaufs von <code>filter()</code> gelöscht werden, bevor sie eingelesen werden konnten, werden nicht mehr berücksichtigt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Alle_kleinen_Werte_herausfiltern">Alle kleinen Werte herausfiltern</h3>
+
+<p>Das folgende Beispiel nutzt <code>filter()</code>, um ein gefiltertes Array zu erstellen, aus dem alle Element mit Werten kleiner als 10 entfernt werden.</p>
+
+<pre class="brush: js notranslate">function isBigEnough(value) {
+  return value &gt;= 10;
+}
+
+let filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
+// filtered is [12, 130, 44]
+</pre>
+
+<h3 id="Filtern_von_ungültigen_Werten_aus_JSON">Filtern von ungültigen Werten aus JSON</h3>
+
+<p>Das folgende Beispiel nutzt <code>filter()</code>, um ein gefiltertes JSON zu erstellen, in welchem alle Elemente mit numerischer <code>id</code> ungleich null sind.</p>
+
+<pre class="brush: js notranslate">let arr = [
+  { id: 15 },
+  { id: -1 },
+  { id: 0 },
+  { id: 3 },
+  { id: 12.2 },
+  { },
+  { id: null },
+  { id: NaN },
+  { id: 'undefined' }
+];
+
+let invalidEntries = 0;
+
+function isNumber(obj) {
+  return obj !== undefined &amp;&amp; typeof(obj) === 'number' &amp;&amp; !isNaN(obj);
+}
+
+function filterByID(obj) {
+  if (isNumber(obj.id) &amp;&amp; obj.id !== 0) {
+    return true;
+  }
+  invalidEntries++;
+  return false;
+}
+
+let arrByID = arr.filter(filterByID);
+
+console.log('Filtered Array\n', arrByID);
+// Filtered Array
+// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]
+
+console.log('Number of Invalid Entries = ', invalidEntries);
+// <span class="diff_add">Number of Invalid Entries = 5</span>
+</pre>
+
+<h3 id="Suchen_in_Arrays">Suchen in Arrays</h3>
+
+<p>Das folgende Beispiel nutzt <code>filter()</code>, um ein Array gemäß eines Suchkriterius zu filtern.</p>
+
+<pre class="brush: js notranslate">let fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
+
+/**
+ * Filter array items based on search criteria (query)
+ */
+function filterItems(arr, query) {
+  return arr.filter(function(el) {
+      return el.toLowerCase().indexOf(query.toLowerCase()) &gt; -1;
+  })
+}
+
+console.log(filterItems(fruits, 'ap')); // ['apple', 'grapes']
+console.log(filterItems(fruits, 'an')); // ['banana', 'mango', 'orange']</pre>
+
+<h4 id="ES2015_Implementierung">ES2015 Implementierung</h4>
+
+<pre class="brush: js notranslate">const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
+
+/**
+ * Filter array items based on search criteria (query)
+ */
+const filterItems = (arr, query) =&gt; {
+  return arr.filter(el =&gt; el.toLowerCase().indexOf(query.toLowerCase()) &gt; -1);
+};
+
+console.log(filterItems(fruits, 'ap')); // ['apple', 'grapes']
+console.log(filterItems(fruits, 'an')); // ['banana', 'mango', 'orange']</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p><code>filter()</code> wurde dem ECMA-262-Standard in der 5. Auflage hinzugefügt. Als solches ist es möglicherweise nicht in allen Implementierungen des Standards enthalten. Sie können dies umgehen, indem Sie den folgenden Code am Anfang Ihrer Skripte einfügen, um die Verwendung von <code>filter()</code> in Implementierungen zu ermöglichen, die es nicht nativ unterstützen. Dieser Algorithmus entspricht dem in der 5. Auflage von ECMA-262 angegebenen Algorithmus, vorausgesetzt dass <code>callback.call()</code> mit dem ursprünglichen Wert von {{jsxref("Function.prototype.call()")}} auswertet wird und {{jsxref("Array.prototype.push()")}} seinen ursprünglichen Wert hat.</p>
+
+<pre class="brush: js notranslate">if (!Array.prototype.filter) {
+  Array.prototype.filter = function(func, thisArg) {
+    'use strict';
+    if ( ! ((typeof func === 'Function' || typeof func === 'function') &amp;&amp; this) )
+        throw new TypeError();
+
+    let len = this.length &gt;&gt;&gt; 0,
+        res = new Array(len), // preallocate array
+        t = this, c = 0, i = -1;
+    if (thisArg === undefined) {
+      while (++i !== len){
+        // checks to see if the key was set
+        if (i in this){
+          if (func(t[i], i, t)){
+            res[c++] = t[i];
+          }
+        }
+      }
+    }
+    else{
+      while (++i !== len){
+        // checks to see if the key was set
+        if (i in this){
+          if (func.call(thisArg, t[i], i, t)){
+            res[c++] = t[i];
+          }
+        }
+      }
+    }
+
+    res.length = c; // shrink down array to proper size
+    return res;
+  };
+}</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.20', 'Array.prototype.filter')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.filter")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+ <li>{{jsxref("Array.prototype.reduce()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/array/find/index.html b/files/de/web/javascript/reference/global_objects/array/find/index.html
new file mode 100644
index 0000000000..2741360a67
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/array/find/index.html
@@ -0,0 +1,243 @@
+---
+title: Array.prototype.find()
+slug: Web/JavaScript/Reference/Global_Objects/Array/find
+tags:
+  - Array
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/find
+---
+<div>{{JSRef}}</div>
+
+<p>Die Methode <code><strong>find()</strong></code> gibt den <strong>Wert</strong> des Elements eines Arrays zurück, welches <strong>als erstes</strong> die Bedingung einer bereitgestellten Testfunktion erfüllt. Andernfalls wird {{jsxref("undefined")}} zurückgegeben.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-find.html")}}</div>
+
+
+
+<p>Siehe auch die Methode {{jsxref("Array.prototype.findIndex()", "findIndex()")}}, die den <strong>Index</strong> eines gefundenen Elements im Array anstelle seines Werts zurückgibt.</p>
+
+<p>Wenn Sie die Position eines Elements ermitteln oder feststellen müssen, ob ein Element in einem Array vorhanden ist, verwenden Sie {{jsxref("Array.prototype.indexOf()", "indexOf()")}} oder {{jsxref("Array.prototype.includes()", "includes()")}}.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>arr</var>.find(callback<var>[, thisArg]</var>)</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Funktion, die auf jedes Element angewendet wird mit drei Argumenten:
+ <dl>
+  <dt><code>element</code></dt>
+  <dd>Das aktuelle Element, das im Array verarbeitet wird.</dd>
+  <dt><code>index</code> {{optional_inline}}</dt>
+  <dd>Der Index des aktuellen Elements im Array.</dd>
+  <dt><code>array</code> {{optional_inline}}</dt>
+  <dd>Das Array, welches mit <code>find()</code> durlaufen wird.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code> {{optional_inline}}</dt>
+ <dd>Wert der als <code>this</code> verwendet wird, wenn <code>callback</code> ausgeführt wird.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Der <strong>Wert</strong> des Elements, welches <strong>als erstes</strong> die Bedingung der bereitgestellten Testfunktion erfüllt. Andernfalls wird {{jsxref("undefined")}} zurückgegeben.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p><code>find()</code> führt die <code>callback</code>-Funktion einmal für jeden Index des Arrays aus, bis ein Index gefunden wird, in dem <code>callback</code> einen {{Glossary("truthy")}}-Wert zurückgibt. Wenn ein solches Element gefunden wird, gibt <code>find()</code> sofort den Wert dieses Elements zurück, {{jsxref("undefined")}}. <code>callback</code> wird für jeden Index des Arrays von <code>0</code> bis <code>length - 1</code> aufgerufen und nicht nur für Indizes, denen Werte zugewiesen wurden. Dies kann bedeuten, dass es für Arrays mit Leerstellen weniger effizient ist als andere Methoden, die nur Indizes durchlaufen, denen ein Wert zugewiesen wurde.</p>
+
+<p><code>callback</code> wird mit drei Argumenten aufgerufen:</p>
+
+<ol>
+ <li>Der Wert des Elements</li>
+ <li>Der Index des Elements</li>
+ <li>Das Array-Objekt, das durchlaufen wird</li>
+</ol>
+
+<p> </p>
+
+<p>Falls der Parameter <code>thisArg</code> an <code>find()</code> übergeben wird, wird er als Wert für <code>this</code> innerhalb von <code>callback</code> verwendet. Andernfalls hat <code>this</code> den Wert {{jsxref("undefined")}}. Welchen Wert <code>callback</code> letztendlich in <code>this</code> sieht wird gemäß <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/this">der üblichen Regeln bestimmt, nach denen <code>this</code> für eine Funktion ermittelt wird</a>.</p>
+
+<p><code>find()</code> selbst verändert das Array nicht, auf dem es aufgerufen wird.</p>
+
+<p>Der Bereich der von <code>find()</code> verarbeiteten Elemente wird vor dem ersten Aufruf von <code>callback</code> festgelegt. Elemente, die nach Beginn des Aufrufs von <code> find()</code> an das Array angehängt werden, werden von <code>callback</code> nicht berücksichtigt. Wenn vorhandene Elemente des Arrays geändert werden, ist der Wert maßgeblich, den <code>find()</code> beim Erreichen eines Elements antrifft und dann an <code>callback</code> übergibt. <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/delete">Gelöschte</a> Elemente werden weiterhin verarbeitet.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Ermitteln_eines_Objekts_innerhalb_eines_Arrays_anhand_eines_seiner_Eigenschaften">Ermitteln eines Objekts innerhalb eines Arrays anhand eines seiner Eigenschaften</h3>
+
+<pre class="brush: js">var inventory = [
+    {name: 'apples', quantity: 2},
+    {name: 'bananas', quantity: 0},
+    {name: 'cherries', quantity: 5}
+];
+
+function isCherries(fruit) {
+    return fruit.name === 'cherries';
+}
+
+console.log(inventory.find(isCherries));
+// { name: 'cherries', quantity: 5 }</pre>
+
+<h4 id="Benutzung_einer_ES2015_Pfeilfunktion">Benutzung einer ES2015 Pfeilfunktion</h4>
+
+<pre class="brush: js">const inventory = [
+    {name: 'apples', quantity: 2},
+    {name: 'bananas', quantity: 0},
+    {name: 'cherries', quantity: 5}
+];
+
+const result = inventory.find( fruit =&gt; fruit.name === 'cherries' );
+
+console.log(result) // { name: 'cherries', quantity: 5 }</pre>
+
+<h3 id="Ermitteln_einer_Primzahl_innerhalb_eines_Arrays">Ermitteln einer Primzahl innerhalb eines Arrays</h3>
+
+<p>Im folgenden Beispiel wird ein Element im Array ermittelt, das eine Primzahl ist (oder {{jsxref("undefined")}} zurückgibt, wenn keine Primzahl vorhanden ist).</p>
+
+<pre class="brush: js">function isPrime(element, index, array) {
+  var start = 2;
+  while (start &lt;= Math.sqrt(element)) {
+    if (element % start++ &lt; 1) {
+      return false;
+    }
+  }
+  return element &gt; 1;
+}
+
+console.log([4, 6, 8, 12].find(isPrime)); // undefined, not found
+console.log([4, 5, 8, 12].find(isPrime)); // 5
+</pre>
+
+<p>Das folgende Beispiel zeigt, dass nicht vorhandene und gelöschte Elemente durchlaufen werden und der Wert maßgeblich ist, der beim Erreichen des Elements angetroffen und an <code>callback</code> übergeben wird.</p>
+
+<pre class="brush: js">// Array deklarieren, das an Index 2, 3 und 4 keine Elemente hat
+var array = [0,1,,,,5,6];
+
+// Zeige alle Indizes, nicht nur die denen Werte zugewiesen wurden
+array.find(function(value, index) {
+  console.log('Visited index ' + index + ' with value ' + value);
+});
+
+// Zeige alle Indizes, inklusive gelöschter
+array.find(function(value, index) {
+
+  // Lösche Element 5 in erstem Durchlauf
+  if (index == 0) {
+    console.log('Deleting array[5] with value ' + array[5]);
+    delete array[5];
+  }
+  // Element 5 wird weiterhin durchlaufen, obwohl es gelöscht wurde
+  console.log('Visited index ' + index + ' with value ' + value);
+});
+// Erwartete Ausgaben:
+// Deleting array[5] with value 5
+// Visited index 0 with value 0
+// Visited index 1 with value 1
+// Visited index 2 with value undefined
+// Visited index 3 with value undefined
+// Visited index 4 with value undefined
+// Visited index 5 with value undefined
+// Visited index 6 with value 6
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Diese Methode wurde der ECMAScript 2015-Spezifikation hinzugefügt und ist möglicherweise noch nicht in allen JavaScript-Implementierungen verfügbar. Sie können <code>Array.prototype.find()</code> jedoch mit dem folgenden Snippet nachrüsten:</p>
+
+<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-array.prototype.find
+if (!Array.prototype.find) {
+  Object.defineProperty(Array.prototype, 'find', {
+    value: function(predicate) {
+     // 1. Let O be ? ToObject(this value).
+      if (this == null) {
+        throw new TypeError('"this" is null or not defined');
+      }
+
+      var o = Object(this);
+
+      // 2. Let len be ? ToLength(? Get(O, "length")).
+      var len = o.length &gt;&gt;&gt; 0;
+
+      // 3. If IsCallable(predicate) is false, throw a TypeError exception.
+      if (typeof predicate !== 'function') {
+        throw new TypeError('predicate must be a function');
+      }
+
+      // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
+      var thisArg = arguments[1];
+
+      // 5. Let k be 0.
+      var k = 0;
+
+      // 6. Repeat, while k &lt; len
+      while (k &lt; len) {
+        // a. Let Pk be ! ToString(k).
+        // b. Let kValue be ? Get(O, Pk).
+        // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
+        // d. If testResult is true, return kValue.
+        var kValue = o[k];
+        if (predicate.call(thisArg, kValue, k, o)) {
+          return kValue;
+        }
+        // e. Increase k by 1.
+        k++;
+      }
+
+      // 7. Return undefined.
+      return undefined;
+    },
+    configurable: true,
+    writable: true
+  });
+}
+</pre>
+
+<p>Wenn Sie stark veraltete JavaScript-Engines unterstützen müssen, die {{jsxref("Object.defineProperty()")}} nicht unterstützen, empfiehlt es sich Methoden aus <code>Array.prototype</code> gar nicht mit Polyfills nachzubauen, da es nicht möglich ist sie als nicht-enumerierbar zu kennzeichnen.</p>
+
+<h2 id="Specifikationen">Specifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.prototype.find', 'Array.prototype.find')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.find', 'Array.prototype.find')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.find")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.findIndex()")}}</li>
+ <li>{{jsxref("Array.prototype.includes()")}}</li>
+ <li>{{jsxref("Array.prototype.filter()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/array/findindex/index.html b/files/de/web/javascript/reference/global_objects/array/findindex/index.html
new file mode 100644
index 0000000000..904ff025fc
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/array/findindex/index.html
@@ -0,0 +1,189 @@
+---
+title: Array.prototype.findIndex()
+slug: Web/JavaScript/Reference/Global_Objects/Array/findIndex
+tags:
+  - Array
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/findIndex
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">Die Methode <code><strong>findIndex()</strong></code> gibt den <strong>Index</strong> des ersten Elements im Array zurück, <strong>das die bereitgestellte Testfunktion erfüllt.</strong> Andernfalls wird -1 zurückgegeben, um anzuzeigen, dass kein Element den Test bestanden hat.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-findindex.html")}}</div>
+
+
+
+<p>Siehe auch die Methode {{jsxref("Array.find", "find()")}}, die den Wert eines Arrayelements anstelle dessen Index zurückgibt.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>arr</var>.findIndex(callback(element<var>[, index[, array]]</var>)<var>[, thisArg]</var>)</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Eine Funktion, die für jeden Wert im Array ausgeführt wird, bis sie <code>true</code> zurückgibt, um anzuzeigen, dass das gewünschte Element gefunden wurde. Sie akzeptiert 3 Argumente:
+ <dl>
+  <dt><code>element</code></dt>
+  <dd>Das aktuelle Element, das im Array verarbeitet wird.</dd>
+  <dt><code>index</code> {{optional_inline}}</dt>
+  <dd>Der Index des aktuellen Elements, das im Array verarbeitet wird.</dd>
+  <dt><code>array</code> {{optional_inline}}</dt>
+  <dd>Das Array, welches mit <code>findIndex()</code> durchlaufen wird.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code> {{optional_inline}}</dt>
+ <dd>Wert der als <code>this</code> verwendet wird, wenn <code>callback</code> ausgeführt wird</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein Index im Array, wenn ein Element den Test besteht, ansonsten <strong>-1.</strong></p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p><code>findIndex()</code> ruft eine bereitgestellte <code>callback</code>-Funktion einmal für jeden Array-Index <code>0..length-1</code> (inklusive) im Array auf bis <code>callback</code> einen {{Glossary("truthy")}}-Wert findet.</p>
+
+<p>Wird ein solches Element gefunden gibt <code>findIndex()</code> sofort den Index des gefundenen Elements zurück. Gibt callback nie einen {{Glossary("truthy")}}-Wert zurück oder ist <code>length</code> gleich 0 gibt <code>findIndex()</code> -1 zurück. Im Gegensatz zu einigen anderen Array-Methoden wie {{jsxref("Array.prototype.some()", "some()")}} wird in Arrays mit Leerstellen <code>callback</code> <strong>auch für</strong> Indizes aufgerufen, die keinen Inhalt haben.</p>
+
+<p><code>callback</code> wird mit drei Argumenten aufgerufen:</p>
+
+<ol>
+ <li>Der Wert des Elements</li>
+ <li>Der Index des Elements</li>
+ <li>Das Array-Objekt, das durchlaufen wird</li>
+</ol>
+
+<p>Falls der Parameter <code>thisArg</code> an <code>findIndex()</code> übergeben wird, wird er als Wert für <code>this</code> innerhalb von <code>callback</code> verwendet. Andernfalls hat <code>this</code> den Wert {{jsxref("undefined")}}. Welchen Wert <code>callback</code> letztendlich in <code>this</code> sieht wird gemäß <a href="/de/docs/Web/JavaScript/Reference/Operators/this">der üblichen Regeln bestimmt, nach denen <code>this</code> für eine Funktion ermittelt wird</a>.</p>
+
+<p>Der Bereich der von <code>findIndex()</code> verarbeiteten Elemente wird vor dem ersten Aufruf von <code>callback</code> festgelegt. Elemente, die nach Beginn des Aufrufs von <code> findIndex()</code> an das Array angehängt werden, werden von <code>callback</code> nicht berücksichtigt. Wenn vorhandene Elemente des Arrays geändert werden, ist der Wert maßgeblich, den <code>findIndex()</code> beim Erreichen eines Elements antrifft und dann an <code>callback</code> übergibt. <a href="/de/docs/Web/JavaScript/Reference/Operators/delete">Gelöschte</a> Elemente werden weiterhin verarbeitet.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Index_einer_Primzahl_in_einem_Array_finden">Index einer Primzahl in einem Array finden</h3>
+
+<p>Das folgende Beispiel gibt den Index eines Elements im Array zurück, das eine Primzahl ist, oder -1, wenn keine Primzahl vorhanden ist.</p>
+
+<pre class="brush: js">function isPrime(element, index, array) {
+  var start = 2;
+  while (start &lt;= Math.sqrt(element)) {
+    if (element % start &lt; 1) {
+      return false;
+    } else {
+      start++;
+    }
+  }
+  return element &gt; 1;
+}
+
+console.log([4, 6, 8, 12].findIndex(isPrime)); // -1, not found
+console.log([4, 6, 7, 12].findIndex(isPrime)); // 2 (array[2] is 7)
+</pre>
+
+<h3 id="Index_mithilfe_einer_Pfeilfunktion_ermitteln">Index mithilfe einer Pfeilfunktion ermitteln</h3>
+
+<p>Im folgenden Beispiel wird der Index einer Frucht mithilfe einer Pfeilfunktion ermittelt:</p>
+
+<pre class="brush: js">const fruits = ["apple", "banana", "cantaloupe", "blueberries", "grapefruit"];
+
+const index = fruits.findIndex(fruit =&gt; fruit === "blueberries");
+
+console.log(index); // 3
+console.log(fruits[index]); // blueberries
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-array.prototype.findindex
+if (!Array.prototype.findIndex) {
+  Object.defineProperty(Array.prototype, 'findIndex', {
+    value: function(predicate) {
+     // 1. Let O be ? ToObject(this value).
+      if (this == null) {
+        throw new TypeError('"this" is null or not defined');
+      }
+
+      var o = Object(this);
+
+      // 2. Let len be ? ToLength(? Get(O, "length")).
+      var len = o.length &gt;&gt;&gt; 0;
+
+      // 3. If IsCallable(predicate) is false, throw a TypeError exception.
+      if (typeof predicate !== 'function') {
+        throw new TypeError('predicate must be a function');
+      }
+
+      // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
+      var thisArg = arguments[1];
+
+      // 5. Let k be 0.
+      var k = 0;
+
+      // 6. Repeat, while k &lt; len
+      while (k &lt; len) {
+        // a. Let Pk be ! ToString(k).
+        // b. Let kValue be ? Get(O, Pk).
+        // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
+        // d. If testResult is true, return k.
+        var kValue = o[k];
+        if (predicate.call(thisArg, kValue, k, o)) {
+          return k;
+        }
+        // e. Increase k by 1.
+        k++;
+      }
+
+      // 7. Return -1.
+      return -1;
+    },
+    configurable: true,
+    writable: true
+  });
+}
+</pre>
+
+<p>Wenn Sie stark veraltete JavaScript-Engines unterstützen müssen, die {{jsxref("Object.defineProperty()")}} nicht unterstützen, empfiehlt es sich Methoden aus <code>Array.prototype</code> gar nicht mit Polyfills nachzubauen, da es nicht möglich ist sie als nicht-enumerierbar zu kennzeichnen.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.prototype.findindex', 'Array.prototype.findIndex')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.findIndex', 'Array.prototype.findIndex')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.findIndex")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.find()")}}</li>
+ <li>{{jsxref("Array.prototype.indexOf()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/array/flat/index.html b/files/de/web/javascript/reference/global_objects/array/flat/index.html
new file mode 100644
index 0000000000..4e18ff7649
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/array/flat/index.html
@@ -0,0 +1,116 @@
+---
+title: Array.prototype.flat()
+slug: Web/JavaScript/Reference/Global_Objects/Array/flat
+tags:
+  - Array
+  - Experimental
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/flat
+---
+<div>{{JSRef}} {{SeeCompatTable}}</div>
+
+<p>Die <code><strong>flat()</strong></code> Methode erstellt rekursiv ein neues Array mit allen Elementen von Unterarrays bis zu einer spezifizierten Tiefe.</p>
+
+<p class="hidden">\{{EmbedInteractiveExample("pages/js/array-flatten.html")}}</p>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>var newArray = arr</var>.flat(<var>depth</var>);</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>depth</code> {{optional_inline}}</dt>
+ <dd>Das Tiefenlevel, welches angibt, bis zu welcher Tiefe die Arraystruktur abgeflacht werden soll. Der Standardwert ist 1.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein neues Array, welches die Elemente der Unterarrays enthält.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Abflachen_von_geschachtelten_Arrays">Abflachen von geschachtelten Arrays</h3>
+
+<pre class="brush: js">var arr1 = [1, 2, [3, 4]];
+arr1.flat();
+// [1, 2, 3, 4]
+
+var arr2 = [1, 2, [3, 4, [5, 6]]];
+arr2.flat();
+// [1, 2, 3, 4, [5, 6]]
+
+var arr3 = [1, 2, [3, 4, [5, 6]]];
+arr3.flat(2);
+// [1, 2, 3, 4, 5, 6]
+</pre>
+
+<h3 id="Abflachen_und_Löcher_in_Arrays">Abflachen und Löcher in Arrays</h3>
+
+<p>Die <code>flat</code> Methode entfernt leere Plätze in Arrays:</p>
+
+<pre class="brush: js">var arr4 = [1, 2, , 4, 5];
+arr4.flat();
+// [1, 2, 4, 5]</pre>
+
+<h2 id="Alternative">Alternative</h2>
+
+<h3 id="reduce_und_concat"><code>reduce</code> und <code>concat</code></h3>
+
+<pre>var arr1 = [1, 2, [3, 4]];
+arr1.flat();
+
+// Um ein Array um eine Ebene zu glätten.
+arr1.reduce((acc, val) =&gt; acc.concat(val), []);
+// [1, 2, 3, 4]
+
+// Um mehrere Ebenen zu glätten muss reduce und concat rekursiv eingesetzt werden.
+
+var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]];
+
+function flattenDeep(arr1) {
+   return arr1.reduce((acc, val) =&gt; Array.isArray(val) ? acc.concat(flattenDeep(val)) : acc.concat(val), []);
+}
+flattenDeep(arr1);
+
+// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-flatMap/#sec-Array.prototype.flat"><code>Array.prototype.flat</code> proposal</a></td>
+   <td>Candidate (3)</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.flat")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.flatMap()")}}</li>
+ <li>{{jsxref("Array.prototype.map()")}}</li>
+ <li>{{jsxref("Array.prototype.reduce()")}}</li>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/array/flatmap/index.html b/files/de/web/javascript/reference/global_objects/array/flatmap/index.html
new file mode 100644
index 0000000000..2840429333
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/array/flatmap/index.html
@@ -0,0 +1,117 @@
+---
+title: Array.prototype.flatMap()
+slug: Web/JavaScript/Reference/Global_Objects/Array/flatMap
+tags:
+  - Array
+  - Experimental
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/flatMap
+---
+<div>{{JSRef}} {{SeeCompatTable}}</div>
+
+<p>Die <code><strong>flatMap()</strong></code> Methode bildet jedes Element über eine Funktion ab und flacht das Ergebnis in ein Array ab. Sie ist identisch zu einem <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a> gefolgt von einem <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Array/flat">flat</a> der Tiefe 1, aber <code>flatMap</code> ist <span id="result_box" lang="de"><span>oft nützlich und beide in einer Methode zusammenführen ist etwas effizienter.</span></span></p>
+
+<p class="hidden">\{{EmbedInteractiveExample("pages/js/array-flatmap.html")}}</p>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>var new_array = arr</var>.flatMap(function <var>callback(currentValue[, index[, array]]) {
+    // return element for new_array
+}</var>[, <var>thisArg</var>])</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Funktion, die ein Element für das neue Array erzeugt, welche drei Argumente hat:
+ <dl>
+  <dt> </dt>
+  <dt><code>currentValue</code></dt>
+  <dd>Das aktuelle Element, das im Array verarbeitet wird.</dd>
+  <dt><code>index</code>{{optional_inline}}</dt>
+  <dd>Der Index des aktuell zu verarbeitende Elements in dem Array.</dd>
+  <dt><code>array</code>{{optional_inline}}</dt>
+  <dd>Das Array, auf dem <code>flatMap</code> aufgerufen wurde.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code>{{optional_inline}}</dt>
+ <dd>Wert, der bei der Ausführung von <code>callback</code> für <code>this</code> genutzt wird.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein neues Array mit jedem Element, dass aus dem Resultat der callback Funktion hervorgeht und auf die Tiefe 1 abgeflacht wurde.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Siehe auf der Seite {{jsxref("Array.prototype.map()")}} für eine detaillierte Beschreibung der <code>callback</code> Funktion. Die <code>flatMap</code> Methode ist identisch zu <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a></code> gefolgt von <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat">flat</a></code> mit der Tiefe 1.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="map_und_flatMap"><code>map</code> und <code>flatMap</code></h3>
+
+<pre class="brush: js">var arr1 = <span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>[</span></span><span class="constant decimal js numeric"><span>1</span></span><span class="comma delimiter js meta object"><span>,</span></span><span> </span><span class="brace js meta square"><span>2, 3, 4];
+
+arr1.map(</span></span></span></span></span>x =&gt; [x * 2]<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>);</span></span></span></span></span>
+// [[2], [4], [6], [8]]
+
+arr1.flatMap(x =&gt; [x * 2]<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>);
+// [2, 4, 6, 8]</span></span></span></span></span>
+
+// only one level is flattened
+arr1.flatMap(x =&gt; [[x * 2]]);
+// [[2], [4], [6], [8]]
+</pre>
+
+<h2 id="Alternative">Alternative</h2>
+
+<h3 id="reduce_und_concat"><code>reduce</code> und <code>concat</code></h3>
+
+<pre class="brush: js"><code>var arr1 = [1, 2, 3, 4];
+
+arr1.flatMap(x =&gt; [x * 2]);
+// ist equivalent zu
+arr1.reduce((acc, x) =&gt; acc.concat([x * 2]), []);
+// [2, 4, 6, 8]
+</code></pre>
+
+<div class="line"><span class="js source"><span class="comment double-slash js line"><span class="comment definition js punctuation"><span>//</span></span><span>=&gt; [1, 2, 3, 4, 5, 6, 7, 8, 9]</span></span></span></div>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-flatMap/#sec-Array.prototype.flatMap"><code>Array.prototype.flatMap</code> proposal</a></td>
+   <td>Candidate (3)</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.flatMap")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.flat()")}}</li>
+ <li>{{jsxref("Array.prototype.map()")}}</li>
+ <li>{{jsxref("Array.prototype.reduce()")}}</li>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/array/foreach/index.html b/files/de/web/javascript/reference/global_objects/array/foreach/index.html
new file mode 100644
index 0000000000..faba9795cb
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/array/foreach/index.html
@@ -0,0 +1,303 @@
+---
+title: Array.prototype.forEach()
+slug: Web/JavaScript/Reference/Global_Objects/Array/forEach
+tags:
+  - Array
+  - ECMAScript 5
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/forEach
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>forEach()</strong></code> Methode führt eine übergebene Funktion für jedes Element eines Arrays aus.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-foreach.html")}}</div>
+
+
+
+<p><span class="comment token">// a</span> <span class="comment token">// b</span> <span class="comment token">// c</span></p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>arr</var>.forEach(function <var>callback(currentValue [, index [, array]]) {
+    // Ihr Iterator
+}</var>[, <var>thisArg</var>]);</pre>
+
+<h3 id="Parameters" name="Parameters">Parameter</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Funktion, die auf jedes Element angewendet wird mit drei Argumenten:</dd>
+ <dd>
+ <dl>
+  <dt><code>currentValue</code></dt>
+  <dd>Der Wert des aktuellen Elements im Array.</dd>
+  <dt><code>index</code> {{optional_inline}}</dt>
+  <dd>Der Index des aktuellen Elements im Array.</dd>
+  <dt><code>array</code> {{optional_inline}}</dt>
+  <dd>Das Array, welches mit <code>forEach()</code> durlaufen wird.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code> {{optional_inline}}</dt>
+ <dd>Wert der als <code>this</code> verwendet wird, wenn <code>callback</code> ausgeführt wird.</dd>
+ <dt> </dt>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p><code>forEach()</code> ruft eine bereitgestellte <code>callback</code>-Funktion einmal für jedes Element in einem Array in aufsteigender Reihenfolge auf. Sie wird nicht für Elemente aufgerufen, die gelöscht oder nicht initialisiert wurden (d. h. Arrays mit leeren Elementen).</p>
+
+<p><code>callback</code> wird mit drei Argumenten aufgerufen:</p>
+
+<ol>
+ <li>Der Wert des Elements</li>
+ <li>Der Index des Elements</li>
+ <li>Das Array-Objekt, das durchlaufen wird</li>
+</ol>
+
+<p>Falls der Parameter <code>thisArg</code> an <code>forEach()</code> übergeben wird, wird er als Wert für <code>this</code> innerhalb von <code>callback</code> verwendet. Andernfalls hat <code>this</code> den Wert {{jsxref("undefined")}}. Welchen Wert <code>callback</code> letztendlich in <code>this</code> sieht wird gemäß <a href="/de/docs/Web/JavaScript/Reference/Operators/this">der üblichen Regeln bestimmt, nach denen <code>this</code> für eine Funktion ermittelt wird</a>.</p>
+
+<p><code>forEach()</code> selbst verändert das Array nicht, auf dem es aufgerufen wird (das aufgerufene <code>callback</code> kann jedoch Änderungen vornehmen).</p>
+
+<p>Der Bereich der von <code>forEach()</code> verarbeiteten Elemente wird vor dem ersten Aufruf von <code>callback</code> festgelegt. Elemente, die nach Beginn des Aufrufs von <code>forEach()</code> an das Array angehängt werden, werden von <code>callback</code> nicht berücksichtigt. Wenn vorhandene Elemente des Arrays geändert werden, ist der Wert maßgeblich, den <code>forEach()</code> beim Erreichen eines Elements antrifft und dann an <code>callback</code> übergibt. Nachfolgende Elemente, die nach Beginn eines Durchlaufs von <code>forEach()</code> gelöscht werden (z. B. durch {{jsxref("Array.prototype.shift()", "shift()")}}), bevor sie eingelesen werden konnten, werden nicht mehr berücksichtigt (siehe Beispiel unten).</p>
+
+<p><code>forEach()</code> führt <code>callback</code> einmal für jedes Element im Array aus; im Gegensatz zu {{jsxref("Array.prototype.map()", "map()")}} oder {{jsxref("Array.prototype.reduce()", "reduce()")}} gibt es immer den Wert {{jsxref("undefined")}} zurück und ist nicht verknüpfbar. Der typische Anwendungsfall ist das Ausführen von Nebenwirkungen am Ende einer einer solchen Kette.</p>
+
+<div class="note">
+<p>Es gibt keine Möglichkeit eine <code>forEach()</code>-Schleife zu unterbrechen oder zu verlassen, außer durch das erzeugen einer Exception. Wird eine solche Möglichkeit jedoch benötigt, stellt <code>forEach()</code> das falsche Mittel dar.</p>
+
+<p>Vorzeitiges Verlassen ist verfügbar in:</p>
+
+<ul>
+ <li>Einer einfachen Schleife</li>
+ <li>Einer {{jsxref("statements/for...of", "for...of")}} Schleife</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+ <li>{{jsxref("Array.prototype.find()")}}</li>
+ <li>{{jsxref("Array.prototype.findIndex()")}}</li>
+</ul>
+
+<p>Die anderen Array Methoden {{jsxref("Array.prototype.every()", "every()")}}, {{jsxref("Array.prototype.some()", "some()")}}, {{jsxref("Array.prototype.find()", "find()")}} und {{jsxref("Array.prototype.findIndex()", "findIndex()")}} prüfen die Elemente im Array auf eine Bedingung, die einen {{Glossary("Truthy")}}-Wert zurückgibt mit dem bestimmt wird, ob weitere Durchläufe nötig sind.</p>
+</div>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<h3 id="forEach()_statt_einer_for-Schleife"><code>forEach()</code> statt einer for-Schleife</h3>
+
+<pre class="brush: js">const items = ['item1', 'item2', 'item3'];
+const copy = [];
+
+// Vorher
+for (let i=0; i&lt;items.length; i++) {
+  copy.push(items[i]);
+}
+
+// Nachher
+items.forEach(function(item){
+  copy.push(item);
+});</pre>
+
+<h3 id="Example:_Printing_the_contents_of_an_array" name="Example:_Printing_the_contents_of_an_array">Inhalte eines Arrays ausgeben</h3>
+
+<div class="blockIndicator note">
+<p><strong>Hinweis:</strong> Um den Inhalt eines Arrays vorformatiert auf der Konsole auszugeben können Sie auch {{jsxref("console.table()")}} verwenden. Dieses Beispiel zeigt eine weitere Möglichkeit mittels <code>forEach()</code>.</p>
+</div>
+
+<p>Der folgende Code gibt eine Zeile pro Element des Arrays aus:</p>
+
+<pre class="brush:js">function logArrayElements(element, index, array) {
+  console.log('a[' + index + '] = ' + element);
+}
+
+// Hinweis zur Auslassung: Es gibt keinen Eintrag mit dem Index 2
+// somit wird dieser übersprungen
+[2, 5, , 9].forEach(logArrayElements);
+// Ausgabe:
+// a[0] = 2
+// a[1] = 5
+// a[3] = 9
+</pre>
+
+<h3 id="Verwendung_von_thisArg">Verwendung von <code>thisArg</code></h3>
+
+<p>Das folgende (fingierte) Beispiel aktualisiert die Eigenschaften eines Objekts eines jeden Eintrags im Array:</p>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">Counter</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">this</span><span class="punctuation token">.</span>sum <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span>
+  <span class="keyword token">this</span><span class="punctuation token">.</span>count <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+Counter<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>add <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>array<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  array<span class="punctuation token">.</span><span class="function token">forEach</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>entry<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">this</span><span class="punctuation token">.</span>sum <span class="operator token">+</span><span class="operator token">=</span> entry<span class="punctuation token">;</span>
+    <span class="operator token">++</span><span class="keyword token">this</span><span class="punctuation token">.</span>count<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="comment token">// ^---- Beachten</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+<span class="keyword token">var</span> obj <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Counter</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+obj<span class="punctuation token">.</span><span class="function token">add</span><span class="punctuation token">(</span><span class="punctuation token">[</span><span class="number token">2</span><span class="punctuation token">,</span> <span class="number token">5</span><span class="punctuation token">,</span> <span class="number token">9</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+obj<span class="punctuation token">.</span>count<span class="punctuation token">;</span>
+<span class="comment token">// 3 </span>
+obj<span class="punctuation token">.</span>sum<span class="punctuation token">;</span>
+<span class="comment token">// 16</span></code></pre>
+
+<p>Da <code>forEach()</code> der Parameter <code>thisArg</code> (<code>this</code>) zur Verfügung steht, wird er bei jedem Aufruf an <code>callback</code> weitergegeben, um es als seinen <code>this</code>-Wert zu benutzen.</p>
+
+<div class="note">
+<p>Wenn das Funktionsargument durch die <a href="/de/docs/Web/JavaScript/Reference/Functions/Pfeilfunktionen">Pfeilnotation</a> angegeben wird, kann der Parameter <code>thisArg</code> weggelassen werden, da Pfeilfunktionen den {{jsxref("Operators/this", "this")}}-Wert lexikalisch vermerken.</p>
+</div>
+
+<h3 id="Example:_An_object_copy_function" name="Example:_An_object_copy_function">Funktion zum Kopieren eines Objekts</h3>
+
+<p>Der folgende Code erzeugt eine Kopie des übergebenen Objekts. Es gibt verschiedene Möglichkeiten, ein Objekt zu kopieren. Die Folgende ist nur eine davon und dient zur Veranschaulichung, wie <code>Array.prototype.forEach()</code> funktioniert, indem ECMAScript 5 <code>Object.*</code> Meta-Funktionen genutzt werden.</p>
+
+<pre class="brush: js">function copy(o) {
+  var copy = Object.create(Object.getPrototypeOf(o));
+  var propNames = Object.getOwnPropertyNames(o);
+
+  propNames.forEach(function(name) {
+    var desc = Object.getOwnPropertyDescriptor(o, name);
+    Object.defineProperty(copy, name, desc);
+  });
+
+  return copy;
+}
+
+var o1 = { a: 1, b: 2 };
+var o2 = copy(o1); // o2 sieht jetzt aus wie o1</pre>
+
+<h3 id="Wird_das_Array_während_des_Durchlaufes_modifiziert_könnten_andere_Elemente_übersprungen_werden.">Wird das Array während des Durchlaufes modifiziert, könnten andere Elemente übersprungen werden.</h3>
+
+<p>Das folgende Beispiel protokolliert "eins", "zwei", "vier". Wenn der Eintrag mit dem Wert "zwei" erreicht ist, wird der erste Eintrag des Arrays mit {{jsxref("Array.prototype.shift()", "shift()")}} entfernt, was dazu führt, dass alle übrigen Einträge um eine Position aufrücken. Weil Element "vier" jetzt an einer früheren Position im Array ist, wird "drei" übersprungen. <code>forEach()</code> erzeugt keine Kopie des Arrays vor dem Durchlauf.</p>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> words <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'eins'</span><span class="punctuation token">,</span> <span class="string token">'zwei'</span><span class="punctuation token">,</span> <span class="string token">'drei'</span><span class="punctuation token">,</span> <span class="string token">'vier'</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+words<span class="punctuation token">.</span><span class="function token">forEach</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>word<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>word<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>word <span class="operator token">===</span> <span class="string token">'zwei'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    words<span class="punctuation token">.</span><span class="function token">shift</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// eins</span>
+<span class="comment token">// zwei</span>
+<span class="comment token">// vier</span></code></pre>
+
+<h2 id="Polyfill" name="Polyfill">Polyfill</h2>
+
+<p><code>forEach()</code> wurde dem ECMA-262-Standard in der 5. Auflage hinzugefügt. Als solches ist es möglicherweise nicht in allen Implementierungen des Standards enthalten. Sie können dies umgehen, indem Sie den folgenden Code am Anfang Ihrer Skripte einfügen, um die Verwendung von <code>forEach()</code> in Implementierungen zu ermöglichen, die es nicht nativ unterstützen. Dieser Algorithmus entspricht dem in der 5. Auflage von ECMA-262 angegebenen Algorithmus, vorausgesetzt {{jsxref("Object")}} und {{jsxref("TypeError")}} haben ihre ursprünglichen Werte und <code>callback.call()</code> wird mit dem ursprünglichen Wert von {{jsxref("Function.prototype.call")}} ausgewertet.</p>
+
+<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.18
+// Reference: http://es5.github.io/#x15.4.4.18
+if (!Array.prototype.forEach) {
+
+  Array.prototype.forEach = function(callback, thisArg) {
+
+    var T, k;
+
+    if (this === null) {
+      throw new TypeError(' this is null or not defined');
+    }
+
+    // 1. Let O be the result of calling ToObject passing the |this| value as the argument.
+    var O = Object(this);
+
+    // 2. Let lenValue be the result of calling the Get internal method of O with the argument "length".
+    // 3. Let len be ToUint32(lenValue).
+    var len = O.length &gt;&gt;&gt; 0;
+
+    // 4. If IsCallable(callback) is false, throw a TypeError exception.
+    // See: http://es5.github.com/#x9.11
+    if (typeof callback !== "function") {
+      throw new TypeError(callback + ' is not a function');
+    }
+
+    // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
+    if (arguments.length &gt; 1) {
+      T = thisArg;
+    }
+
+    // 6. Let k be 0
+    k = 0;
+
+    // 7. Repeat, while k &lt; len
+    while (k &lt; len) {
+
+      var kValue;
+
+      // a. Let Pk be ToString(k).
+      //   This is implicit for LHS operands of the in operator
+      // b. Let kPresent be the result of calling the HasProperty internal method of O with argument Pk.
+      //   This step can be combined with c
+      // c. If kPresent is true, then
+      if (k in O) {
+
+        // i. Let kValue be the result of calling the Get internal method of O with argument Pk.
+        kValue = O[k];
+
+        // ii. Call the Call internal method of callback with T as the this value and
+        // argument list containing kValue, k, and O.
+        callback.call(T, kValue, k, O);
+      }
+      // d. Increase k by 1.
+      k++;
+    }
+    // 8. return undefined
+  };
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.18', 'Array.prototype.forEach')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser-Kompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.forEach")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.find()")}}</li>
+ <li>{{jsxref("Array.prototype.findIndex()")}}</li>
+ <li>{{jsxref("Array.prototype.map()")}}</li>
+ <li>{{jsxref("Array.prototype.filter()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+ <li>{{jsxref("Map.prototype.forEach()")}}</li>
+ <li>{{jsxref("Set.prototype.forEach()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/array/from/index.html b/files/de/web/javascript/reference/global_objects/array/from/index.html
new file mode 100644
index 0000000000..dd254fec88
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/array/from/index.html
@@ -0,0 +1,227 @@
+---
+title: Array.from()
+slug: Web/JavaScript/Reference/Global_Objects/Array/from
+tags:
+  - Array
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/from
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>Array.from()</strong></code> Methode erstellt eine neue, oberflächlich kopierte Array Instanz von einem Array-ähnlichen oder iterierbaren Objekt.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-from.html")}}</div>
+
+
+
+<h2 id="Parameters" name="Parameters">Syntax</h2>
+
+<pre>Array.from(arrayLike[, mapFn[, thisArg]])</pre>
+
+<h3 id="Parameters" name="Parameters"><span>Parameter</span></h3>
+
+<dl>
+ <dt><code>arrayLike</code></dt>
+ <dd>Ein Array-ähnliches oder iterierbares Objekt, welches zu einem Array konvertiert wird.</dd>
+ <dt><code>mapFn</code>{{Optional_inline}}</dt>
+ <dd>Map Funktion, welche auf jedes Element des Arrays angewendet wird.</dd>
+ <dt><code>thisArg</code>{{Optional_inline}}</dt>
+ <dd>Wert, welcher als <code>this</code> beim Ausführen von <code>mapFn</code> genutzt wird.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine neue {{jsxref("Array")}} Instanz.</p>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p><code><strong>Array.from()</strong></code> erstellt ein Array aus:</p>
+
+<ul>
+ <li>Array-ähnliche Objekte (Objekte mit einer <code>length</code> Eigenschaft und indexierten Elementen) oder</li>
+ <li><a href="/de/docs/Web/JavaScript/Guide/iterable">Iterierbare Objekte</a> (Objekte welche Elemente zurückgeben können, wie zum Beispiel {{jsxref("Map")}} und {{jsxref("Set")}}).</li>
+</ul>
+
+<p><strong>Array.from() </strong>hat einen optionalen Parameter <code>mapFn</code>, welcher es erlaubt eine {{jsxref("Array.prototype.map", "map")}} Funktion auf jedem Element des Arrays (oder Subklassen) das erstellt wird, auszuführen. Genauer gesagt, ist <code>Array.from(obj, mapFn, thisArg)</code> dasselbe wie <code>Array.from(obj).map(mapFn, thisArg)</code>, mit dem Unterschied, dass kein Array als Zwischenergebnis produziert wird. Das ist besonders wichtig für Array Subklassen, wie <a href="/de/docs/Web/JavaScript/Typed_arrays">typed Arrays</a>. Das Array des Zwischenergebnisses<br>
+ würde sonst Werte kürzen, um dem zutreffenden Typ zu entsprechen.</p>
+
+<p>Die <code>length</code> Eigenschaft der <code>from()</code> Methode ist 1.</p>
+
+<p>In ES2015 erlaubt die class Syntax, Subklassen für eingebaute und benutzerdefinierte Klassen. Klassenseitige statische Methoden wie <code>Array.from()</code><strong> </strong>sind von der Subklasse <code>Array</code> vererbt und erzeugen eine neue Instanz der Subklasse und nicht von <code>Array</code>.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Array_von_einem_String">Array von einem <code>String</code></h3>
+
+<pre class="brush: js">Array.from('foo');
+// ["f", "o", "o"];</pre>
+
+<h3 id="Array_von_einem_Set">Array von einem <code>Set</code></h3>
+
+<pre class="brush: js">var s = new Set(["foo", window]);
+Array.from(s);
+// ["foo", window]</pre>
+
+<h3 id="Array_von_einem_Map">Array von einem <code>Map</code></h3>
+
+<pre class="brush: js">var m = new Map([[1, 2], [2, 4], [4, 8]]);
+Array.from(m);
+// [[1, 2], [2, 4], [4, 8]]
+
+var mapper = new Map([['1', 'a'], ['2', 'b']]);
+Array.from(mapper.values());
+// ['a', 'b'];
+
+Array.from(mapper.keys());
+// ['1', '2'];</pre>
+
+<h3 id="Array_von_einem_Array_ähnlichen_Objekt_(arguments)">Array von einem Array ähnlichen Objekt (<code>arguments</code>)</h3>
+
+<pre class="brush: js">function f() {
+  return Array.from(arguments);
+}
+
+f(1, 2, 3);
+
+// [1, 2, 3]</pre>
+
+<h3 id="Einsatz_von_Arrow-Funktionen_und_Array.from">Einsatz von Arrow-Funktionen und <code>Array.from</code></h3>
+
+<pre class="brush: js">// Using an arrow function as the map function to
+// manipulate the elements
+Array.from([1, 2, 3], x =&gt; x + x);
+// [2, 4, 6]
+
+
+// Generate a sequence of numbers
+// Since the array is initialized with `undefined` on each position,
+// the value of `v` below will be `undefined`
+Array.from({length: 5}, (v, i) =&gt; i);
+// [0, 1, 2, 3, 4]
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p><code>Array.from()</code> wurde zum ECMA-262 Standard in der 6ten Version hinzugefügt. Es kann sein, dass diese in anderen Implementationen des Standards nicht verfügbar ist. Man kann das mit folgendem Code am Anfang eines Skriptes umgehen. Das Skript erlaubt das Benutzen von <code>Array.from()</code><strong> </strong>in Implementationen, welche Array.from() nicht nativ unterstützen. Dieser Algorithmus ist genau derselbe, welcher in EMCA-262, 6te Version implementiert ist, angenommen Object und TypeError haben ihre originalen Werte und <code>callback.call</code> evaluiert den Original Wert von {{jsxref("Function.prototype.call")}}. Außerdem können echte iterierbare Elemente nicht mit einem Polyfill implementiert werden. Diese Implementation unterstützt keine generischen iterierbaren Elemente so wie sie definiert sind in der 6ten Version von ECMA-262.</p>
+
+<pre class="brush: js">// Production steps of ECMA-262, Edition 6, 22.1.2.1
+if (!Array.from) {
+  Array.from = (function () {
+    var toStr = Object.prototype.toString;
+    var isCallable = function (fn) {
+      return typeof fn === 'function' || toStr.call(fn) === '[object Function]';
+    };
+    var toInteger = function (value) {
+      var number = Number(value);
+      if (isNaN(number)) { return 0; }
+      if (number === 0 || !isFinite(number)) { return number; }
+      return (number &gt; 0 ? 1 : -1) * Math.floor(Math.abs(number));
+    };
+    var maxSafeInteger = Math.pow(2, 53) - 1;
+    var toLength = function (value) {
+      var len = toInteger(value);
+      return Math.min(Math.max(len, 0), maxSafeInteger);
+    };
+
+    // The length property of the from method is 1.
+    return function from(arrayLike/*, mapFn, thisArg */) {
+      // 1. Let C be the this value.
+      var C = this;
+
+      // 2. Let items be ToObject(arrayLike).
+      var items = Object(arrayLike);
+
+      // 3. ReturnIfAbrupt(items).
+      if (arrayLike == null) {
+        throw new TypeError('Array.from requires an array-like object - not null or undefined');
+      }
+
+      // 4. If mapfn is undefined, then let mapping be false.
+      var mapFn = arguments.length &gt; 1 ? arguments[1] : void undefined;
+      var T;
+      if (typeof mapFn !== 'undefined') {
+        // 5. else
+        // 5. a If IsCallable(mapfn) is false, throw a TypeError exception.
+        if (!isCallable(mapFn)) {
+          throw new TypeError('Array.from: when provided, the second argument must be a function');
+        }
+
+        // 5. b. If thisArg was supplied, let T be thisArg; else let T be undefined.
+        if (arguments.length &gt; 2) {
+          T = arguments[2];
+        }
+      }
+
+      // 10. Let lenValue be Get(items, "length").
+      // 11. Let len be ToLength(lenValue).
+      var len = toLength(items.length);
+
+      // 13. If IsConstructor(C) is true, then
+      // 13. a. Let A be the result of calling the [[Construct]] internal method
+      // of C with an argument list containing the single item len.
+      // 14. a. Else, Let A be ArrayCreate(len).
+      var A = isCallable(C) ? Object(new C(len)) : new Array(len);
+
+      // 16. Let k be 0.
+      var k = 0;
+      // 17. Repeat, while k &lt; len… (also steps a - h)
+      var kValue;
+      while (k &lt; len) {
+        kValue = items[k];
+        if (mapFn) {
+          A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k);
+        } else {
+          A[k] = kValue;
+        }
+        k += 1;
+      }
+      // 18. Let putStatus be Put(A, "length", len, true).
+      A.length = len;
+      // 20. Return A.
+      return A;
+    };
+  }());
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.from', 'Array.from')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.from', 'Array.from')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.from")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Array.prototype.map()")}}</li>
+ <li>{{jsxref("TypedArray.from()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/array/includes/index.html b/files/de/web/javascript/reference/global_objects/array/includes/index.html
new file mode 100644
index 0000000000..64a51dfb73
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/array/includes/index.html
@@ -0,0 +1,181 @@
+---
+title: Array.prototype.includes()
+slug: Web/JavaScript/Reference/Global_Objects/Array/includes
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/includes
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>includes()</strong></code> Methode prüft, ob ein Array ein bestimmtes Element enthält, und gibt entsprechend <code>true</code> oder <code>false</code> aus. Es wird der selbe sameValueZero-Algorithmus benutzt, um ein gegebenes Element zu finden.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-includes.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>arr</var>.includes(<var>searchElement</var>[, <var>fromIndex</var>])</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>searchElement</code></dt>
+ <dd>Das zu suchende Element.</dd>
+ <dt><code>fromIndex </code> {{optional_inline}}</dt>
+ <dd>Die Position im Array, ab welcher die Suche nach <code>searchElement</code> beginnt. Bei einem negativen Wert fängt die Suche beim Index <code>array.length - fromIndex</code> an. Default ist 0.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<dl>
+ <dt>
+ <p>Ein {{jsxref("Boolean")}}.</p>
+ </dt>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js">[1, 2, 3].includes(2);     // true
+[1, 2, 3].includes(4);     // false
+[1, 2, 3].includes(3, 3);  // false
+[1, 2, 3].includes(3, -1); // true
+[1, 2, NaN].includes(NaN); // true
+</pre>
+
+<h3 id="fromIndex_ist_größer_oder_gleich_der_Arraylänge"><code>fromIndex</code> ist größer oder gleich der Arraylänge</h3>
+
+<p>Wenn <code>fromIndex</code> größer oder gleich der Arraylänge ist, wird <code>false</code> zurückgegeben. Das Array wird nicht durchsucht.</p>
+
+<pre class="brush: js">var arr = ['a', 'b', 'c'];
+
+arr.includes('c', 3);   // false
+arr.includes('c', 100); // false
+</pre>
+
+<h3 id="Berechneter_Index_ist_kleiner_als_0">Berechneter Index ist kleiner als 0</h3>
+
+<p>Wenn <code>fromIndex</code> negativ ist, wird der Index berechnet, an dem die Suche im Array nach <code>searchElement</code> beginnen soll. Wenn diese Berechnung einen Index kleiner als 0 ergibt, wird das ganze Array durchsucht.</p>
+
+<pre class="brush: js">// Arraylänge ist 3
+// fromIndex ist -100
+// Der berechnete Index ist 3 + (-100) = -97
+
+var arr = ['a', 'b', 'c'];
+
+arr.includes('a', -100); // true
+arr.includes('b', -100); // true
+arr.includes('c', -100); // true
+</pre>
+
+<h3 id="Einsatz_von_includes()_als_generische_Methode">Einsatz von <code>includes()</code> als generische Methode</h3>
+
+<p>Die <code>includes()</code>-Methode is absichtlich generisch. Die <code>this</code>-Referenz muss nicht auf ein Array-Objekt zeigen, so dass auch andere Objekte (z. B. Array-ähnliche Objekte) genutzt werden können. Das Beispiel zeigt, wie <code>includes()</code> auf den Parametern (<a href="/de/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>) einer Funktion aufgerufen wird.</p>
+
+<pre class="brush: js">(function() {
+  console.log([].includes.call(arguments, 'a')); // true
+  console.log([].includes.call(arguments, 'd')); // false
+})('a', 'b', 'c')
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-array.prototype.includes
+if (!Array.prototype.includes) {
+  Object.defineProperty(Array.prototype, 'includes', {
+    value: function(searchElement, fromIndex) {
+
+      if (this == null) {
+        throw new TypeError('"this" is null or not defined');
+      }
+
+      // 1. Let O be ? ToObject(this value).
+      var o = Object(this);
+
+      // 2. Let len be ? ToLength(? Get(O, "length")).
+      var len = o.length &gt;&gt;&gt; 0;
+
+      // 3. If len is 0, return false.
+      if (len === 0) {
+        return false;
+      }
+
+      // 4. Let n be ? ToInteger(fromIndex).
+      //    (If fromIndex is undefined, this step produces the value 0.)
+      var n = fromIndex | 0;
+
+      // 5. If n ≥ 0, then
+      //  a. Let k be n.
+      // 6. Else n &lt; 0,
+      //  a. Let k be len + n.
+      //  b. If k &lt; 0, let k be 0.
+      var k = Math.max(n &gt;= 0 ? n : len - Math.abs(n), 0);
+
+      function sameValueZero(x, y) {
+        return x === y || (typeof x === 'number' &amp;&amp; typeof y === 'number' &amp;&amp; isNaN(x) &amp;&amp; isNaN(y));
+      }
+
+      // 7. Repeat, while k &lt; len
+      while (k &lt; len) {
+        // a. Let elementK be the result of ? Get(O, ! ToString(k)).
+        // b. If SameValueZero(searchElement, elementK) is true, return true.
+        if (sameValueZero(o[k], searchElement)) {
+          return true;
+        }
+        // c. Increase k by 1.
+        k++;
+      }
+
+      // 8. Return false
+      return false;
+    }
+  });
+}
+</pre>
+
+<p>Sollten Sie wirklich veraltete JavaScript-Engines unterstützen müssen, die ihrerseits {{jsxref("Object.defineProperty", "Object.defineProperty")}} nicht unterstützen, ist es ratsam, die <code>Array.prototype</code>-Methode nicht mit dem Polyfill zu erweitern, da man diese nicht unabzählbar (non-enumerable) machen kann.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES7', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td>
+   <td>{{Spec2('ES7')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.includes")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("TypedArray.prototype.includes()")}}</li>
+ <li>{{jsxref("String.prototype.includes()")}}</li>
+ <li>{{jsxref("Array.prototype.indexOf()")}}</li>
+ <li>{{jsxref("Array.prototype.find()")}}</li>
+ <li>{{jsxref("Array.prototype.findIndex()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/array/index.html b/files/de/web/javascript/reference/global_objects/array/index.html
new file mode 100644
index 0000000000..d60c037b82
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/array/index.html
@@ -0,0 +1,460 @@
+---
+title: Array
+slug: Web/JavaScript/Reference/Global_Objects/Array
+tags:
+  - Array
+  - Example
+  - Global Objects
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array
+---
+<div>{{JSRef}}</div>
+
+<p>Das JavaScript-<strong><code>Array</code></strong> ist ein globales Objekt und Konstruktor für das Erstellen von Arrays, welche listenähnliche Objekte sind.</p>
+
+<p><strong>Ein Array erstellen</strong></p>
+
+<pre class="brush: js">var fruits = ['Apple', 'Banana'];
+
+console.log(fruits.length);
+// 2
+</pre>
+
+<p><strong>Zugriff auf ein Arrayelement (mit Index)</strong></p>
+
+<pre class="brush: js">var first = fruits[0];
+// Apple
+
+var last = fruits[fruits.length - 1];
+// Banana
+</pre>
+
+<p><strong>Über ein Array Iterieren</strong></p>
+
+<pre class="brush: js">fruits.forEach(function(item, index, array) {
+  console.log(item, index);
+});
+// Apple 0
+// Banana 1
+</pre>
+
+<p><strong>Ein Element am Ende des Arrays einfügen</strong></p>
+
+<pre class="brush: js">var newLength = fruits.push('Orange');
+// ["Apple", "Banana", "Orange"]
+</pre>
+
+<p><strong>Ein Element am Ende des Arrays löschen</strong></p>
+
+<pre class="brush: js">var last = fruits.pop(); // remove Orange (from the end)
+// ["Apple", "Banana"];
+</pre>
+
+<p><strong>Ein Element am Anfang des Arrays löschen</strong></p>
+
+<pre class="brush: js">var first = fruits.shift(); // remove Apple from the front
+// ["Banana"];
+</pre>
+
+<p><strong>Ein Element am Anfang des Arrays einfügen</strong></p>
+
+<pre class="brush: js">var newLength = fruits.unshift('Strawberry') // add to the front
+// ["Strawberry", "Banana"];
+</pre>
+
+<p><strong>Den Index eines Elements im Array ermitteln</strong></p>
+
+<pre class="brush: js">fruits.push('Mango');
+// ["Strawberry", "Banana", "Mango"]
+
+var pos = fruits.indexOf('Banana');
+// 1
+</pre>
+
+<p><strong>Ein Element mithilfe eines Index aus dem Array löschen</strong></p>
+
+<pre class="brush: js">var removedItem = fruits.splice(pos, 1); // this is how to remove an item
+
+// ["Strawberry", "Mango"]</pre>
+
+<p><strong>Elemente von einer Indexposition aus löschen</strong></p>
+
+<pre class="brush: js">var vegetables = ['Cabbage', 'Turnip', 'Radish', 'Carrot'];
+console.log(vegetables);
+// ["Cabbage", "Turnip", "Radish", "Carrot"]
+
+var pos = 1, n = 2;
+
+var removedItems = vegetables.splice(pos, n);
+// this is how to remove items, n defines the number of items to be removed,
+// from that position(pos) onward to the end of array.
+
+console.log(vegetables);
+// ["Cabbage", "Carrot"] (the original array is changed)
+
+console.log(removedItems);
+// ["Turnip", "Radish"]</pre>
+
+<p><strong>Ein Array kopieren</strong></p>
+
+<pre class="brush: js">var shallowCopy = fruits.slice(); // this is how to make a copy
+// ["Strawberry", "Mango"]
+</pre>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>[<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>]
+new Array(<var>element0</var>, <var>element1</var>[, ...[, <var>elementN</var>]])
+new Array(<var>arrayLength</var>)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>element<em>N</em></code></dt>
+ <dd>Ein JavaScript-Array wird mit den angegebenen Elementen initialisiert, es sei denn, an den <code>Array</code>-Konstruktor wird eine einzelne Zahl übergeben (siehe <code>arrayLength-</code>Parameter unten). Beachte, dass dieser Sonderfall nur für JavaScript-Arrays gilt, die mit dem <code>Array</code>-Konstruktor erstellt wurden, nicht für Array-Literale, die mit der Klammer-Syntax erstellt wurden.</dd>
+ <dt><code>arrayLength</code></dt>
+ <dd>Wenn lediglich eine Ganzzahl zwischen 0 und 2<sup>32</sup>-1 (inklusive) als Argument an den <code>Array</code>-Konstruktor übergeben wird, ist der Rückgabewert ein JavaScript Array, dessen <code>length</code>-Eigenschaft dieser Zahl entspricht. (<strong>Hinweis:</strong> Dies impliziert ein Array mit leeren Elementen einer Anzahl von <code>arrayLength</code>, nicht Elementen mit Wert <code>undefined</code>). Handelt es sich bei dem Argument um irgendeine andere Zah,l wird eine {{jsxref("Global_Objects/RangeError", "RangeError")}} Exception ausgelöst.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p>Arrays sind listenähnliche Objekte, dessen Prototyp Methoden für Durchlauf- und Mutationsoperationen besitzt. Weder die Länge eines JavaScript-Arrays noch die Typen seiner Elemente sind fix. Da sich die Länge eines Arrays jederzeit ändern kann und Daten an nicht zusammenhängenden Positionen im Array gespeichert werden können, ist nicht garantiert, dass JavaScript-Arrays verdichtet sind; dies hängt davon ab, wie der Programmierer sie benutzt. Im Allgemeinen sind dies praktische Merkmale; falls jedoch diese Funktionalität für Ihren Anwendungsfall nicht wünschenswert ist, sollten Sie in Betracht ziehen, typisierte Arrays zu verwenden.</p>
+
+<p>Arrays können keine Strings als Index benutzen (wie bei<a class="external" href="http://www.andrewdupont.net/2006/05/18/javascript-associative-arrays-considered-harmful/"> assoziativen Arrays</a>), sondern müssen Ganzzahlen verwenden. Der Zugriff mit nicht-ganzzahligen Werten über die <a href="/de/docs/Web/JavaScript/Guide/Mit_Objekten_arbeiten#Objekte_und_Eigenschaften">Klammernotation</a> (oder <a href="/de/docs/Web/JavaScript/Reference/Operators/Property_Accessors">Punktnotation</a>) bezieht sich nicht auf ein Element im Array, sondern legt eine Eigenschaft des Array-Objekts fest oder greift darauf zu. Die Eigenschaften des Array-Objekts und die Liste der Array-Elemente sind voneinander getrennt. Die <a href="/de/docs/Web/JavaScript/Guide/Indexed_collections#Array-Methoden">Durchlauf- und Mutationsoperationen</a> des Arrays können nicht auf diese benannten Eigenschaften angewendet werden.</p>
+
+<h3 id="Accessing_array_elements" name="Accessing_array_elements">Auf Elemente des Arrays zugreifen</h3>
+
+<p>JavaScript-Arrays sind nullindiziert: Das erste Element eines Arrays befindet sich am Index <code>0</code>, das letzte Element befindet sich an demjenigen Index, der dem Wert der Eigenschaft {{jsxref ("Array.length", "length")}} des Arrays minus 1 entspricht. Die Verwendung einer ungültigen Indexnummer gibt <code>undefined</code> zurück.</p>
+
+<pre class="brush: js">var arr = ['Das erste Element', 'Das zweite Element', 'Das letzte Element'];
+console.log(arr[0]);              // Ausgabe: 'Das erste Element'
+console.log(arr[1]);              // Ausgabe: 'Das zweite Element'
+console.log(arr[arr.length - 1]); // Ausgabe: 'Das letzte Element'
+</pre>
+
+<p>Array-Elemente sind Objekteigenschaften genau so wie <code>toString</code>. Wenn man jedoch wie folgt auf ein Element eines Arrays versucht zuzugreifen, wird ein Syntaxfehler ausgegeben, da der Name der Eigenschaft ungültig ist:</p>
+
+<pre class="brush: js">console.log(arr.0); // Syntaxfehler
+</pre>
+
+<p>Es gibt nichts Besonderes an JavaScript-Arrays und den Eigenschaften, die dies verursachen. JavaScript-Eigenschaften, die mit einer Ziffer beginnen, können nicht mit Punktnotation referenziert werden und müssen über Klammernotation aufgerufen werden. Wenn man beispielsweise ein Objekt mit einer Eigenschaft namens <code>'3d'</code> hat, kann es nur in Klammern angegeben werden, z. B.:</p>
+
+<pre class="brush: js">var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010];
+console.log(years.0);   // ein Syntaxfehler
+console.log(years[0]);  // funktioniert
+</pre>
+
+<pre class="brush: js">renderer.3d.setTexture(model, 'character.png');     // ein Syntaxfehler
+renderer['3d'].setTexture(model, 'character.png');  // works funktioniert
+</pre>
+
+<p>Beachten Sie, dass im obigen Beispiel <code>'3d'</code> in Anführungszeichen gesetzt werden musste. Es ist auch möglich, die JavaScript-Array-Indizes in Anführungszeichen zu setzen (z. B. <code>years['2']</code> statt <code>years[2]</code>), obwohl dies nicht erforderlich ist. Die 2 in <code>years[2]</code> wird von der JavaScript-Engine durch eine implizite Konvertierung mittels <code>toString</code> zwingend in eine Zeichenfolge umgewandelt. Aus diesem Grund beziehen sich <code>'2'</code> und <code>'02'</code> auf zwei unterschiedliche Elemente des <code>years</code>-Objekts und das folgende Beispiel würde <code>true</code> ergeben:</p>
+
+<pre class="brush: js">console.log(years['2'] != years['02']);
+</pre>
+
+<p>Ebenso kann auf Objekteigenschaften, die zufällig reservierte Wörter(!) sind, nur als Stringliterale in Klammern zugegriffen werden:</p>
+
+<pre class="brush: js">var promise = {
+  'var'  : 'text',
+  'array': [1, 2, 3, 4]
+};
+
+console.log(promise['var']);
+</pre>
+
+<h3 id="Relationship_between_length_and_numerical_properties" name="Relationship_between_length_and_numerical_properties">Beziehung zwischen <code>length</code> und numerischen Eigenschaften</h3>
+
+<p>Die Eigenschaft {{jsxref("Array.length", "length")}} eines JavaScript-Arrays und numerische Eigenschaften sind miteinander verbunden. Etliche der eingebauten Array-Methoden (z. B. {{jsxref("Array.join", "join()")}}, {{jsxref("Array.slice", "slice()")}}, {{jsxref("Array.indexOf", "indexOf()")}}, etc.) berücksichtigen den Wert der {{jsxref("Array.length", "length")}} Eigenschaft eines Arrays, wenn diese aufgerufen werden. Andere Methoden (z. B. {{jsxref("Array.push", "push()")}}, {{jsxref("Array.splice", "splice()")}}, etc.) bewirken ebenfalls eine Veränderung der Eigenschaft {{jsxref("Array.length", "length")}} eines Arrays.</p>
+
+<pre class="brush: js">var fruits = [];
+fruits.push('banana', 'apple', 'peach');
+
+console.log(fruits.length); // 3
+</pre>
+
+<p>Wird einem JavaScript-Array eine Eigenschaft zugewiesen, bei der es sich um einen gültigen Array-Index handelt und dieser Index außerhalb der aktuellen Grenzen des Arrays liegt, aktualisiert die Engine die Eigenschaft {{jsxref("Array.length", "length")}} des Arrays entsprechend:</p>
+
+<pre class="brush: js">fruits[5] = 'mango';
+console.log(fruits[5]); // 'mango'
+console.log(Object.keys(fruits));  // ['0', '1', '2', '5']
+console.log(fruits.length); // 6
+</pre>
+
+<p>Beim Erhöhen von {{jsxref("Array.length", "length")}}.</p>
+
+<pre class="brush: js">fruits.length = 10;
+console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
+console.log(fruits.length); // 10
+</pre>
+
+<div>
+<p>Beim Verringern von {{jsxref("Array.length", "length")}} werden jedoch Elemente gelöscht.</p>
+
+<pre class="brush: js">fruits.length = 2;
+console.log(Object.keys(fruits)); // ['0', '1']
+console.log(fruits.length); // 2
+</pre>
+
+<p>Der Artikel zu {{jsxref("Array.length")}} geht genauer darauf ein.</p>
+</div>
+
+<h3 id="Creating_an_array_using_the_result_of_a_match" name="Creating_an_array_using_the_result_of_a_match">Erstellen eines Arrays als Ergebnis einer Übereinstimmung</h3>
+
+<p>Das Ergebnis einer Übereinstimmung eines regulären Ausdrucks und einem String kann ein JavaScript-Array erstellen. Dieses Array verfügt über Eigenschaften und Elemente, die Informationen zur Übereinstimmung beinhalten. Solch ein Array wird von {{jsxref("RegExp.exec")}}, {{jsxref("String.match")}} und {{jsxref("String.replace")}} zurückgegeben. Am folgenden Beispiel sollen diese Eigenschaften und Elemente erläutert werden, die Tabelle darunter enthält; weitere Informationen hierzu:</p>
+
+<pre class="brush: js">// Übereinstimmung eines d, gefolgt von einem oder mehreren b, gefolgt von einem d
+// Übereinstimmende b's und die darauf folgenden d's merken
+// Groß-/Kleinschreibung ignorieren
+
+var myRegEx = /d(b+)(d)/i;
+var myArray = myRegEx.exec('cdbBdbsbz');</pre>
+
+<p>Die Eigenschaften und Elemente werden wie folgt zurückgegeben:</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td class="header">Eigenschaft/Element</td>
+   <td class="header">Beschreibung</td>
+   <td class="header">Beispiel</td>
+  </tr>
+  <tr>
+   <td><code>input</code></td>
+   <td>
+    <p>Eine schreibgeschützte Eigenschaft, die die ursprüngliche Zeichenfolge widerspiegelt, mit der der reguläre Ausdruck abgeglichen wurde.</p>
+   </td>
+   <td>cdbBdbsbz</td>
+  </tr>
+  <tr>
+   <td><code>index</code></td>
+   <td>Eine schreibgeschützte Eigenschaft, bei der es sich um den nullbasierten Index der Übereinstimmung in der Zeichenfolge handelt.</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td><code>[0]</code></td>
+   <td>Ein schreibgeschütztes Element, das die zuletzt übereinstimmenden Zeichen angibt.</td>
+   <td>dbBd</td>
+  </tr>
+  <tr>
+   <td><code>[1], ...[n]</code></td>
+   <td>Schreibgeschützte Elemente, die die in Klammern gesetzten Unterzeichenfolgen angeben, sofern sie im regulären Ausdruck enthalten sind. Die Anzahl der möglichen geklammerten Teilzeichenfolgen ist unbegrenzt.</td>
+   <td>[1]: bB<br>
+    [2]: d</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Properties" name="Properties">Eigenschaften</h2>
+
+<dl>
+ <dt>Array.length</dt>
+ <dd>Die Eigenschaft <code>length</code> des <code>Array-</code>Konstruktors, deren Wert 1 ist.</dd>
+ <dt>{{jsxref("Array.@@species", "get Array[@@species]")}}</dt>
+ <dd>Die Konstruktorfunktion zum Erstellen abgeleiteter Objekte.</dd>
+ <dt>{{jsxref("Array.prototype")}}</dt>
+ <dd>Ermöglicht das Hinzufügen von Eigenschaften zu allen Array-Objekten.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Methoden</h2>
+
+<dl>
+ <dt>{{jsxref("Array.from()")}}</dt>
+ <dd>Erstellt eine neue <code>Array</code>-Instanz aus einem Array-ähnlichen oder iterierbaren Objekt.</dd>
+ <dt>{{jsxref("Array.isArray()")}}</dt>
+ <dd>Gibt <code>true</code> zurück, wenn eine Variable ein Array ist, andernfalls <code>false</code>.</dd>
+ <dt>{{jsxref("Array.of()")}}</dt>
+ <dd>Erstellt eine neue <code>Array</code>-Instanz mit einer variablen Anzahl von Argumenten, unabhängig von Anzahl oder Typ der Argumente.</dd>
+</dl>
+
+<h2 id="Array_instances" name="Array_instances"><code>Array</code> Instanzen</h2>
+
+<p>Alle <code>Array</code>-Instanzen erben von {{jsxref("Array.prototype")}}. Das Prototypobjekt des <code>Array</code>-Konstruktors kann geändert werden, um alle <code>Array</code>-Instanzen zu beeinflussen.</p>
+
+<h3 id="Methods_of_array_instances" name="Methods_of_array_instances">Eigenschaften</h3>
+
+<div>{{page('/de/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Eigenschaften')}}</div>
+
+<h3 id="Methods_of_array_instances" name="Methods_of_array_instances">Methoden</h3>
+
+<h4 id="Mutator_methods" name="Mutator_methods">Mutationsmethoden</h4>
+
+<div>{{page('/de/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Mutationsmethoden')}}</div>
+
+<h4 id="Accessor_methods" name="Accessor_methods">Zugriffsmethoden</h4>
+
+<div>{{page('/de/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Zugriffsmethoden')}}</div>
+
+<h4 id="Iteration_methods" name="Iteration_methods">Zählmethoden</h4>
+
+<div>{{page('/de/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Zählmethoden')}}</div>
+
+<h2 id="Array_generic_methods" name="Array_generic_methods">Generische <code>Array</code>-Methoden</h2>
+
+<div class="warning">
+<p><strong>Generische Array Methoden sind nicht standardisiert, veraltet und werden in naher Zukunft entfernt. </strong></p>
+</div>
+
+<p>Manchmal möchte man Array-Methoden auf Strings oder andere Array-ähnliche Objekte anwenden (z. B. auf {{jsxref("Functions/arguments", "Argumente", "", 1)}} von Funktionen). Auf diese Weise behandelt man eine Zeichenfolge wie ein Array von Zeichen (oder ein nicht-Array wie ein Array). Um beispielsweise zu prüfen, ob jedes Zeichen in der Variablen <code><em>str</em></code> ein Buchstabe ist, würde man Folgendes schreiben:</p>
+
+<pre class="brush: js">function isLetter(character) {
+  return character &gt;= 'a' &amp;&amp; character &lt;= 'z';
+}
+
+if (Array.prototype.every.call(str, isLetter)) {
+  console.log("The string '" + str + "' contains only letters!");
+}</pre>
+
+<p>Diese Schreibweise wurde in JavaScript 1.6 von einer kürzeren abgelöst:</p>
+
+<pre class="brush: js">if (Array.every(str, isLetter)) {
+  console.log("The string '" + str + "' contains only letters!");
+}
+</pre>
+
+<p>{{jsxref("Global_Objects/String", "Generische Methoden", "#Generische_String-Methoden", 1)}} gibt es ebenfalls für {{jsxref("Global_Objects/String", "Strings")}}.</p>
+
+<p>Diese sind <strong>nicht</strong> Teil der ECMAScript-Standards und werden von nicht-Gecko-Browsern nicht unterstützt. Als Standardvariante können Sie Ihr Objekt mit {{jsxref("Array.from()")}} in ein richtiges Array konvertieren. Diese Methode wird in alten Browsern möglicherweise nicht unterstützt:</p>
+
+<pre class="brush: js">if (Array.from(str).every(isLetter)) {
+  console.log("The string '" + str + "' contains only letters!");
+}
+</pre>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<h3 id="Example_Creating_an_array" name="Example:_Creating_an_array">Erstellen eines Arrays</h3>
+
+<p>Das folgende Beispiel erzeugt ein Array <code>msgArray</code> mit der Länge 0, weist dann <code>msgArray[0]</code> und <code>msgArray[99]</code> Werte zu und ändert somit die Länge des Arrays auf 100.</p>
+
+<pre class="brush: js">var msgArray = [];
+msgArray[0] = 'Hello';
+msgArray[99] = 'world';
+
+if (msgArray.length === 100) {
+  console.log('Die Länge ist 100.');
+}
+</pre>
+
+<h3 id="Example_Creating_a_two-dimensional_array" name="Example:_Creating_a_two-dimensional_array">Erstellen eines zweidimensionalen Arrays</h3>
+
+<p>Im Folgenden wird ein Schachbrett als zweidimensionales Array von Strings erzeugt. Der erste Zug erfolgt durch Kopieren des 'p' in (6,4) nach (4,4). Die alte Position (6,4) wird als leer markiert.</p>
+
+<pre class="brush: js">var board = [
+  ['R','N','B','Q','K','B','N','R'],
+  ['P','P','P','P','P','P','P','P'],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  ['p','p','p','p','p','p','p','p'],
+  ['r','n','b','q','k','b','n','r'] ];
+
+console.log(board.join('\n') + '\n\n');
+
+// Ziehe Bauern 2 Felder vorwärts
+board[4][4] = board[6][4];
+board[6][4] = ' ';
+console.log(board.join('\n'));
+</pre>
+
+<p>Das ist die Ausgabe:</p>
+
+<pre class="eval">R,N,B,Q,K,B,N,R
+P,P,P,P,P,P,P,P
+ , , , , , , ,
+ , , , , , , ,
+ , , , , , , ,
+ , , , , , , ,
+p,p,p,p,p,p,p,p
+r,n,b,q,k,b,n,r
+
+R,N,B,Q,K,B,N,R
+P,P,P,P,P,P,P,P
+ , , , , , , ,
+ , , , , , , ,
+ , , , ,p, , ,
+ , , , , , , ,
+p,p,p,p, ,p,p,p
+r,n,b,q,k,b,n,r
+</pre>
+
+<h3 id="Einsatz_eines_Arrays_um_Werte_tabellarisch_auszugeben">Einsatz eines Arrays, um Werte tabellarisch auszugeben</h3>
+
+<pre class="brush: js">values = [];
+for (var x = 0; x &lt; 10; x++){
+ values.push([
+  2 ** x,
+  2 * x ** 2
+ ])
+};
+console.table(values)</pre>
+
+<p>Das Resultat ist:</p>
+
+<pre class="eval">0   1   0
+1   2   2
+2   4   8
+3   8   18
+4   16  32
+5   32  50
+6   64  72
+7   128 98
+8   256 128
+9   512 162</pre>
+
+<p>(Die erste Spalte ist der Index)</p>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4', 'Array')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Neue Methoden hinzugefügt: {{jsxref("Array.isArray")}}, {{jsxref("Array.prototype.indexOf", "indexOf")}}, {{jsxref("Array.prototype.lastIndexOf", "lastIndexOf")}}, {{jsxref("Array.prototype.every", "every")}}, {{jsxref("Array.prototype.some", "some")}}, {{jsxref("Array.prototype.forEach", "forEach")}}, {{jsxref("Array.prototype.map", "map")}}, {{jsxref("Array.prototype.filter", "filter")}}, {{jsxref("Array.prototype.reduce", "reduce")}}, {{jsxref("Array.prototype.reduceRight", "reduceRight")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array-objects', 'Array')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Neue Methoden hinzugefügt: {{jsxref("Array.from")}}, {{jsxref("Array.of")}}, {{jsxref("Array.prototype.find", "find")}}, {{jsxref("Array.prototype.findIndex", "findIndex")}}, {{jsxref("Array.prototype.fill", "fill")}}, {{jsxref("Array.prototype.copyWithin", "copyWithin")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES7', '#sec-array-objects', 'Array')}}</td>
+   <td>{{Spec2('ES7')}}</td>
+   <td>Neue Methode hinzugefügt: {{jsxref("Array.prototype.includes()")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array-objects', 'Array')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Array")}}</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Guide/Mit_Objekten_arbeiten#Indexing_object_properties">JavaScript Guide: “Indexing object properties”</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Guide/Predefined_Core_Objects#Array_Object">JavaScript Guide: “Predefined Core Objects: <code>Array</code> Object”</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Operators/Array_comprehensions">Array comprehensions</a></li>
+ <li><a href="https://github.com/plusdude/array-generics">Polyfill für JavaScript 1.8.5 generische Arrays und ECMAScript 5 Array Extras</a></li>
+ <li><a href="/de/docs/JavaScript_typed_arrays">Typisierte Arrays</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/array/indexof/index.html b/files/de/web/javascript/reference/global_objects/array/indexof/index.html
new file mode 100644
index 0000000000..1768427494
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/array/indexof/index.html
@@ -0,0 +1,226 @@
+---
+title: Array.prototype.indexOf()
+slug: Web/JavaScript/Reference/Global_Objects/Array/indexOf
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/indexOf
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">Die Methode <code><strong>indexOf()</strong></code> gibt den Index zurück, an dem ein bestimmtes Element im Array zum ersten Mal auftritt oder -1 wenn es nicht vorhanden ist.</span></p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Für die String Methode, siehe {{jsxref("String.prototype.indexOf()")}}.</p>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/js/array-indexof.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>arr</var>.indexOf(<var>searchElement[</var>, <var>fromIndex]</var>)</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>searchElement</code></dt>
+ <dd>Element, das im Array gefunden werden soll.</dd>
+ <dt><code>fromIndex</code> {{optional_inline}}</dt>
+ <dd>Der Index, an dem die Suche beginnen soll. Wenn dieser Index größer oder gleich der Länge des Arrays ist, wird -1 zurückgegeben, d. h. das Array wird nicht durchsucht. Ist der Startindex negativ, wird er als Versatz vom Ende des Arrays verstanden. Das Array wird dann immer noch von vorne nach hinten durchsucht.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Der Index, an dem das gefundene Element das erste Mal angetroffen wurde, andernfalls <strong>-1</strong> wenn nichts gefunden wurde.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p><code>indexOf()</code> vergleicht <code>searchElement</code> mit Elementen des Arrays mittels <a href="/de/docs/Web/JavaScript/Reference/Operators/Vergleichsoperatoren#Die_Gleichheitsoperatoren_anwenden">strikter Gleichheit</a> (dieselbe Methode, die bei <code>===</code> angewendet wird).</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Verwendung_von_indexOf()">Verwendung von <code>indexOf()</code></h3>
+
+<p>Das folgende Beispiel nutzt <code>indexOf()</code> um Werte in einem Array zu ermitteln.</p>
+
+<pre class="brush: js">var array = [2, 9, 9];
+array.indexOf(2);     // 0
+array.indexOf(7);     // -1
+array.indexOf(9, 2);  // 2
+array.indexOf(2, -1); // -1
+array.indexOf(2, -3); // 0
+</pre>
+
+<h3 id="Alle_Vorkommnisse_eines_Elements_ermitteln">Alle Vorkommnisse eines Elements ermitteln</h3>
+
+<pre class="brush: js">var indices = [];
+var array = ['a', 'b', 'a', 'c', 'a', 'd'];
+var element = 'a';
+var idx = array.indexOf(element);
+while (idx != -1) {
+  indices.push(idx);
+  idx = array.indexOf(element, idx + 1);
+}
+console.log(indices);
+// [0, 2, 4]
+</pre>
+
+<h3 id="Ermitteln_ob_ein_Element_in_einem_Array_existiert_und_das_Array_aktualisieren">Ermitteln, ob ein Element in einem Array existiert und das Array aktualisieren</h3>
+
+<pre class="brush: js">function updateVegetablesCollection (veggies, veggie) {
+    if (veggies.indexOf(veggie) === -1) {
+        veggies.push(veggie);
+        console.log('New veggies collection is : ' + veggies);
+    } else if (veggies.indexOf(veggie) &gt; -1) {
+        console.log(veggie + ' already exists in the veggies collection.');
+    }
+}
+
+var veggies = ['potato', 'tomato', 'chillies', 'green-pepper'];
+
+updateVegetablesCollection(veggies, 'spinach');
+// New veggies collection is : potato,tomato,chillies,green-pepper,spinach
+updateVegetablesCollection(veggies, 'spinach');
+// spinach already exists in the veggies collection.
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p><code>indexOf()</code> wurde dem ECMA-262-Standard in der 5. Auflage hinzugefügt. Als solches ist es möglicherweise nicht in allen Implementierungen des Standards enthalten. Sie können dies umgehen, indem Sie den folgenden Code am Anfang Ihrer Skripte einfügen, um die Verwendung von <code>indexOf()</code> in Implementierungen zu ermöglichen, die es nicht nativ unterstützen. Dieser Algorithmus entspricht dem in der 5. Auflage von ECMA-262 angegebenen Algorithmus, vorausgesetzt {{jsxref("TypeError")}} und {{jsxref("Math.abs()")}} haben ihre ursprünglichen Werte.</p>
+
+<pre class="brush: js">if (!Array.prototype.indexOf)  Array.prototype.indexOf = (function(Object, max, min){
+  "use strict";
+  return function indexOf(member, fromIndex) {
+    if(this===null||this===undefined)throw TypeError("Array.prototype.indexOf called on null or undefined");
+
+    var that = Object(this), Len = that.length &gt;&gt;&gt; 0, i = min(fromIndex | 0, Len);
+    if (i &lt; 0) i = max(0, Len+i); else if (i &gt;= Len) return -1;
+
+    if(member===void 0){ for(; i !== Len; ++i) if(that[i]===void 0 &amp;&amp; i in that) return i; // undefined
+    }else if(member !== member){   for(; i !== Len; ++i) if(that[i] !== that[i]) return i; // NaN
+    }else                           for(; i !== Len; ++i) if(that[i] === member) return i; // all else
+
+    return -1; // if the value was not found, then return -1
+  };
+})(Object, Math.max, Math.min);
+</pre>
+
+<p>Wenn Sie sich jedoch mehr für all die kleinen technischen Elemente interessieren, die durch den ECMA-Standard definiert werden, und Leistung oder Prägnanz weniger von Belang sind, dann könnte diese erklärende Polyfill-Lösung nützlicher für Sie sein.</p>
+
+<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.14
+// Reference: http://es5.github.io/#x15.4.4.14
+if (!Array.prototype.indexOf) {
+  Array.prototype.indexOf = function(searchElement, fromIndex) {
+
+    var k;
+
+    // 1. Let o be the result of calling ToObject passing
+    //    the this value as the argument.
+    if (this == null) {
+      throw new TypeError('"this" is null or not defined');
+    }
+
+    var o = Object(this);
+
+    // 2. Let lenValue be the result of calling the Get
+    //    internal method of o with the argument "length".
+    // 3. Let len be ToUint32(lenValue).
+    var len = o.length &gt;&gt;&gt; 0;
+
+    // 4. If len is 0, return -1.
+    if (len === 0) {
+      return -1;
+    }
+
+    // 5. If argument fromIndex was passed let n be
+    //    ToInteger(fromIndex); else let n be 0.
+    var n = fromIndex | 0;
+
+    // 6. If n &gt;= len, return -1.
+    if (n &gt;= len) {
+      return -1;
+    }
+
+    // 7. If n &gt;= 0, then Let k be n.
+    // 8. Else, n&lt;0, Let k be len - abs(n).
+    //    If k is less than 0, then let k be 0.
+    k = Math.max(n &gt;= 0 ? n : len - Math.abs(n), 0);
+
+    // 9. Repeat, while k &lt; len
+    while (k &lt; len) {
+      // a. Let Pk be ToString(k).
+      //   This is implicit for LHS operands of the in operator
+      // b. Let kPresent be the result of calling the
+      //    HasProperty internal method of o with argument Pk.
+      //   This step can be combined with c
+      // c. If kPresent is true, then
+      //    i.  Let elementK be the result of calling the Get
+      //        internal method of o with the argument ToString(k).
+      //   ii.  Let same be the result of applying the
+      //        Strict Equality Comparison Algorithm to
+      //        searchElement and elementK.
+      //  iii.  If same is true, return k.
+      if (k in o &amp;&amp; o[k] === searchElement) {
+        return k;
+      }
+      k++;
+    }
+    return -1;
+  };
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.14', 'Array.prototype.indexOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.indexOf")}}</p>
+</div>
+
+<h2 id="Kompatibilitätshinweise">Kompatibilitätshinweise</h2>
+
+<ul>
+ <li>Ab Firefox 47 {{geckoRelease(47)}} gibt diese Methode nicht mehr -0 zurück, z. B. gibt <code>[0].indexOf(0, -0)</code> jetzt immer <code>+0</code> zurück ({{bug(1242043)}}).</li>
+</ul>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.lastIndexOf()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.indexOf()")}}</li>
+ <li>{{jsxref("String.prototype.indexOf()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/array/isarray/index.html b/files/de/web/javascript/reference/global_objects/array/isarray/index.html
new file mode 100644
index 0000000000..2bdca7596a
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/array/isarray/index.html
@@ -0,0 +1,121 @@
+---
+title: Array.isArray()
+slug: Web/JavaScript/Reference/Global_Objects/Array/isArray
+tags:
+  - Array
+  - ECMAScript5
+  - JavaScript
+  - Method
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/isArray
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>Array.isArray()</strong></code> Funktion prüft, ob das übergebene Objekt ein {{jsxref("Array")}} ist.</p>
+
+<pre class="brush: js">Array.isArray([1, 2, 3]);  // true
+Array.isArray({foo: 123}); // false
+Array.isArray('foobar');   // false
+Array.isArray(undefined);  // false
+</pre>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Array.isArray(<var>obj</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parameter</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Der zu überprüfende Wert.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Wenn der Wert ein {{jsxref("Array")}} ist wird <code>true</code> zurückgegeben, andernfalls <code>false</code>.</p>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p>Wenn der Wert ein {{jsxref("Array")}} ist, wir <code>true</code> zurückzugeben, andernfalls <code>false</code>.</p>
+
+<p>Eine detailliertere Beschreibung ist im Artikel <a href="http://web.mit.edu/jwalden/www/isArray.html">Determining with absolute accuracy whether or not a JavaScript object is an array</a> enthalten (auf Englisch). Wird eine {{jsxref("TypedArray")}}-Instanz geprüft, wird immer <code>false</code> zurückgegeben.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_Array.isArray">Einsatz von Array.isArray</h3>
+
+<pre class="brush: js">// die folgenden Ausdrücke geben true zurück
+Array.isArray([]);
+Array.isArray([1]);
+Array.isArray(new Array());
+Array.isArray(new Array('a', 'b', 'c', 'd'));
+Array.isArray(new Array(3));
+// wenig bekannt: Array.prototype ist selbst ein Array.
+Array.isArray(Array.prototype);
+
+// die folgenden Ausdrücke geben alle false zurück
+Array.isArray();
+Array.isArray({});
+Array.isArray(null);
+Array.isArray(undefined);
+Array.isArray(17);
+Array.isArray("Array");
+Array.isArray(true);
+Array.isArray(false);
+Array.isArray(new Uint8Array(32));
+Array.isArray({ __proto__ : Array.prototype });
+</pre>
+
+<h3 id="instanceof_vs_isArray"><code>instanceof</code> vs <code>isArray</code></h3>
+
+<p>Wenn auf eine <code>Array</code> Instanz geprüft wird, ist <code>Array.isArray</code> besser geeignet als <code>instanceof</code>, weil es auch mit <code>iframes</code> funktioniert.</p>
+
+<pre class="brush: js">var iframe = document.createElement('iframe');
+document.body.appendChild(iframe);
+xArray = window.frames[window.frames.length-1].Array;
+var arr = new xArray(1,2,3); // [1,2,3]
+
+// Richtiges Prüfen für Arrays
+Array.isArray(arr);   // true
+// Als nicht richtig angesehen, weil es nicht mit iframes funktioniert
+arr instanceof Array; // false
+</pre>
+
+<h2 id="Compatibility" name="Compatibility">Polyfill</h2>
+
+<p>Der folgende Code implementiert die Methode, wenn <code>Array.isArray()</code> nicht nativ unterstützt wird.</p>
+
+<pre class="brush: js">if(!Array.isArray) {
+  Array.isArray = function (vArg) {
+    return Object.prototype.toString.call(vArg) === "[object Array]";
+  };
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.isarray', 'Array.isArray')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.isArray")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/array/join/index.html b/files/de/web/javascript/reference/global_objects/array/join/index.html
new file mode 100644
index 0000000000..4e986bebda
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/array/join/index.html
@@ -0,0 +1,114 @@
+---
+title: Array.prototype.join()
+slug: Web/JavaScript/Reference/Global_Objects/Array/join
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/join
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">Die <code><strong>join()</strong></code> Methode verkettet alle Elemente eines Arrays (oder <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Indexed_collections#Working_with_array-like_objects">Array-ähnlicher Objekte</a>) durch Kommata getrennt oder einem angegebenen Trennzeichen in einem String und gibt diesen zurück. Enthält das Array nur ein Element wird nur dieses ohne Trennzeichen zurückgegeben.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-join.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>arr</var>.join([<var>separator</var>])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parameter</h3>
+
+<dl>
+ <dt><code>separator</code> {{optional_inline}}</dt>
+ <dd>Gibt einen String an, um jedes Paar benachbarter Elemente des Arrays voneinander zu trennen. Das Trennzeichen wird bei Bedarf in einen String umgewandelt. Wenn nicht angegeben, werden die Array-Elemente durch ein Komma (",") getrennt. Wenn <code>separator</code> ein leerer String ist, werden alle Elemente ohne Trennzeichen miteinander verbunden.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein String in dem alle Arrayelemente verkettet sind. Wenn <code><em>arr</em>.length</code> gleich <code>0</code> ist, wird der leere String zurückgegeben.</p>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p>Alle Elemente des Arrays werden in Strings umgewandelt und in einem String miteinander verkettet</p>
+
+<div class="warning">
+<p>Falls ein Element <code>undefined</code> oder <code>null</code> ist, wird es in einen leeren String umgewandelt.</p>
+</div>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<h3 id="Example:_Joining_an_array_three_different_ways" name="Example:_Joining_an_array_three_different_ways">Einen Array auf vier verschiedene Arten zusammenführen</h3>
+
+<p>Im folgenden Beispiel wird ein Array <code>a</code> mit drei Elementen erstellt, das dann viermal mit miteinander verbunden wird: mit dem Standardtrennzeichen, einem Komma mit Leerzeichen, einem Pluszeichen und einem leeren String.</p>
+
+<pre class="brush: js">var a = ['Wind', 'Rain', 'Fire'];
+a.join();       // 'Wind,Rain,Fire'
+a.join(', ');   // 'Wind, Rain, Fire'
+a.join(' + ');  // 'Wind + Rain + Fire'
+a.join('');     // 'WindRainFire'
+</pre>
+
+<h3 id="Zusammenführen_eines_Array-ähnlichen_Objekts">Zusammenführen eines Array-ähnlichen Objekts</h3>
+
+<p>Das Folgende Beispiel fügt ein Array-ähnliches Objekt ({{jsxref("Functions/arguments", "arguments")}}) zusammen, indem {{jsxref("Function.prototype.call", "call()")}} auf <code>Array.prototype.join</code> aufgerufen wird.</p>
+
+<pre class="brush: js">function f(a, b, c) {
+  var s = Array.prototype.join.call(arguments);
+  console.log(s); // '<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-string">1,a,true'</span></span></span></span>
+}
+f(1, 'a', true);
+// Erwartete Ausgabe: "1,a,true"
+</pre>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.5', 'Array.prototype.join')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.join', 'Array.prototype.join')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.join', 'Array.prototype.join')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.join")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.split()")}}</li>
+ <li>{{jsxref("Array.prototype.toString()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.join()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/array/keys/index.html b/files/de/web/javascript/reference/global_objects/array/keys/index.html
new file mode 100644
index 0000000000..e809654bcc
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/array/keys/index.html
@@ -0,0 +1,76 @@
+---
+title: Array.prototype.keys()
+slug: Web/JavaScript/Reference/Global_Objects/Array/keys
+tags:
+  - Array
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/keys
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>keys()</strong></code> Methode gibt ein neues <code><strong>Array Iterator</strong></code> Objekt zurück, welches den Schlüssel für jeden Index des Arrays enthält.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-keys.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate"><var>arr</var>.keys()</pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein neues {{jsxref("Array")}} iterator-Objekt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Der_Key_Iterator_ignoriert_keine_Lücken">Der Key Iterator ignoriert keine Lücken</h3>
+
+<pre class="brush: js notranslate">var arr = ['a', , 'c'];
+var sparseKeys = Object.keys(arr);
+var denseKeys = [...arr.keys()];
+console.log(sparseKeys); // ['0', '2']
+console.log(denseKeys);  // [0, 1, 2]
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.prototype.keys', 'Array.prototype.keys')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.keys', 'Array.prototype.keys')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.keys")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.values()")}}</li>
+ <li>{{jsxref("Array.prototype.entries()")}}</li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Iteration_protocols">Iteration protocols</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/array/lastindexof/index.html b/files/de/web/javascript/reference/global_objects/array/lastindexof/index.html
new file mode 100644
index 0000000000..7ad2b99661
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/array/lastindexof/index.html
@@ -0,0 +1,168 @@
+---
+title: Array.prototype.lastIndexOf()
+slug: Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf
+tags:
+  - Array
+  - ECMAScript 5
+  - JavaScript
+  - Method
+  - Prototype
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>lastIndexOf()</strong></code> Methode gibt den letzten Index zurück, an dem ein übergebenes Element im Array gefunden wurde, oder -1, wenn es nicht vorhanden ist. Das Array wird rückwärts durchsucht beginnend beim <code>fromIndex</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-lastindexof.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>arr</var>.lastIndexOf(<var>searchElement</var>)
+<var>arr</var>.lastIndexOf(<var>searchElement</var>, <var>fromIndex</var>)
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>searchElement</code></dt>
+ <dd>Element, nach dem im Feld gesucht wird.</dd>
+ <dt><code>fromIndex</code> {{optional_inline}}</dt>
+ <dd>Der Index an dem die Suche rückwärts begonnen wird. Der Standardwert ist die Arraylänge minus eins (<code>arr.length - 1</code>), d. h. das gesamte Feld wird durchsucht. Wenn der Index größer oder gleich der Länge des Arrays ist, wird das gesamte Array durchsucht. Ist der Index eine negative Zahl, wird er als Offset vom Ende des Arrays behandelt. Bei Verwendung eines negativen Index wird das Array trotzdem von hinten nach vorne durchsucht. Wenn der errechnete Index kleiner als 0 ist, wird -1 zurückgegeben, d.h. das Feld wird nicht durchsucht.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Der letzte Index des gesuchten Elementes aus dem Feld. <strong>-1</strong> wenn keins gefunden wurde.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p><code>lastIndexOf</code> vergleicht das <code>searchElement</code> mit den Elementen des Feldes und verwendet hierzu die <a href="/de/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Die_Gleichheitsoperatoren_anwenden">strikte Gleichheit</a> (Die gleiche Methode, die beim <code>===</code> Operator  (triple-equals) angewendet wird.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="lastIndexOf_verwenden"><code>lastIndexOf</code> verwenden</h3>
+
+<p>Das folgende Beispiel verwendet <code>lastIndexOf</code>, um Werte in einem Array zu finden.</p>
+
+<pre class="brush: js">var numbers = [2, 5, 9, 2];
+numbers.lastIndexOf(2);     // 3
+numbers.lastIndexOf(7);     // -1
+numbers.lastIndexOf(2, 3);  // 3
+numbers.lastIndexOf(2, 2);  // 0
+numbers.lastIndexOf(2, -2); // 0
+numbers.lastIndexOf(2, -1); // 3
+</pre>
+
+<h3 id="Finde_jedes_Vorkommen_eines_Elementes">Finde jedes Vorkommen eines Elementes</h3>
+
+<p>Das folgende Beispiel benutzt <code>lastIndexOf</code>, um alle Indizes eines Elementes in einem Array zu finden, wobei sie mit Hilfe von {{jsxref("Array.prototype.push", "push")}} zu einem anderen Array hinzugefügt werden, sobald sie gefunden werden.</p>
+
+<pre class="brush: js">var indices = [];
+var array = ['a', 'b', 'a', 'c', 'a', 'd'];
+var element = 'a';
+var idx = array.lastIndexOf(element);
+while (idx != -1) {
+  indices.push(idx);
+  idx = (idx &gt; 0 ? array.lastIndexOf(element, idx - 1) : -1);
+}
+
+console.log(indices);
+// [4, 2, 0]
+</pre>
+
+<p>Der Fall <code>idx == 0</code> muss hier separat behandelt werden, weil das Element immer gefunden wird, unabhängig vom <code>fromIndex</code> Parameter, falls es das erste Element im Feld ist. Das ist der Unterschieder zur {{jsxref("Array.prototype.indexOf", "indexOf")}} Methode.</p>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p><code>lastIndexOf</code> wurde dem ECMA-262-Standard in der fünften Edition hinzugefügt;  sie könnte daher nicht in allen Browsern verfügbar sein. Der Fehler kann umgangen werden, indem der folgende Code zu Beginn eines Skriptes eingesetzt wird. Dies ermöglicht die Verwendung von <code>lastIndexOf</code>, auch wenn die Methode nativ nicht unterstützt wird. Dieser Algorithmus stimmt mit dem überein, was in ECMA-262 der 5. Edition, spezifiziert wurde, unter der Annahme, dass {{jsxref("Object")}}, {{jsxref("TypeError")}}, {{jsxref("Number")}}, {{jsxref("Math.floor")}}, {{jsxref("Math.abs")}}, und {{jsxref("Math.min")}} ihre originalen Werte haben.</p>
+
+<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.15
+// Reference: http://es5.github.io/#x15.4.4.15
+if (!Array.prototype.lastIndexOf) {
+  Array.prototype.lastIndexOf = function(searchElement /*, fromIndex*/) {
+    'use strict';
+
+    if (this === void 0 || this === null) {
+      throw new TypeError();
+    }
+
+    var n, k,
+      t = Object(this),
+      len = t.length &gt;&gt;&gt; 0;
+    if (len === 0) {
+      return -1;
+    }
+
+    n = len - 1;
+    if (arguments.length &gt; 1) {
+      n = Number(arguments[1]);
+      if (n != n) {
+        n = 0;
+      }
+      else if (n != 0 &amp;&amp; n != (1 / 0) &amp;&amp; n != -(1 / 0)) {
+        n = (n &gt; 0 || -1) * Math.floor(Math.abs(n));
+      }
+    }
+
+    for (k = n &gt;= 0 ? Math.min(n, len - 1) : len - Math.abs(n); k &gt;= 0; k--) {
+      if (k in t &amp;&amp; t[k] === searchElement) {
+        return k;
+      }
+    }
+    return -1;
+  };
+}
+</pre>
+
+<p>Erneute Anmerkung: Diese Implementation zielt auf eine absolute Kompatibilität von <code>lastIndexOf</code> mit Firefox und der SpiderMonkey JavaScript Umgebung aus, inklusive einigen Fällen, welche wohl Grenzfälle sind. Beim Vorhaben diese Funktion in eigenen Applikationen zu verwenden, ist eine Berechnung von <code>from</code> mit weniger komplizierten Code möglich, wenn diese Fälle ignoriert werden.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.15', 'Array.prototype.lastIndexOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.lastindexof', 'Array.prototype.lastIndexOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.lastindexof', 'Array.prototype.lastIndexOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.lastIndexOf")}}</p>
+</div>
+
+<h2 id="Kompatibilitätshinweise">Kompatibilitätshinweise</h2>
+
+<ul>
+ <li>Beginnend mit Firefox 47 {{geckoRelease(47)}}, gibt diese Methode nicht mehr <code>-0 zurück</code>. Zum Beispiel wird <code>[0].lastIndexOf(0, -0)</code> immer <code>+0</code> zurückgeben ({{bug(1242043)}}).</li>
+</ul>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.indexOf()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.lastIndexOf()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/array/length/index.html b/files/de/web/javascript/reference/global_objects/array/length/index.html
new file mode 100644
index 0000000000..5357719669
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/array/length/index.html
@@ -0,0 +1,149 @@
+---
+title: Array.prototype.length
+slug: Web/JavaScript/Reference/Global_Objects/Array/length
+tags:
+  - Array
+  - JavaScript
+  - Property
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/length
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>length</strong></code> Eigenschaft eines Objektes vom Typ <code>Array</code> setzt die Anzahl der Elemente in einem Array oder gibt diese Anzahl zurück. Der Wert ist eine vorzeichenlose, 32-Bit Ganzzahl, welche größer als der größte Index im Array ist.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-length.html")}}</div>
+
+
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Der Wert der <code>length</code> Eigenschaft ist ein positive, ganze Zahl und hat einen Wert kleiner als 2<sup>32</sup>.</p>
+
+<pre class="brush: js notranslate">var namelistA = new Array(4294967296); //4294967296 = 2<sup>32</sup>
+var namelistC = new Array(-100) //negative sign
+
+console.log(namelistA.length); //RangeError: Invalid array length
+console.log(namelistC.length); //RangeError: Invalid array length
+
+
+
+var namelistB = [];
+namelistB.length = Math.pow(2,32)-1; //set array length less than 2 to the 32nd power
+console.log(namelistB.length);
+
+//4294967295
+</pre>
+
+<p>Man kann die <code>length</code> Eigenschaft eines Array zu jeder Zeit ändern, um das Array zu kürzen. Wenn ein Array mit dem Ändern der <code>length</code> Eigenschaft vergrößert wird, erhöht sich die Anzahl der der tatsächlichen Elemente. Wenn z. B. <code>length</code> auf 3 gesetzt wird und die aktuelle länge 2 ist, dann enthält das Array 3 Elemente, wobei das dritte Element <code>undefined</code> ist.</p>
+
+<pre class="brush: js notranslate">var arr = [1, 2, 3];
+printEntries(arr);
+
+arr.length = 5; // set array length to 5 while currently 3.
+printEntries(arr);
+
+function printEntries(arr) {
+  var length = arr.length;
+  for (var i = 0; i &lt; length; i++) {
+    console.log(arr[i]);
+  }
+  console.log('=== printed ===');
+}
+
+// 1
+// 2
+// 3
+// === printed ===
+// 1
+// 2
+// 3
+// undefined
+// undefined
+// === printed ===</pre>
+
+<p>Jedoch sagt die <code>length</code> Eigenschaft nicht zwangsläufig etwas über die Anzahl der definierten Werte in einem Array aus. Mehr dazu im Artikel <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Array#Relationship_between_length_and_numerical_properties" title="Relationship between length and numerical properties">Beziehung zwischen Längen und nummerischen Eigenschaften</a>.</p>
+
+<p>{{js_property_attributes(1, 0, 0)}}</p>
+
+<div>
+<ul>
+ <li><code>Writable</code>: Wenn das Attribut auf <code>false</code> gesetzt ist, kann der Wert der Eigenschaft nicht mehr geändert werden.</li>
+ <li><code>Configurable</code>: Wenn das Attribut auf <code>false</code> gesetzt ist, wird jeder Versuch scheitern, die Werte der Attribute <code>Writable</code>, <code>Configurable<font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;"> und </span></font></code><code>Enumerable </code>zu ändern.</li>
+ <li><code>Enumerable</code>: Wenn das Attribut auf <code>true</code> gesetzt ist, wird das Attribut während <a href="/de/docs/Web/JavaScript/Reference/Statements/for">for</a> oder <a href="/de/docs/Web/JavaScript/Reference/Statements/for...in">for..in</a> Schleifen iteriert.</li>
+</ul>
+</div>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Iterieren_über_ein_Array">Iterieren über ein Array</h3>
+
+<p>Im folgenden Beispiel wird über das <code>numbers</code> Array iteriert. Dabei wird die <code>length</code> Eigenschaft verwendet, um festzustellen, wie viele Elemente das Array enthält. Der Wert jedes Elements wird dabei verdoppelt.</p>
+
+<pre class="brush: js notranslate">var numbers = [1, 2, 3, 4, 5];
+
+for (var i = 0; i &lt; numbers.length; i++) {
+  numbers[i] *= 2;
+}
+// numbers enthält jetzt die Werte: [2, 4, 6, 8, 10]
+</pre>
+
+<h3 id="Verkürzung_eines_Arrays">Verkürzung eines Arrays</h3>
+
+<p>Das folgende Beispiel verkürzt das Array <code>numbers</code> auf eine Länge von 3, wenn die Länge größer als 3 ist.</p>
+
+<pre class="brush: js notranslate">var numbers = [1, 2, 3, 4, 5];
+
+if (numbers.length &gt; 3) {
+  numbers.length = 3;
+}
+
+console.log(numbers);        // [1, 2, 3]
+console.log(numbers.length); // 3
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Komment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.5.2', 'Array.length')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-properties-of-array-instances-length', 'Array.length')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-properties-of-array-instances-length', 'Array.length')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompabilität">Browserkompabilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.length")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/array/map/index.html b/files/de/web/javascript/reference/global_objects/array/map/index.html
new file mode 100644
index 0000000000..8227658ca6
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/array/map/index.html
@@ -0,0 +1,337 @@
+---
+title: Array.prototype.map()
+slug: Web/JavaScript/Reference/Global_Objects/Array/map
+tags:
+  - Array
+  - ECMAScript 5
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/map
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">Die <strong><code>map()</code></strong> (engl. <em>abbilden</em>) Methode<strong> </strong>wendet auf jedes Element des Arrays die bereitgestellte Funktion an und gibt das Ergebnis in einem neuen Array zurück.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-map.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate"><var>var new_array = arr</var>.map(function <var>callback(currentValue[, index[, array]]) {
+    </var>// Zurückgegebenes Element für new_array<var>
+}</var>[, <var>thisArg</var>])</pre>
+
+<h3 id="Parameters" name="Parameters">Parameter</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Funktion, die ein Element für das neue Array erstellt und drei Argumente entgegennimmt:</dd>
+ <dd>
+ <dl>
+  <dt><code>currentValue</code></dt>
+  <dd>Das aktuelle Element, das im Array verarbeitet wird.</dd>
+  <dt><code>index</code>{{optional_inline}}</dt>
+  <dd>Der Index des aktuellen Elements, das im Array verarbeitet wird.</dd>
+  <dt><code>array</code>{{optional_inline}}</dt>
+  <dd>Das Array, welches mit <code>map()</code> durchlaufen wird.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code>{{optional_inline}}</dt>
+ <dd>Wert, der als <code>this</code> verwendet wird, wenn <code>callback</code> ausgeführt wird.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein neues Array, von dem jedes Element das Ergebnis der Callback-Funktion ist.</p>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p><code>map()</code> ruft eine bereitgestellte <code>callback</code> Funktion <strong>für jedes Element</strong> in einem Array der Reihe nach auf und erstellt aus den Ergebnissen ein neues Array. <code>callback</code> wird nur für Indizes des Arrays aufgerufen, denen Werte zugewiesen wurden, einschließlich {{jsxref("undefined")}}. Es wird nicht für fehlende Elemente des Arrays aufgerufen (d. h. Indizes, die noch nie festgelegt, gelöscht oder denen noch kein Wert zugewiesen wurde).</p>
+
+<p><code>map()</code> zu benutzen, wenn das davon neu erstellte Array nicht benutzt wird, gilt als <a href="https://de.wikipedia.org/wiki/Anti-Pattern">Anti-Pattern</a>. Verwenden Sie stattdessen {{jsxref("Array/forEach", "forEach()")}} oder {{jsxref("statements/for...of", "for...of")}}.</p>
+
+<p>Sie sollten <code>map()</code> nicht verwenden, wenn:</p>
+
+<ul>
+ <li>Sie das Array, das zurückgegeben wird, nicht benötigen und/oder</li>
+ <li>Ihr Callback keinen Wert zurückgibt.</li>
+</ul>
+
+<p><code>callback</code> wird mit drei Argumenten aufgerufen:</p>
+
+<ol>
+ <li>Der Wert des Elements</li>
+ <li>Der Index des Elements</li>
+ <li>Das Array-Objekt, das durchlaufen wird</li>
+</ol>
+
+<p>Falls der Parameter <code>thisArg</code> an <code>map()</code> übergeben wird, wird er als Wert für <code>this</code> innerhalb von <code>callback</code> verwendet. Andernfalls hat <code>this</code> den Wert {{jsxref("undefined")}}. Welchen Wert <code>callback</code> letztendlich in <code>this</code> steht, wird gemäß <a href="/de/docs/Web/JavaScript/Reference/Operators/this">der üblichen Regeln bestimmt, nach denen <code>this</code> für eine Funktion ermittelt wird</a>.</p>
+
+<p><code>map()</code> selbst verändert das Array nicht, auf dem es aufgerufen wird (das aufgerufene <code>callback</code> kann jedoch Änderungen vornehmen).</p>
+
+<p>Der Bereich der von <code>map()</code> verarbeiteten Elemente wird vor dem ersten Aufruf von <code>callback</code> festgelegt. Elemente, die nach Beginn des Aufrufs von <code>map()</code> an das Array angehängt werden, werden von <code>callback</code> nicht berücksichtigt. Wenn vorhandene Elemente des Arrays geändert werden, ist der Wert maßgeblich, den <code>map()</code> beim Erreichen eines Elements antrifft und dann an <code>callback</code> übergibt. Nachfolgende Elemente, die nach Beginn eines Durchlaufs von <code>map()</code> gelöscht werden, bevor sie eingelesen werden konnten, werden nicht mehr berücksichtigt.</p>
+
+<p>Aufgrund des in der Spezifikation definierten Algorithmus haben Arrays mit vielen leeren Elementen auch nach einem Aufruf von <code>map()</code> immer noch leere Elemente, wobei die leeren Elemente an ihren Indizes verbleiben.</p>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<h3 id="Example_Mapping_an_array_of_numbers_to_an_array_of_square_roots" name="Example:_Mapping_an_array_of_numbers_to_an_array_of_square_roots">Erstellen eines Arrays mit Quadratwurzeln aus einem Array mit Zahlen</h3>
+
+<p>Der folgende Code verwendet ein Array mit Zahlen und erstellt ein neues Array, das die Quadratwurzeln der Zahlen im ersten Array enthält.</p>
+
+<pre class="brush: js notranslate">var numbers = [1, 4, 9];
+var roots = numbers.map(Math.sqrt);
+// roots ist jetzt [1, 2, 3]
+// numbers ist immer noch [1, 4, 9]
+</pre>
+
+<h3 id="Objekte_innerhalb_eines_Arrays_mit_map_neu_formatieren">Objekte innerhalb eines Arrays mit <code>map()</code> neu formatieren</h3>
+
+<p>Der folgende Code nimmt ein Array mit Objekten und erstellt daraus ein neues Array, in dem die Objekte neu formatiert wurden.</p>
+
+<pre class="brush: js notranslate">var kvArray = [{key: 1, value: 10},
+               {key: 2, value: 20},
+               {key: 3, value: 30}];
+
+var reformattedArray = kvArray.map(obj =&gt; {
+   var rObj = {};
+   rObj[obj.key] = obj.value;
+   return rObj;
+});
+// reformattedArray ist jetzt [{1: 10}, {2: 20}, {3: 30}],
+
+// kvArray ist immer noch:
+// [{key: 1, value: 10},
+//  {key: 2, value: 20},
+//  {key: 3, value: 30}]</pre>
+
+<h3 id="Example_Mapping_an_array_of_numbers_using_a_function_containing_an_argument" name="Example:_Mapping_an_array_of_numbers_using_a_function_containing_an_argument">Erstellen eines Arrays mit Zahlen mithilfe einer Funktion, die ein Argument entgegennimmt</h3>
+
+<p>Der folgende Code zeigt, wie <code>map()</code> im Zusammenhang mit einer Funktion arbeitet, welche ein Argument entgegennimmt. Dem Argument wird automatisch der Wert des aktuellen Elements des Arrays zugewiesen, das von <code>map()</code> durchlaufen wird.</p>
+
+<pre class="brush: js notranslate">var numbers = [1, 4, 9];
+var doubles = numbers.map(function(num) {
+  return num * 2;
+});
+
+// doubles ist jetzt [2, 8, 18]
+// numbers ist immer noch [1, 4, 9]</pre>
+
+<h3 id="Example_using_map_generically" name="Example:_using_map_generically">Generischer Einsatz von <code>map()</code></h3>
+
+<p>In diesem Beispiel wird veranschaulicht, wie <code>map()</code> auf einen {{jsxref("Global_Objects/String", "String")}} angewendet wird, um ein Array mit Bytes zu erhalten, welche den jewiligen Zeichenwerten im <a href="https://de.wikipedia.org/wiki/American_Standard_Code_for_Information_Interchange#ASCII-Tabelle">ASCII-Zeichensatz</a> entsprechen:</p>
+
+<pre class="brush: js notranslate">var map = Array.prototype.map;
+var a = map.call('Hello World', function(x) {
+  return x.charCodeAt(0);
+});
+// a now equals [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]
+</pre>
+
+<h3 id="Example_using_map_generically_querySelectorAll" name="Example:_using_map_generically_querySelectorAll">Generischer Einsatz von <code>map()</code> zusammen mit <code>querySelectorAll()</code></h3>
+
+<p>In diesem Beispiel wird gezeigt, wie Sie eine Sammlung von Objekten durchlaufen, die von {{domxref("document.querySelectorAll()", "querySelectorAll()")}} erfasst wurde. Dies liegt daran, dass {{domxref("document.querySelectorAll()", "querySelectorAll()")}} eine {{domxref("NodeList")}} zurückgibt, bei der es sich um eine Auflistung von Objekten handelt. In diesem Fall geben wir alle Werte der ausgewählten Optionen auf dem Bildschirm zurück:</p>
+
+<pre class="brush: js notranslate">var elems = document.querySelectorAll('select option:checked');
+var values = Array.prototype.map.call(elems, function(obj) {
+  return obj.value;
+});
+</pre>
+
+<p>Einfacher wäre die Methode {{jsxref("Array.from()")}}.</p>
+
+<h3 id="Example_Tricky_use_case" name="Example:_Tricky_use_case">Verzwickter Anwendungsfall</h3>
+
+<p><a href="http://www.wirfs-brock.com/allen/posts/166">(Inspiriert von diesem Blogpost)</a></p>
+
+<p>Üblicherweise wird die <code>callback</code> Funktion mit nur einem Argument benutzt. Das trifft auch für bestimmte andere Funktionen zu obwohl diese weitere optionale Argumente akzeptieren. Dies kann jedoch zu verwirrendem Verhalten führen.</p>
+
+<p>Betrachten wir folgendes Beispiel:</p>
+
+<pre class="brush: js notranslate">['1', '2', '3'].map(parseInt);
+
+// Man würde erwarten [1, 2, 3]
+// Tatsächlich ist das Ergebnis aber [1, NaN, NaN]
+
+// parseInt wird oft nur mit einem Argument aufgerufen, akzeptiert aber zwei.
+// Der erste ist ein Ausdruck und der zweite ist die Basis.
+
+// Array.prototype.map übergibt 3 Argumente an die Callback-Funktion:
+// das Element, den Index, das Array
+
+// Das dritte Argument wird von parseInt ignoriert, das zweite jedoch nicht,
+// was verwirrend sein kann. Siehe den Blogpost für weitere Details
+
+// Falls der Link nicht funktioniert:
+// ein kurzes Beispiel der Durchläufe:
+// parseInt(string, radix) -&gt; map(parseInt(value, index))
+// erster Durchlauf  (Index ist 0): parseInt('1', 0) // führt zu parseInt('1', 0) -&gt; 1
+// zweiter Durchlauf (Index ist 1): parseInt('2', 1) // führt zu parseInt('2', 1) -&gt; NaN
+// dritter Durchlauf (Index ist 2): parseInt('3', 2) // führt zu parseInt('3', 2) -&gt; NaN
+
+function returnInt(element) {
+  return parseInt(element, 10);
+}
+
+['1', '2', '3'].map(returnInt); // [1, 2, 3]
+// Tatsächliches Ergebnis ist ein Array mit Nummern (wie erwartet)
+
+// Wie oben, jedoch unter Verwendung der kurzen Funktionssyntax mit Pfeil
+['1', '2', '3'].map( str =&gt; parseInt(str) );
+
+// Eine einfachere Methode, um selbiges zu erreichen, während Fallstricke vermieden werden:
+['1', '2', '3'].map(Number); // [1, 2, 3]
+
+// Im Gegensatz zu `parseInt` werden jedoch auch Fließkommazahlen oder (aufgelöste) Exponentialnotationen zurückgegeben:
+['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300]</pre>
+
+<p>Eine alternative Ausgabe der <code>map()</code> Methode, welche mit {{jsxref("Global_Objects/parseInt", "parseInt()")}} als Parameter aufgerufen wird, funktioniert wie folgt:</p>
+
+<pre class="brush: js notranslate">var xs = ['10', '10', '10'];
+
+xs = xs.map(parseInt);
+
+console.log(xs);
+// Das tatsächliche Ergebnis von [ 10, NaN, 2 ] kann aufgrund der obigen Beschreibung unerwartet sein</pre>
+
+<h2 id="Polyfill" name="Polyfill">Polyfill</h2>
+
+<p><code>map()</code> wurde dem ECMA-262-Standard in der 5. Auflage hinzugefügt. Als solches ist es möglicherweise nicht in allen Implementierungen des Standards enthalten. Sie können dies umgehen, indem Sie den folgenden Code am Anfang Ihrer Skripte einfügen, um die Verwendung von <code>map()</code> in Implementierungen zu ermöglichen, die es nicht nativ unterstützen. Dieser Dieser Algorithmus entspricht dem in der 5. Auflage von ECMA-262 angegebenen Algorithmus, vorausgesetzt {{jsxref("Object")}}, {{jsxref("TypeError")}} und {{jsxref("Array")}} haben ihre ursprünglichen Werte und <code>callback.call()</code> wird mit dem ursprünglichen Wert von {{jsxref("Function.prototype.call()")}} ausgewertet.</p>
+
+<pre class="brush: js notranslate">// Production steps of ECMA-262, Edition 5, 15.4.4.19
+// Reference: http://es5.github.io/#x15.4.4.19
+if (!Array.prototype.map) {
+
+  Array.prototype.map = function(callback, thisArg) {
+
+    var T, A, k;
+
+    if (this == null) {
+      throw new TypeError(' this is null or not defined');
+    }
+
+    // 1. Let O be the result of calling ToObject passing the |this|
+    //    value as the argument.
+    var O = Object(this);
+
+    // 2. Let lenValue be the result of calling the Get internal
+    //    method of O with the argument "length".
+    // 3. Let len be ToUint32(lenValue).
+    var len = O.length &gt;&gt;&gt; 0;
+
+    // 4. If IsCallable(callback) is false, throw a TypeError exception.
+    // See: http://es5.github.com/#x9.11
+    if (typeof callback !== 'function') {
+      throw new TypeError(callback + ' is not a function');
+    }
+
+    // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
+    if (arguments.length &gt; 1) {
+      T = thisArg;
+    }
+
+    // 6. Let A be a new array created as if by the expression new Array(len)
+    //    where Array is the standard built-in constructor with that name and
+    //    len is the value of len.
+    A = new Array(len);
+
+    // 7. Let k be 0
+    k = 0;
+
+    // 8. Repeat, while k &lt; len
+    while (k &lt; len) {
+
+      var kValue, mappedValue;
+
+      // a. Let Pk be ToString(k).
+      //   This is implicit for LHS operands of the in operator
+      // b. Let kPresent be the result of calling the HasProperty internal
+      //    method of O with argument Pk.
+      //   This step can be combined with c
+      // c. If kPresent is true, then
+      if (k in O) {
+
+        // i. Let kValue be the result of calling the Get internal
+        //    method of O with argument Pk.
+        kValue = O[k];
+
+        // ii. Let mappedValue be the result of calling the Call internal
+        //     method of callback with T as the this value and argument
+        //     list containing kValue, k, and O.
+        mappedValue = callback.call(T, kValue, k, O);
+
+        // iii. Call the DefineOwnProperty internal method of A with arguments
+        // Pk, Property Descriptor
+        // { Value: mappedValue,
+        //   Writable: true,
+        //   Enumerable: true,
+        //   Configurable: true },
+        // and false.
+
+        // In browsers that support Object.defineProperty, use the following:
+        // Object.defineProperty(A, k, {
+        //   value: mappedValue,
+        //   writable: true,
+        //   enumerable: true,
+        //   configurable: true
+        // });
+
+        // For best browser support, use the following:
+        A[k] = mappedValue;
+      }
+      // d. Increase k by 1.
+      k++;
+    }
+
+    // 9. return A
+    return A;
+  };
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.19', 'Array.prototype.map')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.map', 'Array.prototype.map')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.map', 'Array.prototype.map')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.map")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Map")}}-Objekt</li>
+ <li>{{jsxref("Array.from()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/array/observe/index.html b/files/de/web/javascript/reference/global_objects/array/observe/index.html
new file mode 100644
index 0000000000..2926d777fc
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/array/observe/index.html
@@ -0,0 +1,91 @@
+---
+title: Array.observe()
+slug: Web/JavaScript/Reference/Global_Objects/Array/observe
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Obsolete
+translation_of: Archive/Web/JavaScript/Array.observe
+---
+<div>{{JSRef}} {{obsolete_header}}</div>
+
+<p>Die <strong><code>Array.observe()</code></strong> Methode wurde für das asynchrone Beobachten von Veränderungen von Arrays benutzt, ähnlich wie {{jsxref("Object.observe()")}} für Objekte. Sie stellt einen Stream von Änderungen in der Reihenfolge, in denen sie auftreten, zur Verfügung.<br>
+ Equivalent zu  <code>Object.observe()</code> und wird ausgeführt mit der Liste <code>["add", "update", "delete", "splice"]</code>. Diese Funktion wurde als deprecated markiert und bereits aus einigen Browsern entfernt. Man kann stattdessen das allgemeinere {{jsxref("Proxy")}} Objekt verwenden.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Array.observe(<var>arr</var>, <var>callback</var>)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>arr</code></dt>
+ <dd>    Das Array, welches beobachtet wird.</dd>
+ <dt><code>callback</code></dt>
+ <dd>Die Funktion, welche bei jeder Änderung mit folgenden Argumenten aufgerufen wird:
+ <dl>
+  <dt><code>changes</code></dt>
+  <dd>Ein Array aus Objekten. Jedes repräsentiert eine Änderung. Die Eigenschaften dieser change Objekte sind:
+  <ul>
+   <li><strong><code>name</code></strong>: Der Name der Eigenschaft, welche geändert wurde.</li>
+   <li><strong><code>object</code></strong>: Das veränderte Array, nachdem die Änderung stattfand.</li>
+   <li><strong><code>type</code></strong>: Ein String, welcher den Typ der Änderung darstellt. Er hat den Wert "add", "update", "delete", oder "splice".</li>
+   <li><strong><code>oldValue</code></strong>: Nur für "update" und "delete" Typ. Der Wert vor der Änderung.</li>
+   <li><strong><code>index</code></strong>: Nur für "splice" Typ. Der Index, an welchem die Änderung stattfand.</li>
+   <li><strong><code>removed</code></strong>: Nur für "splice" Typ. Ein Array aus den gelöschten Elementen.</li>
+   <li><strong><code>addedCount</code></strong>: Nur für "splice" Typ. Die Anzahl an Elementen, welche hinzugefügt wurden.</li>
+  </ul>
+  </dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>callback</code> Funktion wird jedes mal aufgerufen, wenn eine Änderung in arr stattfindet mit einem Array von allen Änderungen in der Reihenfolge in der sie auftreten</p>
+
+<div class="note">
+<p>Änderungen über die Array Methoden, wie zum Beispiel <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Array/pop"><code>Array.prototype.pop()</code></a>, werden als "splice" "changes" dargestellt.<br>
+ Index Änderungen, welche die Länge des Arrays nicht verändern, werden als "update" "changes" dargestellt.</p>
+</div>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Aufzeichnung_verschiedener_change_Typen">Aufzeichnung verschiedener change Typen</h3>
+
+<pre class="brush: js">var arr = ['a', 'b', 'c'];
+
+Array.observe(arr, function(changes) {
+  console.log(changes);
+});
+
+arr[1] = 'B';
+// [{type: 'update', object: &lt;arr&gt;, name: '1', oldValue: 'b'}]
+
+arr[3] = 'd';
+// [{type: 'splice', object: &lt;arr&gt;, index: 3, removed: [], addedCount: 1}]
+
+arr.splice(1, 2, 'beta', 'gamma', 'delta');
+// [{type: 'splice', object: &lt;arr&gt;, index: 1, removed: ['B', 'c', 'd'], addedCount: 3}]
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p><a href="https://github.com/arv/ecmascript-object-observe">Strawman proposal specification</a>.</p>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.observe")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="//stackoverflow.com/q/29269057/778272">Under what condition would Array.observe's “add” event trigger?</a></li>
+ <li>{{jsxref("Array.unobserve()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Object.observe()")}} {{experimental_inline}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/array/of/index.html b/files/de/web/javascript/reference/global_objects/array/of/index.html
new file mode 100644
index 0000000000..e0e69d50f5
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/array/of/index.html
@@ -0,0 +1,102 @@
+---
+title: Array.of()
+slug: Web/JavaScript/Reference/Global_Objects/Array/of
+tags:
+  - Array
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/of
+---
+<div>{{JSRef}}</div>
+
+<div>Die <code><strong>Array.of()</strong></code> Methode erstellt eine neue {{jsxref("Array")}} Instanz aus einer variablen Anzahl an Argumenten, ohne Rücksicht auf die Anzahl oder den Typ der Argumente.</div>
+
+<div> </div>
+
+<div>Der Unterschied zwischen <code><strong>Array.of()</strong></code> und dem <code><strong>Array</strong></code> Konstruktor ist die Behandlung von ganzen Zahlen als Argumente: <code><strong>Array.of(7)</strong></code> erstellt ein Array mit einem Element, <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">7</span></font>. <code><strong>Array(7)</strong></code> hingegen erstellt ein leeres Array, bei dem die Eigenschaft <code>length<span style='background-color: #ffffff; font-family: "Open Sans",arial,x-locale-body,sans-serif;'> </span></code>den Wert <code>7</code> gesetzt ist (<strong>Bemerkung:</strong> das impliziert ein Array mit <code>7</code> leeren Elementen, bei dem alle Elemente <code>undefined</code> sind).</div>
+
+<div> </div>
+
+<pre class="brush: js"><code>Array.of(7);       // [7]
+Array.of(1, 2, 3); // [1, 2, 3]
+
+Array(7);          // [ , , , , , , ]
+Array(1, 2, 3);    // [1, 2, 3]</code>
+</pre>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Array.of(<var>element0</var>[, <var>element1</var>[, ...[, <var>elementN</var>]]])</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>element<em>N</em></code></dt>
+ <dd>Elemente, welche sich im neu erzeugten Array befinden.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine neue {{jsxref("Array")}} Instanz.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Diese Funktion ist Teil des EMCAScript 2015 Standards. Für mehr Information siehe <a href="https://gist.github.com/rwaldron/1074126"><code>Array.of</code> and <code>Array.from</code> </a>und <a href="https://gist.github.com/rwaldron/3186576"><code>Array.of</code> polyfill</a>.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js">Array.of(1);         // [1]
+Array.of(1, 2, 3);   // [1, 2, 3]
+Array.of(undefined); // [undefined]
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Wird der nachfolgende Code vor jedem anderen Code eingefügt, so wird Array.of() verfügbar, falls es nicht nativ implementiert ist.</p>
+
+<pre class="brush: js">if (!Array.of) {
+  Array.of = function() {
+    return Array.prototype.slice.call(arguments);
+  };
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.of', 'Array.of')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.of', 'Array.of')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompabilität">Browser Kompabilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.of")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Array.from()")}}</li>
+ <li>{{jsxref("TypedArray.of()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/array/pop/index.html b/files/de/web/javascript/reference/global_objects/array/pop/index.html
new file mode 100644
index 0000000000..33274647f5
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/array/pop/index.html
@@ -0,0 +1,98 @@
+---
+title: Array.prototype.pop()
+slug: Web/JavaScript/Reference/Global_Objects/Array/pop
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/pop
+---
+<div>{{JSRef("Global_Objects", "Array")}}</div>
+
+<p>Die <code><strong>pop()</strong></code> Methode entfernt das <strong>letzte</strong> Element eines Arrays und gibt dieses zurück. Diese Methode ändert die Länge des Arrays.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-pop.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>arr</var>.pop()</pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Das entfernte Element aus dem Array; {{jsxref("undefined")}} wenn das Array leer ist.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>pop</code>-Methode entfernt das letzte Element eines Arrays und gibt dieses zurück.</p>
+
+<p><code>pop</code> ist bewusst generisch gehalten. DIese Methode kann mit {{jsxref("Function.call", "called", "", 1)}} oder {{jsxref("Function.apply", "applied", "", 1)}} auf einem Objekten aufgerufen werden, welches Arrays ähneln ist. <span id="result_box" lang="de"><span>Objekte, die keine </span></span><code>length</code> Eigenschaft <span lang="de"><span>enthalten, welches das letzt Element in dem Objekt markieren oder keine nullbasierten numerischen Eigenschaften widerspiegelt, verhalten sich möglicherweise nicht in einer Weise.</span></span></p>
+
+<p>Wenn <code>pop()</code> auf einem leeren Array aufgerufen wird, so wird <code>undefined</code> zurückgegeben.</p>
+
+<h2 id="Example" name="Example">Beispiele</h2>
+
+<h3 id="Example:_Removing_the_last_element_of_an_array" name="Example:_Removing_the_last_element_of_an_array">Entfernen des letzten Elements eines Arrays</h3>
+
+<p>Der folgende Code erzeugt ein Array <code>myFish</code>, das aus vier Elementen besteht. Im Anschluss daran wird das letzte Element entfernt.</p>
+
+<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
+
+var popped = myFish.pop();
+
+console.log(myFish); // ['angel', 'clown', 'mandarin' ]
+
+console.log(popped); // 'sturgeon'</pre>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 3rd Edition</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initiale Definition. Implementiert mit JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.6', 'Array.prototype.pop')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser-Kompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.pop")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.push()")}}</li>
+ <li>{{jsxref("Array.prototype.shift()")}}</li>
+ <li>{{jsxref("Array.prototype.unshift()")}}</li>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+ <li>{{jsxref("Array.prototype.splice()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/array/prototypen/index.html b/files/de/web/javascript/reference/global_objects/array/prototypen/index.html
new file mode 100644
index 0000000000..dcab74024e
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/array/prototypen/index.html
@@ -0,0 +1,183 @@
+---
+title: Array.Prototypen
+slug: Web/JavaScript/Reference/Global_Objects/Array/Prototypen
+tags:
+  - Array
+  - JavaScript
+  - Property
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Array.prototype (Anordnung.Muster) </code></strong>Eigenschaft repräsentiert eine Schablone (Prototypen) des {{jsxref("Array")}} Konstrukteurs und erlaubt dir neue Eigenschaften und Methoden zu allen Array Objekten hinzuzufügen.</p>
+
+<pre class="brush: js">// Wenn JavaScript eine first() Methode vom Grundsatz nicht unterstützt
+// füge eine neue Methode als Rückgabewert des ersten Elements als Array zurück
+
+if (!Array.prototype.first) {
+  Array.prototype.first = function() {
+    return this[0];
+  }
+}</pre>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>{{jsxref("Array")}} Instanzen erben vom <code>Array.prototype.</code> Wie mit allen Konstrukteuren kannst du das Konstrukteur Protoypen Objekt ändern, um alle {{jsxref("Array")}} Instanzen zu verändern. Ein Beispiel: du kannst neue Methoden und Eigenschaften zu allen Array-Objekten hinzufügen und diese damit erweitern. Dies wird zum Beispiel für {{Glossary("Polyfill", "polyfilling")}} genutzt.</p>
+
+<p>Ganz nebenbei: ein Array-Protoyp selbst ist ein {{jsxref("Array")}}:</p>
+
+<pre class="brush: js">Array.isArray(Array.prototype); // true
+</pre>
+
+<p>{{js_property_attributes(0, 0, 0)}}</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt><code>Array.prototype.constructor</code></dt>
+ <dd>Beschreibt die Funktion um ein Objekt-Prototypen zu erstellen.</dd>
+ <dt>{{jsxref("Array.prototype.length")}}</dt>
+ <dd>Gibt die Nummer an Elementen in einem Array wieder.</dd>
+ <dt>{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}</dt>
+ <dd>Eine Symbol-beinhaltende Eigenschaft beschreibt das ausschließen von einem mit <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/with">with</a></code> eingebundenden Geltungsbereich.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<h3 id="Mutationsmethoden">Mutationsmethoden</h3>
+
+<p>Diese Methoden verändern ein Array:</p>
+
+<dl>
+ <dt>{{jsxref("Array.prototype.copyWithin()")}}</dt>
+ <dd>Kopiert einen Teil eines Array Elements innerhalb eines Array.</dd>
+ <dt>{{jsxref("Array.prototype.fill()")}}</dt>
+ <dd>Füllt alle Elemente eines Arrays von einem Start-Index zu einem Ende-Index mit einem festen Wert.</dd>
+ <dt>{{jsxref("Array.prototype.pop()")}}</dt>
+ <dd>Entfernt das letzte Element von einem Array und gibt dieses Element als Rückgabewert aus.</dd>
+ <dt>{{jsxref("Array.prototype.push()")}}</dt>
+ <dd>Fügt eins oder mehrere Elemente zu dem Ende des Arrays hinzu und gibt die neue Länge des Arrays zurück</dd>
+ <dt>{{jsxref("Array.prototype.reverse()")}}</dt>
+ <dd>Dreht die Reihenfolge der Elemente in einem Array um - das erste Element wird das letzte und das letzte Element wird das erste.</dd>
+ <dt>{{jsxref("Array.prototype.shift()")}}</dt>
+ <dd>Entfernt das erste Element innerhalb eines Array und gibt das Element als Rückgabewert aus.</dd>
+ <dt>{{jsxref("Array.prototype.sort()")}}</dt>
+ <dd>Sortiert innerhalb eines Arrays die Elemente und gibt das sortierte Array aus.</dd>
+ <dt>{{jsxref("Array.prototype.splice()")}}</dt>
+ <dd>Fügt Elemente von einem Array hinzu und/oder entfernt diese.</dd>
+ <dt>{{jsxref("Array.prototype.unshift()")}}</dt>
+ <dd>Fügt ein oder mehr Elemente an erster Stelle eines Array hinzu und gibt die Länge des neuen Arrays zurück.</dd>
+</dl>
+
+<h3 id="Zugriffsmethoden">Zugriffsmethoden</h3>
+
+<p>Diese Methoden verändern das Array nicht und geben als Rückgabewert eine Darstellung des Arrays an.</p>
+
+<dl>
+ <dt>{{jsxref("Array.prototype.concat()")}}</dt>
+ <dd>Gibt ein neues Array zusammengestellt von diesem Array und verknüpft mit anderen/ mehreren Array(s) und/ oder einem/ mehreren Wert(en).</dd>
+ <dt>{{jsxref("Array.prototype.includes()")}}</dt>
+ <dd>Überprüft, ob ein Array ein bestimmtes Element enthält und gibt als Rückgabewert <code>true</code> oder <code>false</code> an.</dd>
+ <dt>{{jsxref("Array.prototype.indexOf()")}}</dt>
+ <dd>Gibt die erste Stelle (Index) eines einzelnen, dem beschriebenen, Elements innerhalb eines Array an. Wenn das Element nicht gefunden wurde gibt er -1 zurück.</dd>
+ <dt>{{jsxref("Array.prototype.join()")}}</dt>
+ <dd>Verbindet alle Elemente eines Arrays zu einem String.</dd>
+ <dt>{{jsxref("Array.prototype.lastIndexOf()")}}</dt>
+ <dd>Gibt den letzten (höchsten) Index des beschriebenen Elements innerhalb eines Arrays aus, oder -1, wenn nichts gefunden wurde.</dd>
+ <dt>{{jsxref("Array.prototype.slice()")}}</dt>
+ <dd>Extrahiert einen Teil eines Arrays und gibt diesen als neues Array aus.</dd>
+ <dt>{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}</dt>
+ <dd>Gibt ein Array-Literal des beschriebenen Arrays zurück; du kannst diesen Wert nutzen um ein neues Array zu erstellen. Überschreibt die {{jsxref("Object.prototype.toSource()")}} Methode.</dd>
+ <dt>{{jsxref("Array.prototype.toString()")}}</dt>
+ <dd>Gibt einen String zurück, welcher das Array und seine Elemente beinhaltet. Überschreibt die {{jsxref("Object.prototype.toString()")}} Methode.</dd>
+ <dt>{{jsxref("Array.prototype.toLocaleString()")}}</dt>
+ <dd>Gibt einen lokalen String zurück, welcher das Array und seine Elemente beschreibt. Überschreibt die {{jsxref("Object.prototype.toLocaleString()")}} Methode.</dd>
+</dl>
+
+<h3 id="Zählmethoden">Zählmethoden</h3>
+
+<p>Einige Methoden nehmen als Argument eine Funktion an und führen diese während des Aufrufs des Arrays aus. Wenn diese Methoden aufgerufen werden, wird die Länge (<code>length)</code> des Arrays abgetastet und jedes Element außerhalb der dieser Länge innerhalb eines nicht aufgerufenen Callbacks hinzugefügt. Andere Änderungen zu einem Array (setzen eines Wertes oder das Löschen eines Elements) könnten Auswirkungen auf das Ergebnis der Operation haben, wenn die Methode das veränderte Element im Nachhinein besucht. Während das spezielle Verhalten dieser Methoden in einem solchen Fall gut definiert sind, solltest du dich dennoch nicht darauf verlassen, damit du andere, die deinen möglicherweise lesen - nicht verwirrt werden. Wenn du das Array verändern musst, solltest du das veränderte Array in ein neu erstelltes Array packen.</p>
+
+<dl>
+ <dt>{{jsxref("Array.prototype.entries()")}}</dt>
+ <dd>Gibt ein neues Array Zähl Objekt <code>(Array Iterator Object) </code>zurück, welches das key/value Paar für jeden Index in dem Array innehält.</dd>
+ <dt>{{jsxref("Array.prototype.every()")}}</dt>
+ <dd>Gibt <code>true</code> zurück, wenn alle Elemente in diesem Array die zu testende Funktion bestehen.</dd>
+ <dt>{{jsxref("Array.prototype.filter()")}}</dt>
+ <dd>Erstellt ein neues Array mit allen Elementen dieses Arrays für welches die Filter-Funktion innerhalb den Rückgabewert <code>true</code> benutzt.</dd>
+ <dt>{{jsxref("Array.prototype.find()")}}</dt>
+ <dd>Gibt den ersten gefundenen Wert innerhalb eines Arrays wieder, wenn ein Element innerhalb des Arrays die definierte Test-Funktion besteht oder <code>undefined </code>wenn nichts gefunden wurde.</dd>
+ <dt>{{jsxref("Array.prototype.findIndex()")}}</dt>
+ <dd>Gibt den gefundenen Index im Array an, wenn ein Element in dem Array die angegebene Test-Funktion besteht - oder -1, wenn nichts gefunden wurde.</dd>
+ <dt>{{jsxref("Array.prototype.forEach()")}}</dt>
+ <dd>Ruft eine Funktion für jedes Element in einem Array auf.</dd>
+ <dt>{{jsxref("Array.prototype.keys()")}}</dt>
+ <dd>
+ <p>Gibt einen neuen <code>Array Iterator (Zeiger)</code> aus, welcher die Schlüssel für jeden Index innerhalb des Arrays beinhaltet.</p>
+ </dd>
+ <dt>{{jsxref("Array.prototype.map()")}}</dt>
+ <dd>Erstellt ein neues Array mit den Ergebnissen der ausgeführten definierten Funktion an jedem Element in diesem Array.</dd>
+ <dt>{{jsxref("Array.prototype.reduce()")}}</dt>
+ <dd>Reduziert das Array auf einen einzigen Wert, indem es jeweils zwei Elemente durch die angegebene Funktion ausführt. Optional: als zweiten Paramater einen Startwert angeben.</dd>
+ <dt>{{jsxref("Array.prototype.reduceRight()")}}</dt>
+ <dd>Reduziert das Array auf einen einzigen Wert, indem es jeweils zwei Elemente durch die angegebene Funktion ausführt (von rechts nach links). Optional: als zweiten Paramater einen Startwert angeben.</dd>
+ <dt>{{jsxref("Array.prototype.some()")}}</dt>
+ <dd>
+ <pre class="syntaxbox">Gibt <code>true</code> zurück, wenn mindestens ein Element in diesem Array den Test der definierten Funktion besteht.</pre>
+ </dd>
+ <dt>{{jsxref("Array.prototype.values()")}}</dt>
+ <dd>Gibt einen neues <code>Array Iterator</code> Objekt zurück, welches die Werte für jeden Index in dem Array beinhaltet.</dd>
+ <dt>{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}}</dt>
+ <dd>Gibt einen neues <code>Array Iterator</code> Objekt zurück, welches die Werte für jeden Index in dem Array beinhaltet.</dd>
+</dl>
+
+<h3 id="Generische_Methoden_(kein_Standard)">Generische Methoden (kein Standard)</h3>
+
+<p>Vielen Methoden von den JavaScript Array Objekten sind für die allgemeine Anwendung an allem Objekten entwickelt wurden, welche "aussehen wie" Arrays. Der Grund ist, dass sie an allen Objekten angewandt werden könne, welche eine Längen-Eigenschaft besitzen, und welche nützlicherweise eine numerische Eigenschaft benennen (wie mit der <code>array[5]</code> Indizierung). Einige Methoden, solche wie<code> </code>{{jsxref("Array.join", "join")}}, lesen nur die Länge (<code>length)</code> und numerische Eigenschaften von dem Objekt an welches sie angewandt werden. Andere, wie {{jsxref("Array.reverse", "reverse")}}, erfordern eine Veränderung der numerischen Objekt- und Längen-Eigenschaften; diese Methoden können deshalb nicht von Objekten wie {{jsxref("String")}} aufgerufen werden, welche das künstliche Setzen ihrer Längen- (<code>length)</code>  oder numerischen Eigenschaft nicht erlauben.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Hinzugefügt der <code>copyWithin()</code>, <code>fill()</code>, <code>entries()</code>, <code>keys()</code>, <code>values()</code>, <code>find()</code>, <code>findIndex()</code> Methoden.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES7', '#sec-array.prototype', 'Array.prototype')}}</td>
+   <td>{{Spec2('ES7')}}</td>
+   <td>Hinzugefügt der <code>includes()</code> Methode.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.prototype")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Function.prototype")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/array/push/index.html b/files/de/web/javascript/reference/global_objects/array/push/index.html
new file mode 100644
index 0000000000..986fcf944b
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/array/push/index.html
@@ -0,0 +1,141 @@
+---
+title: Array.prototype.push()
+slug: Web/JavaScript/Reference/Global_Objects/Array/push
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/push
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>push()</strong></code> Methode fügt ein oder mehr Elemente am Ende eines Arrays hinzu und gibt die neue Länge des Arrays zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-push.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>arr</var>.push(<var>element1</var> [, ... [, <var>elementN]]</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parameter</h3>
+
+<dl>
+ <dt><code>element<em>N</em></code></dt>
+ <dd>Die Elemente, die am Ende des Arrays eingefügt werden.</dd>
+</dl>
+
+<h3 id="Returns" name="Returns">Rückgabewert</h3>
+
+<p>Den neuen Wert der {{jsxref("Array.length", "length")}} Eigenschaft (Länge des Arrays), nachdem die Methode ausgeführt wurde.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>push</code> Methode fügt Werte an das Ende eines Arrays an.</p>
+
+<p class="p1"><code>push</code> ist absichtlich generisch gehalten. Die Methode kann mit Hilfe von {{jsxref("Function.call", "call()")}} und {{jsxref("Function.apply", "apply()")}} auch auf Array ähnliche Objekte angewendet werden. Die Methode wählt anhand der <code>length</code> Eigenschaft den Punkt aus, an dem die Werte eingefügt werden. Falls die <code>length</code> Eigenschaft nicht in eine Zahl umgewandelt werden kann, wird 0 als Index verwendet. Das gilt auch für den Fall, dass die <code>length</code> Eigenschaft nicht vorhanden ist. Die <code>length</code> Eigenschaft wird daraufhin erstellt.</p>
+
+<p class="p2">Obwohl {{jsxref("Global_Objects/String", "Strings", "", 1)}} native, Array-ähnliche Objekte sind, sind sie in Anwendungen dieser Methode nicht geeignet, da Strings unveränderlich sind. Gleiches gilt für das native, Array-ähnliche Objekt {{jsxref("Functions/arguments", "arguments", "", 1)}}.</p>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<h3 id="Example:_Adding_elements_to_an_array" name="Example:_Adding_elements_to_an_array">Elemente zu einem Array hinzufügen</h3>
+
+<p>Der folgende Quelltext erstellt ein <code>sports</code> Array mit zwei Elementen und fügt anschließend zwei weitere Elemente hinzu. Die Variable <code>total</code> enthält die neue Länge des Arrays.</p>
+
+<pre class="brush: js">var sports = ['soccer', 'baseball'];
+var total = sports.push('football', 'swimming');
+
+console.log(sports); // ['soccer', 'baseball', 'football', 'swimming']
+console.log(total);  // 4
+</pre>
+
+<h3 id="Zwei_Arrays_zusammenführen">Zwei Arrays zusammenführen</h3>
+
+<p>Dieses Beispiel benutzt {{jsxref("Function.apply", "apply()")}}, um alle Elemente eines zweiten Arrays hinzuzufügen.</p>
+
+<p>Diese Methode sollte <em>nicht</em> benutzt werden, wenn das zweite Array (<code>moreVegs</code> in diesem Beispiel) sehr lang ist, weil die maximale Anzahl der Parametern, die eine Funktion haben kann, in der Praxis limitiert ist. Siehe {{jsxref("Function.apply", "apply()")}} für mehr Details.</p>
+
+<pre>var vegetables = ['parsnip', 'potato'];
+var moreVegs = ['celery', 'beetroot'];
+
+// Fügt das zweite Array an das erste Array an
+// Equivalent zu vegetables.push('celery', 'beetroot');
+Array.prototype.push.apply(vegetables, moreVegs);
+
+console.log(vegetables); // ['parsnip', 'potato', 'celery', 'beetroot']</pre>
+
+<h3 id="Objekte_wie_ein_Array_behandeln">Objekte wie ein Array behandeln</h3>
+
+<p>Wie oben angedeutet ist, ist <code>push</code> extra generisch gehalten, was man zu seinem Vorteil nutzen kann. <code>Array.prototype.push</code> kann gut auf ein Objekt angewendet werden, wie das Beispiel zeigt. Zu beachten ist, dass kein Array erstellt wird, um eine Menge von Objekten zu speichern. Stattdessen werden die Objekte in dem Objekt selbst gespeichern, indem wir <code>call</code> auf der <code>Array.prototype.push</code> Methode einsetzen, um die Methode glauben zu lassen, wir arbeiten mit einem Array. Es funktioniert einfach, dank der Art und Weise, wie JavaScript es uns erlaubt, den Ausführungskontext nach Belieben festzulegen.</p>
+
+<pre class="brush: js">var obj = {
+    length: 0,
+
+    addElem: function addElem(elem) {
+        // obj.length wird automatisch erhöht,
+        // wenn ein Objekt hinzugefügt wird
+        [].push.call(this, elem);
+    }
+};
+
+// ein paar leere Objekte zu Illustrationszwecken hinzufügen
+obj.addElem({});
+obj.addElem({});
+console.log(obj.length);
+// → 2
+</pre>
+
+<p>Zu beachten ist, dass <code>obj</code> kein Array ist. Die Methode <code>push</code> erhöht erfolgreich die <code>length</code> Eigenschaft von <code>obj</code>, so als würde sie mit einem Array arbeiten.</p>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.7', 'Array.prototype.push')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.push', 'Array.prototype.push')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.push', 'Array.prototype.push')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.push")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.pop()")}}</li>
+ <li>{{jsxref("Array.prototype.shift()")}}</li>
+ <li>{{jsxref("Array.prototype.unshift()")}}</li>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/array/reduce/index.html b/files/de/web/javascript/reference/global_objects/array/reduce/index.html
new file mode 100644
index 0000000000..bbb3e4d57c
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/array/reduce/index.html
@@ -0,0 +1,564 @@
+---
+title: Array.prototype.reduce()
+slug: Web/JavaScript/Reference/Global_Objects/Array/Reduce
+tags:
+  - Array
+  - ECMAScript 5
+  - JavaScript
+  - Method
+  - Prototype
+  - Reduce
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/Reduce
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>reduce()</strong></code>-Methode reduziert ein Array auf einen einzigen Wert, indem es jeweils zwei Elemente (von links nach rechts) durch eine gegebene Funktion reduziert.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-reduce.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>arr</var>.reduce(<var>callback[, </var><var>initialValue]</var>)</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Funktion, welche auf jeden Wert im Array angewandet wird und vier Argumente hat:
+ <dl>
+  <dt><code>accumulator</code></dt>
+  <dd>Der kumulierte Wert ist der Rückgabewert von <code>callback</code>; der in der zuvor zurückgegebene Wert des letzten Aufrufes von <code>callback</code> oder <code>initialValue</code> werden verwendet.</dd>
+  <dt><code>currentValue</code></dt>
+  <dd>Das aktuell zu verarbeitende Element des Arrays.</dd>
+  <dt><code>currentIndex</code>{{optional_inline}}</dt>
+  <dd>Der Index des aktuellen Elements des Arrays. Beginnt mit dem Index 0, falls <code>initialValue</code> angegeben wurde, ansonsten mit Index 1.</dd>
+  <dt><code>array</code>{{optional_inline}}</dt>
+  <dd>Das Array, auf dem <code>reduce</code> abgerufen wird.</dd>
+ </dl>
+ </dd>
+ <dt><code>initialValue</code>{{optional_inline}}</dt>
+ <dd>Der Wert des ersten Arguments, der bei dem ersten Aufruf in <code>callback</code> zu benutzt wird. Wenn kein Initialwert angegeben wird, wird das erste Element des Arrays benutzt. Das Aufrufen von <code>reduce()</code> auf einem leeren Array ohne Initialwerts führt zu einem Fehler.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Der Ergebniswert der Reduzierung.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p><code>reduce()</code> führt die <code>callback</code>-Funktion für jedes existierende Element in dem Array aus, Ausnahme sind nicht gesetzte Werte. <code>callback</code> hat vier Parameter:</p>
+
+<ul>
+ <li><code>accumulator</code></li>
+ <li><code>currentValue</code></li>
+ <li><code>currentIndex</code></li>
+ <li><code>array</code></li>
+</ul>
+
+<p>Beim ersten Aufruf von <code>callback</code> sind die Werte von <code>accumulator</code> und <code>currentValue</code> in Abhängigkeit vom Parameter <code>initialValue</code> wie folgt:</p>
+
+<ul>
+ <li>Wenn <code>initialValue</code> beim Aufruf von <code>reduce()</code> angegeben wird, ist <code>accumulator</code> gleich dem <code>initialValue</code> und <code>currentValue</code> ist gleich dem ersten Wert im Array.</li>
+ <li>Wenn kein <code>initialValue</code> angegeben wird, ist <code>accumulator</code> gleich mit dem ersten Wert im Array und <code>currentValue</code> wird gleich dem zweiten Wert im Array sein.</li>
+</ul>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Wenn <code>initialValue</code> nicht angegeben wird, wird <code>reduce()</code> die <code>callback</code>-Funktion startend beim Index 1 aufrufen, der erste Index wird übersprungen. Wenn <code>initialValue</code> angegeben ist, wird bei Index 0 begonnen.</p>
+</div>
+
+<p>Wenn das Array leer ist und kein <code>initialValue</code> angegeben ist, wird ein {{jsxref("TypeError")}} erzeugt. Wenn das Array nur ein Element hat (die Position ist egal) und kein <code>initialValue</code> angegeben ist oder wenn <code>initialValue</code> angegeben ist und das Array leer ist, wird der einzelne Wert sofort zurückgegeben, ohne <code>callback</code> aufzurufen.</p>
+
+<p>Es ist immer sicherer <code>initialValue</code> anzugeben, weil es drei mögliche Ergebnisse ohne <code>initialValue</code> gibt, wie es im folgenden Beispiel gezeigt ist.</p>
+
+<pre class="brush: js">var maxCallback = ( acc, cur ) =&gt; Math.max( acc.x, cur.x );
+var maxCallback2 = ( max, cur ) =&gt; Math.max( max, cur );
+
+// reduce() without initialValue
+[ { x: 22 }, { x: 42 } ].reduce( maxCallback ); // 42
+[ { x: 22 }            ].reduce( maxCallback ); // { x: 22 }
+[                      ].reduce( maxCallback ); // TypeError
+
+// map/reduce; better solution, also works for empty or larger arrays
+[ { x: 22 }, { x: 42 } ].map( el =&gt; el.x )
+                        .reduce( maxCallback2, -Infinity );
+</pre>
+
+<h3 id="Wie_reduce_funktioniert">Wie reduce() funktioniert</h3>
+
+<p>Angenommen die folgende <code>reduce()</code> Funktion wird genutzt:</p>
+
+<pre class="brush: js">[0, 1, 2, 3, 4].reduce(function (<code>accumulator,</code> <code>currentValue</code>, <code>currentIndex</code>, array) {
+  return <code>accumulator</code> + currentValue;
+});
+</pre>
+
+<p>Die <code>callback</code>-Funktion wird viermal aufgerufen, mit den Parametern und Rückgabewert für jeden Aufruf wir folgend beschrieben:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col"><code>callback</code></th>
+   <th scope="col"><code>accumulator</code></th>
+   <th scope="col"><code>currentValue</code></th>
+   <th scope="col"><code>currentIndex</code></th>
+   <th scope="col"><code>array</code></th>
+   <th scope="col">Rückgabewert</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">1. Aufruf</th>
+   <td><code>0</code></td>
+   <td><code>1</code></td>
+   <td><code>1</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row">2. Aufruf</th>
+   <td><code>1</code></td>
+   <td><code>2</code></td>
+   <td><code>2</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>3</code></td>
+  </tr>
+  <tr>
+   <th scope="row">3. Aufruf</th>
+   <td><code>3</code></td>
+   <td><code>3</code></td>
+   <td><code>3</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>6</code></td>
+  </tr>
+  <tr>
+   <th scope="row">4. Aufruf</th>
+   <td><code>6</code></td>
+   <td><code>4</code></td>
+   <td><code>4</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>10</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Der zurückgegebene Wert von <code>reduce()</code> ist der Rückgabewert der letzten <code>callback</code>-Funktion (<code>10</code>).</p>
+
+<p>Es ist zusätzlich möglich eine {{jsxref("Functions/Arrow_functions", "Arrow-Funktion","",1)}} statt einer ganzen Funktion zu benutzen. Der folgende Quelltext erzeugt die gleiche Ausgabe wie der Vorherige:</p>
+
+<pre class="brush: js">[0, 1, 2, 3, 4].reduce( (prev, curr) =&gt; prev + curr );
+</pre>
+
+<p>Wenn als zweiter Parameter von <code>reduce()</code> <code>initialValue</code> angegeben ist, wird das Ergebnis wie folgt aussehen:</p>
+
+<pre class="brush: js">[0, 1, 2, 3, 4].reduce((<code>accumulator</code>, currentValue, currentIndex, array) =&gt; {
+  return <code>accumulator</code> + currentValue;
+}, 10);
+</pre>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col"><code>callback</code></th>
+   <th scope="col"><code>accumulator</code></th>
+   <th scope="col"><code>currentValue</code></th>
+   <th scope="col"><code>currentIndex</code></th>
+   <th scope="col"><code>array</code></th>
+   <th scope="col">Rückgabewert</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">1. Aufruf</th>
+   <td><code>10</code></td>
+   <td><code>0</code></td>
+   <td><code>0</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>10</code></td>
+  </tr>
+  <tr>
+   <th scope="row">2. Aufruf</th>
+   <td><code>10</code></td>
+   <td><code>1</code></td>
+   <td><code>1</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>11</code></td>
+  </tr>
+  <tr>
+   <th scope="row">3. Aufruf</th>
+   <td><code>11</code></td>
+   <td><code>2</code></td>
+   <td><code>2</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>13</code></td>
+  </tr>
+  <tr>
+   <th scope="row">4. Aufruf</th>
+   <td><code>13</code></td>
+   <td><code>3</code></td>
+   <td><code>3</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>16</code></td>
+  </tr>
+  <tr>
+   <th scope="row">5. Aufruf</th>
+   <td><code>16</code></td>
+   <td><code>4</code></td>
+   <td><code>4</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>20</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Der von <code>reduce()</code> zurückgegebene Wert ist in diesem Fall <code>20</code>.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Alle_Elemente_eines_Arrays_summieren">Alle Elemente eines Arrays summieren</h3>
+
+<pre class="brush: js">var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
+  return accumulator + currentValue;
+}, 0);
+// sum is 6
+</pre>
+
+<p>Alternativ als Arrow-Funktion geschrieben:</p>
+
+<pre class="brush: js">var total = [ 0, 1, 2, 3 ].reduce(
+  ( accumulator, currentValue ) =&gt; accumulator + currentValue,
+  0
+);</pre>
+
+<h3 id="Summe_von_Werten_in_einem_Objektarray">Summe von Werten in einem Objektarray</h3>
+
+<p>Um in einem Array von Objekten Werte aufzusummieren, <strong>muss</strong> ein Initialwert angegeben werden, so dass jedes Element in der Funktion durchlaufen wird.</p>
+
+<pre class="brush: js">var initialValue = 0;
+var sum = [{x: 1}, {x:2}, {x:3}].reduce(function (accumulator, currentValue) {
+    return accumulator + currentValue.x;
+},initialValue)
+
+console.log(sum) // logs 6
+</pre>
+
+<p>Alternativ als Arrow-Funktion geschrieben:</p>
+
+<pre class="brush: js">var initialValue = 0;
+var sum = [{x: 1}, {x:2}, {x:3}].reduce(
+    (accumulator, currentValue) =&gt; accumulator + currentValue.x
+    ,initialValue
+);
+
+console.log(sum) // logs 6</pre>
+
+<h3 id="Geschachtelte_Arrays_zu_einem_flachen_Array_machen">Geschachtelte Arrays zu einem flachen Array machen</h3>
+
+<pre class="brush: js">var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
+  function(accumulator, currentValue) {
+    return accumulator.concat(currentValue);
+  },
+  []
+);
+// flattened is [0, 1, 2, 3, 4, 5]
+</pre>
+
+<p>Alternativ als Arrow-Funktion geschrieben:</p>
+
+<pre class="brush: js">var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
+  ( accumulator, currentValue ) =&gt; accumulator.concat(currentValue),
+  []
+);
+</pre>
+
+<h3 id="Zählen_von_Instanzen_eines_Wertes_in_einem_Objekt">Zählen von Instanzen eines Wertes in einem Objekt</h3>
+
+<pre class="brush: js">var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
+
+var countedNames = names.reduce(function (allNames, name) {
+  if (name in allNames) {
+    allNames[name]++;
+  }
+  else {
+    allNames[name] = 1;
+  }
+  return allNames;
+}, {});
+// countedNames is:
+// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }
+</pre>
+
+<h3 id="Objekte_nach_einer_Eigenschaft_gruppieren">Objekte nach einer Eigenschaft gruppieren</h3>
+
+<pre class="brush: js">var people = [
+  { name: 'Alice', age: 21 },
+  { name: 'Max', age: 20 },
+  { name: 'Jane', age: 20 }
+];
+
+function groupBy(objectArray, property) {
+  return objectArray.reduce(function (acc, obj) {
+    var key = obj[property];
+    if(!acc[key]) {
+      acc[key] = [];
+    }
+    acc[key].push(obj);
+    return acc;
+  }, {});
+}
+
+var groupedPeople = groupBy(people, 'age');
+// groupedPeople is:
+// {
+//   20: [
+//     { name: 'Max', age: 20 },
+//     { name: 'Jane', age: 20 }
+//   ],
+//   21: [{ name: 'Alice', age:21 }]
+// }
+</pre>
+
+<h3 id="Verbinden_von_Arrays_in_einem_Array_von_Objekten_mithilfe_des_Spread-Operators_und_von_initialValue"><span id="result_box" lang="de"><span>Verbinden von Arrays in einem Array von Objekten mithilfe des Spread-Operators und von <code>initialValue</code></span></span></h3>
+
+<pre class="brush: js">// friends - an array of objects
+// where object field "books" - list of favorite books
+var friends = [{
+  name: 'Anna',
+  books: ['Bible', 'Harry Potter'],
+  age: 21
+}, {
+  name: 'Bob',
+  books: ['War and peace', 'Romeo and Juliet'],
+  age: 26
+}, {
+  name: 'Alice',
+  books: ['The Lord of the Rings', 'The Shining'],
+  age: 18
+}];
+
+// allbooks - list which will contain all friends' books +
+// additional list contained in initialValue
+var allbooks = friends.reduce(function(accumulator, currentValue) {
+  return [...accumulator, ...currentValue.books];
+}, ['Alphabet']);
+
+// allbooks = [
+//   'Alphabet', 'Bible', 'Harry Potter', 'War and peace',
+//   'Romeo and Juliet', 'The Lord of the Rings',
+//   'The Shining'
+// ]</pre>
+
+<h3 id="Duplikate_in_einem_Array_entfernen">Duplikate in einem Array entfernen</h3>
+
+<pre class="brush: js">let arr = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];
+let result = arr.sort().reduce((accumulator, current) =&gt; {
+    const length = accumulator.length;
+    if (length === 0 || accumulator[length - 1] !== current) {
+        accumulator.push(current);
+    }
+    return accumulator;
+}, []);
+console.log(result); //[1,2,3,4,5]
+</pre>
+
+<h3 id="Sequenzielle_Abarbeitung_von_Promises">Sequenzielle Abarbeitung von Promises</h3>
+
+<pre class="brush: js">/**
+ * Runs promises from array of functions that can return promises
+ * in chained manner
+ *
+ * @param {array} arr - promise arr
+ * @return {Object} promise object
+ */
+function runPromiseInSequence(arr, input) {
+  return arr.reduce(
+    (promiseChain, currentFunction) =&gt; promiseChain.then(currentFunction),
+    Promise.resolve(input)
+  );
+}
+
+// promise function 1
+function p1(a) {
+  return new Promise((resolve, reject) =&gt; {
+    resolve(a * 5);
+  });
+}
+
+// promise function 2
+function p2(a) {
+  return new Promise((resolve, reject) =&gt; {
+    resolve(a * 2);
+  });
+}
+
+// function 3 - will wrapped in a resolved promise by .then()
+function f3(a) {
+  return a * 3;
+}
+
+// promise function 4
+function p4(a) {
+  return new Promise((resolve, reject) =&gt; {
+    resolve(a * 4);
+  });
+}
+
+const promiseArr = [p1, p2, f3, p4];
+runPromiseInSequence(promiseArr, 10)
+  .then(console.log);    // 1200
+</pre>
+
+<h3 id="Funktionskomposition_ermöglicht_Pipelining">Funktionskomposition ermöglicht Pipelining</h3>
+
+<pre class="brush: js">// Building-blocks to use for composition
+const double = x =&gt; x + x;
+const triple = x =&gt; 3 * x;
+const quadruple = x =&gt; 4 * x;
+
+// Function composition enabling pipe functionality
+const pipe = (...functions) =&gt; input =&gt; functions.reduce(
+    (acc, fn) =&gt; fn(acc),
+    input
+);
+
+// Composed functions for multiplication of specific values
+const multiply6 = pipe(double, triple);
+const multiply9 = pipe(triple, triple);
+const multiply16 = pipe(quadruple, quadruple);
+const multiply24 = pipe(double, triple, quadruple);
+
+// Usage
+multiply6(6); // 36
+multiply9(9); // 81
+multiply16(16); // 256
+multiply24(10); // 240
+</pre>
+
+<h3 id="Mapfunktion_mit_reduce">Mapfunktion mit reduce</h3>
+
+<pre class="brush: js">if (!Array.prototype.map) {
+  Array.prototype.map = function(callback, thisArg) {
+    return this.reduce(function(mappedArray, currentValue, index, array) {
+      mappedArray[index] = callback.call(thisArg, currentValue, index, array);
+      return mappedArray;
+    }, []);
+  };
+}
+
+[1, 2, , 3].map(
+  (currentValue, index, array) =&gt; currentValue + index + array.length
+); // [5, 7, , 10]
+
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.21
+// Reference: http://es5.github.io/#x15.4.4.21
+// https://tc39.github.io/ecma262/#sec-array.prototype.reduce
+if (!Array.prototype.reduce) {
+  Object.defineProperty(Array.prototype, 'reduce', {
+    value: function(callback /*, initialValue*/) {
+      if (this === null) {
+        throw new TypeError( 'Array.prototype.reduce ' +
+          'called on null or undefined' );
+      }
+      if (typeof callback !== 'function') {
+        throw new TypeError( callback +
+          ' is not a function');
+      }
+
+      // 1. Let O be ? ToObject(this value).
+      var o = Object(this);
+
+      // 2. Let len be ? ToLength(? Get(O, "length")).
+      var len = o.length &gt;&gt;&gt; 0;
+
+      // Steps 3, 4, 5, 6, 7
+      var k = 0;
+      var value;
+
+      if (arguments.length &gt;= 2) {
+        value = arguments[1];
+      } else {
+        while (k &lt; len &amp;&amp; !(k in o)) {
+          k++;
+        }
+
+        // 3. If len is 0 and initialValue is not present,
+        //    throw a TypeError exception.
+        if (k &gt;= len) {
+          throw new TypeError( 'Reduce of empty array ' +
+            'with no initial value' );
+        }
+        value = o[k++];
+      }
+
+      // 8. Repeat, while k &lt; len
+      while (k &lt; len) {
+        // a. Let Pk be ! ToString(k).
+        // b. Let kPresent be ? HasProperty(O, Pk).
+        // c. If kPresent is true, then
+        //    i.  Let kValue be ? Get(O, Pk).
+        //    ii. Let accumulator be ? Call(
+        //          callbackfn, undefined,
+        //          « accumulator, kValue, k, O »).
+        if (k in o) {
+          value = callback(value, o[k], k, o);
+        }
+
+        // d. Increase k by 1.
+        k++;
+      }
+
+      // 9. Return accumulator.
+      return value;
+    }
+  });
+}
+</pre>
+
+<p>Wenn es wirklich notwendig ist veraltete JavaScript-Umgebungen zu benutzen, die <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty()</a></code> nicht unterstützen, ist es besser <code>Array.prototype</code> nicht komplett zu ersetzen, weil man es nicht non-enumerable machen kann.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.21', 'Array.prototype.reduce()')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.8.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.reduce")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.reduceRight()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/array/reduceright/index.html b/files/de/web/javascript/reference/global_objects/array/reduceright/index.html
new file mode 100644
index 0000000000..dfcb7e3a0b
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/array/reduceright/index.html
@@ -0,0 +1,334 @@
+---
+title: Array.prototype.reduceRight()
+slug: Web/JavaScript/Reference/Global_Objects/Array/ReduceRight
+tags:
+  - Array
+  - ECMAScript 5
+  - JavaScript
+  - Method
+  - Prototype
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/ReduceRight
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>reduceRight()</strong></code> Methode wendet eine Funktion gegen einen Akkumulator auf jeden Wert des Arrays (von rechts nach links) auf und reduziert es um einen einzelnen Wert.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-reduce-right.html")}}</div>
+
+
+
+<p>Siehe auch {{jsxref("Array.prototype.reduce()")}} für links nach rechts Reduzierung.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>arr</var>.reduceRight(<var>callback</var>[, <var>initialValue</var>])</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Funktion, welche für jeden Wert im Array aufgerufen wird und vier Argumente hat:
+ <dl>
+  <dt><code>previousValue</code></dt>
+  <dd>Der zuvor im letzten Aufruf des Rückrufs zurückgegebene Wert, oder <code>initialValue</code>, wenn unterstützt. (siehe unten)</dd>
+  <dt><code>currentValue</code></dt>
+  <dd>Das derzeitige zu verarbeitende Element in dem Array.</dd>
+  <dt><code>index</code>{{optional_inline}}</dt>
+  <dd>Der Index des derzeitigen zu verarbeitenden Elements in dem Array.</dd>
+  <dt><code>array</code>{{optional_inline}}</dt>
+  <dd>Das Arrayobjekt, in dem das Element enthalten ist.</dd>
+ </dl>
+ </dd>
+ <dt><code>initialValue</code>{{optional_inline}}</dt>
+ <dd>Objekt, welches beim ersten Aufruf der <code>callback</code> Funktion initial benutzt wird. Wenn kein Initialwert angegeben ist wird das letzte Element aus dem Array benutzt. Der aufruf auf einem leeren Array ohne angabe von <code>initialValue</code> führt zu einem Fehler.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Der Wert, der aus der Reduktion resultiert.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p><code>reduceRight</code> Führt die Rückruffunktion einmal für jedes im Array vorhandene Element aus, ohne Löcher im Array, wobei vier Argumente empfangen werden: der Initialwert (<code>initialValue)</code> (oder Wert des vorherigen <code>callback</code> Aufrufes), der Wert des derzeitigen Elements, der derzeitige Index, und das Array auf welches der Durchlauf stattfindet.</p>
+
+<p>Der Aufruf des reduceRight <code>callback</code> würde ungefähr so aussehen:</p>
+
+<pre class="brush: js">array.reduceRight(function(previousValue, currentValue, index, array) {
+  // ...
+});
+</pre>
+
+<p>Wenn die Funktion das erste Mal ausgeführt wird, kann der vorherige Wert  (<code>previousValue)</code>  und der derzeitige Wert (<code>currentValue)</code> eines von zwei Werten sein. Wenn ein Initialwert (<code>initialValue)</code> der Callback-Funktion zu <code>reduceRight</code> mitgegeben wird, dann wird der <code>previousValue</code> und <code>der initialValue</code> gleich dem <code>initialValue</code> in dem Array. Wenn kein <code>initialValue</code>  mitgegeben wird, dann ist der <code>previousValue</code> gleich dem Wert in dem Array und <code>currentValue</code> wird gleich zu dem geich dem zweiten bis letzten Wert.</p>
+
+<p>Wenn das Array leer ist und kein <code>initialValue</code> angegeben ist wird ein {{jsxref("TypeError")}} erzeugt. Wenn das Array nur ein Element hat (die Position ist egal) und kein <code>initialValue</code> angegeben ist oder wenn <code>initialValue</code> angegeben ist und das Array leer ist, wird der einzelne Wert zurückgegeben ohne <code>callback</code> aufzurufen.</p>
+
+<p><span id="result_box" lang="de"><span>Einige Beispieldurchläufe der Funktion würden wie folgt aussehen:</span></span></p>
+
+<pre class="brush: js">[0, 1, 2, 3, 4].reduceRight(function(previousValue, currentValue, index, array) {
+  return previousValue + currentValue;
+});
+</pre>
+
+<p>Die <code>callback</code> Funktion wird vier mal aufgerufen. Die Parameter und der Rückgabewert dieser Funktion sind wie folgt:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col"><code>callback</code></th>
+   <th scope="col"><code>previousValue</code></th>
+   <th scope="col"><code>currentValue</code></th>
+   <th scope="col"><code>index</code></th>
+   <th scope="col"><code>array</code></th>
+   <th scope="col">Rückgabewert</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">1. Aufruf</th>
+   <td><code>4</code></td>
+   <td><code>3</code></td>
+   <td><code>3</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>7</code></td>
+  </tr>
+  <tr>
+   <th scope="row">2. Aufruf</th>
+   <td><code>7</code></td>
+   <td><code>2</code></td>
+   <td><code>2</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>9</code></td>
+  </tr>
+  <tr>
+   <th scope="row">3. Aufruf</th>
+   <td><code>9</code></td>
+   <td><code>1</code></td>
+   <td><code>1</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>10</code></td>
+  </tr>
+  <tr>
+   <th scope="row">4. Aufruf</th>
+   <td><code>10</code></td>
+   <td><code>0</code></td>
+   <td><code>0</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>10</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Der Wert, der von <code>reduceRight</code> zurückgegeben wird, ist der Rückgabewert der letzen <code>callback</code> Funktion (<code>10</code>).</p>
+
+<p>Wenn ein <code>initialValue</code> angegeben wird, sieht das Resultat folgendermaßen aus:</p>
+
+<pre class="brush: js">[0, 1, 2, 3, 4].reduceRight(function(previousValue, currentValue, index, array) {
+  return previousValue + currentValue;
+}, 10);
+</pre>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col"><code>callback</code></th>
+   <th scope="col"><code>previousValue</code></th>
+   <th scope="col"><code>currentValue</code></th>
+   <th scope="col"><code>index</code></th>
+   <th scope="col"><code>array</code></th>
+   <th scope="col">Rückgabewert</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">1. Aufruf</th>
+   <td><code>10</code></td>
+   <td><code>4</code></td>
+   <td><code>4</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>14</code></td>
+  </tr>
+  <tr>
+   <th scope="row">2. Aufruf</th>
+   <td><code>14</code></td>
+   <td><code>3</code></td>
+   <td><code>3</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>17</code></td>
+  </tr>
+  <tr>
+   <th scope="row">3. Aufruf</th>
+   <td><code>17</code></td>
+   <td><code>2</code></td>
+   <td><code>2</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>19</code></td>
+  </tr>
+  <tr>
+   <th scope="row">4. Aufruf</th>
+   <td><code>19</code></td>
+   <td><code>1</code></td>
+   <td><code>1</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>20</code></td>
+  </tr>
+  <tr>
+   <th scope="row">5. Aufruf</th>
+   <td><code>20</code></td>
+   <td><code>0</code></td>
+   <td><code>0</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>20</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Der von <code>reduceRight</code> zurückgegebene Wert ist in diesem Fall <code>20</code>.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Alle_Elemente_in_einem_Array_summieren">Alle Elemente in einem Array summieren</h3>
+
+<pre class="brush: js">var sum = [0, 1, 2, 3].reduceRight(function(a, b) {
+  return a + b;
+});
+// sum is 6
+</pre>
+
+<h3 id="Ein_Array_von_Arrays_in_ein_flaches_Array_schreiben">Ein Array von Arrays in ein flaches Array schreiben</h3>
+
+<pre class="brush: js">var flattened = [[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) {
+    return a.concat(b);
+}, []);
+// flattened is [4, 5, 2, 3, 0, 1]
+</pre>
+
+<h3 id="Eine_Liste_von_asynchronen_Funktionen_mit_Callbacks_hintereinander_laufen_lassen_so_dass_das_Resultat_der_vorherigen_der_nächsten_übergeben_wird">Eine Liste von asynchronen Funktionen mit Callbacks hintereinander laufen lassen, so dass das Resultat der vorherigen der nächsten übergeben wird</h3>
+
+<pre class="brush: js">const waterfall = (...functions) =&gt; (callback, ...args) =&gt;
+  functions.reduceRight(
+    (composition, fn) =&gt; (...results) =&gt; fn(composition, ...results),
+    callback
+  )(...args);
+
+const randInt = max =&gt; Math.floor(Math.random() * max)
+
+const add5 = (callback, x) =&gt; {
+  setTimeout(callback, randInt(1000), x + 5);
+};
+const mult3 = (callback, x) =&gt; {
+  setTimeout(callback, randInt(1000), x * 3);
+};
+const sub2 = (callback, x) =&gt; {
+  setTimeout(callback, randInt(1000), x - 2);
+};
+const split = (callback, x) =&gt; {
+  setTimeout(callback, randInt(1000), x, x);
+};
+const add = (callback, x, y) =&gt; {
+  setTimeout(callback, randInt(1000), x + y);
+};
+const div4 = (callback, x) =&gt; {
+  setTimeout(callback, randInt(1000), x / 4);
+};
+
+const computation = waterfall(add5, mult3, sub2, split, add, div4);
+computation(console.log, 5) // -&gt; 14
+
+// same as:
+
+const computation2 = (input, callback) =&gt; {
+  const f6 = x=&gt; div4(callback, x);
+  const f5 = (x, y) =&gt; add(f6, x, y);
+  const f4 = x =&gt; split(f5, x);
+  const f3 = x =&gt; sub2(f4, x);
+  const f2 = x =&gt; mult3(f3, x);
+  add5(f2, input);
+}</pre>
+
+<h3 id="Unterschied_zwischen_reduce_und_reduceRight">Unterschied zwischen <code>reduce</code> und <code>reduceRight</code></h3>
+
+<pre class="brush: js">var a = ['1', '2', '3', '4', '5'];
+var left  = a.reduce(function(prev, cur)      { return prev + cur; });
+var right = a.reduceRight(function(prev, cur) { return prev + cur; });
+
+console.log(left);  // "12345"
+console.log(right); // "54321"</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p><code>reduceRight</code> wurde im ECMA-262 Standard in der 5. Edition hinzugefügt. Aus diesem Grund ist es in manchen Implementierungen nicht vorhanden. Dieses Problem kann beheben werden indem folgender Quelltext am Anfang des Skripts eingefügt werden, wodurch <code>reduceRight</code> auch in solchen Implementierungen unterstützt werden kann.</p>
+
+<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.22
+// Reference: http://es5.github.io/#x15.4.4.22
+if ('function' !== typeof Array.prototype.reduceRight) {
+  Array.prototype.reduceRight = function(callback /*, initialValue*/) {
+    'use strict';
+    if (null === this || 'undefined' === typeof this) {
+      throw new TypeError('Array.prototype.reduce called on null or undefined');
+    }
+    if ('function' !== typeof callback) {
+      throw new TypeError(callback + ' is not a function');
+    }
+    var t = Object(this), len = t.length &gt;&gt;&gt; 0, k = len - 1, value;
+    if (arguments.length &gt;= 2) {
+      value = arguments[1];
+    } else {
+      while (k &gt;= 0 &amp;&amp; !(k in t)) {
+        k--;
+      }
+      if (k &lt; 0) {
+        throw new TypeError('Reduce of empty array with no initial value');
+      }
+      value = t[k--];
+    }
+    for (; k &gt;= 0; k--) {
+      if (k in t) {
+        value = callback(value, t[k], k, t);
+      }
+    }
+    return value;
+  };
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.22', 'Array.prototype.reduceRight')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.8.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.reduceright', 'Array.prototype.reduceRight')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.reduceright', 'Array.prototype.reduceRight')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.reduceRight")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.reduce()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/array/reverse/index.html b/files/de/web/javascript/reference/global_objects/array/reverse/index.html
new file mode 100644
index 0000000000..84560faacb
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/array/reverse/index.html
@@ -0,0 +1,92 @@
+---
+title: Array.prototype.reverse()
+slug: Web/JavaScript/Reference/Global_Objects/Array/reverse
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/reverse
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>reverse()</strong></code> Methode kehrt die Reihenfolge der Arrayelemente <em><a href="https://de.wikipedia.org/wiki/In-place">in-place</a></em> um. Das erste Element wird zum letzen und das letzte wird zum ersten.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-reverse.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>arr</var>.reverse()</code></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Das umgedrehte Array.</p>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p>Die <code>reverse</code> Methode kehrt die Reihenfolge der Elemente des angegebenen Arrays in-place um, ändert das Array und gibt eine Referenz zu diesem zurück.</p>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<h3 id="Example:_Reversing_the_elements_in_an_array" name="Example:_Reversing_the_elements_in_an_array">Elemente in einem Array umkehren</h3>
+
+<p>Das folgende Beispiel erzeugt ein Array <code>a</code> mit 3 Elementen und kehrt die Reihenfolge des Arrays um. Der Aufruf von <code>reverse()</code> gibt eine Referenz zum umgekehrten Array <code>a</code> zurück.</p>
+
+<pre class="brush: js">var a = [1, 2, 3];
+
+console.log(a) // [1, 2, 3]
+
+a.reverse();
+
+console.log(a) // [3, 2, 1]
+</pre>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.8', 'Array.prototype.reverse')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.reverse")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.join()")}}</li>
+ <li>{{jsxref("Array.prototype.sort()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.reverse()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/array/shift/index.html b/files/de/web/javascript/reference/global_objects/array/shift/index.html
new file mode 100644
index 0000000000..e576e1bfec
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/array/shift/index.html
@@ -0,0 +1,111 @@
+---
+title: Array.prototype.shift()
+slug: Web/JavaScript/Reference/Global_Objects/Array/shift
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/shift
+---
+<div>{{JSRef}}</div>
+
+<p>Die Methode <code><strong>shift()</strong></code> entfernt das <strong>erste</strong> Element eines Arrays und gibt dieses Element zurück. Diese Methode verändert die Länge des Arrays.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-shift.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>arr</var>.shift()</code></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Das vom Array entfernte Element; {{jsxref("undefined")}} wenn das Array leer ist.</p>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p>Die Methode <code>shift</code> entfernt das Element an der nullten Stelle, verschiebt die übrigen Elemente um einen Index nach unten und gibt den Wert des entfernten Elementes zurück. Ist die {{jsxref("Array.length", "length")}} Eigenschaft gleich 0, wird {{jsxref("undefined")}} zurückgegeben.</p>
+
+<p><code>shift</code> ist absichtlich generisch; diese Methode kann auf Array ähnlichen Objekten mit {{jsxref("Function.call", "call", "", 1)}} oder {{jsxref("Function.apply", "applied", "", 1)}} genutzt werden. <span id="result_box" lang="de"><span>Objekte, die keine </span></span><code>length</code> E<span lang="de"><span>igenschaft enthalten, die die letzte in einer Reihe von aufeinanderfolgenden, nullbasierten numerischen Eigenschaften widerspiegelt, verhalten sich möglicherweise nicht in einer sinnvollen Weise</span></span>.</p>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<h3 id="Example:_Removing_an_element_from_an_array" name="Example:_Removing_an_element_from_an_array">Ein Element eines Arrays entfernen</h3>
+
+<p>Das folgende Skript zeigt das Array <code>myFish</code> bevor und nachdem das erste Element dieses Arrays entfernt wurde. Anschließend wird das entfernte Element angezeigt:</p>
+
+<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'surgeon'];
+
+console.log('myFish before: ' + myFish);
+// myFish before: ['angel', 'clown', 'mandarin', 'surgeon']
+
+var shifted = myFish.shift();
+
+console.log('myFish after: ' + myFish);
+// myFish after: ['clown', 'mandarin', 'surgeon']
+
+console.log('Removed this element: ' + shifted);
+// Removed this element: angel</pre>
+
+<h3 id="Einsatz_von_shift()_in_einer_while-Schleife">Einsatz von <code>shift()</code> in einer <code>while</code>-Schleife</h3>
+
+<p>Die shift() Methode wird oft in der Bedingung in einer <code>while</code> Schleife verwendet. Im folgenden Beispiel wird in jeder Iteration das nächste Element vom Array entfernt, bis das Array leer ist.</p>
+
+<pre class="brush: js">var names = ["Andrew", "Edward", "Paul", "Chris" ,"John"];
+
+while( (i = names.shift()) !== undefined ) {
+    console.log(i);
+}
+// Andrew, Edward, Paul, Chris, John
+</pre>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.9', 'Array.prototype.shift')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.shift', 'Array.prototype.shift')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.shift', 'Array.prototype.shift')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.shift")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.push()")}}</li>
+ <li>{{jsxref("Array.prototype.pop()")}}</li>
+ <li>{{jsxref("Array.prototype.unshift()")}}</li>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/array/slice/index.html b/files/de/web/javascript/reference/global_objects/array/slice/index.html
new file mode 100644
index 0000000000..75ad6c4a25
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/array/slice/index.html
@@ -0,0 +1,244 @@
+---
+title: Array.prototype.slice()
+slug: Web/JavaScript/Reference/Global_Objects/Array/slice
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/slice
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>slice()</code></strong> Methode schreibt eine flache Kopie von einem Teil des Arrays in ein neues Array-Objekt von <code>begin</code> bis <code>end</code> (<code>end</code> nicht enthalten). Das originale Array wird nicht verändert.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-slice.html")}}</div>
+
+<p class="hidden">The source for this interactive demo is stored in a GitHub repository. If you'd like to contribute to the interactive demo project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>arr</var>.slice([<var>begin</var>[, <var>end</var>]])</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>begin</code>{{optional_inline}}</dt>
+ <dd>Null-basierter Index, an welcher die Extraktion beginnt.</dd>
+ <dd>Bei einem negativen Index kennzeichnet <code>begin</code> einen Versatz vom Ende der Sequenz. <code>slice(-2)</code> extrahiert die letzten zwei Elemente der Sequenz.</dd>
+ <dd>Wenn <code>begin</code> undefiniert ist, beginnt <code>slice</code> bei Index <code>0</code>.</dd>
+ <dd>Wenn <code>begin</code> größer als die Länge der Sequenz ist, wird ein leeres Array zurückgegeben.</dd>
+ <dt><code>end</code> {{optional_inline}}</dt>
+ <dd>Null-basierter Index bevor die Extraktion endet. <code>slice</code> extrahiert bis zu, aber nicht inklusive <code>end</code>.</dd>
+ <dd><code>slice(1,4)</code> extrahiert vom zweiten bis zum vierten Element (Elemente sind indexiert als 1, 2 und 3).</dd>
+ <dd>Bei einem negativen Index kennzeichnet <code>end</code> einen Versatz vom Ende der Sequenz. <code>slice(2, -1)</code> extrahiert vom dritten bis zum vorletzten Element der Sequenz.</dd>
+ <dd>Wenn auf <code>end</code> weggelassen wird, extrahiert <code>slice</code> bis zum Ende der Sequenz (<code>arr.length</code>).</dd>
+ <dd>Wenn <code>end</code> größer als die Länge der Sequenz ist, extrahiert <code>slice</code> bis zum Ende der Sequenz (<code>arr.length</code>)</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein neues Array, welches die extrahierten Elemente enthält.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p><code>slice</code> verändert das originale Array nicht. Es gibt eine Schattenkopie der Elemente des Arrays zurück. Elemente des original Arrays werden folgendermaßen in das zurückgegeben Array kopiert:</p>
+
+<ul>
+ <li>Für Objektreferenzen (nicht das aktuelle Objekt) kopiert <code>slice</code> die Objektreferenz in das neue Array. Beide, das originale und das neue Array, referenzieren das selbe Objekt. Wenn sich ein referenziertes Objekt ändert, ist die Änderungen beim neue und beim originalen Array zu sehen.</li>
+ <li>Für die Typen string, number und boolean (nicht {{jsxref("String")}}, {{jsxref("Number")}} und {{jsxref("Boolean")}} Objekte) kopiert <code>slice</code> den Wert in das neue Array. Änderungen an string, number oder boolean in einem Array haben keine Auswirkung auf das andere Array.</li>
+</ul>
+
+<p>Wenn ein neues Element zu einem Array hinzugefügt wird, hat es keine Auswirkung auf das andere Array.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="Gibt_einen_Teil_eines_existierenden_Arrays_zurück.">Gibt einen Teil eines existierenden Arrays zurück.</h3>
+
+<pre class="brush: js">var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
+var citrus = fruits.slice(1, 3);
+
+// fruits enthält  ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
+// citrus enthält ['Orange','Lemon']
+</pre>
+
+<h3 id="Einsatz_von_slice">Einsatz von <code>slice</code></h3>
+
+<p>Im folgenden Beispiel erzeugt <code>slice</code> ein neues Array, <code>newCar</code>, von <code>myCar</code>.<br>
+ Beide haben eine Referenz zu dem Objekt <code>myHonda</code>. Wenn sich die Farbe von <code>myHonda</code> zu lila ändert, dann ist die Änderung in beiden Arrays sichtbar.</p>
+
+<pre class="brush: js">// Using slice, create newCar from myCar.
+var myHonda = { color: 'red', wheels: 4, engine: { cylinders: 4, size: 2.2 } };
+var myCar = [myHonda, 2, 'cherry condition', 'purchased 1997'];
+var newCar = myCar.slice(0, 2);
+
+// Display the values of myCar, newCar, and the color of myHonda
+//  referenced from both arrays.
+console.log('myCar = ' + myCar.toSource());
+console.log('newCar = ' + newCar.toSource());
+console.log('myCar[0].color = ' + myCar[0].color);
+console.log('newCar[0].color = ' + newCar[0].color);
+
+// Change the color of myHonda.
+myHonda.color = 'purple';
+console.log('The new color of my Honda is ' + myHonda.color);
+
+// Display the color of myHonda referenced from both arrays.
+console.log('myCar[0].color = ' + myCar[0].color);
+console.log('newCar[0].color = ' + newCar[0].color);
+</pre>
+
+<p>Dieses Skript schreibt:</p>
+
+<pre class="brush: js">myCar = [{color:'red', wheels:4, engine:{cylinders:4, size:2.2}}, 2,
+         'cherry condition', 'purchased 1997']
+newCar = [{color:'red', wheels:4, engine:{cylinders:4, size:2.2}}, 2]
+myCar[0].color = red
+newCar[0].color = red
+The new color of my Honda is purple
+myCar[0].color = purple
+newCar[0].color = purple
+</pre>
+
+<h2 id="Array-ähnliche_Objekte">Array-ähnliche Objekte</h2>
+
+<p>Die <code>slice</code> Methode kann auch verwendete werden, um Array-ähnliche Objekte bzw. Collections in Arrays zu konvertieren. Man muss nur die Methode an das Objekt binden.<br>
+ Die {{jsxref("Functions/arguments", "arguments")}} Variable innerhalb einer Funktion ist ein Beispiel für ein Array-ähnliches Objekte.</p>
+
+<pre class="brush: js">function list() {
+  return Array.prototype.slice.call(arguments);
+}
+
+var list1 = list(1, 2, 3); // [1, 2, 3]
+</pre>
+
+<p>Das Binden von Methoden funktioniert mit der <code>.call</code> Funktion von {{jsxref("Function.prototype")}} und der Aufruf kann reduziert werden zu <code>[].slice.call(arguments)</code> anstatt <code>Array.prototype.slice.call</code>. Mit der {{jsxref("Function.prototype.bind", "bind")}} Funktion kann der Aufruf immer vereinfacht werden.</p>
+
+<pre class="brush: js">var unboundSlice = Array.prototype.slice;
+var slice = Function.prototype.call.bind(unboundSlice);
+
+function list() {
+  return slice(arguments);
+}
+
+var list1 = list(1, 2, 3); // [1, 2, 3]
+</pre>
+
+<h2 id="Cross-Browser-Verhalten">Cross-Browser-Verhalten</h2>
+
+<p>Obwohl host Objekte (wie das DOM Objekt) laut Spezifikation nicht dem Mozilla Verhalten beim Konvertieren mit <code>Array.prototype.slice</code> folgen muss und IE &lt; 9 dies auch nicht tut, erlauben Versionen ab IE 9 dieses. “shimming” kann eine sicheres cross-browser Verhalten ermöglichen. So lange andere moderne Browser weiterhin dieses Verhalten unterstützen, sowie zur Zeit IE, Mozilla, Chrome, Safari und Opera es tun, werden Entwickler beim Lesen von (DOM unterstützendem) slice Code, basierend auf diesem Schema, von der Semantik nicht in die Irre geführt.Sie können mit Sicherheit auf die Semantik vertrauen um das de facto Standard Verhalten sicherzustellen. (Dieser shim ermöglicht es auch, dass IE mit dem zweiten Argument von slice() ein explizites {{jsxref("null")}}/{{jsxref("undefined")}}) als Wert verwendet. Bei älteren Versionen des IE war dies nicht erlaubt, jedoch funktioniert es bei allen modernen Browsern inklusive IE &gt;= 9.)</p>
+
+<pre class="brush: js">/**
+ * Shim for "fixing" IE's lack of support (IE &lt; 9) for applying slice
+ * on host objects like NamedNodeMap, NodeList, and HTMLCollection
+ * (technically, since host objects have been implementation-dependent,
+ * at least before ES6, IE hasn't needed to work this way).
+ * Also works on strings, fixes IE &lt; 9 to allow an explicit undefined
+ * for the 2nd argument (as in Firefox), and prevents errors when
+ * called on other DOM objects.
+ */
+(function () {
+  'use strict';
+  var _slice = Array.prototype.slice;
+
+  try {
+    // Can't be used with DOM elements in IE &lt; 9
+    _slice.call(document.documentElement);
+  } catch (e) { // Fails in IE &lt; 9
+    // This will work for genuine arrays, array-like objects,
+    // NamedNodeMap (attributes, entities, notations),
+    // NodeList (e.g., getElementsByTagName), HTMLCollection (e.g., childNodes),
+    // and will not fail on other DOM objects (as do DOM elements in IE &lt; 9)
+    Array.prototype.slice = function(begin, end) {
+      // IE &lt; 9 gets unhappy with an undefined end argument
+      end = (typeof end !== 'undefined') ? end : this.length;
+
+      // For native Array objects, we use the native slice function
+      if (Object.prototype.toString.call(this) === '[object Array]'){
+        return _slice.call(this, begin, end);
+      }
+
+      // For array like object we handle it ourselves.
+      var i, cloned = [],
+        size, len = this.length;
+
+      // Handle negative value for "begin"
+      var start = begin || 0;
+      start = (start &gt;= 0) ? start : Math.max(0, len + start);
+
+      // Handle negative value for "end"
+      var upTo = (typeof end == 'number') ? Math.min(end, len) : len;
+      if (end &lt; 0) {
+        upTo = len + end;
+      }
+
+      // Actual expected size of the slice
+      size = upTo - start;
+
+      if (size &gt; 0) {
+        cloned = new Array(size);
+        if (this.charAt) {
+          for (i = 0; i &lt; size; i++) {
+            cloned[i] = this.charAt(start + i);
+          }
+        } else {
+          for (i = 0; i &lt; size; i++) {
+            cloned[i] = this[start + i];
+          }
+        }
+      }
+
+      return cloned;
+    };
+  }
+}());
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.10', 'Array.prototype.slice')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.slice', 'Array.prototype.slice')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.slice', 'Array.prototype.slice')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.slice")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.splice()")}}</li>
+ <li>{{jsxref("Function.prototype.call()")}}</li>
+ <li>{{jsxref("Function.prototype.bind()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/array/some/index.html b/files/de/web/javascript/reference/global_objects/array/some/index.html
new file mode 100644
index 0000000000..0fe959b0d7
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/array/some/index.html
@@ -0,0 +1,209 @@
+---
+title: Array.prototype.some()
+slug: Web/JavaScript/Reference/Global_Objects/Array/some
+tags:
+  - Array
+  - ECMAScript5
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/some
+---
+<div>{{JSRef}}</div>
+
+<p>Die Methode <code><strong>some()</strong></code> überprüft ob mindestens ein Element des Arrays den als Funktion übergebenen Kriterien entspricht.</p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Diese Methode gibt <code>false</code> für jede Bedingung auf einem leeren Array zurück.</p>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/js/array-some.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>arr</var>.some(<var>callback</var>[, <var>thisArg</var>])</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Funktion die jedes Element überprüft, nimmt drei Argumente entgegen:
+ <dl>
+  <dt><code>currentValue</code></dt>
+  <dd>Das aktuell zu verarbeitende Element des Arrays.</dd>
+  <dt><code>index</code>{{Optional_inline}}</dt>
+  <dd>Der Index des aktuell zu verarbeitenden Elementes im Array.</dd>
+  <dt><code>array</code>{{Optional_inline}}</dt>
+  <dd>Die Arrayinstanz auf welcher die <code>some()</code> Methode aufgerufen wurde.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code>{{Optional_inline}}</dt>
+ <dd>Wert der über das <code>this</code> Schüsselwort innerhalb von <code>callback</code> verfügbar ist.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p><code><strong>true</strong></code> wenn die callback Methode ein positives ({{Glossary("truthy")}}) Ergebnis für eines der Elemente im array ermittelt hat; Andernfalls, <code><strong>false</strong></code>.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p><code>some()</code> führt die <code>callback</code> Funktion einmal für jedes Element innerhalb des Arrays aus, bis ein Element gefunden wird, bei dem <code>callback</code> einen <em>truthy</em> Wert (<em>e</em>in Wert der durch die Konvertierung zu boolean true ergibt) zurückgibt. Wird ein solches Element gefunden, gibt <code>some()</code> sofort <code>true</code> zurück. <code>callback</code> wird nur für Elemente des Arrays ausgeführt, die einen zugewiesenen Wert haben; Für undefinierte oder gelöschte Elemente des Arrays wird <code>callback</code> nicht ausgeführt.</p>
+
+<p><code>callback</code> wird mit drei Argumenten aufgerufen: Dem Wert des Elementes, dem Index des Elementes und dem zugrundeliegenden <code>Array</code>.</p>
+
+<p>WIrd ein <code>thisArg</code> Parameter an die <code>some()</code> Methode übergeben, wird dieser als <code>this</code> bei der <code>callback</code> Funtion benutzt. Andernfalls wird der Wert {{jsxref("undefined")}} als <code>this</code> benutzt. Der tatsächliche Wert von <code>this</code> wird entsprechend der <a href="/de/docs/Web/JavaScript/Reference/Operators/this">generellen Regeln zur Belegung des this Schlüsselwortes innerhalb von Funktionen </a>gesetzt.</p>
+
+<p><code>some()</code> verändert nicht das Array auf dem die Methode aufgerufen wurde.</p>
+
+<p>Die von <code>some()</code> zu verarbeitenden Elemente werden vor dem ersten Aufruf von <code>callback</code> ermittelt. Elemente, die nach dem Aufruf von <code>some()</code> zum Array hinzugefügt werden, werden nicht mit <code>callback</code> aufgerufen. <span id="result_box" lang="de"><span>Wird ein noch nicht besuchtes Element des Arrays durch </span></span><code>callback</code><span lang="de"><span> geändert, wird sein Wert, der an </span></span><code>callback</code><span lang="de"><span> </span></span><span lang="de"><span> übermittelt wird, der Wert zu dem Zeitpunkt, zu dem <code>some()</code> den Index besucht, sein.</span></span> Wird ein Element aus dem Array gelöscht, wird es nicht betrachtet.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Werte_eines_Arrays_überprüfen">Werte eines Arrays überprüfen</h3>
+
+<p>Die folgenden Beispiele prüfen ob es ein Element größer als 10 im Array gibt.</p>
+
+<pre class="brush: js">function isBiggerThan10(element, index, array) {
+  return element &gt; 10;
+}
+
+[2, 5, 8, 1, 4].some(isBiggerThan10);  // false
+[12, 5, 8, 1, 4].some(isBiggerThan10); // true
+</pre>
+
+<h3 id="Werte_eines_Arrays_mit_arrow_functions_überprüfen">Werte eines Arrays mit arrow functions überprüfen</h3>
+
+<p><a href="/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow Funktionen</a> ermöglichen eine kürzere Schreibweise für die gleiche Logik.</p>
+
+<pre class="brush: js">[2, 5, 8, 1, 4].some(x =&gt; x &gt; 10);  // false
+[12, 5, 8, 1, 4].some(x =&gt; x &gt; 10); // true
+</pre>
+
+<h3 id="Prüfen_ob_ein_Element_in_einem_Array_existiert">Prüfen ob ein Element in einem Array existiert</h3>
+
+<p>Um die Methode  <code>includes()</code> nachzuahmen, gibt  die folgende Funktion <code>true</code> zurück, wenn das Element im Array existiert:</p>
+
+<pre class="brush: js">var fruits = ['apple', 'banana', 'mango', 'guava'];
+
+function checkAvailability(arr, val) {
+  return arr.some(function(arrVal) {
+    return val === arrVal;
+  });
+}
+
+checkAvailability(fruits, 'kela');   // false
+checkAvailability(fruits, 'banana'); // true</pre>
+
+<h3 id="Prüfen_ob_ein_Element_in_einem_Array_existiert_mit_einer_arrow_function">Prüfen ob ein Element in einem Array existiert mit einer arrow function</h3>
+
+<pre class="brush: js">var fruits = ['apple', 'banana', 'mango', 'guava'];
+
+function checkAvailability(arr, val) {
+  return arr.some(arrVal =&gt; val === arrVal);
+}
+
+checkAvailability(fruits, 'kela');   // false
+checkAvailability(fruits, 'banana'); // true</pre>
+
+<h3 id="Jeden_Wert_in_einen_boolschen_Wert_konvertieren">Jeden Wert in einen boolschen Wert konvertieren</h3>
+
+<pre class="brush: js">var TRUTHY_VALUES = [true, 'true', 1];
+
+function getBoolean(a) {
+  'use strict';
+
+  var value = a;
+
+  if (typeof value === 'string') {
+    value = value.toLowerCase().trim();
+  }
+
+  return TRUTHY_VALUES.some(function(t) {
+    return t === value;
+  });
+}
+
+getBoolean(false);   // false
+getBoolean('false'); // false
+getBoolean(1);       // true
+getBoolean('true');  // true</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p><code>some()</code> wurde im Rahmen des ECMA-262 Standards in der 5. Edition hinzugefügt. Daher kann es sein, dass es nicht in allen Implementierungen des Standards enthalten ist. Diese Problem kann behoben werden, indem folgenden Quelltext vor Ihren Skripten eingefügt wird, wodurch Sie die <code>some()</code> Methode in Ihrem Programmcode verwenden können. Die nachfolgende Implementierung ist eine exakte Abdeckung der ECMA-262 Spezifikation in der 5. Edition, basierend auf der Annahme dass {{jsxref("Object")}} und {{jsxref("TypeError")}} Originalwerte aufweisen und dass <code>fun.call</code> den Originalwert von {{jsxref("Function.prototype.call()")}} liefert.</p>
+
+<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.17
+// Reference: http://es5.github.io/#x15.4.4.17
+if (!Array.prototype.some) {
+  Array.prototype.some = function(fun/*, thisArg*/) {
+    'use strict';
+
+    if (this == null) {
+      throw new TypeError('Array.prototype.some called on null or undefined');
+    }
+
+    if (typeof fun !== 'function') {
+      throw new TypeError();
+    }
+
+    var t = Object(this);
+    var len = t.length &gt;&gt;&gt; 0;
+
+    var thisArg = arguments.length &gt;= 2 ? arguments[1] : void 0;
+    for (var i = 0; i &lt; len; i++) {
+      if (i in t &amp;&amp; fun.call(thisArg, t[i], i, t)) {
+        return true;
+      }
+    }
+
+    return false;
+  };
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.17', 'Array.prototype.some')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.some', 'Array.prototype.some')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.some', 'Array.prototype.some')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.some")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.find()")}}</li>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.some()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/array/sort/index.html b/files/de/web/javascript/reference/global_objects/array/sort/index.html
new file mode 100644
index 0000000000..a59d8ff2c6
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/array/sort/index.html
@@ -0,0 +1,264 @@
+---
+title: Array.prototype.sort()
+slug: Web/JavaScript/Reference/Global_Objects/Array/sort
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/sort
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>sort()</strong></code> Methode sortiert die Elemente eines Arrays {{interwiki("wikipedia","in-place")}} und gibt das Array zurück. Standardmäßig werden alle Elemente in Strings umgewandelt und dann anhand ihrer UTF-16 Codepoints miteinander verglichen.</p>
+
+<p>Die Zeit- und Speicherkomplexität des Sortierens kann nicht garantiert werden, weil sie implementierungsabhängig ist.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-sort.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>arr</var>.sort([<var>compareFunction</var>])
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>compareFunction</code> {{optional_inline}}</dt>
+ <dd>Gibt eine Funktion an, die die Sortierreihenfolge definiert. Wenn nicht angegeben, wird das Array nach dem <a href="/de/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Unicode">Unicode</a>-Codepoint jedes Zeichens entsprechend der Stringumwandlung jedes Elements sortiert.
+ <dl>
+  <dt><code>firstEl</code></dt>
+  <dd>Das erste Element zum Vergleich.</dd>
+  <dt><code>secondEl</code></dt>
+  <dd>Das zweite Element zum Vergleich.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Das sortierte Array. Beachten Sie, dass das Array {{interwiki("wikipedia","in-place")}} sortiert und keine Kopie angelegt wird.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Wenn <code>compareFunction</code> nicht angegeben wird, werden alle Arrayelemente, die nicht <code>undefined</code> sind, sortiert indem sie in Strings konvertiert werden und in UTF-16-Code-Unit-Reihenfolge verglichen werden. Zum Beispiel steht "banana" vor "cherry". Bei einer numerischen Sortierung kommt 9 vor 80, aber weil Zahlen in Strings konvertiert werden, kommt "80" in Unicode vor "9". Alle Elemente die <code>undefined</code> sind werden ans Ende des Arrays sortiert.</p>
+
+<div class="blockIndicator note">
+<p>Hinweis: In UTF-16 werden Unicode-Zeichen über <code>\uFFFF</code> als zwei Ersatzcodeeinheiten im Bereich <code>\uD800</code> - <code>\ uDFFF</code> codiert. Der Wert jeder Codeeinheit wird für den Vergleich gesondert berücksichtigt. Daher wird das durch das Ersatzpaar <code>\uD655</code> <code>\uDE55</code> gebildete Zeichen vor dem Zeichen <code>\uFF3A</code> sortiert.</p>
+</div>
+
+<p>Wenn <code>compareFunction</code> angegeben wird, werden alle Arrayelemente, die nicht <code>undefined</code> sind, nach dem Rückgabewert der Vergleichsfunktion sortiert (alle Elemente die <code>undefined</code> sind werden ans Ende des Arrays sortiert, ohne Aufruf von <code>compareFunction</code>). Wenn <code>a</code> und <code>b</code> zwei zu vergleichende Elemente sind, gilt Folgendes:</p>
+
+<ul>
+ <li>Ist <code>compareFunction(a, b)</code> kleiner als 0, sortiere <code>a</code> auf einen niedrigeren Index als <code>b</code>, d. h. <code>a</code> kommt zuerst.</li>
+ <li>Ist <code>compareFunction(a, b)</code> gleich 0, bleibt die Reihenfolge von <code>a</code> und <code>b</code> in Bezug zueinander unverändert, werden aber im Vergleich zu den restlichen Elementen des Arrays einsortiert. Hinweis: Der ECMAscript Standard garantiert dieses Verhalten nicht. Demzufolge berücksichtigen dies nicht alle Browser (z. B. Mozilla Versionen von 2003 und älter).</li>
+ <li>Ist <code>compareFunction(a, b)</code> größer als 0, sortiere <code>b</code> auf einen niedrigeren Index als <code>a</code>, d. h. <code>b</code> kommt zuerst.</li>
+ <li><code>compareFunction(a, b)</code> muss immer denselben Wert zurückgeben, wenn dasselbe Paar an Argumenten <code>a</code> und <code>b</code> übergeben wird. Werden inkonsistente Ergebnisse zurückgegeben, ist die Sortierreihenfolge undefiniert.</li>
+</ul>
+
+<p>Die Vergleichsfunktion hat die Form:</p>
+
+<pre class="brush: js">function compare(a, b) {
+  if (a ist kleiner als b anhand von Sortierkriterien) {
+    return -1;
+  }
+  if (a ist größer als b anhand der Sortierkriterien) {
+    return 1;
+  }
+  // a muss gleich b sein
+  return 0;
+}
+</pre>
+
+<p>Um Nummern anstatt Strings zu vergleichen, kann die Vergleichsfunktion einfach <code>b</code> von <code>a</code> subtrahieren. Die folgende Funktion sortiert ein Array aufsteigend (sofern kein <code>Infinity</code> und <code>NaN</code> enthalten):</p>
+
+<pre class="brush: js">function compareNumbers(a, b) {
+  return a - b;
+}
+</pre>
+
+<p>Die <code>sort</code> Methode kann bequem mit {{jsxref("Operators/function", "Funktionsausdrücken", "", 1)}} benutzt werden:</p>
+
+<pre class="brush: js">var numbers = [4, 2, 5, 1, 3];
+numbers.sort(function(a, b) {
+  return a - b;
+});
+console.log(numbers);
+
+// [1, 2, 3, 4, 5]
+</pre>
+
+<p>ES2015 bietet {{jsxref("Functions/Arrow_functions", "Pfeilfunktionen", "", 1)}} mit noch kürzerer Syntax.</p>
+
+<pre class="brush: js">let numbers = [4, 2, 5, 1, 3];
+numbers.sort((a, b) =&gt; a - b);
+console.log(numbers);
+
+// [1, 2, 3, 4, 5]</pre>
+
+<p>Objekte können anhand der Werte eines ihrer Eigenschaften sortiert werden.</p>
+
+<pre class="brush: js">var items = [
+  { name: 'Edward', value: 21 },
+  { name: 'Sharpe', value: 37 },
+  { name: 'And', value: 45 },
+  { name: 'The', value: -12 },
+  { name: 'Magnetic', value: 13 },
+  { name: 'Zeros', value: 37 }
+];
+
+// Sortieren nach Wert
+items.sort(function (a, b) {
+  return a.value - b.value;
+});
+
+// Sortieren nach Wert
+items.sort(function(a, b) {
+  var nameA = a.name.toUpperCase(); // Groß-/Kleinschreibung ignorieren
+  var nameB = b.name.toUpperCase(); // Groß-/Kleinschreibung ignorieren
+  if (nameA &lt; nameB) {
+    return -1;
+  }
+  if (nameA &gt; nameB) {
+    return 1;
+  }
+
+  // Namen müssen gleich sein
+  return 0;
+});</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Erstellen_Anzeigen_und_Sortieren_eines_Arrays">Erstellen, Anzeigen und Sortieren eines Arrays</h3>
+
+<p>Im folgenden Beispiel werden vier Arrays erstellt, das ursprüngliche Array angezeigt, danach die sortierten Arrays. Die numerischen Arrays werden erst ohne, dann mit Vergleichsfunktion sortiert.</p>
+
+<pre class="brush: js">var stringArray = ['Blue', 'Humpback', 'Beluga'];
+var numericStringArray = ['80', '9', '700'];
+var numberArray = [40, 1, 5, 200];
+var mixedNumericArray = ['80', '9', '700', 40, 1, 5, 200];
+
+function compareNumbers(a, b) {
+  return a - b;
+}
+
+console.log('stringArray:', stringArray.join());
+console.log('Sorted:', stringArray.sort());
+
+console.log('numberArray:', numberArray.join());
+console.log('Sorted without a compare function:', numberArray.sort());
+console.log('Sorted with compareNumbers:', numberArray.sort(compareNumbers));
+
+console.log('numericStringArray:', numericStringArray.join());
+console.log('Sorted without a compare function:', numericStringArray.sort());
+console.log('Sorted with compareNumbers:', numericStringArray.sort(compareNumbers));
+
+console.log('mixedNumericArray:', mixedNumericArray.join());
+console.log('Sorted without a compare function:', mixedNumericArray.sort());
+console.log('Sorted with compareNumbers:', mixedNumericArray.sort(compareNumbers));</pre>
+
+<p>Dieses Beispiel erzeugt die folgende Ausgabe. Wie die Ausgabe zeigt, werden Zahlen bei Verwendung einer Vergleichsfunktion korrekt sortiert, ob es sich um Zahlen oder numerische Strings handelt.</p>
+
+<pre>stringArray: Blue,Humpback,Beluga
+Sorted: Beluga,Blue,Humpback
+
+numberArray: 40,1,5,200
+Sorted without a compare function: 1,200,40,5
+Sorted with compareNumbers: 1,5,40,200
+
+numericStringArray: 80,9,700
+Sorted without a compare function: 700,80,9
+Sorted with compareNumbers: 9,80,700
+
+mixedNumericArray: 80,9,700,40,1,5,200
+Sorted without a compare function: 1,200,40,5,700,80,9
+Sorted with compareNumbers: 1,5,9,40,80,200,700</pre>
+
+<h3 id="Sortierung_von_nicht-ASCII_Zeichen">Sortierung von nicht-ASCII Zeichen</h3>
+
+<p>Zum Sortieren von Strings mit Nicht-ASCII-Zeichen, d. h. Zeichenfolgen mit Akzentzeichen (e, é, è, a, ä, etc.), Zeichenfolgen aus anderen Sprachen als Englisch: Verwenden Sie {{jsxref("String.localeCompare")}}. Diese Funktion kann diese Zeichen vergleichen, damit sie in der richtigen Reihenfolge angezeigt werden.</p>
+
+<pre class="brush: js">var items = ['réservé', 'premier', 'cliché', 'communiqué', 'café', 'adieu'];
+items.sort(function (a, b) {
+  return a.localeCompare(b);
+});
+
+// items is ['adieu', 'café', 'cliché', 'communiqué', 'premier', 'réservé']</pre>
+
+<h3 id="Sortieren_mit_map()">Sortieren mit <code>map()</code></h3>
+
+<p>Die <code>compareFunction</code> kann mehrmals pro Element innerhalb des Arrays aufgerufen werden. Abhängig von der Beschaffenheit von <code>compareFunction</code> kann dies zu einem hohen Overhead führen. Je mehr Arbeit eine <code>compareFunction</code> erledigt und je mehr Elemente zu sortieren sind, desto sinnvoller ist es die Verwendung von {{jsxref("Array.prototype.map()", "map()")}} zum Sortieren in Betracht zu ziehen. Die Idee ist, das Array einmal zu durchlaufen, um die tatsächlichen Werte für das Sortieren in ein temporäres Array zu extrahieren, das temporäre Array zu sortieren und dann das temporäre Array zu durchlaufen, um die richtige Reihenfolge zu erreichen.</p>
+
+<pre class="brush: js">// Das zu sortierende Array
+var list = ['Delta', 'alpha', 'CHARLIE', 'bravo'];
+
+// Temporäres Array enthält Objekte mit Position und Sortierwert
+var mapped = list.map(function(el, i) {
+  return { index: i, value: el.toLowerCase() };
+})
+
+// Sortieren des gemappten Arrays mit den reduzierten Werten
+mapped.sort(function(a, b) {
+  if (a.value &gt; b.value) {
+    return 1;
+  }
+  if (a.value &lt; b.value) {
+    return -1;
+  }
+  return 0;
+});
+
+// Behälter für die sich ergebende Reihenfolge
+var result = mapped.map(function(el){
+  return list[el.index];
+});</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.11', 'Array.prototype.sort')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.sort', 'Array.prototype.sort')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.sort', 'Array.prototype.sort')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.sort")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.reverse()")}}</li>
+ <li>{{jsxref("String.prototype.localeCompare()")}}</li>
+ <li><a href="https://v8.dev/blog/array-sort">Informationen zur Stabilität des von der V8-Engine verwendeten Algorithmus</a> (Englisch)</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/array/splice/index.html b/files/de/web/javascript/reference/global_objects/array/splice/index.html
new file mode 100644
index 0000000000..f77aab6bb1
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/array/splice/index.html
@@ -0,0 +1,162 @@
+---
+title: Array.prototype.splice()
+slug: Web/JavaScript/Reference/Global_Objects/Array/splice
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/splice
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>splice()</strong></code> Methode ändert den Inhalt eines Arrays durch das Entfernen vorhandener Elemente und/oder Hinzufügen neuer Elemente.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-splice.html")}}</div>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>array</var>.splice(<var>start[</var>, <var>deleteCount[</var>, <var>item1[</var>, <var>item2[</var>, <em>...]]]]</em>)
+</pre>
+
+<h3 id="Parameters" name="Parameters">Parameter</h3>
+
+<dl>
+ <dt><code>start</code></dt>
+ <dd>Index ab welchem das Array geändert werden soll. Falls <code>start</code> größer als die Länge des Arrays ist, wird <code>start</code> auf die Länge des Arrays gesetzt.</dd>
+ <dd>Falls <code>start</code> negativ ist, beginnt die Änderung entsprechend viele Stellen rückwärts vom Ende des Arrays (d.h. hat <code>start</code> den Wert -n ist dies gleichbedeutend mit <code>array.length - n</code>) und wird auf 0 gesetzt wenn der absolute Wert von <code>start</code> größer als die Länge des Arrays ist.</dd>
+ <dt><code>deleteCount</code> {{optional_inline}}</dt>
+ <dd>Gibt die Anzahl der zu entfernenden alten Array Elemente an.</dd>
+ <dd>Wenn <code>deleteCount</code> weggelassen wird oder wenn der Wert größer oder gleich <code>array.length - start</code> ist (d. h. wenn der Wert größer oder gleich der Anzahl der von <code>start</code> aus verbleibenden Elemente ist), wird das ganze Array ab dem Index <code>start</code> gelöscht.</dd>
+ <dd>Wenn <code>deleteCount</code> 0 oder negativ ist, werden keine Elemente entfernt. In diesem Fall sollte man mindestens ein neues Element als weiteren Parameter übergeben, da das Array sonst nicht geändert wird.</dd>
+ <dt><code>item1, item2, ...</code> {{optional_inline}}</dt>
+ <dd>Die Elemente, die dem Array ab dem Index <code>start</code> hinzugefügt werden sollen. Falls keine Elemente angegeben werden, entfernt <code>splice</code> lediglich Elemente des Arrays.</dd>
+</dl>
+
+<h3 id="Returns" name="Returns">Rückgabewert</h3>
+
+<p>Ein Array, welches die entfernten Elemente enthält. Wenn nur ein Element entfernt wurde, wird ein Array mit nur einem Element zurückgegeben. Wenn kein Element entfernt wurde, wird ein leeres Array zurückgegeben.</p>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p>Wenn die Anzahl der neu hinzugefügten Elemente ungleich der Anzahl der entfernten Elemente ist, wird die Länge des Arrays geändert. Bei gleicher Anzahl werden vorhandene Elemente sozusagen ersetzt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Example_Using_splice" name="Example:_Using_splice">Entfernen von 0 (null) Elementen bei Index 2 und Einfügen von "drum"</h3>
+
+<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
+var removed = myFish.splice(2, 0, 'drum');
+
+// myFish is ["angel", "clown", "drum", "mandarin", "sturgeon"]
+// removed is [], no elements removed</pre>
+
+<h3 id="Entfernen_von_o_(null)_Elementen_bei_Index_2_und_Einfügen_von_drum_und_guitar">Entfernen von o (null) Elementen bei Index 2 und Einfügen von "drum" und "guitar"</h3>
+
+<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
+var removed = myFish.splice(2, 0, 'drum', 'guitar');
+
+// myFish is ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]
+// removed is [], no elements removed</pre>
+
+<h3 id="Entfernen_von_1_Element_bei_Index_3">Entfernen von 1 Element bei Index 3</h3>
+
+
+
+<pre class="brush: js">var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
+var removed = myFish.splice(3, 1);
+
+// removed is ["mandarin"]
+// myFish is ["angel", "clown", "drum", "sturgeon"]</pre>
+
+
+
+<h3 id="Entfernen_von_1_Element_bei_Index_2_und_Einfügen_von_trumpet">Entfernen von 1 Element bei Index 2 und Einfügen von "trumpet"</h3>
+
+<pre class="brush: js">var myFish = ['angel', 'clown', 'drum', 'sturgeon'];
+var removed = myFish.splice(2, 1, 'trumpet');
+
+// myFish is ["angel", "clown", "trumpet", "sturgeon"]
+// removed is ["drum"]
+</pre>
+
+<h3 id="Entfernen_von_2_Elementen_bei_Index_0_und_Einfügen_von_parrot_anemone_und_blue">Entfernen von 2 Elementen bei Index 0 und Einfügen von "parrot", "anemone" und "blue"</h3>
+
+<pre class="brush: js">var myFish = ['angel', 'clown', 'trumpet', 'sturgeon'];
+var removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue');
+
+// myFish is ["parrot", "anemone", "blue", "trumpet", "sturgeon"]
+// removed is ["angel", "clown"]</pre>
+
+<h3 id="Entfernen_von_2_Elementen_vom_Index_2">Entfernen von 2 Elementen vom Index 2</h3>
+
+<pre class="brush: js">var myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon'];
+var removed = myFish.splice(myFish.length - 3, 2);
+
+// myFish is ["parrot", "anemone", "sturgeon"]
+// removed is ["blue", "trumpet"]</pre>
+
+<h3 id="Entfernen_von_einem_Element_bei_Index_-2">Entfernen von einem Element bei Index -2</h3>
+
+<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
+var removed = myFish.splice(-2, 1);
+
+// myFish is ["angel", "clown", "sturgeon"]
+// removed is ["mandarin"]</pre>
+
+<h3 id="Entfernen_von_allen_Elementen_nach_Index_2_(inklusiv)">Entfernen von allen Elementen nach Index 2 (inklusiv)</h3>
+
+<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
+var removed = myFish.splice(2);
+
+// myFish is ["angel", "clown"]
+// removed is ["mandarin", "sturgeon"]</pre>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommenter</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.12', 'Array.prototype.splice')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.splice', 'Array.prototype.splice')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.splice', 'Array.prototype.splice')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.splice")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.push()", "push()")}} / {{jsxref("Array.prototype.pop()", "pop()")}} — hinzufügen/entfernen von Elementen vom Ende des Arrays</li>
+ <li>{{jsxref("Array.prototype.unshift()", "unshift()")}} / {{jsxref("Array.prototype.shift()", "shift()")}} — hinzufügen/entfernen von Elementen vom Beginn eines Arrays</li>
+ <li>{{jsxref("Array.prototype.concat()", "concat()")}} — gibt ein neues Array bestehend aus dem aktuellen Array kombiniert mit anderen Arrays und oder Werten</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/array/tolocalestring/index.html b/files/de/web/javascript/reference/global_objects/array/tolocalestring/index.html
new file mode 100644
index 0000000000..ef5c1883b5
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/array/tolocalestring/index.html
@@ -0,0 +1,183 @@
+---
+title: Array.prototype.toLocaleString()
+slug: Web/JavaScript/Reference/Global_Objects/Array/toLocaleString
+tags:
+  - Array
+  - Internationalization
+  - JavaScript
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/toLocaleString
+---
+<div>{{JSRef}}</div>
+
+<p>Die Methode <code><strong>toLocaleString()</strong></code> gibt als Rückgabewert einen String zurück, welcher die Elemente des Arrays darstellt. Die Array-Elemente werden mittels ihrer <code>toLocaleString</code> Methode in Strings umgewandelt und durch einen sprachspezifischen String (wie zum Beispiel ein Kommazeichen “,”) separiert.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-tolocalestring.html")}}</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>arr</var>.toLocaleString([locales [, options]]);
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>locales</code> {{optional_inline}}</dt>
+ <dd>Ein String mit einem Language-Tag nach BCP 47 oder ein Array solcher Strings. Für die allgemeine Art und Interpretation des <code>locales</code> Parameters, siehe Seite {{jsxref("Intl")}}.</dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>Ein Objekt mit konfigurierbaren Eigenschaften, für Numbers siehe {{jsxref("Number.prototype.toLocaleString()")}}, und für Datumsangaben siehe {{jsxref("Date.prototype.toLocaleString()")}}.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein einzelner String der die Elemente des Arrays darstellt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Verwendung_von_locales_und_options">Verwendung von <code>locales</code> und <code>options</code></h3>
+
+<p>Die Elemente des Arrays werden mittels der <code>toLocaleString</code> Methode in einen String umgewandelt.</p>
+
+<ul>
+ <li><code>Object</code>: {{jsxref("Object.prototype.toLocaleString()")}}</li>
+ <li><code>Number</code>: {{jsxref("Number.prototype.toLocaleString()")}}</li>
+ <li><code>Date</code>: {{jsxref("Date.prototype.toLocaleString()")}}</li>
+</ul>
+
+<p>Jedem Strings und Numbers Element im Array <code>prices</code> die Währung zuordnen:</p>
+
+<pre class="brush: js">var prices = ['￥7', 500, 8123, 12];
+prices.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' });
+
+// "￥7,￥500,￥8,123,￥12"
+</pre>
+
+<p>Für weitere Beispiele, siehe auch {{jsxref("Global_Objects/Intl","Intl")}}, {{jsxref("Global_Objects/NumberFormat","NumberFormat")}} und {{jsxref("Global_Objects/DateTimeFormat","DateTimeFormat")}}.</p>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js">// https://tc39.github.io/ecma402/#sup-array.prototype.tolocalestring
+if (!Array.prototype.toLocaleString) {
+  Object.defineProperty(Array.prototype, 'toLocaleString', {
+    value: function(locales, options) {
+      // 1. Let O be ? ToObject(this value).
+      if (this == null) {
+        throw new TypeError('"this" is null or not defined');
+      }
+
+      var a = Object(this);
+
+      // 2. Let len be ? ToLength(? Get(A, "length")).
+      var len = a.length &gt;&gt;&gt; 0;
+
+      // 3. Let separator be the String value for the
+      //    list-separator String appropriate for the
+      //    host environment's current locale (this is
+      //    derived in an implementation-defined way).
+      // NOTE: In this case, we will use a comma
+      var separator = ',';
+
+      // 4. If len is zero, return the empty String.
+      if (len === 0) {
+        return '';
+      }
+
+      // 5. Let firstElement be ? Get(A, "0").
+      var firstElement = a[0];
+      // 6. If firstElement is undefined or null, then
+      //  a.Let R be the empty String.
+      // 7. Else,
+      //  a. Let R be ?
+      //     ToString(?
+      //       Invoke(
+      //        firstElement,
+      //        "toLocaleString",
+      //        « locales, options »
+      //       )
+      //     )
+      var r = firstElement == null ?
+        '' : firstElement.toLocaleString(locales, options);
+
+      // 8. Let k be 1.
+      var k = 1;
+
+      // 9. Repeat, while k &lt; len
+      while (k &lt; len) {
+        // a. Let S be a String value produced by
+        //   concatenating R and separator.
+        var s = r + separator;
+
+        // b. Let nextElement be ? Get(A, ToString(k)).
+        var nextElement = a[k];
+
+        // c. If nextElement is undefined or null, then
+        //   i. Let R be the empty String.
+        // d. Else,
+        //   i. Let R be ?
+        //     ToString(?
+        //       Invoke(
+        //        nextElement,
+        //        "toLocaleString",
+        //        « locales, options »
+        //       )
+        //     )
+        r = nextElement == null ?
+          '' : nextElement.toLocaleString(locales, options);
+
+        // e. Let R be a String value produced by
+        //   concatenating S and R.
+        r = s + r;
+
+        // f. Increase k by 1.
+        k++;
+      }
+
+      // 10. Return R.
+      return r;
+    }
+  });
+}
+</pre>
+
+<p>Für die Unterstützung von veralteten JavaScript Engines, die <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code> nicht kennen, sollte kein Polyfill für <code>Array.prototype</code> Methoden eingesetzt werden, da sie auf diese Weise nicht mehr nicht-durchzählbar gemacht werden können.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.tolocalestring', 'Array.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Initiale Definition war in ECMAScript 3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sup-array.prototype.tolocalestring', 'Array.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td>Diese Definition ersetzt die Definition aus ECMA-262.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.toLocaleString")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.toString()")}}</li>
+ <li>{{jsxref("Global_Objects/Intl","Intl")}}</li>
+ <li>{{jsxref("Object.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Number.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/array/tosource/index.html b/files/de/web/javascript/reference/global_objects/array/tosource/index.html
new file mode 100644
index 0000000000..0e7dd02745
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/array/tosource/index.html
@@ -0,0 +1,69 @@
+---
+title: Array.prototype.toSource()
+slug: Web/JavaScript/Reference/Global_Objects/Array/toSource
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/toSource
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>Die <code><strong>toSource()</strong></code> Methode gibt einen String zurück, welcher den Quelltext des Arrays repräsentiert.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>arr</var>.toSource()</pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein String, der den Quelltext des Array repräsentiert.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>toSource</code> Methode gibt folgende Werte zurück:</p>
+
+<ul>
+ <li>Für das eingebaute {{jsxref("Array")}} Objekt gibt <code>toSource</code> den folgenden String zurück, um anzudeuten, dass der Quelltext nicht verfügbar ist:
+
+  <pre class="brush: js">function Array() {
+    [native code]
+}
+</pre>
+ </li>
+ <li>Für Instanzen von {{jsxref("Array")}} gibt <code>toSource</code> einen String zurück, welcher den Quelltext des Arrays repräsentiert.</li>
+</ul>
+
+<p>Diese Methode wird für gewöhnlich von JavaScript intern aufgerufen und nicht explizit in einem QUelltext. Man kann <code>toSource</code> beim Debuggen aufrufen, um den Inhalt eines Arrays abzufragen.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Untersuchen_des_Quelltextes_eines_Arrays">Untersuchen des Quelltextes eines Arrays</h3>
+
+<p><span class="short_text" id="result_box" lang="de"><span>Um den Quellcode eines Arrays zu untersuchen:</span></span></p>
+
+<pre class="brush: js">var alpha = new Array('a', 'b', 'c');
+
+alpha.toSource();
+//returns ['a', 'b', 'c']
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>In keiner Spezifikation enthalten. Implementiert in JavaScript 1.3.</p>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.toSource")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+ <li>{{jsxref("Array.prototype.toString()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/array/tostring/index.html b/files/de/web/javascript/reference/global_objects/array/tostring/index.html
new file mode 100644
index 0000000000..0d8d1da3e6
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/array/tostring/index.html
@@ -0,0 +1,80 @@
+---
+title: Array.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/Array/toString
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/toString
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>toString()</strong></code> Methode gibt einen String zurück, der das Array und seine Elemente repräsentiert.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/array-tostring.html")}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>arr</var>.toString()</pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein String, der die Elemente des Arrays repräsentiert.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Das {{jsxref("Array")}} Objekt überschreibt die <code>toString</code> Methode von {{jsxref("Object")}}. Für Arrayobjekte fügt die <code>toString</code> Methode das Array zu einem String zusammen, der jedes Element des Arrayelemente durch Kommata getrennt enthält.</p>
+
+<p>JavaScript ruft die <code>toString</code> Methode automatisch auf wenn ein Array als Text repräsentiert wird oder wenn ein Array in einer Stringkonkatenation verwendet wird.</p>
+
+<h3 id="ECMAScript_5_Semantik">ECMAScript 5 Semantik</h3>
+
+<p>Beginnend mt JavaScript 1.8.5 (Firefox 4), und mit der Semantik des ECMAScript der 5. Edition, ist die <code>toString()</code> Methode generisch und kann mit jeglichen Objekten verwendet werden. {{jsxref("Object.prototype.toString()")}} wird aufgerufen und der resultierende Wert wird zurückgegeben.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.2', 'Array.prototype.toString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.tostring', 'Array.prototype.toString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.tostring', 'Array.prototype.toString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.toString")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.join()")}}</li>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/array/unobserve/index.html b/files/de/web/javascript/reference/global_objects/array/unobserve/index.html
new file mode 100644
index 0000000000..fd31177c3a
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/array/unobserve/index.html
@@ -0,0 +1,88 @@
+---
+title: Array.unobserve()
+slug: Web/JavaScript/Reference/Global_Objects/Array/unobserve
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Obsolete
+translation_of: Archive/Web/JavaScript/Array.unobserve
+---
+<div>{{JSRef}} {{obsolete_header}}</div>
+
+<p>Die Array<strong>.unobserve()</strong> Methode wird eingesetzt um Observers die mit {{jsxref("Array.observe()")}} eingestellt wurden zu entfernen, jedoch ist dieses veraltet und wurde schon von Browsern entfernt. Man kann einen allgemeineres {{jsxref("Proxy")}} Objekt benutzen.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Array.unobserve(<var>arr</var>, <var>callback</var>)</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>arr</code></dt>
+ <dd>Das Array, welches nicht mehr Überwacht werden soll.</dd>
+ <dt><code>callback</code></dt>
+ <dd>Die Referenz zu dem Observer, die mit der Überwachung von Änderungen auf dem Array <strong>arr</strong> aufhören soll.</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p><code>Array.unobserve()</code> sollt nach {{jsxref("Array.observe()")}} aufgerufen werden, um einen Observer von einem Array zu entfernen.</p>
+
+<p><strong>callback</strong> sollte eine Referenz auf eine Funktion sein und nicht einen anonyme Funktion sein, weil diese Referenz genutzt wird um den Observer zu entfernen. Es ist nicht zulässig <strong>Array.unobserve()</strong> mit einer anonymen Funktion aufzurufen, weil dadurch kein Observer entfernt wird.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Observer_von_Array_entfernen">Observer von Array entfernen</h3>
+
+<pre class="brush: js">var arr = [1, 2, 3];
+
+var observer = function(changes) {
+  console.log(changes);
+}
+
+Array.observe(arr, observer);
+​
+arr.push(4);
+// [{type: "splice", object: &lt;arr&gt;, index: 3, removed:[], addedCount: 1}]
+
+Array.unobserve(arr, observer);
+
+arr.pop();
+// The callback wasn't called</pre>
+
+<h3 id="Einsatz_einer_anonymen_Funktion">Einsatz einer anonymen Funktion</h3>
+
+<pre class="brush: js">var persons = ['Khalid', 'Ahmed', 'Mohammed'];
+
+Array.observe(persons, function (changes) {
+  console.log(changes);
+});
+
+persons.shift();
+// [{type: "splice", object: &lt;arr&gt;, index: 0, removed: [ "Khalid" ], addedCount: 0 }]
+
+Array.unobserve(persons, function (changes) {
+  console.log(changes);
+});
+
+persons.push('Abdullah');
+// [{type: "splice", object: &lt;arr&gt;, index: 2, removed: [], addedCount: 1 }]
+// The callback will always be called
+</pre>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.unobserve")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Array.observe()")}} {{obsolete_inline}}</li>
+ <li>{{jsxref("Object.observe()")}} {{obsolete_inline}}</li>
+ <li>{{jsxref("Object.unobserve()")}} {{obsolete_inline}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/array/unshift/index.html b/files/de/web/javascript/reference/global_objects/array/unshift/index.html
new file mode 100644
index 0000000000..2960b03cbb
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/array/unshift/index.html
@@ -0,0 +1,99 @@
+---
+title: Array.prototype.unshift()
+slug: Web/JavaScript/Reference/Global_Objects/Array/unshift
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/unshift
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>unshift()</strong></code> Methode fügt ein oder mehrere Elemente am Anfang eines Array hinzu und gibt die neue Länge des Arrays zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-unshift.html")}}</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>arr</var>.unshift(<var>element1</var>[, ...[, <var>elementN</var>]])</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>element<em>N</em></code></dt>
+ <dd>Die Elemente die am Anfang des Arrays hinzugefügt werden sollen.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Die neue {{jsxref("Array.length", "length")}} Eigenschaft des Arrays auf dem die Methode aufgerufen wurde.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>unshift</code> Methode fügt die gegeben Elemente am Anfang eines Arrays ähnlichen Objektes hinzu.</p>
+
+<p><code>unshift</code> ist extra generisch gehalten. Diese Methode kann mit {{jsxref("Function.call", "call", "", 1)}} oder {{jsxref("Function.apply", "apply", "", 1)}} auf einem Array ähnlichen Objekt angewendet werden. Objekte, die nicht über die Eigenschaft <code>length</code> verfügen, welche nicht das letzte in einer Reihe aufeinander folgenden, null-basierenden nummerische Werten repräsentieren, können sinnlose Ergebnisse liefern.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js">var arr = [1, 2];
+
+arr.unshift(0); // result of call is 3, the new array length
+// arr is [0, 1, 2]
+
+arr.unshift(-2, -1); // = 5
+// arr is [-2, -1, 0, 1, 2]
+
+arr.unshift([-3]);
+// arr is [[-3], -2, -1, 0, 1, 2]
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.13', 'Array.prototype.unshift')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.unshift")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.push()")}}</li>
+ <li>{{jsxref("Array.prototype.pop()")}}</li>
+ <li>{{jsxref("Array.prototype.shift()")}}</li>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/array/values/index.html b/files/de/web/javascript/reference/global_objects/array/values/index.html
new file mode 100644
index 0000000000..3736af04f8
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/array/values/index.html
@@ -0,0 +1,86 @@
+---
+title: Array.prototype.values()
+slug: Web/JavaScript/Reference/Global_Objects/Array/values
+tags:
+  - Array
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/values
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>values()</code></strong> Methode gibt ein neues <strong><code>Iterator</code></strong> Objekt des Arrays zurück, welches die Werte für jeden Eintrag im Array enthält.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/array-values.html")}}</p>
+
+<pre class="brush: js">var a = ['w', 'y', 'k', 'o', 'p'];
+var iterator = a.values();
+
+console.log(iterator.next().value); // w
+console.log(iterator.next().value); // y
+console.log(iterator.next().value); // k
+console.log(iterator.next().value); // o
+console.log(iterator.next().value); // p</pre>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>arr</var>.values()</pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein neues {{jsxref("Iterator")}} Objekt von dem Array.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Benutzung_der_for...of_loop">Benutzung der <code><a href="/de/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></code> loop</h3>
+
+<pre class="brush: js">var arr = ['w', 'y', 'k', 'o', 'p'];
+var iterator = arr.values();
+
+for (let letter of iterator) {
+  console.log(letter);
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.prototype.values', 'Array.prototype.values')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.values', 'Array.prototype.values')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.values")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.keys()")}}</li>
+ <li>{{jsxref("Array.prototype.entries()")}}</li>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/arraybuffer/@@species/index.html b/files/de/web/javascript/reference/global_objects/arraybuffer/@@species/index.html
new file mode 100644
index 0000000000..896576bf2e
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/arraybuffer/@@species/index.html
@@ -0,0 +1,72 @@
+---
+title: 'get ArrayBuffer[@@species]'
+slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/@@species
+tags:
+  - ArrayBuffer
+  - JavaScript
+  - Property
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/@@species
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>ArrayBuffer[@@species]</strong></code> Zugriffseigenschaft gibt den Konstruktor des <code>ArrayBuffer </code>zurück.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">ArrayBuffer[Symbol.species]
+</pre>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>species</code> Zugriffseigenschaft gibt den Standard-Konstruktor für <code>ArrayBuffer</code> Objekte zurück. Konstruktoren von Unterklassen überschreiben dieses, um die Konstruktorzuweisung zu ändern.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Die <code>species</code> Eigenschaft gibt die Standard-Konstruktorfunktion zurück, welche der <code>ArrayBuffer</code> Konstruktor für <code>ArrayBuffer</code> Objekte ist:</p>
+
+<pre class="brush: js">ArrayBuffer[Symbol.species]; // function ArrayBuffer()</pre>
+
+<p>In einem abgeleiteten Collection Objket (z. B. ein benutzerdefinierter Buffer <code>MyArrayBuffer</code>), ist der <code>MyArrayBuffer</code> species der <code>MyArrayBuffer</code> Konstruktor. Immer, wenn dieser überschrieben werden soll, um zum Beispiel das Eltern <code>ArrayBuffer</code> Objekt in der abgeleiteten Klassenmethode zurückzugeben:</p>
+
+<pre class="brush: js">class MyArrayBuffer extends ArrayBuffer {
+  // Overwrite MyArrayBuffer species to the parent ArrayBuffer constructor
+  static get [Symbol.species]() { return ArrayBuffer; }
+}</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-get-arraybuffer-@@species', 'get ArrayBuffer [ @@species ]')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-arraybuffer-@@species', 'get ArrayBuffer [ @@species ]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.ArrayBuffer.@@species")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("Symbol.species")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/arraybuffer/bytelength/index.html b/files/de/web/javascript/reference/global_objects/arraybuffer/bytelength/index.html
new file mode 100644
index 0000000000..aa346bcba5
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/arraybuffer/bytelength/index.html
@@ -0,0 +1,70 @@
+---
+title: ArrayBuffer.prototype.byteLength
+slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/byteLength
+tags:
+  - ArrayBuffer
+  - JavaScript
+  - Property
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/byteLength
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>byteLength</strong></code> Zugriffseigenschaft repräsentiert die Länge eines {{jsxref("ArrayBuffer")}} in Bytes.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/arraybuffer-bytelength.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>arr</var>aybuffer.byteLength</pre>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>byteLength</code> Eigenschaft ist eine Zugriffseigenschaft, wessen set-Funktion <code>undefined</code> ist, was bedeutet, dass diese nur gelesen werden kann. Der Wert wird ermittelt, wenn das Array erstellt wird und kann nicht geändert werden. Diese Eigenschaft gibt 0 zurück, wenn der <code>ArrayBuffer</code> detached ist.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+buffer.byteLength; // 8
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Ersetzt in ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-get-arraybuffer.prototype.bytelength', 'ArrayBuffer.prototype.byteLength')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition im ECMA Standard.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-arraybuffer.prototype.bytelength', 'ArrayBuffer.prototype.byteLength')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.ArrayBuffer.byteLength")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/arraybuffer/index.html b/files/de/web/javascript/reference/global_objects/arraybuffer/index.html
new file mode 100644
index 0000000000..a8de24aac7
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/arraybuffer/index.html
@@ -0,0 +1,144 @@
+---
+title: ArrayBuffer
+slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer
+tags:
+  - ArrayBuffer
+  - Constructor
+  - JavaScript
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer
+---
+<div>{{JSRef}}</div>
+
+<p>Das <code><strong>ArrayBuffer</strong></code> Objekt repräsentiert einen generischen Buffer mit fester Länge. Der Inhalt eines <code>ArrayBuffer</code>s kann nicht direkt bearbeitet werden; stattdessen wird eines der <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/TypedArray">typisierten Array-Objekte</a> oder ein {{jsxref("DataView")}} Objekt verwendet, welches den Buffer in einem bestimmten Format repräsentiert und von welchem aus sein Inhalt bearbeitet werden kann.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/arraybuffer-constructor.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">new ArrayBuffer(length)
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt>length</dt>
+ <dd>Die Größe, in Bytes, des zu erstellenden <code>ArrayBuffer</code>.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein neues <code>ArrayBuffer </code>Objekt der angegebenen Länge. Der Inhalt wird auf 0 initialisiert.</p>
+
+<h3 id="Ausnahmen">Ausnahmen</h3>
+
+<p>Ein {{jsxref("RangeError")}} wird erhoben wenn die Länge größer als {{jsxref("Number.MAX_SAFE_INTEGER")}} (&gt;= 2 ** 53) oder negativ ist.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Der <code>ArrayBuffer</code> Konstruktor erstellt einen neuen <code>ArrayBuffer </code>der angegebenen Länge in Bytes.</p>
+
+<h3 id="Einen_ArrayBuffer_von_existierenden_Daten_erstellen">Einen ArrayBuffer von existierenden Daten erstellen</h3>
+
+<ul>
+ <li><a href="/de/docs/Web/API/WindowBase64/Base64_encoding_and_decoding#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer">Von einem Base64-String</a></li>
+ <li><a href="/de/docs/Web/API/FileReader#readAsArrayBuffer()">Von einer lokalen Datei</a></li>
+</ul>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt><code>ArrayBuffer.length</code></dt>
+ <dd>Der Wert des <code>ArrayBuffer</code> Konstruktors für die Länge.</dd>
+ <dt>{{jsxref("ArrayBuffer.@@species", "get ArrayBuffer[@@species]")}}</dt>
+ <dd>Die Konstruktor-Funktion um abgeleitete Objekte zu erstellen.</dd>
+ <dt>{{jsxref("ArrayBuffer.prototype")}}</dt>
+ <dd>Erlaubt das Hinzufügen von Eigenschaften zu allen <code>ArrayBuffer </code>Objekten.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<dl>
+ <dt>{{jsxref("ArrayBuffer.isView", "ArrayBuffer.isView(arg)")}}</dt>
+ <dd>Gibt <code>true</code> zurück wenn <code>arg</code> eines der Views des <code>ArrayBuffers </code>ist, wie zum Beispiel die <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/TypedArray">typisierten Array-Objekt</a>e oder ein {{jsxref("DataView")}}. Ansonsten wird <code>false</code> zurückgegeben.</dd>
+ <dt>{{jsxref("ArrayBuffer.transfer", "ArrayBuffer.transfer(oldBuffer [, newByteLength])")}} {{experimental_inline}}</dt>
+ <dd>
+ <div class="line" id="file-arraybuffer-transfer-LC6">Gibt einen neuen <code>ArrayBuffer</code> zurück, dessen Inhalt von den Daten des <code>oldBuffer</code>s genommen wird und dann entweder abgeschnitten oder mit Null auf <code>newByteLength</code> erweitert wird.</div>
+ </dd>
+</dl>
+
+<h2 id="Instanzen">Instanzen</h2>
+
+<p>Alle <code>ArrayBuffer</code> Instanzen erben von {{jsxref("ArrayBuffer.prototype")}}.</p>
+
+<h3 id="Eigenschaften_2">Eigenschaften</h3>
+
+<p>{{page('de/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype','Eigenschaften')}}</p>
+
+<h3 id="Methoden_2">Methoden</h3>
+
+<p>{{page('de/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype','Methoden')}}</p>
+
+<dl>
+ <dt>{{jsxref("ArrayBuffer.slice()")}} {{non-standard_inline}}</dt>
+ <dd>Hat die selbe Funktion wie {{jsxref("ArrayBuffer.prototype.slice()")}}.</dd>
+</dl>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>In diesem Beispiel erstellen wir einen 8-byte Puffer mit einem {{jsxref("Global_Objects/Int32Array", "Int32Array")}} View, um auf den Puffer zu verweisen:</p>
+
+<pre class="brush: js">var buffer = new ArrayBuffer(8);
+var view   = new Int32Array(buffer);</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Ersetzt durch ECMAScript 6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-arraybuffer-constructor', 'ArrayBuffer')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initiale Definition im ECMA Standard. Spezifiziert, dass <code>new</code> benötigt wird.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-arraybuffer-constructor', 'ArrayBuffer')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.ArrayBuffer")}}</p>
+
+<h2 id="Kompatibilitätshinweis">Kompatibilitätshinweis</h2>
+
+<p>Seit ECMAScript 2015 müssen <code>ArrayBuffer</code> Konstruktor mit einem {{jsxref("Operators/new", "new")}} Operator konstruiert werden. Einen <code>ArrayBuffer</code> Konstruktor als Funktion aufzurufen ohne <code>new</code> ab sofort einen {{jsxref("TypeError")}} erheben.</p>
+
+<pre class="brush: js example-bad">var dv = ArrayBuffer(10);
+// TypeError: Einen eingebauten ArrayBuffer-Konstruktor
+// ohne new aufzurufen ist nicht erlaubt.</pre>
+
+<pre class="brush: js example-good">var dv = new ArrayBuffer(10);</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a></li>
+ <li>{{jsxref("SharedArrayBuffer")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/arraybuffer/isview/index.html b/files/de/web/javascript/reference/global_objects/arraybuffer/isview/index.html
new file mode 100644
index 0000000000..f00f471fb3
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/arraybuffer/isview/index.html
@@ -0,0 +1,89 @@
+---
+title: ArrayBuffer.isView()
+slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/isView
+tags:
+  - ArrayBuffer
+  - JavaScript
+  - Method
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/isView
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>ArrayBuffer.isView()</strong></code> Methode gibt <code>true</code> zurück, wenn <code>arg</code> eines der <code>ArrayBuffer</code> Views ist, so wie <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/TypedArray">getyptes Array Objekte</a> oder eine {{jsxref("DataView")}}; andernfalls <code>false</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/arraybuffer-isview.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>ArrayBuffer.isView(<var>arg</var>)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>arg</code></dt>
+ <dd>Der Parameter, der überprüft wird.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p><code>true</code>, wenn der gegebene Parameter ist einer der <code>ArrayBuffer</code> Views; andernfalls <code>false</code>.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js">ArrayBuffer.isView();                    // false
+ArrayBuffer.isView([]);                  // false
+ArrayBuffer.isView({});                  // false
+ArrayBuffer.isView(null);                // false
+ArrayBuffer.isView(undefined);           // false
+ArrayBuffer.isView(new ArrayBuffer(10)); // false
+
+ArrayBuffer.isView(new Uint8Array());    // true
+ArrayBuffer.isView(new Float32Array());  // true
+ArrayBuffer.isView(new Int8Array(10).subarray(0, 3)); // true
+
+var buffer = new ArrayBuffer(2);
+var dv = new DataView(buffer);
+ArrayBuffer.isView(dv); // true
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Ersetzt in ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-arraybuffer.isview', 'ArrayBuffer.isView')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition im ECMA Standard.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-arraybuffer.isview', 'ArrayBuffer.isView')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.ArrayBuffer.isView")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Typed_arrays" title="en/JavaScript typed arrays">JavaScript typed arrays</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/arraybuffer/prototype/index.html b/files/de/web/javascript/reference/global_objects/arraybuffer/prototype/index.html
new file mode 100644
index 0000000000..b287e0712c
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/arraybuffer/prototype/index.html
@@ -0,0 +1,68 @@
+---
+title: ArrayBuffer.prototype
+slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype
+tags:
+  - ArrayBuffer
+  - JavaScript
+  - Property
+translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>ArrayBuffer.prototype</code></strong> Eigenschaft repräsentiert den Prototyp für das {{jsxref("ArrayBuffer")}} Objekt.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p><code>ArrayBuffer</code> Instanzen erben von <code>ArrayBuffer.prototype</code>. Wie bei allen Konstruktoren, kann der Prototype des Konstruktorobjekts geändert werden, um Änderungen für alle <code>ArrayBuffer</code> Instanzen zu übernehmen.</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt>ArrayBuffer.prototype.constructor</dt>
+ <dd>Spezifiziert die Funktion, die das Prototypeobjekt erstellt. Der Initialwert ist der eingebaute Standard-<code>ArrayBuffer</code>-Konstruktor.</dd>
+ <dt>{{jsxref("ArrayBuffer.prototype.byteLength")}} {{readonlyInline}}</dt>
+ <dd>Die größe, in Bytes, des Arrays. Dieser wird bei der Erstellung des Arrays ermittelt und kan nicht geändert werden.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<dl>
+ <dt>{{jsxref("ArrayBuffer.prototype.slice()")}}</dt>
+ <dd>Gibt einen neuen <code>ArrayBuffer</code> zurück, welcher eine Kopie der Bytes des eigentlichen <code>ArrayBuffer</code> einthält. Die Kopie geht von <code>begin</code> (inklusiv) bis <code>end</code> (exclusiv). Wenn einer der Werte negativ ist, referenziert er auf den Index vom Ende des Arrays an und nicht vom Beginn des Arrays.</dd>
+</dl>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spzifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-arraybuffer.prototype', 'ArrayBuffer.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-arraybuffer.prototype', 'ArrayBuffer.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.ArrayBuffer.prototype")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/arraybuffer/slice/index.html b/files/de/web/javascript/reference/global_objects/arraybuffer/slice/index.html
new file mode 100644
index 0000000000..f149d2322b
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/arraybuffer/slice/index.html
@@ -0,0 +1,88 @@
+---
+title: ArrayBuffer.prototype.slice()
+slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/slice
+tags:
+  - ArrayBuffer
+  - JavaScript
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/slice
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>slice()</strong></code> Methode gibt einen neuen <code>ArrayBuffer</code> zurück, wessen Inhalt eine Kopie der <code>ArrayBuffer</code> Bytes von <code>begin</code> (inklusiv) bis <code>end</code> (exklusiv) ist.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/arraybuffer-slice.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">arraybuffer.slice(begin[, end])</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>begin</code></dt>
+ <dd>0-basierter Byteindex an welchem slice <code>slice</code> mit dem zuschneiden beginnt.</dd>
+</dl>
+
+<dl>
+ <dt><code>end</code></dt>
+ <dd>Byteindex bevor <code>slice</code> das zuschneiden beendet. Wenn end nicht angegeben ist, wird der neue <code>ArrayBuffer</code> alle Bytes von <code>begin</code> des <code>ArrayBuffer</code> enthalten.<span id="result_box" lang="de"><span> Der durch die Anfangs- und Endwerte angegebene Bereich wird an den gültigen Indexbereich für das aktuelle Array gebunden.</span> <span>Wenn die berechnete Länge des neuen ArrayBuffers negativ wäre, wird er auf 0 gesetzt.</span></span></dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein neues <code>ArrayBuffer</code> Objekt.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>slice</code> Methode kopiert bis zum Byteindex <code>end</code> Parameter, der nicht enthalten ist. Wenn <code>begin</code> oder <code>end</code> negativ ist, referenziert dieser zum Index vom Ende der Array, im Gegensatz zum Anfang des Arrays</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einen_ArrayBuffer_kopieren">Einen <code>ArrayBuffer</code> kopieren</h3>
+
+<pre class="brush: js">var buf1 = new ArrayBuffer(8);
+var buf2 = buf1.slice(0);
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Ersetzt in EMCAScript 6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-arraybuffer.prototype.slice', 'ArrayBuffer.prototype.slice')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initiale Definition im ECMA Standard.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-arraybuffer.prototype.slice', 'ArrayBuffer.prototype.slice')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.ArrayBuffer.slice")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/arraybuffer/transfer/index.html b/files/de/web/javascript/reference/global_objects/arraybuffer/transfer/index.html
new file mode 100644
index 0000000000..3004da98bf
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/arraybuffer/transfer/index.html
@@ -0,0 +1,84 @@
+---
+title: ArrayBuffer.transfer()
+slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/transfer
+tags:
+  - ArrayBuffer
+  - Experimental
+  - JavaScript
+  - Method
+  - Reference
+  - TypedArrays
+translation_of: Archive/Web/JavaScript/ArrayBuffer.transfer
+---
+<div>{{JSRef}} {{SeeCompatTable}}</div>
+
+<p>Die statische <code><strong>ArrayBuffer.transfer()</strong></code> Funktion gibt einen neuen <code>ArrayBuffer</code> mit dem Inhalt von <code>oldBuffer</code>. Je nachdem, wei die <code>newByteLength</code> gesetzt ist, werden die Daten abgeschnitten oder erweitert. Wenn <code>newByteLength</code> nicht gesetzt ist, wird die <code>byteLength</code> von <code>oldBuffer</code> benutzt. Diese Operation bringt <code>oldBuffer</code> in einen detached Status.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">ArrayBuffer.transfer(oldBuffer [, newByteLength]);</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>oldBuffer</code></dt>
+ <dd>Ein {{jsxref("ArrayBuffer")}} Objekt von dem die Daten transferiert werden.</dd>
+ <dt>newByteLength</dt>
+ <dd>Die Bytelänge des neuen <code>ArrayBuffer</code> Objektes.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein neues <code>ArrayBuffer</code> Objekt.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>ArrayBuffer.transfer()</code> Methode erlaubt es ein <code>ArrayBuffer</code> zu vergrößern und zu detachen. Die Möglichkeit ein <code>ArrayBuffer</code> zu vergrößern ohne es zu kopieren, hat den Vorteil, dass es viel schneller für große Buffer ist (ähnlich wie bei realloc). Die Möglichkeit, dass ein <code>ArrayBuffer</code> detachet wird, gibt dem Entwickler die explizite Kontrolle über das freigeben des internen Speichers. Dieses vermeidet das Entfernen aller Referenzen und das Warten auf die Garbage Collection.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js">var buf1 = new ArrayBuffer(40);
+new Int32Array(buf1)[0] = 42;
+
+var buf2 = ArrayBuffer.transfer(buf1, 80);
+buf1.byteLength; // 0 but if you use the polyfill then the value is still 40
+buf2.byteLength; // 80
+new Int32Array(buf2)[0]; // 42
+
+var buf3 = ArrayBuffer.transfer(buf2, 0);
+buf2.byteLength; // 0 but if you use the polyfill then the value is still 80
+buf3.byteLength; // 0
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Für Browser, die die Funktion nicht nativ unterstützen, gibt es die Möglichkeit folgenden Quelltext am Anfang eines Skriptes einzufügen, um die Funktion <code>transfer()</code> zu benutzen. Diese Funktion ist nicht exakt die in der API beschriebene, weil Browser, die die Funktion unterstützen, direkten Zugriff auf die C++ Funktion <code>realloc()</code> haben, welche die Länge des Speichers erhöht und nur eine Kopie anlegt, wenn es nötig ist. Im Gegensatz dazu kopiert der folgende Pollyfill alles immer in neuen Speicher. Diese Funktion transferiert die Daten jedoch von einem <code>ArrayBuffer</code> zu einem anderen.</p>
+
+<pre class="brush: js">if (!ArrayBuffer.transfer) {
+    ArrayBuffer.transfer = function(source, length) {
+        if (!(source instanceof ArrayBuffer))
+            throw new TypeError('Source must be an instance of ArrayBuffer');
+        if (length &lt;= source.byteLength)
+            return source.slice(0, length);
+        var sourceView = new Uint8Array(source),
+            destView = new Uint8Array(new ArrayBuffer(length));
+        destView.set(sourceView);
+        return dest.buffer;
+    };
+}</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Ist in keiner aktuellen Spezifikation enthalten, wird aber <a href="https://esdiscuss.org/topic/sept-23-2014-meeting-notes">in der Zukunft für ECMA-262 geplant</a>.</p>
+
+<h2 id="Browserkompatibilität"><a id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</a></h2>
+
+
+
+<p>{{Compat("javascript.builtins.ArrayBuffer.transfer")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Typed_arrays" title="en/JavaScript typed arrays">JavaScript getypte Arrays</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/asyncfunction/index.html b/files/de/web/javascript/reference/global_objects/asyncfunction/index.html
new file mode 100644
index 0000000000..994df6d344
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/asyncfunction/index.html
@@ -0,0 +1,124 @@
+---
+title: AsyncFunction
+slug: Web/JavaScript/Reference/Global_Objects/AsyncFunction
+tags:
+  - Constructor
+  - Experimental
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/AsyncFunction
+---
+<div>{{JSRef}}</div>
+
+<p>Der <strong><code>AsyncFunction</code> Konstruktor</strong> erstellt ein neues {{jsxref("Statements/async_function", "AsyncFunction")}} Objekt. In JavaScript ist jede asynchrone Funktion ein <code>AsyncFunction</code> Objekt.</p>
+
+<div class="note">
+<p><strong>Hinweis: </strong><code>AsyncFunction</code> ist kein globales Objekt. Durch die ausführung des folgenden Quelltextes kann das Objekte erhalten werden.</p>
+
+<pre class="brush: js">Object.getPrototypeOf(async function(){}).constructor</pre>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">new AsyncFunction([<var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]],] <var>functionBody</var>)</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>arg1, arg2, ... arg<em>N</em></code></dt>
+ <dd>Namen, die für die Namen der formalen Parameter der Funktion verwendet werden. Jeder muss ein String mit einem validen JavaScript-Bezeichner sein oder eine Liste von Strings, welche mit einem Komma getrennt sind; zum Beispiel "<code>x</code>", "<code>theValue</code>", oder "<code>a,b</code>".</dd>
+ <dt><code>functionBody</code></dt>
+ <dd>Ein String, welcher die JavaScript-Anweisungen enthält, welche die Funktion definieren.</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>{{jsxref("Statements/async_function", "asyncFunction")}} Objekte, die mit dem <code>AsyncFunction</code> Konstruktor erstellt werden, werden analysieren, wenn sie erstellt werden. Dieses ist weniger effizient als die Deklaration einer asynchronen Funktion mit einem {{jsxref("Statements/async_function", "asyncFunction Ausdruck")}} und dem Aufruf in dem Code, weil solche Funktion mit dem Rest des Quelltextes analysieren werden.</p>
+
+<p><span id="result_box" lang="de"><span>Alle an die Funktion übergebenen Argumente werden als die Namen der Bezeichner der Parameter in der zu erstellenden Funktion in der Reihenfolge behandelt, in der sie übergeben werden.</span></span></p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Mit dem <code>AsyncFunction</code> Konstruktor erstellte {{jsxref("Statements/async_function", "asyncFunctions")}} erstellen keine Closures in ihrem Erstellungskontext; Sie werden immer im globalen Scope erstellt. Wenn sie ausgeführt werden, haben sie nur Zugriff auf eigene lokale Variablen und globale Variablen, jedoch nicht auf Variablen aus dem Scope, indem der <code>AsyncFunction</code> Konstruktor aufgerufen wurde. Dies ist der Unterschied zum Einsatz von {{jsxref("Global_Objects/eval", "eval")}} mit Quelltext für eine asynchrone Funktionsanweisung.</p>
+</div>
+
+<p>Das Aufrufen des <code>AsyncFunction</code> Konstruktors als Funktion (ohne Einsatz des <code>new</code> Operators) hat den gleichen Effekt wie das Aufrufen als Konstruktor.</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt><code><strong>AsyncFunction.length</strong></code></dt>
+ <dd>Die <code>AsyncFunction</code> Konstruktor Längeneigenschaft, welche den Wert 1 hat.</dd>
+ <dt>{{jsxref("AsyncFunction.prototype")}}</dt>
+ <dd>Erlaubt das Hinzufügen von Eigenschaften zu allen <code>AsyncFunction</code> Objekten.</dd>
+</dl>
+
+<h2 id="AsyncFunction_Prototype_Objekt"><code>AsyncFunction</code> Prototype Objekt</h2>
+
+<h3 id="Eigenschaften_2">Eigenschaften</h3>
+
+<div>{{page('/de/docs/Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype', 'Eigenschaften')}}</div>
+
+<h2 id="AsyncFunction_Instanzen"><code>AsyncFunction</code> Instanzen</h2>
+
+<p><code>AsyncFunction</code> Instanzen erben Methoden und Eigenschaften von {{jsxref("AsyncFunction.prototype")}}. Wie bei allen Konstruktoren ist es möglich die Eigenschaften des Konstruktor Objektes zu ändern, um Änderungen an allen <code>AsyncFunction</code> Instanzen vorzunehmen.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Erstellen_einer_asynchronen_Funktion_mit_einem_AsyncFunction_Konstruktor">Erstellen einer asynchronen Funktion mit einem <code>AsyncFunction</code> Konstruktor</h3>
+
+<pre class="brush: js">function resolveAfter2Seconds(x) {
+  return new Promise(resolve =&gt; {
+    setTimeout(() =&gt; {
+      resolve(x);
+    }, 2000);
+  });
+}
+
+var AsyncFunction = Object.getPrototypeOf(async function(){}).constructor
+
+var a = new AsyncFunction('a',
+                          'b',
+                          'return await resolveAfter2Seconds(a) + await resolveAfter2Seconds(b);');
+
+a(10, 20).then(v =&gt; {
+  console.log(v); // prints 30 after 4 seconds
+});
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-async-function-objects', 'AsyncFunction object')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Initiale Definition in ES2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.AsyncFunction")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Statements/async_function", "async function function")}}</li>
+ <li>{{jsxref("Operators/async_function", "async function expression")}}</li>
+ <li>{{jsxref("Global_Objects/Function", "Function")}}</li>
+ <li>{{jsxref("Statements/function", "function statement")}}</li>
+ <li>{{jsxref("Operators/function", "function expression")}}</li>
+ <li>{{jsxref("Functions_and_function_scope", "Functions and function scope", "", 1)}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/asyncfunction/prototype/index.html b/files/de/web/javascript/reference/global_objects/asyncfunction/prototype/index.html
new file mode 100644
index 0000000000..2dc516ca5c
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/asyncfunction/prototype/index.html
@@ -0,0 +1,61 @@
+---
+title: AsyncFunction.prototype
+slug: Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype
+tags:
+  - Experimental
+  - JavaScript
+  - Property
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>AsyncFunction.prototype</strong></code> Eigenschaft repräsentiert den Prototypen des {{jsxref("AsyncFunction")}} Objektes.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>{{jsxref("AsyncFunction")}} Objekte erben von <code>AsyncFunction.prototype</code>. <code>AsyncFunction.prototype</code> kann nicht verändert werden.</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt><code><strong>AsyncFunction.constructor</strong></code></dt>
+ <dd>Der Initialwert ist {{jsxref("AsyncFunction")}}.</dd>
+ <dt><code><strong>AsyncFunction.prototype[@@toStringTag]</strong></code></dt>
+ <dd>Gibt <code>"AsyncFunction"</code> zurück.</dd>
+</dl>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-async-function-constructor-prototype', 'AsyncFunction.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Initiale Definition in ES2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.AsyncFunction.prototype")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("AsyncFunction")}}</li>
+ <li>{{jsxref("Function")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/atomics/add/index.html b/files/de/web/javascript/reference/global_objects/atomics/add/index.html
new file mode 100644
index 0000000000..f9b8e98b1b
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/atomics/add/index.html
@@ -0,0 +1,83 @@
+---
+title: Atomics.add()
+slug: Web/JavaScript/Reference/Global_Objects/Atomics/add
+tags:
+  - Atomics
+  - JavaScript
+  - Method
+  - Shared Memory
+translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/add
+---
+<div>{{JSRef}}</div>
+
+<p>Die statische <code><strong>Atomics</strong></code><strong><code>.add()</code></strong> Methode addiert eine gegebenen Wert an einer gegebenen Position im Array und gibt den alten Wert zurück. Diese atomare Operation garantiert, dass keine andere Schreiboperation während der Operation durchgeführt werden kann.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/atomics-add.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Atomics.add(typedArray, index, value)
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>typedArray</code></dt>
+ <dd>Ein geteiltes getrypted Integer Array. Eines von {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} oder {{jsxref("Uint32Array")}}.</dd>
+ <dt><code>index</code></dt>
+ <dd>Die Position in <code>typedArray</code>, zu der <code>value</code> addiert wird.</dd>
+ <dt><code>value</code></dt>
+ <dd>Die Zahl, die addiert werden soll.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>Der alte Wert an der gegebenen Position (<code>typedArray[index]</code>).</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>Erzeugt einen {{jsxref("TypeError")}}, wenn <code>typedArray</code> nicht von einem erlaubten Integer Typ ist.</li>
+ <li>Erzeugt eine {{jsxref("TypeError")}}, wenn <code>typedArray</code> kein geteilter Arraytyp ist.</li>
+ <li>Erzeugt ein {{jsxref("RangeError")}}, wenn der <code>index</code> nicht in den Grenzen von <code>typedArray</code> ist.</li>
+</ul>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js">var sab = new SharedArrayBuffer(1024);
+var ta = new Uint8Array(sab);
+
+Atomics.add(ta, 0, 12); // returns 0, the old value
+Atomics.load(ta, 0); // 12</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-atomics.add', 'Atomics.add')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Initiale Definition in ES2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Atomics.add")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Atomics")}}</li>
+ <li>{{jsxref("Atomics.sub()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/atomics/and/index.html b/files/de/web/javascript/reference/global_objects/atomics/and/index.html
new file mode 100644
index 0000000000..34093b64e7
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/atomics/and/index.html
@@ -0,0 +1,129 @@
+---
+title: Atomics.and()
+slug: Web/JavaScript/Reference/Global_Objects/Atomics/and
+tags:
+  - Atomics
+  - JavaScript
+  - Method
+  - Shared Memory
+translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/and
+---
+<div>{{JSRef}}</div>
+
+<p>Die statische <code><strong>Atomics</strong></code><strong><code>.and()</code></strong> Methode berechnet eine bitweises UND mit einem gegebenen Wert auf einem Wert an einer gegebenen Position im Array und gibt den alten Wert an der Position zurück. Die atomare Operation garantiert, dass kein anderer Schreibprozess während der Operation durchgeführt wird.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/atomics-and.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Atomics.and(typedArray, index, value)
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>typedArray</code></dt>
+ <dd>Ein geteiltes getrypted Integer Array. Eines von {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} oder {{jsxref("Uint32Array")}}.</dd>
+ <dt><code>index</code></dt>
+ <dd>Die Position in <code>typedArray</code>, mit der das bitweise UND berechnet wird.</dd>
+ <dt><code>value</code></dt>
+ <dd>Die Zahl, mit der das bitweise UND berechnet wird.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Der alte Wert an der gegebenen Position (<code>typedArray[index]</code>).</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>Erzeugt einen {{jsxref("TypeError")}}, wenn <code>typedArray</code> nicht von einem erlaubten Integer Typ ist.</li>
+ <li>Erzeugt eine {{jsxref("TypeError")}}, wenn <code>typedArray</code> kein geteilter Arraytyp ist.</li>
+ <li>Erzeugt ein {{jsxref("RangeError")}}, wenn der <code>index</code> nicht in den Grenzen von <code>typedArray</code> ist.</li>
+</ul>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die bitweise UND Operation ergibt nur 1, wenn beide Werte, <code>a</code> und <code>b</code>, 1 sind. Die Wahrheitstabelle für die UND Operation ist:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th><code>a</code></th>
+   <th><code>b</code></th>
+   <th><code>a &amp; b</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>1</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>0</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>1</td>
+   <td>1</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Zum Beispiel resultiert ein bitweises UND auf <code>5 &amp; 1</code> in <code>0001</code>, was im Dezimalsystem 1 ist.</p>
+
+<pre>5  0101
+1  0001
+   ----
+1  0001</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js">var sab = new SharedArrayBuffer(1024);
+var ta = new Uint8Array(sab);
+ta[0] = 5;
+
+Atomics.and(ta, 0, 1); // returns 0, the old value
+Atomics.load(ta, 0);  // 1
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-atomics.and', 'Atomics.and')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Initiale Definition in ES2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Atomics.and")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Atomics")}}</li>
+ <li>{{jsxref("Atomics.or()")}}</li>
+ <li>{{jsxref("Atomics.xor()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/atomics/compareexchange/index.html b/files/de/web/javascript/reference/global_objects/atomics/compareexchange/index.html
new file mode 100644
index 0000000000..1c61ef7d26
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/atomics/compareexchange/index.html
@@ -0,0 +1,86 @@
+---
+title: Atomics.compareExchange()
+slug: Web/JavaScript/Reference/Global_Objects/Atomics/compareExchange
+tags:
+  - Atomics
+  - JavaScript
+  - Method
+  - Shared Memory
+translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/compareExchange
+---
+<div>{{JSRef}}</div>
+
+<p>Die statische <code><strong>Atomics</strong></code><strong><code>.compareExchange()</code></strong> Methode ersetzt einen Wert an einer gegebenen Position im einem Array mit einem gegebene Wert aus, wenn ein gegebenen Wert gleich dem alten Wert ist. Es wird der alte Wert an der Position zurückgegeben, egal ob der abzugleichende Wert gleich oder nicht ist. Die atomare Operation garantiert, dass kein anderer Schreibprozess während der Operation durchgeführt wird.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/atomics-compareexchange.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Atomics.compareExchange(typedArray, index, expectedValue, replacementValue)
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>typedArray</code></dt>
+ <dd>Ein geteiltes getrypted Integer Array. Eines von {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} oder {{jsxref("Uint32Array")}}.</dd>
+ <dt><code>index</code></dt>
+ <dd>Die Position in <code>typedArray</code>, an den ein Wert ersetzt wird.</dd>
+ <dt><code>expectedValue</code></dt>
+ <dd>Wert, auf dem die gleichheit geprüft wird.</dd>
+ <dt>replacementValue</dt>
+ <dd>Neu Zahl, die geschreiben wird.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Der alte Wert an der gegebenen Position (<code>typedArray[index]</code>).</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>Erzeugt einen {{jsxref("TypeError")}}, wenn <code>typedArray</code> nicht von einem erlaubten Integer Typ ist.</li>
+ <li>Erzeugt eine {{jsxref("TypeError")}}, wenn <code>typedArray</code> kein geteilter Arraytyp ist.</li>
+ <li>Erzeugt ein {{jsxref("RangeError")}}, wenn der <code>index</code> nicht in den Grenzen von <code>typedArray</code> ist.</li>
+</ul>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js">var sab = new SharedArrayBuffer(1024);
+var ta = new Uint8Array(sab);
+ta[0] = 7;
+
+Atomics.compareExchange(ta, 0, 7, 12); // returns 7, the old value
+Atomics.load(ta, 0); // 12</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-atomics.compareexchange', 'Atomics.compareExchange')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Initiale Definition in ES2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Atomics.compareExchange")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Atomics")}}</li>
+ <li>{{jsxref("Atomics.exchange()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/atomics/exchange/index.html b/files/de/web/javascript/reference/global_objects/atomics/exchange/index.html
new file mode 100644
index 0000000000..df040868a6
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/atomics/exchange/index.html
@@ -0,0 +1,85 @@
+---
+title: Atomics.exchange()
+slug: Web/JavaScript/Reference/Global_Objects/Atomics/exchange
+tags:
+  - Atomics
+  - JavaScript
+  - Method
+  - Shared Memory
+translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/exchange
+---
+<div>{{JSRef}}</div>
+
+<p>Die statische <code><strong>Atomics</strong></code><strong><code>.exchange()</code></strong> Methode ersetzt einen Wert an einer gegebenen Position im einem Array mit einem gegebene Wert aus. Die atomare Operation garantiert, dass kein anderer Schreibprozess während der Operation durchgeführt wird.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/atomics-exchange.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Atomics.compareExchange(typedArray, index, value)
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>typedArray</code></dt>
+ <dd>Ein geteiltes getrypted Integer Array. Eines von {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} oder {{jsxref("Uint32Array")}}.</dd>
+ <dt><code>index</code></dt>
+ <dd>Die Position in <code>typedArray</code>, an den ein Wert ersetzt wird.</dd>
+ <dt><code>value</code></dt>
+ <dd>Neu Zahl, die geschreiben wird.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Der alte Wert an der gegebenen Position (<code>typedArray[index]</code>).</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>Erzeugt einen {{jsxref("TypeError")}}, wenn <code>typedArray</code> nicht von einem erlaubten Integer Typ ist.</li>
+ <li>Erzeugt eine {{jsxref("TypeError")}}, wenn <code>typedArray</code> kein geteilter Arraytyp ist.</li>
+ <li>Erzeugt ein {{jsxref("RangeError")}}, wenn der <code>index</code> nicht in den Grenzen von <code>typedArray</code> ist.</li>
+</ul>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js">var sab = new SharedArrayBuffer(1024);
+var ta = new Uint8Array(sab);
+
+Atomics.compareExchange(ta, 0, 12); // returns 0, the old value
+Atomics.load(ta, 0); // 12</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-atomics.exchange', 'Atomics.exchange')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Initiale Definition in ES2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Atomics.exchange")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Atomics")}}</li>
+ <li>{{jsxref("Atomics.compareExchange()")}}</li>
+</ul>
+
+<p> </p>
diff --git a/files/de/web/javascript/reference/global_objects/atomics/index.html b/files/de/web/javascript/reference/global_objects/atomics/index.html
new file mode 100644
index 0000000000..e8a945060e
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/atomics/index.html
@@ -0,0 +1,116 @@
+---
+title: Atomics
+slug: Web/JavaScript/Reference/Global_Objects/Atomics
+tags:
+  - JavaScript
+  - Shared Memory
+  - Specifications
+translation_of: Web/JavaScript/Reference/Global_Objects/Atomics
+---
+<div>{{JSRef}}</div>
+
+<p>Das <strong><code>Atomics</code></strong> Objekt unterstützt atomare Operationen als statische Methoden. Diese werden mit {{jsxref("SharedArrayBuffer")}} Objekte benutzt.</p>
+
+<p>Die atomaren Operationen sind auf dem <code>Atomics</code> Modul installiert. Anders, als bei anderen globalen Objekten, ist, dass <code>Atomics</code> kein Konstruktor ist. Man kann <code>Atomics</code> nicht mit einem <a href="/de/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> Operator</a> oder als Funktion verwenden. Alle Eigenschaften und Methoden von <code>Atomics</code> sind statisch (genauso wie zum Beispiel bei dem {{jsxref("Math")}} Objekt).</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt><code>Atomics[Symbol.toStringTag]</code></dt>
+ <dd>Der Wert dieser Eigenschaft ist: <code>"Atomics"</code>.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<h3 id="Atomare_Operationen">Atomare Operationen</h3>
+
+<p>Wenn Speicher geteilt wird, können mehrere Threads auf dem gleichen Speicher lesen und schreiben. Atomare Operationen stellen sicher, dass Werte in einer Operation geschrieben und gelesen werden bevor mit der nächste Operation begonnen wird und dass eine Operation nicht unterbrochen wird.</p>
+
+<dl>
+ <dt>{{jsxref("Atomics.add()")}}</dt>
+ <dd>Addiert den angegebenen Wert dem existierenden Wert an der gegebenen Position im Array hinzu. Gibt den alten Wert an der Position zurück.</dd>
+ <dt>{{jsxref("Atomics.and()")}}</dt>
+ <dd>Berechnet ein Bitweises UND mit dem Wert an der angegebenen Position im Array und dem angegebenen Wert. Gibt den alten Wert an der Position zurück.</dd>
+ <dt>{{jsxref("Atomics.compareExchange()")}}</dt>
+ <dd>Speichert einen angegebenen Wert an der angegebenen Position im Array, wenn dieser gleich einem angegebene Wert ist. Gibt den alten Wert zurück.</dd>
+ <dt>{{jsxref("Atomics.exchange()")}}</dt>
+ <dd>Speichert einen angegebenen Wert an einer angegebenen Position im Array. Gibt den alten Wert zurück.</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("Atomics.load()")}}</dt>
+ <dd>Gibt den Wert an einer angegebenen Position im Array zurück.</dd>
+ <dt>{{jsxref("Atomics.or()")}}</dt>
+ <dd>Berechnet ein Bitweises ODER mit dem gegebenen Wert an der angegebenen Position im Array und dem angegebenen Wert. Gibt den alten Wert an der Position zurück.</dd>
+ <dt>{{jsxref("Atomics.store()")}}</dt>
+ <dd>Speichert einen angegebenen Wert an einer angegebenen Position im Array. Gibt den Wert zurück.</dd>
+ <dt>{{jsxref("Atomics.sub()")}}</dt>
+ <dd>Subtrahiert einen angegebenen Wert von einem Wert an einer angegebenen Position im Array. Gibt den alten Wert an der Position zurück.</dd>
+ <dt>{{jsxref("Atomics.xor()")}}</dt>
+ <dd>Berechnet ein Bitweises XOR mit dem Wert an einer angegebenen Position im Array und einem angegebenen Wert. Gibt den alten Wert an der Position zurück.</dd>
+</dl>
+
+<h3 id="Wait_und_notify">Wait und notify</h3>
+
+<p>Die <code>wait()</code> und <code>notify()</code> Methoden sind auf Linux Futexes ("fast user-space mutex") modelliert und ermöglichen es zu warten, bis eine bestimmte Bedingung <code>true</code> wird, und wird als blockierendes Konstrukt verwendet.</p>
+
+<dl>
+ <dt>{{jsxref("Atomics.wait()")}}</dt>
+ <dd>Überprüft, ob an der angegebenen Position in einem Array einen angegebener Wert enthalten ist und wartet oder bekommt ein Timeout. Es wird <code>"ok"</code>, <code>"not-equal"</code>, oder <code>"timed-out"</code> zurückgegeben. Wenn Warten im ausführenden Agenten nicht erlaubt ist, wird ein Fehler geworfen (die meisten Browser erlauben kein <code>wait()</code> im Browser main Thread).</dd>
+ <dt>{{jsxref("Atomics.notify()")}}</dt>
+ <dd>Benachrichtigt Agenten, die auf die angegebene Arrayposition warten. Gibt die Zahl der benachrichtigten Agenten zurück.</dd>
+ <dt>{{jsxref("Atomics.isLockFree()", "Atomics.isLockFree(size)")}}</dt>
+ <dd>
+ <p>Eine primitive Optimierung, die feststellten kann, ob Locks und atomare Operationen benutzt werden können. Gibt <code>true</code> zurück, wenn atomare Operationen auf einem Array der gegebenen Elementgröße mit einer atomaren Hardwareoperation implementiert ist (im Gegensatz zu einem Lock). Nur für Experten.</p>
+ </dd>
+</dl>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-atomics-object', 'Atomics')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Initiale Definition in ES2017.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES8', '#sec-atomics-object', 'Atomics')}}</td>
+   <td>{{Spec2('ES8')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Atomics")}}</p>
+
+<h2 id="Kompatibilitätshinweise">Kompatibilitätshinweise</h2>
+
+<p><span id="result_box" lang="de"><span>Vor Firefox 48 waren die neuesten API-Namen und Semantiken noch nicht implementiert.</span></span> Die Unterschiede zwischen der Firefox Version 46 und der Version 48 sind:</p>
+
+<ul>
+ <li>Die Methoden <code>Atomics.futexWakeOrRequeue()</code> und <code>Atomics.fence()</code> sind vollständig entfernt ({{bug(1259544)}} und {{bug(1225028)}}).</li>
+ <li>Die Methoden {{jsxref("Atomics.wait()")}} and {{jsxref("Atomics.wake()")}} hießen <code>Atomics.futexWait()</code> und <code>Atomics.futexWake()</code> ({{bug(1260910)}}). Hinweis: Die alten Namen wurden in den Version 49 und später entfernt ({{bug(1262062)}}).</li>
+ <li>Die Eigenschaften <code>Atomics.OK</code>, <code>Atomics.TIMEDOUT</code>, <code>Atomics.NOTEQUAL</code> wurden entfernt. die Methode {{jsxref("Atomics.wait()")}} gibt jetzt die Strings <code>"ok"</code>, <code>"timed-out"</code> und <code>"not-equal"</code> zurück ({{bug(1260835)}}).</li>
+ <li>Der <code>count</code> Parameter der {{jsxref("Atomics.wake()")}} Methode wurde geändert: Der Standardwert ist <code>+Infinity</code> und nicht <code>0</code> ({{bug(1253350)}}).</li>
+</ul>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li><a href="/de/docs/Web/JavaScript/Typed_arrays">JavaScript getypte Arrays</a></li>
+ <li><a href="/de/docs/Web/API/Web_Workers_API">Web Workers</a></li>
+ <li><a href="https://github.com/lars-t-hansen/parlib-simple">parlib-simple </a>– Eine einfache Bibliothek, die Synchronisation und verteilte Abstraktionen ermöglicht.</li>
+ <li><a href="https://github.com/tc39/ecmascript_sharedmem/blob/master/TUTORIAL.md">Geteilter Speicher (Shared Memory) – ein kurzes Tutorial</a></li>
+ <li><a href="https://hacks.mozilla.org/2016/05/a-taste-of-javascripts-new-parallel-primitives/">A Taste of JavaScript’s New Parallel Primitives – Mozilla Hacks</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/atomics/islockfree/index.html b/files/de/web/javascript/reference/global_objects/atomics/islockfree/index.html
new file mode 100644
index 0000000000..61bf90e0bf
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/atomics/islockfree/index.html
@@ -0,0 +1,73 @@
+---
+title: Atomics.isLockFree()
+slug: Web/JavaScript/Reference/Global_Objects/Atomics/isLockFree
+tags:
+  - Atomics
+  - JavaScript
+  - Method
+  - Shared Memory
+translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/isLockFree
+---
+<div>{{JSRef}}</div>
+
+<p>Die statische <code><strong>Atomics</strong></code><strong><code>.isLockFree()</code></strong> Methode wird benutzt, um festzustellen, ob ein Lock (Sperre) oder eine atomare Operation vorhanden ist. Sie gibt <code>true</code> zurück, wenn die gegebene Größe eine von den in der <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/BYTES_PER_ELEMENT">BYTES_PER_ELEMENT</a> Eigenschften von Integer TypedArray Typen ist.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/atomics-islockfree.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Atomics.isLockFree(size)
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>size</code></dt>
+ <dd>Die größe in Bytes, für die geprüft wird.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein {{jsxref("Boolean")}}, der angibt, ob die Operation frei von Locks ist.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js">Atomics.isLockFree(1); // true
+Atomics.isLockFree(2); // true
+Atomics.isLockFree(3); // false
+Atomics.isLockFree(4); // true
+Atomics.isLockFree(5); // false
+Atomics.isLockFree(6); // false
+Atomics.isLockFree(7); // false
+Atomics.isLockFree(8); // false</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-atomics.islockfree', 'Atomics.isLockFree')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Initiale Definition in ES2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Atomics.isLockFree")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Atomics")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/atomics/load/index.html b/files/de/web/javascript/reference/global_objects/atomics/load/index.html
new file mode 100644
index 0000000000..07d2c4a477
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/atomics/load/index.html
@@ -0,0 +1,81 @@
+---
+title: Atomics.load()
+slug: Web/JavaScript/Reference/Global_Objects/Atomics/load
+tags:
+  - Atomics
+  - JavaScript
+  - Method
+  - Shared Memory
+translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/load
+---
+<div>{{JSRef}}</div>
+
+<p>Die statische <code><strong>Atomics</strong></code><strong><code>.load()</code></strong> Methode gibt den Wert an einer gegebenen Position in einem Array zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/atomics-load.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Atomics.load(typedArray, index)
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>typedArray</code></dt>
+ <dd>Ein geteiltes getrypted Integer Array. Eines von {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} oder {{jsxref("Uint32Array")}}.</dd>
+ <dt><code>index</code></dt>
+ <dd>Die Position in <code>typedArray</code>, von der der Wert geladen wird.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Der Wert an der gegebenen Position (<code>typedArray[index]</code>).</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>Erzeugt einen {{jsxref("TypeError")}}, wenn <code>typedArray</code> nicht von einem erlaubten Integer Typ ist.</li>
+ <li>Erzeugt eine {{jsxref("TypeError")}}, wenn <code>typedArray</code> kein geteilter Arraytyp ist.</li>
+ <li>Erzeugt ein {{jsxref("RangeError")}}, wenn der <code>index</code> nicht in den Grenzen von <code>typedArray</code> ist.</li>
+</ul>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js">var sab = new SharedArrayBuffer(1024);
+var ta = new Uint8Array(sab);
+
+Atomics.add(ta, 0, 12);
+Atomics.load(ta, 0); // 12</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-atomics.load', 'Atomics.load')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Initiale Definition in ES2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Atomics.load")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Atomics")}}</li>
+ <li>{{jsxref("Atomics.store()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/atomics/or/index.html b/files/de/web/javascript/reference/global_objects/atomics/or/index.html
new file mode 100644
index 0000000000..ec052cadde
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/atomics/or/index.html
@@ -0,0 +1,129 @@
+---
+title: Atomics.or()
+slug: Web/JavaScript/Reference/Global_Objects/Atomics/or
+tags:
+  - Atomics
+  - JavaScript
+  - Method
+  - Shared Memory
+translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/or
+---
+<div>{{JSRef}}</div>
+
+<p>Die statische <code><strong>Atomics</strong></code><strong><code>.or()</code></strong> Methode berechnet eine bitweises ODER mit einem gegebenen Wert auf einem Wert an einer gegebenen Position im Array und gibt den alten Wert an der Position zurück. Die atomare Operation garantiert, dass kein anderer Schreibprozess während der Operation durchgeführt wird.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/atomics-or.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Atomics.and(typedArray, index, value)
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>typedArray</code></dt>
+ <dd>Ein geteiltes getrypted Integer Array. Eines von {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} oder {{jsxref("Uint32Array")}}.</dd>
+ <dt><code>index</code></dt>
+ <dd>Die Position in <code>typedArray</code>, mit der das bitweise ODER berechnet wird.</dd>
+ <dt><code>value</code></dt>
+ <dd>Die Zahl, mit der das bitweise ODER berechnet wird.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Der alte Wert an der gegebenen Position (<code>typedArray[index]</code>).</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>Erzeugt einen {{jsxref("TypeError")}}, wenn <code>typedArray</code> nicht von einem erlaubten Integer Typ ist.</li>
+ <li>Erzeugt eine {{jsxref("TypeError")}}, wenn <code>typedArray</code> kein geteilter Arraytyp ist.</li>
+ <li>Erzeugt ein {{jsxref("RangeError")}}, wenn der <code>index</code> nicht in den Grenzen von <code>typedArray</code> ist.</li>
+</ul>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die bitweise ODER Operation ergibt nur 1, wenn eine Werte, <code>a</code> oder <code>b</code>, 1 ist. Die Wahrheitstabelle für die ODER Operation ist:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th><code>a</code></th>
+   <th><code>b</code></th>
+   <th><code>a | b</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>1</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>0</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>1</td>
+   <td>1</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Zum Beispiel resultiert ein bitweises ODER auf <code>5 | 1</code> in <code>0111</code>, was im Dezimalsystem 5 ist.</p>
+
+<pre>5  0101
+1  0001
+   ----
+5  0101</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js">var sab = new SharedArrayBuffer(1024);
+var ta = new Uint8Array(sab);
+ta[0] = 2;
+
+Atomics.or(ta, 0, 1); // returns 2, the old value
+Atomics.load(ta, 0);  // 3
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-atomics.or', 'Atomics.or')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Initiale Definition in ES2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Atomics.or")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Atomics")}}</li>
+ <li>{{jsxref("Atomics.and()")}}</li>
+ <li>{{jsxref("Atomics.xor()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/atomics/store/index.html b/files/de/web/javascript/reference/global_objects/atomics/store/index.html
new file mode 100644
index 0000000000..6112dc5f62
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/atomics/store/index.html
@@ -0,0 +1,82 @@
+---
+title: Atomics.store()
+slug: Web/JavaScript/Reference/Global_Objects/Atomics/store
+tags:
+  - Atomics
+  - JavaScript
+  - Method
+  - Shared Memory
+translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/store
+---
+<div>{{JSRef}}</div>
+
+<p>Die statische <code><strong>Atomics</strong></code><strong><code>.store()</code></strong> Methode speichert einen gegebenen Wert an einer gegebenen Position in dem Array und gibt den Wert zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/atomics-store.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Atomics.store(typedArray, index, value)
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>typedArray</code></dt>
+ <dd>Ein geteiltes getrypted Integer Array. Eines von {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} oder {{jsxref("Uint32Array")}}.</dd>
+ <dt><code>index</code></dt>
+ <dd>Die Position in <code>typedArray</code>, an der <code>value</code> gespeichert wird.</dd>
+ <dt><code>value</code></dt>
+ <dd>Die Zahl, die gespeichert wird.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Der Wert, der abgespeichert wurde.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>Erzeugt einen {{jsxref("TypeError")}}, wenn <code>typedArray</code> nicht von einem erlaubten Integer Typ ist.</li>
+ <li>Erzeugt eine {{jsxref("TypeError")}}, wenn <code>typedArray</code> kein geteilter Arraytyp ist.</li>
+ <li>Erzeugt ein {{jsxref("RangeError")}}, wenn der <code>index</code> nicht in den Grenzen von <code>typedArray</code> ist.</li>
+</ul>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js">var sab = new SharedArrayBuffer(1024);
+var ta = new Uint8Array(sab);
+
+Atomics.store(ta, 0, 12); // 12</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-atomics.store', 'Atomics.store')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Initiale Definition in ES2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Atomics.store")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Atomics")}}</li>
+ <li>{{jsxref("Atomics.load()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/atomics/sub/index.html b/files/de/web/javascript/reference/global_objects/atomics/sub/index.html
new file mode 100644
index 0000000000..cce9ae06c6
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/atomics/sub/index.html
@@ -0,0 +1,86 @@
+---
+title: Atomics.sub()
+slug: Web/JavaScript/Reference/Global_Objects/Atomics/sub
+tags:
+  - Atomics
+  - Java
+  - Method
+  - Shared Memory
+translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/sub
+---
+<div>{{JSRef}}</div>
+
+<p>Die statische <code><strong>Atomics</strong></code><strong><code>.sub()</code></strong> Methode subtrahiert eine gegebenen Wert an einer gegebenen Position im Array und gibt den alten Wert zurück. Diese atomare Operation garantiert, dass keine andere Schreiboperation während der Operation durchgeführt werden kann.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/atomics-sub.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Atomics.add(typedArray, index, value)
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>typedArray</code></dt>
+ <dd>Ein geteiltes getrypted Integer Array. Eines von {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} oder {{jsxref("Uint32Array")}}.</dd>
+ <dt><code>index</code></dt>
+ <dd>Die Position in <code>typedArray</code>, zu der <code>value</code> subtrahiert wird.</dd>
+ <dt><code>value</code></dt>
+ <dd>Die Zahl, die subtrahiert werden soll.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>Der alte Wert an der gegebenen Position (<code>typedArray[index]</code>).</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>Erzeugt einen {{jsxref("TypeError")}}, wenn <code>typedArray</code> nicht von einem erlaubten Integer Typ ist.</li>
+ <li>Erzeugt eine {{jsxref("TypeError")}}, wenn <code>typedArray</code> kein geteilter Arraytyp ist.</li>
+ <li>Erzeugt ein {{jsxref("RangeError")}}, wenn der <code>index</code> nicht in den Grenzen von <code>typedArray</code> ist.</li>
+</ul>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js">var sab = new SharedArrayBuffer(1024);
+var ta = new Uint8Array(sab);
+ta[0] = 48;
+
+Atomics.sub(ta, 0, 12); // returns 48, the old value
+Atomics.load(ta, 0); // 36</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-atomics.sub', 'Atomics.sub')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Initiale Definition in ES2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Atomics.sub")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Atomics")}}</li>
+ <li>{{jsxref("Atomics.add()")}}</li>
+</ul>
+
+<p> </p>
diff --git a/files/de/web/javascript/reference/global_objects/atomics/wait/index.html b/files/de/web/javascript/reference/global_objects/atomics/wait/index.html
new file mode 100644
index 0000000000..6af6022fc4
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/atomics/wait/index.html
@@ -0,0 +1,95 @@
+---
+title: Atomics.wait()
+slug: Web/JavaScript/Reference/Global_Objects/Atomics/wait
+tags:
+  - Atomics
+  - JavaScript
+  - Method
+  - Shared Memory
+translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/wait
+---
+<div>{{JSRef}}</div>
+
+<p>Die statische <code><strong>Atomics</strong></code><strong><code>.wait()</code></strong> Methode verifiziert, dass eine gegebene Position in einem {{jsxref("Int32Array")}} ein gegebene Wert ist und dann schläft und entweder aufgeweckt wird oder ein Timeout bekommt. Die Strings <code>"ok"</code>, <code>"not-equal"</code>, und <code>"timed-out"</code> sind alle möglichen Rückgabewerte</p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Diese Operation funktioniert nur mit einem geteilten<strong> </strong>{{jsxref("Int32Array")}} und ist nicht im Main-Thread erlaubt.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Atomics.wait(typedArray, index, value[, timeout])
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>typedArray</code></dt>
+ <dd>Ein geteiltes {{jsxref("Int32Array")}}.</dd>
+ <dt><code>index</code></dt>
+ <dd>Die Position im <code>typedArray</code>, an der gewartet wird.</dd>
+ <dt><code>value</code></dt>
+ <dd>Der wert, mit dem getestet wird.</dd>
+ <dt><code>timeout</code> {{optional_inline}}</dt>
+ <dd>Wartezeit in Millisekunden. {{jsxref("Infinity")}}, wenn keine Zeit angegeben wird.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein {{jsxref("String")}} welcher <code>"ok"</code>, <code>"not-equal"</code> oder <code>"timed-out"</code> ist.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>Erzeugt einen {{jsxref("TypeError")}}, wenn <code>typedArray</code> kein  {{jsxref("Int32Array")}} ist.</li>
+ <li>Erzeugt ein {{jsxref("RangeError")}}, wenn der <code>index</code> nicht in den Grenzen von <code>typedArray</code> ist.</li>
+</ul>
+
+<h2 id="Beipsiele">Beipsiele</h2>
+
+<p>Gegeben ist ein <code>Int32Array</code>:</p>
+
+<pre class="brush: js">var sab = new SharedArrayBuffer(1024);
+var int32 = new Int32Array(sab);
+</pre>
+
+<p>Ein lesender Thread schläft und wartet auf Position 0, ander der Wert 0 erwartet wird. Solange diese gegeben ist, geht es nicht weiter. Immer wenn ein neuer schreibender Thread einen neuen Wert speichert, wacht der Thread. Im Anschluss ist der neue Wert an der Position 0 (123).</p>
+
+<pre class="brush: js">Atomics.wait(int32, 0, 0);
+console.log(int32[0]); // 123</pre>
+
+<p>Ein schreibender Thread speichert einen neuen Wert und wacht den wartenden Thread nach dem Schreiben auf.</p>
+
+<pre class="brush: js">console.log(int32[0]); // 0;
+Atomics.store(int32, 0, 123);
+Atomics.wake(int32, 0, 1);</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-atomics.wait', 'Atomics.wait')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Initiale Definition in ES2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Atomics.wait")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Atomics")}}</li>
+ <li>{{jsxref("Atomics.wake()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/atomics/wake/index.html b/files/de/web/javascript/reference/global_objects/atomics/wake/index.html
new file mode 100644
index 0000000000..5ac06d7adc
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/atomics/wake/index.html
@@ -0,0 +1,93 @@
+---
+title: Atomics.notify()
+slug: Web/JavaScript/Reference/Global_Objects/Atomics/wake
+tags:
+  - Atomics
+  - JavaScript
+  - Method
+  - Shared Memory
+translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/notify
+---
+<div>{{JSRef}}</div>
+
+<p>Die statische <code><strong>Atomics</strong></code><strong><code>.notify()</code></strong> Methode benachrichtigt Threads, die in einer Warteschlange schlafen.</p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Diese Operation funktioniert nur mit einem {{jsxref("Int32Array")}}.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Atomics.notify(typedArray, index, count)
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>typedArray</code></dt>
+ <dd>Ein geteiltes {{jsxref("Int32Array")}}.</dd>
+ <dt><code>index</code></dt>
+ <dd>Die Position im <code>typedArray</code>, an der aufgewacht wird.</dd>
+ <dt><code>count</code></dt>
+ <dd>Anzahl der aufzuweckenden Threads. Standard ist {{jsxref("Infinity", "+Infinity")}}.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Anzahl an geweckten Threads.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>Erzeugt einen {{jsxref("TypeError")}}, wenn <code>typedArray</code> kein  {{jsxref("Int32Array")}} ist.</li>
+ <li>Erzeugt ein {{jsxref("RangeError")}}, wenn der <code>index</code> nicht in den Grenzen von <code>typedArray</code> ist.</li>
+</ul>
+
+<h2 id="Beipsiele">Beipsiele</h2>
+
+<p>Gegeben ist ein <code>Int32Array</code>:</p>
+
+<pre class="brush: js">var sab = new SharedArrayBuffer(1024);
+var int32 = new Int32Array(sab);
+</pre>
+
+<p>Ein lesender Thread schläft und wartet auf Position 0, ander der Wert 0 erwartet wird. Solange diese gegeben ist, geht es nicht weiter. Immer wenn ein neuer schreibender Thread einen neuen Wert speichert, wacht der Thread. Im Anschluss ist der neue Wert an der Position 0 (123).</p>
+
+<pre class="brush: js">Atomics.wait(int32, 0, 0);
+console.log(int32[0]); // 123</pre>
+
+<p>Ein schreibender Thread speichert einen neuen Wert und wacht den wartenden Tread nach dem Schreiben auf.</p>
+
+<pre class="brush: js">console.log(int32[0]); // 0;
+Atomics.store(int32, 0, 123);
+Atomics.notify(int32, 0, 1);</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-atomics.notify', 'Atomics.notify')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Initiale Definition in ES2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Atomics.notify")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Atomics")}}</li>
+ <li>{{jsxref("Atomics.wait()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/atomics/xor/index.html b/files/de/web/javascript/reference/global_objects/atomics/xor/index.html
new file mode 100644
index 0000000000..913fcc1298
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/atomics/xor/index.html
@@ -0,0 +1,130 @@
+---
+title: Atomics.xor()
+slug: Web/JavaScript/Reference/Global_Objects/Atomics/xor
+tags:
+  - Atomics
+  - JavaScript
+  - Method
+  - Shared Memory
+translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/xor
+---
+<div>{{JSRef}}</div>
+
+<p>Die statische <code><strong>Atomics</strong></code><strong><code>.xor()</code></strong> Methode berechnet eine bitweises XOR mit einem gegebenen Wert auf einem Wert an einer gegebenen Position im Array und gibt den alten Wert an der Position zurück. Die atomare Operation garantiert, dass kein anderer Schreibprozess während der Operation durchgeführt wird.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/atomics-xor.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Atomics.and(typedArray, index, value)
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>typedArray</code></dt>
+ <dd>Ein geteiltes getrypted Integer Array. Eines von {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} oder {{jsxref("Uint32Array")}}.</dd>
+ <dt><code>index</code></dt>
+ <dd>Die Position in <code>typedArray</code>, mit der das bitweise XOR berechnet wird.</dd>
+ <dt><code>value</code></dt>
+ <dd>Die Zahl, mit der das bitweise XOR berechnet wird.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Der alte Wert an der gegebenen Position (<code>typedArray[index]</code>).</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>Erzeugt einen {{jsxref("TypeError")}}, wenn <code>typedArray</code> nicht von einem erlaubten Integer Typ ist.</li>
+ <li>Erzeugt eine {{jsxref("TypeError")}}, wenn <code>typedArray</code> kein geteilter Arraytyp ist.</li>
+ <li>Erzeugt ein {{jsxref("RangeError")}}, wenn der <code>index</code> nicht in den Grenzen von <code>typedArray</code> ist.</li>
+</ul>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die bitweise XOR Operation ergibt nur 1, wenn genau ein Werte, <code>a</code> oder <code>b</code>, 1 ist. Die Wahrheitstabelle für die XOR Operation ist:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th><code>a</code></th>
+   <th><code>b</code></th>
+   <th><code>a &amp; b</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>1</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>0</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>1</td>
+   <td>0</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Zum Beispiel resultiert ein bitweises XOR auf <code>5 &amp; 1</code> in <code>0100</code>, was im Dezimalsystem 4 ist.</p>
+
+<pre>5  0101
+1  0001
+   ----
+4  0100</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js">var sab = new SharedArrayBuffer(1024);
+var ta = new Uint8Array(sab);
+ta[0] = 5;
+
+Atomics.xor(ta, 0, 1); // returns 5, the old value
+Atomics.load(ta, 0);  // 4</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-atomics.xor', 'Atomics.xor')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Initiale Definition in ES2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Atomics.xor")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Atomics")}}</li>
+ <li>{{jsxref("Atomics.and()")}}</li>
+ <li>{{jsxref("Atomics.or()")}}</li>
+</ul>
+
+<p> </p>
diff --git a/files/de/web/javascript/reference/global_objects/boolean/index.html b/files/de/web/javascript/reference/global_objects/boolean/index.html
new file mode 100644
index 0000000000..245c2d1a8b
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/boolean/index.html
@@ -0,0 +1,159 @@
+---
+title: Boolean
+slug: Web/JavaScript/Reference/Global_Objects/Boolean
+tags:
+  - Boolean
+  - Constructor
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Global_Objects/Boolean
+---
+<div>{{JSRef}}</div>
+
+<p>Das <strong><code>Boolean</code></strong> Objekt ist ein Objekt-Wrapper für einen booleschen Wert.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>new Boolean([<var>value</var>])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parameter</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Optional. Der Anfangswert des <code>Boolean</code>-Objektes.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p>Der als erster Parameter übergebene Wert wird, wenn nötig, in einen booleschen Wert umgewandelt. Wird der Wert ausgelassen oder ist <code>0</code>, <code>-0</code>, {{jsxref("null")}}, <code>false</code>, {{jsxref("NaN")}}, {{jsxref("undefined")}} oder der leere String (<code>""</code>), so besitzt das Objekt den Initialwert <code>false</code>. Alle anderen Werte, einschließlich eines Objektes oder des Strings <code>"false"</code>, erzeugen ein Objekt mit dem Initialwert <code>true</code>.</p>
+
+<p>Die Werte <code>true </code>und <code>false </code>des <code>Boolean</code>-Objektes sind nicht zu verwechseln mit den primitiven Booleanwerten <code>true </code>und <code>false.</code></p>
+
+<p>Jedes Objekt, dessen Wert nicht {{jsxref("undefined")}} oder {{jsxref("null")}} entspricht, einschließlich eines <code>Boolean-</code>Objektes, dessen Wert <code>false</code> ist, wird bei der Übergabe an eine Bedingung als <code>true</code> gewertet. Beispielsweise wird das folgende {{jsxref("Statements/if...else", "if")}} Konstrukt als <code>true</code> ausgewertet:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> x <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Boolean</span><span class="punctuation token">(</span><span class="string token">"false"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">if</span> <span class="punctuation token">(</span>x<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="comment token">// this code is executed</span>
+<span class="punctuation token">}</span>
+</code></pre>
+
+<p>Dieses Verhalten trifft nicht auf primitive Boolwerte zu. Beispielsweise ergibt das folgende {{jsxref("Statements/if...else", "if")}} Konstrukt <code>false</code>:</p>
+
+<pre class="brush: js">x = false;
+if (x) {
+  // this code is not executed
+}
+</pre>
+
+<p>Ein <code>Boolean</code>-Objekt sollte nicht genutzt werden um einen nicht-booleschenWert in einen booleschen Wert umzuwandeln. In diesem Fall wäre es besser, den Boolean als Funktion zu verwenden:</p>
+
+<pre class="brush: js">x = Boolean(expression);     // preferred
+x = new Boolean(expression); // don't use
+</pre>
+
+<p>Wird ein Objekt, einschließlich eines <code>Boolean</code>-Objektes dessen Wert <code>false</code> ist, als Anfangsparameter an das <code>Boolean-</code>Objekt übergeben, so hat das neue <code>Boolean</code>-Objekt den Wert <code>true</code>.</p>
+
+<pre class="brush: js">myFalse = new Boolean(false);   // initialer Wert von false
+g = Boolean(myFalse);       // initialer Wert von  true
+myString = new String('Hello'); // string objekt
+s = Boolean(myString);      //  initialer Wert von true
+</pre>
+
+<p>Ein <code>Boolean</code>-Objekt darf nicht anstelle eines primitiven <code>Boolean-wertes </code>verwendet werden.</p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Wenn die nicht standardisierte Eigenschaft <code><a href="/de/docs/Web/API/Document#Properties">document.all</a></code> als Argument für den Konstruktor benutzt wird, ist das Resultat ein <code>Boolean</code> Objekt mit dem Wert <code>false</code>. Diese Eigenschaft ist veraltet und nicht standardisierte und darf nicht eingesetzt werden.</p>
+</div>
+
+<h2 id="Properties" name="Properties">Eigenschaften</h2>
+
+<dl>
+ <dt><code>Boolean.length</code></dt>
+ <dd>Längen-Eingeschaft, die den Wert 1 hat.</dd>
+ <dt>{{jsxref("Boolean.prototype")}}</dt>
+ <dd>Repräsentiert den Prototypen für den <code>Boolean</code> Konstruktor</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Methoden</h2>
+
+<p>Das globale Objekt <code>Boolean</code> enthält zwar keine eigenen Methoden, erbt jedoch einige seiner Methoden durch die Prototypenkette:</p>
+
+<h2 id="Boolean_instances" name="Boolean_instances"><code>Boolean</code> Instanzen</h2>
+
+<p>Alle Instanzen von <code>Boolean</code> erben von {{jsxref("Boolean.prototype")}}. Wie bei allen Konstruktoren diktiert das Prototyp-Objekt die geerbten Eigenschaften und Methoden der Child-Elemente.</p>
+
+<h3 id="Eigenschaften">Eigenschaften</h3>
+
+<div>{{page('/de/docs/Web/JavaScript/Reference/Global_Objects/Boolean/prototype', 'Eigenschaften')}}</div>
+
+<h3 id="Methoden">Methoden</h3>
+
+<div>{{page('/de/docs/Web/JavaScript/Reference/Global_Objects/Boolean/prototype', 'Methoden')}}</div>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<h3 id="Example:_Creating_Boolean_objects_with_an_initial_value_of_false" name="Example:_Creating_Boolean_objects_with_an_initial_value_of_false">Erstellung eines <code>Boolean</code> Objektes mit dem Anfangswert <code>false</code></h3>
+
+<pre class="brush: js">var bNoParam = new Boolean();
+var bZero = new Boolean(0);
+var bNull = new Boolean(null);
+var bEmptyString = new Boolean('');
+var bfalse = new Boolean(false);
+</pre>
+
+<h3 id="Example:_Creating_Boolean_objects_with_an_initial_value_of_true" name="Example:_Creating_Boolean_objects_with_an_initial_value_of_true">Erstellung eines <code>Boolean</code> Objektes mit dem Anfangswert <code>true</code></h3>
+
+<pre class="brush: js">var btrue = new Boolean(true);
+var btrueString = new Boolean('true');
+var bfalseString = new Boolean('false');
+var bSuLin = new Boolean('Su Lin');
+var bArrayProto = new Boolean([]);
+var bObjProto = new Boolean({});
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Ursprüngliche Definition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.6', 'Boolean')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-boolean-objects', 'Boolean')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-boolean-objects', 'Boolean')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Boolean")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Boolean.prototype")}}</li>
+ <li>{{Glossary("Boolean")}}</li>
+ <li><a href="https://de.wikipedia.org/wiki/Boolesche_Variable">Boolesche Variablen (Wikipedia)</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/boolean/prototype/index.html b/files/de/web/javascript/reference/global_objects/boolean/prototype/index.html
new file mode 100644
index 0000000000..2a6dda6de7
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/boolean/prototype/index.html
@@ -0,0 +1,83 @@
+---
+title: Boolean.prototype
+slug: Web/JavaScript/Reference/Global_Objects/Boolean/prototype
+tags:
+  - Boolean
+  - JavaScript
+  - Property
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Boolean
+---
+<div>{{JSRef}}</div>
+
+<div>Die <strong><code>Boolean.prototype</code></strong> Eigenschaft repräsentiert den Prototypen des  {{jsxref("Boolean")}} Konstruktors.</div>
+
+<div> </div>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<div>{{EmbedInteractiveExample("pages/js/boolean-constructor.html")}}</div>
+
+
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>{{jsxref("Boolean")}} Instanzen ergen von from <code>Boolean.prototype</code>. Man kann das prototype Objekt benutzen, um Eigenschaften und Methoden zu allen {{jsxref("Boolean")}} Instanzen hinzuzufügen.</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt><code>Boolean.prototype.constructor</code></dt>
+ <dd>Gibt die Funktion, die einen Instanz des Prototypen erstellt zurück. Im Standardfall ist das die Funktion {{jsxref("Boolean")}}.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<dl>
+ <dt>{{jsxref("Boolean.prototype.toSource()")}} {{non-standard_inline}}</dt>
+ <dd>Gibt den Quelltext des {{jsxref("Boolean")}} Objektes als String zurück. Man kann diesen String benutzen um ein gleiches Objekt zu erstellen. Diese Methode überschreibt die {{jsxref("Object.prototype.toSource()")}} Methode.</dd>
+ <dt>{{jsxref("Boolean.prototype.toString()")}}</dt>
+ <dd>Gibt einen String <code>"true"</code> oder <code>"false"</code> zurück, abhängig vom Wert des Objektes. Diese Methode überschreibt die {{jsxref("Object.prototype.toString()")}} Methode.</dd>
+ <dt>{{jsxref("Boolean.prototype.valueOf()")}}</dt>
+ <dd>Gibt einen primitiven Wert des {{jsxref("Boolean")}} Objektes zurück. Diese Methode überschreibt die {{jsxref("Object.prototype.valueOf()")}} Methode.</dd>
+</dl>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.6.3.1', 'Boolean.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-boolean.prototype', 'Boolean.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-boolean.prototype', 'Boolean.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Boolean.prototype")}}</p>
+</div>
diff --git a/files/de/web/javascript/reference/global_objects/boolean/tosource/index.html b/files/de/web/javascript/reference/global_objects/boolean/tosource/index.html
new file mode 100644
index 0000000000..b37e4c226f
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/boolean/tosource/index.html
@@ -0,0 +1,60 @@
+---
+title: Boolean.prototype.toSource()
+slug: Web/JavaScript/Reference/Global_Objects/Boolean/toSource
+tags:
+  - Boolean
+  - JavaScript
+  - Method
+  - Non-standard
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/toSource
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<div>Die <code><strong>toSource()</strong></code> Methode gibt einen String mit dem Quelltext des Objektes zurück.</div>
+
+<div> </div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>booleanObj</var>.toSource()
+Boolean.toSource()</pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine String-Repräsentation des Quelltextes des Objektes.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>toSource</code> gibt folgende Werte zurück:</p>
+
+<ul>
+ <li>Für das eingebaute {{jsxref("Boolean")}} Objekt gibt die <code>toSource</code> folgenden String zurück, um anzuzeigen, dass der Qeulltext nicht verfügbar ist:
+
+  <pre class="brush: js">function Boolean() {
+    [native code]
+}
+</pre>
+ </li>
+ <li>Für Instanzen von {{jsxref("Boolean")}} gibt die <code>toSource</code> Methode einen String, der den Quelltext wiederspiegelt, zurück.</li>
+</ul>
+
+<p>Die Methode wird intern von JavaScript aufgerufen und wird normalerweise nicht in Applikationen eingesetzt.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>In keinem Standard enthalten. Implementiert in JavaScript 1.3.</p>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Boolean.toSource")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/boolean/tostring/index.html b/files/de/web/javascript/reference/global_objects/boolean/tostring/index.html
new file mode 100644
index 0000000000..0732aec15a
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/boolean/tostring/index.html
@@ -0,0 +1,89 @@
+---
+title: Boolean.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/Boolean/toString
+tags:
+  - Boolean
+  - JavaScript
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/toString
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>toString()</strong></code> gibt einen String, der eine {{jsxref("Boolean")}} Objekt repräsentiert, zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/boolean-tostring.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>bool</var>.toString()</code></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine String-Repräsentation des {{jsxref("Boolean")}} Objektes.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Das {{jsxref("Boolean")}} Objekt überschreibt die <code>toString</code> Methode des {{jsxref("Object")}} Objektes. Es erbt nicht von {{jsxref("Object.prototype.toString()")}}. Für {{jsxref("Boolean")}} Objekte gibt die <code>toString</code> Methode einen String, der das Objekt repräsentiert, zurück.</p>
+
+<p>JavaScript ruft die <code>toString</code> Methode automatisch auf, wenn ein {{jsxref("Boolean")}} Objekt als Text dargestellt wird oder wenn ein {{jsxref("Boolean")}} mit einem String konkatiniert wird.</p>
+
+<p>Für {{jsxref("Boolean")}} Objekte und Werte gibt die eingebaute <code>toString</code> Methode die Strings "<code>true</code>" oder "<code>false</code>", abhängig vom Wert des Boolean, zurück.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_toString">Einsatz von <code>toString</code></h3>
+
+<p>Im folgenden Beispiel gibt der Aufruf <code>flag.toString()</code> den Wert "<code>true</code>" zurück:</p>
+
+<pre class="brush: js">var flag = new Boolean(true);
+var myVar = flag.toString();
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.6.4.2', 'Boolean.prototype.toString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-boolean.prototype.tostring', 'Boolean.prototype.toString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-boolean.prototype.tostring', 'Boolean.prototype.toString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Boolean.toString")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toString()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/boolean/valueof/index.html b/files/de/web/javascript/reference/global_objects/boolean/valueof/index.html
new file mode 100644
index 0000000000..3d21502589
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/boolean/valueof/index.html
@@ -0,0 +1,85 @@
+---
+title: Boolean.prototype.valueOf()
+slug: Web/JavaScript/Reference/Global_Objects/Boolean/valueOf
+tags:
+  - Boolean
+  - JavaScript
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/valueOf
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>valueOf()</strong></code> Methode gibt einen primitiven Wert des {{jsxref("Boolean")}} Objektes zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/boolean-valueof.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>bool</var>.valueOf()</code></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Den primitiven Wert des gegebenen {{jsxref("Boolean")}} Objektes.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>valueOf</code> Methode des {{jsxref("Boolean")}} Objektes gibt einen primitiven Wert eines {{jsxref("Boolean")}} Objekts oder {{jsxref("Boolean")}} Literals als Boolean Datentyp zurück.</p>
+
+<p>Diese Methode wird intern von JavaScript aufgerufen und wird nicht in normalen Anwendungen benutzt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_valueOf">Einsatz von <code>valueOf</code></h3>
+
+<pre class="brush: js">x = new Boolean();
+myVar = x.valueOf(); // weist  myVar false zu
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.6.4.3', 'Boolean.prototype.valueOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-boolean.prototype.valueof', 'Boolean.prototype.valueOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-boolean.prototype.valueof', 'Boolean.prototype.valueOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Boolean.valueOf")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.valueOf()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/dataview/buffer/index.html b/files/de/web/javascript/reference/global_objects/dataview/buffer/index.html
new file mode 100644
index 0000000000..5cb68fd75b
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/dataview/buffer/index.html
@@ -0,0 +1,71 @@
+---
+title: DataView.prototype.buffer
+slug: Web/JavaScript/Reference/Global_Objects/DataView/buffer
+tags:
+  - DataView
+  - JavaScript
+  - Property
+  - Prototype
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/buffer
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>buffer</code></strong> Zugriffseigenschaft repräsentiert und referenziert den {{jsxref("ArrayBuffer")}} oder {{jsxref("SharedArrayBuffer")}}, der bei der Erstellung der <code>DataView</code> übergeben wurde.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/dataview-buffer.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>dataview</var>.buffer</pre>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>buffer</code> Eigenschaft ist eine Zugriffseigenschaft, bei der die Funktion für das erneute Beschreibeiben <code>undefined</code> ist. Das bedeutet, dass die Eigenschaft nur gelesen werden kann. Der Wert wird bei der Erstellung der <code>DataView</code> festgelegt und kann nicht mehr geändert werden.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_der_buffer_Eigenschaft">Einsatz der <code>buffer</code> Eigenschaft</h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.buffer; // ArrayBuffer { byteLength: 8 }
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-get-dataview.prototype.buffer', 'DataView.prototype.buffer')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-dataview.prototype.buffer', 'DataView.prototype.buffer')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.DataView.buffer")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("SharedArrayBuffer")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/dataview/bytelength/index.html b/files/de/web/javascript/reference/global_objects/dataview/bytelength/index.html
new file mode 100644
index 0000000000..dd20867f50
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/dataview/bytelength/index.html
@@ -0,0 +1,77 @@
+---
+title: DataView.prototype.byteLength
+slug: Web/JavaScript/Reference/Global_Objects/DataView/byteLength
+tags:
+  - DataView
+  - JavaScript
+  - Property
+  - Prototype
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/byteLength
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>byteLength</code></strong> Zugriffseigenschaft repräsentiert die Länge (in Bytes) der View vom Anfang ihres {{jsxref("ArrayBuffer")}} oder {{jsxref("SharedArrayBuffer")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/dataview-bytelength.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>dataview</var>.byteLength</pre>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>byteLength</code> Eigenschaft ist eine Zugriffseigenschaft, bei der die set Funktion <code>undefined</code> ist. Das bedeutet, dass diese Eigenschaften nur gelesen werden kann. Der Wert der Eigenschaft wird beim erstellen einer <code>DataView</code> bekannt gemacht und kann nicht mehr verändert werden. Wenn beim erstellen kein Offset oder keine <code>byteLength</code> angegeben sind, wird der <code>byteLength</code> Wert des übergebenen <code>ArrayBuffer</code> oder <code>SharedArrayBuffer</code> zurückgegeben.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_der_byteLength_Eigenschaft">Einsatz der <code>byteLength</code> Eigenschaft</h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.byteLength; // 8 (gleich mit byteLength von buffer)
+
+var dataview2 = new DataView(buffer, 1, 5);
+dataview2.byteLength; // 5 (wie beim erstellen der DataView spezifiziert)
+
+var dataview3 = new DataView(buffer, 2);
+dataview3.byteLength; // 6 (passend mit dem Offset beim erstellen der DataView)
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-get-dataview.prototype.bytelength', 'DataView.prototype.byteLength')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-dataview.prototype.bytelength', 'DataView.prototype.byteLength')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.DataView.byteLength")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("SharedArrayBuffer")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/dataview/byteoffset/index.html b/files/de/web/javascript/reference/global_objects/dataview/byteoffset/index.html
new file mode 100644
index 0000000000..b6889271ba
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/dataview/byteoffset/index.html
@@ -0,0 +1,74 @@
+---
+title: DataView.prototype.byteOffset
+slug: Web/JavaScript/Reference/Global_Objects/DataView/byteOffset
+tags:
+  - DataView
+  - JavaScript
+  - Property
+  - Prototype
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/byteOffset
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>byteOffset</code></strong> Zugriffseigenschaft repräsentiert das Offset (in Bytes) der View vom Anfang ihres {{jsxref("ArrayBuffer")}} oder {{jsxref("SharedArrayBuffer")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/dataview-byteoffset.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>dataview</var>.byteOffset</pre>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>byteOffset</code> Eigenschaft ist eine Zugriffseigenschaft, bei der die set Funktion <code>undefined</code> ist. Das bedeutet, dass diese Eigenschaften nur gelesen werden kann. Der Wert der Eigenschaft wird beim erstellen einer <code>DataView</code> bekannt gemacht und kann nicht mehr verändert werden.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_der_byteOffset_Eigenschaft">Einsatz der <code>byteOffset</code> Eigenschaft</h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.byteOffset; // 0 (no offset specified)
+
+var dataview2 = new DataView(buffer, 3);
+dataview2.byteOffset; // 3 (as specified when constructing the DataView)
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-get-dataview.prototype.byteoffset', 'DataView.prototype.byteOffset')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-dataview.prototype.byteoffset', 'DataView.prototype.byteOffset')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.DataView.byteOffset")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("SharedArrayBuffer")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/dataview/getfloat32/index.html b/files/de/web/javascript/reference/global_objects/dataview/getfloat32/index.html
new file mode 100644
index 0000000000..b8d8fe0986
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/dataview/getfloat32/index.html
@@ -0,0 +1,95 @@
+---
+title: DataView.prototype.getFloat32()
+slug: Web/JavaScript/Reference/Global_Objects/DataView/getFloat32
+tags:
+  - DataView
+  - JavaScript
+  - Method
+  - Prototype
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getFloat32
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>getFloat32()</code></strong> Methode gibt eine 32-Bit Gleitkommazahl mit Vorzeichen (Float) vom spezifizierten Offset der {{jsxref("DataView")}} zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/dataview-getfloat32.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>dataview</var>.getFloat32(byteOffset [, littleEndian])</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt>byteOffset</dt>
+ <dd>Das Offset, in Bytes, vom Start der View, an dem die Daten gelesen werden sollen.</dd>
+ <dt>littleEndian</dt>
+ <dd>{{optional_inline}} Gibt an, ob die 32 Bit Zahl als {{Glossary("Endianness", "little- oder big-Endian")}} abgespeichert wird. Wenn false oder undefined angegewen ist, wird ein big-Endian gelesen.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine 32-Bit Gleitkommazahl mit Vorzeichen.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Tritt auf, wenn <code>byteOffset</code> so gesetzt ist, dass hinter dem Ende der View gelesen werden müsste.</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p><span id="result_box" lang="de"><span>Es gibt keine</span> <span>Einschränkung</span> <span>Orientierung.</span> Werte mit mehrere Bytes<span> können</span> mit<span> jedem Offset abgerufen werden</span><span>.</span></span></p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_der_getFloat32_Methode">Einsatz der <code>getFloat32</code> Methode</h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.getFloat32(1); // 0
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Ersetzt durch ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-dataview.prototype.getfloat32', 'DataView.prototype.getFloat32')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition in einem ECMA-Standard.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.getfloat32', 'DataView.prototype.getFloat32')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.DataView.getFloat32")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/dataview/getfloat64/index.html b/files/de/web/javascript/reference/global_objects/dataview/getfloat64/index.html
new file mode 100644
index 0000000000..7537520965
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/dataview/getfloat64/index.html
@@ -0,0 +1,95 @@
+---
+title: DataView.prototype.getFloat64()
+slug: Web/JavaScript/Reference/Global_Objects/DataView/getFloat64
+tags:
+  - DataView
+  - JavaScript
+  - Method
+  - Prototype
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getFloat64
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>getFloat64()</code></strong> Methode gibt eine 64-Bit Gleitkommazahl mit Vorzeichen (Double) vom spezifizierten Offset der {{jsxref("DataView")}} zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/dataview-getfloat64.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>dataview</var>.getFloat64(byteOffset [, littleEndian])</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt>byteOffset</dt>
+ <dd>Das Offset, in Bytes, vom Start der View, an dem die Daten gelesen werden sollen.</dd>
+ <dt>littleEndian</dt>
+ <dd>{{optional_inline}} Gibt an, ob die 64 Bit Zahl als {{Glossary("Endianness", "little- oder big-Endian")}} abgespeichert wird. Wenn false oder undefined angegewen ist, wird ein big-Endian gelesen.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine 64-Bit Gleitkommazahl mit Vorzeichen.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Tritt auf, wenn <code>byteOffset</code> so gesetzt ist, dass hinter dem Ende der View gelesen werden müsste.</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p><span id="result_box" lang="de"><span>Es gibt keine</span> <span>Einschränkung</span> <span>Orientierung.</span> Werte mit mehrere Bytes<span> können</span> mit<span> jedem Offset abgerufen werden</span><span>.</span></span></p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_der_getFloat64_Methode">Einsatz der <code>getFloat64</code> Methode</h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.getFloat64(0); // 0
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Ersetzt durch ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-dataview.prototype.getfloat64', 'DataView.prototype.getFloat64')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition in einem ECMA-Standard.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.getfloat64', 'DataView.prototype.getFloat64')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.DataView.getFloat64")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/dataview/getint16/index.html b/files/de/web/javascript/reference/global_objects/dataview/getint16/index.html
new file mode 100644
index 0000000000..9223ab4dae
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/dataview/getint16/index.html
@@ -0,0 +1,95 @@
+---
+title: DataView.prototype.getInt16()
+slug: Web/JavaScript/Reference/Global_Objects/DataView/getInt16
+tags:
+  - DataView
+  - JavaScript
+  - Method
+  - Prototype
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getInt16
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>getInt16()</code></strong> Methode gibt eine ganze 16-Bit Zahl mit Vorzeichen (Short) vom spezifizierten Offset der {{jsxref("DataView")}} zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/dataview-getint16.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>dataview</var>.getInt16(byteOffset [, littleEndian])</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt>byteOffset</dt>
+ <dd>Das Offset, in Bytes, vom Start der View, an dem die Daten gelesen werden sollen.</dd>
+ <dt>littleEndian</dt>
+ <dd>{{optional_inline}} Gibt an, ob die 16 Bit Zahl als {{Glossary("Endianness", "little- oder big-Endian")}} abgespeichert wird. Wenn false oder undefined angegeben ist, wird ein big-Endian gelesen.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine ganze 16-Bit Zahl mit Vorzeichen.</p>
+
+<h3 id="Auftretende_Errors">Auftretende Errors</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Tritt auf, wenn <code>byteOffset</code> so gesetzt ist, dass hinter dem Ende der View gelesen werden müsste.</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p><span id="result_box" lang="de"><span>Es gibt keine</span> <span>Einschränkung</span> <span>Orientierung.</span> Werte mit mehrere Bytes<span> können</span> mit<span> jedem Offset abgerufen werden</span><span>.</span></span></p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_der_getInt16_Methode">Einsatz der <code>getInt16</code> Methode</h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.getInt16(1); // 0
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Ersetzt durch ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-dataview.prototype.getint16', 'DataView.prototype.getInt16')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition in einem ECMA-Standard.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.getint16', 'DataView.prototype.getInt16')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.DataView.getInt16")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/dataview/getint32/index.html b/files/de/web/javascript/reference/global_objects/dataview/getint32/index.html
new file mode 100644
index 0000000000..8e6bd22603
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/dataview/getint32/index.html
@@ -0,0 +1,95 @@
+---
+title: DataView.prototype.getInt32()
+slug: Web/JavaScript/Reference/Global_Objects/DataView/getInt32
+tags:
+  - DataView
+  - JavaScript
+  - Method
+  - Prototype
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getInt32
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>getInt32()</code></strong> Methode gibt eine ganze 32-Bit Zahl mit Vorzeichen (Long) vom spezifizierten Offset der {{jsxref("DataView")}} zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/dataview-getint32.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>dataview</var>.getInt32(byteOffset [, littleEndian])</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt>byteOffset</dt>
+ <dd>Das Offset, in Bytes, vom Start der View, an dem die Daten gelesen werden sollen.</dd>
+ <dt>littleEndian</dt>
+ <dd>{{optional_inline}} Gibt an, ob die 32 Bit Zahl als {{Glossary("Endianness", "little- oder big-Endian")}} abgespeichert wird. Wenn false oder undefined angegewen ist, wird ein big-Endian gelesen.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine ganze 32-Bit Zahl mit Vorzeichen</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Tritt auf, wenn <code>byteOffset</code> so gesetzt ist, dass hinter dem Ende der View gelesen werden müsste.</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p><span id="result_box" lang="de"><span>Es gibt keine</span> <span>Einschränkung</span> <span>Orientierung.</span> Werte mit mehrere Bytes<span> können</span> mit<span> jedem Offset abgerufen werden</span><span>.</span></span></p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_der_getInt32_Methode">Einsatz der <code>getInt32</code> Methode</h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.getInt32(1); // 0
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Ersetzt durch ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-dataview.prototype.getint32', 'DataView.prototype.getInt32')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition in einem ECMA-Standard.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.getint32', 'DataView.prototype.getInt32')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.DataView.getInt32")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/dataview/getint8/index.html b/files/de/web/javascript/reference/global_objects/dataview/getint8/index.html
new file mode 100644
index 0000000000..cc550d3f86
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/dataview/getint8/index.html
@@ -0,0 +1,93 @@
+---
+title: DataView.prototype.getInt8()
+slug: Web/JavaScript/Reference/Global_Objects/DataView/getInt8
+tags:
+  - DataView
+  - JavaScript
+  - Method
+  - Prototype
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getInt8
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>getInt8()</code></strong> Methode gibt eine ganze 8-Bit Zahl mit Vorzeichen (Byte) vom spezifizierten Offset der {{jsxref("DataView")}} zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/dataview-getint8.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>dataview</var>.getInt8(byteOffset)</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt>byteOffset</dt>
+ <dd>Das Offset, in Bytes, vom Start der View, an dem die Daten gelesen werden sollen.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine ganze 8-Bit Zahl mit Vorzeichen</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Tritt auf, wenn <code>byteOffset</code> so gesetzt ist, dass hinter dem Ende der View gelesen werden müsste.</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p><span id="result_box" lang="de"><span>Es gibt keine</span> <span>Einschränkung</span> <span>Orientierung.</span> Werte mit mehrere Bytes<span> können</span> mit<span> jedem Offset abgerufen werden</span><span>.</span></span></p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_der_getInt8_Methode">Einsatz der <code>getInt8</code> Methode</h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.getInt8(1); // 0
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Ersetzt durch ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-dataview.prototype.getint8', 'DataView.prototype.getInt8')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition in einem ECMA-Standard.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.getint8', 'DataView.prototype.getInt8')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.DataView.getInt8")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/dataview/getuint16/index.html b/files/de/web/javascript/reference/global_objects/dataview/getuint16/index.html
new file mode 100644
index 0000000000..df82d10a69
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/dataview/getuint16/index.html
@@ -0,0 +1,98 @@
+---
+title: DataView.prototype.getUint16()
+slug: Web/JavaScript/Reference/Global_Objects/DataView/getUint16
+tags:
+  - DataView
+  - JavaScript
+  - Method
+  - Prototype
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getUint16
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>getUint16()</code></strong> Methode gibt eine ganze vorzeichenlose 8-Bit Zahl (Unsigned Byte) vom spezifizierten Offset der {{jsxref("DataView")}} zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/dataview-getuint16.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>dataview</var>.getUint16(byteOffset [, littleEndian])</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt>byteOffset</dt>
+ <dd>Das Offset, in Bytes, vom Start der View, an dem die Daten gelesen werden sollen.</dd>
+</dl>
+
+<dl>
+ <dt>littleEndian</dt>
+ <dd>{{optional_inline}} Gibt an, ob die 16 Bit Zahl als {{Glossary("Endianness", "little- oder big-Endian")}} abgespeichert wird. Wenn false oder undefined angegewen ist, wird ein big-Endian gelesen.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine vorzeichenlose ganze 16-Bit Zahl.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Tritt auf, wenn <code>byteOffset</code> so gesetzt ist, dass hinter dem Ende der View gelesen werden müsste.</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p><span id="result_box" lang="de"><span>Es gibt keine</span> <span>Einschränkung</span> <span>Orientierung.</span> Werte mit mehrere Bytes<span> können</span> mit<span> jedem Offset abgerufen werden</span><span>.</span></span></p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_der_getUint16_Methode">Einsatz der <code>getUint16</code> Methode</h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.getUint16(1); // 0
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Ersetzt durch ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-dataview.prototype.getuint16', 'DataView.prototype.getUint16')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition in einem ECMA-Standard.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.getuint16', 'DataView.prototype.getUint16')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.DataView.getUint16")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/dataview/getuint32/index.html b/files/de/web/javascript/reference/global_objects/dataview/getuint32/index.html
new file mode 100644
index 0000000000..b51d1d4d27
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/dataview/getuint32/index.html
@@ -0,0 +1,98 @@
+---
+title: DataView.prototype.getUint32()
+slug: Web/JavaScript/Reference/Global_Objects/DataView/getUint32
+tags:
+  - DataView
+  - JavaScript
+  - Method
+  - Prototype
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getUint32
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>getUint32()</code></strong> Methode gibt eine ganze vorzeichenlose 8-Bit Zahl (Unsigned Byte) vom spezifizierten Offset der {{jsxref("DataView")}} zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/dataview-getuint32.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>dataview</var>.getUint32(byteOffset [, littleEndian])</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt>byteOffset</dt>
+ <dd>Das Offset, in Bytes, vom Start der View, an dem die Daten gelesen werden sollen.</dd>
+</dl>
+
+<dl>
+ <dt>littleEndian</dt>
+ <dd>{{optional_inline}} Gibt an, ob die 32 Bit Zahl als {{Glossary("Endianness", "little- oder big-Endian")}} abgespeichert wird. Wenn false oder undefined angegewen ist, wird ein big-Endian gelesen.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine vorzeichenlose ganze 32-Bit Zahl.</p>
+
+<h3 id="Auftretende_Errors">Auftretende Errors</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Tritt auf, wenn <code>byteOffset</code> so gesetzt ist, dass hinter dem Ende der View gelesen werden müsste.</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p><span id="result_box" lang="de"><span>Es gibt keine</span> <span>Einschränkung</span> <span>Orientierung.</span> Werte mit mehrere Bytes<span> können</span> mit<span> jedem Offset abgerufen werden</span><span>.</span></span></p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_der_getUint32_Methode">Einsatz der <code>getUint32</code> Methode</h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.getUint32(1); // 0
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Ersetzt durch ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-dataview.prototype.getuint32', 'DataView.prototype.getUint32')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition in einem ECMA-Standard.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.getuint32', 'DataView.prototype.getUint32')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.DataView.getUint32")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/dataview/getuint8/index.html b/files/de/web/javascript/reference/global_objects/dataview/getuint8/index.html
new file mode 100644
index 0000000000..568930978a
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/dataview/getuint8/index.html
@@ -0,0 +1,95 @@
+---
+title: DataView.prototype.getUint8()
+slug: Web/JavaScript/Reference/Global_Objects/DataView/getUint8
+tags:
+  - DataView
+  - JavaScript
+  - Method
+  - Prototype
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getUint8
+---
+<div>{{JSRef}}</div>
+
+<div>Die <strong><code>getUint8()</code></strong> Methode gibt eine ganze vorzeichenlose 8-Bit Zahl (Unsigned Byte) vom spezifizierten Offset der {{jsxref("DataView")}} zurück.</div>
+
+<div>{{EmbedInteractiveExample("pages/js/dataview-getuint8.html")}}</div>
+
+
+
+<div> </div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>dataview</var>.getUint8(byteOffset)</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt>byteOffset</dt>
+ <dd>Das Offset, in Bytes, vom Start der View, an dem die Daten gelesen werden sollen.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine vorzeichenlose ganze 8-Bit Zahl</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Tritt auf, wenn <code>byteOffset</code> so gesetzt ist, dass hinter dem Ende der View gelesen werden müsste.</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p><span id="result_box" lang="de"><span>Es gibt keine</span> <span>Einschränkung</span> <span>Orientierung.</span> Werte mit mehrere Bytes<span> können</span> mit<span> jedem Offset abgerufen werden</span><span>.</span></span></p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_der_getUint8_Methode">Einsatz der <code>getUint8</code> Methode</h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.getUint8(1); // 0
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Ersetzt durch ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-dataview.prototype.getuint8', 'DataView.prototype.getUint8')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition in einem ECMA-Standard.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.getuint8', 'DataView.prototype.getUint8')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.DataView.getUint8")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/dataview/index.html b/files/de/web/javascript/reference/global_objects/dataview/index.html
new file mode 100644
index 0000000000..1384eafe34
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/dataview/index.html
@@ -0,0 +1,127 @@
+---
+title: DataView
+slug: Web/JavaScript/Reference/Global_Objects/DataView
+tags:
+  - Constructor
+  - DataView
+  - JavaScript
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>DataView</code></strong> Ansicht unterstützt eine Low-Level Schnittstelle für das Lesen und Schreiben von mehrere Zahlentypen in einem {{jsxref("ArrayBuffer")}}. Diese Ansicht ist unabhängig von den Plattform Byte-Reihenfolgen.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/dataview-constructor.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">new DataView(buffer [, byteOffset [, byteLength]])</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>buffer</code></dt>
+ <dd>Ein existierender {{jsxref("ArrayBuffer")}} oder {{jsxref("SharedArrayBuffer")}} {{experimental_inline}}, welche als Speicher für das neue <code>DataView</code> Objekt dient.</dd>
+ <dt><code>byteOffset</code> {{optional_inline}}</dt>
+ <dd>Das Offset in Bytes, welches auf das erste Byte in dem spezifizierten Buffer für die neue Ansicht referenziert. Wenn dieser Parameter nicht angegeben ist, wird das erste Byte des Buffers als Startpunkt benutzt.</dd>
+ <dt><code>byteLength</code> {{optional_inline}}</dt>
+ <dd>Die Anzahl der Elemente in dem Byte Array. Wenn es nicht angegeben wird, wird die Länge des Buffers benutzt.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein neues <code>DataView</code> Objekt welches den spezifizierten Datenpuffer (Buffer) repräsentiert.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt><code>{{jsxref("RangeError")}}</code></dt>
+ <dd>Wird erzeugt, wenn <code>byteOffset</code> oder <code>byteLength</code> Größe als der Puffer (Buffers) sind</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<h3 id="Byte-Reihenfolge">Byte-Reihenfolge</h3>
+
+<p>Zahlenformate mit mehreren Bytes werden im Speicher verschieden dargestellt, je nachdem welche Maschinenarchitektur genutzt wird (siehe {{Glossary("Endianness")}} für weitere Erklärungen). DataView bietet explizit die Kontrolle über den Zugriff auf die Zahlen unabhängig von der Plattformarchitektur-Byte-Reihenfolge.</p>
+
+<pre class="brush: js">var littleEndian = (function() {
+  var buffer = new ArrayBuffer(2);
+  new DataView(buffer).setInt16(0, 256, true /* littleEndian */);
+  // Int16Array benutzt die Plattform Byte-Reihenfolge.
+  return new Int16Array(buffer)[0] === 256;
+})();
+console.log(littleEndian); // true oder false
+</pre>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<p>Alle <code>DataView</code> Instanzen erben von {{jsxref("DataView.prototype")}} und erlauben das Hinzufügen von Eigenschaften zu allen DataView Objekten</p>
+
+<p>{{page('de/Web/JavaScript/Reference/Global_Objects/DataView/prototype','Eigenschaften')}}</p>
+
+<h2 id="Methoden">Methoden</h2>
+
+<p>{{page('de/Web/JavaScript/Reference/Global_Objects/DataView/prototype','Methoden')}}</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js">var buffer = new ArrayBuffer(16);
+var dv = new DataView(buffer, 0);
+
+dv.setInt16(1, 42);
+dv.getInt16(1); //42
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Abgelöst von ECMAScript 6</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-dataview-constructor', 'DataView')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initiale Definition in einem ECMA Standard</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-dataview-constructor', 'DataView')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.DataView")}}</p>
+
+<h2 id="Bemerkungen_zur_Kompatibilität">Bemerkungen zur Kompatibilität</h2>
+
+<p>Mit dem Start von Firefox 40 wird der {{jsxref("Operators/new", "new")}} Operator benötigt um eine <code>DataView</code> zu erstellen. Der Aufruf von <code>DataView()</code> als Funktion ohne <code>new</code> erzeugt jetzt einen {{jsxref("TypeError")}}.</p>
+
+<pre class="brush: js example-bad">var dv = DataView(buffer, 0);
+// TypeError: Das Aufrufen des DataView-Konstruktors ohne new ist verboten</pre>
+
+<pre class="brush: js example-good">var dv = new DataView(buffer, 0);</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a class="link-https" href="https://github.com/jDataView/jDataView">jDataView</a>: JavaScript-Bibliothek welche Polyfills und Erweiterungen für die <code>DataView</code> API in allen Browdern und Node.js zur verfügung stellt.</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("SharedArrayBuffer")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/dataview/prototype/index.html b/files/de/web/javascript/reference/global_objects/dataview/prototype/index.html
new file mode 100644
index 0000000000..ea91eb795f
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/dataview/prototype/index.html
@@ -0,0 +1,109 @@
+---
+title: DataView.prototype
+slug: Web/JavaScript/Reference/Global_Objects/DataView/prototype
+tags:
+  - DataView
+  - JavaScript
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>DataView</strong></code><strong><code>.prototype</code></strong> Eigenschaft repräsentiert den Prototypen für das {{jsxref("DataView")}} Objekt.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p><code>DataView</code> Instanzen erben von <code>DataView.prototype</code>. Wie bei allen Konstruktoren, können Änderungen am Prototypen Änderungen in allen <code>DataView</code> Instanzen zur folge haben.</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt><code>DataView.prototype.constructor</code></dt>
+ <dd>Spezifiziert die Funktion, die ein Objekt des Prototypen erstellt. Der initialwert ist der Standard eingebaute <code>DataView</code> Konstruktor</dd>
+ <dt>{{jsxref("DataView.prototype.buffer")}} {{readonlyInline}}</dt>
+ <dd>Der {{jsxref("ArrayBuffer")}}, der von dieser Ansicht repräsentiert wird. Wird bei der Erstellung erzeugt und deswegen kann nur lesend darauf zugegriffen werden.</dd>
+ <dt>{{jsxref("DataView.prototype.byteLength")}} {{readonlyInline}}</dt>
+ <dd>Die Länge (in Bytes) von dieser Ansicht, von Beginn des {{jsxref("ArrayBuffer")}}. Wird bei der Erstellung erzeugt und deswegen kann nur lesend darauf zugegriffen werden.</dd>
+ <dt>{{jsxref("DataView.prototype.byteOffset")}} {{readonlyInline}}</dt>
+ <dd>Das Offset (in Bytes) von dieser Ansicht, von Beginn des {{jsxref("ArrayBuffer")}}. Wird bei der Erstellung erzeugt und deswegen kann nur lesend darauf zugegriffen werden.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<h3 id="Lesend">Lesend</h3>
+
+<dl>
+ <dt>{{jsxref("DataView.prototype.getInt8()")}}</dt>
+ <dd>Gibt eine 8-Bit ganze Zahl mit Vorzeichen (byte) eines spezifizierten Byte-Offsets vom Start der Ansicht zurück.</dd>
+ <dt>{{jsxref("DataView.prototype.getUint8()")}}</dt>
+ <dd>Gibt eine 8-Bit vorzeichenlose ganze Zahl (unsigned byte) eines spezifizierten Byte-Offsets vom Start der Ansicht zurück.</dd>
+ <dt>{{jsxref("DataView.prototype.getInt16()")}}</dt>
+ <dd>Gibt eine 16-Bit ganze Zahl mit Vorzeichen (short) eines spezifizierten Byte-Offsets vom Start der Ansicht zurück.</dd>
+ <dt>{{jsxref("DataView.prototype.getUint16()")}}</dt>
+ <dd>Gibt eine 16-Bit vorzeichenlose ganze Zahl (unsigned short) eines spezifizierten Byte-Offsets vom Start der Ansicht zurück.</dd>
+ <dt>{{jsxref("DataView.prototype.getInt32()")}}</dt>
+ <dd>Gibt eine 32-Bit ganze Zahl mit Vorzeichen (long) eines spezifizierten Byte-Offsets vom Start der Ansicht zurück.</dd>
+ <dt>{{jsxref("DataView.prototype.getUint32()")}}</dt>
+ <dd>Gibt eine 32-Bit vorzeichenlose ganze Zahl (unsigned long) eines spezifizierten Byte-Offsets vom Start der Ansicht zurück.</dd>
+ <dt>{{jsxref("DataView.prototype.getFloat32()")}}</dt>
+ <dd>Gibt eine 32-Bit Gleitkommazahl mit Vorzeichen (float) eines spezifizierten Byte-Offsets vom Start der Ansicht zurück</dd>
+ <dt>{{jsxref("DataView.prototype.getFloat64()")}}</dt>
+ <dd>Gibt eine 64-Bit Gleitkommazahl mit Vorzeichen (double) eines spezifizierten Byte-Offsets vom Start der Ansicht zurück</dd>
+</dl>
+
+<h3 id="Schreibend">Schreibend</h3>
+
+<dl>
+ <dt>{{jsxref("DataView.prototype.setInt8()")}}</dt>
+ <dd>Speichert eine ganze 8-Bit Zahl mit Vorzeichen (byte) an einem spezifizierten Offset vom Start der Ansicht.</dd>
+ <dt>{{jsxref("DataView.prototype.setUint8()")}}</dt>
+ <dd>Speichert eine ganze vorzeichenlose 8-Bit Zahl (unsigned byte) an einem spezifizierten Offset vom Start der Ansicht.</dd>
+ <dt>{{jsxref("DataView.prototype.setInt16()")}}</dt>
+ <dd>Speichert eine ganze 16-Bit Zahl mit Vorzeichen (short) an einem spezifizierten Offset vom Start der Ansicht.</dd>
+ <dt>{{jsxref("DataView.prototype.setUint16()")}}</dt>
+ <dd>Speichert eine ganze vorzeichenlose 16-Bit Zahl (unsigned short) an einem spezifizierten Offset vom Start der Ansicht.</dd>
+ <dt>{{jsxref("DataView.prototype.setInt32()")}}</dt>
+ <dd>Speichert eine ganze 32-Bit Zahl mit Vorzeichen (long) an einem spezifizierten Offset vom Start der Ansicht.</dd>
+ <dt>{{jsxref("DataView.prototype.setUint32()")}}</dt>
+ <dd>Speichert eine ganze vorzeichenlose 32-Bit Zahl (unsigned long) an einem spezifizierten Offset vom Start der Ansicht.</dd>
+ <dt>{{jsxref("DataView.prototype.setFloat32()")}}</dt>
+ <dd>Speichert eine 32-Bit Gleitkommazahl mit Vorzeichen (float) an einem spezifizierten Offset vom Start der Ansicht.</dd>
+ <dt>{{jsxref("DataView.prototype.setFloat64()")}}</dt>
+ <dd>Speichert eine 64-Bit Gleitkommazahl mit Vorzeichen (double) an einem spezifizierten Offset vom Start der Ansicht.</dd>
+</dl>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-dataview.prototype', 'DataView.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-dataview.prototype', 'DataView.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.DataView.prototype")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("DataView")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/dataview/setfloat32/index.html b/files/de/web/javascript/reference/global_objects/dataview/setfloat32/index.html
new file mode 100644
index 0000000000..a7728311fc
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/dataview/setfloat32/index.html
@@ -0,0 +1,97 @@
+---
+title: DataView.prototype.setFloat32()
+slug: Web/JavaScript/Reference/Global_Objects/DataView/setFloat32
+tags:
+  - DataView
+  - JavaScript
+  - Method
+  - Prototype
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setFloat32
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>setFloat32()</code></strong> Methode speichert eine 32-Bit Gleitkommazahl mit Vorzeichen (Float) am spezifizierten Offset der {{jsxref("DataView")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/dataview-setfloat32.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>dataview</var>.setFloat32(byteOffset, value [, littleEndian])</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt>byteOffset</dt>
+ <dd>Das Offset, in Bytes, vom Start der View, an dem die Daten gespeichert werden sollen.</dd>
+</dl>
+
+<dl>
+ <dt>value</dt>
+ <dd>Der Wert, der gespeichert werden soll.</dd>
+ <dt>littleEndian</dt>
+ <dd>{{optional_inline}} Gibt an, ob die 32 Bit Zahl als {{Glossary("Endianness", "little- oder big-Endian")}} abgespeichert wird. Wenn false oder undefined angegewen ist, wird ein big-Endian gelesen.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Tritt auf, wenn <code>byteOffset</code> so gesetzt ist, dass hinter dem Ende der View geschrieben werden müsste.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_der_setFloat32_Methode">Einsatz der <code>setFloat32</code> Methode</h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.setFloat32(1, 3);
+dataview.getFloat32(1); // 3
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Ersetzt durch ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-dataview.prototype.setfloat32', 'DataView.prototype.setFloat32')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition in einem ECMA-Standard.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.setfloat32', 'DataView.prototype.setFloat32')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.DataView.setFloat32")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/dataview/setfloat64/index.html b/files/de/web/javascript/reference/global_objects/dataview/setfloat64/index.html
new file mode 100644
index 0000000000..8a0d9545e3
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/dataview/setfloat64/index.html
@@ -0,0 +1,97 @@
+---
+title: DataView.prototype.setFloat64()
+slug: Web/JavaScript/Reference/Global_Objects/DataView/setFloat64
+tags:
+  - DataView
+  - JavaScript
+  - Method
+  - Prototype
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setFloat64
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>setFloat64()</code></strong> Methode speichert eine 64-Bit Gleitkommazahl mit Vorzeichen (Float) am spezifizierten Offset der {{jsxref("DataView")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/dataview-setfloat64.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>dataview</var>.setFloat64(byteOffset, value [, littleEndian])</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt>byteOffset</dt>
+ <dd>Das Offset, in Bytes, vom Start der View, an dem die Daten gespeichert werden sollen.</dd>
+</dl>
+
+<dl>
+ <dt>value</dt>
+ <dd>Der Wert, der gespeichert werden soll.</dd>
+ <dt>littleEndian</dt>
+ <dd>{{optional_inline}} Gibt an, ob die 64 Bit Zahl als {{Glossary("Endianness", "little- oder big-Endian")}} abgespeichert wird. Wenn false oder undefined angegewen ist, wird ein big-Endian gelesen.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Tritt auf, wenn <code>byteOffset</code> so gesetzt ist, dass hinter dem Ende der View geschrieben werden müsste.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_der_setFloat64_Methode">Einsatz der <code>setFloat64</code> Methode</h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.setFloat64(0, 3);
+dataview.getFloat64(0); // 3
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Ersetzt durch ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-dataview.prototype.setfloat64', 'DataView.prototype.setFloat64')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition in einem ECMA-Standard.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.setfloat64', 'DataView.prototype.setFloat64')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.DataView.setFloat64")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/dataview/setint16/index.html b/files/de/web/javascript/reference/global_objects/dataview/setint16/index.html
new file mode 100644
index 0000000000..acbc44f22e
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/dataview/setint16/index.html
@@ -0,0 +1,100 @@
+---
+title: DataView.prototype.setInt16()
+slug: Web/JavaScript/Reference/Global_Objects/DataView/setInt16
+tags:
+  - DataView
+  - JavaScript
+  - Method
+  - Prototype
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setInt16
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>setInt16()</code></strong> Methode speichert eine ganze 16-Bit Zahl mit Vorzeichen (Schort) am spezifizierten Offset der {{jsxref("DataView")}} ab.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/dataview-setint16.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>dataview</var>.setInt16(byteOffset, value [, littleEndian])</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt>byteOffset</dt>
+ <dd>Das Offset, in Bytes, vom Start der View, an dem die Daten gespeichert werden sollen.</dd>
+</dl>
+
+<dl>
+ <dt>value</dt>
+ <dd>Der Wert, der gespeichert werden soll.</dd>
+</dl>
+
+<dl>
+ <dt>littleEndian</dt>
+ <dd>{{optional_inline}} Gibt an, ob die 16 Bit Zahl als {{Glossary("Endianness", "little- oder big-Endian")}} abgespeichert wird. Wenn false oder undefined angegewen ist, wird ein big-Endian gelesen.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h3 id="Auftretende_Errors">Auftretende Errors</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Tritt auf, wenn <code>byteOffset</code> so gesetzt ist, dass hinter dem Ende der View geschrieben werden müsste.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_der_setInt16_Methode">Einsatz der <code>setInt16</code> Methode</h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.setInt16(1, 3);
+dataview.getInt16(1); // 3
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Ersetzt durch ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-dataview.prototype.setint16', 'DataView.prototype.setInt16')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition in einem ECMA-Standard.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.setint16', 'DataView.prototype.setInt16')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.DataView.setInt16")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/dataview/setint32/index.html b/files/de/web/javascript/reference/global_objects/dataview/setint32/index.html
new file mode 100644
index 0000000000..740fbb678d
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/dataview/setint32/index.html
@@ -0,0 +1,100 @@
+---
+title: DataView.prototype.setInt32()
+slug: Web/JavaScript/Reference/Global_Objects/DataView/setInt32
+tags:
+  - DataView
+  - JavaScript
+  - Method
+  - Prototype
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setInt32
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>setInt32()</code></strong> Methode speichert eine ganze 32-Bit Zahl mit Vorzeichen (Long) am spezifizierten Offset der {{jsxref("DataView")}} ab.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/dataview-setint32.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>dataview</var>.setInt32(byteOffset, value [, littleEndian])</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt>byteOffset</dt>
+ <dd>Das Offset, in Bytes, vom Start der View, an dem die Daten gespeichert werden sollen.</dd>
+</dl>
+
+<dl>
+ <dt>value</dt>
+ <dd>Der Wert, der gespeichert werden soll.</dd>
+</dl>
+
+<dl>
+ <dt>littleEndian</dt>
+ <dd>{{optional_inline}} Gibt an, ob die 32 Bit Zahl als {{Glossary("Endianness", "little- oder big-Endian")}} abgespeichert wird. Wenn false oder undefined angegewen ist, wird ein big-Endian gelesen.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Tritt auf, wenn <code>byteOffset</code> so gesetzt ist, dass hinter dem Ende der View geschrieben werden müsste.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_der_setInt32_Methode">Einsatz der <code>setInt32</code> Methode</h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.setInt32(1, 3);
+dataview.getInt32(1); // 3
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Ersetzt durch ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-dataview.prototype.setint32', 'DataView.prototype.setInt32')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition in einem ECMA-Standard.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.setint32', 'DataView.prototype.setInt32')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.DataView.setInt32")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/dataview/setint8/index.html b/files/de/web/javascript/reference/global_objects/dataview/setint8/index.html
new file mode 100644
index 0000000000..cdfc7b8bd5
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/dataview/setint8/index.html
@@ -0,0 +1,95 @@
+---
+title: DataView.prototype.setInt8()
+slug: Web/JavaScript/Reference/Global_Objects/DataView/setInt8
+tags:
+  - DataView
+  - JavaScript
+  - Method
+  - Prototype
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setInt8
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>setInt8()</code></strong> Methode speichert eine ganze 8-Bit Zahl mit Vorzeichen (Byte) am spezifizierten Offset der {{jsxref("DataView")}} ab.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/dataview-setint8.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>dataview</var>.setInt8(byteOffset, value)</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt>byteOffset</dt>
+ <dd>Das Offset, in Bytes, vom Start der View, an dem die Daten gespeichert werden sollen.</dd>
+</dl>
+
+<dl>
+ <dt>value</dt>
+ <dd>Der Wert, der gespeichert werden soll.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Tritt auf, wenn <code>byteOffset</code> so gesetzt ist, dass hinter dem Ende der View geschrieben werden müsste.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_der_setInt8_Methode">Einsatz der <code>setInt8</code> Methode</h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.setInt8(1, 3);
+dataview.getInt8(1); // 3
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Ersetzt durch ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-dataview.prototype.setint8', 'DataView.prototype.setInt8')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition in einem ECMA-Standard.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.setint8', 'DataView.prototype.setInt8')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.DataView.setInt8")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/dataview/setuint16/index.html b/files/de/web/javascript/reference/global_objects/dataview/setuint16/index.html
new file mode 100644
index 0000000000..912407d086
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/dataview/setuint16/index.html
@@ -0,0 +1,100 @@
+---
+title: DataView.prototype.setUint16()
+slug: Web/JavaScript/Reference/Global_Objects/DataView/setUint16
+tags:
+  - DataView
+  - JavaScript
+  - Method
+  - Prototype
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setUint16
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>setInt16()</code></strong> Methode speichert eine ganze vorzeichenlose 16-Bit Zahl (Unsigned Short) am spezifizierten Offset der {{jsxref("DataView")}} ab.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/dataview-setuint16.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>dataview</var>.setUint16(byteOffset, value [, littleEndian])</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt>byteOffset</dt>
+ <dd>Das Offset, in Bytes, vom Start der View, an dem die Daten gespeichert werden sollen.</dd>
+</dl>
+
+<dl>
+ <dt>value</dt>
+ <dd>Der Wert, der gespeichert werden soll.</dd>
+</dl>
+
+<dl>
+ <dt>littleEndian</dt>
+ <dd>{{optional_inline}} Gibt an, ob die 16 Bit Zahl als {{Glossary("Endianness", "little- oder big-Endian")}} abgespeichert wird. Wenn false oder undefined angegewen ist, wird ein big-Endian gelesen.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h3 id="Auftretende_Errors">Auftretende Errors</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Tritt auf, wenn <code>byteOffset</code> so gesetzt ist, dass hinter dem Ende der View geschrieben werden müsste.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_der_setUint16_Methode">Einsatz der <code>setUint16</code> Methode</h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.setUint16(1, 3);
+dataview.getUint16(1); // 3
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Ersetzt durch ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-dataview.prototype.setuint16', 'DataView.prototype.setUint16')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition in einem ECMA-Standard.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.setuint16', 'DataView.prototype.setUint16')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.DataView.setUint16")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/dataview/setuint32/index.html b/files/de/web/javascript/reference/global_objects/dataview/setuint32/index.html
new file mode 100644
index 0000000000..5cba529880
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/dataview/setuint32/index.html
@@ -0,0 +1,100 @@
+---
+title: DataView.prototype.setUint32()
+slug: Web/JavaScript/Reference/Global_Objects/DataView/setUint32
+tags:
+  - DataView
+  - JavaScript
+  - Method
+  - Prototype
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setUint32
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>setInt32()</code></strong> Methode speichert eine ganze vorzeichenlose 32-Bit Zahl (Unsigned Long) am spezifizierten Offset der {{jsxref("DataView")}} ab.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/dataview-setuint32.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>dataview</var>.setUint32(byteOffset, value [, littleEndian])</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt>byteOffset</dt>
+ <dd>Das Offset, in Bytes, vom Start der View, an dem die Daten gespeichert werden sollen.</dd>
+</dl>
+
+<dl>
+ <dt>value</dt>
+ <dd>Der Wert, der gespeichert werden soll.</dd>
+</dl>
+
+<dl>
+ <dt>littleEndian</dt>
+ <dd>{{optional_inline}} Gibt an, ob die 32 Bit Zahl als {{Glossary("Endianness", "little- oder big-Endian")}} abgespeichert wird. Wenn false oder undefined angegewen ist, wird ein big-Endian gelesen.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Tritt auf, wenn <code>byteOffset</code> so gesetzt ist, dass hinter dem Ende der View geschrieben werden müsste.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_der_setUint32_Methode">Einsatz der <code>setUint32</code> Methode</h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.setUint32(1, 3);
+dataview.getUint32(1); // 3
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Ersetzt durch ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-dataview.prototype.setuint32', 'DataView.prototype.setUint32')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition in einem ECMA-Standard.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.setuint32', 'DataView.prototype.setUint32')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.DataView.setUint32")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/dataview/setuint8/index.html b/files/de/web/javascript/reference/global_objects/dataview/setuint8/index.html
new file mode 100644
index 0000000000..dc293963a1
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/dataview/setuint8/index.html
@@ -0,0 +1,95 @@
+---
+title: DataView.prototype.setUint8()
+slug: Web/JavaScript/Reference/Global_Objects/DataView/setUint8
+tags:
+  - DataView
+  - JavaScript
+  - Method
+  - Prototype
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setUint8
+---
+<div>{{JSRef}}</div>
+
+<div>Die <strong><code>setInt8()</code></strong> Methode speichert eine ganze vorzeichenlose 8-Bit Zahl (Unsigned Byte) am spezifizierten Offset der {{jsxref("DataView")}} ab.</div>
+
+<div>{{EmbedInteractiveExample("pages/js/dataview-setuint8.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>dataview</var>.setUint8(byteOffset, value)</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt>byteOffset</dt>
+ <dd>Das Offset, in Bytes, vom Start der View, an dem die Daten gespeichert werden sollen.</dd>
+</dl>
+
+<dl>
+ <dt>value</dt>
+ <dd>Der Wert, der gespeichert werden soll.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Tritt auf, wenn <code>byteOffset</code> so gesetzt ist, dass hinter dem Ende der View geschrieben werden müsste.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_der_setUint8_Methode">Einsatz der <code>setUint8</code> Methode</h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.setUint8(1, 3);
+dataview.getUint8(1); // 3
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Ersetzt durch ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-dataview.prototype.setuint8', 'DataView.prototype.setUint8')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition in einem ECMA-Standard.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.setuint8', 'DataView.prototype.setUint8')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.DataView.setUint8")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/@@toprimitive/index.html b/files/de/web/javascript/reference/global_objects/date/@@toprimitive/index.html
new file mode 100644
index 0000000000..593369fe87
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/@@toprimitive/index.html
@@ -0,0 +1,69 @@
+---
+title: 'Date.prototype[@@toPrimitive]'
+slug: Web/JavaScript/Reference/Global_Objects/Date/@@toPrimitive
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/@@toPrimitive
+---
+<div>{{JSRef}}</div>
+
+<div>Die <code><strong>[@@toPrimitive]()</strong></code> Methode konvertiert ein {{jsxref("date")}} Objekt in einen primitiven Wert.</div>
+
+<div> </div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>Date()[Symbol.toPrimitive](hint);
+</var></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Der primitive Wert des gegebenen {{jsxref("Date")}} Objektes. Abhängig vom übergebenen Parameter kann die Methode einen String oder eine Zahl zurückgeben.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p><code>[@@toPrimitive]()</code> ist eine Methode des {{jsxref("date")}} Objektes, welche einen primitiven Wert zurück gibt, was vom Typ number oder String sein kann.</p>
+
+<p>Wenn der Parameter <code>hint</code> die Wert <code>"string"</code> oder <code>"default"</code> enthält, wird versucht die  {{jsxref("Object.prototype.toString()", "toString")}}  Methode aufzurufen. Wenn diese Methode nicht existiert, wird versucht die  {{jsxref("Object.prototype.valueOf()", "valueOf")}}  Methode aufzurufen. Wenn diese wiederum nicht existiert wirft <code>[@@toPrimitive]()</code> einen {{jsxref("TypeError")}}.</p>
+
+<p>Wenn der Parameter <code>hint</code> den Wert <code>"number"</code> hat, wird als erstes versucht die  <code>valueOf</code> Methode aufzurufen. Wenn diese nicht existiert, wird die <code>toString</code> Methode aufgerufen.</p>
+
+<p>JavaScript ruft die <code>[@@toPrimitive]()</code> auf, um ein Objekt in einen primitiven Wert zu konvertieren. Explizit muss man diese Methode extrem selten aufrufen. JavaScript ruft diese Methode automatisch auf, wenn ein Objekt an Stellen verwendet wird, an denen ein primitiver Wert erwartet wird.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype-@@toprimitive', 'Date.prototype.@@toPrimitive')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype-@@toprimitive', 'Date.prototype.@@toPrimitive')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.@@toPrimitive")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Symbol.toPrimitive")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/getday/index.html b/files/de/web/javascript/reference/global_objects/date/getday/index.html
new file mode 100644
index 0000000000..28c185fe16
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/getday/index.html
@@ -0,0 +1,69 @@
+---
+title: Date.prototype.getDay()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getDay
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDay
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">Die <strong><code>getDay()</code></strong> Methode gibt den Tag der Woche eines Datums gemäß der Ortszeit zurück, wobei Sonntag durch den Wert 0 repräsentiert wird.</span> Für den Tag des Monats gibt es die Methode {{jsxref("Date.prototype.getDate()", "getDate()")}}</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getday.html")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getDay()</code></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine ganze Zahl zwischen 0 und 6, die den Tag der Woche des gegebenden Datums repräsentiert: 0 für Sonntag, 1 für Montag, 2 für Dienstag und so weiter.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_getDay">Einsatz von <code>getDay()</code></h3>
+
+<p>Im zweiten Statement wird die Variable <code>weekday</code> mit dem Wert 1 initialisiert. Dabei wird der Wert des {{jsxref("Date")}} object <code>Xmas95</code> benutzt. 25. Dezember 1995 ist ein Montag.</p>
+
+<pre class="brush: js">var Xmas95 = new Date('December 25, 1995 23:15:30');
+var weekday = Xmas95.getDay();
+
+console.log(weekday); // 1
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getday', 'Date.prototype.getDay')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Date.getDay")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCDate()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCDay()")}}</li>
+ <li>{{jsxref("Date.prototype.setDate()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/getfullyear/index.html b/files/de/web/javascript/reference/global_objects/date/getfullyear/index.html
new file mode 100644
index 0000000000..170b9cebfa
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/getfullyear/index.html
@@ -0,0 +1,88 @@
+---
+title: Date.prototype.getFullYear()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getFullYear
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getFullYear
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>getFullYear()</code></strong>  Methode gibt das Jahr eines Datums bezüglich der Ortszeit zurück.</p>
+
+<p>Diese Methode wird anstatt der {{jsxref("Date.prototype.getYear()", "getYear()")}} eingesetzt.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getfullyear.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getFullYear()</code></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine Zahl, die das Jahr des gegebenen Datums bezüglich der lokalen Zeit angibt.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Der von <code>getFullYear()</code> zurückgegebene Wert ist eine absolute Zahl. Für Daten zwischen den Jahren 1000 und 9999 gibt <code>getFullYear()</code> eine vier ziffrige Nummer zurück (z. B. 1995). Diese Methode wird eingesetzt, um sicherzustellen, dass auch Jahre nach 2000 richtig zurückgegeben werden.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_getFullYear()">Einsatz von <code>getFullYear()</code></h3>
+
+<p>Im folgenden Beispiel wird die Variable <code>year</code>  mit dem aktuellen Jahr (4 Ziffern) initialisiert.</p>
+
+<pre class="brush: js">var today = new Date();
+var year = today.getFullYear();
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.10', 'Date.prototype.getFullYear')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getfullyear', 'Date.prototype.getFullYear')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getfullyear', 'Date.prototype.getFullYear')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.getFullYear")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.getYear()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/gethours/index.html b/files/de/web/javascript/reference/global_objects/date/gethours/index.html
new file mode 100644
index 0000000000..c8036ad465
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/gethours/index.html
@@ -0,0 +1,83 @@
+---
+title: Date.prototype.getHours()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getHours
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getHours
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>getHours()</code></strong> Methode gibt die Stunde eines Datums bezüglich der Ortszeit zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-gethours.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getHours()</code></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine ganze Zahl zwischen 0 und 23, welche die Stunde der gegebenen Zeit bezüglich der lokalen Zeit angibt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_getHours()">Einsatz von <code>getHours()</code></h3>
+
+<p>Im zweiten Statement wird die Variable <code>hours</code> mit dem Wert 23 initialisiert. Dieses geschied mit dem Wert des {{jsxref("Global_Objects/Date", "Date")}} Objektes <code>Xmas95</code>.</p>
+
+<pre class="brush: js">var Xmas95 = new Date('December 25, 1995 23:15:30');
+var hours = Xmas95.getHours();
+
+console.log(hours); // 23
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.18', 'Date.prototype.getHours')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.gethours', 'Date.prototype.getHours')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.gethours', 'Date.prototype.getHours')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.getHours")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCHours()")}}</li>
+ <li>{{jsxref("Date.prototype.setHours()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/getmilliseconds/index.html b/files/de/web/javascript/reference/global_objects/date/getmilliseconds/index.html
new file mode 100644
index 0000000000..3238d48bbc
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/getmilliseconds/index.html
@@ -0,0 +1,81 @@
+---
+title: Date.prototype.getMilliseconds()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>getMilliseconds()</code></strong> Methode gibt die Millisekunden eines Datums bezüglich der Ortszeit zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getmilliseconds.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getMilliseconds()</code></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine ganze Zahl zwischen 0 und 999, welche die Millisekunden der gegebenen Zeit bezüglich der lokalen Zeit angibt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_getMilliseconds()">Einsatz von <code>getMilliseconds()</code></h3>
+
+<p>Im folgenden Beispiel wird die Variable <code>milliseconds</code> mit den aktuellen Millisekunden initialisiert:</p>
+
+<pre class="brush: js">var today = new Date();
+var milliseconds = today.getMilliseconds();
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.24', 'Date.prototype.getMilliseconds')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getmilliseconds', 'Date.prototype.getMilliseconds')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getmilliseconds', 'Date.prototype.getMilliseconds')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.getMilliseconds")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCMilliseconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setMilliseconds()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/getminutes/index.html b/files/de/web/javascript/reference/global_objects/date/getminutes/index.html
new file mode 100644
index 0000000000..ec541dc8fe
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/getminutes/index.html
@@ -0,0 +1,81 @@
+---
+title: Date.prototype.getMinutes()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getMinutes
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMinutes
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>getMinutes()</code></strong> Methode gibt die Minuten eines Datums bezüglich der Ortszeit zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getminutes.html")}}</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getMinutes()</code></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine ganze Zahl zwischen 0 und 59, welche die Minuten der gegebenen Zeit bezüglich der lokalen Zeit angibt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_getMinutes()">Einsatz von <code>getMinutes()</code></h3>
+
+<p>Im zweiten Statement wird die Variable <code>minutes</code> mit dem Wert 15 initialisiert. Dieses wird mit dem Wert des {{jsxref("Global_Objects/Date", "Date")}} Objektes <code>Xmas95</code> erreicht.</p>
+
+<pre class="brush: js">var Xmas95 = new Date('December 25, 1995 23:15:30');
+var minutes = Xmas95.getMinutes();
+
+console.log(minutes); // 15
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.20', 'Date.prototype.getMinutes')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getminutes', 'Date.prototype.getMinutes')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getminutes', 'Date.prototype.getMinutes')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.getMinutes")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCMinutes()")}}</li>
+ <li>{{jsxref("Date.prototype.setMinutes()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/getmonth/index.html b/files/de/web/javascript/reference/global_objects/date/getmonth/index.html
new file mode 100644
index 0000000000..5c5d8ceed7
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/getmonth/index.html
@@ -0,0 +1,83 @@
+---
+title: Date.prototype.getMonth()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getMonth
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMonth
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>getMonth()</code></strong> Methode gibt den Monat eines Datums bezüglich der Ortszeit zurück. Diese Monat ist ein 0 basierter Wert (wobei 0 den ersten Monat des Jahres beschreibt).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getmonth.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getMonth()</code></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine ganze Zahl zwischen 0 und 11, welche den Monat des gegebenen Datums bezüglich der lokalen Zeit angibt. 0 steht für Januar, 1 für Februar und so weiter.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_getMonth()">Einsatz von <code>getMonth()</code></h3>
+
+<p>Im zweiten Statement wird der Variablen <code>month</code> der Wert 11 zugewiesen. Dieses geschiet auf Basis des {{jsxref("Date")}} Objektes <code>Xmas95</code>.</p>
+
+<pre class="brush: js">var Xmas95 = new Date('December 25, 1995 23:15:30');
+var month = Xmas95.getMonth();
+
+console.log(month); // 11
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.12', 'Date.prototype.getMonth')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getmonth', 'Date.prototype.getMonth')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getmonth', 'Date.prototype.getMonth')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.getMonth")}}</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCMonth()")}}</li>
+ <li>{{jsxref("Date.prototype.setMonth()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/getseconds/index.html b/files/de/web/javascript/reference/global_objects/date/getseconds/index.html
new file mode 100644
index 0000000000..1cd8514b1b
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/getseconds/index.html
@@ -0,0 +1,83 @@
+---
+title: Date.prototype.getSeconds()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getSeconds
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getSeconds
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>getSeconds()</code></strong> Methode gibt die Sekunden eines Datums (Zeit) bezüglich der Ortszeit zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getseconds.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getSeconds()</code></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine ganze Zahl zwischen 0 und 59, welche die Sekunden der gegebenen Zeit bezüglich der lokalen Zeit angibt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_getSeconds()">Einsatz von <code>getSeconds()</code></h3>
+
+<p>Im zweiten Statement wird der Variablen <code>seconds</code> der Wert 30 zugewiesen. Dieses geschiet auf Basis des {{jsxref("Date")}} Objektes <code>Xmas95</code>.</p>
+
+<pre class="brush: js">var Xmas95 = new Date('December 25, 1995 23:15:30');
+var seconds = Xmas95.getSeconds();
+
+console.log(seconds); // 30
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.22', 'Date.prototype.getSeconds')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getseconds', 'Date.prototype.getSeconds')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getseconds', 'Date.prototype.getSeconds')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.getSeconds")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCSeconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setSeconds()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/gettime/index.html b/files/de/web/javascript/reference/global_objects/date/gettime/index.html
new file mode 100644
index 0000000000..8c6eb521e1
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/gettime/index.html
@@ -0,0 +1,126 @@
+---
+title: Date.prototype.getTime()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getTime
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getTime
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>getTime()</code></strong> Methode gibt einen nummerischen Wert zurück, der die Zeit gemäß der Weltzeit (UTC) angibt.</p>
+
+<p><em>getTime() nutzt immer die UTC für die Zeitrepräsentation. Zum Beispiel ist der Aufruf von getTime() in einer Zeitzone der gleiche Wert wie in einer anderen Zone.</em></p>
+
+<p>Man kann diese Methode einsetzten, um ein anderes {{jsxref("Date")}} Objekt zu initialisieren. Diese Methode hat den gleichen Funktionsumfang wie die {{jsxref("Date.valueof", "valueOf()")}} Methode.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-gettime.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getTime()</code></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Die Anzahl der Millisekunden zwischen dem 1. Januar 1970 00:00:00 UTC und dem gegebenen Zeitpunkt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_getTime()_für_das_Kopieren_von_Daten">Einsatz von <code>getTime()</code> für das Kopieren von Daten</h3>
+
+<p>Erstellen eines {{jsxref("Date")}} Objektes mit identischem Zeitwert.</p>
+
+<pre class="brush: js">// Seit der Monat 0-basiert ist, ist birthday der 10. Januar 1995
+var birthday = new Date(1994, 12, 10);
+var copy = new Date();
+copy.setTime(birthday.getTime());
+</pre>
+
+<h3 id="Ausführzeit_Messen">Ausführzeit Messen</h3>
+
+<p>Das Subtrahieren zweier <code>getTime()</code> Aufrufe auf {{jsxref("Date")}} Objekten, ergibt die Zeitspanne zwischen den beiden Aufrufen. Das kann eingesetzt werden, um die Ausführungszeit von Operationen zu berechnen. Auch die {{jsxref("Date.now()")}} Methode kann eingesetzt werden, um unnötiges Instanziieren von {{jsxref("Date")}} Objekten zu vermeiden.</p>
+
+<pre class="brush: js">var end, start;
+
+start = new Date();
+for (var i = 0; i &lt; 1000; i++) {
+  Math.sqrt(i);
+}
+end = new Date();
+
+console.log('Operation took ' + (end.getTime() - start.getTime()) + ' msec');
+</pre>
+
+<h2 id="Reduzierte_Zeitpräzision">Reduzierte Zeitpräzision</h2>
+
+<p>Um den Schutz vor Timing-Angriffen und Fingerabdrücken zu gewährleisten, kann die Genauigkeit von <code>new Date().GetTime()</code> abhängig von den Browsereinstellungen abgerundet werden.<br>
+ <span>In Firefox ist die <code>privacy.resistFingerprinting</code> Einstellung normalerweise eingeschaltet auf 20 us in Firefox 59; in 60 wird es 2 ms sein.</span></p>
+
+<pre class="brush: js" id="ct-107">// reduced time precision disabled
+new Date().getTime();
+// 1519129755973
+// 1519129769481
+// 1519129808126
+// ...
+
+
+// reduced time precision enabled
+new Date().getTime();
+// 1519129853500
+// 1519129858900
+// 1519129864400
+// ...
+</pre>
+
+<p>In Firefox kann man zudem die Eigenschaft <code>privacy.resistFingerprinting</code> einschalten, die Präzision wird 100 ms sein oder man benutzt den Wert <code>privacy.resistFingerprinting.reduceTimerPrecision.microseconds</code>, wenn der Wert größer sein soll.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.9', 'Date.prototype.getTime')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.gettime', 'Date.prototype.getTime')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.gettime', 'Date.prototype.getTime')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.getTime")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.setTime()")}}</li>
+ <li>{{jsxref("Date.prototype.valueOf()")}}</li>
+ <li>{{jsxref("Date.now()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html b/files/de/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html
new file mode 100644
index 0000000000..6d7cbb8442
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html
@@ -0,0 +1,102 @@
+---
+title: Date.prototype.getTimezoneOffset()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>getTimezoneOffset()</code></strong> Methode gibt den Unterschied zwischen der aktuellen Ortszeit (Einstellungen des Hostsystems) und der Weltzeit (UTC) in Minuten zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-gettimezoneoffset.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getTimezoneOffset()</code></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine Zahl, welche den Unterschied zwischen der aktuellen Ortszeit (Einstellung des Hostsystems) und der UTC in Minuten repräsentiert.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Der Zeitzonen-Offset ist der Unterschied, in Minuten, zwischen der lokalen Zeit und der Weltzeit (UTC). Das bedeutet, dass die Anzahl der Minuten eine positive Zahl ist, wenn die lokale Zeit hinterher geht, und eine negative Zahl ist, wenn die lokale Zeit voraus geht. Zum Beispiel gibt die Methode für die Zeitzone UTC+10 (Ost Australische Standardzeit) -600 zurück.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Aktuelle Zeitzone</td>
+   <td>UTC-8</td>
+   <td>UTC</td>
+   <td>UTC+3</td>
+  </tr>
+  <tr>
+   <td>Rückgabewert</td>
+   <td>480</td>
+   <td>0</td>
+   <td>-180</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Das zurückgegebene Zeitzonen-Offset ist immer das zu dem Date-Objekt zugehörige Offset. <span id="result_box" lang="de"><span>Wenn das Hostsystem für die Sommerzeit konfiguriert ist, ändert sich das Offset je nach Datum und Uhrzeit des Datums und der Sommerzeit.</span></span></p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_getTimezoneOffset()">Einsatz von <code>getTimezoneOffset()</code></h3>
+
+<pre class="brush: js">// Gibt das aktuelle Zeitzonen-Offset für das Hostsystem zurück.
+var x = new Date();
+var currentTimeZoneOffsetInHours = x.getTimezoneOffset() / 60;
+// 1
+
+// Gibt das Zeitzonen Offset des Internationalen Tag der Arbeit (1. Mai) in 2016 zurück.
+// Vorsicht beim Einsatz des Date() Konstruktors, denn dieser Benutzt den 0-indizierten Monat
+// so dass Mai durch 4 (und nicht durch 5) repräsentiert wird.
+var labourDay = new Date(2016, 4, 1);
+var labourDayOffset = labourDay.getTimezoneOffset() / 60;</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.26', 'Date.prototype.getTimezoneOffset')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.gettimezoneoffset', 'Date.prototype.getTimezoneOffset')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.gettimezoneoffset', 'Date.prototype.getTimezoneOffset')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.getTimezoneOffset")}}</p>
diff --git a/files/de/web/javascript/reference/global_objects/date/getutcdate/index.html b/files/de/web/javascript/reference/global_objects/date/getutcdate/index.html
new file mode 100644
index 0000000000..4d85c3b3b8
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/getutcdate/index.html
@@ -0,0 +1,80 @@
+---
+title: Date.prototype.getUTCDate()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCDate
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCDate
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>getUTCDate()</code></strong> Methode gibt den Tag des Monats eines Datums bezüglich der Weltzeit zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getutcdate.html")}}</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getUTCDate()</code></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine ganze Zahl zwischen 1 und 31, die den Tag des Monats des gegebenen Datums bezüglich der Weltzeit (UTC) angibt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_getUTCDate()">Einsatz von <code>getUTCDate()</code></h3>
+
+<p>Das folgende Beispiel weißt der Variablen <code>day</code> den Tag des aktullen Datums zu.</p>
+
+<pre class="brush: js">var today = new Date();
+var day = today.getUTCDate();
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.15', 'Date.prototype.getUTCDate')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getutcdate', 'Date.prototype.getUTCDate')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcdate', 'Date.prototype.getUTCDate')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.getUTCDate")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getDate()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCDay()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCDate()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/getutcday/index.html b/files/de/web/javascript/reference/global_objects/date/getutcday/index.html
new file mode 100644
index 0000000000..445e09aae3
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/getutcday/index.html
@@ -0,0 +1,82 @@
+---
+title: Date.prototype.getUTCDay()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCDay
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCDay
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>getUTCDay()</code></strong> Methode gibt den Wochentag eines Datums bezüglich der Weltzeit zurück. 0 steht für Sonntag.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getutcday.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getUTCDay()</code></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine ganze Zahl, die einen Wochentag des gegebenen Datums bezüglich der Weltzeit (UTC) repräsentiert. 0 steht für Sonntag, 1 für Montag, 2 für Dienstag und so weiter.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_getUTCDay()">Einsatz von <code>getUTCDay()</code></h3>
+
+<p>Im folgenden Beispiel wird der aktuelle Wochentag der Variablen <code>weekday</code> zugewiesen.</p>
+
+<pre class="brush: js">var today = new Date();
+var weekday = today.getUTCDay();
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.17', 'Date.prototype.getUTCDay')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getutcday', 'Date.prototype.getUTCDay')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcday', 'Date.prototype.getUTCDay')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.getUTCDay")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCDate()")}}</li>
+ <li>{{jsxref("Date.prototype.getDay()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCDate()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/getutcfullyear/index.html b/files/de/web/javascript/reference/global_objects/date/getutcfullyear/index.html
new file mode 100644
index 0000000000..0c273c4af9
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/getutcfullyear/index.html
@@ -0,0 +1,85 @@
+---
+title: Date.prototype.getUTCFullYear()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCFullYear
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCFullYear
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>getUTCFullYear()</code></strong> Methode gibt das Jahr eines Datums bezüglich der Weltzeit zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getutcfullyear.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getUTCFullYear()</code></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine Zahl, die das Jahr des gegebenen Datums bezüglich der Weltzeit (UTC) angibt.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Der von <code>getUTCFullYear()</code> zurückgegebene Wert ist eine absolute Zahl, die das Jahr (4-stellig) repräsentiert (z. B. 1995).</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_getUTCFullYear()">Einsatz von <code>getUTCFullYear()</code></h3>
+
+<p>Im folgenden Beispiel wird die Variable <code>year</code> mit dem aktuellen Jahr (4-stellig) bezüglich der Weltzeit beschrieben.</p>
+
+<pre class="brush: js">var today = new Date();
+var year = today.getUTCFullYear();
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.11', 'Date.prototype.getUTCFullYear')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getutcfullyear', 'Date.prototype.getUTCFullYear')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcfullyear', 'Date.prototype.getUTCFullYear')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.getUTCFullYear")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setFullYear()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/getutchours/index.html b/files/de/web/javascript/reference/global_objects/date/getutchours/index.html
new file mode 100644
index 0000000000..b11d3df06f
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/getutchours/index.html
@@ -0,0 +1,81 @@
+---
+title: Date.prototype.getUTCHours()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCHours
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCHours
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>getUTCHours()</code></strong> Methode gibt die Stunden eines Datums bezüglich der Weltzeit zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getutchours.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getUTCHours()</code></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine ganze Zahl zwischen 0 und 23, die die Stunde des gegebenen date Objektes bezüglich der Weltzeit (UTC) angibt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_getUTCHours()">Einsatz von <code>getUTCHours()</code></h3>
+
+<p>Im folgenden Beispiel wird der Variablen <code>hours</code> die aktuelle Stunde der Weltzeit zugewiesen.</p>
+
+<pre class="brush: js">var today = new Date();
+var hours = today.getUTCHours();
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.19', 'Date.prototype.getUTCHours')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getutchours', 'Date.prototype.getUTCHours')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getutchours', 'Date.prototype.getUTCHours')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.getUTCHours")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getHours()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCHours()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/getutcmilliseconds/index.html b/files/de/web/javascript/reference/global_objects/date/getutcmilliseconds/index.html
new file mode 100644
index 0000000000..d44ece54d3
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/getutcmilliseconds/index.html
@@ -0,0 +1,79 @@
+---
+title: Date.prototype.getUTCMilliseconds()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCMilliseconds
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCMilliseconds
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>getUTCMilliseconds()</code></strong> Methode gibt die Millisekunden eines Datums bezüglich der Weltzeit zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getutcmilliseconds.html")}}</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getUTCMilliseconds()</code></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine ganze Zahl zwischen 0 und 999, die die Millisekunden des gegebenen date Objektes bezüglich der Weltzeit (UTC) angibt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_getUTCMilliseconds()">Einsatz von <code>getUTCMilliseconds()</code></h3>
+
+<p>Im folgenden Beispiel wird der Variablen <code>milliseconds</code> die aktuellen Millisekunden der Weltzeit zugewiesen.</p>
+
+<pre class="brush: js">var today = new Date();
+var milliseconds = today.getUTCMilliseconds();
+</pre>
+
+<h2 id="Spezifikationer">Spezifikationer</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.25', 'Date.prototype.getUTCMilliseconds')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getutcmilliseconds', 'Date.prototype.getUTCMilliseconds')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcmilliseconds', 'Date.prototype.getUTCMilliseconds')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.getUTCMilliseconds")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getMilliseconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCMilliseconds()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/getutcminutes/index.html b/files/de/web/javascript/reference/global_objects/date/getutcminutes/index.html
new file mode 100644
index 0000000000..e2f039b987
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/getutcminutes/index.html
@@ -0,0 +1,79 @@
+---
+title: Date.prototype.getUTCMinutes()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCMinutes
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCMinutes
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>getUTCMinutes()</code></strong> Methode gibt die Minuten eines Datums bezüglich der Weltzeit zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getutcminutes.html")}}</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getUTCMinutes()</code></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine ganze Zahl wzischen 0 und 59, die die Minuten des gegebenen date Objektes bezüglich der Weltzeit (UTC) angibt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_getUTCMinutes()">Einsatz von <code>getUTCMinutes()</code></h3>
+
+<p>Im Folgenden Beispiel wird der Variablen <code>minutes</code> die aktuelle Minute der Weltzeit zugewiesen.</p>
+
+<pre class="brush: js">var today = new Date();
+var minutes = today.getUTCMinutes();
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.21', 'Date.prototype.getUTCMinutes')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getutcminutes', 'Date.prototype.getUTCMinutes')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcminutes', 'Date.prototype.getUTCMinutes')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.getUTCMinutes")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getMinutes()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCMinutes()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/getutcmonth/index.html b/files/de/web/javascript/reference/global_objects/date/getutcmonth/index.html
new file mode 100644
index 0000000000..3de532c78a
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/getutcmonth/index.html
@@ -0,0 +1,81 @@
+---
+title: Date.prototype.getUTCMonth()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCMonth
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCMonth
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>getUTCMonth()</code></strong> Methode gibt den Monat eines Datums bezüglich der Weltzeit zurück. Dieser Wert ist 0-basierend (0 steht für den ersten Monat im Jahr).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getutcmonth.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getUTCMonth()</code></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine ganze Zahl zwischen 0 und 11, die den Monat des gegebenen Datums bezüglich der Weltzeit (UTC) angibt. 0 steht für Januar, 1 für Februar, 2 für März und so weiter.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_getUTCMonth()">Einsatz von <code>getUTCMonth()</code></h3>
+
+<p>Das folgende Beispiel weist der <code>month</code> Variable den aktuellen Monat zu.</p>
+
+<pre class="brush: js">var today = new Date();
+var month = today.getUTCMonth();
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.13', 'Date.prototype.getUTCMonth')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getutcmonth', 'Date.prototype.getUTCMonth')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcmonth', 'Date.prototype.getUTCMonth')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.getUTCMonth")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getMonth()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCMonth()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/getutcseconds/index.html b/files/de/web/javascript/reference/global_objects/date/getutcseconds/index.html
new file mode 100644
index 0000000000..55ca03eb8f
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/getutcseconds/index.html
@@ -0,0 +1,79 @@
+---
+title: Date.prototype.getUTCSeconds()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCSeconds
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCSeconds
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>getUTCSeconds()</code></strong> Methode gibt die Sekunden der Zeit bezüglich der Weltzeit zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getutcseconds.html")}}</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getUTCSeconds()</code></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine ganze Zahl zwischen 0 und 59, die die Sekunden des gegebenen Date-Objektes bezüglich der Weltzeit (UTC) angibt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_getUTCSeconds()">Einsatz von <code>getUTCSeconds()</code></h3>
+
+<p>Das folgende Beispiel weist der Variablen <code>seconds</code> die aktuelle Sekunde zu.</p>
+
+<pre class="brush: js">var today = new Date();
+var seconds = today.getUTCSeconds();
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.23', 'Date.prototype.getUTCSeconds')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getutcseconds', 'Date.prototype.getUTCSeconds')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcseconds', 'Date.prototype.getUTCSeconds')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.getUTCSeconds")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getSeconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCSeconds()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/getyear/index.html b/files/de/web/javascript/reference/global_objects/date/getyear/index.html
new file mode 100644
index 0000000000..1c7ef8baba
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/getyear/index.html
@@ -0,0 +1,127 @@
+---
+title: Date.prototype.getYear()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getYear
+tags:
+  - Date
+  - Deprecated
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getYear
+---
+<div>{{JSRef}} {{deprecated_header}}</div>
+
+<p>Die <strong><code>getYear()</code></strong> Methode gibt das Jahr eines Datums bezüglich der Ortszeit zurück. Weil <code>getYear()</code> nicht das ganze Jahr zurück gibt (das "Jahr 2000 Problem"), wird es nicht weiter eingesetzt und wird von der Methode {{jsxref("Date.prototype.getFullYear", "getFullYear()")}} ersetzt.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getYear()</code></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine Zahl, welche das Jahr minus 1900 des gegebenen Datums bezüglich der lokalen Zeit angibt.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<ul>
+ <li>Für Jahre größer oder gleich 2000 ist der Rückgabewert von <code>getYear()</code> 100 oder größer. Zum Beispiel wird für das Jahr 2026 der Wert 126 zurück gegeben.</li>
+ <li>Für Jahre zwischen 1900 und 1999 ist der Rückgabewert von <code>getYear()</code> zwischen 0 und 99. Zum Beispiel wird für das Jahr 1976 der Wert 76 zurückgegeben.</li>
+ <li>Für Jahre kleiner als 1900 ist der Rückgabewert von <code>getYear()</code> kleiner 0. Zum Beispiel wird für das Jahr 1800 der Wert -100 zurück gegeben.</li>
+</ul>
+
+<p>Um mit Jahren vor und nach 2000 umgehen zu können, sollte stattdessen die Methode {{jsxref("Date.prototype.getFullYear", "getFullYear()")}} eingesetzt werden. Diese gibt das vollständige Jahr zurück.</p>
+
+<h2 id="Rückwärtskompatibilität">Rückwärtskompatibilität</h2>
+
+<h3 id="Verhalten_in_JavaScript_1.2_und_früher">Verhalten in JavaScript 1.2 und früher</h3>
+
+<p>Die <code>getYear()</code> Methode gibt entweder ein 2-stelliges oder 4-stelliges Jahr zurück.</p>
+
+<ul>
+ <li>Für Jahre zwischen 1900 (inklusiv) und 1999 (inklusiv) gibt <code>getYear()</code> das Jahr minus 1900 zurück. Zum Beispiel wird für das Jahr 1976 der Wert 76 zurückgegeben.</li>
+ <li>Für Jahre kleiner als 1900 oder größer als 1999 gibt die <code>getYear()</code> eine 4-stellige Jahreszahl zurück. Zum Beispiel wird für das Jahr 1856 der Wert 1856 zurückgegeben. Für das Jahr 2026 wird der Wert 2026 zurückgegeben.</li>
+</ul>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Jahre_zwischen_1900_und_1999">Jahre zwischen 1900 und 1999</h3>
+
+<p>Das zweite Statement initialisiert die Variable <code>year</code> mit dem Wert 95.</p>
+
+<pre class="brush: js">var Xmas = new Date('December 25, 1995 23:15:00');
+var year = Xmas.getYear(); // returns 95
+</pre>
+
+<h3 id="Jahre_nach_1999">Jahre nach 1999</h3>
+
+<p>Das zweite Statement initialisiert die Variable <code>year</code> mit dem Wert 100.</p>
+
+<pre class="brush: js">var Xmas = new Date('December 25, 2000 23:15:00');
+var year = Xmas.getYear(); // returns 100
+</pre>
+
+<h3 id="Jahre_vor_1900">Jahre vor 1900</h3>
+
+<p>Das zweite Statement initialisiert die Variable <code>year</code> mit dem Wert -100.</p>
+
+<pre class="brush: js">var Xmas = new Date('December 25, 1800 23:15:00');
+var year = Xmas.getYear(); // returns -100
+</pre>
+
+<h3 id="Setzen_und_bekommen_von_Jahren_zwischen_1900_und_1999">Setzen und bekommen von Jahren zwischen 1900 und 1999</h3>
+
+<p>Das zweite Statement initialisiert die Variable <code>year</code> mit dem Wert 95, was für das Jahr 1995 steht.</p>
+
+<pre class="brush: js">var Xmas = new Date('December 25, 2015 23:15:00');
+Xmas.setYear(95);
+var year = Xmas.getYear(); // returns 95
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-B.2.4', 'Date.prototype.getYear')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>
+    <p>Definiert in dem (informativen) Kompatibilitäts-Anhang</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getyear', 'Date.prototype.getYear')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td><span id="result_box" lang="de"><span>Definiert in</span> dem <span>(normativ)</span> <span>Anhang</span> <span>für</span> <span>zusätzliche Funktionen</span> <span>für Web-Browser</span><span>.</span></span></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getyear', 'Date.prototype.getYear')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.getYear")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setYear()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/index.html b/files/de/web/javascript/reference/global_objects/date/index.html
new file mode 100644
index 0000000000..75346dfbc4
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/index.html
@@ -0,0 +1,230 @@
+---
+title: Date
+slug: Web/JavaScript/Reference/Global_Objects/Date
+tags:
+  - Date
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Global_Objects/Date
+---
+<p>{{JSRef}}</p>
+
+<p>Erstellt eine JavaScript Date Instanz, die einen einzelnen Moment der Zeit repräsentiert. Date Objekte basieren auf dem Zeitwert, der der Anzahl der Millisekunden seit dem 1. Januar 1970 (UTC) entspricht.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/date-constructor.html")}}</p>
+
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre>new Date();
+new Date(<var>value</var>);
+new Date(<var>dateString</var>);
+new Date(<var>year</var>, <var>monthIndex</var> [, <var>day</var> [, <var>hour </var>[, <var>minutes </var>[, <var>seconds</var> [, <var>milliseconds</var>]]]]]);
+</pre>
+
+<p><strong>Anmerkung:</strong> Ein JavaScript <code>Date</code> Objekt kann nur instanziiert werden, wenn JavaScript Date als ein Konstruktor aufgerufen wird: Beim Aufrufen als reguläre Funktion (z. B. ohne den {{jsxref("Operators/new", "new")}} Operator) gibt die Funktion einen String zurück und kein <code>Date</code> Objekt. Anders als andere JavaScript-Datentypen hat das <code>Date</code> Objekt keine Literalsyntax.</p>
+
+<h3 id="Parameter">Parameter</h3>
+
+<p><strong>Anmerkung:</strong> Das Argument <code>monthIndex</code> ist 0-basiert. Das bedeutet, dass <code>0 = Januar</code> und <code>11 = Dezember</code> ist.</p>
+
+<p><strong>Anmerkung: </strong>Wenn <code>Date</code> als Konstruktor mit mehr als einem Argument aufgerufen wird und die übergebenen Werte größer als ihr logischer Bereich sind (z. B. 13 wird als Monat genutzt oder 70 wird als Minutenwert eingesetzt) wird der angrenzende Wert angepasst. Z. B. ist <code>new Date(2013, 13, 1)</code> äquivalent zu <code>new Date(2014, 1, 1</code>. Beide Ausdrücke erstellen das Datum <code>2014-02-01</code> (Monate fangen bei 0 an). Das gleiche gilt für folgende Werte: <code>new Date(2013, 2, 1, 0, 70)</code> ist äquivalent zu <code>new Date(2013, 2, 1, 1, 10)</code>, was beides den Zeitpunkt <code>2013-03-01T01:10:00</code> erzeugt.</p>
+
+<p><strong>Anmerkung:</strong> Wenn <code>Date</code> als Konstruktor mit mehr als einem Argumenten aufgerufen wird, werden die Argumente als Ortszeiten interpretiert. Wenn die Weltzeit genutzt werden soll, muss <code>new Date({{jsxref("Date.UTC()", "Date.UTC(...)")}})</code> mit den gleichen Argumenten genutzt werden.</p>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Ganze Zahl, die die Anzahl der Millisekunden seit dem 1. Januar 1970 00:00:00 UTC (Unixzeit) repräsentiert.</dd>
+</dl>
+
+<dl>
+ <dt><code>dateString</code></dt>
+ <dd>String der ein Datum repräsentiert. Der String muss in einem Format vorliegen, der von der {{jsxref("Date.parse()")}} Methode eingelesen werden kann (<a class="external" href="http://tools.ietf.org/html/rfc2822#page-14" title="http://tools.ietf.org/html/rfc2822#page-14">IETF-compliant RFC 2822 Zeitstempel</a> und auch eine <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15">Version von ISO8601</a>).
+ <p><strong>Anmerkung:</strong> Von dem Einlesen eines Zeitstempel-Strings durch den <code>Date</code> Konstruktor (und <code>Date.parse</code>, denn diese Funktion ist äquivalent) wird stark abgeraten, wegen der Unterschiede in den Browsern und Inkonsistenzen. Die Unterstützung für RFC 2822 formatierte Strings ist nur eine Konvention. Unterstützung für ISO 8601 formatierte Strings unterscheidet sich in den Strings mit nur einem Datum (z. B. "1970-01-01") werden nur als UTC behandelt und nicht als lokales Daten.</p>
+ </dd>
+</dl>
+
+<dl>
+ <dt><code>year</code></dt>
+ <dd>Ganze Zahl, die die Jahre repräsentiert. Werte von 0 bis 99 werden zu den Jahren 1900 bis 1999 umgewandelt. Siehe das  {{anch("Zwei_ziffrige_Zahlen_für_die_Jahre_1900_-_1999", "Beispiel unten")}}.</dd>
+</dl>
+
+<dl>
+ <dt><code>monthIndex</code></dt>
+ <dd>Ganze Zahl, die den Monat repräsentiert. Die Zahl beginnt bei 0 für Januar und endet bei 11 für Dezember.</dd>
+</dl>
+
+<dl>
+ <dt><code>day</code></dt>
+ <dd>Ganze Zahl, die den Tag des Monats repräsentiert.</dd>
+</dl>
+
+<dl>
+ <dt><code>hour</code></dt>
+ <dd>Ganze Zahl, die die Stunde des Tages repräsentiert.</dd>
+</dl>
+
+<dl>
+ <dt><code>minute</code></dt>
+ <dd>Ganze Zahl, die die Minuten einer Stunde repräsentiert.</dd>
+</dl>
+
+<dl>
+ <dt><code>second</code></dt>
+ <dd>Ganze Zahl, die die Sekunden einer Minute repräsentiert.</dd>
+</dl>
+
+<dl>
+ <dt><code>millisecond</code></dt>
+ <dd>Ganze Zahl, die die Millisekunden einer Sekunde repräsentiert.</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<ul>
+ <li>Wenn keine Argumente übergeben werden, erstellt der Konstruktor ein <code>Date</code> Objekt mit dem aktuellen Datum und der aktuellen Zeit der Systemzeitzone.</li>
+ <li>Wenn mindestens zwei Argumente übergeben werden, werden fehlende Argumente auf 1 gesetzt (wenn day fehlt) oder auf 0 gesetzt (für alle anderen Fälle).</li>
+ <li>Das JavaScript Datum basiert auf einem Zeitwert, der die Millisekunden seit Mitternacht am 1. Januar 1970 UTC beinhaltet. Ein Tag hat 86.400.000 Millisekunden. Der Bereich des JavaScript Datums-Objektes  ist von -100.000.000 Tagen bis 100.000.000 Tagen relativ zum 1. Januar 1970 UTC.</li>
+ <li>Das JavaScript <code>Date</code> Objekt unterstützt ein einheitliches plattformübergreifendes Format. Der Zeitwert kann zwischen Systemen ausgetauscht werden, um den gleichen Moment der Zeit zu repräsentieren. Wenn es zum Erstellen eines lokalen <code>date</code> Objektes genutzt wird, wird es die lokale äquivalente Zeit benutzen.</li>
+ <li>Das JavaScript <code>Date</code> Objekt unterstützt eine Nummer der UTC (universal) Methode genauso wie eine lokale Zeit Methode. UTC ist auch bekannt als Greenwich-Zeit (GTM), welches die Standardweltzeit ist. Die lokale Zeit ist die Zeit des Computers, auf dem JavaScript ausgeführt wird.</li>
+ <li>Das Aufrufen der JavaScript <code>Date</code> Funktion (z. B. ohne den {{jsxref("Operators/new", "new")}} Operator) gibt einen String, der das aktuelle Datum und die aktuelle Zeit repräsentiert, zurück.</li>
+</ul>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt>{{jsxref("Date.prototype")}}</dt>
+ <dd>Erlaubt das Hinzufügen von Eigenschaften zum JavaScript <code>Date</code> Objekt.</dd>
+ <dt>Date.length</dt>
+ <dd>Der Wert von <code>Date.length</code> ist 7. Dieser ist die Anzahl der Argumente, die vom Konstruktor gehändelt werden.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<dl>
+ <dt>{{jsxref("Date.now()")}}</dt>
+ <dd>Gibt den nummerischen Wert der aktuellen Zeit an - die Anzahl der Millisekunden die seit dem 1. Januar 1970 00:00:00 UTC vergangen sind.</dd>
+ <dt>{{jsxref("Date.parse()")}}</dt>
+ <dd>Analysiert eine String-Repräsentation eines Datums und gibt die Anzahl der Millisekunden seit dem 1. Januar 1970 00:00:00 UTC zurück.
+ <p><strong>Anmerkung:</strong> Von der Nutzung der <code>Date.parse</code> Methode wird stark abgeraten wegen der Unterschiede und Widersprüche in verschiedenen Browsern.</p>
+ </dd>
+ <dt>{{jsxref("Date.UTC()")}}</dt>
+ <dd>Akzeptiert die gleichen Parameter wie die längste Form des Konstruktors (z. B. 2 bis 7) und gibt die Anzahl der Millisekunden seit dem 1. Januar 1970 00:00:00 UTC zurück.</dd>
+</dl>
+
+<h2 id="JavaScript_Date_Instanzen">JavaScript <code>Date</code> Instanzen</h2>
+
+<p>Alle <code>Date</code> Instanzen erben von {{jsxref("Date.prototype")}}. Das Prototype Objekt des <code>Date</code> Konstruktors kann modifiziert werden, um alle <code>Date</code> Instanzen zu ändern.</p>
+
+<h3 id="Methoden_2">Methoden</h3>
+
+<p>{{ page("/de/docs/Web/JavaScript/Reference/Global_Objects/Date/prototype", "Methoden") }}</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Verschiedene_Wege_ein_Date_Objekt_zu_erstellen">Verschiedene Wege ein Date Objekt zu erstellen</h3>
+
+<p>Das folgende Beispiel zeigt verschiedene Wege, um JavaScript {{jsxref("Date")}} Objekte zu erstellen:</p>
+
+<p><strong>Anmerkung:</strong> Von der Nutzung des <code>Date</code> Konstruktors mit einem String-Argument (und der <code>Date.parse</code> Methode) wird wegen der Unterschiede und Widersprüche in verschiedenen Browsern abgeraten.</p>
+
+<pre>var today = new Date();
+var birthday = new Date("December 17, 1995 03:24:00");
+var birthday = new Date("1995-12-17T03:24:00");
+var birthday = new Date(1995,11,17);
+var birthday = new Date(1995,11,17,3,24,0);
+</pre>
+
+<h3 id="Zwei_ziffrige_Zahlen_für_die_Jahre_1900_-_1999">Zwei ziffrige Zahlen für die Jahre 1900 - 1999</h3>
+
+<p>Um Daten in den Jahren 0 bis 99 zu erzeugen und abzufragen, müssen die Methoden {{jsxref("Date.prototype.setFullYear()")}} und {{jsxref("Date.prototype.getFullYear()")}} eingesetzt werden.</p>
+
+<pre>var date = new Date(98, 1); // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT)
+
+// Deprecated Methode, 98 wird hier zu 1998
+date.setYear(98);           // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT)
+
+date.setFullYear(98);       // Sat Feb 01 0098 00:00:00 GMT+0000 (BST)</pre>
+
+<h3 id="Berechnen_von_vergangener_Zeit">Berechnen von vergangener Zeit</h3>
+
+<p>Die folgenden Beispiele zeigen, wie man die vergangene Zeit zwischen zwei JavaScript <code>date</code>s in Millisekunden berechnet.</p>
+
+<p>Durch die unterschiedlichen Längen von Tagen (wegen der Sommer/Winter Zeitumstellung), Monaten und Jahren gibt es bei Zeiteinheiten größer als Stunden, Minuten und Sekunden eine Reihe von Problemen, die vorher recherchiert und abgeprüft werden sollten.</p>
+
+<pre>// Einsatz Date Objekts
+var start = Date.now();
+
+// Event was einige Zeit braucht:
+doSomethingForALongTime();
+var end = Date.now();
+var elapsed = end - start; // elapsed time in milliseconds
+</pre>
+
+<pre>// Einsatz Eingebauter Methoden
+var start = new Date();
+
+// Event was einige Zeit braucht:
+doSomethingForALongTime();
+var end = new Date();
+var elapsed = end.getTime() - start.getTime(); // elapsed time in milliseconds
+</pre>
+
+<pre>// Testen einer funktion und Rückgabe des Rückgabewertes
+function printElapsedTime (fTest) {
+	var nStartTime = Date.now(),
+            vReturn = fTest(),
+            nEndTime = Date.now();
+
+	alert("Elapsed time: " + String(nEndTime - nStartTime) + " milliseconds");
+	return vReturn;
+}
+
+yourFunctionReturn = printElapsedTime(yourFunction);
+</pre>
+
+<p><strong>Anmerkung:</strong> In Browsern, die die hochauflösende Zeitfunktionen von der {{domxref("window.performance", "Web Performance API", "", 1)}} unterstützen, kann {{domxref("Performance.now()")}} bessere und präzisere Messergebnisse liefern als {{jsxref("Date.now()")}}.</p>
+
+<h3 id="Die_Anzahl_der_Sekunden_seit_der_Unix_Epoche_ermitteln">Die Anzahl der Sekunden seit der Unix Epoche ermitteln</h3>
+
+<pre>var seconds = Math.floor(Date.now() / 1000);</pre>
+
+<p>In diesem Fall ist es wichtig, nur eine ganze Zahl zurückzugeben (eine einfache Division würde nicht reichen) und auch nur tatsächlich verstrichene Sekunden zurückzugeben (deswegen nutzt der Quelltext die {{jsxref("Math.floor()")}} Funktion und nicht die {{jsxref("Math.round()")}} Funktion).</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9', 'Date')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date-objects', 'Date')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date-objects', 'Date')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date")}}</p>
diff --git a/files/de/web/javascript/reference/global_objects/date/now/index.html b/files/de/web/javascript/reference/global_objects/date/now/index.html
new file mode 100644
index 0000000000..e275650960
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/now/index.html
@@ -0,0 +1,105 @@
+---
+title: Date.now()
+slug: Web/JavaScript/Reference/Global_Objects/Date/now
+tags:
+  - Date
+  - JavaScript
+  - MakeBrowserAgnostic
+  - Method
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/now
+---
+<div>{{JSRef}}</div>
+
+<p>Die<strong><code> Date.now()</code></strong> Methode gibt die Anzahl der Millisekunden, die seit dem 01.01.1970 00:00:00 UTC vergangen sind zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-now.html")}}</div>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var timeInMs = Date.now();
+</pre>
+
+<h3 id="Parameters" name="Parameters">Rückgabewert</h3>
+
+<p>Eine {{jsxref("Number", "Zahl")}}, die die vergangenen Millisekunden seit dem 1. Januar 1970 00:00:00 Weltzeit (UTC) angibt (UNIX-Zeit).</p>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p>Da <code>now</code> eine statische Methode von <code>Date</code> ist, kann es immer so verwendet werden: <code>Date.now()</code></p>
+
+<h2 id="Reduzierte_Zeitpräzision">Reduzierte Zeitpräzision</h2>
+
+<p>Um den Schutz vor Timing-Angriffen und Fingerabdrücken zu gewährleisten, kann die Genauigkeit von <code>new Date().getTime()</code> abhängig von den Browsereinstellungen abgerundet werden.<br>
+ <span>In Firefox ist die <code>privacy.resistFingerprinting</code> Einstellung normalerweise eingeschaltet auf 20 us in Firefox 59; in 60 wird es 2 ms sein.</span></p>
+
+<pre class="brush: js" id="ct-107">// reduced time precision disabled
+new Date().getTime();
+// 1519129755973
+// 1519129769481
+// 1519129808126
+// ...
+
+
+// reduced time precision enabled
+new Date().getTime();
+// 1519129853500
+// 1519129858900
+// 1519129864400
+// ...
+</pre>
+
+<p>In Firefox kann man zudem die Eigenschaft <code>privacy.resistFingerprinting</code> einschalten, die Präzision wird 100 ms sein oder man benutzt den Wert <code>privacy.resistFingerprinting.reduceTimerPrecision.microseconds</code>, wenn der Wert größer sein soll.</p>
+
+<h2 id="Compatibility" name="Compatibility">Polyfill</h2>
+
+<p>Diese Methode wurde in in ECMA-262 5<sup>th</sup> edition standardisiert. Engines die noch nicht hinsichtlich diesen Standards aktualisiert wurden können den folgenden shim verwenden, um die Methode verfügbar zu machen:</p>
+
+<pre class="brush: js">if (!Date.now) {
+  Date.now = function now() {
+    return new Date().getTime();
+  };
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.4.4', 'Date.now')}}<br>
+    Implemented in JavaScript 1.5</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.now', 'Date.now')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.now', 'Date.now')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.now")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{domxref("window.performance.now")}} - bietet timestamps mit einer kleineren Auflösung (kleiner als Millisekunden), um die Seitenperformance messen zu können</li>
+ <li>{{domxref("console.time")}} / {{domxref("console.timeEnd")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/parse/index.html b/files/de/web/javascript/reference/global_objects/date/parse/index.html
new file mode 100644
index 0000000000..4920cdb6a8
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/parse/index.html
@@ -0,0 +1,173 @@
+---
+title: Date.parse()
+slug: Web/JavaScript/Reference/Global_Objects/Date/parse
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/parse
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Date.parse()</code></strong> Methode liest eine String-Repräsentation eines Datums ein und gibt die Anzahl der Millisekunden seit dem 1. Januar 1970 00:00:00 UTC oder <code>NaN</code>, wenn der String kein Datum ist oder manchmal wenn einige Datums- oder Zeitwerte einen falschen Wert haben (z. B. 2015-02-31), zurück.</p>
+
+<p>Es ist bis ES5 nicht empfohlen die <code>Date.parse</code> Methode einzusetzten, weil das Einlesen von Strings implementierungsabhängig war. Es gibt sehr viele Unterschiede wie verschiedene Implementierungen strings einlesen, weshalb Strings manuell eingelesen werden sollten (eine Bibliothek kann helfen, wenn viele Formate eingesetzt werden sollen).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-parse.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>Direkter Aufruf:</p>
+
+<pre class="syntaxbox">Date.parse(<var>dateString</var>)</pre>
+
+<p>Impliziter Aufruf:</p>
+
+<pre class="syntaxbox">new Date(<var>dateString</var>)</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>dateString</code></dt>
+ <dd>Ein String, der ein <a href="http://tools.ietf.org/html/rfc2822#section-3.3">RFC2822</a> oder (eine Variante des) ISO 8601 Datumsformat (mit Zeit) repräsentiert (andere Formate können manchmal eingesetzt werden, jedoch ist das Ergebnis manchmal unerwartet).</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine Zahl, die die Millisekunden zwischen dem 1. Januar 1970 00:00:00 UTC und dem Datum, das in dem übergebenen Parameter repräsentiert wird. Wenn der Parameter kein valides Datum repräsentiert, wird {{jsxref("NaN")}} zurückgegeben.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>parse()</code> Methode bekommt ein Datumsstring (z. B. <code>"Dec 25, 1995"</code> ) und gibt die Anzahl der Millisekunden seit dem 1. Januar 1970 00:00:00 UTC zurück. Diese Funktion ist nützlich, um Datumswerte mithilfe eines Stringswertes einzustellen, (z. B. im zusammenhang mit der {{jsxref("Date.prototype.setTime()", "setTime()")}} Methode und dem {{jsxref("Global_Objects/Date", "Date")}} Objekt).</p>
+
+<p>Bei einer Stringrepräsentation mit einer Zeit, gibt die <code>parse()</code> Methode die Zeitwert zurück. Es wird die RFC2822 / IETF Datums Syntax (<a href="http://tools.ietf.org/html/rfc2822#section-3.3">RFC2822 Section 3.3</a>) unterstützt (z. B. <code>"Mon, 25 Dec 1995 13:30:00 GMT"</code>). Die Methode versteht die kontimentalen US Zeitzonenabkürzungen, jedoch sollte lieber der Zeitzonenunterschied angegeben werden, wie zum Beispiel  <code>"Mon, 25 Dec 1995 13:30:00 +0430"</code> (4 Stunden und 30 Minuten östlich vom Greenwich Meridian).</p>
+
+<p>GMT und UTC werden gleich berücksichtigt. Die lokale Zeitzone wird eingesetzt um Argumente im <a href="http://tools.ietf.org/html/rfc2822#section-3.3">RFC2822 Kapitel 3.3</a> Format zu interpretieren, welche keine Zeitzoneninformationen enthalten.</p>
+
+<p>Wegen der Unterschiede beim einlesen von Datums Strings, ist es empfohlen das Einlesen eines Datums immer manuell durchzuführen, wenn das Ergebnisse inkonsistent sind, besonders über verschiedene ECMAScript Implementierungen hinweg, wo Strings wie <code>"2015-10-12 12:00:00"</code> manchmal zu <code>NaN</code>, UTC oder lokaler Zeitzone eingelesen werden.</p>
+
+<h3 id="ECMAScript_5_ISO-8601_Format_Unterstützung">ECMAScript 5 ISO-8601 Format Unterstützung</h3>
+
+<p>Der Datums- / Zeit-String ist manchmal im einfachen <a href="http://www.w3.org/TR/NOTE-datetime">ISO 8601</a> Format. Zum Beispiel können <code>"2011-10-10"</code> (nur ein Datum) oder <code>"2011-10-10T14:48:00"</code> (Datum und Zeit) übergeben und eingelesen werden. Wenn der String ein ISO 8601 Datum (ohne Zeit) ist, wird die UTC Zeitzone eingesetzt, um die Argumente zu interpretieren. Wenn der String Datums- und Zeitangaben im <a href="http://www.w3.org/TR/NOTE-datetime">ISO 8601</a> Format enthällt, wird dieses als lokale Zeit interpretiert.</p>
+
+<p>Weil Zeitzonen im String enthalten sein können und interpretiert werden können, wird immer die Anzahl der Millisekunden zwischen dem repräsentierten Datum und dem 1. Januar 1970 00:00:00 UTC oder <code>NaN</code> zurückgegeben.</p>
+
+<p>Weil <code>parse()</code> eine statische Methode von {{jsxref("Date")}} ist, wird diese mit <code>Date.parse()</code> aufgerufen und nicht als Methode einer {{jsxref("Date")}} Instanz.</p>
+
+<h3 id="Unterschiede_in_erwarteten_Zeitzonen">Unterschiede in erwarteten Zeitzonen</h3>
+
+<p>Wenn der Datumsstring  <code>"March 7, 2014"</code> gegeben ist, nimmt <code>parse()</code> dabei die lokale Zeitzone an. Ist hingegen ein ISO Format wie <code>"2014-03-07"</code> angegeben, so wird eine UTC Zeitzone angenommen (ES5 und ECMAScript 2015). Deshalb können die so erstellten {{jsxref("Date")}} Objekte einen unterschiedlichen Zeitpunkt repräsentieren. Dieses ist von der ECMAScript Version abhängig wenn das System mit einer lokalen UTC Zeit eingestellt ist. Das bedeutet, dass zwei Strings mit einem äquivalenten Datum (Unterschied in der Formatierung) zu zwei verschiednenen Ergebnissen führen kann.</p>
+
+<h3 id="Fall-back_für_implementierungsspezifische_Datumsformate">Fall-back für implementierungsspezifische Datumsformate</h3>
+
+<p>Die ECMAScript Spezifikation besagt: Wenn ein String nicht dem Standardformat entspricht, nutzen die Funktionen eine Fall-back-Lösung in Form einer implementierungsabhängigen Heuristik oder eines implementierungsabhängigen Algorithmus. Unkenntliche Strings oder Daten, die nicht valide Werte  von ISO formattierten Elementen haben, führen dazu, dass <code>Date.parse()</code> den Wert {{jsxref("NaN")}} zurückgibt.</p>
+
+<p>Immer, wenn ein String nicht im einfachen ISO Format ist (ECMA-252) und nicht valide Datumswerte enthällt, ist es vom Wert und vom Browser abhängig, ob {{jsxref("NaN")}} zurückgegeben wird oder nicht. Z. B.:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">// Kein-ISO String: Mit nicht validen Datumswerten</span>
+<span class="keyword token">new</span> <span class="class-name token">Date</span><span class="punctuation token">(</span><span class="string token">'23/25/2014'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Führt zu den Datum 25. November 2015 (Ortszeit) in Firefox 30 und zu einem nicht validen Datum in Safari 7. Immer, wenn Strings als ISO Format erkannt werden und diese nicht valider Werte enthalten, wird von allen Browsern, die mindestens ES5 unterstützen, {{jsxref("NaN")}} zurückgegeben:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">// ISO String mit nicht validen Werten</span>
+<span class="keyword token">new</span> <span class="class-name token">Date</span><span class="punctuation token">(</span><span class="string token">'2014-25-23'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">toISOString</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// returns "RangeError: invalid date" in allen es5 kompatiblen Browsern</span></code></pre>
+
+<p>SpiderMonkey's implementierungsabhängige Heuristik kann in der <a href="http://mxr.mozilla.org/mozilla-central/source/js/src/jsdate.cpp?rev=64553c483cd1#889"><code>jsdate.cpp</code></a>-Datei gefunden werden. Der String <code>"10 06 2014"</code> ist ein Beispiel für einen nicht konformen ISO formatierten String und dieses wird durch die implementierungsabhängige Heuristik abgearbeitet. Siehe zudem diese <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1023155#c6">grobe Übersicht</a> an, wie das Analysieren funktioniert.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">new</span> <span class="class-name token">Date</span><span class="punctuation token">(</span><span class="string token">'10 06 2014'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Wird das Datum 6. Oktober 2014 (Ortszeit) erzeugen und nicht den 10 Juni 2014. Andere Beispiele:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">new</span> <span class="class-name token">Date</span><span class="punctuation token">(</span><span class="string token">'foo-bar 2014'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">toString</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// returns: "Invalid Date"</span>
+
+Date<span class="punctuation token">.</span><span class="function token">parse</span><span class="punctuation token">(</span><span class="string token">'foo-bar 2014'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// returns: NaN</span></code></pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_Date.parse()">Einsatz von <code>Date.parse()</code></h3>
+
+<p>Wenn <code>IPOdate</code> ein existierendes {{jsxref("Date")}} Objekt ist, kann es auf den 9. August 1995 (Ortszeit) gesetzt werden:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">IPOdate<span class="punctuation token">.</span><span class="function token">setTime</span><span class="punctuation token">(</span>Date<span class="punctuation token">.</span><span class="function token">parse</span><span class="punctuation token">(</span><span class="string token">'Aug 9, 1995'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Das gleich Beispiel für das Analysieren von nicht-Standarddatumsstrings:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">Date<span class="punctuation token">.</span><span class="function token">parse</span><span class="punctuation token">(</span><span class="string token">'Aug 9, 1995'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Gibt den Wert <code>807937200000</code> in der Zeitzone GMT-0300 zurück und andere Werte in anderen Zeitzonen, wenn im String keine Zeitzone definiert ist und es kein ISO formatiertes Datum ist. Deswegen wird als Standardwert die Ortszeit genutzt.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">Date<span class="punctuation token">.</span><span class="function token">parse</span><span class="punctuation token">(</span><span class="string token">'Wed, 09 Aug 1995 00:00:00 GMT'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Gibt <code>807926400000</code> in allen Zeitzonen zurück, weil GMT (UTC) angegeben ist.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">Date<span class="punctuation token">.</span><span class="function token">parse</span><span class="punctuation token">(</span><span class="string token">'Wed, 09 Aug 1995 00:00:00'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Gibt den Wert <code>807937200000</code> in der Zeitzone GMT-0400 zurück und andere Werte in anderen Zeitzonen, wenn im String keine Zeitzone definiert ist und es kein ISO formatiertes Datum ist. Deswegen wird als Standardwert die Ortszeit genutzt.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">Date<span class="punctuation token">.</span><span class="function token">parse</span><span class="punctuation token">(</span><span class="string token">'Thu, 01 Jan 1970 00:00:00 GMT'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Gibt 0 in allen Zeitzonen zurück, weil GMT (UTC) angegeben ist.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">Date<span class="punctuation token">.</span><span class="function token">parse</span><span class="punctuation token">(</span><span class="string token">'Thu, 01 Jan 1970 00:00:00'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Gibt den Wert <code>14400000</code> in der Zeitzone GMT-0400 zurück und andere Werte in anderen Zeitzonen, wenn im String keine Zeitzone definiert ist und es kein ISO formatiertes Datum ist. Deswegen wird als Standardwert die Ortszeit genutzt.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">Date<span class="punctuation token">.</span><span class="function token">parse</span><span class="punctuation token">(</span><span class="string token">'Thu, 01 Jan 1970 00:00:00 GMT-0400'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Gibt <code>14400000</code> in allen Zeitzonen zurück, weil GMT (UTC) angegeben ist.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.4.2', 'Date.parse')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Einfaches ISO 8601 Format hinzugefügt.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.parse', 'Date.parse')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.parse', 'Date.parse')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.parse")}}</p>
+
+<h2 id="Kompatibilitätsnotitzen">Kompatibilitätsnotitzen</h2>
+
+<ul>
+ <li>Firefox 49 {{geckoRelease(49)}} hat das Einlesen von 2-Stelligen Jahreszahlen geändert und hat sich damit an den Google Chrome angepasst und nicht mehr an den Internet Explorer. Jetzt werden 2-Stellige Jahreszahlen, die kleiner oder gleich 50 sind zum 21. Jahrhundert gezählt. Zum Beispiel wird <code>04/16/17</code> jetzt zum 16. April 19 2017 und nicht mehr zum 16. April 1917 eingelesen. Es vermeidet alle Probleme mit mehrdeutigen Jahren. Es wird empfohlen das ISO 8601 (z. B. 2017-04-16) zu benutzen ({{bug(1265136)}}).</li>
+</ul>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Date.UTC()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/prototype/index.html b/files/de/web/javascript/reference/global_objects/date/prototype/index.html
new file mode 100644
index 0000000000..a056132ba7
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/prototype/index.html
@@ -0,0 +1,182 @@
+---
+title: Date.prototype
+slug: Web/JavaScript/Reference/Global_Objects/Date/prototype
+tags:
+  - Date
+  - JavaScript
+  - Property
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Date.prototype-</code></strong>Eigenschaft ist der Prototype für den {{jsxref("Date")}}-Konstruktor</p>
+
+<div>{{js_property_attributes(0, 0, 1)}}</div>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>JavaScript-{{jsxref("Date")}}-Instanzen erben von <code>Date.prototype</code>. Man kann das Konstruktorprototype-Objekt ändern, um Eigenschaften und Methoden aller {{jsxref("Date")}}-Instanzen zu ändern.</p>
+
+<p>Für die Kompatibilität mit Jahrtausendsrechnungen (in anderen Worten, um das Jahr 2000 mit einzukalkulieren), sollte man das Jahr immer in voller Länge spezifizieren; zum Beispiel sollte 1998 und nicht 98 benutzt werden. Zur Unterstützung der Spezifizierung des vollen Jahres hat JavaScript die Methoden {{jsxref("Date.prototype.getFullYear()", "getFullYear()")}}, {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}}, {{jsxref("Date.prototype.getUTCFullYear()", "getUTCFullYear()")}} und {{jsxref("Date.prototype.setUTCFullYear()", "setUTCFullYear()")}}.</p>
+
+<p>Mit Einführung von ECMAScript 6 ist das <code>Date.prototype</code>-Objekt ein normales Objekt. Es ist keine Instanz von {{jsxref("Date")}}.</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt><code>Date.prototype.constructor</code></dt>
+ <dd>Eine Funktion, die Instanzen erzeugen kann. Der {{jsxref("Date")}}-Konstruktor ist der Standard.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<h3 id="Getter">Getter</h3>
+
+<dl>
+ <dt>{{jsxref("Date.prototype.getDate()")}}</dt>
+ <dd>Gibt den Tag des Monats (1 - 31) eines Datums gemäß der Ortszeit zurück.</dd>
+ <dt>{{jsxref("Date.prototype.getDay()")}}</dt>
+ <dd>Gibt den Tag der Woche (0 - 6) eines Datums gemäß der Ortszeit zurück.</dd>
+ <dt>{{jsxref("Date.prototype.getFullYear()")}}</dt>
+ <dd>Gibt das Jahr (4 Ziffern für 4 ziffrige Jahre) eines Datums gemäß der Ortszeit zurück.</dd>
+ <dt>{{jsxref("Date.prototype.getHours()")}}</dt>
+ <dd>Gibt die Stunde (0 - 23) eines Datums gemäß der Ortszeit zurück.</dd>
+ <dt>{{jsxref("Date.prototype.getMilliseconds()")}}</dt>
+ <dd>Gibt die Millisekunden (0 - 999) eines Datums gemäß der Ortszeit zurück.</dd>
+ <dt>{{jsxref("Date.prototype.getMinutes()")}}</dt>
+ <dd>Gibt die Minuten (0 - 59) eines Datums gemäß der Ortszeit zurück.</dd>
+ <dt>{{jsxref("Date.prototype.getMonth()")}}</dt>
+ <dd>Gibt den Monat (0 - 11) eines Datums gemäß der Ortszeit zurück.</dd>
+ <dt>{{jsxref("Date.prototype.getSeconds()")}}</dt>
+ <dd>Gibt die Sekunden (0 - 59) eines Datums gemäß der Ortszeit zurück.</dd>
+ <dt>{{jsxref("Date.prototype.getTime()")}}</dt>
+ <dd>Gibt den nummerischen Wert eines Datums als Millisekunden seit 1. Januar 1970 00:00:00 UTC (negativ für frühere Daten) zurück.</dd>
+ <dt>{{jsxref("Date.prototype.getTimezoneOffset()")}}</dt>
+ <dd>Gibt den Zeitzonenunterschied in Minuten für die aktuelle Region zurück.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCDate()")}}</dt>
+ <dd>Gibt den Tag des Monats (1 - 31) eines Datums gemäß der Weltzeit zurück.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCDay()")}}</dt>
+ <dd>Gibt den Tag der Woche (0 - 6) eines Datums gemäß der Weltzeit zurück.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCFullYear()")}}</dt>
+ <dd>Gibt das Jahr (4 Ziffern für 4 ziffrige Jahre) eines Datums gemäß der Weltzeit zurück.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCHours()")}}</dt>
+ <dd>Gibt die Stunden (0 - 23) eines Datums gemäß der Weltzeit zurück.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCMilliseconds()")}}</dt>
+ <dd>Gibt die Millisekunden (0 - 999) eines Datums gemäß der Weltzeit zurück.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCMinutes()")}}</dt>
+ <dd>Gibt die Minuten (0 - 59) eines Datums gemäß der Weltzeit zurück.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCMonth()")}}</dt>
+ <dd>Gibt den Monat (0 - 11) eines Datums gemäß der Weltzeit zurück.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCSeconds()")}}</dt>
+ <dd>Gibt die Sekunden (0 - 59) eines Datums gemäß der Weltzeit zurück.</dd>
+ <dt>{{jsxref("Date.prototype.getYear()")}} {{deprecated_inline}}</dt>
+ <dd>Gibt das Jahr (nur 2 - 3 Ziffern) eines Datums gemäß der Ortszeit zurück. Stattdessen sollte {{jsxref("Date.prototype.getFullYear()", "getFullYear()")}} benutzt werden.</dd>
+</dl>
+
+<h3 id="Setter">Setter</h3>
+
+<dl>
+ <dt>{{jsxref("Date.prototype.setDate()")}}</dt>
+ <dd>Setzt den Tag des Monats eines Datums gemäß der Ortszeit.</dd>
+ <dt>{{jsxref("Date.prototype.setFullYear()")}}</dt>
+ <dd>Setzt das Jahr (4 Ziffern für vierstellige Jahre) eines Datums gemäß der Ortszeit.</dd>
+ <dt>{{jsxref("Date.prototype.setHours()")}}</dt>
+ <dd>Setzt die Stunden eines Datums gemäß der Ortszeit.</dd>
+ <dt>{{jsxref("Date.prototype.setMilliseconds()")}}</dt>
+ <dd>Setzt die Millisekunden eines Datums gemäß der Ortszeit.</dd>
+ <dt>{{jsxref("Date.prototype.setMinutes()")}}</dt>
+ <dd>Setzt die Minuten eines Datums gemäß der Ortszeit.</dd>
+ <dt>{{jsxref("Date.prototype.setMonth()")}}</dt>
+ <dd>Setzt den Monat eines Datums gemäß der Ortszeit.</dd>
+ <dt>{{jsxref("Date.prototype.setSeconds()")}}</dt>
+ <dd>Setzt die Sekunden eines Datums gemäß der Ortszeit.</dd>
+ <dt>{{jsxref("Date.prototype.setTime()")}}</dt>
+ <dd>Setzt ein {{jsxref("Date")}} Objekt auf die Zeit, mit der Anzahl der Millisekunden seit dem 1. Januar 1970 00:00:00UTC. Negative Zahlen sind für frühere Daten erlaubt.</dd>
+ <dt>{{jsxref("Date.prototype.setUTCDate()")}}</dt>
+ <dd>Setzt den Tag des Monats eines Datums gemäß der Weltzeit.</dd>
+ <dt>{{jsxref("Date.prototype.setUTCFullYear()")}}</dt>
+ <dd>Setzt das Jahr (4 Ziffern für 4 ziffrige Jahre) eines Datums gemäß der Weltzeit.</dd>
+ <dt>{{jsxref("Date.prototype.setUTCHours()")}}</dt>
+ <dd>Setzt die Stunde eines Datums gemäß der Weltzeit.</dd>
+ <dt>{{jsxref("Date.prototype.setUTCMilliseconds()")}}</dt>
+ <dd>Setzt die Millisekunden eines Datums gemäß der Weltzeit.</dd>
+ <dt>{{jsxref("Date.prototype.setUTCMinutes()")}}</dt>
+ <dd>Setzt die Minuten eines Datums gemäß der Weltzeit.</dd>
+ <dt>{{jsxref("Date.prototype.setUTCMonth()")}}</dt>
+ <dd>Setzt den Monat eines Datums gemäß der Weltzeit.</dd>
+ <dt>{{jsxref("Date.prototype.setUTCSeconds()")}}</dt>
+ <dd>Setzt die Sekunden eines Datums gemäß der Weltzeit.</dd>
+ <dt>{{jsxref("Date.prototype.setYear()")}} {{deprecated_inline}}</dt>
+ <dd>Setzt das Jahr (nur 2 - 3 Ziffern) eines Datums gemäß der Ortszeit. Stattdessen sollte {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}} benutzt werden.</dd>
+</dl>
+
+<h3 id="Konvertierungsgetter">Konvertierungsgetter</h3>
+
+<dl>
+ <dt>{{jsxref("Date.prototype.toDateString()")}}</dt>
+ <dd>Gibt das Datum als menschlich lesbaren String zurück (z. B. Thu Apr 12 2018). </dd>
+ <dt>{{jsxref("Date.prototype.toISOString()")}}</dt>
+ <dd>Konvertiert ein Datum zu einem String im erweiterten ISO-8601-Format.</dd>
+ <dt>{{jsxref("Date.prototype.toJSON()")}}</dt>
+ <dd>Gibt eine String-Repräsentation eines {{jsxref("Date")}}-Objektes zurück. Dabei wird die {{jsxref("Date.prototype.toISOString()", "toISOString()")}}-Methode eingesetzt. Gedacht für den Einsatz von {{jsxref("JSON.stringify()")}}.</dd>
+ <dt>{{jsxref("Date.prototype.toGMTString()")}} {{deprecated_inline}}</dt>
+ <dd>Gibt eine String-Repräsentation eines {{jsxref("Date")}}-Objektes auf Basis der GMT-(UT)-Zeitzone zurück. Stattdessen sollte {{jsxref("Date.prototype.toUTCString()", "toUTCString()")}} eingesetzt werden.</dd>
+ <dt>{{jsxref("Date.prototype.toLocaleDateString()")}}</dt>
+ <dd>Gibt einen String mit ortssensitiver Repräsentation eines Datums zurück. Dieses Datum basiert auf den Systemeinstellungen.</dd>
+ <dt>{{jsxref("Date.prototype.toLocaleFormat()")}} {{non-standard_inline}}</dt>
+ <dd>Konvertiert ein Datum zu einem String mithilfe eines Formatierungsstrings.</dd>
+ <dt>{{jsxref("Date.prototype.toLocaleString()")}}</dt>
+ <dd>Gibt einen String mit ortssensitiver Repräsentation eines Datums zurück. Diese Method überschreibt die  {{jsxref("Object.prototype.toLocaleString()")}}-Methode.</dd>
+ <dt>{{jsxref("Date.prototype.toLocaleTimeString()")}}</dt>
+ <dd>Gibt einen String mit ortssensitiver Repräsentation der Zeit eines Datums zurück. Diese Zeit basiert auf den Systemeinstellungen.</dd>
+ <dt>{{jsxref("Date.prototype.toSource()")}} {{non-standard_inline}}</dt>
+ <dd>Gibt einen String-Repräsentation des Quelltextes zurück (gleich dem {{jsxref("Date")}}-Objekt). Man kann diese Methode einsetzen um ein neues Objekt zu erstellen. Diese Methode überschreibt die {{jsxref("Object.prototype.toSource()")}}-Methode</dd>
+ <dt>{{jsxref("Date.prototype.toString()")}}</dt>
+ <dd>Gibt eine String-Repräsentation eines {{jsxref("Date")}}-Objektes zurück. Diese Methode überschreibt die {{jsxref("Object.prototype.toString()")}} Methode.</dd>
+ <dt>{{jsxref("Date.prototype.toTimeString()")}}</dt>
+ <dd>Gibt die Zeit eines Datums als menschlich lesbaren String zurück.</dd>
+ <dt>{{jsxref("Date.prototype.toUTCString()")}}</dt>
+ <dd>Konvertiert das Datum zu einem String unter Einsatz der UTC-Zeitzone.</dd>
+ <dt>{{jsxref("Date.prototype.valueOf()")}}</dt>
+ <dd>Gibt ein primitiven Wert eines {{jsxref("Date")}}-Objektes zurück. Diese Methode überschreibt die {{jsxref("Object.prototype.valueOf()")}}-Methode.</dd>
+</dl>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5', 'Date.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-properties-of-the-date-prototype-object', 'Date.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-properties-of-the-date-prototype-object', 'Date.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.prototype")}}</p>
diff --git a/files/de/web/javascript/reference/global_objects/date/setdate/index.html b/files/de/web/javascript/reference/global_objects/date/setdate/index.html
new file mode 100644
index 0000000000..4fb7d6ac63
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/setdate/index.html
@@ -0,0 +1,91 @@
+---
+title: Date.prototype.setDate()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setDate
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setDate
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>setDate()</code></strong> Methode setzt den Tag eines {{jsxref("Date")}} Objektes relativ zum Beginn des aktuellen Monats.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-setdate.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.setDate(<var>dayValue</var>)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>dayValue</code></dt>
+ <dd>Eine ganze Zahl, die den Tag des Monats repräsentiert.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Die Anzahl der Millisekunden zwischen dem 1. Januar 1970 00:00:00 UTC und dem geänderten {{jsxref("Date")}} Objektes (das Objekt wird auch geändert).</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Wenn <code>dayValue</code> außerhalb des Wertes für einen Tag in einem Monat ist, wird <code>setDate()</code> das {{jsxref("Date")}} Objekt dementsprechend ändern. Zum Beispiel wird der Wert 0 für <code>dayValue</code> den letzen Tag des vorherigen Monats einstellen.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_setDate()">Einsatz von <code>setDate()</code></h3>
+
+<pre class="brush: js">var theBigDay = new Date(1962, 6, 7); // 1962-07-07
+theBigDay.setDate(24);  // 1962-07-24
+theBigDay.setDate(32);  // 1962-08-01
+theBigDay.setDate(22);  // 1962-08-22</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.36', 'Date.prototype.setDate')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setdate', 'Date.prototype.setDate')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setdate', 'Date.prototype.setDate')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.setDate")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getDate()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCDate()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/setfullyear/index.html b/files/de/web/javascript/reference/global_objects/date/setfullyear/index.html
new file mode 100644
index 0000000000..3dafd848dc
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/setfullyear/index.html
@@ -0,0 +1,97 @@
+---
+title: Date.prototype.setFullYear()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setFullYear
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setFullYear
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>setFullYear()</code></strong> Methode stellt das ganze Jahr eines Datums bezüglich der Ortszeit ein und gibt einen neuen Zeitstempel zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-setfullyear.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.setFullYear(<var>yearValue</var>[, <var>monthValue</var>[, <var>dateValue</var>]])</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>yearValue</code></dt>
+ <dd>Eine ganze Zahl, welche den nummerischen Wert des Jahres angibt (z. B. 1995).</dd>
+ <dt><code>monthValue</code></dt>
+ <dd>Optional. Eine ganze Zahl zwischen 0 und 11, welche den Monat von Januar bis Dezember angibt.</dd>
+ <dt><code>dateValue</code></dt>
+ <dd>Optional. Eine ganze Zahl zwischen 1 und 31, welche den Tag des Monats angibt. Wenn der <code>dateValue</code> Parameter angegeben wird, muss auch der <code>monthValue</code> Parameter angegeben werden.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Die Anzahl der Millisekunden zwischen dem 1. Januar 1970 00:00:00 UTC und dem geänderten date Objekt.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Wenn die Parameter <code>monthValue</code> und <code>dateValue</code> nicht gesetzt sind, werden die Rückgabewerte der Methoden {{jsxref("Date.prototype.getMonth()", "getMonth()")}} und {{jsxref("Date.prototype.getDate()", "getDate()")}} eingesetzt.</p>
+
+<p>Wenn ein gesetzter Parameter außerhalb seiner erwarteten Grenzen ist, ändert <code>setFullYear()</code> entsprechenden die anderen Parameter und die Informationen im {{jsxref("Date")}} Objekt. Wird zum Beispiel 15 für <code>monthValue</code> Übergeben, so wird das Jahr um 1 inkrementiert und der Wert 3 wird für den Monat genutzt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_setFullYear">Einsatz von <code>setFullYear()</code></h3>
+
+<pre class="brush: js">var theBigDay = new Date();
+theBigDay.setFullYear(1997);
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.40', 'Date.prototype.setFullYear')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setfullyear', 'Date.prototype.setFullYear')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setfullyear', 'Date.prototype.setFullYear')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.setFullYear")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setYear()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/sethours/index.html b/files/de/web/javascript/reference/global_objects/date/sethours/index.html
new file mode 100644
index 0000000000..3b40e647b6
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/sethours/index.html
@@ -0,0 +1,102 @@
+---
+title: Date.prototype.setHours()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setHours
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setHours
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>setHours()</code></strong> Methode setzt die Stunden für eine Zeit bezüglich der Ortszeit und gibt die Anzahl der Millisekunden seit dem 1. Januar 1970 00:00:00 UTC nachdem die Zeit des {{jsxref("Date")}} geändert wurde.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-sethours.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.setHours(<var>hoursValue</var>[, <var>minutesValue</var>[, <var>secondsValue</var>[, <var>msValue</var>]]])</code></pre>
+
+<h3 id="Versionen_vor_JavaScript_1.3">Versionen vor JavaScript 1.3</h3>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.setHours(<var>hoursValue</var>)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>hoursValue</code></dt>
+ <dd>Eine ganze Zahl zwischen 0 und 23, die die Stunde repräsentiert. Wenn der Wert größer als 23 ist, werden die extra Stunden auf die Zeit addiert.</dd>
+ <dt><code>minutesValue</code></dt>
+ <dd>Optional. Eine ganze Zahl zwischen 0 und 59, die die Minuten repräsentiert. Wenn ein Wert größer als 59 angegeben wird, werden die extra Minuten auf die Zeit addiert.</dd>
+ <dt><code>secondsValue</code></dt>
+ <dd>Optional. Eine ganze Zahl zwischen 0 und 59, die die Sekunden repräsentiert. Wenn der Wert größer als 59 ist, werden die extra Sekunden auf die Zeit addiert. Wenn <code>secondsValue</code> angegeben ist, muss auch <code>minutesValue</code> angegeben werden.</dd>
+ <dt><code>msValue</code></dt>
+ <dd>Optional. Eine ganze Zahl zwischen 0 und 999, die die Millisekunden repräsentiert. Wenn der Wert größer als 999 ist, werden die extra Millisekunden auf die Zeit addiert. Wenn der <code>msValue</code> Parameter angegeben ist, müssen auch die <code>minutesValue</code> und <code>secondsValue</code> Parameter angegeben werden.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Die Anzahl der Millisekunden zwischen dem 1. Januar 1970 UTC und dem geänderten date Objekte</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Wenn die Parameter <code>minutesValue</code>, <code>secondsValue</code>, und <code>msValue</code> nicht angegeben werden, werden die Rückgabewerte der Methoden {{jsxref("Date.prototype.getMinutes()", "getMinutes()")}}, {{jsxref("Date.prototype.getSeconds()", "getSeconds()")}} und {{jsxref("Date.prototype.getMilliseconds()", "getMilliseconds()")}} genutzt.</p>
+
+<p>Wenn ein Parameter einen Wert außerhalb seiner Grenzen hat, wird <code>setHours()</code> das Informationen im {{jsxref("Date")}} Objekt dementsprechend ändern. Wenn zum Beispiel der Wert 100 für den Parameter <code>secondsValue</code> angegeben wird, wird die Minute um 1 inkrementiert und die Sekunden bekommen den Wert 40.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_setHours()">Einsatz von <code>setHours()</code></h3>
+
+<pre class="brush:js">var theBigDay = new Date();
+theBigDay.setHours(7);
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.34', 'Date.prototype.setHours')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.sethours', 'Date.prototype.setHours')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.sethours', 'Date.prototype.setHours')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.setHours")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getHours()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCHours()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/setmilliseconds/index.html b/files/de/web/javascript/reference/global_objects/date/setmilliseconds/index.html
new file mode 100644
index 0000000000..51f2e069ab
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/setmilliseconds/index.html
@@ -0,0 +1,90 @@
+---
+title: Date.prototype.setMilliseconds()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setMilliseconds
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMilliseconds
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>setMilliseconds()</code></strong> Methode setzt die Millisekunden einer Zeit bezüglich der Ortszeit.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-setmilliseconds.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.setMilliseconds(<var>millisecondsValue</var>)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>millisecondsValue</code></dt>
+ <dd>Eine ganze Zahl zwischen 0 und 999, welche die Millisekunden repräsentiert.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Die Anzahl der Millisekunden zwischen dem 1. Januar 1970 00:00:00 UTC und dem geänderten date Objekt.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Wenn der Parameter außerhalb seiner Grenzen definiert wird, wird diese Information bei der änderung des {{jsxref("Date")}} Objektes beachtet. Wenn zum Beispiel 1005 übergeben wird, wird die Sekunde um 1 inkrementiert und die Millisekunden werden auf 5 gesetzt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_setMilliseconds()">Einsatz von <code>setMilliseconds()</code></h3>
+
+<pre class="brush: js">var theBigDay = new Date();
+theBigDay.setMilliseconds(100);
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.28', 'Date.prototype.setMilliseconds')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setmilliseconds', 'Date.prototype.setMilliseconds')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setmilliseconds', 'Date.prototype.setMilliseconds')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.setMilliseconds")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getMilliseconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCMilliseconds()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/setminutes/index.html b/files/de/web/javascript/reference/global_objects/date/setminutes/index.html
new file mode 100644
index 0000000000..75918fb16b
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/setminutes/index.html
@@ -0,0 +1,100 @@
+---
+title: Date.prototype.setMinutes()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setMinutes
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMinutes
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>setMinutes()</code></strong> Methode setzt die Minuten für ein Datum (Zeit) bezüglich der Ortszeit</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-setminutes.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.setMinutes(<var>minutesValue</var>[, <var>secondsValue</var>[, <var>msValue</var>]])</code></pre>
+
+<h3 id="Versionen_vor_JavaScript_1.3">Versionen vor JavaScript 1.3</h3>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.setMinutes(<var>minutesValue</var>)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>minutesValue</code></dt>
+ <dd>Eine ganze Zahl zwischen 0 und 59, die die Minuten repräsentiert.</dd>
+ <dt><code>secondsValue</code></dt>
+ <dd>Optional. Eine ganze Zahl zwischen 0 und 59, die die Sekunden repräsentiert.</dd>
+ <dt><code>msValue</code></dt>
+ <dd>Optional. Eine ganze Zahl zwischen 0 und 999, die die Millisekunden repräsentiert. Wenn der Parameter <code>msValue</code> angegeben ist, muss auch der Parameter <code>secondsValue</code> angegeben werden.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Die Anzahl der Millisekunden zwischen dem 1. Januar 1970 00:00:00 UTC und dem geänderten date Objekt.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Wenn die Parameter <code>secondsValue</code> and <code>msValue</code> nicht angegeben werden, wird die Rückgabewerte der Methoden {{jsxref("Date.prototype.getSeconds()", "getSeconds()")}} und {{jsxref("Date.prototype.getMilliseconds()", "getMilliseconds()")}} eingesetzt.</p>
+
+<p>Wenn der Wert eines Parameters außerhalb seiner Grenzen liegt, wird dieses von der <code>setMinutes()</code> Methode berücksichtigt. Wenn zum Beispiel 100 für den Parameter <code>secondsValue</code> genutzt wird, werden die Minuten um 1 inkrementiert und die Sekunden werden auf 40 gesetzt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_setMinutes()">Einsatz von <code>setMinutes()</code></h3>
+
+<pre class="brush: js">var theBigDay = new Date();
+theBigDay.setMinutes(45);
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.32', 'Date.prototype.setMinutes')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setminutes', 'Date.prototype.setMinutes')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setminutes', 'Date.prototype.setMinutes')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.setMinutes")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getMinutes()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCMinutes()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/setmonth/index.html b/files/de/web/javascript/reference/global_objects/date/setmonth/index.html
new file mode 100644
index 0000000000..02d659ad50
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/setmonth/index.html
@@ -0,0 +1,103 @@
+---
+title: Date.prototype.setMonth()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setMonth
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMonth
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>setMonth()</code></strong> Methode setzt den Monat eines Datums bezüglich des aktuellen Jahres.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-setmonth.html")}}</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.setMonth(<var>monthValue</var>[, <var>dayValue</var>])</code></pre>
+
+<h3 id="Versionen_vor_JavaScript_1.3">Versionen vor JavaScript 1.3</h3>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.setMonth(<var>monthValue</var>)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>monthValue</code></dt>
+ <dd>Eine ganze Zahl zwischen 0 und 11, die die Monate Januar bis Dezember repräsentiert.</dd>
+ <dt><code>dayValue</code></dt>
+ <dd>Optional. Eine ganze Zahl zwischen 1 und 31, die die Tage eines Monats repräsentiert.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Die Anzahl der Millisekunden zwischen dem 1. Januar 1970 00:00:00 UTC und dem geänderten date Objekt.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Wenn der <code>dayValue</code> Parameter nicht gesetzt wird, bekommt er den Rückgabewert der {{jsxref("Date.prototype.getDate()", "getDate()")}} Methode.</p>
+
+<p>Wenn ein Parameter mit einem Wert außerhalb seiner Grenzen übergebn wird, berücksichtigt die  <code>setMonth()</code> Methode diese Information in dem {{jsxref("Date")}} Objekt. Wird zum Beispiel der Wert 15 für den <code>monthValue</code> Parameter übergeben, so wird das Jahr um 1 inkrementiert und der Monat auf dem Wert 3 gesetzt.</p>
+
+<p>Der aktuelle Tag des Monats hat einen Einfluss auf diese Methode. Konzeptionell wird die Anzahl der Tage des aktuellen Monats hinzugefügt, um zum 1. des neuen Monats zu bekommen. Wird zum Beispiel auf dem 31. August 2016 setMonth mit dem Wert 1 aufgerufen, so wird der 2. März 2016 zurückgegeben. Dieses liegt daran, dass der Februar im Jahr 2016 nur 29 Tage hat.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_setMonth()">Einsatz von <code>setMonth()</code></h3>
+
+<pre class="brush: js">var theBigDay = new Date();
+theBigDay.setMonth(6);
+
+//Achtet auf die Übergänge am Ende des Monats
+var endOfMonth = new Date(2016, 7, 31);
+endOfMonth.setMonth(1);
+console.log(endOfMonth); //Wed Mar 02 2016 00:00:00
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.38', 'Date.prototype.setMonth')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setmonth', 'Date.prototype.setMonth')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setmonth', 'Date.prototype.setMonth')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.setMonth")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getMonth()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCMonth()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/setseconds/index.html b/files/de/web/javascript/reference/global_objects/date/setseconds/index.html
new file mode 100644
index 0000000000..9a10f186ec
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/setseconds/index.html
@@ -0,0 +1,98 @@
+---
+title: Date.prototype.setSeconds()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setSeconds
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setSeconds
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>setSeconds()</code></strong> Methode setzt die Sekunden eines Datums bezüglich der Ortzseit.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-setseconds.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.setSeconds(<var>secondsValue</var>[, <var>msValue</var>])</code></pre>
+
+<h3 id="Versionen_vor_JavaScript_1.3">Versionen vor JavaScript 1.3</h3>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.setSeconds(<var>secondsValue</var>)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>secondsValue</code></dt>
+ <dd>Eine ganze Zahl  zwischen 0 und 59, die die Sekunden repräsentiert.</dd>
+ <dt><code>msValue</code></dt>
+ <dd>Optional. Eine ganze Zahl zwischen 0 und 999, die die Millisekunden repräsentiert.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Die Anzahl der Millisekunden zwischen dem 1. Januar 1970 00:00:00 UTC und dem geänderten date Objekt.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Wenn der Parameter <code>msValue</code> nicht gesetzt ist, wird der Rückgabewert der Methode {{jsxref("Date.prototype.getMilliseconds()", "getMilliseconds()")}} eingesetzt.</p>
+
+<p>Wenn der Wert eines Parameters seine Grenzen überschreitet, wird die <code>setSeconds()</code> Methode diese Information in dem {{jsxref("Date")}} Objekt berücksichtigen. Wenn zum Beispiel für den Parameter <code>secondsValue</code> der Wert 100 benutzt wird, werden die Minuten um 1 inkrementiert und und für die Sekunden wird der Wert 40 benutzt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_setSeconds()">Einsatz von <code>setSeconds()</code></h3>
+
+<pre class="brush: js">var theBigDay = new Date();
+theBigDay.setSeconds(30);
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.30', 'Date.prototype.setSeconds')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setseconds', 'Date.prototype.setSeconds')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setseconds', 'Date.prototype.setSeconds')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.setSeconds")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getSeconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCSeconds()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/settime/index.html b/files/de/web/javascript/reference/global_objects/date/settime/index.html
new file mode 100644
index 0000000000..aaf72c378a
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/settime/index.html
@@ -0,0 +1,91 @@
+---
+title: Date.prototype.setTime()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setTime
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setTime
+---
+<div>{{JSRef}}</div>
+
+<p>Die Methode <strong><code>setTime()</code></strong> setzt das {{jsxref("Date")}} Objekt auf die Zeit, die durch eine Anzahl Millisekunden seit dem 1. Januar 1970, 00:00:00 UTC angegeben wird.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-settime.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.setTime(<var>timeValue</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parameter</h3>
+
+<dl>
+ <dt><code>timeValue</code></dt>
+ <dd>Ein integer, der die Anzahl Millisekunden seit dem 1. Januar 1970, 00:00:00 UTC angibt.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Die Anzahl der Millisekunden zwischen dem 1. Januar 1970 00:00:00 UTC und dem geänderten date Objekt (effektiv dem Wert des übergebenen Parameters).</p>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p>Die Methode <code>setTime()</code> ist hilfreich, um Datum und Zeit einem anderen {{jsxref("Date")}} Objekt zuzuweisen.</p>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<h3 id="Example:_Using_setTime" name="Example:_Using_setTime">Einsatz von <code>setTime()</code></h3>
+
+<pre class="brush: js">var theBigDay = new Date('July 1, 1999');
+var sameAsBigDay = new Date();
+sameAsBigDay.setTime(theBigDay.getTime());
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Erste Definition. Implementiert JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.27', 'Date.prototype.setTime')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.settime', 'Date.prototype.setTime')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.settime', 'Date.prototype.setTime')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.setTime")}}</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getTime()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCHours()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/setutcdate/index.html b/files/de/web/javascript/reference/global_objects/date/setutcdate/index.html
new file mode 100644
index 0000000000..15f05b5109
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/setutcdate/index.html
@@ -0,0 +1,90 @@
+---
+title: Date.prototype.setUTCDate()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCDate
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCDate
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>setUTCDate()</code></strong> Methode setzt den Monatstag eines Datums bezüglich der Weltzeit.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-setutcdate.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.setUTCDate(<var>dayValue</var>)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>dayValue</code></dt>
+ <dd>Eine ganze Zahl zwischen 1 und 31, die die Date eines Monats repräsentiert.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Die Anzahl der Millisekunden zwischen dem 1. Januar 1970 00:00:00 UTC und dem aktualisierten date Objekte.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Wenn ein Parameter außerhalb seiner spezifizierten Grenzen liegt, berücksichtigt die <code>setUTCDate()</code> Methode diese Information beim aktualisieren eines {{jsxref("Date")}} Objektes. Wenn zum Beispiel 40  für <code>dayValue</code> angegeben wird, so wird ein {{jsxref("Date")}} Objekt mit dem Monat Juni auf den Tag 10 und den Monat Juli (Monat um 1 inkrementiert) aktualisiert.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_setUTCDate()">Einsatz von <code>setUTCDate()</code></h3>
+
+<pre class="brush: js">var theBigDay = new Date();
+theBigDay.setUTCDate(20);
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.37', 'Date.prototype.setUTCDate')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setutcdate', 'Date.prototype.setUTCDate')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setutcdate', 'Date.prototype.setUTCDate')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.setUTCDate")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCDate()")}}</li>
+ <li>{{jsxref("Date.prototype.setDate()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/setutcfullyear/index.html b/files/de/web/javascript/reference/global_objects/date/setutcfullyear/index.html
new file mode 100644
index 0000000000..c901540225
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/setutcfullyear/index.html
@@ -0,0 +1,96 @@
+---
+title: Date.prototype.setUTCFullYear()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCFullYear
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCFullYear
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>setUTCFullYear()</code></strong> Methode setzt das volle Jahr für ein Datum bezüglich der Weltzeit.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-setutcfullyear.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.setUTCFullYear(<var>yearValue</var>[, <var>monthValue</var>[, <var>dayValue</var>]])</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>yearValue</code></dt>
+ <dd>Eine ganze Zahl, die das Jahr repräsentiert (z. B. 1995).</dd>
+ <dt><code>monthValue</code></dt>
+ <dd>Optional. Eine ganze Zahl zwischen 0 und 11, die die Monate Januar bis Dezember repräsentiert.</dd>
+ <dt><code>dayValue</code></dt>
+ <dd>Optional. Eine ganze Zahl zwischen 1 und 31, die den Tag eines Monats repräsentiert. Wenn <code>dayValue</code> benutzt wird, muss auch der Parameter <code>monthValue</code> benutzt werden.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Die Anzahl der Millisekunden zwischen dem 1. Januar 1970 00:00:00 UTC und dem aktualisierten date Objekte.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Wenn die Parameter <code>monthValue</code> und <code>dayValue</code> nicht angegeben werden, so werden für diese die Rückgabewerte der Methoden {{jsxref("Date.prototype.getUTCMonth()", "getUTCMonth()")}} und {{jsxref("Date.prototype.getUTCDate()", "getUTCDate()")}} benutzt.</p>
+
+<p>Wenn ein Parameter außerhalb seiner spezifizierten Grenzen liegt, berücksichtigt die <code>setUTCFullYear()</code> Methode diese Information beim aktualisieren eines {{jsxref("Date")}} Objektes. Wenn zum Beispiel 15  für <code>monthValue</code> angegeben wird, so wird das Jahr um 1 inkrementiert (<code>yearValue + 1</code>) und der Monat wird auf 3 gesetzt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_setUTCFullYear()">Einsatz von <code>setUTCFullYear()</code></h3>
+
+<pre class="brush: js">var theBigDay = new Date();
+theBigDay.setUTCFullYear(1997);
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.41', 'Date.prototype.setUTCFullYear')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setutcfullyear', 'Date.prototype.setUTCFullYear')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setutcfullyear', 'Date.prototype.setUTCFullYear')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.setUTCFullYear")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setFullYear()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/setutchours/index.html b/files/de/web/javascript/reference/global_objects/date/setutchours/index.html
new file mode 100644
index 0000000000..6194eceb91
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/setutchours/index.html
@@ -0,0 +1,98 @@
+---
+title: Date.prototype.setUTCHours()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCHours
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCHours
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>setUTCHours()</code></strong> Methode setzt die Stunde eines Datums (mit Zeit) bezüglich der Weltzeit und gibt die Anzahl der Millisekunden seit dem 1. Januar 1970 00:00:00 UTC nach dem Aktualisieren der {{jsxref("Date")}} Instanz zurück-</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-setutchours.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.setUTCHours(<var>hoursValue</var>[, <var>minutesValue</var>[, <var>secondsValue</var>[, <var>msValue</var>]]])</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>hoursValue</code></dt>
+ <dd>Eine ganze Zahl zwischen 0 und 23, die die Stunden repräsentiert.</dd>
+ <dt><code>minutesValue</code></dt>
+ <dd>Optional. Eine ganze Zahl zwischen 0 and 59, die die Minuten repräsentiert.</dd>
+ <dt><code>secondsValue</code></dt>
+ <dd>Optional. Eine ganze Zahl zwischen 0 and 59, die die Sekunden repräsentiert. Wenn der <code>secondsValue</code> Parameter angegeben wird, muss auch der <code>minutesValue</code> Parameter angegeben werden.</dd>
+ <dt><code>msValue</code></dt>
+ <dd>Optional. Eine ganze Zahl zwischen 0 and 999, die die Millisekunden repräsentiert. Wenn der <code>msValue</code> Parameter angegeben ist, müssen auch die Parameter <code>minutesValue</code> und <code>secondsValue</code> angegeben werden.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Die Anzahl der Millisekunden zwischen dem 1. Januar 1970 00:00:00 UTC und dem aktualisierten date Objekte.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Wenn die Parameter <code>minutesValue</code>, <code>secondsValue</code>, und <code>msValue</code> nicht angegeben werden, wird für diese der Rückgabewert der Methoden {{jsxref("Date.prototype.getUTCMinutes()", "getUTCMinutes()")}}, {{jsxref("Date.prototype.getUTCSeconds()", "getUTCSeconds()")}}, und {{jsxref("Date.prototype.getUTCMilliseconds()", "getUTCMilliseconds()")}} verwendet.</p>
+
+<p>Wenn ein Parameter außerhalb seiner Grenzen angegeben wird, wird die <code>setUTCHours()</code> Methode diese Information beim aktualisieren des {{jsxref("Date")}} Objektes berücksichtigen. Wenn zum Beispiel 100 für den <code>secondsValue</code> Parameter genutzt wird, werden die Minuten um 1 inkrementiert (<code>minutesValue + 1</code>) und der Wert 40 wird für die Sekunden verwendet.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_setUTCHours()">Einsatz von <code>setUTCHours()</code></h3>
+
+<pre class="brush: js">var theBigDay = new Date();
+theBigDay.setUTCHours(8);
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.35', 'Date.prototype.setUTCHours')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setutchours', 'Date.prototype.setUTCHours')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setutchours', 'Date.prototype.setUTCHours')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.setUTCHours")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCHours()")}}</li>
+ <li>{{jsxref("Date.prototype.setHours()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/setutcmilliseconds/index.html b/files/de/web/javascript/reference/global_objects/date/setutcmilliseconds/index.html
new file mode 100644
index 0000000000..14cbca2f90
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/setutcmilliseconds/index.html
@@ -0,0 +1,90 @@
+---
+title: Date.prototype.setUTCMilliseconds()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCMilliseconds
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCMilliseconds
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>setUTCMilliseconds()</code></strong> Methode setzt die Millisekunden eines Datums bezüglich der Weltzeit</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-setutcmilliseconds.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.setUTCMilliseconds(<var>millisecondsValue</var>)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>millisecondsValue</code></dt>
+ <dd>Eine Zahl zwischen 0 und 999, die die Millisekunden repräsentiert.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Die Anzahl der Millisekunden zwischen dem 1. Januar 1970 00:00:00 UTC und dem aktualisierten date Objekte.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Wenn ein Parameter außerhalb seiner spezifizierten Grenzen liegt, berücksichtigt die <code>setUTCMilliseconds</code><code>()</code> Methode diese Information beim aktualisieren eines {{jsxref("Date")}} Objektes. Wenn zum Beispiel 1100 für <code>millisecondsValue</code> angegeben wird, so werden die Sekunden um 1 inkrementiert und die Millisekunden werden auf 100 gesetzt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_setUTCMilliseconds()">Einsatz von <code>setUTCMilliseconds()</code></h3>
+
+<pre class="brush: js">var theBigDay = new Date();
+theBigDay.setUTCMilliseconds(500);
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.29', 'Date.prototype.setUTCMilliseconds')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setutcmilliseconds', 'Date.prototype.setUTCMilliseconds')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setutcmilliseconds', 'Date.prototype.setUTCMilliseconds')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.setUTCMilliseconds")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCMilliseconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setMilliseconds()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/setutcminutes/index.html b/files/de/web/javascript/reference/global_objects/date/setutcminutes/index.html
new file mode 100644
index 0000000000..b56abc94d6
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/setutcminutes/index.html
@@ -0,0 +1,96 @@
+---
+title: Date.prototype.setUTCMinutes()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCMinutes
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCMinutes
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>setUTCMinutes()</code></strong> Methode setzt die Minuten eines Datums bezüglich der Weltzeit.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-setutcminutes.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.setUTCMinutes(<var>minutesValue</var>[, <var>secondsValue</var>[, <var>msValue</var>]])</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>minutesValue</code></dt>
+ <dd>Eine ganze Zahl zwischen 0 und 59, die die Minuten repräsentiet.</dd>
+ <dt><code>secondsValue</code></dt>
+ <dd>Optional. Eine ganze Zahl zwischen 0 und 59, die die Sekunden repräsentiert.</dd>
+ <dt><code>msValue</code></dt>
+ <dd>Optional. Eine ganze Zahl zwischen 0 und 999, die die Millisekunden repräsentiert. Wenn der Parameter <code>msValue</code> angegeben wird, muss auch der Parameter <code>secondsValue</code> gesetzt werden.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Die Anzahl der Millisekunden zwischen dem 1. Januar 1970 00:00:00 UTC und dem aktualisierten date Objekte.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Wenn die Parameter <code>secondsValue</code> und <code>msValue</code> nicht angegeben werden, so werden für diese die Rückgabewerte der Methoden {{jsxref("Date.prototype.getUTCSeconds()", "getUTCSeconds()")}} und {{jsxref("Date.prototype.getUTCMilliseconds()", "getUTCMilliseconds()")}} benutzt.</p>
+
+<p>Wenn ein Parameter außerhalb seiner spezifizierten Grenzen liegt, berücksichtigt die <code>setUTCMinutes</code><code>()</code> Methode diese Information beim aktualisieren eines {{jsxref("Date")}} Objektes. Wenn zum Beispiel 100  für <code>secondsValue</code> angegeben wird, so werden die Minuten um 1 inkrementiert  (<code>minutesValue + 1</code>) und die Sekunden werden auf 40 gesetzt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_setUTCMinutes()">Einsatz von <code>setUTCMinutes()</code></h3>
+
+<pre class="brush: js">var theBigDay = new Date();
+theBigDay.setUTCMinutes(43);
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.33', 'Date.prototype.setUTCMinutes')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setutcminutes', 'Date.prototype.setUTCMinutes')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setutcminutes', 'Date.prototype.setUTCMinutes')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.setUTCMinutes")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCMinutes()")}}</li>
+ <li>{{jsxref("Date.prototype.setMinutes()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/setutcmonth/index.html b/files/de/web/javascript/reference/global_objects/date/setutcmonth/index.html
new file mode 100644
index 0000000000..d4f393051d
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/setutcmonth/index.html
@@ -0,0 +1,94 @@
+---
+title: Date.prototype.setUTCMonth()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCMonth
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCMonth
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>setUTCMonth()</code></strong> Methode setzt den Monat eines Datums bezüglich der Weltzeit.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-setutcmonth.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.setUTCMonth(<var>monthValue</var>[, <var>dayValue</var>])</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>monthValue</code></dt>
+ <dd>Eine ganze Zahl zwischen 0 und 11, die die Monate Januar bis Dezember repräsentiert.</dd>
+ <dt><code>dayValue</code></dt>
+ <dd>Optional. Eine ganze Zahl zwischen 1 und 31, die den Tag eines Monats repräsentiert.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Die Anzahl der Millisekunden zwischen dem 1. Januar 1970 00:00:00 UTC und dem aktualisierten date Objekte.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Wenn die Parameter <code>dayValue</code> nicht angegeben werden, so wird für diesen der Rückgabewert der Methode {{jsxref("Date.prototype.getUTCDate()", "getUTCDate()")}} benutzt.</p>
+
+<p>Wenn ein Parameter außerhalb seiner spezifizierten Grenzen liegt, berücksichtigt die <code>setUTCMonth()</code> Methode diese Information beim aktualisieren eines {{jsxref("Date")}} Objektes. Wenn zum Beispiel 15  für <code>monthValue</code> angegeben wird, so wird das Jahr um 1 inkrementiert und der Monat wird auf 3 gesetzt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_setUTCMonth()">Einsatz von <code>setUTCMonth()</code></h3>
+
+<pre class="brush: js">var theBigDay = new Date();
+theBigDay.setUTCMonth(11);
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.39', 'Date.prototype.setUTCMonth')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setutcmonth', 'Date.prototype.setUTCMonth')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setutcmonth', 'Date.prototype.setUTCMonth')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.setUTCMonth")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCMonth()")}}</li>
+ <li>{{jsxref("Date.prototype.setMonth()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/setutcseconds/index.html b/files/de/web/javascript/reference/global_objects/date/setutcseconds/index.html
new file mode 100644
index 0000000000..52ce280245
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/setutcseconds/index.html
@@ -0,0 +1,94 @@
+---
+title: Date.prototype.setUTCSeconds()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCSeconds
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCSeconds
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>setUTCSeconds()</code></strong> Methode setzt die Sekunden eines Datums bezüglich der Weltzeit.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-setutcseconds.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.setUTCSeconds(<var>secondsValue</var>[, <var>msValue</var>])</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>secondsValue</code></dt>
+ <dd>Eine ganze Zahl zwischen 0 und 59, die die Sekunden repräsentiert.</dd>
+ <dt><code>msValue</code></dt>
+ <dd>Optional. Eine ganze Zahl zwische 0 und 999, die die Millisekunden repräsentiert.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Die Anzahl der Millisekunden zwischen dem 1. Januar 1970 00:00:00 UTC und dem aktualisierten date Objekte.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Wenn der Parameter <code>msValue</code> nicht angegeben wird, so wird für diesen der Rückgabewert der Methode {{jsxref("Date.prototype.getUTCMilliseconds()", "getUTCMilliseconds()")}} benutzt.</p>
+
+<p>Wenn ein Parameter außerhalb seiner spezifizierten Grenzen liegt, berücksichtigt die <code>setUTCSeconds</code><code>()</code> Methode diese Information beim aktualisieren eines {{jsxref("Date")}} Objektes. Wenn zum Beispiel 100  für <code>secondsValue</code> angegeben wird, so werden die Minuten um 1 inkrementiert und die Sekunden werden auf 40 gesetzt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_setUTCSeconds()">Einsatz von <code>setUTCSeconds()</code></h3>
+
+<pre class="brush: js">var theBigDay = new Date();
+theBigDay.setUTCSeconds(20);
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.31', 'Date.prototype.setUTCSeconds')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setutcseconds', 'Date.prototype.setUTCSeconds')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setutcseconds', 'Date.prototype.setUTCSeconds')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.setUTCSeconds")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCSeconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setSeconds()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/setyear/index.html b/files/de/web/javascript/reference/global_objects/date/setyear/index.html
new file mode 100644
index 0000000000..8eb3627370
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/setyear/index.html
@@ -0,0 +1,96 @@
+---
+title: Date.prototype.setYear()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setYear
+tags:
+  - Date
+  - Deprecated
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setYear
+---
+<div>{{JSRef}} {{deprecated_header}}</div>
+
+<div>Die <strong><code>setYear()</code></strong> Methode setzt das Jahr für eine Datum bezüglich der Ortszeit. Weil <code>setYear()</code> nicht das volle Jahr setzt ("Jahr 2000 Probem"), wird es nicht länger eingesetzt und wird von der Methode {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}} ersetzt. </div>
+
+<div> </div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.setYear(<var>yearValue</var>)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>yearValue</code></dt>
+ <dd>Eine ganze Zahl.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Die Anzahl der Millisekunden zwischen dem 1. Januar 1970 00:00:00 UTC und dem geänderten date Objekt.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Wenn <code>yearValue</code> eine Nummer zwische 0 und 99 (inklusiv) ist, wird das Jahr eines {{jsxref("date")}} Objekt mit dem Wert <code>1900 + yearValue</code> gesetzt. Ansernfalls wird das Jahr des Objektes mit dem Wert  <code>yearValue</code> gesetzt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_setYear()">Einsatz von <code>setYear()</code></h3>
+
+<p>Die ersten beiden Zeilen setzen das Jahr auf 1996. Die dritte Zeile setzt das Jahr auf 2000</p>
+
+<pre class="brush: js">var theBigDay = new Date();
+
+theBigDay.setYear(96);
+theBigDay.setYear(1996);
+theBigDay.setYear(2000);
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-B.2.5', 'Date.prototype.setYear')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definiert in dem (informativen) Kompatibilitäts-Anhang</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setyear', 'Date.prototype.setYear')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td><span id="result_box" lang="de"><span>Definiert in</span> dem <span>(normativ)</span> <span>Anhang</span> <span>für</span> <span>zusätzliche Funktionen</span> <span>für Web-Browser</span><span>.</span></span></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setyear', 'Date.prototype.setYear')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td><span id="result_box" lang="de"><span>Definiert in</span> dem <span>(normativ)</span> <span>Anhang</span> <span>für</span> <span>zusätzliche Funktionen</span> <span>für Web-Browser</span><span>.</span></span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.setYear")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCFullYear()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/todatestring/index.html b/files/de/web/javascript/reference/global_objects/date/todatestring/index.html
new file mode 100644
index 0000000000..00440243e6
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/todatestring/index.html
@@ -0,0 +1,92 @@
+---
+title: Date.prototype.toDateString()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toDateString
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toDateString
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>toDateString()</code></strong> Methode gibt den Datumsteil eines {{jsxref("Date")}} Objektes für Menschen lesbar,  im amerikanisch-englischen Format, zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-todatestring.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.toDateString()</code></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein String, der den Datumsteil des gegebenen {{jsxref("Date")}} Objektes für menschen lesbar im amerikanisch-englischen Format enthält</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>{{jsxref("Date")}} Instanzen referenzieren einen spezifischen Zeitpunkt. Mit dem Aufruf von {{jsxref("Date.prototype.toString()", "toString()")}} wird dieser Zeitpunkt für Menschen lesbar, im amerikanisch-englischen Format, zurückgegeben. In <a href="/de/docs/SpiderMonkey">SpiderMonkey</a> enthält diese Format den Datumsteil (Tag, Monat und Jahr) gefolgt von dem Zeitteil (Stunden, Minuten, Sekunden und Zeitzone). Manchmal ist es erwünscht, nur die Zeit zu bekommen. In diesen Fällten wird die <code>toTimeString()</code> Methode eingesetzt.</p>
+
+<p>Die <code>toDateString()</code> Methode ist besonders nützlich, weil JavaScript-Umgebungen die <a href="/en-US/docs/ECMAScript">ECMA-262</a> implementieren. manchmal unterschiedliche Ergebnisse bei der Ausführung der {{jsxref("Date.prototype.toString()", "toString()")}} Methode eines {{jsxref("Date")}} Objektes liefern. Dieses liegt daran, weil das zurückgegebene Format der {{jsxref("Date.prototype.toString()", "toString()")}} Methode implementierungsabhängig ist, über mehrere Plattformen hinweg zu inkonsistenten Ergebnissen führen kann.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_toDateString()">Einsatz von <code>toDateString()</code></h3>
+
+<pre class="brush: js">var d = new Date(1993, 5, 28, 14, 39, 7);
+
+console.log(d.toString());     // logs Wed Jun 28 1993 14:39:07 GMT-0600 (PDT)
+console.log(d.toDateString()); // logs Wed Jun 28 1993
+</pre>
+
+<div class="note">
+<p><strong>Anmerkung:</strong> Der Monat ist 0-basiert wenn er als Argument in {{jsxref("Date")}} benutzt wird (0 entspricht Januar und 11 entspricht Dezember).</p>
+</div>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.3', 'Date.prototype.toDateString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.todatestring', 'Date.prototype.toDateString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.todatestring', 'Date.prototype.toDateString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.toDateString")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toTimeString()")}}</li>
+ <li>{{jsxref("Date.prototype.toString()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/togmtstring/index.html b/files/de/web/javascript/reference/global_objects/date/togmtstring/index.html
new file mode 100644
index 0000000000..c80dfdc5b9
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/togmtstring/index.html
@@ -0,0 +1,87 @@
+---
+title: Date.prototype.toGMTString()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toGMTString
+tags:
+  - Date
+  - Deprecated
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toGMTString
+---
+<div>{{JSRef}} {{deprecated_header}}</div>
+
+<div>Die <strong><code>toGMTString()</code></strong> Methode konvertiert ein Datum in ein String unter Benutzung der mittleren Greenwich Zeit. Das exakte Format des Rückgabewertes der <code>toGMTString()</code> Methode variierte von Browser zu Browser. Generel wird ein für Menschen lesbarer String zurückgegeben.</div>
+
+<div> </div>
+
+<div>{{noteStart}}<code>toGMTString()</code> ist deprecated und sollte nicht mehr benutzt werden. Es ist nur noch für die Rückwärtskompatibilität vorhanden; nutzt stattdessen {{jsxref("Date.prototype.toUTCString()", "toUTCString()")}}{{noteEnd}}</div>
+
+<div> </div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.toGMTString()</code></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Einen String, der das gegebene {{jsxref("Date")}} Objekt nach den Internet Greenwich Mean Zeit (GMT) Konventionen repräsentiert.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einfaches_Beispiel">Einfaches Beispiel</h3>
+
+<p>In diesem Beispiel konvertiert die <code>toGMTString()</code> Methode das {{jsxref("date")}} Objekt zu einem String mit der GMT (UTC) unter benutzung der Systemzeitzone. Die exakte Formatierung des String hängt von der Implementierung ab.</p>
+
+<pre class="brush: js">var today = new Date();
+var str = today.toGMTString();  // deprecated! use toUTCString()
+
+console.log(str);               // Mon, 18 Dec 1995 17:28:35 GMT
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition, aber schon als deprecated markiert. Implementiert in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-B.2.6', 'Date.prototype.toGMTString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Im (informativen) Anhang B "Compatibility" definiert.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.togmtstring', 'Date.prototype.toGMTString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Im (normativen) Anhang B "Additional ECMAScript Features for Web Browsers" definiert.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.togmtstring', 'Date.prototype.toGMTString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Im (normativen) Anhang B "Additional ECMAScript Features for Web Browsers" definiert.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.toGMTString")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toTimeString()")}}</li>
+ <li>{{jsxref("Date.prototype.toUTCString()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/toisostring/index.html b/files/de/web/javascript/reference/global_objects/date/toisostring/index.html
new file mode 100644
index 0000000000..8d84d65c3c
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/toisostring/index.html
@@ -0,0 +1,109 @@
+---
+title: Date.prototype.toISOString()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toISOString
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toISOString
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>toISOString()</code></strong> Methode gibt einen String im einfach erweitertem ISO format (<a href="http://en.wikipedia.org/wiki/ISO_8601">ISO 8601</a>) zurück, welcher immer 24 oder 27 Zeichen lang ist (<strong><code>YYYY-MM-DDTHH:mm:ss.sssZ</code></strong> oder <strong><code>±YYYYYY-MM-DDTHH:mm:ss.sssZ</code></strong>). Die Zeitzone ist immer 0 UTC, wie es durch den Suffix "<code>Z</code>" angedeutet wird.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-toisostring.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.toISOString()</code>
+</pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein String, der das gegebene {{jsxref("Date")}} Objekt im <a href="http://en.wikipedia.org/wiki/ISO_8601">ISO 8601</a> Format bezüglich der Weltzeit (UTC) repräsentiert.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Using_toISOString()">Using <code>toISOString()</code></h3>
+
+<pre class="brush: js">var today = new Date('05 October 2011 14:48 UTC');
+
+console.log(today.toISOString()); // Returns 2011-10-05T14:48:00.000Z
+</pre>
+
+<p>Das obere Beispiel nutzt das Einlesen eines nicht standartisierten String Wert, welcher in nicht-Mozilla Browsern manchmal nicht richtig eingelesen wird.</p>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Die Methode wurde in ECMA-262 5th edition standartisiert. In Umgebungen, die diese Methode nicht unterstützen (z. B. weil sie nicht aktualisiert werden), kann folgende Methode genutzt werden:</p>
+
+<pre class="brush: js">if (!Date.prototype.toISOString) {
+  (function() {
+
+    function pad(number) {
+      if (number &lt; 10) {
+        return '0' + number;
+      }
+      return number;
+    }
+
+    Date.prototype.toISOString = function() {
+      return this.getUTCFullYear() +
+        '-' + pad(this.getUTCMonth() + 1) +
+        '-' + pad(this.getUTCDate()) +
+        'T' + pad(this.getUTCHours()) +
+        ':' + pad(this.getUTCMinutes()) +
+        ':' + pad(this.getUTCSeconds()) +
+        '.' + (this.getUTCMilliseconds() / 1000).toFixed(3).slice(2, 5) +
+        'Z';
+    };
+
+  }());
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.43', 'Date.prototype.toISOString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.8.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.toisostring', 'Date.prototype.toISOString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.toisostring', 'Date.prototype.toISOString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.toISOString")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toTimeString()")}}</li>
+ <li>{{jsxref("Date.prototype.toUTCString()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/tojson/index.html b/files/de/web/javascript/reference/global_objects/date/tojson/index.html
new file mode 100644
index 0000000000..1d65876585
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/tojson/index.html
@@ -0,0 +1,81 @@
+---
+title: Date.prototype.toJSON()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toJSON
+tags:
+  - Date
+  - JavaScript
+  - Methode(2)
+  - Prototype
+  - Referenz
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toJSON
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>toJSON()</code></strong> Methode gibt einen String zurück, der das {{jsxref("Date")}} Objekt darstellt.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-tojson.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.toJSON()</code></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein String, der das gegebene date Objekt repräsentiert.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>{{jsxref("Date")}} Instanzen repräsentieren einen bestimmten Zeitpunkt. Ein Aufruf von <code>toJSON()</code> gibt unter Verwendung von {{jsxref("Date.prototype.toISOString()", "toISOString()")}} einen String zurück, der den Wert des {{jsxref("Date")}} Objekts darstellt. Diese Methode ist dafür vorgesehen, {{jsxref("Date")}} Objekte während der {{Glossary("JSON")}} Serialisierung standardisiert zu serialisieren.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_toJSON()">Einsatz von <code>toJSON()</code></h3>
+
+<pre class="brush:js">var jsonDate = (new Date()).toJSON();
+var backToDate = new Date(jsonDate);
+
+console.log(jsonDate); //2015-10-26T07:46:36.611Z
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Bemerkung</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.44', 'Date.prototype.toJSON')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Erstmalige Definition. Implementiert in JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.tojson', 'Date.prototype.toJSON')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.tojson', 'Date.prototype.toJSON')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.toJSON")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toTimeString()")}}</li>
+ <li>{{jsxref("Date.prototype.toUTCString()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/tolocaledatestring/index.html b/files/de/web/javascript/reference/global_objects/date/tolocaledatestring/index.html
new file mode 100644
index 0000000000..21248d939a
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/tolocaledatestring/index.html
@@ -0,0 +1,188 @@
+---
+title: Date.prototype.toLocaleDateString()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString
+tags:
+  - Date
+  - IANA Timezone Forma
+  - Internationalization
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>toLocaleDateString()</code></strong> Methode gibt einen sprachsensitiven String mit dem Datumsteil des Zeitpunktes zurück. Die neuen Argumente <code>locales</code> und <code>options</code> können eingesetzt werden, um die Sprache (und damit die Formatierung) einzustellen oder benutzerdefinierte Formatierungen vorzunehmen. In älteren Implementierungen, die <code>locales</code> und <code>options</code> ignorieren, ist die Formatierung des String implementierungsabhängig.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-tolocaledatestring.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>dateObj</var>.toLocaleDateString([<var>locales</var> [, <var>options</var>]])</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<p>Überprüfe das Kapitel {{anch("Browser_compatibility", "Browserkompatibilität")}}, um zu erfahren, welcher Browser die Argumente <code>locales</code> and <code>options</code> unterstützt. Zudem sollte das Beispiel {{anch("Checking_for_support_for_locales_and_options_arguments", "Unterstützung der Argumente <code>locales</code> und <code>options</code>")}} beachtet werden.</p>
+
+<div>{{page('/de/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat', 'Parameter')}}</div>
+
+<div>Der Standardwert für jede Eigenschaft einer Datums-Zeitkomponente ist {{jsxref("undefined")}}, wenn aber die Eigenschaften <code>weekday</code>, <code>year</code>, <code>month</code>, <code>day</code> {{jsxref("undefined")}} sind, sind die Eigenschaften <code>year</code>, <code>month</code>, und <code>day</code> <code>"numeric"</code>.</div>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Einen String, der den Datumsteil des gegebenen {{jsxref("Date")}} Objektes mit sprachspezifischen Konventionen repräsentiert.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_toLocaleDateString()">Einsatz von <code>toLocaleDateString()</code></h3>
+
+<p>Standardeinsatz ohne Angaben zur Sprache und Formatierung. Ein formatierter String in der Standardsprache mit Standardoption wird zurückgegeben.</p>
+
+<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 12, 3, 0, 0));
+
+// toLocaleDateString() ohne Argumente abhängig von der Implementierung,
+// der Standardsprache und der Standardzeitzone.
+console.log(date.toLocaleDateString());
+// → "12/11/2012" wenn in der Sprache en-US mit America/Los_Angeles Zeitzone ausgeführt
+</pre>
+
+<h3 id="Unterstützung_der_Argumente_locales_und_options">Unterstützung der Argumente <code>locales</code> und <code>options</code></h3>
+
+<p>Die Argumente <code>locales</code> and <code>options</code> sind noch nicht in allen Browsern unterstützt. Um herauszufinden, ob eine Implementierung die Argumente unterstützt, kann die Anforderung benutzt werden, dass bei nicht existierenden Sprachen ein {{jsxref("RangeError")}} erzeugt wird:</p>
+
+<pre class="brush: js">function toLocaleDateStringSupportsLocales() {
+  try {
+    new Date().toLocaleDateString('i');
+  } catch (e) {
+    return e.name === 'RangeError';
+  }
+  return false;
+}
+</pre>
+
+<h3 id="Einsatz_von_locales">Einsatz von <code>locales</code></h3>
+
+<p>Das Beispiel zeigt einige Variation von internationalisierten Datumsformaten. Um das Format der Sprache der Benutzerschnittstelle (z. B. Webseite) zu bekommen, muss die Sprache (und manchmal eine Fallback-Sprache) mit dem Argument <code>locales</code> gesetzt werden:</p>
+
+<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// Die unteren Formate setzen ein lokale Zeitzone voraus:
+// America/Los_Angeles für die US
+
+// US Englischer Einsatz von Monat-Tag-Jahr
+console.log(date.toLocaleDateString('en-US'));
+// → "12/19/2012"
+
+// British Englischer Einsatz von Tag-Monat-Jahr
+console.log(date.toLocaleDateString('en-GB'));
+// → "20/12/2012"
+
+// Koreanischer Einsatz von Jahr-Monat-Tag
+console.log(date.toLocaleDateString('ko-KR'));
+// → "2012. 12. 20."
+
+// Event für Persien. Es ist schwer manuell in Solar Hijri zu konvertieren
+console.log(date.toLocaleDateString('fa-IR'));
+// → "۱۳۹۱/۹/۳۰"
+
+// In den meisten arabischen Ländern werden arabische Ziffern genutzt.
+console.log(date.toLocaleDateString('ar-EG'));
+// → "<span dir="rtl">٢٠‏/١٢‏/٢٠١٢</span>"
+
+// Für mansche japanische Anwendungen wird er japanische Kalender benutzt,
+// bei dem das Jahr 2012 das Jahr 24 der Heisei-Zeit ist.
+console.log(date.toLocaleDateString('ja-JP-u-ca-japanese'));
+// → "24/12/20"
+
+// Wenn eine Sprache angegeben wird, die vielleicht nicht unterstützt wird,
+// wie Balinesisch, wird eine fallback Sprache (Indonesisch) definiert.
+console.log(date.toLocaleDateString(['ban', 'id']));
+// → "20/12/2012"
+</pre>
+
+<h3 id="Einsatz_von_options">Einsatz von <code>options</code></h3>
+
+<p>Das Ergebnis der <code>toLocaleDateString()</code> Methode kann benutzerdefiniert mit dem Argument <code>options</code> beeinflusst werden.</p>
+
+<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// Gibt einen Wochentag und ein langes Datum zurück.
+var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+console.log(date.toLocaleDateString('de-DE', options));
+// → "Donnerstag, 20. Dezember 2012"
+
+// Macht UTC sichtbar
+options.timeZone = 'UTC';
+options.timeZoneName = 'short';
+console.log(date.toLocaleDateString('en-US', options));
+// → "Thursday, December 20, 2012, GMT"
+</pre>
+
+<h2 id="Performance">Performance</h2>
+
+<p>Wenn viele Daten formatiert werden sollen, ist es besser ein {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} Objekt zu erstellen und die Funktion {{jsxref("DateTimeFormat.prototype.format", "format")}} zu benutzen.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', 'sec-15.9.5.6', 'Date.prototype.toLocaleDateString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.tolocaledatestring', 'Date.prototype.toLocaleDateString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.tolocaledatestring', 'Date.prototype.toLocaleDateString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-13.3.2', 'Date.prototype.toLocaleDateString')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Definition der <code>locales</code> und <code>options</code> Argumente.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-13.3.2', 'Date.prototype.toLocaleDateString')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-Date.prototype.toLocaleDateString', 'Date.prototype.toLocaleDateString')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.toLocaleDateString")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li>
+ <li>{{jsxref("Date.prototype.toString()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/tolocaleformat/index.html b/files/de/web/javascript/reference/global_objects/date/tolocaleformat/index.html
new file mode 100644
index 0000000000..f8f596983f
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/tolocaleformat/index.html
@@ -0,0 +1,81 @@
+---
+title: Date.prototype.toLocaleFormat()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toLocaleFormat
+tags:
+  - Date
+  - Java
+  - Method
+  - Non-standard
+  - Prototype
+  - Reference
+translation_of: Archive/Web/JavaScript/Date.toLocaleFormat
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>Die nicht standardisierte Methode <strong><code>toLocaleFormat()</code></strong> konvertiert einen {{jsxref("date")}} Objekt zu einem String im übergebenen Format. {{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}} ist einen standardisierte Alternative zum Formatieren von {{jsxref("Date")}} Objekten. Siehe auch die neuere Version der {{jsxref("Date.prototype.toLocaleDateString()")}} Methode an.</p>
+
+<div><strong>Diese Funktion wurde Entfernt und wird ab Firefox 58 nicht mehr Funktionieren.</strong> Für mehr Information un Migrationshilfe siehe in den Artikel {{jsxref("Errors/Deprecated_toLocaleFormat","Warning: Date.prototype.toLocaleFormat is deprecated")}}.</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>dateObj</var>.toLocaleFormat(<var>formatString</var>)</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>formatString</code></dt>
+ <dd>Ein Formatstring, welche im selben Format sein muss, wie es die C Funktion <a class="external" href="http://www.opengroup.org/onlinepubs/007908799/xsh/strftime.html"><code>strftime()</code></a> erwartet.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Einen String, der das gegebenen {{jsxref("Date")}} Objekt im spezifizierten Format repräsentiert.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>toLocaleFormat()</code> Methode ermöglicht es eine größere Kontrolle über das Formatieren von generierten Daten und/oder Zeiten zu haben. Namen für Monate und Wochentage werden mit den Spracheinstellungen des Betriebssystem formatiert. Die Anordnung von Tagen, Monaten und anderen Bestandteilen in der Formatierung wird nicht automatisch vorgenommen. Sie sind von den Angaben in dem Formatierungsstring abhängig. Man muss dafür sorgen, dass der Formatierungsstring zu richtigen Ergebnissen auf dem Benutzersystem führt. Man sollte vorsichtig sein, weil die Spracheinstellungen im Browser nicht die gleichen sein müssen, wie die des Betriebssystems.</p>
+
+<p>Extension und XULRunner Entwickler wissen, dass das Laden von Formatstring aus <code>.dtd</code> oder <code>.properties</code> Dateien mit dem Einsatz von URIs (z. B. <code>chrome://<em>somedomain</em>/locale/<em>somefile.ext</em></code>) <strong>vermieden werden sollte</strong>, weil <code>.dtd</code>/<code>.properties</code> Dateien und die <code>toLocaleFormat()</code> Methode nicht notwendiger Weise der gleichen Sprache folgen. Dieses kann zu nicht lesbaren oder merkwürdig formatierten Daten führen.</p>
+
+<p>Außerdem ist zu beachten, dass der Einsatz von Formatierungen abhängig von der Plattform und den benutzerdefinierten Einstellungen des Benutzers nicht immer gewollt ist. Man sollte stattdessen die allgemeineren <code>toLocale*</code> Methoden des {{jsxref("Global_Objects/Date", "Date")}} Objektes nutzen oder ein eigenes Format mit den <code>get*</code> Methoden einer {{jsxref("Global_Objects/Date", "Date")}} Instanz erstellen.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_toLocaleFormat()">Einsatz von <code>toLocaleFormat()</code></h3>
+
+<pre class="brush: js example-bad">var today = new Date();
+var date = today.toLocaleFormat('%A, %B %e, %Y'); // Schlechtes Beispiel
+</pre>
+
+<p>Im Beispiel gibt <code>toLocaleFormat()</code> einen String wie "Mittwoch, Oktober 3, 2007" zurück. Zu beachten ist, dass der String nicht unbedingt den Sprachegegebenheiten angepasst ist, was auf die oben genannten Probleme zurückzuführen ist.</p>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Wenn die <a href="https://github.com/abritinthebay/datejs/wiki/Format-Specifiers">DateJS</a> Bibliothek benutzt wird, kann folgender Polyfill benutzt werden:</p>
+
+<pre class="brush: js">if (!Date.prototype.toLocaleFormat) {
+    (function() {
+        Date.prototype.toLocaleFormat = function(formatString) {
+            return this.format(formatString);
+        };
+    }());
+}</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Nicht spezifiziert. Implementiert in JavaScript 1.6.</p>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.toLocaleFormat")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/tolocalestring/index.html b/files/de/web/javascript/reference/global_objects/date/tolocalestring/index.html
new file mode 100644
index 0000000000..4db8f38c1e
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/tolocalestring/index.html
@@ -0,0 +1,188 @@
+---
+title: Date.prototype.toLocaleString()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toLocaleString
+tags:
+  - Date
+  - Internationalization
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toLocaleString
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>toLocaleString</code></strong><strong><code>()</code></strong> Methode gibt einen sprachsensitiven String mit dem Zeitpunkt zurück. Die neuen Argumente <code>locales</code> und <code>options</code> können eingesetzt werden, um die Sprache (und damit die Formatierung) einzustellen oder benutzerdefinierte Formatierungen vorzunehmen. In älteren Implementierungen, die <code>locales</code> und <code>options</code> ignorieren, ist die Formatierung des String implementierungsabhängig.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-tolocalestring.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.toLocaleString([<var>locales</var>[, <var>options</var>]])</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<p>Überprüfe das Kapitel {{anch("Browser_compatibility", "Browserkompatibilität")}}, um zu erfahren, welcher Browser die Argumente <code>locales</code> and <code>options</code> unterstützt. Zudem sollte das Beispiel {{anch("Checking_for_upport_for_locales_and_options_arguments", "Unterstützung der Argumente <code>locales</code> und <code>options</code>")}} beachtet werden.</p>
+
+<div>{{page('/de/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat', 'Parameter')}}</div>
+
+<div> </div>
+
+<div>Der Standardwert für jede Eigenschaft einer Datums-Zeitkomponente ist {{jsxref("undefined")}}, wenn aber die Eigenschaften <code>weekday</code>, <code>year</code>, <code>month</code>, <code>day</code>, <code>hour</code>, <code>minute</code>, <code>second</code> {{jsxref("undefined")}} sind, sind die Eigenschaften <code>year</code>, <code>month</code>, <code>day</code>, <code>hour</code>, <code>minute</code> und <code>second</code> <code>"numeric"</code>.</div>
+
+<div> </div>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Einen String, der das gegebenen {{jsxref("Date")}} Objektes mit sprachspezifischen Konventionen repräsentiert.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_toLocaleString()">Einsatz von <code>toLocaleString()</code></h3>
+
+<p>Standardeinsatz ohne Angaben zur Sprache und Formatierung. Ein formatierter String in der Standardsprache mit Standardoption wird zurückgegeben.</p>
+
+<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 12, 3, 0, 0));
+
+// toLocaleString() ohne Argumente abhängig von der Implementierung,
+// der Standardsprache und der Standardzeitzone.
+console.log(date.toLocaleString());
+// → "12/11/2012, 7:00:00 PM" wenn in der Sprache en-US mit America/Los_Angeles Zeitzone ausgeführt
+</pre>
+
+<h3 id="Unterstützung_der_Argumente_locales_und_options">Unterstützung der Argumente <code>locales</code> und <code>options</code></h3>
+
+<p>Die Argumente <code>locales</code> and <code>options</code> sind noch nicht in allen Browsern unterstützt. Um herauszufinden, ob eine Implementierung die Argumente unterstützt, kann die Anforderung benutzt werden, dass bei nicht existierenden Sprachen ein {{jsxref("RangeError")}} erzeugt wird:</p>
+
+<pre class="brush: js">function toLocaleStringSupportsLocales() {
+  try {
+    new Date().toLocaleString('i');
+  } catch (e) {
+    return e instanceof RangeError;
+  }
+  return false;
+}
+</pre>
+
+<h3 id="Einsatz_von_locales">Einsatz von <code>locales</code></h3>
+
+<p>Das Beispiel zeigt einige Variation von internationalisierten Datums- und Zeitformaten. Um das Format der Sprache der Benutzerschnittstelle (z. B. Webseite) zu bekommen, muss die Sprache (und manchmal eine fallback Sprache) mit dem Argument <code>locales</code> gesetzt werden:</p>
+
+<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// US englischer einsatz mit Monat-Tag-Jahr und 12-Stunden Zeit mit AM/PM
+console.log(date.toLocaleString('en-US'));
+// → "12/19/2012, 7:00:00 PM"
+
+// Britisch englischer Einsatz mit Tag-Monat-Jahr und 24-Stunden Zeit ohne AM/PM
+console.log(date.toLocaleString('en-GB'));
+// → "20/12/2012 03:00:00"
+
+// Koreanischer Einsatz mit Jahr-Monat-Tag und 12-Stunden Zeit mit AM/PM
+console.log(date.toLocaleString('ko-KR'));
+// → "2012. 12. 20. 오후 12:00:00"
+
+// In den meisten arabischen Ländern werden arabische Ziffern genutzt.
+console.log(date.toLocaleString('ar-EG'));
+// → "<span dir="rtl">٢٠‏/١٢‏/٢٠١٢ ٥:٠٠:٠٠ ص</span>"
+
+// Für mansche japanische Anwendungen wird er japanische Kalender benutzt,
+// bei dem das Jahr 2012 das Jahr 24 der Heisei-Zeit ist.
+console.log(date.toLocaleString('ja-JP-u-ca-japanese'));
+// → "24/12/20 12:00:00"
+
+// Wenn eine Sprache angegeben wird, die vielleicht nicht unterstützt wird,
+// wie Balinesisch, wird eine fallback Sprache (Indonesisch) definiert.
+console.log(date.toLocaleString(['ban', 'id']));
+// → "20/12/2012 11.00.00"
+</pre>
+
+<h3 id="Einsatz_von_options">Einsatz von <code>options</code></h3>
+
+<p>Das Ergebnis der <code>toLocaleString</code><code>()</code> Methode kann benutzerdefiniert mit dem Argument <code>options</code> beeinflusst werden.</p>
+
+<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// Gibt einen Wochentag und ein langes Datum zurück
+var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+console.log(date.toLocaleString('de-DE', options));
+// → "Donnerstag, 20. Dezember 2012"
+
+//  Macht UTC sichtbar
+options.timeZone = 'UTC';
+options.timeZoneName = 'short';
+console.log(date.toLocaleString('en-US', options));
+// → "Thursday, December 20, 2012, GMT"
+
+// Manchal brauchen US-Sprachen auch 24-Stunden Zeiten
+console.log(date.toLocaleString('en-US', { hour12: false }));
+// → "12/19/2012, 19:00:00"
+</pre>
+
+<h2 id="Performance">Performance</h2>
+
+<p>Wenn viele Daten formatiert werden sollen, ist es besser ein {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} Objekt zu erstellen und die Funktion {{jsxref("DateTimeFormat.prototype.format", "format")}} zu benutzen.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.5', 'Date.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.tolocalestring', 'Date.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.tolocalestring', 'Date.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-13.3.1', 'Date.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Definition der <code>locales</code> und <code>options</code> Argumente.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-13.3.1', 'Date.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-Date.prototype.toLocaleString', 'Date.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.toLocaleString")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li>
+ <li>{{jsxref("Date.prototype.toString()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/tolocaletimestring/index.html b/files/de/web/javascript/reference/global_objects/date/tolocaletimestring/index.html
new file mode 100644
index 0000000000..da74e548cf
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/tolocaletimestring/index.html
@@ -0,0 +1,177 @@
+---
+title: Date.prototype.toLocaleTimeString()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString
+tags:
+  - Date
+  - Internationalization
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>toLocaleTimeString</code></strong><strong><code>()</code></strong> Methode gibt einen sprachsensitiven String mit dem Zeitsteil des Zeitpunktes zurück. Die neuen Argumente <code>locales</code> und <code>options</code> können eingesetzt werden, um die Sprache (und damit die Formatierung) einzustellen oder benutzerdefinierte Formatierungen vorzunehmen. In älteren Implementierungen, die <code>locales</code> und <code>options</code> ignorieren, ist die Formatierung des String implementierungsabhängig.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-tolocaletimestring.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.toLocaleTimeString([<var>locales</var>[, <var>options</var>]])</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<p>Überprüfe das Kapitel {{anch("Browser_compatibility", "Browserkompatibilität")}}, um zu erfahren, welcher Browser die Argumente <code>locales</code> and <code>options</code> unterstützt. Zudem sollte das Beispiel {{anch("Checking_for_support_for_locales_and_options_arguments", "Unterstützung der Argumente <code>locales</code> und <code>options</code>")}} beachtet werden.</p>
+
+<div>{{page('/de/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat', 'Parameter')}}</div>
+
+<div>Der Standardwert für jede Eigenschaft einer Datums-Zeitkomponente ist {{jsxref("undefined")}}, wenn aber die Eigenschaften <code>hour</code>, <code>minute</code>, <code>second</code> {{jsxref("undefined")}} sind, sind die Eigenschaften <code>hour</code>, <code>minute</code> und <code>second</code> <code>"numeric"</code>.</div>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Einen String, der den Zeitteil des gegebenen {{jsxref("Date")}} Objektes mit sprachspezifischen Konventionen repräsentiert.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_toLocaleTimeString()">Einsatz von <code>toLocaleTimeString()</code></h3>
+
+<p>Standardeinsatz ohne Angaben zur Sprache und Formatierung. Ein formatierter String in der Standardsprache mit Standardoption wird zurückgegeben.</p>
+
+<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 12, 3, 0, 0));
+
+// toLocaleTimeString() ohne Argumente abhängig von der Implementierung,
+// der Standardsprache und der Standardzeitzone.
+console.log(date.toLocaleTimeString());
+// → "7:00:00 PM"  wenn in der Sprache en-US mit America/Los_Angeles Zeitzone ausgeführt
+</pre>
+
+<h3 id="Unterstützung_der_Argumente_locales_und_options">Unterstützung der Argumente <code>locales</code> und <code>options</code></h3>
+
+<p>Die Argumente <code>locales</code> and <code>options</code> sind noch nicht in allen Browsern unterstützt. Um herauszufinden, ob eine Implementierung die Argumente unterstützt, kann die Anforderung benutzt werden, dass bei nicht existierenden Sprachen ein {{jsxref("RangeError")}} erzeugt wird:</p>
+
+<pre class="brush: js">function toLocaleTimeStringSupportsLocales() {
+  try {
+    new Date().toLocaleTimeString('i');
+  } catch (e) {
+    return e​.name === 'RangeError';
+  }
+  return false;
+}
+</pre>
+
+<h3 id="Einsatz_von_locales">Einsatz von <code>locales</code></h3>
+
+<p>Das Beispiel zeigt einige Variation von internationalisierten Zeitformaten. Um das Format der Sprache der Benutzerschnittstelle (z. B. Webseite) zu bekommen, muss die Sprache (und manchmal eine fallback Sprache) mit dem Argument <code>locales</code> gesetzt werden:</p>
+
+<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// die folgenden Formate setzen voraus, dass man die Zeitzone
+// America/Los_Angeles für US eingestellt hat.
+
+// US Englische Sprache; 12-Stunden Zeit mit AM/PM
+console.log(date.toLocaleTimeString('en-US'));
+// → "7:00:00 PM"
+
+// British Englishe Sprache; 24-Stunden Zeit ohne AM/PM
+console.log(date.toLocaleTimeString('en-GB'));
+// → "03:00:00"
+
+// Koreanische Sprache; 12-Stunden Zeit mit AM/PM
+console.log(date.toLocaleTimeString('ko-KR'));
+// → "오후 12:00:00"
+
+// In den meisten arabischen Ländern werden arabische Ziffern genutzt.
+console.log(date.toLocaleTimeString('ar-EG'));
+// → "<span dir="rtl">٧:٠٠:٠٠ م</span>"
+
+// Wenn eine Sprache angegeben wird, die vielleicht nicht unterstützt wird,
+// wie Balinesisch, wird eine fallback Sprache (Indonesisch) definiert.
+console.log(date.toLocaleTimeString(['ban', 'id']));
+// → "11.00.00"
+</pre>
+
+<h3 id="Einsatz_von_options">Einsatz von <code>options</code></h3>
+
+<p>Das Ergebnis der <code>toLocaleTimeString</code><code>()</code> Methode kann benutzerdefiniert mit dem Argument <code>options</code> beeinflusst werden.</p>
+
+<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// Macht UTC sichtbar
+var options = { timeZone: 'UTC', timeZoneName: 'short' };
+console.log(date.toLocaleTimeString('en-US', options));
+// → "3:00:00 AM GMT"
+
+// Manchal brauchen US-Sprachen auch 24-Stunden Zeiten
+console.log(date.toLocaleTimeString('en-US', { hour12: false }));
+// → "19:00:00"
+</pre>
+
+<h2 id="Performance">Performance</h2>
+
+<p>Wenn viele Zeiten formatiert werden sollen, ist es besser ein {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} Objekt zu erstellen und die Funktion {{jsxref("DateTimeFormat.prototype.format", "format")}} zu benutzen.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.7', 'Date.prototype.toLocaleTimeString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.tolocalestring', 'Date.prototype.toLocaleTimeString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.tolocalestring', 'Date.prototype.toLocaleTimeString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-13.3.3', 'Date.prototype.toLocaleTimeString')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Definition der <code>locales</code> und <code>options</code> Argumente.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-13.3.3', 'Date.prototype.toLocaleTimeString')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-Date.prototype.toLocaleTimeString', 'Date.prototype.toLocaleTimeString')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.toLocaleTimeString")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Date.prototype.toTimeString()")}}</li>
+ <li>{{jsxref("Date.prototype.toString()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/tosource/index.html b/files/de/web/javascript/reference/global_objects/date/tosource/index.html
new file mode 100644
index 0000000000..12764ae672
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/tosource/index.html
@@ -0,0 +1,61 @@
+---
+title: Date.prototype.toSource()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toSource
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toSource
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<div>Die <strong><code>toSource()</code></strong> Methode gibt eine String Repräsentation des Quelltextes des Objektes zurück.</div>
+
+<div> </div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>dateObj</var>.toSource()
+Date.toSource()</pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein String, der den Quelltext des gegebenen {{jsxref("Date")}} Objekt repräsentiert.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>toSource()</code> Methode gibt die folgenden Werte zurück:</p>
+
+<ul>
+ <li>Für das eingebaute {{jsxref("Date")}} Objekt, git die <code>toSource()</code> Methode den folgenden String zurück, der bedeutet, dass der Quelltext nicht verfügbar ist:
+
+  <pre class="brush: js">function Date() {
+    [native code]
+}
+</pre>
+ </li>
+</ul>
+
+<ul>
+ <li>Für Instanzen von {{jsxref("Date")}} gibt die <code>toSource()</code> Methode eine String Repräsentation des Quelltextes zurück.</li>
+</ul>
+
+<p>Diese Methode wird intern von JavaScript aufgerufen und wird nicht explizit im Quelltext eingesetzt.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Kein Standard. Implementiert in JavaScript 1.3.</p>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.toSource")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/tostring/index.html b/files/de/web/javascript/reference/global_objects/date/tostring/index.html
new file mode 100644
index 0000000000..470fd1903c
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/tostring/index.html
@@ -0,0 +1,94 @@
+---
+title: Date.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toString
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toString
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>toString()</code></strong> Methode gibt einen String zurück, der ein spezifisches {{jsxref("Date")}} Objekt repräsentiert.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-tostring.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>dateObj</var>.toString()</pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Einen String, der das gegebene {{jsxref("Date")}} Objekt repräsentiert.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Das {{jsxref("Date")}} Objekt überschreibt die <code>toString()</code> Methode des {{jsxref("Object")}} Objekts. Es wird nicht von  {{jsxref("Object.prototype.toString()")}} geerbt. Für {{jsxref("Date")}} Objekte gibt die <code>toString()</code> Methode einen String zurück, der das Objekt repräsentiert.</p>
+
+<p>Die <code>toString()</code> Methode gibt immer einen String zurück, der den Zeitpunkt repräsentiert. Dieser String wird in einem amerikanisch-englischen Format zurückgegeben.</p>
+
+<p>JavaScript ruft die <code>toString()</code> Methode automatisch auf, wenn ein {{jsxref("Date")}} Objekte als Text-Wert benötigt wird oder wenn das Objekt in einer String-Konkatination verwendet wird.</p>
+
+<p><code>toString()</code> ist eine generische Methode. Wenn <code>this</code> keine Instanz vom Typ {{jsxref("Date")}} ist, gibt die Methode "Invalid Date" zurück.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_toString()">Einsatz von <code>toString()</code></h3>
+
+<p>Im folgenden wird die Variable <code>myVar</code> mit dem Rückgabewert der <code>toString()</code> Methode eines {{jsxref("Date")}} Objektes beschrieben.</p>
+
+<pre class="brush: js">var x = new Date();
+myVar = x.toString(); // Weist der Variablen myVar folgenden Wert zu:
+                      // Mon Sep 28 1998 14:36:22 GMT-0700 (PDT)
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.2', 'Date.prototype.toLocaleTimeString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.tostring', 'Date.prototype.toString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.tostring', 'Date.prototype.toString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.toString")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toString()")}}</li>
+ <li>{{jsxref("Date.prototype.toDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Date.prototype.toTimeString()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/totimestring/index.html b/files/de/web/javascript/reference/global_objects/date/totimestring/index.html
new file mode 100644
index 0000000000..65d643c72a
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/totimestring/index.html
@@ -0,0 +1,88 @@
+---
+title: Date.prototype.toTimeString()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toTimeString
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toTimeString
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>toDateString()</code></strong> Methode gibt den Zeitteil eines {{jsxref("Date")}} Objektes für Menschen lesbar,  im amerikanisch-englischen Format, zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-totimestring.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.toTimeString()</code></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein String, der den Zeitteil des gegebenen {{jsxref("Date")}} Objektes für menschen lesbar im amerikanisch-englischen Format enthält</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>{{jsxref("Date")}} Instanzen referenzieren einen spezifischen Zeitpunkt. Mit dem Aufruf von {{jsxref("Date.prototype.toString()", "toString()")}} wird dieser Zeitpunkt für Menschen lesbar, im amerikanisch-englischen Format, zurückgegeben. In <a href="/de/docs/SpiderMonkey">SpiderMonkey</a> enthält diese Format den Datumsteil (Tag, Monat und Jahr) gefolgt von dem Zeitteil (Stunden, Minuten, Sekunden und Zeitzone). Manchmal ist es erwünscht, nur den Datumsteil zu bekommen. In diesen Fällen wird die <code>toDateString()</code> Methode eingesetzt.</p>
+
+<p>Die <code>toTimeString()</code> Methode ist besonders nützlich, weil JavaScript-Umgebungen die <a href="/en-US/docs/ECMAScript">ECMA-262</a> implementieren, manchmal unterschiedliche Ergebnisse bei der Ausführung der {{jsxref("Date.prototype.toString()", "toString()")}} Methode eines {{jsxref("Date")}} Objektes liefern. Dieses liegt daran, weil das zurückgegebene Format der {{jsxref("Date.prototype.toString()", "toString()")}} Methode implementierungsabhängig ist und über mehrere Plattformen hinweg zu inkonsistenten Ergebnissen führen kann.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_toTimeString()">Einsatz von <code>toTimeString()</code></h3>
+
+<pre class="brush: js">var d = new Date(1993, 6, 28, 14, 39, 7);
+
+console.log(d.toString());     // logs Wed Jul 28 1993 14:39:07 GMT-0600 (PDT)
+console.log(d.toTimeString()); // logs 14:39:07 GMT-0600 (PDT)
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.4', 'Date.prototype.toTimeString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.totimestring', 'Date.prototype.toTimeString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.totimestring', 'Date.prototype.toTimeString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.toTimeString")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li>
+ <li>{{jsxref("Date.prototype.toDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toString()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/toutcstring/index.html b/files/de/web/javascript/reference/global_objects/date/toutcstring/index.html
new file mode 100644
index 0000000000..02dc9d414b
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/toutcstring/index.html
@@ -0,0 +1,84 @@
+---
+title: Date.prototype.toUTCString()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toUTCString
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toUTCString
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>toUTCString()</code></strong> Methode konvertiert ein {{jsxref("Date")}} in einen String. Dabei wird die UTC Zeitzone verwendet.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-toutcstring.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.toUTCString()</code></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein String, der das gegebene {{jsxref("Date")}} Objekt mit Zuhilfenahme der UTC Zeitzonen repräsentiert.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Der Rückgabewert der <code>toUTCString()</code> Methode ist ein für menschen lesbarer String, der die UTC Zeitzone nutzt. Das Format des zurückgegebenen String kann von Plattform zu Plattform variieren. Der am häufigsten eingesetzte Wert ist ein RFC-1123 formatierter Zeitstempel, welcher ein Update des Zeitstempels in der Version RFC-822 ist.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_toUTCString()">Einsatz von <code>toUTCString()</code></h3>
+
+<pre class="brush: js">var today = new Date('Wed, 14 Jun 2017 00:00:00 PDT');
+var UTCstring = today.toUTCString(); // Wed, 14 Jun 2017 07:00:00 GMT
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.42', 'Date.prototype.toUTCString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.toutcstring', 'Date.prototype.toUTCString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.toutcstring', 'Date.prototype.toUTCString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.toUTCString")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Date.prototype.toDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toISOString()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/utc/index.html b/files/de/web/javascript/reference/global_objects/date/utc/index.html
new file mode 100644
index 0000000000..56aa3fde32
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/utc/index.html
@@ -0,0 +1,133 @@
+---
+title: Date.UTC()
+slug: Web/JavaScript/Reference/Global_Objects/Date/UTC
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/UTC
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Date.UTC()</code></strong> Methode akzeptiert die gleichen Parameter, wie der längste Konstruktor von {{jsxref("Date")}} und gibt die Anzahl der Millisekunden seit dem 1. Januar 1970 00:00:00 UTC zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-utc.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Date.UTC(<var>year</var>, <var>month</var>[, <var>day</var>[, <var>hour</var>[, <var>minute</var>[, <var>second</var>[, <var>millisecond</var>]]]]])</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>year</code></dt>
+ <dd>Ein volles Jahr</dd>
+ <dt><code>month</code></dt>
+ <dd>Eine ganze Zahl zwischen 0 und 11, die den Monat repräsentiert.</dd>
+ <dt><code>day</code></dt>
+ <dd>Optional. Eine ganze Zahl zwischen 1 und 31 den Tag des Monats repräsentiert.</dd>
+ <dt><code>hour</code></dt>
+ <dd>Optional. Eine ganze Zahl zwischen 0 und 23, die die Stunde des Tages repräsentiert.</dd>
+ <dt><code>minute</code></dt>
+ <dd>Optional. Eine ganze Zahl zwischen 0 und 59, die die Minute der Stunde repräsentiert.</dd>
+ <dt><code>second</code></dt>
+ <dd>Optional. Eine ganze Zahl zwischen 0 und 59, die die Sekunden der Minute repräsentiert.</dd>
+ <dt><code>millisecond</code></dt>
+ <dd>Optional. Eine ganze Zahl zwischen 0 und 999, die die Millisekunden einer Sekunde repräsentiert.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine Zahl, die die Anzahl der Millisekunden des gegebenen {{jsxref("Date")}} Objektes, die seit dem 1. Januar 1970 00:00:00 Weltzeit (UTC) vergangen sind, repräsentiert.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>UTC()</code> Methode bekommt mit Komma getrennte Parameter des Datums / der Zeit und gibt die Anzahl der Millisekunden seit dem 1. Januar 1970 in Weltzeit zurück.</p>
+
+<p>Es muss ein volles Jahr für <code>year</code> spezifiziert werden (z. B. 1998). Wenn ein Jahr zwischen 0 und 99 ist, wird die Methode das Jahr zu einem Jahr im zwanzigsten Jahrhundert konvertieren (<code>1900 + year</code>). Zum Beispiel wird 95 zu 1995 konvertiert.</p>
+
+<p>Die <code>UTC()</code> Methode unterscheidet sich in zwei Punkten von dem {{jsxref("Date")}} Konstruktor:</p>
+
+<ul>
+ <li><code>Date.UTC()</code> benutzt die Weltzeit anstatt der Ortszeit.</li>
+ <li><code>Date.UTC()</code> gibt die Zeit als Ganzzahl zurück anstatt ein {{jsxref("Date")}} Objekt zu erzeugen.</li>
+</ul>
+
+<p>Wenn ein Parameter außerhalb seiner spezifizierten Grenzen ist, wird die <code>UTC()</code> Methode andere Parameter verändern, um den Wert zu realisieren. Wird zum Beispiel 15 als Monat angegeben, so wird das Jahr um 1 inkrementiert (<code>year + 1</code>) und der Monat wird auf 3 gesetzt.</p>
+
+<p>Weil <code>UTC()</code> eine statische Methode von {{jsxref("Date")}} ist, wird sie immer als <code>Date.UTC()</code> genutzt und nicht als Methode einer {{jsxref("Date")}} Instanz.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_Date.UTC()">Einsatz von <code>Date.UTC()</code></h3>
+
+<p>Im folgenden Beispiel wird ein {{jsxref("Date")}} Objekt mithilfe der UTC (nicht der Ortszeit) erstellt:</p>
+
+<pre class="brush:js">var utcDate = new Date(Date.UTC(2018, 11, 1, 0, 0, 0));
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.utc', 'Date.UTC')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.utc', 'Date.UTC')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.4.3', 'Date.UTC')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.UTC")}}</p>
+
+<h2 id="Anmerkungen_zur_Kompatibilität">Anmerkungen zur Kompatibilität</h2>
+
+<h3 id="Date.UTC_mit_weniger_als_zwei_Argumenten"><code>Date.UTC</code> mit weniger als zwei Argumenten</h3>
+
+<p>Wenn <code>Date.UTC</code> weniger als zwei Argumenten erhält, wird {{jsxref("NaN")}} zurückgegeben. Dieses Verhalten wurde in ECMAScript 2017 spezifiziert. Umgebungen, welche dieses Verhalten nicht unterstützen, werden aktualisiert (siehe {{bug(1050755)}}, <a href="https://github.com/tc39/ecma262/pull/642">ecma-262 #642</a>).</p>
+
+<pre class="brush: js">Date.UTC();
+Date.UTC(1);
+
+// Safari: NaN
+// Chrome/Opera/V8: NaN
+
+// Firefox &lt;54: nicht NaN
+// Firefox 54+: NaN
+
+// IE: nicht NaN
+// Edge: NaN
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Date.parse()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/date/valueof/index.html b/files/de/web/javascript/reference/global_objects/date/valueof/index.html
new file mode 100644
index 0000000000..18f540fa4d
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/date/valueof/index.html
@@ -0,0 +1,85 @@
+---
+title: Date.prototype.valueOf()
+slug: Web/JavaScript/Reference/Global_Objects/Date/valueOf
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/valueOf
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>valueOf()</code></strong> Methode gibt den primitiven Wert eines {{jsxref("Date")}} Objektes zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-valueof.html")}}</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.valueOf()</code></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Die Anzahl der Millisekunden zwischen dem 1. Januar 1970 00:00:00 UTC und dem gegebenen date Objekt.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>valueOf()</code> Methode gibt den primitiven Wert eines {{jsxref("Date")}} Objektes als Nummern-Datentyp (number) zurück. Diese Nummer entspricht der Anzahl der Millisekunden seit dem 1. Januar 1970 UTC.</p>
+
+<p>Diese Methode hat den gleiche Funktionsumfang wie die {{jsxref("Date.prototype.getTime()")}} Methode.</p>
+
+<p>Diese Methode wird intern von JavaScript aufgerufen und muss nicht explizit im Quelltext verwendet werden.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_valueOf()">Einsatz von <code>valueOf()</code></h3>
+
+<pre class="brush: js">var x = new Date(56, 6, 17);
+var myVar = x.valueOf();      // schreibt -424713600000 auf myVar
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.8', 'Date.prototype.valueOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.valueof', 'Date.prototype.valueOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.valueof', 'Date.prototype.valueOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.valueOf")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.valueOf()")}}</li>
+ <li>{{jsxref("Date.prototype.getTime()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/decodeuricomponent/index.html b/files/de/web/javascript/reference/global_objects/decodeuricomponent/index.html
new file mode 100644
index 0000000000..7eb2c2c905
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/decodeuricomponent/index.html
@@ -0,0 +1,127 @@
+---
+title: decodeURIComponent()
+slug: Web/JavaScript/Reference/Global_Objects/decodeURIComponent
+translation_of: Web/JavaScript/Reference/Global_Objects/decodeURIComponent
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>Die Funktion <code><strong>decodeURIComponent()</strong> dekodiert eine URI-Komponente die zuvor durch </code>{{jsxref("encodeURIComponent")}} (oder einer ähnlichen Funktion) kodiert wurden.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>decodeURIComponent(<em>encodedURI</em>)</code></pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>encodedURI</code></dt>
+ <dd>Die kodierte Komponente einer URI.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein neuer String der die decodierte Version der übergebenen URI-Komponente repräsentiert.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Ersetzt jede Escape-Sequenz der übergebenen kodierten Komponente durch ihre entsprechenden Zeichen.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Dekodieren_einer_kyrillischen_URL-Komponente">Dekodieren einer kyrillischen URL-Komponente</h3>
+
+<pre class="brush: js">decodeURIComponent("JavaScript_%D1%88%D0%B5%D0%BB%D0%BB%D1%8B");
+// "JavaScript_шеллы"
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Anfangs-Definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.3.2', 'decodeURIComponent')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-decodeuricomponent-encodeduricomponent', 'decodeURIComponent')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-decodeuricomponent-encodeduricomponent', 'decodeURIComponent')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe">Siehe</h2>
+
+<ul>
+ <li>{{jsxref("decodeURI")}}</li>
+ <li>{{jsxref("encodeURI")}}</li>
+ <li>{{jsxref("encodeURIComponent")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/encodeuri/index.html b/files/de/web/javascript/reference/global_objects/encodeuri/index.html
new file mode 100644
index 0000000000..2b8521f9e7
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/encodeuri/index.html
@@ -0,0 +1,163 @@
+---
+title: encodeURI()
+slug: Web/JavaScript/Reference/Global_Objects/encodeURI
+translation_of: Web/JavaScript/Reference/Global_Objects/encodeURI
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>Die <code><strong>encodeURI()</strong></code> Funktion kodiert ein Uniform Resource Identifier (Abk. URI, englisch für einheitlicher Bezeichner für Ressurcen), indem sie jedes Vorkommen von speziellen Zeichen durch die jeweilige UTF-8 Zeichenkette ersetzt, die das Zeichen repräsentiert.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>encodeURI(<em>URI</em>)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>URI</code></dt>
+ <dd>Ein vollständiger Uniform Resource Identifier.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>Ein neuer String, kodiert als Uniform Resource Identifier (URI).</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die Funktion geht davon aus, dass die URI eine richtige URI ist, sodass sie keine Zeichen kodiert die spezielle Bedeutungen haben.</p>
+
+<p><code>encodeURI</code> ersetzt alle Zeichen <strong>außer </strong>die folgenden<strong> </strong>mit ihrer zugehörigen UTF-8 Escape-Sequenz:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Typ</td>
+   <td class="header">Beinhaltet</td>
+  </tr>
+  <tr>
+   <td>Zurückgehaltene Zeichen</td>
+   <td><code>;</code> <code>,</code> <code>/</code> <code>?</code> <code>:</code> <code>@</code> <code>&amp;</code> <code>=</code> <code>+</code> <code>$</code></td>
+  </tr>
+  <tr>
+   <td>Unescapte </td>
+   <td>alphanumerische Zeichen, <code>-</code> <code>_</code> <code>.</code> <code>!</code> <code>~</code> <code>*</code> <code>'</code> <code>(</code> <code>)</code></td>
+  </tr>
+  <tr>
+   <td>Zeichen für Nummern</td>
+   <td><code>#</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Beachten Sie, dass die <code>encodeURI</code> Funktion keine richtigen HTTP GET und POST Requests erzeugen kann, wie für XMLHTTPRequests benötigt, da "&amp;", "+", und "=" nicht kodiert werden. Diese werden in GET und POST als spezielle Zeichen behandelt. Für solche Verwendungen steht die {{jsxref("encodeURIComponent")}} Funktion zur Verfügung.</p>
+
+<p>Beachten Sie auch, dass ein {{jsxref("URIError")}} erzeugt wird,  sobald versucht wird, ein <a href="https://de.wikipedia.org/wiki/UTF-16#Kodierung">surrogate</a>, welches nicht zu einem high-low Paar gehört, zu kodieren.</p>
+
+<pre class="brush: js">// high-low paar ok
+console.log(encodeURI('\uD800\uDFFF'));
+
+// einzelnes high surrogate erzeugt ein "URIError: malformed URI sequence"
+console.log(encodeURI('\uD800'));
+
+// einzelnes low surrogate erzeugt ein "URIError: malformed URI sequence"
+console.log(encodeURI('\uDFFF')); </pre>
+
+<p>Wenn Sie den neueren <a href="http://tools.ietf.org/html/rfc3986">RFC3986</a> Standart für URLs benutzen möchten, der eckige Klammern beachtet (für IPv6) und Teile die zur URL gehören könnten (wie der Host) nicht kodiert, könnte der kleine Code-Auszug helfen:</p>
+
+<pre class="brush: js">function fixedEncodeURI(str) {
+    return encodeURI(str).replace(/%5B/g, '[').replace(/%5D/g, ']');
+}</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.3.3', 'encodeURI')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-encodeuri-uri', 'encodeURI')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-encodeuri-uri', 'encodeURI')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_kompatibilität">Browser kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Normale Unterstützung</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>
+    <p>Normale Unterstützung</p>
+   </td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("decodeURI")}}</li>
+ <li>{{jsxref("encodeURIComponent")}}</li>
+ <li>{{jsxref("decodeURIComponent")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/encodeuricomponent/index.html b/files/de/web/javascript/reference/global_objects/encodeuricomponent/index.html
new file mode 100644
index 0000000000..a632775085
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/encodeuricomponent/index.html
@@ -0,0 +1,163 @@
+---
+title: encodeURIComponent()
+slug: Web/JavaScript/Reference/Global_Objects/encodeURIComponent
+tags:
+  - JavaScript
+  - URI
+translation_of: Web/JavaScript/Reference/Global_Objects/encodeURIComponent
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>Die Methode <strong><code>encodeURIComponent()</code></strong> kodiert eine Komponente des Uniform Resource Identifier (URI) indem jedes Vorkommen bestimmter Zeichen durch ein, zwei, drei oder vier Escape-Sequenzen ersetzt werden, die der UTF8-Kodierung des Zeichens entsprechen. Vier Escape-Sequenzen werden nur bei Zeichen bestehend aus zwei "Surrogate"-Zeichen verwendet.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">encodeURIComponent(str);</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>str</code></dt>
+ <dd>String. Eine URI-Komponente.</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p><code>encodeURIComponent</code> kodiert alle Zeichen außer den Folgenden: alphabetische, dezimale Ziffern, <code>- _ . ! ~ * ' ( )</code></p>
+
+<p>Beachte, dass {{jsxref("URIError")}} beim Versuch geworfen wird, ein Surrogate-Zeichen zu kodieren, das nicht Teil eines High-Low-Paares ist, z.B.:</p>
+
+<pre class="brush: js">// Zulässiges High-Low-Paar
+console.log(encodeURIComponent('\uD800\uDFFF'));
+
+// alleinstehendes High-Surrogate-Zeichen wirft "URIError: malformed URI sequence"
+console.log(encodeURIComponent('\uD800'));
+
+// alleinstehendes Low-Surrogate-Zeichen wirft "URIError: malformed URI sequence"
+console.log(encodeURIComponent('\uDFFF'));
+</pre>
+
+<p>Um unerwartete Anfragen an den Server zu vermeiden, sollte <code>encodeURIComponent</code> für jeden benutzerdefinierten Parameter, der als Teil der URI übergeben wird, verwendet werden. Z.B. könnte ein Benutzer in einem variablen Kommentar "<code>Thyme &amp;time=again</code>" schreiben. Ohne Verwendung von <code>encodeURIComponent</code> erhältst Du <code>comment=Thyme%20&amp;time=again</code>. Beachte, dass das Kaufmännische Und (Ampersand) und das Gleich-Zeichen ein neues Schlüssel-Wert-Paar bedeuten. Das bedeutet, dass statt dem POST-Schlüssel "<code>Thyme &amp;time=again</code>" zwei POST-Schlüssel verwendet werden, der eine mit dem Wert "<code>Thyme </code>", der andere (<code>time</code>) mit <code>again</code>.</p>
+
+<p>Bei <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#application/x-www-form-urlencoded-encoding-algorithm"><code>application/x-www-form-urlencoded</code></a> werden Leerzeichen mit '+' ersetzt, so dass es u.U. erwünscht ist, nach der Ersetzung durch <code>encodeURIComponent</code> eine weitere Ersetzung von "%20" mit "+" durchzuführen.</p>
+
+<p>Um streng konform mit <a href="http://tools.ietf.org/html/rfc3986">RFC 3986</a> zu sein (welches !, ', (, ) und * reserviert), obwohl diese Zeichen keine formalisierten Trennzeichen sind, kann das Folgende sicher verwendet werden:</p>
+
+<pre class="brush: js">function fixedEncodeURIComponent (str) {
+  return encodeURIComponent(str).replace(/[!'()*]/g, function(c) {
+    return '%' + c.charCodeAt(0).toString(16);
+  });
+}
+</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Das folgende Beispiel stellt die spezielle Kodierung sicher, die in UTF-8-kodierten Parameterwerten der Server-Antwort-Headern <code>Content-Disposition</code> und <code>Link</code> benötigt wird (z.B. UTF-8-kodierte Dateinamen):</p>
+
+<pre class="brush: js">var fileName = 'my file(2).txt';
+var header = "Content-Disposition: attachment; filename*=UTF-8''"
+             + encodeRFC5987ValueChars(fileName);
+
+console.log(header);
+// logs "Content-Disposition: attachment; filename*=UTF-8''my%20file%282%29.txt"
+
+
+function encodeRFC5987ValueChars (str) {
+    return encodeURIComponent(str).
+        // Beachte, dass obwohl RFC3986 "!" reserviert, es nicht kodiert
+        // werden muss, weil RFC5987 es nicht reserviert.
+        replace(/['()]/g, escape). // i.e., %27 %28 %29
+        replace(/\*/g, '%2A').
+            // Die folgenden Zeichen müssen nicht nach RFC5987 kodiert werden,
+            // daher können wir bessere Lesbarkeit übers Netzwerk sicherstellen:
+            // |`^
+            replace(/%(?:7C|60|5E)/g, unescape);
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.3.4', 'encodeURIComponent')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-encodeuricomponent-uricomponent', 'encodeURIComponent')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome für Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Weitere_Infos">Weitere Infos</h2>
+
+<ul>
+ <li>{{jsxref("decodeURI")}}</li>
+ <li>{{jsxref("encodeURI")}}</li>
+ <li>{{jsxref("decodeURIComponent")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/error/columnnumber/index.html b/files/de/web/javascript/reference/global_objects/error/columnnumber/index.html
new file mode 100644
index 0000000000..8335fd02d6
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/error/columnnumber/index.html
@@ -0,0 +1,43 @@
+---
+title: Error.prototype.columnNumber
+slug: Web/JavaScript/Reference/Global_Objects/Error/columnNumber
+tags:
+  - Error
+  - JavaScript
+  - Non-standard
+  - Property
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/columnNumber
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>Die <code><strong>columnNumber</strong></code> Eigenschaft enthält die Spaltennummer in der Zeile in der Datei, in der der Fehler erzeugt wurde.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_columnNumber">Einsatz von <code>columnNumber</code></h3>
+
+<pre class="brush: js">var e = new Error('Could not parse input');
+throw e;
+console.log(e.columnNumber) // 0
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>In keiner Spezifikation enthalten. Kein Standard.</p>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Error.columnNumber")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype.stack")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("Error.prototype.lineNumber")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("Error.prototype.fileName")}} {{non-standard_inline}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/error/filename/index.html b/files/de/web/javascript/reference/global_objects/error/filename/index.html
new file mode 100644
index 0000000000..df7383803e
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/error/filename/index.html
@@ -0,0 +1,47 @@
+---
+title: Error.prototype.fileName
+slug: Web/JavaScript/Reference/Global_Objects/Error/fileName
+tags:
+  - Error
+  - JavaScript
+  - Non-standard
+  - Property
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/fileName
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>Die <code><strong>fileName</strong></code> Eigenschaft enthält den Pfad der Datei, in der der Fehler erzeugt wurde.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Diese nicht standardisierte Eigenschaft enthält den Pfad der Datei, in der der Fehler erzeugt wurde. Wenn diese Eigenschaft von aus einem Debugger heraus aufgerufen wird (z. B. Firefox Developer Tools), wird "debugger eval code" zurückgegeben.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_fileName">Einsatz von <code>fileName</code></h3>
+
+<pre class="brush: js">var e = new Error('Could not parse input');
+throw e;
+// e.fileName könnte aussehen wie: "file:///C:/example.html"
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>In keiner Spezifikation enthalten. Kein Standard.</p>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Error.fileName")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype.stack")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("Error.prototype.columnNumber")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("Error.prototype.lineNumber")}} {{non-standard_inline}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/error/index.html b/files/de/web/javascript/reference/global_objects/error/index.html
new file mode 100644
index 0000000000..293f0927fc
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/error/index.html
@@ -0,0 +1,241 @@
+---
+title: Error
+slug: Web/JavaScript/Reference/Global_Objects/Error
+tags:
+  - Error
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Error
+---
+<div>{{JSRef}}</div>
+
+<p>Der <strong><code>Error</code></strong> Konstruktor erstellt ein Fehler (Error) Objekt. Instanzen von <code>Error</code> Objekten werden geworfen (thrown), wenn zur Laufzeit ein Fehler auftritt. Das <code>Error</code> Objekt kann zudem als Basis für benutzerdefinierte Fehler benutzt werden. Weiter unten werden schon eingebaute Fehlertypen beschrieben.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">new Error([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>message</code></dt>
+ <dd>Optional. Für Menschen lesbare Beschreibung des Errors.</dd>
+ <dt><code>fileName</code> {{non-standard_inline}}</dt>
+ <dd>Optional. Der Wert für die <code>fileName</code> Eigenschaft eines erstellten <code>Error</code> Objekts. Der Standardwert ist der Name der Datei, in dem der Quelltext <code>Error()</code> aufgerufen wird.</dd>
+ <dt><code>lineNumber</code> {{non-standard_inline}}</dt>
+ <dd>Optional. Der Wert für die <code>lineNumber</code> Eigenschaft eines erstellten <code>Error</code> Objekts. Der Standardwert ist die Zeilennummer, in dem der Quelltext <code>Error()</code> aufgerufen wird.</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Laufzeitfehler resultieren in einem neu erstellten und geworfenen <code>Error</code> Objekt.</p>
+
+<p>Diese Seite Dokumentiert den Einsatz des <code>Error</code> Objektes und den Einsatz als Konstruktorfunktion. Für eine Liste der Eigenschaften und Methoden, die eine <code>Error</code> Instanz erbt, siehe auf der Seite {{jsxref("Error.prototype")}}.</p>
+
+<h3 id="Einsatz_als_Funktion">Einsatz als Funktion</h3>
+
+<p>Wenn <code>Error</code> als Funktion genutzt wird -- ohne <code>new</code>, wird diese ein <code>Error</code> Objekt zurückgeben. Daher wird der Aufruf der Funktion das gleiche zurückgeben wie der Aufruf des <code>Error</code> Konstruktors (mit <code>new</code> Schlüsselwort).</p>
+
+<pre class="brush: js">// dieser Aufruf:
+const x = Error('Ich wurde mit einem Funktionsaufruf erstellt!');
+​​​​// hat die gleiche Funktion wie folgender:
+const y = new Error('Ich wurde mit dem "new" Schlüsselwort erstellt!');</pre>
+
+<h3 id="Fehlertypen">Fehlertypen</h3>
+
+<p>Neben dem generischen <code>Error</code> Konstruktor sind in JavaScript noch sieben weitere Error-Konstruktoren eingebaut. Für benutzerdefinierte Fehler siehe <a href="/de/docs/Web/JavaScript/Guide/Statements#Statements_zur_Fehler-_bzw._Ausnahmebehandlung">Statements zur Fehler- und Ausnahmebehandlung</a>.</p>
+
+<dl>
+ <dt>{{jsxref("EvalError")}}</dt>
+ <dd>Erstellt eine Instanz, die einen Fehler repräsentiert, der bei der globalen {{jsxref("Global_Objects/eval", "eval()")}} Funktion auftritt.</dd>
+ <dt>{{jsxref("InternalError")}} {{non-standard_inline}}</dt>
+ <dd>Erstellt eine Instanz, die einen Fehler repräsentiert, der auftritt, wenn ein interner Fehler in JavaScript auftaucht (z. B. zu viel Rekursion).</dd>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Erstellt eine Instanz, die einen Fehler repräsentiert, der auftritt, wenn eine nummerische Variable oder ein nummerischer Parameter außerhalb seiner validen Grenzen ist.</dd>
+ <dt>{{jsxref("ReferenceError")}}</dt>
+ <dd>Erstellt eine Instanz, die einen Fehler repräsentiert, der auftritt, wenn eine nicht valide Referenz referenziert werden soll.</dd>
+ <dt>{{jsxref("SyntaxError")}}</dt>
+ <dd>Erstellt eine Instanz, die einen Fehler repräsentiert, der auftritt, wenn die Syntax von  Quellcode, der in der {{jsxref("Global_Objects/eval", "eval()")}} Funktion übergeben wird, nicht richtig ist.</dd>
+ <dt>{{jsxref("TypeError")}}</dt>
+ <dd>Erstellt eine Instanz, die einen Fehler repräsentiert, der auftritt, wenn eine Variable oder ein Parameter einen nicht validen Typen enthält.</dd>
+ <dt>{{jsxref("URIError")}}</dt>
+ <dd>Erstellt ein Instanz, die einen Fehler repräsentiert, der auftritt, wenn die Methode {{jsxref("Global_Objects/encodeURI", "encodeURI()")}} oder {{jsxref("Global_Objects/decodeURI", "decodeURI()")}} nicht valide Parameter übergeben bekommt.</dd>
+</dl>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt>{{jsxref("Error.prototype")}}</dt>
+ <dd>Erlaubt es die Eigenschaften aller <code>Error</code> Instanzen zu verändern.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<p>Das globale <code>Error</code> Objekt besitzt keine eigenen Methoden. Stattdessen erbt es einige Methoden durch die Prototypenkette.</p>
+
+<h2 id="Error_Instanzen">Error Instanzen</h2>
+
+<div>{{page('/de/docs/Web/JavaScript/Reference/Global_Objects/Error/prototype', 'Beschreibung')}}</div>
+
+<h3 id="Eigenschaften_2">Eigenschaften</h3>
+
+<div>{{page('/de/docs/Web/JavaScript/Reference/Global_Objects/Error/prototype', 'Eigenschaften')}}</div>
+
+<h3 id="Methoden_2">Methoden</h3>
+
+<div>{{page('/de/docs/Web/JavaScript/Reference/Global_Objects/Error/prototype', 'Methoden')}}</div>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Werfen_eines_generischen_Errors">Werfen eines generischen Errors</h3>
+
+<p>Typischerweise erstellt man ein <code>Error</code> Objekt mit der Intention es mit dem {{jsxref("Statements/throw", "throw")}} Schlüsselwort zu werfen. Man kann den Fehler auffangen, indem man ein {{jsxref("Statements/try...catch", "try...catch")}} Konstrukt benutzt.</p>
+
+<pre class="brush: js">try {
+  throw new Error('Whoops!');
+} catch (e) {
+  console.log(e.name + ': ' + e.message);
+}
+</pre>
+
+<h3 id="Einen_Spezifischen_Error_behandeln">Einen Spezifischen Error behandeln</h3>
+
+<p>Man kann sich aussuchen, welche spezifischen Fehlertypen behandelt werden sollen, indem man die {{jsxref("Object.prototype.constructor", "constructor")}} Eigenschaft des Errors abfragt. In modernen JavaScript-Umgebungen kann stattdessen das {{jsxref("Operators/instanceof", "instanceof")}} Schlüsselwort verwendet werden:</p>
+
+<pre class="brush: js">try {
+  foo.bar();
+} catch (e) {
+  if (e instanceof EvalError) {
+    console.log(e.name + ': ' + e.message);
+  } else if (e instanceof RangeError) {
+    console.log(e.name + ': ' + e.message);
+  }
+  // ... etc
+}
+</pre>
+
+<h3 id="Benutzerdefinierte_Fehlertypen">Benutzerdefinierte Fehlertypen</h3>
+
+<p>Manchmal möchte man aber einen eigenen Error erstellen, der von <code>Error</code> abgeleitet ist, durch den Aufruf <code>throw new CustomError()</code>  geworfen werden kann und durch <code>instanceof CustomError</code> abgefragt werden kann. Eigene Fehlertypen führen zu einer besseren und konsistenten Fehlerbehandlung. Für eine tiefer gehende Diskussion schaue bitte auf <a href="https://stackoverflow.com/questions/1382107/whats-a-good-way-to-extend-error-in-javascript">Stack Overflow</a> nach.</p>
+
+<h4 id="ES6_benutzerdefinierte_Error_Klasse">ES6 benutzerdefinierte Error Klasse</h4>
+
+<div class="warning">
+<p>Babel und andere Transpiler werden den folgenden Quelltext nicht ohne <a href="https://github.com/loganfsmyth/babel-plugin-transform-builtin-extend">zusätzliche Konfigurationen</a> verarbeiten können.</p>
+</div>
+
+<div class="note">
+<p>Einige Browser enthalten den CustomError Konstruktor im Stack Trace, wenn ES2015 Klassen eingesetzt werden</p>
+</div>
+
+<pre class="brush: js">class CustomError extends Error {
+  constructor(foo = 'bar', ...params) {
+    // Übergibt die verbleibenden Parameter (einschließlich Vendor spezifischer Parameter) dem Error Konstruktor
+    super(...params);
+
+    // Behält den richtigen Stack-Trace für die Stelle bei, an der unser Fehler ausgelöst wurde (nur bei V8 verfügbar)
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, CustomError);
+    }
+
+    // Benutzerdefinierte Debugging Informationen
+    this.foo = foo;
+    this.date = new Date();
+  }
+}
+
+try {
+  throw new CustomError('buz', 'buzMessage');
+} catch(e){
+  console.log(e.foo);     // baz
+  console.log(e.message); // bazMessage
+  console.log(e.stack);   // stacktrace
+}</pre>
+
+<h4 id="ES5_benutzerdefiniertes_Error_Objekt">ES5 benutzerdefiniertes Error Objekt</h4>
+
+<div class="warning">
+<p><strong>Alle</strong> Browser enthalten den CustomError Konstruktor im Stack Trace, wenn eine Prototypische Deklaration verwendet wird.</p>
+</div>
+
+<pre class="brush: js">function CustomError(foo, message, fileName, lineNumber) {
+  var instance = new Error(message, fileName, lineNumber);
+  instance.foo = foo;
+  Object.setPropertyOf(instance, Object.getPrototypeOf(this));
+  if(Error.captureStackTrace) {
+    Error.captureStackTrace(instance, CustomError);
+  }
+  return instance;
+}
+
+CustomError.prototype = Object.create(Error.prototype, {
+  constructor: {
+    value: Error,
+    enumerable: false,
+    writable: true,
+    configurable: true
+  }
+});
+
+if(typeof Object.setPropertyOf != 'undefined') {
+  Object.setPrototypeOf(CustomError, Error);
+} else {
+  CustomError.__proto__ = Error;
+}
+
+
+try {
+  throw new CustomError('baz', 'bazMessage');
+} catch (e) {
+  console.log(e.foo);      // 'baz'
+  console.log(e.message);  // 'bazMessage'
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11', 'Error')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-error-objects', 'Error')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-error-objects', 'Error')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Error")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype")}}</li>
+ <li>{{jsxref("Statements/throw", "throw")}}</li>
+ <li>{{jsxref("Statements/try...catch", "try...catch")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/error/linenumber/index.html b/files/de/web/javascript/reference/global_objects/error/linenumber/index.html
new file mode 100644
index 0000000000..63bb6a59c2
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/error/linenumber/index.html
@@ -0,0 +1,55 @@
+---
+title: Error.prototype.lineNumber
+slug: Web/JavaScript/Reference/Global_Objects/Error/lineNumber
+tags:
+  - Error
+  - JavaScript
+  - Non-standard
+  - Property
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/lineNumber
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>Die <code><strong>lineNumber</strong></code> Eigenschaft enthält die Zeilennummer in der Datei, in der der Fehler erzeugt wurde.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_lineNumber">Einsatz von <code>lineNumber</code></h3>
+
+<pre class="brush: js">var e = new Error('Could not parse input');
+throw e;
+console.log(e.lineNumber) // 2
+</pre>
+
+<h3 id="Alternatives_Beispiel_mit_error_Events">Alternatives Beispiel mit <code>error</code> Events</h3>
+
+<pre class="brush: js">window.addEventListener('error', function(e) {
+  console.log(e.lineNumber); // 5
+});
+var e = new Error('Could not parse input');
+throw e;
+</pre>
+
+<p>Das ist keine Standardfunktion und es gibt auch keine breite Unterstützung (siehe Browserkompatibilitätstabelle unten).</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Ist in keiner Spezifikation enthalten. Kein Standard.</p>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Error.lineNumber")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype.stack")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("Error.prototype.columnNumber")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("Error.prototype.fileName")}} {{non-standard_inline}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/error/message/index.html b/files/de/web/javascript/reference/global_objects/error/message/index.html
new file mode 100644
index 0000000000..559f457cb2
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/error/message/index.html
@@ -0,0 +1,75 @@
+---
+title: Error.prototype.message
+slug: Web/JavaScript/Reference/Global_Objects/Error/message
+tags:
+  - Error
+  - JavaScript
+  - Property
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/message
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>message</strong></code> Eigenschaft ist eine für Menschen lesbare Beschreibung von Errors.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Diese Eigenschaft enthält eine knappe Beschreibung des Errors, wenn eine verfügbar ist oder gesetzt wird. Zum Beispiel setzt <a href="/de/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> diese Eigenschaft sehr oft ein. Die <code>message</code> Eigenschaft kombiniert mit der {{jsxref("Error.prototype.name", "name")}} Eigenschaft werden in der {{jsxref("Error.prototype.toString()")}} Methode eingesetzt, um eine String-Repräsentation des Errors zu erstellen.</p>
+
+<p>Der Standardwert für die <code>message</code> Eigenschaft ist ein leerer String, jedoch kann diese von einer Instanz überschrieben werden, indem der erste Parameter des  {{jsxref("Error", "Error Konstruktors")}} gesetzt wird.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einen_benutzerdefinierten_Fehler_erzeugen">Einen benutzerdefinierten Fehler erzeugen</h3>
+
+<pre class="brush: js">var e = new Error('Falsches Eingabeformat');
+// e.message ist 'Falsches Eingabeformat'
+throw e;
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.4.3', 'Error.prototype.message')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-error.prototype.message', 'Error.prototype.message')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-error.prototype.message', 'Error.prototype.message')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Error.message")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype.name")}}</li>
+ <li>{{jsxref("Error.prototype.toString()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/error/name/index.html b/files/de/web/javascript/reference/global_objects/error/name/index.html
new file mode 100644
index 0000000000..abf77777fc
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/error/name/index.html
@@ -0,0 +1,58 @@
+---
+title: Error.prototype.name
+slug: Web/JavaScript/Reference/Global_Objects/Error/name
+tags:
+  - Error
+  - JavaScript
+  - Property
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/name
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>name</strong></code> Eigenschaft repräsentiert einen Namen für die Art des Errors. Der Initialwert ist "Error".</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Als Standard wird für einer {{jsxref("Error")}} Instanz der Name "Error" gegeben. Die <code>name</code> Eigenschaft und die {{jsxref("Error.prototype.message", "message")}} Eigenschaft werden eingesetzt, um in der {{jsxref("Error.prototype.toString()")}} Methode eine Repräsentation des Fehlers als String zu erstellen.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einen_benutzerdefinierten_Fehler_erzeugen">Einen benutzerdefinierten Fehler erzeugen</h3>
+
+<pre class="brush: js">var e = new Error('Malformed input'); // e.name ist 'Error'
+
+e.name = 'ParseError';
+throw e;
+// e.toString() wird 'ParseError: Malformed input' zurückgeben.
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-error.prototype.name', 'Error.prototype.name')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("javascript.builtins.Error.name")}}</p>
+</div>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype.message")}}</li>
+ <li>{{jsxref("Error.prototype.toString()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/error/prototype/index.html b/files/de/web/javascript/reference/global_objects/error/prototype/index.html
new file mode 100644
index 0000000000..f383b474ea
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/error/prototype/index.html
@@ -0,0 +1,113 @@
+---
+title: Error.prototype
+slug: Web/JavaScript/Reference/Global_Objects/Error/prototype
+tags:
+  - Error
+  - JavaScript
+  - Property
+translation_of: Web/JavaScript/Reference/Global_Objects/Error
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>Error.prototype</strong></code> Eigenschaft repräsentiert den Prototypen für den {{jsxref("Error")}} Konstruktor.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Alle {{jsxref("Error")}} Instanzen und Instanzen von {{jsxref("Global_Objects/Error", "nicht generischen Errors", "#Error_types", 1)}} erben von <code>Error.prototype</code>. Wie bei jeder Konstruktorfunktion, kann man den Prototypen des Konstruktors einsetzen, um Eigenschaften oder Methoden bei allen erstellten Instanzen hinzuzufügen.</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<h3 id="Standard-Eigenschaften">Standard-Eigenschaften</h3>
+
+<dl>
+ <dt><code>Error.prototype.constructor</code></dt>
+ <dd>Spezifiziert die Funktion, die einen Prototypen einer Instanz erstellt.</dd>
+ <dt>{{jsxref("Error.prototype.message")}}</dt>
+ <dd>Errornachricht.</dd>
+ <dt>{{jsxref("Error.prototype.name")}}</dt>
+ <dd>Errorname.</dd>
+</dl>
+
+<h3 id="Vendor-spezifische_Erweiterungen">Vendor-spezifische Erweiterungen</h3>
+
+<div>{{non-standard_header}}</div>
+
+<h4 id="Microsoft">Microsoft</h4>
+
+<dl>
+ <dt>{{jsxref("Error.prototype.description")}} {{non-standard_inline}}</dt>
+ <dd>Errorbeschreibung. Ist das gleiche wie {{jsxref("Error.prototype.message")}}</dd>
+ <dt>{{jsxref("Error.prototype.number")}} {{non-standard_inline}}</dt>
+ <dd>Errornummer.</dd>
+</dl>
+
+<h4 id="Mozilla">Mozilla</h4>
+
+<dl>
+ <dt>{{jsxref("Error.prototype.fileName")}} {{non-standard_inline}}</dt>
+ <dd>Pfad zu der Datei, die der der Error ausgelöst wurde.</dd>
+ <dt>{{jsxref("Error.prototype.lineNumber")}} {{non-standard_inline}}</dt>
+ <dd>Zeilennummer in der Datei, in der der Error ausgelöst wurde.</dd>
+ <dt>{{jsxref("Error.prototype.columnNumber")}} {{non-standard_inline}}</dt>
+ <dd>Spaltennummer in der Zeile, in der der Error ausgelöst wurde.</dd>
+ <dt>{{jsxref("Error.prototype.stack")}} {{non-standard_inline}}</dt>
+ <dd>Stacktrace.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<dl>
+ <dt>{{jsxref("Error.prototype.toSource()")}} {{non-standard_inline}}</dt>
+ <dd>Gibt einen String zurück, der den Quelltext eines spezifischen {{jsxref("Error")}} Objektes beinhaltet. Man kann diesen einsetzen, um ein neues Objekt zu erstellen. Überschreibt die {{jsxref("Object.prototype.toSource()")}} Methode.</dd>
+ <dt>{{jsxref("Error.prototype.toString()")}}</dt>
+ <dd>Gibt einen String zurück, der das Objekt repräsentiert. Überschreibt die {{jsxref("Object.prototype.toString()")}} Methode.</dd>
+</dl>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.3.1', 'Error')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-error.prototype', 'Error')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-error.prototype', 'Error')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Error.prototype")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("Object.prototype")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/error/stack/index.html b/files/de/web/javascript/reference/global_objects/error/stack/index.html
new file mode 100644
index 0000000000..ed930983bc
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/error/stack/index.html
@@ -0,0 +1,124 @@
+---
+title: Error.prototype.stack
+slug: Web/JavaScript/Reference/Global_Objects/Error/Stack
+tags:
+  - Error
+  - JavaScript
+  - Non-standard
+  - Property
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/Stack
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>Die nicht standardisierte <strong><code>stack</code></strong> Eigenschaft des {{jsxref("Error")}} Objektes zeigt den Verlauf der aufgerufenen Funktionen. Dabei wird die Reihenfolge der Aufrufe, der Zeile und die Datei der Aufrufes und die übergebenen Argumenten angegeben. Der stack String verläuft von den jüngsten Aufrufen zu den vorherigen Aufrufen, bis zum globalen Scope zurück.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Jeder Schritt wird durch einen neue Zeile getrennt. Der erste Teil einer Zeile besteht aus dem Funktionsnamen (wenn es kein Aufruf vom globalen Scope ist), gefolgt von einem @-Zeichen, dem Dateiort (ausgenommen, wenn die Funktion der Error-Konstruktor des geworfenen Errors ist), einem Doppelpunkt und einer Zeilennummer, wenn ein Dateiort existiert. Zu beachten ist, dass das {{jsxref("Error")}} Objekt auch die Eigenschaften <code>fileName</code>, <code>lineNumber</code> und <code>columnNumber</code> besitzt, um dieses von geworfenen Error wiederherzustellen (aber nur dem Fehler und nicht seinem trace).</p>
+
+<p>Zu beachten ist, dass dieses das Format von Firefox ist. Es gibt keine Standardformat, auch wenn Safari 6+ und Opera 12- ein ähnliches Format verwenden. Browser die die V8 JavaScript Umgebung benutzen (z. B. Chrome, Opera 15+, Android Browser) und IE10+ nutzen ein anderes Format (zusehen in den MSDN <a class="external" href="http://msdn.microsoft.com/en-us/library/windows/apps/hh699850.aspx">error.stack</a> docs).</p>
+
+<p><strong>Parameter Werte im Stack:</strong> Bis Firefox 14 ({{bug("744842")}}) folgten auf den Funktionsnamen die zu Strings konvertierten Werte der Parameter in runden Klammern vor dem @-Zeichen. Während ein Objekt (oder Array, etc.) zu<code> "[object Object]"</code> konvertiert werden und diese Werte nicht zurück zu einem existierenden Objekt ausgewertet werden können, können skalare Werte zurückverfolgt werden (manchmal kann es einfacher sein — nur in Firefox 14 möglich — <code>arguments.callee.caller.arguments</code> zu benutzen, der Funktionsname kann mit <code>arguments.callee.caller.name</code> erfragt werden). <code>"undefined"</code> wird mit <code>"(void 0)"</code> dargestellt. Zu beachten ist, dass String Argumente (oder auch Dateinamen), die Zeichen wie "@", "(", ")" beinhalten dazu führen, dass es nicht einfach ist, die Zeile in seine Komponenten aufzuteilen. In Firefox 14+ ist dieses kein Problem mehr.</p>
+
+<p>Verschiedene Browser setzen den this Wert zu verschiedenen Zeitpunkten. Zum Beispiel setzt Firefox diesen beim erstellen eines {{jsxref("Error")}} Objektes, während PhantomJS dieses nur setzt, wenn das {{jsxref("Error")}} Objekt geworfen wird und <a href="http://msdn.microsoft.com/en-us/library/windows/apps/hh699850.aspx">MSDN docs</a> scheinen diesem verhalten auch zu folgen.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Der folgende HTML-Quelltext demonstriert den Einsatz der <code>stack</code> Eigenschaft.</p>
+
+<pre class="brush: html">&lt;!DOCTYPE HTML&gt;
+&lt;meta charset="UTF-8"&gt;
+&lt;title&gt;Stack Trace Example&lt;/title&gt;
+&lt;body&gt;
+&lt;script&gt;
+function trace() {
+  try {
+    throw new Error('myError');
+  }
+  catch(e) {
+    alert(e.stack);
+  }
+}
+function b() {
+  trace();
+}
+function a() {
+  b(3, 4, '\n\n', undefined, {});
+}
+a('first call, firstarg');
+&lt;/script&gt;
+</pre>
+
+<p>Angenommen der oben stehende Quelltext ist auf einen Windows Datei System unter <code>C:\example.html</code> gespeichert, wird der folgende Text ausgegeben:</p>
+
+<p>Mit Firefox 30+ wird die Spaltennummer mit angegeben ({{bug("762556")}}):</p>
+
+<pre><samp>trace@file:///C:/example.html:9:17
+b@file:///C:/example.html:16:13
+a@file:///C:/example.html:19:13
+@file:///C:/example.html:21:9</samp></pre>
+
+<p>Von Firefox 14 bis Firefox 29:</p>
+
+<pre><samp>trace@file:///C:/example.html:9
+b@file:///C:/example.html:16
+a@file:///C:/example.html:19
+@file:///C:/example.html:21</samp></pre>
+
+<p>Bis Firefox 13 wird folgender Text ausgegeben:</p>
+
+<pre><samp>Error("myError")@:0
+trace()@file:///C:/example.html:9
+b(3,4,"\n\n",(void 0),[object Object])@file:///C:/example.html:16
+a("first call, firstarg")@file:///C:/example.html:19
+@file:///C:/example.html:21</samp></pre>
+
+<h3 id="Stacks_von_eval_Quelltext">Stacks von eval Quelltext</h3>
+
+<p>Angefangen mit Firefox 30 {{geckoRelease("30")}} enthällt der Stack von Errors auch Informationen von <code>Function()</code> und <code>eval()</code> Aufrufen mit detailierten Spalten- und Zeilennummern innerhalb dieser Aufrufe. Funktionsaufrufe werden mit <code>"&gt; Function"</code> angezeigt, Aufrufe mit eval werden mit <code>"&gt; eval"</code> angezeigt. Siehe {{bug("332176")}}.</p>
+
+<pre class="brush: js">try {
+  new Function('throw new Error()')();
+} catch (e) {
+  console.log(e.stack);
+}
+
+// anonymous@file:///C:/example.html line 7 &gt; Function:1:1
+// @file:///C:/example.html:7:6
+
+
+try {
+  eval("eval('FAIL')");
+} catch (x) {
+  console.log(x.stack);
+}
+
+// @file:///C:/example.html line 7 &gt; eval line 1 &gt; eval:1:1
+// @file:///C:/example.html line 7 &gt; eval:1:1
+// @file:///C:/example.html:7:6
+</pre>
+
+<p>Man kann auch die <code>//# sourceURL</code> Direktive benutzen, um den eval-Code zu benennen. Siehe auch <a href="/de/docs/Tools/Debugger/How_to/Debug_eval_sources">Debug eval sources</a> in den <a href="/de/docs/Tools/Debugger">Debugger</a> docs und diesen <a href="http://fitzgeraldnick.com/weblog/59/">Blogeintrag</a>.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Ist kein Teil einer Spezifikation, nicht standardisiert.</p>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Error.stack")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Components.stack">Components.stack</a></li>
+ <li>Externe Projekte: <a class="link-https" href="https://github.com/csnover/TraceKit/">TraceKit</a> und <a class="link-https" href="https://github.com/eriwen/javascript-stacktrace">javascript-stacktrace</a></li>
+ <li>MSDN: <a class="external" href="http://msdn.microsoft.com/en-us/library/windows/apps/hh699850.aspx" title="http://msdn.microsoft.com/en-us/library/windows/apps/hh699850.aspx">error.stack</a> docs</li>
+ <li><a href="https://github.com/v8/v8/wiki/Stack%20Trace%20API">Überblick über die V8 JavaScript Stack Trace API</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/error/tosource/index.html b/files/de/web/javascript/reference/global_objects/error/tosource/index.html
new file mode 100644
index 0000000000..59025435f5
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/error/tosource/index.html
@@ -0,0 +1,57 @@
+---
+title: Error.prototype.toSource()
+slug: Web/JavaScript/Reference/Global_Objects/Error/toSource
+tags:
+  - Error
+  - JavaScript
+  - Method
+  - Non-standard
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/toSource
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>Die <code><strong>toSource()</strong></code> Methode gibt den Quelltext zurück, der zu dem selben Error ausgewertet werden kann.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>e</var>.toSource()</pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein String, der den Quelltext des Fehlers enthält.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Das Aufrufen der <code>toSource</code> Methode auf einer {{jsxref("Error")}} Instanz (auch bei<em> <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Error#Error_Typen">NativeErrors</a></em>) gibt einen String zurück, der den Quelltext der Instanz enthält. Dieser String kann ausgeführt werden, um (annähernd) gleiches Objekt zu erzeugen. Normalerweise enthält der String den Quelltext des {{jsxref("Error")}} Konstruktors. Zum Beispiel:</p>
+
+<pre class="brush: js">(new<em>name</em>(<em>message</em> ,<em>fileName</em>,<em>lineNumber</em>))
+</pre>
+
+<p>wo die Attribute den Eigenschaften der Error-Instanz entsprechen.</p>
+
+<div class="note">
+<p><strong>Bemerkung:</strong> <span id="result_box" lang="de"><span>Seien Sie sich bewusst</span><span>, dass die Eigenschaften</span>, <span>die</span> <span>durch die toSource</span> <span>Methode</span> <span>bei der Erstellung</span> des Strings <span>verwendet</span>, veränderbar <span>sind</span> <span>und</span> <span>nicht genau die</span> <span>Funktion</span> <span>widerspiegeln</span><span>, die eine Fehler</span> <span>Instanz erstellt habt. Das betrifft</span><span> den Dateinamen </span><span>und</span> <span>die Zeilennummer.</span></span></p>
+</div>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>In keine Spezifikation enthalten. Implementiert in JavaScript 1.3.</p>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Error.toSource")}}</p>
+</div>
+
+<h2 id="See_auch">See auch</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype.fileName")}}</li>
+ <li>{{jsxref("Error.prototype.lineNumber")}}</li>
+ <li>{{jsxref("Error.prototype.message")}}</li>
+ <li>{{jsxref("Error.prototype.name")}}</li>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/error/tostring/index.html b/files/de/web/javascript/reference/global_objects/error/tostring/index.html
new file mode 100644
index 0000000000..15565bd296
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/error/tostring/index.html
@@ -0,0 +1,116 @@
+---
+title: Error.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/Error/toString
+tags:
+  - Error
+  - JavaScript
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/toString
+---
+<div>{{JSRef}}</div>
+
+<div>Die <code><strong>toString()</strong></code> Methode gibt einen String zurück, der das {{jsxref("Error")}} Objekt repräsentiert.</div>
+
+<div> </div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>e</var>.toString()</code></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Einen String, der das gegebenen {{jsxref("Error")}} Objekt repräsentiert.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Das {{jsxref("Error")}} Objekt überschreibt die {{jsxref("Object.prototype.toString()")}} Methode, die an allen Objekte vererbt werden. Die Semanik ist die folgende (angenommen {{jsxref("Object")}} und {{jsxref("String")}} wurden nicht verändert):</p>
+
+<pre class="brush: js">Error.prototype.toString = function() {
+  'use strict';
+
+  var obj = Object(this);
+  if (obj !== this) {
+    throw new TypeError();
+  }
+
+  var name = this.name;
+  name = (name === undefined) ? 'Error' : String(name);
+
+  var msg = this.message;
+  msg = (msg === undefined) ? '' : String(msg);
+
+  if (name === '') {
+    return msg;
+  }
+  if (msg === '') {
+    return name;
+  }
+
+  return name + ': ' + msg;
+};
+</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js">var e = new Error('fatal error');
+console.log(e.toString()); // 'Error: fatal error'
+
+e.name = undefined;
+console.log(e.toString()); // 'Error: fatal error'
+
+e.name = '';
+console.log(e.toString()); // 'fatal error'
+
+e.message = undefined;
+console.log(e.toString()); // 'Error'
+
+e.name = 'hello';
+console.log(e.toString()); // 'hello'
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.4.4', 'Error.prototype.toString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-error.prototype.tostring', 'Error.prototype.toString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-error.prototype.tostring', 'Error.prototype.toString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Error.toString")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype.toSource()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/escape/index.html b/files/de/web/javascript/reference/global_objects/escape/index.html
new file mode 100644
index 0000000000..84ad406566
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/escape/index.html
@@ -0,0 +1,132 @@
+---
+title: escape()
+slug: Web/JavaScript/Reference/Global_Objects/escape
+tags:
+  - JavaScript
+  - Veraltet
+translation_of: Web/JavaScript/Reference/Global_Objects/escape
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>Die veraltete Funktion <code><strong>escape()</strong></code> erzeugt einen neuen Text, in welchem gewisse Zeichen durch eine Hexadezimal-Escape-Sequenz ersetzt wurden. Es wird empfohlen, {{jsxref("encodeURI")}} oder {{jsxref("encodeURIComponent")}} stattdessen zu nutzen.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>escape(str)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>str</code></dt>
+ <dd>Ein Text welcher verarbeitet wird.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein neuer Text, in welchem gewisse Zeichen escaped wurden.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>escape</code>-Funktion ist Teil des <em>globalen Objektes</em>. Hierbei werden spezielle Zeichen codiert. Außnahme bilden hier: @*_+-./</p>
+
+<p>Die hexadezimale Form für Zeichen, deren Code-Einheitswert 0xFF oder weniger ist, enspricht einer zwei Ziffern großen Escape-Sequenz: %xx. Für Zeichen mit einem größeren Code-Einheitswert wird ein vier-Ziffern-Format genutzt: %<strong>u</strong>xxxx</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js">escape("abc123");     // "abc123"
+escape("äöü");        // "%E4%F6%FC"
+escape("ć");          // "%u0107"
+
+// Spezielle Zeichen
+escape("@*_+-./");    // "@*_+-./"</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-B.2.1', 'escape')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Informativ definiert in Compatibility Annex B</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-escape-string', 'escape')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Normativ definitiert in Annex B für Erweiterte ECMAScript-Features in Webbrowsern</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-escape-string', 'escape')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Normativ definitiert in Annex B für Erweiterte ECMAScript-Features in Webbrowsern</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_Auch">Siehe Auch</h2>
+
+<ul>
+ <li>{{jsxref("encodeURI")}}</li>
+ <li>{{jsxref("encodeURIComponent")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/evalerror/index.html b/files/de/web/javascript/reference/global_objects/evalerror/index.html
new file mode 100644
index 0000000000..3043bdf908
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/evalerror/index.html
@@ -0,0 +1,118 @@
+---
+title: EvalError
+slug: Web/JavaScript/Reference/Global_Objects/EvalError
+tags:
+  - Error
+  - EvalError
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/EvalError
+---
+<div>{{JSRef}}</div>
+
+<p>Das <strong><code>EvalError</code></strong> Objekt bedeutet einen Fehler in Verbindung mit der globalen {{jsxref("Global_Objects/eval", "eval()")}} Funktion. Dieser Fehler wird nicht von JavaScript erzeugt, jedoch gibt es das <code>EvalError</code> Objekt noch aus Kompatibilitätsgründen.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>new EvalError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</code></pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>message</code></dt>
+ <dd>Optional. Für Menschen lesbare Beschreibung des Fehlers.</dd>
+ <dt><code>fileName</code> {{non-standard_inline}}</dt>
+ <dd>Optional. Der Name der Datei, die den Code enthält, welcher zu dem Fehler führt.</dd>
+ <dt><code>lineNumber</code> {{non-standard_inline}}</dt>
+ <dd>Optional. Die Zeilennummer, die den Code enthält, welcher zu dem Fehler führt.</dd>
+</dl>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt>{{jsxref("EvalError.prototype")}}</dt>
+ <dd>Erlaubt das Hinzufügen von Eigenschaften zu einem <code>EvalError</code> Objekt.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<p>Das globale <code>EvalError</code> Objekt enthält keine eigen Methoden, jedoch erbt es einige Methoden über die Prototypenkette.</p>
+
+<h2 id="EvalError_Instanzen"><code>EvalError</code> Instanzen</h2>
+
+<h3 id="Eigenschaften_2">Eigenschaften</h3>
+
+<div>{{page('/de/docs/Web/JavaScript/Reference/Global_Objects/EvalError/prototype', 'Eigenschaften')}}</div>
+
+<h3 id="Methoden_2">Methoden</h3>
+
+<div>{{page('/de/docs/Web/JavaScript/Reference/Global_Objects/EvalError/prototype', 'Methoden')}}</div>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p><code>EvalError</code> wird nicht in der aktuellen ECMAScript Spezifikation verwendet und wird daher auch nicht von der Laufzeitumgebung erzeugt. Jedoch wird das Objekt aus Gründen der Rückwärtskompatibilität zu älteren Versionen der Spezifikation erhalten.</p>
+
+<h3 id="Erstellen_eines_EvalError">Erstellen eines <code>EvalError</code></h3>
+
+<pre class="brush: js">try {
+  throw new EvalError('Hello', 'someFile.js', 10);
+} catch (e) {
+  console.log(e instanceof EvalError); // true
+  console.log(e.message);              // "Hello"
+  console.log(e.name);                 // "EvalError"
+  console.log(e.fileName);             // "someFile.js"
+  console.log(e.lineNumber);           // 10
+  console.log(e.columnNumber);         // 0
+  console.log(e.stack);                // "@Scratchpad/2:2:9\n"
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.6.1', 'EvalError')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Nicht benutzt in dieser Spezifikation. Erhalten für Rückwärtskompatibilität.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-evalerror', 'EvalError')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Nicht benutzt in dieser Spezifikation. Erhalten für Rückwärtskompatibilität.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-evalerror', 'EvalError')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("javascript.builtins.EvalError")}}</p>
+</div>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("EvalError.prototype")}}</li>
+ <li>{{jsxref("Global_Objects/eval", "eval()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/evalerror/prototype/index.html b/files/de/web/javascript/reference/global_objects/evalerror/prototype/index.html
new file mode 100644
index 0000000000..03783a0294
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/evalerror/prototype/index.html
@@ -0,0 +1,89 @@
+---
+title: EvalError.prototype
+slug: Web/JavaScript/Reference/Global_Objects/EvalError/prototype
+tags:
+  - Error
+  - EvalError
+  - JavaScript
+  - Property
+translation_of: Web/JavaScript/Reference/Global_Objects/EvalError
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>EvalError.prototype</strong></code> Eigenschaft repräsentiert den Prototypen des {{jsxref("EvalError")}} Konstruktors.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Alle {{jsxref("EvalError")}} Instanzen erben von <code>EvalError.prototype</code>. Man kann den Prototypen benutzen, um Eigenschaften oder Methoden für alle Instanzen hinzuzufügen.</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt><code>EvalError.prototype.constructor</code></dt>
+ <dd>Spezifiziert die Funktion, die einen Instanzprototypen erstellt.</dd>
+ <dt>{{jsxref("Error.prototype.message", "EvalError.prototype.message")}}</dt>
+ <dd>Fehlernachricht. Obwohl ECMA-262 spezifiziert, dass {{jsxref("EvalError")}} seine eigene <code>message</code> Eigenschaft haben soll, wird diese in <a href="/de/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> von {{jsxref("Error.prototype.message")}} geerbt.</dd>
+ <dt>{{jsxref("Error.prototype.name", "EvalError.prototype.name")}}</dt>
+ <dd>Fehlername. Geerbt von {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.fileName", "EvalError.prototype.fileName")}}</dt>
+ <dd>Pfad zur Datei, die der der Fehler ausgelöst hat. Geerbt von {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.lineNumber", "EvalError.prototype.lineNumber")}}</dt>
+ <dd>Zeilennummer in der Datei, in der der Fehler ausgelöst wurde. Geerbt von {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.columnNumber", "EvalError.prototype.columnNumber")}}</dt>
+ <dd>Dpaltennummer in der Zeile, in der der Fehler ausgelöst wurde. Geerbt von {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.stack", "EvalError.prototype.stack")}}</dt>
+ <dd>Stacktrace. Geerbt von {{jsxref("Error")}}.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<p>Obwohl des {{jsxref("EvalError")}} Prototypobjekt keine eigene Methode enthält, erben {{jsxref("EvalError")}} Instanzen einige Methoden durch die Prototypenkette.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definiert als <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definiert als <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Definiert als <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.EvalError")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype")}}</li>
+ <li>{{jsxref("Function.prototype")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/float32array/index.html b/files/de/web/javascript/reference/global_objects/float32array/index.html
new file mode 100644
index 0000000000..bb59fcf59f
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/float32array/index.html
@@ -0,0 +1,204 @@
+---
+title: Float32Array
+slug: Web/JavaScript/Reference/Global_Objects/Float32Array
+tags:
+  - Constructor
+  - JavaScript
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/Float32Array
+---
+<div>{{JSRef}}</div>
+
+<p>Das <strong><code>Float32Array</code></strong> getypte Array repräsentiert ein Array von 32 Bit Gleitkommazahlen (entspricht dem C Datengyp <code>float</code>) in der Plattform-Byte-Reihenfolge. Wenn Kontrolle über die Byte-Reihenfolge erforderlich ist, muss {{jsxref("DataView")}} stattdessen benutz werden. Die Inhalte werden mit <code>0</code> initialisiert. Wie erwartet, kann man Element in einem Array mit Objektmethoden referenzieren oder man benutzt die normale Arrayindex-Syntax (das ist die Klammernotation).</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">new Float32Array(); // new in ES2017
+new Float32Array(length);
+new Float32Array(typedArray);
+new Float32Array(object);
+new Float32Array(buffer [, byteOffset [, length]]);</pre>
+
+<p>Für mehr Informationen über die Konstruktorensyntax und die Parameter, siehe auf der Seite <em><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#Syntax">TypedArray</a></em>.</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Float32Array.BYTES_PER_ELEMENT")}}</dt>
+ <dd>Gibt die Größe der Elemente zurück. <code>4</code> im Falle eines <code>Float32Array</code>.</dd>
+ <dt>Float32Array.length</dt>
+ <dd>Statische Längeneigenschaft welche den Wert 0 hat. Für die aktuelle Länge (Anzahl der Elemente) siehe {{jsxref("TypedArray.prototype.length", "Float32Array.prototype.length")}}.</dd>
+ <dt>{{jsxref("TypedArray.name", "Float32Array.name")}}</dt>
+ <dd>Gibt den Stringwert des Konstruktornamens zurück. In Fall eines <code>Float32Array</code> Typs: <code>"Float32Array"</code>.</dd>
+ <dt>{{jsxref("TypedArray.prototype", "Float32Array.prototype")}}</dt>
+ <dd>Prototyp für das <em>TypedArray</em> Objekt.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.from", "Float32Array.from()")}}</dt>
+ <dd>Erstelle ein neues <code>Float32Array</code> von einem Array-Ähnlichen oder Iterable Objekt. Siehe auch {{jsxref("Array.from()")}}.</dd>
+ <dt>{{jsxref("TypedArray.of", "Float32Array.of()")}}</dt>
+ <dd>Erstellt ein neues <code>Float32Array</code> mit einer variablen Anzahl an Argumenten. Sie auch {{jsxref("Array.of()")}}.</dd>
+</dl>
+
+<h2 id="Float32Array_Prototyp"><code>Float32Array</code> Prototyp</h2>
+
+<p>Alle <code>Float32Array</code> Objekte erben von {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.</p>
+
+<h3 id="Eigenschaften_2">Eigenschaften</h3>
+
+<dl>
+ <dt><code>Float32Array.prototype.constructor</code></dt>
+ <dd>Gibt die Funktion, die einen Instanzprototyp erstellt zurück. Diese ist auf den <code>Float32Array</code> Konstruktor voreingestellt.</dd>
+ <dt>{{jsxref("TypedArray.prototype.buffer", "Float32Array.prototype.buffer")}} {{readonlyInline}}</dt>
+ <dd>Gibt die {{jsxref("ArrayBuffer")}} Referenz zurück, welche nach der Erstellung eines <code>Float32Array</code> fest ist und nicht mehr geändert werden kann.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteLength", "Float32Array.prototype.byteLength")}} {{readonlyInline}}</dt>
+ <dd>Gibt die Länge (in Bytes) des <code>Float32Array</code> vom Anfang seines {{jsxref("ArrayBuffer")}} zurück. WIrd beim erstellen festgesetzt und kann nicht geändert werden.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteOffset", "Float32Array.prototype.byteOffset")}} {{readonlyInline}}</dt>
+ <dd>Gibt das Offset (in Bytes) des <code>Float32Array</code> vom Anfang seines {{jsxref("ArrayBuffer")}} zurück. WIrd beim erstellen festgesetzt und kann nicht geändert werden.</dd>
+ <dt>{{jsxref("TypedArray.prototype.length", "Float32Array.prototype.length")}} {{readonlyInline}}</dt>
+ <dd>Gibt Anzahl der Elemente des <code>Float32Array</code> zurück. WIrd beim erstellen festgesetzt und kann nicht geändert werden.</dd>
+</dl>
+
+<h3 id="Methoden_2">Methoden</h3>
+
+<dl>
+ <dt>{{jsxref("TypedArray.copyWithin", "Float32Array.prototype.copyWithin()")}}</dt>
+ <dd>Kopiert eine Sequenz von Arrayelementen in das Array. Siehe auch {{jsxref("Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.entries", "Float32Array.prototype.entries()")}}</dt>
+ <dd>Gibt ein neues <code>Array Iterator</code> Objekt zurück, welches die Schlüssel/Wertepaare für jeden Index im Array enthält. Siehe auch {{jsxref("Array.prototype.entries()")}}.</dd>
+ <dt>{{jsxref("TypedArray.every", "Float32Array.prototype.every()")}}</dt>
+ <dd>Teste, ob alle Elemente einem, als Funktion übergebenen, Test erfüllen. Siehe auch Array.prototype.every()")}}.</dd>
+ <dt>{{jsxref("TypedArray.fill", "Float32Array.prototype.fill()")}}</dt>
+ <dd>Füllt alle Elemente eines Arrays vom Startindex bis zum Endindex mit einem statischen Wert. Siehe auch {{jsxref("Array.prototype.fill()")}}.</dd>
+ <dt>{{jsxref("TypedArray.filter", "Float32Array.prototype.filter()")}}</dt>
+ <dd>Erstellt ein neues Array mit allen Elementen des alten Arrays, für die eine übergebene Filterfunktion <code>true</code> zurückgibt. Siehe auch {{jsxref("Array.prototype.filter()")}}.</dd>
+ <dt>{{jsxref("TypedArray.find", "Float32Array.prototype.find()")}}</dt>
+ <dd>Gibt ein gefundenes Element des Arrays zurück, welches bei der übergebenen Testfunktion <code>true</code> zurückgibt oder <code>undefined</code> wenn es keins gibt. Siehe auch {{jsxref("Array.prototype.find()")}}.</dd>
+ <dt>{{jsxref("TypedArray.findIndex", "Float32Array.prototype.findIndex()")}}</dt>
+ <dd>Gibt den Index eines gefundenen Elements des Arrays zurück, welches bei der übergebenen Testfunktion <code>true</code> zurückgibt oder <code>-1</code> wenn es keins gibt. Siehe auch {{jsxref("Array.prototype.findIndex()")}}.</dd>
+ <dt>{{jsxref("TypedArray.forEach", "Float32Array.prototype.forEach()")}}</dt>
+ <dd>Ruft für jedes Element in einem Array eine Funktion auf. Siehe auch {{jsxref("Array.prototype.forEach()")}}.</dd>
+ <dt>{{jsxref("TypedArray.includes", "Float32Array.prototype.includes()")}} {{experimental_inline}}</dt>
+ <dd>Überprüft, ob ein getyptes Array ein bestimmtes Element enthält und gibt gegebenfalls <code>true</code> oder<code>false</code> zurück. Siehe auch {{jsxref("Array.prototype.includes()")}}.</dd>
+ <dt>{{jsxref("TypedArray.indexOf", "Float32Array.prototype.indexOf()")}}</dt>
+ <dd>Gibt den ersten Index eines Elementes zurück, welches gleiche eines spezifizierten Wertes ist oder <code>-1</code> wenn es keins gibt. Siehe auch {{jsxref("Array.prototype.indexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.join", "Float32Array.prototype.join()")}}</dt>
+ <dd>Führt alle Elemente eines Arrays zu einem String zusammen. Siehe auch {{jsxref("Array.prototype.join()")}}.</dd>
+ <dt>{{jsxref("TypedArray.keys", "Float32Array.prototype.keys()")}}</dt>
+ <dd>Gibt ein neuen <code>Array Iterator</code> zurück, der alle Schlüssel für jeden Index im Array enthält. Siehe auch {{jsxref("Array.prototype.keys()")}}.</dd>
+ <dt>{{jsxref("TypedArray.lastIndexOf", "Float32Array.prototype.lastIndexOf()")}}</dt>
+ <dd>Gibt den letzen Index eines Elementes zurück, welches gleiche eines spezifizierten Wertes ist oder <code>-1</code> wenn es keins gibt. Siehe auch {{jsxref("Array.prototype.lastIndexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.map", "Float32Array.prototype.map()")}}</dt>
+ <dd>Erstellt ein neues Array mit den Resultaten spezifizierten Funktion, die für jedes Element aufgerufen wird. Siehe auch {{jsxref("Array.prototype.map()")}}.</dd>
+ <dt>{{jsxref("TypedArray.move", "Float32Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt>
+ <dd>Ehemalige nicht Standardisierte Version von {{jsxref("TypedArray.copyWithin", "Float32Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduce", "Float32Array.prototype.reduce()")}}</dt>
+ <dd>Führt eine Funktion gegeben einen Akkumulator und jeden Wert des Array aus (von links nach rechts), um das Array auf einen Wert zu reduzieren. Siehe auch {{jsxref("Array.prototype.reduce()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduceRight", "Float32Array.prototype.reduceRight()")}}</dt>
+ <dd>Führt eine Funktion gegeben einen Akkumulator und jeden Wert des Array aus (von rechts nach links), um das Array auf einen Wert zu reduzieren. Siehe auch {{jsxref("Array.prototype.reduce()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reverse", "Float32Array.prototype.reverse()")}}</dt>
+ <dd>Kehrt die Reihenfolge von jedem Element eines Arrays um — das Erste wird das Letzte und das Letzte wird das Erste. Siehe auch {{jsxref("Array.prototype.reverse()")}}.</dd>
+ <dt>{{jsxref("TypedArray.set", "Float32Array.prototype.set()")}}</dt>
+ <dd>Speichert mehrere Werte in einem getypten Array und ließt Eingabewerte aus einem spezifiziertem Array.</dd>
+ <dt>{{jsxref("TypedArray.slice", "Float32Array.prototype.slice()")}}</dt>
+ <dd>Extrahiert einen Bereich aus einem Array und gibt diesen in einem neuen Array zurück. Siehe auch {{jsxref("Array.prototype.slice()")}}.</dd>
+ <dt>{{jsxref("TypedArray.some", "Float32Array.prototype.some()")}}</dt>
+ <dd>Gibt <code>true</code> zurück, wenn nur ein Element in einem Array den als Funktion übergebenen Test erfüllt. Siehe auch {{jsxref("Array.prototype.some()")}}</dd>
+ <dt>{{jsxref("TypedArray.sort", "Float32Array.prototype.sort()")}}</dt>
+ <dd>Sortiert die Elemente eines Arrays in-Place und gibt das Array zurück. Siehe auch {{jsxref("Array.prototype.sort()")}}.</dd>
+ <dt>{{jsxref("TypedArray.subarray", "Float32Array.prototype.subarray()")}}</dt>
+ <dd>Gibt ein neues <code>Float32Array</code> vom gegebenen Start- und Endindex zurück.</dd>
+ <dt>{{jsxref("TypedArray.values", "Float32Array.prototype.values()")}}</dt>
+ <dd>Gibt ein neues <code>Array Iterator</code> Objekt zurück, welches die Werte von jedem Index im Array enthält. Siehe auch {{jsxref("Array.prototype.values()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toLocaleString", "Float32Array.prototype.toLocaleString()")}}</dt>
+ <dd>Gibt einen Ortsabhängige Stringrepräsentation des Arrays und seiner Element zurück. Siehe auch {{jsxref("Array.prototype.toLocaleString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toString", "Float32Array.prototype.toString()")}}</dt>
+ <dd>Gibt einen Stringrepräsentation des Arrays und seiner Element zurück. Siehe auch {{jsxref("Array.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.@@iterator", "Float32Array.prototype[@@iterator]()")}}</dt>
+ <dd>Gibt ein neues <code>Array Iterator</code> Objekt zurück, welches die zugehörigen Werte für jeden Index im Array enthalten.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Verschiedene Wege, um ein <code>Float32Array</code> zu erstellen:</p>
+
+<pre class="brush: js">// From a length
+var float32 = new Float32Array(2);
+float32[0] = 42;
+console.log(float32[0]); // 42
+console.log(float32.length); // 2
+console.log(float32.BYTES_PER_ELEMENT); // 4
+
+// From an array
+var arr = new Float32Array([21,31]);
+console.log(arr[1]); // 31
+
+// From another TypedArray
+var x = new Float32Array([21, 31]);
+var y = new Float32Array(x);
+console.log(y[0]); // 21
+
+// From an ArrayBuffer
+var buffer = new ArrayBuffer(16);
+var z = new Float32Array(buffer, 0, 4);
+
+// From an iterable
+var iterable = function*(){ yield* [1,2,3]; }();
+var float32 = new Float32Array(iterable);
+// Float32Array[1, 2, 3]
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Ersetzt in ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initiale Definition in einem ECMA Standard. Spezifiziert, dass ein <code>new</code> benötigt wird.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>ECMAScript 2017 ändert den <code>Float32Array</code> Konstruktor, um die <code>ToIndex</code> Operation zu benutzen und erlaubt einen Konstruktor ohne Parameter.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Float32Array")}}</p>
+
+<h2 id="Kompatibilitätshinweise">Kompatibilitätshinweise</h2>
+
+<p>Mit Beginn von ECMAScript 2015, müssen <code>Float32Array</code> Konstruktoren mit einem {{jsxref("Operators/new", "new")}} benutzt werden. Der Aufruf eines <code>Float32Array</code> Konstruktors als eine Funktion ohne <code>new</code>, Führt jetzt zu einem {{jsxref("TypeError")}}.</p>
+
+<pre class="brush: js example-bad">var dv = Float32Array([1, 2, 3]);
+// TypeError: calling a builtin Float32Array constructor
+// without new is forbidden</pre>
+
+<pre class="brush: js example-good">var dv = new Float32Array([1, 2, 3]);</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Typed_arrays" title="en/JavaScript typed arrays">JavaScript getypte Arrays</a></li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("DataView")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/float64array/index.html b/files/de/web/javascript/reference/global_objects/float64array/index.html
new file mode 100644
index 0000000000..6d3b5003d8
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/float64array/index.html
@@ -0,0 +1,204 @@
+---
+title: Float64Array
+slug: Web/JavaScript/Reference/Global_Objects/Float64Array
+tags:
+  - Constructor
+  - JavaScript
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/Float64Array
+---
+<div>{{JSRef}}</div>
+
+<p>Das <strong><code>Float64Array</code></strong> getypte Array repräsentiert ein Array von 64 Bit Gleitkommazahlen (entspricht dem C Datentyp <code>double</code>) in der Plattform-Byte-Reihenfolge. Wenn Kontrolle über die Byte-Reihenfolge erforderlich ist, muss stattdessen {{jsxref("DataView")}} benutz werden. Die Inhalte werden mit <code>0</code> initialisiert. Wie erwartet, kann man Elemente in einem Array mit Objektmethoden referenzieren oder man benutzt die normale Array-Index-Syntax (das ist die Klammernotation).</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">new Float64Array(); // new in ES2017
+new Float64Array(length);
+new Float64Array(typedArray);
+new Float64Array(object);
+new Float64Array(buffer [, byteOffset [, length]]);</pre>
+
+<p>Für mehr Informationen über die Konstruktorensyntax und die Parameter, siehe auf der Seite <em><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#Syntax">TypedArray</a></em>.</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Float64Array.BYTES_PER_ELEMENT")}}</dt>
+ <dd>Gibt die Größe der Elemente zurück. <code>8</code> im Falle eines <code>Float64Array</code>.</dd>
+ <dt>Float64Array.length</dt>
+ <dd>Statische Längeneigenschaft, welche den Wert 0 hat. Für die aktuelle Länge (Anzahl der Elemente) siehe {{jsxref("TypedArray.prototype.length", "Float64Array.prototype.length")}}.</dd>
+ <dt>{{jsxref("TypedArray.name", "Float64Array.name")}}</dt>
+ <dd>Gibt den Stringwert des Konstruktornamens zurück. In Fall eines <code>Float64Array</code> Typs: <code>"Float64Array"</code>.</dd>
+ <dt>{{jsxref("TypedArray.prototype", "Float64Array.prototype")}}</dt>
+ <dd>Prototyp für das <em>TypedArray</em> Objekt</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.from", "Float64Array.from()")}}</dt>
+ <dd>Erstellt ein neues <code>Float64Array</code> von einem Array-ähnlichen oder iterierbaren Objekt. Siehe auch {{jsxref("Array.from()")}}.</dd>
+ <dt>{{jsxref("TypedArray.of", "Float64Array.of()")}}</dt>
+ <dd>Erstellt ein neues <code>Float64Array</code> mit einer variablen Anzahl an Argumenten. Sie auch {{jsxref("Array.of()")}}.</dd>
+</dl>
+
+<h2 id="Float64Array_Prototyp"><code>Float64Array</code> Prototyp</h2>
+
+<p>Alle <code>Float64Array</code> Objekte erben von {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.</p>
+
+<h3 id="Eigenschaften_2">Eigenschaften</h3>
+
+<dl>
+ <dt><code>Float64Array.prototype.constructor</code></dt>
+ <dd>Gibt die Funktion, die einen Instanzprototyp erstellt, zurück. Diese ist auf den <code>Float64Array</code> Konstruktor voreingestellt.</dd>
+ <dt>{{jsxref("TypedArray.prototype.buffer", "Float64Array.prototype.buffer")}} {{readonlyInline}}</dt>
+ <dd>Gibt die {{jsxref("ArrayBuffer")}} Referenz zurück, welche nach der Erstellung eines <code>Float64Array</code> fest ist und nicht mehr geändert werden kann.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteLength", "Float64Array.prototype.byteLength")}} {{readonlyInline}}</dt>
+ <dd>Gibt die Länge (in Bytes) des <code>Float64Array</code> vom Anfang seines {{jsxref("ArrayBuffer")}} zurück. Wird beim Erstellen festgesetzt und kann nicht geändert werden.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteOffset", "Float64Array.prototype.byteOffset")}} {{readonlyInline}}</dt>
+ <dd>Gibt das Offset (in Bytes) des <code>Float64Array</code> vom Anfang seines {{jsxref("ArrayBuffer")}} zurück. Wird beim Erstellen festgesetzt und kann nicht geändert werden.</dd>
+ <dt>{{jsxref("TypedArray.prototype.length", "Float64Array.prototype.length")}} {{readonlyInline}}</dt>
+ <dd>Gibt die Anzahl der Elemente des <code>Float64Array</code> zurück. Wird beim Erstellen festgesetzt und kann nicht geändert werden.</dd>
+</dl>
+
+<h3 id="Methoden_2">Methoden</h3>
+
+<dl>
+ <dt>{{jsxref("TypedArray.copyWithin", "Float64Array.prototype.copyWithin()")}}</dt>
+ <dd>Kopiert eine Sequenz von Arrayelementen in das Array. Siehe auch {{jsxref("Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.entries", "Float64Array.prototype.entries()")}}</dt>
+ <dd>Gibt ein neues <code>Array Iterator</code> Objekt zurück, welches die Schlüssel/Wertepaare für jeden Index im Array enthält. Siehe auch {{jsxref("Array.prototype.entries()")}}.</dd>
+ <dt>{{jsxref("TypedArray.every", "Float64Array.prototype.every()")}}</dt>
+ <dd>Teste, ob alle Elemente einem, als Funktion übergebenen, Test erfüllen. Siehe auch Array.prototype.every()")}}.</dd>
+ <dt>{{jsxref("TypedArray.fill", "Float64Array.prototype.fill()")}}</dt>
+ <dd>Füllt alle Elemente eines Arrays vom Startindex bis zum Endindex mit einem statischen Wert. Siehe auch {{jsxref("Array.prototype.fill()")}}.</dd>
+ <dt>{{jsxref("TypedArray.filter", "Float64Array.prototype.filter()")}}</dt>
+ <dd>Erstellt ein neues Array mit allen Elementen des alten Arrays, für die eine übergebene Filterfunktion <code>true</code> zurückgibt. Siehe auch {{jsxref("Array.prototype.filter()")}}.</dd>
+ <dt>{{jsxref("TypedArray.find", "Float64Array.prototype.find()")}}</dt>
+ <dd>Gibt ein gefundenes Element des Arrays zurück, welches bei der übergebenen Testfunktion <code>true</code> zurückgibt oder <code>undefined</code> wenn es keins gibt. Siehe auch {{jsxref("Array.prototype.find()")}}.</dd>
+ <dt>{{jsxref("TypedArray.findIndex", "Float64Array.prototype.findIndex()")}}</dt>
+ <dd>Gibt den Index eines gefundenen Elements des Arrays zurück, welches bei der übergebenen Testfunktion <code>true</code> zurückgibt oder <code>-1</code> wenn es keins gibt. Siehe auch {{jsxref("Array.prototype.findIndex()")}}.</dd>
+ <dt>{{jsxref("TypedArray.forEach", "Float64Array.prototype.forEach()")}}</dt>
+ <dd>Ruft für jedes Element in einem Array eine Funktion auf. Siehe auch {{jsxref("Array.prototype.forEach()")}}.</dd>
+ <dt>{{jsxref("TypedArray.includes", "Float64Array.prototype.includes()")}} {{experimental_inline}}</dt>
+ <dd>Überprüft, ob ein getyptes Array ein bestimmtes Element enthält und gibt gegebenfalls <code>true</code> oder <code>false</code> zurück. Siehe auch {{jsxref("Array.prototype.includes()")}}.</dd>
+ <dt>{{jsxref("TypedArray.indexOf", "Float64Array.prototype.indexOf()")}}</dt>
+ <dd>Gibt den ersten Index eines Elementes zurück, welches kongruent eines spezifizierten Wertes ist oder <code>-1</code> wenn es keins gibt. Siehe auch {{jsxref("Array.prototype.indexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.join", "Float64Array.prototype.join()")}}</dt>
+ <dd>Führt alle Elemente eines Arrays zu einem String zusammen. Siehe auch {{jsxref("Array.prototype.join()")}}.</dd>
+ <dt>{{jsxref("TypedArray.keys", "Float64Array.prototype.keys()")}}</dt>
+ <dd>Gibt ein neuen <code>Array Iterator</code> zurück, der alle Schlüssel für jeden Index im Array enthält. Siehe auch {{jsxref("Array.prototype.keys()")}}.</dd>
+ <dt>{{jsxref("TypedArray.lastIndexOf", "Float64Array.prototype.lastIndexOf()")}}</dt>
+ <dd>Gibt den letzen Index eines Elementes zurück, welches gleiche eines spezifizierten Wertes ist oder <code>-1</code> wenn es keins gibt. Siehe auch {{jsxref("Array.prototype.lastIndexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.map", "Float64Array.prototype.map()")}}</dt>
+ <dd>Erstellt ein neues Array mit den Resultaten einer für jedes Element aufgerufenen Funtion. Siehe auch {{jsxref("Array.prototype.map()")}}.</dd>
+ <dt>{{jsxref("TypedArray.move", "Float64Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt>
+ <dd>Ehemalige, nicht standardisierte Version von {{jsxref("TypedArray.copyWithin", "Float64Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduce", "Float64Array.prototype.reduce()")}}</dt>
+ <dd>Führt eine Funktion gegen einen Akkumulator und jeden Wert des Array aus (von links nach rechts), um das Array auf einen Wert zu reduzieren. Siehe auch {{jsxref("Array.prototype.reduce()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduceRight", "Float64Array.prototype.reduceRight()")}}</dt>
+ <dd>Führt eine Funktion gegen einen Akkumulator und jeden Wert des Array aus (von rechts nach links), um das Array auf einen Wert zu reduzieren. Siehe auch {{jsxref("Array.prototype.reduce()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reverse", "Float64Array.prototype.reverse()")}}</dt>
+ <dd>Kehrt die Reihenfolge von jedem Element eines Arrays um — das Erste wird das Letzte und das Letzte wird das Erste. Siehe auch {{jsxref("Array.prototype.reverse()")}}.</dd>
+ <dt>{{jsxref("TypedArray.set", "Float64Array.prototype.set()")}}</dt>
+ <dd>Speichert mehrere Werte in einem getypten Array und liest Eingabewerte aus einem spezifiziertem Array.</dd>
+ <dt>{{jsxref("TypedArray.slice", "Float64Array.prototype.slice()")}}</dt>
+ <dd>Extrahiert einen Bereich aus einem Array und gibt diesen in einem neuen Array zurück. Siehe auch {{jsxref("Array.prototype.slice()")}}.</dd>
+ <dt>{{jsxref("TypedArray.some", "Float64Array.prototype.some()")}}</dt>
+ <dd>Gibt <code>true</code> zurück, wenn nur ein Element in einem Array, den als Funktion übergebenen, Test erfüllt. Siehe auch {{jsxref("Array.prototype.some()")}}</dd>
+ <dt>{{jsxref("TypedArray.sort", "Float64Array.prototype.sort()")}}</dt>
+ <dd>Sortiert die Elemente eines Arrays in-Place und gibt das Array zurück. Siehe auch {{jsxref("Array.prototype.sort()")}}.</dd>
+ <dt>{{jsxref("TypedArray.subarray", "Float64Array.prototype.subarray()")}}</dt>
+ <dd>Gibt ein neues <code>Float64Array</code> vom gegebenen Start- und Endindex zurück.</dd>
+ <dt>{{jsxref("TypedArray.values", "Float64Array.prototype.values()")}}</dt>
+ <dd>Gibt ein neues <code>Array Iterator</code> Objekt zurück, welches die Werte von jedem Index im Array enthält. Siehe auch {{jsxref("Array.prototype.values()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toLocaleString", "Float64Array.prototype.toLocaleString()")}}</dt>
+ <dd>Gibt eine ortsabhängige Stringrepräsentation des Arrays und seiner Element zurück. Siehe auch {{jsxref("Array.prototype.toLocaleString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toString", "Float64Array.prototype.toString()")}}</dt>
+ <dd>Gibt eine Stringrepräsentation des Arrays und seiner Element zurück. Siehe auch {{jsxref("Array.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.@@iterator", "Float64Array.prototype[@@iterator]()")}}</dt>
+ <dd>Gibt ein neues <code>Array Iterator</code> Objekt zurück, welches die zugehörigen Werte für jeden Index im Array enthalten.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Verschiedene Wege, um ein <code>Float64Array</code> zu erstellen:</p>
+
+<pre class="brush: js">// From a length
+var float64 = new Float64Array(2);
+float64[0] = 42;
+console.log(float64[0]); // 42
+console.log(float64.length); // 2
+console.log(float64.BYTES_PER_ELEMENT); // 8
+
+// From an array
+var arr = new Float64Array([21,31]);
+console.log(arr[1]); // 31
+
+// From another TypedArray
+var x = new Float64Array([21, 31]);
+var y = new Float64Array(x);
+console.log(y[0]); // 21
+
+// From an ArrayBuffer
+var buffer = new ArrayBuffer(32);
+var z = new Float64Array(buffer, 0, 4);
+
+// From an iterable
+var iterable = function*(){ yield* [1,2,3]; }();
+var float64 = new Float64Array(iterable);
+// Float64Array[1, 2, 3]
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Ersetzt in ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition in einem ECMA Standard. Spezifiziert, dass ein <code>new</code> benötigt wird.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>ECMAScript 2017 ändert den <code>Float64Array</code> Konstruktor, um die <code>ToIndex</code> Operation zu benutzen und erlaubt einen Konstruktor ohne Parameter.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Float64Array")}}</p>
+
+<h2 id="Kompatibilitätshinweise">Kompatibilitätshinweise</h2>
+
+<p>Mit Beginn von ECMAScript 2015, müssen <code>Float64Array</code> Konstruktoren mit einem {{jsxref("Operators/new", "new")}} benutzt werden. Der Aufruf eines <code>Float64Array</code> Konstruktors als eine Funktion ohne <code>new</code> führt jetzt zu einem {{jsxref("TypeError")}}.</p>
+
+<pre class="brush: js example-bad">var dv = Float64Array([1, 2, 3]);
+// TypeError: calling a builtin Float64Array constructor
+// without new is forbidden</pre>
+
+<pre class="brush: js example-good">var dv = new Float64Array([1, 2, 3]);</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Typed_arrays" title="en/JavaScript typed arrays">JavaScript getypte Arrays</a></li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("DataView")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/function/apply/index.html b/files/de/web/javascript/reference/global_objects/function/apply/index.html
new file mode 100644
index 0000000000..784843e276
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/function/apply/index.html
@@ -0,0 +1,226 @@
+---
+title: Function.prototype.apply()
+slug: Web/JavaScript/Reference/Global_Objects/Function/apply
+tags:
+  - Function
+  - JavaScript
+  - Method
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/apply
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>apply()</strong></code> Methode ruft eine Funktion mit gegebenem <code>this</code> Wert und <code>arguments</code> als Array (oder einem <a href="/de/docs/Web/JavaScript/Guide/Indexed_collections#Mit_Array-ähnlichen_Objekten_arbeiten">Array ähnlichem Objekt</a>).</p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Die Syntax dieser Funktion ist größtenteils identisch zu der Funktion {{jsxref("Function.call", "call()")}}. Der fundamentale Unterschied ist, dass <code>call()</code> <strong>eine Liste von Argumenten</strong> und <code>apply()</code> <strong>ein Array mit Argumenten</strong> übergeben bekommt.</p>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/js/function-apply.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>function</var>.apply(<var>thisArg</var>, [<var>argsArray</var>])</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>thisArg</code></dt>
+ <dd>Optional. Der Wert von <code>this</code>, der für den Aufruf der Funktion <em><code>func</code></em> genutzt wird. Zu beachten ist, dass <code>this</code> möglicherweise nicht der Wert ist, den die Methode sieht: Wenn die Methode eine Funktion im {{jsxref("Functions_and_function_scope/Strict_mode", "non-strict mode", "", 1)}} ist, werden {{jsxref("Global_Objects/null", "null")}} und {{jsxref("Global_Objects/undefined", "undefined")}} mit dem globalen Objekt ersetzt und primitive Werte werden in ein Hüllobjekt umgewandelt.</dd>
+ <dt><code>argsArray</code></dt>
+ <dd>Optional. Ein Array ähnliches Objekt, welches die Argumente spezifiziert, welche beim Aufruf von <em><code>func</code></em> benutzt werden, oder {{jsxref("null")}} oder {{jsxref("undefined")}}, wenn keine Argumente übergeben werden. Mit Einführung von ECMAScript 5 können diese Argumente mit einem generische Array ähnliches Objekt statt einem Array übergeben werden. Für mehr Informationen sollte die {{anch("Browserkompatibilität", "Browserkompatibilität")}} geprüft werden.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Das Ergebnis der aufgerufenen Funktion mit dem spezifischen <code><strong>this</strong></code> Wert und Parametern.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Man kann ein anderes <code>this</code> Objekt für den Aufruf einer existierenden Funktion zuweisen. <code>this</code> referenziert zum aktuellen Objekte, dem aufrufenden Objekt. Mit <code>apply</code> kann eine Methode geschrieben und in einem anderen Objekt vererbt werden, ohne die Methode für das neue Objekte neu zu schreiben.</p>
+
+<p><code>apply</code> ist sehr ähnlich zu {{jsxref("Function.call", "call()")}}, mit der Ausnahme des Typen der übergebenen Argumente. Man kann ein Array von Argumenten statt einer Menge von benannten Parametern benutzen. Mit <code>apply</code> kann man ein Arrayliteral benutzen, wie zum Beispiel <code>fun.apply(this, ['eat', 'bananas'])</code> oder ein {{jsxref("Array")}} Objekt, wie zum Beispiel <code>fun.apply(this, new Array('eat', 'bananas'))</code>.</p>
+
+<p>Für den <code>argsArray</code> Parameter kann auch {{jsxref("Functions/arguments", "arguments")}} eingesetzt werden. <code>arguments</code> ist eine lokale Variable einer Funktion. Sie kann für alle nicht spezifizieren Argumente bei einem Aufruf benutzt werde. Dadurch muss man die Argumente eines Aufrufers nicht kennen, wenn die <code>apply</code> Methode genutzt wird. Man kann <code>arguments</code> nutzen, um alle Argumente eines Aufrufers zu übergeben. Das aufgerufene Objekt ist dann verantwortlich für das Verarbeiten der Argument.</p>
+
+<p>Seit ECMAScript in der 5. Ausgabe kann jedes Objekt übergeben werden, welches Array ähnlich ist, was in der Praxis bedeutet, dass es eine <code>length</code> Eigenschaft hat und Ganzzahlige Eigenschaften im Bereich von <code>0</code> bis <code>length-1</code> besitzt. Zum Beispiel kann man {{domxref("NodeList")}} oder benutzerdefinierte Objekte wie <code>{ 'length': 2, '0': 'eat', '1': 'bananas' }</code> benutzen.</p>
+
+<div class="note">Viele Browser, auch Chrome 14 und Internet Explorer 9, unterstützen keine Array ähnlichen Objekte, was zu einem Fehler führt.</div>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_apply_um_ein_Array_an_ein_anderes_zu_hängen">Einsatz von <code>apply</code> um ein Array an ein anderes zu hängen</h3>
+
+<p>Man kann <code>push</code> benutzen, um ein Element an ein Array anzufügen. Weil <code>push</code> eine variable Anzahl von Argumenten enthält, kann man auch mehrere Element mit einem Aufruf hinzufügen. Übergibt man jedoch ein Array an die <code>push</code> Methode, so wird das Array als ein Element hinzugefügt anstatt jedes Element des Arrays hinzuzufügen, was zu einem Array im Array führt. Was tun, wenn das nicht das ist, was gewollt ist? <code>concat</code> hat das gewünschte verhalten, jedoch erstellt es ein neues Array und fügt die Elemente nicht an das existierende Array. Was wenn man die Elemente unbedingt an das existierende Array hängen möchte? Eine Schleife schreiben? Sicher nicht!</p>
+
+<p><code>apply</code> ist die Funktion der Wahl!</p>
+
+<pre class="brush: js">var array = ['a', 'b'];
+var elements = [0, 1, 2];
+array.push.apply(array, elements);
+console.info(array);  // ["a", "b", 0, 1, 2]
+</pre>
+
+<h3 id="Einsatz_von_apply_und_eingebauten_Standardfunktionen">Einsatz von <code>apply</code> und eingebauten Standardfunktionen</h3>
+
+<p>Der clevere Einsatz von <code>apply</code> erlaubt es standard Functionen für Aufgaben zu benutzen, für die man sonst schleifen Schreiben müsste, um über alle Elemente eines Arrays zu iterieren. Im folgenden Beispiel wurde <code>Math.max</code>/<code>Math.min</code> benutzt, um das maximalen/minimalen Wert in einem Array zu finden.</p>
+
+<pre class="brush: js">// min/max number in an array
+var numbers = [5, 6, 2, 3, 7];
+
+// using Math.min/Math.max apply
+var max = Math.max.apply(null, numbers);
+// This about equal to Math.max(numbers[0], ...)
+// or Math.max(5, 6, ...)
+
+var min = Math.min.apply(null, numbers);
+
+// vs. simple loop based algorithm
+max = -Infinity, min = +Infinity;
+
+for (var i = 0; i &lt; numbers.length; i++) {
+  if (numbers[i] &gt; max) {
+    max = numbers[i];
+  }
+  if (numbers[i] &lt; min) {
+    min = numbers[i];
+  }
+}
+</pre>
+
+<p>Jedoch muss man bei einem solchen Einsatz von <code>apply</code> vorsichtig sein, weil das Risiko da ist, dass man in das Limit der maximalen Argumente der JavaScriptumgebung überschreitet. Die Konsequenz aus dem ausführen von Funktionen mit zu vielen Argumenten (mehr als Zehntausend Argumente) ist, dass dieses Limit stark variiert (JavaScriptCore hat ein hart Codiertes <a class="link-https" href="https://bugs.webkit.org/show_bug.cgi?id=80797">Argumentlimit von 65536</a>), weil es in JavaScript nicht spezifiziert ist (<span id="result_box" lang="de"><span>tatsächlich sogar die Art eines übermäßig großen Stack-Verhaltens</span></span>). Einige Umgebungen erzeugen einen Fehler. Andere übergeben nicht alle Argumente der Funktion, um das Limit nicht zu überschreiten. Um diesen Fall man zu schildern: Wenn eine Umgebung ein Limit von 4 Argumenten hätte (aktuelle Limits sind natürlich signifikant höher), würde es so sein, als ob nur die Argumente <code>5, 6, 2, 3</code> über <code>apply</code> im oberen Beispiel übergeben werden, statt dem ganzen Array.</p>
+
+<p>Wenn das Array in einigen Fällen so groß wird, dass es zehntausend Element erreicht, sollte eine hybride Strategie genutzt werden: Man teilt das Array auf und übergibt diese Teile der Funktion:</p>
+
+<pre class="brush: js">function minOfArray(arr) {
+  var min = Infinity;
+  var QUANTUM = 32768;
+
+  for (var i = 0, len = arr.length; i &lt; len; i += QUANTUM) {
+    var submin = Math.min.apply(null,
+                                arr.slice(i, Math.min(i+QUANTUM, len)));
+    min = Math.min(submin, min);
+  }
+
+  return min;
+}
+
+var min = minOfArray([5, 6, 2, 3, 7]);
+</pre>
+
+<h3 id="apply_für_das_Verketten_von_Konstruktoren_verwenden"><code>apply</code> für das Verketten von Konstruktoren verwenden</h3>
+
+<p>Man kann <code>apply</code> einsetzen, um {{jsxref("Operators/new", "Konstruktoren", "", 1)}} für ein Objekt zu verketten, ähnlich wie in Java. Im folgenden Beispiel wird eine globale {{jsxref("Function")}} Methode namens <code>construct</code> erstellt, welche es ermöglicht ein Array ähnliches Objekt mit einem Konstruktor anstatt eines Argumentliste zu benutzen.</p>
+
+<pre class="brush: js">Function.prototype.construct = function (aArgs) {
+  var oNew = Object.create(this.prototype);
+  this.apply(oNew, aArgs);
+  return oNew;
+};
+</pre>
+
+<div class="note" style="height: 250px; overflow: auto;">
+<p><strong>Hinweis:</strong> Die oben eingesetzte <code>Object.create()</code> Methode ist relativ neu. Alternativ kann eine der folgenden Ansätze verwendet werden:</p>
+
+<p>Einsatz von {{jsxref("Object/__proto__", "Object.__proto__")}}:</p>
+
+<pre class="brush: js">Function.prototype.construct = function (aArgs) {
+  var oNew = {};
+  oNew.__proto__ = this.prototype;
+  this.apply(oNew, aArgs);
+  return oNew;
+};
+</pre>
+
+<p>Einsatz von <a href="/de/docs/Web/JavaScript/Closures">Closures</a>:</p>
+
+<pre class="brush: js">Function.prototype.construct = function(aArgs) {
+  var fConstructor = this, fNewConstr = function() {
+    fConstructor.apply(this, aArgs);
+  };
+  fNewConstr.prototype = fConstructor.prototype;
+  return new fNewConstr();
+};</pre>
+
+<p>Einsatz von {{jsxref("Function")}} Konstruktoren:</p>
+
+<pre class="brush: js">Function.prototype.construct = function (aArgs) {
+  var fNewConstr = new Function("");
+  fNewConstr.prototype = this.prototype;
+  var oNew = new fNewConstr();
+  this.apply(oNew, aArgs);
+  return oNew;
+};
+</pre>
+</div>
+
+<p>Beispiel für den Einsatz:</p>
+
+<pre class="brush: js">function MyConstructor() {
+  for (var nProp = 0; nProp &lt; arguments.length; nProp++) {
+    this['property' + nProp] = arguments[nProp];
+  }
+}
+
+var myArray = [4, 'Hello world!', false];
+var myInstance = MyConstructor.construct(myArray);
+
+console.log(myInstance.property1);                // logs 'Hello world!'
+console.log(myInstance instanceof MyConstructor); // logs 'true'
+console.log(myInstance.constructor);              // logs 'MyConstructor'
+</pre>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Diese nicht native <code>Function.construct</code> Methode funktioniert nicht mit einigen nativen Konstruktoren (mit {{jsxref("Date")}} zum Beispiel). In diesem Fall muss man die {{jsxref("Function.prototype.bind")}} Methode (hat man zum Beispiel ein Array ähnliches Objekt wie folgt, um mit dem {{jsxref("Global_Objects/Date", "Date")}} Konstruktor <code>[2012, 11, 4]</code> einzusetzen; in diesem Fall muss folgendes geschrieben werden: <code>new (Function.prototype.bind.apply(Date, [null].concat([2012, 11, 4])))()</code> — Jedoch ist das nicht die beste Art und Weise Probleme zu Lösen, weshalb diese Lösung nicht Praxistauglich ist).</p>
+</div>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.3.4.3', 'Function.prototype.apply')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function.prototype.apply', 'Function.prototype.apply')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function.prototype.apply', 'Function.prototype.apply')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Function.apply")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Functions/arguments", "arguments")}} object</li>
+ <li>{{jsxref("Function.prototype.bind()")}}</li>
+ <li>{{jsxref("Function.prototype.call()")}}</li>
+ <li>{{jsxref("Functions", "Functions and function scope", "", 1)}}</li>
+ <li>{{jsxref("Reflect.apply()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/function/arguments/index.html b/files/de/web/javascript/reference/global_objects/function/arguments/index.html
new file mode 100644
index 0000000000..271120bd9d
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/function/arguments/index.html
@@ -0,0 +1,92 @@
+---
+title: Function.arguments
+slug: Web/JavaScript/Reference/Global_Objects/Function/arguments
+tags:
+  - Deprecated
+  - Function
+  - JavaScript
+  - Property
+  - arguments
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/arguments
+---
+<div>{{JSRef}} {{deprecated_header}}</div>
+
+<p>Die <code><strong><em>function</em>.arguments</strong></code> Eigenschaft referenziert ein Array ähnliches Objekt, welches die übergebenen Parameter einer Funktion enthält. Stattdessen kann die Variable {{jsxref("Functions/arguments", "arguments")}} benutzt werden. Diese Eigenschaft ist im Strict Mode aufgrund von <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-addrestrictedfunctionproperties">taill Aufrufoptimierung</a> verboten.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die Syntax <code><em>function</em>.arguments</code> ist veraltet. Der empfolene Weg, um das {{jsxref("Functions/arguments", "arguments")}} Objekt zu erreichen, ist in einer Funktion die Variable {{jsxref("Functions/arguments", "arguments")}} zu benutzen.</p>
+
+<p>Im Fall von Rekursion, z. B. wenn die Funktion <code>f</code> mehrere Male auf dem Aufruf-Stack ist, repräsentiert <code>f.arguments</code> die Argumente des letzten Aufrufes der Funktion.</p>
+
+<p>Der Wert der <code>arguments</code> Eigenschaft ist normalerweise <code>null</code>, wenn keine Durchführung der Funktion vorhanden ist (Durchführung bedeutet, dass die Funktion aufgerufen wurde, aber noch nichts zurückgegeben hat).</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js">function f(n) { g(n - 1); }
+
+function g(n) {
+  console.log('before: ' + g.arguments[0]);
+  if (n &gt; 0) { f(n); }
+  console.log('after: ' + g.arguments[0]);
+}
+
+f(2);
+
+console.log('returned: ' + g.arguments);
+
+// Output
+
+// before: 1
+// before: 0
+// after: 0
+// after: 1
+// returned: null
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0. Deprecated zugunsten von  {{jsxref("Functions/arguments", "arguments")}} in ES3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-10.6', 'arguments object')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>{{jsxref("Functions/arguments", "arguments")}} Objekt</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-arguments-object', 'arguments object')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>{{jsxref("Functions/arguments", "arguments")}} Objekt</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-arguments-object', 'arguments object')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>{{jsxref("Functions/arguments", "arguments")}} Objekt</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Function.arguments")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Functions/arguments", "arguments")}} object</li>
+ <li>{{jsxref("Functions", "Funktionen und Funktionsscopes", "", 1)}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/function/arity/index.html b/files/de/web/javascript/reference/global_objects/function/arity/index.html
new file mode 100644
index 0000000000..f5ff00bd27
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/function/arity/index.html
@@ -0,0 +1,32 @@
+---
+title: Function.arity
+slug: Web/JavaScript/Reference/Global_Objects/Function/arity
+tags:
+  - Function
+  - JavaScript
+  - Obsolete
+  - Property
+  - Unimplemented
+translation_of: Archive/Web/JavaScript/Function.arity
+---
+<div>{{JSRef}} {{obsolete_header}}</div>
+
+<p class="note">Die <code><strong>arity</strong></code> Eigenschaft wurde benutzt, um die Anzahl der erwarteten Argumente einer Funktion zurückzugeben, jedoch existiert diese Eigenschaft nicht mehr und wurde durch die Eigenschaft {{jsxref("Function.prototype.length")}} ersetzt.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Implementiert in JavaScript 1.2. Veraltet seit JavaScript 1.4.</p>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Function.arity")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Function.prototype.length")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/function/bind/index.html b/files/de/web/javascript/reference/global_objects/function/bind/index.html
new file mode 100644
index 0000000000..9427e62299
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/function/bind/index.html
@@ -0,0 +1,286 @@
+---
+title: Function.prototype.bind()
+slug: Web/JavaScript/Reference/Global_Objects/Function/bind
+tags:
+  - Class
+  - ECMAScript 2015
+  - ECMAScript 5
+  - Function
+  - JavaScript
+  - Method
+  - bind
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/bind
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>bind()</code></strong> Methode erzeugt eine neue Funktion die beim Aufruf ihr <code>this</code> Schlüsselwort auf den ersten übergebenen Wert setzt. Alle weiteren Argumente werden den beim Funktionsaufruf übergebenen Werten vorangestellt.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/function-bind.html", "taller")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>fun</var>ction.bind(<var>thisArg</var>[, <var>arg1</var>[, <var>arg2</var>[, ...]]])</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>thisArg</code></dt>
+ <dd>Der für <code>this</code> zu übergebende Wert an die Zielfunktion sobald die gebundene Funktion aufgerufen wird. Der Wert wird ignoriert, wenn die gebundene Funktion mit dem {{jsxref("Operators/new", "new")}} Schlüsselwort initiiert wurde.</dd>
+ <dt><code>arg1, arg2, ...</code></dt>
+ <dd>An die bind Funktion übergebene Werte. Diese Werte werden an die gebundene Funktion überreicht.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine Kopie der gegebenen Funktion mit dem spezifizierten <strong><code>this</code></strong> Wert und initialen Parametern.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <strong>bind()</strong> Funktion erstellt eine neue <strong>gebundene Funktion (BF)</strong>. Eine <strong>BF</strong> ist <strong>ein exotisches Funktionsobjekte</strong> (ein Teil von <strong>ECMAScript 2015</strong>) welches die eigentliche Funktion umhüllt. Das Aufrufen einer <strong>BF</strong> führt zum ausführen der <strong>umhüllten Funktion</strong>. Eine <strong>BF</strong> hat die folgenden internen Eigenschaften:</p>
+
+<ul>
+ <li><strong>[[BoundTargetFunction]]</strong> - das umhüllte Funktionsobjekt;</li>
+ <li><strong>[[BoundThis]]</strong> - der Wert, der immer als <strong>this</strong> Wert beim Aufruf der umhüllten Funktion genutzt wird.</li>
+ <li><strong>[[BoundArguments]]</strong> - eine Liste von Werten, wessen Elemente als erste Argumente bei jedem Aufruf der umhüllten Funktion genutzt werden.</li>
+ <li><strong>[[Call]]</strong> - führt Code aus, der mit dem Objekte verbunden ist. Wird über ein Funktionsaufruf ausgeführt. Die Argumente der internen Methode sind ein <strong>this</strong> Wert und eine Liste mit Argumenten, welche beim Aufruf der Funktion übergeben werden.</li>
+</ul>
+
+<p>Wenn die gebundene Funktion aufgerufen wird, ruft diese die interne Methode <strong>[[Call]]</strong> auf <strong>[[BoundTargetFunction]]</strong> mit den Argumenten <strong>Call(<em>boundThis</em>, <em>args</em>)</strong> auf. Dabei ist <strong><em>boundThis </em></strong>gleich <strong>[[BoundThis]]</strong> und <em><strong>args </strong></em>gleich <strong>[[BoundArguments]]</strong> gefolgt von den übergebenen Parametern des Funktionsaufrufes.</p>
+
+<p>Eine gebundene Funktion kann zudem mit einen <a href="/de/docs/Web/JavaScript/Reference/Operators/new" title="The new operator creates an instance of a user-defined object type or of one of the built-in object types that has a constructor function."><code>new</code></a> Operator erstellt werden: <span id="result_box" lang="de"><span>Das sieht so aus, als ob die Zielfunktion stattdessen konstruiert worden wäre</span></span>. Dar übergebene <strong><code>this</code></strong> Wert wird ignoriert, während die voranstehenden Argumente für die Emulierte Funktion zur Verfügung stehen.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Erstellen_einer_gebunden_Funktion">Erstellen einer gebunden Funktion</h3>
+
+<p><span id="result_box" lang="de"><span>Die einfachste Verwendung von <code>bind()</code> besteht darin, eine Funktion zu erstellen, die, egal wie sie aufgerufen wird, mit einem <code><strong>this</strong></code> Wert aufgerufen wird. Ein häufiger Fehler für neue JavaScript-Programmierer besteht darin, eine Methode aus einem Objekt zu extrahieren, diese Funktion später aufzurufen und zu erwarten, dass sie das ursprüngliche Objekt als <code><strong>this</strong></code> verwendet (z. B. durch Verwendung dieser Methode in Callback-basiertem Code). Ohne besondere Sorgfalt ist das ursprüngliche Objekt jedoch in der Regel verloren. </span></span><span id="result_box" lang="de"><span>Das Erstellen einer gebundenen Funktion aus der Funktion, die das ursprüngliche Objekt verwendet, löst dieses Problem sauber:</span></span></p>
+
+<pre class="brush: js">this.x = 9;    // this refers to global "window" object here in the browser
+var module = {
+  x: 81,
+  getX: function() { return this.x; }
+};
+
+module.getX(); // 81
+
+var retrieveX = module.getX;
+retrieveX();
+// returns 9 - The function gets invoked at the global scope
+
+// Create a new function with 'this' bound to module
+// New programmers might confuse the
+// global var x with module's property x
+var boundGetX = retrieveX.bind(module);
+boundGetX(); // 81
+</pre>
+
+<h3 id="Partiell_gebunden_Funktionen">Partiell gebunden Funktionen</h3>
+
+<p>Der nächste einfache Einsatz von <code>bind()</code> ist das Vordefinieren von Initialparameter einer Funktion. Diese Argumente (wenn welche vorhanden) folgen auf den übergebenen <code>this</code> Wert und Werten am Anfang der Zielfunktion den Parametern hinzugefügt, gefolgt von den Parametern, die der gebunden Funktion übergeben werden, immer wenn die gebunden Funktion aufgerufen wird.</p>
+
+<pre class="brush: js">function list() {
+  return Array.prototype.slice.call(arguments);
+}
+
+var list1 = list(1, 2, 3); // [1, 2, 3]
+
+// Create a function with a preset leading argument
+var leadingThirtysevenList = list.bind(null, 37);
+
+var list2 = leadingThirtysevenList();
+// [37]
+
+var list3 = leadingThirtysevenList(1, 2, 3);
+// [37, 1, 2, 3]
+</pre>
+
+<h3 id="Mit_setTimeout">Mit <code>setTimeout</code></h3>
+
+<p>Bei {{domxref("window.setTimeout()")}} wird im Standardfall das <code>this</code> Schlüsselwort mit dem {{ domxref("window") }} (oder <code>global</code>) Objekt versehen. Wenn mit Klassenmethoden gearbeitet wird, die es vorgesehen, dass <code>this</code> zu der Klasseninstanz verweist, muss <code>this</code> explizit an die Callback-Funktion gebunden werden, damit die Instanz vorhanden ist.</p>
+
+<pre class="brush: js">function LateBloomer() {
+  this.petalCount = Math.floor(Math.random() * 12) + 1;
+}
+
+// Declare bloom after a delay of 1 second
+LateBloomer.prototype.bloom = function() {
+  window.setTimeout(this.declare.bind(this), 1000);
+};
+
+LateBloomer.prototype.declare = function() {
+  console.log('I am a beautiful flower with ' +
+    this.petalCount + ' petals!');
+};
+
+var flower = new LateBloomer();
+flower.bloom();
+// after 1 second, triggers the 'declare' method</pre>
+
+<h3 id="Gebunden_Funktion_mit_einem_Konstruktor">Gebunden Funktion mit einem Konstruktor</h3>
+
+<div class="warning">
+<p><strong>Warnung:</strong> Dieses Kapitel demonstriert JavaScript-möglichkeiten und dokumentiert Randfälle der <code>bind()</code> Methode. Die Methoden, die unten gezeigt werden, sind nicht die Besten, um Dinge zu lösen, weshalb sie nicht in einem Produktivsystem eingesetzt werden sollten.</p>
+</div>
+
+<p>Gebundene Funktion sind automatisch verfügbar für den Einsatz mit dem {{jsxref("Operators/new", "new")}} Operator, um eine neue Instanz von einer Zielfunktion zu erstellen. Wenn eine gebundene Funktion eingesetzt wird, um einen Wert zu erstellen, wird das unterstützte <code>this</code> Argument ignoriert. Dahingegen werden unterstützte Argumente vor den Konstruktoraufrufe vorgehängt:</p>
+
+<pre class="brush: js">function Point(x, y) {
+  this.x = x;
+  this.y = y;
+}
+
+Point.prototype.toString = function() {
+  return this.x + ',' + this.y;
+};
+
+var p = new Point(1, 2);
+p.toString(); // '1,2'
+
+// not supported in the polyfill below,
+
+// works fine with native bind:
+
+var YAxisPoint = Point.bind(null, 0/*x*/);
+
+
+var emptyObj = {};
+var YAxisPoint = Point.bind(emptyObj, 0/*x*/);
+
+var axisPoint = new YAxisPoint(5);
+axisPoint.toString(); // '0,5'
+
+axisPoint instanceof Point; // true
+axisPoint instanceof YAxisPoint; // true
+new Point(17, 42) instanceof YAxisPoint; // true
+</pre>
+
+<p>Zu beachten ist, dass nichts spezielles getan werden muss, um eine gebundene Funktion mit {{jsxref("Operators/new", "new")}} zu erstellen. <span id="result_box" lang="de"><span>Die Folge ist, dass man nichts Besonderes tun muss, um eine gebundene Funktion zu erzeugen, die einfach aufgerufen werden kann, selbst wenn es gewollt ist, dass die gebundene Funktion nur mit </span></span>{{jsxref("Operators/new", "new")}} <span lang="de"><span>aufgerufen wird:</span></span></p>
+
+<pre class="brush: js">// Example can be run directly in your JavaScript console
+// ...continuing from above
+
+// Can still be called as a normal function
+// (although usually this is undesired)
+YAxisPoint(13);
+
+emptyObj.x + ',' + emptyObj.y;
+// &gt;  '0,13'
+</pre>
+
+<p>Wenn es gewünscht ist, dass der Einsatz von gebundenen Funktion nur mit {{jsxref("Operators/new", "new")}} oder einem einfachen Aufruf sein soll, so muss die Zielfunktion diese Einschränkung erzwingen.</p>
+
+<h3 id="Kurzformen_erstellen">Kurzformen erstellen</h3>
+
+<p><code>bind()</code> ist nützlich in fällen, in denen man kurzformen erstellen will, bei denen ein spezifischer <strong><code>this</code></strong> vorhanden sein soll.</p>
+
+<p>Nimmt man zum Beispiel {{jsxref("Array.prototype.slice")}}, welche man zum Konvertieren von Array ähnlichen Objekte zu einem richtigen Array einsetzen mögliche, dann kann man eine Kurzform wie diese erstellen:</p>
+
+<pre class="brush: js">var slice = Array.prototype.slice;
+
+// ...
+
+slice.apply(arguments);
+</pre>
+
+<p>Mit <code>bind()</code>, kann dieses vereinfacht werden. Im folgenden Codestück ist <code>slice</code> eine gebunden Funktion zu der {{jsxref("Function.prototype.apply()", "apply()")}} Funktion von {{jsxref("Function.prototype")}} mit dem <strong><code>this</code></strong> Wert auf der {{jsxref("Array.prototype.slice()", "slice()")}} Funktion von {{jsxref("Array.prototype")}}. Das bedeutet, dass der zusätzliche Aufruf von <code>apply()</code> nicht nötig ist:</p>
+
+<pre class="brush: js">// same as "slice" in the previous example
+var unboundSlice = Array.prototype.slice;
+var slice = Function.prototype.apply.bind(unboundSlice);
+
+// ...
+
+slice(arguments);
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Wenn die <code>bind()</code> Funktion nicht vorhanden ist, kann ein Großteil der Funktionalität mit trotzdem hinzugefügt werden, indem der folgende Quelltext am Anfang des Skriptes hinzugefügt wird.</p>
+
+<pre class="brush: js">if (!Function.prototype.bind) {
+  Function.prototype.bind = function(oThis) {
+    if (typeof this !== 'function') {
+      // closest thing possible to the ECMAScript 5
+      // internal IsCallable function
+      throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
+    }
+
+    var aArgs   = Array.prototype.slice.call(arguments, 1),
+        fToBind = this,
+        fNOP    = function() {},
+        fBound  = function() {
+          return fToBind.apply(this instanceof fNOP
+                 ? this
+                 : oThis,
+                 aArgs.concat(Array.prototype.slice.call(arguments)));
+        };
+
+    if (this.prototype) {
+      // Function.prototype doesn't have a prototype property
+      fNOP.prototype = this.prototype;
+    }
+    fBound.prototype = new fNOP();
+
+    return fBound;
+  };
+}
+</pre>
+
+<p><span id="result_box" lang="de"><span>Einige der vielen Unterschiede (es kann durchaus andere geben, weil bei dieser Liste nicht auf Vollständig geachtet wurde) zwischen diesem Algorithmus und dem angegebenen Algorithmus sind:</span></span></p>
+
+<ul>
+ <li>Die partielle Implementierung basiert auf der {{jsxref("Array.prototype.slice()")}}, {{jsxref("Array.prototype.concat()")}}, {{jsxref("Function.prototype.call()")}} und {{jsxref("Function.prototype.apply()")}} Methode, um die Originalen Werte zu erhalten.</li>
+ <li>Die partielle Implementierung erstellt Funktionen, die keinen unveränderbar {{jsxref("Function.caller", "caller")}} haben und eine <code>arguments</code> Eigenschaft die einen {{jsxref("Global_Objects/TypeError", "TypeError")}} auslöst, wenn get, set oder deletion benutzt wird. (Dieses kann hinzugefügt werden, wenn die Implementierung {{jsxref("Object.defineProperty")}} unterstützt oder partiell implementiert [ohne das Löschverhalten], wenn die Implementierung {{jsxref("Object.defineGetter", "__defineGetter__")}} und {{jsxref("Object.defineSetter", "__defineSetter__")}} Erweiterungen unterstützt.)</li>
+ <li>Die partielle Implementierung erstellt Funktionen, die einen <code>prototype</code> Eigenschaft haben. (Normale gebundene Funktionen haben keine)</li>
+ <li>Die partielle Implementierung erstellt gebundene Funktionen mit der {{jsxref("Function.length", "length")}} Eigenschaft, die nicht mit ECMA-262 übereinstimmt: Sie erstellt Funkton mit <code>length</code> 0, während bei der vollständigen Implementierung die Länge von der Zielfunktion und der Anzahl von vordefinierten Parametern abhängt und daher eine andere Länge zurück geben kann.</li>
+</ul>
+
+<p>Wenn diese partielle Implementierung eingesetzt wird, <strong>muss man davon ausgehen, dass dessen Verhalten von dem in ECMA-262 in der 5. Auflage unterscheidet!</strong> Mit etwas Vorsicht (und vielleicht kleinen Modifizierungen für spezielle Anforderungen) kann diese partielle Implementierung eine gute Übergangslösung für die Zeit sein, in der <code>bind()</code> noch nicht in allen Umgebungen unterstützt wird.</p>
+
+<p>Auf <a href="https://github.com/Raynos/function-bind">https://github.com/Raynos/function-bind</a> könnte es eine gründlichere Lösung geben!</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.3.4.5', 'Function.prototype.bind')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-function.prototype.bind', 'Function.prototype.bind')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function.prototype.bind', 'Function.prototype.bind')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Function.bind")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Function.prototype.apply()")}}</li>
+ <li>{{jsxref("Function.prototype.call()")}}</li>
+ <li>{{jsxref("Functions", "Functions", "", 1)}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/function/call/index.html b/files/de/web/javascript/reference/global_objects/function/call/index.html
new file mode 100644
index 0000000000..46bdb07442
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/function/call/index.html
@@ -0,0 +1,163 @@
+---
+title: Function.prototype.call()
+slug: Web/JavaScript/Reference/Global_Objects/Function/call
+tags:
+  - Function
+  - JavaScript
+  - Method
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/call
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>call()</strong></code> Methode ruft eine Funktion mit dem Argument this und den individuellen Parametern auf.</p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Die Syntax dieser Funktion ist nahezu identisch zu {{jsxref("Function.prototype.apply", "apply()")}}. Der Unterschied ist, dass <code>call()</code> eine <strong>Liste von Argumenten</strong> und <code>apply()</code> einen einzelnen <strong>Array von Argumenten</strong> akzeptiert.</p>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/js/function-call.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>fun</var>ction.call(<var>thisArg</var>, <var>arg1</var>, <var>arg2</var>, ...)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>thisArg</code></dt>
+ <dd>Optional. Der Wert von <code>this</code>, der für den Aufruf der Funktion <em><code>function</code></em> genutzt wird. Zu beachten ist, dass <code>this</code> möglicherweise nicht der Wert ist, den die Methode sieht: Wenn die Methode eine Funktion in {{jsxref("Functions_and_function_scope/Strict_mode", "non-strict mode", "", 1)}} ist, werden {{jsxref("Global_Objects/null", "null")}} und {{jsxref("Global_Objects/undefined", "undefined")}} mit dem globalen Objekt ersetzt und primitive Werte werden in ein Hüllobjekt umgewandelt.</dd>
+ <dt><code>arg1, arg2, ...</code></dt>
+ <dd>Argumente für das Objekt.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Das Ergebnis der aufgerufenen Funktion mit dem spezifischen <code><strong>this</strong></code> Wert und Parametern.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Beim Aufruf einer existierenden Funktion können Sie für <code>this</code> ein neues Objekt zuweisen. <code>this</code> verweist auf das aktuelle Objekt, also das aufrufende Objekt. Mit call können Sie eine Methode schreiben und an ein anderes Objekt vererben, ohne die Methode für das neue Objekt neuzuschreiben.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Nutzung_von_call_um_Konstruktoren_für_ein_Objekt_zu_verketten">Nutzung von <code>call</code>, um Konstruktoren für ein Objekt zu verketten</h3>
+
+<p>Man kann <code>call</code> nutzen, um Konstruktoren für ein Objekt, ähnlich wie in Java, zu verketten. Im folgenden Beispiel wird der Konstruktor für das <code>Product</code> Objekt mit zwei Parametern, <code>name</code> und <code>price</code>, definiert. Zwei andere Funktionen <code>Food</code> und <code>Toy</code> rufen <code>Product</code> auf und übergeben <code>this</code>, <code>name</code> und <code>price</code>. <code>Product</code> initialisiert die Eigenschaften <code>name</code> und <code>price</code> und beide speziellen Funktionen definieren <code>category</code>.</p>
+
+<pre class="brush: js">function Product(name, price) {
+  this.name = name;
+  this.price = price;
+}
+
+function Food(name, price) {
+  Product.call(this, name, price);
+  this.category = 'food';
+}
+
+function Toy(name, price) {
+  Product.call(this, name, price);
+  this.category = 'toy';
+}
+
+var cheese = new Food('feta', 5);
+var fun = new Toy('robot', 40);
+</pre>
+
+<h3 id="Nutzung_von_call_zum_Aufruf_einer_anonymen_Funktion">Nutzung von <code>call</code> zum Aufruf einer anonymen Funktion</h3>
+
+<p>In diesem komplett konstruierten Beispiel erstellen wir eine anonyme Funktion und nutzen <code>call</code>, um diese für jedes Objekt in einem Array aufzurufen. Der Hauptnutzen für die Nutzung anonymer Funktionen hier, ist das hinzufügen einer Print-Funktion für jedes Objekt, welche den rechten Index des Objekts in dem eingegebenen Array ausgeben kann. Die Übergabe des Objektes als <code>this</code>-Wert ist hier nicht zwingend erforderlich, wurde aber zur Veranschaulichung genutzt.</p>
+
+<pre class="brush: js">var animals = [
+  { species: 'Lion', name: 'King' },
+  { species: 'Whale', name: 'Fail' }
+];
+
+for (var i = 0; i &lt; animals.length; i++) {
+  (function(x) {
+    this.print = function() {
+      console.log('#' + x + ' ' + this.species
+                  + ': ' + this.name);
+    }
+    this.print();
+  }).call(animals[i], i);
+}
+</pre>
+
+<h3 id="Einsatz_von_call_zum_aufrufen_einer_Funktion_mit_spezifiziertem_Kontext_für_'this'">Einsatz von <code>call</code> zum aufrufen einer Funktion mit spezifiziertem Kontext für '<code>this</code>'</h3>
+
+<p>Im unten stehenden Beispiel wird das <code>this</code>Objekt der <code>greet</code> Funktion beim Aufruf auf <code>obj</code> gesetzt.</p>
+
+<pre class="brush: js">function greet() {
+  var reply = [this.animal, 'typically sleep betreen', this.sleepDuration].join(' ');
+  console.log(reply);
+}
+
+var obj = {
+  animal: 'cats', sleepDuration: '12 and 16 hours'
+};
+
+greet.call(obj); // cats typically sleep between 12 and 16 hours
+</pre>
+
+<h3 id="Eine_Funktion_mit_call_ausführen_ohne_den_ersten_Parameter_zu_setzen.">Eine Funktion mit <code>call</code> ausführen ohne den ersten Parameter zu setzen.</h3>
+
+<p>Im unten stehenden Beispiel wird die <code>display</code> Funktion aufgerufen ohne den ersten Parameter zu übergeben. Wenn der erste Parameter nicht übergeben wird, ist <code>this</code> das globale Objekt.</p>
+
+<pre class="brush: js">var sData = 'Wisen';
+
+function display(){
+  console.log('sData value is %s', this.sData);
+}
+
+display.call(); // sData value is Wisen
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.3.4.4', 'Function.prototype.call')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function.prototype.call', 'Function.prototype.call')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function.prototype.call', 'Function.prototype.call')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Function.call")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Function.prototype.bind()")}}</li>
+ <li>{{jsxref("Function.prototype.apply()")}}</li>
+ <li><a href="/de/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">Einführung in objektorientiertes JavaScript</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/function/caller/index.html b/files/de/web/javascript/reference/global_objects/function/caller/index.html
new file mode 100644
index 0000000000..1b0b3f6c03
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/function/caller/index.html
@@ -0,0 +1,84 @@
+---
+title: Function.caller
+slug: Web/JavaScript/Reference/Global_Objects/Function/caller
+tags:
+  - Function
+  - JavaScript
+  - Property
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/caller
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>Die <code><strong><em>function</em>.caller</strong></code> Eigenschaft gibt die Funktion zurück, die eine spezifizierte Funktion aufgerufen hat. Diese Eigenschaft ist im Strict-Modus wegen <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-addrestrictedfunctionproperties">tail call Optimierungen</a> verboten.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Wenn die Funktion <code>f</code> durch einen Quelltext auf höchster Ebene aufgerufen wird, ist der Wert von <code>f.caller</code> {{jsxref("null")}}, anderfalls die Funktion, die <code>f</code> aufgerufen hat.</p>
+
+<p>Diese Eigenschaft ersetzt die veraltete Eigenschaft {{jsxref("Functions/arguments/caller", "arguments.caller")}} des {{jsxref("Functions/arguments", "arguments")}} Objektes.</p>
+
+<p>Die spezielle Eigenschaft <code>__caller__</code>, <span class="short_text" id="result_box" lang="de"><span>welches das Objekt des Aufrufers zurück gab, erlaubt es den Stack zu rekonstruieren</span></span> und wurde aus Sicherheitsgründen entfernt.</p>
+
+<h3 id="Hinweise">Hinweise</h3>
+
+<p>Im Fall von Rekursion, kann der Stack nicht mit dieser Eigenschaft reproduziert werden. Gegeben:</p>
+
+<pre class="brush: js">function f(n) { g(n - 1); }
+function g(n) { if (n &gt; 0) { f(n); } else { stop(); } }
+f(2);
+</pre>
+
+<p>Im Moment, indem <code>stop()</code> aufgerufen wird, ist der Aufruferstack:</p>
+
+<pre class="brush: js">f(2) -&gt; g(1) -&gt; f(1) -&gt; g(0) -&gt; stop()
+</pre>
+
+<p>Das folgende ergibt <code>true</code>:</p>
+
+<pre class="brush: js">stop.caller === g &amp;&amp; f.caller === g &amp;&amp; g.caller === f
+</pre>
+
+<p>Wenn man versucht den Stacktrace in der <code>stop()</code> Funktion zu bekommen, wie hier:</p>
+
+<pre class="brush: js">var f = stop;
+var stack = 'Stack trace:';
+while (f) {
+  stack += '\n' + f.name;
+  f = f.caller;
+}
+</pre>
+
+<p>wird die Schleife nie beendet.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Prüfen_des_Wertes_der_Funktionseigenschaft_caller">Prüfen des Wertes der Funktionseigenschaft <code>caller</code></h3>
+
+<p>Der folgende Quelltext prüft den Wert der Funktionseigenschaft <code>caller</code>.</p>
+
+<pre class="brush: js">function myFunc() {
+  if (myFunc.caller == null) {
+    return 'The function was called from the top!';
+  } else {
+    return 'This function\'s caller was ' + myFunc.caller;
+  }
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>In keiner Spezifikation enthalten. Implementiert in JavaScript 1.5.</p>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Function.caller")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Implementation bug for SpiderMonkey {{bug(65683)}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/function/displayname/index.html b/files/de/web/javascript/reference/global_objects/function/displayname/index.html
new file mode 100644
index 0000000000..9e22b16fca
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/function/displayname/index.html
@@ -0,0 +1,81 @@
+---
+title: Function.displayName
+slug: Web/JavaScript/Reference/Global_Objects/Function/displayName
+tags:
+  - Function
+  - JavaScript
+  - Non Standard
+  - Non-standard
+  - Property
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/displayName
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>Die <code><strong><em>function</em>.displayName</strong></code> Eigenschaft gibt den sichtbaren Namen der Funktion zurück.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Wenn definiert, gibt dit <code>displayName</code> Eigenschaft den sichtbaren Namen der Funktion zurück:</p>
+
+<pre class="brush: js">function doSomething() {}
+
+console.log(doSomething.displayName); // "undefined"
+
+var popup = function(content) { console.log(content); };
+
+popup.displayName = 'Show Popup';
+
+console.log(popup.displayName); // "Show Popup"
+</pre>
+
+<p>Man kann eine Funktion mit sichtbaren Namen mit einem {{jsxref("Functions", "Funktionsausdruck", "", 1)}} definieren:</p>
+
+<pre class="brush: js">var object = {
+  someMethod: function() {}
+};
+
+object.someMethod.displayName = 'someMethod';
+
+console.log(object.someMethod.displayName); // logs "someMethod"
+
+try { someMethod } catch(e) { console.log(e); }
+// ReferenceError: someMethod is not defined
+</pre>
+
+<p>Man kann den <code>displayName</code> einer Funktion dynamisch ändern:</p>
+
+<pre class="brush: js">var object = {
+  // anonymous
+  someMethod: function(value) {
+    arguments.callee.displayName = 'someMethod (' + value + ')';
+  }
+};
+
+console.log(object.someMethod.displayName); // "undefined"
+
+object.someMethod('123')
+console.log(object.someMethod.displayName); // "someMethod (123)"
+</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Konsolen und Profiler präferieren die {{jsxref("Function.name", "func.name")}} zum anzeigen des Namens einer Funktion.</p>
+
+<p>Beim eingeben des Folgenden Quelltextes in der Konsole, wird etwas wie "<code>function My Function()</code>" ausgegeben:</p>
+
+<pre class="brush: js">var a = function() {};
+a.displayName = 'My Function';
+
+a; // "function My Function()"</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>In keiner Spezifikation enthalten.</p>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Function.displayName")}}</p>
+</div>
diff --git a/files/de/web/javascript/reference/global_objects/function/index.html b/files/de/web/javascript/reference/global_objects/function/index.html
new file mode 100644
index 0000000000..dd2a7d5583
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/function/index.html
@@ -0,0 +1,188 @@
+---
+title: Function
+slug: Web/JavaScript/Reference/Global_Objects/Function
+tags:
+  - Constructor
+  - Function
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Global_Objects/Function
+---
+<div>{{JSRef}}</div>
+
+<p>Der <strong><code>Function</code> Konstruktor </strong>erstellt ein neues <code>Funktion</code> Objekt. Das direkte Aufrufen kann Funktionen dynamisch erstellen, hat aber Sicherheits- und Performanceprobleme genau wie der Einsatz von {{jsxref("eval")}}. Im Gegensatz zu <code>eval</code> ermöglicht der Function-Konstruktor die Ausführung von Code im globalen Gültigkeitsbereich, was zu besseren Programmiergewohnheiten führt und eine effizientere Code-Minimierung ermöglicht.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/function-constructor.html")}}</div>
+
+
+
+<p>Jede JavaScript Funktion ist aktuell ein <code>Function</code> Objekt. Das kann mit dem Code <code>(function(){}).constructor === Function</code> gezeigt werden, der <code>true</code> zurückgibt.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>new Function ([<var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]],] <var>functionBody</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parameter</h3>
+
+<dl>
+ <dt><code>arg1, arg2, ... arg<em>N</em></code></dt>
+ <dd>Namen die von der Funktion als formelle Argumentname genutzt werden. Jeder davon muss ein String sein, welcher ein gültiger JavaScript Bezeichner ist oder einer Liste von solchen Strings, getrennt mit Kommata ist. Zum Beispiel: "<code>x</code>", "<code>derWert</code>", oder "<code>a,b</code>".</dd>
+ <dt><code>functionBody</code></dt>
+ <dd>Ein String, welcher den JavaScript Ausdruck als Funktions-Definition beinhaltet.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p>Mit dem <code>Function</code> Konstruktor erstellte <code>Function</code>-Objekte werden übersetzt, sobald die Funktion erstellt wurde. Das ist weniger effizient, als wenn man eine Funktion als <a href="/de/docs/Web/JavaScript/Reference/Operators/function">Funktionsausdruck</a> oder <a href="/de/docs/Web/JavaScript/Reference/Statements/function">Funktionsstatement</a> deklariert und diese innerhalb des Codes abruft, weil diese mit dem Rest des Codes übersetzt werden.</p>
+
+<p>Alle der Funktion übergegebenen Argumente werden als Namen der Bezeichner der Parameter in der zu erstellenden Funktion in der angegebenen Reihenfolge behandelt.</p>
+
+<p>Das Aufrufen des <code>Function</code> Konstruktors als Funktion (ohne den <code>new</code> Operator) hat dieselbe Wirkung, wie als Konstrukteuraufruf. Jedoch kann das Weglassen des <code>new</code> Operators eine kleinere minimierten Codegröße (4 Byte kleiner) erreichen, so dass es besser ist <code>Function</code> ohne <code>new</code> zu benutzen.</p>
+
+<h2 id="Eigenschaften_und_Methoden_von_Function">Eigenschaften und Methoden von <code>Function</code></h2>
+
+<p>Das globale <code>Function</code> Objekt hat eigene Methoden und Eigenschaften, doch, da es eine Funktion selbst ist, erbt es einige Methoden und Eigenschaften durch die Prototypkette aus {{jsxref("Function.prototype")}}.</p>
+
+<h2 id="Function_Prototyp_Objekt"><code>Function</code> Prototyp Objekt</h2>
+
+<h3 id="Eigenschaften">Eigenschaften</h3>
+
+<div>{{page('/de/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype', 'Eigenschaften')}}</div>
+
+<h3 id="Methods" name="Methods">Methoden</h3>
+
+<div>{{page('/de/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype', 'Methoden')}}</div>
+
+<h2 id="Function_instances" name="Function_instances"><code>Function</code> Instanzen</h2>
+
+<p>Funktions-Instanzen erben Methoden und Eigenschaften vom {{jsxref("Function.prototype")}}. Wie bei allen Konstruktoren kann das Prototypen Objekt verändern werden, um Änderungen an allen Funktions-Instanzen durchzuführen.</p>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<h3 id="Example.3A_Specifying_arguments_with_the_Function_constructor" name="Example.3A_Specifying_arguments_with_the_Function_constructor">Spezifizieren von Argumente mit dem <code>Function</code> Konstruktor</h3>
+
+<p>Der folgende Code erstellt ein Funktions-Objekt, mit zwei Argumenten.</p>
+
+<pre class="brush: js">// Das Beispiel kann direkt in der JavaScript Console ausgeführt werden.
+
+// Erstellt eine Funktion mit zwei Argumenten und gibt die Summe dieser Argumente zurück
+var adder = new Function('a', 'b', 'return a + b');
+
+// Aufruf der Funktion
+adder(2, 6);
+// &gt; 8
+</pre>
+
+<p>Die Argumente "a" und "b" sind formale Argument-Namen, welche im Funktionskörper genutzt werden, "<code>return a + b</code>".</p>
+
+<h3 id="Unterschiede_zwischen_dem_Function_Konstruktor_und_Funktionsdeklarationen">Unterschiede zwischen dem <code>Function</code> Konstruktor und Funktionsdeklarationen</h3>
+
+<p>Funktionen, die mit dem <code>Function</code> Konstruktor erstellt werden, erstellen keine Closures in ihrem Erstellungskontext; Sie werden immer im globalen Scope erstellt. Wenn diese ausgeführt wird, kann sie nur auf eigene lokale oder globale Variablen zugreifen, jedoch nicht auf die aus dem Erstellungskontext des <code>Function</code> Konstruktor aufzufes. Dieses ist der Unterschied zum Einsatz von {{jsxref("eval")}} mit Quelltext für einen Funktionsausdruck.</p>
+
+<pre class="brush: js">var x = 10;
+
+function createFunction1() {
+    var x = 20;
+    return new Function('return x;'); // this |x| refers global |x|
+}
+
+function createFunction2() {
+    var x = 20;
+    function f() {
+        return x; // this |x| refers local |x| above
+    }
+    return f;
+}
+
+var f1 = createFunction1();
+console.log(f1());          // 10
+var f2 = createFunction2();
+console.log(f2());          // 20
+</pre>
+
+<p>Der "richtige" Weg für das Ausführen von externen Code mit <code>Function</code> (Für maximale Minimierung).</p>
+
+<pre class="brush: js">function makeFunction(code){
+    return Funktion('"use strict";return ' + code)();
+}
+var add = makeFunktion(
+  "" + function(a, b, c){ return a + b + c } // dieser Code ist in einer seperaten Datei irgendwo im Produktivprogramm
+)
+console.log( add(1, 2, 3) );  // gibt sechs aus
+</pre>
+
+<p>Zu beachten ist, dass der obere Code komplett unpraktikabel ist. Man sollte <code>Function</code> niemals so missbrauchen. Stattdessen ist der obere Code nur als vereinfachtes Beispiel für eine Art Modulloader zu sehen, wobei es ein Basisskript gibt, welches dann hunderte von großen optionalen Modulen lädt. Dadurch muss ein Benutzer nicht lange warten, bis alle Module heruntergeladen sind, sondern der Clientcomputer lädt nur die benötigten Module und eine Seite lädt schneller. Dabei wird es beim auswerten von vielen Funktionen empfohlen, sie gebündelt zu übersetzen anstatt jede einzeln.</p>
+
+<pre class="brush: js">function bulkMakeFunctions(){
+    var str = "", i = 1, Len = arguments.length;
+    if(Len) {
+        str = arguments[0];
+        while (i !== Len) str += "," + arguments[i], ++i;
+    }
+    return Funktion('"use strict";return[' + str + ']')();
+}
+const [
+    add,
+    sub,
+    mul,
+    div
+] = bulkMakeFunctions(
+    "function(a,b){return a+b}",
+    "function(a,b){return a-b}",
+    "function(a,b){return a*b}",
+    "function(a,b){return a/b}"
+);
+console.log(sub(add(mul(4, 3), div(225, 5)), 7));
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.3', 'Function')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function-objects', 'Function')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function-objects', 'Function')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Function")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Functions", "Functions and function scope")}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Statements/function", "function statement")}}</li>
+ <li>{{jsxref("Operators/function", "function expression")}}</li>
+ <li>{{jsxref("Statements/function*", "function* statement")}}</li>
+ <li>{{jsxref("Operators/function*", "function* expression")}}</li>
+ <li>{{jsxref("AsyncFunction")}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/function/isgenerator/index.html b/files/de/web/javascript/reference/global_objects/function/isgenerator/index.html
new file mode 100644
index 0000000000..5897905e92
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/function/isgenerator/index.html
@@ -0,0 +1,56 @@
+---
+title: Function.prototype.isGenerator()
+slug: Web/JavaScript/Reference/Global_Objects/Function/isGenerator
+tags:
+  - Function
+  - JavaScript
+  - Method
+  - Non-standard
+  - Obsolete
+translation_of: Archive/Web/JavaScript/Function.isGenerator
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>Die nicht standardisierte <code><strong>isGenerator()</strong></code> Methode wird benutzt, um festzustellen, ob eine Funktion ein <a href="/de/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators.3A_a_better_way_to_build_Iterators">Generator</a> ist. In Firefox Version 58 wurde diese Methode entfernt.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>fun</var>.isGenerator()</code></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein {{jsxref("Boolean")}} Welcher angibt, ob eine Funktion ein <a href="/de/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators.3A_a_better_way_to_build_Iterators">Generator</a> ist.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>isGenerator()</code> Methode stellt fest, ob eine Funktion <em><code>fun</code></em> ein <a href="/de/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators.3A_a_better_way_to_build_Iterators">Generator</a> ist. Diese war in einem frühen Vorschlag, wurde jedoch nicht in der ECMAScript 2015 Spezifikation eingefügt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js">function f() {}
+
+function* g() {
+  yield 42;
+}
+
+console.log('f.isGenerator() = ' + f.isGenerator()); // f.isGenerator() = false
+console.log('g.isGenerator() = ' + g.isGenerator()); // g.isGenerator() = true
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Ist in keiner Spezifikation vorhanden. Implementiert in JavaScript 1.8.6.</p>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Function.isGenerator")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iteratoren und Generatoren</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/function/length/index.html b/files/de/web/javascript/reference/global_objects/function/length/index.html
new file mode 100644
index 0000000000..3eca57b92a
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/function/length/index.html
@@ -0,0 +1,92 @@
+---
+title: Function.length
+slug: Web/JavaScript/Reference/Global_Objects/Function/length
+tags:
+  - Function
+  - JavaScript
+  - Property
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/length
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>length</strong></code> Eigenschaft gibt die Anzahl der von der Funktion erwarteten Parameter an.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/function-length.html")}}</div>
+
+
+
+<div>{{js_property_attributes(0,0,1)}}</div>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p><code>length</code> ist eine Eigenschaft eines Funktionsobjekts und zeigt an, wie viele Argumente die Funktion erwartet, d.h. die Anzahl der formalen Parameter. Diese Anzahl beinhaltet jedoch nicht den {{jsxref("rest_parameters", "rest Parameter", "", 1)}} und bezieht außerdem auch nur die Parameter ein, die in der Reihenfolge vor dem ersten Parameter mit einem Default-Wert sind. Im Gegensatz dazu ist {{jsxref("Functions/arguments/length", "arguments.length")}} eine in jeder Funktion verfügbare lokale Variable, die die tatsächliche Anzahl der übergebenen Argumente angibt.</p>
+
+<h3 id="Dateneigenschaft_des_Function_Konstruktors">Dateneigenschaft des <code>Function</code> Konstruktors</h3>
+
+<p>Der {{jsxref("Global_Objects/Function", "Function")}} Konstruktor ist selbst ein {{jsxref("Global_Objects/Function", "Function")}} Objekt. Seine Eigenschaft <code>length</code> hat den Wert 1. Dessen Attribute lauten: Writable: <code>false</code>, Enumerable: <code>false</code>, Configurable: <code>true</code>.</p>
+
+<h3 id="Eigenschaft_des_Function_prototype_Objekt">Eigenschaft des <code>Function</code> prototype Objekt</h3>
+
+<p>Die length-Eigenschaft des {{jsxref("Global_Objects/Function", "Function")}} prototype Objekts hat den Wert 0.</p>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<pre class="brush: js">console.log(Function.length); /* 1 */
+
+console.log((function()        {}).length); /* 0 */
+console.log((function(a)       {}).length); /* 1 */
+console.log((function(a, b)    {}).length); /* 2 etc. */
+
+console.log((function(...args) {}).length);
+// 0, rest parameter wird nicht gezählt
+
+console.log((function(a, b = 1, c) {}).length);
+// 1, nur Parameter vor dem ersten Parameter mit
+// einem Default-Wert werden gezählt
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.3.5.1', 'Function.length')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function-instances-length', 'Function.length')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Das <code>configurable</code> Attribut dieser Eigenschaft ist nun <code>true</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function-instances-length', 'Function.length')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Function.length")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/Function", "Function")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/function/name/index.html b/files/de/web/javascript/reference/global_objects/function/name/index.html
new file mode 100644
index 0000000000..29a3903d56
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/function/name/index.html
@@ -0,0 +1,229 @@
+---
+title: Function.name
+slug: Web/JavaScript/Reference/Global_Objects/Function/name
+tags:
+  - ECMAScript 2015
+  - Function
+  - JavaScript
+  - Property
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/name
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">Die nur lesende Eigenschaft <code><strong>name</strong></code> eines {{jsxref("Function")}} Objektes welche den Namen, der beim erstellen angegeben wurde enthält oder <code>"anonymous"</code> für anonyme Funktionen.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/js/function-name.html")}}</div>
+
+
+
+<div>{{js_property_attributes(0,0,1)}}</div>
+
+<div> </div>
+
+<div class="note">
+<p>Zu beachten ist, dass in nicht standardisierten implementierungen vor ES2015 das <code>configurable</code> Attribute ebenfalls <code>false</code> ist.</p>
+</div>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Name_bei_Funktionsanweisungen">Name bei Funktionsanweisungen</h3>
+
+<p>Die <code>name</code> Eigenschaft gibt den Namen einer Funktionsanweisung:</p>
+
+<pre class="brush: js">function doSomething() {}
+doSomething.name; // logs "doSomething"
+</pre>
+
+<h3 id="Name_bei_Function_Konstruktoren">Name bei <code>Function</code> Konstruktoren</h3>
+
+<p>Funktionen, die mit der Syntax <code>new Function(...)</code> oder nur <code>Function(...)</code> erstellt werden, erstellen {{jsxref("Function")}}  mit dem Namen "anonymous".</p>
+
+<pre class="brush: js">(new Function).name; // "anonymous"
+</pre>
+
+<h3 id="Gefolgerte_Funktionsnamen">Gefolgerte Funktionsnamen</h3>
+
+<p>Bei Variablen und Methoden kann der Name von anonymen Funktionen von ihrer syntaktischen Position gefolgert werden (neu in ECMAScript 2015).</p>
+
+<pre class="brush: js">var f = function() {};
+var object = {
+  someMethod: function() {}
+};
+
+console.log(f.name); // "f"
+console.log(object.someMethod.name); // "someMethod"
+</pre>
+
+<p>Funktionen mit einem Namen lassen sich mittels {{jsxref("Operators/Function", "Funktionanweisung", "", 1)}} definieren:</p>
+
+<pre class="brush: js">var object = {
+  someMethod: function object_someMethod() {}
+};
+console.log(object.someMethod.name); // logs "object_someMethod"
+
+try { object_someMethod } catch(e) { console.log(e); }
+// ReferenceError: object_someMethod is not defined
+</pre>
+
+<p>Man kann den Namen einer Funktion nicht ändern, weil diese Eigenschaft schreibgeschützt ist:</p>
+
+<div class="hidden">
+<p>Example below contradicts with what is said at the beginning of this section and doesn't work as described.</p>
+</div>
+
+<pre class="brush: js">var object = {
+  // anonyme Funktionsdefinition
+  someMethod: function() {}
+};
+
+object.someMethod.name = 'someMethod';
+console.log(object.someMethod.name); // leerer String, someMethod ist anonym
+</pre>
+
+<p>Um sie zu ändern, kann {{jsxref("Object.defineProperty()")}} eingesetzt werden.</p>
+
+<h3 id="Kurzform_von_Methodennamen">Kurzform von Methodennamen</h3>
+
+<pre class="brush: js">var o = {
+  foo(){}
+};
+o.foo.name; // "foo";
+</pre>
+
+<h3 id="Gebundene_Funktionsnamen">Gebundene Funktionsnamen</h3>
+
+<p>{{jsxref("Function.bind()")}} erzeugt eine Funktion mit dem Namen, der sich aus <code> "bound "</code> und dem Namen der Funktion zusammensetzt.</p>
+
+<pre class="brush: js">function foo() {};
+foo.bind({}).name; // "bound foo"</pre>
+
+<h3 class="brush: js" id="Funktionsnamen_für_Getter_und_Setter">Funktionsnamen für Getter und Setter</h3>
+
+<p>Beim Einsatz von <code><a href="/de/docs/Web/JavaScript/Reference/Functions/get">get</a></code> und <code><a href="/de/docs/Web/JavaScript/Reference/Functions/set">set</a></code> Zugriffseigenschaften wird "get" oder "set" im Funktionsnamen auftauchen.</p>
+
+<pre class="brush: js">var o = {
+  get foo(){},
+  set foo(x){}
+};
+
+var descriptor = Object.getOwnPropertyDescriptor(o, "foo");
+descriptor.get.name; // "get foo"
+descriptor.set.name; // "set foo"
+</pre>
+
+<h3 id="Funktionsnamen_in_Klassen">Funktionsnamen in Klassen</h3>
+
+<p>Über <code>obj.constructor.name</code> lässt sich die "Klasse" eines Objekts überprüfen (jedoch sollten die unten stehende Warnung berücksichtigt werden):</p>
+
+<pre class="brush: js">function Foo() {}  // ES2015 Syntax: class Foo {}
+
+var fooInstance = new Foo();
+console.log(fooInstance.constructor.name); // logs "Foo"
+</pre>
+
+<div class="warning">
+<p><strong>Warnung:</strong> Der Skriptinterpreter wird die eingebaute <code>Function.name</code> Eigenschaft nur setzen, wenn eine Funktion keine eigene Eigenschaft mit dem Namen <em>name</em> hat (siehe Kapitel <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-setfunctionname">9.2.11 der ECMAScript2015 Sprachdefinition</a>). Jedoch spezifiziert ES2015 das <em>static</em> Schlüsselwort so, dass statische Methoden als eigene Eigenschaft des Klassenkonstruktorfunktion gesetzt wird (ECMAScript2015, <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-runtime-semantics-classdefinitionevaluation">14.5.14.21.b</a> + <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-object-initializer-runtime-semantics-propertydefinitionevaluation">12.2.6.9</a>).</p>
+</div>
+
+<p>Aus diesem Grund kann der Klassenname für jede Klasse mit einer statischen Methodeneigenschaft <code>name()</code> nicht bestimmt werden:</p>
+
+<pre class="brush: js">class Foo {
+  constructor() {}
+  static name() {}
+}
+</pre>
+
+<p>Mit einer <code>static name()</code> Methode hält <code>Foo.name</code> nicht mehr den aktuellen Klassennamen bereit, sondern eine Referenz zu dem <code>name()</code> Funktionsobjekt. Die oben stehende Klassendefinition in ES2015 Syntax kann in ES5 Syntax für Chrome oder Firefox wie folgt übersetzt werden:</p>
+
+<pre class="brush: js">function Foo() {}
+Object.defineProperty(Foo, 'name', { writable: true});
+Foo.name = function() {};
+</pre>
+
+<p>Beim Versuch die Klasse von <code>fooInstance</code> mithilfe von <code>fooInstance.constructor.name</code> herauszufinden, bekommt man nicht den Klassennamen, sondern eine Referenz auf die statische Methode. Beispiel:</p>
+
+<pre class="brush: js">var fooInstance = new Foo();
+console.log(fooInstance.constructor.name); // logs function name()
+</pre>
+
+<p>Man sieht zudem in der Beispiel  der ES5 Syntax für Chrome und Firefox, dass die Definition der statischen <code>Foo.name</code> Methode überschreibbar (<em>writable</em>) wird. Wird nicht angegeben, ist der Standard für solche Definition nur lesend (<em>read-only</em>).</p>
+
+<pre class="brush: js">Foo.name = 'Hello'
+console.log(Foo.name); // logs "Hello" if class Foo has a static name() property but "Foo" if not.
+</pre>
+
+<p>Aus diesem Grund darf man sich nicht darauf verlassen, dass <code>Function.name</code> immer den Klassennamen zurück gibt.</p>
+
+<h3 id="Symbols_als_Funktionsnamen">Symbols als Funktionsnamen</h3>
+
+<p>Wenn ein {{jsxref("Symbol")}} als Funktionsnamen genutzt wird und das Symbol eine Beschreibung (description) hat, ist der Methodennamen gleich der Beschreibung in eckigen Klammern.</p>
+
+<pre class="brush: js">var sym1 = Symbol("foo");
+var sym2 = Symbol();
+bar o = {
+  [sym1]: function(){},
+  [sym2]: function(){}
+};
+
+o[sym1].name; // "[foo]"
+o[sym2].name; // ""
+</pre>
+
+<h2 id="JavaScript-Kompressoren_und_-Minimierer">JavaScript-Kompressoren und -Minimierer</h2>
+
+<div class="warning">
+<p><strong>Warnung:</strong> Beim der Benutzung von <code>Function.name</code> ist Vorsicht geboten, wenn Codetransformtionen, wie JavaScript Kompressoren (Minimierer) oder Obfuscators, zum Einsatz kommen. Diese Werkzeuge werden häufig im Zuge von Werkzeugketten zum Bauen von JavaScript-Programmen eingesetzt um die Größe eines Programms zu für den Produktivbetrieb zu minimieren. Solche Werkzeuge ändern die Funktionsnamen häufig beim Erstellen.</p>
+</div>
+
+<p>Quelltext wie dieser:</p>
+
+<pre class="brush: js">function Foo() {};
+var foo = new Foo();
+
+if (foo.constructor.name === 'Foo') {
+  console.log("'foo' is an instance of 'Foo'");
+} else {
+  console.log('Oops!');
+}
+</pre>
+
+<p>wird manchmal zu folgendem Quelltext komprimiert:</p>
+
+<pre class="brush: js">function a() {};
+var b = new a();
+if (b.constructor.name === 'Foo') {
+  console.log("'foo' is an instance of 'Foo'");
+} else {
+  console.log('Oops!');
+}
+</pre>
+
+<p>In der nicht komprimierten Version läuft das Programm in den true-Zweig und gibt <code><em>'foo' is an instance of 'Foo'</em></code> aus. Die komprimierte Version verhält sich anders und läuft in den else-Zweig. Wenn man sich <code>Function.name</code> zurückerinnert, wie in obigen Beispielen, muss beachtet werden, dass Kompressoren die Methodennamen nicht ändert oder nicht annimmt, dass eine Funktion nur in diesem Quelltext benutzt.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-name', 'name')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function-instances-name', 'name')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+{{Compat("javascript.builtins.Function.name")}}</div>
diff --git a/files/de/web/javascript/reference/global_objects/function/prototype/index.html b/files/de/web/javascript/reference/global_objects/function/prototype/index.html
new file mode 100644
index 0000000000..afb602971c
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/function/prototype/index.html
@@ -0,0 +1,99 @@
+---
+title: Function.prototype
+slug: Web/JavaScript/Reference/Global_Objects/Function/prototype
+tags:
+  - Function
+  - JavaScript
+  - Property
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Function
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>Function.prototype</strong></code> Eigenschaft repräsentiert das {{jsxref("Function")}} Prototyp Objekt.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>{{jsxref("Function")}} Objekte erben von <code>Function.prototype</code>.  <code>Function.prototype</code> kann nicht modifiziert werden.</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt>{{jsxref("Function.arguments")}} {{deprecated_inline}}</dt>
+ <dd>Ein Array, welches die der Funktion übergebenen Parameter enthält. Dieses ist veraltet als Eigenschaft von {{jsxref("Function")}}. Stattdessen sollte das {{jsxref("Functions/arguments", "arguments")}} Objekt in einer Funktion benutzt werden</dd>
+ <dt><s class="obsoleteElement">{{jsxref("Function.arity")}} {{obsolete_inline}}</s></dt>
+ <dd><s class="obsoleteElement">Wurde benutzt, um die Anzahl der erwarteten Argumente einer Funktion einzustellen, ist jedoch entfernt. Stattdessen kann die {{jsxref("Function.length", "length")}} Eigenschaft genutzt werden.</s></dd>
+ <dt>{{jsxref("Function.caller")}} {{non-standard_inline}}</dt>
+ <dd>Spezifizert die Funktion, die die aktuelle Funktion aufgerufen hat.</dd>
+ <dt>{{jsxref("Function.length")}}</dt>
+ <dd>Spezifizert die Anzahl der Parameter, die eine Funktion erwartet.</dd>
+ <dt>{{jsxref("Function.name")}}</dt>
+ <dd>Der Name einer Funktion.</dd>
+ <dt>{{jsxref("Function.displayName")}} {{non-standard_inline}}</dt>
+ <dd>Der angezeigte Name einer Funktion.</dd>
+ <dt><code>Function.prototype.constructor</code></dt>
+ <dd>Spezifiziert die Funktion, die ein Objekt Prototyp erstellt. Mehr Informationen bei {{jsxref("Object.prototype.constructor")}}.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<dl>
+ <dt>{{jsxref("Function.prototype.apply()")}}</dt>
+ <dd>Führt eine Funktion aus und setzt das <em>this</em> Objekt mit einem übergebenen wert. Parameter können in einem {{jsxref("Array")}} Objekt übergeben werden.</dd>
+ <dt>{{jsxref("Function.prototype.bind()")}}</dt>
+ <dd><span id="result_box" lang="de"><span>Erstellt eine neue Funktion, die beim Aufruf einen angegebenen Wert für <em>this</em> hat, wobei die Argumentfolge vor dem Aufruf der neuen Funktion fest steht.</span></span></dd>
+ <dt>{{jsxref("Function.prototype.call()")}}</dt>
+ <dd>Führt eine Funktion aus und setzt <em>this</em> auf einen übergebenen Wert. Parameter können übergeben werden.</dd>
+ <dt>{{jsxref("Function.prototype.isGenerator()")}} {{non-standard_inline}}</dt>
+ <dd>Gibt <code>true</code> zurück, wenn die Funktion ein <a href="/de/docs/Web/JavaScript/Guide/Iterators_and_Generators">Generator</a> ist, anderfalls <code>false</code>.</dd>
+ <dt>{{jsxref("Function.prototype.toSource()")}} {{non-standard_inline}}</dt>
+ <dd>Gibt eine Stringrepräsentation des Quelltextes einer Funktion zurück. Sie überschreibt die {{jsxref("Object.prototype.toSource")}} Methode.</dd>
+ <dt>{{jsxref("Function.prototype.toString()")}}</dt>
+ <dd>Gibt eine Stringrepräsentation des Quelltextes einer Funktion zurück. Sie überschreibt die {{jsxref("Object.prototype.toString")}} Methode.</dd>
+</dl>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.1</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.3.5.2', 'Function.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function-instances-prototype', 'Function.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function-instances-prototype', 'Function.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Function.prototype")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Function")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/function/tosource/index.html b/files/de/web/javascript/reference/global_objects/function/tosource/index.html
new file mode 100644
index 0000000000..75552bdc8c
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/function/tosource/index.html
@@ -0,0 +1,72 @@
+---
+title: Function.prototype.toSource()
+slug: Web/JavaScript/Reference/Global_Objects/Function/toSource
+tags:
+  - Function
+  - JavaScript
+  - Method
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/toSource
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>Die <code><strong>toSource()</strong></code> Methode gibt eine Stringrepräsentation des Quelltextes des Objektes zurück.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>function</var>.toSource();
+Function.toSource();
+</pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine Stringrepräsentation des Quelltextes des Objektes.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>toSource</code> Methode gibt die folgenden Werte zurück:</p>
+
+<ul>
+ <li>Für das eingebaute {{jsxref("Function")}} Objekt gibt <code>toSource()</code> den folgenden String zurück, der angibt, dass der Quelltext nicht verfügbar ist:
+
+  <pre class="brush: js">function Function() {
+    [native code]
+}
+</pre>
+ </li>
+ <li>Für Benutzerdefinierte Funktionen, gibt <code>toSource()</code> den JavaScript Quelltext zurück, welcher das Objekt als String definiert.</li>
+ <li>
+  <pre class="brush: js">// Zum Beispiel:
+function hello() {
+  console.log("Hello, World!");
+}
+
+hello.toSource();</pre>
+ </li>
+ <li>
+  <pre class="brush: js">// Das Resultat
+"function hello() {
+  console.log(\"Hello, World!\");
+}"
+</pre>
+ </li>
+</ul>
+
+<p>Die Methode wird normalerweise von JavaScript selbst aufgerufen und nicht explizit im Quelltext. Man kann <code>toSource</code> während des Debuggens aufrufen, um zu ermitteln, was ein Objekt enthält.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Ist in keinem Standard. Implementiert in JavaScript 1.3.</p>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Function.toSource")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/function/tostring/index.html b/files/de/web/javascript/reference/global_objects/function/tostring/index.html
new file mode 100644
index 0000000000..5b3978809e
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/function/tostring/index.html
@@ -0,0 +1,236 @@
+---
+title: Function.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/Function/toString
+tags:
+  - Function
+  - JavaScript
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/toString
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>toString()</strong></code> Methode gibt eine Stringrepräsentation des Quelltextes einer Funktion zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/function-tostring.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>function</var>.toString()</code></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine Stringrepräsentation des Quelltextes der Funktion.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Das {{jsxref("Function")}} Objekt überschreibt die von {{jsxref("Object")}} geerbte Methode {{jsxref("Object.prototype.toString", "toString")}}; sie erbt nicht von {{jsxref("Object.prototype.toString")}}. Für benutzerdefinierte {{jsxref("Function")}} Objekte gibt die <code>toString</code> Methode einen String zurück, welcher den Quelltext, der die Funktion definiert, enthält.</p>
+
+<p>JavaScript ruft die <code>toString</code> Methode automatisch auf, wenn einen {{jsxref("Function")}} als Text repräsentiert werden muss, z. B. wenn eine Funktion mit einem String konkateniert wird.</p>
+
+<p>Die <code>toString()</code> Methode erzeugt eine {{jsxref("TypeError")}} Fehler("Function.prototype.toString called on incompatible object"), wenn das Objekt von <code>this</code> Objekt kein <code>Function</code> Objekt ist. Dieser wird auch bei einem {{jsxref("Proxy")}} Objekte erzeugt, zum Beispiel:</p>
+
+<pre class="brush: js example-bad">Function.prototype.toString.call('foo'); // TypeError
+
+var proxy = new Proxy(function() {}, {});
+Function.prototype.toString.call(proxy); // TypeError
+</pre>
+
+<p>Wenn die <code>toString()</code> Methode auf eingebauten Objekten oder einer von <code>Function.prototype.bind</code> erstellten Methode aufgerufen wird, gibt <code>toString() </code><em>native function string</em> zurück, was wie folgt aussiet:</p>
+
+<pre class="brush: js">"function () {\n    [native code]\n}"
+</pre>
+
+<p>Wenn die <code>toString()</code> Methode auf einer Funktion aufgerufen wird, die mit dem <code>Function</code> Konstruktor erstellt wurde, gibt diese den Quelltext der syntetischen Funktionsdeklerations mit dem Namen "anonymous" zurück, welche die Parameter und den Funktionrumpf enthält.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Funktion</th>
+   <th scope="col">Ergebnis von Function.prototype.toString</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <pre>
+function f(){}</pre>
+   </td>
+   <td>
+    <pre>
+"function f(){}"</pre>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <pre>
+class A { a(){} }</pre>
+   </td>
+   <td>
+    <pre>
+"class A { a(){} }"</pre>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <pre>
+function* g(){}</pre>
+   </td>
+   <td>
+    <pre>
+"function* g(){}"</pre>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <pre>
+a =&gt; a</pre>
+   </td>
+   <td>
+    <pre>
+"a =&gt; a"</pre>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <pre>
+({ a(){} }.a)</pre>
+   </td>
+   <td>
+    <pre>
+"a(){}"</pre>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <pre>
+({ *a(){} }.a)</pre>
+   </td>
+   <td>
+    <pre>
+"*a(){}"</pre>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <pre>
+({ [0](){} }[0])</pre>
+   </td>
+   <td>
+    <pre>
+"[0](){}"</pre>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <pre>
+Object.getOwnPropertyDescriptor({
+    get a(){}
+}, "a").get</pre>
+   </td>
+   <td>
+    <pre>
+"get a(){}"</pre>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <pre>
+Object.getOwnPropertyDescriptor({
+    set a(x){}
+}, "a").set</pre>
+   </td>
+   <td>
+    <pre>
+"set a(x){}"</pre>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <pre>
+Function.prototype.toString</pre>
+   </td>
+   <td>
+    <pre>
+"function toString() { [native code] }"</pre>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <pre>
+(function f(){}.bind(0))</pre>
+   </td>
+   <td>
+    <pre>
+"function () { [native code] }"</pre>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <pre>
+Function("a", "b")</pre>
+   </td>
+   <td>
+    <pre>
+"function anonymous(a\n) {\nb\n}"</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function.prototype.tostring', 'Function.prototype.toString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Spezifischere Anforderungen wurden an die Stringrepräsentation hinzugefügt.</td>
+  </tr>
+  <tr>
+   <td><a href="http://tc39.github.io/Function-prototype-toString-revision/">Function.prototype.toString revision</a></td>
+   <td>Draft</td>
+   <td>Standardisierung nativer Funktionsstrings am Zeilenende.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function.prototype.tostring', 'Function.prototype.toString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Function.toString")}}</p>
+</div>
+
+<h2 id="Firefox_spezifische_Hinweise">Firefox spezifische Hinweise</h2>
+
+<ul>
+ <li>Seit Firefox 17, ist <code>Function.prototype.toString()</code> implementiert zum Speichern von Funktionsquelltexten. Der Decompiler wurde entfernt, so das der <code>indentation</code> Parameter nicht mehr gebraucht wird. Für mehr Details siehe {{bug("761723")}}.</li>
+ <li>Seit Firefox 38, erzeugt <code>Function.prototype.toString()</code> einen Fehler für {{jsxref("Proxy")}} Objekts ({{bug(1100936)}}).</li>
+</ul>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toString()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/generator/index.html b/files/de/web/javascript/reference/global_objects/generator/index.html
new file mode 100644
index 0000000000..af21ef18f8
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/generator/index.html
@@ -0,0 +1,137 @@
+---
+title: Generator
+slug: Web/JavaScript/Reference/Global_Objects/Generator
+tags:
+  - ECMAScript 2015
+  - Generator
+  - JavaScript
+  - Legacy Generator
+  - Legacy Iterator
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Generator
+---
+<div>{{JSRef}}</div>
+
+<p>Das <code><strong>Generator</strong></code> Objekt wird von der {{jsxref("Statements/function*", "Generator Function", "", 1)}} zurückgegeben und entspricht beidem, dem <a href="/de/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol">Iterable Protokoll</a> und dem <a href="/de/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterator_protocol">Iterator Protokoll</a>.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">function* gen() {
+  yield 1;
+  yield 2;
+  yield 3;
+}
+
+var g = gen(); // "Generator { }"</pre>
+
+<h2 id="Methoden">Methoden</h2>
+
+<dl>
+ <dt>{{jsxref("Generator.prototype.next()")}}</dt>
+ <dd>Gibt einen Wert vom Generator zurück (ausgelöst durch {{jsxref("Operators/yield", "yield")}}).</dd>
+ <dt>{{jsxref("Generator.prototype.return()")}}</dt>
+ <dd>Gibt den gegebene Wert zurück und beendet den Generator.</dd>
+ <dt>{{jsxref("Generator.prototype.throw()")}}</dt>
+ <dd>Erzeugt einen Fehler im Generator (beendet auch den Generator, wenn der Fehler nicht im Generator abgefangen wird).</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Ein_unendlicher_Iterator">Ein unendlicher Iterator</h3>
+
+<pre class="brush: js">function* idMaker() {
+    var index = 0;
+    while(true)
+        yield index++;
+}
+
+var gen = idMaker(); // "Generator { }"
+
+console.log(gen.next().value); // 0
+console.log(gen.next().value); // 1
+console.log(gen.next().value); // 2
+// ...</pre>
+
+<h2 id="Veraltete_Generatorobjekte">Veraltete Generatorobjekte</h2>
+
+<p>Firefox (SpiderMonkey) hat eine frühe Version der Generatoren in <a href="/de/docs/Web/JavaScript/New_in_JavaScript/1.7">JavaScript 1.7</a> implementiert, bei der kein Stern (*) in der Funktionsdeklaration nötig war (man benutzte nur das <code>yield</code> Schlüsselwort im Funktionsrumpf). Seit Firefox 58 (Released am 23. Januar 2018) sind diese veralteten Generatoren entfernt ({{bug(1083482)}}).</p>
+
+<h3 id="Veraltete_Generator_Methoden">Veraltete Generator Methoden</h3>
+
+<dl>
+ <dt><code>Generator.prototype.next() </code>{{non-standard_inline}}</dt>
+ <dd>Gibt einen Wert vom {{jsxref("Operators/yield", "yield")}} Ausdruck zurück. Diese korrespondiert mit der <code>next()</code> Methode in ES2015 Generator Objekt.</dd>
+ <dt><code>Generator.prototype.close()</code> {{non-standard_inline}}</dt>
+ <dd>Beendet einen Generator, so dass der Aufruf von <code>next()</code> zu einem {{jsxref("StopIteration")}} Fehler führt. Diese korrespondiert mit der <code>return()</code> Methode in ES2015 Generator Objekt.</dd>
+ <dt><code>Generator.prototype.send()</code> {{non-standard_inline}}</dt>
+ <dd>Wird benutzt, um einen Wert zum Generator zu senden. Der wert wird vom {{jsxref("Operators/yield", "yield")}} Ausdruck zurückgegeben und gibt einen Wert vom nächsten {{jsxref("Operators/yield", "yield")}} Ausdruck zurück. Diese korrespondiert mit der <code>next(x)</code> Methode in ES2015 Generator Objekt.</dd>
+ <dt><strong><code>Generator.</code></strong><code>prototype.</code><strong><code>throw()</code> </strong> {{non-standard_inline}}</dt>
+ <dd>Erzeugt einen Fehler im Generator. Diese korrespondiert mit der <code>throw()</code> Methode in ES2015 Generator Objekt.</dd>
+</dl>
+
+<h3 id="Veraltete_Generator_Beispiele">Veraltete Generator Beispiele</h3>
+
+<pre class="brush: js">function fibonacci() {
+  var a = yield 1;
+  yield a * 2;
+}
+
+var it = fibonacci();
+console.log(it);          // "Generator {  }"
+console.log(it.next());   // 1
+console.log(it.send(10)); // 20
+console.log(it.close());  // undefined
+console.log(it.next());   // throws StopIteration (as the generator is now closed)
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-generator-objects', 'Generator objects')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-generator-objects', 'Generator objects')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Generator")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<h3 id="Veraltete_Generatoren">Veraltete Generatoren</h3>
+
+<ul>
+ <li>{{jsxref("Statements/Legacy_generator_function", "Die veraltete Generator Function", "", 1)}}</li>
+ <li>{{jsxref("Operators/Legacy_generator_function", "Der veraltete Generator Functionsausdruck", "", 1)}}</li>
+ <li>{{jsxref("StopIteration")}}</li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol">The legacy Iterator protocol</a></li>
+</ul>
+
+<h3 id="ES2015_Generatoren">ES2015 Generatoren</h3>
+
+<ul>
+ <li>{{jsxref("Functions", "Functions", "", 1)}}</li>
+ <li>{{jsxref("Statements/function", "function")}}</li>
+ <li>{{jsxref("Operators/function", "function Ausdruck")}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Statements/function*", "function*")}}</li>
+ <li>{{jsxref("Operators/function*", "function* Ausdruck")}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+ <li><a href="/de/docs/Web/JavaScript/Guide/The_Iterator_protocol">The Iterator protocol</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/generator/next/index.html b/files/de/web/javascript/reference/global_objects/generator/next/index.html
new file mode 100644
index 0000000000..44c45b77cf
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/generator/next/index.html
@@ -0,0 +1,116 @@
+---
+title: Generator.prototype.next()
+slug: Web/JavaScript/Reference/Global_Objects/Generator/next
+tags:
+  - ECMAScript 2015
+  - Generator
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Generator/next
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>next</strong></code><strong><code>()</code></strong> Methode gibt ein Objekt mit den zwei Eigenschaften <code>done</code> und <code>value</code> zurück. Man kann der <code>next</code> Methode auch einen Wert für den Generator übergeben.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>gen</var>.next(value)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Der Wert der zum Generator übermittelt wird.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>Ein <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Object">Objekt</a></code> mit zwei Eigenschaften:</p>
+
+<ul>
+ <li><code>done</code> (boolean)
+
+  <ul>
+   <li>Hat den Wert <code>true</code>, wenn der Iterator am Ende der Sequenz angekommen ist. In diesem Fall ist <code>value</code>, der Rückgabewert des Iterators, optional spezifiziert.</li>
+   <li>Hat den Wert <code>false</code>, wenn der Iterator einen weiteren Wert aus der Sequenz produzieren kann. Das ist gleichbedeutend damit, dass die <code>done</code> Eigenschaft nicht spezifiziert ist.</li>
+  </ul>
+ </li>
+ <li><code>value</code> - Ein JavaScript Wert, der von einem Iterator zurückgegeben wird. Kann weggelassen werden, wenn <code>done</code> <code>true</code> ist.</li>
+</ul>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_next">Einsatz von <code>next()</code></h3>
+
+<p>Das folgende Beispiel zeigt einen einfachen Generator und das Objekt, welches die <code>next</code> Methode zurück gibt:</p>
+
+<pre class="brush: js">function* gen() {
+  yield 1;
+  yield 2;
+  yield 3;
+}
+
+var g = gen(); // "Generator { }"
+g.next();      // "Object { value: 1, done: false }"
+g.next();      // "Object { value: 2, done: false }"
+g.next();      // "Object { value: 3, done: false }"
+g.next();      // "Object { value: undefined, done: true }"
+</pre>
+
+<h3 id="Werte_zum_Generator_senden">Werte zum Generator senden</h3>
+
+<p>Im diesem Beispiel wird <code>next</code> mit einem Wert aufgerufen. Zu beachten ist, dass der Generator beim ersten aufruf nicht ausgibt, weil der Generator keinen initialen Wert generiert.</p>
+
+<pre class="brush: js">function* gen() {
+  while(true) {
+    var value = yield null;
+    console.log(value);
+  }
+}
+
+var g = gen();
+g.next(1);
+// "{ value: null, done: false }"
+g.next(2);
+// 2
+// "{ value: null, done: false }"
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-generator.prototype.next', 'Generator.prototype.next')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-generator.prototype.next', 'Generator.prototype.next')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Generator.next")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><code><a href="/de/docs/Web/JavaScript/Reference/Statements/function*">function*</a></code></li>
+ <li><a href="/de/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iteratoren and Generatoren</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/generator/return/index.html b/files/de/web/javascript/reference/global_objects/generator/return/index.html
new file mode 100644
index 0000000000..897cd9b4f9
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/generator/return/index.html
@@ -0,0 +1,102 @@
+---
+title: Generator.prototype.return()
+slug: Web/JavaScript/Reference/Global_Objects/Generator/return
+tags:
+  - ECMAScript 2015
+  - Generator
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Generator/return
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>return()</strong></code> Gibt den gegebenen Wert und beendet den Generator</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>gen</var>.return(value)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Wert, der zurückgegeben werden soll.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Der als Argument angegebene Wert.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_return()">Einsatz von <code>return()</code></h3>
+
+<p>Das folgende Beispiel zeigt einen einfachen Generator und den Einsatz der <code>return</code> Methode.</p>
+
+<pre class="brush: js">function* gen() {
+  yield 1;
+  yield 2;
+  yield 3;
+}
+
+var g = gen();
+
+g.next();        // { value: 1, done: false }
+g.return('foo'); // { value: "foo", done: true }
+g.next();        // { value: undefined, done: true }
+</pre>
+
+<p>Wenn <code>return(value)</code> auf einem Generator aufgerufen wird, der schon den Status "completed" hat, bleibt diese auch in diesem Status. Wenn kein Argument übergeben wird, wird das selbe Objekt wir bei <code>.next()</code> zurückgegeben. Wenn ein Parameter übergeben wird, wird dieses als <code>value</code> Eigenschaft beim zurückgegebenen Objekt zurückgegeben.</p>
+
+<pre class="brush: js">function* gen() {
+  yield 1;
+  yield 2;
+  yield 3;
+}
+
+var g = gen();
+g.next(); // { value: 1, done: false }
+g.next(); // { value: 2, done: false }
+g.next(); // { value: 3, done: false }
+g.next(); // { value: undefined, done: true }
+g.return(); // { value: undefined, done: true }
+g.return(1); // { value: 1, done: true }
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-generator.prototype.return', 'Generator.prototype.return')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-generator.prototype.return', 'Generator.prototype.return')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Generator.return")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><code><a href="/de/docs/Web/JavaScript/Reference/Statements/function*">function*</a></code></li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/generator/throw/index.html b/files/de/web/javascript/reference/global_objects/generator/throw/index.html
new file mode 100644
index 0000000000..0879bd77d3
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/generator/throw/index.html
@@ -0,0 +1,101 @@
+---
+title: Generator.prototype.throw()
+slug: Web/JavaScript/Reference/Global_Objects/Generator/throw
+tags:
+  - ECMAScript 2015
+  - Generator
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Generator/throw
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>throw()</strong></code> Methode übergibt dem Generator eine Exception, welche im Generator zu einem Fehler führt. Zudem wird ein Objekt mit den zwei Eigenschaften <code>done</code> und <code>value</code> zurückgegeben.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>gen</var>.throw(exception)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>exception</code></dt>
+ <dd>Die Exception, die geworfen werden soll. Für Debuggingzwecke ist es sinnvoll eine Instanz von {{jsxref("Error")}} zu verwenden.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Object">Objekt</a></code> mit zwei Eigenschaften:</p>
+
+<ul>
+ <li><code>done</code> (boolean)
+
+  <ul>
+   <li>Hat den Wert <code>true</code>, wenn der Iterator am Ende der Sequenz angekommen ist. In diesem Fall ist <code>value</code>, der Rückgabewert des Iterators, optional spezifiziert.</li>
+   <li>Hat den Wert <code>false</code>, wenn der Iterator einen weiteren Wert aus der Sequenz produzieren kann. Das ist gleichbedeutend damit, dass die <code>done</code> Eigenschaft nicht spezifiziert ist.</li>
+  </ul>
+ </li>
+ <li><code>value</code> - Ein JavaScript Wert, der von einem Iterator zurückgegeben wird. Kann weggelassen werden, wenn <code>done</code> <code>true</code> ist.</li>
+</ul>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_throw()">Einsatz von <code>throw()</code></h3>
+
+<p>Das folgende Beispiel zeigt einen einfachen Generator und einen Fehler der mit der <code>throw</code> Methode erzeugt wird. Ein Fehler kann mit <code><a href="/de/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> abgefangen werden.</p>
+
+<pre class="brush: js">function* gen() {
+  while(true) {
+    try {
+       yield 42;
+    } catch(e) {
+      console.log('Error caught!');
+    }
+  }
+}
+
+var g = gen();
+g.next();
+// { value: 42, done: false }
+g.throw(new Error('Something went wrong'));
+// "Error caught!"
+// { value: 42, done: false }
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-generator.prototype.throw', 'Generator.prototype.throw')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-generator.prototype.throw', 'Generator.prototype.throw')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Generator.throw")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><code><a href="/de/docs/Web/JavaScript/Reference/Statements/function*">function*</a></code></li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/generatorfunction/index.html b/files/de/web/javascript/reference/global_objects/generatorfunction/index.html
new file mode 100644
index 0000000000..717774e10f
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/generatorfunction/index.html
@@ -0,0 +1,115 @@
+---
+title: GeneratorFunction
+slug: Web/JavaScript/Reference/Global_Objects/GeneratorFunction
+tags:
+  - Constructor
+  - ECMAScript 2015
+  - GeneratorFunction
+  - Iterator
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/GeneratorFunction
+---
+<div>{{JSRef}}</div>
+
+<p>Der <strong><code>GeneratorFunction</code> Konstruktor</strong> erstellt eine neues {{jsxref("Statements/function*", "Generator Funktion")}} Objekt. aktuell ist in JavaScript jede Generatorfunktion ein <code>GeneratorFunction</code> Objekt.</p>
+
+<p>Zu beachten ist, dass <code>GeneratorFunction</code> kein globales Objekt ist. Es kann mit folgendem Quelltext erhalten werden.</p>
+
+<pre class="brush: js">Object.getPrototypeOf(function*(){}).constructor
+</pre>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>new GeneratorFunction ([<var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]],] <var>functionBody</var>)</code></pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>arg1, arg2, ... arg<em>N</em></code></dt>
+ <dd>Namen für Formale Argumente der Funktion. Jeder muss ein String sein, der mit einem validen JavaScript-Bezeichner korrespondiert oder eine liste von solchen String, welche mit einem Komma getrennt sind; zum Beispiel "<code>x</code>", "<code>theValue</code>", oder "<code>a,b</code>"</dd>
+ <dt><code>functionBody</code></dt>
+ <dd>Ein String, welcher die Statements für die Funktionsdefinition enthält.</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>{{jsxref("Statements/function*", "Generator Funktion")}} Objekte, die mit dem <code>GeneratorFunction</code> Konstruktor erstellt werden übersetzt, wenn die Funktion erstellt wird. Das ist weniger effizient als die Erstellung mit einer {{jsxref("Statements/function*", "function* Ausdruck")}} und Aufrufe im Quelltext, weil solche Funktionen dem dem Rest des Quelltextes übersetzt werden.</p>
+
+<p>Alle Argumente, die der Funktion übergeben werden, werden als Namen der Bezeichner behandelt und werden als Parameter der Funktion übergen. Die Reihenfolge ist die angegebene Reihenfolge.</p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> {{jsxref("Statements/function*", "Generator Function")}}, die mit dem <code>GeneratorFunction</code> Konstruktor erstellt werden erstellen keine Closures im Erstellungskontext. Sie werden immer im globalen Sichtbarkeitsbereich erstellt. Wenn diese ausgeführt werden, haben sie nur Zugriff auf eigene lokale Variablen und globale Variablen, jedoch nicht auf Variablen des Scopes, in der <code>GeneratorFunction</code> Konstruktor aufgerufen wird. Dieses unterscheidet diese Methode von {{jsxref("Global_Objects/eval", "eval")}} mit dem Quelltext einer Generatorfunktion.</p>
+</div>
+
+<p>Das Aufrufen des <code>GeneratorFunction</code> Konstruktors als Funktion (ohne Einsatz des <code>new</code> Operator) hat den selben Effekt wie beim Aufruf als Konstruktor.</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt><code><strong>GeneratorFunction.length</strong></code></dt>
+ <dd>Die Länge des <code>GeneratorFunction</code> Konstruktor Eigenschaft, welche 1 ist.</dd>
+ <dt>{{jsxref("GeneratorFunction.prototype")}}</dt>
+ <dd>Erlaubt das Hinzufügen von Eingenschaften für alle Generatorfunktionsobjekte.</dd>
+</dl>
+
+<h2 id="GeneratorFunction_Prototyp_Objekt"><code>GeneratorFunction</code> Prototyp Objekt</h2>
+
+<h3 id="Eigenschaften_2">Eigenschaften</h3>
+
+<div>{{page('/de/docs/Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype', 'Eigenschaften')}}</div>
+
+<h2 id="GeneratorFunction_Instanzen"><code>GeneratorFunction</code> Instanzen</h2>
+
+<p><code>GeneratorFunction</code> Instanzen erben Methoden und Eigenschaften von {{jsxref("GeneratorFunction.prototype")}}. Wie bei allen Konstruktoren, kann man das Konstruktor Prototyp Objekt ändern, um diese für alle<code> GeneratorFunction</code> Instanzen zu übernehmen.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Erstellen_einer_Generatorfunktion_mit_einem_GeneratorFunction_Konstruktor">Erstellen einer Generatorfunktion mit einem <code>GeneratorFunction</code> Konstruktor</h3>
+
+<pre class="brush: js">var GeneratorFunction = Object.getPrototypeOf(function*(){}).constructor
+var g = new GeneratorFunction('a', 'yield a * 2');
+var iterator = g(10);
+console.log(iterator.next().value); // 20
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-generatorfunction-objects', 'GeneratorFunction')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-generatorfunction-objects', 'GeneratorFunction')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.GeneratorFunction")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Statements/function*", "function* function")}}</li>
+ <li>{{jsxref("Operators/function*", "function* Ausdruck")}}</li>
+ <li>{{jsxref("Global_Objects/Function", "Function")}}</li>
+ <li>{{jsxref("Statements/function", "function Statement")}}</li>
+ <li>{{jsxref("Operators/function", "function Ausdruck")}}</li>
+ <li>{{jsxref("Functions_and_function_scope", "Funktionen und Sichtbarkeiten", "", 1)}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/generatorfunction/prototype/index.html b/files/de/web/javascript/reference/global_objects/generatorfunction/prototype/index.html
new file mode 100644
index 0000000000..d4e895ed9c
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/generatorfunction/prototype/index.html
@@ -0,0 +1,66 @@
+---
+title: GeneratorFunction.prototype
+slug: Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype
+tags:
+  - ECMAScript 2015
+  - GeneratorFunction
+  - Iterator
+  - JavaScript
+  - Property
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/GeneratorFunction
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>GeneratorFunction.prototype</strong></code> Eigenschaft repräsentiert den Prototypen des {{jsxref("GeneratorFunction")}} Objektes.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>{{jsxref("GeneratorFunction")}} Objekt erbt von <code>GeneratorFunction.prototype</code>. <code>GeneratorFunction.prototype</code> kann nicht verändert werden.</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt><code><strong>GeneratorFunction.constructor</strong></code></dt>
+ <dd>Der initiale Wert von {{jsxref("GeneratorFunction")}}.</dd>
+ <dt><code><strong>GeneratorFunction.prototype.prototype</strong></code></dt>
+ <dd>Der Wert ist <code>%GeneratorPrototype%</code>.</dd>
+</dl>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-generatorfunction.prototype', 'GeneratorFunction.prototype')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-generatorfunction.prototype', 'GeneratorFunction.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.GeneratorFunction.prototype")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+ <li>{{jsxref("Function")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/globalthis/index.html b/files/de/web/javascript/reference/global_objects/globalthis/index.html
new file mode 100644
index 0000000000..00e814c877
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/globalthis/index.html
@@ -0,0 +1,96 @@
+---
+title: globalThis
+slug: Web/JavaScript/Reference/Global_Objects/globalThis
+tags:
+  - JavaScript
+  - Property
+  - Reference
+  - global
+  - globalThis
+  - this
+translation_of: Web/JavaScript/Reference/Global_Objects/globalThis
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p><span class="tlid-translation translation" lang="de"><span title="">Die Eigenschaft </span></span><span class="seoSummary"><code><strong>globalThis</strong></code></span><span class="tlid-translation translation" lang="de"><span title=""> gibt das globale Objekt der obersten Ebene zurück.</span></span></p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-globalthis.html","shorter")}}</div>
+
+
+
+<p>{{JS_Property_Attributes(1, 0, 1)}}</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p><span class="tlid-translation translation" lang="de">In der Vergangenheit war für den Zugriff auf das globale Objekt in verschiedenen JavaScript-Umgebungen eine unterschiedliche Syntax erforderlich. Im Web kann man {{domxref("Window.window", "window")}}, {{domxref("Window.self", "self")}} oder {{domxref("Window.frames", "frames")}} verwenden - aber in </span><a href="/en-US/docs/Web/API/Worker">Web Workers</a><span class="tlid-translation translation" lang="de"> funktioniert nur <code>self</code>. In Node.js funktioniert keines der aufgezählten, und es muss stattdessen <code>global</code> verwendet werden.</span></p>
+
+<p><span class="tlid-translation translation" lang="de">Das Schlüsselwort <code>this</code> kann in Funktionen verwendet werden, die nicht im Strict-Mode ausgeführt werden, ist jedoch in Modulen und in Funktionen, die im Strict-Mode ausgeführt werden, <code>undefined</code>. Es kann <code>Function('return this')()</code> verwendet werden, aber Umgebungen, die {{jsxref("eval", "eval()")}} deaktiviert haben, wie etwa durch {{Glossary("CSP")}} in Browsern, verhindern die Verwendung von {{jsxref("Function")}} auf diese Weise.<br>
+ <br>
+ Die Eigenschaft <code>globalThis</code> bietet eine Standardmethode für den Zugriff auf den globalen Wert <code>this</code> (und damit auf das globale Objekt selbst) in verschiedenen Umgebungen. Im Gegensatz zu ähnlichen Eigenschaften wie <code>window</code> und <code>self</code> funktioniert es garantiert in Fenster- und Nicht-Fenster-Kontexten. Auf diese Weise können Sie auf konsistente Weise auf das globale Objekt zugreifen, ohne wissen zu müssen, in welcher Umgebung der Code ausgeführt wird. Um sich den Namen zu merken, denken Sie daran, dass <code>this</code> im globalen Bereich <code>globalThis</code> ist.</span></p>
+
+<h3 id="HTML_und_WindowProxy">HTML und WindowProxy</h3>
+
+<p><span class="tlid-translation translation" lang="de"><span title="">In vielen Engines ist <code>globalThis</code> ein Verweis auf das tatsächliche globale Objekt. In Webbrowsern wird jedoch aus Gründen der iframe- und fensterübergreifenden Sicherheit ein {{jsxref("Proxy")}} um das tatsächliche globale Objekt (das nicht direkt verwendet werden kann</span><span title="">).</span> <span title="">Diese Unterscheidung ist im allgemeinen Sprachgebrauch selten relevant, aber wichtig zu beachten.</span></span></p>
+
+<h3 id="Benennung">Benennung</h3>
+
+<p>Mehrere andere populäre Namen wie <code>self</code> und <code>global</code> wurden aus dem Vorschlag entfernt, da sie die Kompatibilität mit existierendem Code potenziell brechen könnten. Siehe das Dokument <a href="https://github.com/tc39/proposal-global/blob/master/NAMING.md">"Naming Constraints"</a> für weitere Details.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Umgebungsübergreifend_den_globalen_Kontext_finden">Umgebungsübergreifend den globalen Kontext finden</h3>
+
+<p><span class="tlid-translation translation" lang="de"><span title="">Vor <code>globalThis</code> war <code>Function('return this')()</code> die einzige zuverlässige, plattformübergreifende Methode, um das globale Objekt für eine Umgebung abzurufen.</span> <span title="">Dies führt jedoch in einigen Einstellungen zu </span></span> <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/CSP">CSP </a><span class="tlid-translation translation" lang="de"><span title="">Verstößen. Daher verwendet </span></span> <a href="https://github.com/paulmillr/es6-shim">es6-shim</a><span class="tlid-translation translation" lang="de"><span title=""> eine Prüfung wie diese:</span></span></p>
+
+<pre class="brush: js notranslate">var getGlobal = function () {
+  if (typeof self !== 'undefined') { return self; }
+  if (typeof window !== 'undefined') { return window; }
+  if (typeof global !== 'undefined') { return global; }
+  throw new Error('unable to locate global object');
+};
+
+var globals = getGlobal();
+
+if (typeof globals.setTimeout !== 'function') {
+  // no setTimeout in this environment!
+}
+</pre>
+
+<p>Mit der Verfügbarkeit von <code>globalThis</code>, ist die zusätzliche umgebungsübergreifende Suche nach dem Global Kontext nicht mehr notwendig:</p>
+
+<pre class="brush: js notranslate">if (typeof globalThis.setTimeout !== 'function') {
+  // no setTimeout in this environment!
+}</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("ESDraft", "#sec-globalthis", "globalThis")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.globalThis")}}</p>
+
+<h3 id="Implementierungsfortschritt"><span class="tlid-translation translation" lang="de"><span title="">Implementierungsfortschritt</span></span></h3>
+
+<p><span class="tlid-translation translation" lang="de"><span title="">Die folgende Tabelle enthält einen täglichen Implementierungsstatus für dieses Feature, da sie noch keine browserübergreifende Standardisierung erreicht hat.</span> <span title="">Die Daten werden generiert, indem die relevanten Funktionstests in </span></span><a href="https://github.com/tc39/test262">Test262</a><span class="tlid-translation translation" lang="de"><span title="">, der Standard-Testsuite von JavaScript, im nächtlichen Build oder in der neuesten Version der JavaScript-Engine jedes Browsers ausgeführt werden.</span></span></p>
+
+<div>{{EmbedTest262ReportResultsTable("globalThis")}}</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("this")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/index.html b/files/de/web/javascript/reference/global_objects/index.html
new file mode 100644
index 0000000000..e7f9d05f3a
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/index.html
@@ -0,0 +1,191 @@
+---
+title: Globale Objekte
+slug: Web/JavaScript/Reference/Global_Objects
+tags:
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>Dieses Kapitel dokumentiert alle Objekte, die standardmäßig in einer JavaScript-Umgebung zur Verfügung stehen.</p>
+
+<p>Der Ausdruck "Globales Objekt" (oder Standardobjekt) ist nicht zu verwechseln mit dem <strong>global object</strong>. Hier sind globale Objekte Objekte, die zu <strong>Objekten im globalen Zugriffsbereich (scope) referenzieren</strong>. Das <strong>global object</strong> selbst wird mit Hilfe des {{jsxref("Operators/this", "this")}}-Operators im globalen Bereich angesprochen (sofern der Strict-Modus von ECMAScript 5 nicht verwendet wird, andernfalls sind sie <code>undefined</code>). Tatsächlich <em>besteht </em>der globale Bereich aus den Eigenschaften (properties) des <em>global object</em> (einschließlich geerbter Eigenschaften, falls vorhanden).</p>
+
+<p>Andere Objekte im globalen Bereich wurden entweder <a href="/de/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">vom Benutzerscript erstellt</a> oder von der ausführenden Anwendung (meist der Browser) bereitgestellt. Die Anwendungsobjekte, welche im Browserumfeld (DOM) verfügbar sind, werden in der <a href="/de/docs/Web/API/Reference">API-Referenz </a>dokumentiert. Eine detailiertere Unterscheidung zwischen <a href="/de/docs/DOM/DOM_Reference">DOM-</a> und <a href="/de/docs/Web/JavaScript">Kern-JavaScript</a> befindet sich im Kapitel <a href="/de/docs/Web/JavaScript/JavaScript_technologies_overview">Überblick JavaScript-Technologien</a>.</p>
+
+<h2 id="Standardobjekte_(kategorisiert)">Standardobjekte (kategorisiert)</h2>
+
+<h3 id="Eigenschaften">Eigenschaften</h3>
+
+<p>Diese globalen Eigenschaften stellen einen einfachen Wert dar; sie haben keine weiteren Eigenschaften oder Methoden.</p>
+
+<ul>
+ <li>{{jsxref("Infinity")}}</li>
+ <li>{{jsxref("NaN")}}</li>
+ <li>{{jsxref("undefined")}}</li>
+ <li>{{jsxref("null")}} literal</li>
+</ul>
+
+<h3 id="Funktionen">Funktionen</h3>
+
+<p>Diese globalen Funktionen werden als solche aufgerufen, nicht als Teil eines Objektes.</p>
+
+<ul>
+ <li>{{jsxref("Global_Objects/eval", "eval()")}}</li>
+ <li>{{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline()}}</li>
+ <li>{{jsxref("Global_Objects/isFinite", "isFinite()")}}</li>
+ <li>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</li>
+ <li>{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}</li>
+ <li>{{jsxref("Global_Objects/parseInt", "parseInt()")}}</li>
+ <li>{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}</li>
+ <li>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</li>
+ <li>{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}</li>
+ <li>{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</li>
+ <li>{{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline()}}</li>
+ <li>{{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline()}}</li>
+</ul>
+
+<h3 id="Fundamentale_Objekte">Fundamentale Objekte</h3>
+
+<p>Auf nachfolgenden Objekte basieren alle anderen, in JavaScript verfügbaren Objekte. Sie repräsentieren sowohl Objekte, als auch Funktionen und Fehler.</p>
+
+<ul>
+ <li>{{jsxref("Object")}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Boolean")}}</li>
+ <li>{{jsxref("Symbol")}}</li>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("EvalError")}}</li>
+ <li>{{jsxref("InternalError")}}</li>
+ <li>{{jsxref("RangeError")}}</li>
+ <li>{{jsxref("ReferenceError")}}</li>
+ <li>{{jsxref("SyntaxError")}}</li>
+ <li>{{jsxref("TypeError")}}</li>
+ <li>{{jsxref("URIError")}}</li>
+</ul>
+
+<h3 id="Zahlen_und_Zeiten">Zahlen und Zeiten</h3>
+
+<p>Objekte, die sich mit Zahlen und Zeit-Daten, sowie mathematischen Berechnungen befassen.</p>
+
+<ul>
+ <li>{{jsxref("Number")}}</li>
+ <li>{{jsxref("Math")}}</li>
+ <li>{{jsxref("Date")}}</li>
+</ul>
+
+<h3 id="Textverarbeitung">Textverarbeitung</h3>
+
+<p>Objekte zum Verarbeiten von Text.</p>
+
+<ul>
+ <li>{{jsxref("String")}}</li>
+ <li>{{jsxref("RegExp")}}</li>
+</ul>
+
+<h3 id="Indexgebundene_Kollektionen">Indexgebundene Kollektionen</h3>
+
+<p>Diese Objekte umfassen Sammlungen von anderen Objekten, auf die über einen fortlaufenden, nummerischen Index zugegriffen werden kann. Zu ihnen gehören Arrays (Felder) und Array-ähnliche Objekte.</p>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Int8Array")}}</li>
+ <li>{{jsxref("Uint8Array")}}</li>
+ <li>{{jsxref("Uint8ClampedArray")}}</li>
+ <li>{{jsxref("Int16Array")}}</li>
+ <li>{{jsxref("Uint16Array")}}</li>
+ <li>{{jsxref("Int32Array")}}</li>
+ <li>{{jsxref("Uint32Array")}}</li>
+ <li>{{jsxref("Float32Array")}}</li>
+ <li>{{jsxref("Float64Array")}}</li>
+</ul>
+
+<h3 id="Schlüsselgebundene_Kollektionen">Schlüsselgebundene Kollektionen</h3>
+
+<p>Diese Objekte umfassen Sammlungen von anderen Objekten, auf die über einen wahlfreien Schlüssel zugegriffen werden kann; sie lassen sich zudem nach Einfügereihenfolge durchlaufen.</p>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+ <li>{{jsxref("Set")}}</li>
+ <li>{{jsxref("WeakMap")}}</li>
+ <li>{{jsxref("WeakSet")}}</li>
+</ul>
+
+<h3 id="Vector_Kollektionen">Vector Kollektionen</h3>
+
+<p>{{Glossary("SIMD")}} Vector Datentypen sind Objekte in denen die Daten in Bahnen angeordnet sind.</p>
+
+<ul>
+ <li>{{jsxref("SIMD")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Float32x4", "SIMD.Float32x4")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Float64x2", "SIMD.Float64x2")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Int8x16", "SIMD.Int8x16")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Int16x8", "SIMD.Int16x8")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Int32x4", "SIMD.Int32x4")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Uint8x16", "SIMD.Uint8x16")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Uint16x8", "SIMD.Uint16x8")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Uint32x4", "SIMD.Uint32x4")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Bool8x16", "SIMD.Bool8x16")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Bool16x8", "SIMD.Bool16x8")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Bool32x4", "SIMD.Bool32x4")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Bool64x2", "SIMD.Bool64x2")}} {{experimental_inline}}</li>
+</ul>
+
+<h3 id="Strukturierte_Daten">Strukturierte Daten</h3>
+
+<p>Datenpuffer und <strong>J</strong>ava<strong>S</strong>cript-<strong>O</strong>bjekt-<strong>N</strong>otation.</p>
+
+<ul>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("SharedArrayBuffer")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Atomics")}} {{experimental_inline}}</li>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("JSON")}}</li>
+</ul>
+
+<h3 id="Kontrollabstraktions_Objekte">Kontrollabstraktions Objekte</h3>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{jsxref("Generator")}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+ <li>{{experimental_inline}} {{jsxref("AsyncFunction")}}</li>
+</ul>
+
+<h3 id="Reflection">Reflection</h3>
+
+<ul>
+ <li>{{jsxref("Reflect")}}</li>
+ <li>{{jsxref("Proxy")}}</li>
+</ul>
+
+<h3 id="Internationalisierung">Internationalisierung</h3>
+
+<p>Ergänzungen zum ECMAScript-Kern für Aufgaben, die verschiedene Sprachen unterstützen sollen.</p>
+
+<ul>
+ <li>{{jsxref("Intl")}}</li>
+ <li>{{jsxref("Global_Objects/Collator", "Intl.Collator")}}</li>
+ <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+ <li>{{jsxref("Global_Objects/NumberFormat", "Intl.NumberFormat")}}</li>
+</ul>
+
+<h3 id="WebAssembly">WebAssembly</h3>
+
+<ul>
+ <li>{{jsxref("WebAssembly")}}</li>
+ <li>{{jsxref("WebAssembly.Module")}}</li>
+ <li>{{jsxref("WebAssembly.Instance")}}</li>
+ <li>{{jsxref("WebAssembly.Memory")}}</li>
+ <li>{{jsxref("WebAssembly.Table")}}</li>
+ <li>{{jsxref("WebAssembly.CompileError")}}</li>
+ <li>{{jsxref("WebAssembly.LinkError")}}</li>
+ <li>{{jsxref("WebAssembly.RuntimeError")}}</li>
+</ul>
+
+<h3 id="Sonstiges">Sonstiges</h3>
+
+<ul>
+ <li>{{jsxref("Functions/arguments", "arguments")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/infinity/index.html b/files/de/web/javascript/reference/global_objects/infinity/index.html
new file mode 100644
index 0000000000..f862732ec2
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/infinity/index.html
@@ -0,0 +1,83 @@
+---
+title: Infinity
+slug: Web/JavaScript/Reference/Global_Objects/Infinity
+tags:
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Global_Objects/Infinity
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>Die globale <span class="dpf_sent" id="dpfsent_1">Eigenschaft </span><strong><code>Infinity</code></strong> ist ein <span class="dpf_sent" id="dpfsent_1">numerischer </span>Wert, der die Unendlichkeit repräsentiert.</p>
+
+<p>{{js_property_attributes(0,0,0)}}</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-infinity.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Infinity </code></pre>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p><code>Infinity</code> ist eine Eigenschaft des <em>globalen Objekts</em>, was bedeutet, dass es eine Variable im globalen Gültigkeitsbereich ist.</p>
+
+<p>Der initiale Wert von <code>Infinity</code> entspricht {{jsxref("Number.POSITIVE_INFINITY")}}. Der Wert von <code>Infinity</code> (positiv unendlich) ist größer als alle anderen Nummern. Mathematisch entspricht der Wert der Unendlichkeit. Zum Beispiel ist das Produkt einer positiven Zahl mit <code>Infinity</code> immer <code>Infinity</code>. Jede Division einer Zahl durch <code>Infinity</code> ergibt 0.</p>
+
+<p>In der ECMAScript 5 Spezifikation wurde <code>Infinity</code> als read only Eigenschaft (nur lesender Zugriff) eingestuft. (Dieses wurde in JavaScript 1.8.5 / Firefox 4 implementiert.)</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js">console.log(Infinity);           /* Infinity */
+console.log(Infinity + 1);       /* Infinity */
+console.log(Math.pow(10, 1000)); /* Infinity */
+console.log(Math.log(0));        /* -Infinity */
+console.log(1 / Infinity);       /* 0 */
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.3</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.1.2', 'Infinity')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-value-properties-of-the-global-object-infinity', 'Infinity')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-value-properties-of-the-global-object-infinity', 'Infinity')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Infinity")}}</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li>
+ <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li>
+ <li>{{jsxref("Number.isFinite")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/int16array/index.html b/files/de/web/javascript/reference/global_objects/int16array/index.html
new file mode 100644
index 0000000000..4d2ff2cdab
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/int16array/index.html
@@ -0,0 +1,204 @@
+---
+title: Int16Array
+slug: Web/JavaScript/Reference/Global_Objects/Int16Array
+tags:
+  - Constructor
+  - JavaScript
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/Int16Array
+---
+<div>{{JSRef}}</div>
+
+<p>Das <strong><code>Int16Array</code></strong> getypte Array repräsentiert ein Array von zweierkomplement 16 Bit vorzeichenbehafteten, ganze Zahlen in der Plattform-Byte-Reihenfolge. Wenn Kontrolle über die Byte-Reihenfolge erforderlich ist, muss {{jsxref("DataView")}} stattdessen benutz werden. Die Inhalte werden mit <code>0</code> initialisiert. Wie erwartet, kann man Element in einem Array mit Objektmethoden referenzieren oder man benutzt die normale Arrayindex-Syntax (das ist die Klammernotation).</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">new Int16Array(); // new in ES2017
+new Int16Array(length);
+new Int16Array(typedArray);
+new Int16Array(object);
+new Int16Array(buffer [, byteOffset [, length]]);</pre>
+
+<p>Für mehr Informationen über die Konstruktorensyntax und die Parameter, siehe auf der Seite <em><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#Syntax">TypedArray</a></em>.</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Int16Array.BYTES_PER_ELEMENT")}}</dt>
+ <dd>Gibt die Größe der Elemente zurück. <code>2</code> im Falle eines <code>Int16Array</code>.</dd>
+ <dt>Int16Array.length</dt>
+ <dd>Statische Längeneigenschaft welche den Wert 0 hat. Für die aktuelle Länge (Anzahl der Elemente) siehe {{jsxref("TypedArray.prototype.length", "Int16Array.prototype.length")}}.</dd>
+ <dt>{{jsxref("TypedArray.name", "Int16Array.name")}}</dt>
+ <dd>Gibt den Stringwert des Konstruktornamens zurück. In Fall eines <code>Int16Array</code> Typs: <code>"Int16Array"</code>.</dd>
+ <dt>{{jsxref("TypedArray.prototype", "Int16Array.prototype")}}</dt>
+ <dd>Prototyp für das <em>TypedArray</em> Objekt.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.from", "Int16Array.from()")}}</dt>
+ <dd>Erstelle ein neues <code>Int16Array</code> von einem Array-Ähnlichen oder Iterable Objekt. Siehe auch {{jsxref("Array.from()")}}.</dd>
+ <dt>{{jsxref("TypedArray.of", "Int16Array.of()")}}</dt>
+ <dd>Erstellt ein neues <code>Int16Array</code> mit einer variablen Anzahl an Argumenten. Sie auch {{jsxref("Array.of()")}}.</dd>
+</dl>
+
+<h2 id="Int16Array_Prototyp"><code>Int16Array</code> Prototyp</h2>
+
+<p>Alle <code>Int16Array</code> Objekte erben von {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.</p>
+
+<h3 id="Eigenschaften_2">Eigenschaften</h3>
+
+<dl>
+ <dt><code>Int16Array.prototype.constructor</code></dt>
+ <dd>Gibt die Funktion, die einen Instanzprototyp erstellt zurück. Diese ist auf den <code>Int16Array</code> Konstruktor voreingestellt.</dd>
+ <dt>{{jsxref("TypedArray.prototype.buffer", "Int16Array.prototype.buffer")}} {{readonlyInline}}</dt>
+ <dd>Gibt die {{jsxref("ArrayBuffer")}} Referenz zurück, welche nach der Erstellung eines <code>Int16Array</code> fest ist und nicht mehr geändert werden kann.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteLength", "Int16Array.prototype.byteLength")}} {{readonlyInline}}</dt>
+ <dd>Gibt die Länge (in Bytes) des <code>Int16Array</code> vom Anfang seines {{jsxref("ArrayBuffer")}} zurück. WIrd beim erstellen festgesetzt und kann nicht geändert werden.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteOffset", "Int16Array.prototype.byteOffset")}} {{readonlyInline}}</dt>
+ <dd>Gibt das Offset (in Bytes) des <code>Int16Array</code> vom Anfang seines {{jsxref("ArrayBuffer")}} zurück. WIrd beim erstellen festgesetzt und kann nicht geändert werden.</dd>
+ <dt>{{jsxref("TypedArray.prototype.length", "Int16Array.prototype.length")}} {{readonlyInline}}</dt>
+ <dd>Gibt Anzahl der Elemente des <code>Int16Array</code> zurück. WIrd beim erstellen festgesetzt und kann nicht geändert werden.</dd>
+</dl>
+
+<h3 id="Methoden_2">Methoden</h3>
+
+<dl>
+ <dt>{{jsxref("TypedArray.copyWithin", "Int16Array.prototype.copyWithin()")}}</dt>
+ <dd>Kopiert eine Sequenz von Arrayelementen in das Array. Siehe auch {{jsxref("Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.entries", "Int16Array.prototype.entries()")}}</dt>
+ <dd>Gibt ein neues <code>Array Iterator</code> Objekt zurück, welches die Schlüssel/Wertepaare für jeden Index im Array enthält. Siehe auch {{jsxref("Array.prototype.entries()")}}.</dd>
+ <dt>{{jsxref("TypedArray.every", "Int16Array.prototype.every()")}}</dt>
+ <dd>Teste, ob alle Elemente einem, als Funktion übergebenen, Test erfüllen. Siehe auch Array.prototype.every()")}}.</dd>
+ <dt>{{jsxref("TypedArray.fill", "Int16Array.prototype.fill()")}}</dt>
+ <dd>Füllt alle Elemente eines Arrays vom Startindex bis zum Endindex mit einem statischen Wert. Siehe auch {{jsxref("Array.prototype.fill()")}}.</dd>
+ <dt>{{jsxref("TypedArray.filter", "Int16Array.prototype.filter()")}}</dt>
+ <dd>Erstellt ein neues Array mit allen Elementen des alten Arrays, für die eine übergebene Filterfunktion <code>true</code> zurückgibt. Siehe auch {{jsxref("Array.prototype.filter()")}}.</dd>
+ <dt>{{jsxref("TypedArray.find", "Int16Array.prototype.find()")}}</dt>
+ <dd>Gibt ein gefundenes Element des Arrays zurück, welches bei der übergebenen Testfunktion <code>true</code> zurückgibt oder <code>undefined</code> wenn es keins gibt. Siehe auch {{jsxref("Array.prototype.find()")}}.</dd>
+ <dt>{{jsxref("TypedArray.findIndex", "Int16Array.prototype.findIndex()")}}</dt>
+ <dd>Gibt den Index eines gefundenen Elements des Arrays zurück, welches bei der übergebenen Testfunktion <code>true</code> zurückgibt oder <code>-1</code> wenn es keins gibt. Siehe auch {{jsxref("Array.prototype.findIndex()")}}.</dd>
+ <dt>{{jsxref("TypedArray.forEach", "Int16Array.prototype.forEach()")}}</dt>
+ <dd>Ruft für jedes Element in einem Array eine Funktion auf. Siehe auch {{jsxref("Array.prototype.forEach()")}}.</dd>
+ <dt>{{jsxref("TypedArray.includes", "Int16Array.prototype.includes()")}} {{experimental_inline}}</dt>
+ <dd>Überprüft, ob ein getyptes Array ein bestimmtes Element enthält und gibt gegebenfalls <code>true</code> oder<code>false</code> zurück. Siehe auch {{jsxref("Array.prototype.includes()")}}.</dd>
+ <dt>{{jsxref("TypedArray.indexOf", "Int16Array.prototype.indexOf()")}}</dt>
+ <dd>Gibt den ersten Index eines Elementes zurück, welches gleiche eines spezifizierten Wertes ist oder <code>-1</code> wenn es keins gibt. Siehe auch {{jsxref("Array.prototype.indexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.join", "Int16Array.prototype.join()")}}</dt>
+ <dd>Führt alle Elemente eines Arrays zu einem String zusammen. Siehe auch {{jsxref("Array.prototype.join()")}}.</dd>
+ <dt>{{jsxref("TypedArray.keys", "Int16Array.prototype.keys()")}}</dt>
+ <dd>Gibt ein neuen <code>Array Iterator</code> zurück, der alle Schlüssel für jeden Index im Array enthält. Siehe auch {{jsxref("Array.prototype.keys()")}}.</dd>
+ <dt>{{jsxref("TypedArray.lastIndexOf", "Int16Array.prototype.lastIndexOf()")}}</dt>
+ <dd>Gibt den letzen Index eines Elementes zurück, welches gleiche eines spezifizierten Wertes ist oder <code>-1</code> wenn es keins gibt. Siehe auch {{jsxref("Array.prototype.lastIndexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.map", "Int16Array.prototype.map()")}}</dt>
+ <dd>Erstellt ein neues Array mit den Resultaten spezifizierten Funktion, die für jedes Element aufgerufen wird. Siehe auch {{jsxref("Array.prototype.map()")}}.</dd>
+ <dt>{{jsxref("TypedArray.move", "Int16Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt>
+ <dd>Ehemalige nicht Standardisierte Version von {{jsxref("TypedArray.copyWithin", "Int16Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduce", "Int16Array.prototype.reduce()")}}</dt>
+ <dd>Führt eine Funktion gegeben einen Akkumulator und jeden Wert des Array aus (von links nach rechts), um das Array auf einen Wert zu reduzieren. Siehe auch {{jsxref("Array.prototype.reduce()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduceRight", "Int16Array.prototype.reduceRight()")}}</dt>
+ <dd>Führt eine Funktion gegeben einen Akkumulator und jeden Wert des Array aus (von rechts nach links), um das Array auf einen Wert zu reduzieren. Siehe auch {{jsxref("Array.prototype.reduce()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reverse", "Int16Array.prototype.reverse()")}}</dt>
+ <dd>Kehrt die Reihenfolge von jedem Element eines Arrays um — das Erste wird das Letzte und das Letzte wird das Erste. Siehe auch {{jsxref("Array.prototype.reverse()")}}.</dd>
+ <dt>{{jsxref("TypedArray.set", "Int16Array.prototype.set()")}}</dt>
+ <dd>Speichert mehrere Werte in einem getypten Array und ließt Eingabewerte aus einem spezifiziertem Array.</dd>
+ <dt>{{jsxref("TypedArray.slice", "Int16Array.prototype.slice()")}}</dt>
+ <dd>Extrahiert einen Bereich aus einem Array und gibt diesen in einem neuen Array zurück. Siehe auch {{jsxref("Array.prototype.slice()")}}.</dd>
+ <dt>{{jsxref("TypedArray.some", "Int16Array.prototype.some()")}}</dt>
+ <dd>Gibt <code>true</code> zurück, wenn nur ein Element in einem Array den als Funktion übergebenen Test erfüllt. Siehe auch {{jsxref("Array.prototype.some()")}}</dd>
+ <dt>{{jsxref("TypedArray.sort", "Int16Array.prototype.sort()")}}</dt>
+ <dd>Sortiert die Elemente eines Arrays in-Place und gibt das Array zurück. Siehe auch {{jsxref("Array.prototype.sort()")}}.</dd>
+ <dt>{{jsxref("TypedArray.subarray", "Int16Array.prototype.subarray()")}}</dt>
+ <dd>Gibt ein neues <code>Int16Array</code> vom gegebenen Start- und Endindex zurück.</dd>
+ <dt>{{jsxref("TypedArray.values", "Int16Array.prototype.values()")}}</dt>
+ <dd>Gibt ein neues <code>Array Iterator</code> Objekt zurück, welches die Werte von jedem Index im Array enthält. Siehe auch {{jsxref("Array.prototype.values()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toLocaleString", "Int16Array.prototype.toLocaleString()")}}</dt>
+ <dd>Gibt einen Ortsabhängige Stringrepräsentation des Arrays und seiner Element zurück. Siehe auch {{jsxref("Array.prototype.toLocaleString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toString", "Int16Array.prototype.toString()")}}</dt>
+ <dd>Gibt einen Stringrepräsentation des Arrays und seiner Element zurück. Siehe auch {{jsxref("Array.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.@@iterator", "Int16Array.prototype[@@iterator]()")}}</dt>
+ <dd>Gibt ein neues <code>Array Iterator</code> Objekt zurück, welches die zugehörigen Werte für jeden Index im Array enthalten.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Verschiedene Wege, um ein <code>Int16Array</code> zu erstellen:</p>
+
+<pre class="brush: js">// From a length
+var int16 = new Int16Array(2);
+int16[0] = 42;
+console.log(int16[0]); // 42
+console.log(int16.length); // 2
+console.log(int16.BYTES_PER_ELEMENT); // 2
+
+// From an array
+var arr = new Int16Array([21,31]);
+console.log(arr[1]); // 31
+
+// From another TypedArray
+var x = new Int16Array([21, 31]);
+var y = new Int16Array(x);
+console.log(y[0]); // 21
+
+// From an ArrayBuffer
+var buffer = new ArrayBuffer(8);
+var z = new Int16Array(buffer, 0, 4);
+
+// From an iterable
+var iterable = function*(){ yield* [1,2,3]; }();
+var int16 = new Int16Array(iterable);
+// Int16Array[1, 2, 3]
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Ersetzt in ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition in einem ECMA Standard. Spezifiziert, dass ein <code>new</code> benötigt wird.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>ECMAScript 2017 ändert den <code>Int16Array</code> Konstruktor, um die <code>ToIndex</code> Operation zu benutzen und erlaubt einen Konstruktor ohne Parameter.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Int16Array")}}</p>
+
+<h2 id="Kompatibilitätshinweise">Kompatibilitätshinweise</h2>
+
+<p>Mit Beginn von ECMAScript 2015, müssen <code>Int16Array</code> Konstruktoren mit einem {{jsxref("Operators/new", "new")}} benutzt werden. Der Aufruf eines <code>Int16Array</code> Konstruktors als eine Funktion ohne <code>new</code>, Führt jetzt zu einem {{jsxref("TypeError")}}.</p>
+
+<pre class="brush: js example-bad">var dv = Int16Array([1, 2, 3]);
+// TypeError: calling a builtin Int16Array constructor
+// without new is forbidden</pre>
+
+<pre class="brush: js example-good">var dv = new Int16Array([1, 2, 3]);</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Typed_arrays" title="en/JavaScript typed arrays">JavaScript getypte Arrays</a></li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("DataView")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/int32array/index.html b/files/de/web/javascript/reference/global_objects/int32array/index.html
new file mode 100644
index 0000000000..ed2da2bcdc
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/int32array/index.html
@@ -0,0 +1,204 @@
+---
+title: Int32Array
+slug: Web/JavaScript/Reference/Global_Objects/Int32Array
+tags:
+  - Constructor
+  - JavaScript
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/Int32Array
+---
+<div>{{JSRef}}</div>
+
+<p>Das <strong><code>Int32Array</code></strong> getypte Array repräsentiert ein Array von zweierkomplement 32 Bit vorzeichenbehafteten, ganze Zahlen in der Plattform-Byte-Reihenfolge. Wenn Kontrolle über die Byte-Reihenfolge erforderlich ist, muss {{jsxref("DataView")}} stattdessen benutz werden. Die Inhalte werden mit <code>0</code> initialisiert. Wie erwartet, kann man Element in einem Array mit Objektmethoden referenzieren oder man benutzt die normale Arrayindex-Syntax (das ist die Klammernotation).</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">new Int32Array(); // new in ES2017
+new Int32Array(length);
+new Int32Array(typedArray);
+new Int32Array(object);
+new Int32Array(buffer [, byteOffset [, length]]);</pre>
+
+<p>Für mehr Informationen über die Konstruktorensyntax und die Parameter, siehe auf der Seite <em><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#Syntax">TypedArray</a></em>.</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Int32Array.BYTES_PER_ELEMENT")}}</dt>
+ <dd>Gibt die Größe der Elemente zurück. <code>4</code> im Falle eines <code>Int32Array</code>.</dd>
+ <dt>Int32Array.length</dt>
+ <dd>Statische Längeneigenschaft welche den Wert 0 hat. Für die aktuelle Länge (Anzahl der Elemente) siehe {{jsxref("TypedArray.prototype.length", "Int32Array.prototype.length")}}.</dd>
+ <dt>{{jsxref("TypedArray.name", "Int32Array.name")}}</dt>
+ <dd>Gibt den Stringwert des Konstruktornamens zurück. In Fall eines <code>Int32Array</code> Typs: <code>"Int32Array"</code>.</dd>
+ <dt>{{jsxref("TypedArray.prototype", "Int32Array.prototype")}}</dt>
+ <dd>Prototyp für das <em>TypedArray</em> Objekt.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.from", "Int32Array.from()")}}</dt>
+ <dd>Erstelle ein neues <code>Int32Array</code> von einem Array-Ähnlichen oder Iterable Objekt. Siehe auch {{jsxref("Array.from()")}}.</dd>
+ <dt>{{jsxref("TypedArray.of", "Int32Array.of()")}}</dt>
+ <dd>Erstellt ein neues <code>Int32Array</code> mit einer variablen Anzahl an Argumenten. Sie auch {{jsxref("Array.of()")}}.</dd>
+</dl>
+
+<h2 id="Int32Array_Prototyp"><code>Int32Array</code> Prototyp</h2>
+
+<p>Alle <code>Int32Array</code> Objekte erben von {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.</p>
+
+<h3 id="Eigenschaften_2">Eigenschaften</h3>
+
+<dl>
+ <dt><code>Int32Array.prototype.constructor</code></dt>
+ <dd>Gibt die Funktion, die einen Instanzprototyp erstellt zurück. Diese ist auf den <code>Int32Array</code> Konstruktor voreingestellt.</dd>
+ <dt>{{jsxref("TypedArray.prototype.buffer", "Int32Array.prototype.buffer")}} {{readonlyInline}}</dt>
+ <dd>Gibt die {{jsxref("ArrayBuffer")}} Referenz zurück, welche nach der Erstellung eines <code>Int32Array</code> fest ist und nicht mehr geändert werden kann.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteLength", "Int32Array.prototype.byteLength")}} {{readonlyInline}}</dt>
+ <dd>Gibt die Länge (in Bytes) des <code>Int32Array</code> vom Anfang seines {{jsxref("ArrayBuffer")}} zurück. WIrd beim erstellen festgesetzt und kann nicht geändert werden.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteOffset", "Int32Array.prototype.byteOffset")}} {{readonlyInline}}</dt>
+ <dd>Gibt das Offset (in Bytes) des <code>Int32Array</code> vom Anfang seines {{jsxref("ArrayBuffer")}} zurück. WIrd beim erstellen festgesetzt und kann nicht geändert werden.</dd>
+ <dt>{{jsxref("TypedArray.prototype.length", "Int32Array.prototype.length")}} {{readonlyInline}}</dt>
+ <dd>Gibt Anzahl der Elemente des <code>Int32Array</code> zurück. WIrd beim erstellen festgesetzt und kann nicht geändert werden.</dd>
+</dl>
+
+<h3 id="Methoden_2">Methoden</h3>
+
+<dl>
+ <dt>{{jsxref("TypedArray.copyWithin", "Int32Array.prototype.copyWithin()")}}</dt>
+ <dd>Kopiert eine Sequenz von Arrayelementen in das Array. Siehe auch {{jsxref("Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.entries", "Int32Array.prototype.entries()")}}</dt>
+ <dd>Gibt ein neues <code>Array Iterator</code> Objekt zurück, welches die Schlüssel/Wertepaare für jeden Index im Array enthält. Siehe auch {{jsxref("Array.prototype.entries()")}}.</dd>
+ <dt>{{jsxref("TypedArray.every", "Int32Array.prototype.every()")}}</dt>
+ <dd>Teste, ob alle Elemente einem, als Funktion übergebenen, Test erfüllen. Siehe auch Array.prototype.every()")}}.</dd>
+ <dt>{{jsxref("TypedArray.fill", "Int32Array.prototype.fill()")}}</dt>
+ <dd>Füllt alle Elemente eines Arrays vom Startindex bis zum Endindex mit einem statischen Wert. Siehe auch {{jsxref("Array.prototype.fill()")}}.</dd>
+ <dt>{{jsxref("TypedArray.filter", "Int32Array.prototype.filter()")}}</dt>
+ <dd>Erstellt ein neues Array mit allen Elementen des alten Arrays, für die eine übergebene Filterfunktion <code>true</code> zurückgibt. Siehe auch {{jsxref("Array.prototype.filter()")}}.</dd>
+ <dt>{{jsxref("TypedArray.find", "Int32Array.prototype.find()")}}</dt>
+ <dd>Gibt ein gefundenes Element des Arrays zurück, welches bei der übergebenen Testfunktion <code>true</code> zurückgibt oder <code>undefined</code> wenn es keins gibt. Siehe auch {{jsxref("Array.prototype.find()")}}.</dd>
+ <dt>{{jsxref("TypedArray.findIndex", "Int32Array.prototype.findIndex()")}}</dt>
+ <dd>Gibt den Index eines gefundenen Elements des Arrays zurück, welches bei der übergebenen Testfunktion <code>true</code> zurückgibt oder <code>-1</code> wenn es keins gibt. Siehe auch {{jsxref("Array.prototype.findIndex()")}}.</dd>
+ <dt>{{jsxref("TypedArray.forEach", "Int32Array.prototype.forEach()")}}</dt>
+ <dd>Ruft für jedes Element in einem Array eine Funktion auf. Siehe auch {{jsxref("Array.prototype.forEach()")}}.</dd>
+ <dt>{{jsxref("TypedArray.includes", "Int32Array.prototype.includes()")}} {{experimental_inline}}</dt>
+ <dd>Überprüft, ob ein getyptes Array ein bestimmtes Element enthält und gibt gegebenfalls <code>true</code> oder<code>false</code> zurück. Siehe auch {{jsxref("Array.prototype.includes()")}}.</dd>
+ <dt>{{jsxref("TypedArray.indexOf", "Int32Array.prototype.indexOf()")}}</dt>
+ <dd>Gibt den ersten Index eines Elementes zurück, welches gleiche eines spezifizierten Wertes ist oder <code>-1</code> wenn es keins gibt. Siehe auch {{jsxref("Array.prototype.indexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.join", "Int32Array.prototype.join()")}}</dt>
+ <dd>Führt alle Elemente eines Arrays zu einem String zusammen. Siehe auch {{jsxref("Array.prototype.join()")}}.</dd>
+ <dt>{{jsxref("TypedArray.keys", "Int32Array.prototype.keys()")}}</dt>
+ <dd>Gibt ein neuen <code>Array Iterator</code> zurück, der alle Schlüssel für jeden Index im Array enthält. Siehe auch {{jsxref("Array.prototype.keys()")}}.</dd>
+ <dt>{{jsxref("TypedArray.lastIndexOf", "Int32Array.prototype.lastIndexOf()")}}</dt>
+ <dd>Gibt den letzen Index eines Elementes zurück, welches gleiche eines spezifizierten Wertes ist oder <code>-1</code> wenn es keins gibt. Siehe auch {{jsxref("Array.prototype.lastIndexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.map", "Int32Array.prototype.map()")}}</dt>
+ <dd>Erstellt ein neues Array mit den Resultaten spezifizierten Funktion, die für jedes Element aufgerufen wird. Siehe auch {{jsxref("Array.prototype.map()")}}.</dd>
+ <dt>{{jsxref("TypedArray.move", "Int32Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt>
+ <dd>Ehemalige nicht Standardisierte Version von {{jsxref("TypedArray.copyWithin", "Int32Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduce", "Int32Array.prototype.reduce()")}}</dt>
+ <dd>Führt eine Funktion gegeben einen Akkumulator und jeden Wert des Array aus (von links nach rechts), um das Array auf einen Wert zu reduzieren. Siehe auch {{jsxref("Array.prototype.reduce()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduceRight", "Int32Array.prototype.reduceRight()")}}</dt>
+ <dd>Führt eine Funktion gegeben einen Akkumulator und jeden Wert des Array aus (von rechts nach links), um das Array auf einen Wert zu reduzieren. Siehe auch {{jsxref("Array.prototype.reduce()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reverse", "Int32Array.prototype.reverse()")}}</dt>
+ <dd>Kehrt die Reihenfolge von jedem Element eines Arrays um — das Erste wird das Letzte und das Letzte wird das Erste. Siehe auch {{jsxref("Array.prototype.reverse()")}}.</dd>
+ <dt>{{jsxref("TypedArray.set", "Int32Array.prototype.set()")}}</dt>
+ <dd>Speichert mehrere Werte in einem getypten Array und ließt Eingabewerte aus einem spezifiziertem Array.</dd>
+ <dt>{{jsxref("TypedArray.slice", "Int32Array.prototype.slice()")}}</dt>
+ <dd>Extrahiert einen Bereich aus einem Array und gibt diesen in einem neuen Array zurück. Siehe auch {{jsxref("Array.prototype.slice()")}}.</dd>
+ <dt>{{jsxref("TypedArray.some", "Int32Array.prototype.some()")}}</dt>
+ <dd>Gibt <code>true</code> zurück, wenn nur ein Element in einem Array den als Funktion übergebenen Test erfüllt. Siehe auch {{jsxref("Array.prototype.some()")}}</dd>
+ <dt>{{jsxref("TypedArray.sort", "Int32Array.prototype.sort()")}}</dt>
+ <dd>Sortiert die Elemente eines Arrays in-Place und gibt das Array zurück. Siehe auch {{jsxref("Array.prototype.sort()")}}.</dd>
+ <dt>{{jsxref("TypedArray.subarray", "Int32Array.prototype.subarray()")}}</dt>
+ <dd>Gibt ein neues <code>Int32Array</code> vom gegebenen Start- und Endindex zurück.</dd>
+ <dt>{{jsxref("TypedArray.values", "Int32Array.prototype.values()")}}</dt>
+ <dd>Gibt ein neues <code>Array Iterator</code> Objekt zurück, welches die Werte von jedem Index im Array enthält. Siehe auch {{jsxref("Array.prototype.values()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toLocaleString", "Int32Array.prototype.toLocaleString()")}}</dt>
+ <dd>Gibt einen Ortsabhängige Stringrepräsentation des Arrays und seiner Element zurück. Siehe auch {{jsxref("Array.prototype.toLocaleString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toString", "Int32Array.prototype.toString()")}}</dt>
+ <dd>Gibt einen Stringrepräsentation des Arrays und seiner Element zurück. Siehe auch {{jsxref("Array.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.@@iterator", "Int32Array.prototype[@@iterator]()")}}</dt>
+ <dd>Gibt ein neues <code>Array Iterator</code> Objekt zurück, welches die zugehörigen Werte für jeden Index im Array enthalten.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Verschiedene Wege, um ein <code>Int32Array</code> zu erstellen:</p>
+
+<pre class="brush: js">// From a length
+var int32 = new Int32Array(2);
+int32[0] = 42;
+console.log(int32[0]); // 42
+console.log(int32.length); // 2
+console.log(int32.BYTES_PER_ELEMENT); // 4
+
+// From an array
+var arr = new Int32Array([21,31]);
+console.log(arr[1]); // 31
+
+// From another TypedArray
+var x = new Int32Array([21, 31]);
+var y = new Int32Array(x);
+console.log(y[0]); // 21
+
+// From an ArrayBuffer
+var buffer = new ArrayBuffer(16);
+var z = new Int32Array(buffer, 0, 4);
+
+// From an iterable
+var iterable = function*(){ yield* [1,2,3]; }();
+var int32 = new Int32Array(iterable);
+// Int32Array[1, 2, 3]
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Ersetzt in ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition in einem ECMA Standard. Spezifiziert, dass ein <code>new</code> benötigt wird.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>ECMAScript 2017 ändert den <code>Int32Array</code> Konstruktor, um die <code>ToIndex</code> Operation zu benutzen und erlaubt einen Konstruktor ohne Parameter.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Int32Array")}}</p>
+
+<h2 id="Kompatibilitätshinweise">Kompatibilitätshinweise</h2>
+
+<p>Mit Beginn von ECMAScript 2015, müssen <code>Int32Array</code> Konstruktoren mit einem {{jsxref("Operators/new", "new")}} benutzt werden. Der Aufruf eines <code>Int32Array</code> Konstruktors als eine Funktion ohne <code>new</code>, Führt jetzt zu einem {{jsxref("TypeError")}}.</p>
+
+<pre class="brush: js example-bad">var dv = Int32Array([1, 2, 3]);
+// TypeError: calling a builtin Int32Array constructor
+// without new is forbidden</pre>
+
+<pre class="brush: js example-good">var dv = new Int32Array([1, 2, 3]);</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Typed_arrays" title="en/JavaScript typed arrays">JavaScript getypte Arrays</a></li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("DataView")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/int8array/index.html b/files/de/web/javascript/reference/global_objects/int8array/index.html
new file mode 100644
index 0000000000..2358f38883
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/int8array/index.html
@@ -0,0 +1,209 @@
+---
+title: Int8Array
+slug: Web/JavaScript/Reference/Global_Objects/Int8Array
+tags:
+  - Constructor
+  - Int8Array
+  - JavaScript
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/Int8Array
+---
+<div>{{JSRef}}</div>
+
+<p>Das <strong><code>Int8Array</code></strong> getypte Array repräsentiert ein Array von zweierkomplement 8 Bit vorzeichenbehafteten, ganze Zahlen in der Plattform-Byte-Reihenfolge. Die Inhalte werden mit <code>0</code> initialisiert. Wie erwartet, kann man Element in einem Array mit Objektmethoden referenzieren oder man benutzt die normale Arrayindex-Syntax (das ist die Klammernotation).</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">new Int8Array(); // new in ES2017
+new Int8Array(length);
+new Int8Array(typedArray);
+new Int8Array(object);
+new Int8Array(buffer [, byteOffset [, length]]);</pre>
+
+<p>Für mehr Informationen über die Konstruktorensyntax und die Parameter, siehe auf der Seite <em><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#Syntax">TypedArray</a></em>.</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Int8Array.BYTES_PER_ELEMENT")}}</dt>
+ <dd>Gibt die Größe der Elemente zurück. <code>1</code> im Falle eines <code>Int8rray</code>.</dd>
+ <dt>Int8Array.length</dt>
+ <dd>Statische Längeneigenschaft welche den Wert 0 hat. Für die aktuelle Länge (Anzahl der Elemente) siehe {{jsxref("TypedArray.prototype.length", "Int8Array.prototype.length")}}.</dd>
+ <dt>{{jsxref("TypedArray.name", "Int8Array.name")}}</dt>
+ <dd>Gibt den Stringwert des Konstruktornamens zurück. In Fall eines <code>Int8Array</code> Typs: <code>"Int8Array"</code>.</dd>
+ <dt>{{jsxref("TypedArray.prototype", "Int8Array.prototype")}}</dt>
+ <dd>Prototyp für das <em>TypedArray</em> Objekt.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.from", "Int8Array.from()")}}</dt>
+ <dd>Erstelle ein neues <code>Int8Array</code> von einem Array-Ähnlichen oder Iterable Objekt. Siehe auch {{jsxref("Array.from()")}}.</dd>
+ <dt>{{jsxref("TypedArray.of", "Int8Array.of()")}}</dt>
+ <dd>Erstellt ein neues <code>Int8Array</code> mit einer variablen Anzahl an Argumenten. Sie auch {{jsxref("Array.of()")}}.</dd>
+</dl>
+
+<h2 id="Int8Array_Prototyp"><code>Int8Array</code> Prototyp</h2>
+
+<p> </p>
+
+<p>Alle <code>Int8Array</code> Objekte erben von {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.</p>
+
+<h3 id="Eigenschaften_2">Eigenschaften</h3>
+
+<dl>
+ <dt><code>Int8Array.prototype.constructor</code></dt>
+ <dd>Gibt die Funktion, die einen Instanzprototyp erstellt zurück. Diese ist auf den <code>Int8Array</code> Konstruktor voreingestellt.</dd>
+ <dt>{{jsxref("TypedArray.prototype.buffer", "Int8Array.prototype.buffer")}} {{readonlyInline}}</dt>
+ <dd>Gibt die {{jsxref("ArrayBuffer")}} Referenz zurück, welche nach der Erstellung eines <code>Int8Array</code> fest ist und nicht mehr geändert werden kann.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteLength", "Int8Array.prototype.byteLength")}} {{readonlyInline}}</dt>
+ <dd>Gibt die Länge (in Bytes) des <code>Int8Array</code> vom Anfang seines {{jsxref("ArrayBuffer")}} zurück. WIrd beim erstellen festgesetzt und kann nicht geändert werden.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteOffset", "Int8Array.prototype.byteOffset")}} {{readonlyInline}}</dt>
+ <dd>Gibt das Offset (in Bytes) des <code>Int8Array</code> vom Anfang seines {{jsxref("ArrayBuffer")}} zurück. WIrd beim erstellen festgesetzt und kann nicht geändert werden.</dd>
+ <dt>{{jsxref("TypedArray.prototype.length", "Int8Array.prototype.length")}} {{readonlyInline}}</dt>
+ <dd>Gibt Anzahl der Elemente des <code>Int8Array</code> zurück. WIrd beim erstellen festgesetzt und kann nicht geändert werden.</dd>
+</dl>
+
+<h3 id="Methoden_2">Methoden</h3>
+
+<dl>
+ <dt>{{jsxref("TypedArray.copyWithin", "Int8Array.prototype.copyWithin()")}}</dt>
+ <dd>Kopiert eine Sequenz von Arrayelementen in das Array. Siehe auch {{jsxref("Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.entries", "Int8Array.prototype.entries()")}}</dt>
+ <dd>Gibt ein neues <code>Array Iterator</code> Objekt zurück, welches die Schlüssel/Wertepaare für jeden Index im Array enthält. Siehe auch {{jsxref("Array.prototype.entries()")}}.</dd>
+ <dt>{{jsxref("TypedArray.every", "Int8Array.prototype.every()")}}</dt>
+ <dd>Teste, ob alle Elemente einem, als Funktion übergebenen, Test erfüllen. Siehe auch Array.prototype.every()")}}.</dd>
+ <dt>{{jsxref("TypedArray.fill", "Int8Array.prototype.fill()")}}</dt>
+ <dd>Füllt alle Elemente eines Arrays vom Startindex bis zum Endindex mit einem statischen Wert. Siehe auch {{jsxref("Array.prototype.fill()")}}.</dd>
+ <dt>{{jsxref("TypedArray.filter", "Int8Array.prototype.filter()")}}</dt>
+ <dd>Erstellt ein neues Array mit allen Elementen des alten Arrays, für die eine übergebene Filterfunktion <code>true</code> zurückgibt. Siehe auch {{jsxref("Array.prototype.filter()")}}.</dd>
+ <dt>{{jsxref("TypedArray.find", "Int8Array.prototype.find()")}}</dt>
+ <dd>Gibt ein gefundenes Element des Arrays zurück, welches bei der übergebenen Testfunktion <code>true</code> zurückgibt oder <code>undefined</code> wenn es keins gibt. Siehe auch {{jsxref("Array.prototype.find()")}}.</dd>
+ <dt>{{jsxref("TypedArray.findIndex", "Int8Array.prototype.findIndex()")}}</dt>
+ <dd>Gibt den Index eines gefundenen Elements des Arrays zurück, welches bei der übergebenen Testfunktion <code>true</code> zurückgibt oder <code>-1</code> wenn es keins gibt. Siehe auch {{jsxref("Array.prototype.findIndex()")}}.</dd>
+ <dt>{{jsxref("TypedArray.forEach", "Int8Array.prototype.forEach()")}}</dt>
+ <dd>Ruft für jedes Element in einem Array eine Funktion auf. Siehe auch {{jsxref("Array.prototype.forEach()")}}.</dd>
+ <dt>{{jsxref("TypedArray.includes", "Int8Array.prototype.includes()")}} {{experimental_inline}}</dt>
+ <dd>Überprüft, ob ein getyptes Array ein bestimmtes Element enthält und gibt gegebenfalls <code>true</code> oder<code>false</code> zurück. Siehe auch {{jsxref("Array.prototype.includes()")}}.</dd>
+ <dt>{{jsxref("TypedArray.indexOf", "Int8Array.prototype.indexOf()")}}</dt>
+ <dd>Gibt den ersten Index eines Elementes zurück, welches gleiche eines spezifizierten Wertes ist oder <code>-1</code> wenn es keins gibt. Siehe auch {{jsxref("Array.prototype.indexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.join", "Int8Array.prototype.join()")}}</dt>
+ <dd>Führt alle Elemente eines Arrays zu einem String zusammen. Siehe auch {{jsxref("Array.prototype.join()")}}.</dd>
+ <dt>{{jsxref("TypedArray.keys", "Int8Array.prototype.keys()")}}</dt>
+ <dd>Gibt ein neuen <code>Array Iterator</code> zurück, der alle Schlüssel für jeden Index im Array enthält. Siehe auch {{jsxref("Array.prototype.keys()")}}.</dd>
+ <dt>{{jsxref("TypedArray.lastIndexOf", "Int8Array.prototype.lastIndexOf()")}}</dt>
+ <dd>Gibt den letzen Index eines Elementes zurück, welches gleiche eines spezifizierten Wertes ist oder <code>-1</code> wenn es keins gibt. Siehe auch {{jsxref("Array.prototype.lastIndexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.map", "Int8Array.prototype.map()")}}</dt>
+ <dd>Erstellt ein neues Array mit den Resultaten spezifizierten Funktion, die für jedes Element aufgerufen wird. Siehe auch {{jsxref("Array.prototype.map()")}}.</dd>
+ <dt>{{jsxref("TypedArray.move", "Int8Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt>
+ <dd>Ehemalige nicht Standardisierte Version von {{jsxref("TypedArray.copyWithin", "Int8Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduce", "Int8Array.prototype.reduce()")}}</dt>
+ <dd>Führt eine Funktion gegeben einen Akkumulator und jeden Wert des Array aus (von links nach rechts), um das Array auf einen Wert zu reduzieren. Siehe auch {{jsxref("Array.prototype.reduce()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduceRight", "Int8Array.prototype.reduceRight()")}}</dt>
+ <dd>Führt eine Funktion gegeben einen Akkumulator und jeden Wert des Array aus (von rechts nach links), um das Array auf einen Wert zu reduzieren. Siehe auch {{jsxref("Array.prototype.reduce()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reverse", "Int8Array.prototype.reverse()")}}</dt>
+ <dd>Kehrt die Reihenfolge von jedem Element eines Arrays um — das Erste wird das Letzte und das Letzte wird das Erste. Siehe auch {{jsxref("Array.prototype.reverse()")}}.</dd>
+ <dt>{{jsxref("TypedArray.set", "Int8Array.prototype.set()")}}</dt>
+ <dd>Speichert mehrere Werte in einem getypten Array und ließt Eingabewerte aus einem spezifiziertem Array.</dd>
+ <dt>{{jsxref("TypedArray.slice", "Int8Array.prototype.slice()")}}</dt>
+ <dd>Extrahiert einen Bereich aus einem Array und gibt diesen in einem neuen Array zurück. Siehe auch {{jsxref("Array.prototype.slice()")}}.</dd>
+ <dt>{{jsxref("TypedArray.some", "Int8Array.prototype.some()")}}</dt>
+ <dd>Gibt <code>true</code> zurück, wenn nur ein Element in einem Array den als Funktion übergebenen Test erfüllt. Siehe auch {{jsxref("Array.prototype.some()")}}</dd>
+ <dt>{{jsxref("TypedArray.sort", "Int8Array.prototype.sort()")}}</dt>
+ <dd>Sortiert die Elemente eines Arrays in-Place und gibt das Array zurück. Siehe auch {{jsxref("Array.prototype.sort()")}}.</dd>
+ <dt>{{jsxref("TypedArray.subarray", "Int8Array.prototype.subarray()")}}</dt>
+ <dd>Gibt ein neues <code>Int8Array</code> vom gegebenen Start- und Endindex zurück.</dd>
+ <dt>{{jsxref("TypedArray.values", "Int8Array.prototype.values()")}}</dt>
+ <dd>Gibt ein neues <code>Array Iterator</code> Objekt zurück, welches die Werte von jedem Index im Array enthält. Siehe auch {{jsxref("Array.prototype.values()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toLocaleString", "Int8Array.prototype.toLocaleString()")}}</dt>
+ <dd>Gibt einen Ortsabhängige Stringrepräsentation des Arrays und seiner Element zurück. Siehe auch {{jsxref("Array.prototype.toLocaleString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toString", "Int8Array.prototype.toString()")}}</dt>
+ <dd>Gibt einen Stringrepräsentation des Arrays und seiner Element zurück. Siehe auch {{jsxref("Array.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.@@iterator", "Int8Array.prototype[@@iterator]()")}}</dt>
+ <dd>Gibt ein neues <code>Array Iterator</code> Objekt zurück, welches die zugehörigen Werte für jeden Index im Array enthalten.</dd>
+</dl>
+
+<p> </p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Verschiedene Wege, um ein <code>Int8Array</code> zu erstellen:</p>
+
+<pre class="brush: js">// From a length
+var int8 = new Int8Array(2);
+int8[0] = 42;
+console.log(int8[0]); // 42
+console.log(int8.length); // 2
+console.log(int8.BYTES_PER_ELEMENT); // 1
+
+// From an array
+var arr = new Int8Array([21,31]);
+console.log(arr[1]); // 31
+
+// From another TypedArray
+var x = new Int8Array([21, 31]);
+var y = new Int8Array(x);
+console.log(y[0]); // 21
+
+// From an ArrayBuffer
+var buffer = new ArrayBuffer(8);
+var z = new Int8Array(buffer, 1, 4);
+
+// From an iterable
+var iterable = function*(){ yield* [1,2,3]; }();
+var int8 = new Int8Array(iterable);
+// Int8Array[1, 2, 3]
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Ersetzt in ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition in einem ECMA Standard. Spezifiziert, dass ein <code>new</code> benötigt wird.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>ECMAScript 2017 ändert den <code>Int8Array</code> Konstruktor, um die <code>ToIndex</code> Operation zu benutzen und erlaubt einen Konstruktor ohne Parameter.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Int8Array")}}</p>
+
+<h2 id="Kompatibilitätshinweise">Kompatibilitätshinweise</h2>
+
+<p>Mit Beginn von ECMAScript 2015, müssen <code>Int8Array</code> Konstruktoren mit einem {{jsxref("Operators/new", "new")}} benutzt werden. Der Aufruf eines <code>Int8Array</code> Konstruktors als eine Funktion ohne <code>new</code>, Führt jetzt zu einem {{jsxref("TypeError")}}.</p>
+
+<pre class="brush: js example-bad">var dv = Int8Array([1, 2, 3]);
+// TypeError: calling a builtin Int8Array constructor
+// without new is forbidden</pre>
+
+<pre class="brush: js example-good">var dv = new Int8Array([1, 2, 3]);</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Typed_arrays" title="en/JavaScript typed arrays">JavaScript getypte Arrays</a></li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("DataView")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/internalerror/index.html b/files/de/web/javascript/reference/global_objects/internalerror/index.html
new file mode 100644
index 0000000000..3775c4edd9
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/internalerror/index.html
@@ -0,0 +1,82 @@
+---
+title: InternalError
+slug: Web/JavaScript/Reference/Global_Objects/InternalError
+tags:
+  - Error
+  - InternalError
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Global_Objects/InternalError
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>Das <strong><code>InternalError</code> Objekt</strong> zeigt einen Fehler an, der in der JavaScript-Umgebung auftritt. Zum Beispiel: <strong>"InternalError</strong>: too much recursion".</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">new InternalError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>message</code></dt>
+ <dd>Optional. Für Menschen lesbare Fehlerbeschreibung.</dd>
+ <dt><code>fileName</code> {{non-standard_inline}}</dt>
+ <dd>Optional. Der Name der Datei, in der der Fehler auftritt.</dd>
+ <dt><code>lineNumber</code> {{non-standard_inline}}</dt>
+ <dd>Optional. Die Zeilennummer in der Datei, in der der Fehler auftritt.</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Ein <code>InternalError</code> wird immer erzeugt, wenn ein Fehler in der JavaScript-Umgebung auftritt.</p>
+
+<p>Beispielfälle die oft eintreten, wenn manchmal etwas zu ang ist:</p>
+
+<ul>
+ <li>"too many switch cases",</li>
+ <li>"too many parentheses in regular expression",</li>
+ <li>"array initializer too large",</li>
+ <li>"too much recursion".</li>
+</ul>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt>{{jsxref("InternalError.prototype")}}</dt>
+ <dd>Erlaubt das Hinzufügen von Eigenschaften zu einem <code>InternalError</code> Objekt.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<p>Die globale <code>InternalError</code> Klasse enthält keine eigenen Methoden, jedoch erbt sie einige Methoden durch die Prototypenkette.</p>
+
+<h2 id="InternalError_Instanzen"><code>InternalError</code> Instanzen</h2>
+
+<h3 id="Eigenschaften_2">Eigenschaften</h3>
+
+<div>{{page('/de/docs/Web/JavaScript/Reference/Global_Objects/InternalError/prototype', 'Eigenschaften')}}</div>
+
+<h3 id="Methods">Methods</h3>
+
+<div>{{page('/de/docs/Web/JavaScript/Reference/Global_Objects/InternalError/prototype', 'Methoden')}}</div>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>In keiner Spezifikation enthalten.</p>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("javascript.builtins.InternalError")}}</p>
+</div>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("InternalError.prototype")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/internalerror/prototype/index.html b/files/de/web/javascript/reference/global_objects/internalerror/prototype/index.html
new file mode 100644
index 0000000000..f76ee54ea8
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/internalerror/prototype/index.html
@@ -0,0 +1,61 @@
+---
+title: InternalError.prototype
+slug: Web/JavaScript/Reference/Global_Objects/InternalError/prototype
+tags:
+  - Error
+  - InternalError
+  - JavaScript
+  - Property
+translation_of: Web/JavaScript/Reference/Global_Objects/InternalError
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>Die <code><strong>InternalError.prototype</strong></code> Eigenschaft repräsentiert den Prototypen des {{jsxref("InternalError")}} Konstruktors.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Alle {{jsxref("InternalError")}} Instanzen erben von <code>InternalError.prototype</code>. Man kann den Prototypen benutzt, um Eigenschaften oder Methoden für alle Instanzen hinzuzufügen.</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt><code>InternalError.prototype.constructor</code></dt>
+ <dd>Spezifiziert die Funktion, die einen Instanzen Prototyp erstellt.</dd>
+ <dt>{{jsxref("Error.prototype.message", "InternalError.prototype.message")}}</dt>
+ <dd>Fehlermeldung. Geerbt von {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.name", "InternalError.prototype.name")}}</dt>
+ <dd>Fehlername. Geerbt von {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.fileName", "InternalError.prototype.fileName")}}</dt>
+ <dd>Pfad zur Datei, in der der Fehler auftritt. Geerbt von {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.lineNumber", "InternalError.prototype.lineNumber")}}</dt>
+ <dd>Zeilennummer, in der Datei, in der der Fehler auftritt. Geerbt von {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.columnNumber", "InternalError.prototype.columnNumber")}}</dt>
+ <dd>Spaltennummer, in der Zeile, in der der Fehler auftritt. Geerbt von {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.stack", "InternalError.prototype.stack")}}</dt>
+ <dd>Stacktrace. Geerbt von {{jsxref("Error")}}.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<p>Obwohl das {{jsxref("InternalError")}} Prototypobjekt keine eigenen Methoden besitzt, erben {{jsxref("InternalError")}} Instanzen einige Methoden durch die Prototypenkette.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>In keiner Spezifikation enthalten.</p>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.InternalError")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype")}}</li>
+ <li>{{jsxref("Function.prototype")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/intl/collator/compare/index.html b/files/de/web/javascript/reference/global_objects/intl/collator/compare/index.html
new file mode 100644
index 0000000000..c54c1a2869
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/intl/collator/compare/index.html
@@ -0,0 +1,101 @@
+---
+title: Intl.Collator.prototype.compare
+slug: Web/JavaScript/Reference/Global_Objects/Intl/Collator/compare
+tags:
+  - Collator
+  - Internationalization
+  - JavaScript
+  - Property
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Collator/compare
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Intl.Collator.prototype.compare</code></strong> Eigenschaft gibt eine Funktion zurück, die zwei Strings, abhängig von der Sortierreihenfolge des {{jsxref("Collator")}} Objektes, vergleicht.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/intl-collator-prototype-compare.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>collator</var>.compare(<var>string1</var>, <var>string2</var>)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>string1</code></dt>
+ <dt><code>string2</code></dt>
+ <dd>Die Strings, die miteinander verglichen werden sollen.</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die Funktion, die von dem Getter <code>compare</code> zurückgegeben wird, gibt eine Zahl zurück, die angibt, wie <code>string1</code> und <code>string2</code> in der Sortierreihenfolge des {{jsxref("Collator")}} Objektes zueinander stehen: Ein negativer Wert gibt an, <code>string1</code> vor <code>string2</code> kommt; Ein positiver Wert gibt an, dass <code>string1</code> nach <code>string2</code> kommt; 0 gibt an, dass beide gleich sind.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_compare_zum_Sortieren_von_Arrays">Einsatz von <code>compare</code> zum Sortieren von Arrays</h3>
+
+<p>Man kann die vom Getter <code>compare</code> zurückgegebenen Funktion zum Sortieren von Arrays einsetzen. Zu beachten ist, dass diese Funktion an das collator-Objekte gebunden ist, auf dem es aufgerufen wurde, so dass es direkt an {{jsxref("Array.prototype.sort()")}} übergeben werden kann.</p>
+
+<pre class="brush: js">var a = ['Offenbach', 'Österreich', 'Odenwald'];
+var collator = new Intl.Collator('de-u-co-phonebk');
+a.sort(collator.compare);
+console.log(a.join(', '));
+// → "Odenwald, Österreich, Offenbach"
+</pre>
+
+<h3 id="Einsatz_von_compare_zum_Suchen_in_Arrays">Einsatz von <code>compare</code> zum Suchen in Arrays</h3>
+
+<p>Man kann die vom Getter <code>compare</code> zurückgegebenen Funktion zum suchen von passenden Elementen in einem Array benutzen:</p>
+
+<pre class="brush: js">var a = ['Congrès', 'congres', 'Assemblée', 'poisson'];
+var collator = new Intl.Collator('fr', { usage: 'search', sensitivity: 'base' });
+var s = 'congres';
+var matches = a.filter(v =&gt; collator.compare(v, s) === 0);
+console.log(matches.join(', '));
+// → "Congrès, congres"
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-10.3.2', 'Intl.Collator.prototype.compare')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-10.3.2', 'Intl.Collator.prototype.compare')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-Intl.Collator.prototype.compare', 'Intl.Collator.prototype.compare')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Intl.Collator.compare")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Collator", "Intl.Collator")}}</li>
+ <li>{{jsxref("String.prototype.localeCompare()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/intl/collator/index.html b/files/de/web/javascript/reference/global_objects/intl/collator/index.html
new file mode 100644
index 0000000000..1ed4bb3f34
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/intl/collator/index.html
@@ -0,0 +1,179 @@
+---
+title: Intl.Collator
+slug: Web/JavaScript/Reference/Global_Objects/Intl/Collator
+tags:
+  - Collator
+  - Internationalization
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Collator
+---
+<div>{{JSRef}}</div>
+
+<p>Das <strong><code>Intl.Collator</code></strong> Objekt ist ein Konstruktor für Überprüfer, Objekte die Sprachsensitive Stringvergleiche unterstützen.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/intl-collator.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>new Intl.Collator([<var>locales</var>[, <var>options</var>]])
+Intl.Collator.call(<var>this</var>[, <var>locales</var>[, <var>options</var>]])</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>locales</code></dt>
+ <dd>
+ <p>Optional. Ein String mit einem BCP 47 Sprachtag, oder einem Array von solchen Strings. Für die generelle Interpretation für das <code>locales</code> Argument, siehe auf der {{jsxref("Global_Objects/Intl", "Intl Seite", "#Gebietsidentifikation_und_-verhandlung", 1)}} nach. Die folgenden Unicode-Erweiterunsschlüssel sind erlaubt:</p>
+
+ <dl>
+  <dt><code>co</code></dt>
+  <dd>Abweichender Vergleich für einige Gebiete. Folgende Werte sind möglich: <code>"big5han"</code>, <code>"dict"</code>, <code>"direct"</code>, <code>"ducet"</code>, <code>"gb2312"</code>, <code>"phonebk"</code>, <code>"phonetic"</code>, <code>"pinyin"</code>, <code>"reformed"</code>, <code>"searchjl"</code>, <code>"stroke"</code>, <code>"trad"</code>, <code>"unihan"</code>. Die Werte <code>"standard"</code> und <code>"search"</code> werden ignoriert. Sie werden durch die EIgenschaft <code>usage</code> des <code>options</code> Objekt ersetzt (siehe unten).</dd>
+  <dt><code>kn</code></dt>
+  <dd>Wenn numerische Vergleiche benutzt werden soll, so wie "1" &lt; "2" &lt; "10". Mögliche Werte sind <code>"true"</code> und <code>"false"</code>. Diese Option kann über eine <code>options</code> Eigenschaft oder über einen Unicode-Erweiterungsschlüssel gesetzt werden. Wenn beide gesetzt sind, hat die <code>options</code> Eigenschaft Vorrang.</dd>
+  <dt><code>kf</code></dt>
+  <dd>Wenn Kleinschreibung oder Großschreibung zuerst in der Reihenfolge kommt. Mögliche Wert sind <code>"upper"</code>, <code>"lower"</code>, or <code>"false"</code> (benutzt den Gebietsstandard). Diese Option kann über eine <code>options</code> Eigenschaft oder über einen Unicode-Erweiterungsschlüssel gesetzt werden. Wenn beide gesetzt sind, hat die <code>options</code> Eigenschaft Vorrang.</dd>
+ </dl>
+ </dd>
+ <dt><code>options</code></dt>
+ <dd>
+ <p>Optional. Ein Objekt einigen oder allen der folgenden Eigenschafte:</p>
+
+ <dl>
+  <dt><code>localeMatcher</code></dt>
+  <dd>Der Algorithmus zur Ermittlung des Gebiets. Mögliche Werte sind <code>"lookup"</code> and <code>"best fit"</code>; Der Standard ist <code>"best fit"</code>. Für Informationen über diese Option siehe auf der {{jsxref("Global_Objects/Intl", "Intl Seite", "#Gebietsauswahl", 1)}} nach.</dd>
+  <dt><code>usage</code></dt>
+  <dd>Ob der Vergleich für das Sortieren oder Suchen von Strings ist. Mögliche Werte sind <code>"sort"</code> and <code>"search"</code>; der Standard ist <code>"sort"</code>.</dd>
+  <dt><code>sensitivity</code></dt>
+  <dd>
+  <p>Welche Unterschiede in Strings sollen zu Resultaten ungleich 0 führen. Mögliche Werte:</p>
+
+  <ul>
+   <li><code>"base"</code>: Nur Strings die im Basisbuchstaben ungleiche sind. Beispiele: <code>a ≠ b</code>, <code>a = á</code>, <code>a = A</code>.</li>
+   <li><code>"accent"</code>: Nur Strings die im Basisbuchstaben oder Akzent und anderen diakritisch Zeichen ungleich sind. Beispiele: <code>a ≠ b</code>, <code>a ≠ á</code>, <code>a = A</code>.</li>
+   <li><code>"case"</code>: Nur Strings die im Basisbuchstaben oder der Größe ungleich sind. Beispiele: <code>a ≠ b</code>, <code>a = á</code>, <code>a ≠ A</code>.</li>
+   <li><code>"variant"</code>: Strings, die im Basisbuchstaben, im Akzent und anderen diakritischen Zeichen oder in der Großschreibung ungleich sind. Andere Unterschiede können in den Vergleich eingehen. Beispiele: <code>a ≠ b</code>, <code>a ≠ á</code>, <code>a ≠ A</code>.</li>
+  </ul>
+
+  <p>Der Standardwert ist <code>"variant"</code> wenn <code>usage</code> auf <code>"sort"</code> steht. Für <code>usage</code> gleich <code>"search"</code> ist es Gebietsabhängig.</p>
+  </dd>
+  <dt><code>ignorePunctuation</code></dt>
+  <dd>Wenn Interpunktion ignoriert werden soll. Mögliche Werte sind <code>true</code> and <code>false</code>; Der Standard ist <code>false</code>.</dd>
+  <dt><code>numeric</code></dt>
+  <dd>Wenn numerische Vergleiche benutzt werden soll, so wie "1" &lt; "2" &lt; "10". Mögliche Werte sind <code>"true"</code> und <code>"false"</code>. Der Standard ist <code>false</code>. Diese Option kann über eine <code>options</code> Eigenschaft oder über einen Unicode-Erweiterungsschlüssel gesetzt werden. Wenn beide gesetzt sind, hat die <code>options</code> Eigenschaft Vorrang. Implementierungen müssen diese Eigenschaft nicht unterstützen.</dd>
+  <dt><code>caseFirst</code></dt>
+  <dd>Wenn Kleinschreibung oder Großschreibung zuerst in der Reihenfolge kommt. Mögliche Wert sind <code>"upper"</code>, <code>"lower"</code>, or <code>"false"</code> (benutzt den Gebietsstandard). Der Standard ist <code>"false"</code>. Diese Option kann über eine <code>options</code> Eigenschaft oder über einen Unicode-Erweiterungsschlüssel gesetzt werden. Wenn beide gesetzt sind, hat die <code>options</code> Eigenschaft Vorrang. Implementierungen müssen diese Eigenschaft nicht unterstützen.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Das <code>Intl.Collator</code> Objekt hat die folgenden Eigenschaften und Methoden:</p>
+
+<h3 id="Eigenschaften">Eigenschaften</h3>
+
+<dl>
+ <dt>{{jsxref("Collator.prototype", "Intl.Collator.prototype")}}</dt>
+ <dd>Erlaubt das hinzufügen von Eigenschaften zu allen Objekten.</dd>
+</dl>
+
+<h3 id="Methoden">Methoden</h3>
+
+<dl>
+ <dt>{{jsxref("Collator.supportedLocalesOf", "Intl.Collator.supportedLocalesOf()")}}</dt>
+ <dd>Gibt ein Array von Gebieten zurück, die unterstützt werden, ohne dass die Backuplösung des Umgebungsstandards eingesetzt wird.</dd>
+</dl>
+
+<h2 id="Collator_Instanzen"><code>Collator</code> Instanzen</h2>
+
+<h3 id="Eigenschaften_2">Eigenschaften</h3>
+
+<p><code>Collator</code> Instanzen erben die folgenden Eigenschaften von ihrem Prototyp:</p>
+
+<div>{{page('de/docs/Web/JavaScript/Reference/Global_Objects/Collator/prototype', 'Eigenschaften')}}</div>
+
+<h3 id="Methoden_2">Methoden</h3>
+
+<p><code>Collator</code> Instanzen erben die folgenden Methoden von ihrem Prototyp:</p>
+
+<div>{{page('de/docs/Web/JavaScript/Reference/Global_Objects/Collator/prototype', 'Methoden')}}</div>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_Collator">Einsatz von <code>Collator</code></h3>
+
+<p>Das folgende Beispiel demonstriert die potentiell Unterschiedlichen Ergebnisse für ein String vor, nach, oder an der selben Stelle in ein andere String in der Sortierreihenfolge:</p>
+
+<pre class="brush: js">console.log(new Intl.Collator().compare('a', 'c')); // → ein negativer Wert
+console.log(new Intl.Collator().compare('c', 'a')); // → ein positiver Wert
+console.log(new Intl.Collator().compare('a', 'a')); // → 0
+</pre>
+
+<p>Zu beachten ist, dass sich das im Quelltext gezeigte Ergebnis zwischen Browsern und Browserversionen unterscheiden kann. Das ist, weil die Werte implementierungsabhängig sind. Die Spezifikation definiert nur, dass die Werte vor und nach gleich negativ und positiv sein müssen.</p>
+
+<h3 id="Einsatz_von_locales">Einsatz von <code>locales</code></h3>
+
+<p>Das Ergebnis von {{jsxref("Collator.prototype.compare()")}} variiert zwischen Sprachen. Um die Sortierreihenfolge eine Sprache im Benutzerinterface eine Applikation zu bekommen, sollte man die Sprache mit dem <code>locales</code> Argument spezifizieren (und einige Backupsprachen):</p>
+
+<pre class="brush: js">// in German, ä sorts with a
+console.log(new Intl.Collator('de').compare('ä', 'z'));
+// → a negative value
+
+// in Swedish, ä sorts after z
+console.log(new Intl.Collator('sv').compare('ä', 'z'));
+// → a positive value
+</pre>
+
+<h3 id="Einsatz_von_options">Einsatz von <code>options</code></h3>
+
+<p>Das Ergebnis von {{jsxref("Collator.prototype.compare()")}} kann durch den Einsatz des <code>options</code> Argument verändert werden:</p>
+
+<pre class="brush: js">// in German, ä has a as the base letter
+console.log(new Intl.Collator('de', { sensitivity: 'base' }).compare('ä', 'a'));
+// → 0
+
+// in Swedish, ä and a are separate base letters
+console.log(new Intl.Collator('sv', { sensitivity: 'base' }).compare('ä', 'a'));
+// → a positive value
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-10.1', 'Intl.Collator')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-10.1', 'Intl.Collator')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#collator-objects', 'Intl.Collator')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Intl.Collator")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<div>{{page('/de/docs/Web/JavaScript/Reference/Global_Objects/Intl', 'Siehe_auch')}}</div>
diff --git a/files/de/web/javascript/reference/global_objects/intl/collator/prototype/index.html b/files/de/web/javascript/reference/global_objects/intl/collator/prototype/index.html
new file mode 100644
index 0000000000..2528ecc7ba
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/intl/collator/prototype/index.html
@@ -0,0 +1,79 @@
+---
+title: Intl.Collator.prototype
+slug: Web/JavaScript/Reference/Global_Objects/Intl/Collator/prototype
+tags:
+  - Collator
+  - Internationalization
+  - JavaScript
+  - Property
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Collator
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Intl.Collator.prototype</code></strong> Eigenschaft repräsentiert das Prototypobjekt für den {{jsxref("Collator", "Intl.Collator")}} Konstruktor.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Siehe im Beitrag {{jsxref("Collator")}} für eine Beschreibung von <code>Intl.Collator</code> Instanzen.</p>
+
+<p>{{jsxref("Collator", "Intl.Collator")}} Instanzen erben von <code>Intl.Collator.prototype</code>. Änderungen am Prototypobjekt werden an alle {{jsxref("Collator", "Intl.Collator")}} Instanzen vererbt.</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt>{{jsxref("Collator.compare", "Intl.Collator.prototype.compare")}}</dt>
+ <dd>Getter; gibt eine Funktion zurück, die zwei Strings abhängig vom der Sortierreihenfolge des {{jsxref("Global_Objects/Collator", "Intl.Collator")}} Objektes vergleicht.</dd>
+ <dt><code>Intl.Collator.prototype.constructor</code></dt>
+ <dd>Eine Referenz zu {{jsxref("Global_Objects/Collator", "Intl.Collator")}}.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<dl>
+ <dt>{{jsxref("Collator.resolvedOptions", "Intl.Collator.prototype.resolvedOptions()")}}</dt>
+ <dd>Gibt ein neues Objekt mit Eigenschaften zu Gebiets- und Collation-Optionen, die bei der Initialisierung des Objekte ermittelt wurden.</dd>
+</dl>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-10.2.1', 'Intl.Collator.prototype')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-10.2.1', 'Intl.Collator.prototype')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-Intl.Collator.prototype', 'Intl.Collator.prototype')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Intl.Collator.prototype")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Collator", "Intl.Collator")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/intl/collator/resolvedoptions/index.html b/files/de/web/javascript/reference/global_objects/intl/collator/resolvedoptions/index.html
new file mode 100644
index 0000000000..322621017f
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/intl/collator/resolvedoptions/index.html
@@ -0,0 +1,100 @@
+---
+title: Intl.Collator.prototype.resolvedOptions()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/Collator/resolvedOptions
+tags:
+  - Collator
+  - Internationalization
+  - JavaScript
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Collator/resolvedOptions
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Intl.Collator.prototype.resolvedOptions()</code></strong> Methode gibt ein neues Objekt mit Eigenschaften zurück, welches die Gebiets- und Vergleichs-Optionen während der Initialisierung des {{jsxref("Collator")}} Objektes wiederspiegelt.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/intl-collator-prototype-resolvedoptions.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>collator</var>.resolvedOptions()</code></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein neues Objekt mit Eigenschaften, die die Eigenschaften der Gebiets- und Vergleichsoptionen enthält, die während der Initialisierung des gegebenen {{jsxref("Collator")}} Objekt ermittelt wurden.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Das Ergebnisobjekt hat die folgenden Eigenschaften:</p>
+
+<dl>
+ <dt><code>locale</code></dt>
+ <dd>Der BCP 47 Sprachtag für das aktuell benutzte Gebiet. Wenn Unicode-Erweiterungswerte im BCP 47 Sprachtag in der Gebietsangabe angegeben sind, sind die, die auch unterstützt sind, in <code>locale</code> vorhanden.</dd>
+ <dt><code>usage</code></dt>
+ <dt><code>sensitivity</code></dt>
+ <dt><code>ignorePunctuation</code></dt>
+ <dd>Die Werte der Unterstützten Eigenschaften des <code>options</code> Argument oder eingesetzte Standardwerte.</dd>
+ <dt><code>collation</code></dt>
+ <dd>Der überbene Wert des Unicode-Werweiterungsschlüssels <code>"co"</code>, wenn dieser für <code>locale</code> unterstützt wird oder <code>"default"</code>.</dd>
+ <dt><code>numeric</code></dt>
+ <dt><code>caseFirst</code></dt>
+ <dd>Die Werte der Unterstützten Eigenschaften des <code>options</code> Argument oder der eingesetzten Unicode-Erweiterungsschlüssel <code>"kn"</code> and <code>"kf"</code> oder den Standardwerten. Wenn die Implimentierung diese Eigenschaften nicht unterstützt, werden diese weggelassen.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_der_resolvedOptions_Methode">Einsatz der <code>resolvedOptions</code> Methode</h3>
+
+<pre class="brush: js">var de = new Intl.Collator('de', { sensitivity: 'base' })
+var usedOptions = de.resolvedOptions();
+
+usedOptions.locale;            // "de"
+usedOptions.usage;             // "sort"
+usedOptions.sensitivity;       // "base"
+usedOptions.ignorePunctuation; // false
+usedOptions.collation;         // "default"
+usedOptions.numeric;           // false
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-10.3.3', 'Intl.Collator.prototype.resolvedOptions')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-10.3.3', 'Intl.Collator.prototype.resolvedOptions')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-Intl.Collator.prototype.resolvedOptions', 'Intl.Collator.prototype.resolvedOptions')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Intl.Collator.resolvedOptions")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Collator", "Intl.Collator")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/intl/collator/supportedlocalesof/index.html b/files/de/web/javascript/reference/global_objects/intl/collator/supportedlocalesof/index.html
new file mode 100644
index 0000000000..8bc9bed6bb
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/intl/collator/supportedlocalesof/index.html
@@ -0,0 +1,98 @@
+---
+title: Intl.Collator.supportedLocalesOf()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/Collator/supportedLocalesOf
+tags:
+  - Collator
+  - Internationalization
+  - JavaScript
+  - Method
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Collator/supportedLocalesOf
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Intl.Collator.supportedLocalesOf()</code></strong> Methode gibt ein Array zurück, welches die Gebiete enthält, die von <code>Collation</code> unterstützt werden, ohne das die Laufzeitumgebung auf den Systemstandard zurückgreifen muss.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/intl-collator-prototype-supportedlocalesof.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Intl.Collator.supportedLocalesOf(<var>locales</var>[, <var>options</var>])</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>locales</code></dt>
+ <dd>Ein String mit einem BCP 47 Sprachtag oder einem Array von solchen. Für die generelle Form des <code>locales</code> Argument siehe die {{jsxref("Global_Objects/Intl", "Intl Seite", "#Gebietsidentifikation_und_-verhandlung", 1)}}.</dd>
+ <dt><code>options</code></dt>
+ <dd>
+ <p>Optional. Ein Objekt welches die folgenden Eigenschaften haben kann:</p>
+
+ <dl>
+  <dt><code>localeMatcher</code></dt>
+  <dd>Der Auswahlalgorithmus für das Gebiet. Mögliche Werte sind <code>"lookup"</code> and <code>"best fit"</code>; Der Standard ist <code>"best fit"</code>. Mehr Informationen über diese Algorithmen sind auch der {{jsxref("Global_Objects/Intl", "Intl Seite", "#Gebietsauswahl", 1)}} verfügbar.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein Array von String, welches eine Untermenge von  Gebiete enthält, die von <code>Collation</code> unterstützt werden, ohne das die Laufzeitumgebung auf den Systemstandard zurückgreifen muss.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Gibt ein Array mit einer Untermenge von Sprachtags, die in <code>locales</code> angegeben sind zurück. Die Sprachtags, die zurückgegeben werden, werden von <code>collation</code> unterstützt und vom Auswahlalgorithmus ausgesucht, ohne auf eine Standard-Sprache zurückzugreifen.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_supportedLocalesOf">Einsatz von <code>supportedLocalesOf</code></h3>
+
+<p>Angenommen wird, dass indonesisch und deutsch in <code>collation</code> unterstützt wird, aber balinesisch nicht. <code>supportedLocalesOf</code> gibt das indonesische und deutsche Sprachtag unverändert zurück, obwohl Pinyin nicht mit Indonesisch verwendet wird und Fachdeutsch wahrscheinlich nicht für Indonesisch verfügbar ist. Zu bemerken ist, dass der <code>"lookup"</code> Algorithmus verwendet wird — der<code>"best-fit"</code> Algorithmus könnte entscheiden, dass Indonesisch eine angemessene Ergänzung für Balinesen ist, da die meisten Balinesen Indonesisch verstehen und daher auch das balinesische Sprachtag zurückgeben.</p>
+
+<pre class="brush: js">var locales = ['ban', 'id-u-co-pinyin', 'de-ID'];
+var options = { localeMatcher: 'lookup' };
+console.log(Intl.Collator.supportedLocalesOf(locales, options).join(', '));
+// → "id-u-co-pinyin, de-ID"
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-10.2.2', 'Intl.Collator.supportedLocalesOf')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-10.2.2', 'Intl.Collator.supportedLocalesOf')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-Intl.Collator.supportedLocalesOf', 'Intl.Collator.supportedLocalesOf')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Intl.Collator.supportedLocalesOf")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Collator", "Intl.Collator")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/intl/datetimeformat/format/index.html b/files/de/web/javascript/reference/global_objects/intl/datetimeformat/format/index.html
new file mode 100644
index 0000000000..38ebaa091f
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/intl/datetimeformat/format/index.html
@@ -0,0 +1,101 @@
+---
+title: Intl.DateTimeFormat.prototype.format
+slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format
+tags:
+  - DateTimeFormat
+  - Internationalization
+  - JavaScript
+  - Property
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Intl.DateTimeFormat.prototype.format</code></strong> Eigenschaft gibt einen Getter-Funktion zurück, die einen Zeitstempel nach den Gebiets- und Formatierungsoptionen des {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} Objekts formatiert.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-format.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateTimeFormat</var>.format(<var>date</var>)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>date</code></dt>
+ <dd>Der Zeitstempel, der formatiert werden soll.</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die Funktion, die vom <code>format</code> Getter zurückgegeben wird, formatiert einen Zeitpunkt (date) in einen String. Dabei werden die Gebiets- und Formatierungsoptionen des {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} Objekts berücksichtigt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_format">Einsatz von <code>format</code></h3>
+
+<p>Die vom <code>format</code> Getter zurückgegebene Funktion wird zum Formatieren von Zeitstempeln genutzt, hier für Serbien:</p>
+
+<pre class="brush: js">var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+var dateTimeFormat = new Intl.DateTimeFormat('sr-RS', options);
+console.log(dateTimeFormat.format(new Date()));
+// → "недеља, 7. април 2013."
+</pre>
+
+<h3 id="Einsatz_von_format_mit_map">Einsatz von <code>format</code> mit <code>map</code></h3>
+
+<p>Die vom <code>format</code> Getter zurückgegebene Funktion kann zum Formatieren von Zeitpunkten in einem Array genutzt werden. Zu berücksichtigen ist, dass die Funktion an das {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} Objekt gebunden ist, von welche die Funktion stammt, so dass sie direkt an {{jsxref("Array.prototype.map()")}} übergeben werden kann.</p>
+
+<pre class="brush: js">var a = [new Date(2012, 08), new Date(2012, 11), new Date(2012, 03)];
+var options = { year: 'numeric', month: 'long' };
+var dateTimeFormat = new Intl.DateTimeFormat('pt-BR', options);
+var formatted = a.map(dateTimeFormat.format);
+console.log(formatted.join('; '));
+// → "setembro de 2012; dezembro de 2012; abril de 2012"
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-12.3.2', 'Intl.DateTimeFormat.format')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-12.3.2', 'Intl.DateTimeFormat.format')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.prototype.format', 'Intl.DateTimeFormat.format')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Intl.DateTimeFormat.format")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.html b/files/de/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.html
new file mode 100644
index 0000000000..07919d3fcf
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.html
@@ -0,0 +1,169 @@
+---
+title: Intl.DateTimeFormat.prototype.formatToParts()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts
+tags:
+  - DateTimeFormat
+  - Internationalization
+  - Intl
+  - JavaScript
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts
+---
+<div>{{JSRef}} {{SeeCompatTable}}</div>
+
+<p>Die <strong><code>Intl.DateTimeFormat.prototype.formatToParts()</code></strong> Methode erlaubt gebietssichere Formatierung von Strings, die von <code>DateTimeFormat</code> Formatierungen erzeugt werden.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Intl.DateTimeFormat.prototype.formatToParts(date)</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>date</code> {{optional_inline}}</dt>
+ <dd>Der Zeitstempel, der formatiert werden soll.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein {{jsxref("Array")}} von Objekten, die das Formatierte Datum in Teilen wiederspielgeln.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>formatToParts()</code> Methode ist nützlich für benutzerdefinierte Formatierung von Zeitpunktsstrings. <span id="result_box" lang="de"><span>Sie gibt ein {{jsxref ("Array")}} von Objekten zurück, die die länderspezifischen Token enthalten, aus denen benutzerdefinierte Zeichenfolgen erstellt werden können, während die länderspezifischen Teile beibehalten werden.</span> <span>Die Struktur, die die <code>formatToParts()</code>  Methode zurückgibt, sieht so aus:</span></span></p>
+
+<pre class="brush: js">[
+  { type: 'day', value: '17' },
+  { type: 'weekday', value: 'Monday' }
+]</pre>
+
+<p>Mögliche Typen sind die folgenden:</p>
+
+<dl>
+ <dt>day</dt>
+ <dd>Der String, der für den Tag benutzt wird. Zum Beispiel <code>"17"</code>.</dd>
+ <dt>dayPeriod</dt>
+ <dd>Der String, der für die Tagesperiode benutzt wird. Zum Beispiel <code>"AM"</code> oder <code>"PM"</code>.</dd>
+ <dt>era</dt>
+ <dd>Der String, der für die Ära benutzt wird. Zum Beispiel <code>"BC"</code> oder <code>"AD"</code>.</dd>
+ <dt>hour</dt>
+ <dd>Der String, der für die Stunde benutzt wird. Zum Beispiel <code>"3"</code> oder <code>"03"</code>.</dd>
+ <dt>literal</dt>
+ <dd>Der String, der als Trennung für das Datum und die Zeitbenutzt benutzt wird. Zum Beispiel <code>"/"</code>, <code>","</code>, <code>"o'clock"</code>, <code>"de"</code>, etc.</dd>
+ <dt>minute</dt>
+ <dd>Der String, der für die Minute benutzt wird. Zum Beispiel <code>"00"</code>.</dd>
+ <dt>month</dt>
+ <dd>Der String, der für den Monat benutzt wird. Zum Beispiel <code>"12"</code>.</dd>
+ <dt>second</dt>
+ <dd>Der String, der für die Sekunde benutzt wird. Zum Beispiel <code>"07"</code> oder <code>"42"</code>.</dd>
+ <dt>timeZoneName</dt>
+ <dd>Der String, der für den Zeitzonennamen benutzt wird. Zum Beispiel <code>"UTC"</code>.</dd>
+ <dt>weekday</dt>
+ <dd>Der String, der für den Wochentag benutzt wird. Zum Beispiel <code>"M"</code>, <code>"Monday"</code> oder <code>"Montag"</code>.</dd>
+ <dt>year</dt>
+ <dd>Der String, der für das Jahr benutzt wird. Zum Beispiel <code>"2012"</code> oder <code>"96"</code>.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p><code>DateTimeFormat</code> gibt lokalisierte Strings aus, die nicht direkt verändert werden können:</p>
+
+<pre class="brush: js">var date = Date.UTC(2012, 11, 17, 3, 0, 42);
+
+var formatter = new Intl.DateTimeFormat('en-us', {
+  weekday: 'long',
+  year: 'numeric',
+  month: 'numeric',
+  day: 'numeric',
+  hour: 'numeric',
+  minute: 'numeric',
+  second: 'numeric',
+  hour12: true,
+  timeZone: 'UTC'
+});
+
+formatter.format(date);
+// "Monday, 12/17/2012, 3:00:42 AM"
+</pre>
+
+<p>Oftmals ist es in vielen Benutzeroberflächen erwünscht die Formatierung dieser Strings zu verändern. Die <code>formatToParts</code> Methode erlaubt lokalsicheres Formatieren von Strings, die von <code>DateTimeFormat</code> in Teilstrings unterstützt werden:</p>
+
+<pre class="brush: js">formatter.formatToParts(date);
+
+// return value:
+[
+  { type: 'weekday',   value: 'Monday' },
+  { type: 'literal',   value: ', '     },
+  { type: 'month',     value: '12'     },
+  { type: 'literal',   value: '/'      },
+  { type: 'day',       value: '17'     },
+  { type: 'literal',   value: '/'      },
+  { type: 'year',      value: '2012'   },
+  { type: 'literal',   value: ', '     },
+  { type: 'hour',      value: '3'      },
+  { type: 'literal',   value: ':'      },
+  { type: 'minute',    value: '00'     },
+  { type: 'literal',   value: ':'      },
+  { type: 'second',    value: '42'     },
+  { type: 'literal',   value: ' '      },
+  { type: 'dayPeriod', value: 'AM'     }
+]
+</pre>
+
+<p>Jetzt sind die Informationen separiert vorhanden und  man kann Formatierungen und Konkatinationen benutzerdefiniert vornehmen. Zum Beispiel unter Einsatz von {{jsxref("Array.prototype.map()")}}, <a href="/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow Funktionen</a>, einem <a href="/de/docs/Web/JavaScript/Reference/Statements/switch">switch Statement</a>, <a href="/de/docs/Web/JavaScript/Reference/Template_literals">Templateliteralen</a> und {{jsxref("Array.prototype.reduce()")}}.</p>
+
+<pre class="brush: js">var dateString = formatter.formatToParts(date).map(({type, value}) =&gt; {
+  switch (type) {
+    case 'dayPeriod': return `&lt;b&gt;${value}&lt;/b&gt;`;
+    default : return value;
+  }
+}).reduce((string, part) =&gt; string + part);
+</pre>
+
+<p>Diese Beispiel macht die Tagesperiode fett, wenn die <code>formatToParts()</code> Methode benutzt wird.</p>
+
+<pre class="brush: js">console.log(formatter.format(date));
+// "Monday, 12/17/2012, 3:00:42 AM"
+
+console.log(dateString);
+// "Monday, 12/17/2012, 3:00:42 &lt;b&gt;AM&lt;/b&gt;"</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Ein Polyfill für die Funktionalität ist im <a href="https://github.com/zbraniecki/proposal-intl-formatToParts">proposal repository</a> verfügbar.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.prototype.formatToParts', 'Intl.DateTimeFormat.prototype.formatToParts')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td>Initiale Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Intl.DateTimeFormat.formatToParts")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+ <li>{{jsxref("DateTimeFormat.format", "Intl.DateTimeFormat.prototype.format")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/intl/datetimeformat/index.html b/files/de/web/javascript/reference/global_objects/intl/datetimeformat/index.html
new file mode 100644
index 0000000000..94cfe2d3c7
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/intl/datetimeformat/index.html
@@ -0,0 +1,248 @@
+---
+title: Intl.DateTimeFormat
+slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
+tags:
+  - DateTimeFormat
+  - Internationalization
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
+---
+<div>{{JSRef}}</div>
+
+<p>Das <strong><code>Intl.DateTimeFormat</code></strong> Objekt ist ein Konstruktor für Objekte, die sprachsensitive Formatierung von Datums- und Zeitangaben ermöglicht.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/intl-datetimeformat.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>new Intl.DateTimeFormat([<var>locales</var>[, <var>options</var>]])
+Intl.DateTimeFormat.call(<var>this</var>[, <var>locales</var>[, <var>options</var>]])</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>locales</code></dt>
+ <dd>Optional. Ein String mit einem BCP 47 Sprachcode, oder einem Array von Sprachcodes. Für die generelle Form und Interpretation des <code>locales</code> Arguments siehe auf der {{jsxref("Global_Objects/Intl", "Intl Seite", "#Locale_identification_and_negotiation", 1)}}. Die folgenden  Unicode Erweiterungen sind erlaubt:</dd>
+ <dd>
+ <dl>
+  <dt><code>nu</code></dt>
+  <dd>Zahlensysteme. Mögliche Werte sind: <code>"arab"</code>, <code>"arabext"</code>, <code>"bali"</code>, <code>"beng"</code>, <code>"deva"</code>, <code>"fullwide"</code>, <code>"gujr"</code>, <code>"guru"</code>, <code>"hanidec"</code>, <code>"khmr"</code>, <code>"knda"</code>, <code>"laoo"</code>, <code>"latn"</code>, <code>"limb"</code>, <code>"mlym"</code>, <code>"mong"</code>, <code>"mymr"</code>, <code>"orya"</code>, <code>"tamldec"</code>, <code>"telu"</code>, <code>"thai"</code>, <code>"tibt"</code>.</dd>
+  <dt><code>ca</code></dt>
+  <dd>Kalender. Mögliche Werte sind: <code>"buddhist"</code>, <code>"chinese"</code>, <code>"coptic"</code>, <code>"ethioaa"</code>, <code>"ethiopic"</code>, <code>"gregory"</code>, <code>"hebrew"</code>, <code>"indian"</code>, <code>"islamic"</code>, <code>"islamicc"</code>, <code>"iso8601"</code>, <code>"japanese"</code>, <code>"persian"</code>, <code>"roc"</code>.</dd>
+  <dt><code>hc</code></dt>
+  <dd>Stundenzyklus. Mögliche Werte sind: <code>"h11"</code>, <code>"h12"</code>, <code>"h23"</code>, <code>"h24"</code>.</dd>
+ </dl>
+ </dd>
+ <dt><code>options</code></dt>
+ <dd>
+ <p>Optional. Ein Objekt mit einigen oder allen folgenden Eigenschaften:</p>
+
+ <dl>
+  <dt><code>localeMatcher</code></dt>
+  <dd>Der Sprachfindungsalgorithmus, der eingesetzt wird. Mögliche Werte sind <code>"lookup"</code> und <code>"best fit"</code>. Als Standard ist <code>"best fit"</code> vorgegeben. Für Informationen über diese Option siehe auf der {{jsxref("Global_Objects/Intl", "Intl Seite", "#Locale_negotiation", 1)}} nach.</dd>
+  <dt><code>timeZone</code></dt>
+  <dd>Die eingesetzte Zeitzone. Der einzige Wert, den alle Implementierungen verstehen ist <code>"UTC"</code>. Der Standardwert ist die Standard-Laufzeitzeitzone. Manche Implementierungen erkennen auch die Namen der <a href="https://www.iana.org/time-zones">IANA Zeitzonendatenbank</a>, wie zum Beispiel <code>"Asia/Shanghai"</code>, <code>"Asia/Kolkata"</code> und <code>"America/New_York"</code>.</dd>
+  <dt><code>hour12</code></dt>
+  <dd>Wird eingesetzt, wenn 12-Stunden Zeitangaben eingesetzt werden (im gegensatz zu 24-Stunden Zeitangaben). Mögliche Werte sind <code>true</code> und <code>false</code>. Diese Option überschreibt den  <code>hc</code> Sprachen-Tag und/oder <code>hourCycle</code> wenn beide vorhanden sind.</dd>
+  <dt><code>hourCycle</code></dt>
+  <dd>Der eingesetzte Stundenzyklus. Mögliche Werte sind <code>"h11"</code>, <code>"h12"</code>, <code>"h23"</code> oder <code>"h24"</code>. Diese Option überschreibt den  <code>hc</code> Sprachen-Tag, wenn beide präsent sind und die <code>hour12</code> Option hat Vorrang, wenn beide Optionen spezifiziert sind.</dd>
+  <dt><code>formatMatcher</code></dt>
+  <dd>Der eingesetzte Formaterkennungsalgorithmus. Mögliche Werte sind <code>"basic"</code> und <code>"best fit"</code>. Der Standard ist <code>"best fit"</code>. Siehe folgenden Absatz, um den Einsatz dieses Parameters zu verstehen.</dd>
+ </dl>
+
+ <p>Die folgenden Eigenschaften beschreiben die Datums-Zeit-Komponenten, die für die formatierten Ausgabe eingesetzt werden und deren Repräsentation. Implementierungen müssen folgende Kombinationen der Eigenschaften unterstützen:</p>
+
+ <ul>
+  <li><code>Wochentag, Jahr, Monat, Tag, Stunde, Minute, Sekunde</code></li>
+  <li><code>Wochentag, Jahr, Monat, Tag </code></li>
+  <li><code>Jahr, Monat, Tag </code></li>
+  <li><code>Jahr, Monat</code></li>
+  <li><code>Monat, Tag </code></li>
+  <li><code>Stunde, Minute, Sekunde </code></li>
+  <li><code>Stunde, Minute</code></li>
+ </ul>
+
+ <p>Manche Implementierungen unterstützen weitere Kombinationen der Parameter. Es wird immer auf alle möglichen Kombinationen geprüft, um den besten Treffer zu landen. Zwei Algorithmen sind für die Auswahl der Kombination vorhanden: Ein <a href="http://www.ecma-international.org/ecma-402/1.0/#BasicFormatMatcher">voll spezifizierter <code>"basic"</code> Algorithmus</a> und ein implementierungsabhängiger <code>"best fit"</code> Algorithmus.</p>
+
+ <dl>
+  <dt><code>weekday</code></dt>
+  <dd>Die Repräsentation der Wochentage. Mögliche Werte sind <code>"narrow"</code>, <code>"short"</code> und <code>"long"</code>.</dd>
+  <dt><code>era</code></dt>
+  <dd>Die Repräsentation der Epoche. Mögliche Werte sind <code>"narrow"</code>, <code>"short"</code> und <code>"long"</code>.</dd>
+  <dt><code>year</code></dt>
+  <dd>Die Repräsentation des Jahres. Mögliche Werte sind <code>"numeric"</code> und <code>"2-digit"</code>.</dd>
+  <dt><code>month</code></dt>
+  <dd>Die Repräsentation des Monats. Mögliche Werte sind <code>"numeric"</code>, <code>"2-digit"</code>, <code>"narrow"</code>, <code>"short"</code> und <code>"long"</code>.</dd>
+  <dt><code>day</code></dt>
+  <dd>Die Repräsentation des Tages. Mögliche Werte sind <code>"numeric"</code> und <code>"2-digit"</code>.</dd>
+  <dt><code>hour</code></dt>
+  <dd>Die Repräsentation der Stunden. Mögliche Werte sind <code>"numeric"</code> und <code>"2-digit"</code>.</dd>
+  <dt><code>minute</code></dt>
+  <dd>Die Repräsentation der Minuten. Mögliche Werte sind <code>"numeric"</code> und <code>"2-digit"</code>.</dd>
+  <dt><code>second</code></dt>
+  <dd>Die Repräsentation der Sekunden. Mögliche Werte sind <code>"numeric"</code> und <code>"2-digit"</code>.</dd>
+  <dt><code>timeZoneName</code></dt>
+  <dd>Die Repräsentation des Zeitzonennamens. Mögliche Werte sind <code>"short"</code> und <code>"long"</code>.</dd>
+ </dl>
+
+ <p class="noinclude">Die Standardwerte für jede Datums-Zeit-Komponente ist {{jsxref("undefined")}}, wenn jedoch alle Komponenten {{jsxref("undefined")}} sind, wird <code>year</code>, <code>month</code>, and <code>day</code> als <code>"numeric"</code> angenommen.</p>
+ </dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<h3 id="Eigenschaften">Eigenschaften</h3>
+
+<dl>
+ <dt>{{jsxref("DateTimeFormat.prototype", "Intl.DateTimeFormat.prototype")}}</dt>
+ <dd>Ermögliche es Eigenschaften und Methoden für alle Objekte zu definieren.</dd>
+</dl>
+
+<h3 id="Methoden">Methoden</h3>
+
+<dl>
+ <dt>{{jsxref("DateTimeFormat.supportedLocalesOf", "Intl.DateTimeFormat.supportedLocalesOf()")}}</dt>
+ <dd>Gibt ein Array an Sprachen zurück, die unterstützt werden, ohne dass auf den Laufzeitumgebungsstandard zurückgegriffen wird.</dd>
+</dl>
+
+<h2 id="DateTimeFormat_Instanzen"><code>DateTimeFormat</code> Instanzen</h2>
+
+<h3 id="Eigenschaften_2">Eigenschaften</h3>
+
+<p><code>DateTimeFormat</code> Instanzen erben die folgenden Eigenschaften von ihrem Prototypen:</p>
+
+<div>{{page("/de/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/prototype", "Eigenschaften")}}</div>
+
+<h3 id="Methoden_2">Methoden</h3>
+
+<p><code>DateTimeFormat</code> Instanzen erben die folgenden Methoden von ihrem Prototypen:</p>
+
+<div>{{page('/de/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/prototype', 'Methoden')}}</div>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_DateTimeFormat">Einsatz von <code>DateTimeFormat</code></h3>
+
+<p>Der Basiseinsatz ohne extra Sprach- und Formatierungsoptionen, sondern den Standardeinstellungen.</p>
+
+<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// toLocaleString ohne Argumente ist von der implementierunge,
+// der Standardsprache und der Standardzeitzone abhängig.
+console.log(new Intl.DateTimeFormat().format(date));
+// → "12/19/2012" wenn das Gebiet en-US mit der Zeitzone America/Los_Angeles (UTC-0800) der Standard ist.
+</pre>
+
+<h3 id="Einsatz_von_locales">Einsatz von <code>locales</code></h3>
+
+<p>Das folgende Beispiel zeigt verschiedene Formatierungsoptionen von Datums- und Zeitformaten. Um sicherzustellen, dass das Format der Sprache eingesetzt wird, die in der Benutzerschnittstelle benutzt wird, muss diese (und mögliche Rückfallsprachen) mit dem <code>locales</code> Argument eingestellt werden.</p>
+
+<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// Die folgenden Formate setzen die Zeitzone America/Los_Angeles
+// für die Sprache US voraus.
+
+// US englisch: Monat-Tag-Jahr
+console.log(new Intl.DateTimeFormat('en-US').format(date));
+// → "12/19/2012"
+
+// Britisch englisch: Tag-Monat-Jahr
+console.log(new Intl.DateTimeFormat('en-GB').format(date));
+// → "20/12/2012"
+
+// Koreanisch: Jahr-Monat-Tag
+console.log(new Intl.DateTimeFormat('ko-KR').format(date));
+// → "2012. 12. 20."
+
+// Arabisch: In den meisten arabischen Ländern werden arabische Ziffern genutzt
+console.log(new Intl.DateTimeFormat('ar-EG').format(date));
+// → "<span dir="rtl">٢٠‏/١٢‏/٢٠١٢</span>"
+
+// Japanisch: In Japan wird der japanische Kalender eingesetzt:
+// 2012 ist in diesem das Jahr 24 der Heisei Ära.
+console.log(new Intl.DateTimeFormat('ja-JP-u-ca-japanese').format(date));
+// → "24/12/20"
+
+// Einsatz von Sprachen, die vielleicht nicht unterstützt werden:
+// Balinesisch, und Indonesisch als Rückfallsprache.
+console.log(new Intl.DateTimeFormat(['ban', 'id']).format(date));
+// → "20/12/2012"
+</pre>
+
+<h3 id="Einsatz_von_options">Einsatz von <code>options</code></h3>
+
+<p>Das Datums- und Zeitformat kann mit dem Einsatz des <code>options</code> Arguments vom Benutzer definiert werden.</p>
+
+<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// Langer Wochentag mit langem Datum
+var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+console.log(new Intl.DateTimeFormat('de-DE', options).format(date));
+// → "Donnerstag, 20. Dezember 2012"
+
+// sichtbares UTC
+options.timeZone = 'UTC';
+options.timeZoneName = 'short';
+console.log(new Intl.DateTimeFormat('en-US', options).format(date));
+// → "Thursday, December 20, 2012, GMT"
+
+// Präzisere Angaben der Zeit
+options = {
+  hour: 'numeric', minute: 'numeric', second: 'numeric',
+  timeZone: 'Australia/Sydney',
+  timeZoneName: 'short'
+};
+console.log(new Intl.DateTimeFormat('en-AU', options).format(date));
+// → "2:00:00 pm AEDT"
+
+// 24-Stunden Angabe in US Zeiten
+options = {
+  year: 'numeric', month: 'numeric', day: 'numeric',
+  hour: 'numeric', minute: 'numeric', second: 'numeric',
+  hour12: false,
+  timeZone: 'America/Los_Angeles'
+};
+console.log(new Intl.DateTimeFormat('en-US', options).format(date));
+// → "12/19/2012, 19:00:00"
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-12.1', 'Intl.DateTimeFormat')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-12.1', 'Intl.DateTimeFormat')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#datetimeformat-objects', 'Intl.DateTimeFormat')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Intl.DateTimeFormat")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<div>{{page('/de/docs/Web/JavaScript/Reference/Global_Objects/Intl', 'See_also')}}</div>
diff --git a/files/de/web/javascript/reference/global_objects/intl/datetimeformat/prototype/index.html b/files/de/web/javascript/reference/global_objects/intl/datetimeformat/prototype/index.html
new file mode 100644
index 0000000000..98f5e8f57b
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/intl/datetimeformat/prototype/index.html
@@ -0,0 +1,83 @@
+---
+title: Intl.DateTimeFormat.prototype
+slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype
+tags:
+  - DateTimeFormat
+  - Internationalization
+  - JavaScript
+  - Property
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
+---
+<div>{{JSRef}}</div>
+
+<div>Die <strong><code>Intl.DateTimeFormat.prototype</code></strong> Eigenschaft ist ein Prototyp Objekt für den {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} Konstruktor.</div>
+
+<div> </div>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Für eine Beschreibung von <code>Intl.DateTimeFormat</code> Instanzen siehe im Artikel {{jsxref("DateTimeFormat")}} nach.</p>
+
+<p>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} Instanzen erben von <code>Intl.DateTimeFormat.prototype</code>. Änderungen in der Eigenschaft <code>prototype</code> wirken sich auf alle Instanzen von {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} aus.</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt><code>Intl.DateTimeFormat.prototype.constructor</code></dt>
+ <dd>Eine Referenz zu {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}.</dd>
+ <dt>{{jsxref("DateTimeFormat.format", "Intl.DateTimeFormat.prototype.format")}}</dt>
+ <dd>Getter, der eine Funktion, die für das Formatieren von Datums- und Zeitangaben nach den Optionen des {{jsxref("DateTimeFormat", "DateTimeFormat")}} ermöglicht, wird zurückgegeben.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<dl>
+ <dt>{{jsxref("DateTimeFormat.formatToParts", "Intl.DateTimeFormat.prototype.formatToParts()")}}</dt>
+ <dd>Gibt ein {{jsxref("Array")}} von Objekten zurück, die den formatierten String in Teilen repräsentiert. Das kann eingesetzt werden, um ein benutzerdefiniertes Format zu erstellen.</dd>
+ <dt>{{jsxref("DateTimeFormat.resolvedOptions", "Intl.DateTimeFormat.prototype.resolvedOptions()")}}</dt>
+ <dd>Gibt ein neues Objekt mit den Eigenschaften der Sprache und des Formates zum Erstellungszeitpunkt des Objektes zurück.</dd>
+</dl>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-12.2.1', 'Intl.DateTimeFormat.prototype')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-12.2.1', 'Intl.DateTimeFormat.prototype')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.prototype', 'Intl.DateTimeFormat.prototype')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Intl.DateTimeFormat.prototype")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.html b/files/de/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.html
new file mode 100644
index 0000000000..a1403f9a7b
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.html
@@ -0,0 +1,107 @@
+---
+title: Intl.DateTimeFormat.prototype.resolvedOptions()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions
+tags:
+  - DateTimeFormat
+  - Internationalization
+  - JavaScript
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Intl.DateTimeFormat.prototype.resolvedOptions()</code></strong> Methode gibt ein Objekt mit den Eigenschaften zum Gebiet und der Datums- und Zeitformatierung zurück, die beim der Initialisierung eines {{jsxref("DateTimeFormat", "DateTimeFormat")}} Objektes berechnet werden.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-resolvedoptions.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateTimeFormat</var>.resolvedOptions()</code></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein neues Objekt mit den Eigenschaften zum Gebiet und der Datums- und Zeitformatierung, die beim der Initialisierung eines {{jsxref("DateTimeFormat", "DateTimeFormat")}} Objektes berechnet werden.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Das resultierende Objekt hat die folgenden Eigenschaften:</p>
+
+<dl>
+ <dt><code>locale</code></dt>
+ <dd>Der BCP 47 Sprach-Tag für die genutzte Sprache. Wenn Unicode-Erweiterungen im BCP 47 Sprach-Tag enthalten waren, die für die Sprache unterstützt werden, sind die Unterstützen Schlüssel-Werte-Paare in <code>locale</code> enthalten.</dd>
+ <dt><code>calendar</code></dt>
+ <dt><code>numberingSystem</code></dt>
+ <dd>Dieser Wert wird durch die Unicode-Erweiterungsschlüssel <code>"ca"</code> und <code>"nu"</code> oder mit einem Standardwert gefüllt.</dd>
+ <dt><code>timeZone</code></dt>
+ <dd>Die Wert für die Unterstützen Eigenschaft im <code>options</code> Argument; {{jsxref("undefined")}} (entspricht der Standard-Zeitzone der Laufzeitumgebung), wenn keine verwendet wird. Warnung: Anwendungen sollten nicht auf den Rückgabewert {{jsxref("undefined")}} programmiert sein, weil es in zukünftigen Versionen sein kann, dass ein {{jsxref("String")}} zurückgegeben wird, der die Standard-Zeitzone der Laufzeitumgebung identifiziert.</dd>
+ <dt><code>hour12</code></dt>
+ <dd>Der Wert der verwendeten Eigenschaft im <code>options</code> Argument oder ein Standard-Wert.</dd>
+ <dt><code>weekday</code></dt>
+ <dt><code>era</code></dt>
+ <dt><code>year</code></dt>
+ <dt><code>month</code></dt>
+ <dt><code>day</code></dt>
+ <dt><code>hour</code></dt>
+ <dt><code>minute</code></dt>
+ <dt><code>second</code></dt>
+ <dt><code>timeZoneName</code></dt>
+ <dd>Die Werte resultieren von den Eigenschaften in dem <code>options</code> Argument und den möglichen Kombinationen und Repräsentationen der Datums- und Zeitformatierung aus der ausgewählte Sprache. Einige der Eigenschaften können auch fehlen, was bedeutet, dass die Komponenten nicht in der formatierten Ausgabe enthalten sind.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_der_resolvedOptions_Methode">Einsatz der <code>resolvedOptions</code> Methode</h3>
+
+<pre class="brush: js">var germanFakeRegion = new Intl.DateTimeFormat('de-XX', { timeZone: 'UTC' });
+var usedOptions = germanFakeRegion.resolvedOptions();
+
+usedOptions.locale;          // "de"
+usedOptions.calendar;        // "gregory"
+usedOptions.numberingSystem; // "latn"
+usedOptions.timeZone;        // "UTC"
+usedOptions.month;           // "numeric"
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-12.3.3', 'Intl.DateTimeFormat.prototype.resolvedOptions')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-Intl.DateTimeFormat.prototype.resolvedOptions', 'Intl.DateTimeFormat.prototype.resolvedOptions')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.prototype.resolvedOptions', 'Intl.DateTimeFormat.prototype.resolvedOptions')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Intl.DateTimeFormat.resolvedOptions")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.html b/files/de/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.html
new file mode 100644
index 0000000000..722b372745
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.html
@@ -0,0 +1,99 @@
+---
+title: Intl.DateTimeFormat.supportedLocalesOf()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/supportedLocalesOf
+tags:
+  - DateTimeFormat
+  - Internationalization
+  - JavaScript
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/supportedLocalesOf
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Intl.DateTimeFormat.supportedLocalesOf()</code></strong> Methode gibt ein Array zurück, welches die Gebiete enthält, die die Datums- und Zeitformatierung unterstützen, ohne das auf das Laufzeitstandardgebeit zurückgegriffen werden muss.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-supportedlocalesof.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Intl.DateTimeFormat.supportedLocalesOf(<var>locales</var>[, <var>options</var>])</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>locales</code></dt>
+ <dd>Ein String mit einem BCP 47 Sprachtag, oder ein Array von solchen Strings. Für die generelle Form des <code>locales</code> Arguments siehe die {{jsxref("Intl", "Intl Seite", "#Gebietsidentifikation_und_-verhandlung", 1)}}.</dd>
+ <dt><code>options</code></dt>
+ <dd>
+ <p>Optional. Ein Objekt, welches die folgende Eigenschaft haben kann:</p>
+
+ <dl>
+  <dt><code>localeMatcher</code></dt>
+  <dd>Der Auswahlalgorithmus des Gebietes. Mögliche Werte sind <code>"lookup"</code> und <code>"best fit"</code>; der Standard ist <code>"best fit"</code>. Für mehr Information über diese Option siehe auf der {{jsxref("Intl", "Intl Seite", "#Gebietsauswahl", 1)}}.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Gibt ein Array zurück, welches eine Untermenge der gegebenen Gebiete enthält, für die die Datums- und Zeitformatierung unterstützen wird, ohne das auf das Laufzeitstandardgebeit zurückgegriffen werden muss.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Gibt ein Array zurück, welches eine Untermenge der gegebenen Gebiete (<code>locales</code>) enthält. Die Sprachtags, die zurückgegeben werden, unterstützen Datums- und Zeitformatierungen für das entsprechende Gebiet, ohne auf den Systemstandard zurückgreifen zu müssen.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_supportedLocalesOf">Einsatz von <code>supportedLocalesOf</code></h3>
+
+<p>Angenommen wird, dass indonesische und deutsche Datums- und Zeitformatierung unterstützt wird, aber balinesisch nicht. <code>supportedLocalesOf</code> gibt das indonesische und deutsche Sprachtag unverändert zurück, obwohl Pinyin nicht mit Indonesisch verwendet wird und Fachdeutsch wahrscheinlich nicht für Indonesisch verfügbar ist. Zu bemerken ist, dass der <code>"lookup"</code> Algorithmus verwendet wird — der<code>"best-fit"</code> Algorithmus könnte entscheiden, dass Indonesisch eine angemessene Ergänzung für Balinesen ist, da die meisten Balinesen Indonesisch verstehen und daher auch das balinesische Sprachtag zurückgeben.</p>
+
+<pre class="brush: js">var locales = ['ban', 'id-u-co-pinyin', 'de-ID'];
+var options = { localeMatcher: 'lookup' };
+console.log(Intl.DateTimeFormat.supportedLocalesOf(locales, options).join(', '));
+// → "id-u-co-pinyin, de-ID"
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-12.2.2', 'Intl.DateTimeFormat.supportedLocalesOf')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-12.2.2', 'Intl.DateTimeFormat.supportedLocalesOf')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.supportedLocalesOf', 'Intl.DateTimeFormat.supportedLocalesOf')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Intl.DateTimeFormat.supportedLocalesOf")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/intl/getcanonicallocales/index.html b/files/de/web/javascript/reference/global_objects/intl/getcanonicallocales/index.html
new file mode 100644
index 0000000000..0913ad7a6e
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/intl/getcanonicallocales/index.html
@@ -0,0 +1,74 @@
+---
+title: Intl.getCanonicalLocales()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/getCanonicalLocales
+tags:
+  - Internationalization
+  - Intl
+  - JavaScript
+  - Method
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/getCanonicalLocales
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Intl.getCanonicalLocales()</code></strong> Methode gibt ein Array mit den anerkannten Gebietsnamen zurück. Duplikate werden verhindert und Elemente werden auf valide Sprach-Tag-Struktur geprüft.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/intl-getcanonicallocales.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Intl.getCanonicalLocales(locales)</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>locales</code></dt>
+ <dd>Eine List von {{jsxref("String")}} Werten, von welchen die anerkannten Gebietsnamen gesucht werden.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein Array mit den anerkannten Gebietsnamen.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js">Intl.getCanonicalLocales('EN-US'); // ["en-US"]
+Intl.getCanonicalLocales(['EN-US', 'Fr']); // ["en-US", "fr"]
+
+Intl.getCanonicalLocales('EN_US');
+// RangeError:'EN_US' is not a structurally valid language tag
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-intl.getcanonicallocales', 'Intl.getCanonicalLocales')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td>Initiale Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Intl.getCanonicalLocales")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("NumberFormat.supportedLocalesOf", "Intl.NumberFormat.supportedLocalesOf()")}}</li>
+ <li>{{jsxref("DateTimeFormat.supportedLocalesOf", "Intl.DateTimeFormat.supportedLocalesOf()")}}</li>
+ <li>{{jsxref("Collator.supportedLocalesOf", "Intl.Collator.supportedLocalesOf()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/intl/index.html b/files/de/web/javascript/reference/global_objects/intl/index.html
new file mode 100644
index 0000000000..50567a9913
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/intl/index.html
@@ -0,0 +1,129 @@
+---
+title: Intl
+slug: Web/JavaScript/Reference/Global_Objects/Intl
+tags:
+  - Internationalization
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl
+---
+<div>{{JSRef}}</div>
+
+<p>Das <strong><code>Intl</code></strong> Objekt ist der Namensraum für die ECMAScript Internationalisierungs API, welche sprachenabhängige Stringvergleiche, Zahlenformate und Datums bzw. Zeitformate unterstützt. Der Konstruktoren für {{jsxref("Collator")}}, {{jsxref("NumberFormat")}} und {{jsxref("DateTimeFormat")}} Objekte sind Eigenschaften des <code>Intl</code> Objektes. <span id="result_box" lang="de"><span>Diese Seite dokumentiert diese Eigenschaften sowie die Funktionalität, die in Internationalisierungskonstruktoren und anderen sprachsensitiven Funktionen gemeinsam sind.</span></span></p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt>{{jsxref("Global_Objects/Collator", "Intl.Collator")}}</dt>
+ <dd>Konstruktor für Collatoren, Objekte mit sprachsensitiven Stringvergleichen.</dd>
+ <dt>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</dt>
+ <dd>Konstruktor für Objekte, die Daten und Zeiten sprachsensitiv formatieren.</dd>
+ <dt>{{jsxref("Global_Objects/NumberFormat", "Intl.NumberFormat")}}</dt>
+ <dd>Konstruktor für Objekte, die Zahlen sprachsensitiv formatieren.</dd>
+ <dt>{{jsxref("Global_Objects/PluralRules", "Intl.PluralRules")}}</dt>
+ <dd>Konstruktor für Objekte, die mit Pluralsprachregeln pluralsensitiv formatieren kann.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<dl>
+ <dt>{{jsxref("Intl.getCanonicalLocales()")}}</dt>
+ <dd>Eine Methode, die den kanonischen Gebietsnamen zurückgibt.</dd>
+</dl>
+
+<h2 id="Gebietsidentifikation_und_-verhandlung">Gebietsidentifikation und -verhandlung</h2>
+
+<p>Die Internationalisierungskonstruktoren genauso wie viele sprachsensitive Methoden von anderen Konstruktoren (aufgelistet unter {{anch("Siehe auch", "Siehe auch")}}) benutzten übliche Muster für die Identifizierung von Gebieten und der Feststellung des aktuellen Gebietes: Alle diese akzeptieren <code>locales</code> und <code>options</code> Parameter und verhandeln ein Gebiet aus den gesendeten Gebieten und den Lokal unterstützen Gebieten mithilfe eines Speziellen Algorithmus in der Eigenschaft <code>options.localeMatcher</code> aus.</p>
+
+<h3 id="locales_Argument"><code>locales</code> Argument</h3>
+
+<p>Das <code>locales</code> Argument muss entweder ein String sein, der einen <a href="http://tools.ietf.org/html/rfc5646">BCP 47 Sprachcode</a> enthält, oder ein Array mit solche Sprachcodes. Wenn dieses Argument nicht unterstützt ist oder <code>undefined</code> ist, wird das lokale Standardgebiet benutzt.</p>
+
+<p><span id="result_box" lang="de"><span>Ein BCP 47-Sprachcode definiert eine Sprache und enthält minimal einen primären Sprachcode</span></span>. <span id="result_box" lang="de"><span>In seiner gebräuchlichsten Form kann er folgender Reihenfolge enthalten: einen Sprachcode, einen Skriptcode und einen Länder- oder Regionscode, alle getrennt durch Bindestriche.</span></span> Weil diese Codes unabhängig von Groß- und Kleinschreibung ist, ist es empfohlen bei Skriptcodes den ersten Buchstaben groß zuschreiben, bei Länder- und Regionscodes soll alles groß geschrieben werden und der Rest soll klein geschreiben werden.</p>
+
+<p>Beispiele:</p>
+
+<ul>
+ <li><code>"hi"</code>: Hindi (primäre Sprache).</li>
+ <li><code>"de-AT"</code>: Deutsch wie es in Österreich genutzt wird (primäre Sprache mit Ländercode).</li>
+ <li><code>"zh-Hans-CN"</code>: Chinesisch geschrieben mit speziellen Zeichen, wie es in China genutzt wird (Primäre Sprache mit Skript- und Ländercode).</li>
+</ul>
+
+<p>Die Subcodes zum identifizieren von Sprachen, Skripten, Ländern (Regionen) und (selten genutzen) Varianten in BCP 47 Sprachcodes können im <a href="http://www.iana.org/assignments/language-subtag-registry">IANA Sprach Subtag Register</a> gefunden werden.</p>
+
+<p>BCP 47 erlaubt sogar Erweiterungen. JavaScript Internationalisierungsfunktionen benutzen die <code>"u"</code> (Unicode) Erweiterung, welche es ermöglicht benutzerdefinierte Änderungen in {{jsxref("Collator")}}, {{jsxref("NumberFormat")}} oder {{jsxref("DateTimeFormat")}} einzubringen. Beispiele:</p>
+
+<ul>
+ <li><code>"de-DE-u-co-phonebk"</code>: Benutzt die Telefonbuch-Variante der deutschen Sortierreihenfolge, welche Umlaute zu Paaren übersetzt: ä → ae, ö → oe, ü → ue.</li>
+ <li><code>"th-TH-u-nu-thai"</code>: Benutzt Thei-Zeichen(๐, ๑, ๒, ๓, ๔, ๕, ๖, ๗, ๘, ๙) im Nummernformat.</li>
+ <li><code>"ja-JP-u-ca-japanese"</code>: Benutzt den Japanischen Kalender für Datums- und Zeitformate, so dass 2013 als Jahr 25 der Heisei Periode ist oder 平成25.</li>
+ <li><code>"en-GB-u-ca-islamic"</code>: Benutzt Britisches Englisch mit dem Islamic (Hijri) Kalender, indem das gregorianische Datum 14. Oktober 2017 das Hijri Datum 24 Muharram, 1439 ist.</li>
+</ul>
+
+<h3 id="Gebietsauswahl">Gebietsauswahl</h3>
+
+<p>Das <code>locales</code> Argument wird als priorisierte Angabe für die Applikation interpretiert, nach dem alle Unicode-Erweiterungen durchführt wurden. Zur Laufzeut wird gegeben verfügbare Gebiete verglichen und das am besten passende genommen. Es existieren zwei Algorithmen für die Auswahl: die <code>"lookup"</code> Auswahl, die dem im <a href="http://tools.ietf.org/html/rfc4647#section-3.4">BCP 47</a> spezifizierten Algorithmus folgt; die <code>"best fit"</code> Auswahl, bei dem die Laufzeigumgebung mindestens einen gleichgutes Ergebnis wie der Lookup Algorithmus erzielt, wenn nicht sogar einen besseren. Wenn die Applikation kein <code>locales</code> Argument unterstützt oder die Laufzeit kein Gebiet hat, welches passt, dann wird das Standardgebiet der Laufzeitumgebung werdendet. Das Algorithmus zur Auswahl kann über das <code>options</code> Argument ausgewählt werden (siehe unten).</p>
+
+<p>Wenn der ausgewählte Sprache-Tag eine Unicode Erweiterung hat, wird diese genutzt, um das erstellte Objekte oder das Verhalten der Funktion anzupassen. Jeder Konstruktor oder jede Funktion unterstützt nur eine Untermenge der als Unicode Erweiterungen definierten Schlüssel und die unterstützen Werte sind meistens von Sprach-Tag abhängig. Zum Beispiel ist der <code>"co"</code> Schlüssel (collation) nur in {{jsxref("Collator")}} unterstützt und der <code>"phonebk"</code> Wert ist nur im Deutschen unterstützt.</p>
+
+<h3 id="options_Argument"><code>options</code> Argument</h3>
+
+<p>Das <code>options</code> Argument muss ein Objekt mit Eigenschaften sein, welche vom Konstruktor und der Funktion abhängen. Wenn das <code>options</code> Argument nicht unterstützt wird oder <code>undefined</code> ist, werden Standardwerte für alle Eigenschaften benutzt.</p>
+
+<p>Eine Eigenschaft ist in allen sprachensensitiven Konstruktoren und Funktionen forhanden: Die <code>localeMatcher</code> Eigenschaft, die vom Datentyp String ist und den Wert <code>"lookup"</code> oder <code>"best fit"</code> hat, welche den Algorithmus für die Auswahl des Gebietes beschreiben (siehe oben).</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-8', 'Intl')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-8', 'Intl')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#intl-object', 'Intl')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td>Intl.getCanonicalLocales in the 4. Auflage hinzugefügt.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Intl")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Einführung: <a href="http://norbertlindenberg.com/2012/12/ecmascript-internationalization-api/index.html">The ECMAScript Internationalization API</a></li>
+ <li>Konstruktoren
+  <ul>
+   <li>{{jsxref("Collator", "Intl.Collator")}}</li>
+   <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+   <li>{{jsxref("NumberFormat", "Intl.NumberFormat")}}</li>
+  </ul>
+ </li>
+ <li>Methoden
+  <ul>
+   <li>{{jsxref("String.prototype.localeCompare()")}}</li>
+   <li>{{jsxref("Number.prototype.toLocaleString()")}}</li>
+   <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
+   <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
+   <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/intl/numberformat/format/index.html b/files/de/web/javascript/reference/global_objects/intl/numberformat/format/index.html
new file mode 100644
index 0000000000..4d42272e9c
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/intl/numberformat/format/index.html
@@ -0,0 +1,98 @@
+---
+title: Intl.NumberFormat.prototype.format
+slug: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/format
+tags:
+  - Internationalization
+  - JavaScript
+  - NumberFormat
+  - Property
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/format
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Intl.NumberFormat.prototype.format</code></strong> Eigenschaft gibt eine Getterfunktion zurück, die eine Zahl nach den Sprach- und Formatierungsoptionen dieses {{jsxref("NumberFormat")}} Objektes formatiert.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/intl-numberformat-prototype-format.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>numberFormat</var>.format(<var>number</var>)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>number</code></dt>
+ <dd>Zahl, die formatiert werden soll.</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die Funktion, die von <code>format</code> Getter zurückgegeben wird, formatiert eine Zahl in einen String nach den angegebenen Sprach- und Formatierungsoptionen des {{jsxref("NumberFormat")}} Objektes.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_format">Einsatz von <code>format</code></h3>
+
+<p>Einsatz der vom <code>format</code> Getter zurückgegebenen Funktion zum Formatieren eines Währungswertes, hier für Russland:</p>
+
+<pre class="brush: js">var options = { style: 'currency', currency: 'RUB' };
+var numberFormat = new Intl.NumberFormat('ru-RU', options);
+console.log(numberFormat.format(654321.987));
+// → "654 321,99 руб."
+</pre>
+
+<h3 id="Einsatz_format_mit_map">Einsatz <code>format</code> mit <code>map</code></h3>
+
+<p>Einsatz der vom <code>format</code> Getter zurückgegebenen Funktion zum Formatieren von allen Zahlen in einem Array. Zu bemerken ist, dass die Funktion an das {{jsxref("NumberFormat")}} Objekt gebunden ist, von dem sie stammt, so dass es direkt in {{jsxref("Array.prototype.map")}} verwendet werden kann.</p>
+
+<pre class="brush: js">var a = [123456.789, 987654.321, 456789.123];
+var numberFormat = new Intl.NumberFormat('es-ES');
+var formatted = a.map(numberFormat.format);
+console.log(formatted.join('; '));
+// → "123.456,789; 987.654,321; 456.789,123"
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Komment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-11.3.2', 'Intl.NumberFormat.prototype.format')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-11.3.2', 'Intl.NumberFormat.prototype.format')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.prototype.format', 'Intl.NumberFormat.prototype.format')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Intl.NumberFormat.format")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("NumberFormat", "Intl.NumberFormat")}}</li>
+ <li>{{jsxref("Number.prototype.toLocaleString()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/intl/numberformat/index.html b/files/de/web/javascript/reference/global_objects/intl/numberformat/index.html
new file mode 100644
index 0000000000..b2881e081d
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/intl/numberformat/index.html
@@ -0,0 +1,195 @@
+---
+title: Intl.NumberFormat
+slug: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+tags:
+  - Internationalization
+  - JavaScript
+  - NumberFormat
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+---
+<div>{{JSRef}}</div>
+
+<p>Das <strong><code>Intl.NumberFormat</code></strong> Objekt ist ein Konstruktor für Objekte, die sprachabhängige Zahlenformatierungen nutzen.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/intl-numberformat.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>new Intl.NumberFormat([<var>locales</var>[, <var>options</var>]])
+Intl.NumberFormat.call(<var>this</var>[, <var>locales</var>[, <var>options</var>]])
+</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>locales</code></dt>
+ <dd>Optional. Ein String mit einem BCP 47 Sprachcode, oder ein Array mit solchen Strings. Für die generelle Form und Interpretation des <code>locales</code> Arguments siehe im {{jsxref("Intl", "Intl Artikel", "#Locale_identification_and_negotiation", 1)}}. Die folgenden Unicode Erweiterungsschlüssel sind erlaubt:</dd>
+ <dd>
+ <dl>
+  <dt><code>nu</code></dt>
+  <dd>Das einzusetzende Nummerierungssystem. Mögliche Wert sind:<code> "arab"</code>, <code>"arabext"</code>, <code>"bali"</code>, <code>"beng"</code>, <code>"deva"</code>, <code>"fullwide"</code>, <code>"gujr"</code>, <code>"guru"</code>, <code>"hanidec"</code>, <code>"khmr"</code>, <code>"knda"</code>, <code>"laoo"</code>, <code>"latn"</code>, <code>"limb"</code>, <code>"mlym"</code>, <code>"mong"</code>, <code>"mymr"</code>, <code>"orya"</code>, <code>"tamldec"</code>, <code>"telu"</code>, <code>"thai"</code>, <code>"tibt"</code>.</dd>
+ </dl>
+ </dd>
+ <dt><code>options</code></dt>
+ <dd>
+ <p>Optional. Ein Objekt mit einigen oder allen der folgenden Eigenschaften:</p>
+
+ <dl>
+  <dt><code>localeMatcher</code></dt>
+  <dd>Der Spracherkennungsalgorithmus. Mögliche Werte sind <code>"lookup"</code> und <code>"best fit"</code>. Der Standardwert ist <code>"best fit"</code>. Für mehr Informationen siehe in den {{jsxref("Intl", "Intl Artikel", "#Locale_negotiation", 1)}}.</dd>
+  <dt><code>style</code></dt>
+  <dd>Der einzusetzende Formatierungsstil. Mögliche Werte sind <code>"decimal"</code> für einfache Zahlenformate, <code>"currency"</code> für Währungen, <code>"percent"</code> für Prozentzahlen. Der Standardwert ist <code>"decimal"</code>.</dd>
+  <dt><code>currency</code></dt>
+  <dd>Die bei der Währungsformatierung einzusetzende Währung. Mögliche Werte sind die ISO 4217 Währungscodes wie zum Beispiel <code>"USD"</code> für US Dollar, <code>"EUR"</code> für Euro und <code>"CNY"</code> für Chinesischen RMB (siehe <a href="http://www.currency-iso.org/en/home/tables/table-a1.html">Current currency &amp; funds code list</a>). Es gibt keinen Standardwert. Wenn <code>style</code> auf <code>"currency"</code> gesetzt ist, muss die <code>currency</code> Eigenschaft gesetzt werden.</dd>
+  <dt><code>currencyDisplay</code></dt>
+  <dd>Währungsanzeige im String. Mögliche Werte sind <code>"symbol"</code> für lokalisierte Währungssymbole wie zum Beispiel €, <code>"code"</code> für ISO Währungscodes, <code>"name"</code> für den Namen der Währung wie zum Beispiel <code>"dollar"</code>. Der Standardwert ist <code>"symbol"</code>.</dd>
+  <dt><code>useGrouping</code></dt>
+  <dd>Gruppierung der Zahl. Wird für das Ein- und Ausschalten der Tausendertrenner oder thousand/lakh/crore-Trenner eingesetzt. Mögliche Werte sind <code>true</code> und <code>false</code>. Der Standardwert ist <code>true</code>.</dd>
+ </dl>
+
+ <p>Die folgenden Eingeschaften fallen in zwei Gruppen: <code>minimumIntegerDigits</code>, <code>minimumFractionDigits</code>, und <code>maximumFractionDigits</code> in einer Gruppe, <code>minimumSignificantDigits</code> und <code>maximumSignificantDigits</code> in der anderen. Wenn nur eine Eigenschaft der zweiten Gruppe genutzt wird, wird die erste Gruppe ignoriert.</p>
+
+ <dl>
+  <dt><code>minimumIntegerDigits</code></dt>
+  <dd>Die minimale Anzahl von Ganzzahl Ziffern. Mögliche Werte sind zwischen 1 und 21. Der Standardwert ist 1.</dd>
+  <dt><code>minimumFractionDigits</code></dt>
+  <dd>Die minimale Anzahl von Nachkommastellen. Mögliche Werte sind zwischen 0 und 20. Der Standardwert für Zahlen und Prozentzahlen ist 0. Der Standard für Währungen ist die Anzahl der Stellen für die Untereinheit der Währung, die eingesetzt wird (<a href="http://www.currency-iso.org/en/home/tables/table-a1.html">ISO 4217 currency code list</a>) oder 2, wenn die Währung nicht unterstützt wird.</dd>
+  <dt><code>maximumFractionDigits</code></dt>
+  <dd>Die Maximale Anzahl von Nachkommastellen. Mögliche Werte sind zwischen 0 und 20. Der Standardwert für einfache Zahlen ist die größere Zahl von <code>minimumFractionDigits</code> und <code>3</code>. Der Standardwert für Währungen ist der größere von <code>minimumFractionDigits</code> und der Anzahl der Stellen für die Untereinheit der Währung oder 2 wenn die Währung nicht unterstützt wird. Der Standardwert für Prozentzahlen ist die größere Zahl von <code>minimumFractionDigits</code> und <code>0</code>.</dd>
+  <dt><code>minimumSignificantDigits</code></dt>
+  <dd>Die minimale Anzahl von signifikanten Stellen. Mögliche Werte sind zwischen 1 und 21. Der Standardwert ist 1.</dd>
+  <dt><code>maximumSignificantDigits</code></dt>
+  <dd>Die maximale Anzahl von signifikanten Stellen. Mögliche Werte sind zwischen 1 und 21. Der Standardwert ist <code>minimumSignificantDigits</code>.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<h3 id="Eigenschaften">Eigenschaften</h3>
+
+<dl>
+ <dt>{{jsxref("NumberFormat.prototype", "Intl.NumberFormat.prototype")}}</dt>
+ <dd>Erlaubt das Hinzufügen von Eigenschaften zu allen Objekten.</dd>
+</dl>
+
+<h3 id="Methoden">Methoden</h3>
+
+<dl>
+ <dt>{{jsxref("NumberFormat.supportedLocalesOf", "Intl.NumberFormat.supportedLocalesOf()")}}</dt>
+ <dd>Gibt ein Array zurück, welches alle Sprachen enthält, die unterstützt werden, ohne auf den Laufzeitstandard zurückzufallen (ohne fallback).</dd>
+</dl>
+
+<h2 id="NumberFormat_Instanzen"><code>NumberFormat</code> Instanzen</h2>
+
+<h3 id="Eigenschaften_2">Eigenschaften</h3>
+
+<p><code>NumberFormat</code> Instanzen erben die folgenden Eigenschaften von ihrem Prototyp:</p>
+
+<div>{{page('/de/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/prototype', 'Eigenschaften')}}</div>
+
+<h3 id="Methoden_2">Methoden</h3>
+
+<p><code>NumberFormat</code> Instanzen erben die folgenden Methoden von ihrem Prototyp:</p>
+
+<div>{{page('/de/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/prototype', 'Methoden')}}</div>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Standardeinsatz">Standardeinsatz</h3>
+
+<p>Beim Einsatz ohne spezifizierte Sprache wird ein formatierter String in der Standardsprache und mit Standardoptionen zurückgegeben:</p>
+
+<pre class="brush: js">var number = 3500;
+
+console.log(new Intl.NumberFormat().format(number));
+// → '3.500' wenn in Deutscher Sprache
+</pre>
+
+<h3 id="Einsatz_von_locales">Einsatz von <code>locales</code></h3>
+
+<p>Diese Beispiel zeigt einige der Variationen lokalisierter Zahlenformate. Um das Format der Sprache zu erhalten, welches in der Anwendung benutzt wird, spezifiziere die Sprache (und mögliche Rückfallsprachen (fallback)) mit dem <code>locales</code> Argument.</p>
+
+<pre class="brush: js">var number = 123456.789;
+
+// Englische Benutzer sehen ein Punkt anstatt eines Kommas als Dezimaltrenner
+console.log(new Intl.NumberFormat('en-GB').format(number));
+// → 123.456,789
+
+// Arabisch ist in den meisten arabisch sprachigen Ländern eingesetzt
+console.log(new Intl.NumberFormat('ar-EG').format(number));
+// → ١٢٣٤٥٦٫٧٨٩
+
+// Indien benutzt Tausendertrennzeichen bei Tausend und allen weiteren <strong>zwei Stellen</strong>
+console.log(new Intl.NumberFormat('en-IN').format(number));
+// → 1,23,456.789
+
+// Chinesisches Zahlensystem
+console.log(new Intl.NumberFormat('zh-Hans-CN-u-nu-hanidec').format(number));
+// → 一二三,四五六.七八九
+
+// Wenn eine Sprache übergeben werden soll, die vielleicht nicht
+// unterstützt wird (Balinesisch), nutze eine fallback Sprache (Indonesisch)
+console.log(new Intl.NumberFormat(['ban', 'id']).format(number));
+// → 123.456,789
+</pre>
+
+<h3 id="Einsatz_von_options">Einsatz von <code>options</code></h3>
+
+<p>Das Ergebnis von <code>toLocaleString</code> kann durch das <code>options</code> Argument angepasst werden.</p>
+
+<pre class="brush: js">var number = 123456.789;
+
+//  Währungsformat
+console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number));
+// → 123.456,79 €
+
+//  Der Japanische Yen hat keine Unterwährung (z. B. Cent)
+console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(number));
+// → ￥123,457
+
+//  Limitiert auf drei signifikante Stellen
+console.log(new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(number));
+// → 1,23,000
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-11.1', 'Intl.NumberFormat')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-11.1', 'Intl.NumberFormat')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#numberformat-objects', 'Intl.NumberFormat')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Intl.NumberFormat")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<p>{{page('/de/docs/Web/JavaScript/Reference/Global_Objects/Intl', 'Siehe auch')}}</p>
diff --git a/files/de/web/javascript/reference/global_objects/intl/numberformat/prototype/index.html b/files/de/web/javascript/reference/global_objects/intl/numberformat/prototype/index.html
new file mode 100644
index 0000000000..aa10caf254
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/intl/numberformat/prototype/index.html
@@ -0,0 +1,81 @@
+---
+title: Intl.NumberFormat.prototype
+slug: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype
+tags:
+  - Internationalization
+  - JavaScript
+  - NumberFormat
+  - Property
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Intl.NumberFormat.prototype</code></strong> Eigenschaft repräsentiert das Prototypobjekt für einen {{jsxref("NumberFormat", "Intl.NumberFormat")}} Konstruktor.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Siehe {{jsxref("NumberFormat")}} für eine Beschreibung von <code>Intl.NumberFormat</code> Instanzen.</p>
+
+<p>{{jsxref("NumberFormat", "Intl.NumberFormat")}} Instanzen erben von <code>Intl.NumberFormat.prototype</code>. Veränderungen am Prototypobjekt werden an alle {{jsxref("NumberFormat", "Intl.NumberFormat")}} Instanzen vererbt.</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt><code>Intl.NumberFormat.prototype.constructor</code></dt>
+ <dd>Eine Referenz zu <code>Intl.NumberFormat</code>.</dd>
+ <dt>{{jsxref("NumberFormat.format", "Intl.NumberFormat.prototype.format")}}</dt>
+ <dd>Getter; gibt eine Funktion zurück, die eine Zahl nach den Sprach- und Formatierungsoptionen dieses {{jsxref("NumberFormat")}} Objektes formatiert.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<dl>
+ <dt>{{jsxref("NumberFormat.formatToParts", "Intl.NumberFormat.prototype.formatToParts()")}}</dt>
+ <dd>Gibt ein {{jsxref("Array")}} mit Objekten zurück, welche die Repräsentation des Zahlenstrings in Teilen enthalten, die für sprachsicheres Formatieren genutzt werden können.</dd>
+ <dt>{{jsxref("NumberFormat.resolvedOptions", "Intl.NumberFormat.prototype.resolvedOptions()")}}</dt>
+ <dd>Gibt ein neues Objekt mit eigenschaften zurück, die Sprach- und Formatierungsoptionen enthält, die bei der Initialisierung des Objektes errechnet wurden.</dd>
+</dl>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Komment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-11.2.1', 'Intl.NumberFormat.prototype')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-11.2.1', 'Intl.NumberFormat.prototype')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.prototype', 'Intl.NumberFormat.prototype')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Intl.NumberFormat.prototype")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("NumberFormat", "Intl.NumberFormat")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/intl/numberformat/supportedlocalesof/index.html b/files/de/web/javascript/reference/global_objects/intl/numberformat/supportedlocalesof/index.html
new file mode 100644
index 0000000000..2521267a18
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/intl/numberformat/supportedlocalesof/index.html
@@ -0,0 +1,98 @@
+---
+title: Intl.NumberFormat.supportedLocalesOf()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/supportedLocalesOf
+tags:
+  - Internationalization
+  - JavaScript
+  - Method
+  - NumberFormat
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/supportedLocalesOf
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Intl.NumberFormat.supportedLocalesOf()</code></strong> Methode gibt ein Array zurück, welches die Gebiete enthält, die die Zahlenformatierung unterstützen, ohne das auf das Laufzeitstandardgebiet zurückgegriffen werden muss.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/intl-numberformat-prototype-supportedlocalesof.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Intl.NumberFormat.supportedLocalesOf(<var>locales</var>[, <var>options</var>])</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>locales</code></dt>
+ <dd>Ein String mit einem BCP 47 Sprachtag, oder ein Array von solchen Strings. Für die generelle Form des <code>locales</code> Arguments siehe die {{jsxref("Intl", "Intl Seite", "#Gebietsidentifikation_und_-verhandlung", 1)}}.</dd>
+ <dt><code>options</code></dt>
+ <dd>
+ <p>Optional. Ein Objekt, welches die folgende Eigenschaft haben kann:</p>
+
+ <dl>
+  <dt><code>localeMatcher</code></dt>
+  <dd>Der Auswahlalgorithmus des Gebietes. Mögliche Werte sind <code>"lookup"</code> und <code>"best fit"</code>; der Standard ist <code>"best fit"</code>. Für mehr Information über diese Option siehe auf der {{jsxref("Intl", "Intl Seite", "#Gebietsauswahl", 1)}}.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Gibt ein Array zurück, welches eine Untermenge der gegebenen Gebiete enthält, für die die Zahlenformatierung unterstützen wird, ohne das auf das Laufzeitstandardgebeit zurückgegriffen werden muss.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Gibt ein Array zurück, welches eine Untermenge der gegebenen Gebiete (<code>locales</code>) enthält. Die Sprachtags, die zurückgegeben werden, unterstützen Zahlenformatierungen für das entsprechende Gebiet, ohne auf den Systemstandard zurückgreifen zu müssen.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_supportedLocalesOf">Einsatz von <code>supportedLocalesOf</code></h3>
+
+<p>Angenommen wird, dass indonesische und deutsche Zahlenformatierung unterstützt wird, aber balinesisch nicht. <code>supportedLocalesOf</code> gibt das indonesische und deutsche Sprachtag unverändert zurück, obwohl Pinyin nicht mit Indonesisch verwendet wird und Fachdeutsch wahrscheinlich nicht für Indonesisch verfügbar ist. Zu bemerken ist, dass der <code>"lookup"</code> Algorithmus verwendet wird — der<code>"best-fit"</code> Algorithmus könnte entscheiden, dass Indonesisch eine angemessene Ergänzung für Balinesen ist, da die meisten Balinesen Indonesisch verstehen und daher auch das balinesische Sprachtag zurückgeben.</p>
+
+<pre class="brush: js">var locales = ['ban', 'id-u-co-pinyin', 'de-ID'];
+var options = { localeMatcher: 'lookup' };
+console.log(Intl.NumberFormat.supportedLocalesOf(locales, options).join(', '));
+// → "id-u-co-pinyin, de-ID"
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-11.2.2', 'Intl.NumberFormat.supportedLocalesOf')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-11.2.2', 'Intl.NumberFormat.supportedLocalesOf')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.supportedLocalesOf', 'Intl.NumberFormat.supportedLocalesOf')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Intl.NumberFormat.supportedLocalesOf")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("NumberFormat", "Intl.NumberFormat")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/intl/pluralrules/index.html b/files/de/web/javascript/reference/global_objects/intl/pluralrules/index.html
new file mode 100644
index 0000000000..fe646e4772
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/intl/pluralrules/index.html
@@ -0,0 +1,161 @@
+---
+title: Intl.PluralRules
+slug: Web/JavaScript/Reference/Global_Objects/Intl/PluralRules
+tags:
+  - Internationalization
+  - Intl
+  - JavaScript
+  - NeedsTranslation
+  - PluralRules
+  - TopicStub
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/PluralRules
+---
+<div>{{JSRef}}</div>
+
+<p>The <strong><code>Intl.PluralRules</code></strong> object is a constructor for objects that enable plural sensitive formatting and plural language language rules.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>new Intl.PluralRules([<var>locales</var>[, <var>options</var>]])
+Intl.PluralRules.call(<var>this</var>[, <var>locales</var>[, <var>options</var>]])
+</code></pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>locales</code></dt>
+ <dd>
+ <p>Optional. A string with a BCP 47 language tag, or an array of such strings. For the general form and interpretation of the <code>locales</code> argument, see the {{jsxref("Intl", "Intl page", "#Locale_identification_and_negotiation", 1)}}.</p>
+ </dd>
+ <dt><code>options</code></dt>
+ <dd>
+ <p>Optional. An object with some or all of the following properties:</p>
+
+ <dl>
+  <dt><code>localeMatcher</code></dt>
+  <dd>The locale matching algorithm to use. Possible values are <code>"lookup"</code> and <code>"best fit"</code>; the default is <code>"best fit"</code>. For information about this option, see the {{jsxref("Global_Objects/Intl", "Intl page", "#Locale_negotiation", 1)}}.</dd>
+  <dt><code>type</code></dt>
+  <dd>The type to use. Possible values are:
+  <ul>
+   <li><code>"cardinal"</code> for cardinal numbers (refering to the quantity of things). This is the default value.</li>
+   <li><code>"ordinal"</code> for ordinal number (refering to the ordering or ranking of things, e.g. "1st", "2nd", "3rd" in English).</li>
+  </ul>
+  </dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<h3 id="Properties">Properties</h3>
+
+<dl>
+ <dt>{{jsxref("PluralRules.prototype", "Intl.PluralRules.prototype")}}</dt>
+ <dd>Allows the addition of properties to all objects.</dd>
+</dl>
+
+<h3 id="Methods">Methods</h3>
+
+<dl>
+ <dt>{{jsxref("PluralRules.supportedLocalesOf", "Intl.PluralRules.supportedLocalesOf()")}}</dt>
+ <dd>Returns an array containing those of the provided locales that are supported without having to fall back to the runtime's default locale.</dd>
+</dl>
+
+<h2 id="PluralRules_instances"><code>PluralRules</code> instances</h2>
+
+<h3 id="Properties_2">Properties</h3>
+
+<p><code>PluralRules</code> instances inherit the following properties from their prototype:</p>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/PluralRules/prototype', 'Properties')}}</div>
+
+<h3 id="Methods_2">Methods</h3>
+
+<p><code>PluralRules</code> instances inherit the following methods from their prototype:</p>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/PluralRules/prototype', 'Methods')}}</div>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Basic_usage">Basic usage</h3>
+
+<p>In basic use without specifying a locale, a formatted string in the default locale and with default options is returned. This is useful to distinguish between singular and plural forms, e.g. "dog" and "dogs".</p>
+
+<pre class="brush: js">var pr = new Intl.PluralRules();
+
+pr.select(0);
+// → 'other' if in US English locale
+
+pr.select(1);
+// → 'one' if in US English locale
+
+pr.select(2);
+// → 'other' if in US English locale
+</pre>
+
+<h3 id="Using_locales">Using <code>locales</code></h3>
+
+<p>This example shows some of the variations in localized plural rules. In order to get the format of the language used in the user interface of your application, make sure to specify that language (and possibly some fallback languages) using the <code>locales</code> argument:</p>
+
+<pre class="brush: js">// Arabic has different plural rules
+
+new Intl.PluralRules('ar-EG').select(0);
+// → 'zero'
+new Intl.PluralRules('ar-EG').select(1);
+// → 'one'
+new Intl.PluralRules('ar-EG').select(2);
+// → 'two'
+new Intl.PluralRules('ar-EG').select(6);
+// → 'few'
+new Intl.PluralRules('ar-EG').select(18);
+// → 'many'
+</pre>
+
+<h3 id="Using_options">Using <code>options</code></h3>
+
+<p>The results can be customized using the <code>options</code> argument, which has one property called <code>type</code> which you can set to <code>ordinal</code>. This is useful to figure out the ordinal indicator, e.g. "1st", "2nd", "3rd", "4th", "42nd" and so forth.</p>
+
+<pre class="brush: js">var pr = new Intl.PluralRules('en-US', { type: 'ordinal' });
+
+pr.select(0);
+// → 'other'
+pr.select(1);
+// → 'one'
+pr.select(2);
+// → 'two'
+pr.select(3);
+// → 'few'
+pr.select(4);
+// → 'other'
+pr.select(42);
+// → 'two'
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td><a href="https://rawgit.com/caridy/intl-plural-rules-spec/master/index.html">Intl Plural Rules Draft</a></td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Intl.PluralRules")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl', 'See_also')}}</div>
diff --git a/files/de/web/javascript/reference/global_objects/intl/pluralrules/supportedlocalesof/index.html b/files/de/web/javascript/reference/global_objects/intl/pluralrules/supportedlocalesof/index.html
new file mode 100644
index 0000000000..a33eac3e76
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/intl/pluralrules/supportedlocalesof/index.html
@@ -0,0 +1,85 @@
+---
+title: Intl.PluralRules.supportedLocalesOf()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/supportedLocalesOf
+tags:
+  - Internationalization
+  - Intl
+  - JavaScript
+  - Method
+  - PluralRules
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/supportedLocalesOf
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Intl.PluralRules.supportedLocalesOf()</code></strong> Methode gibt ein Array zurück, welches die Gebiete enthält, die die Pluralformatierung unterstützen, ohne das auf das Laufzeitstandardgebeit zurückgegriffen werden muss.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Intl.PluralRules.supportedLocalesOf(<var>locales</var>[, <var>options</var>])</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>locales</code></dt>
+ <dd>Ein String mit einem BCP 47 Sprachtag, oder ein Array von solchen Strings. Für die generelle Form des <code>locales</code> Arguments siehe die {{jsxref("Intl", "Intl Seite", "#Gebietsidentifikation_und_-verhandlung", 1)}}.</dd>
+ <dt><code>options</code></dt>
+ <dd>
+ <p>Optional. Ein Objekt, welches die folgende Eigenschaft haben kann:</p>
+
+ <dl>
+  <dt><code>localeMatcher</code></dt>
+  <dd>Der Auswahlalgorithmus des Gebietes. Mögliche Werte sind <code>"lookup"</code> und <code>"best fit"</code>; der Standard ist <code>"best fit"</code>. Für mehr Information über diese Option siehe auf der {{jsxref("Intl", "Intl Seite", "#Gebietsauswahl", 1)}}.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Gibt ein Array zurück, welches eine Untermenge der gegebenen Gebiete enthält, für die die Pluralformatierung unterstützen wird, ohne das auf das Laufzeitstandardgebeit zurückgegriffen werden muss.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Gibt ein Array zurück, welches eine Untermenge der gegebenen Gebiete (<code>locales</code>) enthält. Die Sprachtags, die zurückgegeben werden, unterstützen Zahlenformatierungen für das entsprechende Gebiet, ohne auf den Systemstandard zurückgreifen zu müssen.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_supportedLocalesOf">Einsatz von <code>supportedLocalesOf</code></h3>
+
+<p>Angenommen wird, dass indonesische und deutsche Pluralformatierung unterstützt wird, aber balinesisch nicht. <code>supportedLocalesOf</code> gibt das indonesische und deutsche Sprachtag unverändert zurück, obwohl Pinyin nicht mit Indonesisch verwendet wird und Fachdeutsch wahrscheinlich nicht für Indonesisch verfügbar ist. Zu bemerken ist, dass der <code>"lookup"</code> Algorithmus verwendet wird — der<code>"best-fit"</code> Algorithmus könnte entscheiden, dass Indonesisch eine angemessene Ergänzung für Balinesen ist, da die meisten Balinesen Indonesisch verstehen und daher auch das balinesische Sprachtag zurückgeben.</p>
+
+<pre class="brush: js">var locales = ['ban', 'id-u-co-pinyin', 'de-ID'];
+var options = { localeMatcher: 'lookup' };
+console.log(Intl.PluralRules.supportedLocalesOf(locales, options).join(', '));
+// → "id-u-co-pinyin, de-ID"
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td><a href="https://rawgit.com/caridy/intl-plural-rules-spec/master/index.html">Intl Plural Rules Draft</a></td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td>Initiale Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Intl.PluralRules.supportedLocalesOf")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("PluralRules", "Intl.PluralRules")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/isfinite/index.html b/files/de/web/javascript/reference/global_objects/isfinite/index.html
new file mode 100644
index 0000000000..c947c8cbf8
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/isfinite/index.html
@@ -0,0 +1,99 @@
+---
+title: isFinite()
+slug: Web/JavaScript/Reference/Global_Objects/isFinite
+tags:
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Global_Objects/isFinite
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>Die globale Funktion <code><strong>isFinite()</strong></code> prüft, ob eine Zahl endlich ist oder nicht. Wenn der übergeben Wert keine Nummer ist, wird dieser zuerst konvertiert.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-isfinite.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">isFinite(<em>testWert</em>)</pre>
+
+<h3 id="Parameters" name="Parameters">Parameter</h3>
+
+<dl>
+ <dt><code>test</code>Wert</dt>
+ <dd>Wert, der auf <span class="dpf_sent" id="dpfsent_2">Endlichkeit </span>geprüft wird.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p><strong><code>false</code></strong> wenn der Wert positiv {{jsxref("Infinity")}}, negativ {{jsxref("Infinity")}} or {{jsxref("NaN")}} ist, andernfalls <strong><code>true</code></strong>.</p>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p><code>isFinite</code> ist eine <span class="dpf_sent" id="dpfsent_1">Toplevel-</span>Funktion und ist nicht mit einem Objekt verbunden.</p>
+
+<p>Man kann die Funktion nutzen, um eine Nummer auf Endlichkeit zu prüfen. Die <code>isFinite</code> Funktion prüft die Zahl, die ihr als Parameter mit übergeben wird. Wenn der Wert der Zahl {{jsxref("Global_Objects/NaN", "NaN")}}, positiv {{jsxref("Global_Objects/Infinity", "infinity")}} oder negativ {{jsxref("Global_Objects/Infinity", "infinity")}} ist, so ist der Rückgabewert <code>false</code>; andernfalls <code>true</code>.</p>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<pre class="brush: js">isFinite(Infinity);  // false
+isFinite(NaN);       // false
+isFinite(-Infinity); // false
+
+isFinite(0);         // true
+isFinite(2e64);      // true
+isFinite(null);      // true
+
+isFinite(null)       // true, würde false sein, wenn die robustere
+                     // Methode Number.isFinite(null) eingesetzt wird.
+
+isFinite('0');       // true, würde false sein, wenn die robustere
+                     // Methode Number.isFinite('0') eingesetzt wird.
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.2.5', 'isFinite')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-isfinite-number', 'isFinite')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-isfinite-number', 'isFinite')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.isFinite")}}</p>
+
+<h2 id="See_Also" name="See_Also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Number.isFinite()")}}</li>
+ <li>{{jsxref("Number.NaN")}}</li>
+ <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li>
+ <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/isnan/index.html b/files/de/web/javascript/reference/global_objects/isnan/index.html
new file mode 100644
index 0000000000..328ef94557
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/isnan/index.html
@@ -0,0 +1,192 @@
+---
+title: isNaN()
+slug: Web/JavaScript/Reference/Global_Objects/isNaN
+tags:
+  - JavaScript
+  - Method
+translation_of: Web/JavaScript/Reference/Global_Objects/isNaN
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>Die <code><strong>isNaN()</strong></code> Methode prüft, ob ein Wert {{jsxref("NaN")}} ist. Bemerkung: Aufgrund innerer Zwänge weist die <code>isNaN</code> Methode <a href="#Description">interessante</a> Regeln auf. Alternativ kann die in ECMAScript 2015 definierte Methode {{jsxref("Number.isNaN()")}} genutzt werden.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-isnan.html")}}</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>isNaN(<em>testWert</em>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parameter</h3>
+
+<dl>
+ <dt><code>testWert</code></dt>
+ <dd>Der zu testende Wert.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p><strong><code>true</code></strong> wenn der gegebene Wert {{jsxref("NaN")}} ist, andernfalls <strong><code>false</code></strong>.</p>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<h3 id="The_necessity_of_an_isNaN_function" name="The_necessity_of_an_isNaN_function">Die notwendigkeit einer <code>isNaN Methode</code></h3>
+
+<p>Anders als bei allen anderen Werten in JavaScript, ist es nicht möglich mit den Gleichheitsoperatoren ({{jsxref("Operators/Comparison_Operators", "==", "#Equality")}} and {{jsxref("Operators/Comparison_Operators", "===", "#Identity")}}) zu prüfen, ob ein Wert {{jsxref("NaN")}} ist oder nicht. <code>NaN == NaN</code> und <code>NaN === NaN</code> werden zu <code>false </code>ausgewertet. Aus diesem Grund wird eine <code>isNaN</code> Methode benötigt. </p>
+
+<h3 id="Origin_of_NaN_values" name="Origin_of_NaN_values">Ursprünge des <code>NaNWertes</code></h3>
+
+<p><code>NaN</code> Werte werden generiert, wenn das Ergebnis einer arithmetischen Operation ein undefinierter Wert oder ein nicht repräsentierbarer Wert ist. Diese Werte entsprechen nicht unbedingt dem Überlauf von Wertebereichen. Ein <code>NaN</code> Ergebnis kann ebenfalls entstehen, wenn es für eine Operation keine primitive Zahl als Darstellung gibt.</p>
+
+<p>Beispielsweise ist das Ergebnis einer Division von null durch null <code>NaN</code>. Jedoch ist das Ergebnis nicht <code>NaN</code> wenn andere Zahlen durch null geteilt werden.</p>
+
+<h3 id="Verwirrende_Spezialfälle">Verwirrende Spezialfälle</h3>
+
+<p>Schon seit den frühesten Versionen der <code>isNaN</code> Methodendefinition ist das Verhalten für nicht numerische Typen nicht trivial. Wenn der zu überprüfende Wert nicht vom Typ <a href="http://es5.github.com/#x8.5" title="http://es5.github.com/#x8.5">Number</a> ist, so wird dieser Wert zuerst in den Typ <a href="http://es5.github.com/#x8.5" title="http://es5.github.com/#x8.5">Number</a> konvertiert. Erst dann wird geprüft, ob der Wert {{jsxref("NaN")}} ist. Weil einige nicht numerischen Werte trotzdem als Zahlen interpretiert werden können (leere Strings und Werte vom Typ boolean können als Nullen und Einsen dargestellt werden) ist das <code>false</code>-Resultat der Funktion manchmal unerwartet. Der leere String ist ein Beispiel dafür, weil dieser definitiv keine Nummer ist. Das verwirrende ist jedoch dass "not a number" eine spezielle Repräsentation in den IEEE-754 Gleitkommazahlen besitzt. Aus diesem Grund kann die Methode so interpretiert werden, dass sie die Antwort auf die Frage gibt, ob ein Wert, der als Nummer interpretiert wird, eine IEEE-754 'Not a number' ist.</p>
+
+<p>Die aktuelle Version von ECMAScript (ES2015) enthält die Methode {{jsxref("Number.isNaN()")}}. <code>Number.isNaN(x)</code> wird eine zuverlässige Möglichkeit sein um zu testen ob <code>x</code> den Wert <code>NaN</code> entspricht oder nicht. Mit <code>Number.isNaN</code> wird exakt abgefragt, ob es sich um eine Nummer handelt. Eine Alternative zu testen ob eine Variable <code>NaN</code> ist, ist die Abfrage  <code>(x != x)</code>. Diese wird im Normalfall zu <code>false </code>ausgewertet, außer wenn der wert <code>NaN ist.</code></p>
+
+<p>Ein Polyfill für <code>isNaN</code> ist folgender (der<span id="result_box" lang="de"><span> Polyfill nutzt die einzigartigen Eigenschaften von <code>NaN</code>, dass dieses niemals gleichwertig mit <code>NaN</code> ist</span></span>):</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">var isNaN <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>value<span class="punctuation token">)</span> <span class="punctuation token">{
+    var n = Number(value);</span>
+    return n !== n<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<pre class="brush: js">isNaN(NaN);       // true
+isNaN(undefined); // true
+isNaN({});        // true
+
+isNaN(true);      // false
+isNaN(null);      // false
+isNaN(37);        // false
+
+// strings
+isNaN("37");      // false: "37" wird in die Nummer 37 konvertiert welche nicht NaN ist
+isNaN("37.37");   // false: "37.37" wird in die Nummer 37.37 konvertiert welche nicht NaN ist
+isNaN("37,5");    // true
+isNaN("123ABC");  // true:  parseInt("123ABC") ist 123 aber Number("123ABC") ist NaN
+isNaN("");        // false: der leere String wird zu 0 konvertiert welche nicht NaN ist
+isNaN(" ");       // false: ein String mit Leerzeichen wird zu 0 konvertiert welche nicht NaN ist
+
+// dates
+isNaN(new Date());                // false
+isNaN(new Date().toString());     // true
+
+// Dieses ist das Beispiel, warum isNaN nicht zuverlässig ist.
+isNaN("blabla")   // true: "blabla" wird zu einer Nummer konvertiert
+                  // Das Konvertieren schlägt fehl und gibt NaN zurück
+</pre>
+
+<h3 id="Nützliche_Spezialfälle">Nützliche Spezialfälle</h3>
+
+<p>Es gibt weitere nützliche Wege <code>isNaN()</code> einzusetzen: Wenn <code>isNaN(x)</code> <code>false</code> zurückgibt, kann <code>x</code> in einer arithmetischen Operation eingesetzt werden, ohne dass diese zu <code>NaN</code> ausgewertet wird. Wenn <code>true</code> zurückgegeben wird, wird jede arithmetische Operation zu <code>NaN</code> ausgewertet. Das bedeutet, dass in JavaScript <code>isNaN(x) == true</code>  gleich zu "<code>x - 0</code> ergibt <code>NaN</code>" (in JavaScript wird <code>x - 0 == NaN</code> immer false zurückgeben, was bedeutet, man kann es nicht testen). Aktuell geben <code>isNaN(x)</code>, <code>isNaN(x - 0)</code>, <code>isNaN(Number(x))</code>, <code>Number.isNaN(x - 0)</code>, und <code>Number.isNaN(Number(x))</code> immer das selbe Ergebnis  zurück und <code>isNaN(x)</code> ist der kürzest mögliche Ausdruck.</p>
+
+<p>Dieses kann zum Beispiel eingesetzt werden, um zu prüfen, ob ein Funktionsargument arithmetisch verarbeitet werden kann. Wenn diese Verarbeitung nicht möglich ist, kann ein Standardwert unterstützt werden oder irgendetwas anderes. Damit kann man sich die volle Vielseitigkeit, die JavaScript mit implizierten Typkonvertierungen abhängig vom Kontext unterstützt, zu nutze machen.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js">function increment(x) {
+  if (isNaN(x)) x = 0;
+  return x + 1;
+};
+
+// Gleicher Wirkung wie bei Number.isNaN():
+function increment(x) {
+  if (Number.isNaN(Number(x))) x = 0;
+  return x + 1;
+};
+
+// In den folgenden Fällen ist für das Funktionsargument x
+// isNaN(x) immer false, weil es keine Nummer ist,
+// jedoch kann es in arithmetischen Operationen eingesetzt
+// werden.
+increment("");            // 1: "" is converted to 0
+increment(new String());  // 1: String object representing an empty string is converted to 0
+increment([]);            // 1: [] is converted to 0
+increment(new Array());   // 1: Array object representing an empty array is converted to 0
+increment("0");           // 1: "0" is converted to 0
+increment("1");           // 2: "1" is converted to 1
+increment("0.1");         // 1.1: "0.1" is converted to 0.1
+increment("Infinity");    // Infinity: "Infinity" is converted to Infinity
+increment(null);          // 1: null is converted to 0
+increment(false);         // 1: false is converted to 0
+increment(true);          // 2: true is converted to 1
+increment(new Date());    // returns current date/time in milliseconds plus 1
+
+// In den folgenden Fällen ist für das Funktionsargument x
+// isNaN(x) immer false und x ist eine Nummer
+increment(-1);            // 0
+increment(-0.1);          // 0.9
+increment(0);             // 1
+increment(1);             // 2
+increment(2);             // 3
+// ... und so weiter ...
+increment(Infinity);      // Infinity
+
+// In den folgenden Fällen ist für das Funktionsargument x
+// isNaN(x) immer true und x ist keine Nummer,
+// weshalb die Funktion es mit 0 ersetzt und 1 zurück gibt.
+increment(String);            // 1
+increment(Array);             // 1
+increment("blabla");          // 1
+increment("-blabla");         // 1
+increment(0/0);               // 1
+increment("0/0");             // 1
+increment(Infinity/Infinity); // 1
+increment(NaN);               // 1
+increment(undefined);         // 1
+increment();                  // 1
+
+// isNaN(x) ist immer identisch mit isNaN(Number(x)),
+// aber die Präsenz wenn x ist immer zwingend erforderlich.
+isNaN(x) == isNaN(Number(x)) // true für jeden Wert von x, auch x == undefined,
+                             // weil isNaN(undefined) == true und Number(undefined) gibt NaN,
+                             // aber ...
+isNaN() == isNaN(Number())   // false, weil isNaN() == true und Number() == 0</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.2.4', 'isNaN')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-isnan-number', 'isNaN')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-isnan-number', 'isNaN')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.isNaN")}}</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("NaN")}}</li>
+ <li>{{jsxref("Number.isNaN()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/json/index.html b/files/de/web/javascript/reference/global_objects/json/index.html
new file mode 100644
index 0000000000..e52af893a1
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/json/index.html
@@ -0,0 +1,155 @@
+---
+title: JSON
+slug: Web/JavaScript/Reference/Global_Objects/JSON
+tags:
+  - JSON
+  - JavaScript
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/JSON
+---
+<div>{{JSRef}}</div>
+
+<p>Das <strong><code>JSON</code></strong> Objekt enthält Methoden für das Einlesen und Konvertieren der <a class="external" href="https://json.org/">JavaScript Objekt Notation</a> ({{glossary("JSON")}}) in JavaScript und umgekehrt. Es kann nicht aufgerufen oder erstellt werden. Außer seinen zwei Methoden hat das Objekt keine interessante Funktionalität.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<h3 id="JavaScript_Objekt_Notation">JavaScript Objekt Notation</h3>
+
+<p>JSON ist eine Syntax für das Serialisieren von Objekten, Arrays, Nummern, Strings, Wahrheitswerten und {{jsxref("null")}}. JSON basiert auf der JavaScript Syntax, jedoch ist sie leicht unterschiedlich: Manches JavaScript ist kein JSON und manches JSON ist kein JavaScript. Für mehr Informationen Siehe in dem Artikel <a href="http://timelessrepo.com/json-isnt-a-javascript-subset">JSON: The JavaScript subset that isn't</a>.</p>
+
+<table>
+ <caption>JavaScript und JSON Unterschiede</caption>
+ <thead>
+  <tr>
+   <th scope="col">JavaScript Typen</th>
+   <th scope="col">JSON Unterschiede</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Objekte und Arrays</td>
+   <td>Namen von Eigenschaften müssen als Strings in Doppelten Anführungszeichen (") geschrieben werden; Angefügte Kommas sind verboten.</td>
+  </tr>
+  <tr>
+   <td>Zahlen</td>
+   <td>Führende Nullen sind verboten (JSON.stringify ignoriert diese Nullen, jedoch wirft JSON.parse einen SyntaxError); Nach einem Dezimalpunkt muss mindestens eine Ziffer folgen.</td>
+  </tr>
+  <tr>
+   <td>Strings</td>
+   <td>
+    <p>Nur eine begrenzte Menge von Zeichen muss maskiert werden; Einige Kontrollzeichen sind verboten; Die Unicodezeichen Zeilenumbruch (<a href="http://unicode-table.com/en/2028/">U+2028</a>) und Paragraphenumbruch (<a href="http://unicode-table.com/en/2029/">U+2029</a>) sind erlaubt; Strings müssen in Doppelten Anführungszeichen (") geschrieben werden. Das folgenden Beispiel zeigt eine Situation in der {{jsxref("JSON.parse()")}} funktioniert, aber das Ausführen durch JavaScript zu einem {{jsxref("SyntaxError")}} führt:</p>
+
+    <pre class="brush: js">
+var code = '"\u2028\u2029"';
+JSON.parse(code); // funktioniert
+eval(code); // Error
+</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Nachfolgend ist die komplette JSON Syntax zu sehen:</p>
+
+<pre class="brush: js">JSON = null
+    or true or false
+    or JSONNumber
+    or JSONString
+    or JSONObject
+    or JSONArray
+
+JSONNumber = - PositiveNumber
+          or PositiveNumber
+PositiveNumber = DecimalNumber
+              or DecimalNumber . Digits
+              or DecimalNumber . Digits ExponentPart
+              or DecimalNumber ExponentPart
+DecimalNumber = 0
+             or OneToNine Digits
+ExponentPart = e Exponent
+            or E Exponent
+Exponent = Digits
+        or + Digits
+        or - Digits
+Digits = Digit
+      or Digits Digit
+Digit = 0 through 9
+OneToNine = 1 through 9
+
+JSONString = ""
+          or " StringCharacters "
+StringCharacters = StringCharacter
+                or StringCharacters StringCharacter
+StringCharacter = any character
+                  except " or \ or U+0000 through U+001F
+               or EscapeSequence
+EscapeSequence = \" or \/ or \\ or \b or \f or \n or \r or \t
+              or \u HexDigit HexDigit HexDigit HexDigit
+HexDigit = 0 through 9
+        or A through F
+        or a through f
+
+JSONObject = { }
+          or { Members }
+Members = JSONString : JSON
+       or Members , JSONString : JSON
+
+JSONArray = [ ]
+         or [ ArrayElements ]
+ArrayElements = JSON
+             or ArrayElements , JSON</pre>
+
+<p>Unbedeutende Whitespaces können überall eingebaut werden außer in eine <code><var>JSONNumber</var></code> (Nummern dürfen keine Whitespaces enthalten) und einen <code><var>JSONString</var></code> (In dem wird es als das entsprechende Whitespace interpretiert oder führt zu einem Fehler). Das Tab-Zeichen (<a href="http://unicode-table.com/en/0009/">U+0009</a>), "carriage return"-Zeichen (<a href="http://unicode-table.com/en/000D/">U+000D</a>), "line feed"-Zeichen (<a href="http://unicode-table.com/en/000A/">U+000A</a>) und Leerzeichen (<a href="http://unicode-table.com/en/0020/">U+0020</a>) sind die einzigen erlaubten Whitespace-Zeichen.</p>
+
+<h2 id="Methoden">Methoden</h2>
+
+<dl>
+ <dt>{{jsxref("JSON.parse()")}}</dt>
+ <dd>Liest einen String als JSON ein. Optional werden die Werte und die Eigenschaften Transformiert und zurückgegeben.</dd>
+ <dt>{{jsxref("JSON.stringify()")}}</dt>
+ <dd>Gibt ein JSON-String eines übergebenen Wertes zurück. Optional können nur bestimmte Eigenschaften zum JSON hinzugefügt werden oder Eigenschaften werden Ersetzt. Dieses wird durch eine Benutzerdefinierte Methode durchgeführt.</dd>
+</dl>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.12', 'JSON')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-json-object', 'JSON')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-json-object', 'JSON')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("javascript.builtins.JSON")}}</p>
+</div>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.toJSON()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/json/parse/index.html b/files/de/web/javascript/reference/global_objects/json/parse/index.html
new file mode 100644
index 0000000000..b8442eb38d
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/json/parse/index.html
@@ -0,0 +1,128 @@
+---
+title: JSON.parse()
+slug: Web/JavaScript/Reference/Global_Objects/JSON/parse
+tags:
+  - ECMAScript5
+  - JSON
+  - JavaScript
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/JSON/parse
+---
+<div>{{JSRef}}</div>
+
+<p>Die Methode <strong><code>JSON.parse()</code></strong> erzeugt aus einem JSON-formatierten Text ein entsprechendes Javascript-Objekt. Der optionale <strong>reviver</strong>-Parameter kann die Umwandlung im Detail beeinflussen.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/json-parse.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">JSON.parse(<var>text</var>[, <var>reviver</var>])</pre>
+
+<h3 id="Parameters" name="Parameters">Parameter</h3>
+
+<dl>
+ <dt><code>text</code></dt>
+ <dd>JSON-formatierter Text, der eingelesen werden soll. Siehe {{jsxref("JSON")}} für eine Beschreibung der JavaScript Objekt Notation.</dd>
+ <dt><code>reviver</code> {{optional_inline}}</dt>
+ <dd>
+ <p><span id="result_box" lang="de"><span>Wenn es sich um eine Funktion handelt, schreibt diese vor, wie der ursprünglich vom Parsen erzeugte Wert transformiert wird, bevor er zurückgegeben wird.</span></span></p>
+ </dd>
+</dl>
+
+<h3 id="Returns" name="Returns">Rückgabewert</h3>
+
+<p>Die Funktion gibt das aus <code>text</code> erzeugte {{jsxref("Object")}} zurück.</p>
+
+<h3 id="Throws" name="Throws">Ausnahmen</h3>
+
+<p>{{jsxref("SyntaxError")}}, falls <code>text</code> kein gültiges JSON enthält.</p>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<h3 id="Example:_Using_JSON.parse" name="Example:_Using_JSON.parse"><code>JSON.parse()</code> verwenden</h3>
+
+<pre>JSON.parse('{}');              // {}
+JSON.parse('true');            // true
+JSON.parse('"foo"');           // "foo"
+JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
+JSON.parse('null');            // null
+</pre>
+
+<h3 id="Example:_Using_the_reviver_parameter" name="Example:_Using_the_reviver_parameter">Verwendung des <code>reviver</code>-Parameters</h3>
+
+<p>Wenn <code>reviver</code> spezifiziert ist, wird der vom Parser berechnete Wert vor der Rückgabe Transformiert. Insbesondere der berechnete Wert und alle seine EIgenschaften (beginnend mit dem am tiefsten geschachtelten Eigenschaft bis hin zum originalen Wert selbst) werden separat mit dem <code>reviver</code> Ausgeführt.<span id="result_box" lang="de"><span> Dann wird sie aufgerufen, wobei das Objekt, das die Eigenschaft enthält, als <code>this</code> und der Eigenschaftsname als Zeichenfolge und der Eigenschaftswert als Argumente verarbeitet werden.</span></span> Wenn <code>reviver</code> {{jsxref("undefined")}} zurück gibt (oder keinen Wert zurück gibt, wenn zum Beispiel die Ausführung der Funktion fehlschlägt), wird die Eigenschaft aus dem Ergebnis entfernt. Anderenfalls wird dessen Wert in den Rückgabewert neu definiert.</p>
+
+<p>Falls <code>reviver</code> nur einige Werte ändert, muss sichergestellt sein, dass die unveränderten Werte auch zurückgegeben werden, ansonsten werden diese Werte aus dem Ergebnis gelöscht.</p>
+
+<pre class="brush: js">JSON.parse('{"p": 5}', (key, value) =&gt;
+  typeof value === 'number'
+    ? value * 2 // Gibt value * 2 für Zahlen zurück.
+    : value     // Alle anderen Werte werden unverändert zurückgegeben.
+);
+
+// { p: 10 }
+
+JSON.parse('{"1": 1, "2": 2, "3": {"4": 4, "5": {"6": 6}}}', (key, value) =&gt; {
+  console.log(key); // Loggt die Namen der Eigenschaften, der letzte ist "".
+  return value;     // Gib den unveränderten Eigenschaftenwert zurück.
+});
+
+// 1
+// 2
+// 4
+// 6
+// 5
+// 3
+// ""
+</pre>
+
+<h3 id="JSON.parse()_erlaubt_keine_abschließenden_Kommas"><code>JSON.parse()</code> erlaubt keine abschließenden Kommas</h3>
+
+<pre class="example-bad brush: js">// Beides erzeugt einen Syntaxfehler
+JSON.parse("[1, 2, 3, 4, ]");
+JSON.parse("{ \"foo\" : 1, }");
+</pre>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.12.2', 'JSON.parse')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.7.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-json.parse', 'JSON.parse')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-json.parse', 'JSON.parse')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.JSON.parse")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("JSON.stringify()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/json/stringify/index.html b/files/de/web/javascript/reference/global_objects/json/stringify/index.html
new file mode 100644
index 0000000000..1acea5bbd3
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/json/stringify/index.html
@@ -0,0 +1,310 @@
+---
+title: JSON.stringify()
+slug: Web/JavaScript/Reference/Global_Objects/JSON/stringify
+tags:
+  - JSON
+  - JavaScript
+  - Method
+  - Reference
+  - stringify
+translation_of: Web/JavaScript/Reference/Global_Objects/JSON/stringify
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>JSON.stringify()</code></strong> Methode konvertiert einen JavaScript-Wert in einen JSON-String. Optional werden Werte ersetzt, wenn eine Ersetzungsfunktion angegeben ist. Optional werden nur die angegebenen Eigenschaften einbezogen, wenn ein Ersetzungsarray angegeben ist.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/json-stringify.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>JSON.stringify(<var>value</var>[, <var>replacer</var>[, <var>space</var>]])</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Der Wert, der zu einem JSON-String konvertiert werden soll.</dd>
+ <dt><code>replacer</code> {{optional_inline}}</dt>
+ <dd>Eine Funktion, die das Verhalten des String- Erstellungsprozesses verändert, oder ein Array von {{jsxref("String")}} und {{jsxref("Number")}} Objekten, die als Whiteliste für die Selektion von Eigenschaften des <code>value</code> Objektes fungiert, um nur bestimmte Eigenschaften im JSON-String aufzunehmen. Wenn dieser Parameter null ist oder nicht unterstützt wird, werden alle Eigenschaften des Objektes im JSON-String aufgenommen.</dd>
+ <dt><code>space</code> {{optional_inline}}</dt>
+ <dd>Ein {{jsxref("String")}} oder {{jsxref("Number")}} Objekt, welches eingesetzt wird, um Whitespaces in den JSON-String für die Lesbarkeit hinzuzufügen. Wenn eine <code>Number</code> angegeben ist, bedeutet dies, dass die angegebene Anzahl an Leerzeichen hinzugefügt werden; Die Anzahl der Leerzeichen ist hierbei auf 10 begrenzt und wird bei einer größeren Anzahl auf 10 gesetzt. Werte kleiner als 1 bedeuten, dass keine Leerzeichen verwendet werden sollen. Wenn ein <code>String</code> angegeben wird, wird der String (oder die ersten 10 Zeichen des Strings, wenn er länger ist) als Leerzeichen benutzt. Wenn dieser Parameter null ist oder nicht unterstützt wird, werden keine Whitespaces verwendet.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein JSON-String, der den angegebenen Wert repräsentiert.</p>
+
+<h3 id="Fehler">Fehler</h3>
+
+<p>Erzeugt einen {{jsxref("TypeError")}} ("cyclic object value") Fehler, wenn eine zyklische Referenz gefunden wird.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p><code>JSON.stringify()</code> konvertiert einen Wert in einen in JSON-Notation gleichwertigen Wert:</p>
+
+<ul>
+ <li>Wenn der Wert eine <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify$edit#toJSON()_behavior">toJSON()</a> Methode hat, definiert diese, welche Daten serialisiert werden.</li>
+ <li>{{jsxref("Boolean")}}, {{jsxref("Number")}} und {{jsxref("String")}} Objekte werden zu den entsprechenden primitiven Werten, gemäß der traditionellen Konvertierungssemantik, konvertiert.</li>
+ <li>Wenn {{jsxref("undefined")}}, eine {{jsxref("Function", "Funktion")}} oder ein {{jsxref("Symbol")}} während der Konvertierung auftritt, wird es einfach weggelassen (wenn es in einem Objekt gefunden wird) oder zu {{jsxref("null")}} geändert (wenn es in einem Array gefunden wurde). <code>JSON.stringify</code> kann <code>undefined</code> zurückgeben, wenn nur ein Wert wie <code>JSON.stringify(function(){})</code> or <code>JSON.stringify(undefined)</code> übergeben wird.</li>
+ <li>Alle {{jsxref("Symbol")}}-Schlüssel-Eigenschaften werden komplett ignoriert, auch wenn die <code>replacer</code> Funktion genutzt wird.</li>
+ <li>Instanzen von {{jsxref("Date")}} implementieren die <code>toJSON()</code> Funktion so, dass ein String (der gleich wie bei <code>date.toISOString()</code> ist) zurückgibt. Daher werden sie als String behandelt.</li>
+ <li>Die Zahlen {{jsxref("Infinity")}} und {{jsxref("NaN")}} genauso wie {{jsxref("null")}} Objekte werden zu <code>null</code> umgewandelt.</li>
+ <li>Für alle anderen {{jsxref("Object")}} Instanzen (eingeschlossen {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("WeakMap")}} und {{jsxref("WeakSet")}}) werden nur die aufzählbaren (enumerable) Eigenschaften serialisiert.</li>
+</ul>
+
+<pre class="brush: js">JSON.stringify({});                    // '{}'
+JSON.stringify(true);                  // 'true'
+JSON.stringify('foo');                 // '"foo"'
+JSON.stringify([1, 'false', false]);   // '[1,"false",false]'
+JSON.stringify([NaN, null, Infinity]); // '[null,null,null]'
+JSON.stringify({ x: 5 });              // '{"x":5}'
+
+JSON.stringify(new Date(2006, 0, 2, 15, 4, 5))
+// '"2006-01-02T15:04:05.000Z"'
+
+JSON.stringify({ x: 5, y: 6 });
+// '{"x":5,"y":6}' or '{"y":6,"x":5}'
+JSON.stringify([new Number(1), new String('false'), new Boolean(false)]);
+// '[1,"false",false]'
+
+JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] });
+// '{"x":[10,null,null,null]}'
+
+// Standard-Datenstrukturen
+JSON.stringify([new Set([1]), new Map([[1, 2]]), new WeakSet([{a: 1}]), new WeakMap([[{a: 1}, 2]])]);
+// '[{},{},{},{}]'
+
+// TypedArray
+JSON.stringify([new Int8Array([1]), new Int16Array([1]), new Int32Array([1])]);
+// '[{"0":1},{"0":1},{"0":1}]'
+JSON.stringify([new Uint8Array([1]), new Uint8ClampedArray([1]), new Uint16Array([1]), new Uint32Array([1])]);
+// '[{"0":1},{"0":1},{"0":1},{"0":1}]'
+JSON.stringify([new Float32Array([1]), new Float64Array([1])]);
+// '[{"0":1},{"0":1}]'
+
+// toJSON()
+JSON.stringify({ x: 5, y: 6, toJSON(){ return this.x + this.y} });
+// '11'
+
+// Symbols:
+JSON.stringify({ x: undefined, y: Object, z: Symbol('') });
+// '{}'
+JSON.stringify({ [Symbol('foo')]: 'foo' });
+// '{}'
+JSON.stringify({ [Symbol.for('foo')]: 'foo' }, [Symbol.for('foo')]);
+// '{}'
+JSON.stringify({ [Symbol.for('foo')]: 'foo' }, function(k, v) {
+  if (typeof k === 'symbol') {
+    return 'a symbol';
+  }
+});
+// '{}'
+
+// Nicht-enumerable Eigenschaften:
+JSON.stringify( Object.create(null, { x: { value: 'x', enumerable: false }, y: { value: 'y', enumerable: true } }) );
+// '{"y":"y"}'
+</pre>
+
+<h3 id="Der_replacer_Parameter"><a id="The replacer parameter" name="The replacer parameter"></a>Der <code>replacer</code> Parameter</h3>
+
+<p>Der <code>replacer</code> Parameter kann entweder eine Funktion oder ein Array sein. Als Funktion erhält diese zwei Parameter, den Schlüssel und den Wert, die in JSON konvertiert werden. Das Objekt, in dem der Schlüssel gefunden wurde, kann in der <code>replacer</code> Funktion mit <code>this</code> abgefragt werden. Initial wird die <code>replacer</code> Funktion mit einem leeren String als Schlüssel aufgerufen, was bedeutet, dass das Objekt konvertiert wird und dieses dann für alle Eigenschaften des Objektes oder Arrays die <code>replacer</code> Funktion aufruft. Die Funktion kann den Rückgabewert wie folgt zurückgeben, damit das Objekt zum JSON-String hinzugefügt wird:</p>
+
+<ul>
+ <li>Wenn eine {{jsxref("Number")}} zurückgegeben wird, wird der entsprechende String der Zahl als Wert für die Eigenschaft zum JSON hinzugefügt.</li>
+ <li>Wenn ein {{jsxref("String")}} zurückgegeben wird, wird der String als Wert für die Eigenschaft zum JSON hinzugefügt.</li>
+ <li>Wenn ein {{jsxref("Boolean")}} zurückgegeben wird, werden "true" oder "false" als Wert für die Eigenschaft im JSON hinzugefügt.</li>
+ <li>Wenn <code>null</code> zurückgegeben wird, wird <code>null</code> zum JSON String kinzugefügt.</li>
+ <li>Wenn ein anderes Objekt zurückgegeben wird, wird dieses Objekt wiederum rekursiv in ein JSON-String konvertiert, was bedeutet, dass für jede Eigenschaft auch die <code>replacer</code> Funktion wieder aufgerufen wird. Eine Ausnahme ist, wenn das zurückgegebene Objekt eine Funktion ist, dann wird nichts zum JSON hinzugefügt.</li>
+ <li>Wenn <code>undefined</code> zurückgegeben wird, wird die Eigenschaft nicht in das JSON hinzugefügt.</li>
+</ul>
+
+<div class="note"><strong>Hinweis:</strong> Man kann eine <code>replacer</code> Funktion nicht nutzen, um Werte von Arrays zu entfernen. Wenn man <code>undefined</code> oder eine function zurückgibt, wird <code>null</code> zum JSON hinzugefügt.</div>
+
+<div class="note"><strong>Hinweis:</strong> Wenn man möchten, dass der Replacer ein initiales Objekt von einem Schlüssel mit einer leeren String-Eigenschaft unterscheidet (da beide den leeren String als Schlüssel und möglicherweise ein Objekt als Wert angeben würden), muss man den Anzahl der Iterationen verfolgen (wenn er jenseits der ersten Iteration ist, ist es ein echter leerer String-Schlüssel).</div>
+
+<h4 id="Beispiel_mit_einer_Funktion">Beispiel mit einer Funktion</h4>
+
+<pre class="brush: js">function replacer(key, value) {
+  if (typeof value === "string") {
+    return undefined;
+  }
+  return value;
+}
+
+var foo = {foundation: "Mozilla", model: "box", week: 45, transport: "car", month: 7};
+var jsonString = JSON.stringify(foo, replacer);
+//  <code>{"week":45,"month":7}</code> </pre>
+
+<h4 id="Beispiel_mit_einem_Array">Beispiel mit einem Array</h4>
+
+<p>Wenn <code>replacer</code> ein Array ist, geben die Werte des Arrays die Namen der Eigenschaften an, die im JSON-String mit aufgenommen werden sollen.</p>
+
+<pre class="brush: js">JSON.stringify(foo, ['week', 'month']);
+// '{"week":45,"month":7}', only keep "week" and "month" properties
+</pre>
+
+<h3 id="Der_space_Parameter"><a id="The space argument" name="The space argument"></a>Der <code>space</code> Parameter</h3>
+
+<p>Der <code>space</code> Parameter wird eingesetzt, um die Abstände in dem JSON-String zu beeinflussen. Wenn es eine Zahl ist, werden sukzessiv alle Stufen um die angegebene Anzahl von Leerzeichen (bis zu 10) eingerückt. Wenn <code>space</code> ein String ist, werden sukzessiv alle Stufen mit dem angegebenen String eingerückt (oder mit den ersten zehn Zeichen).</p>
+
+<pre class="brush: js">JSON.stringify({ a: 2 }, null, ' ');
+// '{
+//  "a": 2
+// }'
+</pre>
+
+<p>Einsatz eines Tab-Zeichens als Standard für leserliches Aussehen:</p>
+
+<pre class="brush: js">JSON.stringify({ uno: 1, dos: 2 }, null, '\t');
+// returns the string:
+// '{
+//     "uno": 1,
+//     "dos": 2
+// }'
+</pre>
+
+<h3 id="toJSON_Verhalten"><code>toJSON()</code> Verhalten</h3>
+
+<p>Wenn ein Objekt in ein JSON-String umgewandelt werden soll und eine Eigenschaft mit dem Namen <code>toJSON</code>, dessen Wert eine Funktion ist, wird die <code>toJSON()</code> Funktion eingesetzt um ein JSON-String zu erstellen: Anstatt, dass das Objekt normal serialisiert wird, wird die <code>toJSON()</code> Funktion aufgerufen und der Rückgabewert serialisiert. JSON.stringify ruft <code>toJSON</code> mit einem Parameter auf:</p>
+
+<ul>
+ <li>wenn das Objekt ein Eigenschaftswert ist, dann der Name der Eigenschaft</li>
+ <li>wenn es ein Array ist, dann den Index im Array als String</li>
+ <li>ein leerer String, wenn JSON.stringify direkt auf dem Objekt aufgerufen wurde</li>
+</ul>
+
+<p>Zum Beispiel:</p>
+
+<pre class="brush: js">var obj = {
+    data: 'data',
+
+    toJSON(key){
+        if(key)
+            return `Now I am a nested Object under key '${key}'`;
+
+        else
+            return this;
+    }
+};
+
+JSON.stringify(obj);
+// Returns '{"data":"data"}'
+
+JSON.stringify({ obj });
+// Returns '{"obj":"Now I am a nested object under key 'obj'"}'
+
+JSON.stringify([ obj ])
+// Returns '["Now I am a nested object under key '0'"]'</pre>
+
+<h3 id="Probleme_mit_JSON.stringify_bei_zyklischen_Referenzen">Probleme mit <code>JSON.stringify</code> bei zyklischen Referenzen</h3>
+
+<p>Zu beachten ist, dass das <a href="https://www.json.org/">JSON Format</a> keine Objektreferenzen unterstützt (es existiert nur ein <a href="http://tools.ietf.org/html/draft-pbryan-zyp-json-ref-03">IETF Entwurf</a>), so dass ein {{jsxref("TypeError")}} erzeugt wird, wenn ein Objekt mit zyklischen Referenzen übersetzt werden soll.</p>
+
+<pre class="brush: js example-bad">const circularReference = {};
+circularReference.myself = circularReference;
+
+// Serializing circular references throws "TypeError: cyclic object value"
+JSON.stringify(circularReference);
+</pre>
+
+<p>Um zyklische Referenzen zu Serialisieren, wird ein Bibliothek mit solchen Funktionen benötigt (z. B. <a href="https://github.com/douglascrockford/JSON-js/blob/master/cycle.js">cycle.js</a> von Douglas Crockford) oder es muss eine eigene Lösung implementiert werden, welche zyklische Referenzen bei serialisierbaren Werten findet und ersetzt (oder entfernt).</p>
+
+<h3 id="Probleme_mit_reinem_Einsatz_von_JSON.stringify_für_JavaScript">Probleme mit reinem Einsatz von <code>JSON.stringify</code> für JavaScript</h3>
+
+<p>Man muss anmerken, dass JSON <a href="http://timelessrepo.com/json-isnt-a-javascript-subset">keine komplette strikte Untermenge von JavaScript ist (englisch)</a>. Es gibt nämlich zwei Zeilentrenner (Zeilentrenner und Paragraphentrenner), die in JSON nicht escaped werden müssen, in JavasScript jedoch schon. Wenn ein JSON nun ausgewertet oder direkt in <a href="https://de.wikipedia.org/wiki/JavaScript_Object_Notation#JSONP">JSONP</a> eingesetzt werden soll, kann der folgende Quelltext verwendet werden:</p>
+
+<pre class="brush: js">function jsFriendlyJSONStringify (s) {
+    return JSON.stringify(s).
+        replace(/\u2028/g, '\\u2028').
+        replace(/\u2029/g, '\\u2029');
+}
+
+var s = {
+    a: String.fromCharCode(0x2028),
+    b: String.fromCharCode(0x2029)
+};
+try {
+    eval('(' + JSON.stringify(s) + ')');
+} catch (e) {
+    console.log(e); // "SyntaxError: unterminated string literal"
+}
+
+// kein catch benötigt
+eval('(' + jsFriendlyJSONStringify(s) + ')');
+
+// console.log in Firefox unescapes den Unicode wenn
+// in die Konsole geloggt wird, weshalb hier alert eingesetzt wird.
+alert(jsFriendlyJSONStringify(s)); // {"a":"\u2028","b":"\u2029"}</pre>
+
+<h3 id="Beispiel_für_Einsatz_von_JSON.stringify_mit_localStorage">Beispiel für Einsatz von <code>JSON.stringify()</code> mit <code>localStorage</code></h3>
+
+<p>In einem Fall, indem man ein Objekt speichern möchte, dass von einem Benutzer erstellt wurde, und dem Benutzer dieses auch nach dem Schließen des Browsers wieder zur Verfügung stellten möchte, ist ein Beispiel für die Anwendung von <code>JSON.stringify()</code>:</p>
+
+<pre class="brush: js">// Creating an example of JSON
+var session = {
+  'screens': [],
+  'state': true
+};
+session.screens.push({ 'name': 'screenA', 'width': 450, 'height': 250 });
+session.screens.push({ 'name': 'screenB', 'width': 650, 'height': 350 });
+session.screens.push({ 'name': 'screenC', 'width': 750, 'height': 120 });
+session.screens.push({ 'name': 'screenD', 'width': 250, 'height': 60 });
+session.screens.push({ 'name': 'screenE', 'width': 390, 'height': 120 });
+session.screens.push({ 'name': 'screenF', 'width': 1240, 'height': 650 });
+
+// Konvertiert zu einem JSON-String mit JSON.stringify().
+// Dann wird der String des session-Objektes im localStorage gespeichert.
+localStorage.setItem('session', JSON.stringify(session));
+
+// Beispiel wie man den mit JSON.stringify() generierten und
+// im localStorage gespeicherten JSON-String in ein Objekt umwandelt.
+var restoredSession = JSON.parse(localStorage.getItem('session'));
+
+// Jetzt enthält die Variable restoredSession das im localStorage
+// abgespeicherte Objekt
+console.log(restoredSession);
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.12.3', 'JSON.stringify')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.7.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-json.stringify', 'JSON.stringify')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-json.stringify', 'JSON.stringify')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.JSON.stringify")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("JSON.parse()")}}</li>
+ <li><a href="https://github.com/douglascrockford/JSON-js/blob/master/cycle.js">cycle.js</a> – Führt zwei Funktionen ein, <code>JSON.decycle</code> und <code>JSON.retrocycle</code>, welche es ermöglichen zyklische Strukturen zu kodieren und dekodieren und eine erweiterbare und JSON Format kompatible Struktur bietet.</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/map/@@iterator/index.html b/files/de/web/javascript/reference/global_objects/map/@@iterator/index.html
new file mode 100644
index 0000000000..8f480772d1
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/map/@@iterator/index.html
@@ -0,0 +1,102 @@
+---
+title: 'Map.prototype[@@iterator]()'
+slug: Web/JavaScript/Reference/Global_Objects/Map/@@iterator
+tags:
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Map
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/@@iterator
+---
+<div>{{JSRef}}</div>
+
+<p class="seoSummary">Der initialewert der <code><strong>@@iterator</strong></code> Eigenschaft enthält das selbe Funktionsobjekt wie der Wert in der {{jsxref("Map.prototype.entries()", "entries")}} Methode.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/map-prototype-@@iterator.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><em>myMap</em>[Symbol.iterator]</code></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Die <strong>iterator</strong> Funktion von <code>map</code> ist im Standardfall die {{jsxref("Map.prototype.entries()", "entries()")}} Funktion.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_iterator()">Einsatz von <code>[@@iterator]()</code></h3>
+
+<pre class="brush:js">const myMap = new Map();
+myMap.set('0', 'foo');
+myMap.set(1, 'bar');
+myMap.set({}, 'baz');
+
+const mapIter = myMap[Symbol.iterator]();
+
+console.log(mapIter.next().value); // ["0", "foo"]
+console.log(mapIter.next().value); // [1, "bar"]
+console.log(mapIter.next().value); // [Object, "baz"]
+</pre>
+
+<h3 id="Einsatz_von_iterator()_mit_for..of">Einsatz von <code>[@@iterator]()</code> mit <code>for..of</code></h3>
+
+<pre class="brush: js">const myMap = new Map();
+myMap.set('0', 'foo');
+myMap.set(1, 'bar');
+myMap.set({}, 'baz');
+
+for (const entry of myMap) {
+  console.log(entry);
+}
+// ["0", "foo"]
+// [1, "bar"]
+// [{}, "baz"]
+
+for (const [key, value] of myMap) {
+  console.log(`${key}: ${value}`);
+}
+// 0: foo
+// 1: bar
+// [Object]: baz
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-map.prototype-@@iterator', 'Map.prototype[@@iterator]()')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map.prototype-@@iterator', 'Map.prototype[@@iterator]()')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Map.@@iterator")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Map.prototype.entries()")}}</li>
+ <li>{{jsxref("Map.prototype.keys()")}}</li>
+ <li>{{jsxref("Map.prototype.values()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/map/@@species/index.html b/files/de/web/javascript/reference/global_objects/map/@@species/index.html
new file mode 100644
index 0000000000..8dc72de6bc
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/map/@@species/index.html
@@ -0,0 +1,72 @@
+---
+title: 'get Map[@@species]'
+slug: Web/JavaScript/Reference/Global_Objects/Map/@@species
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Map
+  - Property
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/@@species
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>Map[@@species]</strong></code> Zugriffseigenschaft gibt den <code>Map</code> Konstruktor zurück.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Map[Symbol.species]
+</pre>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>species</code> Zugriffseigenschaft gibt den Standard-Konstruktor für <code>Map</code> Objekte zurück. Konstruktoren von Unterklassen überschreiben diese Eigenschaft manchmal, um die Konstruktorzuweisung zu ändern.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Die <code>species</code> Eigenschaft gibt die Standard-Konstruktorfunktion, welches der <code>Map</code> Konstruktor von <code>Map</code> Objekten ist:</p>
+
+<pre class="brush: js">Map[Symbol.species]; // function Map()</pre>
+
+<p>In einem abgeleiteten Collection Objekt (z. B. eine Benutzerdifinierte Map <code>MyMap</code>) ist der <code>species</code> von <code>MyMap</code> der <code>MyMap</code> Konstruktor. Manchmal, wenn dieser Überschrieben wird das Eltern <code>Map</code> Objekt in der abgeleiteten Klassenmethode verwenden:</p>
+
+<pre class="brush: js">class MyMap extends Map {
+  // Overwrite MyMap species to the parent Map constructor
+  static get [Symbol.species]() { return Map; }
+}</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-get-map-@@species', 'get Map [ @@species ]')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-map-@@species', 'get Map [ @@species ]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Map.@@species")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+ <li>{{jsxref("Symbol.species")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/map/@@tostringtag/index.html b/files/de/web/javascript/reference/global_objects/map/@@tostringtag/index.html
new file mode 100644
index 0000000000..50d1515963
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/map/@@tostringtag/index.html
@@ -0,0 +1,58 @@
+---
+title: 'Map.prototype[@@toStringTag]'
+slug: Web/JavaScript/Reference/Global_Objects/Map/@@toStringTag
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Map
+  - Property
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/@@toStringTag
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Map[@@toStringTag]</code></strong> Eigenschaft hat den initialen Wert <code>"Map"</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/map-prototype-@@tostringtag.html")}}</div>
+
+
+
+<div>{{js_property_attributes(0,0,1)}}</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Map[Symbol.toStringTag]</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush:js">Object.prototype.toString.call(new Map()) // "[object Map]"
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-map.prototype-@@tostringtag', 'Map.prototype[@@toStringTag]')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map.prototype-@@tostringtag', 'Map.prototype[@@toStringTag]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Map.@@toStringTag")}}</p>
diff --git a/files/de/web/javascript/reference/global_objects/map/clear/index.html b/files/de/web/javascript/reference/global_objects/map/clear/index.html
new file mode 100644
index 0000000000..6ae31b4dee
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/map/clear/index.html
@@ -0,0 +1,77 @@
+---
+title: Map.prototype.clear()
+slug: Web/JavaScript/Reference/Global_Objects/Map/clear
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Map
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/clear
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>clear()</strong></code> Methode entfernt alle Elemente von einem <code>Map</code> Objekt.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/map-prototype-clear.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><em>myMap</em>.clear();</code></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_der_clear_Methode">Einsatz der <code>clear</code> Methode</h3>
+
+<pre class="brush: js">var myMap = new Map();
+myMap.set('bar', 'baz');
+myMap.set(1, 'foo');
+
+myMap.size;       // 2
+myMap.has('bar'); // true
+
+myMap.clear();
+
+myMap.size;       // 0
+myMap.has('bar')  // false
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-map.prototype.clear', 'Map.prototype.clear')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map.prototype.clear', 'Map.prototype.clear')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Map.clear")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/map/delete/index.html b/files/de/web/javascript/reference/global_objects/map/delete/index.html
new file mode 100644
index 0000000000..40f38a6931
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/map/delete/index.html
@@ -0,0 +1,73 @@
+---
+title: Map.prototype.delete()
+slug: Web/JavaScript/Reference/Global_Objects/Map/delete
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Map
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/delete
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>delete()</code></strong> Methode entfernt das Element mit eine bestimmten Schlüssel von einem <code>Map</code> Objekt.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/map-prototype-delete.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js"><var>myMap</var>.delete(<var>key</var>);</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt>key</dt>
+ <dd>Der Schlüssel des Element, welches aus dem <code>Map</code> Objekt entfernt wird.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Gibt <code>true</code> zurück, wenn ein Element in der <code>Map</code> existiert und gelöscht wird, oder <code>false</code> wenn kein Element existiert.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_der_delete_Methode">Einsatz der <code>delete</code> Methode</h3>
+
+<pre class="brush: js">var myMap = new Map();
+myMap.set('bar', 'foo');
+
+myMap.delete('bar'); // Returns true. Successfully removed.
+myMap.has('bar');    // Returns false. The "bar" element is no longer present.
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map.prototype.delete', 'Map.prototype.delete')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-map.prototype.delete', 'Map.prototype.delete')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Map.delete")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/map/entries/index.html b/files/de/web/javascript/reference/global_objects/map/entries/index.html
new file mode 100644
index 0000000000..018cd8088a
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/map/entries/index.html
@@ -0,0 +1,78 @@
+---
+title: Map.prototype.entries()
+slug: Web/JavaScript/Reference/Global_Objects/Map/entries
+tags:
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Map
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/entries
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>entries()</strong></code> Methode gibt ein neues <strong><a href="/de/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iterator</a></strong> Objekt mit allen <code>[Schlüssel, Wert]</code> Paaren von jedem Element in dem <code>Map</code> Objekt in Einfügereihenfolge zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/map-prototype-entries.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><em>myMap</em>.entries()</code></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein neues {{jsxref("Map")}} Iterator Objekt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_entries()">Einsatz von <code>entries()</code></h3>
+
+<pre class="brush:js">var myMap = new Map();
+myMap.set('0', 'foo');
+myMap.set(1, 'bar');
+myMap.set({}, 'baz');
+
+var mapIter = myMap.entries();
+
+console.log(mapIter.next().value); // ["0", "foo"]
+console.log(mapIter.next().value); // [1, "bar"]
+console.log(mapIter.next().value); // [Object, "baz"]
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-map.prototype.entries', 'Map.prototype.entries')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map.prototype.entries', 'Map.prototype.entries')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Map.entries")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Map.prototype.keys()")}}</li>
+ <li>{{jsxref("Map.prototype.values()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/map/foreach/index.html b/files/de/web/javascript/reference/global_objects/map/foreach/index.html
new file mode 100644
index 0000000000..017fa9b069
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/map/foreach/index.html
@@ -0,0 +1,104 @@
+---
+title: Map.prototype.forEach()
+slug: Web/JavaScript/Reference/Global_Objects/Map/forEach
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Map
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/forEach
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>forEach()</strong></code> Methode führt eine übergebene Funktion für jedes Schlüssel/Wert Paar in dem <code>Map</code> Objekt in der Einfügereihenfolge aus.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/map-prototype-foreach.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><em>myMap</em>.forEach(<em>callback</em>[, <em>thisArg</em>])</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Funktion, die für jedes Schlüssel/Werte-Paar aufgerufen wird.</dd>
+ <dt><code>thisArg</code></dt>
+ <dd>Wert, der bei der Ausführung der <code>callback</code>-Funktion als <code>this</code> genutzt wird.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>forEach</code> Methode ruft die übergebene Funktion für jedes Schlüssel/Wert Paar in dem <code>Map</code> Objekt aus. Die <code>callback</code> Funktion wird nicht aufgerufen, wenn der Schlüssel gelöscht wurde. Sie wird aber aufgerufen, wenn der aktuelle Wert <code>undefined</code> ist.</p>
+
+<p>Die <code>callback</code> Funktion wird mit <strong>drei Parametern</strong> aufgerufen:</p>
+
+<ul>
+ <li>der <strong>Wert des Elements</strong></li>
+ <li>der <strong>Schlüssel des Elements</strong></li>
+ <li>das <strong><code>Map</code> Objekt, das durchlaufen wird</strong></li>
+</ul>
+
+<p>Wenn der <code>thisArg</code>-Parameter an <code>forEach</code> übergeben wird, wird er auch an die <code>callback-Funktion</code> als deren <code>this</code> Wert weitergegeben.  Andernfalls wird dafür <code>undefined</code> genutzt.  <code>Der this</code>-Wert, der in der <code>callback-Funktion</code> wahrgenommen wird, ist festgelegt durch <a href="/de/docs/Web/JavaScript/Reference/Operators/this">die generellen Regeln für die Nutzung von <code>this</code> in einer Funktion.</a></p>
+
+<p>Jeder Wert wird einmal besucht, mit Außnahme von Fällen, in denen ein Wert glöscht und neu hinzugefügt wird, bevor <code>forEach</code> fertig ist. Die <code>callback</code> Funktion wird nicht für Wert aufgerufen, die vorher gelöscht wurden. Neue Werte, die vor der Beendigung von <code>forEach</code> hinzugefügt werden, werden berücksichtigt.</p>
+
+<p>Die <code>forEach</code> Methode ruft <code>callback</code> für jedes Element in dem <code>Map</code> Objekt aus.  <code>forEach</code> gibt keinen Wert zurück.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Ausgabe_der_Inhalte_eines_Map_Objekts">Ausgabe der Inhalte eines <code>Map</code> Objekts</h3>
+
+<p>Der folgende Code gibt für jedes Element in der Map eine Nachricht in der Konsole aus.</p>
+
+<pre class="brush:js">function logMapElements(value, key, map) {
+    console.log(`m[${key}] = ${value}`);
+}
+new Map([['foo', 3], ['bar', {}], ['baz', undefined]]).forEach(logMapElements);
+// logs:
+// "m[foo] = 3"
+// "m[bar] = [object Object]"
+// "m[baz] = undefined"
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Map.forEach")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Set.prototype.forEach()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/map/get/index.html b/files/de/web/javascript/reference/global_objects/map/get/index.html
new file mode 100644
index 0000000000..c178c59f0b
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/map/get/index.html
@@ -0,0 +1,80 @@
+---
+title: Map.prototype.get()
+slug: Web/JavaScript/Reference/Global_Objects/Map/get
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Map
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/get
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>get()</strong></code> Methode gibt eine Spezielles Element aus einem <code>Map</code> Objekt zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/map-prototype-get.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><em>myMap</em>.get(schlüssel);</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt>schlüssel</dt>
+ <dd>Der Schlüssel eines Elements, welches aus der <code>Map</code> zurückgegeben wird.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Gibt das Element zurück, welches zu dem Schlüssel gehört oder <code>undefined</code>, wenn kein Schlüssel in dem <code>Map</code> Objekt vorhanden ist.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_der_get_Methode">Einsatz der <code>get</code> Methode</h3>
+
+<pre class="brush: js">var myMap = new Map();
+myMap.set('bar', 'foo');
+
+myMap.get('bar');  // Returns "foo".
+myMap.get('baz');  // Returns undefined.
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-map.prototype.get', 'Map.prototype.get')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map.prototype.get', 'Map.prototype.get')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Map.get")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+ <li>{{jsxref("Map.prototype.set()")}}</li>
+ <li>{{jsxref("Map.prototype.has()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/map/has/index.html b/files/de/web/javascript/reference/global_objects/map/has/index.html
new file mode 100644
index 0000000000..ea4df56c27
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/map/has/index.html
@@ -0,0 +1,83 @@
+---
+title: Map.prototype.has()
+slug: Web/JavaScript/Reference/Global_Objects/Map/has
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Map
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/has
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>has()</strong></code> Methode gibt einen boolean zurück, welcher angibt, ob ein spezieller Schlüssel vorhanden ist oder nicht.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/map-prototype-has.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><em>myMap</em>.has(schlüssel);</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt>schlüssel</dt>
+ <dd>Der Schlüssel, auf dessen Präsenz in dem <code>Map</code> Objekt geprüft wird.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<dl>
+ <dt>Boolean</dt>
+ <dd>Gibt <code>true</code> zurück, wenn ein Element mit Schlüssel in dem <code>Map</code> Objekt existiert, andernfalls <code>false</code>.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_der_has_Methode">Einsatz der <code>has</code> Methode</h3>
+
+<pre class="brush: js">var myMap = new Map();
+myMap.set('bar', "foo");
+
+myMap.has('bar');  // returns true
+myMap.has('baz');  // returns false
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-map.prototype.has', 'Map.prototype.has')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map.prototype.has', 'Map.prototype.has')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Map.has")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+ <li>{{jsxref("Map.prototype.set()")}}</li>
+ <li>{{jsxref("Map.prototype.get()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/map/index.html b/files/de/web/javascript/reference/global_objects/map/index.html
new file mode 100644
index 0000000000..3cfa11c840
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/map/index.html
@@ -0,0 +1,207 @@
+---
+title: Map
+slug: Web/JavaScript/Reference/Global_Objects/Map
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Map
+translation_of: Web/JavaScript/Reference/Global_Objects/Map
+---
+<div>{{JSRef}}</div>
+
+<div>Das <code><strong>Map</strong></code> Objekt ist eine einfache Schlüssel/Wert Zuordnung. Jeder Wert (Sowohl Objekte, als auch  {{Glossary("Primitive", "primitive Datentypen")}}) kann als Schlüssel/Wert verwendet werden.</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">new Map([iterable])</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>iterable</code></dt>
+ <dd>
+ <p class="syntaxbox">Der Parameter <code>iterable</code> ist ein Array oder anderes iterierbares Objekt, dessen Elemente Schlüssel-Wert Paare (2-Element Arrays) sind. Jedes Schlüssel-Wert Paar wird der neuen Map hinzugefügt.</p>
+ </dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Ein Map Object iteriert in der Reihenfolge des Einfügens über seine Elemente — eine {{jsxref("Statements/for...of", "for...of")}} Schleife gibt ein Array mit <code>[key, value]</code> für jede Iteration zurück.</p>
+
+<p>Es ist festzuhalten, dass eine <code>Map</code>, bestehend aus <code>objects</code>, insbesondere ein "<code>dictionary of dictionaries</code>", nur nach der Einfügereihenfolge angelegt wird, die zufällig und ungeordnet ist.</p>
+
+<h3 id="Schlüsselvergleich">Schlüsselvergleich</h3>
+
+<p>Der Schlüsselvergleich basiert auf dem "gleicher-Wert" Algorithmus: <code>NaN</code> wird als gleich mit einer anderen <code>NaN</code> angesehen (trotz dem, dass <code>NaN !== NaN</code>) und alle anderen Werte müssen typ- und wert identisch, wie beim <code>===</code> Operator, sein. In der aktuellen ECMAScript Spezifikation werden <code>-0</code> und <code>+0</code> als gleich behandelt, auch wenn dies in früheren Entwürfen anders war. Details dazu sind der Tabelle <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Map$edit#Browser_compatibility">browser compatibility </a>zu entnehmen. </p>
+
+<h3 id="Objects_und_Maps_im_Vergleich">Objects und Maps im Vergleich</h3>
+
+<p>{{jsxref("Object", "Objects")}} und Maps haben einige gemeinsame Eigenschaften. In beiden lassen sich Schlüssel auf Werte setzen, diese Werte wiederfinden, Schlüssel löschen und herausfinden, ob etwas unter einem bestimmten Schlüssel gespeichert ist. Aus diesem Grund (und weil es keine spracheigenen Alternativen gab) wurden früher <code>Objects</code> als <code>Maps</code> benutzt. Doch es gibt bedeutende Unterschiede zwischen diesen beiden Strukturen, die es in verschiedenen Fällen zu beachten gilt:</p>
+
+<ul>
+ <li>Die Schlüssel eines <code>Object</code>s sind {{jsxref("String", "Strings")}} und {{jsxref("Symbol", "Symbols")}}, während sie bei einer <code>Map</code> jeglichen Wert haben können. Inklusive <code>functions</code>, <code>objects</code>, und alle <code>primitive</code>.</li>
+ <li>Die Grösse einer <code>Map</code> lässt sich einfach über die <code>size</code> Eigenschaft ermitteln, während die Zahl der Eigenschaften in einem <code>Object</code> erst manuell herausgefunden werden müssen.</li>
+ <li>Eine <code>Map</code> ist iterierbar, wohingegen das Iterieren über ein <code>Object </code>erfordert, dass man dessen Schlüssel temporär extrahiert und dann über diese iteriert.</li>
+ <li>Ein <code>Object</code> hat einen Prototypen mit default-Schlüsseln in seiner Map, die mit den Namen von selbst angelegten Schlüsseln kollidieren können, wenn man nicht aufpasst. Seit ES5 lässt sich dies durch die Anweisung <code>map = Object.create(null)</code> umgehen, was aber selten verwendet wird.</li>
+ <li>Eine <code>Map</code> bietet in Szenarien mit hochfrequentem Einfügen und Löschen von Schlüssel-Wert Paaren ein besseres Laufzeitverhalten als <code>Objects</code>.</li>
+</ul>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt><code>Map.length</code></dt>
+ <dd>Der Wert von <code>length</code> beträgt 0.</dd>
+ <dt>{{jsxref("Map.@@species", "get Map[@@species]")}}</dt>
+ <dd>Die Konstruktor-Funktion, zum Erzeugen abgeleiteter Objekte.</dd>
+ <dt>{{jsxref("Map.prototype")}}</dt>
+ <dd>Repräsentiert den Prototyp für den <code>Map</code> Konstruktor. Erlaubt das Hinzufügen von Eigenschaften zu allen <code>Map</code> Objekten.</dd>
+</dl>
+
+<h2 id="Map_Instanzen"><code>Map</code> Instanzen</h2>
+
+<p>Alle <code>Map</code> Instanzen erben von {{jsxref("Map.prototype")}}.</p>
+
+<h3 id="Eigenschaften_2">Eigenschaften</h3>
+
+<p>{{page('/de/Web/JavaScript/Reference/Global_Objects/Map/prototype','Eigenschaften')}}</p>
+
+<h3 id="Methoden">Methoden</h3>
+
+<p>{{page('/de/Web/JavaScript/Reference/Global_Objects/Map/prototype','Methoden')}}</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_vom_Map_Objekt">Einsatz vom <code>Map</code> Objekt</h3>
+
+<pre class="brush: js">var myMap = new Map();
+
+var keyString = "ein string",
+    keyObj = {},
+    keyFunc = function () {};
+
+// setting the values
+myMap.set(keyString, "value associated with 'ein string'");
+myMap.set(keyObj, "value associated with keyObj");
+myMap.set(keyFunc, "value associated with keyFunc");
+
+myMap.size; // 3
+
+// getting the values
+myMap.get(keyString);    // "value associated with 'ein string'"
+myMap.get(keyObj);       // "value associated with keyObj"
+myMap.get(keyFunc);      // "value associated with keyFunc"
+
+myMap.get("ein string");   // "value associated with 'ein string'"
+                         // because keyString === 'ein string'
+myMap.get({});           // undefined, because keyObj !== {}
+myMap.get(function() {}) // undefined, because keyFunc !== function () {}
+</pre>
+
+<h3 id="Benutzung_von_NaN_als_Map_Schlüssel">Benutzung von <code>NaN</code> als <code>Map</code> Schlüssel</h3>
+
+<p><code>NaN</code> kann auch als Schlüssel benutzt werden. Auch wenn jede <code>NaN</code> nicht gleich zu sich selbst ist (<code>NaN !== NaN</code> is true) funktioniert das folgende Beispiel, da <code>NaN</code>s ununterscheidbar von jeder anderen ist:</p>
+
+<pre class="brush: js">var myMap = new Map();
+myMap.set(NaN, "not a number");
+
+myMap.get(NaN); // "not a number"
+
+var otherNaN = Number("foo");
+myMap.get(otherNaN); // "not a number"
+</pre>
+
+<h3 id="Iterieren_über_Maps_mit_for..of">Iterieren über <code>Maps</code> mit <code>for..of</code></h3>
+
+<p>Über Maps kann mit der <code>for..of</code> Schleife iteriert werden:</p>
+
+<pre class="brush: js">var myMap = new Map();
+myMap.set(0, "zero");
+myMap.set(1, "one");
+for (var [key, value] of myMap) {
+  console.log(key + " = " + value);
+}
+// 0 = zero
+// 1 = one
+
+for (var key of myMap.keys()) {
+  console.log(key);
+}
+// 0
+// 1
+
+for (var value of myMap.values()) {
+  console.log(value);
+}
+// zero
+// one
+
+for (var [key, value] of myMap.entries()) {
+  console.log(key + " = " + value);
+}
+// 0 = zero
+// 1 = one
+</pre>
+
+<h3 id="Integration_von_Maps_mit_forEach">Integration von <code>Maps</code> mit <code>forEach()</code></h3>
+
+<p>Über Maps kann mit der <code>forEach()</code> method iteriert werden:</p>
+
+<pre class="brush: js">myMap.forEach(function(value, key) {
+  console.log(key + " = " + value);
+}, myMap)
+// Will show 2 logs; first with "0 = zero" and second with "1 = one"
+</pre>
+
+<h3 id="Relation_mit_Array_Objekten">Relation mit <code>Array</code> Objekten</h3>
+
+<pre class="brush: js">var kvArray = [['key1', 'value1'], ['key2', 'value2']];
+
+// Use the regular Map constructor to transform a 2D key-value Array into a map
+var myMap = new Map(kvArray);
+
+myMap.get('key1'); // returns "value1"
+
+// Use the Array.from function to transform a map into a 2D key-value Array
+console.log(Array.from(myMap)); // Will show you exactly the same Array as kvArray
+
+// Or use the keys or values iterators and convert them to an array
+console.log(Array.from(myMap.keys())); // Will show ["key1", "key2"]
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-map-objects', 'Map')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map-objects', 'Map')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Map")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=697479">Map and Set bug at Mozilla</a></li>
+ <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:simple_maps_and_sets">ECMAScript Harmony proposal</a></li>
+ <li>{{jsxref("Set")}}</li>
+ <li>{{jsxref("WeakMap")}}</li>
+ <li>{{jsxref("WeakSet")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/map/keys/index.html b/files/de/web/javascript/reference/global_objects/map/keys/index.html
new file mode 100644
index 0000000000..0f8187752b
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/map/keys/index.html
@@ -0,0 +1,69 @@
+---
+title: Map.prototype.keys()
+slug: Web/JavaScript/Reference/Global_Objects/Map/keys
+tags:
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Map
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/keys
+---
+<div>{{JSRef}}</div>
+
+<p>Die Methode <code><strong>keys()</strong></code> gibt ein neues <code><strong><a href="/de/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iterator</a></strong></code> Objekt zurück, das die Schlüssel für alle Elemente des <code>Map</code> Objekts in der Reihenfolge des Einfügens enthält.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/map-prototype-keys.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><em>myMap</em>.keys()</code></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein neues {{jsxref("Map")}} Iterator-Objekt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Verwendung_von_keys">Verwendung von <code>keys()</code></h3>
+
+<pre class="brush:js">var myMap = new Map();
+myMap.set('0', 'foo');
+myMap.set(1, 'bar');
+myMap.set({}, 'baz');
+
+var mapIter = myMap.keys();
+
+console.log(mapIter.next().value); // "0"
+console.log(mapIter.next().value); // 1
+console.log(mapIter.next().value); // Object
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map.prototype.keys', 'Map.prototype.keys')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Map.keys")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Map.prototype.entries()")}}</li>
+ <li>{{jsxref("Map.prototype.values()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/map/prototype/index.html b/files/de/web/javascript/reference/global_objects/map/prototype/index.html
new file mode 100644
index 0000000000..1c7b6350cf
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/map/prototype/index.html
@@ -0,0 +1,86 @@
+---
+title: Map.prototype
+slug: Web/JavaScript/Reference/Global_Objects/Map/prototype
+tags:
+  - JavaScript
+  - Map
+  - Property
+translation_of: Web/JavaScript/Reference/Global_Objects/Map
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>Map</strong></code><strong><code>.prototype</code></strong> Eigenschaft repräsentiert den Prototyp für den {{jsxref("Map")}} Konstruktor.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>{{jsxref("Map")}} Instanzen erben von {{jsxref("Map.prototype")}}. Man kann das prototype Objekt des Konstruktors nutzen, um Eigenschaften oder Methoden für alle <code>map</code> Instanzen hinzuzufügen.</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt><code>Map.prototype.constructor</code></dt>
+ <dd>Gibt die Funktion zurück, die einen Instanzenprototype erstellt. Der Standardwert ist die {{jsxref("Map")}} Funktion.</dd>
+ <dt>{{jsxref("Map.prototype.size")}}</dt>
+ <dd>Gibt die Anzahl an Schlüssel/Werte-Paaren in dem <code>Map</code> Objekt zurück.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<dl>
+ <dt>{{jsxref("Map.prototype.clear()")}}</dt>
+ <dd>Entfernt alle Schlüssel/Werte-Paare von dem <code>Map</code> Objekt.</dd>
+ <dt>{{jsxref("Map.delete", "Map.prototype.delete(schlüssel)")}}</dt>
+ <dd>Gibt <code>true</code> zurück, wenn ein Element im <code>Map</code> Objekt existiert und gelöscht wird, oder <code>false</code> wenn das Element nicht existiert. <code>Map.prototype.has(schlüssel)</code> wird danach <code>false</code> zurückgeben.</dd>
+ <dt>{{jsxref("Map.prototype.entries()")}}</dt>
+ <dd>Gibt ein neues <code>Iterator</code> Objekt mit allen <strong><code>[Schlüssel, Wert]</code> Paaren als Array</strong> von jedem Element in dem <code>Map</code> Objekt in Einfügereihenfolge zurück.</dd>
+ <dt>{{jsxref("Map.forEach", "Map.prototype.forEach(callbackFn[, thisArg])")}}</dt>
+ <dd>Ruft <code>callbackFn</code> einmal für jedes Schlüssel/Wert Paar in dem <code>Map</code> Objekt in der Einfügereihenfolge aus. Wenn ein thisArg Parameter angegeben ist, wird dieser als <code>this</code> für jeden Funktionsaufruf benutzt.</dd>
+ <dt>{{jsxref("Map.get", "Map.prototype.get(schlüssel)")}}</dt>
+ <dd>Gibt den Wert zu dem zugehörigen <code>schlüssel</code> zurück oder <code>undefined</code> wenn dieser nicht existiert.</dd>
+ <dt>{{jsxref("Map.has", "Map.prototype.has(schlüssel)")}}</dt>
+ <dd>Gibt einen boolean zurück, der angibt, ob ein Wert mit den <code>schlüssel</code> in einem <code>Map</code> Objekt vorhanden ist oder nicht.</dd>
+ <dt>{{jsxref("Map.prototype.keys()")}}</dt>
+ <dd>Gibt ein neues <code>Iterator</code> Objekt mit allen Schlüsseln von jedem Element in dem <code>Map</code> Objekt in Einfügereihenfolge zurück.</dd>
+ <dt>{{jsxref("Map.set", "Map.prototype.set(schlüssel, wert)")}}</dt>
+ <dd>Setzt den <code>wert</code> für einen <code>schlüssel</code> im <code>Map</code> Objekt. Gibt das <code>Map</code> Objekt zurück.</dd>
+ <dt>{{jsxref("Map.prototype.values()")}}</dt>
+ <dd>Gibt ein neues <code>Iterator</code> Objekt mit allen Werten von jedem Element in dem <code>Map</code> Objekt in Einfügereihenfolge zurück.</dd>
+ <dt>{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}</dt>
+ <dd>Gibt ein neues <code>Iterator</code> Objekt mit allen <strong><code>[Schlüssel, Wert]</code> Paaren als Array</strong> von jedem Element in dem <code>Map</code> Objekt in Einfügereihenfolge zurück.</dd>
+</dl>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-map.prototype', 'Map.prototype')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map.prototype', 'Map.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Map.prototype")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Set.prototype")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/map/set/index.html b/files/de/web/javascript/reference/global_objects/map/set/index.html
new file mode 100644
index 0000000000..dd675fab69
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/map/set/index.html
@@ -0,0 +1,96 @@
+---
+title: Map.prototype.set()
+slug: Web/JavaScript/Reference/Global_Objects/Map/set
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Map
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/set
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>set()</strong></code> Methode fügt ein ELement mit einem spezifischen <code>schlüssel</code> und <code>wert</code> zu einem <code>Map</code> Objekt hinzu oder aktualisiert es.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/map-prototype-set.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><em>myMap</em>.set(schlüssel, wert);</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt>schlüssel</dt>
+ <dd>Der Schlüssel des Elementes, welches zu dem <code>Map</code> Objekt hinzugefügt wird.</dd>
+ <dt>wert</dt>
+ <dd>Der Wert des Elementes, welches zu dem <code>Map</code> Objekt hinzugefügt wird.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Das <code>Map</code> Objekt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_der_set_Methode">Einsatz der <code>set</code> Methode</h3>
+
+<pre class="brush: js">var myMap = new Map();
+
+// Fügt ein neues Element hinzu
+myMap.set('bar', 'foo');
+myMap.set(1, 'foobar');
+
+// Aktualisiert ein Element
+myMap.set('bar', 'baz');
+</pre>
+
+<h3 id="Einsatz_der_set_Methode_mit_Verkettung">Einsatz der <code>set</code> Methode mit Verkettung</h3>
+
+<p>Seit die <code>set()</code> Methode das selbe <code>Map</code> Objekt zurück gibt, kann die Methode wie folgt verkettet aufgerufen werden.</p>
+
+<pre class="brush: js">// Fügt neue Element mit verketteten Aufruf hinzu.
+myMap.set('bar', 'foo')
+     .set(1, 'foobar')
+     .set(2, 'baz');
+
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-map.prototype.set', 'Map.prototype.set')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map.prototype.set', 'Map.prototype.set')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Map.set")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+ <li>{{jsxref("Map.prototype.get()")}}</li>
+ <li>{{jsxref("Map.prototype.has()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/map/size/index.html b/files/de/web/javascript/reference/global_objects/map/size/index.html
new file mode 100644
index 0000000000..3f859dcde5
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/map/size/index.html
@@ -0,0 +1,67 @@
+---
+title: Map.prototype.size
+slug: Web/JavaScript/Reference/Global_Objects/Map/size
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Map
+  - Property
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/size
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>size</strong></code> Zugriffseigenschaft gibt die Anzahl der Elemente in einem {{jsxref("Map")}} Objekt zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/map-prototype-size.html")}}</div>
+
+
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Der Wert von <code>size</code> ist eine ganze Zahl, die angibt, wie viele Einträge ein <code>Map</code> Objekt hat. Die set-Zugriffsfunktion für <code>size</code> ist <code>undefined</code>; diese Eigenschaft kann nicht geändert werden.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_size">Einsatz von <code>size</code></h3>
+
+<pre class="brush:js">var myMap = new Map();
+myMap.set('a', 'alpha');
+myMap.set('b', 'beta');
+myMap.set('g', 'gamma');
+
+myMap.size // 3
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-get-map.prototype.size', 'Map.prototype.size')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-map.prototype.size', 'Map.prototype.size')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Map.size")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/map/values/index.html b/files/de/web/javascript/reference/global_objects/map/values/index.html
new file mode 100644
index 0000000000..3cbe8dd064
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/map/values/index.html
@@ -0,0 +1,77 @@
+---
+title: Map.prototype.values()
+slug: Web/JavaScript/Reference/Global_Objects/Map/values
+tags:
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Map
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/values
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>values()</strong></code> Methode gibt ein neues <strong><a href="/de/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iterator</a></strong> Objekt mit allen Werten aller Elemente des <code>Map</code> Objektes in Einfügereihenfolge zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/map-prototype-values.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><em>myMap</em>.values()</code></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein neues {{jsxref("Map")}} Iterator Objekt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_values()">Einsatz von <code>values()</code></h3>
+
+<pre class="brush:js">var myMap = new Map();
+myMap.set('0', 'foo');
+myMap.set(1, 'bar');
+myMap.set({}, 'baz');
+
+var mapIter = myMap.values();
+
+console.log(mapIter.next().value); // "foo"
+console.log(mapIter.next().value); // "bar"
+console.log(mapIter.next().value); // "baz"</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-map.prototype.values', 'Map.prototype.values')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map.prototype.values', 'Map.prototype.values')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Map.values")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Map.prototype.entries()")}}</li>
+ <li>{{jsxref("Map.prototype.keys()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/math/acos/index.html b/files/de/web/javascript/reference/global_objects/math/acos/index.html
new file mode 100644
index 0000000000..3512f639b1
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/math/acos/index.html
@@ -0,0 +1,103 @@
+---
+title: Math.acos()
+slug: Web/JavaScript/Reference/Global_Objects/Math/acos
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/acos
+---
+<div>{{JSRef}}</div>
+
+<p>Die Funktion <code><strong>Math.acos()</strong></code> gibt den Arkuskosinus (im Radiantenmaß) einer Zahl zurück:</p>
+
+<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>∊</mo><mo stretchy="false">[</mo><mrow><mo>-</mo><mn>1</mn></mrow><mo>;</mo><mn>1</mn><mo stretchy="false">]</mo><mo>,</mo><mspace width="thickmathspace"></mspace><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.acos</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">arccos</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> das gleiche </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>∊</mo><mo stretchy="false">[</mo><mn>0</mn><mo>;</mo><mi>π</mi><mo stretchy="false">]</mo><mspace width="thinmathspace"></mspace><mtext>derart, dass</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">cos</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \in [{-1};1],\;\mathtt{\operatorname{Math.acos}(x)} = \arccos(x) = \text{ das gleiche } \; y \in [0; \pi] \, \text{derart, dass} \; \cos(y)</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-acos.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Math.acos(<em>x</em>) </pre>
+
+<h3 id="Parameters" name="Parameters">Parameter</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Eine Zahl.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Der Arkuskosinus (im Radiantenmaß) der übergebenen Zahl, wenn diese zwischen <strong>-1</strong> und <strong>1</strong> ist. Anderfalls wird {{jsxref("NaN")}} zurückgegeben.</p>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p>Die <code>acos</code> Methode gibt einen numerischen Wert zwischen 0 und {{jsxref("Math/PI", "Pi")}} im Radiantenmaß für x Werte zwischen -1 und 1 zurück.  Wenn der übergebene Wert außerhalb dieses Bereiches liegt, wird {{jsxref("NaN")}} zurückgegeben.</p>
+
+<p>Weil <code>acos</code> eine statische Methode von <code>Math</code> ist, kann dieses immer mit <code>Math.acos()</code> genutzt werden, ohne dass ein Objekt von <code>Math</code> erstellt werden muss (<code>Math</code> ist kein Konstruktor).</p>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<h3 id="Example:_Using_Math.acos" name="Example:_Using_Math.acos">Beispiel: <code>Math.acos</code> benutzen</h3>
+
+<pre class="brush:js">Math.acos(-2);  // NaN
+Math.acos(-1);  // 3.141592653589793
+Math.acos(0);   // 1.5707963267948966
+Math.acos(0.5); // 1.0471975511965979
+Math.acos(1);   // 0
+Math.acos(2);   // NaN
+</pre>
+
+<p>Für Werte kleiner -1 oder größer 1 gibt <code>Math.acos</code> {{jsxref("Global_Objects/NaN", "NaN")}} zurück.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.2', 'Math.acos')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.acos', 'Math.acos')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.acos', 'Math.acos')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.acos")}}</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Math.asin()")}}</li>
+ <li>{{jsxref("Math.atan()")}}</li>
+ <li>{{jsxref("Math.atan2()")}}</li>
+ <li>{{jsxref("Math.cos()")}}</li>
+ <li>{{jsxref("Math.sin()")}}</li>
+ <li>{{jsxref("Math.tan()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/math/acosh/index.html b/files/de/web/javascript/reference/global_objects/math/acosh/index.html
new file mode 100644
index 0000000000..46703ec486
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/math/acosh/index.html
@@ -0,0 +1,98 @@
+---
+title: Math.acosh()
+slug: Web/JavaScript/Reference/Global_Objects/Math/acosh
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/acosh
+---
+<div>{{JSRef}}</div>
+
+<p>Die Funktion <strong><code>Math.acosh()</code></strong> gibt den hyperbolischen<span class="sentence" id="mt1"> </span>Arkuskosinus einer Zahl zurück:</p>
+
+<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>≥</mo><mn>1</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.acosh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="thinmathspace">arcosh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> das Ergebnis </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>≥</mo><mn>0</mn><mspace width="thickmathspace"></mspace><mtext>so  </mtext><mtext>dass</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">cosh</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \geq 1, \mathtt{\operatorname{Math.acosh}(x)} = \operatorname{arcosh}(x) = \text{ the unique } \; y \geq 0 \; \text{such that} \; \cosh(y) = x</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-acosh.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Math.acosh(<var>x</var>)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Eine Zahl.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Der hyperbolische Arkuskosinus der übergebenen Zahl. Wenn die Zahl kleiner als <strong>1</strong> ist, wird {{jsxref("NaN")}} zurückgegeben.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Weil <code>acosh()</code> eine statische Methode von <code>Math</code> ist, muss diese immer mit <code>Math.acosh()</code> genutzt werden, ohne dass ein Objekt von <code>Math</code> erstellt wird (<code>Math</code> ist kein Konstruktor).</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Verwendung_von_Math.acosh()">Verwendung von <code>Math.acosh()</code></h3>
+
+<pre class="brush: js">Math.acosh(-1); // NaN
+Math.acosh(0);  // NaN
+Math.acosh(0.5) // NaN
+Math.acosh(1);  // 0
+Math.acosh(2);  // 1.3169578969248166
+</pre>
+
+<p>Für Werte kleiner 1 <code>Math.acosh()</code> gibt Math.acosh {{jsxref("NaN")}} zurück.</p>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Für <math><semantics><mrow><mi>x</mi><mo>≥</mo><mn>1</mn></mrow><annotation encoding="TeX">x \geq 1</annotation></semantics></math> gilt: <math><semantics><mrow><mo lspace="0em" rspace="thinmathspace">arcosh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mrow><mo>(</mo><mrow><mi>x</mi><mo>+</mo><msqrt><mrow><msup><mi>x</mi><mn>2</mn></msup><mo>-</mo><mn>1</mn></mrow></msqrt></mrow><mo>)</mo></mrow></mrow><annotation encoding="TeX">\operatorname {arcosh} (x) = \ln \left(x + \sqrt{x^{2} - 1} \right)</annotation></semantics></math>, daher kann dieses mit der folgenden Funktion emuliert werden:</p>
+
+<pre class="brush: js">Math.acosh = Math.acosh || function(x) {
+  return Math.log(x + Math.sqrt(x * x - 1));
+};
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.acosh', 'Math.acosh')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.acosh', 'Math.acosh')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.acosh")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Math.asinh()")}}</li>
+ <li>{{jsxref("Math.atanh()")}}</li>
+ <li>{{jsxref("Math.cosh()")}}</li>
+ <li>{{jsxref("Math.sinh()")}}</li>
+ <li>{{jsxref("Math.tanh()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/math/asin/index.html b/files/de/web/javascript/reference/global_objects/math/asin/index.html
new file mode 100644
index 0000000000..bf69f52450
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/math/asin/index.html
@@ -0,0 +1,103 @@
+---
+title: Math.asin()
+slug: Web/JavaScript/Reference/Global_Objects/Math/asin
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/asin
+---
+<div>{{JSRef}}</div>
+
+<p>Die Funktion <strong><code>Math.asin()</code></strong> gibt den Arkussinus (im Radiantenmaß) einer Zahl zurück:</p>
+
+<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>∊</mo><mo stretchy="false">[</mo><mrow><mo>-</mo><mn>1</mn></mrow><mo>;</mo><mn>1</mn><mo stretchy="false">]</mo><mo>,</mo><mspace width="thickmathspace"></mspace><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.asin</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">arcsin</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> das Ergebnis </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>∊</mo><mrow><mo>[</mo><mrow><mo>-</mo><mfrac><mi>π</mi><mn>2</mn></mfrac><mo>;</mo><mfrac><mi>π</mi><mn>2</mn></mfrac></mrow><mo>]</mo></mrow><mspace width="thinmathspace"></mspace><mtext>so  </mtext><mtext></mtext><mtext>dass</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">sin</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \in [{-1};1],\;\mathtt{\operatorname{Math.asin}(x)} = \arcsin(x) = \text{ the unique } \; y \in \left[-\frac{\pi}{2}; \frac{\pi}{2}\right] \, \text{such that} \; \sin(y) = x</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-asin.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Math.asin(<var>x</var>)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Eine Zahl.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Der Arkussinus (im Radiantenmaß) der übergebenen Zahl, die zwischen <strong>-1</strong> und <strong>1</strong> liegt. Andernfalls wird {{jsxref("NaN")}} zurückgegeben.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>Math.asin() </code>Methode gibt einen numerischen Wert zwischen <math><semantics><mrow><mo>-</mo><mfrac><mi>π</mi><mn>2</mn></mfrac></mrow><annotation encoding="TeX">-\frac{\pi}{2}</annotation></semantics></math> und <math><semantics><mfrac><mi>π</mi><mn>2</mn></mfrac><annotation encoding="TeX">\frac{\pi}{2}</annotation></semantics></math> im Radiantenmaß für x Werte zwischen -1 und 1 zurück. Wenn der übergebene Wert außerhalb dieses Bereiches liegt, wird {{jsxref("NaN")}} zurückgegeben.</p>
+
+<p><code>Weil asin()</code> eine statische Methode von <code>Math</code> ist, muss diese immer mit <code>Math.asin()</code> genutzt werden, ohne dass ein Objekt von <code>Math</code> erstellt wird (<code>Math</code> ist kein Konstruktor).</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Verwendung_von_Math.asin()">Verwendung von <code>Math.asin()</code></h3>
+
+<pre class="brush: js">Math.asin(-2);  // NaN
+Math.asin(-1);  // -1.5707963267948966 (-pi/2)
+Math.asin(0);   // 0
+Math.asin(0.5); // 0.5235987755982989
+Math.asin(1);   // 1.5707963267948966 (pi/2)
+Math.asin(2);   // NaN
+</pre>
+
+<p>Für Werte kleiner -1 oder größer als 1 gibt <code>Math.asin() </code>{{jsxref("NaN")}} zurück.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.3', 'Math.asin')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.asin', 'Math.asin')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.asin', 'Math.asin')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.asin")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Math.acos()")}}</li>
+ <li>{{jsxref("Math.atan()")}}</li>
+ <li>{{jsxref("Math.atan2()")}}</li>
+ <li>{{jsxref("Math.cos()")}}</li>
+ <li>{{jsxref("Math.sin()")}}</li>
+ <li>{{jsxref("Math.tan()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/math/asinh/index.html b/files/de/web/javascript/reference/global_objects/math/asinh/index.html
new file mode 100644
index 0000000000..fa5e1d0472
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/math/asinh/index.html
@@ -0,0 +1,99 @@
+---
+title: Math.asinh()
+slug: Web/JavaScript/Reference/Global_Objects/Math/asinh
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/asinh
+---
+<div>{{JSRef}}</div>
+
+<p>Die Funktion <strong><code>Math.asinh()</code></strong> gibt den hyperbolische<span class="sentence" id="mt1"> </span>Arkussinus (im Radiantenmaß) einer Zahl zurück:</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.asinh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="thinmathspace">arcsinh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> das Ergebnis </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>so  </mtext><mtext></mtext><mtext>dass</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">sinh</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.asinh}(x)} = \operatorname{arsinh}(x) = \text{ the unique } \; y \; \text{such that} \; \sinh(y) = x</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-asinh.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Math.asinh(<var>x</var>)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Eine Zahl.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Der hyperbolische Arkussinus der übergebenen Zahl.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p><code>Weil asinh()</code> eine statische Methode von <code>Math</code> ist, muss diese immer mit <code>Math.asinh()</code> genutzt werden, ohne dass ein Objekt von <code>Math</code> erstellt wird (<code>Math</code> ist kein Konstruktor).</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Verwendung_von_Math.asinh()">Verwendung von <code>Math.asinh()</code></h3>
+
+<pre class="brush: js">Math.asinh(1);  // 0.881373587019543
+Math.asinh(0);  // 0
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Es gilt: <math><semantics><mrow><mo lspace="0em" rspace="thinmathspace">arsinh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mrow><mo>(</mo><mrow><mi>x</mi><mo>+</mo><msqrt><mrow><msup><mi>x</mi><mn>2</mn></msup><mo>+</mo><mn>1</mn></mrow></msqrt></mrow><mo>)</mo></mrow></mrow><annotation encoding="TeX"></annotation></semantics></math>. Daher kann asinh mit der folgenden Funktion emuliert werden:</p>
+
+<pre class="brush: js">Math.asinh = Math.asinh || function(x) {
+  if (x === -Infinity) {
+    return x;
+  } else {
+    return Math.log(x + Math.sqrt(x * x + 1));
+  }
+};
+</pre>
+
+<p>Die formale Korrektheit hängt von einer Reihe von Problemen mit Floating-Point-Berechnungen ab. Genaue Ergebnisse erfordern die Behandlung von positiven/negativen, kleinen/großen Argumenten, wie es in <a href="https://sourceware.org/git/?p=glibc.git;a=blob;f=sysdeps/ieee754/dbl-64/s_asinh.c">glibc</a> oder <a href="http://git.savannah.gnu.org/cgit/gsl.git/tree/sys/invhyp.c">GNU Scientific Library</a> vorhanden ist.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.asinh', 'Math.asinh')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.asinh', 'Math.asinh')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.asinh")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Math.acosh()")}}</li>
+ <li>{{jsxref("Math.atanh()")}}</li>
+ <li>{{jsxref("Math.cosh()")}}</li>
+ <li>{{jsxref("Math.sinh()")}}</li>
+ <li>{{jsxref("Math.tanh()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/math/atan/index.html b/files/de/web/javascript/reference/global_objects/math/atan/index.html
new file mode 100644
index 0000000000..1c37c3dcc4
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/math/atan/index.html
@@ -0,0 +1,105 @@
+---
+title: Math.atan()
+slug: Web/JavaScript/Reference/Global_Objects/Math/atan
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/atan
+---
+<div>{{JSRef}}</div>
+
+<p><code>Die Funktion </code><strong><code>Math.atan()</code></strong> gibt den Arkustangens (im Radiantenmaß) einer Zahl zurück:</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.atan</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">arctan</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> das Ergebnis </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>∊</mo><mrow><mo>[</mo><mrow><mo>-</mo><mfrac><mi>π</mi><mn>2</mn></mfrac><mo>;</mo><mfrac><mi>π</mi><mn>2</mn></mfrac></mrow><mo>]</mo></mrow><mspace width="thinmathspace"></mspace><mtext>so  </mtext><mtext>dass</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">tan</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.atan}(x)} = \arctan(x) = \text{ the unique } \; y \in \left[-\frac{\pi}{2}; \frac{\pi}{2}\right] \, \text{such that} \; \tan(y) = x</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-atan.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Math.atan(<var>x</var>)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Eine Zahl.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Der Arkustangens (im Radiantenmaß) der übergebenen Zahl.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p><code>Die Math.atan()</code> Methode gibt einen numerischen Wert zwischen <math><semantics><mrow><mo>-</mo><mfrac><mi>π</mi><mn>2</mn></mfrac></mrow><annotation encoding="TeX">-\frac{\pi}{2}</annotation></semantics></math> und <math><semantics><mfrac><mi>π</mi><mn>2</mn></mfrac><annotation encoding="TeX">\frac{\pi}{2}</annotation></semantics></math> im Radiantenmaß zurück.</p>
+
+<p><code>Weil atan()</code> eine statische Methode von Math ist, muss diese immer mit <code>Math.atan()</code> genutzt werden, ohne dass ein Objekt von Math erstellt wird (<code>Math</code> ist kein Konstruktor).</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Verwendung_von_Math.atan()">Verwendung von <code>Math.atan()</code></h3>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">Math<span class="punctuation token">.</span><span class="function token">atan</span><span class="punctuation token">(</span><span class="number token">1</span><span class="punctuation token">)</span><span class="punctuation token">;</span>   <span class="comment token">// 0.7853981633974483</span>
+Math<span class="punctuation token">.</span><span class="function token">atan</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">;</span>   <span class="comment token">// 0</span>
+Math<span class="punctuation token">.</span><span class="function token">atan</span><span class="punctuation token">(</span><span class="operator token">-</span><span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">;</span>  <span class="comment token">// -0</span>
+
+Math<span class="punctuation token">.</span><span class="function token">atan</span><span class="punctuation token">(</span><span class="number token">Infinity</span><span class="punctuation token">)</span><span class="punctuation token">;</span>   <span class="comment token">//  1.5707963267948966</span>
+Math<span class="punctuation token">.</span><span class="function token">atan</span><span class="punctuation token">(</span><span class="operator token">-</span><span class="number token">Infinity</span><span class="punctuation token">)</span><span class="punctuation token">;</span>  <span class="comment token">// -1.5707963267948966</span>
+
+<span class="comment token">// The angle that the line [(0,0);(x,y)] forms with the x-axis in a Cartesian coordinate system</span>
+Math<span class="punctuation token">.</span><span class="function token">atan</span><span class="punctuation token">(</span>y <span class="operator token">/</span> x<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Beachten Sie, dass es manchmal aus stilistischen Gründen gewollt ist, dass <strong>±</strong><code>Infinity</code> vermieden werden soll. In diesen Fällen kann die Funktion {{jsxref("Math.atan2()")}} mit <code>0</code> als zweiten Parameter bessere Ergebnisse liefern.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.4', 'Math.atan')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.atan', 'Math.atan')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.atan', 'Math.atan')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.atan")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Math.acos()")}}</li>
+ <li>{{jsxref("Math.asin()")}}</li>
+ <li>{{jsxref("Math.atan2()")}}</li>
+ <li>{{jsxref("Math.cos()")}}</li>
+ <li>{{jsxref("Math.sin()")}}</li>
+ <li>{{jsxref("Math.tan()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/math/atan2/index.html b/files/de/web/javascript/reference/global_objects/math/atan2/index.html
new file mode 100644
index 0000000000..5848a76898
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/math/atan2/index.html
@@ -0,0 +1,113 @@
+---
+title: Math.atan2()
+slug: Web/JavaScript/Reference/Global_Objects/Math/atan2
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/atan2
+---
+<div>{{JSRef}}</div>
+
+<p><code>Die Funktion </code><strong><code>Math.atan2()</code></strong> gibt den Arkustangens (im Radiantenmaß) des Quotienten der Parameter zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-atan2.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Math.atan2(<var>y</var>, <var>x</var>)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>y</code></dt>
+ <dd>Eine Zahl.</dd>
+ <dt><code>x</code></dt>
+ <dd>Eine zweite Zahl.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Der Arkustangens des Quotienten der übergebenen Parameter.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>Math.atan2()</code> Methode gibt einen numerischen Wert zwischen -π und π zurück, welcher den Winkel Theta eines <code>(x, y)</code> Punktes wiedergibt. Dies ist der Radius entgegen dem Uhrzeigersinn, gemessen in Radianten, zwischen der positiven x Achse, und des Punktes <code>(x, y)</code>. Beachte, dass bei der Funktion der erste Parameter die y Koordinate und der zweite die x Koordinate ist.</p>
+
+<p><img alt="Ein einfaches Diagramm welches den zurückgegebenen Winkel von atan2(y, x) zeigt" src="https://mdn.mozillademos.org/files/11557/atan2.png" style="height: 300px; width: 300px;"></p>
+
+<p>Bei <code>Math.atan2()</code> wird <code>x</code> und <code>y</code> separat übergeben, bei <code>Math.atan()</code> hingegen wird das Verhältnis der zwei Parameter übergeben.</p>
+
+<p>Weil <code>atan2()</code> eine statische Methode von Math ist, muss diese immer mit <code>Math.atan2()</code> genutzt werden, ohne dass ein Objekt von Math erstellt wird (<code>Math</code> ist kein Konstruktor).</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Verwendung_von_Math.atan2()"><code>Verwendung von Math.atan2()</code></h3>
+
+<pre class="brush: js">Math.atan2(90, 15); // 1.4056476493802699
+Math.atan2(15, 90); // 0.16514867741462683
+
+Math.atan2(±0, -0);               // ±PI.
+Math.atan2(±0, +0);               // ±0.
+Math.atan2(±0, -x);               // ±PI for x &gt; 0.
+Math.atan2(±0, x);                // ±0 for x &gt; 0.
+Math.atan2(-y, ±0);               // -PI/2 for y &gt; 0.
+Math.atan2(y, ±0);                // PI/2 for y &gt; 0.
+Math.atan2(±y, -Infinity);        // ±PI for finite y &gt; 0.
+Math.atan2(±y, +Infinity);        // ±0 for finite y &gt; 0.
+Math.atan2(±Infinity, x);         // ±PI/2 for finite x.
+Math.atan2(±Infinity, -Infinity); // ±3*PI/4.
+Math.atan2(±Infinity, +Infinity); // ±PI/4.
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.5', 'Math.atan2')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.atan2', 'Math.atan2')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.atan2', 'Math.atan2')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.atan2")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Math.acos()")}}</li>
+ <li>{{jsxref("Math.asin()")}}</li>
+ <li>{{jsxref("Math.atan()")}}</li>
+ <li>{{jsxref("Math.cos()")}}</li>
+ <li>{{jsxref("Math.sin()")}}</li>
+ <li>{{jsxref("Math.tan()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/math/cbrt/index.html b/files/de/web/javascript/reference/global_objects/math/cbrt/index.html
new file mode 100644
index 0000000000..a24c572eb7
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/math/cbrt/index.html
@@ -0,0 +1,98 @@
+---
+title: Math.cbrt()
+slug: Web/JavaScript/Reference/Global_Objects/Math/cbrt
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/cbrt
+---
+<div>{{JSRef}}</div>
+
+<p>Die Funktion <strong><code>Math.cbrt()</code></strong> gibt die Kubikwurzel einer Zahl zurück:</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mi>M</mi><mi>a</mi><mi>t</mi><mi>h</mi><mo>.</mo><mi>c</mi><mi>b</mi><mi>r</mi><mi>t</mi><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mroot><mi>x</mi><mn>3</mn></mroot><mo>=</mo><mtext>das  </mtext><mtext>Ergebnis</mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>so</mtext><mtext> </mtext><mtext> </mtext><mtext>dass</mtext><mspace width="thickmathspace"></mspace><msup><mi>y</mi><mn>3</mn></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\mathtt{Math.cbrt(x)} = \sqrt[3]{x} = \text{the unique} \; y \; \text{such that} \; y^3 = x</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-cbrt.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Math.cbrt(<var>x</var>)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Eine Zahl.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Die Kubikwurzel der übergebenen Zahl.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Weil <code>cbrt()</code> eine statische Methode von <code>Math</code> ist, muss diese immer mit <code>Math.cbrt()</code> genutzt werden, ohne dass ein Objekt von Math erstellt wird (<code>Math</code> ist kein Konstruktor).</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Verwendung_von_Math.cbrt">Verwendung von <code>Math.cbrt()</code></h3>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">Math<span class="punctuation token">.</span><span class="function token">cbrt</span><span class="punctuation token">(</span><span class="number token">NaN</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// NaN</span>
+Math<span class="punctuation token">.</span><span class="function token">cbrt</span><span class="punctuation token">(</span><span class="operator token">-</span><span class="number token">1</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// -1</span>
+Math<span class="punctuation token">.</span><span class="function token">cbrt</span><span class="punctuation token">(</span><span class="operator token">-</span><span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// -0</span>
+Math<span class="punctuation token">.</span><span class="function token">cbrt</span><span class="punctuation token">(</span><span class="operator token">-</span><span class="number token">Infinity</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// -Infinity</span>
+Math<span class="punctuation token">.</span><span class="function token">cbrt</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// 0</span>
+Math<span class="punctuation token">.</span><span class="function token">cbrt</span><span class="punctuation token">(</span><span class="number token">1</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// 1</span>
+Math<span class="punctuation token">.</span><span class="function token">cbrt</span><span class="punctuation token">(</span><span class="number token">Infinity</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Infinity</span>
+Math<span class="punctuation token">.</span><span class="function token">cbrt</span><span class="punctuation token">(</span><span class="keyword token">null</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// 0</span>
+Math<span class="punctuation token">.</span><span class="function token">cbrt</span><span class="punctuation token">(</span><span class="number token">2</span><span class="punctuation token">)</span><span class="punctuation token">;</span>  <span class="comment token">// 1.2599210498948734</span></code></pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Für <math><semantics><mrow><mi>x</mi><mo>≥</mo><mn>0</mn></mrow><annotation encoding="TeX">x \geq 0</annotation></semantics></math> gilt <math><semantics><mrow><mroot><mi>x</mi><mn>3</mn></mroot><mo>=</mo><msup><mi>x</mi><mrow><mn>1</mn><mo>/</mo><mn>3</mn></mrow></msup></mrow><annotation encoding="TeX">\sqrt[3]{x} = x^{1/3}</annotation></semantics></math> so dass diese Funktion wie folgt emuliert werden kann:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span>Math<span class="punctuation token">.</span>cbrt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  Math<span class="punctuation token">.</span>cbrt <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>x<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">var</span> y <span class="operator token">=</span> Math<span class="punctuation token">.</span><span class="function token">pow</span><span class="punctuation token">(</span>Math<span class="punctuation token">.</span><span class="function token">abs</span><span class="punctuation token">(</span>x<span class="punctuation token">)</span><span class="punctuation token">,</span> <span class="number token">1</span><span class="operator token">/</span><span class="number token">3</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">return</span> x <span class="operator token">&lt;</span> <span class="number token">0</span> <span class="operator token">?</span> <span class="operator token">-</span>y <span class="punctuation token">:</span> y<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.cbrt', 'Math.cbrt')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.cbrt', 'Math.cbrt')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.cbrt")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Math.pow()")}}</li>
+ <li>{{jsxref("Math.sqrt()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/math/ceil/index.html b/files/de/web/javascript/reference/global_objects/math/ceil/index.html
new file mode 100644
index 0000000000..06cf4808e7
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/math/ceil/index.html
@@ -0,0 +1,170 @@
+---
+title: Math.ceil()
+slug: Web/JavaScript/Reference/Global_Objects/Math/ceil
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/ceil
+---
+<div>{{JSRef}}</div>
+
+<p>Die Funktion <strong><code>Math.ceil()</code></strong> gibt die nächste Ganzzahl, die größer oder gleich der gegebenen Zahl ist, zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-ceil.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Math.ceil(<var>x</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parameter</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Eine Zahl.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Die kleinste ganze Zahl größer oder gleich der übergebenen Zahl.</p>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p><code>Weil ceil()</code> eine statische Methode von Math ist, muss diese immer mit <code>Math.ceil()</code> genutzt werden, ohne dass ein Objekt von Math erstellt wird (<code>Math</code> ist kein Konstruktor).</p>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<h3 id="Example:_Using_Math.ceil" name="Example:_Using_Math.ceil">Verwendung von <code>Math.ceil()</code></h3>
+
+<p>Das folgende Beispiel zeigt den exemplarischen Einsatz von <code>Math.ceil()</code>.</p>
+
+<pre class="brush: js">Math.ceil(.95);    // 1
+Math.ceil(4);      // 4
+Math.ceil(7.004);  // 8
+Math.ceil(-0.95);  // -0
+Math.ceil(-4);     // -4
+Math.ceil(-7.004); // -7
+</pre>
+
+<h3 id="Example:_Decimal_adjustment" name="Example:_Decimal_adjustment">Dezimales anpassen</h3>
+
+<pre class="brush: js">// Closure
+(function() {
+  /**
+   * Decimal adjustment of a number.
+   *
+   * @param {String}  type  The type of adjustment.
+   * @param {Number}  value The number.
+   * @param {Integer} exp   The exponent (the 10 logarithm of the adjustment base).
+   * @returns {Number} The adjusted value.
+   */
+  function decimalAdjust(type, value, exp) {
+    // If the exp is undefined or zero...
+    if (typeof exp === 'undefined' || +exp === 0) {
+      return Math[type](value);
+    }
+    value = +value;
+    exp = +exp;
+    // If the value is not a number or the exp is not an integer...
+    if (isNaN(value) || !(typeof exp === 'number' &amp;&amp; exp % 1 === 0)) {
+      return NaN;
+    }
+    // Shift
+    value = value.toString().split('e');
+    value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp)));
+    // Shift back
+    value = value.toString().split('e');
+    return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp));
+  }
+
+  // Decimal round
+  if (!Math.round10) {
+    Math.round10 = function(value, exp) {
+      return decimalAdjust('round', value, exp);
+    };
+  }
+  // Decimal floor
+  if (!Math.floor10) {
+    Math.floor10 = function(value, exp) {
+      return decimalAdjust('floor', value, exp);
+    };
+  }
+  // Decimal ceil
+  if (!Math.ceil10) {
+    Math.ceil10 = function(value, exp) {
+      return decimalAdjust('ceil', value, exp);
+    };
+  }
+})();
+
+// Round
+Math.round10(55.55, -1);   // 55.6
+Math.round10(55.549, -1);  // 55.5
+Math.round10(55, 1);       // 60
+Math.round10(54.9, 1);     // 50
+Math.round10(-55.55, -1);  // -55.5
+Math.round10(-55.551, -1); // -55.6
+Math.round10(-55, 1);      // -50
+Math.round10(-55.1, 1);    // -60
+// Floor
+Math.floor10(55.59, -1);   // 55.5
+Math.floor10(59, 1);       // 50
+Math.floor10(-55.51, -1);  // -55.6
+Math.floor10(-51, 1);      // -60
+// Ceil
+Math.ceil10(55.51, -1);    // 55.6
+Math.ceil10(51, 1);        // 60
+Math.ceil10(-55.59, -1);   // -55.5
+Math.ceil10(-59, 1);       // -50
+</pre>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1st Edition.</td>
+   <td>Standard</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.6', 'Math.ceil')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.ceil', 'Math.ceil')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.ceil', 'Math.ceil')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.ceil")}}</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Math.abs()")}}</li>
+ <li>{{jsxref("Math.floor()")}}</li>
+ <li>{{jsxref("Math.round()")}}</li>
+ <li>{{jsxref("Math.sign()")}}</li>
+ <li>{{jsxref("Math.trunc()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/math/clz32/index.html b/files/de/web/javascript/reference/global_objects/math/clz32/index.html
new file mode 100644
index 0000000000..ac7c78c4a7
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/math/clz32/index.html
@@ -0,0 +1,112 @@
+---
+title: Math.clz32()
+slug: Web/JavaScript/Reference/Global_Objects/Math/clz32
+tags:
+  - ECMAScript 2015
+  - Java
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/clz32
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Math.clz32()</code></strong> Funktion zählt die führenden Nullbits in der 32-Bit binär Repräsentation einer Nummer.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-clz32.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Math.clz32(<var>x</var>)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Eine Nummer.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Die Anzahl der führenden Nullbits in der 32-Bit binör Repräsentation der übergebenen Zahl.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>"<code>clz32</code>" steht für <code>CountLeadingZeroes32 (<em>AnzahlFührenderNullen32</em>)</code>.</p>
+
+<p>Wenn <code>x</code> keine Nummer ist, wird <code>x</code> in eine Nummer konvertiert. Danach wird diese Nummer in einen 32-Bit vorzeichenlose Ganzzahl (unsigned integer) konvertiert.</p>
+
+<p>Wenn die konvertierte 32-Bit vorzeichenlose Zahl <code>0</code> ist, so wird die Funktion 32 zurück geben, weil alle Bits <code>0</code> sind.</p>
+
+<p>Diese Funktion ist nützlich für Systeme, die in zu JavaScript kompilieren (z. B. <a href="/en-US/docs/Emscripten">Emscripten</a>).</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_Math.clz32()">Einsatz von <code>Math.clz32()</code></h3>
+
+<pre class="brush: js">Math.clz32(1);                // 31
+Math.clz32(1000);             // 22
+Math.clz32();                 // 32
+
+[NaN, Infinity, -Infinity, 0, -0, null, undefined, 'foo', {}, []].filter(
+function(n) {
+  return Math.clz32(n) !== 32
+});                           // []
+
+Math.clz32(true);             // 31
+Math.clz32(3.5);              // 30
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Der folgende Polyfill ist der effizienteste.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span>Math<span class="punctuation token">.</span>clz32<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  Math<span class="punctuation token">.</span>clz32 <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>x<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="comment token">// Let n be ToUint32(x).</span>
+    <span class="comment token">// Let p be the number of leading zero bits in </span>
+    <span class="comment token">// the 32-bit binary representation of n.</span>
+    <span class="comment token">// Return p.    </span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span>x <span class="operator token">==</span> <span class="keyword token">null</span> <span class="operator token">||</span> x <span class="operator token">===</span> <span class="number token">0</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="keyword token">return</span> <span class="number token">32</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+    <span class="keyword token">return</span> <span class="number token">31</span> <span class="operator token">-</span> Math<span class="punctuation token">.</span><span class="function token">floor</span><span class="punctuation token">(</span>Math<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>x <span class="operator token">&gt;</span><span class="operator token">&gt;</span><span class="operator token">&gt;</span> <span class="number token">0</span><span class="punctuation token">)</span> <span class="operator token">*</span> Math<span class="punctuation token">.</span>LOG2E<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-math.clz32', 'Math.clz32')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.clz32', 'Math.clz32')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.clz32")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Math")}}</li>
+ <li>{{jsxref("Math.imul")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/math/cos/index.html b/files/de/web/javascript/reference/global_objects/math/cos/index.html
new file mode 100644
index 0000000000..300908a90b
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/math/cos/index.html
@@ -0,0 +1,98 @@
+---
+title: Math.cos()
+slug: Web/JavaScript/Reference/Global_Objects/Math/cos
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/cos
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Math.cos()</code></strong> Funktion gibt den <span class="seoSummary">{{interwiki("wikipedia", "Cosinus")}}</span> eines Winkels zurück. Der Winkel muss im <span class="seoSummary">{{interwiki("wikipedia", "Bogenmaß")}}</span> angegeben werden. Der Wert ist <math style="display: inline;"> <mstyle displaystyle="true"> <mfrac> <msub> <mrow> <mtext>length</mtext> </mrow> <mrow> <mrow> <mtext>adjacent</mtext> </mrow> </mrow> </msub> <msub> <mrow> <mtext>length</mtext> </mrow> <mrow> <mrow> <mtext>hypotenuse</mtext> </mrow> </mrow> </msub> </mfrac> </mstyle> </math>.<span style="display: none;"> </span></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-cos.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Math.cos(<var>x</var>)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Eine Zahl im Winkelmaß (rad).</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Der Cosinus der übergebenen Zahl.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>Math.cos()</code> Funktion gibt einen nummerischen Wert zwischen -1 und 1 zurück. Dieser repräsentiert den Cosinus des Winkels.</p>
+
+<p>Weil <code>cos()</code> eine statische Funktion von <code>Math</code> ist, wird es immer als <code>Math.cos()</code> eingesetzt<code>,</code> jedoch nicht als Methode eines erzeugten <code>Math</code> Objektes (<code>Math</code> ist kein Konstruktor).</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_Math.cos()">Einsatz von <code>Math.cos()</code></h3>
+
+<pre class="brush: js">Math.cos(0);           // 1
+Math.cos(1);           // 0.5403023058681398
+
+Math.cos(Math.PI);     // -1
+Math.cos(2 * Math.PI); // 1
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikationen</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.7', 'Math.cos')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.cos', 'Math.cos')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.cos', 'Math.cos')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.cos")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Math.acos()")}}</li>
+ <li>{{jsxref("Math.asin()")}}</li>
+ <li>{{jsxref("Math.atan()")}}</li>
+ <li>{{jsxref("Math.atan2()")}}</li>
+ <li>{{jsxref("Math.sin()")}}</li>
+ <li>{{jsxref("Math.tan()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/math/cosh/index.html b/files/de/web/javascript/reference/global_objects/math/cosh/index.html
new file mode 100644
index 0000000000..9b24cbbeaf
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/math/cosh/index.html
@@ -0,0 +1,102 @@
+---
+title: Math.cosh()
+slug: Web/JavaScript/Reference/Global_Objects/Math/cosh
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/cosh
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Math.cosh()</code></strong> Funktion gibt den Cosinus Hyperbolicus einer Zahl zurück. Dieser kann mit dem Einsatz der {{jsxref("Math.E", "Eulerschen Zahl", "", 1)}} folgendermaßen berechnet werden:</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mo lspace="0em" rspace="thinmathspace">Math.cosh(x)</mo></mstyle><mo>=</mo><mfrac><mrow><msup><mi>e</mi><mi>x</mi></msup><mo>+</mo><msup><mi>e</mi><mrow><mo>-</mo><mi>x</mi></mrow></msup></mrow><mn>2</mn></mfrac></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.cosh(x)}} = \frac{e^x + e^{-x}}{2}</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-cosh.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Math.cosh(<var>x</var>)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Eine Zahl.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Der hyperbolische Cosinus der übergebenen Zahl.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Weil <code>cosh()</code> eine statische Funktion von <code>Math</code> ist, wird es immer als <code>Math.cosh()</code> eingesetzt<code>,</code> jedoch nicht als Methode eines erzeugten <code>Math</code> Objektes (<code>Math</code> ist kein Konstruktor).</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_Math.cosh()">Einsatz von <code>Math.cosh()</code></h3>
+
+<pre class="brush: js">Math.cosh(0);  // 1
+Math.cosh(1);  // 1.5430806348152437
+Math.cosh(-1); // 1.5430806348152437
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Diese Funktion kann mit Hilfe der Funktion {{jsxref("Math.exp()")}} emuliert werden:</p>
+
+<pre class="brush: js">Math.cosh = Math.cosh || function(x) {
+  return (Math.exp(x) + Math.exp(-x)) / 2;
+}
+</pre>
+
+<p>Oder nur mit einem Aufruf der {{jsxref("Math.exp()")}} Funktion:</p>
+
+<pre class="brush: js">Math.cosh = Math.cosh || function(x) {
+  var y = Math.exp(x);
+  return (y + 1 / y) / 2;
+};
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.cosh', 'Math.cosh')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.cosh', 'Math.cosh')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.cosh")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Math.acosh()")}}</li>
+ <li>{{jsxref("Math.asinh()")}}</li>
+ <li>{{jsxref("Math.atanh()")}}</li>
+ <li>{{jsxref("Math.sinh()")}}</li>
+ <li>{{jsxref("Math.tanh()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/math/e/index.html b/files/de/web/javascript/reference/global_objects/math/e/index.html
new file mode 100644
index 0000000000..1ba5bd74d5
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/math/e/index.html
@@ -0,0 +1,83 @@
+---
+title: Math.E
+slug: Web/JavaScript/Reference/Global_Objects/Math/E
+tags:
+  - JavaScript
+  - Math
+  - Property
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/E
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>Math.E</strong></code> Eigenschaft repräsentiert die Basis des natürlichen Logarithmus, was gerundet 2,718 ist.</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.E</mi></mstyle><mo>=</mo><mi>e</mi><mo>≈</mo><mn>2,718</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.E}} = e \approx 2,718</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-e.html")}}</div>
+
+
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p>Weil <code>E</code> eine statische Eigenschaft von <code>Math</code> ist, muss immer <code>Math.E</code> genutzt werden, ohne dass ein <code>Math</code> Objekt erstellt wird (<code>Math</code> ist kein Konstruktor).</p>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<h3 id="Example:_Using_Math.E" name="Example:_Using_Math.E">Einsatz von <code>Math.E</code></h3>
+
+<p>Die folgende Funktion gibt <em>e</em> zurück:</p>
+
+<pre class="brush: js">function getNapier() {
+   return Math.E
+}
+
+getNapier() // 2.718281828459045</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.1.1', 'Math.E')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.e', 'Math.E')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.e', 'Math.E')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.E")}}</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log1p()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/math/exp/index.html b/files/de/web/javascript/reference/global_objects/math/exp/index.html
new file mode 100644
index 0000000000..df215203d8
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/math/exp/index.html
@@ -0,0 +1,95 @@
+---
+title: Math.exp()
+slug: Web/JavaScript/Reference/Global_Objects/Math/exp
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/exp
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Math.exp()</code></strong> Funktion gibt <code>e<sup>x</sup></code> zurück, wobei <code>x</code> der Parameter ist. <code>e</code> ist die {{jsxref("Math.E", "Eulersche Zahl", "", 1)}}, die Basis des natürlichen Logarithmus.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-exp.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Math.exp(<var>x</var>)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Eine Zahl.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Die Zahl, die <code>e<sup>x</sup></code> repräsentiert, wobei <code>e</code> die {{jsxref("Math.E", "Eulersche Zahl", "", 1)}} ist und <code>x</code> die übergebene Zahl ist.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Weil <code>exp()</code> eine statische Funktion von <code>Math</code> ist, wird es immer als <code>Math.</code><code>exp</code><code>()</code> eingesetzt<code>,</code> jedoch nicht als Methode eines erzeugten <code>Math</code> Objektes (<code>Math</code> ist kein Konstruktor).</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_Math.exp()">Einsatz von <code>Math.exp()</code></h3>
+
+<pre class="brush: js">Math.exp(-1); // 0.36787944117144233
+Math.exp(0);  // 1
+Math.exp(1);  // 2.718281828459045
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.8', 'Math.exp')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.exp', 'Math.exp')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.exp', 'Math.exp')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.exp")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Math.E")}}</li>
+ <li>{{jsxref("Math.expm1()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log10()")}}</li>
+ <li>{{jsxref("Math.log1p()")}}</li>
+ <li>{{jsxref("Math.log2()")}}</li>
+ <li>{{jsxref("Math.pow()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/math/expm1/index.html b/files/de/web/javascript/reference/global_objects/math/expm1/index.html
new file mode 100644
index 0000000000..b257953d87
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/math/expm1/index.html
@@ -0,0 +1,94 @@
+---
+title: Math.expm1()
+slug: Web/JavaScript/Reference/Global_Objects/Math/expm1
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/expm1
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Math.expm1()</code></strong> Funktion gibt <code>e<sup>x</sup> - 1</code> zurück, wobei <code>x</code> der Parameter ist. <code>e</code> ist die {{jsxref("Math.E", "Eulersche Zahl", "", 1)}}, die Basis des natürlichen Logarithmus.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-expm1.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Math.expm1(<var>x</var>)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Eine Zahl.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Die Zahl, die <code>e<sup>x</sup> - 1</code> repräsentiert, wobei <code>e</code> die {{jsxref("Math.E", "Eulersche Zahl", "", 1)}} und <code>x</code> die übergebene Zahl ist.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Weil <code>expm1()</code> eine statische Funktion von <code>Math</code> ist, wird es immer als <code>Math.</code><code>expm1</code><code>()</code> eingesetzt<code>,</code> jedoch nicht als Methode eines erzeugten <code>Math</code> Objektes (<code>Math</code> ist kein Konstruktor).</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_Math.expm1()">Einsatz von <code>Math.expm1()</code></h3>
+
+<pre class="brush: js">Math.expm1(-1); // -0.6321205588285577
+Math.expm1(0);  // 0
+Math.expm1(1);  // 1.718281828459045
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Diese Funktion kann mit Hilfe der Funktion {{jsxref("Math.exp()")}} emitiert werden:</p>
+
+<pre class="brush: js">Math.expm1 = Math.expm1 || function(x) {
+  return Math.exp(x) - 1;
+};
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.expm1', 'Math.expm1')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.expm1', 'Math.expm1')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.expm1")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Math.E")}}</li>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log10()")}}</li>
+ <li>{{jsxref("Math.log1p()")}}</li>
+ <li>{{jsxref("Math.log2()")}}</li>
+ <li>{{jsxref("Math.pow()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/math/floor/index.html b/files/de/web/javascript/reference/global_objects/math/floor/index.html
new file mode 100644
index 0000000000..68f8bf86fa
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/math/floor/index.html
@@ -0,0 +1,137 @@
+---
+title: Math.floor()
+slug: Web/JavaScript/Reference/Global_Objects/Math/floor
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/floor
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Math.floor()</code></strong> Funktion gibt den größten Integer zurück, der kleiner oder gleich der gegeben Nummer ist. (Abrunden) </p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-floor.html")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Math.floor(<var>x</var>)</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Eine Zahl.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine größte ganze Zahl, die kleiner oder gleich der übergebenen Zahl ist.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Weil <code>floor()</code> eine statische Methode von <code>Math</code> ist, wird sie immer als<code> Math.floor() </code>aufgerufen und nicht als eine Methode eines erstellten <code>Math</code> Objektes (<code>Math </code>ist kein Konstruktor).</p>
+
+<div class="blockIndicator note">
+<p><strong>Hinweis: </strong><code>Math.floor(null)</code> gibt 0, aber nicht {{jsxref("NaN")}}, zurück.</p>
+</div>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_Math.floor">Einsatz von <code>Math.floor()</code></h3>
+
+<pre class="brush: js">Math.floor(45.95);   // 45
+Math.floor(45.05);   // 45
+Math.floor(4);       // 4
+Math.floor(-45.05);  // -46
+Math.floor(-45.95);  // -46
+</pre>
+
+<h3 id="Dezimale_Justierung">Dezimale Justierung</h3>
+
+<pre class="brush: js">/**
+ * Decimal adjustment of a number.
+ *
+ * @param {String}  type  The type of adjustment.
+ * @param {Number}  value The number.
+ * @param {Integer} exp   The exponent (the 10 logarithm of the adjustment base).
+ * @returns {Number} The adjusted value.
+ */
+function decimalAdjust(type, value, exp) {
+  // If the exp is undefined or zero...
+  if (typeof exp === 'undefined' || +exp === 0) {
+    return Math[type](value);
+  }
+  value = +value;
+  exp = +exp;
+  // If the value is not a number or the exp is not an integer...
+  if (isNaN(value) || !(typeof exp === 'number' &amp;&amp; exp % 1 === 0)) {
+    return NaN;
+  }
+  // Shift
+  value = value.toString().split('e');
+  value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp)));
+  // Shift back
+  value = value.toString().split('e');
+  return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp));
+}
+
+// Decimal round
+const round10 = (value, exp) =&gt; decimalAdjust('round', value, exp);
+// Decimal floor
+const floor10 = (value, exp) =&gt; decimalAdjust('floor', value, exp);
+// Decimal ceil
+const ceil10 = (value, exp) =&gt; decimalAdjust('ceil', value, exp);
+
+// Round
+round10(55.55, -1);   // 55.6
+round10(55.549, -1);  // 55.5
+round10(55, 1);       // 60
+round10(54.9, 1);     // 50
+round10(-55.55, -1);  // -55.5
+round10(-55.551, -1); // -55.6
+round10(-55, 1);      // -50
+round10(-55.1, 1);    // -60
+// Floor
+floor10(55.59, -1);   // 55.5
+floor10(59, 1);       // 50
+floor10(-55.51, -1);  // -55.6
+floor10(-51, 1);      // -60
+// Ceil
+ceil10(55.51, -1);    // 55.6
+ceil10(51, 1);        // 60
+ceil10(-55.59, -1);   // -55.5
+ceil10(-59, 1);       // -50
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.floor', 'Math.floor')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Math.floor")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Math.abs()")}}</li>
+ <li>{{jsxref("Math.ceil()")}}</li>
+ <li>{{jsxref("Math.round()")}}</li>
+ <li>{{jsxref("Math.sign()")}}</li>
+ <li>{{jsxref("Math.trunc()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/math/fround/index.html b/files/de/web/javascript/reference/global_objects/math/fround/index.html
new file mode 100644
index 0000000000..de905d6637
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/math/fround/index.html
@@ -0,0 +1,112 @@
+---
+title: Math.fround()
+slug: Web/JavaScript/Reference/Global_Objects/Math/fround
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/fround
+---
+<div>{{JSRef}}</div>
+
+<p class="seoSummary">Die <strong><code>Math.fround()</code></strong> Funktion gibt die am nächsten gelegenen <a class="external" href="https://de.wikipedia.org/wiki/Einfache_Genauigkeit" title="link to the wikipedia page on single-precision floating-point format">32 Bit einfach genaue</a> Repräsentation einer {{jsxref("Number")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-fround.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>var singleFloat = Math.fround(<var>doubleFloat</var>)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>doubleFloat</code></dt>
+ <dd>Eine {{jsxref("Number")}}. Wenn der Parameter von einem anderen Typ ist, wird dieser zu einer Zahl konvertiert oder wenn er nicht konvertiert werden kann {{jsxref("NaN")}}.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Die am nächsten gelegenen <a class="external" href="https://de.wikipedia.org/wiki/Einfache_Genauigkeit" title="link to the wikipedia page on single-precision floating-point format">32 Bit einfach genaue</a> Repräsentation einer Floatingpoint-Nummer, der übergebenen Zahl.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>JavaScript benutzt intern 64 Bit double Gleitkommazahlen, welche eine hohe Präzision haben. Manchmal ist es gewollt mit 32 Bit Gleitkommazahlen zu arbeiten, zum Beispiel, wenn von einem von einem {{jsxref("Float32Array")}} gelesen wird. Das kann verwirrend sein: Prüfen einer 64 Bit Gleitkommazahl und einer 32 Bit Gleitkommazahl auf Gleichheit kann fehlschlagen, auch wenn sie scheinbar identisch sind.</p>
+
+<p>Um das zu beheben, kann <code>Math.fround()</code> eingesetzt werden um 64 Bit Gleitkommazahlen in 32 Bit Gleitkommazahlen umzuwandeln. Intern wird JavaScript die Zahl als 64 Bit Gleitkommazahl benutzen, es wird jedoch ein "Runden zu geraden Zahlen" (round to even) an der 23. Stelle der Mantisse vorgenommen und alle folgenden Stellen der Mantisse auf <code>0</code> gesetzt. Wenn die Zahl außerhalb des 32 Bit Gleitkommazahlenbereiches liegt wird {{jsxref("Infinity")}} oder <code>-Infinity</code> zurückgegeben.</p>
+
+<p>Weil <code>fround()</code> eine statische Funktion von <code>Math</code> ist, wird es immer als <code>Math.</code><code>fround</code><code>()</code> eingesetzt, jedoch nicht als Methode eines erzeugten <code>Math</code> Objektes (<code>Math</code> ist kein Konstruktor).</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_Math.fround()">Einsatz von <code>Math.fround()</code></h3>
+
+<p>Die Zahl 1-5 kan präzise im Binärsystem dargestellt werden und ist identisch in 32 Bit und 64 Bit:</p>
+
+<pre class="brush: js">Math.fround(1.5);        // 1.5
+Math.fround(1.5) === 1.5 // true</pre>
+
+<p>Die Zahl 1.337 kan nicht präzise in Binärsystem dargestellt werden und unterscheidet sich in 32 Bit und 64 Bit:</p>
+
+<pre class="brush: js">Math.fround(1.337);           //1.3370000123977661
+Math.fround(1.337) === 1.337; // false
+</pre>
+
+<p><math><semantics><msup><mn>2</mn><mn>150</mn></msup><annotation encoding="TeX">2^150</annotation></semantics></math> ist zu groß für eine 32 Bit Gleitkommazahl, weshalb <code>Infinity</code> zurückgegeben wird.</p>
+
+<pre class="brush: js">2 ** 150;              // 1.42724769270596e+45
+Math.fround(2 ** 150); // Infinity
+</pre>
+
+<p>Wenn der Parameter nicht zu einer Zahl konvertiert werden kann, oder <a href="https://de.wikipedia.org/wiki/NaN">keine Zahl ist (NaN)</a>, gibt <code>Math.fround()</code> <code>NaN</code> zurück:</p>
+
+<pre class="brush: js">Math.fround('abc'); // NaN
+Math.fround(NaN);   // NaN
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Diese Funktion kann emuliert werden, wenn {{jsxref("Float32Array")}} verfügbar ist:</p>
+
+<pre class="brush: js">Math.fround = Math.fround || (function (array) {
+  return function(x) {
+    return array[0] = x, array[0];
+  };
+})(Float32Array(1));
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.fround', 'Math.fround')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.fround', 'Math.fround')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.fround")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Math.round()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/math/hypot/index.html b/files/de/web/javascript/reference/global_objects/math/hypot/index.html
new file mode 100644
index 0000000000..b88861e06d
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/math/hypot/index.html
@@ -0,0 +1,128 @@
+---
+title: Math.hypot()
+slug: Web/JavaScript/Reference/Global_Objects/Math/hypot
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/hypot
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Math.hypot()</code></strong> Funktion gibt die Quadratwurzel von der Summe der quadrierten Argumente zurück. Das bedeutet</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.hypot</mo><mo stretchy="false">(</mo><msub><mi>v</mi><mn>1</mn></msub><mo>,</mo><msub><mi>v</mi><mn>2</mn></msub><mo>,</mo><mo>…</mo><mo>,</mo><msub><mi>v</mi><mi>n</mi></msub><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msqrt><mrow><munderover><mo>∑</mo><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow><mi>n</mi></munderover><msubsup><mi>v</mi><mi>i</mi><mn>2</mn></msubsup></mrow></msqrt><mo>=</mo><msqrt><mrow><msubsup><mi>v</mi><mn>1</mn><mn>2</mn></msubsup><mo>+</mo><msubsup><mi>v</mi><mn>2</mn><mn>2</mn></msubsup><mo>+</mo><mo>…</mo><mo>+</mo><msubsup><mi>v</mi><mi>n</mi><mn>2</mn></msubsup></mrow></msqrt></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.hypot}(v_1, v_2, \dots, v_n)} = \sqrt{\sum_{i=1}^n v_i^2} = \sqrt{v_1^2 + v_2^2 + \dots + v_n^2}</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-hypot.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Math.hypot([<var>value1</var>[, <var>value2</var>[, ...]]])</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>value1, value2, ...</code></dt>
+ <dd>Zahlen.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Die Quadratwurzel der Summe der quadrierten übergebenen Parameter. Wenn ein Parameter nicht in eine Zahl konvertiert werden kann, wird {{jsxref("NaN")}} zurückgegeben.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p><span id="result_box" lang="de"><span>Das Berechnen der Hypotenuse eines rechtwinkligen Dreiecks oder die Größe einer komplexen Zahl verwendet die Formel <code>Math.sqrt (v1 * v1 + v2 * v2)</code>, wobei v1 und v2 entweder die Seiten des Dreiecks oder die reellen und komplexen Werte sind. </span></span><span id="result_box" lang="de"><span>Zum Berechnen der Entfernung in 2 oder mehr Dimensionen fügt man einfach weitere Quadrate innerhalb des Quadratwurzelzeichens ein, wie z. B. <code>Math.sqrt (v1 * v1 + v2 * v2 + v3 * v3 + v4 * v4)</code>.</span></span></p>
+
+<p>Diese Funktion macht es ein bisschen einfacher und schneller, man kann einfach <code>Math.hypot(v1, v2)</code> , or <code>Math.hypot(v1, v2, v3, v4, ...)</code> aufrufen.</p>
+
+<p><span id="result_box" lang="de"><span>Sie vermeidet zudem ein Problem, wenn Zahlen sehr groß werden. Die größte Zahl, die in JavaScript dargestellt werden kann ist </span></span><span style="line-height: 1.5;"><code>Number.MAX_VALUE = 1.797...e+308</code>. Wenn die Zahlen größer als <code>1e154</code> sind, wird das Quadrieren</span> dieser zu dem ergebnis <code><span style="line-height: 1.5;">Infinity</span></code><span style="line-height: 1.5;"> führen und das Ergebnis zerstören. Zum Beispiel: <code>Math.sqrt(1e200*1e200 + 1e200*1e200) = Infinity</code>. Wenn <code>hypot()</code> stattdessen benutzt wird bekommt man ein gutes Ergebnis: <code>Math.hypot(1e200, 1e200) = 1.4142...e+200</code>. Diese gilt auch für sehr kleine Zahlen. <code>Math.sqrt(1e-200*1e-200 + 1e-200*1e-200) = 0</code>, wohingegen </span><code><span style="line-height: 1.5;">Math.hypot(1e-200, 1e-200) =</span></code><span style="line-height: 1.5;"><code>1.4142...e-200</code> eine gute Lösung ist.</span></p>
+
+<p>Weil <code>hypot()</code> eine statische Funktion von <code>Math</code> ist, wird es immer als <code>Math.hypot()</code> eingesetzt<code>,</code> jedoch nicht als Methode eines erzeugten <code>Math</code> Objektes (<code>Math</code> ist kein Konstruktor).</p>
+
+<p>Wenn kein Argument übergeben wird, ist das Ergebnis <code>+0</code>.</p>
+
+<p>Wenn einer der übergebenen Parameter nicht zu einer Zahl konvertiert werden kann, ist das Ergebnis {{jsxref("NaN")}}.</p>
+
+<p>Wenn nur ein Argument übergeben wird, so sind die Ergebnisse der Funktionen <code>Math.hypot()</code> und {{jsxref("Math.abs()")}} gleich.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_Math.hypot()">Einsatz von <code>Math.hypot()</code></h3>
+
+<pre class="brush: js">Math.hypot(3, 4);        // 5
+Math.hypot(3, 4, 5);     // 7.0710678118654755
+Math.hypot();            // 0
+Math.hypot(NaN);         // NaN
+Math.hypot(3, 4, 'foo'); // NaN, +'foo' =&gt; NaN
+Math.hypot(3, 4, '5');   // 7.0710678118654755, +'5' =&gt; 5
+Math.hypot(-3);          // 3, das gleiche wie Math.abs(-3)
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Diese Funktion kann folgendermaßen emuliert werden:</p>
+
+<pre class="brush: js">Math.hypot = Math.hypot || function() {
+  var y = 0, i = arguments.length;
+  while (i--) y += arguments[i] * arguments[i];
+  return Math.sqrt(y);
+};
+</pre>
+
+<p>Ein Polyfill der Underflows und Overflows vermeidet:</p>
+
+<pre class="brush: js">Math.hypot = function (x, y) {
+  // https://bugzilla.mozilla.org/show_bug.cgi?id=896264#c28
+  var max = 0;
+  var s = 0;
+  for (var i = 0; i &lt; arguments.length; i += 1) {
+    var arg = Math.abs(Number(arguments[i]));
+    if (arg &gt; max) {
+      s *= (max / arg) * (max / arg);
+      max = arg;
+    }
+    s += arg === 0 &amp;&amp; max === 0 ? 0 : (arg / max) * (arg / max);
+  }
+  return max === 1 / 0 ? 1 / 0 : max * Math.sqrt(s);
+};
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-math.hypot', 'Math.hypot')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.hypot', 'Math.hypot')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.hypot")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Math.abs()")}}</li>
+ <li>{{jsxref("Math.pow()")}}</li>
+ <li>{{jsxref("Math.sqrt()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/math/imul/index.html b/files/de/web/javascript/reference/global_objects/math/imul/index.html
new file mode 100644
index 0000000000..ea3bc9abf3
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/math/imul/index.html
@@ -0,0 +1,92 @@
+---
+title: Math.imul()
+slug: Web/JavaScript/Reference/Global_Objects/Math/imul
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/imul
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Math.imul()</code></strong> Funktion führt eine C ähnliche 32-Bit Multiplikation der zwei Parameter durch.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-imul.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Math.imul(<var>a</var>, <var>b</var>)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>a</code></dt>
+ <dd>Erste Nummer.</dd>
+ <dt><code>b</code></dt>
+ <dd>Zweite Nummer.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Das Resultat der C-ähnlichen 32-Bit Multiplikation der übergebenen Parameter.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p><code>Math.imul()</code> erlaubt es schnelle 32-Bit Ganzzahlmultiplikationen mit C ähnlicher Semantik durchzuführen. Diese Funktion ist nützlich für Projekte wie <a href="http://en.wikipedia.org/wiki/Emscripten">Emscripten</a>. Weil <code>imul()</code> eine statische Methode von <code>Math</code> ist, muss man immer <code>Math.imul()</code> benutzen und nicht als Methode eines <code>Math</code> Objektes, das man erzeugt (<code>Math</code> ist kein Konstruktor). Wenn normale JavaScript Gleitkommazahlen in <code>imul</code> eingesetzt werden, wird die Performance beeinträchtigt. Das ist wegen der Umwandlung von Gleitkommazahlen zu ganzen Zahlen für die Multiplikation und die anschließende Rückkonvertierung des Ergebnisses in eine Gleitkommazahl. Der Grund warum <code>imul</code> existiert, ist, dass esin (nur) einem Fall schneller ist: AsmJS. AsmJS erlaubt JIST-Optimierungen für einfache Implementierung von ganzen Zahlen in JavaScript. Multiplizieren von zwei Zahlen mit <code>imul</code>, die intern als Integer dargestellt sind (was nur mit AsmJS funktioniert) ist der einzige Grund, wo <code>Math.imul</code> die Performance im Browsern steigern kann.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_Math.imul()">Einsatz von <code>Math.imul()</code></h3>
+
+<pre class="brush: js">Math.imul(2, 4);          // 8
+Math.imul(-1, 8);         // -8
+Math.imul(-2, -2);        // 4
+Math.imul(0xffffffff, 5); // -5
+Math.imul(0xfffffffe, 5); // -10
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Diese Funktionalität kann durch folgende Funktion emuliert werden:</p>
+
+<pre class="brush: js">Math.imul = Math.imul || function(a, b) {
+  var aHi = (a &gt;&gt;&gt; 16) &amp; 0xffff;
+  var aLo = a &amp; 0xffff;
+  var bHi = (b &gt;&gt;&gt; 16) &amp; 0xffff;
+  var bLo = b &amp; 0xffff;
+  // the shift by 0 fixes the sign on the high part
+  // the final |0 converts the unsigned value into a signed value
+  return ((aLo * bLo) + (((aHi * bLo + aLo * bHi) &lt;&lt; 16) &gt;&gt;&gt; 0) | 0);
+};
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.imul', 'Math.imul')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.imul', 'Math.imul')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.imul")}}</p>
diff --git a/files/de/web/javascript/reference/global_objects/math/index.html b/files/de/web/javascript/reference/global_objects/math/index.html
new file mode 100644
index 0000000000..7dd7493568
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/math/index.html
@@ -0,0 +1,201 @@
+---
+title: Math
+slug: Web/JavaScript/Reference/Global_Objects/Math
+tags:
+  - JavaScript
+  - Math
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math
+---
+<div>{{JSRef}}</div>
+
+<p><strong>Math</strong> ist ein Standardobjekt, das Eigenschaften und Methoden für mathematische Konstanten und Funktionen besitzt. Es ist kein Funktionsobjekt.</p>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p>Im Unterschied zu den anderen globalen Objekten hat <code>Math</code> keinen Konstruktor. Alle Eigenschaften und Methoden von <code>Math</code> sind statisch. Um die Konstante Pi zu erreichen, wird <code>Math.PI</code> genutzt. Die Sinusfunktion wird mit <code>Math.sin(x)</code> ausgeführt, wobei x der Methodenparameter ist. Konstanten sind so präzise wie der Typ <code>number</code> in JavaScript.</p>
+
+<h2 id="Properties" name="Properties">Eigenschaften</h2>
+
+<dl>
+ <dt>{{jsxref("Math.E")}}</dt>
+ <dd>Eulersche Zahl und die Basis für den natürlichen Logarithmus (gerundet 2,718).</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("Math.LN2")}}</dt>
+ <dd>Natürlicher Logarithmus von 2 (gerundet 0,693).</dd>
+ <dt>{{jsxref("Math.LN10")}}</dt>
+ <dd>Natürlicher Logarithmus von 10 (gerundet 2,303).</dd>
+ <dt>{{jsxref("Math.LOG2E")}}</dt>
+ <dd>Logarithmus zur Basis 2 von der Eulerschen Zahl (gerundet 1,443).</dd>
+ <dt>{{jsxref("Math.LOG10E")}}</dt>
+ <dd>Logarithmus zur Basis 10 von der Eulerschen Zahl (gerundet 0,434).</dd>
+ <dt>{{jsxref("Math.PI")}}</dt>
+ <dd>Kreiszahl Pi, welche als Verhältnis zwischen Kreisumfang und Durchmesser definiert ist (gerundet 3,14159).</dd>
+ <dt>{{jsxref("Math.SQRT1_2")}}</dt>
+ <dd>Quadratwurzel aus 1/2 oder 1 geteilt durch die Quadratwurzel von 2 (gerundet 0,707).</dd>
+ <dt>{{jsxref("Math.SQRT2")}}</dt>
+ <dd>Quadratwurzel aus 2 (gerundet 1,414).</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Methoden</h2>
+
+<div class="note"><strong>Anmerkung</strong>: Die trigonometrischen Funktionen (<code>sin()</code>, <code>cos()</code>, <code>tan()</code>, <code>asin()</code>, <code>acos()</code>, <code>atan()</code>, <code>atan2()</code>) erwarten Parameter und geben Rückgabewerte im Bogenmaß zurück. Um dieses in das Gradmaß umzurechnen, teilt man durch <code>(Math.PI / 180)</code> und multipliziert das Ergebnis mit der Bogenmaß.</div>
+
+<div class="note"><strong>Anmerkung:</strong> Bei vielen mathematischen Funktionen ist die Präzision implementationsabhängig. Das bedeutet, dass es bei verschiedenen Browsern verschiedene Ergebnisse geben kann. Auch in der gleichen JavaScript-Umgebung auf verschiedenen Betriebssystemen oder Architekturen können Abweichungen entstehen.</div>
+
+<dl>
+</dl>
+
+<dl>
+ <dt>{{jsxref("Global_Objects/Math/abs", "Math.abs(x)")}}</dt>
+ <dd>Gibt den Betrag einer Zahl zurück.</dd>
+ <dt>{{jsxref("Global_Objects/Math/acos", "Math.acos(x)")}}</dt>
+ <dd>Gibt den Arcus Cosinus einer Zahl zurück.</dd>
+ <dt>{{jsxref("Global_Objects/Math/acosh", "Math.acosh(x)")}}</dt>
+ <dd>Gibt den Areacosinus Hyperbolicus einer Zahl zurück.</dd>
+ <dt>{{jsxref("Global_Objects/Math/asin", "Math.asin(x)")}}</dt>
+ <dd>Gibt den Arcus Sinus einer Zahl zurück.</dd>
+ <dt>{{jsxref("Global_Objects/Math/asinh", "Math.asinh(x)")}}</dt>
+ <dd>Gibt den Areasinus Hyperbolicus einer Zahl zurück.</dd>
+ <dt>{{jsxref("Global_Objects/Math/atan", "Math.atan(x)")}}</dt>
+ <dd>Gibt den Arcus Tangens einer Zahl zurück.</dd>
+ <dt>{{jsxref("Global_Objects/Math/atanh", "Math.atanh(x)")}}</dt>
+ <dd>Gibt den Areatangens Hyperbolicus einer Zahl zurück.</dd>
+ <dt>{{jsxref("Global_Objects/Math/atan2", "Math.atan2(y, x)")}}</dt>
+ <dd>Gibt den Arcus Tangens aus dem Quotienten der Argumente zurück.</dd>
+ <dt>{{jsxref("Global_Objects/Math/cbrt", "Math.cbrt(x)")}}</dt>
+ <dd>Gibt die Kubikwurzel einer Zahl zurück.</dd>
+ <dt>{{jsxref("Global_Objects/Math/ceil", "Math.ceil(x)")}}</dt>
+ <dd>Gibt die kleinste ganze Zahl zurück, die größer oder gleich dem Parameter ist.</dd>
+ <dt>{{jsxref("Global_Objects/Math/clz32", "Math.clz32(x)")}}</dt>
+ <dd>Gibt die Anzahl der voranstehenden 0-Bits einer 32-Bit-Repräsentation zurück.</dd>
+ <dt>{{jsxref("Global_Objects/Math/cos", "Math.cos(x)")}}</dt>
+ <dd>Gibt den Cosinus einer Zahl zurück.</dd>
+ <dt>{{jsxref("Global_Objects/Math/cosh", "Math.cosh(x)")}}</dt>
+ <dd>Gibt den Cosinus Hyperbolicus einer Zahl zurück.</dd>
+ <dt>{{jsxref("Global_Objects/Math/exp", "Math.exp(x)")}}</dt>
+ <dd>Gibt E<sup>x</sup> zurück, wobei x der Parameter und E die Eulersche Zahl ist.</dd>
+ <dt>{{jsxref("Global_Objects/Math/expm1", "Math.expm1(x)")}}</dt>
+ <dd>Gibt exp(x) - 1 zurück.</dd>
+ <dt>{{jsxref("Global_Objects/Math/floor", "Math.floor(x)")}}</dt>
+ <dd>Rundet eine Zahl auf eine ganze Zahl ab.</dd>
+ <dt>{{jsxref("Global_Objects/Math/fround", "Math.fround(x)")}}</dt>
+ <dd>Gibt die am nächsten liegende <a href="http://de.wikipedia.org/wiki/Einfache_Genauigkeit">einfache genaue</a> Gleitkommazahl des Parameters zurück.</dd>
+ <dt>{{jsxref("Global_Objects/Math/hypot", "Math.hypot([x[,y[,…]]])")}}</dt>
+ <dd>Gibt die Quadratwurzel aus der Summe der quadrierten Parameterwerte zurück.</dd>
+ <dt>{{jsxref("Global_Objects/Math/imul", "Math.imul(x)")}}</dt>
+ <dd>Gibt das Ergebnis einer 32-Bit-Ganzzahlmultiplikation zurück.</dd>
+ <dt>{{jsxref("Global_Objects/Math/log", "Math.log(x)")}}</dt>
+ <dd>Gibt den natürlichen Logarithmus (log<sub>e</sub> oder ln) einer Zahl zurück.</dd>
+ <dt>{{jsxref("Global_Objects/Math/log1p", "Math.log1p(x)")}}</dt>
+ <dd>Gibt den natürlichen Logarithmus (log<sub>e</sub> oder ln) einer mit 1 addierten Zahl zurück.</dd>
+ <dt>{{jsxref("Global_Objects/Math/log10", "Math.log10(x)")}}</dt>
+ <dd>Gibt den Logarithmus zur Basis 10 einer Zahl zurück.</dd>
+ <dt>{{jsxref("Global_Objects/Math/log2", "Math.log2(x)")}}</dt>
+ <dd>Gibt den Logarithmus zur Basis 2 einer Zahl zurück.</dd>
+ <dt>{{jsxref("Global_Objects/Math/max", "Math.max([x[,y[,…]]])")}}</dt>
+ <dd>Gibt die größte von null oder mehr Zahlen zurück.</dd>
+ <dt>{{jsxref("Global_Objects/Math/min", "Math.min([x[,y[,…]]])")}}</dt>
+ <dd>Gibt die kleinste von null oder mehr Zahlen zurück.</dd>
+ <dt>{{jsxref("Global_Objects/Math/pow", "Math.pow(x,y)")}}</dt>
+ <dd>Gibt die Potenz zweier Zahlen zurück (x<sup>y</sup>).</dd>
+ <dt>{{jsxref("Global_Objects/Math/random", "Math.random()")}}</dt>
+ <dd>Gibt eine Pseudozufallszahl zwischen 0 und 1 zurück.</dd>
+ <dt>{{jsxref("Global_Objects/Math/round", "Math.round(x)")}}</dt>
+ <dd>Gibt den ganzzahlig gerundeten Wert des Parameters zurück.</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("Global_Objects/Math/sign", "Math.sign(x)")}}</dt>
+ <dd>Gibt das Vorzeichen (positiv, negativ, 0) von x zurück.</dd>
+ <dt>{{jsxref("Global_Objects/Math/sin", "Math.sin(x)")}}</dt>
+ <dd>Gibt den Sinus einer Zahl zurück.</dd>
+ <dt>{{jsxref("Global_Objects/Math/sinh", "Math.sinh(x)")}}</dt>
+ <dd>Gibt den Sinus Hyperbolicus einer Zahl zurück.</dd>
+ <dt>{{jsxref("Global_Objects/Math/sqrt", "Math.sqrt(x)")}}</dt>
+ <dd>Gibt die positive Quadratwurzel einer Zahl zurück.</dd>
+ <dt>{{jsxref("Global_Objects/Math/tan", "Math.tan(x)")}}</dt>
+ <dd>Gibt den Tangens einer Zahl zurück.</dd>
+ <dt>{{jsxref("Global_Objects/Math/tanh", "Math.tanh(x)")}}</dt>
+ <dd>Gibt den Tangens Hyperbolicus einer Zahl zurück.</dd>
+ <dt><code>Math.toSource()</code> {{Non-standard_inline() }}</dt>
+ <dd>Gibt die Zeichenkette <code>"Math"</code> zurück.</dd>
+ <dt>{{jsxref("Global_Objects/Math/trunc", "Math.trunc(x)")}}</dt>
+ <dd>Gibt den ganzzahligen Teil der Zahl <code>x</code>, ohne jede Nachkommastellen, zurück.</dd>
+</dl>
+
+<h2 id="Das_Math_Objekt_erweitern">Das <code>Math</code> Objekt erweitern</h2>
+
+<p>Wie die meisten der Standard-JavaScript Objekte kann auch das <code>Math</code> Objekt um benutzerdefinierten Eigenschaften und Methoden erweitert werden. Zum Erweitern des <code>Math</code> Objektes wird nicht <code>prototype</code> genutzt. Stattdessen wird <code>Math</code> direkt erweitert.</p>
+
+<pre>Math.propName = propValue;
+Math.methodName = methodRef;</pre>
+
+<p>Im folgenden Beispiel wird eine Methode zum <code>Math</code> Objekt hinzugefügt, welche den größten gemeinsamen Teiler von einer Liste von Argumenten ermittelt.</p>
+
+<pre class="brush: js">/* Variadic function -- Returns the greatest common divisor of a list of arguments */
+Math.gcd = function () {
+  if(arguments.length == 2) {
+    if(arguments[1] == 0) {
+      return arguments[0];
+    } else {
+      return Math.gcd(arguments[1], arguments[0] % arguments[1]);
+    }
+  } else if (arguments.length &gt; 2) {
+    var result = Math.gcd(arguments[0], arguments[1]);
+    for (var i = 2; i &lt; arguments.length; i++) {
+      result = Math.gcd(result, arguments[i]);
+    }
+    return result;
+  }
+}</pre>
+
+<p>Zum Ausprobieren:</p>
+
+<pre class="brush: js">console.log(Math.gcd(20, 30, 15, 70, 40)); // `5`</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8', 'Math')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math-object', 'Math')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Die neuen Methoden {{jsxref("Math.log10()", "log10()")}}, {{jsxref("Math.log2()", "log2()")}}, {{jsxref("Math.log1p()", "log1p()")}}, {{jsxref("Math.expm1()", "expm1()")}}, {{jsxref("Math.cosh()", "cosh()")}}, {{jsxref("Math.sinh()", "sinh()")}}, {{jsxref("Math.tanh()", "tanh()")}}, {{jsxref("Math.acosh()", "acosh()")}}, {{jsxref("Math.asinh()", "asinh()")}}, {{jsxref("Math.atanh()", "atanh()")}}, {{jsxref("Math.hypot()", "hypot()")}}, {{jsxref("Math.trunc()", "trunc()")}}, {{jsxref("Math.sign()", "sign()")}}, {{jsxref("Math.imul()", "imul()")}}, {{jsxref("Math.fround()", "fround()")}}, {{jsxref("Math.cbrt()", "cbrt()")}} und {{jsxref("Math.clz32()", "clz32()")}} hinzugefügt.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math-object', 'Math')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math")}}</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Number")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/math/ln10/index.html b/files/de/web/javascript/reference/global_objects/math/ln10/index.html
new file mode 100644
index 0000000000..b43f317ef4
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/math/ln10/index.html
@@ -0,0 +1,83 @@
+---
+title: Math.LN10
+slug: Web/JavaScript/Reference/Global_Objects/Math/LN10
+tags:
+  - JavaScript
+  - Math
+  - Property
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/LN10
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>Math.LN10</strong></code> Eigenschaft repräsentiert den natürlichen Logarithmus von 10, was gerundet 2,302 ist:</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LN10</mi></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mo stretchy="false">(</mo><mn>10</mn><mo stretchy="false">)</mo><mo>≈</mo><mn>2,302</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LN10}} = \ln(10) \approx 2,302</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-ln10.html")}}</div>
+
+
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p>Weil <code>LN10</code> eine statische Eigenschaft von <code>Math</code> ist, kann diese immer über <code>Math.LN10</code> erreicht werden, ohne dass ein Objekt von <code>Math</code> erstellt werden muss (<code>Math</code> ist kein Konstruktor).</p>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<h3 id="Example:_Using_Math.LN10" name="Example:_Using_Math.LN10">Einsatz von <code>Math.LN10</code></h3>
+
+<p>Die folgende Funktion gibt das Ergebnis des natürlichen Logarithmus von 10 zurück:</p>
+
+<pre class="brush:js">function getNatLog10() {
+   return Math.LN10
+}
+
+getNatLog10() // 2.302585092994046</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.1.2', 'Math.LN10')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.ln10', 'Math.LN10')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.ln10', 'Math.LN10')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.LN10")}}</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log10()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/math/ln2/index.html b/files/de/web/javascript/reference/global_objects/math/ln2/index.html
new file mode 100644
index 0000000000..5577b36c74
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/math/ln2/index.html
@@ -0,0 +1,83 @@
+---
+title: Math.LN2
+slug: Web/JavaScript/Reference/Global_Objects/Math/LN2
+tags:
+  - JavaScript
+  - Math
+  - Property
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/LN2
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>Math.LN2</strong></code> Eigenschaft repräsentiert den natürlichen Logarithmus von 2, was gerundet 0,693 ist:</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LN2</mi></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mo stretchy="false">(</mo><mn>2</mn><mo stretchy="false">)</mo><mo>≈</mo><mn>0,693</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LN2}} = \ln(2) \approx 0,693</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-ln2.html")}}</div>
+
+
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p>Weil <code>LN2</code> eine statische Eigenschaft von Math ist, kann diese immer mit <code>Math.LN2</code> erreicht werden, ohne dass ein Objekt von Math erstellt werden muss (<code>Math </code>ist kein Konstruktor).</p>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<h3 id="Example:_Using_Math.LN2" name="Example:_Using_Math.LN2">Einsatz von <code>Math.LN2</code></h3>
+
+<p>Die folgende Funktion gibt den Logarithmus zur Basis 2 von einer Zahl zurück. Dabei wird <code>Math.LN2</code> benutzt:</p>
+
+<pre class="brush:js">function getLog2(x) {
+  return Math.log(x) / Math.LN2;
+}
+
+getLog2(256) // 8</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.1.3', 'Math.LN2')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.ln2', 'Math.LN2')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.ln2', 'Math.LN2')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.LN2")}}</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log2()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/math/log/index.html b/files/de/web/javascript/reference/global_objects/math/log/index.html
new file mode 100644
index 0000000000..d4502d50e2
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/math/log/index.html
@@ -0,0 +1,113 @@
+---
+title: Math.log()
+slug: Web/JavaScript/Reference/Global_Objects/Math/log
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/log
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Math.log()</code></strong> Funktion gibt den natürlichen Logarithmus (Logarithmus zur Basis {{jsxref("Math.E", "e")}}) einer Zahl zurück. Das bedeutet</p>
+
+<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>&gt;</mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.log</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mspace width="thickmathspace"></mspace><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>sodass </mtext><mspace width="thickmathspace"></mspace><msup><mi>e</mi><mi>y</mi></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x &gt; 0, \mathtt{\operatorname{Math.log}(x)} = \ln(x) = \text{the unique} \; y \; \text{such that} \; e^y = x</annotation></semantics></math></p>
+
+<p>Die JavaScript Function <strong><code>Math.log()</code> </strong>ist gleichbedeutend zu der mathematischen <em>Funktion ln(x)</em>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-log.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate"><code>Math.log(<var>x</var>)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Eine Zahl.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Der natürliche Logarithmus (Basis {{jsxref("Math.E", "e")}}) der übergebenen Zahl. Wenn die Zahl negativ ist, wird {{jsxref("NaN")}} zurückgegeben.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Wenn der Wert von <code>x</code> negativ ist, so gibt die Funktion immer {{jsxref("NaN")}} zurück.</p>
+
+<p>Weil <code>log()</code> eine statische Funktion von <code>Math</code> ist, wird es immer als <code>Math.log()</code> eingesetzt<code>,</code> jedoch nicht als Methode eines erzeugten <code>Math</code> Objektes (<code>Math</code> ist kein Konstruktor).</p>
+
+<p>Wenn der natürliche Logarithmus von 2 und 10 gebraucht wird, gibt es die Konstanten {{jsxref("Math.LN2")}} und {{jsxref("Math.LN10")}}. Wenn ein Logarithmus zur Basis 2 oder 10 gebracht wird, gibt es die Funktionen {{jsxref("Math.log2()")}} und {{jsxref("Math.log10()")}}. Wenn der Logarithmus zu einer anderen Basis gebraucht wird, benutzt man Math.log(x) / Math.log(andereBasis) wie im Beispiel unten. Manchmal möchte man 1 / Math.log(andereBasis) vorberechnen.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_Math.log">Einsatz von <code>Math.log()</code></h3>
+
+<pre class="brush: js notranslate">Math.log(-1); // NaN, weil negativ
+Math.log(0);  // -Infinity
+Math.log(1);  // 0
+Math.log(10); // 2.302585092994046
+</pre>
+
+<h3 id="Einsatz_von_Math.log_mit_unterschiedlichen_Basen">Einsatz von  <code>Math.log()</code> mit unterschiedlichen Basen</h3>
+
+<p>Die folgende Funktion gibt den Logarithmus von <code>y</code> zur Basis <code>x</code> zurück (log<sub>x</sub> y):</p>
+
+<pre class="brush: js notranslate">function getBaseLog(x, y) {
+  return Math.log(y) / Math.log(x);
+}
+</pre>
+
+<p>Wenn <code>getBaseLog(10, 1000)</code> ausgeführt wird, ist das Ergebnis <code>2.9999999999999996</code>. Diese Zahl ist nah an 3 und kommt durch Rundungsfehler bei Fließkommazahlen.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.10', 'Math.log')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.log', 'Math.log')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.log', 'Math.log')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.log")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log1p()")}}</li>
+ <li>{{jsxref("Math.log10()")}}</li>
+ <li>{{jsxref("Math.log2()")}}</li>
+ <li>{{jsxref("Math.pow()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/math/log10/index.html b/files/de/web/javascript/reference/global_objects/math/log10/index.html
new file mode 100644
index 0000000000..fad6ea0996
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/math/log10/index.html
@@ -0,0 +1,101 @@
+---
+title: Math.log10()
+slug: Web/JavaScript/Reference/Global_Objects/Math/log10
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/log10
+---
+<div>{{JSRef}}</div>
+
+<div>Die <strong><code>Math.log10()</code></strong> Funktion gibt den Logarithmus zur Basis<code> 10</code> zurück. Das bedeutet</div>
+
+<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>&gt;</mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.log10</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msub><mo lspace="0em" rspace="0em">log</mo><mn>10</mn></msub><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext></mtext><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>so das</mtext><mspace width="thickmathspace"></mspace><msup><mn>10</mn><mi>y</mi></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x &gt; 0, \mathtt{\operatorname{Math.log10}(x)} = \log_10(x) = \text{the unique} \; y \; \text{such that} \; 10^y = x</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-log10.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Math.log10(<var>x</var>)</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Eine Zahl.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Den Logarithmus zur Basis 10 der gegebenen Zahl. Wenn die Zahl negativ ist, wird {{jsxref("NaN")}} zurückgegeben.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Wenn der Wert von <code>x</code> negativ ist, so gibt die Funktion immer <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="Die globale NaN Eigenschaft ist ein Wert, der Not-A-Number (keine Zahl) repräsentiert."><code>NaN</code></a> zurück.</p>
+
+<p>Weil <code>log10()</code> eine statische Funktion von <code>Math</code> ist, wird es immer als <code>Math.log10()</code> eingesetzt<code>,</code> jedoch nicht als Methode eines erzeugten <code>Math</code> Objektes (<code>Math</code> ist kein Konstruktor).</p>
+
+<p>Diese Funktion ist äquivalent zu Math.log(x) / Math.log(10). Für log10(e) gibt es die Konstante {{jsxref("Math.LOG10E")}} welche 1 / {{jsxref("Math.LN10")}} ist.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_Math.log10()">Einsatz von <code>Math.log10()</code></h3>
+
+<pre class="brush: js">Math.log10(2);      // 0.3010299956639812
+Math.log10(1);      // 0
+Math.log10(0);      // -Infinity
+Math.log10(-2);     // NaN
+Math.log10(100000); // 5
+</pre>
+
+<h3 id="Polyfill">Polyfill</h3>
+
+<p>Diese Funktion kann folgendermaßen emitiert werden:</p>
+
+<pre class="brush: js">Math.log10 = Math.log10 || function(x) {
+<code class="language-js">  <span class="keyword token">return</span> Math<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>x<span class="punctuation token">)</span> <span class="operator token">*</span> Math<span class="punctuation token">.</span>LOG10E<span class="punctuation token">;</span></code>
+};
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-math.log10', 'Math.log10')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.log10', 'Math.log10')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.log10")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log1p()")}}</li>
+ <li>{{jsxref("Math.log2()")}}</li>
+ <li>{{jsxref("Math.pow()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/math/log10e/index.html b/files/de/web/javascript/reference/global_objects/math/log10e/index.html
new file mode 100644
index 0000000000..28d609df71
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/math/log10e/index.html
@@ -0,0 +1,85 @@
+---
+title: Math.LOG10E
+slug: Web/JavaScript/Reference/Global_Objects/Math/LOG10E
+tags:
+  - JavaScript
+  - Math
+  - Property
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/LOG10E
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>Math.LOG10E</strong></code> Eigenschaft repräsentiert den Logarithmus zur Basis 10 von e, was gerundet 0,434 ist:</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LOG10E</mi></mstyle><mo>=</mo><msub><mo lspace="0em" rspace="0em">log</mo><mn>10</mn></msub><mo stretchy="false">(</mo><mi>e</mi><mo stretchy="false">)</mo><mo>≈</mo><mn>0,434</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LOG10E}} = \log_10(e) \approx 0,434</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-log10e.html")}}</div>
+
+
+
+<p>{{js_property_attributes(0,0,0)}}</p>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p>Weil <code>LOG10E</code> eine statische Eigenschaft von <code>Math</code> ist, kann diese immer über <code>Math.LOG10E</code> erreicht werden, ohne dass ein Objekt erstellt werden muss (<code>Math</code> ist kein Konstruktor).</p>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<h3 id="Example:_Using_Math.LOG2E" name="Example:_Using_Math.LOG2E">Einsatz von <code>Math.LOG10E</code></h3>
+
+<p>Die folgende Funktion gibt den Logarithmus zur Basis 10 von <em>e</em> zurück.</p>
+
+<pre class="brush:js">function getLog10e() {
+   return Math.LOG10E
+}
+
+getLog10e() // 0.4342944819032518</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>{{Spec2('ES1')}}</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <td>Kommentar</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.1.5', 'Math.LOG10E')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.log10e', 'Math.LOG10E')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.log10e', 'Math.LOG10E')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.LOG10E")}}</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log10()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/math/log1p/index.html b/files/de/web/javascript/reference/global_objects/math/log1p/index.html
new file mode 100644
index 0000000000..a63eab6b6f
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/math/log1p/index.html
@@ -0,0 +1,102 @@
+---
+title: Math.log1p()
+slug: Web/JavaScript/Reference/Global_Objects/Math/log1p
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/log1p
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Math.log1p()</code></strong> Funktion gibt den natürlichen Logarithmus (Logarithmus zur Basis {{jsxref("Math.E", "e")}}) von 1 + x zurück. Das bedeutet</p>
+
+<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>&gt;</mo><mo>-</mo><mn>1</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.log1p</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mo stretchy="false">(</mo><mn>1</mn><mo>+</mo><mi>x</mi><mo stretchy="false">)</mo></mrow><annotation encoding="TeX">\forall x &gt; -1, \mathtt{\operatorname{Math.log1p}(x)} = \ln(1 + x)</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-log1p.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Math.log1p(<var>x</var>)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Eine Zahl.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Den natürliche Logarithmus (zur Basis {{jsxref("Math.E", "e")}}) von 1 plus der gegebenen Zahl. Wenn die Zahl kleiner als <strong>-1</strong> ist, wird {{jsxref("NaN")}} zurückgegeben.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Für sehr kleine Zahlen für <code>x</code> kann das Addieren mit 1 zu verlusten in der Präzision führen. Die Zahlen in JavaScript haben eine Genauigkeit von 15 Stellen. <code> 1 + 1e-15 = 1.000000000000001</code>, aber <code>1 + 1e-16 = 1.000000000000000</code> und damit exakt <code>1</code><code>.0</code> in dieser Arithmetik, weil Ziffern nach der 15 Stelle gerundet werden.</p>
+
+<p>Wenn <code>log(1 + x)</code> berechnet wird, bekommt man ein Ergebnis sehr na an <code>x</code>, wenn <code>x</code> klein ist (das ist der Grund, warum es 'natürlicher' Logarithmus heißt). Wenn <code>Math.log(1 + 1.1111111111e-15)</code> berechnet wird sollte man ein Ergebnis nah an <code>1.1111111111e-15</code> bekommt. Stattdessen berechnet man den Logarithmus von <code><span style="line-height: 1.5;">1.00000000000000111022</span></code><span style="line-height: 1.5;"> (die Rundung geschieht im Binärsystem und ist manchmal unschön) un erhält das Ergebnis <code>1.11022...e-15</code> mit nur 3 korrekten Stellen. Wenn stattdessen <code>Math.log1p(</code></span><code>1.1111111111e-15</code><span style="line-height: 1.5;"><code>)</code> berechnet wird, bekommt man ein besseres Ergebnis von <code>1.1111111110999995e-15</code> mit 15 korrekten Stellen in der Präzision (aktuell 16 in diesem Fall).</span></p>
+
+<p>Wenn der Wert von <code>x</code> kleiner als -1 ist, gibt die Funktion immer den Wert {{jsxref("NaN")}} zurück.</p>
+
+<p>Weil <code>log1p()</code> eine statische Funktion von <code>Math</code> ist, wird es immer als <code>Math.log1p()</code> eingesetzt<code>,</code> jedoch nicht als Methode eines erzeugten <code>Math</code> Objektes (<code>Math</code> ist kein Konstruktor).</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_Math.log1p()">Einsatz von <code>Math.log1p()</code></h3>
+
+<pre class="brush: js">Math.log1p(1);  // 0.6931471805599453
+Math.log1p(0);  // 0
+Math.log1p(-1); // -Infinity
+Math.log1p(-2); // NaN
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Diese Funktion kann folgendermaßen emuliert werden:</p>
+
+<pre class="brush: js">Math.log1p = Math.log1p || function(x) {
+  return Math.log(1 + x);
+};
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-math.log1p', 'Math.log1p')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.log1p', 'Math.log1p')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.log1p")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log10()")}}</li>
+ <li>{{jsxref("Math.log2()")}}</li>
+ <li>{{jsxref("Math.pow()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/math/log2/index.html b/files/de/web/javascript/reference/global_objects/math/log2/index.html
new file mode 100644
index 0000000000..de98c13128
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/math/log2/index.html
@@ -0,0 +1,101 @@
+---
+title: Math.log2()
+slug: Web/JavaScript/Reference/Global_Objects/Math/log2
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/log2
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Math.log2()</code></strong> Funktion gibt den Logarithmus zur Basis<code> 2</code> zurück. Das bedeutet</p>
+
+<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>&gt;</mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.log2</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msub><mo lspace="0em" rspace="0em">log</mo><mn>2</mn></msub><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext></mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>so das</mtext><mspace width="thickmathspace"></mspace><msup><mn>2</mn><mi>y</mi></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x &gt; 0, \mathtt{\operatorname{Math.log2}(x)} = \log_2(x) = \text{the unique} \; y \; \text{such that} \; 2^y = x</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-log2.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Math.log2(<var>x</var>)</code></pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Eine Zahl.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Den Logarithmus zur Basis 2 der gegebenen Zahl. Wenn die Zahl negativ ist, wird {{jsxref("NaN")}} zurückgegeben.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Wenn der Wert von <code>x</code> negativ ist, so gibt die Funktion immer <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="Die globale NaN Eigenschaft ist ein Wert, der Not-A-Number (keine Zahl) repräsentiert."><code>NaN</code></a> zurück.</p>
+
+<p>Weil <code>log2()</code> eine statische Funktion von <code>Math</code> ist, wird es immer als <code>Math.log2()</code> eingesetzt<code>,</code> jedoch nicht als Methode eines erzeugten <code>Math</code> Objektes (<code>Math</code> ist kein Konstruktor).</p>
+
+<p>Diese Funktion ist äquivalent zu Math.log(x) / Math.log(2). Für log2(e) gibt es die Konstante {{jsxref("Math.LOG2E")}} welche 1 / {{jsxref("Math.LN2")}} ist.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_Math.log2()">Einsatz von <code>Math.log2()</code></h3>
+
+<pre class="brush: js">Math.log2(3);    // 1.584962500721156
+Math.log2(2);    // 1
+Math.log2(1);    // 0
+Math.log2(0);    // -Infinity
+Math.log2(-2);   // NaN
+Math.log2(1024); // 10
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Diese Funktion kann mit folgender Funktion emitiert werden. Es kann sein, dass diese Funktion bei einigen eingabewerten ungenau (ungefähr 1 &lt;&lt; 29) ist. Schachtel die Funktion in {{jsxref("Math.round()")}} wenn mit Bitmasken gearbeitet wird.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">Math<span class="punctuation token">.</span>log2 <span class="operator token">=</span> Math<span class="punctuation token">.</span>log2 <span class="operator token">||</span> <span class="keyword token">function</span><span class="punctuation token">(</span>x<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">return</span> Math<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>x<span class="punctuation token">)</span> <span class="operator token">*</span> Math<span class="punctuation token">.</span>LOG2E<span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-math.log2', 'Math.log2')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.log2', 'Math.log2')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.log2")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log10()")}}</li>
+ <li>{{jsxref("Math.log1p()")}}</li>
+ <li>{{jsxref("Math.pow()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/math/log2e/index.html b/files/de/web/javascript/reference/global_objects/math/log2e/index.html
new file mode 100644
index 0000000000..2f302bf4a2
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/math/log2e/index.html
@@ -0,0 +1,83 @@
+---
+title: Math.LOG2E
+slug: Web/JavaScript/Reference/Global_Objects/Math/LOG2E
+tags:
+  - JavaScript
+  - Math
+  - Property
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/LOG2E
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>Math.LOG2E</strong></code> Eigenschaft repräsentiert den Logarithmus zur Basis 2 von e, was gerundet 1,443 ist:</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LOG2E</mi></mstyle><mo>=</mo><msub><mo lspace="0em" rspace="0em">log</mo><mn>2</mn></msub><mo stretchy="false">(</mo><mi>e</mi><mo stretchy="false">)</mo><mo>≈</mo><mn>1,442</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LOG2E}} = \log_2(e) \approx 1,442</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-log2e.html")}}</div>
+
+
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p>Weil <code>LOG2E</code> eine statische Eigenschaft von <code>Math</code> ist, kann diese immer über <code>Math.LOG2E</code> erreicht werden, ohne dass ein Objekt erstellt werden muss (<code>Math</code> ist kein Konstruktor).</p>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<h3 id="Example:_Using_Math.LOG2E" name="Example:_Using_Math.LOG2E">Einsatz von <code>Math.LOG2E</code></h3>
+
+<p>Die folgende Funktion gibt den Logarithmus zur Basis 2 von <em>e</em> zurück.</p>
+
+<pre class="brush:js">function getLog2e() {
+   return Math.LOG2E
+}
+
+getLog2e() // 1.4426950408889634</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.1.4', 'Math.LOG2E')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.log2e', 'Math.LOG2E')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.log2e', 'Math.LOG2E')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.LOG2E")}}</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log2()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/math/math.random/index.html b/files/de/web/javascript/reference/global_objects/math/math.random/index.html
new file mode 100644
index 0000000000..6097229c1a
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/math/math.random/index.html
@@ -0,0 +1,112 @@
+---
+title: Math.random()
+slug: Web/JavaScript/Reference/Global_Objects/Math/math.random
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/random
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Math.random()</code></strong> Funktion gibt eine Pseudozufallszahl in Form einer Gleitkommazahl im Bereich von 0 - 1 (0 inklusiv, aber 1 nicht) annähernd gleichverteilt zurück, die dann zur gewünschten Größe skaliert werden kann. Die Zufallszahl wird von der Implementierung bestimmt; sie kann nicht vom Benutzer ausgewählt oder zurückgesetzt werden.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-random.html")}}</div>
+
+<div class="note">
+<p><code>Math.random()</code> stellt <em>keine</em> kryprografisch sicheren Zufallszahlen bereit. <span id="result_box" lang="de"><span class="hps">Verwenden Sie sie auf keinen Fall für </span><span class="hps">etwas, das  in Verbindung mit </span><span class="hps">Sicherheit steht</span><span>.</span></span> Benutzen Sie stattdessen die Web Crypto API, genauer gesagt die {{domxref("RandomSource.getRandomValues()", "window.crypto.getRandomValues()")}}-Methode.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Math.random()</code></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine pseudozufällige Gleitkommazahl zwischen <code>0</code> (inklusiv) und <code>1</code> (exklusiv).</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p><span id="result_box" lang="de"><span class="alt-edited">Beachten Sie, dass, weil Zahlen in JavaScript IEEE 754 Gleitkommazahlen sind, mit dem Verhalten zur nächsten geraden Zahl zu runden, die Bereiche für die folgenden Funktionen - mit Ausnahme für</span></span> <code>Math.random()</code> <span lang="de"><span class="alt-edited">selbst - nicht exakt sind.<br>
+ Wenn extrem große Grenzen</span></span> (2<sup>53</sup> <span id="result_box" lang="de"><span class="alt-edited">oder höher) gewählt werden, ist es in äußerst seltenen Fällen möglich, dass die eigentlich ausgeschlossenen Obergrenzen mit eingerechnet werden.</span></span></p>
+
+<h3 id="Erzeugt_eine_Zufallszahl_zwischen_0_inklusive_und_1_exklusive">Erzeugt eine Zufallszahl zwischen 0 (inklusive) und 1 (exklusive)</h3>
+
+<pre class="brush: js">function getRandom() {
+  return Math.random();
+}
+</pre>
+
+<h3 id="Erzeugt_eine_Zufallszahl_zwischen_zwei_Zahlen">Erzeugt eine Zufallszahl zwischen zwei Zahlen</h3>
+
+<p>Das Beispiel gibt eine zufällige Zahl zwischen zwei Zahlen zurück. Der Rückgabewert is größer oder gleich <code>min</code> und kleiner als <code>max</code>.</p>
+
+<pre class="brush: js">function getRandomArbitrary(min, max) {
+  return Math.random() * (max - min) + min;
+}
+</pre>
+
+<h3 id="Erzeugt_eine_ganze_Zufallszahl_zwischen_zwei_Zahlen">Erzeugt eine ganze Zufallszahl zwischen zwei Zahlen</h3>
+
+<p>Das Beispiel gibt eine zufällige ganze Zahl zwischen den spezifizierten Werten zurück. Der Wert ist nicht kleiner als <code>min</code> (oder der nächstgrößeren ganzen Zahl von <code>min</code>, wenn <code>min</code> keine ganze Zahl ist) und ist kleiner als  (aber nicht gleich) <code>max</code>.</p>
+
+<pre>function getRandomInt(min, max) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min)) + min;
+}
+</pre>
+
+<div class="note">
+<p><span id="result_box" lang="de"><span>Es könnte verlockend sein, <code>Math.round()</code> zu verwenden, um das Ergebnis zu erreichen, aber das würde dazu führen, dass die zufälligen Zahlen einer ungleichmäßigen Verteilung folgen würden, die möglicherweise nicht den geforderten Bedürfnisse entsprechen würde</span></span><span lang="de"><span>.</span></span></p>
+</div>
+
+<h3 id="Erzeugt_eine_ganze_Zufallszahl_zwischen_zwei_Zahlen_inklusiv">Erzeugt eine ganze Zufallszahl zwischen zwei Zahlen (inklusiv)</h3>
+
+<p>Die obere <code>getRandomInt()</code> Funktion hat ein inklusives Minimum und ein exklusives Maximum. Was ist, wenn sowohl das Minimum als auch das Maximum inklusive sein sollen? Die <code>getRandomIntInclusive()</code> Funktion ermöglicht dieses:</p>
+
+<pre>function getRandomIntInclusive(min, max) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min +1)) + min;
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. JavaScript 1.0 (nur auf UNIX) / JavaScript 1.1 (auf allen Plattformen).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.14', 'Math.random')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.random', 'Math.random')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.random', 'Math.random')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.random")}}</p>
diff --git a/files/de/web/javascript/reference/global_objects/math/max/index.html b/files/de/web/javascript/reference/global_objects/math/max/index.html
new file mode 100644
index 0000000000..e1ac3eba01
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/math/max/index.html
@@ -0,0 +1,118 @@
+---
+title: Math.max()
+slug: Web/JavaScript/Reference/Global_Objects/Math/max
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/max
+---
+<div>{{JSRef}}</div>
+
+<p>Die Funktion <strong><code>Math.max()</code></strong> gibt die größte von 0 oder mehr Zahlen zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-max.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Math.max([<var>wert1</var>[, <var>wert2</var>[, ...]]])</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>wert1, wert2, ...</code></dt>
+ <dd>Zahlen.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Die größte der übergebenen Zahlen. Wenn mindestens ein Parameter nicht zu einer Zahl konvertiert werden kann, wird {{jsxref("NaN")}} zurückgegeben.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Weil <code>max()</code> eine statische Methode von <code>Math</code> ist, kann nur <code>Math.max()</code> verwendet werden. Eine Verwendung mit Math als instanziertem Objekt ist nicht möglich (<code>Math</code> ist kein constructor).</p>
+
+<p>Wenn keine Argumente übergeben wurden ist der Rückgabewert -{{jsxref("Infinity")}}.</p>
+
+<p>Wenn mindestens eines der Argumente nicht in eine Zahl umgewandelt werden kann, ist der Rückgabewert {{jsxref("NaN")}}.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_Math.max()">Einsatz von <code>Math.max()</code></h3>
+
+<pre class="brush: js">Math.max(10, 20);   //  20
+Math.max(-10, -20); // -10
+Math.max(-10, 20);  //  20
+</pre>
+
+<h4 id="Das_größte_Element_in_einem_Array_ermitteln">Das größte Element in einem Array ermitteln</h4>
+
+<p>{{jsxref("Array.prototype.reduce", "Array.reduce()")}} kann ebenfalls benutzt werden, um das Maximum eines Arrays zu erhalten, indem jeder Wert verglichen wird.</p>
+
+<pre class="brush: js">var arr = [1, 2, 3];
+var max = arr.reduce(function(a, b) {
+  return Math.max(a, b);
+});
+</pre>
+
+<p>Die folgende Funktion benutzt {{jsxref("Function.prototype.apply()")}}, um den maximalen Wert eines numerischen Arrays zu finden. <code>getMaxOfArray([1, 2, 3])</code> entspricht <code>Math.max(1, 2, 3)</code>, aber <code>getMaxOfArray()</code> kann programmatisch erstellte Arrays jeder Art annehmen.</p>
+
+<pre class="brush: js">function getMaxOfArray(numArray) {
+  return Math.max.apply(null, numArray);
+}
+</pre>
+
+<p>Alternativ ist es mit dem neuen {{jsxref("Operators/Spread_operator", "spread Operator")}} viel einfacher, den maximalen Wert eines Arrays herauszufinden.</p>
+
+<pre class="brush: js">var arr = [1, 2, 3];
+var max = Math.max(...arr);
+</pre>
+
+<p>Bei dem Einsatz des {{jsxref("Operators/Spread_operator", "spread Operator")}} oder <code>apply</code> kann der Aufruf fehlschlagen oder ein ungültiges Ergebnis herauskommen, wenn das Array zu viele Elemente hat. Das liegt daran, dass versucht wird die Elemente des Arrays als Parameter einer Funktion zu übergeben. Siehe für mehr Details im Abschnitt <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Function/apply#Using_apply_and_built-in_functions">Einsatz von <code>apply</code> und standard Funktionen</a> nach. Die <code>reduce</code> Lösung hat dieses Problem nicht.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. In JavaScript 1.0 implementiert.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.11', 'Math.max')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.max', 'Math.max')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.max', 'Math.max')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.max")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Math.min()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/math/min/index.html b/files/de/web/javascript/reference/global_objects/math/min/index.html
new file mode 100644
index 0000000000..9cd666fda3
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/math/min/index.html
@@ -0,0 +1,112 @@
+---
+title: Math.min()
+slug: Web/JavaScript/Reference/Global_Objects/Math/min
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/min
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Math.min()</code></strong> Funktion gibt den Wert der kleinsten übergebenen Zahl zurück oder {{jsxref("NaN")}}, wenn ein Parameter keine Zahl ist und auch nicht in eine Zahl konvertiert werden kann.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-min.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Math.min([<var>value1</var>[, <var>value2</var>[, ...]]])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parameter</h3>
+
+<dl>
+ <dt><code>value1, value2, ...</code></dt>
+ <dd>Zahlen.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Die kleinste der übergebenen Zahlen. Wenn nur ein Parameter nicht zu einer Zahl konvertiert werden kann, wird {{jsxref("NaN")}} zurückgegeben.</p>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p>Da <code>min()</code> eine statische Eigenschaft von <code>Math</code> ist, muss immer <code>Math.min()</code> genutzt werden, ohne dass ein <code>Math-</code>Objekt erstellt wird (<code>Math</code> ist kein Konstruktor).</p>
+
+<p>Ohne Übergabeparameter wird {{jsxref("Infinity")}} zurückgegeben.</p>
+
+<p>Wenn mindestens ein Übergabeparameter nicht in eine Zahl konvertiert werden kann wird {{jsxref("NaN")}} zurückgegeben.</p>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<h3 id="Example:_Using_Math.min" name="Example:_Using_Math.min">Einsatz von <code>Math.min()</code></h3>
+
+<p>Dies findet den kleinsten Wert aus x und y und weist diesen z zu.</p>
+
+<pre class="brush: js">var x = 10, y = -20;
+var z = Math.min(x, y);
+</pre>
+
+<h3 id="Example:_Clipping_a_value_with_Math.min" name="Example:_Clipping_a_value_with_Math.min">Wert mittels <code>Math.min()</code> begrenzen</h3>
+
+<p><code>Math.min()</code> wird oftmals verwendet um einen Wert so zu begrenzen, dass dieser nicht größer als ein gesetztes Limit werden kann. So kann dies</p>
+
+<pre class="brush: js">var x = f(foo);
+
+if (x &gt; limit) {
+  x = limit;
+}
+</pre>
+
+<p>auch folgendermaßen formuliert werden</p>
+
+<pre class="brush: js">var x = Math.min(f(foo), limit);
+</pre>
+
+<p>Analog kann {{jsxref("Math.max()")}} verwendet werden um einen Mindestwert zu realisieren.</p>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.12', 'Math.min')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.min', 'Math.min')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.min', 'Math.min')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.min")}}</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Math.max()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/math/pi/index.html b/files/de/web/javascript/reference/global_objects/math/pi/index.html
new file mode 100644
index 0000000000..4a07aadc15
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/math/pi/index.html
@@ -0,0 +1,81 @@
+---
+title: Math.PI
+slug: Web/JavaScript/Reference/Global_Objects/Math/PI
+tags:
+  - JavaScript
+  - Math
+  - Property
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/PI
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>Math.PI</strong></code> Eigenschaft repräsentiert die Kreiszahl Pi, welche als Verhältnis zwischen Kreisumfang und Durchmesser definiert ist und gerundet die Zahl 3,14159 ist.</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.PI</mi></mstyle><mo>=</mo><mi>π</mi><mo>≈</mo><mn>3,14159</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.PI}} = \pi \approx 3,14159</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-pi.html")}}</div>
+
+
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p>Weil <code>PI</code> eine statische Eigenschaft von <code>Math</code> ist, muss immer <code>Math.PI</code> genutzt werden, ohne dass ein <code>Math</code> Objekt erstellt wird (<code>Math</code> ist kein Konstruktor).</p>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<h3 id="Example:_Using_Math.E" name="Example:_Using_Math.E">Einsatz von <code>Math.PI</code></h3>
+
+<p>Die folgende Funktion benutzt <code>Math.PI</code>, um aus einem Radius den Umfrang eines Kreises zu berechnen:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">calculateCircumference</span><span class="punctuation token">(</span>radius<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">return</span> Math<span class="punctuation token">.</span>PI <span class="operator token">*</span> <span class="punctuation token">(</span>radius <span class="operator token">+</span> radius<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="function token">calculateCircumference</span><span class="punctuation token">(</span><span class="number token">1</span><span class="punctuation token">)</span><span class="punctuation token">;</span>  <span class="comment token">// 6.283185307179586</span></code></pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.1.6', 'Math.PI')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.pi', 'Math.PI')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.pi', 'Math.PI')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.PI")}}</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Math")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/math/pow/index.html b/files/de/web/javascript/reference/global_objects/math/pow/index.html
new file mode 100644
index 0000000000..5966acd81f
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/math/pow/index.html
@@ -0,0 +1,113 @@
+---
+title: Math.pow()
+slug: Web/JavaScript/Reference/Global_Objects/Math/pow
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/pow
+---
+<div>{{JSRef}}</div>
+
+<p>Die Funktion <strong><code>Math.pow()</code></strong> gibt die P<font face="Consolas, Liberation Mono, Courier, monospace">otenz</font> der <code>Basis</code> mit dem <code>Exponenten</code> an<code> </code>(<code>Basis<sup>Exponent</sup></code>)</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-pow.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Math.pow(<var>Basis</var>, <var>Exponent</var>)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>Basis</code></dt>
+ <dd>Basis (auch: die Grundzahl).</dd>
+ <dt><code>Exponent</code></dt>
+ <dd>der Exponent (auch: die Hochzahl).</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine Zahl, die die Basis potenziert mit dem Exponenten repräsentiert.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Weil <code>pow()</code> eine statische Funktion von <code>Math</code> ist, wird es immer als <code>Math.pow()</code> eingesetzt<code>,</code> jedoch nicht als Methode eines erzeugten <code>Math</code> Objektes (<code>Math</code> ist kein Konstruktor).</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Benutzung_von_Math.pow()">Benutzung von <code>Math.pow()</code></h3>
+
+<pre class="brush: js">// einfach
+Math.pow(7, 2);    // 49
+Math.pow(7, 3);    // 343
+Math.pow(2, 10);   // 1024
+// Brüche als Exponenten
+Math.pow(4, 0.5);  // 2 (Wurzel aus 4)
+Math.pow(8, 1/3);  // 2 (Kubikwurzel aus 8)
+Math.pow(2, 0.5);  // 1.4142135623730951 (Wurzel aus 2)
+Math.pow(2, 1/3);  // 1.2599210498948732 (Kubikwurzel aus 2)
+// Negative Exponenten
+Math.pow(7, -2);   // 0.02040816326530612 (1/49)
+Math.pow(8, -1/3); // 0.5
+// Negative Basis
+Math.pow(-7, 2);   // 49 (Das Quadrat ist positiv)
+Math.pow(-7, 3);   // -343 (kann negativ sein)
+Math.pow(-7, 0.5); // NaN (negative Zahlen haben keine Quadratwurzel)
+// auch wegen Grenzen bei der Gleitkomma Berechnung,
+// Negative Basis mit Bruch als Exponent gibt immer NaN zurück
+Math.pow(-7, 1/3); // NaN
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>
+    <p>Initiale Deffinition, Implementiert in JavaScript 1.0.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.13', 'Math.pow')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.pow', 'Math.pow')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.pow', 'Math.pow')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.pow")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Math.cbrt()")}}</li>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.sqrt()")}}</li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Exponentiation" title="Arithmetic operators take numerical values (either literals or variables) as their operands and return a single numerical value. The standard arithmetic operators are addition (+), subtraction (-), multiplication (*), and division (/).">Exponentiation operator</a> {{experimental_inline}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/math/round/index.html b/files/de/web/javascript/reference/global_objects/math/round/index.html
new file mode 100644
index 0000000000..8e009bf6cb
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/math/round/index.html
@@ -0,0 +1,99 @@
+---
+title: Math.round()
+slug: Web/JavaScript/Reference/Global_Objects/Math/round
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Number
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/round
+---
+<p>{{JSRef}}<br>
+ Die <strong><code>Math.round()</code></strong> Funktion gibt die nächstgelegenen Ganzzahl einer Zahl zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-round.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Math.round(<var>x</var>)</pre>
+
+<h3 id="Parameters" name="Parameters">Parameter</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Eine Zahl.</dd>
+</dl>
+
+<h3 id="Description" name="Description">Rückgabewert</h3>
+
+<p>Den Wert der gegebenen Zahl, der zur nächsten ganzen Zahl gerundet wird.</p>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p>Wenn der Nachkommateil des Argumentes größer als 0.5 ist, wird das Argument zur nächsten ganzen Zahl, deren Absolutwert größer ist, gerundet. Wenn der Nachkommateil kleiner als 0.5 ist, wird auf die nächsten ganzen Zahl, deren Absolutwert kleiner ist, gerundet. Wenn der Nachkommateil genau 0.5 ist, wird auf die nächst größere ganze Zahl aufgerundet (in Richtung +∞). <strong>Das Verhalten bei 0.5 ist anders als bei vielen anderen Programmiersprachen, welche in der Regel zur nächsten ganzen Zahl, welche weiter entfernt von 0 liegt, runden</strong> (das kann zu unterschiedlichen Ergebnissen bei negativen Zahlen mit einem exakten Nachkommateil von 0.5 führen).</p>
+
+<p>Weil <code>round()</code> eine statische Methode von <code>Math</code> ist, benutzt man als Aufruf immer <code>Math.round()</code> und nicht in dem man zunächst ein <code>Math</code>-Objekt erzeugt um anschliessend die <code>round()</code>-Methode aufzurufen (<code>Math</code> ist kein Konstruktor).</p>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<pre class="brush: js">Math.round(20.49);  // 20
+Math.round(20.5);   // 21
+Math.round(42);     // 42
+Math.round(-20.5);  // -20
+Math.round(-20.51); // -21
+</pre>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1st Edition.</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.15', 'Math.round')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.round', 'Math.round')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.round', 'Math.round')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.round")}}</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Number.toPrecision()")}}</li>
+ <li>{{jsxref("Number.toFixed()")}}</li>
+ <li>{{jsxref("Math.abs()")}}</li>
+ <li>{{jsxref("Math.ceil()")}}</li>
+ <li>{{jsxref("Math.floor()")}}</li>
+ <li>{{jsxref("Math.sign()")}}</li>
+ <li>{{jsxref("Math.trunc()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/math/sign/index.html b/files/de/web/javascript/reference/global_objects/math/sign/index.html
new file mode 100644
index 0000000000..26a4085eb1
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/math/sign/index.html
@@ -0,0 +1,115 @@
+---
+title: Math.sign()
+slug: Web/JavaScript/Reference/Global_Objects/Math/sign
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/sign
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Math.sign()</code></strong> Funktion gibt das Vorzeichen einer Zahl zurück, welches angibt, ob eine Zahl positiv, negativ oder 0 ist.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-sign.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Math.sign(<var>x</var>)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Eine Zahl.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine Zahl, die das Vorzeichen des übergebenen Wertes repräsentiert. Wenn der Parameter eine positive Zahl ist, eine negative Zahl ist oder eine Null (0) ist, wird die Funktion <code>1</code>, <code>-1</code>, <code>0</code> oder <code>-0</code> zurückgeben. Andernfalls wird {{jsxref("NaN")}} zurückgegeben.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Weil <code>sign()</code> eine statische Funktion von <code>Math</code> ist, wird sie immer als <code>Math.sign()</code> eingesetzt, jedoch nicht als Methode eines erzeugten <code>Math</code> Objektes (<code>Math</code> ist kein Konstruktor).</p>
+
+<p>Diese Funktion hat die 5 möglichen Rückgabewerte <code>1</code>, <code>-1</code>, <code>0</code>, <code>-0</code> und <code>NaN</code>, welche "positive Zahlen", "negative Zahlen", "positiv 0", "negativ 0" und {{jsxref("NaN")}} repräsentieren.</p>
+
+<p>Der Übergebeparameter dieser Funktion wird implizit zu einem <code>number</code>-Type konvertiert.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_Math.sign()">Einsatz von <code>Math.sign()</code></h3>
+
+<pre class="brush: js">Math.sign(3);     //  1
+Math.sign(-3);    // -1
+Math.sign('-3');  // -1
+Math.sign(0);     //  0
+Math.sign(-0);    // -0
+Math.sign(NaN);   // NaN
+Math.sign('foo'); // NaN
+Math.sign();      // NaN
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span>Math<span class="punctuation token">.</span>sign<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  Math<span class="punctuation token">.</span>sign <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>x<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="comment token">// If x is NaN, the result is NaN.</span>
+    <span class="comment token">// If x is -0, the result is -0.</span>
+    <span class="comment token">// If x is +0, the result is +0.</span>
+    <span class="comment token">// If x is negative and not -0, the result is -1.</span>
+    <span class="comment token">// If x is positive and not +0, the result is +1.</span>
+    <span class="keyword token">return</span> <span class="punctuation token">(</span><span class="punctuation token">(</span>x <span class="operator token">&gt;</span> <span class="number token">0</span><span class="punctuation token">)</span> <span class="operator token">-</span> <span class="punctuation token">(</span>x <span class="operator token">&lt;</span> <span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="operator token">||</span> <span class="operator token">+</span>x<span class="punctuation token">;</span>
+    <span class="comment token">// A more aesthetical persuado-representation is shown below</span>
+    <span class="comment token">//</span>
+    <span class="comment token">// ( (x &gt; 0) ? 0 : 1 )  // if x is negative then negative one</span>
+    <span class="comment token">//          +           // else (because you cant be both - and +)</span>
+    <span class="comment token">// ( (x &lt; 0) ? 0 : -1 ) // if x is positive then positive one</span>
+    <span class="comment token">//         ||           // if x is 0, -0, or NaN, or not a number,</span>
+    <span class="comment token">//         +x           // Then the result will be x, (or) if x is</span>
+    <span class="comment token">//                      // not a number, then x converts to number</span>
+  <span class="punctuation token">}</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>In diesem Polyfill ist keine weitere Typumwandlung nötig, um aus <code>(x &gt; 0)</code> oder <code>(x &lt; 0)</code> Zahlen zu machen, weil das Subtrahieren voneinander eine Typkonvertierung von boolean zu Zahlen erzwingt.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.sign', 'Math.sign')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.sign', 'Math.sign')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.sign")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Math.abs()")}}</li>
+ <li>{{jsxref("Math.ceil()")}}</li>
+ <li>{{jsxref("Math.floor()")}}</li>
+ <li>{{jsxref("Math.round()")}}</li>
+ <li>{{jsxref("Math.trunc()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/math/sin/index.html b/files/de/web/javascript/reference/global_objects/math/sin/index.html
new file mode 100644
index 0000000000..69a7a2f559
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/math/sin/index.html
@@ -0,0 +1,97 @@
+---
+title: Math.sin()
+slug: Web/JavaScript/Reference/Global_Objects/Math/sin
+tags:
+  - JavaScript
+  - Math
+  - Meth
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/sin
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Math.sin()</code></strong> Funktion gibt den Sinus einer Zahl zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-sin.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Math.sin(<var>x</var>)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Eine Zahl im Bogenmaß (rad).</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Den Sinus der übergebenen Zahl.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>Math.sin()</code> Funktion gibt einen nummerischen Wert zwischen -1 und 1 zurück. Dieser repräsentiert den Sinus des Winkels.</p>
+
+<p>Weil <code>sin()</code> eine statische Funktion von <code>Math</code> ist, wird es immer als <code>Math.sin()</code> eingesetzt<code>,</code> jedoch nicht als Methode eines erzeugten <code>Math</code> Objektes (<code>Math</code> ist kein Konstruktor).</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_Math.sin()">Einsatz von <code>Math.sin()</code></h3>
+
+<pre class="brush: js">Math.sin(0);           // 0
+Math.sin(1);           // 0.8414709848078965
+
+Math.sin(Math.PI / 2); // 1
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.16', 'Math.sin')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.sin', 'Math.sin')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.sin', 'Math.sin')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.sin")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Math.acos()")}}</li>
+ <li>{{jsxref("Math.asin()")}}</li>
+ <li>{{jsxref("Math.atan()")}}</li>
+ <li>{{jsxref("Math.atan2()")}}</li>
+ <li>{{jsxref("Math.cos()")}}</li>
+ <li>{{jsxref("Math.tan()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/math/sinh/index.html b/files/de/web/javascript/reference/global_objects/math/sinh/index.html
new file mode 100644
index 0000000000..99e8d1e3c6
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/math/sinh/index.html
@@ -0,0 +1,102 @@
+---
+title: Math.sinh()
+slug: Web/JavaScript/Reference/Global_Objects/Math/sinh
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/sinh
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Math.sinh()</code></strong> Funktion gibt den Sinus Hyperbolicus einer Zahl zurück. Dieser kann mit dem Einsatz der {{jsxref("Math.E", "Eulerschen Zahl", "", 1)}} folgendermaßen berechnet werden:</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mo lspace="0em" rspace="thinmathspace">Math.sinh(x)</mo></mstyle><mo>=</mo><mfrac><mrow><msup><mi>e</mi><mi>x</mi></msup><mo>-</mo><msup><mi>e</mi><mrow><mo>-</mo><mi>x</mi></mrow></msup></mrow><mn>2</mn></mfrac></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.sinh(x)}} = \frac{e^x - e^{-x}}{2}</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-sinh.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Math.sinh(<var>x</var>)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Eine Zahl.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Den Sinus Hyperbolicus der übergebenen Zahl.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Weil <code>sinh()</code> eine statische Funktion von <code>Math</code> ist, wird es immer als <code>Math.sinh()</code> eingesetzt<code>,</code> jedoch nicht als Methode eines erzeugten <code>Math</code> Objektes (<code>Math</code> ist kein Konstruktor).</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_Math.sinh()">Einsatz von <code>Math.sinh()</code></h3>
+
+<pre class="brush: js">Math.sinh(0); // 0
+Math.sinh(1); // 1.1752011936438014
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Diese Funktion kann mit Hilfe der Funktion {{jsxref("Math.exp()")}} emuliert werden:</p>
+
+<pre class="brush: js">Math.sinh = Math.sinh || function(x) {
+  return (Math.exp(x) - Math.exp(-x)) / 2;
+}
+</pre>
+
+<p>Oder nur mit einem Aufruf der {{jsxref("Math.exp()")}} Funktion:</p>
+
+<pre class="brush: js">Math.sinh = Math.sinh || function(x) {
+  var y = Math.exp(x);
+  return (y - 1 / y) / 2;
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-math.sinh', 'Math.sinh')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.sinh', 'Math.sinh')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.sinh")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Math.acosh()")}}</li>
+ <li>{{jsxref("Math.asinh()")}}</li>
+ <li>{{jsxref("Math.atanh()")}}</li>
+ <li>{{jsxref("Math.cosh()")}}</li>
+ <li>{{jsxref("Math.tanh()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/math/sqrt/index.html b/files/de/web/javascript/reference/global_objects/math/sqrt/index.html
new file mode 100644
index 0000000000..a7ad903569
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/math/sqrt/index.html
@@ -0,0 +1,99 @@
+---
+title: Math.sqrt()
+slug: Web/JavaScript/Reference/Global_Objects/Math/sqrt
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/sqrt
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Math.sqrt()</code></strong> Funktion gibt die Quadratwurzel einer Zahl zurück. Diese Ist Mathematisch folgendermaßen definiert:</p>
+
+<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>≥</mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mi>M</mi><mi>a</mi><mi>t</mi><mi>h</mi><mo>.</mo><mi>s</mi><mi>q</mi><mi>r</mi><mi>t</mi><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msqrt><mi>x</mi></msqrt><mo>=</mo><mtext>ein</mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>≥</mo><mn>0</mn><mspace width="thickmathspace"></mspace><mtext>so das</mtext><mspace width="thickmathspace"></mspace><msup><mi>y</mi><mn>2</mn></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \geq 0, \mathtt{Math.sqrt(x)} = \sqrt{x} = \text{the unique} \; y \geq 0 \; \text{such that} \; y^2 = x</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-sqrt.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Math.sqrt(<var>x</var>)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Eine Zahl.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Die Quadratwurzel der übergebenen Zahl. Wenn der Parameter negativ ist, wird {{jsxref("NaN")}} zurückgegeben.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Wenn der Wert von <code>x</code> negativ ist, gibt <code>Math.sqrt()</code> {{jsxref("NaN")}} zurück.</p>
+
+<p>Weil <code>sqrt()</code> eine statische Funktion von <code>Math</code> ist, wird es immer als <code>Math.</code><code>sqrt</code><code>()</code> eingesetzt<code>,</code> jedoch nicht als Methode eines erzeugten <code>Math</code> Objektes (<code>Math</code> ist kein Konstruktor).</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_Math.sqrt()">Einsatz von <code>Math.sqrt()</code></h3>
+
+<pre class="brush: js">Math.sqrt(9); // 3
+Math.sqrt(2); // 1.414213562373095
+
+Math.sqrt(1);  // 1
+Math.sqrt(0);  // 0
+Math.sqrt(-1); // NaN
+Math.sqrt(-0); // -0</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.17', 'Math.sqrt')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.sqrt', 'Math.sqrt')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.sqrt', 'Math.sqrt')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.sqrt")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Math.cbrt()")}}</li>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.pow()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/math/sqrt1_2/index.html b/files/de/web/javascript/reference/global_objects/math/sqrt1_2/index.html
new file mode 100644
index 0000000000..19e1a24f4d
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/math/sqrt1_2/index.html
@@ -0,0 +1,84 @@
+---
+title: Math.SQRT1_2
+slug: Web/JavaScript/Reference/Global_Objects/Math/SQRT1_2
+tags:
+  - JavaScript
+  - Math
+  - Property
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/SQRT1_2
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>Math.SQRT1_2</strong></code> Eigenschaft repräsentiert die Quadratwurzel aus 1/2, welche gerundet 0,707 ist:</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.SQRT1_2</mi></mstyle><mo>=</mo><msqrt><mfrac><mn>1</mn><mn>2</mn></mfrac></msqrt><mo>=</mo><mfrac><mn>1</mn><msqrt><mn>2</mn></msqrt></mfrac><mo>≈</mo><mn>0,707</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.SQRT1_2}} = \sqrt{\frac{1}{2}} = \frac{1}{\sqrt{2}} \approx 0,707</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-sqrt1_2.html")}}</div>
+
+
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p>Weil <code>SQRT1_2</code> eine statische Eigenschaft von <code>Math</code> ist, muss immer <code>Math.SQRT1_2</code> genutzt werden, ohne dass ein <code>Math</code> Objekt erstellt wird (<code>Math</code> ist kein Konstruktor).</p>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<h3 id="Example:_Using_Math.E" name="Example:_Using_Math.E">Einsatz von <code>Math.SQRT1_2</code></h3>
+
+<p>Die folgende Funktion gibt die Quadratwurzel aus 1/2 zurück:</p>
+
+<pre class="brush:js">function getRoot1_2() {
+   return Math.SQRT1_2
+}
+
+getRoot1_2() // 0.7071067811865476</pre>
+
+<p></p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.1.7', 'Math.SQRT1_2')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.sqrt1_2', 'Math.SQRT1_2')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.sqrt1_2', 'Math.SQRT1_2')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.SQRT1_2")}}</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Math.pow()")}}</li>
+ <li>{{jsxref("Math.sqrt()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/math/sqrt2/index.html b/files/de/web/javascript/reference/global_objects/math/sqrt2/index.html
new file mode 100644
index 0000000000..14b748c555
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/math/sqrt2/index.html
@@ -0,0 +1,82 @@
+---
+title: Math.SQRT2
+slug: Web/JavaScript/Reference/Global_Objects/Math/SQRT2
+tags:
+  - JavaScript
+  - Math
+  - Property
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/SQRT2
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>Math.SQRT2</strong></code> Eigenschaft repräsentiert die Quadratwurzel aus 2, welche gerundet 1,414 ist:</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.SQRT2</mi></mstyle><mo>=</mo><msqrt><mn>2</mn></msqrt><mo>≈</mo><mn>1,414</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.SQRT2}} = \sqrt{2} \approx 1,414</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-sqrt2.html")}}</div>
+
+
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p>Weil <code>SQRT2</code> eine statische Eigenschaft von <code>Math</code> ist, muss immer <code>Math.SQRT2</code> genutzt werden, ohne dass ein <code>Math</code>-Objekt erstellt wird (<code>Math</code> ist kein Konstruktor).</p>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<h3 id="Example:_Using_Math.E" name="Example:_Using_Math.E">Einsatz von <code>Math.SQRT2</code></h3>
+
+<p>Die folgende Funktion gibt die Quadratwurzel aus 2 zurück:</p>
+
+<pre class="brush:js">function getRoot2() {
+   return Math.SQRT2
+}
+
+getRoot2() // 1.4142135623730951</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.1.8', 'Math.SQRT2')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.sqrt2', 'Math.SQRT2')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.sqrt2', 'Math.SQRT2')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.SQRT2")}}</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Math.pow()")}}</li>
+ <li>{{jsxref("Math.sqrt()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/math/tan/index.html b/files/de/web/javascript/reference/global_objects/math/tan/index.html
new file mode 100644
index 0000000000..92102e3ae2
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/math/tan/index.html
@@ -0,0 +1,102 @@
+---
+title: Math.tan()
+slug: Web/JavaScript/Reference/Global_Objects/Math/tan
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/tan
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Math.tan()</code></strong> Funktion gibt den Tangens einer Zahl.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-tan.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Math.tan(<var>x</var>)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Eine Zahl im Winkelmaß (rad).</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Den Tangens der übergebenen Zahl.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>Math.tan()</code> Funktion gibt einen numerischen Wert zurück, welcher den Tangens eines Winkels repräsentiert.</p>
+
+<p>Weil <code>tan()</code> eine statische Funktion von <code>Math</code> ist, wird es immer als <code>Math.tan()</code> eingesetzt<code>,</code> jedoch nicht als Methode eines erzeugten <code>Math</code> Objektes (<code>Math</code> ist kein Konstruktor).</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_Math.tan()">Einsatz von <code>Math.tan()</code></h3>
+
+<pre class="brush: js">Math.tan(1); // 1.5574077246549023
+</pre>
+
+<p>Weil die <code>Math.tan()</code> Funktion Werte im Winkelmaß erwartet, es aber oftmals einfacher ist mit Winkeln zu rechnen, nutzt die folgende Funktion Winkel (in Grad) und Convertiert diese in das Winkelmaß: </p>
+
+<pre class="brush: js">function getTanDeg(deg) {
+  var rad = deg * Math.PI/180;
+  return Math.tan(rad);
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.18', 'Math.tan')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.tan', 'Math.tan')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.tan', 'Math.tan')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.tan")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Math.acos()")}}</li>
+ <li>{{jsxref("Math.asin()")}}</li>
+ <li>{{jsxref("Math.atan()")}}</li>
+ <li>{{jsxref("Math.atan2()")}}</li>
+ <li>{{jsxref("Math.cos()")}}</li>
+ <li>{{jsxref("Math.sin()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/math/tanh/index.html b/files/de/web/javascript/reference/global_objects/math/tanh/index.html
new file mode 100644
index 0000000000..7bfa025f4e
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/math/tanh/index.html
@@ -0,0 +1,93 @@
+---
+title: Math.tanh()
+slug: Web/JavaScript/Reference/Global_Objects/Math/tanh
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/tanh
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Math.tanh()</code></strong> Funktion gibt den Tangens Hyperbolicus einer Zahl zurück. Dieser kann folgendermaßen errechnet werden:</p>
+
+<p><math display="block"><semantics><mrow><mo lspace="0em" rspace="0em">tanh</mo><mi>x</mi><mo>=</mo><mfrac><mrow><mo lspace="0em" rspace="0em">sinh</mo><mi>x</mi></mrow><mrow><mo lspace="0em" rspace="0em">cosh</mo><mi>x</mi></mrow></mfrac><mo>=</mo><mfrac><mrow><msup><mi>e</mi><mi>x</mi></msup><mo>-</mo><msup><mi>e</mi><mrow><mo>-</mo><mi>x</mi></mrow></msup></mrow><mrow><msup><mi>e</mi><mi>x</mi></msup><mo>+</mo><msup><mi>e</mi><mrow><mo>-</mo><mi>x</mi></mrow></msup></mrow></mfrac><mo>=</mo><mfrac><mrow><msup><mi>e</mi><mrow><mn>2</mn><mi>x</mi></mrow></msup><mo>-</mo><mn>1</mn></mrow><mrow><msup><mi>e</mi><mrow><mn>2</mn><mi>x</mi></mrow></msup><mo>+</mo><mn>1</mn></mrow></mfrac></mrow><annotation encoding="TeX">\tanh x = \frac{\sinh x}{\cosh x} = \frac {e^x - e^{-x}} {e^x + e^{-x}} = \frac{e^{2x} - 1}{e^{2x}+1}</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-tanh.html")}}</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Math.tanh(<var>x</var>)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Eine Zahl.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Den Tangens Hyperbolicus der übergebenen Zahl.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Weil <code>tanh()</code> eine statische Funktion von <code>Math</code> ist, wird es immer als <code>Math.tanh()</code> eingesetzt<code>,</code> jedoch nicht als Methode eines erzeugten <code>Math</code> Objektes (<code>Math</code> ist kein Konstruktor).</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_Math.tanh()">Einsatz von <code>Math.tanh()</code></h3>
+
+<pre class="brush: js">Math.tanh(0);        // 0
+Math.tanh(Infinity); // 1
+Math.tanh(1);        // 0.7615941559557649
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Diese Funktion kann mit Hilfe der Funktion {{jsxref("Math.exp()")}} emuliert werden:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">Math<span class="punctuation token">.</span>tanh <span class="operator token">=</span> Math<span class="punctuation token">.</span>tanh <span class="operator token">||</span> <span class="keyword token">function</span><span class="punctuation token">(</span>x<span class="punctuation token">)</span><span class="punctuation token">{</span>
+    <span class="keyword token">var</span> a <span class="operator token">=</span> Math<span class="punctuation token">.</span><span class="function token">exp</span><span class="punctuation token">(</span><span class="operator token">+</span>x<span class="punctuation token">)</span><span class="punctuation token">,</span> b <span class="operator token">=</span> Math<span class="punctuation token">.</span><span class="function token">exp</span><span class="punctuation token">(</span><span class="operator token">-</span>x<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">return</span> a <span class="operator token">==</span> <span class="number token">Infinity</span> <span class="operator token">?</span> <span class="number token">1</span> <span class="punctuation token">:</span> b <span class="operator token">==</span> <span class="number token">Infinity</span> <span class="operator token">?</span> <span class="operator token">-</span><span class="number token">1</span> <span class="punctuation token">:</span> <span class="punctuation token">(</span>a <span class="operator token">-</span> b<span class="punctuation token">)</span> <span class="operator token">/</span> <span class="punctuation token">(</span>a <span class="operator token">+</span> b<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-math.tanh', 'Math.tanh')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.tanh', 'Math.tanh')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.tanh")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Math.acosh()")}}</li>
+ <li>{{jsxref("Math.asinh()")}}</li>
+ <li>{{jsxref("Math.atanh()")}}</li>
+ <li>{{jsxref("Math.cosh()")}}</li>
+ <li>{{jsxref("Math.sinh()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/math/trunc/index.html b/files/de/web/javascript/reference/global_objects/math/trunc/index.html
new file mode 100644
index 0000000000..43aa34b2d7
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/math/trunc/index.html
@@ -0,0 +1,125 @@
+---
+title: Math.trunc()
+slug: Web/JavaScript/Reference/Global_Objects/Math/trunc
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/trunc
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Math.trunc()</code></strong> Funktion gibt den ganzzahligen Teil einer Zahl zurück, indem alle Nachkommastellen entfernt werden.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-trunc.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Math.trunc(<var>x</var>)</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Eine Zahl.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Den ganzzahligen Teil der übergebenen Zahl.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Im Gegensatz zu den drei <code>Math</code> Funktionen {{jsxref("Math.floor()")}}, {{jsxref("Math.ceil()")}} und {{jsxref("Math.round()")}} arbeitet <code>Math.trunc()</code> sehr einfach. Sie entfernt den Punkt und die Ziffern rechts davon, ohne zu beachten, ob es sich um eine positive oder negative Nummer handelt.</p>
+
+<p>Beim übergeben eines Parameters wird dieser implizit in einen Nummern-Typ konvertiert.</p>
+
+<p>Weil <code>trunc()</code> eine statische Funktion von <code>Math</code> ist, wird es immer als <code>Math.trunc()</code> eingesetzt<code>,</code> jedoch nicht als Methode eines erzeugten <code>Math</code> Objektes (<code>Math</code> ist kein Konstruktor).</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_Math.trunc">Einsatz von <code>Math.trunc()</code></h3>
+
+<pre class="brush: js">Math.trunc(13.37);    // 13
+Math.trunc(42.84);    // 42
+Math.trunc(0.123);    //  0
+Math.trunc(-0.123);   // -0
+Math.trunc('-1.123'); // -1
+Math.trunc(NaN);      // NaN
+Math.trunc('foo');    // NaN
+Math.trunc();         // NaN
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js">if(!Math.trunc) {
+  Math.trunc = function(v) {
+    v = +v;
+    if(!isFinite(v)) return v;
+
+    return (v - v % 1)   ||   (v &lt; 0 ? -0 : v === 0 ? v : 0);
+
+    // returns:
+    //  0        -&gt;  0
+    // -0        -&gt; -0
+    //  0.2      -&gt;  0
+    // -0.2      -&gt; -0
+    //  0.7      -&gt;  0
+    // -0.7      -&gt; -0
+    //  Infinity -&gt;  Infinity
+    // -Infinity -&gt; -Infinity
+    //  NaN      -&gt;  NaN
+    //  null     -&gt;  0
+  };
+}</pre>
+
+<p>oder:</p>
+
+<pre class="brush: js line-numbers  language-js">if(!Math.trunc) {
+  Math.trunc = function(v) {
+    return v &lt; 0 ? Math.ceil(v) : Math.floor(v);
+  }
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-math.trunc', 'Math.trunc')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.trunc', 'Math.trunc')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.trunc")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Math.abs()")}}</li>
+ <li>{{jsxref("Math.ceil()")}}</li>
+ <li>{{jsxref("Math.floor()")}}</li>
+ <li>{{jsxref("Math.round()")}}</li>
+ <li>{{jsxref("Math.sign()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/nan/index.html b/files/de/web/javascript/reference/global_objects/nan/index.html
new file mode 100644
index 0000000000..434f2b811a
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/nan/index.html
@@ -0,0 +1,97 @@
+---
+title: NaN
+slug: Web/JavaScript/Reference/Global_Objects/NaN
+tags:
+  - JavaScript
+  - Property
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/NaN
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>Die globale <code><strong>NaN</strong></code> Eigenschaft ist ein Wert, der Not-A-Number (keine Zahl) repräsentiert.</p>
+
+<p>{{js_property_attributes(0,0,0)}}</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-nan.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>NaN</code></pre>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p><code>NaN</code> ist eine Eigenschaft des <em>globalen Objektes.</em></p>
+
+<p>Der initiale Wert von <code>NaN</code> ist Not-A-Number — der gleiche Wert wie {{jsxref("Number.NaN")}}. In modernen Browsern ist <code>NaN</code> eine nicht konfigurierbare und nicht überschreibbare Eigenschaft. Immer wenn dieses nicht der Fall ist, sollte es vermieden werden, diese zu überschreiben.</p>
+
+<p>Der Einsatz von <code>NaN</code> in Programmen ist selten. Es wird als Rückgabewert genutzt, wenn {{jsxref("Math")}} Funktionen fehlschlagen (<code>Math.sqrt(-1)</code>) oder wenn der Versuch, eine Zeichenkette in eine Nummer zu konvertieren, fehlschlägt (<code>parseInt("blabla")</code>).</p>
+
+<h3 id="Tests_mit_NaN">Tests mit <code>NaN</code></h3>
+
+<p>Gleichheitsoperatoren (<code>==</code>, <code>!=</code>, <code>===</code> und <code>!==</code>) können nicht genutzt werden, um auf <code>NaN</code> zu prüfen. Stattdessen können die Methoden {{jsxref("Number.isNaN()")}} oder {{jsxref("Global_Objects/isNaN", "isNaN()")}} eingesetzt werden. Alternativ kann ein Vergleich auf sich selbst durchgeführt werden, weil nur <code>NaN</code> mit sich selbst verglichen ungleich ist.</p>
+
+<pre class="brush: js">NaN === NaN;        // false
+Number.NaN === NaN; // false
+isNaN(NaN);         // true
+isNaN(Number.NaN);  // true
+
+function valueIsNaN(v) { return v !== v; }
+valueIsNaN(1);          // false
+valueIsNaN(NaN);        // true
+valueIsNaN(Number.NaN); // true
+</pre>
+
+<p>Die Unterschiede zwischen <code>isNaN()</code> and <code>Number.isNaN()</code> sind zu beachten: <span id="result_box" lang="de"><span>ersteres wird <code>true</code> zurückgeben, wenn der übergebene Wert <code>NaN</code> ist, oder wenn er <code>NaN</code> wird, nachdem er zu einer Zahl umgewandelt wurde, während letzteres nur dann <code>true</code> zurückgibt, wenn der aktuelle Wert <code>NaN</code> ist:</span></span></p>
+
+<pre class="brush: js"><span lang="de"><span>isNaN('hello world'); // returns 'true'.
+Number.isNaN('Hello world'); // returns 'false'.
+</span></span></pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.3</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.1.1', 'NaN')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-value-properties-of-the-global-object-nan', 'NaN')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-value-properties-of-the-global-object-nan', 'NaN')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.NaN")}}</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Number.NaN")}}</li>
+ <li>{{jsxref("Number.isNaN()")}}</li>
+ <li>{{jsxref("isNaN", "isNaN()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/null/index.html b/files/de/web/javascript/reference/global_objects/null/index.html
new file mode 100644
index 0000000000..323579ee42
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/null/index.html
@@ -0,0 +1,93 @@
+---
+title: 'null'
+slug: Web/JavaScript/Reference/Global_Objects/null
+tags:
+  - JavaScript
+  - Literal
+  - Primitive
+translation_of: Web/JavaScript/Reference/Global_Objects/null
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>Der Wert <code>null</code> repräsentiert das absichtliche Fehlen eines Wertes. Es ist einer der {{Glossary("Primitive", "Primitiven Werte")}} in Javascript.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-null.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>null </code></pre>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p>Der Wert <code>null</code> wird als Literal geschrieben: <code>null</code>. Der Wert <code>null</code> ist ein Literal (keine Eigenschaft des <em>globalen Objektes</em> wie<em> </em>{{jsxref("Global_Objects/undefined", "undefined")}}). <span id="result_box" lang="de"><span>Stattdessen drückt null einen Mangel an Identifikation aus und zeigt an, dass eine Variable auf kein Objekt zeigt</span></span>. In APIs wird <code>null</code> oftmals an Stellen verwendet, an denen ein Objekt optional genutzt werden kann.</p>
+
+<pre class="brush: js">// foo existiert nicht. Es wurde nicht definiert und nirgendwo initialisiert:
+foo;
+"ReferenceError: foo is not defined"
+
+// foo existiert nun, aber die Variable hat keinen Typ oder Wert:
+var foo = null;
+foo;
+"null"
+</pre>
+
+<h3 id="Unterschied_zwischen_null_und_undefined">Unterschied zwischen <code>null</code> und <code>undefined</code></h3>
+
+<p>Wenn auf null geprüft wird, sollte nicht der Gleichheitsvergleich ({{jsxref("Operators/Comparison_Operators", "==", "#Equality")}}) mit dem Identitätsvergleich ({{jsxref("Operators/Comparison_Operators", "===", "#Identity")}}) verwechselt werden, weil bei der Prüfung auf Gleichheit eine <span class="dpf_sent" id="dpfsent_3">implizite </span>Typumwandlung vorgenommen wird.</p>
+
+<pre class="brush: js">typeof null          // "object" (not "null" for legacy reasons)
+typeof undefined     // "undefined"
+null === undefined   // false
+null == undefined    // true
+null === null        // true
+null == null         // true
+!null                // true
+isNaN(1 + null)      // false
+isNaN(1 + undefined) // true</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-4.3.11', 'null value')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-null-value', 'null value')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-null-value', 'null value')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.null")}}</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("undefined")}}</li>
+ <li>{{jsxref("NaN")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/number/epsilon/index.html b/files/de/web/javascript/reference/global_objects/number/epsilon/index.html
new file mode 100644
index 0000000000..6259e2443f
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/number/epsilon/index.html
@@ -0,0 +1,75 @@
+---
+title: Number.EPSILON
+slug: Web/JavaScript/Reference/Global_Objects/Number/EPSILON
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Number
+  - Property
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/EPSILON
+---
+<div>{{JSRef}}</div>
+
+<p>Die Eigenschaft <strong><code>Number.EPSILON</code></strong> beschreibt den Unterschied zwischen 1 und der kleinsten Gleitpunktzahl größer als 1.</p>
+
+<p>Man muss kein Objekt von Typ {{jsxref("Number")}}  erzeugen, um auf diese statische Eigenschaft zuzugreifen. Man muss nur <code>Number.EPSILON</code> aufrufen.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-epsilon.html")}}</div>
+
+
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p>Die <code>EPSILON</code> Eigenschaft hat einen ungefähren Wert von <code>2.2204460492503130808472633361816E-16</code> order <code>2<sup>-52</sup></code>.</p>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<h3 id="Testgleichung">Testgleichung</h3>
+
+<pre class="brush: js">x = 0.2;
+y = 0.3;
+z = 0.1;
+equal = (Math.abs(x - y + z) &lt; Number.EPSILON);</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">if</span> <span class="punctuation token">(</span>Number<span class="punctuation token">.</span>EPSILON <span class="operator token">===</span> undefined<span class="punctuation token">) </span><span class="punctuation token">{</span>
+    Number<span class="punctuation token">.</span>EPSILON <span class="operator token">=</span> Math<span class="punctuation token">.</span><span class="function token">pow</span><span class="punctuation token">(</span><span class="number token">2</span><span class="punctuation token">,</span> <span class="operator token">-</span><span class="number token">52</span><span class="punctuation token">)</span><span class="punctuation token">;
+}</span></code>
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-number.epsilon', 'Number.EPSILON')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.epsilon', 'Number.EPSILON')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.EPSILON")}}</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>Das {{jsxref("Number")}} Objekt.</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/number/index.html b/files/de/web/javascript/reference/global_objects/number/index.html
new file mode 100644
index 0000000000..95bcd0652f
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/number/index.html
@@ -0,0 +1,180 @@
+---
+title: Number
+slug: Web/JavaScript/Reference/Global_Objects/Number
+tags:
+  - JavaScript
+  - Number
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number
+---
+<div>{{JSRef}}</div>
+
+<p>Das JavaScript Objekt <strong><code>Number</code></strong> ist ein Container Objekt (Wrapper Objekt), welches das Arbeiten mit numerischen Werten erlaubt. Ein <code>Number</code> Objekt wird erzeugt indem der <code>Number()</code> Konstruktor verwendet wird.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">new Number(value);</pre>
+
+<h3 id="Parameters" name="Parameters">Parameter</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Ein numerischer Wert, der als Objekt erstellt werden soll.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p>Die hauptsächlichen Nutzungen des <code>Number</code> Objektes sind:</p>
+
+<ul>
+ <li>Wenn der Parameter nicht zu einer Nummer konvertiert werden kann, wird {{jsxref("NaN")}} zurückgegeben.</li>
+ <li>In einem nicht-Konstruktor Kontext (z. B. ohne den {{jsxref("Operators/new", "new")}} Operator) führt <code>Number</code> zu einer Typkonvertierung.</li>
+</ul>
+
+<h2 id="Properties" name="Properties">Eigenschaften</h2>
+
+<dl>
+ <dt>{{jsxref("Number.EPSILON")}}</dt>
+ <dd>Das kleinste Intervall zwischen zwei repräsentierbaren Zahlen.</dd>
+ <dt>{{jsxref("Number.MAX_SAFE_INTEGER")}}</dt>
+ <dd>Die größte sichere Ganzzahl in JavaScript (2<sup>53</sup> -1).</dd>
+ <dt>{{jsxref("Number.MAX_VALUE")}}</dt>
+ <dd>Die größte repräsentierbare Zahl.</dd>
+ <dt>{{jsxref("Number.MIN_SAFE_INTEGER")}}</dt>
+ <dd>Die kleinste sichere Ganzzahl in JavaScript (-(2<sup>53</sup> -1)).</dd>
+ <dt>{{jsxref("Number.MIN_VALUE")}}</dt>
+ <dd>Die kleinste positive repräsentierbare Zahl. Das ist die positive Zahl, die am nächsten an <code>0</code> ist (aber nicht <code>0</code> ist).</dd>
+ <dt>{{jsxref("Number.NaN")}}</dt>
+ <dd>Spezieller "keine Zahl" Wert.</dd>
+ <dt>{{jsxref("Number.NEGATIVE_INFINITY")}}</dt>
+ <dd>Spezieller Wert welcher negativ Unendlich repräsentiert; wird bei einem Overflow zurückgegeben.</dd>
+ <dt>{{jsxref("Number.POSITIVE_INFINITY")}}</dt>
+ <dd>Spezieller Wert welcher positiv Unendlich repräsentiert; wird bei einem Overflow zurückgegeben.</dd>
+ <dt>{{jsxref("Number.prototype")}}</dt>
+ <dd>
+ <div id="gt-src-tools">
+ <div id="tts_button"><span id="result_box" lang="de"><span>Ermöglicht das Hinzufügen</span> <span>von</span> <span>Eigenschaften</span> <span>zu</span> <span>einem</span> <span><code>Number</code> Objekt</span></span></div>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Methoden</h2>
+
+<dl>
+ <dt>{{jsxref("Number.isNaN()")}}</dt>
+ <dd>Gibt an, ob der übergebene Wert {{jsxref("Number.NaN", "NaN")}} ist.</dd>
+ <dt>{{jsxref("Number.isFinite()")}}</dt>
+ <dd>Gibt an, ob der übergebene Wert eine endliche Zahl ist.</dd>
+ <dt>{{jsxref("Number.isInteger()")}}</dt>
+ <dd>Gibt an, ob der übergebene Wert eine ganze Zahl ist.</dd>
+ <dt>{{jsxref("Number.isSafeInteger()")}}</dt>
+ <dd>Gibt an, ob der der übergebene Wert eine sichere ganze Zahl ist (eine ganze Zahl zwischen -(2<sup>53</sup> -1) und 2<sup>53</sup> -1).</dd>
+ <dt><s class="obsoleteElement">{{jsxref("Number.toInteger()")}} {{obsolete_inline}}</s></dt>
+ <dd><s class="obsoleteElement">Wurde eingesetzt um eine Zahl zu einer ganzen Zahl zu konvertieren. Die Funktion wurde entfernt.</s></dd>
+ <dt>{{jsxref("Number.parseFloat()")}}</dt>
+ <dd>Der Wert ist der gleiche wie bei der {{jsxref("parseFloat", "parseFloat()")}} Funktion des globalen Objektes.</dd>
+ <dt>{{jsxref("Number.parseInt()")}}</dt>
+ <dd>Der Wert ist der gleiche wie bei der {{jsxref("parseInt", "parseInt()")}} Funktion des globalen Objektes.</dd>
+</dl>
+
+<h2 id="Number_instances" name="Number_instances"><code>Number</code> Instanzen</h2>
+
+<p>Alle Instanzen von <code>Number</code> erben von {{jsxref("Number.prototype")}}. Das Prototyp Objekt des <code>Number</code> Konstruktors kann verändert werden, um alle Instanzen von <code>Number</code> zu beeinflussen.</p>
+
+<h3 id="Methods_of_number_instance" name="Methods_of_number_instance">Methoden</h3>
+
+<div>{{page('/de/docs/Web/JavaScript/Reference/Global_Objects/Number/prototype', 'Methoden')}}</div>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<h3 id="Example:_Using_the_Number_object_to_assign_values_to_numeric_variables" name="Example:_Using_the_Number_object_to_assign_values_to_numeric_variables">Einsatz des <code>Number</code> Objektes zur Zuweisung von numerischen Variablen</h3>
+
+<p>Das folgende Beispiel benutzt Eigenschaften des <code>Number</code> Objektes um Werte zu numerischen Variablen zuzuweisen:</p>
+
+<pre class="brush: js">var biggestNum = Number.MAX_VALUE;
+var smallestNum = Number.MIN_VALUE;
+var infiniteNum = Number.POSITIVE_INFINITY;
+var negInfiniteNum = Number.NEGATIVE_INFINITY;
+var notANum = Number.NaN;
+</pre>
+
+<h3 id="Example:_Using_Number_to_convert_a_Date_object" name="Example:_Using_Number_to_convert_a_Date_object">Ganzzahlbereich von <code>Number</code></h3>
+
+<p>Das folgende Beispiel zeigt die kleinste und größte Ganzzahl, welche mit <code>Number</code> Objekten repräsentiert werden kann (für Details siehe im ECMAScript Standard Kapitel <em><a href="https://tc39.github.io/ecma262/#sec-ecmascript-language-types-number-type">6.1.6 The Number Type</a></em>):</p>
+
+<pre class="brush: js">var biggestInt = 9007199254740992;
+var smallestInt = -9007199254740992;
+</pre>
+
+<p>Wenn Daten im JSON Format eingelesen werden und Ganzzahlen den oben gezeigten Bereich übersteigen, kann es passieren, dass Fehler beim Erstellen von <code>Number</code> Objekten auftreten. Mit dem Einsatz von {{jsxref("String")}} können solche Fehler umgangen werden. </p>
+
+<h3 id="Example:_Using_Number_to_convert_a_Date_object" name="Example:_Using_Number_to_convert_a_Date_object">Einsatz von <code>Number</code> zum Konvertieren eines <code>Date</code> Objekts</h3>
+
+<p>Das folgende Beispiel konvertiert ein {{jsxref("Date")}} Objekt in einen numerischen Wert. Dazu wird <code>Number</code> als Funktion verwendet:</p>
+
+<pre class="brush: js">var d = new Date("December 17, 1995 03:24:00");
+print(Number(d));
+</pre>
+
+<p>Ausgabe: "819199440000".</p>
+
+<h3 id="Konvertiertung_von_Strings_zu_Nummern">Konvertiertung von Strings zu Nummern</h3>
+
+<pre class="brush: js">Number('123')     // 123
+Number('12.3')    // 12.3
+Number('123e-1')  // 12.3
+Number('')        // 0
+Number('0x11')    // 17
+Number('0b11')    // 3
+Number('0o11')    // 9
+Number('foo')     // NaN
+Number('100a')    // NaN
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7', 'Number')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number-objects', 'Number')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>
+    <p>Neue Methoden und Properties hinzugefügt: {{jsxref("Number.EPSILON", "EPSILON")}}, {{jsxref("Number.isFinite", "isFinite")}}, {{jsxref("Number.isInteger", "isInteger")}}, {{jsxref("Number.isNaN", "isNaN")}}, {{jsxref("Number.parseFloat", "parseFloat")}}, {{jsxref("Number.parseInt", "parseInt")}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number-objects', 'Number')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.Number")}}</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("NaN", "NaN")}}</li>
+ <li>Das globale Objekt {{jsxref("Math", "Math")}}</li>
+ <li><a href="https://medium.com/@maximus.koretskyi/javascripts-number-type-8d59199db1b6#.9whwe88tz">Number type in details</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/number/isfinite/index.html b/files/de/web/javascript/reference/global_objects/number/isfinite/index.html
new file mode 100644
index 0000000000..3db1065680
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/number/isfinite/index.html
@@ -0,0 +1,93 @@
+---
+title: Number.isFinite()
+slug: Web/JavaScript/Reference/Global_Objects/Number/isFinite
+tags:
+  - JavaScript
+  - Method
+  - Number
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/isFinite
+---
+<div>{{JSRef}}</div>
+
+<p>Die Methode <strong><code>Number.isFinite()</code></strong> stellt fest, ob ein Wert endlich ist oder nicht.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-isfinite.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Number.isFinite(<var>testWert</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parameter</h3>
+
+<dl>
+ <dt><code>test</code><code><var>Wert</var></code></dt>
+ <dd>Wert, der auf <span class="dpf_sent" id="dpfsent_2">Endlichkeit </span>getestet wird.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein {{jsxref("Boolean")}} der beschreibt, ob eine Zahl endlich oder nicht endlich ist.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Im Vergleich zu der globalen Funktion {{jsxref("isFinite", "isFinite()")}}, werden übergeben Wert nicht in eine Zahl konvertiert. Das <span class="dpf_sent" id="dpfsent_3">bedeutet</span>, dass nur Werte vom Typ number die endlich sind <code>true</code> als <span class="dpf_sent" id="dpfsent_3">Resultat </span>haben.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js">Number.isFinite(Infinity);  // false
+Number.isFinite(NaN);       // false
+Number.isFinite(-Infinity); // false
+
+Number.isFinite(0);         // true
+Number.isFinite(2e64);      // true
+
+Number.isFinite('0');       // false, würde mit der globalen
+                            // Funktion isFinite('0') true ergeben
+Number.isFinite(null);      // false, würde mit der globalen
+                            // Funktion isFinite(null) true ergeben
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js">Number.isFinite = Number.isFinite || function(value) {
+    return typeof value === 'number' &amp;&amp; isFinite(value);
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.isfinite', 'Number.isInteger')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.isfinite', 'Number.isInteger')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.isFinite")}}</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>Das {{jsxref("Number")}} Objekt.</li>
+ <li>Die globale Funktion {{jsxref("isFinite")}}.</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/number/isinteger/index.html b/files/de/web/javascript/reference/global_objects/number/isinteger/index.html
new file mode 100644
index 0000000000..0befee0d25
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/number/isinteger/index.html
@@ -0,0 +1,98 @@
+---
+title: Number.isInteger()
+slug: Web/JavaScript/Reference/Global_Objects/Number/isInteger
+tags:
+  - JavaScript
+  - Method
+  - Number
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/isInteger
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Number.isInteger()</code></strong> Methode prüft,  ob ein übergebener Parameter eine ganze Zahl ist.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-isinteger.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Number.isInteger(v<var>alue</var>)</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Wert der getestet wird, ob er eine ganze Zahl ist.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein {{jsxref("Boolean")}} der angibt, ob der übergebene Wert eine ganze Zahl ist oder nicht.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Wenn der übergebene Wert eine ganze Zahl ist, wird <code>true</code> zurückgegeben, anderfalls wird <code>false</code> zurückgegeben. Wenn der Wert {{jsxref("NaN")}} oder Unendlich (Infinity) ist, wird <code>false</code> zurückgegeben.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js">Number.isInteger(0);         // true
+Number.isInteger(1);         // true
+Number.isInteger(-100000);   // true
+Number.isInteger(99999999999999999999999); // true
+
+Number.isInteger(0.1);       // false
+Number.isInteger(Math.PI);   // false
+
+<code class="language-js">Number<span class="punctuation token">.</span><span class="function token">isInteger</span><span class="punctuation token">(</span><span class="number token">NaN</span><span class="punctuation token">)</span><span class="punctuation token">;</span>       <span class="comment token">// false</span></code>
+Number.isInteger(Infinity);  // false
+Number.isInteger(-Infinity); // false
+Number.isInteger('10');      // false
+Number.isInteger(true);      // false
+Number.isInteger(false);     // false
+Number.isInteger([1]);       // false
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js">Number.isInteger = Number.isInteger || function(value) {
+  return typeof value === 'number' &amp;&amp;
+    isFinite(value) &amp;&amp;
+    Math.floor(value) === value;
+};
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.isinteger', 'Number.isInteger')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.isinteger', 'Number.isInteger')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.isInteger")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Number")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/number/isnan/index.html b/files/de/web/javascript/reference/global_objects/number/isnan/index.html
new file mode 100644
index 0000000000..08d1a52303
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/number/isnan/index.html
@@ -0,0 +1,104 @@
+---
+title: Number.isNaN()
+slug: Web/JavaScript/Reference/Global_Objects/Number/isNaN
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Number
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/isNaN
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Number.isNaN()</code></strong> Methode stellt fest, ob der Übergabewert {{jsxref("NaN")}} ist und der Typ des Parameters  {{jsxref("Number")}} ist . Dieses ist eine robustere Version der globalen Methode {{jsxref("isNaN", "isNaN()")}}</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-isnan.html", "taller")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Number.isNaN(<var>testWert</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parameter</h3>
+
+<dl>
+ <dt><code>testWert</code></dt>
+ <dd>Der Wert, der auf {{jsxref("NaN")}} getestet werden soll.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p><strong>true</strong> wenn der Wert {{jsxref("NaN")}} und der Typ {{jsxref("Number")}} ist. Anderfalls <strong>false</strong>.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Weil beide Gleichheitsoperatoren, {{jsxref("Operators/Comparison_Operators", "==", "#Equality")}} und {{jsxref("Operators/Comparison_Operators", "===", "#Identity")}}, den Vergleich, ob {{jsxref("NaN")}} <em>gleich</em> {{jsxref("NaN")}} ist, zu <code>false </code>auswerten, hat die Methode <code>Number.isNaN()</code> an Bedeutung gewonnen. Diese Situation ist anders als bei allen anderen Vergleichen von Werten in JavaScript.</p>
+
+<p>Im Vergleich zu der globalen Methode {{jsxref("isNaN", "isNaN()")}} hat die Methode <code>Number.isNaN()</code> nicht das Problem, dass Werte zu einer Nummer konvertiert werden. Das bedeutet, das Werte, die normalerweise zu {{jsxref("NaN")}} konvertiert würden, aber momentan nicht dem Wert {{jsxref("NaN")}} entsprechen, ohne Probleme der Methode übergeben werden können. Das wiederum bedeutet, dass nur Werte vom Typ {{jsxref("Number")}}, die zudem {{jsxref("NaN")}} entsprechen <code>true </code>als Resultat haben.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js">Number.isNaN(NaN);        // true
+Number.isNaN(Number.NaN); // true
+Number.isNaN(0 / 0)       // true
+
+// Beispiele, bei denen isNaN() true zurück gibt
+Number.isNaN('NaN');      // false
+Number.isNaN(undefined);  // false
+Number.isNaN({});         // false
+Number.isNaN('blabla');   // false
+
+// Diese alle geben false zurück
+Number.isNaN(true);
+Number.isNaN(null);
+Number.isNaN(37);
+Number.isNaN('37');
+Number.isNaN('37.37');
+Number.isNaN('');
+Number.isNaN(' ');
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Das Folgende funktioniert, weil <code>NaN</code> der einzige Wert ist, welcher nicht gleich mit sich selbst ist.</p>
+
+<pre class="brush: js">Number.isNaN = Number.isNaN || function(value) {
+    return value !== value;
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-number.isnan', 'Number.isnan')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.isnan', 'Number.isnan')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.isNaN")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Number")}}</li>
+ <li>{{jsxref("isNaN", "isNaN()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/number/issafeinteger/index.html b/files/de/web/javascript/reference/global_objects/number/issafeinteger/index.html
new file mode 100644
index 0000000000..9f9d35082d
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/number/issafeinteger/index.html
@@ -0,0 +1,99 @@
+---
+title: Number.isSafeInteger()
+slug: Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Number
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Number.isSafeInteger()</code></strong> Methode prüft, ob der übergebene Wert eine Nummer ist, die ein sichere ganze Zahl ist.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-issafeinteger.html")}}</div>
+
+
+
+<p>Eine sichere ganze Zahl ist</p>
+
+<ul>
+ <li>eine Zahl, die exakt als IEEE-754 double precision Zahl repräsentiert werden kann, und</li>
+ <li>eine Zahl, deren IEEE-754 Repräsentation nicht das Ergebnis von Rundungen anderer ganzer Zahlen sein kann.</li>
+</ul>
+
+<p>Zum Beispiel ist <code>2<sup>53</sup> - 1</code> eine sichere ganze Zahle: sie kann exakt repräsentiert werden und keine andere ganze Zahl wird in jedem IEEE-754 Rundungsmodus zu ihr gerundet. Im gegensatz dazu ist <code>2<sup>53</sup></code> keine sichere ganze Zahl: Sie kann in IEEE-754 exakt repräsentiert werden, jedoch wird die ganze Zahl <code>2<sup>53</sup> + 1</code> kann nicht exakt repräsentiert werden und wird zu <code>2<sup>53</sup> </code>in den Modus <em>zum nächsten Runden</em> und <em>zu null runden </em>gerundet. Die sicheren ganzen Zahlen sind alle ganzen Zahlen im Bereich von <code>-(2<sup>53</sup> - 1)</code> inklusiv und <code>2<sup>53</sup> - 1</code> inklusiv.</p>
+
+<p>Der Einsatz von Zahlen größer ~9 Biliarden oder kleiner ~-9 Biliarder mit voller Präzision benötigen eine <a href="https://de.wikipedia.org/wiki/Langzahlarithmetik">Langzahlarythmetik Bibliothek</a>. Mehr Informationen über die Repräsentation von Gleitkommazahlen gibt es in dem Artikel <a href="http://floating-point-gui.de/">What Every Programmer Needs to Know about Floating Point Arithmetic</a>.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Number.isSafeInteger(<var>testValue</var>)</code>
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>testValue</code></dt>
+ <dd>Wert der getestet wird, ob er ein sichere ganze Zahl ist.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein {{jsxref("Boolean")}}, der angibt, ob die übergebenen Zahl eine sichere ganze Zahl ist oder nicht.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js">Number.isSafeInteger(3);                    // true
+Number.isSafeInteger(Math.pow(2, 53));      // false
+Number.isSafeInteger(Math.pow(2, 53) - 1);  // true
+Number.isSafeInteger(NaN);                  // false
+Number.isSafeInteger(Infinity);             // false
+Number.isSafeInteger('3');                  // false
+Number.isSafeInteger(3.1);                  // false
+Number.isSafeInteger(3.0);                  // true
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js">Number.isSafeInteger = Number.isSafeInteger || function (value) {
+   return Number.isInteger(value) &amp;&amp; Math.abs(value) &lt;= Number.MAX_SAFE_INTEGER;
+};
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-number.issafeinteger', 'Number.isSafeInteger')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.issafeinteger', 'Number.isSafeInteger')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.isSafeInteger")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Das {{jsxref("Number")}} Objekt.</li>
+ <li>{{jsxref("Number.MIN_SAFE_INTEGER")}}</li>
+ <li>{{jsxref("Number.MAX_SAFE_INTEGER")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/number/max_safe_integer/index.html b/files/de/web/javascript/reference/global_objects/number/max_safe_integer/index.html
new file mode 100644
index 0000000000..1254955d54
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/number/max_safe_integer/index.html
@@ -0,0 +1,68 @@
+---
+title: Number.MAX_SAFE_INTEGER
+slug: Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Number
+  - Property
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>Number.MAX_SAFE_INTEGER</strong></code> Konstante repräsentiert die größte, sichere, ganze Zahl in JavaScript (<code>2<sup>53</sup> - 1</code>).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-maxsafeinteger.html")}}</div>
+
+
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>MAX_SAFE_INTEGER</code> Konstante hat einen Wert von <code>9007199254740991</code> (9.007.199.254.740.991 oder ca. 9 <span class="short_text" id="result_box" lang="de"><span>Billiarde</span></span>). Die Bedeutung hinter dieser Zahl ist, dass in JavaScript <a href="http://en.wikipedia.org/wiki/Double_precision_floating-point_format">double-precision floating-point Zahlen</a> wie sie in <a href="http://en.wikipedia.org/wiki/IEEE_floating_point">IEEE 754</a> spezifiziert sind benutzt werden. Nach dieser Spezifikation ist die sichere Repräsentation von Zahlen nur zwischen <code>-(2<sup>53</sup> - 1)</code> und <code>2<sup>53</sup> - 1</code> möglich.</p>
+
+<p>Sicher heißt in diesem Kontext, dass es möglich ist ganze Zahlen exakt zu repräsentieren und sie korrekt zu vergleichen. Zum Beispiel wird <code>Number.MAX_SAFE_INTEGER + 1 === Number.MAX_SAFE_INTEGER + 2</code> zu <code>true</code> ausgewertet, was mathematisch nicht richtig ist. Weiter Informationen sind im Artikel  {{jsxref("Number.isSafeInteger()")}} zu finden. </p>
+
+<p>Weil <code>MAX_SAFE_INTEGER</code> eine statische Eigenschaft von {{jsxref("Number")}} ist, wird sie immer mit <code>Number.MAX_SAFE_INTEGER</code> abgerufen, im Gegensatz zu einer Eigenschaft eines {{jsxref("Number")}} Objektes, was erstellt wurde.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js">Number.MAX_SAFE_INTEGER // 9007199254740991
+Math.pow(2, 53) - 1     // 9007199254740991
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-number.max_safe_integer', 'Number.MAX_SAFE_INTEGER')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.max_safe_integer', 'Number.MAX_SAFE_INTEGER')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.MAX_SAFE_INTEGER")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Number.MIN_SAFE_INTEGER")}}</li>
+ <li>{{jsxref("Number.isSafeInteger()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/number/max_value/index.html b/files/de/web/javascript/reference/global_objects/number/max_value/index.html
new file mode 100644
index 0000000000..9cb4be1929
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/number/max_value/index.html
@@ -0,0 +1,82 @@
+---
+title: Number.MAX_VALUE
+slug: Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE
+tags:
+  - JavaScript
+  - Number
+  - Property
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Number.MAX_VALUE</code></strong> Eigenschaft repräsentiert den größten nummerische  Wert, der in JavaScript repräsentiert werden kann.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-maxvalue.html")}}</div>
+
+
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>MAX_VALUE</code> Eigenschaft hat einen ungefähren Wert von <code>1.79E+308</code> (<math><semantics><mrow><mn>1</mn><mo>,</mo><mn>79</mn><mo>⋅</mo><msup><mn>10</mn><mn>308</mn></msup></mrow><annotation encoding="TeX">1,79 \cdot 10^{308}</annotation></semantics></math>). Werte die größer sind, werden als "<code>Infinity</code>" (unendlich) repräsentiert.</p>
+
+<p>Weil <code>MAX_VALUE</code> eine statische Eigenschaft von {{jsxref("Number")}} ist, wird sie immer mit <code>Number.</code> <code>MAX_VALUE</code> abgerufen, im Gegensatz zu einer Eigenschaft eines {{jsxref("Number")}} Objektes, was erstellt wurde.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_MAX_VALUE">Einsatz von <code>MAX_VALUE</code></h3>
+
+<p>Im folgenden Quelltext werden zwei nummerische Werte multipliziert. Wenn das Ergebnis kleiner oder gleich <code>MAX_VALUE</code> ist, wird <code>func1()</code> ausgeführt; andernfalls wird <code>func2() </code>ausgeführt.   </p>
+
+<pre class="brush: js">if (num1 * num2 &lt;= Number.MAX_VALUE) {
+  func1();
+} else {
+  func2();
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.3.2', 'Number.MAX_VALUE')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.max_value', 'Number.MAX_VALUE')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.max_value', 'Number.MAX_VALUE')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.MAX_VALUE")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Number.MIN_VALUE")}}</li>
+ <li>{{jsxref("Number")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/number/min_safe_integer/index.html b/files/de/web/javascript/reference/global_objects/number/min_safe_integer/index.html
new file mode 100644
index 0000000000..4440e7d913
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/number/min_safe_integer/index.html
@@ -0,0 +1,66 @@
+---
+title: Number.MIN_SAFE_INTEGER
+slug: Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Number
+  - Property
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>Number.MIN_SAFE_INTEGER</strong></code> Konstante repräsentiert die kleinste sicheren ganze Zahl in JavaScript (<code>-(2<sup>53</sup> - 1)</code>).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-min-safe-integer.html")}}</div>
+
+
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>MIN_SAFE_INTEGER</code> Konstante hat einen Wert von <code>-</code> <code>9007199254740991</code> (-9.007.199.254.740.991 oder ca. -9 <span class="short_text" id="result_box" lang="de"><span>Billiarde</span></span>). Die Bedeutung hinter dieser Zahl ist, dass in JavaScript <a class="external external-icon" href="http://en.wikipedia.org/wiki/Double_precision_floating-point_format">double-precision floating-point Zahlen</a> wie sie in <a class="external external-icon" href="http://en.wikipedia.org/wiki/IEEE_floating_point">IEEE 754</a> spezifiziert sind benutzt werden. Nach dieser Spezifikation ist die sichere Repräsentation von Zahlen nur zwischen <code>-(2<sup>53</sup> - 1)</code> und <code>2<sup>53</sup> - 1</code> möglich. Für mehr details Siehe im Artikel {{jsxref("Number.isSafeInteger()")}} nach.</p>
+
+<p>Weil <code>MIN_SAFE_INTEGER</code> eine statische Eigenschaft von {{jsxref("Number")}} ist, wird sie immer mit <code>Number.MIN_SAFE_INTEGER</code> abgerufen, im Gegensatz zu einer Eigenschaft eines {{jsxref("Number")}} Objektes, was erstellt wurde.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js">Number.MIN_SAFE_INTEGER // -9007199254740991
+-(Math.pow(2, 53) - 1)  // -9007199254740991
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-number.min_safe_integer', 'Number.MIN_SAFE_INTEGER')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.min_safe_integer', 'Number.MIN_SAFE_INTEGER')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.MIN_SAFE_INTEGER")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Number.MAX_SAFE_INTEGER")}}</li>
+ <li>{{jsxref("Number.isSafeInteger()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/number/min_value/index.html b/files/de/web/javascript/reference/global_objects/number/min_value/index.html
new file mode 100644
index 0000000000..3572b98118
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/number/min_value/index.html
@@ -0,0 +1,83 @@
+---
+title: Number.MIN_VALUE
+slug: Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE
+tags:
+  - JavaScript
+  - Number
+  - Property
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Number.MIN_VALUE</code></strong> Eigenschaft repräsentiert den kleinsten nummerische  Wert größer als 0, der in JavaScript repräsentiert werden kann.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-min-value.html")}}</div>
+
+
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>MIN_VALUE</code> Eigenschaft ist die die am nächsten an 0 liegende positive Zahl, die JavaScript repräsentieren kann (nicht die kleinste negative Zahl).</p>
+
+<p><code>MIN_VALUE</code> hat einen ungefähren Wert von <math><semantics><mrow><mn>5</mn><mo>⋅</mo><msup><mn>10</mn><mrow><mo>-</mo><mn>324</mn></mrow></msup></mrow><annotation encoding="TeX">5 \cdot 10^{-324}</annotation></semantics></math>. Zahlen die zwischen <code>MIN_VALUE</code> und 0 liegen ( "underflow values" werden zu 0 konvertiert<code>.</code></p>
+
+<p>Weil <code>MIN_VALUE</code> eine statische Eigenschaft von {{jsxref("Number")}} ist, wird sie immer mit <code>Number.</code> <code>MIN_VALUE</code> abgerufen, im Gegensatz zu einer Eigenschaft eines {{jsxref("Number")}} Objektes, was erstellt wurde.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_MIN_VALUE">Einsatz von <code>MIN_VALUE</code></h3>
+
+<p>Im folgenden Quelltext werden zwei nummerische Werte dividiert. Wenn das Ergebnis größer oder gleich <code>MIN_VALUE</code> ist, wird <code>func1()</code> ausgeführt; andernfalls wird <code>func2() </code>ausgeführt. </p>
+
+<pre class="brush: js notranslate">if (num1 / num2 &gt;= Number.MIN_VALUE) {
+  func1();
+} else {
+  func2();
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.3.3', 'Number.MIN_VALUE')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.min_value', 'Number.MIN_VALUE')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.min_value', 'Number.MIN_VALUE')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.MIN_VALUE")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Number.MAX_VALUE")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/number/nan/index.html b/files/de/web/javascript/reference/global_objects/number/nan/index.html
new file mode 100644
index 0000000000..25614786f3
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/number/nan/index.html
@@ -0,0 +1,65 @@
+---
+title: Number.NaN
+slug: Web/JavaScript/Reference/Global_Objects/Number/NaN
+tags:
+  - JavaScript
+  - Number
+  - Property
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/NaN
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Number.NaN</code></strong> Eigenschaft repräsentiert Not-A-Number (keine Nummer). Sie ist identisch zu {{jsxref("NaN")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-nan.html")}}</div>
+
+<p>Die Eigenschaft <code>Number.NaN</code> ist statisch, weshalb kein {{jsxref("Number")}} Objekt erstellt werden muss.</p>
+
+<p>{{js_property_attributes(0, 0, 0)}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>
+    <p>Initiale Definition. Implementiert in JavaScript 1.1.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.3.4', 'Number.NaN')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.nan', 'Number.NaN')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.nan', 'Number.NaN')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.NaN")}}</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>Das globale {{jsxref("NaN")}} Objekt.</li>
+ <li>Das {{jsxref("Number")}} Objekt.</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/number/negative_infinity/index.html b/files/de/web/javascript/reference/global_objects/number/negative_infinity/index.html
new file mode 100644
index 0000000000..a2cb81a0fb
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/number/negative_infinity/index.html
@@ -0,0 +1,100 @@
+---
+title: Number.NEGATIVE_INFINITY
+slug: Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY
+tags:
+  - JavaScript
+  - Number
+  - Property
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Number.NEGATIVE_INFINITY</code></strong> Eigenschaft repräsentiert den Wert der negativen Unendlichkeit.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-negative-infinity.html")}}</div>
+
+
+
+<p>Man muss kein Objekt vom Typ {{jsxref("Number")}} erzeugen, um Zugriff zu haben, weil diese Eigenschaft statisch ist (nutze  <code>Number.NEGATIVE_INFINITY</code>).</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p>Der Wert von <code>Number.NEGATIVE_INFINITY</code> ist der gleiche wie der negative Wert der Eigenschaft {{jsxref("Infinity")}} des <em>globalen Objektes</em>.</p>
+
+<p>Der Wert verhält sich leicht unterschiedlich zu der mathematischen Unendlichkeit:</p>
+
+<ul>
+ <li>Jeder positive Wert, auch {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}, multipliziert mit <code>NEGATIVE_INFINITY</code> ergibt <code>NEGATIVE_INFINITY</code>.</li>
+ <li>Jeder negative Wert, auch <code>NEGATIVE_INFINITY</code>, multipliziert mit  <code>NEGATIVE_INFINITY</code> ergibt {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}.</li>
+ <li>Jeder positive Wert dividiert durch <code>NEGATIVE_INFINITY</code> ergibt 0.</li>
+ <li>Jeder negative Wert dividiert durch <code>NEGATIVE_INFINITY</code> ergibt 0.</li>
+ <li>0 multipliziert mit <code>NEGATIVE_INFINITY</code> ergibt {{jsxref("NaN", "NaN")}}.</li>
+ <li>{{jsxref("NaN")}} multipliziert mit <code>NEGATIVE_INFINITY</code> ergibt {{jsxref("NaN")}}.</li>
+ <li><code>NEGATIVE_INFINITY</code> dividiert durch jeden negativen Wert, mit Ausnahme <code>von NEGATIVE_INFINITY</code>, ergibt {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}.</li>
+ <li><code>NEGATIVE_INFINITY</code> dividiert durch jeden positiven Wert, mit Ausnahme von {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}, ergibt <code>NEGATIVE_INFINITY</code>.</li>
+ <li><code>NEGATIVE_INFINITY</code> dividiert durch <code>NEGATIVE_INFINITY</code> oder {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}} ergibt {{jsxref("NaN")}}.</li>
+</ul>
+
+<p>Man kann <code>Number.NEGATIVE_INFINITY</code> nutzen, um einen Fehlerfall zu signalisieren, wenn im Normalfall ein endliches Ergebnis erwartet werden kann. Zudem kann ein Wert mit {{jsxref("isFinite")}} auf seine <span class="dpf_sent" id="dpfsent_4">Endlichkeit </span>geprüft werden.</p>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<h3 id="Einsatz_von_NEGATIVE_INFINITY">Einsatz von <code>NEGATIVE_INFINITY</code></h3>
+
+<p>Im folgenden Beispiel wird der Variablen<code> smallNumber</code> ein kleinerer Wert als der minimale Wert zugewiesen. Wenn das {{jsxref("Statements/if...else", "if")}}-Statement ausgeführt wird, hat <code>smallNumber</code> den Wert <code>-Infinity</code>. In diesem Fall wird der Variablen ein endlicher Wert zugewiesen, um mit dem Wert besser umgehen zu können.</p>
+
+<pre class="brush: js">var smallNumber = (-Number.MAX_VALUE) * 2;
+
+if (smallNumber === Number.NEGATIVE_INFINITY) {
+  smallNumber = returnFinite();
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.3.5', 'Number.NEGATIVE_INFINITY')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.negative_infinity', 'Number.NEGATIVE_INFINITY')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.negative_infinity', 'Number.NEGATIVE_INFINITY')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.NEGATIVE_INFINITY")}}</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li>
+ <li>{{jsxref("Number.isFinite()")}}</li>
+ <li>{{jsxref("Infinity", "Infinity")}}</li>
+ <li>{{jsxref("isFinite", "isFinite()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/number/parsefloat/index.html b/files/de/web/javascript/reference/global_objects/number/parsefloat/index.html
new file mode 100644
index 0000000000..d659260090
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/number/parsefloat/index.html
@@ -0,0 +1,72 @@
+---
+title: Number.parseFloat()
+slug: Web/JavaScript/Reference/Global_Objects/Number/parseFloat
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Number
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/parseFloat
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Number.parseFloat()</code></strong> Methode liest ein String-Argument ein und gibt eine Fließkommazahl zurück. Diese Methode verhält sich identisch zu der globalen Funktion {{jsxref("parseFloat", "parseFloat()")}} und ist Teil von ECMAScript 2015 (das Ziel ist die modularisierung von globalen Funktionen).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-parsefloat.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Number.parseFloat(<var>string</var>)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<p>{{page("de/docs/Web/JavaScript/Reference/Global_Objects/parseFloat", "Parameter")}}</p>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>{{page("de/docs/Web/JavaScript/Reference/Global_Objects/parseFloat", "Rückgabewert")}}</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Mehr Details und Beispiele sind im Artikel {{jsxref("parseFloat", "parseFloat()")}} nachzuschlagen.</p>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js">Number.parseFloat = parseFloat;</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-number.parsefloat', 'Number.parseFloat')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.parsefloat', 'Number.parseFloat')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.parseFloat")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Number")}}</li>
+ <li>{{jsxref("parseFloat", "parseFloat()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/number/parseint/index.html b/files/de/web/javascript/reference/global_objects/number/parseint/index.html
new file mode 100644
index 0000000000..e9efe16f11
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/number/parseint/index.html
@@ -0,0 +1,77 @@
+---
+title: Number.parseInt()
+slug: Web/JavaScript/Reference/Global_Objects/Number/parseInt
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Number
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/parseInt
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Number.parseInt()</code></strong> Methode liest ein String-Argument ein und gibt eine ganze Zahl im angegebenen Zahlensystem zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-parseint.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Number.parseInt(<var>string</var>[, <var>radix</var>])</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<div>{{page("de/docs/Web/JavaScript/Reference/Global_Objects/parseInt", "Parameter")}}</div>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>{{page("de/docs/Web/JavaScript/Reference/Global_Objects/parseInt", "Rückgabewert")}}</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Diese Methode hat den gleichen Funktionsumfang wie die globalen {{jsxref("parseInt", "parseInt()")}} Funktion:</p>
+
+<pre class="brush: js">Number.parseInt === parseInt; // true</pre>
+
+<p>Sie ist Teil von ECMAScript 2015 und hat als Ziel die Modularisierung von globalen Funktionen. Mehr Details und Beispiele im Artikel {{jsxref("parseInt", "parseInt()")}}.</p>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js">if (Number.parseInt === undefined)
+    Number.parseInt = window.parseInt;</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Komment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.parseint', 'Number.parseInt')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.parseint', 'Number.parseInt')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.parseInt")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Number")}}</li>
+ <li>{{jsxref("parseInt", "parseInt()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/number/positive_infinity/index.html b/files/de/web/javascript/reference/global_objects/number/positive_infinity/index.html
new file mode 100644
index 0000000000..0f9c9b1ccd
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/number/positive_infinity/index.html
@@ -0,0 +1,100 @@
+---
+title: Number.POSITIVE_INFINITY
+slug: Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY
+tags:
+  - JavaScript
+  - Number
+  - Property
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY
+---
+<div>{{JSRef}}</div>
+
+<p>Die Eigenschaft <strong><code>Number.POSITIVE_INFINITY</code></strong> repräsentiert den Wert positiv <span class="dpf_sent" id="dpfsent_1">unendlich</span>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-positive-infinity.html")}}</div>
+
+
+
+<p>Man muss kein Objekt vom Typ {{jsxref("Number")}} erzeugen, um Zugriff auf diese <span class="dpf_sent" id="dpfsent_2">Eigenschaft </span>zu bekommen, weil diese eine statische Eigeschaft ist (nutze <code>POSITIVE_INFINITY</code>).</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Der Wert <code>Number.POSITIVE_INFINITY</code> ist der gleich wie der der Eigenschaft {{jsxref("Infinity")}} des globalen Objektes.</p>
+
+<p>Der Wert verhält sich leicht unterschiedlich zu der mathematischen Unendlichkeit:</p>
+
+<ul>
+ <li>Jeder positive Wert, auch <code>POSITIVE_INFINITY</code>, multipliziert mit <code>POSITIVE_INFINITY</code> ergibt <code>POSITIVE_INFINITY</code>.</li>
+ <li>Jeder negative Wert, auch {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}, multipliziert mit <code>POSITIVE_INFINITY</code> ergibt {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}.</li>
+ <li>Jede positive Zahl dividiert durch <code>POSITIVE_INFINITY</code> ergibt positiv 0.</li>
+ <li>Jede negative Zahl dividiert durch <code>POSITIVE_INFINITY</code> ergibt negativ 0.</li>
+ <li>0 multipliziert mit <code>POSITIVE_INFINITY</code> ergibt {{jsxref("NaN")}}.</li>
+ <li>{{jsxref("NaN")}} multipliziert mit <code>POSITIVE_INFINITY</code> ergibt {{jsxref("NaN")}}.</li>
+ <li><code>POSITIVE_INFINITY</code> dividiert durch jede negative Zahl, mit Ausnahme von {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}, ergibt {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}.</li>
+ <li><code>POSITIVE_INFINITY</code> dividiert durch jede positive Zahl, mit Ausnahme <code>von POSITIVE_INFINITY</code>, ergibt <code>POSITIVE_INFINITY</code>.</li>
+ <li><code>POSITIVE_INFINITY</code> dividiert durch {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}} oder <code>POSITIVE_INFINITY</code> ergibt {{jsxref("NaN")}}.</li>
+</ul>
+
+<p>Man kann <code>Number.POSITIVE_INFINITY</code> nutzen, um einen Fehlerfall zu signalisieren, wenn im Normalfall ein endliches Ergebnis erwartet werden kann. Zudem kann ein Wert mit {{jsxref("isFinite")}} auf seine <span class="dpf_sent" id="dpfsent_4">Endlichkeit </span>geprüft werden.</p>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<h3 id="Einsatz_von_POSITIVE_INFINITY">Einsatz von <code>POSITIVE_INFINITY</code></h3>
+
+<p>Im folgenden Beispiel wird der Variablen<code> bigNumber</code> ein kleinerer Wert als der minimale Wert zugewiesen. Wenn das {{jsxref("Statements/if...else", "if")}}-Statement ausgeführt wird, hat <code>bigNumber</code> den Wert <code>Infinity</code>. In diesem Fall wird der Variablen ein endlicher Wert zugewiesen, um mit dem Wert besser umgehen zu können.</p>
+
+<pre class="brush: js">var bigNumber = Number.MAX_VALUE * 2;
+
+if (bigNumber == Number.POSITIVE_INFINITY) {
+  bigNumber = returnFinite();
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.3.6', 'Number.POSITIVE_INFINITY')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.positive_infinity', 'Number.POSITIVE_INFINITY')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.positive_infinity', 'Number.POSITIVE_INFINITY')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.POSITIVE_INFINITY")}}</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li>
+ <li>{{jsxref("Number.isFinite()")}}</li>
+ <li>{{jsxref("Infinity")}}</li>
+ <li>{{jsxref("isFinite", "isFinite()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/number/prototype/index.html b/files/de/web/javascript/reference/global_objects/number/prototype/index.html
new file mode 100644
index 0000000000..df57903c60
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/number/prototype/index.html
@@ -0,0 +1,89 @@
+---
+title: Number.prototype
+slug: Web/JavaScript/Reference/Global_Objects/Number/prototype
+tags:
+  - JavaScript
+  - Number
+  - Property
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Number
+---
+<div>{{JSRef}}</div>
+
+<p>Die Eigenschaft <strong><code>Number.prototype</code></strong> repräsentiert den Prototypen für den {{jsxref("Number")}} Konstruktor.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Alle {{jsxref("Number")}} Instanzen erben von <code>Number.prototype</code>. Das <code>prototype</code> Objekt des {{jsxref("Number")}} Konstruktors kann verändert werden um alle Instanzen von {{jsxref( "Number")}} zu erweitern.</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt><code>Number.prototype.constructor</code></dt>
+ <dd>Gibt die Funktion zurück, die die Instanz dieses Objektes erzeugt hat. Als Standardwert ist das das {{jsxref("Number")}} Objekt.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<dl>
+ <dt>{{jsxref("Number.prototype.toExponential()")}}</dt>
+ <dd>Gibt eine Zeichenkette (<code>string</code>) zurück, die die Nummer in Exponential Notation repräsentiert.</dd>
+ <dt>{{jsxref("Number.prototype.toFixed()")}}</dt>
+ <dd>Gibt eine Zeichenkette (<code>string</code>) zurück, die die Nummer als Festkommazahl repräsentiert.</dd>
+ <dt>{{jsxref("Number.prototype.toLocaleString()")}}</dt>
+ <dd>Gibt eine Zeichenkette (<code>string</code>) zurück, die die sprachenübliche Repräsentation der Nummer repräsentiert. Überschreibt die  {{jsxref("Object.prototype.toLocaleString()")}} Methode.</dd>
+ <dt>{{jsxref("Number.prototype.toPrecision()")}}</dt>
+ <dd>Gibt eine Zeichenzette (<code>string</code>) zurück, die die Zahl in einer bestimmten Genauigkeit als Festkommazahl repräsentiert.</dd>
+ <dt>{{jsxref("Number.prototype.toSource()")}} {{non-standard_inline}}</dt>
+ <dd>Gibt ein Objektliteral zurück, welches das {{jsxref("Number")}} Objekt spezifiziert. Diese Methode kann genutzt werden, um ein neues Objekt zu erzeugen. Überschreibt die {{jsxref("Object.prototype.toSource()")}} Methode.</dd>
+ <dt>{{jsxref("Number.prototype.toString()")}}</dt>
+ <dd>Gibt eine Zeichenkette (<code>string</code>) zurück, die die Zahl in einer bestimmten Basis repräsentiert. Überschreibt die {{jsxref("Object.prototype.toString()")}} Methode.</dd>
+ <dt>{{jsxref("Number.prototype.valueOf()")}}</dt>
+ <dd>Gibt einen primitiven Wert des Objektes zurück. Überschreibt die {{jsxref("Object.prototype.valueOf()")}} Methode.</dd>
+</dl>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.4', 'Number')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-properties-of-the-number-prototype-object', 'Number')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-properties-of-the-number-prototype-object', 'Number')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.prototype")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Number")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/number/toexponential/index.html b/files/de/web/javascript/reference/global_objects/number/toexponential/index.html
new file mode 100644
index 0000000000..c392b7012c
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/number/toexponential/index.html
@@ -0,0 +1,108 @@
+---
+title: Number.prototype.toExponential()
+slug: Web/JavaScript/Reference/Global_Objects/Number/toExponential
+tags:
+  - JavaScript
+  - Method
+  - Number
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/toExponential
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>toExponential()</code></strong> Methode gibt eine string-Repräsentation eines {{jsxref("Number")}} Objektes in Exponentialdarstellung zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-toexponential.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>numObj</var>.toExponential([<var>fractionDigits</var>])</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>fractionDigits</code></dt>
+ <dd>Optional. Eine ganze Zahl, die die Anzahl der Nachkommastellen angibt. Der Standardwert ist die Anzahl der Nachkommastellen, die benötigt werden, um die Zahl genau darzustellen.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine string, der das gegebene {{jsxref("Number")}} Objekt in Exponentialdarstellung repräsentiert. Das bedeutet, dass eine Stelle vor dem Komma steht und auf <code>fractionDigits</code> Stellen nach dem Komma gerundet wird.</p>
+
+<h3 id="Ausnahmen">Ausnahmen</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Wenn <code>fractionDigits</code> zu klein oder groß ist. Werte zwischen 0 und 20 (inklusiv) werden keinen zu keinem {{jsxref("RangeError")}} führen. Manche Implementierungen erlauben es auch kleinere oder größere Wert einzusätzen.</dd>
+ <dt>{{jsxref("TypeError")}}</dt>
+ <dd>Wenn die Methode auf einem Objekt, welches nicht vom Typ {{jsxref("Number")}} ist, aufgerufen wird.</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Wenn das <code>fractionDigits</code> Argument nicht angegeben wird, ist der Standardwert die Anzahl der Stellen, die benötigt werden um die Zahl ohne Verluste darzustellen.</p>
+
+<p>Wenn die <code>toExponential()</code> Methode für nummerische Literale engesetzt werden und das nummerische Literal keine Nachkommastellen besitzt, sollte ein Leerzeichen nach der Zahl hinzugefügt werden. Das sorgt dafür, dass der Punkt des Methodenaufrufes nicht als Dezimaltrenner (Komma) interpretiert wird.</p>
+
+<p>Wenn eine Zahl mehr Stellen hat, als im <code>fractionDigits</code> Argument definiert wurde, wird die Zahl zur nächst liegenden Zahl gerundet, die mit <code>fractionDigits</code> Stellen dargestellt werden kann. Weiter Informationen zum Runden sind im Artikel {{jsxref("Number.prototype.toFixed", "toFixed()")}} zu finden, die ebenfalls auf <code>toExponential()</code> zutreffen.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_toExponential()">Einsatz von <code>toExponential()</code></h3>
+
+<pre class="brush: js">var numObj = 77.1234;
+
+console.log(numObj.toExponential());  // logs 7.71234e+1
+console.log(numObj.toExponential(4)); // logs 7.7123e+1
+console.log(numObj.toExponential(2)); // logs 7.71e+1
+console.log(77.1234.toExponential()); // logs 7.71234e+1
+console.log(77 .toExponential());     // logs 7.7e+1
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.4.6', 'Number.prototype.toExponential')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.prototype.toexponential', 'Number.prototype.toExponential')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.prototype.toexponential', 'Number.prototype.toExponential')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.toExponential")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toFixed()")}}</li>
+ <li>{{jsxref("Number.prototype.toPrecision()")}}</li>
+ <li>{{jsxref("Number.prototype.toString()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/number/tofixed/index.html b/files/de/web/javascript/reference/global_objects/number/tofixed/index.html
new file mode 100644
index 0000000000..0fe376aa4d
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/number/tofixed/index.html
@@ -0,0 +1,113 @@
+---
+title: Number.prototype.toFixed()
+slug: Web/JavaScript/Reference/Global_Objects/Number/toFixed
+tags:
+  - JavaScript
+  - Method
+  - Number
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/toFixed
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>toFixed()</code></strong> Methode formatiert eine Zahl in Festkommadarstellung.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-tofixed.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>numObj</var>.toFixed([<var>digits</var>])</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>digits</code></dt>
+ <dd>Optional: Die Anzahl der Stellen, die nach dem Komma angezeigt werden sollen. Das ist ein Wert zwischen 0 und 20 (inklusiv), jedoch gibt es Implementierungen die optional einen größeren Bereich zulassen. Wenn das Argument nicht angegeben wird, wird der Parameter mit dem Standardwert 0 gesetzt.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine String-Repräsentation der gegebenen Zahl in Festkommadarstellung.</p>
+
+<h3 id="Ausnahmen">Ausnahmen</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Tritt auf, wenn <code>digits</code> zu klein oder groß ist. Werte  <code>digits</code> zwischen 0 und 20 (inklusiv) ist, wird es nicht zu einem {{jsxref("RangeError")}} führen. Manche Implementierungen erlauben es auch kleinere oder größere Wert zu benutzen.</dd>
+ <dt>{{jsxref("TypeError")}}</dt>
+ <dd>Wenn die Methode auf einem Objekt, welches nicht vom Typ {{jsxref("Number")}} ist, aufgerufen wird.</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p><strong><code>toFixed()</code></strong> gibt eine String-Repräsentation von <code>numObj</code> zurück, die keine Exponentialdarstellung benutzt und genau <code>digits</code> viele Nachkommastellen beseitzt. Wenn es nötig ist, wird eine Zahl gerundet oder fehlende Dezimalstellen werden mit Nullen aufgefüllt, um die gewünschten Nachkommastellen zu erreichen. Wenn <code>numObj</code> größer als 10<sup>21</sup> ist, ruft diese Methode {{jsxref("Number.prototype.toString()")}} auf und gibt den string in Exponentialdarstellung zurück.</p>
+
+<div class="warning">
+<p>JavaScript Numbers können nicht alle Zahlen präzise darstellen, was zu unerwarteten Ergebnissen führen kann, wie z. B.  <code>0.1 + 0.2 === 0.3</code> <code>false</code> ergibt.</p>
+</div>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_toFixed">Einsatz von <code>toFixed</code></h3>
+
+<pre class="brush: js">var numObj = 12345.6789;
+
+numObj.toFixed();       // Rückgabe: '12346': Gerundet, keine Nachkommastellen
+numObj.toFixed(1);      // Rückgabe: '12345.7': Gerundet
+numObj.toFixed(6);      // Rückgabe: '12345.678900': Nullen hinzugefügt
+(1.23e+20).toFixed(2);  // Rückgabe: '123000000000000000000.00'
+(1.23e-10).toFixed(2);  // Rückgabe: '0.00'
+2.34.toFixed(1);        // Rückgabe: '2.3'
+2.35.toFixed(1);        // Rückgabe: '2.4'. Aufgerundet.
+2.55.toFixed(1);        // Rückgabe: '2.5'. Abgerundet - siehe die oben stehende Warnung
+-2.34.toFixed(1);       // Rückgabe: -2.3 (Negative Nummernliterale geben kein String zurück ...)
+(-2.34).toFixed(1);     // Rückgabe: '-2.3' (... außer es werden explizit Klammern verwendet.)
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.4.5', 'Number.prototype.toFixed')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.prototype.tofixed', 'Number.prototype.toFixed')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.prototype.tofixed', 'Number.prototype.toFixed')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.toFixed")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toExponential()")}}</li>
+ <li>{{jsxref("Number.prototype.toPrecision()")}}</li>
+ <li>{{jsxref("Number.prototype.toString()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/number/tointeger/index.html b/files/de/web/javascript/reference/global_objects/number/tointeger/index.html
new file mode 100644
index 0000000000..79545e9ad6
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/number/tointeger/index.html
@@ -0,0 +1,52 @@
+---
+title: Number.toInteger()
+slug: Web/JavaScript/Reference/Global_Objects/Number/toInteger
+tags:
+  - JavaScript
+  - Method
+  - Number
+  - Obsolete
+translation_of: Archive/Web/JavaScript/Number.toInteger
+---
+<div>{{JSRef}} {{obsolete_header}}</div>
+
+<p>Die <strong><code>Number.toInteger()</code></strong> Methode wurde eingesetzt, um den übegebenen Wert zu analysieren und zu einer ganzen Zahl zu konvertieren, jedoch wurde die Implementierung entfernt.</p>
+
+<p>Wenn der übergebene Wert {{jsxref("NaN")}}, {{jsxref("null")}} oder {{jsxref("undefined")}} ist, gibt die Methode <code>0</code> zurück. Wenn der Wert <code>false</code> ist, wird <code>0</code> und bei <code>true</code> wird <code>1</code> zurückgegeben.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Number.toInteger(<var>zahl</var>)</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>zahl</code></dt>
+ <dd>Wert der zu einer ganzen Zahl konvertiert werden soll.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_toInteger">Einsatz von <code>toInteger</code></h3>
+
+<pre class="brush: js">Number.toInteger(0.1);     // 0
+Number.toInteger(1);       // 1
+Number.toInteger(Math.PI); // 3
+Number.toInteger(null);    // 0
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p><code>Number.toInteger()</code> war Teil der des ECMAScript 6 Entwurfesspezifikation, jedoch wurde sie am 23. August 2013 im Draft Rev 17 entfernt.</p>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.toInteger")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Number")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/number/tolocalestring/index.html b/files/de/web/javascript/reference/global_objects/number/tolocalestring/index.html
new file mode 100644
index 0000000000..5e5e132045
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/number/tolocalestring/index.html
@@ -0,0 +1,192 @@
+---
+title: Number.prototype.toLocaleString()
+slug: Web/JavaScript/Reference/Global_Objects/Number/toLocaleString
+tags:
+  - Internationalization
+  - JavaScript
+  - Method
+  - Number
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/toLocaleString
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>toLocaleString()</code></strong> Methode gibt eine Zahl als String in sprachabhängiger Formatierung zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-tolocalestring.html")}}</div>
+
+
+
+<p>Die neuen <code>locales</code> und <code>options</code> Argumente ermöglichen es Anwendungen, sprachübliche Formatierungskonventionen zu benutzen und diese anzupassen. In älteren Implementierungen werden die <code>locales</code> und <code>options</code> Argumente ignoriert, und die Formatierung des Strings ist implementierungsabhängig.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><em>numObj</em>.toLocaleString(</code><code>[locales [, options]])</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<p>Prüfe die <a href="#Browserkompatibilität">Browserkompatibilität</a>, um zu sehen, welcher Browser den <code>locales</code> und <code>options</code> Parameter unterstützt, und das Beispiel <a href="#Example:_Checking_for_support_for_locales_and_options_arguments">Unterstützung für <code>locales</code> und <code>options</code> Argumente prüfen</a> für eine Funktionalitätsprüfung.</p>
+
+<div class="note">
+<p><strong>Anmerkung:</strong> Die ECMAScript Internationalization API, implementiert in Firefox 29, fügte das Argument <code>locales</code> zur Methode <code>Number.toLocaleString()</code> zu. Wenn das Argument {{jsxref("undefined")}} ist, arbeitet die Methode nach der Lokalisierung des OS, während Vorgängerversionen von Firefox <a href="https://en.wikipedia.org/wiki/Arabic_numerals">Western Arabic</a> zurück geben. Diese Änderung wurde als eine Rückwärtskompatibilität gemeldet. Das Problem wurde bereits behoben ({{bug(999003)}}).</p>
+</div>
+
+<div>{{page('/de/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat', 'Parameter')}}</div>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Einen String, der die gegebene Zahl in einer sprachspezifischen Formatierung repräsentiert.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_toLocaleString()">Einsatz von <code>toLocaleString()</code></h3>
+
+<p>Bei der Nutzung ohne Parameter wird der string in der Standardsprache ohne Optionen zurückgegeben:</p>
+
+<pre class="brush: js">var number = 3500;
+
+console.log(number.toLocaleString()); // Ausgabe: "3.500" wenn in Deutscher locale
+</pre>
+
+<h3 id="Unterstützung_für_locales_und_options_Argumente_prüfen">Unterstützung für <code>locales</code> und <code>options</code> Argumente prüfen</h3>
+
+<p>Die <code>locales</code> und <code>options</code> Argumente sind noch nicht in allen Browsern unterstützt. Zur Prüfung der Unterstützung von ES5.1 und neueren Implementierungen wird vorausgesetzt, dass unbekannte Sprachen zu einem {{jsxref("RangeError")}} führen, was folgendermaßen eingesetzt werden kann:</p>
+
+<pre class="brush: js">function toLocaleStringSupportsLocales() {
+  var number = 0;
+  try {
+    number.toLocaleString('i');
+  } catch (e) {
+    return e.name === 'RangeError';
+  }
+  return false;
+}
+</pre>
+
+<p>Vor ES5.1 mussten die Implementierungen keinen {{jsxref("RangeError")}} erzeugen, wenn <code>toLocaleString</code>  mit Argumenten aufgerufen wurde.</p>
+
+<p>Eine Prüfung, die in allen Browser funktioniert, auch in denen, die ECMA-262 vor ES5.1 unterstützen, ist die Prüfung auf Funktionen aus ECMA-402, welche Optionen in <code>Number.prototype.toLocaleString</code> direkt unterstützen:</p>
+
+<pre class="brush: js">function toLocaleStringSupportsOptions() {
+  return !!(typeof Intl == 'object' &amp;&amp; Intl &amp;&amp; typeof Intl.NumberFormat == 'function');
+}
+</pre>
+
+<p>Diese Tests auf dem globalen {{jsxref("Intl")}} Objekt prüfen, ob das Objekt existiert und die Eigenschaft vom Typ Funktion {{jsxref("Intl.NumberFormat")}} hat.</p>
+
+<h3 id="Einsatz_von_locales">Einsatz von <code>locales</code></h3>
+
+<p>Diese Beispiel zeigt einige der Variationen in internationalen Zahlenformaten. Um das Format der Sprache zu bekommen, welches in der Anwendung benutzt wird, spezifiziere die Sprache (und mögliche Rückfallsprachen (fallback)) mit dem <code>locales</code> Argument.</p>
+
+<pre class="brush: js">var number = 123456.789;
+
+// Englische Benutzer sehen ein Punkt anstatt eines Kommas als Dezimaltrenner
+console.log(number.toLocaleString('en-GB'));
+// → 123.456,789
+
+// Arabisch ist in den meisten arabisch Sprechenden Ländern eingesetzt (<a href="https://en.wikipedia.org/wiki/Eastern_Arabic_numerals">Eastern Arabic</a>) Ziffern
+console.log(number.toLocaleString('ar-EG'));
+// → ١٢٣٤٥٦٫٧٨٩
+
+// Indien benutzt Tausendertrennzeichen bei Tausend und allen weiteren <strong>zwei Stellen</strong>
+console.log(number.toLocaleString('en-IN'));
+// → 1,23,456.789
+
+// Chinesisches Zahlensystem
+console.log(number.toLocaleString('zh-Hans-CN-u-nu-hanidec'));
+// → 一二三,四五六.七八九
+
+// Wenn eine Sprache übergeben werden soll, die vielleicht nicht
+// unterstützt wird (Balinesisch), nutze eine fallback Sprache (Indonesisch)
+console.log(number.toLocaleString(['ban', 'id']));
+// → 123.456,789
+</pre>
+
+<h3 id="Einsatz_von_options">Einsatz von <code>options</code></h3>
+
+<p>Das Ergebnis von <code>toLocaleString</code>  kann durch das <code>options</code> Argument angepasst werden.</p>
+
+<pre class="brush: js">var number = 123456.789;
+
+// Währungsformat
+console.log(number.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' }));
+// → 123.456,79 €
+
+// Der Japanische Yen hat keine Unterwährung (z. B. Cent)
+console.log(number.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' }))
+// → ￥123,457
+
+// Limitiert auf drei signifikante Stellen
+console.log(number.toLocaleString('en-IN', { maximumSignificantDigits: 3 }));
+// → 1,23,000
+
+// Einsatz der Host-Standard-Sprache mit Optionen für die Nummernformatierung
+var num = 30000.65;
+console.log(num.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}));
+// → 30,000.65 wenn Englisch die Standard-Sprache ist, oder
+// → 30.000,65 wenn Deutsch die Standard-Sprache ist, oder
+// → 30 000,65 wenn Französisch die Standard-Sprache ist
+</pre>
+
+<h2 id="Performance">Performance</h2>
+
+<p>Wenn eine lange Zahl formatiert werden soll, ist es besser ein {{jsxref("NumberFormat")}} Objekt zu erstellen und die Funktion {{jsxref("NumberFormat.format")}} zu benutzen.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.4.3', 'Number.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.prototype.tolocalestring', 'Number.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.prototype.tolocalestring', 'Number.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-13.2.1', 'Number.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-13.2.1', 'Number.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-Number.prototype.toLocaleString', 'Number.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.toLocaleString")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toString()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/number/toprecision/index.html b/files/de/web/javascript/reference/global_objects/number/toprecision/index.html
new file mode 100644
index 0000000000..53a27d59d2
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/number/toprecision/index.html
@@ -0,0 +1,107 @@
+---
+title: Number.prototype.toPrecision()
+slug: Web/JavaScript/Reference/Global_Objects/Number/toPrecision
+tags:
+  - JavaScript
+  - Method
+  - Number
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/toPrecision
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code>toPrecision()</code> Methode gibt einen String zurück, der ein {{jsxref("Number")}} Objekt mit einer spezifizierten Präzision repräsentiert.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-toprecision.html")}}</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>numObj</var>.toPrecision([<var>precision</var>])</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>precision</code></dt>
+ <dd>Optional. Eine ganze Zahl, die die signifikanten Ziffern der Zahl angibt.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein string, der ein {{jsxref("Number")}} Objekt in Fließkomma- oder Exponentialdarstellung auf die in <code>precision</code> angegeben Stellen gerundet zurück gibt. Weitere Informationen zum runden in dieser Methode sind in der Beschreibung von {{jsxref("Number.prototype.toFixed()")}} zu finden, die auch auf <code>toPrecision()</code> zutreffen.</p>
+
+<p>Wenn kein <code>precision</code> Argument angegeben wird, ist die rückgabe wie in der {{jsxref("Number.prototype.toString()")}} Methode. Wenn die <code>precision</code> keine ganze Zahl ist, wird zu der am nächst liegenden ganzen Zahl gerundet.</p>
+
+<h3 id="Auftretende_Fehler">Auftretende Fehler</h3>
+
+<dl>
+ <dt>{{jsxref("Global_Objects/RangeError", "RangeError")}}</dt>
+ <dd>Wenn <code>precison</code> keine Zahl zwischen 1 und 100 (inklusiv) ist, tritt ein {{jsxref("RangeError")}} auf. Es gibt implementierungen die mehr und weniger signifikante Stellen zulassen. ECMA-262 spezifiziert nur eine Präzision von 21 signifikanten Stellen.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_toPrecision">Einsatz von <code>toPrecision</code></h3>
+
+<pre class="brush: js">var numObj = 5.123456;
+
+console.log(numObj.toPrecision());    // Ausgabe: 5.123456
+console.log(numObj.toPrecision(5));   // Ausgabe: 5.1235
+console.log(numObj.toPrecision(2));   // Ausgabe: 5.1
+console.log(numObj.toPrecision(1));   // Ausgabe: 5
+
+numObj = 0.000123
+
+console.log(numObj.toPrecision());    // logs 0.000123
+console.log(numObj.toPrecision(5));   // logs 0.00012300
+console.log(numObj.toPrecision(2));   // logs 0.00012
+console.log(numObj.toPrecision(1));   // logs 0.0001
+
+// In manchen Fällen wird die Exponentialdarstellung ausgegeben.
+console.log((1234.5).toPrecision(2)); // Ausgabe: 1.2e+3
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.4.7', 'Number.prototype.toPrecision')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.prototype.toprecision', 'Number.prototype.toPrecision')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.prototype.toprecision', 'Number.prototype.toPrecision')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.toPrecision")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toFixed()")}}</li>
+ <li>{{jsxref("Number.prototype.toExponential()")}}</li>
+ <li>{{jsxref("Number.prototype.toString()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/number/tosource/index.html b/files/de/web/javascript/reference/global_objects/number/tosource/index.html
new file mode 100644
index 0000000000..985df99c0a
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/number/tosource/index.html
@@ -0,0 +1,53 @@
+---
+title: Number.prototype.toSource()
+slug: Web/JavaScript/Reference/Global_Objects/Number/toSource
+tags:
+  - JavaScript
+  - Method
+  - Number
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/toSource
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>Die <strong><code>toSource()</code></strong> Methode gibt einen string zurück, der den Quelltext des Objektes repräsentiert.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>numObj</var>.toSource()
+Number.toSource()</pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Einen String, der den Quelltext des Objektes repräsentiert.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>toSource()</code> gibt die folgenden Werte zurück:</p>
+
+<p>Für das globale Standardobjekt {{jsxref("Number")}} gibt <code>toSource()</code> den folgenden string zurück, um anzuzeigen, dass der Quelltext nicht verfügbar ist:</p>
+
+<pre class="brush: js">function Number() {
+    [native code]
+}
+</pre>
+
+<p>Für Instanzen von {{jsxref("Number")}}, gibt <code>toSource()</code> einen string mit dem Quelltext zurück.</p>
+
+<p>Diese Methode wird intern von JavaScript aufgerufen und wird nicht im Quelltext von Webseiten verwendet.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Ist in keinem Standard. Implementiert in JavaScript 1.3.</p>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.toSource")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/number/tostring/index.html b/files/de/web/javascript/reference/global_objects/number/tostring/index.html
new file mode 100644
index 0000000000..ed5d600b3a
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/number/tostring/index.html
@@ -0,0 +1,116 @@
+---
+title: Number.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/Number/toString
+tags:
+  - JavaScript
+  - Method
+  - Number
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/toString
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>toString()</code></strong> Methode gibt einen string (Zeichenkette), die ein {{jsxref("Number")}} Objekt repräsentiert zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-tostring.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>numObj</var>.toString([<var>radix</var>])</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>radix</code></dt>
+ <dd>Optional. Eine ganze Zahl im Bereich von 2 bis 36 welche die Basis des Zahlensystems angibt, in dem die Zahl repräsentiert werden soll.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Einen String, der das spezifizierte {{jsxref("Number")}} Objekt repräsentiert.</p>
+
+<h3 id="Ausnahmen">Ausnahmen</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Wenn <code>toString()</code> als <em>radix</em> Parameter eine Zahl kleiner 2 oder größer 36 übergeben bekommt, wird ein {{jsxref("RangeError")}} erzeugt.</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Das {{jsxref("Number")}} Objekt überschreibt die <code>toString()</code> Methode des {{jsxref("Object")}} Objektes. Es erbt nicht von der  {{jsxref("Object.prototype.toString()")}} Methode. Für {{jsxref( "Number")}} Objekte gibt die <code>toString()</code> Methode eine string-Repräsentation des Objektes in dem durch <em>radix</em> spezifizierten Zahlensystem zurück.</p>
+
+<p>Die <code>toString()</code> Methode analysiert das erste Argument und versucht eine string-Repräsentation im durch <em>radix</em> beschriebenen Zahlensystem zurück zu geben. Für <em>radix</em> (Basen) größer als 10 werden Buchstaben des Alphabets genutzt um Zahlen größer als 9 darzustellen. Zum Beispiel werden im Hexadezimalsystem (Basis 16) die Buchstaben <code>a</code> bis <code>f</code> eingesetzt.</p>
+
+<p>Wenn der <em>radix</em> Parameter nicht angegeben wird, wird 10, also das Dezimalsystem, angenommen.</p>
+
+<p>Wenn das <code>numObj</code> Objekt negativ ist, wird das Vorzeichen beibehalten. Dieses Verhalten ist auch im Binärsystem so: Der zurückgegebene string ist eine positive Binärdarstellung des <code>numObj</code> Objekts mit einem vorangestellten Minus (<code>-)</code> Zeichen. Es wird kein Zweierkomplement verwendet.</p>
+
+<p>Wenn das <code>numObj</code> Objekt keine ganze Zahl ist, wird ein Punkt (<code>.</code>) eingesetzt, um den ganzzahligen Teil von den Dezimalstellen zu trennen.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_toString">Einsatz von <code>toString</code></h3>
+
+<pre class="brush: js">var count = 10;
+
+console.log(count.toString());    // Ausgabe '10'
+console.log((17).toString());     // Ausgabe '17'
+console.log((17.2).toString());   // Ausgabe '17.2'
+
+var x = 6;
+
+console.log(x.toString(2));       // Ausgabe '110'
+console.log((254).toString(16));  // Ausgabe 'fe'
+
+console.log((-10).toString(2));   // Ausgabe '-1010'
+console.log((-0xff).toString(2)); // Ausgabe '-11111111'
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.4.2', 'Number.prototype.tostring')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.prototype.tostring', 'Number.prototype.tostring')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.prototype.tostring', 'Number.prototype.tostring')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.toString")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toFixed()")}}</li>
+ <li>{{jsxref("Number.prototype.toExponential()")}}</li>
+ <li>{{jsxref("Number.prototype.toPrecision()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/number/valueof/index.html b/files/de/web/javascript/reference/global_objects/number/valueof/index.html
new file mode 100644
index 0000000000..1538417ebf
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/number/valueof/index.html
@@ -0,0 +1,85 @@
+---
+title: Number.prototype.valueOf()
+slug: Web/JavaScript/Reference/Global_Objects/Number/valueOf
+tags:
+  - JavaScript
+  - Method
+  - Number
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/valueOf
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>valueOf()</code></strong> Methode gibt den im  {{jsxref("Number")}} Objekt eingeschlossenen primitiven Wert zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-valueof.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>numObj</var>.valueOf()</code></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein primitiver Wert (Zahl), der die Zahl des {{jsxref("Number")}} Objektes repräsentiert.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die Methode wird intern von JavaScript aufgerufen, jedoch nicht explizit in einem programmierten Quelltext für eine Webseite eingesetzt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_valueOf">Einsatz von <code>valueOf</code></h3>
+
+<pre class="brush: js">var numObj = new Number(10);
+console.log(typeof numObj); // object
+
+var num = numObj.valueOf();
+console.log(num);           // 10
+console.log(typeof num);    // number
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.4.4', 'Number.prototype.valueOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.prototype.valueof', 'Number.prototype.valueOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.prototype.valueof', 'Number.prototype.valueOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.valueOf")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toSource()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/object/__definegetter__/index.html b/files/de/web/javascript/reference/global_objects/object/__definegetter__/index.html
new file mode 100644
index 0000000000..5e88304f5f
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/object/__definegetter__/index.html
@@ -0,0 +1,150 @@
+---
+title: Object.prototype.__defineGetter__()
+slug: Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__
+---
+<div>{{JSRef}}</div>
+
+<div class="warning">
+<p>This feature is deprecated in favor of defining getters using the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer syntax</a> or the {{jsxref("Object.defineProperty()")}} API. While this feature is widely implemented, it is only described in the <a href="https://tc39.github.io/ecma262/#sec-additional-ecmascript-features-for-web-browsers">ECMAScript specification</a> because of legacy usage. This method should not be used since better alternatives exist.</p>
+</div>
+
+<p>Die <code><strong>__defineGetter__</strong></code> Methode bindet eine Eigenschaft des Objects an eine Funktion, die aufgerufen wird, wenn das Object angesehen wird.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>obj</var>.__defineGetter__(<var>prop</var>, <var>func</var>)</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>prop</code></dt>
+ <dd><code>Ein String der den Namen der zur Funktion gebundenen Eigenschaft enthält</code></dd>
+ <dt><code>func</code></dt>
+ <dd><code>Eine Funktion die zur Eigenschaft gebunden wird.</code></dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Die <code>__defineGetter__</code> erlaubt einen {{jsxref("Operators/get", "getter", "", 1)}} auf ein Object zu erstellen.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">// Nicht standard und veraltete Weise
+
+var o = {};
+o.__defineGetter__('gimmeFive', function() { return 5; });
+console.log(o.gimmeFive); // 5
+
+
+// Üblicher Weg
+
+// Mithilfe der get Methode
+var o = { get gimmeFive() { return 5; } };
+console.log(o.gimmeFive); // 5
+
+// Mithilfe von Object.defineProperty
+var o = {};
+Object.defineProperty(o, 'gimmeFive', {
+  get: function() {
+    return 5;
+  }
+});
+console.log(o.gimmeFive); // 5
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.prototype.__defineGetter__', 'Object.prototype.__defineGetter__()')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Included in the (normative) annex for additional ECMAScript legacy features for Web browsers (note that the specification codifies what is already in implementations).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatIE("11")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Compatibility_notes">Compatibility notes</h2>
+
+<ul>
+ <li>Starting with Firefox 48 {{geckoRelease(48)}}, this method can no longer be called at the global scope without any object. A {{jsxref("TypeError")}} will be thrown otherwise. Previously, the global object was used in these cases automatically, but this is no longer the case ({{bug(1253016)}}).</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.__defineSetter__()")}}</li>
+ <li>{{jsxref("Operators/get", "get")}} operator</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.prototype.__lookupGetter__()")}}</li>
+ <li>{{jsxref("Object.prototype.__lookupSetter__()")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">JS Guide: Defining Getters and Setters</a></li>
+ <li><a href="https://whereswalden.com/2010/04/16/more-spidermonkey-changes-ancient-esoteric-very-rarely-used-syntax-for-creating-getters-and-setters-is-being-removed/">[Blog Post] Deprecation of __defineGetter__ and __defineSetter__</a></li>
+ <li>{{bug(647423)}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/object/assign/index.html b/files/de/web/javascript/reference/global_objects/object/assign/index.html
new file mode 100644
index 0000000000..0359e1e5c9
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/object/assign/index.html
@@ -0,0 +1,277 @@
+---
+title: Object.assign()
+slug: Web/JavaScript/Reference/Global_Objects/Object/assign
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Object
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/assign
+---
+<div>{{JSRef}}</div>
+
+<p>Die Methode <strong><code>Object.assign()</code></strong> kopiert die Werte aller aufzählbaren, eigenen Eigenschaften von einem oder mehreren Quellobjekten in ein Zielobjekt. Es wird das Zielobjekt zurückgegeben.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-assign.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Object.assign(<var>target</var>, ...<var>sources</var>)</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>Das Zielobjekt.</dd>
+ <dt><code>sources</code></dt>
+ <dd>Das(Die) Quellobjekt(e).</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Das Zielobjekt.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Eigenschaften in dem Zielobjekt werden von Eigenschaften aus dem Quellobjekt überschrieben, wenn sie den gleichen Schlüssel haben.</p>
+
+<p>Die Methode <code>Object.assign()</code> kopiert nur <em>aufzählbare</em> und <em>eigene</em> Eigenschaften eines Quellobjekts ins Zielobjekt. Sie verwendet <code>[[Get]]</code> bei der Quelle und <code>[[Set]]</code> beim Ziel, d.h. es werden getters und setters aufgerufen. Daher <em>weist</em> es Eigenschaften zu statt sie nur zu kopieren oder neue Eigenschaften zu definieren. Daher ist die Methode ungeeignet, um neue Eigenschaften zu einem Prototypen hinzufügen wenn die Quellen getters enthalten. Zum Kopieren von Eigenschaftsdefinitionen, einschließlich ihrer Aufzählbarkeit, in Prototypen sollten daher {{jsxref("Object.getOwnPropertyDescriptor()")}} und {{jsxref("Object.defineProperty()")}} verwendet werden.</p>
+
+<p>Sowohl {{jsxref("String")}}- als auch {{jsxref("Symbol")}}-Eigenschaften werden kopiert.</p>
+
+<p>Im Fehlerfall, weil z.B. eine Eigenschaft schreibgeschützt ist, wird ein {{jsxref("TypeError")}} erzeugt. Das Zielobjekt kann verändert sein, wenn ein Eigenschaft schon zuvor hinzugefügt wurde.</p>
+
+<p>Es gilt zu beachten, dass <code>Object.assign()</code> keine Ausnahme bei {{jsxref("null")}} oder {{jsxref("undefined")}} Quellwerten erzeugt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Klonen_eines_Objekts">Klonen eines Objekts</h3>
+
+<pre class="brush: js">var obj = { a: 1 };
+var copy = Object.assign({}, obj);
+console.log(copy); // { a: 1 }
+</pre>
+
+<h3 id="Warnung_bei_tiefem_Clonen">Warnung bei tiefem Clonen</h3>
+
+<p>Für tiefes Clonen müssen andere Alternativen eingesetzt werden, weil <code>Object.assign()</code> Werte von Eigenschaften kopiert. Wenn ein Quellwert eine Referenz zu einem Objekt ist, wird nur die Referenz kopiert.</p>
+
+<pre class="brush: js">function test() {
+  'use strict';
+
+  let obj1 = { a: 0 , b: { c: 0}};
+  let obj2 = Object.assign({}, obj1);
+  console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
+
+  obj1.a = 1;
+  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
+  console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
+
+  obj2.a = 2;
+  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
+  console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}}
+
+  obj2.b.c = 3;
+  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}}
+  console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}}
+
+  // Deep Clone
+  obj1 = { a: 0 , b: { c: 0}};
+  let obj3 = JSON.parse(JSON.stringify(obj1));
+  obj1.a = 4;
+  obj1.b.c = 4;
+  console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}}
+}
+
+test();</pre>
+
+<h3 id="Objekte_zusammenführen">Objekte zusammenführen</h3>
+
+<pre class="brush: js">var o1 = { a: 1 };
+var o2 = { b: 2 };
+var o3 = { c: 3 };
+
+var obj = Object.assign(o1, o2, o3);
+console.log(obj); // { a: 1, b: 2, c: 3 }
+console.log(o1);  // { a: 1, b: 2, c: 3 }, target object itself is changed.
+</pre>
+
+<h3 id="Objekte_mit_gleichen_Eigenschaften_zusammenführen">Objekte mit gleichen Eigenschaften zusammenführen</h3>
+
+<pre class="brush: js">var o1 = { a: 1, b: 1, c: 1 };
+var o2 = { b: 2, c: 2 };
+var o3 = { c: 3 };
+
+var obj = Object.assign({}, o1, o2, o3);
+console.log(obj); // { a: 1, b: 2, c: 3 }</pre>
+
+<p>Eigenschaften werden von anderen Objekten mit gleichen Eigenschaften später in Parameterreihenfolge überschrieben.</p>
+
+<h3 id="Kopieren_von_Symboltyp-Eigenschaften">Kopieren von Symboltyp-Eigenschaften</h3>
+
+<pre class="brush: js">var o1 = { a: 1 };
+var o2 = { [Symbol('foo')]: 2 };
+
+var obj = Object.assign({}, o1, o2);
+console.log(obj); // { a: 1, [Symbol("foo")]: 2 } (siehe Bug 1207182 in Firefox)
+Object.getOwnPropertySymbols(obj); // [Symbol(foo)]</pre>
+
+<h3 id="Eigenschaften_der_Prototypkette_und_nicht_aufzählbare_Eigenschaften_können_nicht_kopiert_werden">Eigenschaften der Prototypkette und nicht aufzählbare Eigenschaften können nicht kopiert werden</h3>
+
+<pre class="brush: js">var obj = Object.create({ foo: 1 }, { // foo is on obj's prototype chain.
+  bar: {
+    value: 2  // bar is a non-enumerable property.
+  },
+  baz: {
+    value: 3,
+    enumerable: true  // baz is an own enumerable property.
+  }
+});
+
+var copy = Object.assign({}, obj);
+console.log(copy); // { baz: 3 }
+</pre>
+
+<h3 id="Primitive_Datentypen_werden_in_Objekte_gepackt">Primitive Datentypen werden in Objekte gepackt</h3>
+
+<pre class="brush: js">var v1 = 'abc';
+var v2 = true;
+var v3 = 10;
+var v4 = Symbol('foo');
+
+var obj = Object.assign({}, v1, null, v2, undefined, v3, v4);
+// Primitives will be wrapped, null and undefined will be ignored.
+// Note, only string wrappers can have own enumerable properties.
+console.log(obj); // { "0": "a", "1": "b", "2": "c" }
+</pre>
+
+<h3 id="Fehler_unterbrechen_den_laufenden_Kopiervorgang">Fehler unterbrechen den laufenden Kopiervorgang</h3>
+
+<pre class="brush: js">var target = Object.defineProperty({}, 'foo', {
+  value: 1,
+  writable: false
+}); // target.foo is a read-only property
+
+Object.assign(target, { bar: 2 }, { foo2: 3, foo: 3, foo3: 3 }, { baz: 4 });
+// TypeError: "foo" is read-only
+// The Exception is thrown when assigning target.foo
+
+console.log(target.bar);  // 2, the first source was copied successfully.
+console.log(target.foo2); // 3, the first property of the second source was copied successfully.
+console.log(target.foo);  // 1, exception is thrown here.
+console.log(target.foo3); // undefined, assign method has finished, foo3 will not be copied.
+console.log(target.baz);  // undefined, the third source will not be copied either.
+</pre>
+
+<h3 id="Kopieren_von_Zugriffsmethoden">Kopieren von Zugriffsmethoden</h3>
+
+<pre class="brush: js">var obj = {
+  foo: 1,
+  get bar() {
+    return 2;
+  }
+};
+
+var copy = Object.assign({}, obj);
+console.log(copy);
+// { foo: 1, bar: 2 }, the value of copy.bar is obj.bar's getter's return value.
+
+// This is an assign function that copies full descriptors
+function completeAssign(target, ...sources) {
+  sources.forEach(source =&gt; {
+    let descriptors = Object.keys(source).reduce((descriptors, key) =&gt; {
+      descriptors[key] = Object.getOwnPropertyDescriptor(source, key);
+      return descriptors;
+    }, {});
+    // by default, Object.assign copies enumerable Symbols too
+    Object.getOwnPropertySymbols(source).forEach(sym =&gt; {
+      let descriptor = Object.getOwnPropertyDescriptor(source, sym);
+      if (descriptor.enumerable) {
+        descriptors[sym] = descriptor;
+      }
+    });
+    Object.defineProperties(target, descriptors);
+  });
+  return target;
+}
+
+var copy = completeAssign({}, obj);
+console.log(copy);
+// { foo:1, get bar() { return 2 } }
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Dieses {{Glossary("Polyfill","polyfill")}} unterstützt keine Symboleigenschaften, da ES5 ohnehin keine Symbole hat:</p>
+
+<pre class="brush: js">if (typeof Object.assign != 'function') {
+  // Must be writable: true, enumerable: false, configurable: true
+  Object.defineProperty(Object, "assign", {
+    value: function assign(target, varArgs) { // .length of function is 2
+      'use strict';
+      if (target == null) { // TypeError if undefined or null
+        throw new TypeError('Cannot convert undefined or null to object');
+      }
+
+      var to = Object(target);
+
+      for (var index = 1; index &lt; arguments.length; index++) {
+        var nextSource = arguments[index];
+
+        if (nextSource != null) { // Skip over if undefined or null
+          for (var nextKey in nextSource) {
+            // Avoid bugs when hasOwnProperty is shadowed
+            if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
+              to[nextKey] = nextSource[nextKey];
+            }
+          }
+        }
+      }
+      return to;
+    },
+    writable: true,
+    configurable: true
+  });
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-object.assign', 'Object.assign')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.assign', 'Object.assign')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Object.assign")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Object.defineProperties()")}}</li>
+ <li><a href="/de/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Aufzählbarkeit und Zugehörigkeit von Eigenschaften</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/object/constructor/index.html b/files/de/web/javascript/reference/global_objects/object/constructor/index.html
new file mode 100644
index 0000000000..d524a73679
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/object/constructor/index.html
@@ -0,0 +1,192 @@
+---
+title: Object.prototype.constructor
+slug: Web/JavaScript/Reference/Global_Objects/Object/constructor
+tags:
+  - JavaScript
+  - Object
+  - Property
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/constructor
+---
+<div>{{JSRef("Global_Objects", "Object")}}</div>
+
+<h2 id="Summary" name="Summary">Zusammenfassung</h2>
+
+<p>Gibt eine Referenz zur {{jsxref("Global_Objects/Object", "Object")}}-Funktion, welche die  Instanz vom Prototyp herstellt. Merke: Der Wert dieser Eigenschaft ist eine Referenz auf die Funktion selbst und kein String mit dem Funktionsnamen als Inhalt. Der Wert ist nur  lesbar für primitive Werte, wie <code>1</code>, <code>true</code> und <code>"test"</code>.</p>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p>Alle Objekte erben eine constructor- Eigenschaft von ihrem <code>prototype</code>:</p>
+
+<pre class="brush: js">var o = {};
+o.constructor === Object; // true
+
+var a = [];
+a.constructor === Array; // true
+
+var n = new Number(3);
+n.constructor === Number; // true
+</pre>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<h3 id="Example:_Displaying_the_constructor_of_an_object" name="Example:_Displaying_the_constructor_of_an_object">Beispiel: zeigen den Konstruktor von einem Objekt an</h3>
+
+<p>Das folgende Beispiel erzeugt einen Prototyp: <code>Tree</code>, und ein Objekt von jenem Typ: <code>theTree</code>. Das Beispiel zeigt danach die Konstruktor-Eigenschaft vom <code>Objekt:theTree</code> an.</p>
+
+<pre class="brush: js">function Tree(name) {
+  this.name = name;
+}
+
+var theTree = new Tree('Redwood');
+console.log('theTree.constructor is ' + theTree.constructor);
+</pre>
+
+<p>Das Beispiel erzeugt folgende Ausgabe:</p>
+
+<pre class="brush: js">theTree.constructor is function Tree(name) {
+  this.name = name;
+}
+</pre>
+
+<h3 id="Example:_Changing_the_constructor_of_an_object" name="Example:_Changing_the_constructor_of_an_object">Beispiel: Veränderung des Konstruktors eines Objekts</h3>
+
+<p>Das folgende Beispiel zeigt, wie man den Konstruktorwert eines generischen Objekts verändert. Nur <code>true</code>, <code>1</code> und <code>"test"</code> werden nicht von der Veränderung betroffen, da sie nur lesbare (read-only) native Konstruktoren haben. Dieses Beispiel zeigt, dass es nicht immer sicher ist, sich auf die Konstruktor-Eigenschaft eines Objekts zu verlassen.</p>
+
+<pre class="brush:js">function Type () {}
+
+var types = [
+  new Array(),
+  [],
+  new Boolean(),
+  true,             // bleibt unverändert
+  new Date(),
+  new Error(),
+  new Function(),
+  function () {},
+  Math,
+  new Number(),
+  1,                // bleibt unverändert
+  new Object(),
+  {},
+  new RegExp(),
+  /(?:)/,
+  new String(),
+  'test'            // bleibt unverändert
+];
+
+for (var i = 0; i &lt; types.length; i++) {
+  types[i].constructor = Type;
+  types[i] = [types[i].constructor, types[i] instanceof Type, types[i].toString()];
+}
+
+console.log(types.join('\n'));
+</pre>
+
+<p>Das Beispiel zeigt folgende Ausgabe:</p>
+
+<pre class="brush: js">function Type() {},false,
+function Type() {},false,
+function Type() {},false,false
+function Boolean() {
+    [native code]
+},false,true
+function Type() {},false,Mon Sep 01 2014 16:03:49 GMT+0600
+function Type() {},false,Error
+function Type() {},false,function anonymous() {
+
+}
+function Type() {},false,function () {}
+function Type() {},false,[object Math]
+function Type() {},false,0
+function Number() {
+    [native code]
+},false,1
+function Type() {},false,[object Object]
+function Type() {},false,[object Object]
+function Type() {},false,/(?:)/
+function Type() {},false,/(?:)/
+function Type() {},false,
+function String() {
+    [native code]
+},false,тест
+</pre>
+
+<h2 id="Specifications" name="Specifications">Spezifikation</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Komentar</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1 te Edition.</td>
+   <td>Standard</td>
+   <td>Ausgangsdefinition: Implementiert in JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.4.1', 'Object.prototype.constructor')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.prototype.constructor', 'Object.prototype.constructor')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browserunterstützung</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basis- unterstützung</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basis- unterstützungt</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/de/web/javascript/reference/global_objects/object/create/index.html b/files/de/web/javascript/reference/global_objects/object/create/index.html
new file mode 100644
index 0000000000..824ae41561
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/object/create/index.html
@@ -0,0 +1,268 @@
+---
+title: Object.create()
+slug: Web/JavaScript/Reference/Global_Objects/Object/create
+tags:
+  - Methode(2)
+  - Méthode
+  - Objekt
+  - Referenz
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/create
+---
+<div>{{JSRef("Global_Objects", "Object")}}</div>
+
+<h2 id="Summary" name="Summary">Summary</h2>
+
+<p>Die <code><strong>Object.create()</strong></code> Methode erstellt ein neues Objekt mit dem angegebenen Prototype object und ggf. zusätzlichen Eigenschaften (properties).</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Object.create(<var>proto</var>[, <var>propertiesObject</var>])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parameter</h3>
+
+<dl>
+ <dt><code>proto</code></dt>
+ <dd>Das Objekt, welches als Prototype object des zu erstellenden Objekts verwendet wird.</dd>
+ <dt><code>propertiesObject</code></dt>
+ <dd>Optional. Falls angegeben und nicht {{jsxref("Global_Objects/undefined", "undefined")}}, ein Objekt dessen aufzählbare eigene Eigenschaften (properties, d.h.: Eigenschaften, die für das Objekt selbst definiert wurden und nicht in der prototype chain) als Eigenschaften dem neu erstellten Objekt hinzugefügt werden.  Die Eigenschaften entsprechen dem zweiten Parameter von {{jsxref("Object.defineProperties()")}}.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein neu erzeugtes Objekt mit dem angegebenen Prototype object und den angebenenen Eigenschaften (properties).</p>
+
+<h3 id="Throws" name="Throws">Ausnahmen</h3>
+
+<p>Eine {{jsxref("Global_Objects/TypeError", "TypeError")}}-Ausnahme wird ausgelöst, wenn der <code>proto</code>-Parameter weder {{jsxref("Global_Objects/null", "null")}} noch ein Objekt ist.</p>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<h3 id="Example:_Classical_inheritance_with_Object.create" name="Example:_Classical_inheritance_with_Object.create">Beispiel: Klassenbasierte Vererbung mit <code>Object.create()</code></h3>
+
+<p>Im folgenden sehen Sie ein Beispiel wie man <code>Object.create()</code> verwenden kann, um klassenbasierte Vererbung zu realisieren. JavaScript unterstützt nur einzelne Vererbung.</p>
+
+<pre class="brush: js">// Shape - superclass
+function Shape() {
+  this.x = 0;
+  this.y = 0;
+}
+
+// superclass method
+Shape.prototype.move = function(x, y) {
+  this.x += x;
+  this.y += y;
+  console.info('Shape moved.');
+};
+
+// Rectangle - subclass
+function Rectangle() {
+  Shape.call(this); // call super constructor.
+}
+
+// subclass extends superclass
+Rectangle.prototype = Object.create(Shape.prototype);
+Rectangle.prototype.constructor = Rectangle;
+
+var rect = new Rectangle();
+
+console.log('Is rect an instance of Rectangle? ' + (rect instanceof Rectangle)); // true
+console.log('Is rect an instance of Shape? ' + (rect instanceof Shape)); // true
+rect.move(1, 1); // Outputs, 'Shape moved.'
+</pre>
+
+<p>Wenn Sie von mehreren Objekten erben wollen, können mixins verwendet werden.</p>
+
+<pre class="brush: js">function MyClass() {
+  SuperClass.call(this);
+  OtherSuperClass.call(this);
+}
+
+MyClass.prototype = Object.create(SuperClass.prototype); // inherit
+mixin(MyClass.prototype, OtherSuperClass.prototype); // mixin
+
+MyClass.prototype.myMethod = function() {
+  // do a thing
+};
+</pre>
+
+<p>Die <code>mixin</code> Funktion kopiert die Funktionen des superclass Prototypen in den subclass Prototyp. Die mixin Funktion muss vom Benutzer bereitgestellt werden. Ein Beispiel für eine mixin-ähnliche Funktion ist <a href="http://api.jquery.com/jQuery.extend/">jQuery.extend()</a>.</p>
+
+<h3 id="Example:_Using_propertiesObject_argument_with_Object.create" name="Example:_Using_propertiesObject_argument_with_Object.create">Beispiel: Benutzung des <code>propertiesObject</code> Parameters von <code>Object.create()</code></h3>
+
+<pre class="brush: js">var o;
+
+// create an object with null as prototype
+o = Object.create(null);
+
+
+o = {};
+// is equivalent to:
+o = Object.create(Object.prototype);
+
+
+// Example where we create an object with a couple of sample properties.
+// (Note that the second parameter maps keys to *property descriptors*.)
+o = Object.create(Object.prototype, {
+  // foo is a regular 'value property'
+  foo: { writable: true, configurable: true, value: 'hello' },
+  // bar is a getter-and-setter (accessor) property
+  bar: {
+    configurable: false,
+    get: function() { return 10; },
+    set: function(value) { console.log('Setting `o.bar` to', value); }
+/* with ES5 Accessors our code can look like this
+    get function() { return 10; },
+    set function(value) { console.log('setting `o.bar` to', value); } */
+  }
+});
+
+
+function Constructor() {}
+o = new Constructor();
+// is equivalent to:
+o = Object.create(Constructor.prototype);
+// Of course, if there is actual initialization code in the
+// Constructor function, the Object.create() cannot reflect it
+
+
+// create a new object whose prototype is a new, empty object
+// and a adding single property 'p', with value 42
+o = Object.create({}, { p: { value: 42 } });
+
+// by default properties ARE NOT writable, enumerable or configurable:
+o.p = 24;
+o.p;
+// 42
+
+o.q = 12;
+for (var prop in o) {
+  console.log(prop);
+}
+// 'q'
+
+delete o.p;
+// false
+
+// to specify an ES3 property
+o2 = Object.create({}, {
+  p: {
+    value: 42,
+    writable: true,
+    enumerable: true,
+    configurable: true
+  }
+});
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Polyfill</h2>
+
+<p>Dieser Polyfill deckt den Hauptanwendungsfall, die Erzeugung eines neuen Objektes für das ein Prototyp ausgewählt wurde, ab.</p>
+
+<p>Bitte beachten Sie, dass dieses Polyfill im Gegensatz zum echten ES5 <code>Object.create</code> den Einsatz von <code>null</code> als Prototyp-Parameter aufgrund einer Einschränkung von ECMAScript vor Version 5 nicht unterstützt.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">typeof</span> Object<span class="punctuation token">.</span>create <span class="operator token">!=</span> <span class="string token">'function'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  Object<span class="punctuation token">.</span>create <span class="operator token">=</span> <span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>undefined<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">var</span> Temp <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">;</span>
+    <span class="keyword token">return</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>prototype<span class="punctuation token">,</span> propertiesObject<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="keyword token">if</span><span class="punctuation token">(</span>prototype <span class="operator token">!==</span> <span class="function token">Object</span><span class="punctuation token">(</span>prototype<span class="punctuation token">)</span> <span class="operator token">&amp;&amp;</span> prototype <span class="operator token">!==</span> <span class="keyword token">null</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="keyword token">throw</span> <span class="function token">TypeError</span><span class="punctuation token">(</span><span class="string token">'Argument must be an object, or null'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+      Temp<span class="punctuation token">.</span>prototype <span class="operator token">=</span> prototype <span class="operator token">||</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">;</span>
+      <span class="keyword token">if</span> <span class="punctuation token">(</span>propertiesObject <span class="operator token">!==</span> undefined<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        Object<span class="punctuation token">.</span><span class="function token">defineProperties</span><span class="punctuation token">(</span>Temp<span class="punctuation token">.</span>prototype<span class="punctuation token">,</span> propertiesObject<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+      <span class="keyword token">var</span> result <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Temp</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      Temp<span class="punctuation token">.</span>prototype <span class="operator token">=</span> <span class="keyword token">null</span><span class="punctuation token">;</span>
+      <span class="comment token">// to imitate the case of Object.create(null)</span>
+      <span class="keyword token">if</span><span class="punctuation token">(</span>prototype <span class="operator token">===</span> <span class="keyword token">null</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+         result<span class="punctuation token">.</span>__proto__ <span class="operator token">=</span> <span class="keyword token">null</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+      <span class="keyword token">return</span> result<span class="punctuation token">;</span>
+    <span class="punctuation token">}</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.5', 'Object.create')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.create', 'Object.create')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser Kompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("5")}}</td>
+   <td>{{CompatGeckoDesktop("2")}}</td>
+   <td>{{CompatIE("9")}}</td>
+   <td>{{CompatOpera("11.60")}}</td>
+   <td>{{CompatSafari("5")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatOperaMobile("11.50")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Basierend auf <a href="http://kangax.github.com/es5-compat-table/">Kangax's compat table</a>.</p>
+
+<h2 id="See_also" name="See_also">Zusätzliches Material</h2>
+
+<ul>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.defineProperties()")}}</li>
+ <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li>
+ <li>John Resig's post on <a href="http://ejohn.org/blog/objectgetprototypeof/">getPrototypeOf()</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/object/defineproperty/index.html b/files/de/web/javascript/reference/global_objects/object/defineproperty/index.html
new file mode 100644
index 0000000000..7120abb08e
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/object/defineproperty/index.html
@@ -0,0 +1,413 @@
+---
+title: Object.defineProperty()
+slug: Web/JavaScript/Reference/Global_Objects/Object/defineProperty
+tags:
+  - Méthode
+  - Objekt
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperty
+---
+<div>{{JSRef}}</div>
+
+<p>Die Methode <code><strong>Object.defineProperty()</strong></code> definiert eine neue Eigenschaft direkt auf ein Objekt, oder modifiziert eine Eigenschaft. Schließlich gibt die Funktion das Objekt zurück.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Object.defineProperty(<var>obj</var>, <var>prop</var>, <var>descriptor</var>)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>Das Objekt, welchem die neue Eigenschaft zugewiesen werden soll.</dd>
+ <dt><code>prop</code></dt>
+ <dd>Der Name der Eigenschaft, welche hinzugefügt oder modifiziert werden soll.</dd>
+ <dt><code>descriptor</code></dt>
+ <dd>Die Beschreibung/ der Wert, welche die neue Eigenschaft annehmen soll.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Das Objekt, welches behandelt wurde.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Diese Methode erlaubt präzises Hinzufügen oder Modifizieren von Eigenschaften eines Objektes. Normal property addition through assignment creates properties which show up during property enumeration ({{jsxref("Statements/for...in", "for...in")}} loop or {{jsxref("Object.keys")}} method), whose values may be changed, and which may be {{jsxref("Operators/delete", "deleted", "", 1)}}. This method allows these extra details to be changed from their defaults. Standardmäßig sind Werte die mit <code>Object.defineProperty()</code> hinzugefügt wurden unveränderbar.</p>
+
+<p>Attribut Deskriptoren unterscheiden sich in zwei Varianten: Daten Deskriptoren und Zugiffsdeskriptoren. Ein <em>Datendeskriptor</em> ist ein Attribut welches einen Wert hat das schreibbar oder nicht schreibbar sein kann. Ein <em>Zugriffsdeskriptor</em> ist ein Attribut das mit einem "getter/setter Paar" beschrieben wird. Ein Deskriptor muss von einer dieser beiden Arten sein, er kann nicht beides sein.</p>
+
+<p>Beide, Daten- und Zugriffsdeskriptoren sind Objekte. Sie teilen die folgenden benötigten Objektschlüssel:</p>
+
+<dl>
+ <dt><code>configurable</code></dt>
+ <dd><code>true</code> if and only if the type of this property descriptor may be changed and if the property may be deleted from the corresponding object.<br>
+ <strong>Defaults to <code>false</code>.</strong></dd>
+ <dt><code>enumerable</code></dt>
+ <dd><code>true</code> if and only if this property shows up during enumeration of the properties on the corresponding object.<br>
+ <strong>Defaults to <code>false</code>.</strong></dd>
+</dl>
+
+<p>Ein Datendeskriptor hat außerdem die folgenden, optionalen Schlüssel:</p>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>The value associated with the property. Can be any valid JavaScript value (number, object, function, etc).<br>
+ <strong>Defaults to {{jsxref("undefined")}}.</strong></dd>
+ <dt><code>writable</code></dt>
+ <dd><code>true</code> if and only if the value associated with the property may be changed with an {{jsxref("Operators/Assignment_Operators", "assignment operator", "", 1)}}.<br>
+ <strong>Defaults to <code>false</code>.</strong></dd>
+</dl>
+
+<p>Ein Zugriffsdeskriptor hat außerdem die folgenden, optionalen Schlüssel:</p>
+
+<dl>
+ <dt><code>get</code></dt>
+ <dd>A function which serves as a getter for the property, or {{jsxref("undefined")}} if there is no getter. The function return will be used as the value of property.<br>
+ <strong>Defaults to {{jsxref("undefined")}}.</strong></dd>
+ <dt><code>set</code></dt>
+ <dd>A function which serves as a setter for the property, or {{jsxref("undefined")}} if there is no setter. The function will receive as only argument the new value being assigned to the property.<br>
+ <strong>Defaults to {{jsxref("undefined")}}.</strong></dd>
+</dl>
+
+<p>Bear in mind that these options are not necessarily the descriptor's own properties, and properties inherited from the prototype chain will be considered too. In order to ensure these defaults are preserved you might freeze the {{jsxref("Object.prototype")}} upfront or specify all options explicitly.</p>
+
+<pre class="brush: js">// being explicit
+Object.defineProperty(obj, 'key', {
+  enumerable: false,
+  configurable: false,
+  writable: false,
+  value: 'static'
+});
+
+// recycling same object
+function withValue(value) {
+  var d = withValue.d || (
+    withValue.d = {
+      enumerable: false,
+      writable: false,
+      configurable: false,
+      value: null
+    }
+  );
+  d.value = value;
+  return d;
+}
+// ... and ...
+Object.defineProperty(obj, 'key', withValue('static'));
+
+// if freeze is available, prevents adding or
+// removing the object prototype properties
+// (value, get, set, enumerable, writable, configurable)
+(Object.freeze || Object)(Object.prototype);
+</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<p>If you want to see how to use the <code>Object.defineProperty</code> method with a <em>binary-flags-like</em> syntax, see <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty/Additional_examples">additional examples</a>.</p>
+
+<h3 id="Creating_a_property">Creating a property</h3>
+
+<p>When the property specified doesn't exist in the object, <code>Object.defineProperty()</code> creates a new property as described. Fields may be omitted from the descriptor, and default values for those fields are imputed. All of the Boolean-valued fields default to <code>false</code>. The <code>value</code>, <code>get</code>, and <code>set</code> fields default to {{jsxref("undefined")}}. A property which is defined without <code>get</code>/<code>set</code>/<code>value</code>/<code>writable</code> is called “generic” and is “typed” as a data descriptor.</p>
+
+<pre class="brush: js">var o = {}; // Creates a new object
+
+// Example of an object property added with defineProperty with a data property descriptor
+Object.defineProperty(o, 'a', {
+  value: 37,
+  writable: true,
+  enumerable: true,
+  configurable: true
+});
+// 'a' property exists in the o object and its value is 37
+
+// Example of an object property added with defineProperty with an accessor property descriptor
+var bValue = 38;
+Object.defineProperty(o, 'b', {
+  get: function() { return bValue; },
+  set: function(newValue) { bValue = newValue; },
+  enumerable: true,
+  configurable: true
+});
+o.b; // 38
+// 'b' property exists in the o object and its value is 38
+// The value of o.b is now always identical to bValue, unless o.b is redefined
+
+// You cannot try to mix both:
+Object.defineProperty(o, 'conflict', {
+  value: 0x9f91102,
+  get: function() { return 0xdeadbeef; }
+});
+// throws a TypeError: value appears only in data descriptors, get appears only in accessor descriptors
+</pre>
+
+<h3 id="Modifying_a_property">Modifying a property</h3>
+
+<p>When the property already exists, <code>Object.defineProperty()</code> attempts to modify the property according to the values in the descriptor and the object's current configuration. If the old descriptor had its <code>configurable</code> attribute set to <code>false</code> (the property is said to be “non-configurable”), then no attribute besides <code>writable</code> can be changed. In that case, it is also not possible to switch back and forth between the data and accessor property types.</p>
+
+<p>If a property is non-configurable, its <code>writable</code> attribute can only be changed to <code>false</code>.</p>
+
+<p>A {{jsxref("TypeError")}} is thrown when attempts are made to change non-configurable property attributes (besides the <code>writable</code> attribute) unless the current and new values are the same.</p>
+
+<h4 id="Writable_attribute">Writable attribute</h4>
+
+<p>When the <code>writable</code> property attribute is set to <code>false</code>, the property is said to be “non-writable”. It cannot be reassigned.</p>
+
+<pre class="brush: js">var o = {}; // Creates a new object
+
+Object.defineProperty(o, 'a', {
+  value: 37,
+  writable: false
+});
+
+console.log(o.a); // logs 37
+o.a = 25; // No error thrown (it would throw in strict mode, even if the value had been the same)
+console.log(o.a); // logs 37. The assignment didn't work.
+</pre>
+
+<p>As seen in the example, trying to write into the non-writable property doesn't change it but doesn't throw an error either.</p>
+
+<h4 id="Enumerable_attribute">Enumerable attribute</h4>
+
+<p>The <code>enumerable</code> property attribute defines whether the property shows up in a {{jsxref("Statements/for...in", "for...in")}} loop and {{jsxref("Object.keys()")}} or not.</p>
+
+<pre class="brush: js">var o = {};
+Object.defineProperty(o, 'a', { value: 1, enumerable: true });
+Object.defineProperty(o, 'b', { value: 2, enumerable: false });
+Object.defineProperty(o, 'c', { value: 3 }); // enumerable defaults to false
+o.d = 4; // enumerable defaults to true when creating a property by setting it
+
+for (var i in o) {
+  console.log(i);
+}
+// logs 'a' and 'd' (in undefined order)
+
+Object.keys(o); // ['a', 'd']
+
+o.propertyIsEnumerable('a'); // true
+o.propertyIsEnumerable('b'); // false
+o.propertyIsEnumerable('c'); // false
+</pre>
+
+<h4 id="Configurable_attribute">Configurable attribute</h4>
+
+<p>The <code>configurable</code> attribute controls at the same time whether the property can be deleted from the object and whether its attributes (other than <code>writable</code>) can be changed.</p>
+
+<pre class="brush: js">var o = {};
+Object.defineProperty(o, 'a', {
+  get: function() { return 1; },
+  configurable: false
+});
+
+Object.defineProperty(o, 'a', { configurable: true }); // throws a TypeError
+Object.defineProperty(o, 'a', { enumerable: true }); // throws a TypeError
+Object.defineProperty(o, 'a', { set: function() {} }); // throws a TypeError (set was undefined previously)
+Object.defineProperty(o, 'a', { get: function() { return 1; } }); // throws a TypeError (even though the new get does exactly the same thing)
+Object.defineProperty(o, 'a', { value: 12 }); // throws a TypeError
+
+console.log(o.a); // logs 1
+delete o.a; // Nothing happens
+console.log(o.a); // logs 1
+</pre>
+
+<p>If the <code>configurable</code> attribute of <code>o.a</code> had been <code>true</code>, none of the errors would be thrown and the property would be deleted at the end.</p>
+
+<h3 id="Adding_properties_and_default_values">Adding properties and default values</h3>
+
+<p>It's important to consider the way default values of attributes are applied. There is often a difference between simply using dot notation to assign a value and using <code>Object.defineProperty()</code>, as shown in the example below.</p>
+
+<pre class="brush: js">var o = {};
+
+o.a = 1;
+// is equivalent to:
+Object.defineProperty(o, 'a', {
+  value: 1,
+  writable: true,
+  configurable: true,
+  enumerable: true
+});
+
+
+// On the other hand,
+Object.defineProperty(o, 'a', { value: 1 });
+// is equivalent to:
+Object.defineProperty(o, 'a', {
+  value: 1,
+  writable: false,
+  configurable: false,
+  enumerable: false
+});
+</pre>
+
+<h3 id="Custom_Setters_and_Getters">Custom Setters and Getters</h3>
+
+<p>Example below shows how to implement a self-archiving object. When <code>temperature</code> property is set, the <code>archive</code> array gets a log entry.</p>
+
+<pre class="brush: js">function Archiver() {
+  var temperature = null;
+  var archive = [];
+
+  Object.defineProperty(this, 'temperature', {
+    get: function() {
+      console.log('get!');
+      return temperature;
+    },
+    set: function(value) {
+      temperature = value;
+      archive.push({ val: temperature });
+    }
+  });
+
+  this.getArchive = function() { return archive; };
+}
+
+var arc = new Archiver();
+arc.temperature; // 'get!'
+arc.temperature = 11;
+arc.temperature = 13;
+arc.getArchive(); // [{ val: 11 }, { val: 13 }]
+</pre>
+
+<p>or</p>
+
+<pre class="brush: js">var pattern = {
+    get: function () {
+        return 'I always return this string, whatever you have assigned';
+    },
+    set: function () {
+        this.myname = 'this is my name string';
+    }
+};
+
+
+function TestDefineSetAndGet() {
+    Object.defineProperty(this, 'myproperty', pattern);
+}
+
+
+var instance = new TestDefineSetAndGet();
+instance.myproperty = 'test';
+console.log(instance.myproperty); // I always return this string, whatever you have assigned
+
+console.log(instance.myname); // this is my name string
+
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.6', 'Object.defineProperty')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.defineproperty', 'Object.defineProperty')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.defineproperty', 'Object.defineProperty')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop("2")}}</td>
+   <td>{{CompatChrome("5")}}</td>
+   <td>{{CompatIE("9")}} [1]</td>
+   <td>{{CompatOpera("11.60")}}</td>
+   <td>{{CompatSafari("5.1")}} [2]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoMobile("2")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatIE("9")}}</td>
+   <td>{{CompatOperaMobile("11.5")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] In Internet Explorer 8 only on DOM objects and with some non-standard behaviors.</p>
+
+<p>[2] Also supported in Safari 5, but not on DOM objects.</p>
+
+<h2 id="Compatibility_notes">Compatibility notes</h2>
+
+<h3 id="Redefining_the_length_property_of_an_Array_object">Redefining the <code>length</code> property of an <code>Array</code> object</h3>
+
+<p>It is possible to redefine the {{jsxref("Array.length", "length")}} property of arrays, subject to the usual redefinition restrictions. (The {{jsxref("Array.length", "length")}} property is initially non-configurable, non-enumerable, and writable. Thus on an unaltered array it is possible to change the {{jsxref("Array.length", "length")}} property's value, or to make it non-writable. It is not allowed to change its enumerability or configurability, or if it is non-writable to change its value or writability.) However, not all browsers permit this redefinition.</p>
+
+<p>Firefox 4 through 22 will throw a {{jsxref("TypeError")}} on any attempt whatsoever (whether permitted or not) to redefine the {{jsxref("Array.length", "length")}} property of an array.</p>
+
+<p>Versions of Chrome which implement <code>Object.defineProperty()</code> in some circumstances ignore a length value different from the array's current {{jsxref("Array.length", "length")}} property. In some circumstances changing writability seems to silently not work (and not throw an exception). Also, relatedly, some array-mutating methods like {{jsxref("Array.prototype.push")}} don't respect a non-writable length.</p>
+
+<p>Versions of Safari which implement <code>Object.defineProperty()</code> ignore a <code>length</code> value different from the array's current {{jsxref("Array.length", "length")}} property, and attempts to change writability execute without error but do not actually change the property's writability.</p>
+
+<p>Only Internet Explorer 9 and later, and Firefox 23 and later, appear to fully and correctly implement redefinition of the {{jsxref("Array.length", "length")}} property of arrays. For now, don't rely on redefining the {{jsxref("Array.length", "length")}} property of an array to either work, or to work in a particular manner. And even when you <em>can</em> rely on it, <a href="http://whereswalden.com/2013/08/05/new-in-firefox-23-the-length-property-of-an-array-can-be-made-non-writable-but-you-shouldnt-do-it/">there's really no good reason to do so</a>.</p>
+
+<h3 id="Internet_Explorer_8_specific_notes">Internet Explorer 8 specific notes</h3>
+
+<p>Internet Explorer 8 implemented a <code>Object.defineProperty()</code> method that could <a class="external" href="https://msdn.microsoft.com/en-us/library/dd229916%28VS.85%29.aspx">only be used on DOM objects</a>. A few things need to be noted:</p>
+
+<ul>
+ <li>Trying to use <code>Object.defineProperty()</code> on native objects throws an error.</li>
+ <li>Property attributes must be set to some values. <code>Configurable</code>, <code>enumerable</code> and <code>writable</code> attributes should all be set to <code>true</code> for data descriptor and <code>true</code> for <code>configurable</code>, <code>false</code> for <code>enumerable</code> for accessor descriptor.(?) Any attempt to provide other value(?) will result in an error being thrown.</li>
+ <li>Reconfiguring a property requires first deleting the property. If the property isn't deleted, it stays as it was before the reconfiguration attempt.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li>
+ <li>{{jsxref("Object.defineProperties()")}}</li>
+ <li>{{jsxref("Object.propertyIsEnumerable()")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyDescriptor()")}}</li>
+ <li>{{jsxref("Object.prototype.watch()")}}</li>
+ <li>{{jsxref("Object.prototype.unwatch()")}}</li>
+ <li>{{jsxref("Operators/get", "get")}}</li>
+ <li>{{jsxref("Operators/set", "set")}}</li>
+ <li>{{jsxref("Object.create()")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty/Additional_examples">Additional <code>Object.defineProperty</code> examples</a></li>
+ <li>{{jsxref("Reflect.defineProperty()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/object/entries/index.html b/files/de/web/javascript/reference/global_objects/object/entries/index.html
new file mode 100644
index 0000000000..4ac921f62b
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/object/entries/index.html
@@ -0,0 +1,168 @@
+---
+title: Object.entries()
+slug: Web/JavaScript/Reference/Global_Objects/Object/entries
+tags:
+  - Entries
+  - Iterieren
+  - JavaScript
+  - Méthode
+  - Objekt
+  - Referenz
+  - Schleife
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/entries
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Object.entries()</strong></code><strong> </strong>ist eine Methode für Objekte. Zurückgegeben wird ein Array mit den Eigenschaften des Objektes. Diese Eigenschaften werden in Key-Value-Paaren als zählbare strings zurückgegeben.</p>
+
+<p>Im Gegensatz zur {{jsxref("Statements/for...in", "for...in")}}-Schleife werden dabei nicht die constructor- Eigenschaften zurückgegeben, die das Objekt von seinem <code>prototype</code> geerbt hat.</p>
+
+<div>
+<p>Die Reihenfolge der Key-Value-Paare ist dabei die gleiche wie bei einer {{jsxref("Statements/for...in", "for...in")}}-Schleife. Sie hängt nicht davon ab, wie das ursprüngliche Objekt aufgebaut ist. Ist eine bestimmte Reihenfolge erwünscht, muss der Array sortiert werden:<br>
+ <code>Object.entries(obj).sort((a, b) =&gt; b[0].localeCompare(a[0]));</code>.</p>
+
+<p> </p>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/js/object-entries.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Object.entries(<var>obj</var>)</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>Ein Objekt besitzt Eigenschaften in Form von Key-Value-Paaren. </dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Zurückgegeben wird ein Array mit den Key-Value-Paaren (<code>[key, value]</code>) eines Objektes in Form von zählbaren strings.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p><code>Object.entries()</code> erzeugt einen Array auf Basis eines Objekts. Die Eigenschaften des Objekts werden im Array als Key-Value-Paare gespeichert.<br>
+ Die Reihenfolge der Eigenschaften ist dabei gleich einer manuellen Iteration über das Objekt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js">const obj = { foo: 'bar', baz: 42 };
+console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]
+
+// Array-ähnliches Objekt
+const obj = { 0: 'a', 1: 'b', 2: 'c' };
+console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]
+
+// Array-ähnliches Objekt mit zufälliger Reihenfolge der Keys
+const anObj = { 100: 'a', 2: 'b', 7: 'c' };
+console.log(Object.entries(anObj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]
+
+// getFoo- Eigenschaft ist nicht zählbar
+const myObj = Object.create({}, { getFoo: { value() { return this.foo; } } });
+myObj.foo = 'bar';
+console.log(Object.entries(myObj)); // [ ['foo', 'bar'] ]
+
+// Das Argument, das kein Objekt ist, wird in ein Objekt umgewandelt
+console.log(Object.entries('foo')); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ]
+
+// Gibt einen Leeren Array zurück, da primitive Datentypen keine eigenen Eigenschaften haben
+console.log(Object.entries(100)); // [ ]
+
+// Elegant über Key-Value-Paare iterieren
+const obj = { a: 5, b: 7, c: 9 };
+for (const [key, value] of Object.entries(obj)) {
+  console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
+}
+
+// Mit array extras über Key-Value-Paare iterieren
+Object.entries(obj).forEach(([key, value]) =&gt; {
+  console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
+});
+</pre>
+
+<h3 id="Ein_Object_in_ein_Map-Objekt_umwandeln">Ein <code>Object</code> in ein <code>Map-Objekt</code> umwandeln</h3>
+
+<p>Der {{jsxref("Map", "new Map()")}}-constructor akzeptiert zählbare <code>entries</code>. Mithilfe von <code>Object.entries</code> kann ein {{jsxref("Object")}} in ein {{jsxref("Map")}}-Objekt umgewandelt werden:</p>
+
+<pre class="brush: js">const obj = { foo: 'bar', baz: 42 };
+const map = new Map(Object.entries(obj));
+console.log(map); // Map { foo: "bar", baz: 42 }
+</pre>
+
+<h3 id="Durch_das_Object_iterieren">Durch das <code>Object</code> iterieren</h3>
+
+<p>Mit der Technik der <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/Destrukturierende_Zuweisung">destrukturierenden Zuweisung</a> kann durch Objekte iteriert werden.</p>
+
+<pre class="brush: js">const obj = { foo: 'bar', baz: 42 };
+Object.entries(obj).forEach(([key, value]) =&gt; console.log(`${key}: ${value}`)); // "foo: bar", "baz: 42"
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Um <code>Object.entries</code> auch in älteren Umgebungen zu nutzen, die diese Methode nicht nativ unterstützen, sind Polyfills im <a href="https://github.com/tc39/proposal-object-values-entries">tc39/proposal-object-values-entries</a> (ohne IE) order im <a href="https://github.com/es-shims/Object.entries">es-shims/Object.entries</a>-Repository finden. Untenstehender Polyfill ist ebenfalls verwendbar:</p>
+
+<pre class="brush: js">if (!Object.entries) {
+  Object.entries = function( obj ){
+    var ownProps = Object.keys( obj ),
+        i = ownProps.length,
+        resArray = new Array(i); // preallocate the Array
+    while (i--)
+      resArray[i] = [ownProps[i], obj[ownProps[i]]];
+
+    return resArray;
+  };
+}
+</pre>
+
+<p>Sollten Sie auch IE &lt; 9 unterstützen müssen, brauchen sie jedoch zusätzlich den <code>Object.keys</code>-Polyfill, zu finden auf {{jsxref("Object.keys")}}.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.entries', 'Object.entries')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES8', '#sec-object.entries', 'Object.entries')}}</td>
+   <td>{{Spec2('ES8')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Object.entries")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li>
+ <li>{{jsxref("Object.keys()")}}</li>
+ <li>{{jsxref("Object.values()")}}</li>
+ <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li>
+ <li>{{jsxref("Object.create()")}}</li>
+ <li>{{jsxref("Object.fromEntries()")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
+ <li>{{jsxref("Map.prototype.entries()")}}</li>
+ <li>{{jsxref("Map.prototype.keys()")}}</li>
+ <li>{{jsxref("Map.prototype.values()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/object/freeze/index.html b/files/de/web/javascript/reference/global_objects/object/freeze/index.html
new file mode 100644
index 0000000000..b0379d636c
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/object/freeze/index.html
@@ -0,0 +1,253 @@
+---
+title: Object.freeze()
+slug: Web/JavaScript/Reference/Global_Objects/Object/freeze
+tags:
+  - ECMAScript5
+  - JavaScript
+  - Methode(2)
+  - Objekt
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/freeze
+---
+<div>{{JSRef}}</div>
+
+<p>Die Methode <code><strong>Object.freeze()</strong></code> <strong>friert</strong> ein Objekt <strong>ein</strong>. Ein eingefrorenes Objekt kann nicht mehr geändert werden. Das Einfrieren eines Objekts verhindert, dass neue Eigenschaften hinzugefügt oder existierende entfernt und die Aufzählbarkeit, Konfigurierbarkeit oder Schreibbarkeit vorhandener Eigenschaften und deren Werte geändert werden können. Durch das Einfrieren eines Objekts wird außerdem verhindert, dass der Prototyp geändert wird. <code>freeze()</code> gibt das gleiche Objekt zurück, das übergeben wurde.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-freeze.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Object.freeze(<var>obj</var>)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>Das einzufrierende Objekt.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Das Objekt, welches an die Funktion übergeben wurde.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Zum Eigenschaftssatz eines eingefrorenen Objekts kann nichts hinzugefügt oder daraus entfernt werden. Jeder Versuch, dies zu tun, schlägt fehl, entweder im Hintergrund oder durch Auslösen einer {{jsxref("TypeError")}} Exception (meistens, jedoch nicht ausschließlich, wenn im {{jsxref("Strict_mode", "strikten Modus", "", 1)}}).</p>
+
+<p>Bei Dateneigenschaften eines eingefrorenen Objekts können Werte nicht geändert werden. Die Attribute für Beschreibbarkeit und Konfigurierbarkeit werden auf false gesetzt. Accessor-Eigenschaften (Getter und Setter) funktionieren gleich (und lassen einen nach wie vor in dem Glauben etwas zu ändern). Beachten Sie, dass Werte, die Objekte sind, immer noch geändert werden können, es sei denn, sie werden ebenfalls eingefroren. Da ein Array ein Objekt ist, kann es eingefroren werden. Danach können seine Elemente nicht mehr geändert und keine Elemente hinzugefügt oder entfernt werden.</p>
+
+<p><code>freeze()</code> gibt das gleiche Objekt zurück, das an die Funktion übergeben wurde. Es wird <em>keine</em> eingefrorene Kopie erstellt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Objekte_einfrieren">Objekte einfrieren</h3>
+
+<pre class="brush: js">var obj = {
+  prop: function() {},
+  foo: 'bar'
+};
+
+// Vor dem Einfrieren: neue Eigenschaften können hinzugefügt
+// und vorhandene Eigenschaften geändert oder entfernt werden
+obj.foo = 'baz';
+obj.lumpy = 'woof';
+delete obj.prop;
+
+// Einfrieren
+var o = Object.freeze(obj);
+
+// Der Rückgabewert ist dasselbe Objekt, das übergeben wurde
+o === obj; // true
+
+// Das Objekt ist eingefroren
+Object.isFrozen(obj); // === true
+
+// Jetzt schlagen sämtliche Änderungen fehl
+obj.foo = 'quux'; // nichts passiert, im Stillen
+// fügt die Eigenschaft nicht hinzu, im Stillen
+obj.quaxxor = 'the friendly duck';
+
+// Im strikten Modus lösen solche Versuche TypeErrors aus
+function fail(){
+  'use strict';
+  obj.foo = 'sparky'; // löst TypeError aus
+  delete obj.foo; // löst TypeError aus
+  delete obj.quaxxor; // gibt true zurück, da Attribut 'quaxxor' nie hinzugefügt wurde
+  obj.sparky = 'arf'; // löst TypeError aus
+}
+
+fail();
+
+// Versuchte Änderungen über Object.defineProperty;
+// beide Anweisungen lösen TypeError aus
+Object.defineProperty(obj, 'ohai', { value: 17 });
+Object.defineProperty(obj, 'foo', { value: 'eit' });
+
+// Der prototype kann ebenfalls nicht geändert werden
+// beide Anweisungen lösen TypeError aus
+Object.setPrototypeOf(obj, { x: 20 })
+obj.__proto__ = { x: 20 }
+</pre>
+
+<h3 id="Arrays_einfrieren">Arrays einfrieren</h3>
+
+<pre class="brush: js">let a = [0];
+Object.freeze(a); // Das Array kann nicht mehr geändert werden
+
+a[0]=1; // schlägt still fehl
+a.push(2); // schlägt still fehl
+
+// Im strikten Modus lösen solche Versuche TypeErrors aus
+function fail() {
+  "use strict"
+  a[0] = 1;
+  a.push(2);
+}
+
+fail();</pre>
+
+<p>Das eingefrorene Objekt ist <em>unveränderlich</em> (engl. <em>immutable</em>). Es ist jedoch nicht notwendigerweise <em>konstant</em>. Das folgende Beispiel zeigt, dass ein eingefrorenes Objekt nicht konstant ist (Einfrieren ist flach).</p>
+
+<pre class="brush: js">obj1 = {
+  internal: {}
+};
+
+Object.freeze(obj1);
+obj1.internal.a = 'aValue';
+
+obj1.internal.a // 'aValue'</pre>
+
+<p>Um ein konstantes Objekt zu sein, muss der gesamte Referenzgraph (direkte und indirekte Verweise auf andere Objekte) nur unveränderliche eingefrorene Objekte referenzieren. Das eingefrorene Objekt wird als unveränderlich (immutable) bezeichnet, da der gesamte <em>Objektzustand</em> (Werte und Verweise auf andere Objekte) innerhalb des gesamten Objekts fix ist. Beachten Sie, dass Strings, Zahlen und Booleans immer unveränderlich (immutable) und Funktionen und Arrays Objekte sind.</p>
+
+<h4 id="Was_ist_flaches_Einfrieren">Was ist "flaches Einfrieren"?</h4>
+
+<p>Das Ergebnis des Aufrufs von <code>Object.freeze(<var>object</var>)</code> gilt nur für die unmittelbaren Eigenschaften von <code>object</code> selbst und verhindert, dass zukünftige Eigenschaften hinzugefügt, entfernt oder Werte auf <em>diesem</em> <code>object</code> neu zugewiesen werden. Wenn der Wert dieser Eigenschaften selbst Objekte sind, werden diese Objekte nicht eingefroren und können das Ziel von Eigenschaftszusatz-, Entfernungs- oder Wertzuordnungsvorgängen sein.</p>
+
+<pre class="brush: js">var employee = {
+  name: "Mayank",
+  designation: "Developer",
+  address: {
+    street: "Rohini",
+    city: "Delhi"
+  }
+};
+
+Object.freeze(employee);
+
+employee.name = "Dummy"; // schlägt im nicht-strikten Modus still fehl
+employee.address.city = "Noida"; // Attribute von Kind-Objekt können geändert werden
+
+console.log(employee.address.city) // Ausgabe: "Noida"
+</pre>
+
+<p>Um ein Objekt unveränderlich zu machen, frieren Sie rekursiv jede Eigenschaft vom Typ <code>object</code> ein (deep freeze). Verwenden Sie das Muster im Einzelfall basierend auf Ihrem Entwurf, wenn Sie wissen, dass das Objekt keine {{interwiki("wikipedia", "Zyklus_(Graphentheorie)", "Zyklen")}} im Referenzgraph enthält, andernfalls kommt es zu einer Endlosschleife. Eine Verbesserung von <code>deepFreeze()</code> wäre eine interne Funktion, die ein Argument für einen Pfad (z. B. ein Array) empfängt, sodass Sie den Aufruf von <code>deepFreeze()</code> rekursiv unterdrücken können, wenn ein Objekt gerade unveränderlich gemacht wird. Es besteht weiterhin die Gefahr, dass ein Objekt eingefroren wird, das nicht eingefroren werden sollte, wie z. B. [window].</p>
+
+<pre class="brush: js">function deepFreeze(object) {
+
+  // Abrufen der definierten Eigenschaftsnamen des Objekts
+  var propNames = Object.getOwnPropertyNames(object);
+
+  // Eigenschaften vor dem eigenen Einfrieren einfrieren
+
+  for (let name of propNames) {
+    let value = object[name];
+
+    object[name] = value &amp;&amp; typeof value === "object" ?
+      deepFreeze(value) : value;
+  }
+
+  return Object.freeze(object);
+}
+
+var obj2 = {
+  internal: {
+    a: null
+  }
+};
+
+deepFreeze(obj2);
+
+obj2.internal.a = 'anotherValue'; // schlägt im nicht-strikten Modus still fehl
+obj2.internal.a; // null
+</pre>
+
+<h2 id="Nutzungshinweise">Nutzungshinweise</h2>
+
+<p>Wenn das Argument für diese Methode kein Objekt (ein Primitiv) ist, führt dies in ES5 zu einem {{jsxref("TypeError")}}. In ES2015 wird ein Nicht-Objekt-Argument wie ein eingefrorenes gewöhnliches Objekt behandelt und einfach zurückgegeben.</p>
+
+<pre class="brush: js">&gt; Object.freeze(1)
+TypeError: 1 is not an object // ES5 Code
+
+&gt; Object.freeze(1)
+1                             // ES2015 Code
+</pre>
+
+<p>Ein {{domxref("ArrayBufferView")}} mit Elementen verursacht einen {{jsxref("TypeError")}}, da diese Ansichten über den Arbeitsspeicher sind und auf jeden Fall andere mögliche Probleme verursachen können:</p>
+
+<pre class="brush: js">&gt; Object.freeze(new Uint8Array(0)) // Keine Elemente
+Uint8Array []
+
+&gt; Object.freeze(new Uint8Array(1)) // Hat Elemente
+TypeError: Cannot freeze array buffer views with elements
+
+&gt; Object.freeze(new DataView(new ArrayBuffer(32))) // Keine Elemente
+DataView {}
+
+&gt; Object.freeze(new Float64Array(new ArrayBuffer(64), 63, 0)) // Keine Elemente
+Float64Array []
+
+&gt; Object.freeze(new Float64Array(new ArrayBuffer(64), 32, 2)) // Hat Elemente
+TypeError: Cannot freeze array buffer views with elements
+</pre>
+
+<p>Beachten Sie, da die drei Standard-Eigenschaften (<code>buf.byteLength</code>, <code>buf.byteOffset</code> und <code>buf.buffer</code>) schreibgeschützt sind (wie die Eigenschaften eines {{jsxref("ArrayBuffer")}} oder {{jsxref("SharedArrayBuffer")}}) gibt es keinen Grund, diese einzufrieren.</p>
+
+<h3 id="Vergleich_zu_Object.seal()">Vergleich zu <code>Object.seal()</code></h3>
+
+<p>Vorhandene Eigenschaften in Objekten, die mit {{jsxref("Object.seal()")}} versiegelt wurden, können geändert werden. Vorhandene Eigenschaften in Objekten, die mit <code>Object.freeze()</code> eingefroren wurden, werden unveränderlich gemacht.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.9', 'Object.freeze')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.freeze', 'Object.freeze')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.freeze', 'Object.freeze')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Object.freeze")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Object.isFrozen()")}}</li>
+ <li>{{jsxref("Object.preventExtensions()")}}</li>
+ <li>{{jsxref("Object.isExtensible()")}}</li>
+ <li>{{jsxref("Object.seal()")}}</li>
+ <li>{{jsxref("Object.isSealed()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/object/getownpropertynames/index.html b/files/de/web/javascript/reference/global_objects/object/getownpropertynames/index.html
new file mode 100644
index 0000000000..1e76977b49
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/object/getownpropertynames/index.html
@@ -0,0 +1,201 @@
+---
+title: Object.getOwnPropertyNames()
+slug: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames
+tags:
+  - german
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Object.getOwnPropertyNames()</code></strong> Methode gibt einen Array mit allen Eigenschaftsnamen (aufzählbar oder nicht) zurück, welche direkt auf einem Objekt gefunden werden. </p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Object.getOwnPropertyNames(<var>obj</var>)</code></pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>Das Objekt dessen aufzählbaren und nicht aufzählbaren Eigenschaftsnamen gesucht sind. </dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Object.getOwnPropertyNames () gibt ein Array zurück, dessen Elemente Strings sind, die den aufzählbar und nicht aufzählbar Eigenschaften direkt auf dem Objekt gefunden werden. Die Reihenfolge der Enumerable-Objekte im Array steht im Einklang mit der Benutzung von einer exponierten Schleife {{jsxref ("Statements / for ... in", "for ... in")}} (oder durch {{jsxref ("Object.keys () ")}}) über die Eigenschaften des Objekts. Die Reihenfolge der nicht-aufzählbar Objekte im Array, und unter den aufzählbare Eigenschaften, ist nicht definiert.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Benutzung_von_Object.getOwnPropertyNames()"><code>Benutzung von Object.getOwnPropertyNames()</code></h3>
+
+<pre class="brush: js">var arr = ['a', 'b', 'c'];
+console.log(Object.getOwnPropertyNames(arr).sort()); // logs '0,1,2,length'
+
+// Array-like object
+var obj = { 0: 'a', 1: 'b', 2: 'c' };
+console.log(Object.getOwnPropertyNames(obj).sort()); // logs '0,1,2'
+
+// Logging property names and values using Array.forEach
+Object.getOwnPropertyNames(obj).forEach(function(val, idx, array) {
+  console.log(val + ' -&gt; ' + obj[val]);
+});
+// logs
+// 0 -&gt; a
+// 1 -&gt; b
+// 2 -&gt; c
+
+// non-enumerable property
+var my_obj = Object.create({}, {
+  getFoo: {
+    value: function() { return this.foo; },
+    enumerable: false
+  }
+});
+my_obj.foo = 1;
+
+console.log(Object.getOwnPropertyNames(my_obj).sort()); // logs 'foo,getFoo'
+</pre>
+
+<p>Wenn Sie nur die aufzählbare Eigenschaften möchten, kann man die Funktion {{jsxref ("Object.keys ()")}} benutzen. Alternativ können auch Schlaufen {{jsxref ("Statements / for ... in", "for ... in")}} verwendet werden (dies gibt nicht nur die aufzählbaren Eigenschaften des Objektes, sondern auch entlang der Prototypkette zurück. Behoben kann diese mit der Methode {{jsxref ("Object.prototype.hasOwnProperty ()", "hasOwnProperty ()" )}}).</p>
+
+<p>Items welche sich im Prototype chain befinden, werden nicht aufgelistet.</p>
+
+<pre class="brush: js">function ParentClass() {}
+ParentClass.prototype.inheritedMethod = function() {};
+
+function ChildClass() {
+  this.prop = 5;
+  this.method = function() {};
+}
+ChildClass.prototype = new ParentClass;
+ChildClass.prototype.prototypeMethod = function() {};
+
+console.log(
+  Object.getOwnPropertyNames(
+    new ChildClass() // ['prop', 'method']
+  )
+);
+</pre>
+
+<h3 id="Nur_unzählige_Eigenschaften">Nur unzählige Eigenschaften</h3>
+
+<p>Es wird die {{jsxref("Array.prototype.filter()")}} Funktion benötigt um alle zählbaren Schlüssel (erhalten mit {{jsxref("Object.keys()")}}) von einer Liste mit allen Schlüsseln (erhalten mit <code>Object.getOwnPropertyNames()</code>) zu vergleichen, welches nur die unzähligen Eigenschaften zurück lässt.</p>
+
+<pre class="brush: js">var target = myObject;
+var enum_and_nonenum = Object.getOwnPropertyNames(target);
+var enum_only = Object.keys(target);
+var nonenum_only = enum_and_nonenum.filter(function(key) {
+  var indexInEnum = enum_only.indexOf(key);
+  if (indexInEnum == -1) {
+    // not found in enum_only keys mean the key is non-enumerable,
+    // so return true so we keep this in the filter
+    return true;
+  } else {
+    return false;
+  }
+});
+
+console.log(nonenum_only);
+</pre>
+
+<h2 id="Notizen">Notizen</h2>
+
+<p>Wenn bei ES5 das Argument der Methode kein primitives Objekt ist, wird der Funktionsaufruf ein {{jsxref("TypeError")}} werfen. In ES6 wird ein nicht-Objekt Argument automatisch in ein Objekt gecasted.</p>
+
+<pre class="brush: js">Object.getOwnPropertyNames('foo');
+// TypeError: "foo" is not an object (ES5 code)
+
+Object.getOwnPropertyNames('foo');
+// ['length', '0', '1', '2']  (ES6 code)
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.4', 'Object.getOwnPropertyNames')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initialdefinition. Implementiert in JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.getownpropertynames', 'Object.getOwnPropertyNames')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basissupport</td>
+   <td>{{CompatChrome("5")}}</td>
+   <td>{{CompatGeckoDesktop("2")}}</td>
+   <td>{{CompatIE("9")}}</td>
+   <td>{{CompatOpera("12")}}</td>
+   <td>{{CompatSafari("5")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basissupport</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="SpiderMonkey-spezifische_Notizen">SpiderMonkey-spezifische Notizen</h2>
+
+<p> </p>
+
+<p>Vor SpiderMonkey 28 {{geckoRelease("28")}}, ignorierte die Funktion <code>Object.getOwnPropertyNames</code> unaufgelöste Eigenschaften eines {{jsxref("Error")}} Objektes. Dieser Fehler wurde in den letzten Versionen behoben ({{bug("724768")}}).</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li>
+ <li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li>
+ <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li>
+ <li>{{jsxref("Object.create()")}}</li>
+ <li>{{jsxref("Object.keys()")}}</li>
+ <li>{{jsxref("Array.forEach()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/object/getprototypeof/index.html b/files/de/web/javascript/reference/global_objects/object/getprototypeof/index.html
new file mode 100644
index 0000000000..cb2c6c0028
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/object/getprototypeof/index.html
@@ -0,0 +1,133 @@
+---
+title: Object.getPrototypeOf()
+slug: Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>Object.getPrototypeOf()</strong></code> Methode gibt den Prototyp (den Wert der internen <code>[[Prototype]]</code> Eigenschaft) des angegebenen Objekts <em>obj</em> zurück</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Object.getPrototypeOf(<var>obj</var>)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>Das Objekt, dessen Prototyp zurückgegeben werden soll.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Der Prototyp des Objekts <em>obj</em> wird zurückgegeben. Wenn keine Eigenschaften vererbt werden, wird {{jsxref("null")}} zurück gegeben.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js">var proto = {};
+var obj = Object.create(proto);
+Object.getPrototypeOf(obj) === proto; // true
+</pre>
+
+<h2 id="Notizen">Notizen</h2>
+
+<p>In ES5 wird eine {{jsxref("TypeError")}} exception geworfen, falls der Parameter obj kein Objekt ist . In ES2015 wird der Parameter <em>obj</em> in ein {{jsxref("Object")}} umgewandelt.</p>
+
+<pre class="brush: js">Object.getPrototypeOf('foo');
+// TypeError: "foo" is not an object (ES5 code)
+Object.getPrototypeOf('foo');
+// String.prototype                  (ES2015 code)
+</pre>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.2', 'Object.getPrototypeOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.getprototypeof', 'Object.getProtoypeOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.getprototypeof', 'Object.getProtoypeOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("5")}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>{{CompatIE("9")}}</td>
+   <td>{{CompatOpera("12.10")}}</td>
+   <td>{{CompatSafari("5")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Opera-spezfische_Notizen">Opera-spezfische Notizen</h2>
+
+<p>Even though older Opera versions don't support <code>Object.getPrototypeOf()</code> yet, Opera supports the non-standard {{jsxref("Object.proto", "__proto__")}} property since Opera 10.50.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li>
+ <li>{{jsxref("Object.setPrototypeOf()")}}</li>
+ <li>{{jsxref("Object.prototype.__proto__")}}</li>
+ <li>John Resig's post on <a class="external" href="http://ejohn.org/blog/objectgetprototypeof/">getPrototypeOf</a></li>
+ <li>{{jsxref("Reflect.getPrototypeOf()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/object/hasownproperty/index.html b/files/de/web/javascript/reference/global_objects/object/hasownproperty/index.html
new file mode 100644
index 0000000000..1d990d3bfa
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/object/hasownproperty/index.html
@@ -0,0 +1,203 @@
+---
+title: Object.prototype.hasOwnProperty()
+slug: Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty
+tags:
+  - JavaScript
+  - Method
+  - Object
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty
+---
+<div>{{JSRef}}</div>
+
+<p>Die Methode <code><strong>hasOwnProperty() </strong></code>gibt einen boolean Wert zurück abhängig von der Existenz des gegebenen <strong>Attributs</strong> in einem <strong>Objekt.</strong></p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>obj</var>.hasOwnProperty(<var>prop</var>)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>Der Name des Attributs auf dessen Existenz im Objekt geprüft wird</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein {{jsxref("Boolean")}} der besagt, ob eine Eigenschaft in dem gegebenen Objekte vorhanden ist oder nicht.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Jedes  untergeordnete Objekt / jeder untergeordneter Wert in einem Objekt trägt die hasOwnProperty Methode mit sich. Diese Methode ermöglicht das Nachfragen eines untergeordneten Wertes/Objekts innerhalb eines Objekts. Anders als die {{jsxref("Operators/in", "in")}} Methode ermöglicht die hasOwnProperty Methode keinen Zugriff auf die Kindeskinder eines Objekts.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_hasOwnProperty_zur_Überprüfung_der_Existenz_eines_Attributs_in_einem_Objekt">Einsatz von hasOwnProperty zur Überprüfung der Existenz eines Attributs in einem Objekt</h3>
+
+<p>Das folgende Beispiel prüft ob das Objekt <code>o</code> ein Attribut mit dem Namen <code>prop</code> beinhaltet.</p>
+
+<pre class="brush: js">o = new Object();
+o.prop = 'exists';
+
+function changeO() {
+  o.newprop = o.prop;
+  delete o.prop;
+}
+
+o.hasOwnProperty('prop');   // gibt true zurück
+changeO();
+o.hasOwnProperty('prop');   // gibt false zurück
+</pre>
+
+<h3 id="Direkter_Nachfolger_vs_Geerbtes_Attribut">Direkter Nachfolger vs Geerbtes Attribut</h3>
+
+<p>Das folgende Beispiel unterscheidet zwischen direkten Kind-Attributen eines Objekts und den Attributen die durch die prototype - Verarbeitung entstehen.</p>
+
+<pre class="brush: js">o = new Object();
+o.prop = 'exists';
+o.hasOwnProperty('prop');             // gibt true zurück
+o.hasOwnProperty('toString');         // gibt false zurück
+o.hasOwnProperty('hasOwnProperty');   // gibt false zurück
+</pre>
+
+<h3 id="Über_die_Eigenschaften_eines_Objektes_iterieren">Über die Eigenschaften eines Objektes iterieren</h3>
+
+<p>Das folgende Beispiel zeigt, wie man über die Eigenschaften eines Objektes iteriert ohne vererbte Eigenschaften auszuführen. Zu Beachten ist, dass eine {{jsxref("Statements/for...in", "for...in")}} Schleife nur über zählbare (enumerable) Eigenschaften iteriert, jedoch sollte man durch diese Einschränkung nicht annehmen, dass nicht-zählbare Eigenschaften gezeigt werden, denn <code>hasOwnProperty</code> selbst kann nur auf zählbare Eigenschaften angewendet werden (wie auch die {{jsxref("Object.getOwnPropertyNames()")}} Funktion):</p>
+
+<pre class="brush: js">var buz = {
+  fog: 'stack'
+};
+
+for (var name in buz) {
+  if (buz.hasOwnProperty(name)) {
+    console.log('this is fog (' + name + ') for sure. Value: ' + buz[name]);
+  }
+  else {
+    console.log(name); // toString or something else
+  }
+}
+</pre>
+
+<h3 id="Einsatz_von_hasOwnProperty_als_Eigenschaftsname">Einsatz von <code>hasOwnProperty</code> als Eigenschaftsname</h3>
+
+<p>JavaScript schützt die den Eigenschaftsnamen <code>hasOwnProperty</code> nicht. Dadurch ist es möglich, dass ein Objekt eine Eigenschaft mit diesem namen hat. Das ermöglicht es eine externe <code>hasOwnProperty</code> Funktion zu benutzen:</p>
+
+<pre class="brush: js">var foo = {
+  hasOwnProperty: function() {
+    return false;
+  },
+  bar: 'Here be dragons'
+};
+
+foo.hasOwnProperty('bar'); // always returns false
+
+// Use another Object's hasOwnProperty and call it with 'this' set to foo
+({}).hasOwnProperty.call(foo, 'bar'); // true
+
+// It's also possible to use the hasOwnProperty property from the Object prototype for this purpose
+Object.prototype.hasOwnProperty.call(foo, 'bar'); // true
+</pre>
+
+<p>Zu beachten ist, dass im letzten Fall kein neues Objekt erstellt wird.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.4.5', 'Object.prototype.hasOwnProperty')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>iOS WebKit<br>
+    <sup><sub>(Safari/Chrome/Firefox/etc)</sub></sup></th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Aufzählbarkeit_und_Zugehörigkeit_von_Eigenschaften">Aufzählbarkeit und Zugehörigkeit von Eigenschaften</a></li>
+ <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
+ <li>{{jsxref("Statements/for...in", "for...in")}}</li>
+ <li>{{jsxref("Operators/in", "in")}}</li>
+ <li><a href="/de/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Vererbung und die Prototypenkette</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/object/index.html b/files/de/web/javascript/reference/global_objects/object/index.html
new file mode 100644
index 0000000000..55eb55035d
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/object/index.html
@@ -0,0 +1,186 @@
+---
+title: Object
+slug: Web/JavaScript/Reference/Global_Objects/Object
+tags:
+  - Constructor
+  - JavaScript
+  - Object
+translation_of: Web/JavaScript/Reference/Global_Objects/Object
+---
+<div>{{JSRef}}</div>
+
+<h2 id="Summary" name="Summary">Zusammenfassung</h2>
+
+<p>Der <code><strong>Object</strong></code>-Konstruktor erstellt ein Objekt</p>
+
+<h2 id="Syntax" name="Syntax">Konstruktor</h2>
+
+<pre class="syntaxbox"><code><code>// Object Initialisierer / Literal
+{ <em>[ NameWertPaar1 [, NameWertPaar2 [, ...NameWertPaarN] ] ]</em> }
+
+// Konstruktor-Form
+</code>new Object( <em>[ Wert ]</em> )</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parameter</h3>
+
+<dl>
+ <dt>NameWertPaar1, NameWertPaar2, ... NameWertPaarN</dt>
+ <dd>Paare von Namen (<code><strong>String</strong></code>) und Werten (eines beliebigen Typs) bei denen der Name durch ein Doppelpunkt vom Wert getrennt ist.</dd>
+</dl>
+
+<dl>
+ <dt>Wert</dt>
+ <dd>Ein Wert eines beliebigen Typs.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p>Der <code>Object</code> Konstruktor erstellt ein Objekt für den übergebenen Wert. Wenn der Wert {{jsxref("null")}} oder {{jsxref("undefined")}} ist, wird ein leeres <code>Object</code> erstellt und zurückgegeben. Ansonsten wird ein Objekt des Typs erstellt, welcher dem übergebenen Wert entspricht. Sollte der Wert bereits ein vom Typ <code>Object</code> sein, wird dieses zurückgeggeben.</p>
+
+<p>Wenn sie nicht als Konstruktor aufgerufen wird (d.h. ohne <code>new</code>), verhält sich die Funktion <code>Object</code> genau so wie <code>new Object()</code>.</p>
+
+<p>Siehe auch den <a href="/de/docs/Web/JavaScript/Reference/Operators/Objekt_Initialisierer">Object Intialisierer / Literal Syntax</a>.</p>
+
+<h2 id="Properties" name="Properties">Eigenschaften des <code>Object</code> Konstruktors</h2>
+
+<dl>
+ <dt><code>Object.length</code></dt>
+ <dd>Hat den Wert 1.</dd>
+ <dt>{{jsxref("Object.prototype")}}</dt>
+ <dd>Erlaubt es neue Eigenschaften zu allen Objekten des Typs Object hinzuzufügen.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Methoden des <code>Object</code> Konstruktors</h2>
+
+<dl>
+ <dt>{{jsxref("Object.assign()")}}</dt>
+ <dd>Kopiert die Werte aller <strong>eigenen</strong>, aufzählbaren Eigenschaften von einem oder mehreren Quellobjekten in ein Zielobjekt.</dd>
+ <dt>{{jsxref("Object.create()")}}</dt>
+ <dd>Erstellt ein neues Objekt mit dem angegebenen Protoyp-Objekt und optionalen Eigenschaften.</dd>
+ <dt>{{jsxref("Object.defineProperty()")}}</dt>
+ <dd>Fügt eine neue Eigenschaft einem bestimmten Objekt hinzu, welche durch Zusatzinformationen beschrieben wird.</dd>
+ <dt>{{jsxref("Object.defineProperties()")}}</dt>
+ <dd>Fügt mehrere Eigenschaften einem bestimmten Objekt hinzu, welche durch Zusatzinformationen beschrieben werden.</dd>
+ <dt>{{jsxref("Object.entries()")}}</dt>
+ <dd>Gibt ein Array zurück, welches alle <strong>eigenen</strong>, aufzählbaren String-Eigenschaften in der Form von <code>[Name, Wert]</code>-Paaren enthält.</dd>
+ <dt>{{jsxref("Object.freeze()")}}</dt>
+ <dd><strong>Friert</strong> ein Objekt <strong>ein</strong>: Die Eigenschaften können nicht mehr geändert oder gelöscht werden.</dd>
+ <dt>{{jsxref("Object.fromEntries()")}}</dt>
+ <dd>Erstellt ein Objekt aus einer Liste von <code>[Name, Wert]</code>-Paaren (kehrt {{jsxref("Object.entries")}} um).</dd>
+ <dt>{{jsxref("Object.getOwnPropertyDescriptor()")}}</dt>
+ <dd>Gibt die Zusatzinformationen einer bestimmten <strong>eigenen</strong> Eigenschaft zurück.</dd>
+ <dt>{{jsxref("Object.getOwnPropertyDescriptors()")}}</dt>
+ <dd>Gibt ein Objekt zurück, welches die Zusatzinformationen aller <strong>eigenen</strong> Eigenschaften enthält.</dd>
+ <dt>{{jsxref("Object.getOwnPropertyNames()")}}</dt>
+ <dd>Gibt ein Array zurück, welches die Namen aller <strong>eigenen</strong>, aufzählbaren und nicht-aufzählbaren Eigenschaften enthält.</dd>
+ <dt>{{jsxref("Object.getOwnPropertySymbols()")}}</dt>
+ <dd>Gibt ein Array zurück, welches die Symbole aller <strong>eigenen</strong> Eigenschaften enthält.</dd>
+ <dt>{{jsxref("Object.getPrototypeOf()")}}</dt>
+ <dd>Gibt den Protoypen des angegebenen Objekts zurück.</dd>
+ <dt>{{jsxref("Object.is()")}}</dt>
+ <dd>Vergleicht ob zwei Werte den gleichen Wert haben.</dd>
+ <dt>{{jsxref("Object.isExtensible()")}}</dt>
+ <dd>Gibt an, ob ein Objekt erweitert werden kann (ob neue Eigenschaften angelegt werden können).</dd>
+ <dt>{{jsxref("Object.isFrozen()")}}</dt>
+ <dd>Gibt an, ob ein Objekt eingefroren ist.</dd>
+ <dt>{{jsxref("Object.isSealed()")}}</dt>
+ <dd>Gibt an, ob ein Objekt versiegelt ist.</dd>
+ <dt>{{jsxref("Object.keys()")}}</dt>
+ <dd>Gibt ein Array zurück, welches die Namen aller <strong>eigenen</strong> aufzählbaren String-Eigenschaften enthält.</dd>
+ <dt>{{jsxref("Object.preventExtensions()")}}</dt>
+ <dd>Verbietet das ein Objekt erweitert werden kann.</dd>
+ <dt>{{jsxref("Object.seal()")}}</dt>
+ <dd>Verbietet das Eigenschaften gelöscht werden können - versiegelt das Objekt.</dd>
+ <dt>{{jsxref("Object.setPrototypeOf()")}}</dt>
+ <dd>Legt den Prototyp fest (z.Bsp. die interne <code>[[Prototype]]</code> Eigenschaft)</dd>
+ <dt>{{jsxref("Object.values()")}}</dt>
+ <dd>Gibt ein Array zurück, welches die Werte aller <strong>eigenen</strong> aufzählbaren String-Eigenschaften enthält.</dd>
+</dl>
+
+<h2 id="Object_instances" name="Object_instances"><code>Object</code> Instanzen und das Prototyp-Objekt</h2>
+
+<p>Alle Objekte in JavaScript stammen von <code>Object</code> ab; alle Objekte bekommen die Methoden und Eigenschaften vom {{jsxref("Object.prototype")}} vererbt, jedoch können sie überschrieben werden. Zum Beispiel können Prototypen andere Kontruktoren die <code>constructor</code>-Eigenschaft überschreiben oder aber ihre eigene <code>toString()</code> Methode implementieren. Änderungen am <code>Object</code> Prototypen wirken sich auch auf alle anderen Objekte aus, es sei denn die Eigenschaften oder Methoden sind entlang der Prototyp-Kette schon überschrieben worden.</p>
+
+<h3 id="Properties_of_Object_instances" name="Properties_of_Object_instances">Eigenschaften</h3>
+
+<div>{{ page('/de/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Attribute') }}</div>
+
+<h3 id="Methods_of_Object_instances" name="Methods_of_Object_instances">Methoden</h3>
+
+<div>{{ page('/de/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Methoden') }}</div>
+
+<h2 id="Eine_Eigenschaft_von_einem_Objekt_löschen">Eine Eigenschaft von einem Objekt löschen</h2>
+
+<p>Es gibt keine Methode von <code>Object</code> selbst, um eine Eigenschaft zu löschen (wie z.Bsp. <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Map/delete">Map.prototype.delete()</a></code>). Um das zu erreichen, muss der <a href="/de/docs/Web/JavaScript/Reference/Operators/delete">delete Operator</a> benutzt werden.</p>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<h3 id="Example.3A_Using_Object_given_undefined_and_null_types" name="Example.3A_Using_Object_given_undefined_and_null_types"><code>Object</code> mit <code>undefined</code> und <code>null</code> Typen nutzen</h3>
+
+<p>Die folgenden Beispiele speichern ein leeres <code>Object</code> in <code>o</code>:</p>
+
+<pre class="brush: js">var o = new Object();
+</pre>
+
+<pre class="brush: js">var o = new Object(undefined);
+</pre>
+
+<pre class="brush: js">var o = new Object(null);
+</pre>
+
+<h3 id="Object_nutzen_um_Boolean-Objekte_zu_erstellen"><code>Object</code> nutzen um  <code>Boolean</code>-Objekte zu erstellen</h3>
+
+<p>Die folgenden Beispiele speichern {{jsxref("Boolean")}}-Objekte in <code>o</code>:</p>
+
+<pre class="brush: js">// das gleiche wie: var o = new Boolean(true);
+var o = new Object(true);
+</pre>
+
+<pre class="brush: js">// das gleiche wie: var o = new Boolean(false);
+var o = new Object(Boolean());
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition.<br>
+    In JavaScript 1.0 implementiert</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2', 'Object')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object-objects', 'Object')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>
+    <p><code>Object.assign</code>, <code>Object.getOwnPropertySymbols</code>, <code>Object.setPrototypeOf</code> und <code>Object.is</code> hinzugefügt</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object-objects', 'Object')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td><code>Object.entries</code>, <code>Object.values</code> und <code>Object.getOwnPropertyDescriptors</code> hinzugefügt.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<p>{{Compat("javascript.builtins.Object")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Operators/Objekt_Initialisierer">Object initializer</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/object/is/index.html b/files/de/web/javascript/reference/global_objects/object/is/index.html
new file mode 100644
index 0000000000..348dbeebe9
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/object/is/index.html
@@ -0,0 +1,120 @@
+---
+title: Object.is()
+slug: Web/JavaScript/Reference/Global_Objects/Object/is
+tags:
+  - ECMAScript 2015
+  - Experimental
+  - Expérimental(2)
+  - Method
+  - Object
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/is
+---
+<div>{{JSRef("Global_Objects", "Object")}}</div>
+
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+
+<p>Die <code><strong>Object.is()</strong></code> Methode entscheidet, ob zwei Werte <a href="/en-US/docs/Web/JavaScript/Guide/Sameness">die gleichen Werte sind</a>.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>var <var>isSame</var> = Object.is(<var>value1</var>, <var>value2</var>);</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parameter</h3>
+
+<dl>
+ <dt><code>value1</code></dt>
+ <dd>Der erste Wert zum vergleichen.</dd>
+ <dt><code>value2</code></dt>
+ <dd>Der zweite Wert zum vergleichen.</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p><span class="short_text" id="result_box" lang="en"><span><code>Object.is()</code> bestimmt, ob zwei Werte <a href="/en-US/docs/Web/JavaScript/Guide/Sameness" title="/en-US/docs/Web/JavaScript/Guide/Sameness"><dfn>gleich sind</dfn></a>. </span></span><span class="short_text" lang="en"><span>Dabei gelten zwei Werte genau dann als gleich, wenn eine der folgenden Bedingungen zutrifft:</span></span></p>
+
+<ul>
+ <li><span class="short_text" lang="en"><span>beide sind <code>undefined</code></span></span></li>
+ <li><span class="short_text" lang="en"><span>beide sind <code>null</code></span></span></li>
+ <li><span class="short_text" lang="en"><span>beide sind <code>true</code> oder beide sind <code>false</code></span></span></li>
+ <li><span class="short_text" lang="en"><span>beide sind Strings mit selber Länge und den selben Zeichen</span></span></li>
+ <li><span class="short_text" lang="en"><span>beide sind das selbe Objekt</span></span></li>
+ <li><span class="short_text" lang="en"><span>beide sind Zahlen und eine der folgenden Bedingungen trifft zu:</span></span>
+  <ul>
+   <li>beide sind <code>+0</code></li>
+   <li>beide sind <code>-0</code></li>
+   <li>beide sind <code>NaN</code></li>
+   <li>beide sind nicht Null, beide sind nicht <code>NaN</code> und beide haben den selben Zahlenwert</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Dies ist <em>nicht</em> das selbe wie der <code>==</code>-Operator. Dieser verwendet verschiedene, situationsabhängige Typ-Umwandlungen auf beiden Seiten bevor auf Gleichheit getestet wird (was z.B. dazu führt, dass der Ausdruck <code>"" == false</code> zu <code>true</code> ausgewertet wird). <code>Object.is</code> hingegen wandelt keinen der beiden Werte um.</p>
+
+<p>Es ist ebenfalls nicht das selbe wie der strikte <code>===</code>-Operator. Dieser – ebenso wie der <code>==</code>-Operator – behandelt zum Beispiel <code>+0</code> und <code>-0</code> als identisch während <code>NaN</code> und <code>NaN</code> als nicht identisch behandelt werden.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js">Object.is('foo', 'foo');     // true
+Object.is(window, window);   // true
+
+Object.is('foo', 'bar');     // false
+Object.is([], []);           // false
+
+var test = { a: 1 };
+Object.is(test, test);       // true
+
+Object.is(null, null);       // true
+
+// Special Cases
+Object.is(0, -0);            // false
+Object.is(-0, -0);           // true
+Object.is(NaN, 0/0);         // true
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p><code>Object.</code> ist eine vorgeschlagene Ergänzung des ECMA-262 Standard; als solcher könnte dieser nicht von allen Browser verstanden werden. Du kannst drum herum arbeiten, indem du den folgenden Code an den Anfang deines Scripts packst. Das erlaubt dir die <code>Object.is Methode</code> zu verwenden, auch wenn es keine eingebaute Unterstützung dafür gibt.</p>
+
+<pre><code>if (!Object.is) {
+  Object.is = function(x, y) {
+    // SameValue algorithm
+    if (x === y) { // Steps 1-5, 7-10
+      // Steps 6.b-6.e: +0 != -0
+      return x !== 0 || 1 / x === 1 / y;
+    } else {
+     // Step 6.a: NaN == NaN
+     return x !== x &amp;&amp; y !== y;
+    }
+  };
+}</code></pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-object.is', 'Object.is')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Object.is")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Sameness">JavaScript Guide: Sameness</a> — ein Vergleich aller drei eingebauten Gleichheitseinrichtungen</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/object/isextensible/index.html b/files/de/web/javascript/reference/global_objects/object/isextensible/index.html
new file mode 100644
index 0000000000..a54bb5f6c4
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/object/isextensible/index.html
@@ -0,0 +1,153 @@
+---
+title: Object.isExtensible()
+slug: Web/JavaScript/Reference/Global_Objects/Object/isExtensible
+tags:
+  - ECMAScript 5
+  - Erweiterbarkeit
+  - JavaScript
+  - Méthode
+  - Object
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/isExtensible
+---
+<div>{{JSRef}}</div>
+
+<p>Die Methode <strong><code>Object.isExtensible()</code></strong> bestimmt, ob ein Objekt erweiterbar ist. Das heißt, es können dem Objekt neue Eigenschaften hinzugefügt werden.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Object.isExtensible(<var>obj</var>)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>Das Objekt, das überprüft werden soll.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein {{jsxref("Boolean")}}, der angibt, ob das übergebene Objekt erweiterbar ist.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Standardmäßig sind Objekte erweiterbar: Es ist möglich, ihnen neue Eigenschaften zuzuweisen und sie dadurch zu verändern. In Engines, die {{jsxref("Object.proto", "__proto__")}} {{deprecated_inline}} unterstützen, kann auch deren __proto__ Eigenschaft geändert werden. Ein Objekt kann mittels {{jsxref("Object.preventExtensions()")}}, {{jsxref("Object.seal()")}} oder {{jsxref("Object.freeze()")}} explizit als nicht-erweiterbar markiert werden.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js">// Neue Objekte sind erweiterbar.
+var empty = {};
+Object.isExtensible(empty); // === true
+
+// ...aber das kann sich ändern.
+Object.preventExtensions(empty);
+Object.isExtensible(empty); // === false
+
+// Versiegelte Objekte sind per Definition nicht erweiterbar.
+var sealed = Object.seal({});
+Object.isExtensible(sealed); // === false
+
+// Eingefrorene Objekte sind ebenfalls per Definition nicht erweiterbar.
+var frozen = Object.freeze({});
+Object.isExtensible(frozen); // === false
+</pre>
+
+<h2 id="Anmerkungen">Anmerkungen</h2>
+
+<p>In ES5 muss das Argument der Methode ein echtes Objekt sein. Ist dies nicht der Fall, wird ein {{jsxref("TypeError")}} geworfen. In ES2015 hingegen wird ein Nicht-Objekt einfach als nicht-erweiterbares Objekt behandelt, sodass von der Methode <code>false </code>zurückgegeben wird.</p>
+
+<pre class="brush: js">Object.isExtensible(1);
+// TypeError: 1 is not an object (ES5 code)
+
+Object.isExtensible(1);
+// false                         (ES2015 code)
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.13', 'Object.isExtensible')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.isextensible', 'Object.isExtensible')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.isextensible', 'Object.isExtensible')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("6")}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatIE("9")}}</td>
+   <td>{{CompatOpera("12")}}</td>
+   <td>{{CompatSafari("5.1")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Zusätzliches_Material">Zusätzliches Material</h2>
+
+<ul>
+ <li>{{jsxref("Object.preventExtensions()")}}</li>
+ <li>{{jsxref("Object.seal()")}}</li>
+ <li>{{jsxref("Object.isSealed()")}}</li>
+ <li>{{jsxref("Object.freeze()")}}</li>
+ <li>{{jsxref("Object.isFrozen()")}}</li>
+ <li>{{jsxref("Reflect.isExtensible()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/object/isfrozen/index.html b/files/de/web/javascript/reference/global_objects/object/isfrozen/index.html
new file mode 100644
index 0000000000..fedcba2572
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/object/isfrozen/index.html
@@ -0,0 +1,173 @@
+---
+title: Object.isFrozen()
+slug: Web/JavaScript/Reference/Global_Objects/Object/isFrozen
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/isFrozen
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Object.isFrozen()</strong></code> gibt an ob ein Objekt {{jsxref("Object.freeze()", "eingefroren", "", 1)}} ist.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-isfrozen.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Object.isFrozen(<var>obj</var>)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>Das Objekt, welches überprüft werden soll.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein {{jsxref("Boolean")}}-Wert, der angibt ob das Objekt eingefroren ist oder nicht.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Ein Objekt gilt dann und nur dann als eingefroren, wenn es nicht {{jsxref("Object.isExtensible()", "erweiterbar", "", 1)}} ist, all seine Eigenschaften nicht konfigurierbar sind und all seine Daten-Eigenschaften (d.h. Eigenschaften die nicht durch Getter oder Setter definiert sind) nicht schreibbar sind.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js">// Ein neues Objekt ist erweiterbar, also nicht eingefroren.
+Object.isFrozen({}); // === false
+
+// An leeres Objekt, das nicht erweiterbar ist,
+// ist sinnlos eingefroren.
+var sinnlos = Object.preventExtensions({});
+Object.isFrozen(sinnlos); // === true
+
+// Ein neues Objekt mit einer einzelnen Eigenschaft, ist auch erweiterbar,
+// ergo nicht eingefroren.
+var eineEigenschaft = { p: 42 };
+Object.isFrozen(eineEigenschaft); // === false
+
+// Das Objekt nicht erweiterbar zu machen, friert es nicht ein,
+// da die Eigenschaft immer nocht konfigurierbar und schreibbar ist.
+Object.preventExtensions(eineEigenschaft);
+Object.isFrozen(eineEigenschaft); // === false
+
+// ...wenn man die Eigenschaft aber löscht,
+// wird das Objekt sinnlos
+delete eineEigenschaft.p;
+Object.isFrozen(eineEigenschaft); // === true
+
+// Ein nicht erweiterbares Objekt, mit einer nicht schreibbaren
+// jedoch konifgurierbaren Eigenschaft gilt als nicht eingefroren.
+var nichtSchreibbar = { e: 'plep' };
+Object.preventExtensions(nichtSchreibbar);
+Object.defineProperty(nichtSchreibbar, 'e', {
+  writable: false
+}); // `e` wird nicht schreibbar
+Object.isFrozen(nichtSchreibbar); // === false
+
+// Wird diese Eigenschaft nicht konfigurierbar,
+// so friert das Objekt ein.
+Object.defineProperty(nichtSchreibbar, 'e', {
+  configurable: false
+}); // `e` wird nicht konfigurierbar
+Object.isFrozen(nichtSchreibbar); // === true
+
+// Ein nicht erweiterbares Objekt, mit einer nicht konfigurierbaren
+// jedoch schreibbaren Eigenschaft gilt ebenfalls als nicht eingefroren.
+var nichtKonfigurierbar = { release: 'the kraken!' };
+Object.preventExtensions(nichtKonfigurierbar);
+Object.defineProperty(nichtKonfigurierbar, 'release', {
+  configurable: false
+});
+Object.isFrozen(nichtKonfigurierbar); // === false
+
+// Wird diese Eigenschaft nicht schreibbar,
+// so friert das Objekt ein.
+Object.defineProperty(nichtKonfigurierbar, 'release', {
+  writable: false
+});
+Object.isFrozen(nichtKonfigurierbar); // === true
+
+// Ein nicht erweiterbares Objekt, mit einer konfigurierbaren
+// dynamischen Eigenschaft (get/set) ist nicht eingefroren.
+var dynamisch = { get food() { return 'yum'; } };
+Object.preventExtensions(dynamisch);
+Object.isFrozen(dynamisch); // === false
+
+// ABER, wird diese Eigenschaft nicht konfigurierbar,
+// friert das Objekt ein.
+Object.defineProperty(dynamisch, 'food', {
+  configurable: false
+});
+Object.isFrozen(dynamisch); // === true
+
+// Am Ende ist die einfachste Methode um ein Objekt einzufrieren,
+// Object.freeze aufzurufen.
+var eingefroren = { 1: 81 };
+Object.isFrozen(eingefroren); // === false
+Object.freeze(eingefroren);
+Object.isFrozen(eingefroren); // === true
+
+// Per Definition ist ein eingefrorenes Objekt nicht erweiterbar.
+Object.isExtensible(eingefroren); // === false
+
+// Und es ist ebenfalls versiegelt.
+Object.isSealed(eingefroren); // === true
+</pre>
+
+<h2 id="Anmerkungen">Anmerkungen</h2>
+
+<p>In ES5, wirft die Methode einen {{jsxref("TypeError")}}, wenn der Parameter kein primitives Objekt ist.</p>
+
+<p>In ES2015 wird der Parameter, sollte er kein primitives Objekt sein, als bereits eingefrorenes Objekt betrachtet und gibt dementsprechend einfach <code>true</code> zurück.</p>
+
+<pre class="brush: js">Object.isFrozen(1);
+// TypeError: 1 is not an object (ES5 code)
+
+Object.isFrozen(1);
+// true                          (ES2015 code)
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.12', 'Object.isFrozen')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initiale Definition. In JavaScript 1.8.5 implementiert.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.isfrozen', 'Object.isFrozen')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.isfrozen', 'Object.isFrozen')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Object.isFrozen")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Object.freeze()")}}</li>
+ <li>{{jsxref("Object.preventExtensions()")}}</li>
+ <li>{{jsxref("Object.isExtensible()")}}</li>
+ <li>{{jsxref("Object.seal()")}}</li>
+ <li>{{jsxref("Object.isSealed()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/object/keys/index.html b/files/de/web/javascript/reference/global_objects/object/keys/index.html
new file mode 100644
index 0000000000..5fda29ca15
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/object/keys/index.html
@@ -0,0 +1,206 @@
+---
+title: Object.keys()
+slug: Web/JavaScript/Reference/Global_Objects/Object/keys
+tags:
+  - ECMAScript5
+  - JavaScript
+  - JavaScript 1.8.5
+  - Method
+  - Object
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/keys
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>Object.keys()</code></strong> Funktion gibt ein Array zurück, das die eigenen aufzählbaren Eigenschaften des Objektes in der selben Reihenfolge enthält wie in der {{jsxref("Statements/for...in", "for...in")}} Schleife (der Unterschied zwischen diesen beiden Varianten besteht darin, dass eine for-in Schleife auch die aufzählbaren Eigenschaften der Prototypen beinhaltet).</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Object.keys(<var>obj</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parameter</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>ein Objekt, dessen aufzählbare eigene Eigenschaften zurückgegeben werden sollen</dd>
+</dl>
+
+<h3 id="Description" name="Description">Rückgabewert</h3>
+
+<p>Ein Array mit Strings, die alle aufzählbare Eigenschaften des gegebenen Objektes repräsentieren.</p>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p><code>Object.keys()</code> liefert ein Array, dessen Elemente Strings sind, welche die aufzählbaren Eigenschaften des Objekts respräsentieren. Die Reihenfolge der Eigenschaften ist die selbe wie bei einer for-in Schleife über das Objekt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js">var arr = ['a', 'b', 'c'];
+console.log(Object.keys(arr)); // console: ['0', '1', '2']
+
+// array like object
+var obj = { 0: 'a', 1: 'b', 2: 'c' };
+console.log(Object.keys(obj)); // console: ['0', '1', '2']
+
+// array like object with random key ordering
+var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
+console.log(Object.keys(an_obj)); // console: ['2', '7', '100']
+
+// getFoo is property which isn't enumerable
+var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } });
+my_obj.foo = 1;
+
+console.log(Object.keys(my_obj)); // console: ['foo']</pre>
+
+<p><span style="line-height: 1.5;">Die Liste aller eigenen aufzählbaren und nicht-aufzählbaren Eigenschaften eines Objekt erhält man mit der Funktion {{jsxref("Object.getOwnPropertyNames()")}}.</span></p>
+
+<h2 id="Notes" name="Notes">Notizen</h2>
+
+<p>In ES5 wird, wenn das Argument für die Funktion kein Objekt ist, ein {{jsxref("TypeError")}} Fehler geworfen. In ES2015 wird das Argument, welches kein Objekt ist, in ein Objekt umgewandelt, das aber nicht mehr dem eigentlichen Wert entspricht (siehe Beispiel).</p>
+
+<pre class="brush: js">&gt; Object.keys("foo")
+TypeError: "foo" is not an object // ES5 code
+
+&gt; Object.keys("foo")
+["0", "1", "2"]                   // ES2015 code
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Kopieren Sie das folgende Code-Schnipsel, um <code>Object.keys()</code> auch in älteren Umgebungen ohne native Unterstützung nutzen zu können:</p>
+
+<pre class="brush: js">// From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
+if (!Object.keys) {
+  Object.keys = (function() {
+    'use strict';
+    var hasOwnProperty = Object.prototype.hasOwnProperty,
+        hasDontEnumBug = !({ toString: null }).propertyIsEnumerable('toString'),
+        dontEnums = [
+          'toString',
+          'toLocaleString',
+          'valueOf',
+          'hasOwnProperty',
+          'isPrototypeOf',
+          'propertyIsEnumerable',
+          'constructor'
+        ],
+        dontEnumsLength = dontEnums.length;
+
+    return function(obj) {
+      if (typeof obj !== 'function' &amp;&amp; (typeof obj !== 'object' || obj === null)) {
+        throw new TypeError('Object.keys called on non-object');
+      }
+
+      var result = [], prop, i;
+
+      for (prop in obj) {
+        if (hasOwnProperty.call(obj, prop)) {
+          result.push(prop);
+        }
+      }
+
+      if (hasDontEnumBug) {
+        for (i = 0; i &lt; dontEnumsLength; i++) {
+          if (hasOwnProperty.call(obj, dontEnums[i])) {
+            result.push(dontEnums[i]);
+          }
+        }
+      }
+      return result;
+    };
+  }());
+}
+</pre>
+
+<p>Bitte beachten Sie, dass der obenstehende Code auch die Namen der nicht-aufzählbaren Eigenschaften im IE7 (und evtl. auch im IE8) berücksichtigt, wenn ein Objekt aus einem anderen Fenster übergeben wird.</p>
+
+<p>Ein einfaches Polyfill finden Sie außerdem hier: <a href="http://tokenposts.blogspot.com.au/2012/04/javascript-objectkeys-browser.html">Javascript - Object.keys Browser Compatibility</a>.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommantar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.14', 'Object.keys')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-object.keys', 'Object.keys')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.keys', 'Object.keys')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatChrome("5")}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatIE("9")}}</td>
+   <td>{{CompatOpera("12")}}</td>
+   <td>{{CompatSafari("5")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li>
+ <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li>
+ <li>{{jsxref("Object.create()")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
+ <li>{{jsxref("Object.values()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Object.entries()")}} {{experimental_inline}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/object/observe/index.html b/files/de/web/javascript/reference/global_objects/object/observe/index.html
new file mode 100644
index 0000000000..df68348028
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/object/observe/index.html
@@ -0,0 +1,199 @@
+---
+title: Object.observe()
+slug: Web/JavaScript/Reference/Global_Objects/Object/observe
+tags:
+  - Beobachter
+  - Data-Binding
+  - Deprecated
+  - JavaScript
+  - Méthode
+  - Object
+  - Veraltet
+translation_of: Archive/Web/JavaScript/Object.observe
+---
+<div>{{JSRef}} {{obsolete_header}}</div>
+
+<p>Die <strong><code>Object.observe()</code></strong> Methode kann genutzt werden, um auf Änderungen an einem Objekt asynchron zu reagieren. Sie bietet einen Stream der Änderungen in der Reihenfolge ihres Auftretens. Da die Methode veraltet ist und Beschränkungen aufweist, sollte lieber ein {{jsxref("Proxy")}} Objekt verwendet werden.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Object.observe(<var>obj</var>, <var>callback</var>[, <var>acceptList</var>])</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>Das Objekt, das beobachtet werden soll.</dd>
+ <dt><code>callback</code></dt>
+ <dd>Eine Callback-Funktion, die jedes mal aufgerufen wird, wenn eine Änderung am Objekt vorgenommen wird
+ <dl>
+  <dt><code>changes</code></dt>
+  <dd>Ein Array von Objekten, die die vorgenommenen Änderungen repräsentieren. Die Eigenschaften der Objekte sind jeweils
+  <ul>
+   <li><strong><code>name</code></strong>: Der Name der Eigenschaft, welche geändert wurde</li>
+   <li><strong><code>object</code></strong>: Das (bereits) geänderte Objekt.</li>
+   <li><strong><code>type</code></strong>: Ein String der Angibt, welcher Art die vorgenommene Änderung war. Entspricht <code>"add"</code>, <code>"update"</code>, oder <code>"delete"</code>.</li>
+   <li><strong><code>oldValue</code></strong>: Existiert nur, wenn der type <code>"update"</code> oder <code>"delete"</code> ist. Der ursprüngliche Wert vor der Änderung.</li>
+  </ul>
+  </dd>
+ </dl>
+ </dd>
+ <dt><code>acceptList</code></dt>
+ <dd>Eine Liste von Änderungstypen die für das gegebene Objekt und jeweilige Callback beobachtet werden sollen. Standardmäßig <code>["add", "update", "delete", "reconfigure", "setPrototype", "preventExtensions"]</code> .</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p><code>callback</code> wird jedes mal aufgerufen, wenn das <code>obj</code> geändert wird. Die Funktion erhält dabei die Liste aller Änderungen in chronologischer Reihenfolge ihres Auftretens.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Ausgabe_aller_sechs_Änderungsarten">Ausgabe aller sechs Änderungsarten</h3>
+
+<pre class="brush: js">var obj = {
+  foo: 0,
+  bar: 1
+};
+
+Object.observe(obj, function(changes) {
+  console.log(changes);
+});
+
+obj.baz = 2;
+// [{name: 'baz', object: &lt;obj&gt;, type: 'add'}]
+
+obj.foo = 'hello';
+// [{name: 'foo', object: &lt;obj&gt;, type: 'update', oldValue: 0}]
+
+delete obj.baz;
+// [{name: 'baz', object: &lt;obj&gt;, type: 'delete', oldValue: 2}]
+
+Object.defineProperty(obj, 'foo', {writable: false});
+// [{name: 'foo', object: &lt;obj&gt;, type: 'reconfigure'}]
+
+Object.setPrototypeOf(obj, {});
+// [{name: '__proto__', object: &lt;obj&gt;, type: 'setPrototype', oldValue: &lt;prototype&gt;}]
+
+Object.seal(obj);
+// [
+//   {name: 'foo', object: &lt;obj&gt;, type: 'reconfigure'},
+//   {name: 'bar', object: &lt;obj&gt;, type: 'reconfigure'},
+//   {object: &lt;obj&gt;, type: 'preventExtensions'}
+// ]
+</pre>
+
+<h3 id="Data_Binding">Data Binding</h3>
+
+<pre class="brush: js">// A user model
+var user = {
+  id: 0,
+  name: 'Brendan Eich',
+  title: 'Mr.'
+};
+
+// Create a greeting for the user
+function updateGreeting() {
+  user.greeting = 'Hello, ' + user.title + ' ' + user.name + '!';
+}
+updateGreeting();
+
+Object.observe(user, function(changes) {
+  changes.forEach(function(change) {
+    // Any time name or title change, update the greeting
+    if (change.name === 'name' || change.name === 'title') {
+      updateGreeting();
+    }
+  });
+});
+</pre>
+
+<h3 id="Eigens_definierter_Änderungstyp">Eigens definierter Änderungstyp</h3>
+
+<pre class="brush: js">// A point on a 2D plane
+var point = {x: 0, y: 0, distance: 0};
+
+function setPosition(pt, x, y) {
+  // Performing a custom change
+  Object.getNotifier(pt).performChange('reposition', function() {
+    var oldDistance = pt.distance;
+    pt.x = x;
+    pt.y = y;
+    pt.distance = Math.sqrt(x * x + y * y);
+    return {oldDistance: oldDistance};
+  });
+}
+
+Object.observe(point, function(changes) {
+  console.log('Distance change: ' + (point.distance - changes[0].oldDistance));
+}, ['reposition']);
+
+setPosition(point, 3, 4);
+// Distance change: 5
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p><a href="https://github.com/arv/ecmascript-object-observe">Strawman proposal for ECMAScript 7</a>.</p>
+
+<h2 id="Browserunterstützung">Browserunterstützung</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("36")}}</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [2]</td>
+   <td>{{CompatOpera("23")}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome("36")}}</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [2]</td>
+   <td>{{CompatOpera("23")}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1]: See {{bug(800355)}}</p>
+
+<p>[2]: See relevant <a href="https://dev.modern.ie/platform/status/objectobserve/">MS Edge platform status entry</a></p>
+
+<h2 id="Siehe_Auch">Siehe Auch</h2>
+
+<ul>
+ <li>{{jsxref("Object.unobserve()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Array.observe()")}} {{experimental_inline}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/object/proto/index.html b/files/de/web/javascript/reference/global_objects/object/proto/index.html
new file mode 100644
index 0000000000..6c085634e7
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/object/proto/index.html
@@ -0,0 +1,196 @@
+---
+title: Object.prototype.__proto__
+slug: Web/JavaScript/Reference/Global_Objects/Object/proto
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/proto
+---
+<div class="warning">
+<p><strong>Achtung:</strong> Das Ändern des <code>[[Prototype]]</code> von einem Objekt, in der Art wie moderne JavaScript Engines den Zugriff auf Eigenschaften optimieren, ist eine sehr langsame Operation - in <strong><em>jedem</em></strong> Browser und JavaScript-Engine. Die Auswirkungen auf die Perfomance der veränderten Vererbung sind subtil und weit verstreut und sind nicht einfach auf die Zeit des Zugriffs von <code>obj.__proto__ = ...</code> Ausdruck limitiert, sondern können sich auf jeden Code erstrecken, der Zugriff auf ein Objekt hat, dessen <code>[[Prototype]]</code> geändert wurde. Wenn du dir um die Perfomance sorgen machst, dann solltest du das Setzen des <code>[[Prototype]]</code> auf ein Objekt vermeiden. Stattdessen kannst du ein neues Objekt mit dem gewünschten <code>[[Prototype]]</code> mit {{jsxref("Object.create()")}} erstellen.</p>
+</div>
+
+<div class="warning">
+<p><strong>Achtung:</strong> Während <code>Object.prototype.__proto__</code> von den meisten Browsern unterstützt wird, ist seine Existenz und exaktes Verhalten nur in der ECMAScript 2015 Spezifikation als Vermächtnis-Funktion standardisiert, um die Kompatibilität für Web-Browser zu gewährleisten. Für bessere Unterstützung wird stattdessen empfohlen {{jsxref("Object.getPrototypeOf()")}} zu nutzen.</p>
+</div>
+
+<div>{{JSRef}}</div>
+
+<p>Die <code>__proto__</code> Eigenschaft von {{jsxref("Object.prototype")}} ist eine Zugriffs-Eigenschaft (ein Erhalten- und Setzen-Funktion), welche den internen <code>[[Prototype]]</code> (entweder ein Objekt oder {{jsxref("Global_Objects/null", "null")}}) des Objektes, auf das zugegriffen wird, freilegt.</p>
+
+<p>Die Nutzung von <code>__proto__</code> ist umstritten und wird nicht mehr empfohlen. Es war niemals ein Originalteil<em> </em>in der EcmaScript Sprach-Spezifikation, doch haben moderne Browser entschieden es trotzdem zu implementieren. Erst vor kurzem wurde die <code>__proto__</code> Eigenschaft als Standard in die ECMAScript 2015 Sprach-Spezifikation aufgenommen, um die Kompatibiliät von modernen Web-Browsern sicherzustellen, sodass es in der Zukunft unterstützt wird. Es ist veraltet zu Gunsten von {{jsxref("Object.getPrototypeOf")}}/{{jsxref("Reflect.getPrototypeOf")}} und {{jsxref("Object.setPrototypeOf")}}/{{jsxref("Reflect.setPrototypeOf")}} (obgleich das Setzen des <code>[[Prototype]]</code> eines Objektes immer noch eine langsame Operation ist und daher vermieden werden sollte, wenn Performance eine Rolle spielt).</p>
+
+<p>Die <code>__proto__</code> Eigenschaft kann auch in einer Objekt-Literal-Definition verwendet werden, um das Objekt [[Prototyp]] bei der Erstellen zu setzen - als Alternative zu {{jsxref("Object.create()")}}. See: <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer / literal syntax</a>.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">var Circle = function () {};
+var shape = {};
+var circle = new Circle();
+
+// Setzt den Objekt Prototypen.
+// DEPRECATED. Dies ist nur eine beispielhafte Verwendung und sollte NICHT in produktivem Code verwendet werden.
+shape.__proto__ = circle;
+
+// Liefert den Objekt Prototypen zurück
+console.log(shape.__proto__ === circle); // true
+</pre>
+
+<pre class="brush: js">var shape = function () {
+};
+var p = {
+    a: function () {
+        console.log('aaa');
+    }
+};
+shape.prototype.__proto__ = p;
+
+var circle = new shape();
+
+circle.a();//aaa
+
+console.log(shape.prototype === circle.__proto__);//true
+
+//oder
+
+var shape = function () {
+};
+var p = {
+    a: function () {
+        console.log('a');
+    }
+};
+
+var circle = new shape();
+circle.__proto__ = p;
+
+
+circle.a(); //  a
+
+console.log(shape.prototype === circle.__proto__);//false
+
+//oder
+
+function test() {
+}
+test.prototype.myname = function () {
+    console.log('myname');
+
+}
+var a = new test()
+
+console.log(a.__proto__ === test.prototype);//true
+
+a.myname();//myname
+
+
+//oder
+
+var fn = function () {
+};
+fn.prototype.myname = function () {
+    console.log('myname');
+}
+
+var obj = {
+    __proto__: fn.prototype
+};
+
+
+obj.myname();//myname
+</pre>
+
+<p>Anmerkung: das sind zwei Unterstriche, gefolgt von den fünf Zeichen "Proto", gefolgt von zwei weiteren Unterstrichen.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>The <code>__proto__</code> getter function exposes the value of the internal <code>[[Prototype]]</code> of an object. For objects created using an object literal, this value is {{jsxref("Object.prototype")}}. For objects created using array literals, this value is {{jsxref("Array.prototype")}}. For functions, this value is {{jsxref("Function.prototype")}}. For objects created using <code>new fun</code>, where <code>fun</code> is one of the built-in constructor functions provided by JavaScript ({{jsxref("Array")}}, {{jsxref("Boolean")}}, {{jsxref("Date")}}, {{jsxref("Number")}}, {{jsxref("Object")}}, {{jsxref("String")}}, and so on — including new constructors added as JavaScript evolves), this value is always <code>fun.prototype</code>. For objects created using <code>new fun</code>, where <code>fun</code> is a function defined in a script, this value is the value of <code>fun.prototype</code>. (That is, if the constructor didn't return an other object explicitly, or the <code>fun.prototype</code> has been reassigned since the instance was created).</p>
+
+<p>The <code>__proto__</code> setter allows the <code>[[Prototype]]</code> of an object to be mutated. The object must be extensible according to {{jsxref("Object.isExtensible()")}}: if it is not, a {{jsxref("Global_Objects/TypeError", "TypeError")}} is thrown. The value provided must be an object or {{jsxref("Global_Objects/null", "null")}}. Providing any other value will do nothing.</p>
+
+<p>To understand how prototypes are used for inheritance, see guide article <a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">Inheritance and the prototype chain</a>.</p>
+
+<p>The <code>__proto__</code> property is a simple accessor property on {{jsxref("Object.prototype")}} consisting of a getter and setter function. A property access for <code>__proto__</code> that eventually consults {{jsxref("Object.prototype")}} will find this property, but an access that does not consult {{jsxref("Object.prototype")}} will not find it. If some other <code>__proto__</code> property is found before {{jsxref("Object.prototype")}} is consulted, that property will hide the one found on {{jsxref("Object.prototype")}}.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-additional-properties-of-the-object.prototype-object', 'Object.prototype.__proto__')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Included in the (normative) annex for additional ECMAScript legacy features for Web browsers (note that the specification codifies what is already in implementations).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-additional-properties-of-the-object.prototype-object', 'Object.prototype.__proto__')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basis Unterstützung</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatIE("11")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basis Unterstützung</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Kompatibiliäts_Notizen">Kompatibiliäts Notizen</h2>
+
+<p>Während die ECMAScript 2015-Spezifikation vorschreibt, dass die Unterstützung für <code>__proto__</code> nur für Webbrowser erforderlich ist (obwohl sie bestimmend sind), können andere Umgebungen sie auch für den Gebrauch von Benutzern unterstützen</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li>
+ <li>{{jsxref("Object.getPrototypeOf()")}}</li>
+ <li>{{jsxref("Object.setPrototypeOf()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/object/prototype/index.html b/files/de/web/javascript/reference/global_objects/object/prototype/index.html
new file mode 100644
index 0000000000..71a504f6dd
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/object/prototype/index.html
@@ -0,0 +1,219 @@
+---
+title: Object.prototype
+slug: Web/JavaScript/Reference/Global_Objects/Object/prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Object
+---
+<div>{{JSRef}}</div>
+
+<p>Das <code><strong>Object.prototype</strong></code> Attribut repräsentiert das Prototype Objekt von {{jsxref("Object")}}.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Alle Objekte in JavaScript stammen von {{jsxref("Object")}}; alle Objekte erben Methoden und Attribute von <code>Object.prototype</code>, wobei diese  überschrieben werden können (mit Ausnahme von Objekten mit einem <code>null-</code>Prototyp, sprich <code>Object.create(null)</code>). Die Prototypen anderer Konstruktoren zum Beispiel, überschreiben das <code>constructor</code> Attribut und stellen ihre eigenen Methoden zur Verfügung {{jsxref("Object.prototype.toString()", "toString()")}}. Änderungen am  <code>Object</code> prototype Objekt werden an alle Objekte weitergeleitet, solange die betroffenen Attribute und Methoden nicht zuvor in der Kette der Prototypen überschrieben wurden.</p>
+
+<h2 id="Attribute">Attribute</h2>
+
+<dl>
+ <dt>{{jsxref("Object.prototype.constructor")}}</dt>
+ <dd>Die Funktion, die den Prototypen eines Objekts erstellt.</dd>
+ <dt>{{jsxref("Object.prototype.__proto__")}} {{non-standard_inline}}</dt>
+ <dd>Zeigt auf das Objekt, das als bei der Initialisierung des Objektes als Prototyp diente.</dd>
+ <dt>{{jsxref("Object.prototype.__noSuchMethod__")}} {{non-standard_inline}}</dt>
+ <dd>Erlaubt das Erstellen einer Funktion, die dann ausgeführt wird, wenn ein undefiniertes Objekt als Methode aufgerufen wird.</dd>
+ <dt><s class="obsoleteElement">{{jsxref("Object.prototype.count","Object.prototype.__count__")}} {{obsolete_inline}}</s></dt>
+ <dd><s class="obsoleteElement">Wurde benutzt um die Anzahl der aufzählbaren Attribute direkt durch das Objekt zurückzugeben; mittlerweile entfernt.</s></dd>
+ <dt><s class="obsoleteElement">{{jsxref("Object.prototype.parent","Object.prototype.__parent__")}} {{obsolete_inline}}</s></dt>
+ <dd><s class="obsoleteElement">Wurde benutzt um auf den Kontext eines Objektes zu verweisen; mittlerweile entfernt.</s></dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<dl>
+ <dt>{{jsxref("Object.prototype.__defineGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Verknüpft eine Funktion mit einem Attribut, das, wenn darauf zugegriffen wird eine Funktion ausführt und deren Rückgabewert zurück gibt.</dd>
+ <dt>{{jsxref("Object.prototype.__defineSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Verknüpft eine Funktion mit einem Attribut, das, wenn dieses gesetzt werden soll, eine Funktion ausführt, die das Attribut modifiziert.</dd>
+ <dt>{{jsxref("Object.prototype.__lookupGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Gibt die Funktion zurück, die mit dem spezifizierten Attribut über die Methode {{jsxref("Object.prototype.__defineGetter__()", "__defineGetter__()")}} verknüpft ist.</dd>
+ <dt>{{jsxref("Object.prototype.__lookupSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Gibt die Funktion zurück, die mit dem spezifizierten Attribut über die Methode {{jsxref("Object.prototype.__defineSetter__()", "__defineSetter__()")}} verknüpft ist.</dd>
+ <dt>{{jsxref("Object.prototype.hasOwnProperty()")}}</dt>
+ <dd>Gibt einen Boolean Wert zurück, der anzeigt, ob ein Attribut ein direktes Attribut dieses Objekts ist, oder über Vererbung durch einen Prototypen hinzugefügt wurde.</dd>
+ <dt>{{jsxref("Object.prototype.isPrototypeOf()")}}</dt>
+ <dd>Gibt einen Boolean Wert zurück, der anzeigt, ob das spezifizierte Objekt in der Prototyp-Kette des Objekts, das diese Funktion aufruft, enthalten ist.</dd>
+ <dt>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</dt>
+ <dd>Gibt einen Boolean Wert zurück, der anzeigt, ob das interne <a href="/en-US/docs/Web/JavaScript/Data_structures#Properties">ECMAScript [[Enumerable]] attribute</a> gesetzt ist.</dd>
+ <dt>{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}</dt>
+ <dd>Liefert einen String zurück, der die Quelle eines Objekt-Literals enthält, und das Objekt darstellt, das diese Funktion aufruft; man kann diesen Wert benutzen, um ein neues Objekt zu erstellen.</dd>
+ <dt>{{jsxref("Object.prototype.toLocaleString()")}}</dt>
+ <dd>Ruft {{jsxref("Object.toString", "toString()")}} auf.</dd>
+ <dt>{{jsxref("Object.prototype.toString()")}}</dt>
+ <dd>Gibt eine String-Darstellung des Objekts zurück.</dd>
+ <dt>{{jsxref("Object.prototype.unwatch()")}} {{non-standard_inline}}</dt>
+ <dd>Entfernt einen Kontrollpunkt von einem Attribut des Objekts.</dd>
+ <dt>{{jsxref("Object.prototype.valueOf()")}}</dt>
+ <dd>Gibt den primitiven Wert des spezifizierten Objekts zurück.</dd>
+ <dt>{{jsxref("Object.prototype.watch()")}} {{non-standard_inline}}</dt>
+ <dd>Fügt einem Attribut des Objekts einen Kontrollpunkt hinzu.</dd>
+ <dt><s class="obsoleteElement">{{jsxref("Object.prototype.eval()")}} {{obsolete_inline}}</s></dt>
+ <dd>Wurde genutzt, um einen String bestehend aus JavaScript Code, im Kontext des aktuellen Objekts auszuwerten; wurde entfernt;</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Weil JavaScript keine klassischen Sub-Klassen-Funktionalität hat, sind Prototypen ein guter Weg, um "Base Class" Objekte mit bestimmten Funktionen zu erstellen, die als Objekte fungieren. Zum Beispiel:</p>
+
+<pre class="brush: js">var Person = function() {
+  this.canTalk = true;
+};
+
+Person.prototype.greet = function() {
+  if (this.canTalk) {
+    console.log('Hi, I am ' + this.name);
+  }
+};
+
+var Employee = function(name, title) {
+  Person.call(this);
+  this.name = name;
+  this.title = title;
+};
+
+Employee.prototype = Object.create(Person.prototype);
+Employee.prototype.constructor = Employee;
+
+Employee.prototype.greet = function() {
+  if (this.canTalk) {
+    console.log('Hi, I am ' + this.name + ', the ' + this.title);
+  }
+};
+
+var Customer = function(name) {
+  Person.call(this);
+  this.name = name;
+};
+
+Customer.prototype = Object.create(Person.prototype);
+Customer.prototype.constructor = Customer;
+
+var Mime = function(name) {
+  Person.call(this);
+  this.name = name;
+  this.canTalk = false;
+};
+
+Mime.prototype = Object.create(Person.prototype);
+Mime.prototype.constructor = Mime;
+
+var bob = new Employee('Bob', 'Builder');
+var joe = new Customer('Joe');
+var rg = new Employee('Red Green', 'Handyman');
+var mike = new Customer('Mike');
+var mime = new Mime('Mime');
+
+bob.greet();
+// Hi, I am Bob, the Builder
+
+joe.greet();
+// Hi, I am Joe
+
+rg.greet();
+// Hi, I am Red Green, the Handyman
+
+mike.greet();
+// Hi, I am Mike
+
+mime.greet();
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.1', 'Object.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.prototype', 'Object.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.prototype', 'Object.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">Introduction to Object-Oriented JavaScript</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/object/tosource/index.html b/files/de/web/javascript/reference/global_objects/object/tosource/index.html
new file mode 100644
index 0000000000..d7c7bcf93a
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/object/tosource/index.html
@@ -0,0 +1,169 @@
+---
+title: Object.prototype.toSource()
+slug: Web/JavaScript/Reference/Global_Objects/Object/toSource
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/toSource
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>Die <strong><code>toSource()</code></strong> Methode liefert einen String der den Quellcode des Objekts representiert.</p>
+
+<pre class="syntaxbox"><code>Object.toSource();
+<var>obj</var>.toSource();
+</code></pre>
+
+<h3 id="Zurückgelieferter_Wert">Zurückgelieferter Wert</h3>
+
+<p>Ein String der den Quellcode des Objekts representiert.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>toSource()</code> Methode liefer die folgenden Werte:</p>
+
+<p>Für das eingebaute {{jsxref("Object")}} Objekt, <code>liefert toSource() den folgenden String, welcher angibt, dass der Quellcode nicht verfügbar ist.</code></p>
+
+<ul>
+ <li>
+  <pre class="brush: js">function Object() {
+    [native code]
+}
+</pre>
+ </li>
+ <li>Für instanzen von {{jsxref("Object")}}, liefert <code>toSource()</code> einen String der den Sourcecode representiert.</li>
+</ul>
+
+<p><code>toSource()</code> kann während der Entwicklung aufgerufen werden um die Inhalte eines Objekts zu inspizieren.</p>
+
+<h3 id="Überschreiben_der_toSource()_Methode">Überschreiben der toSource() Methode</h3>
+
+<p>Es ist sicher die toSource() Methode zu überschreiben. Zum Beispiel:</p>
+
+<pre class="brush: js">function Person(name) {
+  this.name = name;
+}
+
+Person.prototype.toSource = function Person_toSource() {
+  return 'new Person(' + uneval(this.name) + ')';
+};
+
+console.log(new Person('Joe').toSource()); // ---&gt; new Person("Joe")
+</pre>
+
+<h3 id="Eingebaute_toSource()_Methoden">Eingebaute toSource() Methoden</h3>
+
+<p>Jeder Kern-JavaScript Typ hat seine eigene t<code>oSource()</code> Methode. Diese sind:</p>
+
+<ul>
+ <li>{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}} — {{jsxref("Array")}} Objekt.</li>
+ <li>{{jsxref("Boolean.prototype.toSource()")}} {{non-standard_inline}} — {{jsxref("Boolean")}} Objekt.</li>
+ <li>{{jsxref("Date.prototype.toSource()")}} {{non-standard_inline}} — {{jsxref("Date")}} Objekt.</li>
+ <li>{{jsxref("Function.prototype.toSource()")}} {{non-standard_inline}} — {{jsxref("Function")}} Objekt.</li>
+ <li>{{jsxref("Number.prototype.toSource()")}} {{non-standard_inline}} — {{jsxref("Number")}} Objekt.</li>
+ <li>{{jsxref("RegExp.prototype.toSource()")}} {{non-standard_inline}} — {{jsxref("RegExp")}} Objekt.</li>
+ <li>{{jsxref("SIMD.toSource()", "SIMD.%type%.prototype.toSource()")}} {{non-standard_inline}} — {{jsxref("SIMD")}} Objekt.</li>
+ <li>{{jsxref("String.prototype.toSource()")}} {{non-standard_inline}} — {{jsxref("String")}} Objekt.</li>
+ <li>{{jsxref("Symbol.prototype.toSource()")}} {{non-standard_inline}} — {{jsxref("Symbol")}} Objekt.</li>
+ <li><code>Math.toSource()</code> — Liefert den String "Math".</li>
+</ul>
+
+<h3 id="Limits_bei_zyklischen_Objekten">Limits bei zyklischen Objekten</h3>
+
+<p>Im Falle, dass Objekte auf sich selbst referenzieren, z.B.: eine zyklisch verbundene Liste oder ein Baum der beide wege durchquert, erstellt <code>toSource()</code> nicht eine neue Selbst-Referenz. Dies passiert seit Firefox 24. Zum Beispiel:</p>
+
+<pre class="brush: js">var obj1 = {};
+var obj2 = { a: obj1 };
+obj1.b = obj2;
+
+console.log('Cyclical: ' + (obj1.b.a == obj1));
+
+var objSource = obj1.toSource(); // returns "({b:{a:{}}})"
+
+obj1 = eval(objSource);
+
+console.log('Cyclical: ' + (obj1.b.a == obj1));
+</pre>
+
+<p>Wenn eine zyklische Struktur existiert und <code>toSource()</code> benötigt wird, muss das Objekt eine überschriebene toSource() Methode besitzen. Entweder durch benützen einer Referenz zum Construktor oder einer anonymen Funktion.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Benutzen_von_toSource()"><code><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif">Benutzen von </font>toSource()</code></h3>
+
+<p>Der folgende Code defniert den "Dog" Objekt Typ und kreiert "theDog", welches ein Objekt des Typs "Dog" ist:</p>
+
+<pre class="brush: js">function Dog(name, breed, color, sex) {
+  this.name = name;
+  this.breed = breed;
+  this.color = color;
+  this.sex = sex;
+}
+
+theDog = new Dog('Gabby', 'Lab', 'chocolate', 'female');
+</pre>
+
+<p>Durch aufrufen der <code>toSource()</code> Methode von "<code>theDog"</code> liefert die JavaScript Quelle, welche das Objekt definiert.</p>
+
+<pre class="brush: js">theDog.toSource();
+// returns ({name:"Gabby", breed:"Lab", color:"chocolate", sex:"female"})
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Kein Teil eines Standards. Implementiert seit JavaScript 1.3.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toString()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/object/valueof/index.html b/files/de/web/javascript/reference/global_objects/object/valueof/index.html
new file mode 100644
index 0000000000..1b3d561756
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/object/valueof/index.html
@@ -0,0 +1,115 @@
+---
+title: Object.prototype.valueOf()
+slug: Web/JavaScript/Reference/Global_Objects/Object/valueOf
+tags:
+  - JavaScript
+  - Method
+  - Object
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/valueOf
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>valueOf()</strong></code> Methode liefert den primitiven Wert des spezifizierten Objekts zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-prototype-valueof.html")}}</div>
+
+<p class="hidden">Der source code für dieses interaktive Beispiel ist in einem GitHub repository verfügbar. Wenn Sie sich an dem Projekt für interaktive Beispiele beteiligen möchten, dann rufen Sie bitte eine Kopie des Repositories via git clone ab: <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und senden uns einen pull request.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>object</var>.valueOf()</code></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Der primitive Wert des spezifizierten Objekts.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>JavaScript ruft die <code>valueOf</code> Methode auf, um das Objekt zu einem primitiven Wert zu konvertieren. Nur in seltenen Fällen ist es nötig, selbst die <code>valueOf</code> Methode aufzurufen; JavaScript tut dies automatisch dann, wenn es ein Objekt vorfindet und ein primitiver Wert erforderlich ist.</p>
+
+<p>Standardmäßig erbt jedes Objekt die <code>valueOf</code> Methode von {{jsxref("Object")}}. Jedes built-in core object überschreibt zudem diese Methode, um jeweils den geeigneten Wert zu liefern. Falls ein Objekt keinen primitiven Wert haben sollte, liefert <code>valueOf</code> das Objekt selbst zurück.</p>
+
+<p>Die Methode <code>valueOf</code> kann in eigenem Code verwendet werden, um etwa ein built-in object in seinen primitiven Wert zu wandeln. Bei der Implementierung eines eigenen Objekttyps sollte die Methode <code>Object.prototype.valueOf()</code> entsprechend überschrieben werden, anstelle der standardmäßig durch {{jsxref("Object")}} bereitgestellten Methode.</p>
+
+<h3 id="Überschreiben_von_valueOf_für_eigene_Objekttypen">Überschreiben von <code>valueOf</code> für eigene Objekttypen</h3>
+
+<p>Es ist möglich eine function zu implementieren, welche anstelle der standardmäßig bereit gestellten <code>valueOf</code> Methode aufgerufen wird. Diese empfängt und benötigt keine Argumente.</p>
+
+<p>Angenommen, in einem Projekt gibt es den Objekttyp <code>MyNumberType</code> und für diesen soll nun eine passende <code>valueOf</code> Methode implementiert werden. Der folgende Code zeigt wie mit einer function die <code>valueOf</code> Methode des Typs implementiert wird:</p>
+
+<pre class="brush: js">MyNumberType.prototype.valueOf = function() { return customPrimitiveValue; };</pre>
+
+<p>Mit Hilfe dieses Codes wird JavaScript automatisch diese Funktion aufrufen, sobald ein Objekt des Typs <code>MyNumberType</code> in einem Kontext steht, wo es als primitiver Wert benötigt wird.</p>
+
+<p>Die Methode <code>valueOf</code> eines Objekts wird üblicherweise nur von JavaScript selbst aufgerufen, kann aber ebenso wie folgt jederzeit aufgerufen werden:</p>
+
+<pre class="brush: js">myNumberType.valueOf()</pre>
+
+<div class="note">
+<p><strong>Wichtig:</strong> Objekte in String-Kontexten werden über die Methode {{jsxref("Object.toString", "toString()")}} zu String umgewandelt, was etwas anderes ist als ein {{jsxref("String")}} Objekt welches über <code>valueOf</code> zum string primitive konvertiert wird. Alle Objekte haben eine Möglichkeit, zu einem String konvertiert zu werden, selbst wenn dies lediglich resultiert in "<code>[object <em>type</em>]</code>". Die meisten Objekte hingegen können nicht gewandelt werden zu number, boolean, oder function.</p>
+</div>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Verwendung_von_valueOf">Verwendung von <code>valueOf</code></h3>
+
+<pre class="brush: js">function MyNumberType(n) {
+    this.number = n;
+}
+
+MyNumberType.prototype.valueOf = function() {
+    return this.number;
+};
+
+var myObj = new MyNumberType(4);
+myObj + 3; // 7
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Hinweise</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.4.4', 'Object.prototype.valueOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.prototype.valueof', 'Object.prototype.valueOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.prototype.valueof', 'Object.prototype.valueOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Object.valueOf")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toString()")}}</li>
+ <li>{{jsxref("parseInt", "parseInt()")}}</li>
+ <li>{{jsxref("Symbol.toPrimitive")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/object/values/index.html b/files/de/web/javascript/reference/global_objects/object/values/index.html
new file mode 100644
index 0000000000..f3a66e5714
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/object/values/index.html
@@ -0,0 +1,148 @@
+---
+title: Object.values()
+slug: Web/JavaScript/Reference/Global_Objects/Object/values
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/values
+---
+<div>{{JSRef}}</div>
+
+<p style="margin-bottom: 0cm; line-height: 100%;">Die Methode <code><strong>Object.values()</strong></code> gibt ein Array mit den Eigenschaftswerten eines gegebenen Objekts in der selben Reihenfolge wie eine {{jsxref("Statements/for...in", "for...in")}}-Schleife sie geben würde zurück (Der Unterschied ist dabei, dass eine for-in Schleife zusätzlich die Eigenschaften der Protoype-Kette aufzählt).</p>
+
+<p style="margin-bottom: 0cm; line-height: 100%;"> </p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-values.html")}}</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Object.values(<var>obj</var>)</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>Ein Objekt, dessen Eigenschaftswerte zurück gegeben werden sollen.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein Array, welches die Eigenschaftswerte eines gegebenen Objekts enthält.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p><code>Object.values()</code> gibt ein Array zurück, dessen Elemente mit den Werten der Eigenschaften eines gegebenen Objekts übereinstimmen. Die Reihenfolge der Eigenschaften ist die selbe, wie sie sich bei einem manuellen Durchlauf über die Eigenschaften ergeben würde.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js">var obj = { foo: 'bar', baz: 42 };
+console.log(Object.values(obj)); // ['bar', 42]
+
+// Array-ähnliches Objekt
+var obj = { 0: 'a', 1: 'b', 2: 'c' };
+console.log(Object.values(obj)); // ['a', 'b', 'c']
+
+// Array-ähnliches Objekt mit zufälliger Sortierung der Eigenschaften
+var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
+console.log(Object.values(an_obj)); // ['b', 'c', 'a']
+
+// getFoo ist eine nicht aufzählbare Eigenschaft
+var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } });
+my_obj.foo = 'bar';
+console.log(Object.values(my_obj)); // ['bar']
+
+// non-object argument will be coerced to an object
+console.log(Object.values('foo')); // ['f', 'o', 'o']
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Um <code>Object.values</code> auch in älteren Umgebungen zu nutzen, die diese Methode nicht nativ unterstützen, können Sie ein Polyfill im <a href="https://github.com/tc39/proposal-object-values-entries">tc39/proposal-object-values-entries</a> oder im <a href="https://github.com/es-shims/Object.values">es-shims/Object.values</a> Repository finden.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.values', 'Object.values')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Erste Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES8', '#sec-object.values', 'Object.values')}}</td>
+   <td>{{Spec2('ES8')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(54)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(47)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatSafari(10.1)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(54)}}</td>
+   <td>{{CompatChrome(54)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(47)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatSafari(10.3)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
+
+<p>Siehe auch</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li>
+ <li>{{jsxref("Object.keys()")}}</li>
+ <li>{{jsxref("Object.entries()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li>
+ <li>{{jsxref("Object.create()")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/parsefloat/index.html b/files/de/web/javascript/reference/global_objects/parsefloat/index.html
new file mode 100644
index 0000000000..72dddf6c5b
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/parsefloat/index.html
@@ -0,0 +1,147 @@
+---
+title: parseFloat()
+slug: Web/JavaScript/Reference/Global_Objects/parseFloat
+tags:
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Global_Objects/parseFloat
+---
+<div>
+<div>
+<div>{{jsSidebar("Objects")}}</div>
+</div>
+</div>
+
+<p>Die <code><strong>parseFloat()</strong></code>-Funktion parst ein Zeichenketten-Argument und gibt eine Fließkommazahl zurück.</p>
+
+<div>{r{EmbedInteractiveExample("pages/js/globalprops-parsefloat.html")}}</div>
+
+<p class="hidden">Die Quelle für dieses Beispiel ist in einem GitHub-Repository abgelegt. Wenn Sie etwas zu dem Interactive Examples Project beitragen möchten, klonen Sie bitte <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und senden uns einen Pull-Request.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">parseFloat(<em>value</em>)</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Der Wert, den man parsen möchte.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine Fließkommazahl, die vom übergebenen Wert geparst wurde. Wenn der Wert nicht zu einer Zahl konvertiert werden kann, wird {{jsxref("NaN")}} zurückgegeben.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p><code>parseFloat</code> ist eine Top-Level-Funktion und mit keinen Objekt assoziiert.</p>
+
+<p><code>parseFloat</code> übersetzt ihr Argument in eine Fließkommazahl. Trifft sie dabei auf ein anderes Zeichen als ein Vorzeichen (+ oder -), einen numerischen Werten (0-9), einen Dezimalpunkt, oder einen Exponenten, so gibt es den Wert zurück bis zu diesem Punkt und ignoriert dieses Zeichen, sowie alle nachfolgenden. Anführende und abschließende Leerzeichen sind erlaubt.</p>
+
+<p>Wenn der Wert eine Zeichenkette ist und die ersten Zeichen nicht in eine Zahl konvertiert werden können, gibt <code>parseFloat</code> den Wert {{jsxref("NaN")}} zurück.</p>
+
+<p>Für arithmetische Zwecke ist <code>NaN</code> keine Zahl für jede Basis eines Zahlensystems. Man kann die {{jsxref("isNaN")}}-Funktion aufrufen um festzustellen, ob <code>NaN</code> das Ergebnis von <code>parseFloat</code> ist. Wenn <code>NaN</code> Operand einer arithmetischen Operation ist, dann ist das Ergebnis ebenfalls <code>NaN</code>.</p>
+
+<p><code>parseFloat</code> kann ebenfalls den Wert <code>Infinity</code> parsen und zurückgeben. Man kann die {{jsxref("isFinite")}}-Funktion benutzen um festzustellen, ob das Ergebnis eine endliche Zahl ist (nicht <code>Infinity</code>,  <code>-Infinity</code>, oder <code>NaN</code>).</p>
+
+<p><code>parseFloat</code> kann zudem Objekte parsen, wenn diese eine <code>toString</code>- oder <code>valueOf</code>-Methode haben. Das Ergebnis ist dasselbe, als wenn <code>parseFloat</code> mit dem Ergebnis einer dieser beiden Methoden ausgerufen wurde.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="parseFloat_Rückgabe_einer_Zahl"><code>parseFloat</code> Rückgabe einer Zahl</h3>
+
+<p>Die folgenden Beispiele geben alle <strong>3.14 </strong>zurück</p>
+
+<pre class="brush:js">parseFloat(3.14);
+parseFloat("3.14");
+parseFloat("314e-2");
+parseFloat("0.0314E+2");
+parseFloat("3.14mehr nicht-Ziffer-Zeichen");
+
+var foo = Object.create(null);
+foo.toString = function () { return "3.14"; };
+parseFloat(foo);
+
+var foo = Object.create(null);
+foo.valueOf = function () { return "3.14"; };
+parseFloat(foo);
+</pre>
+
+<h3 id="parseFloat_Rückgabe_von_NaN"><code>parseFloat</code> Rückgabe von <code>NaN</code></h3>
+
+<p>Das folgende Beispiel gibt <code>NaN</code> zurück</p>
+
+<pre class="brush: js">parseFloat("FF2");
+</pre>
+
+<h3 id="Eine_striktere_parse-Funktion">Eine striktere parse-Funktion</h3>
+
+<p>Unter bestimmten Umständen ist es hilfreich, einen strikteren Weg zu haben, um Fließkomma-Werte zu parsen. Reguläre Ausdrücke können hierbei helfen:</p>
+
+<pre class="brush: js">var filterFloat = function (value) {
+    if(/^(\-|\+)?([0-9]+(\.[0-9]+)?|Infinity)$/
+      .test(value))
+      return Number(value);
+  return NaN;
+}
+
+console.log(filterFloat('421'));               // 421
+console.log(filterFloat('-421'));              // -421
+console.log(filterFloat('+421'));              // 421
+console.log(filterFloat('Infinity'));          // Infinity
+console.log(filterFloat('1.61803398875'));     // 1.61803398875
+console.log(filterFloat('421e+0'));            // NaN
+console.log(filterFloat('421hop'));            // NaN
+console.log(filterFloat('hop1.61803398875'));  // NaN
+
+</pre>
+
+<p>Hinweis: Dies ist lediglich ein Beispiel, es akzeptiert keine zulässigen Zahlen wie <code>1.</code> oder <code>.5</code>.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.2.3', 'parseFloat')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-parsefloat-string', 'parseFloat')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-parsefloat-string', 'parseFloat')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatiblität">Browserkompatiblität</h2>
+
+<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten erzeugt. Falls Sie zu diesen Daten etwas beitragen möchten, öffen Sie bitte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und senden uns einen Pull-Request.</div>
+
+<p>{{Compat("javascript.builtins.parseFloat")}}</p>
+
+<h2 id="See_Also" name="See_Also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/parseInt", "parseInt()")}}</li>
+ <li>{{jsxref("Number.parseFloat()")}}</li>
+ <li>{{jsxref("Number.parseInt()")}}</li>
+ <li>{{jsxref("Number.toFixed()")}}</li>
+ <li>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/parseint/index.html b/files/de/web/javascript/reference/global_objects/parseint/index.html
new file mode 100644
index 0000000000..39641b060a
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/parseint/index.html
@@ -0,0 +1,195 @@
+---
+title: parseInt()
+slug: Web/JavaScript/Reference/Global_Objects/parseInt
+tags:
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Global_Objects/parseInt
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>Die <strong><code>parseInt()</code></strong> Methode liest ein String-Argument ein und gibt eine ganze Zahl im angegebenen Zahlensystem zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-parseint.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">parseInt(<em>string</em>, <em>radix</em>);</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>string</code></dt>
+ <dd>Umzuwandelnder Wert. Wenn <code>string</code> kein String ist, wird er zu einem String konvertiert (durch die abstrakte Operation <code><a href="http://www.ecma-international.org/ecma-262/6.0/#sec-tostring">ToString</a></code>). Führende Leerzeichen im String werden ignoriert.</dd>
+</dl>
+
+<dl>
+ <dt><code>radix</code></dt>
+ <dd>Eine ganze Zahl zwischen 2 und 36, die die Basis eines mathematischen Zahlensystems ist, in der der String geschrieben ist. 10 steht für das gebräuchliche Dezimalsystem.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine ganze Zahl des übergebenen Strings. Wenn das erste Zeichen nicht zu einer Zahl konvertiert werden kann, wird {{jsxref("NaN")}} zurückgegeben.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>parseInt</code> Funktion konvertiert das erste Argument zu einem String, analysiert diesen und gibt eine ganze Zahl oder <code>NaN</code> zurück. Wenn nicht <code>NaN</code> zurückgegeben wird, ist der Wert des ersten Arguments eine gültige ganze Zahl im entsprechenden Zahlensystem. Zum Beispiel wird im 10er-Zahlensystem von einer Dezimalzahl ausgegangen, im 8er-System von einer Oktalzahl, im 16er-System von einer Hexadezimalzahl und so weiter. Für die Basis eines Zahlensystems größer als <code>10</code> sind Buchstaben des Alphabets Repräsentanten für Zahlen größer als <code>9</code>. Zum Beispiel werden für Hexadezimalezahlen (Basis 16) die Buchstaben <code>A</code> bis <code>F</code> eingesetzt.</p>
+
+<p>Wenn <code>parseInt</code> ein Zeichen findet, welches keine Ziffer im spezifizierten Zahlensystem ist wird dieses und alle folgenden Zeichen ignoriert. <code>parseInt</code> schneidet Nachkommstellen ab. Führende und nachgestellte Leerzeichen sind erlaubt.</p>
+
+<p>Weil einige Zahlen mit einem <code>e</code> Zeichen in ihrer String-Repräsentation (z. B. <strong><code>6.022e23</code></strong>), führt der Einsatz von <code>parseInt</code> zum Abschneiden von nummerischer Wert und unerwarteten Ergebnissen, wenn große oder kleine Zahlen verwendet werden. <code>parseInt</code> sollte nicht als Ersatz für {{jsxref("Math.floor()")}} eingesetzt werden.</p>
+
+<p>Wenn <var>radix</var> <code>undefined</code> oder 0 ist (oder fehlt), nimmt JavaScript folgendes an:</p>
+
+<ul>
+ <li>Wenn <code>string</code> mit <code>"0x"</code> oder <code>"0X"</code> beginnt, wird das Hexadezimalsystem verwendet.</li>
+ <li>Wenn <code>string</code> mit <code>"0"</code> beginnt, wird das Oktal- oder Dezimalsystem verwendet (Implementierungsabhängig). ECMAScript 5 spezifiziert das Dezimalsystem, jedoch unterstützen das nicht alle Browser. <strong>Deswegen sollte der Parameter <code>radix</code> immer angegeben werden</strong></li>
+ <li>Wenn <code>string</code> mit einem anderen Zeichen beginnt, wird das Dezimalsystem verwendet.</li>
+</ul>
+
+<p>Wenn das erste Zeichen nicht zu einer Zahl konvertiert werden kann, gibt <code>parseInt</code> <code>NaN</code> zurück.</p>
+
+<p>Für arithmetische Zwecke ist <code>NaN</code> in keinem Zahlensystem eine Zahl. Man kann die Funktion {{jsxref("isNaN", "isNaN()")}} aufrufen, um zu prüfen, ob das Ergebnis von <code>parseInt</code> <code>NaN</code> ist. Wenn <code>NaN</code> in einer arithmetischen Operation eingesetzt wird, ist das Ergebnis auch immer <code>NaN</code>.</p>
+
+<p>Um Zahlen in String-Repräsentationen in verschiedenen Zahlensystemen zu konvertieren nutze folgendes:<br>
+ <code>intValue.toString(radix)</code>.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_parseInt">Einsatz von <code>parseInt</code></h3>
+
+<p>Alle folgenden Beispiele geben <strong><code>15</code> </strong>zurück:</p>
+
+<pre class="brush: js">parseInt(" 0xF", 16);
+parseInt(" F", 16);
+parseInt("17", 8);
+parseInt(021, 8);
+parseInt("015", 10);
+parseInt(15.99, 10);
+parseInt("15,123", 10);
+parseInt("FXX123", 16);
+parseInt("1111", 2);
+parseInt("15*3", 10);
+parseInt("15e2", 10);
+parseInt("15px", 10);
+parseInt("12", 13);
+</pre>
+
+<p>Alle folgenden Beispiele geben <code><strong>NaN</strong></code> zurück:</p>
+
+<pre class="brush: js">parseInt("Hello", 8); // Not a number at all
+parseInt("546", 2);   // Digits are not valid for binary representations
+</pre>
+
+<p>Alle folgenden Beispiele geben <code><strong>-15</strong></code> zurück:</p>
+
+<pre class="brush: js">parseInt("-F", 16);
+parseInt("-0F", 16);
+parseInt("-0XF", 16);
+parseInt(-15.1, 10);
+parseInt(" -17", 8);
+parseInt(" -15", 10);
+parseInt("-1111", 2);
+parseInt("-15e1", 10);
+parseInt("-12", 13);
+</pre>
+
+<p>Die folgenden Beispiele geben <code><strong>4</strong></code> zurück:</p>
+
+<pre class="brush: js">parseInt(4.7, 10);
+parseInt(4.7 * 1e22, 10);       // Sehr große Zahl wird zu 4
+parseInt(0.00000000000434, 10); // Sehr kleine Zahl wird zu 4</pre>
+
+<p>Das folgende Beispiel gibt <strong><code>224</code></strong> zurück:</p>
+
+<pre class="brush: js">parseInt("0e0", 16);
+</pre>
+
+<h2 id="Oktal-Interpretationen_ohne_radix">Oktal-Interpretationen ohne radix</h2>
+
+<p>Obwohl ECMAScript 3 es nicht empfahl und ECMAScript 5 es verbietet, interpretieren viele Implementierungen einen mit <code>"0"</code> beginnende String als Oktalzahl. Das folgende Beispiel hat ein Ergebnis im Oktal- oder Dezimalsystem. <strong>Das Zahlensystem sollte immer angegeben werden, um solche Verwirrungen zu vermeiden.</strong></p>
+
+<pre class="brush: js">parseInt("0e0"); // 0
+parseInt("08"); // 0, '8' ist keine oktale Ziffer.
+</pre>
+
+<h3 id="ECMAScript_5_entfernt_oktale_Interpretation">ECMAScript 5 entfernt oktale Interpretation</h3>
+
+<p>Die ECMAScript 5 Spezifikation der <code>parseInt</code> Funktion erlaubt es nicht mehr einen mit <code>0</code> beginnenden String als Oktalzahl zu interpretieren. ECMAScript 5 Stand:</p>
+
+<p>Die <code>parseInt</code> Funktion produziert eine ganze Zahl, indem der Inhalt vom string Argument interpretiert wird, abhängig vom in radix angegebenen Zahlensystem. Führende Whitespaces werden ignoriert. Wenn radix <code>undefined</code> oder <code>0</code> ist, wird von <code>10</code> ausgegangen, außer die Zahl beginnt mit den Zeichen <code>0x</code> oder <code>0X</code>, dann wird <code>16</code> für radix angenommen.</p>
+
+<p>Das unterscheidet sich von der ECMAScript 3 Spezifikation, welche Oktalinterpretationen nicht empfiehlt, sie aber erlaubt.</p>
+
+<p>Weil viele Implementierungen dieses Verhalten seit 2013 nicht geändert haben und auch ältere Browser unterstützt werden müssen, <strong>sollte immer das radix-Argument gesetzt werden.</strong></p>
+
+<h2 id="Eine_strenge_parse-Funktion">Eine strenge parse-Funktion</h2>
+
+<p>Es ist manchmal nützliche eine strenge Funktion für die Umwandlung von ganzen Zahlen zu verwenden. Reguläre Ausdrücke können helfen:</p>
+
+<pre class="brush: js">filterInt = function (value) {
+  if(/^(\-|\+)?([0-9]+|Infinity)$/.test(value))
+    return Number(value);
+  return NaN;
+}
+
+console.log(filterInt('421'));               // 421
+console.log(filterInt('-421'));              // -421
+console.log(filterInt('+421'));              // 421
+console.log(filterInt('Infinity'));          // Infinity
+console.log(filterInt('421e+0'));            // NaN
+console.log(filterInt('421hop'));            // NaN
+console.log(filterInt('hop1.61803398875'));  // NaN
+console.log(filterInt('1.61803398875'));     // NaN
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Komment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.2.2', 'parseInt')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-parseint-string-radix', 'parseInt')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-parseint-string-radix', 'parseInt')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.parseInt")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("parseFloat", "parseFloat()")}}</li>
+ <li>{{jsxref("Number.parseFloat()")}}</li>
+ <li>{{jsxref("Number.parseInt()")}}</li>
+ <li>{{jsxref("isNaN", "isNaN()")}}</li>
+ <li>{{jsxref("Number.toString()")}}</li>
+ <li>{{jsxref("Object.valueOf")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/promise/all/index.html b/files/de/web/javascript/reference/global_objects/promise/all/index.html
new file mode 100644
index 0000000000..9753db7994
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/promise/all/index.html
@@ -0,0 +1,137 @@
+---
+title: Promise.all()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/all
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Promise
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/all
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>Promise.all(iterable)</strong></code> Methode gibt einen {{jsxref("Promise")}} zurück, welcher erfüllt(<em>resolved)</em> wird, wenn alle Promises in dem <em>iterable </em>- Argument erfüllt wurden oder wenn das <em>iterable</em> - Argument keine Promises enthält. Eine Ablehnung (<em>reject</em>) erfolgt mit dem Grund des ersten Promises, das abgelehnt wurde, oder mit dem Error der von dem ersten Argument, wenn das innerhalb eines try/catch/throw blocks gefangen wurde.</p>
+
+<p>Es wird typischerweise für mehrere asynchrone Aufgaben die parallel laufen und die Promises als Ergebnisse haben, so das eines warten kann, bis alle anderen Aufgaben abgeschlossen sind.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/promise-all.html")}}</div>
+
+<p class="hidden">Die Quellen für diese interaktive Demo sind in einem GitHub Repository gespeichert. Wenn Du etwas zum interaktiven Demo Projekt beitragen willst, klone das Repository  <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und schicke uns einen pull request.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Promise.all(<var>iterable</var>);</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt>iterable</dt>
+ <dd>Ein <a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol">iterierbares</a> Objekt, z.B. ein {{jsxref("Array")}} oder ein {{jsxref("String")}}.</dd>
+</dl>
+
+<h3 id="Rückgabe-Wert">Rückgabe-Wert</h3>
+
+<ul>
+ <li>Ein <strong>bereits eingelöstes</strong> {{jsxref("Promise")}}, wenn das eingegebene <em>iterable</em> - Argument leer ist.</li>
+ <li>Ein <strong>asynchron eingelöstes</strong> {{jsxref("Promise")}}, wenn das eingegebene <em>iterable</em> - Argument keine Promises enthält. Achtung, Google Chrome 58 gibt in diesem Fall ein <strong>bereits eingelöstes</strong> Promise zurück.</li>
+ <li>Ein <strong>ausstehendes</strong> (<em>pending</em>) {{jsxref("Promise")}} in allen anderen Fällen. Dieses zurückgegebene Promise wird dann <strong>asynchron</strong> erfüllt/abgelehnt (sobald der <em>stack</em> leer ist), wenn alle Promises des gegebenen <em>iterable</em> erfüllt wurden, oder wenn irgendeiner der Promises abgelehnt wird. Die Rückgabewerte entsprechen dann der Reihenfolge der Promises, unabhängig von der Reihenfolge der Erfüllung.</li>
+</ul>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Diese Methode dient dem Bündeln von mehreren Promises.</p>
+
+<p>Erfüllt: <br>
+ Wenn alle Promises erfolgreich erfüllt werden, oder keine Promises sind, wird <code>Promise.all</code> mit einem Array, welches die Rückgabewerte der einzelnen Promises (aber auch die nicht-Promise Werte) enthält, erfüllt. Wenn ein leeres Array übergeben wird, wird  <code>Promise.all</code> (synchron) sofort erfüllt. </p>
+
+<p>Abgelehnt:<br>
+ Wenn eines der übergebenen Promises abgelehnt wird, wird <code>Promise.all</code> asynchron mit dem Wert des fehlgeschlagenen Promise abgelehnt, ganz egal, ob die anderen Promises erfolgreich waren oder nicht.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Erfolgreich">Erfolgreich:</h3>
+
+<pre class="brush: js">var p1 = Promise.resolve(3);
+var p2 = 1337;
+var p3 = new Promise((resolve, reject) =&gt; {
+   setTimeout(resolve, 100, 'foo');
+});
+
+Promise.all([p1, p2, p3])
+.then(values =&gt; {
+  console.log(values); // [3, 1337, "foo"]
+});
+</pre>
+
+<h3 id="Sofortige_Ablehnung">Sofortige Ablehnung:</h3>
+
+<pre class="brush: js">var p1 = new Promise((resolve, reject) =&gt; {
+  setTimeout(resolve, 1000, 'one');
+});
+var p2 = new Promise((resolve, reject) =&gt; {
+  setTimeout(resolve, 2000, 'two');
+});
+var p3 = new Promise((resolve, reject) =&gt; {
+  setTimeout(resolve, 3000, 'three');
+});
+var p4 = new Promise((resolve, reject) =&gt; {
+  setTimeout(resolve, 4000, 'four');
+});
+var p5 = new Promise((resolve, reject) =&gt; {
+  reject('reject');
+});
+
+Promise.all([p1, p2, p3, p4, p5]).then(values =&gt; {
+  console.log(values);
+}, reason =&gt; {
+  console.log(reason)
+});
+
+//From console:
+//"reject"
+
+//You can also use .catch
+Promise.all([p1, p2, p3, p4, p5]).then(values =&gt; {
+  console.log(values);
+}).catch(reason =&gt; {
+  console.log(reason)
+});
+
+//From console:
+//"reject"
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td><a href="https://github.com/domenic/promises-unwrapping">domenic/promises-unwrapping</a></td>
+   <td>Draft</td>
+   <td>Standardization work is taking place here.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-promise.all', 'Promise.all')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition in an ECMA standard.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatiblität">Browserkompatiblität</h2>
+
+<p class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Promise.all")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{jsxref("Promise.race()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/promise/finally/index.html b/files/de/web/javascript/reference/global_objects/promise/finally/index.html
new file mode 100644
index 0000000000..588d00d43f
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/promise/finally/index.html
@@ -0,0 +1,93 @@
+---
+title: Promise.prototype.finally()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/finally
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/finally
+---
+<div>{{JSRef}}</div>
+
+<p>finally () gibt ein {{jsxref ("Promise")}} zurück. Wenn das Promise erfüllt oder abgelehnt wird, wird die angegebene callback-Funktion ausgeführt. Dies stellt eine Möglichkeit für Code bereit, der ausgeführt werden muss, unabhängig davon, ob das Promise erfolgreich erfüllt wurde oder nicht. Auf diese Weise können Sie vermeiden, dass derselbe Code für die beiden Handlern des Promise {{jsxref ("Promise.then", "then ()")}} und {{jsxref ("Promise.catch", "catch ()")}} geschrieben werden muss.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>p.finally(onFinally)</var>;
+
+p.finally(function() {
+   // settled (fulfilled or rejected)
+});
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>onFinally</code></dt>
+ <dd>A {{jsxref("Function")}} called when the <code>Promise</code> is settled.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>Returns a {{jsxref("Promise")}} whose <code>finally</code> handler is set to the specified function, <code>onFinally</code>.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>The <code>finally()</code> method can be useful if you want to do some processing or cleanup once the promise is settled, regardless of its outcome.</p>
+
+<p>The <code>finally()</code> method is very similar to calling <code>.then(onFinally, onFinally)</code> however there are couple of differences:</p>
+
+<ul>
+ <li>When creating a function inline, you can pass it once, instead of being forced to either declare it twice, or create a variable for it</li>
+ <li>A <code>finally</code> callback will not receive any argument, since there's no reliable means of determining if the promise was fulfilled or rejected. This use case is for precisely when you <em>do not care</em> about the rejection reason, or the fulfillment value, and so there's no need to provide it.</li>
+ <li>Unlike <code>Promise.resolve(2).then(() =&gt; {}, () =&gt; {})</code> (which will be resolved with <code>undefined</code>), <code>Promise.resolve(2).finally(() =&gt; {})</code> will be resolved with <code>2</code>.</li>
+ <li>Similarly, unlike <code>Promise.reject(3).then(() =&gt; {}, () =&gt; {})</code> (which will be fulfilled with <code>undefined</code>), <code>Promise.reject(3).finally(() =&gt; {})</code> will be rejected with <code>3</code>.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note:</strong> A <code>throw</code> (or returning a rejected promise) in the <code>finally</code> callback will reject the new promise with the rejection reason specified when calling <code>throw()</code>.</p>
+</div>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">let isLoading = true;
+
+fetch(myRequest).then(function(response) {
+    var contentType = response.headers.get("content-type");
+    if(contentType &amp;&amp; contentType.includes("application/json")) {
+      return response.json();
+    }
+    throw new TypeError("Oops, we haven't got JSON!");
+  })
+  .then(function(json) { /* process your JSON further */ })
+  .catch(function(error) { console.log(error); })
+  .finally(function() { isLoading = false; });
+
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td><a href="https://github.com/tc39/proposal-promise-finally">TC39 proposal</a></td>
+   <td>Stage 4</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Promise.finally")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{jsxref("Promise.prototype.then()")}}</li>
+ <li>{{jsxref("Promise.prototype.catch()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/promise/index.html b/files/de/web/javascript/reference/global_objects/promise/index.html
new file mode 100644
index 0000000000..9e9756ac65
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/promise/index.html
@@ -0,0 +1,244 @@
+---
+title: Promise
+slug: Web/JavaScript/Reference/Global_Objects/Promise
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise
+---
+<div>{{JSRef}}</div>
+
+<p>Das <strong><code>Promise</code></strong> Objekt stellt eine Repräsentation einer eventuellen Ausführung (oder eines Fehlschlags) einer asynchronen Operation und den daraus resultierenden Ergebnissen dar.</p>
+
+<p>Um mehr darüber zu erfahren wie promises funktionieren und wie diese verwendet werden sollte zuerst <a href="/de-DE/docs/Web/JavaScript/Guide/Using_promises">Promises benutzen</a> gelesen werden.</p>
+
+<dl>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Das <strong><code>Promise-Objekt (dt./deutsch Ein Versprechens-Objekt, das später eingelöst wird)</code></strong>wird für asynchrone Berechnungen verwendet.</p>
+
+<p>Ein <code>Promise</code> kann sich in einem von drei Zuständen befinden:</p>
+
+<ul>
+ <li><em>pending</em> (schwebend): initialer Status, weder fulfilled noch rejected.</li>
+ <li><em>fulfilled</em> (erfüllt): heisst das die Operation erfolgreich abgeschlossen wurde.</li>
+ <li><em>rejected</em> (zurück gewiesen): heisst das die Operation gescheitert ist.</li>
+</ul>
+
+<p>Ein weiterer Begriff beschreibt den Zustand <em>settled (erledigt aber nicht zwingend erfolgreich)</em>: Der Promise ist entweder <em>fulfilled</em> oder <em>rejected</em>, aber nicht <em>pending</em>.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">new Promise(<em>executor</em>);
+new Promise(function(resolve, reject) { ... });</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt>executor (Ausführer)</dt>
+ <dd>Funktion mit den zwei Argumenten <code>resolve</code> und <code>reject</code>. Das erste Argument führt den Promise aus, das zweite verwirft ihn. Die Funktionen können ausgeführt werden, sobald die Operation durchgeführt wurde.</dd>
+</dl>
+
+<h2 id="Beschreibung_2">Beschreibung</h2>
+
+<p>Das <code><strong>Promise</strong></code>-Interface repräsentiert einen Proxy für einen Wert, der nicht zwingend bekannt ist, wenn der Promise erstellt wird. Das erlaubt die Assoziation zwischen <em>Handler</em> und dem Gelingen oder Fehlschlagen einer asynchronen Aktion. Mit diesem Mechanismus können asynchrone Methoden in gleicher Weise Werte zurück geben wie synchrone Methoden: Anstelle des endgültigen Wertes wird ein <em>Promise</em> zurückgegeben, dass es zu einem Zeitpunkt in der Zukunft einen Wert geben wird.</p>
+
+<p>Ein Promise mit dem Status <em>pending</em> kann entweder zu <em>fulfilled</em> mit Wert oder zu einem <em>rejected</em> mit Grund werden. Wenn einer dieser Fälle eintritt, werden die assoziierten <em>Handler</em>, die über die <em>then</em>-Methode gequeued wurde, aufgerufen. Ist ein Promise bereits in fullfilled oder rejected und wird erst dann ein entsprechender <em>Handler</em> hinzugefügt, dann wird dieser Handler aufgerufen. Es gibt somit keine <em>Race Conditions</em> zwischen der Ausführung der asynchronen Aktion und dem Hinzufügen des <em>Handlers</em>.</p>
+
+<p>Da die Methoden<code> Promise.prototype.then</code> und <code>Promise.prototype.catch</code> Promises zurückgeben, können sie aneinander gereiht werden (Komposition).</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8633/promises.png" style="height: 297px; width: 801px;"></p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt><code>Promise.length</code></dt>
+ <dd><em>Length</em>-Attribut mit dem Wert 1 (Anzahl der Konstruktorargumente).</dd>
+ <dt>{{jsxref("Promise.prototype")}}</dt>
+ <dd>Repräsentiert den Prototyp für den <code>Promise</code>-Konstruktor.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<dl>
+ <dt>{{jsxref("Promise.all", "Promise.all(iterable)")}}</dt>
+ <dd>Gibt einen <code>Promise</code> zurück, der aufgelöst wird, sobald alle Promises in dem <code>iterable</code>-Argument aufgelöst wurden.</dd>
+ <dt>{{jsxref("Promise.race", "Promise.race(iterable)")}}</dt>
+ <dd>Gibt einen <code>Promise</code> zurück, der aufgelöst oder verworfen wird, sobald einer der Promises in dem <code>iterable</code>-Argument aufgelöst oder verworfen wurde, und den Wert oder den Grund dieses Promise enthält.</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("Promise.reject", "Promise.reject(reason)")}}</dt>
+ <dd>Gibt einen <code>Promise</code> zurück, der mit dem angegeben Grund (<code>reason</code>) verworfen wird.</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("Promise.resolve", "Promise.resolve(value)")}}</dt>
+ <dd>Gibt einen <code>Promise</code> zurück, der mit <code>value</code> aufgelöst wird. Falls der Wert ein <em>thenable</em> ist (Objekt besitzt eine <code>then</code>-Methode), folgt der zurückgegebene <code>Promise</code> dem <em>thenable</em> und übernimmt den Status. Andernfalls wird der zurückgegebene <code>Promise</code> auf <em>fulfilled</em> gesetzt.</dd>
+</dl>
+
+<h2 id="Promise-Prototyp"><code>Promise</code>-Prototyp</h2>
+
+<h3 id="Eigenschaften">Eigenschaften</h3>
+
+<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Promise/prototype','Eigenschaften')}}</p>
+
+<h3 id="Methoden_2">Methoden</h3>
+
+<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Promise/prototype','Methoden')}}</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einen_Promise_erstellen">Einen Promise erstellen</h3>
+
+<pre class="brush: html notranslate" style="display: none;">&lt;button id="btn"&gt;Make a promise!&lt;/button&gt;
+&lt;div id="log"&gt;&lt;/div&gt;
+</pre>
+
+<p>Dieses kleine Beispiel zeigt den Mechanismus eines <code>Promise</code>. Die Methode <code>testPromise() </code>wird jedes Mal aufgerufen, wenn der {{HTMLElement("button")}} geklickt wurde. Es wird ein Promise erstellt, der mithilfe von <code>window.setTimeout</code> nach einer zufällig gewählten Zeit (1-3 s) zu <code>'result'</code> aufgelöst wird.</p>
+
+<p>Die Ausführung der Promises wird mit einem <em>fulfill</em>-Callback unter Verwendung von <code>p1.then</code> gelogt. Durch ein paar Logeinträge wird gezeigt, wie der synchrone Teil der Methode von der asynchronen Vollendung des Promises abgekoppelt ist.</p>
+
+<pre class="brush: js notranslate">var promiseCount = 0;
+function testPromise() {
+  var thisPromiseCount = ++promiseCount;
+
+  var log = document.getElementById('log');
+  log.insertAdjacentHTML('beforeend', thisPromiseCount +
+      ') Started (&lt;small&gt;Sync code started&lt;/small&gt;)&lt;br/&gt;');
+
+  // Wir erstellen einen neuen Promise: wir versprechen den String 'result' (Wartezeit max. 3s)
+  var p1 = new Promise(
+    // Resolver-Funktion kann den Promise sowohl auflösen als auch verwerfen
+    // reject the promise
+    function(resolve, reject) {
+      log.insertAdjacentHTML('beforeend', thisPromiseCount +
+          ') Promise started (&lt;small&gt;Async code started&lt;/small&gt;)&lt;br/&gt;');
+      // nur ein Beispiel, wie Asynchronität erstellt werden kann
+      window.setTimeout(
+        function() {
+          // We fulfill the promise !
+          resolve(thisPromiseCount)
+        }, Math.random() * 2000 + 1000);
+    });
+
+  // wir bestimmen, was zu tun ist, wenn der Promise fulfilled
+  p1.then(
+    // Loggen der Nachricht und des Wertes
+    function(val) {
+      log.insertAdjacentHTML('beforeend', val +
+          ') Promise fulfilled (&lt;small&gt;Async code terminated&lt;/small&gt;)&lt;br/&gt;');
+    });
+
+  log.insertAdjacentHTML('beforeend', thisPromiseCount +
+      ') Promise made (&lt;small&gt;Sync code terminated&lt;/small&gt;)&lt;br/&gt;');
+}
+</pre>
+
+<pre class="brush:js notranslate" style="display: none;">if ("Promise" in window) {
+  btn = document.getElementById("btn");
+   btn.addEventListener("click",testPromise);
+}
+else {
+  log = document.getElementById('log');
+  log.innerHTML = "Live example not available as your browser doesn't support the Promise interface.";
+}
+</pre>
+
+<p>Dieses Beispiel wird ausgeführt, wenn der Button geklickt wird. Man benötigt einen Browser, der <em>Promise</em> unterstützt. Durch mehrmaliges Klicken in kurzer Zeit kann beobachtet werden, wie die einzelnen Promises nacheinander <em>fulfilled</em> werden.</p>
+
+<p>{{EmbedLiveSample("Creating_a_Promise", "500", "200")}}</p>
+
+<h3 id="Laden_eines_Bildes_mit_XHR">Laden eines Bildes mit XHR</h3>
+
+<p>Ein weiteres, einfaches Beispiel für die Verwendung von Promises und <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHTTPRequest</a>,</code> um ein Bild zu laden, ist in dem MDN GitHub <a href="https://github.com/mdn/js-examples/blob/master/promises-test/index.html">promise-test</a> Repository. <a href="https://mdn.github.io/js-examples/promises-test/">Hier </a>kannst du es in Aktion sehen. Jeder Schritt ist kommentiert und erlaubt die den Promises und der XHR-Architektur nachzuvollziehen.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td><a href="https://github.com/domenic/promises-unwrapping">domenic/promises-unwrapping</a></td>
+   <td>Draft</td>
+   <td>Standardisierung findet hier statt.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-promise-objects', 'Promise')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initiale Definition als ein ECMA-Standard.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatiblität">Browserkompatiblität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic Support</td>
+   <td>32</td>
+   <td>{{CompatGeckoDesktop(24.0)}} als <code>Future</code><br>
+    {{CompatGeckoDesktop(25.0)}} als <code>Promise</code> hinter einem Flag[1]<br>
+    {{CompatGeckoDesktop(29.0)}} per Default</td>
+   <td>{{CompatNo}}</td>
+   <td>19</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic Support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(24.0)}} als <code>Future</code><br>
+    {{CompatGeckoMobile(25.0)}} als <code>Promise</code> hinter einem Flag[1]<br>
+    {{CompatGeckoMobile(29.0)}} per Default</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>iOS 8</td>
+   <td>32</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Gecko 24 hat eine experimentelle Implementierung von <em>Promises</em> unter dem vorherigen Namen <em>Future</em>. In Gecko 25 wurde sie in ihren endgültigen Namen umbenannt, wird aber per Default durch das Flag <code>dom.promise.enable</code> unterdrückt. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=918806">Bug 918806</a> aktiviert Promises per Default in Gecko 29.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="http://promisesaplus.com/">Promises/A+ specification</a></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/es6/promises/">Jake Archibald: JavaScript Promises: There and Back Again</a></li>
+ <li><a href="http://de.slideshare.net/domenicdenicola/callbacks-promises-and-coroutines-oh-my-the-evolution-of-asynchronicity-in-javascript">Domenic Denicola: Callbacks, Promises, and Coroutines – Asynchronous Programming Patter in JavaScript</a></li>
+ <li><a href="http://www.mattgreer.org/articles/promises-in-wicked-detail/">Matt Greer: JavaScript Promises ... In Wicked Detail</a></li>
+ <li><a href="https://www.promisejs.org/">Forbes Lindesay: promisejs.org</a></li>
+ <li>Fussnote1: bitte die englischen Begriffe in dieser Übersetzung stehen lassen, da sonst der Zusammenhang zu englischen Dokumentation völlig verloren geht. Worte wie 'Promise' sollte man sich merken, um sie auch in englisch zu verstehen.</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/promise/race/index.html b/files/de/web/javascript/reference/global_objects/promise/race/index.html
new file mode 100644
index 0000000000..78c4d9edf2
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/promise/race/index.html
@@ -0,0 +1,184 @@
+---
+title: Promise.race()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/race
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Promise
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/race
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Promise.race(iterable)</strong></code> gibt ein erfolgreiches oder fehlgeschlagenes Promise zurück, sobald eines der Promises in dem <code>iterable</code> erfolgreich war oder fehlgeschlagen ist, entsprechend mit dem <code>value</code> oder dem <code>reason</code> dieses Promises.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/promise-race.html")}}</div>
+
+<p class="hidden">Der Code für das interaktive Demo ist in einem GitHub Repository zu finden. Sollten Sie bei diesem interaktiven Demo Projekt mitmachen wollen, dann klonen Sie <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und senden uns einen Pull Request.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>Promise.race(iterable)</var>;</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt>iterable</dt>
+ <dd>Ein iterierbares Objekt, wie zum Beispiel {{jsxref("Array")}}. Siehe auch <a href="/en-US/docs/Web/JavaScript/Guide/iterable">iterable</a>.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine {{jsxref("Promise")}} im Status <strong>pending</strong>, die <strong>asynchron</strong> (sobald der Stack leer ist) einen erfolgreichen oder fehlerhaften Status annimmt, sobald die erste Promise erfolgreich, bzw. fehlerhaft ist und entsprechend diesen Wert zurückliefert.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>race</code> Funktion gibt eine <code>Promise</code> zurück, die sich genauso verhält, wie die Promise aus <code>iterable</code>, die als erstes einen erfolgreichen oder fehlerhaften Status annimmt und entsprechend diesen Wert zurückliefert.</p>
+
+<p>Wenn das übergebene <code>iterable</code> leer ist, wird die Promise für immer im Status <strong>pending</strong> verharren.</p>
+
+<p>Wenn <code>iterable</code> einen oder mehrere Werte enthält, die keine Promise sind bzw. Promises die bereits einen erfolgreichen oder fehlerhaften Status angenommen haben, dann wird die zurückgegebene Promise von <code>Promise.race</code> entsprechend den ersten dieser Werte aus <code>iterable</code> annehmen.</p>
+
+<h2 id="Beispiele"> Beispiele</h2>
+
+<h3 id="Asynchronität_von_Promise.race"><font face="consolas, Liberation Mono, courier, monospace">Asynchronität von <code>Promise.race</code></font></h3>
+
+<p>Das folgende Beispiel demonstriert the Asynchronität von <code>Promise.race:</code></p>
+
+<pre class="brush: js">// wir übergeben als Argument ein Array von Promises, die bereits einen
+// erfolgreichen Status angenommen haben, um Promise.race sofort auszulösen
+var resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)];
+
+var p = Promise.race(resolvedPromisesArray);
+// sofortiges Loggen des Wertes aus p
+console.log(p);
+
+// mit setTimeout wird der Code erst nachdem der Stack leer ist ausgeführt
+setTimeout(function(){
+    console.log('der Stack ist jetzt leer');
+    console.log(p);
+});
+
+// Logs, in der Reihenfolge:
+// Promise { &lt;state&gt;: "pending" }
+// der Stack ist jetzt leer
+// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: 33 }</pre>
+
+<p>Ein leeres <code>iterable</code> führt zu einer Promise, die für immer im Status <strong>pending</strong> bleibt:</p>
+
+<pre class="brush: js">var foreverPendingPromise = Promise.race([]);
+console.log(foreverPendingPromise);
+setTimeout(function(){
+    console.log('der Stack ist jetzt leer');
+    console.log(foreverPendingPromise);
+});
+
+// Logs, in der Reihenfolge:
+// Promise { &lt;state&gt;: "pending" }
+// der Stack ist jetzt leer
+// Promise { &lt;state&gt;: "pending" }
+</pre>
+
+<p>Wenn <code>iterable</code> einen oder mehrere Werte enthält, die keine Promise sind bzw. Promises die bereits einen erfolgreichen oder fehlerhaften Status angenommen haben, dann wird <code>Promise.race</code> entsprechend den ersten dieser Werte aus <code>iterable</code> annehmen:</p>
+
+<pre class="brush: js">var foreverPendingPromise = Promise.race([]);
+var alreadyResolvedProm = Promise.resolve(666);
+
+var arr = [foreverPendingPromise, alreadyResolvedProm, "keine Promise"];
+var arr2 = [foreverPendingPromise, "keine Promise", Promise.resolve(666)];
+var p = Promise.race(arr);
+var p2 = Promise.race(arr2);
+
+console.log(p);
+console.log(p2);
+setTimeout(function(){
+    console.log('der Stack ist jetzt leer');
+    console.log(p);
+    console.log(p2);
+});
+
+// Logs, in der Reihenfolge:
+// Promise { &lt;state&gt;: "pending" }
+// Promise { &lt;state&gt;: "pending" }
+// der Stack ist jetzt leer
+// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: 666 }
+// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: "keine Promise" }
+</pre>
+
+<h3 id="Benutzung_von_Promise.race_–_Beispiele_mit_setTimeout">Benutzung von <code>Promise.race</code> – Beispiele mit <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout"><code>setTimeout</code></a></h3>
+
+<pre class="brush: js">var p1 = new Promise(function(resolve, reject) {
+    setTimeout(resolve, 500, 'eins');
+});
+var p2 = new Promise(function(resolve, reject) {
+    setTimeout(resolve, 100, 'zwei');
+});
+
+Promise.race([p1, p2]).then(function(value) {
+  console.log(value); // "zwei"
+  // beide erfolgreich, aber p2 ist schneller
+});
+
+var p3 = new Promise(function(resolve, reject) {
+    setTimeout(resolve, 100, 'drei');
+});
+var p4 = new Promise(function(resolve, reject) {
+    setTimeout(reject, 500, 'vier');
+});
+
+Promise.race([p3, p4]).then(function(value) {
+  console.log(value); // "drei"
+  // p3 ist schneller, also insgesamt erfolgreich
+}, function(reason) {
+  // nicht aufgerufen
+});
+
+var p5 = new Promise(function(resolve, reject) {
+    setTimeout(resolve, 500, 'fünf');
+});
+var p6 = new Promise(function(resolve, reject) {
+    setTimeout(reject, 100, 'sechs');
+});
+
+Promise.race([p5, p6]).then(function(value) {
+  // nicht aufgerufen
+}, function(reason) {
+  console.log(reason); // "sechs"
+  // p6 ist schneller, also insgesamt fehlerhaft
+});
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-promise.race', 'Promise.race')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition eines ECMA Standards.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.race', 'Promise.race')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The Kompatibilitätstabelle auf dieser Seite wurde aus strukturierten Daten generiert. Wenn Sie Daten beisteuert möchten, schauen Sie sich gerne <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> an und senden uns einen Pull Request.</p>
+
+<p>{{Compat("javascript.builtins.Promise.race")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{jsxref("Promise.all()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/promise/reject/index.html b/files/de/web/javascript/reference/global_objects/promise/reject/index.html
new file mode 100644
index 0000000000..1b90305142
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/promise/reject/index.html
@@ -0,0 +1,74 @@
+---
+title: Promise.reject()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/reject
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/reject
+---
+<div>{{JSRef}}</div>
+
+<div>Die <code><strong>Promise.reject(reason)</strong></code> Methode gibt ein <code>Promise</code> Objekt zurück, das mit dem angegebenen Grund <code><strong>reason</strong></code> abgelehnt wurde.</div>
+
+<p> </p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>Promise.reject(reason)</var>;</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt>reason</dt>
+ <dd>Der Grund warum diese <code>Promise</code> abgelehnt wurde.</dd>
+</dl>
+
+<h3 id="Rückgabewerte">Rückgabewerte</h3>
+
+<p>Ein {{jsxref("Promise")}}, das mit dem angegeben Grund abgelehnt wurde</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die statische <code>Promise.reject</code> Funktion gibt ein <code>Promise</code> zurück, das abgelehnt wurde. Für Debugging zwecke, sowie gezielte Fehlerverarbeitung ist es empfehlenswert, als <code>reason</code> eine <code>instanceof </code>{{jsxref("Error")}}. zu verwenden.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Verwendung_der_Promise.reject()_Methode">Verwendung der Promise.reject() Methode</h3>
+
+<pre class="brush: js">Promise.reject(new Error('fail')).then(function(error) {
+  // nicht aufgerufen
+}, function(error) {
+  console.log(error); // Stacktrace
+});</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-promise.reject', 'Promise.reject')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition in an ECMA standard.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.reject', 'Promise.reject')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">To contribute to this compatibility data, please write a pull request against this file: <a href="https://github.com/mdn/browser-compat-data/blob/master/javascript/promise.json">https://github.com/mdn/browser-compat-data/blob/master/javascript/promise.json</a>.</p>
+
+<p>{{Compat("javascript/promise","Promise.reject")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="https://github.com/petkaantonov/bluebird#error-handling">Selective error catching using the BlueBird Promise library</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/promise/then/index.html b/files/de/web/javascript/reference/global_objects/promise/then/index.html
new file mode 100644
index 0000000000..3578cfcb62
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/promise/then/index.html
@@ -0,0 +1,149 @@
+---
+title: Promise.prototype.then()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/then
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/then
+---
+<div>{{JSRef}}</div>
+
+<div>Die <strong>then()</strong>-Methode gibt ein <code>Promise</code>-Objekt zurück. Sie benötigt zwei Argumente, jeweils eine Callback-Funktion für den Erfolg und den Fehlschlag des <code>Promise</code>.</div>
+
+<div> </div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>p.then(onFulfilled, onRejected)</var>;
+
+p.then(function(value) {
+   // fulfillment
+  }, function(reason) {
+  // rejection
+});
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt>onFulfilled</dt>
+ <dd>Eine {{jsxref("Function")}}, welche aufgerufen wird, wenn der <code>Promise</code> erfüllt wurde. Die Funktion hat ein Argument, den Rückgabewert <code>value</code>.</dd>
+ <dt>onRejected {{optional_inline}}</dt>
+ <dd>Eine {{jsxref("Function")}}, welche aufgerufen wird, wenn der <code>Promise</code> fehlschlägt. Die Funktion hat ein Argument, den Grund für den Fehlschlag: <code>reason</code>. Ist keine Funktion definiert, so wird sie intern durch die "Thrower" Funktion ersetzt (Dieser gibt einen Fehler als Argument zurück)</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>then</code>- und {{jsxref("Promise.prototype.catch()")}}-Methoden, können, da sie Promises zurückgeben<font face="Consolas, Liberation Mono, Courier, monospace">, verkettetet werden </font>— ein Vorgehen, das <em>composition</em> genannt wird.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Benutzen_der_then-Methode">Benutzen der <code>then</code>-Methode</h3>
+
+<pre class="brush: js">var p1 = new Promise(function(resolve, reject) {
+  resolve("Success!");
+  // or
+  // reject ("Error!");
+});
+
+p1.then(function(value) {
+  console.log(value); // Success!
+}, function(reason) {
+  console.log(reason); // Error!
+});
+</pre>
+
+<h3 id="Verketten">Verketten</h3>
+
+<p>Da die <code>then</code>-Methode einen <code>Promise</code> zurückliefert, können <code>then</code>-Aufrufe leicht verkettet werden.</p>
+
+<pre class="brush: js">var p2 = new Promise(function(resolve, reject) {
+  resolve(1);
+});
+
+p2.then(function(value) {
+  console.log(value); // 1
+  return value + 1;
+}).then(function(value) {
+  console.log(value); // 2
+});
+
+p2.then(function(value) {
+  console.log(value); // 1
+});
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-promise.prototype.then', 'Promise.prototype.then')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition in einem ECMAScript-Standard.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>32</td>
+   <td>{{CompatGeckoDesktop(29.0)}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>19</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(29.0)}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+   <td>32</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Gecko 24 besitzt, unter dem Namen Future, eine experimentielle Implementation von Promise. In Gecko 25 wurde der Name final festgelegt aber standardmäßig durch die Einstellung <code>dom.promise.enabled </code>deaktiviert. Durch <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=918806">Bug 918806</a> wurden Promises in Gecko 29 standardmäßig aktiviert.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{jsxref("Promise.prototype.catch()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/rangeerror/index.html b/files/de/web/javascript/reference/global_objects/rangeerror/index.html
new file mode 100644
index 0000000000..d66cd10c55
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/rangeerror/index.html
@@ -0,0 +1,174 @@
+---
+title: RangeError
+slug: Web/JavaScript/Reference/Global_Objects/RangeError
+tags:
+  - Error
+  - JavaScript
+  - NeedsTranslation
+  - Object
+  - RangeError
+  - TopicStub
+translation_of: Web/JavaScript/Reference/Global_Objects/RangeError
+---
+<div>{{JSRef}}</div>
+
+<p>The <code><strong>RangeError</strong></code> object indicates an error when a value is not in the set or range of allowed values.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>new RangeError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</code></pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>message</code></dt>
+ <dd>Optional. Human-readable description of the error</dd>
+ <dt><code>fileName</code> {{non-standard_inline}}</dt>
+ <dd>Optional. The name of the file containing the code that caused the exception</dd>
+ <dt><code>lineNumber</code> {{non-standard_inline}}</dt>
+ <dd>Optional. The line number of the code that caused the exception</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>A <code>RangeError</code> is thrown when trying to pass a number as an argument to a function that does not allow a range that includes that number. This can be encountered when attempting to create an array of an illegal length with the {{jsxref("Array")}} constructor, or when passing bad values to the numeric methods {{jsxref("Number.toExponential()")}}, {{jsxref("Number.toFixed()")}} or {{jsxref("Number.toPrecision()")}}.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{jsxref("RangeError.prototype")}}</dt>
+ <dd>Allows the addition of properties to an <code>RangeError</code> object.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p>The global <code>RangeError</code> contains no methods of its own, however, it does inherit some methods through the prototype chain.</p>
+
+<h2 id="RangeError_instances"><code>RangeError</code> instances</h2>
+
+<h3 id="Properties_2">Properties</h3>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/RangeError/prototype', 'Properties')}}</div>
+
+<h3 id="Methods_2">Methods</h3>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/RangeError/prototype', 'Methods')}}</div>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_RangeError">Using <code>RangeError</code></h3>
+
+<pre class="brush: js">var check = function(num) {
+  if (num &lt; MIN || num &gt; MAX) {
+    throw new RangeError('Parameter must be between ' + MIN + ' and ' + MAX);
+  }
+};
+
+try {
+  check(500);
+}
+catch (e) {
+  if (e instanceof RangeError) {
+    // Handle range error
+  }
+}
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.6.2', 'RangeError')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-rangeerror', 'RangeError')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-rangeerror', 'RangeError')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("RangeError.prototype")}}</li>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Number.toExponential()")}}</li>
+ <li>{{jsxref("Number.toFixed()")}}</li>
+ <li>{{jsxref("Number.toPrecision()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/rangeerror/prototype/index.html b/files/de/web/javascript/reference/global_objects/rangeerror/prototype/index.html
new file mode 100644
index 0000000000..6dc92432bf
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/rangeerror/prototype/index.html
@@ -0,0 +1,128 @@
+---
+title: RangeError.prototype
+slug: Web/JavaScript/Reference/Global_Objects/RangeError/prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/RangeError
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>RangeError.prototype</strong></code> Eigenschaft repräsentiert den Prototypen des {{jsxref("RangeError")}} Konstruktoren.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Alle {{jsxref("RangeError")}} Instanzen erben vom <code>RangeError.prototype</code>. Man kann den Prototypen nutzen um Eigenschaften oder Methoden allen Instanzen hinzuzufügen.</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt><code>RangeError.prototype.constructor</code></dt>
+ <dd>Spezifiziert die Funktion welche den Prototypen einer Instanz erschaffen hat.</dd>
+ <dt>{{jsxref("Error.prototype.message", "RangeError.prototype.message")}}</dt>
+ <dd>Fehlermeldung. Obwohl ECMA-262 angibt, dass {{jsxref("RangeError")}} seine eigene <code>message </code>Eigenschaft versorgen sollte, erbt es in <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> die {{jsxref("Error.prototype.message")}}.</dd>
+ <dt>{{jsxref("Error.prototype.name", "RangeError.prototype.name")}}</dt>
+ <dd>Fehlername. Geerbt von {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.fileName", "RangeError.prototype.fileName")}}</dt>
+ <dd>Der Dateipfad verursacht diesen Fehler. Geerbt von {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.lineNumber", "RangeError.prototype.lineNumber")}}</dt>
+ <dd>Die Zeile in der Datei, bei der der Fehler auftritt. Geerbt von {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.columnNumber", "RangeError.prototype.columnNumber")}}</dt>
+ <dd>Die Spaltennummer der Zeile , bei der der Fehler auftritt. Geerbt von {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.stack", "RangeError.prototype.stack")}}</dt>
+ <dd>Stack - Ablaufverfolgung. Geerbt von {{jsxref("Error")}}.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<p> Obwohl das {{jsxref("RangeError")}} Prototypobjekt keine eigenen Methoden beinhaltet, beerben {{jsxref("RangeError")}} Instanzen einige Methoden durch die Prototypenkette.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Beschreibung</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initialdefinition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definiert als <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definiert als <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Definiert als <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype")}}</li>
+ <li>{{jsxref("Function.prototype")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/reflect/apply/index.html b/files/de/web/javascript/reference/global_objects/reflect/apply/index.html
new file mode 100644
index 0000000000..bc16c4d4d8
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/reflect/apply/index.html
@@ -0,0 +1,98 @@
+---
+title: Reflect.apply()
+slug: Web/JavaScript/Reference/Global_Objects/Reflect/apply
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/apply
+---
+<div>{{JSRef}}</div>
+
+<div>Die statische Methode <code><strong>Reflect</strong></code><strong><code>.apply()</code></strong> ruft eine Zielfunktion mit den spezifizierten Parametern auf.</div>
+
+<div> </div>
+
+<div>{{EmbedInteractiveExample("pages/js/reflect-apply.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Reflect.apply(target, thisParameter, listeDerArgumente)
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt>target</dt>
+ <dd>Die Funktion, die aufgerufen werden soll.</dd>
+ <dt>thisParameter</dt>
+ <dd>Der Wert von <code>this</code> der für den Aufruf bereitgestellt wird.</dd>
+ <dt>listeDerArgumente</dt>
+ <dd>Ein Array ähnliches Objekt welches die Parameter spezifiziert, mit denen die Zielfunktion aufgerufen wird.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Das Resultat des Aufruft, der Zielfunktion mit dem mitgegebenen <code>this</code> und den mitgegebenen Parametern.</p>
+
+<h3 id="Ausnahmen">Ausnahmen</h3>
+
+<p>Es wird ein {{jsxref("TypeError")}} geworfen, wenn die Zielfunktion nicht aufrufbar ist.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>In ES5, ruft man typischerweise {{jsxref("Function.prototype.apply()")}} auf, um eine Funktion aufzurufen, der man einen bestimmten <code>this</code> mitgeben und die Parameter als Array (oder einem <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Indexed_collections#Working_with_array-like_objects">array-like object</a>) definieren möchte.</p>
+
+<pre class="brush: js">Function.prototype.apply.call(Math.floor, undefined, [1.75]);</pre>
+
+<p>Durch <code>Reflect.apply</code> wird dieses Vorhaben kürzer und ist leichter zu verstehen.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Verwendung_von_Reflect.apply()">Verwendung von <code>Reflect.apply()</code></h3>
+
+<pre class="brush: js">Reflect.apply(Math.floor, undefined, [1.75]);
+// 1;
+
+Reflect.apply(String.fromCharCode, undefined, [104, 101, 108, 108, 111]);
+// "hello"
+
+Reflect.apply(RegExp.prototype.exec, /ab/, ['confabulation']).index;
+// 4
+
+Reflect.apply(''.charAt, 'ponies', [3]);
+// "i"
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-reflect.apply', 'Reflect.apply')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Ursprüngliche Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-reflect.apply', 'Reflect.apply')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_kompabilität">Browser kompabilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Reflect.apply")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Reflect")}}</li>
+ <li>{{jsxref("Function.prototype.apply()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/reflect/construct/index.html b/files/de/web/javascript/reference/global_objects/reflect/construct/index.html
new file mode 100644
index 0000000000..29da55d15b
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/reflect/construct/index.html
@@ -0,0 +1,157 @@
+---
+title: Reflect.construct()
+slug: Web/JavaScript/Reference/Global_Objects/Reflect/construct
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/construct
+---
+<div>{{JSRef}}</div>
+
+<div>Die statische Methode <code><strong>Reflect</strong></code><strong><code>.construct()</code></strong> verhält sich wie der <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> operator</a>, allerdings in Form einer Funktion.</div>
+
+<div>Sie ist das Equivalent zu <code>new target(...args)</code>. Es existiert zudem die Option, einen anderen Prototyp zu definieren.</div>
+
+<div> </div>
+
+<div>{{EmbedInteractiveExample("pages/js/reflect-construct.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Reflect.construct(target, listeDerArgumente[, newTarget])
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt>target</dt>
+ <dd>Die Funktion, die aufgerufen werden soll.</dd>
+ <dt>listeDerArgumente</dt>
+ <dd>Ein Array ähnliches Objekt welches die Parameter spezifiziert, mit denen die Zielfunktion aufgerufen wird.</dd>
+ <dt><code>newTarget</code> {{optional_inline}}</dt>
+ <dd>Der Construktor dessen Typ genutzt werden soll. Siehe auch den <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a></code> Operator. Wenn <code>newTarget</code> nicht existiert, ist es <code>target</code>.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine neue Instanz des <code>target</code> (oder <code>newTarget</code>, wenn vorhanden), Initialisiert durch das <code>target</code> als Konstruktor mit den gegebenen Parametern.</p>
+
+<h3 id="Ausnahmen">Ausnahmen</h3>
+
+<p>Es wird ein {{jsxref("TypeError")}} geworfen, Wenn <code>target</code> or <code>newTarget</code> keine Konstruktoren sind.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p><code>Reflect.construct</code> erlaubt es dir, einen Konstruktor mit einer variablen Anzahl von Parametern aufzurufen. (Was auch möglich ist, bai Verwendung des <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">spread operator</a> in Kombination mit dem <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new operator</a>).</p>
+
+<pre class="brush: js">var obj = new Foo(...args);
+var obj = Reflect.construct(Foo, args);
+</pre>
+
+<p> </p>
+
+<h3 id="Reflect.construct()_vs_Object.create()"><code>Reflect.construct()</code> vs <code>Object.create()</code></h3>
+
+<p>Befor wir mit der Einführung von <code>Reflect</code> beginnen. Objekte können durch von <code>Object.create()</code> mithilfe einer beliebigen Kombination aus Konstruktor und Prototyp erstellt werden.</p>
+
+<pre class="brush: js">function OneClass() {
+    this.name = 'one';
+}
+
+function OtherClass() {
+    this.name = 'other';
+}
+
+// Calling this:
+var obj1 = Reflect.construct(OneClass, args, OtherClass);
+
+// ...has the same result as this:
+var obj2 = Object.create(OtherClass.prototype);
+OneClass.apply(obj2, args);
+
+console.log(obj1.name); // 'one'
+console.log(obj2.name); // 'one'
+
+console.log(obj1 instanceof OneClass); // false
+console.log(obj2 instanceof OneClass); // false
+
+console.log(obj1 instanceof OtherClass); // true
+console.log(obj2 instanceof OtherClass); // true
+</pre>
+
+<p>Obwohl das Endergebnis das gleiche ist, gibt es einen wichtigen Unterschied im Prozess.</p>
+
+<p>Wenn <code>Object.create()</code> und <code>Function.prototype.apply()</code> verwendet werden, zeigt der <code>new.target</code> Operator innerhalb der als Konstruktor verwendeten Funktion auf <code>undefined</code>, da das <code>newTarget</code> nicht zum Erstellen des Objekts verwendet wird.</p>
+
+<p>Wenn Sie dagegen <code>Reflect.construct()</code> aufrufen, zeigt der <code>new.target</code> Operator auf den <code>newTarget</code> Parameter, sofern angegeben und auf <code>target</code>, falls nicht.</p>
+
+<pre class="brush: js">function OneClass() {
+    console.log('OneClass');
+    console.log(new.target);
+}
+function OtherClass() {
+    console.log('OtherClass');
+    console.log(new.target);
+}
+
+var obj1 = Reflect.construct(OneClass, args);
+// Output:
+//     OneClass
+//     function OneClass { ... }
+
+var obj2 = Reflect.construct(OneClass, args, OtherClass);
+// Output:
+//     OneClass
+//     function OtherClass { ... }
+
+var obj3 = Object.create(OtherClass.prototype);
+OneClass.apply(obj2, args);
+// Output:
+//     OneClass
+//     undefined</pre>
+
+<p> </p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Verwendung_Reflect.construct()">Verwendung <code>Reflect.construct()</code></h3>
+
+<pre class="brush: js">var d = Reflect.construct(Date, [1776, 6, 4]);
+d instanceof Date; // true
+d.getFullYear(); // 1776
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-reflect.construct', 'Reflect.construct')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Ursprüngliche Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-reflect.construct', 'Reflect.construct')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_kompabilität">Browser kompabilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Reflect.construct")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Reflect")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code></a></li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a></code></li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/reflect/index.html b/files/de/web/javascript/reference/global_objects/reflect/index.html
new file mode 100644
index 0000000000..3ba358f140
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/reflect/index.html
@@ -0,0 +1,88 @@
+---
+title: Reflect
+slug: Web/JavaScript/Reference/Global_Objects/Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect
+---
+<div>{{JSRef}}</div>
+
+<div>Reflect ist ein Standardobjekt, das Methoden für abfangfähige JavaScript-Operationen bereitstellt.</div>
+
+<div>Die Methoden entsprechen denen des <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler">proxy handlers</a>.</div>
+
+<div><code>Reflect</code> ist kein Funktionsobjekt und verfügt daher über keinen Konstruktor.</div>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Im Gegensatz zu den meisten globalen Objekten hat <code>Reflect</code> keinen Konstruktor. Sie können es nicht mit einem <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> operator</a> verwenden, oder <code>Reflect</code> als Funktion aufrufen.</p>
+
+<p>Alle Eigenschaften und Methoden von <code>Reflect</code> sind statisch (wie bei {{jsxref("Math")}}).</p>
+
+<h2 id="Methoden">Methoden</h2>
+
+<p>Das <code>Reflect</code>-Objekt stellt die folgenden statischen Funktionen bereit, die dieselben Namen haben wie die Methoden des <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler">proxy handler</a>. Einige dieser Methoden sind exakt die selben wie bei entsprechenden Methoden des {{jsxref("Object")}}.</p>
+
+<dl>
+ <dt>{{jsxref("Reflect.apply()")}}</dt>
+ <dd>Ruft eine Zielfunktion mit Argumenten auf, die Argumente werden im Parameter args angegeben. Siehe auch {{jsxref("Function.prototype.apply()")}}.</dd>
+ <dt>{{jsxref("Reflect.construct()")}}</dt>
+ <dd> Der <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> operator</a> als Funktion. Equivalent zu <code>new target(...args)</code>. Bietet die optionale Möglichkeit, einen anderen Prototyp anzugeben.</dd>
+ <dt>{{jsxref("Reflect.defineProperty()")}}</dt>
+ <dd>Ähnlich zu {{jsxref("Object.defineProperty()")}}. Gibt einen {{jsxref("Boolean")}} zurück.</dd>
+ <dt>{{jsxref("Reflect.deleteProperty()")}}</dt>
+ <dd>Der <a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete"><code>delete</code> operator</a> als Funktion. Ähnlich zu dem Aufruf <code>delete target[name]</code>.</dd>
+ <dt>{{jsxref("Reflect.get()")}}</dt>
+ <dd>Eine Funktion, die den Wert von Eigenschaften/Properties zurückgibt.</dd>
+ <dt>{{jsxref("Reflect.getOwnPropertyDescriptor()")}}</dt>
+ <dd>Ähnlich zu {{jsxref("Object.getOwnPropertyDescriptor()")}}. Gibt einen Eigenschaftsdeskriptor der angegebenen Eigenschaft, oder {{jsxref("undefined")}} zurück.</dd>
+ <dt>{{jsxref("Reflect.getPrototypeOf()")}}</dt>
+ <dd>Gleich wie {{jsxref("Object.getPrototypeOf()")}}.</dd>
+ <dt>{{jsxref("Reflect.has()")}}</dt>
+ <dd>Der <a href="/en-US/docs/Web/JavaScript/Reference/Operators/in"><code>in</code> operator</a> als Funktion. Gibt einen booleschen Wert zurück, der angibt, ob eine eigene oder geerbte Eigenschaft vorhanden ist.</dd>
+ <dt>{{jsxref("Reflect.isExtensible()")}}</dt>
+ <dd>Gleich wie {{jsxref("Object.isExtensible()")}}.</dd>
+ <dt>{{jsxref("Reflect.ownKeys()")}}</dt>
+ <dd>Gibt ein Array der eigenen (nicht geerbten) Eigenschaftsschlüssel des Zielobjekts zurück.</dd>
+ <dt>{{jsxref("Reflect.preventExtensions()")}}</dt>
+ <dd>Ähnlich zu {{jsxref("Object.preventExtensions()")}}. Gibt einen {{jsxref("Boolean")}} zurück.</dd>
+ <dt>{{jsxref("Reflect.set()")}}</dt>
+ <dd>Eine Funktion, die den Eigenschaften/Properties Werte zuweist. Gibt einen {{jsxref("Boolean")}} zurück, der <code>true</code> ist, wenn die Zuweisung erfolgreich verlief.</dd>
+ <dt>{{jsxref("Reflect.setPrototypeOf()")}}</dt>
+ <dd>
+ <p>Eine Funktion, die den Prototyp eines Objekts festlegt<span style="font-size: 1rem; letter-spacing: -0.00278rem;">.</span></p>
+ </dd>
+</dl>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-reflect-object', 'Reflect')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Ursprüngliche Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-reflect-object', 'Reflect')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Reflect.enumerate wurde entfernt.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_kompatiblität">Browser kompatiblität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Reflect")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Das globale {{jsxref("Proxy")}} Objekt.</li>
+ <li>Das {{jsxref("Proxy.handler", "handler")}} Objekt.</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/regexp/flags/index.html b/files/de/web/javascript/reference/global_objects/regexp/flags/index.html
new file mode 100644
index 0000000000..65956f3c3b
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/regexp/flags/index.html
@@ -0,0 +1,83 @@
+---
+title: RegExp.prototype.flags
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/flags
+tags:
+  - ECMAScript 2015
+  - Eigenschaft
+  - JavaScript
+  - Prototyp
+  - Referenz
+  - RegExp
+  - Regular Expressions
+  - Reguläre Expressionen
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/flags
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>flags</code></strong> Eigenschaft gibt einen String mit den Flags des RegExp-Objektes zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/regexp-prototype-flags.html")}}</div>
+
+<p class="hidden">Der Code für dieses interaktive Beispiel ist in einem GitHub Repository gespeichert. Wenn du etwas zum Interaktiven-Beispiel-Project beitragen möchtest, klone bitte <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und sende uns Pull-Requests.</p>
+
+<div>{{js_property_attributes(0, 0, 1)}}</div>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Flags in der <code>flags</code> Eigenschaft sind alphabetisch sortiert (von links nach rechts, z.B. <code>"gimuy"</code>).</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Die_flags_benutzen">Die <code>flags</code> benutzen</h3>
+
+<pre class="brush: js">/foo/ig.flags;   // "gi"
+/bar/myu.flags;  // "muy"
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js">if (RegExp.prototype.flags === undefined) {
+  Object.defineProperty(RegExp.prototype, 'flags', {
+    configurable: true,
+    get: function() {
+      return this.toString().match(/[gimuy]*$/)[0];
+    }
+  });
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-get-regexp.prototype.flags', 'RegExp.prototype.flags')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initielle Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-regexp.prototype.flags', 'RegExp.prototype.flags')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatiblität">Browser-Kompatiblität</h2>
+
+<div>
+<div class="hidden">Die Kompatiblitäts-Tabelle auf dieser Seite ist generiert von strukturierter Daten. Wenn du etwas dazu beitragen möchtest, solltest du dir <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> anschauen und uns Pull-Requests schicken.</div>
+
+<p> {{Compat("javascript.builtins.RegExp.flags")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("RegExp.prototype.source")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/regexp/index.html b/files/de/web/javascript/reference/global_objects/regexp/index.html
new file mode 100644
index 0000000000..9639ba265f
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/regexp/index.html
@@ -0,0 +1,560 @@
+---
+title: RegExp
+slug: Web/JavaScript/Reference/Global_Objects/RegExp
+tags:
+  - JavaScript
+  - Klasse
+  - Referenz
+  - RegExp
+  - Reguläre Ausdrücke
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp
+---
+<p>{{JSRef}}</p>
+
+<p>Der <code><strong>RegExp</strong> constructor</code> erstellt ein Objekt mit regulären Werten, um diese dann als Muster an einem Text anzuwenden.</p>
+
+<p>Für eine Einführung über reguläre Ausdrücke, lies das <a href="/en-US/docs/JavaScript/Guide/Regular_Expressions">Kapitel Regular Expressions im JavaScript Guide</a> (englisch).</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate"><code>/<em>muster</em>/<em>flags</em></code>
+
+<code>RegExp(<em>muster</em> <em>[, flags]</em>)</code>
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>muster</code></dt>
+ <dd>Text des regulären Ausdrucks.</dd>
+ <dt><code>flags</code></dt>
+ <dd>
+ <p>Optional, flags kann eine Zeichenkette mit einer beliebige Kombination folgender Werte sein:</p>
+
+ <dl>
+  <dt><code>g</code></dt>
+  <dd>globale Suche (nach einem Treffer fortsetzen)</dd>
+  <dt><code>i</code></dt>
+  <dd>Groß-/Kleinschreibung ignorieren</dd>
+  <dt><code>m</code></dt>
+  <dd>multiline; behandelt den Suchkontext als Mehrfachzeilen, d.h. Anfang- und Endeanker (^ und $) entsprechen dem Anfang bzw. Ende <em>jeder einzelnen</em> Zeile (begrenzt durch \n oder \r), nicht nur dem Anfang und Ende der gesamten zu durchsuchenden Zeichenkette.</dd>
+  <dt><code>y</code> {{Fx_minversion_inline(3)}} {{non-standard_inline}}</dt>
+  <dd>sticky; matches only from the index indicated by the <code>lastIndex</code> property of this regular expression in the target string (and does not attempt to match from any later indexes). This allows the match-only-at-start capabilities of the character "^" to effectively be used at any location in a string by changing the value of the <code>lastIndex</code> property.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Es bestehen zwei Möglichkeiten, ein RegExp-Objekt zu erzeugen: Eine literale Notation und ein Konstruktor. In der literaren Version werden im Gegensatz zu der Konstruktorversion keine Anführungszeichen verwendet, um Zeichenketten zu kennzeichnen. Dementsprechend erzeugen beide der folgenden Zeilen den gleichen regulären Ausdruck:</p>
+
+<pre class="brush: js notranslate">/ab+c/i;
+new RegExp("ab+c", "i");
+</pre>
+
+<p>Die literale Notation stellt eine Kompilierung des regulären Ausdrucks während der Auswertung des Ausdrucks bereit. Nutzen Sie die literale Notation, wenn der reguläre Ausdruck unverändert bleiben wird. Wenn Sie zum Beispiel die literale Notation für die Erzeugung eines regulären Ausdruck verwenden, um ihn in einer Schleife zu anzuwenden, wird der reguläre Ausdruck nicht in jedem Schleifendurchlauf rekompiliert.</p>
+
+<p>Der Konstruktor des RegExp-Objekts, z.B. <code>new RegExp("ab+c")</code>, stellt eine Laufzeitkompilierung des regulären Ausdrucks bereit. Nutzen Sie die Konstruktor-Funktion, wenn sich das reguläre Suchmuster ändern wird oder Sie das Muster nicht kennen und es aus einer anderen Quelle wie z.B. einer Benutzereingabe beziehen.</p>
+
+<p>Bei Verwendung der Konstruktor-Funktion sind die normalen Zeichenfolgenmaskierungsregeln (Voranstellen eines Rückwärtsschrägstrichs (\) vor Sonderzeichen innerhalb von Zeichenketten) einzuhalten. Zum Beispiel sind folgende Zeilen äquivalent:</p>
+
+<pre class="brush: js notranslate">var re = /\w+/;
+var re = new RegExp("\\w+");
+</pre>
+
+<h2 id="Bedeutung_spezieller_Zeichen_in_regulären_Ausdrücken">Bedeutung spezieller Zeichen in regulären Ausdrücken</h2>
+
+<ul>
+ <li><a href="#Zeichenklassen">Zeichenklassen</a></li>
+ <li><a href="#Zeichenauswahl">Zeichenauswahl</a></li>
+ <li><a href="#Bereichsgrenzen">Bereichsgrenzen</a></li>
+ <li><a href="#Gruppierung-und-Rueckwaertsreferenz">Gruppierung und Rückwärtsreferenzen</a></li>
+ <li><a href="#Quantoren">Quantoren</a></li>
+</ul>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr id="character-classes">
+   <th colspan="2"><a name="Zeichenklassen">Zeichenklassen</a></th>
+  </tr>
+  <tr>
+   <th>Zeichen</th>
+   <th>Bedeutung</th>
+  </tr>
+  <tr>
+   <td><code>.</code></td>
+   <td>
+    <p>(Punkt, Satzendezeichen) stimmt mit jedem Einzelzeichen <em>außer</em> den Zeilenvorschub- und Wagenrücklaufzeichen (<code>\n</code> <code>\r</code> <code>\u2028</code> oder <code>\u2029</code>) überein.</p>
+
+    <p>Zu beachten ist, dass das <code>m</code> <em>multiline flag</em> nicht das Punktverhalten verändert. Um ein Musterentsprechung über mehrere Zeilen hinweg zu erreichen, kann die leere negative Zeichenauswahl <code>[^]</code> verwendet werden, sie stimmt mit jedem Zeichen einschließlich Zeilenumbrüchen überein.</p>
+
+    <p><code>/.y/</code> passt z.B. auf "my" und "ay", nicht aber auf "yes"  in "yes make my day".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\d</code></td>
+   <td>
+    <p>Stimmt mit einer arabischen Ziffer überein. Äquivalent zu <code>[0-9]</code>.</p>
+
+    <p><code>/\d/</code> or <code>/[0-9]/</code> passt z.B. auf '2' in "B2 ist die Zimmernummer."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\D</code></td>
+   <td>
+    <p>Stimmt mit jedem Zeichen überein, das keine arabische Ziffer ist. Äquivalent zu <code>[^0-9]</code>.</p>
+
+    <p><code>/\D/</code> or <code>/[^0-9]/</code> passt z.B. auf 'B' in "B2 ist die Zimmernummer."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\w</code></td>
+   <td>
+    <p>Stimmt mit einem alphanumerischen Zeichen (Wortzeichen) einschließlich dem Unterstrich überein. Äquivalent zu <code>[A-Za-z0-9_]</code>.</p>
+
+    <p><code>/\w/</code> passt zum Beispiel auf 'A' in "Apfel", '5' in "€5,28," und '3' in "3D."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\W</code></td>
+   <td>
+    <p>Stimmt mit jedem Zeichen überein, das kein alphanumerisches Zeichen (Wortzeichen) ist. Äquivalent zu <code>[^A-Za-z0-9_]</code>.</p>
+
+    <p><code>/\W/</code> or <code>/[^A-Za-z0-9_]/</code> passt z.B. auf '%' in "50%."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\s</code></td>
+   <td>
+    <p>Stimmt mit einem einzelnen Leerraumzeichen überein (Leerzeichen, Tabulator, Seitenvorschub, Zeilenvorschub und weitere Unicode-Zeichen). Äquivalent zu <code>[ \f\n\r\t\v​\u00a0\u1680​\u180e\u2000​\u2001\u2002​\u2003\u2004​ \u2005\u2006​\u2007\u2008​\u2009\u200a​\u2028\u2029​​\u202f\u205f​ \u3000]</code>.</p>
+
+    <p><code>/\s\w*/</code> passt z.B. auf ' bar' in "foo bar."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\S</code></td>
+   <td>
+    <p>Stimmt mit einem einzelnen Zeichen überein, das kein Leerraumzeichen ist. (Nicht-Leerraumzeichen).<br>
+     Äquivalent zu <code>[^\s]</code> und zu <code>[^ \f\n\r\t\v​\u00a0\u1680​\u180e\u2000​\u2001\u2002​\u2003\u2004​ \u2005\u2006​\u2007\u2008​\u2009\u200a​\u2028\u2029​​\u202f\u205f​ \u3000]</code>.</p>
+
+    <p><code>/\S\w*/</code> passt z.B. auf 'foo' in "foo bar."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\t</code></td>
+   <td>Stimmt mit einem Tabulatorzeichen überein.</td>
+  </tr>
+  <tr>
+   <td><code>\r</code></td>
+   <td>Stimmt mit einem Wagenrücklaufzeichen überein.</td>
+  </tr>
+  <tr>
+   <td><code>\n</code></td>
+   <td>Stimmt mit einem Zeilenvorschub überein.</td>
+  </tr>
+  <tr>
+   <td><code>\v</code></td>
+   <td>Stimmt mit einem vertikalen Tabulatorzeichen überein.</td>
+  </tr>
+  <tr>
+   <td><code>\f</code></td>
+   <td>Stimmt mit einem Seitenvorschub überein.</td>
+  </tr>
+  <tr>
+   <td><code>[\b]</code></td>
+   <td>
+    <p>Stimmt mit einem Rücklöschzeichen (Backspace) überein. (Nicht zu verwechseln mit <code>\b</code>)</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\0</code></td>
+   <td>Stimmt mit einem NUL-Zeichen überein. (Keine weiteren Ziffern dürfen folgen!)</td>
+  </tr>
+  <tr>
+   <td><code>\c<em>X</em></code></td>
+   <td>
+    <p>Wobei <code><em>X</em></code> ein Buchstabe von A - Z ist. Stimmt mit einem Steuerzeichen überein.</p>
+
+    <p><code>/\cM/</code> passt z.B. auf Steuerung-M in einer Zeichenkette.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\x<em>hh</em></code></td>
+   <td>
+    <p>Stimmt mit einem Zeichen mit dem Code <code><em>hh</em></code> (zwei hexadezimale Ziffern) überein.</p>
+
+    <p>/foo\x20bar/ passt z.B. auf 'o b' in "foo bar".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\u<em>hhhh</em></code></td>
+   <td>Stimmt mit einem Zeichen mit dem Unicode <code><em>hhhh</em></code> (vier hexadezimale Ziffern) überein.</td>
+  </tr>
+  <tr>
+   <td><code>\</code></td>
+   <td>
+    <p>Bei einem Zeichen, das normalerweise als Literal behandelt wird, signalisiert ein vorangestellter Rückschrägstrich, dass es als Spezialzeichen und nicht als Literal zu interpretieren ist.</p>
+
+    <p>Z.B. passt <code>/b/</code> auf das Zeichen <code>'b'</code>. Durch Voranstellen des Rückschrägstriches vor das "b", also <code>/\b/</code>, bekommt das Zeichen eine besondere Bedeutung und passt auf eine Wordgrenze.</p>
+
+    <p><em>oder</em></p>
+
+    <p>Bei einem Zeichen, das normalerweise als Zeichen mit spezieller Bedeutung interpretiert wird, signalisiert ein vorangestellter Rückschrägstrich, dass es ohne besondere Bedeutung als Literal interpretiert werden soll.</p>
+
+    <p>Zum Beispiel ist * Quantor-Spezialzeichen, das eine Übereinstimmung mit null oder mehreren Vorkommen des vorausgehenden Zeichens bedeutet; z.B. bedeutet <code>/a*/</code> eine Übereinstimmung von null oder mehr "a"s. Um dem "<code>*"</code> als Literal zu entsprechen, wird ein Rückschrägstrich vorangestellt; z.B. passt <code>/a\*/</code> auf 'a*'.</p>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr id="character-sets">
+   <th colspan="2">
+    <p><a name="Zeichenauswahl">Zeichenauswahl</a></p>
+   </th>
+  </tr>
+  <tr>
+   <th>Zeichen</th>
+   <th>Bedeutung</th>
+  </tr>
+  <tr>
+   <td><code>[xyz]</code></td>
+   <td>
+    <p>Zeichenauswahl, stimmt mit einem Beliebigen der eingeschlossenen Zeichen überein. Mittels eines Bindestriches kann ein Bereich von Zeichen angegeben werden.</p>
+
+    <p><code>[abcd]</code> ist gleichbedeutend mit<code>[a-d]</code> und passt auf 'b' in "brisket" und 'c' in "chop".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>[^xyz]</code></td>
+   <td>
+    <p>Eine negative bzw. komplementäre Zeichenauswahl. Das bedeutet eine Übereinstimmung mit jedem Zeichen, das <em>nicht</em> in den eckigen Klammern eingeschlossen ist. Mittels eines Bindestriches kann ein Bereich von Zeichen angegeben werden.</p>
+
+    <p>Zum Beispiel ist <code>[^abc]</code> gleichbedeutend mit<code> [^a-c]</code>. Beides passt auf 'o' in "bacon" und 'h' in "chop."</p>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr id="boundaries">
+   <th colspan="2"><a name="Bereichsgrenzen">Bereichsgrenzen</a></th>
+  </tr>
+  <tr>
+   <th>Zeichen</th>
+   <th>Bedeutung</th>
+  </tr>
+  <tr>
+   <td><code>^</code></td>
+   <td>
+    <p>Stimmt mit dem Anfang eines Subjekts und, wenn das <em>multiline flag</em> gesetzt ist, auch mit der Stelle unmittelbar nach einem Zeilenumbruchzeichen überein.</p>
+
+    <p><code>/^E/</code> passt z.B. nicht auf 'E' in "ein E" aber auf das erste 'E' in "Ein E."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>$</code></td>
+   <td>
+    <p>Stimmt mit dem Ende eines Subjekts und, wenn das <em>multiline flag</em> gesetzt ist, auch mit der Stelle unmittelbar vor einem Zeilenumbruchzeichen überein.</p>
+
+    <p><code>/t$/</code> passt z.B. auf das 't' in "Brot", nicht aber in "Brote".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\b</code></td>
+   <td>
+    <p>Stimmt mit einer null-breiten Wortgrenze wie zwischen einem Buchstaben und einem Leerzeichen überein. (Nicht zu verwechseln mit der Zeichenklasse <code>[\b]</code>)</p>
+
+    <p><code>/\bno/</code> passt z.B. auf 'no' in "at noon"; <code>/ly\b/</code> passt auf 'ly' in "possibly yesterday."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\B</code></td>
+   <td>
+    <p>Stimmt mit einer null-breiten Nichtwortgrenze wie zwischen zwei Buchstaben oder zwischen zwei Leerzeichen überein.</p>
+
+    <p><code>/\Bon/</code> passt z.B. auf 'on' in "at noon" und <code>/ye\B/</code> passt auf 'ye' in "possibly yesterday."</p>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr id="grouping-back-references">
+   <th colspan="2"><a name="Gruppierung-und-Rueckwaertsreferenz">Gruppierung und Rückwärtsreferenz</a></th>
+  </tr>
+  <tr>
+   <th>Zeichen</th>
+   <th>Bedeutung</th>
+  </tr>
+  <tr>
+   <td><code>(<em>x</em>)</code></td>
+   <td>
+    <p>Stimmt mit <code><em>x</em></code> überein und speichert die Übereinstimmung. Dies wird auch <em>capturing parentheses</em> (engl., aufzeichnende Klammern) genannt.</p>
+
+    <p><code>/(foo)/</code> passt z.B. auf 'foo' in "foo bar" und speichert die Übereinstimmung. Aufgezeichnete Teilzeichenketten können aus den Elementen <code>[1], ..., [n]</code> des Ergebnisfelds (Array) oder den Eigenschaften <code>$1, ..., $9</code> des vordefinierten <code>RegExp</code>-Objekts ausgelesen werden.</p>
+
+    <p>Aufzeichnende Gruppierungen führen zu Performanzeinbußen. Wenn die übereinstimmenden Teilzeichenketten nicht wiederverwendet werden müssen, sind nicht aufzeichnende Klammern zu bevorzugen (siehe weiter unten).</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\<em>n</em></code></td>
+   <td>
+    <p>Wobei <code><em>n</em></code> eine positive Ganzzahl ist. Ein Rückbezug auf die zuletzt gefundene Teilzeichenkette, die der Übereinstimmung mit der n-ten runden Klammer im regulären Ausdruck entspricht (öffnende Klammern gezählt).</p>
+
+    <p><code>/apple(,)\sorange\1/</code> passt z.B. auf 'apple, orange,' in "apple, orange, cherry, peach." und zeichnet das Komma auf. Ein umfassenderes Beispiel folgt im Anschluss an diese Tabelle.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>(?:<em>x</em>)</code></td>
+   <td>Stimmt mit <code><em>x</em></code> überein, speichert die Übereinstimmung aber nicht, auch <em>non-capturing parentheses</em> genannt. Auf die übereinstimmende Teilzeichenkette kann nicht mittels der Elemente <code>[1], ..., [n]</code> des Arrays oder der vordefinierten Eigenschaften <code>$1, ..., $9 </code>des <code>RegExp</code>-Objekts zugegriffen werden .</td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr id="quantifiers">
+   <th colspan="2"><a name="Quantoren">Quantoren</a></th>
+  </tr>
+  <tr>
+   <th>Zeichen</th>
+   <th>Bedeutung</th>
+  </tr>
+  <tr>
+   <td><code>*</code></td>
+   <td>
+    <p>Stimmt mit dem null- oder mehrmaligen Vorkommen des voranstehenden Zeichen überein.</p>
+
+    <p><code>/bo*/</code> passt z.B. auf 'boooo' in "A ghost booooed" und 'b' in "A bird warbled", aber auf nichts in "A goat grunted".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>+</code></td>
+   <td>
+    <p>Stimmt mit dem ein- oder mehrmaligen Vorkommen des voranstehenden Zeichen überein. Äquivalent zu <code>{1,}</code></p>
+
+    <p><code>/ca+/</code> passt z.B. auf 'ca' in "candy" und 'caaa' in "caaandy" aber auf nichts in "cindy".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>*?</code><br>
+    <code>+?</code></td>
+   <td>
+    <p>Passt wie <code>*</code> und<code>+</code> weiter oben, aber der Ausdruck ist nicht gierig, d.h. er passt auf die kürzestmögliche Übereinstimmung.</p>
+
+    <p><code>/_.*?_/</code> passt z.B. auf "_foo_" in "_foo_ _bar_" aber nicht auf "_foo_ _bar_" wie der Ausdruck ohne dem <code>?</code> hinterm <code>*</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>?</code></td>
+   <td>
+    <p>Stimmt mit dem null- oder einmaligen Vorkommen des voranstehenden Zeichens überein.</p>
+
+    <p><code>/e?le?/</code> passt z.B. auf das  'el' in "angel" und auf das 'le' in "angle."</p>
+
+    <p>If used immediately after any of the quantifiers <code>*</code>, <code>+</code>, <code>?</code>, or <code>{}</code>, makes the quantifier non-greedy (matching the minimum number of times), as opposed to the default, which is greedy (matching the maximum number of times).</p>
+
+    <p>Das Fragezeichen wird auch in lookahead assertions verwendet, welche unter <code>(?=)</code>, <code>(?!)</code>, sowie <code>(?:)</code> in dieser Tabelle beschrieben sind.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code><em>x</em>(?=<em>y</em>)</code></td>
+   <td>Passt nur auf <code><em>x</em></code>, wenn <code><em>y</em></code> darauf folgt. Zum Beispiel passt <code>/Jack(?=Sprat)/</code> nur auf 'Jack', wenn danach 'Sprat' folgt. <code>/Jack(?=Sprat|Frost)/</code> passt nur auf 'Jack', wenn 'Sprat' oder 'Frost' folgt. Allerdings ist weder 'Sprat' noch 'Frost' Teil der Übereinstimmungsresultate.</td>
+  </tr>
+  <tr>
+   <td><code><em>x</em>(?!<em>y</em>)</code></td>
+   <td>
+    <p>Passt nur auf <code><em>x</em></code>, wenn darauf nicht <code><em>y</em></code> folgt. <code>/\d+(?!\.)/</code> z.B. stimmt nur mit einer Zahl überein, sofern kein Dezimalpunkt folgt.</p>
+
+    <p><code>/\d+(?!\.)/.exec("3.141")</code> passt auf 141, aber nicht auf 3.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code><em>x</em>|<em>y</em></code></td>
+   <td>
+    <p>Passt entweder auf <code><em>x</em></code> oder <code><em>y</em></code>.</p>
+
+    <p><code>/green|red/</code> passt z.B. auf 'green' in "green apple" und auf 'red' in "red apple."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>{<em>n</em>}</code></td>
+   <td>
+    <p>Wobei <code><em>n</em></code> eine positive Ganzzahl ist. Stimmt mit genau <code><em>n</em></code> Vorkommen des vorausgehenden Zeichens oder Teilausdrucks überein.</p>
+
+    <p><code>/a{2}/</code> passt z.B. auf beide 'a' in "caandy" und die ersten beiden 'a' in "caaandy", nicht aber auf das 'a' in "candy".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>{<em>n</em>,}</code></td>
+   <td>
+    <p>Wobei <code><em>n</em></code> eine positive Ganzzahl ist. Stimmt mit mindestens <code><em>n</em></code> Vorkommen des vorausgehenden Zeichens oder Teilausdrucks überein.</p>
+
+    <p><code>/a{2,}/</code> passt z.B. auf alle 'a' in "caandy" und in "caaaaaaandy.", nicht aber auf das 'a' in "candy".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>{<em>n</em>,<em>m</em>}</code></td>
+   <td>
+    <p>Wobei <code><em>n</em></code> und <code><em>m</em></code> positive Ganzzahlen sind. Stimmt mit mindestens <code><em>n</em></code> und höchstens <code><em>m</em></code> Vorkommen des vorausgehenden Zeichens oder Teilausdrucks überein.</p>
+
+    <p><code>/a{1,3}/</code> passt z.B. auf nichts in "cndy", das 'a' in "candy," die beiden 'a' in "caandy," und die ersten drei 'a' in "caaaaaaandy". Es ist zu beachten, dass bei der Übereinstimmung in "caaaaaaandy" der Treffer "aaa" ist, obwohl in der Originalzeichenkette mehr 'a' vorhanden wären.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Fußnoten">Fußnoten</h3>
+
+<ol>
+ <li>{{endnote("equivalent_s")}}Equivalent to:
+  <p><code>[\t\n\v\f\r \u00a0\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u200b\u2028\u2029\u3000]</code></p>
+ </li>
+ <li>{{endnote("equivalent_S")}}Equivalent to:
+  <p><code>[^\t\n\v\f\r \u00a0\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u200b\u2028\u2029\u3000]</code></p>
+ </li>
+</ol>
+
+<h3 id="Eigenschaften">Eigenschaften</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/JavaScript/Reference/Global_Objects/RegExp/prototype" title="JavaScript/Reference/Global_Objects/RegExp/prototype">prototype</a></dt>
+ <dd>Erlaubt das Hinzufügen von Eigenschaften zu allen Objekten</dd>
+</dl>
+
+<div>{{jsOverrides("Function", "Properties", "prototype")}}</div>
+
+<h3 id="Methoden">Methoden</h3>
+
+<p>Das globale <code>RegExp</code> Objekt hat keine eigenen Methoden. Es erbt allerdings manche Methoden durch die Prototypenkette.{{jsOverrides("Function", "Methods", "prototype")}}</p>
+
+<h2 id="RegExp-Instanzen"><code>RegExp</code>-Instanzen</h2>
+
+<h3 id="Eigenschaften_2">Eigenschaften</h3>
+
+<div>{{page('en/JavaScript/Reference/Global_Objects/RegExp/prototype','Properties')}}</div>
+
+<h3 id="Methoden_2">Methoden</h3>
+
+<div>{{page('en/JavaScript/Reference/Global_Objects/RegExp/prototype','Methods')}}</div>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Beispiel_Anwendung_regulären_Ausdrucks_zur_Datenformatänderung">Beispiel: Anwendung regulären Ausdrucks zur Datenformatänderung</h3>
+
+<p>Das folgende Script nutzt die <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/replace" title="JavaScript/Reference/Global_Objects/String/replace">replace</a></code> Methode und nutzt die vererbte <a href="/en-US/docs/JavaScript/Reference/Global_Objects/String" title="JavaScript/Reference/Global_Objects/String">String</a> Instanz <code>(re)</code> um als Rückgabewert eine Übereinstimmung des Namens <code>(str) </code>in dem Format <em>erster, letzter </em>und im Format <em>letzter</em>, <em>erster </em>zu finden. In dem zu ersetzenden Text nutzt das Script $1 und $2 um das Ergebnis der übereinstimmenden Treffer in der Klammer als Muster des regulären Ausdrucks.</p>
+
+<pre class="brush: js notranslate">var re = /(\w+)\s(\w+)/;
+var str = "John Smith";
+var newstr = str.replace(re, "$2, $1");
+print(newstr);</pre>
+
+<p>Das ergibt: "Smith, John".</p>
+
+<h3 id="Beispiel_Anwendung_eines_regulären_Ausdrucks_auf_mehrzeilige_Texte">Beispiel: Anwendung eines regulären Ausdrucks auf mehrzeilige Texte</h3>
+
+<pre class="brush: js notranslate">var s = "Please yes\nmake my day!";
+s.match(/yes.*day/);
+// Returns null
+s.match(/yes[^]*day/);
+// Returns 'yes\nmake my day'
+</pre>
+
+<h3 id="Beispiel_Anwendung_eines_regulären_Ausdrucks_mit_dem_sticky_flag">Beispiel: Anwendung eines regulären Ausdrucks mit dem "sticky" flag</h3>
+
+<p>Dieses Beispiel zeigt, wie man die feste Kennzeichung (<code>sticky flag</code>) an reguläre Ausdrücke nutzt, um Übereinstimmungen von individuelle Treffer von mehrzeigen Eingaben zu erhalten.</p>
+
+<pre class="brush: js notranslate">var text = "First line\nSecond line";
+var regex = /(\S+) line\n?/y;
+
+var match = regex.exec(text);
+print(match[1]);  // prints "First"
+print(regex.lastIndex); // prints 11
+
+var match2 = regex.exec(text);
+print(match2[1]); // prints "Second"
+print(regex.lastIndex); // prints "22"
+
+var match3 = regex.exec(text);
+print(match3 === null); // prints "true"</pre>
+
+<p>One can test at run-time whether the sticky flag is supported, using <code>try { … } catch { … }</code>. For this, either an <code>eval(…)</code> expression or the <code>RegExp(<var>regex-string</var>, <var>flags-string</var>)</code> syntax must be used (since the <code>/<var>regex</var>/<var>flags</var></code> notation is processed at compile-time, so throws an exception before the <code>catch</code> block is encountered). For example:</p>
+
+<pre class="brush: js notranslate">var supports_sticky;
+try { RegExp('','y'); supports_sticky = true; }
+catch(e) { supports_sticky = false; }
+alert(supports_sticky); // alerts "true"</pre>
+
+<h3 id="Beispiel_Regulärer_Ausdruck_und_Unicode-Zeichen">Beispiel: Regulärer Ausdruck und Unicode-Zeichen</h3>
+
+<p>Wie oben erwähnt treffen Übereinstimmugnen mit <code>\w</code> or <code>\W</code>  nur ASCII basierende Zeichen; als Beispiel: 'a' bis 'z', 'A' bis 'Z', 0 bis 9 und '_'. Um Übereinstimmungen für Zeichensätze anderer Sprachen wie Kyrillisch oder Hebräisch zu erzielen, nutze <code>\uhhhh</code>., während "hhhh" den Unicode-Wert des Zeichensatzes in Hexadezimal angibt. Dieses Beispiel demonstriert wie man Unicode-Zeichen aus einem Wort erhält:</p>
+
+<pre class="brush: js notranslate">var text = "Образец text на русском языке";
+var regex = /[\u0400-\u04FF]+/g;
+
+var match = regex.exec(text);
+print(match[0]);  // prints "Образец"
+print(regex.lastIndex);  // prints "7"
+
+var match2 = regex.exec(text);
+print(match2[0]);  // prints "на" [did not print "text"]
+print(regex.lastIndex);  // prints "15"
+
+// and so on</pre>
+
+<p>Hier ist eine externe Quelle um alle Unicode Blöcke für verschiedene Scripte zu erhalten: <a href="http://kourge.net/projects/regexp-unicode-block" title="http://kourge.net/projects/regexp-unicode-block">Regexp-unicode-block</a></p>
+
+<h3 id="Weitere_nennenswerte_Beispiele">Weitere nennenswerte Beispiele</h3>
+
+<h5 id="Extrahieren_eines_Subdomain-Namens_aus_einer_URL">Extrahieren eines Subdomain-Namens aus einer URL</h5>
+
+<pre class="brush: js notranslate" style="font-size: 14px;">var url = "http://xxx.domain.com";
+print(/[^.]+/.exec(url)[0].substr(7)); // prints "xxx"</pre>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/JavaScript/Guide/Regular_Expressions" title="JavaScript/Guide/Regular_Expressions">Regular Expressions</a> chapter in the <a href="/en-US/docs/JavaScript/Guide" title="JavaScript/Guide">JavaScript Guide</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/regexp/input/index.html b/files/de/web/javascript/reference/global_objects/regexp/input/index.html
new file mode 100644
index 0000000000..d173458705
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/regexp/input/index.html
@@ -0,0 +1,105 @@
+---
+title: RegExp.input ($_)
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/input
+tags:
+  - JavaScript
+  - Property
+  - Reference
+  - RegExp
+  - Regular Expressions
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/input
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>Die nicht-standarde input Propertie ist eine statische Propertie regularer Expressionen, welche die Zeichenkette, der eine reguläre Expression entgegengestellt wird, enthält. <code>RegExp.$_</code> ist ein Alias für diese Propertie.</p>
+
+<h2 id="Syntaxis">Syntaxis</h2>
+
+<pre class="syntaxbox"><code><var>RegExp</var>.input
+RegExp.$_</code>
+</pre>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>input</code>-Propertie ist statisch, ist nicht eine Propertie eines einzigen Obiectes einer regulären Expression. Stattdessen nutzt man es immer als <code>RegExp.input</code> oder</p>
+
+<p>Der Wert der <code>input</code>-Propertie wird verändert, wenn die gesuchte Zeichenkette in der regulären Expression verändert wird und diese Zeichenkette passt.</p>
+
+<h2 id="Beispiele"><code>Beispiele</code></h2>
+
+<h3 id="Verwendung_von_input_und__"><code>Verwendung von <code>input</code> und <code>$_</code></code></h3>
+
+<pre class="brush: js"><code>var re = /hi/g;
+re.test("hi there!");
+RegExp.input;         // "hi there!"
+re.test("foo");       // neuer Test, unpassend
+RegExp.$_;            // "hi there!"
+re.test("hi world!"); // neuer Test, passend
+RegExp.$_;            // "hi world!"
+</code></pre>
+
+<h2 id="Specificationen"><code>Specificationen</code></h2>
+
+<p><code>Non-standard. Nicht Teil von irgendeiner laufenden Specification.</code></p>
+
+<h2 id="Browsercompatibilität"><code>Browsercompatibilität</code></h2>
+
+<div><code>{{CompatibilityTable}}</code></div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th><code>Feature</code></th>
+   <th><code>Chrome</code></th>
+   <th><code>Firefox (Gecko)</code></th>
+   <th><code>Internet Explorer</code></th>
+   <th><code>Opera</code></th>
+   <th><code>Safari</code></th>
+  </tr>
+  <tr>
+   <td><code>Basisunterstützung</code></td>
+   <td><code>{{CompatVersionUnknown}}</code></td>
+   <td><code>{{CompatVersionUnknown}}</code></td>
+   <td><code>{{CompatVersionUnknown}}</code></td>
+   <td><code>{{CompatVersionUnknown}}</code></td>
+   <td><code>{{CompatVersionUnknown}}</code></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th><code>Feature</code></th>
+   <th><code>Android</code></th>
+   <th><code>Chrome for Android</code></th>
+   <th><code>Firefox Mobile (Gecko)</code></th>
+   <th><code>IE Mobile</code></th>
+   <th><code>Opera Mobile</code></th>
+   <th><code>Safari Mobile</code></th>
+  </tr>
+  <tr>
+   <td><code>Basisunterstützung</code></td>
+   <td><code>{{CompatVersionUnknown}}</code></td>
+   <td><code>{{CompatVersionUnknown}}</code></td>
+   <td><code>{{CompatVersionUnknown}}</code></td>
+   <td><code>{{CompatVersionUnknown}}</code></td>
+   <td><code>{{CompatVersionUnknown}}</code></td>
+   <td><code>{{CompatVersionUnknown}}</code></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch"><code>Siehe auch</code></h2>
+
+<ul>
+ <li><code>{{non-standard_inline}} {{jsxref("RegExp.lastMatch", "RegExp.lastMatch ($&amp;)")}}</code></li>
+ <li><code>{{non-standard_inline}} {{jsxref("RegExp.lastParen", "RegExp.lastParen ($+)")}}</code></li>
+ <li><code>{{non-standard_inline}} {{jsxref("RegExp.leftContext", "RegExp.leftContext ($`)")}}</code></li>
+ <li><code>{{non-standard_inline}} {{jsxref("RegExp.rightContext", "RegExp.rightContext ($')")}}</code></li>
+ <li><code>{{non-standard_inline}} {{jsxref("RegExp.n", "RegExp.$1-$9")}}</code></li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/regexp/test/index.html b/files/de/web/javascript/reference/global_objects/regexp/test/index.html
new file mode 100644
index 0000000000..e908792657
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/regexp/test/index.html
@@ -0,0 +1,127 @@
+---
+title: RegExp.prototype.test()
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/test
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/test
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>test()</code></strong> Methode führt eine Suche nach einer Übereinstimmung zwischen einer regular expression und einem String durch. Sie gibt  <code>true</code> oder <code>false</code> zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/regexp-prototype-test.html", "taller")}}</div>
+
+<p class="hidden">Der Quellcode dieses interaktiven Beispiels befindet sich in einer GitHub repository. Wenn Sie sich an diesem Projekt beteiligen möchten, clonen Sie bitte <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und senden Sie uns einen pull request.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate"><code><var>regexObj</var>.test(<var>str</var>)</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code><var>str</var></code></dt>
+ <dd>Der String, mit dem die regular expression verglichen wird.</dd>
+</dl>
+
+<h3 id="Rückgabewerte">Rückgabewerte</h3>
+
+<p><code>true</code> wird zurückgegeben, wenn es eine Übereinstimmung zwischen der regular expression und dem String gibt <code><var>str</var></code>. Anderenfalls wird <code>false</code> zurückgegeben.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Verwenden Sie <code>test()</code>, wenn Sie wissen möchten, ob ein Muster auf einen String zutrifft. <code>test()</code> gibt einen boolschen Wert zurück, wohingegen die {{jsxref("String.prototype.search()")}} Methode den Index der Übereinstimmung, oder wenn keine Übereinstimmung gefunden wird,  <code>-1</code> zurück gibt.</p>
+
+<p>Um mehr Informationen zu erhalten, können Sie alternativ die langsammere {{jsxref("RegExp.prototype.exec()", "exec()")}} Methode verwenden. (Sie ähnelt {{jsxref("String.prototype.match()")}} Methode.)</p>
+
+<p>As with <code>exec()</code> (or in combination with it), <code>test()</code> called multiple times on the same global regular expression instance will advance past the previous match.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="test_anwenden">test() anwenden</h3>
+
+<p>Ein einfaches Beispiel, um zu testen, ob <code>"hello"</code> am Anfang eines Strings enthalten ist. Die Ausgabe ist ein boole'scher Wert.  </p>
+
+<pre class="brush: js notranslate">const str = 'hello world!';
+const result = /^hello/.test(str);
+
+console.log(result); // true
+</pre>
+
+<p>Das folgende Beispiel logt eine Nachricht, die vom Erfolg des Tests abhängt:</p>
+
+<pre class="brush: js notranslate">function testInput(re, str) {
+  let midstring;
+  if (re.test(str)) {
+    midstring = 'contains';
+  } else {
+    midstring = 'does not contain';
+  }
+  console.log(`${str} ${midstring} ${re.source}`);
+}
+</pre>
+
+<h3 id="Anwendung_von_test_mit_dem_Kennzeichen_global">Anwendung von test() mit dem Kennzeichen "global"</h3>
+
+<p>When a regex has the <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#Advanced_searching_with_flags_2">global flag</a> set, <code>test()</code> will advance the {{jsxref("RegExp.lastIndex", "lastIndex")}} of the regex. ({{jsxref("RegExp.prototype.exec()")}} also advances the <code>lastIndex</code> property.)</p>
+
+<p>Further calls to <code>test(<var>str</var>)</code> will resume searching <code><var>str</var></code> starting from <code>lastIndex</code>. The <code>lastIndex</code> property will continue to increase each time <code>test()</code> returns <code>true</code>. </p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> As long as <code>test()</code> returns <code>true</code>, <code>lastIndex</code> will <em>not</em> reset—even when testing a different string!</p>
+</div>
+
+<p>When <code>test()</code> returns <code>false</code>, the calling regex's <code>lastIndex</code> property will reset to <code>0</code>.</p>
+
+<p>The following example demonstrates this behaviour:</p>
+
+<pre class="brush: js notranslate">const regex = /foo/g; // the "global" flag is set
+
+// regex.lastIndex is at 0
+regex.test('foo')     // true
+
+// regex.lastIndex is now at 3
+regex.test('foo')     // false
+
+// regex.lastIndex is at 0
+regex.test('barfoo')  // true
+
+// regex.lastIndex is at 6
+regex.test('foobar')  //false
+
+// regex.lastIndex is at 0
+// (...and so on)
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-regexp.prototype.test', 'RegExp.test')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_-Kompatibilität">Browser -Kompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.RegExp.test")}}</p>
+
+<h2 id="Firefox-specific_notes">Firefox-specific notes</h2>
+
+<p>Prior to Firefox 8, <code>test()</code> was implemented incorrectly. When called without parameters, it would match against the value of the previous input (<code>RegExp.input</code> property) instead of against the string <code>"undefined"</code>.</p>
+
+<p>This is fixed. Now, <code>/undefined/.test()</code> correctly results in <code>true</code>, instead of throwing an error.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Das Kapitel <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Regular Expressions</a> im <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript Guide</a></li>
+ <li>{{jsxref("RegExp")}}</li>
+ <li>{{jsxref("RegExp.prototype")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/set/add/index.html b/files/de/web/javascript/reference/global_objects/set/add/index.html
new file mode 100644
index 0000000000..1df111c1c5
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/set/add/index.html
@@ -0,0 +1,69 @@
+---
+title: Set.prototype.add()
+slug: Web/JavaScript/Reference/Global_Objects/Set/add
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/add
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>add()</code></strong> Methode fügt ein neues Element mit dem angegebenen Wert an das Ende eines <code>Set</code> Objekts hinzu.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/set-prototype-add.html")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate"><var>mySet</var>.add(<var>value</var>);</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code><var>value</var></code></dt>
+ <dd>Der hinzufügende Wert zu dem <code>Set</code> Objekt.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Das <code>Set</code> Objekt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Verwenden_der_add_Methode">Verwenden der add() Methode</h3>
+
+<pre class="brush: js notranslate">var mySet = new Set();
+
+mySet.add(1);
+mySet.add(5).add('some text'); // chainable
+
+console.log(mySet);
+// Set [1, 5, "some text"]
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set.prototype.add', 'Set.prototype.add')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Set.add")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Set")}}</li>
+ <li>{{jsxref("Set.prototype.delete()")}}</li>
+ <li>{{jsxref("Set.prototype.has()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/set/delete/index.html b/files/de/web/javascript/reference/global_objects/set/delete/index.html
new file mode 100644
index 0000000000..f0f4cf5f3e
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/set/delete/index.html
@@ -0,0 +1,84 @@
+---
+title: Set.prototype.delete()
+slug: Web/JavaScript/Reference/Global_Objects/Set/delete
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/delete
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>delete()</code></strong> Methode entfernt das angegebene Element aus einem <code>Set</code> Objekt.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/set-prototype-delete.html")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate"><var>mySet</var>.delete(<var>value</var>);</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code><var>value</var></code></dt>
+ <dd>Der zu entfernende Wert aus <code><var>mySet</var></code>.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Rückgabewert ist <code>true</code> wenn <code><var>value</var></code> erfolgreich aus <code><var>mySet entfernt wurde</var></code>; ansonsten<code>false</code>.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="Verwenden_der_delete_Methode">Verwenden der delete() Methode</h3>
+
+<pre class="brush: js notranslate">const mySet = new Set();
+mySet.add('foo');
+
+mySet.delete('bar'); // Returns false. No "bar" element found to be deleted.
+mySet.delete('foo'); // Returns true.  Successfully removed.
+
+mySet.has('foo');    // Returns false. The "foo" element is no longer present.
+</pre>
+
+<p>Ein Beispiel, wie ein Objekt aus einem Set entfernt werden kann.</p>
+
+<pre class="brush: js notranslate">const setObj = new Set();   // Create a New Set.
+
+setObj.add({x: 10, y: 20}); // Add object in the set.
+
+setObj.add({x: 20, y: 30}); // Add object in the set.
+
+// Delete any point with `x &gt; 10`.
+setObj.forEach(function(point){
+  if (point.x &gt; 10){
+    setObj.delete(point)
+  }
+})
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set.prototype.delete', 'Set.prototype.delete')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Set.delete")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Set")}}</li>
+ <li>{{jsxref("Set.prototype.clear()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/set/has/index.html b/files/de/web/javascript/reference/global_objects/set/has/index.html
new file mode 100644
index 0000000000..6374d80bc6
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/set/has/index.html
@@ -0,0 +1,131 @@
+---
+title: Set.prototype.has()
+slug: Web/JavaScript/Reference/Global_Objects/Set/has
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Prototype
+  - set
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/has
+---
+<div>{{JSRef}}</div>
+
+<p>Die Methode <code><strong>has()</strong></code> prüft, ob ein <code>Set</code>-Objekt ein Element mit dem angegebenen Wert enthält und gibt entsprechend <code>true</code> oder <code>false</code> zurück.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><em>mySet</em>.has(value);</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt>value</dt>
+ <dd>Der zu suchende Wert.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<dl>
+ <dt>Boolean</dt>
+ <dd>Gibt <code>true</code> zurück, falls ein Element mit dem angegebenen Wert innerhalb des <code>Set</code>-Objektes existiert, ansonsten wird <code>false</code> zurückgegeben.</dd>
+</dl>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="has()_verwenden"><code>has()</code> verwenden</h3>
+
+<p>Das folgende Beispiel verwendet <code>has()</code>, um zu prüfen, ob bestimmte Werte in einem <code>Set</code> enthalten sind oder nicht.</p>
+
+<pre class="brush: js">var mySet = new Set();
+mySet.add('foo');
+
+mySet.has('foo');  // returns true
+mySet.has('bar');  // returns false
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-set.prototype.has', 'Set.prototype.has')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set.prototype.has', 'Set.prototype.has')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>38</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("13.0")}}</td>
+   <td>11</td>
+   <td>25</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>38</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("13.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Set")}}</li>
+ <li>{{jsxref("Set.prototype.add()")}}</li>
+ <li>{{jsxref("Set.prototype.delete()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/set/index.html b/files/de/web/javascript/reference/global_objects/set/index.html
new file mode 100644
index 0000000000..27a3b1ad3d
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/set/index.html
@@ -0,0 +1,264 @@
+---
+title: Set
+slug: Web/JavaScript/Reference/Global_Objects/Set
+tags:
+  - ECMAScript6
+  - Global Objects
+  - JavaScript
+  - Referenz
+  - set
+translation_of: Web/JavaScript/Reference/Global_Objects/Set
+---
+<div>{{JSRef}}</div>
+
+<p>Ein <strong><code>Set</code></strong>-Objekt speichert <em>eindeutige</em> Werte jedes beliebigen Typs, egal ob es sich dabei um {{Glossary("Primitive", "primitive Werte")}} oder Objektreferenzen handelt.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/set-prototype-constructor.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">new Set([iterable]);</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt>iterable</dt>
+ <dd>Ein <a href="/de/docs/Web/JavaScript/Reference/Statements/for...of">iterierbares Objekt</a>, dessen Elemente zum neuen <code>Set</code> hinzugefügt werden sollen.<br>
+ Ist dieser Parameter nicht angegeben oder <code>null</code>, wird ein leeres <code>Set</code> erzeugt.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein neues <code>Set</code> Objekt.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p><code>Set</code> Objekte sind Sammlungen von Werten. Man kann über die Elemente iterieren; sie werden in der Reihenfolge ihres Hinzufügens gespeichert. Jeder Wert ist <strong>nur einmal vorhanden</strong>; er ist im <code>Set</code> eindeutig.</p>
+
+<h3 id="Gleichheit">Gleichheit</h3>
+
+<p>Da jeder Wert innerhalb eines <code>Set</code>s eindeutig sein muss, werden alle Werte auf Gleichheit überprüft. In einer früheren Version der ECMAScript Spezifikation verhielt sich der Algorithmus dafür anders als der für den <code>===</code> Operator. Insbesondere waren für <code>Set</code>s <code>+0</code> und <code>-0</code> verschiedene Werte (obwohl sie streng gleich sind). In der ECMAScript 2015 Spezifikation wurde das geändert, so dass <code>+0</code> und <code>-0</code> jetzt jeweils als gleicher Wert gelten. Siehe auch den Eintrag "Key equality for -0 and 0" in der Übersicht zur <a href="#browserkompatibilität">Browserkompatibilität</a>.</p>
+
+<p>{{jsxref("NaN")}} und {{jsxref("undefined")}} können ebenfalls in einem Set gespeichert werden. Dabei werden alle <code>NaN</code> Werte gleichgesetzt, d.h. <code>NaN</code> gilt gleich <code>NaN</code> (auch wenn <code>NaN !== NaN</code>).</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt><code>Set.length</code></dt>
+ <dd>Der Wert der Eigenschaft <code>length</code> ist immer 0.<br>
+ Die Anzahl der Elemente eines Sets befindet sich in {{jsxref("Set.prototype.size")}}.</dd>
+ <dt>{{jsxref("Set.@@species", "get Set[@@species]")}}</dt>
+ <dd>Die Konstruktorfunktion, um abgeleitete Objekte zu erzeugen.</dd>
+ <dt>{{jsxref("Set.prototype")}}</dt>
+ <dd>Prototyp für den <code>Set</code> Konstruktor. Ermöglicht das Hinzufügen von Eigenschaften zu allen <code>Set</code> Objekten.</dd>
+</dl>
+
+<h2 id="Set_Instanzen"><code>Set</code> Instanzen</h2>
+
+<p>Alle <code>Set</code> Instanzen erben von {{jsxref("Set.prototype")}}.</p>
+
+<h3 id="Eigenschaften_2">Eigenschaften</h3>
+
+<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Set/prototype','Properties')}}</p>
+
+<h3 id="Methoden">Methoden</h3>
+
+<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Set/prototype','Methods')}}</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Verwenden_eines_Set_Objekts">Verwenden eines <code>Set</code> Objekts</h3>
+
+<pre class="brush: js notranslate">var mySet = new Set();
+
+mySet.add(1);
+mySet.add(5);
+mySet.add("some text");
+var o = {a: 1, b: 2};
+mySet.add(o);
+
+mySet.has(1); // true
+mySet.has(3); // false, 3 has not been added to the set
+mySet.has(5);              // true
+mySet.has(Math.sqrt(25));  // true
+mySet.has("Some Text".toLowerCase()); // true
+mySet.has(o); // true
+
+mySet.size; // 4
+
+mySet.delete(5); // removes 5 from the set
+mySet.has(5);    // false, 5 has been removed
+
+mySet.size; // 3, we just removed one value
+</pre>
+
+<h3 id="Iterieren_über_ein_Set">Iterieren über ein <code>Set</code></h3>
+
+<pre class="brush: js notranslate">// iterate over items in set
+// logs the items in the order: 1, "some text"
+for (let item of mySet) console.log(item);
+
+// logs the items in the order: 1, "some text"
+for (let item of mySet.keys()) console.log(item);
+
+// logs the items in the order: 1, "some text"
+for (let item of mySet.values()) console.log(item);
+
+// logs the items in the order: 1, "some text"
+//(key and value are the same here)
+for (let [key, value] of mySet.entries()) console.log(key);
+
+// convert set to plain Array
+var myArr = Array.from(mySet); // [1, "some text"]
+
+// the following will also work if run in an HTML document
+mySet.add(document.body);
+mySet.has(document.querySelector("body")); // true
+
+// converting between Set and Array
+mySet2 = new Set([1,2,3,4]);
+mySet2.size; // 4
+[...mySet2]; // [1,2,3,4]
+
+// intersect can be simulated via
+var intersection = new Set([...set1].filter(x =&gt; set2.has(x)));
+
+// difference can be simulated via
+var difference = new Set([...set1].filter(x =&gt; !set2.has(x)));
+
+// Iterate set entries with forEach
+mySet.forEach(function(value) {
+  console.log(value);
+});
+
+// 1
+// 2
+// 3
+// 4</pre>
+
+<h3 id="Gebräuchliche_Set_Operationen_implementieren">Gebräuchliche <code>Set</code> Operationen implementieren</h3>
+
+<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">isSuperset</span><span class="punctuation token">(</span><span class="parameter token"><span class="keyword token">set</span><span class="punctuation token">,</span> subset</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> elem <span class="keyword token">of</span> subset<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span><span class="keyword token">set</span><span class="punctuation token">.</span><span class="function token">has</span><span class="punctuation token">(</span>elem<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+            <span class="keyword token">return</span> <span class="boolean token">false</span><span class="punctuation token">;</span>
+        <span class="punctuation token">}</span>
+    <span class="punctuation token">}</span>
+    <span class="keyword token">return</span> <span class="boolean token">true</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">function</span> <span class="function token">union</span><span class="punctuation token">(</span><span class="parameter token">setA<span class="punctuation token">,</span> setB</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">var</span> _union <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Set</span><span class="punctuation token">(</span>setA<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> elem <span class="keyword token">of</span> setB<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        _union<span class="punctuation token">.</span><span class="function token">add</span><span class="punctuation token">(</span>elem<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+    <span class="keyword token">return</span> _union<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">function</span> <span class="function token">intersection</span><span class="punctuation token">(</span><span class="parameter token">setA<span class="punctuation token">,</span> setB</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">var</span> _intersection <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Set</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> elem <span class="keyword token">of</span> setB<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="keyword token">if</span> <span class="punctuation token">(</span>setA<span class="punctuation token">.</span><span class="function token">has</span><span class="punctuation token">(</span>elem<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+            _intersection<span class="punctuation token">.</span><span class="function token">add</span><span class="punctuation token">(</span>elem<span class="punctuation token">)</span><span class="punctuation token">;</span>
+        <span class="punctuation token">}</span>
+    <span class="punctuation token">}</span>
+    <span class="keyword token">return</span> _intersection<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">function</span> <span class="function token">symmetricDifference</span><span class="punctuation token">(</span><span class="parameter token">setA<span class="punctuation token">,</span> setB</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">var</span> _difference <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Set</span><span class="punctuation token">(</span>setA<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> elem <span class="keyword token">of</span> setB<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="keyword token">if</span> <span class="punctuation token">(</span>_difference<span class="punctuation token">.</span><span class="function token">has</span><span class="punctuation token">(</span>elem<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+            _difference<span class="punctuation token">.</span><span class="function token">delete</span><span class="punctuation token">(</span>elem<span class="punctuation token">)</span><span class="punctuation token">;</span>
+        <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+            _difference<span class="punctuation token">.</span><span class="function token">add</span><span class="punctuation token">(</span>elem<span class="punctuation token">)</span><span class="punctuation token">;</span>
+        <span class="punctuation token">}</span>
+    <span class="punctuation token">}</span>
+    <span class="keyword token">return</span> _difference<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">function</span> <span class="function token">difference</span><span class="punctuation token">(</span><span class="parameter token">setA<span class="punctuation token">,</span> setB</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">var</span> _difference <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Set</span><span class="punctuation token">(</span>setA<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> elem <span class="keyword token">of</span> setB<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        _difference<span class="punctuation token">.</span><span class="function token">delete</span><span class="punctuation token">(</span>elem<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+    <span class="keyword token">return</span> _difference<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="comment token">//Examples</span>
+<span class="keyword token">var</span> setA <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Set</span><span class="punctuation token">(</span><span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">,</span> <span class="number token">2</span><span class="punctuation token">,</span> <span class="number token">3</span><span class="punctuation token">,</span> <span class="number token">4</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
+    setB <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Set</span><span class="punctuation token">(</span><span class="punctuation token">[</span><span class="number token">2</span><span class="punctuation token">,</span> <span class="number token">3</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
+    setC <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Set</span><span class="punctuation token">(</span><span class="punctuation token">[</span><span class="number token">3</span><span class="punctuation token">,</span> <span class="number token">4</span><span class="punctuation token">,</span> <span class="number token">5</span><span class="punctuation token">,</span> <span class="number token">6</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="function token">isSuperset</span><span class="punctuation token">(</span>setA<span class="punctuation token">,</span> setB<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// =&gt; true</span>
+<span class="function token">union</span><span class="punctuation token">(</span>setA<span class="punctuation token">,</span> setC<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// =&gt; Set [1, 2, 3, 4, 5, 6]</span>
+<span class="function token">intersection</span><span class="punctuation token">(</span>setA<span class="punctuation token">,</span> setC<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// =&gt; Set [3, 4]</span>
+<span class="function token">symmetricDifference</span><span class="punctuation token">(</span>setA<span class="punctuation token">,</span> setC<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// =&gt; Set [1, 2, 5, 6]</span>
+<span class="function token">difference</span><span class="punctuation token">(</span>setA<span class="punctuation token">,</span> setC<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// =&gt; Set [1, 2]</span></code></pre>
+
+<h3 id="Array_und_Set"><code>Array</code> und <code>Set</code></h3>
+
+<pre class="brush: js notranslate">var myArray = ["value1", "value2", "value3"];
+
+// Use the regular Set constructor to transform an Array into a Set
+var mySet = new Set(myArray);
+
+mySet.has("value1"); // returns true
+
+// Use the spread operator to transform a set into an Array.
+console.log([...mySet]); // Will show you exactly the same Array as myArray</pre>
+
+<h3 id="Duplikate_entfernen_aus_einem_Array">Duplikate entfernen aus einem <code>Array</code></h3>
+
+<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="comment token">// Use to remove duplicate elements from the array </span>
+
+<span class="keyword token">const</span> numbers <span class="operator token">=</span> <span class="punctuation token">[</span><span class="number token">2</span><span class="punctuation token">,</span><span class="number token">3</span><span class="punctuation token">,</span><span class="number token">4</span><span class="punctuation token">,</span><span class="number token">4</span><span class="punctuation token">,</span><span class="number token">2</span><span class="punctuation token">,</span><span class="number token">3</span><span class="punctuation token">,</span><span class="number token">3</span><span class="punctuation token">,</span><span class="number token">4</span><span class="punctuation token">,</span><span class="number token">4</span><span class="punctuation token">,</span><span class="number token">5</span><span class="punctuation token">,</span><span class="number token">5</span><span class="punctuation token">,</span><span class="number token">6</span><span class="punctuation token">,</span><span class="number token">6</span><span class="punctuation token">,</span><span class="number token">7</span><span class="punctuation token">,</span><span class="number token">5</span><span class="punctuation token">,</span><span class="number token">32</span><span class="punctuation token">,</span><span class="number token">3</span><span class="punctuation token">,</span><span class="number token">4</span><span class="punctuation token">,</span><span class="number token">5</span><span class="punctuation token">]</span>
+
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="punctuation token">[</span><span class="operator token">...</span>new <span class="class-name token">Set</span><span class="punctuation token">(</span>numbers<span class="punctuation token">)</span><span class="punctuation token">]</span><span class="punctuation token">)</span>
+
+<span class="comment token">// [2, 3, 4, 5, 6, 7, 32]</span></code></pre>
+
+<h3 id="String_und_Set"><code>String</code> und <code>Set</code></h3>
+
+<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">var</span> text <span class="operator token">=</span> <span class="string token">'India'</span><span class="punctuation token">;</span>
+
+<span class="keyword token">var</span> mySet <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Set</span><span class="punctuation token">(</span>text<span class="punctuation token">)</span><span class="punctuation token">;</span>  <span class="comment token">// Set ['I', 'n', 'd', 'i', 'a']</span>
+mySet<span class="punctuation token">.</span>size<span class="punctuation token">;</span>  <span class="comment token">// 5</span></code></pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-set-objects', 'Set')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set-objects', 'Set')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität"><a id="browserkompatibilität" name="browserkompatibilität"></a>Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Set")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+ <li>{{jsxref("WeakMap")}}</li>
+ <li>{{jsxref("WeakSet")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/string/charat/index.html b/files/de/web/javascript/reference/global_objects/string/charat/index.html
new file mode 100644
index 0000000000..815eb59bba
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/string/charat/index.html
@@ -0,0 +1,305 @@
+---
+title: String.prototype.charAt()
+slug: Web/JavaScript/Reference/Global_Objects/String/charAt
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/charAt
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>charAt()</code></strong>-Methode gibt das Zeichen an einer bestimmten Stelle eines Strings wieder.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>str</var>.charAt(<var>index</var>)</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>index</code></dt>
+ <dd>Eine Zahl zwischen 0 und <code>str.length-1</code>. Ist kein <code>index</code> gegeben, ist dieser automatisch 0.</dd>
+</dl>
+
+<h3 id="Wiedergegebener_Wert">Wiedergegebener Wert</h3>
+
+<p>Ein String, der das Zeichen an der angegebenen <code>index</code>-Stelle wiedergibt. Wenn <code>index</code> außerhalb der Reichweite liegt, wird ein leerer String zurückgegeben.<br>
+  </p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Zeichen in einem String werden von links nach rechts indexiert. Der Index des ersten Zeichens ist 0, der Index des letzten Zeichens eines Strings namens <code>stringName</code> ist<code> stringName.length - 1</code>.</p>
+
+<p>Wenn kein Index bereitgestellt wird, ist dieser standardmäßig 0.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Wiedergabe_von_Zeichen_an_verschiedenen_Stellen_eines_Strings">Wiedergabe von Zeichen an verschiedenen Stellen eines Strings</h3>
+
+<p>Das folgende Beispiel gibt Zeichen an verschiedenen Orten im String "<code>Brave new world</code>" wieder:</p>
+
+<pre class="brush: js">var anyString = 'Brave new world';
+console.log("Das Zeichen bei Index 0   ist '" + anyString.charAt()   + "'");
+// kein Index definiert, 0 als Standard genutzt
+
+console.log("Das Zeichen bei Index 0   ist '" + anyString.charAt(0)   + "'");
+console.log("Das Zeichen bei Index 1   ist '" + anyString.charAt(1)   + "'");
+console.log("Das Zeichen bei Index 2   ist '" + anyString.charAt(2)   + "'");
+console.log("Das Zeichen bei Index 3   ist '" + anyString.charAt(3)   + "'");
+console.log("Das Zeichen bei Index 4   ist '" + anyString.charAt(4)   + "'");
+console.log("Das Zeichen bei Index 999 ist '" + anyString.charAt(999) + "'");
+</pre>
+
+<p>Diese Zeilen geben folgendes wieder:</p>
+
+<pre class="brush: js">Das Zeichen bei Index 0   ist 'B'
+Das Zeichen bei Index 0   ist 'B'
+Das Zeichen bei Index 1   ist 'r'
+Das Zeichen bei Index 2   ist 'a'
+Das Zeichen bei Index 3   ist 'v'
+Das Zeichen bei Index 4   ist 'e'
+Das Zeichen bei Index 999 ist ''
+</pre>
+
+<h3 id="Erhalten_von_vollständigen_Zeichen">Erhalten von vollständigen Zeichen</h3>
+
+<p>Der folgende Code versichert, dass der Gebrauch eines String-Loops immer das vollständige Zeichen wiedergibt - auch wenn der String Zeichen enthält, die nicht auf der mehrsprachigen Basisebene (MBE) vorhanden sind.</p>
+
+<pre class="brush: js">var str = 'A \uD87E\uDC04 Z'; // direkter Einsatz von nicht MBE-Zeichen auch möglich
+for (var i = 0, chr; i &lt; str.length; i++) {
+  if ((chr = getWholeChar(str, i)) === false) {
+    continue;
+  }
+  // Übernehme diese Zeile zu Beginn jedes Loops,
+  // gib den kompletten String und Iterator an
+  // und gebe eine Variable wieder, die das individuelle Zeichen wiederspiegelt.
+
+  console.log(chr);
+}
+
+function getWholeChar(str, i) {
+  var code = str.charCodeAt(i);
+
+  if (Number.isNaN(code)) {
+    return ''; // Position not found
+  }
+  if (code &lt; 0xD800 || code &gt; 0xDFFF) {
+    return str.charAt(i);
+  }
+
+  // High surrogate (could change last hex to 0xDB7F to treat high private
+  // surrogates as single characters)
+  if (0xD800 &lt;= code &amp;&amp; code &lt;= 0xDBFF) {
+    if (str.length &lt;= (i + 1)) {
+      throw 'High surrogate without following low surrogate';
+    }
+    var next = str.charCodeAt(i + 1);
+      if (0xDC00 &gt; next || next &gt; 0xDFFF) {
+        throw 'High surrogate without following low surrogate';
+      }
+      return str.charAt(i) + str.charAt(i + 1);
+  }
+  // Low surrogate (0xDC00 &lt;= code &amp;&amp; code &lt;= 0xDFFF)
+  if (i === 0) {
+    throw 'Low surrogate without preceding high surrogate';
+  }
+  var prev = str.charCodeAt(i - 1);
+
+  // (could change last hex to 0xDB7F to treat high private
+  // surrogates as single characters)
+  if (0xD800 &gt; prev || prev &gt; 0xDBFF) {
+    throw 'Low surrogate without preceding high surrogate';
+  }
+  // We can pass over low surrogates now as the second component
+  // in a pair which we have already processed
+  return false;
+}
+</pre>
+
+<p>In einer ECMAScript 2016-Umgebung, welche destruktive Benennung erlaubt, ist eine bündigere und  zu gewissem Grad flexiblere Alternative möglich, da es automatisch eine Erhöhung der entsprechenden Variable vornimmt (wenn das Zeichen<br>
+ ein Ersatzpaar ist).</p>
+
+<pre class="brush: js">var str = 'A\uD87E\uDC04Z'; // direkter Einsatz von nicht MBE-Zeichen auch möglich
+for (var i = 0, chr; i &lt; str.length; i++) {
+  [chr, i] = getWholeCharAndI(str, i);
+  // Adapt this line at the top of each loop, passing in the whole string and
+  // the current iteration and returning an array with the individual character
+  // and 'i' value (only changed if a surrogate pair)
+  // Übernehme diese Zeile zu Beginn jedes Loops,
+  // gib den kompletten String und Iterator an
+  // und gebe einen Array wieder, der die individuellen Zeichen und 'i'-Wert wiederspiegelt
+  // (nur geändert, wenn Ersatzpaar).
+
+  console.log(chr);
+}
+
+function getWholeCharAndI(str, i) {
+  var code = str.charCodeAt(i);
+
+  if (Number.isNaN(code)) {
+    return ''; // Position nicht gefunden
+  }
+  if (code &lt; 0xD800 || code &gt; 0xDFFF) {
+    return [str.charAt(i), i]; // Normales Zeichen, 'i' bleibt gleich
+  }
+
+  // High surrogate (could change last hex to 0xDB7F to treat high private
+  // surrogates as single characters)
+  if (0xD800 &lt;= code &amp;&amp; code &lt;= 0xDBFF) {
+    if (str.length &lt;= (i + 1)) {
+      throw 'High surrogate without following low surrogate';
+    }
+    var next = str.charCodeAt(i + 1);
+      if (0xDC00 &gt; next || next &gt; 0xDFFF) {
+        throw 'High surrogate without following low surrogate';
+      }
+      return [str.charAt(i) + str.charAt(i + 1), i + 1];
+  }
+  // Low surrogate (0xDC00 &lt;= code &amp;&amp; code &lt;= 0xDFFF)
+  if (i === 0) {
+    throw 'Low surrogate without preceding high surrogate';
+  }
+  var prev = str.charCodeAt(i - 1);
+
+  // (could change last hex to 0xDB7F to treat high private surrogates
+  // as single characters)
+  if (0xD800 &gt; prev || prev &gt; 0xDBFF) {
+    throw 'Low surrogate without preceding high surrogate';
+  }
+  // Return the next character instead (and increment)
+  return [str.charAt(i + 1), i + 1];
+}
+</pre>
+
+<h3 id="Korrigiere_charAt()_um_Zeichen_der_nicht_mehrsprachigen_Basisebene_(MBE)_zu_unterstützen">Korrigiere <code>charAt()</code>, um Zeichen der nicht mehrsprachigen Basisebene (MBE) zu unterstützen</h3>
+
+<p><br>
+  Das obige Beispiel dürfte häufiger für diejenigen hilfreich sein, die nicht MBE-Zeichen unterstützen möchten (da man nicht wissen muss, wo nicht MBE-Zeichen vorkommen).  Falls man wünscht (durch Angabe eines Indexwerts) die Ersatzpaare innerhalb eines Strings als Einzelcharakter zu behandeln, kann man folgendes nutzen:</p>
+
+<pre class="brush: js">function fixedCharAt(str, idx) {
+  var ret = '';
+  str += '';
+  var end = str.length;
+
+  var surrogatePairs = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
+  while ((surrogatePairs.exec(str)) != null) {
+    var li = surrogatePairs.lastIndex;
+    if (li - 2 &lt; idx) {
+      idx++;
+    } else {
+      break;
+    }
+  }
+
+  if (idx &gt;= end || idx &lt; 0) {
+    return '';
+  }
+
+  ret += str.charAt(idx);
+
+  if (/[\uD800-\uDBFF]/.test(ret) &amp;&amp; /[\uDC00-\uDFFF]/.test(str.charAt(idx + 1))) {
+    // Gehe eins weiter, da eins der Zeichen Teil eines Ersatzpaares ist
+    ret += str.charAt(idx + 1);
+  }
+  return ret;
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>erste Definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.4', 'String.prototype.charAt')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.charat', 'String.prototype.charAt')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.charat', 'String.prototype.charAt')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Standardunterstützung</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome für Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td> Standardunterstützung</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.indexOf()")}}</li>
+ <li>{{jsxref("String.prototype.lastIndexOf()")}}</li>
+ <li>{{jsxref("String.prototype.charCodeAt()")}}</li>
+ <li>{{jsxref("String.prototype.codePointAt()")}}</li>
+ <li>{{jsxref("String.prototype.split()")}}</li>
+ <li>{{jsxref("String.fromCodePoint()")}}</li>
+ <li><a href="https://mathiasbynens.be/notes/javascript-unicode">JavaScript has a Unicode problem – Mathias Bynens</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/string/concat/index.html b/files/de/web/javascript/reference/global_objects/string/concat/index.html
new file mode 100644
index 0000000000..548135330f
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/string/concat/index.html
@@ -0,0 +1,140 @@
+---
+title: String.prototype.concat()
+slug: Web/JavaScript/Reference/Global_Objects/String/concat
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/concat
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>concat()</code></strong> Methode vereint den Text von einem oder mehreren Strings und gibt einen neuen String zurück.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>str</var>.concat(<var>string2</var>[, <var>string3</var>, ..., <var>stringN</var>])</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>string2...string<em>N</em></code></dt>
+ <dd>Strings die zu einem neuen String vereint werden sollen.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein neuer String, der die Texte der Strings hintereinander enthält.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>concat()</code> Funktion kombiniert die Texte von einem oder mehreren Strings und gibt einen neuen String zurück. Das ändern des Textes eines Strings hat keine Auswirkungen auf die anderen Strings.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_concat()">Einsatz von <code>concat()</code></h3>
+
+<p>Das folgende Beispiel kombiniert Strings in einen neuen String.</p>
+
+<pre class="brush: js">var hello = 'Hello, ';
+console.log(hello.concat('Kevin', ' have a nice day.'));
+
+/* Hello, Kevin have a nice day. */
+</pre>
+
+<h2 id="Performance">Performance</h2>
+
+<p>Es wird ausdrücklich empfohlen {{jsxref("Operators/Assignment_Operators", "Zuweisungsoperatoren", "", 1)}} (<code>+</code>, <code>+=</code>) statt der <code>concat()</code> Methode zu benutzen. Sie hierfür diesen <a href="http://jsperf.com/concat-vs-plus-vs-join">Performancetest</a>.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.6', 'String.prototype.concat')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.concat', 'String.prototype.concat')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.concat', 'String.prototype.concat')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+ <li>{{jsxref("Operators/Assignment_Operators", "Assignment operators", "", 1)}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/string/endswith/index.html b/files/de/web/javascript/reference/global_objects/string/endswith/index.html
new file mode 100644
index 0000000000..73f37a9692
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/string/endswith/index.html
@@ -0,0 +1,148 @@
+---
+title: String.prototype.endsWith()
+slug: Web/JavaScript/Reference/Global_Objects/String/endsWith
+tags:
+  - JavaScript
+  - Méthode
+  - Prototyp
+  - Referenz
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/endsWith
+---
+<div>{{JSRef}}</div>
+
+<p>Die Methode <strong><code>endsWith()</code></strong> bestimmt, ob ein String das Ende eines anderen Strings ist, und liefert entsprechend true oder false zurück.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>str</var>.endsWith(<var>suchString</var>[, <var>position</var>])</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>suchString</code></dt>
+ <dd>Der String, nach dem am Ende von str gesucht wird.</dd>
+ <dt><code>position</code></dt>
+ <dd>Optional. Durchsucht str, als wäre es nur <strong>position</strong> Zeichen lang. Standardmäßig wird die Länge von str benutzt, wird automatisch auf die Länge von str gebracht, falls diese überschritten wird.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p><code>Falls suchString das Ende von str ist, wird </code><strong><code>true</code></strong> zurückgeliefert, andernfalls wird <strong><code>false</code></strong> zurückgeliefert.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Diese Methode bestimmt, ob ein String das Ende eines anderen Strings ist. Die Methode unterscheidet zwischen Groß- und Kleinschreibung.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Benutzung_von_endsWith()">Benutzung von <code>endsWith()</code></h3>
+
+<pre class="brush: js">var str = 'To be, or not to be, that is the question.';
+
+console.log(str.endsWith('question.')); // true
+console.log(str.endsWith('to be'));     // false
+console.log(str.endsWith('to be', 19)); // true
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Diese Methode wurde der ECMAScript6-Spezifikation hinzugefügt und könnte noch nicht in allen JavaScript-Implementierungen verfügbar sein. Mithilfe des folgenden Code-Stücks kann die Methode auch bei fehlender Implementierung genutzt werden:</p>
+
+<pre class="brush: js">if (!String.prototype.endsWith) {
+  String.prototype.endsWith = function(searchString, position) {
+      var subjectString = this.toString();
+      if (typeof position !== 'number' || !isFinite(position) || Math.floor(position) !== position || position &gt; subjectString.length) {
+        position = subjectString.length;
+      }
+      position -= searchString.length;
+      var lastIndex = subjectString.indexOf(searchString, position);
+      return lastIndex !== -1 &amp;&amp; lastIndex === position;
+  };
+}
+</pre>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.endswith', 'String.prototype.endsWith')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.endswith', 'String.prototype.endsWith')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatChrome("41")}}</td>
+   <td>{{CompatGeckoDesktop("17")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatSafari("9")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome("36")}}</td>
+   <td>{{CompatGeckoMobile("17")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.startsWith()")}}</li>
+ <li>{{jsxref("String.prototype.includes()")}}</li>
+ <li>{{jsxref("String.prototype.indexOf()")}}</li>
+ <li>{{jsxref("String.prototype.lastIndexOf()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/string/fromcharcode/index.html b/files/de/web/javascript/reference/global_objects/string/fromcharcode/index.html
new file mode 100644
index 0000000000..1ddc144e28
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/string/fromcharcode/index.html
@@ -0,0 +1,134 @@
+---
+title: String.fromCharCode()
+slug: Web/JavaScript/Reference/Global_Objects/String/fromCharCode
+translation_of: Web/JavaScript/Reference/Global_Objects/String/fromCharCode
+---
+<div>{{JSRef}}</div>
+
+<p>Die statische Methode <strong><code>String.fromCharCode()</code></strong> gibt einen String zurück, der mit der angegebenen Folge von Unicode-Zeichen erstellt wurde.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>String.fromCharCode(<var>num1</var>[, ...[, <var>numN</var>]])</code></pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>num1, ..., num<em>N</em></code></dt>
+ <dd>Eine Folge von Zahlen als Unicode-Werte. Der Wertebreich liegt zwischen 0 und 65535 (0xFFFF). Zahlen, welche größer als 0xFFFF sind werden gekürzt.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein String, der die den Unicode-Werten zugeordneten Zeichen enthält.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Diese Methode gibt einen String zurück und kein {{jsxref("String")}} Objekt.</p>
+
+<p>Da <code>fromCharCode()</code> eine statische Methode von {{jsxref("String")}} ist, wird sie immer als <code>String.fromCharCode() </code>angewandt und nicht als Methode eines {{jsxref("String")}} Objekts, das erstellt wurde.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Verwendung_von_fromCharCode()">Verwendung von <code>fromCharCode()</code></h3>
+
+<pre>String.fromCharCode(65, 66, 67);   // gibt "ABC" zurück
+String.fromCharCode(0x2014);       // gibt "—" zurück
+String.fromCharCode(0x12014);      // gibt auch "—" zurück. Die Ziffer 1 wird weggekürzt und ignoriert.</pre>
+
+<h2 id="Verwendung_mit_höheren_Werten">Verwendung mit höheren Werten</h2>
+
+<p>Die meisten Unicode-Werte können mit einer 16-bit-Nummer dargestellt werden (wie in den Anfängen der JavaScript-Standardisierung erwartet) und <code>fromCharCode()</code> kann verwendet werden, um ein einzelnes Zeichen für die meisten gängigen Werde (d.h. UCS-2 Werte, die ein Subset von UTF-16 mit den am häufigsten vorkommenden Zeichen bilden) darzustellen. Um jedoch ALLE gültigen Unicode-Werte (bis zu 21 bits) darzustellen, ist <code>fromCharCode()</code> allein nicht ausreichend. Da die höheren Code Point Zeichen zwei "Ersatznummern" (mit niedrigerem Wert) verwenden, um ein einzelnes Zeichen darzustellen, kann {{jsxref("String.fromCodePoint()")}} (Teil des ES2015 Standards) verwendet werden, um ein solches Paar und damit auch diese Zeichen mit höheren Werten darzustellen.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Erstdefinition. Implementiert in JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.3.2', 'StringfromCharCode')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.fromcharcodes', 'String.fromCharCode')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.fromcharcodes', 'String.fromCharCode')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("String.fromCodePoint()")}}</li>
+ <li>{{jsxref("String.prototype.charAt()")}}</li>
+ <li>{{jsxref("String.prototype.charCodeAt()")}}</li>
+ <li>{{jsxref("String.prototype.codePointAt()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/string/includes/index.html b/files/de/web/javascript/reference/global_objects/string/includes/index.html
new file mode 100644
index 0000000000..ee3aa6564c
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/string/includes/index.html
@@ -0,0 +1,131 @@
+---
+title: String.prototype.includes()
+slug: Web/JavaScript/Reference/Global_Objects/String/includes
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/includes
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>includes()-</strong></code>Methode gibt an, ob ein String innerhalb eines anderen Strings gefunden wird und gibt dabei <code>true</code> oder <code>false</code> wieder.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.includes(<var>searchString</var>[, <var>position</var>])</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>searchString</code></dt>
+ <dd>Ein String, der innerhalb eines anderen Strings gesucht wird.</dd>
+ <dt><code>position</code></dt>
+ <dd>Optional. Die Position innerhalb des besuchten Strings durch <code>searchString</code>; Standard ist 0.</dd>
+</dl>
+
+<h3 id="Wertwiedergabe">Wertwiedergabe</h3>
+
+<p><strong><code>true</code></strong>, wenn der String den gesuchten String enthält, andernfalls <strong><code>false</code></strong>.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Diese Methode lässt dich feststellen, ob ein String einen anderen String beinhaltet.</p>
+
+<h3 id="Achtung_auf_Groß-_Kleinschreibung">Achtung auf Groß-, Kleinschreibung</h3>
+
+<p>Bei der <code>includes()</code>-Methode muss auf Groß- und Kleinschreibung geachtet werden.<br>
+ Zum Beispiel gibt die folgende Darstellung <code>false</code> aus:</p>
+
+<pre class="brush: js">'Blue Whale'.includes('blue'); // gibt false wieder
+</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einsatz_von_includes">Einsatz von <code>includes()</code></h3>
+
+<pre class="brush: js">var str = 'Sein oder nicht sein, das ist hier die Frage.';
+
+console.log(str.includes('Sein'));        // true
+console.log(str.includes('Frage'));       // true
+console.log(str.includes('nicht da'));    // false
+console.log(str.includes('Sein', 1));     // false
+console.log(str.includes('SEIN'));        // false
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Diese Methode wurde den ECMAScript 6 Spezifikationen hinzugefügt und könnte nicht in allen JavaScript-Umgebunden vorhanden sein. Jedoch kann man diesen Polyfill nutzen:</p>
+
+<pre class="brush: js">if (!String.prototype.includes) {
+  String.prototype.includes = function(search, start) {
+    'use strict';
+    if (typeof start !== 'number') {
+      start = 0;
+    }
+
+    if (start + search.length &gt; this.length) {
+      return false;
+    } else {
+      return this.indexOf(search, start) !== -1;
+    }
+  };
+}
+
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikationen</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-string.prototype.includes', 'String.prototype.includes')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>erste Definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.includes', 'String.prototype.includes')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.includes")}}</p>
+
+<h2 id="String.prototype.contains">String.prototype.contains</h2>
+
+<p>In Firefox 18 - 39 hieß diese Methode <code>contains()</code>. Es wurde zu <code>includes()</code> ({{bug(1102219)}}) wegen folgender Gründe umbenannt:<br>
+ <br>
+ Es wurde gemeldet, dass manche Webseiten, die MooTools 1.2 nutzen mit Firefox 17 nicht mehr funktionieren. Diese Version von MooTools kontrolliert, ob <code>String.prototype.contains()</code> existiert und, wenn nicht, fügt es seine eigene Funktion hinzu.<br>
+ Mit der Einführung dieser Funktion in Firefox 17 wurde das Verhalten dieser Kontrolle geändert, sodass auf MooTools <code>String.prototype.contains()</code> basierender Code funktionsunfähig wurde.<br>
+ Aufgrund dessen wurde die Implementierung in Firefox 17 <a href="https://hg.mozilla.org/releases/mozilla-aurora/rev/086db97198a8">abgeschaltet </a>und <code>String.prototype.contains()</code> war in Firefox 18 nutzbar. Ermöglicht wurde dies durch die <a href="http://mootools.net/blog/2013/02/19/mootools-1-2-6-released">Veröffentlichung von MooTools Version 1.2.6.</a></p>
+
+<p>MooTools 1.3 erzwingt die Nutzung der eigenen Version von <code>String.prototype.contains()</code>, demnach sollten Webseiten, die abhängig davon sind, weiterhin funktionieren. Beachte jedoch, dass sich die <a href="http://mootools.net/core/docs/1.3.2/Types/String#String-method:-contains">MooTools 1.3 Signatur </a>von der ECMAScript 6 Signatur für diese Methode unterscheidet.</p>
+
+<p>Später änderte <a href="https://github.com/mootools/mootools-core/blob/master/Docs/Types/String.md#note">MooTools 1.5+ die Signatur, um sie dem ES2015 Standard anzupassen.</a></p>
+
+<p><br>
+ In Firefox 48 wurde <code>String.prototype.contains()</code> entfernt. Nutze lediglich <code>String.prototype.includes()</code>.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.includes()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("TypedArray.prototype.includes()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("String.prototype.indexOf()")}}</li>
+ <li>{{jsxref("String.prototype.lastIndexOf()")}}</li>
+ <li>{{jsxref("String.prototype.startsWith()")}}</li>
+ <li>{{jsxref("String.prototype.endsWith()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/string/index.html b/files/de/web/javascript/reference/global_objects/string/index.html
new file mode 100644
index 0000000000..35faef0223
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/string/index.html
@@ -0,0 +1,310 @@
+---
+title: String
+slug: Web/JavaScript/Reference/Global_Objects/String
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String
+---
+<div>{{JSRef}}</div>
+
+<p>Das globale <strong><code>String</code></strong>-Objekt ist ein Konstruktor für Strings, auch Zeichenketten genannt.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>String-Literale haben folgende Formen:</p>
+
+<pre class="syntaxbox">'string-text'
+"string-text"
+"中文 español deutsch English हिन्दी العربية português বাংলা русский 日本語 ਪੰਜਾਬੀ 한국어 தமிழ்"</pre>
+
+<p>Strings können auch direkt mit dem globalen <code>String</code>-Objekt erzeugt werden:</p>
+
+<pre class="syntaxbox">String(thing)</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>thing</code></dt>
+ <dd>Alles, was in einen String umgewandelt werden kann.</dd>
+</dl>
+
+<h3 id="Template-Literale">Template-Literale</h3>
+
+<p>Ab ECMAScript 2015 können String-Literale auch durch sogenannte <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/template_strings">Template-Literale</a> verkörpert werden:</p>
+
+<pre class="syntaxbox">`hallo welt`
+`hallo!
+ welt!`
+`hallo ${wer}`
+escape `<a>${wer}</a>`</pre>
+
+<dl>
+</dl>
+
+<h3 id="Escape-Notation">Escape-Notation</h3>
+
+<p>Neben gewöhnlichen, druckbaren Zeichen gibt es Sonderzeichen, die mittels Escape-Notation kodiert werden können:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Code</th>
+   <th scope="col">Ausgabe</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>\0</code></td>
+   <td>das NULL-Zeichen</td>
+  </tr>
+  <tr>
+   <td><code>\'</code></td>
+   <td>einfaches Anführungszeichen</td>
+  </tr>
+  <tr>
+   <td><code>\"</code></td>
+   <td>doppeltes Anführungszeichen</td>
+  </tr>
+  <tr>
+   <td><code>\\</code></td>
+   <td>Rückwärtsschrägstrich (backslash)</td>
+  </tr>
+  <tr>
+   <td><code>\n</code></td>
+   <td>Zeilenumbruch (new line)</td>
+  </tr>
+  <tr>
+   <td><code>\r</code></td>
+   <td>Zeilenanfang (carriage return)</td>
+  </tr>
+  <tr>
+   <td><code>\v</code></td>
+   <td>vertikaler Tabulator</td>
+  </tr>
+  <tr>
+   <td><code>\t</code></td>
+   <td>Tabulator</td>
+  </tr>
+  <tr>
+   <td><code>\b</code></td>
+   <td>Backspace</td>
+  </tr>
+  <tr>
+   <td><code>\f</code></td>
+   <td>Seitenvorschub (form feed)</td>
+  </tr>
+  <tr>
+   <td><code>\uXXXX</code></td>
+   <td>Unicode-Codepoint</td>
+  </tr>
+  <tr>
+   <td><code>\u{X}</code> ... <code>\u{XXXXXX}</code></td>
+   <td>Unicode-Codepoint {{experimental_inline}}</td>
+  </tr>
+  <tr>
+   <td><code>\xXX</code></td>
+   <td>Latin-1-Zeichen</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p>Im Gegensatz zu einigen anderen Sprachen unterscheidet JavaScript nicht zwischen mit einfachen und doppelten Anführungszeichen versehenen Strings; deswegen funktionieren die obigen Escape-Sequenzen in Strings, die entweder mit einfachen oder doppelten Anführungszeichen erstellt wurden.</p>
+</div>
+
+<dl>
+</dl>
+
+<h3 id="Lange_String-Literale">Lange String-Literale</h3>
+
+<p>Manchmal enthält der Programm-Code Strings, die sehr lang sind. Anstatt endlose Zeilen zu bewirken, die vielleicht am Rand des Editors umbrechen, kann ein String ausdrücklich in mehrere Zeilen im Quell-Code eingepasst werden, ohne seinen Inhalt zu beeinflussen. Es gibt zwei Arten, um das zu tun.</p>
+
+<p>Es kann der <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition_()">+</a>-Operator benutzt werden, um auf folgende Weise mehrere Strings aneinanderzuhängen:</p>
+
+<pre class="brush: js">let langerString = "Dies ist ein sehr langer String, der über " +
+                 "mehrere Zeilen verteilt werden muss, weil " +
+                 "sonst der Code unleserlich ist.";
+</pre>
+
+<p>Oder der Rückwärtsschrägstrich ("\") wird am Ende jeder Zeile benutzt, um anzugeben, dass der String in der nächsten Zeile weitergeht. Es sollte sichergestellt werden, dass nach dem Rückwärtsschrägstrich (backslash) kein Leer- oder ein anderes Zeichen (außer ein Zeilenumbruch) steht oder als Einrückung dient; sonst funktioniert es nicht. Diese Form sieht wie folgt aus:</p>
+
+<pre class="brush: js">let langerString = "Dies ist ein sehr langer String, der über \
+mehrere Zeilen verteilt werden muss, weil \
+sonst der Code unleserlich ist.";
+</pre>
+
+<p>Beide Arten erzeugen identische Strings.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Strings sind nützlich, um Daten in Textform zu speichern. Manche der meist benutzten String-Operationen sind es, die {{jsxref("String.length", "length")}} abzufragen, Strings mittels <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators">+ und += String-Operatoren</a> zu verbinden, mit der {{jsxref("String.prototype.indexOf()", "indexOf()")}} -Methode die Existenz oder Position von Sub-Strings festzustellen oder Sub-Strings mit der {{jsxref("String.prototype.substring()", "substring()")}}-Methode zu extrahieren.</p>
+
+<h3 id="Zeichenabfrage">Zeichenabfrage</h3>
+
+<p>Es gibt zwei Möglichkeiten auf ein einzelnes Zeichen in einem String zuzugreifen. Die erste ist die {{jsxref("String.prototype.charAt()", "charAt()")}}-Methode:</p>
+
+<pre class="brush: js">return 'Katze'.charAt(1); // gibt "a" zurück
+</pre>
+
+<p>Die andere Möglichkeit (eingeführt in ECMAScript 5) ist, den String als ein Array-ähnliches Objekt zu behandlen, in dem einzelne Zeichen zu einem numerischen Index gehören:</p>
+
+<pre class="brush: js">return 'Katze'[1]; // gibt "a" zurück
+</pre>
+
+<p>Bei einen Zeichenzugriff mittels Klammernotation ist es nicht möglich, einen Wert zu löschen oder zuzuweisen. Die entsprechenden Eigenschaften sind weder überschreibbar noch konfigurierbar. (Siehe {{jsxref("Object.defineProperty()")}} für mehr Informationen.)</p>
+
+<h3 id="Strings_vergleichen">Strings vergleichen</h3>
+
+<p>C-Entwicklern steht die <code>strcmp()</code>-Funktion zur Verfügung, um Strings zu vergleichen. In JavaScript können die <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/Vergleichsoperatoren">kleiner-als- und größer-als-Operatoren</a> benutzt werden:</p>
+
+<pre class="brush: js">var a = 'a';
+var b = 'b';
+if (a &lt; b) { // true
+  console.log(a + ' ist geringer als ' + b);
+} else if (a &gt; b) {
+  console.log(a + ' ist größer als ' + b);
+} else {
+  console.log(a + ' und ' + b + ' sind gleich.');
+}
+</pre>
+
+<p>Ein ähnliches Ergebnis kann durch die {{jsxref("String.prototype.localeCompare()", "localeCompare()")}}-Methode erzielt werden, die von <code>String</code>-Instanzen übernommen wird.</p>
+
+<h3 id="Unterscheidung_von_String-Primitives_und_String-Objekten">Unterscheidung von String-Primitives und <code>String</code>-Objekten</h3>
+
+<p>Es ist zu betonen, dass JavaScript zwischen <code>String</code>-Objekten und primitiven String-Werten unterscheidet. (Das selbe gilt für {{jsxref("Boolean")}} und {{jsxref("Global_Objects/Number", "Numbers")}}.)</p>
+
+<p>String-Literale (definiert mit doppelten oder einfachen Anführungszeichen) und Strings, die von<code> String</code>-Aufrufen in einem Nicht-Konstruktor-Kontext (z. B. ohne das {{jsxref("Operators/new", "new")}}-Schlüsselwort zu benutzen) zurückgegeben werden, sind String-Primitives. JavaScript wandelt automatisch Primitives zu <code>String</code>-Objekten um, so dass es möglich ist <code>String</code>-Objekt-Methoden für String-Primitives zu nutzen. In Kontexten, in denen eine Methode auf ein String-Primitive bezogen aufgerufen oder eine Eigenschaft eines solchen abgefragt wird, sorgt JavaScript dafür, dass das String-Primitive wie ein Objekt behandelt wird.</p>
+
+<pre class="brush: js">var s_prim = 'foo';
+var s_obj = new String(s_prim);
+
+console.log(typeof s_prim); // Loggt "string"
+console.log(typeof s_obj);  // Loggt "object"
+</pre>
+
+<p>String-Primitives und <code>String</code>-Objekte führen auch bei der Nutzung von {{jsxref("Global_Objects/eval", "eval()")}} zu unterschiedlichen Ergebnissen. An <code>eval</code> übergebene Primitives werden als Quell-Code behandelt; bei <code>String</code>-Objekten wird wie bei allen anderen Objekten das Objekt zurückgegeben. Zum Beispiel:</p>
+
+<pre class="brush: js">var s1 = '2 + 2';             // erzeugt ein String-Primitive
+var s2 = new String('2 + 2'); // erzeugt ein String-Objekt
+console.log(eval(s1));        // gibt die Zahl 4 zurück
+console.log(eval(s2));        // gibt den String "2 + 2" zurück
+</pre>
+
+<p>Aus diesen Gründen kann Code aufhören zu funktionieren, wenn er <code>String</code>-Objekte bemerkt, obwohl ein String-Primitive erwartet wird. Trotzdem brauchen sich Autoren normalerweise nicht um diesen Unterschied zu kümmern.</p>
+
+<p>Ein <code>String</code>-Objekt kann mit der {{jsxref("String.prototype.valueOf()", "valueOf()")}}-Methode immer zu seiner Primitive-Entsprechung konvertiert werden.</p>
+
+<pre class="brush: js">console.log(eval(s2.valueOf())); // gibt die Zahl 4 zurück
+</pre>
+
+<div class="note"><strong>Bemerkung:</strong> Für ein weiteres mögliches Herantreten an Strings in JavaScript sollte der Artikel über <a href="/en-US/Add-ons/Code_snippets/StringView"><code>StringView</code> — eine C-ähnliche Representation von Strings basierend auf typisierten Arrays</a> gelesen werden.</div>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt>{{jsxref("String.prototype")}}</dt>
+ <dd>Ermöglicht das Hinzufügen von Eigenschaften zu einem <code>String</code>-Objekt.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<dl>
+ <dt>{{jsxref("String.fromCharCode()")}}</dt>
+ <dd>Gibt einen String zurück, der auf Basis der angegebenen Folge von Unicode-Werten erstellt wurde.</dd>
+ <dt>{{jsxref("String.fromCodePoint()")}} {{experimental_inline}}</dt>
+ <dd>Gibt einen String zurück, der auf Basis der angegebenen Folge von Code-Points erstellt wurde.</dd>
+ <dt>{{jsxref("String.raw()")}} {{experimental_inline}}</dt>
+ <dd>Gibt einen String zurück, der auf Basis eines Raw-Template-Strings erstellt wurde.</dd>
+</dl>
+
+<h2 id="Generische_String-Methoden">Generische <code>String</code>-Methoden</h2>
+
+<div class="warning">
+<p><strong>Generische String-Methoden sind nicht Teil des Standards und werden in naher Zukunft entfernt</strong>.</p>
+</div>
+
+<p>Die <code>String</code>-Instanzmethoden stehen nach JavaScript 1.6 (<strong>nicht</strong> Teil des ECMAScript-Standards) auch in Firefox beim <code>String</code>-Objekt zur Verfügung, um <code>String</code>-Methoden auf ein beliebiges Objekt anzuwenden:</p>
+
+<pre class="brush: js">var num = 15;
+console.log(String.replace(num, /5/, '2'));
+</pre>
+
+<p>Über die Auflösung von generischen String-Methoden: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Deprecated_string_generics">Warning: String.x is deprecated; use String.prototype.x instead</a>.</p>
+
+<p>{{jsxref("Global_Objects/Array", "Generics", "#Array_generic_methods", 1)}} stehen auch bei {{jsxref("Array")}}-Methoden zur Verfügung.</p>
+
+<h2 id="String-Instanzen"><code>String</code>-Instanzen</h2>
+
+<h3 id="Eigenschaften_2">Eigenschaften</h3>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'Properties')}}</div>
+
+<h3 id="Methoden_2">Methoden</h3>
+
+<h4 id="Nicht_HTML-bezogene_Methoden">Nicht HTML-bezogene Methoden</h4>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'Methods_unrelated_to_HTML')}}</div>
+
+<h4 id="HTML-Wrapper-Methoden">HTML-Wrapper-Methoden</h4>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'HTML_wrapper_methods')}}</div>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="String-Konvertierung">String-Konvertierung</h3>
+
+<p>Es ist möglich, <code>String</code> als eine "sicherere" {{jsxref("String.prototype.toString()", "toString()")}}-Alternative zu benutzen, auch, wenn es gewöhnlich weiterhin das zugrundeliegende <code>toString()</code> aufruft. Es funktioniert auch für {{jsxref("null")}}, {{jsxref("undefined")}} und {{jsxref("Symbol", "symbols")}}. Zum Beispiel:</p>
+
+<pre class="brush: js">var ausgabeStrings = [];
+for (var i = 0, n = eingabeWerte.length; i &lt; n; ++i) {
+  ausgabeStrings.push(String(eingabeWerte[i]));
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Anmerkung</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Anfängliche Definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5', 'String')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-string-objects', 'String')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string-objects', 'String')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<p>{{Compat("javascript.builtins.String.String")}}</p>
+
+<h2 id="Siehe_außerdem">Siehe außerdem</h2>
+
+<ul>
+ <li>{{domxref("DOMString")}}</li>
+ <li><a href="/en-US/Add-ons/Code_snippets/StringView"><code>StringView</code> — eine C-ähnliche Representation von Strings basierend auf typisierten Arrays</a></li>
+ <li><a href="/en-US/docs/Web/API/DOMString/Binary">Binäre Strings</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/string/indexof/index.html b/files/de/web/javascript/reference/global_objects/string/indexof/index.html
new file mode 100644
index 0000000000..dc36abfae8
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/string/indexof/index.html
@@ -0,0 +1,200 @@
+---
+title: String.prototype.indexOf()
+slug: Web/JavaScript/Reference/Global_Objects/String/indexOf
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/indexOf
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>indexOf()</code></strong> Methode gibt den Index der Zeichenkette innerhalb des aufrufenden {{jsxref("Global_Objects/String", "String")}} Objekts des ersten Vorkommnis des angegebenen Wertes beginnend bei <code>fromIndex</code> zurück. Gibt -1 zurück, wenn der Wert nicht gefunden wurde.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.indexOf(<var>searchValue</var>[, <var>fromIndex</var>]</code>)</pre>
+
+<h3 id="Parameters" name="Parameters">Parameter</h3>
+
+<dl>
+ <dt><code>searchValue</code></dt>
+ <dd>Ein String der den zu suchenden Wert repräsentiert.</dd>
+ <dt><code>fromIndex</code> {{optional_inline}}</dt>
+ <dd>Der Index, von dem angefangen wird vorwärts im String zu suchen. Der Standardwert ist 0, so dass der ganze String durchsucht wird. Wenn <code>fromIndex &lt; 0</code> ist, wird der ganze String durchsucht. Wenn  <code>fromIndex &gt;= str.length</code> ist, wird der String nicht durchsucht und -1 wird zurückgegeben. Die Ausnahme ist, wenn für <code>searchValue</code> ein leeren String eingesetzt wird, dann wird <code>str.length</code> zurückgegeben.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Den Index des ersten Vorkommens des gesuchten Wertes; <strong>-1</strong> wenn der Wert nicht gefunden wurde.</p>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p>Die Zeichen in einem String sind von links nach rechts nummeriert. Der Index des ersten Zeichens ist 0, und der Index des letzten Zeichens eines Strings mit Namen <code>stringName</code><code> </code>ist <code>stringName.length - 1</code>.</p>
+
+<pre class="brush: js">'Blue Whale'.indexOf('Blue');     // returns  0
+'Blue Whale'.indexOf('Blute');    // returns -1
+'Blue Whale'.indexOf('Whale', 0); // returns  5
+'Blue Whale'.indexOf('Whale', 5); // returns  5
+'Blue Whale'.indexOf('', 9);      // returns  9
+'Blue Whale'.indexOf('', 10);     // returns 10
+'Blue Whale'.indexOf('', 11);     // returns 10
+</pre>
+
+<h3 id="Case-sensitivity" name="Case-sensitivity">Groß- und Kleinschreibung</h3>
+
+<p>Die <code>indexOf()</code> Methode unterscheidet zwischen Groß- und Kleinschreibung. Zum Beispiel gibt die folgende Zeile -1 zurück:</p>
+
+<pre class="brush: js">'Blue Whale'.indexOf('blue'); // returns -1
+</pre>
+
+<h3 id="Vorkommnisse_prüfen">Vorkommnisse prüfen</h3>
+
+<p>Zu beachten ist, dass '0' nicht zu <code>true</code> und '-1' nicht zu <code>false</code> ausgewertet wird. Deswegen ist der korrekte weg zum überprüfen, ob ein String in einem anderen String existiert, der folgende:</p>
+
+<pre class="brush: js">'Blue Whale'.indexOf('Blue') != -1; // true
+'Blue Whale'.indexOf('Bloe') != -1; // false
+</pre>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<h3 id="Example:_Using_indexOf_and_lastIndexOf" name="Example:_Using_indexOf_and_lastIndexOf">Einsatz von <code>indexOf()</code> <code>und lastIndexOf()</code></h3>
+
+<p>Die folgenden Beispiele benutzen <code>indexOf()</code> und {{jsxref("String.prototype.lastIndexOf()", "lastIndexOf()")}}, um Werte im String <code>"Brave new world"</code> zu finden.</p>
+
+<pre class="brush: js">var anyString = 'Brave new world';
+
+console.log('The index of the first w from the beginning is ' + anyString.indexOf('w'));
+// Displays 8
+console.log('The index of the first w from the end is ' + anyString.lastIndexOf('w'));
+// Displays 10
+
+console.log('The index of "new" from the beginning is ' + anyString.indexOf('new'));
+// Displays 6
+console.log('The index of "new" from the end is ' + anyString.lastIndexOf('new'));
+// Displays 6
+</pre>
+
+<h3 id="Case-sensitivity" name="Case-sensitivity"><code>indexOf()</code> und Groß- und Kleinschreibung</h3>
+
+<p>Das folgende Beispiel definiert zwei Strings. Die Variablen enthalten den selben String, außer dass der zweite String Großbuchstaben enthält. Die erste {{domxref("console.log()")}} Methode zeigt 19. Da die <code>indexOf()</code> Methode Groß- und Kleinschreibung unterscheidet, wird der String<code>"cheddar"</code> im String <code>myCapString</code> nicht gefunden. Deshalb gibt die zweite <code>console.log()</code> Methode -1 zurück.</p>
+
+<pre class="brush: js">var myString    = 'brie, pepper jack, cheddar';
+var myCapString = 'Brie, Pepper Jack, Cheddar';
+
+console.log('myString.indexOf("cheddar") is ' + myString.indexOf('cheddar'));
+// Displays 19
+console.log('myCapString.indexOf("cheddar") is ' + myCapString.indexOf('cheddar'));
+// Displays -1
+</pre>
+
+<h3 id="Example:_Using_indexOf_to_count_occurrences_of_a_letter_in_a_string" name="Example:_Using_indexOf_to_count_occurrences_of_a_letter_in_a_string">Einsatz von <code>indexOf()</code>, um das Vorkommen eines Buchstaben in einem String zu zählen</h3>
+
+<p>Das folgende Beispiel setzt <code>count</code> auf die Anzahl der Vorkommnisse des Buchstaben <code>e</code> in dem String <code>str</code>:</p>
+
+<pre class="brush: js">var str = 'To be, or not to be, that is the question.';
+var count = 0;
+var pos = str.indexOf('e');
+
+while (pos != -1) {
+  count++;
+  pos = str.indexOf('e', pos + 1);
+}
+
+console.log(count); // displays 4
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.7', 'String.prototype.indexOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.indexof', 'String.prototype.indexOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.indexof', 'String.prototype.indexOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.charAt()")}}</li>
+ <li>{{jsxref("String.prototype.lastIndexOf()")}}</li>
+ <li>{{jsxref("String.prototype.split()")}}</li>
+ <li>{{jsxref("Array.prototype.indexOf()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/string/lastindexof/index.html b/files/de/web/javascript/reference/global_objects/string/lastindexof/index.html
new file mode 100644
index 0000000000..b6c6f3a548
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/string/lastindexof/index.html
@@ -0,0 +1,148 @@
+---
+title: String.prototype.lastIndexOf()
+slug: Web/JavaScript/Reference/Global_Objects/String/lastIndexOf
+translation_of: Web/JavaScript/Reference/Global_Objects/String/lastIndexOf
+---
+<div>{{JSRef("Global_Objects", "String")}}</div>
+
+<h2 id="Summary" name="Summary">Zusammenfassung</h2>
+
+<p>Die <strong><code>lastIndexOf()</code></strong> Methode gibt den Index des letzten Vorkommnisses des angegebenen Wertes innerhalb des aufrufenden {{jsxref("Global_Objects/String", "Strings")}} Objekts zurück, oder -1, wenn der Wert nicht gefunden wurde. Der aufrufende String wird rückwärts durchsucht, beginnend beim <code>fromIndex</code>. </p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.lastIndexOf(<var>searchValue</var>[, <var>fromIndex</var>])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parameter</h3>
+
+<dl>
+ <dt><code>searchValue</code></dt>
+ <dd>Ein String mit dem Wert, nach dem gesucht werden soll.</dd>
+ <dt><code>fromIndex</code></dt>
+ <dd>Optional. Die Position im aufrufenden String, ab der gesucht rückwärts werden soll. The Position wird gezählt von links nach rechts. Gesucht wird von dieser Position ab nach links. Diese kann jeden Integerwert annehmen. Der Standartwert ist <code>str.length</code>. Wenn der Wert negativ ist, wird 0 verwendet. Wenn <code>fromIndex &gt; str.length</code>, wird <code>str.length </code>statt <code>fromIndex</code> benutzt.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p>Zeichen in einem String werden von links nach rechts gezählt. Der Index des ersten Zeichens ist 0, der Index des letzten Zeichens ist <code>stringName.length - 1</code>.</p>
+
+<pre class="brush: js">'canal'.lastIndexOf('a');     // returns 3
+'canal'.lastIndexOf('a', 2);  // returns 1
+'canal'.lastIndexOf('a', 0);  // returns -1
+'canal'.lastIndexOf('x');     // returns -1
+</pre>
+
+<h3 id="Case-sensitivity" name="Case-sensitivity">Groß- und Kleinschreibung</h3>
+
+<p>Die <code>lastIndexOf() </code>Methode unterscheidet zwischen Groß- und Kleinschreibung. Der folgende Ausdruck gibt zum Beispiel <code>-1</code> zurück.</p>
+
+<pre class="brush: js">'Blue Whale, Killer Whale'.lastIndexOf('blue'); // returns -1
+</pre>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<h3 id="Example:_Using_indexOf_and_lastIndexOf" name="Example:_Using_indexOf_and_lastIndexOf">Beispiel: Benutzung von <code>indexOf()</code> und <code>lastIndexOf()</code></h3>
+
+<p>Das folgende Beispiel verwendet {{jsxref("String.prototype.indexOf()", "indexOf()")}} und <code>lastIndexOf(),</code> um Werte im String <code>"Brave new world" zu finden</code>.</p>
+
+<pre class="brush: js">var anyString = 'Brave new world';
+
+console.log('The index of the first w from the beginning is ' + anyString.indexOf('w'));
+// Displays 8
+console.log('The index of the first w from the end is ' + anyString.lastIndexOf('w'));
+// Displays 10
+
+console.log('The index of "new" from the beginning is ' + anyString.indexOf('new'));
+// Displays 6
+console.log('The index of "new" from the end is ' + anyString.lastIndexOf('new'));
+// Displays 6
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1st Edition.</td>
+   <td>Standard</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.8', 'String.prototype.lastIndexOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.lastindexof', 'String.prototype.lastIndexOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Links</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.charAt()")}}</li>
+ <li>{{jsxref("String.prototype.indexOf()")}}</li>
+ <li>{{jsxref("String.prototype.split()")}}</li>
+ <li>{{jsxref("Array.prototype.indexOf()")}}</li>
+ <li>{{jsxref("Array.prototype.lastIndexOf()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/string/length/index.html b/files/de/web/javascript/reference/global_objects/string/length/index.html
new file mode 100644
index 0000000000..555d22094a
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/string/length/index.html
@@ -0,0 +1,87 @@
+---
+title: String.length
+slug: Web/JavaScript/Reference/Global_Objects/String/length
+tags:
+  - JavaScript
+  - Property
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/length
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>length</code></strong> Eigenschaft repräsentiert die Länge eines Strings.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.length</code></pre>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p>Die <strong><code>length</code></strong> Eigenschaft gibt die Anzahl der Codeteile des Strings zurück. Javascript verwendet {{interwiki("wikipedia", "UTF-16")}}. , also einen 16-Bit Code zur Kodierung der meisten Zeichen, aber zur Darstellung weniger verbreiteter Zeichen werden 2 Codes benötigt. Es ist also durchaus möglich, dass der zurückgegebene Wert nicht der Anzahl der Zeichen in einem String entspricht.</p>
+
+<p>ECMAScript 2016 (ed. 7) Spezifikation definiert eine maximale Länge von <code>2<sup>53</sup> - 1 </code>Elementen.<br>
+ Vor dieser Spezifikation war keine maximale Länge an Elementen definiert.</p>
+
+<p class="syntaxbox">Ein leerer String hat die Länge 0.</p>
+
+<p>Die statische String-Eigenschaft gibt den Wert 1 zurück.</p>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<h3 id="Example:_Basic_usage" name="Example:_Basic_usage">Grundlegende Nutzung</h3>
+
+<pre class="brush: js">var str = 'Mozilla';
+var leerstr = '';
+
+console.log('Mozilla ist ' + str.length + ' Zeichen lang');
+/* "Mozilla ist 7 Zeichen lang" */
+
+console.log('Der leere String hat eine Länge von ' + leerstr.length + 'Zeichen');
+/* "Der leere String hat eine Länge von 0 Zeichen" */
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Deinition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.5.1', 'String.prototype.length')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-properties-of-string-instances-length', 'String.prototype.length')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-properties-of-string-instances-length', 'String.prototype.length')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.length")}}</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li><a class="external" href="http://developer.teradata.com/blog/jasonstrimpel/2011/11/javascript-string-length-and-internationalizing-web-applications">JavaScript <code>String.length</code> and Internationalizing Web Applications</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/string/match/index.html b/files/de/web/javascript/reference/global_objects/string/match/index.html
new file mode 100644
index 0000000000..27bfac9c75
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/string/match/index.html
@@ -0,0 +1,140 @@
+---
+title: String.prototype.match()
+slug: Web/JavaScript/Reference/Global_Objects/String/match
+tags:
+  - JavaScript
+  - Method
+  - Property
+  - Reference
+  - Regular Expression
+  - String
+  - match
+  - Übereinstimmung
+translation_of: Web/JavaScript/Reference/Global_Objects/String/match
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>match()</code></strong> gibt zurück, wo ein regulärer Ausdruck in einem String enthalten ist. </p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate"><var>str</var>.match(<var>regexp</var>)</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>regexp</code></dt>
+ <dd>Ein regulärer Ausdruck. Falls <code>regexp</code> kein Objekt vom Typ {{jsxref("RegExp")}} ist wird es mit Hilfe von <code>new RegExp(obj)</code> konvertiert. Falls dieser Parameter nicht übergeben wird, wird ein {{jsxref("Array")}} mit einem leeren {{jsxref("String")}} zurückgegben: [""].</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Es wird ein {{jsxref("Array")}} zurückgegeben, das als erstes Element den gesamten übereinstimmenden String enthält, gefolgt von allen weiteren Treffern, die in Klammern angegeben wurden. Falls keine Übereinstimmungen gefunden wurden, wird {{jsxref("null")}} zurückgegeben.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Falls der reguläre Ausdruck nicht den Modifikator <code>g</code> enthält, verhält sich <strong><code>match()</code> </strong>wie {{jsxref("RegExp.prototype.exec()", "RegExp.exec()")}}. Im zurückgegebenen {{jsxref("Array")}} sind zusätzlich die propertys <code>input</code> und <code>index</code>  enthalten. <code>input</code> ist gleich dem zu durchsuchenden String, <code>index</code> enthält den Index der Übereinstimmung.</p>
+
+<p>Falls der <code>g</code> Modifikator im regulären Ausdruck enthalten ist, wird ein {{jsxref("Array")}} mit allen übereinstimmenden Substrings zurückgegeben.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Verwendung_von_match">Verwendung von <code>match()</code></h3>
+
+<p>Im folgenden Beispiel wird <strong><code>match()</code></strong> verwendet um <code>'Kapitel'</code> und anschließend eine oder mehrere Zahlen, gefolgt von einem Punkt und einer Zahl, 0 oder mehrmals zu finden. Der reguläre Ausdruck enthält den <code>i</code> Modifikator und unterscheidet somit nicht zwischen Groß- und Kleinschreibung.</p>
+
+<pre class="brush: js notranslate">var str = 'Fuer mehr Informationen siehe Kapitel 3.4.5.1';
+var re = /siehe (kapitel \d+(\.\d)*)/i;
+var found = str.match(re);
+
+console.log(found);
+
+// gibt folgendes auf der Konsole aus:
+//   [ 'siehe Kapitel 3.4.5.1',
+//     'Kapitel 3.4.5.1',
+//     '.1',
+//     index: 22,
+//     input: 'Fuer mehr Informationen siehe Kapitel 3.4.5.1' ]
+</pre>
+
+<h3 id="Verwendung_von_match_mit_den_i_und_g_Modifikatoren">Verwendung von <code>match()</code> mit den <code>i</code> und <code>g</code> Modifikatoren</h3>
+
+<p>Die Buchstaben von A - E und von a - e werden auf der Konsole ausgegeben.</p>
+
+<pre class="brush: js notranslate">var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
+var regexp = /[A-E]/gi;
+var matches_array = str.match(regexp);
+
+console.log(matches_array);
+// ['A', 'B', 'C', 'D', 'E', 'a', 'b', 'c', 'd', 'e']
+</pre>
+
+<h3 id="match_ohne_Parameter"><code>match()</code> ohne Parameter</h3>
+
+<pre class="brush: js notranslate">var str = "Nichts kommt von nichts.";
+
+str.match();
+// [""]</pre>
+
+<h3 id="Verwendung_mit_einem_nicht_regulären_Ausdruck">Verwendung mit einem nicht regulären Ausdruck</h3>
+
+<p>Falls ein String oder eine Zahl anstatt eines regulären Ausdrucks übergeben wird, wird der Parameter in einen {{jsxref("RegExp", "regulären Ausdruck")}} konvertiert. Ist es eine positive Zahl mit Vorzeichen, wird das positive Vorzeichen ignoriert.</p>
+
+<pre class="brush: js notranslate">var str1 = "NaN bedeutet not a number. Infinity enthält -Infinity and +Infinity in JavaScript.",
+    str2 = "Zahlen: 1, 6, 3",
+    str3 = "null ist ein Datentyp.";
+
+str1.match("number");   // ["number"]
+str1.match(NaN);        // ["NaN"]
+str1.match(Infinity);   // ["Infinity"]
+str1.match(+Infinity);  // ["Infinity"]
+str1.match(-Infinity);  // ["-Infinity"]
+str2.match(6);          // ["6"]
+str2.match(+3);         // ["3"]
+str3.match(null);       // ["null"]</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Extras</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Anfangsdefinition. Implementiert in JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.10', 'String.prototype.match')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.match', 'String.prototype.match')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.match', 'String.prototype.match')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.String.match")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("RegExp")}}</li>
+ <li>{{jsxref("RegExp.prototype.exec()")}}</li>
+ <li>{{jsxref("RegExp.prototype.test()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/string/prototype/index.html b/files/de/web/javascript/reference/global_objects/string/prototype/index.html
new file mode 100644
index 0000000000..e2c896b98d
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/string/prototype/index.html
@@ -0,0 +1,189 @@
+---
+title: String.prototype
+slug: Web/JavaScript/Reference/Global_Objects/String/prototype
+tags:
+  - Eigentum
+  - JavaScript
+  - Prototyp
+  - Referenz
+  - Strang
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String
+---
+<div>{{JSRef}}</div>
+
+<p><font><font>Die </font></font><strong><code>String.prototype</code></strong><font><font>Eigenschaft repräsentiert das Prototypobjekt {{jsxref ("String")}}.</font></font></p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Beschreibung"><font><font>Beschreibung</font></font></h2>
+
+<p><font><font>Alle {{jsxref ("String")}} Instanzen erben von </font></font><code>String.prototype</code><font><font>. </font><font>Änderungen am </font></font><code>String</code><font><font>Prototypobjekt werden an alle Instanzen von {{jsxref ("String")}} weitergegeben.</font></font></p>
+
+<h2 id="Eigenschaften"><font><font>Eigenschaften</font></font></h2>
+
+<dl>
+ <dt><code>String.prototype.constructor</code></dt>
+ <dd><font><font>Gibt die Funktion an, mit der der Prototyp eines Objekts erstellt wird.</font></font></dd>
+ <dt><font><font>{{jsxref ("String.prototype.length")}}</font></font></dt>
+ <dd><font><font>Reflektiert die Länge der Zeichenfolge.</font></font></dd>
+ <dt><code><em>N</em></code></dt>
+ <dd><font><font>Wird verwendet, um auf das Zeichen an der </font></font><em><font><font>N-</font></font></em><font><font> ten Position </font><font>zuzugreifen, </font><font>wobei </font></font><em><font><font>N</font></font></em><font><font> eine ganze Zahl zwischen 0 und eins ist, die kleiner als der Wert von {{jsxref ("String.length", "length")} ist. </font><font>Diese Eigenschaften sind schreibgeschützt.</font></font></dd>
+</dl>
+
+<p>Methods</p>
+
+<h2 id="Methoden"><font><font>Methoden</font></font></h2>
+
+<h3 id="Methoden_die_nichts_mit_HTML_zu_tun_haben"><font><font>Methoden, die nichts mit HTML zu tun haben</font></font></h3>
+
+<dl>
+ <dt><font><font>{{jsxref ("String.prototype.charAt ()")}}</font></font></dt>
+ <dd><font><font>Gibt das Zeichen (genau eine UTF-16-Codeeinheit) am angegebenen Index zurück.</font></font></dd>
+ <dt><font><font>{{jsxref ("String.prototype.charCodeAt ()")}}</font></font></dt>
+ <dd><font><font>Gibt eine Zahl zurück, die der UTF-16-Code-Einheitswert am angegebenen Index ist.</font></font></dd>
+ <dt><font><font>{{jsxref ("String.prototype.codePointAt ()")}}</font></font></dt>
+ <dd><font><font>Gibt eine nicht negative Ganzzahl zurück, die der Codepunktwert des UTF-16-codierten Codepunkts ab dem angegebenen Index ist.</font></font></dd>
+ <dt><font><font>{{jsxref ("String.prototype.concat ()")}}</font></font></dt>
+ <dd><font><font>Kombiniert den Text zweier Zeichenfolgen und gibt eine neue Zeichenfolge zurück.</font></font></dd>
+ <dt><font><font>{{jsxref ("String.prototype.includes ()")}}</font></font></dt>
+ <dd><font><font>Legt fest, ob eine Zeichenfolge in einer anderen Zeichenfolge gefunden werden darf.</font></font></dd>
+ <dt><font><font>{{jsxref ("String.prototype.endsWith ()")}}</font></font></dt>
+ <dd><font><font>Bestimmt, ob eine Zeichenfolge mit den Zeichen einer anderen Zeichenfolge endet.</font></font></dd>
+ <dt><font><font>{{jsxref ("String.prototype.indexOf ()")}}</font></font></dt>
+ <dd><font><font>Gibt den Index innerhalb des aufrufenden {{jsxref ("String")}} Objekts des ersten Vorkommens des angegebenen Werts zurück oder -1, falls nicht gefunden.</font></font></dd>
+ <dt><font><font>{{jsxref ("String.prototype.lastIndexOf ()")}}</font></font></dt>
+ <dd><font><font>Gibt den Index innerhalb des aufrufenden {{jsxref ("String")}} Objekts des letzten Vorkommens des angegebenen Werts zurück oder -1, falls nicht gefunden.</font></font></dd>
+ <dt><font><font>{{jsxref ("String.prototype.localeCompare ()")}}</font></font></dt>
+ <dd><font><font>Gibt eine Zahl zurück, die angibt, ob eine Referenzzeichenfolge vor oder nach der angegebenen Zeichenfolge in Sortierreihenfolge steht oder mit dieser übereinstimmt.</font></font></dd>
+ <dt><font><font>{{jsxref ("String.prototype.match ()")}}</font></font></dt>
+ <dd><font><font>Wird verwendet, um einen regulären Ausdruck mit einer Zeichenfolge abzugleichen.</font></font></dd>
+ <dt><font><font>{{jsxref ("String.prototype.matchAll ()")}}</font></font></dt>
+ <dd><font><font>Gibt einen Iterator aller Übereinstimmungen zurück.</font></font></dd>
+ <dt><font><font>{{jsxref ("String.prototype.normalize ()")}}</font></font></dt>
+ <dd><font><font>Gibt die Unicode-Normalisierungsform des aufrufenden Zeichenfolgenwerts zurück.</font></font></dd>
+ <dt><font><font>{{jsxref ("String.prototype.padEnd ()")}}</font></font></dt>
+ <dd><font><font>Füllt die aktuelle Zeichenfolge am Ende mit einer bestimmten Zeichenfolge auf, um aus einer bestimmten Länge eine neue Zeichenfolge zu erstellen.</font></font></dd>
+ <dt><font><font>{{jsxref ("String.prototype.padStart ()")}}</font></font></dt>
+ <dd><font><font>Füllt die aktuelle Zeichenfolge von Anfang an mit einer bestimmten Zeichenfolge auf, um aus einer bestimmten Länge eine neue Zeichenfolge zu erstellen.</font></font></dd>
+ <dt><s><font><font>{{jsxref ("String.prototype.quote ()")}} {{obsolete_inline}}</font></font></s></dt>
+ <dd><s><font><font>Umschließt die Zeichenfolge in doppelte Anführungszeichen (" </font></font><code>"</code><font><font>").</font></font></s></dd>
+ <dt><font><font>{{jsxref ("String.prototype.repeat ()")}}</font></font></dt>
+ <dd><font><font>Gibt eine Zeichenfolge zurück, die aus den Elementen des Objekts besteht, die zu den angegebenen Zeiten wiederholt wurden.</font></font></dd>
+ <dt><font><font>{{jsxref ("String.prototype.replace ()")}}</font></font></dt>
+ <dd><font><font>Wird verwendet, um eine Übereinstimmung zwischen einem regulären Ausdruck und einer Zeichenfolge zu finden und die übereinstimmende Teilzeichenfolge durch eine neue Teilzeichenfolge zu ersetzen.</font></font></dd>
+ <dt><font><font>{{jsxref ("String.prototype.search ()")}}</font></font></dt>
+ <dd><font><font>Führt die Suche nach einer Übereinstimmung zwischen einem regulären Ausdruck und einer angegebenen Zeichenfolge aus.</font></font></dd>
+ <dt><font><font>{{jsxref ("String.prototype.slice ()")}}</font></font></dt>
+ <dd><font><font>Extrahiert einen Abschnitt einer Zeichenfolge und gibt eine neue Zeichenfolge zurück.</font></font></dd>
+ <dt><font><font>{{jsxref ("String.prototype.split ()")}}</font></font></dt>
+ <dd><font><font>Teilt ein {{jsxref ("Global_Objects / String", "String")}} -Objekt in ein Array von Zeichenfolgen auf, indem die Zeichenfolge in Teilzeichenfolgen aufgeteilt wird.</font></font></dd>
+ <dt><font><font>{{jsxref ("String.prototype.startsWith ()")}}</font></font></dt>
+ <dd><font><font>Legt fest, ob eine Zeichenfolge mit den Zeichen einer anderen Zeichenfolge beginnt.</font></font></dd>
+ <dt><font><font>{{jsxref ("String.prototype.substr ()")}} {{deprecated_inline}}</font></font></dt>
+ <dd><font><font>Gibt die Zeichen in einer Zeichenfolge zurück, die an der angegebenen Position mit der angegebenen Anzahl von Zeichen beginnt.</font></font></dd>
+ <dt><font><font>{{jsxref ("String.prototype.substring ()")}}</font></font></dt>
+ <dd><font><font>Gibt die Zeichen in einer Zeichenfolge zwischen zwei Indizes in die Zeichenfolge zurück.</font></font></dd>
+ <dt><font><font>{{jsxref ("String.prototype.toLocaleLowerCase ()")}}</font></font></dt>
+ <dd><font><font>Die Zeichen in einer Zeichenfolge werden unter Berücksichtigung des aktuellen Gebietsschemas in Kleinbuchstaben konvertiert. </font><font>Für die meisten Sprachen wird das Gleiche wie {{jsxref ("String.prototype.toLowerCase ()", "toLowerCase ()")}} zurückgegeben.</font></font></dd>
+ <dt><font><font>{{jsxref ("String.prototype.toLocaleUpperCase ()")}}</font></font></dt>
+ <dd><font><font>Die Zeichen in einer Zeichenfolge werden unter Berücksichtigung des aktuellen Gebietsschemas in Großbuchstaben umgewandelt. </font><font>Für die meisten Sprachen wird das Gleiche wie {{jsxref ("String.prototype.toUpperCase ()", "toUpperCase ()")}} zurückgegeben.</font></font></dd>
+ <dt><font><font>{{jsxref ("String.prototype.toLowerCase ()")}}</font></font></dt>
+ <dd><font><font>Gibt den aufrufenden Zeichenfolgenwert zurück, der in Kleinbuchstaben konvertiert wurde.</font></font></dd>
+ <dt><font><font>{{jsxref ("String.prototype.toSource ()")}} {{non-standard_inline}}</font></font></dt>
+ <dd><font><font>Gibt ein Objektliteral zurück, das das angegebene Objekt darstellt. </font><font>Mit diesem Wert können Sie ein neues Objekt erstellen. </font><font>Überschreibt die Methode {{jsxref ("Object.prototype.toSource ()")}}.</font></font></dd>
+ <dt><font><font>{{jsxref ("String.prototype.toString ()")}}</font></font></dt>
+ <dd><font><font>Gibt eine Zeichenfolge zurück, die das angegebene Objekt darstellt. </font><font>Überschreibt die Methode {{jsxref ("Object.prototype.toString ()")}}.</font></font></dd>
+ <dt><font><font>{{jsxref ("String.prototype.toUpperCase ()")}}</font></font></dt>
+ <dd><font><font>Gibt den aufrufenden Zeichenfolgenwert zurück, der in Großbuchstaben konvertiert wurde.</font></font></dd>
+ <dt><font><font>{{jsxref ("String.prototype.trim ()")}}</font></font></dt>
+ <dd><font><font>Schneidet Leerzeichen vom Anfang und Ende der Zeichenfolge ab. </font><font>Teil des ECMAScript 5-Standards.</font></font></dd>
+ <dt><font><font>{{jsxref ("String.prototype.trimStart ()")}}</font></font><br>
+ <font><font>{{jsxref ("String.prototype.trimLeft ()")}}</font></font></dt>
+ <dd><font><font>Schneidet Leerzeichen vom Anfang der Zeichenfolge ab.</font></font></dd>
+ <dt><font><font>{{jsxref ("String.prototype.trimEnd ()")}}</font></font><br>
+ <font><font>{{jsxref ("String.prototype.trimRight ()")}</font></font></dt>
+ <dd><font><font>Schneidet Leerzeichen vom Ende der Zeichenfolge ab.</font></font></dd>
+ <dt><font><font>{{jsxref ("String.prototype.valueOf ()")}}</font></font></dt>
+ <dd><font><font>Gibt den Grundwert des angegebenen Objekts zurück. </font><font>Überschreibt die Methode {{jsxref ("Object.prototype.valueOf ()")}}.</font></font></dd>
+ <dt><font><font>{{jsxref ("String.prototype. @@ iterator ()", "String.prototype [@@ iterator] ()")}}</font></font></dt>
+ <dd><font><font>Gibt ein neues </font></font><code>Iterator</code><font><font>Objekt zurück, das die Codepunkte eines String-Werts durchläuft und jeden Codepunkt als String-Wert zurückgibt.</font></font></dd>
+</dl>
+
+<h3 id="HTML-Wrapper-Methoden"><font><font>HTML-Wrapper-Methoden</font></font></h3>
+
+<p><font><font>Diese Methoden sind nur eingeschränkt einsetzbar, da sie nur einen Teil der verfügbaren HTML-Tags und -Attribute bereitstellen.</font></font></p>
+
+<dl>
+ <dt><font><font>{{jsxref ("String.prototype.anchor ()")}} {{deprecated_inline}}</font></font></dt>
+ <dd><font><font>{{htmlattrxref ("name", "a", "&lt;a name=\"name\"&gt;")}} (Hypertext-Ziel)</font></font></dd>
+ <dt><font><font>{{jsxref ("String.prototype.big ()")}} {{deprecated_inline}}</font></font></dt>
+ <dd><font><font>{{HTMLElement ("big")}}</font></font></dd>
+ <dt><font><font>{{jsxref ("String.prototype.blink ()")}} {{deprecated_inline}}</font></font></dt>
+ <dd><font><font>{{HTMLElement ("blinken")}}</font></font></dd>
+ <dt><font><font>{{jsxref ("String.prototype.bold ()")}} {{deprecated_inline}}</font></font></dt>
+ <dd><font><font>{{HTMLElement ("b")}}</font></font></dd>
+ <dt><font><font>{{jsxref ("String.prototype.fixed ()")}} {{deprecated_inline}}</font></font></dt>
+ <dd><font><font>{{HTMLElement ("tt")}}</font></font></dd>
+ <dt><font><font>{{jsxref ("String.prototype.fontcolor ()")}} {{deprecated_inline}}</font></font></dt>
+ <dd><font><font>{{htmlattrxref ("color", "font", "&lt;font color = \" color \ "&gt;")}}</font></font></dd>
+ <dt><font><font>{{jsxref ("String.prototype.fontsize ()")}} {{deprecated_inline}}</font></font></dt>
+ <dd><font><font>{{htmlattrxref ("size", "font", "&lt;font size = \" size \ "&gt;")}}</font></font></dd>
+ <dt><font><font>{{jsxref ("String.prototype.italics ()")}} {{deprecated_inline}}</font></font></dt>
+ <dd><font><font>{{HTMLElement ("i")}}</font></font></dd>
+ <dt><font><font>{{jsxref ("String.prototype.link ()")}} {{deprecated_inline}}</font></font></dt>
+ <dd><font><font>{{htmlattrxref ("href", "a", "&lt;a href=\"url\"&gt;")}} (Link zu URL)</font></font></dd>
+ <dt><font><font>{{jsxref ("String.prototype.small ()")}} {{deprecated_inline}}</font></font></dt>
+ <dd><font><font>{{HTMLElement ("small")}}</font></font></dd>
+ <dt><font><font>{{jsxref ("String.prototype.strike ()")}} {{deprecated_inline}}</font></font></dt>
+ <dd><font><font>{{HTMLElement ("strike")}}</font></font></dd>
+ <dt><font><font>{{jsxref ("String.prototype.sub ()")}} {{deprecated_inline}}</font></font></dt>
+ <dd><font><font>{{HTMLElement ("sub")}}</font></font></dd>
+ <dt><font><font>{{jsxref ("String.prototype.sup ()")}} {{deprecated_inline}}</font></font></dt>
+ <dd><font><font>{{HTMLElement ("sup")}}</font></font></dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Anfangsdefinition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.3.1', 'String.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype', 'String.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype', 'String.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität"><font><font>Browser-Kompatibilität</font></font></h2>
+
+<p class="hidden"> <font><font>Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. </font><font>Wenn Sie zu den Daten beitragen möchten, lesen Sie bitte </font></font><a href="https://github.com/mdn/browser-compat-data"><font><font>https://github.com/mdn/browser-compat-data</font></font></a><font><font> und senden Sie uns eine Pull-Anfrage.</font></font></p>
+
+<p>{{Compat("javascript.builtins.String.prototype")}}</p>
+
+<h2 id="Sieh_auch">Sieh auch</h2>
+
+<ul>
+ <li>{{jsxref("String")}}</li>
+ <li>{{jsxref("Function.prototype")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/string/raw/index.html b/files/de/web/javascript/reference/global_objects/string/raw/index.html
new file mode 100644
index 0000000000..4405b1b72d
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/string/raw/index.html
@@ -0,0 +1,160 @@
+---
+title: String.raw()
+slug: Web/JavaScript/Reference/Global_Objects/String/raw
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/raw
+---
+<div>{{JSRef}}</div>
+
+<div>Die statische <strong><code>String.raw()</code></strong> Methode ist eine tag Funktion für <a href="/de/docs/Web/JavaScript/Reference/template_strings">template literale</a> ähnlich dem r Präfix in Python oder dem @ Präfix in C# für String Literale (es gibt jedoch einen Unterschied: siehe in der Beschreibung <a href="https://bugs.chromium.org/p/v8/issues/detail?id=5016">dieses Issues</a>). Es wird verwendet um rohen, unveränderten Text zu verwenden.</div>
+
+<div> </div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>String.raw(<var>callSite</var>, <var>...substitutions</var>)
+String.raw`templateString`
+</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>callSite</code></dt>
+ <dd>Sauber formatiertes template call object, wie <code>{ raw: 'string' }</code>.</dd>
+ <dt><code>...substitutions</code></dt>
+ <dd>Enthält Substitutionswerte.</dd>
+ <dt><code>templateString</code></dt>
+ <dd>Ein <a href="/de/docs/Web/JavaScript/Reference/template_strings">template string</a>, optional mit Substitutionen (<code>${...}</code>).</dd>
+</dl>
+
+<h3 id="Rückgabewerte">Rückgabewerte</h3>
+
+<p>Einen rohen, unveränderbaren String des template Strings.</p>
+
+<h3 id="Auftretende_Errors">Auftretende Errors</h3>
+
+<dl>
+ <dt>{{jsxref("TypeError")}}</dt>
+ <dd>Ein {{jsxref("TypeError")}}  wird ausgeworfen wenn das erste Argument nicht sauber formatiert ist.</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Meistens wird <code>String.raw()</code> mit template strings (Vorlagen-Zeichenketten) benutzt. Die erste oben beschriebene Syntax wird kaum benutzt weil die JavaScript engine die Argumente richtig aufrufen wird so wie bei anderen <a href="/de/docs/Web/JavaScript/Reference/template_strings#Tagged_template_strings">tag Funktionen.</a></p>
+
+<p><code>String.raw()</code> ist die einzige built-in tag function für template strings; Sie funktioniert wie eine default template function und führt concatenation (Verbindung mehrerer Strings zu einem) aus. Man kann sie sogar mit JS code neu schreiben.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Verwendung_von_String.raw()">Verwendung von <code>String.raw()</code></h3>
+
+<pre class="brush: js">String.raw`Hi\n${2+3}!`;
+// 'Hi\\n5!', das Zeichen nach 'Hi' ist kein newline (Zeilenumbruch) Zeichen,
+// '\' und 'n' sind zwei Zeichen.
+
+String.raw`Hi\u000A!`;
+// 'Hi\\u000A!', hier genauso, diesmal bekommen wir folgende Zeichen zurrück:
+//  \, u, 0, 0, 0, A, 6
+// Alle Typen von escape characters (besondere Steuerzeichen) sind ineffektiv
+// Backslashes werden unverändert ausgegeben.
+// Man kann dies prüfen indem man die .length property des strings abfragt
+console.log( String.raw`Hi\u000A!`.length ) // gibt 9 zurrück
+console.log( "Hi\u000A!".length ) // gibt 4 zurrück
+
+
+let name = 'Bob';
+String.raw`Hi\n${name}!`;
+// 'Hi\\nBob!', Substitutionen werden bearbeitet.
+
+// Normalerweise ruft man  String.raw() nicht als function auf aber man kann
+//folgendes:
+String.raw({ raw: 'test' }, 0, 1, 2);
+// 't0e1s2t'
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-string.raw', 'String.raw')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.raw', 'String.raw')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>41</td>
+   <td>{{CompatGeckoDesktop("34")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>41</td>
+   <td>{{CompatGeckoMobile("34")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/template_strings">Template strings</a></li>
+ <li>{{jsxref("String")}}</li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/string/repeat/index.html b/files/de/web/javascript/reference/global_objects/string/repeat/index.html
new file mode 100644
index 0000000000..6008654521
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/string/repeat/index.html
@@ -0,0 +1,286 @@
+---
+title: String.prototype.repeat()
+slug: Web/JavaScript/Reference/Global_Objects/String/repeat
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Referenz
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/repeat
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>repeat()</code></strong>-Funktion erzeugt und gibt eine Zeichenkette zurück, die die spezifizierte Anzahl von Kopien der angegebenen Zeichenkette aneinandergereiht enthält.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.repeat(<var>Anzahl</var>);</code>
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>Anzahl</code></dt>
+ <dd>Eine Zahl zwischen 0 und +∞: [0, +∞), die die Anzahl Kopien der Ursprungszeichenkette in der neu erzeugten Zeichenkette definiert.</dd>
+</dl>
+
+<h3 id="Rückgabeergebnis">Rückgabeergebnis</h3>
+
+<p>Eine neue Zeichenkette mit der angegebenen Anzahl an Kopien der vorgegebenen Zeichenkette.</p>
+
+<h3 id="Ausnahmen">Ausnahmen</h3>
+
+<ul>
+ <li>{{jsxref("Errors/Negative_repetition_count", "RangeError")}}: die Wiederholungsanzahl darf nicht negativ sein.</li>
+ <li>{{jsxref("Errors/Resulting_string_too_large", "RangeError")}}: die Anzahl an Wiederholungen darf nicht unendlich sein und die maximale Zeichenkettenlänge nicht überschreiten.</li>
+</ul>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js">'abc'.repeat(-1);   // Parameterfehler
+'abc'.repeat(0);    // ''
+'abc'.repeat(1);    // 'abc'
+'abc'.repeat(2);    // 'abcabc'
+'abc'.repeat(3.5);  // 'abcabcabc' (Anzahl wird in einen ganzzahligen Integer umgewandelt)
+'abc'.repeat(1/0);  // Parameterfehler
+
+({ toString: () =&gt; 'abc', repeat: String.prototype.repeat }).repeat(2);
+// 'abcabc' (repeat() ist eine generische Methode)
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Diese Funktion wurde zur ECMAScript 2015 Spezifikation hinzugefügt und steht unter Umständen noch nicht in allen JavaScript-Implementierungen zur Verfügung. Bedarfsweise können Sie die Methode <code>String.prototype.repeat()</code> durch folgenden Code zur Verfügung stellen:</p>
+
+<pre class="brush: js">if (!String.prototype.repeat) {
+  String.prototype.repeat = function(count) {
+    'use strict';
+    if (this == null) {
+      throw new TypeError('can\'t convert ' + this + ' to object');
+    }
+    var str = '' + this;
+    count = +count;
+    if (count != count) {
+      count = 0;
+    }
+    if (count &lt; 0) {
+      throw new RangeError('repeat count must be non-negative');
+    }
+    if (count == Infinity) {
+      throw new RangeError('repeat count must be less than infinity');
+    }
+    count = Math.floor(count);
+    if (str.length == 0 || count == 0) {
+      return '';
+    }
+    // Ensuring count is a 31-bit integer allows us to heavily optimize the
+    // main part. But anyway, most current (August 2014) browsers can't handle
+    // strings 1 &lt;&lt; 28 chars or longer, so:
+    if (str.length * count &gt;= 1 &lt;&lt; 28) {
+      throw new RangeError('repeat count must not overflow maximum string size');
+    }
+    var rpt = '';
+    for (var i = 0; i &lt; count; i++) {
+      rpt += str;
+    }
+    return rpt;
+  }
+}
+</pre>
+
+<h4 id="Polyfill_ES5">Polyfill ES5</h4>
+
+<pre class="syntaxbox">//#es5
+'use strict';
+(function(win){
+ var typeOf=(function(w){var f=function f(x){return typeof(x)},o=w.Symbol,p;if(o &amp;&amp; typeof(o)==='function' &amp;&amp; typeof(o.iterator)==='symbol'){p=o.prototype;f=function(x){return x &amp;&amp; x.constructor===o &amp;&amp; x!==p?'symbol':typeof x}};return f})(win),
+ exist=function(o,p,t){return p in o &amp;&amp; typeOf(o[p])===t};
+ (function(w){
+    var o=w.String.prototype;
+    if(!exist(o,'repeat','function')){o.repeat=(function(A,E){return function(n){var i=n&gt;&gt;0,s=this,l=s.length,j;if(i===0||l&lt;1){s=''}else{j=268435456;if(i&lt;0||i&gt;=j||i*l&gt;j){throw new RE('Invalidcountvalue')}else if(i&gt;0){s=A(++i).join(s)}};return s}})(w.Array,w.RangeError)};
+ })(win);
+})(window);
+
+//test:
+console.clear();
+console.log(
+'abc'.repeat(false),//''
+'abc'.repeat({}),//''
+'abc'.repeat([]),//''
+'abc'.repeat(['']),//''
+'abc'.repeat([0]),//''
+'abc'.repeat([0,1]),//''
+'abc'.repeat([1,1]),//''
+'abc'.repeat(0),//''
+'abc'.repeat(.6),//''
+'abc'.repeat(true),//'abc'
+'abc'.repeat(1),//'abc'
+'abc'.repeat(2),//'abcabc'
+'abc'.repeat([2]),//'abcabc'
+'abc'.repeat(3.5),//'abcabcabc'
+''.repeat(2)//''
+);
+console.log(
+'abc'.repeat(-Infinity),//RangeError: Invalid count value
+'abc'.repeat(Infinity),//RangeError: Invalid count value
+'abc'.repeat(1/0),//RangeError: Invalid count value
+'abc'.repeat(-1)//RangeError: Invalid count value
+);
+
+/*
+es5 src:
+'use strict';
+(function(win){
+
+ var typeOf=(function(w){var f=function f(x){return typeof(x)},o=w.Symbol,p;if(o &amp;&amp; typeof(o)==='function' &amp;&amp; typeof(o.iterator)==='symbol'){p=o.prototype;f=function(x){return x &amp;&amp; x.constructor===o &amp;&amp; x!==p?'symbol':typeof x}};return f})(win),
+ exist=function(o,p,t){return p in o &amp;&amp; typeOf(o[p])===t};
+
+ (function(w){
+    var o=w.String.prototype;
+    if(!exist(o,'repeat','function')){
+        o.repeat=(function(A,E){
+            return function(n){
+                var i=n&gt;&gt;0,s=this,l=s.length,j;
+                if(i===0||l&lt;1){s=''}else{
+                    j=268435456;
+                    if(i&lt;0||i&gt;=j||i*l&gt;j){throw new RE('Invalidcountvalue')}else if(i&gt;0){s=A(++i).join(s)}
+                };
+                return s
+            };
+        })(w.Array,w.RangeError);
+    };
+    //..
+ })(win);
+
+})(window);
+*/
+</pre>
+
+<h4 id="Polyfill_ES6">Polyfill ES6</h4>
+
+<pre class="syntaxbox">//#es6
+
+(w=&gt;{
+
+    const typeOf=(o=&gt;{let f=x=&gt;typeof x;if(o &amp;&amp; 'function'===typeof o){const s='symbol';if(s===typeof o.iterator){const p=o.prototype;f=x=&gt;x &amp;&amp; x.constructor===o &amp;&amp; x!==p?s:typeof x}};return f})(w.Symbol),
+
+    exist=(o,p,t)=&gt;p in o &amp;&amp; typeOf(o[p])===t;
+
+    (o=&gt;{
+
+        if(!exist(o,'repeat','function')){const A=w.Array,E=w.RangeError;o.repeat=function(n){var i=n&gt;&gt;0,s='';if(i!==0){let t=this;const l=t.length;if(l!==0){if(i&lt;0||i&gt;=(t=268435456)||i*l&gt;t){throw new E('Invalid count value')}else if(i&gt;0){s=A(++i).join(t)}}};return s}};
+
+    })(w.String.prototype);
+
+})(window);
+
+/*
+
+es6 src:
+
+(w=&gt;{
+
+    const typeOf=(o=&gt;{let f=x=&gt;typeof x;if(o &amp;&amp; 'function'===typeof o){const s='symbol';if(s===typeof o.iterator){const p=o.prototype;f=x=&gt;x &amp;&amp; x.constructor===o &amp;&amp; x!==p?s:typeof x}};return f})(w.Symbol),
+
+    exist=(o,p,t)=&gt;p in o &amp;&amp; typeOf(o[p])===t;
+
+
+    (o=&gt;{
+
+        if(!exist(o,'repeat','function')){
+
+            const A=w.Array;
+
+            o.repeat=function(n){var i=n&gt;&gt;0,s='';if(i!==0){let t=this;const l=t.length;if(l!==0){if(i&lt;0||i&gt;=(t=268435456)||i*l&gt;t){throw new RangeError('Invalid count value')}else if(i&gt;0){s=A(++i).join(t)}}};return s};
+
+        };
+
+        //..
+
+    })(w.String.prototype);
+
+
+})(window);
+
+*/
+
+
+//test:
+
+console.clear();
+
+console.log(
+
+'abc'.repeat(false),//''
+
+'abc'.repeat({}),//''
+
+'abc'.repeat([]),//''
+
+'abc'.repeat(['']),//''
+
+'abc'.repeat([0]),//''
+
+'abc'.repeat([0,1]),//''
+
+'abc'.repeat([1,1]),//''
+
+'abc'.repeat(0),//''
+
+'abc'.repeat(.6),//''
+
+'abc'.repeat(true),//'abc'
+
+'abc'.repeat(1),//'abc'
+
+'abc'.repeat(2),//'abcabc'
+
+'abc'.repeat([2]),//'abcabc'
+
+'abc'.repeat(3.5),//'abcabcabc'
+
+''.repeat(2)//''
+
+);
+
+console.log(
+
+'abc'.repeat(-Infinity),//RangeError: Invalid count value
+
+'abc'.repeat(Infinity),//RangeError: Invalid count value
+
+'abc'.repeat(1/0),//RangeError: Invalid count value
+
+'abc'.repeat(-1)//RangeError: Invalid count value
+
+);</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-string.prototype.repeat', 'String.prototype.repeat')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Erste Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.repeat', 'String.prototype.repeat')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.repeat")}}</p>
diff --git a/files/de/web/javascript/reference/global_objects/string/replace/index.html b/files/de/web/javascript/reference/global_objects/string/replace/index.html
new file mode 100644
index 0000000000..c375d3d1f6
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/string/replace/index.html
@@ -0,0 +1,344 @@
+---
+title: String.prototype.replace()
+slug: Web/JavaScript/Reference/Global_Objects/String/replace
+tags:
+  - Expressions
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - Regular
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/replace
+---
+<p>{{JSRef}}<br>
+ Die <code><strong>replace()</strong></code>-Methode gibt eine neue Zeichenkette zurück, in der einige oder alle Übereinstimmungen mit einem <code>Muster</code> durch einen <code>Ersatz</code> ausgetauscht wurden. Das <code>Muster</code> kann eine Zeichenkette oder eine RegExp sein, als <code>Ersatz </code>dienen eine Zeichenkette oder eine Funktion, welche für jede Übereinstimmung aufgerufen wird.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><em>str</em>.replace(<em>regexp|substr</em>, <em>newSubStr|function</em></code><code>);</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parameter</h3>
+
+<dl>
+ <dt><code>regexp</code></dt>
+ <dd>Ein {{jsxref("Global_Objects/RegExp", "RegExp")}}-Objekt. Die Übereinstimmung wird durch den Rückgabewert aus Parameter #2 ersetzt.</dd>
+</dl>
+
+<dl>
+ <dt><code>substr</code></dt>
+ <dd>Eine {{jsxref("Global_Objects/String", "Zeichenkette")}}, welche durch <code>newSubStr</code> ersetzt werden soll. Nur das erste Vorkommen wird ersetzt.</dd>
+</dl>
+
+<dl>
+ <dt><code>newSubStr</code></dt>
+ <dd>Die {{jsxref("Global_Objects/String", "Zeichenkette")}}, welche den Substring aus Parameter #1 ersetzt. Eine Anzahl spezieller Ersetzungsmuster wird unterstützt, siehe den "<a href="#Eine_Zeichenkette_als_Parameter_angeben">Eine Zeichenkette als Parameter angeben</a>"-Abschnitt weiter unten.</dd>
+</dl>
+
+<dl>
+ <dt><code>function</code></dt>
+ <dd>Eine Funktion, welche aufgerufen wird, um den neuen Substring zu erzeugen, der an Stelle des gefundenen Substrings aus Parameter #1 stehen soll. Die Argumente für diese Funktion werden im "<a href="#Eine_Funktion_als_Parameter_angeben">Eine Funktion als Parameter angeben</a>"-Abschnitt unten erläutert.</dd>
+</dl>
+
+<h3 id="Rückgabe">Rückgabe</h3>
+
+<p>Eine neue Zeichenkette, in der einige oder alle Übereinstimmungen mit einem Muster durch einen Ersatz ausgetauscht wurden.</p>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p>Diese Methode ändert nicht das <code>String</code>-Objekt, auf welchem sie aufgerufen wird. Sie gibt lediglich einen neuen String zurück.</p>
+
+<p>Um ein globales Suchen und Ersetzen durchzuführen, setzen Sie den <code>g</code>-Umschalter im Regulären Ausdruck.</p>
+
+<h3 id="Eine_Zeichenkette_als_Parameter_angeben" name="Eine_Zeichenkette_als_Parameter_angeben">Eine Zeichenkette als Parameter angeben</h3>
+
+<p>Die Ersatzzeichenkette kann folgende spezielle Ersetzungsmuster beinhalten:</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td class="header">Pattern</td>
+   <td class="header">Inserts</td>
+  </tr>
+  <tr>
+   <td><code>$$</code></td>
+   <td>Fügt ein "$" ein.</td>
+  </tr>
+  <tr>
+   <td><code>$&amp;</code></td>
+   <td>Fügt den gefundenen Substring ein.</td>
+  </tr>
+  <tr>
+   <td><code>$`</code></td>
+   <td>Fügt den Stringteil vor dem gefundenen Substring ein.</td>
+  </tr>
+  <tr>
+   <td><code>$'</code></td>
+   <td>Fügt den Stringteil nach dem gefundenen Substring ein.</td>
+  </tr>
+  <tr>
+   <td style="white-space: nowrap;"><code>$<em>n</em></code></td>
+   <td>Mit <code><em>n</em></code> als nicht negative ganze Zahl kleiner als 100 wird der <em>n</em>te eingeklammerte Submatch-String eingefügt, der im ersten Argument in der <code>RegExp</code> angegeben wurde.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Eine_Funktion_als_Parameter_angeben" name="Eine_Funktion_als_Parameter_angeben">Eine Funktion als Parameter angeben</h3>
+
+<p>Sie können eine Funktion als zweiten Parameter angeben. In diesem Fall wird diese Funktion aufgerufen, nachdem die Suche ausgeführt wurde. Der Rückgabewert der Funktion wird als Ersatz eingesetzt. (Anmerkung: Die oben genannten speziellen Ersetzungsmuster werden in diesem Fall <em>nicht</em> beachtet.) Bedenken Sie, dass die Funktion für jede Übereinstimmung erneut aufgerufen wird, wenn der reguläre Ausdruck im ersten Parameter den global-Flag gesetzt hat.</p>
+
+<p>Die Argumente dieser Funktion lauten wie folgt:</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td class="header">Möglicher Name</td>
+   <td class="header">Gelieferter Wert</td>
+  </tr>
+  <tr>
+   <td><code>match</code></td>
+   <td>Der gefundene Substring. (Entspricht $&amp; oben.)</td>
+  </tr>
+  <tr>
+   <td><code>p1, p2, ...</code></td>
+   <td>Der <em>n</em>th eingeklammerte Submatch-String, fall im ersten Argument ein <code>RegExp-Objekt</code> angegeben wurde. (Entspricht $1, $2, etc. oben.) Wurde zum Beispiel <code>/(\a+)(\b+)/ angegeben, so ist</code> <code>p1</code> die Übereinstimmung für<code> \a+</code>, und <code>p2</code> für <code>\b+</code>.</td>
+  </tr>
+  <tr>
+   <td><code>offset</code></td>
+   <td>Die Position, an welcher der gefundene Substring innerhalb der gesamten Zeichenkette gefunden wurde. War zum Beispiel die gesamte Zeichenkette <code>"abcd"</code> und der gefundene Substring <code>"bc"</code>, dann wäre das Argument <code>1</code>.)</td>
+  </tr>
+  <tr>
+   <td style="white-space: nowrap;"><code>string</code></td>
+   <td>Die gesamte Zeichenkette, welche durchsucht wird.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>(Die genaue Anzahl der Argumente hängt davon ab, ob das erste Argument eine <code>RegExp</code> war und wieviele eingeklammerte Submatches in diesem Fall angegeben wurden.)</p>
+
+<p>Das folgende Beispiel wird <code>newString </code>auf <code>"<span class="console-formatted-string source-code">abc - 12345 - #$*%</span>"</code> setzen:</p>
+
+<pre class="brush: js">function replacer(match, p1, p2, p3, offset, string){
+  // p1 is nondigits, p2 digits, and p3 non-alphanumerics
+  return [p1, p2, p3].join(' - ');
+}
+newString = "abc12345#$*%".replace(/([^\d]*)(\d*)([^\w]*)/, replacer);
+</pre>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<h3 id="Example_Defining_the_regular_expression_in_replace" name="Example:_Defining_the_regular_expression_in_replace">Beispiel: Definieren des regulären Ausdrucks in <code>replace</code></h3>
+
+<p>Globales Ersetzen kann nur mit einem regulären Ausdruck durchgeführt werden. Im folgenden Beispiel wird der reguläre Ausdruck in <code>replace</code> definiert und beinhaltet den Schalter <code>ignore case</code>.</p>
+
+<pre class="brush: js">var str = "Twas the night before Xmas...";
+var newstr = str.replace(/xmas/i, "Christmas");
+print(newstr);
+</pre>
+
+<p>Dies erzeugt die Ausgabe "Twas the night before Christmas..."</p>
+
+<h3 id="Example_Using_global_and_ignore_with_replace" name="Example:_Using_global_and_ignore_with_replace">Beispiel: Nutzung von <code>global</code> und <code>ignore</code> mit <code>replace</code></h3>
+
+<p>Das nachfolgende Beispiel enthält einen regulären Ausdruck, der sowohl das <code>global</code> als auch das <code>ignore</code> Flag gesetzt hat. Dadurch wird von <code>replace</code> jedes Vorkommnis von 'apples' in der Zeichenkette durch 'oranges' ersetzt.</p>
+
+<pre class="brush: js">var re = /apples/gi;
+var str = "Apples are round, and apples are juicy.";
+var newstr = str.replace(re, "oranges");
+print(newstr);
+</pre>
+
+<p>Dies erzeugt die Ausgabe "oranges are round, and oranges are juicy."</p>
+
+<h3 id="Beispiel_Vertausche_Wörter_in_Strings">Beispiel: Vertausche Wörter in Strings</h3>
+
+<p>Im folgenden Skript werden die Wörter in dem String getauscht. Für die Vertauschung im Text nutzt das Skript die Ersetzungspatterns <code>$1</code> und <code>$2</code>.</p>
+
+<pre class="brush: js">var re = /(\w+)\s(\w+)/;
+var str = "John Smith";
+var newstr = str.replace(re, "$2, $1");
+print(newstr);
+</pre>
+
+<p>Die Ausgabe ist: "Smith, John".</p>
+
+<h3 id="Example_Using_an_inline_function_that_modifies_the_matched_characters" name="Example:_Using_an_inline_function_that_modifies_the_matched_characters">Beispiel: Nutzung von Inline-Funktionen, die die erkannten Zeichen modifizieren</h3>
+
+<p>In diesem Beispiel werden alle Großbuchstaben durch einen Bindestrich und den entsprechenden Kleinbuchstaben ersetzt. Der wichtige Punkt in dem Beispiel ist, dass der Additions-Operator (Konkatination) vor dem Zurückgeben der neuen Zeichenkette erfolgen muss.</p>
+
+<p>Die Ersetzungsfunktion bekommt das erkannte Muster als Parameter übergeben und benutzt diesen, um den Buchstaben zu transformieren und ihn mit dem Bindestrich zu verbinden. Zum Schluss wird das Ergebnis zum Ersetzen zurückgegeben.</p>
+
+<pre class="brush: js">function styleHyphenFormat(propertyName) {
+  function upperToHyphenLower(match) {
+    return '-' + match.toLowerCase();
+  }
+  return propertyName.replace(/[A-Z]/g, upperToHyphenLower);
+}
+</pre>
+
+<p>Gegeben <code>styleHyphenFormat('borderTop')</code>, gibt 'border-top' zurück.</p>
+
+<p>Weil das Ergebnis transformiert werden soll, bevor die finale Ersetzung durchgeführt wird, muss eine Funktion eingesetzt werden. Dieses erzwingt die Ausführung von <code>toLowerCase()</code>. Wenn man das gleiche versucht ohne eine Funktion zu benutzen, wird die toLowerCase() Methode ohne Wirkung sein.</p>
+
+<pre class="brush: js">var newString = propertyName.replace(/[A-Z]/g, '-' + '$&amp;'.toLowerCase());  // won't work
+</pre>
+
+<p>Dieses ist weil <code>'$&amp;'.toLowerCase()</code> ausgeführt wird, bevor der String als Pattern genutzt wird.</p>
+
+<h3 id="Example_Replacing_a_Fahrenheit_degree_with_its_Celsius_equivalent" name="Example:_Replacing_a_Fahrenheit_degree_with_its_Celsius_equivalent">Beispiel: Grad Fahrenheit in Celsius-Grad umwandeln</h3>
+
+<p>Das folgende Beispiel ersetzt einen Wert in Grad Fahrenheit durch den entsprechenden Celsius-Wert. Der Fahrenheitwert sollte eine Nummer sein, die mit einem F endet. Die Funktion gibt eine Celsius-Temperatur mit der Endung C aus. Ist zum Beispiel der Eingabewert 212F, so gibt die Funktion 100C zurück. Ist die Nummer 0F, so wird -17,77777777777778C zurück gegeben.</p>
+
+<p>Der reguläre Ausdruck <code>test</code> prüft jede Nummer, die mit F endet. Die Nummer in Grad Fahrenheit ist durch den zweiten Funktionsparameter, <code>p1</code>, ansprechbar. Die Funktion setzt den Celsiuswert basierend auf dem Fahrenheitwert in einer Zeichenkette in der <code>f2c</code>-Funktion. <code>f2c gibt dann den Celsiuswert zurück. Diese Funktion </code>ähnelt dem s///e-Flag in Perl.</p>
+
+<pre class="brush: js">function f2c(x) {
+  function convert(str, p1, offset, s) {
+    return ((p1-32) * 5/9) + "C";
+  }
+  var s = String(x);
+  var test = /(\d+(?:\.\d*)?)F\b/g;
+  return s.replace(test, convert);
+}
+</pre>
+
+<h3 id="Example_Use_an_inline_function_with_a_regular_expression_to_avoid_for_loops" name="Example: Use an inline function with a regular expression to avoid for loops" style="line-height: 24px;">Beispiel: Verwenden einer inline-Funktion mit einem regulärem Ausdruck um Schleifen zu vermeiden</h3>
+
+<p>Das folgende Beispiel nimmt eine Zeichenkettenmuster und konvertiert es in ein Array von Objekten.</p>
+
+<p><strong>Eingabe:</strong><br>
+ Eine Zeichenkette, die aus den Zeichen x, - und _ besteht</p>
+
+<pre>x-x_
+x---x---x---x---
+x-xxx-xx-x-
+x_x_x___x___x___</pre>
+
+<div><strong><span style="line-height: 1.5;">Ausgabe:</span></strong></div>
+
+<div><span style="line-height: 1.5;">Ein Array mit Objekten. Ein 'x' zeigt einen 'an'-Status an, ein '-' (Bindestrich) symbolisiert einen 'aus'-Status und ein '_' (Unterstrich) gibt die Länge des 'an'-Status an.</span></div>
+
+<pre class="brush: json"><span style="line-height: 1.5;">[</span>
+  { on: true, length: 1 },
+  { on: false, length: 1 },
+  { on: true, length: 2 }
+  ...
+]</pre>
+
+<div><strong>Ausschnitt:</strong></div>
+
+<div>
+<pre class="brush: js">var str = 'x-x_';
+var retArr = [];
+str.replace(/(x_*)|(-)/g, function(match, p1, p2){
+  if(p1) retArr.push({ on: true, length: p1.length });
+  if(p2) retArr.push({ on: false, length: 1 });
+});
+
+console.log(retArr);</pre>
+</div>
+
+<div>Der Ausschnitt generiert ein Array mit drei Objekten im gewünschten Format, ohne eine Schleife zu verwenden.</div>
+
+<div></div>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initiale Definition.<br>
+    Implementiert in JavaScript 1.2</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.11', 'String.prototype.replace')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.replace', 'String.prototype.replace')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.replace', 'String.prototype.replace')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Eigenschaft</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Firefox-spezifische_Bemerkungen">Firefox-spezifische Bemerkungen</h2>
+
+<ul>
+ <li>Mit dem Start von Gecko 27 {{geckoRelease(27)}}, wurde diese Methode an die ECMAScript Spezifikation angepasst. Wenn <code>replace()</code> mit einem globalen regulären Ausdruck aufgerufen wird, wird die {{jsxref("RegExp.lastIndex")}} Eigenschaft (wenn sie Spezifiziert wurde) auf 0 zurückgesetzt ({{bug(501739)}}).</li>
+ <li>Mit dem Start von Gecko 39 {{geckoRelease(39)}} wurden das nicht standardisierte <code>flags</code> Argument als deprecated markiert und wirft eine Warnung in der Konsole ({{bug(1142351)}}).</li>
+ <li>Mit dem Start von Gecko 47 {{geckoRelease(47)}} wurden das nicht standardisierte <code>flags</code> Argument  nicht länger in <span class="short_text" id="result_box" lang="de"><span>Nicht-</span><span>Release-Builds</span></span> unterstützt und wird bald vollständig entfernt ({{bug(1245801)}}).</li>
+ <li>Mit dem Start von Gecko 49 {{geckoRelease(49)}} wurden das nicht standardisierte <code>flags</code> Argument nicht mehr unterstützt ({{bug(1108382)}}).</li>
+</ul>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.match()")}}</li>
+ <li>{{jsxref("RegExp.prototype.exec()")}}</li>
+ <li>{{jsxref("RegExp.prototype.test()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/string/slice/index.html b/files/de/web/javascript/reference/global_objects/string/slice/index.html
new file mode 100644
index 0000000000..d30b18e21f
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/string/slice/index.html
@@ -0,0 +1,152 @@
+---
+title: String.prototype.slice()
+slug: Web/JavaScript/Reference/Global_Objects/String/slice
+translation_of: Web/JavaScript/Reference/Global_Objects/String/slice
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>slice()</code></strong> Methode extrahiert einen Teilbereich eines Strings und gibt einen neuen String zurück.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.slice(<var>AnfangIndex</var>[, E<var>ndIndex</var>])</code></pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>AnfangIndex</code></dt>
+ <dd>Der nullbasierte Index von welchem mit der Extraktion begonnen wird. Wenn dieser negativ ist, wird er als <code>strLength + AnfangIndex, </code>wobei <code>strLength</code> die länge des Strings darstellt, (bspw., wenn <code>AnfangIndex</code>  <code>-3</code> ist, wird es als <code>strLength - 3 gewertet</code>). Wenn <code>beginIndex</code><em> </em>größer oder gleich length des Strings ist, gibt <code>slice()</code> einen leeren String zurück.</dd>
+ <dt><code>EndIndex</code></dt>
+ <dd>Optional. Der nullbasierte Index <em>vor</em> welchem  die Extraktion beendet wird. Der Charakter an diesem Index wird nicht mit einbezogen. Wenn <code>EndIndex </code>ausgelassen wird, extrahiert <code>slice()</code> bis zum Ende des Strings. Wenn <code>EndIndex </code>negativ ist, wird es wie <code>strLength + EndIndex</code> gewertet, wobei strLength sich auf die Länge des Strings bezieht (z.B.: wenn E<code>ndIndex</code>  <code>-3 ist, wird es gewertet wie </code><code>strLength - 3).</code></dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>Ein neuer String, welcher die extrahierte Sektion des Strings enthält.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p><code>slice()</code> extrahiert den Text eines Strings und gibt einen neuen zurück. Änderungen im einen String wirken sich nicht auf den anderen String aus.</p>
+
+<p><code>slice()</code> extrahiert bis, aber nicht einschließlich, <code>EndIndex. </code><code>str.slice(1, 4)</code> extrahiert den zweiten Charakter bis zum vierten  (Character mit den Indexen 1, 2, und 3).</p>
+
+<p>Als Beispiel, <code>str.slice(2, -1)</code> extrahiert den dritten Charakter bis zum zweiten, bis zum letzten Charakter im String.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Benutzen_von_slice()_um_einen_neuen_String_zu_erzeugen"><code>Benutzen von slice()</code> um einen neuen String zu erzeugen</h3>
+
+<p>Das folgende Beispiel benutzt <code>slice()</code> um einen neuen String zu erzeugen.</p>
+
+<pre class="brush: js">var str1 = 'The morning is upon us.', // the length of str1 is 23.
+    str2 = str1.slice(1, 8),
+    str3 = str1.slice(4, -2),
+    str4 = str1.slice(12),
+    str5 = str1.slice(30);
+console.log(str2); // OUTPUT: he morn
+console.log(str3); // OUTPUT: morning is upon u
+console.log(str4); // OUTPUT: is upon us.
+console.log(str5); // OUTPUT: ""
+</pre>
+
+<h3 id="Benutzen_von_slice()_mit_negativen_Indexen">Benutzen von <code>slice()</code> mit negativen Indexen</h3>
+
+<p>Das folgende Beispiel benutzt <code>slice()</code> mit negativen Indexen.</p>
+
+<pre class="brush: js">var str = 'The morning is upon us.';
+str.slice(-3);     // returns 'us.'
+str.slice(-3, -1); // returns 'us'
+str.slice(0, -1);  // returns 'The morning is upon us'
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.13', 'String.prototype.slice')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.slice', 'String.prototype.slice')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.slice', 'String.prototype.slice')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_kompatibilität">Browser kompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.substr()")}}</li>
+ <li>{{jsxref("String.prototype.substring()")}}</li>
+ <li>{{jsxref("Array.prototype.slice()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/string/split/index.html b/files/de/web/javascript/reference/global_objects/string/split/index.html
new file mode 100644
index 0000000000..cfea09cc76
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/string/split/index.html
@@ -0,0 +1,212 @@
+---
+title: String.prototype.split()
+slug: Web/JavaScript/Reference/Global_Objects/String/split
+translation_of: Web/JavaScript/Reference/Global_Objects/String/split
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>split()</code></strong> Methode teilt ein {{jsxref("String")}} Objekt in ein Array von Strings auf, indem der String in Teilstrings zerteilt wird, wobei ein angegebenes Trennzeichen verwendet wird, um zu bestimmen, wo die Aufteilung erfolgen soll.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/string-split.html")}}</p>
+
+<h2 id="Summary" name="Summary">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.split([<var>separator</var>[, <var>limit</var>]])</code></pre>
+
+<div class="blockIndicator warning">
+<p>Achtung: Wenn leerer ein String ("") als Trennzeichen verwendet wird, wird der String <strong>nicht</strong> zwischen jedem <em>vom Benutzer wahrgenommenen Zeichen</em> (<a href="https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries">Graphem-Cluster</a>) oder zwischen jedem Unicode-Zeichen (Codepoint) aufgeteilt, sondern zwischen jeder UTF-16-Codeeinheit. Dadurch werden <a href="http://unicode.org/faq/utf_bom.html#utf16-2">Ersatzpaare</a> (surrogate pairs) zerstört. Siehe auch <a href="https://stackoverflow.com/a/34717402">How do you get a string to a character array in JavaScript?</a> auf Stack Overflow.</p>
+</div>
+
+<h3 id="Parameters" name="Parameters">Parameter</h3>
+
+<dl>
+ <dt><code>separator</code> {{optional_inline}}</dt>
+ <dd>Ein String, der die Punkte angibt, an denen jede Aufteilung erfolgen soll. <code>separator</code> wird als Zeichenfolge oder als {{jsxref("Global_Objects/RegExp", "regulärer Ausdruck", "", 1)}} behandelt. Wenn ein Nur-Text <code>separator</code> mehr als ein Zeichen enthält, muss der gesamte String gefunden werden, damit eine Trennung erfolgt. Wenn <code>separator</code> nicht angegeben wird oder in <code>str</code> nicht vorkommt, enthält das zurückgegebene Array ein Element, das den gesamten String enthält. Wenn <code>separator</code> ein leerer String ist, wird jedes Zeichen von <code>str</code> in ein Array-Element umgewandelt.</dd>
+ <dt><code>limit</code> {{optional_inline}}</dt>
+ <dd>Ganzzahl, die ein Limit für die Anzahl der zu findenden Splits angibt. Wenn dieser Parameter angegeben wird, teilt die <code>split()</code> Methode die Zeichenfolge bei jedem Vorkommen des angegebenen <code>separator</code> auf, stoppt jedoch, nachdem die Anzahl von <code>limit</code> erreicht wurde. Es können immer noch weniger Einträge als <code>limit</code> enthalten sein, wenn das Ende des Strings erreicht wurde, bevor das angegebene Limit erreicht wird. Der übrig gebliebene Text wird im neuen Array nicht enthalten sein.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein {{jsxref("Array")}} mit Strings, welcher an jedem Punkt aufgeteilt wurde, an dem das Trennzeichen in der angegebenen Zeichenfolge aufgetreten ist.</p>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p>Wenn gefunden, wird <code>separator</code> aus dem String entfernt und die Teilstrings werden in einem Array zurückgegeben. Wenn <code>separator</code> nicht gefunden oder weggelassen wird, enthält das Array ein Element, das aus dem gesamten String besteht. Wenn <code>separator</code> ein leerer String ist, wird <code>str</code> in ein Array aus Zeichen umgewandelt. Wenn <code>separator</code> am Anfang, Ende oder Anfang und Ende eines Strings gefunden wird, beginnt, endet oder beginnt und endet das Array mit einem leeren String. Besteht ein String daher nur aus einem einzigen Vorkommnis von <code>separator</code> besteht, besteht das Array also aus zwei leeren Strings.</p>
+
+<p>Wenn <code>separator</code> ein regulärer Ausdruck ist, der runde Klammern enthält, werden die Ergebnisse (einschließlich etwaiger undefinierter Ergebnisse) der Klammern bei jeder Übereinstimmung von <code>separator</code> in das ausgegebene Array eingefügt.</p>
+
+<div class="blockIndicator note">
+<p><strong>Hinweis:</strong> Wenn <code>separator</code> ein Array ist, wird das Array in einen String umgewandelt und als Trennzeichen verwendet.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Hinweis:</strong> Wenn der String leer ist, gibt <code>split()</code> ein Array zurück, das einen leeren String anstelle eines leeren Arrays enthält. Wenn sowohl der String als auch das Trennzeichen leere Zeichenfolgen sind, wird ein leeres Array zurückgegeben.</p>
+</div>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<h3 id="Example:_Using_split" name="Example:_Using_split">Verwendung von <code>split()</code></h3>
+
+<p>Im folgenden Beispiel wird eine Funktion definiert, die einen String mithilfe des angegebenen Trennzeichens in ein Array aus Strings aufteilt. Nach dem Aufteilen des Strings protokolliert die Funktion Meldungen, die den ursprüngliche String angeben (vor der Aufteilung), das verwendete Trennzeichen, die Anzahl der Elemente im Array und die einzelnen Arrayelemente.</p>
+
+<pre class="brush: js">function splitString(stringToSplit, separator) {
+  var arrayOfStrings = stringToSplit.split(separator);
+
+  console.log('The original string is: "' + stringToSplit + '"');
+  console.log('The separator is: "' + separator + '"');
+  console.log('The array has ' + arrayOfStrings.length + ' elements: ' + arrayOfStrings.join(' / '));
+}
+
+var tempestString = 'Oh brave new world that has such people in it.';
+var monthString = 'Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec';
+
+var space = ' ';
+var comma = ',';
+
+splitString(tempestString, space);
+splitString(tempestString);
+splitString(monthString, comma);</pre>
+
+<p>Das Beispiel erzeugt den folgende Ausgabe:</p>
+
+<pre class="brush: js">The original string is: "Oh brave new world that has such people in it."
+The separator is: " "
+The array has 10 elements: Oh / brave / new / world / that / has / such / people / in / it.
+
+The original string is: "Oh brave new world that has such people in it."
+The separator is: "undefined"
+The array has 1 elements: Oh brave new world that has such people in it.
+
+The original string is: "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec"
+The separator is: ","
+The array has 12 elements: Jan / Feb / Mar / Apr / May / Jun / Jul / Aug / Sep / Oct / Nov / Dec</pre>
+
+<h3 id="Example:_Removing_spaces_from_a_string" name="Example:_Removing_spaces_from_a_string">Leerzeichen aus einem String entfernen</h3>
+
+<p>Im folgenden Beispiel sucht <code>split()</code> nach 0 oder mehr Leerzeichen, gefolgt von einem Semikolon und 0 oder mehr Leerzeichen. Wenn es sie findet, entfernt es die Leerzeichen aus dem String. <code>nameList</code> ist das Array, was als Ergebnis von <code>split() zurückgegeben wird</code>.</p>
+
+<pre class="brush: js">var names = 'Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand ';
+
+console.log(names);
+
+var re = /\s*(?:;|$)\s*/;
+var nameList = names.split(re);
+
+console.log(nameList);</pre>
+
+<p>Dies protokolliert zwei Zeilen. Die erste Zeile protokolliert die ursprüngliche Zeichenfolge und die zweite Zeile das resultierende Array.</p>
+
+<pre>Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand
+[ "Harry Trump", "Fred Barney", "Helen Rigby", "Bill Abel", "Chris Hand", "" ]
+</pre>
+
+<h3 id="Example:_Returning_a_limited_number_of_splits" name="Example:_Returning_a_limited_number_of_splits">Eine begrenzte Anzahl von Trennungen zurückgeben</h3>
+
+<p>Im folgenden Beispiel sucht <code>split()</code> nach 0 oder mehr Leerzeichen im String und gibt die ersten 3 Treffer zurück, die es findet.</p>
+
+<pre class="brush: js">var myString = 'Hello World. How are you doing?';
+var splits = myString.split(' ', 3);
+
+console.log(splits);</pre>
+
+<p>Dieses Skript gibt folgendes aus:</p>
+
+<pre>["Hello", "World.", "How"]
+</pre>
+
+<h3 id="Teilen_mit_einer_RegExp_um_Teile_des_Trennzeichens_in_das_Ergebnis_aufzunehmen">Teilen mit einer <code>RegExp</code>, um Teile des Trennzeichens in das Ergebnis aufzunehmen</h3>
+
+<p>Wenn <code>separator</code> ein regulärer Ausdruck ist, der runde Klammern <code>()</code> enthält, werden übereinstimmende Ergebnisse in das Array aufgenommen.</p>
+
+<pre class="brush: js">var myString = 'Hello 1 word. Sentence number 2.';
+var splits = myString.split(/(\d)/);
+
+console.log(splits);</pre>
+
+<p>Dieses Skript gibt folgendes aus:</p>
+
+<pre class="brush: js">[ "Hello ", "1", " word. Sentence number ", "2", "." ]</pre>
+
+<p> </p>
+
+<h3 id="Teilen_mit_einem_Array_als_Trennzeichen">Teilen mit einem Array als Trennzeichen</h3>
+
+<p> </p>
+
+<pre class="brush: js">var myString = 'this|is|a|Test';
+var splits = myString.split(['|']);
+
+console.log(splits); //["this", "is", "a", "Test"]
+
+var myString = 'ca,bc,a,bca,bca,bc';
+
+var splits = myString.split(['a','b']);
+// myString.split(['a','b']) ist dasselbe wie myString.split(String(['a','b']))
+
+console.log(splits);  //["c", "c,", "c", "c", "c"]</pre>
+
+<h3 id="Example:_Reversing_a_String_using_split" name="Example:_Reversing_a_String_using_split">Einen String mit <code>split()</code> umkehren</h3>
+
+<div class="blockIndicator warning">
+<p>Dies ist keine robuste Art einen String umzukehren.</p>
+
+<pre class="brush: js">var str = 'asdfghjkl';
+var strReverse = str.split('').reverse().join(''); // 'lkjhgfdsa'
+// split() returns an array on which reverse() and join() can be applied
+</pre>
+
+<p>Das funktioniert nicht, wenn der String Graphem-Cluster enthält, selbst wenn ein Unicode-fähiger Split verwendet wird (verwenden Sie stattdessen bspw. <a href="https://github.com/mathiasbynens/esrever">esrever</a>).</p>
+
+<pre class="brush: js">var str = 'résumé';
+var strReverse = str.split(/(?:)/u).reverse().join('');
+// =&gt; "́emuśer"
+</pre>
+
+<p><strong>Bonus:</strong> Verwenden Sie sen {{jsxref("Operators/Comparison_Operators", "===", "#Identity_.2F_strict_equality_(.3D.3D.3D)")}} Operator um zu testen, ob der ursprüngliche String ein Palindrom war.</p>
+</div>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.14', 'String.prototype.split')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.split', 'String.prototype.split')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.split', 'String.prototype.split')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{Compat("javascript.builtins.String.split")}}</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.charAt()")}}</li>
+ <li>{{jsxref("String.prototype.indexOf()")}}</li>
+ <li>{{jsxref("String.prototype.lastIndexOf()")}}</li>
+ <li>{{jsxref("Array.prototype.join()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/string/startswith/index.html b/files/de/web/javascript/reference/global_objects/string/startswith/index.html
new file mode 100644
index 0000000000..adbb0dce44
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/string/startswith/index.html
@@ -0,0 +1,150 @@
+---
+title: String.prototype.startsWith()
+slug: Web/JavaScript/Reference/Global_Objects/String/startsWith
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Prototype
+  - Referenz
+  - String
+  - protype
+translation_of: Web/JavaScript/Reference/Global_Objects/String/startsWith
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong>startsWith()-</strong>Methode stellt fest, ob ein String mit den Zeichen eines anderen Strings beginnt, falls dies so ist, wird <code>true</code>, sonst wird <code>false</code> zurückgegeben. </p>
+
+<pre class="syntaxbox"><code><var>str</var>.startsWith(<var>searchString</var>[, <var>position</var>])</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>searchString</code></dt>
+ <dd>Die Zeichenfolge, nach der am Anfang des Strings gesucht wird.</dd>
+ <dt><code>position</code></dt>
+ <dd>Optional. Die Position, an der die Suche nach <code>searchString</code> begonnen werden soll. Der Standardwert ist 0.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p><strong>true</strong> wenn der String mit den Zeichen aus dem übergebenen String beginnt, andernfalls <strong>false</strong>.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Diese Methode dient dazu herauszufinden, ob ein String am Anfang eines anderen Strings steht. Die Methode unterscheidet Groß- und Kleinschreibung.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Benutzung_von_startsWith">Benutzung von <code>startsWith()</code></h3>
+
+<pre class="brush: js">//startsWith
+var str = 'Sein oder nicht sein, das ist hier die Frage';
+
+console.log(str.startsWith('Sein oder'));      // true
+console.log(str.startsWith('nicht sein'));     // false
+console.log(str.startsWith('nicht sein', 10)); // true
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Diese Methode ist Bestandteil der ECMAScript-6-Spezifikation. Dennoch kann es vorkommen, dass sie noch nicht in allen Javascript-Implementierungen vorhanden ist. Man kann ihre Funktionsweise allerdings mit folgendem Ausdruck emulieren:</p>
+
+<pre class="brush: js">if (!String.prototype.startsWith) {
+  String.prototype.startsWith = function(searchString, position) {
+    position = position || 0;
+    return this.indexOf(searchString, position) === position;
+  };
+}
+</pre>
+
+<p>Eine robustere und schnellerer (optimierte) Version findet sich <a href="https://github.com/mathiasbynens/String.prototype.startsWith">auf GitHub, geschrieben von Mathias Bynens</a>.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-string.prototype.startswith', 'String.prototype.startsWith')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.startswith', 'String.prototype.startsWith')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<h2 id="CompatibilityTable"><span style="font-size: 14px; font-weight: normal; line-height: 1.5;">{{CompatibilityTable}}</span></h2>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("41")}}</td>
+   <td>{{CompatGeckoDesktop("17")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>28</td>
+   <td>{{CompatSafari("9")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome("36")}}</td>
+   <td>{{CompatGeckoMobile("17")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect1"> </h2>
+
+<p>Zu beachten ist, dass die MSDN Dokumentation für diese Methode (<a href="https://msdn.microsoft.com/de/library/mt146831(v=vs.94).aspx">https://msdn.microsoft.com/en-us/library/mt146831(v=vs.94).aspx</a>) besagt, das es nicht im Internet Explorer unterstützt wird.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.endsWith()")}}</li>
+ <li>{{jsxref("String.prototype.includes()")}}</li>
+ <li>{{jsxref("String.prototype.indexOf()")}}</li>
+ <li>{{jsxref("String.prototype.lastIndexOf()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/string/substr/index.html b/files/de/web/javascript/reference/global_objects/string/substr/index.html
new file mode 100644
index 0000000000..354d417ea9
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/string/substr/index.html
@@ -0,0 +1,171 @@
+---
+title: String.prototype.substr()
+slug: Web/JavaScript/Reference/Global_Objects/String/substr
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/substr
+---
+<div>{{JSRef}}</div>
+
+<p>Die Methode <strong><code>substr()</code></strong> gibt die Zeichen eines Strings in einem gegebenen Intervall zurück.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.substr(<var>start</var>[, <var>length</var>])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parameter</h3>
+
+<dl>
+ <dt><code>start</code></dt>
+ <dd>Ort im String, an dem mit dem Extrahieren von Zeichen begonnen wird. Wird eine negative Zahl übergeben, wird sie als <code>str.length - start</code> behandelt (Wenn <code>start</code> z. B. -3 ist, wird es als <code>str.length - 3</code> behandelt).</dd>
+ <dt><code>length</code></dt>
+ <dd>Optional. Die Anzahl der Zeichen, die extrahiert werden sollen.</dd>
+</dl>
+
+<h3 id="Description" name="Description">Rückgabewert</h3>
+
+<p>Einen neuen String, der den extrahierten Bereich des gegebene Strings enthält. Wenn <strong><code>length</code> <code>0</code></strong> oder negativ ist, wird ein leerer String zurückgegeben.</p>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p><code>start</code> ist ein Zeichenindex. Der Index des ersten Zeichens ist 0 und der Index des letzten Zeichens ist 1 weniger als die Länge des Strings. <code>substr()</code>fängt mit dem Extrahieren von Zeichen bei <code>start</code> an und extrahiert <code>length</code> Zeichen (es sei denn, es erreicht vorher das Ende des Strings, dann gibt es weniger zurück).</p>
+
+<p>Wenn <code>start</code> positiv ist und größer gleich der Länge des Strings ist, gibt <code>substr()</code> einen leeren String zurück.</p>
+
+<p>Wenn <code>start</code> negativ ist, verwendet <code>substr()</code> es als Zeichenindex vom Ende des Strings. Wenn <code>start</code> negativ ist und <code>abs(start)</code> größer als die Länge des Strings ist, verwendet <code>substr()</code> 0 als Zeichenindex. Anmerkung: Der beschriebene Umgang mit negativen Werten für <code>start</code> wird von Microsoft JScript nicht unterstützt.</p>
+
+<p>Wenn <code>length</code> 0 oder negativ ist, gibt <code>substr()</code> einen leeren String zurück. Wenn <code>length</code> nicht übergeben wird, extrahiert <code>substr()</code> alle Zeichen bis zum Ende des Strings.</p>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<h3 id="Example:_Using_substr" name="Example:_Using_substr">Verwenden von <code>substr()</code></h3>
+
+<pre class="brush: js">var str = 'abcdefghij';
+
+console.log('(1, 2): '   + str.substr(1, 2));   // '(1, 2): bc'
+console.log('(-3, 2): '  + str.substr(-3, 2));  // '(-3, 2): hi'
+console.log('(-3): '     + str.substr(-3));     // '(-3): hij'
+console.log('(1): '      + str.substr(1));      // '(1): bcdefghij'
+console.log('(-20, 2): ' + str.substr(-20, 2)); // '(-20, 2): ab'
+console.log('(20, 2): '  + str.substr(20, 2));  // '(20, 2): '
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Polyfill</h2>
+
+<p>Microsofts JScript unterstützt keine negativen Werte für den Startindex. Der folgende Kompatibilitätscode ist ein Workaround für diesen Bug:</p>
+
+<pre class="brush: js">// Nur verwenden, wenn die substr()-Funktion nicht funktioniert
+if ('ab'.substr(-1) != 'b') {
+  /**
+   *  Einen Teilstring erhalten
+   *  @param  {integer}  start   Startindex des Teilstrings
+   *  @param  {integer}  length  Länge des Teilstrings
+   *  @return {string}
+   */
+  String.prototype.substr = function(substr) {
+    return function(start, length) {
+       // Aufruf der Originalfunktion
+       return substr.call(this,
+         // Wenn start negativ ist, berechnen wie viel start
+         // vom Anfang des Strings ist
+         start &lt; 0 ? this.length + start : start,
+         length);
+    }
+  }(String.prototype.substr);
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Im (informativen) Anhang B "Compatibility" definiert. Implementiert in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-B.2.3', 'String.prototype.substr')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Im (informativen) Anhang B "Compatibility" definiert.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.substr', 'String.prototype.substr')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Im (normativen) Anhang B "Additional ECMAScript Features for Web Browsers" definiert.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.substr', 'String.prototype.substr')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Im (normativen) Anhang B "Additional ECMAScript Features for Web Browsers" definiert.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.slice()")}}</li>
+ <li>{{jsxref("String.prototype.substring()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/string/substring/index.html b/files/de/web/javascript/reference/global_objects/string/substring/index.html
new file mode 100644
index 0000000000..4ed1e33959
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/string/substring/index.html
@@ -0,0 +1,199 @@
+---
+title: String.prototype.substring()
+slug: Web/JavaScript/Reference/Global_Objects/String/substring
+tags:
+  - Funktion
+  - JavaScript
+  - Method
+  - Methode(2)
+  - Méthode
+  - Prototype
+  - Reference
+  - Referenz
+  - Référence(2)
+  - String
+  - Zeichenkette
+translation_of: Web/JavaScript/Reference/Global_Objects/String/substring
+---
+<div>{{JSRef("Global_Objects", "String")}}</div>
+
+<h2 id="Summary" name="Summary">Definition</h2>
+
+<p>Die <strong><code>substring()</code></strong> Methode gibt einen Teilstring eines <code>Strings</code> zwischen einem Index und einem anderen, oder dem Ende der Zeichenkette zurück.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.substring(<var>indexA</var>[, <var>indexB</var>])</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parameter</h3>
+
+<dl>
+ <dt><code>indexA</code></dt>
+ <dd>Ein Integer zwischen <code>0</code> und der Länge der Zeichenkette, welcher das erste Zeichen des Teilstrings repräsentiert.</dd>
+ <dt><code>indexB</code></dt>
+ <dd>Optional. Ein Integer zwischen <code>0</code> und der Länge der Zeichenkette, welcher das erste nicht im Teilstring enthaltene Zeichen darstellt.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p><code>substring()</code> extrahiert Zeichen von <code>indexA</code> bis nicht einschließlich <code>indexB</code>. Im Detail:</p>
+
+<ul>
+ <li>Falls <code>indexA</code> gleich <code>indexB ist</code>, gibt <code>substring()</code> einen leeren String zurück.</li>
+ <li>Falls <code>indexB</code> nicht angegeben ist, extrahiert <code>substring()</code> alle Zeichen bis zum Ende der Zeichenkette.</li>
+ <li>Falls eines der Argumente kleiner als 0 oder {{jsxref("Global_Objects/NaN", "NaN")}} ist, wird dieser als 0 interpretiert.</li>
+ <li>Falls eines der Argumente größer als die Länge der Zeichenkette ist, wird dieses als <code>stringName.length behandelt</code>.</li>
+</ul>
+
+<p>Falls <code>indexA</code> größer als <code>indexB ist</code>, werden die Argumente vertauscht <code>substring()</code>; zum Beispiel, <code><em>str</em>.substring(1, 0) == <em>str</em>.substring(0, 1)</code>.</p>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<h3 id="Example:_Using_substring" name="Example:_Using_substring">Beispiel: Benutzung von <code>substring()</code></h3>
+
+<p>Das folgende Beispiel benutzt <code>substring()</code>, um Zeichen des Strings <code>'Mozilla' anzuzeigen</code>:</p>
+
+<pre class="brush: js">var anyString = 'Mozilla';
+
+// Zeigt 'Moz'
+console.log(anyString.substring(0, 3));
+console.log(anyString.substring(3, 0));
+
+// Zeigt 'lla'
+console.log(anyString.substring(4, 7));
+console.log(anyString.substring(7, 4));
+
+// Zeigt 'Mozill'
+console.log(anyString.substring(0, 6));
+
+// Zeigt 'Mozilla'
+console.log(anyString.substring(0, 7));
+console.log(anyString.substring(0, 10));
+</pre>
+
+<h3 id="Example:_Using_substring_with_length_property" name="Example:_Using_substring_with_length_property">Beispiel: Benutzung von <code>substring()</code> mit <code>length</code> Eigenschaft</h3>
+
+<p>Das folgende Beispiel benutzt die <code>substring()</code> Methode und die {{jsxref("String.length", "length")}} Eigenschaft, um die letzten Zeichen des Strings zu extrahieren. Diese Methode ist leichter zu merken, da die genauen Start- und Endparameter nicht bekannt sein müssen.</p>
+
+<pre class="brush: js">// Zeigt 'illa' - die letzten 4 Zeichen
+var anyString = 'Mozilla';
+var anyString4 = anyString.substring(anyString.length - 4);
+console.log(anyString4);
+
+// Zeigt 'zilla' - die letzten 5 Zeichen
+var anyString = 'Mozilla';
+var anyString5 = anyString.substring(anyString.length - 5);
+console.log(anyString5);
+</pre>
+
+<h3 id="Example:_Replacing_a_substring_within_a_string" name="Example:_Replacing_a_substring_within_a_string">Beispiel: Ersetze ein Teilstring mit einem String</h3>
+
+<p>Das folgende Beispiel ersetzt ein Teilstring mit einem String. Es werden sowohhl einzelne Zeichen als auch Teilstrings ersetzt. Der Funktionsaufruf am Ende des Beispiel ändert die Zeichenkette <code>'Brave New World'</code> in <code>'Brave New Web'</code>.</p>
+
+<pre class="brush: js">// Ersetzt oldS mit newS in der Zeichenkette fullS
+function replaceString(oldS, newS, fullS) {
+  for (var i = 0; i &lt; fullS.length; ++i) {
+    if (fullS.substring(i, i + oldS.length) == oldS) {
+      fullS = fullS.substring(0, i) + newS + fullS.substring(i + oldS.length, fullS.length);
+    }
+  }
+  return fullS;
+}
+
+replaceString('World', 'Web', 'Brave New World');
+</pre>
+
+<p>Beachte, dass dieses Beispiel auch in einer Endlosschleife resultieren kann, wenn <code>oldS</code> ein Teilstring von <code>newS</code> ist — zum Beispiel, falls 'World' mit 'OtherWorld' ersetzt wird. Der folgende Code zeigt ein bessere Methode Strings zu ersetzen:</p>
+
+<pre class="brush: js">function replaceString(oldS, newS, fullS) {
+  return fullS.split(oldS).join(newS);
+}
+</pre>
+
+<p>Der oben stehende Code zeigt ein Beispiel für die Verwendung der substring Operation. Falls Teilstrings ersetzt werden, kann in den meisten Fällen {{jsxref("String.prototype.replace()")}} verwendet werden.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1. Edition.</td>
+   <td>Standard</td>
+   <td>In JavaScript 1.0 implementiert.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.15', 'String.prototype.substring')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.substring', 'String.prototype.substring')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Standard Support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Standard Support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.substr()")}}</li>
+ <li>{{jsxref("String.prototype.slice()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/string/suchen/index.html b/files/de/web/javascript/reference/global_objects/string/suchen/index.html
new file mode 100644
index 0000000000..5fb838010a
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/string/suchen/index.html
@@ -0,0 +1,105 @@
+---
+title: String.prototype.search()
+slug: Web/JavaScript/Reference/Global_Objects/String/suchen
+tags:
+  - JavaScript
+  - Méthode
+  - Prototyp
+  - Referenz
+  - Regulärer Ausdruck
+  - Zeichenkette
+translation_of: Web/JavaScript/Reference/Global_Objects/String/search
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>search()</code></strong> methode führt eine Suche für eine Übereinstimmung von einem Regulären Ausdruck und diesem {{jsxref("String")}} Objekt.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-search.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>str</var>.search(<var>regexp</var>)</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>regexp</code></dt>
+ <dd>Ein Regulär-Ausdruck Objekt. Wenn ein nicht-RegExp Objekt <code>obj</code> eingereicht wird, wird es durch <code>new RegExp(obj)</code> zu {{jsxref("RegExp")}} konvertiert.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Die erste übereinstimmung zwischen dem Regulären Audruck und und der gegebenen Zeichenkette; wenn nicht gefunden, <strong>-1</strong>.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Wenn du wissen willst ob ein Muster gefunden wurde, und was sein Index ist nutze <code>search()</code> (wenn du nur wissen willst ob es das gibt nutze die ähnliche {{jsxref("RegExp.prototype.test()", "test()")}} Methode auf dem RegExp Prototyp, der einen boolean zurückgibt); für mehr informationen (aber langsamererere Ausführung) nutze {{jsxref("String.prototype.match()", "match()")}} (ähnlich zum Ausdruck {{jsxref("RegExp.prototype.exec()", "exec()")}}).</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Benutzung_von_search">Benutzung von <code>search()</code></h3>
+
+<p>Das folgende Beispiel durchsucht eine Zeichenkette mit 2 verschiedenen regex Objekten, um eine erfolgreiche, und unerfolgreiche Suche zu zeigen.</p>
+
+<pre class="brush: js">var str = "hey LukE";
+var re = /[A-Z]/g;
+var re2 = /[.]/g;
+console.log(str.search(re)); // gibt 4 zurück, was der Index des ersten Großbuchstaben "L" ist.
+console.log(str.search(re2)); // gibt -1 zurück kann "." nicht finden</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initielle Definition. Eingeführt in JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.12', 'String.prototype.search')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.search', 'String.prototype.search')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.search', 'String.prototype.search')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.search")}}</p>
+
+<h2 id="Gecko-spezifische_Hinweise">Gecko-spezifische Hinweise</h2>
+
+<ul>
+ <li><code>flags</code> war ein nicht-standard Zweitargument nur in Gecko verfügbar: <var>str</var>.search(<var>regexp, flags</var>)</li>
+ <li>Vorher {{Gecko("8.0")}}, <code>search()</code> war falsch eingeführt; wenn es ohne oder mit {{jsxref("undefined")}} parametern Ausgeführt wurde, würde es mit 'undefined' übereinstimmen, anstatt mit einer leeren Zeichenkette übereinzustimmen. Das wurde behoben; jetzt ist <code>'a'.search()</code> und <code>'a'.search(undefined)</code> korrekt und geben 0 zurück.</li>
+ <li>Ab Gecko 39 {{geckoRelease(39)}}, gibt das nicht-Standard <code>flag</code> Argument eine Konsolenwarnung ({{bug(1142351)}}).</li>
+ <li>Ab Gecko 47 {{geckoRelease(47)}}, ist das nicht-Standard <code>flag</code> Argument nicht länger unterstützt in nicht-veröffentlichten Builds und wird bald vollständig entfernt ({{bug(1245801)}}).</li>
+ <li>Ab Gecko 49 {{geckoRelease(49)}}, ist das nicht-Standard <code>flag</code> Argument nicht länger unterstützt ({{bug(1108382)}}).</li>
+</ul>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.match()")}}</li>
+ <li>{{jsxref("RegExp.prototype.exec()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/string/tolowercase/index.html b/files/de/web/javascript/reference/global_objects/string/tolowercase/index.html
new file mode 100644
index 0000000000..f3eb4d9f68
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/string/tolowercase/index.html
@@ -0,0 +1,79 @@
+---
+title: String.prototype.toLowerCase()
+slug: Web/JavaScript/Reference/Global_Objects/String/toLowerCase
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Referenz
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/toLowerCase
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>toLowerCase()</code></strong> Methode gibt den Wert des aufrufenden Strings in Kleinbuchstaben umgewandelt zurück.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.toLowerCase()</code></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein neuer String, der den alten String konvertiert zu Kleinbuchstaben enthält.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>toLowerCase()</code> Methode gibt den Wert des Strings in Kleinbuchstaben umgewandelt zurück. <code>toLowerCase()</code> hat keine Auswirkungen auf den Wert des Strings <code>str</code>.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Benutzung_von_toLowerCase()">Benutzung von <code>toLowerCase()</code></h3>
+
+<pre class="brush: js">console.log('ALPHABET'.toLowerCase()); // 'alphabet'
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.16', 'String.prototype.toLowerCase')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.tolowercase', 'String.prototype.toLowerCase')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.tolowercase', 'String.prototype.toLowerCase')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.toLowerCase")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.toLocaleLowerCase()")}}</li>
+ <li>{{jsxref("String.prototype.toLocaleUpperCase()")}}</li>
+ <li>{{jsxref("String.prototype.toUpperCase()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/string/touppercase/index.html b/files/de/web/javascript/reference/global_objects/string/touppercase/index.html
new file mode 100644
index 0000000000..c221990e73
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/string/touppercase/index.html
@@ -0,0 +1,127 @@
+---
+title: String.prototype.toUpperCase()
+slug: Web/JavaScript/Reference/Global_Objects/String/toUpperCase
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/toUpperCase
+---
+<div>
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>toUpperCase()</code></strong> Methode gibt den Wert des aufrufenden Strings in Großbuchstaben umgewandelt zurück.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.toUpperCase()</code></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein neuer String, der den alten String konvertiert zu Großbuchstaben enthält.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>toUpperCase()</code> Methode gibt den Wert des Strings in Großbuchstaben umgewandelt zurück. <code>toUpperCase()</code> hat keine Auswirkungen auf den Wert des Strings <code>str</code>.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Benutzung_von_toUpperCase()">Benutzung von <code>toUpperCase()</code></h3>
+
+<pre class="brush: js">console.log('alphabet'.toUpperCase()); // 'ALPHABET'
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.16', 'String.prototype.toUpperCase')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.touppercase', 'String.prototype.toUpperCase')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.touppercase', 'String.prototype.toUpperCase')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.toLocaleLowerCase()")}}</li>
+ <li>{{jsxref("String.prototype.toLocaleUpperCase()")}}</li>
+ <li>{{jsxref("String.prototype.toLowerCase()")}}</li>
+</ul>
+</div>
diff --git a/files/de/web/javascript/reference/global_objects/string/trim/index.html b/files/de/web/javascript/reference/global_objects/string/trim/index.html
new file mode 100644
index 0000000000..59ada93228
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/string/trim/index.html
@@ -0,0 +1,93 @@
+---
+title: String.prototype.trim()
+slug: Web/JavaScript/Reference/Global_Objects/String/Trim
+tags:
+  - ECMAScript 5
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/Trim
+---
+<div>{{JSRef}}</div>
+
+<p>Die<strong><code> trim()</code></strong> Methode entfernt Leerzeichen an beiden Enden einer Zeichenfolge. Das betrifft Leerzeichen verschiedenster Art (space, tab, no-break space, etc.) und alle Zeilenumbruch einleitende Zeichen (LF, CR, etc.).</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>str</var>.trim()</pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein neuer String, der den gegebenen String ohne Whitespaces am Anfang und am Ende enthält.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>trim()</code> Methode gibt eine Zeichenfolge ohne Leerzeichen an beiden Enden zurück. <code>trim()</code> beeinflusst oder verändert nicht den ursprünglichen Wert der Zeichenfolge.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="trim()_verwenden"><code>trim()</code> verwenden</h3>
+
+<p>Das folgende Beispiel zeigt die kleingeschriebene Zeichenfolge <strong><code>'foo'</code></strong>:</p>
+
+<pre class="brush: js">var orig = '   foo  ';
+console.log(orig.trim()); // 'foo'
+
+// Ein Beispiel bei dem .trim() Leerzeichen an einem Ende entfernt
+
+var orig = 'foo    ';
+console.log(orig.trim()); // 'foo'
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Führe folgenden Code vor allem anderen aus um die Methode <strong><code>trim()</code></strong> zu erstellen sollte sie nativ nicht zur Verfügung stehen.</p>
+
+<pre class="brush: js">if (!String.prototype.trim) {
+  String.prototype.trim = function () {
+    return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
+  };
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.20', 'String.prototype.trim')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.8.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.trim', 'String.prototype.trim')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.trim', 'String.prototype.trim')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.trim")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.trimLeft()")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("String.prototype.trimRight()")}} {{non-standard_inline}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/string/trimleft/index.html b/files/de/web/javascript/reference/global_objects/string/trimleft/index.html
new file mode 100644
index 0000000000..db5dbd55cb
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/string/trimleft/index.html
@@ -0,0 +1,58 @@
+---
+title: String.prototype.trimLeft()
+slug: Web/JavaScript/Reference/Global_Objects/String/TrimLeft
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/trimStart
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>Die <strong><code>trimLeft()</code></strong> Methode entfernt Leerzeichen vom linken Ende der Zeichenkette.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.trimLeft()</code></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein neuen String, der den alten String ohne Whitespaces auf der linken Seite beinhaltet.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>trimLeft()</code> Methode gibt die Zeichenkette ohne Leerzeichen am linken Ende zurück. <code>trimLeft()</code> manipuliert nicht den Wert der Zeichenkette.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="trimLeft()_verwenden"><code>trimLeft()</code> verwenden</h3>
+
+<p>Im folgenden Beispiel wird die Funktionalität dieser Methode dargestellt.</p>
+
+<pre class="brush: js; highlight: [5]">var str = '   foo  ';
+
+console.log(str.length);  // 8
+
+str = str.trimLeft();
+console.log(str.length);  // 5
+console.log(str);         // 'foo  '
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Gehört keinem Standard an. Hinzugefügt in JavaScript 1.8.1.</p>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.trimLeft")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.trim()")}}</li>
+ <li>{{jsxref("String.prototype.trimRight()")}} {{non-standard_inline}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/string/trimright/index.html b/files/de/web/javascript/reference/global_objects/string/trimright/index.html
new file mode 100644
index 0000000000..b66e15f474
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/string/trimright/index.html
@@ -0,0 +1,58 @@
+---
+title: String.prototype.trimRight()
+slug: Web/JavaScript/Reference/Global_Objects/String/TrimRight
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/trimEnd
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>Die <strong><code>trimRight()</code></strong> Methode entfernt Leerzeichen vom rechten Ende der Zeichenkette.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.trimRight()</code></pre>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein neuen String, der den alten String ohne Whitespaces auf der rechten Seite beinhaltet.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>trimRight()</code> Methode gibt die Zeichenkette ohne Leerzeichen am rechten Ende zurück. <code>trimRight()</code> manipuliert nicht den Wert der Zeichenkette.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="trimRight()_verwenden"><code>trimRight()</code> verwenden</h3>
+
+<p>Im folgenden Beispiel wird die Funktionalität dieser Methode dargestellt.</p>
+
+<pre class="brush: js; highlight: [5]">var str = '   foo  ';
+
+console.log(str.length);  // 8
+
+str = str.trimRight();
+console.log(str.length);  // 6
+console.log(str);         // '   foo'
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Gehört keinem Standard an. Hinzugefügt in JavaScript 1.8.1.</p>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.trimRight")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.trim()")}}</li>
+ <li>{{jsxref("String.prototype.trimLeft()")}} {{non-standard_inline}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/syntaxerror/index.html b/files/de/web/javascript/reference/global_objects/syntaxerror/index.html
new file mode 100644
index 0000000000..4b4edda7c5
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/syntaxerror/index.html
@@ -0,0 +1,133 @@
+---
+title: SyntaxError
+slug: Web/JavaScript/Reference/Global_Objects/SyntaxError
+tags:
+  - Error
+  - JavaScript
+  - Object
+  - Reference
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError
+---
+<div>{{JSRef}}</div>
+
+<p>Das <code><strong>SyntaxError</strong></code> Objekt repräsentiert einen Fehler, der auftritt, wenn versucht wird syntaktisch falschen Quelltext zu interpretieren.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Ein <code>SyntaxError</code> wird erzeugt, wenn die JavaScript-Umgebung Quelltextstücke  entdeckt, die nicht der Syntax der Sprachdefinition von JavaScript entspricht.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>new SyntaxError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>message</code></dt>
+ <dd>Optional. Für Menschen lesbare Beschreibung des Fehlers.</dd>
+ <dt><code>fileName</code> {{non-standard_inline}}</dt>
+ <dd>Optional. Der Name der Datei, in der der Fehler erzeugt wurde.</dd>
+ <dt><code>lineNumber</code> {{non-standard_inline}}</dt>
+ <dd>Optional. Die Zeilennummer, in der der Fehler erzeugt wurde.</dd>
+</dl>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt>{{jsxref("SyntaxError.prototype")}}</dt>
+ <dd>Erlaubt es Eigenschaften zu allen <code>SyntaxError</code> Objekten hinzuzufügen.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<p>Das globale <code>SyntaxError</code>-Objekt enthält keine eigenen Methoden. Jedoch erbt das Objekt einige Methoden durch die Prototypenkette.</p>
+
+<h2 id="SyntaxError_Instanzen"><code>SyntaxError</code> Instanzen</h2>
+
+<h3 id="Eigenschaften_2">Eigenschaften</h3>
+
+<div>{{page('/de/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype', 'Eigenschaften')}}</div>
+
+<h3 id="Methoden_2">Methoden</h3>
+
+<div>{{page('/de/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype', 'Methoden')}}</div>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Auffangen_eines_SyntaxError">Auffangen eines <code>SyntaxError</code></h3>
+
+<pre class="brush: js">try {
+  eval('hoo bar');
+} catch (e) {
+  console.log(e instanceof SyntaxError); // true
+  console.log(e.message);                // "missing ; before statement"
+  console.log(e.name);                   // "SyntaxError"
+  console.log(e.fileName);               // "Scratchpad/1"
+  console.log(e.lineNumber);             // 1
+  console.log(e.columnNumber);           // 4
+  console.log(e.stack);                  // "@Scratchpad/1:2:3\n"
+}
+</pre>
+
+<h3 id="Erzeugen_eines_SyntaxError">Erzeugen eines <code>SyntaxError</code></h3>
+
+<pre class="brush: js">try {
+  throw new SyntaxError('Hello', 'someFile.js', 10);
+} catch (e) {
+  console.log(e instanceof SyntaxError); // true
+  console.log(e.message);                // "Hello"
+  console.log(e.name);                   // "SyntaxError"
+  console.log(e.fileName);               // "someFile.js"
+  console.log(e.lineNumber);             // 10
+  console.log(e.columnNumber);           // 0
+  console.log(e.stack);                  // "@Scratchpad/2:11:9\n"
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.6.4', 'SyntaxError')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-syntaxerror', 'SyntaxError')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-syntaxerror', 'SyntaxError')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.SyntaxError")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("SyntaxError.prototype")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/syntaxerror/prototype/index.html b/files/de/web/javascript/reference/global_objects/syntaxerror/prototype/index.html
new file mode 100644
index 0000000000..10ae05f755
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/syntaxerror/prototype/index.html
@@ -0,0 +1,88 @@
+---
+title: SyntaxError.prototype
+slug: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype
+tags:
+  - Error
+  - JavaScript
+  - Property
+  - Prototype
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>SyntaxError.prototype</strong></code> Eigenschaft repräsentiert die Eigenschaft die Eigenschaft für den {{jsxref("SyntaxError")}} Konstruktor.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Alle {{jsxref("SyntaxError")}} Instanzen erben von <code>SyntaxError.prototype</code>. Man kann den Prototypen einsetzen, um Eigenschaften oder Methoden für allen Instanzen hinzuzufügen.</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt><code>SyntaxError.prototype.constructor</code></dt>
+ <dd>Spezifiziert die Funktion, die einen Instanz des Prototypen erstellt.</dd>
+ <dt>{{jsxref("Error.prototype.message", "SyntaxError.prototype.message")}}</dt>
+ <dd>Fehlermeldung. Obwohl ECMA-262 Spezifiziert, dass {{jsxref("SyntaxError")}} eine eigene <code>message</code> Eigenschaft haben sollte, erbt dieser in <a href="/de/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> die Eigenschaft {{jsxref("Error.prototype.message")}}.</dd>
+ <dt>{{jsxref("Error.prototype.name", "SyntaxError.prototype.name")}}</dt>
+ <dd>Fehlername. Vererbt von {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.fileName", "SyntaxError.prototype.fileName")}}</dt>
+ <dd>Pfad zur Datei, in der der Fehler erzeugt wurde. Vererbt von {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.lineNumber", "SyntaxError.prototype.lineNumber")}}</dt>
+ <dd>Zeilennummer, in der der Fehler erzeugt wurde. Vererbt von {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.columnNumber", "SyntaxError.prototype.columnNumber")}}</dt>
+ <dd>Spaltennummer, in der der Fehler erzeugt wurde. Vererbt von {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.stack", "SyntaxError.prototype.stack")}} {{non-standard_inline}}</dt>
+ <dd>Stack trace. Vererbt von {{jsxref("Error")}}.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<p>Obwohl das {{jsxref("SyntaxError")}} Prototypobjekt keine Methoden enthält, haben {{jsxref("SyntaxError")}} Instanzen einige Vererbte Methoden durch die Prototypenkette.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definiert als <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definiert als <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Definiert als <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.SyntaxError")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype")}}</li>
+ <li>{{jsxref("Function.prototype")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/typeerror/index.html b/files/de/web/javascript/reference/global_objects/typeerror/index.html
new file mode 100644
index 0000000000..609c799d77
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/typeerror/index.html
@@ -0,0 +1,133 @@
+---
+title: TypeError
+slug: Web/JavaScript/Reference/Global_Objects/TypeError
+tags:
+  - Error
+  - JavaScript
+  - Object
+  - Reference
+  - TypeError
+translation_of: Web/JavaScript/Reference/Global_Objects/TypeError
+---
+<div>{{JSRef}}</div>
+
+<p>Das <code><strong>TypeError</strong></code> Objekt repräsentiert einen Fehler, wenn ein Wert nicht dem erwartetem Typ enspricht.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>new TypeError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>message</code></dt>
+ <dd>Optional. Beschreibung des Fehlers</dd>
+ <dt><code>fileName</code> {{non-standard_inline}}</dt>
+ <dd>Optional. Name der Datei, welches den Fehlerverursachenden Code beinhaltet</dd>
+ <dt><code>lineNumber</code> {{non-standard_inline}}</dt>
+ <dd>Optional. Zeilennummer des Codes, welches den Fehler verursacht</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Ein <code>TypeError</code> wird generiert, wenn ein an eine Funktion mitgegebener Operand oder Argument, inkompatibel dem erwartetem Typ ist.</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt>{{jsxref("TypeError.prototype")}}</dt>
+ <dd>Erlaubt das Hinzufügen von Eigenschaften an einem <code>TypeError</code> Objekt.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<p>Die Globale <code>TypeError</code> kennt keine eigene Methode, jedoch erbt diese einige Methoden durch die Prototype-Kette.</p>
+
+<h2 id="TypeError_Instanzen"><code>TypeError</code> Instanzen</h2>
+
+<h3 id="Eigenschaften_2">Eigenschaften</h3>
+
+<div>{{page('/de/docs/Web/JavaScript/Reference/Global_Objects/TypeError/prototype', 'Eigenschaften')}}</div>
+
+<h3 id="Methoden_2">Methoden</h3>
+
+<div>{{page('/de/docs/Web/JavaScript/Reference/Global_Objects/TypeError/prototype', 'Methoden')}}</div>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Abfangen_eines_TypeError">Abfangen eines <code>TypeError</code></h3>
+
+<pre class="brush: js">try {
+  null.f();
+} catch (e) {
+  console.log(e instanceof TypeError); // true
+  console.log(e.message);              // "null hat keine Eigenschaften"
+  console.log(e.name);                 // "TypeError"
+  console.log(e.fileName);             // "Scratchpad/1"
+  console.log(e.lineNumber);           // 2
+  console.log(e.columnNumber);         // 2
+  console.log(e.stack);                // "@Scratchpad/2:2:3\n"
+}
+</pre>
+
+<h3 id="Erzeugen_eines_TypeError">Erzeugen eines <code>TypeError</code></h3>
+
+<pre class="brush: js">try {
+  throw new TypeError('Hallo', "someFile.js", 10);
+} catch (e) {
+  console.log(e instanceof TypeError); // true
+  console.log(e.message);              // "Hallo"
+  console.log(e.name);                 // "TypeError"
+  console.log(e.fileName);             // "someFile.js"
+  console.log(e.lineNumber);           // 10
+  console.log(e.columnNumber);         // 0
+  console.log(e.stack);                // "@Scratchpad/2:2:9\n"
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-15.11.6.5', 'TypeError')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initiale Definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.6.5', 'TypeError')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-typeerror', 'TypeError')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-typeerror', 'TypeError')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.TypeError")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("TypeError.prototype")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/typeerror/prototype/index.html b/files/de/web/javascript/reference/global_objects/typeerror/prototype/index.html
new file mode 100644
index 0000000000..d75e8efe4d
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/typeerror/prototype/index.html
@@ -0,0 +1,88 @@
+---
+title: TypeError.prototype
+slug: Web/JavaScript/Reference/Global_Objects/TypeError/prototype
+tags:
+  - Error
+  - JavaScript
+  - Property
+  - Prototype
+  - TypeError
+translation_of: Web/JavaScript/Reference/Global_Objects/TypeError
+---
+<div>{{JSRef}}</div>
+
+<p>Die <code><strong>TypeError.prototype</strong></code> Eigenschaft repräsentiert den prototype des {{jsxref("TypeError")}} Konstruktors.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Alle {{jsxref("TypeError")}} Instanzen erben von <code>TypeError.prototype</code>. Dem prototype können über alle Instanzen hinweg Eigenschaften und Methoden hinzugefügt werden.</p>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<dl>
+ <dt><code>TypeError.prototype.constructor</code></dt>
+ <dd>Spezifiziert die Instanz erstellende Funktion.</dd>
+ <dt>{{jsxref("Error.prototype.message", "TypeError.prototype.message")}}</dt>
+ <dd>Fehlermeldung. ECMA-262 spezifiziert, dass {{jsxref("TypeError")}} eine eigene <code>message</code> Eigenschaft zur Verfügung stellen soll. In <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> jedoch, erbt es von {{jsxref("Error.prototype.message")}}.</dd>
+ <dt>{{jsxref("Error.prototype.name", "TypeError.prototype.name")}}</dt>
+ <dd>Fehlerbezeichnung. Geerbt von {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.fileName", "TypeError.prototype.fileName")}}</dt>
+ <dd>Pfad zur Datei, welche den Fehler verursachte. Geerbt von {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.lineNumber", "TypeError.prototype.lineNumber")}}</dt>
+ <dd>Zeile in welcher der Fehler verusacht wurde. Geerbt von {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.columnNumber", "TypeError.prototype.columnNumber")}}</dt>
+ <dd>Zeichennummer der Zeile in welcher der Fehler verursacht wurde. Geerbt von {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.stack", "TypeError.prototype.stack")}}</dt>
+ <dd>Stack trace. Geerbt von {{jsxref("Error")}}.</dd>
+</dl>
+
+<h2 id="Methoden">Methoden</h2>
+
+<p>Das {{jsxref("TypeError")}} prototype Objekt beinhaltet keine eigenen Methoden, jedoch erben {{jsxref("TypeError")}} Instanzen einige Methoden durch die Prototypenkette.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-15.11.7.6', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initiale Definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definiert als <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definiert als <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.TypeError")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype")}}</li>
+ <li>{{jsxref("Function.prototype")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/undefined/index.html b/files/de/web/javascript/reference/global_objects/undefined/index.html
new file mode 100644
index 0000000000..9c0dd8f5f7
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/undefined/index.html
@@ -0,0 +1,135 @@
+---
+title: undefined
+slug: Web/JavaScript/Reference/Global_Objects/undefined
+tags:
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Global_Objects/undefined
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>Die globale Eigenschaft <code><strong>undefined</strong></code> repräsentiert den Wert <code>{{Glossary("Undefined", "undefined")}}</code> . Dieser Wert ist einer der {{Glossary("Primitive", "primitiven Typen")}} in JavaScript.</p>
+
+<p>{{js_property_attributes(0,0,0)}}</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-undefined.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>undefined</code></pre>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p><code>undefined</code> ist eine Eigenschaft des <em>globalen Objektes</em>, was bedeutet, dass es eine Variable im globalen Gültigkeitsbereich ist. Der initiale Wert von <code>undefined</code> ist der primitive Wert <code>{{Glossary("Undefined", "undefined")}}</code>.</p>
+
+<p>In modernen Browsern (JavaScript 1.8.5 / Firefox 4+) ist <code>undefined</code>  eine nicht konfigurierbare und nicht beschreibbare Eigenschaft. Dieses ist in der ECMAScript 5 Spezifikation definiert. Immer wenn das nicht der Fall ist, sollte das Überschreiben von <code>undefined</code>  unterlassen werden.</p>
+
+<p>Eine Variable, die nicht mit einem Wert beschrieben wurde, ist vom Typ <code>undefined</code>. Methoden oder Anweisungen geben ebenfalls <code>undefined</code> zurück, wenn eine Variable, die ausgewertet wird, mit keinem Wert beschrieben ist. Eine Funktion hat <code>undefined</code> als Rückgabewert, wenn kein Wert {{jsxref("Statements/return", "zurückgegeben")}} wird.</p>
+
+<div class="warning">
+<p>Weil es möglich ist {{Glossary("Identifier", "Bezeichner")}} (Variablennamen) in jedem anderen Scope anders zu definieren, ist es auch möglich <code>undefined</code> neu zu defnieren (weil <code>undefined</code> kein {{jsxref("Reserved_Words", "reserviertes Schlüsselwort")}}) ist). Dieses einzusetzen ist jedoch keine gute Idee, weil der Quelltext dadurch schwer zu verstehen ist.</p>
+
+<pre class="brush: js">// NICHT NACHMACHEN
+
+// gibt "foo string" aus
+(function(){ var undefined = 'foo'; console.log(undefined, typeof undefined); })();
+
+// gibt "foo string" aus
+(function(undefined){ console.log(undefined, typeof undefined); })('foo');
+</pre>
+</div>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Identität_und_undefined">Identität und <code>undefined</code></h3>
+
+<p>Man kann <code>undefined</code> in Verbindung mit dem strikten Gleichheitsoperator nutzen, um den Wert von Variablen auf <code>undefined</code> zu prüfen. Im folgenden Beispiel ist die Variable <code>x</code> nicht definiert und die if-Anweisung wird zu <code>true</code> ausgewertet.</p>
+
+<pre class="brush: js">var x;
+if (x === undefined) {
+   // Diese Anweisung wird ausgeführt
+}
+else {
+   // Diese Anweisung wird nicht ausgeführt
+}
+</pre>
+
+<div class="note">Hinweis: Der strikte Gleichheitsoperator muss statt dem Standard-Gleichheitsoperator benutzt werden, weil <code>x == undefined</code> auch prüft, ob <code>x</code> <code>null</code> ist, was bei strikter Gleichheit nicht so ist. <code>null</code> ist nicht äquivalent zu <code>undefined</code> Für Details siehe {{jsxref("Operators/Comparison_Operators", "Vergleichsoperatoren")}}</div>
+
+<h3 id="Typeof_Operator_und_undefined"><code>Typeof</code> Operator und <code>undefined</code></h3>
+
+<p>Alternativ kann {{jsxref("Operators/typeof", "typeof")}} eingesetzt werden:</p>
+
+<pre class="brush: js">var x;
+if (typeof x === 'undefined') {
+   // Diese Anweisung wird ausgeführt
+}
+</pre>
+
+<p>Ein Grund {{jsxref("Operators/typeof", "typeof")}} zu nutzen, ist, dass diese Variante keinen Fehler erzeugt, wenn eine Variable nicht definiert ist.</p>
+
+<pre class="brush: js">// x wurde nicht definiert
+if (typeof x === 'undefined') { // wird ohne Fehler zu true ausgewertet
+   // Diese Anweisung wird ausgeführt
+}
+
+if(x === undefined){ // erzeugt einen ReferenceError
+
+}
+</pre>
+
+<p>Diese Technik sollte so oft es geht vermieden werden. JavaScript ist eine Sprache mit statischen Gültigkeitsbereichen, was bedeutet, dass eine Variable immer in seinem geschlossenen Kontext gelesen werden kann, egal ob sie <span class="dpf_sent" id="dpfsent_1">existiert </span> oder nicht. Die einzige Ausnahme ist der globale Gültigkeitsbereich, jedoch ist dieser an das <em>globale Objekt</em> gebunden, weshalb die Existenz einer Variablen auf dem <em>globalen Objekt</em> geprüft werden kann. Dafür kann der {{jsxref("Operators/in", "in")}}-Operator genutzt werden.</p>
+
+<h3 id="Void_Operator_und_undefined"><code>Void</code> Operator und <code>undefined</code></h3>
+
+<p>Der {{jsxref("Operators/void", "void")}}-Operator ist die dritte Alternative.</p>
+
+<pre class="brush: js">var x;
+if (x === void 0) {
+   // Diese Anweisung wird ausgeführt
+}
+
+// y wurde nicht definiert
+if (y === void 0) {
+   // erzeugt einen ReferenceError (im gegensatz zu `typeof`)
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-4.3.9', 'undefined')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.3</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.1.3', 'undefined')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-undefined', 'undefined')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-undefined', 'undefined')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.builtins.undefined")}}</p>
diff --git a/files/de/web/javascript/reference/global_objects/unescape/index.html b/files/de/web/javascript/reference/global_objects/unescape/index.html
new file mode 100644
index 0000000000..315c332a35
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/unescape/index.html
@@ -0,0 +1,126 @@
+---
+title: unescape()
+slug: Web/JavaScript/Reference/Global_Objects/unescape
+tags:
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Global_Objects/unescape
+---
+<div>
+<div>
+<div>{{jsSidebar("Objects")}} {{deprecated_header()}}</div>
+</div>
+</div>
+
+<h2 id="Summary" name="Summary">Zusammenfassung</h2>
+
+<p>Die veraltete <code><strong>unescape()</strong></code> Methode erstellt einen neuen String, in dem hexadezimal escapte Sequenzen mit den entsprechenden umgewandelten Zeichen ersetzt werden. Die escape Sequenz kann vorher durch eine Funktion wie {{jsxref("Global_Objects/escape", "escape")}} erzeugt werden. Da <code>unescape</code> veraltet ist, sollte {{jsxref("Global_Objects/decodeURI", "decodeURI")}} oder {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} verwendet werden.</p>
+
+<div class="note"><strong>HInweis:</strong> <code>unescape</code> sollte nicht verwendet werden um URIs zu decodieren, nutze stattdessen <code>decodeURI</code>.</div>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>unescape(str)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parameter</h3>
+
+<dl>
+ <dt><code>str</code></dt>
+ <dd>Ein String der decodiert werden soll.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p>Die <code>unescape</code> Funktion ist eine Eigenschaft des <em>global object</em>.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js">unescape("abc123");     // "abc123"
+unescape("%E4%F6%FC");  // "äöü"
+unescape("%u0107");     // "ć"
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1st Edition.</td>
+   <td>Standard</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-B.2.2', 'unescape')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definiert im (informative) Compatibility Annex B</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-unescape-string', 'unescape')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definiert im (normative) Annex B for Additional ECMAScript Features for Web Browsers</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_Also" name="See_Also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/decodeURI", "decodeURI")}}</li>
+ <li>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/uneval/index.html b/files/de/web/javascript/reference/global_objects/uneval/index.html
new file mode 100644
index 0000000000..b44eccc21a
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/uneval/index.html
@@ -0,0 +1,109 @@
+---
+title: uneval()
+slug: Web/JavaScript/Reference/Global_Objects/uneval
+translation_of: Web/JavaScript/Reference/Global_Objects/uneval
+---
+<div>{{jsSidebar("Objects")}}{{Non-standard_header}}</div>
+
+<p>Die <code><strong>uneval()</strong></code> Funktion gibt den Quelltext eines Objekts als String zurück.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">uneval(<var>object</var>)</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>object</code></dt>
+ <dd>Ein JavaScript Ausdruck oder eine Anweisung.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Eine String-Darstellung des Quelltexts des Objekts.</p>
+
+<div class="note"><strong>Notiz:</strong> Es wird keine gültige JSON Darstellung des Objekts zurückgegeben.</div>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p><code>uneval()</code> ist eine Top-Level Funktion und somit mit keinem Objekt verbunden.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush:js">var a = 1;
+uneval(a); // gibt einen String zurück der 1 enthält
+
+var b = "1";
+uneval(b) // gibt einen String zurück der "1" enthält
+
+uneval(function foo(){}); // gibt "(function foo(){})" zurück
+
+var a = uneval(function foo(){return 'hi'});
+var foo = eval(a);
+foo(); // gibt "hi" zurück
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Kein Bestandteil einer Spezifikation.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/eval", "eval()")}}</li>
+ <li>{{jsxref("JSON.stringify")}}</li>
+ <li>{{jsxref("JSON.parse")}}</li>
+ <li>{{jsxref("Object.toSource")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/webassembly/compile/index.html b/files/de/web/javascript/reference/global_objects/webassembly/compile/index.html
new file mode 100644
index 0000000000..a18c69da30
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/webassembly/compile/index.html
@@ -0,0 +1,91 @@
+---
+title: WebAssembly.compile()
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/compile
+tags:
+  - API
+  - JavaScript
+  - Method
+  - Object
+  - Reference
+  - WebAssembly
+  - compile
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/compile
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>WebAssembly.compile()</code></strong> Funktion kompiliert ein {{jsxref("WebAssembly.Module")}} aus WebAssembly Binärcode. Hilfreich ist diese Funktion, um ein Modul zu kompilieren, bevor es instanziiert werden kann (Andernfalls sollte die {{jsxref("WebAssembly.instantiate()")}} Funktion verwendet werden).</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Promise&lt;WebAssembly.Module&gt; WebAssembly.compile(bufferSource);</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><em>bufferSource</em></dt>
+ <dd>Ein <a href="/en-US/docs/Web/JavaScript/Typed_arrays">typisiertes Array</a> oder <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">ArrayBuffer</a>, das den Binärcode des zu kompilierenden .wasm Moduls enthält.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein <code>Promise</code>, das sich in ein {{jsxref("WebAssembly.Module")}} kompiliertes Objekt auflöst.</p>
+
+<h3 id="Fehlerbehandlung">Fehlerbehandlung</h3>
+
+<ul>
+ <li>Wenn <code>bufferSource</code> kein <a href="/en-US/docs/Web/JavaScript/Typed_arrays">typisiertes Array</a> ist, wird ein {{jsxref("TypeError")}} geworfen.</li>
+ <li>Wenn die Kompilierung fehlschlägt, wird das Promise mit einem {{jsxref("WebAssembly.CompileError")}} verworfen.</li>
+</ul>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Das folgende Beispiel kompiliert den geladenen simple.wasm Bytecode unter Verwendung der <span style="font-size: 1rem; letter-spacing: -0.00278rem;"> </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">compile()</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> Funktion und sendet ihn an einen </span><a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API" style="font-size: 1rem; letter-spacing: -0.00278rem;">Web Worker</a><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> mittels </span><a href="/en-US/docs/Web/API/Worker/postMessage" style="font-size: 1rem; letter-spacing: -0.00278rem;">postMessage()</a><span style="font-size: 1rem; letter-spacing: -0.00278rem;">.</span></p>
+
+<pre class="brush: js">var worker = new Worker("wasm_worker.js");
+
+fetch('simple.wasm').then(response =&gt;
+  response.arrayBuffer()
+).then(bytes =&gt;
+  WebAssembly.compile(bytes)
+).then(mod =&gt;
+  worker.postMessage(mod)
+);</pre>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Du wirst wahrscheinlich in den meisten Fällen {{jsxref("WebAssembly.compileStreaming()")}} verwenden wollen, da es effizienter als <code>compile()</code> arbeitet.</p>
+</div>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebAssembly JS', '#webassemblycompile', 'compile()')}}</td>
+   <td>{{Spec2('WebAssembly JS')}}</td>
+   <td>Initial draft definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.WebAssembly.compile")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de-DE/docs/WebAssembly">WebAssembly</a> Übersichtsseite</li>
+ <li><a href="/en-US/docs/WebAssembly/Concepts">WebAssembly concepts</a></li>
+ <li><a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/webassembly/compilestreaming/index.html b/files/de/web/javascript/reference/global_objects/webassembly/compilestreaming/index.html
new file mode 100644
index 0000000000..13cbbdeef4
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/webassembly/compilestreaming/index.html
@@ -0,0 +1,87 @@
+---
+title: WebAssembly.compileStreaming()
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/compileStreaming
+tags:
+  - API
+  - JavaScript
+  - Method
+  - Object
+  - Reference
+  - WebAssembly
+  - compile
+  - compileStreaming
+  - streaming
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/compileStreaming
+---
+<div>{{JSRef}}</div>
+
+<p>Die <strong><code>WebAssembly.compileStreaming()</code></strong> Funktion kompiliert ein {{jsxref("WebAssembly.Module")}} direkt aus einer zugrunde liegenden Quelle. Nützlich ist diese Funktion wenn ein Modul kompiliert werden muss, bevor es instanziiert werden kann. (ansonsten sollte die {{jsxref("WebAssembly.instantiateStreaming()")}} Funktion verwendet werden).</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Promise&lt;WebAssembly.Module&gt; WebAssembly.compileStreaming(<em>source</em>);</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><em>source</em></dt>
+ <dd>Ein {{domxref("Response")}} Objekt oder ein Promise das sich zu einem solchen auflöst. Es stellt die zugrunde liegende Quelle eines .wasm Moduls dar, die gestreamt und kompiliert werden soll.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein <code>Promise</code> das sich in ein {{jsxref("WebAssembly.Module")}} Objekt auflöst, welche das kompilierte Modul darstellt.</p>
+
+<h3 id="Ausnahmen">Ausnahmen</h3>
+
+<ul>
+ <li>Wenn <code>bufferSource</code> kein <a href="/en-US/docs/Web/JavaScript/Typed_arrays">typisiertes Array<font color="#001000"> </font></a>ist, wird ein {{jsxref("TypeError")}} geworfen.</li>
+ <li>Schlägt die Kompilierung fehl, wird das Promise mit einem {{jsxref("WebAssembly.CompileError")}} verworfen.</li>
+</ul>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Das folgende Beispiel (siehe unsere <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/compile-streaming.html">compile-streaming.html</a> Demo auf GitHub, und <a href="https://mdn.github.io/webassembly-examples/js-api-examples/compile-streaming.html">siehe das live Beispiel</a>) streamt ein .wasm Modul direkt aus der zugrunde liegenden Quelle und kompiliert es in ein {{jsxref("WebAssembly.Module")}} Objekt. Weil die <code>compileStreaming()</code>  Funktion ein Promise für ein {{domxref("Response")}} Objekt annimmt, kann ihr direkt ein  {{domxref("WindowOrWorkerGlobalScope.fetch()")}} Aufruf durchgereicht werden, woraufhin es die Antwort in diese Funktion abgibt, sobald das Promise sich erfüllt.</p>
+
+<pre class="brush: js">var importObject = { imports: { imported_func: arg =&gt; console.log(arg) } };
+
+WebAssembly.compileStreaming(fetch('simple.wasm'))
+.then(module =&gt; WebAssembly.instantiate(module, importObject))
+.then(instance =&gt; instance.exports.exported_func());</pre>
+
+<p>Das resultierende Modul wird dann mittels {{jsxref("WebAssembly.instantiate()")}} instanziiert und die bereitgestellte Funktion wird aufgerufen.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikationen</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebAssembly Embedding', '#webassemblycompilestreaming', 'compileStreaming()')}}</td>
+   <td>{{Spec2('WebAssembly Embedding')}}</td>
+   <td>Initial draft definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.WebAssembly.compileStreaming")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAssembly">WebAssembly</a> Übersichtsseite</li>
+ <li><a href="/en-US/docs/WebAssembly/Concepts">WebAssembly concepts</a></li>
+ <li><a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/global_objects/webassembly/index.html b/files/de/web/javascript/reference/global_objects/webassembly/index.html
new file mode 100644
index 0000000000..4681f473fd
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/webassembly/index.html
@@ -0,0 +1,111 @@
+---
+title: WebAssembly
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly
+tags:
+  - API
+  - JavaScript
+  - Objekt
+  - Referenz
+  - WebAssembly
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly
+---
+<div>{{JSRef}}</div>
+
+<p>Das <strong><code>WebAssembly</code></strong> JavaScript Objekt existiert als Namensraum für alle <a href="/en-US/docs/WebAssembly">WebAssembly</a>-bezogenen Funktionalitäten.</p>
+
+<p>Anders als die meisten anderen globalen Objekte, ist <code>WebAssembly</code> kein Konstruktor (es ist kein Funktionsobjekt). Es kann mit {{jsxref("Math")}} verglichen werden, welches ebenfalls einen Namensraum für mathematische Konstanten und Funktionen bildet. Oder mit {{jsxref("Intl")}}, welches den Namensraum für die Internationalisierunges API mit sprachabhängigen Funktionen bildet. </p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die primäre Verwendung des <code>WebAssembly</code> Objekts sind:</p>
+
+<ul>
+ <li>Laden von WebAssembly Code, verwenden der {{jsxref("WebAssembly.instantiate()")}} Funktion.</li>
+ <li>Neue Speicher- und Tabelleninstanzen mittels der {{jsxref("WebAssembly.Memory()")}}/{{jsxref("WebAssembly.Table()")}} Konstruktoren.</li>
+ <li>Bereitstellen von Einrichtungen zur Fehlerbehandlung, die in WebAssembly auftreten, mittels der {{jsxref("WebAssembly.CompileError()")}}/{{jsxref("WebAssembly.LinkError()")}}/{{jsxref("WebAssembly.RuntimeError()")}} Konstruktoren.</li>
+</ul>
+
+<h2 id="Methoden">Methoden</h2>
+
+<dl>
+ <dt>{{jsxref("WebAssembly.instantiate()")}}</dt>
+ <dd>Die primäre API für das Kompilieren und Instanziieren des WebAssembly Codes. Der Rückgabewert als <code>Promise</code> ergibt ein <code>Module</code> als auch die erste <code>Instance</code>.</dd>
+ <dt>{{jsxref("WebAssembly.instantiateStreaming()")}}</dt>
+ <dd>Kompiliert und instanziiert ein WebAssembly-Modul direkt aus einer Streamingquelle, mit dem Rückgabewert als <code>Promise</code> ergibt sich ein <code>Module</code> als auch die erste <code>Instance</code>.</dd>
+ <dt>{{jsxref("WebAssembly.compile()")}}</dt>
+ <dd>Kompiliert ein {{jsxref("WebAssembly.Module")}} aus dem WebAssembly Binärcode, wodurch die Instanziierung als separater Schritt durchgeführt werden kann.</dd>
+ <dt>{{jsxref("WebAssembly.compileStreaming()")}}</dt>
+ <dd>Kompiliert ein {{jsxref("WebAssembly.Module")}} direkt aus einer Streamingquelle, wodurch die Instanziierung als separater Schritt durchgeführt werden kann.</dd>
+ <dt>{{jsxref("WebAssembly.validate()")}}</dt>
+ <dd>Validiert das gegebene, typisierte Array eines WebAssembly Binärcodes. Gibt zurück, ob die Bytes validen WebAssembly Code darstellen (<code>true</code>) oder nicht (<code>false</code>).</dd>
+</dl>
+
+<h2 id="Konstruktoren">Konstruktoren</h2>
+
+<dl>
+ <dt>{{jsxref("WebAssembly.Global()")}}</dt>
+ <dd>Erzeugt ein neues WebAssembly <code>Global</code> Objekt.</dd>
+ <dt>{{jsxref("WebAssembly.Module()")}}</dt>
+ <dd>Erzeugt ein neues WebAssembly <code>Module</code> Objekt.</dd>
+ <dt>{{jsxref("WebAssembly.Instance()")}}</dt>
+ <dd>Erzeugt ein neues WebAssembly <code>Instance</code> Objekt.</dd>
+ <dt>{{jsxref("WebAssembly.Memory()")}}</dt>
+ <dd>Erzeugt ein neues WebAssembly <code>Memory</code> Objekt.</dd>
+ <dt>{{jsxref("WebAssembly.Table()")}}</dt>
+ <dd>Erzeugt ein neues WebAssembly <code>Table</code> Objekt.</dd>
+ <dt>{{jsxref("WebAssembly.CompileError()")}}</dt>
+ <dd>Erzeugt ein neues WebAssembly <code>CompileError</code> Objekt.</dd>
+ <dt>{{jsxref("WebAssembly.LinkError()")}}</dt>
+ <dd>Erzeugt ein neues WebAssembly <code>LinkError</code> Objekt.</dd>
+ <dt>{{jsxref("WebAssembly.RuntimeError()")}}</dt>
+ <dd>Erzeugt ein neues WebAssembly <code>RuntimeError</code> Objekt.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Das folgende Beispiel (siehe <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/instantiate-streaming.html">instantiate-streaming.html</a> Demo auf GitHub, <a href="https://mdn.github.io/webassembly-examples/js-api-examples/instantiate-streaming.html">siehe auch live</a>) streamt ein .wasm Modul direkt aus einer zugrunde liegenden Quelle, um es dann zu kompilieren und zu instanziieren. Das Promise erfüllt sich mit einem <code>ResultObject</code>. Weil die <code>instantiateStreaming()</code> Funktion ein Promise für ein {{domxref("Response")}} akzeptiert, kann ihr ein {{domxref("WindowOrWorkerGlobalScope.fetch()")}} direkt übergeben werden, welches die Antwort an die Funktion weitergibt, sobald das Promise sich erfüllt.</p>
+
+<pre class="brush: js">var importObject = { imports: { imported_func: arg =&gt; console.log(arg) } };
+
+WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject)
+.then(obj =&gt; obj.instance.exports.exported_func());
+</pre>
+
+<p>Auf die <code>ResultObject</code> Instanz wird damit zugegriffen und die beinhaltete, exportierte Funktion aufgerufen.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebAssembly JS', '#the-webassembly-object', 'WebAssembly')}}</td>
+   <td>{{Spec2('WebAssembly JS')}}</td>
+   <td>Initial draft definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.WebAssembly")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAssembly">WebAssembly</a> Übersicht</li>
+ <li><a href="/en-US/docs/WebAssembly/Concepts">WebAssembly concepts</a></li>
+ <li><a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a></li>
+</ul>
+
+<section id="Quick_Links"> </section>
diff --git a/files/de/web/javascript/reference/index.html b/files/de/web/javascript/reference/index.html
new file mode 100644
index 0000000000..cd76ed6463
--- /dev/null
+++ b/files/de/web/javascript/reference/index.html
@@ -0,0 +1,49 @@
+---
+title: JavaScript-Referenz
+slug: Web/JavaScript/Reference
+tags:
+  - JavaScript
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Reference
+---
+<div>{{JsSidebar}}</div>
+
+<p>Dieses Kapitel des JavaScript-Teils auf MDN dient als JavaScript-Sprachreferenz. Mehr <a href="/de/docs/Web/JavaScript/Reference/About">über diese Referenz</a>.</p>
+
+<h2 id="Globale_Objekte">Globale Objekte</h2>
+
+<p>Dieses Kapitel dokumentiert alle <a href="/de/docs/Web/JavaScript/Reference/Global_Objects">JavaScript-Standardobjekte</a>, zusammen mit ihren Methoden und Eigenschaften.</p>
+
+<div>{{page('/de/docs/Web/JavaScript/Reference/Global_Objects', 'Standardobjekte (kategorisiert)')}}</div>
+
+<h2 id="Anweisungen">Anweisungen</h2>
+
+<p>Dieses Kapitel dokumentiert alle <a href="/de/docs/Web/JavaScript/Reference/Anweisungen">JavaScript-Anweisungen und -Deklarationen</a>.</p>
+
+<div>{{page('/de/docs/Web/JavaScript/Reference/Statements', 'Anweisungen_und_Deklarationen_nach_Kategorie')}}</div>
+
+<h2 id="Ausdrücke_und_Operatoren">Ausdrücke und Operatoren</h2>
+
+<p>Dieses Kapitel dokumentiert alle <a href="/de/docs/Web/JavaScript/Reference/Operators">JavaScript-Ausdrücke und -Operatoren</a>.</p>
+
+<div>{{page('/de/docs/Web/JavaScript/Reference/Operators', 'Expressions_and_operators_by_category')}}</div>
+
+<h2 id="Funktionen">Funktionen</h2>
+
+<p>Dieses Kapitel dokumentiert den Umgang mit <a href="/de/docs/Web/JavaScript/Reference/Functions_and_function_scope">JavaScript-Funktionen</a>, um eine Anwendung zu entwickeln.</p>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments"><code>Argumente</code></a></li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/arrow_functions">Arrow- (Pfeil-) Funktionen</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/default_parameters">Parameter mit Vorgabewerten</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Functions/rest_parameters">Variable Anzahl von Parametern</a></li>
+</ul>
+
+<h2 id="Zusätzliche_Referenzseiten">Zusätzliche Referenzseiten</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Lexical_grammar">Lexikale Grammatik</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Data_structures">Datentypen und Datenstrukturen</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Strict_mode">"Strict"-Modus</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features">Veraltete Sprachbestandteile</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/iteration_protocols/index.html b/files/de/web/javascript/reference/iteration_protocols/index.html
new file mode 100644
index 0000000000..f1ecbe29a1
--- /dev/null
+++ b/files/de/web/javascript/reference/iteration_protocols/index.html
@@ -0,0 +1,349 @@
+---
+title: Iterations Protokolle
+slug: Web/JavaScript/Reference/Iteration_protocols
+tags:
+  - ECMAScript 2015
+  - Intermediate
+  - Iterable
+  - Iterator
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Iteration_protocols
+---
+<div>{{jsSidebar("More")}}</div>
+
+<p>Einige Änderungen in ECMAScript 2015 sind keine neuen Objekte oder Syntax, sondern Protokolle. Diese Protokolle können von jedem Objekt implementiert werden, wenn einige Konventionen eingehalten werden.</p>
+
+<p>Es gibt zwei Protokolle: Das <a href="#Das_Iterierbare_(iterable)_Protokoll">Iterierbare (iterable) Protokoll</a> und das <a href="#Das_Iterator_Protokoll">Iterator Protokoll</a></p>
+
+<h2 id="Das_Iterierbare_iterable_Protokoll">Das Iterierbare (iterable) Protokoll</h2>
+
+<p>Das <strong>Iterierbare (iterable)</strong> Protokoll erlaubt es bei JavaScript-Objekten das Iterierverhalten zu definieren oder anzupassen, wie z. B. wie Werte in einem {{jsxref("Statements/for...of", "for..of")}} Konstrukt durchlaufen werden. Einige Standardtypen sind von sich aus schon Iterierbar mit einem Standarditerationsverhalten, so wie {{jsxref("Array")}} oder {{jsxref("Map")}}, wohingegen andere Typen (so wie {{jsxref("Object")}}) nicht Iterierbar sind.</p>
+
+<p>Um <strong>Iterierbar</strong> zu sein, muss ein Objekt die <strong>@@iterator</strong> Methode implementieren, was bedeutet, dass das Objekte (oder ein Objekt weiter oben in der <a href="/de/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">Prototypenkette</a>) eine Eigenschaft mit dem <strong>@@iterator</strong> Schlüssel haben muss, welcher über die Konstante <code>{{jsxref("Symbol.iterator")}}</code> erreichbar ist:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Eigenschaft</th>
+   <th scope="col">Wert</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>[Symbol.iterator]</code></td>
+   <td>Eine Funktion ohne Parameter, welche ein Objekt zurückgibt, welches dem <a href="#Das_Iterator_Protokoll">Iterator Protokoll</a> entspricht.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Immer wenn ein Objekt iteriert werden soll (z. B. am Anfang einer <code>for..of</code> Schleife), wird die <code>@@iterator</code> Methode mit keinem Argument aufgerufen und der zurückgegebene <strong>Iterator</strong> wird benutzt, um die zu iterierenden Werte zu bekommen.</p>
+
+<h2 id="Das_Iterator_Protokoll">Das Iterator Protokoll</h2>
+
+<p>Das <strong>Iterator</strong> Protokoll definiert einen Standardweg, um eine Sequenz von Werte (endlich oder unendlich lang) zu produzieren.</p>
+
+<p>Ein Objekt ist ein Iterator, wenn es die Methode <code><strong>next()</strong></code> mit folgender Semantik implementiert:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Eigenschaft</th>
+   <th scope="col"><code>Wert</code></th>
+  </tr>
+  <tr>
+   <td><code>next</code></td>
+   <td>
+    <p>Eine Funktion ohne Parameter, welche ein Objekt mit zwei Eigenschaften zurückgibt:</p>
+
+    <ul>
+     <li><code>done</code> (boolean)
+
+      <ul>
+       <li>Hat den Wert <code>true</code>, wenn der Iterator das Ende der Iterierten Sequenz erreicht hat. In diesem Fall ist <code>value</code> ein optional spezifizierter Rückgabewert des Iterators. Der Rückgabewert ist <a href="http://www.2ality.com/2013/06/iterators-generators.html#generators-as-threads">hier</a> näher erklärt.</li>
+       <li>Hat den Wert <code>false</code>, wenn der Iterator weitere Werte aus der Sequenz produzieren kann. Äquivalent ist, wenn die <code>done</code> Eigenschaft nicht definiert wird.</li>
+      </ul>
+     </li>
+     <li><code>value</code> - ein JavaScript Wert, der vom Iterator zurückgegeben wird. Kann weggelassen werden, wenn <code>done</code> den Wert <code>true</code> hat.</li>
+    </ul>
+
+    <p>Die <code>next</code> Methode gibt immer ein Objekt mit den Eigenschaften <code>done</code> und <code>value</code> zurück. Wird kein Objekt zurückgegeben (wie z. B. <code>false</code> oder <code>undefined</code>), wird ein {{jsxref("TypeError")}} ("iterator.next() returned a non-object value") erzeugt.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Einige Iteratoren sind wiederum iterierbar:</p>
+
+<pre class="brush: js">var someArray = [1, 5, 7];
+var someArrayEntries = someArray.entries();
+
+someArrayEntries.toString();           // "[object Array Iterator]"
+someArrayEntries === someArrayEntries[Symbol.iterator]();    // true
+</pre>
+
+<h2 id="Beispiele_für_den_Einsatz_de_Iterations_Protokolle">Beispiele für den Einsatz de Iterations Protokolle</h2>
+
+<p>Ein {{jsxref("String")}} ist ein Beispiel für ein standard iterierbares Objekt:</p>
+
+<pre class="brush: js">var someString = 'hi';
+typeof someString[Symbol.iterator];          // "function"
+</pre>
+
+<p>Der <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/String/@@iterator">Standard Iteratior</a> von <code>String</code>s gibt die Codepoints einen nach dem anderen zurück:</p>
+
+<pre class="brush: js">var iterator = someString[Symbol.iterator]();
+iterator + '';                               // "[object String Iterator]"
+
+iterator.next();                             // { value: "h", done: false }
+iterator.next();                             // { value: "i", done: false }
+iterator.next();                             // { value: undefined, done: true }</pre>
+
+<p>Einige Standardkonstrukte, wie z. B. die <a href="/de/docs/Web/JavaScript/Reference/Operators/Spread_operator">Spread Syntax</a>, benutzen unter der Decke das selbe Iterierbare Protokoll</p>
+
+<pre class="brush: js">[...someString]                              // ["h", "i"]</pre>
+
+<p>Man kann das Iterierverhalben neu definieren indem eine eigene <code>@@iterator</code> Eigenschaft definiert wird:</p>
+
+<pre class="brush: js">var someString = new String('hi');           // need to construct a String object explicitly to avoid auto-boxing
+
+someString[Symbol.iterator] = function() {
+  return { // this is the iterator object, returning a single element, the string "bye"
+    next: function() {
+      if (this._first) {
+        this._first = false;
+        return { value: 'bye', done: false };
+      } else {
+        return { done: true };
+      }
+    },
+    _first: true
+  };
+};
+</pre>
+
+<p>Zu bemerken ist, dass die Neudefinition von <code>@@iterator</code> hat Effekte auf Standardkonstrukte, die das Iterierbare Protokoll benutzen;</p>
+
+<pre class="brush: js">[...someString];                             // ["bye"]
+someString + '';                             // "hi"
+</pre>
+
+<h2 id="Iterierbare_Beispiele">Iterierbare Beispiele</h2>
+
+<h3 id="Standard_iterierbare_Objekte">Standard iterierbare Objekte</h3>
+
+<p>{{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("TypedArray")}}, {{jsxref("Map")}} und {{jsxref("Set")}} sind im Standard iterierbar, weil jeder Prototyp der Objekte eine <code>@@iterator</code> Methode definiert.</p>
+
+<h3 id="Benutzerdefiniertes_Iterierbares_Objekt">Benutzerdefiniertes Iterierbares Objekt</h3>
+
+<p>Man kann eigene Iterierbare Objekte wie folgt erstellen:</p>
+
+<pre class="brush: js">var myIterable = {};
+myIterable[Symbol.iterator] = function* () {
+    yield 1;
+    yield 2;
+    yield 3;
+};
+[...myIterable]; // [1, 2, 3]
+</pre>
+
+<h3 id="Standard_APIs_akzeptieren_Iterierbare_Objekte">Standard APIs akzeptieren Iterierbare Objekte</h3>
+
+<p>Es gibt viele APIs, die iterierbare Objekte akzeptieren, zum Beispiel: {{jsxref("Map", "Map([iterable])")}}, {{jsxref("WeakMap", "WeakMap([iterable])")}}, {{jsxref("Set", "Set([iterable])")}} and {{jsxref("WeakSet", "WeakSet([iterable])")}}:</p>
+
+<pre class="brush: js">var myObj = {};
+new Map([[1, 'a'], [2, 'b'], [3, 'c']]).get(2);               // "b"
+new WeakMap([[{}, 'a'], [myObj, 'b'], [{}, 'c']]).get(myObj); // "b"
+new Set([1, 2, 3]).has(3);                               // true
+new Set('123').has('2');                                 // true
+new WeakSet(function* () {
+    yield {};
+    yield myObj;
+    yield {};
+}()).has(myObj);                                         // true
+</pre>
+
+<p>Zudem sollten {{jsxref("Promise.all", "Promise.all(iterable)")}}, {{jsxref("Promise.race", "Promise.race(iterable)")}}, and {{jsxref("Array.from", "Array.from()")}} angeschaut werden.</p>
+
+<h3 id="Syntaxen_die_iterierbare_Objekte_erwarten">Syntaxen die iterierbare Objekte erwarten</h3>
+
+<p>Einige Statements und Ausdrücke erwarten iterierbare Objekt, zum Beispiel die <code><a href="/de/docs/Web/JavaScript/Reference/Statements/for...of">for-of</a></code> Schleife, <a href="/de/docs/Web/JavaScript/Reference/Operators/Spread_operator">Spread Syntax</a>, <code><a href="/de/docs/Web/JavaScript/Reference/Operators/yield*">yield*</a></code> und <a href="/de/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destrukturierende Zuweisungen</a>:</p>
+
+<pre class="brush: js">for(let value of ['a', 'b', 'c']){
+    console.log(value);
+}
+// "a"
+// "b"
+// "c"
+
+[...'abc']; // ["a", "b", "c"]
+
+function* gen() {
+  yield* ['a', 'b', 'c'];
+}
+
+gen().next(); // { value:"a", done:false }
+
+[a, b, c] = new Set(['a', 'b', 'c']);
+a // "a"
+
+</pre>
+
+<h3 id="Nicht_richtig_definierte_iterierbare_Objekte">Nicht richtig definierte iterierbare Objekte</h3>
+
+<p>Wenn eine iterierbare <code>@@iterator</code> Methode keinen Iterator Objekt zurück gibt, ist es nicht richtig definiert. Wenn es so benutzt wird, führt das zu Laufzeitfehlern oder unerwartetem Verhalten:</p>
+
+<pre class="brush: js">var nonWellFormedIterable = {}
+nonWellFormedIterable[Symbol.iterator] = () =&gt; 1
+[...nonWellFormedIterable] // TypeError: [] is not a function
+</pre>
+
+<h2 id="Iterator_Beispiele">Iterator Beispiele</h2>
+
+<h3 id="Einfacher_Iterator">Einfacher Iterator</h3>
+
+<pre class="brush: js">function makeIterator(array) {
+    var nextIndex = 0;
+
+    return {
+       next: function() {
+           return nextIndex &lt; array.length ?
+               {value: array[nextIndex++], done: false} :
+               {done: true};
+       }
+    };
+}
+
+var it = makeIterator(['yo', 'ya']);
+
+console.log(it.next().value); // 'yo'
+console.log(it.next().value); // 'ya'
+console.log(it.next().done);  // true
+</pre>
+
+<h3 id="Unendlicher_Iterator">Unendlicher Iterator</h3>
+
+<pre class="brush: js">function idMaker() {
+    var index = 0;
+
+    return {
+       next: function(){
+           return {value: index++, done: false};
+       }
+    };
+}
+
+var it = idMaker();
+
+console.log(it.next().value); // '0'
+console.log(it.next().value); // '1'
+console.log(it.next().value); // '2'
+// ...
+</pre>
+
+<h3 id="Mit_einem_Generator">Mit einem Generator</h3>
+
+<pre class="brush: js">function* makeSimpleGenerator(array) {
+    var nextIndex = 0;
+
+    while (nextIndex &lt; array.length) {
+        yield array[nextIndex++];
+    }
+}
+
+var gen = makeSimpleGenerator(['yo', 'ya']);
+
+console.log(gen.next().value); // 'yo'
+console.log(gen.next().value); // 'ya'
+console.log(gen.next().done);  // true
+
+
+
+function* idMaker() {
+    var index = 0;
+    while (true)
+        yield index++;
+}
+
+var gen = idMaker();
+
+console.log(gen.next().value); // '0'
+console.log(gen.next().value); // '1'
+console.log(gen.next().value); // '2'
+// ...
+</pre>
+
+<h3 id="Mit_ES2015_Klassen_class">Mit ES2015 Klassen (class)</h3>
+
+<pre class="brush: js">class SimpleClass {
+  constructor(data) {
+    this.index = 0;
+    this.data = data;
+  }
+
+  [Symbol.iterator]() {
+    return {
+      next: () =&gt; {
+        if (this.index &lt; this.data.length) {
+          return {value: this.data[this.index++], done: false};
+        } else {
+          this.index = 0; //If we would like to iterate over this again without forcing manual update of the index
+          return {done: true};
+        }
+      }
+    }
+  };
+}
+
+const simple = new SimpleClass([1,2,3,4,5]);
+
+for (const val of simple) {
+  console.log(val);  //'0' '1' '2' '3' '4' '5'
+}
+</pre>
+
+<h2 id="Ist_ein_Generator_Objekt_ein_Iterator_oder_ein_iterierbares_Objekt">Ist ein Generator Objekt ein Iterator oder ein iterierbares Objekt?</h2>
+
+<p>Ein <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Generator">Generatorobjekt</a> ist beides, Iterator und Iterierbar:</p>
+
+<pre class="brush: js">var aGeneratorObject = function* () {
+    yield 1;
+    yield 2;
+    yield 3;
+}();
+typeof aGeneratorObject.next;
+// "function", because it has a next method, so it's an iterator
+typeof aGeneratorObject[Symbol.iterator];
+// "function", because it has an @@iterator method, so it's an iterable
+aGeneratorObject[Symbol.iterator]() === aGeneratorObject;
+// true, because its @@iterator method returns itself (an iterator), so it's an well-formed iterable
+[...aGeneratorObject];
+// [1, 2, 3]
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-iteration', 'Iteration')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-iteration', 'Iteration')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Für mehr Informationen über ES2015 Generatoren, siehe <a href="/de/docs/Web/JavaScript/Reference/Statements/function*">die function* Documentation</a>.</li>
+</ul>
diff --git a/files/de/web/javascript/reference/klassen/constructor/index.html b/files/de/web/javascript/reference/klassen/constructor/index.html
new file mode 100644
index 0000000000..5ab83ddcd5
--- /dev/null
+++ b/files/de/web/javascript/reference/klassen/constructor/index.html
@@ -0,0 +1,165 @@
+---
+title: Konstruktor
+slug: Web/JavaScript/Reference/Klassen/constructor
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Klassen
+translation_of: Web/JavaScript/Reference/Classes/constructor
+---
+<div>{{jsSidebar("Classes")}}</div>
+
+<p>Die <code>constructor</code> Methode ist eine spezielle Methode für das erzeugen und initialisieren von Objekten, die mit dem Schlüsselwort <code>class </code>erzeugt wurden.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">constructor([Argumente]) { ... }</pre>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>In einer Klasse kann es nur eine Methode mit dem Namen "constructor" geben. Eine {{jsxref("SyntaxError")}} Fehlermeldung wird geworfen, wenn in einer Klasse die <code>constructor</code> Methode mehr als einmal vorhanden ist.</p>
+
+<p>Die <code>constructor </code>Methode kann mit dem Schlüsselwort <code>super </code>die <code>constructor </code>Methode der Eltern-Klasse aufrufen.</p>
+
+<p>Wenn man keine <code>constructor </code>Methode erzeugt, wird eine Standardkonstruktor verwendet.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Verwendung_der_constructor_Methode">Verwendung der <code>constructor</code> Methode</h3>
+
+<p>Dieser Quellcode Ausschnitt wurden vom  <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">classes Beispiel</a> (<a href="https://googlechrome.github.io/samples/classes-es6/index.html">live Demo</a>) übernommen.</p>
+
+<pre class="brush: js">class Square extends Polygon {
+  constructor(length) {
+    // Hier wird die constructor Methode der Eltern-Klasse aufgerufen,
+    // für die Parameter width und height wurde der übergebene length Parameter verwendet
+    super(length, length);
+    // Anmerkung: In abgeleiteten Klassen, muss die super() Methode aufgerufen werden,
+    // bevor man das 'this' Objekt verwenden kann, da es sonst zu einen Referenz Fehler kommt
+    this.name = 'Square';
+  }
+
+  get area() {
+    return this.height * this.width;
+  }
+
+  set area(value) {
+    this.area = value;
+  }
+}</pre>
+
+<h3 id="Standardkonstruktoren">Standardkonstruktoren</h3>
+
+<p>Wenn man keine <code>constructor </code>Methode anlegt, wird eine Standardkonstruktor verwendet. Für Basis Klassen ist der Standard Konstruktor:</p>
+
+<pre class="brush: js">constructor() {}
+</pre>
+
+<p>Für vererbte Klassen, ist das der Standardkonstruktor:</p>
+
+<pre class="brush: js">constructor(...args) {
+  super(...args);
+}</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-static-semantics-constructormethod', 'Constructor Method')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-static-semantics-constructormethod', 'Constructor Method')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatGeckoDesktop(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Default constructors</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatGeckoMobile(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+  <tr>
+   <td>Default constructors</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Operators/super">super()</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/klassen/extends/index.html b/files/de/web/javascript/reference/klassen/extends/index.html
new file mode 100644
index 0000000000..29ed8c5e78
--- /dev/null
+++ b/files/de/web/javascript/reference/klassen/extends/index.html
@@ -0,0 +1,172 @@
+---
+title: Erweitern
+slug: Web/JavaScript/Reference/Klassen/extends
+tags:
+  - Classes
+  - ECMAScript 2015
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Classes/extends
+---
+<div>{{jsSidebar("Classes")}}</div>
+
+<p>Das <strong><code>extends</code></strong> Schlüsselwort wird in einer <a href="/de/docs/Web/JavaScript/Reference/Statements/class">Klassendeklaration </a>oder in einem <a href="/de/docs/Web/JavaScript/Reference/Operators/class">Klassenausdruck </a>verwendet, um eine, von einer anderen Klasse, abgeleitete Klasse zu erzeugen.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">class KindKlasse extends ElternKlasse { ... }</pre>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Das Schlüsselwort <code>extends</code> kann verwendet werden, um von selbst erstellen Klassen als auch von standardmäßig eingebaute Objekte abzuleiten.</p>
+
+<p>Das <code>prototype</code> Objekt, des zu erweiternden Objekt, muss entweder von Typ {{jsxref("Object")}} oder{{jsxref("null")}} sein.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Verwendung_von_extends">Verwendung von <code>extends</code></h3>
+
+<p>Das erste Beispiel erzeugt einen Klasse mit dem Namen <code>Square,</code> die von der Klasse <code>Polygon</code> abgeleitet ist. Dieses Beispiel wurde aus dieser <a href="https://googlechrome.github.io/samples/classes-es6/index.html">live Demo</a> <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">(Quellcode)</a> entnommen.</p>
+
+<pre class="brush: js">class Square extends Polygon {
+  constructor(length) {
+    // Hier wird die constructor Methode der Eltern-Klasse aufgerufen,
+    // für die Parameter width und height wurde der übergebene length Parameter verwendet
+    super(length, length);
+    // Anmerkung: In abgeleiteten Klassen, muss die super() Methode aufgerufen werden,
+    // bevor man das 'this' Objekt verwenden kann, da es sonst zu einen Referenz Fehler kommt
+    this.name = 'Square';
+  }
+
+  get area() {
+    return this.height * this.width;
+  }
+
+  set area(value) {
+    this.height = this.width = Math.sqrt(value);
+    this.area = value;
+  }
+}</pre>
+
+<h3 id="Verwendung_mit_standardmäßig_eingebautem_Objekt">Verwendung mit standardmäßig eingebautem Objekt</h3>
+
+<p>In diesem Beispiel wird das standardmäßig eingebaute {{jsxref("Date")}} Objekt erweitert. Dieses Beispiel wurde aus dieser <a href="https://googlechrome.github.io/samples/classes-es6/index.html">live Demo</a> <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">(Quellcode)</a> entnommen.</p>
+
+<pre class="brush: js">class myDate extends Date {
+  constructor() {
+    super();
+  }
+
+  getFormattedDate() {
+    var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
+    return this.getDate() + "-" + months[this.getMonth()] + "-" + this.getFullYear();
+  }
+}</pre>
+
+<h3 id="Ableiten_von_null">Ableiten von <code>null</code></h3>
+
+<p>Das Ableiten von {{jsxref("null")}} funktioniert genauso wie mit jeder anderen Klasse, mit der Ausnahme, dass das <code>prototype</code> Objekt nicht von {{jsxref("Object.prototype")}} abgeleitet ist.</p>
+
+<pre class="brush: js">class nullExtends extends null {
+  constructor() {}
+}
+
+Object.getPrototypeOf(nullExtends); // Function.prototype
+Object.getPrototypeOf(nullExtends.prototype) // null</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-class-definitions', 'extends')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'extends')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatGeckoDesktop(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Array subclassing</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+  <tr>
+   <td>Array subclassing</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Operators/super">super</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/klassen/index.html b/files/de/web/javascript/reference/klassen/index.html
new file mode 100644
index 0000000000..81bec0651a
--- /dev/null
+++ b/files/de/web/javascript/reference/klassen/index.html
@@ -0,0 +1,376 @@
+---
+title: Klassen
+slug: Web/JavaScript/Reference/Klassen
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Klassen
+  - Konstruktor
+  - Vererbung
+translation_of: Web/JavaScript/Reference/Classes
+---
+<div>{{JsSidebar("Classes")}}</div>
+
+<div>JavaScript Klassen, eingeführt in ECMAScript 2015, sind syntaktischer Zucker für das bestehende, auf Prototypen basierende, Vererbungsmodell von JavaScript. Diese Syntaxerweiterung führt <strong>kein</strong> neues OOP-Modell in die Sprache ein. JS Klassen ermöglichen es, mit klarer und verständlicher Syntax Objekte zu erstellen und Vererbung in Javascript zu realisieren.</div>
+
+<h2 id="Klassendefinition">Klassendefinition</h2>
+
+<p>Klassen sind eigentlich Funktionen. Analog zu Funktionsausdrücken und Funktionsdeklarationen hat die Klassensyntax zwei Komponenten:</p>
+
+<ul>
+ <li>Klassenausdrücke und</li>
+ <li>Klassendeklarationen.</li>
+</ul>
+
+<h3 id="Klassendeklaration">Klassendeklaration</h3>
+
+<p>Eine Möglichkeit, Klassen zu definieren ist eine <em>Klassendeklaration</em>. Diese wird eingeleitet durch das Schlüsselwort <code>class</code>, gefolgt vom Namen der Klasse (hier: "Rectangle").</p>
+
+<pre class="brush: js">class Rectangle {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+}</pre>
+
+<h4 id="Hoisting">Hoisting</h4>
+
+<p>Ein wichtiger Unterschied zwischen <em>Klassen-</em> und <em>Funktionsdeklarationen</em> besteht im sogenannten {{Glossary("Hoisting")}}. Funktionsdeklarationen werden an den Anfang des Definitionsbereichs "gehoben", für Klassen gilt dies nicht. Das heißt, um auf eine Klasse zuzugreifen, muss sie zuvor definiert worden sein, sonst führt dies zu einem {{jsxref("ReferenceError")}}:</p>
+
+<pre class="brush: js example-bad">var p = new Polygon(); // ReferenceError
+
+class Polygon {}
+</pre>
+
+<h3 id="Klassenausdruck">Klassenausdruck</h3>
+
+<p>Ein <em>Klassenausdruck</em> ist eine weitere Möglichkeit eine Klasse zu definieren. Dabei ist es optional, hinter dem Schlüsselwort <code>class</code> einen Namen anzugeben. Sollte ein Name angegeben werden, so gilt dieser nur innerhalb des Klassenkörpers.</p>
+
+<pre class="brush: js">// unnamed
+var Polygon = class {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+};
+
+// named
+var Polygon = class Polygon {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+};
+</pre>
+
+<h2 id="Klassenkörper_und_Methodendefinitionen">Klassenkörper und Methodendefinitionen</h2>
+
+<p>Der Körper der Klasse ist innerhalb der beiden geschweiften Klammern <code>{}</code>. Hier werden die Eigenschaften der Klasse definiert, wie Konstruktoren oder Methoden.</p>
+
+<h3 id="Strict_mode">"Strict mode"</h3>
+
+<p>Der Inhalt der Klassendeklaration und des Klassenausdrucks werden im "<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">strikten Modus</a>" ausgeführt.</p>
+
+<h3 id="Konstruktor">Konstruktor</h3>
+
+<p>Die <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Klassen/constructor">Konstruktor</a>-Methode ist eine spezielle Methode, um Objekte zu erzeugen und zu initialisieren. Eine Klasse kann nur eine spezielle Methode mit dem Namen "constructor" haben. Sollte es in einer Klasse mehrere "constructor"-Methoden geben, wird ein {{jsxref("SyntaxError")}} geworfen.</p>
+
+<p>In der Konstruktor-Methode kann man mit dem Schlüsselwort "super", den Konstruktor der Elternklasse aufrufen.</p>
+
+<h3 id="Prototype_Methoden">Prototype Methoden</h3>
+
+<p>Siehe auch <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">Methodendefinitionen</a>.</p>
+
+<pre class="brush: js">class Polygon {
+  constructor(hoehe, breite) {
+    this.hoehe = hoehe;
+    this.breite = breite;
+  }
+
+  get flaeche() {
+    return this.berechneFlaeche();
+  }
+
+  berechneFlaeche() {
+    return this.hoehe * this.breite;
+  }
+}
+
+const quadrat = new Polygon(10, 10);
+
+console.log(quadrat.flaeche);</pre>
+
+<h3 id="Statische_Methoden">Statische Methoden</h3>
+
+<p>Das Schlüsselwort <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/static">static</a></code> definiert statische Methoden. Statische Methoden werden ohne Instanzierung einer Klasse aufgerufen und sind über eine erzeugte Instanz nicht aufrufbar. Oft werden in Applikationen statische Methoden für Hilfsfunktionen verwendet.</p>
+
+<pre class="brush: js">class Punkt {
+    constructor(x, y) {
+        this.x = x;
+        this.y = y;
+    }
+
+    static laenge(a, b) {
+        const dx = a.x - b.x;
+        const dy = a.y - b.y;
+
+        return Math.sqrt(dx*dx + dy*dy);
+    }
+}
+
+const p1 = new Punkt(5, 5);
+const p2 = new Punkt(10, 10);
+
+console.log(Punkt.laenge(p1, p2));</pre>
+
+<h3 id="Boxing_with_prototype_and_static_methods">Boxing with prototype and static methods</h3>
+
+<p>Wird eine statische oder eine prototype-Methode aufgerufen, ohne dass ein Objekt in der Variable "this" liegt (oder mit "this" als Wahrheitswert, Zeichenkette, Nummer, undefiniert oder null), dann wird die Variable "this" im Funktionskörper undefined sein. Autoboxing wird nicht passieren. Das Verhalten wird das gleiche sein, sollte der Code nicht im "strict mode" geschrieben worden sein.</p>
+
+<pre class="brush: js">class Tier {
+  sprich() {
+    return this;
+  }
+  static iss() {
+    return this;
+  }
+}
+
+let obj = new Tier();
+let sprich = obj.sprich;
+sprich(); // undefined
+
+let iss = Tier.iss;
+iss(); // undefined</pre>
+
+<p>Falls wir den vorherigen Quelltext mit klassischen funktionsbasierten Klassen schreiben, wird Autoboxing stattfinden. Dies wird auf dem Wert passieren, der für "this" an die Funktion übergeben wurde.</p>
+
+<pre class="brush: js">function Tier() { }
+
+Tier.prototype.sprich = function() {
+  return this;
+}
+
+Tier.iss = function() {
+  return this;
+}
+
+let obj = new Tier();
+let sprich = obj.sprich;
+sprich(); // Globales Objekt
+
+let iss = Tier.iss;
+iss(); // Globales Objekt</pre>
+
+<h2 id="Vererbung_mittels_extends">Vererbung mittels <code>extends</code></h2>
+
+<p>Das Schlüsselwort <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends">extends</a></code> wird dafür verwendet, Klassendeklarationen und Klassenausdrücke zu erzeugen, die von einer anderen Klasse ableiten.</p>
+
+<pre class="brush: js">class Tier{
+  constructor(name) {
+    this.name = name;
+  }
+
+  sprich() {
+    console.log(this.name + ' macht ein Geräusch.');
+  }
+}
+
+class Hund extends Tier{
+  sprich() {
+    console.log(this.name + ' bellt.');
+  }
+}
+
+var h = new Hund('Wolfi');
+h.sprich();
+</pre>
+
+<p>Existiert in der Unterklasse ein Konstruktor, muss dieser zuerst super() aufrufen, bevor "this" verwendet werden kann.</p>
+
+<p>Man kann auch traditionelle funktionsbasierte Klassen erweitern:</p>
+
+<pre class="brush: js">function Tier(name) {
+  this.name = name;
+}
+Tier.prototype.sprich = function () {
+  console.log(this.name + ' macht ein Geräusch.');
+}
+
+class Hund extends Tier {
+  sprich() {
+    super.sprich();
+    console.log(this.name + ' bellt.');
+  }
+}
+
+var h = new Hund('Wolfi');
+h.sprich();</pre>
+
+<p>Klassen können nicht von regulären (nicht konstruierbaren) Objekten erben. Falls von einem regulärem Objekt geerbt werden soll, kann {{jsxref("Object.setPrototypeOf()")}} verwendet werden:</p>
+
+<pre class="brush: js">var Tier = {
+  sprich() {
+    console.log(this.name + ' macht ein Geräusch.');
+  }
+};
+
+class Hund {
+  constructor(name) {
+    this.name = name;
+  }
+  sprich() {
+    console.log(this.name + ' bellt.');
+  }
+}
+
+Object.setPrototypeOf(Hund.prototype, Tier);
+
+var h = new Hund('Wolfi');
+h.sprich();</pre>
+
+<h2 id="Species">Species</h2>
+
+<p>Falls man zum Beispiel in einer selbst erzeugten Klasse <code>MyArray</code> den Konstruktor mit dem Konstruktor der {{jsxref("Array")}} Klasse überschreiben will, kann man dies mittels des species Musters erreichen.</p>
+
+<p>Zum Beispiel, wenn man die {{jsxref("Array.map", "map()")}} Methode aufruft, wird der Default-Konstruktor der Klasse aufgerufen. Will man, dass stattdessen der Konstruktor der Elternklasse benutzt wird, kann man das {{jsxref("Symbol.species")}}-Symbol dafür verwenden:</p>
+
+<pre class="brush: js">class MyArray extends Array {
+  // Überschreibt species mit dem Konstruktor der Array-Klasses
+  static get [Symbol.species]() { return Array; }
+}
+var a = new MyArray(1,2,3);
+var mapped = a.map(x =&gt; x * x);
+
+console.log(mapped instanceof MyArray); // false
+console.log(mapped instanceof Array);   // true</pre>
+
+<h2 id="Elternklasse_Methoden_mit_super_aufrufen">Elternklasse Methoden mit <code>super</code> aufrufen</h2>
+
+<p>Das Schlüsselwort <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a></code> kann verwendet werden, um Methoden der Elternklassen aufzurufen</p>
+
+<pre class="brush: js">class Katze{
+  constructor(name) {
+    this.name = name;
+  }
+
+  sprich() {
+    console.log(this.name + ' macht ein Geräusch.');
+  }
+}
+
+class Loewe extends Katze {
+  sprich() {
+    super.sprich();
+    console.log(this.name + ' brüllt.');
+  }
+}</pre>
+
+<h2 id="Mix-ins">Mix-ins</h2>
+
+<p>Abstrakte Subklassen oder <em>mix-ins</em> sind Vorlagen für Klassen. Eine ECMAScript-Klasse kann nur von einer einzigen Klasse ableiten, damit ist beispielsweise mehrfache Vererbung von Helferklassen nicht möglich. Die gewünschte Funktionalität muss von der Elternklasse bereitgestellt werden.</p>
+
+<p>Eine Funktion die als Input eine Elternklasse nimmt und als Output eine davon abgeleitete Subklasse ausgibt, kann verwendet werden, um mix-ins in ECMAScript zu erzeugen:</p>
+
+<pre class="brush: js">var RechnerMixin = Base =&gt; class extends Base {
+  rechne() { }
+};
+
+var ZufallsGeneratorMixin = Base =&gt; class extends Base {
+  generiere() { }
+};</pre>
+
+<p>Eine Klasse die ein solches mix-in verwendet kann so erzeugt werden:</p>
+
+<pre class="brush: js">class Foo { }
+class Bar extends RechnerMixin(ZufallsGeneratorMixin(Foo)) { }</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Ursprüngliche Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(42.0)}}<sup>[1]</sup><br>
+    {{CompatChrome(49.0)}}</td>
+   <td>{{CompatGeckoDesktop(45)}}</td>
+   <td>13</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatSafari(9.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funktion</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome für Android</th>
+  </tr>
+  <tr>
+   <td>Basis Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>9</td>
+   <td>{{CompatChrome(42.0)}}<sup>[1]</sup><br>
+    {{CompatChrome(49.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Benötigt den strikten Modus. Der Support im nicht-strikte Modus verbirgt sich hinter der Flag "Experimentelle JavaScript-Funktionen", welche standardmäßig deaktiviert ist.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Guide/Funktionen")}}</li>
+ <li>{{jsxref("Statements/class")}}</li>
+ <li>{{jsxref("Operators/class")}}</li>
+ <li>{{jsxref("Operators/super")}}</li>
+ <li><a href="https://hacks.mozilla.org/2015/07/es6-in-depth-classes/">Blog post: "ES6 In Depth: Classes"</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/klassen/static/index.html b/files/de/web/javascript/reference/klassen/static/index.html
new file mode 100644
index 0000000000..9c13048498
--- /dev/null
+++ b/files/de/web/javascript/reference/klassen/static/index.html
@@ -0,0 +1,136 @@
+---
+title: Statische Methoden
+slug: Web/JavaScript/Reference/Klassen/static
+tags:
+  - Classes
+  - ECMAScript 2015
+  - JavaScript
+  - Static
+translation_of: Web/JavaScript/Reference/Classes/static
+---
+<div>{{jsSidebar("Classes")}}</div>
+
+<p>Das <code><strong>static</strong></code> Schüsselwort definiert statische Methoden für eine Klasse.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/classes-static.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">static methodenName() { ... }</pre>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Statische Methoden werden ohne Instanzierung einer Klasse aufgerufen und sind über eine erzeugte Instanz nicht aufrufbar. Oft werden in statische Methoden für Hilfsfunktionen verwendet.</p>
+
+<h2 id="Aufruf_von_statischen_Methoden">Aufruf von statischen Methoden</h2>
+
+<h3 id="Von_einer_anderen_statischen_Methode">Von einer anderen statischen Methode</h3>
+
+<p>Um eine statische Methode aus einer anderen statischen Methode der gleichen Klasse aufzurufen, kann das <code><a href="/de/docs/Web/JavaScript/Reference/Operators/this">this</a></code> Schlüsselwort verwendet werden.</p>
+
+<pre class="brush: js">class StaticMethodCall {
+    static staticMethod() {
+        return 'Static method has been called';
+    }
+    static anotherStaticMethod() {
+        return this.staticMethod() + ' from another static method';
+    }
+}
+StaticMethodCall.staticMethod();
+// 'Static method has been called'
+
+StaticMethodCall.anotherStaticMethod();
+// 'Static method has been called from another static method'</pre>
+
+<h3 id="Für_Klassenkonstruktoren_und_anderen_Methoden">Für Klassenkonstruktoren und anderen Methoden</h3>
+
+<p>Statische Methoden sind mit dem <code><a href="/de/docs/Web/JavaScript/Reference/Operators/this">this</a></code> Schlüsselwort nicht direkt erreichbar von nicht statischen Methoden. Man kann sie mit dem Klassennamen aufrufen: <code>KLASSENNAME.STATISCH_METHODE_NAME</code> oder mit der Aufrufen einer Eigenschaft von <code>constructor</code>: <code>this.constructor.</code><code>STATISCH_METHODE_NAME</code>.</p>
+
+<pre class="brush: js">class StaticMethodCall{
+    constructor(){
+        console.log(StaticMethodCall.staticMethod());
+        // 'static method has been called'
+
+        console.log(this.constructor.staticMethod());
+        // 'static method has been called'
+    }
+
+    static  staticMethod(){
+        return 'static method has been called.';
+    }
+}</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Das folgende Beispiel demonstriert mehrere Dinge:</p>
+
+<ol>
+ <li>Wie eine statische Methode in einer Klasse implementiert wird.</li>
+ <li>Das von einer Klasse mit statischen Eigenschaften geerbt werden kann.</li>
+ <li>Wie eine statische Methode aufgerufen werden kann und wie nicht.</li>
+</ol>
+
+<pre class="brush: js">class Triple {
+  static triple(n) {
+    if (n === undefined) {
+      n = 1;
+    }
+    return n * 3;
+  }
+}
+
+class BiggerTriple extends Triple {
+  static triple(n) {
+    return super.triple(n) * super.triple(n);
+  }
+}
+
+console.log(Triple.triple());        // 3
+console.log(Triple.triple(6));       // 18
+
+var tp = new Triple();
+
+console.log(BiggerTriple.triple(3));
+// 81 (not affected by parent's instantiation)
+
+console.log(tp.triple());
+// 'tp.triple is not a function'.
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.classes.static")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/lexical_grammar/index.html b/files/de/web/javascript/reference/lexical_grammar/index.html
new file mode 100644
index 0000000000..1839f1e58e
--- /dev/null
+++ b/files/de/web/javascript/reference/lexical_grammar/index.html
@@ -0,0 +1,549 @@
+---
+title: Lexikalische Grammatik
+slug: Web/JavaScript/Reference/Lexical_grammar
+tags:
+  - JavaScript
+  - Keyword
+  - Lexical Grammer
+  - Literal
+translation_of: Web/JavaScript/Reference/Lexical_grammar
+---
+<div>{{JsSidebar("More")}}</div>
+
+<p>Diese Seite beschreibt die lexikalische Grammatik von JavaScript. Der Programmcode von ECMAScript-Skripten wird von links nach rechts gelesen und in eine Sequenz von Eingangselementen konvertiert, welche Tokens, Kontrollzeichen, Zeilentrenner, Kommentare oder Whitespaces sein können. ECMAScript definiert zudem einige Schlüsselworte und Literale und hat Regeln für automatisch eingefügte Semikolons am ende eines Statements.</p>
+
+<h2 id="Kontrollzeichen">Kontrollzeichen</h2>
+
+<p>Kontrollzeichen haben keine sichtbare Repräsentation werden aber für die Kontrolle der Interpretation des Textes benutzt.</p>
+
+<table class="standard-table">
+ <caption>Unicode-Formatkontrollzeichen</caption>
+ <tbody>
+  <tr>
+   <th>Codepoint</th>
+   <th>Name</th>
+   <th>Abkürzung</th>
+   <th>Beschreibung</th>
+  </tr>
+  <tr>
+   <td><code>U+200C</code></td>
+   <td>Bindehemmer</td>
+   <td>&lt;ZWNJ&gt;</td>
+   <td>Zwischen Zeichen platziert, um zu verhindern, dass sie in bestimmte Sprachen in Ligaturen eingebunden werden (<a href="https://de.wikipedia.org/wiki/Bindehemmer">Wikipedia</a>).</td>
+  </tr>
+  <tr>
+   <td><code>U+200D</code></td>
+   <td>Breitenloser Verbinder</td>
+   <td>&lt;ZWJ&gt;</td>
+   <td>Platziert zwischen Zeichen, die normalerweise nicht verbunden sind, um zu bewirken, dass die Zeichen mit ihrer verbundenen Form in bestimmten Sprachen angezeigt werden (<a href="https://de.wikipedia.org/wiki/Breitenloser_Verbinder">Wikipedia</a>).</td>
+  </tr>
+  <tr>
+   <td><code>U+FEFF</code></td>
+   <td>Byte Order Mark</td>
+   <td>&lt;BOM&gt;</td>
+   <td>Wird am Anfang des Skripts verwendet, um es als Unicode und die Bytereihenfolge des Texts zu markieren (<a href="https://de.wikipedia.org/wiki/Byte_Order_Mark">Wikipedia</a>).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Whitespaces">Whitespaces</h2>
+
+<p>Mit Spacezeichen wird die Lesbarkeit des Quelltextes verbessert und sie trennen Tokens voneinander. Diese Zeichen sind bedeutungslos für die Funktionalität des Programms. <a href="http://en.wikipedia.org/wiki/Minification_%28programming%29">Minification Tools</a> werden oft benutzt, um Whitespaces zu entfernen, um die übertragenen Daten zu reduzieren.</p>
+
+<table class="standard-table">
+ <caption>Whitespacezeichen</caption>
+ <tbody>
+  <tr>
+   <th>Codepoint</th>
+   <th>Name</th>
+   <th>Abkürzung</th>
+   <th>Beschreibung</th>
+   <th>Maskierte Sequenz</th>
+  </tr>
+  <tr>
+   <td>U+0009</td>
+   <td>Zeichen Tabulator</td>
+   <td>&lt;HT&gt;</td>
+   <td>Horizontaler Tabulator</td>
+   <td>\t</td>
+  </tr>
+  <tr>
+   <td>U+000B</td>
+   <td>Zeilen Tabulator</td>
+   <td>&lt;VT&gt;</td>
+   <td>Vertikaler Tabulator</td>
+   <td>\v</td>
+  </tr>
+  <tr>
+   <td>U+000C</td>
+   <td>Form feed</td>
+   <td>&lt;FF&gt;</td>
+   <td>Kontrollzeichen für den Seitenumbruch (<a href="http://en.wikipedia.org/wiki/Page_break#Form_feed">Wikipedia</a>).</td>
+   <td>\f</td>
+  </tr>
+  <tr>
+   <td>U+0020</td>
+   <td>Space</td>
+   <td>&lt;SP&gt;</td>
+   <td>Normales Leerzeichen</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>U+00A0</td>
+   <td>Nicht unterbrechenedes space</td>
+   <td>&lt;NBSP&gt;</td>
+   <td>Normal Leerzeichen, aber keine Stelle an der die Zeile unterbrochen werden kann.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>Others</td>
+   <td>Andere Unicode Spacezeichen</td>
+   <td>&lt;USP&gt;</td>
+   <td><a href="https://de.wikipedia.org/wiki/Leerzeichen">Spaces in Unicode auf Wikipedia</a></td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Zeilenumbruch">Zeilenumbruch</h2>
+
+<p>Neben Whitespacezeichen werden Zeilenumbrüche auch eingesetzt, um die Lesbarkeit des Programmes zu verbessern. Es gibt ein paar Fälle, bei denen ein Zeilenumbruch einen Einfluss auf die Ausführung von JavaScript Programmen kann und an wenigen Stellen sind sie verboten. Zeilenumbrüche haben zudem einen Einfluss auf den Prozess der <a href="/de/docs/Web/JavaScript/Reference/Lexical_grammar#Automatisches_Einfügen_von_Semikolons">automatischen eingefügten Semikolons</a>. Zeilenumbrüche werden mit der <strong>\s</strong> Klasse in <a href="/de/docs/Web/JavaScript/Guide/Regular_Expressions">Regulären Ausdrücken</a> erkannt.</p>
+
+<p>Nur die folgenden Unicode Codepoints werden als Zeilenumbrüche in ECMAScript erkannt. Andere Zeilenumbruchszeichen werden als Whitespaces erkannt (zum Beispiel sind Next Line, NEL, U+0085 Whitspaces).</p>
+
+<table class="standard-table">
+ <caption>Zeilenumbruchszeichen</caption>
+ <tbody>
+  <tr>
+   <th>Codepoint</th>
+   <th>Name</th>
+   <th>Abkürzung</th>
+   <th>Beschreibung</th>
+   <th>Maskierte Sequenz</th>
+  </tr>
+  <tr>
+   <td>U+000A</td>
+   <td>Line Feed</td>
+   <td>&lt;LF&gt;</td>
+   <td>Zeichen für Zeilenumbruch in UNIX Systemen.</td>
+   <td>\n</td>
+  </tr>
+  <tr>
+   <td>U+000D</td>
+   <td>Carriage Return</td>
+   <td>&lt;CR&gt;</td>
+   <td>Zeichen für Zeilenumbruch in Commodore und frühen Mac Systemen.</td>
+   <td>\r</td>
+  </tr>
+  <tr>
+   <td>U+2028</td>
+   <td>Line Separator</td>
+   <td>&lt;LS&gt;</td>
+   <td><a href="https://de.wikipedia.org/wiki/Zeilenumbruch">Wikipedia</a></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>U+2029</td>
+   <td>Paragraph Separator</td>
+   <td>&lt;PS&gt;</td>
+   <td><a href="https://de.wikipedia.org/wiki/Zeilenumbruch">Wikipedia</a></td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Kommentare">Kommentare</h2>
+
+<p>Kommentare werden benutzt, um Hinweise, Notizen, Vorschläge oder Warnungen im JavaScript Programmcode zu hinterlassen. Das kann zur Lesbarkeit und Verständnis beisteuern. Sie können auch eingesetzt werden, um ein Programmzeil auszuschalten, damit es nicht ausgeführt wird; das kan ein Werkzeug zum Debuggen sein.</p>
+
+<p>JavaScript kennt zwei Typen von Kommentaren.</p>
+
+<p>Der erste Typ ist der <code>//</code> Kommentar; Dieser macht alle folgenden Zeichen in der gleichen Zeile zu einem Kommentar. Zum Beispiel:</p>
+
+<pre class="brush: js">function comment() {
+  // Dieses ist ein einzeiliger JavaScript Kommentar
+  console.log('Hello world!');
+}
+comment();
+</pre>
+
+<p>Der zweite Typ ist der <code>/* */</code> Style, welcher deutlich flexibler ist.</p>
+
+<p>Zum Beispiel kann er auf eine Zeile angewendet werden:</p>
+
+<pre class="brush: js">function comment() {
+  /* Dieses ist ein einzeiliger JavaScript Kommentar */
+  console.log('Hello world!');
+}
+comment();</pre>
+
+<p>Man kann aber auch mehrzeilige Kommentare wie folgenden machen:</p>
+
+<pre class="brush: js">function comment() {
+  /* Dieses ist ein mehrzeiliger Kommentar. Zu beachten ist,
+     dass wir den Kommentar erst beenden müssen, wenn wir fertig sind. */
+  console.log('Hello world!');
+}
+comment();</pre>
+
+<p>Man kann aber auch einen Kommentar mitten in einer Zeile machen. Diese kann die Lesbarkeit aber negativ beeinträchtigen, weshalb diese Art mit Vorsicht zu genießen ist:</p>
+
+<pre class="brush: js">function comment(x) {
+  console.log('Hello ' + x /* Fügt den Wert von x ein */ + ' !');
+}
+comment('world');</pre>
+
+<p>Natürlich kann diese Art auch eingesetzt werden, um Programmteile zu deaktivieren, wie es folgendes Beispiel zeigt:</p>
+
+<pre class="brush: js">function comment() {
+  /* console.log('Hello world!'); */
+}
+comment();</pre>
+
+<p>In diese Fall wird der Aufruf von <code>console.log()</code> nie ausgeführt, weil er in einem Kommentar ist. Jede Zeile im Programm kann so deaktiviert werden.</p>
+
+<h2 id="Schlüsselwörter">Schlüsselwörter</h2>
+
+<h3 id="Reservierte_Schlüsselwörter_in_ECMAScript_2015">Reservierte Schlüsselwörter in ECMAScript 2015</h3>
+
+<ul class="threecolumns">
+ <li>{{jsxref("Statements/break", "break")}}</li>
+ <li>{{jsxref("Statements/switch", "case")}}</li>
+ <li>{{jsxref("Statements/try...catch", "catch")}}</li>
+ <li>{{jsxref("Statements/class", "class")}}</li>
+ <li>{{jsxref("Statements/const", "const")}}</li>
+ <li>{{jsxref("Statements/continue", "continue")}}</li>
+ <li>{{jsxref("Statements/debugger", "debugger")}}</li>
+ <li>{{jsxref("Statements/default", "default")}}</li>
+ <li>{{jsxref("Operators/delete", "delete")}}</li>
+ <li>{{jsxref("Statements/do...while", "do")}}</li>
+ <li>{{jsxref("Statements/if...else", "else")}}</li>
+ <li>{{jsxref("Statements/export", "export")}}</li>
+ <li>{{jsxref("Statements/class", "extends")}}</li>
+ <li>{{jsxref("Statements/try...catch", "finally")}}</li>
+ <li>{{jsxref("Statements/for", "for")}}</li>
+ <li>{{jsxref("Statements/function", "function")}}</li>
+ <li>{{jsxref("Statements/if...else", "if")}}</li>
+ <li>{{jsxref("Statements/import", "import")}}</li>
+ <li>{{jsxref("Operators/in", "in")}}</li>
+ <li>{{jsxref("Operators/instanceof", "instanceof")}}</li>
+ <li>{{jsxref("Operators/new", "new")}}</li>
+ <li>{{jsxref("Statements/return", "return")}}</li>
+ <li>{{jsxref("Operators/super", "super")}}</li>
+ <li>{{jsxref("Statements/switch", "switch")}}</li>
+ <li>{{jsxref("Operators/this", "this")}}</li>
+ <li>{{jsxref("Statements/throw", "throw")}}</li>
+ <li>{{jsxref("Statements/try...catch", "try")}}</li>
+ <li>{{jsxref("Operators/typeof", "typeof")}}</li>
+ <li>{{jsxref("Statements/var", "var")}}</li>
+ <li>{{jsxref("Operators/void", "void")}}</li>
+ <li>{{jsxref("Statements/while", "while")}}</li>
+ <li>{{jsxref("Statements/with", "with")}}</li>
+ <li>{{jsxref("Operators/yield", "yield")}}</li>
+</ul>
+
+<h3 id="Reservierte_zukünftige_Schlüsselworte">Reservierte zukünftige Schlüsselworte</h3>
+
+<p>Die folgenden Schlüsselwörter sind für die Zukunft von der ECMAScript Spezifikation reserviert. Sie haben aktuell keine spezielle Funktion, können aber in Zukunft eine Funktion bekommen, weshalb sie nicht als Bezeichner verwendet werden können.</p>
+
+<p>Dieses ist immer reserviert:</p>
+
+<ul>
+ <li><code>enum</code></li>
+</ul>
+
+<p>Die folgenden sind nur reserviert, wenn sie im strict mode benutzt werden:</p>
+
+<ul class="threecolumns">
+ <li><code>implements</code></li>
+ <li><code>interface</code></li>
+ <li>{{jsxref("Statements/let", "let")}}</li>
+ <li><code>package</code></li>
+ <li><code>private</code></li>
+ <li><code>protected</code></li>
+ <li><code>public</code></li>
+ <li><code>static</code></li>
+</ul>
+
+<p>Die folgenden sind nur reserviert, wenn sie im Modul-Quelltext benutzt werden:</p>
+
+<ul>
+ <li><code>await</code></li>
+</ul>
+
+<h4 id="Reservierte_zukünftige_Schlüsselwörter_aus_älteren_Standards">Reservierte zukünftige Schlüsselwörter aus älteren Standards</h4>
+
+<p>Die folgenden Schlüsselwörter wurden als zukünftige Schlüsselwörter in älteren ECMAScript Spezifikationen (ECMAScript 1 bis 3) definiert.</p>
+
+<ul class="threecolumns">
+ <li><code>abstract</code></li>
+ <li><code>boolean</code></li>
+ <li><code>byte</code></li>
+ <li><code>char</code></li>
+ <li><code>double</code></li>
+ <li><code>final</code></li>
+ <li><code>float</code></li>
+ <li><code>goto</code></li>
+ <li><code>int</code></li>
+ <li><code>long</code></li>
+ <li><code>native</code></li>
+ <li><code>short</code></li>
+ <li><code>synchronized</code></li>
+ <li><code>throws</code></li>
+ <li><code>transient</code></li>
+ <li><code>volatile</code></li>
+</ul>
+
+<p>Zudem können die Literale <code>null</code>, <code>true</code>, und <code>false</code> nicht als Bezeichner in ECMAScript verwendet werden.</p>
+
+<h3 id="Reservierte_Wörter_benutzen">Reservierte Wörter benutzen</h3>
+
+<p>Reservierte Wörter gelten aktuell nur für Bezeichner (vs. Bezeichnernamen). Wie im <a href="http://es5.github.com/#A.1">es5.github.com/#A.1</a> beschrieben ist, sind diese alle Bezeichnernamen welches, bei welchen die Reservierten Wörter nicht ausgenommen sind.</p>
+
+<pre class="brush: js">a.import
+a['import']
+a = { import: 'test' }.
+</pre>
+
+<p>Auf der anderes Seite ist das folgende nicht erlaubt, weil es ein Bezeichner ist, der welcher ein Bezeichnername ohne ein reserviertes Wort ist. Bezeichner werden für Funktionsdeklarationen, Funktionsausdrücke, Variablendeklarationen und so weiter benutzt. Bezeichnernamen werden für Eigenschaftsausdrücke, Aufrufausdrücke und so weiter eingesetzt.</p>
+
+<pre class="brush: js">function import() {} // Illegal.</pre>
+
+<h2 id="Literale">Literale</h2>
+
+<h3 id="Null_Literal">Null Literal</h3>
+
+<p>Sie bei <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a> für mehr Informationen.</p>
+
+<pre class="brush: js">null</pre>
+
+<h3 id="Boolean_Literal">Boolean Literal</h3>
+
+<p>Siehe bei <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean"><code>Boolean</code></a> für mehr Informationen.</p>
+
+<pre class="brush: js">true
+false</pre>
+
+<h3 id="Nummerische_Literale">Nummerische Literale</h3>
+
+<h4 id="Dezimal">Dezimal</h4>
+
+<pre class="brush: js">1234567890
+42
+
+// Vorsicht beim Einsatz von führenden Nullen:
+0888 // 888 parsed as decimal
+0777 // parsed as octal, 511 in decimal
+</pre>
+
+<p>Zu bemerken ist, dass Dezimal Literale mit eine Null (<code>0</code>) starten können gefolgt von anderen Dezimalstellen, aber wenn alle Zifferen nach der führenden <code>0</code> kleiner als <code>8</code> sind, wird die Zahl als Oktalzahl interpretiert. Dieses erzeugt in JavaScript keinen Fehler (siehe {{bug(957513)}}). Sie zudem auch auf der Seite über <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/parseInt#Octal_interpretations_with_no_radix"><code>parseInt()</code></a>.</p>
+
+<h4 id="Binär">Binär</h4>
+
+<p>Die Syntax für Binärzahlen setzt sich aus einer führenden Null gefolgt von einem großen oder kleinen lateinischem Buchstachen "B" (<code>0b</code> oder <code>0B</code>). Weil dieses Syntax in ECMAScript 2015 neu ist, sollte auf die Kompatibilitätstabelle unten geschaut werden. Wenn Ziffern nach <code>0b</code> nicht 0 oder 1 sind, wird folgender <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code> erzeugt: "Missing binary digits after 0b".</p>
+
+<pre class="brush: js">var FLT_SIGNBIT  = 0b10000000000000000000000000000000; // 2147483648
+var FLT_EXPONENT = 0b01111111100000000000000000000000; // 2139095040
+var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607</pre>
+
+<h4 id="Oktal">Oktal</h4>
+
+<p>Die Syntax für Oktalzahlen setzt sich aus einer führenden Null gefolgt von einem großen oder kleinen lateinischem Buchstachen "O" (<code>0o</code> oder <code>0O</code>). Weil dieses Syntax in ECMAScript 2015 neu ist, sollte auf die Kompatibilitätstabelle unten geschaut werden. Wenn Ziffern nach <code>0o</code> außerhalb der Grenzen (01234567) sind, wird folgender <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code> erzeugt: "Missing octal digits after 0o".</p>
+
+<pre class="brush: js">var n = 0O755; // 493
+var m = 0o644; // 420
+
+// Auch mit nur einer führenden Null möglich (siehe dazu die Bemerkung bei den Dezimalzahlen)
+0755
+0644
+</pre>
+
+<h4 id="Hexadezimal">Hexadezimal</h4>
+
+<p>Die Syntax für Hexadezimalahlen setzt sich aus einer führenden Null gefolgt von einem großen oder kleinen lateinischem Buchstachen "X" (<code>0x</code> oder <code>0X</code>). Wenn Ziffern nach <code>0x</code> außerhalb der Grenzen (0123456789ABCDEF) sind, wird folgender <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code> erzeugt: "Identifier starts immediately after numeric literal".</p>
+
+<pre class="brush: js">0xFFFFFFFFFFFFFFFFF // 295147905179352830000
+0x123456789ABCDEF   // 81985529216486900
+0XA                 // 10
+</pre>
+
+<h3 id="Objekt-Literale">Objekt-Literale</h3>
+
+<p>Siehe {{jsxref("Object")}} und <a href="/de/docs/Web/JavaScript/Reference/Operators/Object_initializer">Objektinitialisierer</a> für mehr Informationen.</p>
+
+<pre class="brush: js">var o = { a: 'foo', b: 'bar', c: 42 };
+
+// Kurzschreibweise. Neu in ES2015
+var a = 'foo', b = 'bar', c = 42;
+var o = {a, b, c};
+
+// stattdessen
+var o = { a: a, b: b, c: c };
+</pre>
+
+<h3 id="Array_Literale">Array Literale</h3>
+
+<p>Siehe {{jsxref("Array")}} für mehr Informationen.</p>
+
+<pre class="brush: js">[1954, 1974, 1990, 2014]</pre>
+
+<h3 id="String_Literale">String Literale</h3>
+
+<pre class="brush: js">'foo'
+"bar"</pre>
+
+<h4 id="Hexadezimal_maskierte_Sequenzen">Hexadezimal maskierte Sequenzen</h4>
+
+<p>Hexadezimal maskierte Sequenzen bestehen aus <code>\x</code> gefolgt von exakt zwei Hexadezimalziffern, die eine Codeeinheit oder einen Codepoint in einem Bereich von 0x0000 bis 0x00FF repräsentieren.</p>
+
+<pre class="brush: js">'\xA9' // "©"
+</pre>
+
+<h4 id="Unicode_maskierte_Sequenzen">Unicode maskierte Sequenzen</h4>
+
+<p>Eine Unicode maskierte Sequenz besteht aus genau vier Hexadezimalstellen nach einem <code>\u</code>. Sie bestimmt ein zwei Byte Zeichen in der UTF-16 Kodierung. Für Codepoints zwischen U+0000 und U+FFFF sind die Ziffern identisch mit den Codepoints. Codepoints von U+10000 bis U+10FFFF müssen über zwei maskierte Sequenzen, einem Ersatzpaar, angegeben werden. Das Ersatzpaar unterscheidet sich vom Codepoint.</p>
+
+<p>Siehe dazu auch {{jsxref("String.fromCharCode()")}} und {{jsxref("String.prototype.charCodeAt()")}}.</p>
+
+<pre class="brush: js">'\u00A9' // "©" (U+A9)</pre>
+
+<h4 id="Unicode_Codepointmaskierung">Unicode Codepointmaskierung</h4>
+
+<p>Mit Unicode Codepointmaskierung besteht aus <code>\u{</code> gefolgt von einem Codepoint in hexadezimaler Basis gefolgt von <code>}</code>. Die Werte der Hexadezimalstellen müssen in einem Bereich von 0 und 0x10FFFF inklusiv sein. Codepoints in einem Bereich von U+10000 bis U+10FFFF müssen nicht als Ersatzpaar angegeben werden. Codepointsmaskierung wurde in ECMAScript 2015 (ES6) zu JavaSCript hinzugefügt.</p>
+
+<p>Siehe zudem auch {{jsxref("String.fromCodePoint()")}} und {{jsxref("String.prototype.codePointAt()")}}.</p>
+
+<pre class="brush: js">'\u{2F804}' // <code class="language-js"><span class="comment token">CJK COMPATIBILITY IDEOGRAPH-2F804 (U+2F804)</span></code>
+
+// Das gleiche mit einfache Unicodemaskierung
+'\uD87E\uDC04'</pre>
+
+<h3 id="Reguläre_Ausdrucksliterale">Reguläre Ausdrucksliterale</h3>
+
+<p>Siehe zudem <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/RegExp"><code>RegExp</code></a> für mehr Informationen.</p>
+
+<pre class="brush: js">/ab+c/g
+
+// Ein "leerers" Regulärers Ausdrucksliteral
+// Die leere Gruppe ist notwendig,
+// um einen einzeiligen Kommentar zu verhindern.
+/(?:)/</pre>
+
+<h3 id="Template_Literale">Template Literale</h3>
+
+<p>Siehe zudem <a href="/de/docs/Web/JavaScript/Reference/template_strings">Template Strings</a> für mehr Informationen.</p>
+
+<pre class="brush: js">`string text`
+
+`string text zeile 1
+ string text zeile 2`
+
+`string text ${ausdruck} string text`
+
+tag `string text ${ausdruck} string text`</pre>
+
+<h2 id="Automatisches_Einfügen_von_Semikolons">Automatisches Einfügen von Semikolons</h2>
+
+<p>Eine <a href="/de/docs/Web/JavaScript/Reference/Statements">JavaScript Statements</a> müssen durch ein Semikolon beendet werden, wodurch die automatisches Einfügen von Semikolon (ASI kurz für <em>automatic semicolon insertion</em>) einen Einfluss auf diese hat:</p>
+
+<ul>
+ <li>Leeres Statement</li>
+ <li><code>let</code>, <code>const</code>, Variablen Statements</li>
+ <li><code>import</code>, <code>export</code>, Modul Deklarationen</li>
+ <li>Ausdrucksstatements</li>
+ <li><code>debugger</code></li>
+ <li><code>continue</code>, <code>break</code>, <code>throw</code></li>
+ <li><code>return</code></li>
+</ul>
+
+<p>Die ECMAScript Spezifikation erwähnt <a href="https://tc39.github.io/ecma262/#sec-rules-of-automatic-semicolon-insertion">drei Regeln für automatisches Einfügen von Semikolons</a>.</p>
+
+<p>1. Ein Semikolon wird eingefügt, bevor ein <a href="#">Zeilenumbruch</a> oder "}" angegeben wird, welches nicht von der Grammatik erlaubt ist.</p>
+
+<pre class="brush: js">{ 1 2 } 3
+
+// Wird von ASI in folgendes transformiert
+
+{ 1 2 ;} 3;</pre>
+
+<p>2. Ein Semikolon wird am ende Eingefügt, wenn das Ende der eingehenden Tokens erkannt wurde und der Parser nicht in der Lage ist den Input als ganzes Programm zu erkennen.</p>
+
+<p>Hier wird <code>++</code> nicht als <a href="/de/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Inkrement_()">Postfixoperator</a> für die Variable <code>b</code> erkannt, weil ein Zeilenumbruch zwischen <code>b</code> und <code>++</code> ist.</p>
+
+<pre class="brush: js">a = b
+++c
+
+// Wird von ASI in folgendes transformiert
+
+a = b;
+++c;
+</pre>
+
+<p>3. Ein Semikolon wird am Ende eingefügt, wenn auf eine Anweisung mit eingeschränkten Produktionen in der Grammatik ein Zeilenabschlusszeichen folgt. Diese Anweisungen mit "no LineTerminator here"-Regeln lauten:</p>
+
+<ul>
+ <li>Postfixausdrücke (<code>++</code> und <code>--</code>)</li>
+ <li><code>continue</code></li>
+ <li><code>break</code></li>
+ <li><code>return</code></li>
+ <li><code>yield</code>, <code>yield*</code></li>
+ <li><code>module</code></li>
+</ul>
+
+<pre class="brush: js">return
+a + b
+
+// Wird von ASI in folgendes transformiert
+
+return;
+a + b;
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2("ES1")}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-7', 'Lexical Conventions')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-ecmascript-language-lexical-grammar', 'Lexical Grammar')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Hinzugefügt: Binäre und Oktal Zahlenliterale, Unicode Codepoint-Maskierung, Templates</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-ecmascript-language-lexical-grammar', 'Lexical Grammar')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.grammar")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="http://whereswalden.com/2013/08/12/micro-feature-from-es6-now-in-firefox-aurora-and-nightly-binary-and-octal-numbers/">Jeff Walden: Binary and octal numbers</a></li>
+ <li><a href="http://mathiasbynens.be/notes/javascript-escapes">Mathias Bynens: JavaScript character escape sequences</a></li>
+ <li>{{jsxref("Boolean")}}</li>
+ <li>{{jsxref("Number")}}</li>
+ <li>{{jsxref("RegExp")}}</li>
+ <li>{{jsxref("String")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/operators/addition/index.html b/files/de/web/javascript/reference/operators/addition/index.html
new file mode 100644
index 0000000000..6f95df95d1
--- /dev/null
+++ b/files/de/web/javascript/reference/operators/addition/index.html
@@ -0,0 +1,82 @@
+---
+title: Addition (+)
+slug: Web/JavaScript/Reference/Operators/Addition
+tags:
+  - JavaScript
+  - Operator
+  - Referenz
+  - Sprachfeature
+translation_of: Web/JavaScript/Reference/Operators/Addition
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Der Addition-Operator (<code>+</code>) erzeugt die Summe nummerischer Operanden oder setzt Zeichenketten zusammen.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-addition.html")}}</div>
+
+<div></div>
+
+<p class="hidden">Der Quellcode dieses interaktiven Beispiels, befindet sich in einem GitHub Repository. Wenn Sie zum Projekt für diese interaktiven Beispiele beitragen möchten, clonen Sie sich bitte das Projekt mittels <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und schicken Sie uns einen Pull-Request.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate"><strong>Operator:</strong> <var>x</var> + <var>y</var>
+</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Nummerische_Addition_Summe">Nummerische Addition (Summe)</h3>
+
+<pre class="brush: js notranslate">// Nummer + Nummer -&gt; Addition (Summe)
+1 + 2 // 3
+
+// Boolean + Nummer -&gt; Addition (Summe, da true = 1)
+true + 1 // 2
+
+// Boolean + Boolean -&gt; Addition (Summe, da false = 0)
+false + false // 0
+</pre>
+
+<h3 id="Zeichenkettenzusammensetzung">Zeichenkettenzusammensetzung</h3>
+
+<pre class="brush: js notranslate">// String (Zeichenkette) + String (Zeichenkette) -&gt; Zusammensetzung
+'foo' + 'bar' // "foobar"
+
+// Nummer + String (Zeichenkette) -&gt; Zusammensetzung
+5 + 'foo' // "5foo"
+
+// String (Zeichenkette) + Boolean -&gt; Zusammensetzung
+'foo' + false // "foofalse"</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-addition-operator-plus', 'Addition Operator')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wurde aus strukturierten Daten erzeugt. Wenn Sie zu den Daten beitragen möchten, checken Sie bitte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> aus und schicken Sie uns einen Pull-Request.</div>
+
+<p>{{Compat("javascript.operators.addition")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Subtraction">Subtraktion-Operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Division">Division-Operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Multiplication">Multiplikation-Operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder">Rest-Operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Exponentiation">Potenzierung-Operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Increment">Inkrement (Erhöhung) Operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Decrement">Dekrement (Verringern) Operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_negation">Einstellige Negation Operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_plus">Einstelliger Plus operator</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/operators/array_comprehensions/index.html b/files/de/web/javascript/reference/operators/array_comprehensions/index.html
new file mode 100644
index 0000000000..a7d34cc1ea
--- /dev/null
+++ b/files/de/web/javascript/reference/operators/array_comprehensions/index.html
@@ -0,0 +1,200 @@
+---
+title: Array Comprehensions
+slug: Web/JavaScript/Reference/Operators/Array_comprehensions
+tags:
+  - JavaScript
+  - Non-standard
+  - Operator
+  - Reference
+translation_of: Archive/Web/JavaScript/Array_comprehensions
+---
+<div class="warning"><strong>Nicht standardisiert. Nicht einsetzen!</strong><br>
+Die Array Comprehensions Syntax ist nicht Standardisiert und wurde mit Firefox 58 entfernt. Zukünftig müssen {{jsxref("Array.prototype.map")}}, {{jsxref("Array.prototype.filter")}}, {{jsxref("Functions/Arrow_functions", "Pfeilfunktionen", "", 1)}}, und {{jsxref("Operators/Spread_operator", "Spread Syntax", "", 1)}} eingesetzt werden.</div>
+
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Die <strong>Array Comprehensions</strong> Syntax war ein JavaScript Ausdruck, welcher es erlaubt schnell ein neues Array auf Basis eines existierenden zu erstellen. Jedoch wurde diese vom Standard und der Firefox Implementierung entfernt. Nicht mehr einsetzen!</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">[for (x of iterable) x]
+[for (x of iterable) if (condition) x]
+[for (x of iterable) for (y of iterable) x + y]
+</pre>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>In Array Comprehensions können zwei Arten von Komponenten eingesetzt werden:</p>
+
+<ul>
+ <li>{{jsxref("Statements/for...of", "for...of")}} und</li>
+ <li>{{jsxref("Statements/if...else", "if")}}</li>
+</ul>
+
+<p>Der <code>for-of</code> Iterator ist immer die erste Komponente. Mehrere <code>for-of</code> Iteratoren oder <code>if</code> Statements sind erlaubt.</p>
+
+<p>Array Comprehension wurden zuvor für den ECMAScript 2016 Standard vorgeschlagen und ist eine nützliche Kurzform zum Erstellen von neuen Arrays auf Basis des Inhalts andere.Comprehensions können oft statt den Aufrufen {{jsxref("Array.prototype.map", "map()")}} und {{jsxref("Array.prototype.filter", "filter()")}} eingesetzt werden oder als Möglichkeit beide zu kombinieren.</p>
+
+<p>Die folgende Comprehension nimmt ein Array von Zahlen und erstellt ein neues Array, dass das Doppelte jeder Zahl enthält.</p>
+
+<pre class="brush: js">var numbers = [1, 2, 3, 4];
+var doubled = [for (i of numbers) i * 2];
+console.log(doubled); // logs 2,4,6,8
+</pre>
+
+<p>Das ist äquivalent zu der folgenden {{jsxref("Array.prototype.map", "map()")}} Operation:</p>
+
+<pre class="brush: js">var doubled = numbers.map(i =&gt; i * 2);
+</pre>
+
+<p>Comprehensions können ebenfalls für das suchen bestimmter Elemente eingesetzt werden. Hier ist eine Comprehension welche nur gerade Zahlen auswählt:</p>
+
+<pre class="brush: js">var numbers = [1, 2, 3, 21, 22, 30];
+var evens = [for (i of numbers) if (i % 2 === 0) i];
+console.log(evens); // logs 2,22,30
+</pre>
+
+<p>{{jsxref("Array.prototype.filter", "filter()")}} kann mit dem gleichen Ergebnis benutzt werden:</p>
+
+<pre class="brush: js">var evens = numbers.filter(i =&gt; i % 2 === 0);
+</pre>
+
+<p>{{jsxref("Array.prototype.map", "map()")}} und {{jsxref("Array.prototype.filter", "filter()")}} Operation können in einer einzigen Array Comprehension kombiniert werden. Hier ist ein Beispiel, welches auf gerade Zahlen filtert und diese dann verdopelt:</p>
+
+<pre class="brush: js">var numbers = [1, 2, 3, 21, 22, 30];
+var doubledEvens = [for (i of numbers) if (i % 2 === 0) i * 2];
+console.log(doubledEvens); // logs 4,44,60
+</pre>
+
+<p><span id="result_box" lang="de"><span>Die eckigen Klammern einer Array </span></span>Comprehension<span lang="de"><span> führen einen impliziten Block für Gültigkeitsbereiche ein. Neue Variablen (wie i im Beispiel) werden so behandelt, als währen sie mit </span></span>{{jsxref("Statements/let","let")}} deklariert. Das bedeutet, dass sie nicht außerhalb der Comprehension sichtbar sind.</p>
+
+<p>Der Input einer Array Comprehension muss nicht selbst ein Array sein; <a href="/de/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iteratoren und Generatoren</a> könne ebenfalls benutzt werden.</p>
+
+<p>Auch Strings können als Input genutzt werden;</p>
+
+<p>Even strings may be used as input; <span id="result_box" lang="de"><span>um die Filter- und Map-Aktionen (unter Array-ähnlichen Objekten) oben zu erreichen:</span></span></p>
+
+<pre class="brush: js">var str = 'abcdef';
+var consonantsOnlyStr = [for (c of str) if (!(/[aeiouAEIOU]/).test(c)) c].join(''); // 'bcdf'
+var interpolatedZeros = [for (c of str) c + '0' ].join(''); // 'a0b0c0d0e0f0'
+</pre>
+
+<p>Auch hier wird das Eingabeformat nicht beibehalten, so dass man {{jsxref("Array.prototype.join", "join()")}} benutzen muss, um wieder einen String zu bekommen.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einfache_Array_Comprehensions">Einfache Array Comprehensions</h3>
+
+<pre class="brush:js">[for (i of [1, 2, 3]) i * i ];
+// [1, 4, 9]
+
+var abc = ['A', 'B', 'C'];
+[for (letters of abc) letters.toLowerCase()];
+// ["a", "b", "c"]</pre>
+
+<h3 id="Array_Comprehensions_mit_if_Statement">Array Comprehensions mit if Statement</h3>
+
+<pre class="brush: js">var years = [1954, 1974, 1990, 2006, 2010, 2014];
+[for (year of years) if (year &gt; 2000) year];
+// [2006, 2010, 2014]
+[for (year of years) if (year &gt; 2000) if (year &lt; 2010) year];
+// [2006], the same as below:
+[for (year of years) if (year &gt; 2000 &amp;&amp; year &lt; 2010) year];
+// [2006]
+</pre>
+
+<h3 id="Array_Comprehensions_verglichen_zu_map_und_filter">Array Comprehensions verglichen zu <code>map</code> und <code>filter</code></h3>
+
+<p>Ein einfacher Weg um Generator Comprehension Syntax zu verstehen ist es sie mit den Array {{jsxref("Array.map", "map")}} und {{jsxref("Array.filter", "filter")}} Methoden zu vergleichen:</p>
+
+<pre class="brush: js">var numbers = [1, 2, 3];
+
+numbers.map(function (i) { return i * i });
+numbers.map(i =&gt; i * i);
+[for (i of numbers) i * i];
+// all are [1, 4, 9]
+
+numbers.filter(function (i) { return i &lt; 3 });
+numbers.filter(i =&gt; i &lt; 3);
+[for (i of numbers) if (i &lt; 3) i];
+// all are [1, 2]
+</pre>
+
+<h3 id="Array_Comprehensions_mit_zwei_Arrays">Array Comprehensions mit zwei Arrays</h3>
+
+<p>Einsatz von zwei for-of Iteratoren, um mit Arrays zu arbeiten:</p>
+
+<pre class="brush: js">var numbers = [1, 2, 3];
+var letters = ['a', 'b', 'c'];
+
+var cross = [for (i of numbers) for (j of letters) i + j];
+// ["1a", "1b", "1c", "2a", "2b", "2c", "3a", "3b", "3c"]
+
+var grid = [for (i of numbers) [for (j of letters) i + j]];
+// [
+//  ["1a", "1b", "1c"],
+//  ["2a", "2b", "2c"],
+//  ["3a", "3b", "3c"]
+// ]
+
+[for (i of numbers) if (i &gt; 1) for (j of letters) if(j &gt; 'a') i + j]
+// ["2b", "2c", "3b", "3c"], the same as below:
+
+[for (i of numbers) for (j of letters) if (i &gt; 1) if(j &gt; 'a') i + j]
+// ["2b", "2c", "3b", "3c"]
+
+[for (i of numbers) if (i &gt; 1) [for (j of letters) if(j &gt; 'a') i + j]]
+// [["2b", "2c"], ["3b", "3c"]], not the same as below:
+
+[for (i of numbers) [for (j of letters) if (i &gt; 1) if(j &gt; 'a') i + j]]
+// [[], ["2b", "2c"], ["3b", "3c"]]
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>War initial im ECMAScript 2015 Entwurf, wurde jedoch in der Überarbeitung 27 (August 2014) entfernt. Für Spezifikationssemantik muss in älteren Überarbeitungen von ES2015 nachgeschaut werden.</p>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.operators.array_comprehensions")}}</p>
+
+<h2 id="Unterschiede_zu_den_älteren_JS1.7JS1.8_Comprehensions">Unterschiede zu den älteren JS1.7/JS1.8 Comprehensions</h2>
+
+<div class="warning">JS1.7/JS1.8 Comprehensions wurden von Gecko 46 entfernt ({{bug(1220564)}}).</div>
+
+<p><strong>Alte Comprehensions Syntax (nicht mehr benutzen!):</strong></p>
+
+<pre class="brush: js example-bad">[X for (Y in Z)]
+[X for each (Y in Z)]
+[X for (Y of Z)]
+</pre>
+
+<p>Unterschiede:</p>
+
+<ul>
+ <li>ESNext Comprehensions erstellen einen Gültigkeitsbereich pro "for" Statement statt einen für die komplette Comprehension.
+  <ul>
+   <li>Alt: <code>[...(()=&gt;x for (x of [0, 1, 2]))][1]() // 2</code></li>
+   <li>Neu: <code>[...(for (x of [0, 1, 2]) ()=&gt;x)][1]() // 1, jede Iteration erstellt eine frische Bindung zu x. </code></li>
+  </ul>
+ </li>
+ <li>ESNext Comprehensions beginnen mit "for" statt eines Zuweisungsausdrucks.
+  <ul>
+   <li>Alt: <code>(i * 2 for (i of numbers))</code></li>
+   <li>Neu: <code>(for (i of numbers) i * 2)</code></li>
+  </ul>
+ </li>
+ <li>ESNext Comprehensions können mehrere <code>if</code> und <code>for</code> Komponenten haben.</li>
+ <li>ESNext Comprehensions funktionieren nur mit <code>{{jsxref("Statements/for...of", "for...of")}}</code> und nicht mit <code>{{jsxref("Statements/for...in", "for...in")}}</code> Iteration.</li>
+</ul>
+
+<p>Siehe <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1220564#c42">Bug 1220564, Kommentar 42</a> für Vorschläge zum Aktualisieren von Code.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Statements/for...of", "for...of")}}</li>
+ <li>{{jsxref("Operators/Generator_comprehensions", "Generator Comprehensions", "" ,1)}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/operators/async_function/index.html b/files/de/web/javascript/reference/operators/async_function/index.html
new file mode 100644
index 0000000000..906f82dbcb
--- /dev/null
+++ b/files/de/web/javascript/reference/operators/async_function/index.html
@@ -0,0 +1,107 @@
+---
+title: async function Ausdruck
+slug: Web/JavaScript/Reference/Operators/async_function
+tags:
+  - Experimental
+  - Function
+  - JavaScript
+  - Operator
+  - Primary Expression
+translation_of: Web/JavaScript/Reference/Operators/async_function
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Das <strong><code>async function</code></strong> Schlüsselwort kann benutzt werden, um <code>async</code> Funktionen in Ausdrücken zu benutzen.</p>
+
+<p>Man kann asynchrone Funktionen auch mit einem <a href="/de/docs/Web/JavaScript/Reference/Statements/async_function" title="The async function keyword can be used to define async functions inside expressions.">async Funktionsstatement</a> definieren.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">async function [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) {
+   <em>statements</em>
+}</pre>
+
+<p>Seit ES2015 kann man auch <a href="/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Pfeilfunktionen</a> benutzen.</p>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Der Funktionsname. Kann weggelassen werden, wenn die Funktion anonym ist. Der Name ist nur lokal im Funktionsrumpf erreichbar.</dd>
+ <dt><code>paramN</code></dt>
+ <dd>Der Name eines Arguments, welches der Funktion übergeben wird.</dd>
+ <dt><code>statements</code></dt>
+ <dd>Die Statements, welche den Funktionsrumpf definieren.</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Ein <code>async function</code> Ausdruck ist sehr ähnlich zu {{jsxref('Statements/async_function', 'async Funktionsstatements')}} und haben fast die selbe Syntax. Der Hauptunterschied zwischen einem <code>async</code> Funktionsausdruck und einem <code>async</code> Funktionsstatement ist der Funktionsname, welcher bei <code>async</code> Funktionsausdrücken weggelassen werden kann, um anonyme Funktionen zu erstellen. Ein <code>async</code> Funktionsausdruck kann als {{Glossary("IIFE")}} (Immediately Invoked Function Expression) genutzt werden, welche Ausgeführt werden, nachdem sie definiert wurde. Mehr Informationen dazu gibt es im Kapitel über <a href="/en-US/docs/Web/JavaScript/Reference/Functions">Funktionen</a>.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einfaches_Beispiel">Einfaches Beispiel</h3>
+
+<pre class="brush: js">function resolveAfter2Seconds(x) {
+  return new Promise(resolve =&gt; {
+    setTimeout(() =&gt; {
+      resolve(x);
+    }, 2000);
+  });
+};
+
+
+var add = async function(x) { // async function expression assigned to a variable
+  var a = await resolveAfter2Seconds(20);
+  var b = await resolveAfter2Seconds(30);
+  return x + a + b;
+};
+
+add(10).then(v =&gt; {
+  console.log(v);  // prints 60 after 4 seconds.
+});
+
+
+(async function(x) { // async function expression used as an IIFE
+  var p_a = resolveAfter2Seconds(20);
+  var p_b = resolveAfter2Seconds(30);
+  return x + await p_a + await p_b;
+})(10).then(v =&gt; {
+  console.log(v);  // prints 60 after 2 seconds.
+});
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Initiale Definition in ES2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.operators.async_function_expression")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Statements/async_function", "async function")}}</li>
+ <li>{{jsxref("AsyncFunction")}} Objekt</li>
+ <li>{{jsxref("Operators/await", "await")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/operators/await/index.html b/files/de/web/javascript/reference/operators/await/index.html
new file mode 100644
index 0000000000..6684cb195c
--- /dev/null
+++ b/files/de/web/javascript/reference/operators/await/index.html
@@ -0,0 +1,112 @@
+---
+title: await
+slug: Web/JavaScript/Reference/Operators/await
+tags:
+  - Experimental
+  - JavaScript
+  - Operator
+translation_of: Web/JavaScript/Reference/Operators/await
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Der <code>await</code> Operator wird genutzt, um auf einen {{jsxref("Promise")}} zu warten. Er kann nur in einer {{jsxref("Statements/async_function", "async Funktion")}} benutzt werden.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">[<em>rv</em>] = await <em>expression</em>;</pre>
+
+<dl>
+ <dt><code>expression</code></dt>
+ <dd>Ein {{jsxref("Promise")}} oder jeder Wert, auf den gewartet wird.</dd>
+ <dt><code>rv</code></dt>
+ <dd>
+ <p>Gibt den ermittelten Wert des <code>Promise</code> zurück, oder den Wert selbst, wenn es sich nicht um ein <code>Promise</code> handelt.</p>
+ </dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Der <code>await</code> Ausdruck lässt <code>async</code> Funktionen pausieren, bis ein <code>Promise</code> erfüllt oder abgewiesen ist, und führt die <code>async</code> danach weiter aus. Wenn die Funktion weiter ausgeführt wird, ist der Wert des <code>await</code> Ausdrucks der Wert des erfüllten <code>Promise</code>.</p>
+
+<p>Wenn das <code>Promise</code> abgewiesen wird, wirft der <code>await</code> Ausdruck eine Exception mit dem zurückgewiesenen Wert.</p>
+
+<p>Ist der Wert des Ausdrucks, der auf den <code>await</code> Operator folgt, kein <code>Promise</code> ist, wird dieser zu einem <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve">erfüllten Promise</a> konvertiert.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Wenn ein <code>Promise</code> im <code>await</code> Ausdruck genutzt wird, wartet dieser, bis das <code>Promise</code> fertig ist und gibt den ermittelten Wert zurück.</p>
+
+<pre class="brush: js">function resolveAfter2Seconds(x) {
+  return new Promise(resolve =&gt; {
+    setTimeout(() =&gt; {
+      resolve(x);
+    }, 2000);
+  });
+}
+
+async function f1() {
+  var x = await resolveAfter2Seconds(10);
+  console.log(x); // 10
+}
+f1();
+</pre>
+
+<p>Wenn der Wert kein <code>Promise</code> ist, wird dieser zu einem erfüllten <code>Promise</code> konvertiert und dessen Wert zurückgegeben.</p>
+
+<pre class="brush: js">async function f2() {
+  var y = await 20;
+  console.log(y); // 20
+}
+f2();</pre>
+
+<p>Wird ein <code>Promise</code> abgewiesen, so wird eine Exception mit dem zurückgewiesene Wert geworfen.</p>
+
+<pre class="brush: js">async function f3() {
+  try {
+    var z = await Promise.reject(30);
+  } catch(e) {
+    console.log(e); // 30
+  }
+}
+f3();</pre>
+
+<p>Abfangen von abgewiesenen <code>Promise</code>s ohne try-Block.</p>
+
+<pre class="brush: js">var response = await promisedFunction().catch((err) =&gt; { console.log(err); });
+// response will be undefined if the promise is rejected
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-async-function-definitions', 'async functions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Initiale Definition in ES2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.operators.await")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Statements/async_function", "async Funktion")}}</li>
+ <li>{{jsxref("Operators/async_function", "async Funktionsausdruck")}}</li>
+ <li>{{jsxref("AsyncFunction")}} Objekt</li>
+</ul>
diff --git a/files/de/web/javascript/reference/operators/bitwise_operatoren/index.html b/files/de/web/javascript/reference/operators/bitwise_operatoren/index.html
new file mode 100644
index 0000000000..01b1ed5712
--- /dev/null
+++ b/files/de/web/javascript/reference/operators/bitwise_operatoren/index.html
@@ -0,0 +1,574 @@
+---
+title: Bitweise Operatoren
+slug: Web/JavaScript/Reference/Operators/Bitwise_Operatoren
+tags:
+  - JavaScript
+  - Operator
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>Bitweise Operatoren </strong>werden auf Sequenzen aus 32 bit (Nullen und Einsen) angewandt im Gegensatz zu Operatoren, die mit Dezimal-, Hexadezimal- oder Oktalzahlen (<code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Number">numbers</a></code>) arbeiten. Beispielsweise hat die Dezimalzahl neun die binäre Darstellung 1001. Auch wenn Bitweise Operatoren mit Binärdarstellungen arbeiten, sind deren Ausgabewerte Javascript Standardzahlenwerte.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-bitwiseoperators.html")}}</div>
+
+
+
+<p>Die folgende Tabelle fasst Javascripts Bitweise Operatoren zusammen:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Operator</th>
+   <th>Einsatz</th>
+   <th>Beschreibung</th>
+  </tr>
+  <tr>
+   <td><a href="#Bitwise_AND">Bitweises UND</a></td>
+   <td><code>a &amp; b</code></td>
+   <td>Gibt <code>1</code> in jeder Bit Position zurück, an welcher beide Operanden <code>1</code> sind.</td>
+  </tr>
+  <tr>
+   <td><a href="#Bitwise_OR">Bitweises ODER</a></td>
+   <td><code>a | b</code></td>
+   <td>Gibt <code>1</code> in jeder Bit Position zurück, an welcher einer oder beide Operanden <code>1</code> sind.</td>
+  </tr>
+  <tr>
+   <td><a href="#Bitwise_XOR">Bitweises XOR</a></td>
+   <td><code>a ^ b</code></td>
+   <td>Gibt <code>1</code> in jeder Bit Position zurück, an welcher einer aber nicht beide Operanden <code>1</code> sind.</td>
+  </tr>
+  <tr>
+   <td><a href="#Bitwise_NOT">Bitweise Negation</a></td>
+   <td><code>~ a</code></td>
+   <td>Invertiert die Bits des Operanden</td>
+  </tr>
+  <tr>
+   <td><a href="#Left_shift">Linksverschiebung</a></td>
+   <td><code>a &lt;&lt; b</code></td>
+   <td>Verschiebt <code>a</code> in binärer Repräsentation <code>b</code> (&lt; 32) Bits nach links, von Rechts werden Nullen hereingeschoben.</td>
+  </tr>
+  <tr>
+   <td><a href="#Right_shift">Vorzeichen propagierende Rechtsverschiebung</a></td>
+   <td><code>a &gt;&gt; b</code></td>
+   <td>Verschiebt <code>a</code> in binärer Repräsentation <code>b</code> (&lt; 32) Bits nach rechts, herausgeschobene Bits werden verworfen.</td>
+  </tr>
+  <tr>
+   <td><a href="#Unsigned_right_shift">Null füllende Rechtsverschiebung</a></td>
+   <td><code>a &gt;&gt;&gt; b</code></td>
+   <td>Verschiebt <code>a</code> in binärer Repräsentation <code>b</code> (&lt; 32) Bits nach rechts, herausgeschobene Bits werden verworfen und Nullen werden von links hereingeschoben.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Vorzeichenbehaftete_32-Bit_Integer">Vorzeichenbehaftete 32-Bit Integer</h2>
+
+<p>Die Operanden aller Bitweisen Operationen werden in vorzeichenbehaftete 32-Bit Integer im Zweierkomplementformat konvertiert. Zweierkomplementformat bedeutet, dass das Gegenstück einer negative Zahl alle Bits invertiert (Bitweise Negation einer Zahl oder auch Einerkomplement einer Zahl) plus eins ist. Zum Beispiel die codierte Integer 314:</p>
+
+<pre class="brush: js">00000000000000000000000100111010
+</pre>
+
+<p>Im Folgenden ist <code>~314</code> codiert, d. h. das Einerkomplement von <code>314</code>:</p>
+
+<pre class="brush: js">11111111111111111111111011000101
+</pre>
+
+<p>Anschließend wird <code>-314</code> codiert, d. h. das Zweierkomplement <code>314</code>:</p>
+
+<pre class="brush: js">11111111111111111111111011000110
+</pre>
+
+<p>Das Zweierkomplement garantiert, dass das Bit ganz links 0 ist, wenn die Zahl Positiv ist und 1 ist, wenn die Zahl negativ ist. Dieses wird das Vorzeichenbit genannt.</p>
+
+<p>Die Zahl <code>0</code> ist ein Integer, der komplett aus 0 Bits besteht.</p>
+
+<pre class="brush: js">0 (base 10) = 00000000000000000000000000000000 (base 2)
+</pre>
+
+<p>Die Zahl <code>-1</code> ist ein Integer der komplett aus 1 Bits besteht.</p>
+
+<pre class="brush: js">-1 (base 10) = 11111111111111111111111111111111 (base 2)
+</pre>
+
+<p>Die Zahl <code>-2147483648</code> (hexadezimale Repräsentation: <code>-0x80000000</code>) ist der Integer, welcher komplett aus 0 Bits besteht, außer dem ersten Bit (linkes Bit).</p>
+
+<pre class="brush: js">-2147483648 (base 10) = 10000000000000000000000000000000 (base 2)
+</pre>
+
+<p>Die Zahl <code>2147483647</code> (hexadezimale Repräsentation: <code>-0x7fffffff</code>) ist der Integer, welcher komplett aus 1 Bits besteht, außer dem ersten Bit (linkes Bit).</p>
+
+<pre class="brush: js">2147483647 (base 10) = 01111111111111111111111111111111 (base 2)
+</pre>
+
+<p>Die Zahlen <code>-2147483648</code> und <code>2147483647</code> sind die minimalen und Maximalen Integers, die mit 32-Bit vorzeichenbehafteten Zahlen repräsentiert werden können.</p>
+
+<h2 id="Bitweise_logische_Operatoren">Bitweise logische Operatoren</h2>
+
+<p>Konzeptionell arbeiten die bitweisen logischen Operatoren wie folgt:</p>
+
+<ul>
+ <li>Die Operanden werden in 32-Bit Integer konvertiert und als Serie von Bits (null und eins) ausgedrückt. Bei Zahlen mit mehr als 32 Bits, werden die höchstwertigen Bits verworfen. Zum Beispiel wird der folgende Integer mit mehr als 32 Bits zu einem 32 Bit Integer konvertiert::
+  <pre class="brush: js">Vorher:   11100110111110100000000000000110000000000001
+Nachher:              10100000000000000110000000000001</pre>
+ </li>
+ <li>Jedes Bit im ersten Operanden wird mit dem korrespondierenden Bit im zweiten Operanden gepaart: erstes Bit zu erstem, zweites Bit zu zweitem Bit, und so weiter.</li>
+ <li>Der Operator wird auf jedem Bitpaar angewendet und das Ergebnis wird Bitweise konstruiert.</li>
+</ul>
+
+<h3 id="(Bitweises_UND)"><a name="Bitwise_AND">&amp; (Bitweises UND)</a></h3>
+
+<p>Führt die UND Operation auf jedem Bitpaar durch. <code>a</code> UND <code>b</code> ergibt <code>1</code>, wenn beide <code>a</code> und <code>b</code> <code>1</code> sind. Die Wahrheitstabelle für den UND Operator ist:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">a</td>
+   <td class="header">b</td>
+   <td class="header">a UND b</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>1</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>0</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>1</td>
+   <td>1</td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: js">.    9 (Basis 10) = 00000000000000000000000000001001 (Basis 2)
+    14 (Basis 10) = 00000000000000000000000000001110 (Basis 2)
+                    --------------------------------
+14 &amp; 9 (Basis 10) = 00000000000000000000000000001000 (Basis 2) = 8 (Basis 10)
+</pre>
+
+<p>Bitweises verUNDen jeder Zahl <code>x</code> mit <code>0</code> ergibt <code>0</code>. Bitweises verUNDen jeder Zahl <code>x</code> mit <code>-1</code> ergibt <code>x</code>.</p>
+
+<h3 id="(Bitweises_ODER)"><a name="Bitwise_OR">| (Bitweises ODER)</a></h3>
+
+<p>Führt die ODER Operation auf jedem Bitpaar durch. <code>a</code> ODER <code>b</code> ergibt <code>1</code>, wenn einer, <code>a</code> oder <code>b</code>, <code>1</code> sind. Die Wahrheitstabelle für den ODER Operator ist:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">a</td>
+   <td class="header">b</td>
+   <td class="header">a ODER b</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>1</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>0</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>1</td>
+   <td>1</td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: js">.    9 (Basis 10) = 00000000000000000000000000001001 (Basis 2)
+    14 (Basis 10) = 00000000000000000000000000001110 (Basis 2)
+                    --------------------------------
+14 | 9 (Basis 10) = 00000000000000000000000000001111 (Basis 2) = 15 (Basis 10)
+</pre>
+
+<p>Bitweises verODERn jeder Zahl <code>x</code> mit <code>0</code> ergibt <code>x</code>. Bitweises verODERn jeder Zahl <code>x</code> mit <code>-1</code> ergibt <code>-1</code>.</p>
+
+<h3 id="(Bitweises_XOR)"><a name="Bitwise_XOR">^ (Bitweises XOR)</a></h3>
+
+<p>Führt die XOR Operation auf jedem Bitpaar durch. <code>a</code> XOR <code>b</code> ergibt <code>1</code>, wenn sich <code>a</code> und <code>b</code>, unterscheiden. Die Wahrheitstabelle für den XOR Operator ist:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">a</td>
+   <td class="header">b</td>
+   <td class="header">a XOR b</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>1</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>0</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>1</td>
+   <td>0</td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: js">.    9 (Basis 10) = 00000000000000000000000000001001 (Basis 2)
+    14 (Basis 10) = 00000000000000000000000000001110 (Basis 2)
+                    --------------------------------
+14 ^ 9 (Basis 10) = 00000000000000000000000000000111 (Basis 2) = 7 (Basis 10)
+</pre>
+
+<p>Bitweises verXORn jeder Zahl <code>x</code> mit <code>0</code> ergibt <code>x</code>. Bitweises verXORn jeder Zahl <code>x</code> mit <code>-1</code> ergibt <code>~x</code>.</p>
+
+<h3 id="(Bitweise_Negation)"><a name="Bitwise_NOT">~ (Bitweise Negation)</a></h3>
+
+<p>Führt die Negationsoperation auf jedem Bit durch. NICHT <code>a</code> ergibt ergibt den invertierten Wert (d. h. das Einerkomplement) von <code>a</code>. Die Wahrheitstabelle für den Negationsoperator ist:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">a</td>
+   <td class="header">NICHT a</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>0</td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: js"> 9 (Basis 10) = 00000000000000000000000000001001 (Basis 2)
+                --------------------------------
+~9 (Basis 10) = 11111111111111111111111111110110 (Basis 2) = -10 (Basis 10)
+</pre>
+
+<p>Bitweises Negieren jeder Zahl <code>x</code> ergibt <code>-(x + 1)</code>. Zum Beispiel ergibt <code>~-5</code> <code>4</code>.</p>
+
+<p>Beispiel mit <code>indexOf</code>:</p>
+
+<pre class="brush: js">var str = 'rawr';
+var searchFor = 'a';
+
+// Das ist eine alternativer Weg um if (-1*str.indexOf('a') &lt;= 0) zu tippen
+if (~str.indexOf(searchFor)) {
+  // searchFor is in the string
+} else {
+  // searchFor is not in the string
+}
+
+// Hier die Werte, die von (~str.indexOf(searchFor)) zurück gegeben werden
+// r == -1
+// a == -2
+// w == -3
+</pre>
+
+<h2 id="Bitweise_Verschiebeoperatoren">Bitweise Verschiebeoperatoren</h2>
+
+<p>Die bitweisen Verschiebeoperatoren (shift Operatoren) haben zwei Operanden: Der erste ist der Anteil, der verschoben werden soll und der zweite ist die Anzahl der Positionen, um die der erste Operand verschoben werden soll. Die Richtung der Verschiebung wird durch den eingesetzten Operator festgelegt.</p>
+
+<p>Verschiebeoperatoren konvertieren ihre Operanden in 32-Bit Integers in Bit-Endian Reihenfolge und geben als Resultat den gleichen Typ des linken Operanden zurück. Der rechte Operand sollte kleiner als 32 sein, aber wenn das nicht so ist, werden nur die kleinsten fünf Bits verwendet.</p>
+
+<h3 id="&lt;&lt;_(Linksverschiebung)"><a name="Left_shift">&lt;&lt; (Linksverschiebung)</a></h3>
+
+<p>Dieser Operator verschiebt den ersten Operand um die spezifizierte Anzahl von Bits nach links. Überflüssige Bits, die nach links verschoben wurden, werden verworfen. Von rechts wird mit 0-Bits aufgefüllt.</p>
+
+<p>Zum Beispiel ergibt <code>9 &lt;&lt; 2</code> <code>36</code>:</p>
+
+<pre class="brush: js">.    9 (Basis 10): 00000000000000000000000000001001 (Basis 2)
+                   --------------------------------
+9 &lt;&lt; 2 (Basis 10): 00000000000000000000000000100100 (Basis 2) = 36 (Basis 10)
+</pre>
+
+<p>Bitweises Verschieben jeder Zahl <code>x</code> nach links mit <code>y</code> Bits ergibt <code>x * 2 ** y</code>.</p>
+
+<h3 id=">>_(Vorzeichen_propagierende_Rechtsverschiebung)"><a name="Right_shift">&gt;&gt; (Vorzeichen propagierende Rechtsverschiebung)</a></h3>
+
+<p>Dieser Operator verschiebt den ersten Operand um die spezifizierte Anzahl von Bits nach rechts. Überflüssige Bits, die nach rechts verschoben wurden, werden verworfen. Kopien des linken Bits (Vorzeichenbits) werden von links hereingeschoben. Weil das neue Vorzeichenbit immer das selbe wie das alte Vorzeichenbit ist, ändert sich das linke Bit nicht. Daher kommt der Name "Vorzeichen propagierend" her.</p>
+
+<p>Zum Beispiel ergibt <code>9 &gt;&gt; 2</code> <code>2</code>:</p>
+
+<pre class="brush: js">.    9 (base 10): 00000000000000000000000000001001 (base 2)
+                  --------------------------------
+9 &gt;&gt; 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10)
+</pre>
+
+<p>Likewise, <code>-9 &gt;&gt; 2</code> yields <code>-3</code>, because the sign is preserved:</p>
+
+<pre class="brush: js">.    -9 (Basis 10): 11111111111111111111111111110111 (Basis 2)
+                    --------------------------------
+-9 &gt;&gt; 2 (Basis 10): 11111111111111111111111111111101 (Basis 2) = -3 (Basis 10)
+</pre>
+
+<h3 id=">>>_(Null_füllende_Rechtsverschiebung)"><a name="Unsigned_right_shift">&gt;&gt;&gt; (Null füllende Rechtsverschiebung)</a></h3>
+
+<p>Dieser Operator verschiebt den ersten Operand um die spezifizierte Anzahl von Bits nach rechts. Überflüssige Bits, die nach rechts verschoben wurden, werden verworfen. Von link wird mit 0-Bits aufgefüllt. Das Vorzeichenbit wird 0, so dass das Ergebnis nie negativ ist.</p>
+
+<p>Für nicht negative Zahlen ist das Ergebnis bei der Null füllenden Rechtsverschiebung und bei der Vorzeichen propagierenden Rechtsverschiebung das selbe. Zum Beispiel ergibt <code>9 &gt;&gt;&gt; 2</code> <code>2</code>, das selbe wie <code>9 &gt;&gt; 2</code>:</p>
+
+<pre class="brush: js">.     9 (Basis 10): 00000000000000000000000000001001 (Basis 2)
+                    --------------------------------
+9 &gt;&gt;&gt; 2 (Basis 10): 00000000000000000000000000000010 (Basis 2) = 2 (Basis 10)
+</pre>
+
+<p>Jedoch ist das nicht der Fall für negative Zahlen. Zum Beispiel ergibt <code>-9 &gt;&gt;&gt; 2</code> <code>1073741821</code>, was sich unterschiedet von <code>-9 &gt;&gt; 2</code> (was <code>-3</code> ergibt):</p>
+
+<pre class="brush: js">.     -9 (Basis 10): 11111111111111111111111111110111 (Basis 2)
+                     --------------------------------
+-9 &gt;&gt;&gt; 2 (Basis 10): 00111111111111111111111111111101 (Basis 2) = 1073741821 (Basis 10)
+</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Flags_und_Bitmasken">Flags und Bitmasken</h3>
+
+<p>Die bitweisen logischen Operatoren werden häufig eingesetzt, um Sequenzen von Flags zu erstellen, zu manipulieren und zu lesen, welche wie binäre Variablen sind. Variablen können statt dieser Sequenzen genutzt werden, aber binäre Flags verbrauchen weniger Speicher (um den Faktor 32).</p>
+
+<p>Angenommen es gibt 4 Flags:</p>
+
+<ul>
+ <li>Flag A: Man hat ein Ameisenproblem</li>
+ <li>Flag B: Man besitzt eine Fledermaus</li>
+ <li>Flag C: Man besitzt eine Katze</li>
+ <li>Flag D: Man besitzt eine Ente</li>
+</ul>
+
+<p>Diese Flags sind durch eine Sequenz von Bits repräsentiert: DCBA. Wenn ein Flag gesetzt wird, hat es den Wert 1. Wenn ein Flag geleert wird, hat es den Wert 0. Angenommen eine Variable <code>flags</code> hat den binären Wert 0101:</p>
+
+<pre class="brush: js">var flags = 5;   // binär 0101
+</pre>
+
+<p>Dieser Wert zeigt an:</p>
+
+<ul>
+ <li>Flag A ist true (man hat ein Ameisenproblem);</li>
+ <li>Flag B ist false (man hat keine Fledermaus);</li>
+ <li>Flag C ist true (man hat eine Katze);</li>
+ <li>Flag D ist false (man hat keine Ente);</li>
+</ul>
+
+<p>Weil Bitweise Operatoren mit 32-Bit arbeiten, ist 0101 eigentlich 00000000000000000000000000000101, aber die führenden nullen können vernachlässigt werden, weil sie keine Informationen enthalten.</p>
+
+<p>Eine Bitmaske ist eine Sequenz von Bits, die Flags manipulieren und/oder lesen kann. Typisch ist es, dass eine "primitive" Bitmaske für jedes Flag definiert ist:</p>
+
+<pre class="brush: js">var FLAG_A = 1; // 0001
+var FLAG_B = 2; // 0010
+var FLAG_C = 4; // 0100
+var FLAG_D = 8; // 1000
+</pre>
+
+<p>Neue Bitmasken können erstellt werden, indem bitweise logische Operatoren auf den primitiven Bitmasken angewendet werden. Zum Beispiel kann die Bitmaske 1011 mit VerODERn von FLAG_A, FLAG_B und FLAG_D erstellt werden:</p>
+
+<pre class="brush: js">var mask = FLAG_A | FLAG_B | FLAG_D; // 0001 | 0010 | 1000 =&gt; 1011
+</pre>
+
+<p>Individuelle Flagwerte können durch das VerUNDen mit einer Bitmaske extrahiert werden, wobei jedes Bit mit dem Wert eins das korrespondierende Flag extrahiert. Die Bitmaske wirft nicht relevante Flags heraus, indem Nullen verUNDet werden (daher der Begriff "Bitmaske"). Zum Beispiel kann die Bitmaske 0100 genutzt werden, um zu sehen, ob Flag C gesetzt ist:</p>
+
+<pre class="brush: js">// Wenn man eine Katze besitzt
+if (flags &amp; FLAG_C) { // 0101 &amp; 0100 =&gt; 0100 =&gt; true
+   // tu irgendetwas
+}
+</pre>
+
+<p>Eine Bitmaske mit mehreren gesetzten Flags funktioniert wie ein "entweder/oder". Zum Beispiel sind die beiden folgenden Ansätze äquivalent:</p>
+
+<pre class="brush: js">// wenn man eine Fledermaus besitzt oder eine Katze besitzt
+// (0101 &amp; 0010) || (0101 &amp; 0100) =&gt; 0000 || 0100 =&gt; true
+if ((flags &amp; FLAG_B) || (flags &amp; FLAG_C)) {
+   // do stuff
+}
+</pre>
+
+<pre class="brush: js">// wenn man eine Fledermaus oder eine Katze besitzt
+var mask = FLAG_B | FLAG_C; // 0010 | 0100 =&gt; 0110
+if (flags &amp; mask) { // 0101 &amp; 0110 =&gt; 0100 =&gt; true
+   // do stuff
+}
+</pre>
+
+<p>Flags können mit VerODERung mit einer Bitmaske gesetzt werden, wobei jedes Bit in der Bitmaske mit dem Wert 1 wird das korrespondierende Flag setzen, wenn es noch nicht gesetzt ist. Zum Beispiel kann die Bitmaske 1100 benutzt werden, um die Flags C und D zu setze:</p>
+
+<pre class="brush: js">// ja, man besitzt eine Katze und eine Ente
+var mask = FLAG_C | FLAG_D; // 0100 | 1000 =&gt; 1100
+flags |= mask;   // 0101 | 1100 =&gt; 1101
+</pre>
+
+<p>Flags können mit VerUNDung mit einer Bitmaske geleert werden, wobei jedes Bit in der Bitmaske mit dem Wert 0 wird das korrespondierende Flag geleert, wenn es noch nicht geleert ist. Die Bitmaske dafür kann mit Negation primitiver Bitmasken erstellt werden Zum Beispiel kann die Bitmaske 1010 benutzt werden, um die Flags A und C zu leeren:</p>
+
+<pre class="brush: js">// no, we don't have an ant problem or own a cat
+var mask = ~(FLAG_A | FLAG_C); // ~0101 =&gt; 1010
+flags &amp;= mask;   // 1101 &amp; 1010 =&gt; 1000
+</pre>
+
+<p>The mask could also have been created with <code>~FLAG_A &amp; ~FLAG_C</code> (De Morgan's law):</p>
+
+<pre class="brush: js">// nein, mat hat kein Problem mit Ameisen und man besitzt keine Katze
+var mask = ~FLAG_A &amp; ~FLAG_C;
+flags &amp;= mask;   // 1101 &amp; 1010 =&gt; 1000
+</pre>
+
+<p>Flags können mit VerXORung mit einer Bitmaske umgeschaltet werden, wobei jedes Bit in der Bitmaske mit dem Wert 1 wird das korrespondierende Flag umschaltet. Zum Beispiel kann die Bitmaske 0110 benutzt werden, um die Flags B und C umzuschalten:</p>
+
+<pre class="brush: js">// wenn man keine Fledermaus besitzt und und jetzt eine bekommt
+// and wenn man eine hat und die Fledermaus verabschiedet
+// das gleiche für eine Katze
+var mask = FLAG_B | FLAG_C;
+flags = flags ^ mask;   // 1100 ^ 0110 =&gt; 1010
+</pre>
+
+<p>Alle Flags können mit dem Negationsoperator umgedreht werden:</p>
+
+<pre class="brush: js">// entering parallel universe...
+flags = ~flags;    // ~1010 =&gt; 0101
+</pre>
+
+<h3 id="Konvertierungsbeispiele">Konvertierungsbeispiele</h3>
+
+<p>Konvertierung eines binär <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/String" title="/de/docs/JavaScript/Reference/Global_Objects/String">String</a></code> zu einer dezimal <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/de/docs/JavaScript/Reference/Global_Objects/Number">Number</a></code>:</p>
+
+<pre class="brush: js">var sBinString = '1011';
+var nMyNumber = parseInt(sBinString, 2);
+alert(nMyNumber); // prints 11, i.e. 1011
+</pre>
+
+<p>Konvertierung einer dezimal <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/de/docs/JavaScript/Reference/Global_Objects/Number">Number</a></code> zu einem binär <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/String" title="/de/docs/JavaScript/Reference/Global_Objects/String">String</a></code>:</p>
+
+<pre class="brush: js">var nMyNumber = 11;
+var sBinString = nMyNumber.toString(2);
+alert(sBinString); // prints 1011, i.e. 11
+</pre>
+
+<h3 id="Bitmaskenerstellung_automatisieren">Bitmaskenerstellung automatisieren</h3>
+
+<p>Man kann, wie folgt, mehrere Masken von einer Menge von <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="/de/docs/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></code> Werten erstellen:</p>
+
+<pre class="brush: js">function createMask() {
+  var nMask = 0, nFlag = 0, nLen = arguments.length &gt; 32 ? 32 : arguments.length;
+  for (nFlag; nFlag &lt; nLen; nMask |= arguments[nFlag] &lt;&lt; nFlag++);
+  return nMask;
+}
+var mask1 = createMask(true, true, false, true); // 11, i.e.: 1011
+var mask2 = createMask(false, false, true); // 4, i.e.: 0100
+var mask3 = createMask(true); // 1, i.e.: 0001
+// etc.
+
+alert(mask1); // prints 11, i.e.: 1011
+</pre>
+
+<h3 id="Umgedrehter_Algorithmus_Ein_Array_von_Booleanen_von_einer_Bitmaske">Umgedrehter Algorithmus: Ein Array von Booleanen von einer Bitmaske</h3>
+
+<p>Wenn man ein <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Array" title="/de/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code> mit <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="/de/docs/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></code> Werten von einer Bitmaske haben möchte, kann man folgenden Code benutzen:</p>
+
+<pre class="brush: js">function arrayFromMask(nMask) {
+  // nMask must be between -2147483648 and 2147483647
+  if (nMask &gt; 0x7fffffff || nMask &lt; -0x80000000) {
+    throw new TypeError('arrayFromMask - out of range');
+  }
+  for (var nShifted = nMask, aFromMask = []; nShifted;
+       aFromMask.push(Boolean(nShifted &amp; 1)), nShifted &gt;&gt;&gt;= 1);
+  return aFromMask;
+}
+
+var array1 = arrayFromMask(11);
+var array2 = arrayFromMask(4);
+var array3 = arrayFromMask(1);
+
+alert('[' + array1.join(', ') + ']');
+// prints "[true, true, false, true]", i.e.: 11, i.e.: 1011
+</pre>
+
+<p>Man kann beide Algorithmen gleichzeitig testen:</p>
+
+<pre class="brush: js">var nTest = 19; // our custom mask
+var nResult = createMask.apply(this, arrayFromMask(nTest));
+
+alert(nResult); // 19
+</pre>
+
+<p>Nur aus didaktischen Gründen (weil dort die <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Number/toString" title="/de/docs/JavaScript/Reference/Global_Objects/Number/toString">Number.toString(2)</a></code> Methode ist), zeigen wir, wie es möglich ist den <code>arrayFromMask</code> Algorithmus zu verändern, um einen <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/String" title="/de/docs/JavaScript/Reference/Global_Objects/String">String</a></code> mit der Binärrepräsentation der <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/de/docs/JavaScript/Reference/Global_Objects/Number">Number</a></code> statt eines <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Array" title="/de/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code>s von <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="/de/docs/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></code>en:</p>
+
+<pre class="brush: js">function createBinaryString(nMask) {
+  // nMask must be between -2147483648 and 2147483647
+  for (var nFlag = 0, nShifted = nMask, sMask = ''; nFlag &lt; 32;
+       nFlag++, sMask += String(nShifted &gt;&gt;&gt; 31), nShifted &lt;&lt;= 1);
+  return sMask;
+}
+
+var string1 = createBinaryString(11);
+var string2 = createBinaryString(4);
+var string3 = createBinaryString(1);
+
+alert(string1);
+// prints 00000000000000000000000000001011, i.e. 11
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.7')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definiert in verschiedenen Abschnitten der Spezifikation: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.8">Bitwise NOT operator</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.7">Bitwise shift operators</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.10">Binary bitwise operators</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-bitwise-shift-operators')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definiert in verschiedenen Abschnitten der Spezifikation: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-bitwise-not-operator">Bitwise NOT operator</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-bitwise-shift-operators">Bitwise shift operators</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-binary-bitwise-operators">Binary bitwise operators</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-bitwise-shift-operators')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Definiert in verschiedenen Abschnitten der Spezifikation: <a href="http://tc39.github.io/ecma262/#sec-bitwise-not-operator">Bitwise NOT operator</a>, <a href="http://tc39.github.io/ecma262/#sec-bitwise-shift-operators">Bitwise shift operators</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-bitwise-operators">Binary bitwise operators</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.operators.bitwise")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Operators/Logical_Operators">Logische Operatoren</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/operators/class/index.html b/files/de/web/javascript/reference/operators/class/index.html
new file mode 100644
index 0000000000..1cc8a647e3
--- /dev/null
+++ b/files/de/web/javascript/reference/operators/class/index.html
@@ -0,0 +1,157 @@
+---
+title: Der class-Ausdruck
+slug: Web/JavaScript/Reference/Operators/class
+tags:
+  - Classes
+  - ECMAScript 2015
+  - Expression
+  - JavaScript
+  - Operator
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/class
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Der class-Ausdruck ist eine Methode zur Definition einer Klasse in ECMAScript 2015. Ähnlich wie beim {{jsxref("Operators/function", "function-Ausdruck")}} kann der class-Ausdruck benannt oder unbenannt sein. Ist er benannt, so gilt der Name nur lokal im Klassenkörper. JavaScript-Klassen nutzen prototyp-basierte Vererbung.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var MyClass = class <em>[className]</em> [extends] {
+  // Klassenkörper
+};</pre>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Ein class-Ausdruck hat die gleiche Syntax wie die {{jsxref("Statements/class", "class-Anweisung (Deklaration)")}}. Jedoch kann mit dem class-Ausdruck der Klassenname ("binding identifier") ausgelassen werden, was mit der class-Anweisung nicht möglich ist. Zusätzlich erlaubt ein class-Ausdruck das erneute Deklarieren einer Klasse, ohne dass ein Fehler wie bei der {{jsxref("Statements/class", "class-Deklaration")}} auftritt. Die constructor-Eigenschaft ist optional. Zudem wird der <em>typeof</em>-Operator bei so deklarierten Klassen immer den Typ "function" zurückgeben.</p>
+
+<p>Genau wie mit class-Anweisungen wird der Körper der Klasse im {{jsxref("Strict_mode", "strict mode")}} ausgeführt.</p>
+
+<pre class="brush: js">'use strict';
+var Foo = class {}; // constructor-Eigenschaft ist optional
+var Foo = class {}; // erneute Deklaration is erlaubt
+
+typeof Foo;      // gibt "function" zurück
+typeof class {}; // gibt "function" zurück
+
+Foo instanceof Object;   // true
+Foo instanceof Function; // true
+class Foo {}; // erzeugt einen TypeError, weil eine erneute Deklaration nicht erlaubt ist
+</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Ein_einfacher_Klassenausdruck">Ein einfacher Klassenausdruck</h3>
+
+<p>Dies ist nur ein einfacher anonymer class-Ausdruck der über die "Foo"-Variable angesprochen werden kann.</p>
+
+<pre class="brush: js">var Foo = class {
+  constructor() {}
+  bar() {
+    return "Hello World!";
+  }
+};
+
+var instance = new Foo();
+instance.bar(); // "Hello World!"
+Foo.name; // ""
+</pre>
+
+<h3 id="Benannte_class-Ausdrücke">Benannte class-Ausdrücke</h3>
+
+<p>Wenn Sie innerhalb des Klassenkörpers auf die aktuelle Klasse verweisen möchten, können Sie einen benannten class-Ausdruck verwenden. Dieser Name ist nur im Bereich der Klasse selbst gültig und sichtbar.</p>
+
+<pre class="brush: js">var Foo = class NamedFoo {
+  constructor() {}
+  whoIsThere() {
+    return NamedFoo.name;
+  }
+}
+var bar = new Foo();
+bar.whoIsThere(); // "NamedFoo"
+NamedFoo.name; // ReferenceError: NamedFoo is not defined
+Foo.name; // "NamedFoo"
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>erstmalige Definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funktion</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>grundlegende Unterstützung</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatGeckoDesktop(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funktion</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatGeckoDesktop(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Operators/function", "function-Ausdruck")}}</li>
+ <li>{{jsxref("Statements/class", "class-Anweisung")}}</li>
+ <li>{{jsxref("Classes", "Klassen")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/operators/comma_operator/index.html b/files/de/web/javascript/reference/operators/comma_operator/index.html
new file mode 100644
index 0000000000..be04c939a6
--- /dev/null
+++ b/files/de/web/javascript/reference/operators/comma_operator/index.html
@@ -0,0 +1,107 @@
+---
+title: Kommaoperator
+slug: Web/JavaScript/Reference/Operators/Comma_Operator
+tags:
+  - JavaScript
+  - Operator
+translation_of: Web/JavaScript/Reference/Operators/Comma_Operator
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Der<strong> Kommaoperator</strong> wertet jeden Operanden (von links nach rechts) aus und gibt den Wert des letzten Operanden zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-commaoperators.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>ausdruck1</em>, <em>ausdruck2, ausdruck3...</em></pre>
+
+<h2 id="Parameter">Parameter</h2>
+
+<dl>
+ <dt><code>ausdruck1, ausdruck2, ausdruck3...</code></dt>
+ <dd>Beliebige Ausdrücke.</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Der Kommaoperator kann eingesetzt werden, um mehrere Ausdrücke an einer Stelle zu verwenden, die nur einen Ausdruck erwartet. Der häufigste Anwendungsfall für diesen Operator ist das Bereitstellen mehrerer Parameter in einer <code>for</code> Schleife.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Gegeben ist <code>a</code> in einem 2-dimensionalen Array mit 10 Elementen auf jeder Seite. Der folgende Code verwendet den Kommaoperator um zwei Variablen auf einmal hochzuzählen.</p>
+
+<p>Der folgende Code gibt in der Konsole die Werte der diagonalen Elemente im Array aus:</p>
+
+<pre class="brush:js;highlight:[1]">for (var i = 0, j = 9; i &lt;= 9; i++, j--)
+  console.log('a[' + i + '][' + j + '] = ' + a[i][j]);</pre>
+
+<p>Zu Beachten ist, dass das Komma in Zuweisungen, wie etwa bei der <code>var</code> Deklaration, nicht den erwarteten Effekt des Kommaoperators zu haben scheint, da Zuweisungen nicht in einem Ausdruck existieren. Im folgenden Beispiel wird <code>a</code> auf den Wert von <code>b = 3</code> gesetzt (welcher 3 ist), aber <code>c = 4</code> wird dennoch ausgewertet und dessen Ergebnis wird in der Konsole ausgegeben (i.e., 4). Das ist auf die <a href="/de/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Operator precedence</a> zurückzuführen.</p>
+
+<pre class="brush: js">// Zu Beachten ist, dass nachfolgend globals erstellt werden,
+// die im Strict Mode nicht zulässig sind.
+
+a = b = 3, c = 4; // Rückgabe von 4 in der Konsole
+console.log(a); // 3 (ganz links)
+
+x = (y = 5, z = 6); // Rückgabe von 6 in der Konsole
+console.log(x); // 6 (ganz rechts)
+</pre>
+
+<p>Der Kommaoperator ist völlig anders als das Komma in Arrays, Objekten, Funktionsargumenten und -parametern.</p>
+
+<h3 id="Verarbeitung_und_dann_zurückgeben">Verarbeitung und dann zurückgeben</h3>
+
+<p>Ein weiteres Beispiel für die Verwendung des Kommaoperators ist die Verarbeitung vor der Rückgabe. Wie oben beschrieben, wird das letzte Element zurückgegeben, jedoch auch alle weiteren werden verarbeitet. So könnte folgendes gemacht werden:</p>
+
+<pre class="brush: js">function myFunc() {
+  var x = 0;
+
+  return (x += 1, x); // ist das Gleiche wie return ++x;
+}</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-comma-operator', 'Comma operator')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-comma-operator', 'Comma operator')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.14', 'Comma operator')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.14', 'Comma operator')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.operators.comma")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for Schleife</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/operators/conditional_operator/index.html b/files/de/web/javascript/reference/operators/conditional_operator/index.html
new file mode 100644
index 0000000000..895a2c5d55
--- /dev/null
+++ b/files/de/web/javascript/reference/operators/conditional_operator/index.html
@@ -0,0 +1,190 @@
+---
+title: Bedingter (ternärer) Operator
+slug: Web/JavaScript/Reference/Operators/Conditional_Operator
+tags:
+  - JavaScript
+  - Operator
+translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Der<strong> bedingte (ternäre) Operator</strong> ist der einzige Operator in JavaScript, der drei Operanden hat. Er wird häufig als Kurzform eines <a href="/de/docs/Web/JavaScript/Reference/Statements/if...else"><code>if</code></a> Statements genutzt.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-conditionaloperators.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>Bedingung </em>? <em>Ausdruck1</em>: <em>Ausdruck2</em></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>Bedingung (oder Bedingungen)</code></dt>
+ <dd>Ein Ausdruck, der zu <code>true</code> oder <code>false</code> ausgewertet wird.</dd>
+</dl>
+
+<dl>
+ <dt><code>Ausdruck1</code>, <code>Ausdruck2</code></dt>
+ <dd>Ausdrücke mit Werten eines beliebigen Typs.</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Wenn <code>Bedingung</code> zu <code>true</code> ausgewertet wird, wird <code>Ausdruck1</code> zurückgegeben; andernfalls wird <code>Ausdruck2</code> zurückgegeben.</p>
+
+<p>Ein einfaches Beispiel zeigt dieser Test, ob man in den USA alt genug ist, um Alkohol zu trinken.</p>
+
+<pre class="brush: js">var age = 26;
+var canDrinkAlcohol = (age &gt;= 21) ? "True, 21 or older" : "False, under 21";
+console.log(canDrinkAlcohol); // "True, 21 or older"
+</pre>
+
+<p>Ein anderes Beispiel ist die Anzeige von verschiedenen Nachrichten, abhängig von der <code>isMember</code> Variable:</p>
+
+<pre class="brush: js">"The fee is " + (isMember ? "$2.00" : "$10.00")
+</pre>
+
+<p>Man kann auch Variablen abhängig von einem ternären Ergebnis zuweisen:</p>
+
+<pre class="brush: js">var elvisLives = Math.PI &gt; 4 ? "Yep" : "Nope";</pre>
+
+<p>Mehrere ternäre Auswertungen hintereinander sind ebenfalls möglich (Beachte: der ternäre Operator ist rechtsassoziativ):</p>
+
+<pre class="brush: js">var firstCheck = false,
+    secondCheck = false,
+    access = firstCheck ? "Access denied" : secondCheck ? "Access denied" : "Access granted";
+
+console.log(access); // logt "Access granted"</pre>
+
+<p>Man kann ihn auch wie ein If Statement mit mehreren Bedingungen verwenden</p>
+
+<pre class="brush: js">var condition1 = true,
+    condition2 = false,
+    access = condition1 ? (condition2 ? "true true" : "true false") : (condition2 ? "false true" : "false false");
+
+console.log(access); // logt "true false"</pre>
+
+<p>Zu beachten ist, dass die Klammern nicht notwendig sind und das Ergebnis nicht verändern. Sie sind zur Übersichtshilfe vorhanden.</p>
+
+<p>Man kann den ternären Operator alleinstehend verwenden, um verschiedene Operationen auszuführen:</p>
+
+<pre class="brush: js">var stop = false, age = 16;
+
+age &gt; 18 ? location.assign("continue.html") : stop = true;
+</pre>
+
+<p>Man kann auch mehr als eine Operation pro Fall ausführen, indem die Operationen mit einem Komma getrennt und geklammert werden:</p>
+
+<pre class="brush: js">var stop = false, age = 23;
+
+age &gt; 18 ? (
+    alert("OK, you can go."),
+    location.assign("continue.html")
+) : (
+    stop = true,
+    alert("Sorry, you are much too young!")
+);
+</pre>
+
+<p>Man kann auch mehrere Operationen während einer Zuweisung durchführen. <em><strong>In diesem Fall wird der letzte von Kommas getrennte Wert als Zuweisungswert benutzt.</strong></em></p>
+
+<pre class="brush: js">var age = 16;
+
+var url = age &gt; 18 ? (
+    alert("OK, you can go."),
+    // alert liefert "undefined" zurück, wird aber ignoriert
+    // weil es nicht der letzte Ausdruck in der Klammer ist.
+    "continue.html" // dieser Wert wird zugewiesen, wenn der
+                    //Wert &gt; 18 ist.
+) : (
+    alert("You are much too young!"),
+    alert("Sorry :-("),
+    // etc. etc.
+    "stop.html" // dieser Wert wird zugewiesen wenn "age" &lt;= 18 ist;
+
+location.assign(url); // "stop.html"</pre>
+
+<h3 id="Rückgabe_durch_ternäre_Statements">Rückgabe durch ternäre Statements</h3>
+
+<p>Der ternäre Operator ist nützlich für Funktionen, die einen Rückgabewert abhängig von einem <code>if/else</code> Statement zurückgeben.</p>
+
+<pre class="brush: js">var func1 = function ( .. ) {
+  if (condition1) { return value1; }
+  else { return value2; }
+}
+
+var func2 = function ( .. ) {
+  return condition1 ? value1 : value2;
+}</pre>
+
+<p>Ein häufiger Weg, um das legale Alter zum Trinken von Alkohol in den USA zurückzugeben:</p>
+
+<pre class="brush: js">function canDrinkAlcohol(age) {
+  return (age &gt; 21) ? "True, over 21" : "False, under 21";
+}
+var output = canDrinkAlcohol(26);
+console.log(output); // "True, over 21"</pre>
+
+<p>Ein guter Weg, um herauszufinden, ob der ternäre Operator ein guter Ersatz für ein <code>if/else</code> Statement ist, ist wenn das <code>return</code> Schlüsselwort mehrfach eingesetzt wird und in jedem Block der einzige Ausdruck ist.</p>
+
+<p>Beim Aufteilen des ternären Operators in mehrere Zeilen und extra Leerzeichen, kann dieser ein sehr sauberer Ersatz für eine längere Serie von <code>if/else</code> Statements sein. Dadurch wird ein leichter Weg für logisch gleiche Ausdrücke geschaffen:</p>
+
+<pre class="brush: js">var func1 = function ( .. ) {
+  if (condition1) { return value1; }
+  else if (condition2) { return value2; }
+  else if (condition3) { return value3; }
+  else { return value4; }
+}
+
+var func2 = function ( .. ) {
+  return condition1 ? value1
+       : condition2 ? value2
+       : condition3 ? value3
+       :              value4;
+}</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-conditional-operator', 'Conditional Operator')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-conditional-operator', 'Conditional Operator')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.12', 'The conditional operator')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.12', 'The conditional operator')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.operators.conditional")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Statements/if...else">if Statement</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/operators/dekrement/index.html b/files/de/web/javascript/reference/operators/dekrement/index.html
new file mode 100644
index 0000000000..16b185b35c
--- /dev/null
+++ b/files/de/web/javascript/reference/operators/dekrement/index.html
@@ -0,0 +1,82 @@
+---
+title: Dekrement (--)
+slug: Web/JavaScript/Reference/Operators/Dekrement
+tags:
+  - Dekrement
+  - Dekrement-Operator
+  - Dekrementieren
+translation_of: Web/JavaScript/Reference/Operators/Decrement
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Der Dekrement-Operator (--) dekrementiert den Operanden um eins, zieht als eins vom Operanden ab und gibt einen Wert zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-decrement.html")}}</div>
+
+<div></div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate"><strong>Operator:</strong> <var>x</var>-- or --<var>x</var>
+</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>Wenn der Dekrement-Operator als Postfix benutzt wird, also der Operator hinter dem Operanden steht (z.B. x--), wird der Operand um eins reduziert aber der Wert vor dem Dekrementieren zurückgegeben. </p>
+
+<p>Wird der Dekrement-Operator als Präfix genutzt, steht also der Operator vor dem Operanden (z. B. --x), wird der Operator um eins reduziert und der Wert nach dieser Dekrementierung zurückgegeben.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Postfix_decrement">Postfix decrement</h3>
+
+<pre class="brush: js notranslate">let x = 3;
+y = x--;
+
+// y = 3
+// x = 2
+</pre>
+
+<h3 id="Prefix_decrement">Prefix decrement</h3>
+
+<pre class="brush: js notranslate">let a = 2;
+b = --a;
+
+// a = 1
+// b = 1
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-postfix-decrement-operator', 'Decrement operator')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.operators.decrement")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Addition">Addition operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Subtraction">Subtraction operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Division">Division operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Multiplication">Multiplication operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder">Remainder operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Exponentiation">Exponentiation operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Increment">Increment operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_negation">Unary negation operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_plus">Unary plus operator</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/operators/delete/index.html b/files/de/web/javascript/reference/operators/delete/index.html
new file mode 100644
index 0000000000..dff87c8998
--- /dev/null
+++ b/files/de/web/javascript/reference/operators/delete/index.html
@@ -0,0 +1,295 @@
+---
+title: delete Operator
+slug: Web/JavaScript/Reference/Operators/delete
+tags:
+  - JavaScript
+  - Memory Management
+  - Object
+  - Operator
+  - Property
+  - Reference
+  - Release
+  - Unary
+  - delete
+translation_of: Web/JavaScript/Reference/Operators/delete
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Der JavaScript <strong><code>delete</code>-Operator</strong> entfernt eine Eigenschaft eines Objekts. Wenn keine weitere Referenz auf dieselbe Eigenschaft mehr existiert, wird diese automatisch freigegeben.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-deleteoperator.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">delete <em>Ausdruck</em> </pre>
+
+<p>wobei <em>Ausdruck</em> zu eine Referenz auf eine Eigenschaft ausgewertet werden sollte, z. B.:</p>
+
+<pre class="syntaxbox">delete <em>object.property</em>
+delete <em>object</em>['<em>property</em>']
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>object</code></dt>
+ <dd>Der Name eines Objekts oder ein Ausdruck der zu einem Objekt ausgewertet wird.</dd>
+ <dt><code>property</code></dt>
+ <dd>Die zu löschende Eigenschaft.</dd>
+</dl>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p><code>true</code> für alle Fälle, außer wenn die Eigenschaft eine eigene nicht konfigurierbare Eigenschaft ist, in diesem Fall wird im nicht strict Modus <code>false</code> zurückgegeben.</p>
+
+<h3 id="Fehler">Fehler</h3>
+
+<p>Erzeugt einen {{jsxref("Global_objects/SyntaxError")}} im <a href="/de/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">strict Modus</a>, wenn die Eigenschaft eine eigene nicht konfigurierbare Eigenschaft ist.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Anders als es allgemein üblich ist, hat der <code>delete</code> Operator <strong>nichts</strong> mit dem Freigeben von Speichers zu tun. Speicherverwaltung wird indirekt über fehlende Referenzen gemacht, dazu mehr Details auf der Seite <a href="/de/docs/Web/JavaScript/Memory_Management">Speicherverwaltung</a>.</p>
+
+<p>Der <strong><code>delete</code></strong> Operator entfernt eigene gegebene Eigenschaft von einem Objekt. Ist dieses Erfolgreich, wird <code>true</code> zurückgegeben, andernfalls <code>false</code>. Jedoch ist es wichtig die folgenden Szenarien zu bedenken:</p>
+
+<ul>
+ <li>Wenn die Eigenschaft, die gelöscht werden soll, nicht existiert, hat <code>delete</code> keinen Effekt und wird <code>true</code> zurückgeben.</li>
+ <li>Wenn eine Eigenschaft mit dem selben Namen in der Prototypenkette existiert, wird nach dem Löschen diese Eigenschaft aus der Prototypenkette weiter benutzt (in anderen Worten, <code>delete</code> hat nur auf eigenen Eigenschaften einen Effekt).</li>
+ <li>Jede Eigenschaft, die mit {{jsxref("Statements/var","var")}} deklariert wurde, kann nicht vom globalen oder Funktionsgültigkeitsbereich gelöscht werden.
+  <ul>
+   <li><code>delete</code> kann keine Funktion im globalen Gültigkeitsbereich löschen (egal ob diese Teil einer Funktionsdeklaration oder eines Funktionsausdrucks ist).</li>
+   <li>Funktionen die Teil eines Objektes sind (außer dem globalen Objekt) können mit <code>delete</code> gelöscht werden.</li>
+  </ul>
+ </li>
+ <li>Jede Eigenschaft, die mit {{jsxref("Statements/let","let")}} oder {{jsxref("Statements/const","const")}} deklariert wurde, kann nicht vom Gültigkeitsbereich, indem diese definiert wurde, gelöscht werden.</li>
+ <li>Nicht konfigurierbare Eigenschaften können nicht gelöscht werden. Eingenommen sind Eigenschaften von Standardobjekten wie {{jsxref("Math")}}, {{jsxref("Array")}}, {{jsxref("Object")}} und Eigenschaften die mit Methoden wie {{jsxref("Object.defineProperty()")}} als nicht konfigurierbar erstellt wurden.</li>
+</ul>
+
+<p>Der folgende Ausschnitt enthält ein einfaches Beispiel:</p>
+
+<pre class="brush: js">var Employee = {
+  age: 28,
+  name: 'abc',
+  designation: 'developer'
+}
+
+console.log(delete Employee.name);  // gibt true zurück
+console.log(delete Employee.age);   // gibt true zurück
+
+// Wenn versucht wird eine Eigenschaft zu löschen,
+// die nicht existiert, wird true zurückgegeben
+console.log(delete Employee.salery) // gibt true zurück</pre>
+
+<h3 id="Nicht_konfigurierbare_Eigenschaften">Nicht konfigurierbare Eigenschaften</h3>
+
+<p>Wenn eine Eigenschaft als nicht konfigurierbar markiert ist, hat <code>delete</code> keinen Effekt und wird <code>false</code> zurückgeben. Im strict Modus wird es zu einem <code>SyntaxError</code> kommen.</p>
+
+<pre class="brush: js">var Employee = {};
+Object.defineProperty(Employee, 'name', {configurable: false});
+
+console.log(delete Employee.name);  // gibt false zurück</pre>
+
+<p>{{jsxref("Statements/var","var")}}, {{jsxref("Statements/let","let")}} und {{jsxref("Statements/const","const")}} erstellen nicht konfigurierbare Eigenschaften, die nicht mit dem <code>delete</code> Operator gelöscht werden können.</p>
+
+<pre class="brush: js">var nameOther = 'XYZ';
+
+// Man kann die globale Eigenschaft mit folgenden erreichen:
+Object.getOwnPropertyDescriptor(window, 'nameOther');
+
+// output: Object {value: "XYZ",
+//                  writable: true,
+//                  enumerable: true,
+//                  configurable: false}
+
+// Wenn "nameOther" mit dem Schlüsselwort var hinzugefügt
+// wird, ist sie als nicht konfigurierbar markiert
+
+delete nameOther;   // gibt false zurück
+</pre>
+
+<p>Im strict Modus wird diese zu einem Fehler führen.</p>
+
+<h3 id="Strict_vs._nicht_strict_Modus">Strict vs. nicht strict Modus</h3>
+
+<p>Wenn im strict Mode <code>delete</code> direkt auf einer Referenz einer Variablen, eines Funktionsargumentes oder eines Funktionsnamens genutzt wird, wird ein {{jsxref("SyntaxError")}} erzeugt.</p>
+
+<p>Jede Variable, die mit <code>var</code> definiert wird, wird als nicht konfigurierbar markiert. Im folgenden Beispiel ist <code>salary</code> nicht konfigurierbar und kann nicht gelöscht werden. Im nicht strict Modus wird der <code>delete</code> Operator <code>false</code> zurückgeben.</p>
+
+<pre class="brush: js">function Employee() {
+  delete salary;
+  var salary;
+}
+
+Employee();</pre>
+
+<p>Mal sehen, wie sich der selbe Code im strict Modus verhält. Statt dem Zurückgeben von <code>false</code>, wird das Statement zu einem <code>SyntaxError</code> führen.</p>
+
+<pre class="brush: js">"use strict";
+
+function Employee() {
+  delete salary;  // SyntaxError
+  var salary;
+}
+
+Employee();
+
+// Genauso führt jeder direkte Zugriff auf
+// eine Funktion mit delete zu einem SyntaxError
+
+funciton DemoFunction() {
+  // etwas Code
+}
+
+delete DemoFunction; // SyntaxError</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: js">// Die Eigenschaft adminName im globalen Gültigkeitsbereich erstellen
+adminName = 'xyz';
+
+// Die Eigenschaft empCount im globalen Gültigkeitsbereich erstellen
+// Weil var genutzt wurde, ist diese als nicht konfigurierbar markiert. Das selbe gibt auch für let und const.
+var empCount = 43;
+
+EmployeeDetails = {
+  name: 'xyz',
+  age: 5,
+  designation: 'Developer'
+};
+
+// adminName ist eine Eigenschaft im globalen Gültigkeitsbereich.
+// Sie kann gelöscht werden, weil sie nicht mit var erstellt wurde.
+// Demnach ist sie konfigurierbar.
+delete adminName     // gibt true zurück
+
+// Im Gegensatz dazu ist empCount nicht konfigurierbar,
+// weil var eingesetzt wurde
+delete empCount;     // gibt false zurück
+
+// delete kann für das Löschen von Eigenschaften von Objekte eingesetzt werden.
+delete EmployeeDetails.name // gibt true zurück
+
+// Auch wenn die Eigenschaft nicht existiert, wird "true" zurückgegeben.
+delete EmployeeDetails.salary; // gibt true zurück
+
+// delete hat keinen Effekt auf statische Eigenschaften von Standardobjekten.
+delete Math.PI; // gibt false zurück
+
+// EmployeeDetails ist eine Eigenschaft im globalen Gültigkeitsbereich.
+// Weil es ohne "var" definiert wurde, ist es als Konfigurierbar markiert.
+delete EmployeeDetails;  // gibt true zurück
+
+function f() {
+  var z = 44;
+
+  // delete hat keinen Effekt auf lokale Variablen
+  delete z;     // returns false
+}
+</pre>
+
+<h3 id="delete_und_die_Prototypenkette"><code>delete</code> und die Prototypenkette</h3>
+
+<p>Im folgenden Beispiel löschen wir eine eigene Eigenschaft eines Objektes, während ein Eigenschaft mit dem selben Namen in der Prototypenkette vorhanden ist:</p>
+
+<pre class="brush: js">function Foo(){
+  this.bar = 10;
+}
+
+Foo.prototype.bar = 42;
+
+var foo = new Foo();
+
+// gibt true zurück, weil die eigene Eigenschaft
+// vom foo Objekt gelöscht wird.
+delete foo.bar;
+
+// foo.bar ist weiter verfügbar, weil es
+// in der Prototypenkette verfügbar ist.
+console.log(foo.bar);
+
+// Löschen der Eigenschaft auf dem Prototypen
+delete Foo.prototype.bar;
+
+// gibt "undefined" aus, weil die Eigenschaft
+// nicht länger vererbt wird.
+console.log(foo.bar);           </pre>
+
+<h3 id="Arrayelemente_löschen">Arrayelemente löschen</h3>
+
+<p>Wenn ein Arrayelement gelöscht wird, hat das keinen Effekt auf die Arraylänge. Das funktioniert nur, wenn man das letzte Arrayelement lösche.</p>
+
+<p>Wenn der <code>delete</code> Operator ein Arrayelement löscht, ist das Element nicht mehr länger im Array. Im folgenden Beispiel wird <code>trees[3]</code> mit <code>delete</code> gelöscht.</p>
+
+<pre class="brush: js">var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple'];
+delete trees[3];
+if (3 in trees) {
+    // das wird nicht ausgeführt
+}</pre>
+
+<p>Wenn ein Arrayelement existent sein soll, aber den Wert undefined haben soll, benutzt man <code>undefined</code> statt dem <code>delete</code> Operator. Im folgenden Beispiel bekommt <code>trees[3]</code> den Wert undefined zugewiesen, aber das Arrayelement existiert noch:</p>
+
+<pre class="brush: js">var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple'];
+trees[3] = undefined;
+if (3 in trees) {
+    // das wird ausgeführt
+}</pre>
+
+<p>Wenn stattdessen ein Arrayelement gelöscht werden soll, wobei auch der Inhalt des Arrays geändert werden soll, so benutzt man die <code>{{jsxref("Array.splice", "splice")}}</code> Methode. Das folgende Beispiel entfernt <code>trees[3]</code> komplett vom Array mit dem Einsatz von <code>{{jsxref("Array.splice", "splice")}}</code>:</p>
+
+<pre class="brush: js">var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple'];
+trees.splice(3, 1);
+console.log(trees); // ["redwood", "bay", "cedar", "maple"];</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-delete-operator', 'The delete Operator')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-delete-operator', 'The delete Operator')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.4.1', 'The delete Operator')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.4.1', 'The delete Operator')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.2.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.operators.delete")}}</p>
+
+<h2 id="Browserübergeifende_Hinweise">Browserübergeifende Hinweise</h2>
+
+<p>Obwohl ECMAScript die Iterationsreihenfolge von Objekten, die von der Implementierung abhängig ist, vornimmt, scheint es, dass alle gängigen Browser eine Iterationsreihenfolge basierend auf der frühesten hinzugefügten Eigenschaft unterstützen (zumindest für Eigenschaften, die nicht auf dem Prototyp basieren). Wenn jedoch bei Internet Explorer delete für eine Eigenschaft verwendet wird, führt dies zu verwirrendem Verhalten und verhindert, dass andere Browser einfache Objekte wie Objektliterale als geordnete assoziative Arrays verwenden. Wenn im Explorer der Wert der Eigenschaft tatsächlich auf undefiniert festgelegt ist, wird die Eigenschaft, wenn sie später eine Eigenschaft mit demselben Namen zurückgibt, an der alten Position iteriert - nicht am Ende der Iterationssequenz, wie beim löschte und wieder einfügen der Eigenschaft erwartet.</p>
+
+<p>Wenn man also ein geordnetes assoziatives Array in einer browserübergreifenden Umgebung simulieren möchten, muss man entweder zwei separate Arrays verwenden (eines für die Schlüssel und das andere für die Werte) oder ein Array von Objekten mit einer einzigen Eigenschaft erstellen. etc.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="http://perfectionkills.com/understanding-delete/">In depth analysis on delete</a></li>
+ <li>{{jsxref("Reflect.deleteProperty()")}}</li>
+ <li>{{jsxref("Map.prototype.delete()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/operators/destrukturierende_zuweisung/index.html b/files/de/web/javascript/reference/operators/destrukturierende_zuweisung/index.html
new file mode 100644
index 0000000000..1ece290e90
--- /dev/null
+++ b/files/de/web/javascript/reference/operators/destrukturierende_zuweisung/index.html
@@ -0,0 +1,404 @@
+---
+title: Destrukturierende Zuweisung
+slug: Web/JavaScript/Reference/Operators/Destrukturierende_Zuweisung
+tags:
+  - Destructuring
+  - ECMAScript 2015
+  - JavaScript
+  - Operator
+translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Die <strong>destrukturierende Zuweisung</strong> ermöglicht es, Daten aus Arrays oder Objekten zu extrahieren, und zwar mit Hilfe einer Syntax, die der Konstruktion von Array- und Objekt-Literalen nachempfunden ist.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-destructuringassignment.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:js">var a, b, rest;
+[a, b] = [10, 20];
+console.log(a); // 10
+console.log(b); // 20
+
+[a, b, ...rest] = [10, 20, 30, 40, 50];
+console.log(a); // 10
+console.log(b): // 20
+console.log(rest); // [30, 40, 50]
+
+({ a, b } = { a: 10, b: 20 });
+console.log(a); // 10
+console.log(b); // 20
+
+
+// Stage 3 Vorschlag
+({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40 });
+console.log(a); // 10
+console.log(b); // 20
+console.log(rest); // {c: 30, d: 40}
+</pre>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die Objekt- und Array-Literal Ausdrücke stellen einen einfachen Weg für die Erstellung von <em>ad hoc</em> Datenpaketen zur Verfügung.</p>
+
+<pre class="brush: js">var x = [1, 2, 3, 4, 5];</pre>
+
+<p>Die destrukturierende Zuweisung nutzt eine ähnliche Syntax, aber auf der linken Seite der Zuweisung, um zu definieren, welche Werte von der Quellvariablen ausgepackt werden muss.</p>
+
+<pre class="brush: js">var x = [1, 2, 3, 4, 5];
+var [y, z] = x;
+console.log(y); // 1
+console.log(z); // 2
+</pre>
+
+<p>Diese Fähigkeit ist so ähnlich wie in den Sprachen Perl und Python.</p>
+
+<h2 id="Array-Destrukturierung">Array-Destrukturierung</h2>
+
+<h3 id="Einfaches_Variablenzuweisung">Einfaches Variablenzuweisung</h3>
+
+<pre class="brush: js">var foo = ['one', 'two', 'three'];
+
+var [one, two, three] = foo;
+console.log(one); // "one"
+console.log(two); // "two"
+console.log(three); // "three"
+</pre>
+
+<h3 id="Zuweisung_separat_von_Deklaration">Zuweisung separat von Deklaration</h3>
+
+<p>Eine destrukturierende Zuweisung kann ohne Deklaration im Zuweisungsstatement vorgenommen werden.</p>
+
+<pre class="brush:js">var a, b;
+
+[a, b] = [1, 2];
+console.log(a); // 1
+console.log(b); // 2</pre>
+
+<h3 id="Standardwerte">Standardwerte</h3>
+
+<p>Einer Variablen kann ein Standardwert zugewiesen werden, welcher greift, wenn der Wert im Fall vom auspacken des Arrays <code>undefined</code> ist.</p>
+
+<pre class="brush: js">var a, b;
+
+[a=5, b=7] = [1];
+console.log(a); // 1
+console.log(b); // 7</pre>
+
+<h3 id="Variablen_tauschen">Variablen tauschen</h3>
+
+<p>Zwei Variablenwerte können mit destrukturierenden Zuweisungen vertauscht werden.</p>
+
+<p>Ohne destrukturierende Zuweisung benötigt man für den Tausch zweier Werte eine temporäre Variable (oder, in manchen Low-level Sprachen, den <a class="external" href="http://en.wikipedia.org/wiki/XOR_swap">XOR-swap Trick</a>).</p>
+
+<pre class="brush:js">var a = 1;
+var b = 3;
+
+[a, b] = [b, a];
+console.log(a); // 3
+console.log(b); // 1</pre>
+
+<h3 id="Array_von_Funktion_zurückgeben_und_einlesen">Array von Funktion zurückgeben und einlesen</h3>
+
+<p>Es ist immer möglich einen Array von einer Funktion zurückzugeben. Destrukturierung kann mit dem Arrayrückgabewert verwendet werden um mehrerer Werte auszuwählen.</p>
+
+<p>In diesem Beispiel gibt <code>f()</code> den Wert <code>[1, 2]</code> zurück, welcher in einer Zeile mittels Destrukturierung eingelesen werden kann.</p>
+
+<pre class="brush:js">function f() {
+  return [1, 2];
+}
+
+var a, b;
+[a, b] = f();
+console.log(a); // 1
+console.log(b); // 2
+</pre>
+
+<h3 id="Rückgabewerte_teilweise_ignorieren">Rückgabewerte teilweise ignorieren</h3>
+
+<p>Man kann auch Rückgabewerte, an denen man nicht interessiert ist, ignorieren:</p>
+
+<pre class="brush:js">function f() {
+  return [1, 2, 3];
+}
+
+var [a, , b] = f();
+console.log("A ist " + a + " B ist " + b);
+</pre>
+
+<p>Nach Ausführung dieses Codes ist a =1 und b = 3. Der Wert 2 wird ignoriert. Auf diese Art kann man jegliche (auch alle) zurückgegebene Werte ignorieren. Zum Beispiel:</p>
+
+<pre class="brush:js">[,,] = f();</pre>
+
+<h3 id="Den_Rest_eines_Arrays_einer_Variablen_zuweisen">Den Rest eines Arrays einer Variablen zuweisen</h3>
+
+<p>Wenn ein Array destrukturiert wird, kann man beim Auspacken den restlichen Teil eines Arrays einer Varaible mit dem Restpattern zuweisen:</p>
+
+<pre class="brush: js">var [a, ...b] = [1, 2, 3];
+console.log(a); // 1
+console.log(b); // [2, 3]</pre>
+
+<p>Zu beachten ist, dass ein {{jsxref("SyntaxError")}} erzeugt wird, wenn auf der linken Seite des Restelements ein trennendes Komma steht:</p>
+
+<pre class="brush: js example-bad">var [a, ...b,] = [1, 2, 3];
+// SyntaxError: rest element may not have a trailing comma</pre>
+
+<h3 id="Auspacken_von_Treffern_eines_regulären_Ausdrucks">Auspacken von Treffern eines regulären Ausdrucks</h3>
+
+<p>Wenn die Methode <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec">exec()</a></code> für reguläre Ausdrücke einen Treffer findet, gibt sie ein Array zurück, das erstens, den gesamten, passenden Teil des Strings und dann die Teile des Strings enthält, die den einzelnen geklammerten Gruppen im regulären Ausdruck entsprechen. Destrukturierende erlaubt es die Teile aus diesem Array auf einfache Art herauszuziehen, wobei der String mit dem kompletten Treffer ignoriert werden kann, falls er nicht benötigt wird.</p>
+
+<pre class="brush:js">function parseProtocol(url) {
+  var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
+  if(!parsedURL) {
+    return false;
+  }
+  console.log(parsedURL); // ["https://developer.mozilla.org/en-US/Web/JavaScript", "https", "developer.mozilla.org", "en-US/Web/JavaScript"]
+
+  var [, protocol, fullhost, fullpath] = parsedURL;
+  return protocol;
+}
+
+console.log(parseProtocol('https://developer.mozilla.org/en-US/Web/JavaScript')); // "https"
+</pre>
+
+<h2 id="Objektdestrukturierung">Objektdestrukturierung</h2>
+
+<h3 id="Einfache_Zuweisung">Einfache Zuweisung</h3>
+
+<pre class="brush: js">var o = {p: 42, q: true};
+var {p, q} = o;
+
+console.log(p); // 42
+console.log(q); // true
+</pre>
+
+<h3 id="Zuweisung_ohne_Deklaration">Zuweisung ohne Deklaration</h3>
+
+<p>Die destrukturierende Zuweisung kann ohne eine Deklaration im Zuweisungs-Statement durchgeführt werden.</p>
+
+<pre class="brush:js">var a, b;
+
+({a, b} = {a: 1, b: 2});</pre>
+
+<div class="note">
+<p>Die runden Klammern <code>( ... )</code> wird benötigt wenn man die destrukturierende Zuweisung mit Objektliteralen ohne eine Deklaration durchführen möchte.</p>
+
+<p><code>{a, b} = {a: 1, b: 2}</code> ist keine valide eigenständige Syntax, weil <code>{a, b}</code> auf der linken Seite als ein Block und nicht als Objektliteral erkannt wird.</p>
+
+<p><code>({a, b} = {a: 1, b: 2})</code> ist genauso gültig wie <code>var {a, b} = {a: 1, b: 2}</code></p>
+
+<p>HINWEIS: Der <code>( ... )</code> Ausdruck muss durch ein vorangestelltes Semikolen benutzt werden oder es führt eine Funktion aus der vorherigen Zeile aus.</p>
+</div>
+
+<h3 id="Zu_neuen_Varaiblennamen_zuweisen">Zu neuen Varaiblennamen zuweisen</h3>
+
+<p>Eine Eigenschaft kann aus einem Objekt ausgepackt werden und zu einer Variablen mit einem anderen Namen zugewiesen werden.</p>
+
+<pre class="brush: js">var o = {p: 42, q: true};
+var {p: foo, q: bar} = o;
+
+console.log(foo); // 42
+console.log(bar); // true</pre>
+
+<h3 id="Standardwerte_2">Standardwerte</h3>
+
+<p>Einer Variablen können Standardwerte zugewiesen werden, wenn der ausgepackte Wert aus dem Objekt <code>undefined</code> ist.</p>
+
+<pre class="brush: js">var {a = 10, b = 5} = {a: 3};
+
+console.log(a); // 3
+console.log(b); // 5</pre>
+
+<h3 id="Zuweisen_eines_neuen_Variablennamen_und_eines_Standardwertes">Zuweisen eines neuen Variablennamen und eines Standardwertes</h3>
+
+<p>Eine Eigenschaft kann sowohl 1) aus einem Objekt ausgepackt werden und einer Variablen mit einem andern Namen zugewiesen werden und 2) einen Standardwert unterstützen, wenn der ausgepackte Wert <code>undefined</code> ist.</p>
+
+<pre class="brush: js">var {a:aa = 10, b:bb = 5} = {a: 3};
+
+console.log(aa); // 3
+console.log(bb); // 5</pre>
+
+<h3 id="Standardwerte_für_Funktionsparamter_setzen">Standardwerte für Funktionsparamter setzen</h3>
+
+<h4 id="ES5_Version">ES5 Version</h4>
+
+<pre class="brush: js">function drawES5Chart(options) {
+  options = options === undefined ? {} : options;
+  var size = options.size === undefined ? 'big' : options.size;
+  var cords = options.cords === undefined ? { x: 0, y: 0 } : options.cords;
+  var radius = options.radius === undefined ? 25 : options.radius;
+  console.log(size, cords, radius);
+  // jetzt zeichnen wir endlich ein paar Charts
+}
+
+drawES5Chart({
+  cords: { x: 18, y: 30 },
+  radius: 30
+});</pre>
+
+<h4 id="ES2015-Version">ES2015-Version</h4>
+
+<pre class="brush: js">function drawES2015Chart({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {})
+{
+  console.log(size, cords, radius);
+  // zeichne ein paar Graphen
+}
+
+drawES2015Chart({
+  cords: { x: 18, y: 30 },
+  radius: 30
+});</pre>
+
+<div class="note">
+<p>In der Funktionssignatur für <strong><code>drawES2015Chart</code></strong> oben ist der destrukturierten linken Seite ein leeres Objektliteral zugewiesen, auf der rechten Seite: <code>{size = 'big', cords = {x: 0, y: 0}, radius = 25} = {}</code>. Man kann die Funktion auch ohne die rechte Zuweisungsseite schreiben. Wenn jedoch die Zuweisung auf der rechten Seite weglassen wird, sucht die Funktion nach mindestens einem Argument, das beim Aufruf bereitgestellt wird, während man in der aktuellen Form einfach <code><strong>drawES2015Chart()</strong></code> aufrufen kann, ohne Parameter anzugeben. Das aktuelle Design ist nützlich, wenn man die Funktion, ohne Parameter anzugeben, aufrufen möchte. Das andere ist nützlich, um sicherzustellen , dass ein Objekt an die Funktion übergeben wird.</p>
+</div>
+
+<h3 id="Destrukturierung_von_verschachtelten_Objekten_und_Arrays">Destrukturierung von verschachtelten Objekten und Arrays</h3>
+
+<pre class="brush:js">var metadata = {
+    title: "Scratchpad",
+    translations: [
+      {
+        locale: "de",
+        localization_tags: [ ],
+        last_edit: "2014-04-14T08:43:37",
+        url: "/de/docs/Tools/Scratchpad",
+        title: "JavaScript-Umgebung"
+      }
+    ],
+    url: "/en-US/docs/Tools/Scratchpad"
+};
+
+var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;
+
+console.log(englishTitle); // "Scratchpad"
+console.log(localeTitle);  // "JavaScript-Umgebung"</pre>
+
+<h3 id="for_of_Iteration_und_Destrukturierung">"for of" Iteration und Destrukturierung</h3>
+
+<pre class="brush: js">var people = [
+  {
+    name: "Mike Smith",
+    family: {
+      mother: "Jane Smith",
+      father: "Harry Smith",
+      sister: "Samantha Smith"
+    },
+    age: 35
+  },
+  {
+    name: "Tom Jones",
+    family: {
+      mother: "Norah Jones",
+      father: "Richard Jones",
+      brother: "Howard Jones"
+    },
+    age: 25
+  }
+];
+
+for (var {name: n, family: { father: f } } of people) {
+  console.log("Name: " + n + ", Father: " + f);
+}
+
+// "Name: Mike Smith, Father: Harry Smith"
+// "Name: Tom Jones, Father: Richard Jones"</pre>
+
+<h3 id="Auspacken_von_Objektfeldern_die_als_Funktionsparameter_übergeben_werden">Auspacken von Objektfeldern, die als Funktionsparameter übergeben werden</h3>
+
+<pre class="brush:js">function userId({id}) {
+  return id;
+}
+
+function whois({displayName: displayName, fullName: {firstName: name}}){
+  console.log(displayName + " is " + name);
+}
+
+var user = {
+  id: 42,
+  displayName: "jdoe",
+  fullName: {
+      firstName: "John",
+      lastName: "Doe"
+  }
+};
+
+console.log("userId: " + userId(user)); // "userId: 42"
+whois(user); // "jdoe is John"</pre>
+
+<p>Dies ermittelt <code>id</code>, <code>displayName</code> und <code>firstName</code> vom user Objekt und gibt sie aus.</p>
+
+<h3 id="Berechnete_Objekteigenschaftsnamen_und_Destrukturierung">Berechnete Objekteigenschaftsnamen und Destrukturierung</h3>
+
+<p>Berechnete Eigenschaftsnamen, wie bei <a href="/de/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names">Objektliteralen</a>, können bei der Destruktierung verwendet werden.</p>
+
+<pre class="brush: js">let key = "z";
+let { [key]: foo } = { z: "bar" };
+
+console.log(foo); // "bar"
+</pre>
+
+<h3 id="Rest_in_Objektdestrukturierung">Rest in Objektdestrukturierung</h3>
+
+<p>Die <a href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Eigenschaften für den ECMAScript</a> Vorschlag (Stage 3) fügt die <a href="/de/docs/Web/JavaScript/Reference/Functions/rest_parameters">Rest-</a>Syntax zur Destrukturierung hinzu. Rest Eigenschaften sammeln die restlichen, eigenen, aufzählbaren Eigenschaftsschlüssel, die noch nicht von der Destrukturierung erfasst wurden, auf.</p>
+
+<pre class="brush: js">var {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
+a; // 10
+b; // 20
+rest; // { c: 30, d: 40 }</pre>
+
+<h3 id="Ungültige_JavaScript_Bezeichner_als_Eigenschaftsnamen">Ungültige JavaScript Bezeichner als Eigenschaftsnamen</h3>
+
+<p>Destrukturierung kann mit Eigenschaftsnamen benutzt werden, die keine gültigen JavaScript <a href="/de/docs/Glossary/Identifier">Bezeichner</a> sind, indem ein alternativer valider Beizeichner angegeben wird.</p>
+
+<pre class="brush: js">const foo = { 'fizz-buzz': true }
+const { 'fizz-buzz': fizzBuzz } = foo
+
+console.log(fizzBuzz); // "true"
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-destructuring-assignment', 'Destructuring assignment')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-destructuring-assignment', 'Destructuring assignment')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Properties for ECMAScript</a></td>
+   <td>Draft</td>
+   <td>Stage 3 Entwurf.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.operators.destructuring")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Zuweisungsoperatoren</a></li>
+ <li><a href="https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/">"ES6 in Depth: Destructuring" auf hacks.mozilla.org</a></li>
+ <li><a href="https://stackoverflow.com/questions/28532868/basic-nodejs-require-syntax#28532919">Multiple ways of using destructuring assignments (Stack Overflow)</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/operators/expression_closures/index.html b/files/de/web/javascript/reference/operators/expression_closures/index.html
new file mode 100644
index 0000000000..16bda73cd4
--- /dev/null
+++ b/files/de/web/javascript/reference/operators/expression_closures/index.html
@@ -0,0 +1,76 @@
+---
+title: Ausdrucks Closures
+slug: Web/JavaScript/Reference/Operators/Expression_closures
+tags:
+  - Functions
+  - JavaScript
+  - Reference
+translation_of: Archive/Web/JavaScript/Expression_closures
+---
+<div class="warning"><strong>Nicht Standardisiert. Nicht benutzen!</strong><br>
+Die Ausdrucks Closure-Syntax ist eine veraltete Firefox spezifische Funktion und wurde mit Firefox 60 entfernt. In Zukunft sollten <a href="/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Pfeilfunktionen</a> genutzt werden.</div>
+
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Ausdrucks Closures sind eine kurze Funktionssyntax für das Schreiben einfacher Funktionen.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">function [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]])
+   <em>expression</em>
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Der Funktionsname. Kann bei anonymen Funktionen weggelassen werden. Der Name ist nur lokal im Funktionskörper verfügbar.</dd>
+ <dt><code>paramN</code></dt>
+ <dd>Der Name eines Arguments, welcher der Funktion übergeben wird. Eine Funktion kann bis zu 255 Argumente haben.</dd>
+ <dt><code>expression</code></dt>
+ <dd>Der Ausdruck, welcher den Funktionskörper einer Funktion bildet.</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Diese Funktion ist nicht mehr als eine eine Kurzschreibweise für einfache Funktionen, die der Sprache einer typischen <a class="external" href="http://en.wikipedia.org/wiki/Lambda_calculus#Lambda_calculus_and_programming_languages">Lambda Notation</a> ähnelt.</p>
+
+<p>JavaScript 1.7 und älter:</p>
+
+<pre class="brush: js">function(x) { return x * x; }</pre>
+
+<p>JavaScript 1.8:</p>
+
+<pre class="brush: js">function(x) x * x</pre>
+
+<p>Die Syntax erlaubt es die Klammern und das 'return' Statement wegzulassen - sie sind implizit. Es gibt keine weiteren Vorteile, wenn man den Code so schreibt, außer dass es kürzer ist.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Eine Kurzschreibweise für Eventlistener:</p>
+
+<pre class="brush: js"> document.addEventListener('click', function() false, true);
+</pre>
+
+<p>Einsatz dieser Notation mit der Array Funktion <code>some</code> aus JavaScript 1.6:</p>
+
+<pre class="brush: js">elems.some(function(elem) elem.type == 'text');
+</pre>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.operators.expression_closures")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Functions_and_function_scope", "Funktionen und Funktionsgültigkeitsbereiche")}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Statements/function", "Funktionsstatement")}}</li>
+ <li>{{jsxref("Operators/function", "Funktionsausdruck")}}</li>
+ <li>{{jsxref("Statements/function*", "function* Statement")}}</li>
+ <li>{{jsxref("Operators/function*", "function* Ausdruck")}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/operators/function/index.html b/files/de/web/javascript/reference/operators/function/index.html
new file mode 100644
index 0000000000..e6734ae8f8
--- /dev/null
+++ b/files/de/web/javascript/reference/operators/function/index.html
@@ -0,0 +1,151 @@
+---
+title: Funktionsausdruck
+slug: Web/JavaScript/Reference/Operators/function
+tags:
+  - Funktion
+  - JavaScript
+  - Operator
+  - Primary Expressions
+translation_of: Web/JavaScript/Reference/Operators/function
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Das Schlüsselwort <strong><code>function</code></strong> kann benutzt werden, um eine Funktion innerhalb eines Ausdrucks zu definieren.</p>
+
+<p>Man kann Funktionen auch mit Hilfe des <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Function">Function</a></code>-Konstruktors oder als <a href="/de/docs/Web/JavaScript/Reference/Statements/function">Funktionsdeklarationen</a> definieren.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-functionexpression.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var meineFunktion = function [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) {
+   <em>statements</em>
+};</pre>
+
+<p>Seit ES2015 können außerdem <a href="/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Pfeilfunktionen</a> benutzt werden.</p>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Der Funktionsname. Kann weggelassen werden, wenn es sich um eine <em>anonyme </em>Funktion handelt. Der Name ist nur im Funktionskörper referenzierbar.</dd>
+ <dt><code>paramN</code></dt>
+ <dd>Der Name eines Argumentes, welches der Funktion übergeben wird.</dd>
+ <dt><code>statements</code></dt>
+ <dd>Die Befehle, aus denen der Funktionskörper besteht.</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Ein Funktionsausdruck ist einem Funktionsstatement sehr ähnlich und hat fast die gleiche Syntax (siehe <a href="/de/docs/Web/JavaScript/Reference/Statements/function">Funktionsstatement</a>). Der größte Unterschied zwischen einem Funktionsausdruck und einem Funktionsstatement ist der <em>Funktionsname, </em>der in der Funktionsausdruck weggelassen werden kann, um eine anonyme Funktion zu erstellen. Ein Funktionsausdruck kann als <strong>IIFE </strong>(Immediately Invoked Function Expression) genutzt werden, die sofort nach Definition ausgeführt wird. Im Kapitel <a href="/de/docs/Web/JavaScript/Reference/Functions">Funktionen</a> finden sich weitere Informationen.</p>
+
+<h3 id="Hoisting_von_Funktionsausdrücken">Hoisting von Funktionsausdrücken</h3>
+
+<p>Funktionsausdrücke in Javascript werden nicht automatisch an den Beginn des Scopes gehoben (hoisted), anders als {{jsxref("Statements/function", "Funktionsdeklarationen", "#Hochziehen_der_Funktionsdeklaration")}}. Funktionsausdrücke können nicht vor Definition im Code aufgerufen werden.</p>
+
+<pre class="brush: js">notHoisted(); // TypeError: notHoisted is not a function
+
+var notHoisted = function() {
+   console.log('bar');
+};
+</pre>
+
+<h3 id="Benannte_Funktionsausdrücke">Benannte Funktionsausdrücke</h3>
+
+<p>Wenn man die aktuelle Funktion innerhalb des Funktionskörpers referenzieren will, muss ein Benannter Funktionsausdruck erstellt werden. <u><strong>Dieser Name ist nur im Funktionskörper referenzierbar. </strong></u>Das verhindert den Gebrauch der nicht standardisierten <code><a href="/de/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee</a></code> Eigenschaft.</p>
+
+<pre class="brush: js">var math = {
+  'fakultaet': function fakultaet(n) {
+    if (n &lt;= 1)
+      return 1;
+    return n * fakultaet(n - 1);
+  }
+};
+
+math.fakultaet(3) //3;2;1;
+</pre>
+
+<p>Die Variable, der ein Funktionsausdruck zugewiesen wurde, hat eine <code>name</code> Eigenschaft. Wenn der Name der Funktion ausgelassen wird, wird dies der Variablenname sein (implizierter Name). Ist die Funktion benannt, wird in der Eigenschaft der Funktionsname zu finden sein (expliziter Name). Dies trifft auch auf <a href="/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Pfeilfunktionen</a> zu (diese haben keinen Namen so dass der Variablenname nur implizit gesetzt werden kann)</p>
+
+<pre class="brush: js">var foo = function() {}
+foo.name // "foo"
+
+var foo2 = foo
+foo2.name // "foo"
+
+var bar = function baz() {}
+bar.name // "baz"
+
+console.log(foo === foo2); // true
+console.log(typeof baz);   // undefined
+console.log(bar === baz);  // false (Fehler, weil baz == undefined)
+</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Das folgende Beispiel definiert eine unbenannte Funktion und weist sie <code>x</code> zu. Die Funktion gibt das Quadrat ihres Argumentes zurück.</p>
+
+<pre class="brush: js">var x = function(y) {
+   return y * y;
+};
+</pre>
+
+<p>Meistens werden Funktionsausdrücke in <a href="/de/docs/Glossary/Callback_function">Callbacks</a> genutzt:</p>
+
+<pre class="brush: js">button.addEventListener('click', function(event) {
+    console.log('button wurde geklickt!')
+})</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-13', 'Function definition')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-13', 'Function definition')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initiale Fefinition. Implementiert in JavaScript 1.5.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.operators.function")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Arrow_functions", "Arrow functions")}}</li>
+ <li>{{jsxref("Functions_and_function_scope", "Funktionen und Funktionsgültigkeitsbereiche")}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Statements/function", "Funktionsstatement")}}</li>
+ <li>{{jsxref("Statements/function*", "function* Statement")}}</li>
+ <li>{{jsxref("Operators/function*", "function* Ausdruck")}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+ <li>{{jsxref("Statements/async_function", "Asynchrone Funktion")}}</li>
+ <li>{{jsxref("Operators/async_function", "Asynchroner Funktionsausdruck")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/operators/function_star_/index.html b/files/de/web/javascript/reference/operators/function_star_/index.html
new file mode 100644
index 0000000000..578d88ccc6
--- /dev/null
+++ b/files/de/web/javascript/reference/operators/function_star_/index.html
@@ -0,0 +1,91 @@
+---
+title: function* Ausdruck
+slug: Web/JavaScript/Reference/Operators/function*
+tags:
+  - ECMAScript 2015
+  - Function
+  - Iterator
+  - JavaScript
+  - Operator
+  - Primary Expression
+translation_of: Web/JavaScript/Reference/Operators/function*
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Das <strong><code>function*</code></strong> Schlüsselwort kann benutzt werden, um Generatorfunktionen in einem Ausdruck zu definieren.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-functionasteriskexpression.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">function* [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) {
+   <em>statements</em>
+}</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Der Funktionsname. Kann weggelassen werden, wenn es ein <em>anonymen </em>Funktion ist. Der Name ist nur im Funktionskörper referenzierbar.</dd>
+ <dt><code>paramN</code></dt>
+ <dd>Der Name eines Argumentes, welches der Funktion übergeben wird. Eine Funktion kann bis zu 255 Argumente haben.</dd>
+ <dt><code>statements</code></dt>
+ <dd>Die Statements, die den Rumpf der Funktion darstellen.</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Ein <code>function*</code> Ausdruck sehr ähnlich zu {{jsxref('Statements/function*', 'function* Statements')}} und hat die selbe Syntax. Der Hauptunterschied zwischen einem <code>function*</code> Ausdruck und <code>function*</code> Statement ist der <em>Funktionsname</em>, welcher in einem <code>function*</code> Ausdruck weggelassen werden kann, um eine <em>anonyme</em> Funktion zu erstellen. Mehr Informationen sind im Kapitel <a href="/de/docs/Web/JavaScript/Reference/Functions">Funktionen</a> enthalten.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Das folgende Beispiel definiert eine namenlose Generatorfunktion und weist diese <code>x</code> zu. Die Funktion liefert das Quadrat ihres Argumentes:</p>
+
+<pre class="brush: js">var x = function*(y) {
+   yield y * y;
+};
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Komment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#', 'function*')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#', 'function*')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.operators.function_star")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Statements/function*", "function* Statement")}}</li>
+ <li>{{jsxref("GeneratorFunction")}} Objekt</li>
+ <li><a href="/de/docs/Web/JavaScript/Guide/The_Iterator_protocol">Das Iterator Protokoll</a></li>
+ <li>{{jsxref("Operators/yield", "yield")}}</li>
+ <li>{{jsxref("Operators/yield*", "yield*")}}</li>
+ <li>{{jsxref("Function")}} Objekt</li>
+ <li>{{jsxref("Statements/function", "Funktionsstatement")}}</li>
+ <li>{{jsxref("Operators/function", "Funktionsausdruck")}}</li>
+ <li>{{jsxref("Functions_and_function_scope", "Funktionen und Funktionsgültigkeitsbereiche")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/operators/generator_comprehensions/index.html b/files/de/web/javascript/reference/operators/generator_comprehensions/index.html
new file mode 100644
index 0000000000..843865b399
--- /dev/null
+++ b/files/de/web/javascript/reference/operators/generator_comprehensions/index.html
@@ -0,0 +1,172 @@
+---
+title: Generator Comprehensions
+slug: Web/JavaScript/Reference/Operators/Generator_comprehensions
+tags:
+  - Iterator
+  - JavaScript
+  - Non-standard
+  - Reference
+translation_of: Archive/Web/JavaScript/Generator_comprehensions
+---
+<div class="warning"><strong>Non standardisiert. Nicht einsetzen!</strong><br>
+Die Generator Comprehensions Syntax ist nicht standardisiert und wurde mit Firefox 58 entfernt. Zukünftig sollte stattdessen {{jsxref("Statements/function*", "Generatoren", "", 1)}} eingesetzt werden.</div>
+
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Die <strong>Generator Comprehensions</strong> Syntax war ein JavaScript Ausdruck welcher es erlaubt schnell einen neuen Generator auf Basis eines existierenden Iterable Objektes zu erstellen. Jedoch wurde diese aus dem Standard und der Firefox Implementierung entfernt. Sie soll nicht mehr eingesetzt werden!</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">(for (x of iterable) x)
+(for (x of iterable) if (condition) x)
+(for (x of iterable) for (y of iterable) x + y)
+</pre>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>In der Generator Comprehension gibt es zwei erlaubte Arten von Komponenten:</p>
+
+<ul>
+ <li>{{jsxref("Statements/for...of", "for...of")}} und</li>
+ <li>{{jsxref("Statements/if...else", "if")}}</li>
+</ul>
+
+<p>Die <code>for-of</code> Iteration ist immer die erste Komponente. Mehrere <code>for-of</code> Iterationen oder <code>if</code> Statements sind erlaubt.</p>
+
+<p>Ein signifikanter Nachteil von {{jsxref("Operators/Array_comprehensions","Array Comprehensions","","true")}} ist, dass diese ein völlig neues Array im Speicher erstellt wird. Wenn der Input für die Comprehension selbst ein kleines Array ist, ist der entstehende Overhead nicht signifikant — aber wenn der Input ein langes Array ist oder ein teurer (oder tatsächlich unendlicher) Generator ist, kann die Erstellung eines neuen Arrays problematisch werden.</p>
+
+<p>Generatoren erlauben das nachträgliche Berechnen von Sequenzen, mit Elementen, die dann Berechnet werden, wenn sie benötigt werden. Generator Comprehensions sind syntaktisch fast identisch zu Array Comprehensions — sie benutzen runde Klammern statt eckigen Klammern — jedoch erstellen sie Generator statt eines Arrays, welcher dann ausgeführt werden kann, wenn es benötigt wird. Man kann diese Funktion als Kurzsyntax für das Erstellen von Generatoren sehen.</p>
+
+<p>Angenommen man hat ein Iterator <code>it</code> welcher über eine große Sequenz von Integers iteriert. Wir wollen einen neuen Iterator erstellen, der über das Doppelte des Integers iteriert. Eine Array Comprehension würde ein volles Array im Speicher erstellen, welches die doppelten Werte enthält:</p>
+
+<pre class="brush: js">var doubles = [for (i in it) i * 2];
+</pre>
+
+<p>Auf der anderen Seite würde eine Generator Comprehension einen neuen Iterator erstellen, welcher die verdoppelten Werte erste dann erstellt, wenn sie benötigt werden:</p>
+
+<pre class="brush: js">var it2 = (for (i in it) i * 2);
+console.log(it2.next()); // The first value from it, doubled
+console.log(it2.next()); // The second value from it, doubled
+</pre>
+
+<p>Wenn eine Generator Comprehension als Argument einer Funktion eingesetzt wird, können durch die Funktionsaufrufsklammern die äußeren Klammern weggelassen werden:</p>
+
+<pre class="brush: js">var result = doSomething(for (i in it) i * 2);
+</pre>
+
+<p>Der signifikante Unterschied zwischen den beiden Beispiel ist beim Einsatz der Generator Comprehension, dass man nur einmal über die ganze Datenstruktur iterieren muss, während bei der Array Comprehension zweimal iteriert werden muss, beim Erstellen und beim eigentlichen Iterieren.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einfache_Generator_Comprehensions">Einfache Generator Comprehensions</h3>
+
+<pre class="brush:js">(for (i of [1, 2, 3]) i * i );
+// generator function which yields 1, 4, and 9
+
+[...(for (i of [1, 2, 3]) i * i )];
+// [1, 4, 9]
+
+var abc = ['A', 'B', 'C'];
+(for (letters of abc) letters.toLowerCase());
+// generator function which yields "a", "b", and "c"
+</pre>
+
+<h3 id="Generator_Comprehensions_mit_if_Statement">Generator Comprehensions mit if Statement</h3>
+
+<pre class="brush: js">var years = [1954, 1974, 1990, 2006, 2010, 2014];
+
+(for (year of years) if (year &gt; 2000) year);
+// generator function which yields 2006, 2010, and 2014
+
+(for (year of years) if (year &gt; 2000) if (year &lt; 2010) year);
+// generator function which yields 2006, the same as below:
+
+(for (year of years) if (year &gt; 2000 &amp;&amp; year &lt; 2010) year);
+// generator function which yields 2006
+</pre>
+
+<h3 id="Generator_Comprehensions_verglichen_mit_Generatorfunktionen">Generator Comprehensions verglichen mit Generatorfunktionen</h3>
+
+<p>Ein einfacher Weg um Generator Comprehension Syntax zu verstehen ist es sie mit Generatorfunktionen zu vergleichen.</p>
+
+<p>Beispiel 1: Einfacher Generator:</p>
+
+<pre class="brush: js">var numbers = [1, 2, 3];
+
+// Generator function
+(function*() {
+  for (let i of numbers) {
+    yield i * i;
+  }
+})();
+
+// Generator comprehension
+(for (i of numbers) i * i );
+
+// Result: both return a generator which yields [1, 4, 9]
+</pre>
+
+<p>Beispiel 2: Einsatz von <code>if</code> in Generatoren.</p>
+
+<pre class="brush: js">var numbers = [1, 2, 3];
+
+// Generator function
+(function*() {
+  for (let i of numbers) {
+    if (i &lt; 3) {
+      yield i * 1;
+    }
+  }
+})();
+
+// Generator comprehension
+(for (i of numbers) if (i &lt; 3) i);
+
+// Result: both return a generator which yields [1, 2]</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Generator Comprehensions waren initial in dem ECMAScript 2015 Entwurf, jedoch wurden sie in der Überarbeitung 27 (August 2014) entfernt. Für Spezifikationssemantik muss in früheren Überarbeitungen von ES2015 nachgeschaut werden.</p>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.operators.generator_comprehensions")}}</p>
+
+<h2 id="Unterschiede_zu_den_älteren_JS1.7JS1.8_Comprehensions">Unterschiede zu den älteren JS1.7/JS1.8 Comprehensions</h2>
+
+<div class="warning">JS1.7/JS1.8 Comprehensions wurden von Gecko 46 entfernt ({{bug(1220564)}}).</div>
+
+<p><strong>Alte Comprehensions Syntax (nicht mehr benutzen!):</strong></p>
+
+<pre class="brush: js example-bad">(X for (Y in Z))
+(X for each (Y in Z))
+(X for (Y of Z))
+</pre>
+
+<p>Unterschiede:</p>
+
+<ul>
+ <li>ES7 Comprehensions erstellen einen Gültigkeitsbereich pro "for" Statement statt einen für die komplette Comprehension.
+  <ul>
+   <li>Alt: <code>[...(()=&gt;x for (x of [0, 1, 2]))][1]() // 2</code></li>
+   <li>Neu: <code>[...(for (x of [0, 1, 2]) ()=&gt;x)][1]() // 1, jede Iteration erstellt eine frische Bindung zu x. </code></li>
+  </ul>
+ </li>
+ <li>ES7 Comprehensions beginnen mit "for" statt eines Zuweisungsausdrucks.
+  <ul>
+   <li>Alt: <code>(i * 2 for (i of numbers))</code></li>
+   <li>Neu: <code>(for (i of numbers) i * 2)</code></li>
+  </ul>
+ </li>
+ <li>ES7 Comprehensions können mehrere <code>if</code> und <code>for</code> Komponenten haben.</li>
+ <li>ES7 Comprehensions funktionieren nur mit <code>{{jsxref("Statements/for...of", "for...of")}}</code> und nicht mit <code>{{jsxref("Statements/for...in", "for...in")}}</code> Iteration.</li>
+</ul>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Statements/for...of", "for...of")}}</li>
+ <li>{{jsxref("Operators/Array_comprehensions", "Array Comprehensions")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/operators/grouping/index.html b/files/de/web/javascript/reference/operators/grouping/index.html
new file mode 100644
index 0000000000..f4056fc12c
--- /dev/null
+++ b/files/de/web/javascript/reference/operators/grouping/index.html
@@ -0,0 +1,91 @@
+---
+title: Gruppierungsoperator
+slug: Web/JavaScript/Reference/Operators/Grouping
+tags:
+  - JavaScript
+  - Operator
+  - Primary Expressions
+translation_of: Web/JavaScript/Reference/Operators/Grouping
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Der Gruppierungsoperator <code>( )</code> kontrolliert die Priorität beim Auswerten von Ausdrücken.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-groupingoperator.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"> ( )</pre>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Der Gruppierungsoperator besteht aus einem runden Klammernpaar um einen Ausdruck oder Teilausdruck, um die normale <a href="/de/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Operator Priorität</a> zu überschreiben, so dass Ausdrücke mit niedriger Priorität vor Ausdrücken mit hoher Priorität ausgewertet werden können. So wie es klingt, gruppiert dieser Operator alles in den Klammern.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Überschreiben von Multiplikation und Division zu erst, wenn Addition und Subtraktion als erstes ausgewertet werden sollen.</p>
+
+<pre class="brush:js">var a = 1;
+var b = 2;
+var c = 3;
+
+// normale Priorität
+a + b * c     // 7
+// wird wie folgt ausgewertet
+a + (b * c)   // 7
+
+// überschreiben der Priorität
+// Addition vor Multiplikation
+(a + b) * c   // 9
+
+// was äquivalent zu folgendem ist
+a * c + b * c // 9
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-grouping-operator', 'The Grouping Operator')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-grouping-operator', 'The Grouping Operator')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.1.6', 'The Grouping Operator')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.1.4', 'The Grouping Operator')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.operators.grouping")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Operator Priorität</a></li>
+ <li>{{jsxref("Operators/delete", "delete")}}</li>
+ <li>{{jsxref("Operators/typeof", "typeof")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/operators/in/index.html b/files/de/web/javascript/reference/operators/in/index.html
new file mode 100644
index 0000000000..8cf0f27136
--- /dev/null
+++ b/files/de/web/javascript/reference/operators/in/index.html
@@ -0,0 +1,145 @@
+---
+title: in operator
+slug: Web/JavaScript/Reference/Operators/in
+tags:
+  - JavaScript
+  - Operator
+  - Relational Operators
+translation_of: Web/JavaScript/Reference/Operators/in
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Der <strong>in operator</strong> gibt true zurück, falls die gegebene Eigenschaft im gegebenen Objekt existiert.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-inoperator.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>prop</em> in <em>object</em></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>Ein String oder Symbol welches einen Namen einer Eigenschaft oder einen Arrayindex (nicht Symbole werden in einen String konvertiert).</dd>
+</dl>
+
+<dl>
+ <dt><code>object</code></dt>
+ <dd>Objekt, bei welchem überprüft wird, ob eine Eigenschaft mit spezifiziertem Namen enthalten ist (oder in der Prototypenkette enthalten ist).</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die folgenden Beispiele zeigen einige Verwendungen des Operators</p>
+
+<pre class="brush:js">// Arrays
+var trees = ["redwood", "bay", "cedar", "oak", "maple"];
+0 in trees        // gibt true zurück
+3 in trees        // gibt true zurück
+6 in trees        // gibt false zurück
+"bay" in trees    // gibt false zurück (man muss den Index
+                  // spezifizieren, nicht den Wert an dem Index)
+"length" in trees // gibt true (length ist eine Eigenschaft von Array
+Symbol.iterator in trees // gibt true zurück (Arrays sind iterable, funktioniert nur in ES2015+))
+
+// Vordefinierte Objekte
+"PI" in Math     //  gibt true zurück
+
+// Eigene Objekte
+var mycar = {make: "Honda", model: "Accord", year: 1998};
+"make" in mycar  // gibt true zurück
+"model" in mycar // gibt true zurück
+</pre>
+
+<p>Man muss auf der rechten Seite des <code>in</code> Operators ein Objekt benutzen. Zum Beispiel kann ein String, der durch einen Konstruktor erstellt wurde, benutzt werden, jedoch funktioniert kein Stringliteral.</p>
+
+<pre class="brush:js">var color1 = new String("green");
+"length" in color1 // gibt true zurück
+
+var color2 = "coral";
+// erzeugt einen Fehler (color2 ist kein String Objekt)
+"length" in color2
+</pre>
+
+<h3 id="Einsatz_von_in_mit_gelöschten_oder_undefined_Eigenschaften.">Einsatz von <code>in</code> mit gelöschten oder undefined Eigenschaften.</h3>
+
+<p>Wenn eine Eigenschaft mit dem <code><a href="/de/docs/Web/JavaScript/Reference/Operators/delete" title="en-US/docs/JavaScript/Reference/Operators/Special/delete">delete</a></code> Operator gelöscht wird, wird der <code>in</code> für diese Eigenschaft <code>false</code> zurückgeben.</p>
+
+<pre class="brush:js">var mycar = {make: "Honda", model: "Accord", year: 1998};
+delete mycar.make;
+"make" in mycar;  // gibt false zurück
+
+var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
+delete trees[3];
+3 in trees; // gibt false zurück
+</pre>
+
+<p>Wenn eine Eigenschaft auf {{jsxref("Global_Objects/undefined", "undefined")}} gesetzt wird, aber nicht gelöscht wird, wird der <code>in</code> Operator <code>true</code> zurückgeben.</p>
+
+<pre class="brush:js">var mycar = {make: "Honda", model: "Accord", year: 1998};
+mycar.make = undefined;
+"make" in mycar;  // gibt true zurück
+</pre>
+
+<pre class="brush:js">var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
+trees[3] = undefined;
+3 in trees; // gibt true zurück
+</pre>
+
+<h3 id="Vererbte_Eigenschaften">Vererbte Eigenschaften</h3>
+
+<p>Der <code>in</code> Operator gibt <code>true</code> für Eigenschaften in der Prototype-Kette zurück.</p>
+
+<pre class="brush:js">"toString" in {}; // gibt true zurück
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-relational-operators', 'Relational Operators')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.8.7', 'The in Operator')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-11.8.7', 'The in Operator')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.4.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.operators.in")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><code><a href="/de/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code></li>
+ <li><code><a href="/de/docs/Web/JavaScript/Reference/Operators/delete" title="en-US/docs/JavaScript/Reference/Operators/Special/delete">delete</a></code></li>
+ <li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li>
+ <li>{{jsxref("Reflect.has()")}}</li>
+ <li><a href="de/docs/Web/JavaScript/Aufzählbarkeit_und_Zugehörigkeit_von_Eigenschaften" title="/en-US/docs/Enumerability_and_ownership_of_properties">Aufzählbarkeit und Zugehörigkeit von Eigenschaften</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/operators/index.html b/files/de/web/javascript/reference/operators/index.html
new file mode 100644
index 0000000000..407f5d8c1c
--- /dev/null
+++ b/files/de/web/javascript/reference/operators/index.html
@@ -0,0 +1,303 @@
+---
+title: Ausdrücke und Operatoren
+slug: Web/JavaScript/Reference/Operators
+tags:
+  - JavaScript
+  - Operators
+translation_of: Web/JavaScript/Reference/Operators
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Dieses Kapitel behandelt alle JavaScript Sprachoperatoren, Ausdrücke und Schlüsselwörter.</p>
+
+<h2 id="Ausdrücke_und_Operatoren_geordnet_nach_Kategorie">Ausdrücke und Operatoren geordnet nach Kategorie</h2>
+
+<p>Die alphabetische Sortierung finden Sie in der linken Seitenspalte.</p>
+
+<h3 id="Grundlegende_Ausdrücke">Grundlegende Ausdrücke</h3>
+
+<p>Elementare Schlüsselwörter und allgemeine Ausdrücke in JavaScript.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/this", "this")}}</dt>
+ <dd>Das <code>this</code> Schlüsselwort referenziert eine spezielle Eigenschaft des Ausführungskontexts.</dd>
+ <dt>{{jsxref("Operators/function", "function")}}</dt>
+ <dd>Der <code>function</code> Schlüsselbegriff definiert einen Funktionsausdruck.</dd>
+ <dt>{{jsxref("Operators/class", "class")}}</dt>
+ <dd>Das <code>class</code> Schlüsselwort definiert einen Klassenausdruck.</dd>
+ <dt>{{jsxref("Operators/function*", "function*")}}</dt>
+ <dd>Das <code>function*</code> Schlüsselword definiert einen Generatorfunktionsausdruck.</dd>
+ <dt>{{jsxref("Operators/yield", "yield")}}</dt>
+ <dd>Eine Generatorfunktion anhalten und fortsetzen.</dd>
+ <dt>{{jsxref("Operators/yield*", "yield*")}}</dt>
+ <dd>Delegiert zu einer anderen Generatorfunktion oder Iterable Objekt.</dd>
+ <dt>{{experimental_inline}} {{jsxref("Operators/async_function", "async function*")}}</dt>
+ <dd><code>async function</code> definiert einen asynchron Funktionsausdruck.</dd>
+ <dt>{{experimental_inline}} {{jsxref("Operators/await", "await")}}</dt>
+ <dd>Hält eine asynchrone Funktion an und setzt sie fort und wartet dabei auf ein erfolgreichen oder nicht erfolgreichen Promise.</dd>
+ <dt>{{jsxref("Global_Objects/Array", "[]")}}</dt>
+ <dd>Array-Initialisierungs/Literal-Syntax.</dd>
+ <dt>{{jsxref("Operators/Object_initializer", "{}")}}</dt>
+ <dd>Objekt-Initialisierungs/Literal-Syntax.</dd>
+ <dt>{{jsxref("Global_Objects/RegExp", "/ab+c/i")}}</dt>
+ <dd>Literal-Syntax für reguläre Ausdrücke.</dd>
+ <dt>{{jsxref("Operators/Grouping", "( )")}}</dt>
+ <dd>Gruppierungs-Operator.</dd>
+</dl>
+
+<h3 id="Linke-Seite-Ausdrücke">Linke-Seite-Ausdrücke</h3>
+
+<p>Werte auf der linken Seite sind das Ziel einer Zuweisung.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/Property_accessors", "Eigenschaftszugriff", "", 1)}}</dt>
+ <dd>Member-Operatoren ermöglichen den Zugriff auf eine Objektvariable oder eine Methode eines Objekts (<code>object.property</code> und <code>object["property"]</code>).</dd>
+ <dt>{{jsxref("Operators/new", "new")}}</dt>
+ <dd>Der <code>new</code> Operator erzeugt eine Instanz über einen Konstruktor.</dd>
+ <dt><a href="/de/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a></dt>
+ <dd>In Konstruktoren referenziert <code>new.target</code> auf den Konstruktor, welcher mit {{jsxref("Operators/new", "new")}} aufgerufen wurde.</dd>
+ <dt>{{jsxref("Operators/super", "super")}}</dt>
+ <dd>Das <code>super</code> Schlüsselwort ruft den Elternkonstruktor auf.</dd>
+ <dt>{{jsxref("Operators/Spread_operator", "...obj")}}</dt>
+ <dd>Der Spread-Operator ermöglicht es einem Ausdruck in Situationen erweitert zu werden, wo mehrfache Argumente (für Funktionsaufrufe) oder mehrfache Elemente (für Array-Literale) erwartet werden.</dd>
+</dl>
+
+<h3 id="Inkrement_und_Dekrement">Inkrement und Dekrement</h3>
+
+<p>Postfix/Prefix-Inkrement- und Postfix/Prefix-Dekrement-Operatoren.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/Arithmetic_Operators", "A++", "#Increment")}}</dt>
+ <dd>Postfix-Inkrementoperator.</dd>
+ <dt>{{jsxref("Operators/Arithmetic_Operators", "A--", "#Decrement")}}</dt>
+ <dd>Postfix-Dekrementoperator.</dd>
+ <dt>{{jsxref("Operators/Arithmetic_Operators", "++A", "#Increment")}}</dt>
+ <dd>Prefix-Inkrementoperator.</dd>
+ <dt>{{jsxref("Operators/Arithmetic_Operators", "--A", "#Decrement")}}</dt>
+ <dd>Prefix-Dekrementoperator.</dd>
+</dl>
+
+<h3 id="Unäre_Operatoren">Unäre Operatoren</h3>
+
+<p>Ein unärer Operation ist ein Operation mit nur einem Operanden.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/delete", "delete")}}</dt>
+ <dd>Der <code>delete</code>-Operator entfernt eine Eigenschaft eines Objektes.</dd>
+ <dt>{{jsxref("Operators/void", "void")}}</dt>
+ <dd>Der <code>void</code>-Operator verwirft den Rückgabewert eines Ausdrucks.</dd>
+ <dt>{{jsxref("Operators/typeof", "typeof")}}</dt>
+ <dd>Der <code>typeof</code>-Operator ermittelt den Typ des angegebenen Objekts.</dd>
+ <dt>{{jsxref("Operators/Arithmetic_Operators", "+", "#Unary_plus")}}</dt>
+ <dd>Der unäre Plusoperator wandelt seinen Operand in einen Zahlentyp um.</dd>
+ <dt>{{jsxref("Operators/Arithmetic_Operators", "-", "#Unary_negation")}}</dt>
+ <dd>Der unäre Negationsoperator wandelt seinen Operand in einen Zahlentyp um und negiert ihn.</dd>
+ <dt>{{jsxref("Operators/Bitwise_Operators", "~", "#Bitwise_NOT")}}</dt>
+ <dd>Bitweiser NICHT-Operator.</dd>
+ <dt>{{jsxref("Operators/Logical_Operators", "!", "#Logical_NOT")}}</dt>
+ <dd>Logischer NICHT-Operator.</dd>
+</dl>
+
+<h3 id="Arithmetische_Operatoren">Arithmetische Operatoren</h3>
+
+<p>Arithmetische Operatoren nehmen numerische Werte (entweder Literale oder Variablen) als ihre Operanden und geben genau einen numerischen Wert zurück.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/Arithmetic_Operators", "+", "#Addition")}}</dt>
+ <dd>Additionsoperator.</dd>
+ <dt>{{jsxref("Operators/Arithmetic_Operators", "-", "#Subtraction")}}</dt>
+ <dd>Subtraktionsoperator.</dd>
+ <dt>{{jsxref("Operators/Arithmetic_Operators", "/", "#Division")}}</dt>
+ <dd>Divisionsoperator.</dd>
+ <dt>{{jsxref("Operators/Arithmetic_Operators", "*", "#Multiplication")}}</dt>
+ <dd>Multiplikationsoperator.</dd>
+ <dt>{{jsxref("Operators/Arithmetic_Operators", "%", "#Remainder")}}</dt>
+ <dd>Restoperator.</dd>
+ <dt>{{jsxref("Operators/Arithmetic_Operators", "**", "#Exponentiation")}}</dt>
+ <dd>Potenzierungsoperator.</dd>
+</dl>
+
+<h3 id="Vergleichsoperatoren">Vergleichsoperatoren</h3>
+
+<p>Ein Vergleichsoperator vergleicht seine Operanden und gibt einen <code>Booleschen</code> Wert zurück, basierend dem Ergebnis des Vergleiches.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/in", "in")}}</dt>
+ <dd>Der <code>in</code>-Operator ermittelt ob ein Objekt die gegebene Objektvariable enthält.</dd>
+ <dt>{{jsxref("Operators/instanceof", "instanceof")}}</dt>
+ <dd>Der <code>instanceof-</code>Operator ermittelt ob ein Objekt eine Instanz eines anderen Objekts ist.</dd>
+ <dt>{{jsxref("Operators/Comparison_Operators", "&lt;", "#Less_than_operator")}}</dt>
+ <dd>Kleiner-als-Operator.</dd>
+ <dt>{{jsxref("Operators/Comparison_Operators", "&gt;", "#Greater_than_operator")}}</dt>
+ <dd>Größer-als-Operator.</dd>
+ <dt>{{jsxref("Operators/Comparison_Operators", "&lt;=", "#Less_than_or_equal_operator")}}</dt>
+ <dd>"Kleiner als oder gleich" - Operator.</dd>
+ <dt>{{jsxref("Operators/Comparison_Operators", "&gt;=", "#Greater_than_or_equal_operator")}}</dt>
+ <dd>"Größer als oder gleich" - Operator.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Hinweis: =&gt;</strong> is kein Operator, aber die Notation für <a href="/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Pfeilfunktionen</a>.</p>
+</div>
+
+<h3 id="Gleichheitsoperatoren">Gleichheitsoperatoren</h3>
+
+<p>Das Ergebnis der Auswertung eines Gleichheitoperators ist immer vom Typ <code>Boolean</code>, <span style="line-height: 1.5;"> basierend auf dem Ergebnis des Vergleiches</span><span style="line-height: 1.5;">.</span></p>
+
+<dl>
+ <dt>{{jsxref("Operators/Comparison_Operators", "==", "#Equality")}}</dt>
+ <dd>Gleichheitsoperator.</dd>
+ <dt>{{jsxref("Operators/Comparison_Operators", "!=", "#Inequality")}}</dt>
+ <dd>Ungleichheitsoperator.</dd>
+ <dt>{{jsxref("Operators/Comparison_Operators", "===", "#Identity")}}</dt>
+ <dd>Identitätsoperator.</dd>
+ <dt>{{jsxref("Operators/Comparison_Operators", "!==", "#Nonidentity")}}</dt>
+ <dd>"Nicht Identitäts"-Operator.</dd>
+</dl>
+
+<h3 id="Bitweise-Verschieben-Operatoren">Bitweise-Verschieben-Operatoren</h3>
+
+<p>Operationen, die alle Bits eines Operanden verschieben.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/Bitwise_Operators", "&lt;&lt;", "#Left_shift")}}</dt>
+ <dd>Operator für bitweises Verschieben nach links.</dd>
+ <dt>{{jsxref("Operators/Bitwise_Operators", "&gt;&gt;", "#Right_shift")}}</dt>
+ <dd>Operator für bitweises Verschieben nach rechts.</dd>
+ <dt>{{jsxref("Operators/Bitwise_Operators", "&gt;&gt;&gt;", "#Unsigned_right_shift")}}</dt>
+ <dd>Operator für vorzeichenloses bitweises Verschieben nach rechts.</dd>
+</dl>
+
+<h3 id="Binäre_bitweise_Operatoren">Binäre bitweise Operatoren</h3>
+
+<p>Bitweise Operatoren behandeln ihre Operanden als eine Menge von 32 Bits und geben einen in JavaScript üblichen numerischen Werte zurück.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/Bitwise_Operators", "&amp;", "#Bitwise_AND")}}</dt>
+ <dd>Bitweises UND.</dd>
+ <dt>{{jsxref("Operators/Bitwise_Operators", "|", "#Bitwise_OR")}}</dt>
+ <dd>Bitweises ODER.</dd>
+ <dt>{{jsxref("Operators/Bitwise_Operators", "^", "#Bitwise_XOR")}}</dt>
+ <dd>Bitweises XOR.</dd>
+</dl>
+
+<h3 id="Binäre_logische_Operatoren">Binäre logische Operatoren</h3>
+
+<p>Logische Operatoren werden normalerweise mit Booleschen (logischen) Werten benutzt und sie liefern dann einen Booleschen Wert zurück.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/Logical_Operators", "&amp;&amp;", "#Logical_AND")}}</dt>
+ <dd>Logisches UND.</dd>
+ <dt>{{jsxref("Operators/Logical_Operators", "||", "#Logical_OR")}}</dt>
+ <dd>Logisches ODER.</dd>
+</dl>
+
+<h3 id="Bedingter_(ternärer)_Operator">Bedingter (ternärer) Operator</h3>
+
+<dl>
+ <dt>{{jsxref("Operators/Conditional_Operator", "(Bedingung ? wennTrue : wennFalse)")}}</dt>
+ <dd>
+ <p>Der bedingte Operator liefert einen von zwei Werten zurück, in Abhängigkeit des logischen Wertes der Bedingung.</p>
+ </dd>
+</dl>
+
+<h3 id="Zuweisungsoperator">Zuweisungsoperator</h3>
+
+<p>Der Zuweisungsoperator weist seinem linken Operand einen Wert zu, in Abhängigkeit des Wertes seines rechten Operanden.</p>
+
+<dl>
+ <dt>{{jsxref("Operators/Assignment_Operators", "=", "#Assignment")}}</dt>
+ <dd>Zuweisungsoperator.</dd>
+ <dt>{{jsxref("Operators/Assignment_Operators", "*=", "#Multiplication_assignment")}}</dt>
+ <dd>Multiplikationszuweisung.</dd>
+ <dt>{{jsxref("Operators/Assignment_Operators", "/=", "#Division_assignment")}}</dt>
+ <dd>Teilungszuweisung.</dd>
+ <dt>{{jsxref("Operators/Assignment_Operators", "%=", "#Remainder_assignment")}}</dt>
+ <dd>Restzuweisung.</dd>
+ <dt>{{jsxref("Operators/Assignment_Operators", "+=", "#Addition_assignment")}}</dt>
+ <dd>Additionszuweisung.</dd>
+ <dt>{{jsxref("Operators/Assignment_Operators", "-=", "#Subtraction_assignment")}}</dt>
+ <dd>Subtraktionszuweisung.</dd>
+ <dt>{{jsxref("Operators/Assignment_Operators", "&lt;&lt;=", "#Left_shift_assignment")}}</dt>
+ <dd>Links-verschieben-Zuweisung.</dd>
+ <dt>{{jsxref("Operators/Assignment_Operators", "&gt;&gt;=", "#Right_shift_assignment")}}</dt>
+ <dd>Rechts-verschieben-Zuweisung.</dd>
+ <dt>{{jsxref("Operators/Assignment_Operators", "&gt;&gt;&gt;=", "#Unsigned_right_shift_assignment")}}</dt>
+ <dd>Vorzeichenlose (unsigned) Rechts-verschieben-Zuweisung.</dd>
+ <dt>{{jsxref("Operators/Assignment_Operators", "&amp;=", "#Bitwise_AND_assignment")}}</dt>
+ <dd>Bitweise UND-Zuweisung.</dd>
+ <dt>{{jsxref("Operators/Assignment_Operators", "^=", "#Bitwise_XOR_assignment")}}</dt>
+ <dd>Bitweise ENTWEDER-ODER-Zuweisung.</dd>
+ <dt>{{jsxref("Operators/Assignment_Operators", "|=", "#Bitwise_OR_assignment")}}</dt>
+ <dd>Bitweise ODER-Zuweisung.</dd>
+ <dt>{{jsxref("Operators/Destructuring_assignment", "[a, b] = [1, 2]")}}<br>
+ {{jsxref("Operators/Destructuring_assignment", "{a, b} = {a:1, b:2}")}}</dt>
+ <dd>
+ <p>Destrukturierende Zuweisung ermöglicht das Zuweisen von Daten aus Arrays oder Objekten an Variablen, mit einer ähnlichen Syntax wie bei Array- oder Objekt-Literalen.</p>
+ </dd>
+</dl>
+
+<h3 id="Kommaoperator">Kommaoperator</h3>
+
+<dl>
+ <dt>{{jsxref("Operators/Comma_Operator", ",")}}</dt>
+</dl>
+
+<p>Der Kommaoperator erlaubt es mehrere Ausdrücke innerhalb eines einzigen Ausdrucks zu evaluieren und liefert das Ergebnis des letzten Ausdrucks.</p>
+
+<h3 id="Nicht_standardisierte_Funktionen">Nicht standardisierte Funktionen</h3>
+
+<dl>
+ <dt>{{non-standard_inline}} {{jsxref("Operators/Legacy_generator_function", "Legacy generator function", "", 1)}}</dt>
+ <dd>Das <code>function</code> Schlüsselwort kann benutzt werden, um eine veraltete Generatorfunktion in einem Ausdruck zu schreiben. Um die Funktion zu einem veralteten Generator zu machen, muss der Funktionskörper mindestens ein {{jsxref("Operators/yield", "yield")}} Ausdruck enthalten.</dd>
+ <dt>{{non-standard_inline}} {{jsxref("Operators/Expression_closures", "Expression closures", "", 1)}}</dt>
+ <dd>Die Ausdrucks Closure Syntax ist eine Kurzform für eine einfache Funktion.</dd>
+ <dt>{{non-standard_inline}} {{jsxref("Operators/Array_comprehensions", "[for (x of y) x]")}}</dt>
+ <dd>Array Comprehensions.</dd>
+ <dt>{{non-standard_inline}} {{jsxref("Operators/Generator_comprehensions", "(for (x of y) y)")}}</dt>
+ <dd>Generator Comprehensions.</dd>
+</dl>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11', 'Expressions')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11', 'Expressions')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Neu: Spread Syntax, Rest Syntax, destrukturierte Zuweisungen, <code>super</code> Schlüsselwort.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.operators")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Operator Priorität</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/operators/inkrement/index.html b/files/de/web/javascript/reference/operators/inkrement/index.html
new file mode 100644
index 0000000000..74289b92e1
--- /dev/null
+++ b/files/de/web/javascript/reference/operators/inkrement/index.html
@@ -0,0 +1,80 @@
+---
+title: Inkrement (++)
+slug: Web/JavaScript/Reference/Operators/Inkrement
+tags:
+  - Inkrement
+  - Inkrement-Operator
+  - Inkrementieren
+translation_of: Web/JavaScript/Reference/Operators/Increment
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Der Inkrement-Operator (++) inkrementiert einen Operanden, addiert also eins hinzu und gibt einen Wert zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-increment.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate"><strong>Operator:</strong> <var>x</var>++ or ++<var>x</var>
+</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>Wird der Inkrement-Operator als Postfix benutzt, wobei der Operator hinter dem Operanden steht (z.B. x++), wird der Operand um eins erhöht und der Wert vor dem Inkrementieren zurück gegeben.</p>
+
+<p>Wird der Inkrement-Operator als Prefix benutzt, wobei der Operator vor dem Operanden steht (z.B. ++x), wird der Operand um eins erhöht und der Wert nach dem Inkrementieren  zurück gegeben.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Postfix_increment">Postfix increment</h3>
+
+<pre class="brush: js notranslate">let x = 3;
+y = x++;
+
+// y = 3
+// x = 4
+</pre>
+
+<h3 id="Prefix_increment">Prefix increment</h3>
+
+<pre class="brush: js notranslate">let a = 2;
+b = ++a;
+
+// a = 3
+// b = 3
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-postfix-increment-operator', 'Increment operator')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.operators.increment")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Addition">Addition operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Subtraction">Subtraction operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Division">Division operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Multiplication">Multiplication operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder">Remainder operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Exponentiation">Exponentiation operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Decrement">Decrement operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_negation">Unary negation operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_plus">Unary plus operator</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/operators/instanceof/index.html b/files/de/web/javascript/reference/operators/instanceof/index.html
new file mode 100644
index 0000000000..a6729bb709
--- /dev/null
+++ b/files/de/web/javascript/reference/operators/instanceof/index.html
@@ -0,0 +1,172 @@
+---
+title: instanceof
+slug: Web/JavaScript/Reference/Operators/instanceof
+tags:
+  - JavaScript
+  - Object
+  - Operator
+  - Prototype
+  - Relational Operators
+  - instanceof
+translation_of: Web/JavaScript/Reference/Operators/instanceof
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Der <strong><code>instanceof</code> Operator</strong> prüft, ob ein Objekt die prototype Eigenschaft einer Konstruktorfunktion in seiner Prototypenkette besitzt.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-instanceof.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>object</em> instanceof <em>constructor</em></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>object</code></dt>
+ <dd>Das zu prüfende Objekt.</dd>
+</dl>
+
+<dl>
+ <dt><code>constructor</code></dt>
+ <dd>Gegen die zu testende Funktion.</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Der <code>instanceof</code> Operator prüft die Anwesenheit des <code>constructor.prototype</code> in der Prototypenkette eines Objekts.</p>
+
+<pre class="brush: js">// Konstruktoren definieren
+function C(){}
+function D(){}
+
+var o = new C();
+
+// true, weil: Object.getPrototypeOf(o) === C.prototype
+o instanceof C;
+
+// false, weil D.prototype nirgends in o's Prototypenkette ist
+o instanceof D;
+
+o instanceof Object; // true, weil:
+C.prototype instanceof Object // true
+
+C.prototype = {};
+var o2 = new C();
+
+o2 instanceof C; // true
+
+// false, weil C.prototype nirgends in
+// o's Prototypenkette ist
+o instanceof C;
+
+D.prototype = new C(); // Einsatz von Vererbung
+var o3 = new D();
+o3 instanceof D; // true
+o3 instanceof C; // true
+</pre>
+
+<p>Zu beachten ist, dass sich das Ergebnis des <code>instanceof</code> Tests ändern kann, wenn die <code>prototype</code> Eigenschaft eines Konstruktors geändert wird und auch, wenn ein Objektprototyp mit <code>Object.setPrototypeOf</code> geändert wird. Es ist auch möglich die nicht standardisierte Pseudoeigenschaft <code>__proto__</code> zu nutzen.</p>
+
+<h3 id="instanceof_und_verschiedene_Kontexte_(z._B._Frames_oder_Windows)"><code>instanceof</code> und verschiedene Kontexte (z. B. Frames oder Windows)</h3>
+
+<p>Verschiedene Scopes haben verschiedene Ausführungsumgebungen. Das bedeutet, sie haben verschiedene Standardobjekte (verschiedene globale Objekte, verschiedene Konstruktoren, etc.). Das kann zu unerwarteten Resultaten führt. Zum Beispiel gibt <code>[] instanceof window.frames[0].Array</code> <code>false</code> zurück, weil <code>Array.prototype !== </code><code>window.frames[0].Array</code> ist und Arrays vom Ersteren erben.</p>
+
+<p>Auf den ersten Blick ergibt das nicht viel Sinn, fängt man jedoch an Objekte zwischen verschiedenen Frames oder Windows zwischen Kontexten auszutauschen, wäre das valide und ein großes Problem. Zum Beispiel kann man mit sicher testen ob ein Objekt ein Array ist, indem man <code>Array.isArray(myObj)</code> benutzt.</p>
+
+<p>Zur Prüfung ob ein <a href="/de/docs/Web/API/Node">Node</a> ein SVGElement ist kann <code>myNode instanceof myNode.ownerDocument.defaultView.SVGElement</code> genutzt werden.</p>
+
+<div class="note"><strong>Hinweis for Mozilla Entwickler:</strong><br>
+In Code mit XPCOM, hat <code>instanceof</code> einen speziellen Effekt: <code>obj instanceof </code><em><code>xpcomInterface</code></em> (z. B. <code>Components.interfaces.nsIFile</code>) ruft <code>obj.QueryInterface(<em>xpcomInterface</em>)</code> auf und gibt <code>true</code> zurück, wenn QueryInterface erfolgreich war. Ein Seiteneffekt ist, dass Eigenschaften von <em><code>xpcomInterface</code></em> auf <code>obj</code> aufgerufen werden können, wenn erfolgreich mit <code>instanceof</code> getestet wurde. Im Gegensatz zu JavaScripts Standardobjekten, funktioniert <code>obj instanceof xpcomInterface</code> wie erwartet, auch wenn <code>obj</code> aus ein anderen Scope stammt.</div>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Demonstration_dass_String_und_Date_vom_Typ_Object_sind_und_Ausnahmefälle">Demonstration, dass <code>String</code> und <code>Date</code> vom Typ <code>Object</code> sind und Ausnahmefälle</h3>
+
+<p>Der folgende Quelltext nutzt <code>instanceof</code>, um zu demonstrieren, dass <code>String</code> und <code>Date</code> Objekte von Typ <code>Object</code> sind (sie sind von <code>Object</code> abgeleitet).</p>
+
+<p>Immer, wenn ein Objekt durch die Objekt Literal Notation erstellt wird, ist das eine Ausnahme: Auch wenn der Prototype <code>undefined</code> ist, ergibt <code>instanceof Object</code> <code>true</code>.</p>
+
+<pre class="brush: js">var simpleStr = "This is a simple string";
+var myString  = new String();
+var newStr    = new String("String created with constructor");
+var myDate    = new Date();
+var myObj     = {};
+var myNonObj  = Object.create(null);
+
+simpleStr instanceof String; // gibt false zurück; kontrolliert die Prototypenkette und findet undefined
+myString  instanceof String; // gibt true zurück
+newStr    instanceof String; // gibt true zurück
+myString  instanceof Object; // gibt true zurück
+
+myObj    instanceof Object;    // gibt true zurück, trotz eines undefined Prototypen
+({})     instanceof Object;    // gibt true zurück, gleicher Fall wie oben
+myNonObj instanceof Object;    // gibt false zurück, ein Weg ein Objekt zu erstellen, welches keine Instanz von Object ist
+
+myString instanceof Date;   // gibt false zurück
+
+myDate instanceof Date;     // gibt true zurück
+myDate instanceof Object;   // gibt true zurück
+myDate instanceof String;   // gibt false zurück
+</pre>
+
+<h3 id="Demonstration_dass_mycar_vom_Typ_Car_und_vom_Typ_Object_ist">Demonstration, dass <code>mycar</code> vom Typ <code>Car</code> und vom Typ<code> Object</code> ist</h3>
+
+<p>Der folgende Quelltext erstellt ein Objekttyp <code>Car</code> und einen Instanz dieses Typen, <code>mycar</code>. Der <code>instanceof</code> Operator demonstriert, dass das <code>mycar</code> Objekt vom Typ <code>Car</code> und <code>Object</code> ist.</p>
+
+<pre class="brush: js">function Car(make, model, year) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+}
+var mycar = new Car("Honda", "Accord", 1998);
+var a = mycar instanceof Car;    // gibt true zurück
+var b = mycar instanceof Object; // gibt true zurück
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-relational-operators', 'Relational Operators')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.8.6', 'The instanceof operator')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-11.8.6', 'The instanceof operator')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.4.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.operators.instanceof")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("operators/typeof","typeof")}}</li>
+ <li>{{jsxref("Symbol.hasInstance")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/operators/logische_operatoren/index.html b/files/de/web/javascript/reference/operators/logische_operatoren/index.html
new file mode 100644
index 0000000000..89c24eb33c
--- /dev/null
+++ b/files/de/web/javascript/reference/operators/logische_operatoren/index.html
@@ -0,0 +1,246 @@
+---
+title: Logische Operatoren
+slug: Web/JavaScript/Reference/Operators/Logische_Operatoren
+tags:
+  - JavaScript
+  - Logic
+  - Logical Operators
+  - Not
+  - Operator
+  - Reference
+  - and
+  - or
+translation_of: Web/JavaScript/Reference/Operators
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Logische Operatoren werden typischerweise im Zusammenhang mit {{jsxref("Boolean")}} (logischen) Werten verwendet. Die Operatoren <code>&amp;&amp;</code> (Logisches UND) und <code>||</code> (Logisches ODER) geben dabei den Wert von einem der Operanden zurück. Sind die Operanden mit nicht-booleschen Werten belegt, geben diese Operatoren entsprechend nicht-boolesche Werte zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-logicaloperator.html")}}</div>
+
+
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>In der folgenden Tabelle werden die logischen Operatoren erläutert.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>Operator</th>
+   <th>Verwendung</th>
+   <th>Beschreibung</th>
+  </tr>
+  <tr>
+   <td>Logisches UND (<code>&amp;&amp;</code>)</td>
+   <td><code><em>ausdruck1</em> &amp;&amp; <em>ausdruck2</em></code></td>
+   <td>Gibt <code>ausdruck1</code> zurück, wenn er zu <code>false</code> konvertiert werden kann; anderfalls wird <code>ausdruck2</code> zurückgegeben. Sind beide Operanden <code>true</code>, gibt <code>&amp;&amp;</code> <code>true</code> zurück, Andernfalls <code>false</code>.</td>
+  </tr>
+  <tr>
+   <td>Logisches ODER (<code>||</code>)</td>
+   <td><code><em>ausdruck1</em> || <em>ausdruck2</em></code></td>
+   <td>Gibt <code>ausdruck1</code> zurück, wenn er zu <code>true</code> konvertiert werden kann; andernfalls wird <code>ausdruck2</code> zurückgegeben. Ist einer der Operanden <code>true</code>, gibt <code>||</code> <code>true</code> zurück.</td>
+  </tr>
+  <tr>
+   <td>Logisches NICHT (<code>!</code>)</td>
+   <td><code>!<em>ausdruck</em></code></td>
+   <td>Gibt <code>false</code> zurück, wenn der Operand zu <code>true</code> konvertiert werden kann. Andernfalls wird <code>true</code> zurückgegeben.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Wenn ein Wert zu <code>true</code> konvertiert werden kann, wird er {{Glossary("truthy")}} genannt. Wenn ein Wert zu <code>false</code> konvertiert werden kann, wird er {{Glossary("falsy")}} genannt.</p>
+
+<p>Beispiele für Ausdrücke, die zu <code>false</code> konvertiert werden können:</p>
+
+<ul>
+ <li><code>null</code></li>
+ <li>NaN</li>
+ <li><code>0</code></li>
+ <li>leerer String (<code>""</code> oder <code>''</code>)</li>
+ <li><code>undefined</code></li>
+</ul>
+
+<p>Auch wenn die Operatoren <code>&amp;&amp;</code> und <code>||</code> mit nichtbooleschen Operanden verwendet werden können, gehören sie trotzdem zur Gruppe der logischen Operatoren, da ihre Rückgabewerte immer zu booleschen Werten konvertiert werden können.</p>
+
+<h3 id="Kurschlussauswertung_(Short-Circuit_Evaluation)">Kurschlussauswertung (Short-Circuit Evaluation)</h3>
+
+<p>Logische Ausdrücke werden von links nach rechts ausgewertet und hierbei wird anhand der folgenden Regeln getestet, ob Kurzschlussauswertungen möglich sind:</p>
+
+<ul>
+ <li><code>false &amp;&amp; (<em>irgendwas)</em></code> wird kurzerhand zu false.</li>
+ <li><code>true || (<em>irgendwas)</em></code> wird kurzerhand zu true.</li>
+</ul>
+
+<p>Die Regeln der Logik garantieren, dass diese Auswertungen immer korrekt sind. Zu beachten ist, dass der <em><code>irgendwas</code></em> Teil nicht ausgewertet wird, so dass keine Seiteneffekte die von diesem Teil ausgehen ausgeführt werden. Zu beachten ist zudem, dass der <em><code>irgendwas</code></em> Teil ein einzelner Ausdruck ist (wie die Klammern anzeigen).</p>
+
+<p>Beispielhaft betrachten wir die folgenden äquivalenten Funktionen:</p>
+
+<pre class="brush: js">function shortCircuitEvaluation() {
+  // Logisches ODER (||)
+  doSomething() || doSomethingElse();
+
+  // Logisches UND (&amp;&amp;)
+  doSomething() &amp;&amp; doSomethingElse();
+}
+
+function equivalentEvaluation() {
+
+  // Logisches ODER (||)
+  var orFlag = doSomething();
+  if (!orFlag) {
+    doSomethingElse();
+  }
+
+  // Logisches UND (&amp;&amp;)
+  var andFlag = doSomething();
+  if (andFlag) {
+    doSomethingElse();
+  }
+}
+</pre>
+
+<p>Die folgenden Ausdrücke sind aufgrund der <a href="/de/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Operatorrangfolgen</a> nicht äquivalent und betont, wie wichtig es ist, dass der rechte Operand ein einzelner Ausdruck ist (gruppiert, falls in Klammern erforderlich).</p>
+
+<pre class="brush: js">false &amp;&amp;  true || true      // wird zu true
+false &amp;&amp; (true || true)     // wird zu false</pre>
+
+<h3 id="Logisches_UND_()"><a id="Logical_AND" name="Logical_AND">Logisches UND (<code>&amp;&amp;</code>)</a></h3>
+
+<p>Im Folgenden sind Beispiele des <code>&amp;&amp;</code> (logisches UND) Operators zu sehen.</p>
+
+<pre class="brush: js">a1 = true  &amp;&amp; true      // t &amp;&amp; t wird zu true
+a2 = true  &amp;&amp; false     // t &amp;&amp; f wird zu false
+a3 = false &amp;&amp; true      // f &amp;&amp; t wird zu false
+a4 = false &amp;&amp; (3 == 4)  // f &amp;&amp; f wird zu false
+a5 = 'Cat' &amp;&amp; 'Dog'     // t &amp;&amp; t wird zu "Dog"
+a6 = false &amp;&amp; 'Cat'     // f &amp;&amp; t wird zu false
+a7 = 'Cat' &amp;&amp; false     // t &amp;&amp; f wird zu false
+a8 = ''    &amp;&amp; false     // f &amp;&amp; f wird zu ""
+a9 = false &amp;&amp; ''        // f &amp;&amp; f wird zu false
+</pre>
+
+<h3 id="Logisches_ODER_()"><a name="Logical_OR">Logisches ODER (<code>||</code>)</a></h3>
+
+<p>Im Folgenden sind Beispiele des <code>||</code> (logisches ODER) Operators zu sehen.</p>
+
+<pre class="brush: js">o1 = true  || true       // t || t wird zu true
+o2 = false || true       // f || t wird zu true
+o3 = true  || false      // t || f wird zu true
+o4 = false || (3 == 4)   // f || f wird zu false
+o5 = 'Cat' || 'Dog'      // t || t wird zu "Cat"
+o6 = false || 'Cat'      // f || t wird zu "Cat"
+o7 = 'Cat' || false      // t || f wird zu "Cat"
+o8 = ''    || false      // f || f wird zu false
+o9 = false || ''         // f || f wird zu ""
+</pre>
+
+<h3 id="Logisches_NICHT_(!)"><a name="Logical_NOT">Logisches NICHT (<code>!</code>)</a></h3>
+
+<p>Im Folgenden sind Beispiele des <code>!</code> (logisches NICHT) Operators zu sehen.</p>
+
+<pre class="brush: js">n1 = !true              // !t wird zu false
+n2 = !false             // !f wird zu true
+n3 = !"Cat"             // !t wird zu false
+</pre>
+
+<h3 id="Konvertierungsregeln">Konvertierungsregeln</h3>
+
+<h4 id="Konvertierung_von_UND_zu_ODER">Konvertierung von UND zu ODER</h4>
+
+<p>Die folgende Operation nutzt Booleane:</p>
+
+<pre class="brush: js">bCondition1 &amp;&amp; bCondition2</pre>
+
+<p>ist äquivalent zum folgenden Ausdruck:</p>
+
+<pre class="brush: js">!(!bCondition1 || !bCondition2)</pre>
+
+<h4 id="Konvertierung_von_ODER_zu_UND">Konvertierung von ODER zu UND</h4>
+
+<p>Die folgende Operation nutzt Booleane:</p>
+
+<pre class="brush: js">bCondition1 || bCondition2</pre>
+
+<p>ist äquivalent zu folgendem Ausdruck:</p>
+
+<pre class="brush: js">!(!bCondition1 &amp;&amp; !bCondition2)</pre>
+
+<h4 id="Negierung_des_logischen_NICHT">Negierung des logischen NICHT</h4>
+
+<p>Die folgende Operation nutzt Booleane:</p>
+
+<pre class="brush: js">!!bCondition</pre>
+
+<p>ist äquivalent mit:</p>
+
+<pre class="brush: js">bCondition</pre>
+
+<h3 id="Klammern_in_logischen_Ausdrücken_auflösen">Klammern in logischen Ausdrücken auflösen</h3>
+
+<p>Ein logischer Ausdruck wird von links nach rechts ausgewertet. Es ist immer möglich runde Klammern von einem komplexen Ausdruck zu entfernen, wenn einige Regeln beachtet werden.</p>
+
+<h4 id="Geschachteltes_AND_entfernen">Geschachteltes AND entfernen</h4>
+
+<p>Die folgende Operation nutzt Booleane:</p>
+
+<pre class="brush: js">bCondition1 || (bCondition2 &amp;&amp; bCondition3)</pre>
+
+<p>ist äquivalent mit:</p>
+
+<pre class="brush: js">bCondition1 || bCondition2 &amp;&amp; bCondition3</pre>
+
+<h4 id="Geschachteltes_OR_entfernen">Geschachteltes OR entfernen</h4>
+
+<p>Die folgende Operation nutzt Booleane:</p>
+
+<pre class="brush: js">bCondition1 &amp;&amp; (bCondition2 || bCondition3)</pre>
+
+<p>ist äquivalent mit:</p>
+
+<pre class="brush: js">!(!bCondition1 || !bCondition2 &amp;&amp; !bCondition3)</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.11')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Definiert in mehreren Kapiteln der Spezifikation: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.9">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.11">Binary Logical Operators</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-binary-logical-operators')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definiert in mehreren Kapiteln der Spezifikation: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-binary-logical-operators">Binary Logical Operators</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-binary-logical-operators')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Definiert in mehreren Kapiteln der Spezifikation: <a href="http://tc39.github.io/ecma262/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-logical-operators">Binary Logical Operators</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.operators.logical")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Operators/Bitwise_Operators", "Bitweise Operatoren")}}</li>
+ <li>{{jsxref("Boolean")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/operators/modulo/index.html b/files/de/web/javascript/reference/operators/modulo/index.html
new file mode 100644
index 0000000000..19403ab883
--- /dev/null
+++ b/files/de/web/javascript/reference/operators/modulo/index.html
@@ -0,0 +1,78 @@
+---
+title: Modulo (%)
+slug: Web/JavaScript/Reference/Operators/Modulo
+tags:
+  - Division mit Rest
+  - Divisionsalgorithmus
+  - Restwert
+  - Restwertberechnung
+translation_of: Web/JavaScript/Reference/Operators/Remainder
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Der Modulo-Operator (%) gibt den Restwert zurück, der übrig bleibt wenn ein Operand durch einen anderen geteilt wird. Das Vorzeichen ergibt sich aus der Wahl der Quotienten.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-remainder.html")}}</div>
+
+<div></div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate"><strong>Operator:</strong> <var>var1</var> % <var>var2</var>
+</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Remainder_with_positive_dividend">Remainder with positive dividend</h3>
+
+<pre class="brush: js notranslate"> 12 % 5  //  2
+ 1 % -2 //  1
+ 1 % 2  //  1
+ 2 % 3  //  2
+5.5 % 2 // 1.5
+</pre>
+
+<h3 id="Remainder_with_negative_dividend">Remainder with negative dividend</h3>
+
+<pre class="brush: js notranslate">-12 % 5 // -2
+-1 % 2  // -1
+-4 % 2  // -0</pre>
+
+<h3 id="Remainder_with_NaN">Remainder with NaN</h3>
+
+<pre class="brush: js notranslate">NaN % 2 // NaN</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-multiplicative-operators', 'Remainder operator')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.operators.remainder")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Addition">Addition operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Subtraction">Subtraction operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Division">Division operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Multiplication">Multiplication operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Exponentiation">Exponentiation operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Increment">Increment operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Decrement">Decrement operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_negation">Unary negation operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_plus">Unary plus operator</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/operators/new.target/index.html b/files/de/web/javascript/reference/operators/new.target/index.html
new file mode 100644
index 0000000000..83f4a85b1c
--- /dev/null
+++ b/files/de/web/javascript/reference/operators/new.target/index.html
@@ -0,0 +1,102 @@
+---
+title: new.target
+slug: Web/JavaScript/Reference/Operators/new.target
+tags:
+  - Classes
+  - ECMAScript 2015
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/new.target
+---
+<div>{{JSSidebar("Operators")}}</div>
+
+<p>Die <strong><code>new.target</code></strong> Eigenschaft lässt erkennen, ob eine Funktion oder ein Konstruktor mit dem <a href="/de/docs/Web/JavaScript/Reference/Operators/new">new</a> Operator aufgerufen wurde. In Konstruktoren und Funktionen die mit dem <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a> Operator instanziiert wurde, gibt <code>new.target</code> eine Referenz zu dem Konstruktor oder der Funktion zurück. In normalen Funktionsaufrufen hat <code>new.target</code> den Wert {{jsxref("undefined")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-newtarget.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">new.target</pre>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>new.target</code> Syntax besteht aus dem Schlüsselwort <code>"new"</code>, einem Punkt und dem Eigenschaftnamen <code>"target"</code>. Normalerweise steht <code>"new."</code> für einen Eigenschaftszugriff, jedoch ist <code>"new."</code> kein Objekt. In Konstruktoraufrufen referenziert <code>new.target</code> auf den Konstruktor, der mit <code>new</code> aufgerufen wurde und somit bekommt <code>"new."</code> einen virtuellen Kontext.</p>
+
+<p>Die <code>new.target</code> Eigenschaft ist eine Metaeigenschaft, die in allen Funktionen erreichbar ist. In <a href="/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Pfeilfunktionen</a> referenziert <code>new.target</code> zum <code>new.target</code> der umschließenden Funktion.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="new.target_in_Funktionsaufrufen"><code>new.target</code> in Funktionsaufrufen</h3>
+
+<p>In normalen Funktionsaufrufen (im Gegensatz zu Konstruktorfunktionsaufrufen) ist <code>new.target</code> {{jsxref("undefined")}}. Damit lässt sich herausfinden, ob eine Funktion mit <a href="/de/docs/Web/JavaScript/Reference/Operators/new">new</a> als Konstruktor aufgerufen wurde.</p>
+
+<pre class="brush: js">function Foo() {
+  if (!new.target) throw 'Foo() must be called with new';
+  console.log('Foo instantiated with new');
+}
+
+Foo(); // throws "Foo() must be called with new"
+new Foo(); // logs "Foo instantiated with new"
+</pre>
+
+<h3 id="new.target_in_Konstruktoren"><code>new.target</code> in Konstruktoren</h3>
+
+<p>In Klassenkonstruktoren referenziert <code>new.target</code> den Konstruktor, der direkt mit <code>new</code> aufgerufen wurde. Das ist auch der Fall, wenn der Konstruktor in einer Elternklasse ist und vom Kinderkonstruktor weiter delegiert wurde.</p>
+
+<pre class="brush: js">class A {
+  constructor() {
+    console.log(new.target.name);
+  }
+}
+
+class B extends A { constructor() { super(); } }
+
+var a = new A(); // logs "A"
+var b = new B(); // logs "B"
+
+class C { constructor() { console.log(new.target); } }
+class D extends C { constructor() { super(); } }
+
+var c = new C(); // logs class C{constructor(){console.log(new.target);}}
+var d = new D(); // logs class D extends C{constructor(){super();}}</pre>
+
+<p class="summary">Aus dem obigen Beispiel der Klasse C und D scheint es also, dass new.target auf die Klassendefinition der Klasse zeigt, die initialisiert wird. Wenn beispielsweise D mit new initialisiert wurde, wurde die Klassendefinition von D ausgegeben und in ähnlicher Weise wurde im Fall von c die Klasse C ausgegeben.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-built-in-function-objects', 'Built-in Function Objects')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-built-in-function-objects', 'Built-in Function Objects')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.operators.new_target")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Functions">Funktionen</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Classes">Klassen</a></li>
+ <li><code><a href="/de/docs/Web/JavaScript/Reference/Operators/new">new</a></code></li>
+ <li><code><a href="/de/docs/Web/JavaScript/Reference/Operators/this">this</a></code></li>
+</ul>
diff --git a/files/de/web/javascript/reference/operators/new/index.html b/files/de/web/javascript/reference/operators/new/index.html
new file mode 100644
index 0000000000..b3ba18f108
--- /dev/null
+++ b/files/de/web/javascript/reference/operators/new/index.html
@@ -0,0 +1,190 @@
+---
+title: new Operator
+slug: Web/JavaScript/Reference/Operators/new
+tags:
+  - JavaScript
+  - Left-hand-side expressions
+  - Operator
+translation_of: Web/JavaScript/Reference/Operators/new
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Der<strong> <code>new</code> Operator</strong> erzeugt eine Instanz eines benutzerdefinierten Objekttyps oder eines Standardtyps, welcher eine Konstruktorfunktion besitzt.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-newoperator.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">new <em>constructor</em>[([<em>arguments</em>])]</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>constructor</code></dt>
+ <dd>Eine Funktion, welche den Typ der Objektinstanz spezifiziert.</dd>
+</dl>
+
+<dl>
+ <dt><code>arguments</code></dt>
+ <dd>Eine Liste von Werten, die dem <code>constructor</code> übergeben wird.</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Das erstellen eines benutzerdefinierten Objektes benötigt zwei Schritte:</p>
+
+<ol>
+ <li>Definieren eines Objekttypen indem eine Funktion geschrieben wird.</li>
+ <li>Erstellen einer Instanz des Objektes mit <code>new</code>.</li>
+</ol>
+
+<p>Um ein neuen Objekttypen zu definieren, erstellt man eine Funktion für den Objekttypen, die seinen Namen und Eigenschaften spezifiziert. Ein Objekt kann Eigenschaften haben, die ebenfalls Objekte sind. Sie dazu das Beispiel unten.</p>
+
+<p>Wenn der Code <code>new <em>Foo</em>(...)</code> ausgeführt wird, passieren folgende Dinge:</p>
+
+<ol>
+ <li>Ein neues Objekt wird erstellt, welches von <code><em>Foo</em>.prototype</code> erbt.</li>
+ <li>Die Konstruktorfunktion <code>F<em>oo</em></code> wird mit den spezifizierten Argumenten aufgerufen und <code><a href="/de/docs/Web/JavaScript/Reference/Operators/this">this</a></code> wird an das neu erstellte Objekt gebunden. <code>new F<em>oo</em></code> ist gleichbedeutend mit <code>new F<em>oo()</em></code>, d. h. wenn keine Argumentenliste spezifiziert ist, wird <code>F<em>oo</em></code> ohne Argumente aufgerufen.</li>
+ <li>Das Objekt, welches von der Konstruktorfunktion zurückgegeben wird, ist das Resultat des ganzen <code>new</code> Ausdrucks. Wenn die Konstruktorfunktion nicht explizit ein Objekt zurück gibt, wird stattdessen das erstellte Objekt aus Schritt 1 zurückgegeben. (Normalerweise geben Konstruktoren keinen Wert zurück, aber sie können es tun, um den normalen Objekterstellungsprozess zu überschreiben.)</li>
+</ol>
+
+<p>Man kann immer eine Eigenschaft zu dem vorher erstellten Objekt hinzufügen. Zum Beispiel fügt das Statement <code>auto1.farbe = "schwarz"</code> die Eigenschaft <code>farbe</code> zu <code>auto1</code> hinzu und weist dieser den Wert <code>"schwarz"</code> zu. Jedoch hat das keinen Effekt auf andere Objekte. Um die Eigenschaft zu allen Objekten des selben Typs hinzuzufügen, muss die Eigenschaft dem <code>Auto</code> Objekttypen hinzugefügt werden.</p>
+
+<p>Man kann eine geteilte Eigenschaft zum vorher definierten Objekttypen hinzufügen, indem die <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype">Function.prototype</a></code> Eigenschaft genutzt wird. Diese definiert eine geteilte Eigenschaft mit allen Objekten, die mit der gleichen Funktion erstellt wurde, und nicht nur bei einer Instanz des Objekttypen. Der folgende Code fügt die <code>farbe</code> Eigenschaft mit dem Wert <code>"originale Farbe"</code> zu allen Objekten des Typs <code>Auto</code> hinzu und überschreibt diesen Wert mit dem String <code>"schwarz"</code> nur in dem Instanzobjekt <code>auto1</code>. Für weitere Informationen siehe <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype">Prototype</a>.</p>
+
+<pre class="brush: js">function Auto() {}
+auto1 = new Auto();
+auto2 = new Auto();
+
+console.log(auto1.farbe);    // undefined
+
+Auto.prototype.farbe = "originale Farbe";
+console.log(auto1.farbe);    // originale Farbe
+
+auto1.farbe = "schwarz";
+console.log(auto1.farbe);   // schwarz
+
+console.log(auto1.__proto__.farbe); // originale Farbe
+console.log(auto2.__proto__.farbe); // originale Farbe
+console.log(auto1.farbe);           // schwarz
+console.log(auto2.farbe);           // originale Farbe
+</pre>
+
+<div class="note">
+<p>Wenn man den <code>new</code> Operator nicht benutzt, <strong>wird die Konstruktorfunktion wie eine normale Funktion ausgeführt,</strong> <em>ohne ein Objekt zu erstellen</em>. In diesem Fall ist der Wert von <code>this</code> ebenfalls anders.</p>
+</div>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Objekttyp_und_Objektinstanz">Objekttyp und Objektinstanz</h3>
+
+<p>Angenommen man möchte ein Objekttypen für Autos erstellen, man möchte den Objekttypen <code>Auto</code> nennen und man möchte Eigenschaften für die Marke, das Modell und das Jahr haben. Um das zu erreichen muss folgende Funktion geschrieben werden:</p>
+
+<pre class="brush: js">function Auto(marke, modell, jahr) {
+  this.marke = marke;
+  this.modell = modell;
+  this.jahr = jahr;
+}
+</pre>
+
+<p>Nun kann man ein Objekt mit dem Namen <code>meinAuto</code> wie folgt erstellen:</p>
+
+<pre class="brush: js">var meinAuto = new Auto("Eagle", "Talon TSi", 1993);
+</pre>
+
+<p>Dieses Statement erstellt <code>meinAuto</code> und wiest die spezifizierten Werte den Eigenschaften zu. Dann ist der Wert von <code>meinAuto.marke</code> der String "Eagle", von <code>meinAuto.jahr</code> die Zahl 1993 und so weiter.</p>
+
+<p>Man kann beliebig viele Objekte von <code>Auto</code> mit <code>new</code> erstellen. Zum Beispiel:</p>
+
+<pre class="brush: js">var kensAuto = new Auto("Nissan", "300ZX", 1992);
+</pre>
+
+<h3 id="Objekteigenschaft_die_selber_ein_Objket">Objekteigenschaft, die selber ein Objket</h3>
+
+<p>Angenommen man Definiert ein Objekt mit dem Namen <code>Person</code> wie folgt:</p>
+
+<pre class="brush: js">function Person(name, alter, geschlecht) {
+  this.name = name;
+  this.alter = alter;
+  this.geschlecht = geschlecht;
+}
+</pre>
+
+<p>Dann instantiiert man zwei neue <code>Person</code> Objekte wie folgt:</p>
+
+<pre class="brush: js">var rand = new Person("Rand McNally", 33, "M");
+var ken = new Person("Ken Jones", 39, "M");
+</pre>
+
+<p>Dann erneuert man die Definition von <code>Auto</code> um eine <code>besitzer</code> Eigenschaft , die ein <code>Person</code> Objekt ist, wie folgt:</p>
+
+<pre class="brush: js">function Auto(marke, modell, jahr, <code>besitzer</code>) {
+  this.marke = marke;
+  this.modell = modell;
+  this.jahr = jahr;
+  this.<code>besitzer = besitzer;</code>
+}
+</pre>
+
+<p>Um das neue Objekt zu instantiiert benutzt man dann folgendes:</p>
+
+<pre class="brush: js">var auto1 = new Auto("Eagle", "Talon TSi", 1993, rand);
+var auto2 = new Auto("Nissan", "300ZX", 1992, ken);
+</pre>
+
+<p>Statt ein Stringliteral oder einen Zahlenwert beim erstellen zu benutzen, übergibt das obere Beispiel die Objekte <code>rand</code> und <code>ken</code> als Parameter für den Besitzer. Um den Namen des Besitzers von <code>auto2</code> zu erfahren, muss man die Eigenschaft wie folgt abfragen:</p>
+
+<pre class="brush: js">auto2.besitzer.name
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-new-operator', 'The new Operator')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-new-operator', 'The new Operator')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.2.2', 'The new Operator')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-11.2.2', 'The new Operator')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.2.2', 'The new Operator')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.operators.new")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Reflect.construct()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/operators/objekt_initialisierer/index.html b/files/de/web/javascript/reference/operators/objekt_initialisierer/index.html
new file mode 100644
index 0000000000..32c30b7f16
--- /dev/null
+++ b/files/de/web/javascript/reference/operators/objekt_initialisierer/index.html
@@ -0,0 +1,315 @@
+---
+title: Objekt Initialisierer
+slug: Web/JavaScript/Reference/Operators/Objekt_Initialisierer
+tags:
+  - ECMAScript 2015
+  - JSON
+  - JavaScript
+  - Literal
+  - Methods
+  - Object
+  - Primary Expression
+  - computed
+  - mutation
+  - properties
+translation_of: Web/JavaScript/Reference/Operators/Object_initializer
+---
+<div>{{JsSidebar("Operators")}}</div>
+
+<p>Objekte können mit <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Object">new Object()</a>, <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Object/create">Object.create()</a>, oder mit der <em>literal</em> Notation (<em>Initialisierungs</em> Notation) initialisiert werden. Ein Objekt Initialisierer ist eine Komma getrennte Liste von null oder mehreren Paaren von Eigenschafts-Namen und zugehörigen Werten eines Objektes, eingeschlossen in geschwungene Klammern (<code>{}</code>).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-objectinitializer.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="brush: js">var o = {};
+var o = { a: "foo", b: 42, c: {} };
+
+var a = "foo", b = 42, c = {};
+var o = { a: a, b: b, c: c };
+
+var o = {
+  <var>property: function </var>([<var>parameters</var>]) {},
+  get <var>property</var>() {},
+  set <var>property</var>(<var>value</var>) {},
+};
+</pre>
+
+<h3 id="Neue_Schreibweisen_in_ECMAScript_2015">Neue Schreibweisen in ECMAScript 2015</h3>
+
+<p>Man sollte in der Kompatibilitätstabelle die Unterstützung dieser Schreibweisen nachschlagen. In Umgebungen, die diese nicht unterstützen, entstehen Syntaxfehler.</p>
+
+<pre class="brush: js">// Kurzschreibweisen für Eigenschaftsnamen (ES2015)
+var a = "foo", b = 42, c = {};
+var o = { a, b, c };
+
+// Kurzschreibweise Methoden Namen (ES2015)
+var o = {
+  <var>property</var>([<var>parameters</var>]) {}
+};
+
+// Berechnete Eigenschaftsnamen (ES2015)
+var prop = "foo";
+var o = {
+  [prop]: "hey",
+  ["b" + "ar"]: "there",
+};</pre>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p>Ein Objekt Initialisierer ist ein Ausdruck welcher die Initialisierung eines {{jsxref("Object")}} beschreibt. Objekte bestehen aus Eigenschaften, welche verwendet werden, um ein Objekt zu beschreiben. Die Werte der Objekt Eigenschaften können {{Glossary("primitive")}} Datentypen oder andere Objekte enthalten.</p>
+
+<h3 id="Objekte_erzeugen">Objekte erzeugen</h3>
+
+<p>Ein leeres Objekt ohne Eigenschaften kann wie folgt erzeugt werden:</p>
+
+<pre class="brush: js">var object = {};</pre>
+
+<p>Jedoch: die Vorteile der literalen oder Initialisierer Notation versetzen Sie in die Lage, Objekte inklusive Eigenschaften, innerhalb geschwungener Klammern, schneller zu erzeugen. Sie schreiben einfach eine Liste von Schlüssel:Werte Paaren, getrennt durch ein Komma. Der folgende Quellcode erzeugt ein Objekt mit drei Eigenschaften mit den Schlüsseln <code>"foo"</code>, <code>"age"</code> und <code>"baz"</code>. <span id="result_box" lang="de"><span class="hps">Die Werte dieser</span> <span class="hps">Schlüssel</span> <span class="hps">sind: die Zeichenkette</span> <code><span class="hps">"bar"</span></code><span>,</span> <span class="hps">die Zahl</span> <code><span class="hps">42</span></code> <span class="hps">und die dritte</span> <span class="hps">Eigenschaft hat</span> <span class="hps">ein anderes Objekt</span> <span class="hps">als Wert.</span></span></p>
+
+<pre class="brush: js">var object = {
+  foo: "bar",
+  age: 42,
+  baz: { myProp: 12 },
+}</pre>
+
+<h3 id="Auf_Eigenschaften_zugreifen">Auf Eigenschaften zugreifen</h3>
+
+<p>Sobald ein Objekt erzeugt worden ist, möchte man auf seine Eigenschaften lesend oder schreibend zugreifen. Auf die Eigenschaften eines Objektes kann mit der Punktnotation oder der Klammer-Notation zugegriffen werden. Siehe <a href="/de/docs/Web/JavaScript/Reference/Operators/Property_Accessors">Eigenschaftszugriffe</a> für weiter Informationen.</p>
+
+<pre class="brush: js">object.foo; // "bar"
+object["age"]; // 42
+
+object.foo = "baz";
+</pre>
+
+<h3 id="Eigenschaften_definieren">Eigenschaften definieren</h3>
+
+<p><span id="result_box" lang="de"><span class="hps">Wir haben bereits</span> <span class="hps">gelernt, wie man</span> <span class="hps">Eigenschaften mit Hilfe der</span> <span class="hps">Initialisierungs</span> <span class="hps">Syntax</span> <span class="hps">schreibt</span><span>.</span> <span class="hps">Oft</span> <span class="hps">gibt es Variablen</span> <span class="hps">im </span><span class="hps">Code, die</span> <span class="hps">Sie in einem Objekt verwenden möchten</span><span>.</span> Man sieht oft Quellcode wie den folgenden: </span></p>
+
+<pre class="brush: js">var a = "foo",
+    b = 42,
+    c = {};
+
+var o = {
+  a: a,
+  b: b,
+  c: c
+};</pre>
+
+<p><span id="result_box" lang="de"><span class="hps">Mit</span> <span class="hps">ECMAScript</span> 2015 ist <span class="hps">eine</span> <span class="hps">kürzere</span> <span class="hps">Schreibweise</span> <span class="hps">verfügbar, um das</span> G<span class="hps">leiche zu erreichen</span><span>:</span></span></p>
+
+<pre class="brush: js">var a = "foo",
+    b = 42,
+    c = {};
+
+// Kurzschreibweise für Eigenschaftsnamen in ES2015
+var o = { a, b, c };
+
+// In anderen Worten
+console.log(); // true</pre>
+
+<h4 id="Doppelte_Eigenschaftsnamen">Doppelte Eigenschaftsnamen</h4>
+
+<p><span id="result_box" lang="de"><span class="hps">Bei Verwendung des</span> <span class="hps">gleichen Namens</span> <span class="hps">für Ihre</span> <span class="hps">Eigenschaften</span><span>, wird die</span> <span class="hps">zweite Eigenschaft</span> <span class="hps">die erste</span> <span class="hps">überschreiben.</span></span></p>
+
+<pre class="brush: js">var a = {x: 1, x: 2};
+console.log(a); // { x: 2}
+</pre>
+
+<p>Im strikten Modus von ECMAScript 5 wurden doppelte Eigenschaftsnamen als {{jsxref("SyntaxError")}} gewertet. Mit der Einführung von berechneten Eigenschaftsnamen in ECMAScript 2015 wurde diese Einschränkung entfernt, was Duplikate zur Laufzeit möglich macht.</p>
+
+<pre class="brush: js">function haveES2015DuplicatePropertySemantics(){
+  "use strict";
+  try {
+    ({ prop: 1, prop: 2 });
+
+    // No error thrown, duplicate property names allowed in strict mode
+    return true;
+  } catch (e) {
+    // Error thrown, duplicates prohibited in strict mode
+    return false;
+  }
+}</pre>
+
+<h3 id="Methoden_Definitionen">Methoden Definitionen</h3>
+
+<p><span id="result_box" lang="de"><span class="hps">Eine</span> <span class="hps">Eigenschaft eines Objekts</span> <span class="hps">kann auch</span> <span class="hps">auf eine <a href="/de/docs/Web/JavaScript/Reference/Functions">Funktion</a></span> <span class="hps">oder</span> <span class="hps">einen</span> <a href="/de/docs/Web/JavaScript/Reference/Functions/get">Getter</a> <span class="hps">oder</span> <span class="hps"><a href="/de/docs/Web/JavaScript/Reference/Functions/set">Setter</a>-Methode</span> <span class="hps">verweisen</span></span>.</p>
+
+<pre class="brush: js">var o = {
+  <var>property: function </var>([<var>parameters</var>]) {},
+  get <var>property</var>() {},
+  set <var>property</var>(<var>value</var>) {},
+};</pre>
+
+<p>In ECMAScript 2015 gibt es eine kürzere Schreibweise, mit der das Schlüsselwort "function" überflüssig wird.</p>
+
+<pre class="brush: js">// Kurzschreibweise für Methoden Namen (ES2015)
+var o = {
+  <var>property</var>([<var>parameters</var>]) {},
+  * <var>generator</var>() {}
+};</pre>
+
+<p>In ECMAScript 2015 gibt es eine Möglichkeit Eigenschaften mit einer Generatorfunktion zu definierten:</p>
+
+<pre class="brush: js">var o = {
+  *generator() {
+    ........
+  }
+};</pre>
+
+<p>Diese ist gleich zur ES5 ähnlichen Notation (aber ECMAScript 5 hat keine Generatorfunktionen):</p>
+
+<pre class="brush: js">var o = {
+  generator = function* () {
+    ........
+  }
+}</pre>
+
+<p>Für weitere Informationen und Beispiele zu Methoden, siehe <a href="/de/docs/Web/JavaScript/Reference/Functions/Method_definitions">Methodendefinitionen</a>.</p>
+
+<h3 id="Berechnete_Bezeichnernamen">Berechnete Bezeichnernamen</h3>
+
+<p>Beginnend mit ECMAScript 2015, unterstützt die Objekt Initialisierer Syntax auch berechnete Bezeichnernamen für Objekt Eigenschaften. Das gestatt dem Programmierer einen Ausdruck in eckigen Klammern anzugeben, aus welchem der Bezeichnernamen für die Objekt Eigenschaft berechnet wird. Die Schreibweise dafür ist analog zu der Klammer-Notation für den <a href="/de/docs/Web/JavaScript/Reference/Operators/Property_Accessors">Zugriff auf Objekt Eigenschaften</a> welche Sie bereits benutzt haben. Dieselbe Syntax kann nun für Eigenschaften Bezeichner verwendet werden:</p>
+
+<pre class="brush: js">// Computed property names (ES2015)
+var i = 0;
+var a = {
+  ["foo" + ++i]: i,
+  ["foo" + ++i]: i,
+  ["foo" + ++i]: i
+};
+
+console.log(a.foo1); // 1
+console.log(a.foo2); // 2
+console.log(a.foo3); // 3
+
+var param = 'size';
+var config = {
+  [param]: 12,
+  ["mobile" + param.charAt(0).toUpperCase() + param.slice(1)]: 4
+};
+
+console.log(config); // { size: 12, mobileSize: 4 }</pre>
+
+<h3 id="Spread_Eigenschaften">Spread Eigenschaften</h3>
+
+<p>Die Vorschlag von <a href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Eigenschaft für ECMAScript</a> (Stage 4) fügt <a href="/de/docs/Web/JavaScript/Reference/Operators/Spread_operator">Spread</a> Eigenschaften zu Objektliteralen hinzu. Er kopiert eigene aufzählbare Eigenschaften des genutzten Objektes in ein neues Objekt.</p>
+
+<p>Oberflächliches Clonen (ausgenommen Eigenschaften) oder Verschmelzen von Objekten ist nun mit einer Kürzeren Syntax als {{jsxref("Object.assign()")}} möglich.</p>
+
+<pre class="brush: js">var obj1 = { foo: 'bar', x: 42 };
+var obj2 = { foo: 'baz', y: 13 };
+
+var clonedObj = { ...obj1 };
+// Object { foo: 'bar', x: 42 };
+
+var mergeObj = { ...obj1, ...obj2 };
+// Object { foo: 'baz', x: 42, y: 13 }</pre>
+
+<p>Zu beachten ist, dass {{jsxref("Object.assign()")}} <a href="/de/docs/Web/JavaScript/Reference/Functions/set">Setters</a> benutzt, was der Spread Operator nicht macht.</p>
+
+<h3 id="Prototypmutationen">Prototypmutationen</h3>
+
+<p>Eine Eigenschaft Definition der Form <code>__proto__: Wert</code> oder <code>"__proto__": Wert</code> erzeugt keine Eigenschaft mit dem Namen <code>__proto__</code>. Wenn der angegebene Wert ein Objekt oder <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></code> ist, wird stattdessen der <code>[[Prototyp]]</code> des erzeugten Objektes auf den angegebenen Wert geändert. (Das Objekt wird nicht verändert, falls der Wert kein Objekt oder null ist.)</p>
+
+<pre class="brush: js">var obj1 = {};
+assert(Object.getPrototypeOf(obj1) === Object.prototype);
+
+var obj2 = { __proto__: null };
+assert(Object.getPrototypeOf(obj2) === null);
+
+var protoObj = {};
+var obj3 = { "__proto__": protoObj };
+assert(Object.getPrototypeOf(obj3) === protoObj);
+
+var obj4 = { __proto__: "not an object or null" };
+assert(Object.getPrototypeOf(obj4) === Object.prototype);
+assert(!obj4.hasOwnProperty("__proto__"));
+</pre>
+
+<p>Pro Objekt-Literal ist nur eine einzelne Prototypmutation erlaubt: mehrfache Prototyp Mutationen führen zu einem Syntax Fehler.</p>
+
+<p>Eigenschaftsdefinitionen welche nicht von der Doppelpunkt Notation Gebrauch machen, sind keine Prototyp Mutationen: es sind Eigenschaftsdefinitionen die sich verhalten wie jede andere Definition von Eigenschaftsbezeichnern auch.</p>
+
+<pre class="brush: js">var __proto__ = "variable";
+
+var obj1 = { __proto__ };
+assert(Object.getPrototypeOf(obj1) === Object.prototype);
+assert(obj1.hasOwnProperty("__proto__"));
+assert(obj1.__proto__ === "variable");
+
+var obj2 = { __proto__() { return "hello"; } };
+assert(obj2.__proto__() === "hello");
+
+var obj3 = { ["__prot" + "o__"]: 17 };
+assert(obj3.__proto__ === 17);
+</pre>
+
+<h2 id="Objektliteral-Notation_vs_JSON">Objektliteral-Notation vs JSON</h2>
+
+<p><span id="result_box" lang="de"><span class="hps">Die</span> <span class="hps">Objekt-Literal</span> <span class="hps">Notation ist</span> <span class="hps">nicht dasselbe wie</span> <span class="hps">die</span> <span class="hps">JavaScript Object Notation</span> <span class="atn hps">(</span><span><a href="/de/docs/Glossary/JSON">JSON</a>)</span><span>.</span> <span class="hps">Obwohl</span> <span class="hps">sie ähnlich aussehen</span><span>, gibt es</span> <span class="hps">Unterschiede zwischen ihnen</span></span>:</p>
+
+<ul>
+ <li><span id="result_box" lang="de"><span class="hps">JSON</span> <span class="hps">erlaubt</span> <span class="hps">nur</span> <span class="hps">Eigenschaftsdefinition</span>en <span class="hps">mit</span> <code><span class="hps">"Eigenschaft"</span><span>:</span> <span class="hps">Wert</span></code> <span class="hps">Syntax.</span> <span class="hps">Der Eigenschaftsname</span> <span class="hps">muss</span> <span class="hps">in doppelten Anführungszeichen geschrieben werden</span><span>, und die</span> <span class="hps">Definition kann nicht</span> in Kurzschreibweise erfolgen</span>.</li>
+ <li><span id="result_box" lang="de"><span class="hps">In</span> <span class="hps">JSON</span> <span class="hps">können die Werte</span> <span class="hps">nur</span> <span class="hps">Strings, Zahlen</span><span>, Arrays,</span> <span class="hps"><code>true</code>, <code>false</code></span><span>, <code>null</code></span> <span class="hps">oder  andere</span> <span class="atn hps">(</span><span>JSON)</span> <span class="hps">Objekte sein</span></span>.</li>
+ <li><span id="result_box" lang="de"><span class="hps">Ein</span> <span class="hps">Funktionswert</span> <span class="hps">(siehe</span> <span class="hps">"Methoden"</span> <span class="hps">oben)</span> <span class="hps">kann in JSON keinem Wert zugeordnet werden.</span></span></li>
+ <li><span id="result_box" lang="de"><span class="hps">Objekte</span> <span class="atn hps">wie {</span><span class="atn">{</span><span>jsxref</span> <span class="atn hps">(</span><span class="atn hps">"Date</span><span>")</span><span>}}</span> <span class="hps">werden</span> </span><span id="result_box" lang="de"><span>nach dem Aufruf von</span> <span class="atn hps">{</span><span class="atn">{</span><span>jsxref</span> <span class="atn hps">(</span><span class="atn hps">"</span><span>JSON.parse</span><span class="hps">()")</span><span>}}</span></span><span id="result_box" lang="de">, in <span class="hps">einen String</span> <span class="hps">umgewandelt</span><span>, </span><span>.</span></span></li>
+ <li>{{jsxref("JSON.parse()")}} weist berechnete Eigenschaftsnamen zurück und wirft eine Fehlermeldung.</li>
+</ul>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td><a href="/de/docs/Web/JavaScript/Reference/Functions/get">Getter</a> und <a href="/de/docs/Web/JavaScript/Reference/Functions/set">Setter</a> hinzugefügt.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-object-initializer', 'Object Initializer')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Kurzschreibweise für Methoden-/Eigenschaftsnamen und berechnete Eigenschaftsnamen hinzugefügt.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><a href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Properties for ECMAScript </a></td>
+   <td>Entwurf</td>
+   <td>Stage 4 (Fertig).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.operators.object_initializer")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Operators/Property_Accessors">Eigenschaftszugriffe</a></li>
+ <li><code><a href="/de/docs/Web/JavaScript/Reference/Functions/get">get</a></code> / <code><a href="/de/docs/Web/JavaScript/Reference/Functions/set">set</a></code></li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Functions/Method_definitions">Methodendefinitionen</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Lexical_grammar">Lexikalische Grammatik</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/operators/operator_precedence/index.html b/files/de/web/javascript/reference/operators/operator_precedence/index.html
new file mode 100644
index 0000000000..e258a96525
--- /dev/null
+++ b/files/de/web/javascript/reference/operators/operator_precedence/index.html
@@ -0,0 +1,318 @@
+---
+title: Operatorenpriorität
+slug: Web/JavaScript/Reference/Operators/Operator_Precedence
+tags:
+  - JavaScript
+  - Operator
+  - precedence
+translation_of: Web/JavaScript/Reference/Operators/Operator_Precedence
+---
+<p>{{jsSidebar("Operators")}}</p>
+
+<p>Die Operatorpriorität bestimmt, in welcher Reihenfolge Operatoren ausgeführt werden. Operatoren, die in der Rangfolge zuerst kommen, werden auch zuerst ausgeführt.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/expressions-operatorprecedence.html")}}</p>
+
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+
+<h2 id="Assoziativität">Assoziativität</h2>
+
+<p>Assoziativität, bestimmt in welcher Reihenfolge Operatoren der selben Rangfolge ausgeführt werden. Betrachten wir als Beispiel den folgenden Ausdruck:</p>
+
+<pre>a OP b OP c
+</pre>
+
+<p>Linksassoziativ (links nach rechts) bedeutet, dass der Code als <code>(a OP b) OP c</code> ausgeführt wird, während rechtssassoziativ (rechts nach links) heißt, dass der Code wie <code>a OP (b OP c)</code> ausgeführt wird. Zuordnungsoperatoren sind rechtssassoziativ, also kann man schreiben:</p>
+
+<pre>a = b = 5;
+</pre>
+
+<p>mit dem erwarteten Resultat, dass sowohl <code>a</code> als auch <code>b</code> den Wert 5 haben. Das liegt daran, dass Zuordnungsopertoren den Wert zurükgeben, den sie zuerst zugeordnet haben: Zuerst wird <code>b</code> auf 5 gesetzt; daraufhin wird <code>a</code> auf 5, also den Rückgabewert von <code>b = 5</code>, gesetzt.</p>
+
+<h2 id="Tabelle">Tabelle</h2>
+
+<p>Die nachfolgende Tabelle geordnet von der höchsten (20) bis zur kleinsten (1) Priorität.</p>
+
+<table class="fullwidth-table">
+	<tbody>
+		<tr>
+			<th>Priorität</th>
+			<th>Operator</th>
+			<th>Assoziativität</th>
+			<th>Einzelner Operator</th>
+		</tr>
+		<tr>
+			<td>20</td>
+			<td>{{jsxref("Operators/Grouping", "Gruppieren")}}</td>
+			<td>n/a</td>
+			<td><code>( … )</code></td>
+		</tr>
+		<tr>
+			<td colspan="1" rowspan="4">19</td>
+			<td>{{jsxref("Operators/Property_Accessors", "Eigenschaftszugriff", "#Dot_notation")}}</td>
+			<td>links nach rechts</td>
+			<td><code>… . …</code></td>
+		</tr>
+		<tr>
+			<td>{{jsxref("Operators/Property_Accessors", "Berechnete Eigenschaften Access","#Bracket_notation")}}</td>
+			<td>links nach rechts</td>
+			<td><code>… [ … ]</code></td>
+		</tr>
+		<tr>
+			<td>{{jsxref("Operators/new","new")}} (mit Argumentenliste)</td>
+			<td>n/a</td>
+			<td><code>new … ( … )</code></td>
+		</tr>
+		<tr>
+			<td><a href="/de/docs/Web/JavaScript/Guide/Functions" title="JavaScript/Reference/Operators/Special_Operators/function_call">Funktionsaufruf</a></td>
+			<td>links nach rechts</td>
+			<td><code>… ( <var>… </var>)</code></td>
+		</tr>
+		<tr>
+			<td>18</td>
+			<td>{{jsxref("Operators/new","new")}} (ohne Argumentenliste)</td>
+			<td>rechts nach links</td>
+			<td><code>new …</code></td>
+		</tr>
+		<tr>
+			<td rowspan="2">17</td>
+			<td>{{jsxref("Operators/Arithmetic_Operators","Postfix Inkrement","#Increment")}}</td>
+			<td colspan="1" rowspan="2">n/a</td>
+			<td><code>… ++</code></td>
+		</tr>
+		<tr>
+			<td>{{jsxref("Operators/Arithmetic_Operators","Postfix Dekrement","#Decrement")}}</td>
+			<td><code>… --</code></td>
+		</tr>
+		<tr>
+			<td colspan="1" rowspan="10">16</td>
+			<td><a href="/de/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_NOT" title="JavaScript/Reference/Operators/Logical_Operators">Logisches NICHT</a></td>
+			<td colspan="1" rowspan="10">rechts nach links</td>
+			<td><code>! …</code></td>
+		</tr>
+		<tr>
+			<td><a href="/de/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_NOT" title="JavaScript/Reference/Operators/Bitwise_Operators">Bitweises NICHT</a></td>
+			<td><code>~ …</code></td>
+		</tr>
+		<tr>
+			<td><a href="/de/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_plus" title="JavaScript/Reference/Operators/Arithmetic_Operators">Unäres Plus</a></td>
+			<td><code>+ …</code></td>
+		</tr>
+		<tr>
+			<td><a href="/de/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_negation" title="JavaScript/Reference/Operators/Arithmetic_Operators">Unäres Minus</a></td>
+			<td><code>- …</code></td>
+		</tr>
+		<tr>
+			<td><a href="/de/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment" title="JavaScript/Reference/Operators/Arithmetic_Operators">Prefix Inkrement</a></td>
+			<td><code>++ …</code></td>
+		</tr>
+		<tr>
+			<td><a href="/de/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Decrement" title="JavaScript/Reference/Operators/Arithmetic_Operators">Prefix Dekrement</a></td>
+			<td><code>-- …</code></td>
+		</tr>
+		<tr>
+			<td><a href="/de/docs/Web/JavaScript/Reference/Operators/typeof" title="JavaScript/Reference/Operators/Special_Operators/typeof_Operator">typeof</a></td>
+			<td><code>typeof …</code></td>
+		</tr>
+		<tr>
+			<td><a href="/de/docs/Web/JavaScript/Reference/Operators/void" title="JavaScript/Reference/Operators/Special_Operators/void_Operator">void</a></td>
+			<td><code>void …</code></td>
+		</tr>
+		<tr>
+			<td><a href="/de/docs/Web/JavaScript/Reference/Operators/delete" title="JavaScript/Reference/Operators/Special_Operators/delete_Operator">delete</a></td>
+			<td><code>delete …</code></td>
+		</tr>
+		<tr>
+			<td><a href="/de/docs/Web/JavaScript/Reference/Operators/await">await</a></td>
+			<td><code>await …</code></td>
+		</tr>
+		<tr>
+			<td>15</td>
+			<td><a href="/de/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Exponentiation" title="JavaScript/Reference/Operators/Arithmetic_Operators">Potenzierung</a></td>
+			<td>rechts nach links</td>
+			<td><code>… ** …</code></td>
+		</tr>
+		<tr>
+			<td rowspan="3">14</td>
+			<td><a href="/de/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Multiplication" title="JavaScript/Reference/Operators/Arithmetic_Operators">Multiplikation</a></td>
+			<td colspan="1" rowspan="3">links nach rechts</td>
+			<td><code>… * …</code></td>
+		</tr>
+		<tr>
+			<td><a href="/de/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Division" title="JavaScript/Reference/Operators/Arithmetic_Operators">Division</a></td>
+			<td><code>… / …</code></td>
+		</tr>
+		<tr>
+			<td><a href="/de/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder" title="JavaScript/Reference/Operators/Arithmetic_Operators">Rest</a></td>
+			<td><code>… % …</code></td>
+		</tr>
+		<tr>
+			<td rowspan="2">13</td>
+			<td><a href="/de/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition" title="JavaScript/Reference/Operators/Arithmetic_Operators">Addition</a></td>
+			<td colspan="1" rowspan="2">links nach rechts</td>
+			<td><code>… + …</code></td>
+		</tr>
+		<tr>
+			<td><a href="/de/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Subtraction" title="JavaScript/Reference/Operators/Arithmetic_Operators">Subtraktion</a></td>
+			<td><code>… - …</code></td>
+		</tr>
+		<tr>
+			<td rowspan="3">12</td>
+			<td><a href="/de/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="JavaScript/Reference/Operators/Bitwise_Operators">Bitweise Linksverschiebung</a></td>
+			<td colspan="1" rowspan="3">links nach rechts</td>
+			<td><code>… &lt;&lt; …</code></td>
+		</tr>
+		<tr>
+			<td><a href="/de/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="JavaScript/Reference/Operators/Bitwise_Operators">Bitweise Rechtsverschiebung</a></td>
+			<td><code>… &gt;&gt; …</code></td>
+		</tr>
+		<tr>
+			<td><a href="/de/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="JavaScript/Reference/Operators/Bitwise_Operators">Bitweise Vorzeichnelose Rechtsverschiebung</a></td>
+			<td><code>… &gt;&gt;&gt; …</code></td>
+		</tr>
+		<tr>
+			<td rowspan="6">11</td>
+			<td><a href="/de/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than_operator" title="JavaScript/Reference/Operators/Comparison_Operators">Kleiner als</a></td>
+			<td colspan="1" rowspan="6">links nach rechts</td>
+			<td><code>… &lt; …</code></td>
+		</tr>
+		<tr>
+			<td><a href="/de/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than__or_equal_operator" title="JavaScript/Reference/Operators/Comparison_Operators">Kleiner als oder gleich</a></td>
+			<td><code>… &lt;= …</code></td>
+		</tr>
+		<tr>
+			<td><a href="/de/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_operator" title="JavaScript/Reference/Operators/Comparison_Operators">Größer als</a></td>
+			<td><code>… &gt; …</code></td>
+		</tr>
+		<tr>
+			<td><a href="/de/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_or_equal_operator" title="JavaScript/Reference/Operators/Comparison_Operators">Größer als oder gleich</a></td>
+			<td><code>… &gt;= …</code></td>
+		</tr>
+		<tr>
+			<td><a href="/de/docs/Web/JavaScript/Reference/Operators/in" title="JavaScript/Reference/Operators/Special_Operators/in_Operator">in</a></td>
+			<td><code>… in …</code></td>
+		</tr>
+		<tr>
+			<td><a href="/de/docs/Web/JavaScript/Reference/Operators/instanceof" title="JavaScript/Reference/Operators/Special_Operators/instanceof_Operator">instanceof</a></td>
+			<td><code>… instanceof …</code></td>
+		</tr>
+		<tr>
+			<td rowspan="4">10</td>
+			<td><a href="/de/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Equality" title="JavaScript/Reference/Operators/Comparison_Operators">Gleichheit</a></td>
+			<td colspan="1" rowspan="4">links nach rechts</td>
+			<td><code>… == …</code></td>
+		</tr>
+		<tr>
+			<td><a href="/de/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Inequality" title="JavaScript/Reference/Operators/Comparison_Operators">Ungleichheit</a></td>
+			<td><code>… != …</code></td>
+		</tr>
+		<tr>
+			<td><a href="/de/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Identity" title="JavaScript/Reference/Operators/Comparison_Operators">Strikte Gleichheit</a></td>
+			<td><code>… === …</code></td>
+		</tr>
+		<tr>
+			<td><a href="/de/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Nonidentity" title="JavaScript/Reference/Operators/Comparison_Operators">Strikte Ungleichheit</a></td>
+			<td><code>… !== …</code></td>
+		</tr>
+		<tr>
+			<td>9</td>
+			<td><a href="/de/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_AND" title="JavaScript/Reference/Operators/Bitwise_Operators">Bitweises UND</a></td>
+			<td>links nach rechts</td>
+			<td><code>… &amp; …</code></td>
+		</tr>
+		<tr>
+			<td>8</td>
+			<td><a href="/de/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR" title="JavaScript/Reference/Operators/Bitwise_Operators">Bitweises Exklusiv ODER (XOR)</a></td>
+			<td>links nach rechts</td>
+			<td><code>… ^ …</code></td>
+		</tr>
+		<tr>
+			<td>7</td>
+			<td><a href="/de/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_OR" title="JavaScript/Reference/Operators/Bitwise_Operators">Bitweises ODER</a></td>
+			<td>links nach rechts</td>
+			<td><code>… | …</code></td>
+		</tr>
+		<tr>
+			<td>6</td>
+			<td><a href="/de/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_AND" title="JavaScript/Reference/Operators/Logical_Operators">Logisches UND</a></td>
+			<td>links nach rechts</td>
+			<td><code>… &amp;&amp; …</code></td>
+		</tr>
+		<tr>
+			<td>5</td>
+			<td><a href="/de/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR" title="JavaScript/Reference/Operators/Logical_Operators">Logisches ODER</a></td>
+			<td>links nach rechts</td>
+			<td><code>… || …</code></td>
+		</tr>
+		<tr>
+			<td>4</td>
+			<td><a href="/de/docs/Web/JavaScript/Reference/Operators/Conditional_Operator" title="JavaScript/Reference/Operators/Special_Operators/Conditional_Operator">Bedingt</a></td>
+			<td>rechts nach links</td>
+			<td><code>… ? … : …</code></td>
+		</tr>
+		<tr>
+			<td rowspan="13">3</td>
+			<td rowspan="13"><a href="/de/docs/Web/JavaScript/Reference/Operators/Assignment_Operators" title="JavaScript/Reference/Operators/Assignment_Operators">Zuweisung</a></td>
+			<td rowspan="13">rechts nach links</td>
+			<td><code>… = …</code></td>
+		</tr>
+		<tr>
+			<td><code>… += …</code></td>
+		</tr>
+		<tr>
+			<td><code>… -= …</code></td>
+		</tr>
+		<tr>
+			<td><code>… **= …</code></td>
+		</tr>
+		<tr>
+			<td><code>… *= …</code></td>
+		</tr>
+		<tr>
+			<td><code>… /= …</code></td>
+		</tr>
+		<tr>
+			<td><code>… %= …</code></td>
+		</tr>
+		<tr>
+			<td><code>… &lt;&lt;= …</code></td>
+		</tr>
+		<tr>
+			<td><code>… &gt;&gt;= …</code></td>
+		</tr>
+		<tr>
+			<td><code>… &gt;&gt;&gt;= …</code></td>
+		</tr>
+		<tr>
+			<td><code>… &amp;= …</code></td>
+		</tr>
+		<tr>
+			<td><code>… ^= …</code></td>
+		</tr>
+		<tr>
+			<td><code>… |= …</code></td>
+		</tr>
+		<tr>
+			<td colspan="1" rowspan="2">2</td>
+			<td><a href="/de/docs/Web/JavaScript/Reference/Operators/yield" title="JavaScript/Reference/Operators/yield">yield</a></td>
+			<td colspan="1" rowspan="2">rechts nach links</td>
+			<td><code>yield …</code></td>
+		</tr>
+		<tr>
+			<td><a href="/de/docs/Web/JavaScript/Reference/Operators/yield*" title="JavaScript/Reference/Operators/yield">yield*</a></td>
+			<td><code>yield* …</code></td>
+		</tr>
+		<tr>
+			<td>1</td>
+			<td><a href="/de/docs/Web/JavaScript/Reference/Operators/Spread_operator" title="JavaScript/Reference/Operators/Spread_operator">Spread</a></td>
+			<td>n/a</td>
+			<td><code>...</code> …</td>
+		</tr>
+		<tr>
+			<td>0</td>
+			<td><a href="/de/docs/Web/JavaScript/Reference/Operators/Comma_Operator" title="JavaScript/Reference/Operators/Comma_Operator">Komma / Sequenz</a></td>
+			<td>links nach rechts</td>
+			<td><code>… , …</code></td>
+		</tr>
+	</tbody>
+</table>
diff --git a/files/de/web/javascript/reference/operators/optionale_verkettung/index.html b/files/de/web/javascript/reference/operators/optionale_verkettung/index.html
new file mode 100644
index 0000000000..8ef763b3cd
--- /dev/null
+++ b/files/de/web/javascript/reference/operators/optionale_verkettung/index.html
@@ -0,0 +1,194 @@
+---
+title: Optionale Verkettung
+slug: Web/JavaScript/Reference/Operators/Optionale_Verkettung
+tags:
+  - Experimentell
+  - JavaScript
+  - Operator
+  - Optionale Verkettung
+  - Referenz
+  - Verkettung
+translation_of: Web/JavaScript/Reference/Operators/Optional_chaining
+---
+<div>{{JSSidebar("Operators")}}</div>
+
+<p>{{SeeCompatTable}}</p>
+
+<p>Der <strong>Optionale-Verkettung</strong>s-Operator (Optional Chaining) <strong><code>?.</code></strong> ermöglicht es, einen Wert aus einer Eigenschaft tief innerhalb einer Verkettung von Objekt-Eigenschaften auszulesen, ohne dabei explizit überprüfen zu müssen, ob jede Referenz in der Kette valide ist.<span class="seoSummary">Der <code>?.</code> Operator funktioniert ähnlich wie der <code>.</code> -Verkettungs Operator, außer dass er keinen Fehler bei einem {{glossary("nullish")}} ({{JSxRef("null")}} oder {{JSxRef("undefined")}}) Wert auswirft, sondern stattdessen den Ausdruck beendet und <code>undefined</code> zurückgibt.</span> Wird er mit Funktionsaufrufen verwendet, wirft der Aufruf <code>undefined</code> zurück, wenn die Funktion nicht existiert.</p>
+
+<p>Das Ergebnis sind kürzere und einfacherere Anweisungen wenn auf verkettete Eigenschaften zugegriffen wird, bei denen die Möglichkeit besteht, dass sie fehlen. Er kann außerdem hilfreich sein, wenn man den Inhalt eines Objektes erhalten möchte wenn es keine Garantie dafür gibt welche Eigenschaften benötigt werden.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-optionalchainingoperator.html")}}</div>
+
+<div></div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>obj</var>?.<var>prop</var>
+<var>obj</var>?.[<var>expr</var>]
+<em>arr</em>?.[<var>index</var>]
+<var>func</var>?.(<var>args</var>)
+</pre>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Der Optionale-Verkettungs-Operator ermöglicht einen Weg auf Werte in einer Verkettung aus Eigenschaften zuzugreifen, wenn die Möglichkeit existiert, dass eine der Referenzen oder Funktionen in der Kette <code>undefined</code> oder <code>null</code> sind.</p>
+
+<p>Als Beispiel nehmen wir ein Objekt <code>obj</code>, dass eine verschachtelte Struktur besitzt. Ohne Optionale Verkettung müssen wir beim Zugriff auf einen Wert jede Referenz innerhalb der Kette auf ihre Existenz überprüfen:</p>
+
+<pre class="brush: js">let nestedProp = obj.first &amp;&amp; obj.first.second;</pre>
+
+<p>Der Wert von <code>obj.first</code> wird darauf geprüft nicht-<code>null</code> (und nicht-<code>undefined</code>) zu sein und erst dann greifen wir auf den Wert <code>obj.first.second</code> zu. Dies verhindet einen Fehler der auftreten würde wenn wir direkt <code>obj.first.second</code> ansprechen ohne zuvor <code>obj.first</code> zu prüfen.</p>
+
+<p>Mit dem Optionale-Verkettungs-Operator (<code>?.</code>) allerdings müssen wir nicht explizit testen und können eine Abkürzung auf Basis des Wertes von <code>obj.first</code> nutzen bevor auf auf <code>obj.first.second</code> zugreifen:</p>
+
+<pre class="brush: js">let nestedProp = obj.first?.second;</pre>
+
+<p>Durch die Verwendung des <code>?.</code>-Operators statt nur dem <code>.</code> stellet JavaScript sicher, dass zuvor geprüft wird ob <code>obj.first</code> nicht <code>null</code> oder <code>undefined</code> ist bevor auf <code>obj.first.second</code> zugegriffen wird. Wenn <code>obj.first</code> <code>null</code> oder <code>undefined</code> ist, wird der Ausdruck automatisch sofort beendet und wirft den Wert <code>undefined</code> zurück</p>
+
+<p>Das ist dasselbe wie folgender Ausdruck:</p>
+
+<pre class="brush: js">let nestedProp = ((obj.first === null || obj.first === undefined) ? undefined : obj.first.second);</pre>
+
+<h3 id="Optionale_Verkettung_mit_Funktionsaufrufen">Optionale Verkettung mit Funktionsaufrufen</h3>
+
+<p>Optionale Verkettung kann verwendet werden um Funktionen aufzurufen, die womöglich nicht existeiren. Das kann hilfreich sein wenn man z.B. eine API verwenden möchte die möglicherweise nicht verfügbar ist, entweder durch das Alter der Implementierung oder weil die Funktionalität nicht für das Gerät verfügbar ist.</p>
+
+<p>Verwendet man optionale Verkettung mit Funktionsaufrufen, wird der Ausdruck automatisch <code>undefined</code> zurückwerfen, sollte die Funktion nicht existieren:</p>
+
+<pre class="brush: js">let result = someInterface.customMethod?.();</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Wenn eine Eigenschaft mit dem Namen existiert, die aber keine Funktion ist, wird <code>?.</code> trotzdem eine {{JSxRef("TypeError")}} Ausnahme auslösen (<code>x.y</code><code> ist keine Funktion</code>).</p>
+</div>
+
+<h4 id="Optionale_Callbacks_oder_Event_Handler_handhaben">Optionale Callbacks oder Event Handler handhaben</h4>
+
+<p>If you use callbacks or fetch methods from an object with <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring">a destructuring assignment</a>, you may have non-existent values that you cannot call as functions unless you have tested their existence. Using <code>?.</code>, you can avoid this extra test:</p>
+
+<pre class="brush: js">// Written as of ES2019
+function doSomething(onContent, onError) {
+  try {
+    // ... do something with the data
+  }
+  catch (err) {
+    if (onError) { // Testing if onError really exists
+      onError(err.message);
+    }
+  }
+}
+</pre>
+
+<pre class="brush: js">// Using optional chaining with function calls
+function doSomething(onContent, onError) {
+  try {
+   // ... do something with the data
+  }
+  catch (err) {
+    onError?.(err.message); // no exception if onError is undefined
+  }
+}
+</pre>
+
+<h3 id="Optional_chaining_with_expressions">Optional chaining with expressions</h3>
+
+<p>You can also use the optional chaining operator when accessing properties with an expression using <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Bracket_notation">the bracket notation of the property accessor</a>:</p>
+
+<pre class="brush: js">let nestedProp = obj?.['prop' + 'Name'];
+</pre>
+
+<h3 id="Array_item_access_with_optional_chaining">Array item access with optional chaining</h3>
+
+<pre class="brush: js">let arrayItem = arr?.[42];</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Basic_example">Basic example</h3>
+
+<p>This example looks for the value of the <code>name</code> property for the member <code>bar</code> in a map when there is no such member. The result is therefore <code>undefined</code>.</p>
+
+<pre class="brush: js">let myMap = new Map();
+myMap.set("foo", {name: "baz", desc: "inga"});
+
+let nameBar = myMap.get("bar")?.name;</pre>
+
+<h3 id="Short-circuiting_evaluation">Short-circuiting evaluation</h3>
+
+<p>When using optional chaining with expressions, if the left operand is <code>null</code> or <code>undefined</code>, the expression will not be evaluated. For instance:</p>
+
+<pre class="brush: js">let potentiallyNullObj = null;
+let x = 0;
+let prop = potentiallyNullObj?.[x++];
+
+console.log(x); // 0 as x was not incremented
+</pre>
+
+<h3 id="Stacking_the_optional_chaining_operator">Stacking the optional chaining operator</h3>
+
+<p>With nested structures, it is possible to use optional chaining multiple times:</p>
+
+<pre class="brush: js">let customer = {
+  name: "Carl",
+  details: {
+    age: 82,
+    location: "Paradise Falls" // detailed address is unknown
+  }
+};
+let customerCity = customer.details?.address?.city;
+
+// … this also works with optional chaining function call
+let duration = vacations.trip?.getTime?.();
+</pre>
+
+<h3 id="Combining_with_the_nullish_coalescing_operator">Combining with the nullish coalescing operator</h3>
+
+<p>The nullish coalescing operator may be used after optional chaining in order to build a default value when none was found:</p>
+
+<pre class="brush: js">let customer = {
+  name: "Carl",
+  details: { age: 82 }
+};
+const customerCity = customer?.city ?? "Unknown city";
+console.log(customerCity); // Unknown city</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://tc39.es/proposal-optional-chaining/#top">Proposal for the "optional chaining" operator</a></td>
+   <td>Stage 4</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.operators.optional_chaining")}}</p>
+</div>
+
+<h3 id="Implementation_Progress">Implementation Progress</h3>
+
+<p>The following table provides a daily implementation status for this feature, because this feature has not yet reached cross-browser stability. The data is generated by running the relevant feature tests in <a href="https://github.com/tc39/test262">Test262</a>, the standard test suite of JavaScript, in the nightly build, or latest release of each browser's JavaScript engine.</p>
+
+<div>{{EmbedTest262ReportResultsTable("optional-chaining")}}</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{JSxRef("Operators/Nullish_Coalescing_Operator", "Nullish Coalescing Operator", '', 1)}}</li>
+ <li><a href="https://github.com/tc39/proposals">TC39 proposals</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/operators/pipeline_operator/index.html b/files/de/web/javascript/reference/operators/pipeline_operator/index.html
new file mode 100644
index 0000000000..653e1a859d
--- /dev/null
+++ b/files/de/web/javascript/reference/operators/pipeline_operator/index.html
@@ -0,0 +1,67 @@
+---
+title: Pipeline Operator
+slug: Web/JavaScript/Reference/Operators/Pipeline_operator
+tags:
+  - Experimental
+  - JavaScript
+  - Operator
+translation_of: Web/JavaScript/Reference/Operators/Pipeline_operator
+---
+<div>{{jsSidebar("Operators")}} {{SeeCompatTable}}</div>
+
+<p>Der experimentelle Pipline Operator <code>|&gt;</code> (aktuell in Stage 1) erlaubt es verkettete Funktionsaufrufe in einer Lesbaren form zu erstellen. Grundsätzlich ist der Pipline Operator syntaktischer Zucker für den Aufruf einer Funktion mit einem Argument. Er erlaubt es</p>
+
+<p><code>'%21' |&gt; decodeURI</code> statt <code>decodeURI('%21')</code> zu schreiben.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">expression |&gt; function</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Verkettete_Funktionsaufrufe">Verkettete Funktionsaufrufe</h3>
+
+<p>Der Pipline Operator kann die Lesbarkeit von verketteten Funktionsaufrufen verbessern.</p>
+
+<pre class="brush: js">const double = (n) =&gt; n * 2;
+const increment = (n) =&gt; n + 1;
+
+// Ohne Pipeline Operator
+double(increment(double(double(5)))); // 42
+
+// mit Pipeline Operator
+5 |&gt; double |&gt; double |&gt; increment |&gt; double; // 42
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="http://tc39.github.io/proposal-pipeline-operator/">Pipeline operator draft</a></td>
+   <td>Stage 1</td>
+   <td>Kein Teil der ECMAScript Spezifikation.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.operators.pipeline")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="https://github.com/tc39/proposals">TC39 proposals</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/operators/property_accessors/index.html b/files/de/web/javascript/reference/operators/property_accessors/index.html
new file mode 100644
index 0000000000..9dac328d6a
--- /dev/null
+++ b/files/de/web/javascript/reference/operators/property_accessors/index.html
@@ -0,0 +1,150 @@
+---
+title: Eigenschaftszugriff
+slug: Web/JavaScript/Reference/Operators/Property_Accessors
+tags:
+  - JavaScript
+  - Operator
+translation_of: Web/JavaScript/Reference/Operators/Property_Accessors
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Eigenschaftszugriffe erlauben den Zugriff auf Eigenschaften eines Objekts, indem die Punktnotation oder Klammernotation benutzt wird.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-propertyaccessors.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">object.property
+object['property']
+</pre>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Man kann ein Objekt wie ein assoziatives Array (auch bekannt als Map, Dictionary, Hash, lookup table) vorstellen. Die Schlüssel im Array sind die Namen der Eigenschaften des Objekts. Es ist typisch, wenn man von Eigenschaften eines Objekts spricht, zwischen Eigenschaften und Methoden zu unterscheiden. Die Eigenschaften/Methoden-Unterscheidung ist jedoch nur eine Konvention. Eine Methode ist einfach eine Eigenschaft die aufgerufen werden kann, zum Beispiel wenn sie als Wert eine Referenz auf eine <a href="/de/docs/Web/JavaScript/Reference/Functions">Funktions</a> Instanz hat.</p>
+
+<p>Es gibt zwei Wege auf Eigenschaften zuzugreifen: Die Punktnotation und die Klammernotation.</p>
+
+<h3 id="Punktnotation">Punktnotation</h3>
+
+<pre class="brush: js">get = object.property;
+object.property = set;
+</pre>
+
+<p>In diesem Quelltext muss <code>property</code> ein gültiger Bezeichner ein, d. h. eine Sequenz von alphanumerischen Zeichen inklusive Unterstrich (<code>_</code>) und Dollarzeichen (<code>$</code>) die nicht mit einer Nummer beginnen können. Zum Beispiel ist <code>object.$1</code> gültig währenddem <code>object.1</code> nicht gültig ist.</p>
+
+<pre class="brush: js">document.createElement('pre');
+</pre>
+
+<p>Hier wird die Methode namens "createElement" von <code>document</code> erfragt und aufgerufen.</p>
+
+<p>Wenn man eine Methode für ein numerisches Literal nutzt, das keinen Exponenten und keine Kommastelle besitzt, können vor dem Punkt, der vor dem Methodenaufruf steht, Whitespaces stehen, um die Interpretation des Punktes als Komma zu verhindern.</p>
+
+<pre class="brush: js">77 .toExponential();
+// oder
+77
+.toExponential();
+// oder
+(77).toExponential();
+// oder
+77..toExponential();
+// oder
+77.0.toExponential();
+// weil 77. === 77.0, keine Zweideutigkeit</pre>
+
+<h3 id="Klammernotation">Klammernotation</h3>
+
+<pre class="brush: js">get = object[property_name];
+object[property_name] = set;
+</pre>
+
+<p><code>property_name</code> ist ein String. Der String muss kein gültiger Bezeichner sein; er kann einen beliebigen Wert haben, z. B. "1foo", "!bar!" oder sogar " "  (ein Leerzeichen).</p>
+
+<pre class="brush: js">document['createElement']('pre');
+</pre>
+
+<p>Dieses macht genau dasselbe wie das vorherige Beispiel.</p>
+
+<p>Ein Leerzeichen vor der Klammernotation ist erlaubt.</p>
+
+<pre class="brush: js">document ['createElement']('pre');</pre>
+
+<h3 id="Eigenschaftensnamen">Eigenschaftensnamen</h3>
+
+<p>Eigenschaftsnamen müssen Strings sein. Das bedeutet dass Objekte, die kein String sind, nicht als Schlüssel in einem Objekt verwendet werden können. Jedes Objekt das keine String ist, inklusive Zahlen, wird mittels <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Object/toString">toString </a>in einen String umgewandelt.</p>
+
+<pre class="brush: js">var object = {};
+object['1'] = 'value';
+console.log(object[1]);
+</pre>
+
+<p>Dies gibt "value" aus, weil 1 in '1' umgewandelt wird.</p>
+
+<pre class="brush: js">var foo = {unique_prop: 1}, bar = {unique_prop: 2}, object = {};
+object[foo] = 'value';
+console.log(object[bar]);
+</pre>
+
+<p>Dies gibt auch "value" aus, weil beide Objekte, foo und bar, in den gleiche String umgewandelt werden. In der SpiderMonkey JavaScript Engine ist dieser String "['object Object']".</p>
+
+<h3 id="Methodenbindung">Methodenbindung</h3>
+
+<p>Eine Methode ist nicht an ein Objekt gebunden zu dem sie gehört. Vor allem <code>this</code> ist nicht an eine Methode gebunden, d. h. <code>this</code> muss nicht unbedingt auf das Objekt verweisen das die Methode enthält. <code>this</code> wird stattdessen vom Funktionsaufruf gesetzt. Siehe auch <code><a href="/de/docs/Web/JavaScript/Reference/Operators/this">this</a></code> dazu.</p>
+
+<h3 id="Hinweis_zu_eval">Hinweis zu <code>eval</code></h3>
+
+<p>JavaScript-Anfänger machen oft den Fehler <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/eval">eval </a>zu nutzen wo die Klammernotation verwendet werden kann. Zum Beispiel sieht man folgende Syntax häufig in vielen Skripten.</p>
+
+<pre class="brush: js">x = eval('document.forms.form_name.elements.' + strFormControl + '.value');
+</pre>
+
+<p><a href="https://www.nczonline.net/blog/2013/06/25/eval-isnt-evil-just-misunderstood/">eval</a> ist langsam und sollte wenn möglich vermieden werden. Außerdem würde <code>strFormControl</code> auch einen Bezeichner beinhalten müssen der für Namen und IDs von Formularelementen nicht benötigt wird. Es ist besser die Klammernotation zu verwenden.</p>
+
+<pre class="brush: js">x = document.forms['form_name'].elements[strFormControl].value;
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-property-accessors', 'Property Accessors')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-property-accessors', 'Property Accessors')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.2.1', 'Property Accessors')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.2.1', 'Property Accessors')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.operators.property_accessors")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Object")}}</li>
+ <li>{{jsxref("Object/defineProperty")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/operators/spread_operator/index.html b/files/de/web/javascript/reference/operators/spread_operator/index.html
new file mode 100644
index 0000000000..13b3070be5
--- /dev/null
+++ b/files/de/web/javascript/reference/operators/spread_operator/index.html
@@ -0,0 +1,219 @@
+---
+title: Spread-Operator
+slug: Web/JavaScript/Reference/Operators/Spread_operator
+tags:
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Operator
+translation_of: Web/JavaScript/Reference/Operators/Spread_syntax
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Mit der <strong>Spread-Syntax</strong> kann ein einzelner Ausdruck dort expandiert werden, wo mehrere Argumente (bei Funktionsaufrufen), mehrere Elemente (für Array-Literale) oder mehrere Variablen (für destrukturierende Anweisungen) erwartet werden.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>Für Funktionsaufrufe:</p>
+
+<pre class="brush: js">myFunction(...iterableObj);
+</pre>
+
+<p>Für Array-Literale:</p>
+
+<pre class="brush: js">[...iterableObj, 4, 5, 6]</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Ein_besseres_apply">Ein besseres "apply"</h3>
+
+<p><strong>Beispiel:</strong> Für gewöhnlich wird {{jsxref( "Function.prototype.apply")}} verwendet, wenn man die Elemente eines Arrays als Argumente eines Funktionsaufrufs nutzen möchte:</p>
+
+<pre class="brush: js">function myFunction(x, y, z) { }
+var args = [0, 1, 2];
+myFunction.apply(null, args);</pre>
+
+<p>Mit dem ES2015 Spread-Operator kann das nun wie folgt geschrieben werden:</p>
+
+<pre class="brush: js">function myFunction(x, y, z) { }
+var args = [0, 1, 2];
+myFunction(...args);</pre>
+
+<p>Die Spread-Syntax kann für jedes beliebige Argument der Argumentliste verwendet werden, und sie kann auch mehrmals verwendet werden:</p>
+
+<pre class="brush: js">function myFunction(v, w, x, y, z) { }
+var args = [0, 1];
+myFunction(-1, ...args, 2, ...[3]);</pre>
+
+<h3 id="Ein_mächtigeres_Array-Literal">Ein mächtigeres Array-Literal</h3>
+
+<p><strong>Beispiel:</strong> Wenn man ohne den Spread-Operator ein neues Array erstellen will, bei dem ein Teil davon ein bereits bestehendes Array sein soll, dann ist die Array-Literal-Syntax nicht mehr ausreichend und man muss auf imperative Programmierung mit einer Kombination aus <code>push</code>, <code>splice</code>, <code>concat</code>, etc. zurückgreifen. Mit der Spread-Syntax jedoch kann das viel prägnanter ausgedrückt werden:</p>
+
+<pre class="brush: js">var parts = ['shoulders', 'knees'];
+var lyrics = ['head', ...parts, 'and', 'toes']; // <span class="objectBox objectBox-array"><a class="objectLink "><span class="arrayLeftBracket">[</span></a><span class="objectBox objectBox-string">"head"</span><span class="arrayComma">, </span><span class="objectBox objectBox-string">"shoulders"</span><span class="arrayComma">, </span><span class="objectBox objectBox-string">"knees"</span><span class="arrayComma">, </span><span class="objectBox objectBox-string">"and"</span><span class="arrayComma">, </span><span class="objectBox objectBox-string">"toes"</span></span>]
+</pre>
+
+<p>Genau wie der Spread-Operator für Argumentlisten kann <code>...</code> überall im Array-Literal verwendet werden, auch mehrmals.</p>
+
+<h3 id="Apply_für_new">"Apply" für "new"</h3>
+
+<p><strong>Beispiel:</strong> In ES5 kann <code>new</code> nicht mit <code>apply</code> kombiniert werden (nach den ES5-Regeln führt <code>apply</code> einen <code>[[Call]]</code> aus, keinen <code>[[Construct]]</code>). Die Spread-Syntax von ES2015 unterstützt dies auf ganz natürliche Weise:</p>
+
+<pre class="brush: js">var dateFields = readDateFields(database);
+var d = new Date(...dateFields);</pre>
+
+<h3 id="Ein_Array_kopieren">Ein Array kopieren</h3>
+
+<pre>var arr = [1,2,3];
+var arr2 = [...arr]; // wie arr.slice()
+arr2.push(4);        // arr2 wird [1,2,3,4], arr bleibt unverändert.</pre>
+
+<h3 id="Ein_besseres_push">Ein besseres "push"</h3>
+
+<p><strong>Beispiel:</strong> {{jsxref("Global_Objects/Array/push", "push")}} wird oft verwendet um alle Elemente eines Arrays an das Ende eines bestehenden Arrays anzuhängen. Das wird in ES5 oft wie folgt umgesetzt:</p>
+
+<pre class="brush: js">var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+// Append all items from arr2 onto arr1
+Array.prototype.push.apply(arr1, arr2);</pre>
+
+<p>Mit dem Spread-Operator von ES2015 wird daraus:</p>
+
+<pre class="brush: js">var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+arr1.push(...arr2);</pre>
+
+<h3 id="Nur_apply_für_iterables">Nur "apply" für iterables</h3>
+
+<pre>var obj = {"key1":"value1"};
+function myFunction(x) {
+    console.log(x) // undefined
+}
+myFunction(...obj);
+var args = [...obj];
+console.log(args, args.length); // [] 0</pre>
+
+<h2 id="Rest-Syntax_(Parameter)">Rest-Syntax (Parameter)</h2>
+
+<p>Rest-Syntax sieht genauso aus wie die Spread-Syntax und wird für das Destrukturieren von Arrays und Objekten eingesetzt. Rest-Syntax ist sozusagen das Gegenteil von Spread-Syntax:  Spread klappt die einzelnen Bestandteile eines Arrays aus, während Rest verschiedene einzelne Elemente zu einem Array zusammenfasst.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array-initializer')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definiert in verschiedenen Abschnitten der Spezifikation: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-array-initializer">Array Initializer</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-argument-lists">Argument Lists</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array-initializer')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Spread-Operation innerhalb von Array-Literalen</td>
+   <td>{{CompatChrome("46")}}</td>
+   <td>{{CompatGeckoDesktop("16")}}</td>
+   <td>{{CompatIE("Edge")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Spread-Operation innerhalb von Funktionsaufrufen</td>
+   <td>{{CompatChrome("46")}}</td>
+   <td>{{CompatGeckoDesktop("27")}}</td>
+   <td>{{CompatIE("Edge")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Spread-Operation beim Destrukturieren ("destructuring")</td>
+   <td>{{CompatChrome("49")}}</td>
+   <td>{{CompatGeckoDesktop("34")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Spread-Operation innerhalb von Array-Literalen</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome("46")}}</td>
+   <td>{{CompatGeckoMobile("16")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+   <td>{{CompatChrome("46")}}</td>
+  </tr>
+  <tr>
+   <td>Spread-Operation innerhalb von Funktionsaufrufen</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome("46")}}</td>
+   <td>{{CompatGeckoMobile("27")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+   <td>{{CompatChrome("46")}}</td>
+  </tr>
+  <tr>
+   <td>Spread-Operation beim Destrukturieren ("destructuring")</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("34")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">Rest Parameter</a></li>
+ <li><a href="http://exploringjs.com/es6/ch_destructuring.html#sec_rest-operator">Rest Operator</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/operators/spread_syntax/index.html b/files/de/web/javascript/reference/operators/spread_syntax/index.html
new file mode 100644
index 0000000000..cf1e6da016
--- /dev/null
+++ b/files/de/web/javascript/reference/operators/spread_syntax/index.html
@@ -0,0 +1,236 @@
+---
+title: Spread syntax
+slug: Web/JavaScript/Reference/Operators/Spread_syntax
+translation_of: Web/JavaScript/Reference/Operators/Spread_syntax
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<div>Die <strong>Spread-Syntax </strong>erlaubt es, einen einzelnen Array-Ausdruck oder String an Stellen zu expandieren, an denen Null oder mehr Argumente (für Funktionsaufrufe) oder Elemente (für Array-Literale) erwartet werden, oder einen Objekt-Ausdruck an Stellen zu expandieren, an denen Null oder mehr Schlüssel-Wert-Paare (für Objektliterale) erwartet werden.</div>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-spreadsyntax.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>Für Funktionsaufrufe:</p>
+
+<pre class="syntaxbox">myFunction(...iterableObj);
+</pre>
+
+<p>Für Array-Literale oder Strings:</p>
+
+<pre class="syntaxbox">[...iterableObj, '4', 'fünf', 6];</pre>
+
+<p>Für Objektliterale (neu in ECMAScript 2018):</p>
+
+<pre class="syntaxbox">let objClone = { ...obj };</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Spread_in_Funktionsaufrufen">Spread in Funktionsaufrufen</h3>
+
+<h4 id="Apply_ersetzen">Apply ersetzen</h4>
+
+<p>Es ist üblich {{jsxref( "Function.prototype.apply")}} zu benutzen, wenn man die Elemente eines Arrays als Argumente eines Funktionsaufrufs nutzen möchte.</p>
+
+<pre class="brush: js">function myFunction(x, y, z) { }
+var args = [0, 1, 2];
+myFunction.apply(null, args);</pre>
+
+<p>Mit der Spread-Syntax lässt sich das ganze wie folgt schreiben:</p>
+
+<pre class="brush: js">function myFunction(x, y, z) { }
+var args = [0, 1, 2];
+myFunction(...args);</pre>
+
+<p>Jedes Argument der Argumentliste kann die Spread-Syntax verwenden, und sie kann auch mehrfach verwendet werden.</p>
+
+<pre class="brush: js">function myFunction(v, w, x, y, z) { }
+var args = [0, 1];
+myFunction(-1, ...args, 2, ...[3]);</pre>
+
+<h4 id="Apply_bei_new">Apply bei new</h4>
+
+<p>Beim Aufruf eines Konstruktors mit <code>new</code>, ist es nicht möglich ein Array und <code>apply</code> <strong>direkt </strong>zu benutzen (<code>apply</code> führt <code>[[Call]]</code> und nicht <code>[[Construct]]</code> aus). Allerdings kann dank der Spread-Syntax ein Array mit <code>new</code> verwendet werden:</p>
+
+<pre class="brush: js">var dateFields = [1970, 0, 1];  // 1. Januar 1970
+var d = new Date(...dateFields);
+</pre>
+
+<p>Um <code>new</code> mit einem Array ohne die Spread-Syntax zu nutzen, müsste man das <strong>indirekt </strong>mit <em>Partial Application</em> umsetzen:</p>
+
+<pre class="brush: js">function applyAndNew(constructor, args) {
+  function partial () {
+    return constructor.apply(this, args);
+  };
+  if (typeof constructor.prototype === "object") {
+    partial.prototype = Object.create(constructor.prototype);
+  }
+  return partial;
+}
+
+
+function myConstructor () {
+  console.log("arguments.length: " + arguments.length);
+  console.log(arguments);
+  this.prop1="val1";
+  this.prop2="val2";
+};
+
+var myArguments = ["hi", "wie", "geht's", "dir", "kumpel", null];
+var myConstructorWithArguments = applyAndNew(myConstructor, myArguments);
+
+console.log(new myConstructorWithArguments);
+// (internal log of myConstructor):           arguments.length: 6
+// (internal log of myConstructor):           ["hi", "wie", "geht's", "dir", "kumpel", null]
+// (log of "new myConstructorWithArguments"): {prop1: "val1", prop2: "val2"}</pre>
+
+<h3 id="Spread_bei_Array-Literalen">Spread bei Array-Literalen</h3>
+
+<h4 id="Ein_mächtigeres_Array-Literal">Ein mächtigeres Array-Literal</h4>
+
+<p>Ohne Spread-Syntax ist die Array-Literal-Syntax nicht ausreichend, um ein neues Array zu erzeugen, das aus einem bereits existierenden Array besteht. Man muss dann auf imperative Programmierung mit einer Kombination aus <code>push</code>, <code>splice</code>, <code>concat</code>, etc. umsteigen. Mit Spread-Syntax wird der Code kurz und bündig:</p>
+
+<pre class="brush: js">var parts = ['Schultern', 'Knie'];
+var lyrics = ['Kopf', ...parts, 'und', 'Zehen'];
+// ["Kopf", "Schultern", "Knie", "und", "Zehen"]
+</pre>
+
+<p>Genau wie bei Argumentlisten von Funktionsaufrufen kann <code>...</code> überall und mehrach bei Array-Literalen benutzt werden.</p>
+
+<h4 id="Ein_Array_kopieren">Ein Array kopieren</h4>
+
+<pre class="brush: js">var arr = [1, 2, 3];
+var arr2 = [...arr]; // wie arr.slice()
+arr2.push(4);
+
+// arr2 enthält[1, 2, 3, 4]
+// arr bleibt unverändert
+</pre>
+
+<p><strong>Bemerkung:</strong> Spread-Syntax geht beim Kopieren eines Arrays effektiv eine Ebene tief. Daher kann es für das Kopieren mehrdimensionaler Arrays ungeeignet sein, wie das folgende Beispiel zeigt (dasselbe gilt für {{jsxref("Object.assign()")}} und Spread-Syntax).</p>
+
+<pre class="brush: js">var a = [[1], [2], [3]];
+var b = [...a];
+b.shift().shift(); // 1
+// Auch Array a wurde verändert. [[], [2], [3]]
+</pre>
+
+<h4 id="Eine_bessere_Möglichkeit_Arrays_zu_verketten">Eine bessere Möglichkeit, Arrays zu verketten</h4>
+
+<p>{{jsxref("Array.concat")}} wird oft verwendet, um ein Array an das Ende eines bestehenden Arrays anzuhängen. Ohne Spread-Syntax wird dies wie folgt gemacht:</p>
+
+<pre class="brush: js">var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+// Hänge alle Elemente von arr2 an arr1
+arr1 = arr1.concat(arr2);</pre>
+
+<p>Mit Spread-Syntax wird daraus:</p>
+
+<pre class="brush: js">var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+arr1 = [...arr1, ...arr2];
+</pre>
+
+<p>{{jsxref("Array.unshift")}} wird oft verwendet, um ein Array von Werten am Anfang eines bestehenden Arrays einzufügen. Ohne Spread-Syntax wird dies wie folgt gemacht:</p>
+
+<pre class="brush: js">var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+// Alle Items von arr2 auf arr1 voranstellen
+Array.prototype.unshift.apply(arr1, arr2) // arr1 ist jetzt [3, 4, 5, 0, 1, 2]</pre>
+
+<p>Bei der Spread-Syntax wird dies zu [Beachten Sie jedoch, dass dies ein neues Array <code>arr1</code> erzeugt. Im Gegensatz zu {{jsxref("Array.unshift")}} ändert es nicht das ursprüngliche Array <code>arr1</code> in-place]:</p>
+
+<pre class="brush: js">var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+arr1 = [...arr2, ...arr1]; // arr1 ist jetzt [3, 4, 5, 0, 1, 2]
+</pre>
+
+<h3 id="Spread_für_Objektliterale">Spread für Objektliterale</h3>
+
+<p>Der Vorschlag zu <a href="https://github.com/tc39/proposal-object-rest-spread">Rest-/Spread-Attributen für ECMAScript</a> (Stufe 4) fügt Spread-Attribute zu <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">Objektliteralen</a> hinzu. Dadurch werden die abzählbaren Attribute von einem gegebenen Objekt zu einem neuen hinzugefügt.</p>
+
+<p>Flaches Klonen (ohne <code>prototype</code>) oder Zusammenführen von Objekten ist nun mit einer kürzeren Syntax als {{jsxref("Object.assign()")}} möglich.</p>
+
+<pre class="brush: js">var obj1 = { foo: 'bar', x: 42 };
+var obj2 = { foo: 'baz', y: 13 };
+
+var clonedObj = { ...obj1 };
+// Object { foo: "bar", x: 42 }
+
+var mergedObj = { ...obj1, ...obj2 };
+// Object { foo: "baz", x: 42, y: 13 }</pre>
+
+<p>Beachten Sie, dass {{jsxref("Object.assign()")}}} im Gegensatz zur Spread-Syntax <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">Setter</a> auslöst.</p>
+
+<p>Beachten Sie, dass Sie die Funktion {{jsxref("Object.assign()")}} weder ersetzen noch nachahmen können:</p>
+
+<pre class="brush: js">var obj1 = { foo: 'bar', x: 42 };
+var obj2 = { foo: 'baz', y: 13 };
+const merge = ( ...objects ) =&gt; ( { ...objects } );
+
+var mergedObj = merge ( obj1, obj2);
+// Object { 0: { foo: 'bar', x: 42 }, 1: { foo: "baz", y: 13 } }
+
+var mergedObj = merge ( {}, obj1, obj2);
+// Object { 0: {}, 1: { foo: 'bar', x: 42 }, 2: { foo: "baz", y: 13 } }</pre>
+
+<p>Im obigen Beispiel funktioniert der Spread-Operator nicht wie erwartet: er klappt ein Array von Argumenten aus und liefert ein Array dieser, aufgrund des rest Parameters.</p>
+
+<h3 id="Nur_für_iterierbare_Objekte">Nur für iterierbare Objekte</h3>
+
+<p>Spread-Syntax (anders als bei Spread-Eigenschaften) kann nur auf <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator">iterierbare Objekte</a> angewendet werden:</p>
+
+<pre class="brush: js">var obj = {'key1': 'value1'};
+var array = [...obj]; // TypeError: obj is not iterable
+</pre>
+
+<h3 id="Spread_mit_mehreren_Werten">Spread mit mehreren Werten</h3>
+
+<p>Beachten Sie bei der Verwendung von Spread-Syntax für Funktionsaufrufe die Möglichkeit der Überschreitung der Argumentlängenbegrenzung der JavaScript-Engine. Siehe <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="Die Methode apply() ruft eine Funktion mit einem vorgegeben Wert für this auf sowie weiteren Argumenten, die als Array (oder Array-ähnliches Objekt) bereitgestellt werden."><code>apply()</code></a> für weitere Details.</p>
+
+<h2 id="Rest-Syntax_(Parameter)">Rest-Syntax (Parameter)</h2>
+
+<p>Rest-Syntax sieht genauso aus wie die Spread-Syntax und wird für das Destrukturieren von Arrays und Objekten eingesetzt. Rest-Syntax ist sozusagen das Gegenteil von Spread-Syntax: Spread klappt die einzelnen Bestandteile eines Arrays aus, während Rest verschiedene einzelne Elemente zu einem Array zusammenfasst. Siehe <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">Rest-Parameter.</a></p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array-initializer')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Definiert in mehreren Abschnitten der Spezifikation: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-array-initializer">Array Initializer</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-argument-lists">Argument Lists</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array-initializer')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Keine Änderungen</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object-initializer')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Definiert in <a href="https://tc39.github.io/ecma262/2018/#sec-object-initializer">Object Initializer</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.operators.spread")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">Rest-Parameters</a> (ebenfalls ‘<code>...</code>’)</li>
+</ul>
diff --git a/files/de/web/javascript/reference/operators/super/index.html b/files/de/web/javascript/reference/operators/super/index.html
new file mode 100644
index 0000000000..44e7cf8b8f
--- /dev/null
+++ b/files/de/web/javascript/reference/operators/super/index.html
@@ -0,0 +1,184 @@
+---
+title: super
+slug: Web/JavaScript/Reference/Operators/super
+tags:
+  - Classes
+  - ECMAScript 2015
+  - JavaScript
+  - Left-hand-side expression
+  - Operator
+translation_of: Web/JavaScript/Reference/Operators/super
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<div>Das <strong>super</strong> Schlüsselwort wird verwendet, um Funktionen in einem Vaterobjekt auszuführen.</div>
+
+<div> </div>
+
+<div>Die <code>super.prop</code> und <code>super[expr]</code> Ausdrücke sind in allen <a href="/de/docs/Web/JavaScript/Reference/Functions/Method_definitions">Methodendefinitionen</a> von <a href="/de/docs/Web/JavaScript/Reference/Classes">Klassen</a> und <a href="/de/docs/Web/JavaScript/Reference/Operators/Object_initializer">Objekt Literalen</a> verfügbar.</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">super([arguments]); // calls the parent constructor.
+super.functionOnParent([arguments]);
+</pre>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Wenn ein Konstruktor verwendet wird, muss das <code>super</code> Schlüsselwort verwendet werden, bevor das <code>this</code> Schlüsselwort verwendet werden kann. Mit dem <code>super</code> Schlüsselwort kann man auch Funktionen im Vaterobjekt ausführen.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="super_in_Klassen_verwenden"><code>super</code> in Klassen verwenden</h3>
+
+<p>Der Codeabschnitt ist vom <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">classes Beispiel</a> (<a href="https://googlechrome.github.io/samples/classes-es6/index.html">Live Demo</a>). Hier wird <code>super()</code> aufgerufen, um das duplizieren von Teilen des Konstruktors zu vermeiden, was zwischen <code>Rectangle</code> und <code>Square</code> üblich ist.</p>
+
+<pre class="brush: js">class Rectangle {
+  constructor(height, width) {
+    this.name = 'Rectangle';
+    this.height = height;
+    this.width = width;
+  }
+  sayName() {
+    console.log('Hi, I am a ', this.name + '.');
+  }
+  get area() {
+    return this.height * this.width;
+  }
+  set area(value) {
+    this.height = this.width = Math.sqrt(value);
+  }
+}
+
+class Square extends Rectangle {
+  constructor(length) {
+    this.height; // ReferenceError, super needs to be called first!
+
+    // Here, it calls the parent class' constructor with lengths
+    // provided for the Polygon's width and height
+    super(length, length);
+
+    // Note: In derived classes, super() must be called before you
+    // can use 'this'. Leaving this out will cause a reference error.
+    this.name = 'Square';
+  }
+}</pre>
+
+<h3 id="super_Aufruf_in_statischen_Methoden"><code>super</code> Aufruf in statischen Methoden</h3>
+
+<p><code>super</code> kann auch in <a href="/de/docs/Web/JavaScript/Reference/Classes/static">statischen</a> Methoden verwendet werden.</p>
+
+<pre class="brush: js">class Rectangle {
+  constructor() {}
+  static logNbSides() {
+    return 'I habe 4 sides';
+  }
+}
+
+class Square extends Rectangle {
+  constructor() {}
+  static logDescription() {
+    return super.logNbSides() + ' wich are all equal';
+  }
+}
+Square.logDescription(); // 'I habe 4 sides wich are all equal'
+</pre>
+
+<h3 id="Das_Löschen_von_Supereigenschaften_erzeugt_einen_Fehler">Das Löschen von Supereigenschaften erzeugt einen Fehler</h3>
+
+<p>Man kann den <a href="/de/docs/Web/JavaScript/Reference/Operators/delete"><code>delete</code> Operator</a> in Verbindung mit <code>super.prop</code> oder <code>super[expr]</code> nicht einsetzen, um Eigenschaften zu löschen, es führt zu einem {{jsxref("ReferenceError")}}.</p>
+
+<pre class="brush: js">class Base {
+  constructor() {}
+  foo() {}
+}
+class Derived extends Base {
+  constructor() {}
+  delete() {
+    delete super.foo;
+  }
+}
+
+new Derived().delete(); // ReferenceError: invalid delete involving 'super'. </pre>
+
+<h3 id="super.prop_kann_keine_schreibgeschützten_Eigenschaften_überschreiben"><code>super.prop</code> kann keine schreibgeschützten Eigenschaften überschreiben</h3>
+
+<p>Wenn eine schreibgeschützte Eigenschaft mit z.B. {{jsxref("Object.defineProperty")}}" erzeugt wird, kann der Wert nicht mit <code>super</code> überschrieben werden.</p>
+
+<pre class="brush: js">class X {
+  constructor() {
+    Object.defineProperty(this, "prop", {
+      configurable: true,
+      writable: false,
+      value: 1
+    });
+  }
+}
+
+class Y extends X {
+  constructor() {
+    super();
+  }
+  foo() {
+    super.prop = 2;  // Der Wert kann nicht überschrieben werden
+  }
+}
+
+var y = new Y();
+x.foo(); // TypeError: "prop" is read-only
+console.log(y.prop); // 1
+</pre>
+
+<h3 id="Nutzen_von_super.prop_in_Objektliteralen">Nutzen von <code>super.prop</code> in Objektliteralen</h3>
+
+<p>super kann auch in der <a href="/de/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer / literal</a> Notation verwendet werden. In diesem Beispiel definieren zwei Objekte eine Methode. Im zweiten Beispiel wird mit <code>super</code> die Funktion im ersten Objekt aufgerufen. Das funktioniert mit Hilfe von {{jsxref("Object.setPrototypeOf()")}}. Damit ist es möglich den Prototypen von <code>obj2</code> auf <code>obj1</code> zu setzen, damit <code>super method1</code> in <code>obj1</code> findet.</p>
+
+<pre class="brush: js">var obj1 = {
+  method1() {
+    console.log("method 1");
+  }
+}
+
+var obj2 = {
+  method2() {
+   super.method1();
+  }
+}
+
+Object.setPrototypeOf(obj2, obj1);
+obj2.method2(); // logs "method 1"
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-super-keyword', 'super')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-super-keyword', 'super')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.operators.super")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Classes">Klassen</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/operators/this/index.html b/files/de/web/javascript/reference/operators/this/index.html
new file mode 100644
index 0000000000..d9c36c61d6
--- /dev/null
+++ b/files/de/web/javascript/reference/operators/this/index.html
@@ -0,0 +1,394 @@
+---
+title: this
+slug: Web/JavaScript/Reference/Operators/this
+tags:
+  - JavaScript
+  - Operator
+  - Primary Expressions
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/this
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Das <strong>this Schlüsselwort einer Funktion</strong> in JavaScript verhält sich verglichen mit anderen Sprachen ein bisschen anders. Es gibt zudem Unterschiede zwischen dem <a href="/de/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">strict Modus</a> und nicht strict Modus.</p>
+
+<p>In den meisten Fällen ist der Wert von <code>this</code> der Aufrufer der Funktion. Der Wert kann nicht während der Ausführung zugewiesen werden und kann sich jedes Mal, wenn die Funktion aufgerufen wird unterscheiden. ES5 führte die <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">bind</a></code> Methode ein, <a href="#Die_bind_Methode">um den Wert vom <code>this</code> einer Funktion zu setzen (egal, wie sie aufgerufen wird)</a>. ECMAScript 2015 hat die <a href="/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Pfeilfunktionen</a> implementiert, die kein eigenes <code>this</code> besitzt (<code>this</code> verweist auf das <code>this</code> des umschließenden Ausführungskontextes).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-this.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">this</pre>
+
+<h2 id="Globaler_Kontext">Globaler Kontext</h2>
+
+<p>Im globalen Ausführungskontext (außerhalb jeder Funktion), referenziert <code>this</code> auf das globale Objekt, egal ob im strict Modus oder nicht.</p>
+
+<pre class="brush:js">// Im Webbrowser ist das window Objekt das globale Objekt:
+console.log(this === window); // true
+
+a = 37;
+console.log(window.a); // 37
+
+this.b = "MDN";
+console.log(window.b);  // "MDN"
+console.log(b);         // "MDN"
+</pre>
+
+<h2 id="Funktionskontext">Funktionskontext</h2>
+
+<p>Innerhalb einer Funktion hängt der Wert von <code>this</code> davon ab, wie die Funktion aufgerufen wird.</p>
+
+<h3 id="Einfacher_Aufruf">Einfacher Aufruf</h3>
+
+<p>Weil der folgende Code nicht im <a href="/de/docs/Web/JavaScript/Reference/Strict_mode">strict Modus</a> ist und weil <code>this</code> nicht vom Aufruf gesetzt wird, referenziert <code>this</code> das globale Objekt, welches in einem Browser <code>window</code> ist.</p>
+
+<pre class="brush: js">function f1(){
+  return this;
+}
+
+// In einem Browser:
+f1() === window; // true
+
+// In Node:
+f1() === global; // true</pre>
+
+<p>Im strict Modus bleibt der Wert von <code>this</code> jedoch auf dem Wert, auf den er beim Eingeben des Ausführungskontextes festgelegt wurde. Im folgenden Fall wird dies standardmäßig auf <code>undefined</code> sein:</p>
+
+<pre class="brush:js">function f2(){
+  "use strict"; // see strict mode
+  return this;
+}
+
+f2() === undefined; // true
+</pre>
+
+<p>Wenn <code>this</code> im <strong>strict Modus</strong> nicht vom Ausführungskontext definiert wird, bleibt dieser <code>undefined</code>.</p>
+
+<div class="note">Im zweiten Beispiel sollte <code>this</code> <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></code> sein, weil <code>f2</code> direkt und nicht als eine Methode oder Eigenschaft eines Objektes (z. B. <code>window.f2()</code>) aufgerufen wird. Diese Funktionalität war noch nicht in allen Browsern implementiert, als der Support für den strict Modus gestartet wurde. Als Folge, gaben diese fälschlicherweise das <code>window</code> Objekt zurück.</div>
+
+<p>Um den Wert von <code>this</code> von einem in den anderen Kontext zu überführen, benutzt man <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call</a> oder <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Function/apply">apply</a><strong>:</strong></p>
+
+<pre class="brush: js">// Ein Objekt kann als erstes Argument beim Aufruf von call oder apply benutzt werden
+// welches an den Aufruf gebunden wird.
+var obj = {a: 'Custom'};
+
+// Dieses Objekt wird auf dem globalen Objekt definiert
+var a = 'Global';
+
+function whatsThis() {
+  return this.a; // Der Wert von this hängt davon ab, wie die Funktion aufgerufen wird.
+}
+
+whatsThis();          // 'Global'
+whatsThis.call(obj);  // 'Custom'
+whatsThis.apply(obj); // 'Custom'</pre>
+
+<p>Wenn eine Funktion das <code>this</code> Schlüsselwort im Körper verwendet, kann dessen Wert an ein Objekt gebunden werden, wenn die <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call</a></code> oder <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Function/apply">apply</a></code> Methode genutzt wird, die alle Funktion von <code>Function.prototype</code> erben.</p>
+
+<pre class="brush: js">function add(c, d) {
+  return this.a + this.b + c + d;
+}
+
+var o = {a: 1, b: 3};
+
+// Der erste Parameter ist das Objekt, welches als
+// 'this' genutzt wird. Alle weiteren Parameter werden als
+// Argumente für den Funktionsaufruf benutzt.
+add.call(o, 5, 7); //16
+
+// Der erste Parameter ist das Objekt, welches als
+// 'this' genutzt wird. Der zweite Parameter ist ein Array.
+// Dessen Elemente werden als Argumente für den Funktionsaufruf benutzt.
+add.apply(o, [10, 20]); // 34</pre>
+
+<p>Bei <code>call</code> und <code>apply</code> ist zu beachten, dass wenn der für <code>this</code> übergebene Wert kein Objekt ist, wird dieser mit der internen Operation <code>ToObject</code> zu einem Objekt konvertiert. Ist der übergebene Wert ein primitiver Typ wie <code>7</code> oder <code>'foo'</code>, wird dieser mit einem zugehörigen Konstruktor zu einem Objekt konvertiert, so dass die primitive Nummer <code>7</code> mit <code>new Number(7)</code> und <code>'foo'</code> mit <code>new String('foo')</code> zu ein Objekt konvertiert wird.</p>
+
+<pre class="brush: js">function bar() {
+  console.log(Object.prototype.toString.call(this));
+}
+
+bar.call(7);     // [object Number]
+bar.call('foo'); // [object String]</pre>
+
+<h3 id="Die_bind_Methode">Die <code>bind</code> Methode</h3>
+
+<p>ECMAScript 5 hat <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind</a></code> eingeführt. Der Aufruf von <code>f.bind(someObject)</code> erstellt eine neue Funktion mit dem selben Körper und Gültigkeitsbereich von <code>f</code>, aber <code>this</code> unterscheidet sich zur original Funktion. In der neuen Funktion ist <code>this</code> permanent mit dem Parameter von <code>bind</code> gebunden, egal wie die Funktion benutzt wird.</p>
+
+<pre class="brush:js">function f(){
+  return this.a;
+}
+
+var g = f.bind({a: 'azerty'});
+console.log(g()); // azerty
+
+var h = g.bind({a: 'yoo'}); // bind funktioniert nur einmal!
+console.log(h()); // azerty
+
+var o = {a: 37, f: f, g: g, h: h};
+console.log(o.f(), o.f(), o.g(), o.h()); // 37, 37, azerty, azerty</pre>
+
+<h3 id="Pfeilfunktionen">Pfeilfunktionen</h3>
+
+<p>In <a href="/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Pfeilfunktionen</a>, wird <code>this</code> auf das <code>this</code> des umschließenden lexikalischen Kontextes gesetzt. In globalem Code wird es auf das globale Objekt gesetzt.</p>
+
+<pre class="brush: js">var globalObject = this;
+var foo = (() =&gt; this);
+console.log(foo() === globalObject); // true</pre>
+
+<div class="note">
+<p>Hinweis: Wenn das this Argument von call, bind oder apply auf einer Pfeilfunktion benutzt werden, wird dieser ignoriert. Man kann dem Aufruf weitere Argumente hinzufügen, das erste Argument (thisArg) sollte aber null sein.</p>
+</div>
+
+<pre class="brush: js">// Aufruf als Methode eines Objektes
+var obj = {foo: foo};
+console.log(obj.foo() === globalObject); // true
+
+// Versuch this mit <code class="language-js">call</code> zu setzen
+console.log(foo.call(obj) === globalObject); // true
+
+// Versuch this mit bind zu setzen
+foo = foo.bind(obj);
+console.log(foo() === globalObject); // true</pre>
+
+<p>Es ist egal, auf welches <code>this</code> für <code>foo</code> beim erstellen gesetzt wurde (im Beispiel oben das globale Objekt). Das selbe gilt für Pfeilfunktionen, die in einer anderen Funktion erstellt werden: ihr <code>this</code> wird auf das <code>this</code> des äußeren Ausführungskontext gesetzt.</p>
+
+<pre class="brush: js">// Erstellt obj mit einer Methode bar, die eine Funktion zurück gibt,
+// die ihr this zurück gibt. Die zurückgegebene  Funktion wird als
+// Pfeilfunktion erstellt, so dass ihr this permanent an die umschließende
+// Funktion gebunden ist. Der Wert von bar kann im Aufruf festgelegt werden,
+// der wiederum den Wert der zurückgegebenen Funktion festlegt.
+var obj = { bar : function() {
+                    var x = (() =&gt; this);
+                    return x;
+                  }
+          };
+
+// Der Aufruf von bar als Methode von obj, setzt das this auf obj,
+// Weist eine Referenz der zurückgegebenen Funktion fn zu.
+var fn = obj.bar();
+
+// Aufruf von fn ohne this zu setzen, wird normalerweise zum
+// golbalen Objekt oder undefined im strict Modus führen.
+console.log(fn() === obj); // true
+
+// Aber achtung, wenn man die Methode von obj referenziert ohne sie aufzurufen
+var fn2 = obj.bar;
+// Wenn dann die Pfeilfunktion aufgerufen wird, ist this gleich dem globalen Objekt,
+// weil es dem this von bar folgt.
+console.log(fn2()() == window); // true
+</pre>
+
+<p>Im oberen Beispiel, gibt die Funktion (nennen wir sie anonyme Funktion A), die zu <code>obj.bar</code> zugewiesen ist, gibt eine andere Funktion (nennen wir sie anonyme Funktion B) zurück, die als Pfeilfunktion erstellt wurde. Als Ergebnis ist das <code>this</code> von B permanent das <code>this</code> von <code>obj.bar</code> (Funktion A) beim Aufruf. Wenn die zurückgegebene Funktion (Funktion B) aufgerufen wird, ist der <code>this</code> Wert immer der, der er initial war. Im obigen Beispielcode ist das <code>this</code> der Funktion B auf das <code>this</code> der Funktion A gesetzt, welches obj ist, so dass es auf <code>obj</code> gesetzt bleibt, während hingegen normalerweise <code>this</code> <code>undefined</code> oder das globale Objekt (oder jede andere Methode wie im vorherigen Beispiel im globalen Ausführungskontext) ist.</p>
+
+<h3 id="Alseine_Objektmethode">Alseine Objektmethode</h3>
+
+<p>Wenn eine Funktion als Methode eines Objektes aufgerufen wird, hat <code>this</code> eine Referenz auf das Objekt, auf dem die Methode aufgerugen wurde.</p>
+
+<p>Im folgenden Beispiel ist <code>this</code> innerhalb der Funktion auf <code>o</code> gebunden, wenn <code>o.f()</code> ausgeführt wird.</p>
+
+<pre class="brush:js">var o = {
+  prop: 37,
+  f: function() {
+    return this.prop;
+  }
+};
+
+console.log(o.f()); // 37
+</pre>
+
+<p>Zu beachten ist, dass dieses Verhalten nicht davon beeinflusst ist wie und wo die Funktion definiert ist. Im folgenden Beispiel definierten wir eine Inlinefunktion <code>f</code> als Eigenschaft von <code>o</code>. Man könnte auch einfach die Funktion zuerst definieren und diese dann <code>o.f</code> zuweisen. Dieses hat das selbe Ergebnis zur Folge:</p>
+
+<pre class="brush:js">var o = {prop: 37};
+
+function independent() {
+  return this.prop;
+}
+
+o.f = independent;
+
+console.log(o.f()); // logs 37
+</pre>
+
+<p>Das demonstriert, dass es nur wichtig ist, dass die Funktion als Eigenschaft <code>f</code> des Objektes <code>o</code> aufgerufen wurde.</p>
+
+<p>Genauso ist die <code>this</code> Bindung nur von der unmittelbaren Mitgliederreferent beeinflusst. Im folgenden Beispiel, wenn die Funktion aufgerufen wird, wird diese als Methode <code>g</code> des Objektes <code>o.b</code> aufgerufen. Während der Ausführung referenziert <code>this</code> in der Funktion <code>o.b</code>. Der Fakt, dass das Objekt selbst eine Eigenschaft von <code>o</code> ist, hat keine Konsequenz, nur die unmittelbare Referenz ist wichtig.</p>
+
+<pre class="brush:js">o.b = {g: independent, prop: 42};
+console.log(o.b.g()); // logs 42
+</pre>
+
+<h4 id="this_auf_der_Objektprototypenkette"><code>this</code> auf der Objektprototypenkette</h4>
+
+<p>Das selbe gilt für Methoden, die irgendwo auf der Objektprototypenkette definiert werden. Wenn die Methode auf einer Objektprototypenkette ist, referenziert <code>this</code> zu dem Objekte, auf dem die Methode aufgerufen wurde, so als währe die Methode auf dem Objekt.</p>
+
+<pre class="brush:js">var o = {f: function() { return this.a + this.b; }};
+var p = Object.create(o);
+p.a = 1;
+p.b = 4;
+
+console.log(p.f()); // 5
+</pre>
+
+<p>In diesem Beispiel hat das Objekt, welches der Variablen <code>p</code> zugewiesen wird, nicht ihre eigene <code>f</code> Eigenschaft, es erbt sie von seinem Prototyp. Aber es spielt keine Rolle, ob die Suche nach <code>f</code> eventuell eine Eigenschaft/Methode auf dem Objekt <code>o</code> findet; Die Suche begann als eine Referenz zu <code>p.f</code>, so hat <code>this</code> in der Funktion eine Referenz zu dem Objekt <code>p</code>. Weil <code>f</code> als Methode von <code>p</code> aufgerufen wurde, referenziert <code>this</code> <code>p</code>. Dieses ist eine interessante Funktion von JavaScripts's Prototypenvererbung.</p>
+
+<h4 id="this_mit_Gettern_oder_Settern"><code>this</code> mit Gettern oder Settern</h4>
+
+<p>Wieder das selbe gilt für für Funktionen, die als Getter oder Setter aufgerufen werden. Eine Funktion, die als Getter oder Setter benutzt wird, hat <code>this</code> zu dem Objekt gebunden, auf dem der Getter oder Setter aufgerufen wurde.</p>
+
+<pre class="brush:js">function sum(){
+  return this.a + this.b + this.c;
+}
+
+var o = {
+  a: 1,
+  b: 2,
+  c: 3,
+  get average(){
+    return (this.a + this.b + this.c) / 3;
+  }
+};
+
+Object.defineProperty(o, 'sum', {
+    get: sum, enumerable:true, configurable:true});
+
+console.log(o.average, o.sum); // logs 2, 6
+</pre>
+
+<h3 id="Als_ein_Konstruktor">Als ein Konstruktor</h3>
+
+<p>Wenn eine Funktion als Konstruktor verwendet wird (mit dem <code><a href="/de/docs/Web/JavaScript/Reference/Operators/new">new</a></code> Schlüsselwort), ist <code>this</code> an das neu erstellte Objekt gebunden.</p>
+
+<div class="note">
+<p>Weil der Standard für einen Konstruktor besagt, dass das Objekt, welches auf <code>this</code> referenziert, zurückgegeben wird, kann stattdessen ein anderes Objekt zurückgegeben werden (wenn der Rückgabewert kein Objekt ist, wird <code>this</code> zurückgegeben).</p>
+</div>
+
+<pre class="brush:js">/*
+ * Constructors work like this:
+ *
+ * function MyConstructor(){
+ *   // Actual function body code goes here.
+ *   // Create properties on |this| as
+ *   // desired by assigning to them.  E.g.,
+ *   this.fum = "nom";
+ *   // et cetera...
+ *
+ *   // If the function has a return statement that
+ *   // returns an object, that object will be the
+ *   // result of the |new| expression.  Otherwise,
+ *   // the result of the expression is the object
+ *   // currently bound to |this|
+ *   // (i.e., the common case most usually seen).
+ * }
+ */
+
+function C(){
+  this.a = 37;
+}
+
+var o = new C();
+console.log(o.a); // logs 37
+
+
+function C2(){
+  this.a = 37;
+  return {a:38};
+}
+
+o = new C2();
+console.log(o.a); // logs 38
+</pre>
+
+<p>Im letzen Beispiel (<code>C2</code>) wird das gebundene <code>this</code> Objekt verworfen, weil während des Erstellens ein anderes Objekt zurückgegeben wird. (Das macht das Statement <code>this.a = 37;</code> zu todem Code. Er ist nicht ganz tod, weil er ausgeführt wird, aber entfernt werden kann ohne einen Effekt zu haben.)</p>
+
+<h3 id="Als_ein_DOM_Eventhandler">Als ein DOM Eventhandler</h3>
+
+<p>Wenn eine Funktion als Eventhandler genutzt wird, wird sein <code>this</code> auf das Element, welches das Event feuert, gesetzt (manche Browser folgen dieser Konvention nicht für das dynamische hinzufügen von Methoden nicht über <code>addEventListener</code>).</p>
+
+<pre class="brush:js">// When called as a listener, turns the related element blue
+function bluify(e){
+  // Always true
+  console.log(this === e.currentTarget);
+  // true when currentTarget and target are the same object
+  console.log(this === e.target);
+  this.style.backgroundColor = '#A5D9F3';
+}
+
+// Get a list of every element in the document
+var elements = document.getElementsByTagName('*');
+
+// Add bluify as a click listener so when the
+// element is clicked on, it turns blue
+for(var i=0 ; i&lt;elements.length ; i++){
+  elements[i].addEventListener('click', bluify, false);
+}</pre>
+
+<h3 id="In_einem_Inlineeventhandler">In einem Inlineeventhandler</h3>
+
+<p>Wenn Code in einem inline <a href="/de/docs/Web/Guide/Events/Event_handlers">on-event Handler</a> aufgerufen wird, wird <code>this</code> auf das DOM Element gesetzt, auf dem der Listener aufgerufen wird:</p>
+
+<pre class="brush:js">&lt;button onclick="alert(this.tagName.toLowerCase());"&gt;
+  Show this
+&lt;/button&gt;
+</pre>
+
+<p>Der obere Alert zeigt <code>button</code>. Zu beachten ist, dass nur bei äußerem Code das <code>this</code> so gesetzt wird:</p>
+
+<pre class="brush:js">&lt;button onclick="alert((function(){return this}()));"&gt;
+  Show inner this
+&lt;/button&gt;
+</pre>
+
+<p>In diesem Fall ist das <code>this</code> der inneren Funktion nicht gesetzt, so dass das globale/window Objekt zurückgegeben wird (z. B. das Standardobjekt in nicht strict Modus, wo <code>this</code> nicht vom Aufruf gesetzt wird).</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-this-keyword', 'The this keyword')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-this-keyword', 'The this keyword')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.1.1', 'The this keyword')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-11.1.1', 'The this keyword')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.1.1', 'The this keyword')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Erste Definition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.operators.this")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">Strict Modus</a></li>
+ <li><a href="http://rainsoft.io/gentle-explanation-of-this-in-javascript/">Gentle explanation of 'this' keyword in JavaScript</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/operators/typeof/index.html b/files/de/web/javascript/reference/operators/typeof/index.html
new file mode 100644
index 0000000000..9ff39613d8
--- /dev/null
+++ b/files/de/web/javascript/reference/operators/typeof/index.html
@@ -0,0 +1,259 @@
+---
+title: typeof
+slug: Web/JavaScript/Reference/Operators/typeof
+tags:
+  - JavaScript
+  - Operator
+  - Unary
+translation_of: Web/JavaScript/Reference/Operators/typeof
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Der <strong><code>typeof</code></strong> Operator gibt einen String zurück, der den Typ des unausgewerteten Operanden beschreibt.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-typeof.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>Dem <code>typeof</code> Operator folgt sein Operand:</p>
+
+<pre class="syntaxbox notranslate"><code>typeof <em>O</em><code><em>perand</em></code></code></pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<p><code><em>Operand</em></code> ist ein Ausdruck, dessen Typ zurückgegeben werden soll. Dies kann ein Objekt oder ein {{Glossary("Primitiv", "primitive")}} sein.</p>
+
+<p>Klammern sind optional.</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die folgende Tabelle fasst die möglichen Rückgabewerte von <code>typeof</code> zusammen. Mehr Informationen zu Typen und primitiven Datentypen sind auf der Seite <a href="/de/docs/Web/JavaScript/Data_structures">JavaScript Datentypen und Datenstrukturen</a> zu finden.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Typ</th>
+   <th scope="col">Rückgabewert</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Undefined</td>
+   <td><code>"undefined"</code></td>
+  </tr>
+  <tr>
+   <td>Null</td>
+   <td><code>"object" </code>(see below)</td>
+  </tr>
+  <tr>
+   <td>Boole'scher Wert</td>
+   <td><code>"boolean"</code></td>
+  </tr>
+  <tr>
+   <td>Zahl</td>
+   <td><code>"number"</code></td>
+  </tr>
+  <tr>
+   <td>Zeichenkette</td>
+   <td><code>"string"</code></td>
+  </tr>
+  <tr>
+   <td>Symbol (neu in ECMAScript 2015)</td>
+   <td><code>"symbol"</code></td>
+  </tr>
+  <tr>
+   <td>Host-Objekt (von der JS-Umgebung bereitgestellt)</td>
+   <td><em>implementierungsabhängig</em></td>
+  </tr>
+  <tr>
+   <td>Funktionsobjekt (implementiert [[Call]] nach ECMA-262)</td>
+   <td><code>"function"</code></td>
+  </tr>
+  <tr>
+   <td>Alle anderen Objekte</td>
+   <td><code>"object"</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush:js notranslate">// Zahlen
+typeof 37 === 'number';
+typeof 3.14 === 'number';
+typeof(42) === 'number';
+typeof Math.LN2 === 'number';
+typeof Infinity === 'number';
+typeof NaN === 'number'; // obwohl es "Not-A-Number" ist
+typeof Number(1) === 'number'; // niemals so verwenden!
+
+
+// Zeichenketten
+typeof '' === 'string';
+typeof 'bla' === 'string';
+typeof `template literal` === 'string'
+typeof '1' === 'string' // Eine Zahl in einem String ist ein String
+typeof (typeof 1) === 'string'; // typeof gibt immer einen String zurück
+typeof String(1) === 'string'; // String konvertiert alles in einen String
+
+
+// Boole'sche Werte
+typeof true === 'boolean';
+typeof false === 'boolean';
+typeof Boolean(true) === 'boolean'; // niemals so verwenden!
+
+
+// Symbols
+typeof Symbol() === 'symbol'
+typeof Symbol('foo') === 'symbol'
+typeof Symbol.iterator === 'symbol'
+
+
+// Undefined
+typeof undefined === 'undefined';
+typeof declaredBugUndefinedVariable === 'undefined'
+typeof undeclaredVariable === 'undefined';
+
+
+// Objekte
+typeof {a:1} === 'object';
+
+// Array.isArray oder Object.prototype.toString.call verwenden,
+// um reguläre Objekte von Arrays zu unterscheiden
+typeof [1, 2, 4] === 'object';
+
+typeof new Date() === 'object';
+typeof /regex/ === 'object'; // Siehe im Artikel Reguläre Ausdrücke für Historisch bedingte Ergebnisse
+
+
+// Folgende Beispiele sind verwirrend, nicht verwenden!
+typeof new Boolean(true) === 'object';
+typeof new Number(1) === 'object';
+typeof new String("abc") === 'object';
+
+
+// Funktionen
+typeof function(){} === 'function';
+typeof class C {} === 'function';
+typeof Math.sin === 'function';
+</pre>
+
+<h3 id="null"><code>null</code></h3>
+
+<pre class="brush:js notranslate">// This stands since the beginning of JavaScript
+typeof null === 'object';
+</pre>
+
+<p>In der ersten JavaScript-Implementierung bestanden JavaScript-Werte aus einem Typenbezeichner und dem eigentlichen Wert. Der Typenbezeichner für Objekte war 0. <code>null</code> wurde durch den NULL-Zeiger dargestellt (auf den meisten Plattformen 0x00). Infolgedessen besaß <code>null</code> den Typenbezeichner 0, wodurch der seltsame Rückgabewert für <code>typeof</code> entstand. (<a href="http://www.2ality.com/2013/10/typeof-null.html">Quelle</a>)</p>
+
+<p>Es gab einen Korrekturvorschlag für ECMAScript, der aber <a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:typeof_null">abgelehnt wurde</a>. Dadurch wäre <code>typeof null === 'null'</code> gewesen.</p>
+
+<h3 id="Einsatz_des_new_Operators">Einsatz des <code>new</code> Operators</h3>
+
+<pre class="brush:js notranslate">// Alle Konstruktorfunktionen, welche mit dem 'new' Schlüsselwort benutzt werden,
+// haben als ergebnis ein Objekte mit typeof 'object'
+var str = new String('String');
+var num = new Number(100);
+
+typeof str; // It will return 'object'
+typeof num; // It will return 'object'
+
+// Es gibt die Ausnahme mit Objekten des Function-Konstruktors in Javascript
+
+var func = new Function();
+
+typeof func; // gibt 'function' zurück
+</pre>
+
+<h3 id="Notwendigkeit_von_Klammern_in_der_Syntax">Notwendigkeit von Klammern in der Syntax</h3>
+
+<pre class="brush:js notranslate">// Klammern sind sehr hilfreich beim ermitteln von Datentypen.
+var iData = 99;
+
+typeof iData + ' Wisen'; // It will return 'number Wisen'
+typeof (iData + ' Wisen'); // It will return 'string'
+</pre>
+
+<h3 id="Reguläre_Ausdrücke">Reguläre Ausdrücke</h3>
+
+<p>Aufrufbare reguläre Ausdrücke waren eine nicht standardkonforme Erweiterung in manchen Browsern.</p>
+
+<pre class="brush:js notranslate">typeof /s/ === 'function'; // Chrome 1-12, nicht ECMAScript 5.1-konform
+typeof /s/ === 'object';   // Firefox 5+, ECMAScript 5.1-konform
+</pre>
+
+<h3 id="Temporal_Dead_Zone_errors">Temporal Dead Zone errors</h3>
+
+<p>Vor ECMAScript 2015 war bei <code>typeof</code> immer garantiert, dass ein String in jeder Lage zurückgegeben wird. Mit dem Hinzufügen von nicht hochgezogenen, blockweisen <code><a href="/de/docs/Web/JavaScript/Reference/Statements/let">let</a></code> and <code><a href="/de/docs/Web/JavaScript/Reference/Statements/const">const</a></code> Variablen, kann es zu <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError">ReferenceError</a></code>s kommen, wenn die Variablen nicht nicht definiert sind. Das steht im Kontrast zu nicht definierten Variablen, welche mit <code>typeof</code> 'undefined' zurück geben. Blockvariablen haben eine <a href="/de/docs/Web/JavaScript/Reference/Statements/let#Zeitweilig_tote_Zonen_und_Fehler_mit_let">temporäre tote Zone</a> vom Start des Blockes bis zum Durchführen der Initialisierung. In dieser Zeit kann dieser Fehler auftreten.</p>
+
+<pre class="brush: js notranslate">typeof undeclaredVariable === 'undefined';
+typeof newLetVariable; let newLetVariable; // ReferenceError
+typeof newConstVariable; const newConstVariable = 'hello'; // ReferenceError
+</pre>
+
+<h3 id="Ausnahmen">Ausnahmen</h3>
+
+<p>Alle aktuellen Browser zeigen ein nicht standardisiertes hochgezogenes Objekt {{domxref("document.all")}} mit dem Typ Undefined.</p>
+
+<pre class="brush:js notranslate">typeof document.all === 'undefined';
+</pre>
+
+<p>Obwohl die Spezifikation benutzerdefinierte Typen-Tags für nicht standardmäßige exotische Objekte zulässt, müssen diese Typ-Tags sich von den vordefinierten unterscheiden. <code>document.all</code> hat das Typ-Tag <code>'undefined'</code> und wird alsAusnahmeverstoß der Regeln klassifiziert.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-typeof-operator', 'The typeof Operator')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-typeof-operator', 'The typeof Operator')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.4.3', 'The typeof Operator')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-11.4.3', 'The typeof Operator')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.4.3', 'The typeof Operator')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.1.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.operators.typeof")}}</p>
+
+<h2 id="IE-Spezifischer_Hinweis">IE-Spezifischer Hinweis</h2>
+
+<p>In IE 6, 7 und 8 sind viele Hostobjekte als Objekte statt Funktionen typisiert, zum Beispiel:</p>
+
+<pre class="brush: js notranslate">typeof alert === 'object'</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><code><a href="/de/docs/Web/JavaScript/Reference/Operators/instanceof" title="/en-US/docs/JavaScript/Reference/Operators/instanceof">instanceof</a></code></li>
+ <li><a href="http://es-discourse.com/t/why-typeof-is-no-longer-safe/15">Warum typeof nicht mehr "sicher" ist (englisch)</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/operators/vergleichsoperatoren/index.html b/files/de/web/javascript/reference/operators/vergleichsoperatoren/index.html
new file mode 100644
index 0000000000..2f4baae5a3
--- /dev/null
+++ b/files/de/web/javascript/reference/operators/vergleichsoperatoren/index.html
@@ -0,0 +1,243 @@
+---
+title: Vergleichsoperatoren
+slug: Web/JavaScript/Reference/Operators/Vergleichsoperatoren
+tags:
+  - JavaScript
+  - Operator
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>JavaScript kennt sowohl den strikten als auch den Typ konvertierenden Vergleich. Ein strikter Vergleich (z. B. <code>===</code>) gibt nur true zurück, wenn der gleiche Typ und der gleiche Wert vorhanden sind. Der häufiger verwendete abstrakte Vergleich (z. B. <code>==</code>) wandelt die Operanden in den gleichen Typen um, bevor sie verglichen werden. Bei relationalen Vergleichsoperatoren (z. B. <code>&lt;=</code>) werden die Operanden vor dem Vergleich zuerst in elementare Datentypen konvertiert und dann in gleiche Typen umgewandelt.</p>
+
+<p>Strings werden entsprechend der lexikographischen Ordnung, basierend auf den Unicode, verglichen.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-comparisonoperators.html")}}</div>
+
+
+
+<p>Merkmale von Vergleichen:</p>
+
+<ul>
+ <li>Zwei Strings sind strikt gleich, wenn sie die gleiche Abfolge von Zeichen, die gleiche Länge und die gleichen Zeichen in übereinstimmenden Positionen haben.</li>
+ <li>Zwei Zahlen sind strikt gleich, wenn sie numerisch gleich sind (den gleichen Zahlwert haben). <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="NaN">NaN</a> ist mit nichts gleich, auch nicht mit sich selbst. +0 und -0 sind strikt gleich zueinander.</li>
+ <li>Zwei Boolesche Operanden sind exakt gleich wenn beide <code>true</code> oder beide <code>false</code> sind.</li>
+ <li>Zwei unterschiedliche Objekte sind niemals gleich, weder in strikten noch nicht-strikten Vergleichen.</li>
+ <li>Ein Ausdruck, der Objekte vergleicht, gilt nur als <code>true</code>, wenn die Operanden auf das gleiche Objekt zeigen.</li>
+ <li>Die Typen <code>Null</code> und <code>undefined</code> sind immer strikt gleich zu sich selbst und abstrakt gleich zueinander.</li>
+</ul>
+
+<h2 id="Gleichheitsoperatoren">Gleichheitsoperatoren</h2>
+
+<h3 id="Gleichheit_()">Gleichheit (==)</h3>
+
+<p>Der Gleichheitsoperator konvertiert die Operanden, wenn sie <strong>nicht vom gleichen Typs</strong> sind und prüft dann auf strikte Gleichheit. Sind <strong>beide Operanden Objekte</strong>, vergleicht JavaScript die Referenzen; Referenzen gelten als gleich, wenn sie auf das gleiche Objekt im Speicher zeigen.</p>
+
+<h4 id="Syntax">Syntax</h4>
+
+<pre class="syntaxbox">x == y
+</pre>
+
+<h4 id="Beispiele">Beispiele</h4>
+
+<pre class="brush: js">1    ==  1     // true
+'1'  ==  1     // true
+1    == '1'    // true
+0    == false  // true
+0    == null   // false
+var object1 = {'key': 'value'}, object2 = {'key': 'value'}
+object1 == object2 // false
+0    == undefined  // false
+null == undefined  // true
+</pre>
+
+<h3 id="Ungleichheit_(!)">Ungleichheit (!=)</h3>
+
+<p>Der Ungleichheitsoperator gibt true zurück, wenn die Operanden nicht gleich sind. Wenn die beiden Operanden <strong>nicht vom gleichen Typ </strong>sind, versucht JavaScript die Operanden in einen, für den Vergleich passenden Typ, umzuwandeln. Wenn <strong>beide Operanden Objekte sind</strong>, vergleicht JavaScript die Referenzen; Referenzen sind ungleich, wenn sie auf verschiedene Objekte im Speicher verweisen.</p>
+
+<p>Syntax</p>
+
+<pre class="syntaxbox">x != y</pre>
+
+<h4 id="Beispiele_2">Beispiele</h4>
+
+<pre class="brush: js">1 !=   2     // true
+1 !=  "1"    // false
+1 !=  '1'    // false
+1 !=  true   // false
+0 !=  false  // false
+</pre>
+
+<h3 id="Identität_strikte_Gleichheit_()">Identität / strikte Gleichheit (===)</h3>
+
+<p>Der Identitätsoperator gibt true zurück, wenn die Operanden strikt gleich sind (siehe oben) <strong>ohne eine Typkonvertierung</strong></p>
+
+<h4 id="Syntax_2">Syntax</h4>
+
+<pre class="syntaxbox">x === y</pre>
+
+<h4 id="Beispiele_3">Beispiele</h4>
+
+<pre class="brush: js ">3 === 3   // true
+3 === '3' // false
+var object1 = {'key': 'value'}, object2 = {'key': 'value'}
+object1 === object2 // false
+</pre>
+
+<h3 id="Nicht_identisch_Strikte_Ungleichheit_(!)">Nicht identisch / Strikte Ungleichheit (!==)</h3>
+
+<p>Der strikte Ungleichheitsoperator gibt true zurück, wenn die Operanden<strong> nicht vom gleichen Typ sind bzw. ungleich sind</strong>.</p>
+
+<h4 id="Syntax_3">Syntax</h4>
+
+<pre class="syntaxbox">x !== y</pre>
+
+<h4 id="Beispiele_4">Beispiele</h4>
+
+<pre class="brush: js">3 !== '3' // true
+4 !== 3   // true
+</pre>
+
+<h2 id="Relationale_Operatoren">Relationale Operatoren</h2>
+
+<p>Jeder dieser Operatoren wird die <code>valueOf()</code> Funktion aufrufen, bevor ein Vergleich durchgeführt wird.</p>
+
+<h3 id="Größer-als-Operator_(>)">Größer-als-Operator (&gt;)</h3>
+
+<p>Der Größer-als-Operator gibt true zurück, wenn der linke Operand größer als der rechte Operand ist.</p>
+
+<h4 id="Syntax_4">Syntax</h4>
+
+<pre class="syntaxbox">x &gt; y</pre>
+
+<h4 id="Beispiele_5">Beispiele</h4>
+
+<pre class="brush: js">4 &gt; 3 // true
+</pre>
+
+<h3 id="Größer-oder-gleich-Operator_(>)">Größer-oder-gleich-Operator (&gt;=)</h3>
+
+<p>Der Größer-oder-gleich-Operator gibt true zurück, wenn der linke Operand größer als oder gleich dem rechten Operanden ist.</p>
+
+<h4 id="Syntax_5">Syntax</h4>
+
+<pre class="syntaxbox"> x &gt;= y</pre>
+
+<h4 id="Beispiele_6">Beispiele</h4>
+
+<pre class="brush: js">4 &gt;= 3 // true
+3 &gt;= 3 // true
+</pre>
+
+<h3 id="Kleiner-als-Operator_(&lt;)">Kleiner-als-Operator (&lt;)</h3>
+
+<p>Der Kleiner-als-Operator gibt true zurück, wenn der linke Operand kleiner als der rechte Operand ist.</p>
+
+<h4 id="Syntax_6">Syntax</h4>
+
+<pre class="syntaxbox"> x &lt; y</pre>
+
+<h4 id="Beispiele_7">Beispiele</h4>
+
+<pre class="brush: js">3 &lt; 4 // true
+</pre>
+
+<h3 id="Kleiner-oder-gleich-Operator_(&lt;)">Kleiner-oder-gleich-Operator (&lt;=)</h3>
+
+<p>Der Kleiner-oder-gleich-Operator gibt true zurück, wenn der linke Operand kleiner oder gleich dem rechten Operanden ist.</p>
+
+<h4 id="Syntax_7">Syntax</h4>
+
+<pre class="syntaxbox"> x &lt;= y</pre>
+
+<h4 id="Beispiele_8">Beispiele</h4>
+
+<pre class="brush: js">3 &lt;= 4 // true
+</pre>
+
+<h2 id="Die_Gleichheitsoperatoren_anwenden">Die Gleichheitsoperatoren anwenden</h2>
+
+<p>Die Standard-Gleichheitsoperatoren (<code>==</code> und <code>!=</code>) benutzen den <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3">Abstract Equality Comparison Algorithmus</a>, um zwei Operanden zu vergleichen. Sind die Operanden unterschiedlichen Typs, wird vor dem Vergleich zuerst versucht sie in gleiche Typen umzuwandeln; z.B. wird beim Ausdruck <code>5 == '5'</code>  das Zeichen auf der rechten Seite in eine Zahl konvertiert.</p>
+
+<p>Die strikten Gleichheitsoperatoren (<code>===</code> und <code>!==</code>) benutzen den <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.6">Strict Equality Comparison Algorithmus</a> und sind dafür gedacht, Operanden des gleichen Typs zu vergleichen. Wenn die Operanden von unterschiedlichen Typen sind, ist das Ergebnis immer <code>false</code>, wie <code>5 !== '5'</code>.</p>
+
+<p>Strikte Gleichheitsoperatoren sollten verwendet werden, wenn die Operanden sowohl einen bestimmten Typen als auch Wert haben sollen. Ansonsten benutzt man die abstrakten Gleichheitsoperatoren, die es einem erlauben Operanden unterschiedlicher Typen zu vergleichen.</p>
+
+<p>Wenn beim Vergleich eine Typkonvertierung vorgenommen wird (z.B. beim nicht-strikten Vergleich), konvertiert JavaScript in die Typen {{jsxref("String")}}, {{jsxref("Number")}}, {{jsxref("Boolean")}} und {{jsxref("Object")}} und führt den Vergleich dann aus:</p>
+
+<ul>
+ <li>Wenn eine Zahl und eine Zeichenkette verglichen werden, wird die Zeichenkette zu einem Zahlenwert umgewandelt. JavaScript versucht das numerische Zeichenliteral in einen Wert des Typs <code>Number</code> zu wandeln. Zuerst wird der mathematische Wert des numerischen Zeichenliterals ermittelt. Danach wird der Wert auf den nächsten Wert des Typs <code>Number</code> gerundet.</li>
+ <li>Wenn einer der Operanden ein Boolescher Typ ist, wird der Operand zur 1 konveriert wenn er <code>true</code> ist und zur +0 wenn <code>false</code>.</li>
+ <li>Wenn ein Objekt mit einer Zahl oder einer Zeichenkette verglichen wird,  versucht JavaScript den Defaultwert für das Objekt zurückzugeben. Operatoren versuchen das Objekt in einen elementaren Wert (<code>String</code> oder <code>Number)</code> umzuwandeln, indem sie die <code>valueOf</code> und <code>toString</code> Methoden der Objekte benutzen. Kann ein Objekt nicht umgewandelt werden, wird ein Laufzeitfehler erzeugt.</li>
+ <li>Ein Objekt wird nur dann in einen elementaren Datentypen umgewandelt, wenn sein Vergleichsoperand ein elementarer Datentyp ist. Sind beide Operanden Objekte, werden sie als Objekte verglichen und der Gleichheitstest liefert nur dann true, wenn beide auf das gleiche Objekt zeigen.</li>
+</ul>
+
+<div class="note"><strong>Hinweis:</strong> String Objekte sind vom Typ Objekte, nicht String! String Objekte werden selten eingesetzt, so dass das folgende Ergebnis überraschend sein kann:</div>
+
+<pre class="brush:js">// true, da beide Operanden vom Typ String sind (string primitives)
+'foo' === 'foo'
+
+var a = new String('foo');
+var b = new String('foo');
+
+// false, da a und b auf verschiedene Objekte zeigen
+a == b
+
+// false, da a und b auf verschiedene Objekte zeigen
+a === b
+
+// true, da a und 'foo' verschiedene Typen sind und das Objekt (a)
+// vor dem Vergleich zum String 'foo' umgewandelt wird
+a == 'foo' </pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial Definition. Implementiert in JavaScript 1.0</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Fügt <code>===</code> und <code>!==</code> Operatoren hinzu. Implementiert in JavaScript 1.3</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.8')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>In verschiedenen Kapiteln der Spezifikation definiert: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.8">Relational Operators</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9">Equality Operators</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-relational-operators')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>In verschiedenen Kapiteln der Spezifikation definiert: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-relational-operators">Relational Operators</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-equality-operators">Equality Operators</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-relational-operators')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>In verschiedenen Kapiteln der Spezifikation definiert: <a href="http://tc39.github.io/ecma262/#sec-relational-operators">Relational Operators</a>, <a href="http://tc39.github.io/ecma262/#sec-equality-operators">Equality Operators</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.operators.comparison")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Object.is()")}}</li>
+ <li>{{jsxref("Math.sign()")}}</li>
+ <li><a href="/de/docs/Web/JavaScript/Equality_comparisons_and_sameness">Equality comparisons and sameness</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/operators/void/index.html b/files/de/web/javascript/reference/operators/void/index.html
new file mode 100644
index 0000000000..4b61c153bd
--- /dev/null
+++ b/files/de/web/javascript/reference/operators/void/index.html
@@ -0,0 +1,108 @@
+---
+title: void Ausdruck
+slug: Web/JavaScript/Reference/Operators/void
+tags:
+  - JavaScript
+  - Operator
+  - Unary
+translation_of: Web/JavaScript/Reference/Operators/void
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Der <strong><code>void</code> Operator</strong> evaluiert einen gegebenen <code><em>Ausdruck</em></code> und gibt dann {{jsxref("Global_Objects/undefined", "undefined")}} zurück.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-voidoperator.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">void <em>Ausdruck</em></pre>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Der Operator erlaubt es, Ausdrücke mit Seiteneffekten an Stellen zu benutzen, an denen ein Ausdruck, der zu {{jsxref("Global_Objects/undefined", "undefined")}} ausgewertet wird, benötigt wird.</p>
+
+<p>Der <code>void</code> Ausdruck wird oft nur deswegen verwendet, um den primitiven Wert <code>undefined</code> zu erhalten. In diesen Fällen kann auch die globale Variable {{jsxref("Global_Objects/undefined", "undefined")}} benutzt werden (wenn der Wert für diese auf den default-Wert zeigt und nicht geändert wurde)</p>
+
+<h2 id="Immediately_Invoked_Function_Expressions">Immediately Invoked Function Expressions</h2>
+
+<p>Wenn man eine <a href="/de/docs/Glossary/IIFE">immediately-invoked function expression</a> verwendet, dann kann <code>void</code> benutzt werden, um das keyword <code>function</code> als Ausdruck und nicht als Deklaration auswerten zu lassen.</p>
+
+<pre class="brush: js">void function iife() {
+    var bar = function () {};
+    var baz = function () {};
+    var foo = function () {
+        bar();
+        baz();
+     };
+    var biz = function () {};
+
+    foo();
+    biz();
+}();
+</pre>
+
+<h2 id="JavaScript_URIs">JavaScript URIs</h2>
+
+<p>Wenn ein Browser einer <code>javascript:</code> URI folgt, wird zuerst der Code innerhalb der URI ausgewertet und dann der Inhalt der Seite mit dem Rückgabewert ersetzt. Das ist nicht der Fall, wenn der Rückgabewert {{jsxref("Global_Objects/undefined", "undefined")}} ist. Der <code>void</code> Ausdruck kann dazu benutzt werden in diesen Fällen {{jsxref("Global_Objects/undefined", "undefined")}} zurückzugeben. Zum Beispiel:</p>
+
+<pre class="brush: html">&lt;a href="javascript:void(0);"&gt;
+  Click here to do nothing
+&lt;/a&gt;
+
+&lt;a href="javascript:void(document.body.style.backgroundColor='green');"&gt;
+  Click here for green background
+&lt;/a&gt;
+</pre>
+
+<p>Anmerkung: Die Verwendung des <code>javascript:</code> pseudo Protokolls wird gegenüber anderen nicht invasiven Maßnahmen wie Event Handlern nicht empfohlen.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.4.2', 'The void Operator')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.1</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-11.4.2', 'The void Operator')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.4.2', 'The void Operator')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-void-operator', 'The void Operator')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-void-operator', 'The void Operator')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.operators.void")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/undefined", "undefined")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/operators/yield/index.html b/files/de/web/javascript/reference/operators/yield/index.html
new file mode 100644
index 0000000000..973ec506c4
--- /dev/null
+++ b/files/de/web/javascript/reference/operators/yield/index.html
@@ -0,0 +1,119 @@
+---
+title: yield
+slug: Web/JavaScript/Reference/Operators/yield
+tags:
+  - ECMAScript 2015
+  - Generators
+  - Iterator
+  - JavaScript
+  - Operator
+translation_of: Web/JavaScript/Reference/Operators/yield
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Das <code>yield</code> Schlüsselwort wird eingesetzt zum Anhalten und Fortsetzen einer Generatorfunktion ({{jsxref("Statements/function*", "function*")}} oder <a href="/de/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function">veralteten Generatorfunktion</a>) eingesetzt.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-yield.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">[<em>rv</em>] = <strong>yield</strong> [<em>expression</em>];</pre>
+
+<dl>
+ <dt><code>expression</code></dt>
+ <dd>Definiert den Wert, der von der Generatorfunktion über das <a href="/de/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterator_protocol">Iterator Protokoll</a> zurückgegeben wird. wird dieser weggelassen, wird <code>undefined</code> zurückgegeben.</dd>
+ <dt><code>rv</code></dt>
+ <dd>
+ <p>Gibt den optionalen Wert zurück, der der <code>next()</code> Methode des Generators übergeben wird, damit dieser weiter verarbeitet werden kann.</p>
+ </dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Das <code>yield</code> Schlüsselwort hält die Ausführung der Generatorfunktion an und gibt den Wert des Ausdrucks nach dem <code>yield</code> Schlüsselwort an den Aufrufer des Generators zurück. Es kann als die generatorbasierte Version des <code>return</code> Schlüsselwortes gesehen werden.</p>
+
+<p>Das <code>yield</code> Schlüsselwort gibt ein <code>IteratorResult</code> Objekt mit zwei Eigenschaften, <code>value</code> und <code>done</code>, zurück. Die <code>value</code> Eigenschaft ist das Ergebnis des ausgewerteten <code>yield</code> Ausdrucks und <code>done</code> ist <code>false</code>, was gedeutet, dass der Generator noch nicht fertig ist.</p>
+
+<p>Solange ein <code>yield</code> Ausdruck pausiert, wird die Codeausführung des Generators pausiert, bis die <code>next()</code> Methode des Generators aufgerufen wird. Mit jedem Aufruf der Generator <code>next()</code> Methode läuft der Generator weiter, bis einer der folgenden Punkte eintritt:</p>
+
+<ul>
+ <li> Ein <code>yield</code>, welches dazu führt, dass der Generator wieder Pausiert und einen neuen Generatorwert zurückgibt. Beim nächsten Aufruf von <code>next()</code> wird die Ausführung direkt nach dem <code>yield</code> fortgesetzt.</li>
+ <li>{{jsxref("Statements/throw", "throw")}} wird eingesetzt um einen Fehler im Generator zu erzeugen. Dieses stoppt den Generator vollständig und führt dazu, dass die Ausführung beim Aufrufer fortgesetzt wird, wie es bei üblicherweise bei Fehlern der Fall ist.</li>
+ <li>Das Ende einer Generatorfunktion wird erreicht; In diesem Fall endet die Ausführung des Generator und ein <code>IteratorResult</code> Objekt wird zum Aufrufer zurückgegeben, bei dem <code>value</code> {{jsxref("undefined")}} ist und <code>done</code> <code>true</code> ist.</li>
+ <li>Ein {{jsxref("Statements/return", "return")}} Statement wird erreicht. In diesem Fall endet die Ausführung des Generators und ein <code>IteratorResult</code> Objekt wird zum Aufrufer zurückgegeben, welches als <code>value</code> den vom <code>return</code> Statement spezifizierten Wert enthält und <code>done</code> <code>true</code> ist.</li>
+</ul>
+
+<p>Wenn ein optionaler Wert der <code>next()</code> Methode des Generators übergeben wird, wird der Wert es der aktuelle Rückgabewert der <code>yield</code> Operation sein.</p>
+
+<p>Durch den Generatorcodepfad, seinem <code>yield</code> Operator und der Möglichkeit einen neuen Startwert zu spezifizierten, indem dieser an {{jsxref("Generator.prototype.next()")}} übergeben wird, sind Generatoren sehr leistungsstark und kontrollierbar.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Der folgende Code ist die Deklaration einer Beispielgeneratorfunktion.</p>
+
+<pre class="brush: js">function* countAppleSales () {
+  var saleList = [3, 7, 5];
+  for (var i = 0; i &lt; saleList.length; i++) {
+    yield saleList[i];
+  }
+}</pre>
+
+<p>Wenn eine Generatorfunktion definiert ist, kann dieser benutzt werden, um einen Iterator, wie gezeigt, zu erstellen.</p>
+
+<pre class="brush: js">var appleStore = countAppleSales(); // Generator { }
+console.log(appleStore.next()); // { value: 3, done: false }
+console.log(appleStore.next()); // { value: 7, done: false }
+console.log(appleStore.next()); // { value: 5, done: false }
+console.log(appleStore.next()); // { value: undefined, done: true }</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES2015', '#', 'Yield')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#', 'Yield')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.operators.yield")}}</p>
+
+<h2 id="Firefox_spezifische_Hinweise">Firefox spezifische Hinweise</h2>
+
+<ul>
+ <li>Angefangen mit Gecko 29 {{geckoRelease(29)}}, erzeugt eine fertige Generatorfunktion keinen {{jsxref("TypeError")}} "generator has already finished" mehr. Stattdessen wird ein <code>IteratorResult</code> Objekt wie folgendes zurückgegeben: <code>{ value: undefined, done: true }</code> ({{bug(958951)}}).</li>
+ <li>Angefangen mit Gecko 33 {{geckoRelease(33)}}, wurde das einlesen des <code>yield</code> Ausdrucks aktualisert, um konform mit der ES2015 Spezifikation zu sein ({{bug(981599)}}):
+  <ul>
+   <li>Der Ausdruck nach dem <code>yield</code> Schlüsselwort ist optional und das Weglassen führt nicht mehr zu einem {{jsxref("SyntaxError")}}: <code>function* countAppleSales() { yield; }</code></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Guide/The_Iterator_protocol">Das Iterator Protokoll</a></li>
+ <li>{{jsxref("Statements/function*", "function*")}}</li>
+ <li>{{jsxref("Operators/function*", "function* expression")}}</li>
+ <li>{{jsxref("Operators/yield*", "yield*")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/operators/yield_star_/index.html b/files/de/web/javascript/reference/operators/yield_star_/index.html
new file mode 100644
index 0000000000..e0229f4c15
--- /dev/null
+++ b/files/de/web/javascript/reference/operators/yield_star_/index.html
@@ -0,0 +1,164 @@
+---
+title: yield*
+slug: Web/JavaScript/Reference/Operators/yield*
+tags:
+  - ECMAScript 2015
+  - Generators
+  - Iterable
+  - Iterator
+  - JavaScript
+  - Operator
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/yield*
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Der <strong><code>yield*</code> Ausdruck</strong> wird eingesetzt um an einen anderen {{jsxref("Statements/function*", "Generator")}} oder iterierbares Objekt zu delegieren.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-yieldasterisk.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"> yield* [[expression]];</pre>
+
+<dl>
+ <dt><code>expression</code></dt>
+ <dd>Der Ausdruck, der ein Iterierbares Objekt zurückgibt.</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Das <code>yield*</code> Ausdrucksliteral iteriert über den Operanden und gibt jeden zurückgegebenen Wert zurück.</p>
+
+<p>Der Wert von <code>yield*</code> Ausdrücken selbst ist der Wert der vom Iterator zurückgegeben wird, wenn der geschlossen wird (z. B., wenn <code>done</code> <code>true</code> ist).</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Zu_einem_anderen_Generator_delegieren">Zu einem anderen Generator delegieren</h3>
+
+<p>Im folgenden Code werden Werte von <code>g1()</code> und <code>g2()</code> beim Aufruf von <code>next() </code>zurückgegeben.</p>
+
+<pre class="brush: js">function* g1() {
+  yield 2;
+  yield 3;
+  yield 4;
+}
+
+function* g2() {
+  yield 1;
+  yield* g1();
+  yield 5;
+}
+
+var iterator = g2();
+
+console.log(iterator.next()); // {value: 1, done: false}
+console.log(iterator.next()); // {value: 2, done: false}
+console.log(iterator.next()); // {value: 3, done: false}
+console.log(iterator.next()); // {value: 4, done: false}
+console.log(iterator.next()); // {value: 5, done: false}
+console.log(iterator.next()); // {value: undefined, done: true}
+</pre>
+
+<h3 id="Andere_Iterable_Objekte">Andere Iterable Objekte</h3>
+
+<p>Neben Generatorobjekten kann <code>yield*</code> auch andere Iterable Objekte wie Arrays, Strings oder Arguments-Objekte zurückgeben.</p>
+
+<pre class="brush: js">function* g3() {
+  yield* [1, 2];
+  yield* '34';
+  yield* Array.from(arguments);
+}
+
+var iterator = g3(5, 6);
+
+console.log(iterator.next()); // {value: 1, done: false}
+console.log(iterator.next()); // {value: 2, done: false}
+console.log(iterator.next()); // {value: "3", done: false}
+console.log(iterator.next()); // {value: "4", done: false}
+console.log(iterator.next()); // {value: 5, done: false}
+console.log(iterator.next()); // {value: 6, done: false}
+console.log(iterator.next()); // {value: undefined, done: true}
+</pre>
+
+<h3 id="Der_Wert_des_yield*_Ausdrucks_selbst">Der Wert des <code>yield*</code> Ausdrucks selbst</h3>
+
+<p><code>yield*</code> ist ein Ausdruck, kein Statement, weshalb es zu einem Wert ausgewertet wird.</p>
+
+<pre class="brush: js">function* g4() {
+  yield* [1, 2, 3];
+  return 'foo';
+}
+
+var result;
+
+function* g5() {
+  result = yield* g4();
+}
+
+var iterator = g5();
+
+console.log(iterator.next()); // {value: 1, done: false}
+console.log(iterator.next()); // {value: 2, done: false}
+console.log(iterator.next()); // {value: 3, done: false}
+console.log(iterator.next()); // {value: undefined, done: true},
+                              // g4() returned {value: 'foo', done: true} at this point
+
+console.log(result);          // "foo"
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES2015', '#', 'Yield')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#', 'Yield')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.operators.yield_star")}}</p>
+
+<h2 id="Firefox_spezifische_Hinweise">Firefox spezifische Hinweise</h2>
+
+<ul>
+ <li>Beginnend mit Gecko 33 {{geckoRelease(33)}}, wurde das Einlesen des yield Ausdrucks aktualisiert, um der ES2015 Spezifikation gerecht zu werden ({{bug(981599)}}):
+  <ul>
+   <li>Die Zeilenumbruchrestriktion ist jetzt Implementiert. Es ist kein Zeilenumbruch zwischen "yield" and "*" erlaubt. Code wie der folgende erzeugt einen {{jsxref("SyntaxError")}}:
+    <pre class="brush: js">function* foo() {
+  yield
+  *[];
+}</pre>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Guide/The_Iterator_protocol">Das Iterator Protokoll</a></li>
+ <li>{{jsxref("Statements/function*", "function*")}}</li>
+ <li>{{jsxref("Operators/function*", "function* Ausdruck")}}</li>
+ <li>{{jsxref("Operators/yield", "yield")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/operators/zuweisungsoperator/index.html b/files/de/web/javascript/reference/operators/zuweisungsoperator/index.html
new file mode 100644
index 0000000000..f0ab62f255
--- /dev/null
+++ b/files/de/web/javascript/reference/operators/zuweisungsoperator/index.html
@@ -0,0 +1,412 @@
+---
+title: Zuweisungsoperator
+slug: Web/JavaScript/Reference/Operators/Zuweisungsoperator
+tags:
+  - JavaScript
+  - Operator
+translation_of: Web/JavaScript/Reference/Operators#Assignment_operators
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Ein <strong>Zuweisungsoperator</strong> weist dem linken Operanten einen Wert auf Basis des rechten Operanten zu.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-assignment.html")}}</div>
+
+
+
+<h2 id="Überblick">Überblick</h2>
+
+<p>Der Basiszuweisungsoperator ist das Gleich (<code>=</code>), welches den Wert des rechten Operanten dem linken Operanten zuweist. So wird bei <code>x = y</code> der Wert von <code>y</code> <code>x</code> zugewiesen. Die anderen Zuweisungsoperatoren sind Kurzformen für Standardoperationen, wie es in den folgenden Definition und Beispielen gezeigt wird.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Name</th>
+   <th>Kurzformoperator</th>
+   <th>Bedeutung</th>
+  </tr>
+  <tr>
+   <td><a href="#Assignment">Zuweisung</a></td>
+   <td><code>x = y</code></td>
+   <td><code>x = y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Addition_assignment">Additionszuweisung</a></td>
+   <td><code>x += y</code></td>
+   <td><code>x = x + y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Subtraction_assignment">Subtraktionszuweisung</a></td>
+   <td><code>x -= y</code></td>
+   <td><code>x = x - y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Multiplication_assignment">Multiplikationszuweisung</a></td>
+   <td><code>x *= y</code></td>
+   <td><code>x = x * y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Division_assignment">Divisionszuweisung</a></td>
+   <td><code>x /= y</code></td>
+   <td><code>x = x / y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Remainder_assignment">Restzuweisung</a></td>
+   <td><code>x %= y</code></td>
+   <td><code>x = x % y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Exponentiation_assignment">Potenzierungszuweisung</a></td>
+   <td><code>x **= y</code></td>
+   <td><code>x = x ** y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Left_shift_assignment">Links verschiebende Zuweisung</a></td>
+   <td><code>x &lt;&lt;= y</code></td>
+   <td><code>x = x &lt;&lt; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Right_shift_assignment">Rechts verschiebende Zuweisung</a></td>
+   <td><code>x &gt;&gt;= y</code></td>
+   <td><code>x = x &gt;&gt; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Unsigned_right_shift_assignment">Vorzeichenlose rechts verschiebende Zuweisung</a></td>
+   <td><code>x &gt;&gt;&gt;= y</code></td>
+   <td><code>x = x &gt;&gt;&gt; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Bitwise_AND_assignment">Bitweise AND Zuweisung</a></td>
+   <td><code>x &amp;= y</code></td>
+   <td><code>x = x &amp; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Bitwise_XOR_assignment">Bitweise XOR Zuweisung</a></td>
+   <td><code>x ^= y</code></td>
+   <td><code>x = x ^ y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Bitwise_OR_assignment">Bitweise OR Zuweisung</a></td>
+   <td><code>x |= y</code></td>
+   <td><code>x = x | y</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Zuweisung"><a name="Assignment">Zuweisung</a></h2>
+
+<p>Einfacher Zuweisungsoperator, welcher den Wert zu einer Variablen zuweist. Der Zuweisungsoperator gibt den zugewiesenen Wert zurück. Eine Verkettung der Zuweisungsoperatoren ist möglich, um einen Wert mehreren Variablen zuzuweisen. Sie in den Beispielen.</p>
+
+<h4 id="Syntax">Syntax</h4>
+
+<pre class="syntaxbox"><strong>Operator:</strong> x = y
+</pre>
+
+<h4 id="Beispiele">Beispiele</h4>
+
+<pre class="brush: js">// Folgende Variablen sind vorausgesetzt
+//  x = 5
+//  y = 10
+//  z = 25
+
+x = y     // x ist 10
+x = y = z // x, y und z sind alle 25
+</pre>
+
+<h3 id="Additionszuweisung"><a name="Addition_assignment">Additionszuweisung</a></h3>
+
+<p>Der Additionszuweisungsoperator <strong>addiert</strong> den Wert des rechten Operanten zu einer Variablen und weist das Ergebnis der Variablen zu. Die Typen der Operanten entscheiden über das Verhalten des Additionszuweisungsoperator. Addition oder Konkatination sind möglich. Siehe beim {{jsxref("Operators/Arithmetic_Operators", "Additionsoperator", "#Addition", 1)}} für mehr Details nach.</p>
+
+<h4 id="Syntax_2">Syntax</h4>
+
+<pre class="syntaxbox"><strong>Operator:</strong>  x += y
+<strong>Bedeutung:</strong> x  = x + y
+</pre>
+
+<h4 id="Beispiele_2">Beispiele</h4>
+
+<pre class="brush: js">// Die folgenden Variablen werden vorausgesetzt
+//  foo = 'foo'
+//  bar = 5
+//  baz = true
+
+
+// Number + Number -&gt; Addition
+bar += 2 // 7
+
+// Boolean + Number -&gt; Addition
+baz += 1 // 2
+
+// Boolean + Boolean -&gt; Addition
+baz += false // 1
+
+// Number + String -&gt; Konkationation
+bar += 'foo' // "5foo"
+
+// String + Boolean -&gt; Konkatination
+foo += false // "foofalse"
+
+// String + String -&gt; Konkationation
+foo += 'bar' // "foobar"
+</pre>
+
+<h3 id="Subtraktionszuweisung"><a name="Subtraction_assignment">Subtraktionszuweisung</a></h3>
+
+<p>Der Subtraktionszuweisungsoperator <strong>subtahiert</strong> den Wert des rechten Operanten von einer Variablen und weist das Ergebnis der Variablen zu. Siehe beim {{jsxref("Operators/Arithmetic_Operators", "Subraktionsoperator", "#Subtraction", 1)}} für mehr Details nach.</p>
+
+<h4 id="Syntax_3">Syntax</h4>
+
+<pre class="syntaxbox"><strong>Operator:</strong>  x -= y
+<strong>Bedeutung:</strong> x  = x - y
+</pre>
+
+<h4 id="Beispiele_3">Beispiele</h4>
+
+<pre class="brush: js">// Die folgenden Variablen werden vorausgesetzt
+//  bar = 5
+
+bar -= 2     // 3
+bar -= 'foo' // NaN
+</pre>
+
+<h3 id="Multiplikationszuweisung"><a name="Multiplication_assignment">Multiplikationszuweisung</a></h3>
+
+<p>Der Multiplikationszuweisungsoperator <strong>multipliziert</strong> den Wert des rechten Operanten zu einer Variablen und weist das Ergebnis der Variablen zu. Siehe beim {{jsxref("Operators/Arithmetic_Operators", "Multiplikationsoperator", "#Multiplication", 1)}} für mehr Details nach.</p>
+
+<h4 id="Syntax_4">Syntax</h4>
+
+<pre class="syntaxbox"><strong>Operator:</strong>  x *= y
+<strong>Bedeutung:</strong> x  = x * y
+</pre>
+
+<h4 id="Beispiele_4">Beispiele</h4>
+
+<pre class="brush: js">// Die folgenden Variablen werden vorausgesetzt
+//  bar = 5
+
+bar *= 2     // 10
+bar *= 'foo' // NaN
+</pre>
+
+<h3 id="Divisionszuweisung"><a name="Division_assignment">Divisionszuweisung</a></h3>
+
+<p>Der Divisionszuweisungsoperator <strong>dividiert</strong> eine Variable durch den rechten Operanten zu und weist das Ergebnis der Variablen zu. Siehe beim {{jsxref("Operators/Arithmetic_Operators", "Divisionsoperator", "#Division", 1)}} für mehr Details nach.</p>
+
+<h4 id="Syntax_5">Syntax</h4>
+
+<pre class="syntaxbox"><strong>Operator:</strong>  x /= y
+<strong>Bedeutung:</strong> x  = x / y
+</pre>
+
+<h4 id="Beispiele_5">Beispiele</h4>
+
+<pre class="brush: js">// Die folgenden Variablen werden vorausgesetzt
+//  bar = 5
+
+bar /= 2     // 2.5
+bar /= 'foo' // NaN
+bar /= 0     // Infinity
+</pre>
+
+<h3 id="Restzuweisung"><a name="Remainder_assignment">Restzuweisung</a></h3>
+
+<p>Der Restzuweisungsoperator <strong>dividiert</strong> einer Variable durch den rechten Operanten und weist den <strong>Rest</strong> des Ergebnis der Variablen zu. Siehe beim {{jsxref("Operators/Arithmetic_Operators", "Restoperator", "#Remainder", 1)}} für mehr Details nach.</p>
+
+<h4 id="Syntax_6">Syntax</h4>
+
+<pre class="syntaxbox"><strong>Operator:</strong>  x %= y
+<strong>Bedeutung:</strong> x  = x % y
+</pre>
+
+<h4 id="Beispiele_6">Beispiele</h4>
+
+<pre class="brush: js">// Die folgenden Variablen werden vorausgesetzt
+//  bar = 5
+
+bar %= 2     // 1
+bar %= 'foo' // NaN
+bar %= 0     // NaN
+</pre>
+
+<h3 id="Potenzierungszuweisung"><a id="Exponentiation_assignment" name="Exponentiation_assignment">Potenzierungszuweisung</a></h3>
+
+<p>Der Potenzierungszuweisungsoperator <strong>potenziert</strong> einer Variable mit den rechten Operanten und weist das Ergebnis der Variablen zu. Siehe beim {{jsxref("Operators/Arithmetic_Operators", "Exponentialoperator", "#Exponentiation", 1)}} für mehr Details nach.</p>
+
+<h4 id="Syntax_7">Syntax</h4>
+
+<pre class="syntaxbox"><strong>Operator:</strong>  x **= y
+<strong>Bedeutung:</strong> x  = x ** y
+</pre>
+
+<h4 id="Beispiele_7">Beispiele</h4>
+
+<pre class="brush: js">// Die folgenden Variablen werden vorausgesetzt
+//  bar = 5
+
+bar **= 2     // 25
+bar **= 'foo' // NaN</pre>
+
+<h3 id="Links_verschiebende_Zuweisung"><a name="Left_shift_assignment">Links verschiebende Zuweisung</a></h3>
+
+<p>Der links verschiebende Zuweisungsoperator verschiebt um die Anzahl Bits im rechten Operanten in der Variablen und weist das Ergebnis der Variablen zu. Siehe beim {{jsxref("Operators/Bitwise_Operators", "links verschiebenden Operator", "#Left_shift", 1)}} für mehr Details nach.</p>
+
+<h4 id="Syntax_8">Syntax</h4>
+
+<pre class="syntaxbox"><strong>Operator:</strong>  x &lt;&lt;= y
+<strong>Bedeutung:</strong> x   = x &lt;&lt; y
+</pre>
+
+<h4 id="Beispiele_8">Beispiele</h4>
+
+<pre class="brush: js">var bar = 5; //  (00000000000000000000000000000101)
+bar &lt;&lt;= 2; // 20 (00000000000000000000000000010100)
+</pre>
+
+<h3 id="Rechts_verschiebende_Zuweisung"><a name="Right_shift_assignment">Rechts verschiebende Zuweisung</a></h3>
+
+<p>Der rechts verschiebende Zuweisungsoperator verschiebt um die Anzahl Bits im rechten Operanten in der Variablen und weist das Ergebnis der Variablen zu. Siehe beim {{jsxref("Operators/Bitwise_Operators", "rechts verschiebenden Operator", "#Right_shift", 1)}} für mehr Details nach.</p>
+
+<h4 id="Syntax_9">Syntax</h4>
+
+<pre class="syntaxbox"><strong>Operator:</strong>  x &gt;&gt;= y
+<strong>Bedeutung:</strong> x   = x &gt;&gt; y
+</pre>
+
+<h4 id="Beispiele_9">Beispiele</h4>
+
+<pre class="brush: js">var bar = 5; //   (00000000000000000000000000000101)
+bar &gt;&gt;= 2;   // 1 (00000000000000000000000000000001)
+
+var bar -5; //    (-00000000000000000000000000000101)
+bar &gt;&gt;= 2;  // -2 (-00000000000000000000000000000010)
+</pre>
+
+<h3 id="Vorzeichenlose_rechts_verschiebende_Zuweisung"><a name="Unsigned_right_shift_assignment">Vorzeichenlose rechts verschiebende Zuweisung</a></h3>
+
+<p>Der vorzeichenlose rechts verschiebende Zuweisungsoperator verschiebt um die Anzahl Bits im rechten Operanten in der Variablen und weist das Ergebnis der Variablen zu. Siehe beim {{jsxref("Operators/Bitwise_Operators", "vorzeichenlose rechts verschiebenden Operator", "#Unsigned_right_shift", 1)}} für mehr Details nach.</p>
+
+<h4 id="Syntax_10">Syntax</h4>
+
+<pre class="syntaxbox"><strong>Operator:</strong>  x &gt;&gt;&gt;= y
+<strong>Bedeutung:</strong> x    = x &gt;&gt;&gt; y
+</pre>
+
+<h4 id="Beispiele_10">Beispiele</h4>
+
+<pre class="brush: js">var bar = 5; //   (00000000000000000000000000000101)
+bar &gt;&gt;&gt;= 2;  // 1 (00000000000000000000000000000001)
+
+var bar = -5; // (-00000000000000000000000000000101)
+bar &gt;&gt;&gt;= 2; // 1073741822 (00111111111111111111111111111110)</pre>
+
+<h3 id="Bitweise_UND_Zuweisung"><a name="Bitwise_AND_assignment">Bitweise UND Zuweisung</a></h3>
+
+<p>Der bitweise UND Zuweisungsoperator nutzt die Bitrepräsentation beider Operanten, führt eine bitweises UND Operation aus und weist das Ergebnis der Variablen zu.<strong> </strong>Siehe beim {{jsxref("Operators/Bitwise_Operators", "bitweisen UND Operator", "#Bitwise_AND", 1)}} für mehr Details nach.</p>
+
+<h4 id="Syntax_11">Syntax</h4>
+
+<pre class="syntaxbox"><strong>Operator:</strong>  x &amp;= y
+<strong>Bedeutung:</strong> x  = x &amp; y
+</pre>
+
+<h4 id="Beispiele_11">Beispiele</h4>
+
+<pre class="brush: js">var bar = 5;
+// 5:     00000000000000000000000000000101
+// 2:     00000000000000000000000000000010
+bar &amp;= 2; // 0
+</pre>
+
+<h3 id="Bitweise_XOR_Zuweisung"><a name="Bitwise_XOR_assignment">Bitweise XOR Zuweisung</a></h3>
+
+<p>Der bitweise XOR Zuweisungsoperator nutzt die Bitrepräsentation beider Operanten, führt eine bitweises XOR Operation aus und weist das Ergebnis der Variablen zu.<strong> </strong>Siehe beim {{jsxref("Operators/Bitwise_Operators", "bitweisen XOR Operator", "#Bitwise_XOR", 1)}} für mehr Details nach.</p>
+
+<h4 id="Syntax_12">Syntax</h4>
+
+<pre class="syntaxbox"><strong>Operator:</strong>  x ^= y
+<strong>Bedeutung:</strong> x  = x ^ y
+</pre>
+
+<h4 id="Beispiele_12">Beispiele</h4>
+
+<pre class="brush: js">var bar = 5;
+bar ^= 2; // 7
+// 5: 00000000000000000000000000000101
+// 2: 00000000000000000000000000000010
+// -----------------------------------
+// 7: 00000000000000000000000000000111
+</pre>
+
+<h3 id="Bitweise_ODER_Zuweisung"><a name="Bitwise_OR_assignment">Bitweise ODER Zuweisung</a></h3>
+
+<p>Der bitweise ODER Zuweisungsoperator nutzt die Bitrepräsentation beider Operanten, führt eine bitweises ODER Operation aus und weist das Ergebnis der Variablen zu.<strong> </strong>Siehe beim {{jsxref("Operators/Bitwise_Operators", "bitweisen ODER Operator", "#Bitwise_OR", 1)}} für mehr Details nach.</p>
+
+<h4 id="Syntax_13">Syntax</h4>
+
+<pre class="syntaxbox"><strong>Operator:</strong>  x |= y
+<strong>Bedeutung:</strong> x  = x | y
+</pre>
+
+<h4 id="Beispiele_13">Beispiele</h4>
+
+<pre class="brush: js">var bar = 5;
+bar |= 2; // 7
+// 5: 00000000000000000000000000000101
+// 2: 00000000000000000000000000000010
+// -----------------------------------
+// 7: 00000000000000000000000000000111
+</pre>
+
+<h2 id="Beispiele_14">Beispiele</h2>
+
+<h3 id="Linker_Operant_mit_anderem_Zuweisungsoperator">Linker Operant mit anderem Zuweisungsoperator</h3>
+
+<p>In ungewöhnlichen Situationen kann ein Zuweisungsoperator (z. B. <code>x += y</code>) nicht identisch mit der äquivalenten Zuweisung (hier <code>x = x + y</code>). Wenn der linke Operant einer Zuweisung selbst eine Zuweisung enthält, wird der linke Operant nur einem ausgewertet. Zum Beispiel:</p>
+
+<pre class="brush: js">a[i++] += 5         // i wird einmal ausgewertet
+a[i++] = a[i++] + 5 // i wird zweimal ausgewertet
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-assignment-operators', 'Assignment operators')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.13', 'Assignment operators')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.13', 'Assignment operators')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.operators.assignment")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators">Arithmetische Operatoren</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/statements/async_function/index.html b/files/de/web/javascript/reference/statements/async_function/index.html
new file mode 100644
index 0000000000..1179b3f924
--- /dev/null
+++ b/files/de/web/javascript/reference/statements/async_function/index.html
@@ -0,0 +1,223 @@
+---
+title: async function
+slug: Web/JavaScript/Reference/Statements/async_function
+tags:
+  - Example
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Statements/async_function
+---
+<div>
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><span class="seoSummary"> Die <code><strong>async function</strong></code> Deklaration definiert eine <strong>asynchrone Funktion</strong>, die ein {{jsxref("Global_Objects/AsyncFunction","AsyncFunction")}} Objekt zurück gibt.</span> Asynchrone Funktionen laufen über den <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop">Event Loop</a> außerhalb des üblichen Kontrollflusses, und geben als Ergebnis ein implizites {{jsxref("Promise")}} Objekt zurück. Die Syntax und der Aufbau des Codes bei einer asynchronen Funktion ähnelt allerdings der den standardmässigen synchronen Funktionen.</p>
+
+<div class="noinclude">
+<p>Eine <strong><code>async function</code></strong> kann auch durch den {{jsxref("Operators/async_function", "async function expression", "", 1)}} Ausdruck definiert werden.</p>
+</div>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-async.html", "taller")}}</div>
+
+<p class="hidden">The source for this interactive demo is stored in a GitHub repository. If you'd like to contribute to the interactive demo project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">async function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) {
+   <em>statements</em>
+}
+</pre>
+
+<h3 id="Die_Parameter">Die Parameter</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Der Name der Funktion.</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>Der Name eines Arguments, welches der Funktion übergeben wird.</dd>
+</dl>
+
+<dl>
+ <dt><code>statements</code></dt>
+ <dd>Die Ausdrücke, aus denen der Funktionskörper besteht.</dd>
+</dl>
+
+<h3 id="Der_zurückgegebene_Wert">Der zurückgegebene Wert</h3>
+
+<p>Ein <code><a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> Objekt. Das Promise wird entweder mit dem zurück gelieferten Wert der asnychronen Funktion eingehalten (Engl: "resolved"), oder mit einem unbehandelten Fehler innerhalb der asynchronen Funktion verworfen (Engl: "rejected").</p>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Eine <code>async</code> Funktion darf einen {{jsxref("Operators/await", "await")}} Ausdruck enthalten, der die Ausführung der asynchronen Funktion anhält. Die Funktion wartet auf die Entscheidung des übergebenen <code>Promise</code>, setzt dann die Ausführung der asynchronen Funktionen fort und wird als eingehaltener (Engl: "resolved") Wert ausgewertet.</p>
+
+<p><strong>Das Schlüsselwort <code>await</code> gilt nur innerhalb der <code>async</code> Funktionen.</strong> Die Verwendung außerhalb solcher Funktion wirft einen <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code> auf.</p>
+
+<div class="note">
+<p>Das Ziel der <code>async</code>/<code>await</code> Funktionen ist zweifach. Erstens vereinfachen sie die Anwendung von <code>Promises</code> im Rahmen eines synchronen Verfahrens. Zweitens ermöglichen sie die kollektive Verarbeitung einer Gruppe von <code>Promises</code>. Genau wie die <code>Promises</code> dem Verhalten von callbacks ("Rückruffunktionen") ähneln, so ähnelt die <code>async</code>/<code>await</code> Methode der Zusammensetzung von <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">Generatoren</a> und <code>Promises</code>.</p>
+</div>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einfaches_Beispiel">Einfaches Beispiel</h3>
+
+<pre class="brush: js">var resolveAfter2Seconds = function() {
+  //nach 2 Sek. einlösen
+  console.log("langsames Promise beginnt");
+  return new Promise(resolve =&gt; {
+    setTimeout(function() {
+      resolve(20); //"20" taucht als der zurückgegebene Wert der Fkn. auf
+      console.log("langsames Promise fertig");
+    }, 2000);
+  });
+};
+
+var resolveAfter1Second = function() {
+  //nach 1 Sek. einlösen
+  console.log("schnelles Promise beginnt");
+  return new Promise(resolve =&gt; {
+    setTimeout(function() {
+      resolve(10); //"10" taucht als der zurückgegebene Wert der Fkn. auf
+      console.log("schnelles Promise fertig");
+    }, 1000);
+  });
+};
+
+var sequentialStart = async function() {
+  console.log('==NACHEINANDER STARTEN==');
+  // Falls der dem await Operator folgende Ausdruck kein Promise ist,
+  // wird jener Ausdruck in ein eingehaltenes ("resolved") Promise umgewandelt
+
+  // 1. die Ausführung erfolgt fast sofort
+  const slow = await resolveAfter2Seconds();
+  console.log(slow); // 2. das hier startet 2 Sekunden nach 1.
+
+  const fast = await resolveAfter1Second();
+  console.log(fast); // 3. das hier startet 3 Sekunden nach 1.
+}
+
+var concurrentStart = async function() {
+  console.log('==ZEITGLEICH ANFANGEN mit await==');
+  const slow = resolveAfter2Seconds(); // startet den Timer sofort
+  const fast = resolveAfter1Second(); // startet den Timer sofort
+
+  // 1. die Ausführung erfolgt fast sofort
+  console.log(await slow); // 2. das hier startet 2 Sekunden nach 1.
+  console.log(await fast); // 3. das hier startet 2 Sekunden nach 1., also sofort nach 2., da "fast" bereits aufgelöst ist
+}
+
+var stillConcurrent = function() {
+  console.log('==ZEITGLEICH ANFANGEN mit Promise.all==');
+  Promise.all([resolveAfter2Seconds(), resolveAfter1Second()]).then((messages) =&gt; {
+    console.log(messages[0]); // "slow"
+    console.log(messages[1]); // "fast"
+  });
+}
+
+var parallel = function() {
+  console.log('==PARALLEL mit Promise.then==');
+  resolveAfter2Seconds().then((message)=&gt;console.log(message));
+  resolveAfter1Second().then((message)=&gt;console.log(message));
+}
+
+sequentialStart(); // loggt "slow" nach 2 Sek., dann "fast" nach einer weiteren Sek.
+
+// wartet, bis das obige Verfahren abschließt
+setTimeout(concurrentStart, 4000); // loggt nach 2 Sek. erst "slow", dann "fast"
+
+// wieder warten
+setTimeout(stillConcurrent, 7000); // genau wie concurrentStart
+
+// wieder warten
+setTimeout(parallel, 10000); // echt parallel: loggt "fast" nach 1 Sek., dann "slow" nach einer weiteren Sek.
+</pre>
+
+<h4 id="await_und_Parallelität"><code>await</code> und Parallelität</h4>
+
+<p>In der Funktion <code>sequentialStart</code> wird die Ausführung wegen dem ersten <code>await</code> für 2 Sekunden angehalten, und dann nochmal eine weitere Sekunde wegen dem zweiten <code>await</code>. Der zweite Timer wird erst erzeugt, sobald der erste durch ist, daher wird der Code nach 3 Sekunden durchgelaufen sein.</p>
+
+<p>In der Funktion <code>concurrentStart</code> werden beide Timer erzeugt und dann darauf gewartet (<code>await</code>). Die beiden Timer laufen zur selben Zeit, was bedeutet, dass der Code in 2 Sekunden statt 3 durchläuft, also wie der langsamste Timer. Trotzdem laufen die <code>await</code> Aufrufe immer noch nacheinander, was bedeutet, dass das zweite <code>await</code> auf das Ende des ersten Timers warten wird. In diesem Fall wird das Ergebnis des schnellsten Timers erst nach dem des langsamsten Timers verarbeitet.</p>
+
+<p>Wenn du wirklich zwei oder mehr Jobs gleichzeitig, also parallel, ausführen willst, musst du <code>await Promise.all([job1(), job2()])</code> wie in der <code>parallel</code> Funktion gezeigt verwenden.</p>
+
+<div class="warning">
+<h4 id="Merke_await_mit_Promisethen_nicht_verwechseln">Merke: <code>await</code> mit <code>Promise#then</code> nicht verwechseln</h4>
+
+<p>Bei <code>sequentialStart</code> wird die Programmausführung auf 2 Sek. aufgehalten wegen des ersten <code>await</code>, dann wieder auf 1 Sek. wegen des zweiten <code>await</code>. Die zweite Stoppuhr wird erst nach Ablauf der ersten Stoppuhr erstellt.</p>
+
+<p>Bei <code>concurrentStart</code> werden beide Stoppuhren gleichzeitig erstellt, dann in <code>await</code> versetzt. Obwohl beide Uhren nebeneinander laufen, laufen die <code>await</code> Abrufe serienweise. Das bedeutet, dass die zweite <code>await</code> Anweisung auf Ablauf der ersten wartet. Die Laufzeit dieses Abschnitts lautet daher 2--nicht 3--Sekunden, weil das langsamere Verfahren 2 Sek. braucht. Das Gleiche ereignet sich bei <code>stillConcurrent</code>, welcher Abschnitt die <code>Promise.all</code> Methode verwendet.</p>
+
+<p>Wenn man auf mehrfache <code>Promises</code> parallel warten (<code>await</code>) will, muss man <code>Promise#then</code> verwenden, gerade wie die <code>parallel</code> Funktion am Ende dieses Beispiels.</p>
+</div>
+
+<h3 id="Umschreiben_einer_Promise-Kette_mittels_einer_async_Funktion">Umschreiben einer Promise-Kette mittels einer <code>async</code> Funktion</h3>
+
+<p>Eine API die ein {{jsxref("Promise")}} zurückgibt resultiert in einer vielteiligen Promise-Kette. Man beachte den folgenden Code:</p>
+
+<pre class="brush: js">function getProcessedData(url) {
+  return downloadData(url) // returns a promise
+    .catch(e =&gt; {
+      return downloadFallbackData(url)  // returns a promise
+    })
+    .then(v =&gt; {
+      return processDataInWorker(v); // returns a promise
+    });
+}
+</pre>
+
+<p>das kann mit einer <code>async</code> Funktion folgendermaßen umgeschrieben werden:</p>
+
+<pre class="brush: js">async function getProcessedData(url) {
+  let v;
+  try {
+    v = await downloadData(url);
+  } catch(e) {
+    v = await downloadFallbackData(url);
+  }
+  return processDataInWorker(v);
+}
+</pre>
+
+<p>Im obigen Beispiel ist zu beachten, dass es keinen <code>await</code> Ausdruck auf dem <code>return</code> Ausdruck gibt, weil der Rückgabewert einer <code>async function</code> implizit im {{jsxref("Promise.resolve")}} eingeschlossen ist.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Initial definition in ES2017.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES8', '#sec-async-function-definitions', 'async function')}}</td>
+   <td>{{Spec2('ES8')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.statements.async_function")}}</p>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Operators/async_function", "async function expression")}}</li>
+ <li>{{jsxref("AsyncFunction")}} object</li>
+ <li>{{jsxref("Operators/await", "await")}}</li>
+ <li><a href="http://innolitics.com/10x/javascript-decorators-for-promise-returning-functions/">"Decorating Async Javascript Functions" on "innolitics.com"</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/statements/block/index.html b/files/de/web/javascript/reference/statements/block/index.html
new file mode 100644
index 0000000000..788082aeae
--- /dev/null
+++ b/files/de/web/javascript/reference/statements/block/index.html
@@ -0,0 +1,115 @@
+---
+title: block
+slug: Web/JavaScript/Reference/Statements/block
+tags:
+  - Anweisung
+  - JavaScript
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/block
+---
+<p>{{jsSidebar("Statements")}}</p>
+
+<p>Eine <strong>Blockanweisung</strong> (oder in anderen Sprachen <strong>Verbundanweisung</strong>) wird genutzt, um Anweisungen zu gruppieren. Ein Block wird durch ein Paar geschweifte Klammern abgegrenzt. Optional kann ihm ein {{jsxref("Statements/label", "Label")}} zugewiesen werden.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/statement-block.html", "taller")}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">[label:] {
+  anweisung_1;
+  anweisung_2;
+  ...
+  anweisung_n;
+}
+</pre>
+
+<dl>
+ <dt><code>anweisung1</code>, <code>anweisung2</code>, <code>anweisungN</code></dt>
+ <dd>Anweisungen, die zu einer Blockanweisung gruppiert werden.</dd>
+ <dt><code>label</code></dt>
+ <dd>Ein optionales {{jsxref("Statements/label", "Label")}}, entweder nur als Kennzeichnung oder als Referenz für die Verwendung in einer {{jsxref("Statements/break", "break")}}-Anweisung.</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Eine Blockanweisung wird meistens in Verbindung mit Komtrollfluss-Anweisungen (z. B. {{jsxref("Statements/if...else", "if…else")}}, {{jsxref("Statements/for", "for")}}, {{jsxref("Statements/while", "while")}}) genutzt. Zum Beispiel:</p>
+
+<pre class="brush: js">while (x &lt; 10) {
+  x++;
+}
+</pre>
+
+<p>Zu beachten ist, dass eine Blockanweisung nicht mit einem Semikolon endet.</p>
+
+<p>In anderen Sprachen wird eine Blockanweisung auch oftmals Verbundanweisung genannt. Dieser erlaubt den Einsatz mehrerer Anweisungen an Stellen, an denen JavaScript nur eine Anweisung erwartet. Das Kombinieren von Anweisungen in Blöcken ist in Javascript gängige Praxis. Mit einer {{jsxref("Statements/empty", "empty")}}-Anweisung ist auch der gegenteilige Fall umsetzbar (keine Anweisung an Stellen, an denen Anweisungen erwartet werden).</p>
+
+<h3 id="Variablen_in_Blockgültigkeitsbereichen">Variablen in Blockgültigkeitsbereichen</h3>
+
+<p><strong>Wichtig</strong>: Variablen, die mit {{jsxref("Statements/var", "var")}} deklariert werden, haben keinen Blockgültigkeitsbereich. Sie sind an den Gültigkeitsbereich der umschließenden Funktion oder des Skripts gebunden. Variablen sind folglich auch <span class="dpf_sent" id="dpfsent_4">außerhalb </span>des Blocks verfügbar, in dem sie deklariert wurden. Beispiel:</p>
+
+<pre class="brush: js example-bad">var x = 1;
+{
+  var x = 2;
+}
+console.log(x); // Ausgabe: 2
+</pre>
+
+<p>Die Ausgabe zeigt <em>2</em>, weil die Anweisungen <code>var x</code> <span class="dpf_sent" id="dpfsent_4">außerhalb </span>des Blocks und innerhalb des Blocks den gleichen Gültigkeitsbereich haben. In anderen Sprachen würde dieser Code <em>1</em> ausgeben.</p>
+
+<p>Um die Gültigkeit auf den Block zu begrenzen, muss {{jsxref("Statements/let", "let")}} eingesetzt werden:</p>
+
+<pre class="brush: js">let x = 1;
+{
+  let x = 2; // dieses x ist nur in diesem Block sichtbar
+}
+console.log(x); // Ausgabe: 1
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-block', 'Block statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-block', 'Block statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.1', 'Block statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-12.1', 'Block statement')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-12.1', 'Block statement')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Erste Definition. Implementiert in JavaScript 1.0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{Compat("javascript.statements.block")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Statements/while", "while")}}</li>
+ <li>{{jsxref("Statements/if", "if")}}</li>
+ <li>{{jsxref("Statements/let", "let")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/statements/break/index.html b/files/de/web/javascript/reference/statements/break/index.html
new file mode 100644
index 0000000000..350ba91400
--- /dev/null
+++ b/files/de/web/javascript/reference/statements/break/index.html
@@ -0,0 +1,164 @@
+---
+title: break
+slug: Web/JavaScript/Reference/Statements/break
+tags:
+  - JavaScript
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/break
+---
+<div>
+<div>{{jsSidebar("Statements")}}</div>
+</div>
+
+<p>Die <strong>break</strong> Anweisung beendet die aktuelle Schleife, {{jsxref("Statements/switch", "switch")}}-Anweisung oder Anweisungen die mit einem {{jsxref("Statements/label", "label")}} versehen sind und sorgt dafür, dass das Programm mit der Anweisung weiterläuft, die auf die beendete <span class="dpf_sent" id="dpfsent_1">Anweisung </span>folgt.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>break [Label];</code></pre>
+
+<dl>
+ <dt><code>Label</code></dt>
+ <dd>Optional. Ein Bezeichner, der mit einem {{jsxref("Statements/label", "Label")}} einer Anweisung in Verbindung gebracht werden kann. Es wird vorausgesetzt, dass die Anweisung, die <span class="dpf_sent" id="dpfsent_2">beendet </span>wird, eine Schleife oder ein {{jsxref("Statements/switch", "switch")}}-Statement ist.</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die <code>break</code> Anweisung <span class="dpf_sent" id="dpfsent_1">enthält </span>ein optionales {{jsxref("Statements/label", "Label")}}, mit dem es möglich ist, eine mit einem {{jsxref("Statements/label", "Label")}} versehene Anweisung zu beenden. Dabei muss sich die <code>break</code> Anweisung innerhalb der Anweisung, die mit einem {{jsxref("Statements/label", "Label")}} versehen ist, befinden. Die Anweisung, die mit einem Label versehen ist, kann jede {{jsxref("Statements/block", "Block")}}-Anweisung sein und muss nicht zwingend eine Schleife sein.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Die folgende Funktion nutzt eine <code>break</code> Anweisung die die {{jsxref("Statements/while", "while")}} Schleife beendet, wenn <code>i</code> gleich <code>3</code> ist. Danach gibt die Funktion <code>3 * x</code> zurück.</p>
+
+<pre class="brush:js;highlight:[6];">function testBreak(x) {
+   var i = 0;
+
+   while (i &lt; 6) {
+      if (i == 3) {
+         break;
+      }
+      i += 1;
+   }
+   return i * x;
+}</pre>
+
+<p>Der folgende Quelltext benutzt die <code>break</code> Anweisungen mit einem {{jsxref("Statements/label", "Label")}} auf einem {{jsxref("Statements/block", "Block")}}. Weil <code>inner_block</code> innerhalb vom {{jsxref("Statements/block", "Block")}} mit dem <code>outer_block</code> {{jsxref("Statements/label", "Label")}} ist, funktioniert <code>break</code> fehlerfrei.</p>
+
+<pre class="brush:js;highlight:[1,2,4];">outer_block:{
+  inner_block:{
+    console.log ('1');
+    break outer_block;      // breaks out of both inner_block and outer_block
+    console.log (':-(');    // skipped
+  }
+
+  console.log ('2');        // skipped
+}
+</pre>
+
+<p>Der folgende Quelltext benutzt eine <code>break</code> Anweisung, die nicht auf ein {{jsxref("Statements/label", "Label")}} verweist, in dem sich das <code>break</code> befindet. Dieses ist nicht möglich, <span class="dpf_sent" id="dpfsent_1">weshalb </span>ein {{jsxref("Global_Objects/SyntaxError", "SyntaxError")}} erzeugt wird.</p>
+
+<pre class="brush:js;highlight:[1,3,6];">block_1:{
+  console.log ('1');
+  break block_2;            // SyntaxError: Label nicht gefunden
+}
+
+block_2:{
+  console.log ('2');
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. nur die Version ohne Labels hinzugefügt.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Version mit Labels hinzugefügt.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.8', 'Break statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-break-statement', 'Break statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-break-statement', 'Break statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Statements/continue", "continue")}}</li>
+ <li>{{jsxref("Statements/label", "Label")}}</li>
+ <li>{{jsxref("Statements/switch", "switch")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/statements/class/index.html b/files/de/web/javascript/reference/statements/class/index.html
new file mode 100644
index 0000000000..48fda4c9bb
--- /dev/null
+++ b/files/de/web/javascript/reference/statements/class/index.html
@@ -0,0 +1,192 @@
+---
+title: Klasse
+slug: Web/JavaScript/Reference/Statements/class
+tags:
+  - Deklaration
+  - ECMAScript 2015
+  - JavaScript
+  - Klasse
+  - Klassen
+  - Ref
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/class
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<div>Die <strong>Klassendeklaration </strong>erstellt eine neue Klasse mit einem Namen unter Verwendung von prototypen Vererbung.</div>
+
+<div> </div>
+
+<div class="noinclude">
+<p>Sie können eine Klasse auch mit Hilfe einer {{jsxref("Operators/class", "class expression", "", 1)}} definieren. Unglücklicherweise ist es mit diesen class-Ausdrücken nicht möglich eine existierende Klasse erneut zu deklarieren. Dieses führt zu einem TypeError.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">class <em>name</em> [extends] {
+  // class body
+}
+</pre>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Genau wie mit class expressions, wird der body der Klassendeklaration im <a href="/de/docs/Web/JavaScript/Reference/Strict_mode"><u><font color="#0066cc">strict mode</font></u></a> ausgeführt. Die constructor Eigenschaft ist optional.</p>
+
+<p>Klassendeklarationen sind nicht {{Glossary("Hoisting", "hoisted")}} (im Gegensatz zu <a href="/de/docs/Web/JavaScript/Reference/Statements/function">function declarations</a>).</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Eine_einfache_Klassendeklaration">Eine einfache Klassendeklaration</h3>
+
+<p>Im folgenden Beispiel definieren wir zuerst eine Klasse mit dem Namen Polygon. Diese wird danach erweitert, um eine Klasse mit dem Namen Square zu erstellen. Beachten Sie, dass die Anweisung<code> super() </code>nur im Konstruktor verwendet werden kann und vor dem <code>this </code>Schlüsselwort verwendet werden kann.</p>
+
+<pre class="brush: js">class Polygon {
+  constructor(height, width) {
+    this.name = 'Polygon';
+    this.height = height;
+    this.width = width;
+  }
+}
+
+class Square extends Polygon {
+  constructor(length) {
+    super(length, length);
+    this.name = 'Square';
+  }
+}</pre>
+
+<div class="warning">
+<h3 id="Versuch_eine_Klasse_zweimal_zu_deklarieren">Versuch eine Klasse zweimal zu deklarieren</h3>
+
+<p>Neudeklarieren einer Klasse unter Einsatz von Klassendeklarationen führt zu einem TypeError.</p>
+
+<pre class="brush: js">class Foo {};
+class Foo {}; // Uncaught TypeError: Identifier 'Foo' has already been declared
+</pre>
+
+<p>Der gleiche Fehler tritt auch auf, wenn eine Klasse zuvor mit einem class-Ausdruck definiert wurde.</p>
+
+<pre class="brush: js">var Foo = class {};
+class Foo {}; // Uncaught TypeError: Identifier 'Foo' has already been declared
+</pre>
+</div>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Erste Definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatGeckoDesktop(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Array subclassing</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Allowed in sloppy mode</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatGeckoMobile(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+  <tr>
+   <td>Array subclassing</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+  <tr>
+   <td>Allowed in sloppy mode</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td>{{CompatChrome(49.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Statements/function"><code>function</code> declaration</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/statements/const/index.html b/files/de/web/javascript/reference/statements/const/index.html
new file mode 100644
index 0000000000..2bd5b39928
--- /dev/null
+++ b/files/de/web/javascript/reference/statements/const/index.html
@@ -0,0 +1,170 @@
+---
+title: const
+slug: Web/JavaScript/Reference/Statements/const
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/const
+---
+<div>
+<div>{{jsSidebar("Statements")}}</div>
+</div>
+
+<h2 id="Summary" name="Summary">Zusammenfassung</h2>
+
+<p>Die<strong> </strong><strong><code>const</code>-</strong>Deklaration erstellt eine Konstante. Wie bei der Deklaration einer Variablen mit {{jsxref("Statements/let", "let")}} ist der Gültigkeitsbereich auf den lokalen Block begrenzt. Der Wert einer Konstanten kann nicht verändert werden durch Zuweisung oder Neudeklaration.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/statement-const.html")}}</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">const <em>name1 = wert<em>1 [</em>, <em>name2</em> = <em>wert2</em><em> [</em>, ... [</em>, <em>nameN</em> = <em>wertN]]]</em>;</pre>
+
+<dl>
+ <dt><code>nameN</code></dt>
+ <dd>Name der Konstanten. Dieser kann jeder gültige {{Glossary("Identifier", "Bezeichner")}} sein.</dd>
+ <dt><code>wertN</code></dt>
+ <dd>Wert der Konstanten. Dieser kann jeder gültige {{Glossary("Expression", "Ausdruck")}} sein, einschließlich einer Funktion.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p>Die <code><strong>const</strong></code>-Deklaration erstellt eine Konstante, die entweder global sichtbar oder nur lokal in dem {{jsxref("Statements/Block", "Anweisungsblock")}}, in der sie deklariert wird, sichtbar ist.</p>
+
+<p>Die Konstante muss bei ihrer Definition mit einem Wert belegt werden. Eine spätere Zuweisung ist logischerweise nicht möglich, denn Sinn einer Konstanten ist, dass nach ihrer Definition keine Änderungen mehr vorgenommen werden können.</p>
+
+<p>Die <strong><code>const</code>-</strong>Deklaration erzeugt eine nicht veränderbare Referenz auf einen Wert. Dies bedeutet aber nicht, dass dieser Wert an sich unveränderlich ist, sondern nur, dass der Konstanten kein anderer Wert zugewiesen werden kann. Ist der Wert einer Konstanten zum Beispiel ein Objekt vom Typ {{jsxref("Global_Objects/Array", "Array")}}, können dessen Einträge durchaus verändert werden. Die Beispiele unten verdeutlichen dies.</p>
+
+<p>Eine Konstante kann nicht den gleichen Namen einer Funktion oder einer Variablen im gleichen Gültigkeitsbereich führen. Der Versuch, den Namen einer Konstanten nochmals zu verwenden, führt ebenso zu einem Fehler wie der Versuch, den Namen eines bestehenden Objektes für eine Konstante zu verwenden.</p>
+
+<p>Für const gelten die gleichen Regel hinsichtlich der <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/let#Zeitweilig_tote_Zonen_und_Fehler_mit_let">toten Zone</a> wie für {{jsxref("Statements/let", "let")}}. Auch Konstanten sind erst <em>nach</em> ihrer Deklaration verfügbar, nicht jedoch zwischen dem Beginn des Blocks und der Deklaration.<br>
+ Dies ist ein Unterschied zur Variablendeklaration mit {{jsxref("Statements/var", "var")}}. Mit var deklarierte Variablen sind in der gesamten Funktion verfügbar, in der sie deklariert wurden, selbst falls die Variablendeklaration die letzte Anweisung der Funktion war.</p>
+
+<h2 id="Beispiele" name="Beispiele">Beispiele</h2>
+
+<p>Die nachfolgenden Beispiele bauen aufeinander auf und sollten funktionell als ein Skript betrachtet werden. Sie sind lediglich in mehrere Absätze aufgeteilt, um die Teilaspekte der Konstantenbenutzung abzugrenzen.</p>
+
+<h3 id="Grundlagen">Grundlagen</h3>
+
+<p>Konstanten müssen bei Deklaration mit einem Wert belegt werden und sind danach nicht mehr änderbar.</p>
+
+<pre class="brush: js">// Definiert my_fav als eine Konstante und weist ihr den Wert 7 zu.
+const MY_FAV = 7;
+
+// Ein Versuch, der Konstanten einen anderen Wert zuzuweisen, ergibt
+// einen Fehler.
+MY_FAV = 20;
+
+// Schreibt 7 auf die Konsole.
+console.log("my favorite number is: " + MY_FAV);
+
+// Der Versuch, eine existierende Konstante neu zu definieren,
+// erzeugt einen Fehler
+const MY_FAV = 20;
+
+// Der Name my_fav ist für die obige Konstante reserviert, weshalb
+// dieses ebenfalls einen Fehler erzeugt.
+var MY_FAV = 20;
+// Auch dies ergibt einen Fehler.
+let MY_FAV = 20;
+
+// Konstanten benötigten einen Initialwert, weshalb hier ein SyntaxError
+// erzeugt wird.
+const FOO;
+
+// Konstanten sind erst nach ihrer Deklaration verfügbar,
+// anders als var-Variablen.
+console.log("konstante = " + KONST); // Fehler, KONST existiert noch nicht
+console.log("variable = " + VAR); // VAR hingegen schon
+const KONST = "23";
+var VAR = "32";
+console.log("konstante = " + KONST); // KONST existiert erst jetzt
+
+</pre>
+
+<h3 id="Der_Block_als_Gültigkeitsbereich">Der Block als Gültigkeitsbereich</h3>
+
+<p>Konstanten sind nur innerhalb des Blocks aus geschweiften Klammern sichtbar, in dem sie deklariert wurden.</p>
+
+<pre class="brush: js">// MY_FAV, in vorigem Beispiel erstellt, ist immer noch 7
+if (MY_FAV === 7) {
+    // Innerhalb dieses if-Blocks kann eine neue Konstante MY_FAV
+    // erzeugt werden, die nur für diesen Block gültig ist.
+    const MY_FAV = 20;
+
+    // MY_FAV ist nun 20
+    console.log("my favorite number is " + MY_FAV);
+
+    // var-Variablen werden hingegen immer in den übergeordneten
+    // Funktions- oder den globalen Kontext eingebettet, weshalb
+    // dies zu einer Kollision mit der globalen Konstante MY_FAV
+    // aus vorigem Beispiel führen wird:
+    var MY_FAV = 20;
+}
+// MY_FAV ist immer noch 7, denn wir haben den if-Block verlassen.
+console.log("my favorite number is " + MY_FAV);
+
+</pre>
+
+<h3 id="Die_Konstante_und_der_Wert_einer_Konstante">Die Konstante und der Wert einer Konstante</h3>
+
+<p>Obwohl Konstanten selbst nicht geändert werden können, kann sich der Wert des Objektes, auf das die Konstante verweist, ändern.</p>
+
+<pre class="brush: js">// Konstanten können auch komplexe Objekte sein.
+const MY_OBJECT = {"key": "value"};
+
+// Ein Versuch, der Konstanten ein anderes Objekt zuzuweisen, ergibt
+// einen Fehler.
+MY_OBJECT = {"OTHER_KEY": "value"};
+
+// Das Objekt selber hingegen ist nicht vor Veränderungen geschützt.
+// Die folgende Anweisung wird ohne Probleme ausgeführt.
+MY_OBJECT.key = "otherValue";
+
+// Das Gleiche gilt für Felder:
+const MY_ARRAY = [];
+// Es ist möglich, neue Einträge an das Feld anzufügen.
+MY_ARRAY.push("A"); // ["A"]
+// Jedoch führt der Versuch, der Konstanten ein anderes Feld
+// zuzuweisen, zu einem Fehler.
+MY_ARRAY = ["B"]</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table" style="height: 109px; width: 758px;">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col"></th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td></td>
+   <td>
+    <p>Erste Definition.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{Compat("javascript.statements.const")}}</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Statements/var", "var")}}</li>
+ <li>{{jsxref("Statements/let", "let")}}</li>
+ <li><a href="/de-DE/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Constants">Konstanten in der JavaScript-Einführung</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/statements/continue/index.html b/files/de/web/javascript/reference/statements/continue/index.html
new file mode 100644
index 0000000000..b6b00242de
--- /dev/null
+++ b/files/de/web/javascript/reference/statements/continue/index.html
@@ -0,0 +1,165 @@
+---
+title: continue
+slug: Web/JavaScript/Reference/Statements/continue
+tags:
+  - JavaScript
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/continue
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Die <strong>continue </strong>Anweisung beendet die Ausführung von Anweisungen im aktuellen Durchlauf der aktuellen oder benannten Schleife und setzt die Schleife mit der nächsten Iteration fort.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-continue.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">continue [<em>label</em>];</pre>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>Bezeichner mit dem Namen der verbundenen Anweisung.</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Im Gegensatz zur {{jsxref("Statements/break", "break")}} Anweisung, beendet <code>continue</code> die Ausführung der Schleife nicht komplett sondern:</p>
+
+<ul>
+ <li>In einer {{jsxref("Statements/while", "while")}} Schleife wird zur Bedingung gesprungen.</li>
+</ul>
+
+<ul>
+ <li>In einer {{jsxref("Statements/for", "for")}} Schleife wird zur Schlussanweisung gesprungen.</li>
+</ul>
+
+<p>Die <code>continue</code> Anweisung kann optional den Namen beinhalten und erlaubt dem Programm zum nächsten Durchlauf einer benannten Schleife zu springen anstatt der aktuellen. In diesem Fall muss die <code>continue</code> Anweisung innerhalb der benannten Anweisung liegen.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Verwendung_von_continue_mit_while">Verwendung von <code>continue</code> mit <code>while</code></h3>
+
+<p>Das folgende Beispiel zeigt eine {{jsxref("Statements/while", "while")}} Schleife mit einer <code>continue</code> Anweisung, die ausgeführt wird, wenn <code>i</code> den Wert 3 hat. Daher nimmt <code>n</code> die Werte 1, 3, 7, und 12 an.</p>
+
+<pre class="brush: js">var i = 0;
+var n = 0;
+
+while (i &lt; 5) {
+  i++;
+
+  if (i === 3) {
+    continue;
+  }
+
+  n += i;
+}
+</pre>
+
+<h3 id="Verwendung_von_continue_mit_einem_Bezeichner">Verwendung von <code>continue</code> mit einem Bezeichner</h3>
+
+<p>Im folgenden Beispiel enthält die <code>checkiandj</code> benannte Anweisung eine benannte Anweisung namens <code>checkj</code>. Wenn <code>continue</code> erreicht wird, wird das Programm am Beginn der <code>checkj</code> Anweisung fortgesetzt. Jedes mal wenn <code>continue</code> erreicht wird, beginnt <code>checkj</code> einen neuen Durchlauf, bis die Bedingung <em>false</em> zurückgibt. Wenn <em>false</em> zurückgegeben wird, wird der Rest der <code>checkiandj</code> Anweisung ausgeführt.</p>
+
+<p>Falls <code>continue</code> einen Bezeichner <code>checkiandj</code> hätte, dann würde das Programm am Beginn der <code>checkiandj</code> Anweisung fortgesetzt.</p>
+
+<p>Siehe auch {{jsxref("Statements/label", "label")}}.</p>
+
+<pre class="brush: js">var i = 0;
+var j = 8;
+
+checkiandj: while (i &lt; 4) {
+  console.log('i: ' + i);
+  i += 1;
+
+  checkj: while (j &gt; 4) {
+    console.log('j: '+ j);
+    j -= 1;
+
+    if ((j % 2) == 0)
+      continue checkj;
+    console.log(j + ' is odd.');
+  }
+  console.log('i = ' + i);
+  console.log('j = ' + j);
+}
+</pre>
+
+<p>Ausgabe:</p>
+
+<pre class="brush: js">i: 0
+
+// start checkj
+j: 8
+7 is odd.
+j: 7
+j: 6
+5 is odd.
+j: 5
+// end checkj
+
+i = 1
+j = 4
+
+i: 1
+i = 2
+j = 4
+
+i: 2
+i = 3
+j = 4
+
+i: 3
+i = 4
+j = 4
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition. Unbenannte Version.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Benannte Version hinzugefügt.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.7', 'Continue statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-continue-statement', 'Continue statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-continue-statement', 'Continue statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.statements.continue")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Statements/break", "break")}}</li>
+ <li>{{jsxref("Statements/label", "label")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/statements/debugger/index.html b/files/de/web/javascript/reference/statements/debugger/index.html
new file mode 100644
index 0000000000..0beef2ded9
--- /dev/null
+++ b/files/de/web/javascript/reference/statements/debugger/index.html
@@ -0,0 +1,52 @@
+---
+title: debugger
+slug: Web/JavaScript/Reference/Statements/debugger
+translation_of: Web/JavaScript/Reference/Statements/debugger
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Die Anweisung <strong>debugger</strong> ruft eine nicht näher bestimmte Debugging-Funktionalität des Interpreters auf. Naheliegend, jedoch nicht vorgeschrieben, ist das Pausieren des Programmablaufs und Öffnen des Debuggers an dieser Stelle.<br>
+ Stellt der Interpreter keine Debugging-Möglichkeiten zur Verfügung, hat die Anweisung keine Auswirkungen.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>debugger;</code></pre>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Dieses Beispiel zeigt eine Funktion, die mit der debugger-Anweisung beginnt.</p>
+
+<pre class="brush:js">function potentiallyBuggyCode() {
+    debugger;
+    // do potentially buggy stuff to examine, step through, etc.
+}</pre>
+
+<p>Bei Aufruf der Funktion wird das Skript pausiert und der Debugger öffnet sich, um den weiteren Ablauf gezielt kontrollieren zu können.</p>
+
+<p><a href="https://mdn.mozillademos.org/files/6963/Screen Shot 2014-02-07 at 9.14.35 AM.png"><img alt="Paused at a debugger statement." src="https://mdn.mozillademos.org/files/6963/Screen%20Shot%202014-02-07%20at%209.14.35%20AM.png" style="height: 371px; width: 700px;"></a></p>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-debugger-statement', 'debugger')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.statements.debugger")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Debugging_JavaScript">Debugging JavaScript</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger">The Debugger in the Firefox Developer Tools</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/statements/default/index.html b/files/de/web/javascript/reference/statements/default/index.html
new file mode 100644
index 0000000000..3d078df932
--- /dev/null
+++ b/files/de/web/javascript/reference/statements/default/index.html
@@ -0,0 +1,120 @@
+---
+title: default
+slug: Web/JavaScript/Reference/Statements/default
+tags:
+  - JavaScript
+  - Keyword
+translation_of: Web/JavaScript/Reference/Statements/switch
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Das <strong>default Schlüsselwort</strong> kann in JavaScript in zwei Situationen verwendet werden: Innerhalb eines {{jsxref("Statements/switch", "switch")}} Statements, oder mit einem {{jsxref("Statements/export", "export")}} Statement.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-default.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>Innerhalb eines {{jsxref("Statements/switch", "switch")}} Statements:</p>
+
+<pre class="syntaxbox">switch (expression) {
+  case value1:
+    // Das Statement wird ausgeführt, wenn das Ergebnis der expression mit value1 übereinstimmt
+    [break;]
+  default:
+    // Das Statement wird ausgeführt, wenn keiner Werte mit dem Wert der expression übereinstimmt
+    [break;]
+}</pre>
+
+<p>Mit dem {{jsxref("Statements/export", "export")}} Statement:</p>
+
+<pre class="syntaxbox">export default <em>nameN</em> </pre>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Für mehr Informationen, siehe die</p>
+
+<ul>
+ <li>{{jsxref("Statements/switch", "switch")}} Statement und</li>
+ <li>{{jsxref("Statements/export", "export")}} Statement Seiten</li>
+</ul>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Verwenden_von_default_in_switch_Statements">Verwenden von <code>default</code> in switch Statements</h3>
+
+<p>Wenn im folgenden Beispiel <code>expr</code> den Wert "Oranges" oder "Apples" hat, wird das Programm die jeweiligen Werte abgleichen und das dazugehörige Statement ausführen. Das <code>default</code> Schlüsselwort hilft, alle übrigen (nicht speziell behandelten) Fälle zu behandeln.</p>
+
+<pre class="brush: js">switch (expr) {
+  case 'Oranges':
+    console.log('Oranges are $0.59 a pound.');
+    break;
+  case 'Apples':
+    console.log('Apples are $0.32 a pound.');
+    break;
+  default:
+    console.log('Sorry, we are out of ' + expr + '.');
+}</pre>
+
+<h3 id="Verwenden_von_default_mit_export">Verwenden von <code>default</code> mit export</h3>
+
+<p>Wenn Sie einen einzelnen Wert oder einen "fallback" Wert für ein Modul brauchen, können Sie einen default export verwenden:</p>
+
+<pre class="brush: js">// module "my-module.js"
+let cube = function cube(x) {
+  return x * x * x;
+}
+export default cube;</pre>
+
+<p>Dann kann der default export in einem anderen Skript direkt importiert werden:</p>
+
+<pre class="brush: js">// module "my-module.js"
+import myFunction from 'my-module';
+console.log(cube(3)); // 27
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-switch-statement', 'switch statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-exports', 'Exports')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.statements.default")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Statements/export", "export")}}</li>
+ <li>{{jsxref("Statements/switch", "switch")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/statements/do...while/index.html b/files/de/web/javascript/reference/statements/do...while/index.html
new file mode 100644
index 0000000000..80dbf27192
--- /dev/null
+++ b/files/de/web/javascript/reference/statements/do...while/index.html
@@ -0,0 +1,132 @@
+---
+title: do...while
+slug: Web/JavaScript/Reference/Statements/do...while
+tags:
+  - JavaScript
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/do...while
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Das <strong><code>do...while</code> statement</strong> erstellt eine Schleife, die einen bestimmten Ausdruck ausführt, bis die zu überprüfende Aussage falsch wird. Die Aussage wird überprüft, nachdem der Ausdruck ausgeführt wurde, sodass der Ausdruck mindenstens einmal ausgeführt wird.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">do
+   <em>statement</em>
+while (<em>condition</em>);
+</pre>
+
+<dl>
+ <dt><code>statement</code></dt>
+ <dd>Ein Ausdruck, welcher mindestens einmal ausgeführt wird und jedes Mal, wenn die Aussage wahr ist, wieder ausgeführt wird. Um mehrere Ausdrücke in der Schleife auszuführen,  nutzen Sie eine {{jsxref("Statements/block", "block")}} - Aussage (<code>{ ... }</code>) um diese Aussagen zu gruppieren.</dd>
+</dl>
+
+<dl>
+ <dt><code>condition</code></dt>
+ <dd>Eine Aussage, die nach jedem Durchgang durch die Schleife überprüft wird. Falls <code>condition</code> wahr ist, wird das <code>statement</code> wieder ausgeführt. Wenn <code>condition</code> falsch wird, geht das Programm zu dem Ausdruck nach dem <code>do...while</code> über.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="do...while_benutzen"><code>do...while </code>benutzen</h3>
+
+<p> In dem folgendem Beispiel wird die <code>do...while</code> - Schleife mindestens einmal ausgeführt und wird wieder ausgeführt, bis <code>i</code> nicht länger weniger als 5 ist.</p>
+
+<pre class="brush: js">var i = 0;
+do {
+   i += 1;
+   console.log(i);
+} while (i &lt; 5);
+</pre>
+
+<h2 id="Spezialisierungen">Spezialisierungen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezialisierung</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.2</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.6.1', 'do-while statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-do-while-statement', 'do-while statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Trailing ; ist jetzt optional.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-do-while-statement', 'do-while statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basisunterstützung</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>6</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basisunterstützung</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Statements/while", "while")}}</li>
+ <li>{{jsxref("Statements/for", "for")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/statements/empty/index.html b/files/de/web/javascript/reference/statements/empty/index.html
new file mode 100644
index 0000000000..d31a88d0bb
--- /dev/null
+++ b/files/de/web/javascript/reference/statements/empty/index.html
@@ -0,0 +1,147 @@
+---
+title: empty
+slug: Web/JavaScript/Reference/Statements/Empty
+tags:
+  - Anweisung
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Statements/Empty
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Eine <strong>leere Anweisung</strong> dient der Angabe keiner Anweisung, obwohl die JavaScript Syntax eine erwarten würde.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">;
+</pre>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Die leere Anweisung ist ein Semikolon (;) und zeigt an, dass keine Anweisung ausgeführt wird, selbst wenn die JavaScript Syntax eine erfordert. Das gegenteilige Verhalten, bei dem man mehrere Anweisungen haben will, aber JavaScript nur eine einzelne erlaubt, ist die Verwendung einer <a href="/en-US/docs/Web/JavaScript/Reference/Statements/block">Blockanweisung</a>; sie kombiniert mehrere Anweisungen in einer einzelnen.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Die leere Anweisung wird manchmal in Schleifenanweisungen verwendet. Siehe dazu das folgende Beispiel mit einem leeren Schleifenkörper:</p>
+
+<pre class="brush: js">var arr = [1, 2, 3];
+
+// Alle Arraywerte auf 0 setzen
+for (i = 0; i &lt; arr.length; arr[i++] = 0) /* leere Anweisung */ ;
+
+console.log(arr)
+// [0, 0, 0]
+</pre>
+
+<p><strong>Hinweis:</strong> Es ist gute Praxis, die beabsichtigte Verwendung der leeren Anweisung durch einen Kommentar zu erklären, da der Unterschied zu einem normalen Semikolon nicht offensichtlich ist. In dem folgenden Beispiel ist die Verwendung möglicherweise nicht beabsichtigt:</p>
+
+<pre class="brush: js">if (condition);       // Achtung, der "if" Zweig tut nichts!
+   killTheUniverse()  // Daher wird dies hier immer ausgeführt!!!
+</pre>
+
+<p>Ein anderes Beispiel: Eine <a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else"><code>if...else</code></a> Anweisung ohne geschweifte Klammern (<code>{}</code>). Falls <code>three</code> <code>wahr</code> ist, geschieht nichts, <code>four</code> trifft nicht zu und auch die <code>launchRocket()</code> Funktion im <code>else</code> Zweig wird nicht ausgeführt.</p>
+
+<pre class="brush: js">if (one)
+  doOne();
+else if (two)
+  doTwo();
+else if (three)
+  ; // nothing here
+else if (four)
+  doFour();
+else
+  launchRocket();</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-empty-statement', 'Empty statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-empty-statement', 'Empty statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.3', 'Empty statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-12.3', 'Empty statement')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-12.3', 'Empty statement')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Statements/block", "Blockanweisung")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/statements/export/index.html b/files/de/web/javascript/reference/statements/export/index.html
new file mode 100644
index 0000000000..ffeec6b683
--- /dev/null
+++ b/files/de/web/javascript/reference/statements/export/index.html
@@ -0,0 +1,126 @@
+---
+title: export
+slug: Web/JavaScript/Reference/Statements/export
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Modules
+  - Statement
+  - export
+translation_of: Web/JavaScript/Reference/Statements/export
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Das <strong>export-Statement</strong> wird verwendet, um Funktionen und Objekte aus einer gegebenen Datei (oder <em>Modul</em>) zu exportieren.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> };
+export { <var>variable1</var> as <var>name1</var>, <var>variable2</var> as <var>name2</var>, …, <var>nameN</var> };
+export let <var>name1</var>, <var>name2</var>, …, <var>nameN</var>; // oder: var
+export let <var>name1</var> = …, <var>name2</var> = …, …, <var>nameN</var>; // oder: var, const
+
+export default <em>expression</em>;
+export default function (…) { … } // oder: class, function*
+export default function name1(…) { … } // oder: class, function*
+export { <var>name1</var> as default, … };
+
+export * from …;
+export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> } from …;
+export { <var>import1</var> as <var>name1</var>, <var>import2</var> as <var>name2</var>, …, <var>nameN</var> } from …;</pre>
+
+<dl>
+ <dt><code>nameN</code></dt>
+ <dd>Bezeichner der exportiert werden soll (damit er in einem anderen Script via <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a></code> importiert werden kann).</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Es gibt zwei verschiedene Arten von Exports, die jeweils der oben angegebene Syntax entsprechen:</p>
+
+<ul>
+ <li>Benannte Exports:
+  <pre class="brush: js">export { myFunction }; // exportiert eine Funktion, die zuvor deklariert wurde
+export const foo = Math.sqrt(2); // exportiert eine Konstante</pre>
+ </li>
+ <li>Default-Exports (nur einer je Script):
+  <pre class="brush: js">export default function() {} // oder 'export default class {}'
+// hier ist kein Semikolon</pre>
+ </li>
+</ul>
+
+<p>Benannte Exports sind nützlich um mehrere Werte zu exportieren. Beim Import kann man den selben Namen verwenden um auf den entsprechenden Wert zu verweisen.</p>
+
+<p>Bezüglich Default-Export: es kann nur einen einzigen Default-Export pro Modul geben. Ein Default-Export kann eine Funktion sein, eine Klasse, ein Objekt oder irgendetwas anderes. Da dieser Wert am einfachsten importiert werden kann wird er als der "Haupt-Export" des Moduls angesehen.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Benannte_Exports">Benannte Exports</h3>
+
+<p>Im Modul können wir den folgenden Code verwenden:</p>
+
+<pre class="brush: js">// Modul "my-module.js"
+function cube(x) {
+  return x * x * x;
+}
+const foo = Math.PI + Math.SQRT2;
+export { cube, foo };
+</pre>
+
+<p>Daraufhin könnten wir nun in einem anderen Script (cf. <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a></code>) wie folgt vorgehen:</p>
+
+<pre class="brush: js">import { cube, foo } from 'my-module';
+console.log(cube(3)); // 27
+console.log(foo);    // 4.555806215962888</pre>
+
+<h3 id="Standard-Export">Standard-Export</h3>
+
+<p>Wenn wir nur einen einzelnen Wert exportieren wollen, oder einen Fallback-Wert für unser Modul zur Verfügung haben möchten, können wir einen Default-Export verwenden:</p>
+
+<pre class="brush: js">// Modul "my-module.js"
+export default function cube(x) {
+  return x * x * x;
+}
+</pre>
+
+<p>In einem anderen Script kann dieser Default-Export dann unkompliziert importiert werden:</p>
+
+<pre class="brush: js">import myFunction from 'my-module';
+console.log(myFunction(3)); // 27
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-exports', 'Exports')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.statements.export")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Statements/import", "import")}}</li>
+ <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks Blog-Post von Jason Orendorff</li>
+ <li><a href="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's Buch: "Exploring JS: Modules"</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/statements/for...in/index.html b/files/de/web/javascript/reference/statements/for...in/index.html
new file mode 100644
index 0000000000..228f21927c
--- /dev/null
+++ b/files/de/web/javascript/reference/statements/for...in/index.html
@@ -0,0 +1,227 @@
+---
+title: for...in
+slug: Web/JavaScript/Reference/Statements/for...in
+tags:
+  - JavaScript
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/for...in
+---
+<div>
+<div>{{jsSidebar("Statements")}}</div>
+</div>
+
+<p>Die Schleife <code>for…in</code> durchläuft alle <a href="/de/docs/Web/JavaScript/Aufzählbarkeit_und_Zugehörigkeit_von_Eigenschaften">aufzählbaren Eigenschaften</a> eines Objekts (mit Ausnahme jener, deren Name ein <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol">Symbol</a> ist) in willkürlicher Reihenfolge und führt für jede ihren Anweisungsblock aus.</p>
+
+<p><strong style="">Syntax</strong></p>
+
+<pre class="syntaxbox">for (<var>variable</var> in <var>object</var>) {<em>...</em> }</pre>
+
+<dl>
+ <dt><code>variable</code></dt>
+ <dd>Bei jedem Schleifendurchlauf wird der Name der aktuellen Eigenschaft <em>variable</em> zugewiesen.</dd>
+ <dt><code>object</code></dt>
+ <dd>Das Objekt, dessen Eigenschaften durchlaufen werden sollen.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p>Die Schleife <code>for…in</code> durchläuft alle eigenen und geerbten Eigenschaften, die als aufzählbar gekennzeichnet sind und deren Name kein <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol">Symbol</a> ist, in einer nicht festgelegten Reihenfolge.</p>
+
+<h4 id="Aufzählbare_Eigenschaften">Aufzählbare Eigenschaften</h4>
+
+<p>Die Eigenschaften eines Javascript-Objekts können anhand ihres internen Statusfeldes <code>enumerable</code> als <a href="/de/docs/Web/JavaScript/Aufzählbarkeit_und_Zugehörigkeit_von_Eigenschaften">aufzählbar oder nicht aufzählbar</a> gekennzeichnet werden.</p>
+
+<p>Insbesondere erben manche eingebaute Objekte wie <code>Array</code> und <code>Object</code> nicht-aufzählbare Eigenschaften<span style="line-height: 1.5;"> von </span><code>Object.prototype</code> and <code>String.prototype</code><span style="line-height: 1.5;">, unter anderem die Methoden {{jsxref("String.indexOf")}} und {{jsxref("Object.toString")}}. </span></p>
+
+<p><span style="line-height: 1.5;">Nicht-aufzählbare Eigenschaften werden von </span> <code>for…in</code> ignoriert.</p>
+
+<h4 id="Reihenfolge">Reihenfolge</h4>
+
+<p>Obwohl die Reihenfolge bei Ausführung innerhalb desselben Interpreters als festgelegt erscheinen kann, darf von diesem Umstand nicht ausgegangen werden. Andere Versionen und insbesondere andere Javascript-Interpreter werden die Eigenschaften in einer anderen Reihenfolge durchlaufen.<br>
+ Die Gründe sind in der Beschreibung des Operators {{jsxref("Operators/delete", "delete")}} näher erklärt.</p>
+
+<h4 id="Gelöschte_hinzugefügte_oder_modifizierte_Eigenschaften">Gelöschte, hinzugefügte oder modifizierte Eigenschaften</h4>
+
+<p>Änderungen der Eigenschaften eines Objekts, während dieses Objekt von <code>for…in</code> durchlaufen wird, haben nachfolgende Auswirkungen:</p>
+
+<ul>
+ <li>Eine Änderung des Wertes einer Eigenschaft wirkt sich sofort auf alle nachfolgenden Schleifendurchläufe aus.</li>
+ <li>Eine Eigenschaft, die gelöscht wurde, bevor die Schleife sie eigentlich erreicht hätte, wird nicht mehr aufgerufen.</li>
+ <li>Eine Eigenschaft, die hinzugefügt wird, kann von der Schleife noch abgearbeitet werden, muss jedoch nicht. Das Verhalten ist nicht vorhersehbar.</li>
+</ul>
+
+<p>Im Allgemeinen ist es ratsam, innerhalb einer Schleife keine Änderungen an den Eigenschaften des durchlaufenden Objekts vorzunehmen. Eine Ausnahme bildet lediglich die derzeit bearbeitete Eigenschaft.<br>
+ Es gibt keine Garantie, dass eine hinzugefügte Eigenschaft von der Schleife noch aufgerufen wird, ob eine geänderte (außer der aktuellen) Eigenschaft vor oder nach der Änderung aufgerufen wird oder ob eine gelöschte Eigenschaft aufgerufen wird, bevor sie gelöscht wird.</p>
+
+<h3 id="Array_und_for…in">Array und for…in</h3>
+
+<div class="note">
+<p><strong>Hinweis:</strong> <strong><code>for…in</code> sollte nicht für den Durchlauf eines {{jsxref("Array", "Arrays")}} verwendet werden, bei dem die Indexreihenfolge wichtig ist.</strong></p>
+</div>
+
+<p>Anders als vielleicht von vielen anderen Programmiersprachen gewohnt sind bei Javascript die Indizes eines Feldes normale Objekt-Eigenschaften mit Ganzzahlen als Namen.</p>
+
+<p>Wie oben bereits erwähnt, ist nicht sichergestellt, dass <code>for…in</code> Eigenschaften eines Objektes in einer bestimmten Reihenfolge durchläuft. Dies gilt, da sie normale Eigenschaften sind, auch für die Feldindizes. Zudem durchläuft <code>for…in</code> auch alle anderen (aufzählbaren) Eigenschaften, einschließlich derer mit nicht ganzzahligen Namen sowie geerbte.</p>
+
+<p><code>for…in</code> ist daher nicht geeignet, um die Felder eines Objekts vom Typ Array von 0 bis Array.length der Reihenfolge nach zu durchlaufen.<br>
+ Zu diesem Zweck kann entweder auf eine {{jsxref("Statements/for", "for-Schleife")}} mit numerischem Zähler, die Array-eigene Methode {{jsxref("Array.prototype.forEach()", "forEach()")}} oder eine {{jsxref("Statements/for...of", "for...of-Schleife")}} verwendet werden.</p>
+
+<h3 id="Durchlauf_nur_über_eigene_Eigenschaften">Durchlauf nur über eigene Eigenschaften</h3>
+
+<p>Sollen nur Eigenschaften berücksichtigen möchten, die direkt mit dem Objekt verknüpft und nicht von dessen Prototypen geerbt sind, bietet sich {{jsxref("Object.getOwnPropertyNames", "getOwnPropertyNames()")}} an. Die Zugehörigkeit auf einer bestimmten Eigenschaft kann mit {{jsxref("Object.prototype.hasOwnProperty", "hasOwnProperty()")}} geprüft werden.<br>
+ Alternativ können eingebaute Prototypen mit einer Prüfmethode erweitert werden, sofern sichergestellt ist, dass es nicht zu einer Beeinflussung von externem Code kommt.</p>
+
+<h2 id="Example" name="Example">Beispiele</h2>
+
+<p>Die folgende Funktion erwartet ein Objekt als Argument. Es werden dann alle aufzählbaren Eigenschaften des Objekts durchlaufen und der Name der Eigenschaft mit dem entsprechenden Wert ausgegeben.</p>
+
+<pre class="brush: js">var obj = {a:1, b:2, c:3};
+
+for (var prop in obj) {
+  console.log("o." + prop + " = " + obj[prop]);
+}
+
+// Ausgabe:
+// "o.a = 1"
+// "o.b = 2"
+// "o.c = 3"</pre>
+
+<p>Die folgende Funktion verdeutlicht die Verwendung von {{jsxref("Object.hasOwnProperty", "hasOwnProperty()")}}: die geerbten Eigenschaften werden nicht angezeigt.</p>
+
+<pre class="brush: js">var triangle = {a:1, b:2, c:3};
+
+function ColoredTriangle() {
+  this.color = "red";
+}
+
+ColoredTriangle.prototype = triangle;
+
+var obj = new ColoredTriangle();
+
+for (var prop in obj) {
+  if( obj.hasOwnProperty( prop ) ) {
+    console.log("o." + prop + " = " + obj[prop]);
+  }
+}
+
+// Ausgabe:
+// "o.color = red"
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'for...in statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-for-in-and-for-of-statements', 'for...in statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.6.4', 'for...in statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-12.6.4', 'for...in statement')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-12.6.3', 'for...in statement')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>6</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Kompatibilität_Initialisierender_Ausdruck">Kompatibilität: Initialisierender Ausdruck</h3>
+
+<p>Vor SpiderMonkey 40 {{geckoRelease(40)}}, war es möglich einen initialisierenden Ausdruck (<code>i=0</code>) in einer <code>for…in</code>-Schleife zu benutzen:</p>
+
+<pre class="brush: js example-bad">var obj = {a:1, b:2, c:3};
+for(var i=0 in obj) {
+  console.log(obj[i]);
+}
+// 1
+// 2
+// 3
+</pre>
+
+<p>Dieses nicht standardisierte Verhalten wird ab der Version 40 ignoriert und führt im <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict-Modus</a> zu einem {{jsxref("SyntaxError")}}, "<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_for-in_initializer">for-in loop head declarations may not have initializers</a>" (siehe {{bug(748550)}} und {{bug(1164741)}}).</p>
+
+<p>Andere Umgebungen wie v8 (Chrome), Chakra (IE/Edge), und JSC (WebKit/Safari) prüfen ebenfalls die Möglichkeit, dieses Verhalten zu entfernen.</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Statements/for...of", "for...of")}} – eine ähnliche Anweisung, die Eigenschafts<em>werte</em> durchläuft</li>
+ <li>{{jsxref("Statements/for", "for")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">Generatorausdrücke</a> (verwenden die <code>for…in</code>-Syntax)</li>
+ <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties">Aufzählbarkeit und Besitz von Eigenschaften</a></li>
+ <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
+ <li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/statements/for...of/index.html b/files/de/web/javascript/reference/statements/for...of/index.html
new file mode 100644
index 0000000000..4010e660e3
--- /dev/null
+++ b/files/de/web/javascript/reference/statements/for...of/index.html
@@ -0,0 +1,183 @@
+---
+title: for...of
+slug: Web/JavaScript/Reference/Statements/for...of
+tags:
+  - ECMAScript 2015
+  - Experimental
+  - JavaScript
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/for...of
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Mit dem <strong><code>for...of</code> statement</strong> können sogenannte <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/iterable">iterable objects</a> durchlaufen werden ({{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, das <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments">arguments</a> Objekt und weitere eingeschlossen), wobei auf jeden gefundenen Wert eigene Statements ausgeführt werden können.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">for (<em>variable</em> of <em>iterable</em>) {
+  <em>statement
+</em>}
+</pre>
+
+<dl>
+ <dt><code>variable</code></dt>
+ <dd>Bei jedem Durchlauf wird <em>variable</em> der jeweils gefundene Wert zugewiesen.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">iterable</span></font></dt>
+ <dd>Objekt, dessen aufzählbare Eigenschaften durchlaufen werden.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Unterschied_zwischen_for...of_und_for...in">Unterschied zwischen <code>for...of</code> und <code>for...in</code></h3>
+
+<p>Das folgende Beispiel zeigt den Unterschied zwischen einer <code>for...of</code> und einer <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in" title="en-US/docs/JavaScript/Reference/Statements/for...in">for...in</a></code> Schleife. Während <code>for...in</code> über die Namen der Eigenschaften läuft, geht <code>for...of</code> über deren Werte:</p>
+
+<pre class="brush:js">let arr = [3, 5, 7];
+arr.foo = "hallo";
+
+for (let i in arr) {
+   console.log(i); // logs "0", "1", "2", "foo"
+}
+
+for (let i of arr) {
+   console.log(i); // logs "3", "5", "7"
+}
+</pre>
+
+<h3 id="Nutzen_von_Array.prototype.forEach">Nutzen von <code>Array.prototype.forEach()</code></h3>
+
+<p>Um dieselben Werte zu bekommen, die eine <code>for...of</code> Schleife zurückgeben würde, kann man auch die {{jsxref("Array.prototype.forEach()")}} Methode nutzen:</p>
+
+<pre class="brush: js">let arr = [3, 5, 7];
+arr.foo = "hallo";
+
+arr.forEach(function (element, index) {
+    console.log(element); // logs "3", "5", "7"
+    console.log(index);   // logs "0", "1", "2"
+});
+
+// or with Object.keys()
+
+Object.keys(arr).forEach(function (element, index) {
+    console.log(arr[element]); // logs "3", "5", "7", "hallo"
+    console.log(arr[index]);   // logs "3", "5", "7"
+});</pre>
+
+<h3 id="Durchlaufen_von_DOM_collections">Durchlaufen von DOM collections </h3>
+
+<p>DOM collections wie {{domxref("NodeList")}} durchlaufen: Das folgende Beispiel fügt eine <code>read</code> class zu allen Paragraphen hinzu, die direkte Nachfolger eines Artikels sind:</p>
+
+<pre class="brush:js">// Notiz: Das wird nur auf Plattformen funktionieren, die
+// NodeList.prototype[Symbol.iterator] implementiert haben
+let articleParagraphs = document.querySelectorAll("article &gt; p");
+
+for (let paragraph of articleParagraphs) {
+  paragraph.classList.add("read");
+}
+</pre>
+
+<h3 id="Durchlaufen_von_Generatoren">Durchlaufen von Generatoren</h3>
+
+<p>Man kann auch <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">Generatoren</a> durchlaufen:</p>
+
+<pre class="brush:js">function* fibonacci() { // ein Generator
+    let [prev, curr] = [0, 1];
+    for (;;) {
+        [prev, curr] = [curr, prev + curr];
+        yield curr;
+    }
+}
+
+for (let n of fibonacci()) {
+    // die Sequence bei 1000 abbrechen
+    if (n &gt; 1000)
+        break;
+    console.log(n);
+}
+</pre>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-for-in-and-for-of-statements', 'for...of statement')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(29)}}<a href="#chrome-note-1">[1]</a><br>
+    {{CompatChrome(38)}}</td>
+   <td>{{CompatGeckoDesktop("13")}}<br>
+    {{CompatGeckoDesktop("17")}} (.iterator)<br>
+    {{CompatGeckoDesktop("27")}} ("@@iterator")<br>
+    {{CompatGeckoDesktop("36")}} (Symbol.iterator)</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(29)}}<a href="#chrome-note-1">[1]</a><br>
+    {{CompatChrome(38)}}</td>
+   <td>{{CompatGeckoMobile("13")}}<br>
+    {{CompatGeckoMobile("17")}} (.iterator)<br>
+    {{CompatGeckoMobile("27")}} ("@@iterator")<br>
+    {{CompatGeckoMobile("36")}} (Symbol.iterator)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>iOS 8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p><a name="chrome-note-1"></a>[1] Dieses Feature ist als Option enthalten. In chrome://flags/#enable-javascript-harmony muss der Eintrag “Enable Experimental JavaScript” aktiviert werden.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for_each...in">for each...in</a> - ein ähnliches Statement, durchläuft aber die Werte der Objekt-Eigenschaften statt der Namen der Eigenschaften selbst (veraltet).</li>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/statements/for/index.html b/files/de/web/javascript/reference/statements/for/index.html
new file mode 100644
index 0000000000..d77a89b846
--- /dev/null
+++ b/files/de/web/javascript/reference/statements/for/index.html
@@ -0,0 +1,201 @@
+---
+title: for
+slug: Web/JavaScript/Reference/Statements/for
+tags:
+  - Anweisung
+  - JavaScript
+  - Loop
+  - for
+translation_of: Web/JavaScript/Reference/Statements/for
+---
+<div>{{jsSidebar("Anweisungen")}}</div>
+
+<p>Die <strong>for Anweisung</strong> beschreibt eine Schleife mit drei optionalen Ausdrücken und einer oder mehreren Anweisungen.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">for ([<em>initialization</em>]; [<em>condition</em>]; [<em>final-expression</em>])
+   <em>statement</em>
+</pre>
+
+<dl>
+ <dt><code>initialization</code></dt>
+ <dd>Ein Ausdruck (inklusive Zuweisungen) oder eine Variablendeklaration. Normalerweise wird ein Schleifenzähler initialisiert. Neu deklarierte Variablen haben denselben Geltungsbereich wie die <code>for</code> Schleife (d.h. sie sind nicht lokal auf die Schleife begrenzt). Die Initialisierung ist optional.</dd>
+ <dt><code>condition</code></dt>
+ <dd>Die Bedingung wird <strong>vor</strong> jedem Schleifendurchlauf ausgewertet. Ergibt die Auswertung <em><strong>true</strong></em>, dann wird die Answeisung (<code>statement</code>) ausgeführt. Die Bedingung ist optional. Bei fehlender Bedingung gilt immer <em><strong>true</strong></em>. Bei <strong><em>false</em></strong> wird die Schleife verlassen (und bei der nächsten Anweisung, die dem Schleifenende folgt, weitergemacht).</dd>
+ <dt><code>final-expression</code></dt>
+ <dd>Dieser Ausdruck wird <strong>nach </strong>jedem Schleifendurchlauf ausgewertet. Dies findet vor der nächsten Auswertung der Schleifenbedinung statt. Üblicherweise wird der Schleifenzähler inkrementiert oder dekrementiert.</dd>
+ <dt><code>statement</code></dt>
+ <dd>Der Ausdruck wird ausgeführt solange die Bedingung erfüllt ist (<em><strong>true</strong></em>). Man kann mehrere Anweisungen ausführen, indem man sie in einer <a href="/en-US/docs/JavaScript/Reference/Statements/block" title="JavaScript/Reference/Statements/block">block</a> Anweisung  (<code style="font-style: normal;">{ ... }</code>) zusammenfasst. Eine leere Anweisung (<a href="/en-US/docs/Web/JavaScript/Reference/Statements/Empty">empty</a> statement), markiert durch semikolon, kann auch ausgeführt werden.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Verwendung_der_for_Schleife">Verwendung der <code>for</code> Schleife</h3>
+
+<p>Die folgende for Anweisung initialisiert die Variable <code>i</code> mit null. Die Bedingung prüft ob <code>i</code> kleiner neun ist, führt den Code in der <a href="/en-US/docs/JavaScript/Reference/Statements/block" title="JavaScript/Reference/Statements/block">block</a> Anweisung aus und erhöht <code>i</code> um eins nach jedem Schleifendurchlauf.</p>
+
+<pre class="brush: js">for (var i = 0; i &lt; 9; i++) {
+   console.log(i);
+   // more statements
+}
+</pre>
+
+<h3 id="Optionale_for_Ausdrücke">Optionale <code>for</code> Ausdrücke</h3>
+
+<p>Alle drei <code>for</code> Ausdrücke sind optional.</p>
+
+<p>Z.B. kann der Initialisierungsblock leer sein:</p>
+
+<pre class="brush: js">var i = 0;
+for (; i &lt; 9; i++) {
+    console.log(i);
+    // more statements
+}
+</pre>
+
+<p>Die Schleifenbedinung ist auch optional. Man muss jedoch darauf achten, dass in der Schleife eine Austrittsbedingung (<a href="/de/docs/Web/JavaScript/Reference/Statements/break">break</a> Anweisung) vorkommt, um nicht in eine Endlosschleife zu geraten.</p>
+
+<pre class="brush: js">for (var i = 0;; i++) {
+   console.log(i);
+   if (i &gt; 3) break;
+   // more statements
+}</pre>
+
+<p>Das gleiche gilt selbstverständlich wenn man alle drei Blöcke leer lässt. Hier wird <code>i</code> in der Schleife inkrementiert, um sicherzustellen, dass nach endlich vielen Durchläufen die Schleife abgebrochen wird.</p>
+
+<pre class="brush: js">var i = 0;
+
+for (;;) {
+  if (i &gt; 3) break;
+  console.log(i);
+  i++;
+}
+</pre>
+
+<h3 id="Verwendung_von_for_Schleife_mit_leerer_Anweisung">Verwendung von <code>for</code> Schleife mit leerer Anweisung</h3>
+
+<p>Das folgende Beispiel zeigt eine leere Anweisung im Schleifenkörper. Die Berechnungen finden im Ausdruck <em>[final-expression] </em>statt. Die Schleife wird solange durchlaufen bis die Bedingung nicht mehr erfüllt ist.</p>
+
+<pre class="brush: js">function showOffsetPos (sId) {
+  var nLeft = 0, nTop = 0;
+
+  for (var oItNode = document.getElementById(sId); // initialization
+       oItNode; // condition
+       nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent) // final-expression
+       /* empty statement */ ;
+
+  console.log("Offset position of \"" + sId + "\" element:\n left: " + nLeft + "px;\n top: " + nTop + "px;");
+}
+
+// Example call:
+
+showOffsetPos("content");
+
+// Output:
+// "Offset position of "content" element:
+// left: 0px;
+// top: 153px;"</pre>
+
+<div class="note"><strong>Beachte:</strong> Die leere Anweisung folgt der Schleife und besteht lediglich aus einem Semikolon.</div>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Bemerkung</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-12.6.2', 'for statement')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Ursprüngliche Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-12.6.3', 'for statement')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.6.3', 'for statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-for-statement', 'for statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-for-statement', 'for statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Unterstützung</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Unterstützung</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Statements/break", "break")}}</li>
+ <li>{{jsxref("Statements/continue", "continue")}}</li>
+ <li>{{jsxref("Statements/empty", "empty")}}</li>
+ <li>{{jsxref("Statements/while", "while")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/do...while"><code>do...while</code></a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"><code>for...in</code></a></li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of"><code>for...of</code></a></code></li>
+</ul>
diff --git a/files/de/web/javascript/reference/statements/for_each...in/index.html b/files/de/web/javascript/reference/statements/for_each...in/index.html
new file mode 100644
index 0000000000..34a52f5397
--- /dev/null
+++ b/files/de/web/javascript/reference/statements/for_each...in/index.html
@@ -0,0 +1,122 @@
+---
+title: for each...in
+slug: Web/JavaScript/Reference/Statements/for_each...in
+tags:
+  - Deprecated
+  - JavaScript
+  - Statement
+translation_of: Archive/Web/JavaScript/for_each...in
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<div class="warning">
+<p>The <code>for each...in</code> statement is deprecated as the part of ECMA-357 (<a href="/de/docs/Archive/Web/E4X" title="/en-US/docs/E4X">E4X</a>) standard. E4X support has been removed, but for each...in will not be disabled and removed because of backward compatibility considerations. Consider using {{jsxref("Statements/for...of", "for...of")}} instead. (Please refer to {{bug("791343")}}.)</p>
+</div>
+
+<p>Die<code> <strong>for each...in</strong></code><strong> </strong>Schleife wiederholt die definierteVariable in jeder Instanz eines Objekts. Für jedes einzelne Vorkommen wird der bestimmte Befehl ausgeführt.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>for each (<em>variable</em> in <em>object</em>) {
+  <em>statement</em>
+}</code></pre>
+
+<dl>
+ <dt><code>variable</code></dt>
+ <dd>die Variable, die innerhalb des durchsuchten Projekts gesucht wird. Diese kann durch das Schlüsselwort var bestimmt werden. Die Variable wird Lokal innerhalb der Funktion definiert, nicht für die ganze Schleife.</dd>
+</dl>
+
+<dl>
+ <dt><code>object</code></dt>
+ <dd>das Objekt, innerhalb dessen die Werte gesucht werden.</dd>
+</dl>
+
+<dl>
+ <dt><code>statement</code></dt>
+ <dd>am Befehl, der bei jedem auftreten der gesuchten Eigenschaft ausgeführt wird. Um mehrere Befehle innerhalb der Schleife auszuführen, nutzen Sie für deren Gruppierung das {{jsxref("Statements/block", "Block")}} statement (<code>{ ... }</code>) .</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>einige Eigenschaften werden nicht in der Schleife durchsucht. Diese umfassen alle standardmäßigen Methoden von Objekten, beispielsweise die String-Methode indexOf. Es werden jedoch alle vom Nutzer definierten Werte durchsucht.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Nutzung_von_for_each...in">Nutzung von <code>for each...in</code></h3>
+
+<p>Warnung: Nutzen Sie eine derartige Schleife niemals in Arrays. Nutzen Sie diese nur für Objekte. Weitere Einzelheiten bei {{jsxref("Statements/for...in", "for...in")}}.</p>
+
+<p>der folgende Code Ausschnitt durchsucht die Eigenschaften eines Objektes und errechnet ihre Summe:</p>
+
+<pre class="brush:js">var sum = 0;
+var obj = {prop1: 5, prop2: 13, prop3: 8};
+
+for each (var item in obj) {
+  sum += item;
+}
+
+console.log(sum); // logs "26", which is 5+13+8</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Kein teil der ECMA-262 Spezifikation. Implementiert in JavaScript 1.6 und deprecated.</p>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.8")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Statements/for...in", "for...in")}} -  ein ähnlicher Befehl, der die Namen der Eigenschaften durchsucht.</li>
+ <li>{{jsxref("Statements/for...of", "for...of")}} - a similar statement that iterates over the property <em>values</em> but can only be used for iteratable types, so not for generic objects</li>
+ <li>{{jsxref("Statements/for", "for")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/statements/function_star_/index.html b/files/de/web/javascript/reference/statements/function_star_/index.html
new file mode 100644
index 0000000000..a8b2982dce
--- /dev/null
+++ b/files/de/web/javascript/reference/statements/function_star_/index.html
@@ -0,0 +1,200 @@
+---
+title: function*
+slug: Web/JavaScript/Reference/Statements/function*
+tags:
+  - ECMAScript 2015
+  - Function
+  - Iterator
+  - JavaScript
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/function*
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Die <code><strong>function*</strong></code>-Deklaration ( Schlüsselwort <code>function</code> gefolgt von einem Stern) definiert eine <em>Generatorfunktion</em>, welche ein  {{jsxref("Global_Objects/Generator","Generator")}}-Objekt zurückgibt.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-functionasterisk.html")}}</div>
+
+
+
+<div class="noinclude">
+<p>Eine Generatorfunktion kann auch mittels des {{jsxref("GeneratorFunction")}}-Konstruktors definiert werden.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">function* <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) {
+   <em>statements</em>
+}
+</pre>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Der Name der Funktion.</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>Der Name eines an die Funktion zu übergebenden Arguments. Eine Funktion kann bis zu 255 Argumente haben.</dd>
+</dl>
+
+<dl>
+ <dt><code>statements</code></dt>
+ <dd>Die den Körper der Funktion ergebenden Anweisungen.</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Generatoren sind Funktionen, die verlassen und später wieder betreten werden können. Ihr Kontext (Variablenbindung) bleibt über die Wiedereintritte hinweg erhalten.</p>
+
+<p>Der Aufruf einer Generatorfunktion führt ihren Körper nicht sofort aus; stattdessen wird ein <a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterator">Iterator</a>-Objekt einer Funktion zurückgegeben. Wenn die <code>next()</code>-Methode des Iterators aufgerufen wird, wird der Körper der Generatorfunktion bis zum ersten {{jsxref("Operators/yield", "yield")}}-Ausdruck ausgeführt, der den vom Iterator zurückzugebenden Wert spezifiziert oder mittels {{jsxref("Operators/yield*", "yield*")}} an eine andere Generatorfunktion weitergibt. Die Methode <code>next()</code> gibt ein Objekt mit einer <code>value</code>-Eigenschaft zurück, die den zurückgegebenen Wert enthält, und eine Eigenschaft <code>done</code>, die anzeigt, ob der Generator seinen letzten Wert zurückgegeben hat (boolescher Wert). Beim Aufrufen der <code>next()</code>-Methode mit einem Argument wird die Generatorfunktion weiter ausgeführt.</p>
+
+<p>Ein <code>return</code>-Statement in einer Generatorfunktion sorgt dafür, dass der Generator fertig ist (Status <code>done</code>). Falls ein Wert zurückgegeben wird, dann wird dieser als <code>value</code> zurückgegeben. Anschließend wird kein weiterer Wert mehr zurückgegeben.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einfaches_Beispiel">Einfaches Beispiel</h3>
+
+<pre class="brush: js">function* idMaker(){
+  var index = 0;
+  while(index &lt; index+1)
+    yield index++;
+}
+
+var gen = idMaker();
+
+console.log(gen.next().value); // 0
+console.log(gen.next().value); // 1
+console.log(gen.next().value); // 2
+console.log(gen.next().value); // 3
+// ...</pre>
+
+<h3 id="Beispiel_mit_yield*">Beispiel mit yield*</h3>
+
+<pre class="brush: js">function* anotherGenerator(i) {
+  yield i + 1;
+  yield i + 2;
+  yield i + 3;
+}
+
+function* generator(i) {
+  yield i;
+  yield* anotherGenerator(i);
+  yield i + 10;
+}
+
+var gen = generator(10);
+
+console.log(gen.next().value); // 10
+console.log(gen.next().value); // 11
+console.log(gen.next().value); // 12
+console.log(gen.next().value); // 13
+console.log(gen.next().value); // 20
+</pre>
+
+<h3 id="Übergeben_von_Argumenten_in_Generatoren">Übergeben von Argumenten in Generatoren</h3>
+
+<pre class="brush: js">function* logGenerator() {
+  console.log(0);
+  console.log(1, yield);
+  console.log(2, yield);
+  console.log(3, yield);
+}
+
+var gen = logGenerator();
+
+// the first call of next executes from the start of the function
+// until the first yield statement
+gen.next();             // 0
+gen.next('pretzel');    // 1 pretzel
+gen.next('california'); // 2 california
+gen.next('mayonnaise'); // 3 mayonnaise
+</pre>
+
+<h3 id="Return_Statement_in_einem_Generator">Return Statement in einem Generator</h3>
+
+<pre class="brush: js">function* yieldAndReturn() {
+  yield "Y";
+  return "R";
+  yield "unreachable";
+}
+
+var gen = yieldAndReturn()
+console.log(gen.next()); // { value: "Y", done: false }
+console.log(gen.next()); // { value: "R", done: true }
+console.log(gen.next()); // { value: undefined, done: true }
+</pre>
+
+<h3 id="Generatoren_haben_keinen_Konstruktor">Generatoren haben keinen Konstruktor</h3>
+
+<pre class="brush: js example-bad">function* f() {}
+var obj = new f; // throws "TypeError: f ist kein Konstruktor"</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES2015', '#', 'function*')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2016', '#', 'function*')}}</td>
+   <td>{{Spec2('ES2016')}}</td>
+   <td>Änderung, dass Generatoren nicht über [[Construct]] trap verfügen und eine Ausnahme bei der Verwendung von <code>new</code> erzeugen.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#', 'function*')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.statements.generator_function")}}</p>
+</div>
+
+<h2 id="Firefox-spezifische_Hinweise">Firefox-spezifische Hinweise</h2>
+
+<h4 id="Generatoren_und_Iteratoren_in_Firefox-Versionen_vor_26">Generatoren und Iteratoren in Firefox-Versionen vor 26</h4>
+
+<p>Ältere Firefox-Versionen implementierten eine ältere Version des Generatorenentwurfs. In den älteren Versionen wurden Generatoren, neben anderen Abweichungen, mit dem normalen Schlüsselwort <code>function</code> (ohne den Stern) definiert. Siehe <a href="/en-US/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function">veraltete Generatorfunktion </a>für weitere Informationen.</p>
+
+<h4 id="IteratorResult-Objekt_zurückgegeben_anstatt_Ausnahme_erzeugt"><code>IteratorResult</code>-Objekt zurückgegeben anstatt Ausnahme erzeugt</h4>
+
+<p>Beginnend mit Gecko 29 {{geckoRelease(29)}} erzeugt die ausgeführte Generatorfunktion keine {{jsxref("TypeError")}} "generator has already finished"-Ausnahme mehr. Stattdessen gibt sie <code>ein IteratorResult</code>-Objekt mit <code>{ value: undefined, done: true }</code> ({{bug(958951)}}) zurück.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Operators/function*", "function* expression")}}</li>
+ <li>{{jsxref("GeneratorFunction")}} Objekt</li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Iteration_protocols">Das Iteratorprotokol</a></li>
+ <li>{{jsxref("Operators/yield", "yield")}}</li>
+ <li>{{jsxref("Operators/yield*", "yield*")}}</li>
+ <li>{{jsxref("Function")}} object</li>
+ <li>{{jsxref("Statements/function", "function declaration")}}</li>
+ <li>{{jsxref("Operators/function", "function expression")}}</li>
+ <li>{{jsxref("Functions_and_function_scope", "Functions and function scope")}}</li>
+ <li>Andere Quellen im Web:
+  <ul>
+   <li><a href="http://facebook.github.io/regenerator/">Regenerator</a> an ES2015 generator compiler to ES5</li>
+   <li><a href="http://www.youtube.com/watch?v=qbKWsbJ76-s">Forbes Lindesay: Promises and Generators: control flow utopia -- JSConf EU 2013</a></li>
+   <li><a href="https://www.youtube.com/watch?v=ZrgEZykBHVo&amp;list=PLuoyIZT5fPlG44bPq50Wgh0INxykdrYX7&amp;index=1">Hemanth.HM: The New gen of *gen(){}</a></li>
+   <li><a href="http://taskjs.org/">Task.js</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/de/web/javascript/reference/statements/funktion/index.html b/files/de/web/javascript/reference/statements/funktion/index.html
new file mode 100644
index 0000000000..64a54347bc
--- /dev/null
+++ b/files/de/web/javascript/reference/statements/funktion/index.html
@@ -0,0 +1,190 @@
+---
+title: Funktion
+slug: Web/JavaScript/Reference/Statements/funktion
+translation_of: Web/JavaScript/Reference/Statements/function
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Die <strong>Funktionsdeklaration</strong> definiert eine Funktion mit den angegebenen Parametern.</p>
+
+<p>Es kann auch eine Funktion mit dem {{jsxref("Function")}}-Konstruktor und einem {{jsxref("Operators/function", "Funktionsausdruck")}} deklariert werden.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">function <em>name</em>([<em>param</em>,[, <em>param</em>,[..., <em>param</em>]]]) {
+   [<em>statements</em>]
+}
+</pre>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Der Funktionsname.</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>Der Name des Arguments, der an die Funktion übergeben werden soll. Eine Funktion kann bis zu 255 Argumente haben.</dd>
+</dl>
+
+<dl>
+ <dt><code>statements</code></dt>
+ <dd>Die Ausdrücke, aus denen der Funktionskörper besteht.</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p><span style="font-size: 14px; font-weight: normal; line-height: 1.5;">Eine Funktion, die mit der Funktionsdeklaration erstellt wurde, ist ein </span><code style="font-size: 14px; font-style: normal; line-height: 1.5;">Function</code><span style="font-size: 14px; font-weight: normal; line-height: 1.5;"> -Objekt und hat alle Eigenschaften, Methoden und Verhalten des <strong>Function</strong>-Objekts</span><span style="font-size: 14px; font-weight: normal; line-height: 1.5;">. Siehe {{jsxref("Function")}} für detaillierte Information über Funktionen.</span></p>
+
+<p>Eine Funktion kann auch mit einem Ausdruck erzeugt werden (siehe {{jsxref("Operators/function", "function expression")}}).</p>
+
+<p>Standardmäßig geben Funktionen <code>undefined </code>zurück. Um einen beliebigen anderen Wert zurückzugeben muss die Funktion einen {{jsxref("Statements/return", "return")}}-Ausdruck haben, der den Wert der Rückgabe angibt.</p>
+
+<h3 id="Bedingungskreierte_Funktionen">Bedingungskreierte Funktionen</h3>
+
+<p>Funktionen können bedingungskreiert werden. Das heißt: Eine Funktionsanweisung kann innerhalb einer <code>if</code>-Anweisung verschachtelt werden. Die meisten modernen Browser, abseits von Mozilla, werden solche konditionsbasierten Deklarationen als unkonditionelle Deklarationen behandeln und die Funktion erstellen, ob wahr oder nicht, siehe <a href="http://kangax.github.io/nfe/#function-statements">dieser Artikel</a> für eine Übersicht. Deshalb sollten sie so nicht verwendet werden. Stattdessen sollten Funktionsausdrücke für eine konditionelle Erstellung verwendet werden.</p>
+
+<h3 id="Hochziehen_der_Funktionsdeklaration">Hochziehen der Funktionsdeklaration</h3>
+
+<p>Funktionsdeklarationen in Javascript ziehen die Funktionsdefinition hoch. D. h. Funktionen können benutzt werden noch bevor sie deklariert wurden:</p>
+
+<pre class="brush: js">hochgezogen(); // loggt "foo"
+
+function hochgezogen() {
+  console.log("foo");
+}
+</pre>
+
+<p>Zu beachten ist aber, dass {{jsxref("Operators/function", "Funktionsausdrücke")}} nicht hochgezogen werden:</p>
+
+<pre class="brush: js">nichtHochgezogen(); // TypeError: nichtHochgezogen is not a function
+
+var nichtHochgezogen = function() {
+   console.log("bar");
+};
+</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Mit_function">Mit <code>function</code></h3>
+
+<p>Der folgende Code deklariert eine Funktion, die die Summe aller Verkäufe zurückgibt, wenn sie die Anzahl der verkauften Einheiten <code>a</code>, <code>b</code>, und <code>c </code>übergeben bekommt.</p>
+
+<pre class="brush: js">function berechne_verkäufe(einheit_a, einheit_b, einheit_c) {
+   return einheit_a*79 + einheit_b * 129 + einheit_c * 699;
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-13', 'Function definition')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-13', 'Function definition')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-13', 'Function definition')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Allowed in sloppy mode</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Allowed in sloppy mode</td>
+   <td>{{CompatNo}}</td>
+   <td>
+    <p>{{CompatChrome(49.0)}}</p>
+   </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Functions_and_function_scope", "Functions and function scope")}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Operators/function", "function expression")}}</li>
+ <li>{{jsxref("Statements/function*", "function* statement")}}</li>
+ <li>{{jsxref("Operators/function*", "function* expression")}}</li>
+ <li>{{jsxref("Functions/Arrow_functions", "Arrow functions")}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/statements/if...else/index.html b/files/de/web/javascript/reference/statements/if...else/index.html
new file mode 100644
index 0000000000..f0d95829cf
--- /dev/null
+++ b/files/de/web/javascript/reference/statements/if...else/index.html
@@ -0,0 +1,168 @@
+---
+title: if...else
+slug: Web/JavaScript/Reference/Statements/if...else
+tags:
+  - JavaScript
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/if...else
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p class="seoSummary">Die <strong>if-Anweisung</strong> führt Anweisungen aus, wenn eine bestimmte Bedingung zu <code>true</code> ausgewertet wird. Wird die Bedingung zu <code>false</code> ausgewertet, können andere Anweisungen ausgeführt werden.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-ifelse.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">if (bedingung)<em> anweisung1</em> [else <em>anweisung2</em>]
+</pre>
+
+<dl>
+ <dt><code>bedingung</code></dt>
+ <dd>Ein <a href="/de/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions">Ausdruck</a>, der zu <code>true</code> oder <code>false</code> ausgewertet wird.</dd>
+</dl>
+
+<dl>
+ <dt><code>anweisung1</code></dt>
+ <dd>Eine Anweisung, die ausgeführt wird, wenn <code>bedingung</code> zu <code>true</code> ausgewertet wird. Diese Anweisung kann jede gültige Anweisung sein, auch eine if-Anweisung. Um mehrere Anweisungen auszuführen, muss eine {{jsxref("Statements/block", "block")}}-Anweisung (<code>{...}</code>) genutzt werden, um die Anweisungen zu gruppieren. Wenn keine Anweisung ausgeführt werden soll, muss die {{jsxref("Statements/empty", "empty")}}-Anweisung genutzt werden.</dd>
+</dl>
+
+<dl>
+ <dt><code>anweisung2</code></dt>
+ <dd>Eine Anweisung, die ausgeführt wird, wenn <code>bedingung</code> zu false ausgewertet wird und die <code>else</code> Klausel existiert. Auch hier können alle Anweisungen, egal ob {{jsxref("Statements/block", "block")}}-Anweisung (<code>{...}</code>) oder weitere if-Anweisungen genutzt werden.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p>Mehrere <code>if...else</code>-Anweisungen können verschachtelt werden, wenn eine <code>else if</code>-Klausel erstellt wird. Zu beachten ist, dass es in JavaScript kein Schlüsselwort <code>elseif</code> (in einem Wort) gibt.</p>
+
+<pre class="eval">if (<em>bedingung1</em>)
+   <em>anweisung1</em>
+else if (<em>bedingung2</em>)
+   <em>anweisung2</em>
+else if (<em>bedingung3</em>)
+   <em>anweisung3</em>
+...
+else
+   <em>anweisungN</em>
+</pre>
+
+<p>Um zu sehen wie das funktioniert, ist es hilfreich, die verschachtelten Anweisungen einzurücken:</p>
+
+<pre class="eval">if (<em>bedingung1</em>)
+   <em>anweisung1</em>
+else
+   if (<em>bedingung2</em>)
+      <em>anweisung2</em>
+   else
+      if (<em>bedingung3</em>)
+...
+</pre>
+
+<p>Um mehrere Anweisungen in einer Klausel auszuführen, muss eine {{jsxref("Statements/block", "block")}}-Anweisung genutzt werden. Allgemein ist es immer gute Praxis (best practice) eine {{jsxref("Statements/block", "block")}}-Anweisung zu nutzen, besonders bei verschachtelten <code>if</code>-Anweisungen.</p>
+
+<pre class="eval">if (<em>bedingung</em>) {
+  <em>anweisung1</em>
+} else {
+  <em>anweisung2</em>
+}
+</pre>
+
+<p>Man sollte den primitiven boolean-Datentyp nicht mit dem {{jsxref("Global_Objects/Boolean", "Boolean")}}-Objekt verwechseln. Jeder Wert, der nicht <code>undefined</code>, <code>null</code>, <code>0</code>, <code>NaN</code>, oder der leere string (<code>""</code>) ist, wird zu <code>true</code> ausgewertet. Dabei ist auch ein {{jsxref("Global_Objects/Boolean", "Boolean")}}-Objekt mit dem Wert false inbegriffen.</p>
+
+<pre class="brush: js">var b = new Boolean(false);
+if (b) // wird zu true ausgewertet
+</pre>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<h3 id="Example:_Using_if...else" name="Example:_Using_if...else">Einsatz von <code>if...else</code></h3>
+
+<pre class="brush: js">if (cipher_char === from_char) {
+  result = result + to_char;
+  x++;
+} else {
+  result = result + clear_char;
+}
+</pre>
+
+<h3 id="Einsatz_von_else_if">Einsatz von <code>else if</code></h3>
+
+<p>Zu beachten ist, dass in JavaScript kein <code>elseif</code>-Schlüsselwort existiert. Man kann jedoch immer ein Leerzeichen zwischen <code>else</code> und <code>if</code> benutzen.</p>
+
+<pre class="brush: js">if (x &gt; 5) {
+
+} else if (x &gt; 50) {
+
+} else {
+
+}</pre>
+
+<h3 id="Example:_Assignment_within_the_conditional_expression" name="Example:_Assignment_within_the_conditional_expression">Zuweisungen in der Bedingung</h3>
+
+<p>Es ist nicht <span class="dpf_sent" id="dpfsent_1">ratsam </span>einfache Zuweisungen in die Bedingung zu schreiben, weil sie zu <span class="dpf_sent" id="dpfsent_1">Verwechselungen </span>mit dem Gleichheit-Operator führen kann. Zum Beispiel führt folgender Quelltext, der eine Zuweisung enthält immer zu 'true' und sollte daher so nicht benutzt werden:</p>
+
+<pre class="brush: js example-bad">if (x = y) {
+   /* tu das richtige */
+}
+</pre>
+
+<p>Wenn es nötig ist, eine Zuweisung in einer Bedingungs-Anweisunge zu benutzen, dann sollten Klammern um die Zuweisung gesetzt werden. Der Effekt ist jedoch derselbe, wie im vorangegangenen Code. Zum Beispiel:</p>
+
+<pre class="brush: js example-good">if ((x = y)) {
+   /* tu das richtige */
+}
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-if-statement', 'if statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-if-statement', 'if statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.5', 'if statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-12.5', 'if statement')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-12.5', 'if statement')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.statements.if_else")}}</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Statements/block", "block")}}</li>
+ <li>{{jsxref("Statements/switch", "switch")}}</li>
+ <li>{{jsxref("Operators/conditional_operator", "Bedingter (ternärer) Operator")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/statements/import/index.html b/files/de/web/javascript/reference/statements/import/index.html
new file mode 100644
index 0000000000..07e1b12a7d
--- /dev/null
+++ b/files/de/web/javascript/reference/statements/import/index.html
@@ -0,0 +1,151 @@
+---
+title: import
+slug: Web/JavaScript/Reference/Statements/import
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Module
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/import
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Das <strong>import Statement </strong>wird verwendet um Funktionen, Objekte und Primitives zu importieren die von einem externen Modul, einem anderen Script, etc. exportiert wurden.</p>
+
+<p>{{noteStart}}Zur Zeit wird dieses Feature nicht von jedem Browser nativ unterstützt. Viele Transpiler implementieren es, wie beispielsweise der <a href="https://github.com/google/traceur-compiler">Traceur Compiler</a>, <a href="http://babeljs.io/">Babel</a>, <a href="https://github.com/rollup/rollup">Rollup</a> oder <a href="https://webpack.js.org/">Webpack</a>.{{noteEnd}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">import <em>name</em> from "<em>module-name</em>";
+import * as <em>name</em> from "<em>module-name</em>";
+import { <em>member </em>} from "<em>module-name</em>";
+import { <em>member</em> as <em>alias </em>} from "<em>module-name</em>";
+import { <em>member1 , member2</em> } from "<em>module-name</em>";
+import { <em>member1 , member2</em> as <em>alias2</em> , <em>[...]</em> } from "<em>module-name</em>";
+import <em>defaultMember</em>, { <em>member</em> [ , <em>[...]</em> ] } from "<em>module-name</em>";
+import <em>defaultMember</em>, * as <em>alias</em> from "<em>module-name</em>";
+import <em>defaultMember</em> from "<em>module-name</em>";
+import "<em>module-name</em>";</pre>
+
+<dl>
+ <dt><font face="Courier New, Andale Mono, monospace">name</font></dt>
+ <dd>Name des Objekts, das die importierten Daten empfängt</dd>
+</dl>
+
+<dl>
+ <dt><code>member, memberN</code></dt>
+ <dd>Namen der exportierten Member, die importiert werden</dd>
+ <dt><code>defaultMember</code></dt>
+ <dd>Name des exportierten Defaults, das importiert wird</dd>
+ <dt><code>alias, aliasN</code></dt>
+ <dd>Name des Objekts, das die importierte Property empfängt</dd>
+ <dt><code>module-name</code></dt>
+ <dd>Der Name des Moduls, das importiert wird. Also der Dateiname.</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Der Parameter <em><code>name</code></em> ist der Name des Objekts, das die exportierten Member empfängt. Die <em><code>member-</code></em>Parameter legen einzelne Einheiten fest, während der <em><code>name</code></em> Parameter alles importiert. <em><code>name</code></em> kann auch eine Funktion sein, wenn das Modul nur eine Einheit hat. Es folgen ein paar Beispiele für die Syntax:</p>
+
+<p>Importieren der gesamten Inhalte des Moduls. Folgendes fügt <code>myModule</code> in den aktuellen Namensraum ein, mit allen exportierten Verbindungen von "my-module" bzw. "my-module.js".</p>
+
+<pre class="brush: js">import * as <em>myModule</em> from "my-module";
+</pre>
+
+<p>Einfügen einer einzelnen Einheit eines Moduls. Folgendes fügt <code>myMember</code> in den aktuellen Namensraum ein.</p>
+
+<pre class="brush: js">import {myMember} from "my-module";</pre>
+
+<p>Einfügen von mehreren Einheiten eines Moduls. Folgendes fügt <code>foo</code> und <code>bar</code> in den aktuellen Namensraum ein.</p>
+
+<pre class="brush: js">import {foo, bar} from "my-module";</pre>
+
+<p>Einfügen und Vergeben eines Alias. Folgendes fügt <code>shortName</code> in den aktuellen Namensraum ein.</p>
+
+<pre class="brush: js">import {reallyReallyLongModuleMemberName as shortName} from "my-module";</pre>
+
+<p>Einfügen und Vergeben von mehreren Aliasen</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">import</span> <span class="punctuation token">{</span>reallyReallyLongModuleMemberName <span class="keyword token">as</span> shortName<span class="punctuation token">,</span> anotherLongModuleName <span class="keyword token">as</span> short<span class="punctuation token">}</span> <span class="keyword token">from</span> <span class="string token">"my-module"</span><span class="punctuation token">;</span></code></pre>
+
+<p>Einfügen eines ganzen Moduls, ohne dessen Namensbindungen zu importieren.</p>
+
+<pre class="brush: js">import 'my-module';</pre>
+
+<h3 id="Defaults_importieren">Defaults importieren</h3>
+
+<p>Ein Standardexport ist möglich (egal, ob es sich um ein Objekt, eine Funktion, eine Klasse oder anderes handelt). Dementsprechend ist es auch möglich einen Standard-<code>import</code> zu benutzen, um diese Standards zu importieren.</p>
+
+<p>Die einfachste Version importiert die Standards direkt:</p>
+
+<pre class="brush: js">import myModule from "my-module";</pre>
+
+<p>Man kann diese Syntax auch benutzen, um die oben genannten imports durchzufüren. In diesem Fall müssen die Standards aber wie folgt definiert werden:</p>
+
+<pre class="brush: js">import myDefault, * as myModule from "my-module";
+// myModule wird als namespace benutzt</pre>
+
+<p>oder</p>
+
+<pre class="brush: js">import myDefault, {foo, bar} from "my-module";
+// spezifische Imports nach Namen
+</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Importieren einer weiteren Datei um AJAX JSON-Anfragen zu bearbeiten:</p>
+
+<pre class="brush: js; highlight: [14]">// --file.js--
+function getJSON(url, callback) {
+  let xhr = new XMLHttpRequest();
+  xhr.onload = function () {
+    callback(this.responseText)
+  };
+  xhr.open("GET", url, true);
+  xhr.send();
+}
+
+export function getUsefulContents(url, callback) {
+  getJSON(url, data =&gt; callback(JSON.parse(data)));
+}
+
+// --main.js--
+import { getUsefulContents } from "file";
+getUsefulContents("http://www.example.com", data =&gt; {
+  doSomethingUseful(data);
+});</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-imports', 'Imports')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-imports', 'Imports')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{Compat("javascript.statements.import")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Statements/export", "export")}}</li>
+ <li><a href="https://blogs.windows.com/msedgedev/2016/05/17/es6-modules-and-beyond/">Vorschau von Modulen und mehr von ES2015, ES2016 und darüber</a></li>
+ <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks Blog Post vonJason Orendorff</li>
+ <li><a class="external" href="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's Buch: "Exploring JS: Modules"</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/statements/index.html b/files/de/web/javascript/reference/statements/index.html
new file mode 100644
index 0000000000..a460b954d2
--- /dev/null
+++ b/files/de/web/javascript/reference/statements/index.html
@@ -0,0 +1,148 @@
+---
+title: Anweisungen und Deklarationen
+slug: Web/JavaScript/Reference/Statements
+tags:
+  - JavaScript
+  - Reference
+  - statements
+translation_of: Web/JavaScript/Reference/Statements
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>JavaScript Anwendungen bestehen aus Anweisungen mit bestimmter Syntax. Eine Anweisung kann mehrere Zeilen umfassen und mehrere Anweisungen können in einer einzigen Zeile stehen, wenn sie mittels Semikolon voneinander getrennt sind.</p>
+
+<h2 id="Anweisungen_und_Deklarationen_nach_Kategorie">Anweisungen und Deklarationen nach Kategorie</h2>
+
+<p>Für eine alphabetische Auflistung, siehe Sidebar auf der linken Seite.</p>
+
+<h3 id="Kontrollfluss">Kontrollfluss</h3>
+
+<dl>
+ <dt>{{jsxref("Statements/block", "Block")}}</dt>
+ <dd>Anweisungsblöcke werden genutzt um ein oder mehrere Anweisungen zu gruppieren. Der Block wird von geschweiften Klammern umfasst.</dd>
+ <dt>{{jsxref("Statements/break", "break")}}</dt>
+ <dd>Beendet die aktuelle Schleifen-, Switch-, oder mit Label versehene Anweisung und das Programm wird hinter dieser fortgesetzt.</dd>
+ <dt>{{jsxref("Statements/continue", "continue")}}</dt>
+ <dd>Beendet den Durchlauf der aktuellen, bzw. der mittels Label angesprochenen Schleife und fährt mit dem nächsten Schleifendurchlauf fort.</dd>
+ <dt>{{jsxref("Statements/Empty", "Empty")}}</dt>
+ <dd>Man verwendet <em>empty </em>anstatt einer echten Anweisung, um keine Anweisung zu geben, an stellen an denen nach JavaScript-Syntax eine erwartet wird.</dd>
+ <dt>{{jsxref("Statements/if...else", "if...else")}}</dt>
+ <dd>Führt eine Anweisung aus wenn eine zuvor festgelegte Bedingung erfüllt (als <em>true</em> gewertet) wird. Ist die Bedingung <em>false,</em> kann eine andere Anweisung ausgeführt werden.</dd>
+ <dt>{{jsxref("Statements/switch", "switch")}}</dt>
+ <dd>Nach Auswertung eines Ausdrucks, wird anhand des Ergebnisses eine Fallunterscheidung durchgeführt und die entsprechende durch ein case-Label markierte Anweisung ausgeführt.</dd>
+ <dt>{{jsxref("Statements/throw", "throw")}}</dt>
+ <dd>Leitet das Auswerfen eines Fehlerausdrucks ein.</dd>
+ <dt>{{jsxref("Statements/try...catch", "try...catch")}}</dt>
+ <dd>Ein Anweisungsblock wird "ausprobiert" (try) und ein eventuell auftretender Fehler abgefangen (catch) und gegebenenfalls behandelt.</dd>
+</dl>
+
+<h3 id="Deklarationen">Deklarationen</h3>
+
+<dl>
+ <dt>{{jsxref("Statements/var", "var")}}</dt>
+ <dd>Deklariert eine Variable und initialisiert sie optional mit einem Wert.</dd>
+ <dt>{{experimental_inline()}} {{jsxref("Statements/let", "let")}}</dt>
+ <dd>Deklariert eine Blocklokale variable und initialisiert sie optional mit einem Wert.</dd>
+ <dt>{{experimental_inline()}} {{jsxref("Statements/const", "const")}}</dt>
+ <dd>Deklariert eine Konstante auf welche nur lesend zugegriffen werden kann.</dd>
+</dl>
+
+<h3 id="Funktionen_und_Klassen">Funktionen und Klassen</h3>
+
+<dl>
+ <dt>{{jsxref("Statements/function", "function")}}</dt>
+ <dd>Deklariert eine Funktion mit festgelegten Parametern.</dd>
+ <dt>{{experimental_inline()}} {{jsxref("Statements/function*", "function*")}}</dt>
+ <dd>Erzeugt Funktionen mit denen  Schleifen leichter zu schreiben sind.</dd>
+ <dt>{{jsxref("Statements/async_function", "async function")}}</dt>
+ <dd>Deklariert eine asynchrone Funktion mit festgelegten Parametern.</dd>
+ <dt>{{jsxref("Statements/return", "return")}}</dt>
+ <dd>Legt den Rückgabewert einer Funktion fest.</dd>
+ <dt>{{jsxref("Statements/class", "class")}}</dt>
+ <dd>Deklariert eine Klasse.</dd>
+</dl>
+
+<h3 id="Schleifen">Schleifen</h3>
+
+<dl>
+ <dt>{{jsxref("Statements/do...while", "do...while")}}</dt>
+ <dd>Eine Schleife die solange ausgeführt wird bis die Bedingung false ist. Die Bedingung wird erst am Ende eines Durchgangs überprüft.</dd>
+ <dt>{{jsxref("Statements/for", "for")}}</dt>
+ <dd>Erstellt eine von drei unerforderlichen, zwischen Parenthesen geklammerten, durch Semikola getrennten Ausdrücken geregelte Schleife, gefolgt von einem Anweisungsblock innerhalb der Schleife.</dd>
+ <dt>{{deprecated_inline()}} {{non-standard_inline()}} {{jsxref("Statements/for_each...in", "for_each...in")}}</dt>
+ <dd>Iterates a specified variable over all values of object's properties. For each distinct property, a specified statement is executed.</dd>
+ <dt>{{jsxref("Statements/for...in", "for...in")}}</dt>
+ <dd>Stellt die aufzählbaren Eigenschaften eines Objektes in einer unbestimmten Reihenfolge zur Verfügung. Jede Eigenschaft kann durch Anweisungen in der Schleife ausgewertet werden.</dd>
+ <dt>{{experimental_inline()}} {{jsxref("Statements/for...of", "for...of")}}</dt>
+ <dd>Durchläuft die Werte eines <a href="/de/docs/Web/JavaScript/Reference/Iteration_protocols">iterationsfähigen</a> Objektes, wie zum Beispiel eines <code><a href="/de/docs/Glossary/array">arrays</a></code>, eines Array-ähnlichen Objektes, oder eines <a href="/de/docs/Web/JavaScript/Guide/Iteratoren_und_Generatoren">Iterators oder Generators</a>. Für jeden Wert des Objektes können Anweisungen ausgewertet werden.</dd>
+ <dt> </dt>
+ <dt>{{jsxref("Statements/while", "while")}}</dt>
+ <dd>Erstellt eine Schleife, die solange durchlaufen wird, wie die Schleifenbedingung wahr ist. Die Schleifenbedingung wird am Anfang der Schleife (vor dem ersten Durchlauf des inneren Befehlsblocks) ausgewertet.</dd>
+</dl>
+
+<h3 id="Weiteres">Weiteres</h3>
+
+<dl>
+ <dt>{{jsxref("Statements/debugger", "debugger")}}</dt>
+ <dd>Ruft irgendwelches verfügbare Fehlerentdeckungsvermögen auf. Steht keines zur Verfügung, hat dieser Befehl keine Wirkung.</dd>
+ <dt>{{experimental_inline()}} {{jsxref("Statements/export", "export")}}</dt>
+ <dd>Stellt eine Funktion zur Anwendung in anderen Modulen bereit. Dieser Ausdruck wird in dem Quellenmodul verwendet. Steht in Zusammenhang mit <code><a href="/de/docs/Web/JavaScript/Reference/Statements/import">import</a></code> auf der anderen Seite des Wechsels.</dd>
+ <dt>{{experimental_inline()}} {{jsxref("Statements/import", "import")}}</dt>
+ <dd>Importiert eine aus einem anderen Modul stammende Funktion, oder den gesamten Modul. Dieser Ausdruck wird in dem Entleihermodul verwendet, und arbeitet in Zusammenhang mit <code><a href="/de/docs/Web/JavaScript/Reference/Statements/export">export</a></code>.</dd>
+ <dt>{{jsxref("Statements/label", "label")}}</dt>
+ <dd>Hängt ein Etikett an eine Anweisung an. Auf dieses Etikett können  <code><a href="/de/docs/Web/JavaScript/Reference/Statements/break">break</a></code> (aussteigen) oder <code><a href="/de/docs/Web/JavaScript/Reference/Statements/continue">continue</a></code> (fortsetzen) hinweisen, um den Kontrollfluss mit einer größeren Genauigkeit zu steuern.</dd>
+</dl>
+
+<dl>
+ <dt>{{deprecated_inline()}} {{jsxref("Statements/with", "with")}}</dt>
+ <dd>Extends the scope chain for a statement.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-12', 'Statements')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial Definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-12', 'Statements')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12', 'Statements')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Neu: function*, let, for...of, yield, class</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.statements")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators">Operators</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/statements/label/index.html b/files/de/web/javascript/reference/statements/label/index.html
new file mode 100644
index 0000000000..e9fcae4b50
--- /dev/null
+++ b/files/de/web/javascript/reference/statements/label/index.html
@@ -0,0 +1,205 @@
+---
+title: label
+slug: Web/JavaScript/Reference/Statements/label
+tags:
+  - JavaScript
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/label
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Ein Statement kann ein Label erhalten und zusammen mit dem {{jsxref("Statements/break", "break")}} oder {{jsxref("Statements/continue", "continue")}} Statements verwendet werden. Das Label ist das Präfix von einem Statement mit einer Bezeichner zum referenzieren.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>label</em> : <em>statement</em>
+</pre>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>Jeder JavaScript Bezeichner, welches kein reserviertes Wort ist.</dd>
+ <dt><code>statement</code></dt>
+ <dd>Statements. <code>break</code> kann mit jedem gelabelten Statement und <code>continue</code> kann mit Schleifen-Statements verwendet werden.</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Sie können ein Label verwenden, um eine Schleife zu identifizieren und danach einen <code>break </code>oder <code>continue </code>Statement verwenden, um anzugeben ob ein Programm die Schleife abbrechen oder weiter abarbeiten soll.</p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> JavaScript hat <strong>KEINE </strong><code>goto </code>Statements. Sie können die Labels nur mit <code>break</code> oder <code>continue </code>verwenden.</p>
+</div>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Verwenden_eines_continue_mit_Labels_in_for-Schleifen">Verwenden eines <code>continue</code> mit Labels in <code>for</code>-Schleifen</h3>
+
+<pre class="brush: js">var i, j;
+
+loop1:
+for (i = 0; i &lt; 3; i++) {      // Das erste for Statement hat den Label "loop1"
+   loop2:
+   for (j = 0; j &lt; 3; j++) {   // Das zweite for Statement hat den Label "loop2"
+      if (i === 1 &amp;&amp; j === 1) {
+         continue loop1;
+      }
+      console.log("i = " + i + ", j = " + j);
+   }
+}
+
+// Ausgabe ist:
+//   "i = 0, j = 0"
+//   "i = 0, j = 1"
+//   "i = 0, j = 2"
+//   "i = 1, j = 0"
+//   "i = 2, j = 0"
+//   "i = 2, j = 1"
+//   "i = 2, j = 2"
+// Schau, wie "i = 1, j = 1" und"i = 1, j = 2" übersprungen werden
+</pre>
+
+<h3 id="Verwenden_eines_continue_Statements_mit_Label">Verwenden eines <code>continue</code> Statements mit Label</h3>
+
+<p>Gegeben sei ein Array von Elementen und ein Array von Tests. Dieses Beispiel zählt die Anzahl von Elemente, die alle Tests bestehen.</p>
+
+<pre class="brush: js">var itemsPassed = 0;
+var i, j;
+
+top:
+for (i = 0; i &lt; items.length; i++){
+  for (j = 0; j &lt; tests.length; j++) {
+    if (!tests[j].pass(items[i])) {
+      continue top;
+    }
+  }
+
+  itemsPassed++;
+}</pre>
+
+<h3 id="Verwenden_eines_breaks_mit_Labels_für_for-Schleifen">Verwenden eines <code>breaks</code> mit Labels für <code>for</code>-Schleifen</h3>
+
+<pre class="brush: js">var i, j;
+
+loop1:
+for (i = 0; i &lt; 3; i++) {      // Das erste for Statement hat den Label "loop1"
+   loop2:
+   for (j = 0; j &lt; 3; j++) {   // Das zweite for Statement hat den Label "loop2"
+      if (i === 1 &amp;&amp; j === 1) {
+         break loop1;
+      }
+      console.log("i = " + i + ", j = " + j);
+   }
+}
+
+// Ausgabe ist:
+//   "i = 0, j = 0"
+//   "i = 0, j = 1"
+//   "i = 0, j = 2"
+//   "i = 1, j = 0"
+// Schau den Unterschied zu dem vorigen continue Beispiel an</pre>
+
+<h3 id="Verwenden_eines_Labels_im_break_Statement">Verwenden eines Labels im <code>break</code> Statement</h3>
+
+<p>Gegeben ist ein Array von Items und ein Array von Tests. Dieses Beispiel bestimmt, ob alle Items alle Tests bestehen.</p>
+
+<pre class="brush: js">var allPass = true;
+var i, j;
+
+top:
+for (i = 0; items.length; i++)
+  for (j = 0; j &lt; tests.length; i++)
+    if (!tests[j].pass(items[i])){
+      allPass = false;
+      break top;
+    }</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.2</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.12', 'Labelled statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-labelled-statements', 'Labelled statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-labelled-statements', 'Labelled statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Statements/break", "break")}}</li>
+ <li>{{jsxref("Statements/continue", "continue")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/statements/let/index.html b/files/de/web/javascript/reference/statements/let/index.html
new file mode 100644
index 0000000000..5c68f5eb96
--- /dev/null
+++ b/files/de/web/javascript/reference/statements/let/index.html
@@ -0,0 +1,454 @@
+---
+title: let
+slug: Web/JavaScript/Reference/Statements/let
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Statement
+  - Variable declaration
+  - Variables
+  - let
+translation_of: Web/JavaScript/Reference/Statements/let
+---
+<div>
+<div>
+<div>{{jsSidebar("Statements")}}</div>
+</div>
+</div>
+
+<p>Das Schlüsselwort <strong><code>let</code></strong> deklariert eine Variable im Gültigkeitsbereich des lokalen Blocks. Optional wird die Variable mit einem Wert initialisiert. <strong>let </strong>leitet sich vom englischen Verb "to let" ab, so daß man die Zeile "let x = 3" lesen kann als: "lassen wir x 3 sein" (let x be three), bekannt aus der Programmiersprache BASIC.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">let var1 [= wert1] [, var2 [= wert2]] [, ..., varN [= wertN]];</pre>
+
+<h3 id="Parameters" name="Parameters">Parameter</h3>
+
+<dl>
+ <dt><code>var1</code>, <code>var2</code>, …, <code>varN</code></dt>
+ <dd>Variablenname. Jeder legale Bezeichner ist erlaubt.</dd>
+ <dt><code>wert1</code>, <code>wert2</code>, …, <code>wertN</code></dt>
+ <dd>Initialwerte der Variablen. Jeder legale Ausdruck ist erlaubt.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p><code>let</code> ermöglicht es Variablen zu deklarieren, deren Gültigkeitsbereich auf den Block, den Befehl oder den Ausdruck beschränkt ist, in dem sie deklariert sind. Der Unterschied zum <a href="/de/docs/JavaScript/Reference/Statements/var"><code>var</code></a> Schlüsselwort ist, dass der Gültigkeitsbereich auf Blöcke und nicht auf Funktionen bzw. Global beschränkt ist.</p>
+
+<h3 id="Regeln_für_Gültigkeitsbereiche_2">Regeln für Gültigkeitsbereiche</h3>
+
+<p>Variablen, die mit <code>let</code> deklariert werden, haben als Gültigkeitsbereich den Block in dem sie definiert wurden und alle weiteren Unterblöcke in denen sie nicht neu definiert werden. In dieser Hinsicht funktioniert <code>let</code> ähnlich wie <code>var</code>. Der Unterschied besteht darin, dass der Gültigkeitbereich bei <code>var</code> Deklarierten Variablen die umschließende Funktion ist:</p>
+
+<pre class="brush:js">function varTest() {
+  var x = 31;
+  if (true) {
+    var x = 71;  // gleiche Variable!
+    console.log(x);  // 71
+  }
+  console.log(x);  // 71
+}
+
+function letTest() {
+  let x = 31;
+  if (true) {
+    let x = 71;  // andere variable
+    console.log(x);  // 71
+  }
+  console.log(x);  // 31
+}</pre>
+
+<p id="Regeln_für_Gültigkeitsbereiche">Auf der ersten Ebene von Programmen und Funktionen erzeugt <code>let</code> im globalen Objekt keine Property, <code>var</code> hingegen schon. Deshalb ist <code>this.y</code> im folgenden Beispiel <code>undefined</code>.</p>
+
+<pre class="brush:js">var x = 'global';
+let y = 'global';
+console.log(this.x); // "global"
+console.log(this.y); // undefined</pre>
+
+<h3 id="Private_Eigenschaften_emulieren">Private Eigenschaften emulieren</h3>
+
+<p>Beim Einsatz von <a href="https://developer.mozilla.org/de/docs/Glossary/Konstruktor">Konstruktoren</a> können <strong><code>let</code></strong>-Deklarationen (alternativ zu <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Closures">Closures</a>) genutzt werden, um private Eigenschaften in mehreren Methoden zu verwenden.</p>
+
+<pre class="brush:js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> Thing<span class="punctuation token">;</span>
+
+<span class="punctuation token">{</span>
+  <span class="keyword token">let</span> privateScope <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">WeakMap</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">let</span> counter <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span>
+
+  <span class="function function-variable token">Thing</span> <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">this</span><span class="punctuation token">.</span>someProperty <span class="operator token">=</span> <span class="string token">'foo'</span><span class="punctuation token">;</span>
+
+    privateScope<span class="punctuation token">.</span><span class="function token">set</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">,</span> <span class="punctuation token">{</span>
+      hidden<span class="punctuation token">:</span> <span class="operator token">++</span>counter<span class="punctuation token">,</span>
+    <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+  <span class="class-name token">Thing</span><span class="punctuation token">.</span>prototype<span class="punctuation token">.</span><span class="function function-variable token">showPublic</span> <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">return</span> <span class="keyword token">this</span><span class="punctuation token">.</span>someProperty<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+  <span class="class-name token">Thing</span><span class="punctuation token">.</span>prototype<span class="punctuation token">.</span><span class="function function-variable token">showPrivate</span> <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">return</span> privateScope<span class="punctuation token">.</span><span class="function token">get</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">)</span><span class="punctuation token">.</span>hidden<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="keyword token">typeof</span> privateScope<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// "undefined"</span>
+
+<span class="keyword token">var</span> thing <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Thing</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>thing<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// Thing {someProperty: "foo"}</span>
+
+thing<span class="punctuation token">.</span><span class="function token">showPublic</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// "foo"</span>
+
+thing<span class="punctuation token">.</span><span class="function token">showPrivate</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// 1</span></code></pre>
+
+<p>Das selbe Kapselungsmuster mit Funktionsabschlüssen über lokale Variablen kann mit <code>var</code> erstellt werden, aber dieses benötigt dann funktionsweite Sichtbarkeit (üblicherweise eine IIFE im Modulmuster) anstatt nur blockweite Sichtbarkeit wie das obenstehende Beispiel.</p>
+
+<h3 id="Redeklarationen">Redeklarationen</h3>
+
+<p>Erneute Deklaration derselben Variable innerhalb desselben Gültigkeitsbereiches erzeugt einen Syntaxfehler ({{jsxref("SyntaxError")}}).</p>
+
+<pre class="brush: js example-bad line-numbers language-js"><code class="language-js"><span class="keyword token">if</span> <span class="punctuation token">(</span>x<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">let</span> foo<span class="punctuation token">;</span>
+  <span class="keyword token">let</span> foo<span class="punctuation token">;</span> <span class="comment token">// SyntaxError thrown.</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>Der Körper einer <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Statements/switch"><code>switch</code></a>-Anweisung ist nur ein einzelner Block, weshalb das folgende Beispiel einen Fehler verursacht.</p>
+
+<pre class="brush: js example-bad line-numbers language-js"><code class="language-js"><span class="keyword token">let</span> x <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span>
+<span class="keyword token">switch</span><span class="punctuation token">(</span>x<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">case</span> <span class="number token">0</span><span class="punctuation token">:</span>
+    <span class="keyword token">let</span> foo<span class="punctuation token">;</span>
+    <span class="keyword token">break</span><span class="punctuation token">;</span>
+
+  <span class="keyword token">case</span> <span class="number token">1</span><span class="punctuation token">:</span>
+    <span class="keyword token">let</span> foo<span class="punctuation token">;</span> <span class="comment token">// SyntaxError for redeclaration.</span>
+    <span class="keyword token">break</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>Ist innerhalb einer case-Klausel jedoch ein innerer Block eingebettet, erzeugt dieser seinen eigenen lexikalischen Gültigkeitsbereich. Das folgende Beispiel erzeugt deshalb keine solchen Redeklarations-Fehler, wie sie im vorangegangenen Beispiel auftraten.</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">let</span> x <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span>
+
+<span class="keyword token">switch</span><span class="punctuation token">(</span>x<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">case</span> <span class="number token">0</span><span class="punctuation token">:</span> <span class="punctuation token">{</span>
+    <span class="keyword token">let</span> foo<span class="punctuation token">;</span>
+    <span class="keyword token">break</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="keyword token">case</span> <span class="number token">1</span><span class="punctuation token">:</span> <span class="punctuation token">{</span>
+    <span class="keyword token">let</span> foo<span class="punctuation token">;</span>
+    <span class="keyword token">break</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="Sauberer_Quelltext_in_inneren_Funktionen">Sauberer Quelltext in inneren Funktionen</h3>
+
+<p><code>let</code> macht den Programmcode manchmal leserlicher, wenn innere Funktionen eingesetzt werden.</p>
+
+<pre class="brush:js">var list = document.getElementById("list");
+
+for (var i = 1; i &lt;= 5; i++) {
+  var item = document.createElement("li");
+  item.appendChild(document.createTextNode("Item " + i));
+
+  let j = i;
+  item.onclick = function (ev) {
+    console.log("Item " + j + " is clicked.");
+  };
+  list.appendChild(item);
+}
+</pre>
+
+<p>Dieses Beispiel funktioniert wie erwartet, weil alle fünf Instanzen der anonymen inneren Funktionen auf verschiedene Instanzen der Variable <code>j</code> zugreifen. Wenn stattdessen <code>var</code> verwendet wird oder in der inneren Funktion statt <code>j</code> zu deklarieren <code>i</code> benutzt wird, funktioniert dies nicht.</p>
+
+<h3 id="Zeitweilig_tote_Zonen_und_Fehler_mit_let">Zeitweilig tote Zonen und Fehler mit <code>let</code></h3>
+
+<p>In ECMAScript 2015, werden Deklarationen mit <code>let</code> nicht an den Anfang des Blocks verschoben (hoist). Wird eine Variable vor der Deklaration in einem Block referenziert, führt dies zu einem <code><a href="/de/docs/JavaScript/Reference/Global_Objects/ReferenceError">ReferenceError</a></code>, weil sich die Variable bei Eintritt in den Block bis zur Verarbeitung der Deklaration in einer "zeitweilig toten Zone" (temporal dead zone) befindet.</p>
+
+<pre class="brush: js">function do_something() {
+  console.log(foo); // ReferenceError
+  let foo = 2;
+}</pre>
+
+<p>Ein <a href="/de/docs/JavaScript/Reference/Statements/switch"><code>switch</code></a> Block besteht nur aus einem Block, so dass Fehler wie im folgenden Beispiel auftreten können.</p>
+
+<pre class="brush: js">switch (x) {
+  case 0:
+    let foo;
+    break;
+
+  case 1:
+    let foo; // SyntaxError für erneute Deklaration
+    break;
+}</pre>
+
+<h3 id="Ein_weiteres_Beispiel_zeitweilig_toter_Zonen_mit_lexikalischen_Gültigkeitsbereichen">Ein weiteres Beispiel zeitweilig toter Zonen mit lexikalischen Gültigkeitsbereichen</h3>
+
+<p>Aufgrund seines lexikalischen Gültigkeitsbereiches wird der Bezeichner<strong> "foo"</strong> im untenstehenden Ausdruck <code>(foo + 55)</code> als das foo <u>des if-Blocks</u> interpretiert, <strong>nicht</strong> aber als die <u>verdeckte Variable</u> foo mit dem Wert 33.<br>
+ Bei Auswertung des Ausdrucks existiert das foo <u>des if-Blocks</u> bereits im lexikalischen Gültigkeitsbereich, hat seine Initialisierung (welche Teil derselben Anweisung ist) aber noch nicht erreicht (und auch nicht <strong>abgeschlossen</strong>). Folglich ist es noch immer in seiner zeitweilig toten Zone.</p>
+
+<pre class="brush: js example-bad line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">test</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span>
+   <span class="keyword token">var</span> foo <span class="operator token">=</span> <span class="number token">33</span><span class="punctuation token">;</span>
+   <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="boolean token">true</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="keyword token">let</span> foo <span class="operator token">=</span> <span class="punctuation token">(</span>foo <span class="operator token">+</span> <span class="number token">55</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// ReferenceError</span>
+   <span class="punctuation token">}</span>
+<span class="punctuation token">}</span>
+<span class="function token">test</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Dieses Phänomen kann in einer Situation wie der folgenden verwirren. Die Anweisung <code>let n of n.a</code> gehört bereits zum eigenen Gültigkeitsbereich <u>des Blocks der for-Schleife</u>. Der Bezeichner<strong> "n.a"</strong> wird als Eigenschaft 'a' des Objektes 'n' interpretiert, <u>welches im ersten Teil derselben Anweisung deklariert wird</u> ("let n"). Dieses befindet sich noch immer in seiner zeitweilig toten Zone, da bei Auswertung des Ausdrucks die Deklarationsanweisung als noch nicht erreicht und <strong>abgeschlossen</strong> gilt.</p>
+
+<pre class="brush: js example-bad line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">go</span><span class="punctuation token">(</span><span class="parameter token">n</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="comment token">// n here is defined!</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>n<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Object {a: [1,2,3]}</span>
+
+  <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">let</span> n <span class="keyword token">of</span> n<span class="punctuation token">.</span>a<span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="comment token">// ReferenceError</span>
+    console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>n<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span>
+
+<span class="function token">go</span><span class="punctuation token">(</span><span class="punctuation token">{</span>a<span class="punctuation token">:</span> <span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">,</span> <span class="number token">2</span><span class="punctuation token">,</span> <span class="number token">3</span><span class="punctuation token">]</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Nicht-standardisierte_let_Ausdrücke">Nicht-standardisierte <code>let</code> Ausdrücke</h2>
+
+<h3 id="let_Blöcke"><code>let</code> Blöcke</h3>
+
+<div class="warning">
+<p>Die Unterstützung für <code>let</code> Blöcke wurde in Gecko 44 entfernt ({{bug(1167029)}}).</p>
+</div>
+
+<p><strong><code>let</code> Blöcke </strong>ermöglichen es Werte von Variablen in einem Block zu bearbeiten, ohne gleichnamige Variablen außerhalb des Blocks zu beeinflussen.</p>
+
+<h4 id="Syntax_2">Syntax</h4>
+
+<pre class="syntaxbox">let (var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]]) block;</pre>
+
+<h4 id="Beschreibung">Beschreibung</h4>
+
+<p>Der <code>let</code> Block unterstützt lokales Scoping für Variablen. Es funktioniert mit dem Binden von keiner oder mehreren Variablen im lexikalischen Scope eines einzigen Blocks. Ansonsten ist es genau das selbe wie ein Block Statement. Zu beachten ist, dass Variablen, die innerhalb des <code>let</code> Blocks mit <code>var</code> definiert werden auch außerhalb des Blocks verfügbar sind, weil diese an die Funktion gebunden werden. Wenn ein <code>let</code> Block-Syntax benutzt wird, ist das <code>let</code> gefolgt von runden Klammern zwingend notwendig. Fehler beim benutzen führen zu einem Syntaxerror.</p>
+
+<h4 id="Beispiel">Beispiel</h4>
+
+<pre class="brush:js">var x = 5;
+var y = 0;
+
+let (x = x+10, y = 12) {
+  console.log(x+y); // 27
+}
+
+console.log(x + y); // 5
+</pre>
+
+<p>Die Regeln für den Codeblock sind die gleichen wie für alle anderen Blöcke in JavaScript. Er hat seine Eigenen lokalen Variablen, die mit <code>let</code> deklariert sind.</p>
+
+<h4 id="Regeln_für_Gültigkeitsbereiche_3">Regeln für Gültigkeitsbereiche</h4>
+
+<p>Die Sichtbarkeit von mit <code>let</code> definierten Variablen ist der <code>let</code> Block selbst und auch jeder weitere innere Block in diesem Block, wenn die inneren Blöcke keine Variablen mit dem gleichen Namen definieren.</p>
+
+<h3 id="let_Ausdrücke"><code>let</code> Ausdrücke</h3>
+
+<div class="warning">
+<p>Die Unterstützung für <code>let</code> Blöcke wurde in Gecko 41 entfernt ({{bug(1023609)}}).</p>
+</div>
+
+<p>Der <strong><code>let</code> Ausdruck</strong> setzt die Sichtbarkeit einer Variablen auf nur einen Ausdruck.</p>
+
+<h4 id="Syntax_3">Syntax</h4>
+
+<pre class="syntaxbox">let (var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]]) expression;</pre>
+
+<h4 id="Beispiel_2">Beispiel</h4>
+
+<p>Man kann <code>let</code> benutzen, um Variablen nur für einen Ausdruck zu benutzen:</p>
+
+<pre class="brush: js">var a = 5;
+let(a = 6) console.log(a); // 6
+console.log(a); // 5</pre>
+
+<h4 id="Regeln_für_Gültigkeitsbereiche_4">Regeln für Gültigkeitsbereiche</h4>
+
+<p>Gegeben ist folgender <code>let</code> Ausdruck:</p>
+
+<pre class="eval">let (<var>decls</var>) <var>expr</var>
+</pre>
+
+<p>Es wird ein impliziter Block um <var>expr</var> erstellt.</p>
+
+<h2 id="Name">Name</h2>
+
+<p>Die Erklärung, daß <strong>let</strong> von englisch "to let sth. be sth." abgeleitet ist und so "<strong>let</strong>" als Name (reserviertes Wort) ausgewählt wurde, ist <a href="https://stackoverflow.com/questions/37916940/js-why-let-have-this-name">hier (englisch)</a> zu finden.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initiale Definition. Definiert keine let Ausdrücke und let Blöcke.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(41.0)}}</td>
+   <td>12</td>
+   <td>{{ CompatGeckoDesktop(44) }}</td>
+   <td>11</td>
+   <td>17</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Temporal dead zone</td>
+   <td>{{CompatUnknown}}</td>
+   <td>12</td>
+   <td>{{ CompatGeckoDesktop(35) }}</td>
+   <td>11</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>let</code> expression {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>let</code> block {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Allowed in {{Glossary("sloppy mode")}}</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(44)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(41.0)}}</td>
+   <td>{{ CompatGeckoMobile(44) }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(41.0)}}</td>
+  </tr>
+  <tr>
+   <td>Temporal dead zone</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile(35) }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>let</code> expression {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>let</code> block {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Allowed in {{Glossary("sloppy mode")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td>{{CompatGeckoDesktop(44)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(49.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Firefox-spezifische_Hinweise">Firefox-spezifische Hinweise</h2>
+
+<ul>
+ <li>Vor SpiderMonkey 46 {{geckoRelease(46)}}, wurde ein {{jsxref("TypeError")}} statt einem {{jsxref("SyntaxError")}} erzeugt, wenn Neudeklarationen durchgeführt wurden ({{bug(1198833)}}, {{bug(1275240)}}).</li>
+ <li>Vor SpiderMonkey 44 {{geckoRelease(44)}}, war <code>let</code> nur in Quelltexten verfügbar, die im HTML durch ein <code>&lt;script type="application/javascript;version=1.7"&gt;</code> Block umfasst wurden (oder höhere Versionen) und hatte eine andere Semantik.</li>
+ <li>Die Unterstützung in {{domxref("Worker")}} Codes ist hinter dem <code>dom.workers.latestJSVersion</code> flag versteckt ({{bug(487070)}}). Mit versionsfreiem <code>let</code>, wird das Flag für diese Funktion entfernt ({{bug(1219523)}}).</li>
+ <li>ES2015-Einhaltung für <code>let</code> für SpIderMonkey wird in {{bug(950547)}} nachverfolgt.</li>
+</ul>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Statements/var"><code>var</code></a></li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Statements/const"><code>const</code></a></li>
+ <li><a href="https://hacks.mozilla.org/2015/07/es6-in-depth-let-and-const/">ES6 In Depth: <code>let</code> and <code>const</code></a><a href="http://stackoverflow.com/questions/37916940/js-why-let-have-this-name"> (englisch)</a></li>
+ <li><a href="https://blog.mozilla.org/addons/2015/10/14/breaking-changes-let-const-firefox-nightly-44/">Breaking changes in <code>let</code> and <code>const</code> in Firefox 44 </a> <a href="http://stackoverflow.com/questions/37916940/js-why-let-have-this-name"> (englisch)</a></li>
+ <li><a href="https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20%26%20closures/ch3.md">You Don't Know JS: Scope &amp; Closures: Chapter 3: Function vs. Block Scope </a> <a href="http://stackoverflow.com/questions/37916940/js-why-let-have-this-name"> (englisch)</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/statements/return/index.html b/files/de/web/javascript/reference/statements/return/index.html
new file mode 100644
index 0000000000..aff9552712
--- /dev/null
+++ b/files/de/web/javascript/reference/statements/return/index.html
@@ -0,0 +1,192 @@
+---
+title: return
+slug: Web/JavaScript/Reference/Statements/return
+tags:
+  - JavaScript
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/return
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Die <strong><code>return</code> </strong> Anweisung beendet einen Funktionsaufruf und spezifiziert einen Wert, der von der Funktion zum Aufrufer zurückgegeben wird.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">return [[expression]]; </pre>
+
+<dl>
+ <dt><code>expression</code></dt>
+ <dd>Ausdruck, der zurückgegeben wird. Wenn er weggelassen wird, wird <code>undefined</code> zurückgegeben.</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Wenn in einer Funktion eine <code>return</code> Anweisung aufgerufen wird, wird der Aufruf der Funktion gestoppt. Wenn ein Rückgabewert spezifiziert ist, wird dieser zu der aufrufenden Funktion zurückgegeben. Wenn kein Rückgabewert angegeben wird, wird stattdessen <code>undefined</code> zurückgegeben. Die folgenden <code>return</code> Anweisungen unterbrechen alle den Funktionsaufruf:</p>
+
+<pre class="brush: js">return;
+return true;
+return false;
+return x;
+return x + y / 3;
+</pre>
+
+<h3 id="Automatische_Semikolon-Einfügung">Automatische Semikolon-Einfügung</h3>
+
+<p>Die <code>return</code> Anweisung wird von der <a href="/de/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">automatischen Semikolon-Einfügung (Automatic semicolon insertion, kurz ASI)</a> beeinflusst. Es ist kein Zeilenumbruch zwischen dem <code>return</code> Schlüsselwort und dem nachfolgenden Ausdruck erlaubt.</p>
+
+<pre class="brush: js">return
+a + b;
+</pre>
+
+<p>wird durch ASI umgewandelt in:</p>
+
+<pre>return;
+a + b;
+</pre>
+
+<p>Die Konsole wird folgende Warnung ausgeben: "unreachable code after return statement".</p>
+
+<div class="note">Mit Gecko 40 {{geckoRelease(40)}}, wird eine Warnung in der Konsole ausgegeben, wenn Quelltext gefunden wird, der nach einer return Anweisung steht.</div>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="return">return</h3>
+
+<p>Die folgende Funktion gibt das Quadrat von <code>x</code> zurück. Dabei ist <code>x</code> eine Zahl.</p>
+
+<pre class="brush: js">function square(x) {
+   return x * x;
+}
+</pre>
+
+<h3 id="Unterbrechen_einer_Funktion">Unterbrechen einer Funktion</h3>
+
+<p>Eine Funktion stoppt die Ausführung, wenn <code>return</code> aufgerufen wird.</p>
+
+<pre class="brush: js">function counter() {
+  for (var count = 1; ; count++) {  // infinite loop
+    console.log(count + "A"); // until 5
+      if (count === 5) {
+        return;
+      }
+      console.log(count + "B");  // until 4
+    }
+  console.log(count + "C");  // never appears
+}
+
+counter();
+
+// Output:
+// 1A
+// 1B
+// 2A
+// 2B
+// 3A
+// 3B
+// 4A
+// 4B
+// 5A
+</pre>
+
+<h3 id="Funktion_als_Rückgabewert">Funktion als Rückgabewert</h3>
+
+<p>Sie dazu auch im Artikel <a href="/de/docs/Web/JavaScript/Closures">Closures</a>.</p>
+
+<pre class="brush: js">function magic(x) {
+  return function calc(x) { return x * 42 };
+}
+
+var answer = magic();
+answer(1337); // 56154
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.9', 'Return statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-return-statement', 'Return statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-return-statement', 'Return statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Functions" title="En/Core_JavaScript_1.5_Reference/Functions">Functions</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Closures">Closures</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/statements/switch/index.html b/files/de/web/javascript/reference/statements/switch/index.html
new file mode 100644
index 0000000000..e53dc84fbe
--- /dev/null
+++ b/files/de/web/javascript/reference/statements/switch/index.html
@@ -0,0 +1,289 @@
+---
+title: switch
+slug: Web/JavaScript/Reference/Statements/switch
+tags:
+  - JavaScript
+  - Reference
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/switch
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Die <strong>switch Anweisung</strong> wertet einen <a href="/de/docs/Web/JavaScript/Guide/Expressions_and_Operators">Ausdruck</a> aus. Diese Auswertung wird mit einer case Klausel verglichen und (bei Übereinstimmung) die entsprechenden <a href="/de/docs/Web/JavaScript/Reference/Statements">Anweisungen</a> ausgeführt.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">switch (expression) {
+  case value1:
+    // Anweisungen werden ausgeführt,
+    // falls <em>expression</em> mit value1 übereinstimmt
+    [break;]
+  case value2:
+    // Anweisungen werden ausgeführt,
+    // falls <em>expression</em> mit value2 übereinstimmt
+    [break;]
+  ...
+  case valueN:
+    // Anweisungen werden ausgeführt,
+    // falls <em>expression</em> mit valueN übereinstimmt
+    [break;]
+  default:
+    // Anweisungen werden ausgeführt,
+    // falls keine der case-Klauseln mit <em>expression</em> übereinstimmt
+    [break;]
+}</pre>
+
+<dl>
+ <dt><code>expression</code></dt>
+ <dd>Ausdruck, der mit jeder case Klausel verglichen wird.</dd>
+ <dt><code>case valueN</code></dt>
+ <dd>Der Wert einer case Klausel wird mit <code>expression</code> verglichen.</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Ein switch Statement wertet als erstes den Ausdruck aus. Danach wird nach der ersten <code>case</code> Klausel gesucht, die zu dem gleichen Wert ausgewertet wird wie der erste Ausdruck im <code>switch</code> (mit <a href="/de/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Identität_strikte_Gleichheit_()">striktem Vergleich</a>, <code>===</code> ) und springt im Kontrollfluss zu der Klausel und führt die dort geschriebenen Statements aus. (Bei mehrfachen Übereinstimmungen springt das Programm zu der ersten gefundenen Klausel, auch wenn die gefunden Klausen nicht gleich sind.) Falls keine übereinstimmende <code>case</code> Klausel gefunden wird, sucht das Programm die optionale <code>default</code> Klausel und führt, wenn diese Klausel existiert, die Anweisungen in der Klausel aus. Wenn keine <code>default</code> Klausel vorhanden ist, wird das Programm nach dem switch Statement fortgesetzt. Konventionell ist die <code>default</code> Klausel die letzte Klausel, das muss aber nicht so sein.</p>
+
+<p>Die optionale <a href="/de/docs/Web/JavaScript/Reference/Statements/break" style="font-family: Consolas, Monaco, 'Andale Mono', monospace;" title="JavaScript/Reference/Statements/break">break</a> Anweisung in jedem <code>case</code> Block weist das Programm an die switch Anweisung zu beenden. Das Programm macht dann mit der Anweisung weiter, die dem Ende der switch Anweisung folgt. Wird die <code>break</code> Anweisung weggelassen, dann macht das Programm linear weiter; es wird die nächste Anweisung ausgeführt.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Verwendung_von_switch">Verwendung von <code>switch</code></h3>
+
+<p>Betrachten wir das folgende Beispiel. Falls <code>expr</code> zu "Bananas" ausgewertet wird, dann springt das Programm zu der case Klausel "Bananas" und führt die entsprechenden Anweisungen aus. Die <code>break</code> Anweisung füht dazu, dass das Programm die switch Anweisung verlässt und mit der ersten Anweisung weitermacht, die dem Ende der switch Anweisung folgt.<br>
+ Hätte man <code>break</code> weggelassen, dann hätte das Programm die Anweisungen der case Klausel "Cherries" ausgeführt.</p>
+
+<pre class="brush: js">switch (expr) {
+  case "Oranges":
+    console.log("Oranges are $0.59 a pound.");
+    break;
+  case "Apples":
+    console.log("Apples are $0.32 a pound.");
+    break;
+  case "Bananas":
+    console.log("Bananas are $0.48 a pound.");
+    break;
+  case "Cherries":
+    console.log("Cherries are $3.00 a pound.");
+    break;
+  case "Mangoes":
+  case "Papayas":
+    console.log("Mangoes and papayas are $2.79 a pound.");
+    break;
+  default:
+    console.log("Sorry, we are out of " + expr + ".");
+}
+
+console.log("Is there anything else you'd like?");
+</pre>
+
+<h3 id="Was_passiert_falls_man_eine_break_Anweisung_weglässt">Was passiert, falls man eine <code>break</code> Anweisung weglässt?</h3>
+
+<p>Falls man eine break Anweisung vergisst, dann führt das Programm sowohl die übereinstimmende case Klausel als auch die darauf folgende case Klausel aus, unabhängig des Wertes der case Klausel.</p>
+
+<p>Im Allgemeinen fährt das Programm linear fort bis es auf eine <code>break</code> Anweisung stößt. Falls keine <code>break</code> Anweisung vorhanden ist, dann werden alle Anweisungen bis zum Ende der <code>switch</code> Anweisung ausgeführt.</p>
+
+<pre class="brush: js">var foo = 0;
+switch (foo) {
+  case -1:
+    console.log('negative 1');
+    break;
+  case 0: // foo ist 0 - diese case-Klausel wird ausgeführt
+    console.log(0)
+    // HINWEIS: <code>break</code> Anweisung wurde hier weggelassen
+  case 1: // Da keine break Anweisung in 'case 0:'
+          // wird diese Klausel ebenfalls ausgeführt,
+          // obwohl der Wert nicht mit dem Ausdruck von
+          // switch übereinstimmt
+    console.log(1);
+    break; // das Programm verlässt die switch Anweisung.
+           // 'case 2:' wird nicht ausgeführt
+  case 2:
+    console.log(2);
+    break;
+  default:
+    console.log('default');
+}</pre>
+
+<h3 id="Techniken_für_case_Klauseln_mit_mehr_als_einem_Kriterium">Techniken für case Klauseln mit mehr als einem Kriterium</h3>
+
+<p>Die Quelle der erwähnten Methode kann hier aufgerufen werden (auf Englisch):<br>
+ <a href="http://stackoverflow.com/questions/13207927/switch-statement-multiple-cases-in-javascript">Switch statement multiple cases in JavaScript (Stack Overflow)</a></p>
+
+<h4 id="Mehrere_case_Klauseln_mit_einer_einfachen_Anweisung">Mehrere case Klauseln mit einer einfachen Anweisung</h4>
+
+<p>Diese Technik macht es sich zum Vorteil, dass das Programm einfach bei der nächsten case Klausel weitermacht, wenn man die <code>break</code> Anweisung weglässt. Siehe Abschnitt "Was passiert, falls ich eine <code>break</code> Anweisung weglasse?"</p>
+
+<p>Dieses Beispiel zeigt eine einfache Operation, die für alle entsprechenden case Klauseln ausgeführt wird ('Cow', 'Giraffe', 'Dog', 'Pig').</p>
+
+<pre class="brush: js">var Animal = 'Giraffe';
+switch (Animal) {
+  case 'Cow':
+  case 'Giraffe':
+  case 'Dog':
+  case 'Pig':
+    console.log('This animal will go on Noah\'s Ark.');
+    break;
+  case 'Dinosaur':
+  default:
+    console.log('This animal will not.');
+}</pre>
+
+<h4 id="Mehrere_case_Klauseln_mit_mehreren_Anweisungen">Mehrere case Klauseln mit mehreren Anweisungen</h4>
+
+<p>Dieses Beispiel zeigt wie mehrere Anweisungen verschiedener case Klauseln ausgeführt werden.<br>
+ Die case Klauseln werden in geschriebener Reihenfolge ausgeführt, also unabhängig jeglicher Ordnung der Ausdrücke der case Klauseln.</p>
+
+<pre class="brush: js">var foo = 1;
+var output = 'Output: ';
+switch (foo) {
+  case 10:
+    output += 'So ';
+  case 1:
+    output += 'What ';
+    output += 'Is ';
+  case 2:
+    output += 'Your ';
+  case 3:
+    output += 'Name';
+  case 4:
+    output += '?';
+    console.log(output);
+    break;
+  case 5:
+    output += '!';
+    console.log(output);
+    break;
+  default:
+    console.log('Please pick a number from 0 to 6!');
+}</pre>
+
+<p>Mögliche Ergebnisse:</p>
+
+<table class="standard-table" style="height: 270px; width: 522px;">
+ <tbody>
+  <tr>
+   <th scope="col">Wert</th>
+   <th scope="col">Ausgabe</th>
+  </tr>
+  <tr>
+   <td>10</td>
+   <td>Output: So What Is Your Name?</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>Output: What Is Your Name?</td>
+  </tr>
+  <tr>
+   <td>2</td>
+   <td>Output: Your Name?</td>
+  </tr>
+  <tr>
+   <td>3</td>
+   <td>Output: Name?</td>
+  </tr>
+  <tr>
+   <td>4</td>
+   <td>Output: ?</td>
+  </tr>
+  <tr>
+   <td>5</td>
+   <td>Output: !</td>
+  </tr>
+  <tr>
+   <td><em>Alle anderen Werte</em></td>
+   <td><span style="background-color: rgba(212, 221, 228, 0.14902);">Please pick a number from 0 to 6!</span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initiale Definition.<br>
+    Implementiert in JavaScript 1.2</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.11', 'switch statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-switch-statement', 'switch statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Unterstützt</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Unterstützt</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Statements/if...else"><code>if...else</code></a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/statements/throw/index.html b/files/de/web/javascript/reference/statements/throw/index.html
new file mode 100644
index 0000000000..e022b01b54
--- /dev/null
+++ b/files/de/web/javascript/reference/statements/throw/index.html
@@ -0,0 +1,256 @@
+---
+title: throw
+slug: Web/JavaScript/Reference/Statements/throw
+tags:
+  - Ausnahmen
+  - JavaScript
+  - exceptions
+  - throw
+translation_of: Web/JavaScript/Reference/Statements/throw
+---
+<div>
+<div>{{jsSidebar("Statements")}}</div>
+</div>
+
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+
+<p>Die <strong><code>throw</code> Anweisung</strong> "wirft" eine benutzerdefinierte Exception (Ausnahme). Die Programmausführung der aktuellen Funktion bzw. des globalen Codes wird angehalten (Anweisungen nach <code>throw</code> werden dann nicht mehr ausgeführt), und die Programmausführung wird an den nächsthöheren <a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch"><code>catch</code></a> Block in der Ausführungshierarchie übergeben. Falls in der gesamten Ausführungschierarchie kein <code>catch</code> Block definiert wurde, wird das Programm komplett angehalten.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">throw <em>ausdruck</em>; </pre>
+
+<dl>
+ <dt><code>ausdruck</code></dt>
+ <dd>Die zu werfende Ausnahme.</dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Verwenden Sie die <code>throw</code> Anweisung, um eine Ausnahme zu werfen. Wenn Sie eine Ausnahme werfen,  bestimmt <code>ausdruck</code> den Typ der Ausnahme. Als Typ können Objekte (siehe Beispiel unten), als auch skalare Werte, wie Zeichenketten, Zahlen und boolesche Werte verwendet werden. Folgende Beispiele werfen jeweils eine Ausnahme:</p>
+
+<pre class="brush: js">throw "Fehler"; // erzeugt Ausnahme mit dem Wert "Fehler" (als String)
+throw 42;       // erzeugt Ausnahme mit dem Wert 42 (als Integer)
+throw true;     // erzeugt Ausnahme mit dem Wert TRUE (als boolescher Wert)</pre>
+
+<p>Beachten Sie auch, dass die <code>throw</code>-Anweisung von der <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">automatic semicolon insertion (ASI)</a> betroffen ist und daher kein Zeilenumbruch zwischen dem <code>throw</code> Schlüsselwort und dem Ausdruck zulässig ist.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Objekt_als_Ausnahme_werfen">Objekt als Ausnahme werfen</h3>
+
+<p>Als Ausnahme kann auch ein Objekt geworfen werden. Auf Eigenschaften des geworfenen Objektes kann dann im <code>catch</code> Block zugegriffen werden. Im folgenden Beispiel wird in der Funktion <code>divide</code> versucht Zahl <code>n</code> durch <code>m</code> zu dividieren. Falls <code>m</code> die Zahl 0 ist, wird ein Objekt (als Funktion) vom Typ <code>DivisionException</code> erzeugt und als Ausnahme geworfen, da Teilen durch 0 nicht möglich ist.</p>
+
+<pre class="brush: js">function DivisionException(message) {
+  this.message = message;
+  this.name = "DivisionException";
+}
+
+function divide(n, m) {
+  if (m == 0) {
+    throw new DivisionException("Teilen durch Null nicht möglich");
+  }
+
+  return n / m;
+}
+
+try {
+  // versuche 5 / 2 zu teilen
+  alert(divide(5, 2));  // 2.5
+
+  // versuche 5 / 0 zu teilen
+  var ausgabe = divide(5, 0);
+
+  // diese Zeile wird nie erreicht
+  alert(ausgabe);
+}
+catch (e) {
+  // "DivisionException: Teilen durch Null nicht möglich"
+  alert(e.name + ": " + e.message);
+}
+</pre>
+
+<p>Ausnahmen werden in der Regel als Funktionen definiert und mit dem <code>new</code> Schlüsselwort als Objekte instantiiert, da es in JavaScript kein direktes Konzept von Konstruktoren gibt, wie in anderen Programmiersprachen. Die Funktion dient dann selbst als Konstruktor. Falls in der <code>catch</code> Anweisung keine Unterscheidung der Ausnahme benötigt wird (z. B. mit Hilfe des <code>instanceof</code> Operators - siehe Beispiel unten), kann das Objekt direkt übergeben werden. Aus praktischen Gründen kann im geworfenen Objekt die Methode <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Object/toString">toString</a> definiert werden, um es später einfacher ausgeben zu können:</p>
+
+<pre class="brush: js">try {
+  throw {
+    name: "MyException",
+    message: "Something is wrong",
+    toString: function() {
+      return this.name + ": " + this.message;
+    }
+  };
+}
+catch (e) {
+  alert(e); // "MyException: Something is wrong"
+}</pre>
+
+<h3 id="Unterschiedliche_Ausnahmen_werfen_und_unterscheiden">Unterschiedliche Ausnahmen werfen und unterscheiden</h3>
+
+<p>Es ist möglich unterschiedliche Ausnahmen in einem try Block zu werfen und im dazugehörigen catch Block abzufangen. Dies erlaubt ein gezielteres Abfangen von Ausnahmen.</p>
+
+<pre class="brush: js">function myException(message) {
+  this.message = message;
+};
+
+function myOtherException(text) {
+  this.text = text;
+};
+
+var exceptions = [
+  "Don't panic! Where is my towel?",
+  42,
+  new myException("So long, and thanks for all the fish!"),
+  new myOtherException("Deep Thought is still watching..."),
+];
+
+for (var i=0; i &lt; exceptions.length; i++) {
+  try {
+    throw exceptions[i];
+  }
+  catch (e) {
+    if (typeof e === "string") {
+      alert('String exception: ' + e);
+    }
+    else if (typeof e === "number") {
+      alert('Number exception: ' + e);
+    }
+    else if (typeof e === "object")
+    {
+      if (e instanceof myException) {
+        alert("myException: " + e.message);
+      }
+      else if (e instanceof myOtherException) {
+        alert("myOtherException: " + e.text);
+      }
+    }
+  }
+}
+</pre>
+
+<h3 id="Abgefangene_Ausnahmen_neu_werfen">Abgefangene Ausnahmen neu werfen</h3>
+
+<p>Die <code>throw</code> Anweisung kann auch innerhalb eines <code>catch</code> Blocks verwendet werden, um eine neue oder die bereits abgefangene Ausnahme erneut zu werfen. Alle Anweisungen folgenden Anweisungen im <code>catch</code> Block werden wieder nicht ausgeführt und die neu geworfene Ausnahme wird an die nächsthöheren <code>catch</code> Block übergeben. Somit können "Ebenen" entworfen werden, die jeweils nur bestimmte Ausnahmen behandeln.</p>
+
+<p>Folgender Quelltext zeigt <code>"myException: This is an exception!"</code> an, da der innere <code>catch</code> Block nicht für Ausnahmen vom Typ <code>myOtherException</code> zuständig ist und daher diese eine Ebene nach oben weiterleitet.</p>
+
+<pre class="brush: js">function myException(message) {
+  this.message = message;
+};
+
+function myOtherException(text) {
+  this.text = text;
+};
+
+try {
+  try {
+    throw new myOtherException("This is an exception!");
+  }
+  catch (e) {
+    if (e instanceof myException) {
+      alert("myException: " + e.message);  // wird nicht ausgeführt
+    } else {
+      throw e;  // eine Ebene nach oben weiterleiten
+    }
+  }
+}
+catch (e) {
+  alert("myException: " + e.text);
+}
+</pre>
+
+<div class="note">
+<p>Falls eine Exception durch keinen catch Block abgefangen wird, wird die Ausnahme in der JavaScript Konsole ausgegeben und die Programmausführung komplett unterbrochen.</p>
+</div>
+
+<p> </p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initiale Definition. Implementiert in JavaScript 1.4</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.13', 'throw statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-throw-statement', 'throw statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-throw-statement', 'throw statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch"><code>try...catch</code></a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/statements/try...catch/index.html b/files/de/web/javascript/reference/statements/try...catch/index.html
new file mode 100644
index 0000000000..d86c0c8120
--- /dev/null
+++ b/files/de/web/javascript/reference/statements/try...catch/index.html
@@ -0,0 +1,382 @@
+---
+title: try...catch
+slug: Web/JavaScript/Reference/Statements/try...catch
+translation_of: Web/JavaScript/Reference/Statements/try...catch
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Die <strong>try...catch</strong>-Anweisung (sinngemäß: testen und verarbeiten) rahmt einen Block von Anweisungen (<em>try statements)</em> ein und legt Reaktionen (<em>catch statementes</em>) fest, die im Fehlerfall ausgeführt werden.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">try {
+   <em>try_Anweisungen</em>
+}
+[catch (<em>Fehler_var_1</em> if <em>Bedingung_1</em>) { // nicht Standard
+   <em>catch_Anweisungen</em>
+}]
+...
+[catch (<em>Fehler_var_2</em>) {
+   <em>catch_Anweisungen_2</em>
+}]
+[finally {
+   <em>finally_Anweisungen</em>
+}]
+</pre>
+
+<dl>
+ <dt><code>try_Anweisungen</code></dt>
+ <dd>Die auszuführenden Anweisungen.</dd>
+</dl>
+
+<dl>
+ <dt><code>catch_Anweisungen_1</code>, <code>catch_Anweisungen_2</code></dt>
+ <dd>Anweisungen, die ausgeführt werden, wenn bei den <code>try</code>-Anweisungen ein Fehler auftritt.</dd>
+</dl>
+
+<dl>
+ <dt><code>Fehler_var_1</code>, <code>Fehler_var_2</code></dt>
+ <dd>Ein Bezeichner der das Fehlerobjekt des zugehörigen <code>catch</code>-Abschnitts enthält.</dd>
+</dl>
+
+<dl>
+ <dt><code>Bedingung_1</code></dt>
+ <dd>Ein Bedingungsausdruck.</dd>
+</dl>
+
+<dl>
+ <dt><code>finally_Anweisungen</code></dt>
+ <dd>Die Schlussanweisungen werden nach den <code>try</code>-Anweisungen ausgeführt. Die Anweisungen werden immer ausgeführt, auch wenn ein Fehler ausgegeben wurde. </dd>
+</dl>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Der <em>try</em>-Block besteht aus einer oder mehreren Anweisungen (der Absschnitt steht – auch bei nur einer Zeile – immer in geschweiften Klammern {}), mindestens einem <em>catch</em>- oder einem <em>finally</em>-Abschnitt oder beiden. Es gibt also drei Arten von <em>try</em>-Anweisungen:</p>
+
+<ol>
+ <li><code>try...catch</code></li>
+ <li><code>try...finally</code></li>
+ <li><code>try...catch...finally</code></li>
+</ol>
+
+<p>Der <code>catch</code>-Abschnitt enthält Anweisungen, die ausgeführt werden, wenn im <code>try</code>-Abschnitt ein Fehler auftritt. Bei einer fehlerhaften Anweisung im Block im <code>try</code>-Abschnitt – oder in Funktionen, die von dort aufgerufen werden – geht die Kontrolle sofort an den <code>catch</code>-Abschnitt über. Wird kein Fehler gemeldet wird der <code>catch</code>-Abschnitt nicht ausgeführt.</p>
+
+<p>Der <code>finally</code>-Abschnitt wird nach dem <code>try</code>- und <code>catch</code>-Abschnitt ausgeführt. Der Abschnitt wird immer ausgeführt, egal ob ein Fehler aufgetreten ist oder nicht.</p>
+
+<p>Mehrere <code>try</code>-Anweisungen können verschachtelt werden. Wenn ein innerer <code>try</code>-Block keinen <code>catch</code>-Abschnitt hat, wird der <code>catch</code>-Abschnitt des nächsthöheren <code>try</code>-Blocks ausgeführt.</p>
+
+<p>Mit der try-Anweisungen können auch JavaScript-Fehler bearbeitet werden. Mehr zur Fehlerbearbeitung in JavaScript steht im <a href="/en-US/docs/Web/JavaScript/Guide" title="en/JavaScript/Guide">JavaScript Guide</a>.</p>
+
+<h3 id="Unbhängiger_catch-Abschnitt">Unbhängiger <code>catch-Abschnitt</code></h3>
+
+<p>Wenn mit einem einzelnen, ungebundenen <code>catch</code>-Abschnitt gearbeitet wird, dann wird der catch-Block bei jedem Fehler durchlaufen. Wenn der Fehler im folgenden Beispiel-Code auftritt geht die Kontrolle an den <code>catch</code>-Abschnitt über.</p>
+
+<pre class="brush: js">try {
+   throw "myException"; // Fehler wird ausgelöst
+}
+catch (e) {
+   // Anweisungen für jeden Fehler
+   logMyErrors(e); // Fehler-Objekt an die Error-Funktion geben
+}
+</pre>
+
+<p>Im <code>catch</code>-Block wird ein Bezeichner festgelegt (e im Beispiel), die den Wert enthält, der durch die <code>throw</code>-Anweisung entstanden ist. Der catch-Block ist besonders, weil er zu Beginn der Ausführung einen Bezeichner anlegt, der für den gesamten Block gilt. Wenn der catch-Block abgearbeitet ist steht der Bezeichner nicht mehr zur Verfügung.</p>
+
+<h3 id="Abhängige_catch-Abschnitte">Abhängige <code>catch</code>-Abschnitte</h3>
+
+<p>{{non-standard_header}}</p>
+
+<p>Mehrere abhängige catch-Abschnitte können spezifische Fehler bearbeiten. In diesem Fall wird der passende catch-Abschnitt aufgerufen, wenn der zugehörige Fehler aufgetreten ist. Im folgenden Beispiel kann der Code im <code>try</code>-Block drei mögliche Fehler ausgeben: {{jsxref("TypeError")}}, {{jsxref("RangeError")}}, and {{jsxref("EvalError")}} (Typ-Fehler, Bereich-Fehler und Rechenfehler). Wenn ein Fehler auftritt geht die Kontrolle an den zugehörigen <code>catch</code>-Abschnitt. Wenn dem Fehler kein catch-Abschnitt entspricht und ein unabhäniger <code>catch</code>-Abschnitt vorhanden ist, geht die Kontrolle an ihn.</p>
+
+<p>Wenn mehrere abhängige catch-Abschnitt mit einem unabhängigen kombiniert werden, muss der unabhängige Abschnitt am Ende stehen: er fängt sonst alle Fehlertypen ab bevor sie die eigenen, abhängigen Abschnitte erreichen.</p>
+
+<p>Zu Erinnerung: diese Funktionalität ist kein Teil der ECMAScript-Spezifikation.</p>
+
+<pre class="brush: js">try {
+    myroutine(); // erzeugt drei mögliche Fehlertypen
+} catch (e if e instanceof TypeError) {
+    // Anweisungen für die verschiedenen Fehlertypen
+} catch (e if e instanceof RangeError) {
+    // Anweisungen für Bereichsfehler
+} catch (e if e instanceof EvalError) {
+    // Anweisungen für Berechnungsfehler
+} catch (e) {
+    // Anweisungen für nicht festgelegte Fehlertypen
+    logMyErrors(e); // Objekt an die Fehler-Funktion geben
+}
+</pre>
+
+<p>Das nächste Beispiel zeigt, wie die gleichen "abhängigen <code>catch</code>-Abschnitte" aussehen, wenn einfaches JavaScript benutzt wird, das den ECMAScript-Spezifikationen entspricht (etwas umfangreicher, funktioniert aber genauso).</p>
+
+<pre class="brush: js">try {
+    myroutine(); // erzeugt drei mögliche Fehlertypen
+} catch (e) {
+    if (e instanceof TypeError) {
+        // Anweisungen für die verschiedenen Fehlertypen
+    } else if (e instanceof RangeError) {
+        // Anweisungen für Bereichsfehler
+    } else if (e instanceof EvalError) {
+        // Anweisungen für Berechnungsfehler
+    } else {
+       // Anweisungen für nicht festgelegte Fehlertypen
+       logMyErrors(e); // Objekt an die Fehler-Funktion geben
+    }
+}
+</pre>
+
+<h3 id="Der_Fehler-Bezeichner">Der Fehler-Bezeichner</h3>
+
+<p>Wenn im try-Block ein Fehler auftritt, enthält die <em>exception_var</em> (z.B. das e in catch(e)) den Wert, der durch die <em>throw</em>-Anweisung erzeugt wird. Mit diesem Bezeichner können also Informationen über den Fehler gewonnen werden.</p>
+
+<p>Der Bezeichner gilt nur innerhalb des <code>catch</code>-Abschnitts. Er wird zu Beginn des Abschnitts angelegt und steht nach der Abarbeitung nicht mehr zur Verfügung.</p>
+
+<h3 id="Der_finally-Abschnitt">Der finally-Abschnitt</h3>
+
+<p>Zum Abschluss-Abschnitt (<code>finally</code>) gehören die Anweisungen, die nach dem <code>try</code>- und dem <code>catch</code>-Block ausgeführt werden, noch bevor irgenwelche Anweisugnen nach den <code>try-/catch-/finally</code>-Abschnitten ausgeführt werden. Der finally-Abschnitt wird immer ausgeführt, auch wenn bei der Verarbeitung ein Fehler aufgetreten ist. Er wird auch ausgeführt, wenn kein catch-Abschnitt den Fehler bearbeitet. Der finally-Abschnitt kann dabei helfen, das eigene Script im Fehlerfall anständig zu beenden. Dort können zum Beispiel für ein übergreifendes Aufräumen Ressourcen wieder freigegeben werden, die durch das Script gebunden wurden.</p>
+
+<p>Vielleicht sieht ein Abschnitt, der sich auf Fehler bezieht, aber UNABHÄNGIG vom tatsächlichen Auftreten eines Fehlers immer ausgeführt wird, merkwürdig aus. Aber dieses Konstrukt dient tatsächlich einem Zweck. Wichtig dabei ist nicht, dass der <code>finally</code>-Abschnitt immer aussgeführt wird, sonder das der normale Code nach einem try...catch NICHT ausgeführt wird. Wenn zum Beispiel in einem catch-Abschnitt, der zu einem try-Block gehört, ein Fehler auftritt, dann wird nichts von dem umgebenden Code ausgeführt, gleichgültig ob es ein umgebende try-catch-Blöcke oder normale Anweisungen sind. Die Kontrolle wird stattdessen an den catch-Abschnitt übergeben, der zum umgebenden try-Abschnitt gehört oder – wenn es den nicht gibt – an die interne Fehlerroutine. </p>
+
+<p>Auf diese Weise wird jeder nachfolgende Aufräum-Code im eingeschlossenen Abschnitt oder im normalen Programmablauf übersprungen. Wenn aber zum <code>try</code>-Abschnitt ein finally-Abschnitt gehört, dann kann in diesem Abschnitt aufgeräumt werden, bevor es in einen umgebenden <code>catch</code>-Abschnitt (oder den Fehlergenerator) geht, der dann den zweiten Fehler bearbeitet. </p>
+
+<p>Wenn unabhängig vom Erfolg des <code>try...catch-</code>Blocks aufgeräumt werden muss und der finally-Abschnitt nur nach einem Fehler ausgeführt würde, dann müsste der Aufräum-Code doppelt verwendet werden, innerhalb und außerhalb des finally-Abschnitts. Deshalb wird der finally-Block unabhängig von auftretenden Fehlern ausgeführt.</p>
+
+<p>Das folgende Beispiel öffnet eine Datei und führt dann Anweisungen aus, die mit der Datei arbeiten (server-seitiges JavaScript lässt den Zugriff auf Dateien zu).  Wenn ein Fehler ausgegeben wird solange die Datei geöffnet ist, dann schließt der <code>finally</code>-Abschnitt diese Datei bevor das Script stoppt. Der Code im Abschnitt wird auch bei <code>Returns</code> aus <code>try</code>- oder <code>catch</code>-Blöcken ausgeführt.</p>
+
+<pre class="brush: js">openMyFile()
+try {
+   // bindet eine Ressource
+   writeMyFile(theData);
+}
+finally {
+   closeMyFile(); // Ressource immer wieder frei geben
+}
+</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Verschachtelte_try-Blöcke">Verschachtelte try-Blöcke</h3>
+
+<p>Zuerst einmal untersuchen wir diese Beispiele:</p>
+
+<pre class="brush: js">try {
+  try {
+    throw new Error("oops");
+  }
+  finally {
+    console.log("finally");
+  }
+}
+catch (ex) {
+  console.error("outer", ex.message);
+}
+
+// Output:
+// "finally"
+// "outer" "oops"
+</pre>
+
+<p>Wenn wir den Fehler im inneren <code>try</code>-Block mit einem <code>catch</code>-Abschnitt bearbeiten</p>
+
+<pre class="brush: js">try {
+  try {
+    throw new Error("oops");
+  }
+  catch (ex) {
+    console.error("inner", ex.message);
+  }
+  finally {
+    console.log("finally");
+  }
+}
+catch (ex) {
+  console.error("outer", ex.message);
+}
+
+// Output:
+// "inner" "oops"
+// "finally"
+</pre>
+
+<p>Und jetzt wird der Fehler im catch-Abschnitt noch einmal produziert:</p>
+
+<pre class="brush: js">try {
+  try {
+    throw new Error("oops");
+  }
+  catch (ex) {
+    console.error("inner", ex.message);
+    throw ex;
+  }
+  finally {
+    console.log("finally");
+  }
+}
+catch (ex) {
+  console.error("outer", ex.message);
+}
+
+// Output:
+// "inner" "oops"
+// "finally"
+// "outer" "oops"
+</pre>
+
+<p>Jeder auftretende Fehler wird nur einmal bearbeitet, durch den nächsten umgebenden <code>catch</code>-Block (es sei denn, er wird erneut ausgegeben). Natürlich werden alle im inneren Abschnitt neu auftretenden Fehler durch den umschließenden Block bearbeitet.</p>
+
+<h3 id="Rückgaben_aus_einem_finally-Block">Rückgaben aus einem finally-Block</h3>
+
+<p>Wenn der <code>finally</code>-Abschnitt ein Wert  zurückgibt, wird dieser Wert zum Rückgabewert der gesamten <code>try-catch-finally</code>-Veranstaltung, unabhänig von allen return-Anweisungen in den <code>try</code>- oder <code>catch</code>-Blöcken. Das gilt auch für Fehler im <code>catch</code>-Block:</p>
+
+<pre class="brush: js">try {
+  try {
+    throw new Error("oops");
+  }
+  catch (ex) {
+    console.error("inner", ex.message);
+    throw ex;
+  }
+  finally {
+    console.log("finally");
+    return;
+  }
+}
+catch (ex) {
+  console.error("outer", ex.message);
+}
+
+// Output:
+// "inner" "oops"
+// "finally"
+</pre>
+
+<p>Der äußere "oops"-Fehler wird nicht ausgelöst wegen des <code>return</code> im finally-Block. Das gleiche gilt für alle Werte, die aus dem <code>catch</code>-Abschnitt zurück gegeben werden.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Erste Definition. Implementiert in JavaScript 1.4</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.14', 'try statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-try-statement', 'try statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-try-statement', 'try statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>
+    <p>Fällt nicht unter den aktuellen ECMA-262-Standard: Mehrfache catch-Abschnitte und abhängige Abschnitte (SpiderMonkey extension, JavaScript 1.5).</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Verträglichkeit">Browser-Verträglichkeit</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funktion</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundunter-stützung</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("6")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Abhängige Abschnitte<br>
+    (Non-Standard)</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funktion</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>
+    <table class="compat-table">
+     <tbody>
+      <tr>
+       <td>Grundunter-stützung</td>
+       <td> </td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>
+    <table class="compat-table">
+     <tbody>
+      <tr>
+       <td>Abhängige Abschnitte<br>
+        (Non-Standard)</td>
+       <td> </td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("Statements/throw", "throw")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/statements/var/index.html b/files/de/web/javascript/reference/statements/var/index.html
new file mode 100644
index 0000000000..bd11e7efd0
--- /dev/null
+++ b/files/de/web/javascript/reference/statements/var/index.html
@@ -0,0 +1,243 @@
+---
+title: var
+slug: Web/JavaScript/Reference/Statements/var
+tags:
+  - JavaScript
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/var
+---
+<div>
+<div>{{jsSidebar("Statements")}}</div>
+</div>
+
+<p>Mit dem Schlüsselwort <strong><code>var</code> </strong>deklariert man Variablen und initialisiert diese optional.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>varname1 [</em>= <em>wert1] [</em>, <em>varname2 [</em><em>= wert2] ... [</em>, <em>varnameN [=wertN]]]</em>;</pre>
+
+<dl>
+ <dt><code>varnameN</code></dt>
+ <dd>Variablenname. Jeder legale Bezeichner ist erlaubt.</dd>
+</dl>
+
+<dl>
+ <dt><code>wertN</code></dt>
+ <dd>Initialwert der Variablen. Jeder legale Ausdruck ist erlaubt.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Beschreibung</h2>
+
+<p>Variablendeklarationen werden immer ausgeführt bevor Programmcode ausgeführt wird, egal wo sie im Programmcode vorkommen. Der Gültigkeitsbereich einer Variablendeklaration mit <code>var</code> ist der aktuelle Kontext. Dieser ist der Kontext der umschließenden Funktion oder für Deklarationen außerhalb von Funktionen der globale Kontext.</p>
+
+<p>Das Zuweisen eines Wertes zu einer nicht deklarierten Variablen führt immer dazu, dass eine globale Variable erstellt wird (die Variable wird auf dem globalen Objekt erstellt). Die Unterschiede zwischen deklarierten und nicht deklarierten Variablen sind:</p>
+
+<p>1. Deklarierte Variablen sind immer in dem Kontext gültig, in dem sie deklariert wurden. Undeklarierte Variablen sind immer globale Variablen.</p>
+
+<pre class="brush: js">function x() {
+  y = 1;   // erzeugt einen ReferenceError im strict mode
+  var z = 2;
+}
+
+x();
+
+console.log(y); // gibt "1" aus
+console.log(z); // erzeugt einen ReferenceError: z ist nur in x verfügbar.
+</pre>
+
+<p>2. Deklarierte Variablen werden erstellt bevor Programmcode ausgeführt wird. Undeklarierte Variablen existieren nicht bevor die Zuweisung ausgeführt wurde.</p>
+
+<pre class="brush: js">console.log(a);                // erzeugt einen ReferenceError.
+console.log('still going...'); // wird nie ausgeführt</pre>
+
+<pre class="brush: js">var a;
+console.log(a);                // gibt "undefined" oder "" aus, abhängig vom Browser.
+console.log('still going...'); // gibt "still going..." aus.</pre>
+
+<p>3. Deklarierte Variablen sind nicht konfigurierbare Attribute des ausführenden Kontexts (Funktion oder globaler Kontext). Undeklarierte Variablen sind konfigurierbar (z. B. sie können gelöscht werden).</p>
+
+<pre class="brush: js">var a = 1;
+b = 2;
+
+delete this.a; // erzeugt einen TypeError im strict mode. Andernfalls wird es ignoriert
+delete this.b;
+
+console.log(a, b); // erzeugt einen ReferenceError.
+// Das 'b' Attribut wurde gelöscht und existiert nicht länger.</pre>
+
+<p>Wegen dieser drei Unterschiede führt das Fehlen der Variablendeklaration zu unerwarteten Ergebnissen. <strong>Deswegen ist es empfohlen immer Variablen zu deklarieren, unabhängig davon, ob sie sich in einer Funktion oder im globalen Kontext befinden.</strong> Zudem wird im ECMAScript 5 <code>{{jsxref("</code>Functions_and_function_scope/Strict_mode<code>", "strict mode")}} </code>ein Fehler erzeugt, wenn einer nicht deklarierten Variablen ein Wert zugewiesen wird.</p>
+
+<h3 id="var_hoisting">var hoisting</h3>
+
+<p>Weil Variablendeklarationen (und Deklarationen im Allgemeinen) vor dem Ausführen von Programmcode geschieht, ist das Deklarieren einer Variable irgendwo im Programmcode das gleiche, als würde sie am Anfang deklariert werden. Das bedeutet, dass eine Variable benutzt werden kann bevor sie im Programmcode deklariert wurde. Dieser Umstand wird "hoisting" genannt und wird möglich, weil die Deklaration der Variablen an den Anfang der Funktion oder den Anfang des globalen Programmcodes verschoben wird.</p>
+
+<pre class="brush: js">bla = 2
+var bla;
+// ...
+
+// Implizit wird Folgendes gemacht:
+
+var bla;
+bla = 2;
+</pre>
+
+<p>Aus diesem Grund ist es empfohlen Variablen immer am Anfang ihres Gültigkeitsbereiches zu definieren. Dadurch wird klarer, welche Variable vom lokalen Gültigkeitsbereich stammt und welche über die Gültigkeitsbereichekette gefunden werden muss.</p>
+
+<h2 id="Examples" name="Examples">Beispiele</h2>
+
+<h3 id="Deklarieren_und_initialisieren_zweier_Variablen">Deklarieren und initialisieren zweier Variablen</h3>
+
+<pre>var a = 0, b = 0;</pre>
+
+<h3 id="Zuweisung_zweier_Variablen_mit_einer_Zeichenkette">Zuweisung zweier Variablen mit einer Zeichenkette</h3>
+
+<pre class="brush: js">var a = "A";
+var b = a;
+
+// Das gleiche wie:
+
+var a, b = a = "A";
+</pre>
+
+<p>Sei aufmerksam mit der Reihenfolge:</p>
+
+<pre class="brush: js">var x = y, y = 'A';
+console.log(x + y); // undefinedA
+</pre>
+
+<p><code>x </code>und <code>y </code>werden deklariert bevor Programmcode ausgeführt wird. Die Zuweisungen geschehen später. Wenn "<code>x = y</code>" ausgeführt wird, existiert <code>y </code>schon mit dem Wert <code>undefined</code>, weshalb kein Fehler erzeugt wird. <code>x </code>wird der Wert <code>undefined</code> zugewiesen. Dann wird <code>y </code>der Wert 'A' zugewiesen. Nach dieser einen Zeile ist demnach das Resultat <code>x === undefined &amp;&amp; y === 'A'</code>.</p>
+
+<h3 id="Initialisierung_mehrerer_Variablen">Initialisierung mehrerer Variablen</h3>
+
+<pre class="brush: js">var x = 0;
+
+function f(){
+  var x = y = 1; // x ist lokal Deklariert. y nicht!
+}
+f();
+
+console.log(x, y); // 0, 1
+// Nicht im strict-mode:
+// x ist die erwartetete globale Variable und nicht die lokale.
+// y wird global angelegt und der Wert 1 zugewiesen! </pre>
+
+<h3 id="Implizierte_globale_Variablen_und_Gültigkeitsbereiche_äußerer_Funktionen">Implizierte globale Variablen und Gültigkeitsbereiche äußerer Funktionen</h3>
+
+<p>Variablen die scheinbar global verfügbar sind, stammen manchmal aus dem Gültigkeitsbereich einer äußeren Funktion:</p>
+
+<pre class="brush: js">var x = 0;  // x ist global deklariert und mit dem Wert 0 initialisiert.
+
+console.log(typeof z); // undefined, solange z noch nicht existiert
+
+function a() { // Wenn a aufgerufen wird,
+  var y = 2;   // wird y in der Funktion a deklariert und der Wert 2 wird zugewiesen
+
+  console.log(x, y);   // 0 2
+
+  function b() {       // Wenn b aufgerufen wird,
+    x = 3;  // wird 3 der globalen Variablen x zugewiesen
+            // (es wird keine neue globale Variable erstellt)
+    y = 4;  // wird 4 der Variablen y (äußere Funktion) zugewiesen
+            // (es wird keine neue globale Variable erstellt)
+    z = 5;  // wird eine globale Variable z erstellt und der Wert 5 wird zugewiesen.
+  }         // (erzeugt einen ReferenceError im strict mode.)
+
+  b();     // Aufruf von b (erstellt z als globale Variable)
+  console.log(x, y, z);  // 3 4 5
+}
+
+a();                   // Aufruf von a und somit auch von b
+console.log(x, z);     // 3 5
+console.log(typeof y); // undefined weil y local in der Funktion a deklariert wurde.</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition.<br>
+    Implementiert in JavaScript 1.0</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.2', 'var statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-variable-statement', 'variable statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-variable-statement', 'variable statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li><code>{{jsxref("Anweisungen/let", "let")}}</code></li>
+ <li><code>{{jsxref("Anweisungen/const", "const")}}</code></li>
+</ul>
diff --git a/files/de/web/javascript/reference/statements/while/index.html b/files/de/web/javascript/reference/statements/while/index.html
new file mode 100644
index 0000000000..d391fdbab1
--- /dev/null
+++ b/files/de/web/javascript/reference/statements/while/index.html
@@ -0,0 +1,102 @@
+---
+title: while
+slug: Web/JavaScript/Reference/Statements/while
+tags:
+  - JavaScript
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/while
+---
+<div>{{jsSidebar("Anweisungen")}}</div>
+
+<p>Die <strong>while-Anweisung (Engl. <em>statement</em>)</strong> beschreibt eine Schleife, die solange durchlaufen wird wie die Schleifenbedingung wahr (Engl. <em><strong>true</strong></em>) ergibt. Die Schleifenbedingung (Engl. <strong><em>condition</em></strong>) wird am Anfang der Schleife ausgewertet.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-while.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">while (<em>condition</em>) {
+  <em>statement</em>
+}</pre>
+
+<dl>
+ <dt><code>condition</code></dt>
+ <dd>Die Schleifenbedinung wird zu Anfang eines Schleifendurchlaufs ausgewertet. Ergibt die Auswertung wahr (<em><strong>true)</strong></em>, dann wird der Schleifenkörper durchlaufen (<code>statement</code> wird ausgeführt). Ist die Bedingung falsch (<strong><em>false)</em></strong>, dann fährt das Program mit der ersten Anweisung nach der <em><strong>while</strong></em><strong> </strong>Schleife<strong> </strong>fort.</dd>
+ <dt><code>statement</code></dt>
+ <dd>Eine optionale Anweisung wird ausgeführt solange die Bedingung wahr (<em><strong>true</strong></em>) ist. Mehrere Anweisungen müssen in einer <a href="/en-US/docs/JavaScript/Reference/Statements/block" title="JavaScript/Reference/Statements/block">block</a> Anweisung (<code style="font-style: normal;">{ ... }</code>) gruppiert werden.<br>
+ <br>
+ Bemerkung: Ein break-Statement kann eingesetzt werden, um die Schleife vorzeitig zu beenden, bevor die Bedingung auf <code>false</code> wechselt.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Die folgende <code>while</code> Schleife wird so oft durchlaufen wie <code>n</code> kleiner drei ist.</p>
+
+<pre class="brush:js">var n = 0;
+var x = 0;
+
+while (n &lt; 3) {
+  n++;
+  x += n;
+}</pre>
+
+<p>In jedem Durchlauf wird <code>n</code> inkrementiert und zu <code>x</code> addiert. Die Schleifendurchläufe können wie folgt beschrieben werden:</p>
+
+<ul>
+ <li>Nach 1. Durchlauf: <code>n</code> = 1 und <code>x</code> = 1</li>
+ <li>Nach 2. Durchlauf: <code>n</code> = 2 und <code>x</code> = 3</li>
+ <li>Nach 3. Durchlauf: <code>n</code> = 3 und <code>x</code> = 6</li>
+</ul>
+
+<p>Nach dem dritten Durchlauf ist die Schleifenbedingung nicht mehr wahr, und die Schleife wird beendet.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Bemerkung</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-while-statement', 'while statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-while-statement', 'while statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.6.2', 'while statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-12.6.2', 'while statement')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-12.6.1', 'while statement')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initiale Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.statements.while")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Statements/do...while"><code>do...while</code></a></li>
+ <li>{{jsxref("Statements/for", "for")}}</li>
+</ul>
diff --git a/files/de/web/javascript/reference/strict_mode/index.html b/files/de/web/javascript/reference/strict_mode/index.html
new file mode 100644
index 0000000000..84a7143787
--- /dev/null
+++ b/files/de/web/javascript/reference/strict_mode/index.html
@@ -0,0 +1,401 @@
+---
+title: Strict mode
+slug: Web/JavaScript/Reference/Strict_mode
+tags:
+  - ECMAScript5
+  - JavaScript
+  - NeedsTranslation
+  - Strict Mode
+  - TopicStub
+translation_of: Web/JavaScript/Reference/Strict_mode
+---
+<div>{{JsSidebar("More")}}</div>
+
+<div class="callout-box">Der normale, nicht-strikte Modus wird manchmal auch <strong>"{{Glossary("Sloppy Mode")}}"</strong> (schlampiger Modus) genannt. Das ist zwar keine offizielle Bezeichnung, aber behalten Sie das für den Fall der Fälle im Hinterkopf.</div>
+
+<p>Der in ECMAScript 5 eingeführte strikte Modus von JavaScript ist eine Möglichkeit, sich für eine eingeschränkte Variante von JavaScript zu entscheiden, wodurch der "{{Glossary("Sloppy Mode")}}" implizit deaktiviert wird. Der strikte Modus ist nicht nur eine Teilmenge: Er hat absichtlich eine andere Semantik als normaler Code. Browser, die den strikten Modus nicht unterstützen, führen Code im strikten Modus anders aus, als Browser, die ihn unterstützen. Verlassen Sie sich daher nicht auf den strikten Modus, ohne vorher die relevanten Aspekte des strikten Modus zu testen. Code im strikten Modus und Code im nicht-strikten Modus können beidermaßen vorhanden sein, sodass Skripte nach und nach in den strikten Modus überführt werden können.</p>
+
+<p><span class="tlid-translation translation"><span title="">Der strikte Modus nimmt einige Änderungen an der normalen JavaScript-Semantik vor:</span></span></p>
+
+<ol>
+ <li>Bisher still ignorierte Fehler führen zum Skriptabbruch.</li>
+ <li>Behebt Fehler, die Optimierungen durch JavaScript-Interpreter erschweren oder verhindern. Code im strikten Modus kann manchmal schneller ausgeführt werden als identischer Code im nicht-strikten Modus.</li>
+ <li>Verbietet Syntax, die in zukünftigen Versionen von ECMAScript wahrscheinlich definiert wird.</li>
+</ol>
+
+<p>Siehe <a href="/de/docs/Web/JavaScript/Reference/Strict_mode/wechsel_zum_strict_mode">Wechsel zum Strict Mode</a>, falls Ihr Code im eingeschränken Modus von JavaScript funktionieren soll.</p>
+
+<h2 id="In_den_strikten_Modus_schalten">In den strikten Modus schalten</h2>
+
+<p>Der strikte Modus gilt entweder für <em>ganze Skripte</em> oder <em>einzelne Funktionen</em>. Er kann nicht auf einen Anweisungsblock innerhalb geschweifter Klammern <code>{}</code> angewendet werden; bei einem solchen Versuch wird nichts passieren. Code, der an <code>eval</code>, <code>Function</code> oder Event-Handler-Attribute übergeben wird, sowie an {{domxref("WindowTimers.setTimeout()")}} übergebene Strings und dergleichen sind ganze Skripte, in denen das Einschalten des strikten Modus wie erwartet funktioniert.</p>
+
+<h3 id="Strikter_Modus_für_Skripte">Strikter Modus für Skripte</h3>
+
+<p>Um ein ganzes Skript in den strikten Modus zu schalten geben Sie <em>genau</em> die Anweisung <code>"use strict";</code> (oder <code>'use strict';</code>) als <em>erste</em> Anweisung, noch vor allen anderen Anweisungen an.</p>
+
+<pre class="brush: js">// Strikter Modus für komplettes Skript
+'use strict';
+var v = 'Hi!  Ich bin ein Skript im strikten Modus!';
+</pre>
+
+<p>Diese Syntax hat eine Falle, in die <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=579119">bereits auch</a> eine <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=627531">große Seite</a> getappt ist: Mehrere Skript-Dateien können nicht einfach aneinander gehängt werden.<br>
+ Wird ein Skript B, das im strikten Modus laufen soll, an ein Skript A, das nicht im strikten Modus laufen soll, angehängt, erscheint das <code>"use strict";</code> des angehängtes Skriptes B de facto in der Mitte der zusammengeführten Datei AB und wird folglich vom Interpreter ignoriert.<br>
+ Ebenso wird im umgekehrten Fall ein eigentlich nicht-striktes Skript, das an ein striktes angehängt wurde, auch im vom ersten Skript gewünschten strikten Modus ausgeführt werden.</p>
+
+<p>Die Verkettung von Skripten ist im Grunde nie ratsam, falls es aber nicht anders geht, ziehen Sie in Betracht den strikten Modus immer nur für einzelne Funktionen zu aktivieren.<br>
+ Sie können auch den gesamten Inhalt eines Skripts in eine selbstausführende, anonyme Funktion einschließen und für diese den gewünschten Modus festlegen. Dadurch wird das Verkettungsproblem beseitigt, und Sie müssen alle gemeinsam genutzten Variablen explizit aus dem Geltungsbereich der Funktion exportieren.</p>
+
+<h3 id="Strikter_Modus_für_Funktionen">Strikter Modus für Funktionen</h3>
+
+<p>Um eine Funktion in den strikten Modus zu schalten geben Sie <em>genau</em> die Anweisung <code>"use strict";</code> (oder <code>'use strict';</code>) im Rumpf der Funktion als <em>erste</em> Anweisung an, vor allen anderen.</p>
+
+<pre class="brush: js">function strict(){
+  // Syntac im strikten Modus auf Funktions-Ebene
+  'use strict';
+  function nested() { return 'Und ich auch!'; }
+  return 'Hi! Ich bin eine Funktion im strikten Modus! ' + nested();
+}
+function notStrict() { return 'Ich bin nicht strikt.'; }
+</pre>
+
+<h3 id="Strikter_Modus_für_Module">Strikter Modus für Module</h3>
+
+<p>In ECMAScript 2015 wurden JavaScript-Module eingeführt und damit eine weitere Möglichkeit, in den strikten Modus zu schalten. Der gesamte Inhalt von JavaScript-Modulen wird per Definition im strikten Modus ausgeführt, ein ausdrückliches Einschalten ist nicht nötig.</p>
+
+<pre class="brush: js">function strict() {
+    // da ich ein Modul bin, bin ich standardmäßig strikt
+}
+export default strict;</pre>
+
+<h2 id="Änderungen_im_strikten_Modus">Änderungen im strikten Modus</h2>
+
+<p>Der strikte Modus ändert sowohl die Syntax als auch das Laufzeitverhalten. Änderungen fallen im Allgemeinen in folgende Kategorien:</p>
+
+<ul>
+ <li>Änderungen, die Versehen in Fehler umwandeln (als Syntaxfehler oder zur Laufzeit)</li>
+ <li>Änderungen, die die Berechnung der jeweiligen Variablen für eine bestimmte Verwendung eines Namens vereinfachen</li>
+ <li>Änderungen, die <code>eval</code> und <code>arguments</code> vereinfachen</li>
+ <li>Änderungen, die das Schreiben von "sicherem" JavaScript erleichtern und</li>
+ <li>Änderungen, die zukünftige ECMAScript-Entwicklungen vorwegnehmen.</li>
+</ul>
+
+<h3 id="Versehen_in_Fehler_umwandeln">Versehen in Fehler umwandeln</h3>
+
+<p>Der strikte Modus wandelt einige zuvor still akzeptierte Versehen in ausdrückliche Fehler um. JavaScript wurde konzipiert, um Anfängern den Einstieg zu erleichtern und ignoriert Operationen, die eigentlich Fehler sind, stillschweigend. Manchmal wird dadurch das unmittelbare Problem behoben, das kann später jedoch größeren Problemen führen. Der strikte Modus behandelt diese Versehen als Fehler, so dass sie entdeckt und unverzüglich behoben werden können.</p>
+
+<p>Erstens ist es im strikten Modus nicht mehr möglich, versehentlich eine globale Variable zu erstellen. Vertippt man sich bei einer Zuweisung einer Variable in normalem JavaScript wird eine neue Eigenschaft im globalen Objekt erstellt und alles "funktioniert" noch (es kann in Zukunft jedoch trotzdem schiefgehen: wahrscheinlich in modernem JavaScript). Im strikten Modus lösen Zuweisungen, die versehentlich globale Variablen erzeugen würden, einen Fehler aus:</p>
+
+<pre class="brush: js">'use strict';
+                     // Angenommen eine globale Variable mit dem Namen
+vertipeVaiable = 17; // vertippteVariable existiert, verursacht diese Zeile einen
+                     // ReferenceError, weil die Variable falsch geschrieben wurde
+</pre>
+
+<p>Zweitens löst der strikte Modus bei Zuweisungen, die sonst im Stillen fehlschlagen, eine Exception aus. <code>NaN</code> ist beispielsweise eine nicht beschreibbare globale Variable. Bei normalem Code passiert bei der Zuweisung zu <code>NaN</code> nichts weiter, insbesondere wird keine Fehlermeldung ausgegeben. Im strikten Modus löst die Zuweisung an <code>NaN</code> eine Exception aus. Jede Zuweisung, die im normalen Code unbemerkt fehlschlägt (Zuweisung an ein nicht beschreibbares globales Objekt oder an eine Eigenschaft, Zuweisung an eine Eigenschaft die nur einen Getter hat, Zuweisung an eine neue Eigenschaft eines nicht-existierenden Objekts), löst im strikten Modus eine Exception aus:</p>
+
+<pre class="brush: js">'use strict';
+
+// Zuweisung an ein nicht-beschreibbares, globales Objekt
+var undefined = 5; // verursacht TypeError
+var Infinity = 5; // verursacht TypeError
+
+// Zuweisung an eine nicht-beschreibbare Eigenschaft
+var obj1 = {};
+Object.defineProperty(obj1, 'x', { value: 42, writable: false });
+obj1.x = 9; // verursacht TypeError
+
+// Zuweisung an eine Eigenschaft, die nur einen Getter hat
+var obj2 = { get x() { return 17; } };
+obj2.x = 5; // verursacht TypeError
+
+// Zuweisung einer neuen Eigenschaft an ein nicht-erweiterbares Objekt
+var fixed = {};
+Object.preventExtensions(fixed);
+fixed.newProp = 'ohai'; // verursacht TypeError</pre>
+
+<p>Drittens löst der strikte Modus beim Versuch unlöschbare Eigenschaften zu löschen ebenfalls eine Exception aus:</p>
+
+<pre class="brush: js">'use strict';
+delete Object.prototype; // verursacht TypeError
+</pre>
+
+<p>Viertens erforderte der strikte Modus bis ECMAScript 2015 (vor Gecko 34), dass alle in einem Objekt-Literal aufgeführten Eigenschaften eindeutig definiert werden. Normaler Code kann Eigenschaften mehrfach definieren, wobei die letzte Definition den Wert der Eigenschaft bestimmt.</p>
+
+<div class="note">
+<p>Dies ist seit ECMAScript 2015 nicht mehr der Fall ({{bug(1041128)}}).</p>
+</div>
+
+<pre class="brush: js">'use strict';
+var o = { p: 1, p: 2 }; // !!! Syntaxfehler
+</pre>
+
+<p>Fünftens erfordert der strikte Modus, dass die Namen der Funktionsparameter eindeutig sind. Im normalen Code verbirgt das letzte duplizierte Argument vorherige gleichnamige Argumente. Diese vorherigen Argumente sind weiterhin durch <code>arguments[i]</code> verfügbar, sodass sie nicht gänzlich unzugänglich sind. Dieses Verstecken ist jedoch wenig sinnvoll und wahrscheinlich unerwünscht (z. B. bei einem Tippfehler), sodass im strikten Modus doppelte Argumentnamen einen Syntaxfehler darstellen:</p>
+
+<pre class="brush: js">function sum(a, a, c) { // !!! Syntaxfehler
+  'use strict';
+  return a + a + c; // falsch, wenn dieser Code ausgeführt würde
+}
+</pre>
+
+<p>Sechstens verbietet der strikte Modus seit ECMAScript 5 die allein führende Null als Syntax für Oktalzahlen, zum Beispiel ist <code>0644 === 420</code> oder <code>"\ 045" === "%"</code>. Diese oktale Syntax ist nicht Teil von ECMAScript 5, wird jedoch von allen Browsern unterstützt. In ECMAScript 2015 werden oktalen Zahlen stattdessen die Zeichen <code>0o</code> vorangestellt:</p>
+
+<pre class="brush: js">var a = 0o10; // ES2015: Octal
+</pre>
+
+<p>Anfänger glauben manchmal, dass führende Nullen entsprechend der landläufigen Nutzung des Dezimalsystems keine semantische Bedeutung für den Wert der Zahl an sich hat – und verwenden sie zur Ausrichtung. Dies führt in Javascript jedoch unweigerlich zum Wechsel vom Dezimal- in das Oktalsystem und ergibt mithin einen völlig anderen Wert! Daher sind führende Nullen im strikten Modus ein Syntaxfehler:</p>
+
+<pre class="brush: js">'use strict';
+var sum = 015 + // !!! Syntaxfehler
+          197 +
+          142;
+
+var sumWithOctal = 0o10 + 8;
+console.log(sumWithOctal); // 16
+</pre>
+
+<p>Siebtens verbietet der strikte Modus in ECMAScript 2015 das Zuweisen von Eigenschaften an {{Glossary("primitive")}} Werte. Ohne den strikten Modus wird das einfach ignoriert (no-op), mit dem strikten Modus wird jedoch ein {{jsxref("TypeError")}} ausgelöst.</p>
+
+<pre class="brush: js">(function() {
+'use strict';
+
+false.true = '';         // TypeError
+(14).sailing = 'home';   // TypeError
+'with'.you = 'far away'; // TypeError
+
+})();
+</pre>
+
+<h3 id="Vereinfachung_der_Verwendung_von_Variablen">Vereinfachung der Verwendung von Variablen</h3>
+
+<p>Der strikte Modus vereinfacht die Zuordnung von Variablennamen zu bestimmten Variablendefinitionen im Code. Viele Compiler-Optimierungen setzen voraus, dass die Variable <em>X</em> an <em>diesem</em> Ort gespeichert wird. Dies ist für die vollständige Optimierung von JavaScript-Code von entscheidender Bedeutung. JavaScript macht es manchmal unmöglich, diese grundlegende Zuordnung von Name zu Variablendefinition im Code bis zur Laufzeit durchzuführen. Der strikte Modus entfernt die meisten Fälle, in denen dies geschieht, sodass der Compiler den Code im strikten Modus besser optimieren kann.</p>
+
+<p>Erstens verbietet der strikte Modus <code>with</code>. Das Problem bei <code>with</code> ist, dass ein beliebiger Name innerhalb des Blocks entweder</p>
+
+<ul>
+ <li>einer Eigenschaft des übergebenen Objekts oder</li>
+ <li>einer Variablen im umgebenden (oder sogar globalen) Gültigkeitsbereich zur Laufzeit zugeordnet werden kann</li>
+</ul>
+
+<p>Es ist unmöglich vorher zu wissen, welcher Fall eintritt. Der strikte Modus macht aus <code>with</code> einen Syntaxfehler, sodass keine Möglichkeit besteht, dass ein Name innerhalb von <code>with</code> zur Laufzeit auf einen unbekannten Ort verweist:</p>
+
+<pre class="brush: js">'use strict';
+var x = 17;
+with (obj) { // !!! Syntaxfehler
+  // Wenn dies nicht der strikte Modus wäre, wäre dies var x
+  // oder wäre es stattdessen obj.x? Es ist im Allgemeinen unmöglich,
+  // dies ohne Ausführen des Codes vorherzusagen, daher kann der Name
+  // nicht optimiert werden.
+  x;
+}
+</pre>
+
+<p>Die simple Alternative, ein Objekt einer Variablen mit kurzem Namen zuzuweisen, um dann auf die entsprechende Eigenschaft dieser Variable zuzugreifen, macht <code>with</code> überflüssig.</p>
+
+<p>Zweitens führt <a href="https://whereswalden.com/2011/01/10/new-es5-strict-mode-support-new-vars-created-by-strict-mode-eval-code-are-local-to-that-code-only/"><code>eval</code> im strikten Modus keine neuen Variablen in den umgebenden Geltungsbereich ein</a>. In normalem Code fügt <code>eval("var x;")</code> eine Variable <code>x</code> in die umgebende Funktion oder den globalen Gültigkeitsbereich ein. Das bedeutet im Allgemeinen, dass in einer Funktion, die einen <code>eval</code>-Aufruf enthält, jeder Name, der sich nicht auf ein Argument oder eine lokale Variable bezieht, zur Laufzeit einer bestimmten Definition zugeordnet werden muss (da <code>eval</code> eine neue Variable eingeführt haben könnte, die die äußere Variable verbirgt). Im strikten Modus erstellt <code>eval</code> nur Variablen für den auszuwertenden Code. Daher kann <code>eval</code> nicht beeinflussen, ob ein Name auf eine äußere oder eine lokale Variable verweist:</p>
+
+<pre class="brush: js">var x = 17;
+var evalX = eval("'use strict'; var x = 42; x;");
+console.assert(x === 17);
+console.assert(evalX === 42);
+</pre>
+
+<p>Wenn die Funktion <code>eval</code> von einem Ausdruck der Form <code>eval(...)</code> in Code im strikten Modus aufgerufen wird, wird der Code ebenfalls im strikten Modus ausgewertet. Der Code kann zwar explizit den strikten Modus aufrufen, dies ist jedoch überflüssig.</p>
+
+<pre class="brush: js">function strict1(str) {
+  'use strict';
+  return eval(str); // str wird als Code im strikten Modus betrachtet
+}
+function strict2(f, str) {
+  'use strict';
+  return f(str); // kein eval(...): str ist nur dann strikt wenn
+                 // es den strikten Modus aufruft
+}
+function nonstrict(str) {
+  return eval(str); // str ist nur dann strikt wenn
+                    // es den strikten Modus aufruft
+}
+
+strict1("'Code im strikten Modus!'");
+strict1("'use strict'; 'Code im strikten Modus!'");
+strict2(eval, "'Code im nicht-strikten Modus.'");
+strict2(eval, "'use strict'; 'Code im strikten Modus!'");
+nonstrict("'Code im nicht-strikten Modus.'");
+nonstrict("'use strict'; 'Code im strikten Modus!'");
+</pre>
+
+<p>Daher verhalten sich Namen in <code>eval</code>-Code im strikten Modus identisch zu solchen die in regulärem Code im strikten Modus geschrieben wurden, welche kein Ergebnis eines <code>eval</code>-Ausdrucks sind.</p>
+
+<p>Drittens verbietet der strikte Modus das Löschen bloßer Namen. <code>delete name</code> ist im strikten Modus ein Syntaxfehler:</p>
+
+<pre class="brush: js">'use strict';
+
+var x;
+delete x; // !!! Syntaxfehler
+
+eval('var y; delete y;'); // !!! Syntaxfehler
+</pre>
+
+<h3 id="Vereinfachung_von_eval_und_arguments">Vereinfachung von <code>eval</code> und <code>arguments</code></h3>
+
+<p>Der strikte Modus macht <code>arguments</code> und <code>eval</code> weniger bizarr. Beide haben in normalem Code ein erhebliches Maß an fragwürdigem Verhalten: <code>eval</code> fügt Bindungen hinzu, entfernt sie oder ändert ihre Werte, während <code>arguments</code> durch seine indizierten Eigenschaften benannten Argumenten Aliase gibt. Der strikte Modus versucht <code>eval</code> und <code>arguments</code> möglichst als Schlüsselwörter zu behandeln, obwohl vollständige Korrekturen erst in einer zukünftigen Ausgabe von ECMAScript verfügbar sein werden.</p>
+
+<p>Erstens können eval und arguments nicht mit Sprachsyntax gebunden oder zugewiesen werden. Sämtliche Versuche dies zu tun verursachen Syntaxfehler:</p>
+
+<pre class="brush: js">'use strict';
+eval = 17;
+arguments++;
+++eval;
+var obj = { set p(arguments) { } };
+var eval;
+try { } catch (arguments) { }
+function x(eval) { }
+function arguments() { }
+var y = function eval() { };
+var f = new Function('arguments', "'use strict'; return 17;");
+</pre>
+
+<p>Zweitens vergibt Code im strikten Modus Eigenschaften keine Aliase, die in <code>arguments</code>-Objekten erstellt wurden. In normalem Code innerhalb einer Funktion, deren erstes Argument <code>arg</code> ist, setzt das Festlegen von <code>arg</code> auch <code>arguments[0]</code> und umgekehrt (sofern keine Argumente angegeben wurden oder <code>arguments[0]</code> gelöscht wird). <code>arguments</code>-Objekte für Funktionen im strikten Modus speichern die ursprünglichen Argumente, wenn die Funktion aufgerufen wird. <code>arguments[i]</code> verfolgt weder den Wert des entsprechenden benannten Arguments, noch verfolgt ein benanntes Argument den Wert im entsprechenden <code>arguments[i]</code>.</p>
+
+<pre class="brush: js">function f(a) {
+  'use strict';
+  a = 42;
+  return [a, arguments[0]];
+}
+var pair = f(17);
+console.assert(pair[0] === 42);
+console.assert(pair[1] === 17);
+</pre>
+
+<p>Drittens wird <code>arguments.callee</code> nicht mehr unterstützt. In normalem Code bezieht sich <code>arguments.callee</code> auf die umschließende Funktion. Dieser Anwendungsfall ist schwach: benennen Sie einfach die umschließende Funktion! <span style="">Darüber hinaus behindert <code>arguments.callee</code> Optimierungen wie das Inlining von Funktionen im Wesentlichen, da es möglich sein muss, einen Verweis auf die nicht Inline-Funktion bereitzustellen, wenn auf <code>arguments.callee</code> zugegriffen wird. <code>arguments.callee</code> für Funktionen im strikten Modus ist eine nicht löschbare Eigenschaft, die beim Zuweisen oder Abrufen eine Exception auslöst:</span></p>
+
+<pre class="brush: js">'use strict';
+var f = function() { return arguments.callee; };
+f(); // verursacht TypeError
+</pre>
+
+<h3 id="JavaScript_absichern">JavaScript "absichern"</h3>
+
+<p>Der strikte Modus erleichtert das Schreiben von "sicherem" JavaScript. Einige Websites bieten Benutzern heute die Möglichkeit, JavaScript zu schreiben, das von der Website <em>für andere Benutzer ausgeführt wird</em>. JavaScript in Browsern kann auf die privaten Informationen des Benutzers zugreifen. Daher muss JavaScript vor der Ausführung teilweise transformiert werden, um den Zugriff auf verbotene Funktionalität zu sperren. Ohne viele Laufzeitüberprüfungen macht die Flexibilität von JavaScript dies praktisch unmöglich. Bestimmte Sprachfunktionen sind so tiefgreifend, dass die Durchführung von Laufzeitüberprüfungen erhebliche Leistungseinbußen nach sich zieht. Ein paar Feinjustierungen im strikten Modus sowie die Notwendigkeit, dass vom Benutzer eingegebenes JavaScript im strikten Modus läuft und auf bestimmte Weise aufgerufen wird, reduzieren die Laufzeitprüfungen erheblich.</p>
+
+<p>Erstens wird der als <code>this</code> übergebene Wert an eine Funktion im strikten Modus nicht zwingend zu einem Objekt (auch "boxed" genannt). Bei einer normalen Funktion ist <code>this</code> immer ein Objekt: Entweder das bereitgestellte Objekt, wenn <code>this</code> mit einem Objektwert aufgerufen wird; der boxed Wert, wenn mit <code>this</code> mit einem Boolean, einem String oder Number aufgerufen wird; oder das globale Objekt, wenn es mit einem <code>undefined</code> oder <code>null</code> <code>this</code> aufgerufen wird (verwenden Sie <a href="/de/Web/JavaScript/Reference/Global_Objects/Function/call">call</a>, <a href="/de/Web/JavaScript/Reference/Global_Objects/Function/apply">apply</a> oder <a href="/de/Web/JavaScript/Reference/Global_Objects/Function/bind">bind</a>, um ein bestimmtes zu <code>this</code> spezifizieren). Automatisches Boxing ist nicht nur mit Leistungseinbußen verbunden, es ist darüber hinaus ein Sicherheitsrisiko das globale Objekt in Browsern verfügbar zu machen, da das globale Objekt Zugriff auf Funktionen bietet, die "geschützte" JavaScript-Umgebungen einschränken müssen. Für eine Funktion im strikten Modus wird das übergebene this nicht in ein Objekt geboxed, und wenn keine Angabe erfolgt, wird <code>this</code> zu <code>undefined</code>:</p>
+
+<pre class="brush: js">'use strict';
+function fun() { return this; }
+console.assert(fun() === undefined);
+console.assert(fun.call(2) === 2);
+console.assert(fun.apply(null) === null);
+console.assert(fun.call(undefined) === undefined);
+console.assert(fun.bind(true)() === true);
+</pre>
+
+<p>Das bedeutet unter anderem, dass es in Browsern nicht mehr möglich ist, das <code>window</code>-Objekt innerhalb einer Funktion im strikten Modus durch <code>this</code> zu referenzieren.</p>
+
+<p>Zweitens ist es im strikten Modus nicht mehr möglich, den JavaScript-Stack über allgemein implementierte Erweiterungen von ECMAScript zu "durchwandern". Ist in normalem Code eine Funktion namens <code>fun</code> mitten in der Ausführung ist <code>fun.caller</code> die Funktion die zuletzt <code>fun</code> aufgerufen hat und <code>fun.arguments</code> ist das <code>arguments</code> des Aufrufs von <code>fun</code>. Beide Erweiterungen sind für "sicheres" JavaScript problematisch, weil sie es "sicherem" Code erlauben auf "priviligierte" Funktionen und ihre (potentiell ungesicheren) argumente zuzugreifen. Wenn <code>fun</code> im strikten Modus ist, sind sowohl <code>fun.caller</code> als auch <code>fun.argument</code> nicht-löschbare Eigenschaften, die eine Exception auslösen wenn man versucht auf sie zuzugreifen:</p>
+
+<pre class="brush: js">function restricted() {
+  'use strict';
+  restricted.caller;    // verursacht TypeError
+  restricted.arguments; // verursacht TypeError
+}
+function privilegedInvoker() {
+  return restricted();
+}
+privilegedInvoker();
+</pre>
+
+<p>Drittens gewährt arguments in Funktionen im strikten Modus keinen Zugriff mehr auf die entsprechenden Variablen des Funktionsaufrufs. In einigen ECMAScript-Implementierungen war arguments.caller ein Objekt, dessen Eigenschaften Aliase zu Funktions-Variablen darstellten. Dies ist ein <a href="https://stuff.mit.edu/iap/2008/facebook/">Sicherheitsrisiko</a>, da es die Möglichkeit priviligierte Werte durch Funktionsabstraktion auszublenden einschränkt; es schließt darüber hinaus die meisten Optimierungen aus. Aus diesen Gründen implementieren aktuellen Browser es auch nicht. Aufgrund seiner historischen Funktionalität ist <code>arguments.caller</code> jedoch für eine Funktion im strikten Modus auch eine nicht-löschbare Eigenschaft, die beim Zuweisen oder Abrufen eine Exception auslöst:</p>
+
+<pre class="brush: js">'use strict';
+function fun(a, b) {
+  'use strict';
+  var v = 12;
+  return arguments.caller; // verursacht TypeError
+}
+fun(1, 2); // gibt v nicht preis (oder a oder b)
+</pre>
+
+<h3 id="Wegbereiter_für_zukünftige_ECMAScript-Versionen">Wegbereiter für zukünftige ECMAScript-Versionen</h3>
+
+<p>Zukünftige ECMAScript-Versionen werden wahrscheinlich eine neue Syntax einführen, und der strikte Modus in ECMAScript 5 enthält einige Einschränkungen, um den Übergang zu erleichtern. Es ist einfacher, einige Änderungen vorzunehmen, wenn die Grundlagen dieser Änderungen im strikten Modus verboten sind.</p>
+
+<p>Erstens wird im strikten Modus eine kleine Anzahl von Bezeichnern reservierte Schlüsselwörter. Diese sind <code>implements</code>, <code>interface</code>, <code>let</code>, <code>package</code>, <code>private</code>, <code>protected</code>, <code>public</code>, <code>static</code> und <code>yield</code>. Im strikten Modus können Sie daher keine Variablen oder Argumente mit diesen Namen benennen oder verwenden.</p>
+
+<pre class="brush: js">function package(protected) { // !!!
+  'use strict';
+  var implements; // !!!
+
+  interface: // !!!
+  while (true) {
+    break interface; // !!!
+  }
+
+  function private() { } // !!!
+}
+function fun(static) { 'use strict'; } // !!!
+</pre>
+
+<p>Zwei Mozilla-spezifische Vorbehalte:</p>
+
+<ul>
+ <li>Wenn Ihr Code in JavaScript 1.7 oder höher geschrieben ist (etwa, in Chrome-Code oder beim Benutzen des richtigen <code>&lt;script type=""&gt;</code>) und den strikten Modus verwendet, haben <code>let</code> und <code>yield</code> die Funktionalität, die sie seit ihrer Einführung gehabt haben. Code im strikten Modus im Web, welcher mit <code>&lt;script src=""&gt;</code> oder <code>&lt;script&gt;...&lt;/script&gt;</code> geladen wurde, kann <code>let</code>/<code>yield</code> nicht als Bezeichner verwenden.</li>
+ <li>Während ES5 bedingungslos die Wörter <code>class</code>, <code>enum</code>, <code>export</code>, <code>extends</code>, <code>import</code> und <code>super</code> reserviert, reservierte Mozilla sie vor Firefox 5 nur im strikten Modus.</li>
+</ul>
+
+<p>Zweitens <a href="https://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/">verbietet der strikte Modus Funktionsanweisungen, die nicht auf der obersten Ebene eines Skripts oder einer Funktion stehen</a>. Im normalen Modus sind Funktionsanweisungen in Browsern "überall" zulässig. <em>Dies ist nicht Teil von ES5 (oder gar ES3)!</em> Es ist eine Erweiterung mit inkompatibler Semantik in verschiedenen Browsern. Beachten Sie, dass Funktionsanweisungen außerhalb der obersten Ebene in ES2015 zulässig sind.</p>
+
+<pre class="brush: js">'use strict';
+if (true) {
+  function f() { } // !!! Syntaxfehler
+  f();
+}
+
+for (var i = 0; i &lt; 5; i++) {
+  function f2() { } // !!! Syntaxfehler
+  f2();
+}
+
+function baz() { // koscher
+  function eit() { } // ebenfalls koscher
+}
+</pre>
+
+<p>Dieses Verbot ist eigentlich nicht Teil des strikten Modus, da solche Funktionsanweisungen eine Erweiterung von grundlegendem ES5 sind. Dies ist jedoch die Empfehlung des ECMAScript-Komitees und Browser werden es implementieren.</p>
+
+<h2 id="Strikter_Modus_in_Browsern">Strikter Modus in Browsern</h2>
+
+<p>Die wichtigsten Browser implementieren heute den strikten Modus. Verlassen Sie sich jedoch nicht blind darauf, da in freier Wildbahn immer noch <a href="https://caniuse.com/use-strict">zahlreiche Browser-Versionen verwendet werden, die den strikten Modus nur teilweise</a> oder gar nicht unterstützen (z. B. Internet Explorer vor Version 10!). <em>Strikter Modus ändert die Semantik.</em> Sich auf diese Änderungen zu verlassen, führt zu Versehen und Fehlern in Browsern, die den strikten Modus nicht implementieren. Seien Sie vorsichtig im strikten Modus und erhöhen Sie die Verlässlichkeit des strikten Modus mit Funktionstests, die prüfen, ob die für Ihren Code relevante Teile des strikten Modus implementiert sind. Testen Sie Ihren Code <em>in Browsern, die den strikten Modus unterstützen und nicht unterstützen.</em> Wenn Sie nur in Browsern testen, die den strikten Modus nicht unterstützen, bekommen Sie wahrscheinlich Probleme in Browsern, die ihn unterstützen, und umgekehrt.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-10.1.1', 'Strict Mode Code')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Erste Definition. Siehe: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-C">Strict mode restriction and exceptions</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-strict-mode-code', 'Strict Mode Code')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td><a href="http://www.ecma-international.org/ecma-262/6.0/#sec-strict-mode-of-ecmascript">Strict mode restriction and exceptions</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a class="external" href="https://whereswalden.com/2010/09/08/new-es5-strict-mode-support-now-with-poison-pills/" title="http://whereswalden.com/2010/09/08/new-es5-strict-mode-support-now-with-poison-pills/">Where's Walden? » New ES5 strict mode support: now with poison pills!</a></li>
+ <li><a class="external" href="https://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/" title="http://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/">Where's Walden? » New ES5 strict mode requirement: function statements not at top level of a program or function are prohibited</a></li>
+ <li><a class="external" href="https://whereswalden.com/2011/01/10/new-es5-strict-mode-support-new-vars-created-by-strict-mode-eval-code-are-local-to-that-code-only/" title="http://whereswalden.com/2011/01/10/new-es5-strict-mode-support-new-vars-created-by-strict-mode-eval-code-are-local-to-that-code-only/">Where's Walden? » New ES5 strict mode support: new vars created by strict mode eval code are local to that code only</a></li>
+ <li><a href="http://qnimate.com/javascript-strict-mode-in-nutshell/">JavaScript "use strict" tutorial for beginners.</a></li>
+ <li><a class="external" href="http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/" title="http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/">John Resig - ECMAScript 5 Strict Mode, JSON, and More</a></li>
+ <li><a class="external" href="http://dmitrysoshnikov.com/ecmascript/es5-chapter-2-strict-mode/">ECMA-262-5 in detail. Chapter 2. Strict Mode.</a></li>
+ <li><a class="external" href="https://kangax.github.io/compat-table/es5/#Strict_mode">Strict mode compatibility table</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Strict_mode/wechsel_zum_strict_mode">Wechsel zum Strict Mode</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/template_strings/index.html b/files/de/web/javascript/reference/template_strings/index.html
new file mode 100644
index 0000000000..54885ed5a3
--- /dev/null
+++ b/files/de/web/javascript/reference/template_strings/index.html
@@ -0,0 +1,219 @@
+---
+title: Template-Strings
+slug: Web/JavaScript/Reference/template_strings
+translation_of: Web/JavaScript/Reference/Template_literals
+---
+<div>{{JsSidebar("More")}}</div>
+
+<p>Template-Strings sind {{jsxref("String", "String-Symbole")}}, die über mehrere Zeilen gehende Zeichenketten sowie eingebettete Javascript-Ausdrücke ermöglichen.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">`string text`
+
+`string text line 1
+ string text line 2`
+
+`string text ${expression} string text`
+
+tag `string text ${expression} string text`
+</pre>
+
+<h2 id="Beschreibung">Beschreibung</h2>
+
+<p>Template-Strings sind anstelle von doppelten bzw. einfachen Anführungszeichen in zwei Akzente Gravis <code>`</code> (Französisch: accent grave, Englisch: backtick) eingeschlossen.</p>
+
+<p>Sie können Platzhalter beinhalten, die durch das Dollarsymbol gefolgt von geschweiften Klammern gekennzeichnet sind (<code>${expression}</code>). Auf diese Weise dienen sie als Vorlagen (Englisch: template), die, zentral definiert, während des Programmablaufs an verschiedenen Stellen individuell eingesetzt werden können.</p>
+
+<p>Die Ausdrücke in den Platzhaltern sowie der Text selbst können an eine optionale Funktion übergeben werden. Falls vor dem Template-String ein Ausdruck vorhanden ist (hier als <code>tag</code> bezeichnet), wird der Template-String „Tagged Template String“ genannt. In diesem Fall wird der <code>tag</code>-Ausdruck (üblicherweise eine Funktion) mit dem verarbeiteten Template-String aufgerufen, um den Text vor der Ausgabe zu bearbeiten.</p>
+
+<p>Ein Gravis kann in einen Template-String durch Maskieren mit dem Rückstrich <code>\</code> eingefügt werden:</p>
+
+<pre class="brush: js">`\`` === '`' // --&gt; true</pre>
+
+<h4 id="Der_Gravis_und_das_einfache_Anführungszeichen">Der Gravis und das einfache Anführungszeichen</h4>
+
+<p>Der Gravis befindet sich auf deutschen Tastaturen rechts neben dem ß und ist nur zusammen mit der Hochstelltaste und einer anschließenden Betätigung der Leertaste zu erreichen.</p>
+
+<p>Das Zeichen wird gelegentlich mit dem einfachen Anführungszeichen <code>'</code> verwechselt; dieses befindet sich rechts neben dem Ä.</p>
+
+<p>Im normalen Sprachgebrauch wird es meist zusammen mit den Tasten e oder a genutzt um è bzw. à zu schreiben, analog zur Notwendigkeit einer zusätzlichen Betätigung der Leertaste für ` alleine.</p>
+
+<h3 id="Mehrzeilige_Zeichenketten">Mehrzeilige Zeichenketten</h3>
+
+<p>In normale Zeichenketten sind Zeilenumbrüche nur durch Einfügen der Sequenz <code>\n</code> zu erreichen:</p>
+
+<pre class="brush: js">console.log("string text line 1\nstring text line 2");
+// Ausgabe:
+// string text line 1
+// string text line 2
+
+// Identische Ausgabe, jedoch deutlicher durch Trennung:
+console.log("string text line 1\n" +
+"string text line 2");
+</pre>
+
+<p>Das gleiche Ergebnis kann mit Template-Strings einfacher und übersichtlicher erreicht werden, indem der Text so, wie er erscheinen soll, über mehrere Zeilen geschrieben wird:</p>
+
+<pre class="brush: js">console.log(`string text line 1
+string text line 2`);
+// Ausgabe:
+// string text line 1
+// string text line 2</pre>
+
+<h3 id="Ausdrücke_in_Zeichenketten">Ausdrücke in Zeichenketten</h3>
+
+<p id="Um_Ausdrücke_in_normale_Strings_einzufügen_müsste_die_folgende_Syntax_genutzt_werden">Um Javascript-Ausdrücke in normale Strings einzufügen, müsste die folgende Syntax genutzt werden:</p>
+
+<pre class="brush: js">var a = 5;
+var b = 10;
+console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");
+// Ausgabe:
+// Fifteen is 15 and
+// not 20.</pre>
+
+<p>Mit Template-Strings können nun die syntaktischen Vorteile genutzt werden um solche Ersetzungen leserlicher zu machen:</p>
+
+<pre class="brush: js">var a = 5;
+var b = 10;
+console.log(`Fifteen is ${a + b} and
+not ${2 * a + b}.`);
+// Ausgabe:
+// Fifteen is 15 and
+// not 20.</pre>
+
+<h3 id="Verschachtelte_Vorlagen">Verschachtelte Vorlagen</h3>
+
+<p>Das Verschachteln von Template-Strings ist manchmal die einfachste und lesbarste Möglichkeit, konfigurierbare Vorlagen zu erhalten, denn auch innerhalb von <code>${ }</code> können Template-Strings verwendet werden</p>
+
+<p>Die nachfolgenden drei Beispiele haben eine identische Funktion:</p>
+
+<p>ECMAScript 5:</p>
+
+<pre class="brush: js">let classes = 'header';
+classes += (isLargeScreen() ?
+  '' : item.isCollapsed ?
+    ' icon-expander' : ' icon-collapser');
+</pre>
+
+<p>Eine nicht verschachtelte Vorlage mit ECMAScript 2015:</p>
+
+<pre class="brush: js">const classes = `header ${ isLargeScreen() ? '' :
+  (item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`;</pre>
+
+<p>Verschachtelte Vorlage mit ECMAScript 2015:</p>
+
+<pre class="brush: js">const classes = `header ${ isLargeScreen() ? '' :
+  `icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;</pre>
+
+<h3 id="Tagged_Template-Strings">Tagged Template-Strings</h3>
+
+<p>Eine erweiterte Form der Template-Strings sind <em>Tagged</em> Template-Strings. Mit ihnen kann die Ausgabe von Template-Strings mit einer Funktion ändern.</p>
+
+<p>Das erste Argument enthält ein Array von Strings ("Hello" und "world" in diesem Beispiel). Alle Argumente nach dem ersten sind die Werte der verarbeiteten (manchmal auch <em>cooked </em>genannt, „vorgekocht“) Ausdrücke (hier: "15" und "50").</p>
+
+<p>Im folgenden Beispiel heißt die Funktion <code>tag</code>, was aber keinen besonderen Grund hat, da sie jeden gewünschten Namen haben kann.</p>
+
+<pre class="brush: js">var a = 5;
+var b = 10;
+
+function tag(strings, ...values) {
+  console.log(strings[0]); // "Hello "
+  console.log(strings[1]); // " world "
+  console.log(values[0]);  // 15
+  console.log(values[1]);  // 50
+
+  return "Bazinga!";
+}
+
+tag`Hello ${ a + b } world ${ a * b}`;
+// "Bazinga!"
+</pre>
+
+<p>Tag-Funktionen müssen keinen String zurückgeben, wie das folgende Beispiel zeigt.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">function template(strings, ...keys) {
+  return (function(...values) {
+    var dict = values[values.length - 1] || {};
+    var result = [strings[0]];
+    keys.forEach(function(key, i) {
+      var value = Number.isInteger(key) ? values[key] : dict[key];
+      result.push(value, strings[i + 1]);
+    });
+    return result.join('');
+  });
+}
+
+var t1Closure = template`${0}${1}${0}!`;
+t1Closure('Y', 'A');  // "YAY!"
+</code><code>var t2Closure = template`${0} ${'foo'}!`;
+t2Closure('Hello', {foo: 'World'});  // "Hello World!"</code>
+</pre>
+
+<h3 id="Raw_Strings">Raw Strings</h3>
+
+<p>Die Eigenschaft raw, verfügbar für das erste Argument eines Tagged Template-Strings, erlaubt den Zugriff auf den unverarbeiteten String, also ohne <a href="/de/docs/Web/JavaScript/Guide/Grammar_and_types#Using_special_characters_in_strings">Escape-Sequenzen</a> auszuwerten.</p>
+
+<pre class="brush: js"><code class="language-js">function tag(strings, ...values) {
+  console.log(strings.raw[0]);
+  // "string text line 1 \\n string text line 2"
+}
+
+tag`string text line 1 \n string text line 2`;
+</code></pre>
+
+<p>Zusätzlich exisitert die Methode {{jsxref("String.raw()")}} um unverarbeitete Strings zu erstellen, genauso wie sie die vorgegebene Template-Funktion und String-Verknüpfung erstellen würde.</p>
+
+<pre class="brush: js"><code class="language-js">String.raw`Hi\n${2+3}!`;
+// "Hi\\n5!"
+
+str.length;
+// 6
+
+str.split('').join(',');
+// "H,i,\,n,5,!"
+</code></pre>
+
+<h2 id="Sicherheit">Sicherheit</h2>
+
+<p>Template-Strings <strong>SOLLTEN NIEMALS </strong>von Nutzern erstellt werden, denen nicht vertraut werden kann, da diese Zugriff auf Variablen und Funktionen haben.</p>
+
+<pre class="brush: js"><code class="language-js">`${console.warn("this is",this)}`; // "this is" Window
+
+let a = 10;
+console.warn(`${a+=20}`); // "30"
+console.warn(a); // 30
+</code></pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-template-literals', 'Template Literals')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Erste Definition. Definiert in mehreren Abschnitten der Spezifikation: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-template-literals">Template Literals</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-tagged-templates">Tagged Templates</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("javascript.grammar.template_literals")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("String")}}</li>
+ <li>{{jsxref("String.raw()")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li>
+ <li><a href="https://gist.github.com/WebReflection/8f227532143e63649804">Template-like strings in ES3 compatible syntax</a></li>
+ <li><a href="https://hacks.mozilla.org/2015/05/es6-in-depth-template-strings-2/">"ES6 in Depth: Template strings" on hacks.mozilla.org</a></li>
+</ul>
diff --git a/files/de/web/javascript/reference/veraltete_und_abgeschaffte_features/index.html b/files/de/web/javascript/reference/veraltete_und_abgeschaffte_features/index.html
new file mode 100644
index 0000000000..412bddc553
--- /dev/null
+++ b/files/de/web/javascript/reference/veraltete_und_abgeschaffte_features/index.html
@@ -0,0 +1,291 @@
+---
+title: Veraltete und abgeschaffte Features
+slug: Web/JavaScript/Reference/Veraltete_und_abgeschaffte_Features
+translation_of: Web/JavaScript/Reference/Deprecated_and_obsolete_features
+---
+<div>{{JsSidebar("More")}}</div>
+
+<p>Diese Seite listet die Features JavaScriptes auf, die veraltet sind( das bedeutet, dass noch benutzbar, aber Entfernung geplant) und abgeschafft sind( das bedeutet: nicht länger benutzbar).</p>
+
+<h2 id="Veraltete_Features">Veraltete Features</h2>
+
+<p>Diese veralteten Features können noch benutzt werden, aber sollten mit Vorsicht benutzt werden, da erwartet wird, dass sie in Futura endgültig abgeschafft werden. Man sollte daran arbeiten, sie von seinem Code zu entfernen.</p>
+
+<h3 id="RegExp-Eigenschaften">RegExp-Eigenschaften</h3>
+
+<p>The following properties are deprecated. This does not affect their use in {{jsxref("String.replace", "replacement strings", "", 1)}}:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Property</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.n", "$1-$9")}}</td>
+   <td>
+    <p>Parenthesized substring matches, if any.<br>
+     <strong>Warning:</strong> Using these properties can result in problems, since browser extensions can modify them. Avoid them!</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.input", "$_")}}</td>
+   <td>See <code>input</code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.multiline", "$*")}}</td>
+   <td>See <code>multiline</code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.lastMatch", "$&amp;")}}</td>
+   <td>See <code>lastMatch</code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.lastParen", "$+")}}</td>
+   <td>See <code>lastParen</code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.leftContext", "$`")}}</td>
+   <td>See <code>leftContext</code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.rightContext", "$'")}}</td>
+   <td>See <code>rightContext</code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.input", "input")}}</td>
+   <td>The string against which a regular expression is matched.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.lastMatch", "lastMatch")}}</td>
+   <td>The last matched characters.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.lastParen", "lastParen")}}</td>
+   <td>The last parenthesized substring match, if any.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.leftContext", "leftContext")}}</td>
+   <td>The substring preceding the most recent match.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.rightContext", "rightContext")}}</td>
+   <td>The substring following the most recent match.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>The following are now properties of <code>RegExp</code> instances, no longer of the <code>RegExp</code> object:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Property</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.global", "global")}}</td>
+   <td>Whether or not to test the regular expression against all possible matches in a string, or only against the first.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.ignoreCase", "ignoreCase")}}</td>
+   <td>Whether or not to ignore case while attempting a match in a string.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.lastIndex", "lastIndex")}}</td>
+   <td>The index at which to start the next match.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.multiline", "multiline")}}</td>
+   <td>Whether or not to search in strings across multiple lines.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.source", "source")}}</td>
+   <td>The text of the pattern.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="RegExp_methods">RegExp methods</h3>
+
+<ul>
+ <li>The {{jsxref("RegExp.compile", "compile()")}} method is deprecated.</li>
+ <li>The <code>valueOf</code> method is no longer specialized for <code>RegExp</code>. Use {{jsxref("Object.valueOf()")}}.</li>
+</ul>
+
+<h3 id="Function_properties">Function properties</h3>
+
+<ul>
+ <li>The {{jsxref("Global_Objects/Function/caller", "caller")}} and {{jsxref("Global_Objects/Function/arguments", "arguments")}} properties are deprecated, because they leak the function caller. Instead of the arguments property, you should use the {{jsxref("Functions/arguments", "arguments")}} object inside function closures.</li>
+</ul>
+
+<h3 id="Legacy_generator">Legacy generator</h3>
+
+<ul>
+ <li>{{jsxref("Statements/Legacy_generator_function", "Legacy generator function statement")}} and {{jsxref("Operators/Legacy_generator_function", "Legacy generator function expression")}} are deprecated. Use {{jsxref("Statements/function*", "function* statement")}} and {{jsxref("Operators/function*", "function* expression")}} instead.</li>
+ <li>{{jsxref("Operators/Array_comprehensions", "JS1.7/JS1.8 Array comprehension", "#Differences_to_the_older_JS1.7.2FJS1.8_comprehensions")}} and {{jsxref("Operators/Generator_comprehensions", "JS1.7/JS1.8 Generator comprehension", "#Differences_to_the_older_JS1.7.2FJS1.8_comprehensions")}} are deprecated.</li>
+</ul>
+
+<h3 id="Iterator">Iterator</h3>
+
+<ul>
+ <li>{{jsxref("Global_Objects/StopIteration", "StopIteration")}} is deprecated.</li>
+ <li>{{jsxref("Global_Objects/Iterator", "Iterator")}} is deprecated.</li>
+</ul>
+
+<h3 id="Object_methods">Object methods</h3>
+
+<ul>
+ <li>{{jsxref("Object.watch", "watch")}} and {{jsxref("Object.unwatch", "unwatch")}} are deprecated. Use {{jsxref("Proxy")}} instead.</li>
+ <li><code>__iterator__</code> is deprecated.</li>
+ <li>{{jsxref("Object.noSuchMethod", "__noSuchMethod__")}} is deprecated. Use {{jsxref("Proxy")}} instead.</li>
+</ul>
+
+<h3 id="Date_methods">Date methods</h3>
+
+<ul>
+ <li>{{jsxref("Global_Objects/Date/getYear", "getYear")}} and {{jsxref("Global_Objects/Date/setYear", "setYear")}} are affected by the Year-2000-Problem and have been subsumed by {{jsxref("Global_Objects/Date/getFullYear", "getFullYear")}} and {{jsxref("Global_Objects/Date/setFullYear", "setFullYear")}}.</li>
+ <li>You should use {{jsxref("Global_Objects/Date/toISOString", "toISOString")}} instead of the deprecated {{jsxref("Global_Objects/Date/toGMTString", "toGMTString")}} method in new code.</li>
+ <li>{{jsxref("Global_Objects/Date/toLocaleFormat", "toLocaleFormat")}} is deprecated.</li>
+</ul>
+
+<h3 id="Functions">Functions</h3>
+
+<ul>
+ <li>{{jsxref("Operators/Expression_closures", "Expression closures", "", 1)}} are deprecated. Use regular {{jsxref("Operators/function", "functions")}} or {{jsxref("Functions/Arrow_functions", "arrow functions", "", 1)}} instead.</li>
+</ul>
+
+<h3 id="Proxy">Proxy</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Archive/Web/Old_Proxy_API">Proxy.create</a> and <a href="/en-US/docs/Archive/Web/Old_Proxy_API">Proxy.createFunction</a> are deprecated. Use {{jsxref("Proxy")}} instead.</li>
+ <li>The following traps are obsolete:
+  <ul>
+   <li><code>hasOwn</code> ({{bug(980565)}}, Firefox 33).</li>
+   <li><code>getEnumerablePropertyKeys</code> ({{bug(783829)}}, Firefox 37)</li>
+   <li><code>getOwnPropertyNames</code> ({{bug(1007334)}}, Firefox 33)</li>
+   <li><code>keys</code> ({{bug(1007334)}}, Firefox 33)</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="let">let</h3>
+
+<ul>
+ <li>{{jsxref("Statements/let", "let blocks", "#let_block")}} and {{jsxref("Statements/let", "let expressions", "#let_expressions")}} are deprecated.</li>
+</ul>
+
+<h3 id="Escape_sequences">Escape sequences</h3>
+
+<ul>
+ <li>Octal escape sequences (\ followed by one, two, or three octal digits) are deprecated in string and regular expression literals.</li>
+ <li>The {{jsxref("Global_Objects/escape", "escape")}} and {{jsxref("Global_Objects/unescape", "unescape")}} functions are deprecated. Use {{jsxref("Global_Objects/encodeURI", "encodeURI")}}, {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}}, {{jsxref("Global_Objects/decodeURI", "decodeURI")}} or {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} to encode and decode escape sequences for special characters.</li>
+</ul>
+
+<h3 id="String_methods">String methods</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/tag/HTML%20wrapper%20methods">HTML wrapper methods</a> like {{jsxref("String.prototype.fontsize")}} and {{jsxref("String.prototype.big")}}.</li>
+ <li>{{jsxref("String.prototype.quote")}} is removed from Firefox 37.</li>
+ <li>non standard <code>flags</code> parameter in {{jsxref("String.prototype.search")}}, {{jsxref("String.prototype.match")}}, and {{jsxref("String.prototype.replace")}} are deprecated.</li>
+</ul>
+
+<h2 id="Obsolete_features">Obsolete features</h2>
+
+<p>These obsolete features have been entirely removed from JavaScript and can no longer be used as of the indicated version of JavaScript.</p>
+
+<h3 id="Object">Object</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Property</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Object/count", "__count__")}}</td>
+   <td>Returns the number of enumerable properties directly on a user-defined object.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Object/Parent", "__parent__")}}</td>
+   <td>Points to an object's context.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Object/eval", "Object.prototype.eval()")}}</td>
+   <td>Evaluates a string of JavaScript code in the context of the specified object.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.observe()")}}</td>
+   <td>Asynchronously observing the changes to an object.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.unobserve()")}}</td>
+   <td>Remove observers.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.getNotifier()")}}</td>
+   <td>Creates an object that allows to synthetically trigger a change.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Function">Function</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Property</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Function/arity", "arity")}}</td>
+   <td>Number of formal arguments.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Array">Array</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Property</td>
+   <td>Description</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Array.observe()")}}</td>
+   <td>Asynchronously observing changes to Arrays.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Array.unobserve()")}}</td>
+   <td>Remove observers.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Number">Number</h3>
+
+<ul>
+ <li>{{jsxref("Number.toInteger()")}}</li>
+</ul>
+
+<h3 id="ParallelArray">ParallelArray</h3>
+
+<ul>
+ <li>{{jsxref("ParallelArray")}}</li>
+</ul>
+
+<h3 id="Statements">Statements</h3>
+
+<ul>
+ <li>{{jsxref("Statements/for_each...in", "for each...in")}} is deprecated. Use {{jsxref("Statements/for...of", "for...of")}} instead.</li>
+ <li>Destructuring {{jsxref("Statements/for...in", "for...in")}} is deprecated. Use {{jsxref("Statements/for...of", "for...of")}} instead.</li>
+</ul>
+
+<h3 id="E4X">E4X</h3>
+
+<p>See <a href="/en-US/docs/Archive/Web/E4X">E4X</a> for more information.</p>
+
+<h3 id="Sharp_variables">Sharp variables</h3>
+
+<p>See <a href="/en-US/docs/Archive/Web/Sharp_variables_in_JavaScript">Sharp variables in JavaScript</a> for more information.</p>
diff --git a/files/de/web/javascript/reference/veraltete_und_abgeschaffte_features/the_legacy_iterator_protocol/index.html b/files/de/web/javascript/reference/veraltete_und_abgeschaffte_features/the_legacy_iterator_protocol/index.html
new file mode 100644
index 0000000000..017dcea16a
--- /dev/null
+++ b/files/de/web/javascript/reference/veraltete_und_abgeschaffte_features/the_legacy_iterator_protocol/index.html
@@ -0,0 +1,78 @@
+---
+title: The legacy Iterator protocol
+slug: >-
+  Web/JavaScript/Reference/Veraltete_und_abgeschaffte_Features/The_legacy_Iterator_protocol
+tags:
+  - ES2015
+  - JavaScript
+  - Obsolet
+  - next()
+  - veralteter Iterator
+translation_of: >-
+  Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol
+---
+<div>{{jsSidebar("More")}}</div>
+
+<div class="warning"><strong>Kein Standard.</strong> Das veraltete Iterator-Protokoll war ein SpiderMonkey-spezifisches Feature, welches in Firefox 58 entfernt wurde. Als Alternative werden <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for..of</a> Schleifen und das <a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">iterator protocol</a> empfohlen.</div>
+
+<h2 id="Das_veraltete_Iterator-Protokoll">Das veraltete Iterator-Protokoll</h2>
+
+<p>Vor Version 26 implementierte Firefox ein anderes Iterator-Protokoll, welches dem <a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">ES2015 Iterator protocol</a> Standard entspricht.</p>
+
+<p>Ein Objekt ist ein veralteter Iterator, wenn es eine <code>next()</code>  Methode mit den folgenden Semantiken implementiert, welches zum Ende der Iteration {{jsxref("Global_Objects/StopIteration", "StopIteration")}} wirft.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Value</th>
+  </tr>
+  <tr>
+   <td><code>next</code></td>
+   <td>Eine Funktion ohne Argumente, welche einen Wert zurückgibt.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Unterschied_zwischen_dem_veralteten_und_dem_ES2015_Iterator-Protokoll">Unterschied zwischen dem veralteten und dem ES2015 Iterator-Protokoll</h3>
+
+<ul>
+ <li>Der Wert wurde direkt von der <code>next</code> Methode zurückgegeben, statt der Wert der <code>value</code> Eigenschaft eines Platzhalter-Objekts zu sein.</li>
+ <li>Das Ende der Iteration wurde durch das Werfen eines {{jsxref("Global_Objects/StopIteration", "StopIteration")}} Objekts ausgedrückt.</li>
+</ul>
+
+<h3 id="Einfaches_Beispiel_mit_dem_alten_Protokoll">Einfaches Beispiel mit dem alten Protokoll</h3>
+
+<pre class="brush: js">function kreiereIterator(array){
+    var nextIndex = 0;
+
+    return {
+       next: function(){
+           if(nextIndex &lt; array.length){
+               return array[nextIndex++];
+           else
+               throw new StopIteration();
+       }
+    }
+}
+
+var it = kreiereIterator(['yo', 'ya']);
+
+console.log(it.next()); // 'yo'
+console.log(it.next()); // 'ya'
+try{
+    console.log(it.next());
+}
+catch(e){
+    if(e instanceof StopIteration){
+         // Iteration beendet.
+    }
+}
+</pre>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iteratoren und Generatoren</a></li>
+ <li>Mehr <a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features">veraltete und obsolete Features</a></li>
+</ul>
diff --git a/files/de/web/javascript/speicherverwaltung/index.html b/files/de/web/javascript/speicherverwaltung/index.html
new file mode 100644
index 0000000000..82f8977c23
--- /dev/null
+++ b/files/de/web/javascript/speicherverwaltung/index.html
@@ -0,0 +1,184 @@
+---
+title: Speicherverwaltung
+slug: Web/JavaScript/Speicherverwaltung
+tags:
+  - JavaScript
+translation_of: Web/JavaScript/Memory_Management
+---
+<div>{{JsSidebar("Advanced")}}</div>
+
+<h2 id="Einleitung">Einleitung</h2>
+
+<p>Bei Low-Level Programmiersprachen wie C, die zur systemnahen Programmierung eingesetzt werden, existieren Funktionen - wie z. B. <code>malloc()</code> und <code>free()</code> - womit explizit Speicher angefordert und wieder freigegeben werden kann. Bei JavaScript gibt es keine solchen Funktionen, sondern der benötigte Speicher wird bei der Erzeugung neuer Objekte (z. B. benutzerdefinierte Objekte oder vordefinierte Objekte wie <code>String</code>) zugewiesen. Die Speicherfreigabe erfolgt automatisch im Hintergrund durch die <em>Garbage Collection</em> (wörtlich: "Müllabfuhr"; automatische Speicherbereinigung). Dieser Automatismus führt oft zu Verwirrung und lässt so manchen Entwicklern irrtümlich glauben, man müsse sich über die Speicherverwaltung keine Gedanken machen.</p>
+
+<h2 id="Zyklus_der_Speichernutzung">Zyklus der Speichernutzung</h2>
+
+<p>Unabhängig von der eingesetzten Programmiersprache läuft der Zyklus für die Speichernutzung immer ungefähr gleich ab:</p>
+
+<ol>
+ <li>Alloziierung/Zuweisung des benötigten Speichers.</li>
+ <li>Benutzung des Speichers (lesen, schreiben).</li>
+ <li>Freigabe des alloziierten Speichers, wenn er nicht mehr benötigt wird.</li>
+</ol>
+
+<p>Der erste und zweite Schritt erfolgt bei allen Programmiersprachen explizit. Der letzte Schritt, die Freigabe des Speichers, wird bei Low-Level-Sprachen explizit und bei höheren Programmiersprachen wie JavaScript meist implizit vorgenommen.</p>
+
+<h3 id="Speicherzuweisung_bei_JavaScript">Speicherzuweisung bei JavaScript</h3>
+
+<h4 id="Initialisierung_von_Werten">Initialisierung von Werten</h4>
+
+<p>Um dem Programmierer die Arbeit zu erleichtern, weist JavaScript bei der Zuweisung von Werten je nach Typ automatisch die benötigte Menge an Speicher zu:</p>
+
+<div style="overflow: hidden;">
+<pre class="brush: js">var n = 123; // alloziiert Speicher für eine Number
+var s = "azerty"; // alloziiert Speicher für einen String
+
+var o = {
+  a: 1,
+  b: null
+}; // alloziiert Speicher für das Objekt und enthaltene Werte
+
+var a = [1, null, "abra"]; // (wie bei Objekten) alloziiert Speicher für das Array und enthaltene Werte
+
+function f(a){
+  return a + 2;
+} // alloziiert eine Function (die ein aufrufbares Objekt ist)
+
+// Funktions-Ausdrücke alloziieren ebenfalls ein Objekt
+someElement.addEventListener('click', function(){
+  someElement.style.backgroundColor = 'blue';
+}, false);
+</pre>
+</div>
+
+<h4 id="Allokation_über_Funktionsaufrufe">Allokation über Funktionsaufrufe</h4>
+
+<p>Einige Funktionen allozieren Objekte:</p>
+
+<pre class="brush: js">var d = new Date();
+var e = document.createElement('div'); // alloziiert ein DOM-Element
+</pre>
+
+<p>Andere Methoden allozieren neue Werte oder Objekte:</p>
+
+<pre class="brush: js">var s = "azerty";
+var s2 = s.substr(0, 3); // s2 ist ein neuer String
+// Da Strings immutable sind, weist JavaScript evtl. hier
+// keinen neuen Speicher zu, sondern merkt sich nur [0, 3],
+// dass s2 die ersten beiden Elemente von s enthält
+
+var a = ["ouais ouais", "nan nan"];
+var a2 = ["generation", "nan nan"];
+var a3 = a.concat(a2); // neues Array mit den 4 Elementen von a und a2
+</pre>
+
+<h3 id="Werte">Werte</h3>
+
+<p>Bei der Zuweisung von Werten wird in den Speicher geschrieben und beim Abfragen von Werten der Speicher ausgelesen. Weist man also z. B. einer Objekteigenschaft einen Wert zu oder übergibt einen Wert als Argument an eine Funktion, wird dieser in den Speicher geschrieben und beim Abfragen des Werts der Speicher ausgelesen.</p>
+
+<h3 id="Freigabe_des_Speichers_wenn_dieser_nicht_mehr_benötigt_wird">Freigabe des Speichers, wenn dieser nicht mehr benötigt wird</h3>
+
+<p>Bei diesem Vorgang tauchen am häufigsten Probleme mit der Speicherverwaltung auf, da es keine leichte Aufgabe ist, zu entscheiden, wann der benötigte Speicher tatsächlich nicht mehr gebraucht wird. Oftmals muss der Entwickler selbst bestimmen, an welcher Stelle die Freigabe eines Speicherbereichs erfolgen soll.</p>
+
+<p>Höhere Programmiersprachen setzten häufig eine Softwarekomponente namens <em>Garbage Collector</em> ein, dessen Aufgabe darin besteht, die Speicherallokation zu überwachen und nicht mehr benötigten Speicher wieder freizugeben. Dieser Prozess basiert auf einer Abschätzung, da das zugrundeliegende Problem - zu entscheiden, wann Speicher nicht mehr benötigt wird - <a class="external" href="http://de.wikipedia.org/wiki/Entscheidbar">unentscheidbar ist</a> (nicht durch einen Algorithmus lösbar).</p>
+
+<h2 id="Garbage_Collection">Garbage Collection</h2>
+
+<p>Wie oben schon erwähnt, gibt es keine eindeutige Lösung für das zugrunde liegende Problem. Aus diesem Grund implementieren Garbage Collections einen beschränkten Algorithmus. Dieser Abschnitt liefert Informationen zum Verständnis der wichtigsten Algorithmen der Garbage Collection und deren Beschränkungen.</p>
+
+<h3 id="Referenzen">Referenzen</h3>
+
+<p>Der Grundgedanke auf dem Garbage Collection-Algorithmen hauptsächlich basieren, ist die Idee der <em>Referenz</em>. Im Zusammenhang mit der Speicherverwaltung spricht man davon, dass ein Objekt ein anderes Objekt referenziert, wenn ersteres (entweder implizit oder explizit) Zugriff auf letzteres hat. Zum Beispiel hat ein JavaScript-Objekt eine Referenz auf dessen Prototype (implizite Referenz) und dessen Eigenschaftswerte (explizite Referenz).</p>
+
+<p>In diesem Kontext wird also der Begriff <em>Objekt</em> etwas breiter aufgefasst, als im Zusammenhang mit JavaScript-Objekten und beinhaltet außerdem auch Sichtbarkeitsbereiche von Funktionen (bzw. den globalen Sichtbarkeitsbereich).</p>
+
+<h3 id="Referenzzählung_der_Garbage_Collection">Referenzzählung der Garbage Collection</h3>
+
+<p>Dies ist der naivste Algorithmus der Garbage Collection. Er reduziert einfach "ein Objekt wird nicht mehr benötigt" auf "kein anderes Objekt referenziert auf das Objekt". Ein Objekt wird also dann von der Garbage Collection entsorgt, wenn keine Referenzen auf das Objekt existieren.</p>
+
+<h4 id="Beispiel">Beispiel</h4>
+
+<pre class="brush: js">var o = {
+  a: {
+    b:2
+  }
+}; // 2 Objekte wurden erstellt. Das eine referenziert auf das andere als dessen Eigenschaft.
+// Das Objekt a wird referenziert, weil es der Variablen o zugewiesen wurde.
+// Da auf alle Objekte irgendwie referenziert wird, kann keines entsogt werden
+
+var o2 = o; // Die Variable 'o2' ist das zweite Objekt mit einer Referenz auf das Objekt
+o = 1; // nun hat das Objekt, das sich ursprünglich in o befand eine einzige Referenz durch 'o2'
+
+var oa = o2.a; // Referenz auf die Eigenschaft 'a' des Objekts.
+// Nun hat das Objekt 2 Referenzen: Eine als Eigenschaft, die andere als Variable 'oa'
+
+o2 = "yo"; // Das objekt, welches sich anfangs in 'o' befand hat nun keine Referenzen mehr
+// und kann von der Garbage Collection entsorgt werden.
+// Jedoch wird die Eigenschaft 'a' noch immer durch die Variable 'oa' referenziert und kann daher nicht freigegeben werden
+
+oa = null; // Nun existieren keine Refrenzen mehr auf die Eigenschaft 'a'
+// und das Objekt kann entsorgt werden.
+</pre>
+
+<h4 id="Beschränkung_gegenseitige_Referenzen">Beschränkung: gegenseitige Referenzen</h4>
+
+<p>Dieser naive Algorithmus ist deshalb beschränkt, weil Objekte, die gegenseitig aufeinender referenzieren, gar nicht mehr benötigt werden könnten, aber nicht entsorgt werden dürfen, da noch auf sie referenziert wird.</p>
+
+<pre class="brush: js">function f(){
+  var o = {};
+  var o2 = {};
+  o.a = o2; // o referenziert o2
+  o2.a = o; // o2 referenziert o
+
+  return "azerty";
+}
+
+f();
+// die Objekte werden erzeugt und referenzieren gegenseitig aufeinander.
+// Sie werden außerhalb des Sichtbarkeitsbereichs der Funktion nicht verwendet
+// und könnten daher nach der Funktionsausführung freigegeben werden
+// Der Referenzzählungsalgorithmus erkennt jedoch nur, dass auf beide Objekte
+// noch referenziert wird und entsorgt daher keines der beiden
+</pre>
+
+<h4 id="Praxisbeispiel">Praxisbeispiel</h4>
+
+<p>Bei Internet Explorer 6, 7 ist bekannt, dass sie einen Garbage Collector mit Referenzzählung für DOM-Objekte einsetzen. Es gibt daher ein bekanntes Muster für die systematische Erzeugung von Speicherlecks:</p>
+
+<pre class="brush: js">var div = document.createElement("div");
+div.onclick = function(){
+  doSomething();
+}; // Das div hat eine Referenz über die Event-Handler-Eigenschaft 'onclick'.
+// Der Handler hat auch eine Referenz auf das div, da die div-Variable
+// innerhalb Sichtbarkeitsbereich der Funktion ansprechbar ist.
+// Dieser Kreislauf sorgt dafür, dass beide Objekte nicht entsorgt werden
+// und ein Speicherleck entsteht
+</pre>
+
+<h3 id="Mark-and-Sweep-Algorithmus_2"><span class="mw-headline" id="Mark-and-Sweep-Algorithmus">Mark-and-Sweep-Algorithmus</span></h3>
+
+<p>Dieser Algorithmus reduziert die Definition "ein Objekt wird nicht mehr gebraucht" auf "ein Objekt ist nicht erreichbar".</p>
+
+<p>Der Algorithmus nimmt an, dass ein Satz von <em>root</em>-Objekten (bei JavaScript das globale Objekt) existiert. Der Algorithmus sucht dann von diesen Anfangsobjekten aus alle referenzierten Objekte, dann von den referenzierten Objekten alle Objekte, die auf andere Objekte referenzieren und so weiter. Auf diese Weise erkennt der Algorithmus alle <em>erreichbaren</em> Objekte und sammelt alle unerreichbaren Objekte.</p>
+
+<p>Dieser Algorithmus ist besser als der vorherige, da Objekte, die nicht referenziert sind als unerreichbar gelten, jedoch Objekte, die unerreichbar sind, nicht unbedingt keine Referenzen haben (gegenseitige Referenz).</p>
+
+<p>Im Jahr 2012 arbeiten alle modernen Browser mit einem Mark-and-Sweep-Garbage Collector. Alle Verbesserungen der letzen Jahre im Bereich der Garbage Collection bei JavaScript (generational/incremental/concurrent/parallel garbage collection) sind Verbesserungen der Implementierung des Algorithmus, jedoch keine Änderungen des Algorithmus selbst oder der Definition von "ein Objekt wird nicht mehr gebraucht".</p>
+
+<h4 id="Gegenseitige_Verweise_stellen_kein_Problem_mehr_dar">Gegenseitige Verweise stellen kein Problem mehr dar</h4>
+
+<p>Bei dem Beispiel oben zu gegenseitigen Verweisen wird auf die beiden Objekte nicht mehr von einem Objekt aus verwiesen, welches über das globale Objekt erreichbar ist. Daher werden sie vom Garbage Collector als unerreichbar angesehen.</p>
+
+<p>Dasselbe gilt für das nächste Beispiel. Sobald das div und der Handler unerreichbar geworden sind, werden sie vom Gabage Collector entsorgt, obwohl sie noch gegenseitig aufeinander verweisen.</p>
+
+<h4 id="Einschränkung_Objekte_müssen_explizit_unerreichbar_gemacht_werden">Einschränkung: Objekte müssen explizit unerreichbar gemacht werden</h4>
+
+<p>Obwohl dies als Einschränkung gilt, gibt es in der Praxis kaum solche Situationen und deshalb denkt kaum jemand über die Garbage Collection nach.</p>
+
+<h2 id="Weitere_Informationen">Weitere Informationen</h2>
+
+<ul>
+ <li><a class="external" href="http://www.ibm.com/developerworks/web/library/wa-memleak/">IBM-Artikel "Memory leak patterns in JavaScript" (2007)</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/magazine/ff728624.aspx">Kangax-Artikel zu Event Handlern und Vermeidung von Speicherlecks (2010)</a></li>
+ <li><a href="https://wiki.mozilla.org/Performance:Leak_Tools" title="https://wiki.mozilla.org/Performance:Leak_Tools">Performance: Leak Tools</a></li>
+</ul>
diff --git a/files/de/web/javascript/typed_arrays/index.html b/files/de/web/javascript/typed_arrays/index.html
new file mode 100644
index 0000000000..d9d5654667
--- /dev/null
+++ b/files/de/web/javascript/typed_arrays/index.html
@@ -0,0 +1,230 @@
+---
+title: JavaScript typed arrays
+slug: Web/JavaScript/Typed_arrays
+tags:
+  - Guide
+  - JavaScript
+translation_of: Web/JavaScript/Typed_arrays
+---
+<div>{{JsSidebar("Advanced")}}</div>
+
+<div> </div>
+
+<div>Typisierte Arrays (Typed Arrays) in JavaScript sind Array-ähnliche Objekte, die den Zugriff auf binäre Rohdaten ermöglichen. {{jsxref("Array")}}-Objekte wachsen und verkleinern sich dynamisch und können jeden beliebigen JavaScript-Wert aufnehmen. JavaScript-Engines führen Optimierungen durch, damit diese Arrays schnell verarbeitet werden können. Da aber Applikationen immer mächtiger werden und neue Features wie Audio- und Videobearbeitung oder der Zugriff auf Rohdaten mit WebSockets hinzugefügt werden, gibt es Situationen, in denen es hilfreich ist diese binären Rohdaten schnell und einfach über typisierte Arrays im JavaScript-Code zu manipulieren.</div>
+
+<div> </div>
+
+<div>Typisierte Arrays sollten nicht mit den normalen Arrays verwechselt werden. Ein Aufruf von {{jsxref("Array.isArray()")}} liefert false zurück. Außerdem werden nicht alle Array-Methoden wie beispielsweise push und pop unterstützt.</div>
+
+<div> </div>
+
+<h2 id="Puffer_und_Sichten_Architektur_typisierter_Arrays">Puffer und Sichten: Architektur typisierter Arrays</h2>
+
+<p>Um maximale Flexibilität und Effizienz zu schaffen, spalten typisierte Arrays in JavaScript die Durchführung in <strong>Puffer</strong> und <strong>Sichten. </strong>Ein Puffer (vom {{jsxref("ArrayBuffer")}}-Objekt durchgeführt) ist ein Objekt, das eine Menge von Daten verkörpert. Dazu gehört kein echtes Format und es wird kein Mechanismus angeboten, um auf den Inhalt zuzugreifen. Um Zugang zu diesem Speicher zu schaffen, muss man eine Sicht benutzen. Eine Sicht liefert einen Kontext, der diese Daten in ein echtes, typisiertes Array umwandelt. Genauer gesagt gibt dieser Kontext einen Datentypen, einen Versatz und die Anzahl der Elemente an.</p>
+
+<p><img alt="Typed arrays in an ArrayBuffer" src="https://mdn.mozillademos.org/files/8629/typed_arrays.png" style="height: 278px; width: 666px;"></p>
+
+<h3 id="ArrayBuffer">ArrayBuffer</h3>
+
+<p>Der {{jsxref("ArrayBuffer")}} ist ein Datentyp, der einen generischen, binären Datenpuffer mit festgelegter Länge darstellt. Es ist nicht möglich den Inhalt dieses Puffers (<span style="font-family: consolas,monaco,andale mono,monospace;">ArrayBuffer</span>) direkt zu bearbeiten; stattdessen erstellt man selbst eine Sicht durch ein typisiertes Array oder eine {{jsxref("DataView")}}. Dadurch wird der Puffer als ein spezifisches Format dargestellt, das benutzt wird, um den Inhalt des Puffers zu modifizieren und lesen.</p>
+
+<h3 id="Sichten_von_typisierten_Arrays">Sichten von typisierten Arrays</h3>
+
+<p>Sichten, die durch typisierte Arrays erstellt wurden, haben selbst beschreibende Namen, und bieten Sichten für alle gebräuchlichen numerischen Typen wie <code style="font-style: normal;">Int8</code>, <code style="font-style: normal;">Uint32</code>, <code style="font-style: normal;">Float64</code><code style="font-style: normal;"> </code>usw. an. Es gibt auch eine spezielle Sicht von typisierten Arrays, nämlich das <code style="font-style: normal;">Uint8ClampedArray</code>. Dieses begrenzt die Werte auf 0 bis 255, was nützlich beispielsweise für die <a href="/en-US/docs/Web/API/ImageData">Datenverarbeitung einer Leinwand</a> ist.</p>
+
+<p>{{page("/de/docs/Web/JavaScript/Reference/Global_Objects/TypedArray", "TypedArray_objects")}}</p>
+
+<h3 id="DataView">DataView</h3>
+
+<p>Die {{jsxref("DataView")}} (zu deutsch "Daten-Sicht") ist ein low-level Interface, das Getter und Setter zum Lesen und Schreiben beliebiger Daten in den Buffer anbietet. Das ist beispielsweise nützlich wenn man mit verschiedenen Datentypen arbeiten muss. Sichten von typisierten Arrays sind in der nativen Byte-Reihenfolge Ihrer Plattform (siehe {{Glossary("Endianness")}}. Mit einem <code>DataView</code> können Sie die Byte-Reihenfolge kontrollieren. Standardmässig ist Big-Endian eingestellt, Sie können es in den Gettern und Settern auf Little-Endian umstellen.</p>
+
+<h2 id="Web_APIs_mit_typisierten_Arrays">Web APIs mit typisierten Arrays</h2>
+
+<dl>
+ <dt><a href="/de/docs/Web/API/FileReader#readAsArrayBuffer()" title="/en-US/docs/Web/API/FileReader#readAsArrayBuffer()"><code>FileReader.prototype.readAsArrayBuffer()</code></a></dt>
+ <dd>Die <code>FileReader.prototype.readAsArrayBuffer()</code> Methode liest den Inhalt aus einem gegebenen <a href="/en-US/docs/Web/API/Blob" title="/en-US/docs/DOM/Blob"><code>Blob</code></a> oder einer <a href="/de/docs/Web/API/File" title="/de/docs/DOM/File"><code>Datei</code></a>.</dd>
+ <dt><a href="/en-US/docs/Web/API/XMLHttpRequest#send()" title="/en-US/docs/Web/API/XMLHttpRequest#send()"><code>XMLHttpRequest.prototype.send()</code></a></dt>
+ <dd>Die <code>send()</code> Methode einer <code>XMLHttpRequest</code>-Instanz unterstützt nun Typed Arrays und {{jsxref("ArrayBuffer")}} Objekte als Argument.</dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/ImageData">ImageData.data</a></code></dt>
+ <dd>Ein {{jsxref("Uint8ClampedArray")}} welches die Daten in der RGBA-Reihenfolge enthält, mit Integer-Werten zwischen 0 und 255 inklusiv.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Sichten_als_Puffer_benutzen">Sichten als Puffer benutzen</h3>
+
+<p>Als erstes muss ein Puffer erstellt werden, hier mit einer festgelegten Länge von 16 Bytes:</p>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(16);
+</pre>
+
+<p>Jetzt haben wir einen Speicherblock mit Bytes, die mit 0 vorinitialisiert sind. Darüber hinaus lässt sich nicht viel damit anstellen. Wir können überprüfen, ob er wirklich 16 Bytes lang ist, und das war's auch schon.</p>
+
+<pre class="brush:js">if (buffer.byteLength === 16) {
+  console.log("Yes, it's 16 bytes.");
+} else {
+  console.log("Oh no, it's the wrong size!");
+}
+</pre>
+
+<p>Bevor wir wirklich damit arbeiten können, müssen wir eine Sicht erzeugen. Wir erstellen eine Sicht, der die Daten in dem Puffer als ein Array von vorzeichenbehafteten 32-Bit-Integern sieht.</p>
+
+<pre class="brush:js">var int32View = new Int32Array(buffer);
+</pre>
+
+<p>Jetzt können wir auf die Elemente in dem Array wie in jedem normalen Array zugreifen.</p>
+
+<pre class="brush:js">for (var i = 0; i &lt; int32View.length; i++) {
+  int32View[i] = i * 2;
+}
+</pre>
+
+<p>Der obige Code füllt die 4 Einträge in dem Array (4 Einträge mit je 4 Bytes ergeben 16 Bytes insgesamt) mit den Werten 0, 2, 4 und 6.</p>
+
+<h3 id="Multiple_views_on_the_same_data">Multiple views on the same data</h3>
+
+<p>Things start to get really interesting when you consider that you can create multiple views onto the same data. For example, given the code above, we can continue like this:</p>
+
+<pre class="brush:js">var int16View = new Int16Array(buffer);
+
+for (var i = 0; i &lt; int16View.length; i++) {
+  console.log("Entry " + i + ": " + int16View[i]);
+}
+</pre>
+
+<p>Here we create a 16-bit integer view that shares the same buffer as the existing 32-bit view and we output all the values in the buffer as 16-bit integers. Now we get the output 0, 0, 2, 0, 4, 0, 6, 0.</p>
+
+<p>You can go a step farther, though. Consider this:</p>
+
+<pre class="brush:js">int16View[0] = 32;
+console.log("Entry 0 in the 32-bit array is now " + int32View[0]);
+</pre>
+
+<p>The output from this is "Entry 0 in the 32-bit array is now 32". In other words, the two arrays are indeed simply views on the same data buffer, treating it as different formats. You can do this with any <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_objects" title="JavaScript typed arrays/ArrayBufferView#Typed array subclasses">view types</a>.</p>
+
+<h3 id="Working_with_complex_data_structures">Working with complex data structures</h3>
+
+<p>By combining a single buffer with multiple views of different types, starting at different offsets into the buffer, you can interact with data objects containing multiple data types. This lets you, for example, interact with complex data structures from <a href="/en-US/docs/Web/WebGL" title="WebGL">WebGL</a>, data files, or C structures you need to use while using <a href="/en-US/docs/Mozilla/js-ctypes" title="js-ctypes">js-ctypes</a>.</p>
+
+<p>Consider this C structure:</p>
+
+<pre class="brush:cpp">struct someStruct {
+  unsigned long id;
+  char username[16];
+  float amountDue;
+};</pre>
+
+<p>You can access a buffer containing data in this format like this:</p>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(24);
+
+// ... read the data into the buffer ...
+
+var idView = new Uint32Array(buffer, 0, 1);
+var usernameView = new Uint8Array(buffer, 4, 16);
+var amountDueView = new Float32Array(buffer, 20, 1);</pre>
+
+<p>Then you can access, for example, the amount due with <code>amountDueView[0]</code>.</p>
+
+<div class="note"><strong>Note:</strong> The <a href="http://en.wikipedia.org/wiki/Data_structure_alignment" title="http://en.wikipedia.org/wiki/Data_structure_alignment">data structure alignment</a> in a C structure is platform-dependent. Take precautions and considerations for these padding differences.</div>
+
+<h3 id="Conversion_to_normal_arrays">Conversion to normal arrays</h3>
+
+<p>After processing a typed array, it is sometimes useful to convert it back to a normal array in order to benefit from the {{jsxref("Array")}} prototype. This can done using {{jsxref("Array.from")}}, or using the following code where <code>Array.from</code> is unsupported.</p>
+
+<pre class="brush:js">var typedArray = new Uint8Array([1, 2, 3, 4]),
+    normalArray = Array.prototype.slice.call(typedArray);
+normalArray.length === 4;
+normalArray.constructor === Array;
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Abgelöst von ECMAScript 6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-typedarray-objects', 'TypedArray Objects')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initiale Definition im ECMA-Standard.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-typedarray-objects', 'TypedArray Objects')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>Chrome 7 includes support for <code>ArrayBuffer</code>, <code>Float32Array</code>, <code>Int16Array</code>, and <code>Uint8Array</code>. Chrome 9 and Firefox 15 add support for <code>DataView</code> objects. Internet Explorer 10 supports all types except <code>Uint8ClampedArray</code> and <code>ArrayBuffer.prototype.slice</code> which are present starting in Internet Explorer 11.</p>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>7.0</td>
+   <td>{{ CompatGeckoDesktop("2") }}</td>
+   <td>10</td>
+   <td>11.6</td>
+   <td>5.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("2") }}</td>
+   <td>10</td>
+   <td>11.6</td>
+   <td>4.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer" title="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer">Getting <code>ArrayBuffer</code>s or typed arrays from <em>Base64</em>-encoded strings</a></li>
+ <li><a href="/en-US/docs/Code_snippets/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – a C-like representation of strings based on typed arrays</a></li>
+ <li><a href="https://hacks.mozilla.org/2011/12/faster-canvas-pixel-manipulation-with-typed-arrays">Faster Canvas Pixel Manipulation with Typed Arrays</a></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/webgl/typed_arrays">Typed Arrays: Binary Data in the Browser</a></li>
+ <li>{{Glossary("Endianness")}}</li>
+</ul>
diff --git a/files/de/web/javascript/vergleiche_auf_gleichheit_und_deren_verwendung/index.html b/files/de/web/javascript/vergleiche_auf_gleichheit_und_deren_verwendung/index.html
new file mode 100644
index 0000000000..2b9be0a283
--- /dev/null
+++ b/files/de/web/javascript/vergleiche_auf_gleichheit_und_deren_verwendung/index.html
@@ -0,0 +1,424 @@
+---
+title: Vergleiche auf Gleichheit und deren Verwendung
+slug: Web/JavaScript/Vergleiche_auf_Gleichheit_und_deren_Verwendung
+translation_of: Web/JavaScript/Equality_comparisons_and_sameness
+---
+<div>{{jsSidebar("Intermediate")}}</div>
+
+<div class="summary">
+<p>JavaScript bietet drei verschiedene Operationen an, um Werte zu vergleichen:</p>
+
+<ul>
+ <li>strikte Gleichheit (oder "triple equals" or "identity") mit <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Identity">===</a>,</li>
+ <li>lose Gleichheit ("double equals") mit <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Equality">==</a>,</li>
+ <li>und <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> (neu in ECMAScript 2015).</li>
+</ul>
+
+<p>Die Wahl der Operation hängt von der Art des gewünschten Vergleichs auf Gleichheit ab.</p>
+</div>
+
+<p>Kurz gesagt nimmt double equals eine Typkonvertierung der Operanden vor, bevor der Vergleich der Werte gemacht wird. Bei triple equals werden die Werte ohne vorherige Typkonvertierung miteinander verglichen. Wenn sich die Datentypen der beiden Operanden unterscheiden liefert triple equals immer <code>false</code> zurück. <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> verhält sich wie triple equals und bietet darüber hinaus eine spezielle Behandlung für <code>NaN</code> und <code>-0</code> und <code>+0</code> an. <code>-0</code> und <code>+0</code> sind für <code>Object.is</code> ungleich während <code>Object.is(NaN, NaN) true</code> ist. Laut IEEE 754 ergibt ein Vergleich von zwei <code>NaN</code> mit double equals oder triple equals <code>false</code>. Diese drei Operationen unterscheiden sich ihrere Behandlung von primitiven Datentypen. Es wird nicht geprüft, ob die beiden Operanden konzeptionell diesselbe Struktur besitzen. Für die nichtprimitiven Objekte x und y, welche diesselbe Struktur besitzen aber zwei unterschiedliche Objekte sind, ergeben die drei Operationen <code>false</code>.</p>
+
+<h2 id="Strikte_Gleichheit_mit">Strikte Gleichheit mit <code>===</code></h2>
+
+<p>Strikte Gleichheit prüft zwei Werte auf Gleichheit. Keiner der Werte wird vor dem Vergleich implizit konvertiert. Wenn die Werte verschiedene Datentypen haben, werden die Werte als ungleich betrachtet. Anderenfalls, wenn die Werte denselben Datentyp haben und keine Zahlen sind, werden sie als gleich betrachtet, solange sie denselben Wert haben. Wenn beide Werte Zahlen sind, werden sie als gleich betrachtet, solange beide nicht NaN sind und denselben Wert haben oder der eine Wert +0 und der andere Wert -0 ist.</p>
+
+<pre class="brush: js">var num = 0;
+var obj = new String("0");
+var str = "0";
+var b = false;
+
+console.log(num === num); // true
+console.log(obj === obj); // true
+console.log(str === str); // true
+
+console.log(num === obj); // false
+console.log(num === str); // false
+console.log(obj === str); // false
+console.log(null === undefined); // false
+console.log(obj === null); // false
+console.log(obj === undefined); // false
+</pre>
+
+<p>Strikte Gleichheit ist fast immer die am meisten geeignete Vergleichsoperation. Für alle Werte, die keine Zahlen sind, verwendet sie die naheliegende Semantik: ein Wert ist nur mit sich selbst gleich. Für Zahlen kommt eine leicht unterschiedliche Semantik zum Einsatz, da zwei Grenzfälle berücksichtigt werden müssen.  Im ersten Grenzfall kann die Zahl 0 als Gleitkommazahl ein positives oder negatives Vorzeichen haben. Dies kann zur Repräsentation von bestimmten mathematischen Lösungen nützlich sein. Da aber in den meisten Situationen nicht zwischen +0 und -0 unterschieden wird, behandelt die strikte Gleichheit diese zwei Werte als gleich. Der zweite Grenzfall ergibt sich dadruch, dass Gleitkommazahlen einen keine-Zahl Wert haben, <code>NaN</code> (not-a-number). Dadurch können Lösungen für schlecht definierte mathematische Probleme dargestellt werden (z.B.: negativ unendlich plus positiv undendlich). Strikte Gleichheit behandelt <code>NaN</code> als ungleich zu jedem anderen Wert und sich selbst. Der einzige Fall, in dem <code>(x !== x)</code> <code>true</code> ergibt, ist, wenn <code>x</code> den Wert <code>NaN</code> hat.</p>
+
+<h2 id="Lose_Gleichheit_mit">Lose Gleichheit mit <code>==</code></h2>
+
+<p>Lose Gleichheit vergleicht zwei Werte auf deren Gleichheit, <em>nachdem</em> beide zu demselben Datentyp konvertiert wurden. Nach der Konvertierung (ein oder beide Werte können konvertiert werden) wird der finale Vergleich wie bei <code>===</code> ausgeführt.  Lose Gleichheit ist <em>symmetrisch</em>: <code>A == B</code> hat immer dieselbe Semantik wie <code>B == A</code> für alle Werte von <code>A</code> und <code>B</code>.</p>
+
+<p>Der Vergleich auf Gleichheit wird wie folgt für Operanden mit den verschiedenen Datentypen ausgeführt:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row"> </th>
+   <th colspan="7" scope="col" style="text-align: center;">Operand B</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row"> </th>
+   <td> </td>
+   <td style="text-align: center;">Undefined</td>
+   <td style="text-align: center;">Null</td>
+   <td style="text-align: center;">Number</td>
+   <td style="text-align: center;">String</td>
+   <td style="text-align: center;">Boolean</td>
+   <td style="text-align: center;">Object</td>
+  </tr>
+  <tr>
+   <th colspan="1" rowspan="6" scope="row">Operand A</th>
+   <td>Undefined</td>
+   <td style="text-align: center;"><code>true</code></td>
+   <td style="text-align: center;"><code>true</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>IsFalsy(B)</code></td>
+  </tr>
+  <tr>
+   <td>Null</td>
+   <td style="text-align: center;"><code>true</code></td>
+   <td style="text-align: center;"><code>true</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>IsFalsy(B)</code></td>
+  </tr>
+  <tr>
+   <td>Number</td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>A === B</code></td>
+   <td style="text-align: center;"><code>A === ToNumber(B)</code></td>
+   <td style="text-align: center;"><code>ToNumber(B) === A</code></td>
+   <td style="text-align: center;"><code>ToPrimitive(B) == A</code></td>
+  </tr>
+  <tr>
+   <td>String</td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>B === ToNumber(A)</code></td>
+   <td style="text-align: center;"><code>A === B</code></td>
+   <td style="text-align: center;"><code>ToNumber(A) === ToNumber(B)</code></td>
+   <td style="text-align: center;"><code>ToPrimitive(B) == A</code></td>
+  </tr>
+  <tr>
+   <td>Boolean</td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>ToNumber(A) === B</code></td>
+   <td style="text-align: center;"><code>ToNumber(A) === ToNumber(B)</code></td>
+   <td style="text-align: center;"><code>A === B</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td>Object</td>
+   <td style="text-align: center;"><code>IsFalsy(A)</code></td>
+   <td style="text-align: center;"><code>IsFalsy(A)</code></td>
+   <td style="text-align: center;"><code>ToPrimitive(A) == B</code></td>
+   <td style="text-align: center;"><code>ToPrimitive(A) == B</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;">
+    <p><code>A === B</code></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>In der oberen Tabelle versucht <code>ToNumber(A)</code> sein Argument vor dem Vergleich in eine Zahl zu konvertieren. Das Verhalten ist äquivalent zu <code>+A</code> (der unäre + Operator).  <code>ToPrimitive(A)</code> versucht sein Argument, das ein Objekt ist, in einen primitiven Wert zu konvertieren. Dazu wird eine unterschiedliche Sequenz von <code>A.toString</code> und <code>A.valueOf</code> Methoden von <code>A</code> aufzurufen.</p>
+
+<p>Traditionell und laut ECMAScript sind alle Objekte lose ungleich zu <code>undefined</code> und <code>null</code>. Aber die meisten Webbbrowser erlauben einer sehr kleinen Menge von Objekten (speziell das <code>document.all</code> Objekt für jede Seite), dass sie sich in bestimmten Kontexten so verhalten, als ob sie den Wert <code>undefined</code> <em>emulieren</em>.  Lose Gleichheit ist ein derartiger Kontext. Daher ergibt die Methode <code>IsFalsy(A)</code> genau dann <code>true</code>, wenn A ein Objekt ist, das <code>undefined</code> <em>emuliert</em>. In allen anderen Fällen ist ein Objekt nie lose gleich zu <code>undefined</code> oder <code>null</code>.</p>
+
+<pre class="brush: js">var num = 0;
+var obj = new String("0");
+var str = "0";
+var b = false;
+
+console.log(num == num); // true
+console.log(obj == obj); // true
+console.log(str == str); // true
+
+console.log(num == obj); // true
+console.log(num == str); // true
+console.log(obj == str); // true
+console.log(null == undefined); // true
+
+// both false, except in rare cases
+console.log(obj == null);
+console.log(obj == undefined);
+</pre>
+
+<p>Manche Entwickler haben die Ansicht, dass die Verwendung der losen Gleichheit fast nie eine gute Idee ist. Das Resultat des<span style="line-height: 1.5;"> Vergleichs mit strikter Gleichheit ist einfacher vorherzusagen und die Auswertung ist schneller, da keine Konvertierung der Werte stattfindet</span><span style="line-height: 1.5;">.</span></p>
+
+<h2 id="Same-value_Gleichheit">Same-value Gleichheit</h2>
+
+<p>Same-value Gleichheit adressiert den dritten Fall: Bestimmung, ob zwei Werte in allen Kontexten <em>funktional identisch</em> sind. Dieser Anwendungsfall demonstriert eine Instanz des <a href="http://de.wikipedia.org/wiki/Liskovsches_Substitutionsprinzip" title="http://en.wikipedia.org/wiki/Liskov_substitution_principle">Liskovschen Substitutionsprinzip</a>. Eine Instanz tritt auf, wenn versucht wird ein nicht veränderbares Property zu verändern:</p>
+
+<pre class="brush: js">// Add an immutable NEGATIVE_ZERO property to the Number constructor.
+Object.defineProperty(Number, "NEGATIVE_ZERO",
+                      { value: -0, writable: false, configurable: false, enumerable: false });
+
+function attemptMutation(v)
+{
+  Object.defineProperty(Number, "NEGATIVE_ZERO", { value: v });
+}
+</pre>
+
+<p><code>Object.defineProperty</code> wird eine Exception werfen, wenn ein Versuch zum Verändern eines unveränderbares Property es verändern würde. Es passiert nichts, solange keine Veränderung stattfinden soll.  Wenn <code>v</code> <code>-0</code> ist, wurde keine Veränderung angefragt und somit wird keine Exception geworfen. Wenn <code>v</code> aber <code>+0</code> ist, hätte <code>Number.NEGATIVE_ZERO</code> nicht länger seinen unveränderbaren Wert. Wenn ein unveränderbares Property neudefiniert wird, wird der neu spezifizierte Wert intern mittels der Same-value Gleichheit mit dem aktuellen Wert verglichen.</p>
+
+<p>Die Same-value Gleichheit wird von der <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> Methode angeboten.</p>
+
+<h2 id="Abstrakte_Gleichheit_strikte_Gleichheit_und_same-value_Gleichheit_in_der_Spezifikation">Abstrakte Gleichheit, strikte Gleichheit und same-value Gleichheit in der Spezifikation</h2>
+
+<p>In ECMAScript 5 wird der Vergleich mit <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators"><code>==</code></a> in <a href="http://ecma-international.org/ecma-262/5.1/#sec-11.9.3" title="http://ecma-international.org/ecma-262/5.1/#sec-11.9.3">Section 11.9.3, The Abstract Equality Algorithm</a> beschrieben. Der <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators"><code>===</code></a> Vergleich ist in <a href="http://ecma-international.org/ecma-262/5.1/#sec-11.9.6" title="http://ecma-international.org/ecma-262/5.1/#sec-11.9.6">11.9.6, The Strict Equality Algorithm</a> zu finden. (Diese beiden Abschnitte sind kurz und verständlich. Hinweis: zuerst den Abschnitt Strict Equality Algorithm lesen) ECMAScript 5 beschreibt auch die same-value Gleichheit in <a href="http://ecma-international.org/ecma-262/5.1/#sec-9.12" title="http://ecma-international.org/ecma-262/5.1/#sec-9.12">Section 9.12, The SameValue Algorithm</a> für die interne Verwendung in der JavaScript Engine. Dieser Abschnitt ist hauptsächlich derselbe wie Strict Equality Algorithm mit der Ausnahme, dass sich 11.9.6.4 und 9.12.4 in der Behandlung von Zahlen (<a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number"><code>Number</code></a>) unterscheiden. ECMAScript 2015 schlägt vor, dass dieser Algorithmus über <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> angeboten wird.</p>
+
+<p>Wir können erkennen, dass mit double und triple equals, mit der Ausnahme der vorhergehenden Typkonvertierung in 11.9.6.1, der Strict Equality Algorithm eine Teilmenge des Abstract Equality Algorithm ist, weil 11.9.6.2–7 dem Abschnitt 11.9.3.1.a–f entspricht.</p>
+
+<h2 id="A_model_for_understanding_equality_comparisons">A model for understanding equality comparisons?</h2>
+
+<p>Prior to ES2015, you might have said of double equals and triple equals that one is an "enhanced" version of the other. For example, someone might say that double equals is an extended version of triple equals, because the former does everything that the latter does, but with type conversion on its operands. E.g., <code>6 == "6"</code>. (Alternatively, someone might say that double equals is the baseline, and triple equals is an enhanced version, because it requires the two operands to be the same type, so it adds an extra constraint. Which one is the better model for understanding depends on how you choose to view things.)</p>
+
+<p>However, this way of thinking about the built-in sameness operators is not a model that can be stretched to allow a place for ES2015's <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> on this "spectrum". <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> isn't simply "looser" than double equals or "stricter" than triple equals, nor does it fit somewhere in between (i.e., being both stricter than double equals, but looser than triple equals). We can see from the sameness comparisons table below that this is due to the way that <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> handles <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a>. Notice that if <code>Object.is(NaN, NaN)</code> evaluated to <code>false</code>, we <em>could</em> say that it fits on the loose/strict spectrum as an even stricter form of triple equals, one that distinguishes between <code>-0</code> and <code>+0</code>. The <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a> handling means this is untrue, however. Unfortunately, <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> simply has to be thought of in terms of its specific characteristics, rather than its looseness or strictness with regard to the equality operators.</p>
+
+<table class="standard-table">
+ <caption>Sameness Comparisons</caption>
+ <thead>
+  <tr>
+   <th scope="col" style="text-align: center;">x</th>
+   <th scope="col" style="text-align: center;">y</th>
+   <th scope="col" style="width: 10em; text-align: center;"><code>==</code></th>
+   <th scope="col" style="width: 10em; text-align: center;"><code>===</code></th>
+   <th scope="col" style="width: 10em; text-align: center;"><code>Object.is</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>undefined</code></td>
+   <td><code>undefined</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>null</code></td>
+   <td><code>null</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>true</code></td>
+   <td><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>"foo"</code></td>
+   <td><code>"foo"</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>{ foo: "bar" }</code></td>
+   <td><code>x</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>0</code></td>
+   <td><code>0</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>+0</code></td>
+   <td><code>-0</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>0</code></td>
+   <td><code>false</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>""</code></td>
+   <td><code>false</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>""</code></td>
+   <td><code>0</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>"0"</code></td>
+   <td><code>0</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>"17"</code></td>
+   <td><code>17</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>[1,2]</code></td>
+   <td><code>"1,2"</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>new String("foo")</code></td>
+   <td><code>"foo"</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>null</code></td>
+   <td><code>undefined</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>null</code></td>
+   <td><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>undefined</code></td>
+   <td><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>{ foo: "bar" }</code></td>
+   <td><code>{ foo: "bar" }</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>new String("foo")</code></td>
+   <td><code>new String("foo")</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>0</code></td>
+   <td><code>null</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>0</code></td>
+   <td><code>NaN</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>"foo"</code></td>
+   <td><code>NaN</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>NaN</code></td>
+   <td><code>NaN</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="When_to_use_Object.is_versus_triple_equals">When to use <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> versus triple equals</h2>
+
+<p>Aside from the way it treats <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a>, generally, the only time <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a>'s special behavior towards zeros is likely to be of interest is in the pursuit of certain meta-programming schemes, especially regarding property descriptors when it is desirable for your work to mirror some of the characteristics of <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty"><code>Object.defineProperty</code></a>. If your use case does not require this, it is suggested to avoid <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> and use <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators"><code>===</code></a> instead. Even if your requirements involve having comparisons between two <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a> values evaluate to <code>true</code>, generally it is easier to special-case the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a> checks (using the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN"><code>isNaN</code></a> method available from previous versions of ECMAScript) than it is to work out how surrounding computations might affect the sign of any zeros you encounter in your comparison.</p>
+
+<p>Here's an in-exhaustive list of built-in methods and operators that might cause a distinction between <code>-0</code> and <code>+0</code> to manifest itself in your code:</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#-_.28Unary_Negation.29" title="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators"><code>- (unary negation)</code></a></dt>
+</dl>
+
+<dl>
+ <dd>
+ <p>It's obvious that negating <code>0</code> produces <code>-0</code>. But the abstraction of an expression can cause <code>-0</code> to creep in when you don't realize it. For example, consider:</p>
+
+ <pre class="brush:js">let stoppingForce = obj.mass * -obj.velocity</pre>
+
+ <p>If <code>obj.velocity</code> is <code>0</code> (or computes to <code>0</code>), a <code>-0</code> is introduced at that place and propogates out into <code>stoppingForce</code>.</p>
+ </dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2"><code>Math.atan2</code></a></dt>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/ceil" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/ceil"><code>Math.ceil</code></a></dt>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow"><code>Math.pow</code></a></dt>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round"><code>Math.round</code></a></dt>
+</dl>
+
+<dl>
+ <dd>It's possible for a <code>-0</code> to be introduced into an expression as a return value of these methods in some cases, even when no <code>-0</code> exists as one of the parameters. E.g., using <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow"><code>Math.pow</code></a> to raise <code>-<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code> to the power of any negative, odd exponent evaluates to <code>-0</code>. Refer to the documentation for the individual methods.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor"><code>Math.floor</code></a></dt>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max"><code>Math.max</code></a></dt>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/min" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/min"><code>Math.min</code></a></dt>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sin" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sin"><code>Math.sin</code></a></dt>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt"><code>Math.sqrt</code></a></dt>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/tan" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/tan"><code>Math.tan</code></a></dt>
+</dl>
+
+<dl>
+ <dd>It's possible to get a <code>-0</code> return value out of these methods in some cases where a <code>-0</code> exists as one of the parameters. E.g., <code>Math.min(-0, +0)</code> evalutes to <code>-0</code>. Refer to the documentation for the individual methods.</dd>
+</dl>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">~</a></code></dt>
+ <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">&lt;&lt;</a></code></dt>
+ <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">&gt;&gt;</a></code></dt>
+ <dd>Each of these operators uses the ToInt32 algorithm internally. Since there is only one representation for 0 in the internal 32-bit integer type, <code>-0</code> will not survive a round trip after an inverse operation. E.g., both <code>Object.is(~~(-0), -0)</code> and <code>Object.is(-0 &lt;&lt; 2 &gt;&gt; 2, -0)</code> evaluate to <code>false</code>.</dd>
+</dl>
+
+<p>Relying on <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> when the signedness of zeros is not taken into account can be hazardous. Of course, when the intent is to distinguish between <code>-0</code> and <code>+0</code>, it does exactly what's desired.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="http://dorey.github.io/JavaScript-Equality-Table/">JS Comparison Table</a></li>
+</ul>
diff --git a/files/de/web/manifest/index.html b/files/de/web/manifest/index.html
new file mode 100644
index 0000000000..fa42846962
--- /dev/null
+++ b/files/de/web/manifest/index.html
@@ -0,0 +1,423 @@
+---
+title: Web App Manifest
+slug: Web/Manifest
+translation_of: Web/Manifest
+---
+<p>{{SeeCompatTable}}</p>
+
+<p>Das Web-App-Manifest liefert Informationen über eine Anwendung (wie Name, Autor, Icon und Beschreibung) in einer JSON-Textdatei. Der Zweck des Manifests ist es, Web-Anwendungen auf dem Homescreen eines Geräts zu installieren, was den Benutzern einen schnelleren Zugriff und eine umfassendere Erfahrung bietet.</p>
+
+<p>Web-App-Manifeste sind Teil einer Sammlung von Web-Technologien namens <a href="/en-US/docs/Web/Apps/Progressive">progressive Web-Anwendungen</a>, welche wiederum auf dem Homescreen eines Geräts installiert werden können, ohne dass der Benutzer sie über einen App Store installieren muss. Außerdem stellen sie auch andere Technologien wie z.B. die Offline-Fähigkeit und Push-Benachrichtigungen zur Verfügung.</p>
+
+<h2 id="Deploying_a_manifest_with_the_link_tag" name="Deploying_a_manifest_with_the_link_tag">Bereitstellung eines Manifests</h2>
+
+<p>Web-App-Manifeste werden in Ihren HTML-Seiten mit einem Link-Tag im Kopf Ihres Dokuments bereitgestellt:</p>
+
+<div class="highlight">
+<pre class="notranslate"><code class="language-html"><span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"manifest"</span> <span class="na">href=</span><span class="s">"/manifest.webmanifest"</span><span class="nt">&gt;</span></code></pre>
+</div>
+
+<h2 id="Beispiel_Manifest">Beispiel Manifest</h2>
+
+<pre class="brush: json notranslate">{
+  "name": "HackerWeb",
+  "short_name": "HackerWeb",
+  "start_url": ".",
+  "display": "standalone",
+<span class="pl-s"><span class="pl-pds">  "</span>background_color<span class="pl-pds">"</span></span> :<span class="pl-s"><span class="pl-pds"> "</span>#fff<span class="pl-pds">"</span></span> ,
+  "description": "Eine einfach lesbare Hacker News App.",
+  "icons": [{
+    "src": "images/touch/homescreen48.png",
+    "sizes": "48x48",
+    "type": "image/png"
+  }, {
+    "src": "images/touch/homescreen72.png",
+    "sizes": "72x72",
+    "type": "image/png"
+  }, {
+    "src": "images/touch/homescreen96.png",
+    "sizes": "96x96",
+    "type": "image/png"
+  }, {
+    "src": "images/touch/homescreen144.png",
+    "sizes": "144x144",
+    "type": "image/png"
+  }, {
+    "src": "images/touch/homescreen168.png",
+    "sizes": "168x168",
+    "type": "image/png"
+  }, {
+    "src": "images/touch/homescreen192.png",
+    "sizes": "192x192",
+    "type": "image/png"
+  }],
+  "related_applications": [{
+    "platform": "Web"
+  }, {
+    "platform": "play",
+    "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
+  }]
+}</pre>
+
+<h2 id="Eigenschaften">Eigenschaften</h2>
+
+<h3 id="background_color"><code>background_color</code></h3>
+
+<p>Definiert die erwartete Hintergrundfarbe für die Webanwendung. Dieser Wert wiederholt, was bereits im Anwendungsstylesheet verfügbar ist, kann aber von Browsern verwendet werden, um die Hintergrundfarbe einer Webanwendung zu zeichnen, wenn das Manifest verfügbar ist, bevor das Stylesheet geladen ist. Dies schafft einen reibungslosen Übergang zwischen dem Starten der Webanwendung und dem Laden des Inhalts der Anwendung.</p>
+
+<pre class="brush: json notranslate">"background_color": "red"</pre>
+
+<div class="note">
+<p><strong>Hinweis</strong> : Die  <code>background_color</code> Eigenschaft soll nur die Benutzererfahrung verbessern, während eine Webanwendung geladen wird und sollte nicht vom Browser als Hintergrundfarbe verwendet werden, wenn das Stylesheet der Webanwendung verfügbar ist.</p>
+</div>
+
+<h3 id="description"><code>description</code></h3>
+
+<p>Bietet eine allgemeine Beschreibung dessen, was die Web-Anwendung tut.</p>
+
+<pre class="brush: json notranslate">"<code>description</code>": "Die App, die dir hilft, das beste Essen in der Stadt zu finden!"</pre>
+
+<h3 id="dir"><code>dir</code></h3>
+
+<p>Definiert die primäre Textrichtung für die <code>name</code>, <code>short_name</code> und <code>description</code> Eigenschaften. Zusammen mit der  <code>lang</code> Eigenschaft kann es helfen, die korrekte Darstellung von rechts-nach-links-Sprachen zu liefern.</p>
+
+<pre class="brush: json notranslate" dir="rtl">"dir": "rtl",
+"lang": "ar",
+"short_name": "أنا من التطبيق!"</pre>
+
+<p>Sie kann einer der folgenden Werte sein:</p>
+
+<ul>
+ <li><code>ltr</code> (links nach rechts)</li>
+ <li><code>rtl</code> (rechts nach links)</li>
+ <li><code>auto</code> (Weist den Browser an, den Unicode-bidirektionalen Algorithmus zu verwenden, um die Textrichtung zu schätzen.)</li>
+</ul>
+
+<div class="note">
+<p><strong>Hinweis</strong> : Wenn der Wert weggelassen wird, ist er standardmäßig auf <code>auto</code>.</p>
+</div>
+
+<h3 id="display"><code>display</code></h3>
+
+<p>Definiert den vom Entwickler bevorzugten Anzeigemodus für die Webanwendung.</p>
+
+<pre class="brush: json notranslate">"display": "standalone"</pre>
+
+<p>Gültige Werte sind:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Anzeigemodus</th>
+   <th scope="col">Beschreibung</th>
+   <th scope="col">Fallback-Anzeigemodus</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>fullscreen</code></td>
+   <td>Es wird der gesamte verfügbare Anzeigebereich verwendet und kein User agent {{Glossary("Chrome")}} wird angezeigt.</td>
+   <td><code>standalone</code></td>
+  </tr>
+  <tr>
+   <td><code>standalone</code></td>
+   <td>Die Anwendung wird sich wie eine eigenständige Anwendung darstellen und anfühlen. Dies kann die Anwendung mit einem anderen Fenster, ein eigenes Icon im Anwendungsstarter usw. enthalten. In diesem Modus schließt der Benutzeragent UI-Elemente zum Steuern der Navigation aus, kann aber auch andere UI-Elemente wie eine Statusleiste enthalten.</td>
+   <td><code>minimal-ui</code></td>
+  </tr>
+  <tr>
+   <td><code>minimal-ui</code></td>
+   <td>Die Anwendung sieht und fühlt sich wie eine eigenständige Anwendung an, wird aber einen minimalen Satz von UI-Elementen zur Steuerung der Navigation haben. Die Elemente variieren je nach Browser.</td>
+   <td><code>browser</code></td>
+  </tr>
+  <tr>
+   <td><code>browser</code></td>
+   <td>Die Anwendung öffnet sich in einem herkömmlichen Browser-Tab oder einem neuen Fenster, je nach Browser und Plattform. Dies ist die Voreinstellung. </td>
+   <td>(Keiner)</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Hinweis</strong> : Sie können das CSS selektiv auf Ihre App basierend auf dem Anzeigemodus über die <a href="/docs/Web/CSS/@media/display-mode">Anzeigemodus-</a> Medienfunktion anwenden . Dies kann verwendet werden, um eine konsistente Benutzererfahrung zwischen dem Starten einer Website aus einer URL und starten Sie es von einem Desktop-Symbol.</p>
+</div>
+
+<h3 id="icons"><code>icons</code></h3>
+
+<p>Gibt ein Array von Bildobjekten an, die als Anwendungssymbole in verschiedenen Kontexten dienen können. Zum Beispiel können sie verwendet werden, um die Webanwendung unter einer Liste anderer Anwendungen darzustellen oder die Webanwendung mit einem Task-Switcher und / oder Systemeinstellungen eines <abbr title="Betriebssystem">Betriebssystems</abbr> zu integrieren  .</p>
+
+<pre class="brush: json notranslate">"icons": [
+  {
+    "src": "icon / lowres.webp",
+    "sizes": "48x48",
+    "type": "image / webp"
+  },
+  {
+    "src": "icon / lowres",
+    "sizes": "48x48"
+  },
+  {
+    "src": "icon / hd_hi.ico",
+    "sizes": "72x72 96x96 128x128 256x256"
+  },
+  {
+    "src": "icon / hd_hi.svg",
+    "sizes": "72x72"
+  }
+]</pre>
+
+<p>Bildobjekte können folgende Werte enthalten:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Mitglied</th>
+   <th scope="col">Beschreibung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>sizes</code></td>
+   <td>Ein String mit platzgetrennten Bildmaßen. </td>
+  </tr>
+  <tr>
+   <td><code>src</code></td>
+   <td>Der Pfad zur Bilddatei. Wenn <code>src</code>eine relative URL ist, ist die Basis-URL die URL des Manifests.</td>
+  </tr>
+  <tr>
+   <td><code>type</code></td>
+   <td>Ein Hinweis auf den Medientyp des Bildes. Der Zweck dieses Mitglieds ist es, einem Benutzer-Agenten zu erlauben, schnell Bilder von Medientypen zu ignorieren, die es nicht unterstützt.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="lang"><code>lang</code></h3>
+
+<p>Gibt die Primärsprache für die Werte in den <code>name</code>und <code>short_name</code>Mitgliedern an. Dieser Wert ist ein String mit einem einzigen Tag.</p>
+
+<pre class="brush: json notranslate">"lang": "en-US"</pre>
+
+<h3 id="name"><code>name</code></h3>
+
+<p>Stellt einen menschlich lesbaren Namen für die Anwendung bereit, wie sie dem Benutzer angezeigt werden soll, zum Beispiel unter einer Liste anderer Anwendungen oder als Label für ein Symbol.</p>
+
+<pre class="brush: json notranslate">"name": "Google I / O 2017" </pre>
+
+<h3 id="orientation"><code>orientation</code></h3>
+
+<p>Definiert die Standardausrichtung für alle Top-Level der Webanwendung {{Glossary("Browsing-Kontext", "Browsing-Kontexte")}}.</p>
+
+<pre class="brush: json notranslate"><code>​​"orientation": "portrait-primary"</code></pre>
+
+<p>Orientierung kann einer der folgenden Werte sein:</p>
+
+<ul>
+ <li><code>any</code></li>
+ <li><code>natural</code></li>
+ <li><code>landscape</code></li>
+ <li><code>landscape-primary</code></li>
+ <li><code>landscape-secondary</code></li>
+ <li><code>portrait</code></li>
+ <li><code>portrait-primary</code></li>
+ <li><code>portrait-secondary</code></li>
+</ul>
+
+<h3 id="prefer_related_applications"><code>prefer_related_applications</code></h3>
+
+<p>Gibt einen booleschen Wert an, der darauf hinweist, dass der Benutzeragent dem Benutzer mitteilt, dass die angegebenen verwandten Anwendungen (siehe unten) verfügbar sind und über die Webanwendung empfohlen werden. Dies sollte nur verwendet werden, wenn die verwandten nativen Apps wirklich etwas bieten, das die Webanwendung nicht machen kann.</p>
+
+<pre class="brush: json notranslate">"prefer_related_applications": false</pre>
+
+<div class="note">
+<p><strong>Hinweis</strong> : Wenn weggelassen, gilt der Wert standardmäßig <code>false</code>.</p>
+</div>
+
+<h3 id="related_applications"><code>related_applications</code></h3>
+
+<p>Gibt ein Array von "Anwendungsobjekten" an, die native Anwendungen repräsentieren, die von der zugrunde liegenden Plattform installiert oder zugänglich sind - zum Beispiel eine native Android-Anwendung, die über den Google Play Store erhältlich ist. Solche Anwendungen sollen Alternativen zur Webanwendung sein, die ähnliche oder gleichwertige Funktionalität bieten - wie die native App-Version der Web-App.</p>
+
+<pre class="brush: json notranslate">"related_applications": [
+  {
+    "platform": "play",
+    "url": "https://play.google.com/store/apps/details?id=com.example.app1",
+    "id": "com.example.app1"
+  }, {
+    "platform": "itunes",
+    "url": "https://itunes.apple.com/app/example-app1/id123456789"
+  }]</pre>
+
+<p>Anwendungsobjekte können folgende Werte enthalten:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Mitglied</th>
+   <th scope="col">Beschreibung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>platform</code></td>
+   <td>Die Plattform, auf der die Anwendung gefunden werden kann.</td>
+  </tr>
+  <tr>
+   <td><code>url</code></td>
+   <td>Die URL, bei der die Anwendung gefunden werden kann.</td>
+  </tr>
+  <tr>
+   <td><code>id</code></td>
+   <td>Die ID, die verwendet wird, um die Anwendung auf der angegebenen Plattform darzustellen.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="scope"><code>scope</code></h3>
+
+<p>Definiert den Navigationsbereich des Anwendungskontextes dieser Webanwendung. Dies beschränkt grundsätzlich, welche Webseiten angezeigt werden können, während das Manifest angewendet wird. Wenn der Benutzer die Anwendung außerhalb des Gültigkeitsbereichs navigiert, kehrt er zu einer normalen Webseite zurück.</p>
+
+<p>Wenn der Bereich eine relative URL ist, wird die Basis-URL die URL des Manifests sein.</p>
+
+<pre class="brush: json notranslate">"scope": "/ myapp /"</pre>
+
+<h3 id="short_name"><code>short_name</code></h3>
+
+<p>Bietet einen kurzen menschlich lesbaren Namen für die Anwendung. Dies ist für den Einsatz vorgesehen, wo nicht genügend Platz vorhanden ist, um den vollständigen Namen der Webanwendung anzuzeigen.</p>
+
+<pre class="brush: json notranslate">"short_name": "I / O 2017"
+</pre>
+
+<h3 id="start_url"><code>start_url</code></h3>
+
+<p>Gibt die URL an, die geladen wird, wenn ein Benutzer die Anwendung von einem Gerät startet. Wenn als relative URL angegeben, ist die Basis-URL die URL des Manifests.</p>
+
+<pre class="brush: json notranslate">"start_url": "./?utm_source=web_app_manifest"</pre>
+
+<h3 id="theme_color"><code>theme_color</code></h3>
+
+<p>Definiert die Standardthemafarbe für eine Anwendung. Dies beeinflusst manchmal, wie die Anwendung vom Betriebssystem angezeigt wird (z. B. auf Android-Task-Switcher, die Themenfarbe umgibt die Anwendung).  </p>
+
+<pre class="brush: json notranslate">"theme_color": "aliceblue"</pre>
+
+<h2 id="Splash-Bildschirme">Splash-Bildschirme</h2>
+
+<p>In Chrome 47 und später wird ein Splash-Screen für eine Web-Anwendung angezeigt, die von einem Startbildschirm gestartet wird. Dieser Begrüßungsbildschirm ist automatisch generierten Objekte im Web - App - Manifest verwenden, insbesondere: <code>name</code>, <code>background_color</code>und das Symbol in der <code>icons</code>Anordnung, die am nächsten zu 128dpi für das Gerät ist.</p>
+
+<h2 id="Mime_Typ">Mime Typ</h2>
+
+<p>Manifestationen sollten mit dem <code>application/manifest+json</code>MIME-Typ bedient werden. Allerdings ist es optional, dies zu tun.  </p>
+
+<h2 id="Spezifikation">Spezifikation</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName ('Manifest')}}</td>
+   <td>{{Spec2('Manifest')}}</td>
+   <td>Anfangsdefinition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android-Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome für Android</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome (39.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>32.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome (39.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>background_color</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome (46.0)}} <sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome (46.0)}} [1]</td>
+  </tr>
+  <tr>
+   <td><code>theme_color</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome (46.0)}} <sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome (46.0)}} [1]</td>
+  </tr>
+  <tr>
+   <td><code>icons</code>, <code>name</code>, <code>short_name</code>, Und <code>theme_color</code>für verwendete <a href="https://support.mozilla.org/t5/Other/How-to-add-a-shortcut-to-a-website-on-Android/ta-p/21992">In der Home - Bildschirm</a> - Funktion.</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile (53)}} <sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>display-mode</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile (47)}} <sup>[3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] unterstützt nicht <code>lang</code>oder <code>scope</code>.</p>
+
+<p>[2] Die <code>icons</code>, <code>name</code>, <code>short_name</code>und <code>theme_color</code>Felder der <a href="/en-US/docs/Web/Manifest">Web App - Manifest</a> (falls vorhanden) kann nun als Quelle der Homescreen / apps Fenstersymbole sein, apps Fenstertitel, Homescreen Symboltitel und Apps Fensterfarbe (jeweils) für „hinzufügen zum Heimbildschirm "(nur Firefox Mobile, siehe {{Bug (" 1234558 ")}}). Experimentelle Unterstützung für diese Funktion steht hinter der booleschen Flagge <code>manifest.install.enabled</code>in <code>about:config</code>.</p>
+
+<p>[3] Nur die <code>fullscreen</code>und <code>browser</code>Werte <code>display-mode</code>wurden in 47. <code>minimal-ui</code>und <code>standalone</code>wurden in Firefox 57 hinzugefügt.</p>
diff --git a/files/de/web/manifest/short_name/index.html b/files/de/web/manifest/short_name/index.html
new file mode 100644
index 0000000000..0a54ba4c3c
--- /dev/null
+++ b/files/de/web/manifest/short_name/index.html
@@ -0,0 +1,71 @@
+---
+title: short_name
+slug: Web/Manifest/short_name
+translation_of: Web/Manifest/short_name
+---
+<div>{{QuickLinksWithSubpages("/en-US/docs/Web/Manifest")}}</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type</th>
+   <td><code>String</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Mandatory</th>
+   <td>No</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>The <code><dfn>short_name</dfn></code> member is a string that represents the name of the web application displayed to the user if there is not enough space to display <code><a href="./name">name</a></code> (e.g., as a label for an icon on the phone home screen). <code>short_name</code> is directionality-capable, which means it can be displayed left-to-right or right-to-left based on the value of the <code><a href="./dir">dir</a></code> and <code><a href="./lang">lang</a></code> manifest members.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>Simple <code>short_name</code> in left-to-right language:</p>
+
+<pre class="brush: json notranslate">"name": "Awesome application",
+"short_name": "Awesome app"</pre>
+
+<p><code>short_name</code> in Arabic, which will be displayed right-to-left:</p>
+
+<pre class="brush: json notranslate" dir="rtl"><code>"dir": "rtl",
+"lang": "ar",
+"nam</code>e": "تطبيق رائع",
+"short_name": "رائع"
+</pre>
+
+<h2 id="Specification">Specification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+   <th scope="col">Feedback</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <p>{{SpecName('Manifest', '#short_name-member', 'short_name')}}</p>
+   </td>
+   <td>
+    <p>{{Spec2('Manifest')}}</p>
+   </td>
+   <td>
+    <p>Initial definition.</p>
+   </td>
+   <td>
+    <p><a href="https://github.com/w3c/manifest/issues/">Web App Manifest Working Group drafts</a></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("html.manifest.short_name")}}</p>
diff --git a/files/de/web/mathml/attribute/index.html b/files/de/web/mathml/attribute/index.html
new file mode 100644
index 0000000000..c05c402d1e
--- /dev/null
+++ b/files/de/web/mathml/attribute/index.html
@@ -0,0 +1,487 @@
+---
+title: MathML Attribut-Referenz
+slug: Web/MathML/Attribute
+tags:
+  - MathML
+  - Referenz
+translation_of: Web/MathML/Attribute
+---
+<p>Dies ist eine alphabetische Liste der MathML-Attribute. Auf den Seiten der <a href="/de/docs/Web/MathML/Element" title="/en-US/docs/MathML/Element">MathML-Elemente</a> findest Du weitere Einzelheiten zu den Attributen.</p>
+
+<p>Hinweise:</p>
+
+<ul>
+ <li>Die MathML-Elemente {{ MathMLElement("mstyle") }} und {{ MathMLElement("math") }} {{ gecko_minversion_inline("7.0") }} akzeptieren die Attribute aller MathML Darstellungs-Elemente.</li>
+ <li>Siehe <a href="/de/docs/Web/MathML/Attribute/Werte" title="/en-US/docs/MathML/Attributes/Values">Werte</a> für Hinweise zu Werten und Einheiten in MathML.</li>
+</ul>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Name</th>
+   <th>Elements accepting attribute</th>
+   <th>Beschreibung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr id="accent">
+   <td><code>accent</code></td>
+   <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mover") }}, {{ MathMLElement("munderover") }}</td>
+   <td>Ein Boolescher Wert, der festlegt, ob das Rechenzeichen als Akzentzeichen behandelt werden soll.</td>
+  </tr>
+  <tr id="accentunder">
+   <td><code>accentunder</code></td>
+   <td>{{ MathMLElement("munder") }}, {{ MathMLElement("munderover") }}</td>
+   <td>Ein Boolescher Wert, der festlegt, ob der Operator als Akzent behandelt werden soll.</td>
+  </tr>
+  <tr id="actiontype">
+   <td><code>actiontype</code></td>
+   <td>{{ MathMLElement("maction") }}</td>
+   <td>Eine Zeichenkette, die die Aktion für dieses Element beschreibt.</td>
+  </tr>
+  <tr id="align">
+   <td><code>align</code></td>
+   <td>{{ MathMLElement("mtable") }}<br>
+    {{ MathMLElement("munder") }}, {{ MathMLElement("mover") }}, {{ MathMLElement("munderover") }}<br>
+    {{ MathMLElement("mstack") }}</td>
+   <td>Beschreibt unterschiedliche Ausrichtung von Elementen zueinander (für Einzelheiten siehe entsprechende Element-Seite).</td>
+  </tr>
+  <tr id="alignmentscope">
+   <td>{{ unimplemented_inline() }} <code>alignmentscope</code></td>
+   <td>{{ MathMLElement("mtable") }}</td>
+   <td>Boolescher Wert, der festlegt, ob eine Tabellenspalte als Bezugspunkt für eine Anordnung genommen wird.</td>
+  </tr>
+  <tr id="alt-*">
+   <td>{{ unimplemented_inline() }}<br>
+    <code>altimg</code><br>
+    <code>altimg-width</code><br>
+    <code>altimg-height</code><br>
+    <code>altimg-valign</code><br>
+    <code>alttext</code></td>
+   <td>{{ MathMLElement("math") }}</td>
+   <td>Bildliche und textuelle Alternativdarstellungen.</td>
+  </tr>
+  <tr id="bevelled">
+   <td><code>bevelled</code></td>
+   <td>{{ MathMLElement("mfrac") }}</td>
+   <td>Beschreibt, wie ein Bruch dargestellt wird.</td>
+  </tr>
+  <tr id="charalign">
+   <td>{{ unimplemented_inline() }} <code>charalign</code></td>
+   <td>{{ MathMLElement("mstack") }}</td>
+   <td>Legt die horizontale Ausrichtung einzelner Zeichen fest.</td>
+  </tr>
+  <tr id="close">
+   <td><code>close</code></td>
+   <td>{{ MathMLElement("mfenced") }}</td>
+   <td>Zeichenkette für den schließenden Begrenzer einer Klammer (»Klammer-zu«).</td>
+  </tr>
+  <tr id="columnalign">
+   <td><code>columnalign</code></td>
+   <td>{{ MathMLElement("mtable") }}, {{ MathMLElement("mtd") }}, {{ MathMLElement("mtr") }}, {{ MathMLElement("mlabeledtr") }}</td>
+   <td>Beschreibt die horizontale Anordnung der Zellen einer Tabelle.</td>
+  </tr>
+  <tr id="columnlines">
+   <td><code>columnlines</code></td>
+   <td>{{ MathMLElement("mtable") }}</td>
+   <td>Legt die Umrandung von Tabellenspalten fest.</td>
+  </tr>
+  <tr id="columnspacing">
+   <td><code>columnspacing</code></td>
+   <td>{{ MathMLElement("mtable") }}</td>
+   <td>Bestimmt den Abstand zwischen Spalten einer Tabelle.</td>
+  </tr>
+  <tr id="columnspan">
+   <td><code>columnspan</code></td>
+   <td>{{ MathMLElement("mtd") }}</td>
+   <td>Eine positive, ganze Zahl, die angibt, über wieviele Spalten sich eine Tabellenzelle erstreckt.</td>
+  </tr>
+  <tr id="columnwidth">
+   <td>{{ unimplemented_inline() }} <code>columnwidth</code></td>
+   <td>{{ MathMLElement("mtable") }}</td>
+   <td>Legt die Breite einer Tabellenspalte fest.</td>
+  </tr>
+  <tr id="crossout">
+   <td>{{ unimplemented_inline() }} <code>crossout</code></td>
+   <td>{{ MathMLElement("mscarry") }}</td>
+   <td>Specifies what kind of line is drawn to cross out carries.</td>
+  </tr>
+  <tr id="decimalpoint">
+   <td>{{ unimplemented_inline() }} <code>decimalpoint</code></td>
+   <td>{{ MathMLElement("mstyle") }}</td>
+   <td>If the <code>decimalpoint</code> value is used to specify the <a href="#align">alignment</a>, this attribute is specifying the character for the alignment point within {{ MathMLElement("mstack") }} and {{ MathMLElement("mtable") }} columns.</td>
+  </tr>
+  <tr id="denomalign">
+   <td><code>denomalign</code></td>
+   <td>{{ MathMLElement("mfrac") }}</td>
+   <td>Legt die Ausrichtung des Nenners eines Bruchs fest.</td>
+  </tr>
+  <tr id="depth">
+   <td><code>depth</code></td>
+   <td>{{ MathMLElement("mpadded") }}</td>
+   <td>Sets or increments the depth. See <a href="/en-US/docs/MathML/Attributes/Values" title="/en-US/docs/MathML/Attributes/Values">length</a>.</td>
+  </tr>
+  <tr id="dir">
+   <td><code>dir</code></td>
+   <td>{{ MathMLElement("math") }}, {{ MathMLElement("mi") }}, {{ MathMLElement("mo") }}, {{ MathMLElement("mrow") }}, {{ MathMLElement("ms") }}, {{ MathMLElement("mtext") }}</td>
+   <td>Fließrichtung des Textes. Mögliche Werte sind <code>ltr</code> (left to right, von links nach rechts) oder <code>rtl</code> (right to left, von rechts nach links).</td>
+  </tr>
+  <tr id="display">
+   <td><code>display</code></td>
+   <td>{{ MathMLElement("math") }}</td>
+   <td>Darstellungsmodus. Mögliche Werte sind <code>block</code> und <code>inline</code>.</td>
+  </tr>
+  <tr id="displaystyle">
+   <td><code>displaystyle</code></td>
+   <td>{{ MathMLElement("mstyle") }}, {{ MathMLElement("mtable") }}</td>
+   <td>
+    <p>Ein Boolescher Wert für den Darstellungsstil einer Gleichung. Bei <code>true</code> wird zusätzlicher vertikaler Zwischenraum eingefügt; bei <code>false</code> wird die Formel dagegen kompakter dargestellt.</p>
+   </td>
+  </tr>
+  <tr id="edge">
+   <td>{{ unimplemented_inline() }} <code>edge</code></td>
+   <td>{{ MathMLElement("malignmark") }}</td>
+   <td> </td>
+  </tr>
+  <tr id="equalcolumns">
+   <td>{{ unimplemented_inline() }} <code>equalcolumns</code></td>
+   <td>{{ MathMLElement("mtable") }}</td>
+   <td>Boolescher Wert, der bei <code>true</code> alle Spalten auf gleiche Höhe zwingt.</td>
+  </tr>
+  <tr id="equalrows">
+   <td>{{ unimplemented_inline() }} <code>equalrows</code></td>
+   <td>{{ MathMLElement("mtable") }}</td>
+   <td>Boolescher Wert, der angibt, ob alle Zeilen einer Tabelle die gleiche Höhe haben sollen.</td>
+  </tr>
+  <tr id="fence">
+   <td><code>fence</code></td>
+   <td>{{ MathMLElement("mo") }}</td>
+   <td>Boolescher Wert, der festlegt, ob der Operator eine Begrenzung (wie z.B. ein Paar Klammern) ist. Dieses Attribut wird selbst nicht bildlich dargestellt.</td>
+  </tr>
+  <tr id="form">
+   <td>{{ unimplemented_inline() }} <code>form</code></td>
+   <td>{{ MathMLElement("mo") }}</td>
+   <td>Legt die Funktion des Operators in z.B. einem Klammerausdruck fest.</td>
+  </tr>
+  <tr id="frame">
+   <td><code>frame</code></td>
+   <td>{{ MathMLElement("mtable") }}</td>
+   <td>Bestimmt die Umrandung einer {{ MathMLElement("mtable") }}. Mögliche Werte sind: <code>none</code> (default), <code>solid</code> und <code>dashed</code>.</td>
+  </tr>
+  <tr id="framespacing">
+   <td><code>framespacing</code></td>
+   <td>{{ MathMLElement("mtable") }}</td>
+   <td>Specifies additional space added between the table and <code>frame</code>.</td>
+  </tr>
+  <tr id="groupalign">
+   <td>{{ unimplemented_inline() }} <code>groupalign</code></td>
+   <td>{{ MathMLElement("maligngroup") }}, {{ MathMLElement("mtable") }}, {{ MathMLElement("mtd") }}, {{ MathMLElement("mtr") }}</td>
+   <td> </td>
+  </tr>
+  <tr id="height">
+   <td><code>height</code></td>
+   <td>{{ MathMLElement("mglyph") }}, {{ MathMLElement("mpadded") }}, {{ MathMLElement("mspace") }}</td>
+   <td>
+    <p>Legt die gewünschte Höhe fest. Siehe <a href="/de/docs/Web/MathML/Attribute/Werte">Maßangaben</a> für mögliche Werte.</p>
+   </td>
+  </tr>
+  <tr id="href">
+   <td><code>href</code></td>
+   <td><em>All</em></td>
+   <td>Setzt einen Link auf eine festgelegt URI.</td>
+  </tr>
+  <tr id="id">
+   <td><code>id</code></td>
+   <td><em>All</em></td>
+   <td>Legt einen eindeutigen Bezeichner für das Element fest.</td>
+  </tr>
+  <tr id="indentalign">
+   <td>{{ unimplemented_inline() }} <code>indentalign</code></td>
+   <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}</td>
+   <td> </td>
+  </tr>
+  <tr id="indentalignfirst">
+   <td>{{ unimplemented_inline() }} <code>indentalignfirst</code></td>
+   <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}</td>
+   <td> </td>
+  </tr>
+  <tr id="indentalignlast">
+   <td>{{ unimplemented_inline() }} <code>indentalignlast</code></td>
+   <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}</td>
+   <td> </td>
+  </tr>
+  <tr id="indentshift">
+   <td>{{ unimplemented_inline() }} <code>indentshift</code></td>
+   <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}</td>
+   <td> </td>
+  </tr>
+  <tr id="indentshiftfirst">
+   <td>{{ unimplemented_inline() }} <code>indentshiftfirst</code></td>
+   <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}</td>
+   <td> </td>
+  </tr>
+  <tr id="indentshiftlast">
+   <td>{{ unimplemented_inline() }} <code>indentshiftlast</code></td>
+   <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}</td>
+   <td> </td>
+  </tr>
+  <tr id="indenttarget">
+   <td>{{ unimplemented_inline() }} <code>indenttarget</code></td>
+   <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}</td>
+   <td> </td>
+  </tr>
+  <tr id="infixlinebreakstyle">
+   <td>{{ unimplemented_inline() }} <code>infixlinebreakstyle</code></td>
+   <td>{{ MathMLElement("mstyle") }}</td>
+   <td>Specifies the default <code>linebreakstyle</code> to use for infix operators.</td>
+  </tr>
+  <tr id="largeop">
+   <td><code>largeop</code></td>
+   <td>{{ MathMLElement("mo") }}</td>
+   <td>Legt fest, ob das Rechenzeichen größer als üblich dargestellt werden soll.</td>
+  </tr>
+  <tr id="length">
+   <td><code>length</code></td>
+   <td>{{ MathMLElement("msline") }}</td>
+   <td> </td>
+  </tr>
+  <tr id="linebreak">
+   <td>{{ unimplemented_inline() }} <code>linebreak</code></td>
+   <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}</td>
+   <td> </td>
+  </tr>
+  <tr id="linebreakmultchar">
+   <td>{{ unimplemented_inline() }} <code>linebreakmultchar</code></td>
+   <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}</td>
+   <td> </td>
+  </tr>
+  <tr id="linebreakstyle">
+   <td>{{ unimplemented_inline() }} <code>linebreakstyle</code></td>
+   <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}</td>
+   <td> </td>
+  </tr>
+  <tr id="lineleading">
+   <td>{{ unimplemented_inline() }} <code>lineleading</code></td>
+   <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}</td>
+   <td> </td>
+  </tr>
+  <tr id="linethickness">
+   <td><code>linethickness</code></td>
+   <td>{{ MathMLElement("mfrac") }}</td>
+   <td>Bestimmt die Dicke des horizontalen Bruchstrichs.</td>
+  </tr>
+  <tr id="location">
+   <td>{{ unimplemented_inline() }} <code>location</code></td>
+   <td>{{ MathMLElement("mscarries") }}</td>
+   <td> </td>
+  </tr>
+  <tr id="longdivstyle">
+   <td>{{ unimplemented_inline() }} <code>longdivstyle</code></td>
+   <td>{{ MathMLElement("mlongdiv") }}</td>
+   <td>Steuert die Darstellung der langen Division.</td>
+  </tr>
+  <tr id="lspace">
+   <td><code>lspace</code></td>
+   <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mpadded") }}</td>
+   <td>Bestimmt die Breite des Leerzeichens <em>vor</em> einem Rechenzeichen. (Siehe <a href="/de/docs/Web/MathML/Attribute/Werte">Maßangaben</a> für mögliche Werte, Vorgabewert ist die Konstante <code>thickmathspace</code> = 5/18em.)</td>
+  </tr>
+  <tr id="lquote">
+   <td><code>lquote</code></td>
+   <td>{{ MathMLElement("ms") }}</td>
+   <td>Das öffnende Anführungszeichen, Standardwert ist <code>&amp;quot;</code>. (Abhängig von der Schreibrichtung)</td>
+  </tr>
+  <tr id="mathbackground">
+   <td><code>mathbackground</code></td>
+   <td><em>All</em></td>
+   <td>Bestimmt die Hintergrundfarbe. Möglich sind <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</td>
+  </tr>
+  <tr id="mathcolor">
+   <td><code>mathcolor</code></td>
+   <td><em>All</em></td>
+   <td>Bestimmt die Textfarbe. Möglich sind <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</td>
+  </tr>
+  <tr id="mathsize">
+   <td><code>mathsize</code></td>
+   <td>{{ MathMLElement("mi") }}, {{ MathMLElement("mn") }}, {{ MathMLElement("mo") }}, {{ MathMLElement("ms") }}, {{ MathMLElement("mtext") }}</td>
+   <td>Die Größe (Höhe) des Inhalts. Seit Gecko 20.0 {{geckoRelease("20.0")}} sind einheitenlose Wertangaben für  <code>mathsize</code> erlaubt.</td>
+  </tr>
+  <tr id="mathvariant">
+   <td><code>mathvariant</code></td>
+   <td>{{ MathMLElement("mi") }}, {{ MathMLElement("mn") }}, {{ MathMLElement("mo") }}, {{ MathMLElement("ms") }}, {{ MathMLElement("mtext") }}</td>
+   <td>Bezeichnet die logische Klasse des Wertes bzw. Rechenzeichens. Über Besonderheiten im Schriftsatz können damit inhaltlich zusammengehörende Gruppen anschaulich gemacht werden.</td>
+  </tr>
+  <tr id="maxsize">
+   <td><code>maxsize</code></td>
+   <td>{{ MathMLElement("mo") }}</td>
+   <td>Die maximale Größe eines Operators.</td>
+  </tr>
+  <tr id="minlabelspacing">
+   <td>{{ unimplemented_inline() }} <code>minlabelspacing</code></td>
+   <td>{{ MathMLElement("mtable") }}</td>
+   <td>A <a href="/en-US/docs/MathML/Attributes/Values" title="/en-US/docs/MathML/Attributes/Values">length value</a> specifing the minimum space between a <a href="Element/mlabeledtr" rel="internal" title="/en-US/docs/MathML/Element/mlabeledtr">label</a> and the adjacent cell in the row.</td>
+  </tr>
+  <tr id="minsize">
+   <td><code>minsize</code></td>
+   <td>{{ MathMLElement("mo") }}</td>
+   <td>Die minimale Größe eines Operators.</td>
+  </tr>
+  <tr id="movablelimits">
+   <td><code>movablelimits</code></td>
+   <td>{{ MathMLElement("mo") }}</td>
+   <td>Gibt an, ob <code>underscripts</code> und <code>overscripts</code> an den Positionen von <code>subcripts</code> bzw. <code>superscripts</code> angezeigt werden.</td>
+  </tr>
+  <tr id="notation">
+   <td><code>notation</code></td>
+   <td>{{ MathMLElement("menclose") }}</td>
+   <td>A list of notations, separated by white space, to apply to the child elements.</td>
+  </tr>
+  <tr id="numalign">
+   <td><code>numalign</code></td>
+   <td>{{ MathMLElement("mfrac") }}</td>
+   <td>Die Ausrichtung des Zählers oberhalb des Bruchstrichs.</td>
+  </tr>
+  <tr id="open">
+   <td><code>open</code></td>
+   <td>{{ MathMLElement("mfenced") }}</td>
+   <td>Zeichenkette für den öffnenden Begrenzer einer Klammer (»Klammer-auf«).</td>
+  </tr>
+  <tr id="overflow">
+   <td>{{ unimplemented_inline() }} <code>overflow</code></td>
+   <td>{{ MathMLElement("math") }}</td>
+   <td>If an expression is too long to fit in the allowed width, this attribute sets the preferred handling.</td>
+  </tr>
+  <tr id="position">
+   <td>{{ unimplemented_inline() }} <code>position</code></td>
+   <td>{{ MathMLElement("msgroup") }}, {{ MathMLElement("msrow") }}, {{ MathMLElement("mscarries") }}, {{ MathMLElement("msline") }}</td>
+   <td> </td>
+  </tr>
+  <tr id="rowalign">
+   <td><code>rowalign</code></td>
+   <td>{{ MathMLElement("mtable") }}, {{ MathMLElement("mtd") }}, {{ MathMLElement("mtr") }}</td>
+   <td>Bestimmt die vertikale Ausrichtung von Tabellenzellen.</td>
+  </tr>
+  <tr id="rowlines">
+   <td><code>rowlines</code></td>
+   <td>{{ MathMLElement("mtable") }}</td>
+   <td>Legt die Umrandung von Tabellenzeilen fest.</td>
+  </tr>
+  <tr id="rowspacing">
+   <td><code>rowspacing</code></td>
+   <td>{{ MathMLElement("mtable") }}</td>
+   <td>Bestimmt den Abstand zwischen Tabellenzeilen.</td>
+  </tr>
+  <tr id="rowspan">
+   <td><code>rowspan</code></td>
+   <td>{{ MathMLElement("mtd") }}</td>
+   <td>Diese positive, ganze Zahl gibt an, über wieviele Zeilen sich eine Tabellenzelle erstreckt.</td>
+  </tr>
+  <tr id="rspace">
+   <td><code>rspace</code></td>
+   <td>{{ MathMLElement("mo") }}</td>
+   <td>Bestimmt die Breite des Leerzeichens <em>nach</em> einem Operator. (Siehe <a href="/de/docs/Web/MathML/Attribute/Werte">Maßangaben</a> für mögliche Werte, Vorgabewert ist die Konstante <code>thickmathspace</code> = 5/18em.)</td>
+  </tr>
+  <tr id="rquote">
+   <td><code>rquote</code></td>
+   <td>{{ MathMLElement("ms") }}</td>
+   <td>Das öffnende Anführungszeichen, Standardwert ist <code>&amp;quot;</code>. (Abhängig von der Schreibrichtung)</td>
+  </tr>
+  <tr id="scriptlevel">
+   <td><code>scriptlevel</code></td>
+   <td>{{ MathMLElement("mstyle") }}</td>
+   <td>Controls mostly the font-size. The higher the <code>scriptlevel</code>, the smaller the font size.</td>
+  </tr>
+  <tr id="scriptminsize">
+   <td><code>scriptminsize</code></td>
+   <td>{{ MathMLElement("mstyle") }}</td>
+   <td>Specifies a minimum font size allowed due to changes in <code>scriptlevel</code>.<br>
+    Starting with Gecko 20.0 {{geckoRelease("20")}} unitless values and percent values are allowed and interpreted as multiple of "8pt".</td>
+  </tr>
+  <tr id="scriptsizemultiplier">
+   <td><code>scriptsizemultiplier</code></td>
+   <td>{{ MathMLElement("mstyle") }}</td>
+   <td>Specifies the multiplier to be used to adjust font size due to changes in <code>scriptlevel</code>.</td>
+  </tr>
+  <tr id="selection">
+   <td><code>selection</code></td>
+   <td>{{ MathMLElement("maction") }}</td>
+   <td>The child element which is addressed by the action.</td>
+  </tr>
+  <tr id="separator">
+   <td><code>separator</code></td>
+   <td>{{ MathMLElement("mo") }}</td>
+   <td>Dieses Attribut bestimmt, ob der Operator ein Trennzeichen (z.B. ein Komma ist). Das Attribut selbst wird nicht dargestellt.</td>
+  </tr>
+  <tr id="separators">
+   <td><code>separators</code></td>
+   <td>{{ MathMLElement("mfenced") }}</td>
+   <td>Eine Folge von null oder mehreren Zeichen, die in einer Liste als Trennzeichen genutzt werden.</td>
+  </tr>
+  <tr id="shift">
+   <td>{{ unimplemented_inline() }} <code>shift</code></td>
+   <td>{{ MathMLElement("msgroup") }}</td>
+   <td> </td>
+  </tr>
+  <tr id="side">
+   <td>{{ unimplemented_inline() }} <code>side</code></td>
+   <td>{{ MathMLElement("mtable") }}</td>
+   <td>Bestimmt die Seite, an der {{ MathMLElement("mlabeledtr") }} Label-Elemente plaziert werden.</td>
+  </tr>
+  <tr id="src">
+   <td>{{ unimplemented_inline() }} <code>src</code></td>
+   <td>{{ MathMLElement("mglyph") }}</td>
+   <td>The location of the image resource.</td>
+  </tr>
+  <tr id="stackalign">
+   <td>{{ unimplemented_inline() }} <code>stackalign</code></td>
+   <td>{{ MathMLElement("mstack") }}</td>
+   <td> </td>
+  </tr>
+  <tr id="stretchy">
+   <td><code>stretchy</code></td>
+   <td>{{ MathMLElement("mo") }}</td>
+   <td>Gibt an, ob der Operator an die Größe der benachbarten Elemente angepasst (vergrößert) wird.</td>
+  </tr>
+  <tr id="subscriptshift">
+   <td><code>subscriptshift</code></td>
+   <td>{{ MathMLElement("mmultiscripts") }}, {{ MathMLElement("msub") }}, {{ MathMLElement("msubsup") }}</td>
+   <td>The minimum space by which to shift the subscript below the baseline of the expression.</td>
+  </tr>
+  <tr id="supscriptshift">
+   <td><code>supscriptshift</code></td>
+   <td>{{ MathMLElement("mmultiscripts") }}, {{ MathMLElement("msup") }}, {{ MathMLElement("msubsup") }}</td>
+   <td>The minimum space by which to shift the superscript above the baseline of the expression.</td>
+  </tr>
+  <tr id="symmetric">
+   <td><code>symmetric</code></td>
+   <td>{{ MathMLElement("mo") }}</td>
+   <td>Gibt an, ob der Operator (z.B. ein Bruchstrich) vertikal zentriert werden soll.</td>
+  </tr>
+  <tr id="voffset">
+   <td><code>voffset</code></td>
+   <td>{{ MathMLElement("mpadded") }}</td>
+   <td>Sets the vertical position of the child content.</td>
+  </tr>
+  <tr id="width">
+   <td><code>width</code></td>
+   <td>{{ MathMLElement("mglyph") }}, {{ MathMLElement("mpadded") }}, {{ MathMLElement("mspace") }}, {{ MathMLElement("mtable") }}</td>
+   <td>Legt die gewünschte Breite fest. Siehe <a href="/de/docs/Web/MathML/Attribute/Werte">Maßangaben</a> für mögliche Werte.</td>
+  </tr>
+  <tr id="xlink-href">
+   <td><code>xlink:href</code></td>
+   <td><em>All</em></td>
+   <td>Hiermit kann ein Link auf eine Linkadresse gesetzt werden. Es wird empfohlen, stattdessen das <code>href</code> Attribut zu nutzen.</td>
+  </tr>
+  <tr id="xmlns">
+   <td><code>xmlns</code></td>
+   <td>{{ MathMLElement("math") }}</td>
+   <td>Gibt die Adresse des MathML-Namensraums an (<code><a class="external" href="http://www.w3.org/1998/Math/MathML" rel="freelink">http://www.w3.org/1998/Math/MathML</a></code>)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/MathML" title="/en-US/docs/Web/MathML">MathML</a></li>
+ <li><a href="/de/docs/Web/MathML/Element">MathML Element-Referenz</a></li>
+</ul>
diff --git a/files/de/web/mathml/attribute/werte/index.html b/files/de/web/mathml/attribute/werte/index.html
new file mode 100644
index 0000000000..04a059b217
--- /dev/null
+++ b/files/de/web/mathml/attribute/werte/index.html
@@ -0,0 +1,146 @@
+---
+title: Werte
+slug: Web/MathML/Attribute/Werte
+tags:
+  - MathML
+  - Referenz
+translation_of: Web/MathML/Attribute/Values
+---
+<h2 id="Maßangaben"><a id="massangaben" name="massangaben">Maßangaben</a></h2>
+
+<p>Für Angaben von Größen und Abständen in den Attributen der Darstellungselemente kennt MathML verschiedene Maßeinheiten und Konstanten:</p>
+
+<h3 id="Einheiten">Einheiten</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Einheit</th>
+   <th>Beschreibung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>em</code></td>
+   <td>Einheit, die sich auf die Schriftgröße bezieht. 1 em entspricht etwa der Breite des Großbuchstabens M. Siehe auch {{ Cssxref("font-size", "font-size") }}.</td>
+  </tr>
+  <tr>
+   <td><code>ex</code></td>
+   <td>Einheit, die sich auf die Schriftgröße bezieht. 1 ex entspricht etwa der Höhe des Kleinbuchstabens x. In vielen Schriftarten gilt auch <code>1ex ≈ 0.5em</code>. Siehe auch {{ Cssxref("font-size", "font-size") }}.</td>
+  </tr>
+  <tr>
+   <td><code>px</code></td>
+   <td>Pixel (Bildschirmpunkte)</td>
+  </tr>
+  <tr>
+   <td><code>in</code></td>
+   <td>Zoll (1 Zoll = 2,54 Zentimeter)</td>
+  </tr>
+  <tr>
+   <td><code>cm</code></td>
+   <td>Zentimeter</td>
+  </tr>
+  <tr>
+   <td><code>mm</code></td>
+   <td>Millimeter</td>
+  </tr>
+  <tr>
+   <td><code>pt</code></td>
+   <td>Punkt (1 Punkt = 1/72 Zoll)</td>
+  </tr>
+  <tr>
+   <td><code>pc</code></td>
+   <td>Pica (1 Pica = 12 Punkt)</td>
+  </tr>
+  <tr>
+   <td><code>%</code></td>
+   <td>Prozent vom Standardwert.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Konstanten">Konstanten</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Konstante</th>
+   <th>Wert</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>veryverythinmathspace</code></td>
+   <td>1/18<code>em</code></td>
+  </tr>
+  <tr>
+   <td><code>verythinmathspace</code></td>
+   <td>2/18<code>em</code></td>
+  </tr>
+  <tr>
+   <td><code>thinmathspace</code></td>
+   <td>3/18<code>em</code></td>
+  </tr>
+  <tr>
+   <td><code>mediummathspace</code></td>
+   <td>4/18<code>em</code></td>
+  </tr>
+  <tr>
+   <td><code>thickmathspace</code></td>
+   <td>5/18<code>em</code></td>
+  </tr>
+  <tr>
+   <td><code>verythickmathspace</code></td>
+   <td>6/18<code>em</code></td>
+  </tr>
+  <tr>
+   <td><code>veryverythickmathspace</code></td>
+   <td>7/18<code>em</code></td>
+  </tr>
+ </tbody>
+ <thead>
+  <tr>
+   <th colspan="2">Negative Konstante, seit Gecko 7.0 {{ geckoRelease("7.0") }} ({{ bug(650530) }})</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>negativeveryverythinmathspace</code></td>
+   <td>-1/18<code>em</code></td>
+  </tr>
+  <tr>
+   <td><code>negativeverythinmathspace</code></td>
+   <td>-2/18<code>em</code></td>
+  </tr>
+  <tr>
+   <td><code>negativethinmathspace</code></td>
+   <td>-3/18<code>em</code></td>
+  </tr>
+  <tr>
+   <td><code>negativemediummathspace</code></td>
+   <td>-4/18<code>em</code></td>
+  </tr>
+  <tr>
+   <td><code>negativethickmathspace</code></td>
+   <td>-5/18<code>em</code></td>
+  </tr>
+  <tr>
+   <td><code>negativeverythickmathspace</code></td>
+   <td>-6/18<code>em</code></td>
+  </tr>
+  <tr>
+   <td><code>negativeveryverythickmathspace</code></td>
+   <td>-7/18<code>em</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Anmerkung: Namedspace gilt in MathML 3 als veraltet (siehe <a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#id.3.3.4.2.1" rel="external" title="http://www.w3.org/TR/MathML3/chapter3.html#id.3.3.4.2.1">Namedspace binding is deprecated</a>) und wird seit Gecko 15.0 nicht mehr unterstützt {{ geckoRelease("15.0") }} (<a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=673759" rel="external">bug 673759</a>).</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/MathML" title="/en-US/docs/Web/MathML">MathML</a></li>
+ <li><a href="/de/docs/Web/MathML/Element">MathML Element-Referenz</a></li>
+ <li><a href="/de/docs/Web/MathML/Attribute">MathML Attribut-Referenz</a></li>
+</ul>
diff --git a/files/de/web/mathml/beispiele/index.html b/files/de/web/mathml/beispiele/index.html
new file mode 100644
index 0000000000..4d387e8110
--- /dev/null
+++ b/files/de/web/mathml/beispiele/index.html
@@ -0,0 +1,19 @@
+---
+title: Beispiele
+slug: Web/MathML/Beispiele
+tags:
+  - Anfänger
+  - Beispiel
+  - MathML
+translation_of: Web/MathML/Examples
+---
+<p>Hier gibt es einige Beispiele, die helfen können zu verstehen, wie mathematische Konzepte im Web-Umfeld dargestellt werden können.</p>
+
+<dl>
+ <dt><a href="/de/docs/Web/MathML/Beispiele/MathML_Satz_des_Pythagoras">Satz des Pythagoras</a></dt>
+ <dd>Einfaches Beispiel: der Beweis des Satzes des Pythagoras.</dd>
+ <dt><a href="/de/docs/Web/MathML/Beispiele/Quadratische_Gleichung">Lösungsformel für die Quadratische Gleichung</a></dt>
+ <dd>Zeigt die Ableitung der Quadratischen Gleichung.</dd>
+ <dt><a href="/en-US/docs/Mozilla/MathML_Project/MathML_Torture_Test">MathML Härte-Test</a></dt>
+ <dd>Umfangreicher MathML-Test.</dd>
+</dl>
diff --git a/files/de/web/mathml/beispiele/mathml_satz_des_pythagoras/index.html b/files/de/web/mathml/beispiele/mathml_satz_des_pythagoras/index.html
new file mode 100644
index 0000000000..3da8248ee6
--- /dev/null
+++ b/files/de/web/mathml/beispiele/mathml_satz_des_pythagoras/index.html
@@ -0,0 +1,85 @@
+---
+title: Beweis des Satzes des Pythagoras
+slug: Web/MathML/Beispiele/MathML_Satz_des_Pythagoras
+tags:
+  - Anfänger
+  - Beispiel
+  - MathML
+translation_of: Web/MathML/Examples/MathML_Pythagorean_Theorem
+---
+<p>Wir erbringen einen Beweis für den Satz des Pythagoras für rechtwinklige Dreiecke: <math> <mrow> <msup><mi> a </mi><mn>2</mn></msup> <mo> + </mo> <msup><mi> b </mi><mn>2</mn></msup> <mo> = </mo> <msup><mi> c </mi><mn>2</mn></msup> </mrow> </math></p>
+
+<p>Ohne Angabe des <code>display</code>-Attributes wird die Gleichung <code>inline</code>, also im laufenden Text dargestellt. Die Einrückungen dienen der Übersichtlichkeit. Über die von HTML bekannten Regeln gibt es hier keine Besonderheiten.</p>
+
+<pre class="brush: html">&lt;math&gt;
+  &lt;mrow&gt;
+    &lt;msup&gt;&lt;mi&gt; a &lt;/mi&gt;&lt;mn&gt;2&lt;/mn&gt;&lt;/msup&gt;
+    &lt;mo&gt; + &lt;/mo&gt;
+    &lt;msup&gt;&lt;mi&gt; b &lt;/mi&gt;&lt;mn&gt;2&lt;/mn&gt;&lt;/msup&gt;
+    &lt;mo&gt; = &lt;/mo&gt;
+    &lt;msup&gt;&lt;mi&gt; c &lt;/mi&gt;&lt;mn&gt;2&lt;/mn&gt;&lt;/msup&gt;
+  &lt;/mrow&gt;
+&lt;/math&gt;
+</pre>
+
+<p>Wir zeigen dass das große Quadrat flächengleich dem inneren Quadrat (Kantenlänge: Hypothenuse) plus die Flächen der vier kleinen Dreiecke: <math style="display: block;"> <mtable columnalign="right center left"> <mtr> <mtd> <msup> <mrow> <mo> ( </mo> <mi> a </mi> <mo> + </mo> <mi> b </mi> <mo> ) </mo> </mrow> <mn> 2 </mn> </msup> </mtd> <mtd> <mo> = </mo> </mtd> <mtd> <msup><mi> c </mi><mn>2</mn></msup> <mo> + </mo> <mn> 4 </mn> <mo> ⋅ </mo> <mo>(</mo> <mfrac> <mn> 1 </mn> <mn> 2 </mn> </mfrac> <mi> a </mi><mi> b </mi> <mo>)</mo> </mtd> </mtr> <mtr> <mtd> <msup><mi> a </mi><mn>2</mn></msup> <mo> + </mo> <mn> 2 </mn><mi> a </mi><mi> b </mi> <mo> + </mo> <msup><mi> b </mi><mn>2</mn></msup> </mtd> <mtd> <mo> = </mo> </mtd> <mtd> <msup><mi> c </mi><mn>2</mn></msup> <mo> + </mo> <mn> 2 </mn><mi> a </mi><mi> b </mi> </mtd> </mtr> <mtr> <mtd> <msup><mi> a </mi><mn>2</mn></msup> <mo> + </mo> <msup><mi> b </mi><mn>2</mn></msup> </mtd> <mtd> <mo> = </mo> </mtd> <mtd> <msup><mi> c </mi><mn>2</mn></msup> </mtd> </mtr> </mtable> </math></p>
+
+<p>Die Lösung der Gleichung wird im Fluss der Seite als Block dargestellt und <code>mtable</code> mit passender Ausrichtung der Spalten sorgt dafür, dass die Gleichungen sauber untereinander gesetzt werden.</p>
+
+<pre class="brush: html">&lt;math style="display: block;"&gt;
+  &lt;mtable columnalign="right center left"&gt;
+    &lt;mtr&gt;
+      &lt;mtd&gt;
+        &lt;msup&gt;
+          &lt;mrow&gt; &lt;mo&gt; ( &lt;/mo&gt; &lt;mi&gt; a &lt;/mi&gt; &lt;mo&gt; + &lt;/mo&gt; &lt;mi&gt; b &lt;/mi&gt; &lt;mo&gt; ) &lt;/mo&gt; &lt;/mrow&gt; &lt;mn&gt; 2 &lt;/mn&gt;
+        &lt;/msup&gt;
+      &lt;/mtd&gt;
+      &lt;mtd&gt;
+        &lt;mo&gt; = &lt;/mo&gt;
+      &lt;/mtd&gt;
+      &lt;mtd&gt;
+        &lt;msup&gt; &lt;mi&gt; c &lt;/mi&gt; &lt;mn&gt; 2 &lt;/mn&gt; &lt;/msup&gt;
+        &lt;mo&gt; + &lt;/mo&gt;
+        &lt;mn&gt; 4 &lt;/mn&gt;
+        &lt;mo&gt; ⋅ &lt;/mo&gt;
+        &lt;mo&gt; ( &lt;/mo&gt; &lt;mfrac&gt; &lt;mn&gt; 1 &lt;/mn&gt; &lt;mn&gt; 2 &lt;/mn&gt; &lt;/mfrac&gt; &lt;mi&gt; a &lt;/mi&gt; &lt;mi&gt; b &lt;/mi&gt; &lt;mo&gt; ) &lt;/mo&gt;
+      &lt;/mtd&gt;
+    &lt;/mtr&gt;
+    &lt;mtr&gt;
+      &lt;mtd&gt;
+        &lt;msup&gt; &lt;mi&gt; a &lt;/mi&gt; &lt;mn&gt; 2 &lt;/mn&gt; &lt;/msup&gt;
+        &lt;mo&gt; + &lt;/mo&gt;
+        &lt;mn&gt; 2 &lt;/mn&gt;
+        &lt;mi&gt; a &lt;/mi&gt;
+        &lt;mi&gt; b &lt;/mi&gt;
+        &lt;mo&gt; + &lt;/mo&gt;
+        &lt;msup&gt; &lt;mi&gt; b &lt;/mi&gt; &lt;mn&gt; 2 &lt;/mn&gt; &lt;/msup&gt;
+      &lt;/mtd&gt;
+      &lt;mtd&gt;
+        &lt;mo&gt; = &lt;/mo&gt;
+      &lt;/mtd&gt;
+      &lt;mtd&gt;
+        &lt;msup&gt; &lt;mi&gt; c &lt;/mi&gt; &lt;mn&gt; 2 &lt;/mn&gt; &lt;/msup&gt;
+        &lt;mo&gt; + &lt;/mo&gt;
+        &lt;mn&gt; 2 &lt;/mn&gt;
+        &lt;mi&gt; a &lt;/mi&gt;
+        &lt;mi&gt; b &lt;/mi&gt;
+      &lt;/mtd&gt;
+    &lt;/mtr&gt;
+    &lt;mtr&gt;
+      &lt;mtd&gt;
+        &lt;msup&gt; &lt;mi&gt; a &lt;/mi&gt; &lt;mn&gt; 2 &lt;/mn&gt; &lt;/msup&gt;
+        &lt;mo&gt; + &lt;/mo&gt;
+        &lt;msup&gt; &lt;mi&gt; b &lt;/mi&gt; &lt;mn&gt; 2 &lt;/mn&gt; &lt;/msup&gt;
+      &lt;/mtd&gt;
+      &lt;mtd&gt;
+        &lt;mo&gt; = &lt;/mo&gt;
+      &lt;/mtd&gt;
+      &lt;mtd&gt;
+        &lt;msup&gt; &lt;mi&gt; c &lt;/mi&gt; &lt;mn&gt; 2 &lt;/mn&gt; &lt;/msup&gt;
+      &lt;/mtd&gt;
+    &lt;/mtr&gt;
+  &lt;/mtable&gt;
+&lt;/math&gt;</pre>
+
+<p>Siehe <a href="https://de.wikipedia.org/wiki/Satz_des_Pythagoras#Beweise">https://de.wikipedia.org/wiki/Satz_des_Pythagoras#Beweise</a></p>
diff --git a/files/de/web/mathml/beispiele/quadratische_gleichung/index.html b/files/de/web/mathml/beispiele/quadratische_gleichung/index.html
new file mode 100644
index 0000000000..29a4f32e8f
--- /dev/null
+++ b/files/de/web/mathml/beispiele/quadratische_gleichung/index.html
@@ -0,0 +1,106 @@
+---
+title: Lösungsformel für die Quadratische Gleichung
+slug: Web/MathML/Beispiele/Quadratische_Gleichung
+tags:
+  - Beispiel
+  - MathML
+translation_of: Web/MathML/Examples/Deriving_the_Quadratic_Formula
+---
+<p>Lösungsformel der Quadratischen Gleichung (mit quadratischer Ergänzung)</p>
+
+<p><math> <mtable columnalign="left"> <mtr> <mtd> <mrow> <mrow> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mi>a</mi> <mo>⁢</mo> <msup> <mi>x</mi> <mn>2</mn> </msup></mrow> <mo> + </mo> <mi>b</mi> <mo>⁢</mo> <mi>x</mi> </mrow> <mo> + </mo> <mi>c</mi> </mrow> <mo>=</mo> <mn>0</mn> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mi>a</mi> <mo>⁢</mo> <msup> <mi>x</mi> <mn>2</mn> </msup></mrow> <mo> + </mo> <mi>b</mi> <mo>⁢</mo> <mi>x</mi> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> </mrow> <mo>=</mo> <mo>-</mo><mi> c</mi><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <msup> <mi>x</mi> <mn>2</mn> </msup></mrow> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mi>a</mi> </mfrac> <mo>⁤</mo> <mi>x</mi> </mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mo>=</mo> <mfrac> <mrow> <mo>-</mo><mi>c</mi> </mrow> <mi>a</mi> </mfrac> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace> </mtd> <mtd> <mrow><mtext mathcolor="red" mathsize="10pt">Division durch a</mtext> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <msup> <mi>x</mi> <mn>2</mn> </msup></mrow> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mi>a</mi> </mfrac> <mo>⁤</mo> <mi>x</mi> <mo> + </mo> <msup> <mfenced> <mfrac> <mrow> <mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow> </mfrac> </mfenced> <mn>2</mn> </msup> </mrow> <mo>=</mo> <mfrac> <mrow> <mo>-</mo> <mi>c</mi> <mo>(</mo> <mn>4</mn> <mi>a</mi> <mo>)</mo> </mrow> <mrow> <mi>a</mi> <mo>(</mo> <mn>4</mn> <mi>a</mi> <mo>)</mo> </mrow></mfrac> </mrow> <mo> + </mo> <mfrac> <mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> </mrow> <mrow> <mn>4</mn> <msup> <mi>a</mi> <mn>2</mn> </msup> </mrow></mfrac> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace> </mtd> <mtd> <mrow><mtext mathcolor="red" mathsize="10pt">quadratische Ergänzung</mtext> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mo>(</mo> <mi>x</mi> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> <mo>)</mo> <mo>(</mo> <mi>x</mi> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> <mo>)</mo> <mo>=</mo> <mfrac> <mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo> - </mo> <mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow> <mrow> <mn>4</mn> <msup> <mi>a</mi> <mn>2</mn> </msup> </mrow></mfrac> </mrow> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace> </mrow></mtd> <mtd> <mrow><mtext mathcolor="red" mathsize="10pt">binomische Formel</mtext> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <msup> <mrow> <mo>(</mo> <mi>x</mi> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> <mo>)</mo> </mrow> <mn>2</mn> </msup> <mo>=</mo> <mfrac> <mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo> - </mo> <mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow> <mrow> <mn>4</mn> <msup> <mi>a</mi> <mn>2</mn> </msup> </mrow></mfrac> </mrow> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt"></mtext> </mrow> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mrow> <mi>x</mi> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> </mrow> <mo>=</mo> <msqrt> <mfrac> <mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo> - </mo> <mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow> <mrow> <mn>4</mn> <msup> <mi>a</mi> <mn>2</mn> </msup> </mrow></mfrac> </msqrt> </mrow> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt"></mtext> </mrow> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mrow> <mi>x</mi> </mrow> <mo>=</mo> <mfrac> <mrow> <mo>-</mo><mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> <mo>±</mo><mrow><mo>{</mo><mi>C</mi><mo>}</mo></mrow> <msqrt> <mfrac> <mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo> - </mo> <mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow> <mrow> <mn>4</mn> <msup> <mi>a</mi> <mn>2</mn> </msup> </mrow></mfrac> </msqrt> </mrow> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace> </mrow></mtd> <mtd> <mrow><mtext mathcolor="red" mathsize="10pt">Scheitelpunktberechnung</mtext> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mrow> <mi>x</mi> </mrow> <mo>=</mo> <mfrac> <mrow> <mo>-</mo> <mi> b</mi> <mo>±</mo><mrow><mo>{</mo><mi>C</mi><mo>}</mo></mrow> <msqrt> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo> - </mo> <mn>4</mn> <mi>a</mi> <mi>c</mi> </msqrt></mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> </mrow> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace> <mrow><mtext mathcolor="red" mathsize="10pt"></mtext> </mrow> </mrow> </mtd> </mtr> </mtable></math></p>
+
+<p>Zur Erläuterung hier der Quelltext der letzten beiden Zeilen. <code>mtable</code> erleichtert die Anordnung mehrerer, zusammengehöriger Gleichungen und Erläuterungen untereinander.</p>
+
+<pre class="brush: html">&lt;math&gt;
+  &lt;mtable columnalign="left"&gt;
+    &lt;mtr&gt;
+      &lt;mtd&gt;
+        &lt;mrow&gt;
+          &lt;mrow&gt;
+            &lt;mrow&gt;
+              &lt;mi&gt;x&lt;/mi&gt;
+            &lt;/mrow&gt;
+            &lt;mo&gt;=&lt;/mo&gt;
+            &lt;mfrac&gt;
+              &lt;mrow&gt;
+                &lt;mo&gt;-&lt;/mo&gt;&lt;mi&gt;b&lt;/mi&gt;
+              &lt;/mrow&gt;
+              &lt;mrow&gt;
+                &lt;mn&gt;2&lt;/mn&gt;&lt;mi&gt;a&lt;/mi&gt;
+              &lt;/mrow&gt;
+            &lt;/mfrac&gt;
+            &lt;mo&gt;±&lt;/mo&gt;
+            &lt;mrow&gt;
+              &lt;mo&gt;{&lt;/mo&gt;&lt;mi&gt;C&lt;/mi&gt;&lt;mo&gt;}&lt;/mo&gt;
+            &lt;/mrow&gt;
+            &lt;msqrt&gt;
+              &lt;mfrac&gt;
+                &lt;mrow&gt;
+                  &lt;msup&gt;&lt;mi&gt;b&lt;/mi&gt;&lt;mn&gt;2&lt;/mn&gt;&lt;/msup&gt;
+                  &lt;mo&gt;-&lt;/mo&gt;
+                  &lt;mn&gt;4&lt;/mn&gt;
+                  &lt;mi&gt;a&lt;/mi&gt;
+                  &lt;mi&gt;c&lt;/mi&gt;
+                &lt;/mrow&gt;
+                &lt;mrow&gt;
+                  &lt;mn&gt;4&lt;/mn&gt;
+                  &lt;msup&gt;&lt;mi&gt;a&lt;/mi&gt;&lt;mn&gt;2&lt;/mn&gt;&lt;/msup&gt;
+                &lt;/mrow&gt;
+              &lt;/mfrac&gt;
+            &lt;/msqrt&gt;
+          &lt;/mrow&gt;
+          &lt;mspace depth="1ex" height="0.5ex" width="2ex"&gt;&lt;/mspace&gt;
+        &lt;/mrow&gt;
+      &lt;/mtd&gt;
+      &lt;mtd&gt;
+        &lt;mrow&gt;
+          &lt;mtext mathcolor="red" mathsize="10pt"&gt;Scheitelpunktberechnung&lt;/mtext&gt;
+        &lt;/mrow&gt;
+      &lt;/mtd&gt;
+    &lt;/mtr&gt;
+    &lt;mtr&gt;
+      &lt;mtd&gt;
+        &lt;mrow&gt;
+          &lt;mrow&gt;
+            &lt;/mspace&gt;
+            &lt;mrow&gt;
+              &lt;mi&gt;x&lt;/mi&gt;
+            &lt;/mrow&gt;
+            &lt;mo&gt;=&lt;/mo&gt;
+            &lt;mfrac&gt;
+              &lt;mrow&gt;
+                &lt;mo&gt;-&lt;/mo&gt;
+                &lt;mi&gt;b&lt;/mi&gt;
+                &lt;mo&gt;±&lt;/mo&gt;
+                &lt;mrow&gt;
+                  &lt;mo&gt;{&lt;/mo&gt;&lt;mi&gt;C&lt;/mi&gt;&lt;mo&gt;}&lt;/mo&gt;
+                &lt;/mrow&gt;
+                &lt;msqrt&gt;
+                  &lt;msup&gt;&lt;mi&gt;b&lt;/mi&gt;&lt;mn&gt;2&lt;/mn&gt;&lt;/msup&gt;
+                  &lt;mo&gt;-&lt;/mo&gt;
+                  &lt;mn&gt;4&lt;/mn&gt;
+                  &lt;mi&gt;a&lt;/mi&gt;
+                  &lt;mi&gt;c&lt;/mi&gt;
+                &lt;/msqrt&gt;
+              &lt;/mrow&gt;
+              &lt;mrow&gt;
+                &lt;mn&gt;2&lt;/mn&gt;
+                &lt;mi&gt;a&lt;/mi&gt;
+              &lt;/mrow&gt;
+            &lt;/mfrac&gt;
+          &lt;/mrow&gt;
+          &lt;mspace depth="1ex" height="0.5ex" width="2ex"&gt;
+          &lt;/mspace&gt;
+          &lt;mrow&gt;
+            &lt;mtext mathcolor="red" mathsize="10pt"&gt;&lt;/mtext&gt;
+          &lt;/mrow&gt;
+        &lt;/mrow&gt;
+      &lt;/mtd&gt;
+    &lt;/mtr&gt;
+  &lt;/mtable&gt;
+&lt;/math&gt;</pre>
+
+<p> </p>
+
+<p>Siehe <a href="https://de.wikipedia.org/wiki/Quadratische_Gleichung#L.C3.B6sungen_der_quadratischen_Gleichung_mit_reellen_Koeffizienten">https://de.wikipedia.org/wiki/Quadratische_Gleichung#L.C3.B6sungen_der_quadratischen_Gleichung_mit_reellen_Koeffizienten</a></p>
diff --git a/files/de/web/mathml/element/index.html b/files/de/web/mathml/element/index.html
new file mode 100644
index 0000000000..48be844b59
--- /dev/null
+++ b/files/de/web/mathml/element/index.html
@@ -0,0 +1,144 @@
+---
+title: MathML Element-Referenz
+slug: Web/MathML/Element
+tags:
+  - MathML
+  - Referenz
+translation_of: Web/MathML/Element
+---
+<p>Dies ist eine alphabetische Liste aller MathML<strong>-Darstellungselemente</strong> (engl. presentation markup). Damit können innerhalb einer html-Umgebung mathematische Terme und Gleichungen dargestellt werden.</p>
+
+<div class="note">
+<p>Hinweis: Damit nicht zu verwechseln ist die inhaltliche Beschreibung eines mathematischen Terms oder einer Gleichung (engl. content markup). Die inhaltliche Beschreibung ist nicht dafür gedacht, unmittelbar vom MathML-Parser innerhalb von html-Seiten dargestellt zu werden.  (siehe {{ bug(276028) }}). Wenn Du mehr über das content markup lernen möchtest, dann besuche <a class="external" href="http://www.w3.org/TR/MathML3/chapter4.html" title="http://www.w3.org/TR/MathML3/chapter4.html">Kapitel 4</a> der <a class="external" href="http://www.w3.org/TR/MathML3/" title="http://www.w3.org/TR/MathML3/">MathML 3-Spezifikation</a>.</p>
+</div>
+
+<div class="multiColumnList">
+<h3 id="math">math</h3>
+
+<ul>
+ <li>{{ MathMLElement("math") }} (Wurzelelement, Top-level element)</li>
+</ul>
+
+<h3 id="A">A</h3>
+
+<ul>
+ <li>{{ MathMLElement("maction") }} (Mit einem Ausdruck verknüpfte Aktion)</li>
+ <li>{{ MathMLElement("maligngroup") }} (Alignment group){{ unimplemented_inline() }}</li>
+ <li>{{ MathMLElement("malignmark") }} (Alignment points){{ unimplemented_inline() }}</li>
+</ul>
+
+<h3 id="E">E</h3>
+
+<ul>
+ <li>{{ MathMLElement("menclose") }} (Umrandung/Markierung)</li>
+ <li>{{ MathMLElement("merror") }} (Fehler im Ausdruck hervorheben)</li>
+</ul>
+
+<h3 id="F">F</h3>
+
+<ul>
+ <li>{{ MathMLElement("mfenced") }} (Klammern setzen)</li>
+ <li>{{ MathMLElement("mfrac") }} (Bruch)</li>
+</ul>
+
+<h3 id="G">G</h3>
+
+<ul>
+ <li>{{ MathMLElement("mglyph") }} (Displaying non-standard symbols) {{ unimplemented_inline() }}</li>
+</ul>
+
+<h3 id="I">I</h3>
+
+<ul>
+ <li>{{ MathMLElement("mi") }} (Bezeichner, engl. identifier)</li>
+</ul>
+
+<h3 id="L">L</h3>
+
+<ul>
+ <li>{{ MathMLElement("mlabeledtr") }} (Labeled row in a table or a matrix) {{ unimplemented_inline() }}</li>
+ <li>{{ MathMLElement("mlongdiv") }} (Long division notation) {{ unimplemented_inline() }}</li>
+</ul>
+
+<h3 id="M">M</h3>
+
+<ul>
+ <li>{{ MathMLElement("mmultiscripts") }} (Prescripts and tensor indices)</li>
+</ul>
+
+<h3 id="N">N</h3>
+
+<ul>
+ <li>{{ MathMLElement("mn") }} (Wert, engl. number)</li>
+</ul>
+
+<h3 id="O">O</h3>
+
+<ul>
+ <li>{{ MathMLElement("mo") }} (Rechenzeichen, Operator)</li>
+ <li>{{ MathMLElement("mover") }} (Akzent/Grenzwert oberhalb des Ausdrucks)</li>
+</ul>
+
+<h3 id="P">P</h3>
+
+<ul>
+ <li>{{ MathMLElement("mpadded") }} (Innenabstand hinzufügen)</li>
+ <li>{{ MathMLElement("mphantom") }} (Platz für unsichtbaren Ausdruck)</li>
+</ul>
+
+<h3 id="R">R</h3>
+
+<ul>
+ <li>{{ MathMLElement("mroot") }} (Wurzel <em>mit</em> ausgeschriebenem Exponenten)</li>
+ <li>{{ MathMLElement("mrow") }} (Ausdrücke gruppieren)</li>
+</ul>
+
+<h3 id="S">S</h3>
+
+<ul>
+ <li>{{ MathMLElement("ms") }} (Zeichenkette)</li>
+ <li>{{ MathMLElement("mscarries") }} (Annotations such as carries) {{ unimplemented_inline() }}</li>
+ <li>{{ MathMLElement("mscarry") }} (Single carry, child element of {{ MathMLElement("mscarries") }}) {{ unimplemented_inline() }}</li>
+ <li>{{ MathMLElement("msgroup") }} (Grouped rows of {{ MathMLElement("mstack") }} and {{ MathMLElement("mlongdiv") }} elements) {{ unimplemented_inline() }}</li>
+ <li>{{ MathMLElement("msline") }} (Horizontal lines inside {{ MathMLElement("mstack") }} elements) {{ unimplemented_inline() }}</li>
+ <li>{{ MathMLElement("mspace") }} (Leerraum)</li>
+ <li>{{ MathMLElement("msqrt") }} ([Quadrat-]Wurzel, <em>ohne</em> angegebenen Exponenten)</li>
+ <li>{{ MathMLElement("msrow") }} (Rows in {{ MathMLElement("mstack") }} elements) {{ unimplemented_inline() }}</li>
+ <li>{{ MathMLElement("mstack") }} (Stacked alignment) {{ unimplemented_inline() }}</li>
+ <li>{{ MathMLElement("mstyle") }} (Änderung der Darstellung)</li>
+ <li>{{ MathMLElement("msub") }} (Subscript, tiefergestellte Zahl)</li>
+ <li>{{ MathMLElement("msup") }} (Superscript, Exponent, höhergestellte Zahl)</li>
+ <li>{{ MathMLElement("msubsup") }} (Höher- <em>und</em> tiefergestellte Zahl)</li>
+</ul>
+
+<h3 id="T">T</h3>
+
+<ul>
+ <li>{{ MathMLElement("mtable") }} (Tabelle oder Matrix)</li>
+ <li>{{ MathMLElement("mtd") }} (Zelle in einer Tabelle oder Matrix)</li>
+ <li>{{ MathMLElement("mtext") }} (Text)</li>
+ <li>{{ MathMLElement("mtr") }} (Zeile in einer Tabelle oder Matrix)</li>
+</ul>
+
+<h3 id="U">U</h3>
+
+<ul>
+ <li>{{ MathMLElement("munder") }} (Akzent/Grenzwert unterhalb des Ausdrucks)</li>
+ <li>{{ MathMLElement("munderover") }} (Akzente/Grenzwerte ober- und unterhalb des Ausdrucks)</li>
+</ul>
+
+<h3 id="Other_elements">Other elements</h3>
+
+<ul>
+ <li>{{ MathMLElement("semantics") }} (Container for semantic annotations)</li>
+ <li>{{ MathMLElement("annotation") }} (Data annotations)</li>
+ <li>{{ MathMLElement("annotation-xml") }} (XML annotations)</li>
+</ul>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/MathML" title="/en-US/docs/Web/MathML">MathML</a></li>
+ <li><a href="/de/docs/Web/MathML/Attribute">MathML Attribut-Referenz</a></li>
+</ul>
diff --git a/files/de/web/mathml/element/maction/index.html b/files/de/web/mathml/element/maction/index.html
new file mode 100644
index 0000000000..178baf57e5
--- /dev/null
+++ b/files/de/web/mathml/element/maction/index.html
@@ -0,0 +1,239 @@
+---
+title: <maction>
+slug: Web/MathML/Element/maction
+tags:
+  - MathML
+  - 'MathML:Element'
+  - Referenz
+translation_of: Web/MathML/Element/maction
+---
+<div>{{MathMLRef}}</div>
+
+<div class="summary">
+<p>Das <strong><code>&lt;maction&gt;</code></strong>-Element verbindet Ausdrücke oder Teile von Ausdrücken mit Aktionen. Die Aktion wird durch das Attribute <code>actiontype</code> benannt. Mit dem Attribut <code>selection</code> kann ein bestimmtes Kind-Element gezielt ausgewählt werden.</p>
+</div>
+
+<h2 id="Attribute">Attribute</h2>
+
+<dl>
+ <dt id="attr-actiontype">actiontype</dt>
+ <dd>Bestimmt, welche Aktion mit diesem Ausdruck verbunden werden soll. Mögliche Werte sind:
+ <ul>
+  <li><code>statusline</code>: Wenn der <em>expression</em> angeklickt wird oder der Nutzer den Mauszeiger über den Ausdruck bewegt, dann wird <em>message</em> in der Statuszeile des Browsers eingeblendet. Die Syntax ist: <code>&lt;maction actiontype="statusline"&gt; <em>expression</em> <em>message</em> &lt;/maction&gt;.</code></li>
+  <li><code>toggle</code>: Wenn der Ausdruck mit der Maus angeklickt wird, dann wechselt die Darstellung zum nächsten der Ausdrücke. Jeder Klick setzt den Wert von <code>selection</code> um eins herauf, nach dem letzten Ausdruck folgt wieder der erste.<br>
+   The syntax is: <code>&lt;maction actiontype="toggle" selection="<em>positive-integer</em>" &gt; <em>expression1</em> <em>expression2</em> <em>expressionN</em> &lt;/maction&gt;</code>.</li>
+  <li><code>tooltip </code>{{ unimplemented_inline() }} : Wenn der Mauszeiger über <em>expression</em> bewegt wird, dann wird ein Tooltip mit dem Text <em>message</em> angezeigt.<br>
+   Die Syntax ist:<code> &lt;maction actiontype="tooltip"&gt; <em>expression</em> <em>message</em> &lt;/maction&gt;.</code></li>
+ </ul>
+ </dd>
+ <dt id="attr-class-id-style">class, id, style</dt>
+ <dd>Zur Einbindung von <a href="https://developer.mozilla.org/de/docs/Web/CSS">CSS-Stylesheets</a> und zur direkten Anwendung von CSS-Angaben.</dd>
+ <dt id="attr-href">href</dt>
+ <dd>Mit diesem Attribut kann ein Link gesetzt werden.</dd>
+ <dt id="attr-mathbackground">mathbackground</dt>
+ <dd>Die Hintergrundfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+ <dt id="attr-mathcolor">mathcolor</dt>
+ <dd>Die Textfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+ <dt id="attr-selection">selection</dt>
+ <dd>Benennt das Kind-Element für die Aktion. Der Vorgabewert ist 1 für das erste Kind-Element. Die Darstellung beginnt mit dem so benannte Ausdruck. Dieses Attribut wirkt nur bei <code>actiontype=toggle</code>.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Dieses Beispiel nutzt den "toggle" <code>actiontype</code>, um zwischen drei Ausdrücken zyklisch umzuschalten:</p>
+
+<pre class="brush: html">&lt;math&gt;
+
+&lt;maction actiontype="toggle"&gt;
+
+  &lt;mfrac&gt;
+    &lt;mn&gt;6&lt;/mn&gt;
+    &lt;mn&gt;8&lt;/mn&gt;
+  &lt;/mfrac&gt;
+
+  &lt;mfrac&gt;
+    &lt;mrow&gt;
+      &lt;mn&gt;3&lt;/mn&gt;
+      &lt;mo&gt;&amp;sdot;&lt;/mo&gt;
+      &lt;mn&gt;2&lt;/mn&gt;
+    &lt;/mrow&gt;
+    &lt;mrow&gt;
+      &lt;mn&gt;4&lt;/mn&gt;
+      &lt;mo&gt;&amp;sdot;&lt;/mo&gt;
+      &lt;mn&gt;2&lt;/mn&gt;
+    &lt;/mrow&gt;
+  &lt;/mfrac&gt;
+
+  &lt;mfrac&gt;
+    &lt;mn&gt;3&lt;/mn&gt;
+    &lt;mn&gt;4&lt;/mn&gt;
+  &lt;/mfrac&gt;
+
+&lt;/maction&gt;
+
+&lt;/math&gt;
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Standard</th>
+   <th scope="col">Status</th>
+   <th scope="col">Bemerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('MathML3', 'chapter3.html#presm.maction', 'maction') }}</td>
+   <td>{{ Spec2('MathML3') }}</td>
+   <td>Current specification</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('MathML2', 'chapter3.html#presm.maction', 'maction') }}</td>
+   <td>{{ Spec2('MathML2') }}</td>
+   <td>Initial specification</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}} [2]</td>
+  </tr>
+  <tr>
+   <td><code>actiontype</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("7.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}} [3]</td>
+  </tr>
+  <tr>
+   <td><code>mathbackground</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathcolor</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>actiontype</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("7.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathbackground</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathcolor</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <code>toggle</code> &amp; <code>statusline</code>. <code>tooltip</code> sind nicht implementiert <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=544001">bug 544001</a>.</p>
+
+<p>[2] Siehe <a href="https://bugs.webkit.org/show_bug.cgi?id=85734">WebKit bug 85734</a>.</p>
+
+<p>[3] Siehe <a href="https://bugs.webkit.org/show_bug.cgi?id=85733">WebKit bug 85733</a>.</p>
+
+<h2 id="Hinweise_zu_Gecko">Hinweise zu Gecko</h2>
+
+<ul>
+ <li>Bis Gecko 9.0 {{ geckoRelease("9.0") }} wurde der nichtstandardisierte Wert <code>actiontype=restyle</code> unterstützt. Dieser Wert wird nun nicht mehr unterstützt.</li>
+ <li>Bis Gecko 14.0 {{ geckoRelease("14.0") }} hatte <code>actiontype=statusline</code> eine nichtstandardisierte Schreibweise (siehe unten). Dies wurde korrigiert und entspricht jetzt der MathML-Spezifikation.
+  <pre class="brush: html">&lt;maction actiontype="statusline#(message)"&gt;
+(expression)
+&lt;/maction&gt;
+</pre>
+ </li>
+ <li>Ab Gecko 15.0 {{geckoRelease("15.0")}} wird das Attribute <code>selection</code> nur noch für <code>actiontype=toggle</code> akzeptiert.</li>
+ <li>Ab Gecko 16.0 {{geckoRelease("16.0")}} wird das Attribut <code>selection</code> auch für unbekannte Werte für <code>actiontype</code> akzeptiert. Wird der Wert für <code>actiontype</code> leergelassen oder hat <code>selection</code> einen ungültigen Wert, schreibt MathML einen Fehler aus (invalid-markup).</li>
+</ul>
diff --git a/files/de/web/mathml/element/math/index.html b/files/de/web/mathml/element/math/index.html
new file mode 100644
index 0000000000..6a8b357097
--- /dev/null
+++ b/files/de/web/mathml/element/math/index.html
@@ -0,0 +1,308 @@
+---
+title: <math>
+slug: Web/MathML/Element/math
+tags:
+  - MathML
+  - 'MathML:Element'
+  - Referenz
+translation_of: Web/MathML/Element/math
+---
+<div>{{MathMLRef}}</div>
+
+<p class="summary"><code>&lt;math&gt;</code> ist das Wurzel-Element der MathML-Auszeichnungssprache . Jeder MathML-Kode, der gültig sein soll, muss in <code>&lt;math&gt;</code>-Tags eingeschlossen sein. Ein <code>&lt;math&gt;</code>-Element darf kein weiteres <code>&lt;math&gt;</code>-Element, aber beliebig viele andere (MathML-)Kind-Elemente enthalten.</p>
+
+<h2 id="Attribute">Attribute</h2>
+
+<p>Zusätzlich zu den folgenden Attributen akzeptiert das  <code>&lt;math&gt;</code>-Element auch alle Attribute des {{ MathMLElement("mstyle") }}-Elements.</p>
+
+<dl>
+ <dt id="attr-class-id-style">class, id, style</dt>
+ <dd>Zur Einbindung von <a href="/de/docs/Web/CSS">CSS-Stylesheets</a> und zur direkten Anwendung von CSS-Angaben auf einzelne Elemente.</dd>
+ <dt id="attr-dir">dir</dt>
+ <dd>Allgemeine Schreibrichtung für die Formeln. Mögliche Werte sind <code>ltr</code> (left to right, von links nach rechts) und <code>rtl</code> (right to left, von rechts nach links).</dd>
+ <dt id="attr-href">href</dt>
+ <dd>Mit diesem Attribut kann ein Link gesetzt werden.</dd>
+ <dt id="attr-mathbackground">mathbackground</dt>
+ <dd>Die Hintergrundfarbe. Folgende Notationen sind erlaubt: <code><a href="/de/docs/Web/CSS/Farben#rgb()">#rgb</a></code>, <code><a href="/de/docs/Web/CSS/Farben#rgb()">#rrggbb</a></code> und <a href="/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+ <dt id="attr-mathcolor">mathcolor</dt>
+ <dd>Die Textfarbe. Folgende Notationen sind erlaubt: <code><a href="/de/docs/Web/CSS/Farben#rgb()">#rgb</a></code>, <code><a href="/de/docs/Web/CSS/Farben#rgb()">#rrggbb</a></code> und <a href="/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+ <dt id="attr-display"><a id="display" name="display">display</a></dt>
+ <dd>Dieses Attribut bestimmt, wie das MathML-Element dargestellt wird. Zwei Werte sind möglich:
+ <ul>
+  <li><code>block</code>, das Element wird auf der Seite als eigener Block dargestellt, kann weitgehend frei positioniert werden und ist mit dem Text inhaltlich nur lose verbunden.</li>
+  <li><code>inline</code>, das Element wird innerhalb des laufenden Textes dargestellt. Es ist eng mit dem Text verknüpft und kann nicht herausgelöst werden ohne die Bedeutung des Textes zu verändern. <code>inline</code> ist der Vorgabewert.</li>
+ </ul>
+ </dd>
+ <dt id="attr-mode">mode {{deprecated_inline}}</dt>
+ <dd>Veraltet und durch das <a href="/de/docs/MathML/Element/math#attr-display">{{anch("display")}}</a>-Attribut ersetzt. Mögliche Werte sind: <code>display</code> (hat den gleichen Effekt wie <code>display="block"</code>) und <code>inline</code>.</dd>
+ <dt id="attr-overflow">overflow</dt>
+ <dd>Bestimmt, wie sich der mathematische Ausdruck verhält, wenn er breiter ist als die erlaubte Breite des Elements. Mögliche Werte sind: <code>linebreak</code> (Standard), <code>scroll</code>, <code>elide</code>, <code>truncate</code>, <code>scale</code>.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p><img alt="Theorem of Pythagoras" src="/files/3157/math.jpg"></p>
+
+<h3 id="HTML5-Schreibweise">HTML5-Schreibweise</h3>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;MathML in HTML5&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+  &lt;math&gt;
+    &lt;mrow&gt;
+      &lt;mrow&gt;
+        &lt;msup&gt;
+          &lt;mi&gt;a&lt;/mi&gt;
+          &lt;mn&gt;2&lt;/mn&gt;
+        &lt;/msup&gt;
+        &lt;mo&gt;+&lt;/mo&gt;
+        &lt;msup&gt;
+          &lt;mi&gt;b&lt;/mi&gt;
+          &lt;mn&gt;2&lt;/mn&gt;
+        &lt;/msup&gt;
+      &lt;/mrow&gt;
+      &lt;mo&gt;=&lt;/mo&gt;
+      &lt;msup&gt;
+        &lt;mi&gt;c&lt;/mi&gt;
+        &lt;mn&gt;2&lt;/mn&gt;
+      &lt;/msup&gt;
+    &lt;/mrow&gt;
+  &lt;/math&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="XHTML-Schreibweise">XHTML-Schreibweise</h3>
+
+<pre class="brush: xml">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd"&gt;
+&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
+&lt;head&gt;
+ &lt;title&gt;MathML in XHTML&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+  &lt;math xmlns="http://www.w3.org/1998/Math/MathML"&gt;
+    &lt;mrow&gt;
+      &lt;mrow&gt;
+        &lt;msup&gt;
+          &lt;mi&gt;a&lt;/mi&gt;
+          &lt;mn&gt;2&lt;/mn&gt;
+        &lt;/msup&gt;
+        &lt;mo&gt;+&lt;/mo&gt;
+        &lt;msup&gt;
+          &lt;mi&gt;b&lt;/mi&gt;
+          &lt;mn&gt;2&lt;/mn&gt;
+        &lt;/msup&gt;
+      &lt;/mrow&gt;
+      &lt;mo&gt;=&lt;/mo&gt;
+      &lt;msup&gt;
+        &lt;mi&gt;c&lt;/mi&gt;
+        &lt;mn&gt;2&lt;/mn&gt;
+      &lt;/msup&gt;
+    &lt;/mrow&gt;
+  &lt;/math&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p><strong>Hinweis</strong>: XHTML-Dokumente mit MathML müssen vom Server als <code>application/xhtml+xml</code> ausgliefert werden. Das kannst Du einfach erreichen, indem Du Deinen lokalen Dateien die Endung <code>.xhtml</code> gibst. Beim Apache-Webserver kannst Du entsprechend die<a class="external" href="http://httpd.apache.org/docs/current/mod/mod_mime.html#addtype" title="http://httpd.apache.org/docs/2.2/mod/mod_mime.html#addtype"> <code>.htaccess-Datei konfigurieren</code></a>, so dass die Dateiendung dem korrekten Mime type zugeordnet wird. Achte in diesem Fall auch darauf, dass die XML-Datei wohlgeformt ist, d.h. den grundsätzlichen Anforderungen an die Formatierung einer XML-Datei genügt.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Standard</th>
+   <th scope="col">Status</th>
+   <th scope="col">Bemerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('MathML3', 'chapter2.html#interf.toplevel', 'The Top-Level math Element') }}</td>
+   <td>{{ Spec2('MathML3') }}</td>
+   <td>Current specification</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('MathML2', 'chapter7.html#interf.toplevel', 'The Top-Level math Element') }}</td>
+   <td>{{ Spec2('MathML2') }}</td>
+   <td>Initial specification</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>XHTML notation</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>9.5</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td>HTML5 notation</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>dir</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("12.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("7.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}} [1]</td>
+  </tr>
+  <tr>
+   <td><code>mathbackground</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>mathcolor</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>overflow</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>XHTML notation</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>HTML5 notation</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>dir</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("12.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("7.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}} [1]</td>
+  </tr>
+  <tr>
+   <td><code>mathbackground</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathcolor</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>overflow</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Siehe <a href="https://bugs.webkit.org/show_bug.cgi?id=85733">bug 85733</a>.</p>
+
+<h2 id="Hinweise_zur_Gecko">Hinweise zur Gecko</h2>
+
+<p>Die Gecko Rendering Engine unterstützt seit Version 7.0 {{ geckoRelease("7.0") }} die Verwendung von MathML-Attributen auf das <code>&lt;math&gt;</code>-Element (und hat damit das gleiche Verhalten wie das {{ MathMLElement("mstyle") }}-Element). Das <code>displaystyle</code>-Attribute wurde allerdings erst in Gecko 8.0 {{ geckoRelease("8.0") }} ergänzt. <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=669719" title="https://bugzilla.mozilla.org/show_bug.cgi?id=669719">Siehe bug 669719</a>.</p>
+
+<p>Weder Alternativer Text (<code>alttext</code>) noch der Verweis auf eine alternative Grafik mit den Attributen <code>altimg</code>, <code>altimg-width</code>, <code>altimg-height</code> oder <code>altimg-valign</code> sind in Gecko gegenwärtig implemtiert.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>HTML-Wurzelelement: {{ HTMLElement("html") }}</li>
+ <li>SVG-Wurzelelement: {{ SVGElement("svg") }}</li>
+ <li>MathML-Browsertest: For <a class="link-https" href="https://www.eyeasme.com/Joe/MathML/MathML_browser_test">XHTML</a> and <a class="link-https" href="https://eyeasme.com/Joe/MathML/HTML5_MathML_browser_test">HTML5</a></li>
+</ul>
diff --git a/files/de/web/mathml/element/menclose/index.html b/files/de/web/mathml/element/menclose/index.html
new file mode 100644
index 0000000000..8c41049e54
--- /dev/null
+++ b/files/de/web/mathml/element/menclose/index.html
@@ -0,0 +1,313 @@
+---
+title: <menclose>
+slug: Web/MathML/Element/menclose
+tags:
+  - MathML
+  - 'MathML:Element'
+  - Referenz
+translation_of: Web/MathML/Element/menclose
+---
+<div>{{MathMLRef}}</div>
+
+<p class="summary">Das MathML-Element <code>&lt;menclose&gt;</code> stellt seinen Inhalt innerhalb einer Umrandung oder Notation dar, die mit dem Attribut <code>notation</code> festgelegt werden kann. (engl. to enclose = einschließen, umzäunen)</p>
+
+<h2 id="Attribute">Attribute</h2>
+
+<dl>
+ <dt id="attr-class-id-style">class, id, style</dt>
+ <dd>Zur Einbindung von <a href="https://developer.mozilla.org/de/docs/Web/CSS">CSS-Stylesheets</a> und zur direkten Anwendung von CSS-Angaben.</dd>
+ <dt id="attr-href">href</dt>
+ <dd>Mit diesem Attribut kann ein Link gesetzt werden.</dd>
+ <dt id="attr-mathbackground">mathbackground</dt>
+ <dd>Die Hintergrundfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+ <dt id="attr-mathcolor">mathcolor</dt>
+ <dd>Die Textfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+ <dt id="attr-notation">notation</dt>
+ <dd>Eine Liste von Angaben, durch Leerzeichen getrennt. Alle Angaben werden unabhängig voneinander auf den Ausdruck angewandt, können sich also auch überlappen. Mögliche Werte sind:
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th>Wert</th>
+    <th>Beispiel</th>
+    <th>Darstellung in Deinem Browser</th>
+    <th>Beschreibung</th>
+   </tr>
+   <tr>
+    <td><code>longdiv</code> (default)</td>
+    <td><img alt="longdiv" src="/files/3167/default.png"></td>
+    <td><math> <menclose notation="longdiv"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+    <td>langer Bruchstrich</td>
+   </tr>
+   <tr>
+    <td><code>actuarial</code></td>
+    <td><img alt="actuarial" src="/files/3168/actuarial.png"></td>
+    <td><math> <menclose notation="actuarial"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+    <td><a class="external" href="http://en.wikipedia.org/wiki/Actuarial_notation" title="http://en.wikipedia.org/wiki/Actuarial_notation">actuarial symbol</a></td>
+   </tr>
+   <tr>
+    <td><code>radical</code></td>
+    <td><img alt="radical" src="/files/3169/radical.png"></td>
+    <td><math> <menclose notation="radical"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+    <td>Quadratwurzel</td>
+   </tr>
+   <tr>
+    <td><code>box</code></td>
+    <td><img alt="box" src="/files/3170/box.png"></td>
+    <td><math> <menclose notation="box"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+    <td>Rechteckige Umrandung</td>
+   </tr>
+   <tr>
+    <td><code>roundedbox</code></td>
+    <td><img alt="roundedbox" src="/files/3171/roundedbox.png"></td>
+    <td><math> <menclose notation="roundedbox"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+    <td>Abgerundete, rechteckige Umrandung</td>
+   </tr>
+   <tr>
+    <td><code>circle</code></td>
+    <td><img alt="circle" src="/files/3172/circle.png"></td>
+    <td><math> <menclose notation="circle"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+    <td>Kreisähnliche Umrandung</td>
+   </tr>
+   <tr>
+    <td><code>left</code></td>
+    <td><img alt="left" src="/files/3173/left.png"></td>
+    <td><math> <menclose notation="left"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+    <td>Senkrechte Linie links</td>
+   </tr>
+   <tr>
+    <td><code>right</code></td>
+    <td><img alt="right" src="/files/3174/right.png"></td>
+    <td><math> <menclose notation="right"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+    <td>Senkrechte Linie rechts</td>
+   </tr>
+   <tr>
+    <td><code>top</code></td>
+    <td><img alt="top" src="/files/3175/top.png"></td>
+    <td><math> <menclose notation="top"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+    <td>Waagerechte Linie oberhalb</td>
+   </tr>
+   <tr>
+    <td><code>bottom</code></td>
+    <td><img alt="bottom" src="/files/3176/bottom.png"></td>
+    <td><math> <menclose notation="bottom"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+    <td>Waagerechte Linie unterhalb</td>
+   </tr>
+   <tr>
+    <td><code>updiagonalstrike</code></td>
+    <td><img alt="updiagonalstrike" src="/files/3177/updiagonalstrike.png"></td>
+    <td><math> <menclose notation="updiagonalstrike"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+    <td>Von links unten nach rechts oben durchgestrichen</td>
+   </tr>
+   <tr>
+    <td><code>downdiagonalstrike</code></td>
+    <td><img alt="downdiagonalstrike" src="/files/3178/downdiagonalstrike.png"></td>
+    <td><math> <menclose notation="downdiagonalstrike"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+    <td>Von oben links nach unten rechts durchgestrichen</td>
+   </tr>
+   <tr>
+    <td><code>verticalstrike</code></td>
+    <td><img alt="verticalstrike" src="/files/3179/verticalstrike.png"></td>
+    <td><math> <menclose notation="verticalstrike"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+    <td>Von oben nach unten durchgestrichen</td>
+   </tr>
+   <tr>
+    <td><code>horizontalstrike</code></td>
+    <td><img alt="horizontalstrike" src="/files/3180/horizontalstrike.png"></td>
+    <td><math> <menclose notation="horizontalstrike"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+    <td>Waagerecht durchgestrichen</td>
+   </tr>
+   <tr>
+    <td><code>madruwb</code></td>
+    <td><img alt="madruwb" src="/files/3181/madruwb.png"></td>
+    <td><math> <menclose notation="madruwb"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+    <td><a class="external" href="http://en.wikipedia.org/wiki/Modern_Arabic_mathematical_notation#Arithmetic_and_algebra" title="http://en.wikipedia.org/wiki/Modern_Arabic_mathematical_notation#Arithmetic_and_algebra">Arabic factorial symbol</a></td>
+   </tr>
+   <tr>
+    <td><code>updiagonalarrow</code></td>
+    <td><img alt="" src="https://mdn.mozillademos.org/files/6255/updiagonalarrow.png" style="height: 38px; width: 83px;"></td>
+    <td><math> <menclose notation="updiagonalarrow"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+    <td>Pfeil diagonal von links unten nach rechts oben</td>
+   </tr>
+   <tr>
+    <td><code>phasorangle</code></td>
+    <td><img alt="Screenshot of the phasorangle notation" src="https://mdn.mozillademos.org/files/7851/phasorangle.png" style="height: 34px; width: 93px;"></td>
+    <td><math> <menclose notation="phasorangle"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+    <td>phasor angle</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: html">&lt;math&gt;
+
+  &lt;menclose notation="circle box"&gt;
+    &lt;mi&gt; x &lt;/mi&gt;
+    &lt;mo&gt; + &lt;/mo&gt;
+    &lt;mi&gt; y &lt;/mi&gt;
+  &lt;/menclose&gt;
+
+&lt;/math&gt;</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Standard</th>
+   <th scope="col">Status</th>
+   <th scope="col">Bemerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('MathML3', 'chapter3.html#presm.menclose', 'menclose') }}</td>
+   <td>{{ Spec2('MathML3') }}</td>
+   <td>Current specification</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('MathML2', 'chapter3.html#presm.menclose', 'menclose') }}</td>
+   <td>{{ Spec2('MathML2') }}</td>
+   <td>Initial specification</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>notation</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("7.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}} [1]</td>
+  </tr>
+  <tr>
+   <td><code>mathbackground</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathcolor</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>notation</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("7.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}} [1]</td>
+  </tr>
+  <tr>
+   <td><code>mathbackground</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathcolor</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>
+    <p>{{CompatNo}}</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] See <a href="https://bugs.webkit.org/show_bug.cgi?id=85733">bug 85733</a>.</p>
+
+<h2 id="Hinweise_zu_Gecko">Hinweise zu Gecko</h2>
+
+<ul>
+ <li>Diese möglichen Werte für <code>notation</code> wurden später hinzugefügt:
+
+  <ul>
+   <li><code>madruwb</code> in Gecko 2.0 {{GeckoRelease("2.0")}}.</li>
+   <li><code>updiagonalarrow</code> in Gecko 24.0 {{GeckoRelease("24.0")}}</li>
+   <li><code>phasorangle</code> in Gecko 32.0 {{GeckoRelease("32.0")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/de/web/mathml/element/merror/index.html b/files/de/web/mathml/element/merror/index.html
new file mode 100644
index 0000000000..b17d97e2b6
--- /dev/null
+++ b/files/de/web/mathml/element/merror/index.html
@@ -0,0 +1,173 @@
+---
+title: <merror>
+slug: Web/MathML/Element/merror
+tags:
+  - MathML
+  - 'MathML:Element'
+  - Referenz
+translation_of: Web/MathML/Element/merror
+---
+<div>{{MathMLRef}}</div>
+
+<p class="summary">In MathML wird das <code>&lt;merror&gt;</code>-Element genutzt, um Fehler in einem mathematischen Ausdruck hervorzuheben. In Firefox ähnelt die Darstellung der von XML-Fehlermeldungen.</p>
+
+<div class="note">
+<p><code>&lt;merror&gt;</code> betrifft nur die Darstellung des Ausdrucks und hat nichts mit echten Syntaxfehlern in MathML oder XML zu tun. </p>
+</div>
+
+<h2 id="Attribute">Attribute</h2>
+
+<dl>
+ <dt id="attr-class-id-style">class, id, style</dt>
+ <dd>Zur Einbindung von <a href="https://developer.mozilla.org/de/docs/Web/CSS">CSS-Stylesheets</a> und zur direkten Anwendung von CSS-Angaben.</dd>
+ <dt id="attr-href">href</dt>
+ <dd>Mit diesem Attribut kann ein Link gesetzt werden.</dd>
+ <dt id="attr-mathbackground">mathbackground</dt>
+ <dd>Die Hintergrundfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+ <dt id="attr-mathcolor">mathcolor</dt>
+ <dd>Die Textfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: html">&lt;math&gt;
+
+&lt;merror&gt;
+  &lt;mrow&gt;
+    &lt;mtext&gt; Division by zero: &lt;/mtext&gt;
+    &lt;mfrac&gt;
+      &lt;mn&gt; 1 &lt;/mn&gt;
+      &lt;mn&gt; 0 &lt;/mn&gt;
+    &lt;/mfrac&gt;
+  &lt;/mrow&gt;
+&lt;/merror&gt;
+
+&lt;/math&gt;
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Standard</th>
+   <th scope="col">Status</th>
+   <th scope="col">Bemerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('MathML3', 'chapter3.html#presm.merror', 'merror') }}</td>
+   <td>{{ Spec2('MathML3') }}</td>
+   <td>Current specification</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('MathML2', 'chapter3.html#presm.merror', 'merror') }}</td>
+   <td>{{ Spec2('MathML2') }}</td>
+   <td>Initial specification</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("7.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathbackground</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>mathcolor</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("7.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathbackground</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathcolor</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/de/web/mathml/element/mfenced/index.html b/files/de/web/mathml/element/mfenced/index.html
new file mode 100644
index 0000000000..9555e5822f
--- /dev/null
+++ b/files/de/web/mathml/element/mfenced/index.html
@@ -0,0 +1,194 @@
+---
+title: <mfenced>
+slug: Web/MathML/Element/mfenced
+tags:
+  - MathML
+  - 'MathML:Element'
+  - Referenz
+translation_of: Web/MathML/Element/mfenced
+---
+<div>{{MathMLRef}}</div>
+
+<p class="summary">Mit dem<code> &lt;mfenced&gt;</code>-Element kann in MathML eine Aufzählung mit öffnenenden und schließenden Zeichen (Klammern) und mit Trennzeichen (Kommas, Semikolons) versehen werden. (engl. to fence = umklammern)</p>
+
+<h2 id="Attribute">Attribute</h2>
+
+<dl>
+ <dt id="attr-class-id-style">class, id, style</dt>
+ <dd>Zur Einbindung von <a href="https://developer.mozilla.org/de/docs/Web/CSS">CSS-Stylesheets</a> und zur direkten Anwendung von CSS-Angaben auf einzelne Elemente.</dd>
+ <dt id="attr-close">close</dt>
+ <dd>Ein Zeichen oder eine Zeichenkette für das <em>schließende</em> Trennzeichen. Ohne Angabe wird eine einfache schließende Klammer <code>")"</code> gesetzt. Leerzeichen innerhalb des Arguments werden ignoriert.</dd>
+ <dt id="attr-href">href</dt>
+ <dd>Mit diesem Attribut kann ein Link gesetzt werden.</dd>
+ <dt id="attr-mathbackground">mathbackground</dt>
+ <dd>Die Hintergrundfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+ <dt id="attr-mathcolor">mathcolor</dt>
+ <dd>Die Textfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+ <dt id="attr-open">open</dt>
+ <dd>Ein Zeichen oder eine Zeichenkette für das <em>öffnende</em> Trennzeichen. Ohne Angabe wird eine einfache öffnende Klammer <code>"("</code> gesetzt. Leerzeichen innerhalb des Arguments werden ignoriert.</dd>
+ <dt id="attr-separators">separators</dt>
+ <dd>Eine Folge von null oder mehr Trennzeichen für den Ausdruck. Mögliche Leerzeichen zwischen den Trennzeichen werden für die Ausgabe ignoriert. Der Vorgabewert ist das Komma ",". Werden mehrere Zeichen angegeben, dann werden diese in der Reihenfolge auf die Argumente des Ausdrucks angewandt. Überschüssige Trennzeichen werden ignoriert. Werden zu wenige Trennzeichen angegeben, dann wird das letzte bis zum Ende der Liste wiederholt.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Das_letzte_Trennzeichen_wird_wiederholt_()">Das letzte Trennzeichen wird wiederholt (<code>,</code>)</h3>
+
+<p>Beispieldarstellung: <img alt="{a;b;c,d,e}" src="/files/3193/mfenced01.png"></p>
+
+<p>Darstellung in Deinem Browser: <math> <mfenced close="}" open="{" separators=";;,"> <mi>a</mi> <mi>b</mi> <mi>c</mi> <mi>d</mi> <mi>e</mi> </mfenced> </math></p>
+
+<pre class="brush: html">&lt;math&gt;
+  &lt;mfenced open="{" close="}" separators=";;,"&gt;
+    &lt;mi&gt;a&lt;/mi&gt;
+    &lt;mi&gt;b&lt;/mi&gt;
+    &lt;mi&gt;c&lt;/mi&gt;
+    &lt;mi&gt;d&lt;/mi&gt;
+    &lt;mi&gt;e&lt;/mi&gt;
+  &lt;/mfenced&gt;
+&lt;/math&gt;
+</pre>
+
+<h3 id="Überschüssige_Trennzeichen_fallen_weg_()">Überschüssige Trennzeichen fallen weg (<code>,</code>)</h3>
+
+<p>Beispieldarstellung: <img alt="[a|b|c|d|e]" src="/files/3195/mfenced02.png"></p>
+
+<p>Darstellung in Deinem Browser: <math> <mfenced close="]" open="[" separators="||||,"> <mi>a</mi> <mi>b</mi> <mi>c</mi> <mi>d</mi> <mi>e</mi> </mfenced> </math></p>
+
+<pre class="brush: html">&lt;math&gt;
+  &lt;mfenced open="[" close="]" separators="||||,"&gt;
+    &lt;mi&gt;a&lt;/mi&gt;
+    &lt;mi&gt;b&lt;/mi&gt;
+    &lt;mi&gt;c&lt;/mi&gt;
+    &lt;mi&gt;d&lt;/mi&gt;
+    &lt;mi&gt;e&lt;/mi&gt;
+  &lt;/mfenced&gt;
+&lt;/math&gt;
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Standard</th>
+   <th scope="col">Status</th>
+   <th scope="col">Bemerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('MathML3', 'chapter3.html#presm.mfenced', 'mfenced') }}</td>
+   <td>{{ Spec2('MathML3') }}</td>
+   <td>Current specification</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('MathML2', 'chapter3.html#presm.mfenced', 'mfenced') }}</td>
+   <td>{{ Spec2('MathML2') }}</td>
+   <td>Initial specification</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("7.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathbackground</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>mathcolor</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("7.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathbackground</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathcolor</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/de/web/mathml/element/mfrac/index.html b/files/de/web/mathml/element/mfrac/index.html
new file mode 100644
index 0000000000..5c9188528f
--- /dev/null
+++ b/files/de/web/mathml/element/mfrac/index.html
@@ -0,0 +1,207 @@
+---
+title: <mfrac>
+slug: Web/MathML/Element/mfrac
+tags:
+  - MathML
+  - 'MathML:Element'
+  - Referenz
+translation_of: Web/MathML/Element/mfrac
+---
+<div>{{MathMLRef}}</div>
+
+<p class="summary">Das Element <code>&lt;mfrac&gt;</code> wird in MathML verwendet, um Brüche darzustellen. (engl. fraction = Bruch, Teil)</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">&lt;mfrac&gt;<em>Zähler Nenner</em>&lt;/mfrac&gt;</pre>
+
+<h2 id="Attribute">Attribute</h2>
+
+<dl>
+ <dt id="attr-bevelled">bevelled</dt>
+ <dd>Dieses Attribut bestimmt die Art der Bruchdarstellung: Wenn es <code>true</code> gesetzt ist, werden Zähler und Nenner nebeneinander gesetzt und durch eine Schrägstrich verbunden. Der Vorgabewert ist <code>false</code>, wobei der Bruch mit einem waagerechten Bruchstrich gesetzt werden.</dd>
+ <dt id="attr-class-id-style">class, id, style</dt>
+ <dd>Zur Einbindung von <a href="https://developer.mozilla.org/de/docs/Web/CSS">CSS-Stylesheets</a> und zur direkten Anwendung von CSS-Angaben.</dd>
+ <dt id="attr-denomalign">denomalign</dt>
+ <dd>Die horizontale Ausrichtung des Nenners (unter dem Bruchstrich). Der Standardwert ist <code>center</code>, weiterhin sind <code>left</code> und <code>right</code> möglich.</dd>
+ <dt id="attr-href">href</dt>
+ <dd>Mit diesem Attribut kann ein Link gesetzt werden.</dd>
+ <dt id="attr-linethickness">linethickness</dt>
+ <dd>Die Dicke des waagerechten Bruchstrichs. Der Vorgabewert ist <code>medium</code>, außerdem können hier <code>thin</code>, <code>thick</code>, und andere <a href="/en-US/docs/CSS/length">Längenangaben</a> gemacht werden.</dd>
+ <dt id="attr-mathbackground">mathbackground</dt>
+ <dd>Die Hintergrundfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+ <dt id="attr-mathcolor">mathcolor</dt>
+ <dd>Die Textfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+ <dt id="attr-numalign">numalign</dt>
+ <dd>Die horizontale Ausrichtung des Zählers (oberhalb des Bruchstrichs). Der Standardwert ist <code>center</code>, weiterhin sind <code>left</code> und <code>right</code> möglich.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Beispiel: <img alt="(a/b)/(c/d)" src="/files/3194/mfrac.png" style="margin-left: 10px; vertical-align: middle;"></p>
+
+<p>Darstellung in Deinem Browser: <math> <mfrac bevelled="true"> <mfrac> <mi> a </mi> <mi> b </mi> </mfrac> <mfrac> <mi> c </mi> <mi> d </mi> </mfrac> </mfrac> </math></p>
+
+<pre class="brush: html">&lt;math&gt;
+  &lt;mfrac bevelled="true"&gt;
+     &lt;mfrac&gt;
+        &lt;mi&gt; a &lt;/mi&gt;
+        &lt;mi&gt; b &lt;/mi&gt;
+     &lt;/mfrac&gt;
+     &lt;mfrac&gt;
+        &lt;mi&gt; c &lt;/mi&gt;
+        &lt;mi&gt; d &lt;/mi&gt;
+     &lt;/mfrac&gt;
+  &lt;/mfrac&gt;
+&lt;/math&gt;
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Standard</th>
+   <th scope="col">Status</th>
+   <th scope="col">Bemerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('MathML3', 'chapter3.html#presm.mfrac', 'mfrac') }}</td>
+   <td>{{ Spec2('MathML3') }}</td>
+   <td>Current specification</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('MathML2', 'chapter3.html#presm.mfrac', 'mfrac') }}</td>
+   <td>{{ Spec2('MathML2') }}</td>
+   <td>Initial specification</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>bevelled</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("7.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathbackground</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>mathcolor</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>bevelled</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("7.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathbackground</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathcolor</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Hinweise_zu_Gecko">Hinweise zu Gecko</h2>
+
+<ul>
+ <li>Seit Gecko 7.0 {{ geckoRelease("7.0") }} hat das <code>linethickness</code>-Attribut den korrekten Vorgabewert <code>medium</code>.</li>
+</ul>
diff --git a/files/de/web/mathml/element/mi/index.html b/files/de/web/mathml/element/mi/index.html
new file mode 100644
index 0000000000..25e651d33c
--- /dev/null
+++ b/files/de/web/mathml/element/mi/index.html
@@ -0,0 +1,233 @@
+---
+title: <mi>
+slug: Web/MathML/Element/mi
+tags:
+  - MathML
+  - 'MathML:Element'
+  - Referenz
+translation_of: Web/MathML/Element/mi
+---
+<div>{{MathMLRef}}</div>
+
+<p class="summary">Das Element <code>&lt;mi&gt;</code> bestimmt, dass sein Inhalt als Bezeichner (engl. identifier) dargestellt wird, also z.B. als Funktionsname, Variable oder Konstante. Es kann auch einen beliebigen Text, etwa zur Erläuterung eines Terms, enthalten.</p>
+
+<h2 id="Attribute">Attribute</h2>
+
+<dl>
+ <dt id="attr-class-id-style">class, id, style</dt>
+ <dd>Zur Einbindung von <a href="https://developer.mozilla.org/de/docs/Web/CSS">CSS-Stylesheets</a> und zur direkten Anwendung von CSS-Angaben.</dd>
+ <dt id="attr-dir">dir</dt>
+ <dd>Allgemeine Schreibrichtung für die Formeln. Mögliche Werte sind <code>ltr</code> (left to right, von links nach rechts) und <code>rtl</code> (right to left, von rechts nach links).</dd>
+ <dt id="attr-href">href</dt>
+ <dd>Mit diesem Attribut kann ein Link gesetzt werden.</dd>
+ <dt id="attr-mathbackground">mathbackground</dt>
+ <dd>Die Hintergrundfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+ <dt id="attr-mathcolor">mathcolor</dt>
+ <dd>Die Textfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+ <dt id="attr-mathsize">mathsize</dt>
+ <dd>Die Größe (Höhe) des Inhalts. Möglich sind diese Angaben:
+ <ul>
+  <li><code>small</code>: Die Schrift wird kleiner dargestellt als die aktuelle Schrifthöhe.</li>
+  <li><code>normal</code>: Dies entspricht 100% des aktuellen Schriftgrades = 1em.</li>
+  <li><code>big</code>: Die Schrift wird größer dargestellt als die aktuelle Schrifthöhe.</li>
+  <li>Eine Längenangabe (siehe <a href="https://developer.mozilla.org/de/docs/Web/CSS/length">length</a>).</li>
+  <li>Ein einheitenloser Wert der als Faktor auf die aktuelle Schrifthöhe interpretiert wird.</li>
+ </ul>
+ </dd>
+ <dt id="attr-mathvariant">mathvariant</dt>
+ <dd>Dieses Attribut bezeichnet die logische Klasse des Operators. Mit der logischen Klasse ist in der Regel eine bestimmte Typographie verbunden, in erster Linie ist dies aber aber eine semantische Einteilung. Abschnitte der gleichen Klasse werden gleichermaßen behandelt, was einen bestimmten Stil zur Folgen haben kann aber nicht muss. Die folgenden Werte sind erlaubt:
+ <ul>
+  <li><code>normal</code> (Standardwert für <em>mehr als ein Zeichen</em>) ; <math><mi mathvariant="normal">Example</mi></math></li>
+  <li><code>bold</code> ; <math><mi mathvariant="bold">Example</mi></math></li>
+  <li><code>italic</code> (Standardwert für<em> ein einzelnes Zeichen</em>) ; <math><mi mathvariant="italic">Example</mi></math></li>
+  <li><code>bold-italic</code> ; <math><mi mathvariant="bold-italic">Example</mi></math></li>
+ </ul>
+
+ <ul>
+  <li><code>double-struck</code> ; <math><mi mathvariant="double-struck">Example</mi></math></li>
+  <li><code>bold-fraktur</code> ; <math><mi mathvariant="bold-fraktur">Example</mi></math></li>
+  <li><code>script</code> ; <math><mi mathvariant="script">Example</mi></math></li>
+  <li><code>bold-script</code> ; <math><mi mathvariant="bold-script">Example</mi></math></li>
+  <li><code>fraktur</code> ; <math><mi mathvariant="fraktur">Example</mi></math></li>
+ </ul>
+
+ <ul>
+  <li><code>sans-serif</code> ; <math><mi mathvariant="sans-serif">Example</mi></math></li>
+  <li><code>bold-sans-serif</code> ; <math><mi mathvariant="bold-sans-serif">Example</mi></math></li>
+  <li><code>sans-serif-italic</code> ; <math><mi mathvariant="sans-serif-italic">Example</mi></math></li>
+  <li><code>sans-serif-bold-italic</code> ; <math><mi mathvariant="sans-serif-bold-italic">Example</mi></math></li>
+  <li><code>monospace</code> ; <math><mi mathvariant="monospace">Example</mi></math></li>
+ </ul>
+ Die folgenden vier Werte betreffen nur arabische Schriften:
+
+ <ul>
+  <li><code>initial</code> ; <math><mi mathvariant="initial">مثال</mi></math></li>
+  <li><code>tailed</code> ; <math><mi mathvariant="tailed">مثال</mi></math></li>
+  <li><code>looped</code> ; <math><mi mathvariant="looped">مثال</mi></math></li>
+  <li><code>stretched</code> ; <math><mi mathvariant="stretched">مثال</mi></math></li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: html">&lt;math&gt;
+
+  &lt;mi&gt; y &lt;/mi&gt;
+  &lt;mi&gt; sin &lt;/mi&gt;
+  &lt;mi mathvariant="monospace"&gt; x &lt;/mi&gt;
+  &lt;mi mathvariant="bold"&gt; &amp;pi; &lt;/mi&gt;
+
+&lt;/math&gt;
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Standard</th>
+   <th scope="col">Status</th>
+   <th scope="col">Bemerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('MathML3', 'chapter3.html#presm.mi', 'mi') }}</td>
+   <td>{{ Spec2('MathML3') }}</td>
+   <td>Current specification</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('MathML2', 'chapter3.html#presm.mi', 'mi') }}</td>
+   <td>{{ Spec2('MathML2') }}</td>
+   <td>Initial specification</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>dir</code> attribute</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("12.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>href</code> attribute</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("7.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathsize</code> attribute</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>mathvariant</code> attribute</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("28.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("1.9.2") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>dir</code> attribute</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("12.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>href</code> attribute</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("7.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathsize</code> attribute</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("1.9.2") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathvariant</code> attribute</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("28.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Hinweise_zu_Gecko">Hinweise zu Gecko</h2>
+
+<ul>
+ <li>Seit Gecko 20.0 {{geckoRelease("20.0")}} sind einheitenlose Wertangaben für  <code>mathsize</code> erlaubt.</li>
+ <li>Einige <code>mathvariant</code> sind erst seit Gecko 28.0 (Firefox 28.0 / Thunderbird 28.0 / SeaMonkey 2.25) umgesetzt und erfordern passende <a href="/de/docs/Mozilla/MathML_Project/Fonts">Schriftarten für MathML</a>.</li>
+</ul>
diff --git a/files/de/web/mathml/element/mn/index.html b/files/de/web/mathml/element/mn/index.html
new file mode 100644
index 0000000000..31ced244ac
--- /dev/null
+++ b/files/de/web/mathml/element/mn/index.html
@@ -0,0 +1,232 @@
+---
+title: <mn>
+slug: Web/MathML/Element/mn
+tags:
+  - MathML
+  - 'MathML:Element'
+  - Referenz
+translation_of: Web/MathML/Element/mn
+---
+<div>{{MathMLRef}}</div>
+
+<p class="summary">Das Element <code>&lt;mn&gt;</code> stellt einen numerischen Wert dar. In der Regel ist das ein Zahlenwert, der als Trennzeichen Punkte oder Kommas enthalten kann. Zusätzliche sind beliebige Texte erlaubt, die einem Zahlenwert entsprechen, z.B. "zwölf".</p>
+
+<h2 id="Attribute">Attribute</h2>
+
+<dl>
+ <dt id="attr-class-id-style">class, id, style</dt>
+ <dd>Zur Einbindung von <a href="https://developer.mozilla.org/de/docs/Web/CSS">CSS-Stylesheets</a> und zur direkten Anwendung von CSS-Angaben.</dd>
+ <dt id="attr-dir">dir</dt>
+ <dd>Allgemeine Schreibrichtung für die Formeln. Mögliche Werte sind <code>ltr</code> (left to right, von links nach rechts) und <code>rtl</code> (right to left, von rechts nach links).</dd>
+ <dt id="attr-href">href</dt>
+ <dd>Mit diesem Attribut kann ein Link gesetzt werden.</dd>
+ <dt id="attr-mathbackground">mathbackground</dt>
+ <dd>Die Hintergrundfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+ <dt id="attr-mathcolor">mathcolor</dt>
+ <dd>Die Textfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+ <dt id="attr-mathsize">mathsize</dt>
+ <dd>Die Größe (Höhe) des Inhalts. Möglich sind diese Angaben:
+ <ul>
+  <li><code>small</code>: Die Schrift wird kleiner dargestellt als die aktuelle Schrifthöhe.</li>
+  <li><code>normal</code>: Dies entspricht 100% des aktuellen Schriftgrades = 1em.</li>
+  <li><code>big</code>: Die Schrift wird größer dargestellt als die aktuelle Schrifthöhe.</li>
+  <li>Eine Längenangabe (siehe <a href="https://developer.mozilla.org/de/docs/Web/CSS/length">length</a>).</li>
+  <li>Ein einheitenloser Wert der als Faktor auf die aktuelle Schrifthöhe interpretiert wird.</li>
+ </ul>
+ </dd>
+ <dt id="attr-mathvariant">mathvariant</dt>
+ <dd>Dieses Attribut bezeichnet die logische Klasse der Zahl. Mit der logischen Klasse ist in der Regel eine bestimmte Typographie verbunden, in erster Linie ist dies aber aber eine semantische Einteilung. Abschnitte der gleichen Klasse werden gleichermaßen behandelt, was einen bestimmten Stil zur Folgen haben kann aber nicht muss. Die folgenden Werte sind erlaubt:
+ <ul>
+  <li><code>normal</code> (Standardwert) ; <math><mn mathvariant="normal">Beispiel</mn></math></li>
+  <li><code>bold</code> ; <math><mn mathvariant="bold">Beispiel</mn></math></li>
+  <li><code>italic</code> ; <math><mn mathvariant="italic">Beispiel</mn></math></li>
+  <li><code>bold-italic</code> ; <math><mn mathvariant="bold-italic">Beispiel</mn></math></li>
+ </ul>
+
+ <ul>
+  <li><code>double-struck</code> ; <math><mn mathvariant="double-struck">Beispiel</mn></math></li>
+  <li><code>bold-fraktur</code> ; <math><mn mathvariant="bold-fraktur">Beispiel</mn></math></li>
+  <li><code>script</code> ; <math><mn mathvariant="script">Beispiel</mn></math></li>
+  <li><code>bold-script</code> ; <math><mn mathvariant="bold-script">Beispiel</mn></math></li>
+  <li><code>fraktur</code> ; <math><mn mathvariant="fraktur">Beispiel</mn></math></li>
+ </ul>
+
+ <ul>
+  <li><code>sans-serif</code> ; <math><mn mathvariant="sans-serif">Beispiel</mn></math></li>
+  <li><code>bold-sans-serif</code> ; <math><mn mathvariant="bold-sans-serif">Beispiel</mn></math></li>
+  <li><code>sans-serif-italic</code> ; <math><mn mathvariant="sans-serif-italic">Beispiel</mn></math></li>
+  <li><code>sans-serif-bold-italic</code> ; <math><mn mathvariant="sans-serif-bold-italic">Beispiel</mn></math></li>
+  <li><code>monospace</code> ; <math><mn mathvariant="monospace">Beispiel</mn></math></li>
+ </ul>
+ Die folgenden vier Werte betreffen nur arabische Schriften:
+
+ <ul>
+  <li><code>initial</code> ; <math><mn mathvariant="initial">مثال</mn></math></li>
+  <li><code>tailed</code> ; <math><mn mathvariant="tailed">مثال</mn></math></li>
+  <li><code>looped</code> ; <math><mn mathvariant="looped">مثال</mn></math></li>
+  <li><code>stretched</code> ; <math><mn mathvariant="stretched">مثال</mn></math></li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: html">&lt;math&gt;
+  &lt;mn&gt;0&lt;/mn&gt;
+  &lt;mn&gt;1.337&lt;/mn&gt;
+  &lt;mn&gt;twelve&lt;/mn&gt;
+  &lt;mn&gt;XVI&lt;/mn&gt;
+  &lt;mn&gt;2e10&lt;/mn&gt;
+&lt;/math&gt;
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Standard</th>
+   <th scope="col">Status</th>
+   <th scope="col">Bemerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('MathML3', 'chapter3.html#presm.mn', 'mn') }}</td>
+   <td>{{ Spec2('MathML3') }}</td>
+   <td>Current specification</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('MathML2', 'chapter3.html#presm.mn', 'mn') }}</td>
+   <td>{{ Spec2('MathML2') }}</td>
+   <td>Initial specification</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>dir</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("12.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("7.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathsize</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>mathvariant</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("28.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("1.9.2") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>dir</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("12.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("7.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathsize</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("1.9.2") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathvariant</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("28.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Hinweise_zu_Gecko">Hinweise zu Gecko</h2>
+
+<ul>
+ <li>Seit Gecko 20.0 {{geckoRelease("20.0")}} sind einheitenlose Wertangaben für  <code>mathsize</code> erlaubt.</li>
+ <li>Einige <code>mathvariant</code> sind erst seit Gecko 28.0 {{ geckoRelease("28.0") }} umgesetzt und erfordern passende <a href="/de/docs/Mozilla/MathML_Project/Fonts">Schriftarten für MathML</a>.</li>
+</ul>
diff --git a/files/de/web/mathml/element/mo/index.html b/files/de/web/mathml/element/mo/index.html
new file mode 100644
index 0000000000..f4a4d496aa
--- /dev/null
+++ b/files/de/web/mathml/element/mo/index.html
@@ -0,0 +1,417 @@
+---
+title: <mo>
+slug: Web/MathML/Element/mo
+tags:
+  - MathML
+  - 'MathML:Element'
+  - NeedsLiveSample
+  - Referenz
+translation_of: Web/MathML/Element/mo
+---
+<div>{{MathMLRef}}</div>
+
+<p class="summary">Das Element <code>&lt;mo&gt;</code> stellt einen Operator dar. Neben Rechenzeichen im strengen mathmatischen Sinne gehören dazu auch Klammern, Trennzeichen wie Kommas oder Semikolons und Betragszeichen.</p>
+
+<h2 id="Attribute">Attribute</h2>
+
+<dl>
+ <dt id="attr-accent">accent</dt>
+ <dd>Ein Boolescher Wert, der festlegt, ob das Rechenzeichen als Akzentzeichen behandelt werden soll, falls der Operator als <a href="/en-US/docs/MathML/Element/munder">underscript</a> oder <a href="/en-US/docs/MathML/Element/mover">overscript</a> markiert wurde. Erlaubte Werte sind <code>true</code> und <code>false</code>.</dd>
+ <dt id="attr-class-id-style">class, id, style</dt>
+ <dd>Zur Einbindung von <a href="https://developer.mozilla.org/de/docs/Web/CSS">CSS-Stylesheets</a> und zur direkten Anwendung von CSS-Angaben.</dd>
+ <dt id="attr-dir">dir</dt>
+ <dd>Allgemeine Schreibrichtung für die Formeln. Mögliche Werte sind <code>ltr</code> (left to right, von links nach rechts) und <code>rtl</code> (right to left, von rechts nach links).</dd>
+ <dt id="attr-fence"><a id="fence" name="fence">fence</a></dt>
+ <dd>Boolescher Wert, der festlegt, ob der Operator eine Begrenzung (z.B. ein Paar Klammern) ist. Dieses Attribut wird selbst nicht bildlich dargestellt. Erlaubte Werte sind <code>true</code> und <code>false</code>. Siehe auch <code><a href="#separator">separator</a></code>.</dd>
+ <dt id="attr-form">{{ unimplemented_inline() }} form</dt>
+ <dd>Legt die Funktion des Operators in z.B. einem Klammerausdruck fest. Die Angabe beeinflusst horizontale Abstände und andere Eigenschaften. Für die meisten Rechenzeichen (+, - usw.) brauchst Du dieses Attribut dank passender Vorgabewerte nicht explizit zu setzen.<br>
+ Mögliche Werte sind:
+ <ul>
+  <li><code>prefix</code>, für öffnende Begrenzer. (Vorgabewert, falls der Operator das <em>erste</em> Argument in einem {{ MathMLElement("mrow") }} Element mit mehr als einem Argument.)</li>
+  <li><code>infix</code>, für Trenner. (Vorgabewert, falls der Operator nicht innerhalb von {{ MathMLElement("mrow") }} auftritt.)</li>
+  <li><code>postfix</code>, für schließende Begrenzer. (Vorgabewert, falls der Operator das <em>letzte</em> Argument in einem {{ MathMLElement("mrow") }} Element mit mehr als einem Argument.)</li>
+ </ul>
+ </dd>
+ <dt id="attr-href">href</dt>
+ <dd>Mit diesem Attribut kann ein Link gesetzt werden.</dd>
+ <dt id="attr-largeop">largeop</dt>
+ <dd>Legt fest, ob das Rechenzeichen größer als üblich dargestellt werden soll. Erlaubte Werte sind <code>true</code> und <code>false</code>.</dd>
+ <dt id="attr-lspace"><a id="lspace" name="lspace">lspace</a></dt>
+ <dd>Bestimmt die Breite des Leerzeichens <em>vor</em> einem Rechenzeichen. (Siehe <a href="/de/docs/Web/MathML/Attribute/Werte">Maßangaben</a> für mögliche Werte, Vorgabewert ist die Konstante <code>thickmathspace</code> = 5/18em.) Siehe auch <code><a href="#rspace">rspace</a></code>.</dd>
+ <dt id="attr-mathbackground">mathbackground</dt>
+ <dd>Die Hintergrundfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+ <dt id="attr-mathcolor">mathcolor</dt>
+ <dd>Die Textfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+ <dt id="attr-mathsize">mathsize</dt>
+ <dd>Die Größe (Höhe) des Inhalts. Möglich sind diese Angaben:
+ <ul>
+  <li><code>small</code>: Die Schrift wird kleiner dargestellt als die aktuelle Schrifthöhe.</li>
+  <li><code>normal</code>: Dies entspricht 100% des aktuellen Schriftgrades = 1em.</li>
+  <li><code>big</code>: Die Schrift wird größer dargestellt als die aktuelle Schrifthöhe.</li>
+  <li>Eine Längenangabe (siehe <a href="https://developer.mozilla.org/de/docs/Web/CSS/length">length</a>).</li>
+  <li>Ein einheitenloser Wert der als Faktor auf die aktuelle Schrifthöhe interpretiert wird.</li>
+ </ul>
+ </dd>
+ <dt id="attr-mathvariant">mathvariant</dt>
+ <dd>Dieses Attribut bezeichnet die logische Klasse des Operators. Mit der logischen Klasse ist in der Regel eine bestimmte Typographie verbunden, in erster Linie ist dies aber aber eine semantische Einteilung. Abschnitte der gleichen Klasse werden gleichermaßen behandelt, was einen bestimmten Stil zur Folgen haben kann aber nicht muss. Die folgenden Werte sind erlaubt:
+ <ul>
+  <li><code>normal</code> (Standardwert) ; <math><mn mathvariant="normal">Beispiel</mn></math></li>
+  <li><code>bold</code> ; <math><mn mathvariant="bold">Beispiel</mn></math></li>
+  <li><code>italic</code> ; <math><mn mathvariant="italic">Beispiel</mn></math></li>
+  <li><code>bold-italic</code> ; <math><mn mathvariant="bold-italic">Beispiel</mn></math></li>
+ </ul>
+
+ <ul>
+  <li><code>double-struck</code> ; <math><mn mathvariant="double-struck">Beispiel</mn></math></li>
+  <li><code>bold-fraktur</code> ; <math><mn mathvariant="bold-fraktur">Beispiel</mn></math></li>
+  <li><code>script</code> ; <math><mn mathvariant="script">Beispiel</mn></math></li>
+  <li><code>bold-script</code> ; <math><mn mathvariant="bold-script">Beispiel</mn></math></li>
+  <li><code>fraktur</code> ; <math><mn mathvariant="fraktur">Beispiel</mn></math></li>
+ </ul>
+
+ <ul>
+  <li><code>sans-serif</code> ; <math><mn mathvariant="sans-serif">Beispiel</mn></math></li>
+  <li><code>bold-sans-serif</code> ; <math><mn mathvariant="bold-sans-serif">Beispiel</mn></math></li>
+  <li><code>sans-serif-italic</code> ; <math><mn mathvariant="sans-serif-italic">Beispiel</mn></math></li>
+  <li><code>sans-serif-bold-italic</code> ; <math><mn mathvariant="sans-serif-bold-italic">Beispiel</mn></math></li>
+  <li><code>monospace</code> ; <math><mn mathvariant="monospace">Beispiel</mn></math></li>
+ </ul>
+ Die folgenden vier Werte betreffen nur arabische Schriften:
+
+ <ul>
+  <li><code>initial</code> ; <math><mn mathvariant="initial">مثال</mn></math></li>
+  <li><code>tailed</code> ; <math><mn mathvariant="tailed">مثال</mn></math></li>
+  <li><code>looped</code> ; <math><mn mathvariant="looped">مثال</mn></math></li>
+  <li><code>stretched</code> ; <math><mn mathvariant="stretched">مثال</mn></math></li>
+ </ul>
+ </dd>
+</dl>
+
+<dl>
+ <dt id="attr-maxsize">maxsize</dt>
+ <dd>Falls <code><a href="#stretchy">stretchy</a></code> auf <code>true</code> gesetzt ist, dann gibt <code>maxsize</code> die <em>maximale</em> Größe des Operators an. Erlaubte Werte sind <code>infinity</code> und eine <a href="/en-US/docs/MathML/Attributes/Values#Lengths">Längenangabe</a>.</dd>
+ <dt id="attr-minsize">minsize</dt>
+ <dd>Falls <code><a href="#stretchy">stretchy</a></code> auf <code>true</code> gesetzt ist, dann gibt <code>minsize</code> die <em>minimale</em> Größe des Operators an. Erlaubte Werte sind <code>infinity</code> und eine <a href="/en-US/docs/MathML/Attributes/Values#Lengths">Längenangabe</a>.</dd>
+ <dt id="attr-movablelimits">movablelimits</dt>
+ <dd>Falls <code>displaystyle</code> auf <code>false</code> gesetzt ist, dann gibt <code>moveblelimits</code> an, ob <code>underscripts</code> und <code>overscripts</code> an den Positionen von <code>subcripts</code> bzw. <code>superscripts</code> angezeigt werden. Erlaubte Werte sind <code>true</code> und <code>false</code>.</dd>
+ <dt id="attr-rspace"><a id="rspace" name="rspace">rspace</a></dt>
+ <dd>Bestimmt die Breite des Leerzeichens <em>nach</em> einem Operator. (Siehe <a href="/de/docs/Web/MathML/Attribute/Werte">Maßangaben</a> für mögliche Werte, Vorgabewert ist die Konstante <code>thickmathspace</code> = 5/18em.) Siehe auch <code><a href="#lspace">lspace</a>.</code></dd>
+ <dt id="attr-separator"><a id="separator" name="separator">separator</a></dt>
+ <dd>Dieses Attribut bestimmt, ob der Operator ein Trennzeichen (z.B. ein Komma ist). Das Attribut selbst wird nicht dargestellt. Erlaubte Werte sind <code>true</code> und <code>false</code>. Siehe auch <code><a href="#fence">fence</a></code>.</dd>
+ <dt id="attr-stretchy"><a id="stretchy" name="stretchy">stretchy</a></dt>
+ <dd>Gibt an, ob der Operator an die Größe der benachbarten Elemente angepasst (vergrößert) wird. Erlaubte Werte sind <code>true</code> und <code>false</code>.</dd>
+ <dt id="attr-symmetric">symmetric</dt>
+ <dd>Falls <code><a href="#stretchy">stretchy</a></code> auf <code>true</code> gesetzt ist, dann gibt <code>symmetric</code> an, ob der Operator (z.B. ein Bruchstrich) vertikal an der imaginären Mittellinie ausgerichtet wird. Falls <code>stretchy</code> auf <code>true</code> gesetzt gesetzt ist, dann ist der Vorgabewert für <code>symmetric</code> ebenfalls <code>true</code>, ansonsten <code>false</code>.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: html">&lt;math&gt;
+
+  &lt;mrow&gt;
+    &lt;mn&gt;5&lt;/mn&gt;
+    &lt;mo&gt;+&lt;/mo&gt;
+    &lt;mn&gt;5&lt;/mn&gt;
+  &lt;/mrow&gt;
+
+  &lt;mrow&gt;
+    &lt;mo&gt; [ &lt;/mo&gt; &lt;!-- default form value: prefix --&gt;
+      &lt;mrow&gt;
+        &lt;mn&gt; 0 &lt;/mn&gt;
+        &lt;mo&gt; ; &lt;/mo&gt; &lt;!-- default form value: infix --&gt;
+        &lt;mn&gt; 1 &lt;/mn&gt;
+      &lt;/mrow&gt;
+    &lt;mo&gt; ) &lt;/mo&gt; &lt;!-- default form value: postfix --&gt;
+  &lt;/mrow&gt;
+
+&lt;/math&gt;
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Standard</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('MathML3', 'chapter3.html#presm.mo', 'mo') }}</td>
+   <td>{{ Spec2('MathML3') }}</td>
+   <td>Current specification</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('MathML2', 'chapter3.html#presm.mo', 'mo') }}</td>
+   <td>{{ Spec2('MathML2') }}</td>
+   <td>Initial specification</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>accent</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>dir</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("12.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>form</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("7.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>largeop</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>lspace, rspace</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathsize</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>mathvariant</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("28.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>maxsize, minsize</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>movablelimits</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>stretchy</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>symmetric</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("1.9.2") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>accent</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("1.9.2") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>dir</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("12.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>form</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("7.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>largeop</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>lspace, rspace</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("1.9.2") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathsize</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("1.9.2") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathvariant</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("28.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>maxsize, minsize</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("1.9.2") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>movablelimits</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("1.9.2") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>stretchy</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("1.9.2") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>symmetric</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("1.9.2") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Hinweise_zu_Gecko">Hinweise zu Gecko</h2>
+
+<ul>
+ <li>Mit Gecko 16.0 {{ geckoRelease("16.0") }} wurden die Standardwerte für <code>lspace</code> und <code>rspace</code> korrigiert. Entsprechend der MathML3-Spezifikation ist der Vorgabewert jetzt 5/18em, das ist der Wert der Konstante <code>thickmathspace</code>.</li>
+ <li>Seit Gecko 20.0 {{geckoRelease("20.0")}} sind einheitenlose Wertangaben für  <code>mathsize</code> erlaubt.</li>
+ <li>Einige <code>mathvariant</code> sind erst seit Gecko 28.0 (Firefox 28.0 / Thunderbird 28.0 / SeaMonkey 2.25) umgesetzt und erfordern passende <a href="/de/docs/Mozilla/MathML_Project/Fonts">Schriftarten für MathML</a>.</li>
+ <li>Es sind noch keine Attribute für <a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.lbattrs" title="http://www.w3.org/TR/MathML3/chapter3.html#presm.lbattrs">Zeilenumbrüche</a> oder <a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.lbindent.attrs" title="http://www.w3.org/TR/MathML3/chapter3.html#presm.lbindent.attrs">Einrückungen</a> implementiert. Siehe {{ bug("534962") }}.</li>
+</ul>
diff --git a/files/de/web/mathml/element/mover/index.html b/files/de/web/mathml/element/mover/index.html
new file mode 100644
index 0000000000..882dc6c302
--- /dev/null
+++ b/files/de/web/mathml/element/mover/index.html
@@ -0,0 +1,225 @@
+---
+title: <mover>
+slug: Web/MathML/Element/mover
+tags:
+  - MathML
+  - 'MathML:Element'
+  - Referenz
+translation_of: Web/MathML/Element/mover
+---
+<div>{{MathMLRef}}</div>
+
+<p class="summary">Das Element <code>&lt;mover&gt;</code> wird in MathML für Akzente und die Angabe von Grenzwerten oberhalb von Ausdrücken eingesetzt.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>&lt;mover&gt;<em>base overscript</em>&lt;/mover&gt;</code></pre>
+
+<h2 id="Attribute">Attribute</h2>
+
+<dl>
+ <dt id="attr-accentunder">accent</dt>
+ <dd>Wenn <code>true</code>, dann wird das <code>overscript</code> als <em>Akzent</em> und damit etwas näher am Ausdruck dargestellt.<br>
+ Wenn <code>false</code> (Vorgabewert), dann wird das <code>overscript</code> als <em>Grenzwert</em> über dem Ausdruck dargestellt.</dd>
+ <dt id="attr-align">align</dt>
+ <dd>Die Ausrichtung des <code>overscript</code>. Mögliche Werte sind: <code>left</code>, <code>center</code>, und <code>right</code>.</dd>
+ <dt id="attr-class-id-style">class, id, style</dt>
+ <dd>Zur Einbindung von <a href="https://developer.mozilla.org/de/docs/Web/CSS">CSS-Stylesheets</a> und zur direkten Anwendung von CSS-Angaben.</dd>
+ <dt id="attr-href">href</dt>
+ <dd>Mit diesem Attribut kann ein Link gesetzt werden.</dd>
+ <dt id="attr-mathbackground">mathbackground</dt>
+ <dd>Die Hintergrundfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+ <dt id="attr-mathcolor">mathcolor</dt>
+ <dd>Die Textfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+ <dt>
+ <h2 id="Beispiele">Beispiele</h2>
+ </dt>
+</dl>
+
+<p>Beispiel: <img alt="x+y+z" src="/files/3196/mover.png" style="margin-left: 10px; vertical-align: middle;"></p>
+
+<p>Darstellung in Deinem Browser: <math> <mover accent="true"> <mrow> <mi> x </mi> <mo> + </mo> <mi> y </mi> <mo> + </mo> <mi> z </mi> </mrow> <mo> ⏞ </mo> </mover> </math></p>
+
+<pre class="brush: html">&lt;math&gt;
+
+&lt;mover accent="true"&gt;
+  &lt;mrow&gt;
+    &lt;mi&gt; x &lt;/mi&gt;
+    &lt;mo&gt; + &lt;/mo&gt;
+    &lt;mi&gt; y &lt;/mi&gt;
+    &lt;mo&gt; + &lt;/mo&gt;
+    &lt;mi&gt; z &lt;/mi&gt;
+  &lt;/mrow&gt;
+  &lt;mo&gt; &amp;#x23DE; &lt;!--TOP CURLY BRACKET--&gt; &lt;/mo&gt;
+&lt;/mover&gt;
+
+&lt;/math&gt;
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Standard</th>
+   <th scope="col">Status</th>
+   <th scope="col">Bemerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('MathML3', 'chapter3.html#presm.mover', 'mover') }}</td>
+   <td>{{ Spec2('MathML3') }}</td>
+   <td>Current specification</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('MathML2', 'chapter3.html#presm.mover', 'mover') }}</td>
+   <td>{{ Spec2('MathML2') }}</td>
+   <td>Initial specification</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>accent</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>align</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("12.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("7.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathbackground</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>mathcolor</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>accent</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>align</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("7.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("7.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathbackground</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathcolor</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{ MathMLElement("munder") }} (Underscript)</li>
+ <li>{{ MathMLElement("munderover") }} (Underscript-overscript pair)</li>
+</ul>
diff --git a/files/de/web/mathml/element/mpadded/index.html b/files/de/web/mathml/element/mpadded/index.html
new file mode 100644
index 0000000000..ff4f10b05f
--- /dev/null
+++ b/files/de/web/mathml/element/mpadded/index.html
@@ -0,0 +1,211 @@
+---
+title: <mpadded>
+slug: Web/MathML/Element/mpadded
+tags:
+  - MathML
+  - 'MathML:Element'
+  - Referenz
+translation_of: Web/MathML/Element/mpadded
+---
+<div>{{MathMLRef}}</div>
+
+<p class="summary">Das Element <code>&lt;mpadded&gt;</code> wird in MathML genutzt, um einen Ausdruck mit zusätzlichem Innenabstand zu versehen und um Position und Größe einzustellen. (engl. to pad = auspolstern)</p>
+
+<p>Die Ausdehnung der umgebenden Box eines mathematischen Ausdrucks wird zuerst von seiner typographischen Breite und Höhe bestimmt. Der Bezugspunkt des Ausdrucks (Kind-Element) liegt anfangs auf dem Bezugspunkt des umgebenden <code>&lt;mpadded&gt;</code>-Elements.</p>
+
+<p>Mit Hilfe von <code>&lt;mpadded&gt;</code> kann die Breite und Höhe der umgebenden Box verändert (vergrößert) werden. Zusätzlich kann innerhalb dieser Box der Ausdruck horizontal und vertikal positioniert werden.</p>
+
+<h2 id="Attribute">Attribute</h2>
+
+<dl>
+ <dt id="attr-class-id-style">class, id, style</dt>
+ <dd>Zur Einbindung von <a href="https://developer.mozilla.org/de/docs/Web/CSS">CSS-Stylesheets</a> und zur direkten Anwendung von CSS-Angaben.</dd>
+ <dt id="attr-depth">depth</dt>
+ <dd>Setzt oder ändert die vertikale Ausdehnung der umgebenden Box von <code>&lt;mpadded&gt;</code> <em>unterhalb</em> der Grundlinie. Eine (nichtnegative) <a href="/de/docs/Web/MathML/Attribute/Werte">Längenangabe</a>, die weder mit - noch mit + beginnt, <em>setzt</em> den Wert. Eine <a href="/de/docs/Web/MathML/Attribute/Werte">Längenangabe</a>, die mit - oder + beginnt, <em>verringert</em> bzw. <em>erhöht</em> den Wert entsprechend. (Eine Verringerung von <code>depth</code> kann zu Überlappung mit dem Ausdruck darunter führen und sollte vermieden werden.)</dd>
+ <dt id="attr-height">height</dt>
+ <dd>Setzt oder ändert die vertikale Ausdehnung der umgebenden Box von <code>&lt;mpadded&gt;</code> <em>oberhalb</em> der Grundlinie. Eine (nichtnegative) <a href="/de/docs/Web/MathML/Attribute/Werte">Längenangabe</a>, die weder mit - noch mit + beginnt, <em>setzt</em> den Wert. Eine <a href="/de/docs/Web/MathML/Attribute/Werte">Längenangabe</a>, die mit - oder + beginnt, <em>verringert</em> bzw. <em>erhöht</em> den Wert entsprechend. (Eine Verringerung von <code>height</code> kann zu Überlappung mit dem Ausdruck darüber führen und sollte vermieden werden.)</dd>
+ <dt id="attr-href">href</dt>
+ <dd>Mit diesem Attribut kann ein Link gesetzt werden.</dd>
+ <dt id="attr-lspace">lspace</dt>
+ <dd>Setzt oder ändert den horizontalen Abstand des Bezugspunktes der Kind-Elemente zum Bezugspunkt von <code>&lt;mpadded&gt;</code> selbst. Eine (nichtnegative) <a href="/de/docs/Web/MathML/Attribute/Werte">Längenangabe</a>, die weder mit - noch mit + beginnt, <em>setzt</em> den Wert. Eine <a href="/de/docs/Web/MathML/Attribute/Werte">Längenangabe</a>, die mit - oder + beginnt, <em>verringert</em> bzw. <em>erhöht</em> den Wert entsprechend. (Eine Verringerung von <code>lspace</code> kann dazu führen, dass der Term links herausragt und sollte vermieden werden. Erhöhung sollte im Einklang mit der Erhöhung von <code>width</code> stehen.) (engl. leading = führend, vorangestellt)</dd>
+ <dt id="attr-mathbackground">mathbackground</dt>
+ <dd>Die Hintergrundfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+ <dt id="attr-mathcolor">mathcolor</dt>
+ <dd>Die Textfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+ <dt id="attr-voffset">voffset</dt>
+ <dd>Setzt oder ändert den vertikalen Abstand des Bezugspunktes der Kind-Elemente zum Bezugspunkt von <code>&lt;mpadded&gt; selbst</code>. Eine (nichtnegative) <a href="/de/docs/Web/MathML/Attribute/Werte">Längenangabe</a>, die weder mit - noch mit + beginnt, <em>setzt</em> den Wert. Eine <a href="/de/docs/Web/MathML/Attribute/Werte">Längenangabe</a>, die mit - oder + beginnt, <em>verringert</em> bzw. <em>erhöht</em> den Wert entsprechend. (Eine Verringerung von <code>voffset</code> kann dazu führen, dass der Term nach unten überlappt und sollte mit der Vergrößerung von <code>depth</code> in Einklang stehen. Eine Erhöhung von <code>voffset</code> kann zu einer Überlappung nach oben führen und sollte mit der Erhöhung von <code>height</code> im Einklang stehen.)</dd>
+ <dt id="attr-width">width</dt>
+ <dd>Setzt oder ändert den horizontalen Abstand des Bezugspunktes der <code>&lt;mpadded&gt;-</code>Box zum Bezugspunkt der folgenden Box. Eine (nichtnegative) <a href="/de/docs/Web/MathML/Attribute/Werte">Längenangabe</a>, die weder mit - noch mit + beginnt, <em>setzt</em> den Wert. Eine <a href="/de/docs/Web/MathML/Attribute/Werte">Längenangabe</a>, die mit - oder + beginnt, <em>verringert</em> bzw. <em>erhöht</em> den Wert entsprechend. (Eine Verringerung von <code>width</code> kann zu Überlappung mit dem folgenden Ausdruck führen und sollte vermieden werden.)</dd>
+</dl>
+
+<h3 id="Pseudo-Einheiten">Pseudo-Einheiten</h3>
+
+<p>Für die Attribute <code>depth</code>, <code>height</code>, <code>lspace</code>, <code>voffset</code>, and <code>width</code> können die Schlüsselwörter <code>"depth</code>",<code> "height"</code> und <code>"width"</code> genutzt werden. Sie repräsentieren jeweils den Wert, den sie benennen.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: html">&lt;math&gt;
+
+  &lt;mpadded height="+150px" width="100px" lspace="2height"&gt;
+    &lt;mi&gt; x &lt;/mi&gt;
+    &lt;mo&gt; + &lt;/mo&gt;
+    &lt;mi&gt; y &lt;/mi&gt;
+  &lt;/mpadded&gt;
+
+&lt;/math&gt;
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Standard</th>
+   <th scope="col">Status</th>
+   <th scope="col">Bemerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('MathML3', 'chapter3.html#presm.mpadded', 'mpadded') }}</td>
+   <td>{{ Spec2('MathML3') }}</td>
+   <td>Current specification</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('MathML2', 'chapter3.html#presm.mpadded', 'mpadded') }}</td>
+   <td>{{ Spec2('MathML2') }}</td>
+   <td>Initial specification</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("7.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathbackground</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathcolor</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>voffset</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("7.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("7.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathbackground</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathcolor</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>voffset</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("7.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Hinweise_zu_Gecko">Hinweise zu Gecko</h2>
+
+<p>Bis Gecko 7.0 {{ geckoRelease("7.0") }} war die MathML2 Pseudo-Einheit <code>lspace</code> zulässig. Diese ist nicht mehr Bestandteil der MathML3 Recommendation und wurde entfernt.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{ MathMLElement("mphantom") }}</li>
+ <li>{{ MathMLElement("mspace") }}</li>
+</ul>
diff --git a/files/de/web/mathml/element/mphantom/index.html b/files/de/web/mathml/element/mphantom/index.html
new file mode 100644
index 0000000000..3bfa071c4a
--- /dev/null
+++ b/files/de/web/mathml/element/mphantom/index.html
@@ -0,0 +1,142 @@
+---
+title: <mphantom>
+slug: Web/MathML/Element/mphantom
+tags:
+  - MathML
+  - 'MathML:Element'
+  - Referenz
+translation_of: Web/MathML/Element/mphantom
+---
+<div>{{MathMLRef}}</div>
+
+<p class="summary">Das <code>&lt;mphantom&gt;</code>-Element in MathML wird nicht dargestellt, nimmt aber den Platz ein, als wenn es dargestellt würde. (engl. phantom = Trugbild, Erscheinung)</p>
+
+<h2 id="Attribute">Attribute</h2>
+
+<dl>
+ <dt id="attr-class-id-style">class, id, style</dt>
+ <dd>Zur Einbindung von <a href="https://developer.mozilla.org/de/docs/Web/CSS">CSS-Stylesheets</a> und zur direkten Anwendung von CSS-Angaben.</dd>
+ <dt id="attr-mathbackground">mathbackground</dt>
+ <dd>Die Hintergrundfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Beispiel: <img alt="x+  z" src="/files/3199/mphantom.png" style="margin-left: 10px; vertical-align: middle;"></p>
+
+<p>Darstellung in Deinem Browser: <math> <mrow> <mi> x </mi> <mo> + </mo> <mphantom> <mi> y </mi> <mo> + </mo> </mphantom> <mi> z </mi> </mrow> </math></p>
+
+<pre class="brush: html">&lt;math&gt;
+
+&lt;mrow&gt;
+  &lt;mi&gt; x &lt;/mi&gt;
+  &lt;mo&gt; + &lt;/mo&gt;
+  &lt;mphantom&gt;
+    &lt;mi&gt; y &lt;/mi&gt;
+    &lt;mo&gt; + &lt;/mo&gt;
+  &lt;/mphantom&gt;
+  &lt;mi&gt; z &lt;/mi&gt;
+&lt;/mrow&gt;
+
+&lt;/math&gt;
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Standard</th>
+   <th scope="col">Status</th>
+   <th scope="col">Bemerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('MathML3', 'chapter3.html#presm.mphantom', 'mphantom') }}</td>
+   <td>{{ Spec2('MathML3') }}</td>
+   <td>Current specification</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('MathML2', 'chapter3.html#presm.mphantom', 'mphantom') }}</td>
+   <td>{{ Spec2('MathML2') }}</td>
+   <td>Initial specification</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>mathbackground</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathbackground</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{ MathMLElement("mspace") }}</li>
+ <li>{{ MathMLElement("mpadded") }}</li>
+</ul>
diff --git a/files/de/web/mathml/element/mroot/index.html b/files/de/web/mathml/element/mroot/index.html
new file mode 100644
index 0000000000..2f0385b5ea
--- /dev/null
+++ b/files/de/web/mathml/element/mroot/index.html
@@ -0,0 +1,175 @@
+---
+title: <mroot>
+slug: Web/MathML/Element/mroot
+tags:
+  - MathML
+  - 'MathML:Element'
+  - 'MathML:General Lay'
+  - Referenz
+translation_of: Web/MathML/Element/mroot
+---
+<div>{{MathMLRef}}</div>
+
+<p class="summary">Das <code>&lt;mroot&gt;</code>-Element wird in MathML benutzt, um Wurzeln mit einem beliebigen Exponenten darzustellen. Zwei Argumente werden akzeptiert, was zu der Syntaxis führt: <code>&lt;mroot&gt; <em>Basis Exponent</em> &lt;/mroot&gt;</code>.</p>
+
+<h2 id="Attribute">Attribute</h2>
+
+<dl>
+ <dt id="attr-class-id-style">class, id, style</dt>
+ <dd>Zur Einbindung von <a href="https://developer.mozilla.org/de/docs/Web/CSS">CSS-Stylesheets</a> und zur direkten Anwendung von CSS-Angaben.</dd>
+ <dt id="attr-href">href</dt>
+ <dd>Mit diesem Attribut kann ein Link gesetzt werden.</dd>
+ <dt id="attr-mathbackground">mathbackground</dt>
+ <dd>Die Hintergrundfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+ <dt id="attr-mathcolor">mathcolor</dt>
+ <dd>Die Farbe für Text und Wurzelzeichen. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Beispiel: <img alt="x" src="/files/3200/mroot.png" style="margin-left: 10px; vertical-align: middle;"></p>
+
+<p>Darstellung in Deinem Browser: <math> <mroot> <mi>x</mi> <mn>3</mn> </mroot> </math></p>
+
+<pre class="brush: html">&lt;math&gt;
+
+ &lt;mroot&gt;
+    &lt;mi&gt;x&lt;/mi&gt;
+    &lt;mn&gt;3&lt;/mn&gt;
+ &lt;/mroot&gt;
+
+&lt;/math&gt;
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Standard</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('MathML3', 'chapter3.html#presm.mroot', 'mroot') }}</td>
+   <td>{{ Spec2('MathML3') }}</td>
+   <td>jetzige Specification</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('MathML2', 'chapter3.html#presm.mroot', 'mroot') }}</td>
+   <td>{{ Spec2('MathML2') }}</td>
+   <td>anfängliche Specification</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("7.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathbackground</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>mathcolor</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("7.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathbackground</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathcolor</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{ MathMLElement("msqrt") }} (Quadratwurzel, ohne Exponent)</li>
+</ul>
diff --git a/files/de/web/mathml/element/mrow/index.html b/files/de/web/mathml/element/mrow/index.html
new file mode 100644
index 0000000000..4a0cbc0b5e
--- /dev/null
+++ b/files/de/web/mathml/element/mrow/index.html
@@ -0,0 +1,209 @@
+---
+title: <mrow>
+slug: Web/MathML/Element/mrow
+tags:
+  - MathML
+  - Referenz
+translation_of: Web/MathML/Element/mrow
+---
+<div>{{MathMLRef}}</div>
+
+<p class="summary">Das Element <code>&lt;mrow&gt;</code> wird genutzt, um Ausdrücke (mathematische Terme) zu gruppieren. Ausdrücke enthalten in der Regel einen oder mehrere Rechenzeichen oder Operatoren (engl. operator, siehe <code><a href="/de/docs/Web/MathML/Element/mo">&lt;mo&gt;</a></code>) und die dazugehörigen Zahlenwerte (engl. number, siehe <code><a href="/de/docs/Web/MathML/Element/mi">&lt;mn&gt;</a></code>) und Variablen (engl. identifier, siehe <code><a href="/de/docs/Web/MathML/Element/mi">&lt;mi&gt;</a></code>). Der Inhalt von <code>&lt;mrow&gt;</code> wird in einer Zeile dargestellt.</p>
+
+<p>Beim Schreiben von MathML-Ausdrücken solltest Du die Bestandteile des Terms so in <code>&lt;mrow&gt;</code>-Elementen zusammenfassen, wie es der mathematischen Aussage entspricht. Passende Gruppierung erleichtert die Darstellung auf mehrere Weisen:</p>
+
+<ul>
+ <li>Möglicherweise kann die Darstellung durch passende Zwischenräume verbessert werden.</li>
+ <li>Es erleichtert mögliche Zeilenumbrüche und Einrückungen.</li>
+ <li>Es vereinfacht die Interpretation des Ausdrucks durch Sprachausgabegeräte und Rechensysteme.</li>
+ <li>Es erleichtert die Formatierung des Quelltextes durch erkennbare Zusammenfassungen und passende Einrückungen</li>
+</ul>
+
+<h2 id="Attribute">Attribute</h2>
+
+<dl>
+ <dt id="attr-class-id-style">class, id, style</dt>
+ <dd>Zur Einbindung von <a href="https://developer.mozilla.org/de/docs/Web/CSS">CSS-Stylesheets</a> und zur direkten Anwendung von CSS-Angaben.</dd>
+ <dt id="attr-dir">dir</dt>
+ <dd>Allgemeine Schreibrichtung für die Formeln. Mögliche Werte sind <code>ltr</code> (left to right, von links nach rechts) und <code>rtl</code> (right to left, von rechts nach links).</dd>
+ <dt id="attr-href">href</dt>
+ <dd>Mit diesem Attribut kann ein Link gesetzt werden.</dd>
+ <dt id="attr-mathbackground">mathbackground</dt>
+ <dd>Die Hintergrundfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+ <dt id="attr-mathcolor">mathcolor</dt>
+ <dd>Die Textfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: html">&lt;math&gt;
+
+  &lt;mrow&gt;
+    &lt;mn&gt;1&lt;/mn&gt;
+    &lt;mo&gt;+&lt;/mo&gt;
+    &lt;mn&gt;1&lt;/mn&gt;
+  &lt;/mrow&gt;
+
+  &lt;mrow&gt;
+    &lt;mo&gt;(&lt;/mo&gt;
+    &lt;mrow&gt;
+      &lt;mi&gt;x&lt;/mi&gt;
+      &lt;mo&gt;,&lt;/mo&gt;
+      &lt;mi&gt;y&lt;/mi&gt;
+    &lt;/mrow&gt;
+    &lt;mo&gt;)&lt;/mo&gt;
+  &lt;/mrow&gt;
+
+&lt;/math&gt;
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Standard</th>
+   <th scope="col">Status</th>
+   <th scope="col">Bemerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('MathML3', 'chapter3.html#presm.mrow', 'mrow') }}</td>
+   <td>{{ Spec2('MathML3') }}</td>
+   <td>Current specification</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('MathML2', 'chapter3.html#presm.mrow', 'mrow') }}</td>
+   <td>{{ Spec2('MathML2') }}</td>
+   <td>Initial specification</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>dir</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("12.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("7.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathbackground</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>mathcolor</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>dir</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("12.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("7.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathbackground</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathcolor</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>Gruppieren von HTML-Elementen: <code><a href="/de/docs/Web/HTML/Element/div">&lt;div&gt;</a></code> und <code><a href="/de/docs/Web/HTML/Element/span">&lt;span&gt;</a></code></li>
+ <li>Gruppieren von Elementen in SVG: <code><a href="/de/docs/Web/SVG/Element/g">&lt;g&gt;</a></code></li>
+</ul>
diff --git a/files/de/web/mathml/element/ms/index.html b/files/de/web/mathml/element/ms/index.html
new file mode 100644
index 0000000000..582e15264e
--- /dev/null
+++ b/files/de/web/mathml/element/ms/index.html
@@ -0,0 +1,243 @@
+---
+title: <ms>
+slug: Web/MathML/Element/ms
+tags:
+  - MathML
+  - 'MathML:Element'
+  - Referenz
+translation_of: Web/MathML/Element/ms
+---
+<div>{{MathMLRef}}</div>
+
+<p class="summary">Das Element <code>&lt;ms&gt;</code> erzeugt in MathML die Darstellung eines <em>string literal</em>, also einer (buchstabengetreuen) Zeichenkette, wie sie z.B. in Programmiersprachen Anwendung findet.<br>
+ Standardmäßig werden solche Zeichenketten in doppelten Anführungszeichen (<code>&amp;quot;</code>) eingeschlossen.<br>
+ Mit den Attributen <code>lquote</code> und <code>rquote</code> können eigene Zeichen für die öffnenden und schließenden Zeichen festgelegt werden.</p>
+
+<div class="note">
+<p>Die Zeichenkette sollte ohne Anführungszeichen geschrieben werden, es sei denn, Anführungszeichen sind Bestandteil der Zeichenkette. Das <code>&lt;ms&gt;-E</code>lement kann eine beliebige Folge von Zeichen, {{ MathMLElement("mglyph") }}- und {{ MathMLElement("malignmark") }}-Elementen enthalten.</p>
+</div>
+
+<h2 id="Attribute">Attribute</h2>
+
+<dl>
+ <dt id="attr-class-id-style">class, id, style</dt>
+ <dd>Zur Einbindung von <a href="https://developer.mozilla.org/de/docs/Web/CSS">CSS-Stylesheets</a> und zur direkten Anwendung von CSS-Angaben.</dd>
+ <dt id="attr-dir">dir</dt>
+ <dd>Allgemeine Schreibrichtung für die Formeln. Mögliche Werte sind <code>ltr</code> (left to right, von links nach rechts) und <code>rtl</code> (right to left, von rechts nach links).</dd>
+ <dt id="attr-lquote">lquote</dt>
+ <dd>Das <em>öffnende</em> Anführungszeichen (abhängig von <code><a href="#attr-dir">dir</a></code>). Der Vorgabewert ist "<code>&amp;quot;"</code>.</dd>
+ <dt id="attr-href">href</dt>
+ <dd>Mit diesem Attribut kann ein Link gesetzt werden.</dd>
+ <dt id="attr-mathbackground">mathbackground</dt>
+ <dd>Die Hintergrundfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+ <dt id="attr-mathcolor">mathcolor</dt>
+ <dd>Die Textfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+ <dt id="attr-mathsize">mathsize</dt>
+ <dd>Die Größe (Höhe) des Inhalts. Möglich sind diese Angaben:
+ <ul>
+  <li><code>small</code>: Die Schrift wird kleiner dargestellt als die aktuelle Schrifthöhe.</li>
+  <li><code>normal</code>: Dies entspricht 100% des aktuellen Schriftgrades = 1em.</li>
+  <li><code>big</code>: Die Schrift wird größer dargestellt als die aktuelle Schrifthöhe.</li>
+  <li>Eine Längenangabe (siehe <a href="https://developer.mozilla.org/de/docs/Web/CSS/length">length</a>).</li>
+  <li>Ein einheitenloser Wert der als Faktor auf die aktuelle Schrifthöhe interpretiert wird.</li>
+ </ul>
+ </dd>
+ <dt id="attr-mathvariant"> </dt>
+ <dt id="attr-mathvariant">mathvariant</dt>
+ <dd>Dieses Attribut bezeichnet die logische Klasse des Operators. Mit der logischen Klasse ist in der Regel eine bestimmte Typographie verbunden, in erster Linie ist dies aber aber eine semantische Einteilung. Abschnitte der gleichen Klasse werden gleichermaßen behandelt, was einen bestimmten Stil zur Folgen haben kann aber nicht muss. Die folgenden Werte sind erlaubt:
+ <ul>
+  <li><code>normal</code> (Standardwert für <em>mehr als ein Zeichen</em>) ; <math><mi mathvariant="normal">Example</mi></math></li>
+  <li><code>bold</code> ; <math><mi mathvariant="bold">Example</mi></math></li>
+  <li><code>italic</code> (Standardwert für<em> ein einzelnes Zeichen</em>) ; <math><mi mathvariant="italic">Example</mi></math></li>
+  <li><code>bold-italic</code> ; <math><mi mathvariant="bold-italic">Example</mi></math></li>
+ </ul>
+
+ <ul>
+  <li><code>double-struck</code> ; <math><mi mathvariant="double-struck">Example</mi></math></li>
+  <li><code>bold-fraktur</code> ; <math><mi mathvariant="bold-fraktur">Example</mi></math></li>
+  <li><code>script</code> ; <math><mi mathvariant="script">Example</mi></math></li>
+  <li><code>bold-script</code> ; <math><mi mathvariant="bold-script">Example</mi></math></li>
+  <li><code>fraktur</code> ; <math><mi mathvariant="fraktur">Example</mi></math></li>
+ </ul>
+
+ <ul>
+  <li><code>sans-serif</code> ; <math><mi mathvariant="sans-serif">Example</mi></math></li>
+  <li><code>bold-sans-serif</code> ; <math><mi mathvariant="bold-sans-serif">Example</mi></math></li>
+  <li><code>sans-serif-italic</code> ; <math><mi mathvariant="sans-serif-italic">Example</mi></math></li>
+  <li><code>sans-serif-bold-italic</code> ; <math><mi mathvariant="sans-serif-bold-italic">Example</mi></math></li>
+  <li><code>monospace</code> ; <math><mi mathvariant="monospace">Example</mi></math></li>
+ </ul>
+ Die folgenden vier Werte betreffen nur arabische Schriften:
+
+ <ul>
+  <li><code>initial</code> ; <math><mi mathvariant="initial">مثال</mi></math></li>
+  <li><code>tailed</code> ; <math><mi mathvariant="tailed">مثال</mi></math></li>
+  <li><code>looped</code> ; <math><mi mathvariant="looped">مثال</mi></math></li>
+  <li><code>stretched</code> ; <math><mi mathvariant="stretched">مثال</mi></math></li>
+ </ul>
+ </dd>
+ <dt id="attr-rquote">rquote</dt>
+ <dd>Das <em>schließende</em> Anführungszeichen (abhängig von <code><a href="#attr-dir">dir</a></code>). Der Vorgabewert ist "<code>&amp;quot;".</code></dd>
+</dl>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: html">&lt;math&gt;
+
+  &lt;ms lquote="„" rquote="“"&gt; abc &lt;/ms&gt;
+
+&lt;/math&gt;
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Standard</th>
+   <th scope="col">Status</th>
+   <th scope="col">Bemerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('MathML3', 'chapter3.html#presm.ms', 'ms') }}</td>
+   <td>{{ Spec2('MathML3') }}</td>
+   <td>Current specification</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('MathML2', 'chapter3.html#presm.ms', 'ms') }}</td>
+   <td>{{ Spec2('MathML2') }}</td>
+   <td>Initial specification</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>dir</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("12.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("7.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathsize</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathvariant</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("28.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("1.9.2") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>dir</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("12.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("7.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathsize</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("1.9.2") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathvariant</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("28.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Hinweise_zu_Gecko">Hinweise zu Gecko</h2>
+
+<ul>
+ <li>Seit Gecko 20.0 {{geckoRelease("20.0")}} sind einheitenlose Wertangaben für  <code>mathsize</code> erlaubt.</li>
+ <li>Einige <code>mathvariant</code> sind erst seit Gecko 28.0 (Firefox 28.0 / Thunderbird 28.0 / SeaMonkey 2.25) umgesetzt und erfordern passende <a href="/de/docs/Mozilla/MathML_Project/Fonts">Schriftarten für MathML</a>.</li>
+</ul>
+
+<p> </p>
diff --git a/files/de/web/mathml/element/mspace/index.html b/files/de/web/mathml/element/mspace/index.html
new file mode 100644
index 0000000000..a3a2b0f195
--- /dev/null
+++ b/files/de/web/mathml/element/mspace/index.html
@@ -0,0 +1,167 @@
+---
+title: <mspace>
+slug: Web/MathML/Element/mspace
+tags:
+  - MathML
+  - 'MathML:Element'
+  - Referenz
+translation_of: Web/MathML/Element/mspace
+---
+<div>{{MathMLRef}}</div>
+
+<p class="summary">Das MathML-Element <code>&lt;mspace&gt;</code> erzeugt einen Weißraum, dessen Größe durch Attribute bestimmt wird.</p>
+
+<h2 id="Attribute">Attribute</h2>
+
+<dl>
+ <dt id="attr-class-id-style">class, id, style</dt>
+ <dd>Zur Einbindung von <a href="https://developer.mozilla.org/de/docs/Web/CSS">CSS-Stylesheets</a> und zur direkten Anwendung von CSS-Angaben.</dd>
+ <dt id="attr-depth">depth</dt>
+ <dd>Die Ausdehnung des Leerraums <em>unterhalb</em> der Grundlinie. Mögliche Angaben: siehe <a href="/de/docs/Web/MathML/Attribute/Werte">Längenangaben</a>.</dd>
+ <dt id="attr-height">height</dt>
+ <dd>Die Ausdehnung des Leerraums <em>oberhalb</em> der Grundlinie. Mögliche Angaben: siehe <a href="/de/docs/Web/MathML/Attribute/Werte">Längenangaben</a>.</dd>
+ <dt id="attr-linebreak">linebreak</dt>
+ <dd>Gibt an, wie wünschenswert ein Zeilenumbruch an dieser Stelle ist. Mögliche Werte sind: <code>auto</code> (Vorgabewert), <code>newline</code>, <code>nobreak</code>, <code>goodbreak</code>, <code>badbreak</code>.<br>
+ Seit MathML 3 soll der Zeilenumbruch bevorzugt mit dem {{ MathMLElement("mo") }}-Element gesteuert werden.</dd>
+ <dt id="attr-mathbackground">mathbackground</dt>
+ <dd>Die Hintergrundfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+ <dt id="attr-width">width</dt>
+ <dd>Die Breite des Leerraums. Mögliche Angaben: siehe <a href="/de/docs/Web/MathML/Attribute/Werte">Längenangaben</a>.</dd>
+</dl>
+
+<p>Beachte, dass die Attribute <code>mathcolor</code>, <code>mathvariant</code> und <code>dir</code> keine Auswirkung auf <code>&lt;mspace&gt;</code> haben.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: html">&lt;math&gt;
+
+  &lt;mspace depth="40px" height="20px" /&gt;
+
+  &lt;mspace width="100px" /&gt;
+
+&lt;/math&gt;
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Standard</th>
+   <th scope="col">Status</th>
+   <th scope="col">Bemerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('MathML3', 'chapter3.html#presm.mspace', 'mspace') }}</td>
+   <td>{{ Spec2('MathML3') }}</td>
+   <td>Current specification</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('MathML2', 'chapter3.html#presm.mspace', 'mspace') }}</td>
+   <td>{{ Spec2('MathML2') }}</td>
+   <td>Initial specification</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>linebreak</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>depth</code>, <code>height</code>, <code>width</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("1.9.2") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>linebreak</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>depth</code>, <code>height</code>, <code>width</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("1.9.2") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Hinweise_zu_Gecko">Hinweise zu Gecko</h2>
+
+<ul>
+ <li>Attribute zur Kontrolle des <a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.lbindent.attrs" title="http://www.w3.org/TR/MathML3/chapter3.html#presm.lbindent.attrs">Einzugs</a> Indentation attributes werden noch nicht unterstützt (für Gecko siehe {{ bug("534962") }}).</li>
+ <li><code>width</code> kann seit Gecko 23.0 {{geckoRelease("23.0")}} negative Werte haben.</li>
+</ul>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{ MathMLElement("mpadded") }}</li>
+ <li>{{ MathMLElement("mphantom") }}</li>
+</ul>
diff --git a/files/de/web/mathml/element/msqrt/index.html b/files/de/web/mathml/element/msqrt/index.html
new file mode 100644
index 0000000000..592f33cd4a
--- /dev/null
+++ b/files/de/web/mathml/element/msqrt/index.html
@@ -0,0 +1,173 @@
+---
+title: <msqrt>
+slug: Web/MathML/Element/msqrt
+tags:
+  - MathML
+  - 'MathML:Element'
+  - Referenz
+translation_of: Web/MathML/Element/msqrt
+---
+<div>{{MathMLRef}}</div>
+
+<p class="summary">Das Element <code>&lt;msqrt&gt;</code> wird in MathML eingesetzt, um eine (Quadrat-)Wurzel darzustellen, wobei der Exponent 2 nicht ausgeschrieben wird. Die Wurzel benötigt nur ein Argument, was zu folgender Schreibweise führt: <code>&lt;msqrt&gt; Basis &lt;/msqrt&gt;</code>.</p>
+
+<h2 id="Attribute">Attribute</h2>
+
+<dl>
+ <dt id="attr-class-id-style">class, id, style</dt>
+ <dd>Zur Einbindung von <a href="https://developer.mozilla.org/de/docs/Web/CSS">CSS-Stylesheets</a> und zur direkten Anwendung von CSS-Angaben.</dd>
+ <dt id="attr-href">href</dt>
+ <dd>Mit diesem Attribut kann ein Link gesetzt werden.</dd>
+ <dt id="attr-mathbackground">mathbackground</dt>
+ <dd>Die Hintergrundfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+ <dt id="attr-mathcolor">mathcolor</dt>
+ <dd>Die Farbe für Basis und Wurzelzeichen. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Beispiel: <img alt="root-x" src="/files/3201/msqrt.png" style="margin-left: 10px; vertical-align: middle;"></p>
+
+<p>Darstellung in Deinem Browser: <math> <msqrt> <mi>x</mi> </msqrt> </math></p>
+
+<pre class="brush: html">&lt;math&gt;
+
+  &lt;msqrt&gt;
+    &lt;mi&gt;x&lt;/mi&gt;
+  &lt;/msqrt&gt;
+
+&lt;/math&gt;
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Standard</th>
+   <th scope="col">Status</th>
+   <th scope="col">Bemerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('MathML3', 'chapter3.html#presm.msqrt', 'msqrt') }}</td>
+   <td>{{ Spec2('MathML3') }}</td>
+   <td>Current specification</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('MathML2', 'chapter3.html#presm.msqrt', 'msqrt') }}</td>
+   <td>{{ Spec2('MathML2') }}</td>
+   <td>Initial specification</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("7.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathbackground</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>mathcolor</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("7.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathbackground</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathcolor</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{ MathMLElement("mroot") }} (Wurzel, mit beliebigem Exponent)</li>
+</ul>
diff --git a/files/de/web/mathml/element/mstyle/index.html b/files/de/web/mathml/element/mstyle/index.html
new file mode 100644
index 0000000000..19e41a29f3
--- /dev/null
+++ b/files/de/web/mathml/element/mstyle/index.html
@@ -0,0 +1,124 @@
+---
+title: <mstyle>
+slug: Web/MathML/Element/mstyle
+tags:
+  - MathML
+  - 'MathML:Element'
+  - Referenz
+translation_of: Web/MathML/Element/mstyle
+---
+<div>{{MathMLRef}}</div>
+
+<p class="summary">Das Element <code>&lt;mstyle&gt;</code> wird in MathML eingesetzt, um die <em>Darstellung</em> seiner Kind-Elemente zu verändern. Es akzeptiert alle Attribute der MathML-Darstellungselemente (mit wenigen Ausnahmen) und die zusätzlichen Attribute, die unten aufgelistet sind:</p>
+
+<h2 id="Attribute">Attribute</h2>
+
+<dl>
+ <dt id="attr-dir"><code>dir</code></dt>
+ <dd>Allgemeine Schreibrichtung für die Formeln. Mögliche Werte sind <code>ltr</code> (left to right, von links nach rechts) und <code>rtl</code> (right to left, von rechts nach links).</dd>
+ <dt id="attr-decimalpoint"><code>decimalpoint</code></dt>
+ <dd>Benennt das Zeichen für die Ausrichtung innerhalb von {{ MathMLElement("mstack") }}- und {{ MathMLElement("mtable") }}-Spalten, für den Fall, dass diese am <code>decimalpoint</code> ausgerichtet werden.</dd>
+ <dt id="attr-displaystyle"><code>displaystyle</code></dt>
+ <dd>Ein Boolescher Wert für den Darstellungsstil einer Gleichung. Bei <code>true</code> wird zusätzlicher vertikaler Zwischenraum eingefügt; bei <code>false</code> wird die Formel dagegen kompakter dargestellt. Der hauptsächliche Effekt besteht darin, dass größere Versionen der Operatoren angezeigt werden, falls <code>displaystyle</code> auf <code>true</code> gesetzt ist. Siehe auch <code>largeop</code> and <code>movablelimits</code> bei {{ MathMLElement("mo") }}.</dd>
+ <dt id="attr-infixlinebreakstyle"><code>infixlinebreakstyle</code></dt>
+ <dd>Gibt an, welcher <code>linebreakstyle</code> auf infix-Operatoren angewandt wird. Erlaubt sind die Werte <code>before</code>, <code>after</code> und <code>duplicate</code>.</dd>
+ <dt id="attr-scriptlevel"><code>scriptlevel</code></dt>
+ <dd>Steuert im wesentlichen die Schriftgröße. Je größer der <code>scriptlevel</code>, umso kleiner die Schriftgröße. Dieses Attribute akzeptiert nichtnegative, ganze Zahlen und die Zeichen "+" und "-", was den aktuellen Wert jeweils um eine Stufe erhöht oder verringert. <code>scriptlevel</code> kann die Schriftgröße nicht unter die mit  <code>{{anch("scriptminsize")}}</code> angegebene minimale Schriftgröße setzen. Das verhindert unleserlich kleine Schriftgrößen. Siehe auch <code>{{anch("scriptsizemultiplier")}}</code>.</dd>
+ <dt id="attr-scriptminsize"><code>scriptminsize</code></dt>
+ <dd>Gibt die minimale Schriftgröße an, die nach Änderungen mit <code>{{anch("scriptlevel")}}</code> dargestellt wird. Der Vorgabewert ist 8pt.</dd>
+ <dt id="attr-scriptsizemultiplier"><code>scriptsizemultiplier</code></dt>
+ <dd>Gibt den Faktor an, um den die Schriftgröße mit <code>{{anch("scriptlevel")}}</code> vergrößert oder verkleinert wird. Der Standardwert ist 0.71, d.h. mit zwei Stufen wird die Schriftgröße verdoppelt bzw. halbiert.</dd>
+</dl>
+
+<p>Das <code>&lt;mstyle&gt;</code>-Element akzeptiert <a href="/en-US/docs/MathML/Attributes">alle Attribute</a> aller Darstellungselemente <strong>mit diesen Ausnahmen</strong>:</p>
+
+<ul>
+ <li><code>height</code>, <code>depth</code> und <code>width</code> lassen sich nicht auf {{ MathMLELement("mglyph") }}, {{ MathMLELement("mpadded") }} und {{ MathMLELement("mtable") }} anwenden.</li>
+ <li><code>rowalign</code>, <code>columnalign</code>, und <code>groupalign</code> lassen sich nicht auf {{ MathMLELement("mtr") }}, {{ MathMLELement("mlabeledtr") }}, {{ MathMLELement("mtd") }} und {{ MathMLELement("maligngroup") }} anwenden.</li>
+ <li><code>lspace</code> und <code>voffset</code> lassen sich nicht auf {{ MathMLELement("mpadded") }} anwenden.</li>
+ <li><code>fontfamily</code> wirkt nicht auf {{ MathMLELement("mglyph") }}.</li>
+ <li><code>align</code> lässt sich nicht auf {{ MathMLELement("mtable") }} und {{ MathMLELement("mstack") }} anwenden.</li>
+ <li><code>index</code> kann nicht in <code>&lt;mstyle&gt;</code> gesetzt werden.</li>
+ <li><code>src</code> und <code>alt</code> auf das {{ MathMLElement("mglyph" ) }}-Element können nicht in <code>&lt;mstyle&gt;</code> gesetzt werden.</li>
+ <li><code>actiontype</code> auf das {{ MathMLElement("maction") }} kann nicht in <code>&lt;mstyle&gt;</code> gesetzt werden.</li>
+</ul>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p><code>displaystyle</code> und <code>mathcolor</code> werden eingesetzt, um die Darstellung der gesamten Summe zu beeinflussen.</p>
+
+<pre class="brush: html">&lt;math&gt;
+
+  &lt;mstyle displaystyle="true" mathcolor="teal"&gt;
+    &lt;mrow&gt;
+
+      &lt;munderover&gt;
+        &lt;mo stretchy="true" form="prefix"&gt;&amp;sum;&lt;/mo&gt;
+        &lt;mrow&gt;
+          &lt;mi&gt;i&lt;/mi&gt;
+          &lt;mo form="infix"&gt;=&lt;/mo&gt;
+          &lt;mn&gt;1&lt;/mn&gt;
+        &lt;/mrow&gt;
+        &lt;mi&gt;n&lt;/mi&gt;
+      &lt;/munderover&gt;
+
+      &lt;mstyle displaystyle="true"&gt;
+        &lt;mfrac&gt;
+          &lt;mn&gt;1&lt;/mn&gt;
+          &lt;mi&gt;n&lt;/mi&gt;
+        &lt;/mfrac&gt;
+      &lt;/mstyle&gt;
+
+    &lt;/mrow&gt;
+  &lt;/mstyle&gt;
+
+&lt;/math&gt;
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Standard</th>
+   <th scope="col">Status</th>
+   <th scope="col">Bemerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('MathML3', 'chapter3.html#presm.mstyle', 'mstyle') }}</td>
+   <td>{{ Spec2('MathML3') }}</td>
+   <td>Current specification</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('MathML2', 'chapter3.html#presm.mstyle', 'mstyle') }}</td>
+   <td>{{ Spec2('MathML2') }}</td>
+   <td>Initial specification</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("mathml.elements.mstyle")}}</p>
+
+<h2 id="Hinweise_zu_Gecko">Hinweise zu Gecko</h2>
+
+<ul>
+ <li>Vor Gecko 6.0 {{ geckoRelease("6.0") }} war <code>&lt;mstyle&gt;</code> nur unvollständig umgesetzt (siehe <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=569125">Bugzilla</a>). Im einzelnen waren die folgenden Attribute wirkungslos, wenn sie auf <code>&lt;mstyle&gt;</code> angewandt wurden:
+
+  <ul>
+   <li><code>bevelled</code>, angewandt auf {{ MathMLElement("mfrac") }}</li>
+   <li><code>notation</code>, angewandt auf {{ MathMLElement("menclose") }}</li>
+   <li><code>open</code>, <code>close</code> und <code>separators</code>, angewandt auf {{ MathMLElement("mfenced") }}</li>
+   <li><code>accent</code> und <code>accentunder</code>, angewandt auf {{ MathMLElement("mover") }}, {{ MathMLElement("munder") }} und {{ MathMLElement("munderover") }}</li>
+   <li><code>selection</code>, angewandt auf {{ MathMLElement("maction") }}</li>
+   <li><code>mathvariant</code>, angewant auf {{ MathMLElement("mi") }}</li>
+  </ul>
+ </li>
+ <li>Beginnend mit Gecko 20.0 {{geckoRelease("20.0")}} sind für <code>scriptminsize</code> Werte ohne Einheit und Prozentangaben erlaubt und werden als Vielfache von "8pt" berechnet.</li>
+ <li>Seit Gecko 29.0 {{geckoRelease("29.0")}} sind für <code>&lt;mstyle&gt;</code> nur noch Attribute erlaubt, die in der Praxis auch angewendet werden: <code>id, class, style, href, mathcolor, mathbackground, scriptlevel, displaystyle, scriptsizemultiplier, scriptminsize, dir, mathsize, mathvariant, fontfamily, fontweight, fontstyle, fontsize, color, background</code>.</li>
+</ul>
diff --git a/files/de/web/mathml/element/msub/index.html b/files/de/web/mathml/element/msub/index.html
new file mode 100644
index 0000000000..995ae488d4
--- /dev/null
+++ b/files/de/web/mathml/element/msub/index.html
@@ -0,0 +1,205 @@
+---
+title: <msub>
+slug: Web/MathML/Element/msub
+tags:
+  - MathML
+  - 'MathML:Element'
+  - Referenz
+translation_of: Web/MathML/Element/msub
+---
+<div>{{MathMLRef}}</div>
+
+<p class="summary">Das Element <code>&lt;msub&gt;</code> wird in MathML eingesetzt, um einen Ausdruck mit einem Index (einer tiefergestellten Zahl) zu versehen.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>&lt;msub&gt;<em>base subscript</em>&lt;/msub&gt;</code></pre>
+
+<h2 id="Attribute">Attribute</h2>
+
+<dl>
+ <dt id="attr-class-id-style">class, id, style</dt>
+ <dd>Zur Einbindung von <a href="https://developer.mozilla.org/de/docs/Web/CSS">CSS-Stylesheets</a> und zur direkten Anwendung von CSS-Angaben.</dd>
+ <dt id="attr-href">href</dt>
+ <dd>Mit diesem Attribut kann ein Link gesetzt werden.</dd>
+ <dt id="attr-mathbackground">mathbackground</dt>
+ <dd>Die Hintergrundfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+ <dt id="attr-mathcolor">mathcolor</dt>
+ <dd>Die Textfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+ <dt id="attr-superscriptshift">subscriptshift</dt>
+ <dd><a class="new" href="https://developer.mozilla.org/de/docs/MathML/Attributes/Values#Lengths">Maßangabe</a> des Mindestabstandes, um den die tiefergestellte Zahl von der Grundlinie des Ausdrucks <em>abgesenkt</em> wird.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Beispiel: <img alt="x1" src="/files/3202/msub.png" style="margin-left: 10px; vertical-align: middle;"></p>
+
+<p>Darstellung in Deinem Browser: <math> <msub> <mi>X</mi> <mn>1</mn> </msub> </math></p>
+
+<pre class="brush: html">&lt;math&gt;
+
+  &lt;msub&gt;
+    &lt;mi&gt;X&lt;/mi&gt;
+    &lt;mn&gt;1&lt;/mn&gt;
+  &lt;/msub&gt;
+
+&lt;/math&gt;
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Standard</th>
+   <th scope="col">Status</th>
+   <th scope="col">Bemerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('MathML3', 'chapter3.html#presm.msub', 'msub') }}</td>
+   <td>{{ Spec2('MathML3') }}</td>
+   <td>Current specification</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('MathML2', 'chapter3.html#presm.msub', 'msub') }}</td>
+   <td>{{ Spec2('MathML2') }}</td>
+   <td>Initial specification</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("7.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathbackground</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>mathcolor</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>subscriptshift</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("1.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("7.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>mathbackground</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>mathcolor</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>subscriptshift</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("1.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Hinweis_zu_Gecko">Hinweis zu Gecko</h2>
+
+<ul>
+ <li>Seit Gecko 26.0 (Firefox 26 / Thunderbird 26 / SeaMonkey 2.23 / Firefox OS 1.2) kann <code>&lt;none /&gt;</code> nicht mehr als Kind-Element eingesetzt werden. Die Darstellung ist jetzt an die von <code><a class="new" href="https://developer.mozilla.org/de/docs/Web/MathML/Element/msub" title="&lt;msub>">&lt;msup&gt;</a></code> und <code><a class="new" href="https://developer.mozilla.org/de/docs/Web/MathML/Element/mmultiscripts" title="&lt;mmultiscripts>">&lt;mmultiscripts&gt;</a></code> angeglichen.</li>
+</ul>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{ MathMLElement("msup") }} (Superscript)</li>
+ <li>{{ MathMLElement("msubsup") }} (Subscript-superscript pair)</li>
+ <li>{{ MathMLElement("mmultiscripts") }} (Prescripts and tensor indices)</li>
+</ul>
diff --git a/files/de/web/mathml/element/msubsup/index.html b/files/de/web/mathml/element/msubsup/index.html
new file mode 100644
index 0000000000..fb73f3d95a
--- /dev/null
+++ b/files/de/web/mathml/element/msubsup/index.html
@@ -0,0 +1,225 @@
+---
+title: <msubsup>
+slug: Web/MathML/Element/msubsup
+tags:
+  - MathML
+  - 'MathML:Element'
+  - Referenz
+translation_of: Web/MathML/Element/msubsup
+---
+<div>{{MathMLRef}}</div>
+
+<p class="summary">Das Element <code>&lt;msubsup&gt;</code> wird in MathML eingesetzt, um einen Ausdruck sowohl mit einer tiefergestellten Zahl als auch mit einer höhergestellten Zahl zu versehen.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>&lt;msubsup&gt;<em>base subscript superscript</em>&lt;/msubsup&gt;</code></pre>
+
+<h2 id="Attribute">Attribute</h2>
+
+<dl>
+ <dt id="attr-class-id-style">class, id, style</dt>
+ <dd>Zur Einbindung von <a href="https://developer.mozilla.org/de/docs/Web/CSS">CSS-Stylesheets</a> und zur direkten Anwendung von CSS-Angaben.</dd>
+ <dt id="attr-href">href</dt>
+ <dd>Mit diesem Attribut kann ein Link gesetzt werden.</dd>
+ <dt id="attr-mathbackground">mathbackground</dt>
+ <dd>Die Hintergrundfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+ <dt id="attr-mathcolor">mathcolor</dt>
+ <dd>Die Textfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+ <dt id="attr-superscriptshift">subscriptshift</dt>
+ <dd><a class="new" href="https://developer.mozilla.org/de/docs/MathML/Attributes/Values#Lengths">Maßangabe</a> des Mindestabstandes, um den die tiefergestellte Zahl von der Grundlinie des Ausdrucks <em>abgesenkt</em> wird.</dd>
+ <dt id="attr-superscriptshift">superscriptshift</dt>
+ <dd><a class="new" href="https://developer.mozilla.org/de/docs/MathML/Attributes/Values#Lengths">Maßangabe</a> des Mindestabstandes, um den der Exponent von der Grundlinie des Ausdrucks <em>angehoben</em> wird.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Beispiel: <img alt="x1" src="/files/3204/msubsup.png" style="margin-left: 10px; vertical-align: middle;"></p>
+
+<p>Darstellung in Deinem Browser: <math displaystyle="true"> <msubsup> <mo> ∫</mo> <mn> 0 </mn> <mn> 1 </mn> </msubsup> </math></p>
+
+<pre class="brush: html">&lt;math displaystyle="true"&gt;
+
+  &lt;msubsup&gt;
+    &lt;mo&gt; &amp;#x222B;&lt;!--Integral --&gt; &lt;/mo&gt;
+    &lt;mn&gt; 0 &lt;/mn&gt;
+    &lt;mn&gt; 1 &lt;/mn&gt;
+  &lt;/msubsup&gt;
+
+&lt;/math&gt;
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Standard</th>
+   <th scope="col">Status</th>
+   <th scope="col">Bemerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('MathML3', 'chapter3.html#presm.msubsup', 'msubsup') }}</td>
+   <td>{{ Spec2('MathML3') }}</td>
+   <td>Current specification</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('MathML2', 'chapter3.html#presm.msubsup', 'msubsup') }}</td>
+   <td>{{ Spec2('MathML2') }}</td>
+   <td>Initial specification</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("7.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathbackground</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>mathcolor</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>subscriptshift</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>superscriptshift</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("1.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("7.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>mathbackground</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>mathcolor</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>subscriptshift</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("1.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>superscriptshift</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("1.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Hinweise_zu_Gecko">Hinweise zu Gecko</h2>
+
+<ul>
+ <li>Starting with Gecko 26.0 {{geckoRelease("26")}} it is no longer possible to use <code>&lt;none /&gt;</code> as a child element. The rendering has been made more consistent with equivalent configurations of {{MathMLElement("msub")}}, {{MathMLElement("msup")}} and {{MathMLElement("mmultiscripts")}} .</li>
+</ul>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{ MathMLElement("msub") }} (Subscript)</li>
+ <li>{{ MathMLElement("msup") }} (Superscript)</li>
+ <li>{{ MathMLElement("mmultiscripts") }} (Prescripts and tensor indices)</li>
+</ul>
diff --git a/files/de/web/mathml/element/msup/index.html b/files/de/web/mathml/element/msup/index.html
new file mode 100644
index 0000000000..d1b526b38a
--- /dev/null
+++ b/files/de/web/mathml/element/msup/index.html
@@ -0,0 +1,205 @@
+---
+title: <msup>
+slug: Web/MathML/Element/msup
+tags:
+  - MathML
+  - 'MathML:Element'
+  - Referenz
+translation_of: Web/MathML/Element/msup
+---
+<div>{{MathMLRef}}</div>
+
+<p class="summary">Das Element <code>&lt;msup&gt;</code> wird in MathML eingesetzt, um einen Ausdruck mit einem Exponenten (einer hochgestellten Zahl) zu versehen.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>&lt;msup&gt;<em>base superscript</em>&lt;/msup&gt;</code></pre>
+
+<h2 id="Attribute">Attribute</h2>
+
+<dl>
+ <dt id="attr-class-id-style">class, id, style</dt>
+ <dd>Zur Einbindung von <a href="https://developer.mozilla.org/de/docs/Web/CSS">CSS-Stylesheets</a> und zur direkten Anwendung von CSS-Angaben.</dd>
+ <dt id="attr-href">href</dt>
+ <dd>Mit diesem Attribut kann ein Link gesetzt werden.</dd>
+ <dt id="attr-mathbackground">mathbackground</dt>
+ <dd>Die Hintergrundfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+ <dt id="attr-mathcolor">mathcolor</dt>
+ <dd>Die Textfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+ <dt id="attr-superscriptshift">superscriptshift</dt>
+ <dd><a href="/de/docs/MathML/Attributes/Values#Lengths">Maßangabe</a> des Mindestabstandes, um den der Exponent von der Grundlinie des Ausdrucks <em>angehoben</em> wird.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Beispiel: <img alt="x1" src="/files/3203/msup.png" style="margin-left: 10px; vertical-align: middle;"></p>
+
+<p>Darstellung in Deinem Browser: <math> <msup> <mi>X</mi> <mn>2</mn> </msup> </math></p>
+
+<pre class="brush: html">&lt;math&gt;
+
+  &lt;msup&gt;
+    &lt;mi&gt;X&lt;/mi&gt;
+    &lt;mn&gt;2&lt;/mn&gt;
+  &lt;/msup&gt;
+
+&lt;/math&gt;
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Standard</th>
+   <th scope="col">Status</th>
+   <th scope="col">Bemerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('MathML3', 'chapter3.html#presm.msup', 'msup') }}</td>
+   <td>{{ Spec2('MathML3') }}</td>
+   <td>Current specification</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('MathML2', 'chapter3.html#presm.msup', 'msup') }}</td>
+   <td>{{ Spec2('MathML2') }}</td>
+   <td>Initial specification</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("7.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathbackground</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>mathcolor</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>superscriptshift</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("1.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("7.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>mathbackground</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>mathcolor</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>superscriptshift</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("1.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Hinweise_zu_Gecko">Hinweise zu Gecko</h2>
+
+<ul>
+ <li>Seit Gecko 26.0 {{geckoRelease("26")}} kann <code>&lt;none /&gt;</code> nicht mehr als Kind-Element eingesetzt werden. Die Darstellung ist jetzt an die von {{MathMLElement("msub")}} und {{MathMLElement("mmultiscripts")}} angeglichen.</li>
+</ul>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{ MathMLElement("msub") }} (Subscript)</li>
+ <li>{{ MathMLElement("msubsup") }} (Subscript-superscript pair)</li>
+ <li>{{ MathMLElement("mmultiscripts") }} (Prescripts and tensor indices)</li>
+</ul>
diff --git a/files/de/web/mathml/element/mtable/index.html b/files/de/web/mathml/element/mtable/index.html
new file mode 100644
index 0000000000..12d94c6a8d
--- /dev/null
+++ b/files/de/web/mathml/element/mtable/index.html
@@ -0,0 +1,542 @@
+---
+title: <mtable>
+slug: Web/MathML/Element/mtable
+tags:
+  - MathML
+  - 'MathML:Element'
+  - Referenz
+translation_of: Web/MathML/Element/mtable
+---
+<div>{{MathMLRef}}</div>
+
+<p class="summary">Das <code>&lt;mtable&gt;</code>-Element wird genutzt, um in MathML Tabellen und Matrizen darzustellen und Gleichungen korrekt untereinander anzuordnen. Innerhalb von <code>&lt;mtable&gt;</code> sind nur {{ MathMLElement("mtr") }}-Elemente für die Zeilen der Tabelle und innerhalb dieser Zeilen nur {{ MathMLElement("mtd") }}-Elemente für die Zellen erlaubt. Diese Elemente ähneln {{ HTMLElement("table") }} , {{ HTMLElement("tr") }} und {{ HTMLElement("td") }} in <a href="/en-US/docs/HTML">HTML</a>.</p>
+
+<div class="note">
+<p><strong>Note: </strong><code>&lt;mtable&gt;</code> setzt das Attribut <code>displaystyle</code> auf <code>false</code> zurück. Für den Einsatz in einem inline-block könnte <code>&lt;mtable displaystyle="true"&gt;...&lt;/mtable&gt; sinnvoll sein</code>.</p>
+</div>
+
+<h2 id="Attribute">Attribute</h2>
+
+<dl>
+ <dt id="attr-align">align</dt>
+ <dd>Gibt die <em>vertikale</em> Ausrichtung der Tabelle im Bezug auf die Umgebung an.<br>
+ Mögliche Werte sind:
+ <ul>
+  <li><code>axis</code> (Vorgabewert): Die vertikale Mitte (das Minuszeichen) liegt auf der Höhe der Achse der Umgebung.</li>
+  <li><code>baseline</code>: Die vertikele Mitte der Tabelle liegt auf der Höhe der Grundlinie der Umgebung.</li>
+  <li><code>bottom</code>: Der untere Rand der Tabelle liegt auf der Höhe der Grundlinie der Umgebung.</li>
+  <li><code>center</code>: gleichbedeutend mit <code>baseline</code>.</li>
+  <li><code>top</code>: Der obere Rand der Tabelle liegt auf der Höhe der Grundlinie der Umgebung.</li>
+ </ul>
+ Darüberhinaus können die Werte des Attributes von <code>align</code> auch mit einer Zeilennummer enden, z.B. <code>align="center 3"</code>. Dadurch wird die angegebene <em>Tabellenzeile</em> und nicht die Tabelle als ganzes an der Umgebung ausgerichtet. Bei Angabe einer negativen, ganzen Zahl werden die Tabellenzeilen von unten nach oben gezählt.</dd>
+ <dt id="attr-alignmentscope">alignmentscope</dt>
+ <dd>{{ unimplemented_inline() }}</dd>
+ <dt id="attr-class-id-style">class, id, style</dt>
+ <dd>Zur Einbindung von <a href="https://developer.mozilla.org/de/docs/Web/CSS">CSS-Stylesheets</a> und zur direkten Anwendung von CSS-Angaben auf einzelne Elemente.</dd>
+ <dt id="attr-columnalign">columnalign</dt>
+ <dd>Gibt die <em>horizontale</em> Ausrichtung des Inhalts der Tabellenzellen an. Die Angabe mehrerer Werte ist erlaubt, diese werden in der angegebenen Reihenfolge auf die Spalten angewandt (z.B. <code>columnalign="left right center"</code>). Mögliche Werte sind <code>left</code>, <code>center</code> (default) und <code>right</code>.</dd>
+ <dt id="attr-columnlines">columnlines</dt>
+ <dd>Gibt die Umrandung der Spalten an. Die Angabe mehrerer Werte ist erlaubt, diese werden dann der Reihe nach auf die Spalten angewandt, (z.B. <code>columnlines="none none solid"</code>). Mögliche Werte sind <code>none</code> (default), <code>solid</code> und <code>dashed</code>.</dd>
+ <dt id="attr-columnspacing">columnspacing</dt>
+ <dd>Gibt den Zwischenraum zwischen den Tabellenspalten an.</dd>
+ <dt id="attr-columnwidth">{{ unimplemented_inline() }} columnwidth</dt>
+ <dd>Gibt die Breite der Tabellenspalten an.</dd>
+ <dt id="attr-displaystyle">displaystyle</dt>
+ <dd>Ein Boolescher Wert für den Darstellungsstil einer Gleichung. Bei <code>true</code> wird zusätzlicher vertikaler Zwischenraum eingefügt; bei <code>false</code> wird die Formel dagegen kompakter dargestellt. Der hauptsächliche Effekt besteht darin, dass größere Versionen der Operatoren angezeigt werden, falls <code>displaystyle</code> auf <code>true</code> gesetzt ist. Siehe auch <code>largeop</code> and <code>movablelimits</code> bei <code><a href="https://developer.mozilla.org/de/docs/Web/MathML/Element/mo" title="&lt;mo>">&lt;mo&gt;</a></code>.</dd>
+ <dt id="attr-equalcolumns">{{ unimplemented_inline() }} equalcolumns</dt>
+ <dd>Ein Boolescher Wert, mit dem erzwungen werden kann, dass alle Spalten die gleiche Breite haben. Der Vorgabewert ist <code>false</code>.</dd>
+ <dt id="attr-equalrows">{{ unimplemented_inline() }} equalrows</dt>
+ <dd>Ein Boolescher Wert, mit dem erzwungen werden kann, dass alle Zeilen die gleiche Höhe haben. Der Vorgabewert ist <code>false</code>.</dd>
+ <dt id="attr-frame">frame</dt>
+ <dd>Dieses Attribut bestimmt die Umrandung der Tabelle als ganzes. Mögliche Werte sind <code>none</code> (default), <code>solid</code> und <code>dashed</code>.</dd>
+ <dt id="attr-framespacing">framespacing</dt>
+ <dd>Dieses Attribut gibt an, welcher zusätzliche Abstand zwischen der Tabelle und ihrer Umrandung (<code>frame</code>) eingefügt wird. Diese Angabe wirkt nur, sofern <code>frame</code> nicht <code>none</code> ist. Der erste Wert betrifft den linken und rechten Abstand, der zweite den Abstand nach oben und unten. Vorgabewerte sind <code>.4em .5ex</code>.</dd>
+ <dt id="attr-groupalign">groupalign</dt>
+ <dd>{{ unimplemented_inline() }}</dd>
+ <dt id="attr-href">href</dt>
+ <dd>Mit diesem Attribut kann ein Link gesetzt werden.</dd>
+ <dt id="attr-mathbackground">mathbackground</dt>
+ <dd>Die Hintergrundfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+ <dt id="attr-mathcolor">mathcolor</dt>
+ <dd>Die Textfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+ <dt id="attr-minlabelspacing">{{ unimplemented_inline() }} minlabelspacing</dt>
+ <dd>Eine Längenangabe für den Mindestabstand zwischen <a href="/en-US/docs/MathML/Element/mlabeledtr">label</a> und der angrenzenden Zelle.</dd>
+ <dt id="attr-rowalign">rowalign</dt>
+ <dd>Gibt die <em>vertikale</em> Ausrichtung des Inhalts der Tabellenzellen an. Die Angabe mehrerer Werte ist erlaubt, diese werden dann in der angegebenen Reihenfolge auf die Zeilen angewandt, (z.B. <code>rowalign="top bottom axis"</code>). Mögliche Werte sind <code>axis</code>, <code>baseline</code> (default), <code>bottom</code>, <code>center</code> und <code>top</code>.</dd>
+ <dt id="attr-rowlines">rowlines</dt>
+ <dd>Legt die Umrandung der Tabellenzeilen fest. Die Angabe mehrerer Werte ist erlaubt, diese werden dann der Reihe nach auf die Zeilen angewandt, (z.B. <code>rowlines="none none solid"</code>). Mögliche Werte sind <code>none</code> (default), <code>solid</code> und <code>dashed</code>.</dd>
+ <dt id="attr-rowspacing">{{ unimplemented_inline() }} rowspacing</dt>
+ <dd>Gibt den Zwischenraum zwischen den Zeilen der Tabelle an.</dd>
+ <dt id="attr-side">{{ unimplemented_inline() }} side</dt>
+ <dd>Specifies the position where {{ MathMLElement("mlabeledtr") }} label elements should be placed. Possible values are: <code>left</code>, <code>right</code> (default), <code>leftoverlap</code> and <code>rightoverlap</code>.</dd>
+ <dt id="attr-width">width</dt>
+ <dd>Legt die Breite der Tabelle fest. Siehe <a href="https://developer.mozilla.org/de/docs/Web/MathML/Attribute/Werte">Maßangaben</a> für mögliche Werte.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Vertikale_Ausrichtung_mit_Zeilennummer">Vertikale Ausrichtung mit Zeilennummer</h3>
+
+<p><img alt="" src="/files/3295/mtable-1.png" style="margin-left: 10px; vertical-align: middle;"></p>
+
+<pre class="brush: html">&lt;math&gt;
+
+    &lt;mi&gt;X&lt;/mi&gt;
+    &lt;mo&gt;=&lt;/mo&gt;
+    &lt;mtable frame="solid" rowlines="solid" align="axis 3"&gt;
+        &lt;mtr&gt;
+             &lt;mtd&gt;&lt;mi&gt;A&lt;/mi&gt;&lt;/mtd&gt;
+             &lt;mtd&gt;&lt;mi&gt;B&lt;/mi&gt;&lt;/mtd&gt;
+        &lt;/mtr&gt;
+        &lt;mtr&gt;
+             &lt;mtd&gt;&lt;mi&gt;C&lt;/mi&gt;&lt;/mtd&gt;
+             &lt;mtd&gt;&lt;mi&gt;D&lt;/mi&gt;&lt;/mtd&gt;
+        &lt;/mtr&gt;
+        &lt;mtr&gt;
+             &lt;mtd&gt;&lt;mi&gt;E&lt;/mi&gt;&lt;/mtd&gt;
+             &lt;mtd&gt;&lt;mi&gt;F&lt;/mi&gt;&lt;/mtd&gt;
+        &lt;/mtr&gt;
+    &lt;/mtable&gt;
+
+&lt;/math&gt;
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Standard</th>
+   <th scope="col">Status</th>
+   <th scope="col">Bemerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('MathML3', 'chapter3.html#presm.mtable', 'mtable') }}</td>
+   <td>{{ Spec2('MathML3') }}</td>
+   <td>Current specification</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('MathML2', 'chapter3.html#presm.mtable', 'mtable') }}</td>
+   <td>{{ Spec2('MathML2') }}</td>
+   <td>Initial specification</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>align</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>alignmentscope</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>columnalign</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>columnlines</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>columnspacing</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("33.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>columnwidth</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>displaystyle</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>equalcolumns</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>equalrows</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>frame</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>framespacing</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("33.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>groupalign</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("7.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathbackground</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>mathcolor</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>minlabelspacing</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>rowalign</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>rowlines</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>rowspacing</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("33.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>side</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>width</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("13.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("1.9.2") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>align</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("1.9.2") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>alignmentscope</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>columnalign</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("1.9.2") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>columnlines</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("1.9.2") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>columnspacing</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("33.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>columnwidth</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>displaystyle</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("1.9.2") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>equalcolumns</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>equalrows</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>frame</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("1.9.2") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>framespacing</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("33.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>groupalign</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("7.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>mathbackground</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>mathcolor</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>minlabelspacing</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>rowalign</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("1.9.2") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>rowlines</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("1.9.2") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>rowspacing</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("33.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>side</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>width</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("13.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{ MathMLElement("mtd") }} (Table cell)</li>
+ <li>{{ MathMLElement("mtr") }} (Table row)</li>
+</ul>
diff --git a/files/de/web/mathml/element/mtd/index.html b/files/de/web/mathml/element/mtd/index.html
new file mode 100644
index 0000000000..50d1373a36
--- /dev/null
+++ b/files/de/web/mathml/element/mtd/index.html
@@ -0,0 +1,188 @@
+---
+title: <mtd>
+slug: Web/MathML/Element/mtd
+tags:
+  - MathML
+  - 'MathML:Element'
+  - Referenz
+translation_of: Web/MathML/Element/mtd
+---
+<div>{{MathMLRef}}</div>
+
+<p class="summary">Das <code>&lt;mtd&gt;-E</code>lement erzeugt eine Zelle in einer Tabelle oder Matrix. Es ist innerhalb von {{ MathMLElement("mtr") }} erlaubt. <code>&lt;mtd&gt;</code> ähnelt dem {{ HTMLElement("td") }}-Element in <a href="/en-US/docs/HTML">HTML</a>.</p>
+
+<h2 id="Attribute">Attribute</h2>
+
+<dl>
+ <dt id="attr-class-id-style">class, id, style</dt>
+ <dd>Zur Einbindung von <a href="https://developer.mozilla.org/de/docs/Web/CSS">CSS-Stylesheets</a> und zur direkten Anwendung von CSS-Angaben auf einzelne Elemente.</dd>
+ <dt id="attr-columnalign">columnalign</dt>
+ <dd>Gibt die <em>horizontale</em> Ausrichtung des Inhalts der Tabellenzellen an. Dieses Attribut für die Zeile <code>&lt;mtr&gt;</code> überschreibt entsprechende Angaben für <code>columnalign</code> für das Elternelement <code>&lt;mtr&gt;</code> und dessen Elternelement <code>&lt;mtable&gt;</code>. Die Angabe mehrerer Werte ist erlaubt, diese werden in der angegebenen Reihenfolge auf die Spalten angewandt (z.B. <code>columnalign="left right center"</code>). Mögliche Werte sind <code>left</code>, <code>center</code> und <code>right</code>.</dd>
+ <dt id="attr-columnspan">columnspan</dt>
+ <dd>Eine nichtnegative Zahl gibt hier an, über wieviele Spalten sich diese Zelle erstreckt.</dd>
+ <dt>groupalign</dt>
+ <dd>{{ unimplemented_inline() }}</dd>
+ <dt id="attr-href">href</dt>
+ <dd>Mit diesem Attribut kann ein Link gesetzt werden.</dd>
+ <dt id="attr-mathbackground">mathbackground</dt>
+ <dd>Die Hintergrundfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+ <dt id="attr-mathcolor">mathcolor</dt>
+ <dd>Die Textfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+ <dt id="attr-rowalign">rowalign</dt>
+ <dd>Gibt die <em>vertikale</em> Ausrichtung des Inhalts der Tabellenzellen an. Dieses Attribut für die Zeile <code>&lt;mtr&gt;</code> überschreibt entsprechende Angaben für <code>rowalign</code> für das Elternelement <code>&lt;mtr&gt;</code> und dessen Elternelement <code>&lt;mtable&gt;</code>. Die Angabe mehrerer Werte ist erlaubt, diese werden dann in der angegebenen Reihenfolge auf die Zeilen angewandt, (z.B. <code>rowalign="top bottom axis"</code>). Mögliche Werte sind <code>axis</code>, <code>baseline</code>, <code>bottom</code>, <code>center</code> und <code>top</code>.</dd>
+ <dt id="attr-rowspan">rowspan</dt>
+ <dd>Eine nichtnegative Zahl gibt hier an, über wieviele Zeilen sich diese Zelle erstreckt.</dd>
+</dl>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Standard</th>
+   <th scope="col">Status</th>
+   <th scope="col">Bemerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('MathML3', 'chapter3.html#presm.mtd', 'mtd') }}</td>
+   <td>{{ Spec2('MathML3') }}</td>
+   <td>Current specification</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('MathML2', 'chapter3.html#presm.mtd', 'mtd') }}</td>
+   <td>{{ Spec2('MathML2') }}</td>
+   <td>Initial specification</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>9.5</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>columnalign</code> and<br>
+    <code>rowalign</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>9.5</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>groupalign</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("7.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>rowspan</code> and <code>columnspan</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("1.9.2") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>columnalign</code> and<br>
+    <code>rowalign</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("1.9.2") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>groupalign</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("7.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>rowspan</code> and <code>columnspan</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("1.9.2") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{ MathMLElement("mtable") }}</li>
+ <li>{{ MathMLElement("mtr") }}</li>
+</ul>
diff --git a/files/de/web/mathml/element/mtext/index.html b/files/de/web/mathml/element/mtext/index.html
new file mode 100644
index 0000000000..7c4c326532
--- /dev/null
+++ b/files/de/web/mathml/element/mtext/index.html
@@ -0,0 +1,233 @@
+---
+title: <mtext>
+slug: Web/MathML/Element/mtext
+tags:
+  - MathML
+  - 'MathML:Element'
+  - Referenz
+translation_of: Web/MathML/Element/mtext
+---
+<div>{{MathMLRef}}</div>
+
+<p class="summary">In MathML wird das &lt;mtext&gt;-Element eingesetzt, um Textanmerkungen zu setzen, die zusätzliche oder erläuternde Informationen zum mathematischen Ausdruck beinhalten.<br>
+ Um Text als Bestandteil der Formel darzustellen, werden alternativ die Elemente {{ MathMLElement("mi") }} und {{ MathMLElement("mo") }} genutzt.</p>
+
+<h2 id="Attribute">Attribute</h2>
+
+<dl>
+ <dt id="attr-class-id-style">class, id, style</dt>
+ <dd>Zur Einbindung von <a href="https://developer.mozilla.org/de/docs/Web/CSS">CSS-Stylesheets</a> und zur direkten Anwendung von CSS-Angaben.</dd>
+ <dt id="attr-dir">dir</dt>
+ <dd>Allgemeine Schreibrichtung für die Formeln. Mögliche Werte sind <code>ltr</code> (left to right, von links nach rechts) und <code>rtl</code> (right to left, von rechts nach links).</dd>
+ <dt id="attr-href">href</dt>
+ <dd>Mit diesem Attribut kann ein Link gesetzt werden.</dd>
+ <dt id="attr-mathbackground">mathbackground</dt>
+ <dd>Die Hintergrundfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+ <dt id="attr-mathcolor">mathcolor</dt>
+ <dd>Die Textfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+ <dt id="attr-mathsize">mathsize</dt>
+ <dd>Die Größe (Höhe) des Inhalts. Möglich sind diese Angaben:
+ <ul>
+  <li><code>small</code>: Die Schrift wird kleiner dargestellt als die aktuelle Schrifthöhe.</li>
+  <li><code>normal</code>: Dies entspricht 100% des aktuellen Schriftgrades = 1em.</li>
+  <li><code>big</code>: Die Schrift wird größer dargestellt als die aktuelle Schrifthöhe.</li>
+  <li>Eine Längenangabe (siehe <a href="https://developer.mozilla.org/de/docs/Web/CSS/length">length</a>).</li>
+  <li>Ein einheitenloser Wert der als Faktor auf die aktuelle Schrifthöhe interpretiert wird.</li>
+ </ul>
+ </dd>
+ <dt id="attr-mathvariant">mathvariant</dt>
+ <dd>Dieses Attribut bezeichnet die logische Klasse des Operators. Mit der logischen Klasse ist in der Regel eine bestimmte Typographie verbunden, in erster Linie ist dies aber aber eine semantische Einteilung. Abschnitte der gleichen Klasse werden gleichermaßen behandelt, was einen bestimmten Stil zur Folgen haben kann aber nicht muss. Die folgenden Werte sind erlaubt:
+ <ul>
+  <li><code>normal</code> (Standardwert für <em>mehr als ein Zeichen</em>) ; <math><mi mathvariant="normal">Example</mi></math></li>
+  <li><code>bold</code> ; <math><mi mathvariant="bold">Example</mi></math></li>
+  <li><code>italic</code> (Standardwert für<em> ein einzelnes Zeichen</em>) ; <math><mi mathvariant="italic">Example</mi></math></li>
+  <li><code>bold-italic</code> ; <math><mi mathvariant="bold-italic">Example</mi></math></li>
+ </ul>
+
+ <ul>
+  <li><code>double-struck</code> ; <math><mi mathvariant="double-struck">Example</mi></math></li>
+  <li><code>bold-fraktur</code> ; <math><mi mathvariant="bold-fraktur">Example</mi></math></li>
+  <li><code>script</code> ; <math><mi mathvariant="script">Example</mi></math></li>
+  <li><code>bold-script</code> ; <math><mi mathvariant="bold-script">Example</mi></math></li>
+  <li><code>fraktur</code> ; <math><mi mathvariant="fraktur">Example</mi></math></li>
+ </ul>
+
+ <ul>
+  <li><code>sans-serif</code> ; <math><mi mathvariant="sans-serif">Example</mi></math></li>
+  <li><code>bold-sans-serif</code> ; <math><mi mathvariant="bold-sans-serif">Example</mi></math></li>
+  <li><code>sans-serif-italic</code> ; <math><mi mathvariant="sans-serif-italic">Example</mi></math></li>
+  <li><code>sans-serif-bold-italic</code> ; <math><mi mathvariant="sans-serif-bold-italic">Example</mi></math></li>
+  <li><code>monospace</code> ; <math><mi mathvariant="monospace">Example</mi></math></li>
+ </ul>
+ Die folgenden vier Werte betreffen nur arabische Schriften:
+
+ <ul>
+  <li><code>initial</code> ; <math><mi mathvariant="initial">مثال</mi></math></li>
+  <li><code>tailed</code> ; <math><mi mathvariant="tailed">مثال</mi></math></li>
+  <li><code>looped</code> ; <math><mi mathvariant="looped">مثال</mi></math></li>
+  <li><code>stretched</code> ; <math><mi mathvariant="stretched">مثال</mi></math></li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: html">&lt;math&gt;
+
+  &lt;mtext&gt; Theorem of Pythagoras &lt;/mtext&gt;
+
+  &lt;mtext&gt; /* comment here */ &lt;/mtext&gt;
+
+&lt;/math&gt;
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Standard</th>
+   <th scope="col">Status</th>
+   <th scope="col">Bemerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('MathML3', 'chapter3.html#presm.mtext', 'mtext') }}</td>
+   <td>{{ Spec2('MathML3') }}</td>
+   <td>Current specification</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('MathML2', 'chapter3.html#presm.mtext', 'mtext') }}</td>
+   <td>{{ Spec2('MathML2') }}</td>
+   <td>Initial specification</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>dir</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("12.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("7.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathsize</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>mathvariant</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("28.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("1.9.2") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>dir</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("12.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("7.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>mathsize</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("1.9.2") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>mathvariant</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("28.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Hinweise_zu_Gecko">Hinweise zu Gecko</h2>
+
+<ul>
+ <li>Seit Gecko 20.0 {{geckoRelease("20.0")}} sind einheitenlose Wertangaben für  <code>mathsize</code> erlaubt.</li>
+ <li>Einige <code>mathvariant</code> sind erst seit Gecko 28.0 (Firefox 28.0 / Thunderbird 28.0 / SeaMonkey 2.25) umgesetzt und erfordern passende <a href="/de/docs/Mozilla/MathML_Project/Fonts">Schriftarten für MathML</a>.</li>
+</ul>
diff --git a/files/de/web/mathml/element/mtr/index.html b/files/de/web/mathml/element/mtr/index.html
new file mode 100644
index 0000000000..f11a8b23ce
--- /dev/null
+++ b/files/de/web/mathml/element/mtr/index.html
@@ -0,0 +1,167 @@
+---
+title: <mtr>
+slug: Web/MathML/Element/mtr
+tags:
+  - MathML
+  - 'MathML:Element'
+  - Referenz
+translation_of: Web/MathML/Element/mtr
+---
+<div>{{MathMLRef}}</div>
+
+<p class="summary">Das <code>&lt;mtr&gt;-E</code>lement erzeugt eine Zeile in einer Tabelle oder Matrix. Es ist innerhalb von {{ MathMLElement("mtable") }} erlaubt. <code>&lt;mtr&gt;</code> ähnelt dem {{ HTMLElement("tr") }}-Element in <a href="/en-US/docs/HTML">HTML</a>.</p>
+
+<h2 id="Attribute">Attribute</h2>
+
+<dl>
+ <dt id="attr-class-id-style">class, id, style</dt>
+ <dd>Zur Einbindung von <a href="https://developer.mozilla.org/de/docs/Web/CSS">CSS-Stylesheets</a> und zur direkten Anwendung von CSS-Angaben auf einzelne Elemente.</dd>
+ <dt id="attr-columnalign">columnalign</dt>
+ <dd>Gibt die <em>horizontale</em> Ausrichtung des Inhalts der Tabellenzellen an. Dieses Attribut für die Zeile <code>&lt;mtr&gt;</code> überschreibt entsprechende Angaben für <code>columnalign</code> für das Elternelement <code>&lt;mtable&gt;</code>. Die Angabe mehrerer Werte ist erlaubt, diese werden in der angegebenen Reihenfolge auf die Spalten angewandt (z.B. <code>columnalign="left right center"</code>). Mögliche Werte sind <code>left</code>, <code>center</code> und <code>right</code>.</dd>
+ <dt>groupalign</dt>
+ <dd>{{ unimplemented_inline() }}</dd>
+ <dt id="attr-href">href</dt>
+ <dd>Mit diesem Attribut kann ein Link gesetzt werden.</dd>
+ <dt id="attr-mathbackground">mathbackground</dt>
+ <dd>Die Hintergrundfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+ <dt id="attr-mathcolor">mathcolor</dt>
+ <dd>Die Textfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+ <dt id="attr-rowalign">rowalign</dt>
+ <dd>Gibt die <em>vertikale</em> Ausrichtung des Inhalts der Tabellenzellen an. Dieses Attribut für die Zeile <code>&lt;mtr&gt;</code> überschreibt entsprechende Angaben für <code>rowalign</code> für das Elternelement <code>&lt;mtable&gt;</code>. Die Angabe mehrerer Werte ist erlaubt, diese werden dann in der angegebenen Reihenfolge auf die Zeilen angewandt, (z.B. <code>rowalign="top bottom axis"</code>). Mögliche Werte sind <code>axis</code>, <code>baseline</code>, <code>bottom</code>, <code>center</code> und <code>top</code>.</dd>
+</dl>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Standard</th>
+   <th scope="col">Status</th>
+   <th scope="col">Bemerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('MathML3', 'chapter3.html#presm.mtr', 'mtr') }}</td>
+   <td>{{ Spec2('MathML3') }}</td>
+   <td>Current specification</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('MathML2', 'chapter3.html#presm.mtr', 'mtr') }}</td>
+   <td>{{ Spec2('MathML2') }}</td>
+   <td>Initial specification</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>columnalign</code> and<br>
+    <code>rowalign</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>groupalign</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("7.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("1.9.2") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>columnalign</code> and<br>
+    <code>rowalign</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("1.9.2") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>groupalign</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("7.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{ MathMLElement("mtable") }}</li>
+ <li>{{ MathMLElement("mtd") }}</li>
+</ul>
diff --git a/files/de/web/mathml/element/munder/index.html b/files/de/web/mathml/element/munder/index.html
new file mode 100644
index 0000000000..105e883063
--- /dev/null
+++ b/files/de/web/mathml/element/munder/index.html
@@ -0,0 +1,224 @@
+---
+title: <munder>
+slug: Web/MathML/Element/munder
+tags:
+  - MathML
+  - 'MathML:Element'
+  - Referenz
+translation_of: Web/MathML/Element/munder
+---
+<div>{{MathMLRef}}</div>
+
+<p class="summary">Das Element <code>&lt;munder&gt;</code> wird in MathML für Akzente und die Angabe von Grenzwerten unterhalb von Ausdrücken eingesetzt.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>&lt;munder&gt;<em>base underscript</em>&lt;/munder&gt;</code></pre>
+
+<h2 id="Attribute">Attribute</h2>
+
+<dl>
+ <dt id="attr-accentunder">accentunder</dt>
+ <dd>Wenn <code>true</code>, dann wird das <code>underscript</code> als <em>Akzent</em> und damit etwas näher am Ausdruck dargestellt.<br>
+ Wenn <code>false</code> (Vorgabewert), dann wird das <code>underscript</code> als <em>Grenzwert</em> unter dem Ausdruck dargestellt.</dd>
+ <dt id="attr-align">align</dt>
+ <dd>Die Ausrichtung des <code>underscript</code>. Mögliche Werte sind: <code>left</code>, <code>center</code>, und <code>right</code>.</dd>
+ <dt id="attr-class-id-style">class, id, style</dt>
+ <dd>Zur Einbindung von <a href="https://developer.mozilla.org/de/docs/Web/CSS">CSS-Stylesheets</a> und zur direkten Anwendung von CSS-Angaben.</dd>
+ <dt id="attr-href">href</dt>
+ <dd>Mit diesem Attribut kann ein Link gesetzt werden.</dd>
+ <dt id="attr-mathbackground">mathbackground</dt>
+ <dd>Die Hintergrundfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+ <dt id="attr-mathcolor">mathcolor</dt>
+ <dd>Die Textfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Beispiel: <img alt="x+y+z" src="/files/3197/munder.png" style="margin-left: 10px; vertical-align: middle;"></p>
+
+<p>Darstellung in Deinem Browser: <math> <munder accentunder="true"> <mrow> <mi> x </mi> <mo> + </mo> <mi> y </mi> <mo> + </mo> <mi> z </mi> </mrow> <mo> ⏟ </mo> </munder> </math></p>
+
+<pre class="brush: html">&lt;math&gt;
+
+&lt;munder accentunder="true"&gt;
+  &lt;mrow&gt;
+    &lt;mi&gt; x &lt;/mi&gt;
+    &lt;mo&gt; + &lt;/mo&gt;
+    &lt;mi&gt; y &lt;/mi&gt;
+    &lt;mo&gt; + &lt;/mo&gt;
+    &lt;mi&gt; z &lt;/mi&gt;
+  &lt;/mrow&gt;
+  &lt;mo&gt; &amp;#x23DF; &lt;!--BOTTOM CURLY BRACKET--&gt; &lt;/mo&gt;
+&lt;/munder&gt;
+
+&lt;/math&gt;
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Standard</th>
+   <th scope="col">Status</th>
+   <th scope="col">Bemerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('MathML3', 'chapter3.html#presm.munder', 'munder') }}</td>
+   <td>{{ Spec2('MathML3') }}</td>
+   <td>Current specification</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('MathML2', 'chapter3.html#presm.munder', 'munder') }}</td>
+   <td>{{ Spec2('MathML2') }}</td>
+   <td>Initial specification</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>accentunder</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>align</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("12.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("7.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathbackground</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>mathcolor</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("1.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>accentunder</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("1.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>align</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("12.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("7.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>mathbackground</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>mathcolor</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{ MathMLElement("mover") }} (Overscript)</li>
+ <li>{{ MathMLElement("munderover") }} (Underscript-overscript pair)</li>
+</ul>
diff --git a/files/de/web/mathml/element/munderover/index.html b/files/de/web/mathml/element/munderover/index.html
new file mode 100644
index 0000000000..c5f66f980b
--- /dev/null
+++ b/files/de/web/mathml/element/munderover/index.html
@@ -0,0 +1,239 @@
+---
+title: <munderover>
+slug: Web/MathML/Element/munderover
+tags:
+  - MathML
+  - 'MathML:Element'
+  - Referenz
+translation_of: Web/MathML/Element/munderover
+---
+<div>{{MathMLRef}}</div>
+
+<p class="summary">Das Element <code>&lt;munderover&gt;</code> wird in MathML eingesetzt, um Akzente und Grenzwerte sowohl ober- als auch unterhalb von Ausdrücken zu platzieren.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>&lt;munderover&gt;<em>base underscript overscript</em>&lt;/munderover&gt;</code></pre>
+
+<h2 id="Attribute">Attribute</h2>
+
+<dl>
+ <dt id="attr-accentunder">accentunder</dt>
+ <dd>Wenn <code>true</code>, dann wird das <code>underscript</code> als <em>Akzent</em> und damit etwas näher am Ausdruck dargestellt.<br>
+ Wenn <code>false</code> (Vorgabewert), dann wird das <code>underscript</code> als <em>Grenzwert</em> unter dem Ausdruck dargestellt.</dd>
+ <dt>accent</dt>
+ <dd>Wenn <code>true</code>, dann wird das <code>overscript</code> als <em>Akzent</em> und damit etwas näher am Ausdruck dargestellt.<br>
+ Wenn <code>false</code> (Vorgabewert), dann wird das <code>overscript</code> als <em>Grenzwert</em> über dem Ausdruck dargestellt.</dd>
+ <dt id="attr-align">align</dt>
+ <dd>Die Ausrichtung von <code>underscript</code> und <code>overscript</code>. Mögliche Werte sind: <code>left</code>, <code>center</code>, und <code>right</code>.</dd>
+ <dt id="attr-class-id-style">class, id, style</dt>
+ <dd>Zur Einbindung von <a href="https://developer.mozilla.org/de/docs/Web/CSS">CSS-Stylesheets</a> und zur direkten Anwendung von CSS-Angaben.</dd>
+ <dt id="attr-href">href</dt>
+ <dd>Mit diesem Attribut kann ein Link gesetzt werden.</dd>
+ <dt id="attr-mathbackground">mathbackground</dt>
+ <dd>Die Hintergrundfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+ <dt id="attr-mathcolor">mathcolor</dt>
+ <dd>Die Textfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Beispiel: <img alt="integral-0-infinity" src="/files/3198/munderover.png" style="margin-left: 10px; vertical-align: middle;"></p>
+
+<p>Darstellung in Deinem Browser: <math displaystyle="true"> <munderover> <mo> ∫ </mo> <mn> 0 </mn> <mi> ∞ </mi> </munderover> </math></p>
+
+<pre class="brush: html">&lt;math displaystyle="true"&gt;
+
+  &lt;munderover &gt;
+    &lt;mo&gt; &amp;#x222B; &lt;!--INTEGRAL--&gt; &lt;/mo&gt;
+    &lt;mn&gt; 0 &lt;/mn&gt;
+    &lt;mi&gt; &amp;#x221E; &lt;!--INFINITY--&gt; &lt;/mi&gt;
+  &lt;/munderover&gt;
+
+&lt;/math&gt;
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Standard</th>
+   <th scope="col">Status</th>
+   <th scope="col">Bemerkung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('MathML3', 'chapter3.html#presm.munderover', 'munderover') }}</td>
+   <td>{{ Spec2('MathML3') }}</td>
+   <td>Current specification</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('MathML2', 'chapter3.html#presm.munderover', 'munderover') }}</td>
+   <td>{{ Spec2('MathML2') }}</td>
+   <td>Initial specification</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>accent</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>accentunder</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>align</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("12.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("7.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mathbackground</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>mathcolor</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("1.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>accent</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("1.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>accentunder</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("1.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>align</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("12.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("7.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>mathbackground</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>mathcolor</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{ MathMLElement("munder") }} (Underscript)</li>
+ <li>{{ MathMLElement("mover") }} (Overscript)</li>
+</ul>
diff --git a/files/de/web/mathml/index.html b/files/de/web/mathml/index.html
new file mode 100644
index 0000000000..4fb2486ef8
--- /dev/null
+++ b/files/de/web/mathml/index.html
@@ -0,0 +1,112 @@
+---
+title: MathML
+slug: Web/MathML
+tags:
+  - MathML
+translation_of: Web/MathML
+---
+<p><strong>Mathematical Markup Language (MathML)</strong> ist eine <a href="/de/docs/XML" title="/en-US/docs/XML">XML</a> (Extensible Markup Language) zur bildlichen Darstellung und strukturellen Beschreibung von mathematischen Termen und Gleichungen. Hier finden Sie Links zu Dokumentationen, Beispielen und Tools, die Ihnen helfen, mit dieser Technologie zu arbeiten. Für einen schnellen Überblick, schauen Sie sich die <a href="http://fred-wang.github.io/MozSummitMathML/index.html">slides for the innovation fairs at Mozilla Summit 2013</a> an.</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 id="MathML-Referenzen">MathML-Referenzen</h2>
+
+<dl>
+ <dt><a href="/de/docs/Web/MathML/Element" title="/en-US/docs/Web/MathML/Element">MathML-Elementreferenz</a></dt>
+ <dd>Details zu allen MathML-Elementen und Kompatibilitätsinformationen für Desktop- und Mobilbrowser.</dd>
+ <dt><a href="/de/docs/Web/MathML/Attribute" title="/en-US/docs/Web/MathML/Attribute">MathML-Attributreferenz</a></dt>
+ <dd>Informationen über MathML-Attribute, um Darstellung oder Verhalten der Elemente zu beeinflussen.</dd>
+ <dt><a href="/de/docs/Web/MathML/Beispiele" title="/en-US/docs/Web/MathML/Examples">MathML-Beispiele</a></dt>
+ <dd>MathML-Beispiele, die Ihnen zu verstehen helfen, wie es funktioniert.</dd>
+ <dt><a href="/de/docs/Web/MathML/Authoring">MathML in der Praxis</a></dt>
+ <dd>Vorschläge und Tipps, um in MathML zu schreiben, einschließlich MathML-Editoren und Hinweise, wie man die Ergebnisse in Web-Inhalt einfügt.</dd>
+</dl>
+
+<p><a href="/de/docs/tag/MathML" title="/en-US/docs/tag/CSS">Alles anzeigen...</a></p>
+</div>
+
+<div class="section">
+<h2 id="Hilfe_von_der_Gemeinschaft_bekommen">Hilfe von der Gemeinschaft bekommen</h2>
+
+<ul>
+ <li>Mozilla-Foren konsultieren<br>
+  {{ DiscussionList("dev-tech-mathml", "mozilla.dev.tech.mathml") }}</li>
+ <li><a class="link-irc" href="irc://irc.mozilla.org/%23mathml" rel="external" title="irc://irc.mozilla.org/%23mathml">IRC channel</a></li>
+ <li><a class="link-https" href="https://wiki.mozilla.org/MathML:Home_Page">Wiki der Mozilla-Unterstützer</a></li>
+ <li><a href="http://www.w3.org/Math/" title="http://www.w3.org/Math/">W3C Math Home</a></li>
+ <li><a href="http://lists.w3.org/Archives/Public/www-math/" title="http://lists.w3.org/Archives/Public/www-math/">www-math w3.org mail archive</a></li>
+</ul>
+
+<h2 id="Tools">Tools</h2>
+
+<ul>
+ <li><a class="external" href="http://validator.w3.org">W3C Validator</a></li>
+ <li><a class="link-https" href="https://addons.mozilla.org/de/firefox/addon/8969/">FireMath Firefox add-on</a></li>
+ <li><a href="https://addons.mozilla.org/firefox/collections/fred_wang/mathzilla/" title="https://addons.mozilla.org/firefox/collections/fred_wang/mathzilla/">Mathzilla Firefox add-on collection</a></li>
+ <li><a href="https://github.com/fred-wang/TeXZilla">TeXZilla</a> - Javascript LaTeX to MathML Konverter (<a href="http://fred-wang.github.io/TeXZilla/">live demo</a>, <a href="http://r-gaia-cs.github.io/TeXZilla-webapp/">Firefox OS webapp</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/texzilla/">Firefox add-on</a>, <a href="https://github.com/fred-wang/TeXZilla/wiki/Using-TeXZilla">using in a Web Page, JS program etc</a>)</li>
+ <li><a href="http://dlmf.nist.gov/LaTeXML/" title="http://dlmf.nist.gov/LaTeXML/">LaTeXML</a> - übersetzt LaTeX-Dokumente in HTML+MathML Web-Seiten</li>
+ <li><a href="http://webdemo.visionobjects.com/home.html#equation" title="http://webdemo.visionobjects.com/equation.html">Web Equation</a> - übersetzt handgeschriebene Gleichungen in MathML oder LaTeX</li>
+ <li><a href="http://www.mathjax.org/" title="http://www.mathjax.org/">MathJax</a> - Cross-browser JavaScript display engine für mathematische Ausdrücke. Um MathJax zu zwingen, natives MathML zu nutzen, versuche <a href="https://addons.mozilla.org/en-US/firefox/addon/mathjax-native-mathml/">dieses Mozilla Add-on</a>, diese <a href="http://fred-wang.github.io/mathjax-native-mathml-safari/mathjax-native-mathml.safariextz">Safari-Erweiterung</a> oder dieses <a href="https://openuserjs.org/scripts/fred.wang/MathJax_Native_MathML/">GreaseMonkey-Skript</a>.</li>
+</ul>
+
+<h2 id="Verwandte_Inhalte">Verwandte Inhalte</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a></li>
+ <li><a href="/de/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a></li>
+ <li><a href="/de/docs/Web/SVG" title="/en-US/docs/Web/SVG">SVG</a></li>
+</ul>
+</div>
+</div>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Allgemeine Unterstützung</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatGeckoDesktop("1.8")}}</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Allgemeine Unterstützung</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.8")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Verfügbar durch plug-in(s).</p>
diff --git a/files/de/web/performance/dns-prefetch/index.html b/files/de/web/performance/dns-prefetch/index.html
new file mode 100644
index 0000000000..da853a85de
--- /dev/null
+++ b/files/de/web/performance/dns-prefetch/index.html
@@ -0,0 +1,66 @@
+---
+title: Verwendung von dns-prefetch
+slug: Web/Performance/dns-prefetch
+translation_of: Web/Performance/dns-prefetch
+---
+<p><span class="seoSummary"><code><strong>DNS-prefetch</strong></code></span> ist ein Versuch, Domainnamen aufzulösen, bevor Ressourcen angefordert werden. Dabei kann es sich um eine Datei handeln, die später geladen wird, oder um ein Linkziel, dem ein Benutzer zu folgen versucht.</p>
+
+<h2 id="Warum_sollte_man_dns-prefetch_benutzen">Warum sollte man dns-prefetch benutzen?</h2>
+
+<p>Wenn ein Browser eine Ressource von einem (Drittanbieter-)Server anfordert, muss der Domain-Name dieses anderen Ursprungs in eine IP-Adresse aufgelöst werden, bevor der Browser die Anfrage stellen kann. Dieser Vorgang wird als DNS-Auflösung bezeichnet. Während das DNS-Caching dazu beitragen kann, diese Latenzzeit zu verringern, kann die DNS-Auflösung die Latenzzeit bei Anfragen deutlich erhöhen. Bei Websites, die Verbindungen zu vielen Drittanbietern öffnen, kann diese Latenz das Laden erheblich verlangsamen.</p>
+
+<p><code>dns-prefetch</code> hilft Entwicklern, die Latenz der DNS-Auflösung zu überdecken. Das <a href="/en-US/docs/Web/HTML/Element/link">HTML <code>&lt;link&gt;</code> Element</a> bietet diese Funktionalität über einen <a href="/en-US/docs/Web/HTML/Attributes/rel"><code>rel</code> Attributwert</a> von <code>dns-prefetch</code>. Die <a href="/en-US/docs/Web/HTTP/CORS">cross-origin</a>-Domäne wird dann im <a href="/en-US/docs/Web/HTML/Attributes">href Attribut</a> angegeben:</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: html">&lt;link rel="dns-prefetch" href="https://fonts.gstatic.com/" &gt;
+</pre>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<pre class="brush: html">&lt;html&gt;
+  &lt;head&gt;
+    &lt;link rel="dns-prefetch" href="https://fonts.gstatic.com/"&gt;
+    &lt;!-- and all other head elements --&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;!-- your page content --&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Sie sollten immer dann <code>dns-prefetch</code>-Hinweise im <a href="/en-US/docs/Web/HTML/Element/head"><code>&lt;head&gt;</code> Element</a> platzieren, wenn Ihre Website auf Ressourcen von <a href="/en-US/docs/Web/HTTP/CORS">cross-origin</a>-Domänen verweist, es gibt aber einige Dinge zu beachten.</p>
+
+<h2 id="Bewährte_Methoden">Bewährte Methoden</h2>
+
+<p id="Three_things_to_keep_in_mind">Es gibt 3 wichtige Dinge zu beachten:</p>
+
+<p><strong>Erstens </strong>ist <code>dns-prefetch</code> nur für DNS-Lookups auf <a href="/en-US/docs/Web/HTTP/CORS">cross-origin</a>-Domänen wirksam, also vermeiden Sie es für Verweise auf Ihre eigene Webseite oder Domäne zu benutzen. Hintergrund ist, dass die IP hinter der Domäne Ihrer Website bereits aufgelöst ist, wenn der Browser den Hinweis sieht.</p>
+
+<p><strong>Zweitens</strong> ist es auch möglich, <code>dns-prefetch</code> (und andere Ressourcen-Hinweise) als <a href="/en-US/docs/Web/HTTP/Headers">HTTP-Header</a> anzugeben, indem Sie das <a href="/en-US/docs/Web/HTTP/Headers/Link">HTTP-Link-Feld</a> verwenden:</p>
+
+<pre class="brush: unix">Link: &lt;https://fonts.gstatic.com/&gt;; rel=dns-prefetch</pre>
+
+<p>Ziehen Sie es<strong> drittens </strong>in Betracht <code>dns-prefetch</code> mit dem <code>preconnect</code> Hinweis zu verwenden. Während <code>dns-prefetch</code> nur einen DNS lookup durchführt, stellt <code>preconnect</code> eine Verbindung zu einem Server her. Dieser Prozess umfasst sowohl die DNS-Auflösung als auch den Aufbau der TCP-Verbindung und die Durchführung des <a href="/en-US/docs/Glossary/TLS">TLS</a>-Handshakes, wenn eine Site über HTTPS ausgeliefert wird. Die Kombination dieser beiden Verfahren bietet die Möglichkeit, die wahrgenommene Latenzzeit von <a href="/en-US/docs/Web/HTTP/CORS">cross-origin</a>-Anfragen weiter zu reduzieren. Sie können sie auf folgende Weise sicher zusammen verwenden:</p>
+
+<pre class="brush: html">&lt;link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin&gt;
+&lt;link rel="dns-prefetch" href="https://fonts.gstatic.com/"&gt;
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Hinweis:</strong> Wenn eine Seite Verbindungen zu vielen Drittanbieter-Domains herstellen muss, ist es kontraproduktiv, sie alle im Vorhinein zu verbinden. Der <code>preconnect</code> Hinweis wird am besten nur für die kritischsten Verbindungen verwendet. Für die anderen verwenden Sie einfach <code>&lt;link rel="dns-prefetch"&gt;</code> um Zeit beim ersten Schritt — dem DNS-Lookup — zu sparen.</p>
+</div>
+
+<p>Die Logik hinter der Verknüpfung dieser Hinweise liegt darin, dass die Unterstützung für dns-prefetch weiter verbreitet ist, als die Unterstützung für preconnect. Browser, die preconnect nicht unterstützen, erhalten trotzdem einen zusätzlichen Vorteil, indem sie auf dns-prefetch zurückgreifen. Da es sich hierbei um eine HTML-Funktion handelt, ist sie sehr fehlertolerant. Wenn ein nicht-unterstützter Browser auf einen dns-prefetch-Hinweis—oder einen anderen Ressourcen-Hinweis—stößt, wird Ihre Website nicht beschädigt. Sie werden nur nicht die Vorteile erfahren, die sie bietet.</p>
+
+<p>Einige Ressourcen, wie z.B. Schriftarten, werden im anonymen Modus geladen. In solchen Fällen sollten Sie das <a href="/en-US/docs/Web/HTML/CORS_settings_attributes">crossorigin</a>-Attribut zusammen mit dem <code>preconnect</code>-Hinweis setzen. Wenn Sie es weglassen, führt der Browser nur den DNS-Lookup durch.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Element/link">&lt;link&gt;</a></li>
+ <li><a href="/en-US/docs/Web/HTML/Attributes/rel">HTML attribute: rel</a></li>
+ <li><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">crossorigin</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Headers">HTTP headers</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Headers/Link">HTTP header </a><a href="/en-US/docs/Web/HTTP/Headers/Link" title="The HTTP Link entity-header field provides a means for serialising one or more links in HTTP headers. It is semantically equivalent to the HTML &lt;link> element.">Link</a></li>
+</ul>
diff --git a/files/de/web/performance/index.html b/files/de/web/performance/index.html
new file mode 100644
index 0000000000..b75438f894
--- /dev/null
+++ b/files/de/web/performance/index.html
@@ -0,0 +1,291 @@
+---
+title: Web Performance
+slug: Web/Performance
+tags:
+  - API
+  - App
+  - App Performance
+  - HTML
+  - JavaScript
+  - Landing
+  - Mobile
+  - Mobile Performance
+  - NeedsTranslation
+  - Performance
+  - Performance Budget
+  - Start-Up Performance
+  - TopicStub
+  - Web
+  - Web Performance
+translation_of: Web/Performance
+---
+<p><span class="seoSummary">Web performance is the objective measurements and the perceived user experience of load time and runtime. Web performance is how long a site takes to load, become interactive and responsive, and how smooth the content is during user interactions </span>- is the scrolling smooth? are buttons clickable? Are pop-ups quick to load and display, and do they animate smoothly as they do so? Web performance includes both objective measurements like time to load, frames per second, and time to become interactive, and subjective experiences of how long it felt like it took the content to load.</p>
+
+<p>The longer it takes for a site to respond, the more users will abandon the site. It is important to minimize the loading and response times and add additional features to conceal latency by making the experience as available and interactive as possible, as soon as possible, while asynchronously loading in the longer tail parts of the experience.</p>
+
+<p>There are tools, APIs, and best practices that help us measure and improve web performance. We cover them in this section:</p>
+
+<h2 id="Key_performance_guides">Key performance guides</h2>
+
+<p>{{LandingPageListSubpages}}</p>
+
+<div class="cleared topicpage-table">
+<div class="section">
+<h2 id="Beginners_tutorials">Beginner's tutorials</h2>
+
+<p>The MDN <a href="/en-US/docs/Learn/Performance">Web Performance Learning Area</a> contains modern, up-to-date tutorials covering Performance essentials. Start here if you are a newcomer to performance:</p>
+
+<dl>
+ <dt></dt>
+ <dt><a href="/en-US/docs/Learn/Performance/web_performance_overview">Web performance: brief overview</a></dt>
+ <dd>Overview of the web performance learning path. Start your journey here.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/What_is_web_performance">What is web performance?</a></dt>
+ <dd>This article starts the module off with a good look at what performance actually is — this includes the tools, metrics, APIs, networks, and groups of people we need to consider when thinking about performance, and how we can make performance part of our web development workflow.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/Perceived_performance">How do users perceive performance?</a></dt>
+ <dd>
+ <p>More important than how fast your website is in milliseconds, is how fast your users perceive your site to be. These perceptions are impacted by actual p<span style="">age load time, idling, responsiveness to user interaction, and the smoothness of scrolling and other animations. In this article, we discuss the various loading metrics, animation, and responsiveness metrics, along with best practices to improve user perception, if not the actual timings.</span></p>
+ </dd>
+ <dt><a href="/en-US/docs/Learn/Performance/Web_Performance_Basics">Web performance basics</a></dt>
+ <dd>In addition to the front end components of HTML, CSS, JavaScript, and media files, there are features that can make applications slower and features that can make applications subjectively and objectively faster. There are many APIs, developer tools, best practices, and bad practices relating to web performance. Here we'll introduce many of these features ad the basic level and provide links to deeper dives to improve performance for each topic.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/HTML">HTML performance features</a></dt>
+ <dd>Some attributes and the source order of your mark-up can impact the performance or your website. By minimizing the number of DOM nodes, making sure the best order and attributes are used for including content such as styles, scripts, media, and third-party scripts, you can drastically improve the user experience. This article looks in detail at how HTML can be used to ensure maximum performance.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/Multimedia">Multimedia: images and video</a></dt>
+ <dd>The lowest hanging fruit of web performance is often media optimization. Serving different media files based on each user agent's capability, size, and pixel density is possible. Additional tips like removing audio tracks from background videos can improve performance even further. In this article we discuss the impact video, audio, and image content has on performance, and the methods to ensure that impact is as minimal as possible.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/CSS">CSS performance features</a></dt>
+ <dd>CSS may be a less important optimization focus for improved performance, but there are some CSS features that impact performance more than others. In this article we look at some CSS properties that impact performance and suggested ways of handling styles to ensure performance is not negatively impacted.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/JavaScript">JavaScript performance best practices</a></dt>
+ <dd>JavaScript, when used properly, can allow for interactive and immersive web experiences — or it can significantly harm download time, render time, in-app performance, battery life, and user experience. This article outlines some JavaScript best practices that should be considered to ensure even complex content is as performant as possible.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/Mobile">Mobile performance</a></dt>
+ <dd>With web access on mobile devices being so popular, and all mobile platforms having fully-fledged web browsers, but possibly limited bandwidth, CPU and battery life, it is important to consider the performance of your web content on these platforms. This article looks at mobile-specific performance considerations.</dd>
+</dl>
+
+<dl>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Other_documentation" id="Other_documentation" name="Other_documentation">Using Performance APIs</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/Performance_API/Using_the_Performance_API">Performance API</a></dt>
+ <dd>This guide describes how to use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Performance" title="The Performance interface provides access to performance-related information for the current page. It's part of the High Resolution Time API, but is enhanced by the Performance Timeline API, the Navigation Timing API, the User Timing API, and the Resource Timing API."><code>Performance</code></a> interfaces that are defined in the <a class="external external-icon" href="https://w3c.github.io/hr-time/" rel="noopener">High-Resolution Time</a> standard.</dd>
+ <dt><a href="/en-US/docs/Web/API/Resource_Timing_API/Using_the_Resource_Timing_API">Resource Timing API</a></dt>
+ <dd><a href="/en-US/docs/Web/API/Resource_Timing_API">Resource loading and timing</a> the loading of those resources, including managing the resource buffer and coping with CORS</dd>
+ <dt><a href="/en-US/docs/Web/API/Performance_Timeline/Using_Performance_Timeline">The performance timeline</a></dt>
+ <dd>The <a href="/en-US/docs/Web/API/Performance_Timeline">Performance Timeline</a> standard defines extensions to the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Performance" title="The Performance interface provides access to performance-related information for the current page. It's part of the High Resolution Time API, but is enhanced by the Performance Timeline API, the Navigation Timing API, the User Timing API, and the Resource Timing API."><code>Performance</code></a> interface to support client-side latency measurements within applications. Together, these interfaces can be used to help identify an application's performance bottlenecks.</dd>
+ <dt><a href="/en-US/docs/Web/API/User_Timing_API/Using_the_User_Timing_API">User Timing API</a></dt>
+ <dd>Create application specific timestamps using the <a href="/en-US/docs/Web/API/User_Timing_API">user timing API</a>'s "mark" and "measure" entry types - that are part of the browser's performance timeline.</dd>
+ <dt><a href="/en-US/docs/Web/API/Frame_Timing_API/Using_the_Frame_Timing_API">Frame Timing API</a></dt>
+ <dd>The <code><a href="/en-US/docs/Web/API/PerformanceFrameTiming">PerformanceFrameTiming</a></code> interface provides <em>frame</em> timing data about the browser's event loop.</dd>
+ <dt><a href="/en-US/docs/Web/API/Beacon_API/Using_the_Beacon_API">Beacon API</a></dt>
+ <dd><small>The <a href="/en-US/docs/Web/API/Beacon_API">Beacon</a> interface schedules an asynchronous and non-blocking request to a web server.</small></dd>
+ <dt><a href="/en-US/docs/Web/API/Intersection_Observer_API/Timing_element_visibility">Intersection Observer API</a></dt>
+ <dd>Learn to time element visibility with the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer API</a> and be asynchronously notified when elements of interest becomes visible.</dd>
+</dl>
+
+<h2 class="Other_documentation" id="Other_documentation" name="Other_documentation">Other documentation</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance">Developer Tools Performance Features</a></dt>
+ <dd>This section provides information on how to use and understand the performance features in your developer tools, including <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a>, <a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a>, and <a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Charts</a>.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Performance/Profiling_with_the_Built-in_Profiler">Profiling with the built-in profiler</a></dt>
+ <dd>Learn how to profile app performance with Firefox's built-in profiler.</dd>
+</dl>
+</div>
+</div>
+
+<h2 id="Glossary_Terms">Glossary Terms</h2>
+
+<div class="index">
+<ul class="index">
+ <li>{{glossary('Beacon')}}</li>
+ <li>{{glossary('Brotli compression')}}</li>
+ <li>{{glossary('Client hints')}}</li>
+ <li>{{glossary('Code splitting')}}</li>
+ <li>{{glossary('CSSOM')}}</li>
+ <li>{{glossary('Domain sharding')}}</li>
+ <li>{{glossary('Effective connection type')}}</li>
+ <li>{{glossary('First contentful paint')}}</li>
+ <li>{{glossary('First CPU idle')}}</li>
+ <li>{{glossary('First input delay')}}</li>
+ <li>{{glossary('First interactive')}}</li>
+ <li>{{glossary('First meaningful paint')}}</li>
+ <li>{{glossary('First paint')}}</li>
+ <li>{{glossary('HTTP')}}</li>
+ <li>{{glossary('HTTP_2', 'HTTP/2')}}</li>
+ <li>{{glossary('Jank')}}</li>
+ <li>{{glossary('Latency')}}</li>
+ <li>{{glossary('Lazy load')}}</li>
+ <li>{{glossary('Long task')}}</li>
+ <li>{{glossary('Lossless compression')}}</li>
+ <li>{{glossary('Lossy compression')}}</li>
+ <li>{{glossary('Main thread')}}</li>
+ <li>{{glossary('Minification')}}</li>
+ <li>{{glossary('Network throttling')}}</li>
+ <li>{{glossary('Packet')}}</li>
+ <li>{{glossary('Page load time')}}</li>
+ <li>{{glossary('Page prediction')}}</li>
+ <li>{{glossary('Parse')}}</li>
+ <li>{{glossary('Perceived performance')}}</li>
+ <li>{{glossary('Prefetch')}}</li>
+ <li>{{glossary('Prerender')}}</li>
+ <li>{{glossary('QUIC')}}</li>
+ <li>{{glossary('RAIL')}}</li>
+ <li>{{glossary('Real User Monitoring')}}</li>
+ <li>{{glossary('Resource Timing')}}</li>
+ <li>{{glossary('Round Trip Time (RTT)')}}</li>
+ <li>{{glossary('Server Timing')}}</li>
+ <li>{{glossary('Speculative parsing')}}</li>
+ <li>{{glossary('Speed index')}}</li>
+ <li>{{glossary('SSL')}}</li>
+ <li>{{glossary('Synthetic monitoring')}}</li>
+ <li>{{glossary('TCP handshake')}}</li>
+ <li>{{glossary('TCP slow start')}}</li>
+ <li>{{glossary('Time to first byte')}}</li>
+ <li>{{glossary('Time to interactive')}}</li>
+ <li>{{glossary('TLS')}}</li>
+ <li>{{glossary('TCP', 'Transmission Control Protocol (TCP)')}}</li>
+ <li>{{glossary('Tree shaking')}}</li>
+ <li>{{glossary('Web performance')}}</li>
+</ul>
+</div>
+
+<h2 id="Documents_yet_to_be_written">Documents yet to be written</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Performance/JavaScript">JavaScript performance best practices</a></dt>
+ <dd>JavaScript, when used properly, can allow for interactive and immersive web experiences ... or it can significantly harm download time, render time, in app performance, battery life, and user experience. <span class="veryhardreadability"><span><span>This article outlines some JavaScript best practices that can ensure even complex content's performance is the highest possible.</span></span></span></dd>
+ <dt><a href="/en-US/docs/Learn/Performance/Mobile">Mobile performance</a></dt>
+ <dd>With web access on mobile devices being so popular, and all mobile platforms having fully-fledged web browsers, but possibly limited bandwidth, CPU, and battery life, it is important to consider the performance of your web content on these platforms. This article also looks at mobile-specific performance considerations.</dd>
+ <dt>Web font performance</dt>
+ <dd>An often overlooked aspect of performance landscape are web fonts. Web fonts are more prominent in web design than ever, yet many developers simply embed them from a third party service and think nothing of it. In this article, we'll covers methods for getting your font files as small as possible with efficient file formats and sub setting. From there, we'll go on to talk about how browsers text, and how you can use CSS and JavaScript features to ensure your fonts render quickly, and with minimal disruption to the user experience.</dd>
+ <dt>Performance bottlenecks</dt>
+ <dd></dd>
+ <dt>Understanding bandwidth</dt>
+ <dd>
+ <div>
+ <div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"><span><span>Bandwidth is the amount of data measured in Megabits(Mb) or Kilobits(Kb) that one can send per second. </span></span><span class="veryhardreadability"><span><span>This article explains the role of bandwidth in media-rich internet applications, how you can measure it, and how you can optimize applications to make the best use of available bandwidth</span></span></span><span><span>.</span></span></div>
+ </div>
+ </dd>
+ <dd></dd>
+ <dt>The role of TLS in performance</dt>
+ <dd>
+ <p>TLS—or HTTPS as we tend to call it—is crucial in creating secure and safe user experiences. While hardware has reduced the negative impacts TLS has had on server performance, it still represents a substantial slice of the time we spend waiting for browsers to connect to servers. This article explains the TLS handshake process, and offers some tips for reducing this time, such as OCSP stapling, HSTS preload headers, and the potential role of resource hints in masking TLS latency for third parties.</p>
+ </dd>
+ <dt>Reading performance charts</dt>
+ <dd>Developer tools provide information on performance, memory, and network requests. Knowing how to read <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Waterfall">waterfall</a> charts, <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Call_Tree">call trees</a>, traces, <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Flame_Chart">flame charts</a> , and <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Allocations">allocations</a> in your browser developer tools will help you understand waterfall and flame charts in other performance tools.</dd>
+ <dt>Alternative media formats</dt>
+ <dd>When it comes to images and videos, there are more formats than you're likely aware of. Some of these formats can take your highly optimized media-rich pages even further by offering additional reductions in file size. In this guide we'll discuss some alternative media formats, how to use them responsibly so that non-supporting browsers don't get left out in the cold, and some advanced guidance on transcoding your existing assets to them.</dd>
+ <dt>Analyzing JavaScript bundles</dt>
+ <dd>No doubt, JavaScript is a big part of modern web development. While you should always strive to reduce the amount of JavaScript you use in your applications, it can be difficult to know where to start. <span class="veryhardreadability"><span><span>In this guide, we'll show you how to analyze your application's script bundles, so you know </span></span><em><span>what</span></em><span><span> you're using, as well how to detect if your app contains duplicated scripts between bundles</span></span></span><span><span>.</span></span></dd>
+ <dt><a href="/en-US/docs/Web/Performance/Lazy_loading">Lazy loading</a></dt>
+ <dd>It isn't always necessary to load all of a web applications assets on initial page load. Lazy Loading is deferring the loading of assets on a page, such as scripts, images, etc., on a page to a later point in time i.e when those assets are actually needed.</dd>
+ <dt>Lazy-loading JavaScript with dynamic imports</dt>
+ <dd>When developers hear the term "lazy loading", they immediately think of below-the-fold imagery that loads when it scrolls into the viewport. But did you know you can lazy load JavaScript as well? In this guide we'll talk about the dynamic import() statement, which is a feature in modern browsers that loads a JavaScript module on demand. Of course, since this feature isn't available everywhere, we'll also show you how you can configure your tooling to use this feature in a widely compatible fashion.</dd>
+ <dt><a href="/en-US/docs/Web/Performance/Controlling_resource_delivery_with_resource_hints">Controlling resource delivery with resource hints</a></dt>
+ <dd>Browsers often know better than we do when it comes to resource prioritization and delivery however they're far from clairyovant. Native browser features enable us to hint to the browser when it should connect to another server, or preload a resource before the browser knows it ever needs it. When used judiciously, this can make fast experience seem even faster. In this article, we cover native browser features like rel=preconnect, rel=dns-prefetch, rel=prefetch, and rel=preload, and how to use them to your advantage.</dd>
+ <dt><a href="/en-US/docs/Web/Performance/Performance_budgets">Performance Budgets</a></dt>
+ <dd>Marketing, design, and sales needs, and developer experience, often ad bloat, third-party scripts, and other features that can slow down web performance. To help set priorities, it is helpful to set a performance budget: a set of restrictions to not exceed during the development phase. In this article, we'll discuss creating and sticking to a performance budget. </dd>
+ <dt><a href="/en-US/docs/Web/Performance/Checklist">Web performance checklist</a></dt>
+ <dd>A performance checklist of features to consider when developing applications with links to tutorials on how to implement each feature, include service workers, diagnosing performance problems, font loading best practices, client hints, creating performant animations, etc.</dd>
+ <dt><a href="/en-US/docs/Web/Performance/Mobile_performance_checklist">Mobile performance checklist</a></dt>
+ <dd>A concise checklist of performance considerations impacting mobile network users on hand-held, battery operated devices.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<p>HTML</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Element/picture">The <code>&lt;picture&gt;</code> Element</a></li>
+ <li><a href="/en-US/docs/Web/HTML/Element/video">The <code>&lt;video&gt;</code> Element</a></li>
+ <li><a href="/en-US/docs/Web/HTML/Element/source">The <code>&lt;source&gt;</code> Element</a></li>
+ <li><a href="/en-US/docs/Web/HTML/Element/img#Attributes">The <code>&lt;img&gt; srcset</code> attribute</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Web/HTML/Preloading_content">Preloading content with <code>rel="preload"</code></a> - <a href="https://w3c.github.io/preload/">(https://w3c.github.io/preload/ </a>)</li>
+</ul>
+
+<p>CSS</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/will-change">will-change</a></li>
+ <li>GPU v CPU</li>
+ <li>Measuring layout</li>
+ <li>Font-loading best practices</li>
+</ul>
+
+<p>JavaScript</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Events/DOMContentLoaded">DOMContentLoaded</a></li>
+ <li><a href="/en-US/docs/Glossary/Garbage_collection">Garbage collection</a></li>
+ <li><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame</a></li>
+</ul>
+
+<p>APIs</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Performance_API">Performance API</a></li>
+ <li><a href="/en-US/docs/Web/API/Navigation_timing_API">Navigation Timing API</a></li>
+ <li><a href="/en-US/docs/Web/API/Media_Capabilities_API/Using_the_Media_Capabilities_API">Media Capabilities API</a></li>
+ <li><a href="/en-US/docs/Web/API/Network_Information_API">Network Information API</a></li>
+ <li><a href="/en-US/docs/Web/API/PerformanceNavigationTiming">PerformanceNavigationTiming</a></li>
+ <li><a href="/en-US/docs/Web/API/Battery_Status_API">Battery Status API</a></li>
+ <li><a href="/en-US/docs/Web/API/Navigator/deviceMemory">Navigator.deviceMemory</a></li>
+ <li><a href="/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer</a></li>
+ <li><a href="/en-US/docs/Web/API/User_Timing_API/Using_the_User_Timing_API">Using the User Timing AP</a>I</li>
+ <li><a href="/en-US/docs/Web/API/Long_Tasks_API">Long Tasks API</a></li>
+ <li><a href="/en-US/docs/Web/API/DOMHighResTimeStamp">High Resolution Timing API</a> (<a href="https://w3c.github.io/hr-time/">https://w3c.github.io/hr-time/)</a></li>
+ <li><a href="/en-US/docs/Web/API/Resource_Timing_API/Using_the_Resource_Timing_API">Resource Timing API</a></li>
+ <li><a href="/en-US/docs/Web/API/Page_Visibility_API">Page Visibility</a></li>
+ <li><a href="/en-US/docs/Web/API/Background_Tasks_API">Cooperative Scheduling of Background Tasks API</a>
+  <ul>
+   <li style="margin-top: 0.25em;"><a href="/en-US/docs/Web/API/Window/requestIdleCallback">requestIdleCallback() </a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Web/API/Beacon_API/Using_the_Beacon_API">Beacon API</a></li>
+ <li>Resource Hints - <a href="/en-US/docs/Web/HTTP/Headers/X-DNS-Prefetch-Control">dns-prefetch</a>, preconnect, <a href="/en-US/docs/Web/HTTP/Link_prefetching_FAQ">prefetch</a>, and prerender</li>
+ <li><a href="/en-US/docs/Web/API/FetchEvent/navigationPreload">Fetchevent.navigationPreload</a></li>
+ <li><a href="/en-US/docs/Web/API/PerformanceServerTiming">Performance Server Timing API</a></li>
+</ul>
+
+<p>Headers</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Headers/Content-Encoding">Content-encoding</a></li>
+ <li>HTTP/2</li>
+ <li><a href="/en-US/docs/Glossary/GZip_compression">gZip</a></li>
+ <li>Client Hints</li>
+</ul>
+
+<p>Tools</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Performance">Performance in Firefox Developer Tools</a></li>
+ <li>Flame charts</li>
+ <li>The Network panel</li>
+ <li>Waterfall charts</li>
+</ul>
+
+<p>Additional Metrics</p>
+
+<ul>
+ <li>Speed Index and Perceptual Speed Index</li>
+</ul>
+
+<p>Best Practices</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Using Web Workers</a>
+  <ul>
+   <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers API</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Web/Apps/Progressive/Offline_Service_workers">PWA</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Caching">Caching</a></li>
+ <li>Content Delivery Networks (CDN)</li>
+</ul>
diff --git a/files/de/web/progressive_web_apps/index.html b/files/de/web/progressive_web_apps/index.html
new file mode 100644
index 0000000000..f07a23fc4e
--- /dev/null
+++ b/files/de/web/progressive_web_apps/index.html
@@ -0,0 +1,79 @@
+---
+title: Progressive Web-Apps
+slug: Web/Progressive_web_apps
+translation_of: Web/Progressive_web_apps
+---
+<p class="summary">Progressive Webanwendungen sind einfach Webseiten wie eh und je, nur besser.<strong> In einem modernen Webbrowser zeigen sie ihre Superkräft und werden </strong>…</p>
+
+<div class="column-container">
+<div class="column-1"></div>
+
+<div class="column-3" style="height: 160px;"><img alt="" src="https://mdn.mozillademos.org/files/12654/discoverable.svg" style="float: right; height: 40px; width: 38px;">
+<p style="font-size: 110%;"><a href="/en-US/docs/Web/Apps/Modern/Discoverable"><strong>Auffindbar</strong></a></p>
+
+<p style="width: 70%;">Als Anwendung erkennbar, mit Suchmaschinen auffindbar.</p>
+</div>
+
+<div class="column-3" style="height: 160px;"><img alt="" src="https://mdn.mozillademos.org/files/12656/installable.svg" style="float: right; height: 40px; width: 38px;">
+<p style="font-size: 110%;"><strong><a href="/en-US/docs/Web/Apps/Modern/Installable">Installierbar</a></strong></p>
+
+<p style="width: 70%;">Auf Geräten verfügbar, auf dem Homescreen - ohne die Hürden von App Stores.</p>
+</div>
+
+<div class="column-3" style="height: 160px;"><img alt="" src="https://mdn.mozillademos.org/files/12658/linkable.svg" style="float: right; height: 40px; width: 38px;">
+<p style="font-size: 110%;"><strong><a href="/en-US/docs/Web/Apps/Modern/Linkable">Verlinkbar</a></strong></p>
+
+<p style="width: 70%;">Einfach per URL zu teilen, ohne schwierige Installation.</p>
+</div>
+
+<div class="column-1"></div>
+</div>
+
+<div class="column-container">
+<div class="column-1"></div>
+
+<div class="column-3" style="height: 160px;"><img alt="" src="https://mdn.mozillademos.org/files/12660/network-independent.svg" style="float: right; height: 40px; width: 38px;">
+<p style="font-size: 110%;"><strong><a href="/en-US/docs/Web/Apps/Modern/Network_independent">Netzwerk unabhängig</a></strong></p>
+
+<p style="width: 70%;">Funktioniert offline und bei schlechtem Empfang.</p>
+</div>
+
+<div class="column-3" style="height: 160px;"><img alt="" src="https://mdn.mozillademos.org/files/12662/progressive.svg" style="float: right; height: 40px; width: 38px;">
+<p style="font-size: 110%;"><strong><a href="/en-US/docs/Web/Apps/Modern/Progressive">Progressiv</a></strong></p>
+
+<p style="width: 70%;">Funktioniert für jeden, egal mit welchem Webbrowser.</p>
+</div>
+
+<div class="column-3" style="height: 160px;"><img alt="" src="https://mdn.mozillademos.org/files/12666/re-engageable.svg" style="float: right; height: 40px; width: 38px;">
+<p style="font-size: 110%;"><strong><a href="/en-US/docs/Web/Apps/Modern/Re-engageable">Nutzer bindend</a></strong></p>
+
+<p style="width: 70%;">Macht Nutzerbindung durch Benachrichtigungen einfach, auch wenn der Nutzer gerade nicht hinschaut.</p>
+</div>
+
+<div class="column-1"></div>
+</div>
+
+<div class="column-container">
+<div class="column-1"></div>
+
+<div class="column-3" style="height: 160px;"><img alt="" src="https://mdn.mozillademos.org/files/12650/responsive.svg" style="float: right; height: 40px; width: 38px;">
+<p style="font-size: 110%;"><strong><a href="/en-US/docs/Web/Apps/Modern/Responsive">Responsiv</a></strong></p>
+
+<p style="width: 70%;">Passt auf jeden Bildschirm: Desktop, Handy, Tablet oder was  kommen wird.</p>
+</div>
+
+<div class="column-3" style="height: 160px;"><img alt="" src="https://mdn.mozillademos.org/files/12664/safe.svg" style="float: right; height: 40px; width: 38px;">
+<p style="font-size: 110%;"><strong><a href="/en-US/docs/Web/Apps/Modern/Safe">Sicher</a></strong></p>
+
+<p style="width: 70%;">Sichere Verbindungen verhindern Datendiebstahl und garantieren Integrität.</p>
+</div>
+
+<div class="column-1"></div>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://developers.google.com/web/progressive-web-apps">Progressive Web-Apps</a> bei Google Developers</li>
+ <li class="graf--h3 graf--first" id="4c45"><a href="https://medium.com/@slightlylate/progressive-apps-escaping-tabs-without-losing-our-soul-3b93a8561955#.6czgj0myh">Progressive Web Apps: Escaping Tabs Without Losing Our Soul</a> von Alex Russell</li>
+</ul>
diff --git a/files/de/web/reference/api/index.html b/files/de/web/reference/api/index.html
new file mode 100644
index 0000000000..86e8183c06
--- /dev/null
+++ b/files/de/web/reference/api/index.html
@@ -0,0 +1,63 @@
+---
+title: Web-API-Referenz
+slug: Web/Reference/API
+tags:
+  - API
+  - Referenz
+  - Web
+translation_of: Web/Reference/API
+---
+<p><span class="seoSummary">Das Web bietet eine Vielzahl von APIs, um verschiedene nützliche Aufgaben durchzuführen. Diese können über JavaScript-Code aufgerufen werden, und Sie können alles daran setzen, kleinere Anpassungen an beliebigen {{domxref ( "window")}} oder {{domxref ( "element")}} vorzunehmen, um komplexe grafische und Audioeffekte mithilfe von APIs zu erzeugen wie <a href="/de/docs/Web/WebGL">WebGL</a> und <a href="/de/docs/Web_Audio_API">Web Audio</a>.</span></p>
+
+<p>Eine komplette Liste der Schnittstellen aus allen APIs ist im <a href="/de/docs/Web/API">Index</a> zu finden.</p>
+
+<p>Es gibt auch eine <a href="/de/docs/Web/Events">Liste aller verfügbarer Events</a> in der Event-Referenz.</p>
+
+<div class="cleared topicpage-table">
+<div class="section">
+<dl>
+ <dt><a href="/de/docs/DOM">Document Object Model</a></dt>
+ <dd>Das DOM ist eine Schnittstelle die den Zugriff und die Modifikation des aktuellen Dokuments erlaubt. Es ist möglich {{domxref("Node")}} und {{domxref("Element")}} zu verändern. Es gibt Erweiterungen für HTML, XML und SVG für deren spezifischen Elemente.</dd>
+ <dt>Geräte-APIs</dt>
+ <dd>Diese Gruppe von APIs erlaubt den Zugriff auf unterschiedlichen Hardware-Eigenschaften, die für Webseiten und Web-Anwendungen verfügbar sind, z.B. <a href="/de/docs/WebAPI/Using_Light_Events">Ambient Light Sensor API</a>, <a href="/de/docs/WebAPI/Battery_Status" title="WebAPI/Battery_Status">Battery Status API</a>, <a href="/de/docs/Web/WebAPI/verwenden_von_geolocation" title="Using_geolocation">Geolocation API</a>, <a href="/de/docs/WebAPI/Pointer_Lock" title="API/Pointer_Lock_API">Pointer Lock API</a>, <a href="/de/docs/WebAPI/Proximity" title="WebAPI/Proximity">Proximity API</a>, <a href="/de/docs/WebAPI/Detecting_device_orientation" title="WebAPI/Detecting_device_orientation">Device Orientation API</a>, <a href="/de/docs/WebAPI/Managing_screen_orientation" title="WebAPI/Detecting_device_orientation">Screen Orientation API</a>, <a href="/de/docs/WebAPI/Vibration" title="WebAPI/WebBluetooth">Vibration API</a>.</dd>
+ <dt>Kommunikations-APIs</dt>
+ <dd>Diese APIs erlauben es Webseiten und Web-Anwendungen mit anderen Seiten oder Geräten zu kommunizieren, z.B. <a href="/de/docs/WebAPI/Network_Information" title="WebAPI/Network_Information">Network Information API</a>, <a href="/de/docs/WebAPI/Using_Web_Notifications" title="/en-US/docs/WebAPI/Using_Web_Notifications">Web Notifications</a>, <a href="/de/docs/WebAPI/Simple_Push" title="WebAPI/Push_Notifications">Simple Push API</a>.</dd>
+ <dt id="Data_management_APIs">Daten-Management-APIs</dt>
+ <dd>Das Speichern und Verwalten von Anwendungsdaten ist Aufgabe dieser Gruppe von APIs, z.B. <a href="/de/docs/WebAPI/FileHandle_API" title="WebAPI/FileHandle_API">FileHandle API</a>, <a href="/de/docs/IndexedDB" title="IndexedDB">IndexedDB</a>.</dd>
+</dl>
+
+<p>Zusätzlich zu diesen APIs, die für alle Webseiten verfügbar sind, gibt es noch weitere und mächtigere Mozilla-APIs die nur in privilegierten und zertifizierten Anwendungen verwendet werden können.</p>
+
+<dl>
+ <dt>Privilegierte APIs</dt>
+ <dd>Eine privilegierte Anwendung ist eine installierte Anwendung, die vom Nutzer bestimmte Rechte verliehen bekommen hat. Die privilegierten APIs beinhalten: <a href="/de/docs/WebAPI/TCP_Socket" title="WebAPI/TCP_Socket">TCP Socket API</a>, <a href="/de/docs/WebAPI/Contacts" title="WebAPI/Contacts">Contacts API</a>, <a href="/de/docs/WebAPI/Device_Storage_API" title="WebAPI/Device_Storage_API">Device Storage API</a>, <a href="/de/docs/DOM/Using_the_Browser_API" title="DOM/Using_the_Browser_API">Browser API</a>,</dd>
+ <dt>Zertifizierte APIs</dt>
+ <dd>Eine zertifizierte Anwendung ist eine Low-Level-Anwendung, die kritische Operationen ausführen darf auf Betriebssystemen wie Firefox OS. Weniger privilegierte Anwendungen interagieren mit diesen Applikationen mittlels <a href="/en-US/docs/WebAPI/Web_Activities" title="WebAPI/Web_Activities">Web Activities</a>.  Die zertifzierten APIs beinhalten:<a href="/en-US/docs/WebAPI/WebBluetooth" title="WebAPI/WebBluetooth"> Bluetooth API</a>, <a href="/en-US/docs/WebAPI/Mobile_Connection" title="WebAPI/Mobile_Connection">Mobile Connection API</a>, <a href="/en-US/docs/WebAPI/Network_Stats" title="WebAPI/Network_Stats">Network Stats API</a>, <a href="/en-US/docs/WebAPI/WebTelephony" title="WebAPI/WebTelephony">Telephony</a>, <a href="/en-US/docs/WebAPI/WebSMS" title="WebAPI/WebSMS">WebSMS</a>, <a href="/en-US/docs/WebAPI/WiFi_Information" title="WebAPI/WiFi_Information">WiFi Information API</a>, <a href="/en-US/docs/WebAPI/Camera" title="WebAPI/Camera">Camera API</a>, <a href="/en-US/docs/WebAPI/Power_Management" title="WebAPI/Power_Management">Power Management API</a>, <a href="/en-US/docs/WebAPI/Settings" title="WebAPI/Settings">Settings API</a>, <a href="/en-US/docs/WebAPI/Idle" title="WebAPI/Device_Storage_API">Idle API</a>, <a href="/en-US/docs/WebAPI/Permissions" title="WebAPI/Permissions">Permissions API</a>, <a href="/en-US/docs/WebAPI/Time_and_Clock" title="WebAPI/Time_and_Clock">Time/Clock API</a>.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Community" id="Community">Community</h2>
+
+<p>Nimm an der Web-API-Community teil über unsere Mailingliste oder Newsgroup:</p>
+
+<ul>
+ <li><a class="external" href="https://lists.mozilla.org/listinfo/dev-webapi">über die Mailingliste</a></li>
+ <li><a href="news://news.mozilla.org/mozilla.dev.webapi">über die Newsgroup</a></li>
+ <li><a class="external" href="http://groups.google.com/group/mozilla.dev.webapi">über die Google Group</a></li>
+ <li><a class="external" href="http://groups.google.com/group/mozilla.dev.webapi/feeds">über den Web-Feed</a></li>
+</ul>
+
+<p>Ausserdem gibt es Live-Diskussionen im <a href="irc://irc.mozilla.org/webapi">#webapi</a> Kanal im <a class="external" href="https://wiki.mozilla.org/IRC">IRC</a>.</p>
+
+<h2 class="Related_Topics" id="Verwandte_Themen">Verwandte Themen</h2>
+
+<p>Diese Themen könnten Sie auch interessieren:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API">Index aller Web-API-Schnittstellen</a></li>
+</ul>
+</div>
+</div>
+
+<p> </p>
diff --git a/files/de/web/reference/index.html b/files/de/web/reference/index.html
new file mode 100644
index 0000000000..4aedbf8c0c
--- /dev/null
+++ b/files/de/web/reference/index.html
@@ -0,0 +1,30 @@
+---
+title: Web-Technologie-Referenz
+slug: Web/Reference
+tags:
+  - Landing
+  - NeedsTranslation
+  - Reference
+  - Referenz
+  - Référence(2)
+  - Startseite
+  - TopicStub
+  - Web
+  - Webtechnologie
+translation_of: Web/Reference
+---
+<p>Das offene Web wird durch eine Reihe anderer Technologien geschaffen, die ein angemessenes Stück Know-how erfordern, um sie zu benutzen. Weiter unten findest Du Links zu unserem Referenzmaterial für jede dieser Technologien.</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Web-Kerntechnologien">Web-Kerntechnologien</h2>
+
+<p>{{ Page ("Web", "Web technologies") }}</p>
+</div>
+
+<div class="section">
+<p>{{draft()}}</p>
+
+<p>Diese Seite <a href="/en-US/docs/Project:MDN/Plans_and_status/Web_platform">ist gedacht als</a> Eingangsseite der "Web-Plattform-Referenz"; sie wird Links zu den Eingangsseiten jeder der APIs, die die Web-Plattform enthält, bereitstellen (Sie wird also keine eigenen Unterseiten haben).</p>
+</div>
+</div>
diff --git a/files/de/web/security/certificate_transparency/index.html b/files/de/web/security/certificate_transparency/index.html
new file mode 100644
index 0000000000..14d180f9ea
--- /dev/null
+++ b/files/de/web/security/certificate_transparency/index.html
@@ -0,0 +1,64 @@
+---
+title: Certificate Transparency
+slug: Web/Security/Certificate_Transparency
+tags:
+  - Security
+  - Sicherheit
+  - Web
+  - Zertifikate
+translation_of: Web/Security/Certificate_Transparency
+---
+<p><span class="seoSummary"><strong>Certificate Transparency</strong> (kurz; CT) ist ein offenes Framework, das entwickelt wurde, um vor Zertifikatsfehlausstellungen schützen und diese Überwachung zu können. Neu ausgestellte Zertifikate werden dabei in öffentlich geführten, oft unabhängigen CT-Protokollen "protokolliert". An diese Protokolle werden immer nur neue Datensätze angefügt, die jeweils kryptografisch gesichert sind und die einzelnen ausgestellten TLS-Zertifikate dokumentieren.</span></p>
+
+<p>Auf diese Weise können die Zertifizierungsstellen (CAs) einer viel stärkeren öffentlichen Kontrolle und Aufsicht unterliegen. Potenziell böswillige Zertifikate, z.B. solche, die gegen die <em>Grundanforderungen</em> des CA/B-Forums verstoßen, können viel schneller entdeckt und widerrufen werden. Browser-Hersteller und Root-Store-Betreuer sind auch in der Lage, fundiertere Entscheidungen über problematische CAs zu treffen, denen sie möglicherweise misstrauen.</p>
+
+<h2 id="Hintergrund">Hintergrund</h2>
+
+<p>CT-Protokolle bauen auf dem Fundament der <em>Merkle</em>-<em>Baum</em>-Datenstruktur auf. Die Knoten sind mit den <em>kryptographischen Hashes</em> ihrer Kindknoten gekennzeichnet. Blattknoten enthalten Hashes von tatsächlichen Datenstücken. Die Beschriftung des Wurzelknotens hängt daher von allen anderen Knoten im Baum ab.</p>
+
+<p>Im Zusammenhang mit der Transparenz von Zertifikaten sind die von den Blattknoten gehashten Daten die Zertifikate, die von den verschiedenen heute tätigen CAs ausgestellt wurden. Die Einbeziehung von Zertifikaten kann über einen Audit-Beweis verifiziert werden, der effizient in logarithmischer O(log n)-Zeit generiert und verifiziert werden kann.</p>
+
+<p>Certificate Transparency kam ursprünglich im Jahr 2013 vor dem Hintergrund kompromittierter Zertifizeirungsstellen (DigiNotar breach, 2011), fragwürdiger Entscheidungen (Trustwave subordinate root incident, 2012) und technischer Probleme beim Ausstellen von Zertifikaten (schwache<span class="entry-content">, 512 bit Zertifikate von Digicert Sdn Bhd aus </span>Malaysia).</p>
+
+<h2 id="Implementation">Implementation</h2>
+
+<p>Wenn Zertifikate an ein CT-Protokoll übermittelt werden, wird ein signierter Zertifikat-Zeitstempel (<em>signed certificate timestamp</em>, SCT) erzeugt und zurückgeschickt. Dieser wird dem Protokoll hinzugefügt und dient als Nachweis, dass das Zertifikat eingereicht wurde.</p>
+
+<p>Die Spezifikation besagt, dass konforme Server den TLS-Clients beim Verbindungsaufabeu eine Reihe dieser SCTs zur Verfügung stellen müssen. Dies kann über eine Reihe verschiedener Mechanismen erfolgen:</p>
+
+<ul>
+ <li>X.509v3 certificate extension: signierte SCTs werden direkt in das Zertifikat einbettet</li>
+ <li>Eine TLS-Erweiterung des Typs <code>signed_certificate_timestamp</code> wird während des handshakes gesendet</li>
+ <li>OCSP stapling (über die <code>status_request</code> TLS-Erweiterung) und das Bereitstellen einer <code>SignedCertificateTimestampList</code> mit einem oder mehreren SCTs</li>
+</ul>
+
+<p>Mit der oben genannten X.509 certificate extension entscheidet die Zertifizierungsstelle darüber, welche SCTs eingebunden werden. Dieser Mechanismus kann verwendet werden, ohne eine Anpassung am Webserver vornehmen zu müssen.</p>
+
+<p>Bei den anderen beiden Methoden hingegen müssen die Server aktualisiert werden, um die erforderlichen Daten zu senden. Der Vorteil der Methoden besteht darin, dass der Serverbetreiber die CT-Protokollquellen für die bereitgestellten SCTs selbst auswählen und definieren kann.</p>
+
+<h2 id="Browser_Anforderungen">Browser Anforderungen</h2>
+
+<p>Google Chrome erfordert die Einbeziehung des CT-Protokolls für alle Zertifikatsausgaben mit einem nicht vor dem 30. April 2018 liegenden Datum. Nutzer werden daran gehindert, Websites zu besuchen, die nicht konforme TLS-Zertifikate verwenden. Chrome hatte zuvor die CT-Einbeziehung für <em>Extended Validation</em> (EV) und von Symantec ausgestellte Zertifikate verlangt.</p>
+
+<p>Apple <a href="https://support.apple.com/en-gb/HT205280">verlangt</a> eine unterschiedliche Anzahl von SCTs, damit Safari und andere Server den einzelnen Serverzertifikaten vertrauen können.</p>
+
+<p>Firefox <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1281469">prüft aktuell nicht</a> bzw. erfordert nicht, dass CT-Protokolle verwendet werden, wenn Nutzer die Webseiten besuchen.</p>
+
+<p>Der <a href="/en-US/docs/Web/HTTP/Headers/Expect-CT">Expect-CT header </a>kann verwendet werden, um vom Browser zu verlangen, dass dieser <em>immer</em> die<em> </em>Certificate Transparency erfordert (z.B. in Chrome, selbst wenn das Zertifikat ausgestellt wurde mit einem <em>notBefore Datum</em> vor April).</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td><a class="external external-icon" href="https://tools.ietf.org/html/rfc6962" hreflang="en" lang="en" rel="noopener">Certificate Transparency</a></td>
+   <td><span class="spec-RFC">IETF RFC</span></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/de/web/security/index.html b/files/de/web/security/index.html
new file mode 100644
index 0000000000..0167d156d6
--- /dev/null
+++ b/files/de/web/security/index.html
@@ -0,0 +1,17 @@
+---
+title: Web security
+slug: Web/Security
+tags:
+  - Landing
+  - Security
+  - TopicStub
+  - Web
+translation_of: Web/Security
+---
+<div class="summary">
+<p>Es ist wichtig, dass Ihre Website oder Ihre offene Webanwendung sicher ist. Selbst einfache Fehler in Ihrem Code können dazu führen, dass private Informationen durchsickern und böse Leute sind da draußen versuchen Wege zu finden, diese Daten zu stehlen. Diese Artikel enthalten Informationen, die Ihnen helfen können, Ihren Code zu schützen.</p>
+</div>
+
+<p>{{LandingPageListSubpages}}</p>
+
+<p>{{QuickLinksWithSubpages}}</p>
diff --git a/files/de/web/security/public_key_pinning/index.html b/files/de/web/security/public_key_pinning/index.html
new file mode 100644
index 0000000000..337b9b600e
--- /dev/null
+++ b/files/de/web/security/public_key_pinning/index.html
@@ -0,0 +1,147 @@
+---
+title: HTTP Public Key Pinning (HPKP)
+slug: Web/Security/Public_Key_Pinning
+tags:
+  - Anleitung
+  - HPKP
+  - HTTP
+  - Sicherheit
+  - Webentwicklung
+translation_of: Web/HTTP/Public_Key_Pinning
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary"><span class="seoSummary">Die <strong>Public Key Pinning Erweiterung für HTTP</strong> (</span>{{Glossary("HPKP")}}<span class="seoSummary">) ist ein Sicherheitsfeature, das einem Webclient mitteilt, einen spezifischen kryptographischen Schlüssel mit einem bestimmten Webserver in Verbindung zu bringen um </span>{{Glossary("MITM")}}<span class="seoSummary"> mit gefälschten Zertifikaten zu vermeiden.</span></p>
+
+<p>Um die Echtheit des öffentlichen Schlüssels eines Servers in {{Glossary("TLS")}}-Sessions sicherzustellen, wird dieser in ein X.509-Zertifikat gepackt, welches meistens von einer Zertifizierungsstelle ({{GLossary("CA")}}) signiert wird. Webclients wie Browser vertrauen vielen Zertifizierungsstellen, die Zertifikate für beliebige Domainnamen erstellen können. Wenn ein Angreifer dazu in der Lage ist, eine einzelne Zertifizierungsstelle zu infiltrieren, kann er MITM-Angriffe auf verschiedene TLS-Verbindungen starten. HPKP kann diese Gefahr für das {{Glossary("HTTPS")}}-Protokoll dadurch umgehen, dass dem Client mitgeteilt wird, welcher öffentliche Schlüssel zu einem bestimmten Webserver gehört.</p>
+
+<p>HPKP is ein <em>Trust on First Use</em> ({{Glossary("TOFU")}}) ("Bei der ersten Benutzung vertrauen") Verfahren. Beim ersten Webseitenbesuch übermittelt der Server einen HTTP-Header um dem Client zu zeigen, welche öffentliche Schlüssel zu ihm gehören. Der Client speichert diese Information für eine angegebene Zeit. Wenn der Client die Webseite erneut besucht, erwartet er, dass mindestens ein Zertifikat der Zertifikatkette einen öffentlichen Schlüssel enthält, dessen Fingerprint dem Client bereits per HPKP bekannt ist. Wenn der Server einen unbekannten öffentlichen Schlüssel liefert, sollte der Client einen Fehler anzeigen.</p>
+
+<p class="note">Firefox (und Chrome)<strong> deaktivieren die Pin Validierung</strong> für Pinned Hosts mit Zertifikatketten, die bei einem <strong>benutzerdefinierten trust anchor</strong> terminieren (anstatt bei einem eingebauten trust anchor). Dies bedeutet, dass alle Pinning-Nichteinhaltungen für Nutzer ignoriert werden, welche ein Root-Zertifikat importiert haben.</p>
+
+<h2 id="HPKP_aktivieren">HPKP aktivieren</h2>
+
+<p>Dieses Feature kann einfach aktiviert werden indem ein {{HTTPHeader("Public-Key-Pins")}} HTTP-Header beim Aufruf der Seite über HTTPS zurückgegeben wird:</p>
+
+<pre>Public-Key-Pins: pin-sha256="base64=="; max-age=<em>expireTime</em> [; includeSubdomains][; report-uri="<em>reportURI"</em>]
+</pre>
+
+<dl>
+ <dt><code>pin-sha256</code></dt>
+ <dd>Der Parameter beinhaltet einen Base64 codierten <em>Subject Public Key Information</em> ({{Glossary("SPKI")}}) Fingerprint. Es ist auch möglich mehrere Pins zu verschiedenen öffentlichen Schlüsseln zu definieren. Einige Browser werden hier zukünftig neben SHA-256 evtl. weitere Hash-Algorithmen erlauben. Weiter unten ist beschrieben, wie diese Informationen entweder aus dem Zertifikat oder der Schlüsseldatei extrahiert werden können.</dd>
+ <dt><code>max-age</code></dt>
+ <dd>Die Zeit (in Sekunden) in Sekunden, die ein Browser sich merken soll, dass auf diese Seite nur bei Benutzung eines der öffentlichen Schlüssel zugegriffen werden darf.</dd>
+ <dt><code>includeSubdomains</code> {{ optional_inline() }}</dt>
+ <dd>Wenn dieser optionale Parameter angegeben wird, wird die Regel auch auf alle Subdomains der Site angewandt.</dd>
+ <dt><code>report-uri</code> {{ optional_inline() }}</dt>
+ <dd>Wenn dieser optionale Parameter angegeben wird, werden Pinvalidierungsfehlschläge an die angegebene URL gemeldet.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Anmerkung:</strong> Die aktuelle Spezifikation verlangt die Aufnahme eines zweiten Pins für einen Backup-Schlüssel, der noch nicht in der Produktion verwendet wird. Dies ermöglicht es, den öffentlichen Schlüssel des Servers zu ändern, ohne die Zugänglichkeit für Clients zu beeinträchtigen, die die Pins bereits bemerkt haben. Dies ist z.B. dann wichtig, wenn der alte Schlüssel beschädigt wird.</p>
+</div>
+
+<h3 id="Base64-enkodierte_Public_Key_Informationen_extrahieren">Base64-enkodierte Public Key Informationen extrahieren</h3>
+
+<div class="note">
+<p><strong>Note:</strong> Während das folgende Beispiel zeigt, wie man einen Pin auf ein Serverzertifikat setzt, wird empfohlen, den Pin auf das Zwischenzertifikat der CA zu setzen, die das Serverzertifikat ausgestellt hat, um Verlängerungen und Rotationen von Zertifikaten zu erleichtern.</p>
+</div>
+
+<p>First you need to extract the public key information from your certificate or key file and encode them using Base64.</p>
+
+<p>The following commands will help you extract the Base64 encoded information from a key file, a certificate signing request, or a certificate.</p>
+
+<pre><code>openssl rsa -in my-key-file.key -outform der -pubout | openssl dgst -sha256 -binary | </code>openssl enc -base64</pre>
+
+<pre><code>openssl req -in my-signing-request.csr -pubkey -noout | openssl rsa -pubin -outform der | openssl dgst -sha256 -binary | openssl enc -base64</code></pre>
+
+<pre><code>openssl x509 -in my-certificate.crt -pubkey -noout | openssl rsa -pubin -outform der | openssl dgst -sha256 -binary | openssl enc -base64</code></pre>
+
+<p>The following command will extract the Base64 encoded information for a website.</p>
+
+<pre><code>openssl s_client -connect www.example.com:443 | openssl x509 -pubkey -noout | openssl rsa -pubin -outform der | openssl dgst -sha256 -binary | openssl enc -base64</code></pre>
+
+<h3 id="Beispiel_für_ein_HPKP-Header">Beispiel für ein HPKP-Header</h3>
+
+<pre>Public-Key-Pins: pin-sha256="cUPcTAZWKaASuYWhhneDttWpY3oBAkE3h2+soZS7sWs="; pin-sha256="M8HztCzM3elUxkcjR2S5P4hhyBNf6lHkmjAHKhpGPWE="; max-age=5184000; includeSubdomains; report-uri="<em>https://www.example.net/hpkp-report"</em></pre>
+
+<p>In this example, <strong>pin-sha256="cUPcTAZWKaASuYWhhneDttWpY3oBAkE3h2+soZS7sWs="</strong> pins the server's public key used in production. The second pin declaration <strong>pin-sha256="M8HztCzM3elUxkcjR2S5P4hhyBNf6lHkmjAHKhpGPWE="</strong> also pins the backup key. <strong>max-age=5184000</strong> tells the client to store this information for two month, which is a reasonable time limit according to the IETF RFC. This key pinning is also valid for all subdomains, which is told by the <strong>includeSubdomains</strong> declaration. Finally, <strong>report-uri="https://www.example.net/hpkp-report"</strong> explains where to report pin validation failures.</p>
+
+<h3 id="Setting_up_your_webserver_to_include_the_HPKP_header">Setting up your webserver to include the HPKP header</h3>
+
+<p>The concrete steps necessary to deliver the HPKP header depend on the web server you use.</p>
+
+<div class="note">
+<p><strong>Note:</strong> These examples use a max-age of two months and include all subdomains. It is advised to verify that this setup will work for your server.</p>
+</div>
+
+<div class="warning">
+<p id="HPKP_hat_das_Potential_Nutzer_für_eine_lange_Zeit_auszusperren_wenn_es_inkorrekt_genutzt_wird!_Die_Benutzung_von_Backup-Zertifikaten_undoder_das_Pinnen_der_Zertifizierungsstelle_wird_dringend_empfohlen.">HPKP hat das Potential Nutzer für eine lange Zeit auszusperren, wenn es inkorrekt genutzt wird! Die Benutzung von Backup-Zertifikaten und/oder das Pinnen der Zertifizierungsstelle wird dringend empfohlen.</p>
+</div>
+
+<h4 id="Apache">Apache</h4>
+
+<p>HPKP kann im Apache Webserver beispielsweise mit der folgenden Konfiguration aktiviert werden. Die Parameter müssen dann nur noch auf das Zielsystem angepasst werden. Das Apache Modul <code>mod_headers</code> wird benötigt.</p>
+
+<pre>Header always set Public-Key-Pins "pin-sha256=\"base64+primary==\"; pin-sha256=\"base64+backup==\"; max-age=5184000; includeSubDomains"
+</pre>
+
+<h4 id="Nginx">Nginx</h4>
+
+<p>Adding the following line and inserting the appropriate <code>pin-sha256="..."</code> values will enable HPKP on your nginx. This requires the <code>ngx_http_headers_module.</code></p>
+
+<pre>add_header Public-Key-Pins 'pin-sha256="base64+primary=="; pin-sha256="base64+backup=="; max-age=5184000; includeSubDomains';</pre>
+
+<h4 id="Lighttpd">Lighttpd</h4>
+
+<p>The following line with your relevant key information (pin-sha256="..." fields) will enable HPKP on lighttpd.</p>
+
+<pre>setenv.add-response-header  = ( "Public-Key-Pins" =&gt; "pin-sha256=\"base64+primary==\"; pin-sha256=\"base64+backup==\"; max-age=5184000; includeSubDomains")</pre>
+
+<p><strong>Note:</strong> This requires the <code>mod_setenv</code> server.module loaded which can be included by the following if not already loaded.</p>
+
+<pre><code>server.modules += ( "mod_setenv" )</code></pre>
+
+<h4 id="IIS">IIS</h4>
+
+<p>Add the following line to the Web.config file to send the <code>Public-Key-Pins</code> header:</p>
+
+<pre class="brush: xml line-numbers  language-xml"><code class="language-xml">&lt;system.webServer&gt;
+  ...
+
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>httpProtocol</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>customHeaders</span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>add</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Public-Key-Pins<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pin-sha256<span class="punctuation token">=</span>&amp;quot;base64+primary<span class="punctuation token">=</span><span class="punctuation token">=</span>&amp;quot;; pin-sha256<span class="punctuation token">=</span>&amp;quot;base64+backup<span class="punctuation token">=</span><span class="punctuation token">=</span>&amp;quot;; max-age<span class="punctuation token">=</span>5184000; includeSubDomains<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>customHeaders</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>httpProtocol</span><span class="punctuation token">&gt;</span></span>
+
+  ...
+&lt;/system.webServer&gt;</code></pre>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">Die Kompatibilitätstabelle wird von strukturierten Daten generiert. Wenn Du zu diesen beitragen willst checke <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> aus und sende uns einen Pull Request.</p>
+
+<p>{{Compat("http.headers.Public-Key-Pins")}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Titel</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7469", "Public-Key-Pins", "2.1")}}</td>
+   <td>Public Key Pinning Erweiterung für HTTP</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{HTTPHeader("Public-Key-Pins")}}</li>
+ <li>{{HTTPHeader("Public-Key-Pins-Report-Only")}}</li>
+</ul>
diff --git a/files/de/web/svg/attribute/class/index.html b/files/de/web/svg/attribute/class/index.html
new file mode 100644
index 0000000000..919b06605c
--- /dev/null
+++ b/files/de/web/svg/attribute/class/index.html
@@ -0,0 +1,189 @@
+---
+title: class
+slug: Web/SVG/Attribute/class
+translation_of: Web/SVG/Attribute/class
+---
+<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Eigenschaft Referenz</a></p>
+
+<p>Weist einen Klassennamen oder eine Reihe von Klassennamen einem Element zu. Sie können den Klassennamen mehrfach einem Element zuweisen, oder auch zu mehreren Elementen zuweisen. Jedoch müssen Klassennamen mit einem Leerzeichen getrennt sein.</p>
+
+<p>Der Klassenname eines Elements hat zwei Schlüsselfunktionen:</p>
+
+<ul>
+ <li>Als Stil-Selektor, wenn ein Autor einen Satz von Elementen Stil-Informationen zuweist.</li>
+ <li>Als generelle Funktion für den Browser.</li>
+</ul>
+
+<p>Sie können die Klasse verwenden um SVG mithilfe von CSS zu formatieren.</p>
+
+<h2 id="Nutzungskontext">Nutzungskontext</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Kategorien</th>
+   <td>Keine</td>
+  </tr>
+  <tr>
+   <th scope="row">Wert</th>
+   <td><a href="/en/SVG/Content_type#List-of-Ts" title="en/SVG/Content type#List-of-Ts">&lt;liste-von-klassen-namen&gt;</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Animierbar</th>
+   <td>Ja</td>
+  </tr>
+  <tr>
+   <th scope="row">Normatives Dokument</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG/styling.html#ClassAttribute" title="http://www.w3.org/TR/SVG/styling.html#ClassAttribute">SVG 1.1 (2nd Edition): The class attribute</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{ page("/en/SVG/Content_type","List-of-Ts") }}</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: html">&lt;html&gt;
+    &lt;body&gt;
+        &lt;svg width="120" height="220"
+            viewPort="0 0 120 120" version="1.1"
+            xmlns="http://www.w3.org/2000/svg"&gt;
+
+            &lt;style type="text/css" &gt;
+                &lt;![CDATA[
+                    rect.rectClass {
+                        stroke: #000066;
+                        fill:   #00cc00;
+                    }
+                    circle.circleClass {
+                        stroke: #006600;
+                        fill:   #cc0000;
+                    }
+                ]]&gt;
+            &lt;/style&gt;
+
+            &lt;rect class="rectClass" x="10" y="10" width="100" height="100"/&gt;
+            &lt;circle  class="circleClass"   cx="40" cy="50" r="26"/&gt;
+        &lt;/svg&gt;
+    &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Elemente">Elemente</h2>
+
+<p>Die folgenden ELemente können das <code>class</code> Attribut verwenden:</p>
+
+<div class="threecolumns">
+<ul>
+ <li>{{ SVGElement("a") }}</li>
+ <li>{{ SVGElement("altGlyph") }}</li>
+ <li>{{ SVGElement("circle") }}</li>
+ <li>{{ SVGElement("clipPath") }}</li>
+ <li>{{ SVGElement("defs") }}</li>
+ <li>{{ SVGElement("desc") }}</li>
+ <li>{{ SVGElement("ellipse") }}</li>
+ <li>{{ SVGElement("feBlend") }}</li>
+ <li>{{ SVGElement("feColorMatrix") }}</li>
+ <li>{{ SVGElement("feComponentTransfer") }}</li>
+ <li>{{ SVGElement("feComposite") }}</li>
+ <li>{{ SVGElement("feConvolveMatrix") }}</li>
+ <li>{{ SVGElement("feDiffuseLighting") }}</li>
+ <li>{{ SVGElement("feDisplacementMap") }}</li>
+ <li>{{ SVGElement("feFlood") }}</li>
+ <li>{{ SVGElement("feGaussianBlur") }}</li>
+ <li>{{ SVGElement("feImage") }}</li>
+ <li>{{ SVGElement("feMerge") }}</li>
+ <li>{{ SVGElement("feMorphology") }}</li>
+ <li>{{ SVGElement("feOffset") }}</li>
+ <li>{{ SVGElement("feSpecularLighting") }}</li>
+ <li>{{ SVGElement("feTile") }}</li>
+ <li>{{ SVGElement("feTurbulence") }}</li>
+ <li>{{ SVGElement("filter") }}</li>
+ <li>{{ SVGElement("font") }}</li>
+ <li>{{ SVGElement("foreignObject") }}</li>
+ <li>{{ SVGElement("g") }}</li>
+ <li>{{ SVGElement("glyph") }}</li>
+ <li>{{ SVGElement("glyphRef") }}</li>
+ <li>{{ SVGElement("image") }}</li>
+ <li>{{ SVGElement("line") }}</li>
+ <li>{{ SVGElement("linearGradient") }}</li>
+ <li>{{ SVGElement("marker") }}</li>
+ <li>{{ SVGElement("mask") }}</li>
+ <li>{{ SVGElement("missing-glyph") }}</li>
+ <li>{{ SVGElement("path") }}</li>
+ <li>{{ SVGElement("pattern") }}</li>
+ <li>{{ SVGElement("polygon") }}</li>
+ <li>{{ SVGElement("polyline") }}</li>
+ <li>{{ SVGElement("radialGradient") }}</li>
+ <li>{{ SVGElement("rect") }}</li>
+ <li>{{ SVGElement("stop") }}</li>
+ <li>{{ SVGElement("svg") }}</li>
+ <li>{{ SVGElement("switch") }}</li>
+ <li>{{ SVGElement("symbol") }}</li>
+ <li>{{ SVGElement("text") }}</li>
+ <li>{{ SVGElement("textPath") }}</li>
+ <li>{{ SVGElement("title") }}</li>
+ <li>{{ SVGElement("tref") }}</li>
+ <li>{{ SVGElement("tspan") }}</li>
+ <li>{{ SVGElement("use") }}</li>
+</ul>
+</div>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Animation support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("5") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/de/web/svg/attribute/index.html b/files/de/web/svg/attribute/index.html
new file mode 100644
index 0000000000..ddda2e93cb
--- /dev/null
+++ b/files/de/web/svg/attribute/index.html
@@ -0,0 +1,467 @@
+---
+title: SVG Attribute reference
+slug: Web/SVG/Attribute
+tags:
+  - NeedsHelp
+  - NeedsTranslation
+  - SVG
+  - SVG Attribute
+  - SVG Reference
+  - TopicStub
+translation_of: Web/SVG/Attribute
+---
+<p>« <a href="/en/SVG" title="en/SVG">SVG</a> / <a href="/en/SVG/Element" title="en/SVG/Element">SVG Element reference</a> »</p>
+
+<h2 id="SVG_Attributes">SVG Attributes</h2>
+
+<div style="-moz-column-width: 14em; -webkit-columns: 14em; columns: 14em;">
+<h3 id="A">A</h3>
+
+<ul>
+ <li>{{ SVGAttr("accent-height") }}</li>
+ <li>{{ SVGAttr("accumulate") }}</li>
+ <li>{{ SVGAttr("additive") }}</li>
+ <li>{{ SVGAttr("alignment-baseline") }}</li>
+ <li>{{ SVGAttr("allowReorder") }}</li>
+ <li>{{ SVGAttr("alphabetic") }}</li>
+ <li>{{ SVGAttr("amplitude") }}</li>
+ <li>{{ SVGAttr("arabic-form") }}</li>
+ <li>{{ SVGAttr("ascent") }}</li>
+ <li>{{ SVGAttr("attributeName") }}</li>
+ <li>{{ SVGAttr("attributeType") }}</li>
+ <li>{{ SVGAttr("autoReverse") }}</li>
+ <li>{{ SVGAttr("azimuth") }}</li>
+</ul>
+
+<h3 id="B">B</h3>
+
+<ul>
+ <li>{{ SVGAttr("baseFrequency") }}</li>
+ <li>{{ SVGAttr("baseline-shift") }}</li>
+ <li>{{ SVGAttr("baseProfile") }}</li>
+ <li>{{ SVGAttr("bbox") }}</li>
+ <li>{{ SVGAttr("begin") }}</li>
+ <li>{{ SVGAttr("bias") }}</li>
+ <li>{{ SVGAttr("by") }}</li>
+</ul>
+
+<h3 id="C">C</h3>
+
+<ul>
+ <li>{{ SVGAttr("calcMode") }}</li>
+ <li>{{ SVGAttr("cap-height") }}</li>
+ <li>{{ SVGAttr("class") }}</li>
+ <li>{{ SVGAttr("clip") }}</li>
+ <li>{{ SVGAttr("clipPathUnits") }}</li>
+ <li>{{ SVGAttr("clip-path") }}</li>
+ <li>{{ SVGAttr("clip-rule") }}</li>
+ <li>{{ SVGAttr("color") }}</li>
+ <li>{{ SVGAttr("color-interpolation") }}</li>
+ <li>{{ SVGAttr("color-interpolation-filters") }}</li>
+ <li>{{ SVGAttr("color-profile") }}</li>
+ <li>{{ SVGAttr("color-rendering") }}</li>
+ <li>{{ SVGAttr("contentScriptType") }}</li>
+ <li>{{ SVGAttr("contentStyleType") }}</li>
+ <li>{{ SVGAttr("cursor") }}</li>
+ <li>{{ SVGAttr("cx") }}</li>
+ <li>{{ SVGAttr("cy") }}</li>
+</ul>
+
+<h3 id="D">D</h3>
+
+<ul>
+ <li>{{ SVGAttr("d") }}</li>
+ <li>{{ SVGAttr("decelerate") }}</li>
+ <li>{{ SVGAttr("descent") }}</li>
+ <li>{{ SVGAttr("diffuseConstant") }}</li>
+ <li>{{ SVGAttr("direction") }}</li>
+ <li>{{ SVGAttr("display") }}</li>
+ <li>{{ SVGAttr("divisor") }}</li>
+ <li>{{ SVGAttr("dominant-baseline") }}</li>
+ <li>{{ SVGAttr("dur") }}</li>
+ <li>{{ SVGAttr("dx") }}</li>
+ <li>{{ SVGAttr("dy") }}</li>
+</ul>
+
+<h3 id="E">E</h3>
+
+<ul>
+ <li>{{ SVGAttr("edgeMode") }}</li>
+ <li>{{ SVGAttr("elevation") }}</li>
+ <li>{{ SVGAttr("enable-background") }}</li>
+ <li>{{ SVGAttr("end") }}</li>
+ <li>{{ SVGAttr("exponent") }}</li>
+ <li>{{ SVGAttr("externalResourcesRequired") }}</li>
+</ul>
+
+<h3 id="F">F</h3>
+
+<ul>
+ <li>{{ SVGAttr("fill") }}</li>
+ <li>{{ SVGAttr("fill-opacity") }}</li>
+ <li>{{ SVGAttr("fill-rule") }}</li>
+ <li>{{ SVGAttr("filter") }}</li>
+ <li>{{ SVGAttr("filterRes") }}</li>
+ <li>{{ SVGAttr("filterUnits") }}</li>
+ <li>{{ SVGAttr("flood-color") }}</li>
+ <li>{{ SVGAttr("flood-opacity") }}</li>
+ <li>{{ SVGAttr("font-family") }}</li>
+ <li>{{ SVGAttr("font-size") }}</li>
+ <li>{{ SVGAttr("font-size-adjust") }}</li>
+ <li>{{ SVGAttr("font-stretch") }}</li>
+ <li>{{ SVGAttr("font-style") }}</li>
+ <li>{{ SVGAttr("font-variant") }}</li>
+ <li>{{ SVGAttr("font-weight") }}</li>
+ <li>{{ SVGAttr("format") }}</li>
+ <li>{{ SVGAttr("from") }}</li>
+ <li>{{ SVGAttr("fx") }}</li>
+ <li>{{ SVGAttr("fy") }}</li>
+</ul>
+
+<h3 id="G">G</h3>
+
+<ul>
+ <li>{{ SVGAttr("g1") }}</li>
+ <li>{{ SVGAttr("g2") }}</li>
+ <li>{{ SVGAttr("glyph-name") }}</li>
+ <li>{{ SVGAttr("glyph-orientation-horizontal") }}</li>
+ <li>{{ SVGAttr("glyph-orientation-vertical") }}</li>
+ <li>{{ SVGAttr("glyphRef") }}</li>
+ <li>{{ SVGAttr("gradientTransform") }}</li>
+ <li>{{ SVGAttr("gradientUnits") }}</li>
+</ul>
+
+<h3 id="H">H</h3>
+
+<ul>
+ <li>{{ SVGAttr("hanging") }}</li>
+ <li>{{ SVGAttr("height") }}</li>
+ <li>{{ SVGAttr("href") }}</li>
+ <li>{{ SVGAttr("horiz-adv-x") }}</li>
+ <li>{{ SVGAttr("horiz-origin-x") }}</li>
+</ul>
+
+<h3 id="I">I</h3>
+
+<ul>
+ <li>{{ SVGAttr("id") }}</li>
+ <li>{{ SVGAttr("ideographic") }}</li>
+ <li>{{ SVGAttr("image-rendering") }}</li>
+ <li>{{ SVGAttr("in") }}</li>
+ <li>{{ SVGAttr("in2") }}</li>
+ <li>{{ SVGAttr("intercept") }}</li>
+</ul>
+
+<h3 id="K">K</h3>
+
+<ul>
+ <li>{{ SVGAttr("k") }}</li>
+ <li>{{ SVGAttr("k1") }}</li>
+ <li>{{ SVGAttr("k2") }}</li>
+ <li>{{ SVGAttr("k3") }}</li>
+ <li>{{ SVGAttr("k4") }}</li>
+ <li>{{ SVGAttr("kernelMatrix") }}</li>
+ <li>{{ SVGAttr("kernelUnitLength") }}</li>
+ <li>{{ SVGAttr("kerning") }}</li>
+ <li>{{ SVGAttr("keyPoints") }}</li>
+ <li>{{ SVGAttr("keySplines") }}</li>
+ <li>{{ SVGAttr("keyTimes") }}</li>
+</ul>
+
+<h3 id="L">L</h3>
+
+<ul>
+ <li>{{ SVGAttr("lang") }}</li>
+ <li>{{ SVGAttr("lengthAdjust") }}</li>
+ <li>{{ SVGAttr("letter-spacing") }}</li>
+ <li>{{ SVGAttr("lighting-color") }}</li>
+ <li>{{ SVGAttr("limitingConeAngle") }}</li>
+ <li>{{ SVGAttr("local") }}</li>
+</ul>
+
+<h3 id="M">M</h3>
+
+<ul>
+ <li>{{ SVGAttr("marker-end") }}</li>
+ <li>{{ SVGAttr("marker-mid") }}</li>
+ <li>{{ SVGAttr("marker-start") }}</li>
+ <li>{{ SVGAttr("markerHeight") }}</li>
+ <li>{{ SVGAttr("markerUnits") }}</li>
+ <li>{{ SVGAttr("markerWidth") }}</li>
+ <li>{{ SVGAttr("mask") }}</li>
+ <li>{{ SVGAttr("maskContentUnits") }}</li>
+ <li>{{ SVGAttr("maskUnits") }}</li>
+ <li>{{ SVGAttr("mathematical") }}</li>
+ <li>{{ SVGAttr("max") }}</li>
+ <li>{{ SVGAttr("media") }}</li>
+ <li>{{ SVGAttr("method") }}</li>
+ <li>{{ SVGAttr("min") }}</li>
+ <li>{{ SVGAttr("mode") }}</li>
+</ul>
+
+<h3 id="N">N</h3>
+
+<ul>
+ <li>{{ SVGAttr("name") }}</li>
+ <li>{{ SVGAttr("numOctaves") }}</li>
+</ul>
+
+<h3 id="O">O</h3>
+
+<ul>
+ <li>{{ SVGAttr("offset") }}</li>
+ <li>{{ SVGAttr("onabort") }}</li>
+ <li>{{ SVGAttr("onactivate") }}</li>
+ <li>{{ SVGAttr("onbegin") }}</li>
+ <li>{{ SVGAttr("onclick") }}</li>
+ <li>{{ SVGAttr("onend") }}</li>
+ <li>{{ SVGAttr("onerror") }}</li>
+ <li>{{ SVGAttr("onfocusin") }}</li>
+ <li>{{ SVGAttr("onfocusout") }}</li>
+ <li>{{ SVGAttr("onload") }}</li>
+ <li>{{ SVGAttr("onmousedown") }}</li>
+ <li>{{ SVGAttr("onmousemove") }}</li>
+ <li>{{ SVGAttr("onmouseout") }}</li>
+ <li>{{ SVGAttr("onmouseover") }}</li>
+ <li>{{ SVGAttr("onmouseup") }}</li>
+ <li>{{ SVGAttr("onrepeat") }}</li>
+ <li>{{ SVGAttr("onresize") }}</li>
+ <li>{{ SVGAttr("onscroll") }}</li>
+ <li>{{ SVGAttr("onunload") }}</li>
+ <li>{{ SVGAttr("onzoom") }}</li>
+ <li>{{ SVGAttr("opacity") }}</li>
+ <li>{{ SVGAttr("operator") }}</li>
+ <li>{{ SVGAttr("order") }}</li>
+ <li>{{ SVGAttr("orient") }}</li>
+ <li>{{ SVGAttr("orientation") }}</li>
+ <li>{{ SVGAttr("origin") }}</li>
+ <li>{{ SVGAttr("overflow") }}</li>
+ <li>{{ SVGAttr("overline-position") }}</li>
+ <li>{{ SVGAttr("overline-thickness") }}</li>
+</ul>
+
+<h3 id="P">P</h3>
+
+<ul>
+ <li>{{ SVGAttr("panose-1") }}</li>
+ <li>{{ SVGAttr("paint-order") }}</li>
+ <li>{{ SVGAttr("pathLength") }}</li>
+ <li>{{ SVGAttr("patternContentUnits") }}</li>
+ <li>{{ SVGAttr("patternTransform") }}</li>
+ <li>{{ SVGAttr("patternUnits") }}</li>
+ <li>{{ SVGAttr("pointer-events") }}</li>
+ <li>{{ SVGAttr("points") }}</li>
+ <li>{{ SVGAttr("pointsAtX") }}</li>
+ <li>{{ SVGAttr("pointsAtY") }}</li>
+ <li>{{ SVGAttr("pointsAtZ") }}</li>
+ <li>{{ SVGAttr("preserveAlpha") }}</li>
+ <li>{{ SVGAttr("preserveAspectRatio") }}</li>
+ <li>{{ SVGAttr("primitiveUnits") }}</li>
+</ul>
+
+<h3 id="R">R</h3>
+
+<ul>
+ <li>{{ SVGAttr("r") }}</li>
+ <li>{{ SVGAttr("radius") }}</li>
+ <li>{{ SVGAttr("refX") }}</li>
+ <li>{{ SVGAttr("refY") }}</li>
+ <li>{{ SVGAttr("rendering-intent") }}</li>
+ <li>{{ SVGAttr("repeatCount") }}</li>
+ <li>{{ SVGAttr("repeatDur") }}</li>
+ <li>{{ SVGAttr("requiredExtensions") }}</li>
+ <li>{{ SVGAttr("requiredFeatures") }}</li>
+ <li>{{ SVGAttr("restart") }}</li>
+ <li>{{ SVGAttr("result") }}</li>
+ <li>{{ SVGAttr("rotate") }}</li>
+ <li>{{ SVGAttr("rx") }}</li>
+ <li>{{ SVGAttr("ry") }}</li>
+</ul>
+
+<h3 id="S">S</h3>
+
+<ul>
+ <li>{{ SVGAttr("scale") }}</li>
+ <li>{{ SVGAttr("seed") }}</li>
+ <li>{{ SVGAttr("shape-rendering") }}</li>
+ <li>{{ SVGAttr("slope") }}</li>
+ <li>{{ SVGAttr("spacing") }}</li>
+ <li>{{ SVGAttr("specularConstant") }}</li>
+ <li>{{ SVGAttr("specularExponent") }}</li>
+ <li>{{ SVGAttr("speed") }}</li>
+ <li>{{ SVGAttr("spreadMethod") }}</li>
+ <li>{{ SVGAttr("startOffset") }}</li>
+ <li>{{ SVGAttr("stdDeviation") }}</li>
+ <li>{{ SVGAttr("stemh") }}</li>
+ <li>{{ SVGAttr("stemv") }}</li>
+ <li>{{ SVGAttr("stitchTiles") }}</li>
+ <li>{{ SVGAttr("stop-color") }}</li>
+ <li>{{ SVGAttr("stop-opacity") }}</li>
+ <li>{{ SVGAttr("strikethrough-position") }}</li>
+ <li>{{ SVGAttr("strikethrough-thickness") }}</li>
+ <li>{{ SVGAttr("string") }}</li>
+ <li>{{ SVGAttr("stroke") }}</li>
+ <li>{{ SVGAttr("stroke-dasharray") }}</li>
+ <li>{{ SVGAttr("stroke-dashoffset") }}</li>
+ <li>{{ SVGAttr("stroke-linecap") }}</li>
+ <li>{{ SVGAttr("stroke-linejoin") }}</li>
+ <li>{{ SVGAttr("stroke-miterlimit") }}</li>
+ <li>{{ SVGAttr("stroke-opacity") }}</li>
+ <li>{{ SVGAttr("stroke-width") }}</li>
+ <li>{{ SVGAttr("style") }}</li>
+ <li>{{ SVGAttr("surfaceScale") }}</li>
+ <li>{{ SVGAttr("systemLanguage") }}</li>
+</ul>
+
+<h3 id="T">T</h3>
+
+<ul>
+ <li>{{ SVGAttr("tabindex") }}</li>
+ <li>{{ SVGAttr("tableValues") }}</li>
+ <li>{{ SVGAttr("target") }}</li>
+ <li>{{ SVGAttr("targetX") }}</li>
+ <li>{{ SVGAttr("targetY") }}</li>
+ <li>{{ SVGAttr("text-anchor") }}</li>
+ <li>{{ SVGAttr("text-decoration") }}</li>
+ <li>{{ SVGAttr("text-rendering") }}</li>
+ <li>{{ SVGAttr("textLength") }}</li>
+ <li>{{ SVGAttr("to") }}</li>
+ <li>{{ SVGAttr("transform") }}</li>
+ <li>{{ SVGAttr("type") }}</li>
+</ul>
+
+<h3 id="U">U</h3>
+
+<ul>
+ <li>{{ SVGAttr("u1") }}</li>
+ <li>{{ SVGAttr("u2") }}</li>
+ <li>{{ SVGAttr("underline-position") }}</li>
+ <li>{{ SVGAttr("underline-thickness") }}</li>
+ <li>{{ SVGAttr("unicode") }}</li>
+ <li>{{ SVGAttr("unicode-bidi") }}</li>
+ <li>{{ SVGAttr("unicode-range") }}</li>
+ <li>{{ SVGAttr("units-per-em") }}</li>
+</ul>
+
+<h3 id="V">V</h3>
+
+<ul>
+ <li>{{ SVGAttr("v-alphabetic") }}</li>
+ <li>{{ SVGAttr("v-hanging") }}</li>
+ <li>{{ SVGAttr("v-ideographic") }}</li>
+ <li>{{ SVGAttr("v-mathematical") }}</li>
+ <li>{{ SVGAttr("values") }}</li>
+ <li>{{ SVGAttr("version") }}</li>
+ <li>{{ SVGAttr("vert-adv-y") }}</li>
+ <li>{{ SVGAttr("vert-origin-x") }}</li>
+ <li>{{ SVGAttr("vert-origin-y") }}</li>
+ <li>{{ SVGAttr("viewBox") }}</li>
+ <li>{{ SVGAttr("viewTarget") }}</li>
+ <li>{{ SVGAttr("visibility") }}</li>
+</ul>
+
+<h3 id="W">W</h3>
+
+<ul>
+ <li>{{ SVGAttr("width") }}</li>
+ <li>{{ SVGAttr("widths") }}</li>
+ <li>{{ SVGAttr("word-spacing") }}</li>
+ <li>{{ SVGAttr("writing-mode") }}</li>
+</ul>
+
+<h3 id="X">X</h3>
+
+<ul>
+ <li>{{ SVGAttr("x") }}</li>
+ <li>{{ SVGAttr("x-height") }}</li>
+ <li>{{ SVGAttr("x1") }}</li>
+ <li>{{ SVGAttr("x2") }}</li>
+ <li>{{ SVGAttr("xChannelSelector") }}</li>
+ <li>{{ SVGAttr("xlink:actuate") }}</li>
+ <li>{{ SVGAttr("xlink:arcrole") }}</li>
+ <li>{{ SVGAttr("xlink:href") }}</li>
+ <li>{{ SVGAttr("xlink:role") }}</li>
+ <li>{{ SVGAttr("xlink:show") }}</li>
+ <li>{{ SVGAttr("xlink:title") }}</li>
+ <li>{{ SVGAttr("xlink:type") }}</li>
+ <li>{{ SVGAttr("xml:base") }}</li>
+ <li>{{ SVGAttr("xml:lang") }}</li>
+ <li>{{ SVGAttr("xml:space") }}</li>
+</ul>
+
+<h3 id="Y">Y</h3>
+
+<ul>
+ <li>{{ SVGAttr("y") }}</li>
+ <li>{{ SVGAttr("y1") }}</li>
+ <li>{{ SVGAttr("y2") }}</li>
+ <li>{{ SVGAttr("yChannelSelector") }}</li>
+</ul>
+
+<h3 id="Z">Z</h3>
+
+<ul>
+ <li>{{ SVGAttr("z") }}</li>
+ <li>{{ SVGAttr("zoomAndPan") }}</li>
+</ul>
+</div>
+
+<h2 id="Categories">Categories</h2>
+
+<h3 id="Animation_event_attributes">Animation event attributes</h3>
+
+<p>{{ SVGAttr("onbegin") }}, {{ SVGAttr("onend") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onrepeat") }}</p>
+
+<h3 id="Animation_attribute_target_attributes">Animation attribute target attributes</h3>
+
+<p>{{ SVGAttr("attributeType") }}, {{ SVGAttr("attributeName") }}</p>
+
+<h3 id="Animation_timing_attributes">Animation timing attributes</h3>
+
+<p>{{ SVGAttr("begin") }}, {{ SVGAttr("dur") }}, {{ SVGAttr("end") }}, {{ SVGAttr("min") }}, {{ SVGAttr("max") }}, {{ SVGAttr("restart") }}, {{ SVGAttr("repeatCount") }}, {{ SVGAttr("repeatDur") }}, {{ SVGAttr("fill") }}</p>
+
+<h3 id="Animation_value_attributes">Animation value attributes</h3>
+
+<p>{{ SVGAttr("calcMode") }}, {{ SVGAttr("values") }}, {{ SVGAttr("keyTimes") }}, {{ SVGAttr("keySplines") }}, {{ SVGAttr("from") }}, {{ SVGAttr("to") }}, {{ SVGAttr("by") }}, {{ SVGAttr("autoReverse") }}, {{ SVGAttr("accelerate") }}, {{ SVGAttr("decelerate") }}</p>
+
+<h3 id="Animation_addition_attributes">Animation addition attributes</h3>
+
+<p>{{ SVGAttr("additive") }}, {{ SVGAttr("accumulate") }}</p>
+
+<h3 id="Conditional_processing_attributes">Conditional processing attributes</h3>
+
+<p>{{ SVGAttr("requiredExtensions") }}, {{ SVGAttr("requiredFeatures") }}, {{ SVGAttr("systemLanguage") }}.</p>
+
+<h3 id="Core_attributes">Core attributes</h3>
+
+<p>{{ SVGAttr("id") }}, {{ SVGAttr("xml:base") }}, {{ SVGAttr("xml:lang") }}, {{ SVGAttr("xml:space") }}, {{ SVGAttr("tabindex") }}</p>
+
+<h3 id="Document_event_attributes">Document event attributes</h3>
+
+<p>{{ SVGAttr("onabort") }}, {{ SVGAttr("onerror") }}, {{ SVGAttr("onresize") }}, {{ SVGAttr("onscroll") }}, {{ SVGAttr("onunload") }}, {{ SVGAttr("onzoom") }}</p>
+
+<h3 id="Filter_primitive_attributes">Filter primitive attributes</h3>
+
+<p>{{ SVGAttr("height") }}, {{ SVGAttr("result") }}, {{ SVGAttr("width") }}, {{ SVGAttr("x") }}, {{ SVGAttr("y") }}</p>
+
+<h3 id="Graphical_event_attributes">Graphical event attributes</h3>
+
+<p>{{ SVGAttr("onactivate") }}, {{ SVGAttr("onclick") }}, {{ SVGAttr("onfocusin") }}, {{ SVGAttr("onfocusout") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onmousedown") }}, {{ SVGAttr("onmousemove") }}, {{ SVGAttr("onmouseout") }}, {{ SVGAttr("onmouseover") }}, {{ SVGAttr("onmouseup") }}</p>
+
+<h3 id="Presentation_attributes">Presentation attributes</h3>
+
+<div class="note">Note that all SVG presentation attributes can be used as CSS properties.</div>
+
+<p>{{ SVGAttr("alignment-baseline") }}, {{ SVGAttr("baseline-shift") }}, {{ SVGAttr("clip") }}, {{ SVGAttr("clip-path") }}, {{ SVGAttr("clip-rule") }}, {{ SVGAttr("color") }}, {{ SVGAttr("color-interpolation") }}, {{ SVGAttr("color-interpolation-filters") }}, {{ SVGAttr("color-profile") }}, {{ SVGAttr("color-rendering") }}, {{ SVGAttr("cursor") }}, {{ SVGAttr("direction") }}, {{ SVGAttr("display") }}, {{ SVGAttr("dominant-baseline") }}, {{ SVGAttr("enable-background") }}, {{ SVGAttr("fill") }}, {{ SVGAttr("fill-opacity") }}, {{ SVGAttr("fill-rule") }}, {{ SVGAttr("filter") }}, {{ SVGAttr("flood-color") }}, {{ SVGAttr("flood-opacity") }}, {{ SVGAttr("font-family") }}, {{ SVGAttr("font-size") }}, {{ SVGAttr("font-size-adjust") }}, {{ SVGAttr("font-stretch") }}, {{ SVGAttr("font-style") }}, {{ SVGAttr("font-variant") }}, {{ SVGAttr("font-weight") }}, {{ SVGAttr("glyph-orientation-horizontal") }}, {{ SVGAttr("glyph-orientation-vertical") }}, {{ SVGAttr("image-rendering") }}, {{ SVGAttr("kerning") }}, {{ SVGAttr("letter-spacing") }}, {{ SVGAttr("lighting-color") }}, {{ SVGAttr("marker-end") }}, {{ SVGAttr("marker-mid") }}, {{ SVGAttr("marker-start") }}, {{ SVGAttr("mask") }}, {{ SVGAttr("opacity") }}, {{ SVGAttr("overflow") }}, {{ SVGAttr("pointer-events") }}, {{ SVGAttr("shape-rendering") }}, {{ SVGAttr("stop-color") }}, {{ SVGAttr("stop-opacity") }}, {{ SVGAttr("stroke") }}, {{ SVGAttr("stroke-dasharray") }}, {{ SVGAttr("stroke-dashoffset") }}, {{ SVGAttr("stroke-linecap") }}, {{ SVGAttr("stroke-linejoin") }}, {{ SVGAttr("stroke-miterlimit") }}, {{ SVGAttr("stroke-opacity") }}, {{ SVGAttr("stroke-width") }}, {{ SVGAttr("text-anchor") }}, {{ SVGAttr("text-decoration") }}, {{ SVGAttr("text-rendering") }}, {{ SVGAttr("unicode-bidi") }}, {{ SVGAttr("visibility") }}, {{ SVGAttr("word-spacing") }}, {{ SVGAttr("writing-mode") }}</p>
+
+<h3 id="Style_attributes">Style attributes</h3>
+
+<p>{{ SVGAttr("class") }}, {{ SVGAttr("style") }}</p>
+
+<h3 id="Transfer_function_attributes">Transfer function attributes</h3>
+
+<p>{{ SVGAttr("type") }}, {{ SVGAttr("tableValues") }}, {{ SVGAttr("slope") }}, {{ SVGAttr("intercept") }}, {{ SVGAttr("amplitude") }}, {{ SVGAttr("exponent") }}, {{ SVGAttr("offset") }}</p>
+
+<h3 id="XLink_attributes">XLink attributes</h3>
+
+<p>{{ SVGAttr("xlink:href") }}, {{ SVGAttr("xlink:type") }}, {{ SVGAttr("xlink:role") }}, {{ SVGAttr("xlink:arcrole") }}, {{ SVGAttr("xlink:title") }}, {{ SVGAttr("xlink:show") }}, {{ SVGAttr("xlink:actuate") }}</p>
diff --git a/files/de/web/svg/attribute/preserveaspectratio/index.html b/files/de/web/svg/attribute/preserveaspectratio/index.html
new file mode 100644
index 0000000000..71db4f5225
--- /dev/null
+++ b/files/de/web/svg/attribute/preserveaspectratio/index.html
@@ -0,0 +1,110 @@
+---
+title: preserveAspectRatio
+slug: Web/SVG/Attribute/preserveAspectRatio
+translation_of: Web/SVG/Attribute/preserveAspectRatio
+---
+<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
+
+<p>In einigen Fällen, meistens wenn man das {{ SVGAttr("viewBox") }} Attribut benutzt, ist es wünschenswert die Grafik so zu skalieren, dass sie auch mit ungleichem (non-uniform) Seitenverhältnis den gesamten viewport einnimmt. Ein anderer Fall wäre es, mit gleichmäßiger (uniform) Skalierung die Seitenverhältnise der Grafik beizubehalten.<br>
+ <br>
+ Das Attribut <code>preserveAspectRatio</code> legt fest, ob gleich- oder ungleichmäßige Skalierung angewandt wird.<br>
+ <br>
+ Bei allen Elementen, die dieses Attribut unterstützen (siehe oben), außer dem {{ SVGElement("image") }} Element, ist <code>preserveAspectRatio</code> nur wirksam, wenn auch ein Wert für {{ SVGAttr("viewBox") }} im gleichen Element angegeben wurde. Für diese Elemente ist, wenn das Attribut {{ SVGAttr("viewBox") }} nicht angegeben wurde, <code>preserveAspectRatio</code> nicht aktiviert.<br>
+ <br>
+ In {{ SVGElement("image") }} Elementen, gibt <code>preserveAspectRatio</code> an, wie die darin verlinkten Bilder sich in den Referenz-Rahmen einpassen und ob die Seitenverhältnisse des verlinkten Bildes, unter Beachtung des momentanen Benutzer-Koordinatensystems, beibehalten werden sollen.</p>
+
+<h2 id="Verwendungskontext">Verwendungskontext</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Kategorien</th>
+   <td>None</td>
+  </tr>
+  <tr>
+   <th scope="row">Inhalt</th>
+   <td>&lt;align&gt; [&lt;meetOrSlice&gt;]</td>
+  </tr>
+  <tr>
+   <th scope="row">Animierbar</th>
+   <td>Ja</td>
+  </tr>
+  <tr>
+   <th scope="row">Normative document</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/coords.html#PreserveAspectRatioAttribute" title="http://www.w3.org/TR/SVG11/coords.html#PreserveAspectRatioAttribute">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>&lt;align&gt;</dt>
+ <dd>Der <code>&lt;align&gt;</code> Parameter bestimmt ob gleichmäßige Skalierung benutzt wird und wenn dies der Fall ist, die Ausrichtungs-Methode die genutzt wird, im Fall, dass das Seitenverhältnis der {{ SVGAttr("viewBox") }}  nicht dem Seitenverhältnis des viewports entspricht. Der <code>&lt;align&gt;</code> Parameter muss einen der folgenden Werte enthalten:
+ <ul>
+  <li><strong>none</strong><br>
+   Keine einheitliche Skalierung erzwingen. Skaliere die Grafiken des gegebenen Elements ungleichmäßig, wenn notwendig, so dass die bounding-box (Begrenzungs-Rahmen) exakt dem viewport-rectangle (Rechteck des Sichtbereichs) entspricht.<br>
+   (Bemerkung: Wenn <code>&lt;align&gt;</code> den Wert <code>none</code> enthält, wird der Wert für <code>&lt;meetOrSlice&gt;</code> ignoriert.)</li>
+  <li><strong>xMinYMin</strong> - Erzwinge gleichmäßige Skalierung.<br>
+   Richte <code>&lt;min-x&gt;</code> der Element-{{ SVGAttr("viewBox") }} am kleinsten X-Wert des viewports aus.<br>
+   Richte <code>&lt;min-y&gt;</code> der Element-{{ SVGAttr("viewBox") }} am kleinsten Y-Wert des viewports aus.</li>
+  <li><strong>xMidYMin</strong> - Erzwinge gleichmäßige Skalierung.<br>
+   Richte den X-Wert des Mittelpunktes der Element-{{ SVGAttr("viewBox") }} am X-Wert des viewport-Mittelpunktes aus.<br>
+   Richte den  <code>&lt;min-y&gt;</code> der Element-{{ SVGAttr("viewBox") }} am kleinsten Y-Wert des viewports aus.</li>
+  <li><strong>xMaxYMin</strong> - Force uniform scaling.<br>
+   Align the <code>&lt;min-x&gt;+&lt;width&gt;</code> of the element's {{ SVGAttr("viewBox") }} with the maximum X value of the viewport.<br>
+   Align the <code>&lt;min-y&gt;</code> of the element's {{ SVGAttr("viewBox") }} with the smallest Y value of the viewport.</li>
+  <li><strong>xMinYMid</strong> - Force uniform scaling.<br>
+   Align the <code>&lt;min-x&gt;</code> of the element's {{ SVGAttr("viewBox") }} with the smallest X value of the viewport.<br>
+   Align the midpoint Y value of the element's {{ SVGAttr("viewBox") }} with the midpoint Y value of the viewport.</li>
+  <li><strong>xMidYMid</strong> (the default) - Force uniform scaling.<br>
+   Align the midpoint X value of the element's {{ SVGAttr("viewBox") }} with the midpoint X value of the viewport.<br>
+   Align the midpoint Y value of the element's {{ SVGAttr("viewBox") }} with the midpoint Y value of the viewport.</li>
+  <li><strong>xMaxYMid</strong> - Force uniform scaling.<br>
+   Align the <code>&lt;min-x&gt;+&lt;width&gt;</code> of the element's {{ SVGAttr("viewBox") }} with the maximum X value of the viewport.<br>
+   Align the midpoint Y value of the element's {{ SVGAttr("viewBox") }} with the midpoint Y value of the viewport.</li>
+  <li><strong>xMinYMax</strong> - Force uniform scaling.<br>
+   Align the <code>&lt;min-x&gt;</code> of the element's {{ SVGAttr("viewBox") }} with the smallest X value of the viewport.<br>
+   Align the <code>&lt;min-y&gt;+&lt;height&gt;</code> of the element's {{ SVGAttr("viewBox") }} with the maximum Y value of the viewport.</li>
+  <li><strong>xMidYMax</strong> - Force uniform scaling.<br>
+   Align the midpoint X value of the element's {{ SVGAttr("viewBox") }} with the midpoint X value of the viewport.<br>
+   Align the <code>&lt;min-y&gt;+&lt;height&gt;</code> of the element's {{ SVGAttr("viewBox") }} with the maximum Y value of the viewport.</li>
+  <li><strong>xMaxYMax</strong> - Force uniform scaling.<br>
+   Align the <code>&lt;min-x&gt;+&lt;width&gt;</code> of the element's {{ SVGAttr("viewBox") }} with the maximum X value of the viewport.<br>
+   Align the <code>&lt;min-y&gt;+&lt;height&gt;</code> of the element's {{ SVGAttr("viewBox") }} with the maximum Y value of the viewport.</li>
+ </ul>
+ </dd>
+ <dt>&lt;meetOrSlice&gt;</dt>
+ <dd>The <code>&lt;meetOrSlice&gt;</code> parameter is optional and, if provided, is separated from the <code>&lt;align&gt;</code> value by one or more spaces and then must be one of the following strings:
+ <ul>
+  <li><strong>meet</strong> (the default) - Scale the graphic such that:
+   <ul>
+    <li>aspect ratio is preserved</li>
+    <li>the entire {{ SVGAttr("viewBox") }} is visible within the viewport</li>
+    <li>the {{ SVGAttr("viewBox") }} is scaled up as much as possible, while still meeting the other criteria</li>
+   </ul>
+   In this case, if the aspect ratio of the graphic does not match the viewport, some of the viewport will extend beyond the bounds of the {{ SVGAttr("viewBox") }} (i.e., the area into which the {{ SVGAttr("viewBox") }} will draw will be smaller than the viewport).</li>
+  <li><strong>slice</strong> - Scale the graphic such that:
+   <ul>
+    <li>aspect ratio is preserved</li>
+    <li>the entire viewport is covered by the {{ SVGAttr("viewBox") }}</li>
+    <li>the {{ SVGAttr("viewBox") }} is scaled down as much as possible, while still meeting the other criteria</li>
+   </ul>
+   In this case, if the aspect ratio of the {{ SVGAttr("viewBox") }} does not match the viewport, some of the {{ SVGAttr("viewBox") }} will extend beyond the bounds of the viewport (i.e., the area into which the {{ SVGAttr("viewBox") }} will draw is larger than the viewport).</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<h2 id="Elements">Elements</h2>
+
+<p>The following elements can use the <code>preserveAspectRatio</code> attribute</p>
+
+<ul>
+ <li>{{ SVGElement("svg") }}</li>
+ <li>{{ SVGElement("symbol") }}</li>
+ <li>{{ SVGElement("image") }}</li>
+ <li>{{ SVGElement("feImage") }}</li>
+ <li>{{ SVGElement("marker") }}</li>
+ <li>{{ SVGElement("pattern") }}</li>
+ <li>{{ SVGElement("view") }}</li>
+</ul>
diff --git a/files/de/web/svg/element/animate/index.html b/files/de/web/svg/element/animate/index.html
new file mode 100644
index 0000000000..ffb97d1947
--- /dev/null
+++ b/files/de/web/svg/element/animate/index.html
@@ -0,0 +1,115 @@
+---
+title: animate
+slug: Web/SVG/Element/animate
+tags:
+  - Element
+  - SVG
+  - SVG Animation
+translation_of: Web/SVG/Element/animate
+---
+<div>{{SVGRef}}</div>
+
+<p>Das <code>animate</code> Element wird innerhalb eines Shape Elements angelegt und definiert, wie ein Attribut des Elements sich durch die Animation verändert.Das Attribut wird sich innerhalb der angegebenen Dauer vom initialen- zum End-Wert ändern.</p>
+
+<p>Es wird normalerweise innerhalb des Elements eingefügt, oder referenziert von einem <code>href</code> attribut des Zielelements.</p>
+
+<h2 id="Usage_context">Usage context</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attribute">Attribute</h2>
+
+<h3 id="Globale_Attribute">Globale Attribute</h3>
+
+<ul>
+ <li><a href="/en-US/docs/SVG/Attribute#ConditionalProccessing" title="SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li>
+ <li><a href="/en-US/docs/SVG/Attribute#Core" title="SVG/Attribute#Core">Core attributes</a> »</li>
+ <li><a href="/en-US/docs/SVG/Attribute#AnimationEvent" title="SVG/Attribute#AnimationEvent">Animation event attributes</a> »</li>
+ <li><a href="/en-US/docs/SVG/Attribute#XLink" title="SVG/Attribute#XLink">Xlink attributes</a> »</li>
+ <li><a href="/en-US/docs/SVG/Attribute#AnimationAttributeTarget" title="SVG/Attribute#AnimationAttributeTarget">Animation attribute target attributes</a> »</li>
+ <li><a href="/en-US/docs/SVG/Attribute#AnimationTiming" title="SVG/Attribute#AnimationTiming">Animation timing attributes</a> »</li>
+ <li><a href="/en-US/docs/SVG/Attribute#AnimationValue" title="SVG/Attribute#AnimationValue">Animation value attributes</a> »</li>
+ <li><a href="/en-US/docs/SVG/Attribute#AnimationAddition" title="SVG/Attribute#AnimationAddition">Animation addition attributes</a> »</li>
+ <li>{{SVGAttr("externalResourcesRequired")}}</li>
+</ul>
+
+<h3 id="Spezifische_Attribute">Spezifische Attribute</h3>
+
+<ul>
+ <li>{{SVGAttr("attributeName")}}</li>
+ <li>{{SVGAttr("attributeType")}}</li>
+ <li>{{SVGAttr("from")}}</li>
+ <li>{{SVGAttr("to")}}</li>
+ <li>{{SVGAttr("dur")}}</li>
+ <li>{{SVGAttr("repeatCount")}}</li>
+</ul>
+
+<h2 id="DOM_Schnittstelle">DOM Schnittstelle</h2>
+
+<p>Dieses Element implementiert die <code><a href="/en-US/docs/DOM/SVGAnimateElement" title="DOM/SVGAElement">SVGAnimateElement</a></code> Schnittstelle.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="SVG">SVG</h3>
+
+<pre class="brush: html; highlight[6-7]">&lt;?xml version="1.0"?&gt;
+&lt;svg width="120" height="120" viewBox="0 0 120 120" version="1.1"
+     xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;rect x="10" y="10" width="100" height="100"&gt;
+    &lt;animate attributeType="XML" attributeName="x" from="-100" to="120"
+        dur="10s" repeatCount="indefinite"/&gt;
+  &lt;/rect&gt;
+&lt;/svg&gt;</pre>
+
+<h3 id="Ergebnis">Ergebnis</h3>
+
+<p>{{EmbedLiveSample("Example", 120, 120)}}</p>
+
+<h2 id="Bedenken_bezüglich_der_Barrierefreiheit">Bedenken bezüglich der Barrierefreiheit</h2>
+
+<p>Blinkende und blitzende Animation kann für Menschen mit kognitiven Problemen wie Aufmerksamkeitsdefizit Hyperaktivitätsstörung (ADHS) problematisch sein. Darüber hinaus können bestimmte Arten von Bewegungen ein Auslöser für vestibuläre Störungen, Epilepsie, Migräne und skotopische Empfindlichkeit sein.</p>
+
+<p>Erwägen Sie, einen Mechanismus zum Anhalten oder Deaktivieren der Animation vorzusehen, sowie die <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion">Reduced Motion Media Query</a> zu verwenden, um eine komplementäre Erfahrung für Benutzer zu schaffen, die eine Präferenz für keine Animationen haben.</p>
+
+<ul>
+ <li><a href="https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity">Designen von sicheren Web Animationen für Bewegungsempfindlichkeit - Ein Artikel der Extraklasse</a></li>
+ <li><a href="https://css-tricks.com/introduction-reduced-motion-media-query/">Eine Einführung in die Reduced Motion Media Query | CSS-Tricks</a></li>
+ <li><a href="https://webkit.org/blog/7551/responsive-design-for-motion/">Responsives Design für Bewegungen | WebKit</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_%E2%80%94_Enough_Time_Provide_users_enough_time_to_read_and_use_content">MDN Verstehen der WCAG, Guideline 2.2 Erklärungen</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html">Verstehen der Erfolgskriteren 2.2.2  | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("SVG Animations 2", "#AnimateElement", "&lt;animate&gt;")}}</td>
+   <td>{{Spec2("SVG Animations 2")}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "animate.html#AnimateElement", "&lt;animate&gt;")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Initiale Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatiblität">Browser Kompatiblität</h2>
+
+<div>
+<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wurde von strukturierten Daten generiert. Wenn Du etwas zu diesen Daten beitragen willst dann checke <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> aus und sende uns einen Pull Request.</div>
+
+<p>{{Compat("svg.elements.animate")}}</p>
+</div>
+
+<p> </p>
diff --git a/files/de/web/svg/element/circle/index.html b/files/de/web/svg/element/circle/index.html
new file mode 100644
index 0000000000..001b06f8cc
--- /dev/null
+++ b/files/de/web/svg/element/circle/index.html
@@ -0,0 +1,114 @@
+---
+title: circle
+slug: Web/SVG/Element/circle
+tags:
+  - Grafikelement
+  - Kreis
+  - Mittelpunkt
+  - Radius
+  - SVG
+  - form
+translation_of: Web/SVG/Element/circle
+---
+<div>{{SVGRef}}</div>
+
+<p>Das Element <code>circle</code> (Kreis) gehört zu den Grundformen in SVG. Kreise werden durch Angabe eines Mittelpunkts und eines Radius erzeugt.</p>
+
+<h2 id="Verwendungskontext">Verwendungskontext</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: xml">&lt;?xml version="1.0"?&gt;
+&lt;svg viewBox="0 0 120 120" version="1.1"
+  xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;circle cx="60" cy="60" r="50"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>» <a href="https://mdn.mozillademos.org/files/7707/circle2.svg" title="https://developer.mozilla.org/files/3252/circle.svg">circle.svg</a></p>
+
+<h2 id="Attribute">Attribute</h2>
+
+<h3 id="Globale_Attribute">Globale Attribute</h3>
+
+<ul>
+ <li><a href="/en/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li>
+ <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Core attributes</a> »</li>
+ <li><a href="/en/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li>
+ <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">Presentation attributes</a> »</li>
+ <li>{{ SVGAttr("class") }}</li>
+ <li>{{ SVGAttr("style") }}</li>
+ <li>{{ SVGAttr("externalResourcesRequired") }}</li>
+ <li>{{ SVGAttr("transform") }}</li>
+</ul>
+
+<h3 id="Spezifische_Attribute">Spezifische Attribute</h3>
+
+<ul>
+ <li>{{ SVGAttr("cx") }}</li>
+ <li>{{ SVGAttr("cy") }}</li>
+ <li>{{ SVGAttr("r") }}</li>
+</ul>
+
+<h2 id="DOM_Schnittstelle">DOM Schnittstelle</h2>
+
+<p>Dieses Element implementiert das {{ domxref("SVGCircleElement") }} Interface.</p>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th scope="col">Chrome</th>
+   <th scope="col">Firefox (Gecko)</th>
+   <th scope="col">Internet Explorer</th>
+   <th scope="col">Opera</th>
+   <th scope="col">Safari</th>
+  </tr>
+  <tr>
+   <td>Grundsätzliche Unterstützung</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop('1.8') }}</td>
+   <td>{{ CompatIE('9.0') }}</td>
+   <td>{{ CompatOpera('8.0') }}</td>
+   <td>{{ CompatSafari('3.0.4') }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundsätzliche Unterstützung</td>
+   <td>{{ CompatAndroid('3.0') }}</td>
+   <td>{{ CompatGeckoMobile('1.8') }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatSafari('3.0.4') }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Diese Übersicht basiert auf diesen <a href="/en-US/docs/Web/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">Quellen</a>.</p>
+
+<h2 id="Verwandte_Begriffe">Verwandte Begriffe</h2>
+
+<ul>
+ <li>{{ SVGElement("ellipse") }}</li>
+</ul>
diff --git a/files/de/web/svg/element/foreignobject/index.html b/files/de/web/svg/element/foreignobject/index.html
new file mode 100644
index 0000000000..f76fd63b34
--- /dev/null
+++ b/files/de/web/svg/element/foreignobject/index.html
@@ -0,0 +1,133 @@
+---
+title: foreignObject
+slug: Web/SVG/Element/foreignObject
+translation_of: Web/SVG/Element/foreignObject
+---
+<div>{{SVGRef}}</div>
+
+<p>Das <code>foreignObject</code>-Element ermöglicht die Einbindung eines fremden XML-Namespace, dessen graphischer Inhalt von einem anderen User-Agent dargestellt wird. Der eingebundene fremde graphische Inhalt ist Subjekt der SVG-Transformationen und des Compositing.</p>
+
+<p>Der Inhalt des <code>foreignObject</code> wird in einem anderen Namespace vermutet. Jedes SVG-Element innerhalb eines <code>foreignObject</code> wird nicht gezeichnet, es sei denn, ein korrekt definiertes SVG-Subdokument mit einer sauberen <code>xmlns</code>-Attribut-Spezifikation ist rekursiv eingebettet. Eine Situation, in der dies geschehen kann, ist, wenn ein SVG-Dokumentenfragment in einem Nicht-SVG-Dokumentenfragment eingebettet ist, welche wiederum in einem SVG-Dokumentenfragment eingebettet ist (z.B. ein SVG-Dokumentenfragment beinhaltet ein XHTML-Dokumentenfragment, welches seinerseits ein anderes SVG-Dokumentenfragment beinhaltet).</p>
+
+<p>Üblicherweise wird ein <code>foreignObject</code> in Verbindung mit dem {{ SVGElement("switch") }}-Element und dem {{ SVGAttr("requiredExtensions") }}-Attribut verwendet, um eine saubere Prüfung der entsprechenden User-Agent-Unterstützung zu ermöglichen und eine alternative Rendermethode zu liefern, wenn der User-Agent nicht unterstütz wird.</p>
+
+<h2 id="Anwendungskontext">Anwendungskontext</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<pre class="brush: xml">&lt;svg width="400px" height="300px" viewBox="0 0 400 300"
+     xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;desc&gt;Dieses Beispiel benutzt das 'switch'-Element, um eine
+        Ausweichmöglichkeit der graphischen Darstellung zu liefern,
+        falls XHTML nicht unterstützt werden sollte.&lt;/desc&gt;
+
+  &lt;!-- Das 'switch'Element wird das erste Kindelement auswählen,
+       dessen Testergebnisse auf true zurückliefern. --&gt;
+  &lt;switch&gt;
+
+    &lt;!-- Verarbeite das eingebettete XHTML, falls das requiredExtensions-Attribut
+         true zurückliefert (z.B. wenn der User-Agent XHTML
+         in SVG eingebettet unterstützt). --&gt;
+    &lt;foreignObject width="100" height="50"
+                   requiredExtensions="<span id="the-code"><span class="s">http://www.w3.org/1999/xhtml</span></span>"&gt;
+      &lt;!-- XHTML-Inhalt steht hier --&gt;
+      &lt;body xmlns="http://www.w3.org/1999/xhtml"&gt;
+        &lt;p&gt;Hier ist ein Absatz, welcher einen Zeilenumbruch benötigt.&lt;/p&gt;
+      &lt;/body&gt;
+    &lt;/foreignObject&gt;
+
+    &lt;!-- Ansonsten verarbeite das folgende alternative SVG.
+         Beachte, dass das 'text'-Element keine Test-Attribute besitzt.
+         Wenn keine Test-Attribute angegeben werden, wird das Element so
+         behandelt, als hätte es keine Test-Attribute und liefert true zurück. --&gt;
+    &lt;text font-size="10" font-family="Verdana"&gt;
+      &lt;tspan x="10" y="10"&gt;Hier ist ein Absatz, welcher&lt;/tspan&gt;
+      &lt;tspan x="10" y="20"&gt;einen Zeilenumbruch benötigt.&lt;/tspan&gt;
+    &lt;/text&gt;
+  &lt;/switch&gt;
+&lt;/svg&gt;
+</pre>
+
+<h2 id="Attribute">Attribute</h2>
+
+<h3 id="Globale_Attribute">Globale Attribute</h3>
+
+<ul>
+ <li><a href="/en-US/docs/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li>
+ <li><a href="/en-US/docs/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Core attributes</a> »</li>
+ <li><a href="/en-US/docs/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li>
+ <li><a href="/en-US/docs/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation ">Presentation attributes</a> »</li>
+ <li>{{ SVGAttr("class") }}</li>
+ <li>{{ SVGAttr("style") }}</li>
+ <li>{{ SVGAttr("externalResourcesRequired") }}</li>
+ <li>{{ SVGAttr("transform") }}</li>
+</ul>
+
+<h3 id="Spezifische_Attribute">Spezifische Attribute</h3>
+
+<ul>
+ <li>{{ SVGAttr("x") }}</li>
+ <li>{{ SVGAttr("y") }}</li>
+ <li>{{ SVGAttr("width") }}</li>
+ <li>{{ SVGAttr("height") }}</li>
+</ul>
+
+<h2 id="DOM-Interface">DOM-Interface</h2>
+
+<p>Dieses Element implementiert das <code><a href="/en-US/docs/DOM/SVGForeignObjectElement" title="en/DOM/SVGForeignObjectElement">SVGForeignObjectElement</a></code>-Interface.</p>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>1.9</td>
+   <td>{{ CompatNo() }}</td>
+   <td>2.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>2.0</td>
+   <td>{{ CompatNo() }}</td>
+   <td>2.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Diese Tabelle basiert auf <a href="/en-US/docs/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">diesen Quellen</a>.</p>
diff --git a/files/de/web/svg/element/index.html b/files/de/web/svg/element/index.html
new file mode 100644
index 0000000000..4e7586d0b0
--- /dev/null
+++ b/files/de/web/svg/element/index.html
@@ -0,0 +1,209 @@
+---
+title: SVG Elementreferenz
+slug: Web/SVG/Element
+tags:
+  - SVG
+  - SVG Referenz
+translation_of: Web/SVG/Element
+---
+<h2 id="SVG_Elemente">SVG Elemente</h2>
+
+<div class="index"><span id="A">A</span>
+
+<ul>
+ <li>{{SVGElement("a")}}</li>
+ <li>{{SVGElement("altGlyph")}}</li>
+ <li>{{SVGElement("altGlyphDef")}}</li>
+ <li>{{SVGElement("altGlyphItem")}}</li>
+ <li>{{SVGElement("animate")}}</li>
+ <li>{{SVGElement("animateColor")}}</li>
+ <li>{{SVGElement("animateMotion")}}</li>
+ <li>{{SVGElement("animateTransform")}}</li>
+</ul>
+<span id="C">B C</span>
+
+<ul>
+ <li>{{SVGElement("circle")}}</li>
+ <li>{{SVGElement("clipPath")}}</li>
+ <li>{{SVGElement("color-profile")}}</li>
+ <li>{{SVGElement("cursor")}}</li>
+</ul>
+<span id="D">D</span>
+
+<ul>
+ <li>{{SVGElement("defs")}}</li>
+ <li>{{SVGElement("desc")}}</li>
+</ul>
+<span id="E">E</span>
+
+<ul>
+ <li>{{SVGElement("ellipse")}}</li>
+</ul>
+<span id="F">F</span>
+
+<ul>
+ <li>{{SVGElement("feBlend")}}</li>
+ <li>{{SVGElement("feColorMatrix")}}</li>
+ <li>{{SVGElement("feComponentTransfer")}}</li>
+ <li>{{SVGElement("feComposite")}}</li>
+ <li>{{SVGElement("feConvolveMatrix")}}</li>
+ <li>{{SVGElement("feDiffuseLighting")}}</li>
+ <li>{{SVGElement("feDisplacementMap")}}</li>
+ <li>{{SVGElement("feDistantLight")}}</li>
+ <li>{{SVGElement("feFlood")}}</li>
+ <li>{{SVGElement("feFuncA")}}</li>
+ <li>{{SVGElement("feFuncB")}}</li>
+ <li>{{SVGElement("feFuncG")}}</li>
+ <li>{{SVGElement("feFuncR")}}</li>
+ <li>{{SVGElement("feGaussianBlur")}}</li>
+ <li>{{SVGElement("feImage")}}</li>
+ <li>{{SVGElement("feMerge")}}</li>
+ <li>{{SVGElement("feMergeNode")}}</li>
+ <li>{{SVGElement("feMorphology")}}</li>
+ <li>{{SVGElement("feOffset")}}</li>
+ <li>{{SVGElement("fePointLight")}}</li>
+ <li>{{SVGElement("feSpecularLighting")}}</li>
+ <li>{{SVGElement("feSpotLight")}}</li>
+ <li>{{SVGElement("feTile")}}</li>
+ <li>{{SVGElement("feTurbulence")}}</li>
+ <li>{{SVGElement("filter")}}</li>
+ <li>{{SVGElement("font")}}</li>
+ <li>{{SVGElement("font-face")}}</li>
+ <li>{{SVGElement("font-face-format")}}</li>
+ <li>{{SVGElement("font-face-name")}}</li>
+ <li>{{SVGElement("font-face-src")}}</li>
+ <li>{{SVGElement("font-face-uri")}}</li>
+ <li>{{SVGElement("foreignObject")}}</li>
+</ul>
+<span id="G">G</span>
+
+<ul>
+ <li>{{SVGElement("g")}}</li>
+ <li>{{SVGElement("glyph")}}</li>
+ <li>{{SVGElement("glyphRef")}}</li>
+</ul>
+<span id="H">H</span>
+
+<ul>
+ <li>{{SVGElement("hkern")}}</li>
+</ul>
+<span id="I">I</span>
+
+<ul>
+ <li>{{SVGElement("image")}}</li>
+</ul>
+<span id="L">J K L</span>
+
+<ul>
+ <li>{{SVGElement("line")}}</li>
+ <li>{{SVGElement("linearGradient")}}</li>
+</ul>
+<span id="M">M</span>
+
+<ul>
+ <li>{{SVGElement("marker")}}</li>
+ <li>{{SVGElement("mask")}}</li>
+ <li>{{SVGElement("metadata")}}</li>
+ <li>{{SVGElement("missing-glyph")}}</li>
+ <li>{{SVGElement("mpath")}}</li>
+</ul>
+<span id="P">N O P</span>
+
+<ul>
+ <li>{{SVGElement("path")}}</li>
+ <li>{{SVGElement("pattern")}}</li>
+ <li>{{SVGElement("polygon")}}</li>
+ <li>{{SVGElement("polyline")}}</li>
+</ul>
+<span id="R">Q R</span>
+
+<ul>
+ <li>{{SVGElement("radialGradient")}}</li>
+ <li>{{SVGElement("rect")}}</li>
+</ul>
+<span id="S">S</span>
+
+<ul>
+ <li>{{SVGElement("script")}}</li>
+ <li>{{SVGElement("set")}}</li>
+ <li>{{SVGElement("stop")}}</li>
+ <li>{{SVGElement("style")}}</li>
+ <li>{{SVGElement("svg")}}</li>
+ <li>{{SVGElement("switch")}}</li>
+ <li>{{SVGElement("symbol")}}</li>
+</ul>
+<span id="T">T</span>
+
+<ul>
+ <li>{{SVGElement("text")}}</li>
+ <li>{{SVGElement("textPath")}}</li>
+ <li>{{SVGElement("title")}}</li>
+ <li>{{SVGElement("tref")}}</li>
+ <li>{{SVGElement("tspan")}}</li>
+</ul>
+<span id="U">U</span>
+
+<ul>
+ <li>{{SVGElement("use")}}</li>
+</ul>
+<span id="V">V — Z</span>
+
+<ul>
+ <li>{{SVGElement("view")}}</li>
+ <li>{{SVGElement("vkern")}}</li>
+</ul>
+</div>
+
+<h2 id="Kategorien">Kategorien</h2>
+
+<h3 id="Animationselemente">Animationselemente</h3>
+
+<p>{{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, {{SVGElement("set")}}</p>
+
+<h3 id="Grundformen">Grundformen</h3>
+
+<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}</p>
+
+<h3 id="Containerelemente">Containerelemente</h3>
+
+<p>{{SVGElement("a")}}, {{SVGElement("defs")}}, {{SVGElement("glyph")}}, {{SVGElement("g")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("missing-glyph")}}, {{SVGElement("pattern")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}</p>
+
+<h3 id="Beschreibende_Elemente">Beschreibende Elemente</h3>
+
+<p>{{SVGElement("desc")}}, {{SVGElement("metadata")}}, {{SVGElement("title")}}</p>
+
+<h3 id="Filterelemente">Filterelemente</h3>
+
+<p>{{SVGElement("feBlend")}}, {{SVGElement("feColorMatrix")}}, {{SVGElement("feComponentTransfer")}}, {{SVGElement("feComposite")}}, {{SVGElement("feConvolveMatrix")}}, {{SVGElement("feDiffuseLighting")}}, {{SVGElement("feDisplacementMap")}}, {{SVGElement("feFlood")}}, {{SVGElement("feGaussianBlur")}}, {{SVGElement("feImage")}}, {{SVGElement("feMerge")}}, {{SVGElement("feMorphology")}}, {{SVGElement("feOffset")}}, {{SVGElement("feSpecularLighting")}}, {{SVGElement("feTile")}}, {{SVGElement("feTurbulence")}}</p>
+
+<h3 id="Farbverlaufselemente">Farbverlaufselemente</h3>
+
+<p>{{SVGElement("linearGradient")}}, {{SVGElement("radialGradient")}}</p>
+
+<h3 id="Grafikelemente">Grafikelemente</h3>
+
+<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("use")}}</p>
+
+<h3 id="Lichtquellenelemente">Lichtquellenelemente</h3>
+
+<p>{{SVGElement("feDistantLight")}}, {{SVGElement("fePointLight")}}, {{SVGElement("feSpotLight")}}</p>
+
+<h3 id="Formelemente">Formelemente</h3>
+
+<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}</p>
+
+<h3 id="Strukturelle_Elemente">Strukturelle Elemente</h3>
+
+<p>{{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("svg")}}, {{SVGElement("symbol")}}, {{SVGElement("use")}}</p>
+
+<h3 id="Textelemente">Textelemente</h3>
+
+<p>{{SVGElement("altGlyph")}}, {{SVGElement("textPath")}}, {{SVGElement("text")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}</p>
+
+<h3 id="Textkindelemente">Textkindelemente</h3>
+
+<p>{{SVGElement("altGlyph")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}</p>
+
+<h3 id="Nicht_kategorisierte_Elemente">Nicht kategorisierte Elemente</h3>
+
+<p>{{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("clipPath")}}, {{SVGElement("color-profile")}}, {{SVGElement("cursor")}}, {{SVGElement("filter")}}, {{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}, {{SVGElement("foreignObject")}}, {{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}, {{SVGElement("hkern")}}, {{SVGElement("mpath")}}, {{SVGElement("script")}}, {{SVGElement("stop")}}, {{SVGElement("style")}}, {{SVGElement("view")}}, {{SVGElement("vkern")}}</p>
diff --git a/files/de/web/svg/element/path/index.html b/files/de/web/svg/element/path/index.html
new file mode 100644
index 0000000000..ebc123889a
--- /dev/null
+++ b/files/de/web/svg/element/path/index.html
@@ -0,0 +1,98 @@
+---
+title: <path>
+slug: Web/SVG/Element/path
+translation_of: Web/SVG/Element/path
+---
+<div>{{SVGRef}}</div>
+
+<p>Das <strong><code>&lt;path&gt;</code></strong> <a href="/en-US/docs/Web/SVG">SVG</a> Element ist das allgemeine Element zum definieren einer Form. Alle Grundformen können mit einem path-Element erzeugt werden.</p>
+
+<div id="Example">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;path d="M 10,30
+           A 20,20 0,0,1 50,30
+           A 20,20 0,0,1 90,30
+           Q 90,60 50,90
+           Q 10,60 10,30 z"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('Example', 100, 100)}}</p>
+</div>
+
+<h2 id="Attribute">Attribute</h2>
+
+<dl>
+ <dt id="attr-cx">{{SVGAttr("d")}}</dt>
+ <dd>Dieses Attribut definiert die Form des Pfades.<br>
+ <small><em>Value type</em>: <strong>&lt;string&gt;</strong> ; <em>Default value</em>: <code>''</code>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+ <dt>{{SVGAttr("pathLength")}}</dt>
+ <dd>Dieses Attribut lässt den Author die Gesammtlänge des Pfades in der Einheit des Nutzers definieren.<br>
+ <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Number"><strong>&lt;number&gt;</strong></a> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+</dl>
+
+<h3 id="Globale_Attribute">Globale Attribute</h3>
+
+<dl>
+ <dt><a href="/docs/Web/SVG/Attribute/Core">Core Attribute</a></dt>
+ <dd><small>Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd>
+ <dt><a href="/docs/Web/SVG/Attribute/Styling">Style Attribute</a></dt>
+ <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd>
+ <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">Conditional Processing Attributes</a></dt>
+ <dd><small>Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd>
+ <dt>Event Attributes</dt>
+ <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Global event attributes</a>, <a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Graphical event attributes</a></small></dd>
+ <dt><a href="/docs/Web/SVG/Attribute/Presentation">Presentation Attributes</a></dt>
+ <dd><small>Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd>
+ <dt>ARIA Attributes</dt>
+ <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd>
+</dl>
+
+<h2 id="Usage_notes">Usage notes</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("SVG Paths", "#PathElement", "&lt;path&gt;")}}</td>
+   <td>{{Spec2("SVG Paths")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG2", "paths.html#PathElement", "&lt;path&gt;")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "paths.html#PathElement", "&lt;path&gt;")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("svg.elements.path")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>SVG basic shapes: {{ SVGElement('circle') }}, {{ SVGElement('ellipse') }}, {{ SVGElement('line') }}, {{ SVGElement('polygon') }}, {{ SVGElement('polyline') }}, {{ SVGElement('rect') }}</li>
+ <li><a href="/en-US/docs/Web/SVG/Tutorial/Paths">The MDN SVG "Getting Started" tutorial : Path</a></li>
+</ul>
diff --git a/files/de/web/svg/element/polygon/index.html b/files/de/web/svg/element/polygon/index.html
new file mode 100644
index 0000000000..d620bfa203
--- /dev/null
+++ b/files/de/web/svg/element/polygon/index.html
@@ -0,0 +1,142 @@
+---
+title: <polygon>
+slug: Web/SVG/Element/polygon
+tags:
+  - Element
+  - Referenz
+  - SVG
+  - SVG Grafik
+translation_of: Web/SVG/Element/polygon
+---
+<div>{{SVGRef}}</div>
+
+<p>Das <strong><code>&lt;polygon&gt;</code></strong> Element definiert eine geschlossene Form, die aus mehreren geraden Linien besteht. Der letzte Punkt wird mit dem ersten Punkt verbunden. Für geöffnete (nicht verbundene) Formen existiert das  {{SVGElement("polyline")}} Element.</p>
+
+<h2 id="Verwendung">Verwendung</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attribute">Attribute</h2>
+
+<h3 id="Globale_Attribute">Globale Attribute</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Conditional_processing_attributes">Bedingte Verarbeitungsattribute</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Core_attributes">Kernattribute</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Graphical_event_attributes">Grafische Ereignisattribute</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation_attributes">Darstellungsattribute</a> »</li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+ <li>{{SVGAttr("externalResourcesRequired")}}</li>
+ <li>{{SVGAttr("transform")}}</li>
+</ul>
+
+<h3 id="Zielgenaue_Attribute">Zielgenaue Attribute</h3>
+
+<ul>
+ <li>{{SVGAttr("points")}}</li>
+</ul>
+
+<h2 id="DOM_Schnittstelle">DOM Schnittstelle</h2>
+
+<p>Dieses Element implementiert die {{domxref("SVGPolygonElement")}} Schnittstelle.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="SVG">SVG</h3>
+
+<pre class="brush: html">&lt;svg width="120" height="120" viewBox="0 0 120 120"
+    xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;polygon points="60,20 100,40 100,80 60,100 20,80 20,40"/&gt;
+&lt;/svg&gt;</pre>
+
+<h3 id="Ergebnis">Ergebnis</h3>
+
+<p>{{EmbedLiveSample("Example", 120, 120)}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('SVG2', 'shapes.html#PolygonElement', '&lt;polygon&gt;')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td>Keine Änderung</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'shapes.html#PolygonElement', '&lt;polygon&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Initiale Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>IE</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatChrome('1.0')}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop('1.8')}}</td>
+   <td>{{CompatIE('9.0')}}</td>
+   <td>{{CompatOpera('8.0')}}</td>
+   <td>{{CompatSafari('3.0.4')}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatAndroid('3.0')}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile('1.8')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatSafari('3.0.4')}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Diese Tabelle basiert auf <a href="/en-US/docs/Web/SVG/Compatibility_sources">diesen Daten</a>.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{SVGElement("polyline")}}</li>
+</ul>
diff --git a/files/de/web/svg/element/rect/index.html b/files/de/web/svg/element/rect/index.html
new file mode 100644
index 0000000000..1098542db5
--- /dev/null
+++ b/files/de/web/svg/element/rect/index.html
@@ -0,0 +1,164 @@
+---
+title: <rect>
+slug: Web/SVG/Element/rect
+translation_of: Web/SVG/Element/rect
+---
+<div>{{SVGRef}}</div>
+
+<p><span class="seoSummary">Das <strong><code>&lt;rect&gt;</code></strong> Element ist ein SVG Element, aus welchem Rechtecke mittels einer definierten Eckposition, einer Höhe und einer Breite erstellt werden können.</span> Zudem sind Rechtecke mit abgerundeten Ecken möglich.</p>
+
+<h2 id="Nutzungskontext">Nutzungskontext</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attribute">Attribute</h2>
+
+<h3 id="Globale_Attribute">Globale Attribute</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Conditional_processing_attributes">Conditional processing attributes</a></li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Core_attributes">Core attributes</a></li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Graphical_event_attributes">Graphical event attributes</a></li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation_attributes">Presentation attributes</a></li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+ <li>{{SVGAttr("externalResourcesRequired")}}</li>
+ <li>{{SVGAttr("transform")}}</li>
+</ul>
+
+<h3 id="Spezifische_Attribute">Spezifische Attribute</h3>
+
+<dl>
+ <dt>{{SVGAttr("x")}}</dt>
+ <dd>Legt die x-Koordinate des rect-Elements fest.</dd>
+ <dt>{{SVGAttr("y")}}</dt>
+ <dd>Legt die y-Koordinate des rect-Elements fest.</dd>
+ <dt>{{SVGAttr("width")}}</dt>
+ <dd>Legt die Breite des rect-Elements fest.</dd>
+ <dt>{{SVGAttr("height")}}</dt>
+ <dd>Legt die Höhe des rect-Elements fest.</dd>
+ <dt>{{SVGAttr("rx")}}</dt>
+ <dd>Legt den horizontalen Eckradius des rect-Elements fest.</dd>
+ <dt>{{SVGAttr("ry")}}</dt>
+ <dd>Legt den vertikalen Eckradius des rect-Elements fest.</dd>
+</dl>
+
+<h2 id="DOM_Interface">DOM Interface</h2>
+
+<p>Dieses Element implementiert das {{domxref("SVGRectElement")}} Interface.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<h3 id="Einfache_Nutzung_des_rect-Elements">Einfache Nutzung des rect-Elements</h3>
+
+<h4 id="SVG">SVG</h4>
+
+<pre class="brush: html; highlight[4]">&lt;svg width="120" height="120" viewBox="0 0 120 120"
+    xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;rect x="10" y="10" width="100" height="100"/&gt;
+&lt;/svg&gt;</pre>
+
+<h4 id="Ergebnis">Ergebnis</h4>
+
+<p>{{EmbedLiveSample("Simple_rect_usage", 120, 120)}}</p>
+
+<h3 id="Rect-Element_mit_abgerundeten_Ecken">Rect-Element mit abgerundeten Ecken</h3>
+
+<h4 id="SVG_2">SVG</h4>
+
+<pre class="brush: html; highlight[4]">&lt;svg width="120" height="120" viewBox="0 0 120 120"
+     xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;rect x="10" y="10" width="100" height="100" rx="15" ry="15"/&gt;
+&lt;/svg&gt;</pre>
+
+<h4 id="Ergebnis_2">Ergebnis</h4>
+
+<p>{{EmbedLiveSample("Rect_with_rounded_corners", 120, 120)}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('SVG2', 'shapes.html#RectElement', '&lt;rect&gt;')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'shapes.html#RectElement', '&lt;rect&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Erste Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kombatibilität">Browser Kombatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basis Unterstützung</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop('1.8')}}</td>
+   <td>{{CompatIE('9.0')}}</td>
+   <td>{{CompatOpera('8.0')}}</td>
+   <td>{{CompatSafari('3.0.4')}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basis Unterstützung</td>
+   <td>{{CompatAndroid('3.0')}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile('1.8')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatSafari('3.0.4')}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Die Tabelle stützt sich auf <a href="/en-US/SVG/Compatibility_sources">diese Quellen</a>.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{SVGElement("path")}}</li>
+</ul>
diff --git a/files/de/web/svg/element/svg/index.html b/files/de/web/svg/element/svg/index.html
new file mode 100644
index 0000000000..7be6f700fe
--- /dev/null
+++ b/files/de/web/svg/element/svg/index.html
@@ -0,0 +1,135 @@
+---
+title: <svg>
+slug: Web/SVG/Element/svg
+tags:
+  - Element
+  - Referenz
+  - SVG
+  - SVG Kontainer
+  - Web
+translation_of: Web/SVG/Element/svg
+---
+<div>{{SVGRef}}</div>
+
+<p>Das <code>svg</code> Element ist ein Container, der ein neues Koordinatensystem und ein <a href="/en-US/docs/Web/SVG/Attribute/viewBox">Darstellungsfeld</a> definiert. Es wird als das äußerste Element jedes SVG Dokuments verwendet, aber kann auch dazu dienen SVG Fragmente innerhalb von einem anderen SVG oder einem HTML Dokument einzubetten.</p>
+
+<div class="note">
+<p><strong>Anmerkung:</strong> Das <code>xmlns</code> Attribute wird nur benötigt wenn das <code>svg</code>-Element das äußerste Element eines <em>SVG Dokuments</em> ist.</p>
+</div>
+
+<div id="Exeemple">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html; highlight[4]">&lt;svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;circle cx="50" cy="50" r="40" stroke="red" fill="grey" /&gt;
+  &lt;circle cx="150" cy="50" r="4" stroke="red" fill="grey" /&gt;
+
+  &lt;svg viewBox="0 0 10 10" x="200" width="100"&gt;
+    &lt;circle cx="5" cy="5" r="4" stroke="red" fill="grey" /&gt;
+  &lt;/svg&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('Exeemple', 150, '100%')}}</p>
+</div>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Berücksichtige das folgende SVG Bild (dies stellt die italienische Nationalflagge dar):</p>
+
+<pre class="brush: xml">&lt;svg xmlns="http://www.w3.org/2000/svg"
+     width="150" height="100" viewBox="0 0 3 2"&gt;
+
+  &lt;rect width="1" height="2" x="0" fill="#008d46" /&gt;
+  &lt;rect width="1" height="2" x="1" fill="#ffffff" /&gt;
+  &lt;rect width="1" height="2" x="2" fill="#d2232c" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>Es könnt folgendermaßen in ein HTML5 Dokument inkludiert werden:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;meta charset="UTF-8" /&gt;
+  &lt;title&gt;HTML/SVG Example&lt;/title&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+  &lt;svg width="150" height="100" viewBox="0 0 3 2"&gt;
+    &lt;rect width="1" height="2" x="0" fill="#008d46" /&gt;
+    &lt;rect width="1" height="2" x="1" fill="#ffffff" /&gt;
+    &lt;rect width="1" height="2" x="2" fill="#d2232c" /&gt;
+  &lt;/svg&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Attribute">Attribute</h2>
+
+<h3 id="Globale_Attribute">Globale Attribute</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Core">Core attributes</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#DocumentEvent">Document event attributes</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation">Presentation attributes</a> »</li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+ <li>{{SVGAttr("externalResourcesRequired")}}</li>
+</ul>
+
+<h3 id="Spezifische_Attribute">Spezifische Attribute</h3>
+
+<ul>
+ <li>{{SVGAttr("version")}}</li>
+ <li>{{SVGAttr("baseProfile")}}</li>
+ <li>{{SVGAttr("x")}}</li>
+ <li>{{SVGAttr("y")}}</li>
+ <li>{{SVGAttr("width")}}</li>
+ <li>{{SVGAttr("height")}}</li>
+ <li>{{SVGAttr("preserveAspectRatio")}}</li>
+ <li>{{SVGAttr("contentScriptType")}}</li>
+ <li>{{SVGAttr("contentStyleType")}}</li>
+ <li>{{SVGAttr("viewBox")}}</li>
+</ul>
+
+<h2 id="DOM_Interface">DOM Interface</h2>
+
+<p>Dieses Element implementiert das <code><a href="/en-US/docs/Web/API/SVGSVGElement">SVGSVGElement</a></code> Interface.</p>
+
+<h2 id="Nutzungskontext">Nutzungskontext</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('SVG2', 'struct.html#NewDocument', '&lt;svg&gt;')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'struct.html#NewDocument', '&lt;svg&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("svg.elements.svg")}}</p>
diff --git a/files/de/web/svg/element/textpath/index.html b/files/de/web/svg/element/textpath/index.html
new file mode 100644
index 0000000000..c7b1218887
--- /dev/null
+++ b/files/de/web/svg/element/textpath/index.html
@@ -0,0 +1,71 @@
+---
+title: textPath
+slug: Web/SVG/Element/textPath
+translation_of: Web/SVG/Element/textPath
+---
+<div>{{SVGRef}}</div>
+
+<p>Neben der Fähigkeit, Text auf einer Geraden Linie zu zeichnen, kann SVG diesen auch entlang der Form eines {{ SVGElement("path") }} Elements platzieren. Um von dieser Funktion Gebrauch zu machen, füge den gewünschten Text in einem<code>textPath</code> Element mit einem<code>xlink:href</code> Attribut mit einer Referenz zu dem {{ SVGElement("path") }} Element.</p>
+
+<h2 id="Usage_context">Usage context</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: html">&lt;svg width="100%" height="100%" viewBox="0 0 1000 300"
+     xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+  &lt;defs&gt;
+    &lt;path id="MyPath"
+          d="M 100 200
+             C 200 100 300   0 400 100
+             C 500 200 600 300 700 200
+             C 800 100 900 100 900 100" /&gt;
+  &lt;/defs&gt;
+
+  &lt;use xlink:href="#MyPath" fill="none" stroke="red"  /&gt;
+
+  &lt;text font-family="Verdana" font-size="42.5"&gt;
+    &lt;textPath xlink:href="#MyPath"&gt;
+      We go up, then we go down, then up again
+    &lt;/textPath&gt;
+  &lt;/text&gt;
+
+  &lt;!-- Show outline of the viewport using 'rect' element --&gt;
+  &lt;rect x="1" y="1" width="998" height="298"
+        fill="none" stroke="black" stroke-width="2" /&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>Live result:</p>
+
+<p>{{EmbedLiveSample("Example",500,175)}}</p>
+
+<h2 id="Attributes">Attributes</h2>
+
+<h3 id="Global_attributes">Global attributes</h3>
+
+<ul>
+ <li><a href="/en/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li>
+ <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Core attributes</a> »</li>
+ <li><a href="/en/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li>
+ <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">Presentation attributes</a> »</li>
+ <li><a href="/en/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">Xlink attributes</a> »</li>
+ <li>{{ SVGAttr("class") }}</li>
+ <li>{{ SVGAttr("style") }}</li>
+ <li>{{ SVGAttr("externalResourcesRequired") }}</li>
+</ul>
+
+<h3 id="Specific_attributes">Specific attributes</h3>
+
+<ul>
+ <li>{{ SVGAttr("startOffset") }}</li>
+ <li>{{ SVGAttr("method") }}</li>
+ <li>{{ SVGAttr("spacing") }}</li>
+ <li>{{ SVGAttr("xlink:href") }}</li>
+</ul>
+
+<h2 id="DOM_Interface">DOM Interface</h2>
+
+<p>This element implements the <code><a href="/en/DOM/SVGTextPathElement" title="en/DOM/SVGTextPathElement">SVGTextPathElement</a></code> interface.</p>
diff --git a/files/de/web/svg/element/view/index.html b/files/de/web/svg/element/view/index.html
new file mode 100644
index 0000000000..eea389a533
--- /dev/null
+++ b/files/de/web/svg/element/view/index.html
@@ -0,0 +1,149 @@
+---
+title: <view>
+slug: Web/SVG/Element/view
+translation_of: Web/SVG/Element/view
+---
+<div>{{SVGRef}}</div>
+
+<p>&lt;view&gt; ist ein definierter Weg, das Bild zu betrachten, wie eine Vergrößerungsstufe oder eine Detail-Ansicht.</p>
+
+<h2 id="Gebrauchs-Kontext">Gebrauchs-Kontext</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attribute">Attribute</h2>
+
+<h3 id="Globale_Attribute">Globale Attribute</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Aria_attributes" title="en/SVG/Attribute#Core">Bereichattribute</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Core_attributes" title="en/SVG/Attribute#Core">Kernattribute</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Global_event_attributes" title="en/SVG/Attribute#Core">Globale Ereignisattribute</a> »</li>
+ <li>{{SVGAttr("externalResourcesRequired")}}</li>
+</ul>
+
+<h3 id="Spezifische_Attribute">Spezifische Attribute</h3>
+
+<ul>
+ <li>{{SVGAttr("viewBox")}}</li>
+ <li>{{SVGAttr("preserveAspectRatio")}}</li>
+ <li>{{SVGAttr("zoomAndPan")}}</li>
+ <li>{{SVGAttr("viewTarget")}}</li>
+</ul>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<h3 id="SVG">SVG</h3>
+
+<pre class="brush: html">&lt;svg width="600" height="200" viewBox="0 0 600 200"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+  &lt;defs&gt;
+    &lt;radialGradient id="gradient"&gt;
+      &lt;stop offset="0%" stop-color="#8cffa0" /&gt;
+      &lt;stop offset="100%" stop-color="#8ca0ff" /&gt;
+    &lt;/radialGradient&gt;
+  &lt;/defs&gt;
+
+  &lt;circle r="50" cx="180" cy="50" style="fill:url(#gradient)"/&gt;
+
+  &lt;view id="halfSizeView" viewBox="0 0 1200 400"/&gt;
+  &lt;view id="normalSizeView" viewBox="0 0 600 200"/&gt;
+  &lt;view id="doubleSizeView" viewBox="0 0 300 100"/&gt;
+
+  &lt;a xlink:href="#halfSizeView"&gt;
+    &lt;text x="5" y="20" font-size="20"&gt;half size&lt;/text&gt;
+  &lt;/a&gt;
+  &lt;a xlink:href="#normalSizeView"&gt;
+    &lt;text x="5" y="40" font-size="20"&gt;normal size&lt;/text&gt;
+  &lt;/a&gt;
+  &lt;a xlink:href="#doubleSizeView"&gt;
+    &lt;text x="5" y="60" font-size="20"&gt;double size&lt;/text&gt;
+  &lt;/a&gt;
+&lt;/svg&gt;</pre>
+
+<h3 id="Ergebnis">Ergebnis</h3>
+
+<p>{{EmbedLiveSample("Example", 600, 200)}}</p>
+
+<h2 id="DOM_Interface">DOM Interface</h2>
+
+<p>This element implements the {{domxref("SVGViewElement")}} interface.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('SVG2', 'linking.html#ViewElement', '&lt;view&gt;')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'linking.html#ViewElement', '&lt;view&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("15.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("15.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/de/web/svg/index.html b/files/de/web/svg/index.html
new file mode 100644
index 0000000000..927ad8d406
--- /dev/null
+++ b/files/de/web/svg/index.html
@@ -0,0 +1,112 @@
+---
+title: SVG
+slug: Web/SVG
+translation_of: Web/SVG
+---
+<div class="callout-box">
+  <strong><a href="/de/docs/SVG/Tutorial" title="SVG/Tutorial">Einführung</a></strong><br>
+  Dieses Tutorial soll den Einstieg in SVG erleichtern.</div>
+<div>
+  <strong>Scalable Vector Graphics (SVG)</strong> ist eine <a href="/de/docs/XML" title="XML">XML</a>-Auszeichnungssprache zur Beschreibung zweidimensionaler Vektorgrafiken. Im Grunde ist SVG für Grafiken das, was XHTML für Texte ist.
+  <p>SVG ähnelt etwas der proprietären Flash-Technologie. Aber was SVG von Flash unterscheidet, ist, dass es ein <a class="external" href="http://www.w3.org/Graphics/SVG/">W3C Standard</a> ist und im Gegensatz zu einem geschlossenem Binärformat auf XML basiert. Es wurde geschaffen, um mit anderen Standards des <a class="external" href="http://www.w3.org/">W3C</a> zusammenzuarbeiten, wie zum Beispiel <a href="/de/docs/CSS" title="CSS">CSS</a>, <a href="/de/docs/DOM" title="DOM">DOM</a> und <a class="external" href="http://www.w3.org/AudioVideo/">SMIL</a>.</p>
+</div>
+<table class="topicpage-table">
+  <tbody>
+    <tr>
+      <td>
+        <h2 class="Documentation" id="Dokumentation">Dokumentation</h2>
+        <dl>
+          <dt>
+            <a href="/de/docs/SVG/Element" title="SVG/Element">SVG Elementreferenz</a></dt>
+          <dd>
+            Detaillierte Informationen über die von Gecko unterstützen SVG Elemente.</dd>
+          <dt>
+            HTML-Inhalte mit SVG aufwerten</dt>
+          <dd>
+            SVG arbeitet mit HTML, CSS und JavaScript zusammen und kann verwendet werden, um eine normale HTML-Seite oder eine Webapplikation mit Vektorgrafiken zu bereichern.</dd>
+        </dl>
+        <ul>
+          <li>Tutorial zur Verwendung von <a href="/de/docs/SVG_In_HTML_Introduction" title="SVG_in_HTML_einbinden">SVG in HTML</a></li>
+          <li>Live Beispiele: Google <a class="external" href="http://maps.google.com"> Maps</a> und <a class="external" href="http://docs.google.com">Docs</a> oder <a class="external" href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">SVG Bubble Menü</a></li>
+        </ul>
+        <dl>
+          <dt>
+            SVG in Mozilla</dt>
+          <dd>
+            Hinweise und Informationen über die Implementierung von SVG in Mozilla.</dd>
+        </dl>
+        <ul>
+          <li>Derzeit <a href="/de/docs/SVG_im_Firefox" title="SVG_im_Firefox">unterstützte SVG Features</a> im Firefox</li>
+          <li><a class="external" href="http://jwatt.org/svg/authoring/">SVG Authoring Guidelines</a> (en)</li>
+          <li>Eine Übersicht zum <a href="/de/docs/Mozilla_SVG_Projekt" title="Mozilla_SVG_Projekt">Mozilla SVG Projekt</a></li>
+          <li><a href="/de/docs/SVG/FAQ" title="SVG/FAQ">Häufig gestellte Fragen</a> im Bezug auf SVG und Mozilla</li>
+          <li>Folien und Demos zu <a class="external" href="http://jwatt.org/svg-open/2009/slides.xhtml" title="http://jwatt.org/svg-open/2009/slides.xhtml">SVG und Mozilla</a> von der SVG Open 2009</li>
+        </ul>
+        <dl>
+          <dt>
+            <a href="/de/docs/SVG/SVG_Animationen_mit_SMIL" title="SVG/SVG_Animationen_mit_SMIL">SVG Animationen mit SMIL</a></dt>
+          <dd>
+            Wie SVG Animationen mittels SMIL realisiert werden können.</dd>
+        </dl>
+        <h2 class="Related_Topics" id="Beispiele">Beispiele</h2>
+        <dl>
+          <dt>
+            Das SVG Bildformat</dt>
+          <dd>
+            SVG ist ein Bildformat für Vektorgrafiken, welche den großen Vorteil haben, dass sie ohne Verlust der Bildqualität skaliert werden können. Bei Rastergrafiken (Bitmaps) ist dies nicht möglich.</dd>
+        </dl>
+        <ul>
+          <li><a class="external" href="http://croczilla.com/bits_and_pieces/svg/samples/lion/lion.svg" title="http://croczilla.com/bits_and_pieces/svg/samples/lion/lion.svg">Löwe</a>, <a class="external" href="http://croczilla.com/bits_and_pieces/svg/samples/butterfly/butterfly.svg" title="http://croczilla.com/bits_and_pieces/svg/samples/butterfly/butterfly.svg">Schmetterling</a> &amp; <a class="external" href="http://croczilla.com/bits_and_pieces/svg/samples/tiger/tiger.svg" title="http://croczilla.com/bits_and_pieces/svg/samples/tiger/tiger.svg">Tiger</a></li>
+          <li><a class="external" href="http://plurib.us/1shot/2007/svg_gallery/">SVG Galerie</a></li>
+          <li>weitere Beispiele: <a class="external" href="http://croczilla.com/bits_and_pieces/svg/samples" title="http://croczilla.com/bits_and_pieces/svg/samples">SVG Samples auf croczilla.com</a>, <a class="external" href="http://www.carto.net/papers/svg/samples/">carto.net</a></li>
+        </ul>
+        <dl>
+          <dt>
+            Animationen und Interaktionen</dt>
+          <dd>
+            Wie HTML, hat SVG ein <em>Document Model</em> (DOM) sowie Events und kann mittels JavaScript angesprochen werden. Das erlaubt Entwicklern animierte und interaktive Grafiken zu erstellen.</dd>
+        </dl>
+        <ul>
+          <li>Interaktive <a class="external" href="http://people.mozilla.com/~vladimir/demos/photos.svg">Foto</a> Manipulationen</li>
+          <li><a class="external" href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">HTML Transformationen</a> mittels <code>foreignObject</code></li>
+        </ul>
+        <dl>
+          <dt>
+            Karten, grafische Darstellungen, Spiele und 3D Experimente</dt>
+          <dd>
+            Hier sind einige Beispiele aufgelistet, die starken Gebrauch von SVG machen.</dd>
+        </dl>
+        <ul>
+          <li><a class="external" href="http://www.croczilla.com/svg/samples/svgtetris/svgtetris.svg">Tetris</a>, <a class="external" href="http://www.codedread.com/yastframe.php">Yet Another SVG Tetris</a> &amp; <a class="external" href="http://www.treebuilder.de/svg/connect4.svg">Connect 4</a></li>
+          <li><a class="external" href="http://files.myopera.com/orinoco/svg/USStates.svg">Find the State</a></li>
+          <li><a class="external" href="http://www.carto.net/papers/svg/us_population/index.html">Bevölkerungskarte der USA</a> und <a class="external" href="http://www.destatis.de/jetspeed/portal/cms/Sites/destatis/Internet/EN/Content/Statistics/Bevoelkerung/VorausberechnungBevoelkerung/InteraktiveDarstellung/Content75/Bevoelkerungspyramide1W1,templateId=renderSVG.psml">deutsche Bevölkerungspyramide</a></li>
+          <li><a class="external" href="http://www.treebuilder.de/default.asp?file=441875.xml">3D Box</a> &amp; <a class="external" href="http://www.treebuilder.de/default.asp?file=206524.xml">3D Boxen</a></li>
+          <li><a class="external" href="http://www.amaltas.org/svgapp">SVG+DOM Tool zum Zeichen</a></li>
+        </ul>
+        <p><span class="alllinks"><a href="/de/docs/tag/SVG" title="tag/SVG">Alle anzeigen...</a></span></p>
+      </td>
+      <td>
+        <h2 class="Community" id="Community">Community</h2>
+        <ul>
+          <li>Mozillas SVG Foren:</li>
+        </ul>
+        <p>{{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}</p>
+        <ul>
+          <li><a class="external" href="http://wiki.svg.org/">SVG Wiki</a></li>
+        </ul>
+        <h2 class="Tools" id="Tools">Tools</h2>
+        <ul>
+          <li><a class="external" href="http://www.w3.org/Graphics/SVG/Test/">SVG Test Suite</a></li>
+          <li><a class="external" href="http://jiggles.w3.org/svgvalidator/">SVG Validator</a></li>
+          <li><a href="/de/docs/tag/SVG:Tools" title="tag/SVG:Tools">weitere...</a></li>
+        </ul>
+        <h2 class="Related_Topics" id="Verwandte_Themen">Verwandte Themen</h2>
+        <ul>
+          <li><a href="/de/docs/XML" title="XML">XML</a>, <a href="/de/docs/HTML/Canvas" title="HTML/Canvas">Canvas</a></li>
+        </ul>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<div>
+  {{HTML5ArticleTOC}}</div>
diff --git a/files/de/web/svg/namespaces_crash_course/index.html b/files/de/web/svg/namespaces_crash_course/index.html
new file mode 100644
index 0000000000..baf963151a
--- /dev/null
+++ b/files/de/web/svg/namespaces_crash_course/index.html
@@ -0,0 +1,197 @@
+---
+title: Namespace Kurzanleitung
+slug: Web/SVG/Namespaces_Crash_Course
+tags:
+  - Namensraum
+  - Vektorgrafik
+translation_of: Web/SVG/Namespaces_Crash_Course
+---
+<p>Als <a href="/en-US/docs/Glossary/XML" title="en-US/docs/Glossary/XML">XML</a> Dialekt verfügt <a href="/en-US/docs/Web/SVG" title="en-US/docs/Web/SVG">SVG</a> über einen eigenen <em>Namespace</em>. Es ist wichtig, Konzept und Anwendung von <em>Namespaces</em> zu verstehen, will man SVG Inhalte selber erstellen. Der Veröffentlichung von Firefox 1.5 vorausgehende Versionen von SVG zollten diesen kaum Beachtung. <em>Namespaces</em> sind jedoch wichtig für Multi-XML Dialekt unterstützende <em>User Agents</em> wie z.B. <a href="/en-US/docs/Mozilla/Gecko" title="en-US/docs/Mozilla/Gecko">Gecko</a>-basierte Browser, die sehr streng damit verfahren.<br>
+ Nehmen Sie sich die Zeit, <em>Namespaces</em> zu verstehen. Es wird Ihnen allerhand Kopfschmerzen in der Zukunft ersparen.</p>
+
+<h3 id="Hintergrund">Hintergrund</h3>
+
+<p>Es ist lange schon ein Ziel des W3C, die gleichzeitige Verwendung verschiedener Typen XML-basierter Inhalte im selben XML-Dokument zu ermöglichen.<br>
+ So können z.B. SVG and <a href="/en-US/docs/Web/MathML" title="en-US/docs/Web/MathML">MathML</a> direkt in ein XHTML-basiertes wissenschaftliches Dokument eingefügt werden. Die Möglichkeit, verschiedenartige Inhalte zu mischen, bietet viele Vorteile, setzte aber die Lösung sehr konkreter Probleme voraus.</p>
+
+<p>Selbstverständlich beschreibt jeder XML Dialekt die Bedeutung seiner <em>Markup Tag</em> Bezeichnungen in einer eigenen Spezifikation. Das Problem beim Mischen von Inhalten aus verschiedenen XML-Dialekten im selben XML-Dokument ist, dass <em>Tags</em> aus dem einen Dialekt auch im anderen definiert sein können. So gibt es z.B. sowohl in XHTML wie auch in SVG das <code>&lt;title&gt;</code> <em>Tag</em>. Wie soll der <em>User Agent</em> die beiden unterscheiden?<br>
+ Woran erkennt der User Agent überhaupt die Bedeutung von XML Inhalten oder ob es sich um für ihn bedeutungslose Tags aus einer beliebigen XML-Datei handelt?</p>
+
+<p>Man könnte fälschlicherweise annehmen, dass er dies anhand der <code>DOCTYPE</code> Deklaration erkennt. <em>DTD</em>s wurden jedoch nicht mit Blick auf gemischte Inhalte entworfen und Versuche, <em>DTD</em>s für gemischte Inhalte zu erstellen, sind letztlich gescheitert.</p>
+
+<p>XML und einige XML Dialekte (einschließlich SVG) erfordern keine <code>DOCTYPE</code> Deklaration und SVG 1.2 wird nicht einmal eine haben.  Der Umstand, daß <code>DOCTYPE</code> Deklarationen meist dem Typ des Seiteninhalts entsprechen, ist rein zufällig. DTDs werden zur Validierung, nicht zur Identifizierung von Inhalten benötigt. <em>User Agents</em>, die schummeln und XML-Inhalte per <code>DOCTYPE</code> Deklaration identifizieren, verursachen Probleme.</p>
+
+<p>Korrekterweise sollte der XML-Inhalt dem <em>User Agent</em> mitteilen, welchem Dialekt <em>Tag</em> Bezeichnungen angehören, indem den <em>Tags</em> explizite <em>Namespace Declarations</em> zugewiesen werden.</p>
+
+<h3 id="Declaring_namespaces" name="Declaring_namespaces">Namensraumzuweisung</h3>
+
+<p>Wie sehen Namensraumzuweisungen (<em>Namespace Declarations</em>) aus und wie werden sie konkret verwendet? Hier ein Beispiel: </p>
+
+<pre>&lt;svg xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- weitere tags folgen... --&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>Die <em>Namespace</em> Deklaration ist durch das Attribut <code>xmlns</code> gegeben. Dieses Attribut besagt, daß das <code>&lt;svg&gt;</code> Tag und seine Kinder-Tags zu dem XML-Dialekt gehören, der dem Namespace <code><span class="nowiki">'http://www.w3.org/2000/svg'</span></code> entspricht, hier eben SVG.<br>
+ Die <em>Namespace</em> Deklaration hat nur einmal zu erfolgen und zwar im Ursprungs-Tag (<em>root tag</em>). Diese Deklaration definiert den <em>Namespace</em> als Voreinstellung, sodass der <em>User Agent </em>weiß, daß alle dem <code>&lt;svg&gt;</code> Tag<em> </em>untergeordneten Tags demselben <em>Namespace</em> angehören. <em>User Agents</em> prüfen den <em>Namespace</em> um herauszufinden, ob sie mit dem enthaltenen <em>Markup</em> umgehen können.</p>
+
+<p>Der <em>Namespace</em> Name (sprich das <code>xmlns</code> Attribut) ist ein einfacher <em>String</em>, sodass der Umstand, daß der SVG Namespace wie ein URI aussieht, nicht weiter wichtig ist. URIs werden allgemein benutzt, weil sie einzigartig sind und nicht, um irgendetwas zu verlinken. URIs werden tatsächlich so häufig verwendet, dass allgemein der Begriff "Namespace URI" gebräuchlicher ist als "Namespace Name".</p>
+
+<h4 id="Redeclaring_the_default_namespace" name="Redeclaring_the_default_namespace">Umdeklarierung eines vorgegebenen Namensraums</h4>
+
+<p>Wenn alle Nachkommen des Ursprungs-Tags automatisch dem dadurch vorgegebenen <em>Namespace</em> angehören, wie streut man dann Inhalte aus einem anderen <em>Namespace</em> ein? Die einfache Antwort lautet, man redefiniert den Vorgabe-<em>Namespace</em>. So zum Beispiel:</p>
+
+<pre>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
+  &lt;body&gt;
+    &lt;!-- some XHTML tags here --&gt;
+    &lt;svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px"&gt;
+      &lt;!-- some SVG tags here --&gt;
+    &lt;/svg&gt;
+    &lt;!-- some XHTML tags here --&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>In diesem Beispiel deklariert das <code>xmlns</code> Attribut des ursprünglichen <code>&lt;html&gt;</code> Tags den vorgegebenen Namensraum als XHTML. Somit werden dieses und alle nachkommenden Tags als XHTML intepretiert, mit Ausnahme des <code>&lt;svg&gt;</code> Tags. Das <code>&lt;svg&gt;</code> Tag hat sein eigenes <code>xmlns</code> Attribut und deklariert somit den ursprünglichen Namensraum um, was bewirkt, dass dieses Tag mitsamt Nachkommen (sofern diese nicht ihrererseits Namensräume erneut umdeklarieren) vom User Agent als SVG erkannt wird.</p>
+
+<p>Na also, war doch nicht schwer.</p>
+
+<h4 id="Declaring_namespace_prefixes" name="Declaring_namespace_prefixes">Namensraumpräfixe deklarieren</h4>
+
+<p>XML-Dialekte definieren außer eigenen Tags auch eigene Attribute. Ursprünglich gehören Attribute zu keinem Namensraum und sind nur deshalb einzigartig, weil sie einem Element mit einzigartigem, eindeutigem Namen zugeordnet sind. </p>
+
+<p>Manchmal ist es jedoch nötig, Attribute zu definieren, die in vielen verschiedenen Elementen wiederverwendbar sein müssen und trotzdem dasselbe Attribut verkörpern, egal von welchem Element sie verwendet werden. Ein besonders gutes Beispiel hierfür ist das von der XLink Spezifikation definierte <code>href</code> Attribut. Dieses Attribut wird allgemein auch von anderen XML-Dialekten verwendet zum Verlinken externer Quellen. Aber wie teilt man dem <em>User Agent</em> mit, zu welchem XML-Dialekt das Attribut gehört, z.B. XLink? Betrachten wir dazu folgendes Beispiel:</p>
+
+<pre>&lt;svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+  &lt;script xlink:href="cool-script.js" type="text/ecmascript"/&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>Hier sehen wir das etwas merkwürdige Attribut <code>xmlns:xlink</code>. Vom <code>xmlns</code> Bestandteil ist abzuleiten, daß hier eine weitere Namensraumdeklaration vorliegt. Allerdings wird hier nicht der Vorgabenamensraum festgelegt, sondern der Namensraum für ein "Namensraum Präfix". In diesem Fall wurde das Präfix <code>xlink</code> (der zweite Teil des Attributs) gewählt, um damit dem User Agent etwas über Attribute aus dem Namensraum XLink mitzuteilen.</p>
+
+<p>Der Begriff Namensraum<em>präfix</em> deutet bereits an, dass damit Attribut- und Tag-Bezeichnungen in Ihrer Bedeutung eingegrenzt werden (ähnlich wie Vorsilben bzw. Präfixe die Bedeutung von Begriffen in menschlicher Sprache modifizieren). Dies geschieht indem das Namensraumpräfix und ein Doppelpunkt dem Attributnamen vorangestellt werden, wie im obigen Beispiel beim <code>&lt;script&gt;</code> Tag zu sehen. Das erklärt dem <em>User Agent</em>, daß dieses spezielle Attribut zu dem Namensraum gehört, der mit dem Namenraumpräfix XLink deklariert wurde, und ein Attribut ist, das mit derselben Bedeutung in anderen Tags verwendet werden kann.</p>
+
+<p>Es ist ein XML Fehler, ein Präfix zu benutzen, das nicht an einen Namenraum gebunden wurde. Die mit dem <code>xmlns:xlink</code> Attribut erzeugte Bindung im obigen Beispiel ist unverzichtbar, wenn das <code>xlink:href</code> Attribut keinen Fehler hervorrufen soll. Dieses XLink Attribut wird regelmäßig in SVG benutzt, u.a. mit <code>&lt;a&gt;</code>, <code>&lt;use&gt;</code> und <code>&lt;image&gt;</code> Tags. Darum ist es eine gute Idee, die XLink Deklaration in allen Dokumenten miteinzubeziehen.</p>
+
+<p>Es ist nützlich zu wissen, dass Namensraumpräfixe auch als <em>Tag</em>-Namen genutzt werden können. Dies vermittelt dem <em>User Agent </em>die Zugehörigkeit eines bestimmten <em>Tags</em> (in diesem Fall jedoch nicht die seiner Kinder!) zu dem Namensraum des Präfixes. Dieses Wissen erspart einige Verwirrung, falls man Markup wie dem folgenden begegnet:  </p>
+
+<pre>&lt;html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:svg="http://www.w3.org/2000/svg"&gt;
+  &lt;body&gt;
+    &lt;h1&gt;SVG embedded inline in XHTML&lt;/h1&gt;
+    &lt;svg:svg width="300px" height="200px"&gt;
+      &lt;svg:circle cx="150" cy="100" r="50" fill="#ff0000"/&gt;
+    &lt;/svg:svg&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Weil hier das Namensraumpräfix verwendet wurde für das <code>&lt;svg:svg&gt; </code>Tag und sein Kind <code>&lt;svg:circle&gt;</code>, war es nicht nötig, den Standardnamensraum erneut zu deklarieren. Allgemein ist es jedoch besser, den Standardnamensraum erneut auszuweisen als eine Menge Tags derart mit Präfixen zu versehen.  </p>
+
+<h3 id="Scripting_in_namespaced_XML" name="Scripting_in_namespaced_XML">Arbeiten mit Namensraum-XML</h3>
+
+<p>Namensräume haben nicht nur Auswirkungen auf <em>Markup</em>, sondern auch auf <em>Scripte</em>. Wer <em>Scripte</em> für Namensraum-XML wie z.B. SVG verfasst, sollte weiterlesen. </p>
+
+<p>Die Empfehlung zu <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/">DOM Level 1</a> wurde geschaffen bevor <a class="external" href="http://www.w3.org/TR/REC-xml-names/">die ursprüngliche Empfehlung zu Namenräumen in XML</a> freigegeben wurde. Deshalb kennt DOM1 keine Namensräume, was Probleme verursacht bei Namensraum-XML wie z.B. SVG. Um diese Probleme zu lösen, führte <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/">DOM Level 2 Core</a> Namenraum berücksichtigende Entsprechungen zu allen anwendbaren DOM Level 1 Methoden ein. Beim Kodieren von SVG ist es wichtig, diese <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#Namespaces-Considerations">den Namensraum berücksichtigenden Methoden</a> zu verwenden.<br>
+ Die folgende Tabelle listet alle DOM1 Methoden auf, die nicht in SVG benutzt werden sollten, außerdem ihre DOM2 Entsprechungen, die stattdessen verwendet werden sollten.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>DOM1<br>
+    (nicht verwenden)</th>
+   <th>DOM2<br>
+    (stattdessen diese verwenden!)</th>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-createAttribute">createAttribute</a></td>
+   <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-DocCrAttrNS">createAttributeNS</a></td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-createElement">createElement</a></td>
+   <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-DocCrElNS">createElementNS</a></td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getAttributeNode">getAttributeNode</a></td>
+   <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElGetAtNodeNS">getAttributeNodeNS</a></td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getAttribute">getAttribute</a></td>
+   <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElGetAttrNS">getAttributeNS</a></td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getElementsByTagName">getElementsByTagName</a></td>
+   <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getElBTNNS">getElementsByTagNameNS</a> (also <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-A6C90942">added to Element</a>)</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getNamedItem">getNamedItem</a></td>
+   <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getNamedItemNS">getNamedItemNS</a></td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#">hasAttribute</a></td>
+   <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElHasAttrNS">hasAttributeNS</a></td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeAttribute">removeAttribute</a></td>
+   <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElRemAtNS">removeAttributeNS</a></td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeNamedItem">removeNamedItem</a></td>
+   <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-removeNamedItemNS">removeNamedItemNS</a></td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttribute">setAttribute</a></td>
+   <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAttrNS">setAttributeNS</a></td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttributeNode">setAttributeNode</a></td>
+   <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAtNodeNS">setAttributeNodeNS</a></td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setNamedItem">setNamedItem</a></td>
+   <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-setNamedItemNS">setNamedItemNS</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Das erste Argument für alle DOM2 Methoden, die den Namespace berücksichtigen, muss der Namespace Name (auch Namespace URI genannt) des betroffenen Elementes oder Attributes sein. Das ist für SVG <strong>Elemente</strong> <span class="nowiki">'http://www.w3.org/2000/svg'</span>. Beachten Sie jedoch: die Empfehlung <a class="external" href="http://www.w3.org/TR/xml-names11/#defaulting">Namespaces in XML 1.1</a> besagt, dass der Namespace Name für Attributes ohne Prefix keinen Wert enthält. Anders ausgedrückt, obwohl die Attribute zum Namespace des Tags gehören, verwenden Sie den Namespace Namen nicht, sonder <strong>setzen den Namespace Namen auf null. </strong> Um also ein SVG <code>rect</code> <em>Element</em> mit <code>document.createElementNS()</code> zu erstellen, gehen Sie folgendermaßen vor:</p>
+
+<pre><code class="language-javascript">document.createElementNS('http://www.w3.org/2000/svg', 'rect');</code></pre>
+
+<p>Um nun das <code>x</code> <em>Attribut</em> des SVG <code>rect</code> Elementes auszulesen, verfahren Sie wie folgt:</p>
+
+<pre class="eval"><code class="language-javascript">rect.getAttributeNS(<strong>null</strong>, 'x');</code></pre>
+
+<p>Beachten Sie, dass sich dies nicht auf Attribute <em>mit</em> Namespace Prefix anwendet (Attribute, die nicht zum gleichen XML Dialect gehören, wie der Tag). Attribute wie  <code>xlink:href</code> erfordern den Namespace Namen, der dem Prefix zugewiesen wurde (z.B. <span class="nowiki">http://www.w3.org/1999/xlink</span> für XLink). Um den Wert des <code>xlink:href</code> Attributs eines <code>&lt;a&gt;</code> Elements in SVG auszulesen, schreibt man:</p>
+
+<pre><code class="language-javascript">elt.getAttributeNS('http://www.w3.org/1999/xlink', 'href');</code></pre>
+
+<p>Um Attribute mit einem Namespace zu setzen, wird empfohlen (aber nicht erzwungen), dass man auch ihr Prefix als zweites Argument übergibt, so dass das DOM später wieder einfacher nach to XML zurückkonvertriert werden kann (wenn man es z.B. zurück zum Server senden möchte). Ein beispiel:</p>
+
+<pre><code class="language-javascript">elt.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'otherdoc.svg');</code></pre>
+
+<p>Als letztes Beispiel wird aufgezeigt wie man ein an <code>&lt;image&gt;</code> Element dynamisch mit Hilfe eines Scripts erzeugt:</p>
+
+<pre><code class="language-javascript">var SVG_NS = 'http://www.w3.org/2000/svg';
+var XLink_NS = 'http://www.w3.org/1999/xlink';
+var image = document.createElementNS(SVG_NS, 'image');
+image.setAttributeNS(null, 'width', '100');
+image.setAttributeNS(null, 'height', '100');
+image.setAttributeNS(XLink_NS, 'xlink:href', 'flower.png');
+</code></pre>
+
+<h3 id="Conclusion" name="Conclusion">Conclusion</h3>
+
+<p>Stellen Sie sicher, dass Sie die von Ihnen in der XML Datei verwendeten Namespaces deklarieren. Erfolgt diese Deklaration nicht, werden User Agents wie Firefox den Inhalt nicht erkennen und nur XML Markup anzeigen oder den Anwender informieren, dass ein XML Fehler aufgetreten ist. Es ist empfehlenswert, für das Erstellen einer neuen SVG Datei eine Vorlage zu verwenden, die alle für gewöhnlich verwendeten Namespace Deklarationen enthält. Hat man eine solche Vorlage nicht, kann man mit dem folgenden Code starten:</p>
+
+<pre>&lt;svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>Selbst wenn nicht alle aufgeführten Namespaces in einem Dokument verwendet werden, stören die Namespace Deklarationen nicht. Es kann einen vor Problemen bewahren, wenn man das Dokument zu einem späteren Zeitpunkt ergänzt und dabei Elemente aus einer der Deklarationen verwendet.</p>
+
+<h3 id="A_full_example" name="A_full_example">Vollständiges Beispiel</h3>
+
+<p>Als vollständiges Beispiel dient <a href="/en-US/docs/Web/SVG/Namespaces_Crash_Course/Example">SVG: Namespaces Crash Course: Example</a>.</p>
diff --git a/files/de/web/svg/tutorial/einführung/index.html b/files/de/web/svg/tutorial/einführung/index.html
new file mode 100644
index 0000000000..9e4250ed20
--- /dev/null
+++ b/files/de/web/svg/tutorial/einführung/index.html
@@ -0,0 +1,21 @@
+---
+title: Einführung
+slug: Web/SVG/Tutorial/Einführung
+tags:
+  - SVG
+  - 'SVG:Tutorial'
+translation_of: Web/SVG/Tutorial/Introduction
+---
+<p>{{ PreviousNext("SVG/Tutorial", "SVG/Tutorial/Erste_Schritte") }}</p>
+<p><img align="right" alt="" class="internal" src="/@api/deki/files/348/=SVG_Overview.png"></p>
+<p><a class="internal" href="/De/SVG" rel="internal" title="De/SVG">SVG</a> ist eine <a class="internal" href="/de/XML" title="De/XML">XML</a>-Sprache, vergleichbar mit <a class="internal" href="/De/XHTML" rel="internal" title="De/XHTML">XHTML</a>, die zum zeichnen von Grafiken benutzt werden kann (wie die Grafik auf der rechten Seite). Die Bilder können entweder mit den benötigten Linien und Formen, oder durch Veränderungen an bereits bestehende Rasterbildern erstellt werden. Eine Kombinationen aus beiden Möglichkeiten ist auch möglich. Das Bild und deren Komponenten können auch umgewandelt, zusammengestellt oder gefiltert werden, um das Aussehen komplett zu verändern.</p>
+<p>SVG erschien im Jahre 1999 nachdem mehrere Formate zum <a class=" external" href="http:///w3.org">W3C</a> eingeschickt wurden und gescheitert sind, um ratifiziert zu werden. Während die Spezifikationen im Laufe der Zeit erweitert wurden, sind die Browserimplementationen nur langsam fortgeschritten, und so gibt es nur wenige SVG-Inhalte, die heutzutage im Web genutzt werden (2009). Die Implementationen werden nur langsam weiterentwickelt, während <a class="internal" href="/De/HTML/Canvas" rel="internal" title="De/HTML/Canvas">HTML:Canvas</a> oder Adobe Flash sehr schnell weiterentwickelt werden und dadurch schon sehr ausgereift sind. SVG bietet Vorteile gegenüber beiden Technologien: Eine DOM Schnittstelle ist verfügbar und es wird keine Drittanbieter-Erweiterung für den Browser benötigt, um die Inhalte darzustellen. Ob man SVG verwendet oder nicht, hängt häufig davon ab, wofür es verwendet werden soll.</p>
+<h3 id="Vor_dem_Beginn">Vor dem Beginn</h3>
+<p>Es gibt eine Reihe von Grafikprogramme, wie zum Beispiel <a class="external" href="http://www.inkscape.org/">Inkscape</a>, welche kostenlos sind und SVG als natives Dateiformat benutzen. Dieses Tutorial hält sich jedoch an einen Texteditor ihrer Wahl, um SVG Dateien zu erstellen. Die Idee ist, SVG als solches zu verstehen und das geht am Besten, in dem man selbst Hand anlegt, um ein bisschen Markup zu schreiben. Nicht alle SVG Viewer sind gleich und daher ist die Wahrscheinlichkeit groß, dass etwas, was für eine bestimmte Anwendung geschrieben wurde, nicht exakt gleich in einem anderem Programm aussieht. Das liegt einfach an der unterschiedlichen Unterstützung der SVG Spezifikation oder anderen Technologien, die ebenfalls verwendet werden (wie <a href="/de/JavaScript" title="de/JavaScript">JavaScript</a> oder <a href="/de/CSS" title="de/CSS">CSS</a>).</p>
+<p>SVG wird nicht in allen modernen Browsern vollständig unterstützt (obwohl es nach und nach kommt). Eine ziemlich vollständige Liste von SVG Viewern findet sich im <a class="external" href="http://wiki.svg.org/Viewer_Implementations">SVG Wiki</a>. Firefox unterstützt einige SVG Inhalte seit Version 1.5 und mit jedem Release kommt ein Stück dazu. Mit diesem Tutorial kann das MDC vielleicht einigen Entwicklern helfen, auf dem neustem Stand, im Vergleich der Gecko Implementation mit anderen Implementationen, zu bleiben.</p>
+<p>Bevor man anfängt sich mit SVG auseinander zu setzen, sollte ein grundlegendes Verständnis von XML oder anderen Auszeichnungssprachen wie HTML vorhanden sein. Falls Sie nicht so ganz mit XML vertraut sein sollten, sind hier ein paar Richtlinien an die man sich halten sollte:</p>
+<ul> <li>SVG Elemente und Attribute sollten alle so geschrieben werden, wie sie hier gezeigt werden, da XML case-sensitiv ist. (im Gegensatz zu HTML)</li> <li>Atrributwerte müssen in SVG in Anführungszeichen gesetzt werden, auch wenn sie Zahlen sind.</li>
+</ul>
+<p>SVG ist eine große Spezifikation. Dieses Tutorial versucht die Grundlagen zu behandeln. Wenn Sie erstmal mit den Grundlagen vertraut sind, sollten Sie in der Lage sein die <a href="/de/SVG/Elementreferenz">Elementreferenz</a> und die <a href="/de/SVG/Schnittstellenreferenz">Schnittstellenreferenz</a> zu verwenden, um alles Weitere zu finden.</p>
+<p>{{ PreviousNext("SVG/Tutorial", "SVG/Tutorial/Erste_Schritte") }}</p>
+<p>{{ languages( { "en": "en/SVG/Tutorial/Introduction", "fr": "fr/SVG/Tutoriel/Introduction", "ja": "ja/SVG/Tutorial/Introduction" } ) }}</p>
diff --git a/files/de/web/svg/tutorial/fills_and_strokes/index.html b/files/de/web/svg/tutorial/fills_and_strokes/index.html
new file mode 100644
index 0000000000..2dd5fb9a7f
--- /dev/null
+++ b/files/de/web/svg/tutorial/fills_and_strokes/index.html
@@ -0,0 +1,147 @@
+---
+title: Fills and Strokes
+slug: Web/SVG/Tutorial/Fills_and_Strokes
+tags:
+  - Anfänger
+  - SVG
+  - 'SVG:Tutorial'
+translation_of: Web/SVG/Tutorial/Fills_and_Strokes
+---
+<p>{{ PreviousNext("Web/SVG/Tutorial/Paths", "Web/SVG/Tutorial/Gradients") }}</p>
+
+<p>Es gibt mehrere Möglichkeiten die Farben von Formen mit zu verändern, mit Inline CSS (inklusive Attributen am Objekt), eingebettetem CSS oder einer externen CSS Datei. Die meisten <a href="/en-US/docs/Glossary/SVG">SVG</a>s im Netz nutzen Inline CSS, aber jede Möglichkeit hat Vor- und Nachteile.</p>
+
+<h2 id="Fill_and_Stroke_Attributes" name="Fill_and_Stroke_Attributes">Füllungs- und Konturattribute</h2>
+
+<h3 id="Painting" name="Painting">Malen</h3>
+
+<p>Durch das Setzen zweier Attribute beim Element, kann einfache Farbgebung durchgeführt werden: <code>fill</code> und <code>stroke</code>. Dabei setzt <code>fill </code>die Farbe innerhalb des Objektes, während <code>stroke</code> die Farbe der Linien um das Objekt herum bestimmt. Es können die gleichen Namensschemen für CSS Farben genutzt werden, welche auf bei HTML Elementen verwendet werden - also Farbnamen (z.B. <em>red</em>), RGB Werte (z.B. <em>rgb(255, 0, 0)</em>, HEX Codes, rgba und weitere).</p>
+
+<pre class="brush:xml;"> &lt;rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple"
+       fill-opacity="0.5" stroke-opacity="0.8"/&gt;
+</pre>
+
+<p>Zusätzlich kann die Durchsichtigkeit von <code>fill</code> und <code>stroke</code> in SVG verändert werden. Diese wird durch die <code>fill-opacity</code> und <code>stroke-opacity</code> Attribute gesetzt.</p>
+
+<div class="note style-wrap">Bemerkung: In Firefox 3+ sind auch rgba Werte möglich, und erzeugen den gleichen Effekt, allerdings wird empfohlen aus Kompatibilitätsgründen fill/stroke-opacity separat zu setzen. Wenn ein rgba Wert und ein fill/stroke-opacity Wert gesetzt wird, so werden beide angewendet.</div>
+
+<h3 id="Stroke" name="Stroke">Kontur</h3>
+
+<p>Zusätzlich zu ihren Farbeigeschaften gibt es noch einige andere Attribute, welche festlegen wie eine Kontur auf einer Linie gezeichnet wird.</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/355/=SVG_Stroke_Linecap_Example.png" style="float: right;"></p>
+
+<pre class="brush:xml;">&lt;?xml version="1.0" standalone="no"?&gt;
+&lt;svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
+  &lt;line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/&gt;
+  &lt;line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/&gt;
+  &lt;line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>Die <code>stroke-width</code> Eigenschaft setzt die Breite der Kontur. Konturen werden immer zentriert auf dem Pfad gezeichnet. Im obigen Beispiel ist der Pfad in Pink und die Kontur in Schwarz dargestellt.</p>
+
+<p>Die zweite Eigenschaft von Konturen ist <code>stroke-linecap</code>, welchen ebenfalls oben gezeigt ist. Diese kontrolliert die Form der Konturenden.</p>
+
+<p>Es gibt drei mögliche Werte für <code>stroke-linecap</code>:</p>
+
+<ul>
+ <li><code>butt</code> schließt die Kontur mit einer Geraden Kante, welche senkrecht zur Richtung der Kontur steht und deren Ende schneidet.</li>
+ <li><code>square</code> ist sehr ähnlich, geht allerdings ein wenig über das Ende des Pfades hinaus. Die Überstand ist gleich der halben Konturbreite (<code>stroke-width</code>).</li>
+ <li><code>round</code> erzeugt eine Rundung am Ende der Kontur. Der Radius dieser Runding hängt ebenfalls von <code>stroke-width</code> ab.</li>
+</ul>
+
+<p>Die <code>stroke-linejoin</code> Eigenschaft kann verwendet werden, um zu kontrollieren wie Verbindung zweier Liniensegmente gezeichnet wird.</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/356/=SVG_Stroke_Linejoin_Example.png" style="float: right;"></p>
+
+<pre class="brush:xml;">&lt;?xml version="1.0" standalone="no"?&gt;
+&lt;svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
+  &lt;polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20"
+      stroke-linecap="butt" fill="none" stroke-linejoin="miter"/&gt;
+
+  &lt;polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20"
+      stroke-linecap="round" fill="none" stroke-linejoin="round"/&gt;
+
+  &lt;polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20"
+      stroke-linecap="square" fill="none" stroke-linejoin="bevel"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>Im obigen Beispiel werden jeweils zwei Liniensegmente verbunden. Die Verbindung zwischen beiden wird durch das <code>stroke-linejoin</code> Attribut kontrolliert. Es gibt auch hier drei mögliche Werte. <code>miter</code> erweitert die Kontur leicht, um eine "quadratische Ecke" zu generieren, die nur einen Knick hat. <code>round</code> produziert eine abgerundete Ecke. <code>bevel</code> generiert eine glatte Kante am Übergang, wodurch zwei Knicke entstehen.</p>
+
+<p>Abschließend können auch gestrichelte (oder gepunktete) Konturen erstellt werden. Hierzu wird das <code>stroke-dasharray</code> Attribut genutzt.</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/354/=SVG_Stroke_Dasharray_Example.png" style="float: right;"></p>
+
+<pre class="brush:xml;">&lt;?xml version="1.0" standalone="no"?&gt;
+&lt;svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
+  &lt;path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black"
+    stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/&gt;
+  &lt;path d="M 10 75 L 190 75" stroke="red"
+    stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>Dem <code>stroke-dasharray</code> Attribut wird eine Liste von Zahlen übergeben, welche durch Kommas getrennt sind.</p>
+
+<div class="note">
+<p>Bemerkung: Anders als bei Pfaden <strong><em>müssen</em></strong> die Zahlen durch ein Komma getrennt werden (Leerzeichen werden ignoriert).</p>
+</div>
+
+<p>Die erste Zahl gibt die Länge der gefüllten Bereiche an, die zweite Nummer die Länge der ungefüllten Bereiche. Im obigen Beispiel werden also 5 Pixel gefüllt, gefolgt von 5 Pixeln Leerbereich und dann dem nächsten 5 Pixel Strich. Es können mehr Zahlen angegeben werden, um ein komplexeres Muster zu erzeugen. Das erste Beispiel hat drei Zahlen. Der Renderer wiederholt die Zahlen hier zweimal, um ein gleichmäßiges Muster zu erzeugen. Hier werden zuerst 5 Pixel gefüllt, 10 Pixel leer, 5 Pixel gefüllt und dann 5 Pixel leer, 10 gefüllt und abschließend 5 Pixel leer gezeichnet. Dann wiederholt sich dieses Muster.</p>
+
+<p>Es gibt weitere Kontur- und Füllungseigenschaften, zum Beispiel <code><a href="/en-US/docs/Web/SVG/Attribute/fill-rule">fill-rule</a></code>, welche bestimmt welche Farbe überlagerte Formen bekommen; <code><a href="/en-US/docs/Web/SVG/Attribute/stroke-miterlimit">stroke-miterlimit</a></code>, welche festlegt ob eine Kontur miter zeichnet; <a href="/en-US/docs/Web/SVG/Attribute/stroke-dashoffset">stroke-dashoffset</a> legt fest wo die Strichelung einer Kontur auf der Linie beginnt.</p>
+
+<h2 id="Using_CSS" name="Using_CSS">CSS verwenden</h2>
+
+<p>Neben der Möglichkeit Attribute beim Objekt selbst zu setzen, kann auch CSS zum Kontrollieren von Füllungen und Konturen verwendet werden. Attribute die sich mit dem Malen und dem Füllen befassen sind meist verfügbar, also können zum Beispiel <code>fill</code>, <code>stroke</code>, <code>stroke-dasharray</code>, etc... auf diese Weise verwendet werden, zusätzlich zu den Verlaufs- und Musterversionen von den unten gezeigten. Attribute wie <code>width</code>, <code>height</code> oder Pfadbefehle können durch CSS nicht verändert werden. Am einfachsten ist es durch Probieren herauszufinden welche Attribute in CSS verfügbar sind.</p>
+
+<div class="note style-wrap">Die <a class="external" href="http://www.w3.org/TR/SVG/propidx.html" title="http://www.w3.org/TR/SVG/propidx.html">SVG Spezifikation</a> unterscheidet strikt zwischen Attributen, die <em>Eigenschaften</em> sind und anderen Attributen. Ersteres kann mit CSS verändert werden, letzteres nicht.</div>
+
+<p>CSS kann mit dem style Attribut direkt beim Element eingefügt werden:</p>
+
+<pre class="brush:xml;"> &lt;rect x="10" height="180" y="10" width="180" style="stroke: black; fill: red;"/&gt;
+
+</pre>
+
+<p>oder es kann in eine spezielle Style-Sektion getan werden, welche eingebunden wird. Anstatt diesen dann in den <code>&lt;head&gt;</code> zu packen, wie in HTML, wird er in eine Sektion getan, welche <code><a href="/en/SVG/Element/defs" title="en/SVG/Element/defs">&lt;defs&gt;</a> </code>heißt.<code> &lt;defs&gt; </code>steht für Definitionen (definitions) und ist dafür da, dass Elemente erstellt werden können, welche nicht direkt im SVG auftauchen, aber von anderen Elementen genutzt werden können.</p>
+
+<pre class="brush:xml;">&lt;?xml version="1.0" standalone="no"?&gt;
+&lt;svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
+  &lt;defs&gt;
+    &lt;style type="text/css"&gt;&lt;![CDATA[
+       #MyRect {
+         stroke: black;
+         fill: red;
+       }
+    ]]&gt;&lt;/style&gt;
+  &lt;/defs&gt;
+  &lt;rect x="10" height="180" y="10" width="180" id="MyRect"/&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>Styles in eine Sektion dieser Art zu bewegen kann es einfacher machen die Eigenschaften großer Elementgruppen anzupassen. Es können zusätzlich Dinge wie <strong>hover-Pseudoklassen</strong> genutzt werden, um Überrolleffekte zu erzeugen:</p>
+
+<pre class="brush:css;"> #MyRect:hover {
+   stroke: black;
+   fill: blue;
+ }
+
+</pre>
+
+<p>Es kann auch ein externes Stylesheet für CSS mit <a class="external" href="http://www.w3.org/TR/xml-stylesheet/" title="http://www.w3.org/TR/xml-stylesheet/">normaler XML-Stylesheet Syntax</a> angegeben werden:</p>
+
+<pre class="brush:xml;">&lt;?xml version="1.0" standalone="no"?&gt;
+&lt;?xml-stylesheet type="text/css" href="style.css"?&gt;
+
+&lt;svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
+  &lt;rect height="10" width="10" id="MyRect"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>dort könnte style.css etwa so aussehen:</p>
+
+<pre class="brush:css;">#MyRect {
+  fill: red;
+  stroke: black;
+}</pre>
+
+<p>{{ PreviousNext("Web/SVG/Tutorial/Paths", "Web/SVG/Tutorial/Gradients") }}</p>
diff --git a/files/de/web/svg/tutorial/index.html b/files/de/web/svg/tutorial/index.html
new file mode 100644
index 0000000000..26ae32b74a
--- /dev/null
+++ b/files/de/web/svg/tutorial/index.html
@@ -0,0 +1,14 @@
+---
+title: Tutorial
+slug: Web/SVG/Tutorial
+tags:
+  - SVG
+  - 'SVG:Tutorial'
+translation_of: Web/SVG/Tutorial
+---
+<p>Dieses Tutorial beschreibt Version 1.1 der Scalable Vector Graphics, <a class="internal" href="/de/SVG" rel="internal" title="de/SVG">SVG</a>, ein W3C XML-Dialekt, die in Firefox 1.5, Opera 8.5 und anderen Browsern integriert ist.</p>
+<p>Dieses Tutorial ist in einer <strong>sehr</strong> frühen Aufbauphase. Wenn Sie können, helfen Sie uns, indem Sie ein oder zwei Absätze schreiben. Extrapunkte gibt's für eine ganze Seite!</p>
+<h5 id="Einführung">Einführung</h5>
+<ul> <li><a class="internal" href="/De/SVG/Tutorial/Einführung" title="De/SVG/Tutorial/Einführung">Einführung</a> </li> <li><a class="internal" href="/De/SVG/Tutorial/Erste_Schritte" title="De/SVG/Tutorial/Erste Schritte">Erste Schritte</a></li>
+</ul>
+<p>{{ languages( { "en": "en/SVG/Tutorial", "fr": "fr/SVG/Tutoriel", "ja": "ja/SVG/Tutorial", "pl": "pl/SVG/Przewodnik" } ) }}</p>
diff --git a/files/de/web/svg/tutorial/pfade/index.html b/files/de/web/svg/tutorial/pfade/index.html
new file mode 100644
index 0000000000..fcf1e30859
--- /dev/null
+++ b/files/de/web/svg/tutorial/pfade/index.html
@@ -0,0 +1,239 @@
+---
+title: Pfade
+slug: Web/SVG/Tutorial/Pfade
+tags:
+  - Fortgeschritten
+  - HilfeBenötigt
+  - InhaltBenötigt
+  - SVG
+  - 'SVG:Tutorial'
+translation_of: Web/SVG/Tutorial/Paths
+---
+<p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}</p>
+
+<p>Das <a href="/en-US/Web/SVG/Element/path"><code>&lt;path&gt;</code></a> Element ist das mächtigste Element in der SVG Sammlung der <a href="/de/docs/Web/SVG/Tutorial/Basic_Shapes">grundlegenden Elemente</a>. Man kann es zur Erstellung von Linien, Kurven, Bögen und weiterem verwenden.</p>
+
+<p>Pfade bilden komplexe Formen beim Kombinieren mehrerer gerader Linien oder Kurven. Komplexe Formen, die nur aus geraden Linien bestehen, können als <a href="/de/docs/Web/SVG/Tutorial/Basic_Shapes#Polyline">Polylines</a> erstellt werden. Während Polylines und Pfade ähnlich aussehende Formen bilden können benötigen Polylines viele kleine geraden Linien um Kurven zu simulieren und werden nicht gut auf grössere Grössen skaliert. Ein gutes Verständnis der Pfade ist wichtig beim zeichen von SVGs. Während das Erstellen komplexer Pfade mit einem XML Editor oder Texteditor nicht empfohlen wird, hilft das Verständnis derer Funktionsweise Anzeigeprobleme in SVGs zu identifizieren und zu beheben.</p>
+
+<p>Die Form eines Pfad-Elements wird durch ein Attribut definiert: {{ SVGAttr("d") }} (weiteres in <a href="/de/docs/Web/SVG/Tutorial/Basic_Shapes">grundlegende Formen</a>). Das <code>"d"</code> Attribut beinhaltet eine Folge an Befehlen und deren benötigten Parametern.</p>
+
+<p>Jeder dieser Befehle wird instanziert (z.B. das Erstellen einer Klasse, deren Benennung oder deren Lokalisierung) mit einem bestimmten Buchstaben. Beispielsweise: Verschiebe zur x- und y-Koordinate (10, 10). Der "Move to" Befehl wird mit dem Buchstaben M aufgerufen. Wenn der Parser zu diesem Buchstaben kommt, weiss er, dass eine Verschiebung zu einem Punkt erwünscht ist. Um nun also eine Verschiebung zu (10, 10) vorzunehmen, würde man den Befehl "M 10 10" benutzen. Danach liest der Parser der nächsten Befehl aus.</p>
+
+<p>Alle dieser Befehle gibt es in zwei Varianten. Ein <strong>Grossbuchstabe</strong> gibt absolute Koordinaten auf der Seite an und ein <strong>Kleinbuchstabe</strong> gibt relative Koordinaten (z.B. <em>verschiebe vom vorherigen Punkt 10px nach oben und 7px nach links</em>).</p>
+
+<p>Koordinaten im <code>"d"</code> Attribute sind <strong>immer einheitslos</strong> und somit im Benutzerkoordinatensystem. Später wird erläutert, wie Pfade transformiert werden können um anderen Bedürfnissen gerecht zu werden.</p>
+
+<h2 id="Linienbefehle">Linienbefehle</h2>
+
+<p>Es gibt fünf Linienbefehle für <code>&lt;path&gt;</code> Elemente. Der erste Befehl ist der "Move To" Befehl oder M, welcher oben beschrieben wurde. Er benötigt zwei Argumente, eine  Koordinate 'x' und eine Koordinate 'y' zu denen verschoben werden soll. Falls sich der Cursor bereits irgendwo auf der Seite befindet, wird keine Linie gezeichnet, um diese beiden Punkte zu verbinden. Der "Move To" Befehl erscheint am Anfang von Pfaddefinitionen, um festzulegen, wo mit der Zeichnung begonnen werden soll. z.B. :</p>
+
+<pre>M x y
+</pre>
+
+<p>oder</p>
+
+<pre>m dx dy</pre>
+
+<p>Im folgenden Beispiel habe wir nur einen Punkt bei (10,10). Beachten Sie allerdings, dass er nicht angezeigt würde, falls sie den Pfad normal zeichnen. Zum Beispiel:<img alt="" class="internal" src="/@api/deki/files/45/=Blank_Path_Area.png" style="float: right;"></p>
+
+<pre class="brush: xml">&lt;svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;path d="M10 10"/&gt;
+
+  &lt;!-- Punkte --&gt;
+  &lt;circle cx="10" cy="10" r="2" fill="red"/&gt;
+
+&lt;/svg&gt;</pre>
+
+<p>Es gibt drei Befehle, mit denen Linien gezeichnet werden können. Am typischsten ist der "Line To" Befehl, aufgerufen mit <code>L</code>. <code>L</code> benötigt zwei Parameter – x und y Koordinaten – und zeichnet eine Linie von der aktuellen Position zu einer neuen Position.</p>
+
+<pre> L x y (oder l dx dy)
+</pre>
+
+<p>Es gibt zwei abgekürzte Formen um horizontale und vertikale Linien zu zeichnen. <code>H</code> zeichnet eine horizontale Line und <code>V</code> zeichnet eine vertikale Linie. Beide Befehle benötigen nur ein Argument, da sie nur in eine Richtung verschieben.</p>
+
+<pre> H x (oder h dx)
+ V y (oder v dy)
+</pre>
+
+<p>Eine einfache Anwendung ist das Zeichnen einer Form. Wir werden mit einem Rechteck beginnen (die Art, die auch einfacher mit dem <code>&lt;rect&gt;</code> Element erstellt werden könnte). Es wird nur aus horizontalen und vertikalen Linien zusammengestellt<span style="line-height: 1.5;">:</span></p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/292/=Path_Line_Commands.png" style="float: right;"></p>
+
+<pre class="brush: xml">&lt;svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;path d="M10 10 H 90 V 90 H 10 L 10 10"/&gt;
+
+  &lt;!-- Punkte --&gt;
+  &lt;circle cx="10" cy="10" r="2" fill="red"/&gt;
+  &lt;circle cx="90" cy="90" r="2" fill="red"/&gt;
+  &lt;circle cx="90" cy="10" r="2" fill="red"/&gt;
+  &lt;circle cx="10" cy="90" r="2" fill="red"/&gt;
+
+&lt;/svg&gt;</pre>
+
+<p>Wir können die obige Pfaddefinition ein wenig kürzen, indem wir den "Close Path" Befehl verwenden, welcher mit <code>Z</code> aufgerufen wird. Dieser Befehl zeichnet eine gerade Linie von der aktuellen Position zum ersten Punkt des Pfades. Er wird oft am Ende eines Pfad Elements verwendet, allerdings nicht immer. Es gibt keinen unterschied zwischen dem gross oder klein geschriebenen Befehl.</p>
+
+<pre> Z (oder z)
+</pre>
+
+<p>Unser Pfad könnte also zu folgendem abgekürzt werden:</p>
+
+<pre class="brush: xml"> &lt;path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/&gt;
+</pre>
+
+<p>Sie können auch die relative Form dieser Befehle verwenden, um das gleiche Bild zu zeichnen. Relative Befehle werden mit Kleinbuchstaben aufgerufen und anstatt den Cursor auf eine genaue Koordinate zu bewegen, bewegen sie ihn relativ zu seiner letzten Position. Da unsere Box beispielsweise 80 x 80 ist, hätte das Pfad-Element so geschrieben werden können:</p>
+
+<pre class="brush: xml"> &lt;path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/&gt;
+</pre>
+
+<p>Der Pfad bewegt sich zu Punkt (10,10) und bewegt sich dann horizontal um 80 Punkte nach rechts, dann um 80 Punkte nach unten, dann um 80 Punkte nach links und dann zurück zum Anfang.</p>
+
+<p>In diesen Beispielen wäre es wahrscheinlich einfacher, die Elemente &lt;polygon&gt; oder &lt;polyline&gt; zu verwenden. Allerdings werden Pfade beim Zeichnen von SVG so oft verwendet, dass Entwickler es stattdessen bequemer finden, diese zu verwenden. Es gibt keine wirkliche Leistungseinbußen oder -verbesserungen für die Nutzung des einen oder anderen.</p>
+
+<h2 id="Kurvenbefehle">Kurvenbefehle</h2>
+
+<p>Es gibt drei verschiedene Befehle, mit denen Sie gleichmäßige Kurven erstellen können. Zwei dieser Kurven sind Bezier-Kurven, und die dritte ist ein "Bogen" oder Teil eines Kreises. Möglicherweise haben Sie bereits praktische Erfahrungen mit Bezier-Kurven mit Pfadwerkzeugen in Inkscape, Illustrator oder Photoshop gesammelt. Eine vollständige Beschreibung der Mathematik hinter Bezier-Kurven finden Sie in einer Referenz wie der auf Wikipedia. Es gibt eine unendliche Anzahl von Bezier-Kurven, aber nur zwei einfache sind in Pfadelementen verfügbar: eine kubische, die mit C aufgerufen wird, und eine quadratische, die mit Q aufgerufen wird.</p>
+
+<h3 id="Bezier-Kurven">Bezier-Kurven</h3>
+
+<p>Die kubische Kurve C, ist die etwas komplexere Kurve. Kubische Beziers nehmen zwei Kontrollpunkte für jeden Punkt in Anspruch. Um einen kubischen Bezier zu erstellen, müssen Sie daher drei Koordinatenpaare angeben.</p>
+
+<pre> C x1 y1, x2 y2, x y (oder c dx1 dy1, dx2 dy2, dx dy)
+</pre>
+
+<p>Das letzte Koordinatenpaar hier (x,y) ist der Punkt, an welchem die Linie enden soll. Die anderen beiden sind Kontrollpunkte. (x1,y1) ist der Kontrollpunkt für die Anfangsposition Ihrer Kurve, und (x2,y2) ist der Kontrollpunkt der Endposition. Die Kontrollpunkte beschreiben im Wesentlichen die Neigung Ihrer Linie ab den jeweiligen Punkten. Die Bezier-Funktion erstellt dann eine gleichmäßige Kurve, die Sie von der Neigung, die Sie am Anfang Ihrer Linie festgelegt haben, auf die Neigung am anderen Ende verschiebt.</p>
+
+<p><img alt="Cubic Bézier Curves with grid" class="internal" src="https://mdn.mozillademos.org/files/10401/Cubic_Bezier_Curves_with_grid.png" style="float: right; height: 160px; width: 190px;"></p>
+
+<pre class="syntaxbox">&lt;svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/&gt;
+  &lt;path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/&gt;
+  &lt;path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/&gt;
+  &lt;path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/&gt;
+  &lt;path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/&gt;
+  &lt;path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/&gt;
+  &lt;path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/&gt;
+  &lt;path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/&gt;
+  &lt;path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/&gt;
+
+&lt;/svg&gt;
+</pre>
+
+<p>Das obige Beispiel erstellt neun kubische Bezier-Kurven. Wenn sich die Kurven nach rechts bewegen, werden die Kontrollpunkte horizontal gespreizt. Wenn sich die Kurven nach unten bewegen, werden sie weiter von den Endpunkten getrennt. Zu beachten ist hier, dass die Kurve in Richtung des ersten Kontrollpunktes beginnt und sich dann so biegt, dass sie in Richtung des zweiten Kontrollpunktes verläuft.</p>
+
+<p>Es ist möglich, mehrere Bezier-Kurven aneinander zu reihen, um erweiterte, gleichmäßige Formen zu erzeugen. Häufig ist der Kontrollpunkt auf der einen Seite eines Punktes eine Reflexion des Kontrollpunktes auf der anderen Seite, um die Steigung konstant zu halten. In diesem Fall können Sie eine abgekürzte Version des kubischen Bezier verwenden, die durch den Befehl <code>S</code> (oder <code>s</code>) definiert wird.</p>
+
+<pre> S x2 y2, x y (oder s dx2 dy2, dx dy)
+</pre>
+
+<p><code>S</code> erstellt den selben Kurventyp wie zuvor. Wenn er aber einem anderen <code>S</code>- oder <code>C</code>-Befehl folgt, wird angenommen, dass der erste Kontrollpunkt eine Reflexion des zuvor verwendeten ist. Folgt der Befehl <code>S</code> nicht einem anderen <code>S</code>- oder <code>C</code>-Befehl, so wird die aktuelle Position des Cursors als erster Kontrollpunkt verwendet. In diesem Fall ist das Ergebnis das gleiche wie das, was der <code>Q</code>-Befehl mit den gleichen Parametern ergeben hätte. Ein Beispiel für diese Syntax ist unten dargestellt, und in der Abbildung links sind die angegebenen Kontrollpunkte rot und der daraus abgeleitete Kontrollpunkt blau dargestellt.</p>
+
+<p><img alt="ShortCut_Cubic_Bezier_with_grid.png" class="internal" src="https://mdn.mozillademos.org/files/10405/ShortCut_Cubic_Bezier_with_grid.png" style="float: right; height: 160px; width: 190px;"></p>
+
+<pre class="brush: xml">&lt;svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>Die andere Art von Bezierkurve, die quadratische Kurve, die mit Q aufgerufen wird, ist eigentlich eine einfachere Kurve als die kubische. Sie benötigt einen Kontrollpunkt, der die Neigung der Kurve sowohl am Startpunkt als auch am Endpunkt bestimmt. Es werden zwei Argumente benötigt: der Kontrollpunkt und der Endpunkt der Kurve. Beachten Sie, dass die Koordinatendeltas für q beide relativ zum vorherigen Punkt sind (d.h. <code>dx</code> und <code>dy</code> sind nicht relativ zu <code>dx1</code> und <code>dx2</code>).</p>
+
+<pre> Q x1 y1, x y (oder q dx1 dy1, dx dy)
+</pre>
+
+<p><img alt="Quadratic Bézier with grid" class="internal" src="https://mdn.mozillademos.org/files/10403/Quadratic_Bezier_with_grid.png" style="float: right; height: 160px; width: 190px;"></p>
+
+<pre class="brush: xml">&lt;svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>Genau wie bei der kubischen Bezierkurve gibt es eine Abkürzung zum Aneinanderreihen mehrerer quadratischer Beziers, die mit T aufgerufen wird.</p>
+
+<pre> T x y (oder t dx dy)
+</pre>
+
+<p>Diese Abkürzung betrachtet den vorherigen Kontrollpunkt, den Sie verwendet haben, und leitet daraus einen neuen ab. Das bedeutet, dass Sie nach Ihrem ersten Kontrollpunkt ziemlich komplexe Formen erstellen können, indem Sie nur Endpunkte angeben.</p>
+
+<div class="note">
+<p>Das funktioniert nur, wenn der vorherige Befehl ein Q- oder T-Befehl war. Wenn dies nicht der Fall ist, wird davon ausgegangen, dass der Kontrollpunkt derselbe wie der vorherige Punkt ist, und Sie zeichnen nur Linien.</p>
+</div>
+
+<p><img alt="Shortcut_Quadratic_Bezier_with_grid.png" class="internal" src="https://mdn.mozillademos.org/files/10407/Shortcut_Quadratic_Bezier_with_grid.png" style="float: right; height: 158px; width: 188px;"></p>
+
+<pre class="brush: xml">&lt;svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>Beide Kurven liefern ähnliche Ergebnisse, obwohl die kubische Form Ihnen mehr Freiheit bei der Gestaltung Ihrer Kurve gibt. Die Entscheidung, welche Kurve Sie verwenden möchten, hängt von der Symmetrie ab, die Ihre Linie hat.</p>
+
+<h3 id="Arcs" name="Arcs">Bögen</h3>
+
+<p>Die andere Art von Kurvenlinie, die Sie mit SVG erstellen können, ist der Bogen, der mit A aufgerufen wird. Bogen sind Kreis- oder Ellipsenabschnitte. Bei einem gegebenen x-Radius und y-Radius gibt es zwei Ellipsen, die zwei beliebige Punkte verbinden können (sofern sie sich im Kreisradius befinden). Entlang einer dieser Kreise gibt es zwei mögliche Pfade, die Sie wählen können, um die Punkte zu verbinden, so dass in jeder Situation vier mögliche Bögen zur Verfügung stehen. Aus diesem Grund sind bei Bögen eine ganze Reihe von Argumenten erforderlich:</p>
+
+<pre> A rx ry x-Achsen-Drehung Bogen-Flag Ausschwenkungs-Flag x y
+ a rx ry x-Achsen-Drehung Bogen-Flag Ausschwenkungs-Flag dx dy
+</pre>
+
+<p>An seinem Anfang nimmt das Bogenelement zwei Argumente für den x-Radius und den y-Radius auf. Falls benötigt, schlagen sie <a href="/en-US/Web/SVG/Element/ellipse">Ellipsen</a> nach, um deren Verhaltensweisen zu verstehen. Die letzten beiden Argumente bezeichnen die x- und y-Koordinaten um den Konturverlauf zu beenden. Zusammen bilden diese vier Werte die Grundstruktur des Bogens.</p>
+
+<p>Der dritte Parameter beschreibt die Drehung des Bogens. Dies lässt sich am besten an einem Beispiel erklären:</p>
+
+<p><img alt="SVGArcs_XAxisRotation_with_grid" class="internal" src="https://mdn.mozillademos.org/files/10409/SVGArcs_XAxisRotation_with_grid.png" style="float: right; height: 201px; width: 200px;"></p>
+
+<pre class="brush: xml">&lt;svg width="320" height="320" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;path d="M10 315
+           L 110 215
+           A 30 50 0 0 1 162.55 162.45
+           L 172.55 152.45
+           A 30 50 -45 0 1 215.1 109.9
+           L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>Dieses Beispiel zeigt ein Pfad-Element, welches diagonal über die Seite verläuft. In dessen Mitte wurden zwei elliptische Bögen (x-Radius = 30, y-Radius = 50) ausgeschnitten. Im ersten Bogen wurde die x-Achsen-Rotation bei 0 gelassen, damit die Ellipse, um die der Bogen verläuft (in grau abgebildet) gerade nach oben und unten ausgerichtet wird. Im zweiten Bogen wurde die x-Achsen-Rotation allerdings auf -45 Grad gesetzt. Das dreht die Ellipse, damit sie mit der kürzeren Achse der Pfadrichtung ausgerichtet wird, wie im Beispielbild durch die zweite Ellipse dargestellt.</p>
+
+<p>Für die ungedrehte Ellipse im obigen Bild gibt es zwei verschiedene Bögen, zwischen denen gewählt werden kann, nicht vier, da die Linie, die vom Anfang bis zum Ende des Bogens durch die Mitte der Ellipse verläuft. In einem leicht veränderten Beispiel können Sie die zwei Ellipsen sehen, die die vier verschiedenen Bögen bilden.</p>
+
+<p><img alt="Show the 4 arcs on the Ellipse example" src="https://mdn.mozillademos.org/files/15822/SVGArcs_XAxisRotation_with_grid_ellipses.png" style="height: 320px; width: 320px;"></p>
+
+<pre>&lt;svg xmlns="http://www.w3.org/2000/svg" width="320" height="320"&gt;
+  &lt;path d="M10 315
+           L 110 215
+           A 36 60 0 0 1 150.71 170.29
+           L 172.55 152.45
+           A 30 50 -45 0 1 215.1 109.9
+           L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/&gt;
+  &lt;circle cx="150.71" cy="170.29" r="2" fill="red"/&gt;
+  &lt;circle cx="110" cy="215" r="2" fill="red"/&gt;
+  &lt;ellipse cx="144.931" cy="229.512" rx="36" ry="60" fill="transparent" stroke="blue"/&gt;
+  &lt;ellipse cx="115.779" cy="155.778" rx="36" ry="60" fill="transparent" stroke="blue"/&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>Beachten Sie, dass jede der blauen Ellipsen aus zwei Bögen besteht, je nachdem, ob Sie im oder gegen den Uhrzeigersinn verfahren. Jede Ellipse hat einen kurzen und einen langen Bogen. Die beiden Ellipsen sind nur Spiegelungen voneinander. Sie werden entlang der Linie gespiegelt, die sich aus den Start-&gt;Endpunkten ergibt.</p>
+
+<p>Wenn die Start-&gt;Endpunkte weiter entfernt sind, als der x- und y-Radius der Ellipse reicht, werden die Radien der Ellipse minimal erweitert, so dass sie die Start-&gt;Endpunkte erreichen können. Der interaktive Codepen am Ende dieser Seite zeigt dies exemplarisch. Um festzustellen, ob die Radien Ihrer Ellipse groß genug sind, um erweitert werden zu müssen, müssen Sie ein Gleichungssystem wie dieses auf Wolfram Alpha lösen. Diese Berechnung gilt für die nicht rotierende Ellipse mit Start-&gt;Ende (110, 215)-&gt;(150.71, 170.29). Die Lösung, (x, y), ist das Zentrum der Ellipse(n). Die Lösung wird imaginär sein, falls Ihre Ellipsenradien zu klein sind. Diese zweite Berechnung bezieht sich auf die nicht rotierende Ellipse mit Start-&gt;Ende (110, 215)-&gt;(162.55, 162.45). Die Lösung hat eine kleine Imaginärkomponente, da die Ellipse nur knapp erweitert wurde.</p>
+
+<p>Die vier verschiedenen oben genannten Pfade werden durch die nächsten beiden Argument-Flags bestimmt. Wie bereits erwähnt, gibt es immer noch zwei mögliche Ellipsen für den Pfad, um sich zu bewegen, und zwei verschiedene mögliche Pfade auf beiden Ellipsen, was vier mögliche Pfade ergibt. Das erste Argument ist das Bogen-Flag. Es bestimmt einfach, ob der Bogen größer oder kleiner als 180 Grad sein soll; am Ende bestimmt dieses Flag, in welche Richtung sich der Bogen um einen gegebenen Kreis bewegt. Das zweite Argument ist das Ausschwenkungs-Flag. Es legt fest, ob sich der Bogen in positiven oder negativen Winkeln bewegen soll, was im Wesentlichen bestimmt, um welchen der beiden Kreise Sie sich bewegen werden. Das folgende Beispiel zeigt alle vier möglichen Kombinationen sowie die beiden Kreise für die einzelnen Fälle.</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/345/=SVGArcs_Flags.png" style="float: right;"></p>
+
+<pre class="brush: xml">&lt;svg width="325" height="325" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;path d="M80 80
+           A 45 45, 0, 0, 0, 125 125
+           L 125 80 Z" fill="green"/&gt;
+  &lt;path d="M230 80
+           A 45 45, 0, 1, 0, 275 125
+           L 275 80 Z" fill="red"/&gt;
+  &lt;path d="M80 230
+           A 45 45, 0, 0, 1, 125 275
+           L 125 230 Z" fill="purple"/&gt;
+  &lt;path d="M230 230
+           A 45 45, 0, 1, 1, 275 275
+           L 275 230 Z" fill="blue"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>Bögen sind eine einfache Möglichkeit, Kreise oder Ellipsen in Ihren Zeichnungen zu erstellen. Zum Beispiel würde ein Kreisdiagramm für jedes Stück einen anderen Bogen erfordern.</p>
+
+<p>Falls sie SVG aus <a href="/de/HTML/Canvas">Canvas</a> herleiten können Bögen die meisten Verständnisprobleme verursachen, allerdings sind sie auch viel mächtiger. Vollständige Kreise und Ellipsen sind eigentlich die einzigen Formen, bei denen SVG-Bögen Probleme beim Zeichnen haben. Da der Start- und Endpunkt für jeden Pfad, der um einen Kreis verläuft, der gleiche Punkt ist, gibt es eine unendliche Anzahl von Kreisen, die ausgewählt werden können, und der tatsächliche Pfad ist undefiniert. Es ist möglich, sie anzunähern, indem man den Start- und Endpunkt des Pfades leicht schräg stellt und ihn dann mit einem anderen Pfadsegment verbindet. Beispielsweise können Sie für jeden Halbkreis einen Kreis mit einem Bogen erstellen. An diesem Punkt ist es oft einfacher, ein Kreis- oder Ellipsen-Element zu verwenden. Diese interaktive Codepen könnte ihnen vieleicht beim Verständnis der Konzepte hinter SVG Bögen zu verstehen: <a href="http://codepen.io/lingtalfi/pen/yaLWJG">http://codepen.io/lingtalfi/pen/yaLWJG</a> (nur in Chrome und Firefox getestet, funktioniert möglicherweise nicht in Ihrem Browser)</p>
+
+<p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}</p>
diff --git a/files/de/web/svg/tutorial/svg_image_tag/index.html b/files/de/web/svg/tutorial/svg_image_tag/index.html
new file mode 100644
index 0000000000..040734ffc6
--- /dev/null
+++ b/files/de/web/svg/tutorial/svg_image_tag/index.html
@@ -0,0 +1,36 @@
+---
+title: SVG image element
+slug: Web/SVG/Tutorial/SVG_Image_Tag
+tags:
+  - Einsteiger
+  - JPG-Bilder einfügen
+  - SVG
+translation_of: Web/SVG/Tutorial/SVG_Image_Tag
+---
+<p>{{ PreviousNext("Web/SVG/Tutorial/SVG_Fonts", "Web/SVG/Tutorial/Tools_for_SVG") }}</p>
+
+<p>Das SVG {{ SVGElement("image") }}-Element erlaubt es, Rasterbilder innerhalb von SVG-Objekten einzufügen.</p>
+
+<p>In diesem Beispiel wird ein .jpg-Bild, aufgerufen durch das {{ SVGAttr("xlink:href") }}-Attribut, in ein SVG-Objekt eingefügt:</p>
+
+<pre class="brush: xml">&lt;?xml version="1.0" standalone="no"?&gt;
+&lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
+&lt;svg width="5cm" height="4cm" version="1.1"
+     xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"&gt;
+	&lt;image xlink:href="firefox.jpg" x="0" y="0" height="50px" width="50px"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>Folgende wichtige Punkte müsse beachtet werden (festgelegt in den <a class="external" href="http://www.w3.org/TR/SVG/struct.html#ImageElement" title="http://www.w3.org/TR/SVG/struct.html#ImageElement">W3-Spezifikationen</a>):</p>
+
+<ul>
+ <li>
+  <p>Wurde kein Attribut x (oder y) angegeben, wird dafür automatisch 0 gesetzt.</p>
+ </li>
+ <li>
+  <p>Wurde kein Attribut height (oder width) angegeben, wird dafür automatisch 0 gesetzt.</p>
+ </li>
+ <li>Ist das Attribut height (oder width) 0, wird das Rendern des Bildes deaktiviert.</li>
+</ul>
+
+<p>{{ PreviousNext("Web/SVG/Tutorial/SVG_Fonts", "Web/SVG/Tutorial/Tools_for_SVG") }}</p>
diff --git a/files/de/web/svg/tutorial/svg_schriftarten/index.html b/files/de/web/svg/tutorial/svg_schriftarten/index.html
new file mode 100644
index 0000000000..57d826cb5e
--- /dev/null
+++ b/files/de/web/svg/tutorial/svg_schriftarten/index.html
@@ -0,0 +1,99 @@
+---
+title: SVG-Schriftarten
+slug: Web/SVG/Tutorial/SVG_Schriftarten
+translation_of: Web/SVG/Tutorial/SVG_fonts
+---
+<p>{{ PreviousNext("Web/SVG/Tutorial/Filter_effects", "Web/SVG/Tutorial/SVG_Image_Tag") }}</p>
+
+<p>Als SVG spezifiziert wurde, war die Unterstützung für Web-Schriftarten in Browsern noch nicht sehr verbreitet. Weil ein Zugriff auf die richtige Schriftart für das korrekte Rendern jedoch so wichtig ist, wurde SVG eine Technologie zur Beschreibung von Schriftarten hinzugefügt, um dies zu ermöglichen. Dabei war eine Kompatibilität mit anderen Formaten wie PostScript oder OTF nicht vorgesehen, sondern vielmehr als ein einfaches Mittel, um Informationen über Zeichen fürs Rendern in SVG einbetten zu können.</p>
+
+<p><strong>SVG-Schriftarten werden gegenwärtig nur durch Safari und Android-Browser unterstützt. </strong></p>
+
+<p>
+ </p><div class="note">Im Internet Explorer <a href="http://blogs.msdn.com/b/ie/archive/2010/08/04/html5-modernized-fourth-ie9-platform-preview-available-for-developers.aspx">wurde eine Implementierung nicht berücksichtigt</a>, in <a href="https://www.chromestatus.com/feature/5930075908210688">Chrome 38 wurde sie entfernt</a> (auch in Opera 25) und Firefox hat es auf <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=119490" title="https://bugzilla.mozilla.org/show_bug.cgi?id=119490">unbestimmte Zeit verschoben</a>, um sich auf <a href="/en/WOFF" title="en/About WOFF">WOFF</a> konzentrieren zu können. Andere Tools jedoch wie <a class="external" href="http://www.adobe.com/svg/viewer/install/" title="http://www.adobe.com/svg/viewer/install/">Adobe SVG Viewer</a>-Plugin, Batik und Teile von Inkscape unterstützen das Einbetten von SVG-Schriftarten.</div>
+<p></p>
+
+<p>Das grundlegende Tag zur Definition einer SVG-Schriftart ist {{ SVGElement("font") }}.</p>
+
+<h2 id="Eine_Schriftart_definieren">Eine Schriftart definieren</h2>
+
+<p>Es sind einige Angaben nötig, um eine Schriftart in SVG einzubetten. Gezeigt wird das Beispiel <a class="external" href="http://www.w3.org/TR/SVG/fonts.html#FontElement" title="http://www.w3.org/TR/SVG/fonts.html#FontElement">aus der Spezifikation</a> und an ihm werden die Details erklärt.</p>
+
+<pre>&lt;font id="Font1" horiz-adv-x="1000"&gt;
+  &lt;font-face font-family="Super Sans" font-weight="bold" font-style="normal"
+      units-per-em="1000" cap-height="600" x-height="400"
+      ascent="700" descent="300"
+      alphabetic="0" mathematical="350" ideographic="400" hanging="500"&gt;
+    &lt;font-face-src&gt;
+      &lt;font-face-name name="Super Sans Bold"/&gt;
+    &lt;/font-face-src&gt;
+  &lt;/font-face&gt;
+  &lt;missing-glyph&gt;&lt;path d="M0,0h200v200h-200z"/&gt;&lt;/missing-glyph&gt;
+  &lt;glyph unicode="!" horiz-adv-x="300"&gt;&lt;!-- Umrisslinie von ! --&gt;&lt;/glyph&gt;
+  &lt;glyph unicode="@"&gt;&lt;!-- Umrisslinie von @ --&gt;&lt;/glyph&gt;
+  &lt;!-- weitere Zeichen --&gt;
+&lt;/font&gt;
+</pre>
+
+<p>Am Anfang steht das {{ SVGElement("font") }}-Tag. Es enthält das Attribut <code>id</code>, das einen späteren Zugriff (Referenzierung) mittels URI (siehe unten) ermöglicht. Das Attribut <code>horiz-adv-x</code> legt fest, wie breit ein Zeichen durchschnittlich verglichen zur path-Definition eines einzelnen Zeichens ist. Der Wert <code>1000</code> legt einen vernünftigen Wert fest, um damit zu arbeiten. Es gibt weitere Attribute, die helfen, den Kasten näher zu definieren, in dem das Zeichen erstellt werden soll.</p>
+
+<p>Das {{ SVGElement("font-face") }}-Tag ist das SVG-Gegenstück zu CSS <a href="/en/CSS/@font-face" title="en/css/@font-face"><code>@font-face</code></a>. Darin werden Grundeinstellungen der fertigen Schriftart wie Schriftstärke, Stil usw. definiert. Im obigen Beispiel ist das erste und wichtigste Attribut <code>font-family</code>, sein Wert (im Beispiel "Super Sans") ermöglicht in CSS und in SVG mittels <code>font-family</code> den Zugriff auf die Schriftart. Die Attribute <code>font-weight</code> und <code>font-style</code> erledigen dieselben Aufgaben wie ihre Gegenstücke in CSS. Alle folgenden Attribute sind Rendering-Anweisungen für die Schriftart-Layout-Maschine, zum Beispiel, wie viele Zeichen Gesamthöhen haben, die über der Höhe des Kleinbuchstabens x liegen.</p>
+
+<p>Das Kind-Tag {{ SVGElement("font-face-src") }} entspricht dem <code>src</code>-Descriptor bei <code>@font-face</code> in CSS. Mittels der Kinder-Tags {{ SVGElement("font-face-name") }} und {{ SVGElement("font-face-uri") }} können auf externe Quellen verwiesen werden. Am obigen Beispiel gezeigt: Wenn dem Renderer lokal eine Schriftart namens "Super Sans Bold" verfügbar ist, soll er diese stattdessen benutzen.</p>
+
+<p>Das {{ SVGElement("missing-glyph") }}-Tag wird benutzt, um ein Zeichen zu definieren, das angezeigt wird, falls in der Schriftart kein Zeichen an dieser Stelle definiert wurde und auch kein Ausweichmechanismus zur Verfügung steht. Am Beispiel der Definition des Missing-Glyph (im obigen Beispiel) kann gezeigt werden, wie Zeichen gemacht werden: Einfach irgendeine beliebige SVG-Form oder -Pfad einfügen. </p>
+
+<p>Auch andere SVG-Tags können hier benutzt werden, zum Beispiel {{ SVGElement("filter") }}, {{ SVGElement("a") }} oder {{ SVGElement("script") }}. Für einfache Zeichen aber kann ein Attribut <code>d</code> hinzugefügt werden. Es definiert den Umriss des Zeichens genau so, wie es beim <code>path</code>-Tag geschieht.</p>
+
+<p>Ein beliebiges Zeichen wird schließlich mit {{ SVGElement("glyph") }} definiert. Das wichtigste Attribut dabei ist <code>unicode</code>. Es legt den Unicode-Codepoint fest, also ob das definierte Zeichen zum Beispiel anstelle des Buchstabens "F" stehen soll. Wird das Attribut {{htmlattrxref("lang")}} eingesetzt, kann die Verwendung auf eine bestimmte Sprache eingeschränkt werden (abhängig von der Angabe bei <code>xml:lang</code>). Und noch mal, es kann beliebiges SVG genutzt werden, um ein Zeichen zu definieren, was den, der die Schriftart nutzt, sehr unstützt.</p>
+
+<p>Die Tags {{ SVGElement("hkern") }} und {{ SVGElement("vkern") }} können in <code>font</code> eingesetzt werden. Beide benötigen die Attribute <code>u1</code> und <code>u2</code> und das Attribut <code>k</code>, mit dessen Hilfe der Abstand zwischen u1 und u2 individuell verringert werden kann. Das folgende Beispiel rückt "A" und "V" näher zusammen, als es der Standardabstand eigentlich vorsieht.</p>
+
+<pre>&lt;hkern u1="A" u2="V" k="20" /&gt;
+</pre>
+
+<h2 id="Auf_eine_Schriftart_zugreifen">Auf eine Schriftart zugreifen</h2>
+
+<p>Wenn die Schriftart fertig ist, kann im {{ SVGElement("text") }}-Tag mit dem Attribut <code>font-family</code> auf sie zugegriffen werden:</p>
+
+<pre>&lt;font&gt;
+  &lt;font-face font-family="Super Sans" /&gt;
+  &lt;!-- und so weiter --&gt;
+&lt;/font&gt;
+
+&lt;text font-family="Super Sans"&gt;Mein Text benutzt Super Sans&lt;/text&gt;
+</pre>
+
+<p>Die Kombination des Attributs mit anderen Tags ermöglicht, die Schriftart an beliebiger Stelle definieren zu können.</p>
+
+<h3 id="Option_CSS_font-face_benutzen">Option: CSS @font-face benutzen</h3>
+
+<p><code>@font-face</code> kann benutzt werden, um Zugriff auf externe (und auch nicht-externe) Schriftarten zu bekommen:</p>
+
+<pre>&lt;font id="Super_Sans"&gt;
+  &lt;!-- und so weiter --&gt;
+&lt;/font&gt;
+
+&lt;style type="text/css"&gt;
+@font-face {
+  font-family: "Super Sans";
+  src: url(#Super_Sans);
+}
+&lt;/style&gt;
+
+&lt;text font-family="Super Sans"&gt;Mein Text benutzt Super Sans&lt;/text&gt;</pre>
+
+<h3 id="Option_Zugriff_auf_eine_externe_Schriftart">Option: Zugriff auf eine externe Schriftart</h3>
+
+<p>Das oben erwähnte <code>font-face-uri</code>-Tag ermöglicht den Zugriff auf externe Schriftarten, was eine noch weitere Wiederverwendbarkeit ermöglicht:</p>
+
+<pre>&lt;font&gt;
+  &lt;font-face font-family="Super Sans"&gt;
+    &lt;font-face-src&gt;
+      &lt;font-face-uri xlink:href="fonts.svg#Super_Sans" /&gt;
+    &lt;/font-face-src&gt;
+  &lt;/font-face&gt;
+&lt;/font&gt;
+</pre>
+
+<p>{{ PreviousNext("Web/SVG/Tutorial/Filter_effects", "Web/SVG/Tutorial/SVG_Image_Tag") }}</p>
diff --git a/files/de/web/svg/tutorial/tools_for_svg/index.html b/files/de/web/svg/tutorial/tools_for_svg/index.html
new file mode 100644
index 0000000000..2fd2402d4b
--- /dev/null
+++ b/files/de/web/svg/tutorial/tools_for_svg/index.html
@@ -0,0 +1,70 @@
+---
+title: Tools for SVG
+slug: Web/SVG/Tutorial/Tools_for_SVG
+translation_of: Web/SVG/Tutorial/Tools_for_SVG
+---
+<p>{{ PreviousNext("Web/SVG/Tutorial/SVG_Image_Tag") }}</p>
+
+<p>Nachdem nun die Grundlagen von SVG bekannt sind, soll ein Blick auf einige Tools geworfen werden, um mit SVG-Dateien zu arbeiten.</p>
+
+<h3 id="Browser_support">Browser support</h3>
+
+<p>Ab Internet Explorer 9 unterstützen alle großen Browser SVG: IE 9, Mozilla Firefox, Safari, Google Chrome und Opera. Mobile Geräte mit auf Webkit basierenden Browsern unterstützen auch SVG. Auf älteren oder kleineren Geräten besteht die Möglichkeit, dass SVG Tiny unterstützt wird.</p>
+
+<h2 id="Inkscape">Inkscape</h2>
+
+<p>URL: <a class="external" href="http://www.inkscape.org" title="http://www.inkscape.org/">www.inkscape.org</a></p>
+
+<p>One of the most important tools for a graphics format is a decent drawing program. Inkscape offers state-of-the-art vector drawing, and it's open source.</p>
+
+<p>Moreover, it uses SVG as its native file format. To store Inkscape specific data, it extends the SVG file with elements and attributes in a custom namespace, but you can also choose to export as plain SVG.</p>
+
+<h2 id="Adobe_Illustrator">Adobe Illustrator</h2>
+
+<p>URL: <a class="external" href="http://www.adobe.com/products/illustrator/">www.adobe.com/products/illustrator/</a></p>
+
+<p>Before Adobe acquired Macromedia, it was the most prominent promoter of SVG. From this time stems the good support of SVG in Illustrator. However, the resulting SVG often shows some quirks, that make it necessary to post-process it for general applicability.</p>
+
+<h2 id="Apache_Batik">Apache Batik</h2>
+
+<p>URL: <a class="external" href="http://xmlgraphics.apache.org/batik/">xmlgraphics.apache.org/batik/</a></p>
+
+<p>Batik is a set of open source tools under the roof of the Apache Software Foundation. The toolkit is written in Java and offers almost complete SVG 1.1 support, as well as some features that were originally planned for SVG 1.2.</p>
+
+<p>Batik offers a viewer (Squiggle), a rasterizer for PNG output, an SVG pretty printer to format SVG files, and a TrueType-to-SVG-Font converter.</p>
+
+<p>Together with <a class="external" href="http://xmlgraphics.apache.org/fop/">Apache FOP</a> Batik can transform SVG to PDF.</p>
+
+<h3 id="Other_renderers">Other renderers</h3>
+
+<p>Several projects exist that can create a raster image from an SVG source. <a class="external" href="http://ImageMagick.org" title="http://imagemagick.org/">ImageMagick</a> is one of the most famous command-line image processing tools. The Gnome library <a class="external" href="http://library.gnome.org/devel/rsvg/" title="http://library.gnome.org/devel/rsvg/">rsvg</a> is used by the Wikipedia to raster their SVG graphics. Usage of headless browsers such as SlimerJS and PhantomJS are also popular for this purpose, as the image produced is closer to what the SVG will look like in the browser.</p>
+
+<h2 id="Raphael_JS">Raphael JS</h2>
+
+<p>URL: <a class="external" href="http://raphaeljs.com/">raphaeljs.com</a></p>
+
+<p>This is a JavaScript library, that acts as an abstraction layer between browser implementations. Notably older versions of Internet Explorer are supported by generating VML, a vector markup language, that is one of two ancestors of SVG and exists since IE 5.5.</p>
+
+<h2 id="Snap.svg">Snap.svg</h2>
+
+<p>URL: <a href="http://snapsvg.io/">snapsvg.io</a></p>
+
+<p>A newer JavaScript abstraction layer from the same author of Raphael JS. Snap.svg is designed for modern browsers and therefore supports the newest SVG features like masking, clipping, patterns, full gradients, groups. It does not support the older browsers that Raphael does.</p>
+
+<h2 id="Google_Docs">Google Docs</h2>
+
+<p>URL: <a class="external" href="http://www.google.com/google-d-s/drawings/">www.google.com/google-d-s/drawings/</a></p>
+
+<p>Zeichnungen können als SVG aus Google Docs exportiert werden.</p>
+
+<h2 id="Wissenschaft">Wissenschaft</h2>
+
+<p>Beide gut bekannten Plotting-Werkzeug xfig und gnuplot unterstützen den Export als SVG. Um Graphen online-Hilfe zu rendern, nutze man <a class="external" href="http://jsxgraph.uni-bayreuth.de/wp/" title="http://jsxgraph.uni-bayreuth.de/wp/">JSXGraph</a>, es unterstützt VML, SVG und canvas und entscheidet anhand des Browsers automatisch, welche Technologie dabei genutzt wird.</p>
+
+<p>In GIS-Anwendungen (Geographic Information System) wird SVG oft benutzt, um Daten sowohl zu speichern als auch fürs spätere Rendern. Für Näheres siehe <a class="external" href="http://carto.net">carto.net</a>.</p>
+
+<h2 id="Weitere_Tools!">Weitere Tools!</h2>
+
+<p>Beim W3C findet sich eine <a class="external" href="http://www.w3.org/Graphics/SVG/WG/wiki/Implementations">Liste von Programmen</a>, die SVG unterstützen.</p>
+
+<p>{{ PreviousNext("Web/SVG/Tutorial/SVG_Image_Tag") }}</p>
diff --git a/files/de/web/web_components/custom_elements/index.html b/files/de/web/web_components/custom_elements/index.html
new file mode 100644
index 0000000000..2f29481161
--- /dev/null
+++ b/files/de/web/web_components/custom_elements/index.html
@@ -0,0 +1,258 @@
+---
+title: Benutzerdefinierte Elemente
+slug: Web/Web_Components/Custom_Elements
+translation_of: Web/Web_Components/Using_custom_elements
+---
+<p>Benutzerdefinierte Elemente sind stellen die Möglichkeit bereit, benutzerdefinierte HTML-<a href="/en-US/docs/Glossary/Element">Elements</a> zu schaffen. Sie können eigenes durch JavaScript beschriebenes Verhalten und CSS-Styling haben. Sie sind Teil der <a href="/en-US/docs/Web/Web_Components">Web-Components</a>, können aber auch unabhängig von diesen benutzt werden.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Benutzerdefinierte Elemente gelten erst seit Kurzem als stabil definiert und Teile des MDN weisen Dokumentation für veraltete APIs früherer Spezifikationsentwürfe auf.</p>
+</div>
+
+<p>Obwohl es bereits möglich war, benutzerdefinierte Tag-Namen wie <code>&lt;mytag&gt;</code> zu schaffen, sie mit CSS zu stylen und via JavaScript ihr Verhalten zu beschreiben, haben benutzerdefinierte Elemente ihre Daseinsberechtigung. Ihr großer Vorteil ist das Vorhandensein so genannter <em>Lebenszyklus-Reaktionen</em>, die es erlauben, Methoden zu bestimmten Momenten des "Lebenszyklus" des Elementes aufzurufen. So kann beispielsweise Verhalten beschrieben werden, dass ausgeführt wird, wenn das Element dem DOM hinzugefügt wird ("connected"), wenn es aus diesem entfernt wird ("disconnected") oder sich seine Attribute ändern.</p>
+
+<p>Die Schlüsselmethode für benutzerdefinierte Elemente ist die {{domxref("CustomElementRegistry.define()")}}-Methode, die benutzt werden kann, um ein neues benutzerdefinierte Elemente zu erschaffen. Dieses neue Element wird dann für jede seiner Instanzen diese neue Klasse anstelle des standardmäßig verwendeten {{domxref("HTMLUnknownElement")}} benutzen. Benutzerdefinierte Elemente können auch auf nativen Elementen wie  <code>&lt;button&gt;</code> basieren, indem sie folgende Syntax benutzen: <code>&lt;button is="my-button"&gt;</code> Sie werden dann <em>benutzerdefinierte eingebaute Elemente </em>genannt.</p>
+
+<h2 id="Methoden_benutzerdefinierter_Elemente">Methoden benutzerdefinierter Elemente</h2>
+
+<p>Benutzerdefinierte Elemente besitzen folgende Methoden:</p>
+
+<dl>
+ <dt>constructor()</dt>
+ <dd>Wird aufgerufen, wenn eine Element erzeugt und erweitert wird.</dd>
+ <dt>connectedCallback()</dt>
+ <dd>Wird aufgerufen, wenn das Element in das Dokument eingefügt wird, auch wenn es nur der Shadow Tree ist</dd>
+ <dt>disconnectedCallback()</dt>
+ <dd>Wird aufgerufen, wenn das Element aus dem Dokument entfernt wird.</dd>
+ <dt>attributeChangedCallback(attributeName, oldValue, newValue, namespace)</dt>
+ <dd>Wird aufgerufen, wenn Attribute des Elements geändert, angefügt, entfernt oder ersetzt werden. Wird nur für <a href="#Observed_attributes">beobachtete Attribute</a> aufgerufen.</dd>
+ <dt>adoptedCallback(oldDocument, newDocument)</dt>
+ <dd>Wird aufgerufen, wenn das Element in ein neues Dokument übernommen wird.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Benutzerdefinierte Elemente müssen die <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes"><code>class</code> Syntax</a> benutzen, die in neueren JavaScript-Versionen bereit steht.</p>
+
+<p>HTML-Datei:</p>
+
+<pre class="brush: html">Wenn unter diesem Text nichts steht, unterstützt ihr Browser keine benutzerdefinierten Elemente.
+&lt;x-product data-name="Ruby" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/ruby.png" data-url="http://example.com/1"&gt;&lt;/x-product&gt;
+&lt;x-product data-name="JavaScript" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/javascript.png" data-url="http://example.com/2"&gt;&lt;/x-product&gt;
+&lt;x-product data-name="Python" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/python.png" data-url="http://example.com/3"&gt;&lt;/x-product&gt;</pre>
+
+<p>JS-Datei:</p>
+
+<pre class="brush: js">// Klasse für das Element erzeugen
+class XProduct extends HTMLElement {
+  constructor() {
+    // super() muss immer als erstes im Konstruktor aufgerufen werden
+    super();
+
+    // Shadow-Root erzeugen
+    var shadow = this.attachShadow({mode: 'open'});
+
+    // Standard img-Element erzeugen und Attribute setzen
+    var img = document.createElement('img');
+    img.alt = this.getAttribute('data-name');
+    img.src = this.getAttribute('data-img');
+    img.width = '150';
+    img.height = '150';
+    img.className = 'product-img';
+
+    // Bild der Shadow-Root hinzufügen.
+    shadow.appendChild(img);
+
+    // Event-Listener zum Bild hinzufügen.
+    img.addEventListener('click', () =&gt; {
+      window.location = this.getAttribute('data-url');
+    });
+
+    // Link zum Produkt erzeugen.
+    var link = document.createElement('a');
+    link.innerText = this.getAttribute('data-name');
+    link.href = this.getAttribute('data-url');
+    link.className = 'product-name';
+
+    // Link der Shadow-Root hinzufügen.
+    shadow.appendChild(link);
+  }
+}
+
+// Neues Element definieren
+customElements.define('x-product', XProduct);
+</pre>
+
+<p>CSS-Datei:</p>
+
+<pre class="brush: css">body {
+  background: #F7F7F7;
+}
+
+x-product {
+  display: inline-block;
+  float: left;
+  margin: 0.5em;
+  border-radius: 3px;
+  background: #FFF;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
+  font-family: Helvetica, arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+
+x-product::slotted(.product-img) {
+  cursor: pointer;
+  background: #FFF;
+  margin: 0.5em;
+}
+
+x-product::slotted(.product-name) {
+  display: block;
+  text-align: center;
+  text-decoration: none;
+  color: #08C;
+  border-top: 1px solid #EEE;
+  font-weight: bold;
+  padding: 0.75em 0;
+}
+</pre>
+
+<p><a id="live_example" name="live_example">Unten kann das Live-Beispiel des obigen Codes gesehen werden:</a></p>
+
+<p>{{ EmbedLiveSample('Example', '1500', '250', '', 'Web/Web_Components/Custom_Elements') }}</p>
+
+<h2 id="Beobachtete_Attribute">Beobachtete Attribute</h2>
+
+<p>Um benachrichtigt zu werden, wenn Attribute verändert werden, muss eine Liste von beobachteten Attributen bei der Initialisierung des Elements angelegt werden, in dem eine statische <code>observedAttributes</code> get-Methode der Klasse des Elementes hinzugefügt wird, die ein Array mit den entsprechenden Attributsnamen zurückgibt.</p>
+
+<p>JS-Datei:</p>
+
+<pre class="brush: js">class HelloElement extends HTMLElement {
+  // Das 'name'-Attribut beobachten.
+  static get observedAttributes() {return ['name']; }
+
+  // Auf Attributsänderungen reagieren.
+  attributeChangedCallback(attr, oldValue, newValue) {
+    if (attr == 'name') {
+      this.textContent = `Hello, ${newValue}`;
+    }
+  }
+}
+
+// Neues Element definieren
+customElements.define('hello-element', HelloElement);
+</pre>
+
+<p>HTML-Datei:</p>
+
+<pre class="brush: html">&lt;hello-element name="Anita"&gt;&lt;/hello-element&gt;</pre>
+
+<p><a id="live_example" name="live_example">Unten kann das Live-Beispiel des obigen Codes gesehen werden:</a></p>
+
+<p>{{ EmbedLiveSample('Observed_attributes', '750', '100', '', 'Web/Web_Components/Custom_Elements') }}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<p>Benutzerdefinierte Elemente sind in der folgenden Spezifikation definiert:</p>
+
+<table class="spec-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td><a href="https://html.spec.whatwg.org/multipage/scripting.html#custom-elements">The HTML Standard: Custom elements</a></td>
+   <td>LS</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(59.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(47.0)}}</td>
+   <td>10.1</td>
+  </tr>
+  <tr>
+   <td>Benutzerdefinierte eingebaute Elemente</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(59.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(47.0)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Chrome for Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(56.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(47.0)}}</td>
+   <td>10.1</td>
+  </tr>
+  <tr>
+   <td>Benutzerdefinierte eingebaute Elemente</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(56.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(47.0)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>1. Firefox hat eine "dom.webcomponents.enabled"-Eigenschaft in about:config, dennoch ist sind benutzerdefinierte Elemente nicht verfügbar, wenn diese auf <strong>true</strong> gesetzt wurde.</p>
+
+<h2 id="Related">Related</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry">The Custom Element Registry</a>
+
+  <ul>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define">define()</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/get">get()</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/whenDefined">whenDefined()</a></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Resources">Resources</h2>
+
+<ul>
+ <li><a href="https://developers.google.com/web/fundamentals/primers/customelements/">Custom elements v1: reusable web components - Google Developers tutorial</a></li>
+</ul>
diff --git a/files/de/web/web_components/index.html b/files/de/web/web_components/index.html
new file mode 100644
index 0000000000..bc5e676475
--- /dev/null
+++ b/files/de/web/web_components/index.html
@@ -0,0 +1,222 @@
+---
+title: Web Components
+slug: Web/Web_Components
+tags:
+  - Benutzerdefinierte Elemente
+  - Components
+  - JavaScript
+  - Landing
+  - Overview
+  - Schatten-DOM
+  - Template
+  - Web Components
+  - Webkomponenten
+  - custom elements
+  - shadow dom
+  - slot
+  - Überblick
+translation_of: Web/Web_Components
+---
+<div>{{DefaultAPISidebar("Webkomponenten")}}</div>
+
+<div class="summary">
+<p>Webkomponenten sind eine Gruppe von Web-Technologien, die es ermöglichen, benutzerdefinierte, wiederverwendbare HTML Elemente zu erstellen, deren Funktionalität gekapselt ist und damit vollständig getrennt von anderem Code.</p>
+
+<h2 id="Konzept_und_Anwendung">Konzept und Anwendung</h2>
+</div>
+
+<p>Unter Softwareentwicklern ist allgemein anerkannt, Code weitestgehend wiederzuverwenden. Für benutzerdefinierte Markup-Strukturen war dies bekanntermaßen nicht ganz so einfach. Denken Sie nur an das komplexe HTML- (sowie CSS- und Skript-)Konglomerat, das teilweise notwendig war, um benutzerdefinierte UI-Steuerelemente zu erstellen; und wie die mehrfache Verwendung derartiger benutzerdefinierter Elemente auf einer Seite zu einem völlig undurchsichtigen Wirrwar führen kann, wenn man nicht äußerst sorgfältig vorgeht.</p>
+
+<p>Webkomponenten zielen darauf ab, diese Probleme zu lösen. Bestehend aus drei Haupttechnologien, die gemeinsam eingesetzt werden können, um unterschiedliche und vielseitige benutzerdefinierte Elemente mit in sich gekapselter Funktionalität zu erstellen, die beliebig oft wiederverwendet werden können, ohne befürchten zu müssen, dass unterschiedlicher Code sich gegenseitig beeinflusst oder stört:</p>
+
+<ul>
+ <li><strong>Benutzerdefinierte Elemente</strong>: Ein Satz von JavaScript APIs, die es ermöglichen, benutzerdefinierte Elemente sowie deren Verhalten zu definieren, die dann anschließend beliebig auf Ihrer Benutzeroberfläche verwendet werden können.</li>
+ <li><strong>Shadow DOM</strong>: Ein Satz von JavaScript APIs, um einen Baum aus darin gekapselten "Schatten"-DOM-Elementen an ein Element anzufügen, der unabhängig vom DOM des Hauptdokuments gerendert wird, sowie um die dazugehörige Funktionalität zu steuern. Mit Hilfe dieser Technologie verbleiben die Ausprägungen solcher Elemente privat, sodass Skripte und Styles auf sie angewendet werden können, ohne dass sie mit anderen Teilen des Dokuments kollidieren.</li>
+ <li><strong>HTML-Vorlagen</strong>: Die {{HTMLElement("template")}}- und {{HTMLElement("slot")}}-Elemente gestatten es, Markup-Vorlagen zu schreiben, die nicht auf der dargestellten Seite abgebildet werden. Diese können dann als Grundlage für benutzerdefinierte Elemente mehrere Male wiederverwendet werden.</li>
+</ul>
+
+<p>Die grundsätzliche Herangehensweise für das Implementieren einer Webkomponente sieht im Allgemeinen so aus:</p>
+
+<ol>
+ <li>Erstellen einer Klasse oder einer Funktion, in der die Funktionalität der Webkomponente festgelegt wird. Falls Sie hierzu eine Klasse einsetzen, dann verwenden Sie die ECMAScript 2015-Syntax (siehe auch <a href="/de-DE/docs/Web/JavaScript/Reference/Classes">Klassen</a>).</li>
+ <li>Registrieren des neuen benutzerdefinierten Elements mithilfe der {{domxref("CustomElementRegistry.define()")}}-Methode. Dieser Methode werden der zu definierende Elementname, die Klasse bzw. Funktion, in der die Funktionalität definiert ist, sowie optional das Element, von dem das neue benutzerdefinierte Element erbt, übergeben.</li>
+ <li>Falls erforderlich: Anfügen eines Schatten-DOMs zum benutzerdefinierten Element mithilfe der {{domxref("Element.attachShadow()")}}-Methode. Kindelemente, Ereignisbehandlungsroutinen usw. werden dem Schatten-DOM unter Verwendung der üblichen DOM-Methoden hinzugefügt.</li>
+ <li>Falls erforderlich: Definieren einer HTML-Vorlage mithilfe von {{htmlelement("template")}} und {{htmlelement("slot")}}. Auch hier werden die üblichen DOM-Methoden verwendet, um die HTML-Vorlage anschließend zu kopieren und zum Schatten-DOM hinzuzufügen.</li>
+ <li>Das so geschaffene benutzerdefinierte Element kann überall auf der Seite eingefügt werden — ebenso wie ein normales HTML-Element.</li>
+</ol>
+
+<h2 id="Übungen">Übungen</h2>
+
+<dl>
+ <dt><a href="/de-DE/docs/Web/Web_Components/Using_custom_elements">Benutzerdefinierte Elemente</a></dt>
+ <dd>Zeigt, wie benutzerdefinierte Elemente eingesetzt werden können, um einfache Webkomponenten zu erzeugen, die Rückruffunktionen (Callbacks) innerhalb des Lebenszyklus' einer Webkomponente, sowie einige weitere, fortgeschrittene Bestandteile benutzerdefinierter Elemente.</dd>
+ <dt><a href="/de-DE/docs/Web/Web_Components/Using_shadow_DOM">Schatten-DOM</a></dt>
+ <dd>Wirft einen Blick auf die Grundlagen des Schatten-DOMs: Wie ein Schatten-DOM an ein Element angefügt wird, wie Elemente zum Baum des Schatten-DOMs hinzugefügt werden, wie Stile auf sie angewendet werden, und weiteres mehr.</dd>
+ <dt><a href="/de-DE/docs/Web/Web_Components/Using_templates_and_slots">Vorlagen und Einschübe</a></dt>
+ <dd>Zeigt, wie eine wiederverwendbare HTML-Struktur mithilfe der {{htmlelement("template")}} und {{htmlelement("slot")}}-Elemente definiert und diese Struktur anschließend innerhalb von Webkomponenten eingesetzt wird.</dd>
+</dl>
+
+<h2 id="Referenz">Referenz</h2>
+
+<h3 id="Benutzerdefinierte_Elemente">Benutzerdefinierte Elemente</h3>
+
+<dl>
+ <dt>{{domxref("CustomElementRegistry")}}</dt>
+ <dd>Beinhaltet Methoden in Bezug auf benutzerdefinierte Elemente, insbesondere die {{domxref("CustomElementRegistry.define()")}}-Methode, die zum Registrieren neuer benutzerdefinierter Elemente verwendet wird, damit sie in einem Dokument verwendet werden können.</dd>
+ <dt>{{domxref("Window.customElements")}}</dt>
+ <dd>Liefert eine Referenz auf ein <code>CustomElementRegistry</code>-Objekt.</dd>
+ <dt><a href="/de-DE/docs/Web/Web_Components/Using_custom_elements#Using_the_lifecycle_callbacks">Rückruffunktionen innerhalb des Lebenszyklus</a></dt>
+ <dd>Spezielle Callback-Funktionen, die innerhalb der Klasse des benutzerdefinierten Steuerelements definiert sind und dessen Verhalten steuern:
+ <ul>
+  <li><code>connectedCallback</code>: Wird aufgerufen, wenn das benutzerdefinierte Element mit dem DOM des Dokuments verbunden ist.</li>
+  <li><code>disconnectedCallback</code>: Wird aufgerufen, wenn das benutzerdefinierte Element vom DOM des Dokuments abgetrennt wird.</li>
+  <li><code>adoptedCallback</code>: Wird aufgerufen, wenn das benutzerdefinierte Element zu einem neuen Dokument verschoben wird.</li>
+  <li><code>attributeChangedCallback</code>: Wird aufgerufen, wenn eines der Attribute des benutzerdefinierten Elements hinzugefügt, gelöscht oder verändert wird.</li>
+ </ul>
+ </dd>
+ <dt>Erweiterungen, um benutzerdefinierte eingebaute Elemente zu erzeugen</dt>
+ <dd>
+ <ul>
+  <li>Das globale {{htmlattrxref("is")}}-Attribut dient dazu, ein Standard-HTML-Element anzugeben, das sich wie ein benutzerdefiniertes Element verhalten soll.</li>
+  <li>Die "is"-Option der {{domxref("Document.createElement()")}}-Methode dient dazu, eine Instanz eines zuvor registrierten benutzerdefinierten Standard-HTML-Elements zu erzeugen.</li>
+ </ul>
+ </dd>
+ <dt>CSS Pseudoklassen</dt>
+ <dd>Pseudoklassen, die sich speziell auf benutzerdefinierte Elemente beziehen:
+ <ul>
+  <li>{{cssxref(":defined")}}: Trifft auf jedes definierte Element zu, einschließlich eingebauter und benutzerdefinierter Elemente, die mithilfe von <code>CustomElementRegistry.define()</code> definiert sind.</li>
+  <li>{{cssxref(":host")}}: Wählt das jeweilige Container-Element des <a href="/de-DE/docs/Web/Web_Components/Using_shadow_DOM">Schatten-DOMs</a>, auf das die jeweilige CSS-Regel angewendet wird.</li>
+  <li>{{cssxref(":host()")}}: Wählt das Container-Element des <a href="/de-DE/docs/Web/Web_Components/Using_shadow_DOM">Schatten-DOMs</a>, auf das die jeweilige CSS-Regel angewendet wird — aber nur dann, wenn der Selektor, der als Funktionsargument übergeben wird, auf das jeweilige Container-Element passt.</li>
+  <li>{{cssxref(":host-context()")}}: Wählt das Container-Element des <a href="/de-DE/docs/Web/Web_Components/Using_shadow_DOM">Schatten-DOMs</a>, auf das die jeweilige CSS-Regel angewendet wird — aber nur dann, wenn der Selektor, der als Funktionsargument übergeben wird, auf die dem jeweiligen Container-Element übergeordnete Hierarchie innerhalb des DOMs passt.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Schatten-DOM">Schatten-DOM</h3>
+
+<dl>
+ <dt>{{domxref("ShadowRoot")}}</dt>
+ <dd>Repräsentiert die Wurzel-Node eines <a href="/de-DE/docs/Web/Web_Components/Using_shadow_DOM">Schatten-DOM</a>-Baums.</dd>
+ <dt>{{domxref("DocumentOrShadowRoot")}}</dt>
+ <dd>Ein Mixin, das diejenigen Merkmale definiert, die sowohl in einem Dokument als auch in der Wurzel-Node eines <a href="/de-DE/docs/Web/Web_Components/Using_shadow_DOM">Schatten-DOM</a>-Baums verfügbar sind.</dd>
+ <dt>{{domxref("Element")}}-Erweiterungen</dt>
+ <dd>Erweiterungen zur <code>Element</code>-Schnittstelle, die sich auf das <a href="/de-DE/docs/Web/Web_Components/Using_shadow_DOM">Schatten-DOM</a> beziehen:
+ <ul>
+  <li>Die {{domxref("Element.attachShadow()")}}-Methode fügt einen <a href="/de-DE/docs/Web/Web_Components/Using_shadow_DOM">Schatten-DOM</a>-Baum an das angegebene Element an.</li>
+  <li>Die {{domxref("Element.shadowRoot")}}-Eigenschaft liefert die Wurzel-Node des <a href="/de-DE/docs/Web/Web_Components/Using_shadow_DOM">Schatten-DOM</a>-Baums des angegebenen Elements; oder <code>null</code>, falls kein <a href="/de-DE/docs/Web/Web_Components/Using_shadow_DOM">Schatten-DOM</a>-Baum angefügt wurde.</li>
+ </ul>
+ </dd>
+ <dt>Wichtige {{domxref("Node")}}-Erweiterungen</dt>
+ <dd>Erweiterung zur <code>Node</code>-Schnittstelle, die sich auf das <a href="/de-DE/docs/Web/Web_Components/Using_shadow_DOM">Schatten-DOM</a> beziehen:
+ <ul>
+  <li>Die {{domxref("Node.getRootNode()")}}-Methode liefert die Wurzel-Node des Kontextobjekts, die optional auch die Wurzel-Node des <a href="/de-DE/docs/Web/Web_Components/Using_shadow_DOM">Schatten-DOM</a>-Baums enthält, sofern verfügbar.</li>
+  <li>Die {{domxref("Node.isConnected")}}-Eigenschaft liefert einen booleschen Wert, der angibt, ob eine Node (direkt oder indirekt) mit dem Kontextobjekt verbunden ist oder nicht. Dies ist beispielsweise das {{domxref("Document")}}-Objekt im Falle eines normalen DOMs bzw. das {{domxref("ShadowRoot")}}-Objekt im Falle eines <a href="/de-DE/docs/Web/Web_Components/Using_shadow_DOM">Schatten-DOMs</a>.</li>
+ </ul>
+ </dd>
+ <dt>{{domxref("Event")}}-Erweiterungen</dt>
+ <dd>Erweiterungen der <code>Event</code>-Schnittstelle, die sich auf das <a href="/de-DE/docs/Web/Web_Components/Using_shadow_DOM">Schatten-DOM</a> beziehen:
+ <ul>
+  <li>{{domxref("Event.composed")}}: Liefert einen booleschen Wert, der angibt, ob ein Ereignis sich vom <a href="/de-DE/docs/Web/Web_Components/Using_shadow_DOM">Schatten-DOM</a> in das normale DOM fortsetzt (<code>true</code>), oder nicht (<code>false</code>).</li>
+  <li>{{domxref("Event.composedPath")}}: Liefert den Pfad des Ereignisses (Objekte, deren Ereignisbehandlungsroutinen aufgerufen werden). Ausgeschlossen hiervon sind Nodes in <a href="/de-DE/docs/Web/Web_Components/Using_shadow_DOM">Schatten-DOM</a>-Bäumen, wenn die Wurzel-Node des <a href="/de-DE/docs/Web/Web_Components/Using_shadow_DOM">Schatten-DOM</a>-Baums mit <code>{{domxref("ShadowRoot.mode")}} = "closed"</code> erstellt wurde.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="HTML-Vorlagen">HTML-Vorlagen</h3>
+
+<dl>
+ <dt>{{htmlelement("template")}}</dt>
+ <dd>Beinhaltet ein HTML-Fragment, das nicht dargestellt wird, wenn das beinhaltende Dokument geladen wird. Es kann aber zur Laufzeit mit Hilfe von JavaScript angezeigt werden. Es wird hauptsächlich als Grundstruktur für benutzerdefinierte Elemente verwendet. Die dazugehörige DOM-Schnittstelle lautet: {{domxref("HTMLTemplateElement")}}.</dd>
+ <dt>{{htmlelement("slot")}}</dt>
+ <dd>Ein Platzhalter innerhalb einer Webkomponente, die mit benutzerdefiniertem Markup gefüllt werden kann. Auf diese Weise lassen sich unterschiedliche DOM-Fragmente mit der gleichen HTML-Vorlage erstellen, die alle gemeinsam dargestellt werden können. Die dazugehörige DOM-Schnittstelle lautet: {{domxref("HTMLSlotElement")}}.</dd>
+ <dt>Das globale <code><a href="/de-DE/docs/Web/HTML/Global_attributes/slot">slot</a></code> HTML-Attribut</dt>
+ <dd>Weist einem Element einen Einschub innerhalb eines <a href="/de-DE/docs/Web/Web_Components/Using_shadow_DOM">Schatten-DOM</a>-Baums zu.</dd>
+ <dt>{{domxref("Slotable")}}</dt>
+ <dd>Ein Mixin, das sowohl von {{domxref("Element")}}- als auch {{domxref("Text")}}-Nodes implementiert wird. Es definiert Methoden, die es den jeweiligen Nodes erlauben, Inhalt eines {{htmlelement("slot")}}-Elements zu werden. Das Mixin definiert ein Attribute: {{domxref("Slotable.assignedSlot")}}, das eine Referenz auf den Einschub liefert, in den die Node eingefügt wurde.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Element")}}-Erweiterungen</dt>
+ <dd>Erweiterungen der <code>Element</code>-Schnittstelle, die sich auf Einschübe beziehen:
+ <ul>
+  <li>{{domxref("Element.slot")}}: Liefert den Namen des Einschubs, der dem Element hinzugefügt wurde.</li>
+ </ul>
+ </dd>
+ <dt>CSS Pseudoelemente</dt>
+ <dd>Pseudoelemente, die sich speziell auf Einschübe beziehen:
+ <ul>
+  <li>{{cssxref("::slotted")}}: Trifft auf jeden Inhalt zu, der einem Einschub hinzugefügt wurde.</li>
+ </ul>
+ </dd>
+ <dt>Das {{event("slotchange")}}-Ereignis</dt>
+ <dd>Wird auf einer {{domxref("HTMLSlotElement")}}-Instanz ({{htmlelement("slot")}}-Element) ausgelöst, wenn die Node(s), die sich im Einschub befinden, verändern.</dd>
+</dl>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Sie finden eine Reihe von Beispielen in unserem <a href="https://github.com/mdn/web-components-examples">web-components-examples</a> GitHub-Repository. Diesem Repository werden über die Zeit weitere Beispiele hinzugefügt.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG","scripting.html#the-template-element","&lt;template&gt; element")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Definition von {{HTMLElement("template")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG","scripting.html#the-slot-element","&lt;slot&gt; element")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Definition von {{HTMLElement("slot")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG","custom-elements.html#custom-elements","custom elements")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Definition von <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements">benutzerdefinierten HTML Elementen</a>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG","#shadow-trees","shadow trees")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Definition des <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM">Schatten-DOMs</a>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML Imports", "", "")}}</td>
+   <td>{{Spec2("HTML Imports")}}</td>
+   <td>Erste <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/HTML_Imports">HTML Importe</a>-Definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Shadow DOM", "", "")}}</td>
+   <td>{{Spec2("Shadow DOM")}}</td>
+   <td>Erste <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM">Schatten-DOM</a>-Definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>Grundsätzlich:</p>
+
+<ul>
+ <li>Webkomponenten werden standardmäßig von Firefox (ab Version 63), Chrome, und Opera unterstützt.</li>
+ <li>Safari unterstützts eine Reihe von Merkmalen von Webkomponenten, aber weniger als die oben genannten Browser.</li>
+ <li>Edge arbeitet an einer Implementation.</li>
+</ul>
+
+<p>Um detaillierte Informationen zur Unterstützung spezifischer Merkmale einzelner Browser zu erhalten, ziehen sie bitte die oben genannten Referenzdokumente zu Rate.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="https://www.webcomponents.org/">webcomponents.org</a> — Website, die Beispiele, Übungen und weiterführende Informationen zu Webkomponenten bietet.</li>
+ <li><a href="https://github.com/hybridsjs/hybrids">Hybrids</a> — Open-Source Webkomponenten-Bibliothek, die simple Objekte und reine Funktionen der <code>class</code> und <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">this</span></font> Syntax vorzieht. Die Bibliothek bietet eine einfache, funktionale API, um benutzerdefinierte Elemente zu erzeugen.</li>
+ <li><a href="https://www.polymer-project.org/">Polymer</a> — Googles Webkomponenten-Framework — eine Sammlung von Polyfills, Erweiterungen und Beispielen. Dieses Framework ist aktuell der einfachste Weg, Webkomponenten browserübergreifend einzusetzen.</li>
+ <li><a href="https://github.com/devpunks/snuggsi#readme">Snuggsi.es</a> — Einfacher Zugriff auf Webkomponenten in ~1kB, <em>inklusive Polyfill</em> — Alles, was Sie benötigen, ist ein Browser und ein grundsätzliches Verständnis von HTML, CSS und JavaScript Klassen, um zu starten.</li>
+ <li><a href="https://github.com/slimjs/slim.js">Slim.js</a> — Open-Source Webkomponenten-Bibliothek — eine hochperformante Bibliothek, um schnell und einfach Komponenten zu erstellen. Durch Plug-ins erweiterbar und Cross-Framework-kompatibel.</li>
+ <li><a href="https://www.htmlelements.com/">Smart.js</a> — Webkomponenten-Bibliothek mit einer einfachen API, um browserübergreifend benutzerdefinierte Elemente zu erstellen. </li>
+</ul>
diff --git a/files/de/web/web_components/using_custom_elements/index.html b/files/de/web/web_components/using_custom_elements/index.html
new file mode 100644
index 0000000000..9486ce75e1
--- /dev/null
+++ b/files/de/web/web_components/using_custom_elements/index.html
@@ -0,0 +1,249 @@
+---
+title: Benutzerdefinierte Elemente
+slug: Web/Web_Components/Using_custom_elements
+translation_of: Web/Web_Components/Using_custom_elements
+---
+<div>{{DefaultAPISidebar("Web Components")}}</div>
+
+<p class="summary">Eines der Hauptmerkmale des Web Components Standards ist die Möglichkeit, benutzerdefinierte Elemente (custom elements) zu erstellen, die ihre Funktionalität auf einer HTML-Seite kapseln, anstatt sich mit einem langen, verschachtelten Stapel von Elementen begnügen zu müssen, die zusammen eine benutzerdefinierte Seitenfunktion bereitstellen. Dieser Artikel stellt die Verwendung von benutzerdefinierten HTML-Elementen vor.</p>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Benutzerdefinierte Elemente werden standardmäßig in Chrome und Opera unterstützt. Firefox ist sehr weit in der Entwicklung; sie sind derzeit verfügbar, wenn Sie die Einstellungen <code>dom.webcomponents.shadowdom.enabled </code>und <code>dom.webcomponents.customelements.enabled</code> auf <code>true</code> setzen. Die Implementierung von Firefox soll in der Version 60/61 standardmäßig aktiviert werden. Safari unterstützt bisher nur autonome benutzerdefinierte Elemente, und Edge arbeitet auch an einer Implementierung.</p>
+</div>
+
+<h2 id="High-Level-Ansicht">High-Level-Ansicht</h2>
+
+<p>Der Controller von benutzerdefinierten Elementen in einem Web-Dokument ist das Objekt {{domxref("CustomElementRegistry")}} - mit diesem Objekt können Sie ein benutzerdefiniertes Element auf der Seite registrieren, Informationen darüber zurückgeben, welche benutzerdefinierten Elemente registriert sind etc.</p>
+
+<p>Um ein benutzerdefiniertes Element auf der Seite zu registrieren, verwenden Sie die Methode {{domxref("CustomElementRegistry.define()")}}. Das sind die Argumente:</p>
+
+<ul>
+ <li>Ein {{domxref("DOMString")}} repräsentiert den Namen, den Sie dem Element geben. Beachten Sie, dass benutzerdefinierte Elementnamen einen <a href="https://stackoverflow.com/questions/22545621/do-custom-elements-require-a-dash-in-their-name">Bindestrich erfordern</a>; sie können keine einzelnen Wörter sein.</li>
+ <li>Ein <a href="/en-US/docs/Web/JavaScript/Reference/Classes">Klassenobjekt</a>, das das Verhalten des Elements definiert.</li>
+ <li>Optional ein Optionsobjekt, das eine <code>extends</code>Eigenschaft enthält, die das eingebaute Element angibt, von dem Ihr Element erbt, falls vorhanden.</li>
+</ul>
+
+<p>So können wir z.B. ein benutzerdefiniertes <a href="https://mdn.github.io/web-components-examples/word-count-web-component/">Wortzählelement</a> wie dieses definieren:</p>
+
+<pre class="brush: js">customElements.define('word-count', WordCount, { extends: 'p' });</pre>
+
+<p>Das Element heißt <code>word-count</code>, sein Klassenobjekt ist WordCount, und es erweitert das Element {{htmlelement("p")}}.</p>
+
+<p>Das Klassenobjekt eines benutzerdefinierten Elements wird mit der ES 2015 Standardsyntax einer Klasse geschrieben. Zum Beispiel ist <code>WordCount</code>so aufgebaut:</p>
+
+<pre class="brush: js">class WordCount extends HTMLParagraphElement {
+  constructor() {
+    // Always call super first in constructor
+    super();
+
+    // Element functionality written in here
+
+    ...
+  }
+}</pre>
+
+<p>Dies ist nur ein einfaches Beispiel, aber es gibt noch mehr, was Sie hier tun können. Es ist möglich, spezifische Lifecycle-Callbacks innerhalb des Konstruktors zu definieren, die an bestimmten Stellen im Lebenszyklus des Elements ablaufen. Zum Beispiel wird <code>connectedCallback </code>aufgerufen, wenn das benutzerdefinierte Element zum ersten Mal mit dem DOM des Dokuments verbunden wird, während <code>attributeChangedCallback</code> aufgerufen wird, wenn eines der Attribute des benutzerdefinierten Elements hinzugefügt, entfernt oder geändert wird.</p>
+
+<p>Im untenstehenden Kapitel {{anch("Using the lifecycle callbacks")}} wirst du mehr über Lifecycle-Callbacks erfahren.</p>
+
+<p>Es gibt zwei Arten von benutzerdefinierten Elementen:</p>
+
+<ul>
+ <li><strong>Autonome benutzerdefinierte Elemente</strong> sind eigenständig, d.h. sie erben nicht von standardisierten HTML-Elementen. Du kannst diese Art von benutzerdefinierten Elementen verwenden, indem du ein HTML-Element mit dem entsprechenden Namen erzeugst, z.B. <code>&lt;popup-info&gt;</code> oder <code>document.createElement("popup-info")</code>.</li>
+ <li><strong>Benutzerdefinierte Standardelemente</strong> erben von standardisierten HTML-Elementen. Beim Erstellen eines solchen Elements musst du angeben, von welchem standardisierten HTML-Element geerbt wird (vgl. obige Beispiele). Um ein benutzerdefiniertes Standardelement zu verwenden, erstellst du Objekt des Basiselements mit dem Attribut (oder der Eigenschaft) {{htmlattrxref("is")}}, z.B. <code>&lt;p is="word-count"&gt;</code> oder <code>document.createElement("p", { is: "word-count" })</code>. </li>
+</ul>
+
+<h2 id="Weitere_einfache_Beispiele">Weitere einfache Beispiele</h2>
+
+<p>Wir gehen durch einige einfache Beispiele um etwas detaillierter zu zeigen wie benutzerdefinierte Elemente erzeugt werden. </p>
+
+<h3 id="Autonome_benutzerdefinierte_Elemente"><strong>Autonome benutzerdefinierte Elemente</strong></h3>
+
+<p>Wir betrachten ein Beispiel eines autonomen benutzerdefinierte Elementes —<br>
+ <code><a href="https://github.com/mdn/web-components-examples/tree/master/popup-info-box-web-component">&lt;popup-info-box&gt;</a></code> (siehe hierzu <a href="https://mdn.github.io/web-components-examples/popup-info-box-web-component/">live example</a>).</p>
+
+<p>Dieses Element nimmt ein Icon und einen Textstring entgegen und fügt das Icon in die Seite ein. Erhält das Icon den Focus, wird der Text in einem Popup-Dialog angezeigt um mehr Information anzubieten</p>
+
+<p>Folgendes  JavaScript File definiert eine Klasse  <code>PopUpInfo</code>, welches das {{domxref("HTMLElement")}} erweitert. Autonome benutzerdefinierte Elemente erweitern nahezu immer das <code>HTMLElement</code>.</p>
+
+<pre class="brush: js">class PopUpInfo extends HTMLElement {
+  constructor() {
+    // Always call super first in constructor
+    super();
+
+    // write element functionality in here
+
+    ...
+  }
+}</pre>
+
+<p>Dieser Code enthält die {{jsxref("Classes.constructor","constructor")}} Definition für diese Klasse, welche immer mit einem Aufruf von  <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super()</a></code> beginnt, damit die korrekte Prototypkette erzeugt wird.</p>
+
+<p>Innerhalb des Konstruktors definieren wir alle Funktionalität welche das Element haben wird wenn von diesem eine Instanz erzeugt wird. </p>
+
+<p>Wir binden eine shadow root an das Element, benutzen DOM-Funktionalität um die interne shadow DOM -Struktur zu erzeugen, welch dann an die shadow root gebunden wird. Abschließend fügen wir der shadow root noch etwas CSS hinzu um diese zu stylen.</p>
+
+<pre class="brush: js">// Create a shadow root
+var shadow = this.attachShadow({mode: 'open'});
+
+// Create spans
+var wrapper = document.createElement('span');
+wrapper.setAttribute('class','wrapper');
+var icon = document.createElement('span');
+icon.setAttribute('class','icon');
+icon.setAttribute('tabindex', 0);
+var info = document.createElement('span');
+info.setAttribute('class','info');
+
+// Take attribute content and put it inside the info span
+var text = this.getAttribute('text');
+info.textContent = text;
+
+// Insert icon
+var imgUrl;
+if(this.hasAttribute('img')) {
+  imgUrl = this.getAttribute('img');
+} else {
+  imgUrl = 'img/default.png';
+}
+var img = document.createElement('img');
+img.src = imgUrl;
+icon.appendChild(img);
+
+// Create some CSS to apply to the shadow dom
+var style = document.createElement('style');
+
+style.textContent = '.wrapper {' +
+// CSS truncated for brevity
+
+// attach the created elements to the shadow dom
+
+shadow.appendChild(style);
+shadow.appendChild(wrapper);
+wrapper.appendChild(icon);
+wrapper.appendChild(info);</pre>
+
+<p>Letztlich registrieren wir unser benutzerdefiniertes Elementen in der <code>CustomElementRegistry</code> mit der Methode <code>define()</code> , in deren Parametern spezifizieren wir den Namen des Elements und dann den Namen der Klasse welche die Funktionalität definiert:</p>
+
+<pre class="brush: js">customElements.define('popup-info', PopUpInfo);</pre>
+
+<p>Jetzt ist unser benutzerdefiniertes Elementen fertig zur Benutzung auf unserer Seite.<br>
+ In unserem HTML sieht das nun so aus:</p>
+
+<pre class="brush: html">&lt;popup-info img="img/alt.png" text="Your card validation code (CVC)
+  is an extra security feature — it is the last 3 or 4 numbers on the
+  back of your card."&gt;</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Die vollständige <a href="https://github.com/mdn/web-components-examples/blob/master/popup-info-box-web-component/main.js"> JavaScript Quelle </a>.</p>
+</div>
+
+<h3 id="Customized_built-in_elements">Customized built-in elements</h3>
+
+<p>Now let's have a look at another customized built in element example — <a href="https://github.com/mdn/web-components-examples/tree/master/expanding-list-web-component">expanding-list</a> (<a href="https://mdn.github.io/web-components-examples/expanding-list-web-component/">see it live also</a>). This turns any unordered list into an expanding/collapsing menu.</p>
+
+<p>First of all, we define our element's class, in the same manner as before:</p>
+
+<pre class="brush: js">class ExpandingList extends HTMLUListElement {
+  constructor() {
+    // Always call super first in constructor
+    super();
+
+    // write element functionality in here
+
+    ...
+  }
+}</pre>
+
+<p>We will not explain the element functionality in any detail here, but you can discover how it works by checking out the source code. The only real difference here is that our element is extending the {{domxref("HTMLUListElement")}} interface, and not {{domxref("HTMLElement")}}. So it has all the characteristics of a {{htmlelement("ul")}} element with the functionality we define built on top, rather than being a standalone element. This is what makes it a customized built-in, rather than an autonomous element.</p>
+
+<p>Next, we register the element using the <code>define()</code> method as before, except that this time it also includes an options object that details what element our custom element inherits from:</p>
+
+<pre class="brush: js">customElements.define('expanding-list', ExpandingList, { extends: "ul" });</pre>
+
+<p>Using the built-in element in a web document also looks somewhat different:</p>
+
+<pre class="brush: html">&lt;ul is="expanding-list"&gt;
+
+  ...
+
+&lt;/ul&gt;</pre>
+
+<p>You use a <code>&lt;ul&gt;</code> element as normal, but specify the name of the custom element inside the <code>is</code> attribute.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Again, you can see the full <a href="https://github.com/mdn/web-components-examples/blob/master/expanding-list-web-component/main.js">JavaScript source code</a> here.</p>
+</div>
+
+<h2 id="Using_the_lifecycle_callbacks">Using the lifecycle callbacks</h2>
+
+<p>You can define several different callbacks inside a custom element's constructor, which fire at different points in the element's lifecycle:</p>
+
+<ul>
+ <li><code>connectedCallback</code>: Invoked when the custom element is first connected to the document's DOM.</li>
+ <li><code>disconnectedCallback</code>: Invoked when the custom element is disconnected from the document's DOM.</li>
+ <li><code>adoptedCallback</code>: Invoked when the custom element is moved to a new document.</li>
+ <li><code>attributeChangedCallback</code>: Invoked when one of the custom element's attributes is added, removed, or changed.</li>
+</ul>
+
+<p>Let's look at an example of these in use. The code below is taken from the <a href="https://github.com/mdn/web-components-examples/tree/master/life-cycle-callbacks">life-cycle-callbacks</a> example (<a href="https://mdn.github.io/web-components-examples/life-cycle-callbacks/">see it running live</a>). This is a trivial example that simply generates a colored square of a fixed size on the page. The custom element looks like this:</p>
+
+<pre class="brush: html">&lt;custom-square l="100" c="red"&gt;&lt;/custom-square&gt;</pre>
+
+<p>The class constructor is really simple — here we attach a shadow DOM to the element, then attach empty {{htmlelement("div")}} and {{htmlelement("style")}} elements to the shadow root:</p>
+
+<pre class="brush: js">var shadow = this.attachShadow({mode: 'open'});
+
+var div = document.createElement('div');
+var style = document.createElement('style');
+shadow.appendChild(style);
+shadow.appendChild(div);</pre>
+
+<p>The key function in this example is <code>updateStyle()</code> — this takes an element, gets its shadow root, finds its <code>&lt;style&gt;</code> element, and adds {{cssxref("width")}}, {{cssxref("height")}}, and {{cssxref("background-color")}} to the style.</p>
+
+<pre class="brush: js">function updateStyle(elem) {
+  var shadow = elem.shadowRoot;
+  var childNodes = shadow.childNodes;
+  for(var i = 0; i &lt; childNodes.length; i++) {
+    if(childNodes[i].nodeName === 'STYLE') {
+      childNodes[i].textContent = 'div {' +
+                          ' width: ' + elem.getAttribute('l') + 'px;' +
+                          ' height: ' + elem.getAttribute('l') + 'px;' +
+                          ' background-color: ' + elem.getAttribute('c');
+    }
+  }
+}</pre>
+
+<p>The actual updates are all handled by the life cycle callbacks, which are placed inside the constructor. The <code>connectedCallback()</code> runs when the element is added to the DOM — here we run the <code>updateStyle()</code> function to make sure the square is styled as defined in its attributes:</p>
+
+<pre class="brush: js">connectedCallback() {
+  console.log('Custom square element added to page.');
+  updateStyle(this);
+}</pre>
+
+<p>the <code>disconnectedCallback()</code> and <code>adoptedCallback()</code> callbacks log simple messages to the console to inform us when the element is either removed from the DOM, or moved to a different page:</p>
+
+<pre class="brush: js">disconnectedCallback() {
+  console.log('Custom square element removed from page.');
+}
+
+adoptedCallback() {
+  console.log('Custom square element moved to new page.');
+}</pre>
+
+<p>The <code>attributeChangedCallback()</code> callback is run whenever one of the element's attributes is changed in some way. As you can see from its properties, it is possible to act on attributes individually, looking at their name, and old and new attribute values. In this case however, we are just running the <code>updateStyle()</code> function again to make sure that the square's style is updated as per the new values:</p>
+
+<pre class="brush: js">attributeChangedCallback(name, oldValue, newValue) {
+  console.log('Custom square element attributes changed.');
+  updateStyle(this);
+}</pre>
+
+<p>Note that to get the <code>attributeChangedCallback()</code> callback to fire when an attribute changes, you have to observe the attributes. This is done by calling the <code>observedAttributes()</code> getter inside custom element class, including inside it a <code>return</code> statement that returns an array containing the names of the attributes you want to observe:</p>
+
+<pre class="brush: js">static get observedAttributes() {return ['w', 'l']; }</pre>
+
+<p>This is placed right at the top of the constructor, in our example.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Find the <a href="https://github.com/mdn/web-components-examples/blob/master/life-cycle-callbacks/main.js">full JavaScript source</a> here.</p>
+</div>
diff --git a/files/de/web/webapi/index.html b/files/de/web/webapi/index.html
new file mode 100644
index 0000000000..6dd336c62e
--- /dev/null
+++ b/files/de/web/webapi/index.html
@@ -0,0 +1,133 @@
+---
+title: WebAPI
+slug: Web/WebAPI
+tags:
+  - Apps
+  - DOM
+  - Firefox OS
+  - Mobile
+translation_of: Web/API
+---
+<p><strong>WebAPI</strong> ist ein Begriff, der auf eine Palette von Zugangs APIs verweist, die Web-Anwendungen erlaubt auf Geräte-Hardware (wie z. B. den Batteriestatus oder die Vibrations Hardware) zu zugreifen. Der Zugriff auf Daten (z. B. Kalender oder Kontakte), die auf dem Gerät gespeichert wurden ist ebenso möglich. Durch das Hinzufügen dieser APIs, hoffen wir, dass das Web um Funktionen erweitert wird, die proprietär Plattformen schon länger bereitstellen.</p>
+
+<div class="note">
+<p><span id="result_box" lang="de"><strong><span class="hps">Hinweis:</span></strong> More of this documentation has been written than it looks like; links are not all added yet. We're actively working on improving this and expect to see things much better over the next couple of weeks. See the <a href="https://developer.mozilla.org/en-US/docs/WebAPI/Doc_status" title="WebAPI/Doc_status">WebAPI doc status page</a>, where we're tracking work on WebAPI docs.</span></p>
+</div>
+
+<div class="note">
+<p><span id="result_box" lang="de"><span class="hps"><strong>Hinweis</strong>:</span> E<span class="hps">ine</span> <span class="hps">kurze Erläuterung der einzelnen</span> <span class="short_text" id="result_box" lang="de"><span class="alt-edited hps">Plaketten </span></span><span class="hps">finden Sie in der</span></span> Dokumentation für <a href="/en-US/docs/Web/Apps/Packaged_apps#Types_of_packaged_apps" title="Web/Apps/Packaged_apps#Types_of_packaged_apps">gepackte Apps</a>.</p>
+</div>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Communication_APIs" name="Communication_APIs"><span class="short_text" id="result_box" lang="de"><span class="hps">Kommunikations </span></span>APIs</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/WebAPI/Network_Information" title="WebAPI/Network_Information"><span class="short_text" id="result_box" lang="de"><span class="alt-edited hps">Netzwerkinformation</span> <span class="hps">API</span></span></a></dt>
+ <dd><span id="result_box" lang="de"><span class="hps">Stellt grundlegende</span> <span class="hps">Informationen über die aktuelle </span><span class="hps">Netzwerkverbindung</span> so <span class="hps">wie</span> <span class="hps">Verbindungsgeschwindigkeit zur verfügung.</span></span></dd>
+ <dt><a href="/en-US/docs/WebAPI/WebBluetooth" title="WebAPI/WebBluetooth">Bluetooth</a> {{NonStandardBadge}}</dt>
+ <dd><span id="result_box" lang="de"><span class="hps">Die</span> <span class="hps">WebBluetooth</span> <span class="hps">API bietet</span> <span class="atn hps">Low-Level-</span><span>Zugriff auf</span> die <span class="hps">Bluetooth-Hardware</span> <span class="hps">des Geräts.</span></span></dd>
+ <dt><a href="/en-US/docs/WebAPI/Mobile_Connection" title="WebAPI/Mobile_Connection">M<span class="short_text" id="result_box" lang="de"><span class="alt-edited hps">obile Verbindung</span></span> API</a> {{NonStandardBadge}}</dt>
+ <dd><span id="result_box" lang="de"><span class="hps">Bietet</span> <span class="hps">Informationen über</span> die <span class="hps">Mobilfunk-Konnektivität</span> <span class="hps">des Gerätes</span><span>,</span> <span class="hps">Signalstärke</span><span>, Bedieninformationen</span>, <span class="hps">usw</span><span class="hps">.</span></span></dd>
+ <dt><a href="/en-US/docs/WebAPI/Network_Stats" title="WebAPI/Network_Stats"><span class="short_text" id="result_box" lang="de"><span class="hps">Netzwerkstatistik </span></span>API</a> {{NonStandardBadge}}</dt>
+ <dd><span id="result_box" lang="de"><span class="hps">Zeichnet </span><span class="hps">die Datennutzung</span> auf <span class="hps">und stellt</span> <span class="hps">diese Daten</span> <span class="hps">privilegierten</span> <span class="hps">Anwendungen zurverfügung.</span></span></dd>
+ <dt><a href="/en-US/docs/WebAPI/TCP_Socket" title="WebAPI/TCP_Socket">TCP Socket API</a> {{NonStandardBadge}}</dt>
+ <dd><span class="short_text" id="result_box" lang="de"><span class="hps">Bietet</span> <span class="atn hps">Low-Level-</span><span>Sockets und</span> <span class="hps">SSL-Unterstützung.</span></span></dd>
+ <dt><a href="/en-US/docs/WebAPI/WebTelephony" title="WebAPI/WebTelephony"><span class="short_text" id="result_box" lang="de"><span class="hps">Telefonie</span></span></a> {{NonStandardBadge}}</dt>
+ <dd><span id="result_box" lang="de"><span class="hps">Ermöglicht</span> <span class="hps">Apps</span> <span>Anrufe zu tätigen, entgegen zu nehmen und</span> <span class="hps">die integrierte</span> <span class="atn hps">Telefonie-</span><span>Benutzeroberfläche zu nutzen.</span></span></dd>
+ <dt><a href="/en-US/docs/WebAPI/WebSMS" title="WebAPI/WebSMS">WebSMS </a>{{NonStandardBadge}}</dt>
+ <dd><span id="result_box" lang="de"><span class="hps">Ermöglicht</span> <span class="hps">Apps</span> <span class="hps"><span id="result_box" lang="de"><span class="hps">SMS-Nachrichten</span></span> zu senden und zu empfangen</span><span class="hps">,</span> sowie<span class="hps"> </span><span class="hps">den Zugriff und die Verwaltung der</span> <span class="hps">auf dem Gerät gespeicherten</span> <span class="hps">Nachrichten.</span></span></dd>
+ <dt><a href="/en-US/docs/WebAPI/WiFi_Information" title="WebAPI/WiFi_Information"><span class="short_text" id="result_box" lang="de"><span class="atn hps">WiFi-</span><span>Informations </span></span>API</a> {{NonStandardBadge}}</dt>
+ <dd><span id="result_box" lang="de"><span class="hps">Eine privilegierte</span> <span class="hps">API</span><span>, die Informationen über</span> <span class="hps">Signalstärke</span><span>,</span> <span class="hps">den Namen</span> <span class="hps">des aktuellen Netzwerks</span><span> und Verfügbare </span><span class="hps">WiFi-Netzwerke</span><span class="hps"> bereit stellt.</span></span></dd>
+</dl>
+
+<h2 class="Documentation" id="Hardware_access_APIs" name="Hardware_access_APIs"><span class="short_text" id="result_box" lang="de"><span class="hps">Hardware</span> <span class="hps">Zugriff APIs</span></span></h2>
+
+<dl>
+ <dt><a href="/en-US/docs/WebAPI/Using_Light_Events"><span class="short_text" id="result_box" lang="de"><span class="alt-edited hps">Umgebungslichtsensor</span> <span class="hps">API</span></span></a></dt>
+ <dd><span id="result_box" lang="de"><span class="alt-edited hps">Bietet Zugriff auf den</span> <span class="hps">Umgebungslichtsensor</span><span class="hps"> der</span> es einer<span class="hps"> App möglich macht</span><span class="hps"> die</span> <span class="hps">Umgebungslichtstärke</span> <span class="hps">in</span> <span class="hps">der Umgebung des</span> <span class="hps">Geräts erfassen können</span><span>.</span></span></dd>
+ <dt><a href="/en-US/docs/WebAPI/Battery_Status" title="WebAPI/Battery_Status"><span class="short_text" id="result_box" lang="de"><span class="alt-edited hps">Batteriestatus</span> <span class="hps">API</span></span></a></dt>
+ <dd><span id="result_box" lang="de"><span class="hps">Enthält Informationen über</span> <span class="hps">den Ladezustand der</span> <span class="hps">Batterie</span> <span class="hps">und ob</span> <span class="hps">das Gerät gerade</span> <span class="hps">and den Strom angeschlossen ist</span><span class="hps">.</span></span></dd>
+ <dt><a href="/en-US/docs/Using_geolocation" title="Using_geolocation">Geolocation API</a></dt>
+ <dd><span id="result_box" lang="de"><span class="hps">Stellt Informationen zu</span> <span class="hps">physischen Standort</span> <span class="hps">des Gerätes bereit.</span></span></dd>
+ <dt><a href="/en-US/docs/WebAPI/Pointer_Lock" title="API/Pointer_Lock_API"><span class="short_text" id="result_box" lang="de"><span class="alt-edited hps">Zeiger</span> Sperr<span class="hps"> API</span></span></a></dt>
+ <dd><span id="result_box" lang="de"><span class="hps">Ermöglicht</span> <span class="hps">Apps</span> den <span class="hps">Zugriff auf die Maus</span> zu <span id="result_box" lang="de"><span class="hps">sperren</span> </span><span class="hps">und gewährt den Zugang zu</span> <span class="hps">Bewegung</span> <span class="hps">Deltas</span> <span class="hps">anstatt</span> <span class="hps">absoluten Koordinaten</span><span>; das ist</span> <span class="hps">großartig</span> <span class="hps">für Spiele.</span></span></dd>
+ <dt><a href="/en-US/docs/WebAPI/Proximity" title="WebAPI/Proximity"><span class="short_text" id="result_box" lang="de"><span class="alt-edited hps">Annäherungs</span> </span>API</a></dt>
+ <dd><span id="result_box" lang="de"><span class="hps">Mit dieser API können Sie</span> eine <span class="hps">Annäherung an</span> <span class="hps">das Gerät</span><span class="hps"> erfassen, wie durch </span><span class="hps">ein</span> <span class="hps">Objekt</span> <span class="hps">oder </span><span class="hps">das Gesicht des Benutzers</span><span>.</span></span></dd>
+ <dt><a href="/en-US/docs/WebAPI/Detecting_device_orientation" title="WebAPI/Detecting_device_orientation"><span class="short_text" id="result_box" lang="de"><span class="hps">Geräte</span> <span class="hps">Ausrichtung</span>s </span>API</a></dt>
+ <dd><span id="result_box" lang="de"><span class="hps">Bietet</span> <span class="hps">Benachrichtigung, wenn</span> sich <span class="hps">die Ausrichtung des</span> <span class="hps">Gerätes</span> <span class="hps">ändert</span><span>.</span></span></dd>
+ <dt><a href="/en-US/docs/WebAPI/Managing_screen_orientation" title="WebAPI/Detecting_device_orientation"><span class="short_text" id="result_box" lang="de"><span class="hps">Bildschirmausrichtung</span>s <span class="hps">API</span></span></a></dt>
+ <dd><span id="result_box" lang="de"><span class="hps">Bietet</span> <span class="hps">Benachrichtigung, wenn</span> sich <span class="hps">die Ausrichtung des</span> <span class="hps">Bildschirms</span> <span class="hps">ändert</span><span>.</span> <span class="hps">Diese</span> <span class="hps">API ermöglicht ihrer App fest zu legen</span><span class="hps"> welche</span> <span class="hps">Ausrichtung</span> sie <span class="hps">bevorzugt.</span></span></dd>
+ <dt><a href="/en-US/docs/WebAPI/Vibration" title="WebAPI/Vibration"><span class="short_text" id="result_box" lang="de"><span class="hps">Vibration</span>s <span class="hps">API</span></span></a></dt>
+ <dd><span id="result_box" lang="de"><span class="hps">Ermöglicht</span> <span class="hps">Apps</span> die <span class="hps">Vibrations</span> <span class="hps">Hardware</span> <span class="hps">des Geräts</span> zu steuern (<span class="hps">für Dinge wie</span> <span class="hps">haptisches Feedback</span> <span class="hps">in Spielen).</span> <span class="hps">Dies ist <strong>nicht</strong></span><strong> </strong><span class="hps">für Dinge wie</span> <span class="hps">Benachrichtigungs</span> <span class="hps">Vibrationen</span> <span class="hps">bestimmt</span><span>.</span> <span class="hps">Siehe</span> <a href="https://developer.mozilla.org/en-US/docs/WebAPI/Alarm"><span class="hps">Alarm</span> <span class="hps">API</span></a><span class="hps">.</span></span></dd>
+ <dt><a href="/en-US/docs/WebAPI/Camera" title="WebAPI/Camera">Kamera API</a> {{NonStandardBadge}}</dt>
+ <dd><span id="result_box" lang="de"><span class="hps">Ermöglicht es Apps,</span> <span class="hps">Fotos und / oder</span> <span class="hps">Videoaufnahmen</span> <span class="hps">mit</span> <span class="hps">der in das Gerät</span> <span class="hps">integrierten Kamera</span><span> zu machen.</span></span></dd>
+ <dt><a href="/en-US/docs/WebAPI/Power_Management" title="WebAPI/Power_Management"><span class="short_text" id="result_box" lang="de"><span class="alt-edited hps">Energieverwaltungs </span></span>API</a> {{NonStandardBadge}}</dt>
+ <dd><span id="result_box" lang="de"><span class="hps">Ermöglicht</span><span class="hps"> Apps <span id="result_box" lang="de"><span class="hps">das <span id="result_box" lang="de"><span class="hps"><span id="result_box" lang="de"><span class="hps">Ein-und</span> <span class="hps">Aus</span><span>schalten</span></span></span></span> von Bildschirm</span></span></span><span>, CPU,</span> <span class="hps">Netzgerät</span><span> </span><span class="hps">und so weiter.</span> <span class="hps">Auch</span> <span class="hps">bietet es Unterstützung</span> <span class="hps">für das Lauschen</span> auf <span class="hps">und das Untersuchen</span> von <span class="hps">Ressourcensperre</span> <span class="hps">Events.</span></span></dd>
+</dl>
+
+<p><span class="alllinks"><a href="/en-US/docs/tag/WebAPI" title="tag/CSS">Alles anzeigen...</a></span></p>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="Data_management_APIs" name="Data_management_APIs"><span class="short_text" id="result_box" lang="de"><span class="alt-edited hps">Datenverwaltungs </span><span>APIs</span></span></h2>
+
+<dl>
+ <dt><a href="/en-US/docs/WebAPI/FileHandle_API" title="WebAPI/FileHandle_API">FileHandle API</a> {{NonStandardBadge}}</dt>
+ <dd>Bietet Unterstützung für schreibbare Dateien mit Sperr Unterstützung.</dd>
+ <dt><a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt>
+ <dd>Client-seitige Speicherung von strukturierten Daten mit Unterstützung für High-Performance-Suchanfragen.</dd>
+ <dt><a href="/en-US/docs/WebAPI/Settings" title="WebAPI/Settings">Einstellungen API</a> {{NonStandardBadge}}</dt>
+ <dd><span id="result_box" lang="de"><span class="hps">Bietet </span><span class="hps">Apps</span> die Möglichkeit, <span class="hps">systemweite</span> <span class="hps">Konfigurationsoptionen, die</span> <span class="hps">dauerhaft auf dem</span> <span class="hps">Gerät gespeichert sind, zu <span id="result_box" lang="de"><span class="hps">prüfen und zu ändern</span></span>.</span></span></dd>
+</dl>
+
+<h2 class="Documentation" id="Other_APIs" name="Other_APIs"><span class="short_text" id="result_box" lang="de"><span class="hps">Weitere</span> <span class="hps">APIs</span></span></h2>
+
+<dl>
+ <dt><a href="/en-US/docs/WebAPI/Alarm" title="WebAPI/Alarm">Alarm API</a></dt>
+ <dd>Ermöglicht es Apps, Benachrichtigungen zeitlich festzulegen. Bietet auch Unterstützung dafür, eine App zu einem bestimmten Zeitpunkt automatisch zu starten.</dd>
+ <dt><a href="/en-US/docs/WebAPI/Simple_Push" title="WebAPI/Push_Notifications">Einfache Push API</a></dt>
+ <dd><span id="result_box" lang="de"><span class="hps">Lässt</span> <span class="hps">die Plattform</span> <span class="hps">Benachrichtigungsmeldungen</span> <span class="hps">an bestimmte Anwendungen</span> <span class="hps">senden.</span></span></dd>
+ <dt><a href="/en-US/docs/WebAPI/Using_Web_Notifications" title="/en-US/docs/WebAPI/Using_Web_Notifications">Web Meldungen</a></dt>
+ <dd><span id="result_box" lang="de"><span class="hps">Ermöglicht</span> <span class="hps">Anwendungen das Senden</span> von <span class="hps">Meldungen</span>, welche <span class="hps">auf Systemebene</span> <span class="hps">angezeigt werden.</span></span></dd>
+ <dt><a href="/en-US/docs/Apps" title="Apps">Apps API</a> {{NonStandardBadge}}</dt>
+ <dd><span id="result_box" lang="de"><span class="hps">Die Open</span> <span class="hps">WebApps</span> <span class="hps">API</span> <span class="hps">unterstützt </span><span class="hps">die Installation und</span> <span class="hps">Verwaltung von Web</span><span>-Apps.</span> <span class="hps">Darüber hinaus wird</span> <span class="hps">Unterstützung</span> für die Ermittlung von <span class="hps">Zahlungsinformationen</span> für<span id="result_box" lang="de"><span class="hps"> Apps </span></span><span id="result_box" lang="de"><span class="hps">bereitgestellt</span></span><span>.</span></span></dd>
+ <dt><a href="/en-US/docs/WebAPI/Web_Activities" title="WebAPI/Web_Activities">Web Activities</a> {{NonStandardBadge}}</dt>
+ <dd><span id="result_box" lang="de"><span class="hps">Ermöglicht</span> <span class="hps">einer App</span> <span class="hps">das Delegieren</span> <span class="hps">einer Aktivität</span> <span class="hps">an eine andere Anwendung</span><span>;</span> <span class="hps">beispielsweise könnte </span><span class="hps">eine App</span> <span class="hps">eine andere App</span> <span class="hps">bitten, ein Foto</span> <span class="atn hps">auszuwählen (</span><span>oder zu erstellen)</span> <span class="hps">und dieses zurückzuliefern</span><span>.</span> <span class="hps">Normalerweise</span> <span class="hps">kann der Anwender</span> <span class="hps">konfigurieren</span><span>, welche</span> <span class="hps">Apps</span> <span class="hps">für welche Tätigkeiten</span> <span class="hps">eingesetzt werden.</span></span></dd>
+ <dt><a href="/en-US/docs/Apps/Publishing/In-app_payments" title="Apps/Publishing/In-app_payments">Web-Bezahlung API</a> {{NonStandardBadge}}</dt>
+ <dd><span id="result_box" lang="de"><span class="hps">Ermöglicht es </span><span class="hps">Web-Inhalten,</span> <span class="hps">Zahlungen</span> <span class="hps">und Erstattungen</span> <span class="hps">für virtuelle Güter zu initiieren</span><span>.</span></span></dd>
+ <dt><a href="/en-US/docs/DOM/Using_the_Browser_API" title="DOM/Using_the_Browser_API"><strong>Browser API</strong></a> {{NonStandardBadge}}</dt>
+ <dd><span id="result_box" lang="de"><span class="hps">Bietet Unterstützung</span> <span class="hps">für den Aufbau eines</span> <span class="hps">Web-Browsers</span> <span class="hps">komplett</span> <span class="hps">mit Web</span><span>-Technologien</span> <span class="atn hps">(</span><span>im Wesentlichen,</span> <span class="hps">einen Browser</span> <span class="hps">in einem Browser</span><span>)</span><span>.</span></span></dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/WebAPI/Idle" title="WebAPI/Device_Storage_API">Idle API</a></dt>
+ <dd><span id="result_box" lang="de"><span class="hps">Ermöglicht</span> <span class="hps">Apps</span> <span class="hps">Benachrichtigungen zu erhalten</span><span>, wenn der Benutzer</span> <span id="result_box" lang="de"><span class="hps">das Gerät </span></span><span class="hps">nicht aktiv</span> <span class="hps">verwendet.</span></span></dd>
+ <dt><a href="/en-US/docs/WebAPI/Permissions" title="WebAPI/Permissions">Berechtigungen API</a> {{NonStandardBadge}}</dt>
+ <dd><span id="result_box" lang="de"><span class="hps">Verwaltet</span> <span class="hps">App</span><span>-Berechtigungen an</span> <span class="hps">einem zentralen Ort</span><span>.</span> <span class="hps">Wird von der</span> <span>Einstellungen-<span id="result_box" lang="de"><span class="hps">App verwendet</span></span></span><span>.</span></span></dd>
+ <dt><a href="/en-US/docs/WebAPI/Time_and_Clock" title="WebAPI/Time_and_Clock">Zeit/Uhr API</a> {{NonStandardBadge}}</dt>
+ <dd><span id="result_box" lang="de"><span class="hps">Bietet Unterstützung</span> <span class="hps">für die Einstellung der</span> <span class="hps">aktuellen Uhrzeit.</span> <span class="hps">Die Zeitzone wird</span> <span class="hps">eingestellt</span> <span class="hps">mit</span> <span class="hps">der</span></span> <a href="/en-US/docs/WebAPI/Settings" title="WebAPI/Settings">Einstellungen API</a>.</dd>
+</dl>
+
+<h2 class="Community" id="Community" name="Community"><span class="short_text" id="result_box" lang="de"><span class="hps">WebAPI</span> <span class="hps">Community</span></span></h2>
+
+<p><span id="result_box" lang="de"><span class="hps">Wenn Sie Hilfe</span> <span class="hps">mit diesen</span> <span class="hps">APIs</span> <span class="hps">benötigen, gibt es</span> <span class="hps">mehrere Möglichkeiten,</span> </span><span id="result_box" lang="de"><span class="hps">sprechen sie mit </span></span><span id="result_box" lang="de"><span class="hps">Entwicklern</span><span class="hps">.</span></span></p>
+
+<ul>
+ <li><span class="short_text" id="result_box" lang="de"><span class="hps">Wenden Sie sich</span> <span class="hps">an das WebAPI</span> <span class="hps">Forum: </span></span>{{DiscussionList("dev-webapi", "mozilla.dev.webapi")}}</li>
+ <li><span class="short_text" id="result_box" lang="de"><span class="hps">Besuchen Sie den </span><span class="hps">WebAPI</span> <span class="hps">IRC-Kanal</span></span>: <a href="irc://irc.mozilla.org/webapi" title="irc://irc.mozilla.org/webapi">#webapi</a></li>
+</ul>
+
+<p><span class="alllinks"><a href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">Don't forget about the <em>netiquette</em>...</a></span></p>
+
+<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics"><span class="short_text" id="result_box" lang="de"><span class="hps">Verwandte Themen</span></span></h2>
+
+<ul>
+ <li>Das <a href="/en-US/docs/DOM" title="Document Object Model (DOM)">Document Object Model (DOM)</a><span id="result_box" lang="de"> <span class="hps">ist die</span></span><span id="result_box" lang="de"><span class="hps"> Baum</span></span><span id="result_box" lang="de"><span class="hps"> Darstellung</span> <span class="hps">eines HTML-Dokuments</span><span>.</span></span></li>
+ <li><a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a> - <span class="short_text" id="result_box" lang="de"><span class="hps">Skriptsprache</span> <span class="hps">für das Web.</span></span></li>
+ <li><a href="/en-US/docs/WebAPI/Doc_status" title="WebAPI/Doc_status">Doc status</a>: <span id="result_box" lang="de"><span>Eine Liste von</span> <span class="hps">WebAPI</span> <span class="hps">Themen</span> <span class="hps">und deren Dokumentation</span> <span class="hps">Status.</span></span></li>
+</ul>
+</div>
+</div>
+
+<p> </p>
diff --git a/files/de/web/webapi/verwenden_von_geolocation/index.html b/files/de/web/webapi/verwenden_von_geolocation/index.html
new file mode 100644
index 0000000000..65be452a5a
--- /dev/null
+++ b/files/de/web/webapi/verwenden_von_geolocation/index.html
@@ -0,0 +1,291 @@
+---
+title: Verwenden von geolocation
+slug: Web/WebAPI/verwenden_von_geolocation
+translation_of: Web/API/Geolocation_API
+---
+<p>Die <strong>"geolocation"-API</strong> ermöglicht es Nutzern, einer Web-Applikation die eigene Position mitzuteilen. Um die Privatsphäre des Nutzers zu schützen, wird dieser vorher um Erlaubnis gebeten und muss der Übermittlung zustimmen.</p>
+
+<h2 id="Das_geolocation-Objekt">Das geolocation-Objekt</h2>
+
+<p>Die geolocation-API wird durch das {{domxref("window.navigator.geolocation","navigator.geolocation")}}-Objekt offengelegt.</p>
+
+<p>Wenn das Objekt existiert, sind die geolocation-Services vorhanden und nutzbar. Sie können die Funktionstüchtigkeit daher wie folgt testen:</p>
+
+<pre class="brush: js">if ("geolocation" in navigator) {
+  /* geolocation funktioniert */
+} else {
+  /* geolocation funktioniert NICHT */
+}
+</pre>
+
+<div class="note">
+<p><strong>Notiz:</strong> In Firefox 24 und älteren Versionen hat <code>"geolocation" in navigator</code> immer true zurückgegeben, auch wenn die API ausgeschaltet war. Dies wurde mit <a href="/en-US/docs/Mozilla/Firefox/Releases/25/Site_Compatibility">Firefox 25</a> gelöst um mit dem Standard kompatibel zu sein. ({{ bug(884921) }})</p>
+</div>
+
+<h3 id="Die_derzeitige_Position_abfragen">Die derzeitige Position abfragen</h3>
+
+<p>Um die derzeitige Position des Nutzers zu erhalten, können Sie die Methode {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}} aufrufen. Dies startet eine asynchrone Anfrage für den Abruf der Position zu initiieren. Wenn die Position erhalten wurde, wird die übergebene Callback-Funktion ausgeführt. Sie können optional auch eine zweite Callback-Funktion übergeben, welche im Falle eines Fehlers ausgeführt wird. Ein dritter, optionaler Parameter ist ein Konfigurationsobjekt, in dem Sie das maximale Alter der zurückgegeben Position, die maximale Wartezeit für die Anfrage und den Wunsch für eine hohe Genauigkeit festlegegen können.</p>
+
+<div class="note">
+<p><strong>Notiz:</strong> Standardmäßig versucht {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}} so schnell wie möglich mit einer geringen Genauigkeit zu antworten. Es ist nützlich wenn Sie eine schnelle Antwort benötigen, unabhängig von der Genauigkeit. Beispielsweise Geräte mit einem GPS können eine Minute oder länger benötigen um eine neue Position zu erhalten, also kann es möglich sein, dass weniger genaue Daten (Ort der IP oder von WLANs) zurückgegeben werden.</p>
+</div>
+
+<pre class="brush: js">navigator.geolocation.getCurrentPosition(function(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+});</pre>
+
+<p>Das obige Beispiel wird die Funktion <code>do_something()</code> ausführen, wenn eine Position erhalten wurde.</p>
+
+<h3 id="Die_derzeitige_Position_überwachen">Die derzeitige Position überwachen</h3>
+
+<p>Wenn sich die Positionsdaten ändern (entweder über die Bewegung des Gerätes oder den Erhalt genauere Geolokationsdaten), können Sie eine Callback-Funktion erstellen, die mit der erneuerten Positionsinformation arbeitet. Dies ist über die Funktion {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} möglich, welche die gleichen Eingabeparameter wie {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}}. besitzt. Die Callback-Funktion wird mehrere Male ausgeführt, dies erlaubt dem Browser die Position aufgrund von Bewegungen oder genaueren Positionsdaten, durch das Verwenden von anderen (langsameren) Methoden, zu erneuern. Die Fehler-Callback-Funktion, welche wie auch in {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}},  hier optional ist, kann auch mehrfach aufgerufen werden.</p>
+
+<div class="note">
+<p><strong>Notiz:</strong> Sie können  {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} auch ohne ein vorangestellten Aufruf von {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}} nutzen.</p>
+</div>
+
+<pre class="brush: js">var watchID = navigator.geolocation.watchPosition(function(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+});</pre>
+
+<p>Die Methode {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} gibt eine numerische ID zurück, die für die eindeutige Identifikation des Positionsüberwachers verwendet werden kann; diese können Sie in der Methode {{domxref("window.navigator.geolocation.clearWatch()","clearWatch()")}} nutzen, um die Positionsüberwachung zu beenden.</p>
+
+<pre class="brush: js">navigator.geolocation.clearWatch(watchID);
+</pre>
+
+<h3 id="Anpassen_der_Antwort">Anpassen der Antwort</h3>
+
+<p>Sowohl {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}} als auch {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} nehmen einen Erfolgs-Callback an, einen optionalen Fehler-Callback und ein optionales <code>PositionOptions</code>-Objekt.</p>
+
+<p>{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","PositionOptions")}}</p>
+
+<p>Ein Aufruf von {{domxref("window.navigator.geolocation.watchPosition()","watchPosition")}} könnte wie folgt aussehen:</p>
+
+<pre class="brush: js">function geo_success(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+}
+
+function geo_error() {
+  alert("Entschuldigung, keine Positionsinformationen sind verfügbar.");
+}
+
+var geo_options = {
+  enableHighAccuracy: true,
+  maximumAge        : 30000,
+  timeout           : 27000
+};
+
+var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);</pre>
+
+<p><a id="fck_paste_padding">Ein (englisches) Beispiel von watchPosition in Aktion: </a><a class="external" href="http://www.thedotproduct.org/experiments/geo/">http://www.thedotproduct.org/experiments/geo/</a><br>
+ <a id="fck_paste_padding"></a></p>
+
+<h2 id="Darstellung_einer_Position">Darstellung einer Position</h2>
+
+<p>Die Position des Nutzers wird durch ein <code>Position</code>-Objekt dargestellt, welches ein <code>Coordinates</code>-Objekt referenziert.</p>
+
+<p>{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","Position")}}</p>
+
+<p>{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","Coordinates")}}</p>
+
+<h2 id="Fehlerbehandlung">Fehlerbehandlung</h2>
+
+<p>Die Fehler-Callback-Funktion, wenn im Aufruf von <code>getCurrentPosition()</code> oder <code>watchPosition()</code> vorhanden, nimmt ein PositionError-Objekt als ersten Parameter an.</p>
+
+<pre class="brush: js">function errorCallback(error) {
+  alert('ERROR(' + error.code + '): ' + error.message);
+};
+</pre>
+
+<p>{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","PositionError")}}</p>
+
+<h2 id="Geolokations-Live-Beispiel">Geolokations-Live-Beispiel</h2>
+
+<div class="hidden">
+<pre class="brush: css">body {
+  padding: 20px;
+  background-color:#ffffc9
+}
+
+p { margin : 0; }
+</pre>
+</div>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html;">&lt;p&gt;&lt;button onclick="geoFindMe()"&gt;Zeige meine Position an&lt;/button&gt;&lt;/p&gt;
+&lt;div id="out"&gt;&lt;/div&gt;
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js;">function geoFindMe() {
+  var output = document.getElementById("out");
+
+  if (!navigator.geolocation){
+    output.innerHTML = "&lt;p&gt;Geolokation wird von ihrem Browser nicht unterstützt&lt;/p&gt;";
+    return;
+  }
+
+  function success(position) {
+    var latitude  = position.coords.latitude;
+    var longitude = position.coords.longitude;
+
+    output.innerHTML = '&lt;p&gt;Die Latitude ist ' + latitude + '° &lt;br&gt;Die Longitude ist ' + longitude + '°&lt;/p&gt;';
+
+    var img = new Image();
+    img.src = "http://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&amp;zoom=13&amp;size=300x300&amp;sensor=false";
+
+    output.appendChild(img);
+  };
+
+  function error() {
+    output.innerHTML = "Es war nicht möglich Sie zu lokalisieren";
+  };
+
+  output.innerHTML = "&lt;p&gt;Lokalisieren…&lt;/p&gt;";
+
+  navigator.geolocation.getCurrentPosition(success, error);
+}
+</pre>
+
+<h3 id="Demo">Demo:</h3>
+
+<p>{{ EmbedLiveSample('Geolokations-Live-Beispiel',350,410) }}</p>
+
+<h2 id="Für_die_Erlaubnis_fragen">Für die Erlaubnis fragen</h2>
+
+<p>Jedes Add-On von addons.mozilla.org, welches dieses Feature nutzt, muss explizit, ähnlich der automatischen Frage von Websites, nach Erlaubnis fragen. Die Antwort des Nutzers wird in einer Konfiguration gespeichert, welche von <code>pref</code>-Parameter bestimmt wird, wenn möglich. Die Funktion, die als <code>callback</code>-Parameter verwendet wird mit einem boolischen Wert aufgerufen, welcher die Antwort des Nutzers anzeigt. Wenn dieser <code>true</code> ist, kann das Add-On Geolokationsdaten nutzen.</p>
+
+<pre class="brush: js">function prompt(window, pref, message, callback) {
+    let branch = Components.classes["@mozilla.org/preferences-service;1"]
+                           .getService(Components.interfaces.nsIPrefBranch);
+
+    if (branch.getPrefType(pref) === branch.PREF_STRING) {
+        switch (branch.getCharPref(pref)) {
+        case "always":
+            return callback(true);
+        case "never":
+            return callback(false);
+        }
+    }
+
+    let done = false;
+
+    function remember(value, result) {
+        return function() {
+            done = true;
+            branch.setCharPref(pref, value);
+            callback(result);
+        }
+    }
+
+    let self = window.PopupNotifications.show(
+        window.gBrowser.selectedBrowser,
+        "geolocation",
+        message,
+        "geo-notification-icon",
+        {
+            label: "Ort teilen",
+            accessKey: "S",
+            callback: function(notification) {
+                done = true;
+                callback(true);
+            }
+        }, [
+            {
+                label: "Immer teilen",
+                accessKey: "A",
+                callback: remember("always", true)
+            },
+            {
+                label: "Niemals teilen",
+                accessKey: "N",
+                callback: remember("never", false)
+            }
+        ], {
+            eventCallback: function(event) {
+                if (event === "dismissed") {
+                    if (!done) callback(false);
+                    done = true;
+                    window.PopupNotifications.remove(self);
+                }
+            },
+            persistWhileVisible: true
+        });
+}
+
+prompt(window,
+       "extensions.foo-addon.allowGeolocation",
+       "Foo Add-on möchte deinen Ort abrufen.",
+       function callback(allowed) { alert(allowed); });
+</pre>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{ CompatibilityTable() }}</div>
+
+<div> </div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Grundsätzlicher Support</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    Removed in 15.0<br>
+    Reintroduced in 16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundsätzlicher Support</td>
+   <td>2.1</td>
+   <td>11</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>10</td>
+   <td>10.60</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Gecko-Notizen">Gecko-Notizen</h3>
+
+<p>Firefox besitzt Support für das Lokalisieren über WLAN-Informationen durch die "Google Location"-Services. In einer Transaktion zwischen Firefox und Google werden die Daten übetragen, inklusive Daten des WLAN-Zugriffspunktes, einem Zugriffstoken (ähnlich wie ein zweiwöchiger Cookie), und der IP-Adresse des Nutzers. Für mehr Informationen sollten Sie <a href="http://www.mozilla.com/de/privacy/">Mozillas</a> und <a href="www.google.com/privacy/lsf.html">Googles</a> Datenschutzbestimmungen lesen, welche den Rahmen der Datennutzung angeben.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{domxref("window.navigator.geolocation","navigator.geolocation")}}</li>
+ <li><a href="http://www.w3.org/TR/geolocation-API/" rel="external" title="http://www.w3.org/TR/geolocation-API/">Geolocation API auf w3.org</a></li>
+ <li><a href="/en-US/demos/tag/tech:geolocation" title="en-US/demos/tag/tech:geolocation/">Demos für die Geolokations-API</a></li>
+ <li><a href="https://hacks.mozilla.org/2013/10/who-moved-my-geolocation/">Who moved my geolocation?</a> (Hacks blog)</li>
+</ul>
diff --git a/files/de/web/xml/index.html b/files/de/web/xml/index.html
new file mode 100644
index 0000000000..5c54c27742
--- /dev/null
+++ b/files/de/web/xml/index.html
@@ -0,0 +1,17 @@
+---
+title: 'XML: Extensible Markup Language'
+slug: Web/XML
+tags:
+  - Draft
+  - Landing
+  - NeedsTranslation
+  - TopicStub
+  - Web
+  - XML
+translation_of: Web/XML
+---
+<p>{{QuickLinksWithSubpages("/en-US/docs/Web/XML")}}{{Draft}}</p>
+
+<p class="summary">The <strong>Extensible Markup Language</strong> is a strict serialisation of the <a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model</a>.</p>
+
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/de/web/xml/xml_einführung/index.html b/files/de/web/xml/xml_einführung/index.html
new file mode 100644
index 0000000000..43b0433193
--- /dev/null
+++ b/files/de/web/xml/xml_einführung/index.html
@@ -0,0 +1,63 @@
+---
+title: XML_Einführung
+slug: Web/XML/XML_Einführung
+tags:
+  - XML
+translation_of: Web/XML/XML_introduction
+---
+<h3 id="Was_ist_XML.3F">Was ist XML?</h3>
+<p>XML ist eine Auszeichnungssprache ähnlich wie HTML. XML steht für <strong>Extensible Markup Language</strong> (Erweiterbare Auszeichnungssprache) und ist eine <a class="external" href="http://www.w3.org/">Standardisierte</a> Spezifikation, die für allgemeingültige Zwecke genutzt werden kann. Das bedeutet, dass, im Gegensatz zu anderen Auszeichnungssprachen, XML nicht vordefiniert ist, sodass eigene Tags definiert werden müssen. Die hauptsächliche Aufgabe der Sprache besteht darin, Daten über unterschiedliche Systeme auszutauschen, so wie im Internet.</p>
+<p>Es gibt eine Vielzahl an Sprachen, die auf XML basieren: Einige Beispiele sind: <a href="/de/XHTML" title="de/XHTML">XHTML</a>, <a href="/de/MathML" title="de/MathML">MathML</a>, <a href="/de/SVG" title="de/SVG">SVG</a>, <a href="/de/XUL" title="de/XUL">XUL</a>, <a href="/de/XBL" title="de/XBL">XBL</a>, <a href="/de/RSS" title="de/RSS">RSS</a>, und <a href="/de/RDF" title="de/RDF">RDF</a>.</p>
+<h3 id=".22Korrektes.22_XML">"Korrektes" XML</h3>
+<p>Ein XML-Dokument kann erst dann als korrekt bezeichnet werden, wenn es wohlgeformt (well-formed) ist, was bedeutet, dass es allen Syntaxregeln für XML entspricht. Die meisten Browser (einschließlich Mozilla) bieten einen Debugger, der bei nicht wohlgeformten Dokumenten warnt.</p>
+<p>Ein Beispiel für ein Dokument, welches nicht korrekt formatiert ist, wäre ein Element mit einem öffnenden aber ohne einem schließenden Tag und welches nicht selbst-schließend ist. Das folgende Beispiel ist demnach fehlerhaft:</p>
+<p><strong>Beispiel</strong></p>
+<pre class="eval">&lt;nachricht&gt;
+ &lt;warnung&gt;
+   Hallo Welt
+&lt;/nachricht&gt;
+</pre>
+<p>Das korrekte Beispiel würde so aussehen:</p>
+<p><code> </code></p>
+<pre class="eval">&lt;nachricht&gt;
+ &lt;warnung&gt;
+   Hallo Welt
+ &lt;/warnung&gt;
+&lt;/nachricht&gt;
+</pre>
+<p>Damit ein XML Dokument valide ist, müssen einige semantische Regeln erfüllt sein, welche normalerweise in einem XML Schema oder einer <a href="/de/DTD" title="de/DTD">Dokumenttyp-Definition</a> festgelegt werden. Ein Beispiel für nicht valides XML wäre ein Dokument, das ein nicht definiertes Tag enthält. Zum Beispiel, wenn ein <em>warnung</em> Tag niemals zuvor definiert wurde.</p>
+<h3 id="Entities">Entities</h3>
+<p>Wie in HTML, gibt es in XML sogenannte <em>Entities</em>, um spezielle, reservierte Zeichen (wie das Größer-als-Zeichen, welches für Tags benutzt wird) zu verwenden. Es gibt fünf nennenswerte, die man wissen sollte:</p>
+<pre>&amp;lt; 	&lt; 	      Kleiner-als-Zeichen
+&amp;gt; 	&gt; 	      Größer-als-Zeichen
+&amp;amp; 	&amp; 	      Ampersand (Und Zeichen).
+&amp;quot; 	" 	      Anführungszeichen.
+&amp;apos; 	' 	      Apostroph.
+</pre>
+<p>Da nur fünf <em>Entities</em> deklariert sind, können weitere mittels der <a href="/de/DTD" title="de/DTD">Dokumenttyp-Definition</a> hinzugefügt werden.</p>
+<pre> &lt;?xml version="1.0" encoding="UTF-8"?&gt;
+ &lt;!DOCTYPE body [
+     &lt;!ENTITY warnung "Warnung: Irgendetwas ist schief gelaufen... Bitte lade neu und versuch es nochmal."&gt;
+ ]&gt;
+ &lt;body&gt;
+   &lt;nachricht&gt; &amp;warnung; &lt;/nachricht&gt;
+ &lt;/body&gt;
+</pre>
+<h3 id="XML_Darstellung">XML Darstellung</h3>
+<p>Normalerweise wird XML zur Beschreibung von Daten benutzt, es gibt allerdings Wege, um XML-Daten darzustellen. Ohne eine Darstellungsart festzulegen, wird  der rohe XML-Code im Browser angezeigt.</p>
+<p>Eine Art XML darzustellen ist, <a href="/de/CSS" title="de/CSS">CSS</a> in XML mittels der <code>xml-stylesheet</code> Anweisung zu integrieren:</p>
+<pre>&lt;?xml-stylesheet type="text/css" href="stylesheet.css"?&gt;</pre>
+<p>Oder aber man benutzt das mächtige <a href="/de/XSLT" title="de/XSLT">XSLT</a>, das XML-Daten in HTML umwandeln kann oder auch in viele andere Dinge; die Möglichkeiten sind fast grenzenlos.</p>
+<pre>&lt;?xml-stylesheet type="text/xsl" href="transform.xsl"?&gt;</pre>
+<h3 id="Empfehlungen">Empfehlungen</h3>
+<p>Dieser Artikel bietet nur eine schnelle Einführung in XML mit ein paar kleinen Beispielen, die einen Einblick liefern und Lust auf mehr machen sollen. Für weitere Details über XML, gibt es einige tiefer gehende Artikel im Web.</p>
+<p>Um ein besseres Verständnis für XML zu bekommen bietet sich auch an, mehr über die HyperText Markup Language (<a href="/de/HTML" title="de/HTML">HTML</a>) zu lernen.</p>
+<p>Einige nützliche Links (Englisch):</p>
+<ul> <li><a class="external" href="http://www.w3schools.com/xml/">W3Schools: XML Tutorial</a></li> <li><a class="external" href="http://www.w3schools.com/dtd/">W3Schools: DTD Tutorial</a></li> <li><a class="external" href="http://www.xml.com/">XML.com</a></li> <li><a class="external" href="http://www.w3.org/XML/">Extensible Markup Language (XML) auf W3.org</a></li> <li><a class="external" href="http://www.alistapart.com/d/usingxml/xml_uses_a.html"><em>XML Example</em> auf <em>A List Apart</em></a></li> <li><a class="external" href="http://www.alistapart.com/articles/usingxml/"><em>Using XML auf A List Apart</em></a></li>
+</ul>
+<div class="originaldocinfo">
+<h3 id="Document_Information">Informationen zu diesem Dokument</h3>
+<ul> <li>Autor(en): <a class="external" href="http://justinshreve.com">Justin G. Shreve</a></li> <li>Letzte Aktualisierung: 4. August 2007</li>
+</ul>
+</div>
+<p>{{ languages( { "en": "en/XML_Introduction", "es": "es/Introducci\u00f3n_a_XML", "fr": "fr/Introduction_\u00e0_XML", "ja": "ja/XML_Introduction", "pl": "pl/Wprowadzenie_do_XML-a", "zh-cn": "cn/XML_\u4ecb\u7ecd" } ) }}</p>
diff --git a/files/de/web/xslt/index.html b/files/de/web/xslt/index.html
new file mode 100644
index 0000000000..f1dd3c8731
--- /dev/null
+++ b/files/de/web/xslt/index.html
@@ -0,0 +1,51 @@
+---
+title: XSLT
+slug: Web/XSLT
+tags:
+  - XSLT
+translation_of: Web/XSLT
+---
+<p><strong>Extensible Stylesheet Language Transformation (XSLT)</strong> ist eine auf <a href="/de/XML" title="de/XML">XML</a> basierende Sprache, die in Zusammenhang mit spezialisierten Verarbeitungssoftware verwendet wird, um XML-Dokumente zu transformieren. Obwohl der Prozess "Transformation" genannt wird, wird das Originaldokument nicht geändert; stattdessen wird ein neues XML-Dokument basierend auf dem Inhalt eines existierenden Dokumentes erstellt. Danach kann das neue Dokument durch den Prozessor in normalen XML-Syntax oder in ein anderes Format, wie <a href="/de/HTML" title="de/HTML">HTML</a> oder Plaintext, serialisiert (ausgegeben) werden. XSLT wird meistens verwendet, um Daten zwischen verschiedenen XML-Formaten zu konvertieren oder XML-Daten in Webseiten oder PDF-Dokumente zu konvertieren.</p>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h4 id="Dokumentation" name="Dokumentation"><a href="/Special:Tags?tag=XSLT&amp;language=de" title="Special:Tags?tag=XSLT&amp;language=de">Dokumentation</a></h4>
+
+    <dl>
+     <dt><a href="/de/XSLT/Elemente" title="de/XSLT/Elemente">XSLT Elemente</a></dt>
+     <dd>Referenz zu XSLT Elementen</dd>
+     <dt><a href="/de/XML_mit_XSLT_transformieren" title="de/XML_mit_XSLT_transformieren">XML mit XSLT transformieren</a></dt>
+     <dd><small>XSLT bietet Stylesheet-Autoren zwei unterschiedliche Möglichkeiten, um ein XML Dokument zu transformieren: Veränderung und (Neu-)Sortierung des Inhalts oder die Umwandlung des Inhalts in ein anderes Format.</small></dd>
+     <dt><a href="/de/Die_Mozilla_JavaScript_Schnittstelle_für_XSL_Transformationen_verwenden" title="de/Die_Mozilla_JavaScript_Schnittstelle_für_XSL_Transformationen_verwenden">Die Mozilla JavaScript Schnittstelle für XSL Transformationen verwenden</a></dt>
+     <dd><small>Dieser Artikel beschreibt die Verwendung der JavaScript Schnittstelle für XSLT in Mozilla 1.2 und höher.</small></dd>
+     <dt><a href="/de/XSLT/PI_Parameter" title="de/XSLT/PI_Parameter">Festlegen von Parametern mittels <em>Processing Instructions</em></a></dt>
+     <dd><small>Firefox bietet Stylesheet-Parameter an, die bei <code>&lt;?xml-stylesheet?&gt;</code> Anweisungen verwendet werden. Ermöglicht wird das durch <code>&lt;?xslt-param?&gt;</code> <em>Processing Instructions</em>, die in diesem Artikel näher erläutert werden.</small></dd>
+     <dt><a class="external" href="http://www.w3schools.com/xsl/">XSLT Tutorial</a> (en)</dt>
+     <dd><small>Dieses <a class="external" href="http://www.w3schools.com">W3Schools</a> Tutorial erklärt wie man XSLT benutzt, um XML Dokumente in andere Formate, wie z.B. XHTML, konvertiert.</small></dd>
+     <dt><a class="external" href="http://www.xml.com/pub/a/2000/08/holman/">Was ist XSLT?</a> (en)</dt>
+     <dd><small>Eine intensive Einleitung zu XSLT und XPath, die keine vorherigen Kenntnisse dieser Technologien erwartet und den Leser durch Hintergründe, Kontext, Struktur, Konzepte und Terminologien führt.</small></dd>
+     <dt><a href="/de/XSLT_2.0" title="en/XSLT_2.0">XSLT 2.0</a> (neu)</dt>
+    </dl>
+
+    <p><span class="alllinks"><a href="/Special:Tags?tag=XSLT&amp;language=de" title="Special:Tags?tag=XSLT&amp;language=de">Alle anzeigen...</a></span></p>
+   </td>
+   <td>
+    <h4 id="Community">Community</h4>
+
+    <p>Mozillas XSLT Foren:</p>
+
+    <p>{{ DiscussionList("dev-tech-xslt", "mozilla.dev.tech.xslt") }}</p>
+
+    <h4 id="Verwandte_Themen">Verwandte Themen</h4>
+
+    <dl>
+     <dd><a href="/de/XML" title="de/XML">XML</a>, <a href="/de/XPath" title="de/XPath">XPath</a>, <a href="/de/XQuery" title="de/XQuery">XQuery</a></dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{ languages( { "en": "en/XSLT", "es": "es/XSLT", "fr": "fr/XSLT", "it": "it/XSLT", "ja": "ja/XSLT", "ko": "ko/XSLT", "pl": "pl/XSLT", "pt": "pt/XSLT" } ) }}</p>
diff --git a/files/de/web_development/mobile/index.html b/files/de/web_development/mobile/index.html
new file mode 100644
index 0000000000..112d15199d
--- /dev/null
+++ b/files/de/web_development/mobile/index.html
@@ -0,0 +1,17 @@
+---
+title: Mobile Web development
+slug: Web_Development/Mobile
+tags:
+  - Mobile
+  - NeedsTranslation
+  - TopicStub
+  - Web Development
+translation_of: Web/Guide/Mobile
+---
+<p>Developing web sites to be viewed on mobile devices requires approaches that ensure a web site works as well on mobile devices as it does on desktop browsers. The following articles describe some of these approaches.</p>
+<ul>
+  <li><a class="vt-p" href="/en/Web_Development/Mobile/Mobile-friendliness" title="/en/Web_development/Mobile/Mobile-friendliness">What is mobile-friendliness?</a></li>
+  <li><a class="vt-p" href="/en/Web_Development/Mobile/Separate_sites" title="en/Web_development/Mobile/Separate sites">Separate sites</a></li>
+  <li><a class="vt-p" href="/en/Web_Development/Mobile/Responsive_design" title="/en/Web_development/Mobile/Responsive design">Responsive design</a></li>
+  <li><a class="vt-p" href="/en/Web_development/Mobile/A_hybrid_approach" title="A New Approach to Web Applications (external)">A hybrid approach</a></li>
+</ul>
diff --git a/files/de/web_development/mobile/responsive_design/index.html b/files/de/web_development/mobile/responsive_design/index.html
new file mode 100644
index 0000000000..2eb5a641a3
--- /dev/null
+++ b/files/de/web_development/mobile/responsive_design/index.html
@@ -0,0 +1,47 @@
+---
+title: Responsive Design
+slug: Web_Development/Mobile/Responsive_design
+translation_of: Web/Progressive_web_apps
+---
+<p><span class="long_text" id="result_box" lang="de"><span class="hps">Als Reaktion auf</span> <span class="hps">die Probleme mit dem</span> <span class="hps">getrennten </span><span class="hps">Ansatz zur Entwicklung von</span> <span class="hps">Web-Sites für</span> <span class="hps">mobile und</span> <span class="hps">Desktop</span><span>,</span> wird <span class="hps">eine relativ neue Idee</span> <span class="hps">(was ist eigentlich</span> <span class="hps">ziemlich alt</span><span>)</span> <span class="hps">immer beliebter</span><span>:</span> <span class="hps">Graben</span> <span class="hps">User-Agent</span><span>-Erkennung,</span> <span class="hps">und stattdessen</span> </span><span class="long_text" id="result_box" lang="de"><span class="hps">reagieren </span></span><span class="long_text" id="result_box" lang="de"><span class="hps">die Seiten</span>  <span class="hps">auf</span> <span class="hps">der Client-Seite</span> <span class="hps">in den Browser</span><span>-Funktionen.</span> <span class="hps">Dieser Ansatz, der</span> <span class="hps">von Ethan</span> <span class="hps">Marcotte</span> <span class="hps">in</span> <span class="hps">seinem Artikel</span> <span class="hps">für A</span> <span class="hps">List Apart</span> <span class="hps">kam, wird als</span> <span class="hps">Responsive</span> <span class="hps">Web Design</span> <span class="hps">bekannt sein.</span> <span class="hps">Wie der</span> <span class="hps">getrennten Plattform</span> <span class="hps">Ansatz</span> <span class="hps">hat</span> <span class="hps">ansprechende</span> <span class="hps">Webdesign</span> <span class="hps">positive und negative Aspekte</span><span>.</span></span></p>
+<h2 id="The_Advantages">The Advantages</h2>
+<p>Though it wasn’t initially proposed as method for creating mobile sites, responsive design has recently gained a lot of attention as a way of taking some first steps towards mobile-friendliness in lieu of a separate mobile site.</p>
+<ol style="font-size: medium;">
+  <li>It save time and money as there isn't a need to maintain separate websites for different devices.</li>
+  <li>Responsive Design provides every page with a single and unique URL.</li>
+  <li>Social sharing stats (Facebook Likes, Tweets, +1 on Google plus) are not split, since the mobile and desktop versions of your web pages use a single and unique URL.</li>
+  <li>Responsive Design doesn't care about user agents.</li>
+</ol>
+<p>There are some really nice aspects to this approach. Since it does not rely on user-agent detection, it is more resilient and future-proof than the separate sites approach. For simple sites, it can also be significantly easier to implement and maintain than other options.</p>
+<h2 id="The_Negatives">The Negatives</h2>
+<p>This approach isn’t without its limitations. Because content must be altered on the client-side with JavaScript, only minimal content changes are encouraged. In general, things can get very hairy very quickly if you are trying to code two separate sets of JavaScript to work with the same DOM. This is a big reason why web applications tend not to adopt this approach.</p>
+<p>Giving your existing site a responsive design also involves a rewrite of your styles if the you are not sporting a <a href="http://www.smashingmagazine.com/2008/06/26/flexible-layouts-challenge-for-the-future/">flexible layout</a> already. This could be a blessing in disguise, though; making your site’s layout responsive could be a good opportunity to modernize and clean up your site’s CSS.</p>
+<p>Finally, since you are adding code to your scripts and styles, performance may be worse than the Separate Sites approach. There is not really any way around this, though a thoughtful refactoring of your scripts and styles might actually save a few bytes in the long run.</p>
+<h2 id="When_it_is_right_to_choose_this_option">When it is right to choose this option</h2>
+<p><a href="/@api/deki/files/5894/=teixido_responsive-300x177.png" title="teixido_responsive-300x177.png"><img align="right" alt="teixido_responsive-300x177.png" class="internal rwrap" height="177" src="/@api/deki/files/5894/=teixido_responsive-300x177.png?size=webview" width="300"></a>As mentioned above, because content changes can be difficult, when you take this approach, you are not able to give users a strikingly different experience on mobile without a significant increase in code complexity. That said, if the desktop and mobile versions of your site are very similar, then this approach is a great option. It is well-suited to document-centric sites whose a primary use case is consistent across devices, like product pages. You may notice that the examples below are all blogs or portfolios!</p>
+<h2 id="Examples" name="Examples" style="overflow: hidden;">Examples</h2>
+<p>Though it is not as popular as the separate sites approach, there are more and more websites employing this technique every day. Luckily, since all the code is client-side, if you’d like to see how a site technically implements this approach, it is as simple as visiting the site and clicking “View Page Source.” Here are a few examples:</p>
+<ul>
+  <li><a href="http://teixido.co/">http://teixido.co/</a> – one of my favorite responsive designs, also pictured above!</li>
+  <li><a href="http://adactio.com/journal/1696">http://adactio.com/journal/1696</a> – also a good article to read, with its own links to examples</li>
+  <li><a href="http://thinkvitamin.com/">http://thinkvitamin.com/</a></li>
+  <li><a href="http://stephencaver.com/">http://stephencaver.com/</a></li>
+  <li><a href="http://hicksdesign.co.uk/">http://hicksdesign.co.uk/</a></li>
+</ul>
+<p>Despite being a relatively young approach, there are already some emerging best practices. For example, if you are designing a site from scratch with this option in mind, it is usually worthwhile to <a href="http://www.lukew.com/ff/entry.asp?1117">create a small-screen design first</a>, so that the constraints of mobile are with you from the beginning. It’s also great to use progressive enhancement for your styles instead of hiding elements of your existing site with media queries. This way, older browsers that might not support media queries still show the proper layout. An excellent presentation on the merits of this method is available <a href="http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu">here</a>.</p>
+<h2 id="Approaches_to_mobile_Web_development">Approaches to mobile Web development</h2>
+<p>See the following articles for background and other approaches to developing for mobile platforms.</p>
+<ul>
+  <li><a href="/en-US/docs/Web_Development/Mobile/Mobile-friendliness" title="XML Web Services">What is mobile-friendliness?</a></li>
+  <li><a href="/en-US/docs/Web_Development/Mobile/Separate_sites" title="Web development/Mobile/Separate sites">Separate sites</a></li>
+  <li><a href="/en-US/docs/Web_development/Mobile/A_hybrid_approach" title="Web development/Mobile/Hybrid approach">A hybrid approach</a></li>
+</ul>
+<h2 id="See_also">See also</h2>
+<ul>
+  <li><a href="/en-US/docs/Web_Development/Responsive_Web_design" title="Responsive Web design">Responsive Web design</a> for additional resources</li>
+</ul>
+<div class="originaldocinfo">
+  <h3 id="Original_document_information">Original document information</h3>
+  <p>Originally published on 27 May, 2011 on the Mozilla Webdev blog as "<a href="http://blog.mozilla.com/webdev/2011/05/27/approaches-to-mobile-web-development-part-3-responsive-design/" title="http://blog.mozilla.com/webdev/2011/05/27/approaches-to-mobile-web-development-part-3-responsive-design/">Approaches to Mobile Web Development Part 3 - Responsive Design</a>", by Jason Grlicky.</p>
+</div>
+<p> </p>
diff --git a/files/de/webentwicklung/index.html b/files/de/webentwicklung/index.html
new file mode 100644
index 0000000000..d94ce3c6a0
--- /dev/null
+++ b/files/de/webentwicklung/index.html
@@ -0,0 +1,14 @@
+---
+title: Webentwicklung
+slug: Webentwicklung
+tags:
+  - Webentwicklung
+translation_of: Web/Guide
+---
+<p><strong>Webentwicklung</strong> umfasst alle Aspekte der Entwicklung einer Webseite oder Webanwendung.</p>
+<p>Von einer einfachen Webseite bis zu komplexen, interaktiven Webanwendungen finden sich hier Artikel und Referenzen zu den unterschiedlichen Technologien der Webentwicklung.</p>
+<div>
+<table class="mainpage-table"> <tbody> <tr> <td colspan="2"> <h2 id="Themen">Themen</h2> </td> </tr> <tr> <td> <dl> <dt><a href="/de/Webentwicklung/Einführung_in_die_Webentwicklung" title="de/Webentwicklung/Einführung_in_die_Webentwicklung">Einführung in die Webentwicklung</a></dt> <dd>Wie man Anwendungen für das Web entwickelt.</dd> <dt><a href="/de/HTML" title="de/HTML">HTML</a></dt> <dd>Die HyperText Markup Language ist Kernsprache für die Erstellung von Webseiten und anderen Dokumenten, die im Browser dargestellt werden.</dd> <dt><a href="/de/JavaScript" title="de/JavaScript">JavaScript</a></dt> <dd>JavaScript ist die am meist gemeinsam genutzte Skriptsprache für die Entwicklung von Webapplikationen und wird auch für die Entwicklung von Mozilla-basierender Software benutzt.</dd> <dt><a href="/de/CSS" title="de/CSS">CSS</a></dt> <dd>Cascading Style Sheets ermöglichen es fortgeschrittene Layouts und Seitendesigns im Web zu realisieren.</dd> <dt><a href="/de/AJAX" title="de/AJAX">AJAX</a></dt> <dd>Asynchronous JavaScript and XML ist nicht wirklich eine Technologie für sich, sondern vielmehr eine Kombination von Technologien mit der JavaScript und andere moderne Webtechnologien zusammen verwendet werden, um dynamische Webapplikationen zu erstellen.</dd> </dl> </td> <td> <dl> <dt><a href="/de/Web-Standards" title="de/Web-Standards">Webstandards</a></dt> <dd>Um eine Vielzahl von Benutzern zu erreichen, können Webstandards, die mit dem offenem Web vereinbar sind, behilflich sein.</dd> <dt><a href="/de/DOM" title="de/DOM">DOM</a></dt> <dd>Das Document Object Model ist eine API für HTML und XML Dokumente, welche eine strukturelle Repräsentation des Dokuments darstellt und die für Veränderungen an der visuellen Präsentation genutzt werden kann.</dd> <dt><a href="/de/XHTML" title="de/XHTML">XHTML</a></dt> <dd>Extensible HyperText Markup Language ist eine XML-basiernde und HTML-ähnliche Sprache, die strengere Schreibweisen als HTML fordert.</dd> <dt><a href="/de/SVG" title="de/SVG">SVG</a></dt> <dd>Scalable Vector Graphics ist ein XML Auszeichnungssprache für 2D Vektorgrafiken.</dd> <dt><a href="/de/Mozilla_Webentwickler_FAQ" title="de/Mozilla_Webentwickler_FAQ">Mozilla Webentwickler FAQ</a></dt> <dd>Häufig gestellte Fragen von Webentwicklern. Mit Antworten!</dd> </dl> <p><span class="alllinks"><a href="/Special:Tags?tag=Webentwicklung&amp;language=de" title="Special:Tags?tag=Webentwicklung&amp;language=de">Alle anzeigen...</a></span></p> </td> </tr> <tr> <td> <h2 id="Community">Community</h2> <ul> <li>Mozillas Foren zur Webentwicklung:</li> </ul> <p>{{ DiscussionList("dev-tech-html", "mozilla.dev.web-development") }}</p> <ul> <li><a class="external" href="/web-tech" title="web-tech">Mozilla Web-tech blog</a></li> <li><a class="external" href="http://www.whatwg.org/" rel="external nofollow">WHAT Working Group</a></li> <li><a class="external" href="http://webdevfeedhouse.com/" rel="external nofollow">WebDev FeedHouse</a></li> </ul> </td> <td> <h2 id="Tools">Tools</h2> <ul> <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843" rel="external nofollow" title="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug Erweiterung</a></li> <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/60" rel="external nofollow" title="https://addons.mozilla.org/en-US/firefox/addon/60">Web Developer Erweiterung</a></li> <li><a href="/de/Venkman" title="de/Venkman">Venkman</a> (JavaScript Debugger)</li> <li><a href="/de/DOM_Inspector" title="de/DOM_Inspector">DOM Inspector</a></li> <li><a href="/Special:Tags?tag=Webentwicklung:Tools&amp;language=de" title="Special:Tags?tag=Webentwicklung:Tools&amp;language=de">...weitere Tools</a></li> </ul> </td> </tr> </tbody>
+</table>
+</div>
+<p>{{ languages( {"en": "en/Web_Development", "es": "es/Desarrollo_Web", "fr": "fr/D\u00e9veloppement_Web", "it": "it/Sviluppo_Web", "ja": "ja/Web_Development", "pl": "pl/Programowanie_WWW", "ru": "ru/Веб-разработка", "zh-cn": "cn/Web_Development", "zh-tw": "zh_tw/Web_開發" } ) }}</p>
diff --git a/files/de/websockets/index.html b/files/de/websockets/index.html
new file mode 100644
index 0000000000..1e3cefa7d9
--- /dev/null
+++ b/files/de/websockets/index.html
@@ -0,0 +1,193 @@
+---
+title: WebSockets
+slug: WebSockets
+tags:
+  - Referenz
+  - WebSockets
+translation_of: Web/API/WebSockets_API
+---
+<p>WebSockets ist eine fortschrittliche Technologie welche es möglich macht eine interaktive Kommunikations-Session zwischen dem Browser des Benutzers und dem Server herzustellen. Mit dieser API können Sie Nachrichten zum Server senden und ereignisorientierte Antworten erhalten ohne beim Server die Antwort abzufragen.</p>
+
+<div class="cleared row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Documentation" name="Documentation">Dokumentation</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/WebSockets/Writing_WebSocket_client_applications" title="WebSockets/Writing WebSocket client applications">Websocket Client-Anwendungen schreiben</a></dt>
+ <dd>Eine Anleitung um WebSocket-Clients im Browser laufen zu lassen.</dd>
+ <dt><a href="/en-US/docs/WebSockets/WebSockets_reference" title="WebSockets/WebSockets reference">WebSockets Referenz</a></dt>
+ <dd>Eine Referenz für die Client-seitige WebSocket API.</dd>
+ <dt><a href="https://developer.mozilla.org/de/docs/WebSockets/Writing_WebSocket_servers">Websocket-Server schreiben (Benötigt Inhalt)</a></dt>
+ <dd>Eine Anleitung zum schreiben von Server-seitigem Code um das WebSocket-Protokoll zu handhaben.</dd>
+</dl>
+
+<p><span class="alllinks"><a href="/en-US/docs/tag/WebSockets" title="tag/WebSockets">Alle zeigen...</a></span></p>
+</div>
+
+<div class="section">
+<h2 class="Tools" id="Tools" name="Tools">Tools</h2>
+
+<ul>
+ <li><a class="external" href="http://socket.io" title="http://socket.io/">Socket.IO</a>: Eine mächtige, plattform-übergreifende WebSocket API für <a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>.</li>
+ <li><a class="link-https" href="https://github.com/Worlize/WebSocket-Node" title="https://github.com/Worlize/WebSocket-Node">WebSocket-Node</a>: Eine WebSocket-Server API Implementation für <a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>.</li>
+ <li><a href="http://www.totaljs.com">Total.js</a>: Ein Web-Applikation Framework für <a href="http://www.nodejs.org">Node.js</a> (Beispiel: <a href="https://github.com/totaljs/examples/tree/master/websocket">WebSocket chat</a>)</li>
+ <li><a href="http://ajf.me/websocket/#libs">Eine erweiterte Liste von Frameworks und Bibliotheken</a></li>
+</ul>
+
+<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Verwandte Themen</h2>
+
+<ul>
+ <li><a href="/en-US/docs/AJAX" title="AJAX">AJAX</a>, <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a></li>
+</ul>
+</div>
+</div>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a class="external" href="http://tools.ietf.org/html/rfc6455">RFC 6455 - The WebSocket Protocol</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/websockets/">WebSocket API Specification</a></li>
+ <li><a href="/en-US/docs/Server-sent_events" title="Server-sent_events">Server-Sent Events</a></li>
+</ul>
+
+<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Version -76  {{obsolete_inline}}</td>
+   <td>6</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>11.00 (disabled)</td>
+   <td>5.0.1</td>
+  </tr>
+  <tr>
+   <td>Protokol-Version 7 {{obsolete_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("6.0")}}<br>
+    {{property_prefix("Moz")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Protokol-Version 10 {{obsolete_inline}}</td>
+   <td>14</td>
+   <td>{{CompatGeckoDesktop("7.0")}}<br>
+    {{property_prefix("Moz")}}</td>
+   <td>HTML5 Labs</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Standard - RFC 6455 Support</td>
+   <td>16</td>
+   <td>{{CompatGeckoDesktop("11.0")}}</td>
+   <td>10</td>
+   <td>12.10</td>
+   <td>6.0</td>
+  </tr>
+  <tr>
+   <td>Benutzbarkeit in Workern</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Version -76<br>
+    {{obsolete_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Protokol-Version 7<br>
+    {{obsolete_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Protokol-Version 8 (IETF-Entwurf 10) {{obsolete_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("7.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Standard - RFC 6455 Support</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoDesktop("11.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>12.10</td>
+   <td>6.0</td>
+  </tr>
+  <tr>
+   <td>Benutzbarkeit in Workern</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Hinweise_zu_Gecko">Hinweise zu Gecko</h3>
+
+<p>Die WebSocket-Unterstützung in Firefox wird weiterhin die Entwicklungen in der entstehenden WebSocket-Spezifikation verfolgen. Firefox 6 implementiert Version 7 des darunterliegenden Protokolls, währen Firefox 7 Version 8 implementiert (lt. IETF-Vorlage 10). Firefox mobile erhielt in Version 7.0 unterstützung für WebSockets.</p>
+
+<h4 id="Gecko_6.0">Gecko 6.0</h4>
+
+<p>Vor Gecko 6.0 {{geckoRelease("6.0")}} gab es, fälschlicherweise, ein <code>WebSocket</code>-Objekt. Mane Seiten schlossen daraus, dass <code>WebSocket</code>-Dienste keine Präfixe haben; dieses Objekt wurde mittlerweile zu <code>MozWebSocket</code> umbenannt.</p>
+
+<h4 id="Gecko_7.0">Gecko 7.0</h4>
+
+<p>Beginnend mit Gecko 7.0 {{geckoRelease("7.0")}} wird die Einstellung <code>network.websocket.max-connections</code> genutzt, um die maximale Anzahl von WebSockets festzustellen, die gleichzeitig genutzt werden können. Der Standardwert ist 200.</p>
+
+<h4 id="Gecko_8.0">Gecko 8.0</h4>
+
+<p>Beginnend mit Gecko 8.0 {{geckoRelease("8.0")}} wird die Deflate-Stream-Erweiterung des WebSocket-Protokolls abgeschaltet, da es von den Spezifikations-Vorlagen überholt wurde. Dies löst Inkompatibilitäten mit manchen Seiten.</p>
+
+<h4 id="Gecko_11.0">Gecko 11.0</h4>
+
+<p>Vor Gecko 11.0 waren sowohl eingehende als auch ausgehende Nachrichten auf 16 MB begrenzt. Sie können jetzt bis zu 2 GB groß sein. Beachten Sie, dass Speicherbegrenzungen (insbesondere auf mobilen Geräten) ein theoretisches Maximum darstellen, jedoch kein praktisches. In Wirklichkeit werden Übertragungen dieser Größe auf Geräten, die nicht über genügend Speicher verfügen, fehlschlagen.</p>
+
+<p>Zusätzlich wurde eine ArrayBuffer Sende- und Empfangsunterstützung für Binärdaten implementiert.</p>
+
+<p>Ab Gecko 11.0 steht die WebSocket-API ohne Präfixe zur Verfügung.</p>
diff --git a/files/de/websockets/writing_websocket_servers/index.html b/files/de/websockets/writing_websocket_servers/index.html
new file mode 100644
index 0000000000..031a2b832a
--- /dev/null
+++ b/files/de/websockets/writing_websocket_servers/index.html
@@ -0,0 +1,250 @@
+---
+title: Writing WebSocket servers
+slug: WebSockets/Writing_WebSocket_servers
+translation_of: Web/API/WebSockets_API/Writing_WebSocket_servers
+---
+<div>{{APIRef("Websockets API")}}</div>
+
+<p>E<span class="tlid-translation translation" lang="de"><span title="">in WebSocket-Server ist nichts anderes als eine Anwendung, die einen Port eines TCP-Servers überwacht, der einem bestimmten Protokoll folgt.</span> <span title="">Die Aufgabe, einen benutzerdefinierten Server zu erstellen, macht den Leuten Angst.</span> <span title="">Es kann jedoch unkompliziert sein, einen einfachen WebSocket-Server auf einer Plattform Ihrer Wahl zu implementieren.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="de"><span title="">Ein WebSocket-Server kann in jeder serverseitigen Programmiersprache geschrieben werden, die dazu in der Lage ist</span></span>: <a href="https://en.wikipedia.org/wiki/Berkeley_sockets">Berkeley sockets</a>, siehe auch C(++), Python, <a href="/en-US/docs/PHP">PHP</a>, oder Serverseitiges<a href="/en-US/docs/Web/JavaScript/Server-Side_JavaScript"> JavaScript</a>.</p>
+
+<p><span class="tlid-translation translation" lang="de"><span title="">Dies ist kein Tutorial in einer bestimmten Sprache, sondern dient als Leitfaden, um das Schreiben Ihres eigenen Servers zu erleichtern.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="de"><span title="">In diesem Artikel wird davon ausgegangen, dass Sie bereits mit der Funktionsweise von {{Glossary ("HTTP")}} vertraut sind und über ein moderates Programmiererlebnis verfügen.</span> <span title="">Abhängig von der Sprachunterstützung sind möglicherweise Kenntnisse über TCP-Sockets erforderlich.</span> <span title="">In diesem Handbuch wird das Mindestwissen dargestellt, das Sie zum Schreiben eines WebSocket-Servers benötigen.</span></span></p>
+
+<div class="note">
+<p><strong><u>Notiz</u>:</strong> <span class="tlid-translation translation" lang="de"><span title="">Lesen Sie die neueste offizielle WebSockets-Spezifikation, RFC 6455. Die Abschnitte 1 und 4-7 sind für Server-Implementierer besonders interessant.</span> <span title="">In Abschnitt 10 wird die Sicherheit erläutert, und Sie sollten sie unbedingt lesen, bevor Sie Ihren Server verfügbar machen.</span></span></p>
+</div>
+
+<p><span class="tlid-translation translation" lang="de"><span title="">Ein WebSocket-Server wird hier auf sehr niedriger Ebene erklärt.</span> <span title="">WebSocket-Server sind häufig separate und spezialisierte Server (aus Gründen des Lastenausgleichs oder aus anderen praktischen Gründen). Daher verwenden Sie häufig einen Reverse-Proxy (z. B. einen normalen HTTP-Server), um WebSocket-Handshakes zu erkennen, vorzuverarbeiten und an diese Clients zu senden</span> <span title="">ein echter WebSocket-Server.</span> <span title="">Dies bedeutet, dass Sie Ihren Servercode nicht mit Cookie- und Authentifizierungshandlern (zum Beispiel) aufblähen müssen.</span></span></p>
+
+<h2 id="Der_WebSocket-Handshake"><strong><u><span class="tlid-translation translation" lang="de"><span title="">Der WebSocket-Handshake</span></span> </u></strong></h2>
+
+<p><span class="tlid-translation translation" lang="de"><span title="">Zunächst muss der Server mithilfe eines Standard-TCP-Sockets auf eingehende Socket-Verbindungen warten.</span> <span title="">Abhängig von Ihrer Plattform kann dies automatisch für Sie erledigt werden.</span> <span title="">Angenommen, Ihr Server überwacht example.com, Port 8000, und Ihr Socket-Server antwortet auf {{HTTPMethod ("GET")}} -Anfragen unter example.com/chat.</span></span></p>
+
+<div class="warning">
+<p><span class="tlid-translation translation" lang="de"><span title=""><u>Warnung</u>: Der Server überwacht möglicherweise jeden von ihm ausgewählten Port. Wenn er jedoch einen anderen Port als 80 oder 443 auswählt, kann es zu Problemen mit Firewalls und / oder Proxys kommen.</span> <span title="">Browser benötigen im Allgemeinen eine sichere Verbindung für WebSockets, obwohl sie möglicherweise eine Ausnahme für lokale Geräte bieten.</span></span></p>
+</div>
+
+<p><span class="tlid-translation translation" lang="de"><span title="">Der Handshake ist das "Web" in WebSockets.</span> <span title="">Es ist die Brücke von HTTP zu WebSockets.</span> <span title="">Beim Handshake werden Details der Verbindung ausgehandelt, und jede Partei kann vor Abschluss zurücktreten, wenn die Bedingungen ungünstig sind.</span> <span title="">Der Server muss darauf achten, alles zu verstehen, was der Client verlangt, da sonst Sicherheitsprobleme auftreten können.</span></span></p>
+
+<div class="blockIndicator note">
+<p><span class="tlid-translation translation" lang="de"><span title=""><u>Tipp</u>: Die Anfrage-URL (/ Chat hier) hat in der Spezifikation keine definierte Bedeutung.</span> <span title="">Viele Benutzer verwenden es daher, damit ein Server mehrere WebSocket-Anwendungen verarbeiten kann.</span> <span title="">Zum Beispiel könnte example.com/chat eine Mehrbenutzer-Chat-App aufrufen, während /game auf demselben Server möglicherweise ein Multiplayer-Spiel aufruft.</span></span></p>
+</div>
+
+<h3 id="Client_handshake_Anfrage">Client handshake Anfrage</h3>
+
+<p><span class="tlid-translation translation" lang="de"><span title="">Auch wenn Sie einen Server erstellen, muss ein Client den WebSocket-Handshake-Prozess starten, indem er den Server kontaktiert und eine WebSocket-Verbindung anfordert.</span> <span title="">Sie müssen also wissen, wie Sie die Anfrage des Kunden interpretieren.</span> <span title="">Der Client sendet eine ziemlich normale HTTP-Anfrage mit Headern, die so aussehen (die HTTP-Version muss 1.1 oder höher sein und die Methode muss GET sein):</span></span></p>
+
+<pre class="notranslate">GET /chat HTTP/1.1
+Host: example.com:8000
+<strong>Upgrade: websocket</strong>
+<strong>Connection: Upgrade</strong>
+Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
+Sec-WebSocket-Version: 13
+
+</pre>
+
+<p><span class="tlid-translation translation" lang="de"><span title="">Der Client kann hier Erweiterungen und / oder Unterprotokolle anfordern.</span> <span title="">Einzelheiten finden Sie unter Sonstiges.</span> <span title="">Es können auch allgemeine Header wie {{HTTPHeader ("User-Agent")}}, {{HTTPHeader ("Referer")}}, {{HTTPHeader ("Cookie")}} oder Authentifizierungsheader vorhanden sein.</span> <span title="">Mach mit denen, was du willst;</span> <span title="">Sie beziehen sich nicht direkt auf das WebSocket.</span> <span title="">Es ist auch sicher, sie zu ignorieren.</span> <span title="">In vielen gängigen Setups hat sich bereits ein Reverse-Proxy mit ihnen befasst.</span></span></p>
+
+<div class="blockIndicator note">
+<p><span class="tlid-translation translation" lang="de"><span title=""><u>Tipp</u>: Alle Browser senden einen Origin-Header.</span> <span title="">Sie können diesen Header aus Sicherheitsgründen verwenden (nach demselben Ursprung suchen, automatisch zulassen oder ablehnen usw.) und eine 403 Forbidden senden, wenn Ihnen das, was Sie sehen, nicht gefällt.</span> <span title="">Seien Sie jedoch gewarnt, dass Nicht-Browser-Agenten einen gefälschten Ursprung senden können.</span> <span title="">Die meisten Anwendungen lehnen Anforderungen ohne diesen Header ab.</span></span></p>
+</div>
+
+<p><span class="tlid-translation translation" lang="de"><span title="">Wenn ein Header nicht verstanden wird oder einen falschen Wert hat, sollte der Server eine {{HTTPStatus ("400")}} ("Bad Request")} Antwort senden und den Socket sofort schließen.</span> <span title="">Wie üblich wird möglicherweise auch der Grund angegeben, warum der Handshake im HTTP-Antworttext fehlgeschlagen ist, die Nachricht wird jedoch möglicherweise nie angezeigt (Browser zeigen sie nicht an).</span> <span title="">Wenn der Server diese Version von WebSockets nicht versteht, sollte er einen {{HTTPHeader ("Sec-WebSocket-Version")}} Header zurücksenden, der die Version (en) enthält, die er versteht.</span> <span title="">Im obigen Beispiel wird Version 13 des WebSocket-Protokolls angegeben.</span><br>
+ <br>
+ <span title="">Der interessanteste Header hier ist {{HTTPHeader ("Sec-WebSocket-Key")}}.</span> <span title="">Schauen wir uns das also als nächstes an.</span></span></p>
+
+<div class="note">
+<p><span class="tlid-translation translation" lang="de"><span title=""><u>Hinweis</u>: Normale HTTP-Statuscodes können nur vor dem Handshake verwendet werden.</span> <span title="">Nach erfolgreichem Handshake müssen Sie einen anderen Satz von Codes verwenden (definiert in Abschnitt 7.4 der Spezifikation).</span></span></p>
+</div>
+
+<h3 id="Server_handshake_Antwort">Server handshake Antwort</h3>
+
+<p><span class="tlid-translation translation" lang="de"><span title="">Wenn der Server die Handshake-Anforderung empfängt, sollte er eine spezielle Antwort zurücksenden, die angibt, dass das Protokoll von HTTP zu WebSocket geändert wird.</span> <span title="">Dieser Header sieht ungefähr so aus (denken Sie daran, dass jede Headerzeile mit \ r \ n endet, und setzen Sie nach dem letzten ein zusätzliches \ r \ n, um das Ende des Headers anzuzeigen):</span></span></p>
+
+<pre class="notranslate"><strong>HTTP/1.1 101 Switching Protocols</strong>
+Upgrade: websocket
+Connection: Upgrade
+<strong>Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
+
+</strong></pre>
+
+<p><span class="tlid-translation translation" lang="de"><span title="">Darüber hinaus kann der Server hier über Erweiterungs- / Unterprotokollanforderungen entscheiden.</span> <span title="">Einzelheiten finden Sie unter Sonstiges.</span> <span title="">Der Sec-WebSocket-Accept-Header ist wichtig, da der Server ihn von dem {{HTTPHeader ("Sec-WebSocket-Key")}} ableiten muss, den der Client an ihn gesendet hat.</span> <span title="">Verketten Sie dazu den Sec-WebSocket-Key des Clients und die Zeichenfolge "258EAFA5-E914-47DA-95CA-C5AB0DC85B11" (es handelt sich um eine "magische Zeichenfolge"), nehmen Sie den SHA-1-Hash des Ergebnisses und geben Sie den base64 zurück</span> <span title="">Codierung dieses Hashs.</span></span></p>
+
+<div class="note">
+<p><span class="tlid-translation translation" lang="de"><span title=""><strong><u>Hinweis</u></strong>: Dieser scheinbar überkomplizierte Prozess ist vorhanden, sodass für den Client offensichtlich ist, ob der Server WebSockets unterstützt.</span> <span title="">Dies ist wichtig, da Sicherheitsprobleme auftreten können, wenn der Server eine WebSockets-Verbindung akzeptiert, die Daten jedoch als HTTP-Anforderung interpretiert.</span></span></p>
+</div>
+
+<p><span class="tlid-translation translation" lang="de"><span title="">Wenn der Schlüssel also "dGhlIHNhbXBsZSBub25jZQ ==" war, lautet der Wert des Sec-WebSocket-Accept-Headers "s3pPLMBiTxaQ9kYGzzhZRbK + xOo =".</span> <span title="">Sobald der Server diese Header sendet, ist der Handshake abgeschlossen und Sie können mit dem Datenaustausch beginnen !</span></span></p>
+
+<div class="note">
+<p><span class="tlid-translation translation" lang="de"><span title=""><strong><u>Hinweis</u></strong>: Der Server kann andere Header wie {{HTTPHeader ("Set-Cookie")}} senden oder über andere Statuscodes nach Authentifizierung oder Weiterleitung fragen, bevor er den Antwort-Handshake sendet.</span></span></p>
+</div>
+
+<h3 id="Clients_im_Auge_behalten">  <span class="tlid-translation translation" lang="de"><span title="">Clients im Auge behalten</span></span></h3>
+
+<p><span class="tlid-translation translation" lang="de"><span title="">Dies bezieht sich nicht direkt auf das WebSocket-Protokoll, ist jedoch hier erwähnenswert: Ihr Server muss die Sockets der Clients verfolgen, damit Sie bei Clients, die den Handshake bereits abgeschlossen haben, nicht erneut Handshakes durchführen.</span> <span title="">Dieselbe Client-IP-Adresse kann mehrmals versuchen, eine Verbindung herzustellen.</span> <span title="">Der Server kann sie jedoch ablehnen, wenn sie zu viele Verbindungen versuchen, um sich vor Denial-of-Service-Angriffen zu schützen.</span><br>
+ <br>
+ <span title="">Beispielsweise können Sie eine Tabelle mit Benutzernamen oder ID-Nummern zusammen mit den entsprechenden {{domxref ("WebSocket")}} und anderen Daten führen, die Sie dieser Verbindung zuordnen müssen.</span></span></p>
+
+<h2 id="Exchanging_data_frames">Exchanging data frames</h2>
+
+<p>Either the client or the server can choose to send a message at any time — that's the magic of WebSockets. However, extracting information from these so-called "frames" of data is a not-so-magical experience. Although all frames follow the same specific format, data going from the client to the server is masked using <a href="https://en.wikipedia.org/wiki/XOR_cipher">XOR encryption</a> (with a 32-bit key). Section 5 of the specification describes this in detail.</p>
+
+<h3 id="Format">Format</h3>
+
+<p>Each data frame (from the client to the server or vice-versa) follows this same format:</p>
+
+<pre class="notranslate">Frame format:
+​​
+      0                   1                   2                   3
+      0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
+     +-+-+-+-+-------+-+-------------+-------------------------------+
+     |F|R|R|R| opcode|M| Payload len |    Extended payload length    |
+     |I|S|S|S|  (4)  |A|     (7)     |             (16/64)           |
+     |N|V|V|V|       |S|             |   (if payload len==126/127)   |
+     | |1|2|3|       |K|             |                               |
+     +-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
+     |     Extended payload length continued, if payload len == 127  |
+     + - - - - - - - - - - - - - - - +-------------------------------+
+     |                               |Masking-key, if MASK set to 1  |
+     +-------------------------------+-------------------------------+
+     | Masking-key (continued)       |          Payload Data         |
+     +-------------------------------- - - - - - - - - - - - - - - - +
+     :                     Payload Data continued ...                :
+     + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+     |                     Payload Data continued ...                |
+     +---------------------------------------------------------------+</pre>
+
+<p>The MASK bit tells whether the message is encoded. Messages from the client must be masked, so your server must expect this to be 1. (In fact, <a href="http://tools.ietf.org/html/rfc6455#section-5.1">section 5.1 of the spec</a> says that your server must disconnect from a client if that client sends an unmasked message.) When sending a frame back to the client, do not mask it and do not set the mask bit. We'll explain masking later. <em>Note: You must mask messages even when using a secure socket. </em>RSV1-3 can be ignored, they are for extensions.</p>
+
+<p>The opcode field defines how to interpret the payload data: <span style="font-family: courier new,andale mono,monospace; line-height: 1.5;"><code>0x0</code> </span><span style="line-height: 1.5;">for continuation,</span><span style="font-family: courier new,andale mono,monospace; line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">0x1</code><span style="line-height: 1.5;"> for text (which is always encoded in UTF-8), </span><code style="font-style: normal; line-height: 1.5;">0x2</code><span style="line-height: 1.5;"> for binary, and other so-called "control codes" that will be discussed later. In this version of WebSockets, <code>0x3</code> to <code>0x7</code> and <code>0xB</code> to <code>0xF</code> have no meaning.</span></p>
+
+<p>The FIN bit tells whether this is the last message in a series. If it's 0, then the server keeps listening for more parts of the message; otherwise, the server should consider the message delivered. More on this later.</p>
+
+<h3 id="Decoding_Payload_Length">Decoding Payload Length</h3>
+
+<p>To read the payload data, you must know when to stop reading. That's why the payload length is important to know. Unfortunately, this is somewhat complicated. To read it, follow these steps:</p>
+
+<ol>
+ <li>Read bits 9-15 (inclusive) and interpret that as an unsigned integer. If it's 125 or less, then that's the length; you're <strong>done</strong>. If it's 126, go to step 2. If it's 127, go to step 3.</li>
+ <li>Read the next 16 bits and interpret those as an unsigned integer. You're <strong>done</strong>.</li>
+ <li>Read the next 64 bits and interpret those as an unsigned integer. (The most significant bit <em>must</em> be 0.) You're <strong>done</strong>.</li>
+</ol>
+
+<h3 id="Reading_and_Unmasking_the_Data">Reading and Unmasking the Data</h3>
+
+<p>If the MASK bit was set (and it should be, for client-to-server messages), read the next 4 octets (32 bits); this is the masking key. <span style="line-height: 1.5;">Once the payload length and masking key is decoded, you can read that number of bytes from the socket. Let's call the data <strong>ENCODED</strong>, and the key <strong>MASK</strong>. To get <strong>DECODED</strong>, loop through the octets (bytes a.k.a. characters for text data) of <strong>ENCODED</strong> and XOR the octet with the (i modulo 4)th octet of MASK. In pseudo-code (that happens to be valid JavaScript):</span></p>
+
+<pre class="notranslate">var DECODED = "";
+for (var i = 0; i &lt; ENCODED.length; i++) {
+    DECODED[i] = ENCODED[i] ^ MASK[i % 4];
+<span style="line-height: 1.5;">}</span></pre>
+
+<p><span style="line-height: 1.5;">Now you can figure out what <strong>DECODED</strong> means depending on your application.</span></p>
+
+<h3 id="Message_Fragmentation">Message Fragmentation</h3>
+
+<p>The FIN and opcode fields work together to send a message split up into separate frames.  This is called message fragmentation. Fragmentation is only available on opcodes <code>0x0</code> to <code>0x2</code>.</p>
+
+<p><span style="line-height: 1.5;">Recall that the opcode tells what a frame is meant to do. If it's <code>0x1</code>, the payload is text. If it's <code>0x2</code>, the payload is binary data.</span><span style="line-height: 1.5;"> However, if it's </span><code style="font-style: normal; line-height: 1.5;">0x0,</code><span style="line-height: 1.5;"> the frame is a continuation frame; this means the server should concatenate the frame's payload to the last frame it received from that client.</span><span style="line-height: 1.5;"> Here is a rough sketch, in which a server reacts to a client sending text messages. The first message is sent in a single frame, while the second message is sent across three frames. FIN and opcode details are shown only for the client:</span></p>
+
+<pre style="font-size: 14px;"><strong>Client:</strong> FIN=1, opcode=0x1, msg="hello"
+<strong>Server:</strong> <em>(process complete message immediately) </em>Hi.
+<strong>Client:</strong> FIN=0, opcode=0x1, msg="and a"
+<strong>Server:</strong> <em>(listening, new message containing text started)</em>
+<strong>Client:</strong> FIN=0, opcode=0x0, msg="happy new"
+<strong>Server:</strong> <em>(listening, payload concatenated to previous message)</em>
+<strong>Client:</strong> FIN=1, opcode=0x0, msg="year!"
+<strong>Server:</strong> <em>(process complete message) </em>Happy new year to you too!</pre>
+
+<p>Notice the first frame contains an entire message (has <code>FIN=1</code> and <code>opcode!=0x0</code>), so the server can process or respond as it sees fit. The second frame sent by the client has a text payload (<code>opcode=0x1</code>), but the entire message has not arrived yet (<code>FIN=0</code>). All remaining parts of that message are sent with continuation frames (<code>opcode=0x0</code>), and the final frame of the message is marked by <code>FIN=1</code>. <a href="http://tools.ietf.org/html/rfc6455#section-5.4">Section 5.4 of the spec</a> describes message fragmentation.</p>
+
+<h2 id="Pings_and_Pongs_The_Heartbeat_of_WebSockets">Pings and Pongs: The Heartbeat of WebSockets</h2>
+
+<p>At any point after the handshake, either the client or the server can choose to send a ping to the other party. When the ping is received, the recipient must send back a pong as soon as possible. You can use this to make sure that the client is still connected, for example.</p>
+
+<p>A ping or pong is just a regular frame, but it's a <strong>control frame</strong>. Pings have an opcode of <code>0x9</code>, and pongs have an opcode of <code>0xA</code>. When you get a ping, send back a pong with the exact same Payload Data as the ping (for pings and pongs, the max payload length is 125). You might also get a pong without ever sending a ping; ignore this if it happens.</p>
+
+<div class="note">
+<p>If you have gotten more than one ping before you get the chance to send a pong, you only send one pong.</p>
+</div>
+
+<h2 id="Closing_the_connection">Closing the connection</h2>
+
+<p>To close a connection either the client or server can send a control frame with data containing a specified control sequence to begin the closing handshake (detailed in <a href="http://tools.ietf.org/html/rfc6455#section-5.5.1">Section 5.5.1</a>). Upon receiving such a frame, the other peer sends a Close frame in response. The first peer then closes the connection. Any further data received after closing of connection is then discarded. </p>
+
+<h2 id="Miscellaneous_2"><a name="Miscellaneous">Miscellaneous</a></h2>
+
+<div class="note">
+<p>WebSocket codes, extensions, subprotocols, etc. are registered at the <a href="http://www.iana.org/assignments/websocket/websocket.xml">IANA WebSocket Protocol Registry</a>.</p>
+</div>
+
+<p>WebSocket extensions and subprotocols are negotiated via headers during <a href="#Handshake">the handshake</a>. Sometimes extensions and subprotocols very similar, but there is a clear distinction. Extensions control the WebSocket <em>frame</em> and <em>modify</em> the payload, while subprotocols structure the WebSocket <em>payload</em> and <em>never modify</em> anything. Extensions are optional and generalized (like compression); subprotocols are mandatory and localized (like ones for chat and for MMORPG games).</p>
+
+<h3 id="Extensions">Extensions</h3>
+
+<div class="note">
+<p><strong>This section needs expansion. Please edit if you are equipped to do so.</strong></p>
+</div>
+
+<p>Think of an extension as compressing a file before e-mailing it to someone. Whatever you do, you're sending the <em>same</em> data in different forms. The recipient will eventually be able to get the same data as your local copy, but it is sent differently. That's what an extension does. WebSockets defines a protocol and a simple way to send data, but an extension such as compression could allow sending the same data but in a shorter format.</p>
+
+<div class="note">
+<p>Extensions are explained in sections 5.8, 9, 11.3.2, and 11.4 of the spec.</p>
+</div>
+
+<p><em>TODO</em></p>
+
+<h3 id="Subprotocols">Subprotocols</h3>
+
+<p>Think of a subprotocol as a custom <a href="https://en.wikipedia.org/wiki/XML_schema">XML schema</a> or <a href="https://en.wikipedia.org/wiki/Document_Type_Definition">doctype declaration</a>. You're still using XML and its syntax, but you're additionally restricted by a structure you agreed on. WebSocket subprotocols are just like that. They do not introduce anything fancy, they just establish structure. Like a doctype or schema, both parties must agree on the subprotocol; unlike a doctype or schema, the subprotocol is implemented on the server and cannot be externally refered to by the client.</p>
+
+<div class="note">
+<p>Subprotocols are explained in sections 1.9, 4.2, 11.3.4, and 11.5 of the spec.</p>
+</div>
+
+<p>A client has to ask for a specific subprotocol. To do so, it will send something like this <em>as part of the original handshake</em>:</p>
+
+<pre class="notranslate">GET /chat HTTP/1.1
+...
+Sec-WebSocket-Protocol: soap, wamp
+
+</pre>
+
+<p>or, equivalently:</p>
+
+<pre class="notranslate">...
+Sec-WebSocket-Protocol: soap
+Sec-WebSocket-Protocol: wamp
+
+</pre>
+
+<p>Now the server must pick one of the protocols that the client suggested and it supports. If there is more than one, send the first one the client sent. Imagine our server can use both <code>soap</code> and <code>wamp</code>. Then, in the response handshake, it sends:</p>
+
+<pre class="notranslate">Sec-WebSocket-Protocol: soap
+
+</pre>
+
+<div class="warning">
+<p>The server can't send more than one <code>Sec-Websocket-Protocol</code> header.<br>
+ <span style="line-height: 1.5;">If the server doesn't want to use a</span><span style="line-height: 1.5;">ny subprotocol, </span><em><strong style="line-height: 1.5;">it shouldn't send any <code>Sec-WebSocket-Protocol</code> header</strong></em><span style="line-height: 1.5;">. Sending a blank header is incorrect. The client may close the connection if it doesn't get the subprotocol it wants.</span></p>
+</div>
+
+<p>If you want your server to obey certain subprotocols, then naturally you'll need extra code on the server. Let's imagine we're using a subprotocol <code>json</code>. In this subprotocol, all data is passed as <a href="https://en.wikipedia.org/wiki/JSON">JSON</a>. If the client solicits this protocol and the server wants to use it, the server needs to have a JSON parser. Practically speaking, this will be part of a library, but the server needs to pass the data around.</p>
+
+<div class="note">
+<p><strong>Tip:</strong> To avoid name conflict, it's recommended to make your subprotocol name part of a domain string. If you are building a custom chat app that uses a proprietary format exclusive to Example Inc., then you might use this: <code>Sec-WebSocket-Protocol: chat.example.com</code>. Note that this isn't required, it's just an optional convention, and you can use any string you wish.</p>
+</div>
+
+<h2 id="Related">Related</h2>
+
+<ul>
+ <li><a href="https://github.com/alexhultman/libwshandshake">WebSocket handshake library in C++</a></li>
+ <li><a href="/en-US/docs/WebSockets/Writing_WebSocket_client_applications">Writing WebSocket client applications</a></li>
+ <li><a href="/en-US/docs/WebSockets/Writing_WebSocket_server" title="/en-US/docs/WebSockets/Writing_WebSocket_server">Tutorial: Websocket server in C#</a></li>
+ <li><a href="/en-US/docs/WebSockets/WebSocket_Server_Vb.NET">Tutorial: Websocket server in VB.NET</a></li>
+ <li><a href="/en-US/docs/Web/API/WebSockets_API/Writing_a_WebSocket_server_in_Java">Tutorial: Websocket server in Java</a></li>
+</ul>
diff --git a/files/de/xml_web_services/index.html b/files/de/xml_web_services/index.html
new file mode 100644
index 0000000000..0d592a3fd4
--- /dev/null
+++ b/files/de/xml_web_services/index.html
@@ -0,0 +1,11 @@
+---
+title: XML Web Services
+slug: XML_Web_Services
+translation_of: Archive/Mozilla/Firefox/SOAP_in_Gecko-based_Browsers
+---
+<div class="callout-box"><strong><a href="/en/Webservices_Grundlagen">Webservices Grundlagen</a></strong><br>
+Eine kurze Einführung in Webservices.</div>
+<div>Ein <strong>Webservice</strong> ist eine Sammlung von Protokollen und Standards, die zum Austausch von Daten zwischen Applikationen oder Systemen verwendet wird. Softwareanwendungen, die in unterschiedlichen Programmiersprachen geschrieben sind und auf verschiedenen Plattformen betrieben werden, können Webservices benutzen, um Daten über Computernetzwerke wie das Internet auszutauschen. Bei XML Webservices werden alle Daten, die ausgetauscht werden sollten, mit XML Tags formatiert.</div>
+<table class="topicpage-table"> <tbody> <tr> <td> <h4 id="Dokumentation"><a href="/Special:Tags?tag=XML_Web_Services&amp;language=de">Dokumentation</a></h4> <dl> <dt><a href="/de/SOAP_in_Gecko-basierenden_Browsern">SOAP in Gecko-basierenden Browsern</a></dt> <dd><small>Dieser Artikel zeigt, wie man auf Webservices, über SOAP und JavaScript mittels den verfügbaren Fähigkeiten in Gecko-basierenden Browsern, zugreift.</small></dd> <dt><a class=" external" href="http://www.w3schools.com/soap/default.asp">SOAP Tutorial auf W3School</a> (engl.)</dt> <dd><small>SOAP ist ein auf XML-basierendes Protokoll, um Anwendungen Information über HTTP austauschen zu lassen. In dem <a class=" external" href="http://www.w3schools.com">W3Schools</a> SOAP Tutorial wird erklärt, was SOAP ist und wie es XML verwendet, um Informationen zwischen Applikationen auszutauschen.</small></dd> <dt><a class=" external" href="http://davenet.scripting.com/1998/07/14/xmlRpcForNewbies.html">XML-RPC für Neulinge</a> (engl.)</dt> <dd><small>Informelle aber informative Einführung in XML Remote Procedure Calls (XML-RPC).</small></dd> </dl> <p><span><a href="/Special:Tags?tag=XML_Web_Services&amp;language=de">Alles ansehen...</a></span></p> </td> <td> <h4 id="Community">Community</h4> <ul> <li>Mozillas XML Foren:</li> </ul> <p>{{ DiscussionList("dev-tech-xml", "mozilla.dev.tech.xml") }}</p> <ul> <li><a class=" external" href="http://groups.yahoo.com/group/xml-rpc/">XML-RPC Mailing Liste</a></li> <li><a class=" external" href="http://www.xmlrpc.com/">XML-RPC.com</a></li> </ul> <h4 id="Verwandte_Themen">Verwandte Themen</h4> <dl> <dd><a href="/de/AJAX">AJAX</a>, <a href="/de/XML">XML</a></dd> </dl> </td> </tr> </tbody>
+</table>
+<p>{{ languages( { "en": "en/XML_Web_Services", "es": "es/Servicios_Web_XML", "fr": "fr/Services_Web_XML", "it": "it/XML_Web_Services", "ja": "ja/XML_Web_Services", "pl": "pl/XML_Web_Services", "zh-cn": "cn/XML_Web_Services", "ko": "ko/XML_Web_Services" } ) }}</p>
diff --git a/files/de/xpcom/http_request_header_setzen/index.html b/files/de/xpcom/http_request_header_setzen/index.html
new file mode 100644
index 0000000000..63b5165d0a
--- /dev/null
+++ b/files/de/xpcom/http_request_header_setzen/index.html
@@ -0,0 +1,216 @@
+---
+title: HTTP Request Header setzen
+slug: XPCOM/HTTP_Request_Header_setzen
+translation_of: Mozilla/Tech/XPCOM/Setting_HTTP_request_headers
+---
+<p><a href="/en-US/docs/HTTP">HTTP</a> ist eine der zentralen Webtechnologien. Neben dem eigentlichen Inhalt werden <a href="/en-US/docs/HTTP/Headers">einige wichtige Informationen</a> sowohl für die HTTP Requests als auch für die Antworten (Responses) gesetzt.</p>
+<p>Du kannst für jedes Request der Anwendung deine eigenen HTTP Header setzen, egal ob das Request dadurch eingeleitet wird, daß dein Code explizit einen HTTP-Kanal öffnet, ob es durch eine <a href="/en-US/docs/nsIXMLHttpRequest">XMLHttpRequest</a> Aktivität entstand, durch ein {{htmlelement("img")}} Element in der Seite generiert oder gar von <a href="/en-US/docs/Web/CSS">CSS</a> aus gestartet wurde.</p>
+<h3 id="HTTP_Kanäle">HTTP Kanäle</h3>
+<p>Wenn du HTTP Anfragen (Requests) und Antworten bearbeites, machst du das typischerweise mit einem <code><a href="/en-US/docs/XPCOM_Interface_Reference/nsIHttpChannel">nsIHttpChannel</a></code>. Die <code>nsIHttpChannel</code> Schnittstelle besitzt eine Reihe von Eigenschaften und Methoden, von denen uns hier vor allem <code>setRequestHeader</code> interessiert. Diese Methode erlaubt uns, <em>einen HTTP Request Header zu setzen</em>.</p>
+<p>Es folgt Beispielcode, wie wir einen HTTP Header setzen.</p>
+<pre class="brush: js">// fuegt "X-Hello: World" als Header zum Request hinzu
+httpChannel.setRequestHeader("X-Hello", "World", false);
+</pre>
+<p>Im obenstehenden Bespielcode haben wir eine Variable <code>httpChannel</code>, die auf ein Objekt zeigt, das <code>nsIHttpChannel</code> implementiert. (Die Variable hätte aber auch irgendwie anders heißen können.)</p>
+<p>Die Methode <code>setRequestHeader</code> erwartet 3 Parameter. Der erste Parameter ist der <em>Name</em> des HTTP Request Headers. Der zweite Parameter ist der <em>Wert</em> des HTTP Request Headers. Ignoriere vorläufig den dritten Parameter, und setze ihn erst einmal immer auf <code>false</code>.</p>
+<p>In unserem Beispiel hat der HTTP Request Header, den wir hinzugefügt haben, den <em>Namen</em> <code>X-Hello</code> und den <em>Wert</em> <code>World</code>.</p>
+<div class="note">
+ <p><strike><strong>HINWEIS</strong>: IWenn du deinen eigenen HTTP header einführst, MUST du ein <code>X-</code> vor den Namen setzen. (In unserem Beispiel ist unser neuer HTTP header <code>X-Hello</code> und NICHT <code>Hello</code> weil wir korrekterweise das <code>X-</code> vor unserem Namen hinzugefügt haben.)</strike></p>
+ <p><br>
+  <strong>Dieser Hinweis ist veraltet: <a href="http://tools.ietf.org/html/rfc6648">http://tools.ietf.org/html/rfc6648</a></strong></p>
+</div>
+<h3 id="Notifications" name="Notifications">Benachrichtigungen</h3>
+<p>Du wirst dich jetzt vielleicht fragen, wie man an den <code>nsIHttpChannel</code> kommt, wenn das HTTP Request abgeschickt wurde.</p>
+<p>Wenn dein eigener Code das Request erzeugt hat, dann hast du den HTTP Kanal wahrscheinlich schon. Anders erzeugte Requests fängt man mit Benachrichtigungen (<strong>notifications</strong>) ab, die sehr stark den Ereignissen oder Signalen ähneln, die man in anderen Sprachen und Frameworks findet.</p>
+<p>In diesem Fall müssen wir, um den <code>nsIHttpChannel</code> rechtzeitig vor dem Absenden des HTTP Requests zu bekommen, da<em>s </em><code>"http-on-modify-request"</code> Thema ("topic") beobachten. (Ja, <code>"http-on-modify-request"</code> ist eine Zeichenkette.)</p>
+<div class="note">
+ <p><strong>HINWEIS</strong>: Es gibt viele andere "topics" neben <code>"http-on-modify-request"</code>, zu denen du Benachrichtigungen bekommen kannst. Zum Beispiel <code>"http-on-examine-response"</code> und <code>"xpcom-shutdown"</code>. Du kannst auch deine eigenen "topics" einrichten und selber Benachrichtigungen dazu verschicken..</p>
+ <p>Für nähere Informationen über das Benachrichtigungs-Framework und eine Liste allgemeiner Benachrichtigungs-Topics siehe <a href="/en-US/docs/Observer_Notifications">Observer Notifications</a>.</p>
+</div>
+<h3 id="Observers" name="Observers">Observer (Beobachter)</h3>
+<p>Um zu einem Thema wie <code>"http-on-modify-request"</code> Benachrichtigungen zu empfangen müssen wir einen Beobachter (<strong>observer)</strong> einrichten. Ein Beobachter ist eine Komponente, die die <a href="/en-US/docs/XPCOM_Interface_Reference/nsIObserver">nsIObserver</a> Schnittstelle implementiert. Sobald der Beobachter für ein Thema <em>registriert</em> ist, wird es über das Thema benachrichtigt, indem seine <code>observe</code> Methode aufgerufen wird.</p>
+<p>Unten folgt der Quelltext eines Beispiel-Beobachters, der unseren Zusatz-Header "X-Hello" zu dem HTTP-Kanal hinzufügt, der der Benachrichtigung für http-on-modify-request mitgegeben wird:</p>
+<pre class="brush: js">var {Cc, Ci} = require("chrome");
+var httpRequestObserver =
+{
+  observe: function(subject, topic, data)
+  {
+    if (topic == "http-on-modify-request") {
+      var httpChannel = subject.QueryInterface(Ci.nsIHttpChannel);
+      httpChannel.setRequestHeader("X-Hello", "World", false);
+    }
+  }
+};
+</pre>
+<div class="note">
+ <strong>HINWEIS</strong>: Der obenstehende Quelltext wurde verändert um wiederzugeben, daß man in einem Firefox-Add-On die Typen Components.interfaces und Components.classes nicht mehr direkt ansprechen kann, sondern die obere "require"-Codezeile nutzen muß. Deshalb steht auf dieser Seite Ci bzw. Cc, wo man früher Components.interfaces respektive Components.classes verwendet hat.<br>
+ Bitte beachte auch, daß der Code selber normalerweise in einen Block exports.main = function() { ... } eingeschlossen wird.</div>
+<p>Beachte dabei, daß es wichtig ist, wie viele Parameter die <code>observe</code> Method übergeben bekommt. Es sind 3 Parameter (Wie wir oben im Beispielcode gezeigt haben). Für das <code>"http-on-modify-request"</code> Thema enthält der erste Parameter (im oberen Beispiel <code>subject</code> genannt) den <code>nsIHttpChannel</code>. Aus gewissen Gründen wird er uns aber als <code><a href="/en-US/docs/XPCOM_Interface_Reference/nsISupports">nsISupports</a></code> Objekt übergeben. Deshalb müssen wir das <code>nsISupports</code> in ein <code>nsIHttpChannel</code> <em>umwandeln, </em>was der Aufruf von <code>QueryInterface</code> für uns macht. Und sicher - Objekte von einem Typ in einen anderen <em>umzuwandeln</em> ist sehr häßlich und läßt etwas vermissen, was man als 'Syntaktischen Zucker' bezeichnen könnte.</p>
+<p>Die zweite Zeile des Codes im if-Block sollte dir bereits bekannt erscheinen. Es ist der selbe Code, den wir bereits vorher verwendet hatten, um den HTTP Request Header hinzuzufügen.</p>
+<p>Der Name des Objektes -- <code>httpRequestObserver</code> -- ist unwichtig. Wir hätten es benennen können, wie es uns gefällt.</p>
+<h3 id="Registering" name="Registering">Registrierung</h3>
+<p>Nachdem wir den Beobachter aufgesetzt haben, müssen wir ihn registrieren. In unserem Fall möchten wir ihn für das Thema <code>"http-on-modify-request"</code> registrieren. Das können wir mit dem untenstehenden Code tun.</p>
+<pre class="brush: js">var observerService = Cc["@<a class="linkification-ext external" href="http://mozilla.org/observer-service;1">mozilla.org/observer-service;1</a>"]
+                                .getService(Ci.<a href="/en-US/docs/XPCOM_Interface_Reference/nsIObserverService">nsIObserverService</a>);
+observerService.addObserver(httpRequestObserver, "http-on-modify-request", false);
+</pre>
+<p>Der erste Ausdruck holt das Objekt, das uns Registrierungen zu Themen durchführen läßt, zu denen wir Benachrichtigungen erhalten wollen.</p>
+<p>Der Befehl in der zweiten Zeile führt die eigentliche Registrierung durch. Es bedeutet: Wir wollen, daß <code>httpRequestObserver</code> (durch Aufrufen seiner <code>observe</code> Methode) benachrichtigt wird, wenn ein <code>"http-on-modify-request"</code> Thema stattfindet (von dem wir wissen, daß es direkt vor jedem HTTP Request passiert).</p>
+<h3 id="Unregistering" name="Unregistering">Abmeldung</h3>
+<p>Du solltest den Beobachter vor dem Beenden abmelden, um mögliche Speicherlecks zu vermeiden. Einen Beobachter meldet man mit einem Aufruf von <code>nsIObserverService.removeObserver</code> wie folgt ab:</p>
+<pre class="brush: js">observerService.removeObserver(httpRequestObserver, "http-on-modify-request");</pre>
+<h3 id="Zusammengefaßtes_Beispiel">Zusammengefaßtes Beispiel</h3>
+<p>Hier ist eine leicht andere Variante unseres <code>httpRequestObserver</code> Objektes. Während die vorherige Version die wir gezeigt haben für das Lernen anschaulich sein sollte, möchte man den Code in echten Anwendungen vielleicht eher wie folgt aufbauen:</p>
+<pre class="brush: js">var httpRequestObserver =
+{
+  observe: function(subject, topic, data)
+  {
+    if (topic == "http-on-modify-request") {
+      var httpChannel = subject.QueryInterface(Ci.nsIHttpChannel);
+      httpChannel.setRequestHeader("X-Hello", "World", false);
+    }
+  },
+
+  get observerService() {
+    return Cc["@mozilla.org/observer-service;1"]
+                     .getService(Ci.nsIObserverService);
+  },
+
+  register: function()
+  {
+    this.observerService.addObserver(this, "http-on-modify-request", false);
+  },
+
+  unregister: function()
+  {
+    this.observerService.removeObserver(this, "http-on-modify-request");
+  }
+};
+</pre>
+<p>Dieses Objekt hat benutzerfreundliche <code>register()</code> und <code>unregister()</code> Methoden. Damit braucht man für die Aktivierung nur noch folgendes aufzurufen:</p>
+<pre class="brush: js">httpRequestObserver.register();
+</pre>
+<p>Du solltest auch nicht vergessen, vor den Beenden den Beobachter abzumelden:</p>
+<pre class="brush: js">httpRequestObserver.unregister();
+</pre>
+<p>Und das war's schon.</p>
+<h3 id="XPCOM_components" name="XPCOM_components">XPCOM Komponenten</h3>
+<p>Du mußt den <code>http-on-modify-request</code> Beobachter einmal pro Anwendung registrieren (Nicht einmal pro Fenster!). Das bedeutet, daß du die Implementierung des Beobachters in eine <a href="/en-US/docs/How_to_Build_an_XPCOM_Component_in_Javascript">XPCOM Komponente</a> anstelle eines <a href="/en-US/docs/XUL_Overlays">overlays</a> packen solltest. Wenn du Gecko2 (Firefox4) unterstützen willst, mußt du deine javascript Komponente so registrieren wie hier beschrieben: <a class="linkification-ext" href="/en-US/docs/XPCOM/XPCOM_changes_in_Gecko_2.0#JavaScript_components">https://developer.mozilla.org/en/XPCOM/XPCOM_changes_in_Gecko_2.0#JavaScript_components</a>.</p>
+<pre class="brush: js">var headerName  = "X-hello";
+var headerValue = "world";
+
+function LOG(text)
+{
+    //    var consoleService = Components.classes["@<a class="linkification-ext" href="http://mozilla.org/consoleservice;1">mozilla.org/consoleservice;1</a>"].getService(Components.interfaces.nsIConsoleService);
+    //    consoleService.logStringMessage(text);
+}
+
+function myHTTPListener() { }
+
+myHTTPListener.prototype = {
+
+  observe: function(subject, topic, data)
+  {
+      if (topic == "http-on-modify-request") {
+
+          LOG("----------------------------&gt; (" + subject + ") mod request");
+
+          var httpChannel = subject.QueryInterface(Components.interfaces.nsIHttpChannel);
+          httpChannel.setRequestHeader(headerName, headerValue, false);
+          return;
+      }
+
+
+      if (topic == "profile-after-change") {
+
+          LOG("----------------------------&gt; profile-after-change");
+
+          var os = Components.classes["@<a class="linkification-ext" href="http://mozilla.org/observer-service;1">mozilla.org/observer-service;1</a>"]
+                             .getService(Components.interfaces.nsIObserverService);
+
+          os.addObserver(this, "http-on-modify-request", false);
+          return;
+      }
+  },
+
+  QueryInterface: function (iid) {
+        if (iid.equals(Components.interfaces.nsIObserver) ||
+            iid.equals(Components.interfaces.nsISupports))
+            return this;
+
+        Components.returnCode = Components.results.NS_ERROR_NO_INTERFACE;
+        return null;
+    },
+};
+
+var myModule = {
+    registerSelf: function (compMgr, fileSpec, location, type) {
+
+        var compMgr = compMgr.QueryInterface(Components.interfaces.nsIComponentRegistrar);
+        compMgr.registerFactoryLocation(this.myCID,
+                                        this.myName,
+                                        this.myProgID,
+                                        fileSpec,
+                                        location,
+                                        type);
+
+
+          LOG("----------------------------&gt; registerSelf");
+
+        var catMgr = Components.classes["@<a class="linkification-ext" href="http://mozilla.org/categorymanager;1">mozilla.org/categorymanager;1</a>"].getService(Components.interfaces.nsICategoryManager);
+        catMgr.addCategoryEntry("app-startup", this.myName, this.myProgID, true, true);
+    },
+
+
+    getClassObject: function (compMgr, cid, iid) {
+
+          LOG("----------------------------&gt; getClassObject");
+
+        return this.myFactory;
+    },
+
+    myCID: Components.ID("{9cf5f3df-2505-42dd-9094-c1631bd1be1c}"),
+
+    myProgID: "@dougt/myHTTPListener;1",
+
+    myName:   "Simple HTTP Listener",
+
+    myFactory: {
+        QueryInterface: function (aIID) {
+            if (!aIID.equals(Components.interfaces.nsISupports) &amp;&amp;
+                !aIID.equals(Components.interfaces.nsIFactory))
+                throw Components.results.NS_ERROR_NO_INTERFACE;
+            return this;
+        },
+
+        createInstance: function (outer, iid) {
+
+          LOG("----------------------------&gt; createInstance");
+
+          return new myHTTPListener();
+        }
+    },
+
+    canUnload: function(compMgr) {
+        return true;
+    }
+};
+
+function NSGetModule(compMgr, fileSpec) {
+    return myModule;
+}
+</pre>
+<h3 id="Gute_Praktiken_für_Datenschutz_und_Sicherheit">Gute Praktiken für Datenschutz und Sicherheit</h3>
+<p>Ein Anwendungsfall für das Setzen eines anwendungsspezifischen HTTP Request Headers ist, wenn ein bestimmter Webauftritt prüfen können soll, ob der Browser ein bestimmtes Plugin / Add-On / Erweiterung installiert hat.</p>
+<p>Eine gute Praxis dazu ist, wenn man diesen spezifischen HTTP Header (beispielsweise<code> </code>"X-site.net-extension") nicht immer sendet, sondern nur dann, wenn man HTTP Requests an diese eine spezifische Webaddresse schickt. Nicht gleich von vorn herein allen besuchten Webservern mitzuteilen, welche Erweiterungen installiert sind, ist gut sowohl für den Datenschutz (weil so die Identifikation und Nachverfolgung von Nutzern anhand ihres Browserprofils erschwert wird), als auch für die Sicherheit (Angreifer kennen so manche Schwachstelle von bestimmten Browsererweiterungen).</p>
+<p>Bei Beachtung dieser Datenschutz- und Sicherheitspraktiken sieht der Quelltext dann so aus:</p>
+<pre class="brush: js">observe: function(subject, topic, data)
+ {
+   if (topic == "http-on-modify-request") {
+     var httpChannel = subject.QueryInterface(Ci.nsIHttpChannel);
+     if (/site.net/.test(httpChannel.originalURI.host)) {
+          httpChannel.setRequestHeader("X-Hello", "World", false);
+     }
+   }
+ },
+</pre>
diff --git a/files/de/xpcom/index.html b/files/de/xpcom/index.html
new file mode 100644
index 0000000000..38486de78d
--- /dev/null
+++ b/files/de/xpcom/index.html
@@ -0,0 +1,66 @@
+---
+title: XPCOM
+slug: XPCOM
+tags:
+  - XPCOM
+translation_of: Mozilla/Tech/XPCOM
+---
+<div class="callout-box"><strong>Einführung in XPCOM</strong>
+<p>Ein fünfteiliges Tutorial auf <a class="external" href="http://www.ibm.com/developerworks/">IBM developerWorks</a>: <a class="external" href="http://www.ibm.com/developerworks/webservices/library/co-xpcom.html">Teil I</a>, <a class="external" href="http://www.ibm.com/developerworks/webservices/library/co-xpcom2.html">Teil II</a>, <a class="external" href="http://www.ibm.com/developerworks/webservices/library/co-xpcom3.html">Teil III</a>, <a class="external" href="http://www.ibm.com/developerworks/webservices/library/co-xpcom4/">Teil IV</a>, <a class="external" href="http://web.archive.org/web/20080201111622/http://www.ibm.com/developerworks/webservices/library/co-xpcom5.html" title="http://web.archive.org/web/20080201111622/http://www.ibm.com/developerworks/webservices/library/co-xpcom5.html">Teil V</a></p>
+</div>
+
+<div class="warning">
+<p><strong>XPCOM is no longer available for use by Firefox extensions. Use <a href="/en-US/Add-ons/WebExtensions">WebExtensions</a> instead.</strong></p>
+</div>
+
+<div>
+<p>Das <strong>Cross Platform Component Object Model (XPCOM)</strong> ist ein plattformübergreifendes Komponentenmodell, vergleichbar mit Microsoft COM. Es verfügt über mehrere <a href="/de/docs/XPCOM/Sprachbindungen" title="de/XPCOM/Sprachbindungen">Sprachbindungen</a>, die es ermöglichen XPCOM Komponenten in JavaScript, Java, und Python neben C++ zu implementieren. Die Schnittstellen sind im IDL-Dialekt <a href="/de/docs/XPIDL" title="de/XPIDL">XPIDL</a> definiert.</p>
+
+<p>XPCOM bietet selbst eine Reihe von Kernkomponenten und Klassen an, z.B. Datei- und Speichermanagement, Threads, Grundlegende Datenstrukturen (Strings, Arrays, Variants), etc. Der Großteil der XPCOM-Komponenten ist kein Teil des Kerns und wird durch andere Plattformteile (z.B. <a href="/de/docs/Gecko" title="de/Gecko">Gecko</a> oder <a href="/de/docs/Necko" title="de/Necko">Necko</a>) oder durch eine Anwendung oder sogar durch eine Erweiterung bereit gestellt.</p>
+</div>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 class="Documentation" id="Dokumentation" name="Dokumentation">Dokumentation</h2>
+
+    <dl>
+     <dt><a href="/de/docs/XPCOM_API_Referenz" title="de/XPCOM_API_Referenz">XPCOM API Referenz</a></dt>
+     <dd>Dokumentation der Kernkomponenten, Schnittstellen und Funktionen von XPCOM.</dd>
+     <dt><a href="/de/docs/XPCOM/XPCOM_Änderungen_in_Gecko_2.0" title="de/XPCOM/XPCOM_Änderungen_in_Gecko_2.0">XPCOM Änderungen in Gecko 2.0</a></dt>
+     <dd>Es gab eine Reihe von Änderungen in Gecko 2.0 die die Kompatibilität von XPCOM Komponenten betreffen. Dieser Artikel gibt detailliertere Auskunft darüber.</dd>
+     <dt><a href="/de/docs/XPCOM/Interne_Strings" title="de/XPCOM/Interne_Strings">Strings</a>, <a href="/de/docs/XPCOM/Hashtable" title="de/XPCOM/Hashtable">Hashtable</a>, und <a href="/de/docs/XPCOM/Arrays" title="de/XPCOM/Arrays">Arrays</a></dt>
+     <dd>Verwendung von grundlegenden Datenstrukturen.</dd>
+     <dt><a href="/de/docs/XPCOM_Glue" title="de/XPCOM_Glue">XPCOM Glue</a></dt>
+     <dd>XPCOM Glue ermöglicht die Verwendung von XPCOM Hilfsfunktionen und -Klassen ohne eine Abhängigkeit zu Teilen von XPCOM (xpcom_core.{dll,so,dylib}) herzustellen.</dd>
+     <dt><a href="/de/docs/XPCOM_Komponenten_erstellen" title="de/XPCOM_Komponenten_erstellen">XPCOM Komponenten erstellen</a></dt>
+     <dd>Dieser Artikel erklärt wie man eine XPCOM Komponente baut, die das Browserverhalten kontrolliert.</dd>
+     <dt><a href="/de/docs/XPCOM_Komponenten_in_JavaScript" title="de/XPCOM_Komponenten_in_JavaScript">XPCOM Komponenten in JavaScript</a></dt>
+     <dd>Schnelleinstieg in das Schreiben von JavaScript Komponenten.</dd>
+     <dt><a href="/de/docs/Erstellen_von_Firefox_Erweiterungen_mit_dem_Mozilla_Build_System" title="de/Erstellen_von_Firefox_Erweiterungen_mit_dem_Mozilla_Build_System">Erstellen von Firefox Erweiterungen mit dem Mozilla Build System</a></dt>
+     <dd>Das Erstellen von <em>»Erweiterungen«</em> soll nicht verwirren, es geht in diesem Artikel hauptsächlich um binäre Komponenten.<br>
+     <a class="external" href="http://www.iosart.com/firefox/xpcom/">Linux und Windows</a>, <a class="external" href="http://starkravingfinkle.org/blog/2006/10/mozilla-platform-xpcom-in-c/">Windows</a>, <a class="external" href="http://wanderingstan.com/2007-11-16/geekout_how_to_make_a_c_xpcom_component">Redux</a>, <a class="external" href="http://rcrowley.org/2007/07/17/cross-platform-xpcom-a-howto/">OS/X</a> (en)</dd>
+     <dt><a href="/de/docs/XPCOM_in_JavaScript_ohne_Leaks_verwenden" title="de/XPCOM_in_JavaScript_ohne_Leaks_verwenden">XPCOM in JavaScript ohne Leaks verwenden</a></dt>
+     <dd>XPCOM in JavaScript (auch als <a href="/de/docs/XPConnect" title="de/XPConnect">XPConnect</a> bekannt) ist eine Umgebung in der Speicherlecks nicht offensichtlich sind. Es kommt schon mal vor, dass der JavaScript-Code Leaks aufweist.</dd>
+    </dl>
+
+    <p><span class="alllinks"><a href="/de/docs/tag/XPCOM" title="/tag/XPCOM">Alle anzeigen...</a></span></p>
+   </td>
+   <td>
+    <h2 class="Tools" id="Tools" name="Tools">Tools</h2>
+
+    <ul>
+     <li><a class="external" href="http://ted.mielczarek.org/code/mozilla/jscomponentwiz/">JavaScript Komponentenassistent </a></li>
+     <li><a class="external" href="http://www.mytools360.com-a.googlepages.com/home#XPComPro" title="http://www.mytools360.com-a.googlepages.com/home#XPComPro">Visual C++ Komponentenassistent</a></li>
+    </ul>
+
+    <h2 class="Related_Topics" id="Verwandte_Themen">Verwandte Themen</h2>
+
+    <ul>
+     <li><a href="/de/docs/XPCOM/Sprachbindungen" title="de/XPCOM/Sprachbindungen">Sprachbindungen</a>, <a href="/de/docs/JavaXPCOM" title="de/JavaXPCOM">JavaXPCOM</a>, <a href="/de/docs/XPConnect" title="de/XPConnect">XPConnect</a>, <a href="/de/docs/PlXPCOM" title="de/PlXPCOM">PlXPCOM</a>, <a href="/de/docs/PyXPCOM" title="de/PyXPCOM">PyXPCOM</a>, <a href="/de/docs/RbXPCOM" title="de/RbXPCOM">RbXPCOM</a>, <a href="/de/docs/JavaScript" title="de/JavaScript">JavaScript</a></li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/de/xpi/index.html b/files/de/xpi/index.html
new file mode 100644
index 0000000000..61d5111d85
--- /dev/null
+++ b/files/de/xpi/index.html
@@ -0,0 +1,18 @@
+---
+title: XPI
+slug: XPI
+tags:
+  - XPInstall
+translation_of: Mozilla/XPI
+---
+<p><strong>Cross-Platform Installer Module (XPI)</strong> (ausgesprochen "zippy") ist eine ZIP-Datei, welche durch Installationspakete der <a href="/de/XPInstall" title="de/XPInstall">XPInstall</a>-Technologie genutzt wird. XPI-Module (sogenannte "<a href="/de/Bundles" title="de/Bundles">Bundles</a>") haben die Aufgabe verschiedenste Programme zu installieren, zum Beispiel <a href="/de/Plugins" title="de/Plugins">Plugins</a>, <a href="/de/Erweiterungen" title="de/Erweiterungen">Erweiterungen</a>, <a href="/de/Themes" title="de/Themes">Themes</a>, <a class="external" href="http://www.mozilla.com/thunderbird/dictionaries.html">Wörterbücher</a>, etc.</p>
+<p>Ein XPI enthält Installationsanweisungen (install.js oder <a href="/de/Installationsmanifest" title="de/Installationsmanifest">install.rdf</a>) und die Bestandteile der zu installierenden Software, welche selbst als JAR-Datei verpackt ist. Beim Herunterladen oder Ziehen in das Erweiterungsfenster, beginnt XPInstall automatisch die Anweisungen innerhalb des XPI auszuwerten, und installiert entsprechend die enthaltene Software.</p>
+<div class="geckoVersionNote">
+<p>{{ gecko_callout_heading("2.0") }}</p>
+<p>Ab Gecko 2.0 {{ geckoRelease("2.0") }}, werden XPI Dateien nicht mehr entpackt, wenn Erweiterungen installiert werden. Stattdessen wird das XPI selbst in das Erweiterungsverzeichnis platziert und die Dateien werden direkt aus dem Paket geladen. Siehe <a href="/de/Erweiterungen/Erweiterungen_für_Firefox_4_aktualisieren">Erweiterungen für Firefox 4 aktualisieren</a> für weitere Details.</p>
+</div>
+<p>Wenn XPI Dateien mittels HTTP übermittelt werden, trifft der <code>application/x-xpinstall</code> MIME-Type auf die Dateiendung <code>xpi</code> zu.</p>
+<h2 id="Siehe_auch">Siehe auch</h2>
+<ul> <li><a href="/de/Bundles" title="de/Bundles">Bundles</a></li> <li><a href="/de/XPInstall" title="de/XPInstall">XPInstall</a></li> <li><a href="/de/XPI-Installationsmodule_erzeugen" title="de/XPI-Installationsmodule_erzeugen">XPI-Installationsmodule erzeugen</a></li>
+</ul>
+<p>{{ languages( { "en": "en/XPI", "it": "it/XPI", "pl": "pl/XPI" } ) }}</p>
diff --git a/files/de/xpinstall/index.html b/files/de/xpinstall/index.html
new file mode 100644
index 0000000000..289ff00b1e
--- /dev/null
+++ b/files/de/xpinstall/index.html
@@ -0,0 +1,54 @@
+---
+title: XPInstall
+slug: XPInstall
+tags:
+  - XPInstall
+translation_of: Archive/Mozilla/XPInstall
+---
+<p></p><div class="warning"><p>Teile dieser Seite zeigen die Verwendung der <a class="new" href="https://developer.mozilla.org/de/docs/XPInstall_API_Referenz" rel="nofollow">XPInstall API</a>. Der Großteil dieser API ist missbilligt (<em>deprecated</em>) und seit Gecko 1.9 nicht länger verfügbar. <a href="https://developer.mozilla.org/de/docs/Erweiterungen">Erweiterungen</a>, <a href="https://developer.mozilla.org/de/docs/Themes">Theme</a>, und <a href="https://developer.mozilla.org/de/docs/Plugins">plug-in</a>  Entwickler müssen von <code>install.js</code> basierenden Paketen zum neuem <a href="https://developer.mozilla.org/de/docs/Bundles">Paketschema</a> mit einem <code><a href="https://developer.mozilla.org/de/docs/Installationsmanifest">install.rdf</a></code> Manifest wechseln. Genaueres für Plugin-Entwickler findet man unter der Anleitung <a class="new" href="https://developer.mozilla.org/de/docs/Plugins_als_Toolkit_Paket_einsetzen" rel="nofollow">wie man ein Plugin als eine Erweiterung packt</a>.</p></div><p></p>
+
+<p><strong>Cross-Platform Install (XPInstall)</strong> ist eine Technologie, welche von der Mozilla Suite, Mozilla Firefox, Mozilla Thunderbird und anderen <a href="/de/XUL" title="de/XUL">XUL</a>-basierten Anwendungen genutzt wird, um <a href="/de/Erweiterungen" title="de/Erweiterungen">Erweiterungen</a> zu installieren. Ein <a href="/de/XPI" title="de/XPI">XPI</a> (ausgesprochen "zippy" und abgeleitet von XPInstall) Installationsmodul ist eine ZIP-Datei, welche ein Installationsskript oder ein Manifest (benannt install.js oder <a href="/de/Installationsmanifest">install.rdf</a>) im Wurzelverzeichnis enthält.</p>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h4 id="Dokumentation" name="Dokumentation"><a href="/Special:Tags?tag=XPInstall&amp;language=de" title="Special:Tags?tag=XPInstall&amp;language=de">Dokumentation</a></h4>
+
+    <dl>
+     <dt><a href="/de/XPInstall_API_Referenz">XPInstall API Referenz</a></dt>
+     <dd><small>Dokumentation der XPInstall API</small></dd>
+     <dt><a href="/de/XPI_Installationsskripte_anhand_eines_Beispiels">XPI Installationsskripte anhand eines Beispiel</a></dt>
+     <dd><small>Dieser Artikel nutzt das Installationsskript aus dem <code>browser.xpi</code> Installationspaket als Basis zur Diskussion von XPI-Installationen im allgemeinen.</small></dd>
+     <dt><a href="/de/XPI_Installationsmodule_erstellen" title="de/XPI_Installationsmodule_erstellen">XPI Installationsmodule erstellen</a></dt>
+     <dd><small>Dieser Artikel Beschreibt den Paketaufbau von Mozilla und bietet eine Einführung zur Erstellung eines neuen Paketes, welches weitergegeben, installiert, und Benutzern zur Verfügung gestellt werden kann.</small></dd>
+    </dl>
+
+    <p><span class="alllinks"><a href="/Special:Tags?tag=XPInstall&amp;language=de" title="Special:Tags?tag=XPInstall&amp;language=de">Alle anzeigen...</a></span></p>
+   </td>
+   <td>
+    <h4 id="Community" name="Community">Community</h4>
+
+    <ul>
+     <li>Mozillas Plattform Foren:</li>
+    </ul>
+
+    <p>{{ DiscussionList("dev-platform", "mozilla.dev.platform") }}</p>
+
+    <h4 id="Tools" name="Tools">Tools</h4>
+
+    <ul>
+     <li><a class="external" href="http://www.mozilla.org/quality/smartupdate/xpinstall-trigger.html">XPInstall Trigger Seite</a></li>
+    </ul>
+
+    <h4 id="Verwandte_Themen" name="Verwandte_Themen">Verwandte Themen</h4>
+
+    <dl>
+     <dd><a href="/de/Erweiterungen" title="de/Erweiterungen">Erweiterungen</a>, <a href="/de/XUL" title="de/XUL">XUL</a>, <a href="/de/XPI" title="de/XPI">XPI</a></dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{ languages( { "en": "en/XPInstall", "zh-cn": "cn/XPInstall", "es": "es/XPInstall", "fr": "fr/XPInstall", "ja": "ja/XPInstall", "pl": "pl/XPInstall" } ) }}</p>
diff --git a/files/de/xul_anwendungen_für_firefox_1.5_anpassen/index.html b/files/de/xul_anwendungen_für_firefox_1.5_anpassen/index.html
new file mode 100644
index 0000000000..a2dee4406d
--- /dev/null
+++ b/files/de/xul_anwendungen_für_firefox_1.5_anpassen/index.html
@@ -0,0 +1,32 @@
+---
+title: XUL_Anwendungen_für_Firefox_1.5_anpassen
+slug: XUL_Anwendungen_für_Firefox_1.5_anpassen
+tags:
+  - Erweiterungen
+  - Firefox 1.5
+  - XUL
+translation_of: Mozilla/Firefox/Releases/1.5/Adapting_XUL_Applications_for_Firefox_1.5
+---
+<div>{{FirefoxSidebar}}</div><p>Diese Seite gibt einen Überblick über Änderungen in <a href="/de/Firefox_1.5_für_Entwickler">Firefox 1.5</a>, die XUL-Entwickler betreffen.</p>
+
+<h3 id="Besondere_Änderungen">Besondere Änderungen</h3>
+
+<ul>
+ <li><a href="/de/Tree_Widget_Änderungen">Tree Widget Änderungen</a></li>
+ <li><a href="/de/Internationale_Zeichen_in_XUL_JavaScript">Internationale Zeichen in XUL JavaScript</a> (betrifft lediglich Erweiterungen mit JavaScript-Dateien, die Nicht-ASCII-Zeichen enthalten)</li>
+ <li><a href="/de/Änderungen_an_XMLHttpRequest_in_Gecko1.8">Änderungen an XMLHttpRequest in Gecko 1.8</a></li>
+ <li><a href="/de/Änderungen_an_XUL_für_Firefox_1.5">Änderungen an XUL für Firefox 1.5</a></li>
+ <li><a href="/de/XPCNativeWrapper">XPCNativeWrapper</a> sind standardmäßig aktiviert und ihr Verhalten hat sich im Vergleich zu 1.0.x geändert.</li>
+ <li>Eine einfachere Methode der <a href="/de/Chrome_Registrung">Chrome Registrierung</a> ersetzt die veraltete contents.rdf.</li>
+ <li>Für überlagerte Kontextmenüs: Die Funktion <code>gContextMenu.linkURL()</code> wurde umbenannt in <code>gContextMenu.getLinkURL()</code>, und <code>linkURL</code> ist nun eine Eigenschaft. Für abwärtskompatible Verwendung:<br>
+  <code>url = 'getLinkURL' in gContextMenu ? gContextMenu.getLinkURL() : gContextMenu.linkURL();</code></li>
+</ul>
+
+<h3 id="Weitere_Informationen">Weitere Informationen</h3>
+
+<ul>
+ <li><a href="/de/Verwendung_von_nsIXULAppInfo">Version einer Anwendung mittels nsIXULAppInfo prüfen</a></li>
+ <li><a class="external" href="http://kb.mozillazine.org/Dev_:_Extensions_:_Cross-Version_Compatibility_Techniques">MozillaZine</a></li>
+</ul>
+
+<p>{{ languages( { "en": "en/Adapting_XUL_Applications_for_Firefox_1.5", "fr": "fr/Adaptation_des_applications_XUL_pour_Firefox_1.5", "it": "it/Adattare_le_applicazioni_XUL_a_Firefox_1.5", "ja": "ja/Adapting_XUL_Applications_for_Firefox_1.5", "pl": "pl/Dostosowanie_aplikacji_XUL_do_Firefoksa_1.5" } ) }}</p>
diff --git a/files/de/xul_explorer/index.html b/files/de/xul_explorer/index.html
new file mode 100644
index 0000000000..62fd957faf
--- /dev/null
+++ b/files/de/xul_explorer/index.html
@@ -0,0 +1,52 @@
+---
+title: XUL Explorer
+slug: XUL_Explorer
+translation_of: Archive/Mozilla/XUL_Explorer
+---
+<p>XUL Explorer is a <a href="/en/XULRunner" title="en/XULRunner">XULRunner</a> application that provides an easy way to experiment with XUL. It’s a simple editor that can preview XUL inline or in a separate popup window. It has a list of code snippets (small fragments of XUL or JavaScript) that can be quickly inserted into the editor. The XUL can be loaded from and saved to files. A XUL validator and the <a href="/en/Error_Console" title="en/Error_Console">Error Console</a> are both available to help debug problems. The help menu provides access to XUL information on MDC. There is even simple “keyword” help lookup for XUL elements.</p>
+<h3 id="Roadmap" name="Roadmap">Roadmap</h3>
+<p>Features:</p>
+<ul>
+  <li>The preview pane can be toggled with the editor. Previewing in a popup window is still available.</li>
+  <li>Option to automatically update the preview as the editor changes.</li>
+  <li>Indicator in the statusbar shows errors. Double-click to display Error Console.</li>
+  <li>Option to specify the snippet used to load the editor on startup.</li>
+  <li>Option to include a user snippet file. The snippets are merged with the built-in snippets at startup.</li>
+  <li>Double-click or drag-and-drop to insert a snippet</li>
+  <li>File &gt; New allows user to pick any “Template” snippet, as well as blank.</li>
+  <li>Simple XUL Checker can be used to ‘validate’ the XUL snippet. It checks for legal element and attribute names, including allowed attributes for a given element.</li>
+  <li>Support attribute value checking where appropriate (boolean and enumerated values) - XUL Checker</li>
+  <li>Support “best practice” checks such as: using of commands and keys, strings in DTDs and so on - XUL Checker</li>
+  <li>Multi-tabbed editor support</li>
+  <li>Support wizards to generate common projects - extensions</li>
+  <li>Support extension testing using Firefox extension Test mode</li>
+  <li><a href="/en/Venkman" title="en/Venkman">Venkman</a> support</li>
+  <li><a href="/en/DOM_Inspector" title="en/DOM_Inspector">DOM Inspector</a> support</li>
+</ul>
+<p>Future:</p>
+<ul>
+  <li>Support more “best practice” checks such as: more A11y checks, strings in DTDs and so on - XUL Checker</li>
+  <li>Allow users to add snippets on the fly</li>
+  <li>Add sidebars for more functionality - Property Sidebar and Project Sidebar</li>
+  <li>Support wizards to generate common projects - XUL files, JS XPCOM, and XULRunner applications</li>
+</ul>
+<p>For more detailed information, see the {{ interwiki('wikimo', 'XUL_Explorer:Planning#Feature_Planning_for_XUL_Explorer') }}.</p>
+<h3 id="Installs" name="Installs">Installs</h3>
+<p>Latest Version:</p>
+<ul>
+  <li>Install (Windows): <a class="external" href="http://starkravingfinkle.org/projects/xulexplorer/xulexplorer-1.0a1pre.en-US.win32.exe" title="http://starkravingfinkle.org/projects/xulexplorer/xulexplorer-1.0a1pre.en-US.win32.exe">xulexplorer-1.0a1pre.en-US.win32.exe</a> 6.6MB</li>
+  <li>Install (Mac): <a class="external" href="http://starkravingfinkle.org/projects/xulexplorer/xulexplorer-1.0a1pre.en-US.mac.dmg" title="http://starkravingfinkle.org/projects/xulexplorer/xulexplorer-1.0a1pre.en-US.mac.dmg">xulexplorer-1.0a1pre.en-US.mac.dmg</a> 9.3MB</li>
+  <li>Install (Linux): <a class="external" href="http://starkravingfinkle.org/projects/xulexplorer/xulexplorer-1.0a1pre.en-US.linux-i686.tar.bz2" title="http://starkravingfinkle.org/projects/xulexplorer/xulexplorer-1.0a1pre.en-US.linux-i686.tar.bz2">xulexplorer-1.0a1pre.en-US.linux-i686.tar.bz2</a> 8.4MB</li>
+</ul>
+<h3 id="Contributing" name="Contributing">Contributing</h3>
+<ul>
+  <li><a class="external" href="http://svn.mozilla.org/projects/xul-explorer/">Source code in SVN</a></li>
+  <li>Bugzilla (for bugs and suggestions) <a class="link-https" href="https://bugzilla.mozilla.org/buglist.cgi?query_format=advanced&amp;product=Other+Applications&amp;component=XUL+Explorer&amp;resolution=---&amp;chfieldto=Now">open bugs</a>, <a class="link-https" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Other%20Applications&amp;component=XUL%20Explorer">enter new bug</a></li>
+</ul>
+<h3 id="Blog_Posts" name="Blog_Posts">Blog Posts</h3>
+<p><a class="external" href="http://starkravingfinkle.org/blog/2008/10/xul-explorer-updated/" title="http://starkravingfinkle.org/blog/2008/10/xul-explorer-updated/">XUL Explorer - Updated (1.0a1pre)</a><br>
+  <a class="external" href="http://starkravingfinkle.org/blog/2007/06/xul-explorer-04-finally/">XUL Explorer 0.4</a><br>
+  <a class="external" href="http://starkravingfinkle.org/blog/2007/02/xul-explorer-03/">XUL Explorer 0.3</a><br>
+  <a class="external" href="http://starkravingfinkle.org/blog/2006/12/xul-explorer-02/">XUL Explorer 0.2</a><br>
+  <a class="external" href="http://starkravingfinkle.org/blog/2006/12/exploring-xul/">Exploring XUL</a></p>
+<p>{{ languages( { "pl": "pl/XUL_Explorer" } ) }}</p>
diff --git a/files/de/zones/index.html b/files/de/zones/index.html
new file mode 100644
index 0000000000..84e97fdbe6
--- /dev/null
+++ b/files/de/zones/index.html
@@ -0,0 +1,53 @@
+---
+title: Bereiche
+slug: Zones
+translation_of: Zones
+---
+<p>MDN-Bereiche stellen Zugriff auf Informationen über spezifische Themengebiete und Produkte zur Verfügung. Hier ist eine Liste mit allen Bereichen, die Ihnen zur Verfügung stehen.</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 id="Web-_und_App-Entwicklung">Web- und App-Entwicklung</h2>
+
+<dl>
+ <dt><a href="/en-US/Apps">App-Zentrum</a></dt>
+ <dd>Lernen Sie, wie Sie offene Web-Anwendungen erstellen – reichhaltige Erlebnisse, welche auf verschiedensten Endgeräten und Formfaktoren ausgeführt werden können – verwenden Sie dabei die gleichen Webstandards und offenen Technologien, wie Sie sie schon kennen.</dd>
+ <dt><a href="/en-US/docs/Tools">Entwicklerwerkzeuge</a></dt>
+ <dd>Lernen Sie, wie Sie die Entwicklerwerkzeuge von Firefox beim Debuggen, Testen und Optimieren Ihrer Web-Anwendungen und Seiten verwenden.</dd>
+ <dt><a href="/en-US/Marketplace">Firefox-Marktplatz</a></dt>
+ <dd>Ein offener, nicht-proprietärer Online-Marktplatz für Web-Anwendungen basierend auf HTML, CSS und JavaScript. Übertragen Sie Apps zum Firefox-Marktplatz oder verwenden Sie den Code, um Ihren eigenen Marktplatz aufzubauen.</dd>
+ <dt><a href="/en-US/docs/Games">Spieleentwicklung</a></dt>
+ <dd>Lernen Sie, wie Sie Spiele für das Web entwickeln, wie Sie existierende Spiele für Web-Technologien aufbereiten und wie Sie Ihr Spiel in eine Web-App verwandeln.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Developer_Program">Mozilla-Entwicklerprogramm</a></dt>
+ <dd>Lernen Sie mehr über das Mozilla-Entwicklerprogramm, bei dem Sie sich für eine Mitgliedschaft anmelden, unseren Newsletter abonnieren können und Zugriff auf unser wachsendes Eigenschaftsfeld für Web-Entwickler haben.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 id="Products" name="Products">Produkte und Projekte</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Emscripten">Emscripten</a></dt>
+ <dd>Ein LLVM für JavaScript-Compiler. Dieser ermöglicht zum Beispiel, C++-Code in JavaScript-Code, welcher im Browser ausgeführt werden kann, zu kompilieren.</dd>
+ <dt><a href="/en-US/docs/L20n">L20n</a></dt>
+ <dd>Eine JavaScript-Lokalisierungsgrundstruktur, welche die Möglichkeiten Ihrer Muttersprache mit einfachem Code entfesselt.</dd>
+ <dt><a href="/en-US/docs/Project:MDN">Das MDN-Projekt</a></dt>
+ <dd>Das Mozilla-Entwickler-Netzwerk (diese Seite) verlässt sich auf seine Gemeinschaft aus Lesern und Beitragserstellern, um zu wachsen und sich zu verbessern. Sie können hier lernen, wie Sie helfen können, den Code, der hinter MDN steht, zu verwenden, zu ihm beizutragen und ihn erstellen.</dd>
+ <dt><a href="/en-US/Persona">Persona</a></dt>
+ <dd>Ein von Mozilla neu entwickeltes, einfaches, Privatsphäre-sensibles Einzelanmeldesystem, welches Nutzern ermöglicht, sich mit ihrer E-Mail-Adresse an Ihre Webseite anzumelden, und Sie damit von der Passwortverwaltung befreit.</dd>
+</dl>
+
+<h2 id="Mozilla-Technologien">Mozilla-Technologien</h2>
+
+<dl>
+ <dt><a href="/en-US/Add-ons">Add-ons</a></dt>
+ <dd>Lernen Sie, wie Sie Erweiterungen, Themen und Plug-Ins für den populären Firefox-Browser und andere auf Mozilla basierende Software erstellen und installieren.</dd>
+ <dt><a href="/en-US/Firefox">Firefox</a></dt>
+ <dd>Lernen Sie alles über Firefox, wie Sie es erstellen und überarbeiten oder wie Sie spezielle Add-ons für Firefox erstellen.</dd>
+ <dt><a href="/en-US/Firefox_OS">Firefox OS</a></dt>
+ <dd>Ein von Mozilla neu entwickeltes Handy-Betriebssystem, welches Nutzern ermöglicht, offene auf HTML, CSS und JavaScript basierende Internet-Anwendungen zu installieren und auszuführen.</dd>
+</dl>
+</div>
+</div>
+
+<p> </p>